前陣子回老家的時候，在老人家里看到這樣一個機器，這個機器的功能主要為家庭教育、視頻通話與監(jiān)控等等。

如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。

當然了，這個機器最后只被家里的老人當成，一個只會定點報時的“擺設”。

除了把字號放大，適老化設計還需要做什么？以下分享京東直播在適老化設計上的幾點探索。

強化對比——看清信息

直到近幾年才知道，家里的長輩喜歡發(fā)微信語音，其實是因為老花眼打字不方便。

在適老化設計中，需要注意界面中的信息與背景的對比度，是否足以讓老年人清楚識別，這涉及到對色域跨度的調(diào)整。

我們通過 H（色相）S（飽和度）B（明度）的數(shù)值來劃分色域。如下圖，在統(tǒng)一H值的情況下，規(guī)定了10個標準的S、B值，從而形成一個色帶。所以我們在前后景的顏色選擇上，需要滿足跨度至少為5 ，才能讓老齡用戶清晰地識別到前景信息。

比如在京東直播的老年版界面中，不僅加深了原標準版中的淺灰色文字信息，同時對一些暗文設計也進行了調(diào)整，如搜索框暗文“點擊搜索主播名/商品”等內(nèi)容，提升暗文明度以確保與其背景間的色域跨度大于5。

所以在適老化設計中，需要讓界面中的信息與其背景間的色域跨度至少為5，才能足以讓老年人看清信息。

傳達共識——看懂內(nèi)容

90前的人想要表示“打電話”，會用手比出6的姿勢貼在耳邊；而現(xiàn)在的00后，會用手掌當作手機的樣子貼在耳邊來表示…

在讓老年人能夠看清界面中的信息之后，我們的設計還需要有更清晰的表意信息，讓他們能夠看懂。其中的關鍵在于，這些信息是否能夠“傳達共識”。

無法傳達共識的設計，就像00后的小孩突然擺出用手掌貼在耳邊的姿勢，家里的老人看了可能也無法領會到，這表示的是“打電話”的意思。

在設計中想要”傳達共識”，需要盡量避免圖形icon的單獨出現(xiàn)，用純文字或圖+文的形式表達。不過除了給圖標加上文字，其實我們在圖標本身的設計上也可以進行適當調(diào)整。

比如同樣表達“話費充值”，是用手機還是座機，哪個更能讓那個年代的長輩理解？哪些事物是那個年代慣用的，哪些事物是在那之后才誕生的？哪些是我們?nèi)粘Ｉ钪芯痛嬖诘臇|西，哪些又是專屬于互聯(lián)網(wǎng)世界的產(chǎn)物呢？

所以在適老化設計中，除了幫界面里的所有圖標加上文字以外，在圖標的設計上也可以結合年代、群體環(huán)境的因素，讓圖形表現(xiàn)的是老齡年代慣用的、日常生活中固有的內(nèi)容，讓老年人也能輕松領會到，這表示的是什么。

聯(lián)系認知——找到點擊區(qū)

就算沒使用過手機的人，在生活中看到凸起的事物也會忍不住按一按；但如果他們看到的是一個圓圈，就不太可能有這種反應了。

在適老化界面中，需要代入更多能夠聯(lián)系生活經(jīng)驗的認知錨點，幫助老年人順利在界面中找到點擊區(qū)域。其實不妨回想一下，即使是現(xiàn)在熟練使用手機的我們，也是從當時iOS4的擬物化界面，開始慢慢地培養(yǎng)心智，才能到如今就算看到一個線框、甚至只有純文字，也能輕松分辨出哪里是可點擊的按鈕。

而當下的老人，也正像當時一開始接觸智能手機的我們，需要在界面中找到與自己生活經(jīng)驗的對照，才能利用熟悉的事物作為認知錨點，幫助自己理解聯(lián)系上一些陌生的概念。

比如將界面中可點擊的區(qū)域強化投影或高光，幫助老人們聯(lián)系起生活中對凹凸的認知試著去點一點。除此之外，我們還需要把一些會對點擊認知產(chǎn)生干擾的內(nèi)容進行弱化。

比如在標準版的京東直播中，存在像紅包雨、獎券這種運營標簽，其樣式看起來與按鈕很像，但實際為不可點區(qū)域，所以在老年版界面中弱化了這些標簽，將他們與所在的列表內(nèi)容作為一個整體背景，讓視覺重心聚焦在可點擊的按鈕上。

所以在適老化設計中，除了需要對可點擊區(qū)域強化投影以聯(lián)系認知，也需要將一些不可點擊的干擾項進行弱化，保證視覺重心最終落在可點擊區(qū)域上。

行為指引——完成點擊

美國新澤西北部一家電影院做了一個潛意識實驗：在電影中每隔5秒就插入0.03秒的字幕，寫著“吃爆米花”和“喝可樂”，雖然人的肉眼無法捕捉到0.03秒出現(xiàn)的事物但它們可以堆積成潛意識，隨后當天影院的可樂銷量增加15%，而爆米花則增加了58%。

在適老化設計中，我們還可以運用潛意識作為界面中的隱形向?qū)?，幫助老年人順利完成目標行為?

比如在按鈕的文案中包含行為動作、結果去向的內(nèi)容，像“點擊領券”中的“點擊”——對當下需要完成的動作描述，“領券”——動作完成后的結果去向，讓每個一眼晃過的引導效果堆積，成為界面中的隱形向?qū)?，幫助老年人了解如何完成操作?

像在京東直播的老年版界面中，也同樣設計了這些隱形向?qū)?。比如在列表上加入“點擊進入直播間”的按鈕，引導老年人順利了解到“我當下可以進行點擊”以及“我點擊后可以進入直播間”的信息。

除了對按鈕文案的調(diào)整，我們還可以為一些非明確的可點擊區(qū)域加上行為指引。比如在主播力薦中，每個商品圖片都可點擊看對應的主播講解，因此為每個商品加上帶明確行為意圖的點擊按鈕，避免讓人以為這只是一些展示圖而并不知道這其實都是可以點擊的。

所以在適老化設計中，可以在按鈕文案中加入行為動作、結果去向的內(nèi)容，同時對一些非明確的可點擊區(qū)域加上行為按鈕，發(fā)揮潛意識的隱形引導作用，幫助老年人順利地完成目標行為。

以上僅展示階段性成果，設計方式、設計理念等，我們的探索遠沒有結束，期待下一次分享中與你們的交流。

文章來源：站酷   作者：SDL藝術實驗室

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

移動互聯(lián)網(wǎng)的迅速崛起，讓移動網(wǎng)頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l(fā)展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內(nèi)容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。

如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。

接下來為大家分享精美的app UI設計案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機 ui設計、軟件界面設計、網(wǎng)站設計，用戶研究、交互設計等服務。

--手機appUI設計--

工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現(xiàn)彈層”、“出現(xiàn)浮層”、展示“對話框”、彈出“彈框”、“出現(xiàn)對話框”諸如此類的話術。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應該如何應用、如何設計。

恰好筆者近期在設計彈出層組件，本篇文章將結合自己的實戰(zhàn)經(jīng)歷，自己對彈出層組件的理解和設計經(jīng)驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。

彈出層組件的定義

首先我們看一下彈出層組件的定義：當觸發(fā)某項操作時，在頁面上方展示的彈出層容器，容器內(nèi)可展示文本、按鈕、列表、標簽、表單項等內(nèi)容，英文名稱定義為 Popup。

△ 彈出層組件的構成

根據(jù)彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。

△彈出層組件的 5 種樣式

看到彈出層組件的樣式，想必大家已經(jīng)聯(lián)想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎的組件，基于該組件我們可以開發(fā)通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質(zhì)上都是彈出層。

“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據(jù)自身的規(guī)范對相關組件進行命名。Material Design 和 iOS 官方規(guī)范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發(fā)整理了組件之間的對應關系。后文會詳述每種組件的定義及應用。

△MD 和 iOS 規(guī)范中的彈出層組件

在詳述組件之前，還需要向大家傳達一個概念“模態(tài)”，即平時我們常說的“模態(tài)彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態(tài)彈框”，而是當彈框采用了“模態(tài)”的設計手法時，我們將其簡稱為“模態(tài)彈窗”。

iOS 官方定義為：

“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”

翻譯過來即：模態(tài)是一種設計手法，它使用一種臨時性的模式將用戶之前看到的內(nèi)容與當前看到的內(nèi)容進行區(qū)分，并且需要通過明確的操作才能退出該模式。模態(tài)呈現(xiàn)的內(nèi)容可以：

幫助用戶專注于一個獨立的任務或一組緊密相關的選項，確保用戶收到關鍵信息，并在必要時采取行動

由此可見，彈層是否為模態(tài)彈層可以根據(jù)具體的使用場景進行定義。在 iOS 官方中定義的模態(tài)彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續(xù)的系統(tǒng)中將 Fullsreen 也作為模態(tài)彈層進行使用。MD 中的 Dialogs 組件均為模態(tài)，而 sheets 組件不采用模態(tài)設計手法。

彈出層組件的分類與應用

1. 警示型彈框

警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務流程，影響用戶體驗，因此需注意其使用頻率。

△警示型彈框 Alert Dialog

使用場景：通常在系統(tǒng)級信息的提示，例如權限的獲取、系統(tǒng)通知，需要明確告知用戶的信息，以及破壞性操作前使用。

△警示型彈框應用

2. 任務型彈層

根據(jù)用戶在彈層中需要完成的任務內(nèi)容和任務數(shù)量，又可分為簡單型和復雜型彈層。

簡單型彈層

常用于在彈層中展示內(nèi)容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。

彈層中是否存在操作按鈕可根據(jù)實際應用場景去確定。通常選擇項條目較少或內(nèi)容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。

△簡單型任務彈層的組件樣式

△簡單型任務彈層的組件樣式

彈層中信息的呈現(xiàn)方式又可分為“列表”和“網(wǎng)格”兩種，大多種場景下，均可使用列表展示內(nèi)容，更加符合用戶從上到下的閱讀習慣；而在分享場景下多通過網(wǎng)格的方式將分享渠道展示出來，增加屏顯的內(nèi)容，同時提高用戶查看信息的效率，具體樣式可參考上圖。

使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數(shù)應用中，除原生的安卓應用外，大部分應用都采用從底部向上彈層和從頂部向下彈層的方式。

△簡單型任務彈層的應用

復雜型彈層

復雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務。

涉及到信息篩選時，通常采用側邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態(tài)”的手法，方便用戶快速取消當前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統(tǒng)中，很多 APP 應用在復雜的篩選場景下也都采用側邊彈層的方式。

全屏彈層會將當前頁面中的全部信息遮擋，更方便用戶聚焦于當前需要完成的任務，避免用戶的注意力被分散。通常采用模態(tài)的設計手法，僅當用戶觸發(fā)確認、取消或關閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內(nèi)容區(qū)域。用戶在全屏彈層中需要完成多個任務，因此內(nèi)容區(qū)域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關、列表、日期選擇”等。

△復雜型任務彈層的組件樣式

使用場景：通常用于完成復雜任務的表單信息填寫、內(nèi)容篩選、搜索和內(nèi)容展示。

△復雜型任務彈層的應用

需要單獨說明氣泡框組件

在 iOS 的官方定義中，氣泡框組件應用于 iPad 應用程序，在 iPhone 應用程序中，通過以全屏模態(tài)視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。

△Popovers 氣泡框的應用

小結：

筆者按照使用場景、信息的復雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務型”，并且枚舉了常用的 MD（安卓系統(tǒng)遵循的規(guī)范）和 iOS 兩大規(guī)范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業(yè)務場景是復雜的、多樣的，各位設計師也需要結合實際的業(yè)務場景和設計目標，靈活的使用組件。

△彈出層組件的類型與使用場景

如何設計彈出層組件

1. 設計目的

首先需要理解我們?yōu)槭裁匆O計組件，組件最終設計的目標是什么，筆者從“設計側和技術側”兩方面談談自己的理解。

設計側：規(guī)范的組件設計，對內(nèi)有利于全公司的設計師對組件的使用有統(tǒng)一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設計師快速學習和上手，提高設計效率。對外也有利于保證設計上線后的一致性和規(guī)范性，方便用戶對本公司產(chǎn)品建立統(tǒng)一的心理認知。

技術側：通用的基礎組件，具有可復用性，能夠減少重復開發(fā)，大大提高開發(fā)效率。

組件設計的最終目標可歸納為保持設計的統(tǒng)一性，提升用戶體驗，同時提高設計和開發(fā)的效率。因此，組件設計是非常有必要的，那么到底如何從 0-1 開始設計組件呢，下面我們來看組件設計的詳細思路。

2. 設計思路

其實組件設計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎組件的設計。通常我們會從組件的定義、用法、構成、種類、行為與狀態(tài)五個方面進行組件的設計。

△組件設計的思路

• 定義：通過精準的話術描寫組件的內(nèi)容與目的。
• 用法：組件包含的內(nèi)容、出現(xiàn)的位置、信息展示的規(guī)則等。
• 構成：通過示意圖展示組件包含的具體信息，例如標題、按鈕、內(nèi)容區(qū)等。
• 種類：根據(jù)一定的規(guī)則對組件進行分類。
• 行為與狀態(tài)：使用組件的整個交互流程與交互邏輯說明；組件的狀態(tài)說明，例如 normal 態(tài)、click 態(tài)，disable 態(tài)，滾動時的頁面狀態(tài)等。

回歸到本文所講的移動端彈出層組件，組件設計時需要考慮其“通用性和可復用性”。基于此原則，將彈出層組件進行拆解，如下圖所示。它包括：

• 遮罩層：覆蓋底部頁面上的內(nèi)容，方便用戶聚焦當前彈層上的信息
• 容器層：承載內(nèi)容的容器
• 內(nèi)容層：容器里的內(nèi)容，不同區(qū)塊的內(nèi)容可單獨封裝

△彈出層組件的拆解

從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發(fā)。因此，在彈層組件設計時將 Popup 組件抽離出來作為最基礎的組件進行開發(fā)， 還可以進一步開發(fā)通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。

設計實戰(zhàn)

1. Picker 選擇器

定義：用于從一組預設數(shù)據(jù)中進行選擇的控件。

用法：

• 選擇器通常顯示在屏幕底部或彈出窗口中。
• 通常包含 2 個操作按鈕“取消和確定”，按鈕名稱支持修改。
• 可自定義設置是否顯示標題。
• 支持單列選擇和多列選擇，多列選擇一般不超過 4 列，且多列值之間可配置其級聯(lián)關系。

構成：標題、按鈕、內(nèi)容（當前選項和其他選項）

△Picker 選擇器組件的構成

種類：根據(jù)選項間是否存在級聯(lián)關系可將其分為 2 類，普通選擇和級聯(lián)選擇。

△Picker 選擇器組件的分類

行為與狀態(tài)：狀態(tài)，給出單列選項和多列選項的常態(tài)頁面以及選項被禁用的狀態(tài)頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現(xiàn)->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。

△Picker 選擇器組件的狀態(tài)

△Picker 選擇器組件的交互流程與行為說明

當完成以上全部內(nèi)容的撰寫時，可對本組件開發(fā)出的效果進行說明。例如：

• 普通選擇（以單列選擇示例，默認項為第一個選項）
• 普通選擇（以 2 列選擇示例，默認項為每列的第一個選項）
• 多列選擇無級聯(lián)關系（以日期選擇年、月、日示例，3 列選擇，默認項為當天）
• 多列選擇存在級聯(lián)關系（以城市選擇為例，3 列選擇，默認項為每列的第一個選項）。如此的說明會讓技術同學本次組件的產(chǎn)出示例更加清晰，可減少開發(fā)過程中的溝通成本。

2. Filter 篩選器

Filter 組件是基于公司移動端產(chǎn)品均存在的高頻“篩選”場景而總結的場景（業(yè)務）組件，其設計思路和上方描述的通用組件的設計思路相同，筆者此處只強調(diào) 2 個重點注意事項。

場景組件在設計時遵循“加法”邏輯，從而提升組件的復用率。組件內(nèi)容分區(qū)塊進行封裝，從而增加組件的靈活性。

△篩選器組件

在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發(fā)，且多類目篩選可基于單類目篩選組件進行開發(fā)。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發(fā)不同于設計稿，設計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發(fā)成本要高于重新開發(fā)組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發(fā)出單類目篩選的組件。這也是需要我們牢記的，組件設計需要從“原子組件到復雜組件”，遵循由“簡單到復雜”的加法邏輯。

而在組件開發(fā)時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當業(yè)務場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內(nèi)容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復用，這就提高了組件的通用性和復用率。

當然，F(xiàn)ilter 組件還需要考慮很多設計細節(jié)，例如類目名稱是否顯示為當前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復雜，組件設計的整體流程和交互細節(jié)也應考慮的更加全面。

文章來源：優(yōu)設網(wǎng)   作者：土撥鼠

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

收藏

收藏

收藏

收藏

收藏

收藏

轉自：站酷

作者：火龍果_pitaya

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

移動互聯(lián)網(wǎng)的迅速崛起，讓移動網(wǎng)頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l(fā)展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內(nèi)容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。

接下來為大家分享精美的app UI設計案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機 ui設計、軟件界面設計、網(wǎng)站設計，用戶研究、交互設計等服務。

--手機appUI設計--

什么是分類

簡單地講，分類就是按照種類、等級或性質(zhì)分別歸類。

分類的特點

1、共同性：

某種事物無論是按什么分類，只要是屬于同一種分類，就一定有一個共同的屬性，而這個屬性就是分類的依據(jù)。

假如手機是指“移動便攜性的通訊設備”，那么小米手機、華為手機、蘋果手機等，雖然系統(tǒng)不同、性能配置不同、外觀設計不同，但是都可以歸類到手機，因為它們都具備“移動便攜性的通訊設備”這一共同屬性。

再舉個很簡單的例子，蘋果、梨子、芒果都可以劃分為水果，因為他們具備“多汁且主要味覺為甜味和酸味，可食用”的屬性（定義來自百度百科），這些屬性是歸屬于這個分類的必要條件?；谶@個分類，我們比較容易判斷得出，生菜不是水果，因為雖然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。

2、組織性：

分類可以把雜亂的事物變得規(guī)整，把凌亂的信息按照某些維度劃分，使事物更加清晰。

前兩年風風火火的垃圾分類，就是一個例子。生活中所有物品廢棄后都可以成為垃圾，如果不進行垃圾分類，處理成本高且污染環(huán)境。而垃圾分類，就是將垃圾按一定規(guī)定或標準將垃圾分類儲存、投放和搬運。

既然分類是按照某種方式進行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。

“簡單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問他們的分類標準。如果眾口不一，或者根本就難以回答，你就有麻煩了?！?

垃圾分類很火還有一個原因，因為用戶經(jīng)常不知道什么物品屬于什么垃圾，這就對垃圾分類產(chǎn)生很大的阻力，網(wǎng)上一時間有了很多識別物品垃圾分類的產(chǎn)品功能。

我之前使用三星手機，每次想要在設置里面尋找某功能，都很讓人煩躁，因為手機設置里定義的某功能的分類方式，與我們的認知并不一致，這就會造成尋找時及其低效的情況，同時也會引起強烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認知的分類方式不一致，你就極難找到。（不過三星很有意思的一點是，盡管在設置的分類項里找不到，但是往往能在設置項下方的推薦查找處找到相應功能，這就很魔幻。）

3、高效性：

分類本身就是將混亂的事物進行歸類，這帶來一個很明顯優(yōu)點，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對輕松地找到。

比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應用商店的眾多應用里，尋找某款應用，比較常用的方式就是搜索或者分類。

分類可以將應用按不同用途進行劃分，比如視頻、拍攝、工具、社交等。通過這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。

4、對比性：

分類還有隱藏屬性，就是對比性。許多用戶使用分類時，也會喜歡進行對比。

還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進行對比，正好可以讓你更輕松地對比哪款軟件更適合你。

5、全面性：

分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物，就會造成用戶尋找時的盲區(qū)，證明這種分類方式本身不合理。

假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時大概率就不會再通過分類進行尋找了，而這種糟糕的體驗，也會讓用戶對這個產(chǎn)品的分類變得很失望。

6、多樣性：

剛才說到，同一分類是圍繞同一個屬性的。但是，同一個事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。

一首歌，如果按照語言體系維度進行劃分，一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分，一般可以劃分為電子、輕音樂、搖滾、說唱等。

我們對事物的認識方式是立體的，事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物，甚至同一個人，是可以有多種分類方式的。

設計分類功能

說完分類的許多屬性，我們聊聊在互聯(lián)網(wǎng)產(chǎn)品中，用戶會在什么場景下使用分類？我們又該如何設計分類功能？

1、分類的使用場景

首先，用戶會在什么場景下使用分類？從產(chǎn)品層面，分類是便于人們查找某事物的一種方式，因為相對比較清晰、高效。

這里有個很關鍵的點，就是“查找”。也就是說，分類的使用場景，偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。

互聯(lián)網(wǎng)產(chǎn)品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點，分類側重于“屬性”區(qū)分。

大部分用戶使用分類時，行為特點是相對主動的。此時用戶未必有十分明確的目標，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時候你打開了大眾點評，你只知道要吃中餐，這時你可以在中餐的分類里去找適合你的店。

用戶的目標如果十分清晰，則更適合直接搜索，因為這比起分類查找的路徑更短也更高效。

總結一下，我們要設計分類功能，需要從用戶的角度來觀察分類這件事情。：

· 用戶主要的行為模式：人找內(nèi)容。

· 有目標但不夠明確。

2、如何設計分類功能

a、分類的層級

我們需要先了解分類的細分層級，分類的層級大部分不超過 4 層，但會因不同產(chǎn)品的定義不同而有所區(qū)別。

一般來說，第一層是顆粒度相對較大的，接下來會層層在上一層的基礎上細化。

以京東的分類為例：

第一層：奢侈品，箱包，手機等；

第二層：手機包含：熱門品牌、手機類型、運營商、手機配件；

第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；

第四層：蘋果手機包含：iPhone 12、iPhone 11等；

最少的層級是兩層，比如垃圾分類：

第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；

第二層：具體的垃圾物品。

就體驗層面而言，建議分類層級避免超過 3、4 層，盡管本身可能會提升細分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標內(nèi)容在哪一分類。經(jīng)過幾層判斷后，才能找到目標內(nèi)容，這對于用戶的理解成本是比較高的。

此外，太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤，就需要返回繼續(xù)查找，效率低、使用門檻高。

當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求，因為內(nèi)容量龐大，所以還需要更多的過濾，需要依據(jù)產(chǎn)品類型而定。

由于目前許多產(chǎn)品都發(fā)展到相對成熟的狀態(tài)，所以設計分類功能時，一般不需要對分類方式再進行劃分，主要原因是相同類型的產(chǎn)品，分類方式大同小異。用戶的理解習慣上，對于某事物的分類也有基本的認知?，F(xiàn)在設計分類功能，主要是對頁面交互及視覺層級進行重新設計和調(diào)整。

b、如何根據(jù)產(chǎn)品設計分類

我們會梳理常見的分類交互框架，從分類入口、頁面布局等層面可以看到產(chǎn)品中分類功能的定位強弱。這里列舉的分類形式，會根據(jù)產(chǎn)品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。

• 側邊導航型分類

以京東 App 為例，京東把分類功能作為一個主要的頁面模塊。分類 tab 占據(jù)了 App 的第 2 個底部 tab。

使用京東的用戶，購買的目的性相對較強，京東主打的就是自營正品和快遞速度，商品與淘寶相比會少很多，但依然很全。用戶習慣上，“逛”的屬性沒有淘寶那么強。首頁以功能區(qū)+信息流為主，偏向于商品分發(fā)+逛信息流，而分類功能則主要滿足相對明確目的用戶需求。

京東分類頁左側為一級分類，右側為二、三級分類。側邊導航將分類豎排的最大優(yōu)點是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高，可以配置運營位，如放置運營 Banner ，且支持左右滑動 Banner 。下方一般放置二、三級分類。

右側頁面滑動時，頂部有輔助查找二、三級分類的導航分類標簽，便于用戶快速查找：

切換一級分類：這種框架切換分類的方式主要有兩種：1、點擊左側導航欄進行切換；2、向上滑動右側頁面進行切換。用戶習慣上，第 1 種方式會更高效，而第 2 種切換方式會更自然，更符合手勢操作。

以【推薦分類】為例，右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區(qū)分頁面分類層級，頁面向上滑動時，通常會設計繼續(xù)上拉切換的提示。目的是提醒用戶，該部分已經(jīng)滑動到底了，繼續(xù)上滑會切換到下一部分，明確區(qū)分不同分類。

上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】，右側分類標題與左側導航一一對應，并且分類之間無明確的頁面分隔區(qū)分，所以滑動時無需設計切換到下一部分的提示。

以上講的，右側頁面均是二、三級分類入口，并不是具體的。分類層級或類型少的情況下，右側可以嘗試放置具體內(nèi)容，比如華為應用市場的處理形式。

需要注意：

1、左側導航占據(jù)了屏幕縱向的固定位置，從而縮減了頁面寬度。

2、由于層級多，左右側均是分類入口，用戶無法在頁面直接看到具體商品/內(nèi)容。在電商產(chǎn)品上，用戶容易區(qū)分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內(nèi)容在哪一分類類目下，可能造成用戶流失。

3、如果沒有具體的內(nèi)容呈現(xiàn)，對于內(nèi)容、商品等分發(fā)效率也存在影響。

• 頂部 Tab 型分類

頂部導航型的優(yōu)點是將多級分類與具體內(nèi)容結合在一個頁面，可通過點擊或者滑動切換不同分類，將觸達具體內(nèi)容的路徑盡可能減少，提升具體內(nèi)容的曝光。

以掌閱 App 為例：最高層為一級分類，可滑動。第二層是二級分類，更精準分類挑選。第三層導航偏向于篩選。第四層為具體內(nèi)容，用戶無需通過頁面跳轉就能查看。這種設計特點很明顯：內(nèi)容曝光 > 分類效率。由于一級分類不多，可以通過左右滑動查看，避免浪費頁面空間。二級分類類型多，采用折疊的形式將分類收起，點擊可以展開更多二級分類。

顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認狀態(tài)下，占用頁面頂部的空間。這種結構，在設計時為了能夠節(jié)省頁面空間，二、三級導航會伴隨用戶向上滑動的手勢折疊，提升內(nèi)容的曝光效率。用戶在滑動場景下，會更聚焦于頁面具體內(nèi)容而非導航，所以折疊的設計比較巧妙。

這種設計由于具體內(nèi)容曝光的效率高，受到許多產(chǎn)品的青睞，適合于資訊類、內(nèi)容類等產(chǎn)品。比如微博首頁，微博側重于內(nèi)容的主動推薦，所以將分類弱化為一行導航欄，頁面主體為具體內(nèi)容推薦。用戶瀏覽的內(nèi)容有相對固定的傾向，比如會喜歡看綜藝、社會、美妝等內(nèi)容，并沒有很強的尋找不同分類的訴求。

若用戶想要設置常用的分類頻道，可點擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。

知乎的處理邏輯與微博一致：

淘寶的分類相比于一般電商類的產(chǎn)品，會比較特別，常見的電商類產(chǎn)品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經(jīng)往全面信息流化的方向發(fā)展，為了推動用戶在淘寶中“逛街”，甚至連分類都已經(jīng)往信息流化的方向發(fā)展。

淘寶的分類功能正在弱化，不像京東、蘇寧占據(jù)著底部第 2 個 tab 的位置，而是在首屏功能區(qū)的最后一位。點擊后，也不再是常規(guī)的側邊導航，而是強化商品外顯。

淘寶分類頁除了上方的一、二級分類，下方都是商品推薦，向上滑動就是瀑布流，增強商品而弱化分類效率。

如果用戶想看其他分類，可以通過左右滑動切換。如果希望查看更多分類，需點開旁邊的”更多“按鈕，通過”更多“按鈕進入的頁面，側重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對算法推薦的信心，我發(fā)現(xiàn)不同手機看到的分類順序并不一致。

• 聚焦型分類

以 B 站為例，B 站的分區(qū)頁面的設計形式為展示番劇、國劇、放映等所有一級導航，而將細分層級隱藏到下一級頁面。

這種設計方式適合一級分類類型很多，且重點在于高效呈現(xiàn)這些分類類型的場景。二級頁面聚焦于具體的內(nèi)容，可以避免將一、二級分類堆疊在一個頁面，滿足用戶對查找分類的效率的要求，避免過載的信息量使頁面變得復雜。但顯而易見的，這種結構不利于用戶在當前頁面直接看到下一層級內(nèi)容。

App store 整體邏輯與 B 站一致，區(qū)別在于排列方式為列表型排列。

vivo 應用商店也是聚焦型分類，但是會把二級分類呈現(xiàn)出來，與側邊導航型分類很相似，區(qū)別在于這里是整列表滑動。

• 篩選型分類

前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風格、預算、特色等維度。

上面“好好住”的幾個維度之間，沒有上下層級之分，均屬于同一層級，所以層級是并列而非遞進的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據(jù)過多的頁面空間，當頁面上滑后，篩選可折疊以節(jié)省頁面空間，同時更聚焦與具體內(nèi)容。

結語

設計分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認知習慣相沖突從而影響功能使用的情況。

整體上，通過分類功能找目標內(nèi)容的路徑應該避免太長，因為這會影響到內(nèi)容曝光效率及用戶對分類之下的具體內(nèi)容的感知。

分類本身是一種信息組織與呈現(xiàn)方式，設計時需要對產(chǎn)品信息本身有足夠理解，才能有針對性地思考交互框架。分類功能的交互框架多樣，每種都有優(yōu)點和缺點，需要根據(jù)產(chǎn)品定位及訴求（優(yōu)先展示分類，還是優(yōu)先展示具體內(nèi)容）采用適合的交互形式。

需要注意的是，有的產(chǎn)品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強的時效性，能不能看到電影幾乎完全取決于電影何時上映，重點更側重于向用戶推薦最近的電影。

以上分析了分類功能、羅列了比較常見的分類功能設計形式，希望能幫助到各位。

文章來源：站酷   作者：熱風_

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

移動互聯(lián)網(wǎng)的迅速崛起，讓移動網(wǎng)頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l(fā)展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內(nèi)容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。

接下來為大家分享六款精美的app UI設計案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機 ui設計、軟件界面設計、網(wǎng)站設計，用戶研究、交互設計等服務。

--手機appUI設計--

這一年，更多的是關于交互的思考。如果說界面是外表的話，那么交互就是其靈魂，只有交互合理的產(chǎn)品，才能夠讓用戶更好的使用，而交互細節(jié)成熟的產(chǎn)品對體驗上的提升則更巨大。寫這篇的起源是平日在設計評審時或多或少會遇到以下的交互問題：

在思索如何能夠盡量避免遺漏細節(jié)的過程中，發(fā)現(xiàn)狀態(tài)可見性原則對于這些細節(jié)有比較重要的指導意義。這一原則想必大家都不陌生，但可能并沒有引起大家的重視，且網(wǎng)上大部分文章對于此原則的解釋都比較簡短。因此在探索過程中產(chǎn)出了這篇比較詳盡的關于狀態(tài)可見性原則的深度解讀。目錄如下，重點已圈好～

大家可以根據(jù)上述目錄來進行選擇性閱讀，當然全文閱讀也是極好的～

1.1 相關問題闡述

我們在開頭闡述了可能遇到的一些問題。而以上情況的出現(xiàn)，都源自于我們在設計時思考的不夠全面，很多時候都忽略了某些情況下的設計，導致有些關鍵體驗上的問題未被發(fā)現(xiàn)。我們可以看下微博和知乎在斷網(wǎng)下點贊的例子。

可以看到，微博在斷網(wǎng)下依然有點贊動作的反饋，且沒有任何異常提示，這樣會導致用戶大多數(shù)以為此次操作是成功的。但知乎在斷網(wǎng)情況下，點贊是不能生效的，且有消息提示“異常提醒”。這樣的話其實就能夠讓用戶明白此次操作沒有成功。在這種場景下，微博的點贊就屬于“不恰當?shù)姆答仭?。而這些設計，都可以歸因于狀態(tài)可見性原則的范疇。

1.2 狀態(tài)可見性原則定義

讓我們先了解一下狀態(tài)可見性原則的定義。這是尼爾森(Jakob Nielsen)-人機交互學博士，于1995年1月1日發(fā)表了「十大可用性原則」。而可用性原則位于十大可用性原則之首。

雖然只有這么一句話，但其中包含的意義比較重大。我們現(xiàn)在所使用的系統(tǒng)，都運用了狀態(tài)可見性原則，如果沒有，那么系統(tǒng)幾乎會掉入不可用的現(xiàn)象。而系統(tǒng)在使用體驗上的差異性，有很大一部分原因也在于可見性原則運用的好與壞。

我們來舉一個生活中的例子來幫助大家理解。當你手機沒電，你用充電器連接手機時，在連接的一瞬間（恰當時間），手機狀態(tài)發(fā)生變化（恰當反饋）讓你成功獲取手機正在充電的信息（系統(tǒng)狀態(tài)）。如果在某個環(huán)節(jié)出現(xiàn)問題，比如連接上手機2分鐘后（不恰當時間），手機狀態(tài)才發(fā)生變化。那么你肯定會認為哪里出現(xiàn)了問題。這就是狀態(tài)可見性原則的基礎運用。

那么我們?nèi)绾文軌蛏羁汤斫庖粋€原則呢，最簡單的做法就是將其拆分，并結合實例理解。下面通過原則拆解來進行深刻解讀。

我們將拆解分為以下三個部分，下面的篇幅會更詳盡地進行說明

2.1合理時間的定義和表現(xiàn)

時間在這里指的就是系統(tǒng)的響應時間，而合理則可以理解為時間的長短。這句話可以理解為從用戶執(zhí)行操作到反饋出現(xiàn)的間隔時間是否正常，是否有影響到用戶的正常體驗。

當我們在進行打字輸入時，我們敲擊鍵盤的同時，屏幕上就會出現(xiàn)對應的文字。而如果出現(xiàn)文字的反應時間過長，我們就會感覺到明顯的卡頓，此時的響應時間就會變得“不合理”。

根據(jù)Robert B. Miller在他的研究《人機對話的響應時間》中以及其它相關資料，制作得出以下結論圖

以上是人機交互響應時間的總覽，接下來細節(jié)深化每個時間點對應的操作。

我們先看100ms以內(nèi)的。我們平時使用的小組件動畫，比如說按鈕反饋，勾選反饋，以及其他需要瞬時反饋的操作，基本都是在100ms內(nèi)完成的。

在看100ms-1s區(qū)間的，在這個期間進行的動畫，用戶能夠很清晰的看見動畫發(fā)生的過程，而又不顯得遲鈍。我們普通UI中應用的動畫則大部分在100ms-500ms這個范圍內(nèi)?！緸楹卧谶@個時間內(nèi)呢，個人的理解是：對于發(fā)生在UI界面內(nèi)的動畫，100ms內(nèi)的動畫太快，人只能感受到開始和結束的狀態(tài)，不能看見發(fā)生過程，因此一般大于100ms，而500ms是用戶即時感知的最長時間，因此小于這個范圍內(nèi)的動畫較為合理】

最后看下1s-10s這個區(qū)間的：在這個階段，最有可能進行的就是相關頁面的加載行為，或者某些小型文件的上傳和預覽。針對于這種情況，我們一般會在加載進行中，添加對應的加載效果，來緩解用戶的焦慮和等待情緒。

最后則是10s以上的，一般用于大型文件的上傳或者弱網(wǎng)環(huán)境的加載過久。

大約10秒鐘后，用戶的情緒將達到極限，內(nèi)心將開始產(chǎn)生疑惑，超過10秒，用戶往往會離開網(wǎng)站，而不是試圖繼續(xù)恢復他們一開始想要做的事情。

因此，我們在進行系統(tǒng)設計中，需要對超過這一時間內(nèi)的行為，進行對應的反饋。比如加載超過10s的時候，我們是不是需要給用戶提供離開的選項，或者提示用戶重新加載這樣一種行為。我們可以看下高德和美團在加載中的例子

我們可以看到，在到達10s后，美團自動給出了一個當前網(wǎng)絡不可用的，請檢查網(wǎng)絡的提示，并終止了加載進程。而高德地圖則是沒有任何提示，自動結束了加載。相比之下，美團能夠讓用戶明白為什么中斷了該進程，也就擁有了更好的用戶體驗。

且對于一般情況下都超過10s以上的形式，我們無須讓用戶停在當前頁面等待。比如微博或者抖音的視頻上傳，一般會消耗比較久的時間，因此當用戶點擊上傳后，都只會留一個小地方來展示上傳進度，用戶隨時可以做其他的事情，這樣有效避免了用戶長時間等待的問題。

以上則是常見的在合理時間內(nèi)的表現(xiàn)，但目前也存在一些特殊場景：

比如時間延遲，圖蟲和微博會在用戶停留幾秒后增加評論區(qū)域的顯示，根據(jù)用戶停留時間，判斷用戶對當前內(nèi)容感興趣，以此來增加用戶的互動。

類似的這種設計還有抖音的評論分享，當超過一定時間后，評論圖標自動變?yōu)榕笥讶D標。而在PC端，也有一個很典型的案例，不知道大家注意到?jīng)]有，就是關于hover的延遲。我們在使用hover顯示時，一般可能大家認為中的都是鼠標移動上去立刻顯示，但在某些應用場景中，延遲300ms再進行hover顯示，會更合理，舉例如下：

大家可以看到上圖，在你快速移動時，是不會顯示下方的補充說明的。在停留大概300ms后，則會出現(xiàn)提示。其實這里對應了兩種用戶場景。第一種是快速移動的場景，有利于用戶切換不同頁簽時不打擾用戶；而在停留時，用戶則是想要看更詳細的信息。因此在這里使用hvoer延遲既能不打擾用戶，也能滿足用戶的不同需求。

這里是之前做的一個案例，就是由于沒有考慮到hover延遲，從而使得用戶在快速移動時會讓hover的信息產(chǎn)生干擾。

以上的內(nèi)容都是針對于時間的詳細解釋。只有了解在對應的時間系統(tǒng)處于哪種狀態(tài)，我們才能夠滿足狀態(tài)可見性原則中“恰當?shù)臅r間”這一原則。從而更好的對系統(tǒng)進行對應的交互設計，讓用戶在使用產(chǎn)品時獲得優(yōu)秀的體驗。

按照目錄接下來應該講反饋了，但在反饋之前想先提及一下頁面信息呈現(xiàn)。只有當用戶理解當前頁面所表達的信息后，才能夠進行接下來的操作，從而得到對應的反饋。在這里主要提及兩個點，一是核心信息，二是預期信息。

加餐時刻1：界面核心信息的呈現(xiàn)

一個用戶界面如果沒有核心信息的呈現(xiàn)，那么給到用戶的反饋是很弱的，用戶第一眼都不知道從界面中能夠獲取什么內(nèi)容。尤其是在移動端核心信息的呈現(xiàn)更為重要：

比如上述兩個案例，在界面上只呈現(xiàn)了最重要的內(nèi)容，移除了其他全部干擾內(nèi)容，讓用戶更聚焦。當然平時接觸到的不可能全部是這種頁面，我們在頁面信息呈現(xiàn)較多時，也需要進行重點信息的呈現(xiàn)。在這里放一個動態(tài)的案例讓大家對比一下重點區(qū)分的形式

加餐時刻2：界面預期信息的呈現(xiàn)

除了核心信息，還有預期信息的呈現(xiàn)，說白了其實就是元素的可交互性與不可交互性。當事情按照用戶預計的方向運行時，用戶會有強烈的控制感。在PC上，用戶可以使用鼠標懸停來判斷該元素是否可交互，但在移動設備上，用戶只能通過點擊來判斷是否為交互元素。

這就要求我們在移動端設計時需要清晰地考慮到可交互元素與不可交互元素在外觀上的區(qū)分。我們先來看一個關于微信的例子：

大家可以看一下微信的數(shù)字呈現(xiàn)，除了默認的黑色字體外，是不是還出現(xiàn)了一種淺藍色字體。而你點擊藍色字體，則發(fā)現(xiàn)可以調(diào)出動作面板。而黑色字體則不會。

這就是利用顏色的區(qū)分來引導告知用戶部分信息的可點擊性。而目前關于移動端可交互元素如何設計，如何讓評審時不再聽到“你這個看著像不可點的”這句話。根據(jù)相關資料和過往項目，總結出以下幾點：

首先根據(jù)目前人們的認知，基礎控件類型的都是可以操作的，比如按鈕，導航欄、底部標簽欄等。下圖為工作中做的一些基礎控件：

拋開基礎控件，剩余重點是文字類。文字類在不加任何提示的情況下，用戶會默認為不可操作的對象。一般我們通過下列幾種方式來體現(xiàn)其可操作性。

介紹了可交互性，那么再來講一下不可交互性的元素。不可交互的部分有一個非常重要的點，就是應該需要讓用戶認識到該元素為什么是不可交互的，不對用戶造成困擾。

不可交互的處理方式一般分為置灰和隱藏兩種方式。我們首先來看看置灰無反饋類別的使用場景：

還會存在一種置灰有反饋類別的使用場景，而對于非按鈕類狀態(tài)的置灰，經(jīng)過資料和相關調(diào)研，發(fā)現(xiàn)可以根據(jù)其使用場景來設置是否給出反饋，比如網(wǎng)易云音樂的音樂列表場景。

除開置灰的另一種場景就是隱藏，工具類應用對于隱藏這個操作使用得較多，比如我們平時使用得sketch和figma也基礎應用了這一操作場景。

好了，說完了用戶界面的相關內(nèi)容，只有了解上述內(nèi)容，讓用戶明白界面哪些是可交互，哪些不可交互。才能夠讓用戶進入到下面的“恰當反饋“。

2.2恰當反饋的定義和表現(xiàn)

在這里我先講手勢操作，因為手勢操作是前提，然后再講反饋設計。

2.2.1 手勢操作

反饋的前置條件是操作，我們在加餐中已經(jīng)告知了如何引導用戶操作，但在移動端中可能還包含一些隱藏的手勢操作，利用不同的手勢可以達成不同的操作響應。我們來看一下這個案例：

這是即刻對同一個控件進行了兩種手勢的定義，但大部分用戶可能對于第二種長按手勢的功能其實是不知道的。這樣的功能來說對于新手用戶來說是處于不易發(fā)現(xiàn)的“彩蛋“功能。又比如下方的知乎雙擊點贊，以及最近微博更新的連續(xù)點擊效果：

如果我在這里不進行事先說明，可能部分用戶還不知道。但好在上述兩種方式的設計前提是建立在不影響主功能使用的，用戶依舊可以通過其他操作來完成。

說這些的是為了表明，我們在設計反饋時，要考慮到手勢操作的用戶認知程度，一些特殊的手勢操作雖然能提高用戶的操作效率，但用戶如果都不能發(fā)現(xiàn)，何談提高效率，更多的作為“隱藏彩蛋”功能出現(xiàn)。因此我們在產(chǎn)品設計中要盡量注意去使用常規(guī)手勢而不是非常規(guī)手勢。下列歸納了部分手勢：

大部分情況下我們其實使用“點擊”和“滑動”就可以完成大部分系統(tǒng)操作。如果我們需要加其他操作最好在用戶第一次進入時加上引導。

當然，在某些情況下，我們是需要將常用的操作，轉化為不常用的操作，來防止用戶發(fā)生誤操作，比如下方的keep在運動中停止的按鈕，考慮到運動的場景，單純的點擊很容易被誤觸。因此keep對“結束”這一功能采用“長按+引導”的方式來防止用戶誤操作：

OK，接下來正式進入反饋這個環(huán)節(jié)。

2.2.2 反饋設計

反饋就是當用戶對于系統(tǒng)進行相關的操作后，系統(tǒng)對應引起的一系列變化。反饋從類型上可以分為視覺反饋、聽覺反饋和觸覺反饋。

聽覺反饋和觸覺反饋在這里簡單講一下，一般在我們的設計中使用的比較少，聽覺反饋目前用的最多的是語音助手和地圖類工具在息屏時后的反饋，比如下方的高德地圖反饋，能夠讓你在進行開車或騎行時，即使關掉屏幕，也能通過語音反饋知道此時正在導航中：

而震動反饋最開始是在蘋果內(nèi)的應用，包括你在知乎上進行點贊，appstore下載應用，都會進行對應的反饋，讓你的感受“實體化”，提升使用體驗。

而目前在其他app上，也逐漸開始了應用，比如大家熟知的微信“拍一拍”，在拍頭像的同時會伴隨著震動反饋；以及iMessage的反饋，它會在煙花綻放的那一剎那有震動反饋，給用戶更真實和有趣的體驗。

好了，最后來講視覺反饋，視覺反饋是我們目前最常見的反饋，也是平日里接觸最多的交互反饋。視覺反饋可以分為以下三種類型：

控件反饋舉一個最常見的案例，就是我們按鈕的狀態(tài)變化，我們通?？梢钥吹綘顟B(tài)有以下幾種變化：

大家對上述按鈕的狀態(tài)可能都比較熟悉，但在很多情況下可能會忽略一些其他控件的點擊狀態(tài)，比如我們看下方的一個例子：

這是點擊“收藏”按鈕時兩個不同點，一個沒有點擊狀態(tài)的感應，一個有。這其實也是之前我比較疑惑的一個點，從功能性上來講，它并不影響后續(xù)的使用。但這種點擊狀態(tài)在官方文檔上到底有沒有明確說明呢，特意去查了下官方文檔，在IOS中的設計原則中有這么一段描述（黑字加粗部分）

并且在IOS的原生應用中，基本都遵循這一原則：

雖然有這樣一條原則說明，但并沒有特別嚴苛的規(guī)定我們必須要這樣做，因為即使沒有這種反饋，也不會特別影響用戶的整體操作，更多的是帶來使用體驗上的提升。因此大家可以在平日的使用中根據(jù)產(chǎn)品的設計階段，特別是在優(yōu)化體驗的時候，可以考慮這一部分。接下來我們看一下頁面反饋

當我們觸發(fā)的可交互元素不涉及頁面的跳轉，那么此時的反饋多數(shù)用于當前頁面本身的反饋。而一般是由alert、toast、action sheet等來構成的。我們需要利用這些控件來對用戶的相關操作給出反饋，比如下面躺平和夸克的例子，當用戶操作時有對應的后續(xù)反饋：

再來看一個有對比性的例子：

上圖是QQ音樂和網(wǎng)易云音樂對于退出賬號這一場景采用的不同控件，那么這兩種控件哪種使用得更為合理。從用法上來說，兩者都沒有錯誤，但目前的移動端設計在這個場景逐漸傾向左側的設計形式。因為從使用程度上來說，左側的Action sheet 的級別會弱于右側的Alert，對用戶的打斷程度會更弱，且Action sheet可以通過點擊空白處來取消，而右側的alert在移動端大部分都是模態(tài)的，只能通過操作來取消。

因此對于這兩種需要根據(jù)使用場景來進行區(qū)分。一般來講，Alert更適合用于對系統(tǒng)操作有一定風險或者很重要的操作【需要引起用戶強烈注意】，Action sheet則相對于Alert更輕量化，對用戶的打斷較弱。

關于頁面反饋這部分還有些控件有比較細致的區(qū)分。比如toast提示適用于更輕量化的場景反饋，因為全網(wǎng)彈窗相關的內(nèi)容也有很多了，在這里不細講。但大家在使用控件時需要注意下列IOS官網(wǎng)上的一個原則規(guī)定：

原則上盡量不去打斷用戶，給予輕量化的信息反饋，除非是某些需要引起特別注意的場景。關于這個的舉例，我們可以看下京東和淘寶在加入購物車的例子：

淘寶是使用傳統(tǒng)的toast來進行加入成功的反饋，而京東則是利用一個小動畫來達到告知用戶已加入成功的提示。相比之下京東的提示則更加有趣和輕量。因此我們除開傳統(tǒng)的控件外，也可以利用動效來進行更為恰當?shù)姆答?/strong>。最后，我們來講一下頁面跳轉反饋：