每天，有數以億計的消費者通過店鋪選擇心儀的商品。通過這幾年淘寶無線化的沉淀，店鋪的定位不再單純是展示商品的貨架，店鋪已經成為商家展示自家品牌個性和調性的門面。在對商業模式和用戶的分析后，設計師推動產品升級，各位看官且看我們在設計中如何思考。

店鋪的設計服務了誰？

店鋪設計主要為商家和消費者進行服務。他們對店鋪體驗有不同的需求，通過對商家的走訪和消費者的采樣調查，我們發現無線化之后用戶的需求也發生了一些變化。

以設計能力的角度，商家可分為三類：

• A類有較強的設計能力，熟悉店鋪裝修功能，有運營能力的大商家：他們需要店鋪能夠提供拉開店鋪間差距，放大他們優勢的能力。
• B類設計能力一般，使用基礎的裝修功能，能產生內容的商家：他們意識到店鋪美觀度對吸引用戶的作用，他們需要我們能引導和幫助提升店鋪的質感。
• C類沒有設計能力，也不使用裝修功能的小賣家：此類小賣家在淘寶平臺中數量極大，活躍度較低，從平臺整體體驗角度出發，我們可以從基礎能力上提升品質感。并引導他們去使用更多的店鋪功能。

三類商家在手機淘寶中的基數分布

我們希望改版后提升消費者那些體驗：

（1）商家的深度用戶，關注店鋪后定期進入店鋪瀏覽
我們通過提升商家店鋪的瀏覽體驗，使深度用戶能更快速方便的了解商家的最新動態和活動，從而提升轉化。

（2）由外部引導（商品詳情頁，活動頁面，微淘，分享，每日好店……）引流進入店鋪的新用戶
我們通過增強商家的品牌感，來增加消費者對于商家的印象和好感度，進而促進新用戶對商家關注和提升進店停留時間。

產品升級的目標

通過對用戶的分析，店鋪升級的目的我們鎖定在三個方面：

1、提升基礎店鋪質量，豐富店鋪個性

C類商家數量占手淘平臺90%以上，需要提升店鋪的基礎設計和體驗，使手淘平臺整體店鋪的質量有所提升。開放更多商家可定制化內容，使手淘平臺中的店鋪變的多姿多彩，富有個性，間接提升平臺的調性

2、幫助商家提升店鋪品牌價值。

A、B類商家分享了手淘店鋪流量的60%，他們對于提升自己店鋪的品牌感和辨識度的需求比較迫切。

3、增加消費者進店后的停留時間。提升消費者在店鋪中的體驗也是為商家帶來價值的一環。

三類商家在手機淘寶中吸引流量的分布

店鋪數據上，有能力裝修的商家只占很小的一部分，但是它們分享了平臺60%以上的消費者的流量。美觀的，有運營內容的，商品豐富的店鋪更吸引消費者。

數據為我們的設計策略提供了線索：我們可以通過為有設計能力的商家提供更多的能力，改善這些店鋪的調性和瀏覽體驗。并由這些商家覆蓋影響平臺上的消費者的逛店體驗，最終帶動平臺店鋪整體質量的提升。

具體設計，我們做了哪些升級

店鋪框架升級

1.1 店鋪內空間優化

視覺升級前，店鋪首頁搜索欄，店鋪信息，導航欄占據了超過1/3的面積，導致商家真正想要展示的內容比較少。而大面積的功能區域在視覺上搶走了商家內容區塊的熱度，顯得店頭部分非常臃腫且壓抑。

頁面內容的瀏覽和點擊熱度是呈遞減的趨勢。越在頁面下方展示的信息，瀏覽和點擊量越低。我們設計的思路是為商家保留越多的展示空間，越能為商家帶來更多的價值。

我們把搜索欄與店鋪信息的模塊合并，并且降低了導航欄的高度。改動之后使商家首頁可視內容增加了20%，店頭區上移之后使內容更趨與屏幕的中心位置，瀏覽更舒適，并且降低店頭信息帶來的壓抑的感覺。

當用戶在店鋪內瀏覽時，上滑頁面，對次級信息進行瀏覽時之后，我們設計隱藏了下方的工具欄，使消費者瀏覽區域最大化。我們在設計上通過幫助商家多展示信息，增加商家命中消費者的機會，為商家帶來更多的價值。

1.2 細節設計，減少視覺干擾

升級前店鋪的設計中，有很多視覺元素對消費者的瀏覽起到干擾作用。升級后的設計針對這四種干擾在設計上進行了優化：

1. 搜索欄與導航欄形成了大面積的白色柵格。
2. 店招沒有信息的部分產生了太大面積的留白，吸引了用戶視覺焦點。
3. 店鋪Logo和導航欄形成了L型轉折，視覺上產生一定的干擾。
4. 整體視覺風格以橫向元素為主，但原設計豎性元素(如豎向分割線和上下結構的icon+文字的導航欄）和分割線過多，使店鋪視覺的細節上不整體。

升級后的設計針對這四種干擾在設計上進行了優化：

1. 使店招和導航欄成為一個整體，減少一塊分割視覺的色塊。
2. 店頭部分信息合并的設計，減少了無店招無信息區域的留白，使店鋪系統的信息內容更緊湊。
3. 商家的logo和信息處理成為包含在店招內的信息，與導航欄進行了距離上的區隔。使信息內容歸宿更清晰，并解決了視覺上的干擾問題。
4. 原來導航欄中icon+文字的組合樣式設計變更為純文字顯示。通過調研發現，純文字顯示因為減少了用戶讀取的元素似乎能降低用戶理解的時間。減少不必要的分割線。

店頭區域優化設計

店頭部分由搜索欄，商家店招，店鋪信息，導航欄組成。消費者對這塊的信息結構已經非常熟悉，作出過多的調整，會增加用戶的學習成本，因此在功能和信息上不作改動。但在設計上考慮依然有很多可以提升的地方。

2.1 升級前的店招設計特點分析

針對對商家使用店招的情況，可分為以下幾類：

• A?類商家大都上傳了適合自己品牌特點和裝修風格的店招圖片。部分商家自主上傳的店招內含有很多促銷信息。
• B 類商家大部分使用默認的店招圖片，小部分商家，因為設計能力上的欠缺，上傳的店招在設計感上偏弱。
• C?類商家不使用上傳店招的功能，使用系統默認店招。

我們認為店招是融入店鋪整體裝修，加強店鋪個性化的視覺元素。為對于不同類型的商家，我們為他們定制了不同的店招設計方案。

2.2 官方店招設計

如何讓一些沒有設計能力的中小賣家能方便的提升店鋪的品質，是設計增加官方店招的原動力?，F在線上的默認店招只有3個，也都是比較模糊的抽象圖片，沒有裝修的賣家在使用這些默認店招圖片后，顯得千篇一律。

設計的目標要為新版淘寶營造一種店鋪豐富多彩的視覺感官，店招和tab氛圍顏色就是其中重要的切入點。

對于店招的設計原先想從商品品類的緯度入手，但是進過對一些店鋪的觀察，發現我們的目標用戶C店小賣家覆蓋了全網的各種品類，并且很多賣家在店內經營的商品跨度很大，單單以類目來歸類店鋪視覺風格不是很妥當。之后我就思考能否換個角度從目標人群來切入設計：

• 男性－潮流
• 男性－穩重
• 女生－可愛
• 女人－成熟

再從店鋪氛圍入手增加一些緯度：

• 家庭－溫馨
• 科技－科幻
• 自然－清新

最終篩選店招的設計將在潮流，穩重，可愛，成熟，溫馨，科幻，清新這7個緯度中進行設計。

2.3 導航欄配色開放

我們最初設想，在色彩上使平臺中的店鋪設計變的豐富。在固有的店鋪信息結構中，以色彩來為了提高商家的特色和店鋪的品牌感。設計中我們發現導航欄顏色可以配合店招或店鋪內容的顏色，使店鋪整體視覺更加整體，也能在這塊透出商家的品牌顏色。

商家通過旺鋪可以設置自己想要的導航欄顏色，可以與店招或者店鋪內容匹配?；谘b修后臺我們與開發合作設計了自動化配色功能。

我們依據之前的商家用戶的分級，為三類商家量身定制了方便的定制功能：

• C類商家使用默認店招，那么我們給他們提供默認的導航欄樣式
• B類商家，若沒有能力設計店招，可以選擇官方提供的店招并推薦給他們相匹配的導航欄配色。
• A類和B類商家，有能力自主上傳店招的，我們通過算法為他們自動生成配色，若不能滿足他們的需求，還可以自行選擇顏色。為店鋪帶來更多的視覺感受。

我們設計自動化配色導航欄方案前，通過一些測試圖片來對店招圖片和導航欄顏色進行配對實驗,從而得到一個大致的規則供技術同學參考：

以HSB緯度，連續的色域來判斷連續的色彩區域是否可用。當顏色在以下 H: 0°－ 359° ，S:30% －80% ，B: 80% －40% 時顏色明度與飽和度適中，比較適合直接應用。當抓取到的顏色在此范圍之外，我們通過調整H和B值來使生成的顏色接近此色域。

同時系統會判斷導航欄顏色為深色，適配文字顏色為淺色，反之為深色。

我們把導航欄顏色設計成為區分店鋪的重要標識。為了在感官上加強店鋪的品牌特色，消費者在店鋪內瀏覽時對顏色的體驗是一致的。用戶在瀏覽操作時導航欄顏色將配制到搜索區域的背景上，成為店鋪氛圍的一部分。

擴展商家品牌展示專區

之前店鋪產品的設計總是在考慮如何幫助商家展示和銷售貨品，如何讓消費者能在店鋪中逛的方便。隨著內容化運營的加強，店鋪吸引消費者的形式也在發生轉變。如何為商家增值，增加消費者對商家的認知度和粘性，是我們設計品牌專區的原動力。我們希望引導有能力的商家制造出更多的內容，來提升自己的品牌價值。
在首頁下拉之后，我們設計為商家開辟了品牌宣導的專區。作為店鋪首頁的延伸閱讀展示，有設計能力的商家可以在這里自己定制形式多樣宣導內容。如果說店鋪首頁是店鋪的門面和貨柜，那么品牌展示專區就是商家的大櫥窗。

這里可以承載商家的宣傳大片、新品海報、品牌歷史。

這里可以承載商品的虛擬體驗，也可以在大促時成為商家與消費者互動游戲的空間。

引導設計能力弱的商家去制作品牌專區內容

在配合商家制作品牌專區的內容時設計能力稍弱的商家對于區域設計的把控能力比較差。從保證專區設計質量的角度考慮，我們保證設計的整體質量。我們為這類商家提供了可套用的模版和規則。在一定的規則下商家可根據自己想要宣導的內容套用我們的設計模版，確定品牌專區能達到更好的視覺效果。

在商家制作設計資源上，也盡量從商家的角度去考慮，以降低商家的制作成本。

例如在品牌專區內展示視頻的設計，我們最初希望商家能夠提供9:16豎屏，與淘寶二樓一千零一夜相同尺寸的視頻資源。但是在與商家溝通中，不論大小品牌的商家都難以重新訂制視頻。我們設計了3:2的視頻裁切尺寸，商家能從橫向視頻中截取比較好的內容，減少了重新制作的成本。當然商家也能按尺寸拍攝適合的視頻資源，以達到更好的效果。

店鋪設計中的考量

設計注重商業目的的傳達

我們通常比較關注設計帶給用戶好的體驗，而往往忽視去了解產品商業模式和目標。事實上，商業模式決定了產品的定位，決定了用戶能看到什么信息。設計師通過對商業目標的解讀，在設計向用戶傳遞商業信息，在體驗上幫助用戶沉浸其中。用戶群體、需求的變更，使用習慣的形成又影響了商業模式的改變，影響設計的改變。因此設計從來都不能脫離商業化，能更好傳遞商業信息的設計才更有價值。

店鋪的改版設計中，我們注重傳遞商家的品牌感，增加店鋪可閱讀區域，希望使消費者能明顯感知商家的傳遞的商業信息，并通過擴展的功能，幫助平臺提高收益。

設計中考慮減少商家成本

每次視覺和產品升級商家都會跟隨我們的設計進行大量的設計。在這次視覺升級中，我們動用了一些小花招，使商家的負擔不再那么重了。店頭部分的改造，商家可以去選擇官方的店招和配色，即使不做任何改動，我們也能適配到最佳效果。而新版店招的尺寸雖然有了一些調整，但是我們通過智能的算法，幫助商家計算導航欄的顏色，使店鋪裝修更智能。

降低改版升級帶給用戶學習成本

產品迭代對于用戶最大的影響在于體驗的改變，用戶對產品信息的位置和功能使用經過多個版本已經形成了一定的習慣。此次升級只對原有信息進行了刪減和整合，去除不重要的信息，保留用戶的瀏覽習慣。

寫在最后

此次改版升級只是我們對增強店鋪內容化嘗試的第一步。在未來，我們將密切關注用戶的使用情況和商業模式的變更，對店鋪內的體驗進行設計和升級，希望淘寶無線端店鋪的體驗能更好，滿足消費者和商家能在手淘店鋪中更方便自然的各取所需。

相關文章

淘寶2017設計升級：手淘首次以設計為主導的版本升級

提示信息的情感化設計，做一個有故事的淘寶

淘寶2017的商品詳情改版設計：從商業目標維度去挖掘設計改進方向

作者：魚也

來源：微信公眾號【淘寶用戶體驗設計】