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

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

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

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

，

本文編號：291708