干貨推薦|40款獨(dú)特的移動(dòng)導(dǎo)航用戶界面

3 評(píng)論 13185 瀏覽 193 收藏 10 分鐘

越是簡(jiǎn)易,你的APP/網(wǎng)站就越出色。移動(dòng)用戶的界面可以有很多種形式和風(fēng)格。

提起設(shè)計(jì)APP,最重要的就是導(dǎo)航了。無論是應(yīng)用在臺(tái)式機(jī),還是移動(dòng)設(shè)備,導(dǎo)航都必須得直觀、有趣。水平的、垂直的、簡(jiǎn)約的或者詳盡的,設(shè)計(jì)上都必須給人以美感,同時(shí)能真正起到合理的作用,達(dá)到預(yù)期的效果。APP的設(shè)計(jì)必須立足于用戶,一絲不茍于每一個(gè)細(xì)節(jié),讓用戶都能輕而易舉上手使用。一旦你實(shí)現(xiàn)了這一點(diǎn),你就已經(jīng)設(shè)計(jì)出了非常功能化及人性化的產(chǎn)品。

越好的APP/網(wǎng)站,用戶需要操作的就越少。越是能讓用戶更簡(jiǎn)單的使用,無論產(chǎn)品的注重點(diǎn)是在銷售,形式,還是讓客戶通過APP/網(wǎng)站進(jìn)行各種信息的共享,都能更好的轉(zhuǎn)換。同時(shí),如果用戶能有一個(gè)愉快的操作經(jīng)歷,他們才會(huì)有可能繼續(xù)使用這款A(yù)PP,并且推薦給其他人。作為一個(gè)設(shè)計(jì)師,要把這個(gè)當(dāng)成優(yōu)先重點(diǎn),盡一切可能讓用戶以最簡(jiǎn)易的方式瀏覽你的APP/網(wǎng)站,你其實(shí)已經(jīng)事半功倍了。

好的移動(dòng)導(dǎo)航,你必須堅(jiān)持這些基本,然而卻是最重要的原則。具體表現(xiàn)在它的外形、簡(jiǎn)潔、一致性、互動(dòng)性、風(fēng)格以及可達(dá)性。APP/網(wǎng)站必須有一個(gè)清晰、簡(jiǎn)潔的外觀,在不會(huì)混淆用戶注意力,即促進(jìn)導(dǎo)航的前提下,你可以加入自己獨(dú)特的風(fēng)格。簡(jiǎn)潔是關(guān)鍵,是基本要素。但不等于無趣,就做成和其它的APP一樣。記住,想脫穎而出讓用戶駐足并提高參與,你的設(shè)計(jì)里所有的頁(yè)面必須始終如一地使用相同的導(dǎo)航模塊,使其最大程度上互相作用,讓用戶清楚自己身處何處,一直在做于何事(當(dāng)有人暫停鼠標(biāo)時(shí),改變字體顏色,加黑體字,并添加簡(jiǎn)短行為描述。)最后,確保你的用戶導(dǎo)航在任何設(shè)備上都能使用流暢,這樣所有人都能快速登錄來測(cè)試你的設(shè)計(jì)。

在這里,當(dāng)你面對(duì)一個(gè)UI設(shè)計(jì)項(xiàng)目,你有40款獨(dú)特的移動(dòng)導(dǎo)航用戶界面可以作為靈感。這些APP都是遵守了上述原則的優(yōu)秀設(shè)計(jì)案例,有報(bào)價(jià)APP、健身APP、任務(wù)管理APP、旅游APP等等。如果你正趕著最后期限,沒有時(shí)間從零開始設(shè)計(jì),你可以使用其中的一些APP進(jìn)行一些個(gè)人或者商業(yè)的用途。

Snap Task

Snap-Task

Fitness App UI

Fitness-App-UI

Volcano App (Folded menu)

Volcano-App-(Folded-menu)

Menu

Menu

BFC Partners Mobile

BFC-Partners-Mobile

Portfolio App

Portfolio-App

Side Menu

Side-Menu

Project Manager

Project-Manager

Mobile Dropdown Slider

Mobile-Dropdown-Slider

Side menu animation

Side-menu-animation

English Cards Animation

English-Cards-Animation

Quotes app (Sketch freebie)

Quotes-app-(Sketch-freebie)

Travel App

Travel-App

Menu by Frantisek Kusovsky

Menu-by-Frantisek-Kusovsky

Slide Menu (code)

Slide-Menu-(code)

iPhone App Design /// Opened Menu

iPhone-App-Design-Opened-Menu

MetroLite App

MetroLite-App

Fantasy Leagues App

Fantasy-Leagues-App

iOS Menu Concept

iOS-Menu-Concept

Medium for iPhone

Medium-for-iPhone

Mixpanel Navigation Menu Icons/UI

Mixpanel-Navigation-Menu-Icons-UI

Keezy menu

Keezy-menu

Menu Concept 1

Menu-Concept-1

GIF: Menu animation

GIF-Menu-animation

‘Scout’ home screen

'Scout'-home-screen

Nextr filter settings

nextr-filter-settings

Nav

Nav

Public Transportation iPhone App

Public-Transportation-iPhone-App

App Media Mockup

App-Media-Mockup

Mobile Menu

Mobile-Menu

WhatsApp Redesign [Unofficial]

WhatsApp-Redesign-[Unofficial]

SideMenu Real Pixels by Tomas Jasovsky

SideMenu-Real-Pixels-by-Tomas-Jasovsky

Menu slider/ feed screen

Menu-slider--feed-screen

The Flyer app – Profile and Sidebars

The-Flyer-app---Profile-and-Sidebars

Dashboard – Realtor Project

Dashboard---Realtor-Project

Tasks with people

Tasks-with-people

Voting screen (side menu)

Voting-screen-(side-menu)

Clyp – iPhone Sidebar

clyp---iPhone-Sidebar

Mobile Portfolio

Mobile-Portfolio

DROP CALLING

DROP-CALLING

 

作者:?Iggy

原文地址:http://line25.com/inspiration/mobile-navigation-user-interfaces

譯者:珊子想要去LA

譯文地址:http://www.xueui.cn/appreciate/interface-appreciate/40-unique-mobile-navigation-user-interface.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 厲害

    回復(fù)
  2. 11

    來自上海 回復(fù)
  3. 收藏

    來自本機(jī)地址 回復(fù)