二、看優秀的交互文檔 

目前我覺得交互流程標注比較好的展示方式，是按照一個主流程在一個站點地圖/畫板的形式展示。當一個主流程中存在幾個支線操作流程時，可以分別在一個站點地圖/畫板中，展示出來。同時用標題區分說明分支流程的操作名字。如下圖所示：

全局斷網：一般是在首頁使用tips提示。用戶在其他界面點擊操作時，也會出現toast反饋提示用戶。也有一些app在用戶進入出現對話框提示用戶網絡異常。相對于對話框，使用tips對用戶的干擾更小。

操作成功：一般操作成功都是根據具體的使用場景對出對應的提示。

操作失敗：異常情況導致操作失敗，這時需要統一的提示，通常使用toast，也有一些使用對話框強提示用戶。

加載：涉及到全局加載和局部加載，全局加載在設計中要統一說明，例如上一個界面點擊進入下一個界面，使用的全局加載就需要說明。如果是一些小場景的加載，那么需要特殊說明。例如上拉加載，下拉加載，局部小區域加載等。

1.初始狀態的定義：初始化狀態，沒有任何內容，需要用戶進行某種操作才能產生內容的界面。

2.清空狀態的定義：通過刪除或其他用戶操作，清空當前的頁面內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。

3.出錯狀態的定義：由于網絡、服務器或者沒有找他其他結果等原因導致無法加載內容，產生了空界面，這時候需要有明確的提示，且告知用戶該如何處理。用戶操作反饋的無結果界面也可以用這樣的思路來設計。

三、思考設計背后的邏輯 

這樣的改版，作為設計師或者產品經理，應該從兩方面來看待這個事情，即從產品訴求和用戶訴求雙方面來看待，從兩個方面看待得到的結果是迥然不同的。

產品訴求角度：新版將用戶下單的狀態顯示在首頁可提升首頁訪問深度和曝光率。

個人中心訂單頁并不能做到流量的二次利用。這也是這次改版的主要原因。

以前用戶查看訂單狀態都是只能去訂單頁面，路徑較長，且訂單頁面沒有產品曝光，無法進行其他轉化，流量無法被多次利用。

所以將用戶的訂單狀態這種高頻操作放置于首頁，可利于其他業務的曝光。

美團的吃喝玩樂，其他業務被用戶查看的概率提升。對產品來說是有巨大的好處。

用戶訴求視角：將用戶訂單狀態放于首頁，用戶的使用場景，會不時的查看訂單狀態，放置于首頁可方面快捷的提供用戶查看訂單狀態，對用戶來說體驗好。

從用戶訴求和產品的訴求來看，這次改版應該是很優秀的。

但是脫離于個體業務，從產品全局來看，這種設計的邏輯方式，會讓用戶對于app的信息的尋找邏輯進行顛覆和破壞。

以后是不是重要的東西都可以放置于首頁？如果這個改版開了個頭，以后其他業務也都有這個訴求，整個產品的生態都會失去控制。

四、總結設計方法 

設計師接到的設計需求，大部分情況下是通過產品經理那里獲得的。而產品經理的原始需求來源于：業務方、用戶和老板。

產品經理會將原始需求進行整理，從而轉化成產品需求，在這一過程中產品經理可能會出現對原始需求的理解出現偏差（范圍擴大、范圍縮小或者是方向錯誤）。

設計師如果直接拿著產品需求就開始做設計，可能會導致設計方案不符合業務需求。所以設計師進行設計前，最好也了解原始需求是怎么樣產生的，這樣才能做到心中有數。

• 提升清理緩存的成功率；
• 和開發溝通，是否有更好的更改緩存機制；
• 通過設計的手段引導用戶清理緩存垃圾等。
• 是否可以增加自動清理功能。

例如注冊流程/綁定銀行卡的過程中，總的轉化率只有0.06%，用戶完成率過低，如果要優化整個用戶注冊操作流程，那么需要找出流失過大的節點進行優化。

從數據可以看出有兩個失敗率最高，分別為：注冊流程和綁定銀行卡流程。

以表單設計為例。常見的設計方案，是將所有的表單內容按照分組的方式，進行排列，如下圖所示：

但是這種方案存在一個問題，用戶進來之后，發現有大量的信息需要填寫，填寫壓力大，導致用戶的填寫意愿變弱，導致提交成功率降低。

下圖左邊為分步設計，右圖為表單信息隱藏到下一級頁面。

4、切換用戶視角

五、項目復盤 

1、提升設計師多種設計方法能力

2、提升設計師整體設計思維推導能力

3、提升設計師整體匯報、述職和晉升答辯能力

所以在工作中，每做完一個重要項目都要做好項目復盤。這樣的話，既是是階段性工作的總結，也是為下一次做項目提供更好的經驗。

復盤的方法有多種，可以結合設計方法來做總結，在復盤的過程中，要體現最終的結果，即通過數據或用戶反饋對我們設計驗證。

也要總結其中的不足，為之后工作中避免踩坑，并更好的為以后的工作提供服務。

 轉載請注明：學UI網》譯文|交互設計不只是流程圖與點擊

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

前言

01.B端產品設計原則  

02.設計目的和業務邏輯的理解  

1.為什么做這個需求？

2.這個需求有什么功能？

3.怎么實現這些功能？

結構梳理

1.功能結構

2.業務流程

3.跳轉邏輯

 03.交互設計  

1.信息載體

2.信息設計

3.導航設計

4.權限設計

5.圖表設計

6.組件設計

7.反饋機制

8.語言設計

9.特殊場景

10.動效設計

 04.視覺設計  

原文地址：墨染動效（公眾號）

作者：喬公子

轉載請注明：學UI網》B端交互設計過程中的思考

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、功能背景

二、設計迭代

三、設計總結

轉載請注明：學UI網》從微信朋友驗證功能迭代，看交互設計對產品的價值

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

△ 豆瓣 App 電影榜單卡片

顏色的搭配其實是一個非常值得研究的問題。深入剖析的話內容也會很多，本文會告訴你，顏色如何挑選會更有規律，并保證基本和諧。

1. 色彩學概念淺談

想要做好色彩的搭配，需了解一些色彩學概念。色彩學將顏色分為：同類色、類似色、鄰近色、中差色、對比色、互補色。這幾種顏色通過色相環的角度進行取色，如下圖所示：

任意顏色都可以作為基色，每一個基色都有其相對應的同類色、對比色、互補色等等。

通常情況下，相鄰的兩個顏色，選擇基色和鄰近色之間的顏色，也就是與基色之間的角度 ≤ 60° 的顏色，會讓頁面的顏色顯得和諧統一。

△ 得到 App 服務內容卡片

△ QQ 音樂 App 榜單卡片

如果選用對比色和互補色，則需要控制顏色的面積，比如以紅色為主的頁面中可以出現藍色，但藍色的面積占比最好不要超過 20%。

除了色相上的變化，顏色還有明度和純度上的變化，對于顏色的影響也至關重要。這三個詞匯的概念如下：

• 色相 Hue：也稱色調，是指色彩的相貌
• 純度 Saturation：也稱飽和度，是指色彩的鮮艷程度
• 明度 Brightness：也稱亮度，是指顏色的明暗程度

色相、純度、明度三者構成了色立體的概念，讓色相環由二維變成了三維的概念。

2. HSB 色彩模式

RGB 和 CMYK 是我們較為熟知的色彩模式。而根據上文提到過的色彩學概念，在實際工作中我們也可以借鑒 HSB 色彩模式進行調色和選擇顏色。

在 sketch 和 PS 的 HSB 色板界面如下圖：

其中：

• 色相 Hue (H)：取值在 0-360 度之間
• 純度 Saturation (S)：取值在 0-100 之間，數值越高色彩就越純艷
• 明度 Brightness (B)：取值在 0-100 之間，數值越高色彩就越明亮

由于純度 Saturation (S) 和明度 Brightness (B) 之間的數值都是在 0-100 之間，因此兩者具備一定的對應關系。這些數值可以為你在選擇顏色時提供依據。

具體怎么使用這些數值，我們用案例來說明：

案例  

某 PC 端產品功能卡片需要做配色設計：

已知產品的品牌色是以下兩個顏色，其 HSB 色值如下圖所示：

– 顏色 A：H=233，S=74，B=100（主色）

– 顏色 B：H=267，S=79，B=100（輔色）

因此卡片的衍生色我們可以使用：藍色調 + 臨近色，且臨近色的顏色最好介于藍色和紫色之間，會使產品頁面顏色的搭配更加和諧統一。

于是我們可以先根據品牌主色：

– 顏色 A：H=233，S=74，B=100

來確定初步顏色，我們只改變色相（H）的數值，分別在 233 的基礎上進行 +10 和 -10，由此可以得到三個顏色 A1、A2、A3，呈現效果如下圖：

– 顏色 A1：H=253，S=74，B=100

– 顏色 A2：H=243，S=74，B=100

– 顏色 A3：H=223，S=74，B=100

現在的卡片顏色略顯單薄，我們可以再給每一張卡片加一個顏色，做出過渡色效果。于是我們在數值 A1、A2、A3的基礎上，保持色相（H）不變，只改變這三個數值的明度（B）和純度（S）的數值。以顏色 A1 為例：

– 顏色 A1：H=253，S=74，B=100

現在，我們想要得到一個比 A1 更深一點的顏色 A1-1，根據色彩學理論，我們可以降低明度（B）的數值，這樣顏色會變深，同時增加純度（S）的數值，這樣顏色會更沉穩純正，為了保證數值可控，我們將明度（B）降低 26，將純度（S）提高 26，所以可以得到顏色 A1-1 的色值：

– 顏色 A1-1：H=253，S=100，B=74

A1 和 A1-1 的顏色效果如下圖：

按照此方法，我們可以得到兩組顏色和其數值：

所以我們的卡片可以使用漸變色：

這樣卡片的顏色就基本確定下來了，我們可以再調整下卡片的細節，比如增加相關的背景插圖，調整卡片上的文字排版等等，這組 PC 端卡片最后的效果如下圖：

3. 補充說明

一個頁面中元素的色彩選擇有很多影響因素，比如：產品的品牌色、頁面的功能、頁面的內容、氛圍等等，所以還是要具體情況具體分析，綜合考慮選擇顏色。

當然，以上提出的這些數值只是參考，為的是給你的顏色選擇提供理論支撐。在實際應用中，也還是需要設計師根據具體情況，以及人眼視覺感知的效果，酌情做顏色上的優化處理。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》詳解｜交互設計中的色彩搭配，這樣更有效！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、什么是漸進式披露？      

在產品設計中常常能聽到這樣的說法：把控制權給用戶，確保用戶明白一切都在自己的掌控之中。

雖然更多的選擇會讓用戶興奮，但問題是過多的選擇也會讓用戶無法輕易的作出決定，反而造成體驗上的負擔。

漸進式披露不再是簡單地給用戶提供大量的信息和選擇，而是將這個過程分解成幾部分，讓用戶集中注意力在當前的事件上，從易到難地引導用戶。

這樣不僅可以確保用戶不會被新信息淹沒，還可以分解用戶不想做的任務。例如將一個特別長的表單分成三或四個步驟，分步進行填寫，同時還能單獨查看每個步驟的內容。

二、漸進式披露的優勢

想象一下這樣的場景，我們剛下載了一款新游戲，進入游戲后發現里面有各種各樣的游戲規則和操作細節，如果只是簡單地將所有游戲信息推送出來，那么我們可能就會淹沒在各種規則和細節里，根本記不下這么多規則，甚至會影響游戲體驗。

產品設計也是如此，以一種漸進的方式呈現信息，可以讓用戶在深入了解產品細節前就投入到產品的使用中。

對新用戶來說，漸進式披露讓他們有足夠的時間熟悉產品的基本知識，然后再進行更復雜的功能或任務，這樣可以讓整個產品更易于探索并提升可用性。

三、漸進式披露設計準則

劃分主次和優先級

漸進式披露主要的目的是將用戶注意力集中在重要的事情上，尤其是在一開始的時候。

在設計時，我們要考慮導航菜單以及選項的優先級，信息和功能的呈現也必須如此，通過漸進式披露能讓用戶首先體驗產品最核心的功能和信息。

將注意力集中在關鍵功能上。比如進入電商App，重點是引導用戶如何完成從看到買的整個過程，至于用戶是從主頁購買、搜索購買，還是從直播購買，這些等待用戶慢慢去發現。

從主要內容向次要內容過渡

對于想要了解產品中每個功能的用戶來說，除了明顯的主要內容，次要內容的呈現也變得很重要。

通過好的按鈕設計或可點擊的鏈接來實現從主要內容向次要內容過渡。

轉載請注明：學UI網》漸進式披露！交互設計領域獨有的設計方法論

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

準則 1.  Timely —— 找準時機，即時反饋

在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣，或糾正用戶的不當操作。

如果反饋內容需要較長時間的加載，也可以給用戶設計一些有特點的 / 情感化的加載狀態，緩解用戶等待的不耐煩，又可以傳達一定的品牌調性。

例如：知乎 App 在加載內容的過程中，增加了 IP 形象的動態效果：

準則 2.  Specific —— 具體分析，差異對待

在設計交互反饋時，不僅僅要給出正確或錯誤的判斷結果，同時也應該考慮到用戶的個性化需求，針對不同類型、場景、地區的用戶提供差異性引導和服務。

例如：大眾點評、高德地圖可以根據用戶的位置，在用戶開始使用產品時就推送個性化信息：

準則 3.  Balanced —— 正負反饋，穿插結合

通常來說，正面的反饋會激發用戶的自信等積極情緒，因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候，我們可以在其中穿插一些正面的消息，減少或緩解用戶的因負面反饋帶來的消極情緒。

這就好像是別人跟你說：“ 壞消息是……，但是，這樣做的好處是…… ”，壞消息不可避免，但加上一點轉折，就會讓他人心里稍微舒服一些。

例如：美團單車在你騎完車之后，需要支付費用時提示你可以購買單車套餐，雖然是在勸用戶花錢，但看上去依舊很友善，其中的話術包括：“本次騎行免費”，“當前已是最優價格”：

準則 4.  Instructive —— 提示下步，指引行動

有效的反饋會主動多引導一步，對用戶的下一步行動給出清晰的、正確的、指導性的意見，有助于驅動用戶繼續做出有效操作。

很多 App 在截屏之后都會給出下一步分享的路徑引導：

準則 5.  Emotional —— 情感屬性，引起共鳴

有科學依據證實，人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋，從而也更有可能改變其行為方式。

例如：雖然只是一個提醒彈窗，QQ 音樂會員到期的續費提醒文案卻經過精心的設計，由各類歌名組成的一句話，每天的到期提醒都不同：

準則 6.  Traceable —— 可被溯源，可供反饋

一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因，可以提供給用戶進行申訴和詢問的渠道，供用戶進行反饋。

例如：電商平臺和外賣平臺都會在用戶下單或退單之后，提供商品物流的詳細信息，在查看購買的商品的當前狀態時，并可以追溯到商品所在的各個歷史環節：

再比如，高德打車如果發現用戶的行程訂單金額與預估金額差距較大時，會給用戶發短信提示，并給出客服和投訴渠道：

準則 7.  Less is more —— 質量優先，減少數量

在這個信息過載而注意力稀缺的時代，好的反饋在于質量，不在于數量。有時數量越多，反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品，而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

以上這 7 大準則，來源于我們日常工作中的積累和沉淀，對于設計產品的交互反饋具備較高的指導意義，希望對你有啟發。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》干貨｜交互設計中的「有效反饋」7大準則！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

為什么需要設計質量保證

在設計中，最常見的質量保證方式就是在產品驗收環節進行「設計走查」。不過因為是上線前的最后驗收環節之一，經常會出現因臨近上線時間，且交互和UI類的問題在修改優先級中一般都是較低的，最后只能修改部分設計上的「bug」，其他只能舍棄或放入永遠不會開工的下次迭代再改。設計師在各種來回扯皮之間筋疲力盡，看不到設計價值在需求中的體現，各種“這里設計不好”的鍋一不小心也接了一堆。更嚴重的問題在于，用戶得不到更優秀的體驗，輕則耗費更多時間，重則放棄使用功能。不管哪種結果，對于產品整體滿意度都會有不同程度的影響。

由此可見，設計質量保證僅靠最后臨門一腳的設計走查遠遠是不夠的。在需求全周期中各個環節都可以加入對設計質量的把控（Design QA）。Design QA的概念來源于研發流程中測試環節。質量保證縮寫為QA（Quality Assurance），是產品交付流程中非常重要的一環，一般就是大家了解的測試工程師的崗位職責內容。在這個環節中，測試人員需要對產品功能進行仔細認證，確認是否滿足了產品需求并且可以正常使用。但與測試不同，設計QA須加入到產品需求全周期的各個環節中，最終形成與產品設計并行的一個流程，才能有效保證質量。

設計QA實施步驟和方案

步驟1: 需求分級，確定是否需要設計QA

要保證設計質量，在B端設計中不是易事。我們經常會聽到：

· “這個功能能用就行”：公司/團隊不理解或不夠認同設計價值是什么，不明白為什么體驗會在每一處未還原的設計稿上慢慢丟失

· “這還原的不挺好，和你設計稿我看一樣啊”：非專業的同事無法分辨設計稿與研發實現稿的細微差異

· “沒時間改了，下次再說吧”：設計質量保證低于功能質量保證，或者團隊必須在有限的時間交付需求

在接到需求后可以根據以往經驗或與產品經理的溝通，確定本次需求設計等級：

• A：公司級和部門級重點、設計周期長內容多、設計可沉淀輸出的內容多的需求
• B：正常迭代、量級一般的需求
• C：時間緊迫倒逼排期、無前端研發資源、少量調整、評估不需要設計的需求

在確認等級后，作為設計師可以有一定的心理預期。對于A類可能各個環節都需要詳細的進行QA，而對于C類有可能連設計走查都沒有預留時間，只能靠后續線上的直接驗證了。后面的幾個步驟可針對不同的等級選取全部或部分進行實施。

步驟2:交互設計中，考慮極限下的正確展示

B端交互設計中，很重要卻經常制作不到位的就是極限情況。看起來都是各種表格，簡單的給定一個寬度即可，但在上線后經常發現，填充了真實商家數據的表格，總有意想不到的錯位折行和重要信息截斷，用戶的可閱讀性降低。

                                             左：重要信息被截斷；右：折行錯位

步驟3: 設計評審與交付，交互說明與UI標注一體化

在完成制作后一定要進行評審，對功能完整性、頁面流程、頁面文案、組件特殊交互邏輯要求、交互可實現性與開發成本進行評估。項目相關利益人都需要參加，尤其是測試同事需要參與評審，保證后續測試用例編寫質量。在交互與UI全部評審完成并通過后，交付給研發的設計稿最好可以做到交互說明文檔與UI標注一體化，方便研發同事查看。避免在交互說明與UI標注中來回切換，導致交互或UI細節遺漏。這里推薦一個sketch插件：NoteBook Pro （需要付費，lite版大約￥76），方便在sketch中添加交互說明標注，在上傳到可以在線查看UI標注的平臺，比如Zeplin/Relay等。

交互說明+UI標注在一個頁面上同時呈現

步驟4: 參加測試用例評審，確保測試用例涵蓋所有交互細節

一般來說，交互稿與UI稿交付給研發同學后，設計師就要開始忙下一個需求了。直到通知設計走查前，設計師暫時不會再隨時跟進需求進展，而是交接到產品或項目經理手中。而在這個從設計稿到研發實現的過程中，設計師也需要在關鍵節點參與其中，確保設計質量。測試用例是其中一個設計師可以參與的環節。其實有時候很多交互文檔中的內容會被用作測試用例，所以需要再次和研發與測試同學對齊所有交互內容，保證交互設計內容不會在此階段被降級甚至直接去掉。

步驟5:設計走查，輸出并記錄結果

此環節很重要的一點就是走查文檔或記錄。未完成修改的內容，建議研發給出一個解釋，并以文檔的方式記錄下來抄送給相關利益人，標明可能帶來的風險。同時嘗試與產品或項目經理溝通，推動迭代優化的具體時間，避免「下次一定」的無效承諾。

總結

設計QA是貫穿整個產品需求全周期的設計流程，在以往的點狀設計走查之外，需要與團隊上下游通力合作溝通，才能確保優秀的產品呈現在用戶面前。

參考文獻：

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

原文地址：京東設計中心JDC（公眾號）

作者：唐朋博、李小猛

轉載請注明：學UI網》B端交互設計在產品需求全周期中的質量保證

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1.  本能層 —— 感官刺激

對于本能層，設計師需要在符合功能需求的前提下，盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激，極力去促成用戶與產品的 “一見鐘情”。

案例 1  ：App Store 的卡片推薦做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名為：熊幫手。

案例 2  ：微博長按點贊按鈕，可以選擇不同的點贊狀態。圖標還是動態的，很有趣。

案例 3  ：淘寶雙十一預熱，首頁的 icon 變成了 “今晚 20 點雙 11 搶預售”的字樣，烘托氛圍又打了廣告。

案例 4  ：微信撥打語音的界面，在等待好友接聽的過程中，可以看到好友朋友圈的圖片，緩解用戶等待時的無聊，也為即將進行的語音聊天提供了話題。

2. 行為層 —— 細節引導

對于行為層，設計師需對用戶的行為進行預判和引導，利用細節處理打動用戶，讓用戶對產品產生信任感和依賴感。

案例 1  ：當蘋果公司發現用戶最近在官方渠道購買了新的 iPhone ，老 iPhone 的設置頁面就會給出提示，讓用戶為新的 iPhone 做好數據遷移準備。

案例 2  ：iOS 系統后臺在看縮略效果時，會將用戶的敏感、私密的信息的 App 頁面進行模糊處理，保護用戶的隱私安全。

案例 3  ：在屏幕很暗的情況下，打開微信支付二維碼，屏幕會瞬間亮起，便于商家掃碼付款。

案例 4  ：貨拉拉在展示搬家車輛詳細信息時，使用了剖面圖，并模擬了不同搬家場景下的家具內容，讓用戶更好估算車輛空間。

3. 反思層 —— 認知共鳴

對于反思層，設計師要調動用戶最深層的記憶和感知，將視覺效果、產品功能和用戶認知緊密結合，形成用戶對于產品和品牌的深刻認知。

案例 1  ：FigJam 是一款來自 Figma 的多人協作在線白板工具，可以進行頭腦風暴、繪制流程、多人協同標記等。里面也有很多人性化的小功能，比如：當兩個人同時長按 “H” 鍵時，就會出現 highfive（擊掌的動效），非常適合當設計師達成共識時使用：

案例 2  ：小睡眠 App 發現學生時代的我們經常會在枯燥的課堂上睡覺，所以準備了各種課堂講解、校長發言、領導開會的聲音作為催眠、助眠的音樂，讓人會心一笑。

案例 3  ：餓了么在異常天氣下通過在界面上增加天氣的元素，讓用戶看到外賣小哥的辛苦，使用視覺和內容共情，喚起用戶的同理心，降低用戶因外賣遲到而做的投訴和差評。

案例 4  ：QQ音樂上線了寵物功能，一共有五個品種的寵物讓用戶可以選擇領取，多聽歌能喂飽寵物，然后送它出去參加演唱會或者和好友進行互動。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》案例錦囊｜交互設計中「情感化」設計優秀案例（二）

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司