本文主要針對設(shè)計初學(xué)者，沒有很深的設(shè)計理論，都是一些立馬就能用到的小技巧。

好的設(shè)計原則是可以很容易被大眾學(xué)習(xí)和實踐的。本文將介紹一些設(shè)計技巧相關(guān)的基礎(chǔ)知識，看完這些 ，說不定你今天就能用上！

如果你不確定自己適不適合做設(shè)計，請記住大神Dave Grohl關(guān)于學(xué)習(xí)新事物的看法：

我從未學(xué)過打鼓，也從未上過吉他課，我只是想做就去做了。我認(rèn)為，如果你對某件事充滿熱情，有動力，有專注力，就能做好你想做的任何事。

——Dave Grohl, Foo Fighters

記住Grohls先生的話，準(zhǔn)備好開始今天的速成班了嗎？系好安全帶，老司機(jī)帶你飛：

1. 對比度不能太小

背景與內(nèi)容之間的對比度應(yīng)該足夠適合閱讀，以免引起眼睛疲勞。通常，白色背景下的黑色文本是最容易讀的，盡量不要用淺灰色，黃色和綠色的文字。如果你自己做完設(shè)計稿，不得不瞇著眼睛才能看清，那就肯定是有問題了。

From: https://developer.apple.com/design/tips/

2. 深灰色比黑色要更容易閱讀

如果可以選擇，推薦使用#333333 RGB（51,51,51）而不是純黑色作為文字內(nèi)容。純黑色配上白色背景會讓眼睛產(chǎn)生視覺抖動，讓文字難以聚焦。

3. 核心內(nèi)容要突出

首頁的布局尤為重要，應(yīng)該要清楚的顯示應(yīng)用的主要功能。核心內(nèi)容應(yīng)該是顯而易見的，而不需要通過縮放，滾動或點擊等操作才能知曉。

From: https://developer.apple.com/design/tips/

讓我們一起來看看市面上把視覺層次結(jié)構(gòu)做的比較好的例子吧。

Instagram (下圖中的左邊) 核心功能是希望用戶上傳照片/視頻；Pinterest (下圖中的右邊) 的核心功能是發(fā)現(xiàn)和搜索靈感圖片，所以把搜索放在了頂部最顯著的位置。

再看看另外2個案例：

Spotify (下面的左圖) 希望給音樂專輯更多的曝光，所以將播放頁面中的專輯封面放到最大，將播放器控件放在第二重要位置。然后在第二重要的播放器控件中再進(jìn)行重要級拆分，結(jié)合用戶的實際需求頻率，把播放和暫停放大，快進(jìn)和快退縮小。

Facebook (下面的右圖) 看起來比較像Instagram，把朋友的內(nèi)容放在了核心位置上，因為社交是Facebook的核心業(yè)務(wù)。

4. 注意對齊所有元素

當(dāng)看到一個設(shè)計不舒服的時候，首先應(yīng)該考慮到的就是對齊問題。當(dāng)設(shè)計師們在強(qiáng)調(diào)需要使用”網(wǎng)格“體系時，他們其實是在提醒團(tuán)隊注意對齊問題。

（譯者注：新手只要把對齊這個看似簡單的問題做好，設(shè)計就能提升一個檔次！很多新人會把設(shè)計元素故意調(diào)的歪七扭八，以此體現(xiàn)他們做了設(shè)計，我當(dāng)年剛?cè)腴T的時候也犯了這樣的錯誤。實際上，有規(guī)律的東西能形成美感，對齊不是一種禁錮，而是一種好的設(shè)計方式。）

調(diào)整好對齊問題是可以對任何網(wǎng)站或應(yīng)用設(shè)計最行之有效的優(yōu)化手段之一，只要做好了，效果能立馬好上10倍以上。

From: https://developer.apple.com/design/tips/

看看另一個對齊問題，這個是medium的一個頁面。

這是我從Medium上找到的網(wǎng)頁布局——你覺得怎樣？（提示：注意對邊邊緣的對齊情況。）

左圖，我突出顯示了由于對齊問題帶來的視覺流向，而在右側(cè)，我只是將所有主要內(nèi)容進(jìn)行了左對齊。

左圖糟糕的對齊形式，右圖是調(diào)整后的對齊形式（點開圖片可以查看大圖）

5. 把握文字的大小和間距

我們并不是為螞蟻設(shè)計的，增大文字的尺寸和間距，能夠使得內(nèi)容更容易閱讀和消化。

圖片來源: https://developer.apple.com/design/tips/

圖片來源: https://developer.apple.com/design/tips/

6. 使用合適的布局形式

大多數(shù)App或者網(wǎng)站都會用到搜索，關(guān)于如果排布具體的搜索結(jié)果一直存在一些爭議。

如果結(jié)果的排序很重要，那么使用列表視圖是最有效的。

如果順序無關(guān)緊要，而你希望你的應(yīng)用是鼓勵用戶去發(fā)現(xiàn)（比如Pinterest），則使用網(wǎng)格視圖更為合適。

圖片來源By C. Siu & B. Chaparro

7. 先用黑白設(shè)計，后面再加顏色

使用黑白設(shè)計時，能更專注于解決和設(shè)計應(yīng)用的核心體驗。

而如果在做布局框架的同時，加入顏色，會引起一些情感上的干擾，會打斷我們專注于核心問題設(shè)計上的能力。（譯者注：先做交互，后做視覺，現(xiàn)在應(yīng)該大多數(shù)都是這么個流程吧。）

8. 打造舒適的設(shè)計

關(guān)于舒適的手勢體位確實是一個需要注意到的問題，關(guān)于這方面也有專門的研究文章：https://www.lukew.com/ff/entry.asp?1649

Luke列出了手機(jī)中最容易接觸和使用的區(qū)域（至少對于右手作為慣用手的人來說），其實我希望看到應(yīng)用中有一個設(shè)置，可以讓用戶從右手界面切換到左手界面。

大部分的App都將導(dǎo)航和核心操作放在手機(jī)的底部三分之一處。

9. 善用配色板

顏色的使用一門技術(shù)活。我強(qiáng)烈推薦你在Dribbble上搜索”Color Palettes“，或者使用Coolors( https://coolors.co/) 或者 Color Claim （http://www.vanschneider.com/colors/)，會有驚喜！為自己省下反復(fù)糾結(jié)的時間。

10. 使用iOS或者Google的系統(tǒng)規(guī)范

蘋果和谷歌都為開發(fā)者提供了大量的UI組件和規(guī)范。比如：像谷歌就提供了規(guī)范、組件、配色、圖標(biāo)等等，幫助你實現(xiàn)快速設(shè)計和開發(fā)。（譯者注：谷歌規(guī)范鏈接https://material.io/）

蘋果也提供了他們的人機(jī)交互規(guī)范，地址是 ：https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/。

Various screenshots from Google Material Design and The Apple Human Interface Guidelines

最后記住，設(shè)計還需要大量的練習(xí)

提高自己的審美和設(shè)計水平需要大量的時間和練習(xí)，但如果運(yùn)用好上面所寫的一些設(shè)計技巧，會讓你在現(xiàn)在做出更好的設(shè)計。

原文：https://medium.com/startup-grind/how-to-not-suck-at-design-a-5-minute-guide-for-the-non-designer-291efac43037

作者：Marc Hemeon

譯者: 彩云Sky，公眾號：彩云譯設(shè)計

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議