如果你是一名UX設(shè)計(jì)師，請?jiān)诶L制線框后繪制一個漂亮的模型；如果你是一個開發(fā)者，那就把你的下一個項(xiàng)目做成是好看的。

前言

今天這篇文章是《非科班如何做好UI設(shè)計(jì)的7大規(guī)則》第二部分，第一篇《非科班如何做好UI設(shè)計(jì)的7大規(guī)則（Part 1）》。

原文來自西雅圖的獨(dú)立UI/UX設(shè)計(jì)師Erik D. Kennedy，他在用戶體驗(yàn)和視覺設(shè)計(jì)方面有很豐富的經(jīng)驗(yàn)。同時他還運(yùn)營了一個設(shè)計(jì)網(wǎng)站，Learn UI Design，他會在上面分享自己學(xué)習(xí)的心得，也會發(fā)布一些視頻教程。有興趣的朋友可以關(guān)注一波。

因?yàn)槭怯⑽募炎?，能力有限，所以找了英語專業(yè)的小伙伴來幫忙，如果有發(fā)現(xiàn)什么紕漏，emmmm，我們改……

本文是系列文章的第二部分，建議你先看看第一部分的內(nèi)容，第一篇《非科班如何做好UI設(shè)計(jì)的7大規(guī)則（Part 1）》。

我們正在討論的是設(shè)計(jì)簡潔干凈UI的規(guī)則：

1. 光來自天空（Part 1）；
2. 黑與白第一（Part 1）；
3. 加倍你的留白（Part 1）；
4. 了解在圖像上疊加文本的方法；
5. 使文本彈出和不彈出；
6. 只使用好的字體；
7. 像藝術(shù)家一樣竊??；

規(guī)則4：了解在圖像上疊加文本的方法

如果你的目標(biāo)是成為一名優(yōu)秀的設(shè)計(jì)師，那您必須學(xué)習(xí)如何以吸引人的方式，將文本放在圖像上。

這是每一個優(yōu)秀的設(shè)計(jì)師都應(yīng)該做好的事情，當(dāng)然，這也是很多初級設(shè)計(jì)師都會遇到的問題！

方法1：直接將文本應(yīng)用與圖像

什么？這也叫一種方法？

不得不說，這是最基本也是最有效的方法之一，這也是為什么我把它放在第一條的原因。

Otter Surfboards.嘻哈和instagrammy，但是有點(diǎn)難以閱讀

在使用此方法需要主意的問題：

• 圖像和文本有一定的明暗對比度，一般情況下，圖像應(yīng)該是整體暗色調(diào)的，文字以白色為主;
• 在多種屏幕尺寸下，都保證文字都可讀性；

Aquatilis網(wǎng)站 – 絕對值得一游。

我曾經(jīng)在很多項(xiàng)目里面都使用了這個方法去添加文字，它也能夠給觀這呈現(xiàn)一個很酷都畫面，但在實(shí)際使用過程中，也要控制使用量。

方法2：覆蓋整個圖像

將文本放在圖像上最簡單的方法就是直接覆蓋圖像。如果原始圖像顏色不夠深，則可以用半透明但黑色覆蓋整個圖像。

Upstart網(wǎng)站擁有35％不透明黑色濾鏡。

如果你看到這個原圖的色調(diào)，你會發(fā)現(xiàn)原始圖像太亮并且對比度太高，使得文本難以辨認(rèn)。但是覆蓋一個黑色的半透明圖層，那就不存在這個問題了。

此方法也可以適用于縮略圖或小圖像。

來自慈善機(jī)構(gòu)的網(wǎng)站縮略圖：water site

盡管黑色覆蓋層是最簡單和最通用的方法，有時候使用彩色覆蓋層，也會得到意想不到的效果。

方法3：文本框

這個方法更簡單，也會更可靠。

使用一個溫和透明的黑色矩形，在上面添加白色的文字。如果疊加層不夠透明，不管下面是什么圖像，都可以保證文字的清晰可讀。

MiguelOlivaMárquez的現(xiàn)代檀香山iPhone概念

當(dāng)然也可以使用一些顏色，只是在選擇色彩時候要有依據(jù)。

MarkConlan

方法4：模糊圖像

當(dāng)我們把底層圖像模糊處理之后，上面當(dāng)文本清晰度令人驚訝。

Snapguide中的大量模糊疊加。請注意，模糊區(qū)域也變暗。

蘋果從iOS 7開始的背景變得模糊不清，ie瀏覽器也使用它起到了很大的作用。

還可以直接在照片的非聚焦區(qū)域作為模糊圖層部分，這對圖像和版式布局的切合度要求更高。

Teehan + Lax

我們要保證文本始終位于模糊之上，這樣，你就可以很清晰的閱讀文字部分了。

方法5：底圖褪色

把底層圖像的某部分巧妙的淡化為深色，然后在其上面放置白色文字。這是一個巧妙的辦法，在很多網(wǎng)站都有應(yīng)用這個方法。

對于上面的圖像，你可能會覺得就是直接在圖像上放置了白色的文字，其實(shí)不然，你仔細(xì)看，你會發(fā)現(xiàn)其實(shí)是一個由0%不透明度到20%不透明度漸變的矩形框。

這個操作非常的微妙，在不影響整體美觀但前提下，確保了易讀性。

規(guī)則5：使文本彈出和不彈出

這里的彈出和不彈出指的是文本的吸引度，也就是如何讓我們想要讓觀者看到的部分突出，其它部分層級降低。

文本的表現(xiàn)在很多地方都以對比的形式來呈現(xiàn)。只要你接觸過設(shè)計(jì)，你就一定知道如何來控制文本的層級：

• 尺寸對比（更大或更小尺寸）
• 顏色對比（明度對比最為顯眼）
• 文字字重（粗字體和纖細(xì)字體）
• 字間距（通過距離來區(qū)分塊）

當(dāng)然還有一些其它的，如文本斜體、邊距、下劃線等等。

我們想要突出或者降低某個部分視覺層級，往往不是通過某一種樣式來達(dá)到的，都是多種樣式的組合表現(xiàn)。

圖片中頁腳部分的文字體積小、對比度低、字體重量就顯得不那么大。

Blu Homes是一個設(shè)計(jì)的無可挑剔的網(wǎng)站，它有一些很棒的標(biāo)題，但強(qiáng)調(diào)的字體是小寫的。如果此處用大寫字體，則過分強(qiáng)調(diào)看起來過于強(qiáng)烈。

規(guī)則6：只使用好的字體

在設(shè)計(jì)過程中，字體的選擇有時候足以影響到整個畫面的效果，而我們的策略就是，找到好的字體，只使用它們。

這個部分沒有什么要研究字體的好壞，只是列出一些不錯的免費(fèi)字體，供大家在設(shè)計(jì)的時候選擇。

設(shè)計(jì)一些具有非常獨(dú)特個性的網(wǎng)站時，可以使用一些非常不同的字體，但對于大多數(shù)UI設(shè)計(jì)來說，只需要簡潔明了的東西。

Ubuntu（上圖）。 很多字重， 比某些應(yīng)用程序所需的更有特色。

OpenSans（上圖）。 易于閱讀，流行的字體。 適合身體復(fù)印。

Bebas Neue（上圖）。 很棒的字體，全部大寫。

Montserrat（上圖）。 只有兩個字重，但足以做到層次風(fēng)割。

Raleway（上圖）。 常用于標(biāo)題部分，對于正文可能有點(diǎn)多。

Cabin（上圖）。

Lato（上圖）。

PT Sans（上圖）。

規(guī)則7：像藝術(shù)家一樣竊取

在我第一次坐下來嘗試去設(shè)計(jì)一些應(yīng)用元素的時候，一個按鈕、一個表單、一個圖標(biāo)，無論如何，這是我第一次意識到，我對如何使該元素看起來更好知之甚少。

但是幸運(yùn)的是，我還沒有發(fā)明任何新的UI元素。這意味著我總能看到其他人如何做到這一點(diǎn)，并且從最佳狀態(tài)中挑選出來。

但是如何去選呢？以下是我在為客戶設(shè)計(jì)的時候發(fā)現(xiàn)的最有用的資源：

1. Dribbble

這個一個僅限邀請的“為設(shè)計(jì)師展示和講述”的網(wǎng)站，你可以在這里找到幾乎所有東西的好例子。

Work byVictor Erixon,Focus Lab, andCosmin Capitanu, respectively

事實(shí)上，你可以在這里看到我所有的工作內(nèi)容。以下是推薦您可以關(guān)注的人：

@Victor Erixon。擁有非常鮮明的個人風(fēng)格，而且非常棒。美觀，干凈，扁平的設(shè)計(jì)。他已經(jīng)是7年的設(shè)計(jì)師，并且已經(jīng)成為游戲的佼佼者。

@Focus Lab.。這些家伙是“聰明的名人”，他們的工作不辜負(fù)聲譽(yù)，真的很多樣化，永遠(yuǎn)是一流的。

@Cosmin Capitanu。一個很棒的設(shè)計(jì)師。他制作的東西看起來很瘋狂，沒有花哨的未來感。顏色真的很好。

2. Pinterest

我不知道“warmarc”是誰，但他設(shè)計(jì)的電話用戶界面的樣式圖，對于我的某些工作項(xiàng)目真的非常有用。

3. Pttrns

下面是一個移動應(yīng)用截圖的目錄。關(guān)于Pttrns的好處是整個網(wǎng)站布局統(tǒng)一，這使得它每一個頁面都處理的非常好，無論是登錄頁面，用戶配置文件，搜索結(jié)果等。

我堅(jiān)信每個藝術(shù)家都應(yīng)該成為一只鸚鵡，直到他們懂得如何去模仿最好的。然后去尋找自己的風(fēng)格，發(fā)明新的設(shè)計(jì)趨勢。在此之前，讓我們像盜賊一樣去“竊取”好的創(chuàng)意。

小結(jié)

我寫這篇是因?yàn)槲蚁Ｍ夷軌蛟诤茉缰翱吹竭@些，我希望它對你有所幫助。

• 如果您是一名UX設(shè)計(jì)師，請?jiān)诶L制線框后繪制一個漂亮的模型。
• 如果你是一個開發(fā)者，那就把你的下一個項(xiàng)目做成是好看的。

我不希望UI看起來像是需要神奇的藝術(shù)學(xué)校技能才能做得體面。我們只是觀察，模仿，并告訴你的朋友怎么去使用。無論如何，這正是我迄今為止所學(xué)到的，而且我始終是初學(xué)者。

如果你還在關(guān)注這我，你已經(jīng)閱讀了兩篇總共超過5000字的文章，并看過很多插圖和截圖。但我還沒停止，所以還沒結(jié)束。

相關(guān)閱讀

《非科班如何做好UI設(shè)計(jì)的7大規(guī)則（Part 1）》

原文作者：Erik D. Kennedy

原文鏈接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

本文由 @設(shè)計(jì)師日記 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于CC0協(xié)議。