一年前更新了文章《交互手勢的容錯性和邏輯性》之后，有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章，講解每個手勢的不同之處、應用場景以及在工作中如何使用。

我非常理解這些讀者的痛點，因為我在日常的工作中，也經常遇到一些難題。比如同樣是滑動，但是些許參數的變化就會導致體驗的天差地別，應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果，讓最后的結果不至于與自己的預期不一致。這些難題也促使我大量思考，大量體驗各種產品的手勢操作，希望能夠從中總結出規律，讓手勢的設計與落地能夠有理有據?，F在經過一段時間的積累，我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處，希望大家指正。今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。

位移類手勢的描述維度

手勢作為圖形界面與用戶之間溝通的方式之一，在便攜電子設備上大量應用。與實體按鍵相比，它有著純粹的簡潔性和無盡的創造性，手指的個數變化、不同變量的組合能夠創造出無數的操控方式。

位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢，本篇文章主要講解單指操作的位移類手勢，多指的位移類手勢（如捏合）將放到后續文章中講解。

一談到位移類手勢，大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而，當我們想仔細談論他們三者之間的區別時，大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別，我們在這里引入三個維度的概念，它們分別是控制方式、穩定化效果、以及閾值類型，這三者的不同的變化組合可以創造不同的位移類手勢，拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時，不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢，因為這三個維度的變化就會產生不同的變種，而且不同變種在體驗上也存在很大差別，若不分場景隨意使用，很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。

1. 控制方式

第一個維度是控制方式，它分為絕對控制和相對控制，也可以通俗的表達為跟手和不跟手，區別如下。

絕對控制/跟手：施加控制的一方（后文簡稱施控物）的某個屬性變化與被施加控制的一方（后文簡稱受控物）的某個屬性變化是對應的。

相對控制/不跟手：施控物的某個屬性變化與受控物的某個屬性變化不是對應的。

比如在網易云音樂的播放頁，左右滑動黑膠時，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對應的，即絕對控制。上滑調出評論頁時，評論頁的位置和手指的位置沒有對應關系，手指的上滑僅僅控制評論頁是否出現，即相對控制。

與相對控制相比，絕對控制允許用戶去操控受控物的屬性變化過程，因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑，手指的橫向位置與書籍封面的變化過程對應，模擬現實生活中慢慢合上書的感覺，如下圖。

但是在有些場景，為了避免混亂，屬性變化過程是不適合被用戶絕對控制的，此時我們應采取相對控制的方案。比如 iOS 的相機中，左右滑動切換拍攝模式，由于前后不同模式之間的頁面框架變化較大，切換時會有過多元素的屬性變化，如果使用絕對控制就會導致切換拖沓且混亂，使用相對控制就能避免這個問題。

2. 穩定化效果

定義

當我們使用手勢控制某個受控物時，由于手勢的某個屬性（如手指位移）達到閾值，進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」，或者也可以稱為「吸附」。

穩定化效果能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。

是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度，當某個位移類手勢有穩定化效果，我們就將其稱作輕掃。

以滑動切換抖音視頻為例，當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后，下一條視頻會往上移動一個固定的距離然后進入穩定狀態，而不會出現停留在不完整的中間狀態，如下圖所示。

在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕，按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小，而不會停在類似下圖左所示的混亂的中間狀態。

在多內容選擇的場景中，如果滑動與選中是綁定的話，一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時，滑動濾鏡選項不但能夠控制濾鏡選項的位置，并且會自動選中一個位于中間位置的濾鏡，位置的穩定化避免了被選中選項的不明確。

如果滑動與選中是分開的，比如美圖秀秀的濾鏡選項需要先滑動后選中，這種情況下穩定化效果不是必要的。

與效率的關系

不同的穩定化規則帶給用戶的體驗差異是非常大的，最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解，穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。

比如在比較常見的 banner 切換功能中（下圖左），無論手指位移和釋放速度的值有多高，banner 只能切換并穩定到下一個，不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中，一次滑動能夠切換多個內容卡片，我們可以說前者的穩定化效果比后者強。

拖拽和甩動雖然沒有穩定化效果，但是也存在效率的高低。我們可以將其與輕掃放在一起做對比，如下圖所示，拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。

那么我們決定添加穩定化效果后，如何選擇強弱程度呢？選擇沒有絕對的對錯，整體來說主要考慮兩點，業務訴求和用戶訴求。例如在常見的 banner 切換中，banner 的總數量一般不會很多，業務的訴求是希望盡可能曝光每一個 banner，使感興趣的用戶進行消費，因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里，不同用戶感興趣的榜單是不同的，穩定化效果弱的輕掃可以方便用戶單次滑動切換多個，快速切換到自己感興趣的榜單的大概位置。

百度 App 的表情面板原本是左右輕掃瀏覽表情，在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

微信視頻號的改版是一個典型的案例，舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢（下圖右），而是占據屏幕尺寸三分之一到二分之一之間的卡片形式（下圖左），并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏，社交推薦算法不完善，貿然模仿抖音式的全屏化形式和輕掃手勢的話，會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低，反之卡片形式加甩動手勢給予了用戶更自由的選擇空間，提高了用戶的切換效率，降低了負面體驗。等到如今時機成熟，再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

在某些場景，用戶需要先通過高效的方式選擇特定區域的內容，然后進入聚焦狀態進行內容瀏覽和慢速的切換，此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置，點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。

觸發時機

觸發穩定化的時機可以分為釋放前和釋放后，不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時，手指位移達到閾值后，手指無需離開屏幕，穩定化即可被觸發。如下圖左，iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時，手指位移或釋放速度達到閾值后，手指必須離開屏幕，穩定化才能被觸發。如下圖右，常見的 banner 切換。

釋放前穩定化可以避免拖沓，增加切換效率，但是缺點是無法反悔回退且缺乏掌控感。反之，釋放后穩定化可以反悔回退，掌控感強，但是缺點是比釋放前穩定化拖沓了一些。

3. 閾值類型

閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣，100 度就是一個閾值，溫度是閾值類型。在手指與屏幕的交互中，手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型，達到相應閾值后就可以觸發相應的變化，常見的變化有受控物的位置、大小、不透明度等，理論上變化可以是任意的。

在位移類手勢中，通常會用到的閾值類型有手指位移和釋放速度，手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離，釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。

市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式，因為其不太符合常識。因此我們在設計位移類手勢時，能夠選擇的閾值判定方式常見的有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。

當我們設計手勢時，就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離，因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短，所以相對應的缺點就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優點是不易誤操作和精確，缺點是低效。

甩動和拖拽之間的區別就在于閾值判定方式，甩動是 ① ，拖拽是 ② 。如下圖，當在微信消息列表找相應的消息時，用戶的訴求就是能夠快速找到特定消息的位置，對特定消息的出現在屏幕的位置也沒有特定要求，只要能夠被手指點擊到即可，因此選用甩動較為合適，但是對于調節音量、亮度這一類的操作，滑動的范圍有限，因此用戶對效率沒有特別的要求，但是對于滑塊位置的精確度有要求，因此選用拖拽是更為恰當的。

再舉一個反例，在 Steam 移動端橫滑首頁的泳道卡片時（下圖左），使用的手勢是拖拽而不是甩動，瀏覽起來特別低效。更適合的做法應為甩動，會更符合此場景下的快速瀏覽的訴求，如下圖右的豆瓣。

對于輕掃來說，使用哪種閾值判定方式有多種情況（如下圖所示）。在本文中，根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類（A-E 的命名方式僅存在于本文章，因此在向其他人傳達時，盡量使用在后文我介紹的手勢描述而不是類別名稱，以便于對方理解。）。后續會為大家仔細舉例講解，大家現在僅了解一下即可。

當我們在刷抖音視頻時使用的手勢就是輕掃，是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可，對應的手勢類別是上面表格中的輕掃A。如下圖所示，在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個屏幕高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式，因為既省力又便捷。

如果將閾值判定方式改為 ②僅判定手指位移，對應的手勢類別是上面表格中的輕掃 B，并且位移的閾值設置得比較大的話，給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后，想要下滑收起時，App 僅判定手指位移，而且這個位移閾值設置得比較大，對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移，我們也可以通過減少手指位移的閾值來降低負面體驗。

但是某些場景下，②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁，上下滑動瀏覽微信消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值的話，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序選擇頁。

因此，對于位移類手勢，選用哪種閾值判斷方式要依據用戶使用場景和訴求，不能想當然地設計。

常見位移類手勢解析

了解完三個基礎維度后，我們再將其進行組合，從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢，我列舉出了常見的 7 類，如下圖所示，這 7 類基本涵蓋了 95% 以上的場景，我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置，因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。

1. 拖拽

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，無論釋放時手指是否仍有速度，受控物都會立即停止移動。（下圖的動態演示由 Principle 制作，觀看會有些不太直觀）

特點

精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果，拖拽適用于對操作精度要求高，對效率要求低的功能。

案例

在 iOS 設置中調節亮度時，在有限范圍內，手指左右拖拽可以控制亮度變化。

2. 甩動

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指仍有速度，受控物將移動一段距離后才慢慢停止，移動的距離與釋放速度呈正相關。若釋放時手指速度為 0，則受控物立即停止移動。

特點

精確度低但效率高。由于閾值類型判定釋放速度和手指位移，甩動適用于需要快速瀏覽較多內容的場景，如滾動瀏覽列表。

案例

在微信的消息列表頁，使用甩動手勢控制列表上下移動，若釋放時仍有速度，列表將仍移動一段距離后才慢慢停止。

3. 輕掃 A

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值，受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值，受控物將回到原位置。

特點

由于輕掃擁有穩定化效果，因此它能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性，就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」，這讓輕掃 A 與輕掃 B-E 有兩點不同，一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少，更加高效，二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容，因此更加省力。

案例

在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向移動大概半個視頻高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

4. 輕掃 B

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指位移達到閾值，受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物將回到原位置。

特點

輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式，這提高了觸發切換的難度，使操作成本變高，但是在某些場景下，這也降低了誤操作的概率。如下拉刷新等。

案例

比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁，這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值判定方式，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序頁面。

因此，當頁面已存在一個滑動操作的情況下，還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時，為了避免誤操作，會將后者的手勢設計為輕掃 B。

上文提到，輕掃 A 的閾值類型為判定「釋放速度和手指位移」，輕掃 B 的閾值類型為僅判定「手指位移」，由于前者的實現成本比后者高，導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B，比如之前提到過的美圖秀秀的短視頻評論浮層案例，但我們也可以通過減少手指位移的閾值來降低負面體驗，后文會講解如何與開發同學溝通。

5. 輕掃 C

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是受控物并不隨著手指的控制而同步移動，僅當釋放時手指位移達到閾值時，受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物位置則一直保持不變。

特點

上文講到過釋放后穩定化和相對控制的缺點，釋放后穩定化比較拖沓，相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢（即輕掃 C ），就會導致用戶在滑動屏幕時得不到任何反饋，用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作，整體的交互流程給用戶一種滯后與延遲的感覺。

因此輕掃 C 與其他類別的輕掃相比存在劣勢，但是它也存在很多的 App 的 H5 頁面中，我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多，因此只能退而求其次選擇輕掃 C 這個較差的方案，實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。

案例

下圖左是 QQ 的個性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C，如果能夠優化為輕掃 A 體驗會更好，比如下圖右的音街首頁卡片的設計。

6. 輕掃 D

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值，無需手指釋放，受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值，無論是否釋放，受控物位置則一直保持不變。

特點

相對控制的方式降低了用戶的掌控感，釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時，我們不希望用戶過于自由地操控對象之間的屬性變化過程，并且犧牲掌控感從而增加單次的切換效率。

案例

比如 iOS 的相機中，左右滑動切換拍攝模式時，由于前后不同模式之間的頁面框架變化較大，切換時會有不同元素的屬性變化，如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓，使用相對控制和釋放前穩定化就能避免這個問題。

7. 輕掃 E

特殊說明

上文我們講到，通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前，受控物一旦穩定化，就脫離了手指的控制，需要手指離開屏幕后再次接觸屏幕開始下一次控制。

輕掃 E 的不同之處在于它可以在受控物穩定化后，仍然控制受控物朝著下一個節點穩定化，在每個節點之間切換時能夠明顯感覺到分段感，如下圖案例所示。

由于輕掃 E 相對于輕掃 A-D 的特殊性，控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象，因此我們使用「多段相對控制」來命名輕掃 E 的這種特殊的控制方式。

定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，若手指位移達到閾值，無需手指釋放，受控物就穩定在了一個新位置，但是此時手指還是仍然可以操控受控物繼續移動的，并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。

特點

輕掃 E 適用于需要在多個對象之間快速切換和確認的場景，它的使用感覺很接近拖拽。如下圖所示，我們可以這樣理解，當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時，輕掃 E 就可以視為拖拽。

案例

iOS 相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航，它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。

實戰案例

了解完上述的維度和常用手勢后，我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時，就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。

本案例是網易云音樂陌生人版一起聽中的一個功能，一起聽的雙方在聽歌過程中會收到彼此共同信息，比如聽歌口味相似度、是否同城、都喜歡哪些歌手等，目的是為了增加可玩性和互動性、降低退出率，鼓勵用戶互相了解、提高一起聽過程中的社交體驗。

為了營造儀式感和避免信息過載，共同信息的展示方式設計為了一次只能看一條，進入浮層后默認展示最新的一條，可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態（如下圖左），我們為其添加了釋放后穩定化效果（如下圖右），同時為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩定化效果是較弱的，用戶可以通過滑動一次切換多個共同信息。

由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」，用戶可以通過控制釋放速度進而控制信息的切換數量。控制方式則選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類，此手勢為穩定化效果較弱的輕掃 A。

手勢角度的處理

位移類手勢的方向一般為上下或左右，但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時，默認會有一個容錯角度，比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑，如下圖所示。

但是有時開發同學出現失誤，導致容錯角度沒有均分，例如下圖中觸發上滑和下滑的角度極小，導致用戶在上下滑動時非常容易誤操作為左滑和右滑。

云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌（如下圖 A，現已修復），安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄（如下圖 B ）。

因此，在驗收階段，除了上述的三個維度外，角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下，最好要切換不同的手持方式分別體驗一次，因為有些問題只有在特定的手持方式下才能夠被發現。（下圖素材來源于網絡，侵刪）

客戶端的角度判定方式實際上是一個比較復雜的過程，上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。

客戶端的差異

上文講到，基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別，是設計階段一定要定義清楚的。但是除此之外，設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線？手指位移與受控物之間的位移的比率是多少呢？這些都是開發階段不得不面對的。幸運的是，安卓和 iOS 有系統封裝好的一套系統組件可以調用，操作系統自行解決了剛才講到的細節問題，但是 H5 框架下是無法調用系統組件的，手勢的各種細節都需要前端開發人員自己編寫，難度較大，大部分情況只能實現一些比較簡陋的效果，這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。

高效溝通

由于信息不對稱，與開發的溝通過程中，很容易出現理解偏差。比較常見的錯誤有：將甩動誤解為輕掃 A，將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況，很多設計師不知道如何讓開發同學修改，只能說“這個手勢不絲滑，優化一下”，開發同學也是一頭霧水，不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移，需要釋放時的速度也能夠觸發跳轉；這個位移的閾值太高了，滑動時很難觸發跳轉，需要把閾值改為 16pt ”類似這樣準確的描述，就能夠大大降低溝通成本，順利驗收。為了避免溝通出現問題，下面我將日常經驗總結出現希望能夠幫助到大家。

首先，一旦涉及到位移類手勢，除了必要的文字描述外（可參考上述的手勢定義的描述），最好給開發體驗 demo 或者其他 App 上類似的效果，否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示，但是 App 可能會更新，案例可能在未來某個時間就找不到了，所以我用 Principle 做了一個簡易的基礎 demo 集合，和我上述介紹的手勢是對應的，大家可以拿著這個 demo 給開發同學演示大概的效果，也可以在這個 demo 源文件修改。

拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了，不需要我們給到額外的標注。但是對于輕掃，我們需要將細節定義清晰，下面將詳細講解。

1. 閾值類型

上文講到，閾值類型一般有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。①的開發成本高于②。

如果我們選用輕掃的閾值類型是①，開發同學編寫代碼需要兩個參數的閾值，分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2，例如下圖的全屏短視頻和 Banner 。

當然我們也可以自定義一個閾值，比如 100pt、受控物高度的 1/6 等，沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明，但是如果有特殊需要想要修改默認值，就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值，通常默認就非常的小，幾乎是大于 0 即可觸發，一般情況下使用默認值即可。

在本應該選用①的場景中，如果由于技術成本原因不得不選用②，需要注意的是由于缺少了釋放速度的判定，手指位移的閾值我們需要設置得小一些方便用戶觸發，否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗，手指位移閾值一般定為 16pt 是比較適中的，既不會太容易誤操作也不會難以觸發。

2. 穩定化效果

輕掃是一定存在穩定化效果的，關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講，系統會監測用戶的行為，用戶在使用滑動時會有按下（down）、移動（move）、抬起（up）三個行為，釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作，開發成本幾乎沒有區別。

上文提到過穩定化效果強弱的概念。穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。首先，我們需要確定單次滑動允許切換多個還是只允許切換一個，如果允許切換多個，開發同學會設定一個控制切換難度的系數，而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數，但如果想讓操作更加難或容易觸發，可以告知開發同學修改這個系數。

3. 控制方式

絕對控制比相對控制的開發成本高，如果開發資源并不是很緊張，需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式，否則很可能被視為相對控制處理。

手勢排查

通過本文的學習，我們不但可以在開發工作進行前與開發同學高效溝通，保證開發工作的順利進行，也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄，并且找到合適解決方案，然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格，挑選出一些有代表性的案例給大家作參考，開發同學可以通過它快速明確問題，理解解決方案。

結語

本篇文章的歸納總結是通過日常積累和思考得來，希望能夠幫助大家在設計與溝通層面解決實際問題，如果有任何疏漏和不嚴謹的地方，希望大家能夠指出，后續的更新會將專欄不斷完善，交互手勢系列暫定的后續更新計劃如下。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設 作者：設成于思

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

以前，設計師們都需要去跟開發溝通并手動標注所有文件，現在，有了像 Zeplin 和 Abstract 這樣實用的標注工具，設計師幾乎不需要花太多的時間在對接上。

但是，還是避免不了很多東西會在對接過程中出現問題。比如，這個按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個較大的對象內居中？讓我們來看下約束布局在對接過程中的使用方法。

約束布局是定義控制應用中內容的規則。這些規則通過使用統一的元素和間距，保持跨平臺、跨環境和跨屏幕大小的一致性。通常應用在 iOS 和 Android 中。

彩云注：這里想跟大家科普下相對布局和約束布局的區別。相對布局是通過相對定位的方式讓控件出現在布局任意位置，相對布局因為邏輯原因，層級較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對位置也更好控制。約束布局也是繼相對布局后，谷歌官方針對相對布局問題給出的一個更優解決方案，意在將來替代掉相對布局。當然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發方面會更多一些。

約束條件

如果在 sketch 文件中已經設計布局好了所有元素，就可以開始了！

1. 基礎單位

8×8

首先從定義基本單位開始，每個度量值都是其倍數。我建議使用偶數 8 來調整大小和間距，因為這樣可以方便且一致地適配各種設備。

• 8 更容易整除！10/4=2.5 vs 8/4=2
• 大多數流行的屏幕尺寸都可以被 8 整除，這樣更容易適配（與 6 或 10 相比）
• 分辨率為 1.5 倍的設備很難清晰地顯示像素為奇數的，若按 1.5 倍縮放 5 個像素就會導致半像素偏移。

在 Sketch 中選擇首選項>畫布，將“通過 Shift+方向鍵調整移動對象中的 10px 改成 8px”，這樣會解決很多問題！

2. 間隔單位

間隔單位是常用間距的視覺表達。例如，一個“2 間隔單元”是 16 pt/dp，因為 2×8=16。這些符號應該在設計中使用，別名應該被標注成代碼，以便在和開發對接時使用相同的語言。

垂直和水平間隔

在項目很趕的時候，你可能沒有足夠的時間手動做到完美像素對齊。通過使用這些通用單位來標識，而不是標注工具自動生成的標注像素，它可以告訴開發實際間距。數字別名與“Shift +方向鍵”移動對象的次數相匹配。

響應式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE

間隔大小永遠不會改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機寬度上，組件的尺寸會發生變化，但用于創建它的邊距的間距將保持不變。

對齊指標

有時元素在間隔之間對齊。間隔之間對齊的主要方法是中心對齊和底部對齊。

垂直居、中水平居中和居中對齊

中心對齊是指你想要一個對象或一組對象向中間集中對齊。對象可以水平居中，垂直居中，或者向中間集中對齊。

底部對齊

底部對齊是指希望對象與其中一個對象的底部對齊。當有兩種不同的文本大小并且想要在基線處對齊時，底部對齊就是比較常見使用方法。

1. 點擊對象

48 x 48

在手機上，最小點擊對象尺寸為 48x48dp /pt。這尺寸來自于谷歌設計指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時考慮點擊對象大小。你也可以使用點擊對象符號來表示元素的哪些部分是可點擊的。

組件布局

讓我們通過一些組件示例切換來測試所有約束的使用：

組件示例：列表項、按鈕和復選框

2. 基本尺寸

組件的基本尺寸，它的最小高度和寬度，應該基于最小點擊對象的尺寸。視覺上小于點擊對象的組件仍應由相同的最小點擊對象大小觸發。這意味著，如果用戶在復選框之外觸摸了一點，也會承認他們點擊了復選框。

組件相對于最小點擊對象的視覺尺寸：精確、高于和低于。

3. 內邊距

使用間隔表示組件內的邊距。

長字符串的水平邊距

你可以通過設置水平邊距來限制元素的水平位置，比如文本框。當文本太長時，你需要指出文本是否應該調整大小、換行和/或截斷。換行到兩行比截斷一行更好！

動態類型的水平和垂直邊距

垂直填充最常用于動態適配。盡管組件在當前手機尺寸、當前語言和當前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當類型增加時，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。

4. 基線對齊

使用居中和基線標記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現出來。這部分主要是方便給開發理解的。

垂直居中的列表項文本、底部對齊的價格和居中的復選框

界面布局

現在你已經布局好了一個頁面，使用與在組件中相同的方式使用間隔、點擊目標和對齊符號。

插圖來源于 Meg

……瞧!這就是移動端的響應式布局!

提示：為你在界面布局中引用的組件創建單獨的 symbol 畫板。在組件中，將所有組件規范包含在一個文件夾中，該文件夾可以輕松打開和關閉。沒有什么比同時標記組件和界面布局更好了。

總結

即使是一個精心制作的交接文件也不能取代你與開發之間良好的語言交流。這應該與開始、移交和書面文檔一起使用。你越讓開發了解你的設計，還原的結果就越接近實際發布的產品。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：彩云譯設計

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

很多同學面試時候都會被問到產品數據，用戶體驗等問題，這篇文章將講解產品數據中面試官最為在意那幾個指標，以及用戶體驗的考核方法。*本次話題我會分為上、中、下兩篇文章，此文關于產品數據哪些值得我們看，如果這篇文章能幫助到你，還請點贊、分享我會抓緊你分享下一篇怎么體驗度量的方法文章。

1 為什么大廠面試都會問數據

a 數據衡量你的項目是否真實

現在ui市場競爭激烈，選人也很苛刻，面試官判斷一個人是否可以入職大廠的第一個指標就是真實，而數據類的問題往往是劃分這個人做的項目是否真實的一個重要指標。

因為只有真實的項目才會有數據的提現，自由發揮的項目往往是答不上來有關數據的問題。

所以在大廠面試中都會或多或少的提問數據相關問題，這也是很多同學能進入大廠的一條重要分水嶺。

b 錄取后給你定什么職位

設計師群體偏感性，單單的看設計作品很難和其他競爭者拉開差距，所以需要理性的數據思維拉開與其他設計師的差距增添自己競爭力的附加值，另外一點通過產品數據的表述可以更有力的證明自己設計方案是最好的方案，方便后期給予定位高級、資深還是專家崗位。

2 數據在項目中的作用

設計師在做多個設計方案對比的時候會遇到這樣的提問，現有的設計方案是最適合用戶的嗎？究竟哪個版本是更好的？為什么是這個版比較好？有的人拿產品埋點數據來評判，有的人用用戶反饋來評判，也有的人則坦言需要靠老板的建議來進行評估。

a 數據是一個衡量好壞的一個指標

數據是衡量一個產品甚至一個功能最為科學的辦法，他在不同的開發場景中都起到很重要的作用。比如：

·在設計開始前，數據可用于發現問題、分析問題。從數據角度了解用戶訴求，發現產品存在的問題，為產品設計優化提供啟發和突破口。

·設計過程中，數據可用于幫助決策。通過歷史數據論證各個方案的優劣和有效性，再擇優。

·設計評審中，數據可提升設計方案說服力。通過理性數據分析，獲得團隊內部成員、產品/業務方對方案的認可。

·設計上線后，數據可用于量化用戶體驗價值。通過采集上線前后的數據變化，判斷設計目標的實現程度。

大家有沒有發現在我陳述的過程中，一直在說數據分析，那這個數據分析是怎么來的來呢？

其實數據分析就像是一個個監控產品數據波動的攝像頭，實時監控著數據的波動。以下是我整理關于數據埋點的理論知識，讓大家對數據埋點這個概念有個清楚認知。

b 數據對設計師的三個意義

很多人會認為數據是產品經理、運營的工作，其實不然數據對設計師也是設計師的工作，我把數據對設計師的意義歸納為三點：

1）為設計提案做依據

產品設計者可以由產品經理，UX，UI擔當，那需求不能自己憑空出現的，是由相關人員需找出來了，數據就好比一個放大鏡，它可以通過線上的數據波動來找尋目前存在的問題即需求。其實這就好比設計師的思維又產品思維轉換成數據驅動思維。比如

1、產品初期，沒有產品、沒有相關的后臺數據，那我們要做一個什么樣子的產品，就這一個需求。做什么樣子的產品可以通過了解大眾用戶、了解大眾市場的數據分析報告得出一個結論，明確我們要做什么樣子的產品，這就是數據對設計師的第一個價值做設計提案的依據。比如以下這些場景都需要數據做依據進行設計提案。

2）驗證方案是否解決用戶需求

判斷這個設計方案是否解決用戶需求：

2、在多個設計上線后，產品設計、運營方案與產品研發的三方對設計師輸出的方案存在分歧點。

也可以通過后臺的數據反饋來篩選出哪個方案最符合產品目標（即北極星指標），在多個設計方案中最好的設計解決方案。

3）晉升中衡量設計價值的指標

當然也有一些公司，做為后期晉升，評判設計價值的一種方法。

比如怎么證明自己的設計方案和其他同事相比，設計方案就好呢？通過數據對比，說明自己輸出的設計方案價值遠高于其他同事，以此證明自己的價值。

3 數據常用于哪里

其實在我們的工作中有很多設計方法可以輔助我們設計更好的設計方案，比如用戶調研，競品分析，產品測試等。這些方法都是通過對用戶數據的反饋和整理來判斷去發掘方案里面的問題、驗證最終方案是用戶是否滿意。

用戶調研：可以把字拆解開來看就兩個字面意思，調查：反映客觀事實。研究：分析客觀事實

主要的形式是用戶調研和用戶訪談，直接出過這篇文章，有興趣的朋友可以查閱。

傳送門地址：http://www.woshipm.com/pd/4745810.html

競品分析：確定幾款市場上競爭產品，然后通過對產品功能、產品定位，信息架構、顏色、布局、風格等元素的分析，找不同點，再通過數據對比確定產品方案的一種辦法。

（因為不同職位做競品分析的目的，角度和方法都不相同，這里我就不一一講解了，如果大家有需要后期我會考慮開一篇怎么做競品分析的文章）下圖是制作競品分析的常規流程。

產品測試：這種方法是用處最廣的一種方法，可用性測試是指讓一群具有代表性的用戶按照指令對產品進行典型操作，同時觀察員在一旁觀察、記錄。

比如我們發現首頁Banner的點擊率很低，這時候我們就要想辦法「通過設計」來提升Banner的點擊率，是Banner的大小問題？還是輪播圖切換的速度問題？還是圖片樣式的問題？

但是設計師沒辦法直接確定他到底是什么問題，所以就需要拿出不同方案給用戶測試，看看哪個方案更容易促進他點擊。

常用的測試辦法有很多這里我就講三個方法：一個是可用性測試、一個是灰度測試、一個是A/B test測試。

可用性測試：通常在產品開發之前使用，模擬真實的使用場景讓用戶體驗，目的是使用最小的成本來輸出正確的設計方案，避免全部做出來以后在進行調試修改。

灰度測試：是指產品開發通過后，將測試的版本發布到真實的線上環境中去，收集用戶的反饋。

A/B test 測試：是指產品測試通過并發布之后，同一個功能將使用人群分為兩個部分，一部分人使用a方案一部分使用b方案，對比數據波動。

數據的緯度有很多，首先咱們先來看看產品的數據都從哪里來的。通常情況下設計師可以直接找運營人員、產品經理、設計負責人在公司服務器日志里面調取產品埋點數據；或者項目結束后，項目負責人會發產品復盤郵件，數據考核郵件指標等信息，產品埋點數據也會在復盤郵件中體現。

除了以上兩點數據來源，還有CNZZ網站分析、百度統計、goodle anlytics可以查詢到相關數據。

1 數據可以分為「三個層面」

產品中的每一項數據其實都代表產品的一個緯度的數指都有其意義，如果想用比較簡單的方法記住這些有用的數據不妨試一試以下這個辦法：

我們可以把數據分為三個層面進行記憶，即用戶數據 （描述用戶人群的）；行為數據 （描述用戶使用方式的）；業務數據 （描述產品營收的）。

2 用戶數據的「四個維度」

用戶數據 （描述用戶人群的）主要意思就是描述使用產品的這個人群的。這里有四個比較有價值的概念需要大家了解分別是存量、新增用戶、用戶留存、渠道來源這四種。

a 訪問量

訪問量也有人稱其為活躍用戶數、用戶存量，其實都是一個意思。簡單理解就是指一個人來到網站，然后瀏覽了一些內容之后離開網站的過程（這個過程也會被稱為訪問），既在特定的統計周期內，再次訪問產品的用戶稱為訪問量。有三個專業名詞—DAU/WAU/MAU(日活/周活/月活)：每天有多少用戶來用產品，每周有多少用戶來用產品，每個月大概有多少用戶來用產品，這是判斷產品規模的最基本的指標。方便產品和設計人員了解產品的每日用戶情況，了解產品的用戶變化趨勢。

DAU（日活）：某個自然日內訪問產品的用戶，算該日一次日活（統計結果去重統計）；

WAU（周活）：某個自然周內成功訪問產品的用戶（統計結果去重統計），這個指標是為了查看用戶的類型結構，如輕度用戶、中度用戶、重度用戶等；

MAU（月活）：某個自然月內成功訪問產品的用戶（統計結果去重統計），這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。

*這里補充一個知識點-去重統計：統計結果是按照設備去重統計，如同一個設備多次訪問后臺只記一個活躍用戶。

b *新增用戶

新增用戶是一個企業很看中的數據，特別是在業務的起步階段，這個指標尤為重要；這個代表公司的潛力。比如拼多多這家公司一年比一年虧損多，但股價卻越來越高，主要原因就是資本市場看好拼多多用戶的增速，按照統計跨度不同分為日新增（DNU）、周新增（WNU）、月新增（MNU）。

*在新增用戶里面還有一個“用戶流失率”的概念需要大家了解。流失率指那些曾經使用過產品或服務，由于各種原因不再使用產品或服務的用戶，用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。

產品階段不同，重心也會從拉新轉移到留存，對于一個成熟的產品和飽和的市場而言，獲取一個新用戶的成本可能是留住一個老用戶的數倍，流失率的降低也意味著營收的增加，在這種條件下，流失率的價值是顯而易見的。

提到新增用戶就一定要說《增長黑客》，這本書里邊提到一句話非常精煉的概括了“增長”的概念：以數據驅動營銷，以迭代驗證策略。通過這句話應該就可以感知整本書的中心思想就是“數據”和“實驗”，即AARRR（海盜模型）模型。通過闡述了一個用戶生命周期的各個階段——獲客、激活、留存、變現、推薦和召回，實現用戶增長的產品目標。

*a-ha moment：a-ha moment也叫Aha時刻中文翻譯過來就是尖叫時刻，是增長的一個概念詞匯，是指用戶通過某個特定行為（產品內的功能體驗）得到了很爽的體驗，用戶可以快速且準確的認識到產品的價值。例如很多知識付費類產品，都會讓新用戶完整的體驗視頻看課的流程并且感知到課程的價值，很可能變成產品的新增用戶。

c *用戶留存

上線的產品怎么反映用戶的狀況是不是健康呢？最好的指標就是留存率。即在某一統計時段內的新增用戶數中再經過一段時間后仍使用產品的的用戶比例（留存率=留存用戶/新增用戶*100%）。留存率又分為次日留存率，次周留存率，次月留存率等。

以上三個指標的數據越好能反映用戶愿意留下來，才能說明他們對產品的服務滿意，滿意才能養成慣性，持續消費，例如產品改版后，次月留存率提升了，且其他變量沒有變化時，說明用戶粘性是上升的設計改版成功。所以這三個指標是產品體驗最直觀的數據。

1）次日留存率，常用來衡量用戶粘性。

通過日留存率的數值來判斷一個 App 的質量，通常這個數字如果達到了 40% 就表示產品非常優秀了，比如可以結合產品的新用戶注冊的轉化路徑來分析用戶的流失原因，通過不斷的修改和調整來降低用戶流失，提升次日留存率。

2）次周留存率（7日留存率），用于判斷產生的忠實用戶數。

通過周留存率來判斷一個用戶的忠誠度，比如在一周的時間段里，用戶通常會經歷一個完整的使用和體驗周期，如果在第七日用戶還在使用產品，就可以定義該用戶為忠誠度較高的用戶了。

3）次月留存（30日留存率），用于衡量版本迭代的效果。

通常 App 的迭代周期為 2 - 4 周一個版本，一個版本的更新，或多或少的影響用戶的體驗總成用戶流失，所以通過比較月留存率能夠判斷出每個版本更新是否對用戶有影響，衡量版本迭代的效果。

d 流量獲?。ㄇ纴碓矗?

根據字面意思來講就是描述用戶路徑，來指的是這些人變成用戶之前，都來自哪里；知道用戶從哪里來才能知道在哪個渠道做推廣會更有效，一般和用戶留存的數據搭配使用。

3 「行為數據」的五個緯度

關于行為數據是數據中的一個重點知識，此次主要講解次數/頻率、點擊率、轉化率、用戶停留時長、跳出率、退出率這個五個緯度。

a 頁面訪問次數（pv）和人數（uv）

這兩個指標能夠了解用戶的使用行為，衡量頁面入口的設計和與其他入口的設計相比是吸引用戶的注意力的核心指標。

·頁面訪問次數（PV ；PageViews的縮寫）用于判斷該活動/頁面/功能被用戶查看的次數，即頁面瀏覽量；

·頁面訪問人數（UV；Unique Visitor的縮寫）用于判斷有多少個用戶查看過該活動/頁面/功能，即訪問深度，也就是指用戶的訪問深度（總產品流程的體驗完成度）。

b 點擊率(CTR)

點擊率（人均點擊次數）是指網站頁面上某一內容被點擊的次數與被顯示次數之比，即點擊次數占展示次數的百分比。通過人均點擊次數可以判斷交互/視覺的設計要求是否足夠引人注目，也可以用于衡量該功能對用戶而言是否為強需求。通過下面這個案例讓大家了解一下用法，比如7月7日10萬人點擊了“確定”按鈕，其中一共點擊了12萬次，那么點擊率（人均點擊次數）為12/10=1.2次。

*點擊率中也常常會結合pv和uv的數據使用，即PV點擊率=點擊次數/頁面訪問次數（PV）；UV點擊率=點擊人數/頁面訪問人數（UV）

c *轉化率

轉化率即達到產品某個目標的訪問量除以總的訪問量，或達成目標的訪客數占總訪客的比例，即轉化率=轉化次數/訪問次數。簡單理解轉化率是把用戶分為“只逛不買”的用戶，還有“逛了 就買”的用戶，還有“逛了買買買”的用戶。

為什么說轉化率很重要，因為轉化率常常是項目中企業最為看重的一個數據，畢竟轉化率高了公司收益也就提高了，而且轉化率的提升也常常是解釋設計方案最好的支點，比如：在國外的養老計算器中，用戶需要輸入相關的字段后查看計算結果詳情，最后得出計算結果，在這個流程中用戶的轉化率很低（在結果詳情中會有金融產品）。但是如果把結果前置，比如新方案把輸入字段，結果詳情和計算結構都放在一個頁面展示，就會提高用戶的購買決策，大大提高轉化率。

這里有一個思維方法即漏斗分析法，大家需要了解：

漏斗分析最常用的是轉化率和流失率兩個互補性指標。用一個簡單的例子來說明，假如有100人訪問某電商網站，有30人點擊注冊，有10人注冊成功。這個過程共有三步，第一步到第二步的轉化率為30 %，流失率為70%，第二步到第三步轉化率為33%，流失率67%；整個過程的轉化率為10%，流失率為90%。 該模型就是經典的漏斗分析模型。

d 用戶停留時長

這個指用戶在產品中的停留的時長，即所有用戶session的時長總和/session數量。也有產品通過用戶停留時長去衡量頁面吸引度、判斷用戶粘性和依賴度，舉個例子，抖音的頁面內容吸引度就很強用戶粘性就很高，用戶的停留時間也很長?；叵胍幌?，是不是每次刷抖音，很快一個小時就過去了。這里的商業邏輯是，用戶停留的時間越長，在產品中用戶付費的可能性就會越大。

總結一句話：停留時間越長，用戶粘性越強。當然也有反面場景，比如登錄注冊的表單填寫，停留時間越長，說明體驗越差。

e 跳出率（BR）

跳出率指該用戶來到網站后，沒有進行操作就直接離開的比例，即訪問了一個頁面就離開的訪問量與所產生總訪問量的百分比，跳出率等于訪問一個頁面后離開網站的次數/總訪問量*100%。

這里有一個容易混淆的概念即跳出率和退出率。其實這兩個數據都是用于衡量頁面的內容質量或交互質量的一個指標。比如當用戶進入 app后，只訪問了一個頁面就離開了，跳出率和退出率越低說明流量質量越好，用戶對產品的內容越感興趣。

4「業務數據」的四個緯度

接下來我們來看看三層數據中的最后一層概念——業務員數據，即和財務相關的數據知識。

a 總量

GMV (Gross Merchandise Volume)，這個詞太常見了；大公司在發布財報、銷售額、成交量的時候，這個數每次必提。*值得注意的是GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額，包含付款和未付款兩部分。

b 人均

ARPU（Average Revenue Per User，每用戶平均收入），光總數高還不行，我們還要關心平均每個用戶的貢獻是否夠多，是否在增長，所以就要關注人均的指標。它是 App 成功的指標，是用戶忠誠度的反應，是預測用戶增長的工具。

c 付費率

整個產品業務也要有一個健康度的指標來衡量，付費率就是這個衡量指標。到底有多少比例用戶是付費用戶，這就是付費率。我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高，這說明用戶對該產品的認可度越高。

1 數據也許會騙人

數據并不會騙人，而是人看的數據不同，造成結論不同。在使用數據之前我們要認清楚以下三點偷換概念、只看單一緯度、數據不是萬能的。

a 偷換概念

今年7月美國總統特朗普舉了一個案例，我記憶猶新。在一個電視采訪節目中他說“美國的死亡率低于歐洲的水平”他的算法是所有新冠死亡人數除以所有確診人數得出右側數據。

其實他就是偷換了一個概念，在醫學上有兩個指標去衡量死亡率，一個是病死率一個是死亡率。

當然兩者在算法上是不同的，如果看病死率的話，美國的確低于中國，但是如果按照死亡率的結果看的話，美國是遠高于其他國家，中國是美國相比一百五分之一，這結果是恰恰相反的。

這里就是一個偷換概念的例子，雖然病死率和死亡率都能反應生病的人數，但是病死率考慮的是救治能力。死亡率不僅考驗救治能力，還考驗著控制傳播的救治能力。

b 只看單一緯度數據是表象的

如果單從一方面看數據是沒有意義的，沒有其他數據參照，挖掘不出數據的真正價值。

比如：我們在討論一個產品是否成功時候，往往會看一個最突出的緯度數據，比如這個產品有2億的日活，這個平臺有5000萬的產量。

也顯然這種只盯著用戶數量和產品規模的產品的做法是不對的，他并不能真實的反應一個產品是否成功，假如一個產品的日活是2億但是愿意付費的用戶不到1w，這個平臺雖然有5000w的產量，但是用戶的平均停留時長很短，很顯然這并不是一個很高興的事情，因為可以從側面保暴露出產品的質量可能存在問題，導致用戶付費意愿不高，停留時間較短。

c 數據有局限性

我們要搞清楚這樣一個認知，數據雖然可以最為直觀的反應產品的健康程度，但是數據絕對不是萬能的，他只是衡量產品的用戶體驗的工具，就好比我之前寫的問的用戶調研的文章只是一種工具也存在其局限性，數據只能告訴waht，但是不能告訴why，而這個why是設計師做方案選擇的關鍵所在。

2 數據應該怎么用

數據本身并不會欺騙人，他就真實存反應產品的表現，只是很多人用錯了使方法或者認知出現了偏差，如果想把產品數據的價值利用率達到最大化，建議每次做數據分析時候從以下三點使用數據：

a尋找關鍵數據目標

為了避免偷換概念的情況出現，除了我們要理解數據概念之外，更重要的是尋找出關鍵的數據目標。

以上講了這么多數據名稱，但是大家需要注意的是并不是每個產品都要看這些數據的，不同的產品需要看的數據側重點不同，就比如qq音樂看的是日活躍用戶、淘寶看的是銷售額、王者榮耀看的用戶平均付費額度（appu），新浪新聞客戶端看的是網站訪問數量（uv）。

1）用戶生成內容(UGC)類數據指標

UGC（User Generated Content）指用戶原創內容，從進入web2.0時代后UGC第一次被論壇/社區應用，到今天，互聯網產品或多或少都帶有一點UGC屬性。這些產品主要有抖音、知乎、人人都是產品經理、站酷等。

評價這類產品往往會從發表文章、用戶點贊、訂閱、評論、分享、打賞等幾個數據指標進行評判產品是否健康。

2）電商類要看gmv

GMV（全稱Gross Merchandise Volume），即商品交易總額 [1] ，是成交總額（一定時間段內）的意思。這個實際指的是拍下訂單金額、包含付款和未付款的部分。

休息一下

聽了腦袋大了同學不用擔心，我特別繪制了下面這個表格，保存截圖慢慢看就好了。

b 找好參照物A&B test 測試方法

多數產品在進行數據分析的時候，最常用的方法就是A&B test 測試法。（上面講到了A&B test 測試發）

1）案例一

很多時候我們看數據不能看一個緯度，要看兩個或者多個緯度，才能篩選中自己需要的結果方案。

比如這個案例在探究“與用戶強相關的 BI 品類樓層，商品展示普通利益點和帶券利益點，哪個更優？a方案展示普通的利益點，如“銷量過萬、好評率99%、滿199減100”。b方案只展示帶券利益點的文案，如“滿199減100，領券”。

最后看的數據是A方案的點擊率高，b方案的曝光點擊率更高（由于方案 B 中可領券和點擊跳轉商詳，可能有部分點擊為領券導致，故方案 B 點擊更高但點擊轉化偏低）。

如果單獨看點擊率或者轉化率很難做出選擇，但是只要兩個數據綜合看，就很容易得出B方案（帶券利益點）能帶來更高的曝光點擊，引入訂單表現更優的結論。

2）案例二

在做A&B test 測試時，是需要保持單一變量測試，現實生活中，很難做到單一變量測試，所以數據很多時候都需要進行分析探討，才會有價值。

比如我們在首頁流量分發場景中做了A,B兩個視覺設計方案，a方式是所有的品類展示使用魔方圓形坑位，b方式是方形坑位。想探究方圓形坑位和方形坑位，哪個更能吸引用戶點擊？

最終A方案（圓形）用戶點擊數據為4.87%，B方案（方形）的用戶點擊數據為15.85%，那么，從這個A&B test 測試法的結果中就可以推導出B方案（方形）更好嗎？

事實可能并不是，大家仔細觀察不難發現，兩個方案除了品類的背景造型不同之外，品類的種類也不同，文案的描述也不同，沒有做到保持單一變量的測試環境，所以B方案（方形）更能吸用用戶的點擊這個結論是不成立。可能成立的是方形的展示面積比圓形的展示面積要大，可以更好的曝光產品的特點，而且促進B方案（方形）更吸引用戶進行點擊。

c 采用多次定性+定量驗證

我們得到了數據其實可以采用多次定性+定量驗證這種方式來驗證我們方案是否解決了用戶需求，是否完成項目目標。

定性可以采用用戶訪談、眼動測試、可用性測試等方式去發現問題（需求）的多樣性和嚴重程度。定量的方式有用戶問卷、站內行為分析、A&B test 測試等方式，驗證這個問題的發生概率。

比如我們可以通過五次定性質、三次定量的方式，通過數據反饋把結果更加靠近真實。

3 了解雙面數據（虛榮數據）

什么是雙面數據呢，其實也就是那些看上去很好，卻不能給這個產品帶來絲毫價值的數據，需要對比著看才能了解數據的價值。

a 點擊率（CTR）

比如一個用戶在有些資源位連續點擊或者因為一些利益性的活動補貼引發的點擊量變化這類場景在用戶人數總量不變的情況下，單獨位置的點擊量增加，必然會導致其他部分的點擊量降低，其實是0和博弈，增加這個功能的點擊量是片面的。

b 訪客數（UV)

計算訪客數只是一場毫無意義的人氣比賽，其實訪客數可以分為三個類型即曝光UV、點擊UV、意向UV，單純地看這三個uv是沒有意義的，除非能讓用戶做對產品有利的事。比如，在推出活動時，有多少用戶能轉化購買？只有知道了這個數字，這個用數據數才是有價值的。

·曝光UV即曝光在視野內的訪客數，例如我們在淘寶搜索某個產品進入了搜索的feed列表頁，當我在這個列表場景停留2-3秒的時候，我沒有購買任何產品的情況下，數據就會判定我為一次曝光UV。

·點擊UV即有點擊行為的訪客數，還是以淘寶做為例子，現在我在feed流列表頁面里搜索產品，其中有一件是我比較中意的產品，我點擊了產品進入到這個產品的詳情頁，在我沒有購買任何產品的情況下，我發生了點擊行為，數據就會算我是一個點擊uv。

·意向UV即進入意向頁面的用戶數，其實這個和點擊uv有點像，比如我在淘寶搜索完我想買的產品a,有去京東搜索了一下，那京東就會判定我為一個想要購買產品a的意向uv，這個意向uv只可以判斷出我們對a產品是否感興趣，并不能判斷出我真正想要購買。

c 停留時間

用停留時間數據來統計用戶參與度或活躍度，他并不能說明什么問題。比如，客戶在某個全是文字內容頁面上停留了很長時間，有可能是看不清楚或者是文字理解難度影響了用戶的閱讀時間，所以說產品效率、體驗這兩個關鍵指標本身就和停留時間相矛盾。

d 下載量

盡管有時會影響你在應用商店中的排名，但下載量本身并不帶來價值；還需要參照的是：用戶下載后的激活量、賬號創建量以及用戶在產品中的各個場景的跟蹤。

e 退出率（ER)

很多人會有一個誤區，認為退出率高是不好的一項數據，但是大家要明白并不是所有的場景跳出率越低越好，舉個例子：我們通過漏斗數據發現用戶操作路徑太長，把好幾個步驟的路徑縮減到一步操作，最后看到用戶退出率就減少了。

最后大家要清楚

數據是用于支撐設計師的某項設計決策和方法，但數據無法代替設計的直覺，更無法代替深入的用戶研究、我們要學會利用數據指標，找出問題所在，通過設計方案改變用戶行為，因為數據最終目標在于價值的體現：有效獲取用戶，創造營收。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

“民無信則不立，業無信則不興。”——可見，信任力對于一個國家或是企業來講是非常重要的基礎。

據權威機構數據顯示，2021 年第七次全國人口普查后，在我國 14.1 億人口當中，租房人群已經超過 2 億，租房已經成為一二線城市年輕人生活的新常態。整個租房市場在疫情過后也逐漸回暖，各大租賃平臺競爭日趨激烈，爭相拿出各種補貼政策吸引租戶，前有自如針對畢業大學生按月付、0 押金的“海燕計劃”，后有泊寓推出的 98 折入住、免費換房的“港灣活動”。在互聯網技術日趨成熟、人口紅利逐漸消失的當下而言，平臺的服務能力趨于同質化，需要比拼的是誰有更深的內功基底：那就是打造出差異化的競爭核心。差異化的競爭核心對于房產、金融行業來講，就是企業（平臺）的信任體系建設，從滿足用戶基礎的功能訴求——建立起用戶與平臺信任的關系——最后讓用戶對平臺（產品）產生信仰與依賴，和Apple、Airbnb這樣的公司一樣，最終實現品牌的溢價價值，這也是馬斯洛需求層次理論——滿足用戶從基礎的生理需求到自我價值的實現。

圖 1 馬斯洛人的需求層級與產品價值層級映射

此外，我們在 19 年貝殼租賃滿意度報告中發現，用戶在對租房信息渠道的選擇上更關注真房源和平臺的可信度等方面。因此，我們希望打造一個簡單、安全、可信賴的線上租賃環境，幫更多用戶解決租房問題，建立起租客、房東與平臺的信任鏈接，從而構建起整個平臺的信任價值體系。

圖 2 用戶原聲

產品中傳遞給用戶的信任是什么

我們先看一下信任的定義是什么？

在社會科學或心理學中來講，信任被認為是一種依賴關系，是一種穩定的信念，指的是個體對周圍的人、事、物感到安全、可靠、值得信賴的情感體驗，在個體感到某人、某事或某物具有一貫性、可預期性和可靠性時產生，值得信任的個人或團體意味著他們尋求實踐政策，道德守則，法律和其先前的承諾?！鲎浴栋俣劝倏啤?

對于產品給用戶的信任感來講，可以拿戀愛的過程舉例更為形象：

初識——信任——戀愛——信賴——結婚

圖 3 戀愛的過程：信任感的建立

用戶最初接觸產品時，雖然有清晰的目的訴求（找個靠譜的伴侶共度一生），但是因為認知不夠，并不能了解產品能幫自己解決怎樣的問題，帶來怎樣的價值，這個時候需要產品通過各種方式來建立與用戶的情感鏈接，也就是建立信任感（戀愛）的過程，只有解決了用戶核心的訴求并不斷給用戶提供預期外的驚喜，用戶才會慢慢認識到產品的價值，變的越來越離不開了，這個時候就自然而然的進行下一個環節轉化(結婚）了。

所以說從產品層面去塑造信任感就是：理性（解決用戶最基本的核心功能訴求）+感性（提供用戶超預期的服務）這樣的過程，需要注意的重點還是解決用戶核心訴求為準，讓產品變得能用并好用，否則一切都是空談。

刨析問題&信任歸因

通過前期的電話訪談和問卷調研，我們發現貝殼租賃用戶對平臺信任感較弱，存在懷疑平臺房源真實性、經紀人服務質量、平臺隱私安全保障等問題，于是我們首先定義了用戶對與社會、對行業、對平臺的信任度初始閾值，用研同學依此為基準進行問卷投放，利用結構方程模型對結果進行驗真及提煉，最終總結出包括平臺背書（例如強化貝殼真房源保障）、隱私保護（用戶個人信息不會被泄露）等 12 個方面的信任關鍵因子。

我們由此梳理出了 10 多個觸點作為搭建租賃業務信任體系的主脈絡，希望通過穩固認知、建立保障、提升質量、構建共情能力等方面入手進行系統改造。

圖 4 信任初始閾值及關鍵因子沉淀

如何搭建產品的信任感

通過前期對關鍵因子的梳理，我們總結出了匹配業務訴求、建設心理預期、強化品牌背書、建立服務保障、營造情感氛圍、精琢設計細節等 6 要素作為產品設計中搭建信任體系的指導準則，下面我會以租賃首頁、心愿單改版等案例逐一拆分來講。

圖 5 分層拆解信任 6 要素

1. 匹配業務訴求

我們通過數據發現，有近 30%的用戶是通過首頁搜索來找房的，但是根據滿意度報告結果來看，好多用戶提出了搜索維度少、關鍵信息不明顯等問題，同時在搜索過程中，我們也看到了用戶對地圖找房、區域搜索功能有更高的期待。

圖 6 用戶基礎訴求

同時我們對舊版本的心愿單進行了數據分析和調研發現，有主動表達找房訴求且成交的用戶僅占總成交人數的 6%左右，心愿單并沒有很好的匹配用戶的找房訴求，原因在哪？我們梳理了 3 個問題所在：1 是舊版本的心愿單簡單的把用戶之前帶看、咨詢、關注過的房源一股腦塞在了一起，變成了房源列表的收藏夾，弱化了心愿 2 個字，對用戶幫助作用不大，而用戶對于找好房、找對房的主動表達訴求并沒有得到滿足；2 是聯系經紀人的商機入口隨處可見，用戶在操作時容易誤觸與經紀人的對話窗口，引起心理反感；3 是用戶添加了自己感興趣的房源到心愿單后，產品沒有提供用戶后續的服務支持，導致用戶慢慢流失掉；

結合上述問題，我們重新定義了首頁和心愿單的業務核心，也就是提供給用戶找房過程中主動表達自己訴求的窗口。在新版首頁搜索中，我們新增了預算入口，并強化了搜索時的區域、地鐵等關鍵信息幫助用戶更好的進行決策；

同時在心愿單中，我們讓用戶可以快速的創建自己的專屬找房卡，根據用戶日常瀏覽、關注等行為向用戶推薦相似房源，滿足其不同維度的找房訴求，另外我們弱化了商機展位，避免不必要的打擾，讓用戶在安靜的場景中持續感受到心愿單帶來的服務幫助。

圖 7 新舊搜索功能對比

圖 8 新舊心愿單功能對比

2. 建設心理預期

大多數人都會遇到這種情況，當決定做一件事時就會產生很高的心理預期，且隨著時間越長，預期會加倍的增長，當結果出現后，一旦和自己的想象出入很大時，就會產生很大的挫敗感，甚至會選擇直接放棄；

由此可見，在做產品設計時，幫用戶建設好心理預期是很重要的；在新版心愿單設計中，就很好的利用了這一點，當用戶在首次進入時，通過宣傳導語能一目了然的感受到我們的服務宗旨， 我們強調一起幫用戶規劃心愿而不是簡單、機械的創建一個表單，整個產品的背后有大數據和平臺的服務支撐，它不僅僅承載的是用戶的找房功能，還能幫助用戶具體描摹出對租房偏好、體驗的直觀感受，讓用戶對心愿單的認知更加清晰明了；另外在用戶點擊關注房源后，我們也會通過提示的方式提前告知其下一步動作，避免用戶搞不清從哪里能看到自己選擇的房子。

圖 9 強調服務主旨，建設用戶心理預期

3. 強化品牌背書&建立服務保障

針對之前滿意度報告我們發現，多數用戶在租房、買房等進行大宗消費時往往都缺乏安全感，因為擔心遇到假房源或者是租金過高的情況，所以在設計產品細節時，我們格外重視品牌和服務保障的宣導，例如在心愿單詳情頁里我們把客觀的瀏覽數據和價格浮動變化進行外露展示，目的就是增加用戶對產品的真實認知，進而獲得安全感；在具體的房源詳情頁里，我們也在宣導貝殼平臺真房源、貴必賠的服務保障，打通產品與用戶之間的信任隔閡。

針對其他品牌長租公寓頻頻爆雷的情況，貝殼第一時間上線了公寓租房安心保障計劃，我們將權益細則根據用戶線上看房、下訂、簽約、支付等流程拆分為遇假房必賠付、未留房必賠付、有違約必賠付、有損失必賠付 4 大權益點進行強化宣導，并將常見案例以問答形式濃縮成風險提示進行外展，加強用戶的安全防范意識。

圖 10 透傳保障權益，強化用戶安全感知

4. 營造情感氛圍

人類的行動和感知經常會受到情感所支配。因此調動用戶積極情緒，打造情感上的認同和共鳴，是產品建立信任體系的重要環節。心愿單所描繪的宗旨就是用心服務幫你找到理想的家，通過描繪家的理念，我們希望帶給用戶也是溫暖、貼心的感受，所以我們從設計層面上對整體的文案進行了精細打磨，讓統一的情感化語言貫穿全流程，例如在找房卡上，我們沒有采用常規的疑問句形式，而是選用設問句的形式來調動用戶情緒，營造溫情氛圍，例如“你的租房預算是多少？預算多少都是自己溫暖的港灣；”“你想在哪里租房？風景優美、交通便利你都可擁有”通過這些精心設計的文案，我們希望給予用戶“我即將要做的事情是與往常不同的，是有意義的”心理暗示，也有心愿單“許愿”過程的儀式感。

5. 精琢設計細節

當人們下班后回到家中后，有些人會選擇從冰箱里隨便翻出點食物湊合著做為晚餐；而有些人則會從超市精心采購食材并根據菜譜烹飪，菜肴出鍋后，還會仔細擺盤，并拍個美照上傳朋友圈；快餐雖然解餓，卻難以滿足用戶更深層次的情感體驗；產品設計也是如此，因為更專業，所以更信賴，專業的產品能帶給用戶更多的信任感和安全感，而精致的 UI 界面就是產品嚴謹、專業度的直接表達。我們可以看到舊版的租賃首頁、心愿單在視覺情感化表達較弱，難以讓用戶產生好感和信任的鏈接，在新版設計的過程中，我們圍繞著“理想的家”的主題進行了精致的場景插畫繪制，并利用文字排版合理拉大了空間，讓原本擁擠的信息內容呼吸感更強；整體色彩延用了租賃頻道的主色調-暖黃色，也是跟主題“家的溫暖”保持契合，帶給用戶一致的視覺感受。

圖 11 精致的視覺表達滿足用戶更深層次的情感體驗

小結

圖 12 信任心智模型

信任心智是可以通過改變關鍵因子進行優化和重塑的，同時人的信任度也是分層級的，分別由自我信任-關系的信任-組織的信任-市場的信任-社會的信任組成，所以產品的信任感營造需要從多方面維度去打造的。我們先要通過數據分析、定性訪談等手段，定義出用戶對于社會、行業、平臺本身的信任邊界在哪，“例如用戶對貝殼平臺提供的服務保障了解多少，真房源的感知程度又是多少”，并基于此梳理出服務專業、信息透明、內容全面、服務專業等關鍵因素作為搭建信任體系的主脈絡。最終的實現主要分為三個層面：本能層上通過精致的插畫設計、人情味的文案話術、明晰的交互引導來凸顯服務場景的儀式感和品質感；行為層上打造公正的信譽評價、完善的客服系統、安全的支付體系、完整的房客信息滿足用戶的訴求；反思層上宣導（真房源、貴必賠）的平臺服務承諾夯實用戶的信任基礎；達成由基礎訴求滿足（用戶能用）——能提供用戶超預期的服務（用戶易用）——再到與用戶彼此建立起良好的信任體系（用戶愛用）——最終打造一個有品牌信仰的服務平臺。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：貝殼KEDC

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

前言：

入行做車載 HMI 已有 2 年余久，也該沉淀輸出一些行業內容，HMI 行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高、這篇文章先帶你入行，文章還是以一些 HMI 基礎知識作為講解，在設計規范方面的內容，我會添加很多干貨結合實際案例講解。

先給大家打一個預防針（規范是用來打破的，本篇文章只做為參考價值）

1. 設計規范包含什么內容

設計規范包含視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…

2. 視覺規范：

車載端設計和移動端、web 端設計顯示差別還是蠻大的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標等角度講解，PS：偶爾還會穿插一些工作心得的內容。

文字規范：

文字是 UI 界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用得好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高.

1. 字體選擇

（我要做一個良心的博主，讓你們避免侵權問題，別再傻乎乎的犯字體侵權的錯誤了）

在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。如果在乙方公司呢，客戶會指定給到你字體包，插播一段小插曲（職場心得：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：

• 公司已明確字體（請專業字體設計師設計一套）
• 用常規設計的字體，建議使用中文字體：思源黑體、英文/數字：Roboto。如果有做海外項目的，對于 Roboto 未涵蓋的語言，建議使用 Noto Sans 字體。Noto Sans 源自類似于 Roboto 的度量標準，旨在實現視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？它不是免費字體嘛？

普及一下：首先該車機系統屬于商業用途，未得到許可使用，這就是侵權，在 app store 上 發布的 app 是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。

2. 字號大小與字階

車機端的字號大小的制定也是要循規蹈矩

字號肯定要遠大于移動端和 web 端，為了確保文字信息的掃描性，結合了：基于 IDX & 同濟 (2020) 百度 Apollo 中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌 Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）

可參考谷歌：字體大小的遵循 4px 倍數大小增量

我們在做項目的時候，規定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感

用字的注意事項：

字體大小控制在 20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為 24px

設定文字規范有兩個好處：

• 文字樣式復用，不管對于設計師還是開發同學來說，都是極大提高工作效率的一件事情
• 對于界面設計來說，有規可循，避免設計時降低整體的視覺感

3. 字體用色規則

• 文字與背景顏色對比度要遵循 WCAG 的標準，需要考慮到無障礙設計需求，因此保持在 4.5:1 – 7:1 對比度，確保文字清晰易讀
• 將注意力集中到最重要的區域內容
• 文本元素之間傳達視覺層次感

4. 字體字重

字重是指一種字體的粗細樣式，下面展示字重的種類：

上實際案列講解：

謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。所以在制定字體規范的時候就盡量將 Bold 字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇 Medium 字重（根據實際項目需求來定，我的規范只做參考價值）

5. 字體行高

為什么要加這一 pa，因為這個問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜。不行我后期錄一期視頻講解，下文也有詳細的講解。

字體文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高？NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態的字號為 16px（在@1x 設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常 Line：22px 微信實際 Line：20px），當行高為 20px 的時候，需要將文本上移 3px 才能使得圖片和文本視覺在一條線上面，如果按照這個進行開發的話，開發小哥需要在 CSS 屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。

最后的結論：按照文本的行高來對接開發

普及一下小知識點：車載段落的行高一般為字號的 140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）

下面是一些專業性的知識 了解一下：

在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。

我們在做設計的時候，將字號設置為 30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了 42px（Font:pingfang） 穿插一個小干貨：在不同字體下相同字號，行高（Line height1）是不同的，Ant Design 的 30 號字，行高為 38px （詳見配圖計算方式）

顏色規范：

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間，天氣，窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，設計時在計算機上看到的顏色并不總是相同。考慮顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用以查看顏色的顯示方式。如有必要，請進行調整以便在大多數案例中提供最佳的觀看體驗。

最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力。”這句話總結得真的非常到位。集中注意力認真聽，重點來了，UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適地過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。

一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。

品牌色：又稱為 “強調色“ ，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab 的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等 （拿我練習稿講解）

語義色：語義色需要在 UI 界面中承載著具有準確的信息傳達，在復雜場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：說到鏈接色，大家第一時間肯定想到的是藍色。

中性色：主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中 （注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。

3. 如何制作 HMI 色彩規范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或對比度）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay 都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容），最終在實際各種照明條件下，對應用配色方案進行測試。

車載 UI 系統中使用足夠色彩對比度，上述在使用場景中有所提到。

繼續講干貨

(在后續文章安排里我會單獨拿出 WCAG 從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說)

WCAG 全稱是 Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人。一共分為三個級別 A（最低）、AA、AAA（最高）

講個概念：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度為 21:1

做顏色對比的網站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette

要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度

總結：

對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。上述內容對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到 AAA 標準。

布局規范：

HMI 的設計和其余終端設計，最大的差異就在于布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。開始制作車載 UI 系統，需要和汽車廠商確認車載 UI 可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。

1. 屏幕尺寸有多少種類別？

我們先要了解一下熱門和主流車機分辨率。眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920

蔚來

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比較特殊，它擁有 4 塊屏幕，儀表盤 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副駕駛娛樂屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鵬

G3 豎屏幕 15.6 1920×1080 P7 控屏，在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過 2K（普及一下 2K 分辨率標準為 2048×1080 像素）

接下來給大家觀看蘋果的 CarPlay 系統分辨率和谷歌車載系統

CarPlay 系統分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已經找出規律了：在設計橫屏的時候高度基本都為 720px，其余橫屏幕按照比列縮小。

這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的 CarPlay、谷歌 Android Auto、國內的百度 carLife+等都有自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。我們項目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我們有自己的想法，后面在自適應布局中會提到。

2. 間距的規范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局 8 像素點網格上構建，這意味著規范中的 UI 組件和元素之間相隔 8px 的倍數

谷歌 Android Auto 間距規范一共制定了常用的九種數值，P0 – P8

注意事項：提供 4px、12px 間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于 96px，因此在對于這些數值制定規范的要求就是 8px 的倍數即可使用。

說到這邊肯定會有人有疑問，我們在做規范時能不能將間距不設定成 8 的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都 OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則。

3. 車載模塊中布局

這部分對于想接觸車載設計同學非常友好。講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照 1920×720 分辨率每個模塊我都會稍微帶一下。

4. 自適應布局

講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常?。?！超級重要，工作后期經常會遇到這個問題，甲方爸爸后續有增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多（但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架）

下面拿實際做過的案列來陳述：拋出一個問題，我們如何將分辨率1920×720頁面的內容轉變成1280×720 呢？

（有同學說，直接丟開發然后他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。

（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大的時候是行不通的，但同比例或者很相近是完全 OK 的，正巧我們項目上有 800×480 分辨率，和 1280×720 極其相似。

（還有人表示不服：折疊某塊區域內容，將該區域內容做成 icon 點擊后彈出來）該方法可以使用在部分內容。

有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成 1280×720 尺寸。

如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。

我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。

不好意思，一下子說多了沒收住 ，進入正題。謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比例變成了相反數值。（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）

上述的內容都是我們一步一個坑踩過來的，“且看且珍惜”。

圓角的規范

1. 如何制定圓角的大小規則

更圓的角和全圓角的使用

對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會和其他按鈕做出反差，鼓勵用戶去點擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）

較低的圓角和直角的使用

對于不需要 or 低強調的元素，使用較低角半徑 or 0px 圓角=直角，例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到 0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。

還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角 or 無圓角，兩張圖對比下來，帶有圓角的專輯封面有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有，不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好

谷歌對于圓角的定義

在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應用布局是在 8dp 網格上構建的，但仍會提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應謹慎使用，因為它不是 8dp 的倍數

總結：圓角還是直角沒有對錯之分，合適的才是最好的。

圖標規范：

1. 圖標的種類（車載圖標分為應用程序圖標、系統性圖標）

應用程序圖標

現在 HMI 的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。

我自己也負責過有應用程序圖標的項目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同 800×480 分辨率中首頁中的應用程序圖標為 80px，這是如何計算的呢？

項目中還有一款車型的屏幕分辨率為 1280×720，由于屏幕變窄，應用程序圖標需要縮小到 120px，高度 720 and 480 有一個共同 240 的倍數，所以最終小屏幕的應用程序圖標為 80px，圓角大小也隨之而變：R：24/18/12。其余分辨率按照實際情況使用。

系統性圖標（后續 HMI 組件庫搭建文章中我會詳細的講解）

該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。

2. 圖標的尺寸

大廠是如何制定圖標尺寸

很多博主在講到圖標尺寸的時候都是一筆帶過，拿著別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看：https://zhuanlan.zhihu.com/p/158099749

根據百度 IDX 駕駛體驗中心，在對于《車載 HMI 界面效果客觀指標實驗報告》在基于視距為 50cm，計算出最小圖標為 9mm 推薦使用 12mm。視覺上的 1cm 的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換，（實際項目工作經驗告訴我，因為相同的屏幕大小但是分辨率不一樣，所以得出的結果不能共用）

PPI 的計算

我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是 8 寸屏幕，但分辨率一個為 1280×720，另外一個則為 800×480，每一個格子為一個像素。

最小圖標尺寸計算

接下來找一下分辨率 1280×720 最大公約數為 80，最后得出結論屏幕的比列 16:9

兩邊比例的平方相加 = 屏幕英寸的平方

根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為 0.4357

16:9 的 8 英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 寬 =0.4357×9=3.9213

國際計算單位 1 英寸 = 2.54cm

所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm 寬 =3.9213×2.54≈9.96cm

分辨率：1280×720 寬度約等于 10cm 來計算，720/10 = 72px

分辨率：800×480 由于他們屏幕大小一致（英寸）480/10=48px

得出結論：視覺上的 1cm 的實際像素是有所差距的。

按照設計規則：按 4 的倍數來制定，因此最小圖標為 40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）

為了計算這個我還特地的回顧了高中學習的開根號、初中的最大公約數都搬出來了，幸好當時數學還算是個小學霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 圖標大小規范

基礎的圖標：主圖標：44px 次要圖標：36px 第三方圖標：24px

頭像的使用：小頭像：56px 中頭像：76px 大頭像：96px

百度車載生態開放平臺下載了他們組件庫，進行了研究。

基礎為圖標：48px 次要圖標 40px（最小圖標尺寸）

這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸 icon，后續我還會在輸出關于車載圖標詳細的內容，敬請關注吧。

3. 圖標的點擊區域

圖標觸摸區域分為駕駛中使用和靜止中使用

例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用有了記憶性，有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間，降低了危險系數。新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過 2 秒以上停留，就會存在危險。

靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。

谷歌制定觸摸區域的規則

最小觸摸目標尺寸為 76 x 76px，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為 44x44px

這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。

還有一種特殊情況：文字+圖標組合點擊區域，在 icon 很小的時候也可以考慮將文字也組合一起，增大點擊區域

4. 圖標設計的統一規則：

• 統一風格
• 統一光源
• 統一線條粗細
• 統一圓角/直角
• 統一傾斜角度
• 斷點的距離、大小統一

5. 最后最一個小插曲：命名的規范

之前經常有小伙伴問我，落地項目的 icon 切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。

首先分析這個 icon 在哪個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個 icon 代表什么，這個 icon 的大小，因為在一個系統里面會有重復功能 icon，所以是有必要增加大?。ㄟ@塊內容是選填項），最后在增加這個 icon 是處于什么狀態下，狀態分為：禁用、常態、按下、選中

最后呈現：首頁_音樂_下一首_常態 ，對接開發應該是翻譯成英文。

有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成 set icon ic button bt（如果全局使用就使用   All）

總結

聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著““干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力 all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：設計界的影帝

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

What 是什么

簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。

例子：  在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。

Why 為什么

「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。

對比：「輸入線索」VS「輸入說明」

「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式，這些模式可以幫助用戶明確輸入信息的內容形式。

那么這兩種模式有什么差異性呢？

使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因為用戶的目標是盡可能快地完成表單，然后進入下一步操作（雖然有的場景下這也是其中一個設計目標，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負擔。

Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容，通過「輸入說明」來補充填寫信息的相應意圖，進而使得用戶可以清晰地意識到需要填寫什么，并輸入相應信息。

When 什么時候使用

用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時，往往需要配合該模式進行使用。

使用條件

· 輸入框要求輸入的內容可能不容易讓人馬上理解；

· 設計上不希望在其他地方補充新的內容；

· 可以承載文本的輸入空間可能沒有太多；

· 配合下拉菜單或者組合輸入框使用；

How 如何使用

1. 選擇適當的提示文本

· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；

· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；

· 盡量使用祈使句，以動詞短語開頭；

· 以描述輸入內容的名詞結尾，例如“選擇狀態”，“在此處輸入消息”或“輸入患者姓名”等；

2. 提示文本的位置

有關文本提示的位置應該和輸入值的位置一致。 比如，提示本身不應該是下拉菜單中的可選值。

Example 案例

案例一：Ant Design Pro 登錄功能預覽

用戶需求：用戶登錄功能的預覽與體驗

Ant Design Pro 是一個中后臺開發的模板腳手架，其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。

在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。

案例二：163郵箱登錄頁面

用戶需求：登錄賬號

163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」，高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。

案例三：小米賬號登錄頁面

用戶需求：輸入賬號密碼

「輸入線索」有一種設計上的變體，稱為「浮動標簽」。因為一般來說，當用戶激活輸入框時，占位符文本會消失。而「浮動標簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

華為會定期派員工去兩個地方做用戶研究。第一個地方是華為手機線下門店，這個地方很好理解，通過觀察和訪談顧客，能挖掘到不少體驗設計需求。另外一個地方我完全沒想到是——手機維修中心！來維修手機的用戶都是憤怒而且失望，如果員工能體會到這些用戶的心境，對產品的設計底線和情感關懷應該會做得更好。

另外一方面，通過數據分析、競品分析得來的信息，我們不過是依據腦子里已經存在的假設再設計方案驗證罷了。有很多信息是未知的盲區，未知的盲區有潛在不可預估的風險，通過用戶訪談探索盲區能幫助我們打破固有觀念，補齊短板，做出更貼近用戶的設計方案。

通過訪談確實得到了想要的信息，也為后來產品優化提供方向。訪談期間發現了一些實用的小技巧，在此分享給各位讀者。

技巧 1：通過預訪談修正大綱

我猜設計好訪談大綱的你迫不及待的馬上想去訪談用戶，但是如何證明現在的訪談大綱的正確的呢？萬一設計的問題不對，那自然得到的訪談結論也是錯的。所以在設計好訪談大綱后，可以先只預約 1 個用戶，或者和目標用戶相近的朋友進行一次訪談預演習。通過這次演習找到大綱問題或者訪談中遇到的其他突發情況，對大綱進行修正之后再批量預約用戶進行訪談。

也可以把大綱當作一款互聯網產品，每一次訪談之后對大綱進行反思迭代，讓下一次訪談更好。

技巧 2：寒暄和循循漸進

如果和訪談的用戶一開場就單刀直入的提問，可能用戶此時剛從其他事情抽身出來，注意力和記憶力都還沒進入訪談狀態。開場立即提問會讓用戶懵，因此建議一開場先和用戶寒暄，比較輕松的聊一些和產品相關的問題，給訪談熱熱身。

技巧 3：鼓勵用戶暢所欲言

中國人講究和氣生財，尤其對陌生人更是客氣得很。不敢當面指出你的問題，擔心你面子上掛不住或者生氣。另外你認為是很重要的細節，用戶可能不太在乎。為了從用戶言語里得出更多信息，要鼓勵用戶多說不好的地方，甚至可以賣慘宣稱收集不到足夠的問題會被老板罵，求用戶多吐槽。

技巧 4：不要使用用戶不懂的術語

雖然在客戶面前說些黑話會讓你顯得很專業，或者你和同事在公司里有約定的簡化術語。但是用戶并不懂這些，所以在用戶前面收起你身為互聯網人的身份氣質，好好的說人話來和用戶溝通，本身也是在設計真正的用戶體驗。

技巧 5：多詢問曾經的真實經歷

越是寬泛和抽象的問題越難回答，不知道該從哪個角度開始講起。“從場景中尋找痛點”可不能只是嘴上說說的場面話，詢問用戶曾經的真實經歷，就是獲得現實的用戶使用場景，具體的問題也能讓用戶回憶起當時的細節，這樣你才能從細枝末節中找到痛點。

技巧 6：穿插現場操作，鼓勵口述想法

用戶訪談是非常消耗時間的方法，好不容易訪談一次就盡量榨干所有價值。建議訪談過程中穿插一些讓用戶現場操作的小任務，觀察用戶的現場操作，根據行為分析出體驗優化點。同時注意讓用戶一邊操作時一邊說出腦中的想法，獲取用戶的思考過程，更能得到有價值的信息。

技巧 7：不要問封閉式問題

封閉式問題得到的信息很少，而且所有的問題答案都只是你對現有已知信息設置的。如果要獲得封閉式問題的答案，不如網上直接發問卷來得效率高呢，在訪談中問這些性價比不高。我們盡可能多問開放式問題，多收集未知的信息。

技巧 8：給用戶榮譽感

“垃圾是放錯地方的資源”——說明對某些人不重要的信息對另外對人可能非常有價值。用戶對訪談中說過的話認為并不是很有意義的信息，但是對于你來說可能就是提升產品體驗的高價值問題。

我幾乎每次訪談的最后用戶都會對我說“我就隨便說說，希望能幫到你”，這時候就真誠的告訴用戶這些信息很有價值，讓用戶心中獲得訪談的榮譽感，這樣可能比給物質獎勵讓用戶更開心。并且榮譽感會激勵用戶之后再給你反饋更多產品使用問題，持續得到有價值的反饋。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：龍爪槐守望者

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：Alipay

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

場景細分

隨著各大智能廠商對用戶行為數據的收集積累，拆分提煉出了不同場景下用戶的特定需求，相比以前的大而全臃腫的功能界面，現在的功能、信息更加精確，產品將不同場景下的解決方案為用戶提前準備好，用戶只需要簡單的選擇就好，更加人性便捷。

1. B&O 音箱歌曲模糊切換界面

B&O 音箱面向的人群是音樂發燒友，他們對音樂有獨到的理解，為了為用戶提供便捷合乎口味的音樂，B&O 將歌曲類型與顏色情感相結合，分別是：黃色代表愉快的歌曲、紅色代表激情的歌曲、紫色代表憂郁的歌曲、藍色代表輕松的歌曲。用戶只需要選擇顏色就可以播放相應風格的音樂，給用戶濃烈的感性藝術氣息。

并且 B&O 將音樂播放場景做了細分：只收聽自己收藏的歌曲、收聽與自己品味相似的歌曲、隨便聽聽；這三個場景下的需求通過三層圓環來滿足：點擊外環區域播放全網歌曲、點擊中環區域播放與用戶收藏相似的歌曲、點擊內環區域播放用戶收藏的歌曲。這種感性的操作方式省去了搜索歌曲的過程，極大的提高了便捷性。

2. 三星智能冰箱 2.0 系統

我們先了解一下三星智能冰箱 1.0 的系統是什么樣的，首頁包含時間、天氣顯示、音樂播放、購物清單、備忘錄、相冊、留言板、設備控制，用戶在冰箱面板上什么都能做，整體感覺是一個臃腫的功能集合。

在 2.0 中，三星將用戶使用場景做了以下的細分：烹飪模式、日常模式、娛樂休閑模式、家庭管理模式；在烹飪場景下，為用戶展現菜譜，用戶可以專注的去研究飯菜制作方法；在日常場景下，為用戶提供日歷、照片墻、留言板、日程等日常生活相關信息；娛樂場景下，用戶可以在廚房一邊忙碌一邊聽音樂，還可以查看社交消息，所有的功能都是圍繞娛樂休閑；家庭管理場景下，全職媽媽可以一邊做著飯，一邊看著監控屏幕上兒童房孩子的情況及全屋的安防情況，也可以控制家中的設備。

場景細分可以有重點的為用戶提供他們真正需要的服務，讓用戶感受到產品帶來的貼心感。

3. Orvibo 燈光照明場景

Orvibo 根據用戶使用燈光的習慣，按照用戶對于光線的需求程度，將燈光使用場景分為：夜晚光線昏暗需要明亮的光照、白天光線充足不需要燈光、休閑時需要柔和些的光線、閱讀需要不刺眼但明亮的光線、起夜時微弱的輪廓照明即可。為用戶提供每種場景下的照明方案，準確快速的滿足用戶不同的需求。

4. 小米 TV 端空調控制界面

小米根據用戶對于空調各個功能的操作頻率，羅列出核心功能：開關、溫度調節、冷熱模式，界面中只體現這幾種種信息，將低頻功能隱藏起來，為視覺降噪，突出核心功能，提升了用戶操控效率。

5. WOM 天氣展示模塊

針對那些上班中不方便看手機、穿好衣服正要出門、旅游到達當地酒店需要看一眼天氣狀況的場景，WOM 提供了簡潔直觀的設計方案，產品顯示區域只保留 4 種常見天氣類型，高亮的天氣 icon 代表當前的天氣狀況，當天氣將要發生變化時，相應的天氣 icon 會閃爍。

此外，通過利用顏色來傳達不同的溫度，藍色代表 0℃，白色代表10℃，黃色代表20℃，紅色代表30℃，在不需要手機的情況下為用戶提供了豐富的展現形式。

6. 三星電子畫框

隨著手機的普及，家庭對于電視的需求已不完全是為了收看節目，往往一個禮拜也看不了幾回。三星基于這種情況為了延續電子屏幕的銷量，賦予了電視裝飾屬性，演變為純展示的電子畫框，用戶可以選擇各種風格的肖像或風景圖片進行輪播展示，扮演藝術裝飾畫的角色，從而滿足用戶日常家庭裝飾需求。

直觀明確的表現方式

在設計中融入圖片，將操作、狀態可視化，這些具象的形式可以讓用戶快速理解并操作，讓我們看看各大智能產品廠商是如何實施的：

1. Nest 溫控器安裝界面

大多數智能設備買回家后，需要用戶自己安裝，有的甚至牽扯到線路問題，Nest 溫控器安裝界面采用與實物一致的模型元素，讓用戶有參照依據；通過零部件的運動告訴用戶安裝順序；通過放大細節，告訴用戶應該選哪一個部件及如何鏈接。讓用戶有更好的參與感、成就感，還可以降低公司的人力安裝成本、客服成本。

2. 小米智能家居電視

小米智能家居電視背景運用實物圖片，給用戶營造家庭的氛圍，設備卡片 icon 運用半寫實風格，和實際產品一一對應，便于用戶快速查找設備；卡片底部體現設備狀態，精簡的卡片信息使得設備的狀態更容易被用戶感知到。

3. 三星、蘋果智能家居系統首頁

三星、蘋果都運用圖片作為系統的背景，可以很好的和用戶拉近距離，通過白色或磨砂卡片與背景做區分，三星的設備 icon 采用多彩漸變風格，和它趨于年輕化、時尚個性的品牌戰略方向保持一致。

4. Whirlpool 洗衣機、烤箱、冰箱模式選擇界面

由于洗衣機、烤箱、冰箱的運行模式和用戶想要洗的衣物類型、材質、烹飪的食物類型、儲藏的食物類型有強關聯，Whirlpool 運用圖片作為模式背景，將功能和物品類型結合，用戶可以直觀感性的理解和區分各個功能，從而快速做出選擇。

5. Orvibo MixPad

Orvibo 在大屏智能面板的設計上大量使用圖片元素，不僅可以區分各個功能模塊，還增添了內容的豐富性，要知道智能面板的首屏和設備控制列表頁功能是不一樣的，它是用來承接并向用戶展示房間內各個信息的，房間圖片作為背景烘托出家的氛圍，每個房間頁面的左上角顯示屋內溫度、濕度、當前開啟的設備類型及數量，很直觀的向用戶展示屋內信息。

每個場景都用具體的圖片作為卡片背景，可以讓用戶預想到每個場景對應的運行效果。有的場景卡片中體現所屬房間信息，告訴用戶該場景只聯動運行特定區域的設備。

運用圖片會有以下問題：1、找到能體現各個特定功能的圖片增加了人力成本；2、圖片的多樣性容易打破畫面的整體統一感。所以要結合公司的現狀克制的運用圖片。

6. Amazon 智能家居系統

Amazon 的監控設備卡片背景外顯了房間內的監控畫面，用戶在設備列表界面就可以直觀的看到監控區域的信息，強調了用戶關注的內容，縮短了操作步長。

7. Lenovo Smart Clock 備忘提醒時間設置界面

通常，我們設置時間時，系統會給我彈出時間選擇控件，需要我們上下滑動設置；Lenovo Smart Clock 的做法是將時、分的設置具象成了時鐘實際運行的圓形軌跡，與用戶對于時間的認知保持一致，很貼心的設計，這種方式非常值得我們學習。

8. Google Nest Hub 定時界面

Google Nest Hub 將傳統的定時列表具象成了一個個正在倒計時的時鐘，用戶可以更直觀的看到每個定時的狀態。點擊某個定時卡片可以快速的進行暫?；騽h除操作。

9. 小米空氣凈化器界面

小米空氣凈化器界面，每一檔空氣質量值都對應不同的顏色，并且將顏色延續到了其他操控按鈕，讓用戶對當前空氣質量有更強的感知；凈化器被關閉時，顯示區域、控制區域置灰，明確告知用戶設備狀態及可操作區域。

10. 三星 SmartThings 設備連接查看界面

房屋面積大，會有很多的設備與多個網關連接，家中與網關連接的智能設備有時候會連接中斷，具體哪個設備與哪個網關中斷了不容易被查清。三星 SmartThings 將設備與網關的連接情況可視化，可以向用戶直觀的反映出哪個設備連接出了問題。

運用手勢控制

通過利用不同形式的手勢操控，讓用戶和產品的交互過程更新穎更便捷。要注意的是雖然手勢不需要操控物理按鍵，但手勢操控的形式要建立在用戶已有認知習慣之上，請看以下案例：

1. LG 手機系統控制界面

最左邊的圖為行程信息截屏操作，目前截圖方式有幾個按鍵一起按下的，也有手機背面敲擊三下的，這些都需要與設備接觸，接觸交互的過程就需要花費用戶更多的時間，LG 通過雙手捏合截圖的形式體現現實中“抓取”的語義，用戶使用起來順其自然，瞬間就可以完成截圖的目標。

中間的圖為應用快速切換操作，用戶只需要對著屏幕做揮手動作，就可以切換至下一個應用，這個隔空操控的手勢核心使用場景是：當你正在廚房，手上沾著面粉或其他東西時，需要操控手機又不想弄臟手機，那么隔空操作就可以解決這一痛點。

最右邊的圖為多媒體音量調節，只需要作出旋鈕的動作，就可以實現音量的控制，是不是覺著很 Cool。這種新的控制形式可以讓用戶加深對產品的印象。

2. Google Nest Hub 音樂播放控制界面

在 Google Nest Hub 的音樂播放界面，當你想開啟或暫停音樂播放，只需要手掌隔空朝著屏幕方向做按壓動作，就可以快速觸發相應功能，這種方式讓用戶會感覺很爽，自己就像有了魔力。

3. Google Nest Hub 鬧鐘控制界面

早上鬧鐘響起時，需要用戶選擇關閉鬧鐘還是稍后提醒，常見的情景是，用戶睜開眼伸手去點擊某個選項，會干擾想要接著睡的用戶。Google Nest Hub 在此處增加了隔空操控手勢，用戶如果想關閉鬧鐘，只需要閉著眼，手掌朝著屏幕一揮手，就可以搞定了，有沒有被寵愛的感覺。

4. HomePod 音樂投射功能

蘋果用戶如果想將手機上正在聽的歌曲通過 HomePod 播放，只需要將手機靠近 HomePod，就可以輕松完成音樂投射，整個過程就像將一個容器的內容倒入到另一個容器內，既充滿趣味性又大大簡化了音樂播放設備切換的過程。

提供個性化、多樣化的選擇

通過設計語言為用戶提供更多的視覺風格，甚至開放編輯權限讓用戶更自由的制定自己喜歡的形式，這些都可以滿足用戶的個性化需求及專屬感，請看以下案例：

1. Sony HUIS 遙控器

Sony HUIS 遙控器為用戶提供了最大限度的自主編輯權，用戶可以從后臺設定每個按鍵的形式及功能，也可以在屏幕中設置戶型圖，方便控制對應的設備。

甚至可以繪制只有自己理解的專屬圖案，大大提升了專屬感。

2. 三星智能冰箱屏保

用戶具有喜新厭舊的心理，三星智能冰箱為用戶提供了豐富的屏保：有沒有任何信息展示的抽象幾何藝術畫風格、有配合溫度展示的春夏秋冬風格、有簡潔素雅的時間顯示風格、還有照片背景墻風格；兼顧了用戶日常裝飾和功能的需求。

3. Lenovo Smart Clock

Lenovo Smart Clock 對于時鐘屏保為用戶提供了不同的風格，涵蓋了大多數的人群風格喜好：活潑跳躍、實用直觀、極簡現代、抽象藝術、純文字、純數字等

甚至在同一種風格中再細分為多種色彩搭配方案供用戶選擇?？梢哉f想盡辦法來滿足用戶的個性化需求。

統一的設計語言及操控邏輯

這里的統一設計語言有兩個方面：一、同一個功能在不同的智能設備上布局要一致；二、同一類設備在 APP 中的功能布局要一致；操控邏輯統一指的是：產品中設備的操控方式要和用戶對實際設備的認知一致。一致性可以降低學習成本，提升更穩定的操控體驗。請看以下案例：

1. 溫控器多端控制界面

Nest 溫控器及 ecobee 溫控器在設備上的設計語言和 App 上的保持一致，方便用戶在多端設備上的無縫操控體驗。移動端與智能設備界面唯一不同的是，移動端，同一層級上展示的功能入口更多，適合更復雜的操作。

2. Orvibo 移動端設置界面

在移動端設置智能面板功能按鍵的界面中，Orvibo 將按鍵列表做成與實物一致的樣式，便于用戶快速找到對應的按鍵進行設置，這是提升智能家居一致體驗常見的方式。

3. 三星 SmartThings 功能卡片

在智能家居 App 中，由于功能種類繁多、內容不確定等因素，承載它們的卡片在布局設計上面臨很大挑戰，需要兼容各種功能、還要保證卡片的整體一致性及合理的屏效比。

在 SmartThings 智能家居控制系統中，三星對功能卡片進行了統一的部署，卡片左上角為功能名稱，左下角為狀態信息，右下角區域為操控區，并且還考慮了只有功能控制沒有狀態、只有信息沒有功能控制情況下卡片的拓展形式，充分保證了操控的一致體驗。

4. Google Nest Hub 調光燈控制界面

在調光燈的操作邏輯里有這么個問題：是將亮度值調至 0%關閉燈光，還是需要一個單獨的開關按鈕?？纯?Google 是怎么做的，它將調光區域與燈的開關做了區分，也就是說亮度通過調光區域操作最低為 1%，需要通過開關按鈕進行關閉；這樣做的好處是操作邏輯明確，并且當用戶在 80%亮度下關閉燈光，下次開啟時還是 80%的亮度，更加人性。

總結

目前網上各平臺的智能產品界面有很多，然而大多都是不落地的概念稿，里面的設計稿由于沒有具體場景及需求的約束，大多都無法解決公司實際項目中的問題，經常瀏覽僅能提升個人審美。只有平時通過對各行業實際落地產品的搜集積累和分析，才能發現它們在提升產品體驗道路上的共通點、差異點，從而為公司提供真正有價值的設計方案。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設  作者：Aaron杜斌 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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