隨著智能手機占據(jù)手機的主要市場, 人們使用手機上網(wǎng)已經(jīng)越來越普遍, 但針對手機平臺設計的網(wǎng)頁卻只是互聯(lián)網(wǎng)網(wǎng)頁中極小的一部分。手機屏幕的尺寸不足一般計算機顯示器的1/20, 用手機瀏覽普通網(wǎng)頁不但浪費數(shù)據(jù)流量, 而且視覺效果極差, 使得手機上網(wǎng)成為一種令人不太愉悅的體驗。據(jù)統(tǒng)計, 至2010年世界上有26%的人使用網(wǎng)絡, 68%的人擁有手機, 但卻只有不足4%的人使用手機上網(wǎng), 除使用習慣的因素之外, 手機平臺網(wǎng)頁缺乏科學規(guī)范的設計也是制約其發(fā)展的重要因素之一。
目前市場上手機品牌和種類繁多, 使用手機上網(wǎng)的效果也有很大差異。影響手機上網(wǎng)體驗的因素主要有屏幕尺寸、分辨率、橫屏/豎屏、交互模式 (按鍵/觸屏) 、無線帶寬等, 本文主要討論手機媒介網(wǎng)頁的版式設計問題。
1 目前手機網(wǎng)頁設計中的問題
1.1 網(wǎng)頁與手機屏幕不匹配
目前市場上的手機型號達3 000多種, 手機屏幕類型多樣, 尺寸從1.5英寸到3.8英寸不等, 分辨率更是從240×320到854×480像素不等, 除此之外還有豎屏與橫屏等差異。手機網(wǎng)頁需要根據(jù)不同的手機屏幕尺寸與分辨率進行設計, 即使不能針對每一種類型, 一般也應針對三四種主流屏幕進行設計。而一些沒有專門針對手機進行設計的網(wǎng)頁, 完全依賴瀏覽器自動轉換屏幕尺寸, 往往會導致文字錯行、頁面雜亂, 甚至根本無法閱讀。
1.2 網(wǎng)頁缺乏設計
手機網(wǎng)頁由于受屏幕尺寸的限制, 設計風格往往趨于簡潔。然而簡潔不等于簡單甚至沒有設計, 有些網(wǎng)頁一味追求頁面元素簡單, 僅以文字鏈接進行導航, 而刪除了一切認為不必要的圖片、圖標、色彩, 致使整個網(wǎng)頁成為了帶有鏈接的文字的堆砌;或者雖然使用了圖片與色彩等元素, 但完全忽略了用戶的使用及心理需求, 整個頁面缺乏設計感。
1.3 色彩應用缺乏規(guī)劃
對于手機網(wǎng)頁的設計師來說, 要在如此小的幅面中規(guī)劃好色彩是非常考驗功力的。缺乏經(jīng)驗的設計師要么把手機網(wǎng)頁的色彩設計得過于簡單且缺乏變化, 難以挑動用戶的視覺神經(jīng);要么把繽紛的色彩堆砌在狹小的空間里, 讓人目不暇接。
1.4 字體應用混亂
文字除了傳遞其字面意義的信息之外, 還能表達字面內容以外的信息。文字的字體、大小、字距與行距等, 無時無刻不在向用戶傳遞著信息。例如, 標題文字通常會比正文字號更大、字體更粗, 若把關系弄反了, 就容易導致讀者的困惑。一幅頁面中的字體也不宜太多, 過多的字體會使頁面雜亂無章。
1.5 載入速度緩慢
手機的下載速度與計算機是不一樣的, 同一幅頁面, 通過計算機查看或許是沒有載入問題的, 但在手機上查看卻可能產生極大的干擾。頁面中過量的圖片、視頻、廣告會嚴重影響網(wǎng)頁的載入速度, 最終導致用戶的流失。
1.6 手機網(wǎng)頁與計算機網(wǎng)頁缺乏統(tǒng)一性
許多在計算機網(wǎng)頁中可以使用的設計元素, 由于受手機設備的限制而被屏蔽在頁面之外。刪減圖片、視頻等大量內容, 雖然使網(wǎng)頁在載入及視覺效果方面都運行良好, 但還會產生一個嚴重的問題, 即手機網(wǎng)頁與計算機網(wǎng)頁缺乏統(tǒng)一性, 令人無法在二者之間建立聯(lián)想。
2 手機網(wǎng)頁與計算機網(wǎng)頁的關系
2.1 手機網(wǎng)頁是計算機網(wǎng)頁的延續(xù)
手機網(wǎng)頁雖然與計算機網(wǎng)頁的應用平臺不同, 但二者卻應保持一定的延續(xù)性, 手機網(wǎng)頁不能完全拋棄計算機網(wǎng)頁的元素另起爐灶。
首先, 出于企業(yè)形象一體化設計 (VI) 的原則, 計算機網(wǎng)頁中企業(yè)標志、標準色彩、標準字體等元素在應用上都有具體的規(guī)定, 目的就是保持企業(yè)形象在各種情況下的視覺統(tǒng)一性, 手機網(wǎng)頁在使用這些元素時也應當遵循相關使用規(guī)范。
其次, 對于VI中沒有要求的元素, 如網(wǎng)站的整體色調、按鈕圖標、表單、分割線等, 手機網(wǎng)頁也應與計算機網(wǎng)頁保持一致, 以便讓用戶在使用手機上網(wǎng)時快速找到平時用計算機上網(wǎng)的感覺。這樣既有利于用戶迅速建立品牌認知, 也能夠形成親切的視覺體驗。
再則, 從用戶使用的角度來說, 手機網(wǎng)頁對計算機網(wǎng)頁具有延續(xù)性能夠使用戶在二者之間架設橋梁, 幫助用戶把對計算機網(wǎng)頁熟悉的認知轉移到手機網(wǎng)頁上, 從而快速了解手機網(wǎng)頁上各個板塊的內容, 并掌握各功能區(qū)域的使用。
2.2 手機網(wǎng)頁是計算機網(wǎng)頁的重構
由于設備硬件條件、使用環(huán)境等各方面的差異, 手機網(wǎng)頁不能照搬照抄計算機網(wǎng)頁, 而必須把計算機網(wǎng)頁上的元素拆開后進行重組, 就像是視覺設計中的打散重構。一方面, 由于屏幕尺寸的限制, 手機網(wǎng)頁要通過調整頁面的構圖與各元素的比例, 使頁面重點突出、清晰可讀、方便易用。另一方面, 手機上網(wǎng)具有鮮明的“碎片化閱讀”特征, 用戶在乘車、開會時利用短暫的空閑時間上網(wǎng), 與平時在計算機前上網(wǎng)的需求、心態(tài)都不相同, 一般借游戲娛樂打發(fā)時間或查找地圖等, 因此, 在內容安排上, 手機網(wǎng)頁也要作出相應調整。例如, 百度的手機網(wǎng)頁把“小說”放到菜單的第二位, 而把“貼吧”、“知道”、“視頻”等互動性、知識性或占據(jù)網(wǎng)絡資源較大的內容整合進“更多”菜單中。
3 手機媒介網(wǎng)頁的版式設計原則
3.1 簡潔、“少即是多”原則
手機最大3.5英寸的屏幕使得簡潔成為手機網(wǎng)頁設計的必然要求。在這狹小的方寸之內, 根本沒有足夠的空間來進行煩瑣的設計。所謂簡潔, 不單是指空間安排不擁塞, 同時還包含版式的單純和圖形形態(tài)的簡練概括。就手機的屏幕寬度而言, 網(wǎng)頁一行字數(shù)的上限為14個中文字符, 這個寬度只能縱向分成一欄, 因此手機網(wǎng)頁的版面結構較為簡單, 呈現(xiàn)垂直瀏覽的單列布局。另外, 尺寸的限制使用戶難以觀察到網(wǎng)頁中的微妙細節(jié), 所以圖形不宜太復雜, 而應以簡潔為主。簡潔的網(wǎng)頁能夠使用戶保持對頁面的專注力, 讓人對頁面的內容一目了然。而花哨的背景與不當?shù)牧舭讜o頁面增添視噪, 干擾用戶的閱讀。
3.2 易用性原則
在美觀的設計與易用性發(fā)生沖突時應該如何選擇?對于手機網(wǎng)頁來說, 答案是非?？隙ǖ? 即易用性要比設計感更重要。有時為了網(wǎng)頁的易用性不得不犧牲部分設計感。例如, 由于手機屏幕有限, 手機網(wǎng)站不便于像計算機網(wǎng)站一樣在每一頁面都重復設置網(wǎng)站主導航, 以免主導航占據(jù)過多的空間, 導致用戶在屏幕上向下滑動很遠才能看到當頁的主要內容。此外, 手機網(wǎng)頁中應只顯現(xiàn)最精華的內容。手機屏幕非常小, 要確保網(wǎng)站正確識別手機發(fā)送的請求, 并且提供最精華、最簡潔的內容, 否則重要的內容將被擠到網(wǎng)頁下邊或很難被發(fā)現(xiàn)。
3.3 信息扁平化原則
保持手機網(wǎng)頁的易用性還意味著應避免不必要的交互, 所以在設計中應堅持網(wǎng)頁信息的扁平化原則。從登錄網(wǎng)頁到找到所需信息, 其間的步驟越多, 帶給用戶的不便也就越多。手機客戶端沒有像計算機網(wǎng)頁那樣操作方便的導航方式, 如目錄、樹狀導航和面包屑等, 若要跳轉到其他內容頁面時, 就必須一層層返回上級菜單, 再逐層進入子菜單, 這樣會導致跳轉界面非常復雜。因此, 每跳轉一次界面都會造成用戶數(shù)量的損失。扁平化的信息構架就是首頁和內容頁之間的垂直訪問, 不需要有間隔層次。
3.4 少用圖原則
應用圖片能增加網(wǎng)頁的美感, 適度地使用大圖能使頁面顯得大氣時尚。但對于手機網(wǎng)頁來說, 在目前的網(wǎng)絡技術條件下, 使用圖片要相當謹慎, 圖片不但會增加文件的數(shù)據(jù)量, 拖慢頁面載入速度, 還會占據(jù)過多的頁面空間, 導致頁面上提供的有用信息減少。尤其手機網(wǎng)頁的背景圖, 當與文字重合時會影響文字的閱讀, 因此成為手機網(wǎng)頁設計中的禁忌。