在前文的《不要驚訝，折疊屏就應(yīng)該這樣設(shè)計！》一文中，我們看到了折疊屏來襲，手淘設(shè)計師們基于C端應(yīng)用場景的思考與暢想。作為第二彈，讓我們來探索一下，折疊屏如何為淘寶的商家用戶帶來1+1大于2的體驗升級。

為什么商家端產(chǎn)品也開始關(guān)注移動端折疊屏帶來的變化？

如今移動設(shè)備得到更廣泛的應(yīng)用，手機已不僅僅被當做是即時通訊與休閑娛樂的載體，更多的工作場景也逐漸遷移到了移動端。便捷靈活的移動端電商工作平臺是80、90后商家首選的經(jīng)營方式，目前淘寶商家中超過30%的用戶每天僅使用手機便可進行店鋪的管理工作，B端用戶對于移動端的依賴度越來越高。

超過30%的商家僅使用移動端管理店鋪

折疊屏對手機屏幕的延展，帶給用戶的是一種“手機變平板”的體驗。然而與平板設(shè)備不同的是，它可以讓用戶同時擁有“便攜”靈活性與“大屏”擴展性的雙重體驗優(yōu)勢。B端用戶對于“效率”的訴求更高，我們期待的是這種設(shè)備帶來的優(yōu)勢更好得賦能商家產(chǎn)品“效率”體驗的升級。

相較于C端，B端產(chǎn)品具有兩大特點：

• 功能及交互更為復(fù)雜，用戶需要更高頻的輸入、切換、比對等操作；
• 信息維度多樣化，界面信息量不光來自于單維度信息的重復(fù)平鋪，更多場景下是多維度的信息疊加與交叉。這也是用戶對于“效率”訴求的來源。

商家經(jīng)營鏈路主要包括店鋪管理、商品交易、客服接待、數(shù)據(jù)監(jiān)控、營銷設(shè)定等，千牛賣家工作臺是淘寶商家最常用并且覆蓋以上經(jīng)營鏈路的移動端產(chǎn)品，下面我們以千牛賣家工作臺作為實例進行折疊屏的設(shè)計探索。

千牛賣家工作臺移動端

圍繞“效率”這個關(guān)鍵詞，結(jié)合商家在移動端的三大高頻工作場景，我們從用戶與界面交互的三個主要階段：理解信息、產(chǎn)生交互行為、獲取反饋，來分析目前在移動端用戶都會遇到的問題有哪些？

從現(xiàn)狀出發(fā)探索體升級

接下來，我們針對以上場景具體展開設(shè)計探索：

場景一：數(shù)據(jù)瀏覽

隨時隨地進行數(shù)據(jù)查閱，是移動端的主要優(yōu)勢之一，也是目前商家在移動端最高頻的操作。很多業(yè)務(wù)場景都會涉及到數(shù)據(jù)的展示。首屏展示的數(shù)據(jù)有限，而大屏模式首先可以提升的就是展示效率。因此在這個場景下，相比于做橫向拉伸適配，更優(yōu)解是進行布局變化在首屏展示更多的數(shù)據(jù)信息。

數(shù)據(jù)瀏覽場景的展示效率提升

除此之外，在大屏下還可以增加更豐富的交互形式，例如數(shù)據(jù)圖表的沉浸式瀏覽與數(shù)據(jù)項細節(jié)對比。

?數(shù)據(jù)瀏覽可以更加沉浸

除此之外，在大屏下還可以增加更豐富的交互形式，例如數(shù)據(jù)圖表的沉浸式瀏覽與數(shù)據(jù)項細節(jié)對比。

數(shù)據(jù)切換可以更加直接

場景二：客服接待

折疊屏手機中的分屏模式，是一種全新的界面形式，讓用戶同時進行兩個任務(wù)，進行分支任務(wù)時不錯過主任務(wù)的信息。

我們嘗試了兩種應(yīng)用內(nèi)分屏的解決方案：

第一種為“浮層分屏”，即通過浮層和卡片的方式進行內(nèi)分屏的框架設(shè)計，使界面更加整體，不是生硬的切分成兩個區(qū)域，以下是“浮層分屏”在客服接待場景中的設(shè)計應(yīng)用。

浮層分屏

客服接待是商家端使用頻率僅次于數(shù)據(jù)瀏覽的場景。平板中的IM應(yīng)用通常對于大屏下的解決方案是列表+聊天，這種方案可以提升切換效率，但B端即時通訊場景下對于效率的訴求不僅僅是切換這一項，還有信息獲取的問題。

常見的IM場景解決思路

盡管界面中有“相關(guān)訂單”的入口，我們還是經(jīng)常收到用戶的反饋，希望能夠?qū)⒂唵涡畔⒅苯诱故驹诹奶旖缑?，但在小屏下會影響聊天這一核心操作。而這在大屏下可以得到很好的解決，右側(cè)正好可以用來直接展示用戶信息和相關(guān)訂單。

客服接待時直接看到用戶的相關(guān)信息

同時我們在上方設(shè)計了聯(lián)系人列表快速切換的入口，用來平衡聯(lián)系人切換和信息獲取兩方面的效率訴求。

聯(lián)系人的便捷切換

IM+的其他操作（例如推薦商品）也可以通過右側(cè)進行展示，避免操作時錯過用戶最新的留言，而這有可能影響他的操作決策。

推薦商品時不錯過顧客留言

場景三：后臺設(shè)置

折疊屏手機應(yīng)用內(nèi)分屏的另一種設(shè)計解決方案是“對半分屏”，這種框架更加適合于需要全屏預(yù)覽的場景，我們以B端產(chǎn)品中常見的后臺設(shè)置場景為例。

對半分屏模式

通常這種后臺設(shè)置有一個前臺的展示效果與之對應(yīng)，我們采用對半分屏的模式，使用戶在設(shè)置的同時看到效果，更直觀地進行預(yù)覽，所見即所得。

淘外推廣海報設(shè)置預(yù)覽

以上就是我們在商家端典型場景下進行的折疊屏設(shè)計解決方案的一些思路，拋磚引玉。

隨著折疊屏、大屏手機的發(fā)展、硬件的升級，讓我們在產(chǎn)品設(shè)計的拓展上有了更多的想象空間，希望這些設(shè)計的應(yīng)用能夠真正幫助到商家提升移動端經(jīng)營的效率。

如果你有更多的idea，也歡迎和我們留言探討~

注：

1. 以上設(shè)計稿為創(chuàng)意表達，淘寶設(shè)計部擁有最終解釋權(quán)；
2. 設(shè)計稿中所用素材僅用于創(chuàng)意演示，實際商品、店鋪信息、產(chǎn)品功能以線上為準。

作者： Project F，公眾號：淘寶設(shè)計（ID：ali-taobaoued）

來源：https://mp.weixin.qq.com/s/69qCpoYrT3M6qn26B-aO6g

本文由 @淘寶設(shè)計 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自淘寶設(shè)計公眾號