01.原型的概念

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

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

初級原型：（概念草圖）

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

高級原型：

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

可交互的高級原型：

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

原型=產(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都有，安卓以前沒有，現(xiàn)在跟iOS越來越像，也有標(biāo)簽欄

對話框與提示框

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

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

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

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

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

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

頁面指示器

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

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

超過10個很難在一屏內(nèi)展示，超過20個頁面用戶瀏覽起來會非常耗時。如果超過20個頁面請考慮使用其他形式或控件展示。

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

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

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

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

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

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

通告欄notice bar

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

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

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

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

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

加載占位符skeleton screen

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

氣泡彈出框 Popover

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

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

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

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

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

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

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

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

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

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

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

開關(guān)/滑動開關(guān)/切換開關(guān) Swich

Swich有兩個互斥的選項(xiàng)（例如開/關(guān)、是/否、啟動/禁用），它是用來打開或關(guān)閉選項(xiàng)的控件。選擇其中一個選項(xiàng)會導(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)擊額外的提交按鈕。

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

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

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

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

正是由于按下開關(guān)后立即執(zhí)行操作，如果操作比較危險(xiǎn)，請?jiān)邳c(diǎn)擊開關(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:注意非字母開頭的內(nèi)容

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

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

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

02.界面中的原型板式——界面常見的布局方式

標(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ì)較有儀式感，所以視覺上層級很好，一般用于展示較多的快捷重要入口，且各模塊相對獨(dú)立。

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

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

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

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

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

卡片式card type：

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

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

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

多面板式multifaceted plate type：如京東分類頁

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

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

瀑布流式cascade flow type：

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

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

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

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

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