大家翹首以盼的下篇新鮮出爐啦！不過，推薦你先看一下上篇喲《設計優雅UI的七條準則（上）》。
我們談論的這些設計規則適用於那些未受過藝術教育的人，只要把握好這幾點，同樣能夠設計出簡潔乾淨的介面。
規則如下：
1.讓光影自然
2.層次優先
3.充分留白
4.學習在圖片上新增文字
5.使用多種文字樣式
6.選擇適合的字型
7.像藝術家一樣尋找靈感
第四條：學習在圖片上新增文字
要做到完美的圖文並茂，我只有五條好上手的方法，現在都教給你。另外，還可以再送你一條小竅門。
如果你想成為一個優秀的UI設計師，你肯定得學會如何在圖片上新增文字，並且它們變得更加吸引人。關於這一點，每一個優秀UI設計師都可以做得非常好，但是一般的UI設計師就差一點——或者根本就做不到。也許你做的真的很差，但是你掌握了我教你的這些方法之後，你就會有很大的進步。
方法一：直接把文字放在圖片上
雖然我很不喜歡這種簡單粗暴的方法，但是它確實是一個在技術上很容易實現的方法，而且看上去也不賴。
Otter Surfboards.看起來時尚，值得收藏，但是閱讀上有困難。
這種方法有必要的使用條件：
1.圖片要暗，而且不能有太多的對比色。
2.文字必須是白色的——我估計你可能會努力地找同樣簡潔的反例，但是這種例子真的太少了，真的。
3.給和螢幕一樣大小的圖片上加文字的時候，應該把文字居中放置，這樣可以保證它的易讀性。
學會了嗎？非常好。千萬別擅自更改規則，現在你已經入門了。
我做專業專案的時候，從來不會像這樣簡單粗暴的直接把文字擺在圖片上，即使它真的是一個非常好操作的方法。也就是說，還可以有更好的方法，但是會更難。
Aquatilis——非常值得參考的網站
方法二：給圖片加一個通透的顏色圖層
最早在圖片上加文字的方法應該就是給圖片加一個通透的顏色圖層了。如果原始圖片太亮了，你可以試著給整個圖片加一個半透明的黑色圖層。
這有一個流行的例子以供參考
Upstart網站在圖片上面加了一層35%不透明度的黑色圖層。
如果你使用Firebug（一款火狐瀏覽器外掛）移除黑色覆蓋層，你可以看到原始的圖片非常亮，而且圖片和文字在顏色方面有太多衝突，這些都讓文字變得很難閱讀。但是如果加上覆蓋層，一切的問題就都消失了。
這個方法對小圖同樣好用。
來自於charity:water網站的小圖
另外，雖然黑色的覆蓋層非常好用，適用的圖片範圍也很廣，但是你也可以嘗試去使用其他顏色的覆蓋層。
方法三：給文字加一個底色塊
這個方法非常簡單也非常好操作——在一個大小適中的黑色矩形框上新增白色的文字。如果你的覆蓋層和文字顏色的對比度足夠，那你也可以直接在圖片的下方新增文字。
Miguel Oliva Marquez設計的Modern Honolulu在iPhone上的客戶端。
你也可以加點顏色，但是要加的恰當。
Mark Conlan設計的Now in pink
方法四：模糊圖片
這是一個給圖片上新增文字，並且能夠保證可讀性的一個另闢蹊徑的好方法——模糊圖片的下半部分。
Snapguide上不僅有大片的模糊覆蓋層，而且放置文字的地方同樣降低了明度。
OS7把背景模糊了，Visita系統也一樣，效果都很好。
你也可以把照片視覺焦點之外的部分模糊掉。但是要注意，這個方法不夠靈活。如果你的圖片改變了，記得確保你的文字不在模糊的範圍之內。
Teehan+Lax
嘗試閱讀下面的副標題
方法五：漸變到黑色
當你把你的圖片從上到下巧妙的漸變到黑色之後，可以在黑色的下方加上文字。這是一個非常具有獨創性的方法。據我所知，在Medium上之前沒有人使用過這種方法，我也是才知道這種方法。
對於非專業的旁觀者來說，這些Medium作品都是把一些白色的文字貼在畫面上，對於這種說法，我只能說——大錯特錯。它們從中間部分（黑色不透明度0%）到底部（黑色不透明度大概為20%）都有一些非常精細的、輕微的傾斜。
很難發現，但是真的存在，而且確實能提高易讀性。
在Medium作品合集縮圖中同樣可以發現文字有很輕的投影，這同樣可以增加文字的可讀性——這些設計師真的非常棒！
因為是使用螢幕觀看，所以Medium可以為任何圖片上的任何文字分層，這就讓文字的可讀性有了很大的提高。
哦，還有一點是——為什麼圖片要漸變到黑色呢？想知道答案嗎？去看準則（上）裡第一條規則中的——光總是從上投射到下吧。為了讓我們看起來覺得自然，圖片的下部應該稍暗一點，就像我們在生活中所看到的一切事物一樣。
再多說一句：模糊和漸變搭配使用效果更好。
SnapGuide就把模糊和漸變搭配使用了，看，效果多好，就像沒有覆蓋層。
小竅門：選擇好的背景布
為什麼Elastica部落格上方的大標題在每一張不同的圖片上可讀性都這麼強？因為這些圖片都有共同的特點：
圖片明度不是特別低
圖片內容閱讀方向區別於普通的縱向，變成了橫向
你好像還是沒有明白為什麼它的文字可讀性這麼強，那麼來看看例子吧：
關鍵詞是：背景布
背景布是讓光變的柔和的攝影工具。現在也是視覺傳達設計中一種讓圖片柔和，以便凸顯文字的方法。
如果我們的瀏覽器可視範圍比Elastica部落格的主頁面要寬，那麼我們就可以清晰地看到背景布。
標題“145,000 Salesforce Users Come out to Celebrate…”放在首屏中一個像陰影的盒子中。對比於藍色實底的背景，它顯得非常突出，比放在橫向的照片上更突出。
這可能是最微妙的提高文字在圖片上可讀性的方法了，我之前從來沒有在除了這裡之外的任何地方看到過，因為它實在太具有技巧性了。把它記下來吧，因為往往在你需要它的時候，你總是想不起來。
第五條：讓文字之間有對比
想讓文字更大、更顯眼，還想設計出恰到好處的時尚感，這是很難的。
就我而言，UI設計中最難的就是設計文字，因為你越熟悉的東西越難完全掌控。UI設計老手都會通過設計以下文字樣式來設計文字：
字號（很大或者很小）
顏色（很強或者很弱的對比；明亮的顏色更吸引目光）
字型粗細（很粗或者很細）
大寫（全部小寫、全部大寫，或者首字母大寫）
斜體
字母間距（漢字為字元間距）
邊界（從本質來說應該不算是文字樣式，但是用在段落之間可以用來吸引注意力）
圖中的元素有彩色的實線條，大寫單詞以及間距——來自於Workjon的孩子。當然，Workjon本人的設計也非常棒。
還有一些方法也可以吸引讀者目光但是並不經常使用：
下劃線：是如今連線句子的慣用方法，但是我認為沒必要特別去使用
文字背景色：並不常用，但是37signals網站曾經把它作為連結樣式使用過一段時間。
刪除線：上個世紀九十年代的CSS文字裝飾樣式，早就淘汰了。
根據我個人的經驗來說，當我有一段待設計的文字段落，我不會馬上去套一些“好”的樣式。這並不是因為我不記得這些所謂的規則，只是我覺得更好的成長方法是不斷地去嘗試、比較，直到你真正的把規則瞭然於胸，操作起來得心應手。
主次分明
你可以把所有的文字樣式歸為以下兩類：
主要的文字：大、粗、大寫等等
陪襯的文字：小、少對比、小間距等等
我們可以把這兩類文字稱為主文字和輔助文字——這是設計師最喜歡的形容詞。我們不會說它們是視覺重點，因為它真的很單調。
以學習一下hugeinc網站標題的例子
很多主文字就像這個“Material Design”標題一樣，很大，對比很強烈而且非常粗。
看它下面的文字，和標題相反，非常的不明顯——小、低對比度而且很纖細。
現在要說最重要的規則了
頁面的主標題是唯一必須非常顯眼的文字，而頁面裡其他的文字都需要主文字和輔助文字的搭配。
（如果某個網站元素需要加以強調，那麼可以使用用對比來呈現。）這樣可以防止元素過大或者過小，但是同時要保證所有元素的可讀性。
一個視覺平衡的例子
Blu Homes網站設計無可挑剔，有一些大標題，但是要強調的文字都是小寫——強調的有點過頭了。
這些Blu Homes網站上的數字因為它們的大小、顏色和排列的突出吸引了使用者的視線，但是注意相比於深灰色的那些字來說，它們使用了看起來似乎輕描淡寫的輕巧的字型、弱對比的顏色。
那些數字下面的小標籤雖然字號又小顏色又淺，但同時使用了大寫全拼還加粗了字型。
這都是平衡的方法
Contentsmagazine.com
雜誌目錄是學習文字對比很好的例子
1.文章的標題是主要的部分，也是在頁面中是唯一不使用斜體的元素。這種情況下，不使用斜體反而更容易吸引讀者的注意（尤其是還加粗加大了文字）。
2.標題下面的作者署名被加粗了，和“by”相比更加顯眼。
3.字號最小對比最低的“ALREADY OUT”不走尋常路，它的大寫全拼、字元間距以及空曠的邊界都讓你一眼就能捕捉到它。
選擇狀態和懸停狀態的樣式
文字的選擇狀態樣式和懸停狀態樣式的設計，同樣是文字排版&設計的重要一環但是更有難度。
通常來說，改變字號、字型或者筆畫粗細等等都會讓文字變得突出，會讓文字看起來帶有懸停選取效果。
那麼哪些可以幫助到你呢？
1.文字顏色
2.文字背景顏色
3.陰影
4.下劃線
5.簡單的動畫：上升、下降等等
一個不變的建議：保證背景稍暗的情況下可以嘗試文字彩色和白色的轉換。
挑選的圖示無論是有色還是白色，都和背景保持高度對比。
我認為設計文字是非常難的，所以每當我覺得“或許這個文字已經足夠美觀”的時候，其實都是不對的。我應該讓它變得更好，為了變得更好，我必須繼續嘗試。
我可以告訴你：如果你的文字不好看，別灰心，當你以後設計能力提升的時候，自然可以將它設計的更好。但是，前提是你得變得更好。
第六條：使用適合的字型
去使用一些不錯的字型吧
注意：在這條規則裡沒有固定標準，我只是告訴你一些你可以下載來用的好的字型。
在網頁設計中，網站為了追求個人，會使用有特色的字型。但是對於大多數UI設計來說，你只是想把它們做的簡潔。為了達到這個目的，小夥伴們，去下載Wisdom Script字型吧。
下面我只推薦些免費字型。為什麼呢？這樣對於新手來說，不花一分錢就可以獲得大量字型用以練習。
我推薦大家立即下載，那麼現在就來在你的視覺傳達設計中感受一下它吧。
電腦裡字型分類便於你檢視你下載的字型
Ubuntu
Ubuntu字型，字母加粗了一點點，比一些App裡面的字型稍微突出一點。可以在Google Fonts中找到。
Open Sans
Open Sans非常易讀而且很流行的字型，非常適合文案主體。可以在Google Fonts找到。
Bebas Neue
Bebas Neue字型，大寫全拼的話非常適合標題。可以在Fontfabric中找到，它還有非常棒的“Bebas Neue in use”展示區。
Montserrat
Montserrat只有兩倍寬，但是在“好”的標準之內。相比於Gotham和Proxima Nova來說的確是最好的免費字型，但是遠不及這兩個字型。可以在Google Fonts上下載。
Raleway
Raleway很適合主標題，但是對正文內容來說有點大。文字確實很輕盈。
Cabin
Cabin可以在Google Fonts上找到。
Lato
Lato可以在Google Fonts上找到。
PT Sans
PT Sans可以在Google Fonts上找到。
Entypo Socia
Entypo Socia是一種圖示字型，是的，如果你用了它，你會發現它們是你非常熟悉的圖示，而且都是非常有含金量的圖示。你是不是通過改變顏色和大小等方面感覺像再設計了這些Logo？這個字型你可以從Entypo.com上找到。
給你提供一些資源：
Beautiful Google web fonts：這是一個非常好的展示Google Fonts裡好看字型的網站。我經常去這個簡單的頁面汲取靈感。
FontSquirrel：一個免費的蒐集優秀商業用途字型的網站。
Typekit：如果你使用Adobe Creative Cloud（也就是PS.AI等等 ），那麼你可以在這裡免費得到很多好的字型。當然，Proxima Nova也在裡面。
第七條：像藝術家一樣尋找靈感
我第一次嘗試設計App元素（按鈕、表格、圖表、彈出框等等）的時候，我意識到，對於如何將它們設計的好看，我知道的太少了。
但幸運的是，我還沒有到不得不設計新UI元素的時候。這意味著我可以多看看別人是怎麼做的，從好的裡面再看更好的。
哪裡有最好的呢？我這裡有一些非常實用的資源網站供你參考：
1.Dribbble
這是一個邀請制的網站，上面展示的作品都出自非常優秀的設計師之手。這個網站可以說是UI產品展示網站中的翹楚。你想要的幾乎都可以在這裡找到。
事實上，你也可以在這個網站上關注我。這裡還有一些非常優秀的設計師推薦給你：
Victor Erixon：他的作品有非常鮮明的個人特色——好看、乾淨、扁平。他有三年的設計齡，現在已經是這個圈子裡的頂級設計師了。
Focus Lab：這些小夥伴們是“Dribbble名人”，他們的作品風格多變、設計一流，在圈子裡享有盛譽。
Cosmin Cpitanu：一個非常棒的流行設計師。他的作品看上去非常具有未來感但是沒有過分裝飾，在顏色運用的非常好。但是他沒有專注在UX上——這也是Dribbble上對他的批評。
分別是Victor Erixon,Focus Lab和Cosmin Capitanu的作品
2.Flat UI Pinboard
我之前完全不知道Warmarc是誰，但是他的手機UI介面給了我耳目一新的感覺。
3.Pttrns
一個移動端App的指導性截圖。它的優點是整體在UX的部分非常統一，這讓你能夠非常快的找到正需要的頁面。這是它的一些登陸頁面、使用者作品集、搜尋結果頁面等等。
我堅定的相信每一個藝術家在他們足夠優秀之前都是一個模仿者。在你臨摹學習足夠了之後，你就可以去探索你自己的風格了。但在這之前，就像他們一樣去臨摹吧。
還有，這個章節的靈感來源，也就是標題“像藝術家一樣尋找靈感”是從我之前讀到過的《Eponymous Book》中摘錄的，原因是因為我覺得這句話可以概括這一章節的中心思想。
總結
我寫這篇文章是因為在一段時間之前我也喜歡看這種的文章，希望能對你有幫助。如果你是一個UX設計師，你可以在你畫好線框圖之後就做一個模型出來。如果你是一個開發人員，把你的下一個專案做的好看一點。我不奢望你的介面設計的水平一日千里，你只要去觀察、去模仿，然後還能給你的朋友一點建議就足夠了。
不管成為設計師多少年，還是應該一直學習設計。