在做UI界面設(shè)計(jì)時(shí)，有時(shí)候看著設(shè)計(jì)出來(lái)的界面總覺(jué)得不大好，但又不知道問(wèn)題出在哪，這里其實(shí)考驗(yàn)的就是設(shè)計(jì)觀察力。資深設(shè)計(jì)師之所以強(qiáng)，往往就是強(qiáng)在對(duì)設(shè)計(jì)細(xì)節(jié)的把握能力，他們總能找到你所看不到的細(xì)節(jié)問(wèn)題。大的問(wèn)題往往一眼就能看出來(lái)，但設(shè)計(jì)品質(zhì)高低往往就藏在這些設(shè)計(jì)細(xì)節(jié)中。觀察力的提升也是來(lái)自于平時(shí)項(xiàng)目中的經(jīng)驗(yàn)積累，為此，彩云圍繞設(shè)計(jì)細(xì)節(jié)計(jì)劃出一個(gè)系列文章，今天這篇文章是第一期，感興趣的同學(xué)保持關(guān)注，后續(xù)會(huì)有更多設(shè)計(jì)細(xì)節(jié)干貨文章連載更新，保證看完就能用到自己的工作中。

在這篇文章中，我整理了一些小的設(shè)計(jì)技巧，來(lái)幫助你快速改進(jìn)自己的設(shè)計(jì)。有時(shí)只需要一些小的調(diào)整，就能快速提高設(shè)計(jì)的品質(zhì)。

當(dāng)你在設(shè)計(jì)一個(gè)高效、美觀的UI界面時(shí)，有時(shí)只需要一些小的調(diào)整，就能快速提高設(shè)計(jì)的品質(zhì)。有時(shí)候僅僅是簡(jiǎn)單的調(diào)整就能設(shè)計(jì)出讓客戶、用戶和你自己真正滿意的界面。

在這篇文章中，我整理了一些小的設(shè)計(jì)技巧，來(lái)幫助你快速改進(jìn)自己的設(shè)計(jì)，提高用戶體驗(yàn)。

適當(dāng)使用文本裝飾元素

有些人會(huì)拿極簡(jiǎn)設(shè)計(jì)出來(lái)說(shuō)事，認(rèn)為不應(yīng)該加多余的文字干擾 ，界面上的內(nèi)容都應(yīng)該遵循有意義這個(gè)原則，這沒(méi)有問(wèn)題。但有時(shí)候增加文本的目的只是簡(jiǎn)單的為了“裝飾”，這樣是可以的。我們不希望所有的設(shè)計(jì)都變得平平無(wú)奇。

純粹出于裝飾原因而加入一些比較特別的元素也完全沒(méi)問(wèn)題，它可以不遵循可訪問(wèn)性標(biāo)準(zhǔn)，比如顏色對(duì)比度特別淺，看不清都沒(méi)關(guān)系。只要這些元素不影響用戶體驗(yàn)就可以。

UI界面中的不同元素要有區(qū)分度

按鈕、通知（文字鏈接）是用戶界面中兩個(gè)獨(dú)立又重要的元素。如果可以的話，一定要確保用戶在瀏覽你的網(wǎng)站或應(yīng)用時(shí)能夠快速且輕松地將它們區(qū)分開(kāi)來(lái)。

按鈕，在大多數(shù)情況下都是最重要的，所以在界面中一定要確保是最突出，并且很容易區(qū)分其他元素（例如：文本鏈接）。

使用更自然的投影

設(shè)計(jì)過(guò)程中我們通常都會(huì)用到投影。投影的恰當(dāng)使用，可以有效提高視覺(jué)品質(zhì)。在設(shè)計(jì)界面時(shí)，避免使用比較重的投影，降低不透明度，讓界面看著更加自然。

使用讓視覺(jué)更加清晰的字體

在設(shè)計(jì)中，字體適當(dāng)都使用大寫也是很不錯(cuò)的。它可以幫助你在設(shè)計(jì)中實(shí)現(xiàn)元素之間的多樣性和對(duì)比度，提高視覺(jué)的整體效果。但要確保選擇是合適的字體，行高和字重粗細(xì)，確保給用戶呈現(xiàn)的內(nèi)容清晰度。

面包屑導(dǎo)航設(shè)計(jì)要便于用戶理解

導(dǎo)航的設(shè)計(jì)無(wú)處不在，通常會(huì)應(yīng)用在內(nèi)容比較多的網(wǎng)站上，但有時(shí)很難理解它所表達(dá)的意思。如果將字體顏色和粗細(xì)稍微調(diào)整下， 就可以讓用戶快速確定自己所在站點(diǎn)中的位置，以及他們可能需要去的其他地方。

例如：如果他們通過(guò)搜索跳轉(zhuǎn)到某個(gè)站點(diǎn)的某個(gè)位置，這就特別有用。像上圖中的設(shè)計(jì)一樣，始終讓導(dǎo)航鏈接中的最后一項(xiàng)讓它在視覺(jué)上與其他有明顯區(qū)別，這樣用戶更加容易理解。

少用過(guò)高飽和度的顏色

高飽和度的顏色（明亮的藍(lán)色、紅色、綠色等）在網(wǎng)站上是挺有視覺(jué)沖擊力，并能吸引用戶的注意的。但是如果過(guò)度使用它們可能會(huì)讓用戶的眼睛感到疲勞，尤其是結(jié)合文本內(nèi)容一起使用的時(shí)候。

盡量少地使用高飽和的顏色，你可以嘗試把飽和度降低，增加顏色中的灰度來(lái)使顏色變淡，這樣不僅能避免用戶視覺(jué)疲勞，還能更加突出重點(diǎn)內(nèi)容，讓用戶閱讀起來(lái)更加方便且不被視覺(jué)干擾。

使用用戶熟悉便于識(shí)別的圖標(biāo)

在設(shè)計(jì)中使用圖標(biāo)時(shí)，最好使用用戶熟悉并便于識(shí)別的圖標(biāo)，讓用戶能快速理解使用它能做什么。使用不能傳達(dá)正確含義的圖標(biāo)，只會(huì)變成視覺(jué)噪音，引起用戶混淆，成為用戶的認(rèn)知障礙。

使用親密性原則來(lái)表達(dá)元素之間的關(guān)系

版式設(shè)計(jì)四大基本原則：對(duì)比，重復(fù)，對(duì)齊，親密性，其中親密性原則是把畫面中相關(guān)元素進(jìn)行分類，建立某種視覺(jué)上的關(guān)聯(lián)，實(shí)現(xiàn)頁(yè)面整體結(jié)構(gòu)清晰度，加快用戶在瀏覽網(wǎng)站或應(yīng)用時(shí)的認(rèn)知。

使用4pt基線網(wǎng)格+8pt網(wǎng)格來(lái)做字體排版

進(jìn)行文字排版時(shí)，將 4pt 基礎(chǔ)網(wǎng)格 與 8pt 網(wǎng)格 一起使用可以為設(shè)計(jì)帶來(lái)更加和諧的垂直節(jié)奏。

你只需要使用 4 的倍數(shù)（16、20、24、28 等）的行高值將字體與 4 的基線網(wǎng)格對(duì)齊。為什么是 4？ 好吧，就我個(gè)人而言，我發(fā)現(xiàn)在處理某些文本大小時(shí)，過(guò)去以 8 的倍數(shù)進(jìn)行縮放并不是那么通用。

減少標(biāo)題的行高

冗長(zhǎng)的正文需要足夠的行高來(lái)增加可讀性，而標(biāo)題通常要短得多，所以你可以稍微減少間距。

標(biāo)題的推薦行高通常是文本大小的1 – 1.3倍，標(biāo)題文字越大，需要的行高就越少。

使用色輪上的鄰近色不容易出錯(cuò)

鄰近色，是最和諧的配色方案之一，當(dāng)你在挑選顏色遇到困難時(shí)，它能給你很大的幫助。

一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構(gòu)建一個(gè)簡(jiǎn)單的、不會(huì)出錯(cuò)的配色方案。

在設(shè)計(jì)中最大化信噪比

設(shè)計(jì)中的清晰度和可用性可以通過(guò)“最大化信號(hào)”和“最小化噪音”來(lái)實(shí)現(xiàn)，這反過(guò)來(lái)又產(chǎn)生了高信噪比。

你可以通過(guò)確保相關(guān)信息(信號(hào))有效地呈現(xiàn)，而不相關(guān)的信息(噪聲)被完全減少或刪除來(lái)實(shí)現(xiàn)這一點(diǎn)。剪掉絨毛。使事情更加清晰，刪減無(wú)關(guān)信息，強(qiáng)化重要信息，提高信噪比達(dá)到提高界面設(shè)計(jì)品質(zhì)的目的。

使用全小寫英文讓畫面更有氣質(zhì)

圖片上使用較粗的字體或開(kāi)頭大寫有時(shí)候會(huì)顯得過(guò)于正式。嘗試在某些界面上使用小寫或者比較細(xì)的字體，讓畫面看起來(lái)更加有氣質(zhì)。

使用粗細(xì)、大小和顏色來(lái)表達(dá)內(nèi)容主次關(guān)系

設(shè)計(jì)文字內(nèi)容時(shí)，沒(méi)辦法時(shí)時(shí)告訴用戶哪個(gè)內(nèi)容信息是主要的哪個(gè)是次要的，但可以通過(guò)調(diào)整字體粗細(xì)、大小、顏色，讓我用戶一眼就能分辨內(nèi)容主次關(guān)系，避免閱讀中出現(xiàn)任何混亂。（彩云注：要對(duì)比就要足夠強(qiáng)，不要模棱兩可。）

深色背景應(yīng)加粗文字

在淺色背景使用深色文本時(shí)，有時(shí)可以選擇較輕的字體粗細(xì)。但如果在深色背景使用淺色文字時(shí)，最好考慮把字體粗細(xì)稍微加粗一點(diǎn)，特別是長(zhǎng)文本段落內(nèi)容的，以提高文本的最佳可讀性，避免使用戶視覺(jué)疲勞。

選擇能正確氣質(zhì)的字體

試著為呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，并且對(duì)內(nèi)容氣質(zhì)會(huì)有直觀感受。所以選擇合適的字體很關(guān)鍵，能讓用戶獲得對(duì)應(yīng)氣質(zhì)的閱讀體驗(yàn)。（彩云注：上圖中的區(qū)別在于，左邊的字體偏古典，而插畫偏現(xiàn)代，所以右邊就會(huì)更合適一些）

界面中的字體最好控制在2種以內(nèi)

對(duì)于我來(lái)說(shuō)，設(shè)計(jì)最好選擇一種類型的字體。但如果項(xiàng)目需要，最好控制在兩種字體以內(nèi)，不要太多。對(duì)于沒(méi)有經(jīng)驗(yàn)設(shè)計(jì)師來(lái)說(shuō)，頁(yè)面使用多種字體視覺(jué)是很難把控的。所以建議最多使用2種字體類型，然后改變字體的粗細(xì)，大小，顏色，這樣的設(shè)計(jì)會(huì)看起來(lái)更加統(tǒng)一協(xié)調(diào)。

字體全大寫時(shí)，注意拉大字體間距

使用全大寫的文字時(shí)，只要稍微拉大下字母間的間距，就能使字母間更加容易區(qū)分，單詞更加容易閱讀，提高用戶的可閱讀性，還能使大寫字體視覺(jué)上更加美觀。

設(shè)計(jì)元素風(fēng)格保持一致性

無(wú)論是網(wǎng)站或APP設(shè)計(jì)都應(yīng)該保持一致性，這也是設(shè)計(jì)的最基本的原則。比如布局、圖標(biāo)、顏色和按鈕都要始終保持一致，減少用戶混淆，提高用戶體驗(yàn)。（彩云注：同一個(gè)界面中的元素樣式應(yīng)保持一致）

設(shè)計(jì)適當(dāng)增大留白

設(shè)計(jì)界面適當(dāng)使用留白不僅讓界面看起來(lái)更加有空間感，主次分明，還能給人一種明朗、簡(jiǎn)潔的心理感受。想讓設(shè)計(jì)視覺(jué)更加集中，有呼吸感，適當(dāng)留白則是改進(jìn)頁(yè)面視覺(jué)最簡(jiǎn)單的方法之一。

設(shè)計(jì)開(kāi)頭段落樣式，吸引用戶

如果你處理的是長(zhǎng)篇內(nèi)容，比如博客文章，那么將讀者吸引到內(nèi)容中是很重要的。為了達(dá)到這個(gè)目的，開(kāi)篇段落的外觀和內(nèi)容本身一樣重要。可以簡(jiǎn)單調(diào)整下，如調(diào)整字體大小，行高，粗細(xì)和顏色，都可以改善第一印象。

長(zhǎng)文本使用短段落設(shè)計(jì)

在處理長(zhǎng)篇內(nèi)容時(shí)，盡量保持段落簡(jiǎn)短有力，清晰呈現(xiàn)。確保用戶在短時(shí)間內(nèi)快速閱讀內(nèi)容信息。（注：人的耐心很有限，盡量把長(zhǎng)段落拆分，我自己寫公眾號(hào)文章時(shí)也會(huì)這樣做，我給自己規(guī)定一個(gè)段落最長(zhǎng)不超過(guò)5行，并一直執(zhí)行這個(gè)標(biāo)準(zhǔn)。）

定好主色調(diào)，并在設(shè)計(jì)中保持一致性

怎樣讓用戶界面看起來(lái)更專業(yè)？那就是從一開(kāi)始就定義好主色調(diào)，并在整個(gè)設(shè)計(jì)中始終保持一致性。如果界面隨機(jī)使用大量的顏色來(lái)設(shè)計(jì)，視覺(jué)效果只會(huì)讓用戶看起來(lái)很亂，分不清主次。

當(dāng)使用8點(diǎn)網(wǎng)格系統(tǒng)時(shí)，圖標(biāo)布局要一致

當(dāng)使用圖標(biāo)和 8pt 網(wǎng)格系統(tǒng) 時(shí)，你會(huì)發(fā)現(xiàn)大多數(shù)構(gòu)建良好的圖標(biāo)集的圖標(biāo)都位于8的倍數(shù)框架內(nèi)（即 16×16、24×24、32×32 等）。但在設(shè)計(jì)中我們常常很容易忽略這一原則。若想讓你的設(shè)計(jì)圖標(biāo)在布局中保持一致性，最好確保你設(shè)計(jì)的任何圖標(biāo)都在8的倍數(shù)框內(nèi)。

本文翻譯已獲得作者的正式授權(quán)（授權(quán)截圖如下）

文章來(lái)源：彩云譯設(shè)計(jì)

作者：Marc Andrew，版權(quán)歸原作者所有

原文地址：medium

以上就是關(guān)于讓設(shè)計(jì)細(xì)節(jié)更高級(jí)的多個(gè)實(shí)用小技巧，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

ui設(shè)計(jì)配色有哪些技巧? ui設(shè)計(jì)配色教程

柵格系統(tǒng)在logo設(shè)計(jì)扮演什么角色? 柵格系統(tǒng)使用技巧介紹

最新評(píng)論