現如今隨著設備尺寸的多種多樣，產品在設計過程中需要適配到更多尺寸，布局方案與柵格系統的搭配使用，可以很好的做到跨平臺跨尺寸適配，極大的提升設計效率。之前有小伙伴分享過適配選型的文章中也提到過柵格，大家可以回顧一下【Web產品的適配設計選型】。
其實，絕大多數的設計師都知道柵格很重要，市面上很多企業級系統也都在用柵格系統去規范化信息內容的排版布局，但很多設計師直接面對結論大多是一知半解，自己做設計時有些無從下手。
作者瀏覽了大量文章結合工作中的經驗總結分享給大家，希望能幫助理解柵格系統的本質，并能舉一反三應用在產品設計中，首先從基礎的柵格系統解析開始吧。
最早的柵格概念，來源于平面設計中的“網格”，早在1692年，新登基的法國國王路易十四不滿于法國當時印刷水平，命人成立了管理印刷的皇家特別委員會。旨在設計出科學的，合理的，重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，以羅馬體為基礎，采用方格為設計依據，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的排版，試驗傳達功能的效能，這是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。再后來，20世紀初，平面設計師們發現通過維持視覺秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設計的方法，直到20世紀40年代后期，第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設計中的網格系統》一書，自1961年出版以來暢銷至今，對設計界有著深遠的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設計運動)，后來成為全球風靡的International Typographic Style (國際主義設計風格) 。
簡單來說：柵格是通過規則的網格陣列，形成穩定的基礎框架，來規范界面中模塊的布局與信息元素的分布，輔助設計師組織信息的工具。前面講到UI設計中常用的柵格系統是從平面網格系統中發展而來，柵格與網格的本質其實是相通的。那么有同學會問，兩者區別在哪呢？平面設計中【網格】應用的媒介一般為固定的紙張規格，寬度和高度都是固定的，網格的劃分方式是一個個等分的方格。UI設計中【柵格】寬度受設備寬度變化而變化，高度由內容多少來決定。因此設計時只需制定縱向的分割規則，以規范縱軸方向內容的對齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現的原因。
市面上各系統對于柵格的名詞描述各有不同，新手往往會看的越多，越迷惑，其實大可不必糾結具體叫法上的細微差異，萬變不離其宗，理解其本質表達的意思和柵格的結構原則即可，下面會對這些基礎名詞進行一些解釋。
網格（Gird）的基本構成就是單元格，由格子組成網，形成網格。最小單元格是界面的單位基礎，所有界面元素都按照這個基礎單位布局分布，它對于創造性的決策具有重要的指導意義。
通常，我們利用 8 作為最小單元格建立網格。
使用 8 的倍數來定義模塊的間距與元素的尺寸。
那么為什么是8，而不是別的數字？原因如下：
a.偶數思維：8作為偶數，能適應市面上絕大多數設備屏幕，更為普適。在輸出各種倍圖時也能保證尺寸不出現奇數以及0.5、0.75等次像素的出現（iOS導出1、2、3倍圖，Android導出1、1.5、2、3、4倍圖均為偶數）。
b.規律性：所有元素以8像素為步進單位，利用8或8的倍數規范元素和間距大小，（例如使用4、8、16、24、32等和8具有規律關系的數字）有規可循。
c.節奏感：相比于6、10 等數字，以8為單位，在視覺感受上既不顯得過于瑣碎，也不會因為間隔太大而顯得內容分散，更容易保證頁面效果的協調性。
d.目前市面上眾多開源代碼也都以8的倍數作為默認設計大小，可行性已經得到多輪過驗證，設計師在與開發對接過程中對頁面有較為統一的理解，有效降低合作成本，在設計還原度上也更有保障。
劃重點：注意這里給的是建議尺寸，最小單位的制定還需要結合具體的使用場景來決定，我們以解決問題為最終目的。
列（Column）的作用通常是用來對齊內容，列也是柵格的數量單位，大家可以理解設置柵格數量就是設置列的數量，如 12 柵格就有 12 列、24 柵格就有 24 個列，通過控制列數，可控制界面排版的呼吸節奏，列數越多，內容排布可以越精細，也容易分割的太細碎，反之列數越少，內容排布也越容易稀疏松散。
理解了列，再來說水槽（Gutter），水槽就是列于列之間的分隔間距，這里水槽的作用是幫助區塊內容做分隔，需要注意，水槽內不可放置任何板塊內容。
水槽寬度在一定程度也會對界面的風格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內容瀏覽類頁面展示，相反水槽越小，留白小內容緊湊，適合一些嚴謹的工具型面板類內容展示，各有利弊，大家可根據設計目標權衡設計策略。
邊距（Margin）有時候也會被叫安全邊距，是指設計內容距離屏幕邊緣的距離，顧名思義，安全邊距內是禁止放內容的，可以類比為平面設計里的出血概念，主要用來控制屏幕核心內容的展示邊界。
邊距值越小，界面核心內容的有效利用空間越大，布局相對來說會比較寬松，相反，邊距值越大，兩邊留白大呼吸感強，但有效利用區域相對小，內容排布相對更緊湊，也可能會容易擁擠。這里建議界面的邊距可以根據屏幕尺寸做適配，通過斷點響應變化，這樣可以更好的保證在不同屏幕上界面呼吸節奏都相對舒適。
柵格總寬（Container）就是指頁面柵格系統的總寬度，即所有列寬加水槽寬度加安全邊距的總和。
建立好基礎柵格之后，我們可以根據內容去定義一塊內容占用幾個列的寬度，我們把這個區域理解為容器盒子，容器用來集合下級組件，也可以是對文字、圖片、按鈕等多個復雜元素的集合，按照頁面結構可以由小到大依次從組件 – 容器 – 模塊 – 頁面 – 場景進行組合拼裝最終形成設計方案。
定義柵格系統之前，我們先了解熟悉下計算公式
如果你已經理解了前面的柵格要素的作用和用法，那么接下來就可以按照以下步驟在自己的畫板上創建柵格系統。
注意柵格區域不一定是畫布的全部區域，我們可以先將頁面按照功能模塊劃分為全局控制層、內容層、背景層、臨時層。通常我們大多是對內容層進行柵格化。
通常web端常用的三種布局如下圖所示，建議按照實際使用場景靈活的選擇布局形式后，再確定需要柵格化的區域。
當我們遇到一個wed端的內容瀏覽類網站，一般會采用上下布局，通常會基于 1920 或 1440 尺寸作為設計稿寬度，但由于需要適配主流尺寸中的最小尺寸，核心內容展示會控制在 1024（這里不是絕對值，不同產品根據實際情況數字會有上下浮動），其他空白區域即為安全邊距，這是web網頁中常見的一種適配方案。
12柵格和24柵格是目前比較常見的列數結構。選擇使用哪種柵格結構，取決于產品對設計的要求。
12柵格：當產品涉及到多平臺發布，內容較為簡單，單個容器盒子內信息面積較大時，可以考慮采用12柵格來兼容。
24柵格：如果當前產品發布于pc，內容較多，且功能繁雜時，則需要更靈活的柵格系統去規范信息內容的布局，這時我們可以考慮采用24柵格，國內較為主流的企業級設計系統 Ant Design采用的就是24 柵格。
前面講到過在產品 UI 中邊距（Margin）的值對視覺的呈現的影響，這里就不做過多贅述。這里科普一個叫做“Rem”的計算單位，(Rem 是開發常用的計算方式，設計和開發基于同一套原理進行設計，在協作過程中能夠極大提高協作效率，并且減少維護成本），通常制定柵格系統時，我們可以用1Rem的值來定義水槽（Gutter），它的靈活最強，可作為柵格系統的基準值。而邊距（Margin）的值通常就是1.5Rem 或者 2Rem?；诔Ｓ玫?倍或者8倍間距系統規范，一般最為常用的基礎間距為 4，8，16，24，32，48，我們可以在這些基礎值里去選擇匹配產品的柵格系統基準值。
通過Rem基準值，我們還可以輕松得到一套匹配的間距系統，以1Rem=16為例，可以得到以下間距系統：
掌握以上要點，即可get一套匹配產品設計要求的柵格系統。
簡單來講，在固定柵格中，頁面拉伸時，元素的尺寸和間距都是固定的，頁面每到一個斷點尺寸，就會減少或增加最邊緣的內容元素。體現到柵格上，頁面寬度變化過程中未達到預設臨界值時，柵格系統本身的列與水槽寬度不變，頁面所有元素布局也不會有變化，直到到達臨界值，柵格列數會隨著瀏覽器寬度，增加或減少，邊緣內容進行換行顯示
典型案例：Dibbble、Behance
優點：
適配規則簡單，實現成本低
缺點：
適用范圍小，拉伸過程邊距不是固定的，大多只適用于內容居中的上下布局類型產品
一個頁面盡量只有一種卡片尺寸，否則邊距不統一
卡片尺寸固定，在過大或者過小的屏幕尺寸上，比列容易顯得不協調
流動柵格中頁面邊距和內容間距固定不變的，頁面內容隨著頁面尺寸變化而變化，可以是增刪邊緣元素展示個數，可以是調整元素展示比例，最終效果是始終保持內容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應不同分辨率體現到柵格上，頁面邊距和水槽寬度是固定不變的，列數在適配過程中也是固定不變的，拉伸過程中的實際列寬是通過柵格區域的百分比縮放而來，這時列的寬度就不一定最小單位的倍數了。
典型案例：百度圖片、花瓣
優點：
可以兼容不同尺寸的卡片混排
頁面邊距也能保持一致，拉伸過程中拉伸過程中過渡平滑，不顯得突兀
缺點：
頁面伸縮時，不可避免的會出現卡片尺寸忽大忽小
在實際項目中，流動柵格和固定柵格的組合使用也是比較常見的做法，一些后臺系統設計、工具型的界面設計會較經常使混合柵格的形式, 混合布局既有固定的內容寬度，也有流動的寬度，靈活性更高，對與內容復雜的產品十分友好
典型案例：Ant Design Pro
優點：
容器承載內容靈活性高，不同分辨率下都能達到較為理想的視覺效果
缺點：
規則復雜，實現成本高
最后再來總結下柵格系統在使用過程中一些使用要點：
1.內容區塊的定義要從列開始到列結束，可以任意分割，比如 6×2、3×4、4×3。
2.水槽內禁止放置任何內容元素
3.安全邊距內禁止放置任何內容元素
4.除非特意設計，否則不要在列之外區域放置元素
5.只要框架（父級）元素對齊柵格，原子組件（子級）可以不完全對齊列
6.對于柵格的區域選擇，可以根據實際業務場景靈活應用，不一定非要整個畫布區域
7.可以使用嵌套柵格，我們通常會用一套柵格標準來全局控制整個界面，但不乏有些產品中會出現一些典型模塊的內容密度和全局柵格的匹配度不高，這種情況我們可將特定區域單獨定義柵格值，嵌入到總的柵格系統中結合使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：沙拉 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
對于我們設計師來說，尤其是現在 B 端設計如此流行的情況下，表單設計細節尤其需要各位設計師注意。今天會分享表單設計中那些你不注意的細節點，必須先點贊收藏了，這些干貨知識相信你一定用的上。
比如以登錄為例，當你把密碼輸錯后，網站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數據對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。
因此，任何專業的用戶體驗設計師不僅應該考慮順利的流程情況，還應該考慮失敗時應該怎么辦。
錯誤提示
錯誤提示應該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設計師來說，一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么，如果可能的話，最好也提供解決方案。
左邊的錯誤信息很清晰的解釋了發生的問題，右邊的錯誤信息對用戶來說非常困惑。
1. 什么時候告知用戶發生了錯誤比較好？
當用戶出錯后，首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式：
內聯/實時：在輸入時或移開焦點后立即提供反饋；
提交后/客戶端：當用戶點擊提交按鈕之后；
服務器端：當請求發送到服務器后再返回反饋給用戶。
這些方法中的每一種都有其優點和缺點。
2. 內聯驗證
一般來說，當表單非常短小時用內聯驗證，因為它允許在內存中的數據仍然最新時更正錯誤。
你可以用內聯驗證立即告訴用戶哪里錯了。
3. 提交后驗證
另一方面，當表單很大且需要保持關注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。
4. 服務器端驗證
服務器端驗證是最不友好的方式，但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時，這種方法最有效。
5. 如何提示用戶錯誤？
錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復它？很顯然，清楚地說明錯誤，而不僅僅是顯示 Error:90803，對用戶有很大幫助。
6. 使用積極語言而不是消極語言
錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應該是空的“，不如說”請填寫此字段“。當使用積極語言時，用戶不會因為一個錯誤而受到責備，這能減少用戶的焦慮感，減少流失。
7. 必要時提供幫助
在某些情況下，用戶無法自己修復錯誤，他需要額外的幫助。例如，當用戶無法登錄時，大多數應用只提供找回密碼，而沒有找回用戶名。但事實上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。
標簽是表單可用性最關鍵的組成部分。如果標簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內容。
用不要用一些模棱兩可的詞，比如‘數字’可能會讓人感到困惑，一定要明確意思。
1. 將標簽放在輸入字段的頂部
許多研究表明，將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因為它允許用戶遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。
將標簽放置在字段的頂部和使用浮動標簽，這兩種方式都很有效
2. 將標簽放在輸入字段的左側
另一方面，當你詢問用戶比較復雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標簽放在輸入框的左側會比較好。
3. 標簽應該是可見的，無論什么輸入狀態
無論你用什么方式，確保當用戶填完內容后，標簽是可見的。因為，當用戶需要再次確認表單內容的時候，他們不用刪除填好的數據來查看系統需要他們填什么。
4. 減少不必要的輸入項
要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到，可以將必填和非必填的字段區分開，減少用戶的負擔。
5. 可見性
不管狀態如何，字段都應該是清晰可辨的。此外，活動字段和非活動字段之間的區別應該要明顯。
用輸入字段應該有高對比度，在所有狀態下都是可見的
6. 自動激活 PC 端表單的第一個字段
自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點擊。
7. 幫用戶預先填好
在某些情況下，你可以幫用戶預先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數值可能是頻繁的。在這些情況下，為用戶填充字段。
8. 格式
含有大量小數的數字很難讀懂。因此，當要求較大的數字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。
此外，當請求需要特定格式化數據時，要包含一個實例，讓用戶準確理解要填什么。
輸入字段的大小應該與他預期的數據大小相對應
10. 為桌面系統設計靈活的表單
在鍵盤和鼠標之間切換很煩人。在理想的情況下，用戶應該只使用一種媒介來填寫表單，但有時，這是不可能實現的。因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。
另外，當創建一個網頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。
11. 為移動端系統設計靈活的表單
當在移動設備上時，將你顯示的鍵盤與用戶必須輸入的數據相匹配。我們經常看到需要數字鍵盤的輸入可以很好地實現這一點，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤。
輸支持通過顯示正確的鍵盤輸入電子郵件
下拉框的使用比單選按鈕更有挑戰性，因為它需要額外的點擊來打開它們。此外，用戶無法提前看到選項，這可能會讓他們感到困惑。因此，如果你只有少量的選項，使用單選按鈕。如果選項的數量超過 4 個，下拉菜單的效果會更好。
1. 復選框
通過勾選復選框，用戶應該是同意某些內容。我的意思是，他們應該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。不幸的是，我經?？吹接姓`導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。當你不想訂閱他們的通訊時，你又必須勾選復選框，像這樣的伎倆對信譽是不合適的，所以不要動心使用它們。
通過勾選復選框，用戶應該同意某些內容，而不是確認他們不同意。
一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。
1. 從簡單的問題開始
從簡單的問題開始，從用戶已經很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進問稍微復雜的問題，像賬戶信息之類的。
首先，一個很自然的順序，當你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當用戶已經填了一些字段之后，那么之后會增加他填完表單的機會。
2. 創建邏輯信息塊
將不相關的信息按邏輯分組。例如，你可以將結帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。
通過對相關信息進行分組，使表單可被快速掃描
3. 單步 VS 多步表單
當你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉化率更高，因為它看起來更小，而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。
當用戶被要求必須填寫更多復雜信息時，多步表單會更好。為了幫助用戶在進行多步驟填寫時不至于失去耐心，可以給到進度條，提示還剩多少步。
4. 單列 vs 多列布局
一般來說，用單列布局會更好，因為可以幫助用戶更好地掃描，也可以盡量減少用戶遺漏填寫。
但當用戶多次填寫同一個表單時，他們更喜歡多列表單，因為這樣不會浪費時間滾動。一般來說，在 B 端應用中這種多列表單會比較合適。
設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊，會容易勸退新手用戶。
根據用戶按下按鈕會發生什么來命名按鈕
1. 提高用戶的容錯率
對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失?；蛘撸绻脩粲捎谝馔恻c擊了按鈕，請求不應該被提交。
2. 主要按鈕和次要按鈕應該很容易區分
為了避免點擊錯誤的按鈕，用戶應該能比較容易地區分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。
讓主要和次要的按鈕樣式上有比較大的區分度
3. 正確的標簽按鈕
按功能明確地標注按鈕。例如，如果按一個按鈕可以創建一個賬戶，在按鈕上的文案叫”創建賬戶”要好過“提交”。
當用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。
不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因為設計沒有同理心。仔細思考你的設計流程，檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。
通常來說，一般要達到以下目的，大多數指導原則都來自這些規則：
用戶應該只輸入一次數據
用戶應該填盡可能少的信息
用戶應該只需要記住少量的信息
用戶檢查和恢復錯誤內容應該要很容易
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：nanaOMO 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
譯者推薦 | 著名的諾貝爾獎獲得者赫伯特·西蒙在對當今經濟發展趨勢進行預測時也指出：“隨著信息的發展，有價值的不是信息，而是注意力?！?/span>
在互聯網中，設計師多是處在執行層。通常我們會去追尋做這個項目的原因和目標，那對于整個互聯網時代，設計師如何通過設計手段緊緊抓牢人類最有限卻最有價值的注意力呢？這篇文章就是一個向導，幫助你找到方向。
摘要：電子產品正在爭奪用戶有限的注意力。現代經濟學越來越關注人類的注意力以及產品如何吸引用戶的關注。
注意力是數字時代最有價值的資源之一。在人類主要歷史進程中，獲得的信息是有限的。幾個世紀以前很多人不識字，教育是一種奢侈。如今我們可以大規模獲取信息。任何有互聯網連接的人都可以獲取事實、文學和藝術（通常是免費的）。我們面對的是豐富的信息，但我們的大腦處理信息能力和以前一樣。每天仍然只有24小時。今天，注意力成為了限制因素，而不再是信息。
在深入討論注意力經濟之前，我們首先需要把注意力的定義闡明清楚。注意力的正式心理學定義和大多數人對注意力概念的看法是重疊的。
注意力：選擇性地專注于我們目前正在感知的一些刺激，而忽略來自環境的其他刺激。
在平常的話中，我們經常說“請注意”。這個表達意味著注意力的兩個重要特征：有限的注意力和有價值的注意力。當我們“關注”一件事，我們會消耗精神資源的預算，相應的我們會減少消耗在其他地方的注意力。關于人類注意力的理論都認為注意力的能力是有限的。心理學家兼經濟學家 Herbert A. Simon 將注意力描述為人類思想中的“瓶頸”。他也提到“豐富的信息造成了注意力不能集中”。一心多用的自負是一種謠言：人們不能同時一心多用。比如，人們可能會在看電視時拿出手機，但是如果他們將注意力轉移到手機上，他們就會錯過電視節目中發生的一些情節。
注意力是我們個人的寶貴資源。這個資源同樣受到商業、政治運動、非營利組織、還有無數其他組織的重視，他們都在試圖吸引我們去花錢或者花費時間。在1997年，Michael H. Goldhaber 寫道，全球經濟正在從物質經濟轉為基于人類注意力的經濟。例如很多在線服務是免費提供的，但在注意力經濟中，注意力經濟是資源更是一種貨幣：用戶用他們的注意力為服務付費。今天，注意力經濟的動力促使企業吸引用戶在應用程序和網站上花越來越多的時間。創建網站和應用程序的設計師明白，他們的產品是在競爭激烈的市場中爭奪有限的用戶注意力資源。吸引注意力的目標導致了很多不同設計趨勢的普及，例如：
在我們最新的語音助手研究中，我們發現當用戶在開車，亦或是他們的手或眼鏡很忙碌的時候，經常用到手機語音助手的功能。一個常見的抱怨是，Siri 或者谷歌助手在手機屏幕上顯示結果而不是大聲讀出內容。比如，即使是簡單而常見的問路任務，也可能要求司機將注意力分散在屏幕信息和道路之間。
配文：在 iPhone 上問 Siri 得到的查詢結果是展示在屏幕上的，用戶需要將注意力分散到任務和屏幕的信息上。
同樣，智能手機用戶的注意力也經常被當前使用的應用程序、網站、電視節目或其他外部刺激所分散。這就是為什么手機上的會話往往比在臺式機上的會話短：中斷的可能性很高。
為了理解一個設計是否超出了用戶的注意能力，需要在上下文中進行研究。實地研究、日記研究和訪談都可以用來了解人們在現實生活中是如何使用該系統的。
許多用戶都知道網站和應用程序在努力吸引他們的注意力。在最近的可用性測試中，一個用戶在 AllRecipes 網站上看一個關于“如何做煎餅”的視頻，當這個視頻播完后，網站會在自動播放列表中加入相關視頻，我們的測試者沒有發現暫停該視頻的選項。在視頻上出現的唯一選項是重新播放，或開始觀看播放列表中下一個視頻。
配文：AllRecipe 網站設計了自動播放視頻列表，旨在保持用戶對網站的關注
當播放列表在排隊時，用戶評論到“這似乎讓我看電腦的時間比我實際需要的時間更長了”。播放列表在每一個食譜視頻播放之前展示一個廣告——該網站有明確的經濟激勵措施，可以將訪問者的注意力集中在連續的視頻上。一些用戶對于無法控制花費在設備上的時間感到無助。數字產品的設計越來越吸引人，經常讓用戶上癮。對父母來說，花太多時間在科技上的影響尤其令人擔憂。吸引人眼球的設計可能會讓年輕人養成習慣，當設備被拿走時，他們可能會經歷“戒斷”。有些用戶會調整自身的行為。其中一些調整是有意識并采取了行動的，以限制在線時間。經過深思熟慮的調整包括設置上網時間限制、卸載某些應用程序或使用家長控制。用戶還學會以微妙的方式保護他們的注意力。條幅盲目性（Banner blindness）是對大量信息做出反應而產生適應性反應的一個例子。條幅盲目性指的是當廣告放在右邊欄或頁面頂部時，用戶往往會忽略廣告。這點就很好的說明了用戶是如何適應大量信息的。用戶也已經適應了移動設備上常見的通知轟炸：他們已經學會忽略其中的許多通知。在最近的一次可用性測試中，我看到一位女士在她的 iPhone 上瀏覽新的博客。當會話的第一個通知消失時，她向我道歉并問道：“你還用這個錄音進行研究嗎？”在我向她確保這不是個問題之后，她繼續了這個測試任務。在整個會話期間，還有幾個通知從這個用戶的手機上發出，但沒有一個通知打斷她的思路。
我們根據目前觀察到的未來預測，為注意力而設計的趨勢將會繼續演變。很多企業將會選擇創造更多抓住用戶注意力的廣告。自動播放視頻和不可跳過的廣告幾乎普遍不受用戶歡迎，但它們將繼續作為設計特色。在搶奪用戶注意力的軍備競賽中，廣告將會變得越來越身臨其境。主流的社交媒體平臺，如 Facebook、Instagram 和 Snap 都在測試增強現實廣告。
一些企業將會持續研究形成習慣的設計，來吸引用戶越來越多的關注他們。注意力經濟擁有一個樂觀的未來也是可能的：最近的發展為更公平的注意力經濟帶來了希望。越來越多的廣告采用了分成收入模式，這使得用戶可以用他們的注意力（觀看廣告）或金錢（保持他們的注意力）來支付。
配文：Spotify 允許用戶在其廣告贊助的服務上免費聽音樂，如果用戶希望避免令人分心的廣告，他們可以直接為這項服務付費
一些企業已經回應了用戶關于分散注意力設計的抱怨。Apple 最近更改了通知的設計，可以在 iPhone 上快速連續刪除多條通知，還引入了屏幕時間統計功能，允許用戶監控他們對點子設備的使用情況。
結論
數字經濟的某些事實可能不會改變。在可預見的未來，廣告將為一些免費內容提供資金，應用程序將爭奪新用戶的注意力，而人們的注意力仍然有限。但是，設計師在注意力經濟中有一個選擇：他們可以平衡業務需求——— 比如對新用戶、廣告收入和利潤的需求——同時尊重用戶的最大利益。
原文標題：The Attention Economy
原創作者：Lexie Kane
原文鏈接：https://www.nngroup.com/articles/attention-economy/
翻譯作者：櫻桃小丸子
授權獲?。?span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:inherit !important;">張聿彤
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：三分設 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“仰望星空，腳踏實地” ，做設計需要想象空間，也要有反思和總結的能力。
讓我們來看兩個毫無關聯的產品的界面。
BI產品
團隊協作產品
這兩個案例展現了如何選用不同的模式以實現不同的目的。
對于BI產品來說，目的是讓數據分析更徹底，提高數據分析效率；更好的整合數據，為企業提供報表，做為企業決策的依據；更好的幫助企業管理者管理企業，提高企業實力。
對于teambition來說，目的是輕松記錄要做的事，并與伙伴實時同步進展。讓彼此清楚地了解項目整體情況及事項優先級，從而完成目標。
基于產品目的我們可以看出BI產品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產品的目的決定了它所采用的設計模式也會不同，下面我們再對照界面看下基于目的在界面設計上有什么不同。
BI產品
團隊協作產品
BI數據分析類產品的布局多是小部件組成，這樣做會方便用戶進行多任務處理。界面設計也會相對比較密集，整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。
設計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開創性著作《建筑的永恒之道》和《建筑模式語言》中提出的。
《建筑模式語言》里面包含了253個建筑設計模式，大的如城市和道路系統的布局，小的如家庭住宅中的照明和家具。
類似地，我們在創建界面時，也在使用設計模式（組件）來解決常見的問題：使用標簽頁將內容分成幾個部分，并表明哪一個選項對應于當前的頁面；使用下拉菜單展示可供用戶選擇相關選項。
標簽頁
下拉組件
設計模式分為2類：
第一類：功能性模式（組件庫）表現為界面上的具體模塊，如按鈕、標題、表單元素、菜單等。
第二類：感知性模式（視覺規范）則是描述性的樣式，以可視化方式表達和呈現產品的個性，如配色、排版、圖標、形狀、動畫等。
功能性模式有點像名詞和動詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。
例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態和過渡動畫不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。
唐·諾曼在《設計心理學》一書中說過：系統映像（界面）和用戶模型（用戶通過與界面交互而形成的感知）之間存在著一道鴻溝。
在設計團隊內部也是如此，比如“范圍輸入框”組件，你能想象它是一個什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因為這個組件不是常用組件，在ant design、arco.design組件庫中也找不到這個名稱組件，因為它是TDesign的產物。
而每個公司都會根據自己的產品特性創造一些非常規類組件名稱，這個時候就需要在所有參與產品創建的人之間共享。只有產品內部設計語言一致，才能去培養用戶的心智模型，這樣才能去除系統映像與用戶模型之間的這道鴻溝。
例如上面這個組件，每個人都需要知道這個組件叫“范圍輸入框”，而不是“輸入框”或者“數字輸入框”。
例如，teambition的目的是“輕松記錄要做的事，并與伙伴實時同步進展”。
于是，我們可以去看產品，設計體系在實現這一目標的過程中發揮了多大作用，以及這些設計實踐的效果如何。如果視覺、交互混亂，導致無法實現上述目標，那么可以認為這套設計體系是無效的。
上面介紹了設計體系包含的內容，下面我們針對這些內容進行具體的介紹：
做B端的小伙伴應該都知道ant design，但不知道有多少小伙伴有認真的看過ant design的設計原則。 可能有小伙伴會問這個設計原則有什么用，我最開始也覺得沒什么用，后來在參與設計體系優化過程中發現這個原則就是金字塔尖。
例如：用戶沒有填寫完表單，那么表單的提交按鈕能不能點？是置灰好，還是按了以后再給彈窗提示。
例如：可編輯表格，是放一個筆狀icon來提示可編輯，還是采用鼠標觸發時出現輸入框以及指針變為文本狀態。
日常工作中總會在這些細節問題上爭論很久，美其名曰“打磨設計”，其實很多時候就是設計原則在團隊內部沒有達成共識。
為了避免出現上述問題，我們要建立一套基本的價值觀和原則。在一些公司里，尤其是在處于初創期的公司里，嘗試建立一套共同的準則是很難的。設計原則是無法量化的，因此定義這些原則可能需要多次迭代。
對于原則到底是什么，可能存在一些爭議。有些公司的設計原則偏重于品牌，有的偏重于團隊文化，有的則偏重于設計流程。
例如，Pinterest的設計原則便偏重于品牌。
Atlassian公司沒有分團隊或者產品單獨制定原則。
他們的目標是在客戶可觸及的每一點上都體現一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現。
不過，盡管各處的價值觀是相同的，但體現程度并不一樣。
例如，官網就會較多的提現“”大膽”，但產品里面就不會，正如Atlassian公司的設計經理Kevin Coffey所說的，“沒有人想要一個‘大膽的’服務支持頁面”。
Atlassian 官網截圖 https://www.atlassian.com/zh
Atlassian 設計體系 https://atlassian.design/
我們以TED為例。TED的一條設計原則是“追求永恒，而不是追求潮流”。永恒這個詞不光體現在TED的界面上，還體現在TED的整個品牌和設計方法上。
這意味著他們不會為了追逐潮流而采用一項新的技術或引入一個新的設計元素。
例如：定義了原則為“簡化”（讓產品盡可能簡單，簡單到幾乎感覺不到它的存在）。這種原則就是不實用也不可操作的。
怎么能讓團隊所有人都能理解？
消除無用的部分。每一個設計元素，無論大小，都必須有一個目的，并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里，那么它便很可能不應該在那里。這樣的定義就清晰很多。
再例如：定義了設計原則為“有用”，什么是“有用”？
從需求開始。如果你不知道用戶需要什么， 就無法做出正確的事情。去做調研，去分析數據，去與用戶交流，而不是做假設。
好的設計原則也能幫我們確定優先級和平衡點。
Salesforce公司的Lightning設計體系的原則是“清晰、高效、一致、美觀”。
這些原則的優先級必須遵從以上順序?！懊烙^”不應該高于“高效”和“一致”，而“清晰”應該始終放在第一位。按照這種方式對原則進行排序，可以讓團隊在做設計決策時明確哪些東西應該優先考慮。
Atlassian和Airbnb的團隊成員被問及他們的設計原則時，他們都能脫口而出，沒有片刻猶豫，沒有人表現出遲疑，沒有人想要去翻看品牌手冊里的原則內容。他們為什么能把原則記得這么牢固呢？因為他們的原則足夠簡單、實用、易于讓人產生共鳴。
Airbnb公司的四條設計原則（“統一”“通用”“風格化的”“對話式的”）便深深地扎根于其設計過程之中。
每當設計一個新的組件時，我們都會確保它完全滿足四條原則。如果我們沒有這一套原則，便很難就各種問題達成一致意見。----Airbnb 首席交互設計師
每個團隊建立其設計原則的方法都不盡相同：有的會召開幾輪研討會，有的可能會征求CEO或創意總監的意見。不過，無論采取哪種方式，都離不開下面幾點：
從目的開始
TED網站的主要目的可以用一句話來表述：“盡可能廣泛地傳播演講?！币虼?，TED網站的精神和價值觀便是觸及盡可能多的人群，降低使用門檻，讓產品具有很高的兼容性和可訪問性。這意味著優化性能和提升可訪問性比添加華而不實的功能更重要，清晰的文案比大膽的設計更重要。
尋找共識
如果你仍處在定義設計原則的階段，那么一個有效的方法便是讓團隊的一些人或所有人（取決于團隊規模）各自回答關于設計原則的問題。例如，在他們眼里，什么樣的設計對你們產品來說是好的設計？他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設計原則？
面向正確的受眾
如果搞不清楚設計原則是為誰寫的，就一定會寫出含糊不清的原則。有的小伙伴說我們領導就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰而寫。原則到模式
作為一個設計師，定義設計原則可能對你來說也許并不難， 但怎么把原則、品牌價值、組件相結合，怎么體現在設計模型中，這個我覺得是個挑戰。
對于 TED 來說，信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難，所以有時候標題可能很長。對標題 進行截斷是很容易的，但對他們來說，演講信息的優先級是最 高的。
因此，他們沒有選擇相對容易的標題截斷方案，而是確保他們的設計模式可以容納長的標題。
功能性模式是界面中有形的構件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫表單），或者激勵用戶完成某種行為。
功能性模式可以很簡單（標簽?字、輸?框、按鈕 ），也可以組合成更復雜的模式（搜索組件）。
標簽?字、輸?框、和按鈕
搜索組件由標簽?字、輸?框和按鈕組成
隨著產品的發展，模式也在不斷發展。包括風格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。
我們用頂部導航舉例：
頂部導航是由logo、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的：搜索定位框告訴我們怎么快速找到想要的東西，導航帶領我們瀏覽全局，指引我們到想去的地方，而后面的的圖標按鈕讓我快速觸達。
總的來看，這些模塊都有一個共同的目的：引導用戶快速瀏覽使用。隨著產品的發展，模式也在不斷發展。
例如，隨著產品功能越來越多，可能會在導航上面新增設置功能，讓用戶自己去排布常用功能。又如，我們可能會對導航進行重新布局，把導航按模塊分類，采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代，希望它更好的實現各自的目的或者說更有效地激勵用戶使用。
在設計開始階段就闡明模式的目的，能避免在產品發展過程中做重復性的工作。
目的決定了其他的一切：模式的結構、內容及呈現。了解模式的目的，可以幫助我們設計和構建更加穩健的模塊。
如果說功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。
設想我們每個人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個衣柜。
不過，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因為家具的樣式、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂不 同。
上述這些屬性便稱作感知性模式。正是因為它們，可能你的房子就像是一個地中海風格的小窩，而我的房子就像是一個倉庫。
而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫，以及這些要素在界面中的組合和使用的具體方式。
有時，人們將這樣的特性視為產品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產品的發展而發展。
只有這樣，感知性模式才會成為讓產品脫穎而出的強大力量。
同一領域的產品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌，并讓品牌被人記住。
看下面的圖片，你能認出它們是什么產品嗎？
這兩張圖里面并沒有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標。然而那些視覺上的線索極具辨識度，所以你仍然很有可能看出它們分別屬于什么產品（即釘釘和飛書）。
這些視覺元素通過有意識地反復使用，便形成了模式，這就是為什么我們可以在沒有上下文的情況下認出它們。
在模塊化的系統中，想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的，因此它們可以將系統的不同部分連接起來。如果這種連接是有效的，那么用戶就會感受到模塊之間的統一性。
例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個公司設計體系不能混用。
如果說功能性模塊反映的是用戶需要且想要的內容，那么感知性模式關注的則是他們直觀的感受或行為。
在《網站情感化設計》一書中，作者提出了一 個簡單的方法，通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺主題的絕佳工具?？梢允褂脭底只姆绞絼摻ㄇ榫w版（Pinterest或花瓣都是一種用于創建數字化情緒板的常用工具）。
如果你目前做的產品是需要體現：科技、質感、智能，那上圖應該可以滿足這些條件，你可以通過這張圖與領導進行溝通達成一致，然后從中提煉出一些顏色、元素、材質，這樣大方向就不會有太大問題，只需在細節上進行打磨。
定義好了大致的方向之后，便可以使用樣式疊片來更加細致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設計交付物?！?
和情緒板一樣，樣式疊片可以為用戶和產品團隊提供有價值的討論點，并呈現他們對特定設計方向的初始反應。
arco.design 首頁這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準確地找到設計方向。
當功能模式和感知模式建立完成后，我們將它們集成到產品的過程，它們還將進行演變。
因為在真實的界面中，模塊、交互、樣式之間相互影響下會產生新的問題，這都是很正常的，是典型的迭代過程，這個過程會一直持續，直到設計語言最終形成。
像ant design、arco.design應該都經歷過這個過程，只是我們不知道而已，要不然也不需要花費幾年的時間打磨后才發布出來。
平衡品牌性與一致性：
過分關注一致性也會扼殺品牌性。矛盾在于，讓設計達到完美的一致性無法確保它依然具有很強的品牌性。有時，這樣做反而會削弱品牌性——在一致性和統一性之間存在著細微的差別。
《英國公開大學》的創意總監曾說過：“當你專注于產品一致性的時候，打造產品質感的一些重要的細微之處就有可能會丟失。
發展感知性模式需要為設計師賦予打破常規的權力，鼓勵設計師積極地探索更多的可能性。好的設計體系能在品牌的一致性和創造性表達之間取得平衡。
小規模試驗：
后期如果發現樣式無法滿足，我們如何將新的樣式引入設計體系呢？
可以先進行一些小規模的試驗是一種相當有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。
例如，在學習者完成一個步驟時，純功能性的切換按鈕缺乏慶祝和成就的感覺。于是，我們用帶有圓形樣式、彈跳 動畫以及勾號圖標的按鈕取代了先前的按鈕。
雖然新的按鈕樣式受到了學習者們的好評，但它與設計體系的其他元素格格不入。后來，我們開始在網站的其他地方應用圓形圖案、彈跳動畫和勾號圖標。如果不這樣做，那么整個設計 體系給人的感覺就是割裂的。
數字產品都是由團隊打造的。團隊里的每個人都有各自的具體目標，都有各自的截止日期。這就意味著難免會出現草率加入的模式、重復或錯誤的模塊。
我們能確保一個產品即便有多人協作，卻仍能連貫、統一嗎？ 只要我們團隊對自己的設計體系及其運轉方式有共同的理解，我們就能做到這一點。
這意味著我們遵循相同的指導原則，我們對品牌愿景的理解是一致的，我們在設計和前端架構方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說，創建統一的設計體系需要共享設計語言。
許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費力地創造出來的，而是由一群人構建出來的，這群人對能將這些建筑物變為現實的設計模式有著深刻的共識。
“幾組人可以通過遵循一個共同的模式語言，當場構思出他 們的大型公共建筑，就好像他們共有一個心靈。”
——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》
我們可以用類似的想法構建數字產品。設計語言可以讓人們創建出具有整體感的產品，哪怕不同的人負責不同的部分也是如此。
如果一個界面上的元素沒有恰當的名稱、團隊里人盡皆知的名。那么該元素就沒有在你的設計體系中成為有效的單元。一旦你給一個物件命了名，你就塑造了它的未來。
例如，如果你給的是一個表現型的名稱，那么它將來就會受到樣式的限制：“藍色按鈕”只能是藍色。
例如，如果你給的是一個狀態屬性的名稱：“幽靈按鈕”，它的特點是：按鈕形狀的透明按鈕，但有細實線的邊框，常用在有色背景上。
僅僅完成命名還不足以建立共享的設計語言。整個團隊都應該 沉浸到設計語言中去，讓它無所不在。
讓設計模式變得可見：
如果有條件，可以在墻上開辟一塊專門展示設計體系的空間，將它稱作“模 式墻”
讓你的設計體系更加開放，人們會感覺你歡迎他們的加入，歡迎他們提出問題甚至做出貢獻。
引用事物的名稱：
所有語言的共同特點是，只有不停地使用才能讓它保持活力。
它需要成為日常對話的一部分：
這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設計體系作為入職培訓的一部分將設計體系的內容作為入職培訓的一部分，新員工了解設計體系就會更加容易。當新員工入職時，他們將了解到設計指南是如何創建出來的，這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學》 內部，他們創建了一個入門性質的線上課程，其中有一章專門對模式庫進行了介紹，并包含了 一些小測驗和小課程，這樣可以幫助新員工更好的理解設計體系。
定期組織設計體系會議：
每個人都討厭開會。但是，如果你希望每個人都跟得上設計體系的發展，那么組織召開設計體系的會議就是必要的。這是所有設計師和開發人員共同專注于設計體系的時間。一開始，可 以每周舉行一次，當團隊找到節奏之后，可以每兩周舉行一 次。團隊可以利用例會時間就產品的總體模式（如圖標、排版）得出一致意見。同時，這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。
設計體系不是一夜之間構建出來的，而是通過日常的實踐逐漸形成的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：夜鷹YEAH 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
對于B端來說，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規范；因為之前企業要求并不高，但是隨著市場和環境的發展，企業對B端越來越重視，這些模版太類同，顯然就太爛大街了。隨后字節推出Arco Design、騰訊推出企業級設計體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產品的模版和規范，給了我們許多借鑒，能讓我們快速作出一個不出錯的方案。不過企業、市場的要求顯然不止于此，我們的設計追求也不止于此。那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
為啥要搭建設計系統？設計系統對我們開發團隊中誰有指導作用？
◆ 設計系統可以保證我們產品風格的統一性，降低用戶對新產品適應時間和學習成本；對UI設計輸出效率有很大的提高，在團隊協同中可以大大的減少無效溝通，節約時間成本
◆ 在開發團隊中，設計系統對UI、交互、前端、測試等崗位的工作都有一定的指導作用
設計原則是傳統智慧的沉淀與未來趨勢的結合體，能夠幫助我們更好的進行設計活動時代在進步，設計原則也必然需要不斷的更新以適應發展新的設計原則要求界面更友好，操作更加人性化。
這里我歸納了8條原則僅供大家借鑒學習:
◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作
◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步
◆ 統一性：頁面風格、色彩、布局等要保持全局統一，不可為了某一功能的美觀而去破壞整體
◆ 親密性：信息的關聯性強，距離就要相應的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大，要讓用戶對信息的區域劃分一目了然
◆ 對齊性：在界面中，將元素進行對齊，符合用戶的認知，引導視覺流向，讓用戶更加流暢的閱讀信息
◆ 對比性：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
◆ 重復性：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
◆ 穩定性：沒有任何東西比產品的穩定重要，down機再好的產品也是徒勞。會影響到系統穩定的事情不能做
響應式布局，能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統布局，常用柵格一般是16列或24列。
◆ 柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于圖標與文字間隔的小型元素。
◆ 模度：為界面布局的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗，我們網格基數設為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920頁面布局為案例：通常B端產品左側會有一個導航菜單，假設240px,右側核心工作區域總寬1632px, 右偏移240px ,列數16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導航和邊距固定不變。
上下布局以1920頁面布局為案例：通常左右會有一個留白區域，假設144px,中間核心區域總寬1632px, 右偏移144px ,列數16列，列寬86px, 間隙16px。
設計風格說白了就是用戶最直觀的感受，“商務、時尚、簡約、科技感、沉穩、年輕、高端...”?
決定設計風格的因素有這些：
色彩是UI設計的基石，人腦對于色彩的記憶度要高于形態；除了美學之外，色彩還是是情感和聯想的創造者。通過對自然的感知和行為，我們通常對色彩定義品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是體現產品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍/黨政紅/淘寶橙，他們都能直觀或間接的傳達產品特征屬性）
◆ 功能色：遵守用戶對色彩的基本認知，保持一致性，不過多的自定義干擾用戶的認知體驗，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態，比如正常、成功、失敗、警告、鏈接等
◆ 中性色：主要應用在界面的文字部分、背景、邊框、分割線等場景，根據使用場景，通常將中性色被定義為 3 類：文字、線條、背景
◆ 衍生色：B端產品中顏色的應用場景可能很廣泛，要考慮它的延展性，按照一定規則定義完畢主色，便可以自動獲得一系列完整的衍生色
設定統一的字體規范，無襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達，在互聯網時代后期在界面設計中字體樣式還是會以無襯線體為主。
◆ 字體家族：根據系統區分Mac or Windows，如果用戶使用的是Mac系統可以優先使用Mac默認字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購買版權字體的可優先考慮），例：
◆ 字號：為了提升用戶的閱讀體驗，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結合WCAG 2.0標準），將 PC/Web 端主字體從以前的12px改為 14px。
◆ 行高：為上下文之間提供了呼吸的空間，規范的行高，可以使得界面層次清晰、重點突出
◆ 字體顏色：WCAG 2.0 中將顏色對比等級分為 3 種，A級，AA級，AAA級，等級越高意味著顏色的對比度越高，呈現出來的視覺壓力越大。字體顏色數量不建議太多，根據文字主次關系定義3-4個為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）
◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）
圖形中有圖片、圖標、圖表，都對整體風格有一定影響，設定統一的圖形使用規范，可以使視覺效果更加和諧
交互，即交流互動，也就是說我們自己通過我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產生信息溝通的過程。在互聯網中交互對象個體主要是人和機器，所謂人機互動，相互配合，共同達成某種目的。
◆ 交互方式：保持產品的統一性，同類別的交互不可有不同的操作感受。要符合大眾的認知習慣，可創新但不可違背潛意識，例：wab端頁面鼠標交互操作一般有下拉、上滑、按壓、懸停，移動端一般左右上下滑動、下拉、上拉、雙指縮放...
◆ 交互狀態：按鈕狀態變化，頁面狀態變化，組件狀態變化...交互內容確實太大了，我個人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學習
◆ 引導：引導一般常見5 種：新手引導）、步驟引導、幫助/操作引導、新功能引導、空白頁引導
什么是組件？組件是抽象概念,對面向過程而言是對數據和方法的簡單封裝。對面向對象而言是一些符合某種規范的類組合在一起就構成了組件。它可以提供某些特定的功能。組件出現的原因軟件工程中重復、反復出現、普遍的、有相似的問題的出現,導致開發過程中有大量的代碼需要不斷的重新設計,開發周期延長,開發復雜度增加。需要岀現一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現就是為了解決這些實際問題的。
在前端眼里，組件通常是指頁面上的視圖單元，可以說，UI組件是組件的子集。組件庫大致可以分為這幾大類：
◆ 導航：固釘、面包屑、下拉菜單、下拉導航、電梯、菜單、分頁器、步驟條
◆ 數據錄入：自動完成、級聯選擇、多選框、日期選擇框、表單、輸入框、數字輸入框、提及、步進器、評分、下拉選擇、滑動條、穿梭框、文件上傳
◆ 數據展示: 頭像、標題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關鍵詞、時間軸、走馬燈、空狀態、徽標數、樹、標簽、標簽頁、圖片、氣泡...
◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認框、進度條、結果、加載中..
◆ 其他: 錨點、回到頂部、圖標...
設計規范是為了更高效的做設計，但不是一成不變的，它在落地使用的時或多或少都會有問題，需要我們慢慢的去反復檢驗它的合理性，發現不合理的及時更正，不斷迭代，不斷沉淀，不斷優化，這樣才能不斷提高產品的用戶體驗。此次分享借鑒一些前輩的經驗，主要是整理歸納學習，如有需要補充或糾正的，歡迎大家相互探討！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：小魚ID 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗（用戶使用產品，系統或服務過程中的主觀感受）
用戶在使用產品過程中建立起來的一種純主觀感受。用戶體驗這個詞最早被廣泛認知是在上世紀90年代中期，由用戶體驗設計師唐納德.諾曼（Donald Norman）所提出和推廣。對于一個界定明確的用戶群體來講，用戶體驗的共性是能夠經由良好設計實驗來認識到。用戶體驗并不是指一件產品本身如何工作的，更明確的是指“產品如何與外界發生聯系并發生作用”，也就是人們如何‘接觸’和‘使用’。無論什么產品，用戶體驗總是在細微之處，往往細節最能打動人心。用戶體驗通常要解決的是用戶具體的使用場景，要兼顧視覺和功能兩方面的因素，同時解決產品所面臨的其他問題。
產品的邏輯簡易程度對于用戶體驗是一個反向指標，產品越復雜用戶體驗會越發困難。往往產品后期更新迭代中，每新增一個特性，功能或者步驟，都會增加導致用戶體驗不順暢或者失敗的機會。用戶體驗的每一個流程，對開發者而言都要經過慎重的考慮和驗證。實際上設計出一個最優的解決方案需要更多的時間和精力，往往不得不在各個方面作出妥協。但是一個以用戶為中心的設計流程保證來這些妥協不是隨機決定的。
為什么每個產品都在強調‘站在用戶的角度，提升產品的用戶體驗’，因為優秀的用戶體驗就是商機，良好順暢的用戶體驗會極大的提升用戶轉化率，增加用戶的留存率。好的的用戶體驗主要體現在兩種形式：“幫助人們工作更快”和“減少他們犯錯幾率”。牢記“以用戶為中心的設計”在開發產品的每個流程都要把用戶列入考慮的范圍，每一個流程步驟都要代入用戶的使用場景中體驗，想用戶所想。提供優質的用戶體驗是一個重要的，可持續，良性的競爭優勢，用戶體驗形成用戶對企業的整體形象，并以此來界定來與競品的差異。
在產品的整個開發流程中都要考慮用戶有可能采取每個步驟的可能性，并且理解整個流程中每一個步驟用戶的期望值。
表現層：視覺設計，我們使用無論任何設備的產品最先看到的就是表現層，內容、功能和美學匯集到一起來產生一個最終設計呈現；
框架層：界面設計、導航設計和信息設計，框架層用于優化設計布局，以達到界面中元素的最大效果和效率；
結構層：交互設計和信息架構，相對于框架層更加抽象，框架是結構的具體表達方式，明確來元素應該出現在哪里；
范圍層：功能規格和內容需求，結構層明確了產品的各種特性和功能最優的展示組合方式，這些內容構成了產品的范圍層；
戰略層：產品目標和用戶需求，成功的用戶體驗，其基礎是一個被明確表達的“戰略”。知道企業與用戶雙方對產品期許和目標，有助于確立用戶體驗各方面戰略的制定；
在五個層面應該是自下而上的建設，戰略 — 范圍 — 結構 — 框架 — 表現；不同的層面位置考慮的方向和側重點是不一樣的，隨著層面的上升我們考慮的決策變得更加具體，并且涉及越來越精細的細節表現。每一個層面都是根據下面層面來決定的，每一個層面的決定都會影響上層的可用選擇，表現層由框架層決定，框架層是建立在結構層的基礎上，結構層是具有范圍層，范圍層是根據戰略層制定的。
按照產品不同屬性分為兩大類：功能性產品/信息型產品；針對不同的類型將五要素細分展示，功能型產品更加關注的是任務，去思考用戶如何完成這個過程，用戶使用該產品完成一個或多個任務的工具；信息型產品關注的則為信息，產品應該提供哪些信息，并且方便用戶快速尋找，理解，創建一個富信息的用戶體驗；這種把用戶體驗劃分為各個模塊和層面的模式，更有利于我們去考慮用戶體驗中可能出現的麻煩。所有處在同一層面的要素都會決定最終的用戶體驗效果。
優秀的用戶體驗基礎是要有明確的“戰略”立意，知道企業和用戶對產品的期許和目標，才能更好的促進用戶體驗各方面的完善和優化。我們要用過產品獲得什么？用戶通過產品可用得到什么？回答這兩個問題有助于我們更好的明確產品目標和用戶需求，結合兩者我們組成戰略層。
產品目標：目標的制定切記不要太過具體或太寬泛我們需要在這之間找出一個平衡點，為了更好的用戶體驗我們需要保證所作出的決策都不是頭腦發熱拍腦門定出來的，每一個決策，都應該建立在我們確切了解他所帶來的聯動影響效果。明確的定義出成功的條件而不是定義成功的路徑，有時候跑的慢一定不一定就是落后者。既然是賽跑肯定會有終點有結果的產出，我們要明確“成功的標準”制定可追蹤的指標，成功的標準不僅僅影響各階段的決策，也是衡量用戶體驗工作的具體依據，埋點數據采集，上線后的客戶流存率，轉化率，新用戶的增長率，老客戶的使用反饋等等。對驅動用戶體驗的決策而言有意義的成功標準，一定是可用明確與用戶行為綁定的標準，而這些用戶行為一定是可以通過設計來影響的。
用戶需求：明確正確的用戶需求是復雜不易的，因為用戶群體存在很大差異性，確定大致目標用戶后我們還需要精細化的區分，將用戶分成較小的，有共同特性的以此來助力我們更好的明確用戶需求，通過不同的角色群體使用產品來分析他們的需求。在針對用戶需求研究時我們還可以使用一些市場調研（將你想要的信息通過具體，有效的公式化問題，讓用戶提交你正確的答案）；現場調查（完整的，有效且全面的方法，了解與產品使用生活場景最匹配的用戶行為）；創建人物角色（模擬真實用戶使用場景更加貼近用戶，再產品思考中和用戶更感同身受）。戰略應該是用戶體驗中的起點，但并不意味著項目開始之前戰略就完全確定下來，它是可以在整個工作中演變和改進的。
當我們明確了解戰略層后，我們就知道產品應該為用戶提供什么功能和服務，這些也就逐步演變為范圍層。我們要做兩個事情來定義范圍層 —過程和產品。過程的意義在于當產品還在一個雛形時，可以帶動我們去思考流程中可能存在的問題，功能實現的優先級；產品的意義在于明確最終產出的結果，團隊有明確的目標。在這其中文檔的輸出是必不可少的，有計劃性說明性的文檔輸出可以讓我們的工作更加有條不紊的推進下去。我們可以從戰略層抽象出來 — “我們為什么要開發這個產品？”轉而到范圍層變為 — “我們要開發的是什么？”在軟件開發過程中，范圍層確定的是全部功能需求和功能規格。
功能規格：功能規格說明不需要包含產品的每個細節，只需要包含在設計或開發過程中可能出現混淆的功能定義。同時功能規格說明也不需要展望產品未來理想狀態，只需要記錄在創建產品時確定下來的決議。換句話說，文檔不能解決問題，但是定義可以，我們需要不是文檔多么詳細厚重，而是要足夠的清晰和準確。功能說明要明確具體避免主觀語氣，避免出現歧義，盡可能用量化的可檢驗的標準來定義功能有助于我們的驗收。
內容需求：很多時候我們說到的內容指的是文本。但是圖像，音頻和視頻有時候比文字還要重要。這些不同類型的內容結合到一起，相互協作去滿足某一個需求。內容特性想要達到的規模，將對你所做的用戶體驗產生極大的影響，內容需求應該提供每一種特性規模的大致預估，以便在設計過程中作出最為明智的決策。盡可能早的確定某個人來負責每一個內容元素也是非常重要的，避免后期開發實現達不到我們預期的效果。內容清單的輸出也是重要的，究其原因這樣團隊中的每個人都會清楚知道自己負責的哪些部分，明確責任，提高協同效率。
學會確定需求優先級，了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”，把那些需求點梳理出來，找到一種適宜的方式，讓它們符合你長期的規劃，這才是真正的價值所在。確定具體，系統的發展要求，并將任何不符合這些要求的想法作為潛在未來功能的囤積，只有通過這種更慎重的途徑，才可以真正的管理起整個項目過程。
在羅列出項目需求優先級，梳理出大致的流程，我們對于產品將會包括什么主要內容已經有了清晰的構想。然而，這些需求沒有進行全面的整合還是碎片化的存在。而結構層要做的就是整合這些創建一個概念性的結構。結構層適當的將我們關注點從抽象的決策和范圍問題，轉移到更能影響最后的用戶體驗具體因素。但是這里的交互設計和信息架構所產出的東西大部分還是概念性的內容。這兩項內容并不完全是技術，它要求開發者要有共情能力去理解用戶，理解用戶行為操作習慣，使用場景，思考方式等。將了解的這些知識代入我們開發過程中，這樣會使那些不得不使用我們產品的用戶帶來更好的用戶體驗。
交互設計：關注于影響用戶執行和完成任務的元素，即關注用戶所有操作，同時定義“系統如何配合與響應”這些用戶行為。任何一個交互設計的項目都有很大部分牽涉處理“用戶錯誤”當用戶發生錯誤時產品要給出什么提示，并且對于錯誤發生時，如何防止用戶再次發生錯誤？第一個也是最好的防止錯誤的方法，就是將產品設計為不可能犯錯的。第二個避免錯誤的方法就是使錯誤難以發生，即使一些錯誤發生，產品也應該幫助用戶改正錯誤。有效的錯誤信息和容易自我解釋的界面可以在錯誤發生之后幫用戶糾正。當用戶完成一些操作后無法糾正的錯誤，產品就該提供從錯誤中恢復的方式。對于那些不可恢復撤銷的錯誤，提供大量警告就是產品唯一可以預防的方法。
信息框架：研究人們如何認知信息的過程，對于產品而言信息架構關注的就是呈現給用戶信息是否合理并卻具有意義。在以內容為主的網站上，信息架構主要工作就是設計組織分類和導航的結構，讓用戶可以高效率，有效的瀏覽網站的內容。信息框架與信息檢索和分類體系密布可分，針對分類體系我們可以從上到下或從下到上這兩種方法來建立。
從上到下的信息架構從戰略層考慮，先從最廣泛的，有可能滿足決策目標的內容與功能開始進行分類，然后再依據邏輯細分出次級分類；從下到上根據對“內容和功能需求分析”而來，從已有的資料開始，先把他們分為最低級別的分類，然后再歸納到高一級分類，從而逐步構建出反應我們產品目標和用戶需求的結構。這兩種方法各有弊端，從下而上容易將內容的重要細節忽略，從下而上使架構過于精準的反應內容，對于后期的維護變動不是很靈活。因此我們要盡可能的從兩種方式中尋找一個平衡點。一個高效結構的優點就是具備“容納成長和適用變動”的能力。一個適應性強的信息架構體系，既可以把新內容作為現有結構的一部分容納進來也可以當成一個新的部分加入。
在充滿概念型的結構層牽引出大量需求后，這些需求都是來自我們戰略目標的需求。在框架層我們要更進一步的提煉這些需求結構，確定詳細的界面外觀，導航和信息設計，這樣才能使結構變得更加豐滿。框架層需要處理更為細節問題，在結構層我們建立了一個框架和交互設計。在框架層我們關注點就是界面的元素以及它們之間的關系。當我們提供用戶做某些事情的能力是，屬于界面設計；當我們提供用戶去某個地方能力，則屬于導航設計；當我們要傳達想法給用戶時，那就是信息設計。
界面設計：成功的界面設計就是要讓用戶一眼就看到“最重要的東西”，而另一方面，不重要的東西，不應該被注意有時候則它們根本就沒有出現在那。設計界面，平面最大的挑戰之一就是弄清楚用戶不關注的東西并減少他們的比重。將第一要表達的要素快速傳遞到用戶。
導航設計：任何一個網站的導航設計必須同時完成三個目標：1.它必須要提供用戶在網站的跳轉方式；2.導航設計必須傳達出這些元素和它們所包含內容的關系；3.導航設計必須傳達出它的內容和用戶當前瀏覽頁之間的關系；這三個目標就是必須要納入考慮的范圍，清晰的告知用戶“他們在哪里”以及“他們能去哪里”把用戶當成是“傻瓜上帝”。
習慣和反射作用是我們與這個世界交互時的基礎，我們在使用互聯網產品這么多年的時間中，絕大部分的操作效果和下意識的操作方式已經被養成，所以要讓你的界面與用戶早養成的習慣保持一致是很重要的，界面要與它自身保持一致。這并不是說，每一個界面問題的解決方式都必須毫無條件的死守這些習慣。當某種不同的方式有明顯的益處時，你反而應該嘗試謹慎的違背一些習慣，到那時需要我們做的每一個決定都要有充分的，明確的理由。有效的使用比喻，就是減少用戶在“理解和使用你的產品功能”是的猜忌，讓用戶第一眼就知道你的圖標表達的是什么意思，要有強指示性質。
內容，功能和美學匯集的地方，完成其他四個層面的所有目標并同時滿足用戶的感官感受。在框架層，我們主要解決放置的事情；在界面設計考慮可交互的元素布局；導航設計考慮在產品引導用戶移動元素安排；而信息設計考慮傳達給用戶的信息要素的排布；在向上就是表現層，我們這里要解決的就是彌補“產品框架層邏輯排布”的感知呈現問題。我們每一次經歷最終都是由我們的感覺器官來進行的。在設計的過程中這是用戶體驗的最后一站：決定我們設計最后被哪些（視覺/聽覺/嗅覺/觸覺/味覺）感受器官受到呢？
嗅覺和味覺對于用戶體驗設計師是很少考慮的范圍；觸覺更多的用于工業設計領域，關注用戶和產品之間的物理接觸；聽覺可以應用到不同類的產品中，如開機/新消息提示等；視覺：這是用戶體驗師最得心應手餓領域，幾乎所有的產品都會涉及視覺設計。代替用“什么具有美感”來評估一個視覺設計方案，應該吧注意力集中在他們能否“良好運作”，對于那些上層決定的目標，設計能否賦能幫助企業更好的變現，設計的本質就是用合適的方式幫助用戶/企業完成需求目標；
忠于眼睛評估一個產品視覺設計最簡單的方式，就是你的視覺首先落在什么地方？哪個設計要素第一時間吸引注意力？它們對于戰略目標是最需要表現的東西嗎？用戶第一時間接受的信息是你想要表達的嗎？設計還是要把握4大基本原則：對比；重復；對齊；親密性；
不管你的產品多復雜，用戶體驗都是一樣的，創建良好的用戶體驗最重要的工作內容就是大量收集解決細微的問題?！俺晒Φ姆椒ā焙汀白⒍ㄊ〉姆椒ā睔w根究底就是：1.了解你正在試著去解決的問題；2.了解這些解決辦法所造成的后果；必須要同時考慮五個層面的全部因素，這對于創建成功的用戶體驗至關重要。
提成正確的問題，面對那些用戶體驗需要解決的糾纏不清的問題，要抱有一種正確心態，不要以“節約項目時間或金錢”名義對用戶體驗問題敷衍了事。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：許小鵬 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從紙質閱讀到屏幕閱讀，通過理解用戶從紙質到屏幕閱讀行為的轉變，我們從傳統中文排印經驗中吸取對字體、間距、標點的處理方式，跨越平面與UI不同終端的設計規范和實現手段。在UI設計的語境中調整中文排版策略，優化手機百度圖文閱讀場景設計，提升手百用戶的閱讀體驗。
· 屏幕閱讀與紙質閱讀不同
人的閱讀習慣會根據閱讀環境而改變，包括文本的書寫格式、文本的媒介、語言符號等。基于屏幕的閱讀行為，往往表現了如下特征：很少人會一字一句閱讀頁面，更多的是在瀏覽、關鍵詞確認、非線性閱讀、有選擇性的閱讀。
· 設計差異點
UI設計與書籍排版不同之處在于：
第一、屏幕上可以實現更多的交互功能，增強了閱讀的沉浸感和交互體驗。
第二、UI設計不可控因素更多。平面排版紙張和內容固定可控，可以保證設計的精準展示。但在UI設計中，想讓頁面達到和原本設計一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內容的靈活可變，都讓最后的展示效果多了很多不可預期。這就是為什么會有很多排版優秀的印刷品設計，但UI中優秀的排版設計卻特別少。
因此，針對屏幕閱讀的設計要注意：不能照搬文字排版規則，更要充分考慮屏幕與內容的靈活可變，確保設計方案可實際落地。
· 明確設計目標
本次設計改版主要針對手機百度——圖文落地頁部分，希望通過優化文字展現、內容排版提升閱讀體驗。
CEA閱讀體驗模型將用戶的閱讀體驗分為舒適、效率、吸引三個緯度。
舒適（Comfort)：視覺負擔低，信息適量，看著不累、沒有信息壓迫感
效率（Efficiency）：重點信息突出，直觀性強，容易識別
吸引（Attraction）：頁面設計美觀，有吸引力
基于此模型，此次優化方案中我們確定的設計目標是：優化內容可讀性；提升閱讀效率；提升頁面美觀度。
· 優化內容可讀性
· 選擇屏顯友好字體
屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無法做到印刷字體那么多細節的設計。目前屏顯漢字的設計方式一般是：
1、從字體的結構入手，擴大中宮的設計，字形設計看起來舒適放松，提升辨識度，相較于中宮內縮的字體，呈現現代的明亮感。
2、字形簡潔，平直少細節的筆畫有助于提高字體本身的辨識。
遍歷手百用戶常用手機的默認字體，系統默認字體都是使用屏顯友好字體。
· 選擇字重更全的字體
與紙質閱讀相比，用戶在在屏幕閱讀中，會經常進行掃讀、關鍵詞確認，而不是像在紙質書上一字一句的讀。
目前我們提供給作者的能夠做重點信息區別的方式包括：文字加粗、風格化二級標題。但我們發現目前在一些安卓手機上，一些字體在增加字重后出現沾粘情況，不能保證可讀性。
字重，即字形的重量，字重的等級用來標明同一字體家族不同粗細筆畫的字形。
但通常一個特定的字體家族僅會包含少數的可用重量。若一個指定的字重不存在時，CSS會就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會映射到更輕的重量。
目前落地頁代碼中字體的設置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場景和分辨率較低的安卓機型上，會匹配到更粗的字重，出現文字沾粘的情況。
我們調整了font-family中的字體適配順位，在安卓端優先適配字重更全的字體，保證安卓端加粗字體的展現，優化內容可讀性。
· 提升閱讀效率
· 優化字間距和行間距
閱讀場景下，文字的間距是影響閱讀效率的關鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。
根據當前現狀，再結合行業設計經驗，我們選擇了字號與行高倍數組合的一系列方案，進行了眼動實驗和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過對比不同機型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁正文文字在當前方案基礎上縮字間距為0，擴大行間距1.70倍行號的設計方案。
· 段落間距適配字號
圖文落地頁的定位是長文閱讀場景，作者發文長度的中位數是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長度為2屏（純文字，無圖情況）。
對于長文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對長文的“畏懼感”，調整文章段落間距，一篇長文通過合理的分段，成為一段一段的短文，每結束一段短文，用戶都有機會進行休息并獲得滿足感。
出于屏效考慮，當前圖文落地頁段落間距不論用戶使用哪一檔字號，都為一個固定值。所以在調大字號的模式下，段落間距小，用戶難以區分；在小字模式下，段落間距又太大，降低了屏效。
優化段落間距的設定，段落間距應隨著字號的變化對應做出變大或變小的調整。調整后的最大字號與最小字號段落間距都更合適，閱讀節奏更好。
· 頁面美觀，提升吸引力
書籍排版中“微觀字體排印”中一直都關注字距、行距、標點符號等排版調整，這些排印規則大部分源于文字本身的規律，排版風格和規范，并不隨著設計潮流而輕易改變，是需要在所有媒介上都應遵循的規則。但是現在的UI排版中幾乎都沒有遵循，這也是我們經常覺得UI頁面上的中文排版看起來不精致的原因。
通過學習W3C《中文排版需求》《中華人民共和國國家標準-標點符號的用法》等中文排版規范文檔中對標點等微觀排版的調整思路，并結合UI場景落地，希望從細節處提升頁面美觀度和吸引力。
· 優化標題，突出內容
在標點使用規范中對標題中標點符號的使用有嚴格的定義：標題的作用是概括表明文章內容，一般標題中除書名號、引號等表示專用名詞的符號外，不應該出現標點符號，題中停頓可用空格表示。如確實因需要表明語意而必須使用標點符號時，應使用同號的半角標點，標題末尾除問號或嘆號外，一般不使用其他標點符號。
但在實際UI界面中，我們無法在生產端對作者使用的不規范標點符號進行逐一的確認、修正。UI需要的是展示規則，保證多種內容最后都能有良好的視覺呈現。
在不修改作者不規范標點使用的前提下，優化標題中標點符號的寬度：將標題中引號、書名號使用半角標點；連續標點將前一位標點使用半角標點，其余標點不變，目的是在保持標題基本閱讀節奏感的同時，減少標點在標題中的占位，突出標題內容。
· 標點首尾禁則
在中文排版規則中，為了保持閱讀順暢、體例一致，多數標點符號的位置有限制，通常一個標點符號依其性質，禁止出現在行首或行尾。這項規則自活字排版時代開始通行。在中文排版里面這項標點規則叫“標點首尾禁則”。
如何執行這種標點規避，平面排版中處理遵守“先推入，后推出”原則，即不希望標點符號出現在行首時，應在已經標點擠壓的基礎上再次檢查是否有機會將其擠到前一行，如沒有擠壓機會再從前一行取最后一個字至下一行。前行多出來的空間需按照優先順序拉伸，最后沒有拉伸機會再按平均拉大字距的方式處理。
但“先推入，后推出”原則在UI場景中實現難度太大，意味著在判斷每個標點位置的時候，還需要進行多次邏輯判斷，技術成本太高。因此我們以效率優先，將“先推入，后推出”原則修改為“推出式標點避頭尾”，即從上一行推出一個字排在下行的行首，避免行首、行末出現禁排的標點符號。
雖然由“先推入，后推出”退階為“僅推出式標點避頭尾”，但整體文章還是避免了標點出現在行首尾情況，遵循了中文排版基礎規范。
· 連續標點擠壓
中文的標點符號通常占1個字符寬度，便于識別、配置和排版，但當頁面中連續出現2個及以上的標點符號的時候，文章上會出現一塊空白，這些空洞會使在閱讀時候增加文字間距，使文字過于跳躍，增加讀者理解內容的時間，造成腦眼勞累；同時會造成版心灰度的不均衡，影響視覺美感。
標點符號字面分為“可調整”和“不可調整”兩類，“可調整”的標點符號標點本身在字面左、字面右、字面居中，可縮減掉標點不占位部分的空間。
不可調整的標點包括：半字連接號、間隔號、分隔號，因為這幾個標點固定半個字寬。
在《中文排版標準》里面說明：當文中出現連續標點符號排列時，為了使文字更加緊湊、易讀，應該對標點符號的寬度進行調整。如果兩個符號占用2個字寬，應當縮減成1.5個字寬。在此原則上，允許排版風格進一步調整讓兩個符號只占1個字寬。擠壓方向應該是標點符號緊靠內容，擠壓掉離內容遠的空間。
根據這一原則，我們在代碼中設置當連續出現兩個及以上的標點時，擠壓第二位及以后的標點為半角，縮減連續標點時的占位，減少閱讀時候的視覺跳躍，減少文章中出現的“空洞”。
· 完整設計方案
回顧整個設計方案，包括了3個部分：
1、對比屏顯字體與印刷字體，結合字體的字重，優化字體家族選擇范圍與展示順位，優化內容可讀性。
2、通過眼動實驗、可用性測試調整字間距、行間距和段落間距，優化閱讀節奏，提升閱讀效率。
3、學習W3C《中文排版標準》等規范，吸取中文排印優良傳統，通過對內容中標點符號等微觀細致的調整。使正文區頁面能夠保持字距均勻，版面齊整、灰度均衡。從標點細節提升頁面美觀度和吸引力。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當我們設計Web表單時，往往用最直覺的設計經驗本能驅動我們去解決一些看似在界面設計中最簡單的問題，但每每到細微之處，又會有無數疑問從細節中冒出來給我們的設計造成困擾。
例如：在表單界面Label（標簽） 和 Input（輸入框） 上下還是左右排列合理、Label要不要加冒號、輸入框到底多寬合適等等......
以上這類問題看起來并不影響用戶完成任務，很久以來也少有人關心這些細微之處會不會對用戶有什么影響。
以至于，我表達想寫一篇探究這些細節的文章時，同事會偷笑說：你都開始研究標簽末尾要不要加冒號了嗎......，太冷了——真是個冷知識！
確實如此，這些偏門、細碎的內容，鮮少有人會去留意和思考。因此我在寫下這些分享內容時期望可以達到目標是：“冷知識雖然冷，但有用”。用我了解的這些表單設計冷知識：啟發你的冷思維、引出你的熱思考。
話不閑聊，我們開始討論第一個問題：
///
01.標簽末尾要加冒號嗎
有個表單細節不知道你有沒有想過，標簽末尾是否要加冒號？
這個問題在我前團隊發生過激烈爭論，有同事說：“不要加，占用間距，而且沒人會留意它......”,也有人說：“要加，從含義上講，冒號的作用就是提示上下文或總結上下文的停頓。加上之后能更好表示標簽與輸入域的關聯......."。
聽起來好像都有些道理，那到底誰更對呢！
首先，我們追溯一下 Web 發展史，早期可訪問性核對清單中通常堅持要標簽帶冒號，因為屏幕閱讀器一度必須依賴各種技巧才能理解標記不明的表單。
而隨著技術發展，Web表單使用“label”標簽（tag）可以做正確的標記，那么屏幕閱讀器就能通過標記（markup）把標簽（label）和相應的字段對應起來則無需再借助冒號。
不過在客戶端又有些意外！曾經 Windows Vista 指南中明確要求使用冒號， Mac Aqua 也有此要求但規則會稍靈活一些。這種情況是因為某些情況下屏幕閱讀器在桌面環境與可閱讀源代碼的網頁標記相比會遇到一些困難，桌面環境不會直接顯示代碼。也是這個歷史原因，造成 Vista 和 Aqua 各自都有大量其標簽包含冒號的歷史表單。因為實在沒有必要把它們全部改掉，直到今天客戶端的表單依舊延續這一規則。
通過Web發展史我們明白表單標簽帶冒號的產生是為了解決早期屏幕閱讀器的識別，如今的屏幕閱讀器技術已轉變為識別標簽的底層代碼，無需借助這種形式了。所以從這點來看要求標簽帶冒號已經站不住腳了。
那從情感角度分析標簽帶冒號的是否對用戶體驗有影響呢？
回到最開始，我和同事們的爭論……
先簡單說下答案，無任何影響！
在《Web表單設計·創建高可用性的網頁表單》中，作者（卡羅琳·賈雷特）曾經做過大量的表單測試，最終證明從未有一名用戶談論冒號是否出現，即使是有些在其他環境中很介意標點符號的人似乎在線上表單中也未曾注意到。
從以上兩個角度不難發現，無論是從技術發展還是情感體驗，都證明可不必要求表單帶冒號；因為可用性訪問清單不再有這樣的要求，用戶研究也證明幾乎沒有人會留意表單冒號是否出現。
這樣的結論，看似表單帶冒號是失敗了……，但這并不妨礙它作為一種習慣或傳統延續至今，無論在客戶端還是Web設計系統中仍然常見。例如：蘋果電腦的Mac系統，國內阿里的Ant Design Web設計系統。
因此，得到以下幾點建議：
如果你希望自己的網頁表單與流行的桌面環境保持一致，請使用冒號。
如果你已有大量使用冒號的表單，請保持繼續使用下去。
如果你在建立一個新的系統，你也可以索性拋硬幣決定，不過要嚴格遵循一種方法。
///
02.哪種標簽對齊方式更好
在表單中標簽與表單域的對齊方式，如果你的團隊已有明確的規范和使用場景，你只要拿來主義即可。可如果某天由你主導定義一個新的表單規范時，不知道你會不會重新考慮哪種標簽對齊方式更好，怎樣區分使用場景！
通過科學實驗發現，無論是在眼動儀的熱圖，還是在許多可用性測試的觀察結果中，用戶在填寫網頁表單時視線主要集中在輸入框的左側。他們的視線幾乎不會落到輸入框的右側，甚至都不會瞟上一眼。
以此為基礎，我們在網頁表單設計中有3種最常見的標簽對齊方式：頂對齊標簽、右對齊標簽和左對齊標簽。你可能會說還有混合對齊標簽、內聯標簽、圖標標簽等，這些確實存在但并不是最核心的幾種對齊方式，它們基本是在這3種形式上變化，不脫離本質。
下面我們逐個分析一下：
1.頂對齊標簽：
馬泰奧·彭佐從2006年7月進行眼動研究發現，從標簽移動到輸入框只需50毫秒。比左對齊標簽快了10倍，后者需要500毫秒；比右對齊標簽方式快2倍，后者高達240秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優勢：
最利于減少表單填寫時間（標簽和輸入框位置最為靠近）；用戶視線固定，動線一直向下（清晰的完成路徑）；節省大量橫向空間（可用于以多種方式組合的相關輸入框）。
劣勢：
占用額外的垂直空間（如果可提供使用的垂直屏幕空間較小，應當謹慎使用頂對齊標簽）；建議使用輸入框50%至75%的高度作為相鄰輸入框間距。
適用場景：
希望用戶快速填寫表單，完成任務；同時，當輸入項存在主次之分時，對標簽擴展性要求高。
2.右對齊標簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。馬泰奧·彭佐的眼動研究發現，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在170毫秒和240毫秒，而填寫完成時間比左對齊快2倍。
優勢：
標簽與輸入框相鄰（方便快速填寫）。
劣勢：
右對齊布局造成左側不齊，影響了快速游覽表單的效率問題；若標簽文字寬度變寬，右對齊還存在靈活度問題。
適用場景：
既要減少垂直空間，又要加快填寫速度的場景。
3.左對齊標簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來，只是花費時間較長。根據馬泰奧·彭佐的研究，典型掃視時間為500毫秒，很長說明用戶經歷了沉重的認知壓力。
優勢：
容易游覽標簽；占用垂直空間較少。
劣勢：
標簽和輸入框的相鄰間距增大；適合于用戶不熟悉表單要收集的數據或問題無法分成易處理的內容組，左對齊標簽游覽表單問題會更容易。用戶只要上上下下閱讀標簽左欄，不會被輸入框打斷。
適用場景：
表單中存在較多的復雜或敏感信息，希望用戶放慢速度、仔細思考（在一些注冊類表單中較多使用）。
單從效率角度看，頂對齊標簽>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。
因此，得到以下幾點建議：
如果你希望用戶放慢速度，仔細思考表單中每個表單項，左對齊標簽是個好選擇，特別是含有大量可選輸入框或高級設置的陌生數據時；
而頂對齊標簽在一些國際化產品的表單設計時，會有更好的延展性；
至于，右對齊標簽雖然與表單域聯系緊密，便于用戶填寫，但是要考慮好標簽的長短不齊如何解決。能否精簡標簽內容，以及確定好表單與界面的邊距。
///
03.標記必填與可選字段的困惑
許多表單設計中，有個常見問題：是否應該標記必填字段？如果表單中的大多數字段或全部都是必填的，我們是否仍然應該標記它們？
先簡單回答：是肯定的，用戶有時需要通過必填標記來評估工作量，了解輸入信息量的最低限度。我會在下面具體解釋原因。
了解不標記必填字段的誘惑
通常，設計師會覺得每個必填字段都有一個標記是重復的、丑陋的、占空間，而且干擾界面，甚至可能看起來很擾亂（有認知負擔！）。因此通常采取以下一種或兩種策略：
1.在表單頂部顯示說明，說明中除非另有解釋，否則所有字段都是必填；
2.只標記可選字段，因為它們通常較少；
3.在某些特殊情況下，也會什么都不做：相信用戶會神奇地知道需要填寫什么字段；如果不知道，那么只需要點擊提交報錯即可。
這些方法有什么問題？如果你這樣想，我來告訴你
1.用戶一般不喜歡閱讀表單頂部說明。不難想象，用戶不太可能閱讀表單頂部的說明。表單字段需要自給自足，畢竟，每個字段都有特定指令——它的標簽，為什么用戶需要閱讀其他任何東西來填寫它呢？
2.即使用戶閱讀了說明，也可能忘記。你可能會說：用戶閱讀了頂部的說明，怎么就會忘記——這么簡單的事情？
的確容易忘記，特別是當表單很長或填寫表單被打斷時（這種情況在移動端很常見）。即使用戶記得，但這占用了工作記憶，增加了認知負荷。換句話說，你讓用戶完成任務更難了。填寫表單本身對用戶來說就相當有挑戰性——為什么要讓它更具有挑戰性？
3.用戶必須掃描表單以確定是否為必填字段。不難發現，無論是否在表單頂部包含說明，結果都可能相同，用戶會忽略或忘記。他們會掃視表單，找到一個標記為必填或可選的標識。
而且有些用戶甚至不會費心去環顧四周，他們只會做出假設。他們會想——“嗯，郵箱——不需要我的郵箱吧？先空著呢”。即使用戶沒有留空，也不得不暫停來思考一個字段是否需要填寫，減慢交互速度并使過程看起來更長、更乏味。
想要解決以上問題很簡單：標記所有必填字段。盡量明確和清晰展示每個必填字段，并標記它。當然，就像有些設計師所說：界面出現大量必填標識（紅色星號*）確實會增加視覺噪聲。甚至重復的星號 * 會帶來一些認知恐慌。但相比之下，兩害取其輕，這些負面因素是輕微的。
如何標記必填字段？
這里包含至少有兩種方式：星號*（紅色）和“必填”提示。星號*在網頁上已經很常見，用戶熟悉其含義。優點是它不占用太多空間，也看起來與標簽文字足夠不同，所以使用它。
可以使用其他標記形式嗎？當然可以，但是最好遵循市面上常見的形式（雅各布定律），這樣更符合用戶認知。
星號應該在字段標簽之前還是在字段標簽之后？
這不一定有實際影響，但將其放在標簽之前的一個原因是，只需掃視標簽的最左邊字符，就能輕松定位必填哪些字段。
星號*是一種視覺標記，應當仔細考慮表單中的標識位置。標識在標簽左邊能指引用戶迅速瀏覽界面，并判斷出必填項。如果在右側由于輸入框形式、長度各不相同，標識和輸入框對齊會導致難以瀏覽和判斷。
是否也應該標記可選字段？
雖然這不是強制性的，但標記可選字段確實減輕了用戶思考：如果沒有這個標識，用戶要環顧四周，并根據其他標記字段推斷該字段是可選的。如果“非必填”在字段標簽旁邊，那該任務會變得更容易。不描述可選字段，這沒問題，但這樣做會是一個很好的額外幫助。
為什么登錄表單沒有標記必填？
登錄表單很短，一般由兩個字段組成：用戶名和密碼，這兩個字段總是必填的。如果使用星號*，標記這些字段的成本很低，并不會出錯。但是，絕大多數用戶都使用過很多登錄表單，他們是知道要登錄需要輸入郵箱/用戶名和密碼的。所以，在登錄表單中，可以省略這種形式。
而在注冊表中不標記必填字段是危險的。注冊表單因產品而異——不同公司在創建帳戶時需要不同類型的信息。它不僅僅包含用戶名和密碼，所以請標記所有必填字段（包括用戶名和密碼）。
因此，提出以下幾點建議：
基礎前提，盡量去除任何不需要回答的問題，特別是涉及到用戶隱私的內容?？梢愿菀鬃層脩籼钔瓯韱?。
為了增加表單填寫的機會，請盡量減少用戶需要付出的努力和他們需要記住的信息。有很多方面有助于解決這些問題，但標記必填字段（以及可選字段）是最容易的方法之一。
///
04.表單域提供一些默認值有必要嗎
先給出答案：這是肯定的！
在《選擇的悖論》一書中，作者巴里·施瓦茨討論了生活中選擇過多的影響。并提出策略應付無處不在的過多選擇。他特別敘述了智能默認的能量——即在滿足多數人需要的地方放置選擇——來幫助人們做出明智的選擇。
而在Web表單中也有很多地方能利用智能默認減少不必要的選擇次數或輸入，加速表單完成過程。所以，只要合適就在表單域中預先為用戶填寫你認為他們想要的輸入值。
通過提供合理的默認，能有效節省用戶時間，就是這么簡單。應用分擔了用戶思考或輸入答案的工作。填寫表單永遠不是一件有趣的事情，如果這個模式能把表單填寫的時間減少一半，用戶會非常感激。
你可能會問：默認值不是用戶想要的，誤導用戶怎么辦？
在設計有默認值的表單域時，你要思考默認值是否是大多數用戶可以接受的答案，如果不確信可以先去做一下用戶調研，了解用戶的心聲。
就算默認值真的不是用戶想要的，至少你也為他提供了一個示例來告訴用戶答案應該是什么樣子的。這一點也可以節省用戶幾秒的思考時間——或避免一條錯誤信息。
但并不代表所有的表單域都要給出默認值，我們只是盡可能的讓用戶節省時間。
如何使用：
在第一次向用戶顯示表單時，用一個合理的默認值預先填寫文本框、組合框或者其他控件。也可以使用用戶之前提供給應用的信息來動態地給出默認值（例：通過身份證自動識別出生日期；利用郵編，推導出對應省/市）。
如果只是因為你覺得不應該留下空白的輸入域，那么不要使用默認模式。只有當你有理由確信絕大部分用戶，在絕大多數情況下，不會修改這個取值時才提供默認值——否則，這將會給用戶帶來額外的工作！
///
05.輸入框的寬度如何設定
有一個容易被忽視但實則舉重若輕的問題，表單中輸入框寬度如何設定？
在表單設計中，對于 Checkbox、Radio 等控件，很明確必須跟隨內容自適應處理。但對于Input、Select等你會不會產生困惑，是定寬處理還是跟隨內容更好。
不知道你是否試圖這么理解過？輸入框作為用戶填寫信息的主要方式，其表現形式是否可以提供給用戶填寫表單的有用線索。
唐納德·諾曼的著作《設計心理學》中詳細講解過心理暗示方面的內容。而寬度的變化就是一種有效暗示。
在真實場景中，大部分輸入框是存在理想長度的，那么就應該向用戶暗示所需輸入內容的長度來減輕判斷負擔。
下圖就是典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理，反而容易誤導用戶對輸入金額的判斷，造成一種不安全感。
表現形式要為用戶填寫提供有用線索，采用不同長度的文本框提供了暗示；這種暗示是一種有用線索，當輸入框長度長短不定時，用戶會很自然地思考為什么這樣；填寫輸入框時會自然考慮這些線索。
請注意！保證暗示效果的同時，不要設定太多的寬度，反而會讓表單顯得凌亂；太少又會讓表單看起來都像四四方方的盒子。最佳方法是找到適合產品的最佳模度值和數量。
什么是模度值和數量呢！
落在具體設計上要先梳理產品中常見的表單類型，然后設置一個默認寬度。以此為基礎來有規律的增加長度，并考慮清楚它們的適用場景；從而定義出不同的模度，最終制定出整潔有序的模度規范。這樣就可以讓一線的設計師們跳過部分繁瑣磨人的細節思考，快速搭建出合適的表單寬度并合理有效。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
設計語言最底層是項目設計語言，具有典型特征和主題，比如醫療項目凸顯專業冷靜，節日項目凸顯熱鬧氛圍。往上一層是產品設計語言，強調個性品牌，比如小視頻的設計深色更沉浸，電商從結構到色彩都凸顯熱鬧。很多產品隨著發展，形成一些系列平臺服務，平臺設計語言確保服務“統一規范”。最頂層是生態設計語言，跨設備跨平臺和硬件呈現的設計語言。
設計動手前，按照風格基調具象化拆解分析必不可少，每一個元素的表達手法都要定位清晰。
圖標體系化，多場景驗證一致性，發現方案一不夠極致，造型復雜；方案二具備良好的一致性，但破壞了物體固有的結構，影響識別度。
在一致性的前提下，嘗試簡化、提高識別度。巧妙的將光影和結構交匯，極簡到2個圖層呈現主體；語義清晰識別度高；角度漸變光影帶來舒適親和感，15°x角度的精準把控傳達專業的品牌特性。因此總結出圖標繪制要遵循的法則為識別性、品牌性、愉悅性、一致性。
初期直播品牌色繼承百度App品牌色，隨著業務逐漸中臺化，需要專屬直播色。運用色彩心理學傳遞給人不同的情緒及心理感受，尋找直播的專屬色相，而活力、溫暖的紅色色調，更能體現親和有力的產品氣質。
紅色也有冷暖之分，此時提高色相、飽和度的顆粒度，H色相以350°為起點，以2°遞增或遞減，S飽和度以5°為階梯，生成更多色階（保持相同B明度100），在多界面和真機驗證，得出直播專屬紅（H350 S80 B100），冷暖適中符合平臺屬性。
這種量身打造的稀缺材質運用在運營玩法上，如紅包雨玩法，即能凸顯平臺專業用心的態度，又能強化用戶消費行為轉化，助力變現增長。
用戶激勵體系，采用3D玉石潤澤質感+動態折射光影，體現有內涵不張揚的泛知識調性，凸顯用戶獨特身份感。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
伴隨短視頻平臺的崛起，移動互聯網的主流內容消費形態向短視頻視聽語言轉變，視頻信息流廣告的時代已經來臨。如何通過設計提升轉化，是視頻信息流廣告所面臨的挑戰。
為了提升廣告轉化效果，我們結合實際項目，通過大量的實驗與思考，梳理并總結了一套適用于視頻信息流廣告的轉化組件呈現原則，我們將其命名為“延遲增強”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場景。
///
延遲增強是什么？
視頻信息流廣告有三要素：內容、框架、轉化組件。其中廣告內容來源于廣告主投放的物料，基礎框架需對齊宿主保持一致性，所以僅有承載轉化信息和行為的轉化組件，是可設計部分。
而“延遲增強”就是針對“轉化組件”的一種伴隨視頻內容分階段/漸進式的呈現方式。它由消費者決策時的理想心理動線，結合廣告行為推導得出，并經過實驗驗證了其對于轉化提升的有效性。
“延遲增強”包括兩個階段：1.廣告展現初始階段，延遲展現廣告意圖，通過內容吸引潛在用戶；2.廣告內容逐步呈現階段，轉化組件漸進式增強，輔以增益信息，不斷強化，引導轉化行為。
它指導了轉化組件從“呈現”到“增強”的全流程，從時機（出現&增強時機）/引導（動效&互動引導）/前置（信息&轉化前置）三個部分，幫助提升廣告轉化效果。
///
時機-延遲增強如何呈現？
轉化組件的呈現時機包含“何時展現”與“何時增強”兩個部分，前者幫助增加廣告接收率，后者提升廣告轉化率。
01/ 出現時機：
延遲展現廣告意圖，可以提升廣告賣點的展現機率
互聯網的快速發展使得受眾被動卷入爆炸式增長的資訊信息體中，廣告借助這一媒介迅速發展，但也因為部分商業廣告的過度宣傳與其降低用戶信息獲取便捷性的本質，不可避免的使受眾產生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。
所以對廣告來說，在廣告展現初始，延遲展現廣告意圖，融入內容，可以緩解受眾的抵觸情緒，提升廣告賣點的展現機率。
02/ 增強時機：
通過用戶行為和視頻特征動態決定增強時機，可以有效提升轉化
對廣告來說，搭配廣告內容進行增強，通過內容積累購買欲/信任感，然后通過階段性的增強來提示操作，對比一成不變能起到更好的轉化效果。
我們首先嘗試了程序化的增強時機，在不增加技術成本的前提下，根據歷史經驗，面向不同的廣告均采用固定時段的階段性增強。
但不同的廣告物料內容不同，不同的用戶偏好也不同，固定的增強時機并不能很好的滿足所有廣告需求。所以在技術能力可以承載的時候，我們采用了動態時機策略，通過用戶行為和視頻特征動態決定增強時機，在程序化增強時機之后，再次實現了轉化提升。
///
引導-延遲增強如何引導轉化行為？
轉化組件如何引導轉化，則可分為基礎的視覺引導與進階的互動引導，前者幫助搶奪視覺注意力，后者則能夠在互動體驗中植入部分幫助決策的“小心思”。
01/ 視覺引導：
適當增加視覺吸引點，可以有效引導點擊
延遲增強需要通過階段性的增強來提示操作，而如何增強能有效吸引注意則需要琢磨，已有實驗表明轉化按鈕增加掃光動效與智能取色，能有效吸引注意，引導點擊，對轉化提升有良好效果。
02/ 互動引導：
讓用戶主動選擇，可以增加廣告曝光，輔助轉化決策
互聯網產品設計對于用戶交互體驗的追求越發極致，如影視行業走向可交互網劇，本質上是從用戶接收轉變為用戶主動參與，用戶本身對于獲得優質體驗的意識逐漸覺醒。商業化產品也需要緊跟“體驗”與“互動”，將廣告變為互動體驗或具備使用價值的信息，讓用戶從被動瀏覽到主動參與，掌握對廣告的選擇權。
以互動投票為例，我們通過用戶與用戶之間的觀點表達，以投票選擇的形式誘發群體性選擇，引起好奇心與同儕壓力。
若用戶選擇符合群體選擇，則帶來群體性背書，增強信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對群體選擇產生好奇，從而瀏覽兩種選項的內容，有效的增加了品牌曝光。
///
前置-延遲增強如何幫助轉化達成？
轉化組件的前置主要包含信息前置與轉化前置，前者輔助轉化決策，后者幫助便捷操作，更好更快的完成轉化。
01/ 信息前置：
增加增益信息或前置落地頁信息，可以輔助轉化決策
購買/轉化一定是需要足夠的信息積累信任感才能達成的，在前卡適當的增加賣點信息能夠更好的幫助用戶決策。針對下載類廣告可增加評分與星級，二電類廣告可以增加價格信息，甚至可以前置優惠劵、圖片banner等信息，均能實現轉化的正向提升。
02/ 轉化前置：
縮短轉化路徑，可以幫助轉化行為更便捷的達成
在信任感積累與階段性的增強都達成的時候，在當前轉化對比跳轉落地頁再進行轉化，鏈路更短，用戶流失概率更小。比起實驗嘗試，更像是延遲增強的基礎能力配置。
首先，我們針對表單/咨詢/電話/安卓下載都進行了轉化前置，具有用戶明確意向的按鈕點擊會直接在當前進行反饋。
除了直接將操作前置外，針對不同細分場景的需求，還可以通過交互形態的優化在感官上縮短路徑。
這里以百度的視頻MAX廣告為例，我們針對重落地頁的商家，將MAX首屏（視頻頁）與H5落地頁的關系變拼接結構為雙層結構，通過浮層面板承載落地頁，延時自動彈出，強引導下方內容，激發用戶上滑瀏覽興趣，解決了落地頁隱藏較深，轉化鏈路過長的問題，同時增加了落地頁曝光從而提升轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn