當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計知識>教程內(nèi)容

實用好文,5個超實用圖標(biāo)設(shè)計法則。(4)

來源:blog.enqoo 作者:blog.enqoo 學(xué)習(xí):4553人次

你曾經(jīng)遇到過讓你給一個指定的問題設(shè)計圖標(biāo)的困難么?和你的開發(fā)者一起合作,卻發(fā)現(xiàn)很難給你的客戶一個足夠完美的解決方案?當(dāng)你在設(shè)計頁面圖標(biāo)遇到麻煩的時候,這篇文章就可以幫助到你了。

指導(dǎo)原則

圖標(biāo)設(shè)計是整個頁面視覺設(shè)計中一個最重要的視覺元素。一個圖標(biāo)的細節(jié),樣式和功能是由很多東西決定的。我最近也在為一系列的網(wǎng)站制作相應(yīng)的頁面圖標(biāo),來傳遞微妙的隱喻。

這篇文章會有一些最近的我為一個網(wǎng)站設(shè)置的error這個圖標(biāo)的案例?偠灾瑘D標(biāo)設(shè)計的指導(dǎo)原則涉及到以下五個部分:

    理解問題所在采用全局方法越簡單越美好考慮環(huán)境因素理解符號元素

這篇文章不是那么難以理解,而且會給你在真正的圖標(biāo)設(shè)計中帶來很大的幫助。

一、理解問題所在

有的時候你可能需要從零開始設(shè)計你的網(wǎng)站,那么你就需要大量的圖標(biāo)用于視覺表達。通常情況下,你的客戶需要你為他定制出獨一無二的圖標(biāo)。比如說,他需要我給一個文檔設(shè)計一個“Error”的圖標(biāo)。

起初,他建議說在一個頁面圖標(biāo)里放一個X來表示文檔類型不支持,或者表示文章沒有被下載成功。他腦海中的圖標(biāo)是這個樣子的:

實用好文,5個超實用圖標(biāo)設(shè)計法則。

還不壞是吧?為了簡單,我除去了一些元素,改成了:

實用好文,5個超實用圖標(biāo)設(shè)計法則。

但是,我也承認它還需要改進,因為它還不像是一個專門為文檔加載錯誤設(shè)計的一個圖標(biāo)。

二、采用全局方法

我們需要整體考慮圖標(biāo)的設(shè)置,所以我們拿了幾個其他的圖標(biāo)例子作為靈感。

“這個警告圖標(biāo)怎么樣?”

我們思考著,因為它實際上已經(jīng)在網(wǎng)頁中被大量使用了,人們可以輕易明白它的含義。

實用好文,5個超實用圖標(biāo)設(shè)計法則。

當(dāng)我們想設(shè)計一個圖標(biāo)的時候,一定要考慮到同種類型的其他圖標(biāo)是如何設(shè)計的。否則,你很有可能使用的圖形的寓意在其他圖標(biāo)上已經(jīng)被大量使用了,表達的還是另一個意思,那么你的設(shè)計就會產(chǎn)生歧義。

三、越簡單越美好

之后,我們想到在一個文檔圖標(biāo)中畫一個大三角形,像是這樣:

實用好文,5個超實用圖標(biāo)設(shè)計法則。

但是,經(jīng)驗告訴我,它太復(fù)雜了。它的寓意不那么直接,人們也不能一眼看上去就明白是什么意思。

四、考慮環(huán)境因素

之后,我提出建議我們應(yīng)該用一個大x包含在一個圓內(nèi)的圖標(biāo),像是這樣:

實用好文,5個超實用圖標(biāo)設(shè)計法則。

但是這還是不可取的,因為這個圖標(biāo)傳達的信息是危險。這個圖標(biāo)表達的含義太過了。

我現(xiàn)在想說的,是你需要考慮到環(huán)境色。顏色和視覺量級是傳遞圖像的一個重要的方式。比如,紅色常常用語警告,而淺色比如灰色顯得更加中性。如果你用中性色來表示,那么可以恰如其分的表達出圖標(biāo)含義。

五、理解符號元素

符號語言是一種次通信,在網(wǎng)頁設(shè)計中也是非常重要的一個部分。

比如,裝飾性字體更有女性氣質(zhì),而手繪字體則看上去更加童趣。

你想用你的圖標(biāo)表達怎樣的含義?

例如,這個Error圖標(biāo)并沒有創(chuàng)造太多令人驚恐的元素。

實用好文,5個超實用圖標(biāo)設(shè)計法則。

我記得這個圖標(biāo)常常在我網(wǎng)絡(luò)癱瘓的時候出現(xiàn),它們非常完美。含義也不過分,只是恰如其分的告訴用戶出錯了。

再比如這個更直接一些:

實用好文,5個超實用圖標(biāo)設(shè)計法則。

下面這個例子來源于Chrome瀏覽器,完美的表達出了我需要的那個圖標(biāo)。輕微,準(zhǔn)確,告訴用戶某個地方出了錯。這個圖標(biāo)除了白色線條的部分都是灰色,可以讓用戶明白問題的嚴(yán)重,但是又不至于過分到讓人民產(chǎn)生驚恐的感覺。

實用好文,5個超實用圖標(biāo)設(shè)計法則。

最后一個圖標(biāo)表達的信息很簡單,但是卻傳遞了最準(zhǔn)確的信息。

結(jié)論

圖標(biāo)使用的藝術(shù)需要一點點好眼力,也要一點點設(shè)計的經(jīng)驗。但是它也可以根據(jù)我們上述討論的幾個原則來構(gòu)建。如果你的圖標(biāo)寓意太模糊,或者使用千篇一律的視覺提示,那么不妨再好好思考上述說到的五點。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
啦啦啦2018-02-26 07:55
u490
龔禧2015-02-07 08:12
謝謝分享
龔禧2015-02-07 08:02
謝謝分享
雅萱越2015-01-31 11:32
還好,照著做就行、、、
食精少年2015-01-31 10:12
好像有點難
小小白嘞跟屁蟲2015-01-31 05:01
對于新手真的有點難
劉新飛62015-01-31 02:51
新手學(xué)習(xí)了~~~!
你的憂桑我不懂2015-01-31 02:12
有點困難
顛簸有點亂2015-01-31 11:32
步驟挺多的~對我這個新人來說。。有點難誒~~去實驗一下~
微波爐打鐵盆2015-01-31 11:00
挺好的
雨天等凜2015-01-31 10:37
很厲害的樣子,自己試試
沐允2015-01-31 10:26
學(xué)習(xí)之
喬升JOE2015-01-31 10:12
不錯,很受用
雨傷time2015-01-31 09:09
看起來很高級,不錯, 謝謝樓主分享

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!