2026-1-25 清陽(yáng) B端ui設(shè)計(jì)文章及欣賞
為了幫助大家更輕松地提升設(shè)計(jì)水平，這里整理了一些簡(jiǎn)單實(shí)用的小貼士。希望這些小技巧不僅能夠助力您優(yōu)化當(dāng)前的設(shè)計(jì)項(xiàng)目，還能在未來(lái)的設(shè)計(jì)之旅中為您提供參考價(jià)值。
01. 避免卡片上文本信息過(guò)多
一個(gè)卡片內(nèi)通常會(huì)包含圖片、標(biāo)題、詳細(xì)介紹及行動(dòng)按鈕等元素，這些元素需要以聚焦的形式去呈現(xiàn)，以幫助用戶快速掃描內(nèi)容。當(dāng)文本內(nèi)容較長(zhǎng)、展示的信息過(guò)多時(shí)，不利于用戶快速掃描，導(dǎo)致用戶無(wú)法在第一時(shí)間快速感知到產(chǎn)品想要展示的、或用戶想要知道的信息，很容易被用戶過(guò)濾。
文本內(nèi)容過(guò)多且無(wú)法刪減時(shí)，我們可以從中提取部分更有價(jià)值信息，也可以只顯示文本內(nèi)容的前兩行，其他將其省略，以點(diǎn)擊展開(kāi)更多、內(nèi)容彈窗或者跳轉(zhuǎn)頁(yè)面的方式將其完整展示，都不失為一種不錯(cuò)的解決方式。
02. 減少表單字段的填寫(xiě)數(shù)量
在設(shè)計(jì)表單時(shí)，讓用戶填寫(xiě)過(guò)多的內(nèi)容會(huì)增加其認(rèn)知負(fù)荷，表單完成率也會(huì)隨之下降。為了減少用戶的操作次數(shù)，降低使用難度，但凡能讓用戶選擇的就不要讓他輸入、能夠系統(tǒng)獲取的就不讓用戶去選擇，要盡可能的減少字段填寫(xiě)數(shù)量，讓表單顯得更加簡(jiǎn)單。
類(lèi)似地址、日期這類(lèi)層級(jí)內(nèi)容，不要將其分成多個(gè)字段，最好做成聯(lián)動(dòng)選擇讓用戶一氣呵成。
03. 不同輸入場(chǎng)景下的鍵盤(pán)類(lèi)型
為了簡(jiǎn)化數(shù)據(jù)輸入，滿足不同的類(lèi)型的文本輸入需求，用戶在輸入不同類(lèi)型的字段時(shí)，應(yīng)提供對(duì)應(yīng)類(lèi)型的鍵盤(pán)，便于用戶更快完成表單內(nèi)容，常見(jiàn)的鍵盤(pán)有以下幾種：
中文鍵盤(pán)：絕大多數(shù)表單使用的類(lèi)型，應(yīng)對(duì)純中文或綜合性文本類(lèi)型的輸入需求；
英文鍵盤(pán)：純英文類(lèi)型的字段，例如字母類(lèi)型的用戶名、英文名輸入等；
數(shù)字鍵盤(pán)：純數(shù)字類(lèi)型的字段，例如手機(jī)號(hào)、身份證號(hào)、銀行卡號(hào)等；
數(shù)字鍵盤(pán)（亂序）：多用于純數(shù)字密碼類(lèi)型的輸入需求，對(duì)安全系數(shù)要求較高，如支付密碼等。因出于安全考慮，這類(lèi)鍵盤(pán)雖然會(huì)增加用戶的理解成本，但與財(cái)產(chǎn)的安全性相比，顯然在可接受范圍之內(nèi)。
04. 行高應(yīng)跟隨字號(hào)而變化
有很多設(shè)計(jì)師在處理大量的文本內(nèi)容時(shí)，為了遵循設(shè)計(jì)規(guī)范，會(huì)設(shè)定固定的行高數(shù)值，例如常用的1.2、1.5倍等，需知設(shè)計(jì)規(guī)范是為了避免我們?cè)谠O(shè)計(jì)中出錯(cuò)，并非為了規(guī)范而規(guī)范。
在應(yīng)對(duì)大量的文本類(lèi)容時(shí)，為了讓用戶有更好的可讀性和易讀性，行高因跟隨字號(hào)的大小而變化，字體越小、行高越大，想要視覺(jué)上更加細(xì)膩，文字越粗（越黑）、行高越大，我們只需要保證在同一字號(hào)、字重的條件下，保持同相同數(shù)值的行高即可。
如果中文看的不是那么明顯，可以試下英文，特別是上一行基線到下一行基線之間的距離尤為明顯。筆者因工作中涉及中、英、泰三文切換，在處理行高時(shí)不敢有絲毫馬虎。
05. 基于拾色器右上方選取顏色
在為UI選取主色調(diào)時(shí)，大多都是根據(jù)logo色來(lái)建立UI色彩體系，因品牌logo會(huì)用戶各行各業(yè)，尤其是平面印刷用色與電子屏幕用色差異過(guò)大，故而logo色并不能直接用于UI設(shè)計(jì)，我們需要在logo品牌色的基礎(chǔ)上做出調(diào)整。
設(shè)定主色調(diào)時(shí)，可基于品牌logo的色相或往鄰近色方向微調(diào)，然后在拾色器右上方（介于飽和度和明度最大值附近）選取具體的顏色。這種配色方式能讓主色更加鮮明，在電子設(shè)備中顯示也會(huì)更加舒適、和諧。不僅如此，在選取輔助色時(shí)也可以使用這種方式。
目前市面上那些成熟產(chǎn)品的配色，都會(huì)有這種規(guī)律，主色都基于拾色器右上角的位置。
06. 表單標(biāo)簽的對(duì)齊方式
常見(jiàn)的表單標(biāo)簽對(duì)齊方式有三種，左對(duì)齊、右對(duì)齊和頂對(duì)齊。不同的對(duì)齊方式都有各自的優(yōu)點(diǎn)和缺點(diǎn)，我們需要根據(jù)項(xiàng)目實(shí)際情況來(lái)選擇最合適的對(duì)齊方式。
左對(duì)齊：左對(duì)齊是最為常見(jiàn)的對(duì)齊方式，可充分利用頁(yè)面的垂直空間，易于擴(kuò)展。在選用左對(duì)齊時(shí)，標(biāo)簽字?jǐn)?shù)需在可控范圍類(lèi)，一般不超過(guò)4字，否則會(huì)降低可輸入空間，影響輸入內(nèi)容的長(zhǎng)度；
右對(duì)齊：多用于網(wǎng)頁(yè)表單中，在標(biāo)簽稍長(zhǎng)、且字?jǐn)?shù)長(zhǎng)度不一的情況下使用。當(dāng)標(biāo)簽參差不齊時(shí)，與左對(duì)齊相比，右對(duì)齊能拉近標(biāo)簽與輸入框的距離，增強(qiáng)內(nèi)容的關(guān)聯(lián)性；
頂端對(duì)齊：會(huì)占用較多的縱向空間，通常用于標(biāo)簽長(zhǎng)短不可控的場(chǎng)景下，例如常見(jiàn)的英文表單。在中文場(chǎng)景中使用不多，如用戶問(wèn)卷調(diào)查、信息搜集等。
07. 大膽使用空間留白
為了提高界面利用空間，追求信息的飽和度無(wú)可厚非，但過(guò)度追求并非是一件好事，當(dāng)信息過(guò)于密集、信息層級(jí)較難區(qū)分時(shí)，會(huì)耗費(fèi)用戶更多的時(shí)間成本。
不要吝嗇界面留白，基于親密性原則，在合理的將信息進(jìn)行分組之后，請(qǐng)大膽使用留白，應(yīng)避免元素與元素、與信息組之間過(guò)于密集，保持界面的呼吸感，給用戶更為舒適通透的體驗(yàn)。
08. 中性色的設(shè)定（黑白灰）
中性色在UI設(shè)計(jì)中相當(dāng)重要，雖然僅次于品牌色，但在我們的設(shè)計(jì)流程中，定義中性色往往會(huì)早于定義品牌色，因?yàn)樵诮缑媾渖?，我們?huì)通過(guò)中性色來(lái)表現(xiàn)界面信息的層級(jí)。
中性色即色彩中的黑白灰，設(shè)定中性色是由調(diào)整HSB（色相/飽和度/亮度）中的B值高低里形成一個(gè)表現(xiàn)視覺(jué)強(qiáng)弱的等級(jí)階梯，一般設(shè)定4~5個(gè)等級(jí)即可，例如B值的20%（#333333）、40%（#666666）、60%（#999999）、80%（#CCCCCC）、90%（#E6E6E6）。
這里需要注意兩個(gè)問(wèn)題，一是要避免使用純黑色，因?yàn)榧兒谏陔娮悠聊恢惺遣话l(fā)光的，會(huì)與其他發(fā)光的顏色產(chǎn)生巨大的反差，不易與視覺(jué)瀏覽；而是設(shè)定的黑白灰等級(jí)數(shù)量不宜過(guò)多，否則鄰近的色值很難拉開(kāi)視覺(jué)層級(jí)。
09. 投影的光源保持統(tǒng)一
這可以被視為提升用戶體驗(yàn)的一個(gè)高級(jí)技巧。在給組件添加投影時(shí)，如果光源方向或強(qiáng)度不一致，即使這種差異很細(xì)微，也可能因?yàn)椴粎f(xié)調(diào)而破壞整體視覺(jué)效果，使界面看起來(lái)不夠?qū)I(yè)或者缺乏連貫性。
為了增強(qiáng)視覺(jué)上的和諧與統(tǒng)一，所有UI組件都應(yīng)遵循相同的光源方向，使各個(gè)元素之間更加協(xié)調(diào)，幫助用戶更快地理解和適應(yīng)界面布局。此外，通過(guò)確保光照效果的一致性，還可以有效地突出重點(diǎn)信息。
10. 避免用占位符替代標(biāo)簽
輸入框中的占位符可以為用戶提供初步的指引，幫助他們?cè)陂_(kāi)始輸入前有一個(gè)短期的記憶提示。理想情況下，占位符應(yīng)作為標(biāo)簽的補(bǔ)充。然而，如果只有占位符而沒(méi)有標(biāo)簽，用戶可能會(huì)感到困惑，尤其是在他們點(diǎn)擊輸入框后占位符消失時(shí)，可能會(huì)一時(shí)記不起要輸入的內(nèi)容。
標(biāo)簽對(duì)于明確指示用戶在表單字段中輸入什么信息至關(guān)重要。保持標(biāo)簽的可見(jiàn)性不僅能提升產(chǎn)品的易用性，還能特別照顧到那些認(rèn)知和記憶力較弱的用戶。這樣可以確保每個(gè)輸入字段的用途始終一目了然，減輕用戶的認(rèn)知負(fù)擔(dān)，使表單更加友好、清晰且易于使用。
轉(zhuǎn)載：黑馬青年
蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.chenguixiang.net 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chenguixiang.net