原文:7 Rules for Creating Gorgeous UI (Part 1)
翻譯:David Lee
簡介
各位,友情提醒先。這篇指導(dǎo)并不適用于所有人,那么,對誰才有用呢?
開發(fā)者--在必要的時候,希望自己能夠設(shè)計出漂亮UI的開發(fā)工程師
用戶體驗(UX)設(shè)計師--他們希望自己的作品集比呆板的PPT更好看,或者,想通過絢麗的UI包裝傳達(dá)更極致的用戶體驗,也同樣適用。
如果你讀過藝術(shù)院校或者你認(rèn)為自己已經(jīng)成為一個視覺設(shè)計師了,那你很有可能發(fā)現(xiàn)這篇文章中充斥著:
a 無聊 b 錯誤?還有 c 讓人惱怒的內(nèi)容。
我不會介意的,你們所有的批評都是對的。關(guān)了這個,去讀點別的吧。
或者,還是我告訴你你到底能在這篇文章中學(xué)到什么吧。
首先,我曾是一名完全不懂視覺設(shè)計的用戶體驗設(shè)計師。我真心熱愛用戶體驗設(shè)計,但當(dāng)我意識到,我可以找到一大堆理由來支持自己去學(xué)習(xí)——如何設(shè)計一個看上去不錯的界面的時候,就放棄了單純的UX設(shè)計:
我的作品集就是個垃圾,完全沒能展現(xiàn)出我工作和思考的過程
如果能提供更多專業(yè)的意見,而不僅僅是畫幾個方框和箭頭這么簡單,我的咨詢客戶肯定更愿意為此買單。
說不準(zhǔn)某天我會考慮加入一個早期的創(chuàng)業(yè)項目?最好能成為工作中的全能王。
理由是找到了,但我真的不懂美學(xué)這玩意兒。畢竟我只是個工程學(xué)的學(xué)士–最值得驕傲的地方,大概就是能把某個東西設(shè)計的奇丑無比。
“我只是個工程學(xué)的學(xué)士–最值得驕傲的地方大概就是能把某個東西制造的奇丑無比。?”
最終,APP的設(shè)計美學(xué)還是被我搞懂了,用的是我一貫的方法:冷酷,扎實的分析。而且只要能用的上,我不以“抄襲”為恥。我會花10小時來搞定一個設(shè)計項目,但實際的設(shè)計工作只有1小時。其余9小時都在被痛苦的學(xué)習(xí)過程折磨著。幾乎絕望的在google,pinterest和dribbble上面找一些能借鑒的設(shè)計素材。
下面的“規(guī)則”就是從這些時光里歸納出來的。
送給那些書呆子:現(xiàn)在我的UI設(shè)計算是做的不錯,那是因為我分析研究了很多東西——并不是因為我突然開竅憑著直覺就理解了美和平衡。
這篇文章講的不是理論,純粹是實用性的內(nèi)容。你不會在文章里看到黃金比例。我甚至不會提及配色法則。我從失敗的設(shè)計中學(xué)到的就是,這事兒只能憑靠堅持不懈的練習(xí)才能達(dá)成。
試著這么想一下:柔道的建立源自于幾個世紀(jì)以來日本的物質(zhì)文化和哲學(xué)傳統(tǒng)。你去報個柔道班,除了打斗外,你還會聽到很多關(guān)于能量,氣流和協(xié)調(diào)的說辭。大概我要講的也是這類東西。
馬伽術(shù),簡單介紹一下,1930年的捷克,某個彪悍的猶太人對付納粹時發(fā)明的格斗術(shù)。這玩意一點兒都不藝術(shù)。在馬伽術(shù)的課程里,你會學(xué)到如何用一支鋼筆或者書來挖掉對方的眼睛。
我要講的就是界面版的馬伽術(shù)。
規(guī)則
如下:
光來自于天空
先用黑白來檢驗設(shè)計
留白的地方放大兩倍
學(xué)習(xí)文字置于圖上的方法(Part 2)
讓文字看上去很時尚— 或者不時尚(Part 2)
只用好看的字體(Part 2)
像藝術(shù)家一樣去剽竊(Part 2)
我們開始學(xué)習(xí)吧。
規(guī)則1:光來自于天空
大腦在理解我們看到的界面時,影子是至關(guān)重要的因素。
這也許是學(xué)習(xí)UI設(shè)計時最重要卻又不明顯的一個理念:光是來自于天空的。.光從天而降,這事兒太稀疏平常了,而且一直如此,以至于從下方打出的光看上去真的很詭異。
光源來自于上方時,它會照亮物體的頂部并在下方制造陰影。物體的頂部就會更亮,下方就會更暗。
你不會希望人們的下眼瞼都特別的黑吧,所以,如果我們在這些惡魔般的眼睛上面多加一些光亮,突然間他們就變成了你家門前的魔鬼女郎。
是的,這個真理同樣適用于UI。就好像在我們的面部特征中總能看到陰影處于下方,當(dāng)你看遍那些UI元素,你會發(fā)現(xiàn)他們的下方同樣有陰影存在。屏幕雖然是平的,但我們花了大量心血,造就了平面上也可以顯現(xiàn)三維效果的藝術(shù)。
我最喜歡的部分是圖片下方靠右的那個手指圖標(biāo)。
比如這個按鈕,即使是近乎“扁平”的按鈕,也有著很多與光線相關(guān)的細(xì)節(jié):
未點擊的按鈕有一個黑色的底邊,少年你懂的,太陽是照不到那里的……
按鈕在未點擊狀態(tài)下,頂部會比底部更亮一些。這是因為按鈕上有一個細(xì)微的曲面。比如,你需要把一面鏡子在你面前向上翹起才能在鏡中看到陽光,所以向上翹起的平面總會對你反射更多的光。
未點擊的按鈕會投射一些稀薄地陰影?——?可能在放大的截圖中能看的更清楚。
點擊后的按鈕,底部依然比頂部還要暗一些,并且整個按鈕全都更暗……這是因為它與屏幕本身處于同一個平面,光線就不能輕易的照到它了。也有人提出現(xiàn)實世界中的按鈕,點擊之后也會變暗,是因為我們的手擋住了光線。
這只是個按鈕而已,就已經(jīng)呈現(xiàn)了4個細(xì)微的光線效果。學(xué)習(xí)暫告一階段,我們現(xiàn)在要把光線理論用在所有地方。
iOS 6有一點過時了,但是如果你想了解光線的特征,它可以做為一個很好的案例來進行研究。
這是一對iOS 6設(shè)置按鈕?—?“勿擾模式”?和?“提醒”。這沒什么了不起的,對吧?但是我們仔細(xì)看看有多少光線效果在其中起了作用。
嵌入式的控制器頂部邊緣投射了一個很微小的陰影
滑動按鈕“打開”的邊緣也有一些陰影
滑動按鈕“打開”的表面是凹陷的,底部會反射更多光線
小圖標(biāo)有一點點凸起。你看到它上半部分的亮光了嗎?這說明它的表面和光源是有些垂直的,因此它能接受到很多光線,同樣它也能把很多管線反射到你的眼睛里。
分欄凹槽的陰影處有一點兒彎曲的感覺,這是因為陽光來自上方,如果光線反過來,那么陰影也會隨之變化。
又一個分欄凹槽的樣式,來自于我曾經(jīng)設(shè)計的Hubster。
常見向內(nèi)凹陷的視覺元素:
文字輸入?yún)^(qū)域
點擊后的按鈕
滑動軌跡
Radio按鈕?(未選中時)
勾選框
常見向外突出的視覺元素:
按鈕?(未點擊時)
滑動的按鈕
下拉控制面板
卡片
已被選中的radio按鈕(其中的按鈕部分)
彈出框
現(xiàn)在你懂了吧,你會在很多地方看到他們。歡迎入門,少年。
等等,那扁平的設(shè)計呢?
iOS7的“扁平設(shè)計”曾經(jīng)在各大科技論壇掀起了轟動。正如它的名字所說,它真心是扁平的。沒有任何模擬現(xiàn)實的突出或者凹痕——只有線,形狀和單色。
我跟你們一樣,真心喜歡干凈簡潔的設(shè)計,但是實話實說,我不認(rèn)為這會是個持久的趨勢。那些在細(xì)微處模仿3D空間的界面設(shè)計真的讓人感覺很自然,似乎我們很難將這種做法完全放棄。
更有可能的是,我們會在不遠(yuǎn)的將來看到更多半扁平化的設(shè)計。(這也是我建議你盡快掌握的設(shè)計風(fēng)格)。?我會稱這種風(fēng)格為?“扁平化設(shè)計”。依然干凈,依然簡潔,但是當(dāng)你敲擊,滑動,點擊的時候,還是能看到陰影和曲線?。
OS X Yosemite—?扁平化,但不扁平。
就在我寫這篇文章的時候,Google基于旗下不同產(chǎn)品推出了他們的“Material Design”語言。這是獨樹一幟的視覺語言,它的精髓就在于,追求模仿物理世界。
這是Material Design上面的一個圖示,示意如何通過不同的陰影來表示不同的深度。
這才是我身邊最常出現(xiàn)的事物。
它使用了真實世界一些細(xì)微的元素來傳遞信息。這一點至關(guān)重要,只是細(xì)微的。
也不能說它完全沒有模擬真實世界,但是這不同于2006年的網(wǎng)頁設(shè)計風(fēng)格。并沒有使用材質(zhì),漸變和光澤的情況出現(xiàn)。
我認(rèn)為,扁平化就是未來之路,至于扁平的?估計很快就要成為過眼云煙。
扁平設(shè)計現(xiàn)在看起來可真火?。?/p>
規(guī)則 2: 以黑白效果起步
顏色是最為復(fù)雜的設(shè)計元素,在增加顏色之前,設(shè)計只是灰度的,這更容易讓你關(guān)注元素之間的空間和布局。
用戶體驗設(shè)計師最近真的很關(guān)注“移動優(yōu)先”。這意味著你得想象頁面上的交互在一個手機上是否行得通,即使你面對的是一臺超高分辨率的Retina顯示器。
這種預(yù)設(shè)的限制條件非常好,它能讓思路更明晰。你從一個較難的問題起步(在小屏幕上構(gòu)建一個可用的應(yīng)用),然后再讓方案適應(yīng)更容易解決的問題(大屏幕上的可用應(yīng)用)。
這個限制條件的情況跟上面類似:從黑白效果開始設(shè)計。從更難的問題出發(fā),先讓應(yīng)用無論在任何情況下都漂亮和好用,唯獨缺少顏色。最后再加入顏色,同時要保證,顏色的加入都有目的性。
Haraldur Thorleifsson的灰度線框看上去要比少數(shù)設(shè)計師最終的網(wǎng)頁設(shè)計作品還好
這就是讓應(yīng)用看上去“干凈”“整潔”的最靠譜方法。如果你在每個地方都使用了很多顏色,那會讓設(shè)計看上去很糟糕。黑白效果會強迫你優(yōu)先專注于空間,大小和布局,而這才是讓頁面看起來干凈簡潔的更深層次的原因。
經(jīng)典灰度設(shè)計。
有些情況下,黑白效果就沒什么用了。比如為了這幾個明確的目標(biāo)進行設(shè)計的時候——“動感的”,“炫目的”,“卡通風(fēng)格的”等等,這需要設(shè)計師支配顏色的能力異常強大。但是大多數(shù)應(yīng)用并不需要如此明確的設(shè)計目標(biāo),只要做到干凈和簡潔就夠了。而對于設(shè)計來說,這正是公認(rèn)更難做到的事情。
炫目且充滿活力的設(shè)計,由Julien Renvoye(左側(cè))和Cosmin Capitanu(右側(cè))所設(shè)計。這些設(shè)計要比看起來難得多。
黑白效果,無處不在。
步驟2:?如何增加顏色
最簡單的顏色使用方法就是添加單色。
為一個灰度的網(wǎng)頁設(shè)計增加單色能夠輕易高效的吸引眼球。
你也可以更進一步。灰度+兩種顏色,或者灰度+同一色調(diào)下的多種顏色。
顏色密碼實戰(zhàn)——等等,什么是色調(diào)?
大多數(shù)情況下網(wǎng)頁中的顏色都是使用RGB16進制代碼來實現(xiàn)的。因為RGB的使用幾乎成為常識,所以我們往往忽略了這樣一個事實,RGB并非在設(shè)計中實現(xiàn)顏色的最優(yōu)框架。而比它更好的框架是HSB(H代表色調(diào),S代表飽和度,B代表亮度)
HSB比RGB更好是因為它更符合我們認(rèn)知顏色的方式,而且你能夠預(yù)料到當(dāng)你改變HSB數(shù)值時會對顏色產(chǎn)生怎樣的影響。
如果這對你來說還是個新聞,那你可以讀讀這篇文章,高級的HSB顏色框架。
單色調(diào)金色主題?來自Smashing Magazine.
單色調(diào)藍(lán)色主題?來自Smashing Magazine.
通過修改一個色調(diào)的飽和度和亮度,你可以創(chuàng)建多種顏色——暗色,亮色,背景色,強調(diào)色,搶眼——但是又不至于讓眼睛無法承受。
在設(shè)計中強調(diào)或者中和某種元素時,最靠譜的方法是使用基于統(tǒng)一色調(diào)(或兩種色調(diào))的多種顏色,這能避免將整個設(shè)計搞得亂七八糟。
由Kerem Suer所做的倒數(shù)計時器,顏色的使用很有亮點
在視覺設(shè)計領(lǐng)域,顏色是最為復(fù)雜的。所以當(dāng)你開始手頭的設(shè)計工作時,很多關(guān)于顏色的工具都低效或者并不實用,但我要介紹幾個真心給力的好工具。
小工具合集:
永不使用黑色(Ian Storm Taylor).?這個網(wǎng)站上秉持的觀點是純粹的灰色在真實世界里幾乎沒有出現(xiàn)過,還有色調(diào)是如何影響陰影的灰度?-?尤其是陰影的暗部?-?這能為你的設(shè)計增添更多視覺豐富感。另外,帶有色調(diào)的灰度色更加接近對真實世界的模擬,這是個固有的優(yōu)點。
Adobe Color CC用來查找顏色,修改顏色和創(chuàng)建顏色組合的超酷工具。
Dribbble按顏色查找這是另一個技巧,你可以按特定顏色查找設(shè)計作品的。讓顏色的運用有據(jù)可查,一旦你已經(jīng)確定了需要實用的顏色,就來這里看看世界上最優(yōu)秀的設(shè)計師在他們的設(shè)計上如何使用同樣的顏色。
規(guī)則3:?讓留白擴大兩倍
為了讓UI看上去更有設(shè)計感,可以留出更多通透的空間。
在規(guī)則2里,我們提過黑白效果會強迫設(shè)計師在考慮顏色之前先去思考頁面空間和布局,并且這種思考模式非常好。好吧,接下來的時間我們好好聊聊空間和布局。
如果你寫過HTML代碼,你可能很熟悉HTML代碼以這種最原始的樣子展示在頁面上。
基本上,所有東西都被打散放置到屏幕上,字體很??;行與行之間基本沒有空間。段落之間有一點點空間,但是遠(yuǎn)遠(yuǎn)不夠。段落的直接延伸到頁面的另一端,無論頁面寬度是100px還是10000px,這顯然也不夠好。
從美學(xué)角度說,這簡直糟透了。如果你希望你所做的UI看起來是設(shè)計過的,你需要在設(shè)計中增加更多透氣的空間。
有時候需要增加的空間多到近乎荒謬。
空白區(qū)塊,HTML和CSS
如果你跟我一樣,習(xí)慣于使用CSS來控制頁面的布局,并且默認(rèn)狀況下不會使用空白區(qū)塊,那現(xiàn)在是時候來改變自己的壞習(xí)慣了。在一開始就把空白區(qū)塊當(dāng)作頁面默認(rèn)的樣子——一切都從空白區(qū)塊開始,知道你用別的頁面元素來替代這個位置。
聽起來很有禪意?我覺得這正是大多數(shù)人直接忽略這件事的原因所在。
以空白的表格來搭建你的頁面,這需要你只使用空白區(qū)來開始設(shè)計。你會在最初就考慮到邊距和空間。無論你在頁面上面畫些什么東西,都會慎重考慮其對空白區(qū)域的影響。
從一堆沒有樣式的HTML開始布局,也意味著你會更關(guān)注頁面和內(nèi)容的關(guān)系??臻g和留白是后續(xù)考慮的事情,這一點必須明確。
這是一個音樂播放界面的概念設(shè)計,來自Piotr Kwiatkowski.
特別注意一下左邊的菜單。
左側(cè)菜單
菜單項之間的垂直空間高度正好是文字高度的兩倍。你所看到的12px字體上下正好有同樣高度的留白。
或者也可以注意一下列表中的標(biāo)題。標(biāo)題“播放列表”和它下面的下劃線之間有15px的距離。這比字體本身的高度還要高一些。更不用說每個列表之間的距離有25px那么遠(yuǎn)。
頂部的導(dǎo)航條有更多的空間。文字“搜索音樂”占了整個導(dǎo)航條高度的20%。圖標(biāo)也使用了類似的高度。
左邊欄的文字之間留出了比較充裕的空間,甚至更多。
Piotr在留白這件事上真是做到了仁至義盡,而且結(jié)果顯而易見。這雖然是他自娛自樂做的概念設(shè)計,但因為在美感上下足了功夫,能夠和市面上最好的音樂播放器UI界面相提并論。
好吧,充分的留白可以讓最亂的界面看上去簡潔和誘人——像Forum一樣。
Forum的概念設(shè)計,來自Matt Sisto
活著Wikipedia.
Wikipedia概念設(shè)計,來自Aurélien Salomon
你會發(fā)現(xiàn)對此有很多爭論,比如,有人指出Wikipedia的再設(shè)計從理念上完全忽略了使用網(wǎng)站時的功能性。但是我們也不能說這不是個好設(shè)計,完全不值得學(xué)習(xí)!
在行之間留出空間。
在元素之間留出空間。
在元素構(gòu)成的組之間留出空間。
分析怎么樣才是最有效的。
好吧,這就是第一部分的內(nèi)容。謝謝你的持續(xù)關(guān)注。