改善因首頁介面編排雜亂，導致使用者無法順暢瀏覽商城的問題
» 前言 — 蝦皮現況：
蝦皮購物是近年來竄紅的網路購物平台，主打「輕鬆上架、快速賣出」、「免運費」等行銷手法，與多種類的平價商品吸引了不少使用者下載使用。而蝦皮購物強調直觀的UI設計，以使用者體驗為出發考量，也讓他更早跳脫其他購物平台，成為目前台灣網路電商平台使用量的第一名。
» 設計前的經驗談與討論：
使用蝦皮購物的經驗下來，就消費者的角度而言，在購物操作流程上確實非常簡單明瞭，卻很常在瀏覽首頁時被大量的廣告資訊與色彩編排，讓人看得目昏眼花，影響購物時的體驗。
提出問題:「蝦皮首頁編排與色彩規劃混亂，無法順暢瀏覽商城，容易降低購物慾望。」
» 問題分析：
就蝦皮app的首頁UI介面可以發現幾個問題：
- 各個分類icon的設計風格不一致
在整個app的icon設計中，所使用的風格有的以線條為主，有的以塊面回主，視覺上缺乏一致性，使整體視覺不夠平衡。
其中根據Heuristic evaluation的10大設計原則中也違反
－Match the real world
App 中促銷活動icon若無文字輔助，很難聯想到該按鈕的功能。
例如「活動合集」以標籤作為icon，實際上與活動的聯想力較低。
而搭配icon的名稱也缺乏統一性，時常因應活動而改變名稱。
－Consistency and standards
活動促銷與商品分類的風格，前者為圖像icon，而後者則為寫實照片，這樣的安排降低整體視覺風格的完整度，而icon的設計有過多的細節，呈現時過於擁擠與複雜，視覺上不夠清晰
2. 整體排版與色彩無統一的秩序
瀏覽首頁時雖為直觀式的下滑閱讀，但版面分區不夠精簡，多種顏色的使用也使視覺上讓人覺得混亂。
根據Heuristic evaluation的10大設計原則中違反
— Aesthetic and minimalist design
廣告重複出現在同個介面當中，整體的資訊過於雜亂，應該更精簡為好，廣告區與個人推薦區沒有明顯區隔，在介面的設計上以商業模式為主，而忽略使用者的個人體驗。
» 設計與改善方向：
在不影響付費廣告數量的情況下，調整其介面：
- 色彩方面 —
減少其他廣告外的色彩使用，白色調為底色，並以淺灰調與蝦皮橘為主色，搭配其他四種配色著量使用，營造更簡潔的畫面設計。 - Icon標誌 —
將首頁所需的標誌從新設計，將複雜的線條與照片簡化，整體以線條風格為主，使其更符合蝦皮介面的icon風格，增加首頁整體感。 - 版面設計 —
將首頁各項類別空間區隔開分，減少畫面的擁擠感。
移除重複插播的廣告，及在首頁以佔有連結的蝦皮商城與蝦皮直播，並將廣告區域的排版統一，使其更簡潔統一。
將各項廣告的版面編排設計更一致，同時也已使用者的角度，增加抽屜設計，讓使用者可依喜後將促銷及廣告區域可以收納起，使在瀏覽首頁時可以減少廣告干擾。
根據以上的改善方向，提出更有系統的規劃：
- 蝦皮APP首頁介面 Design System
» 設計成果
BEFOER / AFTER
首頁介面與icon整理：
原先的蝦皮介面，因為大量的廣告數量使得畫面排版和顏色分配呈現凌亂，沒有統整感。
整理過後，以乾淨利落的排版風格為主，減少不必要的色彩使用，並將各項廣告收納於首頁，不減少廣告數量，也使畫面更簡潔。
icon經過統一後，並將分類區域移至首頁上方，方便使用者瀏覽，在畫面上也更有整體感。
廣告版面統一與收納：
廣告的部分，排版規則統一，並視情況做適度調整，維持整體乾淨整潔的風格，同時也增加收納功能，使用者可以根據自己的需求將其分類收起，使畫面更乾淨，在逛商城時降低干擾，也能加強對商品的關注。
統一介面排版系統：
原先所有主題的排版方式無統一規則，看起來沒有規則也缺少整體感。設計過後，整體排版以卡片的方式去做區分，統一圓角及底色，每一個主題看起來更有一致性。另外也將促銷標籤，如免運、快速出貨等標籤的形式統一，呼應icon風格以文字線條為主。
更改後介面總覽
後記
第一次嘗試從心設計電商平台的介面，其中在做規劃時最令我煩惱的點，是要如何在商業模式與整體的視覺上做取捨。廣告的數量無非是賣家與平台的賺取利益的方式，數量的多寡及版面設計上取得平衡，確實需要花不少心力。但也在這次的練習中，學習到在UI設計上的更多要注意的細節，雖然這只是一個小小的練習，可能還有不少需要修正的地方，但也希望以後有機會可以把app的整體風格與架構做得更完整，更有系統。
