圖標設(shè)計課件

圖標設(shè)計一、圖標設(shè)計原則一、圖標設(shè)計原則圖標設(shè)計的目的

優(yōu)點：用圖標代替文字，比文字要直觀，提高軟件可用性；用圖標代替文字，比文字更漂亮，提升視覺效果；缺點：不如文字表達的準確。一、圖標設(shè)計原則第一：可識別性原則看到一個圖標，就要明白他所代表的含義，這是圖標設(shè)計的靈魂。一、圖標設(shè)計原則第一：可識別性原則例：高速公路上的路標設(shè)計，我只能說，這是最好的圖標設(shè)計，可識別性強，簡單，直觀，即使是不認識字的人，也能立即理解圖標的含義。見圖（1）一、圖標設(shè)計原則第一：可識別性原則圖（2）是一些常用工具類的圖標，你是否一眼就能看出每個圖標的區(qū)別和含義呢？一、圖標設(shè)計原則第一：可識別性原則圖（3）為我們的設(shè)計師Veronica為6301項目進行的圖標設(shè)計，符合可識別性原則。一、圖標設(shè)計原則第二：差異性原則

差異性原則，什么意思呢？意思是如果一個界面上有六個圖標，我一眼看上去，要能第一時間感覺到他們之間的差異性，否則我怎么辨認呢？一、圖標設(shè)計原則第二：差異性原則

見圖（4），這是我平時最常用的一套軟件：用友致遠辦公管理系統(tǒng)，我只能說從差異性和可識別性來講，這里的圖標設(shè)計非常失敗。一、圖標設(shè)計原則第二：差異性原則

圖（5）這套圖標很漂亮，但是從差異性上來講，這套圖標也是失敗的，黃色的文件夾部分的六個圖標，一眼望去幾乎又是一樣的，差異極小，在具體應(yīng)用過程中會很吃力，用戶需要仔細觀察才能區(qū)分出他們的差別。一、圖標設(shè)計原則第二：差異性原則

Catia是世界領(lǐng)先的CAD\CAE大型軟件系統(tǒng)，但是它V5R16版本圖標設(shè)計同樣存在上述問題，見圖（6），一眼望上去幾乎一個樣子，同時邊緣粗糙，配色生硬，缺乏美感一、圖標設(shè)計原則第二：差異性原則

我們看下圖AdobePhotoshop的圖標，精致，專業(yè)，圖標設(shè)計的典范。我們看它完全符合差異性的原則，每個圖標一眼望上去，都不一樣，并且能夠代表所需要的操作，可謂望圖知意。一、圖標設(shè)計原則第三：合適的精細度，元素個數(shù)首先我們要明確一個點，圖標的主要作用是用的，代替文字，第二才是美觀。但現(xiàn)在的圖標設(shè)計者往往陷入了一個誤區(qū)，片面的追求精細，高光和質(zhì)感。其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。在初始階段，圖標可用性會隨著精細度的變化而上升，但是達到一定精細度以后，圖標的可用性往往會隨著圖標的精細度而下降。變化曲線如下圖：。一、圖標設(shè)計原則第三：合適的精細度，元素個數(shù)下圖是一個表示“設(shè)置”的齒輪圖標，我們看到，最左邊的最簡單的和最右邊的照片級的，可用性都是非常低的，都不適合做圖標。第三：合適的精細度，元素個數(shù)差異性原則，什么意思呢？意思是如果一個界面上有六個圖標，我一眼看上去，要能第一時間感覺到他們之間的差異性，否則我怎么辨認呢？天氣通第四屆手機桌面插件設(shè)計大賽其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。圖標設(shè)計的原創(chuàng)性并不是必要的，因為目前常用的圖標風(fēng)格種類已經(jīng)很多，易用性較高的風(fēng)格也就那么多種，過度追求圖標的原創(chuàng)性和藝術(shù)效果，會導(dǎo)致圖標設(shè)計另辟蹊徑，這樣做往往會降低圖標的易用性降低，也就是說所謂的好看不實用。從藝術(shù)性上它可以拿到10分，從可用性上，它可能是0分，因為圖標是拿來用的，我實在不知道它表達的是什么意思2、圖層樣式+混合模式天氣通第四屆手機桌面插件設(shè)計大賽的要求設(shè)計一套完整的作品（要占用課余時間哦）圖（3）為我們的設(shè)計師Veronica為6301項目進行的圖標設(shè)計，符合可識別性原則。比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計一系列的圖標。我很推崇ICONFACTORY的圖標設(shè)計，見圖（11），合適的精細度達到精美的視覺效果，同時又很直觀，不會包含過多的元素，讓你去思考。圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一堆，拿出來一看，粗糙，刺眼，土氣。是簡約的，還是精致的？圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一堆，拿出來一看，粗糙，刺眼，土氣。因此，圖標的設(shè)計，要考慮圖標所處的環(huán)境，這樣的圖標，是否適合這樣的界面？一、圖標設(shè)計原則第三：合適的精細度，元素個數(shù)Vista是微軟的比較失敗的一個產(chǎn)品，原因很多，但主要的原因之一是被人稱之為華而不實。我們看一下Vista的圖標設(shè)計，見圖（10），很漂亮，很精細，但是很顯然，圖標包含的元素過多了，不夠直觀，用戶需要思考這么多元素，代表的到底什么意思？這正好違反了交互設(shè)計第一原則“不要讓我思考”一、圖標設(shè)計原則第三：合適的精細度，元素個數(shù)我很推崇ICONFACTORY的圖標設(shè)計，見圖（11），合適的精細度達到精美的視覺效果，同時又很直觀，不會包含過多的元素，讓你去思考。一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則如果一套圖標的視覺設(shè)計非常協(xié)調(diào)統(tǒng)一，我們就說這套圖標具有自己的風(fēng)格，這樣的圖標看上去也會更美麗，更專業(yè)，同時也會增強用戶的滿意度。是簡約的，還是精致的？是平面的，還是立體的？

是古典的，還是現(xiàn)代的？

是寫實的，還是卡通的？

是單色的，還是多彩的？

是絢麗的，還是柔和的？

是抽象的，還是具體的？

是有框的，還是無框的？一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則統(tǒng)一你的色彩，準備好你的調(diào)色板一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則下圖是ICONFACTORY設(shè)計的一套圖標，色彩唯美，風(fēng)格統(tǒng)一，散發(fā)著神秘感，你不覺得它很美嗎？一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則下圖同樣出自ICONFACTORY，平面的，帶邊框的的，簡單的可愛的卡通的風(fēng)格。一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則右圖這套圖標出自俄羅斯設(shè)計師之手，看到這套圖標，你是否會想起中世紀的歐洲，大航海時代？一、圖標設(shè)計原則第四：風(fēng)格統(tǒng)一性原則一款叫DOPWARS的小游戲做的任務(wù)角色圖標設(shè)計，你可以看到它那種可愛的、3D的、卡通的風(fēng)格，色彩也和諧一致。一、圖標設(shè)計原則第五：與環(huán)境的協(xié)調(diào)性圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。因此，圖標的設(shè)計，要考慮圖標所處的環(huán)境，這樣的圖標，是否適合這樣的界面？比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計一系列的圖標。一、圖標設(shè)計原則第五：與環(huán)境的協(xié)調(diào)性如果你的界面是平面的，簡約的，你可以考慮用一些簡單的平面的符號或者圖形來設(shè)計你的圖標，這樣整個界面會很協(xié)調(diào)，不要認為這樣的圖標是簡陋的，其實這樣的圖標的可識別性非常強的，在簡潔的界面里，會透露出一種簡約之美。下圖是我對UI設(shè)計四個階段“用戶研究，交互設(shè)計，視覺設(shè)計，可用性測試”的圖標定義

當然還少了一個前提，那就是設(shè)計師的天賦。第三：合適的精細度，元素個數(shù)當然還少了一個前提，那就是設(shè)計師的天賦。統(tǒng)一你的色彩，準備好你的調(diào)色板但現(xiàn)在的圖標設(shè)計者往往陷入了一個誤區(qū)，片面的追求精細，高光和質(zhì)感。例：高速公路上的路標設(shè)計，我只能說，這是最好的圖標設(shè)計，可識別性強，簡單，直觀，即使是不認識字的人，也能立即理解圖標的含義。其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。當然還少了一個前提，那就是設(shè)計師的天賦。在初始階段，圖標可用性會隨著精細度的變化而上升，但是達到一定精細度以后，圖標的可用性往往會隨著圖標的精細度而下降。0或者之前的所有版本，不支持透明和半透明。圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。下圖是一個表示“設(shè)置”的齒輪圖標，我們看到，最左邊的最簡單的和最右邊的照片級的，可用性都是非常低的，都不適合做圖標。比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計一系列的圖標。其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線?？吹揭粋€圖標，就要明白他所代表的含義，這是圖標設(shè)計的靈魂。一、圖標設(shè)計原則第五：與環(huán)境的協(xié)調(diào)性體育運動類圖標的設(shè)計一、圖標設(shè)計原則第五：視覺效果追求視覺效果，一定是要在保證差異性，可識別性，統(tǒng)一性，協(xié)調(diào)性原則的基礎(chǔ)上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一堆，拿出來一看，粗糙，刺眼，土氣。這一條我不想說的太多，因為這是幾乎是每個設(shè)計都努力的目標，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多創(chuàng)作。當然還少了一個前提，那就是設(shè)計師的天賦。勤奮+天賦=成功一、圖標設(shè)計原則第六:原創(chuàng)性圖標設(shè)計的原創(chuàng)性并不是必要的，因為目前常用的圖標風(fēng)格種類已經(jīng)很多，易用性較高的風(fēng)格也就那么多種，過度追求圖標的原創(chuàng)性和藝術(shù)效果，會導(dǎo)致圖標設(shè)計另辟蹊徑，這樣做往往會降低圖標的易用性降低，也就是說所謂的好看不實用。當然，這里也要看你的產(chǎn)品的側(cè)重點，如果考慮更多的是情感化的設(shè)計，完美的藝術(shù)效果，這樣做也無可厚非。一、圖標設(shè)計原則第六:原創(chuàng)性這套“中國風(fēng)圖標”我們可以說它具有原創(chuàng)性，它很美，但是這樣的圖標做不到望圖知意，實際上失去了易用性，所以說，原創(chuàng)性與易用性，很多時候是一把雙刃劍，看你的選擇了一、圖標設(shè)計原則第六:原創(chuàng)性上面的圖標設(shè)計，相信很多設(shè)計師都看過，簡直就是完美的藝術(shù)品，我驚嘆于它的藝術(shù)效果和原創(chuàng)性。從藝術(shù)性上它可以拿到10分，從可用性上，它可能是0分，因為圖標是拿來用的，我實在不知道它表達的是什么意思永遠記住這一條，圖標的價值在于它比文字更直觀，失去了這一條，就是去了它的意義。一、圖標設(shè)計原則第七：尺寸大小與格式圖標的尺寸常有以下幾種：16×1624×2432×3248×4864×64128×128256×256圖標過大占用界面空間過多，過小又會降低精細度，具體該使用多大尺寸的圖標，常常根據(jù)界面的需求而定。

一、圖標設(shè)計原則第七：尺寸大小與格式一、圖標設(shè)計原則圖標的常用格式有以下幾種：PNG，GIF，ICO，BMP，

PNG：無損壓縮格式，支持透明，兼顧圖像質(zhì)量和文件大小，但是請注意，PNG格式在網(wǎng)頁中，IE6.0或者之前的所有版本，不支持透明和半透明。GIF：網(wǎng)頁圖片常用格式，支持透明，優(yōu)點是壓縮的文件小，支持GIF動畫，缺點是不支持半透明，顏色數(shù)最多只能顯示256種顏色，透明圖標的邊緣會有鋸齒，要解決此問題，必須在存成此格式時候，添加相同背景色的雜邊，比較麻煩。JPG：有損壓縮，優(yōu)點是文件小，圖像顏色豐富，缺點是不支持透明和半透明ICO：WINDOWS系統(tǒng)的圖標文件格式，支持多通道透明，支持32位真彩色你可以用ICONWORKSHOP軟件，把PNG,GIF,JPG等格式的圖標，轉(zhuǎn)換成ICO格式。ICNS：Macintosh系統(tǒng)里獨特支持的格式，僅限于此系統(tǒng)。二、圖標的創(chuàng)作二、圖標的創(chuàng)作1、圖標的分類Vista是微軟的比較失敗的一個產(chǎn)品，原因很多，但主要的原因之一是被人稱之為華而不實。作業(yè)：根據(jù)2015年新浪.圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一堆，拿出來一看，粗糙，刺眼，土氣。第三：合適的精細度，元素個數(shù)統(tǒng)一你的色彩，準備好你的調(diào)色板天氣通第四屆手機桌面插件設(shè)計大賽的要求設(shè)計一套完整的作品（要占用課余時間哦）上面的圖標設(shè)計，相信很多設(shè)計師都看過，簡直就是完美的藝術(shù)品，我驚嘆于它的藝術(shù)效果和原創(chuàng)性。圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。追求視覺效果，一定是要在保證差異性，可識別性，統(tǒng)一性，協(xié)調(diào)性原則的基礎(chǔ)上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。圖標設(shè)計的原創(chuàng)性并不是必要的，因為目前常用的圖標風(fēng)格種類已經(jīng)很多，易用性較高的風(fēng)格也就那么多種，過度追求圖標的原創(chuàng)性和藝術(shù)效果，會導(dǎo)致圖標設(shè)計另辟蹊徑，這樣做往往會降低圖標的易用性降低，也就是說所謂的好看不實用。第三：合適的精細度，元素個數(shù)你可以用ICONWORKSHOP軟件，把PNG,GIF,JPG等格式的圖標，轉(zhuǎn)換成ICO格式。ICO：WINDOWS系統(tǒng)的圖標文件格式，支持多通道透明，支持32位真彩色但現(xiàn)在的圖標設(shè)計者往往陷入了一個誤區(qū)，片面的追求精細，高光和質(zhì)感。下圖同樣出自ICONFACTORY，平面的，帶邊框的的，簡單的可愛的卡通的風(fēng)格。二、圖標的創(chuàng)作2、圖標創(chuàng)作方法二、圖標的創(chuàng)作3、圖標的分類二、圖標的創(chuàng)作4、主題圖標的造型二、圖標的創(chuàng)作5、主題圖標創(chuàng)作原則作業(yè)：根據(jù)2015年新浪.比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計一系列的圖標。圖標的尺寸常有以下幾種：追求視覺效果，一定是要在保證差異性，可識別性，統(tǒng)一性，協(xié)調(diào)性原則的基礎(chǔ)上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。天氣通第四屆手機桌面插件設(shè)計大賽的要求設(shè)計一套完整的作品（要占用課余時間哦）我們看下圖AdobePhotoshop的圖標，精致，專業(yè)，圖標設(shè)計的典范。當然還少了一個前提，那就是設(shè)計師的天賦。圖標的常用格式有以下幾種：PNG，GIF，ICO，BMP，這套“中國風(fēng)圖標”我們可以說它具有原創(chuàng)性，它很美，但是這樣的圖標做不到望圖知意，實際上失去了易用性，所以說，原創(chuàng)性與易用性，很多時候是一把雙刃劍，看你的選擇了第三：合適的精細度，元素個數(shù)下圖同樣出自ICONFACTORY，平面的，帶邊框的的，簡單的可愛的卡通的風(fēng)格。圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。因此，圖標的設(shè)計，要考慮圖標所處的環(huán)境，這樣的圖標，是否適合這樣的界面？在初始階段，圖標可用性會隨著精細度的變化而上升，但是達到一定精細度以后，圖標的可用性往往會隨著圖標的精細度而下降。16×1624×2432×3248×4864×64128×128256×256二、圖標的創(chuàng)作6、主題圖標創(chuàng)作順序二、圖標的創(chuàng)作6、提高圖標創(chuàng)作方法三、圖標的制作技巧三、圖標的制作技巧1、圖標造型方法三、圖標的制作技巧2、圖層樣式+混合模式三、圖標的制作技巧四、主題圖標佳作賞析2015年新浪.天氣通第四屆手機桌面插件設(shè)計大賽作業(yè)：根據(jù)2015年新浪.天氣通第四屆手機桌面插件設(shè)計大賽的要求設(shè)計一套完整的作品（要占用課余時間哦）第三：合適的精細度，元素個數(shù)2、圖層樣式+混合模式0或者之前的所有版本，不支持透明和半透明。其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。我們看下圖AdobePhotoshop的圖標，精致，專業(yè)，圖標設(shè)計的典范。當然還少了一個前提，那就是設(shè)計師的天賦。永遠記住這一條，圖標的價值在于它比文字更直觀，失去了這一條，就是去了它的意義。第三：合適的精細度，元素個數(shù)其實，圖標的可用性隨著精細度的變化，是一個類似于波峰的曲線。圖標的常用格式有以下幾種：PNG，GIF，ICO，BMP，下圖是ICONFACTORY設(shè)計的一套圖標，色彩唯美，風(fēng)格統(tǒng)一，散發(fā)著神秘感，你不覺得它很美嗎？用圖標代替文字，比文字更漂亮，提升視覺效果；作業(yè)：根據(jù)2015年新浪.ICO：WINDOWS系統(tǒng)的圖標文件格式，支持多通道透明，支持32位真彩色我們看下圖AdobePhotoshop的圖標，精致，專業(yè)，圖標設(shè)計的典范。謝謝！一、圖標設(shè)計原則第二：差異性原則

差異性原則，什么意思呢？意思是如果一個界面上有六個圖標，我一眼看上去，要能第一時間感覺到他們之間的差異性，否則我怎么辨認呢？一、圖標設(shè)計原則第三：合適的精細度，元素個數(shù)我很推崇ICONFACTORY的圖標設(shè)計，見圖（11），合適的精細度達到精美的視覺效果，同時又很直觀，不會包含過多的元素，讓你去思考。一、圖標設(shè)計原則第五：與環(huán)境的協(xié)調(diào)性圖標是沒有單獨存在的，圖標最終是要放置在界面上才會起作用的。因此，圖標的設(shè)計，要考慮圖標所處的環(huán)境，這樣的圖標，是否適合這樣的界面？比如你的界面是森林和大地，你就可以考慮用石塊，木頭，或者蘑菇，野花設(shè)計一系列的圖標。一、圖標設(shè)計原則第五：視覺效果追求視覺效果，一定是要在保證差異性，可識別性，統(tǒng)一性，協(xié)調(diào)性原則的基礎(chǔ)上，要先滿足基本的功能需求，才可以考慮更高層次的要求--情感需求。圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一堆，拿出來一看，粗糙，刺眼，土氣。這一條我不想說的太多，因為這是幾乎是每個設(shè)計都努力的目標，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多創(chuàng)作。當然還少了一個前提，那就是設(shè)計師的天賦。勤奮+天賦=成功三、圖標的制作技巧圖標設(shè)計的視覺效果，很大程度上取決于設(shè)計師的天賦、美感和藝術(shù)修養(yǎng)，有些設(shè)計師做了很多年的設(shè)計，作品一