解讀!購物APP的頁面佈局

文/李琛 APP交互界面的設計佈局應該注重功能區域的劃分,不分主次、不加以規範化和條理化的處理頁面,會使頁面整體混亂不堪,妨礙了頁面上信息傳達的有效性,使用戶在交互的過程中感到茫然失措,影響APP的使用效率。

解讀!購物APP的頁面佈局


一般在購物APP中,其界面的各個部分可以按其服務的方面分為廣告區、類別菜單區、搜索區、功能服務區、會員信息區等,在佈局這些服務類別的時候,應該運用視覺處理方法予以區分,竭力避免造成內容與服務之間的混淆,使用戶可以較快地瞭解網購APP。

解讀!購物APP的頁面佈局


解讀!購物APP的頁面佈局

①視覺容量,是指一定時間內,視覺所能容納的信息量。一旦視覺接收到的信息超出定的視覺容量,就會使用戶的心理產生一種牴觸反應,影響用戶情緒。

解讀!購物APP的頁面佈局


②視覺流程。受人們視覺習慣的影響,也是由人的視覺特性所決定的,人們在閱讀瀏覽的過程中,只能產生一個焦點。人的視覺觀察和瀏覽方式習慣於從左向右看、從上向下看;從信息容量上來說,我們的視覺習慣於先從簡單清晰的內容來瀏覽(圖片、文字),之後再瀏覽複雜繁瑣的內容。

解讀!購物APP的頁面佈局


解讀!購物APP的頁面佈局

在設計網購APP交互界面的過程中,要充分考慮用戶閱讀信息的生理和心理狀態,對界面中所要提供的內容進行功能劃分,區分出核心功能、輔助功能。對功能區域進行分類,例如:菜單區域、搜索區域、廣告展示區域、設置區域、用戶區域等,將AAP交互界面的核心功能以最直觀簡明的方式展現出來。

解讀!購物APP的頁面佈局


①尊重用戶的視覺行為習慣來設計界面,新穎的設計固然會帶來用戶新鮮感,但同時要需要用戶付出學習時間成本。

②頁面佈局的設計應該分清主次,將重要的功能和信息凸顯出來,使界面的視覺層次變的清晰可見。

解讀!購物APP的頁面佈局


③可以用來點按操作的應該視覺效果突出一些,與其他固定的信息區分開來,讓用戶一眼看到可以進行操作指令。

④按照APP的功能與信息將界面進行區域劃分,定義每一個區域的主要功能,並且將這些區域在視覺上區分開來。

⑤省略多餘的文字。

解讀!購物APP的頁面佈局


解讀!購物APP的頁面佈局

通常情況下,購物APP交互界面中的搜索區域和分類菜單區域屬於核心功能,因為用戶使用APP的最終目的是購買商品,一種方法是在分類菜單中按層級查找到商品;另一種方法是在搜索框中輸入商品信息完成查找。

解讀!購物APP的頁面佈局


這兩個核心功能應該相對其他功能更為突出,所以一般放置在界面靠左的位置,而其中搜索框的視覺元素應該清晰明瞭,讓用戶短時間內可以捕捉到,完成查找內容。

解讀!購物APP的頁面佈局


解讀!購物APP的頁面佈局

為一個以商品交易為核心內容的APP,在設計中要把握住這種互聯網時代的認知特點,多采用圖形化的方式表達內容,使用新奇、吸引力的表達方式,來捕獲用戶的視覺。

解讀!購物APP的頁面佈局


①適當縮減文字內容,多用圖片去說明產品。從用戶的角度來說,面對信息大保障的高速移動互聯網時代,圖片、音頻和視頻以及flash動畫都可以成為信息的有效載體,而且往往比文字閱讀的傳播效果好。

解讀!購物APP的頁面佈局


②注重頁面分割佈局的邏輯性。在APP界面設計中,以文字說明為主的界面可以在適當位置插入圖片和標記,文段內容利用分割線對段落進行劃分,某些帶有數字的說明文字可以用列表方式進行整理。

解讀!購物APP的頁面佈局


解讀!購物APP的頁面佈局

①節奏與韻律。在交互界面的設計中,通過線條、色彩、形體、方向等因素有規律、有韻律的變化,對整體的版式營造出一種舒適的心理感受。

解讀!購物APP的頁面佈局


②對稱與平衡。對稱即均齊,是在整體統一中求變化;平衡即是側重在變化中尋求統一。在交互界面設計中,對稱可以是一個相對的概念,例如:圖形面積大小的對稱、色彩明度和飽和度的對稱、文本疏密和大小的對稱;而平衡更多時候也是圖形和文字的相互平衡,滿足人們視覺上整體的平衡感,不會使得界面的形式顯得鬆散和凌亂。

解讀!購物APP的頁面佈局


③對比與調和。對比的最基本要素主要是產生統一變化與主從關係的效果;調和主要是指舒適、安定、適合、和諧、統一。調和與對比是密切聯繫、相輔相成的。在交互界面的設計之中。一般整體版面適應調和,局部版面易形成對比,合理利用對比因素如圖形大小、色彩、風格、文字排列、組合、圖片尺寸、位置、空間比例等,將這些元素進行排列、組合、對比,進而取得強烈的視覺功效。

解讀!購物APP的頁面佈局


④變化與統一。變化通常是智慧、想象、運動的表現,是強調個性化;統一是一種手段與方法,目的最終是達成和諧,可通過調和、均衡、秩序等形式法則實現。

解讀!購物APP的頁面佈局


在含有大量信息的交互界面當中,應該考慮怎樣把圖形、文字、標籤、菜單、導航等這些功能視覺元素運用統一的手法創造內在的秩序,要在版式的變化中尋求統一,在統一的基礎上表現變化,使頁面更為豐富、更有活力,使用戶在瀏覽過程中達到視覺與心理的雙重享受。

解讀!購物APP的頁面佈局



① 官方頭條號:設計智造 頂級創意設計師必備


分享到:


相關文章: