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