寫給UI設計新手的五分鐘建議

GIF/1539K

如果你懷疑自己是否能學好設計，那麼給你分享傳奇人物David Eric Grohl的一句話：

「

我從未特意去學習過打鼓，也沒上過吉他課程，自己慢慢摸索就學會了。如果你對某件事情報以最夠的熱情，並集中精力、堅持不懈地去做，那麼你想做什麼都能成功。

有了Grohls先生的鼓勵，你準備好開始行動了嗎？（小板凳擺好，開始聽課啦~）

1. 使用大量對比

背景色和字體顏色不要相近，深淺對比要足夠大，不然會造成視覺疲勞。通常來說白色背景配黑色字體是最清晰的，閱讀性最好。不要使用淺綠、黃色和綠色。如果要眯著眼才能看清文字內容，那就知道這肯定是不對的。

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

2. 字體不要純黑色

使用色號#333333（RGB 51,51,51）的顏色代替純黑色。白色背景上的純黑色字體會讓眼睛不適，而且很難讓人集中精力去閱讀文字。

3. 重要的內容放在前面

把重要的內容放在你的APP或者網站的首頁，而且這些重要的內容要一眼就能看到的，不要放大、滾動或者點擊才能看。

我們來分析一些優秀的視覺結構的例子。

Instagram（左下）以用戶發布的圖片視頻內容為主。

Pinterest（右下）把搜索欄固定在頁面頂部，下面則採用好看的網格結構來營造出視覺層次感。Pinterest非常注重搜索功能，因此把搜索欄放在了頁面的首要位置。

搜索是Pinterest的核心功能，大家都用Pinterest來搜索瀏覽資源和素材。

我們再來看兩個例子：

Spotify（左下）顯然很注重專輯封面並且把歌名放在第一位置，其次才是播放按鈕。儘管播放按鈕在次要位置，但是相比快進和快退按鈕來說，播放暫停鍵佔了更大比例。

Facebook（右下）和Instagram很像，選擇把朋友的評論放在最前面。

4. 所有內容注意對齊

如果頁面看起來奇怪或者不對勁的時候，最快的解決方式是調整對齊。當設計師提到要使用「網格」時，他們是想提醒團隊對齊錯誤的問題。

想要改進APP和網站外觀，調整對齊是最容易的方式，而且能夠立馬好看10倍。（get高效技能點~能有效減少加班時間有木有）

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

我們來看medium.com上的另一個例子：

這是我從medium上截圖下來的一個網頁排版——你看了之後感覺怎樣？有沒有哪裡感覺不舒服？

提示：注意看頁面的左邊，發現問題了嗎？下面左圖中我把沒對齊的地方用紅線畫出來了，右圖中是我調整之後的，所有主要內容都左對齊了。

左邊錯誤對齊，右邊調整好的對齊

5. 文字大小和間距

「我們不是給螞蟻做設計。」 適當增加字型大小和行距可以讓文字閱讀性更高。

正確和錯誤字型大小對比，來源: https://developer.apple.com/design/tips/

正確和錯誤間距對比，來源: https://developer.apple.com/design/tips/

6. 如果順序很關鍵的話，使用列表視圖顯示搜索結果

大多數網站和手機APP都有搜索功能，關於怎樣顯示搜索結果有一些不同觀點的設計討論。

如果順序是關鍵的話，列表視圖是最有效的。如果順序無所謂，想要鼓勵用戶自己去搜索的話（比如Pinterest和AirBnB），那麼網格視圖則可以有效支持這一點。

By C. Siu & B. Chaparro (How do Users View Search Results Presented in a Grid Layout? )

7. 先用黑白色稿設計，再考慮顏色

先採用黑白色設計，可以讓你把注意力放在設計和解決APP的核心用戶體驗等功能，顏色會影響我們的情緒和反應，打斷我們的專註力。

8. 創造人性化、舒適的用戶體驗

觸屏手勢是一個重要問題，下圖來自Luke Wroblewski的優秀文章《響應式導航：優化設備觸屏方式》。Luke畫出了手機上容易操作的區域（適用於右手使用者）——我希望應用程序有一個設置，可以自如地將界面從右手操作切換成左手操作。很多好用的APP都把導航和核心功能放在手機底部三分之一的區域。

9. 借用色板生成工具

配色是較難把控和掌握的，可以去Dribble上搜索 「Color Palettes」或者使用色板生成工具如Coolors和Color Claim。給自己節省大量的糾結時間。（選擇困難症者福音~偷偷告訴你這些工具還可以上傳圖片，一鍵生成圖片配色）

10. 使用蘋果和谷歌系統規範

蘋果和谷歌為設計Android或iOS軟體的人們提供了大量的資源。比如，谷歌規範里有指南、顏色、圖標、組件等等幫助你開始APP設計。蘋果有HIG—人機界面指南，裡面給出了如何設計iOS 應用程序的所有知識。

來源：Google Material Design (https://material.io) and The Apple Human Interface Guidelines (https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/)

寫在最後

記住，設計需要練習。

想要練就一眼就能發現設計問題的洞察力，這需要花費大量的時間和練習。要做出更好的設計，除了學會以上技巧之外，還有很長的路要走。

優設譯文：懶丫頭cherry原文作者：Marc Hemeon文章來源：Medium封面設計： vivien bertin

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！