我們談?wù)摰倪@些設(shè)計規(guī)則適用于那些未受過藝術(shù)教育的人，只要把握好這幾點，同樣能夠設(shè)計出簡潔干凈的界面。

規(guī)則如下：

1.讓光影自然

2.層次優(yōu)先

3.充分留白

4.學習在圖片上添加文字

5.使用多種文本樣式

6.選擇適合的字體

7.像藝術(shù)家一樣尋找靈感

第四條：學習在圖片上添加文字

要做到完美的圖文并茂，我只有五條好上手的方法，現(xiàn)在都教給你。另外，還可以再送你一條小竅門。

如果你想成為一個優(yōu)秀的UI設(shè)計師，你肯定得學會如何在圖片上添加文字，并且它們變得更加吸引人。關(guān)于這一點，每一個優(yōu)秀UI設(shè)計師都可以做得非常好，但是一般的UI設(shè)計師就差一點——或者根本就做不到。也許你做的真的很差，但是你掌握了我教你的這些方法之后，你就會有很大的進步。

方法一：直接把文字放在圖片上

雖然我很不喜歡這種簡單粗暴的方法，但是它確實是一個在技術(shù)上很容易實現(xiàn)的方法，而且看上去也不賴。

Otter Surfboards.看起來時尚，值得收藏，但是閱讀上有困難。

這種方法有必要的使用條件：

1.圖片要暗，而且不能有太多的對比色。

2.文字必須是白色的——我估計你可能會努力地找同樣簡潔的反例，但是這種例子真的太少了，真的。

3.給和屏幕一樣大小的圖片上加文字的時候，應(yīng)該把文字居中放置，這樣可以保證它的易讀性。

學會了嗎？非常好。千萬別擅自更改規(guī)則，現(xiàn)在你已經(jīng)入門了。

我做專業(yè)項目的時候，從來不會像這樣簡單粗暴的直接把文字擺在圖片上，即使它真的是一個非常好操作的方法。也就是說，還可以有更好的方法，但是會更難。

Aquatilis——非常值得參考的網(wǎng)站

方法二：給圖片加一個通透的顏色圖層

最早在圖片上加文字的方法應(yīng)該就是給圖片加一個通透的顏色圖層了。如果原始圖片太亮了，你可以試著給整個圖片加一個半透明的黑色圖層。

這有一個流行的例子以供參考

Upstart網(wǎng)站在圖片上面加了一層35%不透明度的黑色圖層。

如果你使用Firebug（一款火狐瀏覽器插件）移除黑色覆蓋層，你可以看到原始的圖片非常亮，而且圖片和文字在顏色方面有太多沖突，這些都讓文字變得很難閱讀。但是如果加上覆蓋層，一切的問題就都消失了。

這個方法對小圖同樣好用。

來自于charity:water網(wǎng)站的小圖

另外，雖然黑色的覆蓋層非常好用，適用的圖片范圍也很廣，但是你也可以嘗試去使用其他顏色的覆蓋層。

方法三：給文字加一個底色塊

這個方法非常簡單也非常好操作——在一個大小適中的黑色矩形框上添加白色的文本。如果你的覆蓋層和文本顏色的對比度足夠，那你也可以直接在圖片的下方添加文字。

Miguel Oliva Marquez設(shè)計的Modern Honolulu在iPhone上的客戶端。

你也可以加點顏色，但是要加的恰當。

Mark Conlan設(shè)計的Now in pink

方法四：模糊圖片

這是一個給圖片上添加文字，并且能夠保證可讀性的一個另辟蹊徑的好方法——模糊圖片的下半部分。

Snapguide上不僅有大片的模糊覆蓋層，而且放置文字的地方同樣降低了明度。

 OS7把背景模糊了，Visita系統(tǒng)也一樣，效果都很好。

你也可以把照片視覺焦點之外的部分模糊掉。但是要注意，這個方法不夠靈活。如果你的圖片改變了，記得確保你的文本不在模糊的范圍之內(nèi)。

Teehan+Lax

嘗試閱讀下面的副標題

方法五：漸變到黑色

當你把你的圖片從上到下巧妙的漸變到黑色之后，可以在黑色的下方加上文字。這是一個非常具有獨創(chuàng)性的方法。據(jù)我所知，在Medium上之前沒有人使用過這種方法，我也是才知道這種方法。

對于非專業(yè)的旁觀者來說，這些Medium作品都是把一些白色的文本貼在畫面上，對于這種說法，我只能說——大錯特錯。它們從中間部分（黑色不透明度0%）到底部（黑色不透明度大概為20%）都有一些非常精細的、輕微的傾斜。

很難發(fā)現(xiàn)，但是真的存在，而且確實能提高易讀性。

在Medium作品合集縮略圖中同樣可以發(fā)現(xiàn)文本有很輕的投影，這同樣可以增加文字的可讀性——這些設(shè)計師真的非常棒！

因為是使用顯示屏觀看，所以Medium可以為任何圖片上的任何文字分層，這就讓文字的可讀性有了很大的提高。

哦，還有一點是——為什么圖片要漸變到黑色呢？想知道答案嗎？去看準則（上）里第一條規(guī)則中的——光總是從上投射到下吧。為了讓我們看起來覺得自然，圖片的下部應(yīng)該稍暗一點，就像我們在生活中所看到的一切事物一樣。

再多說一句：模糊和漸變搭配使用效果更好。

SnapGuide就把模糊和漸變搭配使用了，看，效果多好，就像沒有覆蓋層。

小竅門：選擇好的背景布

為什么Elastica博客上方的大標題在每一張不同的圖片上可讀性都這么強？因為這些圖片都有共同的特點：

圖片明度不是特別低

圖片內(nèi)容閱讀方向區(qū)別于普通的縱向，變成了橫向

你好像還是沒有明白為什么它的文本可讀性這么強，那么來看看例子吧：

關(guān)鍵詞是：背景布

背景布是讓光變的柔和的攝影工具。現(xiàn)在也是視覺傳達設(shè)計中一種讓圖片柔和，以便凸顯文本的方法。

如果我們的瀏覽器可視范圍比Elastica博客的主頁面要寬，那么我們就可以清晰地看到背景布。

標題“145,000 Salesforce Users Come out to Celebrate...”放在首屏中一個像陰影的盒子中。對比于藍色實底的背景，它顯得非常突出，比放在橫向的照片上更突出。

這可能是最微妙的提高文本在圖片上可讀性的方法了，我之前從來沒有在除了這里之外的任何地方看到過，因為它實在太具有技巧性了。把它記下來吧，因為往往在你需要它的時候，你總是想不起來。

第五條：讓文本之間有對比

想讓文本更大、更顯眼，還想設(shè)計出恰到好處的時尚感，這是很難的。

就我而言，UI設(shè)計中最難的就是設(shè)計文本，因為你越熟悉的東西越難完全掌控。UI設(shè)計老手都會通過設(shè)計以下文本樣式來設(shè)計文本：

字號（很大或者很?。?/p>

顏色（很強或者很弱的對比；明亮的顏色更吸引目光）

字體粗細（很粗或者很細）

大寫（全部小寫、全部大寫，或者首字母大寫）

斜體

字母間距（漢字為字符間距）

邊界（從本質(zhì)來說應(yīng)該不算是文本樣式，但是用在段落之間可以用來吸引注意力）

圖中的元素有彩色的實線條，大寫單詞以及間距——來自于Workjon的孩子。當然，Workjon本人的設(shè)計也非常棒。

還有一些方法也可以吸引讀者目光但是并不經(jīng)常使用：

下劃線：是如今連接句子的慣用方法，但是我認為沒必要特別去使用

文本背景色：并不常用，但是37signals網(wǎng)站曾經(jīng)把它作為鏈接樣式使用過一段時間。

刪除線：上個世紀九十年代的CSS文本裝飾樣式，早就淘汰了。

根據(jù)我個人的經(jīng)驗來說，當我有一段待設(shè)計的文本段落，我不會馬上去套一些“好”的樣式。這并不是因為我不記得這些所謂的規(guī)則，只是我覺得更好的成長方法是不斷地去嘗試、比較，直到你真正的把規(guī)則了然于胸，操作起來得心應(yīng)手。

主次分明

你可以把所有的文本樣式歸為以下兩類：

主要的文本：大、粗、大寫等等

陪襯的文本：小、少對比、小間距等等

我們可以把這兩類文本稱為主文本和輔助文本——這是設(shè)計師最喜歡的形容詞。我們不會說它們是視覺重點，因為它真的很單調(diào)。

以學習一下hugeinc網(wǎng)站標題的例子

很多主文本就像這個“Material Design”標題一樣，很大，對比很強烈而且非常粗。

看它下面的文本，和標題相反，非常的不明顯——小、低對比度而且很纖細。

現(xiàn)在要說最重要的規(guī)則了

頁面的主標題是唯一必須非常顯眼的文本，而頁面里其他的文本都需要主文本和輔助文本的搭配。

（如果某個網(wǎng)站元素需要加以強調(diào)，那么可以使用用對比來呈現(xiàn)。）這樣可以防止元素過大或者過小，但是同時要保證所有元素的可讀性。

一個視覺平衡的例子

Blu Homes網(wǎng)站設(shè)計無可挑剔，有一些大標題，但是要強調(diào)的文字都是小寫——強調(diào)的有點過頭了。

這些Blu Homes網(wǎng)站上的數(shù)字因為它們的大小、顏色和排列的突出吸引了用戶的視線，但是注意相比于深灰色的那些字來說，它們使用了看起來似乎輕描淡寫的輕巧的字體、弱對比的顏色。

那些數(shù)字下面的小標簽雖然字號又小顏色又淺，但同時使用了大寫全拼還加粗了字體。

這都是平衡的方法

Contentsmagazine.com

雜志目錄是學習文本對比很好的例子

1.文章的標題是主要的部分，也是在頁面中是唯一不使用斜體的元素。這種情況下，不使用斜體反而更容易吸引讀者的注意（尤其是還加粗加大了文字）。

2.標題下面的作者署名被加粗了，和“by”相比更加顯眼。

3.字號最小對比最低的“ALREADY OUT”不走尋常路，它的大寫全拼、字符間距以及空曠的邊界都讓你一眼就能捕捉到它。

選擇狀態(tài)和懸停狀態(tài)的樣式

文本的選擇狀態(tài)樣式和懸停狀態(tài)樣式的設(shè)計，同樣是文本排版&設(shè)計的重要一環(huán)但是更有難度。

通常來說，改變字號、字體或者筆畫粗細等等都會讓文本變得突出，會讓文本看起來帶有懸停選取效果。

那么哪些可以幫助到你呢？

1.文本顏色

2.文本背景顏色

3.陰影

4.下劃線

5.簡單的動畫：上升、下降等等

一個不變的建議：保證背景稍暗的情況下可以嘗試文字彩色和白色的轉(zhuǎn)換。

挑選的圖標無論是有色還是白色，都和背景保持高度對比。

我認為設(shè)計文本是非常難的，所以每當我覺得“或許這個文本已經(jīng)足夠美觀”的時候，其實都是不對的。我應(yīng)該讓它變得更好，為了變得更好，我必須繼續(xù)嘗試。

我可以告訴你：如果你的文本不好看，別灰心，當你以后設(shè)計能力提升的時候，自然可以將它設(shè)計的更好。但是，前提是你得變得更好。

第六條：使用適合的字體

去使用一些不錯的字體吧

注意：在這條規(guī)則里沒有固定標準，我只是告訴你一些你可以下載來用的好的字體。

在網(wǎng)頁設(shè)計中，網(wǎng)站為了追求個人，會使用有特色的字體。但是對于大多數(shù)UI設(shè)計來說，你只是想把它們做的簡潔。為了達到這個目的，小伙伴們，去下載Wisdom Script字體吧。

下面我只推薦些免費字體。為什么呢？這樣對于新手來說，不花一分錢就可以獲得大量字體用以練習。

我推薦大家立即下載，那么現(xiàn)在就來在你的視覺傳達設(shè)計中感受一下它吧。

電腦里字體分類便于你查看你下載的字體

Ubuntu

Ubuntu字體，字母加粗了一點點，比一些App里面的字體稍微突出一點?？梢栽贕oogle Fonts中找到。

Open Sans

Open Sans非常易讀而且很流行的字體，非常適合文案主體。可以在Google Fonts找到。

Bebas Neue

Bebas Neue字體，大寫全拼的話非常適合標題?？梢栽贔ontfabric中找到，它還有非常棒的“Bebas Neue in use”展示區(qū)。

Montserrat

Montserrat只有兩倍寬，但是在“好”的標準之內(nèi)。相比于Gotham和Proxima Nova來說的確是最好的免費字體，但是遠不及這兩個字體。可以在Google Fonts上下載。

Raleway

Raleway很適合主標題，但是對正文內(nèi)容來說有點大。文字確實很輕盈。

Cabin

Cabin可以在Google Fonts上找到。

Lato

Lato可以在Google Fonts上找到。

PT Sans

PT Sans可以在Google Fonts上找到。

Entypo Socia

Entypo Socia是一種圖標字體，是的，如果你用了它，你會發(fā)現(xiàn)它們是你非常熟悉的圖標，而且都是非常有含金量的圖標。你是不是通過改變顏色和大小等方面感覺像再設(shè)計了這些Logo？這個字體你可以從Entypo.com上找到。

給你提供一些資源：

Beautiful Google web fonts：這是一個非常好的展示Google Fonts里好看字體的網(wǎng)站。我經(jīng)常去這個簡單的頁面汲取靈感。

FontSquirrel：一個免費的搜集優(yōu)秀商業(yè)用途字體的網(wǎng)站。

Typekit：如果你使用Adobe Creative Cloud（也就是PS.AI等等 ），那么你可以在這里免費得到很多好的字體。當然，Proxima Nova也在里面。

第七條：像藝術(shù)家一樣尋找靈感

我第一次嘗試設(shè)計App元素（按鈕、表格、圖表、彈出框等等）的時候，我意識到，對于如何將它們設(shè)計的好看，我知道的太少了。

但幸運的是，我還沒有到不得不設(shè)計新UI元素的時候。這意味著我可以多看看別人是怎么做的，從好的里面再看更好的。

哪里有最好的呢？我這里有一些非常實用的資源網(wǎng)站供你參考：

1.Dribbble

這是一個邀請制的網(wǎng)站，上面展示的作品都出自非常優(yōu)秀的設(shè)計師之手。這個網(wǎng)站可以說是UI產(chǎn)品展示網(wǎng)站中的翹楚。你想要的幾乎都可以在這里找到。

事實上，你也可以在這個網(wǎng)站上關(guān)注我。這里還有一些非常優(yōu)秀的設(shè)計師推薦給你：

Victor Erixon：他的作品有非常鮮明的個人特色——好看、干凈、扁平。他有三年的設(shè)計齡，現(xiàn)在已經(jīng)是這個圈子里的頂級設(shè)計師了。

Focus Lab：這些小伙伴們是“Dribbble名人”，他們的作品風格多變、設(shè)計一流，在圈子里享有盛譽。

Cosmin Cpitanu：一個非常棒的流行設(shè)計師。他的作品看上去非常具有未來感但是沒有過分裝飾，在顏色運用的非常好。但是他沒有專注在UX上——這也是Dribbble上對他的批評。

分別是Victor Erixon,Focus Lab和Cosmin Capitanu的作品

2.Flat UI Pinboard

我之前完全不知道Warmarc是誰，但是他的手機UI界面給了我耳目一新的感覺。

3.Pttrns

一個移動端App的指導性截圖。它的優(yōu)點是整體在UX的部分非常統(tǒng)一，這讓你能夠非?？斓恼业秸枰捻撁?。這是它的一些登陸頁面、用戶作品集、搜索結(jié)果頁面等等。

我堅定的相信每一個藝術(shù)家在他們足夠優(yōu)秀之前都是一個模仿者。在你臨摹學習足夠了之后，你就可以去探索你自己的風格了。但在這之前，就像他們一樣去臨摹吧。

還有，這個章節(jié)的靈感來源，也就是標題“像藝術(shù)家一樣尋找靈感”是從我之前讀到過的《Eponymous Book》中摘錄的，原因是因為我覺得這句話可以概括這一章節(jié)的中心思想。

總結(jié)

我寫這篇文章是因為在一段時間之前我也喜歡看這種的文章，希望能對你有幫助。如果你是一個UX設(shè)計師，你可以在你畫好線框圖之后就做一個模型出來。如果你是一個開發(fā)人員，把你的下一個項目做的好看一點。我不奢望你的界面設(shè)計的水平一日千里，你只要去觀察、去模仿，然后還能給你的朋友一點建議就足夠了。

不管成為設(shè)計師多少年，還是應(yīng)該一直學習設(shè)計。

謝謝