當(dāng)您在做設(shè)計的時候，是否會糾結(jié)于所有的可能性，比如文本塊是應(yīng)該變大還是變小？元素周圍的空白是多還是少？元素的顏色是應(yīng)該深一點(diǎn)，還是淺一點(diǎn)呢？

本文將分享一些關(guān)于如何使設(shè)計看起來更加一致且友好的技巧。

想要保持設(shè)計的一致性，應(yīng)該遵循什么樣的規(guī)范？

在用戶界面中組合元素的方式有無數(shù)種，因此需要設(shè)置一些規(guī)則和界限，否則設(shè)計過程可能會復(fù)雜且繁瑣。如果你正試圖在許多“正確的”選項(xiàng)中選擇最好的選項(xiàng)。那么通過遵循一些基本規(guī)則，便可以解決這個問題。

本文適用于初級UI設(shè)計師。你不需要太多經(jīng)驗(yàn)就能遵循其中的提示和技巧。

擁有一個設(shè)計系統(tǒng)是非常重要的!

使用戶界面設(shè)計保持一致的重要性

讓我們從頭開始。您如果希望設(shè)計看起來很好、值得信賴，就需要不惜一切代價避免混亂。要做到這一點(diǎn)，為設(shè)計工作建立一個系統(tǒng)是非常重要的。

開發(fā)人員也會希望有一個系統(tǒng)，他們會喜歡您的設(shè)計有條理，也讓他們的工作更容易。

01

為界面設(shè)計規(guī)劃一個基礎(chǔ)單位

你是否遇到過這種情況：因?yàn)橐粋€新尺寸的元素而改變了之前的元素的尺寸，然后過了幾稿之后，因?yàn)槟骋辉爻叽绲母淖?，又統(tǒng)統(tǒng)改變了之前已經(jīng)設(shè)計好的元素。到底哪種尺寸最合適？有沒有一種通用的規(guī)范可以讓我們遵循？

首先確定基本單元：8像素網(wǎng)格

為了使整個設(shè)計看起來更簡潔，最好先設(shè)置測量值，然后再確定所有的尺寸。最好的選擇是堅持一些經(jīng)過驗(yàn)證的規(guī)則。其中一個規(guī)則就是調(diào)整和移動元素的大小，精確到8個像素。這條規(guī)則會使你的決策更有效率。注，如果設(shè)計較小的元素，也可以使用4像素不是8像素，根據(jù)設(shè)計靈活調(diào)整即可。

除了px和dp，您可能聽說過dp這個詞，在屏幕設(shè)計和原型設(shè)計中常常使用。dp單元是“不受縮放影響的抽象像素”（density-independent pixel）的縮寫?！霸搯卧鄬τ谠?60dpi的屏幕上，1個dp等于160dpi屏幕上的1個像素，等于320dpi屏幕上的2個像素，以此類推。數(shù)值公式為px = dp * (dpi/160)。

使用8像素網(wǎng)格的原因

• 8像素是一個足夠小的“間距”。

• 8可以被4和2整除。

• 如果使用8，您可以輕松地調(diào)整任何元素的大小，而不會以半像素結(jié)束，比如8 / 2 = 4、4 / 2 = 2和2 / 2 = 1。另一方面，如果你從10開始，你會得到5像素，然后是2.5像素，然后是1.25像素。在為屏幕設(shè)計時，應(yīng)該盡可能避免半像素，元素將對齊到精確的像素邊界，會使設(shè)計看起來更清晰。

• 8的倍數(shù)(8、16、24、32、40、48、56、64、72、80等)與二進(jìn)制值(1、2、4、8、16、32、64、128、256、512等)交織在一起。

• 最后，這些數(shù)字很容易記住。

使用8像素網(wǎng)格的優(yōu)勢

• 節(jié)省決策時間，讓工作高效快捷。

• 與開發(fā)配合，可以幫設(shè)計師與開發(fā)團(tuán)隊(duì)創(chuàng)建更高效的規(guī)范系統(tǒng)，如果開發(fā)人員需要更改，則可以按照8像素增量來調(diào)整數(shù)值，確保設(shè)計的一致性和順序性。

• 具備一致性的網(wǎng)站，會讓用戶感覺更加舒適。同時也會讓他們產(chǎn)生信任感，在使用界面是也會更加容易。

使用8px網(wǎng)格的有效方法

使用8px網(wǎng)格的結(jié)果

02.使用網(wǎng)格布局所有元素

水平和諧的布局

如果你在設(shè)計中已經(jīng)使用了網(wǎng)格系統(tǒng)，那太好了。使用網(wǎng)格可以幫助您將所有元素準(zhǔn)確地放置在畫布上。

網(wǎng)格構(gòu)成了界面的框架，并確定可以在何處放置元素。網(wǎng)格系統(tǒng)包含元素組成，并定義了清晰的邊界，使設(shè)計更加一致。通過網(wǎng)格系統(tǒng)，您可以更容易地決定將元素放在哪里。隨著您的設(shè)計經(jīng)驗(yàn)逐漸豐富，也可以根據(jù)需要更新邊界。

但是，如何創(chuàng)建這個網(wǎng)格系統(tǒng)呢？接下來，我將詳細(xì)介紹?；旧希械臄?shù)量和大小可能是隨機(jī)的，具體取決于設(shè)計需求。設(shè)計越詳細(xì)，網(wǎng)格將需要越多的列。當(dāng)您無法拿定主意時，也可以向其他更有經(jīng)驗(yàn)的同事請教。

水平和諧的布局

垂直和諧的布局

與保持水平和諧類似，在設(shè)計中保持垂直距離的一致性也很重要。像電子表格中的行一樣，它們可以幫助您將文本保持均勻的間隔。

這些行應(yīng)該有多大？同樣，這取決于具體設(shè)計需求。但是，我建議使用8像素或8的倍數(shù)（例如16）。重新定義元素或文本要對齊的邊界。

垂直和諧的布局

03.正確地選擇字號

如果仔細(xì)觀察一些精心設(shè)計的字體，就會發(fā)現(xiàn)字號的一致性。這是因?yàn)槠渲杏幸恍┨貏e的設(shè)計規(guī)律。

注意：保持字號一致，并且盡可能選擇兩種不超過三種字體。但如何選擇字體，不在本文的討論范圍之內(nèi)。

首先定義一些在整個項(xiàng)目中使用的關(guān)鍵字體大小。(例如，分別使用30、31和32像素是很愚蠢的。相反，應(yīng)該將這三種非常相似的尺寸合并成一個。)

采用標(biāo)準(zhǔn)字號有兩個好處:

• 讓設(shè)計更一致，更優(yōu)雅。

• 加快設(shè)計過程，讓您更有效率。

定義字號

定義字號時，請確保不要以相同的數(shù)值增加大小。當(dāng)您放大文本時，它應(yīng)該是非線性的。這意味著創(chuàng)建的文本越大，增加的數(shù)值應(yīng)該越大。

為字號設(shè)定一個系統(tǒng)

假設(shè)您有一個文本塊，字號為12像素，這時想放大它。您嘗試了14像素覺得很滿意。但然后想讓一個40像素的大標(biāo)題更大，那應(yīng)該是把字號從40像素增加到42像素嗎？當(dāng)然不是。理論上講，文本需要更大的調(diào)整。您可能需要放大24個像素，從而得到一個更大的64像素的標(biāo)題。

簡而言之，這意味著文本越大，需要增加的數(shù)值越大。這個非常簡單的原則不僅適用于文本，也適用于按鈕的大小、空白和其他所有東西。

它通?；趲缀渭墧?shù)。下圖顯示了字體比例關(guān)系的趨勢：

幾何級數(shù)

但是，對于排版，請盡量使用經(jīng)過驗(yàn)證的比例。比例為12、14、16、18、20、24、30、36、48、60和72像素。

經(jīng)過驗(yàn)證的字號比例

文本行高

定義所有字體大小后，需要注意的就是行距。對于行距，請再次使用4像素的增量。

例如，對于16像素的文本，我們將行距設(shè)置為24像素。如果要讓文本看起來更加舒適，請將行距增加4像素，達(dá)到28。

04.定義顏色和色度

顏色的組合實(shí)在是非常之多，如果您不預(yù)先定義顏色的深淺，就會浪費(fèi)很多時間。不應(yīng)該把自己局限于黑色、白色，或者藍(lán)色。對于每一種顏色，您都需要其他的色度，提前設(shè)置它們是很重要的，這樣在整個設(shè)計項(xiàng)目中色度都是一致的。我們不想在設(shè)計中制造混亂。為每種顏色準(zhǔn)備5到10種色度。我自己喜歡為每種顏色定義9種色度。

為什么給每種顏色定義9種色度?

• 為顏色命名。無論您使用的是圖形編輯器還是CSS代碼，您都將從本技巧中獲益。每個陰影將被分配一個數(shù)字，例如100、200、300、400、500、600、700、800和900。(為什么以百為單位？因?yàn)檫@也是通常劃分字體的方式。)

• 9是定義顏色的方便數(shù)字。準(zhǔn)備這些陰影的最好方法是準(zhǔn)備一排9個方塊，用顏色填充方塊。中間的是底色。然后，定義最亮的陰影(在最左邊)和最暗的陰影(在最右邊)。下一步是選擇色調(diào)之間。

給每種顏色定義9種色度

05.準(zhǔn)備不同的元素大小和類型

在進(jìn)行設(shè)計時，通常將使用無數(shù)的圖標(biāo)，按鈕和其他組件。同樣，最好為它們預(yù)先準(zhǔn)備幾種尺寸，并將選項(xiàng)限制地盡可能少。在設(shè)計過程中，請勿添加其他尺寸，也不要嘗試調(diào)整組件的尺寸以滿足不必要的需求。相反，只需使用已經(jīng)定義的設(shè)計，整個設(shè)計就會更加一致和整潔。

讓我們以按鈕為例。開始時，需要定義它們的層次結(jié)構(gòu)。為此，使一個按鈕具有主要作用，一個按鈕具有次要作用，也許另一個按鈕具有更次要的作用。為每個按鈕指定其狀態(tài)（有效，無效）和顏色變體。始終嘗試將元素數(shù)量減少到最重要的元素。

按鈕的例子

06.定義其他元素的屬性

用戶界面設(shè)計師經(jīng)常在設(shè)計工作中使用陰影。但是，對于經(jīng)驗(yàn)不足的設(shè)計師來說，使用陰影效果有時會很花費(fèi)時間。創(chuàng)建陰影時，必須設(shè)置陰影沿x軸和y軸的距離，以及模糊半徑，顏色和透明度。陰影可能需要花費(fèi)很多時間進(jìn)行微調(diào)，這就是為什么要在進(jìn)入設(shè)計之前準(zhǔn)備陰影的原因。準(zhǔn)備一組陰影（使用與顏色相同的方法），然后在整個設(shè)計過程中應(yīng)用它們是很有幫助的。

另外，請注意將要使用的元素的所有其他屬性，例如角半徑，透明度和顏色漸變。

陰影的例子

07.留白

正確調(diào)整留白很重要。無論是從外部（邊距）還是從內(nèi)部（邊距）偏移元素，都應(yīng)再次依靠8的倍數(shù)。將偏移量增加8像素（小元素為4）。與字體大小一樣，想要的間隙越大，增量就必須越大（同樣，需要預(yù)先定義這些增量）。

留白

總結(jié)

為了使設(shè)計干凈，一致，請定義一些邊界和明確的規(guī)范。

處理設(shè)計的每個元素時，請記住以下幾點(diǎn)：

• 檢查是否已在設(shè)計中的某個地方使用它。如果是這樣，就可以簡單地復(fù)制該元素。

• 遵循水平和垂直協(xié)調(diào)一致，并使用一開始定義的增量調(diào)整元素的大小。

• 避免復(fù)雜的決定以及與像素永無休止的斗爭。有一個適當(dāng)?shù)南到y(tǒng)。

• 不要兩次創(chuàng)建相同的元素。如果設(shè)計井井有條，工作將會更高效，項(xiàng)目也將更快地迭代，并且能夠更輕松地與開發(fā)人員進(jìn)行溝通。開發(fā)人員將按照設(shè)計樣式設(shè)置變量，因此請清楚定義它們，以創(chuàng)建更好，更可持續(xù)的代碼。