孟晨 潘秋岑 張立新

[摘 要] 基于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的理念、特點(diǎn)，對(duì)比分析傳統(tǒng)期刊網(wǎng)站與響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的價(jià)值特性，以“用戶為中心”對(duì)期刊網(wǎng)站在個(gè)人電腦和不同移動(dòng)設(shè)備平臺(tái)上的文字、圖片及控件等信息進(jìn)行自適應(yīng)分析及重構(gòu)設(shè)計(jì)，為期刊用戶在移動(dòng)設(shè)備上訪問(wèn)期刊網(wǎng)站提供新的解決方案和參考，對(duì)于期刊網(wǎng)站的建設(shè)具有較好的實(shí)踐意義和指導(dǎo)意義。

[關(guān)鍵詞] 期刊網(wǎng)站 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) 移動(dòng)設(shè)備平臺(tái) 自適應(yīng)

[中圖分類號(hào)] G237 [文獻(xiàn)標(biāo)識(shí)碼] A [文章編號(hào)] 1009-5853 （2016） 04-0105-06

[Abstract] According to the concept and features of Responsive Web Design （RWD），compare the traditional periodical websites with the responsive-designed journal web pages. Based on new ideas and methods of RWD，re-design a journal's website with the elements of texts，graphics and controls etc both on the PC and different mobile device platforms. Complied with the user-oriented principle，the newly designed website provides a new solution and reference for journal readers to access journal websites on mobile devices and improves their user experiences.

[Key words] Journal Website Responsive web design Mobile device platform Adaptive

互聯(lián)網(wǎng)技術(shù)的發(fā)展，衍生了眾多網(wǎng)絡(luò)產(chǎn)品。國(guó)務(wù)院總理李克強(qiáng)提出的“互聯(lián)網(wǎng)+”行動(dòng)計(jì)劃將促使更多傳統(tǒng)行業(yè)向互聯(lián)網(wǎng)模式發(fā)展[1]。作為數(shù)字化和網(wǎng)絡(luò)化的產(chǎn)物，期刊網(wǎng)站建設(shè)是當(dāng)前期刊發(fā)展的重要舉措之一[2]。國(guó)內(nèi)現(xiàn)有期刊網(wǎng)站主要從技術(shù)、功能、安全性和互動(dòng)性等方面進(jìn)行開(kāi)發(fā)和維護(hù)[3-5]，很少考慮用戶體驗(yàn)要素以及瀏覽器和移動(dòng)設(shè)備的兼容性問(wèn)題。相關(guān)數(shù)據(jù)[6]顯示，用戶在移動(dòng)設(shè)備上的瀏覽份額正逐步擴(kuò)大：截止2014年6月底，中國(guó)第三方手機(jī)瀏覽器市場(chǎng)累計(jì)賬戶規(guī)模達(dá)10.8億，較上季度環(huán)比增長(zhǎng)7.5%。而現(xiàn)有期刊網(wǎng)站移動(dòng)端服務(wù)形式多為移動(dòng)版網(wǎng)頁(yè)，即對(duì)常規(guī)網(wǎng)站功能和內(nèi)容的原版復(fù)制或簡(jiǎn)化，頁(yè)面加載速度慢且不適應(yīng)移動(dòng)設(shè)備屏幕大小。隨著移動(dòng)平臺(tái)類型的增加，需對(duì)不同移動(dòng)設(shè)備進(jìn)行獨(dú)立的站點(diǎn)定制。這樣做雖能提高用戶體驗(yàn)，但具有擴(kuò)展局限性，且需消耗較多成本來(lái)開(kāi)發(fā)和維護(hù)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design，RWD）多能解決這些問(wèn)題。

RWD由伊森·馬克特（Ethan Marcotte）在2010年提出[7]，也稱自適應(yīng)設(shè)計(jì)，指網(wǎng)站集中創(chuàng)建頁(yè)面的圖文版式，基于CSS3 的Media Queries功能智能地根據(jù)用戶行為及設(shè)備環(huán)境自動(dòng)調(diào)整頁(yè)面的結(jié)構(gòu)布局，以適應(yīng)不同平臺(tái)的尺寸屏幕，并結(jié)合JavaScript 實(shí)現(xiàn)頁(yè)面交互功能，使用戶享有一致的瀏覽體驗(yàn)。RWD主要從前端界面框架、功能實(shí)現(xiàn)及技術(shù)支持方面進(jìn)行研發(fā)，已成為設(shè)計(jì)趨勢(shì)并逐步運(yùn)用在視頻網(wǎng)站[8]、電子商務(wù)[9]、高校門(mén)戶[10]和服務(wù)移動(dòng)平臺(tái)[11]等網(wǎng)站，并掀起了一股網(wǎng)頁(yè)設(shè)計(jì)新標(biāo)準(zhǔn)浪潮[12]。用戶可通過(guò)“突唯阿”“起飛頁(yè)”等RWD自助建設(shè)平臺(tái)，使用模板免費(fèi)創(chuàng)建響應(yīng)式網(wǎng)站，建站速度快、成本低，但缺乏個(gè)性、功能簡(jiǎn)單、網(wǎng)站代碼和結(jié)構(gòu)大量雷同，不利于搜索引擎優(yōu)化及期刊品牌和形象建設(shè)。RWD也在期刊相關(guān)網(wǎng)站中得到運(yùn)用，但范圍較小。國(guó)外有美國(guó)化學(xué)學(xué)會(huì)（ACS）、英國(guó)皇家化學(xué)學(xué)會(huì)（RSC）和自然出版公司（Nature） 等旗下的網(wǎng)站，國(guó)內(nèi)有《中國(guó)圖書(shū)館學(xué)報(bào)》《臨床與病理雜志》等的網(wǎng)站。這些RWD網(wǎng)站大部分采用扁平化的流行視覺(jué)設(shè)計(jì)風(fēng)格，頁(yè)面布局均衡統(tǒng)一，形成了自我特色。但是，其在手機(jī)端的顯示經(jīng)常出現(xiàn)圖片壓縮變形或像素變低、內(nèi)容或圖片缺失、按鈕錯(cuò)位和頁(yè)面局部留白過(guò)大等現(xiàn)象。

本文基于RWD原理，重新設(shè)計(jì)期刊網(wǎng)站頁(yè)面布局及視覺(jué)元素，使同一網(wǎng)站能根據(jù)移動(dòng)設(shè)備類型，自適應(yīng)后按照不同的格式展現(xiàn)在不同的用戶交互系統(tǒng)上，以增強(qiáng)網(wǎng)站的可用性、易用性和互動(dòng)性，為期刊網(wǎng)站提高交互體驗(yàn)提供參考。

1 期刊網(wǎng)站網(wǎng)頁(yè)自適應(yīng)分析

傳統(tǒng)期刊網(wǎng)站主要是對(duì)個(gè)人電腦（PC）的桌面瀏覽器進(jìn)行設(shè)計(jì)，RWD擴(kuò)展了網(wǎng)站在移動(dòng)設(shè)備上的應(yīng)用，減少了終端設(shè)備的局限性。用戶可隨時(shí)使用移動(dòng)設(shè)備瀏覽網(wǎng)站，充分利用碎片時(shí)間，實(shí)用性強(qiáng)。

1.1 傳統(tǒng)期刊網(wǎng)站與RWD網(wǎng)站用戶體驗(yàn)分析

期刊傳統(tǒng)網(wǎng)站與RWD網(wǎng)站的價(jià)值對(duì)比表現(xiàn)為以下幾個(gè)方面。

1.1.1 頁(yè)面呈現(xiàn)形式

傳統(tǒng)期刊網(wǎng)站以圖文、音視頻和動(dòng)畫(huà)等方式呈現(xiàn)網(wǎng)站信息，其萬(wàn)維網(wǎng)（Web）頁(yè)面在移動(dòng)終端的直接瀏覽體驗(yàn)較差，體現(xiàn)為文字和鏈接細(xì)小、兼容性弱和需縮放瀏覽等，易導(dǎo)致用戶放棄瀏覽。為改善用戶瀏覽體驗(yàn)，各大搜索引擎提供了轉(zhuǎn)碼技術(shù)，使網(wǎng)站能夠適應(yīng)移動(dòng)終端環(huán)境。如百度轉(zhuǎn)碼將Web頁(yè)面中不能在手機(jī)瀏覽器上顯示的內(nèi)容去除，將缺乏可替代移動(dòng)（mobile）資源的元素轉(zhuǎn)換為適合手機(jī)瀏覽的移動(dòng)端網(wǎng)頁(yè)。但是，轉(zhuǎn)碼后排版頁(yè)面參差不齊，內(nèi)容、圖片和功能菜單缺失及色彩單一等缺陷削弱了用戶體驗(yàn)。用戶需點(diǎn)擊頁(yè)面頂部右上角或頁(yè)面底部的“電腦版”鏈接，以瀏覽未轉(zhuǎn)碼的原網(wǎng)頁(yè)，用戶目標(biāo)操作步驟增加。而RWD在不同平臺(tái)上的視覺(jué)表現(xiàn)相似，體驗(yàn)效果一致，如微軟的官網(wǎng)就很好地體現(xiàn)這些特點(diǎn)。

1.1.2 適應(yīng)度和交互性

傳統(tǒng)期刊網(wǎng)頁(yè)設(shè)計(jì)僅考慮PC機(jī)的尺寸，而RWD能根據(jù)設(shè)備的屏幕大小自動(dòng)調(diào)整頁(yè)面布局，為用戶創(chuàng)造統(tǒng)一的體驗(yàn)環(huán)境。本文RWD案例的基本尺寸標(biāo)準(zhǔn)如圖1所示。

傳統(tǒng)期刊網(wǎng)站主要通過(guò)鼠標(biāo)和鍵盤(pán)等設(shè)備與網(wǎng)站頁(yè)面元素進(jìn)行交互，觸屏移動(dòng)設(shè)備的交互控件主要通過(guò)手指與界面進(jìn)行多點(diǎn)觸控操作，其操作方式涉及的目標(biāo)操作區(qū)域大于鼠標(biāo)指針。因此，PC平臺(tái)和觸屏移動(dòng)設(shè)備對(duì)界面布局、頁(yè)面切換效果、按鈕、行距、字體大小等方面要求區(qū)別較大，后者對(duì)界面的交互方式和視覺(jué)效果的呈現(xiàn)要求更高。當(dāng)用戶使用移動(dòng)設(shè)備瀏覽傳統(tǒng)期刊網(wǎng)站時(shí)，易出現(xiàn)字體、行距和圖片等元素過(guò)小、可觸控區(qū)域尺寸太窄、頁(yè)面部分元素被裁剪等現(xiàn)象，導(dǎo)致功能不易觸發(fā)，操作難度增加。

1.2 自適應(yīng)頁(yè)面功能需求分析

期刊網(wǎng)站的總體功能目標(biāo)是讓用戶能夠通過(guò)各種終端設(shè)備瀏覽網(wǎng)站內(nèi)容。本案例根據(jù)網(wǎng)站功能需求和目標(biāo)定位明確期刊網(wǎng)站的頁(yè)面數(shù)量、內(nèi)容及其優(yōu)先級(jí)[13]。以《西安工業(yè)大學(xué)學(xué)報(bào)》網(wǎng)站為例，其常用的功能主要包括“期刊簡(jiǎn)介”“文章查詢”“編輯風(fēng)采”“作者園地”“學(xué)術(shù)動(dòng)態(tài)”“廣告服務(wù)”“聯(lián)系我們”等。

期刊網(wǎng)站的特殊性在于用戶的閱讀需求，因此用戶使用移動(dòng)設(shè)備（特別是手機(jī)端）瀏覽網(wǎng)站，喜歡更大的字體和更清晰的圖片，以便在舒適的距離閱讀內(nèi)容。因此期刊網(wǎng)站的定位是建立專注內(nèi)容的響應(yīng)式網(wǎng)站，即“內(nèi)容優(yōu)先”。移動(dòng)設(shè)備用戶所處的網(wǎng)絡(luò)環(huán)境相對(duì)穩(wěn)定，因此使用不同類型設(shè)備的期刊用戶，目標(biāo)差別和對(duì)功能的需求差異較小，RWD能同時(shí)滿足這些需求。圖2為期刊用戶基于不同設(shè)備的某一閱讀需求，共同目標(biāo)可歸為查閱一篇已出刊的文章。

1.3 頁(yè)面結(jié)構(gòu)及響應(yīng)模式

本文選定3個(gè)典型的頁(yè)面模板，寬度分別為1680像素（桌面顯示器）、1024像素（IPad橫屏寬度）及320像素（IPhone豎屏寬度），制作響應(yīng)式框架以規(guī)劃樣式背后的邏輯。此階段需明確整個(gè)網(wǎng)站在功能和布局方面最具代表性的關(guān)鍵頁(yè)面。期刊網(wǎng)站的“關(guān)鍵頁(yè)面”包括首頁(yè)、過(guò)刊查詢頁(yè)面、作者園地頁(yè)面等。

網(wǎng)頁(yè)設(shè)計(jì)中整體頁(yè)面的常用排版布局包括“通欄”和“≥兩欄”兩種類型，其中“≥兩欄”包含等分和非等分[14]，如圖3所示。傳統(tǒng)期刊網(wǎng)站通常采用兩欄式或三欄式固定布局，即頁(yè)面以像素為基本單位，只設(shè)計(jì)一套尺寸以適應(yīng)PC 機(jī)的不同屏幕分辨率，不能根據(jù)移動(dòng)設(shè)備大小迥異的屏幕分辨率進(jìn)行自適應(yīng)調(diào)整顯示，靈活性較差。在較小的分辨率下，頁(yè)面產(chǎn)生橫向滾動(dòng)條；在較大分辨率下，頁(yè)面兩側(cè)產(chǎn)生空白區(qū)域。

（a）通欄 （c）≥兩欄-非等分

RWD強(qiáng)調(diào)設(shè)計(jì)的靈活性：網(wǎng)站依據(jù)屏幕分辨率靈活布局內(nèi)容，頁(yè)面每個(gè)元素的大小、位置及樣式均隨之彈性調(diào)整和排布。常用響應(yīng)式布局方式包括可切換的固定布局、彈性布局和混合布局?？汕袚Q的固定布局指頁(yè)面以像素為基本單位，根據(jù)主流設(shè)備尺寸確定布局?jǐn)帱c(diǎn)（發(fā)生布局改變的臨界點(diǎn)），選擇最合適的一套寬度布局；彈性布局指頁(yè)面以百分比為基本單位，可適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕；混合布局自適應(yīng)能力與效果和彈性布局相似，只是其頁(yè)面結(jié)合像素和百分比作為基本單位。頁(yè)面實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，需對(duì)相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，選擇合適的斷點(diǎn)進(jìn)行布局響應(yīng)?？汕袚Q固定布局是基于設(shè)備的設(shè)計(jì)模式，可相對(duì)固定斷點(diǎn)，實(shí)現(xiàn)成本較低，但設(shè)備的快速更新導(dǎo)致其無(wú)法良好地覆蓋或適配所有設(shè)備，拓展性較差。彈性布局與混合布局是內(nèi)容優(yōu)先的設(shè)計(jì)模式，兩者均可無(wú)視設(shè)備而根據(jù)內(nèi)容的可讀性和易讀性來(lái)確定布局?jǐn)帱c(diǎn)，適應(yīng)性較強(qiáng)，基本能覆蓋全目標(biāo)設(shè)備，是比較理想的響應(yīng)式布局方式。彈性布局適用于通欄、等分結(jié)構(gòu)，混合布局適合非等分的多欄結(jié)構(gòu)。

以首頁(yè)為例，網(wǎng)頁(yè)設(shè)計(jì)采用彈性布局形式，為了盡可能使頁(yè)面響應(yīng)簡(jiǎn)單輕巧，且同一斷點(diǎn)內(nèi)保持統(tǒng)一的邏輯，提高網(wǎng)站整體體驗(yàn)和頁(yè)面性能，模塊中內(nèi)容的響應(yīng)方式結(jié)合布局不變中的“換行-平鋪”和布局改變中的“模塊展示方式改變”兩種形式。圖4為網(wǎng)站首頁(yè)的3種響應(yīng)規(guī)格的頁(yè)面結(jié)構(gòu)和響應(yīng)模式。

2 期刊網(wǎng)站自適應(yīng)設(shè)計(jì)

2.1 低保真原型設(shè)計(jì)

結(jié)合信息架構(gòu)及響應(yīng)模式，綜合考慮各個(gè)設(shè)備的特性進(jìn)行低保真原型（線框圖）設(shè)計(jì)，便于網(wǎng)站設(shè)計(jì)開(kāi)發(fā)團(tuán)隊(duì)溝通與設(shè)計(jì)思維的迭代，線框圖繪制工具可選擇Axure、MockFlow以及Balsamiq Mockups等。將頁(yè)面模塊主要?dú)w納為全局導(dǎo)航區(qū)、內(nèi)容區(qū)、功能區(qū)和底部導(dǎo)航區(qū)4個(gè)部分。以首頁(yè)為例，全局導(dǎo)航區(qū)包括語(yǔ)言導(dǎo)航、身份導(dǎo)航、搜索框、標(biāo)識(shí)（LOGO）、主菜單等；內(nèi)容區(qū)包括大圖展示、文章展示、新聞資訊、業(yè)內(nèi)活動(dòng)、編輯部風(fēng)采等；功能區(qū)包括用戶登錄、文章查詢、期刊簡(jiǎn)介、通知公告、友情鏈接等；頁(yè)腳導(dǎo)航區(qū)則為簡(jiǎn)單的文字和圖片組合。首頁(yè)3種響應(yīng)規(guī)格的完整線框低保真原型如圖5所示。

2.1.1 導(dǎo)航形式

網(wǎng)站常用的導(dǎo)航是置頂列表形式，易于實(shí)現(xiàn)，但在移動(dòng)端存在擴(kuò)展性差、誤操作幾率易增加、跨設(shè)備有像素差等問(wèn)題。期刊網(wǎng)站的功能層級(jí)較多，基于期刊網(wǎng)站移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)秉持的“內(nèi)容優(yōu)先，導(dǎo)航其次”原則，為了用戶能夠以最快速度獲取內(nèi)容，就要求移除導(dǎo)航以確保用戶關(guān)注的焦點(diǎn)始終保持在核心信息上。因此本文的全局導(dǎo)航設(shè)計(jì)中， PC端和Pad端采用右側(cè)導(dǎo)航橫向展示設(shè)計(jì)，屏幕分辨率較小的手機(jī)端選用下拉菜單與導(dǎo)航隱藏結(jié)合的形式，如圖5所示。手機(jī)端默認(rèn)導(dǎo)航菜單隱藏，將菜單設(shè)定為一個(gè)具有下拉功能的圖標(biāo)，點(diǎn)擊圖標(biāo)菜單按鈕展開(kāi)第一層級(jí)內(nèi)容，選中某一內(nèi)容后菜單自動(dòng)消失隱藏；若為多層級(jí)菜單則展開(kāi)下一級(jí)內(nèi)容，依此類推，不會(huì)影響其他內(nèi)容頁(yè)面，為用戶提供非常清晰明了的內(nèi)容導(dǎo)航。簡(jiǎn)約的移動(dòng)端導(dǎo)航布局有效利用了屏幕空間，完美適合平臺(tái)轉(zhuǎn)換，是一種突出高優(yōu)先級(jí)內(nèi)容的處理方式。為了便于用戶隨時(shí)切換菜單，將導(dǎo)航條設(shè)置成固定模式——不隨頁(yè)面滾動(dòng)而移動(dòng)。圖5（c）中期刊Logo與導(dǎo)航并列，為了便于大部分習(xí)慣右手點(diǎn)擊操作屏幕的用戶，避免手握設(shè)備的左手不小心觸碰到界面，將菜單圖標(biāo)置于右側(cè)，展開(kāi)的交互形式菜單欄出現(xiàn)在網(wǎng)站頂部，方便用戶直觀地查看導(dǎo)航菜單并決定下一步去向。底部導(dǎo)航的變化形式采用“換行—平鋪”方式，即導(dǎo)航橫向排列不變，導(dǎo)航菜單由一行變?yōu)閮尚谢蚨嘈校?yè)面簡(jiǎn)潔清晰且用戶體驗(yàn)一致。

2.1.2 內(nèi)容區(qū)設(shè)計(jì)

內(nèi)容區(qū)框架設(shè)計(jì)形式如圖5所示。大圖采用“輪播圖+通屏”的形式展示頭條新聞或消息，PC和移動(dòng)終端分別根據(jù)屏幕的分辨率調(diào)整圖片大小通屏顯示；新聞資訊、業(yè)內(nèi)活動(dòng)和編輯部風(fēng)采采用圖文結(jié)合的形式，PC端和Pad客戶端三欄并排展示，其中Pad端圖片和文字根據(jù)屏幕大小等比例縮小，而手機(jī)客戶端單欄豎排顯示；文章展示區(qū)分為當(dāng)期文章、過(guò)刊文章和最新錄用，其在3個(gè)平臺(tái)均采用tab標(biāo)簽切換排布，其中手機(jī)端內(nèi)容根據(jù)每項(xiàng)文章信息的字?jǐn)?shù)自動(dòng)換行、調(diào)整字體大小以適應(yīng)手機(jī)小屏幕的特性。RWD使用相對(duì)大小字體（em），常用換算公式為 em = px/16 [15]，如“當(dāng)前目錄”內(nèi)容區(qū)的某一篇文章信息包括文章名、作者、閱讀方式（摘要和PDF文檔），在大尺寸的PC界面將信息排布成兩行（文章名單獨(dú)一行、作者和閱讀方式并列一行），字體設(shè)置為網(wǎng)頁(yè)常用范圍內(nèi)的12px；在較小尺寸的手機(jī)端將文章名、作者和閱讀方式各成一行，字體大小設(shè)置為18px?？梢?jiàn)移動(dòng)端的內(nèi)容行數(shù)較多、字體略大，閱讀內(nèi)容時(shí)滾屏幾率更大，因此在頁(yè)面布局時(shí)應(yīng)適當(dāng)調(diào)整圖標(biāo)和文字大小、間距，不能過(guò)度使用滾動(dòng)功能，盡量確保內(nèi)容一致性。若確實(shí)需要滾屏，可在設(shè)備屏幕右下角設(shè)計(jì)“返回頂部”的固定懸浮功能圖標(biāo)按鈕，同時(shí)將常用的“返回首頁(yè)”“RSS訂閱”“二維碼掃描”功能與“返回頂部”結(jié)合設(shè)計(jì)，其中“返回首頁(yè)”在非首頁(yè)頁(yè)面顯示，如圖6所示，此類圖標(biāo)按鈕只在大于一屏的時(shí)候出現(xiàn)，否則隱藏，點(diǎn)擊此按鈕回到頂部，操作快捷、自由。

2.1.3 功能區(qū)設(shè)計(jì)形式

PC端的功能區(qū)位于大圖下方的右側(cè)位置，從上到下依次為用戶登錄、文章查詢（含快速查詢和高級(jí)查詢）、期刊簡(jiǎn)介、通知公告、友情鏈接，期刊可根據(jù)網(wǎng)站定位進(jìn)行內(nèi)容選擇。傳統(tǒng)期刊網(wǎng)站采用的菜單列表式登錄方式占用空間較大，需打開(kāi)新窗口輸入登錄賬號(hào)，本文在3個(gè)平臺(tái)上均采用Tab標(biāo)簽形式在當(dāng)前頁(yè)面快速切換用戶登錄類型，節(jié)省頁(yè)面空間。由于作者是期刊的主要用戶群，因此將“作者登錄”標(biāo)簽設(shè)為當(dāng)前默認(rèn)激活狀態(tài)（用顏色和字體加以區(qū)分）；PC和Pad端除第一個(gè)“友情鏈接”以圖片展示外，其余鏈接分兩欄以文字形式呈現(xiàn)，Iphone端為了突出信息均換行、平鋪，單欄顯示。

2.2 視覺(jué)設(shè)計(jì)

傳統(tǒng)期刊網(wǎng)站的整體視覺(jué)風(fēng)格大多偏向立體，采用擬物化圖標(biāo)設(shè)計(jì)，內(nèi)容表達(dá)以文字表述為主、缺少圖片搭配，多數(shù)依托第三方平臺(tái)建立的網(wǎng)站僅基于相同模板進(jìn)行色彩替換或局部?jī)?yōu)化，無(wú)法突出期刊自身文化特色。本文改變傳統(tǒng)設(shè)計(jì)思路，依據(jù)期刊類型、文化和經(jīng)營(yíng)環(huán)境等，結(jié)合扁平化流行設(shè)計(jì)趨勢(shì)打造出風(fēng)格恰當(dāng)?shù)挠脩艚缑妫║I）元素。扁平化設(shè)計(jì)風(fēng)格遵循簡(jiǎn)約、高端的原則，在網(wǎng)站布局上采取圖文并茂的排版方式，讓用戶瀏覽不會(huì)產(chǎn)生視覺(jué)疲勞，輕松愉悅地吸收網(wǎng)站帶來(lái)的視覺(jué)體驗(yàn)和內(nèi)容。為了保持視覺(jué)體驗(yàn)一致性，不同終端采用統(tǒng)一設(shè)計(jì)風(fēng)格：針對(duì)期刊品牌形象，不同頁(yè)面之間以及色彩、視覺(jué)元素、字體和尺寸的一致性等，讓視覺(jué)形象成為聯(lián)系用戶與期刊品牌的紐帶。細(xì)節(jié)上考慮設(shè)備類型、尺寸和操作習(xí)慣等因素，在各控件選擇和表達(dá)上有所區(qū)分。由于最終產(chǎn)出的頁(yè)面與視覺(jué)稿有所出入，因此設(shè)計(jì)過(guò)程需對(duì)某些布局結(jié)構(gòu)和細(xì)節(jié)樣式等進(jìn)行改造，以盡早發(fā)現(xiàn)并解決各類潛在問(wèn)題?！段靼补I(yè)大學(xué)學(xué)報(bào)》RWD網(wǎng)站首頁(yè)的視覺(jué)方案如圖7所示。

3 結(jié)論及展望

RWD顛覆了傳統(tǒng)網(wǎng)站的設(shè)計(jì)理念，開(kāi)發(fā)成本低、拓展性高、交互性強(qiáng)、用戶體驗(yàn)效果出色。該技術(shù)已較成熟，其價(jià)值性及使用領(lǐng)域的擴(kuò)展表明它是目前乃至未來(lái)的網(wǎng)站設(shè)計(jì)趨勢(shì)之一，因此也將成為期刊構(gòu)建新型門(mén)戶網(wǎng)站的關(guān)鍵技術(shù)，以實(shí)現(xiàn)期刊網(wǎng)站服務(wù)模式的創(chuàng)新與提升。

本文只選擇3種典型平臺(tái)的標(biāo)準(zhǔn)規(guī)格進(jìn)行設(shè)計(jì)，不能呈現(xiàn)所有類型設(shè)備的線框原型界面及視覺(jué)設(shè)計(jì)方案。由于移動(dòng)設(shè)備的屏幕像素密度與傳統(tǒng)PC有所不同，對(duì)視覺(jué)設(shè)計(jì)師有較高的要求，如需考慮內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積以及在不同設(shè)備下的行為等。測(cè)試人員則需在不同的設(shè)備下對(duì)RWD進(jìn)行兼容性測(cè)試。整個(gè)制作過(guò)程需UI設(shè)計(jì)師、前端工程師和開(kāi)發(fā)團(tuán)隊(duì)之間的友好協(xié)作。

移動(dòng)設(shè)備層出不窮導(dǎo)致使用環(huán)境愈加復(fù)雜，RWD如何識(shí)別設(shè)備并讓其在不同環(huán)境下均能具備良好的用戶體驗(yàn)成為研究的難題。學(xué)者們應(yīng)探究桌面用戶的使用習(xí)慣，兼顧不同尺寸的手持設(shè)備，實(shí)現(xiàn)“求同存異”，促使RWD融入更新的設(shè)計(jì)元素。響應(yīng)式體現(xiàn)一種高度適應(yīng)性的設(shè)計(jì)思維模式，在RWD探究的道路上，響應(yīng)式本身不是唯一目的，基于任意設(shè)備對(duì)頁(yè)面內(nèi)容進(jìn)行完美規(guī)劃的設(shè)計(jì)策略及工作流程應(yīng)該是研究者面臨的更大課題。

注 釋

[1]百度百科.互聯(lián)網(wǎng)+[EB/OL].[2015-04-18]. http）//baike.baidu.com/link？url=j1Lf69JgycVUUe8QgSqdLk1OEIFLEN2XGI_cKWn-Tas7tEZpJeByNTNJ9DALMfqv7qYvsYu5qVnE4fJgc9uM_a

[2]李若溪，游中勝，田海江，等.我國(guó)學(xué)術(shù)期刊的網(wǎng)站建設(shè)現(xiàn)狀調(diào)查與網(wǎng)絡(luò)期刊進(jìn)化趨勢(shì)分析[J].中國(guó)科技期刊研究，2013，24（ 6）1049-1056

[3]王景周，黃建軍.廣東省科技核心期刊網(wǎng)站互動(dòng)性調(diào)查研究.中國(guó)科技期刊研究，2012，23（3） ： 342-347

[4]劉英，曾麗.淺談期刊網(wǎng)站管理及評(píng)價(jià)系統(tǒng)[J].中國(guó)科技期刊研究，2009，20（6）： 1148-1149

[5]于孟晨，張立新，潘秋岑. 科技期刊網(wǎng)站的內(nèi)容設(shè)置與定位思考[J]. 理論導(dǎo)刊，2014 （12）：95-97

[6]易觀智庫(kù).中國(guó)第三方手機(jī)瀏覽器用戶調(diào)研報(bào)告2014 [EB/OL].[2015-09-18].http）//wenku.baidu.com/link？url=JnfVM79xjpBbn2Zckb7djCqfJFnXXY869msIJGJ09HmcaAipvbyBIHL6l7MULtwz3i1OPtpwMuMq2I5Jue6R0ZghKmvuSHXBy-jUuskEeXu

[7]百度百科.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)[EB/OL].[2015-04-18]. http）//baike.baidu.com/link？url=adcS8Ql_deBF_7Y7nhoi7DXKmt

649xUGW_DaaqGvyCj-yM9d8WoNkNXtMkQhX_ja0F9nMtLZB4hq89o83rQyYq

[8]林瀛瀛.響應(yīng)式設(shè)計(jì)技術(shù)在視頻網(wǎng)站開(kāi)發(fā)中的應(yīng)用[D]. 上海：東華大學(xué)，2014

[9]嚴(yán)卉，張慎，謝雪婷.基于響應(yīng)式技術(shù)的電子商務(wù)網(wǎng)頁(yè)重制作[J]. 科技創(chuàng)新與應(yīng)用，2015（7）：50-50

[10]劉歡，盧蓓蓉.使用響應(yīng)式設(shè)計(jì)構(gòu)建高校新型門(mén)戶網(wǎng)站[J]. 中國(guó)教育信息化，2013，（9）：71-74

[11]張幸芝，徐東東，賈菲.基于響應(yīng)式PC設(shè)計(jì)的教務(wù)系統(tǒng)移動(dòng)平臺(tái)研究與建設(shè)[J]. 軟件，2013，（6）：5-7

[12]張樹(shù)明.基于響應(yīng)式PC設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(jī)與現(xiàn)代化，2013，1（6）：125-127

[13]涂海麗，唐曉波.微信功能需求的KANO模型分析[J].情報(bào)雜志，2015，34（5）：174-179

[14]淘寶網(wǎng)UED官方博客. 復(fù)雜產(chǎn)品的響應(yīng)式設(shè)計(jì)[流程篇][EB/OL].[2015-09-18]. http：//ued.taobao.org/blog/20期刊數(shù)字化與數(shù)字期刊——科技期刊數(shù)字出版發(fā)展趨勢(shì)展望13/05/%e5%a4%8d%e6%9d%82%e4%ba%a7%e5%93%81%e7%9a%84%e5%93%8d%e5%ba%94%e5%bc%8f%e8%ae%be%e8%ae%a1%e3%80%90%e6%b5%81%e7%a8%8b%e7%af%87%e3%80%91/

[15]一路前行博客.常用px，pt，em換算表[EB/OL].[2015-09-18]. http：//www.cnblogs.com/zhangpengshou/archive/

2012/08/04/2623061.html