起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識7大規(guī)則：非科班出身設計師如何做好UI設計（Part 1）
UI設計是有做得好的規(guī)則存在的，即便你是“半路出家”做UI，也可以從這些前人總結的規(guī)則中，做好UI設計。
前言
今天這篇文章是來自西雅圖的獨立UI/UX設計師Erik D. Kennedy，他在用戶體驗和視覺設計方面有很豐富的經驗。
同時他還運營了一個設計網站，Learn UI Design，他會在上面分享自己學習的心得，也會發(fā)布一些視頻教程。有興趣的朋友可以關注一波。
因為是英文佳作，小編能力有限，所以找了英語專業(yè)的小伙伴來幫忙，如果有發(fā)現(xiàn)什么紕漏，emmm，我們改……
在閱讀文章前，你必須要知道，這份設計指南并非適合所有的人。
那誰需要看我們這些設計指南呢？
- 初學設計的入門學生。
- 希望直接可以設計美觀頁面的開發(fā)人員。
- 希望有更好用戶體驗的用戶體驗設計師。
那在這份指南中你將會獲得什么呢？
首先，我是一名沒有UI視覺技能的用戶體驗設計師。我喜歡設計用戶體驗，但是在我意識到需要去學習“如何讓界面看起來更好”之前，我花費一個項目周期90%的時間去瘋狂的學習，拼命搜索谷歌，瀏覽Pinterest和Dribbble，以便從中復制。
而以下這些規(guī)則都是那段時間我所學到的經驗：
- 光來自天空
- 黑與白第一
- 加倍你的留白
- 了解在圖像上疊加文本的方法
- 使文本彈出和不彈出
- 只使用好的字體
- 像藝術家一樣竊取
那接下來就讓我們一一展開來討論吧。
一、規(guī)則1：光來自天空
人類大腦通過陰影解析到我們正在看什么用戶界面元素。
這可能是我們理解UI設計最重要但經常被忽略的規(guī)則。
我們都知道光來自天空，已經習慣了光的照射方式，以至于從下面來的光會看起來更加怪異。
WoooOOOooo（國外設計師也愛恐怖片?。?/p>
當光線來自天空時，它照亮了物體的頂部并在它們下面投下陰影。物體的頂部較亮，底部較暗。
UI也是如此；就像面部特征中，所有底面上都有小陰影一樣，在您可以找到的幾乎每個UI元素的下側都有陰影。
我們的屏幕是平的，但是我們在設計過程中盡量讓元素看起來更立體。即使在現(xiàn)在扁平化當?shù)赖某绷飨拢覀円材茉诤芏鄡?yōu)秀作品的細節(jié)中，看到這條規(guī)則存在的意義。
就拿按鈕來說，即使使用這個相對“扁平”的按鈕，仍然有一些與光有關的細節(jié)：
- 未按下的按鈕(頂部)具有深色邊框；
- 未按下的按鈕頂部比底部略亮；
- 未按下的按鈕投射出一個微妙的陰影；
- 按下的按鈕底部比頂部更暗，整體也呈現(xiàn)暗色調，因為我們的手遮擋略光線。
iOS 6有點過時了，但它在輕松行為方面做了很好的案例研究
這是iOS系統(tǒng)設置模塊的——“請勿打擾”和“通知”。 細節(jié)處的光效非常豐富。
- 插入控制面板的上唇投下一個小陰影；
- “ON”滑塊軌道是凹形的，底部反射更多光線；
- 滑動滑塊，看到它們頂部周圍的明亮邊框？這代表它是垂直于光源的表面，因此接收大量光線，從而將大量光線反射到您的眼睛中；
- 分隔器凹口被遮擋在遠離太陽的角度，反之亦然。
分割線缺口處的特寫鏡頭
在上面提到了“扁平化設計”，那具體如何解釋扁平和光效的關系呢？
在ios7開始的設計潮流中，“扁平化設計”在科技界引起轟動。
的確，它確實是平的，沒有模擬的凸起或者凹痕，只有純色的線條和形狀。
可是在不久之后，“半扁平化設計”的概念就興起，它仍然很干凈、很簡單，但是你會發(fā)現(xiàn)，在一些設計元素的細節(jié)上，都有陰影的體現(xiàn)。
OS X Yosemite— 帶有光影細節(jié)的扁平化設計
同時，谷歌推出的“Material Design”設計語言，這種統(tǒng)一的視覺語言，其核心就是尋求模擬物理世界的物品，在它的設計規(guī)范中也提到了如何使用不用的陰影來傳達不同的深度。
這就是我所看到的和我所理解的，對用戶最為友好對一種表現(xiàn)方式。它使用現(xiàn)實世界的微妙細節(jié)表現(xiàn)來傳達信息。
我想，“Flatty”就是以后UI設計的發(fā)展方向，純扁平化和擬物都已經是過去的事情了。
二、規(guī)則2：黑與白第一
1. 在為設計做配色之前，先把畫面進行灰度設計
簡化了視覺設計中最為復雜的元素，迫使設計師專注于元素間距和頁面布局。
就像現(xiàn)在的交互設計都是“移動優(yōu)先”，這就意味著，先從更難的問題開始解決（小小移動設備屏幕上的交互），然后采用類似解決方案來解決更容易的問題（大屏幕上pc設備的交互）。
類似在視覺設計中的規(guī)則：首先設計黑色和白色。也就是我們在沒有顏色的幫助下，去使用各種方式來達到產品的美觀性和易用性，最后在添加顏色。
Haraldur Thorleifsson的灰度線框看起來和完成的網站一樣好
這也是讓產品看起來“干凈”和“簡單”的可靠辦法。過多的顏色往往很容易搞砸設計。而“黑與白第一”迫使你首先關注間距、尺寸和布局等內容，這些才是簡約設計的主要關注點。
優(yōu)雅的灰度
而在某些情況下，“黑與白第一”看起來并不有用。我們在設計具有強烈特定態(tài)度的作品的時候，如“運動型”、“華麗畫面”、“卡通設計”等，這些都是需要非常好的去使用顏色來表達產品。
Julien Renvoye（上）和Cosmin Capitanu（下）的華麗和充滿活力的設計
2. 接下來，就是如何去添加顏色
最簡單的方案就是只使用一種顏色。
在灰度的頁面上只添加一種顏色可簡單有效的吸引眼球。
你也可以邁出一步，使用灰度+兩種顏色，或灰度+單色調的多種顏色來傳達設計思想。
如何過你還不清楚什么是色調？
這里有一篇非常好的關于色調的入門讀物《甲方竟敢說你的配色丑！ 我來教你懟回去（三）》可以看看。
來自Smashing Magazine的單色金色主題
來自Smashing Magazine的單色藍色主題
通過修改單個色調的飽和度和亮度，可以生成多種顏色，但它并不會讓人眼前一亮。
而使用來自一個或兩個基色調的多種顏色，是在保證設計不混亂的情況去，去強調和中和元素最可靠的方法。
Kerem Suer的倒數(shù)計時器
三、規(guī)則3：加倍你的留白
如果想讓你的頁面看起來是被設計過的，那就通過大量的頁面留白來增加元素之間的喘息空間。
在“規(guī)則2-黑與白第一”中，設計師在設計顏色之前就考慮間距和布局，這是一件好事。那么，現(xiàn)在就開始討論間距和布局吧。
如果你有編寫HTML的經驗，在熟悉的HTML默認布局的頁面上，一切都被堆砌到屏幕的頂部。字體很小，線條之間沒有空間，段落之間的空間也不夠。
這些從審美的角度來說，實在太糟糕了。
還是那句話，如果想要讓頁面看起來具有設計感，那就加大頁面的喘息空間，哪怕是過大的留白也比毫無留白來的好。
如果你和我之前一樣，習慣于使用默認的格式去編輯頁面，現(xiàn)在就應該認識到哪些壞習慣了。
我們把留白作為頁面的設計元素，所有的內容都以空格開頭，知道有其它的元素替換它。
節(jié)奏感是設計頁面的一個重要原因。
從一個空白頁面也就開始意味著從留白開始。從一開始就想到的邊距和間距，用你所添加的元素有意識的去一個一個替換空白。
這是Piotr Kwiatkowski的音樂播放器概念
請?zhí)貏e主意左邊的菜單
菜單項之間的垂直空間是文本高度的兩倍，文本為12px字體，其字高和上下間距相同。
再看看列表標題：
標題“PLAYLISTS”和它下面的下劃線之間有15px的空白，這不僅僅是字體本身的字高，也就是說清單之間的留白達到了25px。
頂部導航欄中有更多空間。
“搜索所有音樂”文本是條形高度的20％；圖標的比例相似。
右側邊欄顯示文本行之間的寬松間距，都是設計師有意識的去做的，并且展現(xiàn)出了很好的效果。就美學而言，這些都足以和最好的音樂UI競爭。
慷慨的留白可以使一些最混亂的界面看起來更簡潔。
Forum design concept by Matt Sisto
Wikipedia design concept by Aurélien Salomon
最后重要的事情重復一遍：
- 在你的線之間放置空白；
- 在元素之間放置空白；
- 在元素組之間放置空白；
- 整體分析什么才是最重要的。
小結
好了，以上就是第 1 部分，感謝你們看到了這里。
接下來在第二部分中，我們會討論最后的 4 條規(guī)則：
- 了解在圖像上疊加文本的方法
- 使文本彈出和不彈出
- 只使用好的字體
- 像藝術家一樣竊取
如果你覺得這些對你有幫助，可以關注下我們第2部分的分享。
原文作者：Erik D. Kennedy
原文鏈接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
本文由 @設計師日記 翻譯發(fā)布于人人都是產品經理?，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協(xié)議。
“小編能力有限，所以找了英語專業(yè)的小伙伴來幫忙”，是谷歌翻譯嗎，好多機器化直譯的語言、莫名其妙的連詞，讀的好難受.