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

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

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

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

【參考文獻】

相關期刊論文 前8條

1 李錦青;;WEB UI控件庫的開發(fā)[J];長春理工大學學報(自然科學版);2009年01期

2 侯文軍;秦源;;基于眼動瀏覽規(guī)律的手機典型界面結構研究[J];北京郵電大學學報(社會科學版);2014年01期

3 趙建保;;響應式Web設計關鍵技術及設計流程[J];電腦知識與技術;2014年05期

4 張樹明;;基于響應式Web設計的網頁模板的設計與實現[J];計算機與現代化;2013年06期

5 密海英;;面向不同設備的響應式網頁設計探析[J];蘇州市職業(yè)大學學報;2013年02期

6 馬璇;鄺野;;移動終端自適應界面的一致性評價體系[J];軟件;2012年12期

7 陳寬飛;沈華英;;支持移動終端的響應式Web設計與研究[J];無線互聯(lián)科技;2013年03期

8 楊葉;陳琳;董啟標;;響應式Web移動學習資源的技術實現與設計研究[J];現代教育技術;2013年06期

本文編號：2758900