《UI》界面設計如何配色

1.界面使用品牌色,可強化品牌曝光度

當下手機APP層出不窮,數不勝數;大家都熟知每家公司每個產品或品牌,想要樹立認知度需提前設立自身品牌色,形成視覺印象,無論在APP,網站,Logo,VIS中保持色調一致更易彰顯品牌特色和強化品牌的曝光度。

《UI》界面設計如何配色

多處突出品牌色

2.界面使用基礎輔助色

如灰白黑等,為簡化設計,突出界面內容,達到有效的傳播。

注意:因顏色數量有限,大公司先入為主,如藍色的支付寶,綠色的微信,紅色的京東,橙色的淘寶等,故有時通過品牌色難以被想起,不如根據產品內容調性決策。與海報廣告視覺設計不同,UI界面是需長久被使用,內容結構簡單明瞭易於操作才是首要。

《UI》界面設計如何配色

黑白灰的基礎色

3.善於控制界面中的顏色數量

注意:一個界面的顏色最好不超過3種,可選擇同色系之間微弱調整,通過漸變鄰近色選擇;電商首頁不同色彩的icon時,選擇同一個色相內不同色系,保證視覺統一,尤其注意顏色視覺上是否和諧不跳躍,個別性突出化。

《UI》界面設計如何配色

多彩搭配

4.不同狀態下配色技巧

界面是用於操作幫助用戶完成任務,過程會牽涉各個狀態按鈕提示等。例如按鈕的不可點擊狀態/可點擊狀態/點擊中狀態等,採用相同顏色的不同透明度作為區分。

如紅色是警示,綠色代表通過,保持和日常習慣一致的提示色彩減少用戶誤操作。

5.界面中字體顏色的選擇

常規字體顏色多用#222222 #333333 #666666 #999999,根據界面內容主次層級設置不同字號大小顏色的差異性,讓界面視覺上清晰整潔,不含含糊糊模稜兩可。

注意:一般界面設計大家多避免使用#000000的純黑色,屬於約定俗成的默契,但感性的設計更多是實際情況而定,例如最新版IOS11便使用純黑色字體,所以本位所說大部分屬於經驗主義內容,仍需要我們打破常規進行創新。

但實際工作中無法肆意妄為做界面,則需要在日常練習中不斷嘗試各種概念稿,改版界面,讓想法無拘束放飛,在實際項目中加入的微創新,都是來源於日常的不斷積累和思考。

《UI》界面設計如何配色

IOS11風格界面

6.文字字體的排版

文字字體常規大小為10,12,13,14,15,17(在375px1倍圖情況下的尺寸)

文字無論大小顏色區分,都是對文字信息層級的區分,保證界面內容的可讀性,主題明確。但一界面不宜使用過多顏色大小的字體,在設計初始應設定標題,內容,導航,次級導航,提示字符等常規字體樣式,才能使界面視覺更統一。

很多設計師都會遇到設計中總是猶豫不定,為了1像素1間距糾結半天,結果看起來卻無差別,花費時間界面卻無提升?

其實有些結論看似簡單,似乎讀了便會做得出驚豔界面,實際上手操作時發現,仍然不知如何選擇,每頁每個元素都糾結字號,顏色,間距的大小,導致大道理都懂卻仍做不好的後果。

UI界面在設計技法層簡單易學,無非打字畫框畫線便可,個人感受做界面學會設定規範,整理組件,一個項目做完5頁確認大概風格後,此時需要明確的設計各個元件的規範。例如:導航欄icon尺寸,功能性icon尺寸,文字標題,內容,標籤,二級文字,邊距等,設定形成組件,往後頁面會減少無休止的糾結及混亂。

《UI》界面設計如何配色

sketch組件歸類命名

而界面真正難度在於思考整體佈局入口,內容表達請否清晰,以及icon繪製(整齊統一的icon會主導性影響整個界面,這也是分辨設計能力高低所在),和界面空白頁配圖小插畫的設計,icon和插畫非一日功夫練成,最易體現界面細節精緻度。所以在UI界面中我們要學分取捨,安置自己的精力,懂得輕重緩急減少不必要的糾結,把精力安排在真正需要技法的內容上。

同時UI界面一定要學會使用插件和組件,例如sketch中的symbol,sketch measure,程序化批量處理重複繁瑣的常規工作。

鏈接:https://www.jianshu.com/p/6a417c036f3b

來源:簡書


分享到:


相關文章: