2020 年，新冠疫情席卷全球，后疫情時代的需求也促使設計師們不斷提出更有意義的醫療解決方案。作者梳理了醫療保健類 APP 的類型，從產品的研究、功能特性、導航、顏色等角度提出了針對醫療保健 APP 的一系列設計建議，簡單直觀的界面、便捷的功能，以及積極的情感，才能使用戶接受并喜歡原本 “令人生畏” 的醫療產品。
△ Justas Galaburda 繪制的插畫
在移動應用市場中，的應用類別是 “游戲”，而 “健康與健身” 類勉強躋身前十名。2020 年是十分艱難的一年，但也創造了很多機會，例如，移動應用市場中醫療行業的產品大熱，受到多方關注，這類產品直接影響人們的健康行為，可以使人們的生活更加輕松愉快。
為此，大批創業人士開始關注醫療這一領域。首先，你需要制作一個功能強大的 APP，因為如果一款產品不能交付使用的話，它就一文不值。但是，這種功能必須通過設計能力來呈現。一個好的醫療保健 APP 設計，應突出其最重要的細節，引導用戶進行操作，并提出下一步建議，從而產生必要的行動。APP 本身可以成為有效的潛在客戶開發工具和公司的主要產品。對于一個健康或醫學相關的產品來說，用戶界面或用戶體驗設計尤為重要。
△ George Frigo 設計的呼吸檢測 APP
本文將探討一些醫療保建 APP 設計的成功案例和經驗，這對設計師和企業來說都很有幫助。
值得注意的是，“醫療保健類 APP” 是一個綜合性概念，涵蓋了許多與健康和醫學相關的數字產品。
醫療保健 APP 類型很多，包括但不限于：
這似乎是一個相當寬泛的主題（例如，卡路里計數 APP 和醫學教育解決方案相差甚遠，卻都屬于這個領域）。但是，有一些通用的設計方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移動醫療或移動健康）：通過移動設備提供與醫療相關的服務，例如，通過 PDA、移動電話和衛星通信來提供醫療信息和醫療服務等。）
△Victor Nikitin 的醫療類 APP
一款 APP，即使它不是企業的主要產品，也可能具有巨大的價值。例如，用于醫療工作的配套 APP，能夠為客戶提供信息和服務，從而減輕員工的負擔。如果一款醫療保健類 APP 是企業的主要產品（例如，健身或冥想 APP），因為沒有硬核的業務場景支持，會有很大的風險。有時，這類 APP 設計中的不足會導致用戶完全放棄使用它。
為了避免這種情況，我們來看看設計醫療保健 APP 的 12 個要點，以及它們如何幫助設計師們設計出更具針對性、更直觀、更的 APP。
△ Anatoly 設計的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解產品的目標受眾是誰，他們的地理分布、社會人口特征以及心理特征是什么。因為沒有一種產品可以滿足所有人的需求。用戶的興趣和能力決定了他們如何與 APP 進行交互。因此，回答以下問題將對你有所幫助：
一般來說，患者和醫生都會使用醫療保健類 APP（假設我們將生活方式類 APP 的用戶也視為患者）。這兩類用戶在功能和 UI 設計方面有不同的需求。
醫務人員通常需要快速找到一些數據項，例如 EHR / EMR、藥物規格、診斷和治療建議、參考材料等。但是，患者希望能與盡可能少的信息進行交互，且這些信息應該簡單易懂。因為這類用戶中有很多是老年人，或是存在某些障礙的人。
只有在進行適當的用戶研究，并得出相應結論后，設計師才可以著手進行醫療保健類 APP 的設計。
△ Chahua 設計的健康管理 APP
2. 每一個案例都簡潔明了
對于一般人來說，醫學是一門復雜的學科。所以在設計醫療保健類 APP 時，請盡可能地讓它們保持簡單，這有助于讓用戶平靜下來，并保持專注。
“復雜性是你的敵人。很多傻瓜都可以讓事情變復雜，而讓事情變簡單是很困難的。” — 理查德·布蘭森
為了讓醫療類 APP 看起來很重要并給人留下深刻印象，而將其界面做得過于詳細，是沒有意義的。即使該產品是為醫務人員設計的，也最好 讓界面和邏輯易于理解。
△ lgor Savelev 設計的醫療類 APP
在設計醫療保健類 APP 的用戶界面時，請提供有意義的用戶引導，并 使界面直觀易懂。否則，用戶可能會在觸達該應用核心內容之前就對其體驗感到沮喪。
如果該 APP 清晰明了，醫生及患者雙方都更容易接受。這樣一來，用戶易于學習上手。即使它是針對醫療的解決方案，人們也不會感到不習慣。
為幫助用戶在比較舒適的節奏下了解產品功能，請使用漸進呈現的原則，逐步為用戶提供指示。從新手指引開始，將應用程序中的每個操作分成可管理的小模塊，每次僅提供一個指引。（漸進呈現（progressive disclosure）：每次只展示用戶當前需要的信息，引導人們平緩地由簡單狀態進入復雜狀態。例如將原本復雜的邏輯隱藏起來，通過更易于認知的界面形式幫助人們輕松完成最為基礎的任務。）
另外，采用被動輸入、自動輸入、調整鍵盤和動態驗證字段的方式，能夠限制用戶必須輸入的信息量。
所有醫療信息必須由受過相關教育且具備專業知識的專家提供。否則，內容要么不完整，要么包含錯誤，對于醫療產品來說是不可接受的。
△ yurig 為醫生設計的醫療類 APP
3. 功能和特性
醫療保健類 APP 的 功能及特性取決于其用途和目標受眾。例如，醫療中心 APP 需為用戶提供個人帳戶，在該帳戶中，用戶可查看其就診記錄、就診建議以及預約情況。如果沒有安全加密的視頻會議和通訊功能，遠程醫療 APP 將毫無意義。畢竟醫療類 APP 依賴的是可靠且有用的通知。
主頁承載著一個 APP 的主要功能。請試著回答這個問題：用戶為什么使用你的 APP？或與之類似的 APP 呢？如果用戶訪問 APP 是為了記錄或接收某些信息，或是聯系醫生，查看他們的進程等，那么這個功能應該位于 APP 的主頁。
重要的是，正如前文所提到的，避免一次性出現太多功能，從而造成混亂。不可否認的是，這種情況經常發生在老版本的 APP 上。這些 APP 常常不斷添加新功能，偏離焦點，以至于只有專家用戶才能理解它。
（專家用戶（super-users）：專家用戶在生活中愿意給予企業反饋，主動做口碑，或是積極分享、點贊等，這些無法以價錢衡量，卻能在品牌價值傳遞、產品創新、營銷推廣等經營各環節，為企業帶來實質貢獻。）
根據帕累托原理（二八法則），80％ 的用戶傾向于使用不超過 20％ 的功能。因此，務必確認哪些功能對用戶來說是最重要的。
（帕累托原理（ Pareto’s principle）：也稱二八法則。在任何特定群體中，重要的因子通常只占少數，因此控制具有重要性的少數因子，即可控制全局。）
△ Manoj Dalvadi 設計的 Medicine APP
4. 便于探索與享受的導航
清晰的導航結構是一個有效的醫療保健類 APP 的必要條件，也是醫療保健類 APP 用戶界面設計的基礎。沒有清晰的導航，APP 是不會被廣泛使用的。完善的導航意味著率和易用性，這對用戶來說是十分有價值的。醫療專業人士需要的是能夠快速開展工作的應用，因為他們花費了太多時間在處理電子健康檔案（EHR）上。一項由斯坦福醫學院展開的調查發現，醫生花費在每個病人身上的時間，有 62% 是用于處理電子健康檔案。如果針對醫務人員的 APP 不夠簡潔，那 APP 便失去了使用價值。同樣的，對于患者來說，他們也不會喜歡混亂的導航，即使當前的任務不是很重要。
重要的信息應放在明顯的位置，并在必要時提供詳情。根據 3 次點擊原則，系統應保證用戶在 3 次點擊之內，找到所需信息。
為了使 APP 導航結構清晰，可采用標準的 APP 導航組件，如漢堡菜單、標簽欄或抽屜式導航等。
△ Alex Samofalov 設計的醫療類 APP
一般來說，APP 的顏色選擇取決于目標受眾以及該 APP 的主題。
醫療保健類 APP 設計通常采用中性色調，尤其是冷色調的藍色和綠色，背景一般為 白色。設計師這樣做是為了達到以下效果：利用柔和的色彩和醫療保健行業的聯系，緩解用戶焦慮并增加可信度。因此，在醫療保健類 APP 的用戶界面中，亮紅色或黃色是很少見的。
△ Adam Soko?owski 設計的醫療類 APP — Pharmagy
但是，考慮到醫療類軟件的多功能性，顏色選擇并沒有特別的限制。主要思路是，這類 APP 的整體外觀應營造積極的印象，不應引起焦慮、恐懼或其他不良情緒。
例如，深色的健身 APP 看起來優雅且有品味：
△ Saepul Rohman 的 UI 設計—健康及鍛煉類 APP
而亮色為 APP 增添了許多活力：
△ Michal Parulski 設計的移動健身 APP
APP 的個性化定制是近年來最顯著的設計趨勢之一。特定的功能與特定的用戶模式相適應，并且系統會暗示用戶下一步可執行的操作，以免被用戶忽略。
這些技術的目標是，幫助用戶更快地利用 APP 解決問題。因此，有必要識別和分析用戶模式，并跟進他們的變化。
正如每個人都有著不同的健康狀況，用戶希望他們所使用的 APP 也能提供同樣獨特的體驗。除此之外，在非醫療保健行業，也有 33％ 的用戶會因個性化程度不足而卸載應用程序。
在設計醫療保健類 APP 時，可以使用許多自定義選項，如顏色主題、個性化通知、交互元素，以及利用 AI 定制個性化推薦等。
△ Jawad 設計的在線咨詢 APP
無障礙的 UI 設計對任何 APP 來說都很重要，對于醫療類 APP 尤為重要。
移動醫療解決方案針對的是不同年齡，具有不同視覺和聽覺能力、身體和心理特征的用戶。因此，醫療保健類 APP 主要功能的設計，應保證每個潛在用戶都能訪問。請考慮可能存在的限制，并努力克服它們的負面影響。例如，有暈動癥的人不會喜歡過多的動效。
但這并不意味著一個醫療保健類 APP 的界面中只能有兩種顏色，也并非所有文本字號都要非常大，但這確實意味著設計師將面臨一些挑戰。對于醫療保健類 APP 來說，其中的挑戰也許相對多一些。無障礙設計能帶來更多的機會，而不是負擔。試著從瀏覽 W3C 網頁中關于無障礙指南的內容開始，嘗試使用色盲模擬器，如下圖這種。
無需多言，試試移動端無障礙設計的常用方式：將主要元素的尺寸控制一個拇指大小的區域中、添加將視圖改為水平模式的選項，以及放大文本的選項等。
△ keithar 的對比度分析儀和色盲模擬器
醫學不僅復雜，而且通常令人生畏，即使涉及的醫學內容不多。一個比較聰明的辦法是使 APP 看起來與醫學毫不相干。這將消除用戶因刻板印象而產生的壓力，并使體驗更加愉悅。
除了使用柔和的顏色，還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫療保健類 APP 用戶界面中的圖像和圖標，應始終帶給用戶積極、愉悅的情緒，并 營造一種無痛感和安全感。
△ Mahdieh Khalili 設計的冠狀病毒 APP
當產品已具備現成的網站，企業方甚至設計師為了降低制作成本，可能會想從產品的網頁版中 “借鑒” 一些解決方案直接應用在移動端設計中，這很可能導致用戶拒絕使用 APP。
用戶與移動設備間的交互不同于與電腦間的交互。移動設備的屏幕比顯示器屏幕或筆記本屏幕小。此外，用戶與移動設備交互的方式不同于在電腦上進行的操作。在移動設備上，我們做任何事情都依賴手指的移動，不愿意輸入冗長的文本，但同時希望系統能更快地工作。
一般來說，盡管 APP 中的導航也很重要，但對于移動設備而言，更需關注的是交互設計。在大多數情況下，人們喜歡使用網站來獲取信息，使用 APP 來完成任務。此外，APP 還集成了智能手機的功能，如加速度傳感器和攝像頭，這也是導致 APP 的用戶界面設計與 Web 版有所不同的原因。
△ Grace Saraswati 設計的健康健身類 APP
視覺吸引力與功能性之間的平衡是非常重要的。醫療保健類 APP 必須便捷，且不能分散用戶對內容的注意力。
圖形元素，包括動畫，應始終以滿足使用目的為前提，來考慮是否需要，如數據輸入，以及說明用戶與系統間的微交互等。不能僅僅因為它看起來不錯而添加。不要過度使用漸變和陰影，要將用戶注意力集中在主要信息上。字體也只需選擇一種，可以通過改變字號和其他特征（如斜體、粗體）來做區分。
使用簡單的配色方案可以更清晰地傳達品牌信息，并創造更好的導航效果。
△ Dibbendo Pranto 的健康及活動追蹤交互設計
你可能會在某些點上考慮，是否要借鑒一些競爭對手的成功案例。好吧，如果這有用的話……一方面，抄襲其他產品是不明智的，因為 它們的設計可能并不完善。你采納的可能是競爭對手的錯誤決策，以至于阻礙 APP 的未來發展。
另一方面，你應該先對其他應用進行分析，對競品進行研究。應該參考用戶以前使用其他 APP 的經歷，并進行借鑒，從而降低用戶的學習成本。添加太多創意會使 APP 顯得很煩人，用戶需要花大量時間去習慣并學習操作。為此，可以參考蘋果制定的人機交互指南（Human Interface Guidelines ）和谷歌制定的材料設計指南（ Material Design）。
“用戶大部分時間是花在別人家的網站上?！?— 雅各布定律
（雅各布定律：用戶在其他千千萬萬個網站中積累經驗，學會如何使用網站，當一個網站跟其他網站一致時，用戶會立刻知道該如何操作，但如果違反了雅各布定律，用戶會毫不猶豫地離開。）
必須根據品牌、服務和產品細節來進行設計。例如，健身類 APP 與醫學計算器有著很大區別。設計必須完全符合目標受眾的要求、APP 的功能細節及主題場景等。
△ Martyna Zielińska 的醫療提醒 APP
最后，重要的是要記住，每個設計師都有自己的觀點，認為這個或那個決定是合理或有效的。他們可能會對 APP 架構和導航的一致性，嚴謹的設計解決方案，以及產品的實用價值深信不疑，以至于忘記了測試。通過不斷的實踐，設計師提高了自己的共情能力，可以更好地理解用戶需求。但事實上，直覺和經驗帶來的潛在陷阱也會給應用帶來負面影響。
只有在分析用戶與 APP 界面交互的相關數據后，才能得出相對準確的結論。測試有助于及時獲得反饋，覆蓋 APP 中的所有行為場景，并檢查交互模式。
用戶的積極參與是成功的關鍵。相關測試受眾的年齡、職業、地理位置、性別、文化和宗教背景等要盡可能接近目標受眾，越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。
△ Alex Samofalov 設計的患者卡片 APP
設計所關注的并不僅僅是顏色和字體，而是創造價值和解決業務問題的能力。健康是一個敏感且具有挑戰性的問題，需要特別注意。設計師們一直努力地在醫療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。
經過深思熟慮的醫療保健用戶體驗和 UI 設計是一種極好的工具，它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等，吸引用戶參與體驗。
文章來源：優設網 作者：TCC翻譯情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天給大家帶來的是如何建立設計師個人的插畫組件庫，因內容過長并知識點過多，請泡杯枸杞觀看。
一、關于個人插畫組件庫的3大疑問點：
1、為什么要建立個人插畫組件庫？
其實最主要目的是為了給自己的插畫提供一個設計軸心，我們可以圍繞著這個軸心創作出更具有效率規范的插畫內容，演變更多的插畫風格，讓我們使用插畫時變得游刃有余，提升率的設計輸出，衍生更多的組件化運營設計與品牌插畫組件庫。（注：按照以下步驟設計，插畫手殘黨也能輕松學會哦?。?
2、品牌（產品、項目）插畫組件庫與個人插畫組件庫的區別？
01-規范區別：
品牌插畫組件庫：組件品牌插畫庫前會做很多細致的規范，如：顏色規范/情景規范/光線規范/關節細節處理/景別元素處理等等；
個人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個人插畫組件庫時不會做太多的規范，反而為了插畫的衍生要更注重人物構造、比例、小組件等等，目的就是為了成立個人插畫軸心。（注：個人插畫軸心是針對于第一個插畫系統的原型，我們后面的插畫風格衍生都會參照第一個插畫系統的原型，后面會給大家詳細講解）
02-使用效率：
品牌插畫組件庫：使用更加，拖入即可更換組件使用；
個人插畫組件庫：因為我們采用的是不斷迭代式做法，所以在剛建立個人插畫組件庫時，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會逐步提升。
03-拓展力：
品牌插畫組件庫：因為有很多規范的約束，所以拓展力偏弱，不過針對于自己的品牌已經足夠了，它本身就是為了自己的品牌服務的；
個人插畫組件庫：因為從我們插畫組件庫的層級分區來看本來就是為了衍生拓展，所以拓展力非常強，不僅可以衍生出相同類型的插畫風格，還可以衍生出不同類型的插畫形勢，甚至可以以個人插畫組件庫為基礎創建單獨的運營設計組件庫，或者升級為品牌插畫組件庫。
3、個人插畫組件庫哪些人最應該去建立？
我認為UI設計師是最應該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報等等，很多都可以用到插畫去設計，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務，更大程度保證設計的統一性以及輸出的質量。（相信大家都遇到過到處找插畫素材拼湊banner的時候吧，有了個人插畫組件庫就不用愁了）
當然除了UI設計師還有插畫設計師、平面設計師、美工也都可以去建立插畫組件庫，不過具體還是要看每個人所接觸的不同設計內容，有些設計師的設計內容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質復雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。
二、如何建立個人插畫組件庫？
想要建立個人插畫組件庫就要從它的本質特點出發去考慮，個人插畫系統歸納下來一共有三大特點：可復用、適應力強、效率高。那么接下來我會圍繞著這三點來闡述該如何制作UI設計師個人的插畫系統。
1、可復用性方向出發設計
可復用性是做插畫系統的一個基礎，如果不能解決可復用問題，那么做個人插畫系統根本沒有任何意義。
如果想要達到插畫可復用性，我們就要把插畫內容進行不同的拆分，在它可替換的部分都作為一個復用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：
第一步：
設定基礎人物組件（肢體細節、型體比例），規范組件內容。如果你是第一次做人物組件，可以多在網上找一些可參考內容：
下圖是我做的一個基礎人物組件案例：
從人物組件上面來看我一共把它們分為了9個小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。
從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細苗條。不管是男性還是女性整個身體構造簡單常規，符合真實人物比例，有利于后期的組件改造。（第一個插畫組件最好使用常規比例，后面會提到為什么要這樣做）
在人物組件上的劃分并不是固化的，你可以把它細化分為9個部分，也可以分為7個部分，如果分為7個部分就把上臂與前臂統一融為手臂，大腿與小腿統一融合為腿部，到底要怎么去進行組件化，還是要取決于自己設計的插畫人物特性。
除了男性、女性外也可以建造更多的人物進來，例如老人、小孩、嬰兒...人物越多，后續的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個人物，后續可以逐步完善迭代。
第二步：
為了后期人物的動態延展，我們可以用人物組件制定一些高頻的人物基礎動態，例如標準站姿、坐姿、跑動等，以便于我們插畫的延展，圖示如下：
做人物基礎動態可以讓我們在后面的插畫設計上少花很多時間，例如工作中要用到跑步動態時，那么就可以直接用人物基礎動態里面的跑步動作進行添加人物細節，會節省很多工作時間，提升工作效率。
第三步：
有了人物組件的基礎，我們就可以開始設計插畫的風格。
在設計前我們可以多參考一下別人的插畫風格，這里所說的風格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質的處理、曲線直線的選擇等。
我們需要注意的是建立第一個插畫系統時可以先做一個風格簡單的，不僅容易調節組件也有利于后期的風格衍生，以下是我為人物添加的簡單基礎風格（ 特點：純色/完全按人物組件貼合設計/無漸變）：
第四步：
設計人物組件（可以讓你的插畫在不同的場景應用不同的動作/服裝/表情/膚色等）
1/發型：
在發型上面我們可以進行一些人物的區分，可以適用于不同的場景，例如：男性第一個適用于公司場景，第二個適用于學生，第三個適用于軍人...
2/膚色：
做膚色的變化最主要原因是讓插畫適應于國際化，在不同的場景中可以加入不同膚色的人物。
3/表情：
表情是為了更好的體現出人物在環境中的狀態，如：領取紅包插畫，人物的表情就應該是開心或者大笑。
4/角度：
在插畫的角度上，我們采用了最常用：正面、半側、正側，讓它在插畫中的適應力變得更強。
5/紋理：
我們目前設計了6個基本紋理，基本紋理不僅可以設定于服裝中，還可以設定于輔助元素以及背景中。
6/服裝：
在整個人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛衣、背心等，同時在它的下一個層級還可以替換服裝紋理、服裝動作、服裝顏色。
結合以上的人物組件我們就可以組合出各種不同的動作，如下：
第五步：
設計通用組件庫：
通用組件庫中的元素最開始要用黑白灰來表達，因為在不同的場景中元素的運用也有很大差異，例如花盆作為近景元素會多許多細節，作為遠景元素可能只是作為線條來點綴，這些表達方式我們可以在日后使用過程中添加到它的子級庫即可，這樣可以讓我們在使用組件庫時更加靈活，也有利于我們迭代組件庫，后面會逐一的講解。
這5個步驟下來我們的可復用性插畫就做好了，那么接下來看看運用效果：
我們可以看到以下4個場景，運用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達；第四組則用淺色面表達。
這也是與品牌插畫組件庫的很大區分點，雖然都是可復用性插畫，但是品牌插畫組件庫大部分是使用現有的、具有規范的，而我們所做的個人插畫組件庫可以用同一個輔助元素增添不同的插畫表達形式，不斷迭代子級，迭代的子級越多它的內容選取性就越高，后續就可以直接拖入使用，比如圖4中的植物就有2種狀態，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會詳細講解）
以下活動頁中，背景元素也可以運用同樣的方法，在我們的背景組件庫中調取想要的單個插畫元素，把它們組合放入活動頁背景中，進行再次調色得到不同的背景組合，以下三種背景組合都可以相互替換使用。
2、讓你的插畫具有極強的適應力
適應力強是指我們的插畫系統可以匹配大多數的產品，因為個人插畫組件庫是以設計師身份做的，我們會面臨各類產品，而各類產品風格都會有不同的變化，要解決這一點我們可以使用以下三個方法：
方法一：改變人物結構
例如：你想為產品A做一些插畫類的功能頁或banner時，發現你現有的第一套插畫組件庫并不符合產品特性，產品A想表達更多夸張的成分，而我們所做的插畫系統顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個基礎點，那就是人物結構，通過人物結構的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結構重組對比圖，如下：
我們為了在身體結構中達到人物夸張的效果，在原有10a比例不動的情況下對原本的身體結構做了重大調整，男性：上身的縮短，下身的延長以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長。
如果把他們用相同的插畫風格表現出來，就會出現如下效果：
當你在做人物結構調整時，你會發現有一個常規的人體結構作為基點去設計是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規的，因為如果不是常規人體結構，調整起來會非常麻煩，就很難有參考意義。
方法二：改變插畫風格
除了人物結構外我們還可以更多的考慮插畫風格，通過不同的插畫風格去適應不同的產品，例如：線面/漸變/雜色/極簡...同樣我就男女各舉一例，如下：
上圖改變風格后，男性的風格則更偏向于線條的表達與高亮色調；女性的風格則簡單直接，更注重凸顯配色的碰撞。
方法三：改變人物結構+插畫風格
在上面兩種方法中除了已有的基礎人物結構A與插畫風格A，我們還得到了人物結構B、C與插畫風格B、C，如果我們用人物結構B（或C）與插畫風格B（或C）結合又可以形成新的插畫狀態。
按照這樣的方式下來我們就可以逐步添加自己的插畫系統，假如當你的插畫系統人物結構有5組、插畫風格有5組時，你就可以組合出25組不同的插畫，這樣你的插畫系統適應能力就極強了，甚至你要為產品做插畫系統時，也可以大幅度參考你的個人插畫系統，當然這一切都是需要自己去慢慢迭代添加的。
3、用軟件規范插畫組件庫（層級詳解），提升應用效率
為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對插畫進行管理。市面上可以提供復用樣式的軟件也蠻多的，這里我就使用應用率最高的Sketch來進行講解。
首先我給大家講一下我的插畫組件庫的構成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規人物組件庫、動物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細分出了很多小層級，我就一一為大家分析下我所用的層級。
我們可以從以上圖中看出從風格分類開始直至最小的組件，我用到最多的層數是5層。
如果大家看的有點懵，我們就拿一塊從層級1到層級5舉例說明：
風格分類（A）-角度分類（正側）-四大組件（下身）-動作（B）-顏色（B）
這里所用的是sketch復用樣式中的“套中套”，“套中套”的組件方式看似復雜，其實挺簡單的，并且在軟件中換取都在大組件內，因為不是軟件講解所以就不帶入過多的軟件知識。
在制作時我們不要想著一次性就做出很多小組件，比如你想做表情時，一來就想做10多20個全部包含完，其實沒有必要，我個人是比較建議最開始小組件做個3-5種常用的就可以了，因為組件庫是要不斷添加優化的，所以可以在后續工作應用中再不斷的添加。
有了層級的劃分，我們可以用sketch的復用樣式簡單、的規范插畫組件庫，想要覆蓋替換組件內容也是十分方面，如下：
2/非常規人物組件庫
除了常規的人物組件庫外，我還單獨羅列了非常規人物組件庫，這一類組件庫主要是作用于人物特殊的動作形態，比如下面3個透視類的插畫動作形態，這些動態與常規的插畫組件庫的內容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨給他羅列一個非常規人物組件庫。
都是同為組件庫，當然也有可替換內容，非常規人物組件庫與常規的人物組件庫的層級邏輯有所不同，常規的人物組件庫是用小組件替換人物動作，但是非常規人物組件庫是先替換整體的動作然后才可以替換小組件，這也是對他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調整，所以就單獨讓它成立出來。）
根據非常規組件庫的設定給大家做個小案例：
以上可以看出我在這個透視化的插畫人物中可以替換表情、發型、紋理、上身、下身。
3/動物組件庫
我這里做的動物組件庫是用來輔助人物以及調和場景的，所以在層級劃分上并不會做的非常細，滿足我的日常插畫需求即可，當然如果你想把動作組件庫做的非常細，那么可以參照人物組件庫的層級來劃分層級。
根據我使用的動物組件庫層級，給大家舉一個正確小案例與錯誤小案例，先看下錯誤小案例：
可以看到下圖（狗子）是一個非常粗糙的動物組件庫，里面只能替換動作以及動物的動作，當選在狗子的狀態下，狗子除了換動作沒有其他的組件選項，雖然我想讓動物組件庫簡化，但是也不至于什么都不能替換。
接下來看看正確的案例：
我們可以看到在貓咪的狀態下就有很多組件可以選擇，不僅可以替換貓咪的動作，還可以替換展示形式（展示形式我是按照景別來做差異化，當然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動物組件庫已經完全能夠滿足我的設計需求。
4/輔助元素組件庫
輔助元素組件庫層級最好要添加景別，因為我們經常會遇到同一個元素在不同產品中體現出不同的景別，如果不區分，在選取組件時就非常的傷腦經，經驗之談、強烈要求。
為了大家更好的理解，我給大家舉一個小案例：
我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因為這些已經足以滿足我的日常運營設計需求，這個層級劃分簡單實用非常推薦。
5/背景元素組件庫
背景元素組件庫一共分為兩種類型，分別為：組合場景背景與紋理背景。
組合場景背景：
組合場景背景是用輔助元素組件庫拼湊而來，它是一個可以直接用的完整場景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調動，在后續出的文章中會詳細提到）
上面的插畫由白天變為黑夜只需要用組件庫就能輕松完成，而這些組件庫也不是現做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場景背景是用輔助元素組件庫拼湊而來。
大家可以發現插畫中山上的小房子只用一個組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調換過程中重組組件，優化層級。
紋理背景：
紋理背景相對于來說就是最簡單的，它里面只存在紋理的不同樣式，并且只可更換顏色。
三、人物插畫組件庫如何結合到運營設計中？
1、創建常見運營設計規范
在做設計前，我們先要做好運營設計的規范，以便于組件庫的插入應用。
那么我就用卡片彈窗來舉例：做設計前我們先確定卡片內容，當內容確定后，根據內容進行卡片的運營設計規范：
我們需要注意的是初步規范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規范，我們可以在后面的設計中一步步去實現。
2、結合運營設計的兩大方法：
當規范做好時，我們就可以利用規范去制作相應的組件庫，利用組件庫來結合運營設計，按照不同的情況可以分為以下兩種方法：
1/重組組件庫（無人物動態組件的情況下）
在一些運營設計中，如果我們要用到的人物動作之前并沒有做過，那么就需要我們重新設計人物動作，設計完后再把可以重組的人物組件拖到我們現在的組件中進行重組，分以下幾步進行：
第一步，根據卡片的規范做出卡片的設計內容，如下：
第二步，把設計好的內容分板塊，以便于組件庫的層級劃分。在這里我把他們一共分為了4個大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。
第三步，在大的板塊下劃分小組件，結合小組件就可以得到我們組件庫的層級，可看下圖：
在小組件里，很多都是個人組件庫里原本有的內容，這時我們就可以把它們拖進來進行重組。
假如你替換的元素不夠用，那么就需要你自己手動設計了，這樣也能反過來擴充你總的人物組件庫內容，其實組件庫的內容就是這么一點點迭代添加的，當你的組件庫內容越來越多時，你的設計成本就會越來越低。
三步下來我們就把組件庫融入到了運營設計中了，有了新的子級運營設計組件庫。
2/直接替換（有人物動態組件的情況下）
如果你做的運營內容組件庫里都有，那么就可以按著規范直接拖入即可，也沒有必要去進行重組。
總結：
總的來說組件庫的建立是一個龐大的工程，在你有了基礎架構的時，你就要慢慢往里面塞更多的內容進行填充，當你的內容足夠多時它就可以反向為你提供更多的便利，它是你的寶貴的設計資源庫。
因為這期的內容實在太多，所以插畫組件庫的應用、運營設計常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時間給大家總結。（做案例太費時間希望大家諒解）
參考資料提取：
我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動畫、一些參考性的圖片（構圖、表情、發型等等）。
文章來源：tob.design 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
祝愿大家在新的一年，有一個新的開始，更加有活力，更加有生機，生活像亮麗黃一樣靚麗而多彩，像灰一樣靜謐而不失優雅。
做To B的同行都知道，降本增效一直是企業中后臺繞不開的熱點話題，現任公司業務涵蓋倉（WMS）、運（TMS）、配、人（HRM），所做項目雖功能各異，但是有一個共同點-大量使用表格。本文受有贊設計師@美芳的啟發，將我日常工作通過優化表格來提效的思路整理成文章，一方面是對企業后臺的數據表格作一個簡單的階段性總結，另一方面給部門做一個年終分享。
表格是展現數據最為清晰、的形式之一，它也是B端產品和設計師每天接觸最多的組件，常和排序、搜索、篩選、分頁等其他界面元素一起協同。在企業級中后臺中，常應用于：
一次性瀏覽大量信息-很多圖表類型無法展示數據特點，而表格是組織大量信息通用性最高的一種表達方式，既可陳列信息，又可以表達信息之間的關系；
信息之間需對比-表格的歸納與分類，便于用戶快速查詢其中的差異與變化和關聯；
快速確定并執行多種復雜操作-如對信息進行搜索、篩選、增刪改等。
通常表格的組成元素以及相關元素會有多個部分，根據不同粒度的用戶目標將其解構為三部分：
數據查看：表格的核心-顯，用戶用來閱覽、對比和分析數據。
數據過濾：輔助作用，承載表格的查功能，將數據過濾，方便用戶快速查詢定位數據，一般位于表格上方。
數據操作：輔助作用，承載表格的增刪改的功能，比如常見的“新增”、“刪除”、“編輯”按鈕。
首先，我們要明確，什么是一個好的表格？筆者認為好的數據表格可讀性要強，應便于用戶對信息進行快速的掃描、查詢、過濾、分析等操作，以獲取數據并快速準確地完成目標任務。一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度，拆分到表格的設計目標就是：易讀、易查找、易操作。
數據檢索區可以看作表格的導航，按預定目標過濾出某種具有特定性質的數據，將操作者所關注的數據展示到前面，便于快速查看查看、對比、分析信息的操作過程。從用戶角度出發，按不同粒度的數據檢索方式分為3種方式，分別對應不同程度的用戶。
搜索：當用戶有相對明確的選擇目標時，需定點查看，數據多且雜亂無規律；
篩選：用戶目標相對比較模糊，游離于一個大概的范圍時，通常用于一些有清晰分類的數據；
標簽：查看無交集的數據內容，通常伴隨時間、狀態的流轉。
搜索可以幫助用戶在巨大的信息池中縮小目標范圍，快速而準確的定位到目標數據，并速獲取需要的信息。由于考慮到用戶需要手動輸入，很難保證精準搜索，原則上所有搜索均為模糊搜索，必要精準搜索的地方使用篩選功能，給用戶提供篩選選項。通常上端搜索欄不被限定搜索范圍，可以全部搜索。
優點：減少精準搜索帶來的記憶負擔
缺點：容易把不相關的
優點：搜索匹配精準度高
缺點：不方便，每次只能對單一條件進行搜索
篩選可以幫助用戶縮小數據范圍，逐步找到想要的內容；或者當用戶的目標就是查看某一范圍的數據時，篩選將是一種十分快捷的方式。在企業級中后臺產品中，篩選的使用場景通常是后一種。
優點：空間利用率高，起到了很好的收納作用
缺點：無法直觀看到所有篩選項
優點：操作效率高，篩選項一目了然，支持輸入更多篩選條件
缺點：空間利用率低，不適合選項太多的情況
優點：篩選當前列，更直觀，一般情況下表單左側數據篩選頻次越高
缺點：篩選的內容僅限于特定、單次列的篩選，對于首次使用者來說陌生，交互形式需要學習
使用場景：標簽切換一般用于和時間、狀態的流轉有關，且沒有交集的數據內容。主要樣式有基礎、卡片、膠囊等。
優點：根據標簽，可以很清楚知道劃分，切換tab就可以篩選內容。
缺點：分類需覆蓋選項，并且保證每一項沒有交集，分類不能過多，超過7±2個選項可選擇下拉篩選。
提升用戶體驗的一個小細節：默認用戶最關注的選項，而非全部，這樣可以縮短查詢路徑，同時給出條目，讓用戶清晰明了每個選項的數量，便于操作。
在企業級中后臺中，用戶查看的數據往往屬性較多且不唯一，通過簡單的檢索方式很難定位到目標數據，所以，在實際使用時，常會將大量非交叉關系的屬性進行羅列，搜索、篩選、標簽切換組合出現，形成多屬性組合檢索。這種檢索更適合于專家用戶，他們對于目標數據有明確的定位，知道可以通過哪些屬性定位到自己想要的數據。
平鋪顯示
選用對用戶決策有意義、操作頻次高的屬性作為直接展示的組合檢索條件，建議數量最好不超過5個（7±2法則）。
優點：大而全能最大限度避免檢索條件疏漏的可用性問題
缺點：易用性不高。大而全可能為用戶帶來繁雜的第一印象，都是重點等于沒有重點，增加用戶的決策時間。
折疊展示
如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的，但又是必須存在的；則可通過折疊的方式將這部分檢索條件隱藏起來，將高頻率使用的、數據覆蓋面廣的1-3個屬性直接展示出來。
在設置組合檢索項時，應考慮每一項檢索甚至是多屬性組合檢索是否有必要。需從實際場景出發，根據用戶對各個檢索項的使用頻率及組合檢索項的數量，來決定組合檢索項是直接展示還是折疊展示；以及哪些屬性直接展示，哪些屬性折疊展示，為各檢索項安排合理的展示方式。
產品現狀：前言中提過，我司業務涵蓋WMS、TMS、HRM，業務極其復雜，數據種類字段眾多，使用的檢索方式為組合篩選平鋪展示，一半以上的頁面篩選項超過了9個（不符合7±2原則），大而全的檢索方式一方面占據首屏大部分空間，導致首屏屏效低；另一方面用戶在尋找具體篩選條件時，仿佛大海撈針，增加了用戶決策時間。因后臺數據涉密，將下圖-招聘中可公開的頁面作為案例來可大家分享。
設計優化方向：
業務目標-提升招聘人員的檢索效率 ；
設計目標-縮短檢索路徑，減少檢索區占用的屏幕空間，提高首屏屏效，將展示區域更多留給表格；
設計策略-按照用戶場景檢索路徑、檢索頻次設計信息
但還有2個關鍵問題：用戶場景有哪些？查詢路徑是什么？哪些檢索頻次高？依據從何而來呢？通常有兩種方式：
依據一：數據埋點，每個操作埋個PV（點擊量）,一個月后再看每個操作的數據量；
依據二：用戶調研，通過【問卷投放】或【用戶訪談】，深入理解用戶真實使用場景以及與業務之間的關系。
我采用的用研方式是用戶訪談，原因是由于招聘人員和我們產研人員在一個園區，調研方便，得出數據的時間比埋點短；而相比【問卷投放】，用戶訪談能細到具體某個字段在場景中的作用。訪談的過程因為篇幅原因就不在此具體講述，大家可根據自己的實際情況選擇適合的用研方式。
訪談中了解到，招聘人員的工作是發布崗位信息，快速招到合適的人。因此他們在該頁面的TOP場景就是對崗位上下架，即【新增】和【刪除】，而檢索的TOP場景有哪些呢？
1.對上架中的已招滿的崗位進行下架處理，完整的檢索路徑為崗位狀態>崗位名稱>項目
2.設置崗位傭金，因傭金會根據需求方要求及緊急程度動態變化，完整的檢索路徑為崗位名稱>傭金排序
3.匯報招聘進度，對于個別需求量大、急聘的項目，領導特別重視，經常需要導表。完整的檢索路徑為急聘>崗位名
通過場景得出高頻檢索為【崗位狀態】、【崗位名稱】、【急聘】，其他如【項目】和【城市】檢索條件只是當崗位名稱重復時來進行組合篩選，但該場景在我們業務中很少遇到，如【仙林店誠招配送員】，門店重合率很低。
訪談中我們已經得到了用戶對各個檢索項的使用頻率，那信息排序的原則是：按使用頻率，用戶目標高于業務邏輯，而改版前并非是按照使用頻率排序的。再回到用戶場景，在匯報招聘進度時需要檢索的【急聘】并不在檢索項中，需要和產品經理反映這一點
直接展示高頻檢索項【崗位狀態】、【崗位名稱】和【急聘】，其他低頻項折疊至高級篩選，【項目】、【城市】
【創建人】作為下拉篩選，查詢路徑較長，同時將字段組合放置在搜索選項中，采用帶標簽的搜索，因【崗位名】頻次遠高于其他字段，默認展示【崗位】
優化后如下圖所示：
數據查看區主要用于數據的顯，用于對比、瀏覽，而B端后臺的表格中展示的數據往往多且雜，數據種類、字段眾多，10-20字段很普遍。這就需要我們在設計的時候先一步對數據進行梳理歸納，提高數據的易讀性。我在對我們后臺表格進行優化時，會先通過四個維度來自檢，然后再有針對性的進行優化。
在講提升數據查看區的易讀性前，我們先來看看該區的結構。數據查看區主要由表頭、行、列、單元格四個部分組成。
表頭：說明數據的內容，可以包含篩選、排序等功能起到數據解釋作用，
行和列：對本行/本列數據的描述，可以理解為是表格的骨架，是用戶快速掃描并接收表格布局的關鍵要素
單元格：表格的主體內容，承載用戶的每一條數據，也是整個表格的核心
表格設計的本質是信息內容的有效傳達，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上，多做減法。
基于對實際業務需求、目標用戶訴求及其行為的理解，列數盡量控制在7±2，列舉用戶更為關注的數據，用戶需要的非重點、輔助性信息可以在詳情中展示。
如果不同用戶想看到的信息側重不同，可以讓用戶自定義列的展示。在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣做的好處是，首先，用戶能在表格上方看到所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況；其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。但需注意系統應記住用戶上一次的自定義列設置，減少用戶重復操作。
表頭，概括每列的主要信息，在用戶使用表格中，起到數據解釋作用，讓數據能與之進行匹配，使用戶能夠看懂。表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。
一個簡單的檢驗表頭是否精簡的方法是：少一個字不可，通俗易懂的說法就是字數再精簡用戶就不明白意思了。可以讓其他同事體驗產品，看有沒有一些名詞定義讓用戶產生誤解。
對于比較復雜的表頭，可以定義一個專有名詞，鼠標hover上去對專業術語或用戶不常見的名詞給予該字段的詳細解釋，同時滿足新手、普通、專家用戶的需求。
如果表格數據可以自我解釋，表頭就不是必須的。如電子郵件的表格，就不需要列標簽，因為發件人和郵主題的區分度比較高。
表格中所承載的數據信息才是主體，在進行表格設計時，尤其要注意去除所有非必要的視覺元素，讓用戶將注意力集中在數據信息上，而不是無關的邊框、底色等。所有的視覺元素應該為更好的幫助用戶閱讀而服務，除此之外，再精美的設計都是對表格的破壞。
去掉豎向分割線：水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數值的對比工作。
而豎向分割線的作用是即使縮減元素之間的距離也能區分不同元素，但如果使用了合適的對齊方式分，豎直分隔線就會很多余的。即使要用，也要非常淡，不能妨礙快速瀏覽。
不使用斑馬線：數據量不大且易分辨的情況下，斑馬線在很多時候也是沒有必要的，因為它們是同一類數據，而且水平分割線就已經能夠明顯區隔。
分割線的樣式盡量輕盈，無關的邊框不要搶視覺，數據才是主體，突出內容。
去掉不必要的裝飾和顏色，如icon、標簽等，雖然能夠幫助組織數據、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用。標簽能用線性就不用面性，做到輕盈，否則表格中最重的就是標簽。
在產品的品牌設計中，字體是規范中的重要一環。然而在設計表格時，簡約至上才是關鍵，盡量避免任何裝飾性字體。雖然文本不能夠建議你具體使用哪種字體，但數字建議使用Helvetica Neue、Helvetica等其他等寬字體，文本最好不要出現以下情況
不要出現襯線字體：因為個性會產生閱讀噪音，不利于用戶對數據的理解和思考。
不要出現全大寫字體：因為它很難讀，需要轉化思維。
不要出現使用斜體：易引起視線疲勞，影響閱讀。
不要出現多種字體：保持風格統一。
在開發同學的眼中，單元格高度=內容高度+上間距+下間距，在實現設計稿時，通常也是按照這個方式來寫的，而不是像設計同學一樣按照文字的尺寸來計算間距。其中，文字行高建議設為字號的1.5倍，上下間距設為字號的1.2倍。
當然，在很多很多通用化產品中，存在多個設備屏幕分辨率的差異，為了讓每一個分辨率下的產品都能夠有較好的展示效果，可設置舒適、標準、緊湊三種高度來滿足需求，提供切換按鈕讓用戶自己控制顯示密度。
合適的填充和邊距對于視覺設計至關重要，以保證易讀性。定義列的間距時，我通常的做法是N1保持不變，將N2定義一個最小值，N2再根據表格的寬度自適應變化。表格主要適配到這個最小寬度，這一步驟通常的設計系統的初期就要完成，一方面可根據自己項目目前情況，按照導航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時，可以有一個明確的邊界，同時能與開發同學進行理解溝通。當表格寬度大于頁面寬度，固定首尾列，左右滑動。
合適的對齊方式能夠提升數據的瀏覽效率。表格內信息的縱向列對齊（符合格式塔心理學中相近原則）能夠很好的形成視覺引導線。通過對齊，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。
文本左對齊：更的閱讀瀏覽順序，包括非比較型和固定長度的數字，如日期2020-12-04（補0是數字書寫規范）、編號1948696等；
數值右對齊：金額、長度、高度等，數字是從右往左讀的，通過數值位數的長短即可對比數值的量級和大小，方便數值的比對。這是因為在對比數字時，首先看個位，然后十位、百位等；
最后一列右對齊：通常是操作，即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個方方正正的格子，比較整齊；
當表格單元格中沒有相應數據時，要避免直接留出空白單元格?？瞻赘袢菀自斐捎脩舻睦Щ笊踔琳`解，用戶會搞不清楚到底是沒有數據，還是根本沒有值？正確做法是，數據不存在（數據庫中沒有該字段）用“-”，沒有數量（數據庫中有該字段）用“0”，且小數點后位數、單位，都要與上下單元格保持一致。
在Web端，數據量動輒上萬條，容易出現瀏覽器響應太慢或者瀏覽器內存溢出的情況。使用分頁器有哪些優點呢？
分頁可以緩解服務器的加載壓力，每翻一頁加載該頁的頁面，縮減單次加載的數據量來縮短等待加載的時間，從而達到少量多次的體驗。這就是為什么哪怕是移動時代了，很多表格還是使用分頁組件。
分頁可以跳躍查看數據，靈活性更高、步驟更短。
表格設計大原則是整張表不要超過一屏，每一頁的默認行數：10行以上，減少翻頁的次數。但考慮到每個用戶的使用習慣，在給出默認行的數量后，可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利。
當表格數據無數據時，翻頁控制按鈕不可見。
我在接手我們后臺產品之初，在對業務人員進行角色調研時就收到反饋到有些頁面非常難用，有些就很好用。為什么會出現這樣的情況呢？如下圖所示，被投訴的表格單操作項就有6個，一方面容易誤操作，另一方面左側的數據展示內容有限，易讀性很差。
對于單條數據操作頻繁的場景，我的方法是，當超過三個操作項時，將操作低頻折疊收起。這樣做的優點是界面簡潔明快，信息密度低，可以幫助頁面突出更加重要的信息，減輕空間壓力，減少干擾。
工作中常常會遇到單元格數據過多的情況，常見的方法有兩種：
定義一個單元格長度或字數限制，超過該范圍以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
多行顯示，這種方法讓平鋪直敘，讓用戶可以直接了當的看到所有信息，在B端使用層面上還是不錯的，但是超出三行就會擠占行高度，建議不要超過兩行，超出可“...”顯示。
數據過多時，單元格長度如何定義？超過哪個范圍“...”顯示呢？
定義長度的依據：根據業務字段，防重復。保證用戶在掃視的時候，對重要字段能快速區分、對比。
新增一條數據后，這條數據應該被放在表格的哪里呢？這是個和表格默認排序有關的問題。
表格數據應該默認按添加的時間排序，還是應該按某個字段的名稱排序？
如果我們默認按某個字段排序，比方說崗位列表里增加一條“廣深常溫B2C 叉車員”的字段，而首字母G的數據在表格中極大概率不靠前。這時就會出現一個問題，用戶要在茫茫數據中找到剛增加的那一條數據，或者用戶根本不知道自己增加的數據已經被插入在了表格里了，這會讓他們覺得自己的操作失敗了。
解決這個問題的一個方法就是按照數據添加時間排序，默認創建的在最上面，體驗上創建完反饋，馬上就出現了變化，且針對數據的操作頻率較高，方便用戶發現與查找。同時也可以用帶排序的表頭，讓用戶自定義排序。
前面內容降噪有講到盡量控制列數在7±2，非重點內容通過更深的入口查看，關于詳情查看可以分為跳轉和點擊詳情。
跳轉：把 ID、名稱等唯一性標志的字段加上超鏈接，直接顯示鏈接色或者開始不顯示，鼠標hover上去才顯示鏈接色，點擊可以查看該條記錄的詳情。
詳情：在操作列中增加“詳情”功能，點擊查看詳情。
關于表格詳情查看的展現形式，按可承載的信息量由少到多依次分為折疊展開、彈窗、抽屜、及新增頁面四種類型。
直接在表格里展開（可以是詳情，也可以是二級表格），無需打開新頁面即可查看附加信息，防止用戶迷失。
適用場景：信息量較少的情況
彈窗是一種中斷用戶當前操作并對其進行補充、或者對當前操作進行強制反饋的交互形式，需要用戶進行強交互，它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作。主要分為模態彈窗與非模態彈窗兩種形式：
通常這類彈窗只會在屏幕上短暫停留，幾秒就會消失，也因此用戶感受不到他的存在。它的缺點也非常明顯，展示時間較短，不適合展示重要信息、不能承載大量文案。在詳情查看頁面中并不適用，此處就不再進行拆解。
位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，彈窗才會消失。
優勢：通過全局的半透明黑色能夠讓用戶更加聚焦，集中精力去處理好當前事情，能夠通過透明度展示背景，讓用戶了解到自己并沒有離開當前頁面
劣勢：打擾用戶，感到強烈的中斷的感受
適用場景：數據詳情體量不大，頁面內容較輕時。同時，不需要參照上級頁面內容，有快速回退的訴求。
側滑抽屜相比彈窗減少了頁面層級和隔離感，有較強的連貫性，適合與原頁面具有連貫結構的內容的展示。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。可自定義上下左右四個方向，一般右側滑出最為常見。
適用場景：詳情頁的內容較多時，且有快速切換主體的訴求。
新增頁面幾乎是萬能的，無論頁面內容量是多少、頁面間是否連貫、以及使用頻率怎樣，都可以使用。新增頁面又分為：覆蓋當前窗口以及新窗口跳轉兩種形式，在場景上可以根據兩者差異進行選擇。
在詳情查看中，二級頁面使用頻率是非常高的，需要用戶在A與B頁面之間進行來回切換，這時候考慮頁面反復出現是否流暢，是否有切換成本的產生，本著產品效率至上的原則，新增的頁面建議新開一個窗口跳轉而非覆蓋，如下圖：
適用場景：當詳情頁承載內容過多且里面的操作相對復雜時。
數據操作主要是針對表格數據的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作。
單行操作也稱行內操作，常見的顯性與隱性兩種方式。顯性操作，操作項顯示在行內，直觀明了；隱性操作，鼠標懸停時才顯示操作項，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾
顯性操作，文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
隱性操作，如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可將所有的操作進行隱藏，當用戶鼠標懸停時進行展開所有操作。這種方式能上滿足用戶快速查看與編輯的需求，但是在實際使用中，用戶的初次使用門檻較高，需要有一定的學習成本。
適用于數據量較大的表格，通常把操作放在表外部上方，這樣操作更便捷，同時便于批處理和單個操作。批處理操作模式允許用戶對一行或多行對象執行操作，通常與復選框操作配合使用，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。
統攬全局，無需選擇數據內容即可進行的操作，常見的【新增】、【導入】操作。
三種操作：兩個在表格外，一個在表格內，那么很自然的我們會遇到一個問題，一個功能該放在哪呢？下面我通過一個案例來說明。
產品現狀：在HRM系統中，不同的權限使每行的數據擁有不同的操作項，而且這些操作因為視覺特征比較顯眼，容易分散用戶的注意力，且因表格空間有限，操作區的各操作項過于接近，誤操作率相對較高。
設計優化方向：
業務目標-提升數據操作效率 ；
設計目標-降低誤操作率，讓用戶聚焦內容；
設計策略-控制操作項的顯示數量，將操作項分類
習慣上我們會認為一行數據是對某一個對象實例的描述，比如在上圖表格中，一行數據是對某個待入職員工的描述，包括他的姓名、工號、在職狀態等等。所以表格內的操作也是針對這個對象的。
一般我會把一次只能針對一個對象操作的功能放在表格內，比如【詳情】和【編輯】，因為查看詳情不太可能一次查看多個對象，編輯修改信息也是。那么反過來，不屬于任何一個對象實例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因為批量操作需要對多行數據進行同時操作，也不是屬于單個對象實例的。以此為依據將圖中操作分類如下：
大家應該也有遇到過按鈕像案例中【刪除】、【入職生效】既可以作為行內操作，也可以作為批量操作的問題。作為行內操作，優點是更便捷，；表外作為是批量操作，這樣更方便的同時操作多個數據，但如果只是操作單個數據時就會增加用戶的操作步驟?；蛘邇煞N方式都提供，雖然更靈活但是會讓頁面比較冗余。
其實怎么選擇還是要根據具體業務場景來決定，首先判斷這倆操作是不是高頻功能。在我們的業務功能中，已入職和離職的員工在該頁面不能操作刪除，且【刪除】是相對低頻地，完全可以只提供單個刪除功能。【入職生效】作為高頻功能，與產品經理討論后提供行內操作和批量操作，選擇這個方案的原因是，該功能作為行內操作已上線運營了1年時間，移除會產生學習成本。
批量操作常見的擺放位置有三種形式。
方案一：和全局操作一起置于表左上方或右上方
因批量操作需要勾選左邊復選框，放置在表右上方不符合操作動效，本著效率至上的原則，此處不考慮放在右上方。
優點：操作項信息前置能清楚的知道有哪些功能，無需用戶記憶
缺點：但當批量操作較多時，會擠占頁面空間，導致操作按鈕很多，不易查找
方案二：默認不顯示，勾選激活后顯示于表左上方
優點：減少了相應的視覺噪音，業務拓展性強
缺點：有一定的學習成本，沒有勾選時不知道有該操作項
方案三：直接顯示于表左下方，但需勾選激活后操作
優點：上內容下操作，符合操作動線
缺點：和分頁放置一起不易于業務拓展
根據我司業務，綜合考慮后選擇方案三，放置于表的左下方。
單行操作根據操作頻率優先級為入職生效>詳情>刪除>編輯，其中編輯和刪除屬于低頻操作，可折疊隱藏。批量操作-導出也是低頻操作。最后定稿方案如下：
2B產品應該著眼于業務，本文是根據我司業務提供了一個表格設計基本指南，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。但是表格設計的原則應該是通用的：
從用戶閱讀表格的目標出發設計表格的內容和布局
從提高用戶閱讀速度的功能角度出發進行表格的視覺設計，避免過度設計
當表格指標、數據過多時，提供一些自定義的工具幫助用戶自助選擇出最需要的數據條目
文章來源：tob.design 作者：佩奇一只居
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在B端設計中，數據可視化是必不可少而且非常重要，越來越多的設計師需要和數據打交道，但是很多設計師不懂可視化當中不同用途的圖表規范，只是單純設計出好看的數據圖表，卻不能給用戶帶來更多的信息和價值。
因此掌握數據可視化能力是設計師必不可少的一個技能，然而目前國內互聯網對于數據的教學不夠全面，這讓很多B端的設計師很苦惱，所以今天我結合自己的工作經驗和大家分享一下--“數據可視化之圖表設計”，為大家梳理一套完整的數據可視化的框架，以及關于可視化設計的基本準則和規范。幫助大家理解什么樣的數據對應什么樣的圖標，了解顏色的意義，知道數據排版的要點。
將不可見的數據轉化為可見的圖形和符號，從中發現規律和特征，以獲取更多的信息和價值。
在當前互聯網的時代下，一頁圖可能對標一個龐大且復雜的數據表格，按照人類本身對圖的記憶遠大于對抽象文字的記憶，所以我們要學會讓數據說話，數據可視化除了“簡潔直觀”，還可有容易理解和記憶、傳遞信息更豐富的特點。
接下來我們開始思考如何制作數據可視化圖標？首先規范的流程是最好的前提，下面的工作流程結合我自己的經驗和日常企業的數據分析場景，找到了一個合適的參考，我們就可以步步為營，避免很多不必要的返工，保證設計質量和項目進度。
很多小伙伴在做可視化圖表設計過程中，肯定遇到過這樣的困擾，發現自己做完的圖標并未能準確表達自己的意圖，也無法傳達自己的意圖，圖表通常讓用戶看完困惑不已，主要問題出現在分析的維度沒有找準或定義的比較混亂，面對B端龐大復雜的圖標，同樣的一個指標的數據，我們從不同維度分析就會出現不同結果。用一句古話來形容：橫看成嶺側成峰。
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示（如下圖），他把數據的關系分成了4種類型，幫助我們去選出合適的圖表來呈現。
上圖向大家展示了數據分析常用的4個維度，我們在選定數據指標后，我們需要和數據產品經理溝通我們核心需求，是我們想通過可視化向用戶傳遞什么價值信息。上圖引導我們從“聯系、分布、比較、構成”四個維度更有邏輯的思考這個問題，我們在進行圖表設計時首先進行需求的分析，熟悉數據并且明確數據要展現出來的信息，然后選用合適的圖表來進行數據的展現。
聯系：數據之間的相關性
分布：指標里的數據主要集中在什么范圍、表現出怎樣的規律
比較：數據之間存在何種差異、差異主要體現在哪些方面
構成：指標里的數據都由哪幾部分組成、每部分占比如何
考慮到日常企業的數據分析場景，圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內容，對其進行了總結，重新整合成三個維度
圖表的作用，是幫助我們更好地看懂數據。選擇什么圖表，需要回答的首要問題是『我有什么數據，需要用圖表做什么』，而不是 『圖表長成什么樣』 ，根據數據選用合適的圖表展現來把數據的信息傳達給用戶。因此我們從數據出發、熟悉每種圖表的定義、適用場景、優缺點，從功能角度對圖表進行分類，這樣才能快速選擇合適的圖表。
（1）柱狀圖
定義：柱狀圖是一種以長方形的長度為變量的統計圖表。長條圖用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數據集分析。
特點：
1、這個分類不限于地區、品牌等，可以是一個時間周期；
2、數量控制在5-12條最佳；
使用建議：
（1）使用合適的寬度去適配柱條的寬度
當柱子太窄時，用戶的視覺可能會集中在兩個柱中間的負空間，而這里是不承載任何數據的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。
（2）不推薦采用全圓角
柱形圖可以有適當的圓角，全圓角則有可能歪曲可視化圖表的表達，用戶可能無法明確是圓心還會頂點作為峰值。
（3）不要使用非水平和豎直的文字標注，也不要使用轉行
有時坐標軸上的注釋文字會很多，所以很多人為了妥協，在小空間內顯示出所有的文字標注內容，而使用傾斜的文本，或者將文本轉行處理。
不要用過于復雜的設計形式，數據可視化的第一要義是簡單易懂，所以在遇到標簽文字過長時，可以采用將柱狀圖轉化為條形圖
定義：條形圖是用寬度相同的條形的高度或長短來表示數據多少的圖形。條形圖能夠使人們一眼看出各個數據的大小，易于比較數據之間的差別。當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合使用條形圖。
特點：
1、與柱狀圖類似，只是交換了X軸與Y軸位置；
2、多用于豎長的顯示區域，例如手機端、大屏的一側；
3、多用于top排行或分類名稱較長的情況；
4、數量一般不超過30條，否則易帶來視覺和記憶負擔
使用建議：
（1）采用有序排列，軸標簽右對齊
對多個數據系列排序時，如果不涉及到日期等特定數據，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數據。
可以通過升序或降序排布，例如按照數量從多到少來對數據進行排序，也可以按照字母順序等來排布?？傊?，按照邏輯排序可以一定程度上引導人們更好地閱讀數據。
（2）標簽直接顯示在柱體上
條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數值，來降低數據墨水比，進一步提高信息的獲取效率。
定義：用于顯示數據在一個連續的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數據是遞增還是遞減、增減的速率、增減的規律（周期性、螺旋性等）、峰值等特征。
特點：
1、橫軸如果不是表示連續數值，折線圖的意義不大
2、數量一般不少于3條，否則用柱狀圖更合適
使用建議：
（1）反映事物隨時間或有序類別而變化的趨勢
折線圖看的是趨勢，所有不是有序類別的不適合使用折線圖
（2）視覺美化
折線圖可以清晰的反映數據是遞增還是遞減，不能和面積圖累計的概念混淆，由于折線圖放在界面上的視覺重量很弱，所以我們可以通過添加微漸變加重視覺。
定義：面積圖又叫區域圖。它是在折線圖的基礎之上形成的, 它將折線圖中折線與自變量坐標軸之間的區域使用顏色或者紋理填充，顏色的填充可以更好的突出趨勢信息，需要注意的是顏色要帶有一定的透明度，透明度可以很好地幫助使用者觀察不同序列之間的重疊關系，沒有透明度的面積會導致不同序列之間相互遮蓋，減少可以被觀察到的信息。
使用建議：
（1）不要超過7個序列
當數據系列過多時，往往造成用戶難以觀察的痛苦，所以建議使用堆疊面積圖時數據系列最好不要超過7個。
分組條形圖屬于條形圖的一種，又叫簇狀條形圖，是一種以不同分組高度相同的長方形的寬度為變量的統計圖表，每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區別各個分類，各個分組之間需要保持間隔。
特點：
（1）適用場景
分組條形圖適用于表達相同分類不同組別的數據，或者相同組別不同分類的數據，簡而言之，就是根據一個相同變量的不同分組進行數據表達。
（2）不適用場景
分組條形圖不適合用于表達分組過多的，數據量較大的數據，也不適合用于表達趨勢類的數據。
定義：雙向柱狀圖又叫正負條形圖，是使用正向和反向的柱子顯示類別之間的數值比較，其中分類軸表示需要對比的分類維度，連續軸代表相應的數值。
定義：一種圓形直方圖，使用半徑長短表示數值大小。可以在視覺上夸大數據之間的差異。
特點：
1、由于面積等于半徑的平方，玫瑰圖會將數值之間的差異放大
2、南丁格爾玫瑰圖不能用于表示占比構成
3、數量：一般 不超過30條，否則易帶來視覺和記憶負擔
定義：雷達圖又稱為蜘蛛網圖、網絡圖，蜘蛛圖，星圖，是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數據的方法，所有這些方面都可以類似地量化，常用于排名、評估、評論等數據的展示，比如我們玩王者榮耀中英雄的各項性能指標。
特點：
1、指標得分接近圓心，說明處于較差狀態，應分析改進；指標得分接近外變現，說明處于理想狀態
2、數量控制在5-8個最佳
定義：對比分類數據的數值大小以及是否達標
特點：
1、可以通過標記刻度區間，來進行更好的評估
2、數量控制在10個以內
定義：由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關系，梯形面積表示某個業務量與上一個環節之間的差異，通過漏斗各環節業務數據的比較，能夠直觀地發現和說明問題所在，為決策者提供一定的參考。
特點：
適用于業務流程比較規范、周期長、環節多的單流程單向分析，不適合表示無邏輯順序的分類對比
使用建議：
（1）漏斗圖不是表示各個分類的占比情況，而是展示數據變化的一個邏輯流程，如果數據是無邏輯順序的占比比較，建議使用餅圖更合適。
（2）可以根據數據選擇使用對比色或同一種顏色的色調漸變，從最暗到最淺來依照漏斗的尺寸排列。切記，不要添加許多圖層和顏色造成漏斗圖難以閱讀。
定義：用于表示不同分類的占比情況，通過弧度大小來對比各種分類，將一個圓餅按照分類的占比劃分成多個區塊，整個圓餅代表數據的總量，每個圓弧所在的塊表示該分類占總體的比例大小，所有圓弧所在的塊組成的圓餅等于 100%，這樣可以很好地幫助用戶快速了解數據的占比分配。
特點：
1、可以通過標記刻度區間，來更好的評估
2、數量控制在10個以內
使用建議：
（1）餅圖適合用來展示單一維度數據的占比，要求其數值中沒有零或負值，并確保各分塊占比總和為100%
（2）餅圖不適合被用于數據的比較
定義：本質是將餅圖中間區域挖空
特點：
（1）餅圖的整體性太強，我們會將注意力更多集中在扇形的面積上，環圖則可以很好地避免這個問題
（2）建議分類數量不超過9個
使用建議：
餅圖更加集中面積，環圖會集中在角度和弧長上，所以我們中間的空間利用率還可以更好的利用。
定義：旭日圖（Sunburst）由多層的環形圖組成，在數據結構上，內圈是外圈的父節點。因此，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系。
特點：
1、旭日圖=N張餅圖
2、離遠心越近，代表層級越高
3、下一層級的總和構成上一層級
4、可以無限向外擴展
定義：堆積面積圖是一種特殊的面積圖，可以用來比較在一個區間內的多個變量。如果有多個數據系列，并想分析每個類別的部分到整體的關系，并展現部分量對于總量的貢獻時，使用堆積面積圖是非常合適的選擇。
特點：
1、適合表達總量和分量的構成情況
2、分類指標的縱軸起點，并不是從0開始，而是在上一個分類基礎上疊加
使用建議：
1、圖表有重疊的數據時，類別數量越多，重疊越多，因此可見度越低，所以不建議堆疊面積圖中包含過多數據系列.
2、堆積面積圖要展示部分和整體之間的關系，所以不能用于包含負值的數據的展示。
3、建議堆疊面積圖中把變化量較大的數據放在上方，變化量較小的數據放在下方會獲得更好的展示效果。
定義：堆疊柱狀圖是柱狀圖的擴展，不同的是，柱狀圖的數據值為并行排列，堆疊柱圖則是一個個疊加起來的。它可以展示每一個分類的總量，以及該分類包含的每個小分類的大小及占比，因此非常適合處理部分與整體的關系。
特點：
1、二級分類并不是按照同一基準對齊的
使用建議：
大多數的堆疊柱狀圖都是垂直繪制的，但是如果你的數據標簽特別長時，考慮更好地展示效果，可以選擇使用水平堆疊的方式。
定義：通過顯示正值（收入）和負值（支出）對總量的貢獻來顯示結果累積的過程，因為形似瀑布流水而被稱之為瀑布圖。瀑布圖通過巧妙的設置，使圖表中數據的排列形狀（稱為浮動列）看似瀑布懸空，從而反映數據在不同時期或受不同因素影響的程度及結果，還可以直觀反映出數據的增減變化，在工作表中非常實用。
特點：
1、過程值為正的時候，向上加；
2、過程值為負的時候，向下減；
定義：特殊高亮的形式顯示數據集中的區域和數據所在的地理區域的圖示。使用地圖作為背景，對數據的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小，將數據在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。
特點：
1、結合散點：位置坐標更清晰
2、結合飛線圖：表達起始點和目標點的鏈接或流向關系
使用建議：
（1）必須要有地理位置
（2）展現的通常是以某個地區為單位的匯總的連續信息
（3）當你用基于地圖的熱力圖的時候，顏色梯度變化一定是有規律的，一定根據數值遞增遞減來變化的，否則在視覺上產生錯誤引導
定義：數據點在直角坐標系平面上的分布圖，表示因變量隨自變量而變化的大致趨勢。
定義：氣泡圖是顯示變量之間相關性的一種圖表。與散點圖類似。在直角坐標系中顯示數據的兩個變量（X和Y軸）之間的關系，數據顯示為點的集合。與散點圖不同的是，氣泡圖是一個多變量圖，它增加了第三個數值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值?？梢酝ㄟ^氣泡的位置分布和大小比例，來分析數據的規律。
特點：
有一定的數據量是展現三個變量之前的相關性，數據具有3個序列、特征及相關值。
舉個栗子：
我們回歸到線下場景，我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪等，會發現里面售賣的雞蛋、生鮮類會比外面便宜很多，因為他們容易過期，屬于成本極高的食品，通過限購來讓他們引流，從而吸引更多的顧客來買那些成本低、單品收入高的商品。
最后給大家總結一下，首先我們拿到數據后先明確我們的使用目標，是讓用戶用最短的時間了解到數據帶來的信息，結合每個圖表的優缺點，選擇合適的圖表，從需求和目標出發，切忌盲目的增加和刪減元素，圖表的易用性大于它的美觀度。
以上就是本篇文章的全部內容，數據可視化是一門龐大系統的科學，關于可視化相關的知識還有很多沒有涉及到，例如可視化圖表的構成、圖表運用場景、數據可視化大屏等等，后續希望大家持續關注。
文章來源：tob.design 作者：佩奇一只居
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
伴隨技術的發展與人們需求層次的變化，新趨勢年年都有，有的新趨勢由于用的人多了，使設計作品逐漸飽和，慢慢失去了新意，有的趨勢則會為企業不斷地帶來靈感，產生更多的“化學”反應。
今天，TCC 情報局從這篇國外大神的趨勢里總結了 8 條影響 2021 年的用戶體驗設計趨勢，以及可能面臨的挑戰。只有充分利用這些趨勢來創造視覺表現力強且具有可用性的產品，我們設計的產品才可能被更多用戶接受并喜愛。
2020 年無疑對全世界來說都是面臨挑戰的一年，新冠疫情的爆發使大多數人都體驗了一把在家辦公的 “樂趣”（作為一名大學在職教師，我也終于實現了多年以來睜眼就能上班的愿望）。騰訊會議、騰訊課堂、釘釘幾乎成了每一位 “網紅”，不對，是教師電腦里的必備軟件。對于打工人來說，能夠在家與同事進行線上協同辦公，也成為了剛需。像 Teambition 這樣能夠實現多人協同辦公的工作學習套件，使人們不但做到工作進度的實時同步，還做到了在家也能 996（淚目）。
△ 基于虛擬現實 VR 和增強現實 AR 的會議軟件 Spatial
類似的辦公協作工具，在國外也廣受歡迎，Zoom 的股價在一年內上漲了 600%，Google 也加快更新了 Workspace 辦公效率套件。可見這些產品在未來將會取得進一步發展，創造出更為成熟的虛擬辦公生態系統。
△ 遠程協作已經成為工作中的一部分
△ Divan Raj 設計的遠程會議應用
△ Dmitriy Kharaberyush 對遠程會議系統 Zoom 進行了 Redesign
在設計領域，設計工具的協同性也是設計師們比較關注的話題，Sketch 的使用痛點便是協作的問題，尤其對于后疫情時代來說，人們意識到了在線協同辦公的重要性后，Figma 便以它驚艷的協同能力成功出圈，備受青睞，也成為了 Facebook 設計師們的御用工具。
△ 適合 macOS Big Sur 系統的全新 Sketch
增強現實（AR）和虛擬現實（VR）技術早已悄悄進入我們的日常生活，AR 上妝、VR 看房不再新鮮。2020 年，由于新冠疫情的影響，虛擬現實重新進入大眾視野，成為人們關注的重點。
△ 將 AR 技術融入線下實體書店
Facebook 對 VR 和 AR 也越來越重視，公司旗下也會推出 VR 旅行、三維藝術品創作、AR 室內設計和博物館等應用程序，還有用于教育的 VR 游戲等。
△ 博物館指南程序結合 AR 技術
尤其對于教育領域來說，虛擬現實技術所具備的仿真性、開放性和安全性的特點，不僅可以使學生在學習過程中身臨其境，還能打破時空限制進行集中教學，同時能模擬各種情景，不必擔心有安全隱患。
△ 直播課程 Unacademy Plus 提出應用 AR 技術的概念版
過去，人們一直認為虛擬現實僅是一項娛樂技術，比如手游 “陰陽師” 的 AR 召喚，使無數人想起當非酋的日子；大多數人首次接觸 VR 技術，也是在商場里偶然嘗試了類似 VR 大擺錘這樣的游戲，然后被嚇得連連尖叫（不是我）。如今，這項技術在各個領域的廣泛應用才是我們要討論的話題，其在醫療、教育和藝術領域實現的跨越式發展，成為必然趨勢。
△ 陰陽師 AR 召喚陣圖
相信在未來，將 AR 和 VR 技術融入更多的數字產品和服務，也會給設計師們的創作帶來無限可能。
在現代工具和技術的幫助下，設計師的工作流程得到了大大的簡化，智能化與生成式設計也成為一大趨勢。各大軟件開發公司也爭相推出了一系列智能化工具組，以幫助打工人們更快速的完成工作任務（也有可能是在跟打工人們搶飯碗）。這些智能化工具組可以分析大量現有數據，找出其特性，然后根據所提供的數據生產新的特性。這些工具可以幫助我們：自動生成多種布局，選擇視覺風格，生成演示模型、優化設計細節。
△ 設計團隊關注效率，使用組件化的協作方式
Sketch 中添加了顏色變量和組件視圖的新功能，使保持顏色一致性和使用組件變得更加容易。
值得思考的是，在技術越來越成熟和智能的現代社會，如何平衡所謂人工和智能呢？生成式設計不僅僅在幫助我們更的工作，另一方面，在未來也可能奪走本屬于我們的工作，畢竟 “鹿班” 的出現一度使 “美工們” 陷入恐慌。但是作為未來的設計師，我們必須相信，機器可以通過數據來相互學習，但它們還遠遠不能獨立思考，不能在美學、情感化等問題上與人類競爭，人類所需處理的問題，遠比機器要復雜。
△ 鹿班智能設計平臺
疫情期間，為了避免用手觸碰電梯按鍵，我們看到很多電梯都放置了紙巾、牙簽等物品，哪怕如今國內病毒有所控制，我們也已經習慣用鑰匙來戳一戳電梯按鍵。此后，語音聲控電梯在武漢防疫戰線調試運行。
眾所周知，科幻超英電影中，總會為我們展現未來世界的面貌，語音交互技術在此類電影中早已不是什么先進技術。早在 2014 年《超凡蜘蛛俠 2》上映之時，電影中就有個值得注意的小細節，女主角格溫（私心：超英系列最愛女主）所在的科技公司奧斯本總部的電梯，就可以通過語音交互來說出自己要去的樓層，同時還可以和漂亮的人工智能小姐姐對話。
△ 電影《超凡蜘蛛俠 2》奧斯本科技公司總部電梯內場景
△ AI 驅動的智能語音助手
除了語音交互，你們的身邊可能早早的就出現過體感交互的例子。例如微軟為 X-box 360 推出的外設周邊 Kinect，就采用了體感交互技術，操作者可以通過自己的肢體去控制系統，實現與游戲的互動。你只需站在大屏幕前，揮動手臂，即可完成一系列翻閱、確認等操作，回想一下，你有沒有在商場里見過對著屏幕過瘋狂切水果的熊孩子，體感交互技術正在慢慢跟上他們靈活的速度（年輕人不講武德）。去年 8 月，蘋果獲得了一項專利，該專利顯示或許有一天我們可以通過空中手勢來控制 AirPods Pro。
△ X-box 360 推出的外設周邊 Kinect
△ 體感交互助力 Apple watch，未來可能在表帶中也植入肌電傳感器
△ 硬件設備結合應用程序進行運動數據記錄
綜上，其實無論是語音交互還是體感交互，都不是新興的科技了，畢竟我們和 Siri 的罵戰都持續了好多年。但是相信到了 2021 年，伴隨便捷、安全、無接觸等后疫情時代的需求，無接觸式交互會得到更多廣泛的應用。
隨著 C4D 的大熱，3D 設計近幾年一直活躍在大眾視野中，目前大多應用在營銷活動、數據可視化、游戲等需要表達空間感和氛圍感的項目里，還沒有大規模的應用在日常的線上產品中。
△ 使用 3D 風格設計的游戲網站
△ Slava Kornilov 設計的車載導航系統
當 2020 年蘋果全球開發者大會發布了 macOS Big Sur 系統后，趨勢又產生了新的改變，Big Sur 中應用了大量新擬態風格的 3D 效果圖標。這一波操作必然是引起了大量爭議，期間涌現出一批對這套圖標進行優化的作品，擬物的熱潮就這么被重新點燃，3D 技巧細膩而自然的表現方式必然會引起大量設計師的關注。
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 3D 風格的蘋果系統圖標
△ Flu AR Fluent 儀表盤
△ 3D 空間展示數據
伴隨著 VR 和 AR 技術的發展，2021 年 3D 風格會更加流行，無論是從操作性，還是視覺效果的角度，3D 風格都可以產生極大的突破。得物 APP 等線上商城紛紛開通了 AR 虛擬試鞋的功能，幫助用戶在足不出戶的情況下體驗 “真實上腳” 的效果。
△ AR 試鞋的功能已經普及
△ 基于 AR 導航的線上商店
精彩的動畫故事會吸引所有年齡段的用戶，畢竟誰都年輕過，都喜歡充滿奇幻元素和大膽想象的畫面。在界面設計中加入動畫元素，使簡約的界面和有趣的動畫相結合，不僅能吸引用戶，還能增添互動時的新奇感。
△ 加載動畫可以充分發揮創意
奇特好玩的界面動效和微交互已經不算 2021 年的新趨勢了，但趣味動畫的其他應用方式仍值得我們探討。畢竟任何動態演示都能比靜態圖像或純文本更能清晰有效的傳達你的品牌故事，并讓人輕松的看進去（尤其你可能是個“閱讀障礙患者”）。
微軟的設計團隊常常用動畫技術制作宣傳片來展示公司的新產品，2020 年較為火爆的是關于 Fluent Design 的系列動畫，下面這條經典作品傳達了如何將 Fluent Design 引入到 Office 移動端軟件中，且共享相同設計元素。動畫演示巧妙的展現了新圖標元素的構成，輕快的配樂配合圖標們可愛的變形，可以單片循環一整天。
△ 將 Fluent Design 應用于移動端的動畫宣傳片
△ Fluent Design 宣傳片的劇照，采用 3D 動畫的元素
設計中的動畫應該是有目的和有意義的，不僅要賞心悅目，也要能夠解決問題或傳達概念。動畫最重要的目的是解釋、簡化和加速交互過程，讓用戶不經意間嘴角上揚。
2021 年，趣味的動畫不僅僅是一種純粹的裝飾和娛樂，其在設計中的廣泛應用將持續成為設計師們熱議的話題，好玩的動畫就在那里，看你怎么用了。
有一種工程量很大的設計趨勢，其頁面布局和交互操作都特別復雜，使用復雜的動畫、渲染、插畫，用創新的交互吸引用戶進行互動，鼓勵用戶不斷進行探索。這種風格常常被用在技術型或創意型產品的網站上，可以表現出科技感和獨特感，體現出公司或團隊的能力。
△ Nathan Riley 設計的概念網站未來反思
△ Berezhnoy Eugene 設計的數據星球
△ Senko Holographic 設計的網站首頁，鼠標移動可與頁面進行交互
采用這種趨勢設計的網站并沒有統一的風格，而是各有各的特色，每一個的交互形式都極其創新，因為制作成本較高，通常是針對品牌定制化，下面將推薦幾個優質的網站，小伙伴們可以自己去試一試。
△ 設計師 Louis Ansa 個人作品網站
△ 注重設計與科技結合的團隊 Letters
△ 科技公司官網 Farm
體驗后你會發現這類網站的視覺效果大多很驚人，交互方式充滿想象力。為了實現效果，團隊會產出高質量高標準的設計、投入大量的研發成本。當然，成也蕭何，敗也蕭何，特別的交互使頁面邏輯與我們常用的網站大相徑庭，吸引眼球的視覺使頁面繁瑣花哨，會導致信息難以順利傳遞至用戶。這違背了可用性原則和無障礙設計理念，如果想要使用這樣的方式設計產品，一定要在創新和可用性中找到平衡點。
在這個新時代，社會發展十分迅速，整體節奏都很快，互聯網產品的操作效率需要隨之加快，用戶體驗的每一步流程都要仔細斟酌，是否還能再精簡一些、再快捷一些，我們的目的是幫助用戶更的完成目標，因此輕量化體驗必然是永恒的課題。最明顯的例子就是登陸功能的簡化，從早期的賬號密碼，到后來的驗證碼登陸、第三方賬號登陸、人臉識別登陸，用戶已經不需要記住密碼，也不需要一步一步的輸入信息，一切都變得更加快速、更注重實用性。試想會不會有一天，人們一出生就得到一個永久賬號呢。
△ Surja Sen Das Raj 設計的極簡風 APP
不光是交互操作，界面的視覺風格也正朝著輕量化設計的方向前進，如果你一直在留意 Dribbble 熱門作品，會發現大部分都具備簡潔清爽的特點。極簡的配色和核心功能的突出，可以幫助用戶聚焦于重點信息；同時，我們可以結合信息層級的整合來降低用戶的外在認知負荷，進一步減少用戶的學習成本，使用戶更容易集中注意力；不僅如此，我們還可以適當為核心元素添加一些微動效，使界面更具有溫度感的傳遞操作反饋。
△ Akshay Devazya 設計的求職 APP，注重頁面 Z 軸的空間感
△ Dmitriy Kazarov 設計的極簡風官網
△ Choirul Syafril 設計的云存儲后臺界面
△ 可愛的微動效交互
隨著科技的飛速發展，輕量化可能是未來各個行業產品設計的趨勢。以游戲行業為例，從早期風靡的單機游戲到現在隨時可以面對面開黑的手游，主流玩家漸漸將自己的游戲陣地轉移到手機上，無論是畫面精致度還是游戲流暢感，手游都可以提供優質的體驗，今年火遍全球的游戲英雄聯盟也發布了手游版本。還有一個輕量化的案例，就是我們的小程序，微信、支付寶、百度紛紛發布了自家的小程序，我們已經可以在一個 APP 里使用多家公司的產品功能了。
設計趨勢是循環的。用戶體驗設計的新趨勢每年都會推陳出新，但也有很多趨勢，幾年后又會卷土重來，這也是為什么復古總會成為一種潮流。設計是手段，不是目的。 比起緊隨潮流，更重要的是理解趨勢背后的價值和意義， 創造有價值的設計作品，趨勢就會成為你的那陣東風。
文章來源：優設網 作者：TCC設計情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
元旦過后，新的一波工作又要開始了，我在開始準備新一輪匯報材料的時候突然想到了一個問題，不知道鐵子們在往年參加設計評審的時候，有沒有總被老板 diss 設計稿里“太空了” “不夠飽滿” 這些個問題呢？
我猜測應該 99%的鐵子經歷過，我也不例外，從校招進到第一家公司就開始被植入頁面需要利用好每一像素的理念，搞得像北京房價一樣寸土寸金，生怕被浪費了；思前想后為了大家不重蹈我的覆轍，所以新年的第一篇，咱一起來聊聊排版的問題：
如果你看過我過往的文章，也許會對我的排版多少有點印象，夸張的大字，極強的對比，還有一些微妙的層級關系。
坦誠的講，我的風格揉雜了 2 種設計體系 —— 瑞士風格 / 擬物風格；
1. 瑞士風格
整潔、嚴謹、工整、理性化、實用的特征是瑞士平面設計的精神所在；這種一絲不茍，傳達準確的風格，即所謂瑞士國際主義風格。簡單的說，由于 Swiss Design 這種風格簡單明確，傳達功能準確，因而很快得到世界范圍內的普遍認可，成為戰后影響最大的一種平面設計風格，也是國際最流行的風格，因此，又被稱為國際主義平面設計風格；
簡單的說，瑞士的這種設計風格典型的代表就是我們看到的雜志，其中有 3 個特點：講究網格 / 非常理智的克制顏色的使用 / 層級關系；有趣的是，審美和潮流是循環的，隨著時代的發展，越來越多的 app 開始重新挖掘出來瑞士風格并加以使用，比如我們 iOS 系統自帶的應用們，Spotify：
年少的時候，我經?？粗@些個 app 會不禁的問，為什么在沒有一張圖片的情況下還能如此好看？這些年終于明白了前人良苦用心：文字是內容，同樣也是構成；是信息，同樣也是裝飾；簡單可以理解為，不管在平面還是網頁亦或者是 UI 界面，在沒有可用的裝飾下，信息本身要承擔起裝飾和傳達的雙重功能，這就是瑞士風格的核心本質。
2. 擬物風格
iOS 是擬物的典型代表，網上對于這塊的講解已經過于飽和了，我也沒必要贅述；那么這一趴，來聊聊對我產生深遠影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷，潛意識里只不過是覺著把 iOS 的圖標畫的更漂亮了一點而已…
但當我打開下圖這個頁面的時候，我意識到我對擬物的理解還是淺薄了，第一次被光影的層次震撼到：
通過光影塑造了一個三維空間，讓整個畫面豐富飽滿，也打破了我幼稚的設計觀，PS.不管錘子科技現在如何，我依然敬佩 Paco / 方遲 / 羅子雄的設計團隊為這個行業做出的貢獻，respect！
毫無保留的說，我的設計就是二者的融合，以 層次對比 作為核心理念。
啰嗦了半天，趕緊進入正題；如果你是一名產品體驗設計師，一定聽說過 “奧卡姆剃刀” ，這個定律通常用在交互鏈路的設計上（意思就是在用戶路徑中沒必要的步驟，省了就完事了），“如無必要，勿增實體” 即簡單有效原理；
同樣，在嘈雜的視覺結構里，畫面也需要奧卡姆剃刀，當你在對畫面的飽和上困擾不已，并急于找到一些背景和紋理填充的時候，我建議你先冷靜一下…因為頁面的空虛未必是需要實體化的東西來填充的；上文有說過以 “層次對比” 作為核心理念出發，要區別于平面設計，營造一個立體空間，所以先理一下畫面結構：
通常來講，如果想要不平，把二維空間轉化成三維空間是必要的一步，需要在 Z 軸上下功夫；如果你恰巧也是一名攝影愛好者，可以想象下照相機的焦距和景深，工作原理是相同的，需要 前景 / 主體和背景 三個層次；當然，虛實的對比對信息的呈現和層次的拉開是極其重要的，這里需要通過景深來控制效果，你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到：
另外，空間的感覺想要被突顯，那么“光影和空氣”的價值就可以無限放大了，按照如上所說的結構，把內容和自然物質擺進去就好了，甚至可以做到舉一反三（比如不同顏色的氛圍，我就不展開了）：
整個 case 下來，你會發現用光來聚焦在信息上，自然而然就形成了我們說所得 “信息優先級”；有點時候空氣和光影的飽滿程度超乎你的想象，這種自然存在的物質可以很好的幫助畫面分層，以達到填充的效果，并不是一定要依賴于實體化的裝飾。
對了，如果你跟我一樣閑著沒事干的話，借用 keynote 的動畫效果做一個吊炸天的動效，一定可以成為匯報場上最靚的崽（注意：視頻有音樂）！
keynote 素材和視頻可在開頭/文末下載
本來不打算再開一個章節說這個，但還是覺著很有必要再說下（我好糾結），作為 PPT 來講，ta 的主要用途分為兩種：其一是給人看的，其二是給人講的；不管是哪種，盡可能的簡化文字，是對輸入者關愛；
以上圖為例（實名 diss 自己的作品），坦誠的講左邊的部分大多數觀者是不會有心思來看的，按照視覺系統的處理，這部分就會被當成一個“面”而被忽略掉，這種情況下右邊顯得有力很多，也能幫助觀者聚焦信息，所以還是那句話，能不寫的就別寫，能少些的別多寫，保持信息的密度也是設計師必要的職責之一。
想問一個問題，鐵子們覺著 UI 的本質或者作用是什么？從我個人的角度來講，UI 設計的本質就是對信息的整理歸類和編排，沒有什么比信息更重要，如果貿然為了飽滿加入一些裝飾元素，很有可能是本末倒置，得不償失。這就像喝酒一樣，喝醉很容易，但微醺的感覺才是最棒的，希望你能有個好心情迎接美好的一年～
文章來源：優設網 作者：負能量補給站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在當今互聯網快速發展的情況下，每個行業競爭都非常激烈，所以對于我們設計師而言，有時候項目的周期也非常緊迫，導致當我們接到需求時，很容易會遇到這樣的問題：需求方解釋不清楚，設計師不知道從何開始，對項目也是不了解，后面臨時想到什么就問什么，使我們工作效率低下，也會讓對方覺得你很不專業，做完的方案，需求方不滿意，改了又改，浪費了很多寶貴的時間。
那么我們如何在項目周期緊迫的情況下，通過有效的溝通準確的輸出運營設計方案呢？下面，我將和大家分享一些我在日常和需求方溝通的一些小技巧。
所謂有效的溝通，是通過聽、說、讀、寫等載體，通過演講、會見、對話、討論、信件等方式將思維準確、恰當地表達出來，以促使對方更好的接受，使雙方就某個問題可以達到共同認識的目的。
當接收到一個設計需求時，不要忙著動手開始做，要先去與需求方溝通清楚，如果少了前期的溝通，后期你可能會在無休止的改圖中，一點點的不僅失去了耐心，還磨滅了激情！
首先了解項目背景、活動的文案和玩法以及活動的目標及用戶人群。
根據活動的文案和玩法去網上搜索一些針對性的有啟發性的圖片案例作為參考，用來初探需求方的喜好，明確接下來該走的方向，最后達成對風格的整體認知。同時要整理好自己的設計思路。
隨時記錄
帶著前期準備的內容去和需求方溝通，把自己的一些設計想法給對方講清楚，這樣做能保證我們在和需求方討論的時候能做到心中有數，不會被牽著走！
與需求方溝通時隨時記錄在溝通中對方的想法，比如需求方想重點突出表現什么，想營造出什么樣的氛圍等。也可以記錄在討論中一些好的創意，再結合自己的思考運用到實際中。
「溝通過程中的 3 個小技巧」
先聽：這一階段很重要，一定要以求知的心態去了解需求，不要拿著一個自認為的結論去溝通，因為產品在提出需求時，也一定是經歷過多次推翻自己的想法，最后才選擇的這一版方案及玩法。
后問：這個時候有不明白或者沒有理清的地方要及時的提問，問題要明確，避免后期重復溝通。
再復述：將接收到的信息總結后與對接人復述，查漏補缺，確認下沒有出現任何的遺漏。
達成共識
前面的所有點都確定好了之后，這時候我們已經與需求方達成共識，就可以進行設計階段了。
下面我將通過實際案例，具體說一下我是怎么通過有效的溝通與產品達成共識，從而減少多次改稿的問題的。
項目背景：
此次雙 11 大促活動借助京東這一平臺，增加品牌的曝光度，吸引用戶下單，為業務線吸引更多的流量，促進轉化率。
頭圖文案：
活動的玩法：通過預售提前付定金，享受折扣這樣的活動方式來吸引用戶。
針對的用戶人群：用戶群體年輕，女性占比較高，超過 80%的用戶在 35 歲以下。
參考的搜集和對設計的想法
由對第一點的總結，得出設計目標：
參考圖的搜集:
了解完項目的背景，和對項目進行初步的思考之后，就可以帶著自己的想法和參考圖去找需求方溝通。
隨時記錄
給需求方看參考圖，他們對用 C4D 搭建場景的創意表示認同與支持，也很期待。
在討論時也說出了他們的訴求（這時候要拿小本本記下，好記性不如爛筆頭）：
達成共識
與需求方溝通完需求之后，心里有了方向和發力點，結合需求方的訴求和自己的思考，就可以胸有成竹的往下進行了。
這幾個步驟雖然看似簡單，但是做到了這幾項，產出的設計稿可以減少改稿的次數！
最終設計結果：
把需求方說的每個點都著重考慮到，以免等完稿的時候再修改。
最后我們來回顧總結一下
不管項目大還是小，每次做完都要去做一個總結復盤，把遇到的問題記錄下來，多思考是哪個環節出了問題，或者請教有經驗的同事,逐步優化自己的溝通流程。養成良好的溝通技巧，這樣對于在下一次接到新需求的時候不至于手忙腳亂，做到心中有數，這樣會大大的提高自己的工作效率！
如何有效溝通是一個需要長期去總結思考的事情，只要掌握方式方法，再經過刻意練習，就一定會有好的結果。
文章來源：優設網 作者：58UXD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
完美，不是因為沒有什么可以增加，而是沒有什么可以減少。
創建美觀、可用和的 UI 界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升 UI 設計的高級感。
在互聯網產品日趨成熟的今天，你會發現所有的 App 越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個 App 設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的 UI 設計。本節總結了 12 個簡單直觀的提升設計感的小細節，一起來學習。
在對 UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在 UI 設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
大多數的文本采用正常的字重（400 到 500，具體取決于字體）
對于需要強調的文字采用較重的字重（600 到 700，具體取決于字體）
△ 主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于 400，因為這一部分字體本身尺寸已經較小，低于 400 會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
△ 左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
陰影是 UI 設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
陰影不一定是黑色的，還有一種擴散陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在 UI 設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個 App 的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數 App 都是使用 iOS 規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D 立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。
Tab 是 App 設計中最常見的控件之一，它源自 Material Design 的設計規范?，F在很多 iOS 產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于 iOS 規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab 和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的 Tab 選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的 Tab 就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為 Tab 選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到 Tab 的設計上，既讓界面視覺，又進一步強化了用戶對品牌形象的認知。
在 UI 設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。
使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是 UI 設計中的常用手法。
在 App 中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數 App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類 App 中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
大多數 App 都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的 App 不應漏過任何的細節，我們可以以自家 App 的圖標風格為依據，對第三方圖標進行優化設計。
App 中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
圖片的質量影響著整個 App 的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低 App 的質感。在 App 設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
現在的 UI 界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。
1. 提示性文字
語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如 App 那些 push 推送通知，因為用戶每天收到的 PUSH 實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的 PUSH 文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。
2. 下拉刷新
下拉刷新是用戶在 App 使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。
下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如 uc 頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌 logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。
3. 頭像設計
個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。
現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。
4. 缺省頁化解負面情緒
通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。
5. 標簽欄微動效
情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。
6. 模擬用戶行為
如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。
情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。
再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。
7. 有趣的細節設計
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在 UI 設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開 B 站的鬼畜區長按這個返回圖標 10 秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回頂部」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！
有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的 ID 在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。
總的來說：UI 設計的“高級感”意味著在視覺層面要從細微之處著手，創造出精致富有設計感的畫面；另一方面要從情感化設計出發，使用戶與產品產生情感上的共鳴，獲得更高層次的使用體驗。
好的學習方式就是把日常積累的知識點匯總并講出來才能真正為自己所有，新的一年愿每位設計師都能繼續保持對設計&生活的激情和熱愛。希望這篇文章對你有所幫助。
文章來源：優設網 作者：印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為UI設計師，雖然現在做了很多項目，但是實際上每一次想要做好，過程都還是很痛苦的。尤其是前段時間，身心俱疲，時間、心情、精力都不在線。但恰恰接到的又是一個重頭的急活，產品方也不清楚自己想要什么效果，所以一開始改版的心路很渺茫。
不過也由于這次的經歷也讓我更加明白設計方法的重要性，越是短時間內，越需要理性分析。在實際工作中，產品有時候因為項目急需上線，給我們的時間會非常有限，根本沒有太多的時間去給你思考，就比如我這次，只有半天時間去思考設計。那么如此短的時間，如何提出有效的設計方案呢？
以這次為例，學習圈頁面剛上線不久，當時也是設計了許多方案，都被pass了，如下：
產品方提出頁面上方的發布按鈕需要重新設計，那我就要搞清楚具體是誰提出的意見，為什么要重新設計，這樣才不會讓自己處于完全被動狀態。
由于項目剛上線，數據庫也因為某些原因還不能檢測點擊和轉化量，無法得知哪種按鈕點擊量高。產品方也不清楚想要什么效果，需求方向不明確就著急去動手設計，那對于設計師來說無疑是效的，問明白需求后再通過競品分析、產品體驗、用戶喜好等方式去突破。
所以接下來需要我們主動出擊引導產品方，得出一些需求具體的方向。那怎么去引導？反向思維法，既然需要改動的是不確定的，那么我們可以確定那些不需要改動的地方——通過排除不需要改動的，來確定需要改動。
需要排除的是：整體頁面排版布局、按鈕設計方向（扁平、立體、簡潔、卡通等方向）、動效方向、背景（顏色元素）。
通過溝通后明確的是：
在第一版時已經對相關競品做了分析，基本是一個純色背景上加一個具象化大按鈕，發布功能使用加號、筆、照相機等元素來制作按鈕，原則：按鈕凸顯，背景元素比較少。其實按鈕如果用照相機這種結構復雜點的元素去設計會更有方向，但是我們左上角會有拍米幣的功能，用相機會更直接一些，而加號筆畫過于簡單，可延展性不強，所以改版的話最終決定還是使用鉛筆作為圖標設計元素。
關于整體顏色方向，上一版顏色設計原理是背景用產品主色（藍色）+白色按鈕，不過產品方提出太過冷靜，一開始我想用色肯定要跟整個app的主色相關呀，就跳不出藍色背景的思維，后來決定先跳出來，配色思維反過來，背景不局限在主色，按鈕及周邊裝飾元素可使用產品的主色。
時間緊急，當時想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍紫色（據研究，紫色也是小學生最喜歡的顏色，性別傾向相對偏弱，在色環上是藍色的鄰近色，協調又會有對比。）
在設計前，我先在心里大致分了兩個設計方向：
以下便是常規大按鈕設計稿：
非常規按鈕設計稿
在嘗試的這期間，對于有疑問的地方一定要跟需求方及時溝通，及時反饋，確保自己的設計在功能上沒有遺漏。比如我這次，是通過詢問一個產品經理，才得知，按鈕上需要加文字，才在后面加上了。
大體方案出來后，通過優缺點分析對比，同產品方選出最適合的方案。
1. 常規按鈕設計稿
優點：容易被用戶所熟知，用戶的學習成本低，更容易點擊
缺點：對于小學生來說吸引力不夠，形狀上偏規矩，不夠活潑，另外上方第一個元素稍微有一點搶主角的光環
2. 非常規按鈕設計稿
優點：配合動效會更有吸引力一些
缺點：用戶的學習成本比較高
通過對比，大家一致傾向非常規按鈕，那就在氣泡與星球這兩者中選出最終方案。在APP的任務頁面也有星球的按鈕，用戶已經對星球有了一定的點擊感知，減少了學習成本，最終選擇了星球。
優化方向：
1. 顏色調整
現在看著球跟背景區分不是很明顯，整體偏灰，需要加強對比，球的顏色需要調亮調純。我們看下色環：
90度以內的鄰近色，搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍紫色的鄰近色：紅色或者天藍色，如圖：
紅色的球雖然跟背景拉開了對比，但是過于鮮艷，大家反應有點類似于心臟。
所以相對來說藍色的球比較適合，也跟APP的主色相呼應。
2. 細節元素調整
球的環境色過于明顯，需弱化一些；周邊增加幾個小球，四周邊緣的球太搶，也需要弱化 ；文字“寫一寫”由常規字體改為大一點的手寫字體：
3. 添加動效
鑒于上線版本的動效反饋說不明顯，按鈕點擊感偏弱，所以這次動效優化點需要凸顯星球本身。第一想到的就是呼吸效果，但是只有一個呼吸有點單一，周邊可以添加一些社交鼓勵的元素，如鮮花、笑臉、太陽，動效一開始想著是從球兩邊飛出來，但是經過對比就參考了直播送獎勵的形式，相對來說輔助性稍微好一些，視覺上不會過于太搶主角，如下最終呈現結果：
如果有限時間內想要讓需求方得到滿意方案，所以以下兩點我覺得是挺重要的：
好啦，文章寫到這里，如果大家有更好地意見也歡迎留言
文章來源：優設網 作者：麥芽糖
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn