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

在這篇文章中，我整理了一些小的設計技巧，來幫助你快速改進自己的設計。有時只需要一些小的調整，就能快速提高設計的品質。

當你在設計一個高效、美觀的UI界面時，有時只需要一些小的調整，就能快速提高設計的品質。有時候僅僅是簡單的調整就能設計出讓客戶、用戶和你自己真正滿意的界面。

在這篇文章中，我整理了一些小的設計技巧，來幫助你快速改進自己的設計，提高用戶體驗。

適當使用文本裝飾元素

有些人會拿極簡設計出來說事，認為不應該加多余的文字干擾 ，界面上的內容都應該遵循有意義這個原則，這沒有問題。但有時候增加文本的目的只是簡單的為了“裝飾”，這樣是可以的。我們不希望所有的設計都變得平平無奇。

純粹出于裝飾原因而加入一些比較特別的元素也完全沒問題，它可以不遵循可訪問性標準，比如顏色對比度特別淺，看不清都沒關系。只要這些元素不影響用戶體驗就可以。

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

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

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

使用更自然的投影

設計過程中我們通常都會用到投影。投影的恰當使用，可以有效提高視覺品質。在設計界面時，避免使用比較重的投影，降低不透明度，讓界面看著更加自然。

使用讓視覺更加清晰的字體

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

面包屑導航設計要便于用戶理解

導航的設計無處不在，通常會應用在內容比較多的網站上，但有時很難理解它所表達的意思。如果將字體顏色和粗細稍微調整下， 就可以讓用戶快速確定自己所在站點中的位置，以及他們可能需要去的其他地方。

例如：如果他們通過搜索跳轉到某個站點的某個位置，這就特別有用。像上圖中的設計一樣，始終讓導航鏈接中的最后一項讓它在視覺上與其他有明顯區(qū)別，這樣用戶更加容易理解。

少用過高飽和度的顏色

高飽和度的顏色（明亮的藍色、紅色、綠色等）在網站上是挺有視覺沖擊力，并能吸引用戶的注意的。但是如果過度使用它們可能會讓用戶的眼睛感到疲勞，尤其是結合文本內容一起使用的時候。

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

使用用戶熟悉便于識別的圖標

在設計中使用圖標時，最好使用用戶熟悉并便于識別的圖標，讓用戶能快速理解使用它能做什么。使用不能傳達正確含義的圖標，只會變成視覺噪音，引起用戶混淆，成為用戶的認知障礙。

使用親密性原則來表達元素之間的關系

版式設計四大基本原則：對比，重復，對齊，親密性，其中親密性原則是把畫面中相關元素進行分類，建立某種視覺上的關聯(lián)，實現(xiàn)頁面整體結構清晰度，加快用戶在瀏覽網站或應用時的認知。

使用4pt基線網格+8pt網格來做字體排版

進行文字排版時，將 4pt 基礎網格 與 8pt 網格 一起使用可以為設計帶來更加和諧的垂直節(jié)奏。

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

減少標題的行高

冗長的正文需要足夠的行高來增加可讀性，而標題通常要短得多，所以你可以稍微減少間距。

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

使用色輪上的鄰近色不容易出錯

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

一組由“主”、“次”、“再次”組成的鄰近色可以幫你快速構建一個簡單的、不會出錯的配色方案。

在設計中最大化信噪比

設計中的清晰度和可用性可以通過“最大化信號”和“最小化噪音”來實現(xiàn)，這反過來又產生了高信噪比。

你可以通過確保相關信息(信號)有效地呈現(xiàn)，而不相關的信息(噪聲)被完全減少或刪除來實現(xiàn)這一點。剪掉絨毛。使事情更加清晰，刪減無關信息，強化重要信息，提高信噪比達到提高界面設計品質的目的。

使用全小寫英文讓畫面更有氣質

圖片上使用較粗的字體或開頭大寫有時候會顯得過于正式。嘗試在某些界面上使用小寫或者比較細的字體，讓畫面看起來更加有氣質。

使用粗細、大小和顏色來表達內容主次關系

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

深色背景應加粗文字

在淺色背景使用深色文本時，有時可以選擇較輕的字體粗細。但如果在深色背景使用淺色文字時，最好考慮把字體粗細稍微加粗一點，特別是長文本段落內容的，以提高文本的最佳可讀性，避免使用戶視覺疲勞。

選擇能正確氣質的字體

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

界面中的字體最好控制在2種以內

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

字體全大寫時，注意拉大字體間距

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

設計元素風格保持一致性

無論是網站或APP設計都應該保持一致性，這也是設計的最基本的原則。比如布局、圖標、顏色和按鈕都要始終保持一致，減少用戶混淆，提高用戶體驗。（彩云注：同一個界面中的元素樣式應保持一致）

設計適當增大留白

設計界面適當使用留白不僅讓界面看起來更加有空間感，主次分明，還能給人一種明朗、簡潔的心理感受。想讓設計視覺更加集中，有呼吸感，適當留白則是改進頁面視覺最簡單的方法之一。

設計開頭段落樣式，吸引用戶

如果你處理的是長篇內容，比如博客文章，那么將讀者吸引到內容中是很重要的。為了達到這個目的，開篇段落的外觀和內容本身一樣重要。可以簡單調整下，如調整字體大小，行高，粗細和顏色，都可以改善第一印象。

長文本使用短段落設計

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

定好主色調，并在設計中保持一致性

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

當使用8點網格系統(tǒng)時，圖標布局要一致

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

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

文章來源：彩云譯設計

作者：Marc Andrew，版權歸原作者所有

原文地址：medium

以上就是關于讓設計細節(jié)更高級的多個實用小技巧，希望大家喜歡，請繼續(xù)關注腳本之家。

相關推薦：

ui設計配色有哪些技巧? ui設計配色教程

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

最新評論