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

店鋪的設(shè)計服務(wù)了誰？

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

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

• A類有較強的設(shè)計能力，熟悉店鋪裝修功能，有運營能力的大商家：他們需要店鋪能夠提供拉開店鋪間差距，放大他們優(yōu)勢的能力。
• B類設(shè)計能力一般，使用基礎(chǔ)的裝修功能，能產(chǎn)生內(nèi)容的商家：他們意識到店鋪美觀度對吸引用戶的作用，他們需要我們能引導(dǎo)和幫助提升店鋪的質(zhì)感。
• C類沒有設(shè)計能力，也不使用裝修功能的小賣家：此類小賣家在淘寶平臺中數(shù)量極大，活躍度較低，從平臺整體體驗角度出發(fā)，我們可以從基礎(chǔ)能力上提升品質(zhì)感。并引導(dǎo)他們?nèi)ナ褂酶嗟牡赇伖δ堋?/li>

三類商家在手機淘寶中的基數(shù)分布

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

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

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

產(chǎn)品升級的目標(biāo)

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

1、提升基礎(chǔ)店鋪質(zhì)量，豐富店鋪個性

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

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

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

3、增加消費者進店后的停留時間。提升消費者在店鋪中的體驗也是為商家?guī)韮r值的一環(huán)。

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

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

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

具體設(shè)計，我們做了哪些升級

店鋪框架升級

1.1 店鋪內(nèi)空間優(yōu)化

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

頁面內(nèi)容的瀏覽和點擊熱度是呈遞減的趨勢。越在頁面下方展示的信息，瀏覽和點擊量越低。我們設(shè)計的思路是為商家保留越多的展示空間，越能為商家?guī)砀嗟膬r值。

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

當(dāng)用戶在店鋪內(nèi)瀏覽時，上滑頁面，對次級信息進行瀏覽時之后，我們設(shè)計隱藏了下方的工具欄，使消費者瀏覽區(qū)域最大化。我們在設(shè)計上通過幫助商家多展示信息，增加商家命中消費者的機會，為商家?guī)砀嗟膬r值。

1.2 細(xì)節(jié)設(shè)計，減少視覺干擾

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

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

升級后的設(shè)計針對這四種干擾在設(shè)計上進行了優(yōu)化：

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

店頭區(qū)域優(yōu)化設(shè)計

店頭部分由搜索欄，商家店招，店鋪信息，導(dǎo)航欄組成。消費者對這塊的信息結(jié)構(gòu)已經(jīng)非常熟悉，作出過多的調(diào)整，會增加用戶的學(xué)習(xí)成本，因此在功能和信息上不作改動。但在設(shè)計上考慮依然有很多可以提升的地方。

2.1 升級前的店招設(shè)計特點分析

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

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

我們認(rèn)為店招是融入店鋪整體裝修，加強店鋪個性化的視覺元素。為對于不同類型的商家，我們?yōu)樗麄兌ㄖ屏瞬煌牡暾性O(shè)計方案。

2.2 官方店招設(shè)計

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

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

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

• 男性－潮流
• 男性－穩(wěn)重
• 女生－可愛
• 女人－成熟

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

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

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

2.3 導(dǎo)航欄配色開放

我們最初設(shè)想，在色彩上使平臺中的店鋪設(shè)計變的豐富。在固有的店鋪信息結(jié)構(gòu)中，以色彩來為了提高商家的特色和店鋪的品牌感。設(shè)計中我們發(fā)現(xiàn)導(dǎo)航欄顏色可以配合店招或店鋪內(nèi)容的顏色，使店鋪整體視覺更加整體，也能在這塊透出商家的品牌顏色。

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

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

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

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

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

同時系統(tǒng)會判斷導(dǎo)航欄顏色為深色，適配文字顏色為淺色，反之為深色。

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

擴展商家品牌展示專區(qū)

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

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

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

引導(dǎo)設(shè)計能力弱的商家去制作品牌專區(qū)內(nèi)容

在配合商家制作品牌專區(qū)的內(nèi)容時設(shè)計能力稍弱的商家對于區(qū)域設(shè)計的把控能力比較差。從保證專區(qū)設(shè)計質(zhì)量的角度考慮，我們保證設(shè)計的整體質(zhì)量。我們?yōu)檫@類商家提供了可套用的模版和規(guī)則。在一定的規(guī)則下商家可根據(jù)自己想要宣導(dǎo)的內(nèi)容套用我們的設(shè)計模版，確定品牌專區(qū)能達(dá)到更好的視覺效果。

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

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

店鋪設(shè)計中的考量

設(shè)計注重商業(yè)目的的傳達(dá)

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

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

設(shè)計中考慮減少商家成本

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

降低改版升級帶給用戶學(xué)習(xí)成本

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

寫在最后

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

相關(guān)文章

淘寶2017設(shè)計升級：手淘首次以設(shè)計為主導(dǎo)的版本升級

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

淘寶2017的商品詳情改版設(shè)計：從商業(yè)目標(biāo)維度去挖掘設(shè)計改進方向

作者：魚也

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