最近一系列的對話讓我意識到，類似于用戶體驗成熟度模型（UX Maturity Model），我們同樣需要一套設計研究的成熟度模型（Design Research Maturity Model）。
在我看來，將某一領域的成熟框架死搬硬套地應用于所有企業，而忽略企業自身的使命或業務結構，是毫無幫助的。這種過度簡化，甚至會導致企業自嗨式地以為自己每一步都做到了。
總體的能力成熟度模型（overarching Capability Maturity Model），沿用自美國國防部（Department of Defense），不過目前為止依舊是一個尚未被驗證的框架?？赡懿幌裢ǔＲ饬x上講的“硬技能（hard skills）和軟技能（soft skills）”那樣廣為人知也弊端明顯，但確實值得商榷。
因為任何值得做的事，都值得去質疑是否真值得去做。
因此，對于組織中真正想要通過評估產品和系統設計而持續探究領域潛能的個人，我提出這5個探索性問題。（最終，我會探索出一些類似節日五角星那樣比較直觀的視覺符號來展示每一個維度的進階梯度和它們所代表的含義。）
這5個問題能幫你衡量所在組織做出更好設計研究的潛力，并讓你在精準表達和實現組織目標上做得更好。
To what extent is it safe for anyone in your organization to admit they don’t know something?
我之前有提到過這一點，如果一個人不承認自己知識欠缺時，是不可能虛心學習的。當組織內越多的人感覺到承認無知是安全的時，就越容易讓你的組織處于持續學習并能毫無障礙地分享洞察的狀態。
To what extent does inquiry start with identifying the question before picking a method?
很多組織偏執地認為定量數據本質上就比定性數據更有價值，或是條件反射式地運用用戶訪談和問卷調研去回答任何類型的問題。你要解決的問題會告訴你什么是最好的解決方案：是去閱讀文獻報告，或是做個問卷調研，或者做一輪訪談。你需要在調研前，先描述清楚問題。舉個例子，如果你已經接受的實踐方案是在烤箱內放入一把尺子看它是否溫度足夠，那么，你放多少把尺子都無濟于事。
To what extent is identifying and sharing questions across disciplines and departments an organizational priority?
我們花了很多精力去建立知識庫（research repositories）和知識分享，卻沒有花足夠的精力讓每個員工去理解一個組織需要知道的知識以及為什么需要知道。部門墻和職能墻持續存在。（比如為什么要將市場研究和產品研究區分開來？）跨職能和部門的協作探索（Coordinated inquiry）是效率和創新思維的源泉。圍繞某個問題討論并達成一致也能增進合作，因為個體和團隊都不會再為了爭奪一個神話般的勝利而爭論不休。
To what extent is the basis of decision-making clear at every level?
我們擅長對外提問，卻很容易忽視企業內部的現實。組織本身就是組織制定決策的社會背景，而這些決策工作也應該能被組織內想弄明白和受影響的人明確理解。
To what extent do the insights that emerge from systematic inquiry inform decision-making?
這是最終測試。如果設計研究產生的洞察容易被管理者忽視，那不論研究本身有多么穩健強大，都會毫無意義。
一種從目標（goals），到問題（questions），再到在明確的證據標準內運行的洞察力（insights operating within clear standards of evidence），所形成的功能反饋閉環，應該是每個組織的愿望。
翻譯：賈婷 審校：LilyZhou
原作者：Erika Hall
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在如今的工作中（尤其是 B 端）越來越多的會開始出現數據可視化的身影，對于一部分小伙伴來說這個概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會表現的手足無措。所以，為了讓大家對于數據可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學習，解決一些屬于我們共同的問題。
那么我們還是老規矩，想要了解一個事物首先需要知道的是它的定義。
1. 數據可視化的定義
較為籠統的來說數據可視化是一種由圖形、圖像、數字等元素組成的語言用于解釋、呈現目標數據之間的關系。從這個定義上來看，數據可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數據可視化最為明顯的特征。
而結合我們實際的生活與工作來說，數據可視化是一種以圖形符號為主要表現形式，將不可見的、抽象的、復雜的、枯燥的、專業的、不直觀的數據內容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段完成自己的目標（例如對選定范圍內的數據進行分析，發現數據的周期與規律、迅速找到自己目標節點中的關鍵數值、對比幾組數據以了解當下研究對象的情況等）這也是數據可視化最為明顯的價值。
2. 可視化發展簡史
關于可視化的發展史上可追溯至 1950 年，當時人們利用計算機創建出了首批圖形圖表，可以說是數據可視化圖表最為早期的雛形，而在 50-60 年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813 對俄戰爭中法軍人力持續損失示意圖》為代表。
該圖描繪了拿破侖的軍隊自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰爭的重要數據分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動。
而可視化真正被提到一個應用理論的高度是到了 1987 年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學基金會報告《Visualization in Scientific Computing》（科學計算之中的可視化），其意在強調了基于計算機的可視化技術方法的必要性，此時的概念已經與現在我們所接觸的工作中的數據可視化是非常接近。
到了 90 年代初人們發起了一個稱為“信息可視化”的研究領域旨在為許多應用領域（科學、商業、行政、財務、數字媒體）之中對于抽象的異質性數據集的分析工作提供支持，與前面提到的“科學可視化”交叉形成了現在耳熟能詳的“數據可視化”，此時這個詞匯才慢慢的被更多的專業領域的人所接受，并在之后互聯網的不斷發展中擴充著自己的分支。
3. 為什么會使用數據可視化
目前大量開始使用視覺可視化的原因其實非常簡單大致的原因可以分為需要處理的數據量太大了和人腦不夠用了。
據不完全統計 IBM 公司每天有 2.5 億字節數據的吞吐量，麻省理工學院的研究科學家 Andrew McAfee 和 Erik Brynjolfsson 教授指出，如今在互聯網上傳遞的數據量比過去 20 年的總和還多，而且根據 IDC 預測，到 2025 年將有 163 萬億 GB 的數據。
這是非常驚人的，而這么多需求的數據量單憑人腦的計算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時處理 5 組以上的抽象數據，所以這種單線程的處理方式就決定了需要借助外力。
而對于用戶尤其是決策層的用戶來說在現實的工作場景中經常需要同時處理超過 5 組以上的數據并需要對其建立精準的分析模型以便于做出最準確的決策所以基于這樣的需求，數據可視化設計氤氳而生。
4. 數據可視化的優勢
基于數據可視化的需求來看，數據可視化的優勢是顯而易見的，可以概括為兩點：認知減負和傳遞賦能。
認知減負是使用者在使用數據可視化工具時候的最直觀感受，當所面對的龐大的、復雜的枯燥海量數據集變成了圖像化、通俗化、形象化的視覺符號時，我們會本能的放下對于面對冰冷數據時候的抗拒和戒備，這是因為人對于一目了然更加接近自己熟悉的有趣事物的時候，會更為親切和愿意去主動理解。而且被處理過、規劃過的簡潔直觀表現形式，能更為直接的讓使用者看到數據與數據之間的關聯，進而分析出其潛在關系，在人對數據的認知這個環節上降低了識別成本和分析成本。
傳遞賦能上圖像傳遞更接近人類最本能的獲取信息的方式，比起文字來說圖像更像是一個解密的步驟，通過解開文字描述這重“密碼”將最本質的信息進行呈現，而且對比文字，圖像所能夠承載的信息其實更為廣泛，而且人類讀圖的效率要遠遠高于閱讀文字。
無論是一個約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本。
5. 使用目標
基于用戶的使用目標來說，使用數據可視化其實就像是一個偵探用“蛛網圖”輔助自己梳理思緒進行破案的過程：將一些有關的，但是較為零散信息數據用一根根線索穿插起來，形成體系化的聯系，方便使用者迅速把握各個節點之間的關系進行推導。
所以說我們在設計數據可視化的時候并不是對我們拿到的數據的無腦映射，而是要基于用戶的目標經過一定的處理和優化后才能進行呈現，隨時記住我們是給用戶在打輔助，所以我們每一步的設計一定要基于用戶的思考。
用戶的期望是能夠高效、清晰、簡潔地完成數據的對比、關鍵節點的查詢、每組數據之間的分析等一系列交互，提升自己的工作效率，降低自己的學習和使用成本。
6. 應用場景
數據可視化的應用領域較為廣泛涉及醫療、統計、管理、金融、娛樂、人工智能等一系列領域，在 UI 的設計中我們最常接觸到的包括：PC 后臺的數據概覽、數據可視化大屏、游戲 UI、后臺實時監控等。
當我們大致了解了數據可視化的歷史、使用原因、優勢、用戶目標、應用領域后下面就要切入我們設計師最為關心的話題：我們在設計中的任務。
1. 設計難點
數據可視化作為一門跨領域的學科，本身對于從業者而言就有著一定的綜合素質要求，但由于國內教育并沒有垂直教學學科，所以在現在的階段從業人員一部分由純視覺設計專業的同學組成，另一部分由純工科類型的專業的同學組成。
于是這就導致了非視覺設計師在進行設計時，會將全副精力放在強數據的準確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現形式也較為單一枯燥，視覺感官較差，反觀視覺設計師通常會將數據可視化在視覺表現形式上過度用力，雖然營造了很好的視覺體驗，但是從其實用度、可用性上來說會大打折扣。
于是設計的難點很多時候就會集中在平衡視覺與實用之間的關系。
2. 設計目標
通過以上分析，不難看出設計的主要目標，而面對這句較為抽象的“把握設計與實用之間的平衡”其實無外乎也就是拆解到功能和視覺這兩個方面。
從功能上來說，我的目標是提升用戶的數據閱讀效率、讓用戶能夠迅速 Touch 到目標信息，提升交互效率，一切都是以結果為導向，以解決用戶問題為導向，一定記住人們不愿意接受未處理過的數據。
而從視覺上來說，我們的目標是處理好在視覺上各個模塊之間的統一、透氣關系，將數據進行可視化的同時盡量提升感官上的審美體驗與傳達上的有趣。
以上會作為后文中我們每一步設計的指導和檢驗的方式，從實際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗一定要讓位于功能，所以在視覺的層面發揮的空間其實需要比較克制。
了解了數據可視化的設計難點，明確了數據可視化的設計目標，那么我下面進入我們最重點的環節：可視化頁面案例制作，由于數據可視化的形式較多，這次我們以工作中經常接觸得到的 PC 頁面數據概覽頁為例。
同樣的，細化到數據概覽這個分支項目，我們同樣需要明確了解其基礎定義和性質，嚴格意義上來說數據概覽部分屬于 Dashboard design（儀表盤設計）的一種，其主要的目的和功能可分為分析和操作兩塊。
所以從綜合的角度來說數據概覽部分可以理解為：
其它模塊的摘要視圖，并顯示來自應用程序各個部分的關鍵信息，從這點上來說建議此模塊可以在其余模塊設計完后再進行設計，如此有利于設計師從一個全局的視角切入進行設計，理解上也會更加透徹，否則很可能會陷入在你設計其他模塊的時候不斷地返回對其進行修改的怪圈。
它也是核心功能、常用功能的快速操作助手和快捷頁面跳轉（有點類似于導航），交互功能的排布和關鍵信息的顯示，其共同的要求點是顯而易見的，即明確各個模塊之間的層級，做好順序、優先級排布。這就需要你對業務目標有一定的了解，記住，對業務目標不了解，你的設計將毫無意義。
你可以通過查詢一些內部資料、報告、也可以詢問產品經理等相關負責人，還可以通過用戶調研得出，這里不展開說，在動手之前你需要搞清楚：各模塊之間優先級如何、你需要在一張單獨的圖表內展示多少變量、想展示一段時間內的值是項目和項目之間還是組與組之間、每段變量中有多少關鍵數據需要展示等問題。
如上圖所示，在工作中我們接到需求的時候是面對一堆冗雜的數據集，組成了若干個模塊，但是正如上文所說，我們并不能對其進行無腦的可視化映射，所以首先要做的就是要對各個模塊進行優先級的梳理排序
明確了各個模塊的優先級排布之后，我們開始對每一個單獨模塊進行可視化轉化，即哪一個部分分別用什么類型的可視化形式表現，這一步非常類似于土地使用規劃，當你在將土地劃分完后，為每一塊土地定義其使用類型。
想準確的將圖表與所要表現的數據進行對應，需要了解圖表本身所包含的基本元素。
在這些元素中正常情況下一定在圖表中的有：標題、時間范圍、圖形主體，經常出現的有：坐標系、圖例、提示信息，有時候會有的有：切換選項和值域。
知道了這些重要的基礎信息了，那么在面對這么多圖表的時候我們該如何正確的選擇來進行使用呢？
其實和之前說的一樣：基于目的來進行思考，所謂的基于目的來進行思考也就是要明確你所確立的數據指標需要分析的維度，而日常使用的數據需要分析的維度無外乎：比較、構成、分布聯系。
比較類圖表
比較類圖表應該是大家最為熟悉的范疇，第一時間能夠想到的就是柱狀圖，這也是運用最為廣泛的圖表之一，經常出現在 PC 端之中，用于描述分類數據之間的對比，描述的數據可以是地區、品類甚至一個時間周期，但由于其擴展能力有限，所以一般不建議項目超過 12 條。
條形圖與柱狀圖類似，看上去只是交換了 X 軸與 Y 軸，功能和承載數據種類較為類似，但不同的是，條形所能承載的項目數量相對于柱狀圖而言更多，由于其優良的縱向延展性一般用于手機端較多，而且從上到下的閱讀方式符合人眼閱讀習慣，所以也會經常用于排行榜的設計中。
分組條形圖是條形圖的衍生之一用于比較多個變量在不同區域之間的數量關系，比如當想比較同樣一款衣服和鞋子在四個門店中的一個季度的營業額時就可以使用分組條形圖。
雙向條形圖表適合比較兩組以上的分類數據比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數據，也正是如此，雙向條形圖的組內二級分類數量一般不要超過 3 條最好。
折線圖與前者最大的不同就在于在坐標軸中加入了連續類別這個概念，數據基于時間等因素變得動態了起來，注重變化趨勢的展現。
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內積累的值。
玫瑰圖應該算是可視化圖表中的“網紅”，因為我們從小學的課本中就知道它還有一個別稱叫“南丁格爾玫瑰圖”。它是一種圓形的直方圖，使用半徑長短表示數值大小，其特點就在于因為其獨特的外觀可以將數值之間的差距在視覺層面進行放大，和將坐標軸范圍縮小來提升視覺上數值的碾壓是一個道理，發布會吹水最愛，但是要注意的是這不是一個表示占比構成的圖，因為玫瑰圖的每一份角度是一樣的，一定要和餅狀圖等圖區分開來，它用來表示的還是數值與數值之間的大小
雷達圖經常用于分析一些多維的性能數據、評分數據，經常打游戲的朋友應該不陌生，有多少五邊形選手可以扣個 1，每一項指標越接近圓心說明狀態越差，越向外說明越佳。
子彈圖用于比較當前數值與目標之間的關系，比如看當前業績是否達標，也可以通過標記劃分區域來進行更好的評估。
漏斗圖適用于業務流程比較規范、周期長、環節多的單流程單項分析，一定要有清晰的環節，比如監控買家從瀏覽到最后下單的數量統計以求得轉化率，不適合無邏輯、無流程的分類對比。
構成類圖表
構成類圖表整體上來說主要用于觀察部分和整體的占比關系，最經典的莫過于餅狀圖，這個不用多說，通過每一份半圓角度所占整個圓的大小來表示部分和整體的關系，但是由于其所占面積較大，經常會讓視覺過于集中，影響注意力。
相對于餅狀圖而言，環狀圖十分有效的避免的干擾視覺的問題，其本質是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設計中較為常用。
旭日圖相當于前面二者的結合，適用于展示多層級數據的占比關系，距離圓心越近代表層級越高，下一層級的總和構成上一層級，存在一定的父子層級關系。
堆疊面積圖出了可以表達趨勢外，其優勢在于能夠表達總量和分量的構成關系，堆疊面積圖上的最大的面積代表了所有的數據量的總和，是一個整體。各個疊起來的面積表示各個數據量的大小。
堆疊柱狀圖的優勢在于它既可以表達一級分類的比較，同時還能看出二級分類在其一級分類中的占比，但是缺點在于二級分類并不是按照同一基準線對齊的，相比于堆疊面積圖更為常用。
瀑布圖用表達兩個數值之間的變化過程，過程值為正的時候，向上加，過程值為負的時候向下減。
分布聯系類圖表
分布聯系類地圖在這兩年在國人的心中其實已經非常熟悉了，因為疫情今年的地圖可視化的應用經常出現在我們的生活中，地圖可以結合不同的表達方式：
可以結合散點、可以結合動畫、還可以結合引導線以及熱力圖的方式，圖的形式使用視具體的業務需求來定
最后就是氣泡圖，這是在查看分布關系中最為經典的視覺模型，用氣泡的面積大小表示數量，結合輔助線可以更好地觀察分布情況
當我們對每種圖表的功能和使用范圍有了一個較為明確的認知之后，下面我們就可以對我們之前所規劃好的優先級的模塊進行可視化形式（圖表）的匹配了。
進行匹配過后，我們將對布局進行重構，整體重構需要遵循的原則是
布局層級明確，首屏盡量曝光更多內容
從首屏曝光更多內容來說，主要是因為基于分析類的數據概覽工作場景和 Analytical dashboard 自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進行對各類信息的情況有基本的把控，達到一眼全局的目的，其主要注意力都會放在首屏，所以我們需要盡可能的在首屏安排更多的信息。
當然首屏內容也并不是越多越好，一般建議也盡量不要超過 7 組模塊，而在層級明確這塊兒主要是根據人眼閱讀習慣所產生的優先級排布：正常情況下都是左上為優先級最高，而右下優先級較低，這是無數經典的眼動測試和設計總結產生的最常用結論，就不展開敘述了，所以當我們按照優先級、首屏曝光更多內容的原則進行處理后會得到如上圖的布局。
統一透氣 具有呼吸感
這主要是視覺層面的問題，統一透氣的要求在首頁概覽中可以依靠柵格系統來解決，它可以有效的保持頁面布局一致性，為頁面建立基礎布局框架，將頁面中的所有元素都捆綁在一個體系之中，同時還能有效解決適配問題。
完成了大規劃之后，下面我們開始對一個一個的模塊進行拆解，同樣的以目標指導設計，邊設計邊驗證
層級明確 突出重點
和大規劃一樣，單獨到每一個圖表同樣要時刻注意層級的梳理，銷售渠道部分很明確應該是運用一個折線圖的形式，由于業務目標上來說更關注銷售額而不是銷售額和訂單數的比較，所以我們選用了一個帶有切換選項的折線圖形式。
但是我們會很容易發現在讀圖時會出現較大的視覺干擾，并沒有能夠很好地突出重點信息，視覺層級不清晰、混亂。
于是我們對沒有重點的視覺層級進行梳理，像之前劃分模塊那樣，對視覺元素進行高、中、低的 P0、P1、P2 的設定，提升易讀性
P0：層級最高的自然是重點信息突出部分，所以我們需要在其之上做加法，給予內容異形懸停樣式進行具體強調，配合投影加強視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時數據部分用特殊字體并適當加大字號進行設計，方便用戶第一時間能夠看到所要強調的數據具體值。
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會長時間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會讓用戶太晃眼產生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強化主體圖形的同時不致于太顯單薄。
P2：前兩者都是一定程度的做加法，那么層級最低的元素需要開始做減法，此時軸線、刻度、切換選項等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在 1.6:1 上較為合適。
銷售總額、訂單數、渠道數同屬于一個數據統計的范疇，最忌諱的就是把以上提供的三個信息給做平，讓用戶抓不住重點，面對這樣的情況還是一樣，確立需要突出的重點信息給予特殊文字和大小的設計，選擇合適的主體圖形。
但在這里需要注意的是由于在這個模塊中 P0 是金額數、訂單數、渠道數這些重要值，所以可視化圖形需要適當為其讓步，不要放在閱讀中心位置，按照 P1 來進行處理，而訂單數、轉換率這樣的標題就成了 P2 需要適當降低透明度和文字大小，不干擾主要信息的表達。
統一營造
說到統一，最先想到的一定是色彩，無非也就是需要處理好對立統一關系，而這其中統一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于 B 端而言，建議在可能的情況下不要超過 5 種，而且主色、輔助色，對比色的比例建議控制在 6:3:1 的比例（但不絕對），既能做到有所區別又不致于過于絢麗干擾視覺。
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應于長時間的注視。
顏色過后就是字體，字體的使用需要極為謹慎，如果可以盡量只出現一種字體（但不要超過三種），并且只采用基礎字體，正常情況下都是將其作為一個需要被降噪了的視覺元素來對待（比如降低透明度），在 PC 端中盡量也不要出現較多不同的字號、字重，造成沒有必要的視覺干擾。
除了字體之外，在統一感的營造上卡片的布局結構也需要盡量保持一致，這是為了提升易用性，同一個產品內，相同布局會給予用戶相同交互、相同功能的暗示，也更容易培養用戶習慣，提升操作效率。
呼吸適中
呼吸感是留白的藝術，很考驗設計師的排版能力，在單獨的模塊內，元素與元素之間盡量不要用實線進行間隔，可以的話利用親密性原則通過元素間距的遠近進行布局。
而柱狀圖的設計上，柱與柱之間的間距最好大于柱寬的 1.5 倍，這樣才顯得視覺上較為透氣，不致于太臃腫。
最后就是模塊中的邊距留白部分，這點一定要重視，不然不僅你的版心會變散，還會嚴重影響你的頁面呼吸感。
細節處理
細節上首先要說的就是橫縱坐標軸上的文字，上面的文字一定不要過長，最好的方式是將文字進行精簡。然后橫、豎排對齊處理，如果實在不能精簡那么再進行斜排的方式。
第二點就是橫縱坐標軸有的時候會因為需要展示的數據過多而過于密集影響閱讀，這個時候可以采用適當增加一個值域的劃定的方式來進行坐標間距的縮放。
第三點就是，在排行榜等模塊可以適當增加一些小設計，比如金、銀、銅的設計，提升情感化元素的融入。
第四點就是，盡量不要選用一些 3D 的酷炫效果來做可視化，因為這種效果很容易對數據進行遮擋和扭曲，不是非常適用于高效閱讀，也不適合 PC 頁面上的交互，而且也不利于開發，比較得不償失。
當所有的模塊設計完成后，像拼高達一樣進行組裝，組裝完成后適當調整其過于干擾視覺的地方，然后進行自檢。
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進行檢查，你可以模仿用戶使用中的各種需求場景，對已經制作好的頁面進行交互和閱讀，看是否能夠快速高效地完成使用目標。
當然除了自己之外，你還能在有條件的情況下找專家用戶進行使用，即使記錄使用中存在的問題并及時進行調整，當初步使用大致無問題后便可以交付。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：肅靜、
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表格是B端產品中出現最高頻的模塊之一，我們認為良好呈現信息的表格應當做到疏密適度、高效掃視、精簡克制。
前言
表格作為組織整理數據的手段，可以有效的向用戶展示數據信息，是B端產品中出現最高頻的模塊之一。
下圖為典型的B端表格示例：
用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等更多復雜操作、對比數據的差異與變化（關聯和區別）。好的表格信息展示設計，應當是能夠輔助用戶高效便捷的實現以上場景中的訴求。
今天我們就來討論表格設計中一個重要的問題——【應該如何考慮表格信息展示】。首先拋出結論，我們認為良好呈現信息的表格應當做到疏密適度、高效掃視、精簡克制。
///
一、疏密適度
常見的表格信息包含文本、標簽、狀態樣式、數值統計圖表、關鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進而決定了表格給用戶的直觀感受，因而下面分別從行高和列寬兩個方向來探討表格信息展示如何疏密適度。
1、定義合理的表格行高
a、行高模數設定
在具體設定表格行高時，由于表格中以文字信息為主，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣（多行行高同理去設定）。
根據用戶場景的不同，來選擇模數倍數，需保證系統內使用統一的模數。比如，針對用戶快速瀏覽獲取大量數據場景時，可以選擇1.2倍作為模數，列表更為緊湊，同樣掃視范圍內，可獲取更多信息。
b、為小屏幕考慮一屏顯示的行數
表格行高決定屏幕內能呈現的行數，即用戶在一屏內能獲取信息的數量，主要影響用戶縱向對比數據的效率。對于1920*1020（包含該分辨率）以上的大屏用戶，對于一屏顯示行數的感知不強，但對于1366×768、1280*720等這類小屏，顯示行數有限，用戶進行縱向數據對比的效率就會有所降低。在設計前，應當充分了解目標用戶的行為訴求，了解目標用戶設備屏幕分辨率的占比分布情況，有針對性的設置行高。
c、用戶自定義行高的場景
B端產品的特點之一是通用化，覆蓋用戶角色多樣。然而用戶個體對于表格信息呈現密度的訴求經常是有所差異的。比如個人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。而有些平臺用戶由于很熟悉線下excel表格模式，希望線上的表格也盡可能像excel那樣緊湊，以便他們在一屏內看到更多的數據，進行對比，提升工作效率。產品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設置開放給用戶，建議不是完全開放給用戶去調整尺寸，而是給出一定階梯度的快速選項，例如舒適、標準、緊湊三種高度來滿足用戶需求。
例如，Gmail提供默認/標準/緊湊三種表格密度設置，如圖：
2、靈活擴展的橫向空間
通過對表格固定位置與列寬的調整，擴大表格數據空間，使信息不局促，空間更透氣，保證橫向掃視易讀性。
a、列寬極限值設定
設計師需要根據表格承載內容定義表格的列寬，應包含最大/最小/默認列寬的定義以及使用規則。
我推薦的一個規則是：
規則1：當相對列少【瀏覽器寬度-頁面其他模塊 > 全部列的默認寬度和】，則各個列自動等比拉伸，撐滿屏幕；
規則2：當相對列多【瀏覽器寬度-頁面其他模塊 < 全部列的默認寬度和】，則出橫向滾動條，每列寬度為默認寬。
另外需注意最小值設定時應避免信息展示出現【對聯式表格】。對聯式表格最大的問題在于，一屏內展示的行數有限，當用戶縱向對比數據時，需往復滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預覽，而是不停上下左右切換，使用體驗不佳。
b、橫向『偷取』屏幕外空間、行高模數設定
當壓縮列寬也無法在有限空間內展示大量的數據指標列時，我們可以借助橫向滾動來『偷取』屏幕外更多空間。橫向滾動需用戶拖動滾動條進行瀏覽，有一定操作成本，所以要結合業務實際情況選用是否利用屏幕外橫向空間。
隨著行和列的增加，用戶的瞬時記憶會達到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內的數據，防止遺忘某列數據的意義。因而當表格數據列較多橫向滾動時，建議為用戶固定重要信息列，如標題列、操作列。同時用戶瀏覽表格時是符合F型掃視原則的，建議固定列顯示在表格左側，方便用戶從左至右瀏覽數據、從上至下對比數據時能夠清晰定位當前所瀏覽數據的主體是什么，同時可根據需要快速發起操作。
同理，用戶拖拽縱向滾動條來閱讀數據時，可固定表格的表頭，幫助用戶在閱讀過程中清晰知曉單元格數據的意義。
c、用戶自定義展示信息
針對需展示大量數據的情景，我們除了【偷取】屏幕外空間外，可以根據B端產品提供的數據表格是覆蓋全部用戶角色的全量數據的特點，讓不同用戶角色來自定義想要瀏覽的信息，從而提升表格的可讀性。下圖為百度信息流推廣平臺的自定義列功能，用戶可根據需要選擇展示的數據列，系統將在用戶完成選擇后，主動幫用戶保存自定義內容，下次登錄后，表格依然按照用戶定義的數據來展示。
///
二、高效掃視
無論是在表格中要明確的定位數據，還是順序閱讀，高效掃視都是B端用戶一個很重要的訴求，我們在設計表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。
1、合理的對齊方式
數據信息本身包含多種格式，可遵守一個基本原則即文字左對齊，符合從左到右的閱讀習慣；數據信息右對齊，方便數據大小的直觀對比。
具體對齊方式可參考我們建議的方式：
文本字段：可點擊字段、普通文本類、數字、字母等，長短參差不齊，左對齊；
格式化字段：日期、時間、部分枚舉類等，字符數一致且較短的，左對齊。
數據字段：金額、數據、百分比。帶小數點等數據，方便對比為主，右對齊。
2、去除視覺雜音，強調對比關系
a、正確使用分割線，實現對表格行與列的強調
橫向分割線可強調行內信息的連續性。垂直分割線在縮減元素之間的距離后也能區分不同元素，更好的強調縱向數據對比。但只要遵循良好的對齊方式，通常不展示縱向分割線，避免信息干擾。因而表格中通常僅使用橫向分割線和底色分割，提升表格閱讀效率。
b、斑馬線作用有限
斑馬線即隔行（列）變色。它能讓行（列）間界限更為明顯，但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如針對不同類型的數據（如總和、平均值）使用不同底色來區分，可以更突出強調該數據。要注意的是，隔行（列）換色的兩種顏色不能反差過大，否則看來太“跳躍”。
對同一類數據而言，分割線就已經能夠明顯區隔，所以可不使用斑馬線，但需要給出單行的懸浮狀態，強化橫向導視，避免出現列數過多引起數據錯行的問題。
3、突顯重要內容的視覺重量
前面我們提到表格呈現的數據信息除文本外，還有其它一些可視化數據。可視化一方面提升了列表視覺表現力，增加差異化，另一方面讓內容更加突出，提升閱讀效率。例如：數據列中數據異常時，最好可以醒目的形式突顯，讓用戶一進入頁面就能快速注意到異常狀況。
///
三、精簡克制
體驗好的表格一定是克制的，克制應表現在信息的適度隱藏以及內容折行與截斷展示原則。
1、適度隱藏信息
a、隱藏低頻操作
當表頭需要承載排序、表頭篩選、提示等功能時，不建議一股腦的將所有功能展示出來。用戶對表頭的訴求是定位數據指標﹥執行操作的，因此可根據具體業務定義展示哪些操作，將其它操作隱藏，有需求時用戶主動觸發再展示。比如，百度搜索推廣平臺的推廣管理頁面提供了全局篩選，所以表頭篩選對于用戶而言是相對低頻的操作，我們選擇隱藏表頭篩選的圖標，當用戶鼠標HOVER表頭單元格時再展示。
對于表格行內的操作我們也應當進行優先級排序，為用戶專門設置操作列展示高頻核心的操作，其它相對低頻的次要操作可隱藏在相關數據單元格中，用戶有訴求時hover對應單元格即可快速發起操作。
b、隱藏輔助信息
表格中的有些數據指標是綜合緯度的，當用戶關注點定位于該指標時，需要通過細分數據來理解、分析。指標的細分緯度信息雖能起到輔助用戶更好理解數據指標的作用，但如果全部拿出來在表格列展示，會讓表格變得臃腫不易讀，此時可以考慮采取一定設計手段去隱藏這些信息，把觸發展示的自由度交給用戶，也更符合用戶逐級查看的場景。例如，百度搜索推廣平臺中關鍵詞列表中，質量度指標是由多條數據共同決定的，我們采用了將細分指標聚合在氣泡卡片中，當用戶HOVER質量度得分數據時展示出來。
再比如，有父子層級關系的數據，可以通過父子折疊表格將子信息默認隱藏，用戶根據需要，去展開查看詳細的子信息。
2、設定折行與截斷規則
B 端業務的數據信息復雜多樣，信息內容的長度高度是多樣不可控的，很多內容會超出我們限定的最大列寬，最大列高，我們應當給出折行與截斷原則去約束內容的展示，而非總是為具體情況而做特殊設計，破壞體驗的一致性。
截斷折行原則設定時要細分，不能簡單粗暴的一刀切，比如一行截斷這種，如日期、時間等固定格式內容，拖動列寬后文字應折行而非截斷展示，避免影響用戶誤讀。再比如很多業務實體標題字段是格式化的，即標題前面部分可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數據。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應截斷，根據具體業務情景選擇。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
總的來說，所謂的感知性模式就是物體或者物件的一種外在的呈現而給人的感覺或者感受。例如同樣的一個電腦桌上都有電腦、鼠標、或者其他的物件擺設，但根據不同人的使用給人的感覺是完全不同的，或是凌亂、或是整潔、或是簡約，而更直觀的差異可能來源于這些物件的樣式、材料、顏色、紋理的不同而傳遞出來的視覺感知，
如果沿用到互聯網方面的設計，那么感知性模式的例子可能包括：文字信息、版式、配色、布局、插圖、圖標、形狀紋理、間距、交互或者動畫等等，這些都作為具體方式來表達感知性設計。
說到這里，你可能會認為感知性設計是一個純粹的外在視覺表現，但想要完全的得到一些成效，更多需要把這個事情融入到品牌的核心中，隨著產品的發展而發展，進而在眾多的同類此產品中脫穎而出。
案例一：微信
微信作為一個超過十億用戶的產品，隨著版本的不斷迭代，功能也越來越強大，因此從產品體驗上來說也可能會給人一種臃腫的感受。但微信整體的感知性模式的設計是非常清晰的，從桌面 APP 的 logo，再到內頁呈現的圖標、顏色、按鈕樣式、交互反饋等等的設計都是統一性很好的設計。
案例二：Instagram
Instagram 作為全球熱度最高的圖片分享社區，自始自終都有著非常明顯的感知性，整體 APP 的簡潔性設計讓用戶更加專注于內容本身，似有似無的品牌藍色似乎已經牢牢融入了用戶的大腦中，這種感知性無需被刻意放大，但就在潛移默化中用戶就能感受到。
案例三：抖音
作為目前國內最熱的短視頻平臺，抖音的感知性模式已經深入的印在用戶的腦里，我認為抖音主要在以下三個方面讓用戶記住了 TA：1.品牌屬性，抖音的品牌屬性就是用最簡單的方式讓用戶記住了 ta，通過 APP圖標、閃屏、發起按鈕的圖形及品牌色的串聯；2.內容屬性，具有自己平臺氣質的內容特性，抖音在最早期主打的“潮酷”類的視頻讓它跟快手做了明確的區分；3.體驗屬性，大膽的全屏滑動視頻交互很好的結合了手機的體驗方式。
在同一個領域中的產品，在功能上大多會具有一定的趨同性，而由于這幾年的扁平化風格盛行，更把產品之間的類同性推向極致。因此更需要通過感知性模式的設計來進行區分，這種區分不僅僅只是視覺上的差異，更多是來自于產品者對于自己產品方向的把控。
書中提到 Spotify 的例子，Spotify 給人感覺是溫暖的、私人的，雖然月活躍量已經超過一億，但給用戶的感受仍然是獨特的，除了功能之外，主要在于整體的圖形樣式、顏色搭配（黑綠的品牌色比例把控）、交互中微妙而平靜的感覺，以及排版上傳遞出來的感受。
從上面這個案例來說，基礎體驗是用戶值得參與的一個重要環節，但感知性模式的設計更多是來源于產品者想要給用戶傳遞什么樣的品牌性格或品牌核心，Spotify 的靜謐性及沉浸式體驗，這是 Spotify 設計師想要傳遞出來的品牌核心
感性性模式的品牌傳遞主要是通過界面或者運營調性來讓用戶得到感知，并且讓人記住。在界面上想要讓用戶記住我們的產品，更多的是需要思考三個關鍵點：設計的獨特性；設計的辨識性；設計的區分度。
設計的獨特性
設計的獨特性往往是通過我們界面的排版、圖標、圖像、交互體驗方式、交互措辭等等一系列的內容來奠定。這些內容我們常常可以在國外的軟件中看到很多不錯的案例。
還是以 Instagram 作為案例來說，ins 風的極簡設計是一種貫徹始終的獨特性存在，除了設計界面本身的研究之外，還在內容上下足了功夫。以照片瀏覽來說，始終堅持大圖的體驗方式，保證一屏內的沉浸度，而非為了效率，這與 Instagram 一直具有較高的照片質量密不可分。
設計的辨識性
辨識性的可打磨方式有很多種，以圖標作為一個基礎的案例來說，我們在設計圖標的時候是否有結合整體產品的性格去思考并且設計，并且深入打磨。簡單的區分，我們可以從風格（例如：簡潔的、有趣的、硬朗的、柔軟的等等），更深入的內容就是需要思考如何傳遞品牌感，以及將圖形與品牌理念、產品性格進行結合，通過設計貫徹品牌辨識性。
以 YouTube 這個 APP 的圖標作為案例，設計師在設計時更多是希望表達整體 APP 設計的簡潔性，弱化圖形對于內容的影響，因此在整體堅持了三個核心關鍵點：簡約、細線、普識。
設計的區分度
在目前趨同性的主潮流之下，如何把握好產品設計的區分度變得尤為關鍵，也就是說，當用戶在看我們產品的時候會不會乍一眼認為是另一個產品。區分度的把握往往來源于品牌對于顏色的選擇，我們在定義色調之前需要對主流競品做一個分析，從中找出屬于我們的區分度，并且盡量避免重合性。
以現在流行的電商 APP 為案例，很大電商平臺的設計大多類似，在品牌色的選擇上則尤為重要，因此需要盡量避免具有耦合性。
我們在產品設計中想要把所有的模塊或者組件做得一模一樣幾乎是不可能的，但我們可以利用感知性模式的設計進行內容模塊的滲透，讓用戶對于整體的感受感知是一致的。
以 material design 的設計系統為案例，他所確定的是一個規則，而并不是任何的模塊或者任何的圖標都是一樣的、無差別的，如果都完全長得一樣會讓設計變得單調、無差異性，通過設計準則來限定整體的圖形風格，應用在不同的位置讓用戶從視覺角度感知到風格的一致性，這樣也可以讓整體的體驗更連貫。
富有表現力
為了突出 Material Theming 必須提供的功能，每個 Material 研究都表達了一個不同的品牌。
各種各樣的
為確保 material 主題化和組件滿足盡可能多的產品需求，material 研究代表了不同類型的產品。
基于現實
為了盡可能地復制真實產品，每項研究都會識別用戶、顯示功能用戶流并應用現實世界的限制。
我們在日常設計功能性模塊更多的是考慮到用戶對于產品的體驗感受，而感知性模塊則是我們想要用戶在這里獲得什么品牌感知，通過品牌結合視覺設計系統給用戶帶來產品獨特的性格及個性化氛圍。
對于探索感知性設計的方法也有很多，目前比較流行的技巧主要有：情緒板、樣式疊片、元素拼貼。無論是哪種方式，都沒有唯一的答案，更多是利用這些方法在不斷的嘗試中探索到屬于自我品牌的感知。
情緒板
情緒板是一種較為輕量的風格探索方法，在這個過程中往往不需要花費過多的精力，我們需要做的就是把統一或者接近類型的圖片進行重新整合，得出我們想要表達的視覺感受即可。
情緒版屬于比較前期的視覺品牌調性探索，在整體的顏色、排版上也都可以利用情緒板來獲得初步的答案，如果想要再往深一步，可能則需要樣式疊片的方式。
樣式疊片
給予情緒板獲得的大致品牌方向之后，便可以利用樣式疊片的方式來進行更精細化的探究，我們可以用一種或多種不同的樣式疊片來表達，但是希望在截取這些內容的時候要記得保持控件、組件、顏色、字體等等內容的一致性，避免差別性較大，形成不了統一的視覺系統。
元素拼貼
從書中講到的大體概念是：將界面元素等內容拼貼在一起，從而達到設計稿初稿的雛形感受。這個方法可以比較敏捷的對需求方進行試探，但相比上面 2 種方法需要花費更多的時間及精力，同時這個方法出來的內容也比較偏向高保真。
從表面上來看，這三種方法似乎都可以幫助我們更好的進行設計，沒有太大的差異化，不過從本質上來看，這三個方法影響的是我們設計初期輸出的保真程度，從情緒版到樣式疊片再到元素拼貼似乎是一個越來越保真的方式，我們可以選擇其中一種，或者 2 種結合來進行表現。
過多的個性化設計，會削弱整體的品牌感，同樣，如果設計的內容需要全部都一模一樣的規范，也會扼殺設計的品牌感的創造性。因此，在感知性設計的概念下，一致性設計不是一味的復用，不求變通，而是通過整體統一的理念，允許個性化設計的存在，這樣既滿足部分模塊的獨特視覺表現又并不影響品牌傳遞。
舉個例子
例如外面在設計一個完整的 APP 時，我們已經規范好了大體的基礎視覺規范，在不影響這個規范的前提下，我們針對部分模塊，例如福利類、游戲類，這種比較偏運營的設計界面，我們可以考慮有更豐富的顏色、圖形等視覺表現，但前提在于是否符合基礎規范的設定，如果符合那我們完全可以對這些類型進行個性化設計。
如果沒有打破常規的設計方式，固化的追求一致性的設計，那么它就會變得普通、僵化，感知性設計的存在就是讓我們在允許的范圍內追求更不一樣的設計，鼓勵設計師積極探索更多的可能性，好的設計體系既能體現品牌的一致性也能表達出創造性。
由于感知性模式的相關設計，容易被當作只是樣式或者主題化皮膚設計，很多人會認為這方面的設計比優化交互流程更容易些。在這種狀況下，臨時的業務經常會去挑戰產品的品牌性和規范性，綜合這 2 方面的原因，我們需要隨時調整我們對于感知性模式的策略。
數據的好壞往往來自各種原因，優化設計后得到好的數據，但并不能說我們的感知性設計是好的，首先刺激數據的手段有很多，例如加重內容的表現、利用顏色對比突出想要突出的模塊，這些方式都是與感知性設計背道而馳的。
基于上面這個問題，我們在日常設計中有幾個基本原則是需要我們去遵守的，盡量避免為了滿足短時間的產品需求而影響整體的設計感知性。
1. 不挑戰基礎規范原則
基礎規范作為整體設計的基本標準，整體的制定肯定經過多種嘗試之后的結果，如果輕易推翻的話，其中產生的設計成本是巨大的，往往需要重新輸出、多方對齊、最終輸出、再落地形成開放組件，在我日常的工作中也常遇到。往往是因為一個極小的模塊而產生了巨大的設計成本。
2. 不改變用戶的普識習慣
這里說的不是不去優化或迭代體驗設計，而是我們應該盡量避免因為一個很小的內容而調整全局的體驗方式。
舉個例子：早前很多 APP 在設計表單選擇器時都喜歡進行 UI 定制，從這個問題分析，用戶在使用這種表單選擇器的時候是用的系統多一點還是我們的 APP 多一點，如果是系統的多一點，我們何不直接調用系統？因為組件的 UI 改造，往往會帶來一定的開發成本，但其造成的感知卻并不夠大，反而會讓用戶覺得很奇怪，為啥這些選擇權在不同 APP 的不一致。
3. 一致性最大化
任何的設計都應該以一致性作為最大的前提，這樣才能更加完整體現感知性模式，在各個模塊、顏色、圖形等等內容都具有完整的呈現，無時無刻影響著用戶，讓用戶對于整體具有潛移默化的感知。
感知性模式不是一個原則，而是一種工作方式、設計模式，除了個人的堅持之外，還需要有團隊的意識才能讓我們的設計更加具有品牌性，自上而下的調性、方向的確定，在團隊中形成共識，這樣設計語言才能形成。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：ID設計站
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多受歡迎的產品中都有我們值得學習和借鑒的設計思考點，通過分析海外主流產品，帶大家掌握底部導航欄（Tab Bar）的基本知識，找到解決問題的方法并開拓創意思維。
在開始之前，請大家先思考下面兩個問題～
好像并不是。雖然淘寶、微信、微博、美團等大多數主流的產品都在使用 Tab Bar，但這并不意味著所有產品都需要它。
很多APP沒有Tab Bar，比如日歷、計算器、滴滴、Uber等。對于是否要在APP中使用Tab Bar，應該分不同的情況靈活考慮。
答案是為了易于使用，意味著通過 Tab Bar 這種簡單的設計可以輕松幫助用戶導航到頁面。
明白了上面的問題后，接下來就要考慮如何來設計 Tab Bar，能更好的滿足用戶的需求和體驗。
1. 顯示最重要的信息
導航欄應該只包含最有用的信息，不能添加過多無用的標簽使導航欄混亂。許多 App 在導航欄上添加搜索功能，因為這有助于用戶更快地導航和檢索內容。
在Spotify底部導航中，主頁選項用于播放或收聽所有內容，搜索選項用于搜索下一首歌曲和播客，音樂庫選項用于播放列表中喜歡和保存的歌曲，單獨的會員選項方便用戶輕松點擊并快速完成購買操作。
2. 擴展導航的功能
主流 App 更喜歡在底部導航欄中使用 4-5 個標簽，這樣能保持導航欄的整潔，還避免了標簽過多導致用戶難以精確點擊選項的情況。
Pinterest的導航欄上只有四個選項，這有助于用戶輕松點擊。消息選項會實時更新消息數量，對用戶來說這樣的提示很直觀。另外搜索功能包含在導航欄中，方便輕松地在主頁和搜索結果之間來回切換。
3. 容納多種標簽形式
多數 App 底部導航欄會使用「圖標+文字」的標簽形式，這樣能清楚地告知用戶點擊標簽之后的結果。
有時候我們也會看到有些產品的導航欄只有圖標沒有文字，但這種形式并不會影響我們的操作，因為當導航欄的標簽使用了用戶特別熟悉的形狀和內涵，完全可以省略文字。
宜家App的導航欄使用了大眾都很熟悉的圖標，所以即使不加文字，我們也能清楚地知道這3個圖標分別代表了主頁、分類、我的。
相對于宜家，Youtube的導航欄就顯得有點復雜，因為Youtube的圖標含義用戶可能并不是很熟悉，加上文字說明很有必要。
4. 文字標簽應該簡短
文字標簽應該簡短而清晰，準確的文字說明能對用戶使用正確導航起到關鍵作用。
TikTok導航所有的文字標簽都簡短，并且中間的添加圖標還隱藏掉了文字，以此來引吸引用戶的注意力。
5. 避免隱藏導航欄
Tab Bar 通常包含了最重要的導航信息，應該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。
Pinterest導航欄的設計是個例。當滾動頁面時，底部的導航欄會隱藏，這么設計的原因可能是為了防止導航欄遮擋圖像，保證用戶看到更多的圖像內容。
6. 傳達位置
Tab Bar 幫助用戶輕松導航，但如果用戶不知道自己的位置，將會影響他們瀏覽和使用產品的體驗。
多鄰國App通過改變導航圖標的樣式來讓用戶清晰的知道自己所有的板塊。
Headspace在底部導航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。
7. 從反饋中學習并不斷改進
反饋是關鍵，如果想改善產品的導航欄設計，就要考慮并測試用戶最喜歡哪個導航選項，不使用哪個導航，需要四個還是五個選項等等。
Pinterest通過收集用戶的使用反饋情況來不斷改進導航欄的設計，幫助用戶更方便地使用產品，這些不斷打磨的改進真是產品成功的關鍵。
8. 在導航欄中顯示更新
Tab Bar 不僅僅起到導航的作用，很多時候還能通過狀態變化告知用戶更多的信息。
在Twitter主頁導航中，當有新內容推送時，主頁就會出現更新的狀態，提示用戶查看新內容。這樣的設計在Youtube、Pinterest等很多主流產品中都有使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
預判設計（Anticipatory Design）是一種能夠引導用戶、縮短用戶行為路徑的有效設計手段。使用預判設計方法設計的交互界面，在交互和視覺上的表現總是比用戶更遠一步。而且這些交互表現是在用戶沒有作出行動觸發的情況下進行的。
預判設計的本質上是一種基于數據收集所做的用戶習慣研究和智能推送的設計模式。UX 設計師 Joelvan Bodegraven 曾說過：“Anticipatory Design 是圍繞機器學習、預測和用戶預期的綜合性設計模式。”
好的預判設計可以做到以下幾點：
在用戶初次體驗某種功能時起到引導作用，避免用戶產生疑問和不知所措
提前判斷出用戶的下一步行為，利用合理手段和方法，縮短行為路徑
讓用戶感受到驚喜和關懷，對產品上癮，產生好感和依賴感
預判設計的主體是用戶行為，從用戶的視角出發，建立在整個產品的交互里路程和功能框架上，對用戶的行為深刻洞察后進行細節的改進。
我們可以從三個維度探索用戶行為預判的方法：
從「人」的維度來看，就是預判用戶的需求和行為，方法有以下幾種：
對用戶即將做出的動作做出反饋，且適當突出反饋效果，幫助用戶更輕易的看到想要的結果。
Apple 的 magic keyboard 在 iPad 上的鼠標效果，當鼠標圓點靠近功能熱區時，系統預判用戶需要點擊按鍵，于是會產生自動吸附的 hover 效果。
Mac 上的鼠標效果也做的很用心，當用戶在一段時間內不斷的搖晃鼠標時，系統判斷用戶可能是需要找到鼠標，因此會放大鼠標箭頭的大小，提示用戶鼠標的位置。
通過預測用戶下一步的行為，對用戶進行直接引導，縮短用戶的行為路徑，減少操作步驟。
得到 App 預判用戶的截圖行為的下一步是分享，因此在截圖后，可以點擊「分享」直接分享到其他平臺。
微信會在用戶截圖之后打開微信對話窗口點擊「+」時，顯示用戶剛剛保存的、可能要發送的圖片。
微信朋友圈會在用戶再次打開時提示用戶直接「跳到還沒看的位置」，幫助用戶快速定位之前離開的位置。
通過對用戶的歷史行為數據進行分析，對產品的功能和內容進行優化，符合用戶的個性化需求，創造優質體驗。
淘寶等電商平臺會跟據用戶之前瀏覽過的商品進行推薦，大眾點評也會根據用戶的飲食喜好進行美食推薦。
Google 翻譯里，用戶在第二次點擊發音按鈕時，讀音播放的速度會明顯比第一次緩慢，因為系統預判用戶可能在第一次播放時沒有聽清，所以才需要播放第二次。
從「時間」的維度來看，是指在特定時間對用戶的行為進行預判和推薦，方法有以下幾種：
對快要過期/馬上到來/必須被使用的功能、信息做及時的提醒，避免用戶忘記/逾期/遲到等。
外賣平臺會在中飯晚飯前后給出紅包/優惠推送、生鮮電商平臺會在優惠劵快要過期時給出提醒，行程類產品會在飛機/火車快出發時給出行程通知。
在特殊的時間給用戶適當的提醒（包括隱私提醒、天氣提醒等），借助節日、活動等時機部分開放功能的限制，讓用戶覺得自己時刻被關注、被惦記，拉近與用戶之間的關系。
美團外賣針對用戶所在區域，提前推送天氣變化，提醒用戶提前下單，以免天氣影響用餐時間。
七夕節到來，微信將原本最高 200 元的紅包金額調整到了 520 元，是一個驚喜又有人文關懷的產品細節。
從「空間」的維度來看，是指在特定空間或者當地點切換時，對用戶的行為進行預判，與用戶產生合情合理的交互：
大眾點評會在用戶切換城市時給用戶恰當的提示。
使用支付寶刷地鐵站出站的概念頁面設計，清晰的展示了出站口的地點信息。
預判設計（Anticipatory Design）的主體是用戶行為，從用戶的視角出發，建立在整個產品的交互里路程和功能框架上，對用戶的行為深刻洞察后進行細節的改進。其設計原則有：
從用戶使用的流程出發，減少用戶不必要的成本消耗，優化和縮短交互的路徑。
思考用戶行為背后的邏輯和原因，做產品功能上的優化和調整。
做體驗設計改進時不能急功近利或顯得過于生硬，要注意力度和用戶心智的平衡關系。
預判設計應該使用戶在界面的操作過程中感覺到自然，所以大部分預判設計是根據用戶喜好量身定制的個性化設計。
最后，記?。河脩粼趯嶋H使用中不應該真正“看到”預判設計，但應該能夠感覺到它的存在，并為之感到愉悅。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們毫無疑問已經處在一個大數據的時代。各行各業都在快速產生和積累數據。 本文結合 UED 團隊過去所參與 B 端數據可視化項目分享一些經驗及思考。
“得益于計算機技術和海量數據庫的發展，個人在真實世界的活動得到了前所未有的記錄……社會科學將脫下‘準科學’的外衣， 在21世紀全面邁進科學的殿堂?！? 雅虎首席科學家Duncan J. Watts
“大數據的影響，就像四個世紀前人類發明的顯微鏡一樣……而大數據，將成為我們下一個觀察人類自身社會行為的‘顯微鏡’?！?– 麻省理工教授Erik Brynjolfsson
從數據，到海量數據，再到大數據，對人類的做事和思維方式都有很大的影響。在《大數據時代：生活、工作與思維的大變革》一書中，作者歸納了大數據的三個特點:
當前對大數據的研究涉及計算機科學、數學、生物學等多個領域。大數據尤其是對數據存儲、數據挖掘等提出了重大挑戰。而數據可視化也將在大數據時代扮演一個重要的角色。數據可視化可以將紛繁復雜的大數據集、晦澀難懂的數據報告變得直觀易讀、易于理解，通過圖表將雜亂的數據進行科學有序的呈現，使用戶找到數據的變化規律以及潛在價值，幫助用戶作出決策。就數據可視化的應用來看，應用范圍極其廣泛，如政府應用、商業決策、公共服務等等。
顧名思義，數據可視化就是將數據轉換成圖或表等形式，以一種更直觀的方式呈現數據。通過可視化的方式，我們可以將大量復雜的數據通過圖形化的手段進行有效地表達，幫助用戶發現規律和特征，發掘數據背后的價值。
圖 1 @Marco Zemolin Siresia Bagnoli
使用可視化的方式來表達復雜的數據，可以確保對關系的理解要比那些混亂的報告或電子表格更快。通過圖形化的表現方式，我們可以以清晰和連貫的方式解釋大量的數據，從而讓我們理解數據，得出結論。
案例：流媒體平臺節目數量的變化
以下圖為例，當用戶希望了解 2011 至 2020 下圖四大流媒體平臺節目的數量變化情況時，以表格方式呈現效果如下圖：
未經可視化設計的表格數據圖
如果通過可視化設計處理后效果如下圖：
經可視化設計后的數據圖
在這個案例中，我們可以看到，通過文字信息表達的方式，所有的數據在文字信息的表達中都只是零散的個體，我們很難在短時間內對列舉數據有一個大致的了解，更不用說發現特征得到結論了；而在可視化表達中則不同，所有的元數據通過圖表形成一個整體，數字信息被轉化為視覺信息，通過可視化圖表，通過觀察點的位置和顏色即可感知到數據的差異，原本需要通過計算數字大小完成的對比，變成了肉眼可見的點的顏色與間距對比，我們可以迅速了解到近十年四大流媒體平臺每年節目數量、每年不同平臺節目數量的對比以及各個流媒體平臺節目數量的增長趨勢等。
據研究發現：人腦處理圖片信息的速度顯著快于處理文字信息，例如一篇 300 字的小故事，看一遍需要數十秒，而轉化成圖片后則只需要一眼即可記在腦海里。
這表明，在信息的類型中，人腦對圖片信息的接收和處理效率遠高于文字信息。而數據可視化則可以將數據通過可視化的方式轉化一個以圖片形式展示的故事，幫助用戶快速接收、處理信息，激發用戶聯想并產生情感共鳴。
案例一：新冠病毒如何通過空氣傳播
隨著新冠疫情在全球各個地區的蔓延，如何做好疫情防控已經成為了每個民眾的頭等大事 。Mariano 和 Javier 用可視化的方式生動形象地傳達了新冠病毒是如何通過空氣傳播的以及可以通過哪些措施來降低傳染風險。
圖 2 @Mariano & Javier
案例二：在敘利亞，誰和誰戰斗？
許多不同的團體之間的關系可能很難理解 – 尤其是當有11個這樣的團體存在的時候，這些團體之間有的結盟，有的敵對，這讓人難以理解。但是，Joshua Keating 和Chris Kirk通過表格的形式和熟悉的視覺效果和色彩，將這些數據簡化為一種簡單的、易于理解和可互動的形式，讓人們可以輕松了解這些團體之間的關系和故事
圖 3 @Joshua Keating and Chris Kirk
現實生活中大部分的人是視覺學習者，他們傾向于在與視覺元素相關聯的情況下進行學習并與信息互動。[2] 人類大腦識別并理解一張圖像最快僅需 13 毫秒。[3] 因此，相比起閱讀和理解文本，大部分人更容易通過圖表或其他可視化形式來理解數據，合理的數據可視化設計可以提高他們作出決策的速度。
圖 4 @Bea Vaquero
1. 明確客戶需求
設計師在設計數據可視化項目的開始階段應該盡量與客戶進行深入溝通，確定他們的業務訴求，也可以理解為確定客戶的初衷與目的，從企業客戶對數據可視化的需求看來，通常會有兩種類型：
明確客戶訴求，通過設計手段幫助客戶達成目標，這才是 B 端數據可視化設計的關鍵所在。只有當我們了解客戶的需要，我們才能快速推導產品結構、關鍵數據、視效風格等信息。
圖 5 @Daria
2. 確定關鍵指標與優先級
關鍵指標是對一組或者一系列數據的統稱。一般情況下，一個指標在屏幕上獨占一塊區域，所以通過關鍵指標定義，我們就知道數據大屏上大概會顯示哪些內容以及數據大屏會被分為幾塊。
那么關鍵指標的選取依據是什么呢？我個人認為主要還是依據客戶訴求，數據可視化的最終目的就是幫助客戶達成業務目標。需要思考的是，哪些數據通過何種呈現方式能夠幫助客戶解決問題、達到目的、滿足他們的期望，選擇出一系列關鍵指標。
對于這些選取出來的關鍵指標，我們需要對其進行優先級的排列，一般來說，主要指標能夠呈現業務的主要邏輯，一般放在顯眼位置，用重點元素標識；次要指標圍繞主要信息進一步闡述；輔助指標是對主要信息的補充，一般放在非核心區域，或者二級結構中。
通過合理優化關鍵指標并進行優先級排列，能夠保證數據可視化的核心設計的重點，避免數據空洞散亂。
3. 合理使用數據圖表
在選擇圖表展示相關數據指標時我們要思考各個指標的主要呈現，更進一步的講，是我們想通過可視化表達怎樣的信息。下面這張圖就清晰告知了我們如何從數據的展示目的出發，選擇合適的可視化方式來呈現數據。
圖 6 翻譯自@Stephen Few
4. 合理進行頁面布局
數據可視化頁面布局的設計是相對靈活的，為了保證數據呈現最佳效果需要結合實際需求來合理規劃。關注核心數據的比例和位置，橫向布局最為常見（人眼的水平運動比垂直運動快，會先注意水平方向的事物），核心數據場景劃分在中心位置，占較大面積；其余的指標按優先級遵循人們的瀏覽習慣在核心指標周圍依次展開。將類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。
@布局設計案例
5. 制定設計方向
在定義設計風格的階段，從項目背景出發，綜合行業類型、產品定位、品牌傳播等因素，提取關鍵信息，構建設計框架。
數據可視化的設計風格主要根據客戶要求、行業特性、數據指標等因素決定。通常我們很容易看到的可視化設計以深色為主，是因為相比于淺色基調，深色背景設計能夠有效緩解視覺疲勞，其次深色設計能夠更好地營造對比差異以及數據層級，再者深色設計更容易呈現豐富的動態效果，營造出強烈的空間感等。配色的設計使用應該充分考慮項目背景以及項目屬性，例如黨政機關類項目會慎重考慮用色，應當確保設計嚴肅，莊重。
數據可視化的設計除了對數據進行合理設計，還需要注重場景感的塑造，例如，我們通過場景化設計可以讓某大數據平臺成為大型“圖書館”，查看數據的過程就跟圖書館看書一致，場景化設計的優勢是能夠讓用戶能夠以一種具象的互動方式來理解十分抽象的業務數據，當然合理的構建動態數據效果能夠讓數據具備“生命力”。
圖 7 @Gan Gryc
6. 設計對比
除了尺寸和位置，我們還可以通過配色來突出數據。
無論是通過顏色或形狀對比設計，容易產生強烈的視覺沖擊力。
圖 8 @Bureau Oberhaeuser
利用明度的對比，我們可以用深色烘托鮮明的色彩，或者用鮮明的色彩襯托某一塊暗沉的色彩，亮色靠附近的暗色襯托顯得更加鮮明，其色彩特征表現得更加充分；
圖 9 @Zoey Shen
正確的對數據進行配色，讓數據傳遞出的信息更清楚、更明白，例如國內 A 股，紅色代表漲，綠色代表跌（美股綠漲紅跌）如果給國內的股票、金融等相關客戶做數據可視化設計時，需要避免不同地區文化所產生的差異。
圖 10 @Dima Groshev
7. 選擇 2D or 3D?
隨著數字孿生概念的火熱，越來越多的企業熱衷于打造自己的 3D 數據可視化產品，那么 3D 可視化就一定比 2D 強嗎？
數據可視化設計本身就是為了高效傳達數據信息而服務的，相比平面呈現，3D 最大的優勢在于多了空間維度，適合那些需要跟空間結合的數據呈現，例如地理信息、建筑樓宇、工業生產等場景。那么 3D 數據可視化相比 2D 就一定能夠展示更多的信息嗎，顯然不是絕對的；需要根據實際業務需求出發。
通常我們所說的數據 3D 可視化，就是把大量復雜抽象的數據信息，通過 3D 模型以視覺方式呈現出來，幫助人們理解和分析數據。相比于數據 2d 可視化，數據 3d 可視化具有以下的優勢：
在一個實際的數據可視化產品項目中，有必要應用 3D 數據可視化的情形；
相比 2D，3D 的設計與開發成本相對較高；其次 3D 場景會容易產生視角遮擋以及操作成本等問題，那么從實際項目出發合理選擇才是最重要的。
亞信數字樓宇@PRD MO UED
8. 設計還原
設計稿完成了并不代表設計師在這個項目中的工作就結束了，在后續的開發工作中，設計師還要與開發人員合作，減少上線產品與設計稿的差異。
這個階段的工作也并非聽上去那么容易，尤其是 3D 可視化設計，我們會使用相關 3D 工具制作設計效果，但 3D 設計工具與最終開發引擎存在著色、渲染等差異；在這個時候我們需要靈活運用開發引擎特性，提供對應的美術資源。作為設計師同樣需要了解相關引擎著色器知識，幫助設計效果實現同時也提升對接效率。
亞信數字樓宇@PRD MO UED
9. 調優與測試
測試客戶終端上線是否正常，有無適配所造成的兼容性問題；排查有無視效及體驗問題，同時也要考慮極端場景下所產生的問題及應對方案。
對于大型 3D 可視化場景會存在性能卡頓，加載緩慢等問題，在保證視效基礎上盡可能壓縮相關美術資源，減少不必要的效果計算和內存占用量，根據實時效果需要不斷優化性能提升產品體驗度。
趨勢一：數據可視化 ╳ AI人工智能
隨著企業發展數據量日益龐大，通過人腦分析復雜數據變得越來越困難，我們需要借助 AI 人工智能的幫助。AI 人工智能可以通過強大的算法快速識別分析數據，為企業節省了寶貴的時間和資源，目前人工智能已經被廣泛應用于醫療保健服務、銷售、供應鏈、客戶分析和欺詐預防的數據可視化項目中。
IBM 數據可視化專家 Mauro Martino 創建的儀表板，允許用戶可視化新聞中出現的主題
趨勢二：數據可視化 ╳ XR
AR 和 VR 技術的應用可以增強數據在空間上的感知，從而幫助人們更好地使用數據。通過結合 VR、AR 技術，用戶能夠更好，更快地理解、分析數據。最近進行的許多研究表明，VR 和 AR 具有較強的感官體驗，可以促進更快的學習和理解。幫助用戶對業務問題進行多維度的分析，并更快速地找到解決方案。
圖 11 LM9000@5puj47980xk
趨勢三：數據可視化 ╳ 實時數據
在數字時代，事物變化很快，企業需要對數據告訴他們的信息做出快速反應——正因為如此，實時可視化數據比以往任何時候都更重要。
在 COVID-19 大流行期間，企業能夠迅速作出反應更加重要。各國政府和衛生當局已經使用實時數據可視化來跟蹤感染情況并據此進行調整。越來越多的公司正在將實時數據集成到他們的產品中。
實時數據可視化可以采取一些簡單的形式，如實時更新的折線圖或使用新信息(如銷售)快速更新的交互式地圖。
圖 13 @Esri & The Science of Where Podcast
趨勢四：數據可視化 ╳ 全面體驗設計
以用戶體驗為核心的數據可視化設計是一種重要趨勢，將用戶放在第一位，然后是數據。無論處在哪個行業，設計師都應該遵循類似的思考過程，從思考用戶需求及其痛點開始, 用戶正在嘗試解決哪些問題，以及他們面臨哪些可能的困難？他們需要什么信息和功能來解決這些問題？我們如何以最佳方式為他們打造數據可視化？
最新的趨勢之一是將用戶的工作流與可行的見解、建議、預測以及針對當前任務或決策的最佳后續操作合并，幫助用戶進一步鉆研數據并發現模式、趨勢和相關性。
數據可視化是一門同時結合了科學和藝術的復雜學科，其核心意義在于清晰的敘述和藝術化的呈現，這些需要依靠數據工程師和設計師的精心策劃而不是僅僅考慮如何實現炫酷的效果 ，只有最終達到幫助用戶理解數據和做出決策的目標，才能發揮它巨大的價值和無限的潛力。
文章來源：優設 作者：AsiaInfo Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本來這樣的形式已經司空見慣，足以應付。但寫這個文章的契機，是因為去年接了一個令人頭禿的項目，這是一個平臺項目，在這個平臺上有 30 多個APP，核心干系人包括運營/APP產品經理/平臺開團隊/PO/APP的開發團隊 ，位置不同，利益點也不一樣，并且這里每個團隊核心干系人都不是一個人，而是 2-3 個人，對接人有層層回匯報關系。拋開項目本身業務是專業領域的內容學習成本高不說，就干系人管理這一項就頗為棘手。
在這個項目中我遇到了哪些問題：
干系人繁多，有三股神秘力量
業務復雜，專業性極強，訪談過程全是專業術語
PO 不是核心決策人
項目中后期，出現新的干系人
團隊成員能力需要培養
時間緊張?？蛻纛A算有限，就我們自己預估的時間直接砍半
綜上，這個項目著實做掉了不少頭發，這樣的項目要怎么做呢？希望大家在遇到這樣的項目的時候也少走一些彎路。聊到這里，就要聊一下項目管理是什么了，我們從頭來梳理以下，查漏補缺。也是對自己的一次復盤
·項目管理是有效資源整合，高效實現目標的一整套管理理念
·在復雜多變的環境中，如何做好一件事情
按照時間軸羅列，項目管理分為：啟動 規劃 執行 監控 收尾
那我套用到設計的項目管理，大致會分為以下幾個階段：
項目開始，在正式進入客戶場地以前，就是項目啟動階段，該階段需要了解：
項目：
項目的整體背景
挑戰
目標
項目范圍
時間周期
客戶關注方向
干系人：
客戶組織框架
核心關系人數量，匯報關系
是否有第三方人員對接
是否有合作的同類型角色
現狀：
該項目是否存在上下游系統，是否有依賴
現有系統狀態（是否有現存系統，沒有是如何完成工作過的）
里程碑規劃：
基于以上所了解到的信息，對項目全局時間計劃有整體性安排，明確項目被劃分為哪些階段
階段性產出和匯報時間節點梳理
（需要拉入客戶進來討論的時間節點需要提前規劃，需要邀請用戶研究的時間段需要提前規劃）
規劃里程碑時，一定要考慮部分風險和可變化因素 ，比如需求變更，干系人多，溝通成本增多，匯報層級鏈路長 ，需要等待領導決策，或者部分業務內容可能涉及第三方的一些依賴，合理增加里程碑的總體規劃時間 ，后期可以優化和調整規劃內容，在一定規劃時間內，部分階段可以適當延長，其他的相應縮短，給項目一些buffer，減少項目延期的風險。
成員安排：
對安排上來的小伙伴需要有一定的了解，了解人員的能力方向。安排能匹配或是跳一跳能摸得著的難度系數任務
如果上項目的小伙伴經驗比較少，需要建立團隊培養機制
保證項目成員安排的連續性，最好不要出現中間停一段時間，后面在續上，或者每天只安排0.2天
在安排時間計劃上，需要注意哪些工作是無法通過加人來完成的
資源規劃：
資源包括：人/物/場地
人：外部專家支持/其他部門支持（除內部項目人員外）
物：workshop要用到的所有工具，包括白紙，筆，便利貼，藍膠，馬克筆，故事卡等等
場地：日常辦公場地/會議場地
風險識別：
根據現有狀況，預測部分可能風險
將想到的可能風險一一列舉出來，并給出相關應對措施，這個如果無法獨立完成，可以和甲方一起協商完成。
當風險點都已經列舉完成，為了避免風險，大家需要提前達成一致的東西，提起和大家同步信息，如定義項目上的規則，保證會議不延期，要提前一周安排會議時間，保證信息同步，每天or每周制定同步會議。當需求變更，或者需求膨脹的情況下，可以參考的優先級排序，根據某項原則，完成優先級排序，將非必須的需求先劃分出去，保證需求在一定合理的范圍內。
枚舉風險有兩個好處：
預判一些可能的風險，提前做好準備工作
拉著客戶與團隊一起定義規則，不要隨意破壞
可以用這樣的表格管理風險，也可以直接在后面加上這個對應項的相關責任人，有什么問題，我們可以方便 跟蹤
舉例子：
風險點：比如會議干系人核心無法到場，造成會議延期，那么遇到這種情況怎么辦呢？
應對措施：提前和核心干系人確定時間，雙方協商會議時間，提前一周規劃時間安排，合理調整時間
風險點：疫情期間，出差隔離時間不可控
應對措施：Plan A 出差前提前了解當地相關政策，提前到達辦公地區。Plan B：部署遠程工作環境，建立信息共享機制，建立定期會議時間，同步信息，如果不能按時到達現場，可以啟用的Plan B
粗顆粒度任務拆分：
還是基于里程碑規劃的圖示舉例，在途中表示出來每一個階段的階段性活動是什么，產出物是什么，對齊產出物的顆粒度以及內容
愿景對齊：
讓所有的核心干系人參與該活動，避免大家后面信息沒有對齊，目標沒有對齊，產出結果無法達成一致。
高能預警：此處有深坑：注意避坑。
我參與的這個項目，如開頭所說有三股神秘的力量（在開始階段PO 都沒有介紹是三股力量，而是2邊，他們的關系有點復雜），但是由于地域影響，和各個力量之間存難以琢磨的關系，他們并沒有同時出現在愿景對齊工作坊中，來參加工作坊的只有一波人。愿景工作坊順利完成，項目目標，干系人關系，在這里才得以澄清。
雖然后面抄送了全員，并單獨去找了另外一邊的老大溝通目標，才發現他的目標和其他人的都不一樣，甚至應該不屬于這個項目范疇。
此事件復盤：
核心決策人必須參加
如果核心決策人沒有發表意見，請主動請他來表達觀點
如果實在無法到場，和他1Vs1的郵件會議紀要也要抄送全員。
如果發現多方意見無法統一，請不要繼續項目，把他們拉在一起，對齊愿景再出發
以下附上愿景對齊的工具——電梯演講
在項目開始階段，我們都會進行愿景工作坊，拉上所有的核心干系人一起，通過貼便利貼的方式，將大家的理解收集起來，并對所有的便利貼進行分類，最終收斂出最為核心的電梯演講
電梯演講海報的相關原則：
精煉，簡介——這個愿景海報將伴隨整個項目，越簡單越容易被人回憶起來
對于用戶需求這一項，大家一定會寫很多很多，但是在項目初期，大家寫出來的需求很多是作為客戶方，理解用戶想要的東西，是不是真實需求，還需要進一步被細化，所以這里對整體需求做較大顆粒度的歸納即可，不要深入細節
電梯演講可以出幾張？部分小伙伴可能會問我的目標用戶差異很大，出兩張，三張可以嗎，可以！可以將上半部分分開，比如目標用戶 For 哪幾類人群，他們的需求差異也可以規組，但是下半部分，產品名稱，產品形態，幫助企業獲得的價值，以及競品和賣點，可以是一致的，都可以在一張海報上所呈現
干系人識別：
我們大致梳理了公司的管理層級?，F在要把他們匹配到相當的關注層級之中
識別哪些干系人是重點關注的，那些是一般關注即可
高能預警：此處有深坑：注意避坑。一般來說項目的干系人優先級都比較穩定，不會發生改變，但是在去年的那個項目里面完全不同了，在項目的第一階段干系人A非常的重視，干系人B基本沒有太多的意見，但是到了項目的第二個階段，畫風發生了反轉，干系人A參與的越來越少，相反干系人B有更多的見解和想法。對于不同的干系人，他們想要的成功是不一樣的。需要明確不同階段核心干系人的差異，匯報給不同人有不同側重點。
所以在干系人梳理這塊，還需要注意的點是：
如果workshop 這種形式的大會很難讓干系人透露心聲，可以通過通過 1vs1 的溝通了解他們的真實需求，問他們的KPI是什么，是非常直接詢問他們最關系問題的方式。這對于復雜干系人的項目尤為重要。
也可以在workshop上新增期望對齊的環節，在下一個part會講到。
以下附上愿景對齊的工具——干系人/團體地圖
下面兩種干系人/團隊地圖的差異不大，可以根據需要任選其一即可，圖一更多可以梳理出干系人，或者團體之間的關系，除了判定干系人的權重，還可以在途中不中干系人之間匯報的關系，以及他們之間使用的不同系統的關系
下圖也是對干系人的權重和優先級的排序，與上圖不同的地方在于它更清楚的展示了我們如何去區分這些干系人的維度，維度可以根據項目需求哦進行變化。
期望對齊：
從各個維度對齊干系人對項目的期待
幫助干系人對各個維度有一些認知
這個有兩種做法，如果是干系人相對簡單的項目，可以在電梯演講的海報哪里，加上一類表示這個項目期望達到的目標，可以是定型的，如果團隊中有很好的數據監控埋點，這個指標也可以是定量的。如果干系人繁多，大家對想要達成的期望不是非常明確的時候，可以加上這個環節，這樣也能方便我們了解我們在項目過程中應該如何側重，因為現場的時間非常有限，我們不對所有的期望一一判斷是否合理。會在會后對一些超出范圍的期望和項目負責人達成一致。事先，可以列舉以下幾個維度，幫助大家思考：功能，項目本身，技術，體驗和成效，維度可以隨項目目標的不同自由變更，如果大家還有新的維度，也可以在現場添加
以下附上對齊期望的工具——期望看板
權重識別：
這個是千萬不要省略的一個對齊項目，后面有諸多事宜，我們需要跟俊權重的識別來判斷。比如在需求膨脹的時候，我們用什么方式判斷那個需求的優先級更高，應該把哪些需求摘出去?；蛘咴谧鲆恍Q策的時候，用來判斷，那些事我們應該優先處理，而另一些我們可能需要有一些妥協。后面在說到項目執行過程各種突入起來的變故的時候，這個參考項是必不可少的。在文章后面會更為詳細的列舉。
輔助決策
判斷優先級
以下附上權重識別的工具——權衡滑塊
詳細日程排期：
細化工作安排
提前約定相關干系人時間
提前預約用戶驗證時間
注意那些是客戶需要參與的時間點，無比準確
以下附上詳細日程排模版，這個相對來說沒有特定的方式，可以做到 Excel 表格中管理。也可以放到 日歷 中管理，當然如果你們有設計排期的服務軟件，都可以使用，我這里只呈其示意樣式
下一步我們就是正式開始進入項目拉
任務優化調整：
進一步的細化工作安排，如果發現團隊的小伙伴是新手，無法上手，就需要對任務進行拆分，拆分到什么顆粒度呢，拆分到團隊的小伙伴可以上手的顆粒度，當然拉，千萬不要全部包辦代替的把它做完。在項目允許的范圍內，讓風險發生！這是團隊人才梯隊建立的關鍵時刻，說到這里，如何培養團隊設計能力，又是一篇長篇大論了，我們回歸正題。如過小伙伴就有很多經驗，那就更可以安心的把整快大的蛋糕分給他，把他劃分為責任人，下面的工作內容如何拆解，應該分幾步來做，請放手。只用在關鍵節點和把控質量就好。
明確產出目標
明確產出內容
明確產出目的
明確產出物依賴
拆分責任人：
這塊和上訴的任務優化調整是聯系在一起的，當我們合理拆分任務后，當然要他這個任務匹配到相關的責任人，如任務優化調整所訴，可以是比較大的一大塊任務，比如信息架構這一個大塊，用戶調研這個大塊，制定相關人作為Owner ，至于他如何來拆解自任務，還需要請到那些人進行協作，由Owner 來全權負責，Owner 是需要對結果負責的人 。如果是新人，拆分成一個大塊是無法下手的，并不知道我每一步應改怎么做，那就把大蛋糕切細，切到他可以嘗試下咽的顆粒度即可。
在項目活動中，對于2個設計師以上的團隊，我們就可以利用設計看板。長期做敏捷交付的小伙伴對這個工具一定不會陌生。
對于有經驗的人，按照大塊拆分
對于新人，在按大塊拆分以后，需要對分支任務或是階段任務在進行下一步拆解
以下附上日常設計工作管理工具——設計看板
還是那句話，有設計進度跟蹤的工具的小伙伴請繞道哦，這個是非常簡單的且直白的一種設計管理模型，這樣就可以每日跟蹤大家的手上的工作進度了，也可以跟中哪些任務已經完成拉。上面的標題欄“待設計”“設計中”“已完成”也可以根據項目的不同階段，放置不同的標題，當我們設計完成后，就可以領取新的設計任務拉。
每天這樣移動卡片會不會亂呢，怎么和大家同步信息呢？那我們就要說到設計工作中一個關鍵活動了？
站會/業務對齊會
組內同步：
每日站會對項目來說是比不可少的，一般會定在每日早上，項目全體小伙伴都要參加，上班的第一件事就是開站會拉，多么有儀式感的一天，站會通常會占用10-15mins，站會可以用來：
同步信息包括，昨天，今天的工作內容
提出風險，有困難就喊出來，找大家一起需求幫助
這樣大家就非常明確每個人都在做什么，我的工作有什么依賴，我應該找誰解決獲取上下文，另外就是及時暴露風險。及時尋求幫助
另一項活動是我特別喜歡在團隊中使用的：業務對齊會
當項目比較大，每個設計師或者業務分析師分為了多個條線跟蹤業設計和業務。那業務對齊會也是比不可少的，當然業務對齊會不僅僅可以對齊業務輸入，當需要開發判定方案是否可行，或者需要其他的角色一起討論問題時，我們都會放到放到每日或者隔天的或者隔周的業務對齊會上一起討論，會議頻次根據項目實際情況自行安排，邀請成員通常是設計師和業務分析師一起，又是也會邀請其他角色，視會議需要討論問題而定
方便參與不同業務條線的同學對業務全景保持一致
不對角色的思維方式存在差異，可以轉換視角看待問題
可以相互評審設計稿，業務分析流程等活動，查漏補缺
它的優勢是：
保證出方案時間的完整。不會隨意打斷大家輸入和思考的時間，固定時間同步信息
高效同步信息。不會一次同步太多信息，信息量太大，趨于飽和，會少量多次，最長不要超過1h，如果超過就要增加會議頻次來減少時長。
干系人溝通：
終于寫到干系人溝通了，這真正是一個大坑
干系人溝通有幾個關鍵點：
建立信任 — 一切良好溝通的基礎
頻繁溝通 — 減少風險
及時提出自己的見解 — 體現你的價值
建立信任—特別是在項目開始的時候，這一點是致命的，如果開始時能建立良好的信任關系，那么在后期很多小問題的決策上，還有客戶對你方案的認可上都會容易的多。
如何在項目開始的時候建立信任呢？
對客戶現有產品業務能快速的理解——C端的可繞過（相對比較簡單，容易理解）。這里特指B端產品，部分B端產品的業務有時專業性極強，特別是之前我們做的這個項目，做用戶訪談時，每一句話都能用多個專業術語，你還沒有弄清楚這是怎么回事，就要跟上下一個話題了。對于我們這種非本專業的設計師來說，要想做好設計，提升用戶體驗，開始就要建立對產品業務的了解。
-自主學習，通過各種渠道找學習課件，提前對該領域專業術語作出梳理；對相關的背景知識有所了解，對領域現狀有所認知，包括現存的競品也可以找來看看，借鑒學習。
-找領域專家尋求幫助，對于是在無法獲取經驗的領域，也找不到相關的一些信息渠道，可以涉及到一些行業機密，可以酌情尋找第三方領域專家，和領域專家進行訪談，從他們哪里可以拿到很多一手資料。當我們對項目有一些假設時，也可以找領域專家驗證假設的可行性
-向訪談對象學習，可以判斷訪談對象的性格特質，如果很明顯的流露出善于表達，喜歡和你傾訴更多的信息，那么可以把握好機會，適當的詢問一些領域問題
-向客戶學習，PO也許不負責具體的業務條線，也可能多年不再碰具體的業務操作，但是他們對于理論的掌握還是有一定的借鑒作用的。
當然了，現在收集到了這么多信息，還需要整理和消化，并且驗證信息的可靠心是否是正確。
多渠道信息交叉驗證
信息之間能否相互關聯，相互串聯，形成閉環
專業技能維度——專業能力維度是設計師的立足之本了，毋庸多說，但這里需要強調幾點
-設計邏輯清晰，設計結果很重要，但設計思路同樣重要，很多設計師在展示自己的方案的時候，只呈現做了什么，結果如何，很好，很精良，但是一定要有邏輯連貫的思考過程，才能體現你的思維邏輯，我們的方案不是憑空捏造的，不是一拍腦袋想出來的，我們的設計是經經過了哪些步驟，這個步驟的作用是什么，設計結論是如何推倒的，這樣的設計包含了哪些設計原理 ，好處是什么。犧牲了什么，如何權衡它的犧牲的。
設計從戰略層倒表現層，越是取近于表現層，其評判標準就越主觀，眾口難調，特別是面向非設計領域的專業人員來說，這個評判標準在我們手上，我們要給出來我們這樣做的理由是什么，好處是什么，才能得到客戶的信任。
頻繁溝通 不要悶頭設計哦，在項目的每個階段都要定義定期展示案例的時間點，除了這些時間點外，還可以約
這里從問題的角度來會切入吧
需求變更，反復無常
半路殺出程咬金 — 干系人變更
增加項目范圍
老大不滿意
干系人意見沖突
干系人不認之前做的決策
》需求變更，反復無常
一般情況下，按照正常的項目流程來走，我們我們通過痛點發散出來的機會點一步步的收斂出需要繼續設計的方案后 ，用戶側的需求優先級是已經被考慮進去的，所以突然變更的需求大多可能是來自也無方，或者超級VVVIP 用戶
判斷是什么類型的需求？
合理需求：可以對需求進行規劃，判斷項目需求的優先級，如果合理且緊急，可以和相關干系人對齊，給予初步方案計劃，對部分現有需求做出置換（如果干系人經常變更需求，可以對設計方案作出估點，按照人/天置換需求），如果合理不緊急，拿出我們的權衡滑塊， 明確需要 foucs 在當前項目優先級下，不要過于發散，可以定制相關產品演進路線通過迭代演進方式逐步實施
不合理需求：可以委婉拒絕，如果實在無法拒絕，可以花費一些小effort，告知他為什么不合理
》半路殺出程咬金—干系人變更
可以在識別核心干系人的時候，詢問清楚在項目進行過程中是否有核心干系人的變更，提前識別
有時干系人的變更是突然的，無法提前識別，不要慌，繼續往下做。一般干系人變更可能會帶來以下問題：
要推翻之前的方向——相當于要從新立項，如果方向都被否定了，就不要繼續往下做，及時止損，重新規劃項目方向。
要新增項目范圍——新增的范圍非常大，大到可以重新規劃一個新的項目，就在規劃新的項目；如果新的范圍可控，還是根據本項目的權衡滑塊來判斷,哪些是優先級高的范圍，先做，不高的置換出來。
》老大不滿意
1.減少老大不滿意的風險，就是多建立溝通，最好可以親自向上層級匯報。
2.保證方案的邏輯性，所有的設計思路都是有據可依。
3.保證方案給用戶給企業帶來的價值。對于比較成熟的項目，最好價值是可以被量化，可衡量的，如果無法用數據橫向衡量，可以用定性的方式來判斷價值，比如在用戶驗證的時候，檢測新的方案是否能滿足客戶的需求，用戶對新的方案是如何評價的，在無數“證據”下，老大也不會無緣無故的不滿意
》干系人意見沖突
不要做干系人之間的傳話筒
拉著意見不一致的干系人一起討論問題
》干系人不認之前做的決策
這件事情在某些客戶干系人身上還挺常見的，對于超級難管的干系人，每次大會都要發郵件，不是不敏捷，是為了介紹缺少文字證據，而出現更多的坑
重要結論，會議紀要+郵件跟蹤
注意：一定要結論先行，大部分的人沒有耐心看完所有的內容，但是加粗字體的會議結論是能簡明扼要的概括，本次會議通過了什么決策。有什么遺留事件，具體的責任人是誰，需要完成的截止事件都要標明
以下附上郵件紀要的格式介紹
這個過程和項目執行的過程應該是穿插進行的，時間是非常有限的，不要面面俱到的跟蹤，抓大放小，只在關節節點驗收，比如前面項目執行中提到的如何拆分任務，同理，在驗收的過程中，也可在組內的對齊會上驗收設計輸出內容是否符合標準，是否有易用性問題，如果這是非常細小的圓角，交互的方式，布局的方式，可以交給團隊成員自己把控，如果一個設計師從用戶體驗要素的5層出發，每一層都面面俱到，無微不至，在這樣的大項目里面是很難管理的，把更多的空間留給設計師自己。
把有效的時間集中放在有較大提升價值的事情上：
保障產品價值交付
用戶體驗是否有所提升
現有的資源下，如何平衡，實現價值
拆分對內驗收節點：
把大的任務蛋糕拆分給每一個小伙伴后，他具體怎么吃，可以讓他自行安排，告知完成的時間階段，在特定時間端內驗收質量問題。
定期復盤：
通常我們通過 Retro 的方式進行復盤，時間周期視項目的時長來定，較短的項目可以安排為每兩周一次的 Retro，Retro 的步驟。1.宣誓（可以跳過）/2安全性檢查/3分別梳理 好的部分，不好的部分，和建議。好的部分鼓勵團隊繼續保持，不好的部分通過投票，選取前 Top 問題進行 討論整改建議。在下一次的 Retro 的時候進行復盤，看看這些問題是否都有改進。
當然還有很多做復盤的方式，方法本身不是最重要的，復盤的核心就是為了改進上一階段做的不好的地方，并且在下一階段有所改進措施。讓項目運行變得越來越好。
進度跟蹤：
通常會用項目周報的方式，想客戶展示項目的進度，現在進行到項目的什么階段，有哪些產出物，項目是否存在風險，項目計劃及人員投入比例
整體&歸檔：整理交付物，包括設計資產，使用說明和相關目錄，方便其他人員可以持續迭代
設計歸檔包含的重要組成部分包括且不限于：
設計源文件
用戶研究報告
用戶驗證錄屏材料
用戶訪談大綱
遺留問題跟蹤
Showcase材料
知識傳遞錄屏
...
如果文件夾過于分散，則需要寫一張目錄，目錄上附上文件夾的鏈接，方便呢其他的小伙伴能快速的找到
知識傳遞：注意保留錄屏文檔，當項目人員變更，可以及時傳遞上下文
在做知識傳遞之前，要和大家確認現有的產出，保障產出物不會在作修改，保障所有人都達成一致后，在開始后做知識傳遞。
做知識傳遞的時候，一定要記得錄制屏幕，以防有的小伙伴沒有參加，或是之后還要分享給其他的小伙伴使用，這樣就可以避免一邊一邊的重復人工講解啦，還有預留給大家提問題的時間，看看大家還有沒有不清楚的地方，盡量在會上一一解答。
PS：還想再分享一個，當項目中所要處理的事情過多時，如何排列優先級的問題
一般情況下，先看一下這些事情的依賴關系/事件難度，當緊急成度都很高的情況下
有依賴的關系的一般需要提前去收集信息，跟催進度，但花費是假相對較多，可能還有相互依賴，外力因素不可控
或者需要提前與人溝通事件，判斷溝通時間是否合適，但花費是假相對較少，但需要提前預約，外力因素不可控
事件越難的越需要留更多的時間處理，內在因素不可控，事件簡單的則可以安心放在后面進行，內在因素可控
可以按照風險等級排序方案：信息收集類> 約人溝通類>困難事件類>簡單事件類
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文章來源：站酷 作者：青沐CHIMO
隨著造車新勢力，車聯網的賽道發展越來越快。到2021年為止全國汽車保有量超過100萬輛的城市共有72個，與去年同期相比增加5個。，國家要求未來汽車要實現50%的智能車聯，現在頭部的蔚來、小鵬、理想，還有國產品牌的吉利、比亞迪、長城、東風。我們國內造車甚至可以超越合資車。我對未來車聯網還是很看好的。今天就跟大家聊聊現有的車載屏幕演變過程，以及現在市面上車載屏幕，和車載系統的特點。
首先先普及下HMI的概念
HMI：- Human Machine Interface : 人機界面，現在多指車載交互系統體驗設計。
既然說到人機界面，我們先來設計的載體是如何演變的。
1886 年，由卡爾·本茨發明的第一輛汽車。當時根本就沒有所謂的儀表盤概念，所以載體還得從1908年T型車（Ford Model T）說起，到2012年劃時代的特斯拉Model S，汽車儀表盤目前經歷四代。
機械式儀表盤: 第一個時代儀表盤為機械芯儀表，一般包含了車速里程表、轉速表、機油壓力表、水溫表、燃油表、充電表等，之后汽車儀表還需要裝穩壓器來穩定儀表電源的電壓，抑制波動幅度，保證汽車儀表的準確性。初代的汽車儀表盤主要以傳統的熱式和動磁式，顯示的信息極為有限，更多的是車輛物理信息“通信員”的角色。
在機械時期中控臺哪有什么屏幕可言，那時候的中控臺就是收音機和空調的調節器，而且都是實體按鍵的，只能滿足駕駛的基本需求，沒有屏幕，都是照搬飛機中控布局，以實體按鍵為主，功能簡陋單一。堆砌功能按鈕儀表，沒有交互可言。
第二個時代的電氣式儀表盤終于誕生，從真空熒光顯示屏（VFD），發展到采用液晶顯示屏（LED）及小尺寸薄膜晶體管顯示器（TFT），顯示屏顯示的信息越來越清晰、快捷。目前電氣式儀表在市場的保有量最大，且一般采用機械儀表結合數字儀表的方式，例如車速、轉速信息采用指針，指示燈信息采用LED等點亮，其它信息則采用TFT屏。
雖然相較于第一代機械機芯儀表增加了不少功能，汽車信息反饋也更全面更及時，但是其發展速度卻明顯與汽車行業不相匹配，對于更深層次的駕駛需求，電氣式儀表仍無法滿足。
汽車儀表盤領域在不斷追求更新，于是劃時代的全數字液晶儀表盤孕育而生，也是就我們常說的虛擬儀表盤。全數字汽車儀表盤使用了一整塊液晶屏取代了傳統的指針和刻度表，所有信息都通過這塊屏幕顯示出來。
單從外觀上來看就能給人以一種比較高大上的感覺，這類儀表盤上往往沒有指針等部件，所有信息都通過屏幕傳遞出來。功能更強大、信息顯示更具邏輯性，駕駛者接受信息更快，提升行車安全。也可以根據個人喜好調整相應參數，比如比亞迪的儀表盤就可以改變背景顏色。在高級點的，像寶馬的全數字儀表就可以切換N多種模式。
2007年iPhone問世后，大屏、輕薄機身、高清顯示屏、可安裝應用等功能引領了整個行業的革命。電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來,結果就是屏幕越來越大。
2013年上市的特斯拉Model S,座艙里最驚艷的就是那塊17寸的大屏。超高的分辨率和流暢的操作,和漂亮的UI設計,最初讓很多美國民眾瘋狂。就像蘋果手機顛覆了傳統手機業,特斯拉也顛覆了傳統汽車行業。
2014年換代的奔馳S級將兩塊12.3寸屏幕連在一起,合成了一塊23寸大屏,比特斯拉的大屏還多出6英寸。
拜騰M-Byte,48寸巨屏,橫向貫穿儀表臺,再一次顛覆汽車的內飾設計。
比亞迪系列汽車的旋轉大屏,玩出新花樣,可以旋轉控制,就像手機橫屏和豎屏的場景。
縱觀下來,其實不難看出,雖然汽車的中控屏幕也是往著越來越大的方向發展,但因為空間以及功能需求的不同,相比起手機來說,中控屏幕的變化更具備多樣性。
從上世紀80年代，抬頭顯示技術在汽車領域已經開始被使用，直到現在才開始逐漸展露頭腳。
HUD抬頭顯示器(Head Up Display)，又叫平視顯示系統。它可以把重要的信息，映射在風窗玻璃上的全息半鏡上，使駕駛員不必低頭，就能看清重要的信息。
戰斗機是率先應用HUD抬頭顯示器的。飛行員在空戰中，需要交替觀察艙外目標和艙內儀表，易產生瞬間視覺中斷，因此會導致反應遲緩、操作失誤，并有可能貽誤戰機，采用HUD抬頭顯示可克服這一缺點。
第一架使用HUD抬頭顯示的飛機是美國海軍的A-5艦載機。民用航空最早使用HUD抬頭顯示是法國達索飛機公司的mercure飛機。
在復雜多變的道路上開車，駕駛員雙眼離開車輛前方，是個非常危險的事情，尤其是在高速公路上更是明顯。于是很多車型，就給車輛配備了一個不需要挪開視線，就能知道車輛基本信息的配置，這就是HUD抬頭顯示。
HUD作為一款新技術，優勢顯而易見。當駕駛員需要查看儀表盤或中控臺上的信息，視線至少需要轉移0.3秒，而HUD投影的信息就在駕駛員平視的正前方，駕駛員可以將更多的注意力放在路面上。將駕駛體驗及駕駛員對于路況信息的認知能力進行革新式升級。
現在各家系統百家爭鳴，各家車載系統設計有哪些不同？
1、阿里車載小程序是一種無需下載安裝即可使用的“應用”，旨在為用戶打造“隨時可用”、“用完即走”的使用體驗。
2、AliOS作為互聯網汽車操作系統，原生地支持阿里小程序，引入阿里生態服務的同時也面向開發者開放，圍繞車場景為用戶提供從出行到生活的各類智慧服務。
1、設計特點：
獨立的大卡片式的內容界面模塊方便車主在行車過程中單手操作，其配色鮮艷，風格扁平，符合使用場景和國人的使用習慣。
2、功能特點：自帶場景智能感知的基因。
得到車主授權后，車載小程序可以圍繞行車場景，實現上車前、行車中、下車后自然串聯的智能化場景服務。
用戶可以在車上通過觸控、語音、手勢等多模態交互方式，咨詢附近的推薦餐廳，小程序會基于用戶的喜好作出推薦，還可以預約排號；到達餐廳附近，系統會自動喚醒小程序，為用戶找到停車場；下車后，車載小程序會無縫連接到手機小程序端，用戶可以在手機上查看餐廳的預約信息等。
△ 斑馬智行2.0系統設計
斑馬智行，采用智能手機界面和應用商城下載 APP 的使用方式，實現車載和手機的雙重控制。
強大的云端特性在語音識別和線上互聯方面提供了良好的使用體驗，車主可以連接手機藍牙后，讀取其手機通訊錄，實現利用車載系統撥打和接聽電話的功能。支持 USB 接口，通過 U 盤實現播放音頻、視頻文件等。在娛樂生活方面，內置蝦米音樂，蜻蜓FM，喜馬拉雅等，支持在線搜索，在線播放以及在線廣播等服務。
同時，斑馬智行依靠阿里強大的技術和資源支持，打通停車場，加油站，高速公路支付等，使用戶駕車時產生的費用均能通過支付寶支付。
1、打造智能車載服務生態，滿足用戶出行、娛樂、生活等多元化需求，構建人-車-家一體化互聯閉環成為時代趨勢。
2、智能小程序，是百度提供的一種技術解決方案。開發者基于此開發出來的服務，在各類宿主環境（手機 App、車載系統、IOT 設備等）中，可做到用戶無感知安裝，即點即用。
1、設計特點
車載端主界面分別采用藍、綠、紅、灰四個色塊對應四個功能模塊，「發現」集成音樂、娛樂、聽書、電臺等特色音視頻服務，采用紅色在界面中最為突出，其設計風格整體扁平，面性 icon 利于識別與點擊。
2、功能特點
智能小程序包括“車后服務”、“資訊”、“休閑游戲”、“視頻”、“購物”、“親子”、“旅游”、“工具”等8個類別，一共80多款。車企可以根據車型定位和自身需求自行定義和組合可供使用的車載小程序。
百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒，但在生態的開放性上，百度車載小程序則做得更為徹底，可以在百度App、百度地圖、百度貼吧、百度網盤百度系App上運行。
1、“騰訊小場景”是專為出行場景打造的車載輕應用生態，部署在云端，不需要下載，即用即走，并支持語音交互。
2、分為3類，出行服務小型車、生活服務小程序和視聽服務小程序。
1、設計特點：
運用的FutureLink3.0系統，FutureLink3.0 基于安卓平臺開發，在 12 英寸的中控屏幕上并沒有將大量的圖標堆砌在首頁，反而以地圖為背景，將六大功能模塊以大板塊的形式布局在地圖下方，整個界面設計簡潔。
2、功能特點：
最大特色：基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候，有些購買和支付的服務就會主動彈在車機上，用戶再通過語音完成操作。
手機小程序是“人找服務”，那么騰訊車載小程序則進化成“服務找人”。
△ 騰訊在車載場景下的生態布局
Ai in Car，顧名思義，基于 AI 的連接能力和生態，融合騰訊內容生態的優質資源，包括資訊、視頻、IP、文學等板塊，為車主提供更豐富的內容消費。風行搭載的 FutureLink3.0 車聯網系統，就是和騰訊深度合作而誕生的優質案例。
△ FutureLink3.0系統界面
只在設置頁中，才會出現二級子菜單列表，而且提供的設置項目也不多，界面層級簡單，不累贅，也給司機帶來輕松愉悅的操作體驗。同時，基于行車安全考慮，在類似天氣、股票等查詢功能上，比較依賴語音控制。在娛樂生活方面，打通手機和車機賬號，用戶無需切換賬號就可以與車載導航、電臺、QQ音樂、微信等功能無縫銜接，支持車主組建聊天組，在行車途中與好友進行實時溝通。
從整體來看 FutureLink3.0 的設計，它更像是一個把需求頁面展現在車主面前的「輕應用」，沒有傳統概念上的主界面、多層交互菜單以及相應的「系統特質」的設計，它更希望把海量資源建立在云端，終端只給車主呈現其所需要的服務即可。
Android Auto 系統的工作原理是將手機連接到兼容的汽車，讓駕駛員可以使用汽車屏幕和語音操作與手機的應用程序進行交互。它提供了一種導航、收聽媒體和消息等的簡單方法。
1、設計特點：
在 UI 框架設計方面，主屏幕以卡片的形式顯示通知、活動、導航和消息，右下角有啟動語音命令的麥克風圖標和底部的活動欄，這些特性屬于全局 UI。在它下方，應用程序內容區域顯示應用程序啟動器或當前使用的主應用程序的內容。
△ Android auto手持設備與車載設計系統
Android auto 將 Android 平臺擴展到汽車上，它有兩種使用方法：在手機上或在兼容的車載屏幕上。
它有一個簡單的界面，標準化的用戶交互模型和強大的聲音動作，其目的是幫助司機盡量減少分心。需要注意的是，為汽車設計交互式應用程序與手持式設備的設計有根本上的不同，其應用程序的交互界面應該簡化，以確保司機的眼睛和手集中在開車上，減少司機分心。
△ Android auto車載系統UI框架
卡片上提供如消息字符串、圖標、圖形和操作等內容，會根據用戶最近的使用情況和優先級來確定卡片的大小。主屏幕會限制卡片的數量，以保持列表的簡短和相關。因此，當新的、更相關的內容出現時，應用程序的通知可能會從屏幕上消失。同時，抽屜式的交互方式，提供了簡單的操作和導航。每個抽屜項目必須提供一個單一的觸摸目標，避免在抽屜里放長的列表，或者在相同內容的視圖之間切換。這里官方給出的最佳 UI 做法是簡化內容，關注上下文，顯示新鮮的、有用的和大多數不滾動的項目，使用單行，對決策至關重要的較長字符串使用兩行。
CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布，最早出現在一些制造商的汽車展覽上。
1、設計特點：
基于手機映射，所以界面除了橫向布局外，icon都和手機端統一。以簡潔的布局提供有用的、重點突出的信息，便于從駕駛員座椅上進行掃描。不要用不必要的細節和不必要的裝飾來弄亂屏幕。
在整個應用程序中保持整體一致的外觀。一般來說，具有相似功能的元素應該看起來相似。
2、功能特點：
作為車內輔助、操作、娛樂的中心，Carplay 可以直接連接到汽車中控的觸摸屏上，提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景，而它的設計原則也圍繞著這一場景來規劃：
成熟?；谧钍煜さ?iOS 應用，來設計界面元素，并提供熟悉、直觀的體驗。
簡短。采用盡可能簡短的交互，不過度引人矚目
相關。屏幕顯示信息高度相關，提供盡可能少選項，不需要復雜決策
語音?；赟iri，以語音交互為核心，司機無需視線離開前方，手也不用離開方向盤即可完成交互。
全新的電子車鑰匙，加上 Apple CarPlay 車載流暢的使用體驗，讓 iPhone 能在旅途上發揮更多作用。地圖、電話、信息、音樂、日歷、一言、一觸、一旋隨你駕馭。
HMS for Car是華為終端云服務打造的智慧車載云服務解決方案，基于HMS（Huawei Mobile Services），通過AI場景引擎結合華為生態資源，為用戶提供精準豐富的出行場景內容和服務，助力汽車從交通工具向具有交互和服務的能力的智能終端進化。
華為快應用是一種基于行業標準開發的新型免安裝應用，其標準由主流手機廠商組成的快應用聯盟聯合制定。開發者開發一次即可將應用分發到所有支持行業標準的手機運行。
HMS Core提供端、云開放能力，幫助開發者實現應用高效開發、快速增長、商業變現，使能開發者創新，為全球用戶提供精品內容、服務及體驗。
1、全球化分發。已上線超過170+國家和地區。
2、全終端接入。全面支持從小屏幕到大屏幕各種智能終端。
3、全場景支持?？鞈弥边_鏈接和卡片嵌入全終端場景。
1、設計特點：
在交互界面上，Carplay和Carlife由于使用的投屏方式，主界面依然是一個個的APP圖標，需要點擊啟動進入后才能使用。筆者認為采用這樣移動端過于笨重的交互方式并不適用于車載場景；HUAWEI HiCar的設計理念是"安全便捷、自然舒適、智能貼心", 對車載端的人機交互要素重新布局規劃設計，采用桌面卡片的設計方式，以滿足復雜駕駛狀態下的使用需求。
桌面卡片是應用內容和功能特性的重要載體，用戶通過對卡片的快捷操作直達應用的核心功能，提升交互的便捷性。應用可通過接入 HUAWEI HiCar 桌面卡片的方式呈現最核心的功能和服務，并根據自身的需求特性，自行組合卡片元素以滿足不同場景下的用戶訴求。
背板：背板樣式可以為色彩填充或設置背景圖。
背景色支持黑、白、彩色三套。
應用需提供三套背板以適配卡片主題切換。
品宣區：品宣樣式為圖標+文字，應用可根據在此區域顯示品牌圖標和名稱。
內容區：展示與應用場景相關的信息，其內容可以是圖片、文本或圖文樣式。
操作區：操作區為文字或圖片按鍵，最多 3 個控件或 1 個控件組。
華為智慧助手，可結合用戶使用場景，以卡片形式推送提醒、服務和行程，實現智慧化服務找人。例如，送孩子上學時，車機端華為智慧助手將自動推送"有聲續播"卡片，用戶點擊卡片，即可一鍵續播孩子在華為手機上沒聽完的有聲兒童內容；用戶在開車下班回家路上，進入離家500米范圍內時，車機系統可自動啟動"回家模式"，提前打開家中的窗簾、空調等設備，方便用戶享受愜意生活。
My Car功能面向車企開放華為手機等智能硬件系統級入口能力，能夠實現遠程控車、查車、汽車服務/告警關鍵信息等反向推送能力。遠程控車功能，可以滿足用戶高頻控車訴求，例如，遠程開關空調、尋車、查看門窗狀態等。另外，當車輛胎壓不足、門窗未關閉時，用戶也能通過手機、車機及時收到提醒。
1、阿里Alios開放平臺
https://miniapp.alios.cn/index#/document
2、百度車載生態開放平臺
https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html
3、騰訊-車載小場景（私我領取PDF）
4、谷歌駕駛
https://developers.google.com/cars/design/design-foundations
5、蘋果apple car play
iOS - CarPlay 車載
6、華為車機三方應用交互設計規范
https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：郝小七
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn