給「非設計師」的移動設計指南（大量實例）

01-28

簡評：假都放完了，收收心吧。
介紹些移動設計基礎知識和技巧，幫助非專業設計人員快速爬坑。

在開始之前，引用一位知名搖滾演奏家 Dave Grohl （上圖）的話：

我從未學習過音樂，但把音樂做出來了。如果你對某些事情充滿熱情，並且主動去做，專註投入，那你可以完成任何事。

很多人覺得學習一項新的技能充滿著各種門檻，自我設限。其實很多事情沒有想像的那麼難，最重要的是跨出第一步，去操作，去實踐，把看到的各種知識技巧落實在項目上，哪怕再小的項目。以結果為導向，激勵自己。這樣才是學習一門新知識的最佳途徑。

本指南會為你提供一些可以應用的基礎設計知識，和實用的設計技巧。希望能夠對大家有所幫助，還是那句話，說一千道一萬，不如做一下。

1.近黑色比純黑色更適合閱讀

試試用 #333333 RGB（51，51，51）來代替純黑色的文字，近黑比純黑更能讓讀者專註與文字。

另外，背景和字體顏色應該有對比，這樣不會造成視覺疲勞。通常，白底黑字是最清晰的。盡量避免淺灰 - 黃色 - 綠色的配色方案。如果你不得不眯眼看，看肯定是搭配有問題。

2.內容可讀性和重點

排版時，要首先安置最重要的信息，在你的 app 或者網站上，要清楚地看到這些信息。再不放大或者滾動的情況下，重點內容應該清晰可見。

我們接著看幾個例子來說明這個問題。

Instagram 的重點是用戶發布的照片/視頻，所以在頁面中把這一塊變得更顯眼。

Pinterest，通過將搜索欄固定在頂部，然後在其下方的漂亮網格來創建視覺風格。Pinterest 特意將搜索框作為頁面上的第一個項目。搜索是 Pinterest 的核心功能。

舉個另類的例子，Spotify 和網易雲音樂，封面佔據屏幕的主要區域，播放器次要，他們雖然是音樂類 app，但是對於視覺的刺激要求很高。

3.對齊排版

對齊是排版的基礎，最起碼不會出錯。

比如我們用 medium 的頁面舉例子。

仔細看這個頁面，有什麼感覺么？給你 30 秒。

注意左側和右側的對齊方式，整體很不協調。

經過調整，把左側對其之後，就會顯得整潔舒服。

所以，在很多時候，當我們無法駕馭或者不能確定一個排版的可接受性的時候，可以中規中矩的把它們對齊排列。

4.文字大小和間距

不要讓字體拘束，增加字體大小和間距，更容易讀者閱讀。

5.如果排序的順序很重要，使用 list

大多數應用都有搜索功能，如果搜索的順序很重要，那麼列表是最好的表達方式。

如果順序不是那麼重要，那可以採用更開放的樣式，比如上面的 Pinterest 的網格視圖。

（上圖：網頁點擊熱力圖，list 的黃金三角區能夠獲得絕大多數流量）

6.先設計黑白版，再做彩色版

在設計之初，特別是思考核心功能和 UX 時，建議採用黑白初稿。

因為色彩可能會激起我們的情緒，打擾我們對於核心功能的設計。

7.舒適的設計

既然為移動設備做設計，那一定要考慮到手部的放置。可以參考專欄的另一篇文章：拇指區域：為移動用戶設計

記住幾點：

重要鏈接以及一些導航設計，放在容易到達的區域；
移動設備和語言將會改變，但只要是觸摸屏，拇指區域將仍然是設計的關鍵部分；
拇指區域內恰當好處的內容和動作，對於卡片式設計會有很大益處；
當我們考慮一個人的拇指如何在屏幕上滑動時，要思考如何讓手勢區域變得更加簡單。

8.使用調色板

顏色是一門難以捉摸的藝術。可以專欄參考文章：設計師自學手冊：配色方案指南。強烈建議去 Dribbble 並搜索「調色板」或使用調色板生成器，如 Coolors 或 Color Claim。

9.遵照 Apple 和 Google 的設計規範

Google 和 Android 的設計都非常優秀，我們在設計的時候可以多參考他們的設計規範。

Google： the Google Material spec
Apple： HIG?—Human Interface Guidelines

園長：其實我也寫過不少的設計類文章（都比較淺），但是真正去執行的朋友，我相信沒多少人，哪怕給自己設計「個人logo」這麼有趣，有意義的事情，可能都沒多少人去操作。

真的，我們看了那麼多文章，聽過那麼多故事，見了那麼多人，為什麼他們還是他們，傳說還是傳說？

一定是有機遇和運氣成分，但是主動也很關鍵。就算上帝讓你發財，你連彩票都不買，怪誰？

實踐和行動！

去吧！

原文：How to not suck at design, a 5 minute guide for the non-designer.

日報延伸閱讀：

設計師的自學手冊（附大量學習資源和工具）
設計師最愛的英文字體（園長福利：附網盤資源）
設計師自學手冊：配色方案指南
初級設計師 vs. 高級設計師

歡迎關注：

知乎專欄「極光日報」，每天為 Makers 導讀三篇優質英文文章。
網易雲電台「極光日報」，上下班路上為你讀報。
微信公眾號「極光開發者」，每周兩篇技術類乾貨。