第5章 設(shè)計(jì)網(wǎng)站頁面效果

CONTENTS1.設(shè)計(jì)和制作網(wǎng)站頁面布局設(shè)計(jì)和制作網(wǎng)站頁面布局1.微課網(wǎng)的視覺設(shè)計(jì)遵循共同的網(wǎng)頁風(fēng)格，有自己的配色體系，它們分別是橙色、白色和灰色，我們的色彩體系是如圖所示。微課網(wǎng)色彩體系PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局網(wǎng)站由非常多的頁面組成，它們都會(huì)作為一個(gè)資源放入隨書所附的電子資源里面。在這個(gè)案例中，重點(diǎn)要介紹4張網(wǎng)頁，分別是首頁、課程、筆記和登陸注冊(cè)頁面。它們涉及到交互類型網(wǎng)站的大部分知識(shí)，因此，在這里也列出它們的布局圖。網(wǎng)站頁面布局PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局首頁頁面布局圖課程頁面布局圖PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局筆記頁面布局圖登陸注冊(cè)頁面布局圖根據(jù)上一節(jié)提供的布局圖，以我們的系統(tǒng)配色為依據(jù)，我們制作了頁面圖，這些圖片默認(rèn)網(wǎng)頁寬度是1024px。PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局設(shè)計(jì)和制作頁面圖首頁設(shè)計(jì)圖課程頁面設(shè)計(jì)圖根據(jù)上一節(jié)提供的布局圖，以我們的系統(tǒng)配色為依據(jù)，我們制作了頁面圖，這些圖片默認(rèn)網(wǎng)頁寬度是1024px。PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局設(shè)計(jì)和制作頁面圖筆記頁面設(shè)計(jì)圖登陸注冊(cè)頁面設(shè)計(jì)圖網(wǎng)頁設(shè)計(jì)師需要考慮有效的表達(dá)構(gòu)思的圖形效果。通過圖形確立網(wǎng)頁風(fēng)格大致分為：平面圖形、半立體圖形、立體圖形。微課網(wǎng)用平面圖形進(jìn)行視覺造型。我們?cè)O(shè)計(jì)了統(tǒng)一的字體，插圖，圖形符號(hào)，和照片。漢字是我們數(shù)千年來的交流工具，它象形，表意。時(shí)至今日，字體(typography)的發(fā)展和研究仍然在繼續(xù)。計(jì)算機(jī)出現(xiàn)后，字形（typeface）的開發(fā)和表現(xiàn)越來越多樣化字體不僅僅局限于可讀性，也可以依靠文字的屬性-字形、大小、字號(hào)、字間距等變化主動(dòng)的引導(dǎo)人們集中視線。本網(wǎng)站采用微軟雅黑為標(biāo)準(zhǔn)字體，正文字號(hào)14px，標(biāo)題30px，PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局設(shè)計(jì)和制作logo、icon字體微課網(wǎng)的Logo來源于微課的漢語拼音Weike，我們使用了前兩個(gè)字母W和e然后對(duì)它進(jìn)行變形。我們?cè)O(shè)計(jì)了2個(gè)Logo樣式，分別放在首頁和子頁面里面。如圖所示。PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局logo用于首頁的logo圖用于子頁的logo圖對(duì)于網(wǎng)頁而言，圖形符號(hào)主要用作象征主頁、網(wǎng)站地圖、留言等圖標(biāo)，比如說點(diǎn)贊的圖標(biāo)。稱之為icon。圖形符號(hào)有著單一的形態(tài)。在微課網(wǎng)中我們采用了Bootstrap授權(quán)使用的圖形。如圖所示。圖形符號(hào)（pictogram）是指不受國家、文化、地區(qū)等限制的單一化視覺語言，它也是人們能夠快速、最準(zhǔn)確地進(jìn)行溝通的交流手段。比如奧運(yùn)會(huì)圖形符號(hào)如圖所示。PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局Icon08奧運(yùn)會(huì)圖標(biāo)公共場(chǎng)所符號(hào)微課網(wǎng)使用的部分icon圖越來越多的網(wǎng)站重視網(wǎng)站特效的設(shè)計(jì)和使用，我們稱之為動(dòng)效（DynamicEffect）大到頁面的轉(zhuǎn)場(chǎng)，圖片相冊(cè)的切換，小到圖標(biāo)的動(dòng)作等，在重視用戶交互和用戶體驗(yàn)的網(wǎng)站中非常多見。比如說w3網(wǎng)站的首頁，它的Logo會(huì)隨著http://ua.w3.co/。PART.1設(shè)計(jì)和制作網(wǎng)站頁面布局設(shè)計(jì)和制作網(wǎng)站特效圖片輪播首頁中我們采用了圖片輪播的形式，一次播放熱門課程、熱門專題、熱門討論的鏈接式大圖如圖所示。用戶在收藏某課程、筆記的時(shí)候就需要點(diǎn)擊收藏圖標(biāo)?；蛘咴邳c(diǎn)贊某個(gè)帖子，某個(gè)課程時(shí)，就會(huì)出現(xiàn)這