折疊屏終端上市，無形中增加了電商平臺(tái)的開發(fā)運(yùn)維成本。筆者根據(jù)折疊屏的特點(diǎn)，提出了三種交互方案，看看如何在折疊屏上展示界面。

2007年，當(dāng)喬布斯舉著沒有物理鍵盤的iPhone向全世界展示他的新發(fā)明時(shí)，無論如何也想不到，12年后的今天華為、三星和柔宇突破手機(jī)固有的界限，將未來手機(jī)形態(tài)推向柔性屏幕領(lǐng)域。

屏幕的變化，總讓大家充滿了驚喜感，手機(jī)全面屏的出現(xiàn)，使得我們可以在有限的空間里面看到更多的內(nèi)容。柔性屏憑借可收縮、可折疊的效果，可以確保手機(jī)的大小得到控制，而尺寸則得到一定程度的拓展。

從研究上可以看出折疊屏有以下優(yōu)點(diǎn)：

• 滿足更多場(chǎng)景化需求。用戶在休閑娛樂的場(chǎng)景下希望手機(jī)屏幕盡可能大，適合娛樂的體驗(yàn)感；而在用戶攜帶的過程中又希望手機(jī)足夠小，便于用戶的攜帶。折疊屏在“展開”的模式下空間變大，在“折疊”的狀態(tài)下空間面積變小，適合不同場(chǎng)景下的用戶體驗(yàn)。
• 提升視覺體驗(yàn)感。柔宇和華為Mate X展開屏為8英寸、三星Galaxy Fold展開屏為7.3英寸，大屏幕提升視覺沖擊力和感染力。
• 提升特殊場(chǎng)景下的工作效率。折疊屏的主要特點(diǎn)包括“多任務(wù)處理”“主屏幕更大”“體積小方便攜帶”等，大大提升場(chǎng)景下的工作效率。

隨著移動(dòng)互聯(lián)網(wǎng)的不斷深入，手機(jī)的網(wǎng)速、流量已經(jīng)不是限制我們購(gòu)物的最大障礙。

當(dāng)前我們即將進(jìn)入5G時(shí)代，網(wǎng)絡(luò)的快速發(fā)展也給移動(dòng)電商帶來福音，不過現(xiàn)在電商的發(fā)展已經(jīng)過了最初快速發(fā)展的紅利期，由于產(chǎn)品的業(yè)態(tài)持續(xù)遞增，不同平臺(tái)的開發(fā)成本、運(yùn)營(yíng)成本也隨即上升。

例如蘇寧易購(gòu)的在線終端就包括：APP、WAP頁、PC、小程序和折疊屏等。由于不同終端業(yè)態(tài)之間不能實(shí)現(xiàn)頁面的自動(dòng)適配，且不同終端業(yè)態(tài)業(yè)務(wù)運(yùn)營(yíng)不能做到一套適配所有，因此減少運(yùn)營(yíng)成本，提升頁面運(yùn)營(yíng)復(fù)用率已迫在眉睫。

那么，作為互聯(lián)網(wǎng)經(jīng)濟(jì)的主要抓手之一的“互聯(lián)網(wǎng)電商”該如何應(yīng)對(duì)折疊屏手機(jī)？如何利用折疊屏的優(yōu)勢(shì)提升用戶的購(gòu)物體驗(yàn)？

方案一：響應(yīng)式適配方式，保證數(shù)據(jù)源的完整性，提升不同終端的復(fù)用率

當(dāng)前在許多大的互聯(lián)網(wǎng)公司中普遍存在這樣的問題：公司的推廣終端較多需要滿足不同終端的頁面展示樣式。因此，對(duì)于運(yùn)營(yíng)和研發(fā)來說工作量巨大，每一個(gè)終端都是新的，不可復(fù)用。同時(shí)增加了企業(yè)的生產(chǎn)成本和運(yùn)營(yíng)成本，無形中為企業(yè)增加支出。

1. 普通屏到折疊屏之間的適配方式

通常情況下移動(dòng)端頁面的設(shè)計(jì)尺寸采用750*1334px，該尺寸在不同的屏幕之間適配。而折疊屏的屏幕尺寸規(guī)格將會(huì)變得更大，例如HUAWEI Mate X的主屏分辨率為2480*2200像素，想通過原來的適配方案去適配這樣的折疊屏無疑在界面的體驗(yàn)感是很差的(如下圖所示)，如果將現(xiàn)有的750*1334px的方案適配到折疊屏幕上會(huì)出現(xiàn)界面利用率低或界面內(nèi)文字太大，顯示內(nèi)容太少的情況。

這兩種適配方案顯然不能滿足人性化的設(shè)計(jì)原則，用戶在使用這樣的適配方式時(shí)可讀性很差，同時(shí)削弱了折疊屏的優(yōu)勢(shì)——屏幕大的特點(diǎn)。

針對(duì)這樣的設(shè)計(jì)特點(diǎn)，筆者認(rèn)為可以將數(shù)據(jù)信息進(jìn)行智能化適配將屏幕撐滿(如下圖)，一方面可以展示較多的商品信息，同時(shí)減少用戶的操作負(fù)荷(因?yàn)樵谄聊恍r(shí)通常采用左右滑動(dòng)查看更多的形式，而屏幕寬時(shí)就省去這樣的操作)；另一方面保證信息的完整性提升用戶的視覺體驗(yàn)感。

在實(shí)現(xiàn)方式上則采用模塊化坑位的方式。做過互聯(lián)網(wǎng)電商的用戶都知道，界面內(nèi)展示的信息數(shù)量都是在開發(fā)過程中預(yù)留的坑位，運(yùn)營(yíng)通過維護(hù)圖片和鏈接展示商品信息保證商品購(gòu)買流的順利實(shí)現(xiàn)。而采用這種適配方式只需要在開發(fā)過程中預(yù)留更多的坑位，根據(jù)屏幕的尺寸判斷坑位的展示數(shù)量。

2. 折疊屏到PC之間的適配方式

數(shù)據(jù)顯示移動(dòng)端電商占據(jù)了99%的流量 ，而PC上的電商頁面又不能放棄，運(yùn)營(yíng)成本和開發(fā)成本依然很高。為了解決這樣的高投入少回報(bào)的領(lǐng)域，筆者認(rèn)為可以通過折疊屏上已有的適配方案展示到PC上，這樣就可以解決一套運(yùn)營(yíng)解決多套終端的實(shí)現(xiàn)方式，其解決方案依然采用模塊化坑位的方式。

方案二：分屏互動(dòng)，雙屏多任務(wù)交互式

分屏互動(dòng)，雙屏多任務(wù)交互方式就要求屏幕分成左右兩部分，內(nèi)容在左右方向進(jìn)行動(dòng)態(tài)調(diào)整，主要調(diào)整的原則是根據(jù)屏幕的展示尺寸對(duì)內(nèi)容進(jìn)行適配，且不對(duì)內(nèi)容的大小作調(diào)整。雙屏多任務(wù)保證信息的完整性和靈活性，同時(shí)能夠滿足用戶形成的瀏覽習(xí)慣，且在操作手勢(shì)上更加靈活。

方案三：在原有的適配方式上增加數(shù)據(jù)信息，撐滿屏幕，提升體驗(yàn)

由于折疊屏的屏幕尺寸比當(dāng)前市面主流手機(jī)屏幕尺寸更大，如果從當(dāng)前(750*1334)的尺寸直接適配到折疊屏上會(huì)存在屏幕內(nèi)字體、字號(hào)、圖片尺寸大小和間距不協(xié)調(diào)的情況。筆者認(rèn)為可以將普通屏的設(shè)計(jì)方案直接按比例適配到折疊屏上后再在其空出的屏幕區(qū)域增加一條數(shù)據(jù)信息(如下圖)，這樣既解決屏幕區(qū)域不能充分利用的情況，也能處理好屏幕空間內(nèi)視覺體驗(yàn)的問題。

在信息的展示層面主要分為兩類：一類是從普通屏直接適配過來的信息；另一類是開發(fā)增加的數(shù)據(jù)信息，且增加的這部分?jǐn)?shù)據(jù)信息在當(dāng)前頁面不重復(fù)展示，例如在蘇寧易購(gòu)APP首頁增加一條分類的信息或者增加個(gè)人中心的信息，保證頁面的完整度和視覺的體校效果。

總結(jié)

本文筆者通過自己互聯(lián)網(wǎng)的工作經(jīng)驗(yàn)，以蘇寧易購(gòu)APP首頁頁面為例，為折疊屏的適配提供了三種交互方式。

1. 增加模塊化坑位的方式。開發(fā)在前期預(yù)留出足夠的坑位信息，運(yùn)營(yíng)根據(jù)坑位進(jìn)行圖片、鏈接的維護(hù)，該信息根據(jù)屏幕尺寸進(jìn)行限制性展示；這樣不僅增加了信息的曝光量，而且保證信息的完整性和視覺上的易讀性。
2. 分屏互動(dòng)，雙屏多任務(wù)交互式。主要是在折疊屏內(nèi)做雙屏的處理方式，將足夠?qū)挼恼郫B屏分成左右兩部分，分別進(jìn)行適配；這樣增加了交互的趣味性和交互的豐富度，凸顯折疊屏的優(yōu)勢(shì)。
3. 在原有的適配基礎(chǔ)上增加數(shù)據(jù)信息，保證折疊屏顯示信息的完整性。滿足用戶對(duì)手機(jī)屏幕內(nèi)信息的原有認(rèn)知，增加的數(shù)據(jù)信息對(duì)當(dāng)前的展示內(nèi)容做為補(bǔ)充；豐富了頁面的展示內(nèi)容，提升用戶體驗(yàn)感。

本文由 @DS.Geng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

總結(jié)

以上是生活随笔為你收集整理的sketch如何做设计稿交互_当屏幕可以折叠，交互设计怎么做的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。