1、網(wǎng)頁(yè)界面布局

手機端網(wǎng)頁(yè)的界面布局設計中考慮到手機用戶(hù)更多的是采用垂直滾動(dòng)的方式瀏覽。由于手機屏幕的尺寸較小, 字號大小也受到限制, 為了不影響閱讀, 手機端網(wǎng)頁(yè)應控制單個(gè)頁(yè)面的內容量, 突出重點(diǎn)視覺(jué)元素, 避免界面雜亂。同時(shí)精簡(jiǎn)文字, 將冗長(cháng)的信息內容劃分為多重頁(yè)面。網(wǎng)頁(yè)界面設計中應突出按鈕的位置, 按鈕的尺寸應當和手指的大小相匹配。

2、視覺(jué)隱喻的運用

圖像閱讀是人類(lèi)普遍具有的能力, 它能夠直接調動(dòng)讀者的感性經(jīng)驗和視覺(jué)思維。在圖形用戶(hù)界面中用戶(hù)通過(guò)把這些帶有隱喻的圖形與其熟悉的事物聯(lián)系在一起, 從而理解界面中各個(gè)控件的功能。

在手機端網(wǎng)頁(yè)設計中, 圖像也不僅僅是傳遞信息的一種介質(zhì), 同時(shí)也可以利用視覺(jué)隱喻的原理承擔著(zhù)幫助用戶(hù)在界面視覺(jué)元素與網(wǎng)頁(yè)互動(dòng)機制之間建立直覺(jué)聯(lián)系, 進(jìn)而減少用戶(hù)的學(xué)習成本。

3、字體使用

盡管圖像在數字閱讀時(shí)代越來(lái)越受到青睞, 但文字依然是人類(lèi)獲取信息的主要介質(zhì)。隨著(zhù)科技的發(fā)展, 今天, 5寸左右的手機屏幕像素數量已與電腦屏幕相當 (如1 080×1 920) , 其像素密度普遍超過(guò)300PPI, 幾乎接近一般打印效果。這給手機端網(wǎng)頁(yè)字體的選擇帶來(lái)更大的自由, 更多樣的中文字體可以被使用, 極大地豐富了網(wǎng)頁(yè)視覺(jué)風(fēng)格。

盡管如此, 手機端網(wǎng)頁(yè)在使用字體時(shí)還需要考慮屏幕尺寸的限制, 為了讓信息層級清晰, 避免界面雜亂, 應盡量控制網(wǎng)頁(yè)文字的字體類(lèi)型和字號的數量。

4、色彩設計

使用不同的色彩可以帶給用戶(hù)不同的感覺(jué)。在一些領(lǐng)域中, 顏色具有特殊的意義, 在不同的文化環(huán)境中顏色的含義也不盡相同, 所以在網(wǎng)頁(yè)視覺(jué)設計時(shí)網(wǎng)頁(yè)的色彩不但要與主題內容所傳達的情感相契合，也要考慮讀者的文化背景。

色彩和其他視覺(jué)元素一樣不僅用于傳達內容和情緒, 也承擔著(zhù)網(wǎng)頁(yè)層次結構的梳理功能。在手機端網(wǎng)頁(yè)的色彩設計中往往會(huì )根據內容和結構設定主色, 標準色和對比色。主色決定了整個(gè)系列網(wǎng)頁(yè)的視覺(jué)風(fēng)格, 一般作為底色使用或者使用在每頁(yè)的一個(gè)固定位置上, 起到定調的作用。標準色指的是整套移動(dòng)界面的色彩規范, 確定文字、線(xiàn)段、圖標等的顏色。對比色通常會(huì )用在標題、按鈕等地方, 起強調和引導的作用。

5、動(dòng)畫(huà)設計

隨著(zhù)網(wǎng)頁(yè)技術(shù)的發(fā)展, 在手機端網(wǎng)頁(yè)實(shí)現各種形式的動(dòng)畫(huà)效果 (以下簡(jiǎn)稱(chēng)動(dòng)效) 變得更加容易, 和影視動(dòng)畫(huà)不同, 網(wǎng)頁(yè)動(dòng)畫(huà)效果常常肩負著(zhù)對網(wǎng)頁(yè)信息結構和交互的展示、引導、反饋等作用。

網(wǎng)頁(yè)動(dòng)效一般在網(wǎng)頁(yè)中起到以下幾種作用。

1) 強調。通過(guò)網(wǎng)頁(yè)動(dòng)效的添加對網(wǎng)頁(yè)的重要信息和功能進(jìn)行暗示和指導。例如重要文字信息的出現動(dòng)畫(huà)、按鈕的閃爍等。

2) 反饋。通過(guò)網(wǎng)頁(yè)中視覺(jué)元素的出現和消失, 以及大小、位置和透明度的變化對用戶(hù)的交互行為進(jìn)行反饋, 使用戶(hù)和網(wǎng)頁(yè)的交互過(guò)程更加流暢。

3) 層級展現。通過(guò)網(wǎng)頁(yè)頁(yè)面或個(gè)別視覺(jué)元素的縮放、覆蓋、滑出等動(dòng)效幫助用戶(hù)理解網(wǎng)頁(yè)信息架構。常用與網(wǎng)頁(yè)的轉場(chǎng)和菜單的展開(kāi)。

4) 模擬。一些動(dòng)效通過(guò)對現實(shí)世界的模擬迎合用戶(hù)的認知。用戶(hù)通過(guò)對現實(shí)世界的認知來(lái)理解網(wǎng)頁(yè)的功能, 增強了用戶(hù)對頁(yè)面的操縱感和帶入感。

5) 后臺進(jìn)程的可視化。典型例子是各種加載動(dòng)畫(huà), 不僅讓等待的時(shí)間變得可預期, 也增加了網(wǎng)頁(yè)的趣味性。

6、交互設計

交互設計是定義、設計人造系統的行為的設計領(lǐng)域, 它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內容和結構, 使之互相配合, 共同達成某種目的。

在網(wǎng)頁(yè)交互設計中應滿(mǎn)足以下幾點(diǎn)。

1) 可操作性。用戶(hù)為激活某對象所需觸摸的屏幕區域有充分的空間以便用戶(hù)準確操作。

2) 易學(xué)性。通過(guò)對視覺(jué)隱喻等原理的運用引導用戶(hù)的交互行為, 并注重交互界面設計中具有相同功能按鈕的統一性, 以降低用戶(hù)對交互界面的學(xué)習成本。

3) 可知性。通過(guò)網(wǎng)頁(yè)動(dòng)畫(huà)等方式對用戶(hù)的交互動(dòng)作予以反饋, 讓用戶(hù)了解自己的操作是否成功。

4) 必要性。在網(wǎng)頁(yè)中加入交互環(huán)節其實(shí)也在增加用戶(hù)的操作步驟和網(wǎng)頁(yè)程序的運算量, 應充分考慮其必要性。