為了幫助大家更輕松地提升設(shè)計(jì)水平，這里整理了一些簡(jiǎn)單實(shí)用的小貼士。希望這些小技巧不僅能夠助力您優(yōu)化當(dāng)前的設(shè)計(jì)項(xiàng)目，還能在未來(lái)的設(shè)計(jì)之旅中為您提供參考價(jià)值。

一、避免卡片上文本信息過多

一個(gè)卡片內(nèi)通常會(huì)包含圖片、標(biāo)題、詳細(xì)介紹及行動(dòng)按鈕等元素，這些元素需要以聚焦的形式去呈現(xiàn)，以幫助用戶快速掃描內(nèi)容。當(dāng)文本內(nèi)容較長(zhǎng)、展示的信息過多時(shí)，不利于用戶快速掃描，導(dǎo)致用戶無(wú)法在第一時(shí)間快速感知到產(chǎn)品想要展示的、或用戶想要知道的信息，很容易被用戶過濾。

文本內(nèi)容過多且無(wú)法刪減時(shí)，我們可以從中提取部分更有價(jià)值信息，也可以只顯示文本內(nèi)容的前兩行，其他將其省略，以點(diǎn)擊展開跟多、內(nèi)容彈窗或者跳轉(zhuǎn)頁(yè)面的方式將其完整展示，都不失為一種不錯(cuò)的解決方式。

二、減少表單字段的填寫數(shù)量

在設(shè)計(jì)表單時(shí)，讓用戶填寫過多的內(nèi)容會(huì)增加其認(rèn)知負(fù)荷，表單完成率也會(huì)隨之下降。為了減少用戶的操作次數(shù)，降低使用難度，但凡能讓用戶選擇的就不要讓他輸入、能夠系統(tǒng)獲取的就不讓用戶去選擇，要盡可能的減少字段填寫數(shù)量，讓表單顯得更加簡(jiǎn)單。

類似地址、日期這類層級(jí)內(nèi)容，不要將其分成多個(gè)字段，最好做成聯(lián)動(dòng)選擇讓用戶一氣呵成。

三、不同輸入場(chǎng)景下的鍵盤類型

為了簡(jiǎn)化數(shù)據(jù)輸入，滿足不同的類型的文本輸入需求，用戶在輸入不同類型的字段時(shí)，應(yīng)提供對(duì)應(yīng)類型的鍵盤，便于用戶更快完成表單內(nèi)容，常見的鍵盤有以下幾種：

1. 中文鍵盤：絕大多數(shù)表單使用的類型，應(yīng)對(duì)純中文或綜合性文本類型的輸入需求；
2. 英文鍵盤：純英文類型的字段，例如字母類型的用戶名、英文名輸入等；
3. 數(shù)字鍵盤：純數(shù)字類型的字段，例如手機(jī)號(hào)、身份證號(hào)、銀行卡號(hào)等；
4. 數(shù)字鍵盤（亂序）：多用于純數(shù)字密碼類型的輸入需求，對(duì)安全系數(shù)要求較高，如支付密碼等。因出于安全考慮，這類鍵盤雖然會(huì)增加用戶的理解成本，但與財(cái)產(chǎn)的安全性相比，顯然在可接受范圍之內(nèi)。

四、行高應(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ì)大量的文本類容時(shí)，為了讓用戶有更好的可讀性和易讀性，行高因跟隨字號(hào)的大小而變化，字體越小、行高越大，想要視覺上更加細(xì)膩，文字越粗（越黑）、行高越大，我們只需要保證在同一字號(hào)、字重的條件下，保持同相同數(shù)值的行高即可。

如果中文看的不是那么明顯，可以試下英文，特別是上一行基線到下一行基線之間的距離尤為明顯。筆者因工作中涉及中、英、泰三文切換，在處理行高時(shí)不敢有絲毫馬虎。

五、基于拾色器右上方選取顏色

在為 UI 選取主色調(diào)時(shí)，大多都是根據(jù) logo 色來(lái)建立 UI 色彩體系，因品牌 logo 會(huì)用戶各行各業(yè)，尤其是平面印刷用色與電子屏幕用色差異過大，故而 logo 色并不能直接用于 UI 設(shè)計(jì)，我們需要在 logo 品牌色的基礎(chǔ)上做出調(diào)整。

設(shè)定主色調(diào)時(shí)，可基于品牌 logo 的色相或往鄰近色方向微調(diào)，然后在拾色器右上方（介于飽和度和明度最大值附近）選取具體的顏色。這種配色方式能讓主色更加鮮明，在電子設(shè)備中顯示也會(huì)更加舒適、和諧。不僅如此，在選取輔助色時(shí)也可以使用這種方式。

目前市面上那些成熟產(chǎn)品的配色，都會(huì)有這種規(guī)律，主色都基于拾色器右上角的位置。

六、表單標(biāo)簽的對(duì)齊方式

常見的表單標(biāo)簽對(duì)齊方式有三種，左對(duì)齊、右對(duì)齊和頂對(duì)齊。不同的對(duì)齊方式都有各自的優(yōu)點(diǎn)和缺點(diǎn)，我們需要根據(jù)項(xiàng)目實(shí)際情況來(lái)選擇最合適的對(duì)齊方式。
左對(duì)齊：左對(duì)齊是最為常見的對(duì)齊方式，可充分利用頁(yè)面的垂直空間，易于擴(kuò)展。在選用左對(duì)齊時(shí)，標(biāo)簽字?jǐn)?shù)需在可控范圍類，一般不超過 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)景下，例如常見的英文表單。在中文場(chǎng)景中使用不多，如用戶問卷調(diào)查、信息搜集等。

七、增加圖片文字對(duì)比度

在圖片上呈現(xiàn)文字時(shí)，明明設(shè)計(jì)稿上看的非常清晰，可一旦落地，總會(huì)出現(xiàn)文字看不清的情況。殊不知設(shè)計(jì)稿很多時(shí)候是為了視覺效果刻意為之，而一旦落地，真實(shí)場(chǎng)景千變?nèi)f化，類似淘寶商品圖，你總不可能要求千萬(wàn)商家在圖片系統(tǒng)文字的位置處理成深色吧。

這種情況，我們只需要在文字位置后方加一個(gè)深色層即可，如果是靠近邊緣的位置，可以在深色層從中間到邊緣拉一個(gè)透明度漸變，以確保圖片與深色層相接的位置過渡自然舒適。

八、大膽使用空間留白

為了提高界面利用空間，追求信息的飽和度無(wú)可厚非，但過度追求并非是一件好事，當(dāng)信息過于密集、信息層級(jí)較難區(qū)分時(shí)，會(huì)耗費(fèi)用戶更多的時(shí)間成本。
不要吝嗇界面留白，基于親密性原則，在合理的將信息進(jìn)行分組之后，請(qǐng)大膽使用留白，應(yīng)避免元素與元素、與信息組之間過于密集，保持界面的呼吸感，給用戶更為舒適通透的體驗(yàn)。

九、中性色的設(shè)定（黑白灰）

中性色在 UI 設(shè)計(jì)中相當(dāng)重要，雖然僅次于品牌色，但在我們的設(shè)計(jì)流程中，定義中性色往往會(huì)早于定義品牌色，因?yàn)樵诮缑媾渖?，我們?huì)通過中性色來(lái)表現(xiàn)界面信息的層級(jí)。

中性色即色彩中的黑白灰，設(shè)定中性色是由調(diào)整 HSB（色相/飽和度/亮度）中的 B 值高低里形成一個(gè)表現(xiàn)視覺強(qiáng)弱的等級(jí)階梯，一般設(shè)定 4~5 個(gè)等級(jí)即可，例如 B 值的 20%（#333333）、40%（#666666）、60%（#999999）、80%（#CCCCCC）、90%（#E6E6E6）。

這里需要注意兩個(gè)問題，一是要避免使用純黑色，因?yàn)榧兒谏陔娮悠聊恢惺遣话l(fā)光的，會(huì)與其他發(fā)光的顏色產(chǎn)生巨大的反差，不易與視覺瀏覽；而是設(shè)定的黑白灰等級(jí)數(shù)量不宜過多，否則鄰近的色值很難拉開視覺層級(jí)。

十、投影的光源保持統(tǒng)一

這可以被視為提升用戶體驗(yàn)的一個(gè)高級(jí)技巧。在給組件添加投影時(shí)，如果光源方向或強(qiáng)度不一致，即使這種差異很細(xì)微，也可能因?yàn)椴粎f(xié)調(diào)而破壞整體視覺效果，使界面看起來(lái)不夠?qū)I(yè)或者缺乏連貫性。

為了增強(qiáng)視覺上的和諧與統(tǒng)一，所有 UI 組件都應(yīng)遵循相同的光源方向，使各個(gè)元素之間更加協(xié)調(diào)，幫助用戶更快地理解和適應(yīng)界面布局。此外，通過確保光照效果的一致性，還可以有效地突出重點(diǎn)信息。

十一、避免用占位符替代標(biāo)簽

輸入框中的占位符可以為用戶提供初步的指引，幫助他們?cè)陂_始輸入前有一個(gè)短期的記憶提示。理想情況下，占位符應(yīng)作為標(biāo)簽的補(bǔ)充。然而，如果只有占位符而沒有標(biāo)簽，用戶可能會(huì)感到困惑，尤其是在他們點(diǎn)擊輸入框后占位符消失時(shí)，可能會(huì)一時(shí)記不起要輸入的內(nèi)容。

標(biāo)簽對(duì)于明確指示用戶在表單字段中輸入什么信息至關(guān)重要。保持標(biāo)簽的可見性不僅能提升產(chǎn)品的易用性，還能特別照顧到那些認(rèn)知和記憶力較弱的用戶。這樣可以確保每個(gè)輸入字段的用途始終一目了然，減輕用戶的認(rèn)知負(fù)擔(dān)，使表單更加友好、清晰且易于使用。

十二、文本看起來(lái)沉重，需拉開層級(jí)

在處理長(zhǎng)篇文本內(nèi)容時(shí)，如果使用大面積的深色文字，讀者往往會(huì)感到視覺上的沉重和壓抑，同時(shí)這種布局也容易導(dǎo)致閱讀過程中的視覺疲勞和注意力分散。
解決這個(gè)問題，可以通過調(diào)整文字顏色的深淺來(lái)改善閱讀體驗(yàn)，減輕文字帶來(lái)的視覺壓力，使長(zhǎng)篇文檔變得更加易于閱讀，還能讓整個(gè)頁(yè)面看起來(lái)更加舒適和諧。

十三、彩色色背景避免灰色文字

在無(wú)彩色背景下處理文字的層級(jí)關(guān)系時(shí)，我們通常只需要調(diào)整 HSB 顏色模型中的 B 值（即亮度）就可以達(dá)到很好的效果。

然而，在彩色背景下處理文字的明暗關(guān)系時(shí)，單純調(diào)整 B 值可能會(huì)導(dǎo)致整體色彩的不協(xié)調(diào)，從而產(chǎn)生強(qiáng)烈的違和感。因此，這種方法在這種情況下是不可行的。

為了完美地解決這個(gè)問題，我們可以采用以下兩種方法：

1. 降低文本的不透明度：通過降低文字的不透明度，減少視覺上的突兀感，這種方法尤其適用于需要保持文字顏色不變的情況下使用。
2. 使用背景色并降低對(duì)比度：直接使用背景色，并在此基礎(chǔ)上降低對(duì)比度。這樣可以確保文字與背景顏色之間的過渡更加自然，避免了因顏色差異過大而產(chǎn)生的違和感。這種方法適用于需要保持背景顏色一致性的場(chǎng)景。

十四、選用具備多個(gè)字重的字體

如果您的項(xiàng)目只需要滿足最基本的 UI 設(shè)計(jì)需求，那么使用阿里巴巴普惠體、蘋方或思源黑體這三款字體中的任意一種就已經(jīng)足夠了。這些字體在設(shè)計(jì)上都具有高度的可讀性和現(xiàn)代感，能夠適應(yīng)多種不同的應(yīng)用場(chǎng)景。

在選擇具有特定行業(yè)屬性的定制化字體時(shí)，建議挑選那些提供多種字重的字體家族。這樣，無(wú)論在什么場(chǎng)合下，你都能找到合適的字重來(lái)使用。

例如健身器材類需要硬朗、較粗的字體，而女性瑜伽類則需要高挑、較纖細(xì)的字體，或者那些數(shù)字信息權(quán)重較高的也會(huì)單獨(dú)定制字體。如果一種字體只有單一的字重，你可能需要尋找其他替代方案或額外購(gòu)買，這會(huì)帶來(lái)一些不便。只要這款字體包含兩三種不同的樣式或字重，也已經(jīng)能夠滿足很多設(shè)計(jì)需求，并幫助你創(chuàng)造出富有韻律感的作品了。

十五、圖片上的文字蒙版與圖片色調(diào)融合

我們常常會(huì)看到文字疊加在圖片背景上的設(shè)計(jì)，為了確保文字清晰可見，常用做法是在圖片上加一層半透明的黑色蒙版，這樣可以讓白色的文字更加突出，不過，這種方法并不是最理想的。

我們還可以從圖片中提取主色調(diào)，然后用這個(gè)顏色作為文字背景的填充色。讓文字、色塊和圖片就能更好地融合在一起，整個(gè)畫面看起來(lái)也會(huì)更加高級(jí)和設(shè)計(jì)感。

十六、圖片色調(diào)要基于主體色

保持應(yīng)用程序的一致性和統(tǒng)一性非常重要，這不僅能提升用戶體驗(yàn)，還能幫助塑造良好的品牌形象。因此，在同一款應(yīng)用中，用戶應(yīng)當(dāng)能夠輕松地識(shí)別出其主要色調(diào)。這就意味著，盡管應(yīng)用中的各種視覺元素（比如按鈕、圖標(biāo)、圖片和插畫）不必完全一致，但大多數(shù)元素都應(yīng)該盡量采用或融入主色調(diào)。

有時(shí)，我們可能會(huì)遇到這樣的情況：找到了一張非常適合某個(gè)場(chǎng)景或功能展示的圖片，但它的色調(diào)卻與整體設(shè)計(jì)風(fēng)格不太協(xié)調(diào)。這時(shí)，設(shè)計(jì)師可以通過調(diào)整圖片的色相和飽和度，讓其更貼近應(yīng)用的主色調(diào)；另外，還可以在圖片上疊加一層半透明的、以主色調(diào)為基礎(chǔ)的蒙版，這樣既能保留圖片的內(nèi)容，又能使整個(gè)界面的視覺效果更加和諧統(tǒng)一。

十七、設(shè)計(jì)過的默認(rèn)頭像更具親和力

默認(rèn)頭像可能會(huì)出現(xiàn)在應(yīng)用中的任何地方，背后不僅承載著用戶的重要信息，還展示了用戶的虛擬形象。通常情況下，默認(rèn)頭像會(huì)以一個(gè)簡(jiǎn)單的圖標(biāo)樣式出現(xiàn)，但這樣的設(shè)計(jì)往往難以獲得用戶的共鳴。

特別是個(gè)人中心頁(yè)，許多產(chǎn)品已經(jīng)不再使用單一、刻板的默認(rèn)頭像，通過增加一些如 logo、吉祥物、插畫以及有趣的人格化元素，使產(chǎn)品更加生動(dòng)有趣，每個(gè)獨(dú)特的頭像都代表著產(chǎn)品的獨(dú)特風(fēng)格和用戶的個(gè)性，讓用戶感受到一種身份上的認(rèn)同感。

十八、使用簡(jiǎn)潔清晰的文本標(biāo)簽

在設(shè)計(jì)表單時(shí)，盡量避免使用過長(zhǎng)的文本標(biāo)簽，確保它們不會(huì)占用多行。過長(zhǎng)可能會(huì)讓表單看起來(lái)雜亂無(wú)章，增加用戶的理解和操作難度，從而影響整體設(shè)計(jì)的清晰度。特別是在小屏幕設(shè)備或復(fù)雜的表格中，這種問題會(huì)更加突出，因?yàn)橛脩粜枰ㄙM(fèi)更多時(shí)間和精力來(lái)瀏覽和理解表單內(nèi)容。

為了提升表單的可讀性和操作體驗(yàn)，建議使用簡(jiǎn)潔明了的語(yǔ)言來(lái)編寫標(biāo)簽，并確保每個(gè)標(biāo)簽都能保持在一行內(nèi)。如果簡(jiǎn)短的標(biāo)簽無(wú)法詮釋該字段的輸入要求，可根據(jù)實(shí)際情況，酌情選用占位符、輔助提示或圖標(biāo)觸發(fā)小窗方式進(jìn)行詳細(xì)說明。這樣能使表單看起來(lái)更加整潔有序，方便用戶快速閱讀，同時(shí)減少因標(biāo)簽過長(zhǎng)而可能產(chǎn)生的歧義。

此外，在移動(dòng)設(shè)備上，這種設(shè)計(jì)方法尤為重要，因?yàn)樗苡行Ю糜邢薜钠聊豢臻g，確保即使在較小的屏幕上也能提供良好的用戶體驗(yàn)。

十九、只需提醒選填字段

在設(shè)計(jì)表單時(shí)，大多數(shù)字段為必填項(xiàng)，僅有少數(shù)字段為非必填項(xiàng)。為了減少用戶的困惑，建議不特別標(biāo)注所有必填字段，而是明確標(biāo)識(shí)那些非必填字段，例如使用"選填"或"非必填"等標(biāo)簽。

當(dāng)表單清晰地標(biāo)示了哪些字段是可選時(shí)，用戶無(wú)需再耗費(fèi)額外時(shí)間猜測(cè)哪些信息是真正必需的。這種做法不僅提升了用戶體驗(yàn)，使填寫過程更加順暢，還鼓勵(lì)用戶自愿提供更多的信息，即便這些信息并非強(qiáng)制要求。

此外，通過僅強(qiáng)調(diào)可選部分，并自然地將其與必填部分區(qū)分開來(lái)，可以有效減少界面中的視覺干擾，使整個(gè)表單顯得更為簡(jiǎn)潔明了。這種設(shè)計(jì)策略不僅有助于提高用戶滿意度，還能顯著提升表單數(shù)據(jù)收集的效率。

二十、字體的選擇要符合產(chǎn)品氣質(zhì)

雖說黑體（蘋方、思源、阿里巴巴普惠）是 UI 設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的 APP 來(lái)說是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類的 APP 會(huì)選擇使用宋體，整體看起來(lái)有一種高端、時(shí)尚且優(yōu)雅的感覺。

整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場(chǎng)景，會(huì)讓產(chǎn)品更有特色，例如 banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶的視覺吸引力能得到很大提升。

結(jié)語(yǔ)

創(chuàng)造既美觀又高效且易于使用的 UI 界面確實(shí)需要投入不少時(shí)間和精力，還可能要經(jīng)歷多次的迭代與改進(jìn)。不過，正是通過這一系列細(xì)致入微的調(diào)整過程，我們才能打磨出一款讓客戶、用戶以及我們自己都感到滿意的優(yōu)秀作品。

作者：能量眼球