您好,歡迎來到一站式眾包服務(wù)平臺(tái)-威客牛網(wǎng)!
當(dāng)前位置:威客牛首頁 > 知識(shí)百科 > 平面設(shè)計(jì) > 圖案/界面設(shè)計(jì) > 扁平圖標(biāo)設(shè)計(jì)的原則

扁平圖標(biāo)設(shè)計(jì)的原則

2022-12-04作者:網(wǎng)友投稿

  應(yīng)用圖標(biāo)是一個(gè)用戶對(duì)你的應(yīng)用的第一印象,用戶可以透過應(yīng)用圖標(biāo)就能在心中做出評(píng)判,這個(gè)應(yīng)用是否精美和友好。很大程度上來說,一個(gè)好的產(chǎn)品應(yīng)該具有一個(gè)好的應(yīng)用圖標(biāo),而一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該清晰地傳遞出產(chǎn)品的內(nèi)涵,能讓用戶體驗(yàn)由外到內(nèi)都和平統(tǒng)一。下面就由贏在威客網(wǎng)小編來告訴你,設(shè)計(jì)師在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)需注意以下8大原則。


  1.可識(shí)別性

  優(yōu)秀的圖標(biāo)設(shè)計(jì)的首要前提是表意準(zhǔn)確,能讓用戶一眼就識(shí)別出它所代表的含義,能夠貼近用戶心里的隱喻。因此,可識(shí)別性是商標(biāo)設(shè)計(jì)的第一重要原則。自從扁平化設(shè)計(jì)風(fēng)格成為流行趨勢(shì)開始,擬物化圖標(biāo)逐漸消失,取而代之的是弱化質(zhì)感后的扁平圖形。這其實(shí)對(duì)設(shè)計(jì)提出了更高的要求,原來我們可以用很具象的圖形來表現(xiàn),現(xiàn)在只能通過抽象的圖形來傳遞正確的信息,在iOS中,系統(tǒng)音樂應(yīng)用的圖標(biāo)是非常好的設(shè)計(jì)范例,而游戲中心的隱喻性就很差,用戶很難從幾個(gè)彩色的氣泡中讀懂它的含義,無法從中獲得相關(guān)的信息。下圖前三個(gè)應(yīng)用用戶能很輕易地識(shí)別它們的產(chǎn)品屬性,最后一個(gè)應(yīng)用圖標(biāo)雖然帶有鮮明的個(gè)性特征,但單從視覺上很難傳遞給用戶。相機(jī)、拍攝、照片'等信息。


  2.差異性

  App Store有數(shù)以百萬的應(yīng)用,搜索常見的產(chǎn)品名稱可以出現(xiàn)幾十上百個(gè)結(jié)果,它們?cè)S多的應(yīng)用圖標(biāo)都大同小異。要想讓你的應(yīng)用從眾多的同類產(chǎn)品中脫穎而出,設(shè)計(jì)師在進(jìn)行商標(biāo)設(shè)計(jì)時(shí),必須在突出產(chǎn)品核心功能的同時(shí)表現(xiàn)出差異性來,避免視覺同質(zhì)化。


  3.延續(xù)產(chǎn)品界面

  從產(chǎn)品界面中提取設(shè)計(jì)元素作為應(yīng)用圖標(biāo)的參考依據(jù),讓用戶通過應(yīng)用圖標(biāo)一眼就知道它是什么類型的產(chǎn)品、主色調(diào)是什么、設(shè)計(jì)語言是什么、里面的界面長(zhǎng)什么樣等,這是最完美的設(shè)計(jì)方法。在同類產(chǎn)品中,Clear稱的上是最佳的范例,它的應(yīng)用圖標(biāo)設(shè)計(jì)不但帶有強(qiáng)烈的隱喻,同時(shí)還延續(xù)了產(chǎn)品界面的設(shè)計(jì)風(fēng)格,簡(jiǎn)單的形狀通過鮮艷明亮的色塊疊加出來的效果使得Clear獨(dú)一無二。


  4.謹(jǐn)慎白色背景

  有越來越多的設(shè)計(jì)師為了追求極致的美感,將應(yīng)用圖標(biāo)設(shè)計(jì)成白色背景。無可否認(rèn),從單個(gè)視覺上來看使用白色背景的圖標(biāo)即突出了主體,也顯得非常簡(jiǎn)潔。但是,考慮應(yīng)用到不同的桌面壁紙上,白色背景的圖標(biāo)容易淹沒在其他色彩鮮亮的圖標(biāo)里。尤其是當(dāng)手機(jī)壁紙是白色時(shí),白色背景的圖標(biāo)呈現(xiàn)出釆的畫面就如同像是Android不規(guī)則的圖標(biāo)。在本章節(jié)開始我們就提到不規(guī)則的應(yīng)用圖標(biāo)排列在一起時(shí),畫面會(huì)變得非常不整齊。


  5.突出品牌

  在設(shè)計(jì)知名品牌產(chǎn)品的應(yīng)用圖標(biāo)時(shí),應(yīng)充分利用它們的品牌Logo,這些圖形已經(jīng)在用戶心里留下深刻的印象,非常易于識(shí)別。例如,QQ在長(zhǎng)達(dá)十年的時(shí)間里一直使用一只呆萌的小企鵝作為品牌形象,已經(jīng)深深印刻在用戶心里,不管是聽到、看到企鵝總能第一時(shí)間想到QQ.即使是去掉企鵝形象所有的裝飾,只保留簡(jiǎn)單的剪影圖形,用戶也不會(huì)錯(cuò)認(rèn)。這就是品牌的魅力,在應(yīng)用圖標(biāo)設(shè)計(jì)時(shí)也應(yīng)該好好利用,延續(xù)品牌的生命力。


  6.色彩鮮活

  iOS 10人機(jī)界面指南中提供了一套設(shè)計(jì)規(guī)范,其中闡明了色彩搭配,內(nèi)置的應(yīng)用程序選擇使用那些看起來更具個(gè)性的,純粹又干凈的顏色,電話短信使用綠色、天氣和瀏覽器使用藍(lán)色,備忘錄和提示使用黃色等。設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)使用明亮的色彩,會(huì)讓你的應(yīng)用更能抓住用戶的注意力。


  7.使用柵格線

  設(shè)計(jì)師在設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)應(yīng)隨時(shí)使用IOS柵格線作為設(shè)計(jì)依據(jù),它能讓你的設(shè)計(jì)與IOS系統(tǒng)保持和平統(tǒng)一。采用柵格線方式進(jìn)行設(shè)計(jì)的圖標(biāo)越多,在界面中就能更好的彼此匹配,界面中圖標(biāo)的整體感就越強(qiáng)。


  8.多場(chǎng)景測(cè)試

  我們最終設(shè)計(jì)的應(yīng)用圖標(biāo)會(huì)以不同的分辨率出現(xiàn)在手機(jī)主屏幕、AppStore和界面等環(huán)境中,設(shè)計(jì)師需要在多種圖標(biāo)的應(yīng)用場(chǎng)景中進(jìn)行設(shè)計(jì)測(cè)試、盡可能完美適配。在App Store。圖標(biāo)尺寸為1024 ×1024 px,意味著設(shè)計(jì)師可以有很大的發(fā)揮空間,可以描繪許多細(xì)節(jié)。而在手機(jī)主屏幕,圖標(biāo)尺寸為120 × 120 px,當(dāng)大回縮放成為小圖,一些細(xì)節(jié)就會(huì)丟失,使得畫面變得模糊。這時(shí)就需要設(shè)計(jì)師對(duì)小尺寸圖標(biāo)進(jìn)行細(xì)微調(diào)整,去除不必要的裝飾元素,以確保應(yīng)用圖標(biāo)在小分辨率場(chǎng)景下也能保持清晰的辨識(shí)度。做完這一切,還必須在移動(dòng)設(shè)備上測(cè)試你的設(shè)計(jì),如果是在Photoshop中設(shè)計(jì)繪圖,可以連接PsFlay投屏到手機(jī)上進(jìn)行確認(rèn)。



免費(fèi)查詢商標(biāo)注冊(cè)