劉春芝

（廣州市交通高級(jí)技工學(xué)校，廣東 廣州 510000）

1.引言

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

2.界面原型設(shè)計(jì)

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

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

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

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

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

2.3 原型制作

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

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

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

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

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

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

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

4.通過(guò)CSS進(jìn)行響應(yīng)式布局的合理構(gòu)建

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

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

4.2 移動(dòng)端網(wǎng)頁(yè)基礎(chǔ)樣式的設(shè)計(jì)

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

4.3 通過(guò)媒介對(duì)向上設(shè)計(jì)進(jìn)行查詢(xún)

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

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

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

5.結(jié)語(yǔ)

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