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