深度分析！讓你的界面「框」設計更高級的7條技巧

做了8年的設計師，對設計的理解也隨著時間慢慢的加深，對設計的理解也由之前對技巧的追逐轉向對人性的考慮，久而久之，設計對于我來說不單純是技法，更多的則是對內容及設計的分析。

今天給大家剖析一下，你的設計為什么在呈現的時候有哪些點，你還沒有深入人心。

你是否考慮過通過字體顏色來區分界面的層次？

我們在設計界面文字樣式的時候，有一個典型的誤區，文字大就看的清楚，過分的強調文字的大小來對界面的層次進行劃分。那這種方式帶來的結果是文字變大了，但是界面沒有空間感了。讓用戶在第一眼的視覺效果上很差。

那我們如果去嘗試改變呢？在我們對界面內容進行設計編排時，我們應該考慮以下幾個問題。

• 主要字體的顏色應該是黑色嗎？通常情況下字體非黑色而是深灰色（#232323）
• 次要的字體難道還要用黑色嗎？我們對次要文字的處理通常會用灰來處理，以此來與主要文字進行主次的區分（#757575）
• 輔助文字呢？我們對輔助文字的顏色要更淺，比如像版權說明等非內容性文字。

在彩色的背景上你是否運用了灰色文字？

這樣會使得畫面很臟。

上面跟大家聊的灰色文字在我們內容設計上確實可以拉開文字與背景的層次關系，但是在彩色背景上還可以運用灰色文字嗎？從案例上來看灰色文字放在彩色的背景上看起來并不好看。

那我們如何處理字體在彩色背景上的表現呢？

通常情況下我們有兩種方式來解決

1. 將在彩色背景上的文字進行配色處理

這種辦法在實操過中運用的特別多，主要的操作方法是先吸取背景顏色，在顏色中加白色，使得文字帶有背景色，即背景色+白=文字顏色

2. 將在彩色背景上的文字進行透明度降低

將透明度降低，同樣使文字透出背景的顏色，使文字與背景更好的結合。

減少邊框在內容上的使用

我們在設計過程中一定會遇到內容與內容，區域與區域的分割，我們通常見到很多新手設計師在處理內容與內容之前關系的時候使用邊框來處理，其實我們在看線與面之間的關系時，線的表現力要遠低于面。

1. 運用框陰影，不用框邊框，且陰影符合自然光效。

框的陰影在設計表現中顯的更為自然，同時可以將框與背景拉出合理層次關系。

2. 使用不同的顏色進行區分

邊框與邊框難道只能通過「線」進行劃分嗎？通過顏色區分，來區別內容與內容之間的關系。

3. 通過字體的間距，舍去線的約束

我們看到通過線、面來區分，那有更好的方式來進行區分嗎？間距是一個非常好的解決方案。

邊框陰影要符合自然光效

我們在邊框中使用陰影時，考慮的不應該是將陰影平鋪在框的下面，而是應該使框接受自然的光源，像一束光一樣打在了框的左上角。

合理的運用精致的小圖標，同時讓他們具有統一性

圖標在我們設計過程中是必不可少的一個元素，同時圖標我們獲取的方式也非常便利（例：iconfont）。那你可以從眾多的圖標中找到統一性的設計嗎？

我們在下載這些圖標是都是以適量圖標的方式下載的，無論你對圖片如何進行放大或者縮小，整體的質量不會發生變化。

增加純色使邊框更加醒目

一個邊框平淡無奇，沒有太多引人關注的地方，那我們如何讓邊框在界面中脫穎而出呢，在邊框的邊緣增加純色，是不錯的一個選擇。

凸出你想表達的內容，并將其著重設計。

你要清楚不是所有的按鈕都需要背景色

在一個界面中一定只有一個按鈕可以引起用戶的關注并執行，但一個界面中一定存在很多按鈕，那你想如何引導用戶進行操作就需要在哪個按鈕上著重設計，而其他的按鈕削弱處理。

那在按鈕的背景顏色上也給大家一定的建議，不同的設計方式代表著不同優先級；

• 緊急且重要：引導用戶有限點擊的選擇帶有背景的按鈕
• 不緊急且重要：可以采用邊框不加背景的按鈕
• 緊急不重要：可以采用單獨的文字標簽進行設計

通過對按鈕背景的設計來區別此功能是否是優先級高的按鈕。

對于設計的理解希望能夠幫助大家，設計能力就像一條上升的曲線，但是它總是在上升，只要不放棄總會做出自己滿意的設計。

更多界面設計技巧：

歡迎關注作者微信公眾號：「設計進步周」