01.原型的概念

原型設(shè)計(jì)

為了讓用戶能夠更直觀的評(píng)估產(chǎn)品設(shè)計(jì)，避免將錯(cuò)誤帶到最終的產(chǎn)品中去，從而根據(jù)構(gòu)思設(shè)計(jì)產(chǎn)品的大概草案版本，稱為原型設(shè)計(jì)

初級(jí)原型：（概念草圖）

用戶通過(guò)該種原型，對(duì)之前的需求結(jié)果有一個(gè)表象上的呈現(xiàn)，能夠更直觀的了解產(chǎn)品特征。初級(jí)原型也為設(shè)計(jì)者的思路落到實(shí)處提供途徑。

高級(jí)原型：

在產(chǎn)品邏輯、交互邏輯、視覺(jué)效果等等極度接近最終產(chǎn)品的形態(tài)。這樣不熟悉產(chǎn)品的人也能通過(guò)觀察、使用明白這個(gè)產(chǎn)品有什么用。

可交互的高級(jí)原型：

有交互效果的高保真原型，無(wú)限接近于上線稿。

原型=產(chǎn)品草圖

02.界面中的原型板式——界面基礎(chǔ)控件

通用基礎(chǔ)控件

狀態(tài)欄 status bar：顯示設(shè)備信息或用戶通知信息

導(dǎo)航欄 navigation bar：iOS和Android布局不同 安卓叫app bar

內(nèi)容content view：主要設(shè)計(jì)區(qū)域

標(biāo)簽欄 tabbar：iOS都有，安卓以前沒(méi)有，現(xiàn)在跟iOS越來(lái)越像，也有標(biāo)簽欄

對(duì)話框與提示框

彈窗可以分為4個(gè)種類，每個(gè)種類適用于不同的交互場(chǎng)景下，并不是每個(gè)彈窗都需要被確認(rèn)。這四個(gè)種類分別是 “Toast提示框” “Dialog對(duì)話框” “Actionbar功能框” 與“Snackbar提示對(duì)話框”沒(méi)有任何一個(gè)用戶喜歡彈窗，所以使用要控制。Toast提示框：是一種非模態(tài)彈窗（自行消失的，時(shí)間自定），它彈出一個(gè)小信息，作為提醒或消息反饋來(lái)用，一般用來(lái)顯示操作結(jié)果，或者應(yīng)用狀態(tài)的改變。例如你發(fā)出了一條短息，app彈出一個(gè)Toast提示你消息已發(fā)出。

toast替代方案：多態(tài)按鈕

這種提示可以常駐在頁(yè)面里，即使用戶短時(shí)間內(nèi)注意力轉(zhuǎn)移，提示也不會(huì)消失，確保用戶能一直完整的看到。此外頁(yè)面內(nèi)提示能容納更多信息量，與頁(yè)面本身風(fēng)格比較契合，沒(méi)有阻塞感，適合表單錯(cuò)誤提示、加載過(guò)渡。

Dialog對(duì)話框：是一種模態(tài)彈窗，當(dāng)用戶進(jìn)行了敏感操作，或者當(dāng)app內(nèi)部發(fā)生了較為嚴(yán)重性的狀態(tài)改變，這種操作和改變會(huì)帶來(lái)影響性比較大的行為結(jié)果，一般情況下dialog由標(biāo)題、信息內(nèi)容和功能按鈕組成，只有當(dāng)用戶點(diǎn)擊了某個(gè)功能按鈕后彈窗才會(huì)消失。

Actionbar功能框：可以看成是Dialog的一種延伸設(shè)計(jì)，兩者都是模態(tài)彈窗，用戶必須進(jìn)行回應(yīng)，否則彈窗不會(huì)消失，用戶無(wú)法繼續(xù)其他操作。actionbar比dialog擁有更多的功能按鈕，提供給用戶更多的功能選擇。

Snackbar提示對(duì)話框：是安卓系統(tǒng)的特色彈窗之一，它也是一種非模態(tài)彈窗，同時(shí)擁有toast和dialog的特點(diǎn)，不會(huì)打斷用戶正常的操作流程，它除了可以告訴用戶信息內(nèi)容，還可以與用戶進(jìn)行對(duì)話交互。

頁(yè)面指示器

是附著在輪播圖、一組卡片或者頁(yè)面的底部，用來(lái)表示頁(yè)面總數(shù)量和指示當(dāng)前停留的頁(yè)面。通常有一組等距的小圓點(diǎn)組成，小圓點(diǎn)的數(shù)量代表頁(yè)面總數(shù)，其中深色或?qū)嵭牡男A點(diǎn)代表當(dāng)前頁(yè)面。

設(shè)計(jì)要點(diǎn)1.不要顯示太多

超過(guò)10個(gè)很難在一屏內(nèi)展示，超過(guò)20個(gè)頁(yè)面用戶瀏覽起來(lái)會(huì)非常耗時(shí)。如果超過(guò)20個(gè)頁(yè)面請(qǐng)考慮使用其他形式或控件展示。

設(shè)計(jì)要點(diǎn)2：避免滑動(dòng)沖突

一般來(lái)說(shuō)用戶在移動(dòng)端習(xí)慣使用左右滑動(dòng)操作，因此要注意同頁(yè)面內(nèi)會(huì)不會(huì)與其他支持左右滑動(dòng)的空間（例如：頂部tabs、地圖、輪播圖等）產(chǎn)生手勢(shì)沖突。

設(shè)計(jì)要點(diǎn)3：樣式可以特殊化

如果指示的某個(gè)頁(yè)面較為特殊，可以為某定制特別的樣式，例如鎖屏頁(yè)用戶可以不解鎖直接向左滑動(dòng)打開(kāi)相機(jī)，因此為相機(jī)設(shè)計(jì)了特殊樣式突出這個(gè)功能。天氣app中一眼就明白第一個(gè)是當(dāng)前GPS定位地址。

設(shè)計(jì)要點(diǎn)4:不要把指示符做到頁(yè)面內(nèi)

頁(yè)面指示器的層級(jí)比頁(yè)面要高，因此切圖和研發(fā)工程師溝通實(shí)現(xiàn)方案時(shí)，一定要確認(rèn)把頁(yè)面指示器單獨(dú)切圖處理。千萬(wàn)不能把頁(yè)面指示器嵌入到頁(yè)面里，導(dǎo)致滑動(dòng)頁(yè)面時(shí)跟隨頁(yè)面一起運(yùn)動(dòng)。

通告欄notice bar

經(jīng)常能看到很多app的 navigation bar（iOS叫導(dǎo)航欄，安卓叫app bar/應(yīng)用欄）下方、列表上方或者頁(yè)面底部懸浮著一個(gè)橫幅。這些橫幅通過(guò)某個(gè)事件觸發(fā)而出現(xiàn)，能常駐顯示直到事件結(jié)束，并且通?？梢圆僮?。

設(shè)計(jì)要點(diǎn)1:醒目的區(qū)分不同類型

如果你的app中有用于警告、溫馨提示、活動(dòng)促銷等不同的notice bar，可用顏色和圖標(biāo)進(jìn)行區(qū)分，便于用戶形成視覺(jué)記憶，快速辨識(shí)通告類型。

設(shè)計(jì)要點(diǎn)2:不要附加太多操作

一條notice bar只描述一個(gè)事件，通常點(diǎn)擊后提供處理這個(gè)事件的頁(yè)面，最多再提供一個(gè)關(guān)閉notice bar的按鈕。不要在notice bar上附加太多操作，增加用戶選擇負(fù)擔(dān)。

加載占位符skeleton screen

近年流行的加載控件，通常表現(xiàn)形式是在界面上待加載區(qū)域填充灰色的占位符，與線框圖的效果非常相似。skeleton screen本質(zhì)上是界面加載過(guò)程中的過(guò)渡效果。

氣泡彈出框 Popover

Popover（氣泡彈出框/彈出式氣泡/氣泡）是由一個(gè)矩形和三角箭頭組成的彈出窗口，箭頭指向的地方通常是導(dǎo)致popover彈出的控件或區(qū)域。通過(guò)點(diǎn)擊popover內(nèi)的按鈕或非popover的屏幕其他區(qū)域可關(guān)閉popover。

設(shè)計(jì)要點(diǎn)1:情境下的相關(guān)選項(xiàng)

如果界面中有多個(gè)項(xiàng)目，而且每個(gè)項(xiàng)目都有多個(gè)相關(guān)選項(xiàng)，使用popover承載多個(gè)情境下的相關(guān)選項(xiàng)是個(gè)不錯(cuò)的方案。在手機(jī)上，相比于action sheet，popover的三角箭頭能明確的指示當(dāng)前操作的是哪個(gè)條目，不易出錯(cuò)。

設(shè)計(jì)要點(diǎn)2:提示引導(dǎo)

popover的三角箭頭這一獨(dú)特特性，同樣適合作為提示引導(dǎo)或者展示附屬信息。每當(dāng)上線新功能，用popover能很好的吸引用戶注意力，引導(dǎo)用戶了解新功能。界面圖形較多的情況下，用popover簡(jiǎn)短的展示附屬文字信息，能幫助用戶很好的理解圖形的含義。

徽標(biāo)/小紅點(diǎn) Badge

[小紅點(diǎn)]是這個(gè)控件在國(guó)內(nèi)最通俗的稱呼，正式的名稱為[badge]徽標(biāo)，徽標(biāo)是指通常出現(xiàn)在圖標(biāo)或文字右上角的紅色圓點(diǎn)、數(shù)字或者文字，表示有新內(nèi)容或者待處理的信息。

設(shè)計(jì)要點(diǎn)1:注意數(shù)字的長(zhǎng)度和上限

小紅點(diǎn)可以分為五數(shù)字和有數(shù)字兩類，對(duì)于有數(shù)字的小紅點(diǎn)，由于界面顯示空間有限，因此要注意視場(chǎng)景和信息類型決定數(shù)字最長(zhǎng)顯示多少位，如果數(shù)字達(dá)到上限該如何顯示。

設(shè)計(jì)要點(diǎn)2:一鍵清除

小紅點(diǎn)如果非常多出現(xiàn)頻次又很高，會(huì)對(duì)用戶產(chǎn)生一些情緒干擾，例如很多強(qiáng)迫癥用戶每次遇到小紅點(diǎn)都會(huì)設(shè)法點(diǎn)擊消除掉，收集qq以此為出發(fā)點(diǎn)，創(chuàng)造性的設(shè)計(jì)了一鍵拖拽清除小紅點(diǎn)的功能，得到用戶好評(píng)。

開(kāi)關(guān)/滑動(dòng)開(kāi)關(guān)/切換開(kāi)關(guān) Swich

Swich有兩個(gè)互斥的選項(xiàng)（例如開(kāi)/關(guān)、是/否、啟動(dòng)/禁用），它是用來(lái)打開(kāi)或關(guān)閉選項(xiàng)的控件。選擇其中一個(gè)選項(xiàng)會(huì)導(dǎo)致立即執(zhí)行操作。

設(shè)計(jì)要點(diǎn)1:立即執(zhí)行操作

Swich與Radiobutton（單選按鈕）、checkbox（復(fù)選框）最大的區(qū)別是：swich操作后，程序立即執(zhí)行相關(guān)操作。而單選按鈕和復(fù)選框一般用在表單里，僅反應(yīng)當(dāng)前的選擇狀態(tài)，如果要執(zhí)行操作并生效，需要點(diǎn)擊額外的提交按鈕。

注：開(kāi)關(guān)按鈕頁(yè)面不需要加保存按鈕，

設(shè)計(jì)要點(diǎn)2:注意加載狀態(tài)

如果開(kāi)關(guān)所執(zhí)行的操作需要與服務(wù)器交互，就必須考慮加載狀態(tài)了，例如剛進(jìn)入頁(yè)面時(shí)，獲取開(kāi)關(guān)的狀態(tài)需要加載。如果改變開(kāi)關(guān)的狀態(tài)，需要與服務(wù)器交互，必須等待服務(wù)器返回成功指令后才能改變開(kāi)關(guān)的狀態(tài)，傳統(tǒng)的做法是為初次加載和操作后等待準(zhǔn)備特定的樣式。

設(shè)計(jì)要點(diǎn)3:危險(xiǎn)操作二次確認(rèn)

正是由于按下開(kāi)關(guān)后立即執(zhí)行操作，如果操作比較危險(xiǎn)，請(qǐng)?jiān)邳c(diǎn)擊開(kāi)關(guān)后加入二次確認(rèn)流程，避免造成嚴(yán)重?fù)p失。

字母索引導(dǎo)航A-Z index

字母索引導(dǎo)航能將信息以首字母進(jìn)行分類組織并提供導(dǎo)航。字母索引歷史悠久，早在我們的實(shí)體書籍入字典、詞典等就運(yùn)用這種信息組織方式。正因如此，字母索引導(dǎo)航是用戶非常熟悉的一種導(dǎo)航方式。

設(shè)計(jì)要點(diǎn)1:注意非字母開(kāi)頭的內(nèi)容

一些移動(dòng)社交網(wǎng)絡(luò)的昵稱，可能會(huì)使用emoji表情或者數(shù)字作為首歌自負(fù)。一般來(lái)說(shuō)可以通過(guò)在字母末尾增加“#”，表示非字母開(kāi)頭的內(nèi)容。如果首字母非字母的內(nèi)容太多，可以考慮采用其他數(shù)據(jù)類型的導(dǎo)航。

設(shè)計(jì)要點(diǎn)2:增加常用選項(xiàng)導(dǎo)航

字母索引導(dǎo)航嚴(yán)格按照字母順序排序，但是在某些場(chǎng)景中，這并非是最高效的。例如在外賣app選擇城市的列表中，用戶選擇當(dāng)前城市的可能性最大，因此可以在字母索引導(dǎo)航最頂端增加當(dāng)前GPS定位地理位置的導(dǎo)航等等。

02.界面中的原型板式——界面常見(jiàn)的布局方式

標(biāo)簽式 labelling type、列表式tabular form、

卡片式card type、多面板式multifaceted plate type、

瀑布流式cascade flow type、手風(fēng)琴式accordion type

標(biāo)簽式 labelling type:

也叫網(wǎng)格式布局，一般承載較為重要的功能，由于標(biāo)簽式的設(shè)計(jì)較有儀式感，所以視覺(jué)上層級(jí)很好，一般用于展示較多的快捷重要入口，且各模塊相對(duì)獨(dú)立。

標(biāo)簽式布局的優(yōu)點(diǎn)是個(gè)入口展示清晰，方便快速查找。缺點(diǎn)是擴(kuò)展性較差，標(biāo)題不易過(guò)長(zhǎng)。并且非重要層級(jí)的功能，或者不可點(diǎn)擊的純介紹類元素，不適用于標(biāo)簽式設(shè)計(jì)。最多兩排，不宜過(guò)多。

如果產(chǎn)品需要，如下圖這種分層級(jí)也是可以的

列表式tabular form：（適用于有規(guī)律的內(nèi)容）

列表式布局式移動(dòng)端應(yīng)用小屏幕的限制下最常見(jiàn)的版式形式尤其適用于文字較長(zhǎng)的信息組合，列表式的布局優(yōu)點(diǎn)是信息展示較為直觀，節(jié)省頁(yè)面空間，瀏覽效率高，字段長(zhǎng)度不受限制可以錯(cuò)行顯示。

缺點(diǎn)是點(diǎn)一的列表容易視覺(jué)疲勞，需要穿插其他版式形式讓畫面有些變化，并且不適用于信息層級(jí)過(guò)多并且字段內(nèi)容不確定的情況，這些情況僅僅通過(guò)分割線或者間距的區(qū)分容易讓用戶出現(xiàn)視覺(jué)誤差。

卡片式card type：

卡片式設(shè)計(jì)的另一個(gè)典型好處是可以將不同大小、不同媒介 形式的內(nèi)容單元以統(tǒng)一的方式進(jìn)行混合呈現(xiàn)，最常見(jiàn)的就是圖文混排，既要做到視覺(jué)上盡量一致，又要平衡文字和圖片的強(qiáng)弱，這是卡片設(shè)計(jì)經(jīng)常有奇效。

當(dāng)一個(gè)頁(yè)面內(nèi)信息板塊過(guò)多，或者一個(gè)信息組合中信息層級(jí)過(guò)多通過(guò)列表式設(shè)計(jì)容易使用戶出現(xiàn)視覺(jué)誤差時(shí)，卡片式的設(shè)計(jì)就再合適不過(guò)了，卡片式設(shè)計(jì)的缺點(diǎn)是對(duì)頁(yè)面空間的消耗非常大，需要上下左右各有艱巨，就會(huì)導(dǎo)致一瓶呈現(xiàn)的信息量很小。

卡片可以進(jìn)行歸類，卡片設(shè)計(jì)在視覺(jué)層級(jí)上是最高的，可以賦予用戶有任務(wù)的感覺(jué)，通過(guò)卡片設(shè)計(jì)可以跟物理空間進(jìn)行聯(lián)系，如優(yōu)惠券用卡片式設(shè)計(jì)。

多面板式multifaceted plate type：如京東分類頁(yè)

多面版的布局更常見(jiàn)于pad終端，但移動(dòng)端也會(huì)用到。多面版很像豎屏排列的tab，可以展示更多的信息量，操作效率較高，適合分類和內(nèi)容都比較多的情形，多用于分類頁(yè)面或者品牌篩選頁(yè)面。

優(yōu)點(diǎn)是減少了頁(yè)面之間的跳轉(zhuǎn)，并且分類較為明確直觀。它的不足是同一界面信息量過(guò)多，較為擁擠，并且分類很多時(shí)，左側(cè)滑動(dòng)區(qū)域過(guò)窄，且不利于單手操作。

瀑布流式cascade flow type：

當(dāng)一個(gè)頁(yè)面內(nèi)卡片的大小不一致，產(chǎn)生錯(cuò)落的視覺(jué)效果就是瀑布流，瀑布流設(shè)計(jì)適用于圖片/視頻等“瀏覽型”內(nèi)容，當(dāng)用戶僅僅通過(guò)圖片就可以獲取到自己想獲取的信息時(shí)，那么瀑布流再合適不過(guò)了。

移動(dòng)端的瀑布流一般式兩列信息并行，可以極大的節(jié)省交互效率，并且可以用來(lái)制造“豐富/華麗/眼花繚亂”的體驗(yàn)，適用于電商或者小視頻類應(yīng)用。瀑布流布局的缺點(diǎn)時(shí)過(guò)于依賴圖片質(zhì)量，如果圖片質(zhì)量較低，整體的產(chǎn)品格調(diào)也會(huì)被圖片所影響。

瀑布流會(huì)確定卡片的寬度，高度根據(jù)圖片內(nèi)容自適應(yīng)。

手風(fēng)琴式accordion type：

手風(fēng)琴式布局常見(jiàn)于兩級(jí)結(jié)構(gòu)的內(nèi)容。用戶點(diǎn)擊分類可展開(kāi)顯示二級(jí)內(nèi)容，在不用的時(shí)候，內(nèi)容式隱藏的。因此它可承載比較多的信息，同時(shí)保持界面簡(jiǎn)潔。手風(fēng)琴可以減少界面跳轉(zhuǎn)，與樹(shù)形結(jié)構(gòu)相比，手風(fēng)琴減少點(diǎn)擊次數(shù)，提高操作效率。手風(fēng)琴在瀏覽器上很常見(jiàn)，很多瀏覽器的導(dǎo)航、歷史、下載管理等頁(yè)面均采用了手風(fēng)琴的設(shè)計(jì)。手風(fēng)琴布局的缺點(diǎn)是同時(shí)打開(kāi)多個(gè)手風(fēng)琴菜單，分類標(biāo)題不易尋找，且容易將頁(yè)面布局打亂。