在日常逛的超市里，其實(shí)也隱藏著一些值得探索的設(shè)計(jì)思維，比如這篇文章里，作者就分享了自己觀察到的“貨架思維”，從貨架布局出發(fā)，結(jié)合來源、分類、原則、作用等幾個(gè)角度分享了自己的經(jīng)驗(yàn)總結(jié)，一起來看看吧。

一、前言

日常都會逛超市，有沒有關(guān)注過超市的布局？有沒有思考過如何應(yīng)用在設(shè)計(jì)之中？這一篇主要分享筆者自己在觀察超市中貨架布局后所總結(jié)的思考方式，希望能跟讀者分享，有其他思路的歡迎溝通。

二、來源與補(bǔ)充概念

這個(gè)思路來源于逛中型超市時(shí)候的布局，發(fā)現(xiàn)無論是大小超市，布局上都有一些規(guī)律。

UX設(shè)計(jì)本身也是類似于超市貨架設(shè)計(jì)布局到路徑的設(shè)計(jì)，換到實(shí)際工作之中就是頁面的布局以及交互的設(shè)計(jì)。

先補(bǔ)充幾個(gè)概念。

1. 貨架——產(chǎn)品功能

貨架是商店中用來展示商品的一種設(shè)備，包括櫥窗、架子、柜臺、箱子等。

近年來，為了適應(yīng)市場競爭和提高顧客購物體驗(yàn)，商店普遍對貨架進(jìn)行改進(jìn)和調(diào)整。

2. 商品——產(chǎn)品信息

是指能將商品與消費(fèi)者聯(lián)系起來的好主意，簡單的說，就是把商品“當(dāng)作什么”來賣給目標(biāo)消費(fèi)者，才是最恰當(dāng)?shù)?。在制造新產(chǎn)品時(shí)，很需要有如何才能將產(chǎn)品賣出去的主意。

三、如何理解

將產(chǎn)品的使用流程具象化為逛超市買商品的流程，讓用戶不僅僅能完成工作，還能更加輕松地完成工作，增加用戶的幸福感。

四、貨品分類——功能分類

1. 業(yè)務(wù)流程

將所有的功能以業(yè)務(wù)流程維度進(jìn)行，就像是進(jìn)超市之后，首先要引導(dǎo)用戶要到需要的大品類到小類別到細(xì)分產(chǎn)品（例如：食品>零食>薯片），而無法直接引導(dǎo)到薯片品類區(qū)域去尋找，這里涉及到全體流程和局部流程。

1）全體流程——以單獨(dú)計(jì)劃為例

建立策略-審核策略-制定計(jì)劃-分配人員與流轉(zhuǎn)-人員執(zhí)行流程-結(jié)果與反饋-數(shù)據(jù)統(tǒng)計(jì)。

2）局部流程——以常規(guī)的審批流程為例

提交申請-審批發(fā)起-審批環(huán)節(jié)-轉(zhuǎn)發(fā)和抄送-審批結(jié)果-通知和反饋。

在B端產(chǎn)品，常常將全體流程與局部流程混合使用。

2. 用戶角色

在B端產(chǎn)品之中，頁面功能的呈現(xiàn)主要依賴于用戶權(quán)限的判斷，除非超級管理員。所有的用戶可以分成兩個(gè)角色：執(zhí)行與管理。

就像是兩個(gè)不同職責(zé)的人，即使是相同喜歡吃零食的，但是一個(gè)喜歡吃薯片一個(gè)喜歡吃餅干，關(guān)注點(diǎn)就會不同。

3. 階段重要性

在超市中有的時(shí)候會看見臨期的產(chǎn)品放在角落，有的時(shí)候會有一些活動(dòng)時(shí)候推出新的產(chǎn)品，甚至看到過傾斜擺放的產(chǎn)品來表現(xiàn)產(chǎn)品。

轉(zhuǎn)換到B端產(chǎn)品，處于不同的生命階段對于功能的設(shè)計(jì)以及優(yōu)化，有著不同的重點(diǎn)：

• 初始：更加注重“新”功能設(shè)計(jì)的與迭代，框架設(shè)計(jì)上更加趨向于將新功能集中，方便管理。
• 成熟：一般是處于最長的時(shí)期，在功能設(shè)計(jì)與分類上更加佳傾向于偏向于業(yè)務(wù)與用戶。
• 衰退：衰退期是一個(gè)產(chǎn)品必經(jīng)的節(jié)點(diǎn)，每一個(gè)產(chǎn)品都會經(jīng)歷，產(chǎn)品處于衰退期有很多原因（比如：競爭力不夠、市場風(fēng)險(xiǎn)、政策原因等等），產(chǎn)品設(shè)計(jì)之上更加要關(guān)注原因從而定制化結(jié)局方案。
• 重生：衰退期直接失敗了到不了這個(gè)階段，這里有個(gè)階段會與初始階段閉環(huán)。

4. 按照功能分類

這里可以簡單分為：“大”功能、“中”功能、“小”頁面。以常見的考勤為例：考勤功能>考勤統(tǒng)計(jì)>考勤工時(shí)。類似于超市中關(guān)于零食的父子級排序：零食>薯片>可比克，也是常見的功能排序與分類方式。

五、設(shè)計(jì)原則

1. 剛進(jìn)入——導(dǎo)航欄快速查找

超市商品是賣給顧客的，只有讓顧客找到自己需要的商品才能實(shí)現(xiàn)銷售，所以一般的超市考慮商品的布局和陳列。

一般在入口都張貼有商品布局分布圖，店內(nèi)貨架上方吊有品類指示牌，以及一些其他圖文標(biāo)識等。也許有些門店調(diào)整，這些早變得面目全非，但它可是無聲的導(dǎo)購員。

換到B端產(chǎn)品功能之中，就像是各種各樣的導(dǎo)航欄、面包屑導(dǎo)航等等。在做這一類設(shè)計(jì)的時(shí)候，一定要保持與其他內(nèi)容的區(qū)分度。還有所有層次要拉開。

2. 閑逛中——快速查看

這里會涉及到鋪貨人員與用戶雙視角，以觀察的超市為例：

• 鋪貨人員：一部分超市的貨架陳列上，為了方便員工自己和供應(yīng)商角度考慮，按供應(yīng)商品牌歸類陳列，于是這個(gè)供應(yīng)商的同類品種的不同規(guī)格、不同價(jià)位、不同功能、不同口味的商品集中在一起，廠家品牌效應(yīng)是得到了集中強(qiáng)化效果，也有利廠家和員工的上貨和定購。
• 真正的用戶：往往在選擇了該品牌的商品后，往前挪兩步，又發(fā)現(xiàn)了不同品牌的同功能、同口味的其他同類產(chǎn)品，又要挑選，甚至丟棄原來的商品，增加了顧客的麻煩，譬如果汁飲料。

換到實(shí)際的項(xiàng)目之中，每一個(gè)貨架都是數(shù)據(jù)組的載體，上面講的雙視角就是產(chǎn)品經(jīng)理和實(shí)際用戶。很多時(shí)候產(chǎn)品經(jīng)理會憑借自己的感覺進(jìn)行功能的設(shè)計(jì)以及排序，建議多聽聽用戶的聲音。

3. 關(guān)聯(lián)性鋪貨——方便查詢

超市內(nèi)的商品陳列，特別強(qiáng)調(diào)商品之間的關(guān)聯(lián)性。這種關(guān)聯(lián)不是簡單地把服裝鞋帽歸類集中在一個(gè)區(qū)域陳列這樣狹隘，畢竟就算是相鄰的陳列也要注意關(guān)聯(lián)陳列，也要注意平穩(wěn)過渡，如潔廁靈地堆緊挨飲料地堆，讓人看了總不舒服吧。

在B端設(shè)計(jì)常見的是功能分區(qū)。就拿復(fù)雜表單的布局來說，往往會按照一些關(guān)聯(lián)維度分成多個(gè)卡片進(jìn)行排列，方便降低用戶查看成本。具體關(guān)聯(lián)項(xiàng)要根據(jù)業(yè)務(wù)形態(tài)或者是用戶的使用流程進(jìn)行劃分。

4. 鋪貨方式——負(fù)空間/剩余空間的利用

超市貨架陳列中有俗話講“貨賣堆山”，貨架、地堆、端頭上的商品必須豐滿陳列。

商品不豐滿，會降低貨架空間利用率，導(dǎo)致倉庫庫存壓力增大，商品不豐滿，容易給顧客留下這些是“賣剩下來的商品”的不好印象，商品不豐滿，影響了商品自己的表現(xiàn)力，影響銷售。

尤其是地堆、端頭等特殊陳列的商品更要豐滿，這些特殊陳列猶如超市的畫龍點(diǎn)睛之筆，是超市的亮點(diǎn)。

不能簡單地把旁邊的商品拉大排面，除非該商品暢銷。為了解決這個(gè)問題有兩種處理方法：在空缺的地方，放置“此貨暫缺”標(biāo)志；或者把其他有關(guān)聯(lián)性的、同時(shí)銷售得比較好的商品填補(bǔ)上。這種操作一定要做記錄，跟蹤要貨，不然容易使該商品在店里“消失”。

在產(chǎn)品設(shè)計(jì)之中，對于負(fù)空間也就是以及剩余空間的利用是常見的場景，比如運(yùn)營插畫設(shè)計(jì)以及空狀態(tài)的插畫呈現(xiàn)。同時(shí)在表格與表單中也有使用的場景，表格中空數(shù)據(jù)一般用“-”橫杠呈現(xiàn)，表單中也有默認(rèn)語句。

5. 鋪貨方式——唯一原則

這里一般指的是ID的唯一性，里面有包含：人名以及商品或者只任務(wù)/計(jì)劃的ID，保證了唯一性，也能保證查詢時(shí)候的準(zhǔn)確度，以及減少開發(fā)時(shí)候的報(bào)錯(cuò)幾率。

6. 結(jié)賬階段——狀態(tài)可見原則

用戶的任務(wù)操作到最后都一定會有一個(gè)結(jié)果，就像是消費(fèi)者去逛超市最后一定會付賬/不買。這里就涉及到了多個(gè)狀態(tài)：

• 中間退出：操作中間會有很多情況會導(dǎo)致退出，根據(jù)業(yè)務(wù)需求可以讓用戶暫存表單或者是直接退出的場景下進(jìn)行二次確認(rèn)。
• 成功交付：具體要重要程度，輕到請?zhí)崾?，重到單頁呈現(xiàn)都有，但是核心都是一樣的，主要是呈現(xiàn)現(xiàn)有的進(jìn)度以及結(jié)果，如果還有剩余的流程也要重新進(jìn)行引導(dǎo)。
• 交付失?。航桓妒〉脑蛴泻芏啵热缬囝~不足或者是網(wǎng)絡(luò)波動(dòng)等等。不僅僅要給到解決方案，還需要給到安慰的語言。

如果是做財(cái)務(wù)或者是與金融/金錢相關(guān)的流程頁面的（尤其是支付類產(chǎn)品），交互頁面涉及到金額的頁面一定要把金額當(dāng)成重點(diǎn)呈現(xiàn)。

六、有什么用

1. 快速拆解業(yè)務(wù)——減少與產(chǎn)品經(jīng)理溝通成本

產(chǎn)品經(jīng)理與設(shè)計(jì)師涉及的方向往往是相反的，一個(gè)向的是公司，一個(gè)向的是用戶。當(dāng)兩者有沖突的時(shí)候，就需要設(shè)計(jì)師拆解業(yè)務(wù)之后去跟產(chǎn)品溝通，從溝通之中尋找到一個(gè)平衡點(diǎn)。

2. 流程化思考/模塊化思考——清晰化設(shè)計(jì)

能夠迅速判斷信息的優(yōu)先級以及信息層級的分布，能夠保持一個(gè)清晰度頭腦。

3. 減少評審頻次——結(jié)構(gòu)化闡述方式

在設(shè)計(jì)評審的時(shí)候，除了頁面的邏輯頁面質(zhì)量外，設(shè)計(jì)思路的闡述也是比較重要的，如果有自己的設(shè)計(jì)思路，而不是只是“好看”，過的概率更高。同時(shí)也能展現(xiàn)自己的專業(yè)度。

七、總結(jié)

本文從來源、分類、原則、作用4個(gè)角度分享自己的經(jīng)驗(yàn)總結(jié)，如果有不同建議的讀者，可以隨時(shí)溝通與交流。