那些關注用戶體驗的人們經常問我一個問題：什么是B端的用戶體驗？它與C端的用戶體驗有何不同？作為一名過去5年多主要從事B端IT產品的設計師，在這里給大家講述一些我的想法。

首先，B端產品通常有2種類型：企業內部產品（Internal Solutions）和企業對企業的服務產品（B2B）。

企業內部產品的用戶體驗設計有一些獨特性：

 

你的工作（可能）永遠與你的作品集無緣

很遺憾，幾乎所有企業內部產品或項目都被嚴格的保密協議（NDA）保護著。

絕大多B端項目都是為特定用戶提供的專門內部流程。這意味著除了那些每天盯著它用的用戶，其他任何人都可能不會看到你的設計。即使你設法獲得了將其放入自己作品集的權限，也需要抹掉所有敏感的數據才行。

不過幸運的是，大多數有足夠能力來構建自己的定制IT解決方案的公司通常規模很大，而且它們的品牌可能帶有足夠的“影響力”，這樣，項目身價得以抬高，也能讓設計師進入面試的下一步流程。

 

測試對象雖然意愿很高，但總是很忙

設計企業內部所用產品的優點：你的未來用戶將會是你的同事們。因此，在進行可用性研究時，你無需擔憂任何層面的法律問題。另外，由于大多數內部項目都是為了優化和改進現有的工作流程，你的用戶往往會非常愿意配合你的調研工作。因為設計不當的產品讓他們的工作飽受折磨，因此盡早獲得反饋對他們來說是最有利的。

但這其中的弊端是，由于你的同事們需要平衡全職工作，你很可能無法占用他們的寶貴時間。如果你能解決這個問題，他們通常會提供比您預期更多的反饋。

 

 

關于B2B的一些潛規則

您可能無法（完全）滿足最終用戶

對于C端產品，如果太丑或不好用，消費者可以拒絕使用。而B端產品即使學習成本比較高，但企業仍然可以“命令”所有員工學習這些用于開展業務的專用軟件。

B2B產品最終將出售給業務決策者，然后再推給（最終）用戶。他們更關心的是量化提升效率（efficiency）和安全性（security），同時預防錯誤（preventing errors）。大多數組織都在尋找一種解決方案來替代和/或優化現有流程。

這并不是說企業軟件不應以用戶友好為目標，但通常情況下，只要能夠實現某些被企業視為至關重要的目標，其他能省則省。對底線（bottom line）的影響有時會成為最重要的因素。

全球各大企業的用戶體驗設計領導者仍在爭奪一席之地，以證明優質設計的價值。不幸的是，許多企業的用戶體驗設計師只能在滿足業務目標、技術要求和用戶需求之間無奈徘徊。

像在大多數項目中一樣，在企業領域里，如果可以證明更好的用戶體驗可以量化地提升生產率，比如可以節省金錢，這樣你就有了一個絕佳的機會和挑戰。

 

被“鯨魚用戶”左右

如果你在B2B領域工作，可能會很熟悉“鯨魚用戶（whales）”的概念。通常，他們是帶給我們最多收入的客戶，因此在某個特定產品的路線圖中擁有極大的影響力。由于較少的鯨魚用戶簡化了需求收集和確認過程，有時你的工作會非常順暢，但不幸的是，這也可能導致你忽視掉很大一部分用戶群體的意見。

我們見過諸多“被需要”的功能看起來并不適合大多數工作流程的案例（因為這是鯨魚用戶的特性）。通常，決策只是為了“去執行”，因為銷售團隊已經在下一個版本中承諾了這一點，而這個核心客戶占產品收入的40％。這通常會使得產品對于其他用戶而言就有些隨機且不合邏輯了。

通常而言，在設計師進入管理層之前，他們很難影響到銷售團隊等強大的利益相關者的決策。潛在的利益沖突無疑是需要整個設計團隊共同去面對的，大家需要平衡產品的長期愿景和立竿見影的“快速制勝”二者之間的沖突，以便為產品提供可拓展的設計和構建道路。

 

企業總是在舊版系統上運行

幾乎所有財富500強的公司都是通過并購而成長為龐然大物的。

每一次的并購，都會將一個完全不同的系統和工作流程修補到現有的系統和工作流程中。很多開發于90年代的軟件仍在諸多大型公司中運行。盡管從概念上看，“整合一切（consolidate everything）”似乎很容易，但是協調數據庫和系統的過程著實很繁瑣，且需要足夠的時間。

B端用戶體驗的大部分工作是將用戶從一套舊版（有時是手動）的工作流程中解放出來的艱巨工作。這涉及到對用戶目標及多個系統的深入了解，需要我們列出規劃，識別冗余和協同效應，然后將其與邊緣案例相結合，以檢驗它產出的結果是否與當前操作模式的產出一致（如果不能優化的話）。

盡管過程并非總是如此艱難，B端軟件依舊比C端復雜得多，因為即使其概念是“從0開始做新系統”，其數據還是全部來自于一堆與之配套的舊系統。在系統級別上思考流程、提出正確的問題并有效記錄文檔的能力是此類項目中最有用的技能。

我不是開發人員，所以我不知道我從Google里找的這張圖片是否是能夠準確展示典型的后端體系結構。

我所知道的是，對于每個項目來說，開發人員都會創建一個外觀相似的圖表，該圖表展示了數據的來源和去向，它非常復雜，并且在提取，存儲和推送數據時可能受到一系列限制。

 

條款和規則

大多數企業或組織需要遵循一套嚴格的政策法規，并且通常受到各種管理要求的約束。

常見的例子包括：法律/隱私要求（例如GDPR），國際化要求（例如日期格式，語言），無障礙（例如WCAG＆ARIA），安全性等等。

這些規則中的每一條都來自于某領域的專家、某類別的檢查清單（checklist）抑或是一系列更為模糊情景下的最佳實踐（這些實踐基于特定的方案和用例）。C端APP監管日漸常規化，同時，由于諸多企業或組織掌握的敏感數據極具貨幣價值，其受到的監管和審查也在不斷增加。

當然，這個問題的答案顯而易見，你的確切問題是存在第三方解決方案的，但是由于某些規則或規定，你可能根本無法使用它。

由于必須滿足很多這樣或那樣的標準，對于用戶來說，最終的設計往往不太理想，雖然乍一看可能并不明顯，但這也是歷史上許多政府軟件的設計看起來很蠢的原因之一。

 

慢慢改進

與上面的觀點類似，B端產品用戶的獨特之處在于他們對變化的抗拒心理。這意味著你需要認真思考工作流程改變后的結果，諸如使用不同的顏色，或是調整頁面內某個按鈕的位置等簡單變化。

我們甚至還沒有談及信息架構。當你開始做信息架構時，卡片分類研究可能會告訴我們現有的導航設計是完全錯誤的，或是導航里的某些分類實際上應該嵌套到其他地方。不過你很快就會發現，當實際執行這些變化時，你將面臨巨大壓力。

知道何時依賴自己的研究和專業知識，何時推進，何時放慢步伐是很關鍵的，這樣你才可以避免疏遠過多的用戶。畢竟對于這些用戶來說，過去幾年的工作流程已經根深蒂固，他們需要時間、資源和指導來學習或重新學習這些系統的使用。

盡管他們可能會拒絕改變，但這絕對不代表我們作為UX專業人士就無法引領他們擁抱變化，我們要做的便是了解他們的痛點并在設計時時刻考慮到用戶的最大利益。

 

信息密度

許多舊版的B端app產品都有一個共同點，那就是它們的信息密度非常高。

理想的解決方案也許是隱藏所有不必要的信息，僅顯示剛需的信息，但是“隱藏掉錯誤內容”的風險可能非常巨大，以致于不得不將其保留在不斷增加的的實體屏幕上。

這就容易導致打包的屏幕設計極大增加了用戶的認知負擔。而這些負擔之所以被用戶“接受”，就是因為他們必須且只能“學習”如何使用該軟件來完成工作任務。

此外，對于許多管理或監控類的產品，用并別模式查看信息進行比較和參考是非常重要的。復雜的非線性（Complex non-linear）的工作流使得界面設計更具挑戰性，因為許多選項都需要既可隨時訪問又不能妨礙其他操作。

有個很好的例子：為什么Bloomberg（上圖）的UI看起來比Robinhood（下圖）復雜1000倍？

結論便是，B端產品的界面里，需要犧牲留白空間以展示更多信息的情況并不少見，因為用戶經常需要查看更多信息以便完成更復雜的任務。

 

你的機遇

隨著公司或組織越來越依賴技術，B端產品的用戶體驗設計將成為許多公司的主要競爭優勢。

如果你具有擁抱復雜性、平衡多個利益相關方觀點，并在約束內進行創新的能力，你便能輕而易舉的殺入B端軟件設計領域。

隨著機器學習等諸多振奮人心的新技術出現，各種業務會帶著其龐大而雜亂的數據庫排隊等候。UX將站在如何產生有價值的見解的最前沿，以便弄清用戶想要從這些數據中獲取什么以及如何對其進行操作和訪問。

雖然在很長一段時間里，dribbble（追波）上的精美視覺設計仍將占有一席之地，但更繁重的任務還會落在那些不起眼的B端設計師身上：比如設計電子表格、數據集、草圖原型、投入調查以及數小時與用戶和利益相關者的交談和測試。

最終出現在用戶面前的內容可能并不完全整潔和簡單，但請你相信，在成為備受矚目的明星B端產品前，其每一處基準點都經過了UX設計師的嚴格審查。我們的用戶已經全力以赴地使用這些產品努力工作，我們的產品也通過清除一些障礙來減輕用戶的負擔，這已經很不錯了。

翻譯：April.H  審校：戴貓子 |   UXRen翻譯組 #366譯文
作者：Yichen He
原文標題：《Designing for enterprise vs. designing for consumers》

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

Part 1

————————

信息容器的概念

信息容器是承載信息的載體，位于內容層。要理解信息容器的概念，首先要理解界面中的層級關系。一個界面除了豎直方向和水平方向維度，還有縱深維度。

從底層（遠離用戶）到頂層（靠近用戶），基本上可以分為以下幾層：

1. 背景層

2. 信息層

3. 全局操作層（各種常駐于屏幕的bar、懸浮按鈕等）

4. 浮出層（模態類型的浮出層還需要有蒙版進行隔斷）

   
   

本文要討論的“信息容器”，指的是信息層上，裝載信息的載體。信息的類型多種多樣，可以是文字、圖片、視頻、各種操作控件等。

Part 2

————————

信息容器的常見類型

常見的信息容器主要有2大類：列表和卡片。

在整理案例的時候，我不禁產生了一個疑問，到底什么是列表，什么是卡片？如何界定和區分兩者？這個問題乍一聽有點無厘頭，列表不就是列表嗎，多個布局一致的狹長單元組合在一起，就形成了列表。那么什么是卡片呢？和屏幕兩側保持一定間距，帶圓角的就是卡片嗎？

我們不妨先看看下圖案例：

2.1 列表和卡片該如何界定？

為什么類似的布局形式，上圖中，圖1給人感覺是列表，圖2給人感覺是卡片，圖3既像列表又像卡片？

從內容層面來說，包含的信息類型有：文字、圖標/圖片、按鈕。幾乎沒有太大區別。

是什么導致我們觀感上的不同呢？

電商案例也許可以給出答案。

從電商產品的商品列表頁中可以看到，用戶可以自主選擇兩種不同的商品展示模式：列表模式和卡片模式。

這兩種模式幾乎可以對應“列表”和“卡片”兩種信息容器樣式。完全一致的信息量：主圖、標題信息、價格信息、輔助信息，相似的展示效率（一屏展示約4.5個商品），不同的信息容器展示形式給人不同的感覺。

單純從信息層面或者視覺層面都不能界定列表和卡片，如果多維度疊加限定又太繁瑣，因此本文給出的列表和卡片直接的區別界定是：可以自主定位關鍵線索，規劃視覺瀏覽動線。如果視覺瀏覽大方向是豎直的，那么就歸入列表范疇，瀏覽動線不是豎直而是折線的，都算在卡片范疇。

2.2 常見的信息容器分類：

除了上面說的，最常見的兩類信息容器：列表和卡片之外，還有另外兩種形式，分別是：無容器和復合容器。

這些容器具體有哪些特點，我們一一來看。

Part 3

————————

列表

列表的定義：將結構一致的信息單元在豎直方向上鋪陳下去，形成的信息集合。

不同場景要呈現的信息側重不同。

舉例幾種常見的列表形式：

1. 用戶/消息列表

2. 圖文列表

3. 功能列表

4. “卡片型”列表

3.1 用戶/消息列表

用戶/消息列表的內容結構很清晰，頭像+身份+內容提要+輔助信息。

圖片天然地比文字更具有吸引力，視覺上的優先級排序是頭像＞身份＞內容提要＞輔助信息。

當然用戶可以很方便地選擇關注的對象是圖片還是文字，這體現了列表的優越性，瀏覽動線豎直，可以方便用戶根據自己想要的索引快速定位。

這里值得討論的是頭像用方形還是圓形的問題，相信大家都想到過這個問題，同樣是社交產品，qq是圓頭，微信是方頭，這里邊有什么原因呢？

本文嘗試分析一下，僅是個人意見，歡迎討論。

按照理論，圓頭親切的形狀感知更加適合輕松基調的產品，方頭嚴謹的形狀感知更加適合嚴肅基調的產品。這解釋了電商類型產品（淘寶、京東）的信息通知一般都是圓頭的，匹配輕松愉悅的網購體驗，而金融類產品（支付寶）多是方頭。對于同是熟人社交類產品的微信和qq來說，qq用戶層年齡偏低，屬性相對更加活躍，更加輕松的圓頭可能更適合此類用戶。

以iOS為例，當用戶向左滑動列表時，呼出針對該列表單元的操作。具體列表對應具體操作，操作項數量不同。

方案A：

優點：操作底板寬度適應文案，不會出現空間局促的現象。

缺點：當文案字段長時，列表被推出屏幕外的內容較多，當用戶操作分心時，可能會忘記正在操作的對象，雖然這種情況極少發生。

方案B：

優點：操作底板固定，文案折行規則明確，既不會造空間擁擠，被擠出屏幕外的列表區域可控。

方案C：

優點：搭配圖標，視覺更豐富。

缺點：圖標占據了一定高度，導致文案無法折行，列表被推出屏幕外的內容較多，與方案A類似。

綜上，個人認為方案B是最合理的，對于文案長度的寬容度高，即便文案較長，也可以保證視覺和諧，并保留較多列表內容。

在用色策略上，使用的是為大眾所接受的“語義色”，一些具體的顏色在長期經驗積累中形成了固定的語義。

當用戶觸發了帶有一定破壞性的操作時，需要用戶進行二次確認。

并不是所有情況都需要二次確認，二次確認的樣式也有多種。

同樣都是模態視圖，要表達的信息也相似，都是要求用戶進行選擇，為什么有些產品選擇將對話框居中，有些產品選擇將對話框放在底部？這里涉及到關于模態視圖的相關知識點，本篇文章旨在討論信息層面的內容，模態視圖涉及到了浮出層的內容，將在下篇文章中進行詳細探討。本篇文章不做過多延展。

3.2 圖文列表

信息流產品一般是由圖片+重點文案+標簽（可有可無）構成。

不同性質的產品想要突出的重點不同，根據內容的重要性權重來分配視覺占比。

從上方幾個例子中我們可以看到：

在圖文比例從左到右依次提升；

圖文布局案例1-3使用了左文右圖的方式，案例4-7使用了左圖右文的方式。

搞清楚如何圖文布局和設置圖文比例，就基本解決了資訊流頁面最關鍵的問題。

資訊列表或稱feed流，主要根據用戶喜好定向推送內容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息，用戶主動反饋的信息精度更高，用戶不惜花費更多操作成本來提示產品，對內容不感興趣。

從視覺上說：

1、提交反饋的入口（小而淺的icon）都不明顯，有些產品用“更多”來提示用戶，有些產品用更加負面的“關閉”來提示用戶。當用戶對內容產生較為強烈的反感時，才會注意到屏蔽入口。常規瀏覽時，該圖標不會影響用戶注意力。

2、反饋形式采用模態對話框，用戶需要選擇具體操作，是屏蔽內容或作者、還是舉報或不感興趣。

3、對話框是否有指向性：從表意明確的角度上來說，帶有箭頭的氣泡更有利于用戶定位對象。

從交互上說：

反饋入口熱區較小，容易誤觸，大多數情況下，用戶不會注意和點擊該圖標，用戶是以瀏覽為主要行為。

3.3 功能列表

列表索引一般還是定位文字為主要形式，不同用戶的認知水平不同，圖標表意始終是一大難點，多用為輔助記憶或單純提升視覺美觀。圖標雖然是體現設計風格的重點，但是在具體情境下，如設置頁，用戶更加在意快速找到自己要找的內容，多度的圖標樣式，實際上會折損用戶的檢索效率。

一般功能頁面或放置許多功能，常常會超過十幾項，這種情境下，檢索效率低下是一個痛點。

如何提高檢索效率？—— 分組

分組給用戶提供了認知線索，根據格式塔原則，用戶總是傾向于把距離近的、樣式統一的元素歸位同類。

毫無分組顯然對于檢索是不利的，用戶需要逐一瀏覽，該情況適用于列表項無法分組時，如果有分組條件，務必分組，幫用戶節約篩選成本。

UI界面中，列表的分割方式常見的有以下3種：

1. 線條分割

2. 塊面分割

3. 間距分割

3.4 “卡片型”列表

在我們的固有觀念里，大圓角，不通欄，有投影的形象就是卡片。

這種樣式也越來越盛行，許多產品嘗試將列表也用“卡片化”進行包裝。

雖然是相當細節的點，但是精細化處理之后的結果就立刻會與批量化處理的結果拉開差距。

產品級的風格統一來源于點滴細節。

Part 4

————————

卡片

卡片的類型繁多：單列大卡片、泳道、內容流（兩列網格、瀑布流）、宮格

4.1 大卡片

從內容展示效率上來講，單張大卡片就占據占據屏幕（劉海屏）超出一半的高度，用戶需要不斷滑動屏幕瀏覽下方內容，操作成本較高。大卡片形式對內容本身，如圖片的質量要求很高。這種模式常見于圖片社區或垂類電商產品，圖片社區（如躺平）本身較為小眾、即便是UGC（用戶產生內容）單元，用戶上傳的圖片素材平均水平也較高，垂類電商（如Nike）圖片品質由編輯控制，質量高且穩定。以上類型產品不以量吸引用戶，用戶往往更加在意內容本身是否優質。用戶沒有帶著明確的目標，心智更加類似于瀏覽雜志。產品提供什么內容，就進行瀏覽。從上方案例可見，除了微信讀書之外的3款產品首頁都沒有突出搜索功能，而是以信息流呈現為主。

與列表分割一致，卡片也有對應分割方式。

大卡片占據屏幕面積大，理論上大卡片的內容質量是經審查的。部分產品不存在大卡片容器的交互，點擊卡片直接進入詳情頁。部分產品通過比較低調的方式向用戶收集對于內容的意見。如微信讀書長按卡片，可以選擇不再顯示該卡片內容，產品收集反饋，對于用戶喜好的描述可以進一步具象準確。長按不是一個高頻手勢，用戶觸發該手勢往往是試探性的，代表用戶確實對于內容有意見要傳達。躺平使用了簡約三小點樣式的“更多”圖標來收納不常用的收藏和舉報操作。

4.2 泳道

何為泳道？顧名思義，常見的滑動手勢是上下方向滑動，但有時也會出現橫向滑動的情況。一系列對象在一條橫向軌道內左右滑動，該類型的形式組合在一起，就好比泳道賽道一般。

可以橫向滑動以查看內容的呈現形式，稱為“泳道”。泳道可以有多種形式。

停止位置隨機：

內容與手勢相關度高，比較自由，但停止位置隨機，不能保證停下后用戶能完美看到當前卡片的所有信息，需要用戶微調卡片位置。

停止位置固定：

根據用戶滑動速率，模擬物理慣性和摩擦，判斷最終展示哪張卡片，并將卡片呈現在屏幕中部，確保卡片上的信息都可以讀取。這種交互更加合理，給滑動設置卡點，類似banner效果。

4.3 雙列卡片

雙列卡片可以看成是大卡片（單列）的另一種表現形式。這種形式更加提高了空間利用率，對于單一信息展示更加克制。平衡了效率和效果，是電商、圖片社區、視頻等產品類型的首選表現手法。

雙列卡片可以細分為兩大類：

卡片流（對齊）、瀑布流

卡片對齊：

優點：規整統一，視覺動線清晰，瀏覽舒適。

缺點：對主圖尺寸要求高，確定的比例會對商品展示有一定局限。

瀑布流：

優點：圖片尺寸寬容度高，滿足一定比值區間即可。保證商品的展示完整度。錯落的布局容易形成節奏。

缺點：不容易進行比較，若要進行圖片間的對比，比較困難，視覺動線混亂。

兩列式的卡片布局需要注意內容層與背景層的區分。

大多數產品的背景層是淺灰色，內容層是白色，色差可以建立區分。部分產品背景層是白色，或者說取消了背景層的概念，那么要建立卡片之間的區分，就需要通過間距或者卡片加底色的方式。

個性化推薦模塊對電商產品尤其重要，準確地將用戶可能感興趣的產品推薦出去，可以減少用戶的搜索、篩選步驟，提升購買效率和愉悅感，從而提升用戶對產品的評價。因此，不斷收集用戶的喜好相當重要，盡管各種算法已經讓產品顯得越來越智能，但依舊要給用戶留下提建議的入口。

上文介紹了資訊類產品中，用戶如何給出對于具體信息的反饋，電商類產品原理也大同小異。

從功能上來說，淘寶、閑魚、京東，都是通過用戶手勢（點擊圖標或長按卡片或兩者皆可）來呼出選項，用戶通過選擇來表達意見，從而使推送更精準。

從視覺上來說，淘寶和閑魚的反饋形式類似，都是在卡片上添加一個黑色半透明蒙版，將有限的選項豎直碼放在卡片上，類似小型模態的概念（但是這里不同于嚴格的模態視圖，沒有限定用戶必須要做出選擇，用戶可以直接劃走）。而京東的邏輯不同，使用了傳統阻斷性模態視圖的處理方式，將下方卡片用蒙版遮擋，希望用戶專注于選擇。

從阻斷感上說，京東的阻斷干是最強的，將用戶從原本的瀏覽行為中提取出來，請用戶嚴肅地做出對于當前商品的反饋。這樣收集信息的效率更高。由于選項是盛放在帶有指向性的小氣泡之上，針對性足夠，且延展性好，氣泡的高寬都可以調整，而淘寶和閑魚的處理方式，在極端情況下，如選項超過5項時，所有內容放在卡片之上，空間就很緊湊。

這類操作比較隱晦，可點擊按鈕很不明顯，長按手勢也不常用。同樣是當用戶有明確反饋需求時，才會尋找反饋入口，一般情況下，用戶不會注意到。以用戶常態下的瀏覽行為為最優先。

閑魚的交互做的很細致，蒙版出現采用了水波的形式，用戶抱著要吐槽的心態，這種精致有巧思的小動效在一定程度上可以緩和用戶的煩躁的心理。

除了電商類產品，部分視頻類產品長按卡片也會呼出對應效果。

案例1和案例2，長按卡片，都是出現視頻片段的預覽。效果類似iOS的3Dtouch，在相冊中按壓具體照片即可預覽。而案例3，點擊“更多”圖標，呼出操作。然而選項只有1項，不符合邏輯，單一的選項無法構成“選擇”，這會讓人有點摸不著頭腦。

4.4 宮格/網格

如果把界面看作是一張大網格，不同的內容占據著不同位置、不同面積的頁面區域。

除了我們已經熟悉的“有序”布置，如從上到下依次排列內容（大卡片），或者從左往右依次排列內容（泳道），還有更加靈活多變的排布方式可供選擇。

布局的本質是分配界面面積，用以盛放內容，同時運用面積對比進行突出。除了面積對比的方式外，還有其他方式可以突出關鍵內容。

Part 5

————————

無容器 & 復合容器

無內容的呈現形式比較簡單：內容直接置于背景層之上。減少視覺負擔，內容為主，形式為輔。

復合容器是指超過一種的容器形式的組合，如卡片中包含列表、卡片中包含泳道等。

5.1 無容器

5.2 復合容器

Part 6

————————

組合與強調

不同的信息容器組合在一起，搭建一個分工明確的界面。界面中不同的信息需要套用合適的形式去呈現。有層級就有對比，對比越大，層次拉得越開，重點就越突出。

建立對比的策略：

色彩對比、面積對比、樣式對比、Z軸高度對比、靜態動態對比

文章來源：站酷  作者：doo_W

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

大家是不是時常困惑于，B 端的表單設計體現不出高級感？設計發揮的空間特別的少？

那是你沒用對發力點~

B 端：設計表單頁面時，一方面須尊重用戶的習慣，不要在不必要的地方體現差別。總結了 4 個思考問題：

案例：以創建公眾號消息自動推送為例

• 思考用戶用產品做什么事？用戶會用該產品創建公眾號消息推送，根據用戶觸發事件，推送相關信息
• 用戶用這類產品最關心的是什么？核對觸發事件，檢驗消息發送狀態
• 用戶有哪些思維定勢？這里就不舉例了（條件不變時，能迅速地感知現實環境中的事物并作出正確的反應）
• 用戶用過什么類似的產品等？……

另一方面要考慮信息層次。

搞定了基本要素后，我們開始考慮如何表現信息層次。

• 封裝度高、信息密度低
• 如何判斷采用哪種布局方式

什么是封裝度高且信息密度低？

在了解什么封裝度和信息密度前，我先跟大家討論一下。什么是表單之間的關系。

我所認為表單之間的關系分為 3 種：

1. 常規結構

優點：

平鋪所有需要填寫的信息，適合內容項較少、內容項無法按照相關性分組的表單

缺點：

• 表單頁中需要填寫內容眾多，容易造成信息密度過高
• 操作需要的視覺元素越多，用戶的認知負擔越重

使用場景：

當需要完成一個簡單快速的任務，輸入少量信息即可完成創建

2. 樹狀結構

優點：

用于復雜任務時，拆解任務進行編排，適當的任務分割，可以降低用戶出錯率

缺點：

• 無法在表單頁中根據內容量進行合理地布局
• 視覺噪點過多，無法兼顧頁面展示和用戶填寫效率

使用場景：

適用于大型、復雜任務

3. 顯/隱結構

優點：

減少不必要（非重要）的輸入項，能適當的減輕用戶認知負擔

缺點：

• 雖然減輕用戶輸入負擔，但無法高效的判定任務分割的容錯率
• 用戶確認信息有一定難度，無法兼顧頁面展示

使用場景：

特殊場景下使用

那么用一條完整的鏈路來表達就是：

了解完表單的結構關系知曉利弊后，那么應用在我們實際的場景中表達就是如圖所示：

封裝密度高且信息密度低

△ 圖中案例，僅做示例說明

將一個復雜的任務表單，進行封裝后，看起來任務量是不是也變少了？操作起來也不是很復雜了？

小結：

分析了解表單的結構關系，判斷表單，尋找共性的內容，將他們封裝為一個卡片，也可以封裝成一個組。主要的目的就是減少用戶認知負擔，提升操作/使用效率。

如何判斷采用哪種布局方式？

關于使用何種布局方式的判斷，應從信息的復雜度和關聯性兩個維度去梳理。根據信息的復雜度和相關性模型，選用相應的信息呈現方式，選用合理的布局方案來承載詳情頁的內容。

1. 信息的復雜度和相關性模型

△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/research-form-cn

2. 區隔方式

根據各個信息之間的相關性，判斷各個信息模塊之間的親密度，通常情況下，相關性強的內容盡量靠近，相關性弱的的內容盡量拉開層次。

• 不通欄分割線：將相關內容分開；
• 通欄分割線：將內容分成多個部分；
• 卡片：放置一個主題；
• 頁簽：對象描述信息最頂層組織方式，如按版本組織、按意圖組織、按階段組織；

△ 來源：Ant Design；來源鏈接： https://ant.design/docs/spec/detail-page-cn

3. 注意事項

• 表單內容數量 <7 項，不建議分組；
• 表單內容數量 7~ 15 個建議分組；
• 表單內容數量 >15 個建議使用頁簽分組或采用分組標題欄展開收起樣式。

文章來源：優設  作者：交互思維鋪子

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

費茨定律由心理學家 Paul Fitts 提出，用來預測從任意一點到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。舉例來說，你伸手去拿桌子上的咖啡杯，開始你的手臂迅速地往杯子位置移動，接著你會放慢速度直至找到杯子把手，這個杯子把手的大小與你“抓住”它有著一定的關系。

如上圖所示，如果光標現在在任易地點想要去點擊目標 target，最短路徑一定是 D，最短路徑上容錯的最長路徑是 D+W，只要水平上移動超過了 D+W 你就點不到了，而這個點擊動作所耗的時間是一個常數加上一個以 D 為正比 W 為反比的函數的和。

讓我們來看下面這個例子：圖中右側的紅色方塊代表目標，虛線代表從起點至目標的移動軌跡，其范圍是用戶到達目標前微調以彌補誤差的區域，在右方有一個較大的目標，因為面積很大所以用戶從任意點快速點擊都會很容易，在目標上停下來之前不需要做太精細的調整。

相反，如果把右邊紅色方塊縮小，用戶快速點擊目標會困難得多，需要做一系列精細的調整動作。

但如果同樣大小的目標距離很近的話，因為到達目標范圍所需的初始動作很小，所以準確點擊它的難度也會小很多。距離越近， 初始動作因為幅度太大而超出目標區域的風險就越小。

按鈕越大越容易點擊

在頁面中，大而近的目標區域意味著用戶不需要做太精細的調整就可以輕易的到達目標。比如頁面中的大按鈕。

將按鈕放置在離開始點較近的地方

夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區域，相比常見頂部搜索欄更方便操作，效率更快。

相關按鈕之間距離近點更易于點擊

在設計注冊、登錄界面的時候，通常將「注冊」和「登錄」放到一起，不僅可以在視覺上增強用戶對他們相關性的認知，還可以減少在他們之間的距離 。

△ 設計圖來自網絡 侵刪

適用邊界

費茨定律鼓勵減少距離，增加目標大小以提升用戶效率，但反過來亦適用，比如 iPhone 關機，不使用按鈕點擊，而采用滑動操作，這樣雖然降低了用戶操作效率，但增加用戶操作時間，以起到警示用戶謹慎避免誤操作的目的，所以“取消”按鈕放在底部方便點擊的地方。

App 彈窗經常把“關閉”按鈕放在卡片的右上角離手遠的地方，還有開屏廣告，廣告商希望用戶花盡量多的時間停留在廣告內容上，這時候廣告主會把“跳過”按鈕放在難以點擊的右上角，以降低用戶的誤觸機率提高轉化。

總結思考

按鈕越大越容易點擊，在移動設備上通常增加按鈕點擊熱區范圍以便用戶不必精準地點擊目標也能操作成功，但是可點擊對象大小尺寸要合理不要過分的大；

讓相關的內容更靠近彼此，在視覺上增強用戶對它們相關性的認知，不過也不能過分靠近，會造成點擊壓力；

將按鈕放置在離開始點較近的地方，比如屏幕底部易操作區域；

屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素，因為在屏幕邊緣和角落位置時它們是“無限可選中”的，可以大膽操作而無需“微調”；

定律的反向使用可以適用一些特殊場景，比如想達到某種目的而降低按鈕被點擊的可能。

文章來源：優設  作者：印跡拾光

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

偶然間發現了一本3年前買入的書《侘（cha第四聲）寂》，心里打著哪怕是看上10分鐘至少也是沒荒廢這個假期的念頭，讀了起來；

那么關于“侘寂”，雖然認識不深，但又有一些個小想法，借著假期的余溫跟大家嘮上一嘮：

百度上對侘寂的解釋是：侘寂是現代文學翻譯上的一個誤解，侘び（WABI）與寂び(SABI)。國人將其整理為侘寂一詞。日本美學家岡倉天心的著書《茶之本 Book of tea》把侘び的翻譯成“Imperfect”所指的應是侘び美學中，外表的殘缺…還有人說“侘寂”是一種思想，一種美學，一種世界觀。

我覺得吧，說的太深了不好理解，甚至有點啰嗦了，我嘗試著概括了一下，基于在下有限的語言能力大概是這個樣子：

雖然解釋中有提到殘缺之美，但在我認知里侘寂還真沒有什么殘缺的感覺，特別是以無印良品為代表的日式自然風格，他們對過于裝飾嗤之以鼻，鐘情于“不虛張聲勢，卻歷久彌堅“的設計；我試圖去按照自己的意思揣摩無印良品的設計哲學，結合名詞本身，再次總結了一下：侘寂美學不會執著營造表象，取而代之的是盡量流露事物本質，不會隨著時間的推移而喪失所謂的“新鮮感”；所以回過頭來再看無印良品的設計（不管是平面還是產品），大差不差，我們都會感慨道：真 tm 耐看?。。。?

嗯，結合上文，關于“侘寂”這個詞，我覺著大概也就是這么個意思了。

侘寂是 無印良品 / 宜家家居 等產品設計哲學的靈感之源，也是侘寂理念的追隨者。但最大牌的死忠粉就不得不提喬布斯和他的蘋果了，老喬本人對日本美學的熱愛超越任何人，深受日本侘寂美學影響，也因此成就了蘋果手機極簡風格的設計（說個后話，這種簡約是建立在內在高品質和對細節追求的基礎之上的，一定程度上對侘寂輕度的人為干預）。

插個題外話，仔細琢磨一下，不難發現 20 世紀中后期，從包豪斯的第三任校長密斯凡德羅到博朗的迪特·拉姆斯和蘋果的設計不約而同的在表達類似“少即是多”的設計理念；這種大一統的現象很奇妙，一定程度上結束了工藝美術和裝飾藝術對設計界的統治，這既是開始，也為設計風格的輪回做著準備。

回歸下主題，國際知名品牌的設計風格被分析得透透的了，我也不贅述了，主要說國內的深受影響的產品。在我的印象里，oppo 的 color OS 算是其一，特別是當年 color OS 6“無邊有界”的概念讓人著實興奮一把：

坦誠的講，以侘寂為核心出發的產品在我們的生活中并不少見，他們以突出內容為主，沒有其他什么過度的裝飾；前有 Instagram，Evernote，也有最近大火的 clubhouse；

從產品理念上講他們注重對主線功能的強調，對誘導性功能不太在乎；再聚焦到用戶界面上來講，他們認為保持最舒適的屏效要比塞滿每一個像素更重要；哈，那么問題來了，國內的產品（特別是巨型體量的產品）都不約而同的對屏效有著深深的執念，導致他們看起來難受的一比。這次我們先聊聊屏效：

1. 屏效的取舍 

屏效這個詞是“坪效”的演變，后者可以理解成實體店鋪每平米的營業額，是一個經營效益的指標。所以類比下來，手機屏幕也可以這樣計算，就簡單理解成 “每一像素可以帶來多少商業效益” 就行了。

理論上來講，一般用戶最有用的瀏覽區域為手機前 3 屏，如果更嚴格點來說是前 2 屏，按這個思路的話，咱大概就能得這么個結論：每一屏里給用戶看到更多的東西，那么收益（瀏覽量/點擊率什么的）也會成正比，所以這個結論就一直被傳承下去了。但…如果不是抖音的出現，那么怕是我現在還對以上結論深信不疑：

哎，不是說單屏內展示的越多越牛 X 么，為什么抖音這一屏一個的做法立刻風靡了全球，甚至還把快手這個老對手拉上了這條新體驗的船。帶著這個疑問，試圖刨根問底，追溯源頭，冷靜分析下了當前的現狀：這大概是形式影響商業價值的一個絕妙的 case 了。先看以前，從互聯網產品誕生以來，feed 流的廣告形式大概也就是這兩種了：

傳統的 banner 理論上就是“CPM”，是一種展示付費廣告，根據曝光次數收費，這種形式太多見，我們常用的餓了么 / 美團外賣的頂部 banner 都是這樣；CPC 不用過多解釋，就是點了廣告主就給錢的那種，在今日頭條刷新聞的時候經?？梢钥吹剑€有公眾號的底部廣告也是這樣的原理。再看看抖音的設計：

抖音的 GD 單頁廣告的形式基本上是集各種模式的優點于一身，既有品牌曝光（CPM），也有點擊（CPC），甚至還有按時長收費的 CPT 整合進來。我猜測創造這種形式的設計師本身也對美學和商業有深刻的理解，不得不說既保證了體驗又提升了商業價值，美的不可方物啊～所以說，通過這個例子也許你會發現，屏效和商業價值并不是“是非題”，更像“多選題”，我們總是對所謂的習慣報以崇高的敬意，但事實上這折射出了人的“奴性”，通常我們認為對的事情也僅僅是習以為常罷了。

話說回來，例子雖然生動且具備說服力，但我猜想你應該跟我一樣，未必有機會去做這么顛覆性的設計（即使有機會也未必有膽量哈哈哈哈哈），我試著找了幾個例子希望能夠幫助你在設計上可以 balance 屏效和商業價值：

最后再給大家分享個壓箱底的小技巧，也是之前看到知乎的廣告突然間被啟發到的：

當然，以上的例子是盡可能的通過屏效來平衡美學和商業之間的關系，總的來說，侘寂這種理念在我國互聯網注重運營的土壤上不是那么的好生長，大家盡力就好～

上點小福利

盡管我一直堅持輸出設計觀點，但我發現好多朋友練就了 “一看就會，一用就廢” 的日常技能，所以還是準備了一些經過我嚴選的模版和素材送給鐵子們，希望鐵子們在學會理論的同時也能手活跟上，眼高手低不可取，眼手雙高真牛 B！

總結一下

侘寂之美是許多當代設計師所追求的境界，但互聯網貌似就是一灘死肥，無論你怎么施肥，也未必能開花結果，各種方案也會相應的受到各種挑戰，說白了這種以美學驅動創新本就抽象不可具象，甚至又一些玄學夾雜其中。假如你也希望能夠借勢突破，不妨以美學為指導思想，以商業價值為突擊點去嘗試方案的可能性，或許這樣說服力才有可能被大幅提升。

文章來源：優設  作者：負能量補給站

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

你是否和我有同樣的困惑，常常無法客觀看待自己的設計，優化的時候又常常不知從哪里下手，看到別的產品設計又無法給出具體的判斷依據。

今天學習一下用戶體驗的結構化衡量標準。不管是日常工作還是作品提升，都可以作為一個方向性的指導。

要想讀懂一個信息，多少文字才能解釋清楚（認知成本）？網頁加載多長時間才算合理（時間成本）？要設置攝像機的時間和日期，設定多少個步驟才算合理（操作成本）？

首先我們來了解一下通用設計法則之——成本效益法則

成本效益法則的概念

百科含義：成本效益法則指的是要從“投入”與“產出”的對比分析來看待“投入（成本）”的必要性、合理性，即考察成本高低的標準是產出（效益）與投入（成本）之比，該比值越大，則說明成本效益越高，相對成本越低；考察成本應不應當發生的標準是產出（效益）是否大于為此發生的成本支出，如果大于，則該項成本是有效益的，應該發生。

從設計的角度來看，成本效益法則一般是用來評估伴隨著新功能或新元素出現新增加成本的最后財務回收狀況。

用戶價值 = 新體驗 - 舊體驗 - 切換成本

從用戶角度來看，成本效益法則也可以用來提高設計的品質。如果與設計互動的相關成本大于收益，就是不良設計；相反，如果效益大于成本，就是優秀設計。用戶成本一般包括認知成本、操作成本、時間成本。

體驗 = 效益 - 認知成本 - 時間成本 - 操作成本

例如：把走一段路到展覽館看展當作成本，把看展的趣味程度當作效益，如果趣味程度超過走路的成本，那么這個展覽設計就是優秀設計。

優秀的展覽設計效益大于成本

糟糕的展覽設計成本大于效益

每個設計的品質都可以用成本效益法則來進行衡量。如果與某項設計互動之后，用戶覺得獲得的效益高于此次互動的相關成本，即是優秀的設計；相反，如果成本高于效益，即是糟糕的設計。

怎么做？

若想提高體驗的價值，可以從兩方面入手：1. 提高效益；2. 降低成本。

提高效益更多是產品層面的決策，所以站在設計師的角度，這篇重點從如何“降低成本”展開。降低成本主要有三方面：降低認知成本、降低時間成本、降低操作成本。

PART 1 

降低認知成本

1. 減少冗余信息

a. 去掉累贅文案

為了避免客訴，設計常常會“被迫”在首頁做冗長的文案提示，比如美團民宿的“今天入住、明天離店”的文字提示，彷佛在跟著文案做“今天入住+明天離店=1晚”的數學題，過于平鋪直述反而增加了用戶思考。而且過于具體的文案在小字顯示的效果下閱讀性也不夠好，反而增加了用戶閱讀文案的認知負擔。

同樣是 1 晚，Airbnb的文案表達簡潔明了，日期間的橫杠足以理解是從哪天到哪天的含義。

如果說Airbnb是國外產品，調性不同，那么像馬蜂窩的解決方案也是層次與閱讀都更加清晰易懂的方式。

b. 去掉多余選項

招行銀行的首頁功能并不是我會經常要用的功能，但是卻無法像支付寶那樣自定義編輯首頁的功能icon，去掉不需要的功能入口。

2. 內容好理解，減少思考，減少記憶

a. 文案與圖片匹配度

文案與圖片的契合度高更夠幫助用戶更有效的理解內容，App Store的推薦卡片在這方面表現的非常優秀。

b. 結構框架好理解——格式塔原理

接近原則中指明物體之間的相對距離會影響我們感知它們是否以及如何組織在一起。京喜首頁功能模塊區分的相對距離差別不夠大，加上商品圖的視覺干擾，更加影響信息層次的區分。而淘寶的模塊信息分組則清晰明確，信息辨識度高，視覺干擾少，能夠有效減少用戶區分信息的思考。

c.記憶的局限，降低記憶負擔

人們工作記憶的容量有限，大約是 4±1。由于短期記憶的局限，設計師應該確保用戶可以簡單地識別信息，但不能從之前的對話中回想信息。

比如我們經常會發現考試中的選擇題比簡答題更容易，這是因為選擇題要求我們去識別答案，而不是在記憶里回想答案。

再例如搜索，當搜索結果出現時，我們的注意力自然地從輸入的詞匯轉移到了結果上，因此好的設計應該在搜索結果頁展示搜索詞。把點擊過的結果變色也是幫助用戶記憶已點過的內容。

知乎的搜索結果不記憶已閱覽的內容，而谷歌搜索則幫助用戶記憶已閱覽過的內容。

 3. 優先級：信息層級

a.用戶優先級、b.功能優先級、c.視覺優先級

d.交互優先級

常見的是彈窗按鈕，需要區分信息優先級，不讓用戶產生選擇困擾。

 4. 文字、圖標的識別性、易讀性

美團Tab icon簡潔明了，圖形與含義符合，文案簡潔清晰。而悅會則顯得復雜難以識別，不僅文案復雜，易讀性比較差，圖標也沒有準確表達其寓意。

 5. 一致性

a. 內部的一致性、b. 交互邏輯的一致性、c. 元素的一致性、d. 語詞的一致性、e. 信息架構的一致性

f. 視覺的一致性

Airbnb的版式從banner到下面的標題分類，對齊方式與字體對比都保持一致風格，圖標和插圖都是線與線面的風格。對比之下，攜程的設計語言則相對不夠完整，不僅icon風格不太一致（面和線都有），banner運營位的版式也是比較隨意的（文案沒有統一的排版規范）。

 6. 提示、引導、反饋

好的引導反饋能夠大大賦能業務目標，相對于躺平的關注引導，好好住的類似提示引導，則生硬了很多，特別是兩句文案的切換動作比較刻意，加的笑臉表情也跟引導關系不大。而躺平的引導非常的萌，文案與形象風格都很nice，加上形象手指的動態效果，使引導非常的自然討喜。

 7. 符合用戶習慣

比如，Windows 與 Mac 系統的軟件關閉方式。使用windows電腦時，我們形成了右上角關閉的操作習慣。后來開始用Mac電腦，關閉入口都在左上角，在一段時間內，每次關閉都要找一下關閉按鈕在哪里。由于Mac的關閉方式沒有比windows產生顯而易見的體驗提升，改變操作習慣成本高，部分用戶可能會認為Mac的關閉操作不好用。

當然，假如最開始用的是 Mac 電腦，后面再使用 Windows 電腦，也會感到 Windows 不好用，這是先入為主的觀念，一旦產生習慣，改變習慣將產生一定的學習成本。

PART 2 

降低時間成本

1. 扭轉用戶對時間的感知

今日頭條通過懶加載的方式，將文字內容優先顯示，并且將圖片位用默認底色先顯示出來，用戶可以在圖片加載出來之前先看文字內容，大大避免了等待的焦慮。我們應該避免像移動營業廳這樣的空白加載頁面。

 2.  增加等待過程中的價值

王者榮耀游戲開始前的加載界面會有小技巧的提示，等待的時間可以學習一些小技巧。

PART 3 

降低操作成本

 1. 先價值吸引后行動（先瀏覽后登陸）

每日瑜伽可以先瀏覽內容，想要了解更多的時候才引導登錄，降低了操作成本。而keep卻必須要先登錄才可以瀏覽里面的內容，增加了使用門檻。

 2. 預測用戶行為

滴滴出行根據用戶經常使用的地點預測用戶要去的地方，一鍵選擇地址更便捷。

3. 主動替用戶選擇

美團外賣支付時主動幫用戶選擇極速支付選項，一方面讓用戶更便捷，另一方面也能增加銀行卡賬戶的綁定，賦能業務。

 4. 簡化關鍵節點

淘寶確認訂單自動選擇優惠券，簡化了關鍵流程，降低操作成本，提高下單轉化?，F在很多購物平臺也都實現了這一點。

5. 減少手動輸入操作

以閃送為例，自動讀取復制信息——一鍵粘貼——智能識別——自動填充信息，減少了用戶的手動輸入操作，大大提高了體驗的質量與效率。

降低成本的誤區

是不是成本越低，這項設計就是越優秀的設計呢？在成本效益法則下，絕不是成本越低，效益就越高，設計決策需要把互動產生的效益考慮在內。

如果一個交互的復雜度能夠提高交互產生的效益，那么就應該適當的增加交互的復雜度。

比如我們常用到的密保鍵盤，打亂的數字順序能夠防止偷窺者從手勢位置竊取密碼，因此這項交互成本的提高相應的能夠大大了我們資產賬戶的安全效益。

所以，必要時是可以通過提高成本換取更高的收益。但同時如果技術允許，通過手機短信驗證登錄與面容識別這種成本更低安全系數更高的方式，還是更好的選擇，要根據具體的場景具體對待。

總結

每個設計的品質都可以用成本效益法則來進行衡量。如果與某項設計互動之后，用戶覺得獲得的效益高于此次互動的相關成本，即是優秀的設計；相反，如果成本高于效益，即是糟糕的設計。

設計師運用成本效益法則提升用戶體驗的維度主要在降低用戶的認知成本、時間成本、操作成本。

降低認知成本包括：減少冗余信息；內容好理解，減少思考，減少記憶；優先級：信息層級；文字、圖標識別性，可讀性，易讀性；一致性；提示、引導、反饋；符合用戶習慣。

降低時間成本包括：扭轉用戶對時間的感知；增加等待過程中的價值、趣味性、小貼士。

降低操作成本包括：先價值吸引后行動；預測用戶行為；主動替用戶選擇；簡化關鍵節點；減少手動輸入操作。

同時我們也要注意降低成本的誤區，并不是成本越低越好，如果提高成本可以換來更高的效益，也要具體情況具體對待。

文章來源：站酷  作者：水原七秒

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

品牌升級設計不是件小事，也不像看到的那樣光鮮亮麗。這個過程很復雜，充滿了很多人的意見和情感。基于我個人對品牌的認知，品牌設計的整個推導過程是“文化←專業→業務”，也就是說核心的品牌資產去承載文化和賦能業務。害，虛頭巴腦的，還是上張圖來捋一下思路：

確定虛的部分后，需要多維度分析需求，并且了解用戶對品牌的印象（前提是要確定你的用戶是誰），但首當其沖的是確定一個方法，那么情緒版是一個相對來說還算靠譜的推導方式：

按照這個思路，設計風格以及重要因子（顏色 / 字體等）就基本被確認下來了，然后就需要相關的設計師按照邏輯圖的順序落實到業務應用當中：

哦，對了，做這些之前最好確定一個 SOP 模版，幫助你可以快速的完成適配工作：

另外還要強調一點（這個點我在面試的時候也會經常問候選人），因為整個項目涉及的人很多，耗費的資源也巨大，所以為了確保無縫執行，協調工作要怎么進行呢？這就需要機制和規則的設定來輔助你管理/協調每一個人的工作了（不要忽視這塊，并不是只有界面設計是設計，思維的設計同樣是設計哈）：

對了，除了運用在品牌視覺之外，產品中也需要適當的被 highlight 一下，以馬蜂窩為例：

如果說 logo 是企業的象征，那么超級符號是品牌形而上的靈魂。不同于輔助圖形，輔助圖形往往來源于品牌標志，可以是品牌標志本身，也可以是品牌標志某一部分；超級符號的形式偏生活化的符號，跟輔助圖形形式上可能類似，但用途往往更大；

比如可口可樂的瓶身，寶馬的前臉，ta 通常不那么起眼，甚至在你腦海里都習以為常，覺著就應該這樣，絲毫提不出什么質疑；

著名搜索引擎百度定義超級符號為：他們本身具有一定意義，要求人們按照其指導進行活動。（這個解釋感覺冷颼颼的…）我試圖用自己話來說：就是品牌本身傳承下來或者創造出來最具特色最能代表的圖騰；

品牌設計中需要符合和 logo 搭配使用，因為在一定場景下，真正能讓用戶感知并認可的可能是超級符號，而非品牌的 LOGO；

當然，超級符號可以依附于 logo 存在，同樣也可以作為個體單獨存在，兩者并沒有絕對意義上的劃分：

1. 超級符號的形式

最著名的兩者合二為一的就是天貓啦，從天貓 logo 的誕生到現在，質疑一直沒有停止過，碩大的貓頭看起來傻里傻氣但恰恰也是這個原因，被記住了概率大大增加；如今我們能看得到每年的雙十一都會有這只貓存在：

另外如果用一個通用符號作為超級符號的話，其實是比較吃虧的，用戶雖然可以比較容易的描述出比如一個圓一個矩形之類的，但是卻不容易讓用戶記住你，記住你跟其他產品的區別；比如美團外賣的品牌升級，一定程度上是想從通用符號過渡到專屬符號。

符號和 logo 分離的例子也有很多，比如滴滴的圓：

咱也不知道為啥，ta 就用了個通用符號，不過屬實還挺好看～

2. 淺談超級符號的設計 

設計一個符號一定要把產品的特色最大化，試想一下漫畫的畫法，其中最重要的一點就是特點的不斷夸張夸張再夸張，不斷讓人記住 ta 最具特色的那一面：

初期的超級符號絕對不是簡單的設計一個圖形就完了，從最基本的圖形到顏色、字體、元素、板式再到整個視覺風格體系，再到融入到產品 UI 或者線下媒介的傳播的每一個觸點去傳達品牌；當然超級符號也會有進化，比如最終進化到可口可樂最后會進化成一個顏色-紅色；再比如已經銷聲匿跡的 ofo，你永遠也不會說：“我要騎一輛 ofo”，取而代之的是“我要騎一輛小黃車”，所以你看符號進化到最頂級的時候未必需要實體（咦，這句話又讓我想到了奧卡姆剃刀）。

綜上，做出具有可被記憶的特殊性符號，基本上就成功了 80%了。再經過長期不斷的迭代優化，最終進化為無形的品牌資產就基本上可以宣告品牌的成功了～

上點小福利

盡管我一直堅持輸出設計觀點，但我發現好多朋友練就了 “一看就會，一用就廢” 的日常技能，所以還是準備了一些經過我嚴選的模版和素材送給鐵子們，希望鐵子們在學會理論的同時也能手活跟上，眼高手低不可取，眼手雙高真牛 B！

總結一下

當下，品牌設計的價值也不斷的被提高，一方面是在流量尤為重要的今天，品牌的第一個作用就是導入流量；另一方面是因為產品的溢價主要是由商業包裝決定的，包裝最終成就一個品牌，而品牌就是終極的包裝。設計師作為其中的重要參與者，一定要明白品牌資產的沉淀和品牌是其實是質的區別，別試圖去用形而上的手段去解釋本質性的問題，試著把產品和品牌緊密結合，畢竟品牌的最大輸出口就是產品本身。

文章來源：優設  作者：負能量補給站

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

文章來源：站酷     作者：羅耀_系列

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