當屏幕可以折疊,交互設計怎么做
折疊屏終端上市,無形中增加了電商平臺的開發運維成本。筆者根據折疊屏的特點,提出了三種交互方案,看看如何在折疊屏上展示界面。
2007年,當喬布斯舉著沒有物理鍵盤的iPhone向全世界展示他的新發明時,無論如何也想不到,12年后的今天華為、三星和柔宇突破手機固有的界限,將未來手機形態推向柔性屏幕領域。
屏幕的變化,總讓大家充滿了驚喜感,手機全面屏的出現,使得我們可以在有限的空間里面看到更多的內容。柔性屏憑借可收縮、可折疊的效果,可以確保手機的大小得到控制,而尺寸則得到一定程度的拓展。
從研究上可以看出折疊屏有以下優點:
- 滿足更多場景化需求。用戶在休閑娛樂的場景下希望手機屏幕盡可能大,適合娛樂的體驗感;而在用戶攜帶的過程中又希望手機足夠小,便于用戶的攜帶。折疊屏在“展開”的模式下空間變大,在“折疊”的狀態下空間面積變小,適合不同場景下的用戶體驗。
- 提升視覺體驗感。柔宇和華為Mate X展開屏為8英寸、三星Galaxy Fold展開屏為7.3英寸,大屏幕提升視覺沖擊力和感染力。
- 提升特殊場景下的工作效率。折疊屏的主要特點包括“多任務處理”“主屏幕更大”“體積小方便攜帶”等,大大提升場景下的工作效率。
隨著移動互聯網的不斷深入,手機的網速、流量已經不是限制我們購物的最大障礙。
當前我們即將進入5G時代,網絡的快速發展也給移動電商帶來福音,不過現在電商的發展已經過了最初快速發展的紅利期,由于產品的業態持續遞增,不同平臺的開發成本、運營成本也隨即上升。
例如蘇寧易購的在線終端就包括:APP、WAP頁、PC、小程序和折疊屏等。由于不同終端業態之間不能實現頁面的自動適配,且不同終端業態業務運營不能做到一套適配所有,因此減少運營成本,提升頁面運營復用率已迫在眉睫。
那么,作為互聯網經濟的主要抓手之一的“互聯網電商”該如何應對折疊屏手機?如何利用折疊屏的優勢提升用戶的購物體驗?
方案一:響應式適配方式,保證數據源的完整性,提升不同終端的復用率
當前在許多大的互聯網公司中普遍存在這樣的問題:公司的推廣終端較多需要滿足不同終端的頁面展示樣式。因此,對于運營和研發來說工作量巨大,每一個終端都是新的,不可復用。同時增加了企業的生產成本和運營成本,無形中為企業增加支出。
1. 普通屏到折疊屏之間的適配方式
通常情況下移動端頁面的設計尺寸采用750*1334px,該尺寸在不同的屏幕之間適配。而折疊屏的屏幕尺寸規格將會變得更大,例如HUAWEI Mate X的主屏分辨率為2480*2200像素,想通過原來的適配方案去適配這樣的折疊屏無疑在界面的體驗感是很差的(如下圖所示),如果將現有的750*1334px的方案適配到折疊屏幕上會出現界面利用率低或界面內文字太大,顯示內容太少的情況。
這兩種適配方案顯然不能滿足人性化的設計原則,用戶在使用這樣的適配方式時可讀性很差,同時削弱了折疊屏的優勢——屏幕大的特點。
針對這樣的設計特點,筆者認為可以將數據信息進行智能化適配將屏幕撐滿(如下圖),一方面可以展示較多的商品信息,同時減少用戶的操作負荷(因為在屏幕小時通常采用左右滑動查看更多的形式,而屏幕寬時就省去這樣的操作);另一方面保證信息的完整性提升用戶的視覺體驗感。
在實現方式上則采用模塊化坑位的方式。做過互聯網電商的用戶都知道,界面內展示的信息數量都是在開發過程中預留的坑位,運營通過維護圖片和鏈接展示商品信息保證商品購買流的順利實現。而采用這種適配方式只需要在開發過程中預留更多的坑位,根據屏幕的尺寸判斷坑位的展示數量。
2. 折疊屏到PC之間的適配方式
數據顯示移動端電商占據了99%的流量 ,而PC上的電商頁面又不能放棄,運營成本和開發成本依然很高。為了解決這樣的高投入少回報的領域,筆者認為可以通過折疊屏上已有的適配方案展示到PC上,這樣就可以解決一套運營解決多套終端的實現方式,其解決方案依然采用模塊化坑位的方式。
方案二:分屏互動,雙屏多任務交互式
分屏互動,雙屏多任務交互方式就要求屏幕分成左右兩部分,內容在左右方向進行動態調整,主要調整的原則是根據屏幕的展示尺寸對內容進行適配,且不對內容的大小作調整。雙屏多任務保證信息的完整性和靈活性,同時能夠滿足用戶形成的瀏覽習慣,且在操作手勢上更加靈活。
方案三:在原有的適配方式上增加數據信息,撐滿屏幕,提升體驗
由于折疊屏的屏幕尺寸比當前市面主流手機屏幕尺寸更大,如果從當前(750*1334)的尺寸直接適配到折疊屏上會存在屏幕內字體、字號、圖片尺寸大小和間距不協調的情況。筆者認為可以將普通屏的設計方案直接按比例適配到折疊屏上后再在其空出的屏幕區域增加一條數據信息(如下圖),這樣既解決屏幕區域不能充分利用的情況,也能處理好屏幕空間內視覺體驗的問題。
在信息的展示層面主要分為兩類:一類是從普通屏直接適配過來的信息;另一類是開發增加的數據信息,且增加的這部分數據信息在當前頁面不重復展示,例如在蘇寧易購APP首頁增加一條分類的信息或者增加個人中心的信息,保證頁面的完整度和視覺的體校效果。
總結
本文筆者通過自己互聯網的工作經驗,以蘇寧易購APP首頁頁面為例,為折疊屏的適配提供了三種交互方式。
- 增加模塊化坑位的方式。開發在前期預留出足夠的坑位信息,運營根據坑位進行圖片、鏈接的維護,該信息根據屏幕尺寸進行限制性展示;這樣不僅增加了信息的曝光量,而且保證信息的完整性和視覺上的易讀性。
- 分屏互動,雙屏多任務交互式。主要是在折疊屏內做雙屏的處理方式,將足夠寬的折疊屏分成左右兩部分,分別進行適配;這樣增加了交互的趣味性和交互的豐富度,凸顯折疊屏的優勢。
- 在原有的適配基礎上增加數據信息,保證折疊屏顯示信息的完整性。滿足用戶對手機屏幕內信息的原有認知,增加的數據信息對當前的展示內容做為補充;豐富了頁面的展示內容,提升用戶體驗感。
本文由 @DS.Geng 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
不錯!學到了