概述

每年年底，QQ都會迎來一年一度的年終盤點活動，幫助用戶實現QQ社交記憶回溯。通過生成用戶專屬的社交形象，拉近用戶和QQ之間的距離，體現品牌溫度。

一、設計目標

年度盤點活動不同于主題運營活動，是對QQ用戶年度高光時刻的總結。在活動設計目標的設立上，我們希望塑造QQ溫暖品牌形象的同時清晰展示QQ用戶年度的社交記憶點，通過創造用戶記憶點，激發用戶分享。

二、創意構思

我們從QQ用戶熟知的社交行為、場景出發，進行視覺元素延展。將用戶的瀏覽過程喻作QQ社交記憶的探索歷程。通過QQ元素等場景映射，喚醒用戶的社交記憶，最終形成用戶專屬的社交形象。

三、風格設定

基于活動的目標我們衍生出以下設計關鍵詞（見下圖），簡潔有品質是本次活動視覺風格的核心傳達目標。

1、色彩

為凸顯回憶感知以及透傳QQ品牌。在色彩的選擇上我們使柔和的藍黃漸變色系，背景色系就像天空會跟隨活動節奏、故事內容而動態變化，利用色彩變化傳達時光回溯的氛圍感知。

2、質感

考慮到整體的風格設定偏潔凈明快的感受，我們多以玻璃、半透明3s，啞光三類材質為主。選擇透光性強與色彩融合度高的材質搭配使用，讓畫面更具輕盈、簡約的品質感。

四、視覺表現

1、信息傳達

年終盤點活動與主題運營活動不同，繁冗的氛圍傳達并不等同清晰的信息傳達，在活動的設計上，我們希望一頁只講述一件事，弱化裝飾，突出主體內容。

2、品牌透傳

場景內我們融合了QQ品牌調性的元素，如聊天aio、消息氣泡，QQ空間等，加強用戶代入感。

3、動效編排

我們根據頁面場景的展示內容類型，進行動畫節奏上的編排。保持信息傳遞的效率，并在需要氛圍強化的環節增強動畫吸引力。營造靈動的內容瀏覽體驗，提升動畫張力。

在動畫的運動樣式上，我們提煉出映射QQ社交場景的動態設計語言。通過模擬聊天氣泡出現、新消息通知彈出、空間訪客踩一踩等社交場景中的動畫形式，透傳QQ品牌調性，增強動畫表現力。

五、激發分享欲

從設計層面，如何激發用戶的分享欲？在本次活動分享中用戶的專屬社交形象扮演著重要的角色，接下來我們將介紹影響社交形象品質的三大設計因素。

1、形象設定

我們選用QQ作為社交形象主體，根據用戶不同的社交屬性去賦予其色彩、材質的變化。在初步的生成方案上，我們嘗試挖掘更多的組合可能性，從QQ圍巾、嘴巴等部件進行材質變化。但三維的部件設計、審核成本高且組合起來多種情況形象差異性小。

為此我們降本提效精簡了生成邏輯，在鵝身上視覺強感知的場域進行差異化設計。

2、構成規則

我們將社交關鍵詞分為三大階級并衍生出社交形象構成的梯度規則。從社交小白到社交天花板，不同強弱的社交屬性決定著鵝身的變化。例如低階的材質表現使用的是石膏、木紋，形容人們在社交上木訥、寡言少語，而高階的鵝身質感、色彩，圖案表現更加豐富。 

3、隱藏款埋入

在QQ形象設計上，我們根據不同的社交關鍵詞進行了不一樣的設計，包括樣式、材質、顏色等，這些不一樣的設計在隱藏款上尤為突出。

例如針對社交關鍵詞“一呼百應KOL“，此社交關鍵詞形容的是人氣高，是眾人的焦點，為了體現這種超高人氣，QQ形象通體采用透明材質，并在內部放置了很多不同的體現開心的黃臉表情。

在隱藏款“自帶光環的主角”的設計上，我們希望傳遞出受人矚目的光感，結合我們的生活，光線經過玻璃后，通過不斷折射反射，能很好的傳遞出多彩和絢麗感覺，所以這款QQ形象通體采用了玻璃材質，強化和傳遞出受人矚目的主角光環。

隱藏款之外，其他更多QQ形象我們也會根據社交關鍵詞進行不一樣的設計。

六、形象展示

• 金屬鵝 Metal Q

• 玻璃鵝 Glass Q

• 樹脂鵝 Resin Q

七、形象延展應用

除此之外，我們在春節賀卡活動中還復用了部分鵝身形象，并為虎年設計了專屬的虎紋迷彩鵝。期待后續在運營活動中嘗試更多的個性化QQ形象，刷新IP，升華品牌。

結語

在當今社會強調本我的趨勢下，活動千人千面的屬性越發重要。將經典的QQ形象與用戶社交特征相結合，傳遞具備獨特性、品質感的品牌視覺表現，更能拉近QQ與用戶的距離。我們相信在未來的年終盤點活動中，QQ會帶給大家更多的驚喜，敬請期待吧！

原文地址：騰訊ISUX

作者：ISUX設計

轉載請注明：學UI網》探秘｜QQ社交形象年度盤點設計密碼

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

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

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

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

數據來源：《2021年中國互聯網行業體驗設計工具趨勢研究》

但體驗是的一種主觀感受，是用戶在使用一個產品、系統或服務之前、使用期間和使用之后的全部感受。公司的品牌、網站、系統、產品、服務、營銷活動、線下門店等等各個環節的用戶觸點都會是用戶體驗的影響要素，面對如此復雜的情況，體驗管理的邊界是什么？內核又是什么？接下來我將結合自己開展體驗管理工作的相關經驗，談談我對于體驗管理幾方面的思考。

一、如何理解體驗管理

顧名思義，體驗管理即為對體驗的管理，既可以是用戶的體驗，也可以是商家的體驗、供應商的體驗、經銷商的體驗，合作伙伴的體驗，還可以是內部員工的體驗。但無論是哪類角色的體驗，都是一種主觀的情緒感受，都會受到多個環節、多種因素的影響。因此，對于一家公司來說，體驗的提升和優化也勢必涉及多個部門團隊的工作協同，需要從宏觀視角、從戰略視角對“整體”體驗進行管理，充分分析并把握用戶與公司產品或服務接觸的每一個觸點環節，聚合和分析全渠道、全流程的體驗數據，洞察用戶痛點、需求及偏好，并以全鏈路整體體驗提升為目標，通過各部門團隊的協同，不斷改善公司產品或服務的觸點體驗，從而為用戶提供系統性價值交付，為企業提供持續性增長動力。

二、為什么要做體驗管理

首先，從體驗提升的宏觀價值視角來說，提升用戶體驗是企業在流量紅利逐步消失、行業競爭日益加劇的宏觀背景下，繼降低成本、提升效率之后實現業務增長的共識性舉措。實施體驗管理有助于提升用戶滿意度、忠誠度；有助于提升品牌口碑、品牌影響力；有助于促進用戶增長、商業目標達成；有助于促進產品創新、營銷創新以及企業升級。

其次，從體驗提升的工作開展痛點來看，現階段國內體驗管理仍處于刀耕火種期，雖然越來越多的公司紛紛入局，但多數只是停留在散點式、被動性的體驗需求研究、體驗問題收集及優化、用戶反饋及態度采集上，缺少對體驗的整體性管控能力，因此在開展體驗提升工作的過程中往往會遇到以下困境：

1. 缺少統一的量化指標。各團隊對體驗的理解、當前的體驗水平、體驗影響的大小均不像轉化率、用戶量等業務指標那么清晰，所以團隊之間缺少統一的體驗語言，導致體驗提升工作的推進成本遠高于更明確的業務目標提升工作。

2. 傳統體驗研究分析的周期長，時間跨度和體驗觸點的覆蓋范圍有限，導致體驗優化工作難以適應現有產品或服務的迭代更新節奏。

3. 體驗分析與體驗優化有脫節現象，未形成完整的體驗提升進度跟蹤保障機制。

4. 公司同事體驗意識參差不齊，缺少統一的體驗文化引導。導致先上線后優化的不良模式盛行，增加了用戶首試體驗受損的風險，增加了體驗挽回所需付出的成本。

因此，開展體驗管理所能帶來的直觀可見的價值是能幫助我們解決以體驗提升為目標的各項工作的難點，提升各項工作的效率。同時，從體驗管理的長遠價值來看，開展體驗管理可以提升企業競爭力，促進整體商業目標達成。

三、體驗管理的通用模型

結合國內公司在體驗管理工作開展上的主要內容，大致可將體驗管理工作分為三大類：

1. 數據采集為主的研究執行，即診斷用戶使用產品或服務全鏈路上的體驗現狀和問題，為體驗優化提供方向指引；

2. 體驗優化為主的機制建設，在公司層面建立規范的流程或機制，保障體驗優化工作順利開展；

3. 體驗管理工具或系統建設，結合公司體驗管理需求，依托現有體驗分析及優化的工作流程、機制，設計開發體驗管理工具或系統，提升體驗管理的系統化能力。

數據來源：《2021年中國互聯網行業體驗設計工具趨勢研究》

綜合現有各公司所開展的體驗管理工作內容以及我們現有的工作實踐，我將體驗管理工作的具體內容按照覆蓋范圍分為三層結構：數據層、系統層和運營層。

圖1. 體驗監測管理體系

每一層級上都有對應的工作目標和工作內容：

數據層：建設體驗數據，量化體驗水平，追蹤體驗變化。

圖2. 體驗監測數據示例

做體驗的監測管理，首先我們需要看到它，并且能及時的掌握它的現狀和變化情況，這樣我們才能針對現狀去分析判斷我們應該怎么提升它，改善它，才能針對變化情況來分析、判斷、衡量我們所做的提升和改善措施是否有效，才能不斷沉淀經驗方法，在體驗提升的臺階上逐級而上，而不是原地打轉。

但正如前文所述，體驗是用戶的主觀情緒感受，無論是對單個用戶的情緒感受的測量方法，還是對整體用戶主觀情緒感受數據的收集技術都不是很成熟，所以，體驗數據不像運營數據或財務數據那么容易追蹤和衡量。

在這樣的背景下，我們首先需要找到那些可以直接或間接反映用戶情緒感受的數據，構建收集渠道來收集可以反映用戶情緒感受的數據。

那這類數據都有哪些呢？結合用戶體驗度量的數據維度來看，大概可以將其劃分為兩類：用戶自我報告式的主動反饋類數據和系統埋點收集的客觀行為類數據。

自我報告式的主動反饋類數據主要有滿意度評價（CSAT）、推薦意愿（NPS）、客戶費力度（CES）等反映整體感受的數據，以及用戶通過客服或在線反饋等渠道針對特定問題的反饋數據。此類數據主要通過直接詢問用戶或用戶主動反饋的方式來采集。

系統埋點收集的客觀行為類數據主要是用戶與產品或服務的交互過程數據，比如App的整體使用頻率，使用時長，App分享率等，以及重點功能或頁面的點擊率、轉化率、跳出率等。此類數據主要通過系統后臺自動記錄來采集。

為了能更精細化的對體驗狀況進行分析，也可以增加一些體驗水平分析的輔助型數據，比如用戶的性別、年齡、會員等級等特征類數據。以便我們看到整體體驗水平有所變化時，能具體的分析出是哪個群體的變化導致。

系統層：構建體驗管理系統，承載體驗數據，提效體驗運營。

圖3. 體驗監測管理系統界面截圖

體驗監測管理體系的中間層重點在于系統的建設。這主要是因為：

首先，體驗管理系統是體驗數據的承載系統。單獨一期的體驗數據采集因為缺少對比的基準，所以參考意義不大，我們需要長期的采集體驗數據，并進行不同時間的體驗水平對比，這樣才能及時有效的發現體驗水平的變化，找到需要重點提升體驗的用戶群體、產品模塊或服務環節。

而長期的數據采集及分析需要耗費較大的人力成本，且工作重復性較高，數據的人工分析也容易出現失誤，因此，通過系統來完成數據的自動采集、數據的自動分析、數據的自動診斷，不僅能及時且長期的采集體驗數據，而且能有效的節省人力成本，減少人工計算的失誤。

其次，體驗管理系統是體驗運營工作的主要輔助工具。體驗數據的監測分析診斷只是基礎，依據監測分析診斷的結果如何能有效的促進產品或服務體驗提升才是體驗管理的最終目的，圍繞用戶體驗提升所要做的運營工作還有很多，比如產品/服務體驗問題的優化跟蹤，團隊/公司體驗文化的建設等。為了能高效的完成各方面的體驗運營工作， 我們依然需要借助系統的能力。

因此，體現管理系統的建設在體驗管理體系的構建工作中是非常重要的一部分內容。

運營層：構建運營機制，分析體驗數據，管理體驗問題，維護體驗用戶，建設體驗文化

圖4. 體驗監測管理相關運營產出

體驗運營主要是指圍繞用戶體驗所進行的人工干預工作的總稱。我們的日常運營工作主要包含體驗數據分析、體驗問題管理、體驗用戶維護和體驗文化建設四個方面。

體驗數據分析主要是對體驗數據結果進行統計整理跟蹤以及綜合性的分析，比如結合主觀數據及客觀數據來綜合評估特定功能或服務的體驗情況；并及時將體驗數據分析結果同步給對應功能/服務的責任團隊，協助其分析體驗水平的變化。

體驗問題管理主要是對體驗問題的分析和優化。體驗數據的監測可以讓我們更及時的發現體驗上的問題，但單純的發現問題僅僅是開始，我們需要聯合相應的責任團隊一起對問題進行分析優化，在這過程中經常需要我們通過快速的調研來驗證問題，評估問題的嚴重性，找到問題的解決方案，同時需要推動或協助責任團隊完成優化方案，跟進優化進度和效果。

體驗用戶維護主要是對產品/服務典型用戶群體或社區的日常管理和活動組織。主要是為了能及時的獲取產品/服務方面的體驗情況，及時了解產品/服務創新方案的用戶態度評價，讓用戶更深入的參與到產品/服務的設計開發過程中，引導用戶為產品/服務的迭代創新貢獻優秀創意。

體驗文化建設主要是通過體驗數據分析結果/體驗專項研究結果傳播，體驗問題協同機制構建，體驗活動組織，體驗考核機制創建等方式不斷培養各團隊及時關注體驗水平的意識，營造各團隊積極推動體驗優化的氛圍，激勵各團隊推行體驗優化/體驗創新的主動性。

四、體驗管理的趨勢展望

隨著越來越多的公司開始進入體驗管理的行列，勢必會促進體驗管理不斷的發展變化。結合對現有體驗管理工作現狀的觀察，我認為可以用三個關鍵詞來概括體驗管理將來可能的三個發展方向。

精細。體驗涉及用戶與公司接觸的方方面面，時時刻刻，體驗管理也將圍繞用戶的全部場景，完整鏈路觸點，以及用戶的整個生命周期來進行更加精細化的數據采集、分析和優化，全方位的監測、診斷和管理。

多元。從宏觀行業到微觀數據都將變得更多元。未來的體驗管理不僅僅只是用戶體驗部門的工作重點，也將作為抓手逐漸成為整個企業從上至下的重點工作方向。體驗管理不再只是互聯網企業的專屬，也將逐步滲透至各行業的企業公司。不同行業、不同企業的產品或服務類型多種多樣，用戶與產品或服務的交互觸點、場景也各不相同，為了滿足不同行業、不同企業的多樣化需求，體驗數據的采集渠道和場景也將結合多樣的觸點場景變得更多元，體驗數據的采集維度也將變得更豐富，分析數據的方式方法以及體驗管理工具的功能類型也將在不同行業/不同企業中呈現出個性化、多元化的趨勢。

智能。技術的進步和發展也勢必會帶來體驗管理能力的不斷提升，體驗數據的采集、體驗水平的分析診斷、體驗問題的優化管理將借助新技術而變得更智能、更高效。體驗數據的采集將在用戶無意識中完成，且能兼顧體驗數據的多種維度，使體驗場景的還原更便捷，更真實；體驗水平的分析診斷將結合更多維的數據來進行綜合性的自動化診斷，并提供切實可行的優化方案，使體驗問題的暴露更準確，更人性；體驗問題的分發、進度跟蹤、效果評估等管理工作的自動化程度更高，使體驗優化的效率更高。

轉載請注明：學UI網》關于體驗管理的幾點思考

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

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

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

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

一、建立原子化組件思維

1、什么是原子化組件思維？

原子思維：原子最早是由英國化學家/物理學家約翰·道爾頓提出的，繼承古希臘原子論和牛頓微粒說，提出的原子論?；瘜W元素由不可分的微粒（原子）構成的，它在一切化學變化中是不可再分的最小單位。

原子理論同理適用于我們的設計系統中：

頁面是由原子（最小單位設計元素）、分子（基礎控件）、組織（基礎功能組件）、模版（業務定制組件）、頁面構成。

原子：原子是最基本和最小顆粒度的單位，無法進一步細分的UI元素，在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。

分子：原子排列組合構成了分子，在界面中多以「設計控件」的形式存在，形成相對簡單的UI組件的原子的集合。例如：導航欄、標簽欄、搜索框、按鈕、彈窗等。

組織：原子、分子排列組合形成界面離散部分的相對復雜的組件，在界面中多以「基礎組件」的形式存在，例如：內容卡片、表單頁面。

模版：原子、分子、組織按照業務需求排列組合構成了模板，在界面中也稱為「業務組件」，例如：篩選列表。

頁面：按照一定規則后排列組合而成的滿足業務需求且包含品牌屬性的一個完整「頁面」。

2、組件化的內核

設計組件不是把UI元素堆積到一個地方，然后各處集中引用這么簡單。組件化的工作方式信奉獨立、完整、自由組合。

目標就是盡可能把設計與開發中的元素獨立化，使它具備完整的局部功能，通過特定規則自由組合來構成整個產品。

獨立：一個組件就是一個獨立的產品：在制定組件的過程中要考慮到組件應用中的各個場景，降低、拆解組件中的耦合度，同時把一個組件當作一個獨立產品來設計 考慮空狀態、極端情況、尺寸變化 盡可能靈活適應各種使用場景

完整：一個完整組件構成包含三種屬性：

A.響應狀態-包含組件庫中原子的大小類型、分子的響應和組合方式、多狀態的交互；

B.行為狀態-組件中元素的與背景的組合方式、組件中不同組件拼合的層級關系、組件與用戶行為的交互；

C .數據狀態-包含組件不同的狀態枚舉：如提交中、審核中、已結束狀態。

自由：每個組件都是相互獨立的，組件間的組合方式靈活且多樣的。靈活多變的同時也要遵循統一的柵格尺寸與表達約束，最大程度上保證頁面呈現出一種有秩序的美。

二、建立設計說明指南

1、什么是設計說明指南？

針對企業級產品反復出現的設計問題，設計模式給出一般性的解決方案，實現跨應用交互一致性的有效融合。減少了不必要的認知成本，提升交互確定性和設計的效率。

考慮到需要適應各種獨特的業務場景，模式的規則具有一定的靈活性，萬變不離其宗，通過了解設計模式的構建邏輯，可以衍生出更具場景特性的解決方案。

設計模式包含以下內容：

原則：基于價值觀衍生出的一般設計技巧，包括如何高效組織信息、幫助建立用戶與界面的互動等原則性要求。

全局規則：通過規范常見的互動行為，包括導航、數據錄入、數據展示、反饋、操作、幫助等，呈現組件元素的標準用法和彈性空間，并了解如何將他們組織在一起來創建良好的體驗。

構圖模版：我們總結了表單、列表、數據可視化、詳情頁、工作臺、異常、結果、編輯器幾類頁面的典型解決方案，介紹每類頁面的設計目標、設計技巧以及典型頁面內容等，幫助設計師和產品經理可以快速開始構建界面。

2、服務于誰

A.設計師：交互設計時，整體流程框架或分支流程可快速復用。

B.產品經理：原型設計時，可復制并套用現有交互模式進行原型繪制，或直接引用進行開發。

C.研發人員：可作為標準交互流程的參照，統一相似流程的代碼設計方式。

3、有什么內容

前言：對這次建立設計說明指南的目的性說明；

設計概覽：描述這次調整的范圍的維度；

設計原則：基于哪些設計原則輸出設計內容；

構圖模版：頁面的構圖模版、組合控件和組合范圍；

全局規則：全局范圍出發，除了頁面構圖以外，涉及到共用組件，制定的規范；

組件：基礎控件和組織控件，甚至涉及到業務定制控件（模版）。

4、設計說明指南的輸出

《GM Design》交互設計說明指南，涉及幾十個產品線的成百上千個的功能，業務體量和復雜度極大，為了讓整體SaaS產品具備簡潔高效的一致性交互體驗，設計說明指南是設計過程中問題解決的核心方法，也是構建整個平臺或框架所要遵循的基礎和標準。

設計模式輔助設計者將業務引向實踐，并使設計更具有一般性、簡單性、一致性及穩定性。同時，設計者也可結合不同業務情境，實現模式在一般性和特殊性的銜接并作要素與結構的調整。

最后

最后，為大家提供一份詳細的GM Design交互設計文檔，里面包含設計概覽、設計原則、構圖模版、全局規則、組件等多類B端后臺交互設計內容。

完整版交互設計說明文檔-體驗鏈接：https://lanhuapp.com/url/947cJ

大家可以在公眾號后臺回復文檔，獲取訪問密碼。

慢慢來比較快，希望對你有幫助！

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》B端后臺產品的設計細節-設計說明指南篇

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

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

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

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

今天會跟大家分享一些被廣泛運用的界面設計規則，它們能快速使得你的界面設計更干凈、高效。

1. 文案要易于理解

用更容易讓用戶理解（說人話）的引導文案，提升使用體驗。

（彩云注：下面2個案例中，左側的“購物車”和“庫存2”太過于術語化，右側的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個點經常容易被忽略。）

2. 垂直對齊易于掃視

良好的對齊方式，可以增強內容的可讀性，讓用戶的視線更容易掃描。

（彩云注：左側的“之”字形視動線比較難閱讀，且不夠專業；右側的垂直對齊增強了可讀性，也讓設計看起來更加統一，能夠快速的提升設計細節。）

3.給選項加圖標

使用圖標、動畫作為標簽，有助于更輕松地理解內容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。

（彩云注：左側的導航相較于右邊，很難第一時間準確識別它的意思，增加圖標后不僅更快看清，視覺上也更加美觀。）

4. 大段內容要拆分

大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和UI，應該注意拆分內容，并使用項目符號突出關鍵點，利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時，提煉要點有助于提升用戶體驗，這樣也不至于讓用戶直接忽略。

（彩云注：左側的大段文字我想應該沒多少人會去閱讀，右邊的至少還能在短時間內快速看看幾個關鍵詞。）

5. 流程增加進度條

進度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請流程等場景使用這種格式能很好的簡化流程。

（彩云注：左邊的表單UI不方便跟蹤進度和流程，右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。）

6.錯誤提示要明確

錯誤提示一定要明確，易于理解，方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤，用戶就會感到很失望，可能會放棄接下來的流程。在UI設計時，在正確的地方用通俗的語言說明問題，以避免歧義，這一點非常重要。

（彩云注：我常常遇到各種出錯，但出現的提示太過于術語化，也沒有提示在正確的地方讓我非常苦惱。）

7.按鈕要正確合理

從菲茨定律（Fitt’s Law）中我們應該知道，目標區域的距離和外觀與所采取的行動成正比。因此，為了將注意力集中在轉化按鈕上，按鈕應該準確放置在合理位置上。此外，按鈕的大小應該易于點擊，避免用戶因嘗試點擊時不方便而流失。

（彩云注：左側的按鈕不在正確的決策位置以及按鈕太小，右側的按鈕簡潔明了并且符合用戶的心理預期，能夠讓用戶更快決策并點擊。）

8. 用好色彩心理學

顏色是UI中不可缺少的部分，它能影響用戶使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。

（彩云注：左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期，右側的紅色按鈕對用戶的心理預期有危險和警告，用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。）

9. 單列更易保持關注度

用單列展示內容，能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時，將所有信息垂直對齊時，能更好的保持用戶關注度。

10. 優先社交媒體賬號登錄

當用戶準備登錄或注冊你平臺的時候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號，能很好地增加點擊率。

11. 選擇狀態要清晰

在用戶做選擇的時候，需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。

（彩云注：左側的問題在于選中狀態不清晰且選項的顏色過于豐富，右側的選中狀態清晰且選項顏色只有2種，選中和非選中，體驗會更好。）

12. 用留白分組

如果想給信息分組，使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素，空白能讓UI看起來更加干凈和優雅。用線分組的情況適用于類似Twitter、Medium之類的重內容平臺等場景。

13. 控件樣式保持一致

保持設計的一致性，能夠降低功能復雜度并讓用戶更快決策，一致性設計讓用戶更快熟悉操作而不需要太多思考。（彩云注：左側的選項圓角不一致，會讓用戶思考為什么這里會有不同，而右側的一致性選項設計，能讓用戶忽略內容外的干擾。）

14. 搜索中的占位符要用好

在搜索輸入欄添加適當的占位符，提示用戶可以在平臺上搜索和找到的內容，這樣可以提供用戶參考并帶來更好的用戶體驗。

總結

以上這些就是在設計數字產品體驗時應該遵循的14個基本規則，這些點雖然基礎，但卻經常被人忽略，我在星球中幫大家看作品集時發現上面提到的這些點出現的是最多的，希望大家可以把這些知識運用到自己的設計中，提升UI產品體驗。

原文：https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
作者：Ayushi Verma
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）

希望對大家有幫助，歡迎轉發分享~

原文地址：彩云譯設計（公眾號）
作者：彩云Sky
轉載請注明：學UI網》想要優化好UI作品，這14個設計細節一定要檢查到位！

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

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

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

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

1、菲茨定律

選中目標所需時間與移動距離長短和目標面積大小有關。（與距離負相關，與面積正相關）

現實中的應用

在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準，標志設計得更大、更容易接近。

設計應用

▲ 左側頁面的CTA按鈕很小，沒有突出顯示，與表單的其他元素基本上沒有區分；右側頁面CTA按鈕尺寸很大，能讓用戶清晰識別。

2、?？硕?/strong>

決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。

 

現實中的應用

與餐廳相比，快餐店的菜單選項有限。因此顧客點餐速度更快，門店提供的服務也更快。

 

設計應用

▲ 在Whatsapp上轉發消息時，會在“最近聊天”列表上方看到“經常聯系”的3個好友。這對用戶來說是一種簡單的交互，幫助用戶節省操作時間。

 

3、共域定律

被一個顯而易見的邊框包圍起來的多個元素，被視為一個群組。(從屬于格式塔理論)

 

現實中的應用

在服裝店中，衣服按照類型被分到不同的架子上來展示，即使對這家服裝店一無所知，顧客也會將一個貨架內的商品關聯成相似的東西。

 

設計應用

▲ 過濾器被封閉在產品頁面之外的單獨區域中，因此可以清楚地識別左右兩部分的差異。

 

4、雅各布定律

用戶將大部分時間花在別人家的網站(產品)上，而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的使用方式。

 

現實中的應用

假設家中的陽臺是一扇推拉門，我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門，我們可能會下意識地先去推門。

 

設計應用

▲ 以上是國外知名的電商網站導航欄設計，這幾個網站導航欄中顯示的信息及其結構都非常相似：左側是品牌標志，中間為搜索欄，右側為其他選項(購物車/個人賬戶)。

 

5、系列位置效應

用戶更容易記住系列中出現的第一項(首因效應)和最后一項(近因效應)。

 

現實中的應用

我們通常更容易記住某個電話號碼的前4位或后3位，這條法則也是銀行卡號被分成4組數字的原因。

 

設計應用

▲ 在亞馬遜主頁上，網站的第一部分總是顯示最重要的內容：導航包含logo、搜索和其他重要功能；輪播圖通過圖形設計吸引用戶的目光，引導新的交易或優惠。

 

6、馮·雷斯托夫效應

又稱隔離效應。當存在多個相似物體時，與眾不同的物體最容易被記住。

 

現實中的應用

在商場購物時，相較于普通裝飾的門店，我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

 

設計應用

▲ App上有新消息時，會在圖標上用紅點顯示，這樣的提示更清晰和突出，從而吸引用戶的注意力，引導用戶點擊并查看消息。

 

7、審美可用性效應

用戶通常認為漂亮的設計更易用。

 

現實中的應用

當參觀汽車展廳時，我們通常會對汽車精美的展示感到驚嘆，并立即對這個品牌產生積極的印象。

 

設計應用

▲ 在愛彼迎上，我們住在陌生人的房子里，因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網站時，我們會下意識地信任這個產品，也確保了用戶對品牌的信任。

 

8、峰終定律

人們評論體驗優劣，大多基于峰值和結束時的感受，而不是所有環節的平均值。

 

現實中的應用

在足球比賽中，整場的觀看體驗將根據比賽結束(誰獲勝)和比賽高潮（誰進球最多/比賽中最激動人心的時刻)來判斷。

 

設計應用

▲ 在夜晚非常饑餓的時候，我們使用訂餐App選擇食物時，卻被告知付款失敗。這時候App界面設計的再好看也無關緊要，訂餐失敗就是從這次體驗中收獲的結果。

 

 

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》用戶體驗設計法則應該怎么用？來看看這些應用原理！

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

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

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

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