電商boss系統(tǒng)采購訂單頁面在移動(dòng)端呈現(xiàn)，我做了哪些思考？
在B端UI/UX設(shè)計(jì)領(lǐng)域，我們常常會(huì)遇到類似的需求：隨著業(yè)務(wù)的發(fā)展，需要將復(fù)雜系統(tǒng)中的核心功能摘出來，并在小程序或移動(dòng)應(yīng)用上呈現(xiàn)，以便客戶能夠便捷地使用和操作，從而提升工作效率。然而，實(shí)際操作中我們會(huì)發(fā)現(xiàn)，盡管對(duì)這些功能很熟悉，但是落地過程中卻會(huì)遇到一系列問題。
本文中，將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁面呈現(xiàn)在移動(dòng)端的設(shè)計(jì)過程，希望對(duì)大家有所幫助。通過本文，您將了解到以下內(nèi)容：
1、如何在設(shè)計(jì)過程中充分考慮電腦端和移動(dòng)端用戶的需求和使用習(xí)慣；
2、如何將復(fù)雜的訂單頁面優(yōu)化為簡(jiǎn)潔、易用的移動(dòng)端界面；
3、針對(duì)移動(dòng)端的限制和挑戰(zhàn)，如何進(jìn)行設(shè)計(jì)決策和權(quán)衡；
4、使用哪些有效的UX技巧來提升用戶體驗(yàn)和工作效率。
選款的零售商客戶通過衫海精選款下單后，訂單信息和訂單狀態(tài)會(huì)傳到BOSS后臺(tái)，相關(guān)負(fù)責(zé)人可隨時(shí)查看并處理。
為了確保平臺(tái)高效履約，需要市場(chǎng)部同事隨時(shí)掌握訂單狀態(tài)，特別是
發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)
的訂單，以便及時(shí)通知上下游。但是由于工作性質(zhì)，他們無法隨時(shí)坐在電腦面前，所以需要在小程序上呈現(xiàn)訂單信息，可以讓市場(chǎng)部同事隨時(shí)查看并處理訂單，避免出現(xiàn)訂單超時(shí)，客戶投訴的情況。
訂單狀態(tài)包括：全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下
新訂單、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)
的訂單類型需要重點(diǎn)露出，方便快速查詢。
1、訂單狀態(tài)：電腦端大屏橫向可以全部平鋪展示；移動(dòng)端則是橫向滑動(dòng)。
2、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口，電腦端大屏可以全部平鋪展示；移動(dòng)端則需要換行，這里不做橫向滑動(dòng)是因?yàn)闀?huì)影響用戶的操作效率
訂單查詢條件包括：訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉等等。
分析用戶日常的使用習(xí)慣，對(duì)高頻操作的篩選項(xiàng)進(jìn)行提煉在移動(dòng)端展示，提升使用效率。低頻操作則不在移動(dòng)端展示。
經(jīng)過與業(yè)務(wù)方溝通，訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對(duì)較多，
訂單編號(hào)、時(shí)間排序
使用頻次最高。
1、訂單編號(hào)查詢：電腦端和移動(dòng)端都是直接輸入，但是電腦端支持批量查詢，單次查詢內(nèi)容會(huì)更多。
2、下單時(shí)間排序：電腦端采用input框的樣式，下拉篩選；移動(dòng)端是通過點(diǎn)擊切換排序方式，操作會(huì)更便捷。
1、商品查詢：電腦端、移動(dòng)端都是直接輸入；
2、供應(yīng)商查詢：電腦端采用input框的樣式，下拉篩選；移動(dòng)端則是進(jìn)入新的頁面進(jìn)行選擇；兩者都支持關(guān)鍵字搜索；
移動(dòng)端不直接展開的原因是：供應(yīng)商數(shù)量多，在當(dāng)前頁面展示篇幅較長(zhǎng)，還涉及到分頁，會(huì)影響用戶的操作體驗(yàn)。
電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器，支持快捷查詢；移動(dòng)端點(diǎn)擊選擇跳轉(zhuǎn)到新頁面，時(shí)間全部鋪開展示；兩者都支持滑動(dòng)鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。
電腦端采用input框，下拉選中；移動(dòng)端則是全部展示出來，采用勾選的方式進(jìn)行選擇。
訂單內(nèi)容包括訂單編號(hào)、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類：
a、訂單信息 b、商品信息 c、操作。
訂單信息包括：訂單編號(hào)、下單時(shí)間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款
電腦端面積大，內(nèi)容需要散開排列；移動(dòng)端面積小，內(nèi)容需要集中排列。
商品信息包括：商品名稱、圖片、價(jià)格、貨號(hào)、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉內(nèi)現(xiàn)貨、缺貨原因
同樣的內(nèi)容，移動(dòng)端更加聚焦，但是商品數(shù)量展示也偏少。
由于屏幕大小和分辨率的不同，電腦端和移動(dòng)端頁面在功能的布局和信息展示上也會(huì)有所不同。
電腦端使用鼠標(biāo)操作，包含滑動(dòng)、左擊、右擊、雙擊等，相對(duì)來說單一，交互效果較少。而對(duì)于手機(jī)端來說，由于屏幕大小的限制，操作方式需要更加的豐富，通過這些豐富的操作來實(shí)現(xiàn)頁面和功能之間的交互。所以電腦端和移動(dòng)端相同功能的操作方式也會(huì)不同，組件也有所差異。在做設(shè)計(jì)時(shí)，盡量使用成熟的組件，給用戶良好的使用體驗(yàn)。
遇到復(fù)雜的設(shè)計(jì)需求，不要慌張，
核心都是看透事物的本質(zhì)，拆解為基礎(chǔ)的組件，再從根本上解決問題。
