設(shè)計過程中最浪費(fèi)時間的莫過于決策過程，建立標(biāo)準(zhǔn)的目的就是為了減少決策時間，提升效率。今天這篇文章旨在告訴大家一些設(shè)計過程中的決策技巧，不僅看完馬上就能用上，還告訴大家為什么這么做，這樣做的好處。全篇純干貨，敬請閱讀！

譯文：

設(shè)計的時候，你是否會糾結(jié)于各種可能性，比如是讓文字變大還是變小，或者增加(或減少)元素周圍的留白，顏色是該深一點(diǎn)還是淺一點(diǎn)？在本文中，我將分享一些關(guān)于如何解決這些常見問題以及如何使設(shè)計更加一致和對用戶更友好的技巧。

這篇文章主要內(nèi)容是講在整個設(shè)計過程中要遵循的限制和規(guī)則。界面中的元素組合方式有無數(shù)種，因此需要設(shè)置一些規(guī)則和邊界，否則設(shè)計工作流可能很難順利推進(jìn)下去。你可能在所有的可能性中不斷糾結(jié)，試圖在許多“正確的”選項(xiàng)中選擇最好的那個。通過設(shè)置(并遵循)一些基本規(guī)則，做出來的設(shè)計也能更加的統(tǒng)一。

本文是為初級設(shè)計師準(zhǔn)備的，不需要很多的經(jīng)驗(yàn)，就可以快速掌握這些技巧。

系統(tǒng)性思維非常重要

界面設(shè)計一致性的重要性

讓我們從頭開始捋一捋。你希望你的設(shè)計看起來很好，值得信賴，需要不惜一切代價避免混亂。為了實(shí)現(xiàn)這一點(diǎn)，擁有一個完整的系統(tǒng)性思維是非常重要的。

開發(fā)也期待設(shè)計師善用系統(tǒng)性思維，他們喜歡條理清晰的設(shè)計，這樣他們的工作會更容易。

給定大小的尺寸設(shè)計系統(tǒng)

無論是調(diào)整文字大小、圖片大小，還是調(diào)整留白，都沒有關(guān)系，前提是需要確定每個元素的大小。我敢打賭你一定遇到過這種情況:你曾經(jīng)為一個元素選擇了一個大小，五分鐘后改了一次，然而沒多久又改了一次，也許最后改了無數(shù)次才確定下來。

哪種尺寸最合適?可能是你試過的某一個尺寸，但其實(shí)應(yīng)該避免這個無止境的浪費(fèi)時間陷阱!

首先選擇基本單元:8像素網(wǎng)格

為了使整個設(shè)計看起來更簡潔，最好先設(shè)置基準(zhǔn)單位，然后再確定所有的尺寸。具體選擇多少本來應(yīng)該由你來定，但通常，最好的選擇是堅持一些經(jīng)過驗(yàn)證的規(guī)則。其中一條規(guī)則是以8像素的倍數(shù)來調(diào)整和移動元素的大小。這條規(guī)則會使決策更有效率。

px和dp：“dp”這個詞也被用在界面設(shè)計和原型設(shè)計中?！癲p”是“密度無關(guān)像素”的縮寫?！斑@個單位是以160 dpi的屏幕為基準(zhǔn)的，1個dp等于160 dpi屏幕上的1個像素，等于320 dpi屏幕上的2個像素，以此類推。數(shù)學(xué)換算公式是' px = dp * (dpi/160) '。

注:如果使用的是較小的元素或?qū)ο?，也可以使?像素的增量，而不是8像素的增量——偶爾，可以根據(jù)需要進(jìn)行進(jìn)一步的調(diào)整。

但為什么是8像素呢?

這里有幾個原因可以解釋為什么8經(jīng)常像一個“神奇的數(shù)字”:

• 8像素是一個足夠的最小“增量”。
• 8是一個很好的數(shù)，因?yàn)樗鼙?和2整除。
• 如果使用8，就可以輕松地調(diào)整任何元素的大小，而不會出現(xiàn)半像素，比如8 / 2 = 4、4 / 2 = 2和2 / 2 = 1。另一方面，如果你從10開始，你會得到5個像素，然后是2.5個像素，然后是1.25個像素。在設(shè)計界面時，盡可能避免一半像素。通過使用完整像素，設(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)點(diǎn)是什么?

• 作為設(shè)計師，決策時間是非常寶貴的。這將使你更快、更有效率。
• 如果跟開發(fā)對接，這能創(chuàng)建一個體系幫助團(tuán)隊(duì)提升效率。如果開發(fā)需要進(jìn)行一些快速修改，他可以將值調(diào)整為8像素的增量。這能確保一致性和有規(guī)律。
• 當(dāng)人們訪問你設(shè)計的網(wǎng)站時，他們會感到很舒服，增強(qiáng)信任感和用戶體驗(yàn)度（彩云注：秩序感能讓用戶獲得信任和舒服的感受）。

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

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

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

水平網(wǎng)格

我相信你在設(shè)計網(wǎng)站時已經(jīng)使用過網(wǎng)格了，使用網(wǎng)格可以幫助你準(zhǔn)確地將所有元素放置在界面上。

網(wǎng)格形成界面的骨架，并決定可以將元素放置在何處。模板化定義了清晰的邊界，這樣設(shè)計就會更加一致。用上網(wǎng)格系統(tǒng)，可以更容易地決定將元素放在哪里。當(dāng)經(jīng)驗(yàn)越來越豐富時，調(diào)整界面就會更加得心應(yīng)手。

翻譯不易，順手幫點(diǎn)個廣告？謝謝~

但是如何創(chuàng)建這個網(wǎng)格呢?我們將在下面討論具體問題?；旧?，列的數(shù)量和大小可能是隨機(jī)的，這取決于你的需要。設(shè)計越細(xì)致，網(wǎng)格需要的列就越多。如果還是拿不準(zhǔn)，就應(yīng)該向有經(jīng)驗(yàn)的同事尋求幫助。

另外，我建議閱讀“UI設(shè)計綜合指南”（https://www.smashingmagazine.com/2018/02/comprehensive-guide-ui-design/），這將幫助你更深入地理解用戶界面設(shè)計。

水平網(wǎng)格

垂直網(wǎng)格

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

這些行應(yīng)該要多大?再說一次，這取決于你的需要。然而，我建議使用8像素或8的倍數(shù)(如16)重新定義元素或文本要對齊的邊界。

垂直網(wǎng)格

選擇正確的字體大小

如果你仔細(xì)觀察一些精心設(shè)計的字體，會發(fā)現(xiàn)字體大小的一致性。這是有原因的。

注:要記住，在你的設(shè)計中只需要兩個，也許三個字體大小。但是，如何選擇正確的字體并使它們協(xié)同工作超出了本教程的范圍。

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

標(biāo)準(zhǔn)字體大小有兩個好處:

• 設(shè)計會更一致，更優(yōu)雅。
• 它將加快設(shè)計過程，讓你更有效率。

字體大小

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

有一個字體大小的系統(tǒng)

假設(shè)有一個文本，字體大小為12像素，你想放大它，然后嘗試用14像素，你很滿意。但然后想象你有一個大標(biāo)題(40像素)，你想讓它更大。你能把尺寸從40像素增加到42像素嗎?當(dāng)然不可以。在視覺上，文本需要更大的改變。設(shè)計時可能需要將其增加24個像素，從而得到一個更大的64像素的標(biāo)題。

簡而言之，這意味著文本越大，需要使用的增量就越大。這個非常簡單的原則不僅適用于文本，也適用于按鈕的大小、空白和其他所有元素。（彩云注：兩個元素之間的尺寸差別一定要明顯，很接近的話就會給人感覺是出問題了。）

它通?；谝粋€幾何級數(shù)。這是一個非常有用的圖表，顯示字體比例:

幾何級數(shù)

然而，對于排版來說，一種行之有效的方法是使用一套經(jīng)過經(jīng)驗(yàn)驗(yàn)證的字體尺寸。比例是12、14、16、18、20、24、30、36、48、60和72像素。

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

行高

一旦定義了所有的字體大小，就要注意行高了。對于行高，再次使用4像素的增量。例如，對于16像素的文本，我們將行高設(shè)置為24像素。如果你想讓文字更有呼吸感，那么將行高增加4個像素到28。

定義項(xiàng)目中的顏色

顏色的各種組合太多了，如果你不預(yù)先定義顏色的深淺，就會浪費(fèi)太多時間。你不能把自己局限于黑色、白色，藍(lán)色這類明確的顏色。對于每一種顏色，都需要其他的色調(diào)，提前設(shè)置好它們是很重要的，這樣在整個設(shè)計項(xiàng)目中顏色是能成體系的。為每種顏色準(zhǔn)備5到10種色調(diào)，我喜歡為每種顏色定義9種色調(diào)。

讓我們仔細(xì)看看顏色的深淺。

為什么每種顏色有9種色調(diào)?

• 第一個優(yōu)點(diǎn)是顏色命名。無論使用的是設(shè)計軟件還是CSS代碼，都將從這個技巧中獲益。每個陰影將被分配一個數(shù)字，例如100、200、300、400、500、600、700、800和900。(為什么幾百?來源于css中的對自重的定義，文章鏈接：https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight）。
• 其次，9是定義顏色的方便數(shù)字。準(zhǔn)備這些色調(diào)的最好方法是準(zhǔn)備一排9個方塊，用顏色填充方塊。中間的是基準(zhǔn)色，然后，定義最亮的色調(diào)(在最左邊)和最暗的色調(diào)(在最右邊)。下一步是設(shè)置色調(diào)之間的顏色。

每種顏色有九種色調(diào)

準(zhǔn)備元素的不同大小、類型和狀態(tài)

在設(shè)計時，通常會使用無數(shù)的圖標(biāo)、按鈕和其他組件。同樣，最好提前準(zhǔn)備好幾個尺寸，并將選項(xiàng)限制在盡可能少的范圍內(nèi)。在設(shè)計過程中，不要添加其他尺寸，也不要試圖調(diào)整組件的尺寸以滿足需要。相反，只使用已經(jīng)定義的那些，整個設(shè)計就會更加一致和干凈。

讓我們以按鈕為例。開始時，需要定義它們的層次結(jié)構(gòu)。為此，創(chuàng)建一個包含主操作的按鈕，一個包含次要操作的按鈕，或者另一個包要次次要操作的按鈕。對于每個按鈕，指定其狀態(tài)(激活、未激活)和顏色變體。總之盡量將元素的數(shù)量減少到最重要的元素（彩云注：目的在于盡量要減少選擇的時間，和保證一致性，提升設(shè)計效率和質(zhì)量）。

按鈕樣式的一個例子

定義其他元素的屬性

UI設(shè)計師經(jīng)常在設(shè)計中使用投影。然而，對于缺乏經(jīng)驗(yàn)的設(shè)計師來說，投影有時會是一種掙扎。做投影時，必須設(shè)置投影沿x軸和y軸的距離，以及模糊半徑、顏色和透明度。投影可能要花很多時間來調(diào)整，這就是為什么要在深入設(shè)計之前準(zhǔn)備它們。提前備好投影組件(使用與顏色相同的方法)，然后在整個設(shè)計過程中應(yīng)用它們。

此外，還要注意將使用的元素的所有其他屬性確定好，如角半徑、透明度和顏色梯度。

陰影樣式的一個例子

留白

適當(dāng)?shù)卣{(diào)整留白很重要。不管是從外部(空白)還是從內(nèi)部(填充)調(diào)整元素，都應(yīng)該再次依賴于魔術(shù)數(shù)字8，將偏移量增加8像素(小的元素增加4像素)。與字體大小一樣，間距越大，增量就必須越大(同樣，最好預(yù)先定義這些增量)。

留白

總結(jié)

為了使設(shè)計清晰一致，在整個過程中定義一些邊界和清晰的流程。

在設(shè)計每一個元素時，請記住以下幾點(diǎn):

• 看看是否已經(jīng)在設(shè)計中使用了它。如果是，多重復(fù)利用。
• 遵循水平和垂直的節(jié)奏，并使用在開始時定義的步驟調(diào)整元素的大小。
• 避免復(fù)雜的決定和無休止的像素大戰(zhàn)，需要有一個適當(dāng)?shù)捏w系。
• 不要兩次創(chuàng)建相同的元素。如果設(shè)計中有秩序，你的工作將會更好、更有效率，設(shè)計將能夠更快地迭代，跟開發(fā)的對接也會更加順暢。開發(fā)將根據(jù)你做的設(shè)計風(fēng)格提前設(shè)置好變量，所以要清楚地定義它們。最后將得到一個干凈的設(shè)計，開發(fā)也能寫出更好、更可持續(xù)的代碼。每個人都會很愉快這個流程。