手機網(wǎng)頁(yè)版式設計研究
日期 : 2019-03-08 13:47:56

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