福州網站建設手機端網頁界面視覺設計特點

  • 福州網站建設手機端網頁界面視覺設計特點已關閉評論
  • A+

福州網站建設手機端網頁界面視覺設計特點

福州需要建設企業網站的很多,今天福州嘉藝網絡就來說下手機端網頁界面視覺設計特點

2.3.1 網頁界面布局

和書籍設計中的版式設計一樣, 手機端網頁的界面設計也有自己的規則, 不同的是手機端網頁版面設計中要考慮到人機交互的因素。在手機端網頁的界面布局設計中考慮到手機用戶更多的是采用垂直滾動的方式瀏覽, 網頁界面一般采用一欄單列式的布局, 讓用戶只需單方向滾動就能瀏覽主要的內容。

另外, 考慮到手機屏幕的尺寸較小, 字號大小也受到限制, 為了不影響閱讀, 手機端網頁應控制單個頁面的內容量, 突出重點視覺元素, 避免界面雜亂。同時精簡文字, 將冗長的信息內容劃分為多重頁面。設計者必須對內容有所取舍, 選出最為重要的信息擺入網頁中。

網頁界面設計中應突出按鈕的位置, 按鈕的尺寸應當和手指的大小相匹配。麻省理工學院的Touch Lab通過研究發現, 指面的觸摸尺寸平均大小為10 mm~14 mm, 而指尖的平均尺寸是8 mm~10 mm, 也就是說10 mm×10 mm的控件尺寸設計是比較合理的大小。另外一個需要考慮的就是可觸摸控件之間的距離。如果兩個按鈕比較靠近, 那么用戶在移動端上就很容易出現誤觸的情況了。如果想要解決這個問題, 就需要根據實際情況重新調整尺寸和按鈕之間的距離, 以適應用戶手指交互的需求。

2.3.2 視覺隱喻的運用

圖像閱讀是人類普遍具有的能力, 它能夠直接調動讀者的感性經驗和視覺思維。也正鑒于這點, GUI (graphical user interface/圖形用戶界面) 早早的被用于人機交互領域, 從1973年施樂公司研發出了第一臺使用Alto操作系統的個人電腦到今天圖形用戶界面已經走過了40幾年的發展歷程。施樂的圖形化界面啟發了蘋果公司的喬布斯, 他在1984年發布了著名的Macintosh系統, 也就是后來我們所熟知的Mac OS。在圖形用戶界面中用戶通過把這些帶有隱喻的圖形與其熟悉的事物聯系在一起, 從而理解界面中各個控件的功能。

在手機端網頁設計中, 圖像也不僅僅是傳遞信息的一種介質, 同時也可以利用視覺隱喻的原理承擔著幫助用戶在界面視覺元素與網頁互動機制之間建立直覺聯系, 進而減少用戶的學習成本。圖10是Le VIS手機端的網頁廣告, 網頁上模擬了一個冬天蒙上水汽的玻璃的畫面, 玻璃上有用手指寫的字, 這個畫面促使用戶根據經驗本能地用手指去涂抹屏幕, 從而觸發網頁程序, 畫面發生了變化進而引發了劇情。

2.3.3 字體使用

盡管圖像在數字閱讀時代越來越受到青睞, 但文字依然是人類獲取信息的主要介質。由于早期受到屏幕像素的限制, 為了適應屏幕柵格狀的像素點, 用于屏幕閱讀的字體通常選擇中文的黑體和拉丁文的無襯線體。字體開發公司也相繼推出適合屏幕使用的黑體字。

但是隨著科技的發展, 今天, 5寸左右的手機屏幕像素數量已與電腦屏幕相當 (如1 080×1 920) , 其像素密度普遍超過300PPI, 幾乎接近一般打印效果。這給手機端網頁字體的選擇帶來更大的自由, 更多樣的中文字體可以被使用, 極大地豐富了網頁視覺風格。

盡管如此, 手機端網頁在使用字體時還需要考慮屏幕尺寸的限制, 為了讓信息層級清晰, 避免界面雜亂, 應盡量控制網頁文字的字體類型和字號的數量, 正文字體盡量選擇識別性較高的黑體、中等線體等無襯線字體, 識別性較低的特殊字體在使用時應節制, 可在少量標題等字號相對較大的文字上使用。

2.3.4 色彩設計

使用不同的色彩可以帶給用戶不同的感覺, 譬如藍色使人感到平靜、黃色感覺明媚并有警示的效果。在一些領域中, 顏色具有特殊的意義, 會計會把紅色的數字當做負值, 把黑色當做正值, 在不同的文化環境中顏色的含義也不盡相同, 紅色在交通信號燈中的意思是停止, 在西方紅色意味著“危險”而在中國的一些場合里紅色意味著“吉利”, 白色在西方代表著純潔與祥和, 一般用在婚禮慶典中, 而在亞洲一些國家則用在葬禮中。所以在網頁視覺設計時網頁的色彩不但要與主題內容所傳達的情感相契合也要考慮讀者的文化背景。

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

手機端網頁一般是線性架構, 由一組網頁構成, 整套網頁色彩的協調性顯得尤為重要, 常見的色彩搭配方法主要有以下幾種。第一種是鄰近色配色 (色相環上鄰近的顏色) , 這種方法比較常用是因為搭配出來的網頁色相比較柔和過渡也非常自然。第二種是同色系配色 (色相一致, 飽和度不同) , 主色和對比色都在統一的色相上, 給用戶一種一致化的感受。第三種是點亮色配色, 主色用相對沉穩的顏色, 對比色采用一個高亮的顏色, 起帶動頁面氣氛, 強調重點的作用。第四種是中性色配色, 用一些中性的色彩為基調搭配, 營造沉穩內斂的氣氛。當然, 具體的配色方法不限于以上這些, 在確保內容、情緒準確傳達和信息結構的清晰梳理的基礎上還有很多發揮的空間。

2.3.5 動畫設計

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

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

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

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

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

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

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

網頁動效雖然形式多樣, 功能齊備, 但同樣要服務在突出網頁核心內容、展現網頁整體信息架構上, 考慮到動畫效果對網速及硬件的高要求, 網頁中的動效設計還應動靜相宜, 以避免影響到用戶的閱讀體驗。

2.6 交互設計

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

具體到手機端網頁設計中的交互設計, 指的是設計師結合網頁內容, 利用手機的交互功能設計出利于傳達網頁信息、提高閱讀體驗的交互界面。例如通過在網頁中設計按鈕等形式, 將原本在小屏幕上無法一次性呈現且可能造成界面視覺混亂的信息通過交互按鈕去隱藏和喚出, 一方面保持界面簡潔, 另一方面在遇到信息龐雜的網頁時方便用戶檢索。另外通過一些具有趣味性的交互設計, 也能吸引更多的用戶瀏覽網頁。

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

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

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

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

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

隨著智能手機科技的進步, 我們與手機的交互手段越來越多樣化, 如何利用好這些科技成果, 設計出對內容呈現有價值有意義的互動界面, 是手機端網頁交互設計需要探索的課題。

3 小結

手機端網頁和手機App不同的是前者偏向內容的展示, 后者更注重功能的實現, 從這個角度看, 手機端網頁與傳統書籍設計有一定的可比性。人類的閱讀習慣是由基于紙質媒體的靜態圖文信息培養出來的, 手機端網頁的視覺設計, 在很大程度上仍離不開從紙質閱讀載體上尋求原理的借鑒, 例如界面的圖文編排、文本信息的可視化處理等。同時, 同樣是基于閱讀載體的設計, 不同的閱讀載體具有不同的特征, 手機端網頁作為數字閱讀時代閱讀載體的代表, 具有明顯的數字閱讀特征, 例如基于手機端的多媒體性和交互性、基于網絡的超文本性和傳播性。不同的特征反過來也影響了閱讀行為, 只有充分了解視覺載體的視覺性能和數字閱讀時代的用戶行為特點, 才能在有目的的設計中化被動為主動, 設計出好的作品。

基于新技術的手機端網頁的種種特征, 雖然為信息呈現方式、信息檢索路徑、用戶交互方式提供了更多可能性, 但手機端網頁和書籍一樣都是基于某一特定文本的視覺再現。網頁界面設計、豐富的多媒體形式、人機交互設計都應該建立在文本內容的邏輯架構內, 服務于內容的呈現。設計師應該有節制有依據地運用它們。眼花繚亂的媒介是否喧賓奪主、交互是否缺乏必要性、界面編排是否符合內容結構和閱讀習慣, 都需要著重考慮。當前, 數字閱讀給人的一貫印象是“淺閱讀、碎片化”, 這里面自然有視覺載體的改變帶來閱讀行為的變化, 但是我相信這不是數字閱讀的最終宿命, 從另一個角度可以看出基于類似手機端網頁的數字閱讀載體的視覺設計還有很多研究工作要做。