2023-2-7 博博
談到 B 端組件，很多人的印象是多且雜，想要全面準(zhǔn)確的熟悉這些它們，需要我們對(duì)它有個(gè)合理的歸納總結(jié)。可能每個(gè)人會(huì)從不同的視角去做這件事情，我一般是按照使用場(chǎng)景去對(duì)組件分類整理。
下面我們根據(jù)這個(gè)分類框架來(lái)逐個(gè)聊聊這些組件。
說(shuō)到基礎(chǔ)組件，我想再將其細(xì)分成兩個(gè)大類：一類是通用組件；一類是柵格/導(dǎo)航。怎么去更深刻的理解這兩類的區(qū)別呢，我們可以打個(gè)這樣的形象比方：
通過(guò)這個(gè)比方我們不難理解，柵格/導(dǎo)航是先給頁(yè)面定下了基本框架，而通用組件則是在這個(gè)框架基礎(chǔ)上搭建頁(yè)面的所用到基本元素。
常見(jiàn)通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來(lái)似乎很簡(jiǎn)單，但卻是決定產(chǎn)品品牌調(diào)性、界面細(xì)節(jié)品質(zhì)的重要因素，在設(shè)計(jì)過(guò)程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談?wù)勥@三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產(chǎn)品的主要色調(diào)，在選取時(shí)應(yīng)當(dāng)優(yōu)先選擇品牌色，但有一點(diǎn)要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調(diào)，則盡量考慮另選取一個(gè)冷色系作為主色，原因有兩點(diǎn)：一是為了避免和警告、錯(cuò)誤色沖突，產(chǎn)生歧義；二是冷色系帶有商務(wù)、專業(yè)、冷靜的情感，更符合 B 端產(chǎn)品調(diào)性。
同時(shí)主色選取應(yīng)避免高亮、熒光色、灰調(diào)高的顏色。
主色的應(yīng)用
主色在設(shè)計(jì)中常見(jiàn)的應(yīng)用包括可交互、選中狀態(tài)、可視化、插圖、圖標(biāo)等場(chǎng)景。
② 功能色
功能色主要用于頁(yè)面表征狀態(tài)，常見(jiàn)有成功色、警告色、報(bào)錯(cuò)色等。
成功色
主要用于操作結(jié)果成功提示以及標(biāo)簽配色等。
警告色
主要用于警告提醒功能以及標(biāo)簽配色等。
報(bào)錯(cuò)色
主要用于系統(tǒng)報(bào)錯(cuò)提示、圓點(diǎn)提示、以及標(biāo)簽配色等。
③ 中性色
中性色在頁(yè)面設(shè)計(jì)中應(yīng)用非常廣泛，從線條到文字再到圖形等等都可以見(jiàn)到它的影子。
Tips：無(wú)論我們主色調(diào)是什么，中性色在調(diào)色時(shí)建議可加入適量的藍(lán)色調(diào)，可讓頁(yè)面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個(gè)顏色的梯度呢？（這里主要指對(duì)主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當(dāng)我們需要淺色，通過(guò)調(diào)整白色遮罩透明度得到合適顏色；而當(dāng)我們需要深色時(shí)，則通過(guò)調(diào)整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優(yōu)點(diǎn)是后續(xù)如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規(guī)范包含字體、字號(hào)、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規(guī)范即可：
② 字號(hào)
不同于 C 端，B 端在字號(hào)選擇上應(yīng)當(dāng)盡量保持克制。研究表明，Web 端上正文字號(hào)為 14 時(shí)，可以帶來(lái)最佳閱讀體驗(yàn)。因此在字號(hào)選取上應(yīng)盡量?jī)?yōu)先選取 14 號(hào)字。如果想要區(qū)分文字層級(jí)，優(yōu)先級(jí)從高到低的手法應(yīng)該是顏色、字重、字號(hào)，也就是說(shuō)一般盡量不采用字號(hào)大小區(qū)分文字層級(jí)。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過(guò)公式算出行高非整數(shù)或非偶數(shù)，可就近取偶整數(shù)。
間距
關(guān)于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優(yōu)先考慮 8px 的倍數(shù)作為間距值，在一些特殊場(chǎng)景可采用 4px 的倍數(shù)間距值。
分割線
分割線寬度一般統(tǒng)一為 1px 即可，同時(shí)注意顏色不可過(guò)深，以免干擾主體信息。如果需要不同層級(jí)分割線，可用顏色深淺來(lái)區(qū)分。
圓角
圓角大小一般根據(jù)使用場(chǎng)景控制在 2-3 個(gè)梯度即可，既不能全部統(tǒng)一一個(gè)圓角值，同時(shí)也不適合出現(xiàn)過(guò)多圓角值。同時(shí)圓角值不要過(guò)大，建議控制在 2-6px，以符合 B 端產(chǎn)品嚴(yán)謹(jǐn)專業(yè)調(diào)性。
按鈕
這里從按鈕的大小/狀態(tài)/排放位置幾個(gè)緯度來(lái)講。
① 按鈕尺寸
按鈕高度一般情況下可以設(shè)置 3-4 種尺寸按鈕，足以滿足各種使用場(chǎng)景。至于按鈕寬度，我們一般定義一個(gè)最小值，當(dāng)超過(guò)最小值時(shí)，可設(shè)置 padding 值，按鈕寬度根據(jù)內(nèi)容自適應(yīng)。
② 按鈕狀態(tài)
操作按鈕過(guò)程中，按鈕會(huì)呈現(xiàn)不同的交互狀態(tài)。
③ 按鈕位置
對(duì)于主次按鈕組合，主次按鈕排放位置應(yīng)該怎么規(guī)定呢？可分為兩種場(chǎng)景：一是當(dāng)為從左到右閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕左側(cè)。二是當(dāng)為從右到左閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕右側(cè)。而當(dāng)一些特殊場(chǎng)景與這個(gè)原則沖突時(shí)，應(yīng)權(quán)衡優(yōu)先級(jí)做出取舍。
熟悉通用組件后，我們要通柵格/導(dǎo)航來(lái)確定產(chǎn)品頁(yè)面框架。
柵格
柵格可以有效地保證設(shè)計(jì)的一致性、讓頁(yè)面布局更具規(guī)律，并提高團(tuán)隊(duì)協(xié)作效率。應(yīng)該如何設(shè)計(jì)柵格呢？
① 柵格區(qū)域的劃定
我們一般習(xí)慣將頁(yè)面從下到上劃分為背景層、全局控制層、內(nèi)容層、臨時(shí)層，而柵格區(qū)應(yīng)當(dāng)用在內(nèi)容層。以下為常見(jiàn)幾種頁(yè)面布局柵格區(qū)的劃定。
② 柵格自適應(yīng)規(guī)則
隨著頁(yè)面寬度變化，一般來(lái)說(shuō)是通過(guò)欄寬變化實(shí)現(xiàn)自適應(yīng)。
③ 柵格欄數(shù)的確定
根據(jù)頁(yè)面內(nèi)容豐富程度，柵格欄數(shù)一般定 12 或者 24 欄，考慮到 B 端產(chǎn)品功能往往比較復(fù)雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導(dǎo)航
導(dǎo)航可分為全局導(dǎo)航與局部導(dǎo)航。
① 全局導(dǎo)航
全局導(dǎo)航包含頂部導(dǎo)航、側(cè)邊導(dǎo)航、混合導(dǎo)航。
這三種導(dǎo)航樣式各具特點(diǎn)，應(yīng)結(jié)合產(chǎn)品特性選擇合適的導(dǎo)航樣式。這里要注意的一點(diǎn)是，當(dāng)產(chǎn)品可用性和用戶體驗(yàn)產(chǎn)生沖突時(shí)，應(yīng)優(yōu)先保證產(chǎn)品可用性。
② 局部導(dǎo)航
局部導(dǎo)航包含面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器。
面包屑
面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置以及父子級(jí)頁(yè)面間的關(guān)系，并且可以快速回到上幾級(jí)導(dǎo)航。
標(biāo)簽頁(yè)
標(biāo)簽頁(yè)可以幫助用戶在一個(gè)頁(yè)面實(shí)現(xiàn)快速切換不同內(nèi)容，提升單個(gè)頁(yè)面內(nèi)容擴(kuò)展性。可分為基本樣式、標(biāo)簽樣式、卡片樣式。
步驟條
當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，可將其分解成一系列步驟，這里就會(huì)用上步驟條。步驟條是引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，作用包含 3 點(diǎn)：一是讓用戶對(duì)操作流程長(zhǎng)度和步驟有個(gè)預(yù)期，二是明確知道自己目前所在步驟，三是可以對(duì)用戶的任務(wù)完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當(dāng)步驟條中有操作難度偏大的內(nèi)容時(shí)，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經(jīng)完成了大部分簡(jiǎn)單操作，后面碰到高難度操作后，出于損失厭惡心理，不會(huì)輕易放棄操作。
分頁(yè)器
當(dāng)有大量?jī)?nèi)容需要展現(xiàn)時(shí)進(jìn)行分頁(yè)加載處理，分頁(yè)器作用是可以讓用戶清楚的知道自己所要瀏覽的內(nèi)容有多少頁(yè)、當(dāng)前所在頁(yè)碼、快捷前往目標(biāo)頁(yè)碼。
分頁(yè)器一般分為迷你、簡(jiǎn)易、自定義三種樣式。
妙用分頁(yè)器小 Tips：當(dāng)表格中需要對(duì)數(shù)據(jù)全選操作時(shí)，為了提高操作效率，可將自定義每頁(yè)跳數(shù)調(diào)到最大。例如一共 100 條數(shù)據(jù)，默認(rèn)每頁(yè) 10 條數(shù)據(jù)，要完成全選需要點(diǎn)擊 9 次翻頁(yè)，10 次全選（表格的全選框勾選后一般只選中當(dāng)前頁(yè)面全部數(shù)據(jù)，而不是所有頁(yè)面總數(shù)據(jù)），當(dāng)把每頁(yè)條數(shù)調(diào)整為 50 后，則只需翻頁(yè) 1 次，點(diǎn)擊 2 次全選即可。
到這里關(guān)于 B 端的基礎(chǔ)組件就全部梳理完了，后續(xù)我們就來(lái)揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來(lái)源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn