起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識7大規(guī)則：非科班如何做好UI設計的7大規(guī)則（Part 2）
如果你是一名UX設計師，請在繪制線框后繪制一個漂亮的模型；如果你是一個開發(fā)者，那就把你的下一個項目做成是好看的。
前言
今天這篇文章是《非科班如何做好UI設計的7大規(guī)則》第二部分，第一篇《非科班如何做好UI設計的7大規(guī)則（Part 1）》。
原文來自西雅圖的獨立UI/UX設計師Erik D. Kennedy，他在用戶體驗和視覺設計方面有很豐富的經(jīng)驗。同時他還運營了一個設計網(wǎng)站，Learn UI Design，他會在上面分享自己學習的心得，也會發(fā)布一些視頻教程。有興趣的朋友可以關注一波。
因為是英文佳作，能力有限，所以找了英語專業(yè)的小伙伴來幫忙，如果有發(fā)現(xiàn)什么紕漏，emmmm，我們改……
本文是系列文章的第二部分，建議你先看看第一部分的內(nèi)容，第一篇《非科班如何做好UI設計的7大規(guī)則（Part 1）》。
我們正在討論的是設計簡潔干凈UI的規(guī)則：
- 光來自天空（Part 1）；
- 黑與白第一（Part 1）；
- 加倍你的留白（Part 1）；
- 了解在圖像上疊加文本的方法；
- 使文本彈出和不彈出；
- 只使用好的字體；
- 像藝術家一樣竊??；
規(guī)則4：了解在圖像上疊加文本的方法
如果你的目標是成為一名優(yōu)秀的設計師，那您必須學習如何以吸引人的方式，將文本放在圖像上。
這是每一個優(yōu)秀的設計師都應該做好的事情，當然，這也是很多初級設計師都會遇到的問題！
方法1：直接將文本應用與圖像
什么？這也叫一種方法？
不得不說，這是最基本也是最有效的方法之一，這也是為什么我把它放在第一條的原因。
Otter Surfboards.嘻哈和instagrammy，但是有點難以閱讀
在使用此方法需要主意的問題：
- 圖像和文本有一定的明暗對比度，一般情況下，圖像應該是整體暗色調(diào)的，文字以白色為主;
- 在多種屏幕尺寸下，都保證文字都可讀性；
Aquatilis網(wǎng)站 – 絕對值得一游。
我曾經(jīng)在很多項目里面都使用了這個方法去添加文字，它也能夠給觀這呈現(xiàn)一個很酷都畫面，但在實際使用過程中，也要控制使用量。
方法2：覆蓋整個圖像
將文本放在圖像上最簡單的方法就是直接覆蓋圖像。如果原始圖像顏色不夠深，則可以用半透明但黑色覆蓋整個圖像。
Upstart網(wǎng)站擁有35％不透明黑色濾鏡。
如果你看到這個原圖的色調(diào)，你會發(fā)現(xiàn)原始圖像太亮并且對比度太高，使得文本難以辨認。但是覆蓋一個黑色的半透明圖層，那就不存在這個問題了。
此方法也可以適用于縮略圖或小圖像。
來自慈善機構的網(wǎng)站縮略圖：water site
盡管黑色覆蓋層是最簡單和最通用的方法，有時候使用彩色覆蓋層，也會得到意想不到的效果。
方法3：文本框
這個方法更簡單，也會更可靠。
使用一個溫和透明的黑色矩形，在上面添加白色的文字。如果疊加層不夠透明，不管下面是什么圖像，都可以保證文字的清晰可讀。
MiguelOlivaMárquez的現(xiàn)代檀香山iPhone概念
當然也可以使用一些顏色，只是在選擇色彩時候要有依據(jù)。
MarkConlan
方法4：模糊圖像
當我們把底層圖像模糊處理之后，上面當文本清晰度令人驚訝。
Snapguide中的大量模糊疊加。請注意，模糊區(qū)域也變暗。
蘋果從iOS 7開始的背景變得模糊不清，ie瀏覽器也使用它起到了很大的作用。
還可以直接在照片的非聚焦區(qū)域作為模糊圖層部分，這對圖像和版式布局的切合度要求更高。
Teehan + Lax
我們要保證文本始終位于模糊之上，這樣，你就可以很清晰的閱讀文字部分了。
方法5：底圖褪色
把底層圖像的某部分巧妙的淡化為深色，然后在其上面放置白色文字。這是一個巧妙的辦法，在很多網(wǎng)站都有應用這個方法。
對于上面的圖像，你可能會覺得就是直接在圖像上放置了白色的文字，其實不然，你仔細看，你會發(fā)現(xiàn)其實是一個由0%不透明度到20%不透明度漸變的矩形框。
這個操作非常的微妙，在不影響整體美觀但前提下，確保了易讀性。
規(guī)則5：使文本彈出和不彈出
這里的彈出和不彈出指的是文本的吸引度，也就是如何讓我們想要讓觀者看到的部分突出，其它部分層級降低。
文本的表現(xiàn)在很多地方都以對比的形式來呈現(xiàn)。只要你接觸過設計，你就一定知道如何來控制文本的層級：
- 尺寸對比（更大或更小尺寸）
- 顏色對比（明度對比最為顯眼）
- 文字字重（粗字體和纖細字體）
- 字間距（通過距離來區(qū)分塊）
當然還有一些其它的，如文本斜體、邊距、下劃線等等。
我們想要突出或者降低某個部分視覺層級，往往不是通過某一種樣式來達到的，都是多種樣式的組合表現(xiàn)。
圖片中頁腳部分的文字體積小、對比度低、字體重量就顯得不那么大。
Blu Homes是一個設計的無可挑剔的網(wǎng)站，它有一些很棒的標題，但強調(diào)的字體是小寫的。如果此處用大寫字體，則過分強調(diào)看起來過于強烈。
規(guī)則6：只使用好的字體
在設計過程中，字體的選擇有時候足以影響到整個畫面的效果，而我們的策略就是，找到好的字體，只使用它們。
這個部分沒有什么要研究字體的好壞，只是列出一些不錯的免費字體，供大家在設計的時候選擇。
設計一些具有非常獨特個性的網(wǎng)站時，可以使用一些非常不同的字體，但對于大多數(shù)UI設計來說，只需要簡潔明了的東西。
Ubuntu（上圖）。 很多字重， 比某些應用程序所需的更有特色。
OpenSans（上圖）。 易于閱讀，流行的字體。 適合身體復印。
Bebas Neue（上圖）。 很棒的字體，全部大寫。
Montserrat（上圖）。 只有兩個字重，但足以做到層次風割。
Raleway（上圖）。 常用于標題部分，對于正文可能有點多。
Cabin（上圖）。
Lato（上圖）。
PT Sans（上圖）。
規(guī)則7：像藝術家一樣竊取
在我第一次坐下來嘗試去設計一些應用元素的時候，一個按鈕、一個表單、一個圖標，無論如何，這是我第一次意識到，我對如何使該元素看起來更好知之甚少。
但是幸運的是，我還沒有發(fā)明任何新的UI元素。這意味著我總能看到其他人如何做到這一點，并且從最佳狀態(tài)中挑選出來。
但是如何去選呢？以下是我在為客戶設計的時候發(fā)現(xiàn)的最有用的資源：
1. Dribbble
這個一個僅限邀請的“為設計師展示和講述”的網(wǎng)站，你可以在這里找到幾乎所有東西的好例子。
Work byVictor Erixon,Focus Lab, andCosmin Capitanu, respectively
事實上，你可以在這里看到我所有的工作內(nèi)容。以下是推薦您可以關注的人：
@Victor Erixon。擁有非常鮮明的個人風格，而且非常棒。美觀，干凈，扁平的設計。他已經(jīng)是7年的設計師，并且已經(jīng)成為游戲的佼佼者。
@Focus Lab.。這些家伙是“聰明的名人”，他們的工作不辜負聲譽，真的很多樣化，永遠是一流的。
@Cosmin Capitanu。一個很棒的設計師。他制作的東西看起來很瘋狂，沒有花哨的未來感。顏色真的很好。
2. Pinterest
我不知道“warmarc”是誰，但他設計的電話用戶界面的樣式圖，對于我的某些工作項目真的非常有用。
3. Pttrns
下面是一個移動應用截圖的目錄。關于Pttrns的好處是整個網(wǎng)站布局統(tǒng)一，這使得它每一個頁面都處理的非常好，無論是登錄頁面，用戶配置文件，搜索結果等。
我堅信每個藝術家都應該成為一只鸚鵡，直到他們懂得如何去模仿最好的。然后去尋找自己的風格，發(fā)明新的設計趨勢。在此之前，讓我們像盜賊一樣去“竊取”好的創(chuàng)意。
小結
我寫這篇是因為我希望我能夠在很早之前看到這些，我希望它對你有所幫助。
- 如果您是一名UX設計師，請在繪制線框后繪制一個漂亮的模型。
- 如果你是一個開發(fā)者，那就把你的下一個項目做成是好看的。
我不希望UI看起來像是需要神奇的藝術學校技能才能做得體面。我們只是觀察，模仿，并告訴你的朋友怎么去使用。無論如何，這正是我迄今為止所學到的，而且我始終是初學者。
如果你還在關注這我，你已經(jīng)閱讀了兩篇總共超過5000字的文章，并看過很多插圖和截圖。但我還沒停止，所以還沒結束。
相關閱讀
《非科班如何做好UI設計的7大規(guī)則（Part 1）》
原文作者：Erik D. Kennedy
原文鏈接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
本文由 @設計師日記 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于CC0協(xié)議。
- 目前還沒評論，等你發(fā)揮！
