論響應(yīng)式設(shè)計在智能終端界面中的應(yīng)用

孔莉莉

摘 要：隨著IT技術(shù)的發(fā)展，智能終端作為信息傳達的主流媒介，已經(jīng)涉及現(xiàn)代人生活的方方面面。當(dāng)前智能終端設(shè)備名目繁多，從個人臺式計算機到智能手機再到平板電腦，都有著各自的界面格局，即使同一種類的終端也因型號、系統(tǒng)的林林總總，各不相同。在智能終端界面設(shè)計中，以往是由不同開發(fā)團隊，針對不同終端的特性，作有針對性的設(shè)計。然而，隨著技術(shù)的發(fā)展和IT商業(yè)領(lǐng)域的競爭日趨激烈，硬件的更新?lián)Q代速度也在不斷地提高，這種傳統(tǒng)的一對一的設(shè)計研發(fā)模式，已經(jīng)明顯跟不上產(chǎn)品與服務(wù)更新?lián)Q代的速度要求。智能終端界面設(shè)計領(lǐng)域需要一種新型的更智能，更彈性的生成模式。本文從闡述響應(yīng)式智能終端界面設(shè)計的概念及其生成模式入手，通過對國內(nèi)外優(yōu)秀界面設(shè)計作品的分析，梳理了響應(yīng)式智能終端界面設(shè)計構(gòu)建方式和營造手段。歸納了響應(yīng)式智能終端界面設(shè)計的優(yōu)勢并提出可能存在的問題，進而對未來發(fā)展的方向作了展望。旨在拋磚引玉，以期引起更多中國界面設(shè)計師們對響應(yīng)式設(shè)計理念及設(shè)計手段的探索與思考。

關(guān)鍵詞：響應(yīng)式;智能終端;界面設(shè)計

1 響應(yīng)式設(shè)計和界面的概念

1.1 界面的概念

在信息技術(shù)領(lǐng)域，界面是兩個或多個不同物象之間的分界，是兩種或多種信息源的交匯之處，是人與智能終端互動的媒介，是信息傳輸、接收、共享的虛擬平臺。美國哲學(xué)家邁克爾·海姆在其著作《從界面到網(wǎng)絡(luò)空間——虛擬實在的形而上學(xué)》中提出了命題：“在虛擬現(xiàn)實中，我們能將自己沉浸于感官模擬，不僅對現(xiàn)實世界，也對假想世界。當(dāng)我們開始在真實世界與虛擬世界之間轉(zhuǎn)換時，我們對實在的感覺如何改變？”在信息時代，界面將受眾與智能終端相聯(lián)系，每款界面都構(gòu)成了一個通往網(wǎng)絡(luò)世界的門戶。網(wǎng)絡(luò)世界是一種由計算機生成的維度，從某種意義上表示一種人造或再現(xiàn)的世界，一個由計算機系統(tǒng)所產(chǎn)生的信息和用戶反饋到系統(tǒng)中的信息所構(gòu)成的虛擬世界。

1.2 什么是響應(yīng)式界面設(shè)計

響應(yīng)式設(shè)計的概念較早出現(xiàn)在建筑設(shè)計領(lǐng)域，在《互動建筑》一書寫道：“在交互建筑中，建筑師邁克爾·福克斯與麥爾·坎普把我們帶入一個激進的新領(lǐng)域，這個領(lǐng)域的設(shè)計先鋒們正在忙于創(chuàng)造那些不僅能促進人們之間互動的，并且其自身能參與互動的環(huán)境。這些空間可以重新配置，它們自身在響應(yīng)人類的因素，并靈活地改變空間，解決不斷發(fā)展的個人、社會、和環(huán)境的需要。換言之，現(xiàn)在是停止問什么架構(gòu)，而開始問它能做什么的時候了?！崩缫环N可以根據(jù)周圍人群的情況進行彎曲、伸縮和擴展的墻體結(jié)構(gòu);也可使用運動傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。

2 在智能終端界面中實現(xiàn)響應(yīng)式設(shè)計的主要手段

2.1 可變視窗（Viewport Meta）

目前智能終端屏幕分辨率變化范圍極大，小至320像素，大到2560像素，甚至更高。用戶除了使用傳統(tǒng)的臺式計算機，越來越多地通過智能手機、上網(wǎng)本、平板設(shè)備來瀏覽界面。這種情況下，固定寬度的設(shè)計方案將會顯得愈發(fā)不合理，因此，界面需要有更好的適應(yīng)性。

使用智能手機瀏覽個人電腦端界面時，一般會自動縮放到合適的寬度使屏幕能夠顯示整個界面，但是這樣會使文字變得很小，瀏覽內(nèi)容不方便?？梢酝ㄟ^設(shè)置Meta標(biāo)簽的Viewport屬性來設(shè)定加載界面時以原始的顯示比例呈現(xiàn)界面。響應(yīng)式智能終端界面設(shè)計的尺寸概念并非基于設(shè)備的真實分辨率（dpi），而是直接通過設(shè)定界面的分辨率來實現(xiàn)可視區(qū)域的尺寸，在物理面積和瀏覽器之間重設(shè)匹配的分辨率，和設(shè)備自身的分辨率無直接關(guān)系。不同物理尺寸與分辨率的智能終端屏幕，通過響應(yīng)式設(shè)計的自適應(yīng)功能可實現(xiàn)可視區(qū)域（Viewport）的自動縮放，使這些終端設(shè)備以相同的分辨率顯示加載于同一款瀏覽器的界面。

2.2 媒體查詢（Media Query）

媒體類型（Media Type）是CSS（Cascading Style Sheet，層疊樣式表單）中一個信息項。媒體查詢功能作為CSS的重要內(nèi)容之一，是對Media Type的增強探測功能。隨著移動互聯(lián)網(wǎng)的發(fā)展和響應(yīng)式設(shè)計的推廣，媒體查詢的作用開始得到界面設(shè)計師的重視。通過媒體查詢功能對媒體類型信息的提取，對應(yīng)不同終端的界面特點和設(shè)計要求，可為不同終端設(shè)備制定特定的樣式和設(shè)置合時的參數(shù)提供依據(jù)，以實現(xiàn)更豐富而適用的界面，在不同的分辨率下都能給用戶帶來良好的用戶體驗。通過CSS3中的media query功能可做到對設(shè)備像素比的判斷，使響應(yīng)式界面根據(jù)瀏覽器的高寬與設(shè)備的像素比等信息選用不同的CSS。

2.3 流體網(wǎng)格（Fluid Grid）

傳統(tǒng)網(wǎng)格式布局的界面設(shè)計通常以固定寬度版式為基礎(chǔ)，當(dāng)終端顯示區(qū)域?qū)挾刃∮诮缑鎸嶋H寬度時，則以滾動條的方式提供顯示界外內(nèi)容的操作。流體網(wǎng)格布局時，顯示寬度變窄時，后面的元素會向下方移動。流體網(wǎng)格的寬度使用百分比方式以便于參數(shù)設(shè)定，從而準(zhǔn)確實現(xiàn)寬度自適應(yīng)。目前可通過The Grid、Gridpak等所見即所得的工具用于快速、直觀、靈活地開發(fā)響應(yīng)式界面的流體網(wǎng)格結(jié)構(gòu)布局。也可使用Fluid Grids的流體網(wǎng)格計算器等參數(shù)化的工具建立、控制流體網(wǎng)格系統(tǒng)。

2.4 彈性圖片（Flexible Images）

固定圖片與文本框不同，對于不同分辨率或尺寸的各種終端設(shè)備而言，固定尺寸與分辨率的圖片顯然無法適應(yīng)如此眾多智能終端界面各不相同的需求，更無法適應(yīng)用戶在各種終端下自定義的瀏覽器顯示比例，因此出現(xiàn)溢出或不飽滿的顯示結(jié)果也在意料之中。而相應(yīng)式設(shè)計中的彈性圖片功能，可通過重新定義圖片尺寸，以適應(yīng)不同界面顯示大小與比例的同時也適合所在的文本框。也可按照不同終端瀏覽器的高寬與設(shè)備的像素比可控制圖片文件的大小及優(yōu)先顯示區(qū)域，達到在各種智能終端界面的最佳圖片顯示方案。

3 響應(yīng)式界面設(shè)計在智能終端界面中運用的優(yōu)勢和局限性

3.1 響應(yīng)式設(shè)計在界面中運用的優(yōu)勢

（1）多款終端兼容優(yōu)勢。在當(dāng)今科技迅速發(fā)展的電子時代，各種顯示規(guī)格的界面移動終端設(shè)備不斷涌現(xiàn)，界面能否在不同的終端設(shè)備中流暢地被瀏覽，已成為當(dāng)代智能終端界面設(shè)計中的重要研究課題之一。通常過去單一的智能終端界面結(jié)構(gòu)兼容性較差，只適用于特定終端規(guī)格的設(shè)備而不能兼容多個不同規(guī)格的終端設(shè)備。響應(yīng)式界面設(shè)計的理念正迎合了當(dāng)代智能終端界面設(shè)計的新要求。響應(yīng)式界面的優(yōu)勢就在于能適用于主流的大多數(shù)移動設(shè)備終端。根據(jù)不同的移動設(shè)備做出自適應(yīng)的兼容，能保證用戶在不同的界面終端設(shè)備中流暢的瀏覽界面。其廣泛的兼容性為用戶提供了多元的選擇，同時也留住了更多的用戶。因此，響應(yīng)式設(shè)計對于大多數(shù)主流移動設(shè)備終端而言其優(yōu)勢是不言而喻的。

著名美食界面Food Sense，采用了新型的響應(yīng)式設(shè)計。下圖演示了同一款智能終端界面設(shè)計如何響應(yīng)不同終端設(shè)備。在不同終端設(shè)備界面顯示時會適時改變導(dǎo)航菜單圖標(biāo)的大小與內(nèi)容。隨著不同終端設(shè)備界面面積的縮小，其界面顯示面積與信息量也不斷變小，從詳細的雙列布局側(cè)邊欄變?yōu)榱藛瘟胁季肿詈笊踔料?，各種顯示方式都達到了良好的構(gòu)圖效果。

（2）用戶操作體驗優(yōu)勢。隨著上網(wǎng)方式的多樣化，更多用戶選擇上網(wǎng)的工具不再僅是傳統(tǒng)的個人臺式電腦，而是更輕便的智能手機或者平板電腦。隨之而來的問題是如何讓界面適應(yīng)不同分辨率，這給前端工程師們帶來了新的挑戰(zhàn)，其中重要的一點是如何讓智能終端界面能在不同的分辨率下都能給用戶帶來良好的用戶體驗。響應(yīng)式界面的兼容性也帶來了較強的可操作性。

同樣以Food Sense界面作為案例，在設(shè)計該界面的響應(yīng)式線框模型的時候，要考慮到不同的終端設(shè)備的界面尺寸，做到符合大多數(shù)終端設(shè)備的界面分辨率。保證界面瀏覽用戶親和流暢的瀏覽體驗。可以簡單地通過單擊界面改變界面的大小。

（3）易于后期維護優(yōu)勢。具體的響應(yīng)式智能終端界面只有一款，但可針對不同的終端設(shè)備環(huán)境進行不同界面布局的系列設(shè)計，因此在開發(fā)、運營和維護上，相對開發(fā)多個版本的智能終端界面，能精簡時間和人力成本的投入。

響應(yīng)式設(shè)計是針對智能終端界面的布局設(shè)計，可以只對必要的界面或局部進行改動，其他界面部分不受影響。響應(yīng)式界面能對于不同的智能終端設(shè)備進行自適應(yīng)的調(diào)節(jié)，可省去為不同的網(wǎng)絡(luò)終端設(shè)備開發(fā)不同界面的人工投入。由于響應(yīng)式界面只有一個線框模型布局，且可工作在所有被定義類型的設(shè)備上，可大幅減少界面設(shè)計師的工作量，響應(yīng)式界面開發(fā)成功后，維護的成本也相對較小。反之，若某一非響應(yīng)式界面需要后期的維護，網(wǎng)絡(luò)設(shè)計師要根據(jù)所有可能的不同智能設(shè)備進行修復(fù)，勢必會花費更多的時間和精力。

3.2 響應(yīng)式設(shè)計在智能終端界面中運用的難點

（1）開發(fā)難度相對較高。響應(yīng)式設(shè)計并非完美無缺，響應(yīng)式界面相比傳統(tǒng)的界面而言，雖然后續(xù)的維護成本會比較低，但這并不代表響應(yīng)式界面設(shè)計的前期開發(fā)容易實現(xiàn)。界面設(shè)計師在設(shè)計智能終端界面時要考慮其可適應(yīng)不同移動終端設(shè)備環(huán)境、不同分辨率下的兼容性，最重要的是能保證設(shè)計的智能終端界面都能較為流暢的在終端設(shè)備中穩(wěn)定呈現(xiàn)，才能確保良好的用戶體驗。這要求界面設(shè)計師具備專業(yè)的界面設(shè)計知識和良好的團隊合作能力。所以，響應(yīng)式的智能終端界面在整體開發(fā)難度上相對較高。

（2）前期開發(fā)周期相對較長。開發(fā)響應(yīng)式界面首先要做好用戶調(diào)研與相關(guān)智能終端設(shè)備環(huán)境評估。通過用戶調(diào)研，發(fā)開設(shè)計團隊可了解到用戶群所使用設(shè)備類型的種類，評估出幾種較為典型的智能終端設(shè)備規(guī)格，用以規(guī)劃設(shè)計不同的界面呈現(xiàn)方式。為以最合理的樣式規(guī)格和布局方式呈現(xiàn)邏輯分層及功能復(fù)雜的界面設(shè)計工程，需針對不同的設(shè)備類型進行功能和內(nèi)容的規(guī)劃，便于在開發(fā)設(shè)計階段定義不同的CSS響應(yīng)規(guī)則。

響應(yīng)式界面設(shè)計師還需投入大量時間精力做測試和質(zhì)量認證，以確保響應(yīng)式界面在不同的網(wǎng)絡(luò)終端設(shè)備中都能被流暢地顯示。綜上所敘述，響應(yīng)式界面相對于傳統(tǒng)界面的前期開發(fā)周期較長。

4 關(guān)于響應(yīng)式設(shè)計在智能終端界面中應(yīng)用的結(jié)論

響應(yīng)式設(shè)計不僅是一種開放式的設(shè)計手段，更是一種人性化的設(shè)計理念。智能終端界面作為主流新媒體中信息傳達最普及的媒介，已經(jīng)涉及現(xiàn)代人生活的方方面面。響應(yīng)式設(shè)計是信息技術(shù)時代的新興產(chǎn)物，以智能、更彈性的智能終端界面生成模式，給用戶帶來更便捷與流暢的交互體驗。雖然開發(fā)時間長于獨立終端界面的開發(fā)，但是它良好的兼容性幾乎可以兼容大部分的主流移動終端，這些優(yōu)勢使響應(yīng)式設(shè)計在智能終端界面中的作用不容小覷，無疑是信息時代界面設(shè)計師研究的重要領(lǐng)域。

參考文獻：

[1] 王永強.響應(yīng)式Web設(shè)計：HTML5和CSS3實戰(zhàn)[M].人民郵電出版社，2013.

[2] Tim Kadlec .響應(yīng)式Web設(shè)計實踐[M].侯鴻儒，譯.人民郵電出版社，2013.

[3] 顧群業(yè).界面藝術(shù)設(shè)計[M].山東美術(shù)出版社，2002.