/引言

“由理有劇”系列以”我們怎樣理解暗黑模式“為開篇，緣由作者正在任職的工作是 TO B 產品交互及界面設計，入職時正值公司整體產品線升級迭代，用戶界面從淺色模式向暗黑模式探索的階段。這個探索階段面臨的本質問題便是“到底什么是暗黑模式”，同時“我們為什么要用暗黑模式”的問題也隨之而來。

為了給公司同事闡述這兩個問題，作者搜集了大量資料，翻閱了相關產品系統所給出的設計文檔，重點圍繞“什么是暗黑模式”展開，逐步推敲其中的理論原理，總結出便于理解的文字內容。這樣做的目的簡單有二，一是與產品、開發、測試方面的同事能夠達成向暗黑模式優化升級的共識；二是能夠讓我們的各個產品線更從容地去擁抱暗黑模式的到來。

/“由理有劇”系列篇01：我們怎樣理解暗黑模式

文章大綱

1、是什么？

2、為什么？

一、是什么？

隨著 iOS 13 和 Android 10 的正式發布，“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野，“暗黑模式是什么？”這個問題也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也許我們可以換一個角度，從用戶界面的演進歷史中尋找線索，從而幫助我們更好地理解暗黑模式。

作者自從拜讀了《蘋果三劍客》，對于用戶界面的前世今生才有了更深的了解，蘋果的產品發展史，某種程度上也可以稱為用戶界面的演進史。廢話不說，下面讓我們一起簡單聊聊。

1、原來，“Dark Mode”是用戶界面的起源

計算機誕生的早期，其顯示器一直以“暗黑模式”面向操作者，其緣由是早期的顯示技術一直被CRT主導，CRT釋義為“陰極射線顯像管”，在19世紀末被研制出來，因為制造原理相對簡單，所以CRT一直是早期電腦顯示的主力，但在上世紀80年代之前僅支持單色顯示。

下面兩圖分別為蘋果公司于1977至1980年間生產發售的 Apple II 及 Apple III 型計算機

圖中顯而易見，兩款計算機的顯示方式均為單調的黑底白字或綠字，呈現出一種“暗黑模式”的視覺效果。蘋果公司的 Apple II 和 Apple III 兩支產品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計算機以輸入代碼執行數字運算作為主要功能，但是這從另一方面反應出：未來計算機會借助不斷成長、成熟的電子技術，必將掀起一場接一場的變革，用戶界面也隨之不斷地革新。

2、Apple Lisa（麗薩）奠定了計算機向“圖形用戶界面”演進的基礎

上個世紀80年代之后，CRT彩色顯示技術成熟，逐漸流行普及到各個電子行業，但當時主流的計算機操作系統并沒有“圖形界面”這個概念，所以大部分計算機產品依舊延續了先前黑色背景的顯示方式。

直到1983年1月9日，在年度股東大會上，蘋果宣布了兩款將在未來的計算機行業中占據關鍵地位的產品：一款叫 Apple Lisa （麗薩，老喬的第一個女兒），蘋果第一臺（也是全球第一款）基于圖形用戶界面（GUI）的計算機，也就是 Macintosh 的前身；另一臺叫 Apple IIe ，是已獲高度成功的 Apple II 系列的新一代進階產品。

Apple Lisa 向主流個人電腦行業介紹了一種全新的鼠標控制的圖形用戶界面，宣布向單調的黑白用戶界面告別。

運用形象的圖標、方便的下拉菜單和重疊的窗口，替代了此前一貫使用的輸入文字命令，Lisa的圖形用戶界面開啟了消費者與個人電腦交互方式的革新之路。盡管Lisa存在諸多缺點，如定價過高，功能缺失、運行緩慢等，但它的圖形用戶界面依然給它贏得一陣喝彩。

Lisa的GUI影響如此深遠，以至于諸多電腦制造商紛紛加入鼠標控制的GUI領域，爭相模仿。就在Lisa首次亮相十個月后，微軟于1983年11月推出了Windows操作環境。（對于此事，老喬總是公開譴責微軟的蓋茨抄襲他的產品創意，甚至想讓蓋茨吃官司，兩位大佬一直不合也是業界皆知，跑題了...）

///一個有意思的事兒：今年7月份，一位外國的蘋果粉在Twitter上發布了一條關于 Apple IIe 型計算機的動態，內容展示了自己使用 Apple IIe 型計算機進行智能化任務的過程，如發送推文、在Evernote中寫作、發送電子郵件，甚至控制智能家居（如下圖）。要知道，這臺計算機生產發售至今已有37年的時間。由此感嘆，不得不說蘋果對于產品的品控做到了那個時代的。

3、Macintosh（麥金塔）推動了“暗黑模式”向“淺色模式”的邁進

1984年，蘋果發布了個人計算機 Macintosh（麥金塔），Macintosh 延續了 Lisa 的圖形界面語言，并向世界普及了圖形用戶界面（Graphic User Interface）的概念，從而開啟了以白色為底色的圖形交互時代。

Lisa獲得的一些成就在 Macintosh 上體現的淋漓盡致，包括靈活的鼠標、點陣影像圖、桌面的布局、形象的圖標、相稱的字體、屏幕上方的下拉菜單和重疊的窗口，這些也得益于日益成熟的顯示技術和不斷進步的計算處理技術。形象生動的圖形設計和界面交互一直是老喬最引以為傲的杰作，不得不說，老喬對于計算機行業甚至是設計行業都有著極高的敏感度和先于旁人的前瞻性。（當然，這里的主語應該是蘋果）

Macintosh 產品的成功，不是蘋果一味地迎合計算機消費市場，而是利用創新的方式引導市場，引領計算機行業向人性化的用戶界面發展、邁進。

至此，我們也徹底地向“暗黑模式”說了再見，全面擁抱“淺色模式”的到來。

4、“淺色模式”成為用戶界面的主流

麥金塔搭載的 System 1 打破了字符終端的模式，淺色的界面風格一直持續到 System 6 都沒有顯著的改變。直到1991 年的 System 7 開始引入彩色，圖標也增加了隱約的灰色，藍色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋果公司改名為 Mac OS ，而這一年是1997年。

與此同時，微軟的 Windows 從黑屏的 DOS 發展到全屏幕的 Windows 1，再到較為成熟的 Windows 3，最后演變到奠定當今 Windows 界面基礎的炫麗多彩的 Windows 95。用那個時代的眼光來看，微軟的變化是相當驚人的，微軟儼然成為了一匹計算機行業的黑馬，一路趕超蘋果成為行業霸主，而蘋果因為因循守舊，在界面設計上從領先掉到了最后。

此后，從 Mac OS 8 到 Mac OS X Server 1.0 ，蘋果一直專注于改善操作系統和優化界面表現，直到2001 年 3 月，經歷了四個開發者預覽版和一個公共測試版之后的 Aqua 界面終于跟隨 10.0 正式發布，發布后改變了人們對計算機界面的印象，在隨后的10年里蘋果一直沿用這套界面風格。

OS X 系列用戶界面較大的更新來自于2007年10月發布的 10.5 Leopard 豹，雖然基本的界面仍為 Aqua 和其糖果滾動條，但新加入了一些鉑灰色和藍色，另外重新設計的 3D Dock和更多的動畫交互使得新界面看上去 3D效果更強，此外還改進了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。

整體來說，Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化，靈活生動的圖形語言和交互體驗重新得到了用戶青睞，蘋果也以此，再一次走上了引領潮流之路，使得多彩的“淺色模式”成為用戶交互界面的主流。

蘋果開創性的界面圖形語言也延續到了移動設備領域。

2007年的初代iPhone作為蘋果公司第一個移動設備產品（iPhone1代）首次亮相市場，驚艷了整個行業，iPhone搭載的 iPhone OS 和后來更名為 iOS 的系統，延續了 Mac OS 用戶界面的設計語言。在歷代iPhone上可以看到沒有物理鍵盤侵占空間的屏幕，精美的的方塊圖案整齊的排列開來，顏色豐富且耐看。

依稀記得當時的我們，還玩著黑白屏幕上的俄羅斯方塊，還敲打著物理鍵盤上的九宮格，挪雞鴨也表示永不為奴。

2010年堪稱iPhone史上最重要的一年，蘋果推出了“改變一切”的iPhone 4，并對其用戶界面進行了革新。

生動的擬物化設計風格正式成為業界潮流，這也使得UI行業逐漸熱了起來，蘋果的界面設計規范也順勢成為了主流的移動端設計規范。

蘋果以此作為移動端界面設計的基礎，沿用到之后的iPhone系列中，期間iOS系統的風格保持依舊，只有 iPhone 5S 搭載的 iOS 7 做出了圖標由擬物化向扁平化的改變，但整體都以“淺色模式”作為主流的用戶界面視覺模式。

5、“暗黑模式”的正式登場

在 Mac OS 的系統上，用戶可以通過“通用設置-外觀”來對整體界面進行淺色、深色的切換，可以看出，蘋果早已把“暗黑模式”納入到他們的開發隊列中，也就是說，“暗黑模式”的概念主要來源于蘋果的 Mac OS，這也為“暗黑模式”的正式登場埋下了伏筆。

自從有了這個概念之后，很多網站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據自己的習慣或愛好進行切換。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持，其中也不乏 Web 端的網站、系統等。

北京時間2019年6月4日，果粉期待已久的蘋果WWDC19如期而至。

發布會上，庫克一如既往地優先調侃了Andriod系統一番….（蘋果一直喜歡用數據說話，想了解的同學可以回顧一下發布會的視頻）

言歸正傳，在發布了一系列硬件之后，庫克終于介紹了大家期待已久的 iOS 13。新發布的 iOS 13，除了提升系統流暢度和增加系統穩定性外，還介紹了其他提升用戶體驗的優化。

其中，最為引人注目的“暗黑模式”即將亮相于新系統。

發布會表示，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環境中更好地使用設備”。

“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”發布會的主持人一邊演示使用在暗黑模式下的App應用，一邊不由自主地發出贊美。這也許也受到了老喬的影響，猶如在劇場舞臺中心的話劇演員，有著一種無可比擬的自信和氣場。

但有意思的一點是，主持人展示了 iOS 13 暗黑模式的開發團隊合照，從極客穿著到賽博朋克式的暗黑搖滾裝扮，這一戲劇性的變化似乎在告訴大家：“玩，我們也是認真的?！?

發布會上簡單演示了暗黑模式下的漂亮界面，雖然沒有過多地闡述暗黑模式的開發細節，但是這標志著暗黑模式“重新”登上歷史舞臺。

6、小結

我們從蘋果產品發展史中，不難發現蘋果對于用戶體驗的理解是具有創造性的，總是能先于用戶發現用戶的潛在需求。蘋果產品的發展史也可以稱之為用戶界面的演進史，從早期黑色背景的計算機桌面發展到以淺色為主的用戶界面，再到 iOS 13 正式發布的“暗黑模式”，這一過程貌似是在“返祖”，但這些始終是圍繞以用戶體驗為中心的改變和突破。

“暗黑模式”是什么？拋開技術理論，簡單理解就是降低用戶界面在設備上的亮度，以深色的背景、較低的對比度、灰階的色彩來呈現用戶界面，提升用戶使用產品的體驗。

二、為什么？

上面我們提到了，根據 Apple 官方的說法，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環境中更好地使用設備”。

我們可以圍繞這個說法，結合我們與設備、環境的關系進行探討。

1、更好地適應弱光環境

隨著人們對智能設備的依賴性越來越強，設備使用的時間也高頻覆蓋了白天到黑夜，夜晚使用的頻率更是與日俱增，所以暗光環境的使用需求被實實在在地擺到了臺面上。以設計職業為例，在阿里巴巴 UCAN 2019 設計大會上分享的數據結果顯示：設計師群體夜晚的工作時間通常在5-6個小時…

不是在加班就是在加班路上的我們更習慣于在夜間工作，夜間安靜的環境更能讓我們專注設計、靈感爆棚。但這也在另一方面表達了我們需要設備更加符合我們在弱光環境下的視聽需求。

Dark Mode 由此應運而生，使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距，可以保證使用者在暗光環境下使用設備的舒適度。也就是說 Dark Mode 可以降低屏幕的整體視覺亮度，降低對眼睛的視覺壓力，再也不用怕夜晚的設備屏幕刺瞎我們的雙眼了。

但這里我們要理解一個概念，“降低對眼睛的視覺壓力”并不等同于所謂的“護眼”，夜晚使用暗黑模式的設備，實際上并沒有改變屏幕的“頻閃”問題，所以說用戶看屏幕的時候依舊會有視覺疲勞的癥狀，所以各位大佬還是晚上少看屏幕，多愛護眼睛吧。

2、更好地專注顯示內容

想象一下，我們在電影院看電影時，為什么要全場關燈？

甚至有些APP， 在影片的下方也會有一個模擬關燈效果的按鈕，來讓整個手機屏幕變黑， 只剩下視頻畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內容下，也就是所謂的“沉浸感”。

這其中的原理就是色彩本身是具有層級關系的，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作；尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。

這一點在股票交易軟件上就是最好的驗證，目前來看全世界絕大多數的股票軟件采用的都是負極性，也就是暗色底的設計方式。紅色和綠色代表的漲或跌（不同國家顏色表示可能不一樣）在這樣的深色背景下就會特別顯眼，還有一些顏色比如藍色用于某些數據的走勢圖。這樣的顯示幫助用戶更好地集中精力在數據獲取上，更快地做出決策。

3、更好地迎合消費品味

這里所提到的消費品味是來自用戶層面的潛在心理需求。

從心理學角度而言，顏色可以影響觀者的感受和情緒，這直接影響到用戶對于一個事物的判斷和選擇，這就像我們消費購物一般，有時候我們的消費不完全是為功能、實用性買單，而更加看重的是一個產品的外觀屬性，當產品的外觀符合我們的消費審美甚至超越預期時，我們往往會更快地做出消費選擇。

而黑色在積極層面的外在直觀表現為高貴、莊嚴、鎮定、神秘，這代表著黑色相比其他顏色存在著更多的可能性，這也造就了黑色成為百搭色，可以作為其他顏色的底色、陪襯色進行使用。暗黑模式也存在同樣的心理暗示，沉穩、神秘的黑色會讓用戶聯想到產品的穩定和高級，提升用戶的心理信任度，迎合用戶的消費品味。

4、更好地改善電池壽命

最后才探討耗電功效方面的問題，算是一個壓軸問題了，在某種程度上說，智能移動設備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網站進行搜索可以發現，為了省電而使用深色主題或者說黑暗模式的用戶大有人在，尤其是一些中高端采用 OLED 屏幕的手機。這是為什么？

暗黑模式省電的作用來源于 OLED 這種材質的特性，這種屏幕經過多年發展如今已經取代了 LCD 在中高端手機上的地位。和 LCD 依賴于背光不同，OLED 自發光的特性使得屏幕能夠獨立控制單個像素是否發光，也就是說畫面越黑，采用 OLED 屏幕的手機就越省電。下圖做了一個簡單的理解示例，每一列的格子代表亮度，在不同亮度下有相對應的耗電量顯示，閃電的亮度代表耗電量的多少。

理解了簡單含義，我們再來看一下Notebookcheck上對于OLED功耗的專業研究數據。在使用 OLED 屏幕時，屏幕上顯示的內容決定了功耗。當屏幕基本全黑時（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內容的屏幕，功耗曲線會隨著亮度提高而逐漸變陡。

上面的可視化圖表相對來說可能需要一定的理解時間，讓我們翻譯簡化一下。

上圖顯而易見，OLED屏幕的耗電量不僅受到亮度高低的影響，關鍵在于在OLED屏幕顯示了什么，有多少區域是淺色甚至是白色的，有多少區域是深色甚至黑色的，深色區域占比越高，相比較之下OLED屏幕也就越省電。這也就證明：OLED屏幕在使用以深色為主的顯示模式時，能夠降低耗電量，提升供電效率，也就是改善電池壽命。

///題外話：關于為什么我們的智能設備普遍采用OLED屏幕，可以參考Notebookcheck（文本鏈接），小伙伴們可以自行研究。

文章來源：站酷   作者：強強0075

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

前言 什么是復雜應用程序？

之前，我們已經將「復雜應用程序」定義：為支持廣泛的、非結構化的目標或專業領域用戶的非線性工作流的任何應用程序。復雜應用程序在其支持的工作流程和最終用戶的類型上當然有所不同（比如從科學家到軍事專業人員再到金融分析師），但是復雜的應用程序通常具有相似的品質。

例如，復雜的應用程序經常出現：

（1）以專業知識為專業用戶提供支持；

（2）幫助用戶瀏覽和管理大型基礎數據，并啟用高級感官分析或數據分析；

（3）通過未知或可變的基礎任務支持問題的解決或達成最終目標；

（4）需要在多個角色，工具或平臺之間進行切換或協作；

（5）減輕執行中高影響力（或高價值）任務的風險，因為在高風險情況下，高額損失（例如收入甚至生命）會受到威脅。

盡管差異很大，但所有復雜的應用程序都面臨許多相同的挑戰，無論是創建這些復雜應用程序的從業人員，還是依賴于它們進行工作的最終用戶。

考慮到設計人員和研究人員在處理這些應用程序時面臨的共同挑戰，本文概述了8條復雜應用程序設計準則：

01 邊做邊學

研究表明，當引入一個應用程序或系統后，用戶更喜歡立即開始使用它，而不受其復雜程度的限制。相較于花費大量時間學習使用教程、文檔或其他類型的幫助或設置內容，用戶更有動力開始他們的任務。（這種現象被稱為活躍用戶的悖論。）雖然在任務或安全關鍵領域中僅依靠試錯學習來進行應用是危險且不適當的，但一定程度的邊做邊學永遠是必需的，因為在培訓課程或手冊中不可能涵蓋一個系統的所有使用。

支持用戶立即開始探索界面這一偏好，允許他們通過嘗試和錯誤來學習界面，而不會導致工作損失或不可彌補的損害。

例如，限制了用戶執行長時間操作的能力，而看不到這些操作的結果。實時儀表板建構支持這一原理，其中儀表板元素預覽在建構時會實時更新。用戶不必等到任務結束就可以查看其操作結果是否符合其意圖。

02 幫助用戶采用更有效的方法

在大多數情況下，即使是復雜應用程序的用戶也往往會處于中等水平。換句話說，大多數用戶在自己的設備上使用系統時，并沒有過渡到真正的專家使用水平。許多用戶會感到滿足，這意味著他們將繼續使用滿意的（通常是低效的）方式來完成任務，而不是花費時間為他們的工作流程尋找最佳解決方案。隨著時間的推移，這種行為將導致難以置信的生產力斷層，因為用戶將花費數年甚至數十年的時間，以低效的方式日復一日地使用同一個系統。

通過為用戶的工作尋找通俗易懂的溝通方式和更有效的方法，幫助他們轉變為使用更有效的方法并打破其根深蒂固的行為模式。

例如，與其僅僅依靠冗長的教程或手冊（甚至是寫得很好的），還不如在整個應用程序中嵌入加速器或附加功能的上下文學習線索。上下文學習提示是僅在當前任務的上下文中提供給用戶的提示。當用戶將鼠標懸停在工具欄菜單項上時，提示一種更快完成任務的方法的工具提示支持這一原則。

03 提供靈活而流暢的路徑

復雜應用程序的用戶通常在非線性工作流中執行廣泛的非結構化目標。對于這些工作流程，用戶可能不知道他們的確切最終目標，而是需要分析數據以尋找答案。即使存在一個制定良好的最終目標，用戶通常也不會遵循一組已知的、順序的子任務來實現它。但是，出于必要，該系統必須具有某種結構：與用戶交互的物理界面以及隨著時間推移完成的某種線性過程。

死板、線性的工作流強迫用戶從開始到結束完成一組操作，沒有退路或順序上的靈活性。通過避免這種死板的工作流，允許用戶在任務序列中具有靈活性。

例如，提供方法允許跳過前面的步驟，回溯前面的步驟，以及從任何步驟流暢地移動到任何其他步驟。再比如，面包屑中靈活的交互式序列圖使用戶可以返回之前的步驟，而不會丟失進度。

04 幫助用戶跟蹤行為和思考過程

復雜應用程序用戶經常面臨漫長的等待，工作也經常被打斷。例如，復雜的數據分析可能需要花費數小時甚至數天的時間，而大多數復雜應用程序用戶所面臨的高復雜性的環境可能會導致其工作意外中斷。即使沒有計劃外的中斷，為實現目標而執行的子任務的復雜性和可變性也要求用戶在任務執行過程中將大量信息保存在工作存儲器中，而這些信息很容易在他們改變方向時丟失。

通過允許用戶在工作期間記錄他們的行動和思維過程，減輕工作記憶負擔，并幫助用戶在工作流中斷或中斷后恢復任務。

允許用戶添加和存儲有關特定數據、圖表或其他元素的開放式注釋是支持此原理的一種方法。例如，在復雜的數據建模或分析期間，用戶輸入的注釋可以在稍后時刻提醒用戶創建模型的原因，以及他們創建模型時試圖回答的問題。

05 協調多個工具和工作空間之間的轉換

復雜應用程序用戶通常跨多個工具和多個工作區工作。即使用戶大部分工作主要依賴于一個專用應用程序，他們仍會出于多種原因而頻繁切換應用程序。例如，當主要軟件不支持該操作時，可以從在線數據庫中收集數據，查找和參考文章或其他外部文檔，或者在其他應用程序中做自己的注釋和評論。即使是在主應用程序中，存在軟件附加組件或其他啟用應用程序中各種專門功能的可選軟件包，用戶也可能在不同的環境或工作空間之間轉換。

通過支持從一個環境轉換到另一個環境（包括主應用程序內部和外部），減少工具切換的負擔。

減少工具切換負擔的一種方法是簡單地接受這個生態系統，并在主要應用程序和經常使用的第三方工具之間設計連接點。例如，復雜的工作通常需要協作和報告。將數據集導出到Excel或將圖像導出到PowerPoint的內置功能，使用戶在試圖編譯報告和演示文稿時節省寶貴的時間，否則將花費在轉換數據或屏幕快照圖像上。

06 減少混亂而不降低能力

復雜的應用程序通常旨在適應廣泛的用途。例如，環境機構用來測量和跟蹤蜜蜂生產的分析監測軟件也可能被汽車公司用來監測機器故障。使用場景的多樣性一方面使復雜的應用程序非常強大，但另一方面又常常非?；靵y。此外，復雜的應用程序通常必須同時支持新手和專家用戶，并且專家用戶可能需要新手用戶很少訪問的高級功能。

通過在不降低應用程序功能的情況下，地減少界面內混亂的外觀，幫助用戶管理在復雜應用程序中普遍存在的選擇、特性和功能過載問題。

分階段公開是一種減少混亂的方法，僅在選項與手頭任務或重點項目相關時才向用戶顯示選項。例如，只有在復雜表單或向導中選中相關字段后才顯示高級參數或設置，這就是與復雜應用程序相關的分階段公開的一個例子。

07 簡化主要和次要信息的轉換

即使在界面中有效地減少了混亂，也不是所有的元素和信息都能（或應該）一次顯示出來。有些信息必須放到二級層次；然而，次要信息通常是必要的，以作為有關主要層次的信息的決定的上下文參考。

通過允許用戶在不離開主屏幕或環境的情況下訪問和查看補充信息，簡化主信息和輔助信息之間的轉換，并幫助用戶將主信息置于上下文中。

儀表板通常支持此原理，例如，當用戶將鼠標懸停在圖表或圖形中的特定點上時，它允許用戶在工具提示中查看更的定量數據。

08 視覺上突出重要信息

復雜應用程序用戶執行的許多任務需要高度的視覺搜索。舉幾個例子：用戶可能需要在巨大表格中的表格視圖中查找和區分相關數據。系統警報必須引起用戶對界面相關部分的注意，以便用戶可以及時注意到并糾正潛在情況。在儀表板上簡單地查看和理解數據可視化也有一個重要的可視化搜索組件。在復雜的應用程序中，大量競爭信息和元素可能會阻礙這些任務。

通過在視覺上突出關鍵元素（例如，讓它們從周圍元素中脫穎而出），幫助用戶找到重要信息并對其采取行動。值得注意的是，突出重要信息并不總是意味著要強調這些信息（例如，明亮的顏色或加重字體粗細）。去掉不必要的元素可以同樣、甚至更有效地使重要信息在視覺上顯得突出。

例如，刪除無用的多余圖形或視覺元素可以讓留下的數據脫穎而出。儀表板模塊從數據元素中消除了不明顯的、難以理解的插圖，從而減輕試圖在儀表板上定位數據的用戶的視覺搜索負擔，支持這一原則。

結論

復雜的應用程序是多種多樣的，支持各種用戶類型和工作流；然而，類似的挑戰存在于各種領域的復雜應用程序中。遵循這8條設計準則優化復雜的應用程序：

1. 邊做邊學

2. 幫助用戶采用更有效的方法來完成任務

3. 提供靈活而流暢的途徑

4. 幫助用戶跟蹤動作和思考過程

5. 協調多個工具和工作空間之間的轉換

6. 減少混亂而不降低能力

7. 簡化主要和次要信息之間的轉換

8. 視覺上突出重要信息

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

不知道大家有沒有聽過這么一個故事：某家餐廳銷量一直不太好，老板究其原因也沒有查明白到底是為啥，明明選址在鬧市區，價格也很實惠，就是賣不出去；后來老板請了個“大師”幫忙一探究竟，大師說你家盤子顏色不行，換成橙色保準牛X；老板立馬認購了一批橙色盤子，從那以后以后這家餐廳火爆了，王境澤都覺著香的不行…

聽完這個故事，自此我幼小的心靈里把橙色和食欲劃了等號。這個烙印直到我從業前幾年還一直這么覺著。同時間段，在9年義務教育的美術課本上，我得到了有生以來第一次對色彩這門學問的細致輸入，了解到了各種顏色對應的含義與情緒：

這種色彩與情緒的映射關系在我的腦袋里根深蒂固 / 無法磨滅，直到有那么一場面試或者匯報，面試官/老板問我，“為什么你要選擇這個顏色作為品牌色呢？”

面對著一手塑造出來的社交應用，我解釋到：“因為紅色代表著熱鬧，這個顏色會賦予這款產品熱鬧的氛圍”。坦誠的講，這個解釋自信但空洞，顏色本身并無好壞和指向，只看你用在了什么地方，不講究場景就別輕易定性。

這也側面反映出來慣性思維的不斷吞噬著你我的思路，過往的“經驗”可以讓人習以為常，也可以讓人尷尬不已，取決于是否洞察的到。如果拋棄慣性思維，到底如何去定義一款產品的主色呢？

STEP 1

說實話選取一個顏色作為品牌色是一個戰略決策過程，一般來說行業里一定存在一種主流顏色，像旅游行業的攜程/去哪兒和途牛，還有以淘寶為代表的電商行業通常是喜慶的大紅大橙。

顯而易見基于這個邏輯下，有3個做法，一條路是順勢而為，一條是逆向而去，還有一條是另辟蹊徑。這塊的選擇一定程度上并不是設計師可以決定的，需要結合整個業務的方向去判斷；在旅游行業里馬蜂窩選擇了逆向而去，在直播行業里抖音就選擇了另辟蹊徑。

我們試著揣測下抖音和馬蜂窩的想法，在產品的定位和策略的打法上，他們更注重的是差異化，走反方向的路突出品牌，試圖在用戶的心里站得住。通過這個例子你或許會發現，黑色未必死氣沉沉，ta也可以色彩斑斕；黃色未必只象征尊貴，ta也可以代表青春和希望；顏色沒有偏向，只看使用在什么場景上。

主色的選擇更需要貼合業務戰略的發展，也更多的偏向于主觀。給業務提供思路和方向，判斷不好業務方向的時候，多提供思路幫助其更好的匹配顏色。

STEP 2

以往的面試里，我這種好事的面試官就特別喜歡問侯選人一個問題：“一個色相里有那么多色號，為什么你定了這個色號作為品牌色？”大部分候選人乍一聽都是面露難色，心里大概想著這人是個傻X吧，能問這種問題，哈哈哈哈哈哈；廢話不多說，我來簡單分享下我的方法：

首先以黑白兩色（#000000-#FFFFFF）作為起始點設置10個梯度，然后把第一個模塊定義的色相扔進去，只需要調整HSB中的H就可以，這樣一頓操作下來你就得到了一個完整的色彩序列：

第二步，基于序列主觀調整下顏色，確定主色的同時確保其在黑白2種背景上對比度大于4.5：1（wcag色彩可用性標準），理論上來講梯度中間是最合適的，飽和和亮度足夠就可以。

上圖是我用到的色彩可用性測試工具-color review（https://color.review/）

STEP 3

當你準備好了以上所有工作，最后一步就是拓展色系了；這里采用負能量補給站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作為主色并結合下google的方法開始拓展色系。

首先 - 確認同色系輔助色：我們將主色的色相加減 30° （谷歌是以10為梯度，但色相變化不大，為了效果我們以3倍作為最小單位）獲得2個新顏色，即同色系輔助色。

其次 - 確認對比色輔助色，將主色的色相加上 180° 獲得其互補色，即對比色系輔助色。為了和主色的類似色對應，取互補色的同類色（色相加減 15°）和類似色（色相加減 30°）。從中選取需要的顏色作為最終的對比色系輔助色。

根據色彩需求取同類色2和類似色1作為最終的對比色系輔助色，這樣，我們得到了主色和四個輔助色；同理你可以推理出無色彩傾向的中性色系（這里就不展開贅述）。

最后你可以通過編碼的方式，賦予每個顏色一個token（密鑰），方便團隊的配合和使用。

以上就是我在選取色彩的大概思路，市面上也有很多講顏色的好文，分享大家去找找。

總結一下

隨著工作經驗/時長的不多增加，我們往往會對事物的存在習以為常，思維的慣性會困住我們追根溯源的想法，但需求和場景是千變萬化的，所有的方法也都針對的是通用場景，標準化的解決方案未必適用你當下的處境；試著在熟悉的環境用敏銳的洞察和科學的方法突圍也許是最好的辦法。

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

動效對產品的可用性體驗有多維度的影響。在界面中動效不僅僅是一種視覺裝飾，它能夠提升產品的參與度并擴展交流的范圍。

本文追根溯源，先從動效的起源講起，一步步推進與產品、體驗之間的關系，最后通過案例分析動效設計的原理和應用。一起來看看吧～

一、動效設計的起源

動效與用戶體驗的結合相對較新，其根源是迪士尼動畫設計的十二個條基本原理。迪士尼動畫原理是為了講故事而提煉出的基本的物理運動規律。這些原理能讓繪制的卡通角色移動和表演，但不能充分滿足現代UI界面的交互需求。

為了彌合這個差距，動效專家Canedo Estrada改編的《動效設計的10條原理》更適合應用到數字產品設計中。

在圍繞界面元素建立用戶體驗時，重新定位動效原理的關鍵在于：

• 將動效設計與UI動畫區分開;
• 闡明動效如何幫助可用性;
• 解開核心動效的內部工作機制。

二、動效設計與用戶體驗

在討論動效設計的原理之前，重要的是要強調動效不僅僅是裝飾，而是一種用來幫助用戶體驗的行為。動效設計涉及兩種基本的交互類型：實時和非實時。

 實時 

當用戶在屏幕上點擊UI元素時，實時交互提供即時反饋，會對用戶的操作做出即時響應。

 非實時 

非實時交互發生在用戶操作后，這意味著用戶需要經過短暫的轉場才能看到結果，然后再繼續。

另外動效設計通過四種不同的方式來提升產品的可用性：

1.期望：當用戶與界面交互時，他們期望看到哪些行為？動效是否符合預期或引起混亂？

2.連續性：交互在整個體驗中是否發生一致的運動行為？

3.敘述：觸發的動作是否與滿足用戶意圖的事件的邏輯進程相關聯？

4.關系：UI界面的空間、美學和層級結構如何相互關聯并影響用戶的決策？動效如何影響各種元素的關系？

三、產品動效設計原理

這里提供12種動效設計原理的解析，每一種對應不同的案例，從更直觀的角度來解讀抽象的原理。

1、緩動(Easing)

緩動效果模擬了現實世界中對象隨時間加速或減速的方式。它適用于所有運動的UI元素。下圖中的卡片和對應的椅子移動速度很快，但由于緩動效果它們可以平穩地受到控制。

2、偏移和延遲(Offset & Delay)

當多個UI元素同時快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素自身的功能性。

偏移和延遲會在移動的UI元素之間創建層級結構，并傳達它們相關但又不同的消息。元素的時間、速度和間距不是完全同步的，而是交錯排列從而產生一種微妙的“一個接一個”的效果。

當用戶在屏幕之間穿梭時，偏移和延遲表明存在多個交互選項。

3、父子關系(Parenting)

父子關系將一個元素的屬性鏈接到其他元素中。當父元素中的屬性更改時，子元素的鏈接屬性也會更改，同時所有元素的屬性都可以相互鏈接。

在下圖中，將父元素(藍色滑塊)的位置與子元素(燈泡發光效果&光照強度)相關聯。當父元素左右移動時，子元素的發光效果的范圍和光照強度的數值會發生變化。

父子關系在元素間創建關系并建立層級結構，允許多個元素同時與用戶交互。因此這種效果非常適用于實時交互中。

4、轉換(Transformation)

當一種UI元素變成另一種形式時就會發生轉換。例如，轉換展示了下載的開始、中間和完成狀態——下載按鈕轉換為進度條，進度條轉換為完成圖標。

從UX角度看，轉換效果告知用戶元素的狀態發生了變化并將信息傳遞給用戶，提高了用戶的認知度。

5、數值變化(Value Change)

數值的變化(數字、文本或圖形）在數字界面中非常豐富，從銀行APP到日歷到電商網站的各種產品中都會出現。

在某種程度上，數據的動態表達和交流可能會對數據的價值產生影響。例如下圖中的數值被動態引入，向用戶顯示他們有能力影響數據，提升了參與活動的意愿。

6、遮罩(Masking)

遮罩是對界面上的部分內容進行戰略性的顯示和隱藏。通過改變元素的形狀和比例，在改變元素效果的同時允許元素本身保持可識別性。因此，照片和插圖等視覺形式是理想的選擇。

從可用性的角度來看，設計師可以通過遮罩向用戶展示產品正在進行一系列的交互。

7、覆蓋(Overlay)

二維空間中沒有深度，元素只能沿X或Y軸移動，疊加在界面中創造出前景/背景相區分的位置關系。通過模擬深度，覆蓋可以根據用戶的需要隱藏和顯示元素。

在使用覆蓋時，信息層級結構是重要的考慮因素。例如，用戶在筆記應用中首先應該看到的是筆記列表，然后使用覆蓋來顯示每個筆記的輔助選項，如刪除或歸檔。

8、克隆(Cloning)

克隆是將現有的對象拆分成新對象,這是一種突出顯示重要信息或交互選項的方法。

通過克隆將元素與界面相鏈接，如果元素只是突然出現或消失沒有關聯性，那么用戶將缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃門，雖然看不清門后的東西但是我們能察覺到門后事物的存在。

模糊的工作原理是一樣的。它為用戶提供提示，讓用戶意識到自己正在操作的界面之后還有其他的層級結構。導航菜單、密碼屏幕和文件窗口是常見的示例。

10、視差(Parallax)

當兩個(或更多)元素同時以不同的速度移動時會構成視差效果。

視差的主要目的是劃分層級結構：

• 可交互的元素移動速度更快，出現在前景中;
• 非交互式元素移動速度較慢，退到背景中。

視差引導用戶點擊可交互的元素，同時允許非交互的元素保留在屏幕上并保持設計的統一性。

11、維度(Dimensionality)

維度使界面元素具備具多個方向的交互，這種行為是使元素看起來是可折疊、可翻轉、浮動的或具有深度。

作為一種敘述性工具，維度意味著元素的不同側面是相互聯系的，并且可以實現無縫的屏幕過渡。

12、平移與縮放(Dolly & Zoom)

平移與縮放通過視角的變化能產生更多空間上的體驗，逐級遞進顯示更高級別的細節。

平移：點擊元素后發生距離遠近的平移，用戶的視點會越來越接近圖像。(一個人拿著照相機走到一朵花前面近距離拍攝)

縮放：用戶的視角與圖像的距離保持不變，但圖像在屏幕中的比例會增加。(這個人站在原地不動，只利用相機的變焦功能使花顯得更大)

四、總結——動效即交流

互動體驗要求動效具備敏捷和微妙的形式。堅持動效設計原理，即使最基本的界面元素也能成為交流的復雜媒介。

動效設計與產品用戶體驗之間的關系正在迅速成熟，而且動效跨越了二維屏幕上元素的抽象運動和3D世界中對運動的感知之間的鴻溝。

文章來源：UI中國   作者：Clip設計夾

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

你覺得設計系統重要嗎？那目前手里的設計系統是在靈活運用？還是落灰、擺設？你對設計系統理解有多深？它在你的設計中有多大的用處？節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范？那怎么避免設計系統帶來了統一和便利，但同時失去了變化和新鮮感？

設計系統是今年來熱門的話題之一，想要帶來良好的用戶體驗，設計系統就是其中重要的一環，那它和設計規范、設計模式、設計語言、設計原則有什么關系？

設計系統

設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔，在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的，是需要維護與改進的。

設計模式

設計模式是一種經常性，可重復使用的解決方案，可用于解決設計問題，我們經常會說解決整個方案我們要運用什么樣的設計模式。

設計語言

設計語言是把設計作為一種“溝通的方式”，用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。

設計原則

設計原則可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。

比如Airbnb的設計原則可以簡單歸納為幾點：

設計規范

設計規范對于設計師來說并不陌生，日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準，針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率，同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。

那是不是只要制作一套設計系統，在團隊進行擴散就可以了？那平臺的統一性就解決了？

我曾經加入一個設計團隊，看到平臺風格不統一，當時很自豪很堅定的制定了一套平臺設計規范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當時一心想著有這個規范寶典在手，平臺統一性指日可待，沒想到這個規范就成了我自己的規范，僅僅是我在自嗨。

為什么已經建立設計規范了，還是沒能解決平臺統一的問題？這里延伸出另一個問題，為什么其他設計成員不用？協作不起來？是它不夠好？我嚴格按照標準來，為什么推不起來？

那要追溯到設計體系的目的是什么？它的意義何在？

1-建立統一的設計文化體系

2-保證多團隊成員共同參與的項目視覺一致性

3-提升品牌調性

4-節省與研發人員的溝通成本

5-將元素組件化，提升設計師和程序員的工作效率

6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。

7-在用戶層方面，對某產品的體驗一致性得到落實

8-減少設計出錯率

……

整體可以歸納為

1-對內統一，對外區分

2-管理與協作變得方便

3-建立設計文化體系，建立品牌感

4-減少、優化錯誤出現

對內統一，對外區分

規范定義的基礎是圍繞某種風格或者設計文化。對內統一，一個品牌的設計風格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分，一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站，各個頁面的設計差異明顯，像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。

管理與協作變得方便

for Designer:

多個設計成員協同一個產品，迭代與更改規范都能更快的同步?？梢栽囍胂笠幌乱粋€幾十人的設計團隊，如果沒有統一設計規范，那網站會變成什么樣子。

for Developer:

在UI還原中，設計需要經常與前端進行溝通“這里這里這樣做，那里那里這樣做”，對于每一塊的設計，前端都會詢問你，這樣大大增加了溝通的成本，把時間花在了無效的事情上。

設計規范統一后，減少了無效溝通，可以更專注創新方向，比如：要改變預先設定的一個輔助色，無論是設計還是開發，修改組件的顏色，全局使用到這個組件的地方都會改動，大大節省了設計時間。

建立設計文化體系，突出品牌感

做品牌的時候需要制定一整套VI規范手冊，那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式，更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂，看到界面都可以立馬識別出這是哪個app。

你能分出哪個是網易云播放界面，哪個是QQ音樂播放界面嗎？

減少、優化錯誤出現

設計經常碰到設計完后需要修改一個點，然后就要找出設計稿中所有相同的地方進行修改，這樣很容易漏，統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。

設計規范的意義這么強大，對網站及品牌有至關重要的作用，那為什么還會出現沒有應用起來的情況呢？

很多設計師會說：“設計不就應該是變化多端的嗎？就是要表現創新力呀？制定了設計規范是不是就失去了變化和新鮮感？那設計還有什么意義？開發都可以做設計的事情了。”

這里就要看對設計規范理解的深度—設計規范是分層次的，平臺規范歸根結底是為了確保產品的易用性，是為了減少用戶的學習成本

對無法拆分的底層基礎元素做嚴格規定

底層基礎元素也可以說是全局樣式，比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素，給用戶一種統一的視覺形象，在跨界面、跨端、跨系統間有熟悉感，從而潛移默化地進行品牌的滲透。

增強界面設計的靈活性和可維護性

對組合自由度較低的基礎組件做精簡的樣式變化限定，對組合自由度較高的復合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態，多種可能。

設計規范隨著業務的發展或技術的變革終究是會過時的，是需要迭代的。

設計規范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經配不上今年的我，嘻嘻

~~希望我每天都有新衣服穿，做夢中～

對設計體系的誤解

設計體系最大的重要性毋庸置疑就是規范節省人力，設計師可以更多的時間去發揮創造性。

誤解1-設計系統限制了設計師的創造力

很多設計師覺得統一了規范，那我的創造性從哪發揮，界面都長的差不多。在設計中，設計目的是解決商業或用戶的問題，并不僅僅是為了有創意而引入新的樣式或交互方式。

有了設計體系，統一了整體品牌風格，不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上，更多的回去關注更全局的設計策略。

誤解2-設計系統只關乎設計，可由設計師獨立完成

它僅僅是設計軟件上可復用的組件，所以可由設計師獨立完成，這種想法是錯誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動態設計、 用戶研究等。

誤解3-設計系統是一勞永逸的

有時候會想只要完成了規范就大功告成了，其實不然，對待設計規范就像對待產品一樣，是需要維護和改進的，包括兩個方面：一種是對內部使用的開發以及同事，一種是對用戶的，應該定期收集用戶以及同事的反饋，確保及時更新迭代。

誤解4-設計系統的重要性

1-提高設計開發效率，最顯而易見的好處就是，組件庫的可復用性。

比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。

2-確保設計一致性，為用戶提供連貫一致的用戶體驗，設計的一致性讓用戶能縮短的學習使用產品的周期，讓他們能夠預見他們的操作所帶來的改變。

網站統一的視覺規范、交互體驗，會讓用戶產生一種掌控感。

3-設計系統促進了公司內部的合作和交流，一個成功的設計系統是需要跨功能團隊參與，設計系統因此促進了公司內部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產品或服務。

那我們要如何去執行呢？

已經了解了規范的目的/意義，那該怎么去著手呢？

• 對于設計規范的意義要同步給設計人員，提高認知，這是一件提率的規范，規范必須落地。

在制定規范前期，不應該是一個人規定這個規范，設計團隊的成員應積極參與，前期先把規范的基調定好，人人都參與進來了，規范也就能更好的運營，當時我就是一個人定了規范，只是單純把規范發給其他設計人員，他們沒有參與，自然不會使用規范，對里面的設計元素沒有加深理解。

主導人

這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力，這樣能把紕漏降到。

• 應用規范里的界面、交互規范必須得遵循

大家一般說的設計規范是界面的視覺規范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關系，可以歸納規范其實可以包含兩大類，一類是視覺規范，一類是交互規范。

視覺規范可以給用戶傳達統一的品牌形象，確保視覺一致性。后期的設計元素須復合規范的原則。

交互規范可以減少用戶的學習成本，讓用戶有歸屬感。交互規范在制定的過程中，需要寫好交互規則與條件，不然后期維護會混亂。像蓋房子一樣，地基都沒打穩的話，整個樓都是偏的。

那在使用規范時，一定要遵循規范里的要求進行應用，否則會亂套，不僅起不到統一的品牌風格，反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。

設計規范的節點

節點和公司的進度搭邊，看當前的產品是應該先獨立風格還是先統一基礎規范。

1-固定的設計風格規范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊，定好基調，不會走偏。

2-不斷優化的設計規范，根據公司的節奏，有些產品目前比較迫切的是需要界面統一性、交互統一性。基礎做完以后，進而考慮產品固定風格。這種比較適合小團隊協作。可以隨時調整。

建立規范

·制作原理—利用粒子構成的原理與三維解構

利用粒子構成的原理與三維解構，一個組件被科學的三維解析后由粒子再構成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變，高度靈活

·具體過程

建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。

·元素是工具庫的必要部分

并不是每個時刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。

·組件的命名規范化

規范組件命名，方便查找、方便協作。

協作

一鍵導出/同步組件到Sketch模板。

標注方面，目前我們團隊使用的是藍湖私有化。

那是不是所有的公司都需要創建設計系統？

一般情況下，公司有不同的產品線，且都需要長期的開發與迭代。

公司中，越來越多的設計師加入，設計風格需要統一。

那建立一套設計體系會面臨什么挑戰？

設計體系里面包含了設計語言、設計規范，需要與前端、品牌、動態設計、 用戶研究等溝通，還是需要迭代優化的，這是非常繁瑣耗時的項目，初期會非常的艱難，當設計師開始做組件時，也是非常耗時的工作，需要考慮不同場景下的使用情況以及設計的延展性，都需要投入大量的設計人力。

聊了這么多，大家對設計系統有了一定了解，建立好設計系統可以事半功倍，以此提升效率才能提升UED價值。

思考點：

1-對于設計團隊只有一兩個人的時候，是否需要建立設計系統？

2-你是否愿意把時間花費在前期建立設計系統，后期更多時間用于創造性地東西？

3-建立設計系統前很枯燥，你會怎么堅持，怎么讓設計體系價值更大化？

排名榜單數據在我們日常生活中經常會遇到：

比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等

都會涉及到，可以說排名數據已經涉及到了我們生活中的方方面面。

那我們應該如何做好榜單排名數據可視化呢？

我們常遇到的榜單排名數據主要分為兩種：

↑ 榜單排名數據分類

1. 一種是無數據的排名，也就是只有排名和名稱；

2. 另外一種就是有數據的排名，也就是包含了具體的數值；

   
   

那么，本篇文章我將按無數據的排名和有數據的排名，給大家帶來，當我們遇到榜單排名數據時，應該如何將圖做的更好看！

總共涉及到大于15種可視化表現形式，希望能夠對你有所幫助！

一 沒有數值的排名數據，如何做得好看？

1 基于數字本身去做變化

最簡單的方法，我們可以從排名的數字本身去做優化，比如將排名數字1、2、3....去做內容的填充豐富，改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...

還可以基于數字本身所處的環境去做優化，比如在其底部加入填充形狀墊底，讓數字排名更突顯出來（如正方形、矩形等等）。

通過這兩種形式，可以讓單調的排名數字有了更多的細節，內容更豐富，展示更好看。

↑ 基于數字本身去做優化的案例

2 基于整體，通過形狀元素去做變化

在數字本身變化的基礎上我們還可以加入對文字的變化，比如在文字的底部墊上形狀（如圓圈、條形圖等等）。這樣通過對數字和文字本身的設計強調，就從整體上得到了優化。

↑在文字底部墊上圓圈，在整體上突出設計感

雖然排名沒有具體的數值，無法生成條形圖，但是依舊可以通過等比縮放的矩形來強調文字，比如倒立金字塔和橫向柱狀圖。

↑通過矩形形成倒立金字塔和條形圖，在整體來突出設計感

3 基于內容主題傳達，來做變化

3.1借助icon元素，來做變化

如果排名數據內容所傳達的主題是品類、物品、或者城市，那么就可以借助icon來豐富可視化。

3.2 借助定制插畫，來做變化

排名的數據如果涉及的是品類中的細分物品，比如生活中常見到的吃的、穿的，用的，那么就可以使用定制插畫來豐富排名可視化。

3.3 借助頭像、品牌LOGO、產品實景圖，來做變化

當我們的排名數據中涉及到了人物、品牌、產品之間的排名時，我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。

3.4借助地圖，來做變化

如果排名數據講的是省份之間的排名對比，那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖，一定要注意使用中國標準的地圖，當然基于設計的風格，你也可以使用簡約風格，去掉地圖元素，只保留可視化的部分。

4 借助背景設計元素，去做變化

排名數據也可以借助視覺背景模板來做變化，比如在涉及某個主題排名榜單時（如淘榜單、星數榜單等）就可以通過背景視覺元素來突出排名。

其實這種背景視覺模板，對可視化的要求并不高，你只需將排名通過單一表格的形式展示出來，但需要一個很強的視覺背景版來做襯托，這樣，做好一個模板，其余的榜單都可以進行復制使用了。

二 如果排名數據包含數值，如何做得好看？

1 基礎可視化排名數據圖

如果數值單一，那么可以通過常規的可視化表現形式進行展示（如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等）。

1.1 橫向柱狀圖展示

結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀，特別適合單一排名數據之間的對比展示。

1.2 餅圖、圓圈大小占比展示

如果排名數據中數值所傳達的是占比，那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。

1.3 直角三角形柱狀圖（柱狀圖變種）展示

通常我們會使用常規的豎向柱狀圖來表現數值的大小，但其實還可以對其進行一點點變形，比如將柱子的右側直角邊去掉，那么就變身成為了直角三角形柱狀圖。

這時如果排名的文字比較多，我們還可以將排名和文字置于柱子的上方進行展示，一方面節省了空間，另一方面在視覺上也起到了美觀度。

1.4 180°變種柱狀圖展示

柱狀圖的變種，在《如何做出比別人好看的柱狀圖？》系列文章中有講到，大家對如何實現這種形式感興趣的可以看下之前的文章，同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。

2 將主題元素和基礎可視化排名圖進行結合

除了基礎的可視化展示和排名數據結合外，如果排名數據所涉及的是一些主題元素（如生活中吃的、穿的、用的等等）。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。

3 使用?；鶊D來體現排名

當排名的數據中，還多了一列數據涉及到分類， 那么就可以使用?；鶊D來進行可視化的展示（如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等）。對如何實現?；鶊D感興趣的可以看看之前發的桑基圖教程。

4 排名連線圖展示

如果我們的排名數據中，還涉及到了年份的排名變化，比如省份之前的年度排名，那么就可以使用排名連線圖，通過線段的上下連線走向來看省份之間排名的上升或下降，同時這種數據還非常的適合做成動態柱狀、折線圖（在后面會講到）。

4 排名連線圖展示

如果我們的排名數據中，還涉及到了年份的排名變化，比如省份之前的年度排名，那么就可以使用排名連線圖，通過線段的上下連線走向來看省份之間排名的上升或下降，同時這種數據還非常的適合做成動態柱狀、折線圖（在后面會講到）。

5 地圖展示

和第一節講到的地圖一樣，如果排名數據中涉及到了地理位置數據，那么可以結合地圖進行排名數據的展示。通常情況下，完成地圖可視化后，可將具體的排名信息以表格的形式羅列在地圖的空白區域內，這樣結合地圖和具體的詳細排名數據，就會更加的直觀和豐富。

6 組合圖展示

如果我們的排名數據維度非常的豐富，數據所包含的信息點在3個以上，那么就可以通過將多種可視化的表現來進行結合，通過組合式的可視化來進行展示。

7 動態柱狀圖、動態折線圖展示排名

7.1 動態柱狀圖

排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化，那么可以通過柱子從上到下一個一個地出現來進行展示（如下圖左),如果涉及到年份的變化， 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示（如下圖右）。

動態柱狀圖的實現方法也很多，我在想做出漂亮的圖表，這12個網站不能錯過！中有講過，可以通過flourish網站（https://flourish.studio/）來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖，也可以使用B站UP主見齊的開源可視化項目（http://r6d.cn/JdYy）進行實現。

7.2 動態折線圖

同樣的我們還可以通過動態折線圖的形式進行展示，這種表現形式主要看的是排名的趨勢變化，同樣的，借助flourish網站（https://flourish.studio/）就可以實現這種動態折線圖的展示效果。

8 3D建模渲染可視化展示

當然，我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示，比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。

8.1 3D柱狀圖展示

將基礎的柱狀圖，通過3D立體柱狀圖的形式進行展示，排名的結果并不是啪的一下直接公布，而是隨著鏡頭慢慢地公開，對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺！

8.2 3D內容場景展示

如果我們的數據，所要傳達的信息非常富有主題場景感，那么就可以通過3D場景渲染的形式進行展示，比如下圖GIF中，在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生，置于一個教室中，再通過鏡頭的移動位移來進行展示。

這種展示形式，實際投入成本還是很大的，從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式，要不然就會出現”雖然視頻本身展示酷炫，但是由于選題不好，最終播放量不高“的尷尬情況。

三 做好排名數據的一些小事項

1 時間緊急時，一切從簡

比如說，當我們在時間非常緊急的時候，排名數據如果是和地理數據相關的，那么我們會盡量避免使用地圖元素來豐富可視化，因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示，雖然會丟失掉一些美觀度，但是正確性會有更高的保障。

2 強調重點數據

基于文章內容，需要在圖中重點強調某些數據時，可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.

四 總結

排名數據看似簡單，但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時，這篇文章能夠對你有所幫助！

文章來源：站酷   作者：鄒磊ZouL

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

用戶畫像作為一種設計工具，可以很好得幫助設計師跳出“為自己設計”的慣性思維，聚焦目標用戶，發現核心價值，賦能產品。