手機(jī)網(wǎng)頁(yè)版式設(shè)計(jì)研究

發(fā)布：2019-03-08 13:47:56 瀏覽：5320

隨著智能手機(jī)占據(jù)手機(jī)的主要市場(chǎng),人們使用手機(jī)上網(wǎng)已經(jīng)越來(lái)越普遍,但針對(duì)手機(jī)平臺(tái)設(shè)計(jì)的網(wǎng)頁(yè)卻只是互聯(lián)網(wǎng)網(wǎng)頁(yè)中極小的一部分。手機(jī)屏幕的尺寸不足一般計(jì)算機(jī)顯示器的1/20,用手機(jī)瀏覽普通網(wǎng)頁(yè)不但浪費(fèi)數(shù)據(jù)流量,而且視覺(jué)效果極差,使得手機(jī)上網(wǎng)成為一種令人不太愉悅的體驗(yàn)。據(jù)統(tǒng)計(jì),至2010年世界上有26%的人使用網(wǎng)絡(luò),68%的人擁有手機(jī),但卻只有不足4%的人使用手機(jī)上網(wǎng),除使用習(xí)慣的因素之外,手機(jī)平臺(tái)網(wǎng)頁(yè)缺乏科學(xué)規(guī)范的設(shè)計(jì)也是制約其發(fā)展的重要因素之一。

目前市場(chǎng)上手機(jī)品牌和種類(lèi)繁多,使用手機(jī)上網(wǎng)的效果也有很大差異。影響手機(jī)上網(wǎng)體驗(yàn)的因素主要有屏幕尺寸、分辨率、橫屏/豎屏、交互模式(按鍵/觸屏)、無(wú)線帶寬等,本文主要討論手機(jī)媒介網(wǎng)頁(yè)的版式設(shè)計(jì)問(wèn)題。

1目前手機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的問(wèn)題

1.1網(wǎng)頁(yè)與手機(jī)屏幕不匹配

目前市場(chǎng)上的手機(jī)型號(hào)達(dá)3000多種,手機(jī)屏幕類(lèi)型多樣,尺寸從1.5英寸到3.8英寸不等,分辨率更是從240×320到854×480像素不等,除此之外還有豎屏與橫屏等差異。手機(jī)網(wǎng)頁(yè)需要根據(jù)不同的手機(jī)屏幕尺寸與分辨率進(jìn)行設(shè)計(jì),即使不能針對(duì)每一種類(lèi)型,一般也應(yīng)針對(duì)三四種主流屏幕進(jìn)行設(shè)計(jì)。而一些沒(méi)有專(zhuān)門(mén)針對(duì)手機(jī)進(jìn)行設(shè)計(jì)的網(wǎng)頁(yè),完全依賴(lài)瀏覽器自動(dòng)轉(zhuǎn)換屏幕尺寸,往往會(huì)導(dǎo)致文字錯(cuò)行、頁(yè)面雜亂,甚至根本無(wú)法閱讀。

1.2網(wǎng)頁(yè)缺乏設(shè)計(jì)

手機(jī)網(wǎng)頁(yè)由于受屏幕尺寸的限制,設(shè)計(jì)風(fēng)格往往趨于簡(jiǎn)潔。然而簡(jiǎn)潔不等于簡(jiǎn)單甚至沒(méi)有設(shè)計(jì),有些網(wǎng)頁(yè)一味追求頁(yè)面元素簡(jiǎn)單,僅以文字鏈接進(jìn)行導(dǎo)航,而刪除了一切認(rèn)為不必要的圖片、圖標(biāo)、色彩,致使整個(gè)網(wǎng)頁(yè)成為了帶有鏈接的文字的堆砌;或者雖然使用了圖片與色彩等元素,但完全忽略了用戶(hù)的使用及心理需求,整個(gè)頁(yè)面缺乏設(shè)計(jì)感。

1.3色彩應(yīng)用缺乏規(guī)劃

對(duì)于手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)師來(lái)說(shuō),要在如此小的幅面中規(guī)劃好色彩是非常考驗(yàn)功力的。缺乏經(jīng)驗(yàn)的設(shè)計(jì)師要么把手機(jī)網(wǎng)頁(yè)的色彩設(shè)計(jì)得過(guò)于簡(jiǎn)單且缺乏變化,難以挑動(dòng)用戶(hù)的視覺(jué)神經(jīng);要么把繽紛的色彩堆砌在狹小的空間里,讓人目不暇接。

1.4字體應(yīng)用混亂

文字除了傳遞其字面意義的信息之外,還能表達(dá)字面內(nèi)容以外的信息。文字的字體、大小、字距與行距等,無(wú)時(shí)無(wú)刻不在向用戶(hù)傳遞著信息。例如,標(biāo)題文字通常會(huì)比正文字號(hào)更大、字體更粗,若把關(guān)系弄反了,就容易導(dǎo)致讀者的困惑。一幅頁(yè)面中的字體也不宜太多,過(guò)多的字體會(huì)使頁(yè)面雜亂無(wú)章。

1.5載入速度緩慢

手機(jī)的下載速度與計(jì)算機(jī)是不一樣的,同一幅頁(yè)面,通過(guò)計(jì)算機(jī)查看或許是沒(méi)有載入問(wèn)題的,但在手機(jī)上查看卻可能產(chǎn)生極大的干擾。頁(yè)面中過(guò)量的圖片、視頻、廣告會(huì)嚴(yán)重影響網(wǎng)頁(yè)的載入速度,最終導(dǎo)致用戶(hù)的流失。

1.6手機(jī)網(wǎng)頁(yè)與計(jì)算機(jī)網(wǎng)頁(yè)缺乏統(tǒng)一性

許多在計(jì)算機(jī)網(wǎng)頁(yè)中可以使用的設(shè)計(jì)元素,由于受手機(jī)設(shè)備的限制而被屏蔽在頁(yè)面之外。刪減圖片、視頻等大量?jī)?nèi)容,雖然使網(wǎng)頁(yè)在載入及視覺(jué)效果方面都運(yùn)行良好,但還會(huì)產(chǎn)生一個(gè)嚴(yán)重的問(wèn)題,即手機(jī)網(wǎng)頁(yè)與計(jì)算機(jī)網(wǎng)頁(yè)缺乏統(tǒng)一性,令人無(wú)法在二者之間建立聯(lián)想。

2手機(jī)網(wǎng)頁(yè)與計(jì)算機(jī)網(wǎng)頁(yè)的關(guān)系

2.1手機(jī)網(wǎng)頁(yè)是計(jì)算機(jī)網(wǎng)頁(yè)的延續(xù)

手機(jī)網(wǎng)頁(yè)雖然與計(jì)算機(jī)網(wǎng)頁(yè)的應(yīng)用平臺(tái)不同,但二者卻應(yīng)保持一定的延續(xù)性,手機(jī)網(wǎng)頁(yè)不能完全拋棄計(jì)算機(jī)網(wǎng)頁(yè)的元素另起爐灶。

首先,出于企業(yè)形象一體化設(shè)計(jì)(VI)的原則,計(jì)算機(jī)網(wǎng)頁(yè)中企業(yè)標(biāo)志、標(biāo)準(zhǔn)色彩、標(biāo)準(zhǔn)字體等元素在應(yīng)用上都有具體的規(guī)定,目的就是保持企業(yè)形象在各種情況下的視覺(jué)統(tǒng)一性,手機(jī)網(wǎng)頁(yè)在使用這些元素時(shí)也應(yīng)當(dāng)遵循相關(guān)使用規(guī)范。

其次,對(duì)于VI中沒(méi)有要求的元素,如網(wǎng)站的整體色調(diào)、按鈕圖標(biāo)、表單、分割線等,手機(jī)網(wǎng)頁(yè)也應(yīng)與計(jì)算機(jī)網(wǎng)頁(yè)保持一致,以便讓用戶(hù)在使用手機(jī)上網(wǎng)時(shí)快速找到平時(shí)用計(jì)算機(jī)上網(wǎng)的感覺(jué)。這樣既有利于用戶(hù)迅速建立品牌認(rèn)知,也能夠形成親切的視覺(jué)體驗(yàn)。

再則,從用戶(hù)使用的角度來(lái)說(shuō),手機(jī)網(wǎng)頁(yè)對(duì)計(jì)算機(jī)網(wǎng)頁(yè)具有延續(xù)性能夠使用戶(hù)在二者之間架設(shè)橋梁,幫助用戶(hù)把對(duì)計(jì)算機(jī)網(wǎng)頁(yè)熟悉的認(rèn)知轉(zhuǎn)移到手機(jī)網(wǎng)頁(yè)上,從而快速了解手機(jī)網(wǎng)頁(yè)上各個(gè)板塊的內(nèi)容,并掌握各功能區(qū)域的使用。

2.2手機(jī)網(wǎng)頁(yè)是計(jì)算機(jī)網(wǎng)頁(yè)的重構(gòu)

由于設(shè)備硬件條件、使用環(huán)境等各方面的差異,手機(jī)網(wǎng)頁(yè)不能照搬照抄計(jì)算機(jī)網(wǎng)頁(yè),而必須把計(jì)算機(jī)網(wǎng)頁(yè)上的元素拆開(kāi)后進(jìn)行重組,就像是視覺(jué)設(shè)計(jì)中的打散重構(gòu)。一方面,由于屏幕尺寸的限制,手機(jī)網(wǎng)頁(yè)要通過(guò)調(diào)整頁(yè)面的構(gòu)圖與各元素的比例,使頁(yè)面重點(diǎn)突出、清晰可讀、方便易用。另一方面,手機(jī)上網(wǎng)具有鮮明的“碎片化閱讀”特征,用戶(hù)在乘車(chē)、開(kāi)會(huì)時(shí)利用短暫的空閑時(shí)間上網(wǎng),與平時(shí)在計(jì)算機(jī)前上網(wǎng)的需求、心態(tài)都不相同,一般借游戲娛樂(lè)打發(fā)時(shí)間或查找地圖等,因此,在內(nèi)容安排上,手機(jī)網(wǎng)頁(yè)也要作出相應(yīng)調(diào)整。例如,百度的手機(jī)網(wǎng)頁(yè)把“小說(shuō)”放到菜單的第二位,而把“貼吧”、“知道”、“視頻”等互動(dòng)性、知識(shí)性或占據(jù)網(wǎng)絡(luò)資源較大的內(nèi)容整合進(jìn)“更多”菜單中。

3手機(jī)媒介網(wǎng)頁(yè)的版式設(shè)計(jì)原則

3.1簡(jiǎn)潔、“少即是多”原則

手機(jī)最大3.5英寸的屏幕使得簡(jiǎn)潔成為手機(jī)網(wǎng)頁(yè)設(shè)計(jì)的必然要求。在這狹小的方寸之內(nèi),根本沒(méi)有足夠的空間來(lái)進(jìn)行煩瑣的設(shè)計(jì)。所謂簡(jiǎn)潔,不單是指空間安排不擁塞,同時(shí)還包含版式的單純和圖形形態(tài)的簡(jiǎn)練概括。就手機(jī)的屏幕寬度而言,網(wǎng)頁(yè)一行字?jǐn)?shù)的上限為14個(gè)中文字符,這個(gè)寬度只能縱向分成一欄,因此手機(jī)網(wǎng)頁(yè)的版面結(jié)構(gòu)較為簡(jiǎn)單,呈現(xiàn)垂直瀏覽的單列布局。另外,尺寸的限制使用戶(hù)難以觀察到網(wǎng)頁(yè)中的微妙細(xì)節(jié),所以圖形不宜太復(fù)雜,而應(yīng)以簡(jiǎn)潔為主。簡(jiǎn)潔的網(wǎng)頁(yè)能夠使用戶(hù)保持對(duì)頁(yè)面的專(zhuān)注力,讓人對(duì)頁(yè)面的內(nèi)容一目了然。而花哨的背景與不當(dāng)?shù)牧舭讜?huì)給頁(yè)面增添視噪,干擾用戶(hù)的閱讀。

3.2易用性原則

在美觀的設(shè)計(jì)與易用性發(fā)生沖突時(shí)應(yīng)該如何選擇?對(duì)于手機(jī)網(wǎng)頁(yè)來(lái)說(shuō),答案是非常肯定的,即易用性要比設(shè)計(jì)感更重要。有時(shí)為了網(wǎng)頁(yè)的易用性不得不犧牲部分設(shè)計(jì)感。例如,由于手機(jī)屏幕有限,手機(jī)網(wǎng)站不便于像計(jì)算機(jī)網(wǎng)站一樣在每一頁(yè)面都重復(fù)設(shè)置網(wǎng)站主導(dǎo)航,以免主導(dǎo)航占據(jù)過(guò)多的空間,導(dǎo)致用戶(hù)在屏幕上向下滑動(dòng)很遠(yuǎn)才能看到當(dāng)頁(yè)的主要內(nèi)容。此外,手機(jī)網(wǎng)頁(yè)中應(yīng)只顯現(xiàn)最精華的內(nèi)容。手機(jī)屏幕非常小,要確保網(wǎng)站正確識(shí)別手機(jī)發(fā)送的請(qǐng)求,并且提供最精華、最簡(jiǎn)潔的內(nèi)容,否則重要的內(nèi)容將被擠到網(wǎng)頁(yè)下邊或很難被發(fā)現(xiàn)。

3.3信息扁平化原則

保持手機(jī)網(wǎng)頁(yè)的易用性還意味著應(yīng)避免不必要的交互,所以在設(shè)計(jì)中應(yīng)堅(jiān)持網(wǎng)頁(yè)信息的扁平化原則。從登錄網(wǎng)頁(yè)到找到所需信息,其間的步驟越多,帶給用戶(hù)的不便也就越多。手機(jī)客戶(hù)端沒(méi)有像計(jì)算機(jī)網(wǎng)頁(yè)那樣操作方便的導(dǎo)航方式,如目錄、樹(shù)狀導(dǎo)航和面包屑等,若要跳轉(zhuǎn)到其他內(nèi)容頁(yè)面時(shí),就必須一層層返回上級(jí)菜單,再逐層進(jìn)入子菜單,這樣會(huì)導(dǎo)致跳轉(zhuǎn)界面非常復(fù)雜。因此,每跳轉(zhuǎn)一次界面都會(huì)造成用戶(hù)數(shù)量的損失。扁平化的信息構(gòu)架就是首頁(yè)和內(nèi)容頁(yè)之間的垂直訪問(wèn),不需要有間隔層次。

3.4少用圖原則

應(yīng)用圖片能增加網(wǎng)頁(yè)的美感,適度地使用大圖能使頁(yè)面顯得大氣時(shí)尚。但對(duì)于手機(jī)網(wǎng)頁(yè)來(lái)說(shuō),在目前的網(wǎng)絡(luò)技術(shù)條件下,使用圖片要相當(dāng)謹(jǐn)慎,圖片不但會(huì)增加文件的數(shù)據(jù)量,拖慢頁(yè)面載入速度,還會(huì)占據(jù)過(guò)多的頁(yè)面空間,導(dǎo)致頁(yè)面上提供的有用信息減少。尤其手機(jī)網(wǎng)頁(yè)的背景圖,當(dāng)與文字重合時(shí)會(huì)影響文字的閱讀,因此成為手機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的禁忌。