劉春芝
(廣州市交通高級(jí)技工學(xué)校,廣東 廣州 510000)
網(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)建。
在對(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)合理選擇。
在對(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ù)之間的良好交流提供足夠便利。
線(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)容。
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)操作。
在響應(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è)布局和屏幕尺寸的良好匹配。
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ì)的美觀性。
在以響應(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樣式的具體特征:
在以響應(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)推。
綜上所述,在將響應(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)的意義。