移動端 App 中的 UX 設計:論商品展示中的網格視圖

原作者:Nick Babich? 翻譯者:Puddinnng

本教程為翻譯教程,原文地址為:

http://babich.biz/mobile-app-ux-design-grid-view-for-products/


在電子商務 app 中采用網格視圖的原因是什么?哪些情況下,用網格視圖比簡單地采用列表視圖要更合適?這篇文章會給你這兩個問題的解答。

什么是網格視圖?

網格視圖是列表視圖的另一種表現形式。網格視圖將你的內容以垂直和水平的方式,展示在兩列或更多列的小塊中。

網格視圖將你的內容以垂直和水平的方式,展示在兩列或更多列的小塊中。


小塊中的內容

網格視圖通常只展示產品的圖片,而少有附加的信息。多數情況下,顧客們唯一可以看到的描述,只是產品的名字和價格。

網格視圖的例子。圖片占據了方片大部分的空間,而文字被縮短了以避免太多換行。

瀏覽模式

網格視圖提供給用戶一種不連貫的瀏覽方式,這讓視覺理解與區分相似的數據類型更方便。用戶的注意力會被平均地分散到每個塊中:用戶可以隨意從一張圖片跳到另一張圖片而不用擔心順序和連貫性的問題。

圖片讓用戶可以跳躍著瀏覽

凝視平面圖展示了用戶在瀏覽一個賣沙發的電子商務網站時,眼睛都在看哪兒。每個藍點代表一個視力停留點,更大的藍點意味著更長時間的停留。

每個藍點代表了一個視力停留點,更大的藍點意味著更長時間的停留。

我們很快能得出結論:最關乎用戶目標和你商業目標的材料,應該放在不用滾動就能看到的頁面中。用戶雖然會滾動頁面查看更多內容,但所花時間遠不及他們查看不用滾動的頁面中的內容長。

一個有趣的現象是:比起只有商品的圖片,用戶會花更多的時間瀏覽有人出現的圖片。

一個人坐在沙發上的圖片比只有一張沙發的圖片吸引了更多的注意力。

做決定

用戶主要依據圖片來做選擇。這讓網格視圖適合于展示外觀相似的商品(那些你主要通過商品外觀來決定買不買的商品)。

舉個例子,如果用戶想買雙鞋,其實她/他心里已經有一個理想型了。用戶能在看圖片時,快速地發現具有她/他想要細節的那雙鞋。

網格視圖更吸引眼球。

圖片是讓網格視圖變得有用的關鍵因素。圖片能以一種文字描述很難具有的方式來表達商品。如果用戶看到低質量的商品圖片,他們的信心會減少,然后開始猶豫到底要不要購買。因此,確保你的圖片不僅高質量,尺寸合適,并且能提供商品的完整信息。

左邊:低質量的圖片。 右邊:高質量的圖片

滾動的方向

網格視圖往往只能垂直滾動。一般不鼓勵水平方向上滾動的網格視圖,因為這種交互方式會阻礙典型的閱讀模式,并影響理解。

如果內容是可滾動的,你應該讓視圖邊緣遮住一部分內容,以顯示下方有更多內容。

左邊:避免把滾動一開始的位置,就把網格與視圖邊緣對齊。因為這個位置不能有效地告訴用戶還有更多的可用內容。


每一頁展示更多的產品圖片

大尺寸圖片在展示單獨商品時非常重要,因為用戶關心商品外觀上的差異。而且,比起不停地在網格視圖和商品詳情頁面中切換,他們更喜歡在一個長的頁面上滾動瀏覽。

當設計網格布局時,要為圖片選擇一個正確的尺寸。以便用戶能夠辨別商品,但同時也能允許在一頁內展示更多的商品。

用戶一般一次能看到4到6個網格商品

網格視圖 vs. 列表視圖

當談及移動端設備時,如何為你的商品選擇合適的布局呢?該用網格視圖還是列表視圖?這個決定將影響用戶找到他們需要內容的難易程度。

網格視圖和列表視圖是用來強調不同數據類型的。網格視圖強調圖片多于文字,而列表視圖強調文字多于圖片。

手機上,用戶只有有限的屏幕空間,在滑動屏幕前他們只能看到一部分內容。網格視圖創造了更長的頁面并迫使用戶去更多的滾動。在下面的例子中你能看到網格視圖和列表視圖的區別。

紅線展示了屏幕上可以看到的區域

然而,在選擇網格視圖還是列表視圖時有一個最關鍵的因素。那就是用戶在選擇一個商品時,需要多少信息。這都回歸到“內容為王”這條原則了。產品的細節是非常重要的。要選擇適合展示你產品內容的布局方式。

像電器這一類產品,產品型號,功率這些在挑選產品時非常重要,那么列表視圖就更合適。列表視圖會讓你有更多空間來展示產品的細節信息。

iOS中的wall mart應用

像服飾類的產品,在挑選時產品性能不那么重要,這時候網格視圖就是更好的選擇了。

如果你還是不確定哪種布局對于你的商品來說最合適,那么你需要進行A/B測試來決定哪個方案更好。最好的解決方案是帶來更多價值的那個。

千萬別忘了

在可以滑動的頁面中,用戶往往會滑動到頁面底部。確保他們最初在頁面中看到的內容,讓他們相信往下滑動是值得的。

老話說,一張圖片勝過千言萬語。用網格視圖時,高分辨率的照片是制勝關鍵。嘗試著在每次滾動時展示更多的產品圖片。

當在網格視圖和列表視圖中選擇時,請遵循一個簡單的原則:細節信息用列表,圖片信息用網格。當然,最終的選擇還是以你用戶的需求為準。


結論

用戶最想要的只是有用的信息,如果你的布局能夠提供給他們做決定所需要的信息,他們會非常感謝你的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容