8 個(gè)瞬間提升界面質(zhì)感的小技巧

2020-6-24    資深UI設(shè)計(jì)者

設(shè)計(jì)美觀、和可用的UI界面需要花費(fèi)很長(zhǎng)的時(shí)間，還需要來(lái)回多次的設(shè)計(jì)修改。

經(jīng)過(guò)不斷地調(diào)整，最終才能產(chǎn)出令客戶、用戶和自己真正滿意的產(chǎn)品。

在這里，我們總結(jié)了一些實(shí)用的小技巧，這些技巧可以幫助設(shè)計(jì)師很輕松地改善設(shè)計(jì)，并為以后的設(shè)計(jì)實(shí)踐提供有用的指導(dǎo)。

1. 如果文本看起來(lái)很沉重，將顏色變淺

當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍。

通過(guò)選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問(wèn)題，使文字更容易被識(shí)別。

2. 字體越小，行高越大

當(dāng)字體變小時(shí)，增大行高可以獲得更好的可讀性和易讀性。

這里介紹兩個(gè)容易被混淆的概念——行高和行間距：

  • 英文的行高是指上一行的基線到下一行基線之間的距離(紅線標(biāo)注區(qū)域)；
  • 行間距指的是兩行字體之間的距離，也就是上一行的下限線與下一行的上限線之間的距離(藍(lán)線標(biāo)注區(qū)域)。

3. 選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來(lái)增加均勻性

設(shè)計(jì)時(shí)不必總是用多種顏色來(lái)填充設(shè)計(jì)。

如果項(xiàng)目允許，只需使用固定的色板，通過(guò)選擇基礎(chǔ)色，然后調(diào)整色調(diào)和顏色深淺，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。

4. 突出最重要的因素

通過(guò)結(jié)合使用字體大小、權(quán)重和顏色，可以輕松突出UI中最重要的元素。進(jìn)行簡(jiǎn)單的調(diào)整即可使用戶體驗(yàn)更好。

5. 為了保持一致性，請(qǐng)確保圖標(biāo)具有相同的視覺(jué)樣式

在設(shè)計(jì)UI圖標(biāo)時(shí)，要保持一致。確保它們具有相同的視覺(jué)樣式，相同的比重、填充或輪廓。

圖標(biāo)通過(guò)視覺(jué)手段為用戶提供必要的信息，所以保證功能相同的圖標(biāo)元素一致，外觀視覺(jué)一致。

6. 始終將「行為召喚」放在屏幕上最突出的位置

通過(guò)使用顏色對(duì)比、尺寸和標(biāo)簽，確保「行為召喚」盡可能突出。

如果可以的話，不要總依賴圖標(biāo)，也可以使用文本標(biāo)簽，以便用戶能更好地理解。

行為召喚：透過(guò)設(shè)計(jì)讓用戶想到要做某種行為，例如提示用戶去觸發(fā)按鈕、文本或圖片。

7. 為表單錯(cuò)誤添加額外的視覺(jué)反饋

填寫任何形式的表單時(shí)，在用戶剛進(jìn)行的操作旁邊及時(shí)出現(xiàn)一條錯(cuò)誤反饋，是一個(gè)簡(jiǎn)單但有用的額外視覺(jué)輔助。

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

設(shè)計(jì)要在產(chǎn)品內(nèi)部使用的菜單時(shí)，請(qǐng)確保在屏幕上突出顯示最常用的操作(如上傳圖像、添加文件等)。


文章來(lái)源：優(yōu)設(shè)    作者：Clip設(shè)計(jì)夾

日歷

鏈接

個(gè)人資料

存檔