【摘要】：隨著近些年來(lái)移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展,新型設(shè)備也層出不窮。各種設(shè)備隨時(shí)隨地接入互聯(lián)網(wǎng)的而需求也日益強(qiáng)烈。此時(shí),同一個(gè)網(wǎng)站在不同設(shè)備上的展示就成了一大難題。 響應(yīng)式設(shè)計(jì)的出現(xiàn)為跨設(shè)備的問(wèn)題提供了一種全新的解決思路。但響應(yīng)式設(shè)計(jì)需要解決的不僅是設(shè)備不同造成的設(shè)備尺寸、分辨率不同等問(wèn)題,還要解決不同設(shè)備的使用情景不同的問(wèn)題。本文從以上兩個(gè)維度進(jìn)行深入研究。 首先,響應(yīng)式設(shè)計(jì)解決不同設(shè)備尺寸不同的問(wèn)題。媒介查詢技術(shù)作為響應(yīng)式設(shè)計(jì)的核心,如何科學(xué)的設(shè)置媒介查詢的斷點(diǎn),成為了目前亟待解決的問(wèn)題。本文對(duì)響應(yīng)式設(shè)計(jì)流程及媒介查詢斷點(diǎn)設(shè)置的現(xiàn)狀進(jìn)行總結(jié)分析,提出不足,并提出了一種從設(shè)計(jì)的角度出發(fā),以用戶體驗(yàn)優(yōu)劣為標(biāo)準(zhǔn)的設(shè)置媒介查詢斷點(diǎn)的方法。進(jìn)行案例設(shè)計(jì),并通過(guò)實(shí)驗(yàn)對(duì)比所提出方法與原方法的滿意度,從而驗(yàn)證了該方法的可行性,為響應(yīng)式設(shè)計(jì)中媒介查詢斷點(diǎn)的設(shè)置提供了具有指導(dǎo)意義的方法。 隨后,響應(yīng)式設(shè)計(jì)解決不同設(shè)備使用情境不同的問(wèn)題。本文分析了web設(shè)計(jì)和移動(dòng)設(shè)計(jì)的常用控件類(lèi)型,并進(jìn)行提煉和歸納,總結(jié)出最基礎(chǔ)的單選、多選功能的幾種控件形式進(jìn)行實(shí)驗(yàn),通過(guò)實(shí)驗(yàn)數(shù)據(jù)分析得到不同控件在不同情境下的適用性。 最后,本文依據(jù)所做的兩個(gè)維度的研究成果,設(shè)計(jì)一款響應(yīng)式設(shè)計(jì)工具。設(shè)計(jì)過(guò)程包括需求分析、競(jìng)品分析、原型設(shè)計(jì)、視覺(jué)設(shè)計(jì)、設(shè)計(jì)思路說(shuō)明等過(guò)程。所設(shè)計(jì)的產(chǎn)品具有科學(xué)的研究基礎(chǔ),希望能夠?yàn)檫@一領(lǐng)域的設(shè)計(jì)師們作出貢獻(xiàn)。
【學(xué)位授予單位】：北京郵電大學(xué)
【學(xué)位級(jí)別】：碩士
【學(xué)位授予年份】：2015
【分類(lèi)號(hào)】：TN929.5;TP393.01
【圖文】：

而移動(dòng)產(chǎn)品是隨時(shí)隨地被使用的，而且常常利用碎片化的時(shí)間，使用過(guò)程的注意力也比較分散，如圖1-2、圖1-3[12]。響應(yīng)式不僅僅是一種跨設(shè)備不同尺寸下的解決方案，由于不同設(shè)備的使用場(chǎng)景不完全相同，因此即使是尺寸類(lèi)似的不同設(shè)備，也應(yīng)該有不同的設(shè)計(jì)側(cè)重。例如使用平板電腦的用戶常常在較為穩(wěn)定或輕微晃動(dòng)的場(chǎng)景下，此時(shí)用戶的注意力相對(duì)集中。而與平板電腦尺寸類(lèi)似的車(chē)載設(shè)備卻是在行車(chē)過(guò)程中使用的。此時(shí)用戶注意力更多的集中在駕駛上，而不能夠集中在車(chē)載設(shè)備本身。所以響應(yīng)式設(shè)計(jì)不應(yīng)該僅從尺寸變化一個(gè)維度研究，還應(yīng)該考慮使用場(chǎng)景的變化。_零漏W,糊圖1_2用戶隨時(shí)隨地使用移動(dòng)產(chǎn)品5

而移動(dòng)產(chǎn)品是隨時(shí)隨地被使用的，而且常常利用碎片化的時(shí)間，使用過(guò)程的注意力也比較分散，如圖1-2、圖1-3[12]。響應(yīng)式不僅僅是一種跨設(shè)備不同尺寸下的解決方案，由于不同設(shè)備的使用場(chǎng)景不完全相同，因此即使是尺寸類(lèi)似的不同設(shè)備，也應(yīng)該有不同的設(shè)計(jì)側(cè)重。例如使用平板電腦的用戶常常在較為穩(wěn)定或輕微晃動(dòng)的場(chǎng)景下，此時(shí)用戶的注意力相對(duì)集中。而與平板電腦尺寸類(lèi)似的車(chē)載設(shè)備卻是在行車(chē)過(guò)程中使用的。此時(shí)用戶注意力更多的集中在駕駛上，而不能夠集中在車(chē)載設(shè)備本身。所以響應(yīng)式設(shè)計(jì)不應(yīng)該僅從尺寸變化一個(gè)維度研究，還應(yīng)該考慮使用場(chǎng)景的變化。_零漏W,糊圖1_2用戶隨時(shí)隨地使用移動(dòng)產(chǎn)品5

因此對(duì)應(yīng)四種媒介查詢樣式。而通過(guò)本文方法得到的斷點(diǎn)為1070px、992px、880px、446px四個(gè)，因此對(duì)應(yīng)五種媒介查詢樣式。如圖2-6可以看出，兩種方法得到的斷點(diǎn)數(shù)據(jù)有很大差異。2.5.1實(shí)驗(yàn)?zāi)康淖髡邔⑼ㄟ^(guò)實(shí)驗(yàn)比較，通過(guò)本文提出的媒介查詢斷點(diǎn)設(shè)置方法得到的斷點(diǎn)數(shù)據(jù)，和傳統(tǒng)的斷點(diǎn)設(shè)置方法設(shè)置的斷點(diǎn)數(shù)據(jù)，兩者的滿意度情況。如圖2-6，由于傳統(tǒng)方法就是針對(duì)典型設(shè)備尺寸進(jìn)行的特別設(shè)計(jì)，因此在典型尺寸下對(duì)比兩種方法的滿意度意義不大，因此，本文僅以圖中黃色區(qū)域，即非典型尺寸部分的媒介查詢樣式為例，即“通過(guò)本文方法得到的第三四斷點(diǎn)間的樣式”和“通過(guò)傳統(tǒng)方法的第二三斷點(diǎn)間的樣式”兩者哪個(gè)用戶滿意度高。利用本文方法得出的媒介查詢斷廣 446px 人 ）、~1024^~、 960^ Y /68^該網(wǎng)站原有的媒介查詢斷點(diǎn) P胃圖2-6 本文方法和傳統(tǒng)方法得到的媒介查詢斷點(diǎn)分布2. 5. 2實(shí)驗(yàn)方法采用SUS系統(tǒng)可用性量表法。對(duì)如圖2-7、2-8界面進(jìn)行滿意度評(píng)估。17

【參考文獻(xiàn)】

相關(guān)期刊論文 前8條

1 李錦青;;WEB UI控件庫(kù)的開(kāi)發(fā)[J];長(zhǎng)春理工大學(xué)學(xué)報(bào)(自然科學(xué)版);2009年01期

2 侯文軍;秦源;;基于眼動(dòng)瀏覽規(guī)律的手機(jī)典型界面結(jié)構(gòu)研究[J];北京郵電大學(xué)學(xué)報(bào)(社會(huì)科學(xué)版);2014年01期

3 趙建保;;響應(yīng)式Web設(shè)計(jì)關(guān)鍵技術(shù)及設(shè)計(jì)流程[J];電腦知識(shí)與技術(shù);2014年05期

4 張樹(shù)明;;基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J];計(jì)算機(jī)與現(xiàn)代化;2013年06期

5 密海英;;面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)探析[J];蘇州市職業(yè)大學(xué)學(xué)報(bào);2013年02期

6 馬璇;鄺野;;移動(dòng)終端自適應(yīng)界面的一致性評(píng)價(jià)體系[J];軟件;2012年12期

7 陳寬飛;沈華英;;支持移動(dòng)終端的響應(yīng)式Web設(shè)計(jì)與研究[J];無(wú)線互聯(lián)科技;2013年03期

8 楊葉;陳琳;董啟標(biāo);;響應(yīng)式Web移動(dòng)學(xué)習(xí)資源的技術(shù)實(shí)現(xiàn)與設(shè)計(jì)研究[J];現(xiàn)代教育技術(shù);2013年06期

本文編號(hào)：2758900