立即用得上!寫給初學者的五分鐘設計指南

好的設計原則對任何人來說都有用。這個指南會告訴你一些基礎設計原則,立即就能用得上並分享給別人。

如果你不相信自己能夠做好設計,那麼請記住傳說中的人物David Eric Grohl說過的這段話:

 
我從不學習打鼓課程,從不學習吉他課程,我靠自己摸索。我認為倘若你真的對什麼東西有所熱誠,你就會有動力,你就會集中注意力,你可以做任何你想做的事情。——Dave Grohl,噴火戰機樂隊

記著上面那段話,你準備好要開始速成課了嗎?讓我們開始吧(沒有特定順序):

 

1. 足夠強烈的色彩對比

背景和字體必須有足夠區分,閱讀起來不傷眼睛。白底黑字是最容易辨認的。最好不要使用淺灰、黃色或綠色。如果別人必須眯著眼睛才能看清文字,那肯定是有問題的。

 

2. 深灰比黑色更好

如果可以的話,嘗試使用#333333 RGB(51, 51, 51),而不是黑色,作為文字顏色。黑白對比晃眼睛,讓人更難集中注意力。

 

3. 重要內容放在前面

布局是幫助使用App或網站的重要信息。重要的內容應該是第一眼可見的,不需要縮放、滾動或點擊。

 
讓我們看看幾個視覺層級設計的正面實例。

Instagram(下圖左側)將讓用戶發布的圖片/視頻作為焦點。

Pinterest(下圖右側)的主要功能是搜索,人們在上面瀏覽翻找信息。

 
再看兩個例子。

Spotify(下圖左側)顯然把唱片封面和音樂標題放在第一位,將用戶操作放在第二位。儘管操作是第二位,Spotify仍然保證播放暫停按鈕的比重大於前進後退。

Facebook(下圖右側)看起與Instagram非常相似,把好友發布的內容放到前面和中心。

 

4. 對齊一切

如果你感覺哪裡有些不對,最快的解決方式很可能是把不對齊的東西全部對齊。有時設計師會念叨需要使用「柵格」,這其實是在提醒團隊需要解決對齊的問題。保證元素對齊是改進任何App或網站的最簡單的方法,可以立馬讓視覺效果提升10倍。

讓我們再看看其它對齊案例,這次是Medium。

下面是一個Medium的頁面,你覺得看起來如何?是不是有哪裡不對?提示:注意左側的對齊情況,看起來怎麼樣?

 
下圖我僅僅將內容左側對齊了。

 

5. 文字尺寸和留白

我們是給人做設計的,不是給螞蟻做的。增加文字尺寸並多留些空白能夠保證內容更加易讀。

好的文字尺寸VS不好的文字尺寸:

好的留白VS不好的留白:

 

6. 如果順序很重要的話,使用列表

大部分移動/網頁App有搜索功能,對於應該如何展示搜索結果,可能有些爭議。

如果順序是很重要的,那麼列表是最有效的。

如果順序不重要,並且還鼓勵用戶多瀏覽探索(像是Pinterest或Airbnb),那麼網格視圖就可以提供更多的信息,方便用戶瀏覽探索。

 

7. 先做灰度設計,再上色

灰度設計能夠保證聚焦于關鍵的用戶體驗。顏色牽扯到較多的情緒反射,並且容易打擾我們所聚焦的關鍵問題。

 

8. 讓設計用起來舒服

手的使用是一個重要的問題,Luke畫出了手機上最容易使用的部分(對於右手來說)——我挺喜歡哪些可以設置左右手的App的。

很多高效的手機App保證導航和主要操作在手機的底部。

 

9. 借用色板

色彩是一種難以捉摸的藝術。我強烈推薦大家去Dribbble搜索「Color Palettes」或者使用色板編輯器,如Coolors或者Color Claim。這樣做可以節約好幾個小時的爭論、糾結的時間。

也可以選擇一些專門提供色板的網站。

 

10. 使用Apple和Google的系統設計規範

這兩家公司都有很棒的資源幫助任何人搭建Android或iOS的App。

例如,Google的Material 里有設計原則、資源、色彩、圖標和控制項,能夠幫助你快速開始App設計。

Apple則有 HIG(Human Interface Guideline),裡面羅列了有所有設計iOS平台App所需要知道的東西。

 

記住,設計需要練習!

需要一些時間和練習才能夠訓練出一雙辨別設計的銳眼,但是你會發現上面的建議會大大提高你的設計。

 
本文地址: http://www.uisdc.com/5-mins-design-fast-guide


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化