UX設(shè)計(jì): 商品詳情頁

現(xiàn)如今，30%的在線購物行為發(fā)生在手機(jī)端上。 對于在線購物一事，所有用戶都期望能夠得到快速、流暢的體驗(yàn)。因此，在購物過程的每一個(gè)階段，即使付之最小的努力都有可能利于用戶的整個(gè)體驗(yàn)過程（我們也應(yīng)該以利于用戶為目標(biāo)）。

在一個(gè)應(yīng)用程序中，沒有任何其他地方能夠像產(chǎn)品詳情頁一樣對提升購買率如此關(guān)鍵，因?yàn)橛脩粼谫徺I之前往往需要充足的商品信息來了解商品。在這片文章中，我將談?wù)撋唐吩斍轫摰脑O(shè)計(jì)并重點(diǎn)強(qiáng)調(diào)該頁面的幾個(gè)重要元素——商品圖片、商品描述和“加入購物車”按鈕。

什么是商品詳情頁面？

商品詳情頁是用戶用來做決定的地方，比如添加進(jìn)購物車，收藏、預(yù)定、打電話、完成表單等操作。有效的商品詳情頁結(jié)合文本與圖片來展示商品基本信息、透露其實(shí)用性、價(jià)格并有購買商品的清晰路徑。

一、商品圖片

常言道，一圖勝千言。不管你的商品是什么，是耳機(jī)還是玩具，圖片都是產(chǎn)品詳情頁中最重要的元素。不論是用來吸引用戶注意或是區(qū)分產(chǎn)品特性，圖片都是一個(gè)極其有效的方法。
 

1、使用主圖并將其與描述區(qū)域區(qū)分開來

一張好的主圖能夠?yàn)槟闶『芏嘌哉Z上的事情。商品主圖應(yīng)該用于推銷商品的主要特性，切忌讓用戶滾動(dòng)后才能看到商品主圖。

2、提供一個(gè)圖片庫

圖片可以向用戶傳達(dá)商品描述永遠(yuǎn)無法傳達(dá)的感覺。因此，在商品詳情頁中，圖片越多會(huì)有更好的效果：

（1）多圖能夠全方位的展示商品特性；

（2）用戶通常通過商品圖片來評估其特性，因此，你應(yīng)該提供展示商品特性和細(xì)節(jié)的圖片。例如，如果你在賣音頻接收器，你應(yīng)該在其圖片中標(biāo)示出輸入和輸出端口，好讓用戶理解其特性。

（3）為了發(fā)揮圖片庫的最大作用，你應(yīng)該使用跟商品描述中所強(qiáng)調(diào)的商品細(xì)節(jié)特性相對應(yīng)關(guān)聯(lián)的圖片。
 

3、可橫向滑動(dòng)切換商品圖片

用戶應(yīng)該能通過水平滾動(dòng)來快速的切換商品圖片，而不必非得上下滾動(dòng)才能查看更多圖片。

4、使用高質(zhì)量元素

你應(yīng)該只提供高質(zhì)量的商品圖片、視頻或其他元素來抓住用戶的眼球。確保你的圖片使用恰當(dāng)?shù)某叽绮⒖煽缙脚_(tái)使用。

（1）Android平臺(tái)，圖片應(yīng)使用XHDPI (或者 XXHDPI)分辨率；

（2）IOS平臺(tái)，iPhone6 Plus使用@3x尺寸，所有其他高分辨率設(shè)備使用@2x尺寸；

5、圖片易于縮放大小

不管是雙擊或者操作一個(gè)縮放按鈕，用戶應(yīng)該能輕易地放大商品圖片來查看更多細(xì)節(jié)。這對服裝類商品尤為重要，因?yàn)橘徺I服裝的用戶通常更關(guān)注其細(xì)節(jié)部分。需要注意的是可縮放的圖片仍然需要保持高質(zhì)量。

二、商品描述

商品描述部分需要闡明該商品是什么，讓用戶會(huì)有何感覺，對用戶的究竟有何用。這部分內(nèi)容應(yīng)該即易于概覽又能夠信息查看。
 

1、使用清晰的格式

商品描述應(yīng)該有一個(gè)清晰的格式，如按列表或提要句格式，保證信息很容易閱讀。商品的關(guān)鍵特性應(yīng)該突出，從而吸引用戶將其加入購物車。

2、文本描述易于閱讀

文本的大小和布局對用戶的閱讀體驗(yàn)有巨大的影響。更小的文本，更小的行距和內(nèi)邊距會(huì)消耗用戶更長的時(shí)間，其結(jié)果就是用戶跳過了大量信息（沒有耐心閱讀）。因此，無論你使用哪種布局，請考慮以下幾點(diǎn)：

（1）字體大小。為了保證文本清晰易讀，你應(yīng)該讓字體大小至少保持在11pt以上（即使用戶選擇了小字體），而且貫穿整個(gè)程序的字體應(yīng)該是一致的。另外，一個(gè)好的經(jīng)驗(yàn)是每行使用30-40個(gè)字符。

（2）對比度。確保文本和背景間有明顯的對比度，尤其在日光照耀下。WC3’s Web Content Accessibility Guideline設(shè)定了對比度的最小值，要求即便是視覺不佳（環(huán)境不佳）的用戶也要能閱讀你的內(nèi)容，按照WC3的標(biāo)準(zhǔn)，一個(gè)顏色和其背景色的對比度按照其亮度被分為1-21等級。

（3）間距。對于小屏幕，間距是一個(gè)關(guān)鍵因素。好的間距提升易讀性。請不要讓文本重疊，應(yīng)該通過增加行高或字符間距等做法，來提高文本的易讀性。

三、觸發(fā)動(dòng)作的按鈕

用戶永遠(yuǎn)都不應(yīng)該還要花時(shí)間去找那些操作按鈕——屏幕中最主要的按鈕（如“加入購物車”、“立即預(yù)訂”）應(yīng)該設(shè)計(jì)的最為突出，使得用戶能夠自然而然的注意到，緊隨其后的那些按鈕（如“分享”、“收藏”）按鈕則在設(shè)計(jì)上也要接近于前者的視覺效果。

1、瞇眼測試

使用瞇眼測試來檢測按鈕有多突顯。頁面內(nèi)容模糊處理后瞇眼查看，按鈕是否比其他任何元素更突出呢？如果答案是否定的，那么給它一個(gè)未在頁面中其他地方使用的顏色或者讓它更大、字體更粗來讓其變得突出。

2、按鈕要常顯

你應(yīng)該使主要按鈕一直顯示，即使你滾動(dòng)屏幕內(nèi)容，也要使它留在屏幕底部。這使得用戶可以在任何時(shí)候采觸發(fā)按鈕。

3、按鈕要足夠大

應(yīng)該使所有的控件元素足夠大好讓用戶容易做點(diǎn)按操作；

（1）Android要求諸如按鈕、圖標(biāo)、圖標(biāo)標(biāo)簽等所有控件元素的可觸摸尺寸大小為48dp；

（2）iOS則要求所有控件元素的可觸摸尺寸大小為44 x 44 pt；

4、提供視覺反饋

當(dāng)用戶添加一個(gè)商品到購物車?yán)铮答伒娜笔?huì)讓用戶疑惑該操作是否生效。

那些通過精巧的動(dòng)畫效果或者其他視覺效果向用戶傳達(dá)反饋結(jié)果的程序則輕易的打消了用戶的這種疑慮。

四、結(jié)論

商品頁面的每一個(gè)元素都應(yīng)該設(shè)計(jì)的有益于用戶。請記住，在做出一個(gè)購買決定時(shí)，用戶受感性和理性因素影響，成功的商品頁面則能夠向用戶傳達(dá)出這兩方面的信息——他們在情緒上刺激用戶興奮，在理性上則讓用戶能放心的購買。
 

譯自：https://uxplanet.org/mobile-ux-design-product-screen-5fec660f2e84#.q6q6dvri0

原文鏈接：jianshu