這是最常被提及的用戶體驗設計基礎，當涉及到產品設計決策時，提醒我們要學會使用同理心，而不是僅憑個人的想法或意見。

真正好的用戶體驗設計是為用戶量身打造的，用戶的意見、痛點、愿望、偏好和需求對產品來說至關重要，所以在項目初始階段需要投入大量的時間和精力去了解用戶。

用戶體驗研究重點是了解用戶，為接下來的產品設計做準備。以用戶為中心的設計理念是設計師迎合用戶的需求，區分了設計任何人都可以使用的產品和為目標用戶設計的產品。

一款特定的產品需要面對不同的目標群體，前期研究中需要了解目標人群需要什么并在產品中反映出來，這是針對性很強的設計研究。

2.了解信息架構

可能很多人對信息架構的定義很模糊，這里舉個例子來具象說明一下信息架構的含義。

例如在一款產品中，如果把所有內容都堆到一個列表或頁面中，可能我們將無法使用這款產品，所以我們看到大多數的App和網站都包含很多的導航和頁面結構，按照內容重要程度有序地來組織內容。

信息體系結構的最終目標是幫助用戶理解他們在看什么，并幫助他們找到需要尋找的內容。

信息架構在制作線框圖或原型之前完成，因為它是產品的基礎，有助于設計師考慮什么功能是最重要的，哪些是用戶最需要的以及哪些次要內容可以隱藏起來等。

這種結構與產品的導航設計密切相關，有助于將用戶引導到正確的位置。導航和信息架構都試圖讓用戶以最少的認知努力來完成操作。

信息架構的設計不當會造成重大故障甚至可能危及整個產品。如果用戶在使用產品時找不到任何想要的內容，點擊任何元素都沒有反應，會給用戶帶來很糟糕的使用體驗。

3.考慮使用場景

沒有場景，任何設計都很難生效。設計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。

這條原則有助于設計師考慮還有哪些因素會影響用戶和產品，很多產品設計會為用戶提供一些有助于消除使用摩擦的操作提示。

例如在設計表單時，會盡可能的添加輸入提示，最大程度地減少用戶出錯的機會。

4.了解一致性及其重要性

保持一致性是用戶體驗設計的關鍵原則。擁有一致設計的產品可以更快地被新用戶接受，因為用戶不需要再次學習如何操作，他們會回憶起之前的操作習慣并將其作為指導，這也解釋了為什么同類型的產品例如電商類App頁面設計的很相似。

保持一致意味著在需要時可以重復使用某些UI組件，并在整個產品中保持一致的行為。例如當點擊或懸停在按鈕上面時，所以按鈕的狀態應該是一致的。

從邏輯上講，產品越大，這種一致性會變得越來越有挑戰性，這促使許多設計團隊創建自己的設計系統。一款產品的學習曲線越長越陡，放棄的用戶就會越多，在市場營銷中，這通常被稱為銷售漏斗中的漏洞。

5.給予用戶適當的控制權

這條原則意味著用戶希望能控制產品，無論是完成任務還是定制滿足他們需求的內容。

在設計過程中一直試圖給用戶盡可能多的控制權，例如允許用戶撤消操作、更改設置、自定義UI外觀、創建快捷方式等。

需要注意的是，當提供太多選項或用戶太依賴于自己的選擇時，用戶可能會不知所措，造成所謂的選擇悖論。所以在設計時要了解用戶樂于掌控的余地，不能讓用戶感到使用壓力。

6.把可用性放在首位

在整體上看，建立高標準的可用性是為用戶做的最好的事情，有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作。

可用性的重要之處在于要理解可用性的靈活性和重要性。

7.了解用戶測試

結合可用性的概念，我們還要進行用戶測試，這是設計師對工作進行測試的方式，對新的產品來說至關重要。

當設計思想和理念被轉化為有形的原型時，設計師要觀察真實的用戶是如何與之交互的，可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現。

測試通常分幾輪進行，團隊在向原型添加更多細節之前驗證每個步驟。隨著測試結果的出現，設計也隨之發生了變化。

如果發生更改，將會進行新一輪的測試，通過這個過程，設計團隊可以改進他們的工作，直到達到可用性標準。

8.少即是多

在創造力和創造獨特事物的渴望中，很多設計師很容易無意中弄亂產品界面甚至產品本身。

功能過多的產品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊，但也會給用戶帶來負面體驗，在設計時要學會克制并優先考慮真正關鍵的部分。

另外手機端的屏幕空間非常小，創建一個有效的布局，想出巧妙的方法來隱藏次要元素并創建一個令人愉悅的界面需要付出很大的努力和創造力。

9.視覺層次

視覺層次是向用戶傳達產品中元素重要性的方式。良好的層次結構有助于用戶視線在界面上移動，并立即了解最重要的內容以及這些內容與其他部分的關系。

視覺層次結構與布局設計緊密相連，幫助用戶消化所接觸到的信息。

創建層次結構從概念的草圖開始，一直持續到完成設計。例如發送按鈕通常會用綠色而是不紅色，而次要按鈕會顯示為灰色或與背景混合，并顯示“撤消”或“返回”。

10.了解用戶的心智模型

為用戶創建心智模型是嘗試使用同理心的一種方式，是幫助設計師從用戶的角度看待問題的工具。

做到準確就是直觀的產品，用戶不需要投入精力就可以使用它，而錯誤的思維模型會導致一些問題，例如界面混亂、高昂的交互成本。

為了匹配用戶的心智模型，可以采用多種不同類型的研究方法，常見的方法包括卡片分類、決策樹、對用戶行為的密切觀察，或者使用大量的數據來建立關鍵用戶的心理模型。

11.設計中的講故事

講故事的方式更加直觀，利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設計中的視覺敘事是為了喚起用戶的情感，給用戶留下持久的印象。

想出一種可視化的方式來傳達復雜的內容具有挑戰性，但同時也是有益的，可以更好地接近用戶并將其作為提高產品可學習性的方法。

12.不要直接跳到高保真原型上

高保真原型是設計項目的最終目標，但是直接使用原型軟件不斷添加各種頁面細節是錯誤的操作。

避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下，一款產品無論具有多少的細節都有可能面臨不符合用戶使用的情況。

13.可訪問性測試很重要

不僅要檢查關鍵用戶是否可以流暢地使用產品，還應該檢查其他所有用戶例如少數群體等是否都能夠正常使用產品。

事實上，殘疾人和其他用戶一樣需要數字產品，但很多產品在設計時并沒有考慮到這些群體，但這也提供了一個機會，為所有用戶提供一個可以依賴的好產品。

14.熟悉并在用戶體驗設計中使用

我們知道為用戶提供一致的設計有助于克服學習曲線，同時為用戶提供熟悉的東西也有助于縮短學習曲線。

例如，大多數用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕)，這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

使用用戶已經熟悉的東西并不一定會讓產品的獨特性消失，有經驗的設計師會利用這種熟悉性來來創造一些獨特的設計，同時也是直觀的，不需要太多努力就可以使用。

設計一個完全不依賴熟悉度的產品可能是具有風險的行為，因為它很容易讓那些不熟悉產品的用戶超負荷，形成巨大的學習曲線，增加用戶負擔。

15.了解交付成果的力量

可交付成果是可以在整個團隊中交付的內容，包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等，是一種有形和具體的表現。

可交付成果是用戶體驗設計原則，可以幫助設計團隊和其他利益相關者理解和交流概念。

▲ 用戶畫像可以捕捉理想用戶，并提供可以相關聯的真實面孔，是一種指導設計的工具。用戶旅程圖幫助設計師了解用戶完成任務需要的具體步驟，有助于確保這些步驟確實可以輕松執行，并且整個過程很流暢。

這些交付成果服務于關鍵功能，設計師需要在整個項目中都依賴它們，不斷轉換為用戶可以與之交互的真實有形的設計。

16.專業的原型設計工具

用戶體驗設計的過程不是線性的，而是一個循環。無論創建什么樣的產品，都需要專業的原型工具，將基本框架放在一起，然后添加可能需要的所有細節。

從邏輯上講，設計團隊的具體需求會因團隊而異，但一些關鍵功能例如團隊協作、需求管理、交互設計和開發移交等，對于大多數團隊來說是必要的。

17.精心管理產品需求

一切都從收集需求開始，然后慢慢創建關鍵列表。雖然簡單地列出一個列表聽起來很容易，但隨著項目的進展，要保持列表的條理性確實是一個挑戰。

除了創建需求和檢查需求之外，還有一個問題就是調整需求，需要從設計、技術和業務各個方面來處理各種需求，還要確保這些需求之間沒有相互矛盾。

18.了解移動和網頁產品之間的差異

網頁端和移動端產品最明顯的區別是屏幕尺寸，這意味著所有的視覺層次結構和信息架構都將從Web到App發生變化。

移動端產品會有更多影響設計決策的因素，例如設備的操作系統、使用產品的環境等。了解移動端產品在導航設計、用戶流程等關鍵方面的差異是至關重要的用戶體驗設計原則。

19.利用UX設計模式

幾乎所有的產品都專注于設計模式，它們可靠、易于查找并通過減少設計時間來為項目增加實用性。

▲ 當用戶在谷歌搜索中輸入的內容有問題時，谷歌會提供一個相關的搜索提示，輔助用戶進行精確地搜索，解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內容的問題。

20.使用合適的工具才能有效

擁有單一的內容來源可以為團隊帶來清晰性和高效性，如果線框和原型分散在多個渠道中，這種內容的集合就會變得很難達成。

通過合適高效的工具能夠避免產品在到達終點時遇到各種各樣的可用性問題，防止產品細節沒有表現出來或者被忽略。

最后

通過這份用戶體驗設計原則的合集希望能夠讓你對這個領域有一個大致的了解。

沒有人知道用戶體驗設計在未來會引領我們走向哪里，不過我們可以確定，無論它帶給我們什么，肯定都會很有趣。

內容參考：justinmind.com/ux-design/principles

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

作者：Clippp

轉載請注明：學UI網》掌握這20條用戶體驗設計原則，助力設計成長！

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

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

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

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

一、基礎概念

1、什么是數據可視化

把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段叫做數據可視化，數據可視化是為了更形象地表達數據內在的信息和規律，促進數據信息的傳播和應用。

在當前新技術支持下，數據可視化除了“可視”，還可有可交流、可互動的特點。數據可視化的本質是數據空間到圖形空間的映射，是抽象數據的具象表達。

數據可視化作品《launchit》  作者：Shane Mielke

作者寫了本書，地圖上顯示了世界各地讀者的分布情況及對應人數

數據可視化作品《world-drawn-by-travelers》 作者：TripHappy

國家之間相互連通的旅游路線，顏色越相近的國家，表明兩國家的人們互動越頻繁

2、什么是大屏數據可視化

大屏數據可視化是以大屏為主要展示載體的數據可視化設計。

“大面積、炫酷動效、豐富色彩”，大屏易在觀感上給人留下震撼印象，便于營造某些獨特氛圍、打造儀式感。電商雙11類大屏利用此特點打造了熱烈、狂歡的節日氛圍，原本看不見的數據可視化后，便能調動人的情緒、引發人的共鳴，傳遞企業文化和價值。

利用面積大、可展示信息多的特點，通過關鍵信息大屏共享的方式可方便團隊討論、決策，故大屏也常用來做數據分析監測使用。大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

數據分析類  圖片來源：必應；圖片作者：帆軟軟件有限公司

二、大屏數據可視化設計原則：設計服務需求、先總覽后細節

• 設計服務需求

大屏設計要避免為了展示而展示，排版布局、圖表選用等應服務于業務，所以大屏設計是在充分了解業務需求的基礎上進行的。那什么是業務需求呢？業務需求就是要解決的問題或達成的目標。設計師通過設計的手段幫助相關人員達成這個目標，是大屏數據可視化的價值所在。

• 先總覽后細節

大屏因為大，承載數據多，為了避免觀者迷失，大屏信息呈現要有焦點、有主次?？梢酝ㄟ^對比，先把核心數據拋給用戶，待用戶理解大屏主要內容與展示邏輯后，再逐級瀏覽二三級內容。部分細節數據可暫時隱藏，用戶需要時可通過鼠標點擊等交互方式喚起。

三、大屏可視化設計流程

規范的流程是好結果的保證。找到一個可參考的流程，然后步步為營，就能避免很多不必要的返工，保證設計質量和項目進度。

1、根據業務場景抽取關鍵指標

關鍵指標是一些概括性詞語，是對一組或者一系列數據的統稱。一般情況下，一個指標在大屏上獨占一塊區域，所以通過關鍵指標定義，我們就知道大屏上大概會顯示哪些內容以及大屏會被分為幾塊。以共享單車電子圍欄監控系統為例，這里的關鍵指標有：企業停車時長、企業違停量、熱點違停區域、車輛入欄率等。

確定關鍵指標后，根據業務需求擬定各個指標展示的優先級（主、次、輔）。

2、確立指標分析維度

“橫看成嶺側成峰”。同一個指標的數據，從不同維度分析就有不同結果。很多小伙伴做完可視化設計，發現可視化圖形并沒有準確表達自己的意圖，也沒能向觀者傳達出應有的信息，可視化圖形讓人困惑或看不懂。出現這種情況很大程度就是因為分析的維度沒有找準或定義的比較混亂。

上圖向大家展示了數據分析常用的4個維度，我們在選定指標后，就需要跟項目組其他小伙伴討論：我們的各個指標主要想給大家展示什么，更進一步的講，是我們想通過可視化表達什么樣的規律和信息。而上圖，可以引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題。

• 聯系：數據之間的相關性
• 分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
• 比較：數據之間存在何種差異、差異主要體現在哪些方面
• 構成：指標里的數據都由哪幾部分組成、每部分占比如何

3、選定可視化圖表類型

當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。

選定圖表注意事項：易理解、可實現；

易理解

可視化設計要考慮大屏最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

可實現

1. 我們需要了解現有數據的信息、規模、特征、聯系等，然后評估數據是否能夠支撐相應的可視化表現
2. 我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用Ps/Ai/Ae這些工具模擬時會發現比較困難；同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計！一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。

4、了解物理大屏，確定設計稿尺寸

多數情況下設計稿分辨率即被投大屏的信號源電腦屏幕的分辨率。有多個信號源時，就會有多個設計稿，此時每個設計稿的尺寸即對應信號源電腦屏幕的分辨率

一般情況下設計稿的分辨率就是電腦的分辨率，當有多個信號源時，有時會通過顯卡自定義電腦屏幕分辨率，從而使電腦顯示分辨率不等于其物理分辨率，此時，對應設計稿的分辨率也就變成了設置后的分辨率；此外，當被投電腦分辨率長寬比與大屏物理長寬比不一致時（單信號源），也會對被投電腦屏幕分辨率做自定義調整，這種情況設計稿分辨率也會發生變化。所以設計開始前了解物理大屏長寬比很重要。

5、頁面布局、劃分

尺寸確立后，接下來要對設計稿進行布局和頁面的劃分。這里的劃分，主要根據我們之前定好的業務指標進行，核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。一般把有關聯的指標讓其相鄰或靠近，把圖表類型相近的指標放一起，這樣能減少觀者認知上的負擔并提高信息傳遞的效率。

6、定義設計風格

很多小伙伴也許沒接觸過大屏設計工作，但大多數人都應該有APP或者Web風格定義的經驗。我們在定義一款APP或者Web頁面設計風格時常用的方法是什么呢？情緒版！

大屏雖酷炫，但實際上也是運行在瀏覽器里的Web頁面，所以大屏設計風格定義方法也同樣可以是用情緒版來做，這種方法也是目前比較科學高效的風格定義手段

上圖提供了情緒版應用的腦圖，具體操作細節不做介紹，不太了解的小伙伴可以自己找找資料哈。情緒版的一套流程下來，我們定義的風格基本是科學準確的，可以指導我們執行設計。如果是給甲方爸爸做大屏，這個流程也可以讓我們提出的方案更有說服力

7、可視化設計

根據定義好的設計風格與選定的圖表類型進行合理的可視化設計。目前來講大屏可視化主要有指標類信息點和地理類信息點兩大可視化數據。指標類信息點可視化效果相對簡單易實現，而地理類信息點一般可視化效果酷炫，但是開發相對困難，需要設計師跟開發多溝通的。地理類信息一般具有很強的空間感、豐富的粒子、流光等動效、高精度的模型和材質以及可交互實時演算等特點，所以對于被投電腦、大屏拼接器等硬件設備的性能會有要求，硬件配置不夠的情況下可能出現卡頓甚至崩潰的情況，所以這點也是需要提前溝通評估的。

8、樣圖溝通確認

這里的溝通分三個層面：設計師對內溝通、設計師對外溝通、設計師與大屏的“溝通”。

樣圖溝通環節，最初的樣圖不需要十分精致，我們可以把它理解為一個“低保真”原型，然后通過不斷溝通修改，讓它逐步完善精致起來，也就是小步快跑，避免那種一下子走到終點，然后又大修大改的情況。

因為我們在前幾步已經分別確定了頁面布局、圖表類型、頁面風格特點，所以這一步我們需要用盡可能簡單的方法 ，把之前幾步的成果在頁面上快速體現出來，然后根據樣圖效果嘗試確定五方面內容：

1. 之前確立的布局在放入設計內容后是否依然合適
2. 確立的圖表類型帶入數據后是否仍然客觀準確
3. 根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受
4. 已有的樣式、數據內容、動效等在開發實現方面是否存在問題
5. 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象

跟大屏“溝通”是比較重要也是個特殊的環節，這也是我覺得大屏設計跟其它設計不一樣的地方，大屏有它自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境，這里的很多問題只有設計稿投到大屏上才能夠被發現，所以這一步在樣圖溝通確認環節非常重要，有時候需要開發出demo，反復測試多次。

9、頁面定稿、開發

事實上頁面開發階段并不是到了這一步才進行，這里說的頁面開發僅指前端樣式的實現，實際上后臺數據準備工作在定義好分析指標后就已經開始進行了，而我們當前的工作是把數據接入到前端，然后用設計的樣式呈現出來。

切圖與標注

由于大屏實際就是一個web頁面，所以開發階段的切圖與標注是少不了的。

切圖：哪些元素需要切圖，怎么切？

一般開發用代碼寫不出的樣式或動效，都需要設計師切圖作支持：比如數據容器的邊框、小的動效、頁面整體大背景、部分圖標等。切圖按正常網頁設計標準切就可以了。

標注

Web頁面用什么插件做標注這個大家都很熟悉，我就不多說了。需要注意的是，如果大屏頁面需要在不同比例的終端展示，那么此時的標注與開發可以使用rem作為基本單位來實現，這樣實現的大屏頁面在后期會有更好的擴展性與適應性。

10、整體細節調優與測試

這部分是指頁面開發完成后，將真實頁面投放到大屏進行的測試與優化。這里主要有兩部分工作。

視覺方面的測試（有點像APP的UI走查）：關鍵視覺元素、字體字號、頁面動效、圖形圖表等是否按預期顯示、有無變形、錯位等情況。

性能與數據方面的測試：圖形圖表動畫是否流暢、數據加載、刷新有無異常；頁面長時間展示是否存在奔潰、卡死等情況；后臺控制系統能否正常切換前端頁面顯示。

四、大屏設計的注意事項

1、字體使用

字體優先使用系統默認字體，需要嵌入字體時考慮字體的可識別性、與當前設計風格是否融合、是否可免費商用。

如果頁面是云端部署，需要嵌入字體包時，我們可以使用FontCreator這類的軟件把那些用不到的字符從字體包中刪掉，然后重新打包上傳，減小字體包大小，可以優化頁面加載體驗，避免在替換默認字體的過程中出現頁面文字跳動等現象。（一般來講一套字體文件包含了阿拉伯文、符號、拉丁文、日文、西里爾文、希臘文、拼音、注音符號等多種字符，對于大屏這個明確的場景，我們可以刪掉其它使用不到的字符，僅保留中文、拼音和數字）

2、顏色搭配

• 1、色彩明度與飽和度差異顯著、對比鮮明， 盡量避免使用鄰近色配色

• 2、使用深色暗色背景：深色暗色背景可減少拼縫帶來的不適感。由于背景面積大，使用暗色背景還能夠減少屏幕色差對整體表現的影響；同時暗色背景更能聚焦視覺，也方便突出內容、做出一些流光、粒子等酷炫的效果，
• 3、漸變色慎重使用：大屏普遍色域有偏差，顯示偏色，因而使用漸變色需要根據大屏反饋確定是否調整，純色最佳。
• 3、頁面布局: 主次分明、條理清晰、注意留白，合理利用大屏上各小的顯示單元，并盡量避免關鍵數據被拼縫分割

五、Q&A

– 1、設計稿投到大屏上顯示效果不佳怎么辦？

大屏的分辨率、比例、使用環境、投射方式等均會對設計造成影響。理想情況下，我們應該在設計開始前，就能打開大屏系統做一些簡單測試。我們可以從網上收集不同設計師不同風格的大屏設計作品，然后投上去查看實際效果。因為大多數時候大屏都會存在色彩偏差，這時通過測試我們就能發現漸變色、鄰近色等不同類型的色彩搭配是否可以在目標大屏上良好呈現，如果不可以，那我們設計進行時就不要使用顯示效果不佳的色彩搭配。另一方面，樣圖溝通環節及時測試也很重要。

– 2、大屏設計定稿后，切圖切幾倍圖？

由于是將我們電腦屏幕投射到了大屏，大屏上的內容是運行在我們電腦瀏覽器上的頁面。所以切圖根據我們電腦的分辨率，正常切1倍圖就可以

– 3、1920*1080的設計稿，投到9000*4320的屏幕上，文字圖片會發虛么？

看情況，視大屏系統硬件規格與觀看距離來定。這塊有四個概念需要跟大家交流下。

大屏邏輯分辨率（設計稿尺寸）——顯卡輸出分辨率——視頻矩陣切換器（DVI）支持分辨率——大屏實際物理分辨率。

一般后兩個是沒問題的，大屏跟矩陣切換器是由大屏廠商提供，一般剛好配套大屏。容易問題的是顯卡輸出分辨率，我們電腦屏幕分辨率并不是最終顯卡傳遞到DVI接口的分辨率，傳遞到DVI接口的分辨率是電腦顯卡所能輸出的最大分辨率（部分電腦可設置或自定義輸出分辨率）。輸出分辨率等于DVI支持分辨率時顯示效果最佳。輸出分辨率低于DVI支持分辨率，DVI會將信號放大后傳遞到大屏，放大的過程中就有圖像信息丟失，雖然此過程中有各種算法支持去保證圖像盡可能清晰，但算法再好，跟真實圖形還是有差距的。此外，多信號源投射效果優于單個信號源投射。對于現場直播數據大屏，一般至少有兩個信號源，一個投屏，另一個也投屏但是處于備用狀態。

離大屏的距離也影響觀感，一般離得近，顆粒感明顯，距離稍遠，會顯的較為清晰

– 4、設計稿完成開發后，發現在大屏上頁面有被拉伸或者壓縮的情況，怎么補救？

一般來講，開發只需要對設計圖做還原即可。但特殊情況下，比如顯示器擴展不正確導致頁面被拉伸或壓縮，這時就需做處理：我們可以先得到被拉伸/壓縮的比例，然后對整體視圖做壓縮/拉伸處理，再由其拉伸/壓縮，這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外，了解被投電腦硬件特點，有的電腦可以通過自定義分辨率解決這部分問題。

– 5、除自行開發可視化大屏外，還可以通過哪些第三方服務來快速實現？

阿里云DataV、騰訊云圖、百度Sugar等

– 6、數據可視化的圖表樣式可以在那些地方找到參考？

圖表部分的二個庫是我們設計師可以打開瀏覽產看的，這里面所有的圖表樣式都是基于代碼實現的，可以作為我們設計圖表的參考，也可以讓開發拿代碼去用，或者在這些圖表的基礎修改

工具類的需要有一定的代碼基礎，里面同樣有豐富的圖表，所以跟開發的溝通也很重要，因為他們可能會了解多一些更新的前沿的圖表形式是我們設計師不知道的，所以彼此多溝通交流是在太重要了

總結

數據可視化是一門龐大系統的科學，本文所有討論僅針對大屏數據可視化這一特定領域，管中窺豹，如有遺漏或不足之處歡迎大家討論交流

原文地址：UX設計詩  （公眾號）

作者：UXBoy

轉載請注明：學UI網》大屏數據可視化設計指南

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

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

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

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

相信許多同學對與“FUI”并不陌生，可能一提到這個詞大家首先想到就是漫威和 DC 科幻電影中主角的操作場景，例如漫威電影中鋼鐵俠的操作界面：

圖片源自 HUDS+GUIS

由于大家長期受到科幻電影影響，一度認為 FUI 即為“科幻界面設計”，這個定義真的是正確的么？大家可以短暫思考一下，帶著疑問繼續閱讀下面對 FUI 的定義，看是否和你想的一樣。

A.定義

為了讓大家更好的理解 “FUI” 的定義，我們將 “FUI” 這個詞拆開分別進行簡單解釋。在 FUI 中：

“U”代表用戶（User）

“I”代表界面（Interface）

“F”代表虛構的（Fiction）、未來的（Future）、幻想的（Fantasy）。

簡單點來講 FUI 就是：虛構的、未來的、幻想的用戶界面。

相信讀到這里大家已經對 FUI 有了初步的認識，“科幻界面”只是 FUI 中的分支，并不能完全解釋 FUI 。對與“虛構、未來、幻想”三個詞我們再做進一步分析解構：

a.虛構的

FUI 的專業術語是“虛構用戶界面”，其中包含各種“虛構”的用戶界面，即不真實，只是大膽的設想。例如人們大膽的設想宇宙飛船的界面設計，或者可穿戴的智能設備界面。

圖片源自 Behance

b.未來的

我們再回憶我們看過的科幻電影，在電影中它通常作為故事的一部分而創建。故事可以在不同的時間段進行設定，例如將來、當前或者過去。所以我們并不將 FUI 限制在“未來”用戶界面，它的時間線是相對的。不同時代的人們對于科幻電影的理解不一樣，所以大家對于未來的定義也有所不同，例如早年的《星球大戰》系列電影和《環太平洋》系列電影都屬于科幻電影，但存在的時間線卻有所不同，其中的界面設計風格也會因有所不同。

圖片源自 HUDS+GUIS

c.幻想的

關于“幻想”的用戶界面，人們腦袋可能首先閃過一些夸張虛幻、為人聳聽的畫面。就像《神奇博士》中的神奇博士進入多瑪姆的世界當中一樣。

圖片源自百度

“幻想”這個詞經常被用來描述哪些遠離現實的事情，這些事情難以被實現。百度百科中對幻想的解釋是“虛而不實的思想；沒有道理的想象；無根據的看法或信念；以理想或愿望為依據，對還沒有實現的事物有所象?！?

關于“幻想”的用戶界面也可以包括基于現實和真實技術的用戶界面，因為人們在基于現實的基礎幻想也屬于幻想的范疇之內。例如寶馬的概念設計中，我們依然能看到現代的汽車設計的雛形，但也突破了現有的汽車設計狀態。

圖片源自 HUDS+GUIS

相信到這里大家已經對 FUI 的定義有一個較為清晰的概念，FUI 是虛構的、未來的、幻想的用戶界面設計，即進行大膽的假設虛構用戶界面，且并不受時間的限制的，遠離現實的幻想用戶界面。

2.FUI的優勢

相對于大眾接受度更好的扁平化，數據可視化設計卻對 FUI 的設計風格情有獨鐘，在筆者所接觸得到的數據可視化的設計中，無論是實際的工作項目還是一些概念稿的設計都頻繁用到 FUI 的設計風格。到底是什么原因讓市場對 FUI 接受程度如此之高呢？接下來我們從心理學、視覺、思維以及硬件幾個角度作為切入點來進行分析。

A.物以希為貴

羅馬人說：“物以希為貴?！币驗樵谄綍r生活中極為罕見，則顯得十分珍貴。例如大家平時的在玩游戲的時候，游戲中“限定”的虛擬商品總是能夠比其它虛擬商品更加吸引玩家去購買，因為“限定”預示珍貴、與眾不同，即使價格高一點，玩家也能夠接受。例如最近王者榮耀中的新年限定皮膚，因為是“限定”，所以總是不斷的勾引用戶的錢包。

圖片源自 王者榮耀

同樣 FUI 的設計風格在整個設計行業屬于一個小眾的形式，我們在日常生活中難以接觸到，畢竟我們的日常生活中不可能出現宇宙飛船或者炫酷的機架。面對當今扁平化設計的主流趨勢，FUI 的設計風格會讓用戶耳目一新，接受程度會更高一些。例如在商品的展示中，同樣是 New Balance 的鞋子，你那種形式的展示會讓顧客更加愿意買單？

B.視覺優勢

相對于當前流行的扁平化設計，FUI 可謂是在 UI 設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。

作為主流趨勢的扁平化設計，無論是 Material Design 還是 iOS 都以深入人心，人們對扁平化的設計風格習以為常，已經很難在數據可視化的設計中進行視覺創新，而 FUI 的設計風格可以說是在數據可視化的設計中極具視覺優勢。

FUI 區別于我們平時所接觸的扁平化的設計，在視覺層面我們主要以色彩和圖形兩個方面進行分析。

色彩

a.背景

在背景的處理上常以深色的背景營造來營造強烈空間感，讓用戶感覺自己處在一個三維的空間當中，例如下圖，我們能夠感受到強烈的空間感，數據儀表盤處于一個具有縱深感的三維世界當中，視覺中心的數據顯示器與背景形成了鮮明的對比。

圖片源自 HUDS+GUIS

b.配色簡潔

在顏色的選擇上，借鑒了軍事設備中的配色準則，在殘酷的戰爭中“快速、準確、直接”是最重要的，所以在軍事設備上多以單一的冷色調為主，盡量避免多種色彩的使用，這樣對于操作者而言更加簡單。所以 FUI 的配色設計大多以冷色調為主，對比色通常作為輔助色用以反饋重要信息，例如在 007系列電影中的界面都是使用對比色反饋重要信息，如下圖中的坐標信息都使用了紅色作為突出重要信息的設計手段。

圖片源自 HUDS+GUIS

當然也有大量使用同類色的情況，例如 Sid Meier 中的飛船狀態頁面，著重表示當前的飛船的狀態，這樣在發生異常的狀況下可以立馬發現。

圖片源自 HUDS+GUIS

c.對比強烈

FUI 中的配色對比強烈，首先因為背景多以深色為主，強烈的對比能夠有效的拉開頁面中的空間感，例如鋼鐵俠中的史塔克戰役中頭盔的界面。

圖片源自 HUDS+GUIS

其次強烈的對比能夠突出核心信息，更好的進行信息反饋。例如下圖，強烈的對比能讓我們一眼就能看到核心信息，以及當前的狀態反饋

圖片源自 HUDS+GUIS

圖形

FUI 的圖形裝飾元素可以說是極其豐富，形式感很強。在設計的細節當中使用大量的“異形”的圖形元素，并輔以一定的裝飾元素。例如下圖：

圖片來自于 Grey Goo

a.軍事風格

FUI 的設計大量借鑒了軍事風格，其中也大量借鑒軍事操控的平臺的界面圖形設計，這里借鑒軍事風格的原因很簡單，因為在眾多的科幻、動作的故事題材中都是以軍隊或者其他超級團隊來去對抗惡勢力或者外星人入侵者，在界面設計上自然要延續其中軍事風格。

圖片源自Behance

細節上例如戰斗機上的 HUD 瞄準界面中的圖形多次被引用到飛船的操作界面上等等。

圖片源自 HUDS+GUIS

b.機甲元素的運用

大量異形元素的機架風格源于對機甲設計的靈感，并且在細節上使用大量的裝飾元素。

在細節上例如邊框和環形圖的設計，相對于扁平化的設計，FUI 的設計風格顯然更具視覺沖擊力。

圖片源自 HUDS+GUIS

C.突破思維限制

FUI 是一個非常有趣的 UI 設計領域，是我們在日常現實生活之中無法探索的用戶界面設計方式。在我們的日常工作中，通常普通設計師很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。

圖片源自 HUDS+GUIS

FUI 使設計師有機會去突破現有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計，我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想 AR 技術的應用，地圖可以采用全息投影技術、人與智能硬件的環境交互等等。

虛幻界面設計甚至可以是新的發明，它們可以作為一種概念的驗證，它們可以啟發我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣。虛幻用戶界面可以激勵人們為未來創造技術。

D.硬件載體

在我們之前提到影視故事中設定的使用場景多為宇宙飛船的指揮艙或者駕駛艙、可穿戴式AR設備等等，但在現實生活現在多以配備“大屏”的指揮廳為主，相對于我們平時使用的移動設備和 PC 臺式機，大屏的物理渲染尺寸更大，在比例上的差異也更大。如下圖：

由于硬件設施的變更，扁平化的設計無法滿足用戶的需求，主要原因有：扁平化設計力求干凈整潔，而在大屏中物理渲染尺寸的變大會顯得畫面格外空和呆板；其次是缺乏細節。而 FUI 的設計風格設計細節豐富，恰好可以補充其細節缺失的問題。

3.總結

數據可視化設計選擇 FUI 的設計風格有著必然的原因，首先是 FUI 的設計風格屬于一個小眾的設計風格，在這個扁平化當道的時代更容易吸引用戶的目光，接受程度高；其次是視覺沖擊力強，設計細節豐富，軍事風格和機甲風格的圖形在視覺上更加新穎；再者是“大屏”作為視覺載體，物理渲染尺寸比例的變更使得扁平化設計在大屏上顯得畫面不飽滿，缺乏細節，而 FUI 則恰好能夠補充這些空白；最后 FUI 可以幫助我們突破思維限制，尋求更好的解決方案。

借鑒參考：

《FUI-How-to-design-User-Interfaces-for-Film-and-Games》

圖片來源：

https://www.hudsandguis.com

https://scifiinterfaces.com

原文地址：海鹽社（公眾號）

作者： 姜正

轉載請注明：學UI網》數據可視化為什么偏愛FUI

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

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

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

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

原則

數據可視化是一種用圖形形式來描述密集和復雜信息的通訊方式。由此產生的視覺視覺效果使得數據比較和用數據講來故事都變得更加容易——這兩種方法都有助于用戶做出決策。

數據可視化可以表示不同類型和大小的數據：從少量數據點到大型多元數據集都可以表示。

類型

數據可視化可以用不同的形式來傳達。圖表是一種常用的數據傳達方法，因為它們不僅描述了不同的數據類型，還能進行數據比較。

圖表類型的使用主要取決于兩個方面：想要傳達的數據，以及想要傳達的數據有關的內容。以下指南提供并描述了各種不同類型的圖表及其用例。

圖表類型

隨時間變化

隨時間變化的圖表顯示一段時間內的數據，如多個類別的變化趨勢及其對比。

使用情況包括：

1. 股票價格表現
2. 健康統計
3. 年度報表

隨時間變化的圖表包括

1. 折線圖
2. 柱狀圖
3. 堆積柱狀圖
4. 燭臺圖
5. 面積圖
6. 時間軸
7. 地平線圖
8. 瀑布流圖

類別比較

類別比較圖比較多個不同類別之間的數據。

使用情況包括：

1. 不同國家間的收入對比
2. 熱門場次對比
3. 團隊分配

類別比較圖包括：

1. 柱狀圖
2. 分組柱狀圖
3. 氣泡圖
4. 平行線圖
5. 多條折線圖
6. 子彈圖

排序

排序圖表示一個項目在有序列表中的位置。

使用情況包括：

1. 選舉結果
2. 表現統計

排序圖包括：

1. 排序條形圖
2. 排序柱狀圖
3. 平行線圖

部分-整體

部分-整體圖表示部分元素是如何加總為整體的。

使用情況包括：

1. 產品類別綜合收益
2. 預算

部分-整體圖包括：

1. 堆積柱狀圖
2. 餅狀圖
3. 堆積面積圖
4. 矩陣樹圖
5. 太陽輻射圖

相關

相關圖展示兩個或多個變量之間的相關性。

使用情況包括：

1. 收入和預期壽命

相關圖包括：

1. 散點圖
2. 氣泡圖
3. 柱狀和折線圖
4. 熱力圖

分布

分布圖展示每個值在數據集中出現的頻率。

使用情況有：

1. 人口分布
2. 收入分布

分布圖包括：

1. 直方圖
2. 線箱圖
3. 小提琴圖
4. 密度圖

流

流圖顯示數據在多種狀態之間的流動。

使用情況包括：

1. 資金轉移
2. 投票統計和選舉結果

流圖包括：

1. 桑基圖
2. 甘特圖
3. 和弦圖
4. 網狀圖

關系

關系圖顯示多個項目之間是如何彼此關聯的。

使用情況有：

1. 社交網絡
2. 文字圖

關系圖包括：

1. 網狀圖
2. 維恩圖（或譯Venn圖、文氏圖、韋恩圖、范氏圖）
3. 和弦圖
4. 太陽輻射圖

選擇圖表

許多類型的圖表都可以用于描述數據。下面的指導方針提供了如何選擇圖表的見解。

顯示隨時間產生的變化

隨時間產生的變化可以用時間序列圖來表示，這是一種按照時間順序來表示數據點的圖表。

可以表示隨時間變化的圖表包括：折線圖、條形圖和面積圖。

*基線值是指y軸上的起始值。

條形圖和餅狀圖

條形圖和餅狀圖都可以用于顯示比例，表示部分值與整體值之間的比較。

1. 條形圖使用一條共同的基線，通過條柱的長度表達數量
2. 餅狀圖使用圓內的圓弧或圓角表示整體的一部分

條形圖、折線圖和堆積面積圖比餅狀圖更能夠表達隨時間產生的變化。因為這三種類型的圖表中，可能的值共享同一條基線，所以比基于條柱長度的條形圖更容易比較值之間的差異。

面積圖

面積圖有多種類型，包括堆積面積圖和重疊面積圖：

1. 堆積面積圖表示（在同一時間段內）多個時間序列堆積在一起
2. 重疊面積圖表示（在同一時間段內）多個時間序列重疊在一起

重疊面積圖中不建議包含兩個以上的時間序列，以免模糊數據。相反，可以使用堆積面積圖在一個時間間隔內比較多個值（橫軸表示時間）。

樣式

數據可視化使用自定義的樣式和形狀，以適應用戶需求和上下文的方式使得數據一目了然。

下列有益于圖表自定義：

1. 圖形元素
2. 排版
3. 圖標
4. 軸和標簽
5. 說明和注釋

設置不同類型數據的樣式

視覺編碼是將數據轉換成視覺形式的過程。獨特的圖形屬性可以應用于定量數據（如溫度，價格或速度）和定性數據（如類別，風味和表達式）。

這些圖形屬性包括：

1. 形狀
2. 顏色
3. 尺寸
4. 面積
5. 體積（容積/量）
6. 長度
7. 角度
8. 位置
9. 方向
10. 密度

表達不同屬性

多種視覺處理方式可以應用于數據點的多個方面。例如，條柱的色彩可以表示一個類別，與此同時條柱的長度可以表示一個值（如人口大小）。

形狀可以用來表示定性數據。在該圖表中，每個類別由一種特定形狀代替（圓形，方形和三角形），這使得比較特定范圍內的數據或與其他類別數據進行比較都很容易。

形狀

圖表可以通過形狀來以多種不同的方式表達數據。形狀可以被設計為一條有趣的曲線，或一個精確的高保真圖形，以及介于二者之間的其他方式。

形狀的精確程度

圖表可以以不同的精度來表示數據。用于深入研究的數據應該（根據觸摸目標的尺寸和相關可視化要求）使用適合交互的形狀來表示。而用于表達大致想法或趨勢的數據可以使用細節較少的形狀。

顏色

顏色有四種主要的區分數據的方式：

1. 區分不同的類別
2. 表示數量
3. 突出特定數據
4. 表達意義

顏色區分類別

在環形圖中顏色被用于定義類別。

顏色表示數量

在地圖中顏色被用于表示數據值。

顏色突出數據

在散點圖中顏色被用于突出特殊數據。

焦點區域

當顏色被少量使用時，它可以突出焦點區域。不建議使用大量的高光顏色，因為它們會分散用戶的注意力。

顏色表示意義

無障礙

為了適應無法區別色彩差異的用戶，可以使用其他的方法來強調數據，例如高對比度著色、形狀或紋理。

將文本標簽應用于數據也有助于澄清其含義，同時消除了對說明的需要。

線條

圖表中的線條可以傳達數據的質量，例如層次結構、突出強調和對比。線條的樣式可以采用不同方式，如使用虛線或不同的不透明度。

線條可以應用于特定的元素中，包括：

1. 注釋
2. 預測元素
3. 比較工具
4. 置信區間
5. 異常

排版

文本可以用于標記不同的圖表元素，包括：

1. 圖表標題
2. 數據標簽
3. 軸標簽
4. 說明

層次結構中級別最高的文本通常是圖表標題，最低的是軸標簽和說明。

文本粗細

標題和不同的字體粗細在層次結構中可以傳達哪些內容比另一些更重要（或更不重要）。然而這種處理方式應該有節制地使用，即采用數量有限的字體樣式。

圖標

圖標可以表示圖表中不同類型的數據，以提高圖表的整體可用性。

圖標可以被用于：

1. 分類數據，以區分組或類別
2. UI控件及操作，如篩選，縮放，保存和下載
3. 狀態，例如錯誤狀態，無數據狀態，完成狀態和危險狀態

當在圖表中使用圖標時，建議使用普遍可識別的圖標，尤其是在表示操作或狀態時，例如：保存，下載，完成，錯誤和危險。

在傳達意義時圖標補充了顏色的意義。

有標記的軸

有標記的軸或多個軸能夠指示數據所展示的規模或范圍。例如，折線圖展示的是沿水平和豎直方向標記的軸的范圍內的值。

條形圖基線

條形圖應該從基線（y軸上的起始值）上的0開始。從不為0的基線開始可能會導致數據被錯誤地感知。

軸標簽

標簽的使用應該反映圖表中最重要的數據細節。軸的標簽應該根據需要，并在用戶界面中以一致的方式使用。它們的存在不應該妨礙圖表的閱讀。

文本方向

在圖表中文本標簽應該按水平方向放置，以保證其易于閱讀。

文本標簽不應該：

1. 被旋轉
2. 垂直堆疊

說明和注釋

說明和注釋描述圖表的信息。注釋應該突出顯示數據點、數據異常值和任何值得注意的內容。

1. 注釋
2. 說明

在桌面設備上，建議在圖表下方放置說明。而在移動設備中，建議將說明放置在圖表上方，以便在交互過程中保持說明可見。

標簽和說明

在簡單的圖表中，圖表元素可以被直接標記。但是，密集的圖表（或較大圖表組中的部分）可以在說明中顯示標簽。

小型顯示器

在可穿戴設備（或其他小型顯示屏）上顯示的圖表應該是桌面端或移動端圖表的簡化版。

行為

圖表為用戶提供了可以控制所展示數據的交互模式。這些模式讓用戶關注圖表中的特定值或特定范圍。

以下推薦的交互模式、樣式和效果（如觸覺反饋）可以提高用戶對圖表數據的理解：

1. 逐級展開 提供了一種清晰的途徑來揭示細節，可按需展示。
2. 直接操作允許用戶直接對UI元素進行操作，以減少屏幕上所需的操作步數，直接操作包括：縮放和平移，分頁，數據控件。
3. 改變透視圖可以使一項設計服務于不同的用戶和數據類型，例如數據控件和移動。

逐級展開

使用逐級展開的方式顯示圖表細節，能夠允許用戶根據需要查看特定的數據點。

縮放和平移

縮放和平移是圖表中流行的交互方式，它們影響用戶研究數據和探索圖表UI的密切程度。

縮放

縮放改變了UI顯示的距離。而設備類型則決定縮放的執行方式。

1. 在桌面端，通過點擊并拖動或滾動的方式實現縮放
2. 在移動端，使用雙指捏放的手勢來實現縮放

當縮放不是主要操作時，（在桌面端）可以通過單擊并拖動或（在移動端）通過雙擊來實現相同效果。

平移

平移能夠讓用戶探索超出屏幕之外的UI。應該以對顯示數據有意義的方式對其進行約束。例如，如果一張圖表的一個維度比另一個維度更重要，那么平移的方向可以僅限于更重要的維度方向上。

平移操作通常與縮放配合使用。

在移動端，通常通過手勢進行平移，例如單指滑動。

分頁

在移動端上，分頁是一種常見的模式，允許用戶通過左右滑動查看上一張或下一張圖表。

在移動端，用戶可以向右滑動查看前一天的內容。

數據控件

可以使用切換控件、選項卡和下拉列表篩選或更改數據。

當用戶調整控件時，這些控件也可以顯示度量。

切換控件、選項卡和下拉列表意味著可以篩選或更改數據。

動效

動效可以加強并鞏固數據間的關系以及用戶和數據的交互方式。動效應該有目的地（而不是裝飾性地）被使用，以表達不同狀態和空間之間的關系。

動效應該合乎邏輯，平穩且能夠快速響應，不妨礙用戶的體驗旅程。

在這一案例中，數據的動效設置在切換按天顯示和按周顯示的時候。在切換的過程中不顯示所選日期范圍之外的數據，從而降低了圖表復雜性。

此處的動效顯示了兩張不同圖表之間的聯系。

空狀態

空白的圖片和表格可以顯示一些表明在數據可用時期望發生的內容。

在適用的情況下，角色動畫能夠帶來愉悅感和激勵。

角色動畫豐富了空白圖片。

儀表盤

數據可視化可以在一系列的多個圖表中展現，這在UI中被稱為儀表盤。多個單獨的圖表有時比一個復雜的圖表能夠更好地傳達一個故事。

儀表盤設計

儀表盤的目的應反映在其布局、樣式和交互模式中。儀表盤的設計應該適應它的使用方式，無論它是一個演示工具還是一個深入研究數據的工具。

一個儀表盤應該：

1. （通過布局）優先考慮最重要的信息
2. 顯示根據層次結構（使用顏色、位置、大小和視覺權重）排序的信息焦點

應該根據數據提出的問題對信息進行優先級排序。在本案例所示的操作儀表盤中，考慮了以下的用戶問題：

1. 需要被注意的問題
2. 問題發生的時間
3. 問題發生的位置
4. 受問題影響的其他變量

分析型儀表盤

分析型儀表盤能夠讓用戶探索多個數據集并發現趨勢。通常這些儀表盤包括復雜的圖表，這些圖表能夠發現數據細節。

使用情況包括：

1. 強調隨時間變化的趨勢
2. 回答“為什么”和“如果……怎樣”的問題
3. 預測
4. 創建深入的報告

分析型儀表盤的案例有：

1. 跟蹤隨時間變化的廣告活動表現
2. 跟蹤產品在整個生命周期中的銷售和收益
3. 顯示城市人口隨時間改變的趨勢
4. 跟蹤隨時間變化的氣候數據

操作型儀表盤

操作型儀表板旨在回答一組預定義的問題。它們通常用于完成與監視相關的任務。

在大多數情況下，這種類型的儀表盤會把當前信息安排在一組簡單的圖表中。

使用情況包括：

1. 根據目標跟蹤當前進度
2. 實時跟蹤系統表現

操作型儀表盤的案例有：

1. 跟蹤呼叫中心活動，如呼叫量、等待時間、呼叫長度或呼叫類型
2. 監視云端應用程序的運行情況
3. 顯示股票市場表現
4. 監視賽車的遙測數據

演示型儀表盤

演示型儀表板提供了關于感興趣主題的詳細快照。

這些儀表板通常包括一些小圖表或記分卡，通過動態標題來解釋每個支持圖表中提供的趨勢和見解。

使用情況包括：

1. 提供關鍵績效的指標概述
2. 創建高級執行摘要

展示型儀表盤的案例有：

1. 提供投資帳戶表現的概述
2. 提供產品銷售和市場份額數據摘要

原文地址：Material Design

譯者：杜雅黎

 轉載請注明：學UI網》Material Design Data Visualization 數據可視化

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

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

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

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

Jorge Rey的化石燃料Dataviz

02. 它是如何工作的？

如果我們能看到它，我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調，但這是事實，可視化更加有效和全面。

在某種程度上，我們可以說數據Viz是講故事的一種形式，目的是幫助我們根據數據做出決策。這些數據可能包括：

• 追蹤銷售
• 識別趨勢
• 識別變化
• 監控目標
• 監測結果
• 合并數據

秘密7 –塞爾吉奧·費爾南德斯（Sergio Fernandez）提出離婚可視化的理由

03. 什么時候使用？

數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數字中。

話雖如此，Data Viz適用于：

• 年度報告
• 簡報
• 社交媒體微敘事
• 信息手冊
• 研究
• 趨勢販運
• SciViz
• 燭臺圖，用于財務分析
• 確定路線

可以看到數據可視化的常見情況是在銷售和營銷，醫療保健，科學，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統計信息圖

04. 為什么要使用它？

簡短的答案：決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說，它是確定以下情況的寶貴工具。

• 識別變量關系之間的相關性。
• 獲得有關受眾行為的市場見解。
• 確定價值與風險指標。
• 隨時間監視趨勢。
• 通過頻率檢查速率和潛力。
• 應對變化的能力。

太空垃圾-BBC科學焦點，作者：Federica Fragapane

05. 數據可視化類型

您可能已經猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

地圖

地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關的信息，并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D（靜態或動態），因此可以使用多種組合來創建Data Viz地圖。

COVID-19支出數據可視化POGO，George Railean

但是，最常見的是：

• 區域地圖：顯示國家，城市或地區的經典地圖。對于每個區域中的不同特征，它們通常以不同的顏色表示數據。
• 線圖：它們通常包含空間和時間，由于對特定場景進行了分析，因此通常是路線選擇的理想選擇，尤其是該地區的駕車或出租車路線。
• 點地圖：這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。
• 熱圖：它們根據特定屬性指示地理區域的權重。例如，熱圖可以按區域分布感染者的飽和度。

圖表

圖表以圖形，圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別，因此它們經常與圖形混淆。但是，兩者之間的差別很?。簣D形顯示數據組之間的數學關系，并且僅是表示數據的統計圖方法之一。

圖表數據可視化，作者：Madeline VanRemmen

順便說一句，讓我們談談數據可視化中最基本的圖表類型。

條狀圖

他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇，并遵循不超過三個變量的趨勢，否則，條形變得混亂且難以理解。

餅狀圖

這些熟悉的圓形圖按部分劃分數據。切片越大，部分越大。它們非常適合描述整體的各個部分，它們的總和必須始終為100％。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。

線形圖

他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。

散點圖

這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如，如果您的x軸包含有關汽車價格的信息，而y軸包含有關薪水的信息，則正向或負向關系將告訴您某人的汽車所反映的薪水。

表格

與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現，并且旨在顯示應該閱讀而不是可視化的特定數值數據時，它們是理想的選擇。

數據可視化| Aishwarya Anand Singh的養蜂與否

例如，圖表非常適合顯示特定區域內一段時間內特定疾病的數據，但是當您還需要了解具體原因（例如原因，結果，復發，治療時間和治療方法）時，最好使用表格。

06. 數據可視化與信息圖表

5個主要差異

它們并沒有什么不同，因為它們在視覺上都代表數據。通常，您搜索信息圖表并找到標題為“數據可視化”的圖像，反之亦然。但是，在許多情況下，這些標題都不會引起誤解。這是為什么？

1. 數據可視化僅由一個元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個Data Viz元素。
2. 與可能簡單或極其復雜且繁重的數據可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人，后者通常也是可以理解的。
3. 有趣的是，數據Viz不提供敘述和結論，而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如，數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”，而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。
4. 數據可視化可以在Excel中進行，也可以使用其他自動生成設計的工具，除非將其設置為演示或發布。但是，信息圖表的美學非常重要，其設計必須吸引更廣泛的受眾。
5. 在交互方面，數據可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態圖像。

Skype通過可視化.com進行可視化

07. 如何創建有效的數據可視化？

5種有用的技巧

該過程自然類似于創建信息圖表，并且圍繞了解您的數據和受眾。更準確地說，這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

1.做功課

準備工作已經完成了一半。在甚至開始可視化數據之前，必須確保您了解該數據的最后細節。

不可否認的是，了解您的數據查看對象是另一個重要部分，因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰？他們如何處理視覺數據？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報告？

您正在可視化什么樣的信息，它能反映出您的目標嗎？

最后，考慮要使用多少數據并加以考慮。

圖片來自Brodie Vissers

2.選擇正確的圖表類型

在上一節中，我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。

• 圖表中將有多少個變量？
• 您將為每個變量放置幾項？
• 值之間的關系是什么（時間段，比較，分布等）

話雖如此，如果您需要展示整個項目的各個部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產品的市場份額的百分比。但是，餅圖不適用于時間范圍內的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點圖，s和折線圖更為有效。

另一個示例是如何在圖表中使用時間。使用水平軸會更準確，因為時間應該從左到右。它在視覺上更直觀。

Oberhaeuser的MagnaGlobal廣告市場海報

3.對數據進行排序

首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時，您必須處理大量數據，這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫，將您的信息分成兩個或多個圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

提示：使用條形圖和柱形圖進行比較時，請按值（而不是字母順序）以升序或降序對信息進行排序。

圖片由薩曼莎·赫爾利（Samantha Hurley）

4.利用顏色發揮自己的優勢

在每種可視化形式中，顏色都是您最好的朋友和最強大的工具。它們產生對比，重音，強調并直觀地引導眼睛。即使在這里，色彩理論也很重要。

設計圖表時，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負，并且難以為觀眾閱讀。但是，您可以使用顏色強度來發揮自己的優勢。例如，當您在不同的時間段內比較同一概念時，可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

選擇顏色時要考慮的事項：

• 不同類別的顏色不同。
• 系列中所有圖表的采用一致調色板，方便以后將進行比較。
• 最好使用對色盲友好的調色板。

Jamie Kettle可視化塑料廢物污染數據

5.獲取靈感

當您想成為數據可視化設計中的佼佼者時，請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實現的每種數據。

下圖這個Twitter帳戶數據可視化是一個很好的例子。同時，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數據創建視覺效果。

lilit Hayrapetyan創作的大數據紀錄片的人臉

8個數據可視化示例

作為另一種藝術形式，Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土，這些圖表證明了數據也可以是美麗的。現在，讓我們來看看一些例子。

1.黑暗之魂III體驗數據

我們從孟小偉的個人項目開始，介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大，但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作，并且在信息圖表中看起來很棒。

我的黑暗之魂3孟小偉在播放數據

2.有史以來最偉大的電影

凱蒂·西爾弗（Katie Silver）根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影?？梢暬@示了每部電影的關鍵數據點，例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

凱蒂·西爾弗（Katie Silver）的100部最佳電影數據可視化

3.最暴力的城市

費德里卡·弗拉加帕內（Federica Fragapane）顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列，并根據兇殺率在水平軸上排序。

4.家族企業作為數據

這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖，其中包含行業細分以及對就業貢獻的散點圖。

視角雜志–家族企業by Valerio Pellegrini

5.太陽系的軌道圖

該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置，并按小行星的類型進行了著色。

埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖

6.標題的語義

KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

標題語義學KatjaFlükiger

7.月球和地震

該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh）

8. Nanosats的黎明

可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini）

最后的話

數據可視化不僅是一種科學形式，而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據，并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數據和受眾有關。這樣，您就可以選擇正確的圖表類型，并使用可視化技術來發揮自己的優勢。

展示一：

展示二：

展示三：

展示四：

展示五：

根據用戶使用場景和特殊情況出現時，產品會結合變化呈現不同的功能或者服務，這種差異化的設計更能體現情感化設計的一面，提高用戶對于產品的認可度。

騰訊新聞 APP 在東航事故出現時，在底部操作欄新增了祈禱的圖標，方便用戶表達祈禱的心情。特殊情況下的差異化設計滿足了用戶的情感需求，也體現出了產品的溫度，帶給用戶更強的粘性。

二、優化指引路徑提高操作效率

通過提取本機號碼一鍵登錄減少了繁瑣的注冊流程，提高了登錄的效率，減少用戶的操作路徑。在登錄時都需要用戶同意一些條款協議等內容，當用戶未勾選時通常都是提示用戶，指引用戶選擇后操作。這樣的設計增加了用戶的操作路徑，使用體驗不是很好。

網易云音樂 APP 在同樣問題出現時，提供了一個彈窗進行指引，用戶無需重復操作，直接點擊“同意并繼續”即可完成登錄。在用戶誤操作出現時，無需用戶過多的操作路徑，給出了更高效的操作解決方案，提高了用戶使用體驗。

三、溫馨提示降低用戶的過度依賴

隨著互聯網時代的到來，太多的娛樂產品占據了我們的時間，過度依賴和使用耗費了大量時間。特別是短視頻的走熱，刷視頻容易帶來過度依賴，影響用戶的視力等健康問題。

抖音 APP 作為用戶量龐大的短視頻產品，提高用戶體驗至關重要。為了降低用戶的過度依賴，提示用戶注意休息，特意設計了溫馨提示。用戶可以設置提示時間和進行管理，APP 也會定期提示用戶。溫馨的設計提高了用戶對產品的好感度，也能輔助用戶做好時間管理，以免過度依賴而影響休息時間。

四、隱藏式設計提高版面利用率

對于用戶來說希望內容具有較高的可見性，提高內容的曝光度才能被關注。在控制內容的優先級時，通過隱藏式設計可以滿足更多內容的呈現，不過需要做好隱藏內容的引導，提高隱藏內容被發現的概率。

網易云音樂 APP 在云貝中心簽到設計中使用了隱藏式設計，將簽到相關的附屬內容隱藏在展開卡片中，為更多主要內容提供了展示空間。為了提高展開的交互設計，在每天初次訪問時會默認展開，然后再收起隱藏，這個動態的指引提高了這個交互動作的曝光度。利用隱藏式設計滿足了產品需求，通過動作引導提高了用戶知曉度，是一個具備較好體驗的設計解決方案。

五、更人性化的模式設計

隨著用戶群體的跨度增加，為了帶給不同年齡段用戶更好的體驗，眾多產品都針對不同用戶提供了定制化模式。特別是針對老年用戶而進行適老化設計，還有針對青少年兒童設計的時間管理等，不同模式滿足了更多不同年齡段的用戶需求。

比如優酷 APP 在個人中心設計了“模式切換”，點擊可以設置長輩模式、青少年守護、兒童守護。針對不同年齡段對于產品的使用需求進行定制化，帶給用戶更加人性化的使用體驗。

六、定制化的播放頁模式設計

不同用戶對于產品的使用需求有所差異，固定的模式雖然可以減少產品的開發成本，但是單一的體驗不夠人性化。針對不同用戶提供更多選擇，可以帶給用戶更加人性化的體驗。

MOO 音樂 APP 為了滿足不同用戶對于播放頁的體驗差異，設計了播放頁模式定制化切換，用戶可以選擇以專輯封面或者背景大圖進行展示。為了直觀的方便用戶做出選擇，模式設計以可視化的圖形展示，便于用戶更快的做出選擇。定制化的模式雖然把繁瑣的事情留給了產品開發者，卻把更好的體驗帶給了用戶。

七、縮放預覽滿足對細節的體驗

隨著短視頻走進更多用戶的視野中，短視頻的形式也是越來越豐富，滿足不同用戶的使用體驗至關重要。特別是圖片形式引入短視頻平臺，對于細節的體驗因人而異，縮放畫面滿足對于細節的體驗才能更加人性化。

抖音 APP 無論是針對視頻還是圖片形式作品都可以縮放預覽，配合縮放的手勢交互帶給用戶放大細節查看的體驗，滿足了不同用戶對于細節的需求。手勢交互也是產品設計師需要多多探索的方向，更加便捷的操作有助于提升用戶對于產品的使用體驗。

八、滿足用戶好奇心的設計

用戶從小白到依賴是一個逐步探索的過程，好奇心的用戶會點擊嘗試任何的功能，甚至連一個圖標或者 LOGO 都希望獲得彩蛋。作為設計師來說設計出來的每一個元素都需要考慮用戶體驗，給予反饋式的設計才能滿足好奇心的驅使。

愛奇藝 APP 首頁左上角的 LOGO 展示你有注意到嗎？有沒有嘗試去點擊體驗，作為好奇心驅使特意嘗試了一下。點擊之后會跳轉到皮膚等設置的頁面，為該功能的曝光新增了首頁入口，用戶也可以通過個人中心“裝扮”進行設置。該設計解決方案不僅滿足了用戶點擊的好奇心，也賦予了 LOGO 展示功能化的作用。

九、可以標記和疊加的點贊設計

點贊設計在眾多產品中均有體現，這是用戶表達對于內容的喜歡，以此來增加作者和用戶之間的互動性。為了吸引用戶點擊和帶來差異化的體驗，點贊設計也被腦洞大開，在表情化、疊加點贊、點贊標記、微動效等方向不斷探索。

小宇宙 APP 在播放頁中對音頻進行點贊時，可以多次疊加點贊，點擊之后會針對音頻播放進度條進行點贊標記，反復點擊也會使得進度條紋增高，以此來強化點贊的程度。該設計解決方案不僅豐富了點贊的設計，也能通過標記和進度條紋的高度讓用戶記住關鍵的部分，方便后續回顧的時候知道哪些時間段是重要內容，提高用戶對于產品的使用體驗。

十、差異化的短視頻推薦設計

作為新聞資訊類產品來說，大部分用戶的習慣還是圖文結合的閱讀形式，不過隨著短視頻的出現，改變了一部分用戶的閱讀習慣。通過短視頻獲取新聞資訊、搜索指定內容、學習生活技巧或者專業技巧等均可實現，改變了用戶的閱讀習慣和獲取內容的形式。

央視新聞 APP 作為新聞資訊類的專業平臺，在滿足用戶閱讀新聞的同時，也跟進了短視頻觀看新聞的體驗。在底部標簽欄以舵式導航的形式作為短視頻新聞入口，點擊之后會有推薦視頻展示，差異化的推薦設計不僅提高了內容的曝光度，也吸引了用戶的關注度。

小結

本期為大家總結了提高用戶體驗的十個優秀設計解決方案，體驗、分析、總結是為了掌握別人的設計經驗，積累設計靈感并運用到項目設計中。靈感的積累離不開總結，探索細微之處的差異化對于 UX 設計師而言至關重要。

本期分享到此結束，僅為個人角度的體驗總結，希望可以帶給大家更多靈感啟發。

1、菲茨定律

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

現實中的應用

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

設計應用

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

2、希克定律

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

現實中的應用

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

設計應用

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

3、共域定律

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

現實中的應用

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

設計應用

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

4、雅各布定律

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

現實中的應用

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

設計應用

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

5、系列位置效應

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

現實中的應用

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

設計應用

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

6、馮·雷斯托夫效應

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

現實中的應用

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

設計應用

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

7、審美可用性效應

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

現實中的應用

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

設計應用

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

8、峰終定律

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

現實中的應用

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

設計應用

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

參考：uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

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

作者：Clippp

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

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

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

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

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

1. 3D設計風格

雖然 3D化 的視覺風格早已到來，但是在B端市場上，3D風格在此之前依舊表現的十分克制。

隨著 C4D、Blender 這些 3D 建模軟件的不斷普及，再加上互聯網上關于 3D 建模教程的增多，你會發現 3D 風格的視覺表現，是一個 B端視覺設計師 的基本要求。

而3D風格用在B端軟件當中，會有兩個使用場景：

圖標

因為在B端產品當中，圖標本身就是非常難以去表現，比如“物聯網，大數據”。

許多的抽象詞匯，很難通過一個具象的事物進行表達，而在企業官網當中，在視覺表現上的要求又十分的高。因此你會發現，在視覺風格上的選擇，往往只有 3D 圖標 + 插畫 這一條路。

并且 3D 圖標的使用場景不會太過于局限，也可以用于產品的工作臺、運營營銷工具箱 等頁面，因此 3D 圖標的出現，它的應用場景也會相比之前 要更加的廣闊。

可視化大屏

大屏設計 也在不斷的“內卷”，因為傳統的 2D 可視化大屏 所搭建出來的大屏已經滿足不了企業的野心， 像DataV 騰訊云圖 ，大家都在朝著 3D風格 炫酷的方向進行延展，因此也就會導致 3D 的視覺風格需求 激增，而 3D 建模仿佛就是大勢所趨。

2.新擬態

雖然新擬態是在前兩年的產物。這個設計風格背后，遭到了很多設計師的質疑與排擠。

但是隨著這個風格的不斷成熟，感覺它在B端視覺領域（特指的是 官網 ），是非常受到歡迎的，因為整體的風格，與官網的設計形式趨同。

同時作為B端產品的官網，其實是更需要新擬態這種風格。因為電腦場景下鼠標光標對頁面進行 Hover 操作 給出的真實反饋，而使用了新擬態的官網按鈕，給你的反饋非常真實。

這里安利一下騰訊云的首頁官網，大家就會發現在設計風格上，大量的采取了新擬態元素，并且配合 3D 風格的圖標，以及毛玻璃材質的設計，讓它的設計瞬間加分不少。

3.開源的設計系統

在去年，設計系統迎來了一波發展的高峰期，隨著字節、騰訊，三大設計系統（Arco Design、TDesign、Semi Design）的開源，其實是給我們很多B端設計初學者，有了更加完整仔細的B端入門教程。

比如 Arco Design 的組件用法 https://arco.design/docs/spec/link

就清晰的講清楚了每一個組件的使用方式，以及注意事項，仔細閱讀這里面的內容，其實就是B端設計的入門學習。

而未來，國內的環境，開源的系統也會越來越多，大家可以針對這幾大類不同的設計系統，進行對比，或許會有一番收獲。

產品趨勢

超級app

這里的 超級app 可能和大家潛意識里的 支付寶、微信 這些軟件不太一樣。

在B端行業，隨著疫情的不斷擴散、再加上了兩年時間的發展，很多B端產品的功能架構都出現了一個現象，產品的功能開始變得非常擁擠。因為B端軟件的核心價值其實就是靠著一個又一個功能去累積，也就意味著隨著B端產品的發展，功能模塊在不斷的累積，導致在設計層面，這樣的現象變得更加嚴峻。

你會發現左側的導航菜單已經完全沒有辦法裝下這些導航內容，而這一現象也反映在很多產品當中，比如我了解的 飛書管理后臺、薪人薪事 等等諸多B端產品，它們在整個導航內容上，已經增加到一級導航 15+  、二級導航 40+ ，這無疑會開始對設計師的能力造成巨大考驗。

面對這一情況，許多導航菜單都將會迎來前所未有的挑戰，最近也在深入研究導航菜單過多時的解決辦法，發現了一些新的 導航菜單 設計方法，有機會咱們重新梳理一下 導航菜單 的內容，將B端設計指南 文章進行更新。

低代碼定制化

低代碼一直是我關注的一個領域，先給不明白低代碼的同學簡單科普一下。

低代碼，一種快速開發應用的軟件，將通用、可重復利用的代碼形成組件化的模塊，通過圖形化的界面來拖拽組件并形成應用。低代碼能夠實現只寫少量代碼或不寫代碼，類似用“樂高積木”的方式來開發。

在國外有很多著名的低代碼成功案例。Outsystems（國外非常出名的低代碼平臺）幫助施耐德電氣在20個月內推出了60款應用程序，開發過程加速了兩倍，僅在第一年就節省了650人天的工作量；在2012年即將推出Model S之際，特斯拉放棄了SAP的ERP產品（可以思考一下為什么），改用低代碼開發平臺Mendix，用25個人四個月時間自建ERP系統。

去年，低代碼平臺，也有很多新產品面世，其中就包含：

因此你會發現，其實低代碼就是在解決一件事，圍繞著某一個業務場景，通過平臺的持續完善優化。

讓所有的功能都能圍繞這個業務展開，其中包括：權限、時間軸、流程、表單、公式等等，能夠解決很多特殊的業務場景。

而低代碼會涉及到設計思路上的轉變，以及低代碼編輯器的出現，如何去設計如此復雜的配置流程，如何能夠讓用戶能夠快速上手，如果你能夠有比較完整的思路，這些都會成為我們設計的新機會。

行業細分

隨著互聯網市場的不斷發展，用戶會越來越關注產品在自己行業的應用，比如CRM，其實只是一個籠統的稱呼，現在CRM市場又會分為 SCRM、運營CRM，等諸多產品。

PaaS類的平臺也出現了 負責從虛擬主機和數據庫層面入手的 iPaaS 以及 從應用和數據層面入手的 aPaaS。

即使是大家經常使用的 釘釘、企微、飛書，它們也在各自的領域有所擅長。

因為B端產品，在底層邏輯上是不能允許趨同的產品出現，如果你和別人的產品一樣，其實是沒有辦法在目前的市場上立足。

因此你會發現，雖然產品形式都會比較相同，但是B端市場十分廣闊，大家都在去尋找自己產品的差異化。

當然市場是瞬息萬變的，這里也只是簡單聊聊我自己的看法，希望對你有所幫助。最近拖更確實比較厲害，準備之后幾天給大家抽些書，可以多留意留意公眾號的文章。

原文鏈接：CE青年（公眾號）

作者：CE青年

轉載請注明：學UI網》2022年，B端設計的趨勢有哪些？

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

 

 

 

 

 

 

 

 

 

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

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

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

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