一部出自于技https:///post/5b2a1554e51d4558cc35b3be?utm_source=gold_browser_extension術(shù)宅的通往視覺審美的指南這是這個指南的第二部分，在此之前，你需要閱讀第一部分。 我們正在討論可以讓你不需要去上美術(shù)學(xué)院就可以設(shè)計簡潔 UI 的規(guī)則。 下面是這些規(guī)則：
規(guī)則 4：學(xué)習(xí)如何在圖片上添加文字現(xiàn)在只有幾種能夠可靠得將文字精美得添加在圖片上的辦法。以下描述了 5 種常規(guī)和 1 種額外的方法。 如果你想成為一個很好的 UI 設(shè)計師，你需要學(xué)習(xí)如何用吸引人的辦法把文字覆蓋在圖片上。每個優(yōu)秀的UI設(shè)計師都會在這個方面處理得很好，但平庸的設(shè)計師往往處理得很糟糕，甚至不會處理。無論你是哪一種平庸的設(shè)計師，在讀了這個章節(jié)后，你會有巨大的提升。 方法 0：直接在圖片上添加文字我一直在猶豫是否要在這篇文章里包含這個方法，但是嚴(yán)格來說，直接在圖片上添加文字并且讓設(shè)計好看是可行的。  Otter Surfboards 看著像精致的 Instagram 配圖，但是就是有點(diǎn)難讀圖片上面的字。 以下是這個方法的缺陷和注意事項：
你的設(shè)計都符合這些條件了？棒。只要你之后別再改字或著這個圖片，你應(yīng)該就可以用你的設(shè)計了。 我不認(rèn)為我在任何一個正規(guī)專業(yè)的項目里直接把文字覆蓋到圖片上。這個方法是一個需要很高技巧的方法，就是說這種方法雖然可能可以產(chǎn)生非?？犰?/strong>的效果，但使用的時候需要小心。  這是 Aquatilis 的網(wǎng)站，非常值得一看。 方法 1：文本覆蓋整個圖片在整個圖片上覆蓋一個圖層可能是最簡單的辦法了。如果原始的圖片不夠黑，那你就可以在整個圖片上加一個半透光的黑色圖層。 這是一個非常流行的帶有黑色圖層的網(wǎng)站主頁。  這個 Upstart 的網(wǎng)站有 35% 透光度的黑色濾鏡。 如果你打開 Firebug(譯者注：Firefox 的 debug 工具)，你會發(fā)現(xiàn)原圖因?yàn)榱炼群蛯Ρ榷榷急容^高，所以字體看不清楚。但是當(dāng)有了一個黑色的濾鏡后，這些都不是問題！ 這個方法用在縮略圖和小的圖片上同樣好用。  Charity:water 網(wǎng)站的縮略圖。 黑色的圖層盡管是最簡單，并且用處最廣泛的，你當(dāng)然也可以用別的顏色的圖層。  方法 2：把文本放框里這實(shí)在是再簡單不過了，但同時又很可靠。試試把一個微微透光的黑色長方形框覆蓋在一些白色的文字上。如果這個圖層足夠透光，你依舊可以保證即使文字底下是任何圖片，文字依舊清晰可見。  Modern Honolulu 的 iPhone 設(shè)計稿 Miguel Oliva Márquez。 你也可以往文本框里塞不同的顏色，但是當(dāng)然要保持謹(jǐn)慎。  現(xiàn)在這些是粉色的例子。作者是 Mark Conlan。 方法 3：把圖片模糊化這個把底部圖片模糊化來讓人看得清楚上面的文本是出人意料得好用  Snapguide 里用了大量的背景模糊化。注意看，這些模糊的區(qū)域同時也被加深過。 iOS 7 的設(shè)計真的讓背景模糊化變得流行起來，雖然 Windows Vista 也用模糊化達(dá)到了非常好的效果。   你也可以用照片里虛化的背景作為模糊化的區(qū)域。但是請注意 —— 這個辦法并不好使。如果你的圖片做了一點(diǎn)改變，你就得確保這些文字一直都是在模糊化的區(qū)域里。  我的點(diǎn)是，試著讀清楚下面的小標(biāo)題。 這網(wǎng)站到底是怎么被通過的？ ####?方法 4：底部逐漸變深 底部逐漸變深這個方法指的是你把圖片里靠近底部的地方逐漸變黑，然后接著把白字填在上面。這是個非常巧妙的辦法。我在看到 Medium 之前都沒想到過。 對于一個普通人，這些 Medium 上的收集的設(shè)計僅僅是圖片上覆蓋了些白色的文字-但是這種想法我說是很錯誤滴！從中部（0% 透光度的黑色）到底部（20% 透光度）有個小小的漸變。 這個漸變很難看出來，但是一定在那，而且絕對提高了字體的辨識度。
哦，還有一件事 — 為什么圖片是往下變深？原因見我的第一條規(guī)則-燈光一直是從上面照下來的。為了讓眼睛看起來更舒服，圖片必須要是在底下慢慢變深，就像我們看見的所有東西一樣。 更高級的做法：如果把模糊化和底部漸變混起來...這就是底部模糊化了！ 用在 SnapGuide 上的“底部模糊”。媽媽再也不用擔(dān)心我在上面使用圖層了！ 額外的辦法：紗幕化這個 Elastica blog 是怎么可以在任何的照片下有一個可以讀得出的標(biāo)題？而且這些圖片是：
我們很難解釋為什么這些文字可以看得這么清晰。你看一下下面這些： 答案是：紗幕化。 紗幕是一種讓光變得更柔和的攝影裝備?，F(xiàn)在這也是種視覺設(shè)計的技術(shù)。這個技術(shù)通過讓圖片變得更柔和來讓覆蓋在上面的文字更加可以辨認(rèn)。 如果我們用瀏覽器放大 Elastica blog 的網(wǎng)頁，我們可以很清楚得看到發(fā)生了什么。 在這句標(biāo)題“145,000 Salesforce Users Come out to Celebrate…”有一個讓透光度漸變的框。你應(yīng)該可以很簡單的注意到高對比度的照片下這個深藍(lán)色的背景。 這可能是最微妙的把文字可靠得覆蓋在圖片上的辦法，并且我在別的地方并沒法看到（但是這個方法真的是很隱蔽）。但是把這個標(biāo)記下來，你可能不知道你什么時候會用到。 規(guī)則 5：令文本層次分明使得文字變好看并且符合背景的好辦法經(jīng)常是把文字往相反的方向 —— 比如說，變大但是更輕。 在我看來，創(chuàng)建漂亮的 UI 的最難的部分是調(diào)整文字 —— 并且這并不是因?yàn)槿鄙龠x項。如果你讀過書，你大概用過所有的能讓別人注意過文字的辦法，或者讓人不想看這些文字的辦法：
顏色，大小寫，和字據(jù)用得不錯。這是@workjon的孩子做的。當(dāng)然，也關(guān)注下@workjon —— 他的文字設(shè)計很棒！ 這里有幾個別的可以吸引別人注意的選項，但是并不常用同時也不是很推薦。
在我個人的經(jīng)驗(yàn)里，當(dāng)我發(fā)現(xiàn)一個我沒辦法找到合適的文本樣式的時候，并不是因?yàn)槲彝浟巳绾斡么髮懟蛘吒畹念伾?— 一般是因?yàn)樽詈玫慕鉀Q辦法經(jīng)常需要把一些互相沖突的性質(zhì)組合在一起。 Up-pop 和 Down-pop你可以把所有的調(diào)整文字的方法分成以下兩個組：
我們會分別把這些叫做 "up-pop" 和 "down-pop" 的樣式，以紀(jì)念 favorite adjective。 從 hugeinc.com 來的案例分析。 “材料設(shè)計”（Material Design）里有很多 up-pop 的的內(nèi)容。它是大的；它是高對比度的；它是非常****粗的。 這些底下的東西，但是，是 "down-pop" 的。他們是小的，低對比度，并且很細(xì)的。 現(xiàn)在是非常重要的內(nèi)容。
如果需要強(qiáng)調(diào)一個網(wǎng)站的內(nèi)容元素，需要同時用上 up-pop 和 down-pop 的辦法。這么做可以允許不同的內(nèi)容元素看上去有不同的樣子，防止你的東西被淹沒。 這是一個視覺要素的平衡。 這個完美設(shè)計的 Blu Homes 網(wǎng)站有很多大標(biāo)題，但是需要強(qiáng)調(diào)的字都是小寫 —— 太多的強(qiáng)調(diào)會看上去用力過猛。 Blue Homes 網(wǎng)站用了字的尺寸，顏色赫爾排列來吸引你眼球的數(shù)字 — 但是注意，他們并沒選擇用深灰色，反而同時用了很輕的字重，低對比度的顏色。 這些在文字底下小小的標(biāo)簽，然而，是灰色的，并且是即大寫又非常粗重的。 這些都和平衡有關(guān)。 contentsmagazine.com Contents Magazine 是一個 up-pop 和 down-pop 很不錯的案例分析。
選取和懸浮的樣式調(diào)整被選擇的元素和漂浮的效果是同一種文字游戲的另一個可能 —— 但是會更難。 變化字體的尺寸，大小寫，或者字重經(jīng)常會改變文字占據(jù)多少空間。這種變化可以限制住懸浮效果。 所以你還剩下哪些選項呢？
一個很可靠的選擇是：嘗試把白色的元素放上顏色，或者把有顏色的元素變白，但同時加深后面的背景 這個選擇的按鈕從有顏色變成白色，但是依舊相對于背景保持高對比度。 我會送給你這個段話：調(diào)整文本的樣式是很難的。 但是每次我在想“這個文本大概就是不可能看上去好看的”，我都是錯的。我只需要逐漸變得更擅長。同時，去變得更擅長，我只要不斷進(jìn)行嘗試就行了。 所以我提供給你個慰藉：如果這個文字看上去不好看，不要擔(dān)心 —— 只要你能變得更擅長。但是，嘿，讓我們不斷嘗試，使自己變得很強(qiáng)! 嘿，順便說一句：如果你想學(xué)更多和調(diào)整文字樣式有關(guān)的東西，看看這個 Learn UI Design，我在這里講了更多細(xì)節(jié)。 規(guī)則 6：僅使用好看的字體有些字體很好看。就用他們。 注意：在這個部分里，沒有什么需要學(xué)習(xí)的策略或別的什么。我只會列出一些好看的字體然后供你去下載，接著運(yùn)用。 注意 #2：由于前幾年字體的選項得到了擴(kuò)展，并且有些字體都快用爛了，今天我會特別推薦一些特別的字體組。如果你想看更多的字體，可以閱讀 Learn UI Design，這里面有一套可以交互的完整版的字體。（譯者注：這篇文章只推薦了英文字體，不一定適用于漢字） 特殊格調(diào)的網(wǎng)站能用非常特殊的字體但是對于大部分的 UI 設(shè)計，你只希望一些簡單和干凈的字體。所以兄弟，沒錯，別用 Wisdom Script。 同時，我也只推薦免費(fèi)的字體。為啥？這份學(xué)習(xí)指南是給學(xué)習(xí)者的。外面有超多免費(fèi)的字體，所以就讓我們用吧。 我推薦你現(xiàn)在就下載，然后當(dāng)你開始為項目設(shè)計的時候就用。 這個 Font Book 應(yīng)用里“用戶”這一欄可以很方便得幫你記住你下載了什么。 Ubuntu Ubuntu (以上)。有非常多的字重。對于某些應(yīng)用有點(diǎn)過于特殊了 — 不過對別的就很完美?？梢栽?a target="_blank" href="https://link.?target=http%3A%2F%2Fwww.google.com%2Ffonts%2Fspecimen%2FUbuntu">Google Fonts 上找到。 Open Sans Open Sans（以上）。一個讀起來容易也很流行的字體。時候正文部分?？梢栽?Google Fonts 上找到。 Bebas Neue. Bebas Neue（以上）。做標(biāo)題很棒。全是大寫的?？梢栽?Fontfabric - 這里面有很棒的“Bebas Neue in use”的展示。 Montserrat Montserrat(以上)。只有兩種字重，但是足夠用了。絕對是最好的 Gotham 和 Proxima 的免費(fèi)替代品，但是并沒有這兩個好?？梢栽?Google Fonts 上找到。 Raleway Raleway（以上）。對于標(biāo)題非常好；可能對于文本正文有點(diǎn) 過了（你看那些 W）。有非常好看得極細(xì)的字重（并沒有照片）?？梢栽?Google Fonts 上找到。 Cabin Cabin(以上)。可以在 Google Fonts 上找到。 Lato Lato(以上)。可以在 Google Fonts 上找到。 PT Sans PT Sans(以上)?？梢栽?Google Fonts 上找到。 Entypo Social Entypo Social (以上)。這是個圖標(biāo)字體。沒有錯，一旦你用了 Entypo,你會在所有地方看到它，但是這些社交網(wǎng)站的圖標(biāo)真是太棒了。不想在小小的有顏色的圈圈里重新創(chuàng)造一堆社交網(wǎng)站的 logo？沒錯，我也不想。在 Entypo.com 可以找到。 我會在這里給你留下一些資源：
規(guī)則7：像藝術(shù)家一樣借鑒當(dāng)我第一次試圖坐下來然后設(shè)計應(yīng)用的元素的時候 —— 一個按鈕，一個表格，一個圖標(biāo)，一個彈出框， 所有的所有 —— 也是我第一次意識到自己對于如何讓一個元素好看的知識是如何匱乏的時候。 但是多幸運(yùn)的是，我并不是一定需要創(chuàng)造出什么新的 UI 元素。這就意味著我可以一直看別人是如何做的然后從中間挑點(diǎn)好的。 但是我們要從哪里挑呢？這里有。 1. Dribbble這個特邀的“給設(shè)計師展示”網(wǎng)站有網(wǎng)絡(luò)上最好質(zhì)量的 UI 設(shè)計作品。你可以在這里找到幾乎最好的網(wǎng)站。 事實(shí)上，你應(yīng)該關(guān)注我在 Dribble 上的作品這里。這里也有一些人你可以關(guān)注：
這些分別都是 Victor Erixon，Focus Lab 和 Cosmin Capitanu 的作品。 2. Flat UI Pinboard我壓根沒聽說過 "warmarc"，但是他手機(jī) UI 的 pinboard（譯者注：pinboard 指的是 pininterest 里的專欄) 在我絞盡腦汁找好看的 UI 時候令人震驚得好用。 3. Pttrns這里有一個列表的移動應(yīng)用的截圖。Pttrns 的好處是它整個網(wǎng)站是按照 —— 你懂得 —— UX 模式。這可以幫助你非?？焖俚盟阉鞲鞣N界面要素，無論你在做什么，管它是登錄界面，用戶信息，搜索結(jié)果，等等。 我是那句直到善于能模仿最好的作品之前，所有藝術(shù)家都應(yīng)該是只鸚鵡的堅信者。之后你就可以你自己的風(fēng)格；開發(fā)出新的潮流。 在這之間，讓我們像小偷一樣作圖。 這個章節(jié)的想法中，“像藝術(shù)家一樣借鑒”是從這本書eponymous book中借鑒出來的。我并沒有讀那本書，主要原因是這個標(biāo)題很好的概括了這本書里想表達(dá)的想法。 總結(jié)我寫這篇文章是因?yàn)槲蚁Ｍ约涸谝郧翱梢宰x到這篇。我希望這篇可以幫助你。如果你是個 UX 設(shè)計師，在你素描出個大框架后做一個好看的 mockup。如果你是個開發(fā)者，接手下一個自己的項目然后讓它變得很好看。我不希望需要去上幾年藝術(shù)學(xué)校才能做好的 UI。只要觀察，模仿，并且告訴你的朋友哪些可以用。 無論怎么樣，這是迄今為止我學(xué)到的所有東西，同時我也一直會是個初學(xué)者。 —- |
|
|
