建立華麗 UI 的 7條規則 第二部分 (2019年更新)
這是這個系列的第二篇，第一篇這見這裡：
以下是這個系列的簡潔 UI 的 7 條規則：
- 光來自天空 (Light comes from the sky)
- 黑白優先 (Black and white first)
- 加倍你的空白 (Double your whitespace)
- 學習在影象上疊加文字的方法 ( Learn the methods of overlaying text on images )
- 使文字層次分明 ( Make text pop — and un-pop )
- 只使用好看的字型 ( Only use good fonts )
- 像藝術家一樣借鑑 ( Steal like an artist )
4. 學習在影象上疊加文字的方法
在影象上新增吸引人文字方法只那麼幾種，這裡介紹五種常規和一種額外的方法。
如果想成為一名優秀的 UI 設計師，必須學會如何以一種吸引人的方式將文字放置於影象之上。每個優秀的 UI 設計師在這個方面都能做得很好，相反的糟糕的 UI 設計師都處理的很差，或者根本不處理。不管你是優秀還是平庸的設計師，閱讀這篇文章後，多多少少對你都有幫助。
方法一：將文字直接放置於圖片上
我一直在考慮要不要把這個方法算進五種方法的一種，但設計上，直接將文字放置於圖片上讓視覺效果更好是可行的。
這種方法有各種各樣的問題和需要注意事項:
- 影象色調應該偏暗，並且豎直方向上不能有太大的色差。
- 文字必須是白色的。
- 測量不同尺寸的螢幕或視窗以確保影象顯示正常。
我想我從來沒有在任何專業專案中直接在影象上使用文字，之所以提到它，是把它看做是一種應該掌握的技巧，就是說這種方法雖然可能可以產生非常酷炫的效果，但使用的時候需要小心
方法二：文字覆蓋整個影象
將文字放在影象上最簡單的方法就是用遮罩將圖片整個覆蓋，如果原始影象不夠暗，可以在整個影象上新增半透明的黑色圖層。
下圖是一個時下流行的、用半透明黑色遮罩覆蓋圖片的示例。
如果打開發工具並刪除覆蓋層，將看到原始影象太亮，對比度太大，文字難以辨認。但是用黑色半透明的圖層覆蓋，看上去就沒問題了!
這個方法用在縮圖和小的圖片上同樣好用。
雖然黑色覆蓋是最簡單和最通用的，當然也有用彩色覆蓋。
方法三：盒模型中的文字
這種方法簡單又可靠。試試把一個稍微透明的黑色長方形框裡放上一些白色的文字。如果圖片的不透明度（opaque）足夠，你可以使用任意一張圖片，都可以保證文字的清晰可讀。
當然也可以使用一些顏色，只是在選擇色彩時候要有依據。
方法四：模糊圖片
使文字內容清晰的一個神奇的方法，是將背景影象的一部分變得模糊。
蘋果確實讓背景變得模糊了，儘管它是在 Windows 系統中最先實現的。
你也可以用照片的散焦（out-of-focus）部分來作為模糊區域。但是請注意 —— 這個辦法並不好使。如果圖片做了一點改變，就得確保這些文字位置在對應的模糊區域中。
請閱讀下圖中的子標題：
方法五：Floor Fade
Floor Fade 指的是圖片靠近底部的地方逐漸變黑，然後接著把白字填在上面。這是個非常巧妙的辦法，我不知道是誰發明的，在Medium使用它之前，我從未見過有人用它。
對於上面的影象，你可能會覺得就是直接在影象上放置了白色的文字，其實不然，你仔細看，你會發現其實是一個由 0% 不透明度到20%不透明度漸變的矩形框。
這種漸變效果確實很難看出來，但確實是有的，絕對改善清晰度。
還要注意的是，這幾張縮圖使用了文字陰影來進一步增強可讀性，這個做法真棒!
Medium達到了這樣的境界：任何文字放置在任何圖片上，都能獲得良好的閱讀效果。
哦，還有一件事——為什麼影象底部逐漸變暗? 關於這個問題的答案，上篇講的規則1——燈光通常是從上面照下來的。為了讓我們的眼睛看起來更自然，影象的底部稍微暗一點，就像我們所見過的其他事物一樣。
更高階的做法，就是結合模糊化，這樣的結合就是底部模糊化了。
額外的辦法：紗罩
無論背景影象怎麼變,Elastica blog的標題總是清晰易讀的，這是怎麼做到的？應該是這樣：
- 並不是特別黑的
- 有一點高對比度
然而，很難描述為什麼文字如此易讀。 看一看：
答案是：紗罩。
紗幕是一種使光線更柔和的攝影器材。現在它也是一種視覺設計技術，用於軟化影象，使疊加的文字更清晰。
在瀏覽器放大 Elastica 部落格上，就可以更清楚地做了什麼效果。
在這句標題 “145,000 Salesforce Users Come out to Celebrate…”有一個讓透光度漸變的框。應該可以很簡單的注意到高對比度的照片下這個深藍色的背景。
這可能是在影象上可靠地疊加文字的最微妙的方式，我在其他任何地方都沒有見過(但它相當隱蔽)。不過要記下來，你或許在將來某些時候需要它。
5. 使文字層次分明
讓文字看起來美觀和合適通常做法的是以對比的方式設定樣式 - 例如，更大但更輕。
在我看來，建立一個漂亮的使用者介面最困難的部分就是文字的樣式 - 當然不是因為不熟悉這些屬性。 如果你剛小學畢業，那麼你很可能已經使用了一種方法來引起注意或遠離我們看到的文字：
- 尺寸(大或小)
- 顏色（反差較大或較小；色彩鮮明）
- 字重（加深或者變輕）
- 拼寫（小寫，大寫和標題的格式）
- 斜體
- 字母間距
- 邊距
還有一些其做法可以引起別人的注意，通常不常用也不推薦使用：
- 下劃線 --下劃線預設表示連結，除了連結外也沒必要用它。
- 文字的背景色 -- 不常見，但37 signals的網站曾使用它做為連結的樣式。
- 刪除線 -- 90年代的CSS用法了
根據我的個人經驗，當我發現一個我似乎無法找到合適的文字樣式時，並不是因為我忘了嘗試使用邊距或更暗的顏色 - 而是因為最好的解決辦法是同時設定幾組“相矛盾的（competing）”屬性。
Up-pop and down-pop
可以將設計文字的所有方式分為兩組：
- 增加文字可見性的樣式。大號字型、粗體、大寫的等等。
- 降低文字可見性的樣式。小號字型，對比度小的，邊距小的，等等。
我們會這些叫做 "up-pop" 和 "down-pop" 的樣式，以紀念 favorite adjective 。
“Material Design” 的標題有很多“up-pop”。大字號，強烈對比，粗體。
底部的元素就是“down-pop”的。字型小，對比度低，並且字型較細。
以下是非常重要的內容。
這個頁的標題是僅有的用上了所有 up-pop 方法的文字。 對於所有別的東西，你需要 up-pop 並且 down-pop。
如果需要強調一個網站的內容元素，那麼就同時使用“up-pop”和“down-pop”。這是為了防止元素過於突兀，將不同元素限制在它們應有的視覺重要性之內。
完美設計的 Blu Homes 網站有一些大標題，但是 需要強調的單詞都是小寫的 ——過多的強調看起來會讓人看不到重點。
Blu Homes 網站上的這些數字以它們的大小、顏色和對齊方式吸引你的眼球，但是請注意，它們同時被淡化了， 字型很輕，低對比度的顏色 。
然而，數字下面的小標籤雖然是灰色和小字型的，但也是大寫字重大的。
這一切構成了平衡。
Contents Magazine 是一個 up-pop 和 down-pop 很不錯的案例分析。
- 文章標題基本上是惟一的非斜體頁面元素。在這種情況下，缺乏斜體字會更有效地吸引眼球(特別是結合粗體的字型)
- 在 by 的這一行裡的作者名字是被加粗的 — 讓它和平常字重的 "by" 分別了開來。
- 小的、低對比度的“已經過時”文字不會礙手礙腳——但是由於它的大寫型別、大的字母間距和大的空白，你可以在查詢時立即看到它。
選中和滑鼠停留樣式
被選中和滑鼠停留的文字樣式是另外一回事了——並且很難。
通常，改變字型大小、大小寫或字型權重會改變文字佔用的區域大小，這種變化可以限制住懸浮效果。
所以還有哪些屬性可以更改呢？
- 欄位顏色
- 背影顏色
- 陰影
- 下劃線
- 輕微的動畫 - 升高，降低等
一個實用的辦法:嘗試將白色元素變成彩色，或者將彩色的元素變為白色，但是文字的背景色要選用深色。
設計文字的樣式是很難的。
最後我還是要告訴你，給文字加樣式是很難的。
如果你想學習更多關於文字樣式的知識，請檢視 學習UI設計 ，在這裡有更多的詳細介紹。
6. 使用好看的字型
有些字型不錯，使用這些字型。
本節沒有策略或內容需要學習，只列出一些不錯的免費字型供你下載和使用。
這份學習指南是給學習者的，外面有超多免費的字型，所以就讓我們用吧。
我建議大家現在就去下載它們，然後使用它們來對你的專案進行視覺化設計。
以下推薦字型跟級別沒有關係：
1. Work Sans
有時候正在設計一些需要現代，乾淨字型的東西，但是還要有一點樂趣。 Work Sans 非常適合這種場景。
2. Roboto
一種極好、乾淨的、通用的字型。雖然它是 Android 的預設字型，但對於 iPhone 和 web 應用程式來說，仍然沒有得到充分的使用主要還是免費的!
谷歌地圖 有用到該字型
下載地址請點選 這裡 。
3. Montserrat
我曾經猶豫是否推薦 Montserrat 字型，因為它沒有斜體字，字距怪異，而且厚得很難看)。但這個專案一直很活躍，Montserrat 變成了一種不可思議的字型。
它最有名的可能是最受歡迎（和精心設計的）Proxima Nova 的最佳免費替代品。
在選擇任何字型時，最好檢視大寫、句子大小寫和所有的字重。你永遠不知道什麼時候稍微不同的設定會成為你想要的風格。比較上面的兩個鏡頭——同樣的字型，兩種不同的感覺。
下載地址點選 這裡 。
4. Source Sans Pro
我喜歡 Source Sans 的一件事是當你想要使用令人難以置信的過度使用的 Open Sans 或 Lato 時，它是一個很好的選擇。
Source Sans與 Open Sans或 Lato - neutral 字元有許多相同的優點，只是有一點人性化(而不是冷冰冰的、生硬的幾何字型)，而且對於使用者介面非常有用。
可以在 Google Fonts 上找到
5. IBM Plex Sans
去年，IBM 釋出了自己的字型 Plex。
Plex Serif 和 Plex Mono 輕鬆配對。
可以在 Google Fonts 上找到
6. Feather Icons
雖然許多流行的圖示集（ahem，Font Awesome）具有過於圓潤和起泡的形狀，但與簡潔的設計不能很好地搭配，但是 Feather Icons 是一種非常不受歡迎的解決方案。
作者還沒有把它打包成圖示字型，但是有人在 Github 上放了一個字型版本，可以很好地跟蹤原始設定（如果你只使用了套裝中的10或20個圖示，沒有必要載入整個包）。
下載地址： SVG set , partial icon font
有一些資源：
- Beautiful Google web fonts 。這個網站非常棒得展現出 Google Fonts 能有多好看。作者從它那找了好多好多次靈感。
- FontSquirrel 。一組最好的字型可供商業使用，而且完全免費。
- Adobe Fonts 。如果你使用的是 Adobe Creative Cloud（ 即訂閱 Photoshop 或Illustrator等 ），那麼可以免費訪問大量專業字型。甚至比我上面推薦的還要好： Proxima Nova ， Adelle Sans ， DIN ， Freight Text 等等。
- Learn UI Design 。尋找更好的字型？作者的使用者介面設計課程有一個字型推薦列表，包含超過 60 種免費，涵蓋所有型別的字型（襯線，平板，等寬字型，手寫等），幷包括每個字型的註釋 字型效果最好。
7. 像藝術家一樣借鑑
我第一次嘗試設計一些應用程式元素 - 按鈕，表，圖表，彈出視窗 - 這是我第一次意識到我對如何讓這些元素好看而知之甚少。
但幸運的是，我還沒有發明任何新的 UI 元素。這意味著我總能看到別人是如何做到的，並從中挑選最好的。
但是我們要從哪裡挑呢？這裡有：
1. Dribbble
這個特邀的“給設計師展示”網站有 網路上最好質量的 UI 設計作品 。你可以在這裡找到幾乎最好的網站。
事實上，你可以在 Dribble 關注我的裡面的 作品 ，這裡還有一些人你也可以關注:
- Jamie Syke 。基本上每天都發布新的UI，一些流行的東西迴歸豐富的經驗和設計。我能說什麼呢？關注就對咯。
- Balkan Brothers 。似乎是一個老生常談的說法，設計師越接近俄羅斯，他們就越擅長顏色。 這些克羅埃西亞設計師非常棒，保持平淡有趣。 總是很棒的漸變，顏色和陰影。
- Elegant Seagulls 。如果你曾經想過“天哪，我怎麼做比標準網格更有趣的事情？”，瀏覽他們的一些照片，這裡有你想要的答案。
- Cosmin Capitanu 。一個非常厲害的多面手。他做得東西未來感十足，但又不過於高調。他非常善於使用顏色，然而他並不十分注重 UX 的東西 — 當然這個批評也針對 Dribbble 這個網站。
分別來自 Balkan Brothers 和 Cosmin Capitanu。
分別來自 Elegant Seagulls 和 Jamie Syke。
我不知道“warmarc”是誰，但是他的手機UI的pinboard讓我找到了許多漂亮的UI。
3. Pttrns
一個移動app螢幕截圖的彙總。Pttrns 的好處是整個網站都是由使用者體驗模式來組織的。這使得快速研究目前正在使用的任何介面，無論是登入頁面、使用者配置檔案、搜尋結果等等，都非常方便。
我堅信每個藝術家都應該像鸚鵡一樣去模仿，直到他們擅長模仿最好的。然後去尋找你自己的風格，發明新的潮流。
在這期間，讓我們都先當一個模仿者吧。
總結
我寫這篇文章是因為我希望自己在以前可以讀到這篇。希望對你有幫助。如果你是一個使用者體驗設計師，畫好線框圖後做一個漂亮的模型。
如果你是一名開發人員，那就把你的下一個次要專案做好。我不想UI只有專業的人才能做的很好。就是觀察、模仿和記錄有用的東西。
無論如何，這就是我到目前為止所學到的，同時我永遠都是一個學生，會不斷向別學習！