購物類APP界面設計原則!

文/張如雲 移動購物APP在人們生活和工作中的廣泛應用,給人們的生活、學習和工作等方面帶來了極大的便利。那麼,在設計移動購物APP界面時應遵循哪些原則呢?

購物類APP界面設計原則!



購物類APP界面設計原則!


桌面平臺購物網站的物品信息主要是圖片和文字,然而在移動平臺上圖片記載和展示是沒有優勢的,所以應從移動設備的特徵進行考慮,將多通道運用到物品信息展示方面,這樣一方面可節省空間資源,另一方面會使手機端有更好的體驗。

購物類APP界面設計原則!


①通過移動客戶端語音通道,進行物品簡介和物品屬性的展示。

②用圖片與聲音的結合來體現產品屬性。圖片具有環境性和時間性,可通過合適的音頻效果來展示物品的形象。

③物品信息可動態展示。經常會有人抱怨,買的東西和網上的不一樣。如果將物品信息進行動態展示,就可以從各個角度和情境下對物品有一個準確的認識。

購物類APP界面設計原則!



購物類APP界面設計原則!


移動平臺屏幕的侷限性影響物品的展示數量和展示效果,雖然通過設計很難改變這種現象,但是仍然可通過趣味設計讓用戶在信息瀏覽中,得到與桌面平臺不同的體驗。

購物類APP界面設計原則!


移動端的一個特點是可探索性,而且體驗感比較強。用戶在用手點觸、化動過程中就會觸發動作,這些動作又會帶來相應的反饋,如果在頁面一些地方設計上驚喜的反饋方式,會給用戶帶來很多的樂趣,並且會鼓勵用戶進行很多頁面的操作行為。

購物類APP界面設計原則!



購物類APP界面設計原則!


不論是在購物網站中還是在移動購物應用中,圖片是物品展示的一種必要元素。但是對於移動應用來說網速的不穩定性,經常導致圖片在加載過程中造成不良體驗,在這個問題上可將圖片進行預加載設計。

購物類APP界面設計原則!


①顏色預加載。先展現圖片的色彩趨向,或者加載模糊的圖片,讓用戶瞭解到,圖片正在慢慢地展現出來。

②文字預加載。在物品展現列表內不會只有單獨的圖片展示,同樣重要的還有文字的展示和圖片相關信息的說明,文字加載速度很快。因此在圖片加載過程中可以先將文字展示出來,先讓用戶對圖片內容有一個簡單的瞭解,然後再展示圖片內容。

購物類APP界面設計原則!


③先加載後展現。一般情況下圖片加載均是先顯示出一個圖框區域,然後再慢慢加載圖片,大片的圖框顯示會讓用戶抓狂,用戶會覺得好多內容需要加載,需要等待很長的時間,容易形成焦躁的情緒。圖片加載完後再顯示就不一樣了,沒有空白的圖框展示,這樣的方式會減輕用戶的煩躁情緒,對圖片瀏覽體驗是一個很好的改善。

④驚喜的加載動畫效果。加載就是等待的過程,為了讓用戶在這時間不定的等待過程中,不會感到煩躁,可以將注意力放在加載動畫上面。

購物類APP界面設計原則!



購物類APP界面設計原則!


由於界面空間問題,信息改動是不可避免的,但是要在不影響用戶理解和記憶的情況下進行改動。

①在對用戶習慣且使用頻率很高的標籤進行再設計的時候,可將其內容進行簡化設計。

購物類APP界面設計原則!


②可將表達不合理的標籤,在不同設備上同步更改。

③在移動化界面重估,標籤空間位置進行合理的引導的情況下,可以將原標籤的信息進行更改。

購物類APP界面設計原則!


信息之間既有輔助表達的作用,也有閱讀引導的作用,可引導用戶的閱讀和認識流。因此應該多考慮同級信息之間的關係和聯繫,不在一個層級的上下文信息的關係,應該更多地考慮信息跳轉的隱性設計,讓用戶通過元素和閱讀了解到上下文關係。

購物類APP界面設計原則!



購物類APP界面設計原則!


①操作特徵。包含用戶基於設備所做的操作。如用戶插著耳機在聽東西,這時候就應該把產品的音效自動改為靜音,或者將耳機的音樂自動關閉,不然兩個聲音相互干擾,會帶來不良的聽覺體驗。

購物類APP界面設計原則!


②環境特徵。主要為光環境。用戶處於不同的光環境下可以對手機端進行合理的智能調整。其次是溫度環境,用戶所處地區的溫度一般通過互聯網進行判斷,用戶在不同的溫度環境中,想看到的東西是不同的,例如在冰冷的環境中,人們會喜歡看些暖色的東西,而不是冰冷的顏色。

購物類APP界面設計原則!


③時間特徵。根據用戶使用產品的可能的時間,判斷用戶的可能需求,並給予相應的反饋。時間對用戶潛在需求的預測是很重要的一個要素,用戶處於早上、中午和晚上對於產品的需求是不一樣的。

購物類APP界面設計原則!


在進行移動購物APP界面設計時,應堅持界面的有效性、易用性和用戶體驗的情感性等要素,作為檢驗交互是否合理的衡量標準。要做好優秀APP界面設計,不僅讓用戶學會追求美的視覺感受,更是出於對用戶的理解和情感關懷,使用戶產生對企業文化和品牌的認同。

購物類APP界面設計原則!


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

② 本篇為 設計智造www.cocoo.top 編輯整理,版權歸原作者所有,轉載請註明出處!

相關推薦

推薦中...