本文關(guān)鍵詞：基于響應(yīng)式Web設(shè)計(jì)中用戶界面的分析與探究，由筆耕文化傳播整理發(fā)布。

【摘要】：如今,互聯(lián)網(wǎng)的蓬勃發(fā)展帶動(dòng)了各種設(shè)備的興起。大屏幕設(shè)備的普及與小屏幕移動(dòng)設(shè)備的快速發(fā)展,導(dǎo)致多種設(shè)備屏幕尺寸和分辨率的差異性。為大屏幕設(shè)備設(shè)計(jì)固定模式的傳統(tǒng)網(wǎng)頁無法適應(yīng)現(xiàn)代小型移動(dòng)設(shè)備屏幕的變換與更新。用戶的瀏覽方式逐漸由傳統(tǒng)的桌面電腦向便攜的移動(dòng)設(shè)備轉(zhuǎn)變。面對這種轉(zhuǎn)變形式,網(wǎng)頁設(shè)計(jì)者需要共同解決一個(gè)重要難題:網(wǎng)頁設(shè)計(jì)亟需一種新技術(shù)來順應(yīng)互聯(lián)網(wǎng)終端的變革,用以解決單個(gè)網(wǎng)站的頁面布局能兼容多種設(shè)備的功能。伊桑·馬科特為此提出了“響應(yīng)式網(wǎng)頁設(shè)計(jì)”,這已成為跨終端適配的最佳解決方案,這是一個(gè)新的設(shè)計(jì)理念,即將已有的流式布局、彈性圖片和媒體查詢等方法結(jié)合起來,運(yùn)用HTML5和CSS3等技術(shù)整合為一種新型的網(wǎng)頁設(shè)計(jì)模式。響應(yīng)式網(wǎng)頁設(shè)計(jì)根據(jù)用戶使用設(shè)備的環(huán)境和行為,動(dòng)態(tài)調(diào)整頁面布局結(jié)構(gòu),提升網(wǎng)站瀏覽速度,并呈現(xiàn)出更加美觀的頁面布局效果,同時(shí)解決了跨設(shè)備、跨瀏覽器的問題,使網(wǎng)頁內(nèi)容自動(dòng)響應(yīng)不同的瀏覽設(shè)備,呈現(xiàn)出不同的布局效果,進(jìn)而提升了用戶體驗(yàn)的滿意度。本文首先從響應(yīng)式網(wǎng)頁設(shè)計(jì)的發(fā)展現(xiàn)狀出發(fā),分析其存在的緣由與特性;其次,結(jié)合優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計(jì)實(shí)例,分析和探究響應(yīng)式網(wǎng)頁設(shè)計(jì)的三個(gè)組成要素即媒體查詢、流式布局和彈性圖片的使用,通過理論與實(shí)踐相結(jié)合的方式,探討響應(yīng)式網(wǎng)頁設(shè)計(jì)在用戶界面中CSS3和HTML5的技術(shù)實(shí)踐,從而有效解決了傳統(tǒng)固定寬度模式中網(wǎng)頁設(shè)計(jì)的弊端,做出關(guān)于響應(yīng)式網(wǎng)頁的畢業(yè)設(shè)計(jì)作品,最后對響應(yīng)式網(wǎng)頁設(shè)計(jì)未來發(fā)展的優(yōu)勢與缺陷進(jìn)行分析,提出響應(yīng)式網(wǎng)頁設(shè)計(jì)的后續(xù)研究建議。響應(yīng)式設(shè)計(jì)作為網(wǎng)頁設(shè)計(jì)的新趨勢,促進(jìn)了網(wǎng)頁的發(fā)展。通過分析響應(yīng)式網(wǎng)頁可以得出:網(wǎng)頁設(shè)計(jì)以友好的用戶體驗(yàn)為中心,在滿足用戶視覺體驗(yàn)與功能需求的同時(shí),將網(wǎng)頁界面設(shè)計(jì)與技術(shù)相融合,深入理解響應(yīng)式網(wǎng)頁界面設(shè)計(jì)的深層內(nèi)涵。
【關(guān)鍵詞】：網(wǎng)頁設(shè)計(jì) 響應(yīng)式 媒體查詢 CSS3 HTML5
【學(xué)位授予單位】：中南民族大學(xué)
【學(xué)位級別】：碩士
【學(xué)位授予年份】：2015
【分類號】：TP393.092
【目錄】：

• 摘要8-9
• Abstract9-11
• 第一章 緒論11-18
• 一、課題研究背景11-14
• (一) 網(wǎng)頁設(shè)計(jì)的發(fā)展及現(xiàn)狀11-13
• 1. 響應(yīng)式網(wǎng)頁設(shè)計(jì)的定義11-12
• 2. 響應(yīng)式建筑與響應(yīng)式網(wǎng)頁的關(guān)系12-13
• (二) 國內(nèi)外研究的現(xiàn)狀13-14
• 1. 國內(nèi)的研究現(xiàn)狀水平13-14
• 2. 國外的研究現(xiàn)狀及創(chuàng)新之處14
• 二、研究目的與方法14-18
• (一) 研究目的14-15
• (二) 研究思路與方法15-16
• 1.研究思路15-16
• 2.研究方法16
• (三) 研究內(nèi)容結(jié)構(gòu)16-17
• (四) 研究意義17-18
• 第二章 實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)的要素分析18-26
• 一、響應(yīng)式網(wǎng)頁存在的必要性18-26
• (一) 用戶體驗(yàn)的需求18-20
• (二) 支持小屏幕移動(dòng)設(shè)備的重要性20-21
• (三) 桌面版瀏覽器不同視口的需求21-26
• 1.背景圖平鋪?zhàn)赃m應(yīng)21-22
• 2.中心定位兩側(cè)自適應(yīng)22
• 3.單側(cè)定位中心延展22-23
• 4.瀑布流式設(shè)計(jì)23-26
• 第三章 如何實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)26-41
• 一、媒體查詢：支持不同視口26-32
• (一) 什么是媒體查詢26-27
• (二) 為什么響應(yīng)式設(shè)計(jì)需要媒體查詢27-28
• (三) CSS3媒體查詢特性28-30
• (四) 如何在iOS和Android設(shè)備上使用媒體查詢30
• (五) 為特定視口設(shè)定CSS樣式30-32
• 二、流式布局（百分比布局）32-35
• (一) 為什么響應(yīng)式設(shè)計(jì)需要流式布局33-34
• (二) 將固定布局修改成百分比布局34-35
• (三) 為媒體查詢增加靈活性：em替換px35
• 三、用彈性圖片解決視口縮放35-41
• (一) 怎樣使圖片進(jìn)行工作37
• (二) 圖片伴隨視口縮放37-38
• (三) 為不同的屏幕尺寸提供不同的圖片38-39
• (四) 為特定圖片指定特定規(guī)則39-41
• 第四章 響應(yīng)式網(wǎng)頁設(shè)計(jì)用戶界面的實(shí)踐41-53
• 一、響應(yīng)式網(wǎng)頁設(shè)計(jì)中CSS3的實(shí)踐41-47
• (一) 增加動(dòng)態(tài)導(dǎo)航的視覺體驗(yàn)41-44
• (二) 網(wǎng)頁字體的設(shè)計(jì)與分析44-46
• (三) CSS3的顏色模式及透明通道的使用46-47
• (四) 為背景增加靈活性47
• 二、響應(yīng)式設(shè)計(jì)中的HTML5的實(shí)踐47-50
• (一) HTML5的語義化47-48
• (二) 可響應(yīng)的HTML5視頻48-50
• 三、讓設(shè)計(jì)超越媒介：響應(yīng)不同屏幕和視口50-53
• (一) 跨瀏覽器支持響應(yīng)式設(shè)計(jì)50-51
• (二) 讓舊版本瀏覽器支持響應(yīng)式設(shè)計(jì)51
• (三) 導(dǎo)航鏈接轉(zhuǎn)換為下拉菜單51-52
• (四) 響應(yīng)高分辨率的設(shè)備52-53
• 第五章 關(guān)于響應(yīng)式網(wǎng)頁的畢業(yè)設(shè)計(jì)53-59
• 一、畢業(yè)設(shè)計(jì)中響應(yīng)式網(wǎng)頁設(shè)計(jì)的實(shí)踐53-57
• (一) 網(wǎng)頁整體結(jié)構(gòu)設(shè)計(jì)53-57
• 1.導(dǎo)航區(qū)域53-54
• 2.首頁部分54
• 3.品牌風(fēng)格54-55
• 4.設(shè)計(jì)團(tuán)隊(duì)55
• 5.特別推薦55-56
• 6.品牌故事56
• 7.產(chǎn)品類型56-57
• 8.聯(lián)系我們57
• 9.頁腳部分57
• 二、畢業(yè)設(shè)計(jì)作品中存在的不足之處57-59
• 總結(jié)59-62
• 一、響應(yīng)式網(wǎng)頁設(shè)計(jì)未來發(fā)展的優(yōu)勢59
• 二、響應(yīng)式網(wǎng)頁設(shè)計(jì)存在的缺陷59-60
• 三、響應(yīng)式網(wǎng)頁設(shè)計(jì)的后續(xù)研究建議60-62
• 注釋62-65
• 參考文獻(xiàn)65-68
• 致謝68-69
• 附錄A 在讀期間所發(fā)表的學(xué)術(shù)論文69

  本文關(guān)鍵詞：基于響應(yīng)式Web設(shè)計(jì)中用戶界面的分析與探究，由筆耕文化傳播整理發(fā)布。

，

本文編號：291708