創(chuàng)造華麗UI的7條規(guī)則(Part1)

原文: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)注。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,084評論 25 708
  • [轉(zhuǎn)] 糖箔糊2014.09.23 文章索引 1.1 為iOS而設(shè)計(Designing for iOS) 1.1...
    镹壹閱讀 2,427評論 0 31
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 我是一頭黃牛,沒有名字,我的主人就叫我牛,他沒什么文化,看見什么就是什么,比如看見我是一頭牛,那就是牛了,我倒是無...
    寫意小生閱讀 476評論 0 1
  • 深夜孤舟人已醉 湖面無聲映憔悴 離別愁苦不曾少 此地空余相思淚 功名利祿人皆隨 徒留孤寡獨傷悲 仰望明月原如故 可...
    惪行閱讀 414評論 0 0