項目背景
零售通是阿里巴巴B2B事業(yè)群針對線下零售商店推出的解決方案，與優(yōu)秀的本地供應商合作，為零售店提供品質好貨，升級社區(qū)零售店的便民功能。簡單來說，阿里零售通就是讓零售店老板們進貨變得像我們上淘寶購物一樣方便，并且同時獲得阿里生態(tài)的賦能支持。
用戶人群
零售通面對的是一群很特別的人群 — 零售店店主，而且前期主要服務三四線城市的小店店主，零售店主既不同于C類買家，不以自己的喜好做購買決策；同時也不同于大型B類買家，購買決策流程也不像大B類冗長。 作為傳統(tǒng)線下場景，零售店有許多自己的特點，例如電商經驗弱、社區(qū)化、關注好銷…等等，零售通將針對這些特點發(fā)揮自身的線上、大數據優(yōu)勢幫助零售店主，將傳統(tǒng)的線下小店，打造成最具人氣的時尚小店。
基于用戶心智模型的視覺策略
零售通的主要用戶是三四線城市的零售店主，是典型的傳統(tǒng)線下行業(yè)從業(yè)者：他們的行業(yè)專業(yè)度通常并不高，卻擁有較大的決策權（往往自己就是老板），同時傳統(tǒng)零售普遍“觸網”程度低，對電商領域陌生；所以，要讓這樣的用戶群欣然接受零售通這樣一個全新的產品，設計上就需要盡可能降低用戶認知成本，讓我們的產品看起來更符合用戶直接的心智模型。
基于這樣的思路，我們在視覺策略上著重強調了產品對用戶的熟悉感和引導性。在PC、APP的首頁設計過程中，我們大量植入了貨架、小店門頭、掛板等小店熟悉的視覺元素，我們希望用戶一打開零售通頁面，就如同打開了一間有溫度的、滿是貨品的小店。
核心圖形元素定義
基于用戶心智模型，偏場景化的設計方向幾乎是一開始就確定了的，但要讓零售店的存在感貫穿眾多的頁面，在進行恰當的場景化之外，還必須提煉出合適的核心圖形元素。列舉比較了眾多小店物件元素之后，我們發(fā)現(xiàn)小店的頂棚幾乎是最直觀、認可度最高的店鋪元素，我們決定不再舍近求遠尋找其它圖形符號，而是單刀直入的解構、挖掘小店頂棚的圖形語義。
從小店頂棚的圖形出發(fā)，我們發(fā)掘了圖形的三個語義層級：基礎的頂棚圖形、解構的圓角圖形、抽象的微笑弧度。這樣的由外圍至內核的語義劃分不僅指導了之后的整體視覺語言，也十分符合我們初期希望打造“最具人氣的時尚小店”的目標。
無論你打開PC首頁還是APP首頁，波浪狀的頂棚圖形都會第一時間映入眼簾，讓你感覺一個小店被打開了，因為你的光臨而打開了。
為了給用戶更強的店鋪帶入感，我們在給頁面搭起頂棚之外，還置入了大量與店主息息相關的圖形元素呼應每一個具體的使用場景：例如用貨架展示offer、掛板發(fā)布優(yōu)惠、打票機抽出進貨單、紙質感的虛線分割，等等。所有這些，都是為了小店店主能第一時間消除陌生感，恍如在自己的店鋪里打理、進貨。
以頂棚元素為主的場景化圖形為頁面鋪墊了整體氛圍，但還需要有更簡化更基礎的圖形才能讓頂棚元素更全面的融入頁面，我們發(fā)現(xiàn)頂棚其實可以看做一個二方連續(xù)圖形，進而可以拆解出一個個基礎單元圖形，這樣的單元圖形簡單而有親切感，可以作為很好的基礎輔助圖形。
頂棚解構而來的基礎圖形如果進一步簡化，恰好就是一條溫暖的，流暢的微笑曲線，這樣的線條正是熟人關系、社區(qū)化的零售小店喜聞樂見的。所以這條曲線如同最細小的血細胞，流淌在零售通首頁等產品頁面中。
PC首頁大頭部直接定制了一個平滑的大弧，為每一個新打開頁面的用戶送上一個親切的笑臉。
在頁面的許多細節(jié)，都能不經意間遇到這條弧度，就像見到到一個老朋友，等在那給你的會心一笑。
引導：動效與暗示
電商首頁的一個普遍特點是大部分流量幾乎都是從頂部搜索和類目導航分流離開，而頁面下方的大量樓層常常鮮有問津~~ 為了盡可能避免過多流量從頭屏流失，留住那些當前并不那么追求效率的用戶，引導他們在第二三屏逛起來，我們在頭屏藏了一些小心思：所有的模塊微動效，一律從上往下運動，給用戶一種潛移默化的意識 — 你應該在這個頁面繼續(xù)向下瀏覽。
情感化設計
零售通情感化設計的初衷是想給小店店主一種貼心、省心、安心的形象。傳遞一種省心、省力、省時、省錢的感覺。開始設計4個手指形象分別是“心心”服務員、“力力”搬運工、“時時”送貨員、“錢錢”收銀員。以手指為形象來傳遞“海量商品觸手可及”的體驗感。最后將可愛的“心心”定為主要形象為店主服務。 在情感化傳遞的同時，細節(jié)上悄悄的放入小心機，比如：啟動頁上給心心加上了雞年氛圍的小帽子，同時將零售通的品牌logo融入其中。
小結
零售通不僅對于零售店用戶們是一個全新的事物，對于我們自身也是一個全新的挑戰(zhàn)，在零售通這個新面孔的視覺設計過程中，我們盡可能的對用戶友好，用熟悉的場景給用戶以親切感和友好的氛圍。新零售的趨勢近在眼前，零售通將繼續(xù)通過有溫度的設計、友好的體驗，將阿里電商資源、大數據信息帶給千萬零售店主，服務千萬小店。
原文鏈接：http://www.aliued.cn/2017/04/28/%E6%9C%80%E7%86%9F%E6%82%89%E7%9A%84%E6%96%B0%E9%9B%B6%E5%94%AE-%E9%9B%B6%E5%94%AE%E9%80%9A%E4%B9%B0%E5%AE%B6%E9%A6%96%E9%A1%B5%E8%AE%BE%E8%AE%A1%E5%B0%8F%E7%BB%93.html
