7大規則：非科班出身設計師如何做好UI設計

I設計是有做得好的規則存在的，即便你是“半路出家”做UI，也可以從這些前人總結的規則中，做好UI設計。

前言

今天這篇文章是來自西雅圖的獨立UI/UX設計師Erik D. Kennedy，他在用戶體驗和視覺設計方面有很豐富的經驗。

同時他還運營了一個設計網站，Learn UI Design，他會在上面分享自己學習的心得，也會發布一些視頻教程。有興趣的朋友可以關注一波。

因為是英文佳作，小編能力有限，所以找了英語專業的小伙伴來幫忙，如果有發現什么紕漏，emmm，我們改……

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

那誰需要看我們這些設計指南呢？

初學設計的入門學生。
希望直接可以設計美觀頁面的開發人員。
希望有更好用戶體驗的用戶體驗設計師。

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

首先，我是一名沒有UI視覺技能的用戶體驗設計師。我喜歡設計用戶體驗，但是在我意識到需要去學習“如何讓界面看起來更好”之前，我花費一個項目周期90%的時間去瘋狂的學習，拼命搜索谷歌，瀏覽Pinterest和Dribbble，以便從中復制。

而以下這些規則都是那段時間我所學到的經驗：

光來自天空
黑與白第一
加倍你的留白
了解在圖像上疊加文本的方法
使文本彈出和不彈出
只使用好的字體
像藝術家一樣竊取

那接下來就讓我們一一展開來討論吧。

一、規則1：光來自天空

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

這可能是我們理解UI設計最重要但經常被忽略的規則。

我們都知道光來自天空，已經習慣了光的照射方式，以至于從下面來的光會看起來更加怪異。

WoooOOOooo（國外設計師也愛恐怖片啊）

當光線來自天空時，它照亮了物體的頂部并在它們下面投下陰影。物體的頂部較亮，底部較暗。

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

我們的屏幕是平的，但是我們在設計過程中盡量讓元素看起來更立體。即使在現在扁平化當道的潮流下，我們也能在很多優秀作品的細節中，看到這條規則存在的意義。

就拿按鈕來說，即使使用這個相對“扁平”的按鈕，仍然有一些與光有關的細節：

未按下的按鈕具有深色邊框；
未按下的按鈕頂部比底部略亮；
未按下的按鈕投射出一個微妙的陰影；
按下的按鈕底部比頂部更暗，整體也呈現暗色調，因為我們的手遮擋略光線。

iOS 6有點過時了，但它在輕松行為方面做了很好的案例研究

這是iOS系統設置模塊的——“請勿打擾”和“通知”。細節處的光效非常豐富。

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

分割線缺口處的特寫鏡頭

在上面提到了“扁平化設計”，那具體如何解釋扁平和光效的關系呢？

在ios7開始的設計潮流中，“扁平化設計”在科技界引起轟動。

的確，它確實是平的，沒有模擬的凸起或者凹痕，只有純色的線條和形狀。

可是在不久之后，“半扁平化設計”的概念就興起，它仍然很干凈、很簡單，但是你會發現，在一些設計元素的細節上，都有陰影的體現。

OS X Yosemite— 帶有光影細節的扁平化設計

同時，谷歌推出的“Material Design”設計語言，這種統一的視覺語言，其核心就是尋求模擬物理世界的物品，在它的設計規范中也提到了如何使用不用的陰影來傳達不同的深度。

這就是我所看到的和我所理解的，對用戶最為友好對一種表現方式。它使用現實世界的微妙細節表現來傳達信息。

我想，“Flatty”就是以后UI設計的發展方向，純扁平化和擬物都已經是過去的事情了。

二、規則2：黑與白第一

1. 在為設計做配色之前，先把畫面進行灰度設計

簡化了視覺設計中最為復雜的元素，迫使設計師專注于元素間距和頁面布局。

就像現在的交互設計都是“移動優先”，這就意味著，先從更難的問題開始解決（小小移動設備屏幕上的交互），然后采用類似解決方案來解決更容易的問題（大屏幕上pc設備的交互）。

類似在視覺設計中的規則：首先設計黑色和白色。也就是我們在沒有顏色的幫助下，去使用各種方式來達到產品的美觀性和易用性，最后在添加顏色。

Haraldur Thorleifsson的灰度線框看起來和完成的網站一樣好

這也是讓產品看起來“干凈”和“簡單”的可靠辦法。過多的顏色往往很容易搞砸設計。而“黑與白第一”迫使你首先關注間距、尺寸和布局等內容，這些才是簡約設計的主要關注點。

優雅的灰度

而在某些情況下，“黑與白第一”看起來并不有用。我們在設計具有強烈特定態度的作品的時候，如“運動型”、“華麗畫面”、“卡通設計”等，這些都是需要非常好的去使用顏色來表達產品。

Julien Renvoye（上）和Cosmin Capitanu（下）的華麗和充滿活力的設計

2. 接下來，就是如何去添加顏色

最簡單的方案就是只使用一種顏色。

在灰度的頁面上只添加一種顏色可簡單有效的吸引眼球。

你也可以邁出一步，使用灰度+兩種顏色，或灰度+單色調的多種顏色來傳達設計思想。

如何過你還不清楚什么是色調？

來自Smashing Magazine的單色金色主題

來自Smashing Magazine的單色藍色主題

通過修改單個色調的飽和度和亮度，可以生成多種顏色，但它并不會讓人眼前一亮。

而使用來自一個或兩個基色調的多種顏色，是在保證設計不混亂的情況去，去強調和中和元素最可靠的方法。

Kerem Suer的倒數計時器

三、規則3：加倍你的留白

如果想讓你的頁面看起來是被設計過的，那就通過大量的頁面留白來增加元素之間的喘息空間。

在“規則2-黑與白第一”中，設計師在設計顏色之前就考慮間距和布局，這是一件好事。那么，現在就開始討論間距和布局吧。

如果你有編寫HTML的經驗，在熟悉的HTML默認布局的頁面上，一切都被堆砌到屏幕的頂部。字體很小，線條之間沒有空間，段落之間的空間也不夠。

這些從審美的角度來說，實在太糟糕了。

還是那句話，如果想要讓頁面看起來具有設計感，那就加大頁面的喘息空間，哪怕是過大的留白也比毫無留白來的好。

如果你和我之前一樣，習慣于使用默認的格式去編輯頁面，現在就應該認識到哪些壞習慣了。

我們把留白作為頁面的設計元素，所有的內容都以空格開頭，知道有其它的元素替換它。

節奏感是設計頁面的一個重要原因。

從一個空白頁面也就開始意味著從留白開始。從一開始就想到的邊距和間距，用你所添加的元素有意識的去一個一個替換空白。

這是Piotr Kwiatkowski的音樂播放器概念

請特別主意左邊的菜單

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

再看看列表標題：

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

頂部導航欄中有更多空間。

“搜索所有音樂”文本是條形高度的20％；圖標的比例相似。

右側邊欄顯示文本行之間的寬松間距，都是設計師有意識的去做的，并且展現出了很好的效果。就美學而言，這些都足以和最好的音樂UI競爭。

慷慨的留白可以使一些最混亂的界面看起來更簡潔。

Forum design concept by Matt Sisto

Wikipedia design concept by Aurélien Salomon

最后重要的事情重復一遍：

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

小結

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

接下來在第二部分中，我們會討論最后的 4 條規則：

了解在圖像上疊加文本的方法
使文本彈出和不彈出
只使用好的字體
像藝術家一樣竊取

如果你覺得這些對你有幫助，可以關注下我們第2部分的分享。

原文作者：Erik D. Kennedy

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

本文由 @設計師日記翻譯發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。

次畫的是QQ瀏覽器圖標，比較復雜，各種高光漸變色內陰影等。其實，CSS畫畫就和用PS畫畫一樣，從最底層，一層一層往上畫，最后合成一張圖：

CSS畫QQ瀏覽器圖標

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

html,body{
 height:100%;
}
body{
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #eee;
}

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

.logo{
 width: 300px;
 height:300px;
 background: linear-gradient(to right bottom,#66adff,#1a6adb);
 border-radius: 999px;
 position: relative;
}
<div class="logo"></div>

效果圖：

3、給 logo 的 after 上個灰色，做出鏤空效果：

.logo:after{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background-color: #eee;
 border-radius: 999px;
 z-index: 15;
 left: 50%;
 top:50%;
 margin-left: -75px;
 margin-top:-75px;
}

效果圖：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

.logo:before{
 position: absolute;
 width: 166px;
 height: 166px;
 content:'';
 background: linear-gradient(to right bottom,#1a6adb,#66adff);
 border-radius: 999px;
 z-index: 9;
 left: 50%;
 top:50%;
 margin-left: -83px;
 margin-top:-83px;
}

效果圖：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

.before-high-light{
 position: absolute;
 width: 168px;
 height: 168px;
 content:'';
 background: linear-gradient(to right bottom,#96d9ff,#5cafff,#96d9ff);
 border-radius: 999px;
 z-index: 8;
 left: 50%;
 top:50%;
 margin-left: -84px;
 margin-top:-84px;
}
<div class="logo">
 <div class="before-high-light"></div>
</div>

效果圖：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

.left-top-high-light{
 position: absolute;
 width: 298px;
 height: 298px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,.8),rgba(255,255,255,0) 50%);
 border-radius: 999px;
 z-index: 7;
 left: 50%;
 top:50%;
 margin-left: -149px;
 margin-top:-149px;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
</div>

效果圖：

7、畫云，一共三朵，放在右下角，白色背景，利用內陰影，給云上色(放在chrome調整，這塊比較麻煩，需要細細調)，由于css容器樣式的局限性，不能讓云成為一個整體，建議這類可以考慮用svg或者canvas實現，我這里還是用div來實現：

.clouds{
 position: absolute;
 width: 90px;
 height: 90px;
 background-color: #fff;
 border-radius: 999px;
 z-index: 16;
 bottom: 20px;
 right:60px;
 box-shadow: -3px 15px 12px 0 rgba(42,127,236,.3) inset;
}
.clouds:before{
 content:'';
 position: absolute;
 width: 100px;
 height: 70px;
 background-color: #fff;
 border-radius: 999px;
 bottom: -20px;
 left:-30px;
 box-shadow: 5px -5px 8px 0 rgba(42,127,236,.3) inset;
}
.clouds:after{
 content:'';
 position: absolute;
 width: 123px;
 height: 60px;
 background-color: #fff;
 border-radius: 0 999px 999px 0;
 bottom: -20px;
 right:-30px;
 box-shadow: -16px -9px 11px 0 rgba(42,127,236,.3) inset;
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
</div>

效果圖：

8、左下角，云之下的高光，這個高光容器，寬高為 logo 的一半，左下角為全圓角，其他三個角可以不設置圓角，z-index 置于前面所有內容的下面，logo 的上面，背景為從左上到右下，從無到有的白色漸變，如果覺得太生硬，可以稍微給點羽化：

.left-bottom-high-light{
 position: absolute;
 width: 150px;
 height: 150px;
 content:'';
 background: linear-gradient(to right bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 70%);
 border-radius:0 0 0 999px;
 z-index: 14;
 left:0;
 bottom:0;
 filter: blur(1px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
</div>

效果圖：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

.shadow{
 position: absolute;
 width:200px;
 height:10px;
 content:'';
 background:#666;
 border-radius:50%;
 z-index: 1;
 left: 50%;
 bottom:-3px;
 margin-left: -100px;
 filter: blur(4px);
}
<div class="logo">
 <div class="before-high-light"></div>
 <div class="left-top-high-light"></div>
 <div class="clouds"></div>
 <div class="left-bottom-high-light"></div>
 <div class="shadow"></div>
</div>

效果圖：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

.high-light{

position: absolute;

width:100px;

height:20px;

content:'';

background:rgba(255,255,255,.9);

border-radius:50%;

z-index: 15;

left: -8px;

top: 33px;

filter: blur(4px);

transform: rotate(-45deg);

}

</div>

最終效果圖：

么是元器件側立翻轉呢？在smt貼片生產過程中會有什么影響，相信有很多伙伴不了解，這種狀況我想做過smt的都應該遇見過，如圖所示。

smt貼片的元器件側立、翻轉現象

元器件側立、翻轉兩種現象形成的原因相同：

（1）貼片時元器件厚度設置錯誤，或沒有接觸到PCB焊盤而被放下很容易造成側立或翻轉。

（2）貼片機拾片時壓力過大造成供料器振動，將編帶下一個空穴中的元器件振翻。

（3）貼片機吸嘴真空過早打開或關閉，造成元器件側立或翻轉。

（4）貼片機吸嘴被磨損或被部分堵塞，也會引起元器件側立或翻轉。

（5）PCB變形嚴重，絕對凹陷超過0.5mm。

總之，元器件側立、翻轉兩種不良，主要與貼片工序有關。

根據具體原因采取對應的措施：

（1）設置正確的元器件高度。

（2）調整貼片頭Z軸拾片高度。

（3）調整吸嘴真空打開或關閉時間。

（4）定期檢查、保養吸嘴。

（5）做好PCB的支撐。

Smt貼片的元器件側立、翻轉現象，一般多發生在0603、0402等小尺寸的片式元器件上。

靖邦電子http://www.cnpcba.cn/pcba.html,是一家專業smt貼片加工的廠家，smt貼片、貼片加工廠，為你提供優質的pcba加工一站式服務，歡迎各行業來詳詢：13418481618

在線咨詢

上一篇：網絡自媒體著作權侵權面面觀：微信、微博成侵權重災區
下一篇：從前端到全端：JavaScript逆襲之路

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

7大規則：非科班出身設計師如何做好UI設計

前言

一、規則1：光來自天空

二、規則2：黑與白第一

1. 在為設計做配色之前，先把畫面進行灰度設計

2. 接下來，就是如何去添加顏色

三、規則3：加倍你的留白

小結

1、讓容器居中,同時將body背景變成灰色，可以看得更清楚

2、畫一個藍色漸變圓形，作為外邊的藍色環（現在還是圓，不是環），相對定位，這樣里面的所有元素都可以以它為定位點了：

3、給 logo 的 after 上個灰色，做出鏤空效果：

4、給 logo 的 before 加上漸變背景，漸變色和 logo 一樣，只不過顏色反過來，這樣有凹陷的感覺，同時將它治愈 after 的下面，比 after 稍微大點：

5、由于邊框不支持漸變，我們只能接著加div，來畫出剛才的 before 的高光：

6、畫左上角的大片高光，它是被遮擋在中間圓的下面，所以，z-index要更低，同時它的顏色是從半透明的白色到無，大小要比 logo 小個一兩像素：

9、底部陰影 shadow，可以用背景色+羽化來實現，也可以用 box-shadow 來實現，這里我們用第一種方法：

10、頂部高光 high-light，實現方法和上面的陰影一樣：

您的項目需求