UI設(shè)計(jì)是有做得好的規(guī)則存在的，即便你是“半路出家”做UI，也可以從這些前人總結(jié)的規(guī)則中，做好UI設(shè)計(jì)。

前言

今天這篇文章是來(lái)自西雅圖的獨(dú)立UI/UX設(shè)計(jì)師Erik D. Kennedy，他在用戶體驗(yàn)和視覺(jué)設(shè)計(jì)方面有很豐富的經(jīng)驗(yàn)。

同時(shí)他還運(yùn)營(yíng)了一個(gè)設(shè)計(jì)網(wǎng)站，Learn UI Design，他會(huì)在上面分享自己學(xué)習(xí)的心得，也會(huì)發(fā)布一些視頻教程。有興趣的朋友可以關(guān)注一波。

因?yàn)槭怯⑽募炎?，小編能力有限，所以找了英語(yǔ)專業(yè)的小伙伴來(lái)幫忙，如果有發(fā)現(xiàn)什么紕漏，emmm，我們改……

在閱讀文章前，你必須要知道，這份設(shè)計(jì)指南并非適合所有的人。

那誰(shuí)需要看我們這些設(shè)計(jì)指南呢？

• 初學(xué)設(shè)計(jì)的入門學(xué)生。
• 希望直接可以設(shè)計(jì)美觀頁(yè)面的開(kāi)發(fā)人員。
• 希望有更好用戶體驗(yàn)的用戶體驗(yàn)設(shè)計(jì)師。

那在這份指南中你將會(huì)獲得什么呢？

首先，我是一名沒(méi)有UI視覺(jué)技能的用戶體驗(yàn)設(shè)計(jì)師。我喜歡設(shè)計(jì)用戶體驗(yàn)，但是在我意識(shí)到需要去學(xué)習(xí)“如何讓界面看起來(lái)更好”之前，我花費(fèi)一個(gè)項(xiàng)目周期90%的時(shí)間去瘋狂的學(xué)習(xí)，拼命搜索谷歌，瀏覽Pinterest和Dribbble，以便從中復(fù)制。

而以下這些規(guī)則都是那段時(shí)間我所學(xué)到的經(jīng)驗(yàn)：

1. 光來(lái)自天空
2. 黑與白第一
3. 加倍你的留白
4. 了解在圖像上疊加文本的方法
5. 使文本彈出和不彈出
6. 只使用好的字體
7. 像藝術(shù)家一樣竊取

那接下來(lái)就讓我們一一展開(kāi)來(lái)討論吧。

一、規(guī)則1：光來(lái)自天空

人類大腦通過(guò)陰影解析到我們正在看什么用戶界面元素。

這可能是我們理解UI設(shè)計(jì)最重要但經(jīng)常被忽略的規(guī)則。

我們都知道光來(lái)自天空，已經(jīng)習(xí)慣了光的照射方式，以至于從下面來(lái)的光會(huì)看起來(lái)更加怪異。

WoooOOOooo（國(guó)外設(shè)計(jì)師也愛(ài)恐怖片?。?/p>

當(dāng)光線來(lái)自天空時(shí)，它照亮了物體的頂部并在它們下面投下陰影。物體的頂部較亮，底部較暗。

UI也是如此；就像面部特征中，所有底面上都有小陰影一樣，在您可以找到的幾乎每個(gè)UI元素的下側(cè)都有陰影。

我們的屏幕是平的，但是我們?cè)谠O(shè)計(jì)過(guò)程中盡量讓元素看起來(lái)更立體。即使在現(xiàn)在扁平化當(dāng)?shù)赖某绷飨?，我們也能在很多?yōu)秀作品的細(xì)節(jié)中，看到這條規(guī)則存在的意義。

就拿按鈕來(lái)說(shuō)，即使使用這個(gè)相對(duì)“扁平”的按鈕，仍然有一些與光有關(guān)的細(xì)節(jié)：

• 未按下的按鈕(頂部)具有深色邊框；
• 未按下的按鈕頂部比底部略亮；
• 未按下的按鈕投射出一個(gè)微妙的陰影；
• 按下的按鈕底部比頂部更暗，整體也呈現(xiàn)暗色調(diào)，因?yàn)槲覀兊氖终趽趼怨饩€。

iOS 6有點(diǎn)過(guò)時(shí)了，但它在輕松行為方面做了很好的案例研究

這是iOS系統(tǒng)設(shè)置模塊的——“請(qǐng)勿打擾”和“通知”。 細(xì)節(jié)處的光效非常豐富。

• 插入控制面板的上唇投下一個(gè)小陰影；
• “ON”滑塊軌道是凹形的，底部反射更多光線；
• 滑動(dòng)滑塊，看到它們頂部周圍的明亮邊框？這代表它是垂直于光源的表面，因此接收大量光線，從而將大量光線反射到您的眼睛中；
• 分隔器凹口被遮擋在遠(yuǎn)離太陽(yáng)的角度，反之亦然。

分割線缺口處的特寫鏡頭

在上面提到了“扁平化設(shè)計(jì)”，那具體如何解釋扁平和光效的關(guān)系呢？

在ios7開(kāi)始的設(shè)計(jì)潮流中，“扁平化設(shè)計(jì)”在科技界引起轟動(dòng)。

的確，它確實(shí)是平的，沒(méi)有模擬的凸起或者凹痕，只有純色的線條和形狀。

可是在不久之后，“半扁平化設(shè)計(jì)”的概念就興起，它仍然很干凈、很簡(jiǎn)單，但是你會(huì)發(fā)現(xiàn)，在一些設(shè)計(jì)元素的細(xì)節(jié)上，都有陰影的體現(xiàn)。

OS X Yosemite— 帶有光影細(xì)節(jié)的扁平化設(shè)計(jì)

同時(shí)，谷歌推出的“Material Design”設(shè)計(jì)語(yǔ)言，這種統(tǒng)一的視覺(jué)語(yǔ)言，其核心就是尋求模擬物理世界的物品，在它的設(shè)計(jì)規(guī)范中也提到了如何使用不用的陰影來(lái)傳達(dá)不同的深度。

這就是我所看到的和我所理解的，對(duì)用戶最為友好對(duì)一種表現(xiàn)方式。它使用現(xiàn)實(shí)世界的微妙細(xì)節(jié)表現(xiàn)來(lái)傳達(dá)信息。

我想，“Flatty”就是以后UI設(shè)計(jì)的發(fā)展方向，純扁平化和擬物都已經(jīng)是過(guò)去的事情了。

二、規(guī)則2：黑與白第一

1. 在為設(shè)計(jì)做配色之前，先把畫面進(jìn)行灰度設(shè)計(jì)

簡(jiǎn)化了視覺(jué)設(shè)計(jì)中最為復(fù)雜的元素，迫使設(shè)計(jì)師專注于元素間距和頁(yè)面布局。

就像現(xiàn)在的交互設(shè)計(jì)都是“移動(dòng)優(yōu)先”，這就意味著，先從更難的問(wèn)題開(kāi)始解決（小小移動(dòng)設(shè)備屏幕上的交互），然后采用類似解決方案來(lái)解決更容易的問(wèn)題（大屏幕上pc設(shè)備的交互）。

類似在視覺(jué)設(shè)計(jì)中的規(guī)則：首先設(shè)計(jì)黑色和白色。也就是我們?cè)跊](méi)有顏色的幫助下，去使用各種方式來(lái)達(dá)到產(chǎn)品的美觀性和易用性，最后在添加顏色。

Haraldur Thorleifsson的灰度線框看起來(lái)和完成的網(wǎng)站一樣好

這也是讓產(chǎn)品看起來(lái)“干凈”和“簡(jiǎn)單”的可靠辦法。過(guò)多的顏色往往很容易搞砸設(shè)計(jì)。而“黑與白第一”迫使你首先關(guān)注間距、尺寸和布局等內(nèi)容，這些才是簡(jiǎn)約設(shè)計(jì)的主要關(guān)注點(diǎn)。

優(yōu)雅的灰度

而在某些情況下，“黑與白第一”看起來(lái)并不有用。我們?cè)谠O(shè)計(jì)具有強(qiáng)烈特定態(tài)度的作品的時(shí)候，如“運(yùn)動(dòng)型”、“華麗畫面”、“卡通設(shè)計(jì)”等，這些都是需要非常好的去使用顏色來(lái)表達(dá)產(chǎn)品。

Julien Renvoye（上）和Cosmin Capitanu（下）的華麗和充滿活力的設(shè)計(jì)

2. 接下來(lái)，就是如何去添加顏色

最簡(jiǎn)單的方案就是只使用一種顏色。

在灰度的頁(yè)面上只添加一種顏色可簡(jiǎn)單有效的吸引眼球。

你也可以邁出一步，使用灰度+兩種顏色，或灰度+單色調(diào)的多種顏色來(lái)傳達(dá)設(shè)計(jì)思想。

如何過(guò)你還不清楚什么是色調(diào)？

這里有一篇非常好的關(guān)于色調(diào)的入門讀物《甲方竟敢說(shuō)你的配色丑！ 我來(lái)教你懟回去（三）》可以看看。

來(lái)自Smashing Magazine的單色金色主題

來(lái)自Smashing Magazine的單色藍(lán)色主題

通過(guò)修改單個(gè)色調(diào)的飽和度和亮度，可以生成多種顏色，但它并不會(huì)讓人眼前一亮。

而使用來(lái)自一個(gè)或兩個(gè)基色調(diào)的多種顏色，是在保證設(shè)計(jì)不混亂的情況去，去強(qiáng)調(diào)和中和元素最可靠的方法。

Kerem Suer的倒數(shù)計(jì)時(shí)器

三、規(guī)則3：加倍你的留白

如果想讓你的頁(yè)面看起來(lái)是被設(shè)計(jì)過(guò)的，那就通過(guò)大量的頁(yè)面留白來(lái)增加元素之間的喘息空間。

在“規(guī)則2-黑與白第一”中，設(shè)計(jì)師在設(shè)計(jì)顏色之前就考慮間距和布局，這是一件好事。那么，現(xiàn)在就開(kāi)始討論間距和布局吧。

如果你有編寫HTML的經(jīng)驗(yàn)，在熟悉的HTML默認(rèn)布局的頁(yè)面上，一切都被堆砌到屏幕的頂部。字體很小，線條之間沒(méi)有空間，段落之間的空間也不夠。

這些從審美的角度來(lái)說(shuō)，實(shí)在太糟糕了。

還是那句話，如果想要讓頁(yè)面看起來(lái)具有設(shè)計(jì)感，那就加大頁(yè)面的喘息空間，哪怕是過(guò)大的留白也比毫無(wú)留白來(lái)的好。

如果你和我之前一樣，習(xí)慣于使用默認(rèn)的格式去編輯頁(yè)面，現(xiàn)在就應(yīng)該認(rèn)識(shí)到哪些壞習(xí)慣了。

我們把留白作為頁(yè)面的設(shè)計(jì)元素，所有的內(nèi)容都以空格開(kāi)頭，知道有其它的元素替換它。

節(jié)奏感是設(shè)計(jì)頁(yè)面的一個(gè)重要原因。

從一個(gè)空白頁(yè)面也就開(kāi)始意味著從留白開(kāi)始。從一開(kāi)始就想到的邊距和間距，用你所添加的元素有意識(shí)的去一個(gè)一個(gè)替換空白。

這是Piotr Kwiatkowski的音樂(lè)播放器概念

請(qǐng)?zhí)貏e主意左邊的菜單

菜單項(xiàng)之間的垂直空間是文本高度的兩倍，文本為12px字體，其字高和上下間距相同。

再看看列表標(biāo)題：

標(biāo)題“PLAYLISTS”和它下面的下劃線之間有15px的空白，這不僅僅是字體本身的字高，也就是說(shuō)清單之間的留白達(dá)到了25px。

頂部導(dǎo)航欄中有更多空間。

“搜索所有音樂(lè)”文本是條形高度的20％；圖標(biāo)的比例相似。

右側(cè)邊欄顯示文本行之間的寬松間距，都是設(shè)計(jì)師有意識(shí)的去做的，并且展現(xiàn)出了很好的效果。就美學(xué)而言，這些都足以和最好的音樂(lè)UI競(jìng)爭(zhēng)。

慷慨的留白可以使一些最混亂的界面看起來(lái)更簡(jiǎn)潔。

Forum design concept by Matt Sisto

Wikipedia design concept by Aurélien Salomon

最后重要的事情重復(fù)一遍：

• 在你的線之間放置空白；
• 在元素之間放置空白；
• 在元素組之間放置空白；
• 整體分析什么才是最重要的。

小結(jié)

好了，以上就是第 1 部分，感謝你們看到了這里。

接下來(lái)在第二部分中，我們會(huì)討論最后的 4 條規(guī)則：

1. 了解在圖像上疊加文本的方法
2. 使文本彈出和不彈出
3. 只使用好的字體
4. 像藝術(shù)家一樣竊取

如果你覺(jué)得這些對(duì)你有幫助，可以關(guān)注下我們第2部分的分享。

原文作者：Erik D. Kennedy

原文鏈接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

本文由 @設(shè)計(jì)師日記 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。