中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章總結(jié)了關(guān)于優(yōu)秀UI設(shè)計的7條準(zhǔn)則，希望對你有所啟發(fā)。

首先聲明，這篇指南并不適用于所有人，那么它適用于哪些人呢？

• 那些在必要時需要做出好看的UI設(shè)計的前端工程師們；
• 那些希望自己的產(chǎn)品結(jié)構(gòu)演示比五角樓風(fēng)格幻燈片更好看的，或那些明確知道自己的一套很棒的用戶體驗(yàn)，如果有更好的UI設(shè)計包裝，那么會賣得更好的UX設(shè)計師和產(chǎn)品經(jīng)理們。

如果你曾經(jīng)上過藝術(shù)學(xué)校，或者已經(jīng)是一位資深UI設(shè)計師了，那么你看這篇指南，收獲可能不會很大，因?yàn)檫@些對于你來講應(yīng)該是基本功了。

那么，在這篇文章（指南）中，你會獲得什么呢？

我是一名不懂任何UI技術(shù)的UX設(shè)計師，我很喜歡UX設(shè)計，但是在意識到我應(yīng)該去學(xué)習(xí)怎樣把產(chǎn)品交互界面做得很漂亮之前，并沒有想過以下這些事：

• 我的產(chǎn)品結(jié)構(gòu)糟糕得仿若車禍現(xiàn)場，這反應(yīng)出我的工作和思考過程情況不佳；
• 當(dāng)UX設(shè)計師的技能不僅僅是做一些可以拖拽、跳轉(zhuǎn)的草圖、方框和箭頭時，客戶會更加買賬。（也就是說，UX設(shè)計師只是做一套簡單的線框原型已經(jīng)無法滿足客戶了。）
• 我愿意為一個初創(chuàng)公司服務(wù)嗎？

其實(shí)這里面有我自己的原因，我對于美學(xué)了解甚少，我的專業(yè)是工程學(xué)——好像這個專業(yè)十分擅長做出一些很難看的東西來。

最后，我像學(xué)習(xí)其他創(chuàng)造性的東西一樣去學(xué)習(xí)應(yīng)用程序的美學(xué)：非常冷硬地去分析……和非常無恥地去抄襲別人的作品。我經(jīng)?；ㄊ畟€小時在項(xiàng)目的UI設(shè)計上，用其中1個小時制作完成，其余9個小時則是用來野蠻、生硬地學(xué)習(xí)——在Google、Pinterest、Dribbble上拼命地搜索、尋找可以借鑒的東西。

而這篇文章中的“準(zhǔn)則”就是我從這大量的“搜索”時間中總結(jié)出來的。

因此，我必須提前說明：如果說我現(xiàn)在對UI設(shè)計方面比較擅長了，那是因?yàn)榻?jīng)過了長時間的分析，我總結(jié)出一套規(guī)律來，并不是因?yàn)槲冶旧韺γ烙^、平衡感這些美學(xué)類的東西有直觀的理解。

這篇文章不是理論，它是純粹的實(shí)踐經(jīng)驗(yàn)。你在這里不會看到任何關(guān)于黃金比例之類的東西，我也不會強(qiáng)調(diào)什么色彩理論。你只能看到那些我從失敗的設(shè)計中學(xué)到的教訓(xùn)和我經(jīng)過長時間刻苦實(shí)踐得來的經(jīng)驗(yàn)。

你可以這樣去想：柔道是基于日本幾個世紀(jì)以來的武學(xué)和傳統(tǒng)哲學(xué)發(fā)展而來的。你學(xué)習(xí)柔道，那么除了戰(zhàn)斗，你還需要學(xué)習(xí)很多關(guān)于精神、能量流轉(zhuǎn)、和諧這些的東西。

而與之相反，Krav Maga（近身格斗的一種）是由那些30世紀(jì)居于捷克斯洛伐克街道上的猶太人，為了抵抗納粹而發(fā)明的。這里面沒有藝術(shù)，在Krav Maga的課程中，你要學(xué)的就是如何用一支筆迅速刺傷敵人的眼睛并盡快逃離。

這篇文章，就像Krav Maga的課程一樣，沒有太多理論的東西，只講實(shí)踐中有用的那部分。

目錄：

1. 光來自天空
2. 黑色和白色優(yōu)先
3. 雙倍的空白區(qū)域
4. 學(xué)習(xí)將文案覆在圖片上的方法
5. 使你的文案看起來很潮
6. 使用好看的字體
7. 像藝術(shù)家一樣“偷竊”

好了，我們進(jìn)入正文

準(zhǔn)則1：光來自天空

陰影對于告訴人們大腦，我們看到的用戶界面元素是什么有著莫大的作用。

這大概是我們學(xué)習(xí)UI設(shè)計時最不顯眼卻十分重要的部分了：光來自天空。光源自上而下是比較常態(tài)且持續(xù)的，一旦光源是自下而上的，那么看起來就很古怪。

當(dāng)光源從上方照射下來，被照射的物體頂部會變亮，且在它身后會投射出陰影。因此，頂部顏色會比較淺，底部顏色會比較深。

你從不會覺得人的下眼瞼是什么特殊的形狀，但是一旦被自下而上的光照亮，一瞬間出現(xiàn)在你的門前，你會被嚇一跳……

?同理適用于UI設(shè)計，我們產(chǎn)品基礎(chǔ)頁面是沒有陰影的，而那些帶陰影的基本上都是UI元素。我們的屏幕是平面的，但是我們會為這些產(chǎn)品UI元素添加各種藝術(shù)加持，讓它們看起來像3D的。

拿按鈕舉例，這個看上去很平的按鈕，也是有一套陰影細(xì)節(jié)需要注意的：

1. 未按下去的按鈕（圖上方的那個）會有深色的側(cè)邊邊緣，因?yàn)楣馐钦詹坏侥抢锏摹?/li>
2. 未按下去的按鈕的中心頂部會比邊緣處稍微淺，因?yàn)樗谀７乱粋€有著細(xì)微弧度的表面，光從頂部投射下來，頂部會比邊緣更亮。
3. 未按下去的按鈕會投射出非常淺的灰色陰影，在放大的情況下更容易識別。
4. 按下去的按鈕頂部依舊比邊緣處顏色淺，但是整個按鈕的色調(diào)都會變暗，這是因?yàn)樵谀M這個按鈕被按下去，和屏幕平行，光照與之前比無法完全照射下來；另一種說法是，現(xiàn)實(shí)中我們按下一個按鈕也會變暗，是因?yàn)槲覀兊氖謸踝×斯庠础?/li>

這只是一個小小的按鈕，就有4條陰影細(xì)節(jié)影響它的表現(xiàn)效果。這就是我們總結(jié)出來的經(jīng)驗(yàn)，可以應(yīng)用到更多的場景中。

?iOS 6有點(diǎn)過時了，卻是學(xué)習(xí)光影行為的好素材

這是一對兒iOS 6的設(shè)置按鈕——“請勿打擾”和“通知”，看上去沒什么大不了的，對嗎？但是你仔細(xì)看看，它們有多少陰影表現(xiàn)？

• ①? 設(shè)置欄上邊框投射出小的陰影。
• ②? “ON”的滑塊軌道也在滑軌里投射出陰影。
• ③? “ON”的滑塊軌道是凹面的，里面的按鈕能反射出更多的光（更亮）。
• ④? 左側(cè)圖標(biāo)看著比較立體（凸出來像玻璃一樣），看到它們上半部那條有點(diǎn)亮線了嗎？這條線垂直于光源，因此接收到更多的光，并把這些光反射到你的眼睛里（更亮更淺）。
• ⑤ 兩欄中間的分割線也做了陰影處理，被光照到的角落亮一些，反之暗一些。

邊欄分割線特寫

通常表現(xiàn)出來是嵌在屏幕里的元素：

• 文字填寫區(qū)域
• 按下的按鈕
• 滑塊軌道
• 單選按鈕（還未被選擇）
• 復(fù)選框

通常表現(xiàn)出來是從屏幕里凸出來的元素：

• 未按下的按鈕
• 滑塊軌道上的滑塊
• 下拉控件
• 卡片
• 單選按鈕（已經(jīng)選中狀態(tài)）
• 彈窗

現(xiàn)在你知道了，你需要注意方方面面。

等等，那么扁平化設(shè)計呢？

iOS 7用“扁平化設(shè)計”震撼了科技交流界。它說它的設(shè)計完全是平面化的——不用模擬任何凸起或者凹痕，只有純色的線條和圖形。

?我非常喜歡簡潔風(fēng)，但我并不認(rèn)為完全扁平化是一個長期的趨勢。擬物3D風(fēng)格在我們的交互體系里看上去很自然地完全被放棄了。

可是我認(rèn)為現(xiàn)在正悄悄崛起另一種設(shè)計風(fēng)格——半扁平化的UI設(shè)計。依舊干凈、簡單，但是在一些元素上要做陰影處理，用來提示用戶交互動作——按下/點(diǎn)擊/滑動等。

OS X Yosemite——半扁平UI設(shè)計

在我寫這篇文章的時候，Google正通過他們的產(chǎn)品推出“Material Design”。這種視覺語言的核心就是模擬真實(shí)的物理世界。

下面這張圖就是“Material Design”指南中的一部分，講解的就是如何用陰影來表現(xiàn)不同的深度。

這是我認(rèn)為會延續(xù)發(fā)展下去的東西。它使用很細(xì)微的真實(shí)世界元素來傳達(dá)信息，請注意關(guān)鍵詞：細(xì)微。

你不能說它沒有模仿真實(shí)的世界，但它也不是2006年風(fēng)格的網(wǎng)頁。它沒有紋理、沒有梯度、不油膩。

我認(rèn)為半扁平化是未來的發(fā)展趨勢，至于扁平化設(shè)計，我覺得它已然過時了。

準(zhǔn)則2：黑色和白色優(yōu)先

在添加色彩之前，使用灰色可以簡化大多數(shù)復(fù)雜的視覺設(shè)計元素，有助于我們將精力集中于元素的排版上。

現(xiàn)在的UX設(shè)計都會遵循“移動先行”（mobile-first）的策略，這意味著你需要先考慮產(chǎn)品在手機(jī)上的頁面呈現(xiàn)和交互設(shè)置，然后再去拓展到像素更精密的顯示屏上（Retina monitor）。

這種方式很贊，可以讓你的思考更加清晰。你首先需要解決比較困難的問題（在一塊非常小的屏幕上設(shè)計一個可行的app），然后參考其解決方案去解決比較簡單的問題（在一塊大屏幕上設(shè)計一個可行的app）。

同理：在設(shè)計中，黑色和白色優(yōu)先。

首先解決比較困難的問題——在沒有其他顏色的加持下，想辦法把頁面設(shè)計得好看又實(shí)用。最后再添加顏色，錦上添花，如虎添翼。

Haraldur Thorleifsson灰色的網(wǎng)頁線框圖（比一部分設(shè)計成品還好看）

這種方式可以讓app清爽又簡潔。在很多地方用太多色彩很容易把這種簡潔破壞掉。黑白色優(yōu)先有助你集中精力在間距、大小、布局這些地方，這些是簡潔的設(shè)計最基本的內(nèi)容。

優(yōu)雅的灰色

?當(dāng)然，也有很多的app并不適用于“黑白優(yōu)先”的原則。因?yàn)檫@些app需要表達(dá)一種特定的態(tài)度，比如“運(yùn)動”“浮夸”“卡通”等風(fēng)格，這需要設(shè)計對色彩的運(yùn)用十分老練。但是大部分的app并沒有這種需要表現(xiàn)的特殊的態(tài)度，只需要簡單干凈就行了。不可否認(rèn)，前者設(shè)計起來難度會更高。

色彩張揚(yáng)的網(wǎng)頁，看著簡單，設(shè)計起來很有難度

除了有特別需求的情況，我們都可以使用“黑白優(yōu)先原則”。

接下來，我們需要了解：怎么去添加顏色。

最簡單的方法是，只添加一種顏色。

在灰色風(fēng)格的網(wǎng)頁上添加一種顏色猶如畫龍點(diǎn)睛，非常亮眼且有效。

也可以在此基礎(chǔ)上進(jìn)行延展：灰度+兩種顏色；灰度+同一色調(diào)的多種顏色；

在實(shí)踐中的色彩代碼

什么是色調(diào)呢？

通常來講，我們說到的色彩是RGB十六進(jìn)制代碼。這一點(diǎn)很重要，但經(jīng)常被忽略。對于框架設(shè)計來講，RGB并不是最好的選擇，HSB比較實(shí)用。（HSB又被稱為HSV，和HSL相似。）

HSB比RGB好，是因?yàn)樗匀?，你可以預(yù)測當(dāng)你改變一個HSB色值后，你看到的顏色會有什么改變。

如果你是第一次知道HSB，這里有一篇HSB入門推薦給你：《The HSB Color System: A Practitioner’s Primer》

純色調(diào)-金色系

純色調(diào)-藍(lán)色系

?通過修改純色的飽和度和亮度，你可以得到豐富的色彩——深的、淺的、適合做背景的、色澤濃郁的、引人注目的——而且，這些豐富的色彩還不會讓人眼花。

使用從同一個或兩個基礎(chǔ)色調(diào)中提煉出來的多種色彩，可以突出和中和產(chǎn)品中的各個元素，而且不會讓你的設(shè)計看上去混亂。

Kerem Suer設(shè)計的倒數(shù)計時器

準(zhǔn)則 3：雙倍空白區(qū)域

如果想讓你的UI有設(shè)計感，那么就多給頁面一些呼吸空間。

在準(zhǔn)則2中，我提到“黑白優(yōu)先”可以迫使你在考慮色彩前關(guān)注間距和布局?，F(xiàn)在我們來講講關(guān)于間距和布局的一些事情。

如果你從一開始就去填充HTML內(nèi)容，那么你的頁面可能會自然而然地形成這個樣子。

所有內(nèi)容密密麻麻地擠滿了整個屏幕。字號特別小，行之間也沒有間距，段落之間也只有那么一點(diǎn)點(diǎn)空隙，無論是100xp還是10000xp的頁面，都會被這些內(nèi)容填充得滿滿登登。

從審美角度來看，這太可怕了，如果想讓頁面有設(shè)計感，我們需要在元素中間留出更多的空白，甚至這些空白的數(shù)值也許聽起來有些匪夷所思。

空白，HTML，CSS

如果你像我一樣使用CSS編寫格式，基本上習(xí)慣了不留什么空白，那么現(xiàn)在開始要改變這種習(xí)慣了。從編寫開始，一直到結(jié)束，要在腦中將“留空白”概念貫穿整個過程中。

頁面中每一個元素的布局都要有留白的意識；如果是內(nèi)容組布局，那么先考慮每一塊內(nèi)容組之間的留白，然后再考慮組內(nèi)元素之間的留白設(shè)置。

下面拿Piotr Kwiatkowski設(shè)計的陰影播放器頁面來舉例：

?看左邊的菜單欄。

兩個大標(biāo)題之間的垂直距離是中間文本本身高度的兩倍。

中間文本都是12px，行間距也是12px。

再看這個菜單的標(biāo)題，“PLAYLISTS”和它的下劃線之間有15px的空白。這個數(shù)值比字母本身的高度還要大。更不要說菜單里每個單獨(dú)列表之間25px的空白了。

?左側(cè)側(cè)邊欄展示的是文本間行距白。

Piotr（設(shè)計師）在這個設(shè)計中非常注重留白設(shè)計，作品也呈現(xiàn)出很好的效果。雖然這只是一個概念作品，但是我覺得它很不錯，配得上最好的音樂播放器。

?搜索欄留下了足夠的空間。文本“Search all music”的高度占工具欄高度20％，搜索圖標(biāo)也是相似的比例。

適度的、足夠大的空白空間，可以將內(nèi)容冗雜的頁面變得簡潔、好看——比如更簡潔干凈的論壇。

Matt Sisto設(shè)計的論壇（概念）

亦或者更加整潔的維基百科。

?Aurélien Salomon重新設(shè)計的維基百科（概念）

當(dāng)然，對于這個概念設(shè)計，大家又很多的爭論，很多人說這個設(shè)計沒有突出維基的核心功能，但是我們不能否認(rèn)，我們可以從中學(xué)到很多設(shè)計點(diǎn)：

• 在行之間留白。
• 在每個元素中間留白。
• 在元素組之間留白。

分析每一處留白產(chǎn)生的作用。

準(zhǔn)則4：學(xué)習(xí)將文案覆在圖片上的方法

我總結(jié)了一些能使覆加在圖片上的文字排版看上去很漂亮的可靠方法，一共5條，另外加一個小彩蛋技巧。

如果你想成為一名優(yōu)秀的UI設(shè)計師，那么你肯定得學(xué)會如何把文案融合在圖片里，同時又讓文案很吸引人。讀完這部分內(nèi)容，在這方面一定會幫你得到很大的提升。

（0）直接把文字加在圖片上

我很猶豫要不要把這條加進(jìn)來，但是如何讓直接加在圖片上的文字看上去好看又顯眼是十分需要技巧的。

“Otter Surfboards”官網(wǎng)，比較難以閱讀

使用這種方法，我們需要注意以下幾點(diǎn)：

• 這張圖片需要是深色的，并且里面沒有太多明暗對比強(qiáng)烈的邊緣線。
• 文案使用白色。
• 記得測試每一種屏幕和窗口，確定它是易讀的。

我想表達(dá)的并不是說，每一個專業(yè)的項(xiàng)目里都需要把文字放在一張圖片的頂部，我只是強(qiáng)調(diào)一些可控的注意點(diǎn)。將文案直接放在圖片上，其實(shí)是可以做出非常炫酷的效果的。

Aquatilis網(wǎng)站，非常值得一看

?（1）覆蓋整張圖片

將文案覆加在圖片上，最簡單的方法就是覆蓋整張圖片，圖片顏色不夠深怎么辦？沒關(guān)系，給整張圖片加一個半透明的黑色蒙層即可。

“Upstart websit”使用35％黑色蒙層

?這種方法同樣適用于縮略圖和小的圖片。

“charity：water”的縮略

黑色蒙層，白色文字是最簡單也是最常用的，當(dāng)然你也可以使用其他適合的顏色來做蒙層。

?

（2）給文案加底色方塊

這種方法簡單實(shí)用。畫一個黑色的矩形，上面加上白色的文字，放在任何圖片上都不影響它的易讀性。

你也可以用其他顏色來做底色，不過顏色選擇要慎重。

（3）把圖片變模糊

還有一種能讓文案易讀性更強(qiáng)的方法，就是把底層圖片的一部分模糊化。

注意模糊區(qū)域也做了變暗處理

?iOS 7便很好地運(yùn)用了將背景模糊化，Vista也用這種方法做出了很好的效果。

你也可以將照片的非焦點(diǎn)區(qū)域做模糊化處理。但是需要注意的是這種方法比較適用于非動態(tài)圖片，如果你的背景是圖片輪換，那么便要確保文字下方一定模糊化區(qū)域。

沒明白我的意思？看看下圖中的標(biāo)題下方的文字……

作為全世界公認(rèn)的好產(chǎn)品，這種設(shè)計如何通過的？

（4）地板褪色

所謂“地板褪色”方式，就是你有一張從上而下顏色漸深的圖片，這樣可以將文字加在圖片的底部。這是一種非常巧妙的方式，我不知道之前誰這么做過，我第一次發(fā)現(xiàn)這種方式還是在“Medium”上。

?在很多漫不經(jīng)心的旁觀者眼中，Medium的列表展現(xiàn)形式僅僅是在圖片上加了白色的文字而已，我得說，這種說法大錯特錯了。事實(shí)上，它每一張圖片從中部到底部有一個梯度（黑色不透明度從0％到大致20％）。

雖然很難辨識，但是它的確是這樣的，極大提高了文案的易讀性。

并且，我還注意到Medium的縮略圖上的文字都帶有輕微的陰影，更加深化了文字的易讀性，真實(shí)太精秒了！

這兩種方式使得Medium可以使用任意一張圖片，在上面加任意文字，并且還能有良好的易讀性。

另外，為什么是自上而下逐步變深呢？請參看原則一：光來自天空。光源是自上而下的，就像我們看現(xiàn)實(shí)中的任何東西一樣，底部色彩是最深的。

進(jìn)階版：融合了“模糊處理”和“地板褪色”兩種方法，就叫它“模糊地板”吧

額外的方法：

為什么“Elastica blog”頂部的標(biāo)題總是很顯眼呢？

它使用的圖片：

• 顏色不是很深；
• 明暗對比較強(qiáng)烈。

貌似很難解釋，為什么它的文字易讀性還是很高，我們來一起看一下：

答案是：Scrim（紗罩）

在攝影中，攝影師會用紗罩（棉麻布）來吸收光線，使照片的光線變得柔和?，F(xiàn)在它成為一種視覺設(shè)計技術(shù)，吸收圖片的光線，使得圖片上的文字能夠凸顯出來。

如果我們把“Elastica blog”網(wǎng)頁縮小一些，可以清楚地看到：

?在“145,000 Salesforce Users Come out to Celebrate…”這段話下方有一個漸變不透明的矩形方塊。將文字放在這樣一個藍(lán)色的非透明背景上的確比直接放在照片上辨識度高多了。

這可能是將文字添加在圖片上最精妙的方式了，我沒在其他地方見過，把這種方法記下來，今后你會用到的。

準(zhǔn)則5：使你的文案很潮（且適合）

想讓文字看起來漂亮又顯眼，一般情況下，我們喜歡用對比的形式，比如：更大一點(diǎn)，更亮一點(diǎn)。

在我看來，創(chuàng)建一套UI規(guī)范，設(shè)定字體規(guī)范是難點(diǎn)之一。如果你是科班出身，你可能會用各種方式來讓你的文案引人注目：

• 字號（大一點(diǎn)或小一點(diǎn)）；
• 顏色（使用更強(qiáng)的對比色；或用明亮的顏色畫龍點(diǎn)睛）；
• 字體粗細(xì)
• 拼寫（字母小寫、字母大寫、標(biāo)題大寫）
• 斜體
• 字符間距
• 邊距（嚴(yán)格意義上講，這個并不屬于文本本身屬性，但是對于吸引人注意也有一定的作用，所以也加上了這一條。）

還有一些其他可以吸引人矚目的方法，但是不特別建議使用：

• 下劃線：一般來講，現(xiàn)在文字下方加下劃線大家會默認(rèn)是一條鏈接，我們最好還是不要再賦予它其他含義。
• 文本背景顏色:這種情況不常見，但是曾有一段時間37signals會用這種樣式來作為鏈接。
• 刪除線：90年代的CSS用法。

根據(jù)我的經(jīng)驗(yàn)，當(dāng)發(fā)現(xiàn)一個文本的樣式怎么看都不對勁的時候，不是因?yàn)檫吘鄦栴}或者是顏色不夠深，而是沒有給它正確地設(shè)置幾組矛盾的屬性組合。

你可以把文本樣式分成兩組：（突出，或者不突出）

• 增強(qiáng)文字可視性的：加大、加粗、大寫等。
• 降低文字可視性的：小一點(diǎn)、少一些對比元素、小寫等。

案例：hugeinc.com

?“Material Design”這個大標(biāo)題非常突出，它很大，對比強(qiáng)，也很粗。

?頁腳部分的文字便不需要那么突出了，字體小，對比低，比較細(xì)。

重點(diǎn)來了：

一個網(wǎng)站只有大標(biāo)題需要完全突出，其他地方需要“突出”與“不突出”相結(jié)合。

這樣一方面防止了元素過于突兀，同時又能張弛有度地把應(yīng)該突出的重點(diǎn)凸顯出來，。

設(shè)計視覺平衡

Blu Homes網(wǎng)站設(shè)計很完美，它的大標(biāo)題很長，是需要突出強(qiáng)調(diào)的， 卻使用了小寫——太多的突出設(shè)計會讓標(biāo)題給用戶的視覺壓力過大。

Blu Homes中間的數(shù)字用它的字號、顏色和布局吸引用戶的注意力——請注意，它的字體很細(xì)，同時也沒有用對比很強(qiáng)的深色，而是用了對比很淺的淺藍(lán)色。

而數(shù)字下面的小標(biāo)簽，雖然用了淺灰色且十分小，卻使用了大寫字母，并加粗。

所有的元素組合起來非常平衡。

contentsmagazine.com

Contents Magazine也是一個很好的學(xué)習(xí)案例：

• 文章標(biāo)題是這個頁面上唯一沒有用斜體的元素。在這個案例里，不用斜體反而更醒目，更何況還加粗了。
• 作者的名稱在署名行，也加粗了，卻用正常粗細(xì)的“by”做反襯，讓它顯眼起來。
• 在頁面中間的那個小小的、淺淺的“ALREADY OUT”，由于它是大寫，字符間距大、邊距也大，因此也很容易找到。

被選中或者鼠標(biāo)停留處的文字

設(shè)計被選中或者鼠標(biāo)停留處的文字會更難。一般來講，改變字體大小、外形、粗細(xì)都會改變字體占用的空間，這樣很容易就辨識出鼠標(biāo)懸停狀態(tài)。

你可以利用哪些元素呢？

• 字體顏色
• 背景顏色
• 陰影
• 下劃線
• 細(xì)小的動效——上升、下降，等等。

還可以這樣做：可以把白色的字體變成彩色的，或者彩色的字體換成白色的，當(dāng)然同時也要把文字背景換成深色的。

被選中的標(biāo)簽文字變成了白色的，但是文字背景變深，和頁面背景色對比度非常高。

不得不說：優(yōu)化文字是個苦差事。

每一次我覺得“這些文字不可能變好看”的時候，都會被證明我錯了。為了把它們變得更好看，我需要不斷地嘗試。

所以，如果在經(jīng)過一番努力后，你的文本展現(xiàn)還是不夠好，不要著急，如果你自己有所提高，你的文本一定會更好看的。所以，不要放棄，加油努力提升自己，不停嘗試！

準(zhǔn)則6：使用好看的字體

一些字體是非常棒的，學(xué)會使用它們。

小貼士：在這部分里，沒什么戰(zhàn)略和技術(shù)性的東西，我只是挑選了一些好看且免費(fèi)的字體供大家下載使用。

（由于本文作者推薦下載的都是一些英文字體，并且大部分需要翻墻下載，因此這部分就略過了。）

準(zhǔn)則7：像藝術(shù)家一樣“偷竊”

當(dāng)我第一次坐下來去設(shè)計一些app元素時——一個按鈕、一個表、一個彈出等等——也是我第一次覺得自己知道的太少了，根本不知道該如何讓這些元素看起來好看，用起來方便。

不過幸運(yùn)的是，我不需要去發(fā)明新的UI元素，我可以去看其他優(yōu)秀的UI設(shè)計師是如何做的，然后去借鑒最優(yōu)秀的元素。

那么有哪些靈感來源的網(wǎng)站呢？這里我推薦幾個常用的網(wǎng)站，綜合評分從高到低排序：

1.Dribbble

這個邀請注冊的網(wǎng)站，是設(shè)計師的垂直內(nèi)容平臺，擁有海量高質(zhì)量的UI作品。無論是哪個方面，你都可以在這里找到非常棒的靈感素材。

在這里，推薦幾位值得關(guān)注的UI設(shè)計師給你：

· Victor Erixon

擁有非常獨(dú)特的設(shè)計風(fēng)，十分漂亮干凈的扁平化設(shè)計。他雖然只做了三年的設(shè)計師，但是水平已經(jīng)是頂級的了。

· Focus Lab

這些人都是Dribbble的名人，作品都在水準(zhǔn)之上，且風(fēng)格多樣。

· Cosmin Capitanu

一位可怕的全能型選手。他的作品風(fēng)格夸張卻不花哨，非常善于運(yùn)用色彩。盡管他并不注重UX。

2. Flat UI Pinboard

我不知道“warmar”是誰，但是通過他的Phone UI Pinboard 我總是能找到對我有用的UI設(shè)計案例。

3.?Pttrns

一個移動app截屏匯總的網(wǎng)站，這個網(wǎng)站的好處就是一切都是基于UX模式系統(tǒng)組織的，這就意味著你可以快速搜索到你想要的頁面：登錄界面、用戶檔案、搜索界面等等。

大多數(shù)藝術(shù)家最開始都是從“模仿”起家的，從最優(yōu)秀的作品中得到啟示，直到自己的設(shè)計水平達(dá)到超高水平，這時候便可以慢慢衍生出自己的風(fēng)格，引領(lǐng)新的設(shè)計流行趨勢了。

總結(jié)：

我寫這篇文章的原因是，曾有一段時間我很喜歡看這類型的文章。而我希望你從能這篇文章中得到幫助：如果你是一位UX設(shè)計師，在你勾勒出線框需求后可以做出漂亮的原型；如果你是一位開發(fā)者，可以把下一個項(xiàng)目做得好看點(diǎn)兒。我不希望UI設(shè)計只有專業(yè)的UI設(shè)計師才能做好。現(xiàn)在的你，可以去觀察、去模仿、去告訴你的朋友在UI設(shè)計中哪些元素在起著作用。

不管怎樣，我們的學(xué)習(xí)之路還是很長，努力吧！

原文作者：Erik D. Kennedy

原文鏈接：《7 Rules for Creating Gorgeous UI》

翻譯：藍(lán)湖，微信公號：藍(lán)湖產(chǎn)品設(shè)計協(xié)作

本文由 @藍(lán)湖 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議