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

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

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

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

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

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

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

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

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

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

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

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

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

1.5載入速度緩慢

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

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

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

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

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

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

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

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

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

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

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

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

3.1簡潔、“少即是多”原則

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

3.2易用性原則

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

3.3信息扁平化原則

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

3.4少用圖原則

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