小米商城 - 新品模塊UI升級(jí)全面解析！
2021-3-3 ui設(shè)計(jì)分享達(dá)人
前言
近期改版了小米商城APP的新品板塊，改版的過(guò)程總結(jié)了很多非常實(shí)用且有價(jià)值的設(shè)計(jì)方法，所以要盡快分享給大家。
這次分享的內(nèi)容會(huì)從思維到技術(shù)全面講解，會(huì)告訴你如何從設(shè)計(jì)的角度理解需求，針對(duì)性的解決問(wèn)題，以及交付設(shè)計(jì)時(shí)的溝通技巧，可謂是清清楚楚明明白白的分享設(shè)計(jì)經(jīng)驗(yàn)。
案例解析
電商產(chǎn)品運(yùn)營(yíng)板塊改版，很大一部分原因是數(shù)據(jù)不好或不夠美觀(guān)需要提升視覺(jué)，下面是改版前的截圖和調(diào)研UI設(shè)計(jì)滿(mǎn)意度的結(jié)果。
調(diào)研的結(jié)果中其實(shí)前六項(xiàng)都是在講一件事，就是頭圖不夠好看，最后一個(gè)是運(yùn)營(yíng)的需求，查看更多入口點(diǎn)擊率過(guò)低，希望能提升打開(kāi)率，這點(diǎn)的改版下面會(huì)詳細(xì)講解。
從設(shè)計(jì)的角度找問(wèn)題根源
舊版頭圖第一眼看過(guò)去，色調(diào)、質(zhì)感其實(shí)說(shuō)的過(guò)去，但如果仔細(xì)觀(guān)察分析，就會(huì)發(fā)現(xiàn)有很多不恰當(dāng)?shù)牡胤健?nbsp;比如投影與主光源不符、主光源在左側(cè)沒(méi)有專(zhuān)屬感、背景雜亂、空間感太強(qiáng)商品擺設(shè)置后，就像是在遠(yuǎn)處觀(guān)看物體，這樣會(huì)導(dǎo)致商品不突出，視覺(jué)上容易疲勞。 上圖這些問(wèn)題普通用戶(hù)一般不會(huì)準(zhǔn)確發(fā)現(xiàn)，但其實(shí)用戶(hù)能夠感知到不舒服，因?yàn)椴环先藵撘庾R(shí)認(rèn)知的物理規(guī)律。 所以問(wèn)卷中大家會(huì)提出不夠高大尚、沒(méi)有高級(jí)感、不夠簡(jiǎn)潔，這些就是普通用戶(hù)說(shuō)不出哪里出了問(wèn)題的語(yǔ)言表達(dá)。 作為設(shè)計(jì)師應(yīng)該能夠從用戶(hù)的語(yǔ)言中，通過(guò)專(zhuān)業(yè)的設(shè)計(jì)角度去挖掘問(wèn)題的根源。 比如不夠簡(jiǎn)潔，是因?yàn)楸尘爸须s亂的東西太多；容易視覺(jué)疲勞是因?yàn)樯唐放c空間的關(guān)系沒(méi)有掌握好；主光源在左側(cè)，不容易營(yíng)造商品專(zhuān)屬舞臺(tái)的感覺(jué)，而且使用暖色調(diào)還會(huì)增加視覺(jué)疲勞感。 找到問(wèn)題的根源后，首先是改善展示商品的舞臺(tái)，解決商品空間上展示的問(wèn)題，渲染出一張干凈的背景，不會(huì)有雜亂的感受，然后通過(guò)燈光和舞臺(tái)材質(zhì)質(zhì)感打造商品的專(zhuān)屬感。
了解商品才能更好的打造舞臺(tái)
舞臺(tái)是為商品服務(wù)的，所以我們要了解大多數(shù)展示 商品的色調(diào)、拍攝角度、質(zhì)感材質(zhì)等，這樣才能夠更合理的思考舞臺(tái)的設(shè)計(jì)。 另外，還要結(jié)合新品板塊的特征去研究設(shè)計(jì)方案，比如新品產(chǎn)品具有神秘感屬性，那就需要打造一個(gè)貼合新品特征的環(huán)境氛圍。
米家的產(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ī)的展示。
什么是舞臺(tái)？
何為舞臺(tái)，舞臺(tái)是為演出者服務(wù)，其最終目的是給觀(guān)眾更好的視覺(jué)體驗(yàn)。 回到舊版的案例中，商品放置空間的后方，就等于給用戶(hù)買(mǎi)的是最便宜的后排座位，后排視角當(dāng)然不會(huì)有好的視覺(jué)體檢，第一排的C位才應(yīng)該是我們?yōu)橛脩?hù)準(zhǔn)備的視角。
舞臺(tái)中的主光源一定是對(duì)稱(chēng)、居中打在舞臺(tái)中央的，因?yàn)檫@樣觀(guān)眾的視線(xiàn)能更好的聚焦在演員身上，并且能渲染氛圍，呈現(xiàn)一種專(zhuān)屬感。 所以我們舊版案例中主光源在左側(cè)，右側(cè)是投影，會(huì)導(dǎo)致用戶(hù)的視覺(jué)焦點(diǎn)很分散，從而不能把視線(xiàn)有效的引導(dǎo)在商品本身。
C4D渲染舞臺(tái)
通過(guò)上面總結(jié)分析，我們大概對(duì)舞臺(tái)有了一個(gè)清晰的設(shè)計(jì)思路，背景用暗色系讓視覺(jué)更好的聚焦在商品身上，有反射高光質(zhì)感能與手機(jī)產(chǎn)品形成呼應(yīng)，空間上給用戶(hù)近距離的視覺(jué)體驗(yàn)，好了打開(kāi)C4D干...
非常簡(jiǎn)單的一個(gè)場(chǎng)景，使用一個(gè)階梯的圓柱體，放個(gè)背景，正前方放一個(gè)主光源，左右兩個(gè)對(duì)稱(chēng)的輔助光，材質(zhì)球上加輕微的反射與高光，這樣渲染出來(lái)更有質(zhì)感，材質(zhì)顏色使用了藍(lán)色調(diào)，原因有三點(diǎn)： 第一，小米剛剛推出的小米11主打的是靚麗的藍(lán)色調(diào)，輕裝上陣，暗藍(lán)色的舞臺(tái)與明亮的小米11放在一起會(huì)毫無(wú)違和感，同時(shí)也會(huì)呈現(xiàn)強(qiáng)烈的對(duì)比效果。 第二，小米有太多白色的商品，暗藍(lán)色的背景會(huì)讓白色商品渲染的更加靚麗。
第三，小米也有很多黑色的商品，偏藍(lán)色的背景能夠避免與黑色調(diào)商品撞色。
最終的的調(diào)色在Ps中完成，舞臺(tái)的中央是亮的，營(yíng)造了一種聚光燈打在舞臺(tái)中央的感覺(jué)，這樣上面放上商品就會(huì)體現(xiàn)一種專(zhuān)屬感，這種效果是在C4D中材質(zhì)球使用漸變色。 另外，暗藍(lán)色的氛圍上有一種神秘的感覺(jué)，這非常符合新品的亮相方式，整個(gè)舞臺(tái)沒(méi)有很強(qiáng)的反射和高光質(zhì)感，是因?yàn)?nbsp;舞臺(tái)的質(zhì)感要弱于商品本身的質(zhì)感，否則容易喧賓奪主。上圖中有質(zhì)感的舞臺(tái)可以增加手機(jī)的寫(xiě)實(shí)投影，視覺(jué)上融合的非常好，下圖中是白色和黑色商品的展示，在暗藍(lán)色的背景下都能夠有效的突出商品。
優(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的比例。 所以記住這句話(huà)， 當(dāng)市場(chǎng)已經(jīng)驗(yàn)證過(guò)的設(shè)計(jì)形式，最好的就是采用它，這樣大概率能避免出錯(cuò)。
調(diào)整文案排版
舊版的文案是3行，看上去會(huì)略顯啰嗦，中間文字有點(diǎn)多余，還占了面積，改為兩行足以，一個(gè)產(chǎn)品名稱(chēng)，一個(gè)產(chǎn)品賣(mài)點(diǎn)。 舊版走馬燈是常規(guī)的原點(diǎn)示意，為了能給商品展示留出相對(duì)更大的面積，新版把走馬燈改為了數(shù)字示意，如上圖右下角2/5的形式，這樣就從4行變?yōu)榱?行，直觀(guān)簡(jiǎn)潔突出。
敲黑板！“查看更多”入口的處理
上文問(wèn)卷調(diào)查中最后一條，運(yùn)營(yíng)同學(xué)希望用戶(hù)能更多的點(diǎn)擊列表中的“查看更多”入口，之所以現(xiàn)在點(diǎn)擊率不高，是因?yàn)樵O(shè)計(jì)樣式是一種輔助形式，下圖所示。 如果按運(yùn)營(yíng)同學(xué)的需求只是去強(qiáng)化入口的視覺(jué)表現(xiàn)，那未必是一個(gè)好的設(shè)計(jì)方案。 想要突出哪里就在視覺(jué)上強(qiáng)化哪里，這是典型的產(chǎn)品思維，而UI設(shè)計(jì)師應(yīng)該結(jié)合整體頁(yè)面結(jié)構(gòu)的交互形式去思考優(yōu)化設(shè)計(jì)。 首先梳理一下用戶(hù)在此頁(yè)面的瀏覽過(guò)程，當(dāng)用戶(hù)打開(kāi)此頁(yè)面時(shí)，第一眼看到的是頭圖，因?yàn)樗钗矍虻?，其次就是開(kāi)始滑動(dòng)頁(yè)面瀏覽商品列表。 那么這時(shí)如果“查看更多”入口，通過(guò)強(qiáng)烈的色彩表現(xiàn)，或者動(dòng)效設(shè)計(jì)的方式，那一定會(huì)有部分用戶(hù)被吸引點(diǎn)擊進(jìn)入“查看更多”頁(yè)面，而用戶(hù)沒(méi)能繼續(xù)向下瀏覽頁(yè)面，就會(huì)看不到平臺(tái)推薦的商品，這不符合產(chǎn)品的設(shè)計(jì)邏輯。 所以，當(dāng)用戶(hù)瀏覽到列表最后的商品了，還沒(méi)有被某個(gè)商品吸引，這時(shí)再出現(xiàn)一個(gè)“查看更多”按鈕入口會(huì)較為合理， 這樣的交互方式才符合用戶(hù)瀏覽的順序，修改后如下圖。 另外，標(biāo)題也做了優(yōu)化，舊版主標(biāo)題與副標(biāo)題上下排列的方式會(huì)占據(jù)更大的面積，而且看起來(lái)還是非常擁擠，再加上主標(biāo)題與副標(biāo)題大小對(duì)比過(guò)于大，也直接導(dǎo)致用戶(hù)視線(xiàn)會(huì)忽略掉副標(biāo)題。 新版修改后縮小主標(biāo)題字號(hào)，排版方式上主副標(biāo)題成左右結(jié)構(gòu)，這樣視覺(jué)上完全不會(huì)遮擋副標(biāo)題的展示，而且最大的好處還釋放了頁(yè)面中的空間，看下圖感受一下。
滿(mǎn)足運(yùn)營(yíng)需求，增加動(dòng)態(tài)iCON
為了滿(mǎn)足運(yùn)營(yíng)同學(xué)希望用戶(hù)更多的進(jìn)入全部新品頁(yè)面的需求，設(shè)計(jì)上除了在商品列表下方增加了“更多新品”按鈕，同時(shí)也在頁(yè)面的右上角增加了一個(gè)進(jìn)入全部新品頁(yè)面的動(dòng)效形式icon。
當(dāng)時(shí)在構(gòu)思這個(gè)icon時(shí)，從一個(gè)視覺(jué)表現(xiàn)很強(qiáng)的動(dòng)態(tài)形式，一直做減法直至非常恰當(dāng)合理有效的融入頁(yè)面當(dāng)中，下圖中最后一個(gè)最簡(jiǎn)潔的設(shè)計(jì)是確定的方案，簡(jiǎn)單的動(dòng)效突出而不突兀，恰到好處。
↓↓
↓↓
動(dòng)態(tài)元素在頁(yè)面中最為吸引人，哪怕是做了弱化處理，所以有時(shí)候在設(shè)計(jì)上有一種策略是，前期用動(dòng)態(tài)的效果去培養(yǎng)用戶(hù)的習(xí)慣和認(rèn)知，當(dāng)對(duì)動(dòng)態(tài)效果已經(jīng)發(fā)揮了作用之后，后面就可以改回非動(dòng)態(tài)效果，這樣就能避免瀏覽頁(yè)面過(guò)程中動(dòng)態(tài)元素的干擾。
總結(jié)：
改版設(shè)計(jì)，不能根據(jù)表面需求去設(shè)計(jì)，一定要找到問(wèn)題的根源所在，然后針對(duì)性的解決這些問(wèn)題，當(dāng)交付設(shè)計(jì)時(shí)，一定還要告訴需求方， 這樣設(shè)計(jì)的目的是什么，解決了我們現(xiàn)有的哪些問(wèn)題。 說(shuō)不出來(lái)設(shè)計(jì)目的，編也要編出來(lái)，這樣至少能鍛煉你的思考力，編的多了自然會(huì)有明確正確的設(shè)計(jì)思考了。
最后
如果你現(xiàn)在打開(kāi)小米商城進(jìn)入小米上新，會(huì)發(fā)現(xiàn)只改了一張背景圖，因?yàn)殚_(kāi)發(fā)還沒(méi)有排上期，但最終會(huì)按此次改版的效果開(kāi)發(fā)上線(xiàn)，所以有時(shí)候遇到這種情況時(shí)，設(shè)計(jì)師還需要結(jié)合當(dāng)前產(chǎn)品的開(kāi)發(fā)框架進(jìn)行適配設(shè)計(jì)。
文章來(lái)源：站酷 作者：吳星辰
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
