隨著智能手機(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ī)品牌和種類繁多, 使用手機(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á)3 000多種, 手機(jī)屏幕類型多樣, 尺寸從1.5英寸到3.8英寸不等, 分辨率更是從240×320到854×480像素不等, 除此之外還有豎屏與橫屏等差異。手機(jī)網(wǎng)頁(yè)需要根據(jù)不同的手機(jī)屏幕尺寸與分辨率進(jìn)行設(shè)計(jì), 即使不能針對(duì)每一種類型, 一般也應(yīng)針對(duì)三四種主流屏幕進(jìn)行設(shè)計(jì)。而一些沒(méi)有專門(mén)針對(duì)手機(jī)進(jìn)行設(shè)計(jì)的網(wǎng)頁(yè), 完全依賴瀏覽器自動(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è)成為了帶有鏈接的文字的堆砌;或者雖然使用了圖片與色彩等元素, 但完全忽略了用戶的使用及心理需求, 整個(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)用戶的視覺(jué)神經(jīng);要么把繽紛的色彩堆砌在狹小的空間里, 讓人目不暇接。
1.4 字體應(yīng)用混亂
文字除了傳遞其字面意義的信息之外, 還能表達(dá)字面內(nèi)容以外的信息。文字的字體、大小、字距與行距等, 無(wú)時(shí)無(wú)刻不在向用戶傳遞著信息。例如, 標(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)致用戶的流失。
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è)保持一致, 以便讓用戶在使用手機(jī)上網(wǎng)時(shí)快速找到平時(shí)用計(jì)算機(jī)上網(wǎng)的感覺(jué)。這樣既有利于用戶迅速建立品牌認(rèn)知, 也能夠形成親切的視覺(jué)體驗(yàn)。
再則, 從用戶使用的角度來(lái)說(shuō), 手機(jī)網(wǎng)頁(yè)對(duì)計(jì)算機(jī)網(wǎng)頁(yè)具有延續(xù)性能夠使用戶在二者之間架設(shè)橋梁, 幫助用戶把對(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)具有鮮明的“碎片化閱讀”特征, 用戶在乘車、開(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)垂直瀏覽的單列布局。另外, 尺寸的限制使用戶難以觀察到網(wǎng)頁(yè)中的微妙細(xì)節(jié), 所以圖形不宜太復(fù)雜, 而應(yīng)以簡(jiǎn)潔為主。簡(jiǎn)潔的網(wǎng)頁(yè)能夠使用戶保持對(duì)頁(yè)面的專注力, 讓人對(duì)頁(yè)面的內(nèi)容一目了然。而花哨的背景與不當(dāng)?shù)牧舭讜?huì)給頁(yè)面增添視噪, 干擾用戶的閱讀。
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)致用戶在屏幕上向下滑動(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è)到找到所需信息, 其間的步驟越多, 帶給用戶的不便也就越多。手機(jī)客戶端沒(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ì)造成用戶數(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ì)中的禁忌。