如何設(shè)計折疊屏?超詳細(xì)的折疊屏設(shè)計指南
最近做了HUAWEI Mate Xs手機(jī)折疊屏的相關(guān)設(shè)計,借此機(jī)會「趁熱打鐵」分享一手界面操作體驗(yàn)、適配技巧分享給大家,希望對各位設(shè)計師同學(xué)有所幫助和參考。在這里我使用的是華為折疊屏(HUAWEI Mate Xs 上市時間2020年3月)
折疊屏是什么?
「折疊屏」這個概念比較細(xì),更加宏觀的概念應(yīng)該叫「柔性屏」,折疊屏可以實(shí)現(xiàn)360度的彎曲,甚至扭曲。折疊屏的屏幕需要經(jīng)過20萬次的折疊保持不壞,是柔性要求較高的柔性屏,屏幕的結(jié)構(gòu)也需要單獨(dú)設(shè)計。
可折疊設(shè)備的發(fā)展史
說到折疊屏,很多人都或多或少的會聯(lián)想到很多可以折疊的設(shè)備,在折疊設(shè)備發(fā)展進(jìn)程中,不論是翻蓋手機(jī)、游戲機(jī)還是最新的折疊屏手機(jī),都有著一些共同的特點(diǎn),比如下面幾個可折疊設(shè)備就是典型代表。
△ 1974年施樂公司就提出了柔性屏的概念(打印機(jī)公司)
△ 任天堂NDS
2004年發(fā)售的第三代便攜式游戲機(jī)。主要的特征包括了雙屏幕顯示,其中下方的屏幕為觸摸屏。
△ Moto V3 上市日期 2004年09月,主屏分辨率176×220像素
△ 三星W2014 2013年11月發(fā)布,主屏3.7寸 分辨率800*480 ,副屏3.7寸800*480
哪些品牌在設(shè)計生產(chǎn)折疊屏手機(jī)
現(xiàn)在的折疊屏,更趨向于一塊屏幕整體展示效果,三星Galaxy Fold、華為Mate X、華為Mate XS、中興Axon M、小米和魅族也在布局折疊屏領(lǐng)域,爆料蘋果也在加緊布局中、 W20 5G、摩托羅拉 Razr ,以及聯(lián)想的PC原型機(jī)、柔宇折疊屏手機(jī)等。
△ 中興Axon M
2018年1月20日,主屏幕5.2英寸,1920*1080像素;副屏5.2英寸,1920*1080像素。
△ Moto Razr,打開后形成一塊6.2英寸21:9比例的OLED屏幕
摩托羅拉或于 9 月份推出第二代Moto Razr 。然而最新爆料稱,該機(jī)或至少要等到 2021 年才會上市
△ Samsung Galaxy Fold
分辨率(折疊屏):2152 x 1536 (QXGA+)
分辨率(外屏):720 x 1680 (HD+)
△ Galaxy Z Flip
尺寸(折疊屏):6.7英寸(直角)/6.5英寸(圓角)
分辨率:1080 x 2636 (FHD+)
△ 三星W20 5G
7.3英寸(直角)/7.1英寸(圓角)2152 x 1536 (QXGA+)
4.6英寸(直角)/4.5英寸(圓角)720 x 1680
△ 據(jù)外媒爆料蘋果也在研發(fā)折疊屏的手機(jī)/iPad
業(yè)界傳出,蘋果最快將于2021年推出折疊iPhone。據(jù)相關(guān)供應(yīng)商透露,折疊iPhone不再有劉海設(shè)計及人臉識別,將搭載雙屏幕、側(cè)面指紋解鎖等過往iPhone不曾有過的特色與功能,采用上下折疊設(shè)計。
△ 小米折疊屏手機(jī)
△ 柔宇折疊屏手機(jī)
屏幕尺寸達(dá)7.8英寸,同時采用柔性的AMOLED屏幕,分辨率達(dá)1920*1440(展開狀態(tài))
△ 聯(lián)想折疊屏電腦
ThinkPad X1 Fold(售價1.7萬元),合起來就像一本書一樣,其顯示屏是一塊13.3英寸的4:3比例OLED屏幕,分辨率為2048×1536
△ HUAWEI華為Mate Xs
展開態(tài)8英寸 2480*2200,約8:7.1
折疊態(tài)正面屏6.6英寸 2480*1148,約19.5:9
折疊屏背面屏 6.38英寸 2048*892約25:9
折疊屏的優(yōu)勢和特點(diǎn)
1. 滿足多場景化
折疊屏特點(diǎn)是可以放大顯示的屏幕面積,滿足游戲和高清視頻的需求;又能輕松的折疊裝入口袋中更加便攜
2. 高效學(xué)習(xí)和辦公
技能高效,單屏幕快速學(xué)習(xí)內(nèi)容,又能全屏幕沉浸式操作,不論是屏幕分屏還是靈活的文件拖拽都能輕松搞定
3. 視覺提升
當(dāng)你使用大屏手機(jī)時,你會感覺到它的魅力,展現(xiàn)信息更多樣化、交互視覺的結(jié)構(gòu)多樣性,以及大屏瀏覽視頻時的感受,單屏幕手機(jī)是無法比擬的
4.多任務(wù)體驗(yàn)和更豐富的人機(jī)交互體驗(yàn)
可以在展開屏幕時實(shí)現(xiàn)多窗口的同時顯示和操作等
如何設(shè)計折疊屏界面以及折疊屏交互細(xì)節(jié)分析
最近拿到了華為折疊屏,所以今天利用華為折疊屏作為折疊平臺分析「前后折疊屏」的交互設(shè)計和細(xì)節(jié)。
1. 折疊屏對設(shè)計的影響
官方適配方案來啦(摘取了部分,更全面的可以去查看官方指導(dǎo)文件):https://developer.huawei.com/consumer/cn/doc/90101#h1-2-ux-
屏幕展開與收起的相關(guān)尺寸:
自適應(yīng)動態(tài)布局:
響應(yīng)式動態(tài)布局:
頁面層次:
2. 不同行業(yè)適配界面效果
購物類-淘寶
淘寶在進(jìn)行適配的時候利用大屏的尺寸優(yōu)勢,左右側(cè)進(jìn)行了更多內(nèi)容的顯示,而不是單純的把單屏模式下的界面進(jìn)行了拉伸。
比如你在點(diǎn)擊「天貓新品」的時候在屏幕的右側(cè)展現(xiàn)了下一頁,而在繼續(xù)點(diǎn)擊內(nèi)容時,左側(cè)出現(xiàn)產(chǎn)品的瀑布流信息,右側(cè)出現(xiàn)選中產(chǎn)品的詳情。
這樣做的好處是,你可以一屏瀏覽2中樣式,提高了瀏覽的效率:
視頻類-華為視頻
華為視頻利用自身的適配規(guī)則,在屏幕展開的時候讓內(nèi)容隨布局大小進(jìn)行了擴(kuò)展,我們可以看到包括banner位和推薦適配部分都展現(xiàn)了更多的信息,而在搜索條部分可以看到,沒有把搜索進(jìn)行全屏拉伸,如果搜索的大灰條滿屏拉伸,效果不如一個icon入口更加的協(xié)調(diào);底部Tab bar的入口部分進(jìn)行了間距的平分。
音頻類/音樂播放類
在音頻播放入口部分,在單屏?xí)r,因?yàn)榭臻g有限,在一屏中不可能把所有信息都展現(xiàn)出來,而折疊屏展開后的界面空間變大后可以把歌詞信息直接露出,滿足了用戶在聽音樂或者聽書時看文字的需求;相應(yīng)位置的icon自動進(jìn)行適應(yīng)縮放間距。
筆記類-印象筆記
印象筆記在適配折疊屏?xí)r的方法與「相對大屏」手機(jī)的橫屏效果是一致的,屏幕的加大,文字單行加長會增加閱讀的難度和效率,所以在適配時運(yùn)用左右分欄的方式,讓用戶快速搜索和掃視筆記的列表信息,而當(dāng)點(diǎn)擊選中筆記后,右側(cè)屏幕則在本頁展現(xiàn)筆記詳情,大大提高了筆記的閱讀和書寫的效率:
股票財經(jīng)類-同花順
場景化適配時很重要的思考點(diǎn),比如同花順首頁的單屏幕和展開屏幕的視覺空間的內(nèi)容展現(xiàn),當(dāng)單屏顯示時紅色區(qū)域的5個重要模塊的入口是以icon的形式展現(xiàn),而當(dāng)畫面足夠大之后,很好的把icon轉(zhuǎn)換成了走勢圖,提高了用戶的識別效率;當(dāng)折疊屏顯示區(qū)域足夠大之后包括「股票開戶」等入口和Tab切換位置區(qū)域可以更多的在一屏展現(xiàn)出來,有效的利用了折疊屏的大屏優(yōu)勢。
而在「行情」Tab的內(nèi)容呈現(xiàn)上,利用折疊屏的大屏優(yōu)勢可以看出在大屏的顯示上把單屏顯示內(nèi)容部分的「股票排行」放在了屏幕的右側(cè),可以實(shí)現(xiàn)一邊看大盤趨勢,一遍看股票詳情排行榜,邊看邊分析同時進(jìn)行,提高了瀏覽的效率。
旅游類-攜程
3. 折疊屏交互細(xì)節(jié)分析
彈窗邏輯清晰
在單屏顯示時為了方便大屏操作,很多交互中都把浮層交互置于底部更方便操作區(qū),而當(dāng)展開后,畫面進(jìn)行擴(kuò)展屏幕加大尺寸,此時如果浮層自動縮放拉長,則畫面顯得不夠友好和美觀,比如一樣就有2個標(biāo)題字在左側(cè),數(shù)字在右側(cè),視覺的連貫性也不強(qiáng),所以把浮層置于畫面中間,很好的解決了這個問題,因?yàn)榇笃列枰獌芍皇謥砉餐僮鳎?/p>
畫面調(diào)節(jié)
當(dāng)你同時雙屏顯示時,畫面中間會出現(xiàn)拖動屏幕的bar,你可以通過拖動來調(diào)節(jié)顯示筆記,消除不需要的屏幕內(nèi)容:
側(cè)邊欄快捷入口
在華為的屏幕右側(cè)隱藏著一個快捷調(diào)用的Bar,能夠在你沉浸式體驗(yàn)的時候,「從右側(cè)邊距向左滑動出現(xiàn)」快捷入口,它可以以浮窗的形式出現(xiàn)在屏幕最上方,也可以拖動快捷入口中的應(yīng)用和現(xiàn)有屏幕形成雙屏顯示,比如你在看你喜愛的綜藝節(jié)目時,你還想和你的朋友聊天不退出全屏,這個時候用起來是很爽的交互;場景二是當(dāng)你在看視頻時,還有逛逛天貓這個時候,折疊屏的優(yōu)勢就會顯現(xiàn)出來,不會因?yàn)槠聊恍《淮驍?/p>
折疊屏-背面屏
當(dāng)你需要使用折疊屏的背面屏?xí)r,需要點(diǎn)擊工具「鏡子」畫面就會反轉(zhuǎn)到手機(jī)的背面,此時可以利用小屏幕進(jìn)行操作。
因?yàn)槿A為折疊屏的攝像頭在手機(jī)的背面,所以如果需要和你的朋友視頻聊天時,背面屏的使用還是很高頻的。
高效辦公和學(xué)習(xí)
折疊屏能夠使得畫面分配,這個場景當(dāng)你在工作和學(xué)習(xí)的時候,存儲和記錄變成了一件很高效的事情,你可以一邊讀文章,一邊在你的印象筆記里記錄你的知識點(diǎn):
折疊屏鍵盤
折疊屏的屏幕因?yàn)槌叽缱兇蠛?,輸入文字就成了一個新的交互難點(diǎn)。
華為折疊屏鍵盤有一個特別好的交互點(diǎn),就是可以切換鍵盤的左右,方便左右手不同習(xí)慣手勢的用戶書寫。
拖拽內(nèi)容
當(dāng)你在編輯文章的場景中的時候,希望調(diào)用本地相冊中的圖片,除了選擇原有的添加圖片的入口功能之外,在折疊屏中,你還可以選擇拖拽,沒錯,就是你能夠把你希望的圖片直接拖拽過來,是不是很神奇:
折疊屏的適配問題
華為折疊屏是2020年3月剛剛上市,所以還有很多產(chǎn)品沒有適配的,我們也來看下沒有適配的產(chǎn)品,比如有些產(chǎn)品的界面變形或者有效內(nèi)容信息被裁切,或者沒有很好利用大屏的優(yōu)勢呈現(xiàn)內(nèi)容、彈窗充滿屏幕等等
飛豬APP的開屏被拉伸變形嚴(yán)重、貝殼APP的彈窗在屏幕中的比例問題:
餓了么APP圖標(biāo)過大,一屏中承載的有效信息較少,圖片被拉伸等問題:
網(wǎng)易新聞的開屏在這種折疊屏的適配上直接把一些內(nèi)容進(jìn)行了裁切,比如左上角的「京東618周年慶」,底部的「京東搜索欄」信息:
視頻聊天體驗(yàn)
華為折疊屏使用不太流暢的一點(diǎn)在于攝像頭的位置問題,舉個栗子,如果你想在手機(jī)展開時或者手機(jī)折疊的「正面」視頻聊天是不可能的,你必須用手機(jī)的小屏幕的一面即「背面/反面」來進(jìn)行視頻通話,因?yàn)橹挥斜趁嫫敛庞袛z像頭,如果你想邊操作其他應(yīng)用,邊視頻聊天,實(shí)現(xiàn)不了的,必須把手機(jī)翻過來:
總結(jié)思考
折疊屏的出現(xiàn),帶給設(shè)計師們更多的設(shè)計要求和新的交互邏輯的思考,不論像市場中推斷的那樣,折疊屏是不是手機(jī)未來的趨勢,但多多少少的影響著我們的界面設(shè)計。
不論是哪種折疊屏,對用戶來說新增了一塊可折疊的屏幕,使得1+1大于2,手機(jī)變平板。UI和UX設(shè)計師們需要考慮折疊屏在展開態(tài)不僅僅在單屏頁面中呈現(xiàn)內(nèi)容,而是也可以同時呈現(xiàn)不同頁面的內(nèi)容,帶來一種新的操作體驗(yàn)。
折疊屏特點(diǎn)是可以放大顯示的屏幕面積,滿足游戲和高清視頻的需求;又能輕松的折疊裝入口袋中更加便攜,這將會是可期待的應(yīng)用市場。
折疊屏未來可能成為越來越復(fù)雜的展現(xiàn)平臺,給設(shè)計師們的挑戰(zhàn)會越來越多,折疊屏的交互還有很多可發(fā)掘和改善的地方,期待更加多樣的折疊屏以及折疊屏交互方式的出現(xiàn)。
聲明:文章中配圖僅供設(shè)計師學(xué)習(xí)之用,如有圖片侵權(quán)或者其他問題,請聯(lián)系刪除,謝謝。
作者:Zeal-莊治柱
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)