APP面布局設(shè)計(jì)模板與講解

1、在一個(gè)APP的使用過程中，優(yōu)秀的頁面設(shè)計(jì)與用戶導(dǎo)航對用戶體驗(yàn)影響極 大。某些時(shí)候的第一印象與操作便決定了用戶的留存率。對于一些新手開發(fā)，獨(dú) 立開發(fā)者或者小開發(fā)團(tuán)隊(duì)，往往程序員自己就承擔(dān)了美工和設(shè)計(jì)工作。對于這些 開發(fā)者來說，往往缺少這方面的經(jīng)驗(yàn)，而如果缺少了這兩項(xiàng)，產(chǎn)品的使用體驗(yàn)是 非常不友好的。用戶體驗(yàn)是什么？用戶體驗(yàn)（User Experience，簡稱UE/UX）是用戶在使 用產(chǎn)品過程中建立起來的一種純主觀感受。但是對于一個(gè)界定明確的用戶群體來 講，其用戶體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)實(shí)驗(yàn)來認(rèn)識(shí)到。計(jì)算機(jī)技術(shù)和互聯(lián)網(wǎng) 的發(fā)展，使技術(shù)創(chuàng)新形態(tài)正在發(fā)生轉(zhuǎn)變，以用戶為中心、以人為本越來越得到重

2、視，用戶體驗(yàn)也因此被稱做創(chuàng)新2.0模式的精髓。在中國面向知識(shí)社會(huì)的創(chuàng)新 2.0應(yīng)用創(chuàng)新園區(qū)模式探索中，更將用戶體驗(yàn)作為三驗(yàn)創(chuàng)新機(jī)制之首。 ISO 9241-210標(biāo)準(zhǔn)將用戶體驗(yàn)定義為人們對于針對使用或期望使用的產(chǎn)品、 系統(tǒng)或者服務(wù)的認(rèn)知印象和回應(yīng)。通俗來講就是這個(gè)東西好不好用，用起來 方不方便。因此，用戶體驗(yàn)是主觀的，且其注重實(shí)際應(yīng)用時(shí)的產(chǎn)生的效果。我們常經(jīng)歷到，一個(gè)產(chǎn)品從設(shè)計(jì)的初期到后期完善，都會(huì)經(jīng)過一系列的迭代 和升級作為初期的設(shè)計(jì)人員，發(fā)揮的空間是很大但歷史的慘痛教訓(xùn)告訴我們， 初期的設(shè)計(jì)往往又是失敗居多，很多情況下是由于自己的局限性造成的，尤其在 后期，架構(gòu)不是想改就改，用戶習(xí)慣不是想

3、改就能改的，所有在前期，特別是上 述提到的集美工設(shè)計(jì)開發(fā)于一體的人，要慎重考慮APP的架構(gòu)設(shè)計(jì)，本文所闡 述的兩個(gè)方面，其一為頁面設(shè)計(jì)，其二為用戶導(dǎo)航。人頁面功能設(shè)計(jì)包含了首頁，注冊頁，。APP用戶導(dǎo)航，是App設(shè)計(jì)時(shí)要著重考慮的，常見的App框架有列表、網(wǎng)格、屏幕輪顯、標(biāo)簽導(dǎo)航、tab導(dǎo)航、抽屜導(dǎo)航、卡片、泳道、堆疊組合。頁面設(shè)計(jì)登錄頁面設(shè)計(jì)每一產(chǎn)品叩p都會(huì)有一個(gè)登錄頁面，它是產(chǎn)品第一次接觸用戶的頁面，也是第一個(gè)傳遞信息給用戶的媒介，由此可見它非常重要的，作為一個(gè)招牌或者是門面，一個(gè)好 的登錄頁往往會(huì)給用戶留下深刻印象，無論是界面視覺表現(xiàn)，還是流程交互體驗(yàn)，都是 不可或缺的。主要包含：產(chǎn)品L

4、OGO及公司，用戶名與密碼的輸入框（充分考慮輸入框 彈起后是否會(huì)遮擋輸入框），注冊頁面的鏈接，登錄幫助。核心功能：傳遞品牌產(chǎn)品信息，提供登錄注冊路徑，感知產(chǎn)品方向。注意對LOGO的應(yīng)用，運(yùn)用產(chǎn)品符號(hào)或是品牌符號(hào)作為設(shè)計(jì)主要元素，一是可以 傳遞品牌感，二是可以渲染產(chǎn)品行業(yè)屬性特征，兩者都能兼顧，可以是視覺沖擊力和氛 圍渲染力都非常強(qiáng)。注冊頁面設(shè)計(jì)注冊一直是應(yīng)用中必不可少的一環(huán)，用戶打開應(yīng)用可能第一步就是登錄 頁面，這相當(dāng)于一款應(yīng)用的臉面，也是用戶使用產(chǎn)品的源頭。當(dāng)然也是因?yàn)椴怀?被用到所以更最容易被忽視，它作為一項(xiàng)基礎(chǔ)功能，使用場景一般是用戶初次使 用應(yīng)用或者退出登錄，又或是大版本更新和登錄過期

5、才會(huì)使用到。注冊登錄的意 義就在于給用戶獨(dú)有的個(gè)人中心，包括數(shù)據(jù)的同步，或是用戶注冊后會(huì)通過用戶 已完善的資料進(jìn)行相關(guān)的內(nèi)容推薦。iOS 11更新帶動(dòng)了新的設(shè)計(jì)趨勢，大標(biāo)題+留白被廣泛使用，注冊登錄也不 例外，現(xiàn)在很多產(chǎn)品都使用相對簡潔的設(shè)計(jì)（下面左圖），僅使用大標(biāo)題和必要 的線框和提示語，讓用戶只聚焦注冊登錄本身，去除多余的干擾元素，可以節(jié)省用戶的時(shí)間。相對早期的設(shè)計(jì)手法是在頁面中加入10go （下面右圖），好處是可以進(jìn)一步強(qiáng)化用戶對產(chǎn)品品牌的記憶點(diǎn)。其實(shí)注冊承接的功能除了收集用戶數(shù)據(jù)外，與登錄是一致的，只不過在日常 操作中比登錄的頻次少很多。這里需要主要的是廣泛的第三方登錄與自己產(chǎn)品的 數(shù)

6、據(jù)登錄。核心功能：傳遞品牌產(chǎn)品信息，收集用戶數(shù)據(jù)。Enter Your DetailsWelcome to our 叩pU 注E-mziflllRepeat PiswordCreate Account第三方登錄的方式，一般在頁面下方提供鏈接。核心功能：傳遞品牌產(chǎn)品信息，收集用戶數(shù)據(jù)。Enter Your DetailsWelcome to our 叩pU 注E-mziflllRepeat PiswordCreate Account第三方登錄的方式，一般在頁面下方提供鏈接。概述頁面與設(shè)置設(shè)計(jì)這里的概述頁面一般指的是展示用戶信息的頁面，在此頁面中，需要將用戶感興趣的信息展示出來。喘碎|鼠Uk站Pr

7、ofilepaul examiplE.camPremiumPush NotificationsSynchronize GoatsInstant UploadFollowing IFodowErs(Jenny Smith=喘碎|鼠Uk站Profilepaul examiplE.camPremiumPush NotificationsSynchronize GoatsInstant UploadFollowing IFodowErs(Jenny Smith=Adi” | Female | Mm 02-2al995Ne?ct ApptLail VisitDue SaleMctie1,201?Jsn

8、1. 2019Cnrtact lfarmatidhEm ailjennympHome(555)555-5555Mobile(555)555-5555Wait(555)555-5555SettingsDorw-SettingsDorw-E HYPERLINK mailto:bobeMtfnpA bobeMtfnpA自PrM%o修tLnwMvctanHbph，-ooOoudl UploadJ ,oPremium Ratings$Payment ModeCha)首頁設(shè)計(jì)功能眾多，可以采用圖標(biāo)型或者卡片型。（九宮格+TabControl）,這樣功能簡潔明了，類別區(qū)分清晰，對于一些功能型軟件，用戶能很快

9、找到他所需要的功e HOME S ACTMT7 0 EVENTS 犬 MEALSWELCOME9 | e HOME S ACTMT7 0 EVENTS 犬 MEALSWELCOME9 | CHECKiNBOW A CLASSSCHEDLLF TRAININGQCUkSS SEARCHCLUfiSINVITE A FRiOOSTORYSELECT A SIZESTORIESSQUARE列表是單一的連續(xù)元素以垂直排列的方式顯示多行信息，有純文本列表，也 有圖文結(jié)合的列表。首頁使用列表布局，多用于推薦熱門資訊。作品羅列型，是將用戶的信息或者作品呈現(xiàn)在首頁，在商業(yè)應(yīng)用上，有的App是把作品精選放到首頁

10、，這類App的作品有些是編輯自己制作的，比如 VOUN ；也有些是用戶提交，編輯精選的，比如SuperFX ；也有些是用戶自己 發(fā)布的，比如美拍。這個(gè)類型的App因?yàn)橹谱骱每吹淖髌芳某杀颈容^低，操作比較簡單，所 以放作品集。一方面讓用戶覺得自己也是可以把作品做的這么有趣和好看的， 增強(qiáng)用戶的信心。另外一方面，用戶的作品展示出來被看到被點(diǎn)贊，也讓用戶 有成就感，形成良性循環(huán)。用戶導(dǎo)航常見的app框架有列表、網(wǎng)格、屏幕輪顯、標(biāo)簽導(dǎo)航、tab導(dǎo)航、抽屜導(dǎo)航、 卡片、泳道、堆疊組合。其實(shí)將這方面獨(dú)立出來講時(shí)因?yàn)?，在用戶體驗(yàn)后，如果對整體效果感到滿意， 他將會(huì)立刻去尋找自己所需要的功能，那么，APP類

11、的用戶導(dǎo)航是十分重要的， 雖然與頁面設(shè)計(jì)相關(guān)性不大，卻與用戶體驗(yàn)息息相關(guān)。而這些導(dǎo)航單獨(dú)出來設(shè)計(jì) 非常容易，在現(xiàn)實(shí)使用中確往往是交叉重合，如何在設(shè)計(jì)初期考慮好這些問題， 對整個(gè)App的生命周期都非常重要。列表列表，常見于功能比較單一的應(yīng)用場景，是叩p中最常用的一種方式。列 表內(nèi)容常見形式有：文字列表、圖標(biāo)和文字的混合列表、標(biāo)簽和控件（復(fù)選框、 按鈕冽表、圖片和視頻縮略圖與文字組合列表。遵循由上至下的閱讀習(xí)慣方式， 所以使用起來用戶不會(huì)覺得困難。合理的應(yīng)用列表，對于較好的用戶體驗(yàn)提升是 非常大的。 IM中El*由一上年紀(jì)1 -r v B4C- - 1 ”T5；0 日國嶗的喀肥或更其中m挈時(shí) yf

12、iffftfi.i -r t -)性直Q卻嗔就 施瑛同宜河El hs四建寓捌河培*由通通送鬲晝54方總式西田 方便B*#TXZ2S.rMfrfl 7tM4產(chǎn) h /系 r i r t M電?&5i之泡二：1ESJcF * r%舊有年彈一，中用挎層.9 野療，K光臨 ZWVTlIE*!*/聿 1Q PN， JIB4 hir-BfiEJ運(yùn)片商,： ：國：49CJ5 9mi&*x *If Ti外壇山就E南北遭訪三E 京，戶建方正M光充足Q通知,1： j； | r-Hiiaaipa 胃壬口角國儂中心JBD-T7 m ! i-Q mfiit圖用安樂季端零.第五異單一 位后.比心出暑lanFiojMV廝f

13、itrBH3R電通用 o-iQ3訪與黨慶任系anw中，后1?弛若巖Mice家蛇設(shè)EL刑聶導(dǎo)破網(wǎng)格網(wǎng)格最典型的代表就是九宮格，在APP設(shè)計(jì)中十分常見。網(wǎng)格（grid ）就是 能圖標(biāo)等內(nèi)容根據(jù)水平方向和垂直方向劃分所構(gòu)成的輔助線進(jìn)行布局。在界面設(shè) 計(jì)中，九宮格這種類型的構(gòu)圖更為規(guī)范和常用，用戶在使用過程中非常的方便， 應(yīng)用功能會(huì)顯得格外的明確和突出。很明顯的例子就是iPhone、安卓、windows phone主界面，均是采用的網(wǎng)格布局設(shè)計(jì)。在應(yīng)用中，網(wǎng)格布局通常用來展示模塊功能或者軟件所需要展示的信息和媒 體內(nèi)容。或者是包含圖像、文本、按鈕、鏈接元素的卡片。點(diǎn)擊某一個(gè)格子時(shí)， 會(huì)進(jìn)入到下一級內(nèi)容

14、，展現(xiàn)出另一個(gè)網(wǎng)格、內(nèi)容列表、空間列表、預(yù)覽頁面、詳 情頁面等。也可能會(huì)在當(dāng)前頁面彈出模態(tài)頁面，進(jìn)行更多操作。翻E克件$2I翻E克件$2I口S主界面阿布應(yīng)用windows phond網(wǎng)格應(yīng)用口憎曰屏幕輪顯屏幕輪顯（screen carousels）也是一種常見的交互方式，使用者可以向左或者向右滑動(dòng)進(jìn)行快速切換頁面，比較適合頁面層級較低的交互，幾乎不需要 進(jìn)一步的交互（也不需要像堆疊模式深入導(dǎo)航）。輪顯通常在屏幕下方有一個(gè)頁標(biāo)（小圓點(diǎn)）來導(dǎo)航。輪顯的優(yōu)點(diǎn)就是交互層級低，一般不需要用戶更多的點(diǎn)擊操作，適合層級簡單的應(yīng)用，一個(gè)頁面基本就能滿足需求。缺點(diǎn)就是不 適合交互復(fù)雜的app。常見的有ios的天

15、氣應(yīng)用、墨跡天氣、常見的app引導(dǎo) 頁。G103 hPs星即日31招13七皇明一 思明二 至期一 星期四 呈助五上海市G103 hPs星即日31招13七皇明一 思明二 至期一 星期四 呈助五上海市唯問各云:C 3天三輪元“全新時(shí)景首頁近景史多精軍用窗抽屜導(dǎo)航抽屜（drawer）熟稱漢堡導(dǎo)航，往往是隱藏式導(dǎo)航，是把更多標(biāo)簽集合在 一起，隱藏在抽屜中，點(diǎn)擊抽屜圖標(biāo)，展示出來。和標(biāo)簽欄一樣，被選中的項(xiàng) 目會(huì)高亮展示。抽屜里的欄目樣式不限定，常見的是文字列表或者帶圖標(biāo)的列 表，當(dāng)然還有其他更多形式。抽屜的樣式有兩種，一種直接覆蓋在原頁面上， 另一種是將原頁面擠過去并排展示。抽屜的圖標(biāo)一般是放在左上角，

16、但也有次 要的抽屜放在右上角。抽屜的使用也一直備受爭議，支持者認(rèn)為，手機(jī)屏幕小，隱藏菜單，能展 示更多的內(nèi)容；反對者認(rèn)為，抽屜將功能隱藏起來，需要多一步操作，很多功 能不明顯，影響了使用。當(dāng)然，兩方的說法都沒有錯(cuò)，只是我們要合理使用。對于常用的功能應(yīng)用，使用抽屜并沒多大影響，用戶會(huì)很快適應(yīng)。如果你使用 抽屜，建議首次進(jìn)入時(shí)直接打開抽屜，或者采用首次引導(dǎo)。但是，本身應(yīng)用就 很少被用到，建議使用標(biāo)簽導(dǎo)航，主流應(yīng)用也是以標(biāo)簽導(dǎo)航為主的。中 13簫育07:13 Li4y埠樣 peng激理事次-國母日最提 患電免推葬 潴現(xiàn)也陰 3文事專磔 0克一下式 白城的應(yīng)展Inkboardcp-sn中鼻泳道Inkb

17、oardcp-sn中鼻泳道是一組垂直排列的輪顯，每個(gè)輪顯能獨(dú)立水平滾動(dòng)互不影響。泳道 結(jié)合了網(wǎng)格布局的方法，排列比較規(guī)整。泳道的交互形式主要是：水平滑動(dòng) （展示單條泳道里面更多的內(nèi)容）垂直滑動(dòng)（展示更多泳道）、點(diǎn)擊（進(jìn)入泳道的下一層級）泳道需要注意的是，不能設(shè)置為自動(dòng)滾動(dòng)。在進(jìn)行排版時(shí)，將 泳道內(nèi)的最后一個(gè)內(nèi)容露出部分，引導(dǎo)用戶進(jìn)行水平滑動(dòng)，垂直布局上也應(yīng)該 如此，減少用戶的迷茫。使用泳道是要謹(jǐn)慎使用的，因?yàn)楹竺姹浑[藏的內(nèi)容是 不容易被發(fā)現(xiàn)的，所以使用泳道的時(shí)候要考慮到優(yōu)先級的問題。I BOG:RTDRE 歸天月迪 肚人靠步仃據(jù)比士.世曰 I BOG:RTDRE 歸天月迪 肚人靠步仃據(jù)比士.世曰 goo陽C 口泳迪卡片卡片包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關(guān)信息，例如，關(guān)于 單一主題的照片，文本，和鏈接?？ㄆＲ姷慕M織形式是列表，有時(shí)候也會(huì)以網(wǎng)格、輪顯、