按鈕和導航條的設(shè)計與制作

1、2本章目標本章目標 n了解按鈕在網(wǎng)站制作中的作用以及按鈕的設(shè)計原了解按鈕在網(wǎng)站制作中的作用以及按鈕的設(shè)計原則則n了解網(wǎng)站整體形象規(guī)劃與設(shè)計方法了解網(wǎng)站整體形象規(guī)劃與設(shè)計方法n熟悉常用按鈕的類型熟悉常用按鈕的類型n掌握常用按鈕的制作方法掌握常用按鈕的制作方法n掌握導航條的制作方法掌握導航條的制作方法35.1 按鈕的設(shè)計原則按鈕的設(shè)計原則設(shè)計按鈕時應盡量避免以下設(shè)計禁忌。設(shè)計按鈕時應盡量避免以下設(shè)計禁忌。n同一頁面包含重復功能的按鈕；同一頁面包含重復功能的按鈕；n將復選框用作單選按鈕；將復選框用作單選按鈕；n單選按鈕之間間隔太大；單選按鈕之間間隔太大；n取消按鈕無法真正取消操作；取消按鈕無法真正取

2、消操作；n返回按鈕不能達到預期的目的；返回按鈕不能達到預期的目的；n圖片按鈕對鼠標按下操作沒有視覺變化。圖片按鈕對鼠標按下操作沒有視覺變化。45.2 常見按鈕樣式的制作常見按鈕樣式的制作 n5.2.1 簡潔按鈕簡潔按鈕n5.2.2 迷你按鈕迷你按鈕n5.2.3 水晶按鈕水晶按鈕n5.2.4 塑料按鈕塑料按鈕n5.2.5 木紋按鈕木紋按鈕n5.2.6 金屬按鈕金屬按鈕55.2.1 簡潔按鈕簡潔按鈕n實例效果實例效果n操作步驟操作步驟 (略略)65.2.2 迷你按鈕迷你按鈕n實例效果實例效果 n操作步驟操作步驟(略略)75.2.3 水晶按鈕水晶按鈕n實例效果實例效果 n操作步驟操作步驟(略略)85

3、.2.4 塑料按鈕塑料按鈕n實例效果實例效果n操作步驟操作步驟(略略)95.2.5 木紋按鈕木紋按鈕n實例效果實例效果n操作步驟操作步驟(略略)105.2.6 金屬按鈕金屬按鈕n實例效果實例效果n操作步驟操作步驟(略略)115.3 導航條的制作導航條的制作n網(wǎng)站導航的主要困難在于如何利用簡短的、易于網(wǎng)站導航的主要困難在于如何利用簡短的、易于理解的方式來呈現(xiàn)網(wǎng)絡(luò)的諸多方向。另外，優(yōu)秀理解的方式來呈現(xiàn)網(wǎng)絡(luò)的諸多方向。另外，優(yōu)秀的導航方案還會增加網(wǎng)站的觀賞性，給瀏覽者留的導航方案還會增加網(wǎng)站的觀賞性，給瀏覽者留下深刻的印象。下深刻的印象。n本節(jié)主要學習網(wǎng)站中導航條的制作方法本節(jié)主要學習網(wǎng)站中導航條的

4、制作方法125.3 導航條的制作導航條的制作n實例效果實例效果n操作步驟操作步驟(略略)135.4 企業(yè)識別企業(yè)識別VI設(shè)計設(shè)計n5.4.1 企業(yè)識別概念企業(yè)識別概念n5.4.2 網(wǎng)站整體形象規(guī)劃與設(shè)計開發(fā)網(wǎng)站整體形象規(guī)劃與設(shè)計開發(fā)145.4.1 企業(yè)識別概念企業(yè)識別概念n企業(yè)識別系統(tǒng)（企業(yè)識別系統(tǒng)（CIS）構(gòu)成要素）構(gòu)成要素nMI （ Mind Identity ）理念識別）理念識別 nBI （Behavior Identity） 行為識別行為識別nVI（Visual Identity）視覺形象識別系統(tǒng)）視覺形象識別系統(tǒng)155.4.2 網(wǎng)站整體形象規(guī)劃與設(shè)計開發(fā)網(wǎng)站整體形象規(guī)劃與設(shè)計開發(fā)n個

5、網(wǎng)站上看到的所有圖片、文字、動畫以及它們個網(wǎng)站上看到的所有圖片、文字、動畫以及它們的編排方式等一切能夠看到的無不都是的編排方式等一切能夠看到的無不都是VI設(shè)計一設(shè)計一部分。簡單地說，部分。簡單地說，VI其實就是一個網(wǎng)站的外觀。其實就是一個網(wǎng)站的外觀。n一個好的視覺設(shè)計，首先要有一個好的視覺效果。一個好的視覺設(shè)計，首先要有一個好的視覺效果。一個最簡單的判別方法是看三眼：第一眼，看是一個最簡單的判別方法是看三眼：第一眼，看是否搶眼；第二眼，看是否順眼；第三眼，看是否否搶眼；第二眼，看是否順眼；第三眼，看是否養(yǎng)眼。其實，這三眼就上網(wǎng)站給你的第一感覺。養(yǎng)眼。其實，這三眼就上網(wǎng)站給你的第一感覺。 16本章總結(jié)本章總結(jié)n了解按鈕在網(wǎng)站制作中的作用以及按鈕的設(shè)計原了解按鈕在網(wǎng)站制作中的作用以及