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