數據可視化已迅速成為在網絡上傳播信息的標準。它用于各種行業，從商業智能到新聞，幫助我們理解和傳達見解。
我們的大腦善于處理可視化信息，這使我們更容易理解圖表或圖形中可視化的數據，而不是表格和電子表格中列出的數據。一個偉大的數據可視化應該利用人類視覺系統的優勢來呈現數據，以便數據被吸收和理解。它應該考慮用戶對視覺處理的了解，提高并簡化用戶的數據體驗。
目前有很多工具和框架可用于構建這些圖形，是時候回歸基礎了。是什么讓數據可視化有效？在設計數據時我們應該遵循哪些指導原則？
以下最佳實踐將幫助您設計豐富、有洞察力的數據體驗。
可視化是用于揭示模式的，提供上下文并描述數據中的關系。雖然設計師對給定的一組數據集中的模式和關系沒有任何影響，但她可以根據用戶的需求選擇顯示哪些數據以及提供怎樣的語境。畢竟，就像其他產品一樣，如果用戶無法使用它，那么可視化就毫無意義。
為小白用戶設計的可視化應該是結構化的、明確的和有吸引力的。他們應該用文字直接說明受眾應該從數據中得到什么。
轉換雙親的工作時間：媽媽VS爸爸
來源：https://flowingdata.com/2016/04/20/parent-work-hours/
另一方面，面向專家用戶的可視化可以顯示更精細的數據視圖，以驅動用戶探索和發現。細節和數據密度應該簡單明了。
工作來來往往：國民失業
來源：http://graphics.wsj.com/job-market-tracker/
這是一個發人深省的數字：《紐約時報》網站上只有10-15％參與可視化交互的訪客實際點擊了按鈕?！都~約時報》的圖形團隊制作了一些業內最好的作品，但幾乎沒有人與他們互動！
這表明，關于交互可視化設計，我們不能依賴交互來建立理解。關鍵數據不能隱藏在交互元素后面，而應該在沒有交互的情況下可見。
然而，什么樣的交互比較好呢？允許整合更多數據（否則可能被排除），以允許感興趣的讀者更深入地研究數據集。Nathan Yau 的流動數據已經壟斷了這種交互式可視化風格市場，正如他關于死亡原因和預期壽命的圖表中所展示的那樣。
2005年至2014年的死亡率數據：死因如何因性別和種族而異
來源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引點，一個引發關注的點，可以讓你的讀者在遠遠地瀏覽之前，親自參與該項目?？纯?Quartz 這款有趣的書寫和文化作品。這件作品首先要求讀者簡單地繪制一個圓圈——在繼續文化形態的分析概述之前——畫出簡單而有效的可視化的特征。
畫圓圈的方式說了很多關于你的故事
來源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
同樣， The Pudding 最近發布了一個交互式可視化軟件，向讀者講述有關生日悖論的知識（生日悖論，指如果一個房間里有23個或23個以上的人，那么至少有兩個人的生日相同的 概率要大于50%。）。雖然大多數非統計學家可能會發現生日悖論，這是概率論中的一個標準問題，非?？菰锴也恢庇^，但這種可視化使得它看起來簡直令人著迷。創作者融入最近的用戶互動的方式使得整個體驗非常具有關聯性。
生日悖論實驗
來源：https://pudding.cool/2018/04/birthday-paradox/
這兩個交互式示例都起作用，因為它們允許讀者參與數據且不需要通過交互來理解。
視覺突出性，使視覺元素從周圍環境凸顯的特性，是數據可視化的強大工具。它可以用于引導用戶注意可視化中最重要的信息，以幫助防止信息過載。通過使用視覺突出一些細節并壓制其他細節，可以使我們的設計更清晰，更容易理解。
一些視覺變量——顏色和大小——是我們創造和控制視覺顯著性的關鍵。
色彩方案是優秀的數據可視化的關鍵。眾所周知，色彩特別擅長打破偽裝。我們可以使用溫暖，高飽和度的顏色來突出關鍵數據點，并應用冷色調，使用低飽和度的顏色將不太重要的信息放到背景中。
2014：最熱的年份
來源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/
尺寸也很明顯。較大的元素比較小的元素更有吸引力，因此要擴大您希望讀者首先閱讀的元素，并縮小不太相關的文本和元素。
Cleveland 和 McGill 在信息可視化方面的著名工作，研究了視覺編碼的有效性（即數據維度與視覺屬性的映射）。他們根據人們對視覺編碼的準確感知程度，對不同類型的視覺編碼進行了排序，給出了以下（簡化的）列表：
這對數據可視化設計的意義在于，我們顯示定量信息的首選應該是按位置進行編碼（如經典散點圖和條形圖所示）。與基于角度（如餅圖）或基于區域（如氣泡圖）的編碼相反，基于位置的編碼有助于觀眾在更短的時間內進行更準確的比較。
然而，這并不是說所有可視化都必須是條形圖或散點圖。在研究可視化數據的新方法時，牢記這些原則是個好主意。
我真正想要強調的是，顏色不應該用于編碼定量信息，而是應該用來編碼分類信息。也就是說，我們可以使用顏色來表示屬于不同類別的數據。
出生時的預期壽命
來源：http://www.vizwiz.com/2017/11/life-expectancy.htm
5.使結構元素像刻度線和軸一樣清晰但不顯眼
無論你是否支持 Edward Tufte 在設計中極簡主義的極端方法，都要幫自己一個忙，從你的圖表中消除視覺上的混亂。通過在數據元素和非數據元素之間創建可視化對比，來讓您的數據大放異彩，就像 Nadieh Bremer 在他的獲獎作品“美國出生時間”中所做的那樣。
嬰兒潮：白天工作時間出生高峰期
來源：https://www.visualcinnamon.com/portfolio/baby-spike
刪除不起任何作用的結構元素使數據清晰（如背景、線條和邊框）。減弱必要的結構元素（如軸、網格和刻度線），否則這些元素會與您的數據爭奪注意力。網格為淺灰色，最寬設為0.5 pt，軸為黑色或灰色，最寬設為1 pt。
編碼數據的每個元素都需要進行標記，以便讀者理解它所代表的內容。簡單吧？
錯。太多設計師依靠圖例來告訴讀者哪些符號或顏色代表圖表中的哪些數據系列。列舉圖例雖然對設計師來說很容易，但對讀者來說卻很難。它們迫使讀者在圖例和數據之間來回掃描，給讀者的記憶帶來不必要的壓力。
更好的方法是直接在圖表上標記數據系列。這往往更像是一個挑戰，但是，嘿，你是設計師。你的工作就是做這項工作，以便于讀者不必這樣做。在下面的例子中，Nathan Yau 完成了避免使用圖例的工作，創建了一個帶有大量直接標簽的小型交互式多重顯示。
每人每日平均消費量
來源：https://flowingdata.com/2016/05/17/the-changing-american-diet/
7.使用消息傳遞和視覺層級創建敘事流程
最好的可視化講述著引人入勝的故事。這些故事來自數據中包含的趨勢、相關性或異常值，并且由于數據周圍的元素而加強。這些故事將原始數據轉化為有用的信息。
從表面上看，似乎數據可視化完全與數字相關，但一個偉大的數據故事是無法用語言來講述的。信息傳遞具有清晰的視覺層次，才能一步一步地引導讀者閱讀數據。
例如，可視化的標題，應該明確闡明一個關鍵觀點，使讀者領會。分散在數據中的微小注釋，可以通過異常值或趨勢引起讀者注意，從而為關鍵觀點提供支撐。
來源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html
我在這里要說的是：幫助讀者，確切地告訴他們在數據中尋找什么！
正如我剛才提到的，我們可以在可視化中使用注釋來幫助創建數據故事的過程。有時我們可以添加圖形元素來使這些注釋更有意義，以便將這些信息更直接地關聯到我們的數據。
以這張來自 Susie Lu 的圖片為例?！跋募敬笃焙汀皧W斯卡季”的數據重疊賦予了原本看似隨機的高峰和低谷以意義。它們幫助觀眾理解數據的重要性，比單獨使用字幕或注釋更直接。
2015 - 2017.08 票房趨勢：強大的開場和后期的爆發
來源：https://susielu.com/data-viz/box-office
靜態可視化通常以 JPG 和 PNG 等位圖圖像格式發布，這對移動端用戶來說是一個明顯的挑戰。許多數據可視化的美妙之處在于它們的視覺細節——微小的數據點和微妙的編碼——而這些細節許多在靜態格式的小屏幕上被丟失了。
例如：Accurat 工作室在諾貝爾獎上的精美復雜的作品，在印刷和高分辨率視網膜顯示器上看起來非常棒的全尺寸，卻在移動設備上幾乎難以辨認。
視覺數據
來源：http://giorgialupi.com/lalettura/
為移動體驗設計，或者使用像 D3.js 或 Highcharts 這樣的 JavaScript 可視化庫構建響應式可視化，或者為印刷、桌面和移動設備多種載體創建相同的靜態可視化設計。
我今天談到的所有最佳實踐可以歸結為一件事：在復雜性和清晰度之間找到合適的平衡，以滿足受眾的需求。
制作精美的、探索性的可視化細節總是誘人的，但這不一定是最合適的方法。在設計圖形時要考慮周到 ，讓讀者的知識和目標決定應該包含哪些數據以及包含多少數據，并整理數據以講述您想要講述的故事。
原文標題：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB
原創作者：MIDORI NEDIGER
原文鏈接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/
翻譯作者：桃花果
授權獲?。簭堩餐?/span>
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
作者：三分設 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
推薦 | 科技的不斷發展將給未來的界面設計帶來更多的可能性。復雜的語音界面、先進的 AR 或是真正沉浸式的 VR 都會被實現。而科技的進步也對設計師們提出了新的要求。在更加重視體驗的未來，設計師們應該作出何種創新以應對變化呢？尼克·索薩尼斯曾在其著作《非平面》中寫道：“要走出平面與狹窄，我們需要萬花筒般千變萬化的視角，我們的維度性和不斷變化的能力才得以展現”。希望此文中提供的視角能給設計師們帶來啟發，跳出傳統屏幕的平面來思考未來的界面設計。
快速摘要：
當改變來臨，我們總傾向于自然而然地抵制它。我們所擁有的唯一真正的界限，就是我們的大腦告訴我們，事情最好保持原樣。在本文中，Gleb Kuznetsov 分享了他的一些想法和觀點，即在不久的將來，界面會是什么樣子，以及我們能夠期待何種非凡的體驗。關鍵詞：虛擬現實，用戶交互，用戶體驗，用戶界面
在我們做決策的過程中，情感起著至關重要的作用。一秒鐘的情感便能改變用戶體驗產品的整個現實過程。
人類是一種由情感驅動的物種。我們選擇一款產品并不是因為它有何意義，而是因為我們認為它能夠給我們帶來何種感受。未來的界面將會在產品設計的基礎上使用情感概念。人們的使用體驗將基于智商 ( IQ ) 和情商 ( EQ ) 。
本文試圖展望未來，看看未來十年我們將設計什么樣的界面。我們將詳細研究三種交互媒介：
未來的界面將是什么樣子？雖然我們現在還無法回答這個問題，但我們能夠探討未來的界面可能具有哪些特征。在我看來，我確信我們最終會擺脫那些充滿菜單、面板、按鈕的界面，并轉向更加“自然”的界面，即擴展至我們全身范圍的界面。未來的界面不會被限制在物理屏幕中，而是會借助五感的力量。正因如此，它們需要更少的學習曲線①——理想情況下，根本沒有學習曲線。
①學習曲線：在一定時間內獲得的技能或知識的速率，文中指面對未來的界面，用戶需要更高效的學習速度，甚至無需學習即可掌握界面的使用方法。
除了使體驗更加自然并減少學習曲線之外，對產品創造者來說，情感設計還有另一個益處：它提高了用戶對產品的采用率。利用人類對情感的反應能力來創造更好的用戶參與度是可能的。
使用語音功能作為主要界面交互方式的產品正變得越來越流行。我們之中有很多人使用 Amazon Echo 和 Apple Siri 來安排日常活動，例如設置鬧鐘或安排預約。但是，目前市場上可用的語音交互系統中，大多數仍具有一個天然的局限性：它們并沒有將用戶情感考慮在內。結果便是，當用戶與像 Google Now 這樣的產品進行交互時，他們有一種在與機器而不是真人交流的強烈感覺。系統的反應是可預測的，并且它們的響應是腳本化的。與這樣的系統進行有意義的對話是不可能的。
但是目前市場上也有一些完全不同的系統。其中一個是 Xiaoice（ 微軟小冰 ），一個社交聊天應用程序。這個應用程序的核心是情感計算框架；其理念是，首先要與用戶建立一個情感連接。Xiaoice 可以動態識別情緒，并通過給出相應回答的長對話來吸引用戶。結果，當用戶與 Xiaoice 交互時，他們感覺是在與真人進行對話。
Xiaoice 的局限在于它是一個基于文本的聊天應用程序。很明顯，如果是基于語音的交互，你可以獲得更強烈的感受（ 人類的聲音具有不同的特征，例如音調可以傳達出強大的情感 ）。
微軟小冰跨平臺人工智能機器人圖片來源：https://www.msxiaobing.com/
很多人已經通過電影 《 Her 》（ 2013 ）看見了基于語音互動的力量。Theodore （由 Joaquin Phoenix 扮演的主角）愛上了 Samantha （ 一個復雜的操作系統 ）。這也讓我們相信，未來語音系統的主要目的之一便是成為用戶的虛擬伴侶。這部電影中最有趣的事是 Theodore 從未見過 Samantha 的視覺形象——他只能聽到她的聲音。要建立這種親密關系，必須產生能夠反映出和虛擬伴侶性格一致的回應。這將使系統既可預測又值得信賴。
電影《Her》海報
圖片來源：https://movie.douban.com/photos/photo/2166850749/
要實現像 Samantha 這樣的系統，科技還有很長的路要走。但是我相信，語音優先的多模式界面將是語音驅動界面發展的下一篇章。這樣的界面將使用語音作為主要的交互方式，并在上下文中提供附加信息，以創造和構建連接感。
為 Brain.ai 設計的語音界面實例 （圖片來源：Gleb Kuznetsov ）
AR 體驗的演變
增強現實（ AR ）被定義為在現實世界基礎之上進行的數字疊加，并將我們周圍的物體轉換為交互式數字體驗。我們的環境變得更加“智能”，用戶在指尖產生一種“有形”物體的錯覺，從而在用戶和產品（或內容）間建立更深層次的連接。
AR 的獨特之處在于它給予我們一種與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西，這有助于我們更加了解我們周圍的環境。這種AR屬性幫助設計師使用熟悉的概念創造新層次的體驗。
例如，通過使用移動 AR，可以創造一個全新水平的飛行體驗，它允許乘客看到有關她的班次或當前飛行進程的詳細信息：
AR 展示空客 A380 的飛行體驗。（圖片來源：Gleb Kuznetsov ）
AR 幫助我們找到穿越空間的方式，并一目了然地獲取所需要的信息。例如，AR 可以為你當前的位置創建豐富的提示。SLAM 技術②在這方面有著出色的表現。SLAM 允許環境的實時映射，并能將多媒體內容置入環境中。
②SLAM 技術：（ Simultaneous Localization And Mapping ） 同時定位與地圖構建技術，指機器人在未知環境中從一個未知位置開始移動,在移動過程中根據位置估計和地圖進行自身定位，同時在自身定位的基礎上建造增量式地圖，實現機器人的自主定位和導航。
AR 有很多機會為用戶創造價值。例如，用戶可以將他們的設備對準建筑物，并在屏幕上了解該建筑的更多信息。它能夠顯著減少工作量，并通過導航和訪問功能使用戶獲得輕松的情感體驗。
在環境中提供附加信息（ 圖片來源：Gleb Kuznetsov ）
我們周圍的環境（例如墻壁或地板）也能成為交互的場景，在過去這僅限于通過智能手機和電腦實現。
下面的概念正是如此，它使用物理對象（白墻）作為畫布，來表現那些通常用數字設備來傳達的內容：
互動墻的概念——現實世界之上的數字疊加（圖片來源：Gleb Kuznetsov ）
在一個名為 “HYPER-REALITY”（ 超真實 ）的一個網站中，作者 Keiichi Matsuda 制作了一段視頻。視頻中物理世界和數字世界已經合并，用戶被大量信息淹沒。
視頻：
https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be
科技允許我們同時顯示幾個不同的對象。但是當它被誤用時，很容易造成過載。
信息過載是一個嚴重的問題，它會對用戶體驗產生負面的影響。避免信息過載將成為 AR 設計的目標之一。設計良好的應用程序會借助 AI 的力量將那些與用戶無關的元素過濾掉。
當系統根據用戶的需求和期望來實時管理內容和功能時，數字體驗的個性化便會發生。很多現代移動應用程序和網站使用個性化的概念來提供相關的內容。例如，當你瀏覽 Netflix 時，你看見的電影列表都是基于你的興趣進行個性化推薦的。
AR 眼鏡能夠創建新的個性化水平，即“高級的”個性化水平。由于系統能“看見”用戶所看見的內容，因此可以利用這一信息來提出相關建議，或在環境中提供附加信息。想象一下，你很快就將戴上 AR 眼鏡，并且傳輸到你視網膜的信息是根據你的需求量身定制的。
視頻：
https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be
AR 體驗具有天然局限性。作為用戶，我們與內容之間有一條明晰的界線，這條線將一個世界（ AR ）與另一個世界（現實世界）分離開。這條線讓人感覺 AR 世界顯然不是真實的。
你可能知道如何去解決這一限制，即使用虛擬現實（ VR ）。當然，VR 確切來說不是一種新媒介，但直到最近幾年，科技才達到能讓設計師們創造沉浸體驗的高度。
沉浸式 VR 體驗移除了真實世界與數字世界間的屏障。當你戴上 VR 耳機時，你的大腦很難分析出你接收到的信息是否真實。電影《 頭號玩家 》（ Ready Player One ）很好地解釋了在不久的將來，VR 體驗會是什么樣子：
視頻：
https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be
以下是設計師們在創造沉浸式虛擬環境時需要記住的幾點：
1.寫一個故事有意義的 VR 在其核心有一個強大的故事。這就是為什么在你開始設計 VR 環境之前，你需要為用戶旅程寫一個故事。“故事板”這一強大工具可以幫助你完成這一工作。使用故事板，可以創造一個故事，并檢查所有可能的結果。當你檢查你的故事時，你將看到何時以及如何利用視覺及聽覺線索來創造沉浸式體驗。
2.與角色建立更深層次的連接為了使用戶相信 VR 世界中他們周圍的一切都是真實的，我們需要在用戶與其扮演的角色間建立聯系。最明顯的解決方案之一是，使用戶的手部表現成為虛擬場景中的一部分。這一表現應該是實際的手——而不僅僅是一個被操縱的復制品。考慮不同的因素（例如性別或膚色）是至關重要的，因為這讓交互更加真實。
用戶可以看到他或她的手，并看到自己作為一個角色出現（來源：leapmotion ）
為了建立此連接，也可以將現實生活中的物品帶到 VR 環境中。例如，一面鏡子。當用戶看向鏡子并看到其反射出他們自己的角色時，用戶和虛擬角色間的交互會更加真實。
VR 用戶看向虛擬的鏡子，并在 VR 環境中看到他自己的角色。致謝：businesswire
3.使用手勢代替菜單
當設計沉浸式 VR 體驗時，我們不能依賴傳統的菜單和按鈕。為什么呢？因為顯示菜單比較容易打破沉浸感。用戶將會知道他們周圍的一切都不真實。設計師們需要依靠手勢來替代傳統菜單。設計界依然在為手勢的使用制定通用語言，參與這項活動是有趣且令人興奮的。但棘手的部分是如何設計出用戶熟悉且可預測的手勢。
Hovercast VR menu 是將現有的交互概念重新用在 VR 體驗的一次嘗試。不幸的是，這個概念會打破沉浸感。新的媒介需要一個新的交互模式。
4.與 VR 環境中的元素交互
為了創造一個真實的環境，我們需要使用戶能夠與現實中的物體進行交互。理想情況下，環境中的所有物體都可以被設計成允許用戶觸摸和觀察它們的模式。這樣的物體會起到刺激作用，并幫助你創造更具沉浸感的體驗。觸摸對于探索環境非常重要，嬰兒在剛出生的那些天接收到的最重要的信息便是通過觸摸獲得的。
5.在 VR 中分享情感
VR 真正有機會實現社交體驗的新高度。但為了實現它，我們需要解決一個重要問題，即將非語言的提示帶入交互中。
當我們與他人進行交互時，我們獲得的信息中有很重要一部分來自肢體語言。驚喜、厭惡、憤怒——所有這些情緒都在我們的面部表情中。在面對面的交互過程中，我們通過眼睛的區域來推斷信息。當人們在 VR 環境中互動時，為了創造更加真實的交互，提供此信息是非常重要的。
好消息是，頭戴式設備（ HMD ）很快就將涵蓋情感識別。在虛擬現實中，幾乎所有人與人之間的互動都受益于面部表情。
在 VR 空間中分享情感（來源：MITReview 的 Rachel Metz )
6.為 VR 環境設計合適的音效和音樂
音頻是沉浸式體驗中的重要組成部分。如果不為環境設計音效，就不可能創造出真正的沉浸體驗。聲音既可以被當作背景元素（即環境中風的聲音），也可以是指向性的。在后一種情況中，聲音可以作為提示使用——通過播放具有方向性（聲音來自哪里）和距離（可以將用戶注意力集中在特定元素上）的聲音來提示用戶。
在為 VR 設計音頻時，制作 3D 音效是基礎。2D 音效 VR 中表現不佳，因為它讓一切都顯得太平。3D 音效可以使你聽到來自四面八方的聲音——前、后、上、下——任何地方。你不需要使用專門的耳機來體驗3D音效，通過頭戴式設備的標準立體揚聲器便可以實現。
頭部追蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現是至關重要的。這就是為什么當用戶移動他的頭部時，聲音應該根據頭部移動而改變。
7.預防暈動癥
暈動癥是 VR 的主要痛點之一。在這種情況下，視覺感知的運動與前庭系統③的運動感知之間存在分歧。在體驗VR的過程中，使用戶保持舒適是至關重要的。
③前庭系統：前庭系統是人體平衡系統的重要組成部分，它具有特殊的感受器，能夠接受適宜的刺激，經過與其他感覺信息（如視覺信息、其它本體覺信息）的整合、加工等處理后，再經多條神經通路把這些信息傳送到腦內更高層次的中樞，進行高層次的加工處理。
關于VR中導致暈動癥的原因，以下是兩種主流理論：
根據這一理論，暈動癥的發生是由于預期運動與實際經歷的運動在感官上不一致。
在《 The VR Book: Human-Centered Design For Virtual Reality 》一書中，作者 Jason Jerald 提到，暈動癥的發生是由于眼球的非自然運動，而這是保持場景圖像在視網膜上穩定所必需的。
以下是一些提示，有助于避免用戶使用嘔吐袋（避免暈動癥的發生）：
當我們考慮產品設計的當前狀態時，很明顯我們僅看見冰山一角，因為我們局限于平面屏幕。我們正目睹人機交互（ HCI ）的根本轉變——重新思考數字化體驗的整體概念。在接下來的十年中，設計師們將打破這層玻璃（我們今天所知的移動設備時代）并轉向未來的界面——復雜的語音界面、先進的 AR 和真正沉浸式的 VR。當創造新的體驗時必須要明白，我們唯一的界限是我們的大腦總告訴我們，應該保持原樣。
原文標題：Designing Emotional Interfaces Of The Future
原創作者：january
原文鏈接：https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/
翻譯作者：阿欽
授權獲?。簭堩餐?/span>
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
作者：三分設 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
我經常想，如何花費極少的精力避免可用性錯誤。在做了這么多項目之后，我意識到在我準備設計一件東西之前，我犯了很多常見的錯誤。當我專注于設計時，可用性問題已經悄無聲息地形成了。它們在我的工作流程中扎根，現在我正試圖改變我的工作方式。
在這篇文章中，你可以了解以下內容：
幾個月前，我設計在線商店的時候，閱讀了如何避免可用性錯誤的相關文章。幾天后，我一遍又一遍地發現同樣內容的舊文章。顯然，它們都故意收集了同樣的錯誤：經常出現并容易避免的錯誤值得反復提及。
問題是，它們似乎是臨時性的解決方案，因為我項目的基本屬性每周都在不斷變化——信息架構、導航機制等所有東西。我每周都在尋找新的技巧，所以我決定尋找可用性錯誤的本質，而不是一種避免它們的方法。
可用性錯誤排序的低效性
識別可用性錯誤需要花費很多時間。它以消極的、妥協的方式影響有效性、效率性和便利性。一個小問題可能會讓用戶在完成任務時感到不愉快。巨大的問題甚至會讓你無法完成任務。 在本文中，我將把它們稱為不正確的設計選擇。
可用性錯誤會影響用戶便捷、高效或有效地完成任務
問題在于可用性問題有許多不同的形式和嚴重程度。那么為什么不對它們進行分類和優先級排序呢？ 它不能那么混亂，對嗎？不久前我就是這么想的。在混亂中創建秩序會非常有意義，但是當涉及可用性錯誤時，這個概念就失敗了。
制作群組或列出最常用的群組并不能提供有效的解決方案。為什么？ 用戶體驗設計不斷變化，并且有多個變量。想想在過去二十年中我們與界面交互的方式是如何變化的。
我們已經從顯示器轉移到小型移動屏幕，而平板電腦和帶有圓形屏幕的智能手表則拓寬了這一領域。而這只是以一種更復雜的方式去看待一個變量。
也就是說，在不斷變化的設計領域，任何規則或原則都不會永遠存在。這意味著查找和排序最常見的錯誤只是一個臨時解決方案。這可能行得通，但不會持續太久。為了給用戶體驗設計遙不可知的未來做好準備，請查看您的工作流程以獲得最終答案。
幾年前，沒有人會對設計一個可以從屏幕底部向上滑動即可訪問的購物車功能感到驚訝。2017年，iPhone X 誕生了。從那時起，大多數用戶都使用此手勢（指滑動手勢）進入主屏幕。
資料來源：support.apple.com
我以前不會瀏覽設計趨勢，以免影響自己。我僅僅檢查情緒板和配色組合，完全忽略導航結構和其他用戶體驗解決方案。我相信在看過流行趨勢中的解決方案之后，我們會下意識地放棄我們的創新想法。
經過這么多年，整個概念在我腦海中浮現。忽略當前的用戶行為模式和技術變化，您雖然不會讓自己暴露在犯關鍵設計錯誤的可能性中，但你也會錯過所有其他的機會，使你的設計真正有用。
好的，所以你要規劃未來用戶的行為，你就必須堅持到底。進行探索性訪談作為一種良好的開端，提出問題并發現痛點和欲望背后的動機為您提供了完美的素材：背景信息。
在設計界面時，這將成為寶貴資源。 它產生的數據量可能看起來很可怕。您可能會發現很難駕馭或使用，但里面總是隱藏著無限的可能性。
找到一個可行的方法獲取一些有趣的背景信息。如果您沒有時間進行面試，請查找類似產品的案例研究，從中找出結果。 看看現有的基準研究或類似產品的成功特征。 雖然不完全相同，但它們可以為您提供一些幫助。在考慮設計線框圖之前進行此項研究，可以讓您為用戶設計。
3.消除你的偏見
我正在設計一個食品配送應用程序，想要試驗一下按鈕的位置，這個按鈕可以把你帶到餐館的完整列表中。 我通過幾次測試嘗試了很多變化，但沒有引起太多關注，因為用戶還有其他幾種方法可以做到這一點。盡管接下來的測試進行得很順利（這樣受試者就能完成任務），但這種體驗仍然不能讓人滿意。找出問題的癥結所在是個難題，因為他們無法確定問題（反正不是他們的工作）。
幾天后，我正在看著我的女朋友在一個完全不相關的網站上訂餐。我注意到她是如何避免定制的套餐和推薦的餐館。她說它們看起來像廣告。她認為主頁是一個受控制的環境，所以她進入了餐館列表，在那里她可以在不受控制的情況下對它們進行排序和過濾。這是我項目的關鍵：控制。我在測試期間錯過了這點，因為我對用戶應該如何使用應用程序有一種偏見。
做出風險設計決策的最簡單方法是什么？清醒的意識到您的桌面和移動設備用戶想要如何使用您的產品。為用戶構建而不是告訴他們應該如何思考，總是變得更容易。宏觀看待目標群體期望如何與產品交互，將幫助您創建直觀的界面，同時簡單地避免關鍵錯誤。這是一筆很好的交易。
設計師證明自己和他們設計的用戶一樣人性化。雖然很難，但我們必須接受這個事實。這個微小的錯誤至今仍困擾著我。接受你的錯誤，尤其你是完美主義者。我們不可能一直十全十美。
此外，我們無法避免較小的可用性問題，沒有人可以在設計時不考慮這些問題。它們只是過程的一部分。當然，使用各種經過驗證的實踐或（在這種情況下）改進工作流程有助于避免關鍵問題。但我們很可能無法解決與滿意度相關的不便。因為我們以獨特的方式感知世界，所以我們期望結果和行為不同。
5.理解你的錯誤并加以改進
分析出了什么問題和錯誤的原因。了解糟糕的設計選擇背后的原因比錯誤本身更重要。這讓我們回到簡單地排序可用性錯誤“低效性”的問題。如果你能說出你為什么一開始就犯了錯誤，那么無論平臺或觀眾如何，你都可以避免在未來犯同一個錯誤。
追溯你的錯誤可能會讓在工作流程中養成習慣（或相反，缺乏習慣，從而導致很多麻煩）。就我而言，使用假設進行設計會導致許多小的可用性問題。反過來，它們以明顯妥協的方式影響了整體用戶體驗。所以我寫這篇文章。把你的錯誤視為你工作方式的副產品，這可以幫助改進方法，擺脫并根治問題。
6.驗證您的更改
然而，單獨根除錯誤并不能減少錯誤。就像設計和測試一樣，重建工作流也需要驗證。我們只需通過各種后續技術來做到這一點。您可以選擇是向客戶發送簡單的電子郵件，創建完整的問卷，或是進行另一輪測試。確定獲得有關工作的相關信息的最有效方式取決于您的項目和客戶。
獲得關于工作的反饋，以了解改進的程度。通過這種方式，您可以衡量更改的有效性并對其進行微調，以便在第一輪不滿意時獲得更好的結果。此外，它也為你的簡歷錦上添花，但這只是獎勵。
以下沒有特別的順序，我通過改進您的設計工作流程來提高可用性。相反，它們提供了一個指南，告訴我們應該在哪些地方派上用場。 讓我們快速回顧一下：
我仍然試圖將這些技巧正確地整合到改進您的工作流程中，并且需要花費很多時間去精確的設計。但我的產出已經感覺更具戰略性和準備性。 我希望它對你也有幫助。
原文標題：Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer
原創作者：Sándor Zelenka
原文鏈接：https://uxstudioteam.com/ux-blog/usability-mistakes/
翻譯作者：shmilyJ
授權獲?。?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:inherit !important;">張聿彤
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
作者：三分設 來源：站酷
全局導航
1、導航欄可折疊收起菜單。
2、收起時，鼠標懸浮在圖標上同時右側彈出菜單欄，然后觸發菜單文字。
1、根據tab的層級來確定位置，最高層級在上，不同流程層級在下。
Tab在上：用戶明確自己想要查找的目標在哪個tab并且需要一眼看到所有概況（想要查找數據時，直接到對應的tab下查找）。
Tab在下：需要看到查詢的結果在各tab下的分布情況。
1、篩選區包括搜索項、查詢、清除查詢；如果搜索項超過一行時，需要「展開、收起」按鈕。
2、折疊展開設計：默認顯示一行將使用頻率高、覆蓋面廣的1-3個顯示出來其他的隱藏。（用戶頻繁使用的篩選條件能一眼找到）。
3、按鈕固定在最右側不變，搜索項可進行自適應。
4、篩選條件：
1、功能性按鈕和批量操作（比如新增、導入、導出...）
2、根據使用頻率進行排列新增＞導入＞導出；使用頻率高的操作采用高亮顯示。
3、如果按鈕太多可進行操作項分類。
1、在能夠概括的情況下，盡量簡練、準確，一般可根據上下文關系進行簡化，以達到節省表格頭部空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。
2、對于比較復雜的表頭，可以跟一個釋義標識，鼠標懸停時出現該字段的詳細解釋。
3、表頭篩選、排序功能
提供表頭篩選功能，依據用戶關注度最高的字段進行排列。
需結合業務場景具體分析，一般來說，編號、時間、價格字段，提供正序、倒序功能。
考慮用戶第一次進入列表頁的初始化狀態，保證用戶進入頁面時大概率能直接看到自己想要的東西。
表體
包含多選列、數據列、操作列
特殊處理操作的按鈕、字段優先級、狀態可以前置，方便一目了然。
1、全部展示（缺點：利用滾軸滑動次數太多用戶視覺容易疲憊）。
2、較長字段用“…”展示，防止字段重復，對重要字段進行快速區分、對比（優點：每行可顯示較多的信息 缺點：想要看全信息，只能鼠標移入字段出現氣泡顯示完整信息）。
3、換行，保持行高不變，改變文字距單元格的上下間距，最好不要超過3行，多余字段用”…”顯示（優點：盡可能顯示全部內容 缺點：同2）。
4、字段優先級分類，做折疊展開設計（篩選信息層級較高的字段放在表格欄，次要信息放入二級表格）。
5、數據庫中沒有該字段，用“-”，數量用“0”后邊有小數點、后位數保持上下單位一致。
1、讓用戶將注意力放在數據信息上，而不是表格底色、邊框
2、不使用斑馬線設計、分割線樣式輕盈、去掉不必要的裝飾和顏色
基于業務、基于場景
比如用戶以處理訂單為主，操作項建議放在第一列，方便用戶操作。
如果用戶以查看信息為主，操作項一般放在最后一列。
可以采用下拉框設計
1、行高=文字行高+上下間距
2、文字行高可以設定為字號的1.2~1.8倍，上下間距可以設定為字號的1~1.5倍；行高影響每行信息的易讀性。
3、一般行高為32-56px
1、采用8px網格作為基礎單位，來定義各組件和模塊間距，因為目前主流桌面設備屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比較普適。
2、最好列數在7±2
3、對齊方式：文本采用左對齊，金額及跟金額相關的百分比、操作項采用右對齊
一頁最好能在一屏展示，避免用戶來回上下滾動，比如固定為展示10條。
用戶特殊使用需求，不適用以上規則，一頁可能展示10條/20條，都可以。
作者：YOgire 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~模塊化設計，簡單地說就是將產品的某些要素組合在一起，構成一個具有特定功能的子系統，將這個子系統作為通用性的模塊與其他產品要素進行多種組合，構成新的系統，產生多種不同功能或相同功能、不同性能的系列產品（定義內容來自百度百科）。
模塊化設計思維最早可以追溯到從工業革命時期，工業革命之后制造業開始飛速發展，制造業能夠飛速發展得益于生產效率的大幅提升。在設計產品時采用“模塊化設計思維”，是提升生產效率的一個很重要的手法。
產品設計中對“模塊化設計思維”的應用也是制造業現代化的一個很重要的標志和特點。到了互聯網時代，“模塊化設計思維”也被應用在了操作系統、app的開發過程中，也大大提升了軟件工程師的開發效率。
“模塊化設計思維”是一個思維方式或者說是一個設計手法，這個“手法”可以應用在很多領域。
我們日常生活中所用到的稍微復雜一點的產品，如飛機、汽車、家電、手機、操作系統等等，都是在以“模塊化設計思維”為基礎的設計手法中設計出來的。
“模塊化設計思維”應用最徹底的行業當屬「汽車制造業」了。從汽車要素的組件化、汽車架構的模塊化到生產平臺的模塊化，可謂是應用的非常徹底。
例如：豐田汽車的「M20發動機」用在了凱美瑞、C-HR、威蘭達、亞洲龍、RAV4榮放、奕澤這些車型上，在這里「M20發動機」就是一個“通用性的模塊”經過與其他汽車要素進行不同的設計組合，就形成了不同的車型。
豐田汽車的「TNGA架構」也是“模塊化設計思維”的產物。在TNGA構架下，汽車模塊會達到高度的通用性，車輛零件的通用率可達到70%-80%，其中包括底盤懸架、發動機、變速箱等零件。
采用“模塊化設計思維”設計出來的“模塊”有兩個顯著的特點就是「獨立」「通用」。
在設計時需要選擇可以獨立的內容來進行“模塊化封裝”。怎么理解「獨立」呢？判斷模塊是否可以獨立，可以組成的模塊是否“可以進行單獨設計、開發、調試”不依賴其他要素即可運轉。
通用這個特點就比較容易理解了，就是該“模塊”可以與其他要素進行多種組合，形成不同類型、不同功能的產品。
采用“模塊化設計思維”來進行產品設計，有什么優勢呢？
高內聚低耦合，是軟件工程中的概念，是判斷軟件設計好壞的標準。目的是使程序模塊的可重復使用性、移植性增強。通常程序結構中各模塊的內聚程度越高，模塊間的耦合程度就越低。
內聚是從功能角度來度量模塊內的聯系，表示模塊內部間聚集、關聯的程度。那么高內聚就是指要高度的聚集和關聯，元素之間的關系簡單、明了，運行穩定。一個好的內聚模塊應當恰好只做一件事，高內聚具備可靠性、可重用性、可讀性等優點。
耦合是對模塊間關聯程度的度量，也就是模塊之間的依賴關系。低耦合度特性的模塊能減少模塊間的影響，防止對某一模塊修改所引起的“牽一發動全身”的水波效應，保證整個系統的正常運行。
由于模塊具有通用性特點，需要用到此功能模塊時無需重復設計，可以直接使用或簡單微調即可，減少了“重復造輪子”現象的發生。
這樣一來可以降低生產設計的時間成本和財力成本，二來時可以很大程度的提升產品設計、生產制造的效率。
通過上述內容“模塊化設計思維”的好處顯而易見，那么作為設計師在系統設計中應該怎么應用呢？這里容易陷入一個誤區就是為了模塊化而模塊化，模塊化設計需要在工作中去積累、抽象出可以進行模塊設計的內容。
首先一定要充分的了解整個系統，系統的業務屬性是什么，系統的功能有哪些（可以使用腦圖梳理出來），然后站在“上帝視角”去觀察整個系統，將具有「獨立」「通用」特點的內容抽離出來進行“模塊化”。
下面從「交互」和「UI」的角度來看兩個系統中比較常見的例子
下圖為「手機驗證碼驗證」交互流程圖，「手機驗證碼校驗」流程可以用在登錄、實名認證、修改密碼、查看修改重要信息等功能中，是一個常見的可“模塊化”的內容。
下圖為近期涉及的一個系統中的「搜索頁面」，系統中有很多搜索場景，例如：地址搜索、店鋪搜索、品牌搜索、人員搜索等。通過對功能和使用場景的分析，將「搜索頁面」進行了模塊化設計。
“模塊化設計思維”是一種提高工作效率的設計方法，需要各位在日常設計中嘗試著換一種角度來觀察系統。也要充分的理解“模塊化設計思維”的定義才能夠用好它，它并不是一個萬能的方法，只有用在合適的地方才能體現出其價值。
作者：群青被注冊 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~在 UI 的設計體系中，圖標是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門 UI 設計的必備條件。
網上現存不少關于圖標繪制的文章和教學，但不是太籠統，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認知中對它有比較全面、系統的認識，所以大多數初級的 UI 設計師，始終畫不好圖標。
針對這個問題，我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法，讓所有設計新人更快的上手圖標設計。
本文共分為以下5個部分：
1. 圖標設計詳解：先對圖標有個整體的認識，了解圖標總共有哪些類型和應用場景。
2. 工具圖標設計：最常見的工具型圖標的相關規范，以及對應的設計案例演示。
3. 裝飾圖標設計：近年來使用越來越廣泛的視覺型圖標設計認識，以及對應的講解。
4. 啟動圖標設計：講解啟圖標的相關規范，如何高效的進行設計。
5. 圖標應用詳解：介紹在一個UI項目中，要應用多少種圖標規格，并如何設計出正確的圖標
圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI 設計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關鍵元素之一。
在當下最常見的扁平化設計風格中，界面的實際視覺組成只有 4 種元素，圖片、文字、幾何圖形、圖標。
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標，是 UI 設計中除了插畫元素以外唯一需要我們 “繪制”、“創作” 的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如下圖中的 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好地設計圖標？
這就涉及對圖標作用的探討了，為了節約篇幅，更快進入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了！就談對于圖形界面本身，為什么圖標有這么重要的地位，沒它不行。有兩個原因，第一就是，文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜了，在識別效率上有先天的劣勢！再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
第二點， 就是關于視覺的觀賞性上。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來總感覺太枯燥了，不得勁，最好的例子就是應用的設置頁了，見下方案例。
既然知道了圖標的作用和重要性，那么接下來，就要進一步了解在工作中我們要設計哪些圖標。
可以先劃分成三種大類：
? 工具圖標
? 裝飾圖標
? 啟動圖標
下面，我們將為對它們分別進行介紹，以及展示相關的設計類型，方便讀者在開始學習具體設計前，對 UI 設計會創作的圖標有更全面的認識。
1.1 工具圖標
首先，我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。作為最常見的圖標類型，我們就不需要做太多的說明了。
雖然理解起來容易，但是它所包含的設計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進行細分。
風格1：線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的！多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。
下面我們把它們統一羅列出來。
風格2：面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
風格3：混合風格
當然，在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。常見的樣式類型如下。
1.2 裝飾圖標
和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。
比如在分類列表里，是可以只使用線框和文字把大量內容濃縮到一屏以內，但實際瀏覽效率并不會增加，而且并不美觀。
還有，就是國內的界面設計環境，會根據運營的設計需求進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。
裝飾性的圖標設計，雖然沒有明確的規范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進行介紹。
扁平風格
扁平風格的裝飾圖標，通?？梢岳斫獬墒怯帽馄讲瀹嫷姆绞疆嫵鰜淼膱D標，除了繼承扁平的純色填充特性以外，也相對于普通圖標有更豐富的細節與趣味性。
擬物風格
擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。
2.5D 風格
2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用 2.5D 會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。
炫彩漸變
這是一個拗口的原創名詞，找不到更合適的，還是覺得浮夸點符合它的氣質。這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。
使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。
實物貼圖
最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要再后面掌握它的做法。
1.3 啟動圖標
最后，就要說說啟動圖標了！啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把 “LOGO嵌套進系統圖標模版” 的圖標。
除了必要的規范掌握以外，啟動圖標的主體物設計就是 LOGO 的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。
文字形式
適用了文字作為圖標主體物的類型，通常是這類應用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
圖標形式
對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。
圖形形式
圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。
插畫形式
對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。
擬物形式
雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。
當然，還有其它的數之不盡的啟動圖標設計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了！
前面介紹的三種圖標，就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單，但可以玩出的花樣不少。除了正確設計出圖標以外，高低階的 UI 設計師之間的區別也包含圖標設計類型掌握的多寡。
所以，在開始學習前，不要將設計圖標的目標局限在最簡單的圖形繪制上，還有很多有趣的設計形式等待你們去嘗試。
了解了圖標的類型，就要開始了解做出這些圖標應該使用哪些軟件了！通常，UI 主要使用的設計軟件包含 PS、AI、Sketch、XD 四款，理論上，它們都包含了圖標繪制的功能，如果我直接告訴大家去精通這 4 款軟件那么畫圖標就一點難度都沒有了，這是非常不負責任的，所以為了對新人更友好一點（如果已經全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標設計的優劣，以及需要掌握的部分。
Sketch/XD
這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創作和繪圖。
雖然它們都包含路徑、鋼筆、布爾、等功能（Sketch 相對 XD 更完善一點點），想要繪制一些非常基礎的線性或面性圖標時沒有問題，但只要涉及到比較復雜的圖形，往往就束手無策。
所以，我建議所有學習 UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現一些簡單的圖標時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應用決定了我們圖標設計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款無論什么東西都設計得出來的設計軟件，但是，它本質上是一款 “位圖軟件”。后續的文章中會提及，在界面中采用矢量格式的圖標是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復制到其它軟件中。
實際項目中，我們會用 PS 設計一些視覺表現相對復雜的圖標，例如啟動圖標、擬物圖標、實物圖標等等。
繪制圖標需要用到的 PS 功能并不太多，需要在前期學習這個軟件的過程中加以篩選，重點是以下知識點：
? 路徑創建和調整
? 鋼筆工具和錨點
? 路徑圖層
? 布爾運算
? 圖層屬性
雖然 PS 在實際項目中是用來畫復雜的圖標，但并不妨礙我們使用 PS 從最基礎的圖標開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標是最好的磨刀石，之后再學習 AI 的操作，就可以更快的上手。
PS：最近在準備一套 PS 教學，就會比較完整的講解一遍這些功能和對應操作。
Adobe Illustrator
AI 也是 UI 設計必學的一款軟件，它的功能異常豐富，主要用來設計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細節的調整上，是最全面最細膩的軟件，并且 AI 中的圖形還可以直接復制黏貼到其它應用的畫布中。
如果掌握了上方提及的 PS 基礎，那么學習 AI 也就輕松了不少，其中，AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的：
? 形狀生成器
? 輪廓化描邊
? 路徑查找器
花幾個晚上，掌握了 PS 和 AI 的相關知識點以后，就可以為我們后續的學習提供良好的支持！
但是現在還不要迫不及待地打開軟件，在實際上手操作繪制圖標之前，我想先講講規范。
是的，現在還不到實操的時候，規范之于畫圖標，就好像音標之于學英語，都是基礎中的基礎，也都是大家最容易忽略的東西。
如果對規范沒有一個清晰的認知，那也是無法獨立畫好一套圖標的！希望讀者千萬不要跳過這部分的講解直接去看演示了。
3.1 表意的準確性
在第一部分中，我們知道圖標的主要作用之一就是作為文字的替代品，具有明確的寓意。比如看見一個放大鏡，我們會當成那是搜索，看見鑰匙或者鎖，我們就會理解成是密碼，比如下面這些圖標，每一個指代的功能和寓意都是非常直白、清晰的。
表達的寓意清晰，是工具圖標最基本的要求，否則它只會傳遞錯誤的信息，造成用戶的困惑。
在常見的圖標類型里，如通知、設置、用戶、分享之類的圖標，對于任何手機用戶來說都沒有認知和選擇壓力。但表意準確麻煩的地方在于，一些非常規的寓意，極難用圖標表現出來，這才是我們使用工具圖標的首要麻煩。
比如下方這些圖標，如果我不加上文字信息，大家能理解它們是什么嗎？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我們再把文字信息補充進去，是不是就會覺得圖形挺貼合內容的。
在這種案例中，我們要關注的就是，面對這樣不常見的內容，設計師是怎么把圖形的創意和樣式想出來的！如果自己遇到一樣的問題怎么辦？
所以，除了知道每個工具圖標都要表意準確這樣 “正確的廢話” 以后，我們該看看如何通過合適的創意將圖標樣式確定出來。
一般抽象的圖標，難點在于寓意信息是非實體的，所以我們很難直接構建對圖形樣式的聯想，所以首先我們得想辦法將抽象的內容 “實體化”。也就是說，我們可以先把這個詞寫到紙上，然后把和這個抽象信息相關的所有實體物寫下來。
然后，我們可以挑選出某個合適的實物，以它作為原型開始繪制。如果對這些挑選出來的實物要以什么圖形表現還是沒概念，那就可以借助網上的圖標素材網站，比如 iconfont、iconfinder 等，在搜索框中輸入這些詞語，通過別人的設計收獲靈感。
如果本身擁有比較好的手繪基礎或是平面基礎，也可以直接通過對照片進行提煉的方式，設計出圖形內容。
所以，在設計圖標時符合表意準確的概念，需要設計師不斷收集圖形，并提升對詞匯聯想的能力。很多圖標圖形優秀的創意，就是在這些基礎的積累之上逐漸形成的，而不是一撮而就。
3.2 圖標的一致性
第二個規范，叫圖標的一致性。即一個或一套圖標中，應該保持一致的細節。首先看看下面的反面案例。
在上面的案例中，不同圖標間有很大的割裂感，完全不像處于同一套設計體系之下，這就是缺乏一致性的表現。這也是新手在設計一整套圖標最大的難點，要讓所有圖標保持視覺細節上的一致。
下面對工具圖標要保持視覺一致性有哪些細節進行詳細的說明。
類型一致
前面說過，工具圖標有線性的、填充的類型，在正常的情況中，同一套圖標應該在類型中保持相同，如果使用了線性圖標那么后續就不要設計填充以及混合的類型。
風格一致
每一套圖標都有自己的設計風格，不同風格在細節中都有不同的表現，需要讓這些風格特征保持高度的統一，看看下面這些案例。
第一，為圖標添加缺口的設計風格，我們要保證這個缺口的大小是一致的，并且每一個圖標中有且只有一個缺口，而不是靠感覺隨意添加。
第二，在設計一套偏圓潤可愛的設計風格中，外輪廓使用了較大的圓角，那么我們盡可能保證圓角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的設計風格中，首先要保證填充色的一致，并且偏移的距離和方向也要保持固定的規律，不能隨喜好任意制定。
透視一致
透視關系是在平面中對物體空間性質的表現方式，當我們應用了透視時，物體就有了一定的 “立體感”。
透視的表現不是繪制圖標時必須使用的風格，但是如果我們在圖標中應用了透視，就要確保我們使用的視角是一致的。要極力避免同一套圖標中既用了正視圖又包含了斜視圖。
粗細一致
在圖標中我們會應用到矩形線段或是描邊，我們要盡可能保證它們的粗細是一致的。
比如，在線性的設計中，路徑的描邊尺寸要保持一致，不能這個圖標用 2pt，那個圖標用 1pt。
在填充圖標中，我們會在一個矩形或是圓形中增加矩形的鏤空，比如下圖的幾個圖標，在這種情況下也要保證它們的粗細是一致的，而不是各不相同。
大小一致
大小一致，就是讓圖標的視覺大小保持一致，而不是它們字面上的長寬屬性保持一致。
因為這是一個比較復雜的知識點，需要我們對幾何圖形的視覺差有比較完整的認識，我會在下一部分做出介紹。這些和一致性有關的特征，是一套圖標看起來專業、有整體感的必要條件。但是，在真實的設計場景中需要靈活變通。
如果有一些特定的圖標，在保證了一致性的所有要求后卻極難被人理解，且找不到更好的設計方式，就可以差別對待。比如在一套線性的圖標中，播放、快進等圖標往往都是填充類型的，這并不會造成視覺或是使用上的困擾。
3.3 幾何圖形的視覺差
幾何圖形的視覺差，是對于工具圖標來說最重要的細節，在上一節圖標一致性中已經提及，它也是平面基礎理論中不可忽視的內容，這個理論要解決一個核心的問題，即
怎么讓不同的圖形看上去一樣大？
可能有的讀者看到這里會輕蔑一笑，這有什么難的，通過軟件的參考線或者屬性設置，把它們的長寬設置成一樣不就完事了，比如下圖這樣。
嗯，畫起來輕輕松松，參數上完美無缺。但等等，怎么看上去這些圖形大小有點不一樣，為什么正方形看起來這么大，三角形看起來這么??？
恭喜你們，發現了這個問題的根源，不同幾何圖形帶給我們的視覺大小是不同的。而要解決這樣的問題，就要對它們的尺寸做出額外的調整，比如下圖這樣。
適當調整完圓形和三角形以后，是不是覺得大小的感覺一致了？這就要牽扯一個更基礎的視覺規律，占據面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素，就要放的越大。
并且，這個問題在一個圖形的內部也會產生影響，比如知乎 APP 下面的點贊、反對按鈕，都有三角形圖標對吧，但圖形其實對于外部舉行是非居中的，我們看看下面的演示。
如果一個圖形其中一部分面積遠大于另一部分，那么就會讓這個圖形的重心產生偏移，必須要往較小的部分的方向移動才能產生平衡。
所以，在設計一整套的應用中，如果沒有對這個理論的理解，只定義一個矩形出來，把所有圖形的尺寸于矩形對齊，那么最終看到的圖標效果一定是極度不平衡的。
3.4 工具圖標的柵格
其實，針對圖標的規范，新人第一個想到的應該就是參考線了，也就是所謂的柵格模版。但之所以放第二個，是因為工具圖標的柵格規范，是根據幾何的視覺差特性衍生出來的，而不像后面會提到的應用圖標由官方提供出來。
我們先簡單看看，常見的工具圖標柵格是什么樣的。
里面包含了正方形、長方形、圓形對不對，那我們把它們分別羅列出來看看。是不是就發現這些圖形的視覺尺寸是非常接近的？然后再通過這樣的尺寸設計對應的圖形，也就看起來都一樣大。
所以，應用圖標的柵格系統對于圖標的設計來說，是一個用來應對幾何圖形視覺差的“參照物”。
之所以要說參照物，原因在于，一套圖標，不會只存在這幾種圖形的樣式，還有很多千奇百怪的形狀，但大體上我們可以識別出來它的類似輪廓或者重心方向，于是就可以通過參照圖形來判斷我們設計出來的圖形尺寸是否符合標準。
如果設計圖形和參照圖形的類似，那么尺寸就不能大于參照圖形，如果設計圖形的寬大于參照圖，那么高就要小于參照圖，反之亦然。如果圖形的重心有偏移，那就要往重心偏移的反方向移動，比如搜索按鈕，Wifi 圖標等。
最后，說說柵格系統的畫法，和大家想象的不一樣，想要畫一套圖標，柵格系統是我們自己畫出來的，不是到網上下載下來的，所以怎么畫也是這個知識的重點。
如何繪制圖標柵格系統
如果我們定義一套 28pt（如果看不懂可以當成 28px） 的圖標，那么我們首先要畫一個 28pt 的正方形，然后確定一個 2-4pt 的內邊距，正所謂四邊留一線，日后好相見。
然后就要開始繪制其中正方形和圓形，正方形通常在整個圖標尺寸 1/2 的比例，可以使用 14 或 16 的偶數 （為了可以居中）。然后再確定圓形的尺寸，圓肯定比正方形大 2-4 pt，于是就得到下方的圖形。
之后，我們再確定橫豎長方形的尺寸，可以直接頂到內邊距的邊緣。它的尺寸不是通過數值計算的，而是要我們先畫出來，把它們和前面的圓、正方形置于一條水平線上，調整出一個平衡的視覺尺寸，再和并進柵格系統中，就完成了柵格系統的繪制，如下圖的案例。
這一步也旨在檢查我們的參考線系統是否在基礎結構上經得起考驗，是非常關鍵的一步。因為不同尺寸的圖標中，參考線系統都是有區別的，我們不能直接按一個固定的比例來設置，要根據實際場景做判斷。
當然，為了進一步方便大家的學習，我特意準備了一套現成的柵格素材，包含 16、24、28、32、36、48 等六個尺寸。大家可以進入我的主頁關注公眾號并回復 “圖標素材” 獲取。
3.5 像素對齊
在柵格的繪制中，細心的讀者肯定發現了幾個關鍵字，“對齊”、“偶數”，這就是在這一部分要提及的內容。關于顯示器的倍率問題是 UI 基礎知識點之一，可能有的同學不太了解，不過沒關系，直接看下面的內容即可。
我們都知道像素是屏幕顯示中的最小單位，一個像素只能顯示一種顏色。小時候玩過的 GBA、FC 游戲機，都是通過像素畫的形式呈現，人物鋸齒是無法避免的。
而隨著技術發展，像素密度是降低了，但如果依舊是按過去這種一個蘿卜一個坑的方式顯示內容，那鋸齒感無論如何是無法消除的。于是，開發了次像素渲染（Subpixel Rendering）的技術。一個在顯示器中讓我們覺得平滑的圓，一直放大，就可以發現它的周邊充滿了飽和度較低的其它方塊色彩。
這項技術，讓像素可以用特有的方式來顯示非完整的色塊，即盡可能還原我們對元素定義的小數點。但為什么我們還要提這個概念呢？
因為工具的圖標太小了，而且 UI 的元素對精細和準確度的要求都不低，如果我們沒有盡可能滿足像素對齊的要求，那么就可能導致元素邊緣的模糊。
所以要滿足像素對齊的要求，就要符合元素本身的尺寸為整數、描邊為整數、XY 軸坐標為整數的特性。
AI 中的像素對齊設置
在 AI 中，我們可以通過兩個設定來查看和保證像素對齊，即網格的設置顯示，以及對齊到點的設置。
像素的對齊主要表現在橫線和豎線上，雖然現在手機顯示精度越來越高，但并不意味著我們可以無視像素對齊的規律！在線性圖標中，類似對于 1pt 或者 2pt 描邊的應用，覺得不是太細就是太粗，可以用 1.5pt 的數值（1.5 pt 在 2x 中就是 3px），但切記不要出現類似 1.23、2.16、3.46 這種小數。
像素對齊是一個專業 UI 設計師對于極致追求的表現之一，是每一個一線大廠 UI 設計師的基本職能，所以，想要沖刺更高的段位，就不要忽視這個規范的使用。
這是圖標系列文章的第一篇，信息量不算少！所以我們在結尾再總結一次，方便大家記憶。
? 知識點1：在 UI 的界面中，圖標的主要作用是用來高效的傳遞信息，以及起到美化界面的作用。
? 知識點2：UI 會涉及的圖標類型主要有三種，工具圖標、裝飾圖標、應用圖標。
? 知識點3：工具圖標，是界面中用來傳遞信息的圖形符號，主要包含線性、面性、混合三種設計風格。
? 知識點4：裝飾圖標，是界面中用來提升視覺體驗的圖形，主要包含扁平、擬物、2.5D、炫彩漸變等風格。
? 知識點5：應用圖標，是用來啟動應用的圖標，主要包含文字、圖標、圖形、插畫、擬物等設計形式。
? 知識點6：學習繪制圖標，優先學習 PS、AI 的路徑相關功能，而不是 Sketch 和 XD。
? 知識點7：圖標首先要表意準確，能被用戶識別并契合想要表達的寓意。
? 知識點8：設計整套圖標的時候要符合一致性原則，包含類型、風格、粗細、透視、大小等特征。
? 知識點9：不同的幾何圖形會打給我們不同的大小視感，不能只看元素的參數。
? 知識點10：我們根據視覺差的方式定義出柵格系統，作為圖標尺寸設定的重要參考。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格已經是現代電子計算機系統中重要的組成部分之一，從小學開始，我們就已經在電腦課上學習如何使用 Office Excel 來制作電子表格。
那么我們為什么需要使用表格呢？因為我們有記錄和查詢數據的需求。
在任何商業活動中，都會產生大量的數據信息，雖然我們發明了 SQL、Mysql 等數據庫語言記錄數據，但最原始的數據記錄是沒有可讀性的。
所以，為了讓數據可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構建的網格系統，將數據有序、清晰得羅列出來。
表格的重要性就體現在企業日常工作中對這些數據進行管理的需求和頻次上。
例如為電商 APP 開發了一套管理系統，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數據打轉，也就是圍繞著表格展開工作。
對于多數管理系統而言，數據查詢、管理都是非常重要且高頻使用的功能，所以常規項目中會包含大量的表格頁面。
甚至，有的中小型項目的所有導航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優劣對用戶工作效率和平臺體驗可以產生決定性的影響。
而優秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據具體情況具體分析。
所以，這也是 B 端設計師的價值之一。一個優秀的 B 端設計師勢必投入大量精力來提升對表格的認識和表格設計能力。
表格雖然細節設計上千差萬別，但在表現形式和閱讀順序上卻是基本一致的。
常規的表格必然包含表頭欄、列表、翻頁器三個部分，根據需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。
主要是用來進行簡單的數據搜索和篩選的，當搜索項較少的時候，就可以將搜索結合到表格組件內。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數據類型數量。
通常，表頭的設計會和下方列表設計有一定的區分，表頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗來增強對比。
列表則是縱向排列數據對象的模塊。每個數據對象占一行，行的高度根據內容來制定。橫向列表高度和縱向表頭寬度重疊的區域稱為單元格，每個單元格展示表頭對應的數據明細。
常規 B 端項目表格都會限制列表一次展示的行數，極少使用無限滾動加載的模式。因為當數據包含成千上萬條時會對本地、服務器性能和交互方式帶來一系列的負面影響。
如果數據對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的可操作選項放進操作欄中。
翻頁器是切換列表頁面的控件。通常大數據量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉的功能。
除了表頭和列表內容外，其它模塊內容都根據實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續的細節設計。
B 端項目支持響應式是今天行業的普遍需求，也就是頁面內容隨著瀏覽器視圖寬度變更而變更。
不同頁面類型的響應式邏輯各不相同，而表格是其中邏輯最復雜，也最難理解的一種。
表格響應式規則通常在確定好框架以后制定，優于視覺、交互設計，因為它對視覺和交互產生的影響非常大，是前置條件而不是通過設計稿逆推出來的。
- 表格的總寬響應
- 表格的最小寬度
- 單元格的響應邏輯
- 內容的響應邏輯
上方邏輯中表格可以無限延長，但它卻不能無限的縮短，因為你不可能做一個只有 10px，20px 寬的表格。
過窄的表格不僅支持不了內容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。即瀏覽器視圖即使比這個寬度更小，表格也不會再縮小了。
如果不了解柵格的段落規則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當然，不管怎么定一定要提前和前端溝通，確定尺寸方案。
當表格內容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當表格內容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內容。
單元格響應這是整個表格最復雜的一環，橫向內容會超出最小寬度的情況，就是由單元格規則決定的。
首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據需要，制定多個等級的最小單元格寬度，應用在不同的數據類型中。
假設表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。
所以當父級整個表格視圖小于 1040px 的時候，內容就會不夠顯示從而觸發左右滾動的條件。 
當上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應邏輯，就是為單元格寬設置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%，不管你單元格是比例均分（5個單元格等分各20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態。
雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現在第一列的多選框，或者部分標簽單元格、固定操作按鈕單元格。
于是，為了預留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續使用等比，只是計算的方法要減去定寬元素。
比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：
（1000px - 2*48） * 20% = 180px
作為單元格的子級，內容也可以獨立定義響應的規則。主要包含 3 種情況：
- 無響應
- 隱藏多余
- 換行顯示
無響應就是顯示的內容是固定的，比如多選框、縮略圖、單按鈕等單元格內容，它們沒有大小變動的必要。 
隱藏多余，則是主要應用在文本內容上，當單元格寬度小于當前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示，則是文本或多標簽狀態下，一行不夠顯示就換行的做法。除非一開始單行行高預留了多行顯示的高度，否則多行內容就會撐高單元格。
以上就是表格在響應式模式下相關知識點。
隨著經驗的積累，實戰經驗豐富的 B 端設計師，就會在前期的規范環節制定出完整的表格響應邏輯，應用到前端框架開發和后續的設計，而不是做到哪定到哪。
表格首先是一個展示信息的組件，而單純依靠布局和排版技巧，并不能解決所有的信息展示問題。所以，針對網頁表格的局限性，我們要添加一些交互的細節來提升使用體驗。
例如，單頁表格數據量較大，有好幾屏高，往下滾動后看不見表頭，不能很好的識別單元格內容。
或者，表頭屬性數量較多，需要左右滾動，但是每行數據要不然操作欄目看不見，要不然對應 ID 被滑走了等等。
所以，表格的框架就可以做懸浮固定的模式，將需要被持續露出的欄目懸浮固定。
當然，除了單獨欄目的懸浮，也可以使用混合模式，比如表頭吸頂的同時固定右側的操作欄。盡量將固定元素控制在 3 個以內，以免懸浮要素太多影響內容的瀏覽。
還要注意，除了筆記本觸摸板和少數鼠標，一般用戶是沒有頁面左右滾動滾輪的，所以當表格出現左右滾動情況以后，就一定要默認展示進度條，方便用戶操作。
我們先對這兩者做一個明確的定義：
篩選 Filter：對要顯示的內容設置篩選條件，不符合條件的將會被過濾隱藏
排序 Sort：對已有內容的顯示順序進行條件設置，不會有內容被過濾或隱藏
這看起來好像很容易理解，但會搞混的地方就在排序的應用上。我們常規以為的排序，就像電腦文件夾列表一樣，通過點擊表頭來決定內容通過哪個屬性來進行升序或者降序。
在這種 “樸素” 的設定中，篩選是以單個表頭屬性為標準的，有唯一性。比如在學生數據表格中，可以以 ID、姓名、年級、年齡或成績單個屬性進行列表排序，選中其中一個屬性其它屬性的排序就被取消了。
但是復雜的排序并不是 “唯一屬性” 的，而是多個屬性的并集，以及具備優先級和排序模式。還用學生數據表格舉例：
優先根據年齡降序排列，同年齡下根據班級升序排列，同班級再根據成績降序排列。
這里面疊加了三個屬性，年齡優先級最好，然后班級次要，成績最后，我們用圖表的展示可以實現出下面這樣的形式：
再進一步，這是我們條件已經確定才做出來的組件，要是要制定的屬性不確定，要制定的屬性數量也不確定，順序不確定，排序模式也不確定……
這種情況就肯定要應用排序自定義條件的邏輯了，而表頭自定義一加，那邏輯就立馬復雜了，它的操作面板可能就長下圖這樣。
排序復雜了，并不代表篩選就不要了。部分項目的篩選除了在表格外的獨立篩選區域，還可能應用表頭篩選模式。即以單個表頭緯度設置篩選條件，比如點擊 “年份” 表頭，設置起始和結束時間。
所以，只包含篩選的情況下，表頭的圖標就不是排序而是漏斗，點擊后就要展開篩選設置面板進行操作。 
而當多表頭篩選和多表頭排序需求并存的時候，怎么解決？
這里只建議在表頭中留存篩選選項，因為篩選可以實現并集關系，即前后任何表頭添加篩選項都可以組成完整的篩選條件。但是，這種交互難以完成篩選優先級排序。
所以，我們要將排序獨立成一個按鈕到表頭之外的地方，而不是強行讓兩者并存。尤其是不要設計出有的表頭是排序，有的表頭是篩選，甚至表頭的按鈕展開面板里又會有篩選又有排序……
表頭是針對列的操作，而針對行的操作，就是對單行列表的選擇、展開和進入了。
前面我們有說過，表格第一列往往放多選框，通過點擊選擇當前列表行。它本身的交互并沒有太多需要注意的，只要針對行的交互如果不止選擇應該如何平衡。
部分復雜項目喜歡在表格中添加 “套娃” 的需求。即單行數據可以向下展開二級數據，或者更進一步到三級、四級。 
所以當多種操作需求混合出現的時候，我們就要具體分析這些需求的優先級了。到底是多選操作頻率最高，還是查看下級行，打開詳情頁。
這是為讓點擊整個數據行這個最便捷的交互可以關聯到最高頻的操作上。而其它低頻操作的交互則只限定在對應的按鈕或圖標上即可。
因為多選需求往往需要我們在一系列數據中選擇很多條數據，一個小小的復選框不僅選擇起來麻煩，且通過查看右側的內容篩選數據行，再用右手握鼠標按需點擊最左側的多選框，是非常別扭的體驗。
還有一個需要注意的細節，就是當多選和展開下級列表共同出現的時候，選框和展開圖標的排列。
通常一個數據行第一列的內容，應該是整行邏輯層級最高的元素。如果子數據行是被獨立出來需要單選，那么展開圖標就要放到選擇前面。如果選擇數據包含了該行和所有子行，那么選擇就應該在展開圖標前面。 
最后，就是解決單元格的交互了。常見的單元格交互可以總結成下面這幾類：
- 點擊打開頁面
- 點擊復制內容
- 點擊修改內容
- 懸浮提示說明
點擊打開頁面很好理解，比如單元格內的數據是鏈接、圖片、按鈕然后實現跳轉或彈窗。
而復制內容，則有一些需要注意的細節。表格中有一些數據是沒有實際閱讀意義的，它的存在就是用來做特定的校對或者是復制出去，比如 ID 號、哈希值、訂單號等。
常規的做法是直接在右側添加一個復制圖標，但對于一些偏復雜的表格來說，所有可復制的單元格都加復制圖標是非常影響瀏覽體驗的。
所以，我的建議是都是默認隱藏復制圖標，只有當鼠標移動到對應單元格的時候會顯示。同時，這個圖標可以覆蓋到數據上層，因為既然鼠標移動過來為了復制，那么數據被遮擋在這階段自然無關緊要，為整體頁面預留空間
這樣的操作按鈕隱藏浮現方式，也適用于單元格修改的操作。但是，和復制不同，單元格信息編輯通常是編輯文本信息，還有后續的操作步驟。
如果點擊進行文本編輯，那么建議在該表格打開一個新的輸入浮窗，且浮窗內輸入框文本和原來文本位置持平實現順暢的步驟轉換。
同時建議，為了防止誤操作，盡量增加確定、取消按鈕，防止誤操作覆蓋原有數據且無法撤銷。
最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來做提示的控件，但它只是手段。為什么需要懸浮提示，提示什么內容是我們需要考慮的。
對于及其復雜的表格來說，往往是沒辦法支持所有數據都完整展示的，我們會在使用省略號對它進行截斷。但截斷不意味著用戶完全不需要在表格查看到完整的信息。
所以，就可以通過氣泡的做法，將信息呈現給用戶。而呈現過程中，盡量確保鼠標可以移動到氣泡上復制里面的文字內容（和全部復制不一樣），而不是鼠標移走就直接關閉消失。
以上就是關于表格設計的全部說明了，作為 B 端設計最重要的模塊之一，希望大家可以學以致用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
● 京東金融 App 首頁三大改版
3.x 版本到馬上上線的 4.x 版本，公司的戰略方向以及產品運營方向都在不斷的變化（有接觸過京東金融 App 的人都知道視覺變化很大）。作為公司的移動端產品，既要滿足用戶體驗和需求，又要滿足內部業務的擴展。所以我們要不斷優化各種布局和細節，把用戶體驗和內部需求做到最好。
3.X 版本是我接首頁優化的第一個版本。改版期間我們經歷了很多，除了本身業務以外，更重要的是我們發現之前首頁有很多問題。其實優化產品最基本的方法就是發現了一些問題，然后去解決這些問題。問題可能是產品問題、業務需求擴展、運營需求滿足，最后才是體驗和視覺。這些問題能得到解決產品就能得到優化。
以賬戶為中心是當時產品的主要方向，整體都在強調財富管理。所以之前的界面在賬戶為主和業務擴展上都存在很大問題，一是業務拓展存在局限性，二是賬戶感不強。
經過一大堆方案和設計圖的轟炸，最終確定了大的方向，突出理財金額和業務和信貸業務。把一些數字突出放大，讓用戶打開產品既能看到自己想看到的東西。賬戶感的體現我們把數字和一些文字說明當成首屏最主要的東西，少一些運營，少一些 banner 。就像是在銀行打出的紙質賬戶信息，上面很少會出現廣告。
▲ 還是之前的方法，經過上線一段的時間去發現問題。隨著業務和功能的增多，原來的布局已支撐不了公司方向的支持這是之一。之前的視覺也有一些缺陷，進入 App 整體看上去沒有重點的，純白色很干凈但是也沒有能跳出來吸引眼球的東西，也不能把重要業務區別與其他業務。
這次增加了一些產品本身頻次的功能，如掃一掃、簽到、每天領券等。還有怎么樣能突出重點業務的展示，讓用戶在視覺局部上有所重點。業務的擴展性通過左右橫滑來實現。
▲ 怎么樣能把多量的業務，重新布局到有限的界面里，而且不能降低用戶的使用體驗，是我們這一版要解決的問題。就是化繁為簡。
這次我們把業務場景劃分成「賺錢」「花錢」「借錢」，相對應是「理財」「白條購物」「現金借貸」。使用三個Tab 簽和最簡單的布局方式來排版。用戶理解相對也會變的容易，界面整體看起來也簡單明了。
首頁的改版看似簡單，其實背后有很多的付出。不斷的優化討論、不斷的視覺方案，我們不斷在尋找新的突破，希望能讓各個方面都達到最大效能。
● 理財日歷
「理財日歷」是整合用戶關于所有金融業務的，按照時間線索智能提醒和自動完成的一款產品。
· 產品目標：幫助用戶記錄金融事件和跟錢相關的事件，例如理財到期、白條還款事件、生活繳費事件等等。一條 時間線可以把用戶所有的事件聯系起來的。讓用戶把時間用在更重要的事情上。
· 產品關鍵性詞語：時間、自動記錄、提醒、設置自動完成
當我們進入 App 時，需要進行很多不同的操作，進入到不同的業務線頁面才能完成我想要做的事情。這時整合業務聚合內容就變的很重要。需要有一個平臺把跟用戶強相關的金融事項和其他事項整合，這樣就不用花費很多時間來處理各種事件。
日歷是一個強時間線的用戶固有思想形態，我們需要把除了基礎的時間、記錄事件和日常提醒功能做好外，還要讓用戶習慣這里面有跟我理財相關的事項。針對使用產品用戶的特征，在視覺布局上不能難以接受，日歷主要的時間、每天事項、后續事項查詢和增加事項都要合理排布。
為了增加日歷的整體氛圍，除了時間的排布，我們為每一個月和每一個節氣增加了插畫。每一條信息的分類都用 icon 表示，突出強弱，增加氛圍。
日歷添加事項和設置頁面，以進度的感覺讓用戶去更好的完成事項的設置。推薦事項也是用戶最常用的、最容易跟時間所對應的事項。
日歷的分享模塊是很重要的一個細節，我們希望它能更好的去傳達這是一款有溫度的產品。它也是對外發聲的一個利器。
怎么樣才能激發用戶分享的欲望呢，用戶打開界面的分享動機是什么？我們知道用戶分享有幾點：有用的、有趣的、相互比較、用戶認同等等。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：程大專 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn