迅速提高設計美感的 7 個小技巧

簡評:用戰術來改進你的設計

1. 利用顏色和粗體來創建層次結構,而非使用字體大小

對於文本樣式的設計,最常犯的一個錯誤就是依賴字體大小來控制層次結構。

我們很常聽到這樣的要求:

「這段文字比較重要,加大字體!」

記住,不要過於依賴字體大小,而是嘗試使用顏色和字體粗細來完成相同的工作。

嘗試使用三種以下的顏色進行設計:

  • 主要內容用黑色(如文章的標題)
  • 次要內容用灰色(如文章發表日期)
  • 輔助內容用淺灰色(如頁腳中的版權聲明)

同樣,兩種 font weights 足以適用於大部分 UI 設計了:

  • 大部分文本的正常粗細值(400 或 500,取決於字體)
  • 更粗號的字體(600 或 700)用於您要強調的文字

用於網頁展示的一般不小於 400,他們更適合大標題,較小尺寸下閱讀會很不舒服。

當然,對於那些不重要的文本(比如電影海報下的出品公司等),可以改用較淡的顏色或者較小的字體。


2. 不要在彩色背景上使用灰色字體

白色背景上使用淺灰字體是個淡化文本的好方法,那是因為降低了字體與背景的對比度。但灰色字體並不適用於彩色背景。

正確的方式應該是找尋接近背景色的文本顏色,這樣才有助於創建層次結構。

兩種方式:

  • 降低白色文字的不透明度

這樣可以讓背景顏色「滲透」進字體,同時又不會和背景有顏色衝突

  • 挑選與背景顏色相近的字體顏色

選擇與背景色調相近的顏色,並調整飽和度和亮度使其與背景更融洽。當文本背景包含圖像或者其他非顏色元素時,這種方法更好。


3. 正確使用陰影

陰影效果並不是採用一大塊模糊效果去仿製,而是正確地模擬現實世界中光源照射的情況。

陰影效果的設計推薦閱讀『Material Design Guidelines』


4. 不要頻繁使用邊框(border)

當你需要進行分割操作時,嘗試使用留白來創造邊界感。

邊框當然是區分兩個頁面元素的好方法,但它並不是唯一的方法,而且頻繁使用邊框會讓頁面顯得很複雜凌亂。

下次可以試試這樣:

  • 使用框型陰影

同樣能達成效果的操作,卻不容易分散用戶的注意力

  • 使用兩種不同的背景顏色

通常相鄰元素的背景顏色略有不同就有明顯的區分效果了

  • 添加更大的間距


5. 不要使用過大的圖標

如果你正在使用像 Font Awesome 或者 Zondicons 這樣的免費圖標集,而且你設計的東西需要使用大圖標,比如 landing page 的功能部分,那就需要注意了。

雖然矢量圖像在放大尺寸時並不會降低圖像質量,但是放大尺寸後的缺乏細節卻無可辯駁,這會顯得你很不專業。

如果你只有小圖標,嘗試將其放在另一個包含背景顏色的形狀中,會更合適。

這不僅能保持原有圖標處於最合適的尺寸,也能適配更大的頁面。

當然,最好的方法是使用大尺寸高級圖標集,如 Heroicons 或 Iconic。


6. 使用顏色邊框豐富設計

提升設計美感的很討巧的一個辦法就是,給頁面添加色彩鮮明的邊框。

比如警告消息:

比如導航欄標籤:

再比如整個頁面的頂部也是可以的:


7. 並非每個按鈕都需要背景顏色

其實當頁面有多個可執行操作時,要注意語義設計動作帶來的心理暗示。

像 Boostrap 這樣的框架就會提供語義樣式的菜單按鈕:

比如積極語義可能就會用綠顏色按鈕,而刪除數據一般採用紅色按鈕。

語義是按鈕設計的重要組成部分,但是層次結構依然是一個重要的維度。

類比金字塔結構,大多數頁面通常只有一個主要操作,一些不太重要的次級操作,以及其他很少使用的三級操作。

設計這些動作時,在層次結構中傳達他們的位置很重要。

  • 主要動作應該最明顯。可以使用實心,高對比度的背景色。
  • 次級動作應該明確但不突出。輪廓樣式或低對比的背景色是很好的選擇。
  • 三級動作應該是可以被發現但不顯眼的。設計為鏈接樣式就足夠了。

對於破壞性動作,是否應該都用紅色呢?

這得分情況了。

如果這個動作不是頁面上的主要行為,那麼採用二級或三級的設計模式可能更恰當:

當這個動作是主要行為時(比如在確認對話框中),那麼就應當著重強調:

希望以上幾點能幫助到你!


原文鏈接:

7 Practical Tips for Cheating at Design

推薦閱讀:

UI 設計中顏色使用法則zhuanlan.zhihu.com圖標設計師最佳 Chrome 擴展程序zhuanlan.zhihu.com圖標16 種原型設計工具及其使用場景zhuanlan.zhihu.com圖標

極光日報,極光開發者旗下媒體。

每天導讀三篇英文技術文章。

推薦閱讀:

交互水深 04 | 選擇設計中的五個要點【單選小坑,多選大坑】(上篇)
這樣提案,設計比較容易落地
淺談小紅書圖片標籤
設報 · 首刊 —— 設計師必備,還有交互設計和前端。2018 第一期
從寧靜技術(Calm Technology)談界面的發展趨勢

TAG:交互設計 | 用戶體驗設計 | 平面設計 |