什么是柵格？我這里就不做說明了。很多優設的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設計師始終糾結的點來和大家一起討論討論。
B 端到底用什么尺寸進行設計？
要弄清楚用什么尺寸設計，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點類似于 PC 網頁設計，實際上也差不多?，F在的B端設計中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側，右側區域做自適應。
我們看一下百度統計最新出來的當前計算機分辨率數據，從統計的數據中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進行設計了？
顯然不是按照這個維度來確定尺寸的。對網頁設計來說，設計師差不多都知道有一個 1200 有效內容區域的說法。如果沒有特殊要求，上下布局也是遵循這個原則的。設計師中絕大部分，包括我很多同事平時基本上用的 1920 和 1440 兩種尺寸來進行設計。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設計的時候，遵循 1200 有效內容區域這個原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結，沒有特殊要求，這些都沒啥問題。
上下布局在 B 端設計中是一個補充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據左右布局來，保持統一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因為考慮縮小瀏覽器會發生遮擋或者擠壓（別問我為啥還記得，因為當時對于尺寸糾結的太厲害，至今難以忘懷），現在因為技術等方面的發展，個人認為再用 1280 的做已經不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設計 B 端行不行呢？我認為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當他沒問題了。不過我還是建議大家在做 B端設計的時候用 1440 的來做，特別是用戶群很復雜的情況下，方便低分辨率的電腦查看。當然如果我們給某一企業做定制服務，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。
現在有很多插件可以進行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創建了一個 1440 的網格系統，供大家參考，大家也可以根據自己的實際情況去建立自己的網格。
頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內設定的；左側可以根據目錄內容自己設定一下，一般 200 多就差不多了。邊距我一般設定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數即可。
有時候做柵格的時候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設定也是可以的，回歸到柵格系統的意義，柵格本質上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協調與統一，所以大家沒有必要糾結。
“沒有絕對正確的柵格設計，只有最適合的柵格設計”，希望這篇文章可以幫助對柵格有疑惑的設計師們，同時也期待大家留言，大家一起學習探討。
文章來源：優設網 作者：神經蛙
前言
表單是我們生活中常見的信息添加、錄入的方式之一，如何進行表單的設計也是 B 端設計師的必修課。身邊別的部門的同事常常會說：表單不就是幾個輸入框，幾個組件組成的東西么，挺簡單的，有什么好設計的。但通常情況下，越是簡單的東西，要思考的點卻越多，想要把一個表單做好也是一件不容易的事情。
生活中，大多數人都不喜歡表單，比如前段時間有一些許久沒有聯系過的朋友讓我幫忙填寫一下調查問卷，作為一個熱心市民的我，自然是選擇點開鏈接幫忙填寫；一鼓作氣填了一段時間后，看著剩下的問題，我不耐煩的放棄了填寫這個調查問卷。所以作為設計師，我們應該“由內而外”而不是“由外而內”的去設計表單，如何讓表單變得更容易讓人接受也是設計師應該考慮的問題。
更多兆日UCD的干貨：
表單是一種用于信息添加、錄入的頁面類型。是連接用戶與數據庫的橋梁，通過引導用戶進行信息的填寫，從而提交數據給后臺。在用戶填寫提交時，還需要對用戶輸入內容進行校驗與反饋，保證用戶信息填寫的完整度。
填寫表單是一件麻煩事，當我們想做的是投票、網上購物或者添加好友之前，總是會有表單防礙著我們。正因為多數人不喜歡填寫表單，所以在做表單設計時，我們的首要目標是讓人們迅速輕松的完成填寫，同時獲得系統和用戶想要的東西。
1. 表單拆分
基礎表單中會有以下六個元素：
1. 標簽：標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解；還有一部分是告知用戶哪些是必填項。
2. 占位提示：直接展示在輸入項中，采用弱提示文本對所需信息描述，當用戶輸入信息時即消失。
3. 校驗：對輸入項進行驗證，并給出反饋提示，如：用戶未填寫，格式錯誤、內容錯誤等
4. 基礎組件：可交互輸入的區域，是構成表單的核心內容，主要有：輸入框、單（復）選框、上傳、時間選擇器、開關……
5. 提示：描述該輸入項需要的輸入類型，如：上傳的文件類型
6. 按鈕：用戶完成輸入后，點擊按鈕進行提交、進入下一步等，按鈕一般是跟隨的最后一個輸入項后面，若輸入項超出一屏顯示，建議將按鈕懸浮固定在底部。
當我們開始制作某一表單的時候，我們需要強迫自己思考一下每個元素的 UI 問題：
2. 表單錄入模式
表單根據錄入模式可以分為：單步表單、分步表單和高級表單
① 單步表單：
單步錄入指的是在一個頁面即可完成內容輸入。使用于內容較少，結構簡單的場景，我們常見的登錄頁就是典型的單步表單。
② 分步表單：
內容較多、錄入內容的方式差異較大的情況且業務本身具有流程化特性，一般通過添加分步導航展示內容。常見的例如銀行轉賬，修改密碼等等。
③ 高級表單（分組表單）：
高級表單（分組表單）：主要用于需要一次性錄入大批量數據的場景。高級表單與分步表單有點類似，都是為了減輕用戶填寫壓力，將填寫內容進行分塊。不同的點在于，分步表單的流程化明顯，后一步填寫的內容都是基于前一步來填寫、是前一步反饋。
3. 表單的頁面框架
表單的頁面框架指的是承載著整個表單頁的頁面框架，即：整頁式（新頁面）、彈窗式、側邊欄式。因為其頁面面積大小不一樣，所以使用情境有所不同。
整頁式（新頁面）：最常用方式，適用于絕大部分的表單，可以支持構建復雜的表單。
彈窗式：通過小面積的彈窗進行輕量化的編輯，方便快速進行增、刪、改、查；輸入項較少，一般不會有滾動條。
側邊欄式：與彈窗式相似，通過小面積的側邊欄進行編輯；可承載比彈窗更復雜一些的表單內容，可以有滾動條。
我們在選擇頁面框架時通常需要綜合以下三個因素去考慮：
4. 表單的排列方式
① 布局方式
在制作表單的時候分成兩種排列方式：單列布局和多列布局。我們可以通過以下幾個因素去考慮使用什么布局：
1. 在輸入項不多的情況下，建議采用單列布局，因為單列布局，用戶填寫的路徑就是從上至下的一條直線，十分符合用戶的視覺動線，能夠提高用戶瀏覽與填寫的效率。
2. 多列布局的表單會導致用戶的視覺路徑變長，用戶需以 “Z” 字形的視覺動線掃描表單，會提高瀏覽與填寫的效率，并且多列表單容易造成用戶填寫時的混亂，易填錯，體驗差。
但是有時部分業務訴求和某些特性的場景要求，會需要在有限的空間上放入更多的控件來收集用戶的信息，這時就不得不使用多列布局的樣式，因為多列能夠省縱向空間。
單列布局
優勢：視覺路徑清晰，填寫效率高，體驗好；
劣勢：垂直空間占用率高。
建議使用場景：表單內容較少的情況下使用單列布局
多列布局
優勢：省空間，能夠放置更多的控件；
劣勢：視覺路徑模糊，填寫成本高，填寫易出錯。
建議使用場景：關聯性強的填寫項橫向排放，且將該列中最重要填寫項的放于最左側。
② 標簽對齊方式
標簽的對齊方式有：左對齊、右對齊和頂對齊，除了需要考慮單列式布局還是多列式布局，還有我們也需要考慮標簽的對齊方式。
馬泰奧·彭佐在 2006 年 7 月對表單的每種對齊方式做過眼動測試研究，根據研究結論做出以下分析：
頂對齊標簽：
研究中，從標簽移動到輸入框只需 50 毫秒。比左對齊標簽快了 10 倍，后者需要 500 毫秒；比右對齊標簽方式快 2 倍，后者高達 240 秒。能迅速填完頂對齊標簽表單的原因之一，是因為眼球只需要在標簽和輸入框之間進行上下單向運動。
優勢：眼動測試中移動速度最快，最有利于提高用戶填寫表單的效率。標簽字數相比于左右對齊標簽可容納更多字數。
劣勢：縱向空間占用率高，對于小屏用戶不太友好（設計前需要考慮用戶使用場景以及使用設備）
建議使用場景：希望用戶快速完成表單；對標簽的擴展性高，有國際化需求（中文轉英文，英文會比較長）；更適用于彈窗式、側邊欄式布局。
右對齊標簽：
如果要盡量減少表單占用垂直屏幕空間，右對齊能提供快速完成時間。研究中，專家用戶和新手用戶掃視（眼睛運動）右對齊標簽表單的標簽和輸入框的平均時間分別在 170 毫秒和 240 毫秒，而填寫完成時間比左對齊快 2 倍。
優勢：標簽和輸入框位置緊密，更方便填寫
劣勢：右對齊的布局會造成標簽的左側不齊，影響快速閱讀表單的效率問題；如果增加填寫項標題字數過多，整體的表單頁都需要修改，右對齊靈活性低。
建議使用場景：適用于需要填寫效率但受到屏幕垂直面積限制的頁面。更適用于整頁式布局。
左對齊標簽：
在頂、右、左三種方案中，左對齊表單填寫速度最慢。因為左對齊表單解析問題時眼球定位次數最多，用戶一般情況下都能將左對齊布局中的標簽和輸入框聯系起來，只是花費時間較長。在研究中，典型掃視時間為 500 毫秒，很長說明用戶經歷了沉重的認知壓力。
優勢：易瀏覽標簽；占用縱向空間較少
劣勢：標簽和輸入框距離較大，表單填寫效率低
建議使用場景：需要讓用戶認真思考后填寫的頁面；更適用于整頁式布局
輸入字段上方的粗體標簽
在頂對齊的情況下，設計師可能會想：如果我們將標簽進行加重，這增加了它們的視覺重量，并將它們帶到了布局的最前面，這樣說是不是可以讓用戶更好的去完成表單的填寫呢？但事實卻和設想相反：粗體標簽反而增加了用戶填寫的負擔。
粗體標簽導致從標簽移動到輸入字段的掃視時間增加了近 60% ，從沒有粗體標簽的 50 毫秒到有粗體標簽的 80 毫秒，更突出的標簽沒有明顯優勢。粗體標簽更難讓用戶閱讀和感知——可能是因為粗體文本和輸入字段的相鄰粗邊框之間存在更多的視覺混淆。
小結
標簽位置：單從效率角度看，頂對齊>右對齊>左對齊，但是根據應用場景，效率快并不是我們選擇標簽對齊方式的唯一的指標。在大多數情況下，將標簽放在輸入字段上方效果更好，頂對齊的情況下標簽的擴展性更高，且用戶不會被迫分開查看標簽和輸入字段。需要注意在視覺上將下一個輸入字段的標簽與前一個輸入字段分開。
粗體標簽：閱讀粗體標簽對用戶來說有點困難，因此最好使用純文本標簽。但是，當使用粗體標簽時，可能希望將輸入字段設置為沒有粗邊框。
1. 什么是表單的校驗
為了讓用戶準確的填寫表單，在用戶填寫表單中/填寫表單后，常常會增加我們常說的“反饋提示“，針對反饋信息的準確性，我們會采用兩種校驗形式：前端校驗和后端校驗。
① 前端校驗：
主要負責校驗輸入的內容格式是否正確；例如常見的手機號格式是否正確、密碼格式是否符合要求。
② 后端校驗：
與數據庫相關，主要負責校驗輸入內容是否正確；例如常見的手機號是否存在，密碼是否正確。
③ 校驗觸發條件：
④ 報錯方式：
2. 校驗形式
根據不同的校驗觸發條件和報錯方式，我們可以組合成以下幾種校驗形式：
① 輸入時即時驗證，即時報錯
用戶在輸入的過程中進行實時驗證，輸入框處于聚焦時開始提示，隨著輸入的過程，符合要求后已與用戶通過驗證的反饋。例如在注冊阿里云賬號時，設置密碼需要滿足三個條件，這里采取了即時驗證。
優點：可以實時告知用戶表單的填寫時候符合規范
缺點：實時驗證會使用戶分散注意力，也有可能會引起用戶的反感
使用場景：注冊時需要設置密碼，通過密碼不同的組成，時判斷密碼的強度，比如純數字密碼符合最低安全要求密碼，但增加大些字母和小寫字母后就形成了更安全的密碼
② 失去焦點后即時報錯
用戶在輸入完成后進行驗證，輸入框失去聚焦后（即用戶點擊輸入框以外的位置后）與用戶進行反饋。例如在注冊網易郵箱時，填寫完畢后即時報錯。
優點：為用戶修改錯誤節省時間、避免出現很多錯誤需要改正的情況。
缺點：如果輸入有誤，用戶需要多一步操作，點擊會有錯誤的輸入框進行修改。
使用場景：注冊用戶名時，取消聚焦后會反饋用戶名是否可用，不可用的情況下是被注冊還是格式有問題。
③ 操作后（保存/提交/下一步）后全部報錯
用戶完成表單填寫后，點擊操作按鈕（保存/提交/下一步），系統將表單統一上傳到后端數據庫中進行對比后集中與用戶進行反饋。
優點：減少對用戶的打擾，減少后端服務器壓力，提高效率
缺點：用戶只能點擊按鈕后才可以得到反饋，不能及時修改；若表單過長，用戶返回修改的路徑也將增加。
使用場景：登錄賬號是判斷密碼是否正確
在大數據盛行的今天，人們不僅僅講究以事實說話，更愿意以數據講話。數據作為結果的直接衡量指標，更真實、也更具有說服力，那如何直觀的展示數據，幫助決策者做出正確決策或行動，發揮數據最大的價值？可視化數據大屏應運而生，讓我們一起來談談吧
說到數據大屏的時候，我們要先了解一下數據可視化，那什么叫做數據可視化呢？比較專業的解釋是利用計算機圖形學和圖像處理技術，將數據轉換成圖形或圖像在屏幕上顯示出來，并進行交互處理的一種理論、方法和技術，它為我們研究、處理、分析數據提供了理論依據。
我們人的大腦處理視覺信息的速度比文字快幾萬倍，將抽象的數據轉化成圖表、圖形能更快速幫助我們更快理解數據中的含義，趨勢以及相關性。
簡單來說，可視化數據大屏，將我們難以理解的抽象的數據概念以圖形化的形式展現，方便我們快速理解這些數據的含義，也方便這些重要的信息在最短的時間內傳給最重要的人。
數據大屏可分為信息展示類、數據分析類、監控預警類，多展示酷炫的效果，數據之間有層次區分，好的數據大屏是布局、色彩、圖表、動效的綜合運用。
數據可視化，讓很多員工從繁瑣復雜的數據工作中解脫過來，那它到底有什么優點呢？
近幾年來，國家的相關法律政策相繼出臺，大數據企業的技術研發水平不斷提高，促使大數據行業市場規模從 2014 年的 212.5 億元增長至 2020 年的 548.5 億元，數據可視化對于公司發現解鎖數據潛在價值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現大量數據，以前企業員工檢測到數據進行匯總分析需要數小時，可視化通過特定的格式來呈現大量數據幾乎不費時間。
視覺形式的數據更易理解，數據可視化能快速顯示操作、運營與結果之間的關系。企業管理不是憑空作決定，正確的方式應該是，依據所獲得的數據信息來做輔助分析，數據可視化內容能讓管理人員和決策者清楚看清數據趨勢，快速制定及消化關鍵指標。
比如當上圖科學決策平臺的網絡總數特別時多，決策者可以快速調取相關數據找出異常原因 —— 是上次活動運營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數據快速鉆取數據，用來解釋正在發揮作用的運營條件或決策與所遇到的指標之間的關系。
根據Aberdeen報告收集的信息，利用數據可視化的組織能夠及時訪問信息的可能性比其他組織高28％。數據可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對企業內容運作了解甚少的人。
比如上方的區域經濟地圖，通過地圖與定位街道區域內容、顏色結合的展示樣式，很容易看出各街道產值、稅收等，也更有場景感；居民可支配收入版塊，通過顏色區分、大小圓形、時間線來直觀展示居民收入變化內容，形象且清晰。
制作數據可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會，操作簡單，但它的缺點也很明顯，沒什么特色，靜態數據展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優點是碼數據速度快，自動獲取，看起來很高端，但缺點也很明顯，如：學習成本高、學習比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡單、動態數據自動獲取、動態效果無敵炫酷，不需要下載安裝，缺點就是部分渲染組件比較耗費電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網易有數大數據是一個企業級的大屏大數據可視化展示系統平臺，具有深度的交互式數據探索。它有豐富的使用場景，支持數據接入、數據導入處理、數據分析生成報告等，用戶無需編程，簡單拖拽即可生成可視化圖表。缺點是數據探索性分析能力有限。
網易有數可視化實戰案例——業務安全大屏。通過大屏進行業務安全監控，清晰的展示各業務分布要點的數據情況，頂部實時更新各重要區域數據情況，銷量對比、售后情況，產品產比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業智能（BI）軟件，擁有豐富的報表編輯和數據分析功能，同時它也支持可視化大屏的編輯。決策報表采用了畫布式操作界面，通過拖拉拽可以想成一個強大的、全面的可視化大屏，能實現在一個頁面整合不同的數據，完美的展示各類業務指標，實現數據多維度分析。缺點是大屏組件不夠豐富，開發拓展性不強，不支持云端托管等。
帆軟可視化實戰案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數據，業務辦理詳情等，圖表形式展示內部管理、外部管理情況，分行放貸統計情況等，便于數據管理查看及決策制定參考。
Data V是阿里云內部的可視化大屏開發平臺，同時面向開發者和零基礎用戶，支持大屏圖形化編輯和在線編程開發，可幫助非專業的工程師通過圖形化的界面搭建專業水準的可視化應用。
它有海量行業模板，DataV數據可視化設計團隊會定期從大量真實項目中尋找優質場景，制作為模板，涵蓋媒體、零售、工業、電商、金融、防疫、氣象等多個行業，為用戶提供會議展覽、業務監控、風險預警、地理信息分析等各種設計參考。
產品功能方面，它有豐富的可視化編輯工具，提供多種業務模塊級的非圖表組件，只要通過拖拉拽便可創造出專業的可視化應用，另外豐富的組件庫與模板庫包含多種場景模板，簡單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應用時遇到的整體樣式配置困難。專業的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時數據驅動三維世界生成，低代碼交互配置將復雜邏輯可視化呈現，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發布方式，如：鏈接分享、二維碼發布；支持自定義組件接入；支持云上部署，也支持線上開發。
DataV數據可視化實戰案例——智慧工廠生產控制大屏，綜合呈現了每個生產階段的生產狀態參數，將整個車間的情況匯總到一個調度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數據可視化EAsyV，擁有業內領先的數據可視化大屏故事策劃、視覺設計、前端和數據開發技術實力，尤其擅長3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數據導入，還有動態面板和交互功能，讓大屏看起來更靈動。
EasyV數據可視化實戰案例——寧波圖書館可視化平臺。大屏包含人流分析監測、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時把握場館運營效果，為其提供館內建設與活動運營的監控分析服務。
深色的大屏設計能讓其數據顯示更明顯，也方便營造科技感，另外大屏設計圖表文字的顏色要統一，避免出挑的內容分散用戶注意力，使用圖片或者是動態的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質呢？
首先是策劃有故事。從客戶的真實需求去梳理數據可視化內部的視覺傳達，確保內容傳達克制有條理，有重點、有故事。盡可能讓用戶花費更少的時間獲取更多信息，完成數據空間到圖形空間的映射，讓數據的價值被看見。
如上方的品牌銷售數據大屏，銷售額與門店數，數據明顯，與銷售額相關內容有季度線上線下銷售額，會員數、款式數量、爆款排行等，故這塊內容排在左側。右側就是區域訂單、毛利統計。中間放用戶關心的地圖區域分布、爆款分析等內容。
其次是可視化要有效率。通過工具軟件，數據可視化變得更簡單高效，變得靈活易實現，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠程控制，能有效率的實現海量數據實時同步，實現高效率、高質量大屏交付。
最后是大屏要有數據價值。數據可視化最重要的還是要落實到數據上，脫離數據談美觀是不切實際的空想，數據可視化就是要充分利用并方大數據的價值，保證數據實時、全域、精準、讓數據講話。
設計可視化數據大屏時我們設計師要抓住問題的重點，即這樣設計出來的內容能不能真的讓數據產生價值，能否經得起業務部門推敲？是否為企業經營提供了幫助？思考完這些再去做的大屏更有價值，大屏做的酷炫是其次，能夠讓人一目了然的看見關鍵信息，聯想到業務實際，才是我們設計師最需要關注的方向。
文章來源：站酷 作者：知果日記YRrui
費茨定律(Fitts'sLw)是一個描述人類運行學的經驗公式，用于計算人們移動手指或鼠標等設備到某個目標的時間，以考慮目標大小和距離為主。
費茨定律的公式是T=a+blog2(D/S+1)，其中T是時間，a和b是實驗測得的常數，D是目標的距離，S是目標的大小。說明了在給定目標情況下，目標距離越遠，需要的時間越長；在給定距離的情況下，目標越小，需要的時間越長。
費茨定律廣泛地用于人機交互界面設計中，例如在B端常用的設計按鈕上，可根據該定律來選擇適當的目標大小和間距，以使用戶更好地達到業務目標。
比如在B端產品彈窗界面設計中，確定和取消按鈕都會放在右下角，使得用戶更容易點擊。確定按鈕更高頻故放在最右邊，視覺表現更明顯，使其更容易一眼點擊。此外，兩個按鈕之間的距離也很重要，因為它會影響到用戶的點擊時間，為了讓用戶更容易進行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學家喬治·米勒對短時記憶能力進行了定量研究，他發現人的短時記憶能力廣度為7±2個信息塊，記憶信息超過了該范圍就容易出錯。因此心理學家把這個神奇的記憶容量規律稱為“7±2法則”。 在人機交互設計界面中，如果要引入新的元素或操作，應該盡可能地減少其數量和復雜性，以便用戶更容易理解和記憶。
比如在B端卡片設計中的操作按鈕一般會控制在7-2法則即5個操作按鈕，若有其它操作會隱藏在更多按鈕里面，把頻次較高的按鈕放在一級展示中，頻次較少的按鈕放在二級浮窗展示中。通過分解復雜的任務和信息，減少冗余內容使得用戶更容易理解且更快完成業務過程。
格式塔原理是心理學的一個概念，也廣泛應用于設計領域中。該原理認為人類大腦在處理感知信息時，會自動將信息組織成具有整體性、完整性和結構性的形態，即所謂的“格式塔”。
在設計中，格式塔原理有幾個常見應用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設計師可以使用相似的顏色、形狀、大小等元素來將相關的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠離的事物分離。因此，設計師可以使用空間布局來將相關的信息組織在一起，提高信息的可讀性和易用性。
3.對稱性原則：人類大腦喜歡對稱和平衡的形態。因此，設計師可以使用對稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設計師可以使用封閉的形狀來強調信息，使用戶更容易理解和記憶。
相似性原則的應用比如在B端的卡片設計中，所有的卡片樣式相似在人腦理解中默認會視為相同的一組數據。
接近性原則比如在B端的表單設計中，常常會將一組數據通過接近性原則組織在一起，提高信息易讀性。
對稱性原則常用在大屏與報表設計中，通過對稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續性表格或圖形等設計中，通過不連續性來讓用戶大腦形成封閉路徑強調后續可讀信息。
比如在下面的表格中通過形狀的不連續性反而讓用戶大腦更快感知到還有信息可以滾動查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設計法則，它由美國心理學家Donald Norman提出。該定律指出，人們在使用任何新系統時，都會將他們以前所經驗過的類似系統的知識應用于新系統。
雅各布定律的核心思想是，在設計新系統時，應該考慮到用戶的現有經驗和期望，并盡量避免創造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統，并減少學習成本。
比如在B端設計中常用到的圖表編輯快鍵可以延用用戶在其他系統常用到的快捷鍵，如win或mac系統都常用到的快捷指令可復用到B端產品的快捷操作中。
防錯原則(Principle of Fail--Safe or Fault-Tolerance)是一種設計思想，其目的是減少或避免因錯誤或故障而導致的不良后果。它通常被用于設計高度可靠的系統或設備，以確保在錯誤事故發生時，系統或設備仍然能夠繼續正常運行，或者能夠平穩地停止運行，以避免進一步的損害或危險。
在界面設計中如設計可撤銷操作，通過系統中允許用戶執行可撤銷操作，以避免因誤操作而導致的不良后果。
或在界面設計中常用到的反饋和提醒彈窗等操作，以幫助用戶及時發現錯誤或故障，并采取適當的措施。
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復雜性質量守恒」。
該基本定律覺得：該定律認為每一個過程都有其固定的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
可以通過簡約至上的隱藏、轉移、刪除等原則進行用戶體驗的提升。
早在14世紀，哲學家、圣方濟各會修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個原理說的是“切勿浪費較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對于同一現象有兩種不同的假說，我們應該采取比較簡單的那一種。對于幾個功能相同的設計，在設計都可用的情況下，則選擇視覺干擾較少的設計。
在設計上則能夠指導我們對產品做減法，去減少不必要的元素，在進行設計的時候，先分析用戶的的主流程是什么，流程內的引導盡量弱化，沒有必要則不增加。
比如在B端產品設計中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設計原則，與以上定律基本一致?？偠灾?，交互設計規律的宗旨都是幫助設計師創造易用、高效、愉悅的用戶體驗。在B端產品設計中，將交互定律貫穿于產品設計中可以提升產品易用性，降低學習成本，使產品更規范，對企業用戶的工作效率與商業價值都有積極的影響
文章來源：優設網 作者：麗創輕文
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
六、B端C化未來的設計方向
文章來源：優設網 作者：酷家樂UED
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
從原文可以提煉出Live Activity顯示特點：
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
企業級B端產品具有行業壁壘高、業務復雜、服務角色多等特點，在大型迭代項目中，如何做好設計協同，把握設計一致性和還原度常常讓很多設計團隊感覺無從下手，找不到切入點。在長期的項目實踐中我們發現，做好設計規范能規范可以幫助個人、團隊以及整個企業提高效率和產出質量，保障用戶體驗統一。
那么，我們該如何做好體驗標準化，保障基礎體驗一致性？下面將和大家分享我們公司在構建設計規范的實踐案例。
以我們設計團隊為例，隨著業務不斷擴大，定制化需求不斷增加，大型迭代項目做不好設計和開發協同，導致出現“體驗一致性差”“設計效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構建設計規范，以保證一致性，實現工作提效。
從不同角度出發，構建設計規范都能發揮積極的作用。
對企業來說：有利于實現產品經理、設計和研發的輸出一致。設計側主動建立產品設計規范，很大程度上是為了做好設計管控，實現原型、設計稿到線上頁面統一的設計語言，從根本上提升設計質量和還原度，提高用戶滿意度。
對個人來說：當多個設計師共同協作同一項目時，由于設計理解不一致等原因，容易出現設計控件使用混亂等問題。若有詳細的設計規范作為引導，有利于實現產品各個模塊間的一致性。組件化的工具也能減少機械重復性的工作，讓設計師將更多精力投入到用戶研究和提升用戶體驗上。
產品有不同發展階段，設計規范同樣也有，不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多，保證投入產出比最大化；同時也要構建一個合理的規范迭代思路。
該階段的產品核心目標是「驗證產品或商業模型」，業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態，存在著“先滿足功能，再優化體驗”的情況，導致該階段的產品體驗往往不太過關。
搭建目的：通過定義原則，梳理關鍵頁面和流程，搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷；從頁面到流程，又能對應設計參照標準；同時業務可以在規定的框架下發展，不僅讓產品體驗的根基牢固，而且不會限制功能設計自由。
搭建范圍：「全局說明」「頁面布局」「通用流程」
該階段的產品基本形態已穩定，也形成了初步的模型結構。后續迭代是在現有結構的基礎上，進行增加或優化功能。雖然探索期定義了產品原則、布局和流程，但探索期產品的自由生長，會導致不少設計細節不一致，從而影響了產品整體的體驗和效率。
搭建目的：通過回溯整理過往設計，沉淀優化成完整的交互規范。再根據規范統一產品體驗，進一步優化流程和效率， 讓整個產品體驗達到相對穩定的狀態。
搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎組件」「業務組件」
好的設計規范有很多優秀的例子，例如Google、Apple、Microsoft這些引領全球設計風尚的公司，設計規范已經上升為設計語言，指導旗下所有產品的設計。國內做的優秀的案例，比如Ant Design，Element，arco.design等，像這類的產品已經實現了端到端的體驗一致，把交互、前端和視覺的事情一并解決了，是值得學習的典范。這些優秀的設計規范都包含以下幾個特點：靈活性，可擴展性，系統性和標準性。
一般團隊內部構建的設計規范都源于某一產品或者業務，因為主要是團隊內部成員使用，追求的是投入產出比最大化。所以可在行業通用設計規范的基礎上，適度參考行業設計規范，能復用的直接參考，同時專注于業務本身，具有業務特性的再集合業務綜合考慮，使整個規范制定效率更高，科學性、指導性更強。
設計規范的執行和推動主要分為四大步驟：
類型梳理：分析業務場景，整理和歸類組件，評估具體組件優先級和迭代計劃；
全局說明：統一布局，色板，字體，常用樣式，規范設計語言；
抽象設計：將設計共性抽象出來，構建組件通用方案；
效果驗證：通過定性/定量數據追蹤效果，分析原因，迭代改進；
收集現有設計頁面，分析業務場景，再參考行業通用規范的定義，整理和歸類組件，可以先羅列完整，再根據產品實際業務需要進行增刪改。
全局說明：明確影響整站各個模塊、各個頁面設計的原則和規范，指導我們后續各種規范的定義和設計。包括統一布局，色板，字體，樣式等設計規則。
基礎組件：可參考行業通用規范中的基礎組件分類和組成，因為大部分基礎組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據實際情況，將基礎組件分為導航，通用，數據展示，數據錄入，反饋5個大模塊，每個模塊下再細分各小類，構成基礎組件的類目。
業務組件：根據業務需求，可以定義屬于自己的業務組件，這也是區別于其他通用行業組件庫的一個核心部分。
因為在大體量產品設計中，每個模塊都由不同的同學負責，這樣全局產品的把握就會降低，需要去補充全局規范說明去維持產品全局通用部分的一致性。包括布局，色彩規范，字體，樣式等；
抽象設計是設計規范中最核心，工作量最大，難度最高的一個環節。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業務需求抽象設計業務組件，最后抽象成頁面模板。
基礎組件
組件庫的搭建，就一定要提到原子思維。道爾頓原子論認為，物質世界的最小單位是原子，原子是單一的，獨立的，不可被分割的，在化學變化中保持著穩定的狀態。這個原子理論同樣適用于設計系統中。
其中，最小單位設計元素就是基礎組件。我們在做設計系統的時候希望當你改動任何一個原子，你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點，設計系統設想中的效率、解放生產力才會真正實現。例如，在sketch中，分享樣式和嵌套符號的使用。
業務組件
在構建完基礎組件后，可以根據業務需求，將使用頻率較高的組件進行評估，抽象成業務組件。
一般業務組件可分成兩大類：
一類是由多個基礎組件組成的帶有業務需求復合組件，如：復合標簽，快捷時間選擇器等；
另一類是針對特定業務場景的業務組件：如地圖，站點等；
頁面模版
在完成基礎組件和業務組件的構建后，我們可以根據全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應，加強設計說明和組件之間的結合。
組件質量評估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。
系統應用層面的評價：
系統是否幫助業務提效；
當業務不能直接應用系統，能否靈活改動；
系統是否幫助業務變得更有競爭力、更創新；
迭代機制
當我們完成設計規范的整體構建后，對于新需求，通過評估復用性、通用性和優先級，低級別的走定制設計完成交付。高級別的通過抽象設計、內審、沉淀到組件庫中。
機制提效
在完成設計規范的構建后，我們可以聯合產品經理和前端工程師，幫助每個環節的人員快速搭建產出物，推動上下游機制提效。
例如，我們會基于設計規范，為產品經理提供符合設計規范的Axure元件庫，產品經理使用元件庫，可以快速搭建原型，產出prd，與設計師、開發的溝通也更加順暢。簡單的修改可以跳過設計師出圖這一步驟，直接和開發溝通，極大加快前期的節奏。甚至通過借助元件庫，產品經理可以搭建出高保真原型，用于直接和用戶確認或者給客戶進行demo的演示。
基于設計規范，推動研發實現組件代碼化，通過設計標準化可以達到研發工業化。通過定義標準規范，提高流程、組件的復用率，開發側就可以制定相應組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點和重復造輪子，同時減少上線前設計走查、測試的工作量，保證落地效果，提升生產力。
以上就是我們在構建自己的企業設計規范的流程，最后，給大家展示一下，我們目前的企業設計規范和部分應用情況。
2022年新建裝扮中心整合各類裝扮的分發入口。搭建皮膚商城、主頁背景商城、頭像商城、掛件商城4大裝扮基建；高效擴充皮膚、掛件、個人主頁封面和頭像等個性化裝扮資產，受到年輕用戶的喜愛，佩戴裝扮用戶迅速增長數以百萬計。
0-1搭建拓裝扮資產規模的經驗，今日與大家分享。
一 整合升級四大裝扮基建，搭建系統裝扮能力
拓新裝扮場景，提升裝扮曝光：百度APP個性化裝扮場景已覆蓋首頁皮膚、個人中心皮膚、個人主頁封面、個性化掛件和頭像。
我們將百度APP原有的裝扮能力整合升級，新建“裝扮中心”統一分發，并在個人中心增加了一級入口，為更多的裝扮形式與玩法創造更多可能。通過裝扮中心、皮膚商城、個人主頁背景商城、掛件商城、頭像商城“四大裝扮基建”支撐百度APP個性化裝扮的分發和佩戴操作。
提供易用的裝扮佩戴體驗，增強裝扮展現的吸引力，是裝扮基建方向的設計目標。
1. 易用性
我們在全場景提供實時預覽能力，裝扮預覽所見即所得；按裝扮類型統一界面布局，降低理解成本。
2. 增強裝扮吸引力
2-1 提升裝扮展現豐富度：
裝扮中心作為裝扮聚合展現核心場景，提供套裝裝扮，界面內融入豐富動效、定義刷新策略持續推薦新內容，增加對裝扮運營展現能力。
2-2 串聯互通增強可逛性:
各裝扮能力之間串聯互通，通過分發場景間跳轉進行交叉推薦增強裝扮吸引力。我們從三條路徑上為裝扮拓展了分發入口。第一條：裝扮功能內的場景，在裝扮商城之間增加相關功能跳轉、在皮膚和套裝的預覽頁底部拓展更多推薦入口。第二條：在用戶的非裝扮使用路徑上拓展入口，如在頭像預覽頁、個人主頁背景預覽頁引導用戶設置頭像和個人主頁背景。第三條：以非常駐的彈窗形式，推薦裝扮活動，吸引用戶體驗裝扮功能。
2-3 豐富裝扮玩法：
a. 限時免費裝扮：精品套裝裝扮包括動態皮膚、動態頭像、掛件、個人主頁封面，支持一鍵佩戴四項個性化裝扮，是百度APP的付費裝扮功能。我們探索限時開放給用戶免費使用玩法，效果超預期，收獲了一大波裝扮新用戶。
b. 結合任務活動：將“佩戴裝扮”作為運營任務，幫助用戶獲取任務金幣，也把熱門裝扮作為任務獎勵。
c. 與大型運營活動結合：與世界杯大型運營活動結合，設計度曉曉世界杯16強球隊套裝皮膚，通過限免使用，提升裝扮滲透。
二 持續擴充皮膚/掛件/個人主頁封面/頭像等個性化裝扮資產
裝扮資產擴規模，重點考量通過提升設計質量增加裝扮吸引力和快速擴規模的效能如何提升。
1. 精細化打磨，打造百度APP裝扮套裝
1-1 表現手法-本能層：
深入研究畫面風格，在年輕化現代審美指導下，選擇偏東方的設計風格，如國風、二次元風格等，因為這類風格多用圖形、線條、顏色來處理空間關系，畫面不會過于厚重，既迎合年輕用戶喜好，又不過多打擾APP內容區域閱讀消費。
舉例：七月中元節的裝扮設計中，整體配色偏暗、低飽和度的深紫色、偏灰的藍色，可以傳達出靜謐、神秘的氛圍。在色彩構圖中沒有用過多的色彩搭配，使用高明度差來刻畫畫面結構，因為明度反差處于人視覺的最底層。如果能用黑白反差區分層次，會首選黑白。在周圍環境色中使用偏灰的藍、紫色，并且與人身上的暖色對比，讓人物更加突出。而在畫面元素的刻畫上增加飄帶、魚尾的流動感，這種帶有東方感的元素，這種留白、平衡構圖和俠氣感，也有很強的東方特征，同時通過厚涂風格中常用的使用飽和度差異、大透視效果營造場景的空間感，增加畫面的細膩程度。
1-2 內容-行為層：
在裝扮具體的內容繪制中融入共情元素，吸引用戶注意。比如結合節日、大事件推送套裝，并在繪制中增加洛麗塔、國風、JK等年輕用戶感興趣的元素。
1-3 內涵-反思層：
通過積極情緒引導、激發思考，讓用戶感到心之向往或心生愉悅，可使用神情、動作、裝飾花的花語等多種手段進行情緒暗示。
2 單品擴量，保證各類裝扮的更新頻率
與套裝制作不同，單品的更新需要更加短、頻、快，需要更加直接解決Z世代用戶痛點。
2-1 協助用戶搭建社交符號：
頭像，作為用戶在網絡世界身份的象征，我們從橫向團隊項目中大量引入能代表身份狀態、游戲愛好等方面的資源，快速補充頭像單品資源庫，我們也根據用戶調研了解到有76%用戶愿意和朋友使用“閨蜜/情侶頭像”，我們在頭像庫中上線情侶頭像，并將完善“頭像分享卡”等功能形成體驗閉環。
2-2 幫助用戶表達自我：
百度APP頭像掛件和游戲、社交、直播場景中的頭像框不同，并不為了彰顯關系、體現出社交關系中的尊貴感，百度APP用戶更希望借助頭像掛件來表達觀點，為自己的主張、個性貼標簽。
2-3 結合用戶興趣引起關注和共鳴：
在羅盤大數據中，我們發現，王者榮耀、和平精英、元神等游戲中，25歲以下年輕用戶的占比都非常大，并且都愿意花錢購買皮膚裝扮。二次元的游戲、動漫內容不僅僅受Z世代喜愛，且Z世代的滲透率最為突出。各大手游設計中也在不斷的融入二次元元素，我們借力百度AI畫圖技術-文心大模型快速補充了二次元、游戲等風格方向的裝扮。
三 建立規范平臺，提物料輸出效率
為了展現更好的效果、適配更多的裝扮場景，且兼顧歷史與開發成本等原因，裝扮物料規則復雜，且種類繁多?！栋俣華PP裝扮體系設計規范平臺》應運而生，它涵蓋 5 項裝扮能力、2項運營能力；每項能力均配有一鍵預覽及導出物料模板。隨功能迭代及時更新，保障了裝扮物料的高效輸出。
結語
目前百度APP裝扮已經完成了第一階段的建設，沉淀出一批受用戶喜歡的裝扮資產，未來我們也將不斷探索、創新更多裝扮玩法，未來也將探索出共創平臺，成為一個裝扮生態。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
。
隨著技術及經濟的發展，人們對計算機系統、機器等的要求，從單純的「 可以用 」逐漸變為想要「 更好用、容易用、用得舒服 」等更加豐富的使用體驗，也就是常聽到的好的「 用戶體驗 」。
「 用戶體驗（User Experience ）」這個概念，最早由唐納德·諾曼（Donald Arthur Norman）提出，他希望用這個詞，來涵蓋個人使用系統時的體驗、各個方面的體驗 ，包括工業設計圖形、交互界面、物理交互，以及與人的交互。
而「 用戶體驗 」產生的基礎，是「 用戶使用了機器 」，即人跟機器有發生接觸、交流、互動等，然后用戶會形成主觀上的體會、感受。這里的「 機器 」泛指各種「 產品 」，類比諾曼所說的，即物理界面、虛擬界面、系統、硬件等。
因此，好的「 用戶體驗 」是基于好的交互設計。而對交互設計「 好/壞 」的影響因素，涉及到人、產品、使用環境這三者，也就是人機工程的內容。
概括一下百科對「 人機工程學 」的解釋：
將 「 使用物的人 」和 「 設計的物 」以及 「 人與物共處的環境 」作為一個系統來研究（人-機-環境系統）。在人、機、環境這三個要素 本身特性 的基礎上，科學地利用三個要素間的 有機聯系，來尋求系統的 最佳參數。
其中關于人的「 本身特性 」包括人體結構和機能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關系等，眼耳鼻舌身對應的視、聽、嗅、味、觸覺，以及動作習慣和認知。這部分大愚認為可以把「 結構特性 」當作人的硬件，具有一定的普遍/通用性；而「 認知 」則是人的軟件，個體間存在一定差異。
然后，就到了這篇文章的主要內容，人的「 結構特性 」部分。
注：下文中提及的人體結構特征是基于大部分人的情況描述，內容也是圍繞人機交互有關的方面，不是人體結構特征的全面介紹。
人體結構中對人機交互產生影響的主要有眼、耳、身（皮膚）對應的：視覺、聽覺、觸覺，以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎內容進行整理，還有聊聊一些交互、體驗設計上的應用。
人與周圍環境發生聯系的感覺通道，最重要的就是「 視覺 」，約占80%的信息是通過視覺來獲得。因此「 視覺顯示 」是人機交互系統中用的最廣泛的一種形式。
人眼正常感受光譜的波長約在400nm-780nm之間（大概這個范圍，網上相關資料關于這個數值存在微小差異），對應的色相是紫色-深紅色，也就是常說的彩虹色。
而負責感受光的細胞是視錐細胞和視桿細胞。
視錐細胞，約占95%，復雜感受強光及有顏色（彩色）的視覺，在環境光線亮時起作用，用來區分色彩。研究數據表明視錐細胞對光譜中波長為555nm的「 黃綠色 」部分最敏感。
視桿細胞 ，約占5%，復雜感受弱光及沒有顏色（黑白）的視覺，在環境光線暗時起作用，用來區分黑白。研究數據表明視桿細胞對光譜中波長為507nm的「 青綠色 」部分最敏感，對極弱的光刺激敏感。
如果涉及一些特定的工作環境（昏暗）的應用設計時，就可以考慮下此時作用細胞的特性，進行合理的設計設置。
正常情況下，瞳孔會根據環境中的光量來調整大小。當有光線較強時，瞳孔會收縮變窄；當光線很暗時，瞳孔會膨脹來讓更多的光進入眼球。
可以把這個理解為一個保護機制，在強光下，通過收縮來減少光對眼睛的高強度刺激；而弱光下，對感光細胞刺激不足，為了不讓眼睛過分費力地去尋找目標和識別目標而引起視覺疲勞，所以瞳孔會放大，讓更多的光進入。
而接收光的刺激，看到物體后，是否可以準確獲取信息（看清物體、識別文本、圖像等）則跟視敏度相關。
視敏度 ，就是眼睛能分辨物體細微結構的能力，也就是看清物體的能力。相關實驗數據表明，增強亮度可以提高視敏度。也就是說，亮度越強，人眼對物體的識別能力就越強。
下面提到兩個實驗，其中「 正對比極性 」，指在淺色背景上顯示深色字體文本，就是對應我們界面設計中的「 淺色模式 」；而「 負對比極性 」，指在深色背景上顯示淺色字體文本，即「 深色/暗黑模式 」。
實驗1. 德國杜塞爾多夫精神病研究所的Cosima Piepenbrock等相關人員，對「對比極性對視敏度和校對的影響」的研究結果表明：人眼在「淺色模式」下的視敏度要優于「暗黑模式」下，字體越小，淺色模式的優勢就更明顯。
實驗2. Agelab實驗室的喬納森·多布雷斯（Jonathan Dobres）等相關人員，對「 環境光照條件（模擬白天/夜間）是否影響正對比度極性的優勢」的研究表明：夜間，深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別，「淺色模式」下比在「深色模式「要快，白天比晚上更快。
對上面兩個實驗可以用環境光的強弱對視敏度的影響來理解：為方便理解，可以假設我們的界面尺寸足夠大，大到覆蓋我們視野范圍，那就可以將淺色模式中的淺色背景類比為白天（環境光度亮），深色模式中的深色類比為夜間（環境光度弱），而屏幕內的文本、信息，就是我們要識別的物體。亮度越強，人眼對物體的識別能力（視敏度）就越強。
從上面的實驗來看，無論在白天或夜間環境下，「 淺色模式 」都要比「 深色模式 」更好用。
但根據德國蒂賓根大學的Andrea Aleman等相關人員的一項研究表明，長時間處于「淺色模式」下可能會導致近視。其表現為，閱讀「淺色模式」下的文本時，脈絡膜（跟近視有關的一層膜）會明顯變薄；而閱讀「深色模式」下的文本時，這層膜明顯變厚。
可以理解為長時間處于「淺色模式」下，意味著視敏度的持續維持在較高狀態，就像人在長時間高強度工作下可能會導致健康受損一樣，眼睛同樣也可能會受到損傷。因此相對長期來說，「深色模式」則是更友好的一種形式。
那通過適當的設計，是否有可能找到這兩者之間的最優解呢？
注視區域光照不足、光線過強、光線分布不均勻、光源閃爍、眩光、反光、目標過小、目標不穩定等，都會造成眼睛超負荷工作，導致視覺疲勞。
光照不足，對應界面交互，可以指屏幕亮度過低，也可以理解為內容和深色背景間的對比度不足。
光線過強，則是屏幕亮度過高，也可以理解為內容和淺色背景間的對比度不足。還有大面積高明度色彩的使用。而像汽車遠光燈，也是常見的一種光線過強的產品，并且常常被錯誤使用。
閃爍，會對眼睛造成很大的負荷。在高亮度下，眼睛除了視敏度會增強外，對閃爍的感知也會增強。這方面涉及的產品設計，如顯示器的刷新頻率，要到達某一程度，人眼才感覺不到屏幕的閃爍。
目標過小，在可識別及相同環境下，目標過小，識別所需的時間越長，也就是更費眼。像界面中的元素，文本字號、圖標等，都需要有舒服的可讀性。
反光，跟工業產品設計的關系比較密，反光是很容易引起視覺疲勞的和視力傷害。但生活中好像處處有反光，高樓大廈連片的鏡面窗戶/墻、我們正在看的電腦屏幕、手機屏幕、公交車廣告牌的保護罩、汽車的后視鏡等等，都會在某些瞬間讓你覺得眼睛受到了億點傷害，這也是很常見的一種光污染。
水平方向上，雙眼視野角度通?？蛇_到120°視角。其中「 有效視域 」為30°，即人眼能立刻看清物體的存在和動作軌跡的范圍。其余部分稱為誘導視野，也就常說的「 余光 」。
而眼動（頭部不動）「 舒適轉動區 」通常為60°。
如果以眼睛距離屏幕40cm為例，水平最佳視野寬度大概就是21.6cm，在72dpi下，約為600px。在進行文本寬度設定時，可以以此作為依據，來設計內容的顯示寬度。
垂直方向上，視野角度通?？蛇_到135°視角，「 有效視域 」為30°，「 舒適轉動區 」為55°。
關于「 最佳視角范圍 」及「 眼動舒適區 」的應用，在汽車領域的HMI設計和一些較為復雜的交互活動中有比較多的體現。
聽覺對信息傳遞的感知僅次于視覺，同視覺一樣，利用以前的經驗來解釋輸入。
相比視覺，聽覺更容易引起注意，且反應速度快，可以捕捉各個方向的信息，不受照明條件限制。
人類聽覺系統對聲音的解釋可幫助設計人機交互界面中的語音界面，而對有能力缺陷的人，如視障人士來說，「 聽覺（語音交互） 」更是一種替代視覺顯示的重要形式。
聲音有三個要素：音調（頻率）、響度（振幅）、音色（材質）。
人類可以聽到的聲音頻率范圍為20Hz-20kHz，正常情況下人耳可分辨出約 40多萬種 不同的聲音。
對語音的辨認頻率范圍為260Hz-5600Hz。正常情況下，人類語言的頻率在：500Hz-3000Hz之間。
感受性、識別性最高的頻率范圍在1000Hz-4000Hz，低于500Hz，或高于5000Hz時，要達到一定響度才能被聽到。
0－20dB，幾乎感覺不到
20－40dB，相當于低聲說話，輕柔的響聲
40－60dB，正常談話的聲音
60－70dB，會感到吵鬧、長時間會損害神經細胞
超過70dB，讓人感覺煩躁，無法集中注意力
85-90dB，短時間內影響人的聽力，破壞神經細胞
超過90dB，聽力受損
超過140dB時，引起的是痛覺，而不是聽覺，會完全損害聽力（歐盟界定的導致聽力完全損害的最高臨界點）
人耳對各種音色的分辨能力非常強，對經常聽到的音色也具有很強的記憶力。
比如在同一頻段同時演奏不同的樂器，人耳依然可以分辨出有哪些樂器在進行演奏，也能識別出不同動物的叫聲。
而對于熟悉的人，比如對父母兄弟姐妹等，經常只通過說話的聲音，就能知道是誰；通過腳步聲，也可以辨認出來是誰來了等等。
除了對聲音的「 音調、響度、音色 」這三個要素的感知之外，人耳還能辨別出聽到的聲音是「 從哪里/哪個方向傳來的 」，也就是聲源方位感。
瑞士的神經科學家通過研究發現：粗糙的聲音（上限約為130 Hz）激活了大腦某些特別的區域。
當重復的聲音被認為是刺耳的、無法忍受的時候（特別是在40-80Hz之間），會引起持續的反應，刺激杏仁核、海馬體和腦島，特別是跟突出、厭惡和疼痛相關的區域，而正因為有這些區域參與聲音的處理，才會使這類聲音會讓人感覺到難以忍受。
這也是警報聲的應用原理，通過快速重復的頻率來引起人們的注意。再結合聲音傳播不受光照、方向、角度等影響的特性，來提高警報聲被人耳檢測到的概率。
其他讓人感到煩躁、難受的聲音，如汽車喇叭聲、尖叫聲、嬰兒哭聲等等通常也是在這一頻段。
視覺上的三維圖效果，是眼睛先呈「 散焦狀態 」，視焦點前后位移產生層次感，從而看到三維平面圖畫的立體效果。
而人耳的聽覺跟視覺相反，可以從眾多的聲音中「 聚焦到某一點 」上，也就是聽覺的「 聚焦效應 」。
比如我們聽交響樂時，大腦皮層可以抑制其它樂器的演奏聲，把精力和聽力集中到其中的一種樂器聲音上。還有在公交地鐵上，我們同樣可以集中精力聽廣播報站的聲音，而忽略車上的其他喧鬧聲。
這個特性也讓語音交互的場景擁有更多的可能性。
觸覺屬于動覺交流領域，即通過身體的運動/動作來交流。
跟視覺、聽覺的感知相比，「 觸覺 」最大不同是它的非局部性（全身皮膚），以人體為介質，對皮膚、肌肉的感受器進行刺激，能夠 敏感、強烈和更迅速 的被用戶感知，及時傳遞信息。也 不易受環境影響，無論環境吵雜，或是光線不佳，對其體驗效果的影響都不大。
但「 觸覺 」傳遞的信息遠少于視覺和聽覺，通常作為視覺和聽覺反饋的補充。而對有能力缺陷的人，如聽障、視障人士來說，「 觸覺交互 」的應用則是一種很重要的形式。
同時也是用戶體驗過程中重要因素之一，會直接影響用戶對產品的情感體驗與交流。在工業產品設計中感受較多，如日常工作生活中常見的家居用品、鼠標、鍵盤、手機等的外形設計、材質觸感等。
人類的皮膚表面散布著觸點，一般指腹最多（人類手指的觸覺敏感度是前臂的10倍），其次是頭部，最少的是背部和小腿。觸點的大小不盡相同，分布不規則。
通過對冷、熱、尖銳物體的判斷，讓身體及時遠離危險和傷害，可以對人體起到保護作用。
同時也具有表達情感，辨別情緒的功能。有說法認為「觸覺」可能是用來傳達人的情感的最佳途徑，就像「 擁抱 」和「 安慰的文字/語言 」，體現的情感強度就很不一樣。
借助Haptics技術，通過作用力、振動等「 觸覺反饋 」，可以起到傳遞信息的作用。但想通過「 觸覺體驗 」來傳達恰當的、有用的信息，需要先理解人類是如何詮釋不同的「觸覺體驗」的。
比如想要通過「 振動感知 」來傳遞有用的信息，需要先了解怎樣的振動頻率、強度、節奏可以讓使用者意識到其代表的是什么意思：成功、失敗還是其他呢？這涉及到「 認知 」方面的內容。
通常情況下，「 觸覺反饋 」是作為視覺、聽覺反饋的一種補充。
如在觸控屏上用虛擬鍵盤輸入文字時，通過按鍵的「 振動反饋 」，讓用戶清晰及時地了解到自己已經成功按下了某一個按鍵。相關研究的結果也表明：虛擬鍵盤加入振動反饋后，是可以提升用戶輸入時的準確度。
而一些特定場景下，「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時，駕駛員需要將大部分的注意力放在道路環境上，那么通過「 觸覺反饋 」，將部分操作結果傳遞給駕駛員，這一可以在一定程度上減輕駕駛員在視覺和聽覺上的負擔。
人類的動作通常分為三類：先天、模仿、訓練得來的。
由于肢體的結構特點，「 先天 」和「 模仿 」的動作，通常存在一定的局限性。
頸椎前屈幅度35-45°，后伸35-45°，左右側屈各45°，左右旋轉各60-80°。
當頸部前傾時，頸椎承受的壓力逐漸增大：
前傾0°時，為頭部重量，約為4.5-5kg；
前傾15°時，承受壓力約為12kg；
前傾30°時，承受壓力約為18kg；
前傾45°時，承受壓力約為22kg；
前傾60°時，承受壓力約為27kg。
結合前面我們講過的人眼轉動的舒適角度和視野范圍，可以為一些物品的設計提供參考。
直立，腰伸直自然體位時，腰部可前屈90°、后伸30°、左右側屈各20-30°、左右旋轉各30°。
人體平（仰）臥位時，腰椎承受的壓力最小。
膝關節屈膝角度可達120-150°（小腿后部和股后部相貼）。人坐立時，膝關節彎曲90°，小腿和地面垂直放置對腿部最好的，屈膝小于90°時，長時間保持會影響下肢的血液循環。
伸直時一般為0°，有過伸狀態5-10°。膝關節屈曲時，有輕微的內旋和外旋運動，約為10°。
肘關節彎曲角度可達140°、過伸角度為0-10°、旋前80-90°、旋后80°-90°。
打字時，手肘彎曲接近90°（水平放置）是最放松的。
掌側可以外展約70°，指間關節屈曲約90°，掌拇關節屈曲約20-50°。
和手腕連接處的腕掌關節，能夠進行較大程度的屈伸，收展，完成對掌運動。這是拇指特有的，是拇指骨外展，屈和旋內運動的總和，使拇指尖能跟其他的手指和掌面接觸。
掌指關節屈曲約60-90°，近節指間關節屈曲時約為90°，遠節指間關節屈曲時約為60-90°。
在使用手機等數字界面時，用「 食指 」和「 拇指 」進行觸控是比較自然和常見的行為。
根據麻省理工對人類觸覺的實驗，食指、拇指的寬度和觸控區域有以下數據：
食指平均寬度約16~20mm、指腹觸摸區域尺寸約10~14mm、指尖觸摸區域尺寸約8~10mm。
拇指平均寬度約25mm、指腹觸摸區域尺寸約12~16mm、指尖觸摸區域尺寸約10~12mm。
觸控控件的最小尺寸要大于觸摸的最小尺寸?？丶^小，一方面會增大準確觸控的難度，另一方面手指會造成遮擋，導致用戶無法明確是否已經正確觸摸了相應的控件。
（手指觸控這部分本來放在上面關于觸覺的內容里，后面想了下，「觸覺」更多的是指「反饋信息」層面的作用，所以還會歸在肢體動作、范圍里比較合適。）
用鍵盤打字時，在某些瞬間，多數手指只是放在鍵位上，沒有擊鍵行為，因此鍵盤按鍵的驅動力需要大于手指重量產生的力，才足以支撐手指。
ANSI 1988 年建議鍵盤擊鍵的理想壓力應該在0.5N-0.6N之間，一般0.25N-1.5N的壓力都是可以接受的。
而對于一些特殊的設備按鍵，比如工業鍵盤類的，則需要更大的按鍵驅動力，因為這類產品的工作環境和活動相對復雜，需要更謹慎的操作。
單手對手機等觸屏設備進行操作時，一般以四個手指和手掌為依托，用大拇指操作為主，而成年人拇指長度約為6-10cm。
數據表明，一般成年男性，單手全屏操控的屏幕尺寸最大約為4.5英寸，而成年女性，單手操控的極限約為4.0英寸。超過這個尺寸，單手進行全屏操控會有一定困難。
而目前主流的智能手機基本在5英寸以上，根據拇指關節的活動幅度，單手操作時在手掌位置不動的情況下，拇指觸及的區域只是很局限的一部分：
以上就是體驗設計中涉及人體結構特性的內容部分。
感謝閱讀，期待交流。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.skdbbs.com