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

一、前言

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

二、來源與補充概念

這個思路來源于逛中型超市時候的布局，發現無論是大小超市，布局上都有一些規律。

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

先補充幾個概念。

1. 貨架——產品功能

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

近年來，為了適應市場競爭和提高顧客購物體驗，商店普遍對貨架進行改進和調整。

2. 商品——產品信息

是指能將商品與消費者聯系起來的好主意，簡單的說，就是把商品“當作什么”來賣給目標消費者，才是最恰當的。在制造新產品時，很需要有如何才能將產品賣出去的主意。

三、如何理解

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

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

1. 業務流程

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

1）全體流程——以單獨計劃為例

建立策略-審核策略-制定計劃-分配人員與流轉-人員執行流程-結果與反饋-數據統計。

2）局部流程——以常規的審批流程為例

提交申請-審批發起-審批環節-轉發和抄送-審批結果-通知和反饋。

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

2. 用戶角色

在B端產品之中，頁面功能的呈現主要依賴于用戶權限的判斷，除非超級管理員。所有的用戶可以分成兩個角色：執行與管理。

就像是兩個不同職責的人，即使是相同喜歡吃零食的，但是一個喜歡吃薯片一個喜歡吃餅干，關注點就會不同。

3. 階段重要性

在超市中有的時候會看見臨期的產品放在角落，有的時候會有一些活動時候推出新的產品，甚至看到過傾斜擺放的產品來表現產品。

轉換到B端產品，處于不同的生命階段對于功能的設計以及優化，有著不同的重點：

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

4. 按照功能分類

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

五、設計原則

1. 剛進入——導航欄快速查找

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

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

換到B端產品功能之中，就像是各種各樣的導航欄、面包屑導航等等。在做這一類設計的時候，一定要保持與其他內容的區分度。還有所有層次要拉開。

2. 閑逛中——快速查看

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

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

換到實際的項目之中，每一個貨架都是數據組的載體，上面講的雙視角就是產品經理和實際用戶。很多時候產品經理會憑借自己的感覺進行功能的設計以及排序，建議多聽聽用戶的聲音。

3. 關聯性鋪貨——方便查詢

超市內的商品陳列，特別強調商品之間的關聯性。這種關聯不是簡單地把服裝鞋帽歸類集中在一個區域陳列這樣狹隘，畢竟就算是相鄰的陳列也要注意關聯陳列，也要注意平穩過渡，如潔廁靈地堆緊挨飲料地堆，讓人看了總不舒服吧。

在B端設計常見的是功能分區。就拿復雜表單的布局來說，往往會按照一些關聯維度分成多個卡片進行排列，方便降低用戶查看成本。具體關聯項要根據業務形態或者是用戶的使用流程進行劃分。

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

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

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

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

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

在產品設計之中，對于負空間也就是以及剩余空間的利用是常見的場景，比如運營插畫設計以及空狀態的插畫呈現。同時在表格與表單中也有使用的場景，表格中空數據一般用“-”橫杠呈現，表單中也有默認語句。

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

這里一般指的是ID的唯一性，里面有包含：人名以及商品或者只任務/計劃的ID，保證了唯一性，也能保證查詢時候的準確度，以及減少開發時候的報錯幾率。

6. 結賬階段——狀態可見原則

用戶的任務操作到最后都一定會有一個結果，就像是消費者去逛超市最后一定會付賬/不買。這里就涉及到了多個狀態：

• 中間退出：操作中間會有很多情況會導致退出，根據業務需求可以讓用戶暫存表單或者是直接退出的場景下進行二次確認。
• 成功交付：具體要重要程度，輕到請提示，重到單頁呈現都有，但是核心都是一樣的，主要是呈現現有的進度以及結果，如果還有剩余的流程也要重新進行引導。
• 交付失?。航桓妒〉脑蛴泻芏?，比如余額不足或者是網絡波動等等。不僅僅要給到解決方案，還需要給到安慰的語言。

如果是做財務或者是與金融/金錢相關的流程頁面的（尤其是支付類產品），交互頁面涉及到金額的頁面一定要把金額當成重點呈現。

六、有什么用

1. 快速拆解業務——減少與產品經理溝通成本

產品經理與設計師涉及的方向往往是相反的，一個向的是公司，一個向的是用戶。當兩者有沖突的時候，就需要設計師拆解業務之后去跟產品溝通，從溝通之中尋找到一個平衡點。

2. 流程化思考/模塊化思考——清晰化設計

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

3. 減少評審頻次——結構化闡述方式

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

七、總結

本文從來源、分類、原則、作用4個角度分享自己的經驗總結，如果有不同建議的讀者，可以隨時溝通與交流。