手機網站建設界面視覺設計特點

發布：2019-03-17 15:24:32 瀏覽：5273

1、網頁界面布局

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

2、視覺隱喻的運用

圖像閱讀是人類普遍具有的能力,它能夠直接調動讀者的感性經驗和視覺思維。在圖形用戶界面中用戶通過把這些帶有隱喻的圖形與其熟悉的事物聯系在一起,從而理解界面中各個控件的功能。

在手機端網頁設計中,圖像也不僅僅是傳遞信息的一種介質,同時也可以利用視覺隱喻的原理承擔著幫助用戶在界面視覺元素與網頁互動機制之間建立直覺聯系,進而減少用戶的學習成本。

3、字體使用

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

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

4、色彩設計

使用不同的色彩可以帶給用戶不同的感覺。在一些領域中,顏色具有特殊的意義,在不同的文化環境中顏色的含義也不盡相同,所以在網頁視覺設計時網頁的色彩不但要與主題內容所傳達的情感相契合，也要考慮讀者的文化背景。

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

5、動畫設計

隨著網頁技術的發展,在手機端網頁實現各種形式的動畫效果(以下簡稱動效)變得更加容易,和影視動畫不同,網頁動畫效果常常肩負著對網頁信息結構和交互的展示、引導、反饋等作用。

網頁動效一般在網頁中起到以下幾種作用。

1)強調。通過網頁動效的添加對網頁的重要信息和功能進行暗示和指導。例如重要文字信息的出現動畫、按鈕的閃爍等。

2)反饋。通過網頁中視覺元素的出現和消失,以及大小、位置和透明度的變化對用戶的交互行為進行反饋,使用戶和網頁的交互過程更加流暢。

3)層級展現。通過網頁頁面或個別視覺元素的縮放、覆蓋、滑出等動效幫助用戶理解網頁信息架構。常用與網頁的轉場和菜單的展開。

4)模擬。一些動效通過對現實世界的模擬迎合用戶的認知。用戶通過對現實世界的認知來理解網頁的功能,增強了用戶對頁面的操縱感和帶入感。

5)后臺進程的可視化。典型例子是各種加載動畫,不僅讓等待的時間變得可預期,也增加了網頁的趣味性。

6、交互設計

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

在網頁交互設計中應滿足以下幾點。

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

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

3)可知性。通過網頁動畫等方式對用戶的交互動作予以反饋,讓用戶了解自己的操作是否成功。

4)必要性。在網頁中加入交互環節其實也在增加用戶的操作步驟和網頁程序的運算量,應充分考慮其必要性。