隨著智能手機(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á)3 000多種, 手機(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)頁, 完全依賴瀏覽器自動(dòng)轉(zhuǎn)換屏幕尺寸, 往往會導(dǎo)致文字錯(cuò)行、頁面雜亂, 甚至根本無法閱讀。
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)、色彩, 致使整個(gè)網(wǎng)頁成為了帶有鏈接的文字的堆砌;或者雖然使用了圖片與色彩等元素, 但完全忽略了用戶的使用及心理需求, 整個(gè)頁面缺乏設(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ì)得過于簡單且缺乏變化, 難以挑動(dòng)用戶的視覺神經(jīng);要么把繽紛的色彩堆砌在狹小的空間里, 讓人目不暇接。
1.4 字體應(yīng)用混亂
文字除了傳遞其字面意義的信息之外, 還能表達(dá)字面內(nèi)容以外的信息。文字的字體、大小、字距與行距等, 無時(shí)無刻不在向用戶傳遞著信息。例如, 標(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)生一個(gè)嚴(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)頁在使用這些元素時(shí)也應(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)時(shí)快速找到平時(shí)用計(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)頁上各個(gè)板塊的內(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)具有鮮明的“碎片化閱讀”特征, 用戶在乘車、開會時(shí)利用短暫的空閑時(shí)間上網(wǎng), 與平時(shí)在計(jì)算機(jī)前上網(wǎng)的需求、心態(tài)都不相同, 一般借游戲娛樂打發(fā)時(shí)間或查找地圖等, 因此, 在內(nèi)容安排上, 手機(jī)網(wǎng)頁也要作出相應(yīng)調(diào)整。例如, 百度的手機(jī)網(wǎng)頁把“小說”放到菜單的第二位, 而把“貼吧”、“知道”、“視頻”等互動(dò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ì)。所謂簡潔, 不單是指空間安排不擁塞, 同時(shí)還包含版式的單純和圖形形態(tài)的簡練概括。就手機(jī)的屏幕寬度而言, 網(wǎng)頁一行字?jǐn)?shù)的上限為14個(gè)中文字符, 這個(gè)寬度只能縱向分成一欄, 因此手機(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ā)生沖突時(shí)應(yīng)該如何選擇?對于手機(jī)網(wǎng)頁來說, 答案是非常肯定的, 即易用性要比設(shè)計(jì)感更重要。有時(shí)為了網(wǎng)頁的易用性不得不犧牲部分設(shè)計(jì)感。例如, 由于手機(jī)屏幕有限, 手機(jī)網(wǎng)站不便于像計(jì)算機(jī)網(wǎng)站一樣在每一頁面都重復(fù)設(shè)置網(wǎng)站主導(dǎo)航, 以免主導(dǎo)航占據(jù)過多的空間, 導(dǎo)致用戶在屏幕上向下滑動(dòng)很遠(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)容頁面時(shí), 就必須一層層返回上級菜單, 再逐層進(jìn)入子菜單, 這樣會導(dǎo)致跳轉(zhuǎn)界面非常復(fù)雜。因此, 每跳轉(zhuǎn)一次界面都會造成用戶數(shù)量的損失。扁平化的信息構(gòu)架就是首頁和內(nèi)容頁之間的垂直訪問, 不需要有間隔層次。
3.4 少用圖原則
應(yīng)用圖片能增加網(wǎng)頁的美感, 適度地使用大圖能使頁面顯得大氣時(shí)尚。但對于手機(jī)網(wǎng)頁來說, 在目前的網(wǎng)絡(luò)技術(shù)條件下, 使用圖片要相當(dāng)謹(jǐn)慎, 圖片不但會增加文件的數(shù)據(jù)量, 拖慢頁面載入速度, 還會占據(jù)過多的頁面空間, 導(dǎo)致頁面上提供的有用信息減少。尤其手機(jī)網(wǎng)頁的背景圖, 當(dāng)與文字重合時(shí)會影響文字的閱讀, 因此成為手機(jī)網(wǎng)頁設(shè)計(jì)中的禁忌。