在進行軟件功能原型設計過程中，關于組件的使用規(guī)范不是十分到位，沒有系統(tǒng)的學習過鼠冕，很多控件使用比較模糊。系統(tǒng)性的閱讀本書后胯盯，對MD和IOS的設計規(guī)范有了初步清楚的認識懈费，對其他的組件控件的使用背景也有了深入的理解，如果你跟我有一樣的困擾博脑，可以去讀讀這本書憎乙，以下為本書內容精簡版讀書筆記。

第一章 MD和IOS設計規(guī)范

1叉趣、陰影

①MD風格非常喜歡真實世界中的元素的物理規(guī)律與空間關系來表現(xiàn)組件之間的層級關系泞边。

②MD的按鈕會帶有陰影，而iOS沒有疗杉。

③浮動操作按鈕（Floating Action Button,FAB）阵谚，安卓較常見帶有陰影的浮動操作按鈕。

2烟具、導航體系

①導航體系主要是菜單欄梢什，根據(jù)位置及交互可以分為頂部欄菜單，底部欄菜單和側邊欄菜單朝聋。

②iOS風格的導航體系主要是底部欄菜單構成绳矩，MD風格的導航體系大量使用了頂部欄菜單和側邊欄菜單。相比來講玖翅，MD的設計規(guī)范更注重界面空間的利用翼馆，底部欄菜單容易被高度遮擋，很多產(chǎn)品滑動時隱藏底部欄菜單金度。

安卓不經(jīng)常使用底部按鈕因為會有物理鍵盤应媚，容易誤操作。

③底部欄菜單（高度98px）適合單手持機操作猜极，逐漸大屏化則要求用戶雙手持機中姜，頂部欄和側邊欄的易用性更強。

④側邊導航欄需要點擊二次操作才可以調出來，相類似的有“漢堡”按鈕丢胚。

3翩瓜、配色

①MD風格提倡使用高飽和度的對比色提倡視覺表現(xiàn)力，大色塊携龟，高飽和兔跌。

IOS的風格就是間接，單調峡蟋，性冷淡風格坟桅。

②產(chǎn)品界面設計中，對比效果主要由配色蕊蝗、尺寸仅乓、間距和陰影來完成。

4蓬戚、組件

①iOS設計的風格中夸楣，對話框和按鈕都是居中對齊，MD是提示偏左子漩，按鈕偏右豫喧。

5、適配

適配是為了讓同一個界面在不同的尺寸痛单，不同的分辨率上的設備具備相同的顯示效果嘿棘。

像素：由一個數(shù)字序列表示的圖像中的一個最小單位劲腿。

分辨率分為ppi和dpi旭绒。像素是設計中最小的設計單位，點pt是iOS中最小的開發(fā)單位焦人。

ppi：每英寸（長度）所包含的像素點數(shù)目挥吵。

dpi：每英寸（長度）所包含的數(shù)目。

①適配原則：同一分辨率花椭，同一尺寸忽匈。

②同分辨移植方法：高度不變，水平方向尺寸或間距自適應矿辽；等比縮放丹允。

③全面屏手機適配：劉海區(qū)高度44pt，home indicator高度34pt.

6袋倔、手勢

節(jié)省界面空間雕蔽，簡化交互方式。

常見手勢：點擊宾娜，滑擊批狐，拖曳，長按前塔，多點觸控等嚣艇。

①拇指法則：手機屏幕分為容易區(qū)（主要功能）承冰，伸展區(qū)，困難區(qū)食零。針對不同的目標用戶進行調整困乒。

②功能可見性，讓用戶感知到手勢的存在是手勢設計的重要前提慌洪。

引導用戶的方法：（培養(yǎng)用戶對于手勢的感知）

· 引用現(xiàn)實生活中的隱喻

· 浮層引導

· 對隱藏內容進行適當展示

③滑動優(yōu)先

常用的兩種手勢：滑動和點擊顶燕，滑動比點擊更容易操作，滑動的落點區(qū)一般是全屏操作冈爹，點擊的落點區(qū)域要求較高涌攻。

瀑布流中更常見使用滑動手勢，不需要點擊加載频伤，節(jié)省界面控件和多余操作恳谎。但是越往下滑，加載的內容越多憋肖，會降低頁面性能因痛，而且滑動手勢無法標記位置，再回去找比較費勁岸更。

④考慮場景

不同手勢在不同的場景和落點中可能會有不同的操作鸵膏，手勢會撞車。手勢的操作的也不一定僅限于屏幕上怎炊，例如刪除記錄后谭企，搖晃手機即可撤銷操作，更加有趣味性评肆。

7债查、異常場景

· 所有的報錯反饋/提示都可以拆解為：報錯現(xiàn)象（原因）和解決方案。因此在發(fā)生故障時先告知報錯現(xiàn)象瓜挽，在提供解決方案盹廷。

·常見的報錯樣式：Toast，Snackbar久橙，對話框俄占，通告欄，界面內嵌與空頁面淆衷。

7.1 網(wǎng)絡故障

有的場景缸榄，網(wǎng)絡要求不是很高，中斷時可以不主動提示用戶吭敢，避免造成困擾碰凶，當用于執(zhí)行了請求數(shù)據(jù)的操作時在進行告知網(wǎng)絡故障。

--頁面緩存數(shù)據(jù)情況：

頁面存在緩存數(shù)據(jù)，可以給緩存數(shù)據(jù)設置有效期欲低，超過這個有限期辕宏，網(wǎng)絡還未恢復，就提示用戶網(wǎng)絡故障砾莱，可采用Toast演示瑞筐，不影響用戶正常流程操作。還可以使用snackbar承載點擊事件腊瑟，點擊跳轉至網(wǎng)絡設置頁中聚假。

網(wǎng)絡故障提示的訴求：給予用戶持續(xù)性提示的前提下，還不能干擾用戶的正常操作闰非。--使用Snackbar和通告欄膘格。

--頁面沒有緩存數(shù)據(jù)情況：

①展示空白頁面

·提供“刷新頁面”按鈕

·提供“查找解決方案”按鈕

可以先顯示刷新按鈕，沒有解決顯示Snackbar跳轉解決方案的鏈接财松。

②展示骨架屏（skeleton screen）

展示頁面框架瘪贱，數(shù)據(jù)請求完成時在進行渲染，占好位置再加載數(shù)據(jù)即占位符辆毡。

7.2 網(wǎng)絡切換

· WiFi->4G

①不可以使用Toast提示菜秦，因為某些安卓手機會關閉推送同時禁用Toast。

②提示的方式有內嵌和對話框兩種方式舶掖。根據(jù)不同APP和場景會有區(qū)分球昨。視頻類-->內嵌，音頻類-->對話框眨攘，優(yōu)先級高的反饋我們都只考慮使用對話框主慰，因為可以讓用戶看到，不會遺漏期犬。

7.3 網(wǎng)絡恢復

①網(wǎng)易云音樂恢復網(wǎng)絡后河哑，自動完成刷新和加載避诽，不需要用戶手動刷新：可減少用戶的操作步驟龟虎，避免使用彈窗。在產(chǎn)品設計中沙庐，如果可以通過控件自身狀態(tài)的改變而讓用戶感知狀態(tài)的變更鲤妥，那么我們就沒有必要使用彈框。使用彈框來通知用戶是我們最后的選項拱雏。

②熱點開啟后會影響界面，造成下移問題贡耽。

7.4 空白頁

①首先要思考空白頁是否有存在的必要

eg：沒有保單的用戶，點擊“我的保險”可以直接跳入保單商城蒲赂，引導用戶進行購買而不是展示一個空白頁阱冶。

②空白頁需要向用戶介紹這是一個什么頁面，告知用戶當前的位置并解釋空白原因滥嘴，以及接下來可以干什么木蹬，將會出現(xiàn)什么情況。

引導用戶進行下一步操作若皱。

eg：列舉了懶人英語镊叁，喜馬拉雅的空白頁，購買車票時走触，沒有直達可以提供中轉晦譬，甚至推薦機票，增加產(chǎn)品內不同模塊之間的滲透率互广。

③品牌化設計與空白頁結合

④文案簡單蛔添，引導用戶進行下一步操作。

7.5 超越臨界值

①極端場景兜辞、操作中斷迎瞧、流程閉環(huán)、提供額外的解決辦法逸吵。

第三章 元素

色彩凶硅、文字、圖標足绅、布局、圖片和按鈕是界面設計的六大視覺元素首量。

3.1 色彩

隨著目前發(fā)展的流行，極簡風會使界面的配色越來越少拣宏。

3.1.1 為什么要配色

產(chǎn)品配色體系的建立主要有三個目標：視覺區(qū)分宋下，調整界面風格，吸引用戶注意力。

①視覺區(qū)分

·將信息內容和功能模塊進行整體規(guī)劃伺帘，建立界面的信息層級，幫助用戶在視覺上進行區(qū)分张咳。讓用戶一想到配色就會想起相應的功能模塊。

·除了配色龙助，文字，圖像（圖標）称勋，布局都可以實現(xiàn)視覺區(qū)分。

eg：同一個借款頁面蝗蛙，用戶主要關心的內容（借款金額）要凸顯出來哮内，從其他元素中進行區(qū)分。體現(xiàn)信息的優(yōu)先級喷屋。

②調整界面風格

·配色：根據(jù)市場地位和目標用戶群來決定，醫(yī)療類->綠色主色調，電商類->紅色和橙色主色調偷俭，電腦藍屏可以安撫用戶情緒，還可以根據(jù)不同配色與節(jié)日結合渲染營銷氣氛负溪。

·文字跳躍率：同一界面中不同文字之間的大小比率。排版設計會有字體猖腕、字號和字重的區(qū)別。文字跳躍率高的界面跟活潑老玛，低的頁面平靜沉著。

·圖片跳躍率：文藝風格產(chǎn)品配色比較單調無法激起用戶興趣镜廉，可以采取提升圖片跳躍率來提升產(chǎn)品品界面活力齐遵。

③吸引用戶的注意力

·配色：行為召喚按鈕（call to action）配色與背景色差距較大，從背景中凸顯。

·留白：谷歌搜索頁面中有大面積留白谎砾，一個頁面一個功能，不需要其他信息來進行干擾挚币。

·陰影：提升目標元素“海拔”，讓他凸出來笛粘。

·模糊：模糊處理不重要的內容（背景）以凸顯重要內容。

④為什么是色彩

·從視覺角度來看示括，一款產(chǎn)品給用戶留下最深的印象是其整體的配色。

·飽和度過高的配色會表達出很多主觀的內容吼拥，適用于內容少的頁面。內容多的頁面唬复，需要讓用戶注意力聚焦，配色應當簡單。

3.1.2 配色規(guī)范

①選取色彩

·配色：一般選擇產(chǎn)品的品牌色作為主色調评疗，一個頁面最多出現(xiàn)2-3種顏色。

·互補色搭配：色輪中處于彼此的對立面的兩種顏色被叫做互補色。搭配起來會形成強烈的對比效果，以此吸引用戶的注意力啥寇。但是同一個頁面使用多個互補色會造成頁面信息雜亂，建議優(yōu)先級最高的信息考慮使用互補色搭配栈戳。

·單色搭配：整個產(chǎn)品的界面中乃戈，除品牌色和必要的中性色外缩歪，精簡到極致主籍。

避免用戶的注意力被配色吸引，可以讓其關注內容本身幸海；

提升用戶對于品牌的感知度氯葬。

·類比色搭配：選用一款色作為主色調官研，再將色輪中臨近的顏色作為輔色，搭配起來不會突兀世杀。

②主體風格

·產(chǎn)品定位：可讀性第一阀参，聚焦于內容建議選用淺色背景（深色長時間看容易增加疲勞感，淺色背景會增加空間感）瞻坝；

視覺表現(xiàn)力強更加酷炫蛛壳，采取深色背景衙荐。

·使用場景：戶外場景較多的產(chǎn)品使用淺色背景更合適（深色陽光照射下屏幕會反光）垦沉；

光線不佳使用深色背景更加穩(wěn)妥（閱讀類APP夜間護眼模式黑底白字）。

3.2 布局（整合信息的方式）

·列表式布局和宮格式布局

3.2.1 視覺吸引力

宮格式布局：一級頁面（臉面庇楞，多功能聚合頁面展示多個入口淫茵，可以更改宮格尺寸來調整用戶的注意力分布改變信息的優(yōu)先級碍论，視覺吸引強遥倦，可拓展性差）

3.2.2 可拓展性

列表式布局：二級桐臊、三級頁面，可拓展性強（為應對將來未知的改變）可以不影響界面布局無限制增加新功能入口撼港。可以承載更多的信息量崭别。

·功能的改變：數(shù)量的改變和狀態(tài)的改變呀打，狀態(tài)改變分為外部狀態(tài)改變和內部狀態(tài)改變。

·外部狀態(tài)改變是指產(chǎn)品層面的變化准夷，針對C端產(chǎn)品，例如定期組織營銷活動來吸引用戶（九宮格針對不同的活動博肋，可以配置不同風格的icon）买猖。

·對于一級頁面的設計碾篡，不要把功能入口放入頂部欄贡歧，但是上線高級功能脱篙，又不想打亂界面的原有布局就可以放入頂部欄娇钱，例如可以放入搜索/城市定位/分享/篩選/通知等全局功能。

3.2.3 信息量

·列表式布局所占頁面空間更大绊困，因此可以承載更多的信息量文搂。宮格式布局主要以icon為主展示信息較少，上下左右移動對用戶來說體驗不好考抄。

3.3 文字

·大多數(shù)產(chǎn)品的底部菜單欄即便有icon也會在底部加上文字說明细疚，具象的元素可以讓用戶更快地感知信息，但無法保證精準性川梅。

·產(chǎn)品中的文字主要分四類：標題類，正文類然遏，提示類贫途，交互類。

3.3.1 標題類文字

·APP中標題一般有頂部欄標題待侵、底部欄標題丢早、列表標題、表標題等秧倾。

·不同類別的標題代表了不同的等級怨酝，可以選擇不同的字色和字號來區(qū)分不同等級的標題。

·一般來說那先，層級越低的標題农猬，顏色越淺，字號越小售淡。

·很少會將品牌色設為標題色斤葱，因為品牌色飽和度過高慷垮，容易分散用戶的注意力，底部欄菜單中選中的顏色會考慮使用品牌色揍堕。

3.3.2 正文類文字

·正文類文字是給用戶提供詳細說明和解釋料身，配色較淺，字號稍小衩茸。不要過于吸引用戶注意力且長時間閱讀引起視覺疲勞芹血。

·不要使用襯線字體，像素低的會出現(xiàn)鋸齒效果楞慈，對閱讀產(chǎn)生影響祟牲。

3.3.3 提示類文字? ? ?

·提示類文字的用于給用戶展示當前狀態(tài)，狀態(tài)少的產(chǎn)品可以搭配不同配色抖部，狀態(tài)多的產(chǎn)品可以用文案區(qū)分说贝。

3.3.4 交互類文字? ? ?

·交互類文字和按鈕有很多共同特點，支持點擊跳轉慎颗，可以展示狀態(tài)切換乡恕，交互類文字與按鈕相比更加輕量化，適用于極簡設計風格俯萎。

·交互類文字要讓用戶覺得可以點擊：

①使用配色傲宜，可以使用藍色，普遍認為藍色可點擊夫啊；

②文字+icon函卒；

③行為召喚語句：使用動詞，“快速注冊”撇眯，“忘記密碼”报嵌。

3.3.5 文案

①用戶視角，確保用戶可以看懂熊榛，錯誤示例如下锚国；

②語氣，和用戶之間建立感情聯(lián)系玄坦，更好的文案可以展示產(chǎn)品的特性血筑；

③一致性，同樣的報錯/操作提示在不同模塊盡量保持一致性煎楣。

3.4 圖標

3.4.1 可識別性

·用戶能否在極短的時間內豺总，很容易地接收你要提供的信息；

3.4.2 網(wǎng)格

·引用網(wǎng)格避免圖標設計大小不一致择懂，網(wǎng)格分為內容區(qū)和留白區(qū)喻喳；

·圖標的一致性要強調視覺權重的一致性，檢查方法可以通過高斯模糊處理休蟹。

3.4.3 視覺統(tǒng)一

·圖標庫沸枯，每個圖標共有的元素的集合成為圖標的視覺統(tǒng)一日矫，純色or漸變色，描邊像素 绑榴，圓角像素哪轿，還可加入節(jié)日元素。

3.5 按鈕

·組成按鈕的元素可以分為形狀翔怎、填充和內容碎乃。

3.5.1 形狀

·無論什么形狀的按鈕都要保持統(tǒng)一蠢终；

·浮動按鈕鲤氢，加上陰影可以拉近與用戶間的距離晚胡，而且浮動按鈕不僅只可以用在MD設計規(guī)范中，IOS設計規(guī)范中也可以使用容握，提升用戶的產(chǎn)品體驗宣脉。

3.5.2 填充

·面狀按鈕：更能吸引用戶注意力，有更強的點擊性剔氏；

·線狀按鈕：適合展示次要功能塑猖，面狀展示主要兩個搭配使用；

·弱化功能也可將按鈕變成跟其他項相同谈跛，類似“退出登錄”按鈕羊苟；

·按鈕風格還可參照品牌色，同一個按鈕不同狀態(tài)會有不同的表現(xiàn)形式感憾。

3.5.3 內容

·按鈕中的內容包括文案和icon蜡励，icon布局時不能簡單居中，要結合視覺效果進行左右偏移阻桅。

3.5.4 狀態(tài)

·按鈕不僅可以錄入同時還可用于反饋凉倚。

3.5.5 按鈕組

·場景：供用戶進行選擇（2個）判斷（>2個）；

·設計：樣式上區(qū)分優(yōu)先級鳍刷；

·替代：開關（switch）占遥，兩種相互對立的狀態(tài)之間的切換，多用于表示功能的開啟和關閉输瓜，開啟后會延展出其他配置項；

3.6 間距

·主要作用：①塊外間距：區(qū)分不同的內容塊芬萍；②塊內間距：區(qū)分內容塊內的信息尤揣；

3.6.1 塊內/塊外間距

·塊外級別越高的內容，間距越大：塊內間距也會根據(jù)信息優(yōu)先級對間距進行劃分柬祠；

·間距會選擇8或者12的倍數(shù)（12,24,36,48px）北戏，若界面間距緊湊還可選擇4的倍數(shù)（8,16,24,32px），一般將行高設為字符高度的30%漫蛔。

3.6.2 間距與分割線

·分割線：通欄分割線（貫穿全屏）和非通欄分割線（有缺口）嗜愈；

·通欄分割線：內容區(qū)分方面效果明顯旧蛾，提現(xiàn)不同模塊間的獨立性，但是容易影響用戶信息的獲取效率蠕嫁，阻礙閱讀锨天；

·分割線適用于不規(guī)則雜亂的信息數(shù)據(jù)進行歸類，有條理的布局可以去掉分割線使用間距留白剃毒，可以同步使用病袄。

3.6.3 間距的替代品? ? ? ?

·配色、陰影赘阀、圖案等也可完成內容區(qū)分益缠，還可以引用圖標和配色來強化不同內容之間的對比。

3.6.4 慎用間距?

·間距會增加頁面長度基公，造成多屏滾動幅慌。

3.7 插畫

3.7.1 提升信息傳達效率

·用戶更容易感知具象元素，若是用于營銷活動中則會增加推送消息的打開率轰豆。

3.7.2 插畫or圖像

·插畫比圖像更具有代入感用戶更容易胰伍，圖像過于寫實，插畫可以抽象處理秒咨。

3.7.3 尺寸比例

3.8 動畫

· 任何設計元素的特性都是來自于其自身的差異性喇辽。動畫與其他元素的最大區(qū)別在于其具有連續(xù)性。動畫可以演示整個過程雨席，從狀態(tài)A到狀態(tài)B的具體路徑菩咨。

3.8.1 引導

· 對不同元素之間的聯(lián)系轉變?yōu)榻换ミ^程的動態(tài)演示，引導用戶陡厘，減少學習成本抽米。

eg：添加購物車，動畫車內數(shù)量增加糙置；最小化窗口云茸；指紋解鎖錯誤的左右晃動；新用戶的操作引導谤饭。

3.8.2 吸引用戶的注意力

· 流量分發(fā)（注意力分發(fā)）标捺，對于某些優(yōu)先級并不是非常高的功能，我們沒有必要通過修改配色和界面布局來吸引用戶的注意力揉抵，可以考慮使用動畫來完成一次性地吸引用戶的注意力任務亡容。

3.8.3 轉場過渡

· 兩種狀態(tài)是由兩種不同的元素來進行表達的，防止用戶視覺流的中斷可用動畫進行轉場冤今。

3.8.4 對“花瓶”說不

· 減少動畫的加載時間闺兢，控制在0.5-1s

· 如何判斷一個設計元素的取舍呢？

①這個設計元素在當前界面中是起什么作用的戏罢？能夠完成什么樣的功能屋谭？

②去掉以后是否會影響用戶的正常操作脚囊？

③如果影響用戶的正常操作，那么是否有更簡潔的設計元素來替代桐磁？

第四章 體系

4.1 導航體系

· 利用“通道”讓內容有了關聯(lián)性悔耘，串聯(lián)各個模塊。

①現(xiàn)在處于哪個頁面所意；

②從哪個來到這個頁面淮逊？是否可以回去？

③從這個頁面可以到哪個頁面去扶踊？

4.1.1 基本元素

①tab

· 按照方向可以分為橫向欄tab和側邊欄tab泄鹏，橫向欄可以展示2-5個tab，超過需要左右滑動頁面秧耗。維度較多可以選擇側邊欄tab备籽， 可以再一級頁面中展示更多的入口，給用戶提供更多的選擇空間分井。

②列表

· 功能結構極其簡單的工具類產(chǎn)品單一使用列表式導航车猬，對應是宮格式導航。還可以和tab進行組合式導航尺锚。

③標簽

· 將單選按鈕珠闰、多選按鈕、Switch等統(tǒng)稱為標簽瘫辩，與tab和列表組合出現(xiàn)進行篩選伏嗜。

4.1.2 組合樣式

①tab+tab

· 每個tab代表一個類別，篩選功能優(yōu)先會使用tab伐厌，功能結構復雜可采用雙層tab承绸。

②tab+列表

· 復雜的篩選需要tab展示維度，列表展示具體選項挣轨。

③tab+列表+標簽

· 多維度军熏、深層級的導航需求。

4.1.3 容器

· 漢堡按鈕可作為容器的按鈕卷扮，調出隱藏菜單荡澎。

· 篩選項需要容器來承載，容器可以是頁面晤锹，底部菜單欄衔瓮，列表菜單欄和抽屜式菜單欄。

· AIrbnb APP的篩選功能最大亮點是可以向用戶即時反饋篩選結果的數(shù)目抖甘，避免進入沒有搜索結果的空頁面，減少無效操作葫慎。

4.2 搜索功能

· 快速定位：搜索功能跟導航篩選功能都是為了讓用戶可以快速找到期望內容衔彻，其中搜索功能對于位置的定位更加快速和準確薇宠。

· 介紹功能：通過搜索可以了解產(chǎn)品可提供的功能服務，更好地了解產(chǎn)品艰额。

· 完整的搜索流程：①搜索入口澄港；②信息錄入；③搜索結果柄沮。

4.2.1 搜索入口

· 常見入口搜索框回梧。搜索入口樣式取決于用戶對搜索功能的訴求。

①不同產(chǎn)品的搜索框展示方式存在差異：

功能：有的外露搜索框直接搜索（易于發(fā)現(xiàn)祖搓，使用方便）狱意；有的隱藏點擊放大鏡圖標（搜索文字）觸發(fā)搜索框（節(jié)省空間，不影響布局拯欧，適合快速迭代期或對搜索訴求低產(chǎn)品）详囤。

樣式：圓角，描邊镐作，背景色藏姐，陰影效果等，產(chǎn)品一致性和功能定位進行考慮是否凸顯搜索框该贾。

②用戶需要查找的內容可能屬于不同類別

4.2.2 信息錄入

· 文字錄入羔杨，語音錄入（語音轉換文字，搜歌聽音識曲）杨蛋，圖片錄入（拍立淘兜材，以圖搜圖），AR錄入（對準產(chǎn)品顯示基本信息）六荒；

· 搜索記錄+推薦搜索：搜索歷史使用宮格式布局护姆，推薦搜索使用tab列表；

· 搜索自動填充：可選列表掏击。

4.2.3 搜索結果

· 結果過多：結合導航篩選提供搜索結果卵皂。

· 無結果：空頁面展示，并且需要解釋無結果的原因砚亭。

4.3 返回功能

4.3.1 兩種返回

· 層級返回：回到上一層灯变。

· 任務流返回：回到上一步。

· iOS設計中返回樣式有icon捅膘，icon+文字添祸；MD設計中返回一般都是icon，因為MD設計中界面標題偏左寻仗，加文字容易混淆刃泌。

4.3.2 返回路徑

· 提供用戶兩種返回途徑，引入返回和關閉兩功能。

4.3.3 手勢返回

· 提供手勢易用性更高耙替，還可同時保留該功能按鈕提供過渡亚侠；

· 手勢還可節(jié)省空間，半透明額按鈕樣式也可增加瀏覽區(qū)域俗扇。

· 考慮不同使用場景硝烂，不能光依賴手勢。

4.4 反饋機制

· 操作反饋和用戶反饋（在線反饋铜幽、客服咨詢滞谢、問卷調查、用戶訪談等收集投訴和建議）除抛。

4.4.1 為什么要有操作反饋

· 幫助用戶隨時感知系統(tǒng)的狀態(tài)狮杨。

①什么時候給用戶反饋？

②通過什么方式給用戶反饋镶殷？

4.4.2 實時性

· 實時給出反饋禾酱，避免無效操作，比如輸入錯誤的身份證號绘趋，密碼超過限制要求颤陶。

4.4.3 自身反饋

· 最好不要用彈窗承載反饋功能，不具備指向性陷遮，可以輸入框/按鈕狀態(tài)更換及時進行反饋滓走。

4.4.4 輕量化

· 不僅局限于視覺層面的輕量化，更應該優(yōu)化交互帽馋，減少操作步驟搅方。

eg：彈窗上增加跳轉按鈕進行下一步反饋操作；微信浮窗手勢刪除绽族。

4.4.5 反饋的種類

· 常見的反饋方式有6種：彈框姨涡、頁面、標簽吧慢、（功能性）動畫涛漂、紅點和聲音。

①彈框最主要检诗，是一種臨時視圖匈仗，反饋偏向動作。

②頁面承載信息更多逢慌，反饋偏向動作流程悠轩。

彈窗浮于頁面，頁面其他地方無法點擊攻泼，“所見即所得”心理的解決方法：i火架、設置彈窗的顯示時間鉴象，自動消失，但是會影響產(chǎn)品轉化率距潘；ii炼列、頁面形式展示；iii音比、（思考）區(qū)分按鈕樣式/增加明顯關閉icon/點擊空白彈窗消失。

③標簽：表單錄入項過多氢惋，文字標簽的反饋更具有指向性洞翩。

④動畫：表示過程的狀態(tài)用動畫演示十分合適，比如“正在下載中”焰望、“正在加載中”...骚亿，但是注意不要過于復雜影響加載速度。

⑤紅點：Badge熊赖，可以顯示消息數(shù)量来屠，標記狀態(tài)發(fā)生變更。

⑥聲音：聲音也是一種反饋震鹉，**（思考）但是要考慮靜音情況俱笛，是不是還可以結合震動。

4.5 分享功能

· 用戶完成任何一個既定行為的三要素：動機传趾、能力和觸發(fā)器迎膜。

4.5.1 動機（理由）

· 用戶的動機點很分散，分享場景盡量細化浆兰，兼顧所有的動機點磕仅，不僅可以分享鏈接，還可以分享其中讓用戶感興趣的內容簸呈。

4.5.2 能力

· 降低用戶分享的操作成本榕订，讓分享變容易，分享按鈕（界面右上角蜕便，界面底部和跟隨信息流）劫恒。

· 易用性來講，底部分享更加友好適合單手握持機的用戶玩裙。跟隨信息流分享按鈕用于社交類appp兼贸，外露用于引流。

4.5.3 觸發(fā)器

· 除了用戶主動分享還需要尋找觸發(fā)分享功能的時機引導用戶分享吃溅，比如點贊/截圖后彈出分享行為溶诞。

4.5.4 載體

· 超鏈接：內容過多需要深入了解，內容詳細决侈。

· 圖片：內容少螺垢，更直觀喧务。

4.6 引導頁

· 引導用戶快速上手，可由浮層枉圃、彈框和引導頁等元素組成功茴。

4.6.1 啟動頁、引導頁和開屏廣告

· 啟動頁：APP每次打開都需要加載資源孽亲，會耗費時間坎穿，需要啟動頁進行過渡。

· 開屏廣告：特定的宣傳需求返劲，配置相應的開屏廣告玲昧，增加對應的超鏈接，用戶可直接進入目標頁篮绿。

· 引導頁：onboarding孵延，首次安裝產(chǎn)品或者產(chǎn)品版本更新后首次打開出現(xiàn)，并且只會出現(xiàn)一次亲配，可在短時間內告訴用戶核心功能或者本次版本更新上線的新功能尘应，讓用戶有大致了解。

4.6.2 引導頁設計要素

· 引導頁：設計風格和內容取決于核心功能和目標用戶群吼虎，主要就是以友好犬钢、易懂、最具吸引力的方式快速告知用戶產(chǎn)品的基本信息鲸睛∧榷可由插畫、文字官辈、動畫和圖片組成箱舞。

①插畫和圖像：更具象快速傳達。

②文字：足夠簡明扼要拳亿，減低用戶閱讀時間晴股，具有概括性。

③動畫：提升對產(chǎn)品的印象肺魁，但是會帶來加載負擔电湘。

④跳過選項：最好頁面右上角提供跳過引導頁選項。

4.6.3 不只是引導頁

· 第一次打開產(chǎn)品時鹅经，還可以讓用戶參與填寫一些選擇信息寂呛，提供個性化定制。

4.7 頂部欄（頁面的頭部瘾晃，一般128px）

4.7.1 去標題化

· 為什么要有標題：標題的功能就是告訴用戶當前界面的名稱贷痪；

· 為什么要刪標題：①一級界面有底部欄可告知用戶界面名稱，可以刪除蹦误；②一級頁面曝光量大劫拢，要展示足夠的功能和內容肉津，增加標題會壓縮用戶瀏覽區(qū)域；很多產(chǎn)品去掉了“首頁”和“我的”頁面的標題舱沧。

4.7.2 可點擊

· 標題可以不僅僅是文字而已妹沙，可加入可點擊元素；未登錄的用戶瀏覽時頭部可以提供快速登錄/注冊功能熟吏；內容性的還可做下拉列表篩選呃逆榮距糖。

· 極簡化設計理念：刪減與用戶任務無關的非功能性元素或者把裝飾性元素轉變成功能性元素。

4.7.3 背景色

· 頂部欄背景色：品牌色分俯、白色肾筐、深灰色、透明色缸剪。

①品牌色：品牌化處理可以直觀知道品牌產(chǎn)品，但是不要大量使用东亦，容易喪失層次感杏节。

②透明色：節(jié)省界面空間。

4.7.4 導航欄

· 部分產(chǎn)品舍棄底部導航欄轉用頂部欄做成一級導航欄典阵，例如音樂類appp底部顯示當前播放歌曲進度奋渔。

· 頂部/底部各有各的優(yōu)勢，還是要結合產(chǎn)品定位來確定壮啊。

4.7.4 隱藏

· 滑動隱藏：閱讀類/內容模塊嫉鲸，下滑閱讀時增加用戶瀏覽空間進行頂部欄隱藏，上拉時出現(xiàn)歹啼。

· 全程隱藏：相關空能放置底部欄玄渗。

第五章 組件

5.1 彈框

· 彈框：模態(tài)彈框與非模態(tài)彈框，區(qū)別為是否強制用戶交互狸眼。

5.1.1 模態(tài)彈框

· 優(yōu)點：很好獲取用戶視覺焦點藤树，需要用戶進行重要且不可逆的操作或者系統(tǒng)狀態(tài)發(fā)生了明顯變更。

· 缺點：打斷用戶當前的操作流程拓萌。

①對話框：吸引用戶注意力岁钓，用戶根據(jù)提示進行后續(xù)操作，很重要微王、有風險或不可逆操作屡限。

單按鈕，雙按鈕和多按鈕炕倘。對話框是容器還可加輸入框快速錄入钧大，還可以根據(jù)營銷活動做成活動頁樣式，但是具體關閉按鈕位置需要評估激才。

②底部動作欄：從頁面底部向上滑出的面板統(tǒng)稱（Bottom Sheets--MD規(guī)范拓型，Action View/Action Sheets--iOS規(guī)范）额嘿，底部動作欄是操作選項的容器，操作可采用列表式（2-5）/ 宮格式布局劣挫。

① vs ②：對話框（ask）文字較多册养，詢問類多用；底部動作欄（confirm）默認用戶已知操作內容压固，只需要確定操作即可球拦。

③浮層（iOS設計規(guī)范中被稱為Popover和UIMenuController）：點擊空間或某個區(qū)域出來的半透明臨時視圖，一個頁面有多個同類元素帐我，浮層可以給用戶根據(jù)指向性的提示坎炼。

① vs ② vs ③：

i、告知當前狀態(tài)及風險性操作拦键，優(yōu)先考慮對話框谣光；

ii、展示多個操作項芬为，優(yōu)先考慮底部動作欄萄金；

iii、明確不同視圖關系媚朦，給予更多指向性提示氧敢，考慮浮層。

5.1.2 非模態(tài)彈框

· 優(yōu)點：不會對用戶造成干擾询张。

①Toast：不會打斷用戶的操作流程孙乖，但是容易被用戶忽略，不適合展示過多的信息份氧，容易消失唯袄。提升信息的可讀性和美感，可增加文字+icon組合樣式半火。

②Snackbar：可點擊的toast越妈，不僅可以快速消失，還可以設置持續(xù)時間（京東斷網(wǎng)提示可一致持續(xù)到網(wǎng)絡正常）钮糖。

③Noticebar：一次可出現(xiàn)多個梅掠，不會浮于界面，可以融入界面元素中店归，一直提醒用戶阎抒。

5.1.3 彈框體系的建立

· 能不用就不用。

①明確優(yōu)先級：優(yōu)先級不同要獲得不同的視覺權重消痛，彈窗要低頻又合理的使用且叁，重要信息不要用toast。

②多態(tài)按鈕：通過改變自身狀態(tài)減少彈框使用秩伞。

③多機型與多場景

5.2 表單

· 表單三要素：標簽（標題）逞带、輸入框和按鈕欺矫。

5.2.1 標簽（這個列表項是什么）

表單過多，需要對內容進行分組整合提升內容的可讀性展氓。

· 左標簽：常見穆趴，但是會占據(jù)屏幕較大空間，多行文本在右邊輸入框內無法展示完整信息遇汞。

· 頂部標簽：可以給輸入框騰出較大空間未妹，但是會占用縱向空間，建議使用在信息層級更高的內容上空入，凸顯其優(yōu)先級络它。

· 行內標簽：輸入提示，切換到輸入中就看不到這些標簽了歪赢，可以考慮在鍵盤頂端增減提示化戳，或者增加圖標表示列表項，減少記憶成本埋凯。

5.2.2 輸入框

· 提供用戶完成信息錄入迂烁，所以要提升信息的錄入效率，數(shù)字掉起數(shù)字鍵盤递鹉，文字掉起全鍵盤。結合組件使用藏斩，避免手動輸入造成格式錯誤躏结。

5.2.3 容錯性設計

· 減少用戶的輸入借由系統(tǒng)完成，表單容錯性設計也是梳理表單中的雞肋項狰域。

①給予用戶足夠的操作提示媳拴；②自動填充完成錄入的功能，輸入時系統(tǒng)猜測可能的答案提供可選列表兆览；③設置合理的默認值屈溉；

· 表單報錯：單行表單報錯/多行表單報錯；

①單行表單報錯：建議底部文字報錯提示抬探，實時檢驗實時反饋子巾。

②多行表單報錯：因為輸入項過多，無法將報錯提示和錯誤項聯(lián)系起來小压，建議改變錯誤項文字顏色线梗、輸入框背景色和設置提示文案抖動，或者toast明確告知用戶錯誤原因和解決方法怠益。

5.2.4 按鈕

· 位置A：符合從上而下的視覺習慣和操作流程但是如果表單項目過多仪搔，則需要滑屏才可看到按鈕；

· 位置B：按鈕固定頁面底部蜻牢，適用于列表項多但是很多是非必填不需要用戶全部瀏覽完成烤咧；

· 位置C：逐漸淘汰偏陪，手機屏幕過大不方便單手觸碰，而且不符合視覺習慣和操作流程煮嫌。

5.3 tab

· 頂部欄tab（二級導航）笛谦，側邊欄tab（三級導航）和底部欄tab（一級導航）。

5.3.1 位置

①篩選訴求的程度

側邊欄tab放在左邊符合用戶從上往下立膛，從左到右的Z形瀏覽習慣揪罕，備用功能可放在右邊（城市列表拼音項）。

②隱藏還是顯示

一般有隱藏tab欄需求時會放在右邊宝泵，避免和返回按鈕沖突好啰。

5.3.2 狀態(tài)

· 文字和icon組成，狀態(tài)可分為選中/未選中儿奶，可以利用字號框往、字色、線條和背景色凸顯選中狀態(tài)闯捎。但是要注意減少用戶對導航體系設計的注意力而是更多注重內容椰弊。

· 與UI設計溝通時，除了界面風格功能點外瓤鼻，還需要涉及信息層級秉版，具象實際需求，避免重復修改茬祷。

5.3.3 使用場景

· 功能單一的簡單產(chǎn)品可以無需tab（QQ郵箱）清焕，tab過多的產(chǎn)品可以切換成彈框宮格/列表展示更多篩選項。

5.3.4 tab與Segment Control

· tab是MD設計規(guī)范中的組件（可容納多個選項祭犯，通過滑動查看更多）秸妥。Segment Control是IOS設計規(guī)范中的組件（2-5個選項）。雖然tab可容納多個但是選項過多可用彈框展示多個選項沃粗。

5.4 標記系統(tǒng)

· 當產(chǎn)品中出現(xiàn)同類別的元素時粥惧，我們考慮使用標機系統(tǒng)幫助用戶區(qū)分不同狀態(tài)。

5.4.1 角標

· 表現(xiàn)力強最盅，用于產(chǎn)品的營銷宣傳期間突雪，提升用戶點擊率，“爆款”檩禾，“折扣”挂签，“熱銷”。缺點是同個產(chǎn)品多個賣點盼产，需要對信息進行優(yōu)先級排序饵婆，避免過多造成擁擠。

· 表現(xiàn)力強

5.4.2 標簽（Tag）

· 標記任務：表現(xiàn)力稍弱于角標，不太重要功能侨核，同時展示多個草穆，可以設置不同的背景色來區(qū)分。

· 同時還有信息篩選和分類作用搓译。

5.4.3 紅點（Badge）

· 展示狀態(tài)的變更雕崩，可放數(shù)量或數(shù)字以外的文本內容怀薛，甚至直接紅點展示搂鲫。適當縮小尺寸避免產(chǎn)生煩躁情緒疹蛉。

5.4.4 印章

· 用戶表單內信息的標記首選。

5.4.5 場景和層級

· 場景不同段标，樣式不同：同一款產(chǎn)品中涯冠，使用場景和信息層級的不同，相同的組件也會有多種不同的展示樣式逼庞。

· 層級不同蛇更，樣式不同：同樣的標簽列表頁面用面狀吸引用戶，詳情頁線狀展示赛糟。

5.5 信息錄入

· 優(yōu)化信息錄入場景派任，提升信息錄入的效率，盡量避免用戶手動輸入璧南。

5.5.1 下拉框

適合選項較多掌逛，存在多層級結構關系

· 優(yōu)點：節(jié)約界面空間；無限量增加選項司倚；可展示多層級的選項颤诀。

· 缺點：點擊彈出才可看到所有選項；所有選項由上至下对湃，無法提現(xiàn)優(yōu)先級。

（思考）優(yōu)先級可以重要的放在前面遗淳，還有一個缺點是過多的輸入項拍柒，不斷滾動很麻煩。

5.5.2 單選按鈕

適合選項較少屈暗，頁面空間充足

· 優(yōu)點：直觀展示所有選項拆讯；

· 缺點：影響頁面整齊。

5.5.3 開關

中要區(qū)分這兩種樣式养叛，開關狀態(tài)不同（關閉還可置灰設計）种呐。

5.5.4 計數(shù)器和滑塊

· 用戶數(shù)字錄入，計數(shù)器（InputNum-ber）/滑塊（Slider）弃甥。

· 計數(shù)器：小范圍調整爽室，進行數(shù)量調整，配合支持用戶手動輸入淆攻。

· 滑塊：區(qū)間范圍阔墩，不是很精準的場景嘿架，有的滑塊也支持具體數(shù)值選擇。

PS：兩個值不一定要設計兩個控件啸箫，會增加點擊次數(shù)耸彪，結合場景也可以整合為一個控件完成兩個數(shù)值錄入。