1、網(wǎng)頁中的頁面區(qū)域設(shè)計(jì)網(wǎng)頁中的頁面區(qū)域設(shè)計(jì)主講：方穎松主講：方穎松Page 2主要頁面區(qū)域主要頁面區(qū)域n 標(biāo)志標(biāo)志logologon 導(dǎo)航導(dǎo)航n 主題區(qū)主題區(qū)n 底部區(qū)域底部區(qū)域Page 3Page 41 1 網(wǎng)站標(biāo)志網(wǎng)站標(biāo)志logologon 網(wǎng)站網(wǎng)站logo的要求的要求n 因?yàn)橐话闫髽I(yè)都有自己專門的因?yàn)橐话闫髽I(yè)都有自己專門的logo，所以一般企業(yè)網(wǎng)站開發(fā)過程中很少，所以一般企業(yè)網(wǎng)站開發(fā)過程中很少用到用到logo設(shè)計(jì)，但可能對(duì)部分設(shè)計(jì)，但可能對(duì)部分UI方案不完整的方案不完整的logo，進(jìn)行方向上的修改。，進(jìn)行方向上的修改。Page 5Page 61 1 網(wǎng)站標(biāo)志網(wǎng)站標(biāo)志logologon常規(guī)常

2、規(guī)logo組成組成圖形、中文名稱、英文名稱或英文網(wǎng)址或拼音圖形、中文名稱、英文名稱或英文網(wǎng)址或拼音 Page 71 1 網(wǎng)站標(biāo)志網(wǎng)站標(biāo)志logologonLogo設(shè)計(jì)常用手法設(shè)計(jì)常用手法詳細(xì)教程見網(wǎng)絡(luò)課程平臺(tái)詳細(xì)教程見網(wǎng)絡(luò)課程平臺(tái)課程資源課程資源Page 82.導(dǎo)航導(dǎo)航n 導(dǎo)航的定義：網(wǎng)頁導(dǎo)航（導(dǎo)航的定義：網(wǎng)頁導(dǎo)航（navigation）是指通過一定的技術(shù)手段，）是指通過一定的技術(shù)手段，為網(wǎng)頁的訪問者提供一定的途徑，使其可以方便地訪問到所需的內(nèi)為網(wǎng)頁的訪問者提供一定的途徑，使其可以方便地訪問到所需的內(nèi)容。網(wǎng)頁導(dǎo)航設(shè)置是在網(wǎng)頁欄目結(jié)構(gòu)的基礎(chǔ)上，進(jìn)一步為用戶瀏覽容。網(wǎng)頁導(dǎo)航設(shè)置是在網(wǎng)頁欄目結(jié)構(gòu)的基

3、礎(chǔ)上，進(jìn)一步為用戶瀏覽網(wǎng)頁提供的提示系統(tǒng)網(wǎng)頁提供的提示系統(tǒng)Page 92.導(dǎo)航導(dǎo)航n 導(dǎo)航的類型導(dǎo)航的類型n 頂部水平欄導(dǎo)航頂部水平欄導(dǎo)航 n 豎直豎直/側(cè)邊欄導(dǎo)航側(cè)邊欄導(dǎo)航n 選項(xiàng)卡導(dǎo)航選項(xiàng)卡導(dǎo)航n 彈出式菜單和下拉菜單導(dǎo)航彈出式菜單和下拉菜單導(dǎo)航Page 102.導(dǎo)航導(dǎo)航n頂部水平欄導(dǎo)航：當(dāng)前最流行地網(wǎng)站導(dǎo)航菜單設(shè)計(jì)模式之一。它最常用頂部水平欄導(dǎo)航：當(dāng)前最流行地網(wǎng)站導(dǎo)航菜單設(shè)計(jì)模式之一。它最常用于網(wǎng)站的主導(dǎo)航菜單，且最通常地放在網(wǎng)站所有頁面的主題區(qū)的上方或于網(wǎng)站的主導(dǎo)航菜單，且最通常地放在網(wǎng)站所有頁面的主題區(qū)的上方或下方。下方。n頂部水平欄導(dǎo)航對(duì)于只需要在主導(dǎo)航中顯示頂部水平欄導(dǎo)航對(duì)于只需

4、要在主導(dǎo)航中顯示5-12個(gè)導(dǎo)航項(xiàng)的網(wǎng)站來說是個(gè)導(dǎo)航項(xiàng)的網(wǎng)站來說是非常好的選擇。當(dāng)它與下拉子導(dǎo)航結(jié)合時(shí)，這種設(shè)計(jì)模式可以支持更多非常好的選擇。當(dāng)它與下拉子導(dǎo)航結(jié)合時(shí)，這種設(shè)計(jì)模式可以支持更多的鏈接。的鏈接。 Page 11Page 12Page 132.導(dǎo)航導(dǎo)航n豎直豎直/側(cè)邊欄導(dǎo)航側(cè)邊欄導(dǎo)航n側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列，一側(cè)邊欄導(dǎo)航的導(dǎo)航項(xiàng)被排列在一個(gè)單列，一項(xiàng)在一項(xiàng)的上面。它經(jīng)常在左上角的列上，項(xiàng)在一項(xiàng)的上面。它經(jīng)常在左上角的列上，在主題區(qū)之前。根據(jù)一份針對(duì)從左到右習(xí)慣在主題區(qū)之前。根據(jù)一份針對(duì)從左到右習(xí)慣讀者的導(dǎo)航模式的可用性研究，左邊的豎直讀者的導(dǎo)航模式的可用性研究，左邊的豎直導(dǎo)

5、航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。導(dǎo)航欄比右邊的豎直導(dǎo)航表現(xiàn)要好。Page 14Page 15Page 162.導(dǎo)航導(dǎo)航n選項(xiàng)卡導(dǎo)航選項(xiàng)卡導(dǎo)航n選項(xiàng)卡導(dǎo)航可以隨意設(shè)計(jì)成任何你想要的樣式，從逼真的，有手感的標(biāo)簽到選項(xiàng)卡導(dǎo)航可以隨意設(shè)計(jì)成任何你想要的樣式，從逼真的，有手感的標(biāo)簽到圓滑的標(biāo)簽，以及簡單地方邊的標(biāo)簽等。它存在于各種各樣的網(wǎng)站里，并且圓滑的標(biāo)簽，以及簡單地方邊的標(biāo)簽等。它存在于各種各樣的網(wǎng)站里，并且可以納入任何視覺效果?？梢约{入任何視覺效果。n優(yōu)點(diǎn)：選項(xiàng)卡比起其它類別的導(dǎo)航有一個(gè)明顯的優(yōu)勢：它們對(duì)用戶有積極的優(yōu)點(diǎn)：選項(xiàng)卡比起其它類別的導(dǎo)航有一個(gè)明顯的優(yōu)勢：它們對(duì)用戶有積極的心理效應(yīng)。人們通常

6、把導(dǎo)航與選項(xiàng)卡關(guān)聯(lián)在一起，因?yàn)樗麄冊?jīng)在筆記本或心理效應(yīng)。人們通常把導(dǎo)航與選項(xiàng)卡關(guān)聯(lián)在一起，因?yàn)樗麄冊?jīng)在筆記本或資料夾里看見選項(xiàng)卡，并且把它們與切換到一個(gè)新的章節(jié)聯(lián)系在一起。這個(gè)資料夾里看見選項(xiàng)卡，并且把它們與切換到一個(gè)新的章節(jié)聯(lián)系在一起。這個(gè)真實(shí)世界的暗喻使得選項(xiàng)卡導(dǎo)航非常直觀。真實(shí)世界的暗喻使得選項(xiàng)卡導(dǎo)航非常直觀。n缺點(diǎn)：它比簡單的頂部水平欄更難設(shè)計(jì)。它們通常需要更多的標(biāo)簽，圖片資缺點(diǎn)：它比簡單的頂部水平欄更難設(shè)計(jì)。它們通常需要更多的標(biāo)簽，圖片資源以及源以及CSS，具體根據(jù)標(biāo)簽的視覺復(fù)雜度而定。選項(xiàng)卡的另一個(gè)缺點(diǎn)是它們，具體根據(jù)標(biāo)簽的視覺復(fù)雜度而定。選項(xiàng)卡的另一個(gè)缺點(diǎn)是它們也不太適用于鏈

7、接很多的情況也不太適用于鏈接很多的情況Page 17Page 18Page 192.導(dǎo)航導(dǎo)航n彈出式菜單和下拉菜單導(dǎo)航彈出式菜單和下拉菜單導(dǎo)航n彈出式菜單彈出式菜單(與豎直與豎直/側(cè)邊欄導(dǎo)航一側(cè)邊欄導(dǎo)航一起使用起使用)和下拉菜單和下拉菜單(一般與頂部水一般與頂部水平欄導(dǎo)航一起使用平欄導(dǎo)航一起使用)是構(gòu)建健壯的是構(gòu)建健壯的導(dǎo)航系統(tǒng)的好方法。導(dǎo)航系統(tǒng)的好方法。n優(yōu)點(diǎn)：它使得你的網(wǎng)站整體上看起優(yōu)點(diǎn)：它使得你的網(wǎng)站整體上看起來很整潔，而且使得深層章節(jié)很容來很整潔，而且使得深層章節(jié)很容易被訪問。易被訪問。n缺點(diǎn)：除非你在主導(dǎo)航鏈接邊上放缺點(diǎn)：除非你在主導(dǎo)航鏈接邊上放置一些標(biāo)識(shí)置一些標(biāo)識(shí)(通常是箭頭圖標(biāo)通

8、常是箭頭圖標(biāo))，不，不然訪客可能不知道那有包含子導(dǎo)航然訪客可能不知道那有包含子導(dǎo)航項(xiàng)的下拉或出式菜單，因此使這些項(xiàng)的下拉或出式菜單，因此使這些標(biāo)識(shí)很明顯是非常重要的。同時(shí)出標(biāo)識(shí)很明顯是非常重要的。同時(shí)出式菜單和下拉可能使得導(dǎo)航在移動(dòng)式菜單和下拉可能使得導(dǎo)航在移動(dòng)設(shè)備上非常難用，所以要確保你的設(shè)備上非常難用，所以要確保你的移動(dòng)樣式表處理了這種情況。移動(dòng)樣式表處理了這種情況。Page 20Page 21Page 22n 導(dǎo)航常見設(shè)計(jì)手法導(dǎo)航常見設(shè)計(jì)手法n 漸變底色漸變底色+文字文字n 底紋底紋+文字文字n 不同底色不同底色+文字文字n 圖標(biāo)圖標(biāo)+底色底色+文字文字n 蘋果風(fēng)格蘋果風(fēng)格n 個(gè)性導(dǎo)航個(gè)

9、性導(dǎo)航Page 23漸變底色漸變底色+文字文字Page 24圖標(biāo)圖標(biāo)+底色底色+文字文字Page 25不同底色不同底色+文字文字Page 26蘋果風(fēng)格蘋果風(fēng)格Page 27個(gè)性導(dǎo)航個(gè)性導(dǎo)航Page 28n 導(dǎo)航的注意事項(xiàng)導(dǎo)航的注意事項(xiàng)n 站點(diǎn)導(dǎo)航切忌堆疊太多站點(diǎn)導(dǎo)航切忌堆疊太多n 導(dǎo)航欄不推薦導(dǎo)航欄不推薦 flash。Page 293. 主題區(qū)主題區(qū)n 主題區(qū)概念：指網(wǎng)頁中表達(dá)主題、突出主題的較大幅面的圖像或動(dòng)主題區(qū)概念：指網(wǎng)頁中表達(dá)主題、突出主題的較大幅面的圖像或動(dòng)畫。一個(gè)好的主題區(qū)域，可以使瀏覽者見該區(qū)域即知其內(nèi)容，主題畫。一個(gè)好的主題區(qū)域，可以使瀏覽者見該區(qū)域即知其內(nèi)容，主題區(qū)能夠形成整

10、個(gè)頁面的視覺中心，它具有直觀性強(qiáng)的特點(diǎn)，不需要區(qū)能夠形成整個(gè)頁面的視覺中心，它具有直觀性強(qiáng)的特點(diǎn)，不需要像文字那樣去逐字逐句地閱讀，可以不受文化水平的限制，并能在像文字那樣去逐字逐句地閱讀，可以不受文化水平的限制，并能在瞬間給人以深刻印象。瞬間給人以深刻印象。Page 303. 主題區(qū)主題區(qū)n 設(shè)計(jì)形式設(shè)計(jì)形式n 全頁面寬大圖片全頁面寬大圖片+文字文字n 局部圖片局部圖片+文字文字Page 313. 主題區(qū)主題區(qū)n 全頁面寬大圖片全頁面寬大圖片+文字文字Page 323. 主題區(qū)主題區(qū)Page 333. 主題區(qū)主題區(qū)3. 主題區(qū)主題區(qū)Page 34Page 353. 主題區(qū)主題區(qū)n 局部圖片局

11、部圖片+文字文字Page 363. 主題區(qū)主題區(qū)Page 373. 主題區(qū)主題區(qū)n 常見設(shè)計(jì)手法常見設(shè)計(jì)手法圖片圖片+文字編排文字編排Page 38Page 393. 主題區(qū)主題區(qū)Page 40Page 41Page 423. 主題區(qū)主題區(qū)n 常見設(shè)計(jì)手法常見設(shè)計(jì)手法圖片漸變過渡圖片漸變過渡+同類底色同類底色+文字編排文字編排Page 43Page 443. 主題區(qū)主題區(qū)n 常見設(shè)計(jì)手法常見設(shè)計(jì)手法人物或產(chǎn)品摳圖人物或產(chǎn)品摳圖+底色或底圖底色或底圖+文字編排文字編排Page 45Page 46Page 47Page 484. 底部區(qū)域底部區(qū)域n 底部導(dǎo)航（可選）底部導(dǎo)航（可選）n 關(guān)于本站關(guān)于本站n 聯(lián)系我們聯(lián)系我們n 網(wǎng)站地圖網(wǎng)站地圖n 廣告服務(wù)廣告服務(wù)