手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

B端設(shè)計(jì)精髓:基礎(chǔ)組件的標(biāo)準(zhǔn)化與高效應(yīng)用規(guī)范指南

2024-10-30    藍(lán)藍(lán)小助手 B端ui設(shè)計(jì)文章及欣賞

 


B端設(shè)計(jì)組件是企業(yè)級(jí)應(yīng)用開發(fā)中不可或缺的一部分。通過合理設(shè)計(jì)和應(yīng)用基礎(chǔ)組件,可以構(gòu)建出功能豐富、易用且可維護(hù)的用戶界面。同時(shí),組件化設(shè)計(jì)提高了開發(fā)效率、降低了維護(hù)成本,并增強(qiáng)了系統(tǒng)的靈活性和可擴(kuò)展性。因此,在B端設(shè)計(jì)中,應(yīng)充分重視組件的作用,并不斷優(yōu)化和完善組件庫,以適應(yīng)不斷變化的市場(chǎng)需求和用戶期望。

下面我們根據(jù)這個(gè)分類框架來逐個(gè)聊聊這些組件。

一.基礎(chǔ)組件

說到基礎(chǔ)組件,我想再將其細(xì)分成兩個(gè)大類:一類是通用組件;一類是柵格/導(dǎo)航。怎么去更深刻的理解這兩類的區(qū)別呢,我們可以打個(gè)這樣的形象比方:

 

 

通過這個(gè)比方我們不難理解,柵格/導(dǎo)航是先給頁面定下了基本框架,而通用組件則是在這個(gè)框架基礎(chǔ)上搭建頁面的所用到基本元素。

 

 

(一)通用組件

常見通用組件一般包含:色彩/字體/間距/圓角/分割線/按鈕。需要注意的是,通用組件看起來似乎很簡(jiǎn)單,但卻是決定產(chǎn)品品牌調(diào)性、界面細(xì)節(jié)品質(zhì)的重要因素,在設(shè)計(jì)過程中需要引起我們的高度重視。

1.色彩

色彩可分為主色,功能色,中性色三類。下面談?wù)勥@三類顏色如何配置,以及如何定義這些顏色梯度。

(1)主色

a.主色的選取

主色作為產(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)高的顏色。

 

b.主色的應(yīng)用

主色在設(shè)計(jì)中常見的應(yīng)用包括可交互、選中狀態(tài)、可視化、插圖、圖標(biāo)等場(chǎng)景。

 

(2)功能色

功能色主要用于頁面表征狀態(tài),常見有成功色、警告色、報(bào)錯(cuò)色等。

 

a.成功色

主要用于操作結(jié)果成功提示以及標(biāo)簽配色等。

 

 

b.警告色

主要用于警告提醒功能以及標(biāo)簽配色等。

 

 

c.報(bào)錯(cuò)色

主要用于系統(tǒng)報(bào)錯(cuò)提示、圓點(diǎn)提示、以及標(biāo)簽配色等。

 

(3)中性色

中性色在頁面設(shè)計(jì)中應(yīng)用非常廣泛,從線條到文字再到圖形等等都可以見到它的影子。

Tips:無論我們主色調(diào)是什么,中性色在調(diào)色時(shí)建議可加入適量的藍(lán)色調(diào),可讓頁面觀感更清爽。

 

(4)顏色梯度

選取好了顏色后,怎么去更合理的定義每個(gè)顏色的梯度呢?(這里主要指對(duì)主色以及功能色定義梯度)

我的方法是給顏色加一層半透明黑/白遮罩,當(dāng)我們需要淺色,通過調(diào)整白色遮罩透明度得到合適顏色;而當(dāng)我們需要深色時(shí),則通過調(diào)整黑色遮罩透明度得到合適顏色。

 

這樣定義顏色梯優(yōu)點(diǎn)是后續(xù)如果需要更改配色,只需一鍵替換全局色即可,大大提高工作效率。

 

2.文字

文字規(guī)范包含字體、字號(hào)、字重、行高等。

 

(1)字體/字重

B端字體/字重一般按照如下規(guī)范即可:

 

(2)字號(hào)

不同于C端,B端在字號(hào)選擇上應(yīng)當(dāng)盡量保持克制。研究表明,Web端上正文字號(hào)為14時(shí),可以帶來最佳閱讀體驗(yàn)。因此在字號(hào)選取上應(yīng)盡量?jī)?yōu)先選取14號(hào)字。如果想要區(qū)分文字層級(jí),優(yōu)先級(jí)從高到低的手法應(yīng)該是顏色、字重、字號(hào),也就是說一般盡量不采用字號(hào)大小區(qū)分文字層級(jí)。

 

(3)行高

行高可以參照下面的公式或行高參照表快速獲得,如果通過公式算出行高非整數(shù)或非偶數(shù),可就近取偶整數(shù)。

 

 

 

3.間距

關(guān)于間距取值,在目前主流屏幕分辨率下,只有4或8被整除率最高,考慮到4的顆粒度偏小,因此可優(yōu)先考慮8px的倍數(shù)作為間距值,在一些特殊場(chǎng)景可采用4px的倍數(shù)間距值。

 

 

 

4.分割線

分割線寬度一般統(tǒng)一為1px即可,同時(shí)注意顏色不可過深,以免干擾主體信息。如果需要不同層級(jí)分割線,可用顏色深淺來區(qū)分。

 

5.圓角

圓角大小一般根據(jù)使用場(chǎng)景控制在2-3個(gè)梯度即可,既不能全部統(tǒng)一一個(gè)圓角值,同時(shí)也不適合出現(xiàn)過多圓角值。同時(shí)圓角值不要過大,建議控制在2-6px,以符合B端產(chǎn)品嚴(yán)謹(jǐn)專業(yè)調(diào)性。

 

6.按鈕

這里從按鈕的大小/狀態(tài)/排放位置幾個(gè)緯度來講。

 

(1)按鈕尺寸

按鈕高度一般情況下可以設(shè)置3-4種尺寸按鈕,足以滿足各種使用場(chǎng)景。至于按鈕寬度,我們一般定義一個(gè)最小值,當(dāng)超過最小值時(shí),可設(shè)置padding值,按鈕寬度根據(jù)內(nèi)容自適應(yīng)。

 

 

 

(2)按鈕狀態(tài)

操作按鈕過程中,按鈕會(huì)呈現(xiàn)不同的交互狀態(tài)。

 

 

 

(3)按鈕位置

對(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)航

熟悉通用組件后,我們要通柵格/導(dǎo)航來確定產(chǎn)品頁面框架。

 

1.柵格

柵格可以有效地保證設(shè)計(jì)的一致性、讓頁面布局更具規(guī)律,并提高團(tuán)隊(duì)協(xié)作效率。應(yīng)該如何設(shè)計(jì)柵格呢?

(1)柵格區(qū)域的劃定

我們一般習(xí)慣將頁面從下到上劃分為背景層、全局控制層、內(nèi)容層、臨時(shí)層,而柵格區(qū)應(yīng)當(dāng)用在內(nèi)容層。以下為常見幾種頁面布局柵格區(qū)的劃定。

 

(2)柵格自適應(yīng)規(guī)則

隨著頁面寬度變化,一般來說是通過欄寬變化實(shí)現(xiàn)自適應(yīng)。

 

(3)柵格欄數(shù)的確定

根據(jù)頁面內(nèi)容豐富程度,柵格欄數(shù)一般定12或者24欄,考慮到B端產(chǎn)品功能往往比較復(fù)雜,建議采用24欄即可。

 

(4)上下布局柵格

(5)左右布局柵格

 

2.導(dǎo)航

導(dǎo)航可分為全局導(dǎo)航與局部導(dǎo)航。

(1)全局導(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)品可用性。

 

(2)局部導(dǎo)航

局部導(dǎo)航包含面包屑、標(biāo)簽頁、步驟條、分頁器。

a.面包屑

面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置以及父子級(jí)頁面間的關(guān)系,并且可以快速回到上幾級(jí)導(dǎo)航。

b.標(biāo)簽頁

標(biāo)簽頁可以幫助用戶在一個(gè)頁面實(shí)現(xiàn)快速切換不同內(nèi)容,提升單個(gè)頁面內(nèi)容擴(kuò)展性??煞譃榛緲邮健?biāo)簽樣式、卡片樣式。

c.步驟條

當(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ì)輕易放棄操作。

d.分頁器

當(dāng)有大量?jī)?nèi)容需要展現(xiàn)時(shí)進(jìn)行分頁加載處理,分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內(nèi)容有多少頁、當(dāng)前所在頁碼、快捷前往目標(biāo)頁碼。

分頁器一般分為迷你、簡(jiǎn)易、自定義三種樣式。

 

 

妙用分頁器小Tips:當(dāng)表格中需要對(duì)數(shù)據(jù)全選操作時(shí),為了提高操作效率,可將自定義每頁跳數(shù)調(diào)到最大。例如一共100條數(shù)據(jù),默認(rèn)每頁10條數(shù)據(jù),要完成全選需要點(diǎn)擊9次翻頁,10次全選(表格的全選框勾選后一般只選中當(dāng)前頁面全部數(shù)據(jù),而不是所有頁面總數(shù)據(jù)),當(dāng)把每頁條數(shù)調(diào)整為50后,則只需翻頁1次,點(diǎn)擊2次全選即可。

部分參考資料:
《B端產(chǎn)品設(shè)計(jì)-Mia》
《Ant Design》

 
作者:楓雅
鏈接:https://www.zcool.com.cn/article/ZMTUwODcyOA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
image.png
藍(lán)藍(lán)設(shè)計(jì)(www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

image.png

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔