編輯導(dǎo)讀：一個(gè)手機(jī)商城中的新品板塊，是展示新品的最佳位置，能夠幫助新品最大程度的曝光，并且促進(jìn)銷售轉(zhuǎn)化。因此，新品模塊的設(shè)計(jì)顯得格外重要。本文作者參與了小米商城APP的新品板塊的改版，從中總結(jié)了一些經(jīng)驗(yàn)，與你分享。

近期改版了小米商城APP的新品板塊，改版的過(guò)程總結(jié)了很多非常實(shí)用且有價(jià)值的設(shè)計(jì)方法，所以要盡快分享給大家。

這次分享的內(nèi)容會(huì)從思維到技術(shù)全面講解，會(huì)告訴你如何從設(shè)計(jì)的角度理解需求，針對(duì)性的解決問題，以及交付設(shè)計(jì)時(shí)的溝通技巧，可謂是清清楚楚明明白白的分享設(shè)計(jì)經(jīng)驗(yàn)。

一、案例解析

電商產(chǎn)品運(yùn)營(yíng)板塊改版，很大一部分原因是數(shù)據(jù)不好或不夠美觀需要提升視覺，下面是改版前的截圖和調(diào)研UI設(shè)計(jì)滿意度的結(jié)果。

調(diào)研的結(jié)果中其實(shí)前六項(xiàng)都是在講一件事，就是頭圖不夠好看，最后一個(gè)是運(yùn)營(yíng)的需求，查看更多入口點(diǎn)擊率過(guò)低，希望能提升打開率，這點(diǎn)的改版下面會(huì)詳細(xì)講解。

1. 從設(shè)計(jì)的角度找問題根源

舊版頭圖第一眼看過(guò)去，色調(diào)、質(zhì)感其實(shí)說(shuō)的過(guò)去，但如果仔細(xì)觀察分析，就會(huì)發(fā)現(xiàn)有很多不恰當(dāng)?shù)牡胤健?/p>

比如投影與主光源不符、主光源在左側(cè)沒有專屬感、背景雜亂、空間感太強(qiáng)商品擺設(shè)置后，就像是在遠(yuǎn)處觀看物體，這樣會(huì)導(dǎo)致商品不突出，視覺上容易疲勞。

上圖這些問題普通用戶一般不會(huì)準(zhǔn)確發(fā)現(xiàn)，但其實(shí)用戶能夠感知到不舒服，因?yàn)椴环先藵撘庾R(shí)認(rèn)知的物理規(guī)律。

所以問卷中大家會(huì)提出不夠高大尚、沒有高級(jí)感、不夠簡(jiǎn)潔，這些就是普通用戶說(shuō)不出哪里出了問題的語(yǔ)言表達(dá)。

作為設(shè)計(jì)師應(yīng)該能夠從用戶的語(yǔ)言中，通過(guò)專業(yè)的設(shè)計(jì)角度去挖掘問題的根源。

比如不夠簡(jiǎn)潔，是因?yàn)楸尘爸须s亂的東西太多；容易視覺疲勞是因?yàn)樯唐放c空間的關(guān)系沒有掌握好；主光源在左側(cè)，不容易營(yíng)造商品專屬舞臺(tái)的感覺，而且使用暖色調(diào)還會(huì)增加視覺疲勞感。

找到問題的根源后，首先是改善展示商品的舞臺(tái)，解決商品空間上展示的問題，渲染出一張干凈的背景，不會(huì)有雜亂的感受，然后通過(guò)燈光和舞臺(tái)材質(zhì)質(zhì)感打造商品的專屬感。

2. 了解商品才能更好的打造舞臺(tái)

舞臺(tái)是為商品服務(wù)的，所以我們要了解大多數(shù)展示商品的色調(diào)、拍攝角度、質(zhì)感材質(zhì)等，這樣才能夠更合理的思考舞臺(tái)的設(shè)計(jì)。

另外，還要結(jié)合新品板塊的特征去研究設(shè)計(jì)方案，比如新品產(chǎn)品具有神秘感屬性，那就需要打造一個(gè)貼合新品特征的環(huán)境氛圍。

米家商品

小米手機(jī)

米家的產(chǎn)品大多是白色，小米手機(jī)都是絢麗多彩的屏幕和有質(zhì)感的外框，加上新品商品的屬性較為適合有神秘感的氛圍，所以綜合來(lái)看我們需要一個(gè)暗色系且有質(zhì)感的舞臺(tái)。

強(qiáng)調(diào)舞臺(tái)質(zhì)感是因?yàn)槟軌蚺c有質(zhì)感的手機(jī)產(chǎn)品形成一種呼應(yīng)，手機(jī)是小米的支柱產(chǎn)品，當(dāng)然會(huì)寵他，所以在設(shè)計(jì)上需要傾向手機(jī)的展示。

3. 什么是舞臺(tái)？

何為舞臺(tái)，舞臺(tái)是為演出者服務(wù)，其最終目的是給觀眾更好的視覺體驗(yàn)。

回到舊版的案例中，商品放置空間的后方，就等于給用戶買的是最便宜的后排座位，后排視角當(dāng)然不會(huì)有好的視覺體檢，第一排的C位才應(yīng)該是我們?yōu)橛脩魷?zhǔn)備的視角。

舞臺(tái)中的主光源一定是對(duì)稱、居中打在舞臺(tái)中央的，因?yàn)檫@樣觀眾的視線能更好的聚焦在演員身上，并且能渲染氛圍，呈現(xiàn)一種專屬感。

所以我們舊版案例中主光源在左側(cè)，右側(cè)是投影，會(huì)導(dǎo)致用戶的視覺焦點(diǎn)很分散，從而不能把視線有效的引導(dǎo)在商品本身。

4. C4D渲染舞臺(tái)

通過(guò)上面總結(jié)分析，我們大概對(duì)舞臺(tái)有了一個(gè)清晰的設(shè)計(jì)思路，背景用暗色系讓視覺更好的聚焦在商品身上，有反射高光質(zhì)感能與手機(jī)產(chǎn)品形成呼應(yīng)，空間上給用戶近距離的視覺體驗(yàn)，好了打開C4D干。

C4D渲染舞臺(tái)

非常簡(jiǎn)單的一個(gè)場(chǎng)景，使用一個(gè)階梯的圓柱體，放個(gè)背景，正前方放一個(gè)主光源，左右兩個(gè)對(duì)稱的輔助光，材質(zhì)球上加輕微的反射與高光，這樣渲染出來(lái)更有質(zhì)感，材質(zhì)顏色使用了藍(lán)色調(diào)，原因有三點(diǎn)：

1. 小米剛剛推出的小米11主打的是靚麗的藍(lán)色調(diào)，輕裝上陣，暗藍(lán)色的舞臺(tái)與明亮的小米11放在一起會(huì)毫無(wú)違和感，同時(shí)也會(huì)呈現(xiàn)強(qiáng)烈的對(duì)比效果。
2. 小米有太多白色的商品，暗藍(lán)色的背景會(huì)讓白色商品渲染的更加靚麗。
3. 小米也有很多黑色的商品，偏藍(lán)色的背景能夠避免與黑色調(diào)商品撞色。

最終舞臺(tái)效果圖

最終的的調(diào)色在Ps中完成，舞臺(tái)的中央是亮的，營(yíng)造了一種聚光燈打在舞臺(tái)中央的感覺，這樣上面放上商品就會(huì)體現(xiàn)一種專屬感，這種效果是在C4D中材質(zhì)球使用漸變色。

另外，暗藍(lán)色的氛圍上有一種神秘的感覺，這非常符合新品的亮相方式，整個(gè)舞臺(tái)沒有很強(qiáng)的反射和高光質(zhì)感，是因?yàn)槲枧_(tái)的質(zhì)感要弱于商品本身的質(zhì)感，否則容易喧賓奪主。

新舊對(duì)比

上圖中有質(zhì)感的舞臺(tái)可以增加手機(jī)的寫實(shí)投影，視覺上融合的非常好，下圖中是白色和黑色商品的展示，在暗藍(lán)色的背景下都能夠有效的突出商品。

黑白商品圖展示

5. 優(yōu)化頭圖比例

新版與舊版還有一個(gè)最大的區(qū)別，新版頭圖的比例縮小至1:1，為什么是這個(gè)比例？舊版的長(zhǎng)圖為什么不合適？

舊版長(zhǎng)圖占據(jù)首屏巨大的面積，這種形式一般不適合常態(tài)化功能模塊，（常態(tài)化是指產(chǎn)品中一直存在的功能模塊）長(zhǎng)圖或者整屏適用于非 常態(tài)化強(qiáng)運(yùn)營(yíng)的活動(dòng)模塊，比如節(jié)日活動(dòng)，節(jié)日過(guò)后就會(huì)下架。

小米上新板塊是首頁(yè)中常態(tài)的功能模塊，太大的展示面積其實(shí)浪費(fèi)了首屏空間，之所以用1:1比例，是因?yàn)榉治隽巳舾蓚€(gè)競(jìng)品的上新模塊都采用的是1:1的比例。

所以記住這句話，當(dāng)市場(chǎng)已經(jīng)驗(yàn)證過(guò)的設(shè)計(jì)形式，最好的就是采用它，這樣大概率能避免出錯(cuò)。

調(diào)整文案排版：

舊版的文案是3行，看上去會(huì)略顯啰嗦，中間文字有點(diǎn)多余，還占了面積，改為兩行足以，一個(gè)產(chǎn)品名稱，一個(gè)產(chǎn)品賣點(diǎn)。

舊版走馬燈是常規(guī)的原點(diǎn)示意，為了能給商品展示留出相對(duì)更大的面積，新版把走馬燈改為了數(shù)字示意，如上圖右下角2/5的形式，這樣就從4行變?yōu)榱?行，直觀簡(jiǎn)潔突出。

6. 敲黑板！“查看更多”入口的處理

上文問卷調(diào)查中最后一條，運(yùn)營(yíng)同學(xué)希望用戶能更多的點(diǎn)擊列表中的“查看更多”入口，之所以現(xiàn)在點(diǎn)擊率不高，是因?yàn)樵O(shè)計(jì)樣式是一種輔助形式，下圖所示。

如果按運(yùn)營(yíng)同學(xué)的需求只是去強(qiáng)化入口的視覺表現(xiàn)，那未必是一個(gè)好的設(shè)計(jì)方案。

想要突出哪里就在視覺上強(qiáng)化哪里，這是典型的產(chǎn)品思維，而UI設(shè)計(jì)師應(yīng)該結(jié)合整體頁(yè)面結(jié)構(gòu)的交互形式去思考優(yōu)化設(shè)計(jì)。

首先梳理一下用戶在此頁(yè)面的瀏覽過(guò)程，當(dāng)用戶打開此頁(yè)面時(shí)，第一眼看到的是頭圖，因?yàn)樗钗矍虻?，其次就是開始滑動(dòng)頁(yè)面瀏覽商品列表。

那么這時(shí)如果“查看更多”入口，通過(guò)強(qiáng)烈的色彩表現(xiàn)，或者動(dòng)效設(shè)計(jì)的方式，那一定會(huì)有部分用戶被吸引點(diǎn)擊進(jìn)入“查看更多”頁(yè)面，而用戶沒能繼續(xù)向下瀏覽頁(yè)面，就會(huì)看不到平臺(tái)推薦的商品，這不符合產(chǎn)品的設(shè)計(jì)邏輯。

所以，當(dāng)用戶瀏覽到列表最后的商品了，還沒有被某個(gè)商品吸引，這時(shí)再出現(xiàn)一個(gè)“查看更多”按鈕入口會(huì)較為合理， 這樣的交互方式才符合用戶瀏覽的順序，修改后如下圖。

另外，標(biāo)題也做了優(yōu)化，舊版主標(biāo)題與副標(biāo)題上下排列的方式會(huì)占據(jù)更大的面積，而且看起來(lái)還是非常擁擠，再加上主標(biāo)題與副標(biāo)題大小對(duì)比過(guò)于大，也直接導(dǎo)致用戶視線會(huì)忽略掉副標(biāo)題。

新版修改后縮小主標(biāo)題字號(hào)，排版方式上主副標(biāo)題成左右結(jié)構(gòu)，這樣視覺上完全不會(huì)遮擋副標(biāo)題的展示，而且最大的好處還釋放了頁(yè)面中的空間，看下圖感受一下。

7. 滿足運(yùn)營(yíng)需求，增加動(dòng)態(tài)iCON

為了滿足運(yùn)營(yíng)同學(xué)希望用戶更多的進(jìn)入全部新品頁(yè)面的需求，設(shè)計(jì)上除了在商品列表下方增加了“更多新品”按鈕，同時(shí)也在頁(yè)面的右上角增加了一個(gè)進(jìn)入全部新品頁(yè)面的動(dòng)效形式icon。

當(dāng)時(shí)在構(gòu)思這個(gè)icon時(shí)，從一個(gè)視覺表現(xiàn)很強(qiáng)的動(dòng)態(tài)形式，一直做減法直至非常恰當(dāng)合理有效的融入頁(yè)面當(dāng)中，下圖中最后一個(gè)最簡(jiǎn)潔的設(shè)計(jì)是確定的方案，簡(jiǎn)單的動(dòng)效突出而不突兀，恰到好處。

↓↓

↓↓

↓↓

做減法的icon

動(dòng)態(tài)元素在頁(yè)面中最為吸引人，哪怕是做了弱化處理，所以有時(shí)候在設(shè)計(jì)上有一種策略是，前期用動(dòng)態(tài)的效果去培養(yǎng)用戶的習(xí)慣和認(rèn)知，當(dāng)對(duì)動(dòng)態(tài)效果已經(jīng)發(fā)揮了作用之后，后面就可以改回非動(dòng)態(tài)效果，這樣就能避免瀏覽頁(yè)面過(guò)程中動(dòng)態(tài)元素的干擾。

8. 總結(jié)

改版設(shè)計(jì)，不能根據(jù)表面需求去設(shè)計(jì)，一定要找到問題的根源所在，然后針對(duì)性的解決這些問題，當(dāng)交付設(shè)計(jì)時(shí)，一定還要告訴需求方， 這樣設(shè)計(jì)的目的是什么，解決了我們現(xiàn)有的哪些問題。

說(shuō)不出來(lái)設(shè)計(jì)目的，編也要編出來(lái)，這樣至少能鍛煉你的思考力，編的多了自然會(huì)有明確正確的設(shè)計(jì)思考了。

二、最后

如果你現(xiàn)在打開小米商城進(jìn)入小米上新，會(huì)發(fā)現(xiàn)只改了一張背景圖，因?yàn)殚_發(fā)還沒有排上期，但最終會(huì)按此次改版的效果開發(fā)上線，所以有時(shí)候遇到這種情況時(shí)，設(shè)計(jì)師還需要結(jié)合當(dāng)前產(chǎn)品的開發(fā)框架進(jìn)行適配設(shè)計(jì)。

另外，歡迎大家體驗(yàn)小米商城APP，如果發(fā)現(xiàn)在交互和UI上有不好的地方，歡迎在評(píng)論區(qū)提出你的建議和意見，如果你的見解獨(dú)到有用，我們會(huì)按你的想法進(jìn)行優(yōu)化，感謝。

#專欄作家#

吳星辰，微信公眾號(hào)：互聯(lián)網(wǎng)設(shè)計(jì)幫，人人都是產(chǎn)品經(jīng)理專欄作家。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議