可能是目前大屏數據可視化設計介紹最詳盡的一篇文章了，可以當做設計手冊使用的一篇經驗分享

一、基礎概念

1、什么是數據可視化

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

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

數據可視化作品《launchit》

作者：Shane Mielke 

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

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

作者：TripHappy

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

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

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

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

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

數據分析類

圖片來源：必應；圖片作者：帆軟軟件有限公司

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

設計服務需求

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

先總覽后細節

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

三、大屏可視化設計流程

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

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

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

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

2、確立指標分析維度

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

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

聯系：數據之間的相關性

分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律

比較：數據之間存在何種差異、差異主要體現在哪些方面

構成：指標里的數據都由哪幾部分組成、每部分占比如何

當然，上圖例舉的示例圖表都比較傳統，在大屏數據可視化中常還有另一類地理信息（常以2/3D地圖、地球呈現）出現。上圖雖未包含這類圖形，但它提供給我們的確定數據分析維度的思路和方法是相通的，可借鑒。

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、數據可視化的圖表樣式可以在那些地方找到參考？

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

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

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

轉自UI中國-BYMD

掌握好常用的設計理論與心理學知識，能幫助我們對用戶的人性特征的拿捏，幫助我們較大的影響用戶底層決策，以產品實現業務目標。

一、尼爾森10大可用性原則

1、狀態可見原則

不局限于：用戶的當前狀態、知道當前任務要做什么、任務進度等。

2、環境貼切原則

設計要復合目標用戶的認知，符合用戶的心智模型，于是熟悉的事物越容易被用戶所接受。

3、撤銷重做原則

操作前可預知，操作中有反饋、操作后可撤銷。

4、一致性原則

不局限于：業內產品的一致性、產品內的一致性、版本迭代間的一致性

5、防錯原則

錯誤行動發生前，引導用戶向正確的方向前進；用戶觸碰到危險操作時給予提示；危險操作發生之后，提供撤回的入口。

6、易取原則

通過使用對象、動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔。

記住用戶的操作記錄、一個流程對應一個操作目標、提供適量的信息、選擇而不是輸入。

7、靈活原則

好的產品需要同時兼顧新用戶和資深用戶的需求。對新用戶來說，需要功能明確、清晰，對于老用戶需要快捷使用高頻功能。不可迎合某一種用戶，把不必要的信息占據重要部分。

8、易掃（讀）原則

不要包含不相關或低頻次的信息/操作。頁面中的每個額外信息都會降低主要內容的相對可見性。

產品設計的四大基本原則：親密性、對齊、重復、對比。

9、容錯原則

錯誤信息應該用通俗易懂的語言表達，較準確地指出問題，并且提出解決方案。避免通過代碼等用戶難以理解的形式

即：提供解決方案、幫助用戶從錯誤中恢復

10、人性化幫助

如果系統能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索，且專注于用戶的目標任務，并列出具體的步驟來告知用戶。

二、費茨定律

翻譯成人話就是：

1. 按鈕做大點（W大點）更易于點擊

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

3. 相關按鈕之間距離近點（D小點）更易于點擊

4. 屏幕的四角與四邊是「無限可選中」位置（非移動端）

5. 通過費茨定律的反向使用，可以降低按鈕被點擊的可能

三、米勒定律

米勒定律預測人的工作記憶能夠記住的項為7(±2)個。1956年認知心理學家喬治·米勒發表了一篇論文，他討論了短期記憶和記憶跨度的極限。

不要亂用 “神奇的7” 為設計進行不必要的限制；

將內容整理為較小的單元，以便用戶輕松地處理、理解和記憶。

比如電話號碼的顯示方式、銀行卡的顯示方式等

四、接近法則

觀察者看到彼此鄰近（空間或時間）的物體時，會將它們視為一個整體。

在界面設計中，對信息的組織已經離不開這個法則了，他在界面中所體現的就是把相關的信息塊組合在一起，不太相關的分離開，增強與區分元素之間的關聯性，所強調的是空間和位置。

接近法則產生于群組，它可以減少信息設計的復雜性，對引導用戶的視覺流、便于用戶對界面的解讀起到至關重要的作用。

五、席克定律

?？硕墒且环N心理物理學定律。用戶所面臨的選擇數量越多，做出選擇所花費的時間就越長，在人機交互的界面中選項越多，意味著用戶做出決策的時間越長。

六、泰斯勒定律（復雜性守恒定律）

泰斯勒定律又稱復雜性守恒定律，該定律認為每一個過程都有其固有的復雜性，這個復雜性存在一個臨界點，超過了這個點就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。

七、奧卡姆剃刀原理

奧卡姆剃刀原理的核心思想為：“切勿浪費較多東西去做用較少東西同樣可以做好的事——如無必要，勿增實體，即簡單有效原理”。

八、防錯原則

操作前有提示，操作中有反饋、操作后可撤銷。

九、損失厭惡

損失厭惡是指人們面對同樣數量的收益和損失時，認為損失更加令他們難以忍受。同量的損失帶來的負效用為同量收益的正效用的2.5倍。損失厭惡反映了人們的風險偏好并不是一致的，當涉及的是收益時，人們表現為風險厭惡；當涉及的是損失時，人們則表現為風險尋求。

十、安慰劑效應

“安慰劑效應”指的是，對于某種無效的療法或干預手段，僅僅是“相信它有效”，就能改善健康，并能改變認知

十一、多爾蒂門檻

研究結果表明，計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間（這個時間被稱為用戶響應時間），換句話說，計算機相應的時間越長，用戶就要花費越多的時間來思考和決定下一步的操作。

合理的操作響應時長、方式有助于用戶保持專注和提率。

軟件操作的過度動畫時間不宜太短或太長，最常見于 400ms 左右。

如果無法避免操作中較長讀取、等待時間，那么就用其他更有趣的動畫、頁面來減少用戶的焦慮感。

十二、馬斯洛需求層次理論

馬斯洛需求層次理論是人本主義科學的理論之一，由美國心理學家亞伯拉罕?馬斯洛在1943年在《人類動機理論》論文中所提出。書中將人類需求像階梯一樣從低到高按層次分為五種，從低到高依次是：生理需求、安全需求、社交需求、尊重需求和自我實現需求。

但最終馬斯洛添加求知需求和審美需求，自此馬斯洛需求層次理論最終定型為8層。

十三、格式塔心理學

格式塔原則描述了當某些條款和條件被應用時，人類大腦如何感知視覺成分。它幫助大腦創造視覺的意象。因此，格式塔原則基于六個主要類別：

位置和位置；

接近；

對稱與秩序；

類似；

關閉；

連續性。

十四、自我參照效應

第一種是精細加工說：在記憶過程中，這些事物在頭腦中被進行了精細加工，與頭腦中的已有知識之間建立了更多的聯系，因此回憶時的提示線索更多，回憶效果更好。

第二種是組織加工說：于自我的知識是頭腦中存在的一種結構良好的組織體系，它對與自己相關的事物有更好的固著作用；同時，由于自我知識常常被激活，因此與之相關的信息也更容易被相應地激活起來，這樣回憶起來也就更容易。

第三種是雙過程說：即自我參照任務能提高記憶的機制既包括精細加工因素，也有組織作用的參與

廣告商會挖空心思的建立商品和你的關聯，告知我們如果你購買了我的商品，你就會獲得怎樣的好處。而自媒體人則在標題上盡量簡明扼要的說明，我要說的事情和你密切相關，不看就虧了。所以，稍微有深度的文章在快餐式的自媒體平臺中反而閱讀量不高，這是因為文章標題所涵蓋的內容可能只和少部分人有關。

十五、上癮模型

1、觸發：提醒人們采取下一步行動

觸發分為外部觸發與內部觸發

外部觸發又分為：

付費型觸發、回饋型觸發、人際型觸發、自主型觸發。

內部觸發

內部觸發通過用戶記憶存儲中的各種關聯來提醒他們采取下一步行動。

比如餓了的時候想起餓了么，想健身的時候想起keep

2、行動：人們在期待酬賞時的直接反應

福格行為模型可以用公式來呈現，即B=MAT。B代表行為，M代表動機，A代表能力，T代表觸發。要想使人們完成特定的行為，動機、能力、觸發這三樣缺一不可。 否則，人們將無法跨過“行動線”，也就是說，不會實施某種行為。

比如說中午十一點你餓了想到餓了么訂餐但是由于你的手機沒電了定不了餐，中午要吃飯是動機，訂餐想到叫餓了么外賣是觸發，能夠用手機訂餐是能力，但是因為手機沒有電 你就缺乏了相應的能力所以這個行為就沒法完成。（當然你也能用朋友的手機訂餐，這里只是舉個例子）

福格總結了簡潔性所包含的6個元素 ，即影響任務難易程度的6個要素，它們是：

• 時間——完成這項活動所需的時間。

• 金錢——從事這項活動所需的經濟投入。

• 體力——完成這項活動所需消耗的體力。

• 腦力——從事這項活動所需消耗的腦力。

• 社會偏差——他人對該項活動的接受度。

• 非常規性——按照福格的定義，“該項活動與常規活動之間的匹配程度或矛盾程度”。

四種非常規的效應刺激動機：

• 稀缺效應：（限量1000件）

• 環境效應：（同一款啤酒在便利店和高檔就把價格不一，但人們愿意為價格買單）

• 錨定效應：（瑞幸咖啡定價24元的拿鐵對標星巴克的32元拿鐵）

• 贈券效應：（利益進度吸引用戶動機）

3、多變的酬賞：滿足用戶的需求，激發使用欲

多變性會使大腦中的伏隔核更加活躍，并且會提升神經傳遞素多巴胺的含量，促使我們對酬賞產生迫切的渴望。 研究測試表明，當賭博者贏了錢，或是異性戀男性看到美女的圖片時，大腦伏隔核中的多巴胺含量會上升。

多變的酬賞主要表現為三種形式：社交酬賞、獵物酬賞、自我酬賞。那些讓我們欲罷不能的習慣養成類產品或多或少都利用了這幾類酬賞。

社交酬賞

所謂社交酬賞，是指人們從產品中通過與他人的互動而獲取的人際獎勵。比如微信的點贊評論、站酷的推薦，用戶能夠獲得社交的認同。

獵物酬賞

獵物酬賞，是指人們從產品中獲得的具體資源或信息。

自我酬賞

所謂自我酬賞，是指人們從產品中體驗到的操控感、成就感和終結感。

4、投入：通過用戶對產品的投入，培養忠實用戶

要想讓用戶產生心理聯想并自動采取行動，首先必須讓他們對產品有所投入。

用戶對某件產品或某項服務投入的時間和精力越多，對該產品或服務就越重視。事實上，有充分證據表明，用戶投入的多寡與其熱愛某項事物的程度成正比。

1、文飾效應心理

（1）我們總是高估自己的勞動成果。

（2）我們總是盡力和過去保持行為一致。

（3）我們總是避免認知失調。

2、點滴投入

（1）儲存價值

（2）內容

（3）數據資料

（4）關注者

（5）信譽

（6）技能

3、加載下一個觸發

用戶投入的同時也可以通過加載下一個觸發的令自己重新開始上癮循環，從而增加了進入上癮循環的可能性。

十六、雅各布定律

雅各布定律（簡稱雅各布互聯網用戶體驗法則），它指出如果用戶已將大部分時間花費在某個網站上，那么他們會希望你的網站可以與那些他們已熟悉的網站一樣擁有相似的使用模式。

我們在與新事物互動的過程中，用戶使用的是以往的經驗

對設計師來說，我們可以匹配用戶的心智模型來改善體驗。因此，用戶可以輕松地將已有經驗從一種產品或體驗轉移到另一種上，無需額外了解新系統的工作原理。

當設計師與用戶的心智模型一致時，良好的用戶體驗就得以實現。

十七、KANO模型

KANO模型大家可以看看這個童鞋的總結很詳細

https://www.zcool.com.cn/article/ZMTAyMjQ3Mg==.html

十八、古藤堡表圖表法

人們在瀏覽頁面或布局時視線趨于從左上角移動到右下角

古騰堡圖表法說明我們觀看頁面的視線并不是鏡面對稱的，我們需要在設計中避免出現此類錯誤但絕不是墨守成規，將頁面的 Logo放置在左上角而主體向右下角延伸，左下和右上作為視覺的盲點可以添加輔助元素

十九、尼爾森F型視覺模型

尼爾森F型視覺模型由 Jakob Nielsen于2006年提出

他指出，我們在第一次觀看頁面時，視線會呈 F的形狀關注頁面。
1.先從頂部開始從左到右水平移動。
2.目光再下移開始從左到右觀察但是長度會相對短些。
3.以較短的長度向下掃視，形成一個 F形狀，此時我們的閱讀速度較慢，更為系統和條理性。

二十、序列效應

1.在列舉信息時，排在最前和最后的元素，比排在中間的更容易讓人記住。

2.對排在開頭的信息產生加強的回想效果，稱為：初始效應，人們有時候會把最前面的信息儲存在長期記憶中。排在結尾的信息產生加強的回想效果，稱為：時近效應。時近效應適用于聽覺刺激。初始效應適用于視覺刺激。

3.在列舉信息元素時，如果列舉信息屬于視覺性，那么把重要的信息放在最前面；如果是聽覺性，就放在最后面。如果是用戶必須做決定，并且是最后一項出現后馬上做決定，那么就將想要用戶做決定的信息放置最后，以便增加獲選概率，否則放在最前面。

4. 應用例子：比如在很多app產品設計時，個人賬戶與設置基本放在頁面的最前面和最后面，這體現著產品信息的序列關系，重要次序，所以在進行設計時，可以在信息排序上遵循序列效應。 當然還有一些產品想對用戶進行引導操作，也可以利用這個法則，將信息放置最前或最后。

轉自：站酷-YELLOW_J 

設計總是在變化。在過去一年里，我們不僅看見了五福的C4D運用，雙11的動效插畫運用，以及大量AR/VR智能的設計，還有蘋果黑暗模式的普及，新技術帶來新的體驗和解決方案。2020年，關注研究新興的用戶體驗趨勢，前段時間，在我星球里，我帶著設計師一起來研究關于2020界面設計趨勢，希望能幫助大家是設計中有所啟發。

 研究背景 

 隨著UI/UX領域人工智能的發展，和虛擬現實等新技術的變革，從前單一的內容很難滿足用戶的訴求，用戶的訴求也變得千人前面，所以在研究趨勢之前，我基于這些關鍵詞，來分析2020的設計趨勢。

 色彩趨勢 

1.彩虹漸變

這兩年來，彩色漸變一直是設計趨勢，設計師將大膽的漸變，飽和度更高的漸變運用在設計中去，讓整體的色彩感覺，更加年輕化與活躍。

▲ Apple一直是這個領域的引領者，隨著當年iPhoneX的發布，彩虹的漸變色，大膽的漸變風格瞬間成為設計師筆下的弄潮兒。

▲ 這組插畫中，作者就運用了大面積的漸變，兩種顏色的運用，通過重疊，明度變化，豐富了整個設計層次。

▲ 不僅在平面設計中，在網頁設計中，也是被大量運用，SWATCH的官網，清新的漸變配合動感的模特照片，以及和產品的完全結合，讓頁面充滿著活力。

▲ 在移動端也是如此，金融產品的背景設計，銀行卡面的設計，可視化圖表的運用，都能看出大膽漸變還是很受歡迎。

2.黑暗模式

隨著google和facebook以及instagram這些知名應用都開始提供黑暗模式，國內微信也開始黑暗模式，2020黑暗模式設計，一定是需要設計師去關注的。

黑暗模式，除了在黑暗中提高內容可讀性以外，還能減少用戶疲勞，還可以節約電池，所以黑暗模式在今年將是所有應用程序必不可少的一個功能。

▲ Google的黑暗模式運用，通過一個簡單的按鈕開關就可以切換，也可以根據系統定義切換。

▲ 黑暗模式未來會成為一種標配，一個軟件設計在剛開始的時候就必須考慮進來。

▲ 關于黑暗模式，正向當年iOS扁平化剛出來的時候，國內的很多產品都還沒有準備好，但是相信過不了多久，黑暗模式一定會普及開來，所以2020大家都應該提前去了解黑暗模式的，設計規范和細節。

3.更大膽的一種顏色

▲ 除了漸變色，那么大膽的單色在設計中運用也會越來越多，整個設計就一套色彩體系貫穿，大多時候以品牌色的形式去運用，配合留白，對比明顯的字體，整體給人印象深刻。

▲ 在韓國的應用中用的比較多，它的優勢是色彩干凈，品牌整體感強，但是對設計師駕馭頁面能力也要求很高，因為大面積的單色，如果用不好就會很刺眼。

▲ Naverpay的設計，整個界面就是用的綠色漸變，清新同時也能很好和Naver品牌色進行結合。

▲ 在它的很多頁面中，很多控件這個綠色運用的很巧妙，不會給人很刺眼的感覺，所以大膽的一種顏色運用在2020頁將是設計師值得去關注的一個方向。

▲ 掃碼加入知識星球，了解更多

 插畫趨勢  

在過去幾年里，插畫是一種新的表達方式，越來越多的設計師，插畫師通過插畫表達產品的情緒，個人的情緒主張，那么在2020插畫的運用就得和品牌很好的融合起來，如果你的插畫是和品牌割裂的，需要注意。

1.和品牌結合

▲ wibbite的插畫，標志性歐美的風格，除了插畫本身手法比較簡約模塊，插畫中運用的色彩和內容本身也很產品定位匹配。

▲ 插畫對于品牌來說也是非常重要的一個因素，無論在界面設計，還是在品牌營銷很多場景都需要插畫去營造產品氛圍和氣質，插畫有助于將我們的品牌故事講述給聽眾聽，所以在構建一個品牌時候，插畫是非常重要的點之一，但是做之前一定要盡量多去了解我們為客戶提供的設計價值，只有了解了用戶價值，才能去定義去特色的故事，幫助產品。

▲ Uber系列插畫提供暖色，以及安全藍的運用，突出打車服務中安全的關鍵要素。

▲ Google的插畫系統也是如此，沒有很華麗的炫技，有的是對于多元文化的思考，設計場景的融合貫通。

所以不難看出，插畫的方向一定是和品牌結合的，不會為了趨勢而趨勢，一定是圍繞內容去設計。

2.3D插畫

▲ 如果說這2年，各種各樣的插畫手法百花齊放，那么隨著人們的審美變化，趨勢也從靜態變成動態，從平面變成3D，從今年的支付寶五福設計中大家應該能感覺到2020的插畫設計一定是往著3D方向，而且是動態3D方向演進的。

▲ 谷歌一組插畫，結合與大腦、團隊合作、想法、密碼箱為圖形進行創意設計，人物造型可愛好玩，凸顯年輕化潮流。

▲ Apple在中國區App Store 的一組設計，整體設計以紅色為主，運用了象征中國元素的龍、紅包、燈籠、福字、紙牌作為設計元素，整體運用3D表達，凸顯年輕和趣味性。

3.等距插畫

等距插畫這兩年已經是一個主流風格之一，在未來還會接著流行，但是等距插畫未來或許和場景聯系在更緊密，在每年天貓雙11設計中，互動城的設計每年基本都是等距插畫風格，它的故事感和畫面感，都能讓人眼前一亮，所以電商的設計，在短時間內，大型活動場景基本都離不開這個風格。

▲ 這組等距插畫場景故事感很強，建立了一個空間世界，作為網站主風格非常的吸引人。

▲ 除了這種大的場景，等距插畫，在小的場景中，作為插畫規范也是運用比較多，它風格可輕可重，隨著5G時代到來，靜態可能會逐步演進成動態插畫。

4.根據內容定制的插畫

隨著內容的升級，對內容的表達也會被越來越重視，那么如何更好的把內容更生動表達出來，插畫就是很好的一個形式，根據內容定制的插畫，在很多產品中被運用到，互聯網教育，IT等領域。所以專門針對內容去設計插畫，在今年或許是一個趨勢，插畫不再是孤零零只是為了情感化而存在。

▲ Crowdrise的產品設計，整體就是運用作為整體設計語言，風格統一，內容突出，畫面效果好。

▲ 插畫的形態終于不再是孤零零的只是用戶情感的表達，而是隨著內容的升級變化，在產品中發揮的重要性也越來越大。

3.3D黏土插畫的運用

3D設計因為今年設計師很喜歡用的樣式之一，我們將盡管3D已經存在了一段時間，但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設計趨勢，我們甚至還會看到很多藝術家在電影，插畫和廣告中結合了2D和3D風格。

▲ 在instagran的一組設計中，設計師運用這種黏土和3D的方式設計，畫面充滿了生活感和溫暖。

▲ 谷歌也在它們的項目中大量運用這種黏土風格設計，會顯得更加的現代和活潑，黏土的設計相對3D插畫區別在于更加細膩，線條上更加柔和。

 字體趨勢 

這幾年越來越多的公司，開始定制字體，根據自己的品牌特質去做一些獨特的字體，從國外到國內，品牌定制字體未來或許還會越來越多，對于設計師好處來說，這些品牌字體很多都是免費開放給設計師用，會形成一個很高的商業環境。

1.定制字體

▲ 錘子發布了他們的Smartisan T黑字體。

▲ 騰訊發布了定制的“騰訊字體”，相比原來傾斜的黑體字，騰訊的新字體更現代、更協調、更動感。運用起來也非常有力量感。

▲ 阿里普惠體，隨著集團業務龐大，字體使用場景多且復雜，包括各產品客戶端、營銷設計、操作系統、硬件設備、建筑空間及公關傳播等等。決定以現代為核心設計理念，以可靠、明快為設計切入點，將阿里精神融入到字體當中。最終一款擁有現代感滿足全場景黑體誕生了，而且商用免費。

▲ 除了前面的阿里，騰訊，錘子，小米OPPO，京東也都發布了自己的專屬品牌字體，所以在2020年，品牌字體或許是每個公司的一個標配了，我們拭目以待。

▲ 國外其實是最早開始為品牌定制字體的，三星手機雖然銷量消化，但是他們品牌字體：SamsungOne，設計風格，很強的現代感，而且，這個字體有不同粗細的筆畫字重，適用面很廣。

▲ IBM的字體名稱：IBM Plex Sans Text，這款字體設計比較簡潔，干凈，沒有多余的筆畫，這個字體很良心免費商用的。

2.粗體的運用

縱觀2020的一些設計，留白越來越大，邊距越留越多，字體也變的很粗，粗的字體和正文普通字體形成了明顯的對比，再加上網格的布局，讓頁面內容更加凸顯。

▲ 大字體的運用，字體就是內容，重復運用內容元素作為排版手段，對于內容組織和平面要求較高。

▲ 在UI設計中，大字體的設計也很常見，蘋果商店，蘋果官方應用都是大字體的推崇者，隨便5G的來臨，對于內容的追求也會越來越高，那么除了大字體，視覺元素減少，內容本身質量要求也越來越高。

▲ 粗的字體常用語大標題，或者頁面導航性指引作業，幫助用戶更好去理解功能本身，上面這個頁面粗的字體就是導航，告訴用戶這一頁，你需要去完成什么動作指引。

▲ 掃碼加入知識星球，了解更多

 最后 

設計趨勢必然與技術發展緊密結合，作為設計師我們需要了解，以及平時和我們設計進行結合，下期將帶來，2020的UI設計趨勢下部分，看看還有哪些需要我們去關注的。

轉自：ui中國-skys 

我最近一直在想自己要寫什么，不如這次就來說說我最近在項目中遇到的問題吧~

再給大家看看我的解決方案，如果大家有更好的方案歡迎留言，我們一起探討啊~

最近一兩年我所涉及的項目都是有關于將網頁的功能系統改成APP，而針對的用戶就是公司的業務經理，是金融公司的業務經理們，我們的甲方爸爸！

當然這就意味著網頁的產品，會有大量的數據，而且由于網頁產品的信息處理還沒有太與時俱進，所以大量的數據都是文字和數字的組合，因此要將這些數據改成APP時，就覺得好難啊。

其實表單在APP上并不好放，最好的解決方法就是設計成圖表，而現在市面上圖標樣式不管是網頁的還是APP一搜一大把，Ant Design有專門的數據網站，如下圖所示：

什么樣的都能找到，那么我為什么會覺得好難呢？因為數據超多der~考慮的內容又有很多，難免憂愁。

一、為什么要設計圖表？

因為數據表單在手機上并不好展示，同時從用戶體驗的角度上來考慮，數據本身都是數據組成，可讀性就不太好，因此如果把這些“數字”從商業目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義（價值），圖表只是最終的表現形式。

二、圖表由哪些元素構成？

一張標準樣式的圖表基本上是如下圖所標示的幾種元素組成，如下圖所示：

當然這只是最基礎的一種圖標形式，對于別的形式就不多介紹了，大家都有基礎知識，本文將嘗試從圖表設計動機的角度和大家一起探討如何更好的進行圖表設計。

三、圖表設計？

1、明確數據指標

首先，我們得先搞明白這些數據是怎么來的、干嘛的，盡可能要求他們給到你的是盡可能精準的數據，否則會導致接下來的工作前功盡棄。就舉我前幾天的例子來說吧，產品給了我這樣一張圖，如下圖所示：

我沒有仔細的去問一些具體的信息，比如數據最多的時候會是什么樣、業務想在這個表里看到什么信息、想要解決的問題什么？這些我都沒有問！

上來就是一頓設計操作，把表單設計成了這樣，如下圖所示：

結果在走查的時候，業務很明確的指出數據信息不夠多，他們想要在頁面上將所有的數據信息都能看到，而數據最多的情況，數據表單是長這樣的，如下圖所示：

就是因為一開始在拿到表單的時候沒有仔細去分析，才會導致這種情況的發生，因此要如何改進呢？

2、明確設計目的

其實圖表設計跟產品設計的思路有點類似，一開始要先明確的就是設計目標，但這個很容易被設計師所忽略，因此前期在缺少設計目標支撐的情況下，設計師就會像一個沒有指揮的小樂手，閉著眼睛亂彈，沒有方向感。 

就像我之前設計方案被推翻，就是因為思考不明確導致的，定義設計目標的過程需要站在業務的角度和數據的角度進行綜合分析從而進行構建，一方面需要考慮業務如何更簡單的分析、理解數據從而提高決策效率；一方面又需要考慮數據本身如何更加精準、一目了然的傳達給用戶。

3、規劃設計方案

我在寫這篇文章的時候，看了很多相關的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標是用在什么地方的，對我都沒有太大幫助，因為圖表設計并不是普通的只是要好看的圖表而已。

4、解決問題

重新設計之前，我去找業務很詳細的了解了他們對于數據的需求，想要一目了然的看到所有的數據對比信息，數據在表單中要全部展示出來，數據后臺每天都會刷新，針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息，我就將圖表改成了下圖所示：

由于面對的數據信息比較多，條紋圖比較符合多數據的信息，當然這是數據最多的時候出現的情況，每家公司出現的數據是根據業務所提交的信息展現的。

在功能確定了之后，就是我們的細節問題，不是說我們在750*1624的畫布上設計好了圖表就行了，我們還要考慮到適配的問題，如下圖所示：

屏幕較窄的時候，將X軸的標簽文字打斜，保證數據正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續的數字時，可以有簡寫。

四、如何選深色底和淺色底

我們可以先來一個對比圖，同樣的數據在深色背景和淺色背景下的圖表可讀性做對比，如下圖所示：

很顯然淺色背景下的圖表閱讀效率更高，那么面對復雜數據的時候，情況是否一致呢？如下圖所示：

很顯然，深色更適合展示信息比較多的，突出重點信息的頁面，因此我們在找數據頁面參考，在選擇深色和淺色背景里猶豫的，可以參考一下。

五、劃重點

這里討論的只是我在公司項目中的其中一個圖表設計，不能說做的很多，只是分享一下自己在試錯的過程中的成長，從web端改到APP，都會說減少一些功能，讓產品更好用，但是總有不想砍功能的需求方，如何滿足這些需求，是需要我們一直都在思考的事情。

轉自：ui中國-潘團子

可視化是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，再進行交互處理的理論、方法和技術。面對醫療行業，如何將行業數據，轉化為視覺可視化中的點線面，是在這個項目中需要思考的問題。

本文將帶來設計師在醫療院感可視化項目中的設計過程及思考，講述如何在業務場景下對數據進行抽取表達。通過可視化打破傳統院感系統的表單呈現，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求。同時院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析，從而控制院感發生和預防。

本項目以浙江省建德市第一人民醫院為案例，地理數據以建德醫院坐標為準。

項目背景
院感是什么？院感為醫院感染，入院48小時內都有可能感染到院感細菌。在醫院里有專門的院感醫生職位，對醫院感染進行有效的預防與控制。而傳統院感管理的工作流：醫護人員及院感醫生 > 院感系統分析疑似病例 > 得出結論預防或治療。這種偏人工的方式數據獲取方式，無法更的獲取院感發生的原因、定位、以及未來的院感預測。

P1 因此我們通過對醫院數據的整理，抽離出影響院感的數據，將院感發生、發展、管控、治療、預測全流程進行整合。

P2 通過醫院>樓層>人員三個層面，空間和時間兩個維度對院感展示。打破傳統院感系統的表單呈現，使院感場景具備互動性、觀賞性，滿足不同角色的使用需求：如院長的展示性需求。院感醫生通過可視化的解決方案能清晰直觀的了解到院感發生分布、病例分析，從而控制院感發生和預防。

P3 同時在這樣的設計場景下，可以覆蓋的醫療業務場景和數據單位也會更多元，具有一定的商業化價值。

P4 設計流程
整個項目的設計流程可以分為4個階段：信息收集、可視化、線上搭建、效果調試。在此項目實踐中，重點投入在前三大部分。

P5 Part1信息收集
我們基于項目背景，梳理要展現的數據指標，對整體業務場景進行故事腳本的規劃（即如何展現前期的數據收集，并把其串聯在整體業務場景中），設定動作攝像機語言，同時也需要了解最終呈現的硬件設備與使用環境。

P6 Part2可視化

1.交互信息框架
首先梳理院感的信息框架和交互方式。

整個大屏分為院樓層，呈現整體院感數據的統計；樓層屏，作為重點病區的監測預測；個人屏，分析病例回溯病程，從而預測院感。三屏之間相互跳轉， 交互演示方式從醫院的外部跳轉內部結構、再到患者的個人維度，三屏都分別展示相關的數據指標。

P7 2.視覺風格
在大屏視效風格探索上，期初的目標是希望可以打造不一樣行業視覺語言，所以選擇不同于以往的設計大屏風格，選擇白色的風格，符合大家對醫護行業的認知。但到中期發現，在硬件設備上展示發是過曝的。因此對設計風格進行調整改為X光片的風格，色系上偏冷綠的感覺。這是在這個項目中的試錯經驗之一。

P8 3.建模設計
在可視化部分中遇到的難點：建筑模型的高還原。下圖為建德第一人民醫院實拍圖。在大屏項目中，必須真實還原地理位置。而在此醫院沒有清晰的CAD圖紙提供的；在Google的衛星地圖下也沒有的建筑結構的，所以我在建模的過程中，是踩了坑的，先盲畫了一版，但是精細度不夠，過于粗糙。

P9 因此我反復看得到的資料，通過在確定地理氛圍內，去豐富場景。這樣的好處是使業務場景更加豐富，包括擴展到院外的車流數據，為業務場景提供更多可能性 當然后期也搖到了建筑內部的消防圖，根據消防圖繪制內部結構。

P10 4.數據面板
對可視化組件的組件進行設計：時間篩選、數據統計、占比關系、趨勢分析。設計之前也參考了很多概念版的可視化設計，希望在院感屏上可以呈現一種科技概念的感覺。

P11 Part3線上搭建
1.獲取地理數據
這部分是非常耗時的，datav是數據驅動的可視化產品，在搭建部分，是全程依靠datav平臺的。
首先需要明確地理數據，通過高德數據通過點線成面，可以作為場景定位，也就是物理模型的經緯度數據 后面還原數據效果，造虛擬數據，是非常依賴于這個坐標數據的。
119.291724 , 29.472365
這是建德醫院的坐標，醫院在地圖上的數據是很簡化的，顆粒度很大，具體位置無法顯示。

P12 因此我們需要建立與地理數據綁定的建模，先對位置。

P13 在這個過程中我發現，如果最開始沒有對準位置，也不用緊張，可以在DATAV平臺增加hook數據過濾器，解決地理數據與世界坐標無法對齊的問題。

2.線上場景還原
根據對確定過位置模型進行烘焙還原。這個過程中遇到了一些不知名的原因烘焙失敗，原因可能是命名有中文/位置數據錯誤/模型塊面復雜等，遇到這樣的問題就需要重新從頭檢查烘焙流程每一步。

P14  3.數據維度展示還原
這一步我們需要把前期做好的數據可視化效果，還原到線上模型中。在這一步我遇到的問題是因建德醫院內部具體結構的缺失，使一些可視化效果無法精準匹配到模型上。所以設計過程中只能依賴于在對的地理位置上豐富的場景內造數據，這個過程是比較吃力的。

P15 這個問題的解決辦法是通過開發工具和導出的結構俯視圖，對位置，然后轉化出LEGO的數據

P16 在數據效果還原的過程中，也發現我在前期設計的數據效果，不能全部實現，有些是依賴于開發的 。這時可以通過其他組件效果代替嘗試，比如熱力的效果用粒子放大，通過參數調節得到熱力 再比如局部房間的掃管，通過設計部分多次烘焙模型，不斷疊加掃光層，得到房間監測的效果
P17 設計小結
綜合以上的經驗，院感可視化從設計到落地，整體結構應該是這樣從物理基礎坐標的獲取、到場景搭建、再到數據展示的過程。在這個過程中會用到DATAV、C4D、數據庫、簡單的代碼等技術來實現。

P18 這個項目雖然這只是醫療行業中一個小的業務場景，但我們的業務數據提取及可視化設計思路，他不僅限于醫療行業，同時也可以成為場館類大屏解決方案的一部分，是具有一定商業化價值的。同時在這過程中沉淀下來的人體結構模型，和一些設計經驗，是可以復用到對應行業解決方案中，達到提效。

轉自：

前言：

什么是產品的信任感？？

指：基于產品為用戶提供‘可靠服務、價值依賴’的一種情感體驗。

這種體驗不僅影響著用戶黏性的強弱、業務目標的實現，也影響著不同生命周期下給產品給來的價值。如圖：

而在產品與用戶間建立信任感的過程中，我驚奇地發現有3個因素貫穿始終：理念 > 內容 > 表現。

‘基于什么樣的理念，向用戶傳遞什么內容，并且怎么表現?！?/strong>

所以，未來3篇文章主要圍繞‘信任感的打造’，希望能系統性地認識它，挖掘更多工作上可實用的小技巧。

今天先分享第一篇：信任感的理念層

信任的本質：是讓人覺得真誠、可靠、放心等。換句話說，它就是一種‘為用戶著想，建立產品溫度’的理念/方向，從而引導后續的內容都圍繞該理念而進行。

那么，如何才能為用戶著想，慢慢建立起對產品的信任感呢？？

既然為用戶著想，那么可以試著從‘減少用戶的投入成本’切入。

Part1：減少健康投入

健康投入，指用戶使用我們的產品，可能會對身體上帶來直接或潛在的負擔/影響。比如視頻看久了，眼睛就會感到酸痛。

針對這些負擔與影響進行的一些關懷提示，可以用戶提前消除、減輕這些痛苦，拉進與用戶間的距離。

不同產品類型擁有專有的關懷點，所以比較通用的主要有5個：使用時長、使用姿勢、夜間休息、夜間護眼、音量大小。

a.使用時長提示：

除純工具類產品之外，大部分用戶在產品上都有一定的使用時長（尤其是內容消費類產品），對于‘連續使用N分鐘、或者滿足特定時長’的用戶，可針對該時長進行休息提示。

如有道精品課，在用戶觀看課程滿40分鐘 時有個時長提醒：

b.夜深關懷提示：

深夜本身是一個休息的時間，但還是有大量的‘夜貓子’根本停不下來。不管是主動性的娛樂消費，還是被動性的信息/工作處理，都將手機‘進行到底’。

此時對于‘深夜忙碌’中的用戶，夜間的關懷就是一個切入點：比如企業微信，會在深夜啟動頁上展示 ‘夜深了，xxx’的文案提示。

雖然只是簡單的一句話，但還是能感受到鵝廠對員工的關懷。

而且不管是C端還是B端，只要有用戶在深夜使用產品的可能，都可針對性地給予關懷設計，體現產品的‘人性’。

c.夜間護眼提示：

夜晚周圍的光線會變得幽暗，部分手機屏幕會自動變亮。時間一長會嚴重刺激用戶雙眼，并造成視覺疲勞（尤其是小學生群體）。

此時對用戶進行護眼提示，不失為一個用戶關懷點。

再如有道精品課：

d.使用姿勢提示：

我們日常都會將手機橫過來看視頻、看八卦。而且相信各位都有過這樣的經歷：

當手機長期處于某個屏幕狀態+重力傾向時，用戶難免會出現手酸脖痛的情況。

此時進行使用姿勢的糾正提醒，亦能起到關心用戶的效果，從而建立良好的產品印象。

還是以有道精品課為例：

e.音量提示：

這個大伙都知道，過大的音量會影響耳朵聽力。一般出現在各種音頻、視頻的產品與功能中。

Part2：減少金錢投入

沒有人不會在意自己的錢包（除非你是對錢不感興趣...），金錢上的收入與支出很大程度上會影響 人們對某事物的看法。

產品也是如此，若能幫用戶減少金錢上的支出，或者帶來真實收入。不僅能極大提升用戶對你的信任度與黏性，還能增加產品的競爭力。

比如高德地圖的打車功能，能顯示所有車型的價格預覽，幫助用戶選擇所需價格的車型。

無論是商品優惠券，還是返利。

只要能幫助用戶錢包上的‘節源’或‘開流’，都能引發用戶的信任感，從而信賴產品。

Part3：減少情感投入

情感投入，是指用戶基于內心活動和情緒感受，對某事物所表現出來的一種想法。

這種想法制約著 用戶是否接受我們的產品服務。一般體現在：安全性、性價比、真實性 3個方面。

a.安全性 - 放不放心：

人們面對某事物 可能會帶來的傷害/損失時，都會有一種本能的“警惕感”。

就拿此次疫情來說，對于有‘出差住房’訴求的用戶來說，‘住的安全’是重中之重。因此尋找一家‘無感染、每日消毒、衛生干凈’的安全酒店，可以減低用戶選擇我們的警惕感。

而在酒店列表中，帶有‘嚴格消毒’、‘健康守護’等安全標簽的酒店，會給人帶來一種安全、放心、信賴的心理效應，從而提升該酒店的轉化率。

b.性價比 - 值不值得

性價比是人們衡量‘付出成本與回報價值’間的一種決策依據，沒有誰會喜歡付出小于回報的事物。

而為了讓用戶降低這種決策依據，除了自我服務/實力的展示外，往往需要一種“參照物”來凸顯性價比。

如美團上的‘滿減神器’，通過不同的食物/價錢間的對比，讓用戶買到最具性價比的食物。

而“參照物” 的形式多種多樣，不管是競品數據。

老版本也屬于一種競品

還是是各種優惠信息、額外禮物/禮包、售后服務等等。

目的都是通過該參照物，向用戶傳遞一種‘劃算’、‘值得’的心理效應。

c.真實性 - 真不真實：

光是性價比高還只是片面依據，至于內容是否屬實，成為了我們與用戶建立信任感 中最重要的影響因素。因為沒有人喜歡被騙、喜歡虛假事物。

而真實性的建立，在‘電商領域’應該被運用得最多。如大牌背書、證書授權、專家介紹、明星代言、官方保證、銷量成績、用戶反饋...等等。

展示自己的真實、最具實力的一面即可，別過度吹噓與包裝，用戶又不傻。

Part4：減少腦力投入

人們一向不喜歡復雜的東西，除了不易理解外，更擔心因為自己的理解錯誤，會給帶來意外的損失。

幫助用戶減少記憶負荷、順暢完成操作目標，是每個產品必不可少的設計點。

如微信轉賬，輸入數字時會檢測對應的數額，減去用戶邊輸入 邊計算“這是多少錢”的腦力投入。

而且對比支付寶的轉賬，微信這點確實做到了‘洞察用戶需求’。

再如賬號注冊，提供‘剩余步驟’能讓用戶了解 當前處于哪一步、預測完成整個操作還需多久。

Part5：減少體力投入

除了記憶負荷，‘操作負荷’的減少也是一種‘為用戶著想‘的方式。我們身邊也存在太多這方面的例子：

如手機上，如淘寶的快鏈彈窗、支付寶的轉賬提示，都是前置用戶的目標，縮短操作流程。

如電腦上，如Mac會保存耳機音量。

下次插入耳機時，會將揚聲時的音量，自動調整至上次耳機插入時 所記錄的音量。這樣就免去了重新調整音量的操作。

以網易云音樂為例：注意 揚聲時和耳機插入后 的音量變化.

這些都是幫助用戶快速使用，從而減少體力操作的方式。除了前置用戶目標、保存記錄 外，常見的還有：給予默認值、自動選擇/處理、多選與批量等等。

總結：

以上就是關于理念篇的內容，讓今后的內容設計有了明確的方向。下面是走查表，平時設計功能、制作界面的時候可以看看，增加產品的溫度。領取方式：公眾號回復【信任1】

轉自：ui中國-