亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

在 B 端 UI/UX 設(shè)計(jì)領(lǐng)域,我們常常會(huì)遇到類似需求:隨著業(yè)務(wù)的發(fā)展,需要將 PC 系統(tǒng)中的核心功能摘出來(lái)在小程序或 APP 上呈現(xiàn),方便用戶能夠便捷地使用和操作,從而提升工作效率。然而,實(shí)際操作中我們可能會(huì)發(fā)現(xiàn),盡管對(duì)這些功能很熟悉,落地過程卻會(huì)遇到一系列問題。

本文將分享我在將復(fù)雜電商 BOSS 系統(tǒng)的訂單頁(yè)面呈現(xiàn)在小程序上的設(shè)計(jì)過程,希望對(duì)大家有所幫助。

通過本文,您將了解到以下內(nèi)容:

  1. 如何在設(shè)計(jì)過程中充分考慮電腦端和移動(dòng)端用戶的需求和使用習(xí)慣;
  2. 如何將復(fù)雜的訂單頁(yè)面優(yōu)化為簡(jiǎn)潔、易用的移動(dòng)端界面;
  3. 針對(duì)移動(dòng)端的限制和挑戰(zhàn),如何進(jìn)行設(shè)計(jì)決策和權(quán)衡;
  4. 使用哪些有效的 UX 技巧來(lái)提升用戶體驗(yàn)和工作效率。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

一、深入分析業(yè)務(wù)背景和使用場(chǎng)景

1. 業(yè)務(wù)背景關(guān)系梳理

選款的零售商客戶通過衫海精選款下單后,訂單信息和訂單狀態(tài)會(huì)傳到 BOSS 后臺(tái),相關(guān)負(fù)責(zé)人可即時(shí)查看并處理。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

2. 為什么需要在移動(dòng)端呈現(xiàn)?

為了確保平臺(tái)高效履約,需要市場(chǎng)部同事隨時(shí)掌握訂單狀態(tài),特別是發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)的訂單,以便及時(shí)通知上下游。但是由于工作性質(zhì),他們無(wú)法隨時(shí)坐在電腦面前,所以需要在小程序上呈現(xiàn)訂單信息,可以讓市場(chǎng)部同事隨時(shí)查看并處理訂單,避免出現(xiàn)訂單超時(shí),客戶投訴的情況。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

二、功能拆解

1. 將電腦端訂單內(nèi)容拆分重組,信息歸類

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

2. 訂單拆分后,主要分為以下四個(gè)部分

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

1)訂單狀態(tài)

訂單狀態(tài)包括:全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單類型需要重點(diǎn)露出,方便快速查詢。
設(shè)計(jì)差異:

  1. 訂單狀態(tài):電腦端大屏橫向可以全部平鋪展示;移動(dòng)端則是橫向滑動(dòng)。
  2. 售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口,電腦端大屏可以全部平鋪展示;移動(dòng)端則需要換行,這里不做橫向滑動(dòng)是因?yàn)闀?huì)影響用戶的操作效率。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

2)訂單查詢條件

訂單查詢條件包括:訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方、SKU 編碼、商品 ID、是否缺貨、所屬云倉(cāng)等等。

設(shè)計(jì)差異:

分析用戶日常的使用習(xí)慣,對(duì)高頻操作的篩選項(xiàng)進(jìn)行提煉在移動(dòng)端展示,提升使用效率。低頻操作則不在移動(dòng)端展示。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

經(jīng)過與業(yè)務(wù)方溝通,訂單編號(hào)、時(shí)間排序、商品名稱、供應(yīng)商名稱、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對(duì)較多,而訂單編號(hào)、時(shí)間排序使用頻次最高。

a. 訂單編號(hào)/排序時(shí)間

設(shè)計(jì)差異:

  1. 訂單編號(hào)查詢:電腦端和移動(dòng)端都是直接輸入,但是電腦端支持批量查詢,單次查詢內(nèi)容會(huì)更多。
  2. 下單時(shí)間排序:電腦端采用 input 框的樣式,下拉篩選;移動(dòng)端是通過點(diǎn)擊切換排序方式,操作會(huì)更便捷。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

b. 商品/供應(yīng)商查詢

設(shè)計(jì)差異:

  1. 商品查詢:電腦端通常采用 input 框的樣式;移動(dòng)端則是直接輸入;
  2. 供應(yīng)商查詢:電腦端采用 input 框的樣式,點(diǎn)擊展開全部;移動(dòng)端則是點(diǎn)擊后在新的頁(yè)面進(jìn)行選擇;兩者都支持關(guān)鍵字搜索;

移動(dòng)端不直接展開的原因是:供應(yīng)商數(shù)量多,在當(dāng)前頁(yè)面展示篇幅較長(zhǎng),還涉及到分頁(yè),會(huì)影響用戶的操作體驗(yàn)。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

c. 時(shí)間查詢

設(shè)計(jì)差異:

電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器,支持快捷查詢;移動(dòng)端點(diǎn)擊選擇跳轉(zhuǎn)到新頁(yè)面,時(shí)間全部鋪開展示;兩者都支持滑動(dòng)鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

d. 訂單狀態(tài)查詢

設(shè)計(jì)差異:

電腦端采用 input 框,下拉選中;移動(dòng)端則是全部展示,采用勾選的方式進(jìn)行選擇。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

3)批量操作

小程序不做批量操作功能。

4)訂單

訂單內(nèi)容包括訂單編號(hào)、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為 3 類:1、訂單信息 2、商品信息 3、操作

a. 訂單信息

訂單信息包括:訂單編號(hào)、下單時(shí)間、零售商、、發(fā)貨方式、買家信息、訂單狀態(tài)、實(shí)收款

設(shè)計(jì)差異:

電腦端面積大,內(nèi)容散開排列;移動(dòng)端面積小,內(nèi)容集中排列。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

b. 商品信息

商品信息包括:商品名稱、圖片、價(jià)格、貨號(hào)、規(guī)格、SKU 編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉(cāng)內(nèi)現(xiàn)貨、缺貨原因

設(shè)計(jì)差異:

同樣的內(nèi)容,移動(dòng)端更加聚焦,但是商品數(shù)量展示也偏少。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

c. 操作

操作包括:訂單詳情、查看物流

設(shè)計(jì)差異:

交互方式相同,都是跳轉(zhuǎn)新頁(yè)面。

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?

三、總結(jié)

由于屏幕大小和分辨率的不同,電腦端和移動(dòng)端頁(yè)面在功能的布局和信息展示上也會(huì)有所不同。電腦端使用鼠標(biāo)操作,包含滑動(dòng)、左擊、右擊、雙擊等,操作相對(duì)單一,交互效果較少。而對(duì)于手機(jī)端來(lái)說,由于屏幕大小的限制,操作方式需要更加的豐富,通過這些豐富的操作來(lái)實(shí)現(xiàn)頁(yè)面和功能之間的交互。所以電腦端和移動(dòng)端相同功能的操作方式也會(huì)不同,組件也有所差異。在做設(shè)計(jì)時(shí),盡量使用成熟的組件,給用戶良好的使用體驗(yàn)。

遇到復(fù)雜的設(shè)計(jì)需求,不要慌張,核心都是看透事物的本質(zhì),拆解為基礎(chǔ)的原件,再?gòu)母旧辖鉀Q問題。

作者:西城門設(shè)計(jì)

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/19625.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。