界面設計之圖標設計規(guī)范

2024-08-30 08:36:27

字體：大中小

供稿：網(wǎng)友

界面設計之圖標設計規(guī)范圖標樣式應該有趣、色彩豐富且充滿活力，因為現(xiàn)在的系統(tǒng)支持圖標是32位圖標，并且邊緣非常平滑。在矢量程序中繪制完每個圖標后，再用Adobe Photoshop進行處理可使圖像更加完美。本規(guī)范是專為設計者編寫的。在創(chuàng)建圖像時，建議您與高水平的圖形設計者一起工作，尤其是具有豐富的矢量和3D軟件經(jīng)驗的圖形設計者。

　　圖標設計概述的目的是讓您熟悉WindowsXP的新樣式，為創(chuàng)建圖標做好準備。

圖標樣式特性

　　(1) 色彩豐富，是對WindowsXP外觀的補充。
　　(2) 不同的角度和透視特性為圖像增添了動態(tài)活力。
　　(3) 元素的邊角十分柔和，并略微有些圓滑。
　　(4) 光源位于圖標的左上角，同時有環(huán)繞光照亮圖標的其它部分。
　　(5) 漸變效果使圖標具有立體感，進而使圖標的外觀更加豐滿。
　　(6) 投影使圖標更具對比度和立體感。
　　(7) 添加輪廓可使圖像更清晰。
　　(8) 日常對象(如計算機和設備)具有更現(xiàn)代化的個人外觀。

圖標尺寸

　　Windows XP圖標有四種尺寸，建議使用以下四種尺寸：
　　(1) 48×48像素
　　(2) 32×32像素
　　(3) 24×24像素
　　(4) 16×16像素

圖標色彩深度支持

　　WindowsXP支持32位圖標。32位圖標為24位圖像加上8位alpha通道。使圖標邊緣非常平滑，且與背景相融合。
　　每個WindowsXP圖標應包含以下三種色彩深度，以支持不同的顯示器顯示設置：
　　24位圖像加上8位alpha通道(32位)
　　8位圖像(256色)，加上1位透明色
　　4位圖像(16色)，加上1位透明色

調(diào)色板

　　圖標中使用的主要顏色。

對象的角度和分組

　　WindowsXP樣式圖標使用的透視網(wǎng)格：并非所有對象使用16×16的復雜圖像都能獲得較好效果。某些對象通常以直觀圖像顯示：文檔圖標、符號圖標(如警告或信息圖標)、單一對象圖標(如放大鏡)

　　除非創(chuàng)建重疊輔助對象可以更清楚地表達圖標的含義，否則就可讀性和完整性而言，還是應使用直觀圖像。還應考慮如何按組查看圖標，以便確定如何將對象分組。

投影

　　使用投影后，WindowsXP圖標將更清晰且更具立體感?？稍赑hotoshop中實現(xiàn)這種效果，本指南的后面部分將對此進行描述。若要為圖像添加投影，請在 Photoshop中雙擊圖像的圖層，并選擇Drop Shadow。然后將Angle更改為135，Distance更改為 2，Size更改為2。此時投影為75%不透明黑色。

輪廓

　　繪制XP樣式圖標時，為圖像添加輪廓可使之更清晰，并可保證圖像在不同背景色上都具有較好效果。

概念

　　設計圖標時，請考慮以下因素：
　　使用已有概念以確保真實表達了用戶的想法?？紤]圖標在用戶界面環(huán)境中以何種形式出現(xiàn)，以及如何作為圖標集的一部分使用?？紤]圖形的文化背景。避免在圖標中使用字母、單詞、手或臉。必須用圖標表示人或用戶時，請盡可能使其大眾化。如果圖標中的圖像由多個對象組成，應考慮如何使圖像尺寸更小。建議在圖標中使用的對象不超過三個。對于 16×16的尺寸大小，還可考慮刪除某些對象或簡化圖像使之更容易辨認。

透明工具

　　將Gif Movie Gear(GMG)打開一個對話框，其中顯示您的圖標。使用吸管工具單擊圖標的背景色。此顏色將更改為暗黃綠色(或在 GMG中選作透明背景色的顏色)。重復所有4位和8位幀。若要保存圖標，請選擇 File->Save Icon As...。

創(chuàng)建工具欄

　　Windows工具欄圖標除不使用投影之外，使用的樣式與其它圖標相同。由于工具欄圖標非常小，建議您使用簡單的圖像。如果以直觀方式顯示圖像即可清晰地表達圖標的含義，則不必使用其它復雜方式。

創(chuàng)建AVI

　　WindowsXP使用8位AVI。創(chuàng)建.avi文件的過程與創(chuàng)建圖標的過程相同-在Photoshop中準備圖像，然后將其拖動到GMG 中。請按以下指導創(chuàng)建8位圖標。若要使用GMG保存AVI，請轉(zhuǎn)至File->Export As->AVI file。
　　創(chuàng)建.avi文件時，請考慮以下因素：使用品紅(R255 G0 B255)作為背景透明色。在Photoshop中，重要的一點是不要出現(xiàn)雜散像素。請將填充能力設置為0，并確認未選中取消鋸齒。

上一篇：WEB設計經(jīng)驗－來自microsoft.com設計主管

下一篇：網(wǎng)站規(guī)劃書的寫作規(guī)范！