界面圖標(biāo)設(shè)計(jì)
來源：優(yōu)漫教育
發(fā)布人：UMAN
時(shí)間：2023-11-15 11:18:04
圖標(biāo)設(shè)計(jì)的基本原則包括：辨識(shí)度高、風(fēng)格統(tǒng)一、視覺美觀、圖標(biāo)的辨識(shí)度高，表意準(zhǔn)確，能讓用戶一眼就明白圖標(biāo)的含義；圖標(biāo)的風(fēng)格統(tǒng)一，使整個(gè)界面具有很好的整體感；圖標(biāo)的視覺美觀，能提高用戶的關(guān)注度，使用戶獲得良好的體驗(yàn)感。
為了提高圖標(biāo)的辨識(shí)度，圖標(biāo)設(shè)計(jì)不能過于個(gè)性化，讓用戶難以理解。通常做設(shè)計(jì)之前，會(huì)參考同行業(yè)成熟產(chǎn)品的共性和特性。圖標(biāo)的風(fēng)格統(tǒng)一從圖標(biāo)的尺寸、線面類型、色彩、圓角大小、透明度、傾斜角度、投影、漸變樣式、風(fēng)格等方面著手。
圖標(biāo)設(shè)計(jì)步驟
制作一個(gè)好圖標(biāo)，既要考慮圖標(biāo)的辨識(shí)度、美觀性和統(tǒng)一度，也要考慮圖標(biāo)應(yīng)用界面的文化、未來顯示的載體以及不同產(chǎn)品的特殊要求等。
圖標(biāo)設(shè)計(jì)過程大致分為三個(gè)步驟：借鑒線上產(chǎn)品尺寸，確定圖標(biāo)的尺寸大小，如Tab欄圖標(biāo)大小48px×48px，首頁圖標(biāo)大小56px×56px，金剛區(qū)圖標(biāo)大小90px×90px；利用現(xiàn)實(shí)圖庫提煉實(shí)物圖的共性形狀，參考借鑒成熟的圖標(biāo)庫。
在設(shè)計(jì)制作完成圖標(biāo)后，還得做任務(wù)測(cè)試，進(jìn)行設(shè)計(jì)細(xì)節(jié)自查，如設(shè)計(jì)的統(tǒng)一度、呼吸感、色彩情緒、業(yè)務(wù)聯(lián)系是否符合要求；開展辨識(shí)度測(cè)試，遮住圖標(biāo)文字描述字段，做基于無背景的和有背景的圖標(biāo)可識(shí)別測(cè)試，看用戶能否理解圖標(biāo)的含義。
金剛區(qū)圖標(biāo)設(shè)計(jì)
金剛區(qū)是APP首頁的主圖標(biāo)區(qū)，位于頁面中上部，Banner欄下面，其內(nèi)容往往隨公司活動(dòng)需要隨時(shí)靈活調(diào)整。因此，金剛區(qū)圖標(biāo)具有需求層次高、色彩豐富、以面性圖標(biāo)為主的特點(diǎn)。
在設(shè)計(jì)之初，確定金剛區(qū)圖標(biāo)尺寸等基礎(chǔ)規(guī)范：多借鑒成功產(chǎn)品的布局及尺寸，大多數(shù)產(chǎn)品金剛區(qū)圖標(biāo)尺寸為90px左右；設(shè)計(jì)圖標(biāo)良好的呼吸感，設(shè)計(jì)圖標(biāo)內(nèi)部的呼吸感滿足黃金分割比，圖標(biāo)和文字距離統(tǒng)一，圖標(biāo)四周距離統(tǒng)一為圖文距離的倍數(shù)。
在繪制圖標(biāo)形狀前，還需進(jìn)行造型再設(shè)計(jì)，主要考慮保證造型表意的準(zhǔn)確性及造型的簡(jiǎn)潔性。顏色方面，金剛區(qū)圖標(biāo)色彩豐富，圖標(biāo)的配色主要考慮色彩情緒對(duì)圖標(biāo)辨識(shí)度的影響。
配色過程通常為：確定主題色，選取主題色的鄰近色和對(duì)比色，結(jié)合圖標(biāo)的功能表達(dá)及色彩情緒，從主題色及其鄰近色和對(duì)比色中選取合適的色彩。在配色中注意控制各色相的飽和度和明度在統(tǒng)一比例，以保證各圖標(biāo)色調(diào)的和諧統(tǒng)一。
Tab欄圖標(biāo)設(shè)計(jì)
相對(duì)于金剛區(qū)圖標(biāo)的設(shè)計(jì)，Tab欄圖標(biāo)在外形設(shè)計(jì)和樣式設(shè)計(jì)上要簡(jiǎn)單很多。Tab欄圖標(biāo)設(shè)計(jì)尺寸通常為48px。Tab欄圖標(biāo)設(shè)計(jì)根據(jù)用戶群體及APP主題表達(dá)確定圖標(biāo)風(fēng)格。
總的來說，好的設(shè)計(jì)既要好看又要好用。圖標(biāo)布局以業(yè)務(wù)、功能和需求為出發(fā)點(diǎn)，安排重要功能圖標(biāo)靠前放置，引導(dǎo)用戶使用相關(guān)功能；有良好的預(yù)見性，利用有效的圖標(biāo)辨識(shí)度完美展示其功能內(nèi)容，利用色彩情緒喚起用戶正確的情緒。
廣州UI設(shè)計(jì)培訓(xùn)訓(xùn)練營(yíng)開始預(yù)約啦，全程級(jí)講師親授，為你解析UI行業(yè)發(fā)展趨勢(shì)，就業(yè)前景，助你了解設(shè)計(jì)，輕松入門，快人一步成為設(shè)計(jì)師！現(xiàn)在點(diǎn)擊聊天框報(bào)名還有免費(fèi)試聽課程領(lǐng)取，優(yōu)先報(bào)名！先下手為強(qiáng)吧！
相關(guān)推薦
-
【UI培訓(xùn)】：關(guān)于UI設(shè)計(jì)新手常遇到的問題及解決方法
UI設(shè)計(jì)新手常遇到的問題有哪些？比如，請(qǐng)問UI設(shè)計(jì)師每天的工作內(nèi)容是什么樣的？除了做圖還要干什么？還需要哪些技能？個(gè)人職業(yè)規(guī)劃通常什么樣？做圖只是視覺設(shè)計(jì)師最基礎(chǔ)的工作，除了視覺執(zhí)行，還需要向上接入PD了解產(chǎn)品需求、在設(shè)計(jì)中驗(yàn)證交互流程，向下跟進(jìn)程序開發(fā)、數(shù)據(jù)收…行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
室內(nèi)設(shè)計(jì)應(yīng)體現(xiàn)文化元素的六大重要思維
無論是首都北京的故宮，還是西藏的布達(dá)拉宮，其精巧的室內(nèi)裝潢和環(huán)境藝術(shù)，都有誰能說出這并非出自頂級(jí)的專業(yè)室內(nèi)設(shè)計(jì)師和藝術(shù)大師之手，中國(guó)傳統(tǒng)室內(nèi)設(shè)計(jì)文化也正是傳統(tǒng)東方文化與古典建筑藝術(shù)的精華部分。行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
UI設(shè)計(jì)培訓(xùn)中有沒有學(xué)不會(huì)UI的人
UI設(shè)計(jì)培訓(xùn)中有沒有學(xué)不會(huì)UI的人？?jī)?yōu)漫教育小編要說是真的有，就是那些根本不想學(xué)的，就像你永遠(yuǎn)叫不醒一個(gè)裝睡的人。如果你對(duì)ui有強(qiáng)烈的學(xué)習(xí)興趣，想在ui行業(yè)有所建樹，那么不論你是高中畢業(yè)、大學(xué)畢業(yè)，不論你是有計(jì)算機(jī)基礎(chǔ)、零基礎(chǔ)，不論你是男生、女生，不論你是20歲、30…行業(yè)資訊發(fā)布時(shí)間：2022/04/01 查看詳情
