每日干货分享

B端零售門店服務App-導航和布局


由於上文將產品的信息架構做了全新的復盤。所以在原型開始之前對導航和一級頁面重新梳理,這是一個很重要的需要反覆推敲的過程。在平時的工作過程中,頁面布局一般相對穩定使用周期長難以修改,這與產品定位、迭代方向和設計團隊響應速度等有關。所以在產品設計之初在信息架構確認后,應反覆推敲來確認交互設計師將業務需求轉化為用戶交互界面的第一步。幾年的工作積累現在回過頭來看,大多數的產品導航設計和頁面布局是過於急躁的。如何才能定義好合適的導航,理性的設計出更合理的頁面布局?首先得搞懂什麼是導航?什麼是頁面布局?

導航

導航是信息架構界面可視化第一步。通過信息架構可以很清晰的得到導航的設計方案。再配合合理的首頁布局,就可以完整第一次的導航系統。檢驗導航設計是否合理,需要產品設計人員以外的同事或者目標用戶協助進行主要的任務體驗。在用戶操作流程設計后,則可以測試出整個流程設計的使用感受。

界面布局

界面布局是建立在對界面任務理解透徹后開始的。界面任務的梳理依據是用戶任務和產品需求。以用戶任務為主要目標,將界面信息根據重要性、關聯性等進行組塊分類和布局。以下內容是從網易微專業的交互設計課程上學到的。

界面布局常見難點:1.內容太多;2.分類模糊;3.和競品重合度高。

解決方法:

1.內容太多,可用以下原則進行檢查:

  • 整體原則:清晰的視覺引導。遵循用戶的使用慣性,不做不必要的不符合用戶習慣的創新。
  • 顯示:清晰的頁面邏輯關係,突出主要的任務流程和功能。
  • 弱化:將優先順序較低的功能弱化,減少認知壓力。用格式塔心理學理論的六大原則進行分析設計。六大原則:接近性、相似性、連續性、封閉性、對稱性、情感化。
  • 刪除:梳理頁面信息,將不必要的信息進行刪除。將重複累贅信息進行合併或者用其他的方法進行創新設計。
  • 隱藏:對於不常用的、不太在意的、高級的功能進行隱藏。需要時再呼出。

2.分類和層級模糊,可根據以下指標進行:使用人數、使用頻率、重要程度、綜合優先順序。

3.和競品重合度高是很常見的,原因是用戶養成了很多使用習慣,在不改變用戶使用習慣的條件下,如需做差異化設計,可通過情感化設計和微動畫交互來提升用戶的體驗感受。

影響因素:操作頻率和距離與面積。按鈕大小設計和界面元素設計可遵循費茨法則。

導航設計復盤

B端零售門店服務App-導航和布局

由於產品功能多,信息架構複雜,所以將每個頁面信息單獨整理,便於為界面布局設計提供清晰的思路。

B端零售門店服務App-導航和布局

B端零售門店服務App-導航和布局

B端零售門店服務App-導航和布局

B端零售門店服務App-導航和布局

B端零售門店服務App-導航和布局

B端零售門店服務App-導航和布局

以下是復盤信息架構的五大調整:

  1. 重新定義功能。將進貨設定為入庫,將開單設定對出貨開單並獨立出來。將入庫和入庫記錄歸類為倉庫管理,將倉庫操作歸類為倉庫日誌,將訂單定義為單純的出貨線上線下訂單;
  2. 整合開放功能。將各種獨立的信息設置、規則設置功能整合為一個開放模塊;
  3. 場景歸類功能。將管店頁面和其他安排不合理的胡亂堆砌的功能入口分發到合適的頁面中;
  4. 明確功能界限。將分析修改為統計有三點原因,首先是很多數據只留在統計層面,開發進度無法很好的支撐分析功能;然後分析需要專業的數據人員和業務人員配備設計分析指數,這也需要根據團隊的實際產能來;最後分析可以屬於高級收費功能,越智能越複雜的數據不適合在移動端查看和操作。通過查找業務資料了解店鋪經營情況的分析指數后對統計模塊增加了一些功能;
  5. 完善核心功能。在原有的出貨開單功能上添加靈活快速開單,將快速開單、掃碼和手動錄入商品三種模式合為一體,形成獨立而完整的開單模塊。

根據這五大調整,將導航重新設計。由之前的標籤導航調整為鴕式導航加抽屜導航。「首頁-貨單-倉庫-分析-管店」調整為「首頁(帶抽屜)-訂單-庫存-統計+開單」。首頁和抽屜導航都屬於整合模塊,其他都屬於獨立模塊。

鴕式導航的中間是開單,開單是一個即時並支持多種複雜的場景的功能,也是整個產品最高頻的功能,並不需要從屬於某個模塊,可直接觸發二級頁面任意切換開單場景高效開單。

抽屜導航的內容主要是店鋪信息、賬戶信息、以及通用設置和個性化設置等。整個模塊不需要高頻操作,每個條目之間沒有強關係,開放管理。

把新的導航和信息架構帶入到用戶反饋。可以發現找不到的類似賬本等高頻功能調整到了首頁,快速記一筆和開單整合使得開單場景覆蓋更大,以及用戶找不到的設置問題都進行了聚合。解決用戶提出的一半以上找不到功能的問題。剩下的問題就交給頁面布局和操作流程來解決。

總結:經過競品分析到信息架構再到導航設計這一步,所有功能經過打散重組提煉出幾個核心的功能並以全新的方式排序是一個複雜且漫長的過程。彷彿確定產品導航才真正進入產品設計的第一步。而我用封閉的分析方法來梳理必然少了更多重要的環節。想到要從調研到啟動,確實會是一個很大的工作量。現在來看這些工作量,顯得必不可少,因為這些工作的確能讓產品出色很多。

  1. 從架構上突出產品的差異化。通過競品分析和對自己經歷的產品的全面剖析,加深了對自身產品的認識。從架構上認識自身產品的優勢和差異,以致於避免盲目模仿而降低了自身產品的特點。
  2. 從操作場景中整合功能模塊。整合用戶反饋復盤后,總能得到很清晰的答案。然而這並不是從理論角度去研究出來的,而是用戶真真實實的體驗需求,這種需求和經過長期累積下來的方法論完全融合。所以說不了解方法論沒關係,了解用戶自然可以輕鬆地找到設計方法。
  3. 先找到功能再到會用和好用。競品同質化嚴重但也存在不少差別。有的入口設計很扁平,內容支持全面,但是分佈零散沒有主次關係。有的功能使用頻率高操作流程很自然流暢但入口很隱蔽。這些都會導致找功能困難。所以根據場景給信心分層,突出核心對用戶使用是有正面影響的。

頁面布局再設計

頁面布局的復盤,繼續解決找不到功能的問題。用戶反饋提出了庫存修改和盤點單,店員許可權和店員加減,如何查看賬單這三個問題。從用戶的提問其實可以很清晰的看出用戶潛意識是將庫存修改和盤點單歸為一個大場景,店員許可權設置和店員數量加減歸為一個大場景的。賬單對商家而言應該僅是除了開單外的核心且高頻的功能,將賬單和今日收入統計歸為一個大場景。而上一步的信息架構復盤也是從用戶使用場景出發,重組功能結構。所以在復盤頁面布局過程中,也要注意使用場景的相關性。將相關功能或內容有效重組。

下面是新導航后的一級頁面的布局

B端零售門店服務App-導航和布局

  • 首頁:宮格布局。整個頁面由數據和入口組成,沒有操作和編輯功能。將相互獨立的入口按規律整理分組後排列出來,一目了然。
  • 抽屜:列表布局。由於抽屜內功能都是獨立的個人中心、信息設置等低頻功能。內容少,相互關聯性弱,所以選擇抽屜導航中最常見的列表布局。
  • 訂單:tab導航+列表布局。訂單分門店內和線上兩種訂單,用一級tab區分。而線上訂單有多種狀態,用二級tab切換。全局支持點擊和滑動,有利於大屏幕的快速切換查看和操作。
  • 庫存:列表布局。和之前的庫存相比,在信息內容和交互方式上都做了調整。首先將之前默認隱藏起來的庫存操作功能展示在庫存列表的頂部,讓用戶對庫存管理的支持一目了然,在網上滑動的過程中可消失。然後信息展示由之前的庫存數和進貨價調整為庫存數和銷售量。最後由於入庫功能的加入,也支持從列表中選擇單個商品左滑進行入庫、盤點等,也就是庫存管理功能從之前的僅支持批量操作到現在的支持批量和單個商品的操作。
  • 統計:圖表布局+宮格布局+列表布局。這個模塊是建立數據化智能化店鋪的根本。一定的規模或較多流量的店鋪可升級為智慧門店。同時智慧門店會有多方數據關聯。所以要承載複雜的數據查看操作以及對比等功能。所以手機端小屏幕相對PC端更難承載。通過減法列出商家最關注的數據引導商家靈活調整運營策略。從營收、訂單、庫存、銷量四個角度給商家做統計。通過分析營收可多維度了解店鋪經營狀態,是所有統計中商家最關注的,所以我選擇將營收用圖表布局並在一級tab呈現,其他的選擇宮格入口查看。熱銷和滯銷都是排行的方式,使用列表布局。
  • 開單:tab導航+列表布局。開單模塊可直接跳轉二級頁面。tab支持滑動切換,靈活切換開單方式。同時手動開單隻支持點擊商品列表操作,與tab滑動切換無衝突。同時掃碼開單后錄入的商品列表支持數量編輯,支持點擊刪除,不支持滑動刪除,支持呼出鍵盤之間改數字。

以下是界面布局復盤后的一些感想:

  1. 加入C端產品體驗設計思維。由於目標用戶大部分是小微,除了小部分購買的傳統的店鋪服務系統的商家外大部分是第一次使用軟體管店。所以頁面布局不可太枯燥和過於功能化,應加入他們更加熟悉的C端產品設計思維,注重交互反饋和引導幫助,幫助用戶清晰操作效率先行。
  2. 優化並加強信息場景相關性。全新的頁面布局從信息相關性到信息模塊化切入。之前的商品庫存展示內容是商品名稱+圖+庫存數+進貨價,現在把進貨價改成了月銷量,月銷量和庫存數的相關性更強,讓用戶一眼就能清楚知道月銷量和庫存的關係。
  3. 獨立操作和批量操作並存。新的庫存內單個商品支持獨立操作,這樣在操作流程中可以減少打開批量操作頁面去選擇商品的步驟,使庫存操作變得更靈活。這個思維方式和購物車、客戶列表等一致。
  4. 完善功能建立體驗閉環。除了整合功能加強場景性外,還需要考慮一些極少數的場景實現真正的靈活操作。這就需要不全一些末端的簡單功能,形成體驗閉環。這次的布局中完善了開單的體驗閉環,支持更多靈活的開單場景。

這是我復盤系列中的一篇文章。年前想將這系列文章都發布出來,可隨著復盤的深入,對專業知識的理解越來越深刻,導致我對之前的分析判斷有了一些懷疑,我想優化好再發出來,卻發現不如重新寫。不過我還是會把之前的東西補全,那只是對以前的總結而已。未來會有更多更科學的設計思路指導的前進。學習就是這樣,總有更好的。工作好幾年才體會到,校園時期做設計的那種有理有據的習慣是那麼的難能可貴。

作者:買恰恰,微信公眾號:買恰恰沒吃飽