「佳作翻譯」非科班如何做好UI設計的7大規則（Part 2）
前言
今天這篇文章是《非科班如何做好UI設計的7大規則》第二部分，第一篇 ofollow,noindex" target="_blank"> 《「佳作翻譯」非科班如何做好UI設計的7大規則（Part 1）》。
原文來自西雅圖的獨立UI/UX設計師Erik D. Kennedy，他在使用者體驗和視覺設計方面有很豐富的經驗。 
同時他還運營了一個設計網站，Learn UI Design，他會在上面分享自己學習的心得，也會發布一些視訊教程。有興趣的朋友可以關注一波。
因為是英文佳作，小編能力有限，所以找了英語專業的小夥伴來幫忙，如果有發現什麼紕漏，emmmm，我們改......
本文是系列文章的第二部分，建議你先看看第一部分的內容，第一篇 《「佳作翻譯」非科班如何做好UI設計的7大規則（Part 1）》。
我們正在討論的是設計簡潔乾淨UI的規則：
1、光來自天空（Part 1）
2、黑與白第一（Part 1）
3、加倍你的留白（Part 1）
4、瞭解在影象上疊加文字的方法
5、使文字彈出和不彈出
6、只使用好的字型
7、像藝術家一樣竊取
規則4:瞭解在影象上疊加文字的方法
如果你的目標是成為一名優秀的設計師，那您必須學習如何以吸引人的方式，將文字放在影象上。
這是每一個優秀的設計師都應該做好的事情，當然，這也是很多初級設計師都會遇到的問題！
方法1：直接將文字應用與影象
什麼？這也叫一種方法？
不得不說，這是最基本也是最有效的方法之一，這也是為什麼我把它放在第一條的原因。
Otter Surfboards.嘻哈和instagrammy，但是有點難以閱讀
在使用此方法需要主意的問題：
影象和文字有一定的明暗對比度，一般情況下，影象應該是整體暗色調的，文字以白色為主;
在多種螢幕尺寸下，都保證文字都可讀性；
Aquatilis網站 - 絕對值得一遊。
我曾經在很多專案裡面都使用了這個方法去新增文字，它也能夠給觀這呈現一個很酷都畫面， 但在實際使用過程中，也要控制使用量。
方法2:覆蓋整個影象
將文字放在影象上最簡單的方法就是直接覆蓋影象。如果原始影象顏色不夠深，則可以用半透明但黑色覆蓋整個影象。
Upstart網站擁有35％不透明黑色濾鏡。
如果你看到這個原圖的色調，你會發現原始影象太亮並且對比度太高，使得文字難以辨認。 但是覆蓋一個黑色的半透明圖層，那就不存在這個問題了。
此方法也可以適用於縮圖或小影象。
來自慈善機構的網站縮圖：water site 
儘管黑色覆蓋層是最簡單和最通用的方法，有時候使用彩色覆蓋層，也會得到意想不到的效果。
方法3:文字框
這個方法更簡單，也會更可靠。
使用一個溫和透明的黑色矩形，在上面新增白色的文字。如果疊加層不夠透明，不管下面是什麼影象，都可以保證文字的清晰可讀。
MiguelOlivaMárquez的現代檀香山iPhone概念
Otter Surfboards.嘻哈和instagrammy，但是有點難以閱讀
Now in pink. By Mark Conlan
方法4:模糊影象
當我們把底層影象模糊處理之後，上面當文字清晰度令人驚訝。 
Snapguide中的大量模糊疊加。請注意，模糊區域也變暗。
蘋果從iOS 7開始的背景變得模糊不清，ie瀏覽器也使用它起到了很大的作用。 
還可以直接在照片的非聚焦區域作為模糊圖層部分，這對影象和版式佈局的切合度要求更高。
Teehan + Lax
我們要保證文字始終位於模糊之上，這樣，你就可以很清晰的閱讀文字部分了。
方法5:底圖褪色
把底層影象的某部分巧妙的淡化為深色，然後在其上面放置白色文字。 這是一個巧妙的辦法，在很多網站都有應用這個方法。
對於上面的影象，你可能會覺得就是直接在影象上放置了白色的文字，其實不然，你仔細看，你會發現其實是一個由0%不透明度到20%不透明度漸變的矩形框。
這個操作非常的微妙，在不影響整體美觀但前提下，確保了易讀性。
規則5:使文字彈出和不彈出
這裡的彈出和不彈出指的是文字的吸引度， 也就是如何讓我們想要讓觀者看到的部分突出，其它部分層級降低。
文字的表現在很多地方都以對比的形式來呈現。只要你接觸過設計， 你就一定知道如何來控制文字的層級：
·尺寸對比（更大或更小尺寸）
·顏色對比（明度對比最為顯眼）
·文字字重（粗字型和纖細字型）
·字間距（通過距離來區分塊）
當然還有一些其它的，如文字斜體、邊距、下劃線等等。
我們想要突出或者降低某個部分視覺層級，往往不是通過某一種樣式來達到的，都是多種樣式的組合表現。
圖片中頁尾部分的文字型積小、對比度低、字型重量就顯得不那麼大。
Blu Homes是一個設計的無可挑剔的網站，它有一些很棒的標題，但強調的字型是小寫的。如果此處用大寫字型，則過分強調看起來過於強烈。
規則6:只使用好的字型
在設計過程中，字型的選擇有時候足以影響到整個畫面的效果，而我們的策略就是， 找到好的字型，只使用它們。
這個部分沒有什麼要研究字型的好壞，只是列出一些不錯的免費字型，供大家在設計的時候選擇。
設計一些具有非常獨特個性的網站時，可以使用一些非常不同的字型，但對於大多數UI設計來說，只需要簡潔明瞭的東西。
Ubuntu（上圖）。 很多字重， 比某些應用程式所需的更有特色。
OpenSans（上圖）。 易於閱讀，流行的字型。 適合身體影印。
Bebas Neue（上圖）。 很棒的字型，全部大寫。
Montserrat（上圖）。 只有兩個字重，但足以做到層次風割。
Raleway（上圖）。 常用於標題部分，對於正文可能有點多。
Cabin（上圖）。
Lato（上圖）。
PT Sans（上圖）。
規則7:像藝術家一樣竊取
在我第一次坐下來嘗試去設計一些應用元素的時候，一個按鈕、一個表單、一個圖示，無論如何，這是我第一次意識到，我對如何使該元素看起來更好知之甚少。
但是幸運的是，我還沒有發明任何新的UI元素。 這意味著我總能看到其他人如何做到這一點，並且從最佳狀態中挑選出來。
但是如何去選呢？以下是我在為客戶設計的時候發現的最有用的資源：
1、Dribbble
這個一個僅限邀請的“為設計師展示和講述”的網站， 你可以在這裡找到幾乎所有東西的好例子。
Work by Victor Erixon, Focus Lab, and Cosmin Capitanu, respectively
事實上，你可以在這裡看到我所有的工作內容。以下是推薦您可以關注的人：
@Victor Erixon。擁有非常鮮明的個人風格，而且非常棒。美觀，乾淨，扁平的設計。他已經是7年的設計師，並且已經成為遊戲的佼佼者。
@Focus Lab.。這些傢伙是“聰明的名人”，他們的工作不辜負聲譽，真的很多樣化，永遠是一流的。
@Cosmin Capitanu。一個很棒的設計師。他製作的東西看起來很瘋狂，沒有花哨的未來感。顏色真的很好。
2、Pinterest
我不知道“warmarc”是誰，但他設計的電話使用者介面的樣式圖，對於我的某些工作專案真的非常有用。
3、Pttrns
下面是一個移動應用截圖的目錄。關於Pttrns的好處是整個網站佈局統一，這使得它每一個頁面都處理的非常好，無論是登入頁面，使用者配置檔案，搜尋結果等。
我堅信每個藝術家都應該成為一隻鸚鵡， 直到他們懂得如何去模仿最好的。然後去尋找自己的風格，發明新的設計趨勢。 在此之前，讓我們像盜賊一樣去“竊取”好的創意。
小結
我寫這篇是因為我希望我能夠在很早之前看到這些，我希望它對你有所幫助。
·如果您是一名UX設計師，請在繪製線框後繪製一個漂亮的模型。
·如果你是一個開發者，那就把你的下一個專案做成是好看的。
我不希望UI看起來像是需要神奇的藝術學校技能才能做得體面。我們只是觀察，模仿，並告訴你的朋友怎麼去使用。無論如何，這正是我迄今為止所學到的，而且我始終是初學者。
如果你還在關注這我，你已經閱讀了兩篇總共超過5000字的文章，並看過很多插圖和截圖。但我還沒停止，所以還沒結束