論響應式設計在智能終端界面中的應用

孔莉莉

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

關鍵詞：響應式;智能終端;界面設計

1 響應式設計和界面的概念

1.1 界面的概念

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

1.2 什么是響應式界面設計

響應式設計的概念較早出現在建筑設計領域，在《互動建筑》一書寫道：“在交互建筑中，建筑師邁克爾·福克斯與麥爾·坎普把我們帶入一個激進的新領域，這個領域的設計先鋒們正在忙于創造那些不僅能促進人們之間互動的，并且其自身能參與互動的環境。這些空間可以重新配置，它們自身在響應人類的因素，并靈活地改變空間，解決不斷發展的個人、社會、和環境的需要。換言之，現在是停止問什么架構，而開始問它能做什么的時候了。”例如一種可以根據周圍人群的情況進行彎曲、伸縮和擴展的墻體結構;也可使用運動傳感器配合氣候控制系統，調整室內的溫度及環境光。

2 在智能終端界面中實現響應式設計的主要手段

2.1 可變視窗（Viewport Meta）

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

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

2.2 媒體查詢（Media Query）

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

2.3 流體網格（Fluid Grid）

傳統網格式布局的界面設計通常以固定寬度版式為基礎，當終端顯示區域寬度小于界面實際寬度時，則以滾動條的方式提供顯示界外內容的操作。流體網格布局時，顯示寬度變窄時，后面的元素會向下方移動。流體網格的寬度使用百分比方式以便于參數設定，從而準確實現寬度自適應。目前可通過The Grid、Gridpak等所見即所得的工具用于快速、直觀、靈活地開發響應式界面的流體網格結構布局。也可使用Fluid Grids的流體網格計算器等參數化的工具建立、控制流體網格系統。

2.4 彈性圖片（Flexible Images）

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

3 響應式界面設計在智能終端界面中運用的優勢和局限性

3.1 響應式設計在界面中運用的優勢

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

著名美食界面Food Sense，采用了新型的響應式設計。下圖演示了同一款智能終端界面設計如何響應不同終端設備。在不同終端設備界面顯示時會適時改變導航菜單圖標的大小與內容。隨著不同終端設備界面面積的縮小，其界面顯示面積與信息量也不斷變小，從詳細的雙列布局側邊欄變為了單列布局最后甚至消失，各種顯示方式都達到了良好的構圖效果。

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

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

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

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

3.2 響應式設計在智能終端界面中運用的難點

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

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

響應式界面設計師還需投入大量時間精力做測試和質量認證，以確保響應式界面在不同的網絡終端設備中都能被流暢地顯示。綜上所敘述，響應式界面相對于傳統界面的前期開發周期較長。

4 關于響應式設計在智能終端界面中應用的結論

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

參考文獻：

[1] 王永強.響應式Web設計：HTML5和CSS3實戰[M].人民郵電出版社，2013.

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

[3] 顧群業.界面藝術設計[M].山東美術出版社，2002.