創(chuàng)建美觀又實用的用戶界面需要花費(fèi)一定時間，而且在設(shè)計過程中，還要進(jìn)行大量的迭代與優(yōu)化。通過多年來的經(jīng)驗累積，我發(fā)現(xiàn)有的設(shè)計進(jìn)行一些簡單、快速的調(diào)整后，就可以大大提升效果。

本指南中，我整理了2020年12個月中流行的UI/UX技巧，而這些技巧可以毫不費(fèi)力地幫助我們改善設(shè)計與用戶體驗。

18 字體越小，越應(yīng)注意行高設(shè)置

當(dāng)你的字體變小時，增加行高為了更好地提升信息的可讀性，字體變大時則適度降低行高。

19 使用x-dataheight或Il1，測試所選字體可讀性

怕大家不理解，辭典醬提供一個額外的小科普：x-dataheight是指給定字體中，任何給定尺寸下小寫字母x的高度，它提供了一種描述任意字體一般比例的方法。

x-dataheight更精準(zhǔn)的定義是基準(zhǔn)線(baseline)與小寫字母的中線(mean line)之間的距離

在印刷中，x-dataheight是一行文字的基線與小寫字母(即不包括上升筆畫或下降筆畫)的主體頂部之間的距離?；⌒蔚淖帜?，例如a，c，e，m，n，o，r，s和u傾向于略微超過x高度。作為字體最重要的尺寸之一，x-dataheight用于定義小寫字母與大寫字母的相對高度。

確定字體可讀性另一種方法是進(jìn)行Il1測試，通過比較特定字體的三個字符：大寫i（I），小寫L（l）和數(shù)字（1），因為字母之間的外觀差異可以幫助確定可讀性，尤其是在使用Sans Serif字體時，要牢記的是，易讀性是檢驗頁面效果的核心目標(biāo)之一。

20 突出顯示菜單中最常用的操作

在設(shè)計應(yīng)用程序內(nèi)部使用的菜單時，請確保在屏幕上突出顯示最常用的操作，如上傳圖像、添加文件等。

21 從圖像中選擇顏色，使產(chǎn)品栩栩如生

從產(chǎn)品圖片中選擇顏色，將你選取各種色調(diào)和陰影應(yīng)用到背景、文本、圖標(biāo)等部分來增加視覺特點(diǎn)，讓設(shè)計更有個性。

22 根據(jù)字體x-dataheight來設(shè)置行高

具有不同x-dataheight的字體，需要不同的行高測量值，以實現(xiàn)文本每行之間正確的分隔。即使有2個相同18px的字體，它們的x-dataheight也會相差很大。

23 突出最重要的元素

結(jié)合字號、字重、顏色與版式，可輕松突出UI中最重要的元素，簡單微妙的調(diào)整，讓用戶體驗變得更好。

24 為表單錯誤添加輔助提示

添加錯誤提示是一種簡單又有幫助的額外視覺輔助，能幫助用戶填寫任何形式的表單。

25 在移動設(shè)備上創(chuàng)造大量可訪問區(qū)域

在為移動設(shè)備設(shè)計時，嘗試創(chuàng)造足夠大的可觸碰區(qū)域，方便點(diǎn)擊。對于只包含文本的按鈕和鏈接來說，盡量使用帶有標(biāo)簽的圖標(biāo)。

以下是iOS & Android推薦的最小點(diǎn)擊區(qū)域：

44 x 44pt，適用于iOS

48 x 48dp，適用于Android

26 盡量只在短標(biāo)題中使用大寫

如果你想在標(biāo)題中使用全大寫，確保標(biāo)題盡可能短，最好只有一行。如圖中的對比，過長的全大寫標(biāo)題帶來的視覺感受并不好。標(biāo)題中加大字母間距，看起來也更順暢。

27 提高淺色文字和圖像之間的對比度

淺色文本在淺色背景下應(yīng)當(dāng)是易讀的，在文本后建立一個不完全透明的深色背景，就能輕松提高對比度。

28 標(biāo)題類推薦字體

這些襯線、無襯線字體，我以前用過很多次，我發(fā)現(xiàn)它們非常適合做標(biāo)題，讓設(shè)計有一點(diǎn)溫暖和個性，在fonts.adobe.com上可以下載。

29 正文類推薦字體

一直用于長體文本的Serif和Sans-Serif商業(yè)字體的一小部分，非常推薦，同樣在fonts.adobe.com上可以找到。

30 垂直標(biāo)題和正文統(tǒng)一版式規(guī)則

垂直段落在搭建視覺層次結(jié)構(gòu)時，有必要按順序排列邊距。如圖所示，左側(cè)段落在標(biāo)題上使用了相等的頂部、底部邊距，但這樣做卻失去了與正文的粘性。針對這種情況，最好在標(biāo)題頂部留出更多空白，而標(biāo)題底部減少留白，這樣兩個部分的聯(lián)系也會更牢固。

31 下載進(jìn)度條，列出詳細(xì)數(shù)據(jù)

涉及到下載時，避免使用超級簡潔的界面，因為對用戶來說，詳細(xì)的數(shù)據(jù)信息會帶來更友好的使用體驗。使用顏色、進(jìn)度百分比數(shù)字或是一個簡單的圖標(biāo)表示，讓用戶能隨時取消下載。

32 標(biāo)題言簡意賅，不要啰嗦

標(biāo)題要簡短活潑、指向重點(diǎn)。人們進(jìn)行掃描，越簡短的標(biāo)題，用戶在瀏覽時就越能快速消化。不過，簡短的標(biāo)題并不萬能，要看你自己的目標(biāo)受眾、設(shè)計情境是否適合。

33 好的設(shè)計會「說話」，選擇合適的字體

每一種字體都有自己獨(dú)特的「聲音」，剛開始使用字體時，你會經(jīng)常混淆不太能快速區(qū)分，但不要害怕多看多找不同，慢慢提升自己的認(rèn)知。

34 為正文選擇合適的行長，提高可讀性

45-75個字符，被認(rèn)為是單列頁面最舒適的行長區(qū)間，其中66個字符的行長（包括字母和空格）是最佳選擇。當(dāng)然，字體大小和行高也會一定程度上影響可讀性，但行長最好保持45-75個字符之間。

寫在最后

至此，上&下 UX/UI 技巧「秘籍」系列就結(jié)束了，希望能幫助到大家！技巧不分貴賤，能幫助到我們作圖的，都要認(rèn)真對待呀。

原文：https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17

翻譯：UX 辭典