手機網頁版式設計研究

發布：2019-03-08 13:47:56 瀏覽：5410

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

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

1目前手機網頁設計中的問題

1.1網頁與手機屏幕不匹配

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

1.2網頁缺乏設計

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

1.3色彩應用缺乏規劃

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

1.4字體應用混亂

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

1.5載入速度緩慢

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

1.6手機網頁與計算機網頁缺乏統一性

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

2手機網頁與計算機網頁的關系

2.1手機網頁是計算機網頁的延續

手機網頁雖然與計算機網頁的應用平臺不同,但二者卻應保持一定的延續性,手機網頁不能完全拋棄計算機網頁的元素另起爐灶。

首先,出于企業形象一體化設計(VI)的原則,計算機網頁中企業標志、標準色彩、標準字體等元素在應用上都有具體的規定,目的就是保持企業形象在各種情況下的視覺統一性,手機網頁在使用這些元素時也應當遵循相關使用規范。

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

再則,從用戶使用的角度來說,手機網頁對計算機網頁具有延續性能夠使用戶在二者之間架設橋梁,幫助用戶把對計算機網頁熟悉的認知轉移到手機網頁上,從而快速了解手機網頁上各個板塊的內容,并掌握各功能區域的使用。

2.2手機網頁是計算機網頁的重構

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

3手機媒介網頁的版式設計原則

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

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

3.2易用性原則

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

3.3信息扁平化原則

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

3.4少用圖原則

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