現(xiàn)如今，30%的在線購(gòu)物行為發(fā)生在手機(jī)端上。 對(duì)于在線購(gòu)物一事，所有用戶都期望能夠得到快速、流暢的體驗(yàn)。因此，在購(gòu)物過(guò)程的每一個(gè)階段，即使付之最小的努力都有可能利于用戶的整個(gè)體驗(yàn)過(guò)程（我們也應(yīng)該以利于用戶為目標(biāo)）。
在一個(gè)應(yīng)用程序中，沒(méi)有任何其他地方能夠像產(chǎn)品詳情頁(yè)一樣對(duì)提升購(gòu)買率如此關(guān)鍵，因?yàn)橛脩粼谫?gòu)買之前往往需要充足的商品信息來(lái)了解商品。在這片文章中，我將談?wù)撋唐吩斍轫?yè)的設(shè)計(jì)并重點(diǎn)強(qiáng)調(diào)該頁(yè)面的幾個(gè)重要元素——商品圖片、商品描述和“加入購(gòu)物車”按鈕。
什么是商品詳情頁(yè)面？
商品詳情頁(yè)是用戶用來(lái)做決定的地方，比如添加進(jìn)購(gòu)物車，收藏、預(yù)定、打電話、完成表單等操作。有效的商品詳情頁(yè)結(jié)合文本與圖片來(lái)展示商品基本信息、透露其實(shí)用性、價(jià)格并有購(gòu)買商品的清晰路徑。
一、商品圖片
常言道，一圖勝千言。不管你的商品是什么，是耳機(jī)還是玩具，圖片都是產(chǎn)品詳情頁(yè)中最重要的元素。不論是用來(lái)吸引用戶注意或是區(qū)分產(chǎn)品特性，圖片都是一個(gè)極其有效的方法。
1、使用主圖并將其與描述區(qū)域區(qū)分開(kāi)來(lái)
一張好的主圖能夠?yàn)槟闶『芏嘌哉Z(yǔ)上的事情。商品主圖應(yīng)該用于推銷商品的主要特性，切忌讓用戶滾動(dòng)后才能看到商品主圖。
2、提供一個(gè)圖片庫(kù)
圖片可以向用戶傳達(dá)商品描述永遠(yuǎn)無(wú)法傳達(dá)的感覺(jué)。因此，在商品詳情頁(yè)中，圖片越多會(huì)有更好的效果：
（1）多圖能夠全方位的展示商品特性；
（2）用戶通常通過(guò)商品圖片來(lái)評(píng)估其特性，因此，你應(yīng)該提供展示商品特性和細(xì)節(jié)的圖片。例如，如果你在賣音頻接收器，你應(yīng)該在其圖片中標(biāo)示出輸入和輸出端口，好讓用戶理解其特性。
（3）為了發(fā)揮圖片庫(kù)的最大作用，你應(yīng)該使用跟商品描述中所強(qiáng)調(diào)的商品細(xì)節(jié)特性相對(duì)應(yīng)關(guān)聯(lián)的圖片。
3、可橫向滑動(dòng)切換商品圖片
用戶應(yīng)該能通過(guò)水平滾動(dòng)來(lái)快速的切換商品圖片，而不必非得上下滾動(dòng)才能查看更多圖片。
4、使用高質(zhì)量元素
你應(yīng)該只提供高質(zhì)量的商品圖片、視頻或其他元素來(lái)抓住用戶的眼球。確保你的圖片使用恰當(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)該能輕易地放大商品圖片來(lái)查看更多細(xì)節(jié)。這對(duì)服裝類商品尤為重要，因?yàn)橘?gòu)買服裝的用戶通常更關(guān)注其細(xì)節(jié)部分。需要注意的是可縮放的圖片仍然需要保持高質(zhì)量。
二、商品描述
商品描述部分需要闡明該商品是什么，讓用戶會(huì)有何感覺(jué)，對(duì)用戶的究竟有何用。這部分內(nèi)容應(yīng)該即易于概覽又能夠信息查看。
1、使用清晰的格式
商品描述應(yīng)該有一個(gè)清晰的格式，如按列表或提要句格式，保證信息很容易閱讀。商品的關(guān)鍵特性應(yīng)該突出，從而吸引用戶將其加入購(gòu)物車。
2、文本描述易于閱讀
文本的大小和布局對(duì)用戶的閱讀體驗(yàn)有巨大的影響。更小的文本，更小的行距和內(nèi)邊距會(huì)消耗用戶更長(zhǎng)的時(shí)間，其結(jié)果就是用戶跳過(guò)了大量信息（沒(méi)有耐心閱讀）。因此，無(wú)論你使用哪種布局，請(qǐng)考慮以下幾點(diǎn)：
（1）字體大小。為了保證文本清晰易讀，你應(yīng)該讓字體大小至少保持在11pt以上（即使用戶選擇了小字體），而且貫穿整個(gè)程序的字體應(yīng)該是一致的。另外，一個(gè)好的經(jīng)驗(yàn)是每行使用30-40個(gè)字符。
（2）對(duì)比度。確保文本和背景間有明顯的對(duì)比度，尤其在日光照耀下。WC3’s Web Content Accessibility Guideline設(shè)定了對(duì)比度的最小值，要求即便是視覺(jué)不佳（環(huán)境不佳）的用戶也要能閱讀你的內(nèi)容，按照WC3的標(biāo)準(zhǔn)，一個(gè)顏色和其背景色的對(duì)比度按照其亮度被分為1-21等級(jí)。
（3）間距。對(duì)于小屏幕，間距是一個(gè)關(guān)鍵因素。好的間距提升易讀性。請(qǐng)不要讓文本重疊，應(yīng)該通過(guò)增加行高或字符間距等做法，來(lái)提高文本的易讀性。
三、觸發(fā)動(dòng)作的按鈕
用戶永遠(yuǎn)都不應(yīng)該還要花時(shí)間去找那些操作按鈕——屏幕中最主要的按鈕（如“加入購(gòu)物車”、“立即預(yù)訂”）應(yīng)該設(shè)計(jì)的最為突出，使得用戶能夠自然而然的注意到，緊隨其后的那些按鈕（如“分享”、“收藏”）按鈕則在設(shè)計(jì)上也要接近于前者的視覺(jué)效果。
1、瞇眼測(cè)試
使用瞇眼測(cè)試來(lái)檢測(cè)按鈕有多突顯。頁(yè)面內(nèi)容模糊處理后瞇眼查看，按鈕是否比其他任何元素更突出呢？如果答案是否定的，那么給它一個(gè)未在頁(yè)面中其他地方使用的顏色或者讓它更大、字體更粗來(lái)讓其變得突出。
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、提供視覺(jué)反饋
當(dāng)用戶添加一個(gè)商品到購(gòu)物車?yán)铮答伒娜笔?huì)讓用戶疑惑該操作是否生效。
那些通過(guò)精巧的動(dòng)畫效果或者其他視覺(jué)效果向用戶傳達(dá)反饋結(jié)果的程序則輕易的打消了用戶的這種疑慮。
四、結(jié)論
商品頁(yè)面的每一個(gè)元素都應(yīng)該設(shè)計(jì)的有益于用戶。請(qǐng)記住，在做出一個(gè)購(gòu)買決定時(shí)，用戶受感性和理性因素影響，成功的商品頁(yè)面則能夠向用戶傳達(dá)出這兩方面的信息——他們?cè)谇榫w上刺激用戶興奮，在理性上則讓用戶能放心的購(gòu)買。
譯自：https://uxplanet.org/mobile-ux-design-product-screen-5fec660f2e84#.q6q6dvri0
原文鏈接：jianshu
