很多人說(shuō)設(shè)計(jì)是力求細(xì)節(jié)的，在網(wǎng)頁(yè)設(shè)計(jì)里表達(dá)出的細(xì)節(jié)就是圖標(biāo)。圖標(biāo)在一個(gè)設(shè)計(jì)里帶來(lái)了額外的注解并且使設(shè)計(jì)里的對(duì)象和元素引起用戶的注意。

以下介紹的是一個(gè)用圖標(biāo)描述的最優(yōu)方法。當(dāng)使用圖標(biāo)時(shí)，圖標(biāo)的描述包含了一系列的隱喻。這也是在網(wǎng)站導(dǎo)航廣泛使用圖標(biāo)和一系列圖標(biāo)組的原因。

隱喻：

圖標(biāo)是文字的隱喻，也讓人很好地知道隱喻，對(duì)于可用性來(lái)說(shuō)，在網(wǎng)站之間有效地進(jìn)行交流是至關(guān)重要的，圖標(biāo)應(yīng)該是代替文字，最能充分傳送信息。用戶需要快速地知道圖標(biāo)所表達(dá)信息。

使用大家認(rèn)知的元素和簡(jiǎn)單的隱喻---用戶應(yīng)該會(huì)快速地知道圖標(biāo)所表達(dá)信息。作圖標(biāo)時(shí)，用一些共同的元素是很重要的，就好像一個(gè)屋子(表達(dá)“家”)。以下是一些例子：

氣泡——評(píng)論 信封——E-mail和聯(lián)系 箭頭和硬盤——下載 問(wèn)號(hào)——幫助和常見(jiàn)解答問(wèn)題 文件夾——文件 號(hào)角——論壇 兩個(gè)環(huán)繞的箭頭——更新 顯示器——視頻 放大鏡——搜索 字母表——按字母排列 鎖——安全 星號(hào)——重要標(biāo)記 鼠標(biāo)——表示鏈接還有很多很多。。。

圖標(biāo)附加標(biāo)簽---如果圖標(biāo)還不能明確地表達(dá)意思，加上一個(gè)小小的標(biāo)簽是非常不錯(cuò)的選擇。對(duì)于用戶來(lái)說(shuō)，文字很清楚表達(dá)它的意思，所以可以提高圖標(biāo)的可用性。一般來(lái)說(shuō)，盡量只用幾個(gè)字來(lái)做圖標(biāo)的標(biāo)簽，還有文字用一行。用可以易明的文字和簡(jiǎn)潔的顏色。

當(dāng)使用圖標(biāo)時(shí)：

作為一個(gè)按鈕---圖標(biāo)的功能很類似按鈕。用艷麗色彩的元素來(lái)代替文字。很多設(shè)計(jì)都是采用這種方法，而且還可以用很多種其他方法完成。

在按鈕上附加文字---按鈕上采用圖標(biāo)和文字，這也是一個(gè)不錯(cuò)的選擇。這樣更能夠吸引用戶的眼球。

另外在Pixelmator 的作品中也有一個(gè)很好的例子。這些按鈕采用圖標(biāo)和文字。另外，這些按鈕激活時(shí)的效果也很棒。當(dāng)用戶移過(guò)這些按鈕時(shí)，這些圖標(biāo)會(huì)由無(wú)色變成彩色的。這體現(xiàn)了相當(dāng)好的可用性。

支持和提示信息---圖標(biāo)代替了文字。使用圖標(biāo)能代替了寫出來(lái)的麻煩，使用圖標(biāo)也能支持文字和信息。圖標(biāo)成為了支持文字注釋一種非常好的方法。并且成為優(yōu)秀網(wǎng)站一種魅力。

應(yīng)用在標(biāo)題和頁(yè)眉上---圖標(biāo)的使用引起用戶的注意，這是一個(gè)重要的原理，圖標(biāo)也是很普遍地應(yīng)用在標(biāo)題和頁(yè)眉上。很直觀地把用戶的眼球帶到文字的開(kāi)頭。

最優(yōu)方法：

盡可能地做高質(zhì)量的圖標(biāo)---隨著可用性的發(fā)展，質(zhì)量是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)重要的特性之一。

質(zhì)量帶來(lái)了細(xì)節(jié)---包括精彩的細(xì)節(jié)就如陰影、反射和發(fā)光。這些小細(xì)節(jié)大有幫助，特別在制作圖標(biāo)立體感和整體感時(shí)候。

保持圖標(biāo)外形簡(jiǎn)潔流暢---做圖標(biāo)時(shí)不宜做得過(guò)于復(fù)雜。這是當(dāng)然的。我說(shuō)細(xì)節(jié)是好，不過(guò)要懂得去權(quán)衡“細(xì)節(jié)”和“復(fù)雜”之間的關(guān)系?；拘螤詈驮氐耐廨喞M量精練，做出容易識(shí)別的圖標(biāo)而不是由上至下都包裹著細(xì)節(jié)。

我現(xiàn)在提及一下我制作圖標(biāo)的過(guò)程，用簡(jiǎn)單的外形來(lái)做圖標(biāo)，是圖標(biāo)設(shè)計(jì)的關(guān)鍵。開(kāi)始制作的時(shí)候配合外輪廓，接著潤(rùn)色，最后用光影來(lái)做出寫實(shí)立體的圖標(biāo)。

瞟一眼下面的圖標(biāo)，你會(huì)發(fā)覺(jué)這些都是一些基本的簡(jiǎn)單的外形，但有一些效果后增添了它的立體感。

透視---透視完全依靠工作平臺(tái)和網(wǎng)站本身的圖標(biāo)類型。首先，在網(wǎng)頁(yè)設(shè)計(jì)里，其實(shí)非常容易控制透視的一致，透視把這些圖標(biāo)統(tǒng)一在同一個(gè)空間里，看起來(lái)是放在一起的。

絕大多數(shù)情況下，你會(huì)想用簡(jiǎn)單直接的透視角度。不會(huì)太過(guò)于傾斜。如果你想有傾斜的效果，通常會(huì)用垂直傾斜，向上或者向下。留意一下圖標(biāo)的邊緣是否會(huì)太復(fù)雜，簡(jiǎn)潔而有力才是關(guān)鍵呢。

網(wǎng)站里的元素，應(yīng)保持光源的統(tǒng)一---統(tǒng)一協(xié)調(diào)是可用性里重要的一項(xiàng)。這同樣可以應(yīng)用在設(shè)計(jì)圖標(biāo)上，所有的圖標(biāo)應(yīng)該保持光影的一致，也要保證在網(wǎng)站里同樣協(xié)調(diào)。

強(qiáng)而有力地一字排開(kāi)---整齊地一字排開(kāi)，使圖標(biāo)看起來(lái)更加寬松，更加清晰。

圖標(biāo)所傳遞的網(wǎng)站風(fēng)格和標(biāo)志---顯然地，一致是非常重要的，一個(gè)網(wǎng)頁(yè)設(shè)計(jì)里多處協(xié)調(diào)和響應(yīng)就是風(fēng)格。在整個(gè)網(wǎng)站里應(yīng)該貫穿一個(gè)風(fēng)格。標(biāo)志的風(fēng)格(也就是寫實(shí)、艷麗、明亮)應(yīng)該和網(wǎng)站的圖標(biāo)一樣。

引人注意的顏色---簡(jiǎn)潔的顏色是一個(gè)設(shè)計(jì)方向，但你的目標(biāo)是讓它們更容易被人注意到。圖標(biāo)中一個(gè)主要功能是讓一個(gè)元素引起用戶的注意。因此，你應(yīng)該用顯眼的顏色來(lái)吸引用戶，同樣地，用色方面都應(yīng)該注意和背景色拉開(kāi)對(duì)比和運(yùn)用對(duì)比色。

這些大圖標(biāo)是顏色艷麗，在黑色的背景上顯得特別好看，這肯定能吸引住用戶的眼球的。

矢量格式---我能夠確定你到處都見(jiàn)過(guò)的，矢量格式可以讓圖標(biāo)放大縮小，這是很重要的，特別對(duì)于網(wǎng)頁(yè)設(shè)計(jì)，因?yàn)楹芏鄷r(shí)候你會(huì)想這圖標(biāo)在網(wǎng)站里太小了。

對(duì)于設(shè)計(jì)師的你，矢量格式是非常方便，很多時(shí)候，當(dāng)你準(zhǔn)備做一個(gè)圖標(biāo)，你不想把它固定在一個(gè)尺寸里，如果你使用矢量格式，你可以隨心所欲地改變圖標(biāo)大小，而且放大后不會(huì)失真，再也不用擔(dān)心要重制圖標(biāo)

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

標(biāo)題名稱：網(wǎng)頁(yè)設(shè)計(jì)中如何正確使用圖標(biāo)
文章URL：http://www.rwnh.cn/news12/321012.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、商城網(wǎng)站、用戶體驗(yàn)、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)