老齡化社會已經(jīng)到來，如何讓中老年群體更好地使用互聯(lián)網(wǎng)產(chǎn)品是當今的熱門話題。貓眼演出設(shè)計團隊負責的一個 B 端項目的使用人群需覆蓋到中老年用戶，也屬于適老化的涵蓋范疇。

在前期調(diào)研和設(shè)計環(huán)節(jié)中，我們收集了一些相關(guān)的文獻及案例，并且結(jié)合項目實踐有所思考和沉淀，在這里與大家分享。

普適的適老化設(shè)計理念

世界衛(wèi)生組織根據(jù)現(xiàn)代人生命狀況，提出了人生階段年齡的新劃分。45~59 歲為中年人；60~74 歲為年輕老年人；75~89 歲為老年人；90 歲以上為長壽老人。[1]

隨著年齡的增長，人們的身體機能、心理狀態(tài)、認知能力等都會出現(xiàn)衰退的情況。

適老化設(shè)計是無障礙設(shè)計中的一種。無障礙設(shè)計于 1974 年由聯(lián)合國組織提出，設(shè)計中需要充分考慮具有不同程度生理傷殘缺陷者和正?；顒幽芰λネ苏撸ㄈ鐨埣踩?、老年人）的使用需求。[2]

目前互聯(lián)網(wǎng)產(chǎn)品中大多數(shù)的適老化設(shè)計，主要是集中在 C 端。針對不同障礙（視覺、肢體、聽覺、認知障礙）[3]，目前普適的適老化設(shè)計原則有：

1. “強烈“好于“柔和”

針對視覺障礙，常見做法有增大字體大小，使用非襯線體字體，提高顏色對比度等。

相比原版的 App，百度大字版 App 和支付寶長輩模式修改了 UI 界面，每個功能模塊都用了明亮的大色塊、加大字體的設(shè)計。

2. 善用“輔助”和“替代”

針對聽覺障礙，常見的做法有通過視覺輔助，將聲音轉(zhuǎn)化成文字、擴大音量、降低語速等。

Google 安卓系統(tǒng)推出了 Live Caption 功能，可自動將手機上播放的內(nèi)容轉(zhuǎn)換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能，可識別特定聲音（比如煙霧警報器、嬰兒啼哭、敲門聲等），并轉(zhuǎn)化成文字及視覺符號推送至手機，方便聽障用戶辨別生活當中一些重要的聲音信號。

3. “點擊”好于“滑動”

針對肢體障礙，減少頁面信息的密度，避免使用過小的按鈕以及復雜的交互手勢。

有研究表明，老年群體在操作時難以瞄準物體，在瀏覽圖片時，由于視力衰退導致無法對焦，他們會不斷地用兩只手指放大/縮小并反復點擊屏幕。[4]

平安銀行 App 關(guān)懷模式采用卡片拼接的設(shè)計方式，將間距放大，保證每個信息有更大的展示空間，同時也放大按鈕點擊熱區(qū)，提高操作的準確率。

4. “具象”好于“抽象”

針對認知障礙，避免使用不易識別的圖標，盡可能配有圖標或圖片，簡化信息內(nèi)容。

有研究表明，文字+圖標為主的設(shè)計有助于提升老年新手用戶對新 ATM 使用的學習效率和記憶。[5]

滴滴 App 關(guān)懷模式針對老年人進行功能精簡，滿足高優(yōu)先級核心訴求，首頁只放「一鍵打車」，操作簡單，大字、無廣告。

B端產(chǎn)品引入適老化設(shè)計也值得深思

在很多行業(yè)中，中老年人因為擁有豐富的經(jīng)驗在崗位上更具競爭優(yōu)勢，譬如教師、醫(yī)生、律師、會計等職業(yè)，工作年限長、經(jīng)驗足是優(yōu)勢，可以提供更好的服務(wù)。他們既會使用 C 端產(chǎn)品，也有使用 B 端產(chǎn)品的場景。

隨著時代變遷，2015 年世界衛(wèi)生組織提出了“健康老齡化”理念[6]，倡導改變過去“老了就要退出社會生活”的消極認識。

從“老有所依”到“老有所為”，很多的 B 端場景都覆蓋了中老年用戶，如何提升中老年用戶的辦公用戶體驗是重要課題。

另外我們看下 C 端與 B 端的主要差別：

C 端 App 中時常將簡單作為適老設(shè)計宣傳點。追求簡單有一部分原因是，C 端用戶是在自己的場域操作且?guī)缀鯚o時間壓力。而 B 端產(chǎn)品卻相反，業(yè)務(wù)邏輯復雜，用戶要長時間使用而且要求效率。B 端面向企業(yè)定制化，針對特定人群、情景，使得在適老化設(shè)計中要解決的問題更清晰。

適老化設(shè)計在POS中的應(yīng)用

留意生活中的零售行業(yè)，如餐廳、商場、藥局、便利店的服務(wù)人員，往往能看到中老年人的身影。

POS 系統(tǒng)是 B 端場景中使用率最高的產(chǎn)品之一，POS 系統(tǒng)的英文全名為 Point of Sale，中文名為銷售時點信息系統(tǒng)。[7]它由硬件與軟件組成，根據(jù)產(chǎn)業(yè)和店面類型的不同，會有功能上的差異。

最近團隊參與了一個改造 POS 系統(tǒng)的項目，使用人群覆蓋到了中老年用戶，提升他們的辦公用戶體驗是其中一個產(chǎn)品目標。

本次項目主要是 POS 界面的更新，完整的 POS 體驗不僅有軟件本身，有更大的部分在于實體環(huán)境與設(shè)備，例如：結(jié)賬區(qū)的控件、店面的擺設(shè)、掃描槍，讀卡器等，而 POS 界面是連結(jié)上述元素的節(jié)點。

在對 POS 系統(tǒng)進行改造時，我們是按照以下設(shè)計思路進行的：

第 1 步:沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)

B 端系統(tǒng)背后往往由成熟的業(yè)務(wù)場景和復雜的業(yè)務(wù)邏輯構(gòu)成。B 端系統(tǒng)往往不是一個從 0-1 全新的系統(tǒng)，而是存在一個被使用了很多年的系統(tǒng)。

在這種情況下，企業(yè)服務(wù)的每個用戶都是趨向于規(guī)避風險的。人們可能已經(jīng)習慣了原有的解決方案（盡管不好用，但是大家都會用了），但新的方案如果不好用，他們的生產(chǎn)力反而會因為不知道如何使用新方案而降低。

這就意味著在做 B 端設(shè)計時，現(xiàn)行的方案會產(chǎn)生很大的習慣引力。

當設(shè)計師要引入一個新方案時，取消或改變某些功能及操作行為將有難度，不能霸道性更改，取代需要合理性。

設(shè)計思路：

1. 梳理業(yè)務(wù)邏輯和功能模塊：沿用舊系統(tǒng)規(guī)則與結(jié)構(gòu)。
2. 制定框架：定穩(wěn)定一致、拓展性強的信息框架與導航欄。
3. 統(tǒng)一專業(yè)術(shù)語：信息表達（文案）與原有系統(tǒng)盡可能保持一致。
4. 遵從使用者習慣：原系統(tǒng)中可能存在一些不夠美觀或不合常理但卻實用的快捷入口及交互方式，可以整合優(yōu)化后進行復用。

第 2 步：理清主要用戶與使用場景

想要了解使用者的真實痛點，需從場景出發(fā)。

第 3 步:用適老化設(shè)計原則去解決場景中的問題

POS 使用場景有很多，這里列舉 3 個常見的使用情境：

可能存在的障礙：無法聚焦信息內(nèi)容，難做到邊看屏幕邊與顧客交流。

設(shè)計目標：確保信息在復雜的環(huán)境中，信息內(nèi)容清晰可讀。

設(shè)計思路：

1. 放大信息內(nèi)容

服務(wù)至上，POS 使用者在工作時需保持端莊熱情的姿態(tài)，不能只專注看 POS 屏幕信息而不顧顧客。

內(nèi)容大小的確立由設(shè)備分辨率、環(huán)境燈光、字體、視距等因素決定，在復雜的現(xiàn)場環(huán)境中，信息內(nèi)容要清晰易讀。

2. 色彩對比度符合 WCAG 標準

參照 WCAG 有 AA 和 AAA 的對比度標準，界面中的信息與其背景間的關(guān)系對比度至少在 4.5:1 之上，保證信息易讀性。

WCAG 全稱是 Web Content Accessibility Guidlines(網(wǎng)頁內(nèi)容無障礙指南)。這是一套由無障礙功能專家編輯的指南，有若干國家在其網(wǎng)絡(luò)無障礙功能法律要求中明令必須使用這些指南。[8]

一些設(shè)計插件可以幫助我們檢驗色彩對比度是否符合 WCAG 標準，給大家推薦 2 款：Sketch 插件 Cluse，F(xiàn)igma 插件 A11y-Color Contast Checker。

3. 設(shè)計有意義的動畫

通過動效來表達靜態(tài)視覺效果無法準確傳達的信息，如反饋、引導下一步、狀態(tài)表達等。好的動效與視覺設(shè)計是互補而成系統(tǒng)的。

比如用動畫來展示商品被加進購物車的狀態(tài)，引導下一步操作。

4. 加大點擊熱區(qū)

提高使用者點擊操作的準確率和速度。

5. 一屏策略

在這次的項目中存在一個場景，除了銷售端服務(wù)員看到的屏幕，顧客也會有一個客顯屏，即服務(wù)人員看到的界面，顧客也會看到。

對于頁面信息框架以及布局盡量“一屏”展示，確保雙方的視線和注意力一致，便于溝通交流。但這時會有挑戰(zhàn)：字放大、按鈕放大，信息和功能在一屏上怎么放得下？

解決思路：

• 進行功能篩選，滿足場景中高優(yōu)先級核心訴求，提取核心功能展示。
• 模塊化展示每個信息，根據(jù)格式塔的視覺感知理論，做到聚焦用戶視角。

可能存在的障礙：在顧客的“催促”下，使用者也會著急，對事物表現(xiàn)出茫然的情緒，定位當前位置困難。

設(shè)計目標：追求信息的有效表達和操作的直覺性與效率。

設(shè)計思路：

1. 避免使用不易識別的圖標

B 端系統(tǒng)中會有些功能很難用一個圖標去表達其含義，此時文字+圖標按鈕優(yōu)于純圖標按鈕，能幫助 POS 使用者更好地理解語意并做出操作。

2. 信息的呈現(xiàn)符合用戶眼動規(guī)律，操作軌跡越短越好

可運用古騰堡圖表法 Diagonal Balance，它由 14 世紀西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。他發(fā)現(xiàn)人們視覺閱讀規(guī)律，左上角是視覺第一落點區(qū)，右下角是視覺最終落點區(qū)，右上角和左下角都是一個視覺落盲點，大多數(shù)情況容易被忽略。

在進行信息排布時，可根據(jù)用戶習慣性的眼動規(guī)律，將最重要的信息放在左上角，右上角和左下角添加輔助元素，右下角作為整個視覺落點可以展示重要操作。

可能存在的障礙：百忙之中，應(yīng)變能力下降，容易發(fā)生誤操作的情況。

設(shè)計目標：預(yù)防不當行為，提升容錯率，反饋要及時有效且清晰。

設(shè)計思路：

1. 通過二次確認避免誤操作

在產(chǎn)品設(shè)計時，要把各種可能性考慮進去，通過模態(tài)對話框讓用戶二次確認來避免誤操作行為。

當有重要操作時需告知用戶處理結(jié)果，狀態(tài)反饋信息采用的顏色需要遵守用戶對色彩的基本認知，如紅色代表警示，黃色代表警告、綠色代表成功等。

上述舉例的設(shè)計原則是啟發(fā)但不是限制，每個設(shè)計提案最后都要經(jīng)過用戶調(diào)研，看是否符合使用者的使用習慣，是否真能解決業(yè)務(wù)與工作中的痛點。

附上總結(jié)圖：

其實設(shè)計到后面會發(fā)現(xiàn)，起初為了方便中老年用戶使用 POS 運用的設(shè)計原則，最終都能給多數(shù)人帶來很大便利。

這是因為我們每個人在某些時候都會遇到各種臨時的無障礙需求。

結(jié)語

適老化設(shè)計，不僅僅只是為中老年群體做設(shè)計，更是一種新的設(shè)計思維方式，去挖掘更多普適的場景痛點，來指導我們做方案設(shè)計。

市面上很多適老化設(shè)計方法為 B 端產(chǎn)品提供了借鑒，但 B 端產(chǎn)品不能為了適老而適老，理清相關(guān)工作情境和要解決的問題很重要；不能霸道性更改，取代需要合理性，因為 B 端產(chǎn)品現(xiàn)行的方案會產(chǎn)生很大的習慣引力。

以上是近期對 B 端引入適老化設(shè)計的一些思考和沉淀，是開始，也將繼續(xù)，適老化設(shè)計還有很多值得深究和驗證的內(nèi)容。

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

一、定義

1.1 設(shè)計規(guī)范的概念

設(shè)計規(guī)范是指對設(shè)計的具體技術(shù)要求，是設(shè)計工作的指導規(guī)則。一般包括總體目標的技術(shù)描述、功能的技術(shù)描述、技術(shù)指標的技術(shù)描述,以及限制條件的技術(shù)描述等。

Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續(xù)、可擴展、可統(tǒng)一的、可區(qū)分的視覺指引手冊，指導相關(guān)設(shè)計結(jié)構(gòu)完成統(tǒng)一性與對外區(qū)分性。具象層，它是一種設(shè)計方法；抽象層，它是一種思考模型。

設(shè)計規(guī)范一般會具體到公司級別、某一類產(chǎn)品線、某個產(chǎn)品等。今天主要講具體某個產(chǎn)品的設(shè)計規(guī)范，主要是為該產(chǎn)品制定統(tǒng)一的用戶體驗、品牌、視覺等方面的規(guī)范，當然是在滿足以上公司級別和某一類產(chǎn)品線層次的設(shè)計規(guī)范的基礎(chǔ)上。

1.2 設(shè)計規(guī)范的組成

設(shè)計規(guī)范由設(shè)計原則、設(shè)計語言和組件庫構(gòu)成，在設(shè)計原則的指導下使用設(shè)計語言和組件庫創(chuàng)建體驗一致的用戶界面。

設(shè)計原則是指：整個設(shè)計體系所要遵循的全局原則，是為我們設(shè)計提供方向指導的。

設(shè)計語言：是指設(shè)計所包含的語言體系。具體包含了：色彩、字體、圖標、布局等。

組件庫：相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個個頁面。下面我會具體說明組件庫。組件庫具體包括：按鈕、導航、表單、數(shù)據(jù)等等。

1.3 B端及C端

B端產(chǎn)品和C端產(chǎn)品制定設(shè)計規(guī)范差別還是蠻大的，最主要的差異大致是：

C端產(chǎn)品的設(shè)計規(guī)范：目標幾乎都是為了更好的打磨用戶體驗的一致性和標準化；

B端產(chǎn)品設(shè)計規(guī)范：由于用戶體驗更復雜，學習成本更高，所以它的目標側(cè)重點是：除了布局的不同外， 相同業(yè)務(wù)場景下，相同產(chǎn)品功能需要有一致的，標準化的體驗，降低學習成本，提高工作效率，即統(tǒng)一體驗。

二 、為什么要制定設(shè)計規(guī)范？

2.1 對于產(chǎn)品經(jīng)理來說

創(chuàng)建原型時可直接調(diào)用組件庫，能搭建出高保真的原型。

與設(shè)計師和前端溝通更加順暢，小的修改可以直接和開發(fā)溝通不需要通過設(shè)計師出圖，極大增加了前期的節(jié)奏，提升溝通效率。

2.2 對于設(shè)計師來說

對于只有一個設(shè)計師的項目：可以讓那個設(shè)計更加規(guī)范，有些簡單功能迭代可以直接個研發(fā)溝通，不用再單獨出圖，減少重復性的工作。

對于同一個項目由多個設(shè)計師共同協(xié)作時：可保證設(shè)計各方面包含體驗、設(shè)計、交互等等的統(tǒng)一性。減少設(shè)計成本，提升設(shè)計及溝通效率。

對于接手新項目，能盡快的了解產(chǎn)品，快速入手。

對于開發(fā)完成驗收走查，有了前期的規(guī)范及比較詳細的設(shè)計尺寸，開發(fā)的設(shè)計還原度會更高，減少重復及沒必要的設(shè)計走查。

2.3 對于開發(fā)來說

開發(fā)可以按照設(shè)計規(guī)范建立好公共組件庫，極大的提升開發(fā)效率。

可復用的東西確定了下來不會頻繁改動，設(shè)計走查的問題也會逐漸減少。

2.4 對于測試來說

對于模棱兩可的交互可以有地方看交互樣式了，不需要再詢問設(shè)計師。有更多的時間專注于測試功能上的問題了。

通用的組件前期測試后了以后，后續(xù)就不需要重復測試，極大的提升工作效率，避免重復工作。

2.5 對于協(xié)作溝通來說

前期制定及評審設(shè)計規(guī)范以后，有一套筆記明確的規(guī)范，可減少各個職位方面的溝通成本，提高溝通效率。

三 .為什么要制定自己的設(shè)計規(guī)范？

目前市面上有很多多的第三方設(shè)計規(guī)范，比如：antdesign，element，那有人就會問有必要自己重復造輪子做一遍嗎？

我覺得是非常有必要的，為什么呢？

1、每個產(chǎn)品有各自獨有的品牌調(diào)性，如果都用第三方 的設(shè)計規(guī)范，那同質(zhì)化會很嚴重，很難做到差異化，也就很難在競爭中脫穎而出。

2、 世上本沒有萬能的設(shè)計規(guī)范，那些設(shè)計規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計規(guī)范，在此基礎(chǔ)上進行修改，效率很低，適配的復雜度和重新開發(fā)相差無幾。

3、第三方的的成熟的組件庫，我認為應(yīng)該把它當成模式，在他們的基礎(chǔ)上去做自己的設(shè)計規(guī)范。

四 、什么階段適合設(shè)計規(guī)范？

個人工作中總結(jié)出兩個比較建議的規(guī)范建立時間點，探索期和成長期。

4.1 導入期

產(chǎn)品在導入階段，產(chǎn)品還在處于極大變動的時候，這個時候做設(shè)計規(guī)范，其中就蘊含可極大的風險。但是也不是不做規(guī)范，這階段規(guī)范主要涉及到色彩，字體，間距，布局，柵格等通用設(shè)計原則以及常用業(yè)務(wù)組件的定制。此階段搭建的規(guī)范具備高效性以及靈活性的特點。

不適合搭建特殊的業(yè)務(wù)組件，比如：當領(lǐng)導想要突然調(diào)轉(zhuǎn)方向也不會很慌，改動較小就可以完成整體的規(guī)范轉(zhuǎn)向）此時搭建規(guī)范組件庫需要考慮到預(yù)留后續(xù)更改的空間。 

4.2 成長期

當產(chǎn)品進入成長期處于較為穩(wěn)定的版本，整個團隊對業(yè)務(wù)的理解也都很熟悉了，這個適合創(chuàng)建符合業(yè)務(wù)場景的組件庫，有了前期的積累這個組件庫會更加符合產(chǎn)品及業(yè)務(wù)邏輯。

在制定規(guī)范前，設(shè)計師需要明確產(chǎn)品中主要有哪幾種分類，將最基礎(chǔ)的分類定義好方便后續(xù)針對分類內(nèi)容進行整理。B端產(chǎn)品與C端產(chǎn)品既有共同性也有著很大的差異化，可以借鑒但是切忌生搬硬套C端的設(shè)計規(guī)范。

一、 pc端

1.1 Antdisign

Ant Design是由螞蟻集團體驗技術(shù)部經(jīng)過大量的項目實踐與總結(jié)，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設(shè)計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗，是非常完整的一套設(shè)計規(guī)范。

1.2 TDesign

TDesign是騰訊企業(yè)級設(shè)計體系，也是去年才發(fā)布的。雖然才發(fā)布，但是作為一款誕生于騰訊內(nèi)部開源，卻是經(jīng)過了超500項內(nèi)部業(yè)務(wù)檢驗的企業(yè)級設(shè)計體系，TDesign 匯集了騰訊眾多優(yōu)秀組件庫能力和設(shè)計研發(fā)經(jīng)驗。

內(nèi)含豐富可復用的設(shè)計組件資源，如色彩體系、文字系統(tǒng)、動效設(shè)計等，覆蓋支持 Axure、Sketch、Figma、Adobe XD 等各大產(chǎn)品設(shè)計軟件?？梢园凑招枨蟛榭磳?yīng)組件的使用教程和代碼演示，只需簡單的引入操作，即可搭建屬于自己的產(chǎn)品界面。

1.3 Element

Element是由餓了么公司前端團隊開源一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計資源。4、AT-UIAT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品，在眾多的的組件庫中，AT-UI 屬于視覺風格比較清新的一款。

1.4 Zent

是有贊 PC 端 Web UI 規(guī)范的 React 實現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的業(yè)務(wù)組件。通過 Zent，可以快速搭建出風格統(tǒng)一的頁面，提升開發(fā)效率。目前有 50+ 組件，這些組件都已經(jīng)在有贊的各類 PC 業(yè)務(wù)中廣泛使用。

2、移動端端

2.1 Material Design

谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創(chuàng)造一個將經(jīng)典的設(shè)計原則和科技、創(chuàng)新相結(jié)合的設(shè)計語言，并且在不同設(shè)備上提供一致的體驗底層系統(tǒng)，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。

2.2 iOS Human Interface Guidelines

iOS 的人機規(guī)范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規(guī)范那么細致全面，但是核心的設(shè)計原則在每個組件的設(shè)計說明中都有滲透。作為 iOS 系統(tǒng)的設(shè)計基礎(chǔ)，建議每個設(shè)計師都需要仔細研究。

2.3 Vant

Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續(xù)維護 4 年時間。Vant 對內(nèi)承載了有贊所有核心業(yè)務(wù)，對外服務(wù)十多萬開發(fā)者，是業(yè)界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

2.4 NutUI-JDL

NutUI-JDL 是一套基于京東物流視覺規(guī)范的移動端組件庫，包含了36+高質(zhì)量組件和詳盡的文檔和實例。

設(shè)計師在開始準備設(shè)計規(guī)范時，首先需要確定設(shè)計風格和設(shè)計尺寸，頁面布局是做居中固定式，還是全屏響應(yīng)式。如果是全屏響應(yīng)式的網(wǎng)頁設(shè)計，那要選擇怎么樣的屏幕來做效果？等等這些問題

接下來分別來展開說明。

1、設(shè)計風格

三種B端產(chǎn)品的設(shè)計風格

純白風（網(wǎng)頁大背景是純白色;文字背景是線框，輕淡色（灰）;文字一般用深色）

輕淡風 (網(wǎng)頁大背景是淺灰色;文字背景是白色;文字一般用深色）；

深色風（網(wǎng)頁大背景是深色;文字背景是帶有透明度的純色；文字一般用白色）

我們在開始設(shè)計之前，要確定好使用哪種風格，一旦確定下來，后面的所有頁面和元件的設(shè)計，都得基于這個風格來設(shè)計。

據(jù)數(shù)據(jù)顯示，目前市面上比較流行的是：輕淡色背景風+全屏響應(yīng)式的設(shè)計風格，也是相對比較保守安全的設(shè)計。

接下來需要考慮尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁設(shè)計，選擇怎么樣的屏幕來做效果。

2、設(shè)計尺寸 

設(shè)計規(guī)范中，分辨率尺寸的問題，一直以來是我們設(shè)計師討論最多的。

決定產(chǎn)品設(shè)計尺寸分辨率大小的因素大致包含以下兩點：

2.1 市場占有率（主流）

目前市面上主流的排在前3的屏幕分辨率為1920*1080，1440*900，1366*768。

2.2 兼容能力

做B端產(chǎn)品時，現(xiàn)在市場上的設(shè)計師一般都會采用的是1440*900。為什么不用市場占有率最高的1920*1080和1366*768呢？

1、由于B端產(chǎn)品的特殊性，它的尺寸分辨率大小，是取決于用戶使用的電腦設(shè)備條件。由于員工電腦顯示屏大部分都是統(tǒng)一采購的，尺寸也就大致統(tǒng)一，所以開發(fā)適配的分辨率可以按這個統(tǒng)一尺寸進行設(shè)計。

2、因為它的兼容能力會比較強，向上適配或者向下適配誤差會比較小，不管是市場占比最高的主流1920*1080尺寸，還是一般般的1366*768尺寸，都完全可兼容。 

注意：別忘了設(shè)計出極端情況（寬度為1280，以及寬度為1920）的效果圖，力求前端開發(fā)實現(xiàn)的效果和高保真設(shè)計圖誤差最小。

假如你產(chǎn)品的用戶用的設(shè)備主要是市面上占有率最高的24寸辦公室顯示器，也就是1920*1080分辨率的話，那毫無疑問，在選擇設(shè)計尺寸上，直接選擇1920*1080分辨率。

比如我現(xiàn)在做的產(chǎn)品，除了移動辦公，web基本都是固定辦公，管理人員使用的辦公設(shè)備（電腦）屏幕一般都是臺式電腦，那這個時候，我們在設(shè)計時就會同時考慮它的占有率和兼容能力。所以我們采用的是：1920*1080分辨率。

所以設(shè)計師們在選擇尺寸上，一定要靈活使用，不能一味的認死理只選擇1920 或1440某一尺寸，而是要對您的產(chǎn)品用戶的具體情況做好分析，從而得出最適合你們產(chǎn)品的設(shè)計稿的尺寸。

注意點：

如果希望設(shè)計稿完全還原程度高的話，還特別要考慮瀏覽器的適配，比如說它的頂部固定區(qū)域（當前網(wǎng)址，書簽欄等的高度）必須排除在外，剩余的部分才是我們設(shè)計稿的真實高度。

拿我們常用的谷歌瀏覽器舉例，如下面公式所示：設(shè)計實際高度=電腦分辨率 -（網(wǎng)址欄+書簽欄+頁簽高度)

3、頁面布局

3.1 常見的頁面框架有以下三種:

第一種：上下布局

上下布局包括："頂部菜單欄、主體內(nèi)容"兩大區(qū)域。其中頂部菜單欄是固定不變的，主體內(nèi)容根據(jù)不同分辨率進行自適應(yīng)動態(tài)縮放。另外還需要把主體內(nèi)容左右兩邊空白區(qū)域最小值確定好；

優(yōu)勢：內(nèi)容區(qū)域可操作空間大。

劣勢：導航區(qū)域限制數(shù)量，如果導航選項內(nèi)容比較多，用頂部橫向?qū)Ш降脑挘蜁@得很擁擠。另外，橫向?qū)Ш揭话阌小罢归_”，“折疊”，和“收起”三種狀態(tài)，加上內(nèi)容很多的情況下，橫向?qū)Ш骄吞貏e難做到尺寸適配。

第二種：左右布局

左右布局包括："左側(cè)菜單欄、頂部欄、主體內(nèi)容"三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進行自適應(yīng)動態(tài)縮放。

左右布局時，左側(cè)菜單是支持收縮或展開，收縮狀態(tài)下也需要有固定的寬度。

優(yōu)勢：導航部分可擴展性強，適合導航選項內(nèi)容都是比較多的情況。且只有“展開“和”收起”兩種狀態(tài)，在不同屏幕情況下，寬度的自適應(yīng)也能更加得心應(yīng)手。

劣勢：相對內(nèi)容區(qū)域空間變少。

第三種：其他的布局

現(xiàn)在很多后臺管理系統(tǒng)采用，"頂部一級導航欄、左側(cè)二級菜單欄、主體內(nèi)容"三大區(qū)域。其中頂部菜單欄、左側(cè)菜單欄是固定不變的，右側(cè)主體內(nèi)容根據(jù)分辨率進行自適應(yīng)動態(tài)縮放。

優(yōu)勢：結(jié)構(gòu)更清晰?？沙休d更多層級內(nèi)容。更適用于復雜且層級多的產(chǎn)品。

所以，可以得出結(jié)論：設(shè)計師在選頁面布局的時候，要全局考慮產(chǎn)品框架及內(nèi)容。

1、如果導航選項內(nèi)容比較多的話，或者不確定有多少內(nèi)容的情況，從美觀和操作難易程度、可用性來評估的話，選擇第二種左側(cè)導航是最適合B端產(chǎn)品使用的。 

2、如果內(nèi)容選項確定很少，就沒那么多限制，“左側(cè)縱向”"頂部橫向"都好使

特別要注意

1、同一個產(chǎn)品需要考慮它的統(tǒng)一性，不能這里使用頂部橫向，那里用左側(cè)縱向。

2、如果是個更新迭代的版本，就還得考慮老用戶之前的使用習慣，避免引起不必要的麻煩。 

在確定好導航的布局后，就基本上能確定整個產(chǎn)品的頁面布局了。 

3.2 常見布局尺寸：

B端產(chǎn)品，一般會在整個頁面的左上角放企業(yè)的LOGO，頂部欄高度48+8n，側(cè)邊欄寬度200+8n。

我常用的是頂部欄高度：56px或80px，側(cè)邊欄寬度：200px，側(cè)邊欄收縮狀態(tài)寬度：56px或80px，右側(cè)的側(cè)浮窗寬度：400px。（具體高度寬度尺寸，設(shè)計師可根據(jù)具體情況來定，不需要按部就班這么死板）。

同時需要確定好主體內(nèi)容的上下左右邊距，以及主體內(nèi)容區(qū)域中各模塊的安全距離，內(nèi)容超出區(qū)域的，通過滾動查閱更多。

4、文字

4.1 B端產(chǎn)品常用的字體

Windows系統(tǒng)：中文Microsoft YaHei(微軟雅黑），英文Arial；

Mac字體：中文PingFang SC（平方字體），英文 Helvetica；

4.2 常用的字體大小

常見的字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px（一般都是采用偶數(shù)字號，文字大小12+4n）。

注意：

在設(shè)計過程中，設(shè)計師對字號應(yīng)該有一個全局觀，在同一個界面內(nèi)，盡量少用大小太接近的字號。比如一個頁面中，如果同時用了12px、13px、14px、15px、16px、18px排版，文字的層級對比會比較弱，沒有主次之分，用戶閱讀困難，視覺效果也顯得凌亂。

所以，剛接觸B端產(chǎn)品的小白設(shè)計師，如果不知道怎么運用不同字號字體的情況下，可以直接以這組字號12px、14px、16px、20px、34px的字號為參考使用，這樣的分布會層次明晰，能夠有個比較不錯的布局結(jié)構(gòu)。

“行高”根據(jù)文字大小和使用場景來定，公式如下， 

行高=文字大小+8px（或6px，視情況而定，我常用8） 

例如：12號字體的行高=12+8=20px

同一個界面中，一定不要出現(xiàn)多個不同字體。盡量選擇用戶設(shè)備里自帶的字體來進行設(shè)計，比如說WIN系統(tǒng)默認用系統(tǒng)自帶的“微軟雅黑”，不能使用特殊字體。

如果必須要用特殊字體，建議用圖片替代。如果用戶的設(shè)備里沒有你使用的這些字體的話，會默認顯示設(shè)備的系統(tǒng)自帶字體，最終效果就會和你的設(shè)計稿相差很多。

從視覺方面來講，為了讓整體界面更簡潔具有美感，體驗感更好，在使用字體方面，一般字體種類不超過2種，越少越好。因為頁面的層次感主要是靠字號大小及顏色拉開層次，如果字號在變，字體種類也各種變化，整體就會感覺很凌亂，沒有統(tǒng)一性。

5、顏色

顏色規(guī)范包含“品牌色”、“輔助色”、“中性色、圖表色”四部分。

5.1 品牌色系

品牌色系：即產(chǎn)品主色調(diào)，主色調(diào)的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品的對外的形象。品牌色是根據(jù)這個產(chǎn)品的特征和定位、用戶群，以及使用場景等綜合考慮最后確定的。

品牌色的一般用于LOGO 、操作狀態(tài)、按鈕顏色、其他一些可操作圖標等。

1、品牌色一般建議選擇冷色系。這樣有效避免與“錯誤提醒”的紅色、黃色相沖突，讓人誤解。但要是被硬性要求必須選暖色系作為主色調(diào)，就得格外注意調(diào)節(jié)好主色調(diào)與錯誤提醒的區(qū)別了。

2、注意選的品牌色（主色調(diào)）不要太刺眼。要保證用戶長時間使用也不至于顏色太亮太刺眼，而產(chǎn)生的視覺疲勞。

5.2 輔助色系

輔助色系：輔助色一般用于“提示”。類似：成功、失敗、警告、無效等內(nèi)容等。

5.3 中性色系

中性色系：中性色涵蓋黑、白、灰三個不同層級，通常在文本、背景、邊框、分割線用到它們。同一色相，只要改變它的透明度就能表現(xiàn)出不同的層級。

B端產(chǎn)品的文字中，一般會有：一級標題、二級標題、一級正文、二級正文、提示文字、輔助文字、說明文字等。

為了區(qū)分層級，提升用戶的閱讀體驗感，通常會根據(jù)具體需求，把字體顏色的深淺，大致分成3到5個層級。常見的有#333333、#666666、#999999這個組合，這個組合的層級區(qū)分比較分明，適應(yīng)性比較廣，設(shè)計師在設(shè)計時可以直接作為參考。

5.4 圖表色系

圖表色：我們常見的后臺管理類產(chǎn)品， 像數(shù)據(jù)可視化、統(tǒng)計圖、多個標簽的不同配色方案，所以一般還會設(shè)定圖表的顏色。 

6、按鈕

按鈕是任何用戶界面不可或缺的交互元素，B端產(chǎn)品中用到按鈕的場景特別多，類似：登錄注冊，保存，表單，彈窗，導航，提交，確認等等。

6.1 按鈕的形式

常見的按鈕形式包含這六大類：圖標文字組合的按鈕 ，主按鈕，次按鈕（線性按鈕），按鈕菜單，文字按鈕，圖標按鈕。

6.2 按鈕的交互狀態(tài)

常見的按鈕交互狀態(tài)包含六種：

正常狀態(tài)、聚焦狀態(tài)（使用Tab鍵或方向鍵來對網(wǎng)頁進行訪問輸入的聚焦狀態(tài)，在設(shè)計時很多設(shè)計師都會把這一狀態(tài)忘記，導致用戶無法用方向鍵控制光標位置，會降低用戶的使用體驗感）

懸停狀態(tài)（鼠標正在按鈕上，但不點擊，需要注意的是平板電腦和移動端設(shè)備上不會展示懸停狀態(tài)，因為手指跟光標不一樣，無法在屏幕上進行懸停 ）

激活狀態(tài)（點擊按下狀態(tài)）

加載狀態(tài)（等待期間不可操作，在B端產(chǎn)品中Loading狀態(tài)特別重要，能緩解用戶的焦慮情緒）

禁用狀態(tài)（不可操作狀態(tài)，置灰顯示和透明度（40%）代表不可操作狀態(tài)）

6.3 按鈕的圓角

按鈕圓角：在開始設(shè)計產(chǎn)品之前，設(shè)計師都需要對按鈕圓角有具體的規(guī)劃。按鈕四角都是直角會比較有距離感和強烈的引導性，容易分散用戶注意力，所以我們一般會采用視覺上給人比較柔和親近感覺的圓角按鈕。

但按鈕的圓角并不是越大越好，因為在相同尺寸下，按鈕圓角小的，操作熱區(qū)會更大，頁面的使用效率也會更高，更容易操作。同時還要特別考慮到下拉菜單的設(shè)計，所以圓角大小一般采用偶數(shù)：2px,4px,6px,8px,16px為宜，不宜過大（這里的圓角弧度的值有一定的倍數(shù)關(guān)系或基數(shù)關(guān)系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。

注意：圓角大小也會跟著按鈕尺寸的大小有相應(yīng)的變化。

按鈕的高度

在B端產(chǎn)品中，當確定好網(wǎng)格基數(shù)時（通常網(wǎng)格設(shè)定為：4px。按鈕的高度會分兩種情況：

1、一種是寬度為高度的倍數(shù)關(guān)系。

2、第二種是如果寬度為高度的倍數(shù)關(guān)系，從視覺上看達不到想要的效果的話，設(shè)計師就可以靈活設(shè)置。

6.4 按鈕的大小

討論到按鈕的尺寸，我們需要大致知道如何設(shè)置網(wǎng)格基數(shù)。

在設(shè)計中，我們需要在常用的繪圖軟件（如：Ps、Sketch）里找到我們的網(wǎng)格功能，設(shè)定好一個數(shù)為基數(shù)，然后按照這個基數(shù)來進行按鈕的繪制，按鈕就相對比較規(guī)范了。

那如何用繪圖工具設(shè)置網(wǎng)格基數(shù)呢？方法如下：在Sketch繪圖工具中找到：【視圖】-【畫布】-【網(wǎng)格設(shè)置】- 彈出網(wǎng)格設(shè)置對話框進行設(shè)置就好了

把網(wǎng)格基數(shù)設(shè)置為【4】的原因：它是谷歌Material Design繪制小組件的規(guī)范，模塊之間定義的基數(shù)就是【8】。

假設(shè)我們定這個基數(shù)為4，那采用的尺寸數(shù)值就需要是基數(shù)4的倍數(shù)。比如B端產(chǎn)品中，常用的按鈕高度尺寸有：24px、32px、36px 、40px、48px，這些都是可以整除基數(shù)4的值。例如：32/4=8，40/4=10，這里的4為基數(shù)。

按鈕的寬度尺寸，一般是確定好文字到邊框左右兩邊的距離（例如如圖Padding值為12px)后，開發(fā)會根據(jù)文字內(nèi)容的多少自適應(yīng)的。

按鈕間距，按鈕之間的間距也遵循基數(shù)為4的倍數(shù)，比如：16，24，32，40，48等。這里的基數(shù)定為偶數(shù)（一般為4或8）

7、表單

從廣義的定義來講，表單是指用于數(shù)據(jù)錄入的一切形式。從狹義上來講，表單在大家更廣泛的認知印象中，表單則是一類包含輸入框、下拉選擇框等常見控件的組合形式的頁面才屬于表單。表單的本質(zhì)核心是提交數(shù)據(jù)，所以凡是具備采集數(shù)據(jù)并完成采集后提交數(shù)據(jù)的交互形式均可稱之為表單。

表單在設(shè)計上的結(jié)構(gòu)有：1、標題；2、表單標簽；3、占位符；4、表單域；5、提示信息；6、操作按鈕；

7.1 表單設(shè)計目標

表單的設(shè)計必須優(yōu)先考慮為用戶減負，提高效率并簡化填寫流程。另外表單中組件的選擇需要依據(jù)具體的數(shù)據(jù)類型和具體的業(yè)務(wù)場景進行合理正確的選用，為用戶提供高效的數(shù)據(jù)錄入表單，降低用戶操作成本、認知負擔，并提高數(shù)據(jù)采集效率才是表單設(shè)計的根本目的。

7.2 表單的輸入域

可交互輸入域，是構(gòu)成表單的核心內(nèi)容，是表單用來采集數(shù)據(jù)的入口。輸入?yún)^(qū)是用戶交互最多也是最能影響使用體驗的區(qū)域，不同類型數(shù)據(jù)選擇與之相應(yīng)的錄入方式，對提高表單操作效率和用戶體驗大有裨益。

表單并不是把一些不同類型的輸入框排排版、標清楚必填非必填、哪些表單比較復雜適當?shù)募觽€說明就完了

其實，表單設(shè)計遠遠不止這些，表單本身也是一個小產(chǎn)品，它也需要有需求的支撐、也需要嵌套使用情境、也需要考慮用戶的心理模型；從表單的產(chǎn)生到表單在頁面上如何呈現(xiàn)，再到使用表單時與表單之間的交互，每一步都需要投入大量的思考來做好表單。

后面我會專門有一篇16000+的文章聊聊這個B端產(chǎn)品中比較核心的表單，有興趣的朋友可以關(guān)注一下，大概五月份就會發(fā)。

8、表格

表格在整個B端產(chǎn)品比較常見的，它的地位也是相當重要的，我們在設(shè)計表格時需要注意一下幾點：

8.1.表格內(nèi)的文字內(nèi)容：

一般以左對齊為準。與左邊表格邊距盡量保持在10px以上的間距。（特別注意：金額和操作的標題和內(nèi)容需要右對齊）

8.2 表格的列數(shù)：

默認展示的列數(shù)為3-8列，如果需要展示更多列數(shù)，則需要優(yōu)先固定展示重要列，其余的列的內(nèi)容會以滾動條滑動而展展示出來。

8.3 表格列表的寬度：

寬度的尺寸大小自適應(yīng)，但需要根據(jù)文字的重要性顯示，重要文字內(nèi)容優(yōu)先完整顯示。

8.4 表頭每列標題文字字數(shù)：

字符不要多，最多可輸入8個。如果文字太多，就需要做文字信息精簡化。

8.5 滾動條使用場景：

表格內(nèi)容超過一屏，就需要顯示豎向滾動條，注意：表頭需要固定，但表格內(nèi)容可滾動展示。

8.6 表格無內(nèi)容：

表格的某些單元格無數(shù)據(jù)內(nèi)容時，需要用“—”表示，需要區(qū)別于“0”。

8.7 表格標題欄和內(nèi)容欄高度尺寸：

標題欄高度（標準高度為56px）；內(nèi)容欄（標準高度為56px，偏大的標題欄高度為80px），內(nèi)容區(qū)和標題欄水平居中對齊。

8.8 表格內(nèi)容對齊方式：

列的對齊方式（垂直方向）除了需要始終保持“右對齊”的：金額，最右側(cè)操作列內(nèi)容外，其他的內(nèi)容可自行左對齊或右對齊。行的對齊方式（水平方向）

當表格欄的高度尺寸小于80px 時，一般只有一排內(nèi)容，內(nèi)容水平需要居中對齊。當表格欄的高度尺寸大于80px時，如果是有兩排內(nèi)容，所有的內(nèi)容需要頂對齊；但是如果既有一排內(nèi)容 又有多拍內(nèi)容的話 ，內(nèi)容水平則需要居中對齊。

8.9 自適應(yīng)規(guī)則：

表格中的內(nèi)容，會根據(jù)字段的長短定義所占的百分比，完成表格占比，從而達到希望實現(xiàn)的最佳效果。 

8.10 滾動條：

滾動條分為橫豎兩種，當表格內(nèi)容超過一屏時，就需要顯示滾動條。豎向滾動條時， 需要固定表頭標題欄和頁碼。只需滾動表格內(nèi)容部分即可。橫向滾動條時， 需要固定第一列 和 正在操作的項列。只滾動表格內(nèi)容部分即可。

9、反饋

9.1 弱反饋

僅提示用戶相關(guān)內(nèi)容，不需要用戶做任何交互動作。類似：toast弱提示通知提示等彈窗（（一般3-5秒會自動消失：包含普通信息，成功信息，失敗信息，警告信息）。

另外還有，鼠標經(jīng)過的時候即可出現(xiàn)而不用點擊的彈窗（這個彈窗通常會設(shè)計一個浮動帶有陰影效果的框，不需要遮罩）。比如提示說明，顯示更多信息，鼠標移過后立即消失，它不會影響下一層（當前頁面內(nèi)容）頁面的視覺效果和操作。弱彈窗尺寸一般根據(jù)文字多少自行適配。

9.2 強反饋

第二種是強彈窗。它是一個需要用戶必須對這個對話框進行操作后才可以離開。

例如彈出的列表，詳情，表單等的確認信息彈窗、錯誤提示彈窗。這些強彈窗一般會對下面一層的頁面做一些遮罩處理，例如添加上一層有透明度（例如30%，50%都可以）的黑色/白色，給下一層頁面的內(nèi)容做模糊濾鏡等等；

在寫彈框規(guī)范時，應(yīng)了解各自項目中需使用彈框的有哪些內(nèi)容，給出相關(guān)大小彈框的比例，哪些為固定尺寸，哪些為適配比例。以及對于通知提示給出停留多少時間后自動消失，彈窗彈出狀態(tài)等等相關(guān)的交互規(guī)范。

10、其他

缺省頁是互聯(lián)網(wǎng)中常見的場景，當遇到網(wǎng)絡(luò)不好、頁面中沒有內(nèi)容數(shù)據(jù)、暫無資料等等情況，所導致的空白頁面。

大致分可為：系統(tǒng)類缺省頁，信息類缺省頁，空白類缺省頁。

遇到這些情況時，設(shè)計師一般采用一些插畫&文字的組合放置本來空白的頁面中提示或引導用戶進行下一步操作，以緩解用戶的焦慮情緒。（也就是我們常說的情感化設(shè)計的一種方式）

設(shè)計規(guī)范很大一部分是組件庫，所以就把組件庫單獨拎出來聊聊。

1、組件庫是什么？

做一個比喻，組件庫相當于積木玩具的一個個積木，每個組件就是一塊積木，通過組件的拼搭可以迅速搭建出一個頁面，而設(shè)計規(guī)范就相當于搭建的“說明書”。

通常我們將組件庫分為基礎(chǔ)組件和業(yè)務(wù)組件兩大類，前者是系統(tǒng)通用組件（圖標/按鈕/輸入框等），后者是由業(yè)務(wù)決定的相對更復雜的組件模塊。

而對于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現(xiàn)、兼容性，另一方面，C端會根據(jù)活動、節(jié)日切換不同的主題，也要考慮組件視覺上的個性化擴展。對于B端而言，組件庫更看重可復用性和穩(wěn)定性，保證可以支持業(yè)務(wù)快速迭代。另外B端會涉及到各種各樣的數(shù)據(jù)錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。

2、組件庫的原子理論

2.1 原子設(shè)計/拆分

在業(yè)務(wù)已經(jīng)發(fā)展到一定體量情況下，需要將項目中具備復用性及拓展性的模塊進行拆解，對于B端產(chǎn)品來說篩選的時候會依據(jù)之前迭代的版本內(nèi)容，把頁面一一羅列出來，將可替換與相似的模塊提取，并利用思維導圖的方式統(tǒng)一歸納，并做成可以被替換的組件。組件的替換建議合成一個大的排期進行替換，避免了線上組件不一致導致體驗問題。

以我們現(xiàn)在的產(chǎn)品為例：依據(jù)產(chǎn)品類型將組件拆分為：基礎(chǔ)組件 、業(yè)務(wù)組件、數(shù)據(jù)可視化組件、常用模塊。

原子設(shè)計

將產(chǎn)品拆分后，此時得到很多可復用組件。我們再依據(jù)原子設(shè)計理論針對性進行拆解直至拆分出5個層面：

從原子開始重新依據(jù)定好的視覺規(guī)范進行更改，再由原子組成新的分子。

3、盒子理論

在與開發(fā)溝通設(shè)計規(guī)范制定的過程中，常提到他們寫CSS樣式的時候是采用盒子（box）去寫的。通過一個個盒子填充來將我們的組件元素放入其中，最終形成前端展示的頁面。

走查時使用瀏覽器我們也可以看到開發(fā)寫的盒子，了解盒子也可以方便我們走查時知道問題在哪。

四、如何搭建組件庫

搭建組件庫的步驟

4.1 確定組件庫內(nèi)容

對于新產(chǎn)品來說，業(yè)務(wù)體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。

對于已經(jīng)成熟的產(chǎn)品來說，我們可以直接全面體驗查看頁面，找出所有用到的組件，除基礎(chǔ)組件外，提煉出復用率高的業(yè)務(wù)組件進行結(jié)構(gòu)化和組件制定。

4.2 搭建每一個組件庫

以提示彈窗為例，演示單個組件的建立方法。

1. 定義組件：根據(jù)業(yè)務(wù)定義提示彈窗使用場景，用于重要信息的提醒，且需要用戶自己關(guān)閉操作。

2. 拆分組件：這一步是將組件拆分為元件。對提示組件進行拆分后得到如下：

3. 重組輸出根據(jù)業(yè)務(wù)場景，我們把各個元件重組為組件，建成組件集，并定義各種組件的使用規(guī)則。

4.3 輸出文檔并替換到產(chǎn)品中

在組件庫建立完成后，只有在日常設(shè)計中真正使用組件庫，提高組件庫在設(shè)計稿中的覆蓋率，才能真正達到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團隊中進行推廣，加強設(shè)計團隊的公用意識。設(shè)計團隊內(nèi)部可以直接維護一套組件庫，設(shè)計師設(shè)計時直接調(diào)用公共組件庫組件使用。

另外，我們還要與開發(fā)工程師配合逐步完成現(xiàn)有頁面的組件替換。

4.4 定期維護組件庫

組件庫的內(nèi)容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數(shù)據(jù)一樣，組件也會有增刪改。我們需要定期對組件庫進行維護。

增加：當有新的組件產(chǎn)生時，我們需要通過判斷它的拓展性和復用率，以確定是否將它入庫。

刪除：隨著產(chǎn)品的不斷升級迭代，如果某個組件已經(jīng)不用或復用率很低時，我們可以考慮是否要將它刪除。

改：不可避免的，組件會隨著業(yè)務(wù)而進行升級，我們可以通過數(shù)據(jù)埋點和A/B test的方式來確定某個組件是否要進行改動。

一、設(shè)計規(guī)范落地不了的原因

1. 設(shè)計層面

組件擴展性弱：

有時候設(shè)計師做出來的組件雖然看著很好，但是實際上使用時，適配效率很低，用組件去擴展和重新做的效率差不多。

脫離業(yè)務(wù)：

大部分時候設(shè)計師手中都有任務(wù)，于是這個任務(wù)就落在了相對不是那么忙的設(shè)計師手里（一般是新設(shè)計師），但是新設(shè)計了解業(yè)務(wù)相對來說是不夠的，做出來的東西就像是是空中樓閣，拋開業(yè)務(wù)談設(shè)計規(guī)范的都是很難落地的。

缺乏開發(fā)思維：

設(shè)計師不了解開發(fā)的實現(xiàn)方式，可能會做出來以后，開發(fā)較難實現(xiàn)，然后開發(fā)也就不會做。

2. 開發(fā)層面

缺少開發(fā)資源：

首先，設(shè)計規(guī)范的作用是巨大而延遲的，不能即時產(chǎn)出很大的價值，另外一方面，設(shè)計規(guī)范的落地會增加開發(fā)工程師很多的工作量，且無法量化成果。這也導致很多時候設(shè)計師無法爭取到足夠的開發(fā)資源來做這件事，所以，很難導致達到預(yù)期的效果。

二、怎樣更好的落地設(shè)計規(guī)范？

1. 更加全面的了解產(chǎn)品及業(yè)務(wù)

設(shè)計師需要更加全面的了解產(chǎn)品及業(yè)務(wù)流程。

研究用戶：

前期需要做好用戶畫像，弄明白產(chǎn)品的目標用戶的差異，不同用戶的使用場景。只有弄清楚各個角色的關(guān)系以及功能設(shè)計的邏輯，具體用戶年齡，解決什么問題，才可以產(chǎn)出更符合用戶需求的設(shè)計。

研究業(yè)務(wù)：

如果是新的產(chǎn)品，那就需要去詳細的看類似的競品的功能及業(yè)務(wù)流，并且了解公司產(chǎn)品的定位及方向，所以就大致清楚設(shè)計的大方向。

研究產(chǎn)品：

系統(tǒng)整理產(chǎn)品情況，最好是做思維導圖形式，可以更好的梳理同類型的產(chǎn)品功能及組件，也就能更好的提高組件的復用性。

2. 整理好規(guī)范的內(nèi)容和分類

在制定規(guī)范前，需要明確產(chǎn)品中主要有哪幾種分類，將最基礎(chǔ)的分類定義好方便后續(xù)針對分類內(nèi)容進行整理。

3、如何推給pm、推給設(shè)計團隊、推給研發(fā)團隊

團隊溝通其實是一門藝術(shù)，那需要如何做呢？

首先，寫一份設(shè)計規(guī)范的價值的提案給領(lǐng)導，爭取到足夠的資源，包含設(shè)計資源、開發(fā)資源。如果領(lǐng)導的主導參與，那這個事情就好推動多了。

然后，把設(shè)計規(guī)范的設(shè)計工作交給熟悉業(yè)務(wù)的設(shè)計師來做，通過業(yè)務(wù)提煉復用率高的典型元素，優(yōu)先開發(fā)，最大化投入產(chǎn)出比。

搭建設(shè)計規(guī)范和我們?nèi)粘Ｌ幚砉ぷ餍枨箢愃?，并非輸出一份文檔就結(jié)束了。我們還需要將做好的設(shè)計規(guī)范推廣給各個職能部門的同事包括設(shè)計小伙伴，PM和開發(fā)小伙伴的團隊內(nèi)外，并且需要得到團隊內(nèi)的一致認可才算是初步完成。

召開專門的設(shè)計規(guī)范會議，以清晰明確且有效的方式把詳細的內(nèi)容傳達給各個相關(guān)人員，在一致認可規(guī)范的情況下，以達到內(nèi)容的傳達到位。同時，這個時候，就可以依據(jù)開發(fā)人員的反饋，做落地的修改規(guī)范文檔。

1、如何推廣給PM

利益點：提升協(xié)作效率，減少工作成本

在啟動設(shè)計規(guī)范的整理之前，內(nèi)部宣講讓PM對于設(shè)計規(guī)范的搭建已經(jīng)有了一個基礎(chǔ)的概念。然后爭取到更多的開發(fā)資源。否則PM不會分配資源給予時間去搭建整體的設(shè)計規(guī)范。

可以從提升PM與設(shè)計的效率和降低原型搭建成本作為切入點，通過組件庫以及通用模版的搭建，PM只需要極低的成本學習一下組件庫怎么使用，即可搭建高保真的原型界面。甚至完善好組件庫后直接不需要設(shè)計的參與，開發(fā)通過原型組件庫搭建頁面。

2、設(shè)計團隊內(nèi)部如何推廣

利益點：提升設(shè)計效率，減少人力損耗，保持體驗一致性

設(shè)計規(guī)范一般由團隊內(nèi)小伙伴共同制定，基本上已經(jīng)對規(guī)范的優(yōu)勢達成共識。因此主要講講如何更好在團隊內(nèi)部使用規(guī)范。

團隊設(shè)定主要負責維護的設(shè)計人員，其他人員在設(shè)計時候，通過Sketch Library 共享組件庫可以直接調(diào)用組件，并建立更新日志規(guī)范項目流程提升效率，定期維護的時候其他人員統(tǒng)一告知負責維護的設(shè)計人員，統(tǒng)一定期修改更新升級維護。

3、研發(fā)團隊內(nèi)容如何推廣

利益點：封裝組件，更少的更改，提高驗效率，縮短研發(fā)流程

需要研發(fā)團隊認可設(shè)計規(guī)范，前期前端的參與是必不可少的。

在制作規(guī)范時設(shè)計師了解了前端開發(fā)的一些簡單原理，前端開發(fā)也能及時了解設(shè)計師的想法，大家不再是各司其職而是串聯(lián)起來共同協(xié)作，當規(guī)范確認下來前端就不會頻繁改動組件，而且在有限的項目時間中。設(shè)計規(guī)范的統(tǒng)一極大縮短了設(shè)計和前端開發(fā)所需的時間，為后面的項目爭取了空間。

4、排優(yōu)先級，嵌入版本迭代內(nèi)

一套完整的規(guī)范包含內(nèi)容是非常多的，難以在1個版本迭代里面修改完。

因此可以采用敏捷開發(fā)的思想，小步迭代快速推進，將設(shè)計規(guī)范的覆蓋放在每次迭代過程中。設(shè)計師需要將自己作為設(shè)計規(guī)范這個項目的產(chǎn)品經(jīng)理，針對現(xiàn)有的需求進行拆分，并排出優(yōu)先級分版本迭代進產(chǎn)品里面。

可以依據(jù)從大到小的原則進行優(yōu)先級排序。對產(chǎn)品設(shè)計風格影響大的先排，影響小的后排。

設(shè)計規(guī)范的制定不單單是對于設(shè)計師，在嵌入版本里面要隨時與產(chǎn)品和開發(fā)多溝通，以便達到更好的落地效果。

接近1.5萬的文字梳理，感謝你看到了最后。接近尾聲了，制定及梳理設(shè)計規(guī)范對于設(shè)計師來說個人成長有哪些方面呢？我個人覺得可以從這幾個方面來說；

收集信息能力

通過整理規(guī)范，需要收集目標用戶，使用場景、前期調(diào)研、產(chǎn)品功能梳理等眾多資料，這期間我們需要去發(fā)現(xiàn)信息以及整理信息。龐大的信息收集，那對于個人的收集整理信息的能力是一個很好的提升，同時對產(chǎn)品會有更全面的認識。

歸納總結(jié)能力

將收集好的信息進行分類整理，這要求需要一定對邏輯性。在設(shè)計基礎(chǔ)框架時合理對分類可以協(xié)助我們處理好每個控件對層級，這項能力無論實在工作還是日常中都有著巨大對好處，可以幫助我們從一堆繁雜的事物中“提綱挈領(lǐng)”，換言之就是“化整為零”，做減法，提取出最關(guān)鍵對因素。

全面復盤能力

將信息歸納整理好后，需要對全局進行思考，全局的設(shè)計及交互都需要考慮到位，比如什么情況下適合跳轉(zhuǎn)頁面，什么情況下適合給與用戶彈窗。大體符合什么交互原則。

除了對大體交互需要考慮到位，細節(jié)上也不可以忽視，比如異常情況，極端情況該如何去處理，組件之間該怎么去配合等。在日常工作中我們也可以逐漸有意識去培養(yǎng)此類技能，對項目全局思考的越多，那么對整體項目對把控能力也就越強，與他人合作也會越顯得專業(yè)。

溝通表達能力

在整個推廣設(shè)計規(guī)范的過程，就是提升溝通表達能力的過程。

另外，整理設(shè)計規(guī)范時，難免會遇到模凌兩可舉棋不定的時候。此時可以尋求向上或者向下的資源尋求幫助，具備良好的表達能力能迅速幫助我們將問題闡述清楚，表達能力是設(shè)計師需要具備的重要技能之一。

我們每次在求助他人或向他人匯報，都需要在全面復盤問題過后做到心里有數(shù)，將問題自己復述一次是否有漏洞或者沒考慮清楚的地方。長此以往你表達的事情會更清晰，別人也更容易聽懂你說的事情快速理解內(nèi)在邏輯，那么說服別人推動工作的難度也會越小。同事對自己的邏輯思維，表達能力都是很好的鍛煉。

這里總結(jié)了幾個工作中與上下游溝通的小技巧希望能幫助到小伙伴們：在開始與他人溝通之前我們需要搞清楚我們溝通的原因與對象

原因里面包含：

對象里面包含：

當然在溝通時還需要考慮方式和語氣，這些都需要好后斟酌。如果遇到情緒不太好的開發(fā)，這個時候反倒我們更不能將情緒激化，一般這些情緒化對態(tài)度過一會都會消散，可以采取冷處理等情緒過后換一種方式溝通看看。

背景

在 B 端設(shè)計領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計師、開發(fā)，還是外部產(chǎn)品、設(shè)計師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營業(yè)額(營業(yè)額/專柜所占總坪數(shù)）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率提升。

為了探索在 B 端產(chǎn)品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計探索與實踐?！钙列А箤ｎ}探索主要以「探索」與「實踐」相結(jié)合的方式展開，將實踐過程中反復驗證有效的設(shè)計策略沉淀成設(shè)計手冊，同步將部分功能進行工程化，確保可以開箱即用。

探索階段-為誰在何時何地設(shè)計

用戶聲音｜不同的故事相似的訴求

面向內(nèi)部設(shè)計師和終端用戶投放的《高屏效訴求》《中后臺產(chǎn)品滿意度調(diào)研》問卷中認為提高屏效能極大提升用戶體驗的設(shè)計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設(shè)計價值觀》的 13 條反饋里，其中就有 2 點提到關(guān)鍵字「效率」。

通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場景的產(chǎn)品使用中有著相似的特征：

案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)

縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計切入點，通過線上跨產(chǎn)品多端地毯式的體驗走查，發(fā)現(xiàn)表格三個層次的問題：

視覺、交互層在無需理解業(yè)務(wù)場景和用戶目標的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

綜上我們提出假設(shè)：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設(shè)，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設(shè)計理論的驗證和指導。

競品分析｜尋找實踐證據(jù)，謹慎驗證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關(guān)系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈?，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競對的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進行功能點和設(shè)計細節(jié)上的比對，來看看優(yōu)秀產(chǎn)品是如何解決屏效問題。

直接競對：內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競對：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）

通過競品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。

緊湊版的使用場景也常常是面對數(shù)據(jù)量巨大的信息呈現(xiàn)，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數(shù)據(jù)分析場景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大，而在實際案例實踐中，也已經(jīng)將表格行高優(yōu)化至 30px，克制的使用留白。

除此外，競品其他層次的設(shè)計也做了比對，總結(jié)來看整體設(shè)計做法：高密度、少屏數(shù)、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發(fā)現(xiàn)非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據(jù)，謹慎驗證

研究表明，低密度認知負荷低，但高密度任務(wù)完成率高，用戶更喜好

參考資料：論文《基于眼動的網(wǎng)頁對稱性和復雜度對用戶認知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統(tǒng)稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應(yīng)用戶體驗設(shè)計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。

認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率?？墒?，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質(zhì)量低），你的輸入效率很高（很專業(yè)），信息于你而言都是無效的。

假設(shè)負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網(wǎng)品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網(wǎng)，信息量極少、圖版率高帶來極具藝術(shù)的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應(yīng)用因為是專業(yè)使用，首先認知方面隨著員工的專業(yè)度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設(shè)計巧思了。

面向內(nèi)部設(shè)計師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉(zhuǎn)。

實踐階段-如何設(shè)計

通過以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過減少頁面跳轉(zhuǎn)、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業(yè)能力。

基于以上的總結(jié)，對產(chǎn)品進行優(yōu)化。下面以一個簡單案例進行設(shè)計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運營機會點。

如下表格經(jīng)過高屏效策略優(yōu)化前后對比圖，優(yōu)化前相同維度下不同人群數(shù)量的對比需要視線來回跳動比對，而優(yōu)化后的表格內(nèi)容，更符合用戶看差異場景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對數(shù)值大小。

下面以視覺、交互、信息三個層次解剖設(shè)計過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉(zhuǎn)動區(qū) 30度，垂直最大眼動舒適轉(zhuǎn)動區(qū) 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設(shè)計與研究》

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。

交互層｜低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ)：菲茨定律是用來預(yù)測從任意一點到目標位置所需時間的數(shù)學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標的大??；D為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態(tài)，增加懸浮出現(xiàn)的信息組件，前置顯示目標單元格明細信息，同時通過交互出現(xiàn)的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎(chǔ)：交互設(shè)計四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點擊滾動條來查看，根據(jù)用戶目標，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結(jié)語

設(shè)計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節(jié)奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時間和效率。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

什么是設(shè)計系統(tǒng)？

設(shè)計系統(tǒng) = 設(shè)計價值觀和原則+設(shè)計規(guī)范+場景定義+工具包

為什么要構(gòu)建設(shè)計系統(tǒng)？

問題1:

隨著業(yè)務(wù)的拓展，產(chǎn)品和項目數(shù)量不斷增加，發(fā)展中期設(shè)計和交互上不一致性的問題浮出水面，需要采取措施確保產(chǎn)品或產(chǎn)品線之間保持統(tǒng)一的品牌傳達、外觀和體驗，以滿足用戶預(yù)期并向其傳達統(tǒng)一的品牌認知。

問題2:

無統(tǒng)一的設(shè)計規(guī)范和交互原則，沒有統(tǒng)一的UI組件庫和代碼庫，各團隊設(shè)計和前端需花費大量資源陷于低質(zhì)量溝通協(xié)作和重復造輪子，拖慢產(chǎn)品和項目設(shè)計和開發(fā)節(jié)奏。

問題3：

產(chǎn)品項目數(shù)量 vs 產(chǎn)品設(shè)計師，人員配比嚴重不足的情況下，團隊的設(shè)計師們無法從雜/亂/急的日常需求中剝離出來，影響構(gòu)建產(chǎn)品壁壘的質(zhì)量和速度。

設(shè)計系統(tǒng)的價值

產(chǎn)品側(cè)：

設(shè)計側(cè)：

開發(fā)側(cè)：

測試側(cè)：

主流設(shè)計系統(tǒng)-他山之石可以攻玉！

無需猶豫，直接基于現(xiàn)有的優(yōu)秀的開源設(shè)計系統(tǒng)，

設(shè)計系統(tǒng)的打造不必從0-1構(gòu)建， 例如：Ant Design業(yè)界優(yōu)秀的開源設(shè)計系統(tǒng)，我們完全可以站在前人的肩膀，最終生產(chǎn)出符合達觀品牌、業(yè)務(wù)特性的設(shè)計系統(tǒng)。

字節(jié)跳動 Semi Design：https://semi.design/zh-CN/

字節(jié)跳動 Arco Design ：https://arco.design/

以原子理論構(gòu)建設(shè)計系統(tǒng)

原子理論設(shè)計介紹

首先原子設(shè)計理論并不是什么高大上的規(guī)則。最早是由國外前端開發(fā)工程師 Brad Frost提出的，他從化學元素周期表中得到啟發(fā)，發(fā)現(xiàn)在化學世界中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機物，最終形成了宇宙萬物。根據(jù)他的理論，設(shè)計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。

原子理論設(shè)計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設(shè)計系統(tǒng)層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～

原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。

簡單概述下來就五個字：色、形、質(zhì)、構(gòu)、質(zhì)；

在界面中，分子就像是一個由UI元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。

以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關(guān)聯(lián)原則組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規(guī)范。

 組織(Organisms)層

分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區(qū)塊組件），如：列表操作區(qū)塊、列表展示區(qū)塊、表單區(qū)塊、數(shù)據(jù)統(tǒng)計卡片區(qū)塊。

以表單為例，一個表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達不同的場景和含義。

模板(Templates)層

由原子+分子+組織構(gòu)成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質(zhì)就是線框圖，模版在設(shè)計系統(tǒng)承載的作用就是保證設(shè)計方案在原型階段的多樣性。專注于頁面的底層的內(nèi)容結(jié)構(gòu)，頁面中的信息是占位作用，而不是頁面的最終內(nèi)容。

頁面(Pages)層

帶業(yè)務(wù)邏輯的場景案例如：標注詳情場景、抽取詳情場景、權(quán)限管理場景。頁面將真實內(nèi)容應(yīng)用于模板；

頁面是模板的具體實例，填充了真實的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內(nèi)容，使設(shè)計系統(tǒng)有了生命。在模版的基礎(chǔ)上進行優(yōu)化和完善就形成了頁面最終的設(shè)計方案。

關(guān)于設(shè)計系統(tǒng)的常見認知誤區(qū)

誤區(qū)1：設(shè)計體系就是設(shè)計規(guī)范或者組件庫嗎？

許多人認為設(shè)計系統(tǒng)就是單個代碼庫、組件庫、設(shè)計規(guī)范，但實際上他們不是一個層次的東西，準確度的來說設(shè)計體系包含設(shè)計規(guī)范，組件庫也是建立在設(shè)計體系內(nèi)的，組件庫是記錄和共享設(shè)計模式的工具，就是設(shè)計體系工具化和表現(xiàn)層的部分；

誤區(qū)2：設(shè)計體系的存在扼制了組織內(nèi)創(chuàng)造力，會替代掉設(shè)計師？

拋出這個問題，是因為經(jīng)常在不同的場合聽到“設(shè)計系統(tǒng)是扼殺設(shè)計師的創(chuàng)造力”之類的觀點，我個人是很難以認同這個的，對design system的最大誤解就是限制設(shè)計師的想象力。首先設(shè)計系統(tǒng)本身就是一個龐大且復雜的設(shè)計觀集合，需要調(diào)動整個團隊的想象力和創(chuàng)造力，最終達到一個統(tǒng)一共識才有可能被實施和執(zhí)行；

好的設(shè)計系統(tǒng)可以通過流程和機制促進創(chuàng)造力的，而且好的設(shè)計資產(chǎn)可以幫助大家從不必要的、重復的勞動時間內(nèi)節(jié)省出來，當然也不能過度依賴過往的沉淀資產(chǎn)，把自己定位為設(shè)計系統(tǒng)的創(chuàng)造者，而不是使用的工具人，不斷的創(chuàng)造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設(shè)計與技術(shù)資產(chǎn)的限制。不會替代掉設(shè)計師，反而是一個企業(yè)內(nèi)部尊重設(shè)計師價值的開始！是企業(yè)對設(shè)計文化的認可！

設(shè)計體系是動態(tài)的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經(jīng)完成了設(shè)計體系的建設(shè)的人都是錯誤的，都是將將靜態(tài)的設(shè)計規(guī)范曲解成了設(shè)計體系。

正確管理機制：少數(shù)人負責管理，多數(shù)人參與貢獻；避免你做、我用模式，這種生產(chǎn)消費模式非常內(nèi)卷；避免如：我一個設(shè)計師為啥要用你的規(guī)范；這規(guī)范做的太垃圾用處不大，我才不用，用你做的規(guī)范；我苦逼做業(yè)務(wù)，你晉升拿結(jié)果的負面心態(tài)；

然設(shè)計系統(tǒng)也不是簡單的靠少數(shù)的人1-2個月用愛發(fā)電就能完成的，設(shè)計系統(tǒng)是一群人，對一種做設(shè)計文化的認可，每個與之相關(guān)的人都應(yīng)該是設(shè)計體系的貢獻者與布道者！

需要克服的潛在難題

• 產(chǎn)品業(yè)務(wù)復雜性提升，提升建設(shè)難度

• 難以控制創(chuàng)造與控制間的平衡；

• 復用與定制間的平衡，刻意追求復用率而容易丟失整體觀，為特定業(yè)務(wù)目標服務(wù)時不如靈活集中化式方法等

• 資源問題，容易被當成是輔助項目而缺乏預(yù)算等資源….

• 缺乏良性有效的組件庫更新迭代機制，虎頭蛇尾….

• 收益短期不明顯，搭建體系的長期收益難以被組織短期內(nèi)察覺；

  
  

盡管有一系列潛在的問題，但總的來說設(shè)計體系的帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關(guān)鍵問題是：我們?nèi)绾稳ソ⒁粋€更優(yōu)秀的設(shè)計體系。

文章來源：站酷   作者：從你的世界經(jīng)過



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

屏幕有效利用率這個話題想必大家并不陌生，在B端產(chǎn)品中，越來越多的產(chǎn)品和用戶把目光聚焦到屏效上來。站在體驗設(shè)計的角度，立足交互和視覺的設(shè)計手法，挖掘屏效提升的設(shè)計價值，讓屏效最大化是提升用戶體驗的合理方法。

在此文中，對于整個設(shè)計（交互、視覺）的手段方法不做過多的詳細探討，我們重點闡述如何利用實驗研究的手法驗證屏效提升。以某B端項目為例，利用科學的實驗研究方法，通過設(shè)計實驗假設(shè)、提煉任務(wù)場景、準備實驗物料、進行控制變量等完整的實驗方法，來驗證該項目中屏效提升的設(shè)計方法（提高信息密度、縮短操作路徑以及信息重組）最終是否提升屏效。

以下內(nèi)容主要分成兩大部分，第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理，以及我們應(yīng)該如何去設(shè)計響應(yīng)式界面；第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計的核心，B端設(shè)計中臺完整構(gòu)建過程的具體步驟，以及應(yīng)用到的格式塔原則，和命名的一些注意事項，內(nèi)容較多，大家可以根據(jù)上述目錄來選擇性閱讀。

1.1多端兼容設(shè)計的發(fā)展史

簡單概括多端兼容設(shè)計的發(fā)展史，最早是桌面端，比如桌面的一些應(yīng)用；后來出現(xiàn)了移動端，針對移動端大家用的都是WAP，指一種無線應(yīng)用協(xié)議，大家在用手機瀏覽一些網(wǎng)站，會把網(wǎng)站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因為當時網(wǎng)絡(luò)不好，早在3G和2G時代移動端用的都是WAP；在2008年之后出現(xiàn)了響應(yīng)式，也就是做一套代碼可以兼容三端（網(wǎng)頁、移動端、iPad）設(shè)備，在發(fā)展的同時也遇到很多問題，但響應(yīng)式同時也遇到了很多問題；于是又出現(xiàn)了自適應(yīng)，指不同的設(shè)備打開不同的頁面進行自適應(yīng)，自適應(yīng)能增加效率，但需要增加工作量；2017年以后直到現(xiàn)在看到最常用的就是漸進式，類似完整的像在使用一個APP。這是多端兼容設(shè)計的整體的發(fā)展。

1.2 響應(yīng)式布局的種類

1.2.1 響應(yīng)式布局RWD

可以理解成用戶在手機、電腦、ipad打開同一個界面，所呈現(xiàn)的界面是一樣的。需要考慮移動端設(shè)計和網(wǎng)頁端怎么通過一套代碼進行兼容。

1.2.2 自適應(yīng)布局AWD

自動布局算是響應(yīng)式的一種，但平時看到很多響應(yīng)式其實并不是真正的響應(yīng)式，而是自動布局，因為界面在不同的設(shè)備用的是不同的模板，當我們用電腦打開呈現(xiàn)的是一套模板，而用手機打開則是另外一套模板，這種看起來是響應(yīng)式，其實不是。因為當我在開發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時，就會發(fā)現(xiàn)，其實是換了一個網(wǎng)址來根據(jù)不同的設(shè)備進行自適應(yīng)的，而真正的響應(yīng)式是不需要刷新的，在拖小窗口的時候就會變成手機端的那個樣子。

1.2.3 漸進式布局PWD

漸進式布局是近幾年比較新起的，這種布局設(shè)計，很像一個網(wǎng)站或者本身它就是一個網(wǎng)站，但用起來就像一個APP一樣，看到這里大家很容易相到，小程序就是漸進式布局得一種，小程序明顯是一個網(wǎng)頁，但通過技術(shù)的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時候感覺小程序就是一個APP，但核心技術(shù)還是web網(wǎng)頁。

1.3 如何應(yīng)用設(shè)計響應(yīng)式

響應(yīng)式的原理是通過定位的方式來做響應(yīng)式的各種開發(fā)，需要在頁面中至少標出這十個點：中心點，上下左右點，上左上右點和下左下右點，這幾個點其實就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解，其實結(jié)合figma來看，這些點對應(yīng)的就是這樣（如下圖），在figma中的布局點。設(shè)計師通過調(diào)節(jié)圖形的布局點，可以做到在頁面拉伸時，讓想動的元素跟隨變化，不動的元素靜止不動，這就是響應(yīng)式的原理。換言之，我們做響應(yīng)式布局的原理也就是通過figma或者sketch中的布局約束這個功能來實現(xiàn)的。

1.4 響應(yīng)式和自適應(yīng)的區(qū)別

01、響應(yīng)式

如下圖是響應(yīng)式的優(yōu)點和缺點。響應(yīng)式其實就是只開發(fā)一套頁面，這個頁面兼容三端。雖然做了響應(yīng)式，但如何響應(yīng)是需要設(shè)計師去設(shè)計的。比如我們設(shè)計了一個移動端界面，然后全部做好對應(yīng)的自動布局，再進行頁面拉伸，內(nèi)容隨之會發(fā)生變化，比如當拉伸到1024*768的時候，也就是iPad的尺寸，就會發(fā)現(xiàn)局部在設(shè)計上有些不合實際情況，這時就需要設(shè)計師在對應(yīng)尺寸的設(shè)計稿上進行內(nèi)容上的微調(diào)，比如按鈕不可能那么長，就把按鈕設(shè)計的短一點。當繼續(xù)進行拉伸到1440網(wǎng)頁的寬度時，然后再酌情針對網(wǎng)頁尺寸的呈現(xiàn)樣式，局部進行尺寸的調(diào)整，比如文字和按鈕被拉伸到網(wǎng)頁版都需要居中對齊，電腦端的樣式就需要設(shè)計師重新排版了。

通常在B端系統(tǒng)，設(shè)計師需要做響應(yīng)式設(shè)計時，往往是從大往小做設(shè)計，這也取決于這個B端產(chǎn)品是否需要進行移動端的設(shè)計，《B端設(shè)計總概二》中提到過什么情況下進行設(shè)計B端移動端。如果需要設(shè)計B端移動端，就需要我們將網(wǎng)頁改成移動端設(shè)計，比如B端的側(cè)邊欄導航在拉伸到移動端時，就會變成用一個折疊懸浮的iocn來替代等等這樣設(shè)計上的改變。在figma中，做三端拉伸時候，可以用斷點插件來進行演示，通過對斷點插件的設(shè)置，就可以完美的看到頁面在三端不同情況的適配呈現(xiàn)，斷點插件用來做演示非常方便。

02、自適應(yīng)

如下圖是自適應(yīng)的優(yōu)點和缺點，其實就是一個項目開發(fā)三個頁面，分別做定制設(shè)計，網(wǎng)頁端、移動端和Ipad端。

2.1必讀前言

我們都知道2021年也就是今年是我國新基建的元年，十四五規(guī)劃2035遠景目標里提到重點發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型，尤其是今年我們設(shè)計師更能深刻體會，C端和B端已經(jīng)是完全兩個不同的行業(yè)，C端發(fā)展近十年，已經(jīng)很難再做到創(chuàng)新上的突破，該做的功能和創(chuàng)新都已經(jīng)做了，而B端這片藍海才剛剛開始發(fā)力，很多企業(yè)也都在考慮B端系統(tǒng)的搭建，降本提效率成了很多公司新的指標，因此數(shù)字化轉(zhuǎn)型重點在于B端系統(tǒng)探索，B端重點在于中臺的搭建！設(shè)計師通過設(shè)計中臺，構(gòu)建出基本的業(yè)務(wù)類型，再分類到業(yè)務(wù)中，構(gòu)建出不同的業(yè)務(wù)界面，所以設(shè)計中臺非常關(guān)鍵，很多公司經(jīng)常會用這兩個系統(tǒng)去構(gòu)建，Antdesign和Elemnet就是設(shè)計中臺，我們會發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng)，那怎么進行設(shè)計中臺的設(shè)計呢？和我們設(shè)計師有什么樣的關(guān)聯(lián)度呢？帶著這個問題，我們深度探索B端設(shè)計中臺的落地！

2.2 中臺的概念及作用

概念：中臺是互聯(lián)網(wǎng)的術(shù)語，一般應(yīng)用于大型企業(yè)，中國互聯(lián)網(wǎng)的變革永遠是從大型互聯(lián)網(wǎng)開始，大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革，這也是中臺的興起，一般指搭建一個靈活快速應(yīng)對變化的架構(gòu)，快速實現(xiàn)前端提的需求，避免重復建設(shè)，達到提高工作效率目的。

作用：降本提效。如果沒有組件庫，普通設(shè)計師一天最多做十個頁面，再多就不太可能了，如果有組件化得產(chǎn)生，一天可以做一百個左右的界面。在面對B端系統(tǒng)這樣幾千個頁面的巨大的工作量前，組件庫的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因為設(shè)計師設(shè)計的組件只是一個樣式，而前端需要把組件進行代碼化，所以組件一定是代碼化的，也就是說只有代碼化的組件才是真正的組件。所以視覺組件的復用，和前端代碼的復用，可以大大提高設(shè)計師的工作效率。

2.3 設(shè)計中臺的構(gòu)建過程

2.3.1 基本庫建立

基本庫指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等，之所以強調(diào)系統(tǒng)兩個字，有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范，然后進行調(diào)用應(yīng)用在系統(tǒng)中的各個地方，比如我們想調(diào)用一個顏色，不是去隨選用一個顏色，應(yīng)該嚴格的從色彩系統(tǒng)中去調(diào)用，如果系統(tǒng)組件庫里沒有這個顏色，我們也絕對不可以使用，可以先用替代色做或者根據(jù)業(yè)務(wù)再進行補充顏色進組件庫為了后續(xù)的調(diào)用，這是一種比較嚴謹?shù)氖褂梅绞?。所以在建立組件庫的時候我們要考慮全面，組件庫中如果沒有相應(yīng)的組件，我們應(yīng)該試著反推一下，是否要加進組件庫中去，來進行系統(tǒng)的調(diào)用。在做中臺的過程中，我們一直使用Antdesign，我們對組件的名稱，組件的分類其實一點都不陌生，其實Antdesign也在借鑒國外的Bootstrap組件庫（大家感興趣可以下載Bootstrap組件庫進行查看），所以并不是Antdesign組件庫形成了一定的規(guī)則，它也是在沿用別人的規(guī)則，而這些規(guī)則也需要不斷的有大公司去繼承出來，所以慢慢衍生出來現(xiàn)在這樣的組件庫，那中臺設(shè)計，首先要搭建基本庫，把基本庫里的基礎(chǔ)一些系統(tǒng)搭建好后，我們繼續(xù)去做擴展庫。

2.3.2 擴展庫建立

如下圖，擴展庫中包含了很多內(nèi)容，比如分了四類，導航系統(tǒng)，數(shù)據(jù)錄入，數(shù)據(jù)展示和反饋系統(tǒng)。其中導航系統(tǒng)又包含了，面包屑導航、下拉菜單、導航菜單、頂部導航等等，包括后面的數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋系統(tǒng)也包含了很多內(nèi)容。我們做這樣的擴展庫，也不需要做成像Antdesign的組件庫里包含的那么多，或者和新出得字節(jié)Arco組件庫，因為它們面向的是系統(tǒng)級的解決方案，各行各業(yè)都可以用它，它面向的是一個大系統(tǒng)，也許我們只涉及到了其中的20%，因為也沒有一個系統(tǒng)能用到它所有的組件，所以我們自己在設(shè)計組件庫的時候，一定是按照我們自己項目的范圍去做組件庫，而不是做一個大而全的，大而全的組件庫對我們也沒有意義。它們做的是公共平臺，而我們要做的是一個專屬平臺。

2.3.3 方法庫建立

形成完基本庫和擴展庫后，第三步是建立方法庫。方法庫告訴我們的是什么時候用，比如我做了一個多選框，這個多選框應(yīng)該什么時候用，是不是只要遇見一個選擇就去用多選框，肯定不是，應(yīng)該加以說明什么時候用這個多選框。類似于是組件的設(shè)計說明。

2.3.4 案例庫建立

最后再做一個案例庫，最佳實踐庫，具體組件什么時候用我們知道了，接著案例庫就是在告訴我們應(yīng)該如何正確的使用，或者說的方法是什么。比如標簽的左對齊和右對齊，這種情況都對，什么時候用頂對齊，什么時候用左對齊，什么時候用右對齊呢？那么根據(jù)眼動儀實驗數(shù)據(jù)數(shù)據(jù)來看，并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實踐得案例放進去，給使用的人去做指引。

所以設(shè)計師做的事情，不僅僅是應(yīng)用組件庫和創(chuàng)造組價庫，還應(yīng)該指導其他設(shè)計師，指導開發(fā)人員在去復用每個頁面組件的的時候，應(yīng)該怎么正確的使用，這也是在B端設(shè)計中一個關(guān)鍵的環(huán)節(jié)，同時我們的視覺系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的，所以在B端中做設(shè)計一定也不會脫離業(yè)務(wù)去做，我們一定要聯(lián)系到實際的業(yè)務(wù)場景中，這個業(yè)務(wù)場景指的就是業(yè)務(wù)和視覺的結(jié)合，在做C端的時候，業(yè)務(wù)場景一定不會比B端多，C端的業(yè)務(wù)場景大多是定制化的業(yè)務(wù)場景，它要求的是個性化，不要求通用，盡量得個性化，比如圖標、按鈕、頁面，而B端需要統(tǒng)一化，中臺組件庫的落地，可以大大提高設(shè)計師的工作效率和開發(fā)人員的協(xié)同效率，嚴謹?shù)恼{(diào)用組件使用組件，可以使得系統(tǒng)頁面保持高度的一致。

2.4 認識格式塔原則

2.4.1接近性

如圖1：可以看出縱列的關(guān)系更緊密，因為縱間距小于行間距。

如圖2：可以看出行間距大于列間距，它得橫向關(guān)系更加緊密。通過圖中這樣的視覺設(shè)計為什么會感覺間距更加緊密呢？這屬于用戶心理學的應(yīng)用，如果元素相鄰的更近，元素之間的關(guān)系就會更加的緊密。

如圖3：如果元素相鄰的關(guān)系都是保持一樣的，那么它們的關(guān)系是相對對等的。

由此可以得出結(jié)論，如果相鄰的關(guān)系越近，它們的關(guān)聯(lián)度就越近，如果相鄰的越遠，它們的關(guān)聯(lián)度就越遠。

應(yīng)用案例：如圖4卡片中得標題和內(nèi)容，設(shè)計中把標題和內(nèi)容進行區(qū)分，所以我們會做大量的留白，這樣的留白就會讓信息結(jié)構(gòu)具有層次感，層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度，如果想讓它們有關(guān)聯(lián)度，就讓它們距離近一點不要做區(qū)分，如果不想讓它們有關(guān)聯(lián)度，或者關(guān)聯(lián)度出現(xiàn)一個等級的區(qū)分，那么就可以加一條線，讓它們之間的關(guān)聯(lián)度分隔開。這就是格式塔接近性的應(yīng)用。

2.4.2 相似性

如圖5：如果去區(qū)分右邊的形狀，通常我們會根據(jù)形狀進行區(qū)分，因為人的潛意識會認為相似的形狀會更有相關(guān)的分類性。這就是格式塔中的相似性原則。

應(yīng)用案例：如果文字的標題大小是保持一致的，包括它有統(tǒng)一的大小，統(tǒng)一的色彩，統(tǒng)一的字號，那系統(tǒng)中的其他同樣功能的地方，都應(yīng)該用統(tǒng)一的文字，這就是格式塔相似性的應(yīng)用，比如圖標也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標進行表達，圖標之間的設(shè)計才具有相似性。

2.4.3 主體與背景

如圖6：可以看到有一個L，是主體與背景進行了區(qū)分，如果在設(shè)計的時候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨特，或者將背景的顏色變得更加分明，這樣就可以做到那個L看的更加明顯。這就是主題與背景區(qū)分原則。

應(yīng)用案例：比如警告彈出，可以用色彩去區(qū)分，目標就是讓用戶看的更加得清晰，當警告的時候給用戶一個警告的信息，當成功的時候給用戶一個成功的信息。還有類似對話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們設(shè)計系統(tǒng)中，前景和背景進行區(qū)分的時候，我們就可以通過色彩進行區(qū)分，色彩的區(qū)分要保持統(tǒng)一，比如背景色彩透明度50%同時加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個平面上，距離平面越近，它得陰影越短，距離平面越遠，它得陰影越長，這也是陰影的層級關(guān)系。

2.4.4 封閉性

如圖7：可以看出這是一個四分之一的圓形。

如圖8：這個圖可以看出是一個五角星。

封閉性應(yīng)用案例：當一個形狀被另外一個形狀或者被另外一個色彩阻斷的時候，并不影響人們對這個形狀額外得認知，一定會腦補出另外一個形狀，這個原則和我們UI的關(guān)系是什么呢？比如一個loading，半圓一直在旋轉(zhuǎn)，或者圖表中的圓占比，我們就可以判斷出誰大誰小，誰多誰少，判斷出當前的進程和位置，封閉性原則通常應(yīng)用在圖標的設(shè)計，圖表的設(shè)計和步驟條的設(shè)計中。

2.4.5 連續(xù)性

如圖9：可以看出用一些簡單得形狀來體現(xiàn)，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個是一組，可以看出它們具有連續(xù)性；另外一組三角形箭頭指向右下角，可以看出它們是連續(xù)的一組。不同的形狀會有連續(xù)性，箭頭也特別有指向性，這就是為什么返回和前要進放在不同的位置，當我們的數(shù)據(jù)需要有連續(xù)的時候，我們也要使用相似的形狀來表達，這就是連續(xù)性原則的應(yīng)用。

同理如圖10：連續(xù)性一定是要有連續(xù)等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續(xù)等階變化，通過色彩的透明度也可以做到連續(xù)性。

2.5 組件的命名規(guī)則

2.5.1 如何正確的命名

很多公司或者不同公司有不同的命名方式，這個需要和團隊開發(fā)提前做溝通，主要以方便開發(fā)習慣操作為主，如果不命名也不能非得說成是錯誤的，命名可以理解成是一件錦上添花的事情，因為一切都以效率優(yōu)先，命名自然會影響工作效率，通常情況，組件的命名可以分成組件的名稱、級別、尺寸、狀態(tài)，這樣的命名順序來進行，這樣命名開發(fā)使用也比較方便，因為是按照了開發(fā)的統(tǒng)一規(guī)則來進行命名的。如圖所示：

2.5.2 更多命名英文詞匯

當英文不好的時候，推薦大家記常用組件英文名，以及常用狀態(tài)名、級別名、內(nèi)部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~

至此B端系統(tǒng)設(shè)計總概系列為終結(jié)篇，回顧第一篇主要內(nèi)容是如何正確設(shè)計組件庫，B端業(yè)務(wù)調(diào)研的具體過程步驟，以及視覺規(guī)范的建立，可以看出第一篇屬于B端設(shè)計的方法論或者設(shè)計指導，也是為開展B端設(shè)計前的一些準備工作；回顧第二篇總概主要內(nèi)容是如何設(shè)計表單、表格、圖標、儀表盤這些經(jīng)常用到的設(shè)計難點，第二篇更加講究設(shè)計落地過程中遇到的疑難雜癥，專業(yè)技法；回顧當前總概三，主要內(nèi)容就是中臺規(guī)范的建立和自適應(yīng)、響應(yīng)式適配的難點，主要是成系統(tǒng)的B端設(shè)計步驟。我們都知道B端市場剛剛打開，而且當下對B端設(shè)計師的需求還遠遠不能滿足我國現(xiàn)代化建設(shè)，數(shù)字化推進這么的大市場，作為UIUX，更早的拓寬一條路是我們當下必要的選擇，謝謝閱讀，祝愿各位2022乘風破浪，B端設(shè)計學有所成，如虎生翼！

樹形選擇

關(guān)于樹形選擇，我們必須先知道它的基礎(chǔ)概念，“樹” 究竟是什么？我們先來看看樹狀結(jié)構(gòu)的定義

樹狀結(jié)構(gòu)：

樹狀結(jié)構(gòu)其實是作為一種層次結(jié)構(gòu)化的表達方式，它能夠?qū)涞某橄蟪鰜肀磉_完整的構(gòu)造關(guān)系，為什么叫做樹，是因為它更像是一個上下顛倒的樹，根部在最頂端，枝葉反而變?yōu)橄路健?

同樣在對樹狀結(jié)構(gòu)的整體命名上，也遵循了與之類似的表達方式：

節(jié)點（Node）：是樹狀結(jié)構(gòu)當中的基本單位，使用節(jié)點可以表示 不同數(shù)據(jù)間的 組成關(guān)系（從屬關(guān)系與并列關(guān)系）通常節(jié)點會分為幾類特殊情況。

1.根節(jié)點：整個樹狀結(jié)構(gòu)的開端被稱為根節(jié)點。一個樹狀結(jié)構(gòu)一定只有一個根，在思維導圖中，根節(jié)點就代表著它的開端，用于延展出更多的樹狀結(jié)構(gòu)。不過在目前的樹形選擇當中，因為對易用性的要求，通常會隱藏根節(jié)點，只展示子節(jié)點。而根節(jié)點隱藏在 標題、選項文本 當中。

2.子節(jié)點：根節(jié)點之外的節(jié)點被稱為子節(jié)點。一個樹狀結(jié)構(gòu)子節(jié)點數(shù)量是沒有具體限制，在樹形選擇當中是直接展示出來的部分。

3.葉節(jié)點：沒有連接到其他子節(jié)點的節(jié)點。葉節(jié)點屬于一類特殊的子節(jié)點，它是整個樹狀結(jié)構(gòu)的最末端節(jié)點，在樹形選擇當中是一個重要的概念，下面會展開來講。

分支（Branch）：節(jié)點之間的鏈接，在我們樹形選擇當中，分支的線條可以選擇顯隱。其搭配的使用方式也有所不同

同時我們還會用到節(jié)點的幾個基礎(chǔ)的概念：

節(jié)點層級：指當前節(jié)點所在的層級，比如根節(jié)點為第一層級，根的子節(jié)點為第二層級，以此類推；

節(jié)點高度：對于某一節(jié)點的高度，便是該節(jié)點下所有葉節(jié)點從上到下的個數(shù)；

節(jié)點深度：指該節(jié)點到根節(jié)點的唯一路徑長度，深度與層級較為類似。

樹狀結(jié)構(gòu)究竟出現(xiàn)在生活中的什么地方呢？樹狀結(jié)構(gòu)對于我們又有什么用呢？大家可能理解上會覺得很枯燥，我給大家舉一個例子：

回憶一下我們小學使用字典時的場景，首先我們是先通過聲母，去確定這個漢字的大概的頁數(shù)范圍，然后通過韻母去確定這個漢字的詳細位置，最后通過音調(diào)找到想要尋找的漢字：

其實字典的設(shè)計，便是一個典型的樹形結(jié)構(gòu)。而在 B端系統(tǒng)中我們常見的公司組織架構(gòu)、省 市 縣 地址選擇、在線教育的班級結(jié)構(gòu) 等等，這些都是使用了完整的樹形結(jié)構(gòu)。

采用樹形可以快速進行結(jié)構(gòu)化的表達，其目的是為了用戶能夠快速地增刪改查，想要更多了解結(jié)構(gòu)化表達的同學推薦大家看一本書《金字塔原理》，里面講了非常多的邏輯化思維、表達的方法與內(nèi)容，內(nèi)容比較多，而這種思維其實在我們工作生活中都能夠用到。

樹狀結(jié)構(gòu)組成：

1.層級縮進

為了將樹的整個結(jié)構(gòu)完整的表達出來，會使用層級縮進的方式進行區(qū)分，通常會使用 8px 對下一級節(jié)點進行縮進，這樣能夠表達更為完整的層級關(guān)系。

這里要注意，如果想要更為強調(diào)樹形選擇的層級關(guān)系或者樹形內(nèi)容本身就比較多的情況下，可以見解 Coding 編輯器的思路，即：將縮進內(nèi)容使用“分支線”進行表達，更明確清晰。 這里使用層級線后，折疊圖標也會有所不同，下面有明確解釋。

2.折疊圖標（節(jié)點按鈕）

主要是將節(jié)點下的所有樹葉與子節(jié)點進行展示，在整個樹的結(jié)構(gòu)中，折疊圖標一般分為兩種：三角折疊、方形折疊

三角折疊：為頁面層級較少時使用。因為在較少的層級下，用戶不用特意去思考當前節(jié)點所在層級究竟在哪。

方形折疊： 更多與頁面層級線進行配合使用，通過層級縮進，將頁面層級線標識清楚，能夠更好的在多層級情況下進行合理區(qū)分。

3.選擇控件

整個樹形結(jié)構(gòu)依舊是在選擇錄入框架下，分為單選和多選。因此需要對其類型有所展示，特別是在多選的場景下，一定要標明它的類型，方便用戶進行理解使用。

通常這個控件可以在單選的時候進行隱藏，這里先按下不表，我在樹形選擇的類型當中深入給同學們進行分析理解。

4.選項文本

注意字數(shù)限制、超出后如何處理即可，我就不做過多介紹。

樹形選擇的類型：

在講樹形選擇之前，我先為大家講解關(guān)于與其相關(guān)的同類型產(chǎn)品，為了方便大家的記憶，我選擇出了兩類不同的組件進行對比，感興趣的同學可以關(guān)注“CE青年” 后臺回復樹形對比進行查看。我通過視頻的形式為大家進行了講解，相信大家在看完之后一定會有所收獲。

1.單選樹

單選樹只能選擇葉節(jié)點，也就是需要將每個樹展開過后才能進行選擇。

它是一個較為傳統(tǒng)的選擇方式，因為它的選擇熱區(qū)較小并且理解成本較高，因此這種方式不太滿足現(xiàn)如今對于B端產(chǎn)品效率提升方面的要求，并且要求十分特殊，因此使用較少，現(xiàn)多以單選節(jié)點樹為主。

2.單選節(jié)點樹

單選節(jié)點樹與單選樹最大的區(qū)別在于其能夠選擇子節(jié)點，這樣可快速選擇該子節(jié)點以及其各種葉節(jié)點。

同時傳統(tǒng)的單選節(jié)點樹中是采取單選按鈕的方式，隨著對B端要求的不斷提高，并且在樹的功能越發(fā)的復雜過后，幾乎取消了 單選按鈕 的形式，取而代之的是將整個 文本標簽 作為選擇的熱區(qū)，用戶點擊過后即可進行選擇。

因此在樹形選擇當中，逐漸將單選節(jié)點樹演變成由兩部分熱區(qū)所組成的一個控件：

在左側(cè)，主要以樹類型的展開折疊操作，熱區(qū)通常就是圖標折疊圖標這一部分；

在右側(cè)，以選擇該選項、節(jié)點的操作為主，熱區(qū)范圍以整個選項文本作為基礎(chǔ)，進行延展即可。

這里還是提示以下新讀者，這類選擇一定要進行 Hover 狀態(tài)處理，不然用戶無法根據(jù)光標的變化判斷是否可點擊，當然老讀者跳過就行～

3.多選節(jié)點樹

大家在對比單選與多選時會發(fā)現(xiàn)，為什么不會存在多選樹？不存在只選擇選項的多選呢？

思考時間又到了，別忘下劃，自己先想想呢～

雖然在理論上會存在多選樹的情況，但是它存在的價值比較詭異。首先在樹的節(jié)點當中，我選擇一個子節(jié)點就是選擇該節(jié)點下的所有。因此可以說是選擇了一個節(jié)點；或者說它選擇了該節(jié)點下的多個選項，因此在實際情況中這類場景過于的少，更多會用多選節(jié)點樹進行代替。

當然，多選節(jié)點樹與單選節(jié)點樹在結(jié)構(gòu)上是十分接近的，就是將復選框展示出來，方便大家進行選擇。考慮到大家經(jīng)驗不足，建議這里復選框放在折疊圖標前側(cè)，原因有二：

• 在樹形選擇后續(xù)的拓展當中，經(jīng)常會遇到選擇增加一些操作功能，比如 新增、刪除、復制、粘貼、拖動排序。我看很多設(shè)計師最開始因為種種原因?qū)⑦x擇組件部分放在后側(cè)，導致之后的操作無法進行更多的拓展，隨之崩潰，對樹形選擇又是一頓亂造～

• 現(xiàn)有的基礎(chǔ)架構(gòu)基本都是沿用了這類設(shè)計，可減少前端同學的工作量，同時也減少他 BUG 的產(chǎn)生。

多選節(jié)點樹的使用場景非常多，我舉一個大家在樹形選擇中都會犯的例子，希望大家能夠多理解其中存在的特殊邏輯：

比如在一個大型上市公司當中，我作為老板會去設(shè)定整個“設(shè)計部”的權(quán)限，并且想要得到的效果是之后有任何新員工都是使用這個權(quán)限。如果作為一個新人設(shè)計師，很容易就會使用多選節(jié)點樹，將整個組織架構(gòu)進行選擇，但是這樣的選擇與用戶實際想要的內(nèi)容是存在較大差異的。

在產(chǎn)品設(shè)計中，對于上訴的“設(shè)計部”這個概念其實是一個動態(tài)數(shù)據(jù)，即在之后新增到“設(shè)計部”的所有員工，我不必再去權(quán)限管理中重新配置。我們遇到動態(tài)數(shù)據(jù)的情況時，首先不建議大家采取樹形選擇，因為首先對于這個概念的理解成本很高，無法通過樹形選擇這樣的方式讓用戶理解；同時系統(tǒng)對于這類動態(tài)數(shù)據(jù)的情況都建議特殊處理，至于怎么處理，大家可以在評論區(qū)討論，我也會在后續(xù)文章當中為大家進行講解。

樹形選擇的優(yōu)點

易理解：

因為樹狀結(jié)構(gòu)本身就已經(jīng)存在很久，早在 DOS 計算機時代就有它的影子，經(jīng)過長期累月的發(fā)展，用戶在理解上也會相對更加容易

快瀏覽：

在數(shù)據(jù)量特別大的時候，能夠根據(jù)子節(jié)點優(yōu)先找到自己想要的葉節(jié)點，從而提升選擇效率，與《選擇錄入02》當中講到的 Tab選擇十分類似，沒看過的同學建議先去看看。

看結(jié)構(gòu)：

結(jié)構(gòu)，能夠輔助人們進行快速記憶，從而對整體框架有著更深了解。而樹形選擇正是有了這種結(jié)構(gòu)能夠更為方便的讓更多人熟知，從而更快了解業(yè)務(wù)。

樹形選擇常見誤區(qū)：

數(shù)據(jù)量

首先對于樹形選擇本身的控件形式，你就需要去分析其能承載的內(nèi)容數(shù)據(jù)量。應(yīng)該是在什么范圍內(nèi)較為合適。

當數(shù)據(jù)量過大時一定會出現(xiàn)異步加載、數(shù)據(jù)分頁等諸多情況，因此在設(shè)計中，需對這類情況進行設(shè)計。

全選功能

全選功能本身較為簡答，無外乎就是一個復選框的事情，但是在上面提到的數(shù)據(jù)量過大 + 全選的存在，會有些問題還需要大家進行留意。

鍵盤映射

在樹形選擇當中，都可以采取鍵盤操作從而提高效率。基本規(guī)則是：

↑鍵：向上切換同級節(jié)點；從第一子節(jié)點，順序返回父節(jié)點；

↓鍵：向下切換同級節(jié)點；順序進入已展開的第一子節(jié)點；

←鍵：關(guān)閉當前級別節(jié)點；返回上一級父節(jié)點；

→鍵：展開子節(jié)點列表；順序進入已經(jīng)展開的第一子節(jié)點；

回車鍵：提交當前 foucs 的節(jié)點選項；

樹形選擇是較為常見的一類方式，但由于大家對 基本的樹形結(jié)構(gòu) 認識不足，導致對其設(shè)計會有許多誤區(qū)。

關(guān)于樹形選擇大家還有什么疑惑，可以在評論區(qū)咱們一起討論～

任何一個新穎的設(shè)計浪潮，都會影響設(shè)計師的設(shè)計表達。我們能做的就是感受浪潮、尋找源頭、思考走向，隨時精準有力的擁抱變化。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1 列表

客服系統(tǒng)常規(guī)使用的列表由頂部操作欄、表頭、表體、底部操作欄構(gòu)成。表格是為可讀性而生，所以表格的易讀、易對比、易操作才是表格設(shè)計的首要目標。

1.1應(yīng)用場景

（1）展示大量結(jié)構(gòu)化的數(shù)據(jù)。

（2）需要對數(shù)據(jù)進行排列、搜索、分頁、操作等復雜行為。

1.2設(shè)計原則

(1)易讀性

1）表頭。保證表頭字段名稱精簡易懂，既能節(jié)省列表空間，又能減輕視覺壓力。表頭的固定功能也能夠很好體現(xiàn)系統(tǒng)界面的友好性，尤其當表頭字段過多，數(shù)據(jù)類型不好識別的情況，固定表頭能夠大大提升用戶的數(shù)據(jù)瀏覽效率。

2）行高。較小的行高可以承載更多的信息，但會降低視覺掃描效果，適宜的行高更利于閱讀。目前客服系統(tǒng)常用規(guī)格為36px行高，但有些數(shù)據(jù)量大空間小的專區(qū)，需要展示盡可能多的數(shù)據(jù)時，會考慮會采用24px或30px等小行高，需要基于場景的需求進行選擇。

3）行排序?？筛鶕?jù)字段以及列表內(nèi)容的必要性配備排序、篩選、搜索等功能，方便用戶快速篩選信息或進行信息對比查看。

4）斑馬線。斑馬線能夠增強用戶視覺的橫向引導，尤其閱讀較寬表格且數(shù)量還多的列表，可以避免表格內(nèi)容過多時，出現(xiàn)錯行的現(xiàn)象。

5）分割線。橫向分割線能夠減輕列表豎直方向的視覺重量，只要采用合適的對齊方式，縱向分割線的作用就可有可無。當表頭字段內(nèi)容少，且易于區(qū)分時，可以考慮取掉單元格的縱向分割線，弱化表格形式，便于橫向信息閱讀、信息獲取和信息間對比的同時，又能夠簡化頁面。當數(shù)據(jù)量太多或單元表格較寬時，保留縱向分割線幫助提升瀏覽速度。

6）列寬。盡量減少展示的列的數(shù)量，關(guān)注用戶需要的必要信息，當表頭字段過多時采用橫向滾動條的形式，保證列與列之間足夠的呼吸感。

7）自定義列。不同用戶信息側(cè)重可能會有所不同，可通過自定義列的下拉面板對列表內(nèi)容自定義展示。

8）列對齊。標題和內(nèi)容一般采用左對齊，更符合用戶的閱讀順序。金額數(shù)值排列采用右對齊，既方便用戶讀取數(shù)據(jù)，又方便進行縱向數(shù)據(jù)對比。

9）空白格。對于無數(shù)據(jù)項用-占位，不留白。

10）分頁。客服系統(tǒng)列表數(shù)據(jù)龐大，通常采用分頁來緩解加載壓力，相對用戶而言，通常滾屏會比分頁更便利，所以，若無展示數(shù)據(jù)量要求且一屏能展示完時，會盡量避免使用分頁。

當使用分頁時，考慮到用戶的操作習慣，可讓用戶自定義每頁展示數(shù)量。

11）特殊標識。對于用戶關(guān)注的數(shù)據(jù)狀態(tài)變化，可以采用一些符號標識，便于用戶快速定位信息的同時，也能更加直觀的呈現(xiàn)數(shù)據(jù)變化。如下圖，通過不同顏色和方向的箭頭來反映數(shù)據(jù)變化。

12）全屏。全屏展示能夠避免和表格無關(guān)內(nèi)容的干擾，提供沉浸式閱讀體驗，可根據(jù)場景需要配置全屏閱讀功能。

13）操作項。對于用戶需要進行業(yè)務(wù)辦理或高頻點擊的操作欄可以固定在列表的兩側(cè)，更方便用戶對數(shù)據(jù)進行操作。當操作項太多或操作項不常用時，可通過收起較低頻操作項，來節(jié)省頁面空間，保證用戶閱讀高效性。

(2)易搜索

1）條件查詢。一般位于表單查詢頁面上方查詢條件模塊，當查詢區(qū)域內(nèi)容過多時，可展示第一行的篩選項，其余收起。

2）表頭篩選。在表頭單元格右側(cè)增加篩選圖標，點擊后出現(xiàn)篩選覆蓋層，根據(jù)不同篩選類別，配置相對應(yīng)的表單組件，可快速查找數(shù)據(jù)。

3）標簽篩選。將用戶常用篩選條件或關(guān)注目標設(shè)置為默認選項，如時間、狀態(tài)、范圍，一般位于頂部操作欄或表頭區(qū)域。

(3)易操作

1）單條操作。單條數(shù)據(jù)操作一般固定在列表左側(cè)或右側(cè)。

2）批量操作。當對批量數(shù)據(jù)進行相同操作時，沿著用戶的操作路徑，建議將此類操作按鈕放至底部操作欄。

3）全局操作。當進行一些“導入、新增、導出、其他頁面跳轉(zhuǎn)入口”等列表的全局操作，或進行模糊搜索、條件篩選等操作時，建議將操作按鈕放至頂部操作欄。

4）詳情?？稍诓僮骼锛印霸斍椤卑粹o，也可將名稱項做成可點擊樣式，跳轉(zhuǎn)詳情。

5）樹形結(jié)構(gòu)展示。無須用戶進行頁面跳轉(zhuǎn)，展開父級節(jié)點即可查看子級列表內(nèi)容，一般控制在三層以內(nèi)。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)