序言

首先采够，明確一點，這篇文章并不是為所有人準備的白热，而是有特定的目標讀者：

想要在開發(fā)產(chǎn)品時設(shè)計出好看UI的開發(fā)者庸诱。

想要讓自己作品集更出彩的UX設(shè)計師捻浦，或者是想要做出更精美的UI和UX的設(shè)計師。

如果你是學(xué)藝術(shù)的學(xué)生或者已經(jīng)是 UI 設(shè)計師了桥爽，你可能覺得這篇文章很無聊朱灿，而且觀點都是錯的。沒關(guān)系钠四，你的批評沒錯盗扒，把這個網(wǎng)頁關(guān)了，去忙別的事吧缀去。

那么從這篇文章中到底能學(xué)到什么呢侣灶？我曾是一名不懂 UI 的 UX 設(shè)計師。我非常熱愛 UX 設(shè)計缕碎，但是后來我發(fā)現(xiàn)褥影，做出精美的界面是多么的必要:

我以前的作品集看起來一團糟，顯得我的作品和思考過程很差勁咏雌。

我做UX咨詢的客戶更喜歡有能力呈現(xiàn)作品的人凡怎，而不是只會畫一堆方塊和箭頭的人。

我能為一些早期的創(chuàng)業(yè)公司工作嗎处嫌？還是一邊兒呆著吧栅贴。

我當然也有借口：

我沒有美術(shù)基礎(chǔ)，我主修工程專業(yè)熏迹，所以我做出難看的東西也無可厚非檐薯。

最終，我還是學(xué)了 app 設(shè)計，不斷地分析案例坛缕，厚著臉皮臨摹成功的作品墓猎。假設(shè)我在 1 個 UI 項目上花 10 個小時的時間，其中只有 1 個小時是有效的赚楚，其它 9 個小時都是在失敗中不斷地學(xué)習(xí)毙沾，玩命的在 Google、Pinterest 或者 Dribble 上找值得借鑒的東西宠页。

下面這些“法則”都是我從失敗中總結(jié)出來的左胞。所以，我需要提醒新人：我現(xiàn)在擅長UI举户，主要得益于我經(jīng)常分析烤宙，并不是突然開悟，理解了什么是美俭嘁，什么是平衡躺枕。

這篇文章不講理論，只談應(yīng)用供填。我不會講什么黃金分割拐云、色彩理論，只有實站中總結(jié)出的經(jīng)驗和教訓(xùn)近她。就好像叉瘩，柔道源于日本幾個世紀以來的尚武精神和哲學(xué)理念。上柔道課時粘捎，不僅能學(xué)到打斗房揭，還會學(xué)到很多關(guān)于能量、氣息與和諧之類的東西晌端。而以色列格斗術(shù)（Krav Maga）則完全不同。

這種格斗術(shù)是納粹壓迫下猶太人發(fā)明的恬砂。其中根本沒有“藝術(shù)”咧纠，在以色列格斗術(shù)的課堂上，你學(xué)到就是怎樣用一根筆或者本書襲擊別人的眼睛泻骤。

這篇文章就是產(chǎn)品設(shè)計領(lǐng)域的以色列格斗術(shù)漆羔。

以下是我要講的法則：

光線來自天空

黑白優(yōu)先

增加空白空間

學(xué)會在圖片上呈現(xiàn)文字

做好強調(diào)和淡化

只用合適的字體

像藝術(shù)家一樣偷師

我們來一起看看這些法則。

法則1：光線來自天空

陰影能夠告訴人腦我們到底在看什么樣的UI元素狱掂。

這可能是學(xué)習(xí) UI 設(shè)計時演痒，最容易忽略卻又極為重要的一點了: 光線來自天空。光線總是從天空（上方）來的趋惨，從下面照上來的光看起來會非常詭異鸟顺。

當光線從天上照下來的時候，物品的上端會偏亮，而下方會出現(xiàn)陰影讯嫂。上半部分顏色淺一些蹦锋，而下半部分深一些。

從下面打一束光到人臉上是不是看起來很滲人欧芽？UI 設(shè)計也是同理莉掂。我們的屏幕是平的，但是我們可以通過一些藝術(shù)手法讓它看起來是 3D 的千扔，在每個元素的下方加一些陰影憎妙。

就拿這個按鈕舉例，這是一個相對“扁平化”(flat) 的按鈕曲楚，但依然可以看出一些光線變化的細節(jié):

沒有按下去的按鈕底部邊緣更暗厘唾，因為沒有光線照到那里。

沒有按下去的按鈕上半部分比下半部分稍微亮一些洞渤。這是在模仿一個略有弧度的表面（見側(cè)視圖）阅嘶。

沒有按下去的按鈕下方有一些細微的陰影，在放大圖中看得更清楚载迄。

按下去的按鈕整體顏色都更暗了讯柔，但下半部分的顏色依然比上面深。這是因為按鈕在屏幕的平面上护昧，光線不容易照到魂迄。也有人說，在現(xiàn)實中惋耙，按下去的按鈕顏色更深捣炬，因為手遮擋住了光線。

這么一個簡單的按鈕就有 4 種不同的光線變化绽榛。實際上湿酸，我們可以把這種原則運用到各處。

iOS 6 有點過時了灭美，但還是學(xué)習(xí)光線不錯的案例推溃。這張圖是 iOS 6“勿擾模式”和“通知”的設(shè)置，看看上面有多少種不同的光線變化届腐。

控制面板的上邊緣有一小塊陰影铁坎。

“開啟”滑動槽上部也有陰影。

“開啟”滑動槽的下半部分犁苏，反射了一些光線硬萍。

按鈕是突出的，上邊緣較亮围详，因為是與光源垂直的朴乖，接收了大量光線，折射到你的眼睛中。

因為光線角度的問題寒砖，分割線處出現(xiàn)了陰影赐劣。

通常會內(nèi)嵌的元素：

文字輸入框

按下的按鈕

滑動槽

單選框（未選擇的）

復(fù)選框

通常會外凸的元素

未按下的按鈕

滑動按鈕

下拉控件

卡片

選擇后的單選按鈕

彈出消息

等等，現(xiàn)在不是追求扁平化的設(shè)計嗎哩都？

iOS 7 引發(fā)了科技界對于“扁平化設(shè)計”(flat design) 的追求魁兼。也就是說圖標是平的，不再模仿實物而外凸或內(nèi)凹漠嵌，只有線條和單一顏色的形狀咐汞。

我很喜歡這種干凈、簡潔的風(fēng)格儒鹿，但是我認為這種趨勢不會長久化撕。通過細微的變化模擬出 3D 的效果非常自然，不會被完全取代的约炎。

在不久的將來植阴，我們很可能會看到半扁平的 UI（這也是我推薦你使用的設(shè)計風(fēng)格）我把它稱為“flatty design”，依然非常干凈簡潔圾浅，但是也有一些陰影掠手，有輕點、滑動狸捕、按下操作的提示喷鸽。

現(xiàn)在，Google 也在各個產(chǎn)品上推行他們的 Material Design灸拍，提供一種統(tǒng)一的視覺設(shè)計語言做祝。Material Design 的設(shè)計指導(dǎo)為我們展示了它如何運用陰影表現(xiàn)不同的層次。

這也是我所認同的類型鸡岗。用現(xiàn)實世界的元素來傳遞信息混槐，關(guān)鍵在于:細微。你不能說它沒有模仿現(xiàn)實世界轩性，但也絕不是 2006 年的網(wǎng)頁風(fēng)格纵隔，沒有紋理，沒有梯度炮姨，更沒有光澤。

我認為“flatty”是未來的方向碰煌。扁平化舒岸？早晚會過時的。

法則2：黑白優(yōu)先

在上色前用灰度模式設(shè)計可以簡化大量的工作芦圾，讓你更加關(guān)注空間和元素布局蛾派。

UX 設(shè)計師現(xiàn)在都喜歡“移動優(yōu)先”的概念，這就意味著你要先考慮好在手機上如何顯示頁面，然后才考慮在超清的 Retina 屏幕上的顯示效果洪乍。

這種限制非常好眯杏，能夠幫你理清思路。先解決一些棘手的問題（在小屏幕上顯示）壳澳。然后再解決簡單的問題（在大屏幕上的可用性）岂贩。

我希望你先用黑色和白色設(shè)計，先把復(fù)雜的問題解決了巷波。在不借助顏色幫助的情況下把 app 做得美觀易用萎津。最后再有目的地上色。

這種方法能保持 app“干凈”抹镊、“簡潔”锉屈。加入過多的顏色很容易毀掉簡潔性】宥“黑白優(yōu)先”會促使你關(guān)注空間颈渊、尺寸和布局這些更重要的問題。先來看一些經(jīng)典的用灰度模式設(shè)計的頁面终佛。

“黑白優(yōu)先”法則并不適用于所有情況俊嗽，比如運動、卡通等有著鮮明特色的設(shè)計就需要好好地運用各種顏色查蓉。不過乌询，大部分app并沒有這樣鮮明的特點，只要保持干凈和整潔就好豌研，絢麗的顏色被公認是很難設(shè)計的妹田，所以，還是先用黑色和白色來吧鹃共。

第二步:如何上色

上色最簡單的方法就是只加一種顏色鬼佣。

在灰色的基礎(chǔ)上只加一種顏色可以簡單快速的吸引眼球和注意力。

你也可以更進一步霜浴，在灰色的基礎(chǔ)上加兩種顏色晶衷，或者添加統(tǒng)一色調(diào)的多種顏色。

實踐中的顏色法則——什么是色調(diào)阴孟？

網(wǎng)頁主要用的是十六進制 RGB 表晌纫。但 RGB 不是個好的顏色設(shè)計框架，HSB 模式會更好用永丝，其中 H(hues) 表示色相锹漱，S(saturation) 表示飽和度，B（brightness）表示亮度慕嚷。

HSB 模式是比 RGB 模式更適合我們看待顏色的方式哥牍。如果你對這方面不太了解毕泌，以下是一些 HSB 模式簡單的入門知識。

通過調(diào)整單一色相的飽和度和亮度嗅辣，你可以生成各種不同的顏色——深色撼泛、淺色、背景色澡谭、強調(diào)的地方愿题、吸引眼球的地方等，但是又不會很扎眼译暂。

使用一種或兩種基礎(chǔ)色調(diào)的多種顏色是強調(diào)和淡化某些元素抠忘，而又不把設(shè)計搞得一團糟的最可靠的方法。

關(guān)于顏色的其它幾點建議

顏色是視覺設(shè)計中最復(fù)雜的外永。我從復(fù)雜的理論和長期的實踐中挑出了一些好的建議送給你:

小工具箱：

不要用純黑色：在現(xiàn)實世界中幾乎見不到絕對的黑色崎脉。調(diào)整不同的飽和度可以增加設(shè)計的豐富程度，也更接近現(xiàn)實世界伯顶。

Adobe Color CC：尋找囚灼、調(diào)整、創(chuàng)造顏色組合的絕佳工具祭衩。

在Dribble通過顏色搜索：尋找某種顏色如何搭配的好方法灶体，非常實用，如果你已經(jīng)決定了要用那種顏色掐暮，可以通過顏色搜索看看世界頂級的設(shè)計師是如何配色的蝎抽。

法則3：增加空白空間

為了讓UI看起來更加有設(shè)計感，留出一些空白的空間路克。

在第 2 條法則中樟结，我說到了黑白優(yōu)先的原則，讓設(shè)計師在考慮顏色之前先想想空間和布局精算，那么現(xiàn)在我們就來說說如何安排空間和布局瓢宦。

HTML 的默認版式是這樣的：

所有東西都堆在屏幕上，字號灰羽、行距都很小驮履，段與段之間有一些間隔，但是也不是很大廉嚼。這么布局實在是太難看了玫镐。如果你想設(shè)計出精美的UI，那就需要留出更多空白的空間怠噪。

留白空間摘悴、HTML 和 CSS

如果你和我以前一樣，習(xí)慣用 CSS 來調(diào)整布局舰绘，那你最好改掉這個壞習(xí)慣蹂喻，因為 CSS 默認是沒有留出空間的。試著把空白當作默認狀態(tài)捂寿，在空白頁面添加各種元素口四。從沒有修飾過的 HTML 開始，先做好內(nèi)容秦陋，然后再做排版蔓彩。

下圖是 Piotr Kwiatkowski 設(shè)計的一個音樂播放器。

請注意左側(cè)的菜單欄驳概。字號是 12px赤嚼，行間距有文字的兩倍高。再看看列表的名稱顺又，“PLAYLISTS”和下劃線之間有 15px 的空白更卒，播放列表名稱之間還有 25px 的間距。

在頂部導(dǎo)航欄也有很大的空間稚照，搜索圖標和“Search all music”占到了導(dǎo)航欄高度的 20%蹂空。

留白的空間收到了良好的效果，不同的元素有機的組合在一起果录，使得這個頁面成為最好的音樂播放器 UI 之一上枕。

大量的空白可以把混亂的界面做得簡潔美觀，比如這個論壇：

或者維基百科：

很多人認為在維基百科的這個新頁面上弱恒，很多功能找不到了辨萍，但是你不能否認這是學(xué)習(xí)頁面設(shè)計的一個好案例。

在行之間留出空間返弹。

在各個元素之間留出空間锈玉。

在各組元素之間留出空間。

分析一下哪些是可行的琉苇。

法則4：學(xué)會在圖片上呈現(xiàn)文字

在圖片上優(yōu)雅地呈現(xiàn)文字并不容易嘲玫，這里給出6種方法。

如果你想要成為好的 UI 設(shè)計師并扇，你必須學(xué)會在圖片上美觀地呈現(xiàn)文字去团。優(yōu)秀的設(shè)計師在這方面做得都不錯，而水平較低的設(shè)計師往往在這方面也比較差穷蛹，甚至完全不會土陪。在學(xué)習(xí)了這部分以后，相信你會有很大的提升肴熏。

方法0：直接在圖片上放文字

我很猶豫要不要講這種方法鬼雀，因為應(yīng)用起來十分困難。不過直接在圖片上放文字從技術(shù)上來說也是可行的蛙吏，下面這個網(wǎng)站的首頁就很不錯源哩，所以說說也無妨鞋吉。

直接在圖片上放文字時，有幾點需要非常注意：

圖片應(yīng)該比較暗励烦，而且顏色不能有太大的反差谓着。

文字必須是白色的，我知道你也能找到用其它顏色的案例坛掠。但是我覺得赊锚，你最好還是用白色。

在不同屏幕屉栓，不同尺寸的窗口調(diào)試頁面舷蒲，確保各種情況下文字都是清晰、易于辨識的友多。

上面這 3 個方面調(diào)整好就 OK 了牲平，不要再做其它處理。

我自己從來沒有在任何專業(yè)的項目上直接把文字放在圖片上夷陋，這種方法是可行的欠拾，也能做出酷炫的效果，但還是小心點骗绕。

方法1：暗化整張圖片

可能在圖片上放文字最簡單的方法就是暗化整張圖片藐窄，如果原圖顏色不夠深，你可以用半透明的黑色在上面覆蓋一層酬土，比如下面這個案例就加了一層不透明度 35% 的黑色荆忍。

如果你直接放原圖，底色太亮撤缴，和文字的反差不夠明顯刹枉，看不清文字。

類似的方法同樣適用于小圖屈呕。

加一層黑色是最簡單微宝、普適性最強的。當然你也可以用其它合適的顏色虎眨，比如這樣：

方法2：給文字加個框

這是一種簡單有效的方法蟋软。在白色文字下方加上一個略透明的黑色方塊，就可以放在各種各樣的圖片上了嗽桩，而且顯示效果非常清晰岳守。

當然，你也可以放別的顏色碌冶，只是需要小心謹慎湿痢。

方法3：虛化圖片

虛化圖片是增加文字易讀性的好方法，把文字下方的圖片虛化了扑庞，同時把虛化部分亮度調(diào)低譬重。

iOS 7 用毛玻璃的效果虛化了背景拒逮，而 Windows Vista 也使用了這種虛化效果。

虛化圖片的方法也有局限性臀规，你需要確保在不同屏幕上圖片尺寸調(diào)整后消恍，文字依然是在虛化的區(qū)域上的。

看看下面這個例子以现，你能看清小標題嗎？真不知道這樣的設(shè)計是怎么通過審核上線的约啊。

方法4：底部褪色

所謂底部褪色是將圖片的下邊緣變暗一些邑遏，然后在放上白色的文字。這是一種非常有獨創(chuàng)性的方法恰矩，我不知道在 Medium 之前有沒有人用過记盒，但我是先在 Medium 上看到的。

乍一看外傅，你可能覺得這就是把文字放在了圖片上纪吮。其實不然，圖片上有一些非常細微的變化萎胰，中間完全沒有黑色覆蓋碾盟，而底部有不透明度大約 20% 的黑色覆蓋在上面。

這樣的變化很難看出來技竟，但確實存在冰肴，而且確實提高了文字的可辨認性。

此外榔组，Medium 還給文集圖片上的文字加了些許陰影熙尉，進一步提高了文字的易讀性。最終的效果就是 Medium 可以把任何文字放在任何圖片上搓扯，閱讀體驗非常好检痰。

有人可能會問了，為什么是把圖片的底部變暗呢锨推？為什么不能是圖片的其它區(qū)域铅歼？要回答這個問題，請看法則1：光線來自天空爱态。光線從上面照下來谭贪，圖片的上方亮一些，而底部較暗锦担，看起來更自然俭识。

此外，你還可以把虛化和底部褪色結(jié)合起來洞渔，做出底部虛化的效果套媚，比如下面這張圖的效果：

方法5：把圖片部分區(qū)域的光線變得更柔和

Elastica 的博客的題圖并不是太暗缚态，而且對比都較強。為什么文字的辨識度還這么高呢堤瘤，就像下面兩張圖顯示的這樣：

這里實際上是把圖片局部區(qū)域的光線變得更柔和玫芦，突出了文字。如果我們在瀏覽器上縮小 Elastica 博客本辐，會看出到底發(fā)生了什么桥帆。

在圖片左下角有一塊陰影區(qū)域，文字置于其上，就很容易辨認了。

這可能是在圖片優(yōu)雅呈現(xiàn)文字最細微的一種方法鼠证。我還沒在別處見過疚膊，保存下來，說不定將來什么時候就用到了。

法則5：做好強調(diào)與弱化

把文字設(shè)計得又美觀又得體通常就是通過放大或縮小文字，做出反差的效果。

我認為夺欲，UI 設(shè)計最困難的地方就在于文字的裝飾，因為設(shè)計文字時需要考慮的因素太多了：

字號

顏色

字體粗細

大小寫

斜體

字母間距

頁邊空白（準確的說不是文字的一部分今膊，但是容易影響閱讀時的注意力些阅，所以也算在這個列表里了）

還有其它一些方法調(diào)整文字吸引讀者的注意力，但是不常用万细，也不推薦你使用扑眉。

下劃線。下劃線現(xiàn)在基本上等同于超鏈接了赖钞，我覺得你還是不要挑戰(zhàn)人們的常識比較好腰素。

文字背景色。這個有時候也被當作超鏈接雪营，只不過不是那么常見弓千。

刪除線。一邊待著去吧献起，你這個怪人洋访。

就我個人經(jīng)驗來說，當我覺得一段文字設(shè)計的不好時谴餐，通常不是因為用了大寫字母姻政，或者顏色太重，而是因為各種要素的搭配出了問題岂嗓。

強調(diào)和弱化

你可以把所有的文字樣式分成兩類：

增強可讀性的樣式：大字號汁展、粗體、大寫等；

減弱可讀性的樣式：小字號食绿、與背景對比不明顯侈咕、空白較少等。

上圖“Material Design”這個標題就很突出：字號大器紧、反襯明顯耀销、字體較粗

上圖頁腳的字就是弱化處理的，字號小铲汪、反襯不明顯熊尉、字體較細

我認為文字設(shè)計的核心在于：

標題是唯一需要全部強調(diào)的元素，其它的部分則應(yīng)該將強調(diào)與弱化結(jié)合使用掌腰。

如果網(wǎng)頁上某個元素需要強調(diào)帽揪，把強調(diào)和弱化結(jié)合在一起，可以避免整個頁面看起來太有壓迫感辅斟，同時又讓各個元素的呈現(xiàn)效果恰到好處。

下面這張 Blu Homes 的首頁堪稱是這方面的典范：上方文字較大芦拿，突出顯示士飒，但是用了小寫字母。沒有給人強烈的壓迫感蔗崎。

網(wǎng)頁上的數(shù)字字號較大酵幕，是網(wǎng)頁上的重要信息。但是請注意缓苛，數(shù)字的字體很細芳撒，與背景色對比也不明顯；而數(shù)字下方的單位雖然寫得很小未桥，卻全部加粗笔刹，用大寫字母。

這就是設(shè)計中的平衡冬耿。

上面這張圖是 Contents Magazine 的網(wǎng)站舌菜，也是學(xué)習(xí)強調(diào)和弱化的一個好案例。

文章標題是唯一沒有用斜體的部分亦镶，而且還做了加粗處理日月，更容易吸引讀者的關(guān)注。

作者姓名寫在文章標題下方缤骨，字體加粗爱咬，與沒有加粗的”by“區(qū)分開來。

“ALREADY OUT”獨立出來绊起，字號很小精拟，與背景區(qū)分不明顯，但是用了大寫字母，字間距很大串前，文字外圍空白較多瘫里，當你想要找它的時候一眼就能看見。

鼠標懸偷茨耄或選中時的樣式

設(shè)計鼠標懸徒鞫粒或選中時的樣式也是同樣的道理，只不過更難一些坛吁。

通常情況下劳殖，改變字體大小、大小寫拨脉、粗細時會改變文字所占空間的大小哆姻，讓人們理解鼠標正懸停在這里。

此外玫膀，下面這些要素也能夠影響人們的感受：

文字顏色

背景色

陰影

下劃線

細小的動畫——上升矛缨、下降等

這里再推薦一個比較普適的方法：給白色的元素上色；或者當背景顏色較深時帖旨，把有顏色的內(nèi)容變成白色箕昭。

裝飾文字是非常難的，但是每當我感到“這些文字不可能再變好看時”解阅，我的判斷都是錯的落竹。我需要做的就是不斷優(yōu)化，不斷嘗試货抄。

所以想開點吧述召，如果你設(shè)計出來的文字不好看，不要擔心蟹地，你需要不斷地提升自己的能力积暖，讓自己變得更好。

法則6：只用合適的字體

有些字體很不錯怪与，就用它們吧呀酸。

注意:這一部分沒有太多知識要學(xué)，我只是給你推薦一些好用的免費字體給你琼梆。

有的網(wǎng)站很有個性性誉，會用到比較特別的字體。但是茎杂，大多數(shù)產(chǎn)品的 UI 設(shè)計只要保持干凈错览、簡潔就可以了。所以煌往，把那些太花哨的字體放到一邊吧倾哺。

我在這里推薦一些免費的字體轧邪。因為這篇文章是為初學(xué) UI 設(shè)計的人所寫，這些免費的字體完全夠用了羞海。

我希望你把這些字體下載下來忌愚，在你開始項目設(shè)計之前，瀏覽一下它們却邓。

以下是我推薦的字體：

Ubuntu（上圖）——字體偏粗硕糊，對于有些 app 來說太張揚了，但是對于大多數(shù) app 來說還是不錯的腊徙。在 Google Fonts 上可以找到简十。

Open Sans——非常易于辯讀，是一款很流行的字體撬腾，用在正文非常合適螟蝙，在 Google Fonts 上也能找到。

Bebas Neue——適合作標題民傻，都是大寫字母胰默，在 Fontfabric 上能找到，這個網(wǎng)站上還有一些 Bebas Neue 的應(yīng)用實例漓踢。

Montserrat——只有兩種粗細初坠，但也足夠了。是 Gotham 和 Proximate Nova 最好的免費替代品彭雾，但不如那兩種好。在 Google Fonts 上能找到锁保。

Raleway——適合作標題薯酝，但不適合用于正文。有一個極細的版本（上圖沒有展現(xiàn)）爽柒，在 Google Fonts 可以找到吴菠。

Cabin——在 Google Fonts 可以找到。

Lato——在 Google Fonts 可以找到浩村。

PT Sans——在 Google Fonts 可以找到做葵。

Entypo Social——一個社交網(wǎng)絡(luò)圖標集，在 Entypo.com 上能找到心墅。

這里還有其它一些資源：

Beautiful Google web fonts——有Google Fonts的運用實例酿矢，我經(jīng)常在這里找靈感。

FontSquiirrel——收集了不少可以免費商用的好字體怎燥。

Typekit——如果你用Adobe Creative Cloud（也就是用Photoshop或Illustrator等）瘫筐，你就可以從Typekit中獲得包括Proximate Nova在內(nèi)的大量字體。

法則7：像藝術(shù)家一樣偷師

我第一次坐下來試著設(shè)計按鈕铐姚、圖標策肝、彈窗等各個 app 元素時，我感到我對于什么是“好”知之甚少。但是我也很幸運之众，我并不需要完全設(shè)計全新的 UI拙毫，因為有很多優(yōu)秀的作品可以借鑒。

下面列出一些資源棺禾，肯定會對你的設(shè)計非常有用 (按照重要性從高到低排列)

1. Dribbble

這個專為設(shè)計師而做的網(wǎng)站集合了網(wǎng)上最好的 UI 設(shè)計作品缀蹄，在 Dribbble 上你能找到幾乎各種類型的案例。

你可以關(guān)注一下我的 Dribbble 作品集帘睦。下面是其他一些推薦給你關(guān)注的人：

Victor Erixon——有著非常明顯的個人風(fēng)格袍患，非常厲害。他的作品很漂亮竣付、簡潔诡延，扁平設(shè)計。他做 UI 設(shè)計師已經(jīng) 3 年了古胆，是這方面數(shù)一數(shù)二的人才肆良。

Focus Lab——這些人是 Dribbble 中的名人，他們的作品非常多樣化逸绎，絕對是一流的惹恃。

Cosmin Capitanu——他是個通才，做出來的東西很瘋狂棺牧，有未來感巫糙，但又不太花哨。他用色非常棒颊乘，但并不只專注做 UX 設(shè)計的参淹。

2. Flat UI Pinboard

這里面有一些特別棒的手機 UI 設(shè)計，你能找到很多精美的 UI 設(shè)計實例乏悄。

3. Pttrns

這里面有大量 app 截屏浙值，它的一大好處在于，它是按照 UX 模式分類的檩小，因此开呐，你在搜索你手頭正在做的這一類作品時非常方便。

我堅定地認為每個藝術(shù)家初期都該像鸚鵡一樣规求，不斷的模仿和學(xué)習(xí)筐付，直到能把頂尖的作品模仿得惟妙惟肖，然后再開始找到自己的風(fēng)格阻肿，引領(lǐng)新的潮流家妆。

所以，像個藝術(shù)家一樣偷師吧冕茅！

總結(jié)

我之所以寫這篇文章伤极，是因為我很遺憾自己當初在學(xué) UI 設(shè)計時蛹找，沒有這樣的教程。我希望這篇文章能幫到你哨坪。如果你是一名 UX 設(shè)計師庸疾，在畫好框架和線框圖之后，做出個漂亮的實物模型吧当编。如果你是一名開發(fā)者届慈，把你下一個項目做得更美觀一些吧。

UI 設(shè)計的學(xué)習(xí)不可能一蹴而就忿偷，而是需要不斷地觀察金顿、模仿并且和他人交流。以上是到目前為止我所學(xué)到的鲤桥，我也會保持著初學(xué)者的心態(tài)揍拆，繼續(xù)前進

(轉(zhuǎn)載自網(wǎng)絡(luò)，侵權(quán)請聯(lián)系刪除）

-------------------------------------------

有興趣一起學(xué)UI的茶凳，看可以加我QQ:3249298400

也歡迎加入我的學(xué)習(xí)群：554258563

軟件/字體/筆刷/規(guī)范/課程等免費學(xué)習(xí)資料在等你~

啾咪~