智能手機(jī)幾乎已經(jīng)滲透到了我們生活的方方面面罕伯，各種各樣的app幫助我們生活的更加便利。設(shè)計(jì)師的工作職能就是給用戶提供滿足需求的UI叽讳，并且讓用戶在使用的過程中追他，獲得愉快而滿意的體驗(yàn)。為了建立有效的UI岛蚤，設(shè)計(jì)師需要深入的了解移動端app的特性邑狸，了解他們的組成部分和功能。現(xiàn)如今隨著移動行業(yè)的快速發(fā)展涤妒，很難給所有的app建立一個統(tǒng)一的界面標(biāo)準(zhǔn)单雾，這篇文章將會介紹幾種最常見、最流行的移動端UI界面她紫，并展示他們不同的設(shè)計(jì)特點(diǎn)硅堆。

常見的幾種界面

啟動頁

首次使用app時彈出的啟動頁，是影響用戶第一印象的重要因素贿讹，這種最初的愉悅體驗(yàn)很有可能讓這款app流行起來渐逃。這就是為什么要格外重視啟動頁的原因。

啟動頁是用戶打開app時看到的第一個界面民褂，它們通常很簡潔茄菊，往往是一個logo、app的名稱或者是這個產(chǎn)品的一句slogan助赞。確保啟動頁在各個不同分辨率的屏幕上適配良好买羞，設(shè)計(jì)師們常常把它們放在屏幕的中間袁勺，啟動頁的建議顯示時間是4~8秒之間雹食，超過這個區(qū)間，用戶可能會感覺厭煩期丰。此外群叶，最好顯示加載進(jìn)度吃挑，這樣一些不耐煩的用戶就會知道還要多久才可以進(jìn)入app。

引導(dǎo)頁

引導(dǎo)頁是app可能提供給新用戶的一組介紹產(chǎn)品功能街立、特性以及優(yōu)點(diǎn)的界面舶衬，它們在用戶首次使用的時候加載，幫助用戶熟悉它的控件和對應(yīng)功能赎离，讓用戶更好的上手使用逛犹，并且?guī)椭脩襞袛噙@款軟件是否有用。

雖然每一款app的結(jié)構(gòu)和內(nèi)容都是非常獨(dú)立的梁剔，然而它們的引導(dǎo)頁還是有一些相同的設(shè)計(jì)趨勢虽画。首先，很多引導(dǎo)頁都習(xí)慣于用插畫的形式來表現(xiàn)他們的新特性或者優(yōu)點(diǎn)荣病，這對用戶很有吸引力码撰，同時開發(fā)成本也很低。設(shè)計(jì)師們也常常會為app創(chuàng)建一個卡通形象个盆，用它來模擬真實(shí)的使用場景脖岛，將它作為一種連接用戶與app的情感紐帶。引導(dǎo)頁的文案也是十分重要的颊亮，它應(yīng)該是簡短的柴梆、有幫助的并且具有可讀性。

Underwater World Encyclopedia app的引導(dǎo)頁

首頁和菜單欄界面

首頁是每個app必不可少的界面终惑，在app中起承上啟下的作用轩性，它是用戶與app產(chǎn)生交互的主要界面。首頁的設(shè)計(jì)取決于產(chǎn)品的類型狠鸳，它包含各種各樣常見的重要組件揣苏。首先，首頁通常包含搜索欄或者搜索icon件舵，可以幫助用戶很方便的搜索他們需要的內(nèi)容卸察。同時，因?yàn)槭醉撌怯脩敉ㄍ鵤pp各個功能的起點(diǎn)铅祸，它通常包含導(dǎo)航欄坑质，讓用戶可以訪問到不同的單元模塊。

Homey app的首頁

為了讓用戶的交互更簡單临梗，可以創(chuàng)建一個菜單涡扼，里面包含一些常用的功能，僅通過一次點(diǎn)擊即可抵達(dá)盟庞。這里有兩種app菜單欄的布局方法：它可以是首頁的一部分吃沪，或者是一個獨(dú)立的頁面，里面包含的內(nèi)容最好少于7項(xiàng)什猖，僅展示最重要的部分票彪，如果想要包含更多內(nèi)容红淡，可以創(chuàng)建子類別。

側(cè)邊欄菜單

登錄和個性化設(shè)置界面

許多app都要求用戶注冊登錄自己的個人賬號降铸，所以每一個設(shè)計(jì)師都應(yīng)該知道怎么樣來設(shè)計(jì)登錄界面在旱，登錄界面應(yīng)該簡潔清晰，以便用戶可以快速的進(jìn)入app推掸。該界面通常有兩個輸入框桶蝎，用來輸入登錄名和密碼，和一個確認(rèn)按鈕谅畅。同時還應(yīng)該有注冊按鈕俊嗽。

個性化設(shè)置可以使app更加的適用于個人，并且可以幫助app為用戶提供最有效的數(shù)據(jù)信息铃彰。同時绍豁，個性化設(shè)置數(shù)據(jù)也是所有社交網(wǎng)絡(luò)app的關(guān)鍵部分，它引導(dǎo)用戶進(jìn)入虛擬社區(qū)網(wǎng)絡(luò)牙捉，并且開始與其他人進(jìn)行分享竹揍。設(shè)計(jì)師的主要任務(wù)就是通過流暢的UX設(shè)計(jì)，使這一步驟盡可能的方便友好邪铲。據(jù)交互設(shè)計(jì)組織所說芬位，設(shè)計(jì)師首要考慮的是，個性化設(shè)置界面應(yīng)該清晰明確带到，展示的信息數(shù)量應(yīng)該限制在一定范圍內(nèi)昧碉，否則整個界面看上去會很亂很復(fù)雜。同時要時刻確保導(dǎo)航欄清晰可見揽惹，這樣用戶就不用花費(fèi)太多精力去摸索app被饿。最后，個性化設(shè)置界面的設(shè)計(jì)應(yīng)該以目標(biāo)受眾為主導(dǎo)搪搏，如果想要你的app滿足用戶的使用需求狭握，那么用戶研究是必不可少的。

Dating App

數(shù)據(jù)統(tǒng)計(jì)界面

很多app都包含數(shù)據(jù)統(tǒng)計(jì)界面疯溺。它提供的數(shù)據(jù)越多论颅，設(shè)計(jì)難度就越大。設(shè)計(jì)師需要確保所有的重要數(shù)據(jù)在屏幕上都是清晰可見并且有用的囱嫩，曲線圖恃疯、比例尺和統(tǒng)一的icon可以使整個界面看上去很流暢、很整潔墨闲。此外今妄，數(shù)據(jù)統(tǒng)計(jì)界面需要為不同的數(shù)據(jù)劃分不同的區(qū)域，以方便用戶閱讀。

NGIN App

日歷

事件app蛙奖、待辦清單app和一些個人app都有日歷界面潘酗，取決于app的類型杆兵，日歷主要有這么幾種功能：提醒或者制定計(jì)劃雁仲。它的視覺風(fēng)格應(yīng)該符合用戶的心情和使用目的。

Bright Vibe Calendar App

電商類app界面

產(chǎn)品列表頁

所有的電商平臺主要目的都是為了銷售產(chǎn)品琐脏，它的視覺設(shè)計(jì)對用戶的決策有很大的影響攒砖。產(chǎn)品列表是公司銷售的一系列商品。設(shè)計(jì)師的工作是設(shè)計(jì)一個可以吸引用戶并且鼓勵他們購買商品的頁面日裙。移動端的產(chǎn)品列表也可以像一些web端的電商平臺一樣吹艇，將產(chǎn)品類目放置在一個容器中，可以通過上滑來查看昂拂，一行中放置的產(chǎn)品數(shù)量應(yīng)該根據(jù)屏幕寬度來決定受神。

Resto App

另一種展示產(chǎn)品列表的交互方式是水平滑動，為了讓導(dǎo)航更加清晰明確格侯，頁面中最后一個選項(xiàng)不應(yīng)該完全展示鼻听，這樣可以提示用戶滑動的方向。此外联四，產(chǎn)品的照片或者是插圖應(yīng)該是高清的撑碴，這樣用戶可以更好的了解他們要購買的商品。產(chǎn)品列表界面應(yīng)該有一個行為召喚按鈕朝墩，用戶通過這個按鈕可以將商品添加到購物車醉拓。這樣用戶就能從產(chǎn)品列表界面獲取到商品，不用再額外跳轉(zhuǎn)到特定的界面收苏。

Cafe Coupon app

產(chǎn)品詳情頁

這個界面是給那些想要進(jìn)一步的人亿卤，提供更多關(guān)于產(chǎn)品的信息，它用來展示產(chǎn)品的一些主要信息鹿霸，以此來幫助用戶決定他們是否真的需要這個產(chǎn)品怠噪。設(shè)計(jì)師一般將產(chǎn)品的展示圖片放在屏幕中央，相關(guān)描述放在圖片下方杜跷。設(shè)計(jì)師可以將尺寸傍念、材質(zhì)或者其他數(shù)據(jù)分成不同的模塊，以便用戶可以輕松的找到他們所需要的信息葛闷。

珠寶電商app

確認(rèn)支付頁面

如今越來越多的人愿意使用智能手機(jī)線上支付憋槐，各大公司紛紛對這一環(huán)節(jié)開始加以重視，力求打造最便捷的支付體驗(yàn)淑趾。支付是用戶購買商品的最后一步阳仔，設(shè)計(jì)師的職責(zé)是讓用戶在使用的過程中感覺舒服。首先，確認(rèn)支付頁面的必有的部分是一個表單近范，用來填寫一些個人信息嘶摊，諸如姓名、銀行卡賬號此類评矩。填寫信息類別取決于用戶在何地產(chǎn)生購買行為叶堆。此外，至關(guān)重要的一點(diǎn)是讓用戶知道他個人信息是安全的斥杜，所以設(shè)計(jì)師必須通過一些視覺元素讓用戶知道這些信息不會被泄露出去虱颗，令他們安心≌嵛梗可以使用一系列已經(jīng)約定俗成的icon忘渔，它們被賦予了特定意義，并且經(jīng)過了大公司的檢驗(yàn)缰儿。

Cinema app

社交軟件界面

聯(lián)系人

聯(lián)系人列表已經(jīng)存在很久了畦粮，從最初的紙筆演變到今天的電子載體，它視覺風(fēng)格如此多變的一個主要原因是：想要幫助人們保存朋友或者其他重要聯(lián)系人的信息乖阵。聯(lián)系人列表向用戶展示的聯(lián)系人應(yīng)該按照首字母排序宣赔，每一個聯(lián)系人都應(yīng)該是可觸的，點(diǎn)擊進(jìn)去后顯示電話號碼义起、E-mail之類的詳細(xì)信息拉背，比如Skype、Messenger之類的聊天軟件默终。同時可以允許用戶上傳照片椅棺，幫助用戶更方便的搜索聯(lián)系人。

聯(lián)系人界面

音樂播放器

音樂列表

音樂愛好者們喜歡根據(jù)不同類別創(chuàng)建自己的歌單齐蔽，很顯然每個音樂app都應(yīng)該為用戶提供這樣的功能两疚，列表頁在不同的app上看起來都差不多：它會顯示歌曲名稱、歌手或者樂隊(duì)含滴，以及歌曲的長度诱渤。同時設(shè)計(jì)師可以為這首歌曲添加一張圖片，可以是它的專輯封面谈况。如果一首歌曲沒有封面勺美，那么這個位置仍然應(yīng)該有一個icon，例如碑韵，一個音符標(biāo)志赡茸。

Music app

播放頁

人們可以通過它來控制自己聽到的歌曲，該功能包括切歌祝闻、暫停和播放占卧，這里需要醒目、易于識別的button。這一部分通常放在屏幕底部中央华蜒，上方主要部分放置一個與歌曲相關(guān)的圖片辙纬，但是也有一些設(shè)計(jì)師會在此區(qū)域做一些音樂可視化的動效，這對于設(shè)計(jì)師來說是展示想象力和創(chuàng)造力的好機(jī)會叭喜。

ECHO app

現(xiàn)如今贺拣，移動端app快速發(fā)展，每天都有大量的新商品出現(xiàn)域滥，它們在解決用戶新型需求的同時也產(chǎn)生了很多新型界面纵柿，設(shè)計(jì)師應(yīng)該做好準(zhǔn)備面臨這一挑戰(zhàn)蜈抓，一直保持創(chuàng)新精神启绰，從啟發(fā)中迸發(fā)靈感。

------

譯文來源：uxplanet.org