基于響應式的移動端網頁界面設計與實現策略

劉春芝

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

1.引言

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

2.界面原型設計

2.1 設計構思與草圖創建

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

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

2.2 通過線框圖呈現自己的想法

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

2.3 原型制作

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

3.基本HTML頁面的構建分析

3.1 HTML結構化語言概述

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

3.2 以響應式技術為基礎的HTML文檔構建

在響應式移動端網頁設計中，HTML文檔在結構方面和PC端存在一定的差異性，此類文檔需要應用到Viewport（視口）標簽，將其設置在HTML中的head標簽內：

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

4.通過CSS進行響應式布局的合理構建

4.1 CSS網頁樣式文件概述

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

4.2 移動端網頁基礎樣式的設計

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

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

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

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

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

5.結語

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