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

第一章 MD和IOS設計規范

1、陰影

①MD風格非常喜歡真實世界中的元素的物理規律與空間關系來表現組件之間的層級關系。

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

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

2、導航體系

①導航體系主要是菜單欄，根據位置及交互可以分為頂部欄菜單，底部欄菜單和側邊欄菜單。

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

安卓不經常使用底部按鈕因為會有物理鍵盤，容易誤操作。

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

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

3、配色

①MD風格提倡使用高飽和度的對比色提倡視覺表現力，大色塊，高飽和。

IOS的風格就是間接，單調，性冷淡風格。

②產品界面設計中，對比效果主要由配色、尺寸、間距和陰影來完成。

4、組件

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

5、適配

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

像素：由一個數字序列表示的圖像中的一個最小單位。

分辨率分為ppi和dpi。像素是設計中最小的設計單位，點pt是iOS中最小的開發單位。

ppi：每英寸（長度）所包含的像素點數目。

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

①適配原則：同一分辨率，同一尺寸。

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

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

6、手勢

節省界面空間，簡化交互方式。

常見手勢：點擊，滑擊，拖曳，長按，多點觸控等。

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

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

引導用戶的方法：（培養用戶對于手勢的感知）

· 引用現實生活中的隱喻

· 浮層引導

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

③滑動優先

常用的兩種手勢：滑動和點擊，滑動比點擊更容易操作，滑動的落點區一般是全屏操作，點擊的落點區域要求較高。

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

④考慮場景

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

7、異常場景

· 所有的報錯反饋/提示都可以拆解為：報錯現象（原因）和解決方案。因此在發生故障時先告知報錯現象，在提供解決方案。

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

7.1 網絡故障

有的場景，網絡要求不是很高，中斷時可以不主動提示用戶，避免造成困擾，當用于執行了請求數據的操作時在進行告知網絡故障。

--頁面緩存數據情況：

頁面存在緩存數據，可以給緩存數據設置有效期，超過這個有限期，網絡還未恢復，就提示用戶網絡故障，可采用Toast演示，不影響用戶正常流程操作。還可以使用snackbar承載點擊事件，點擊跳轉至網絡設置頁中。

網絡故障提示的訴求：給予用戶持續性提示的前提下，還不能干擾用戶的正常操作。--使用Snackbar和通告欄。

--頁面沒有緩存數據情況：

①展示空白頁面

·提供“刷新頁面”按鈕

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

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

②展示骨架屏（skeleton screen）

展示頁面框架，數據請求完成時在進行渲染，占好位置再加載數據即占位符。

7.2 網絡切換

· WiFi->4G

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

②提示的方式有內嵌和對話框兩種方式。根據不同APP和場景會有區分。視頻類-->內嵌，音頻類-->對話框，優先級高的反饋我們都只考慮使用對話框，因為可以讓用戶看到，不會遺漏。

7.3 網絡恢復

①網易云音樂恢復網絡后，自動完成刷新和加載，不需要用戶手動刷新：可減少用戶的操作步驟，避免使用彈窗。在產品設計中，如果可以通過控件自身狀態的改變而讓用戶感知狀態的變更，那么我們就沒有必要使用彈框。使用彈框來通知用戶是我們最后的選項。

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

7.4 空白頁

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

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

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

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

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

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

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

7.5 超越臨界值

①極端場景、操作中斷、流程閉環、提供額外的解決辦法。

第三章 元素

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

3.1 色彩

隨著目前發展的流行，極簡風會使界面的配色越來越少。

3.1.1 為什么要配色

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

①視覺區分

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

·除了配色，文字，圖像（圖標），布局都可以實現視覺區分。

eg：同一個借款頁面，用戶主要關心的內容（借款金額）要凸顯出來，從其他元素中進行區分。體現信息的優先級。

②調整界面風格

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

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

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

③吸引用戶的注意力

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

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

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

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

④為什么是色彩

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

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

3.1.2 配色規范

①選取色彩

·配色：一般選擇產品的品牌色作為主色調，一個頁面最多出現2-3種顏色。

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

·單色搭配：整個產品的界面中，除品牌色和必要的中性色外，精簡到極致。

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

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

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

②主體風格

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

視覺表現力強更加酷炫，采取深色背景。

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

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

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

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

3.2.1 視覺吸引力

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

3.2.2 可拓展性

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

·功能的改變：數量的改變和狀態的改變，狀態改變分為外部狀態改變和內部狀態改變。

·外部狀態改變是指產品層面的變化，針對C端產品，例如定期組織營銷活動來吸引用戶（九宮格針對不同的活動，可以配置不同風格的icon）。

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

3.2.3 信息量

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

3.3 文字

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

·產品中的文字主要分四類：標題類，正文類，提示類，交互類。

3.3.1 標題類文字

·APP中標題一般有頂部欄標題、底部欄標題、列表標題、表標題等。

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

·一般來說，層級越低的標題，顏色越淺，字號越小。

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

3.3.2 正文類文字

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

·不要使用襯線字體，像素低的會出現鋸齒效果，對閱讀產生影響。

3.3.3 提示類文字? ? ?

·提示類文字的用于給用戶展示當前狀態，狀態少的產品可以搭配不同配色，狀態多的產品可以用文案區分。

3.3.4 交互類文字? ? ?

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

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

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

②文字+icon；

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

3.3.5 文案

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

②語氣，和用戶之間建立感情聯系，更好的文案可以展示產品的特性；

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

3.4 圖標

3.4.1 可識別性

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

3.4.2 網格

·引用網格避免圖標設計大小不一致，網格分為內容區和留白區；

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

3.4.3 視覺統一

·圖標庫，每個圖標共有的元素的集合成為圖標的視覺統一，純色or漸變色，描邊像素 ，圓角像素，還可加入節日元素。

3.5 按鈕

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

3.5.1 形狀

·無論什么形狀的按鈕都要保持統一；

·浮動按鈕，加上陰影可以拉近與用戶間的距離，而且浮動按鈕不僅只可以用在MD設計規范中，IOS設計規范中也可以使用，提升用戶的產品體驗。

3.5.2 填充

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

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

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

·按鈕風格還可參照品牌色，同一個按鈕不同狀態會有不同的表現形式。

3.5.3 內容

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

3.5.4 狀態

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

3.5.5 按鈕組

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

·設計：樣式上區分優先級；

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

3.6 間距

·主要作用：①塊外間距：區分不同的內容塊；②塊內間距：區分內容塊內的信息；

3.6.1 塊內/塊外間距

·塊外級別越高的內容，間距越大：塊內間距也會根據信息優先級對間距進行劃分；

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

3.6.2 間距與分割線

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

·通欄分割線：內容區分方面效果明顯，提現不同模塊間的獨立性，但是容易影響用戶信息的獲取效率，阻礙閱讀；

·分割線適用于不規則雜亂的信息數據進行歸類，有條理的布局可以去掉分割線使用間距留白，可以同步使用。

3.6.3 間距的替代品? ? ? ?

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

3.6.4 慎用間距?

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

3.7 插畫

3.7.1 提升信息傳達效率

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

3.7.2 插畫or圖像

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

3.7.3 尺寸比例

3.8 動畫

· 任何設計元素的特性都是來自于其自身的差異性。動畫與其他元素的最大區別在于其具有連續性。動畫可以演示整個過程，從狀態A到狀態B的具體路徑。

3.8.1 引導

· 對不同元素之間的聯系轉變為交互過程的動態演示，引導用戶，減少學習成本。

eg：添加購物車，動畫車內數量增加；最小化窗口；指紋解鎖錯誤的左右晃動；新用戶的操作引導。

3.8.2 吸引用戶的注意力

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

3.8.3 轉場過渡

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

3.8.4 對“花瓶”說不

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

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

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

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

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

第四章 體系

4.1 導航體系

· 利用“通道”讓內容有了關聯性，串聯各個模塊。

①現在處于哪個頁面；

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

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

4.1.1 基本元素

①tab

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

②列表

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

③標簽

· 將單選按鈕、多選按鈕、Switch等統稱為標簽，與tab和列表組合出現進行篩選。

4.1.2 組合樣式

①tab+tab

· 每個tab代表一個類別，篩選功能優先會使用tab，功能結構復雜可采用雙層tab。

②tab+列表

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

③tab+列表+標簽

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

4.1.3 容器

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

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

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

4.2 搜索功能

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

· 介紹功能：通過搜索可以了解產品可提供的功能服務，更好地了解產品。

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

4.2.1 搜索入口

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

①不同產品的搜索框展示方式存在差異：

功能：有的外露搜索框直接搜索（易于發現，使用方便）；有的隱藏點擊放大鏡圖標（搜索文字）觸發搜索框（節省空間，不影響布局，適合快速迭代期或對搜索訴求低產品）。

樣式：圓角，描邊，背景色，陰影效果等，產品一致性和功能定位進行考慮是否凸顯搜索框。

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

4.2.2 信息錄入

· 文字錄入，語音錄入（語音轉換文字，搜歌聽音識曲），圖片錄入（拍立淘，以圖搜圖），AR錄入（對準產品顯示基本信息）；

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

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

4.2.3 搜索結果

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

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

4.3 返回功能

4.3.1 兩種返回

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

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

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

4.3.2 返回路徑

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

4.3.3 手勢返回

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

· 手勢還可節省空間，半透明額按鈕樣式也可增加瀏覽區域。

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

4.4 反饋機制

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

4.4.1 為什么要有操作反饋

· 幫助用戶隨時感知系統的狀態。

①什么時候給用戶反饋？

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

4.4.2 實時性

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

4.4.3 自身反饋

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

4.4.4 輕量化

· 不僅局限于視覺層面的輕量化，更應該優化交互，減少操作步驟。

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

4.4.5 反饋的種類

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

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

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

彈窗浮于頁面，頁面其他地方無法點擊，“所見即所得”心理的解決方法：i、設置彈窗的顯示時間，自動消失，但是會影響產品轉化率；ii、頁面形式展示；iii、（思考）區分按鈕樣式/增加明顯關閉icon/點擊空白彈窗消失。

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

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

⑤紅點：Badge，可以顯示消息數量，標記狀態發生變更。

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

4.5 分享功能

· 用戶完成任何一個既定行為的三要素：動機、能力和觸發器。

4.5.1 動機（理由）

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

4.5.2 能力

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

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

4.5.3 觸發器

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

4.5.4 載體

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

· 圖片：內容少，更直觀。

4.6 引導頁

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

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

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

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

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

4.6.2 引導頁設計要素

· 引導頁：設計風格和內容取決于核心功能和目標用戶群，主要就是以友好、易懂、最具吸引力的方式快速告知用戶產品的基本信息。可由插畫、文字、動畫和圖片組成。

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

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

③動畫：提升對產品的印象，但是會帶來加載負擔。

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

4.6.3 不只是引導頁

· 第一次打開產品時，還可以讓用戶參與填寫一些選擇信息，提供個性化定制。

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

4.7.1 去標題化

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

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

4.7.2 可點擊

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

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

4.7.3 背景色

· 頂部欄背景色：品牌色、白色、深灰色、透明色。

①品牌色：品牌化處理可以直觀知道品牌產品，但是不要大量使用，容易喪失層次感。

②透明色：節省界面空間。

4.7.4 導航欄

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

· 頂部/底部各有各的優勢，還是要結合產品定位來確定。

4.7.4 隱藏

· 滑動隱藏：閱讀類/內容模塊，下滑閱讀時增加用戶瀏覽空間進行頂部欄隱藏，上拉時出現。

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

第五章 組件

5.1 彈框

· 彈框：模態彈框與非模態彈框，區別為是否強制用戶交互。

5.1.1 模態彈框

· 優點：很好獲取用戶視覺焦點，需要用戶進行重要且不可逆的操作或者系統狀態發生了明顯變更。

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

①對話框：吸引用戶注意力，用戶根據提示進行后續操作，很重要、有風險或不可逆操作。

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

②底部動作欄：從頁面底部向上滑出的面板統稱（Bottom Sheets--MD規范，Action View/Action Sheets--iOS規范），底部動作欄是操作選項的容器，操作可采用列表式（2-5）/ 宮格式布局。

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

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

① vs ② vs ③：

i、告知當前狀態及風險性操作，優先考慮對話框；

ii、展示多個操作項，優先考慮底部動作欄；

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

5.1.2 非模態彈框

· 優點：不會對用戶造成干擾。

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

②Snackbar：可點擊的toast，不僅可以快速消失，還可以設置持續時間（京東斷網提示可一致持續到網絡正常）。

③Noticebar：一次可出現多個，不會浮于界面，可以融入界面元素中，一直提醒用戶。

5.1.3 彈框體系的建立

· 能不用就不用。

①明確優先級：優先級不同要獲得不同的視覺權重，彈窗要低頻又合理的使用，重要信息不要用toast。

②多態按鈕：通過改變自身狀態減少彈框使用。

③多機型與多場景

5.2 表單

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

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

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

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

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

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

5.2.2 輸入框

· 提供用戶完成信息錄入，所以要提升信息的錄入效率，數字掉起數字鍵盤，文字掉起全鍵盤。結合組件使用，避免手動輸入造成格式錯誤。

5.2.3 容錯性設計

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

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

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

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

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

5.2.4 按鈕

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

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

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

5.3 tab

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

5.3.1 位置

①篩選訴求的程度

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

②隱藏還是顯示

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

5.3.2 狀態

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

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

5.3.3 使用場景

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

5.3.4 tab與Segment Control

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

5.4 標記系統

· 當產品中出現同類別的元素時，我們考慮使用標機系統幫助用戶區分不同狀態。

5.4.1 角標

· 表現力強，用于產品的營銷宣傳期間，提升用戶點擊率，“爆款”，“折扣”，“熱銷”。缺點是同個產品多個賣點，需要對信息進行優先級排序，避免過多造成擁擠。

· 表現力強

5.4.2 標簽（Tag）

· 標記任務：表現力稍弱于角標，不太重要功能，同時展示多個，可以設置不同的背景色來區分。

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

5.4.3 紅點（Badge）

· 展示狀態的變更，可放數量或數字以外的文本內容，甚至直接紅點展示。適當縮小尺寸避免產生煩躁情緒。

5.4.4 印章

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

5.4.5 場景和層級

· 場景不同，樣式不同：同一款產品中，使用場景和信息層級的不同，相同的組件也會有多種不同的展示樣式。

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

5.5 信息錄入

· 優化信息錄入場景，提升信息錄入的效率，盡量避免用戶手動輸入。

5.5.1 下拉框

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

· 優點：節約界面空間；無限量增加選項；可展示多層級的選項。

· 缺點：點擊彈出才可看到所有選項；所有選項由上至下，無法提現優先級。

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

5.5.2 單選按鈕

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

· 優點：直觀展示所有選項；

· 缺點：影響頁面整齊。

5.5.3 開關

中要區分這兩種樣式，開關狀態不同（關閉還可置灰設計）。

5.5.4 計數器和滑塊

· 用戶數字錄入，計數器（InputNum-ber）/滑塊（Slider）。

· 計數器：小范圍調整，進行數量調整，配合支持用戶手動輸入。

· 滑塊：區間范圍，不是很精準的場景，有的滑塊也支持具體數值選擇。

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