基于響應式的移動端網(wǎng)頁界面設計與實現(xiàn)策略

劉春芝

（廣州市交通高級技工學校，廣東 廣州 510000）

1.引言

網(wǎng)頁界面設計是當今網(wǎng)絡信息時代中的一項關(guān)鍵技術(shù)。尤其是在響應式技術(shù)應用以來，以此為基礎的移動端網(wǎng)頁界面設計及其實現(xiàn)更是受到了人們的廣泛關(guān)注。本文主要對以響應式技術(shù)為基礎的移動端網(wǎng)頁界面設計及其實現(xiàn)進行了全面分析，主要包括網(wǎng)頁界面的原型設計、基本HTML頁面的構(gòu)建以及通過CSS進行的響應式布局構(gòu)建。

2.界面原型設計

2.1 設計構(gòu)思與草圖創(chuàng)建

在對網(wǎng)頁界面進行設計的初期，主要的內(nèi)容是構(gòu)思和探索。通過草圖創(chuàng)建的形式，可以將抽象的設計理念轉(zhuǎn)為具體的圖像形式，這樣不僅可以幫助設計者理清自己的設計思路，又可以使其進一步明確哪些想法可行、哪些想法不可行，并通過情景法來驗證各種構(gòu)思是否正確。所以在通過響應式技術(shù)進行網(wǎng)頁設計的開始階段，設計者不僅要反復構(gòu)思，更要將自己的構(gòu)思以草圖的形式呈現(xiàn)出來。

而草圖的良好呈現(xiàn)基礎就是構(gòu)思，在此過程中，設計者可以獨立進行構(gòu)思，也可以與設計團隊一起進行構(gòu)思，并積極分享各自的想法，做到取長補短。網(wǎng)頁界面設計中，構(gòu)思的方法有很多，比如畫出心智圖、應用草圖板、頭腦書寫、頭腦風暴等。具體構(gòu)思中可根據(jù)自己的喜好、習慣等來合理選擇。

2.2 通過線框圖呈現(xiàn)自己的想法

在對網(wǎng)頁界面設計進行構(gòu)思的過程中，設計者可以借助于線框圖的方式將自己的想法呈現(xiàn)出來，并對其做進一步的驗證。在這個線框圖內(nèi)，主要呈現(xiàn)的內(nèi)容可以包括網(wǎng)頁的LOGO、內(nèi)容以及導航系統(tǒng)等。線框圖不僅僅是將網(wǎng)站以視覺形式單純地模擬和呈現(xiàn)出來，同時也可以進一步呈現(xiàn)出網(wǎng)頁內(nèi)各個基本結(jié)構(gòu)以及各個頁面之間所具有的相互關(guān)聯(lián)特征。比如，用戶可以通過這個界面看到什么，可以用這個界面做什么，每一個按鈕對應的頁面是什么，等等，同時也可以讓用戶明確怎樣的操作會呈現(xiàn)出怎樣的效果，使其明確通過怎樣的操作來達成自己的目標。在以響應式技術(shù)為基礎的移動端網(wǎng)頁界面設計中，可通過很多的線框圖對各個尺寸設備的具體布局形式及其交互行為進行展示。相比較草圖而言，線框圖所呈現(xiàn)的是網(wǎng)站具體的工作方式，這種呈現(xiàn)更加直觀，可以為設計者以及用戶之間的良好交流提供足夠便利。

2.3 原型制作

線框圖僅僅是一種靜態(tài)形式的設計稿，用戶并不能在這一階段中對網(wǎng)頁具體的工作方式以及各個細節(jié)做到全面了解，基于此，在線框圖完成之后，便可對網(wǎng)頁的界面原型進行制作，以此來對其交互效果做出全面模擬，幫助用戶體驗網(wǎng)頁界面的具體工作過程。比如在點擊某一鏈接之后，網(wǎng)頁會跳轉(zhuǎn)到相應的界面，在點擊某一導航按鈕之后，導航會通過怎樣的方式出現(xiàn)等。相比較實際的網(wǎng)頁界面而言，通過原型設計的形式，可以幫助設計人員對后續(xù)的網(wǎng)頁界面設計進行評估和進一步的修改完善。而相比較局部內(nèi)容展示形式的線框圖而言，原型設計可以幫助用戶對網(wǎng)格性特性及其交互做到更加清楚的認知，并幫助設計人員對各個環(huán)節(jié)做到良好把握。在進行網(wǎng)頁原型的制作過程中，傳統(tǒng)的方法是通過紙張來制作，這種方法雖然價格低廉且速度比較快，但是在網(wǎng)頁還原度方面有所不足，因此，在當今的原型制作中，各種原型工具開始得到了廣泛應用，比如Omni Graffle、Balsamiq Mockup以及Axure等，通過這些數(shù)字化原型的制作，可以讓網(wǎng)頁獲得真實的還原使用效果，設計者可以將這些數(shù)字形式的網(wǎng)頁界面原型展示給用戶，使其明確具體的網(wǎng)頁界面結(jié)構(gòu)、交互以及視覺設計等多方面內(nèi)容。

3.基本HTML頁面的構(gòu)建分析

3.1 HTML結(jié)構(gòu)化語言概述

HTML是超文本標記形式語言的簡稱，這種結(jié)構(gòu)語言的主要功能是對網(wǎng)頁進行描述，其儲存形式為純文本，對文檔組織結(jié)構(gòu)的定義為標簽，該語言誕生于1993年，是以互聯(lián)網(wǎng)技術(shù)為基礎發(fā)展而來的一種結(jié)構(gòu)語言形式。目前，HTML5是最為廣泛應用的一種HTML語言形式，相比較傳統(tǒng)的Flash以及Javascripi而言，它引入了很多的新特征，比如圖形中canvas元素的創(chuàng)建、視頻播放中vidio元素的創(chuàng)建以及音頻播放中audio元素的創(chuàng)建等，同時也引入了很多新的語義化標簽，比如 section、nav、header、footer以及 article等。同時，HTML也具備著非常好的兼容性，可以在Windows、IOS、Android以及OSX等各種主流平臺中實現(xiàn)跨平臺操作。

3.2 以響應式技術(shù)為基礎的HTML文檔構(gòu)建

在響應式移動端網(wǎng)頁設計中，HTML文檔在結(jié)構(gòu)方面和PC端存在一定的差異性，此類文檔需要應用到Viewport（視口）標簽，將其設置在HTML中的head標簽內(nèi)：

具體設計時，可以將device-width 應用到width這一聲明中，這樣就可以讓屏幕上的視口布局和設備屏幕的實際尺寸保持一致，以此來實現(xiàn)網(wǎng)頁布局和屏幕尺寸的良好匹配。

4.通過CSS進行響應式布局的合理構(gòu)建

4.1 CSS網(wǎng)頁樣式文件概述

CSS是層疊樣式表的簡稱，這種計算機語言的主要功能是在HTML等結(jié)構(gòu)化文檔中進行樣式添加。通過CSS的應用，可以讓文檔樣式在文檔內(nèi)容中得以分離，比如字體、顏色和布局等，這樣的分離可以讓文檔內(nèi)容的可理解程度得到進一步提升，同時也讓網(wǎng)頁更加靈活。與HTML相同，CSS也經(jīng)歷了很多次的升級與改進，在當今，CSS3是最常用的一個版本，它有著良好的圖形渲染能力，可以為匹配元素的選擇提供足夠便利，同時也可以更加便捷地進行顏色以及透明度設置，并支持多背景和文字陰影等的設置。隨著CSS的發(fā)展，越來越多的新模塊開始被應用進來，比如文字特效、邊框、背景、高級動畫以及盒子模型等，通過該技術(shù)的應用，可以實現(xiàn)設計者工作效率的顯著提升，并進一步提升網(wǎng)頁界面設計的美觀性。

4.2 移動端網(wǎng)頁基礎樣式的設計

在以響應式技術(shù)為基礎來進行移動端網(wǎng)頁界面設計的過程中，需要先從最底層開始，逐漸朝著最上層進行設計，對于更大尺寸的移動設備，應該通過媒體查詢的方法來做好布局調(diào)整。為實現(xiàn)代碼重復率的進一步提升，實現(xiàn)網(wǎng)頁載入速度的加快，可以采用模塊化設計法來進行CSS頁面基礎樣式的構(gòu)建。借助于模塊化形式的CSS，可實現(xiàn)CSS文件大小的顯著縮減，進而讓網(wǎng)頁加載速度得以有效提升。如果根據(jù)職能對網(wǎng)頁中的CSS進行劃分，我們可以將其分為三類，其一是基礎層，其二是公共層，其三是頁面層。通常情況下，每一個頁面的頭部都會有著三種樣式的列表存在，且通過這三種樣式來共同表現(xiàn)出最終的網(wǎng)頁界面效果。以下是這三種CSS樣式的具體特征：

4.3 通過媒介對向上設計進行查詢

在以響應式技術(shù)為基礎的移動端網(wǎng)頁界面設計中，一個最基本的方法就是對CSS媒介查詢功能的應用，在進行媒介查詢的過程中，可以按照可用形式的設備信息來進行不同CSS樣式的應用，比如方向、分辨率以及屏幕寬度等的信息，這樣就可以讓網(wǎng)頁界面布局達到最佳效果。因為移動端的設備十分多樣化，且其尺寸也存在很大差異，所以具體設計中，不可以簡單地將移動端理解成手機端，而是將所有手機、平板以及其他形式的移動設備都考慮進來，在對最小尺寸設備進行了移動端網(wǎng)頁基本樣式設計之后，再將樣式和布局進行適當調(diào)整，使其適用于更大的屏幕尺寸。在此過程中，可通過以下代碼來進行媒介查詢規(guī)則的合理應用：

（1）@media all and (max-with:480px){...}：這一代碼在媒介查詢中屬于基本規(guī)則，它所表示的是水平寬度最大是480像素的所有屏幕都可以對以下CSS規(guī)則（省略號所在位置）加以應用。在這一規(guī)則中，媒介具體類型用@media all表示，代表這一CSS樣式適用于全部的媒介類型。帶有媒介查詢形式的表達式用(max-width:480px)表示，若瀏覽器寬度最大值是480像素，則瀏覽器就會對這個代碼加以應用；若瀏覽器寬度最大值更大，比如平板電腦等，就需要進行更加適當?shù)臉邮揭约安季衷O計。

（2）@media all and (max-with:768px){...}：在這樣的情況下，如果設備寬度在480-768像素之間，就會通過該代碼來實現(xiàn)樣式和布局的良好呈現(xiàn)。其他形式的寬度尺寸以此類推。

5.結(jié)語

綜上所述，在將響應式技術(shù)為基礎進行移動端網(wǎng)頁界面設計與實現(xiàn)的過程中，設計者可以通過合理的原型制作、HTML的應用以及CSS的應用來達到預期的設計效果，并以更加科學合理的布局形式將網(wǎng)頁界面呈現(xiàn)給用戶，以此來為用戶的移動端網(wǎng)頁訪問提供足夠便利。這對于網(wǎng)頁設計與制作技術(shù)的發(fā)展和用戶需求的滿足都有著十分深遠的意義。