來自：吳星辰?互聯(lián)網(wǎng)設(shè)計(jì)幫??今天
前言
近期改版了小米商城APP的新品板塊匣屡，改版的過程總結(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)營板塊改版，很大一部分原因是數(shù)據(jù)不好或不夠美觀需要提升視覺案淋，下面是改版前的截圖和調(diào)研UI設(shè)計(jì)滿意度的結(jié)果座韵。
調(diào)研的結(jié)果中其實(shí)前六項(xiàng)都是在講一件事，就是頭圖不夠好看踢京，最后一個(gè)是運(yùn)營的需求誉碴，查看更多入口點(diǎn)擊率過低，希望能提升打開率瓣距，這點(diǎn)的改版下面會(huì)詳細(xì)講解黔帕。
從設(shè)計(jì)的角度找問題根源
舊版頭圖第一眼看過去，色調(diào)蹈丸、質(zhì)感其實(shí)說的過去蹬屹，但如果仔細(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í)感奇钞、不夠簡潔，這些就是普通用戶說不出哪里出了問題的語言表達(dá)漂坏。
作為設(shè)計(jì)師應(yīng)該能夠從用戶的語言中景埃，通過專業(yè)的設(shè)計(jì)角度去挖掘問題的根源。
比如不夠簡潔顶别，是因?yàn)楸尘爸须s亂的東西太多谷徙；容易視覺疲勞是因?yàn)樯唐放c空間的關(guān)系沒有掌握好；主光源在左側(cè)驯绎，不容易營造商品專屬舞臺(tái)的感覺完慧，而且使用暖色調(diào)還會(huì)增加視覺疲勞感。
找到問題的根源后剩失，首先是改善展示商品的舞臺(tái)屈尼，解決商品空間上展示的問題，渲染出一張干凈的背景拴孤，不會(huì)有雜亂的感受鸿染，然后通過燈光和舞臺(tái)材質(zhì)質(zhì)感打造商品的專屬感衷咽。
了解商品才能更好的打造舞臺(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ì)感的外框，加上新品商品的屬性較為適合有神秘感的氛圍，所以綜合來看我們需要一個(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ù)祟同，其最終目的是給觀眾更好的視覺體驗(yàn)。
回到舊版的案例中理疙，商品放置空間的后方晕城，就等于給用戶買的是最便宜的后排座位，后排視角當(dāng)然不會(huì)有好的視覺體檢窖贤，第一排的C位才應(yīng)該是我們?yōu)橛脩魷?zhǔn)備的視角砖顷。
演唱會(huì)舞臺(tái)
舞臺(tái)中的主光源一定是對(duì)稱、居中打在舞臺(tái)中央的主之，因?yàn)檫@樣觀眾的視線能更好的聚焦在演員身上择吊，并且能渲染氛圍，呈現(xiàn)一種專屬感槽奕。
所以我們舊版案例中主光源在左側(cè)几睛，右側(cè)是投影，會(huì)導(dǎo)致用戶的視覺焦點(diǎn)很分散粤攒，從而不能把視線有效的引導(dǎo)在商品本身所森。
C4D渲染舞臺(tái)
通過上面總結(jié)分析，我們大概對(duì)舞臺(tái)有了一個(gè)清晰的設(shè)計(jì)思路夯接，背景用暗色系讓視覺更好的聚焦在商品身上焕济，有反射高光質(zhì)感能與手機(jī)產(chǎn)品形成呼應(yīng)，空間上給用戶近距離的視覺體驗(yàn)盔几，好了打開C4D干...
C4D渲染舞臺(tái)
非常簡單的一個(gè)場(chǎng)景晴弃，使用一個(gè)階梯的圓柱體，放個(gè)背景逊拍，正前方放一個(gè)主光源上鞠，左右兩個(gè)對(duì)稱的輔助光，材質(zhì)球上加輕微的反射與高光芯丧，這樣渲染出來更有質(zhì)感芍阎，材質(zhì)顏色使用了藍(lán)色調(diào)，原因有三點(diǎn)：
第一缨恒，小米剛剛推出的小米11主打的是靚麗的藍(lán)色調(diào)谴咸，輕裝上陣轮听，暗藍(lán)色的舞臺(tái)與明亮的小米11放在一起會(huì)毫無違和感，同時(shí)也會(huì)呈現(xiàn)強(qiáng)烈的對(duì)比效果岭佳。
第二血巍，小米有太多白色的商品，暗藍(lán)色的背景會(huì)讓白色商品渲染的更加靚麗驼唱。
第三藻茂，小米也有很多黑色的商品，偏藍(lán)色的背景能夠避免與黑色調(diào)商品撞色玫恳。
最終舞臺(tái)效果圖
最終的的調(diào)色在Ps中完成辨赐，舞臺(tái)的中央是亮的，營造了一種聚光燈打在舞臺(tái)中央的感覺京办，這樣上面放上商品就會(huì)體現(xiàn)一種專屬感掀序，這種效果是在C4D中材質(zhì)球使用漸變色。
另外惭婿，暗藍(lán)色的氛圍上有一種神秘的感覺不恭，這非常符合新品的亮相方式，整個(gè)舞臺(tái)沒有很強(qiáng)的反射和高光質(zhì)感财饥，是因?yàn)?b>舞臺(tái)的質(zhì)感要弱于商品本身的質(zhì)感换吧，否則容易喧賓奪主。
新舊對(duì)比
上圖中有質(zhì)感的舞臺(tái)可以增加手機(jī)的寫實(shí)投影钥星，視覺上融合的非常好沾瓦，下圖中是白色和黑色商品的展示，在暗藍(lán)色的背景下都能夠有效的突出商品谦炒。
黑白商品圖展示
優(yōu)化頭圖比例
新版與舊版還有一個(gè)最大的區(qū)別贯莺，新版頭圖的比例縮小至1:1，為什么是這個(gè)比例宁改？舊版的長圖為什么不合適缕探？
舊版長圖占據(jù)首屏巨大的面積，這種形式一般不適合常態(tài)化功能模塊还蹲，（常態(tài)化是指產(chǎn)品中一直存在的功能模塊）長圖或者整屏適用于非 常態(tài)化強(qiáng)運(yùn)營的活動(dòng)模塊爹耗，比如節(jié)日活動(dòng)，節(jié)日過后就會(huì)下架谜喊。
小米上新板塊是首頁中常態(tài)的功能模塊潭兽，太大的展示面積其實(shí)浪費(fèi)了首屏空間，之所以用1:1比例锅论，是因?yàn)榉治隽巳舾蓚€(gè)競(jìng)品的上新模塊都采用的是1:1的比例。
所以記住這句話楣号，當(dāng)市場(chǎng)已經(jīng)驗(yàn)證過的設(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)榱?行，直觀簡潔突出弥虐。
敲黑板扩灯！“查看更多”入口的處理
上文問卷調(diào)查中最后一條，運(yùn)營同學(xué)希望用戶能更多的點(diǎn)擊列表中的“查看更多”入口霜瘪，之所以現(xiàn)在點(diǎn)擊率不高珠插，是因?yàn)樵O(shè)計(jì)樣式是一種輔助形式，下圖所示颖对。
如果按運(yùn)營同學(xué)的需求只是去強(qiáng)化入口的視覺表現(xiàn)捻撑，那未必是一個(gè)好的設(shè)計(jì)方案。
想要突出哪里就在視覺上強(qiáng)化哪里惜互，這是典型的產(chǎn)品思維布讹，而UI設(shè)計(jì)師應(yīng)該結(jié)合整體頁面結(jié)構(gòu)的交互形式去思考優(yōu)化設(shè)計(jì)。
首先梳理一下用戶在此頁面的瀏覽過程训堆，當(dāng)用戶打開此頁面時(shí)描验，第一眼看到的是頭圖，因?yàn)樗钗矍虻目佑悖浯尉褪情_始滑動(dòng)頁面瀏覽商品列表膘流。
那么這時(shí)如果“查看更多”入口，通過強(qiáng)烈的色彩表現(xiàn)鲁沥，或者動(dòng)效設(shè)計(jì)的方式呼股，那一定會(huì)有部分用戶被吸引點(diǎn)擊進(jìn)入“查看更多”頁面，而用戶沒能繼續(xù)向下瀏覽頁面画恰，就會(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ù)更大的面積罚舱，而且看起來還是非常擁擠，再加上主標(biāo)題與副標(biāo)題大小對(duì)比過于大绎谦，也直接導(dǎo)致用戶視線會(huì)忽略掉副標(biāo)題管闷。
新版修改后縮小主標(biāo)題字號(hào)，排版方式上主副標(biāo)題成左右結(jié)構(gòu)燥滑，這樣視覺上完全不會(huì)遮擋副標(biāo)題的展示渐北，而且最大的好處還釋放了頁面中的空間，看下圖感受一下铭拧。
滿足運(yùn)營需求赃蛛，增加動(dòng)態(tài)iCON
為了滿足運(yùn)營同學(xué)希望用戶更多的進(jìn)入全部新品頁面的需求，設(shè)計(jì)上除了在商品列表下方增加了“更多新品”按鈕搀菩，同時(shí)也在頁面的右上角增加了一個(gè)進(jìn)入全部新品頁面的動(dòng)效形式icon呕臂。
當(dāng)時(shí)在構(gòu)思這個(gè)icon時(shí)，從一個(gè)視覺表現(xiàn)很強(qiáng)的動(dòng)態(tài)形式肪跋，一直做減法直至非常恰當(dāng)合理有效的融入頁面當(dāng)中歧蒋，下圖中最后一個(gè)最簡潔的設(shè)計(jì)是確定的方案，簡單的動(dòng)效突出而不突兀州既，恰到好處谜洽。
??? ? ??↓↓
??? ? ??↓↓
? ? ? ? ↓↓
做減法的icon
動(dòng)態(tài)元素在頁面中最為吸引人，哪怕是做了弱化處理吴叶，所以有時(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)效果实束，這樣就能避免瀏覽頁面過程中動(dòng)態(tài)元素的干擾。
總結(jié)：
改版設(shè)計(jì)逊彭，不能根據(jù)表面需求去設(shè)計(jì)咸灿，一定要找到問題的根源所在，然后針對(duì)性的解決這些問題侮叮，當(dāng)交付設(shè)計(jì)時(shí)避矢，一定還要告訴需求方， 這樣設(shè)計(jì)的目的是什么，解決了我們現(xiàn)有的哪些問題审胸。
說不出來設(shè)計(jì)目的分尸，編也要編出來，這樣至少能鍛煉你的思考力歹嘹，編的多了自然會(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)化，感謝白胀。
