路野TK

辽宁35选7的开奖号码是多少:原來折疊屏是這樣設計適配的(附案例實戰)

路野TK APP設計 3000瀏覽

辽宁35选7开奖哪个台 www.duulp.com 自從折疊屏手機出產以后就備受關注,作為設計師來說更為關注其如何進行設計適配,今天以案例實戰形式帶大家一起進行探索,希望拋磚引玉。

 

寫在前面

隨著智能手機的飛速發展,無論是技術層面還是用戶體驗層面都在不斷的提升,滿足用戶在工作和生活中的各種需求。除了在性能層面不斷優化提高以外,屏幕也在逐漸變大,已經不僅僅是滿足于通信的單一需求,說不定以后就是一臺可以裝進口袋的微型電腦。

各大手機品牌也在不斷的挑戰屏幕的邊界化設計,帶給用戶更大屏的體驗。2019年算是這一嘗試的元年,折疊屏手機給出了這一解決方案,目前已經有品牌成功上市。從曲面到大屏再到折疊屏,這一概念的想法已經成為現實,拋給設計師的又一新問題已然來臨,如何進行產品設計,最近也進行了嘗試,希望與大家一起探討。

 

折疊屏的思路解析

折疊屏與早期的翻蓋手機有點異曲同工,翻蓋手機基本上是向內操作,而折疊屏在這一基礎上做了多種可能性的延展。

從折疊的方式和角度可以分為:內折疊、外折疊、X軸折疊、Y軸折疊等,目前這四個方向算是較為常見,以后也可能會在更多角度進行探索。

 

UX 設計探索

新的技術雖然可以帶來多樣化的體驗,但是也需要眾多產品能更好的為其適配,畢竟用戶對于手機的需求不只是通訊,需要滿足更多工作需求和生活娛樂需求等。

下面以華為折疊屏為大家進行分析,在正式進行案例實戰前我們先結合華為官方提供的折疊屏應用開發指導梳理一下。折疊屏產品最常見的使用狀態有折疊狀態和展開狀態,這里的 UX 設計難點是如何適配從折疊態轉化為展開態。

隨著屏幕大小之間的轉換,設計布局需要進行自適應變化,利用動態布局可以提供更好的用戶體驗。

 

一、內容自適應動態布局

隨著屏幕尺寸變化打破了橫向空間的束縛,內容自適應動態布局可以采用相對拉伸的方式。當屏幕寬度發生變化,界面元素顯示寬度隨著變化而延展。

 

二、內容縮放自適應動態布局

內容縮放來自適應界面布局相對比較方便,但是需要判斷界面元素是否適合該形式。當屏幕尺寸變化時,界面元素等比縮放,若是類似視頻播放、圖片預覽等形式比較合適,帶來更強的視野感。

 

三、橫向延展填充布局

折疊屏最大的特點之一就是屏幕橫向空間得到擴展,利用橫向延展填充界面元素時,在間距固定的情況下可以陳列更多內容。通常以變化同屬版塊的內容為最佳,如果是不同版塊進行橫向延展填充需要考慮內容相互之間的協調性。

 

四、內容響應式挪移布局

當內容相對固定無法通過橫向延展來填滿適配時,可以考慮響應式布局,挪移布局便是不錯的選擇。根據界面元素的布局情況考慮不同版塊的上下左右布局,比較適合信息層級簡單的界面,卡片式設計最佳。根據呈現的效果優先考慮左右布局,放不下時選擇上下布局。

 

五、內容流動式布局

利用屏幕寬度變化優勢將內容進行分屏式布局,兩欄或者多欄,對于折疊屏來說兩欄為最佳。通常是調整界面內容版塊去填充屏幕展開后而多出的部分,可以是次級內容或者功能操作后的詳情頁面內容。

在布局上面以華為折疊屏舉例可以是展開態的部分,也可以基于最終的屏幕寬度進行重新分配,需要根據界面內容而定。

 

六、導航式提煉布局

這種形式適合在內容層可提取重點分類的設計,以華為折疊屏舉例適合把這部分布局安排在展開態的部分。和內容流動式布局類似,不過這種類似于導航切換的形式,可以在當前界面頻繁進行對應功能的詳情切換。

 

七、其他形式布局探索

技術在不斷革新,作為UX設計師需要隨著革新探索新的設計解決方案,相信關于折疊屏的設計還有更多可能性。不同的產品和功能會有新的要求,以上僅是一些較為常見的思考,期待大家提出更好的方案。

 

案例實戰:ZCOOL 遇上折疊屏

以華為折疊屏為基礎進行案例實戰分析,結合 ZCOOL 產品在折疊屏上的設計適配為主。以下設計解決方案僅為個人嘗試與思考,不足之處互相探討。

以下案例部分結構做了優化調整,通過對折疊狀態的界面重設來滿足更好的適配于展開狀態。本次案例實戰主要以主界面為主進行適配,并未全案設計,以講解思路為主。部分作品配圖來源于黑馬家族的成員作品,與站酷推薦性質無關,僅作為案例配圖使用,拋磚引玉望大家補充。

首頁

ZCOOL 的首頁以展示推薦作品為主,從折疊狀態適配到展開狀態時做了兩種方向的嘗試,首先是橫向延展填充布局。這樣的適配方式不僅保持了折疊狀態的界面元素布局樣式,在相互板塊之間間距不發生變化的情況下,可以利用橫向空間的增加填充更多內容。

除了利用橫向空間的增加填充更多內容以外,也嘗試了利用新增空間作為分屏形式來設計,如同內容流動式布局。保持折疊狀態內容呈現不變,展開部分顯示對應的詳情頁內容。這樣的適配形式適合首頁為固定??櫚哪諶?,設置好首頁的反應熱區,當內容移動到該區域的時候自動切換展開屏的詳情內容。

詳情頁

基于首頁的適配形式,詳情頁的適配設計了兩種方向,除了上面提到的形式以外,內容縮放自適應動態布局也是一個可取的方向。信息內容隨著屏幕展開而自適應,圖片內容以縮放的形式等比適配,對于視覺作品來說可以呈現更好的效果,文章作品來說可以呈現更多閱讀內容。

ICON 設計

為了配合案例實戰針對底部標簽欄的 icon 設計做了優化,以 ZCOOL 品牌融入,筆畫飽滿圓潤,以黃黑為主的品牌色進行配色。點擊狀態的黃色短線裝飾與作品分類等類目的強化短線采用了相同表現手法,以視覺符號增強視覺表達的一致性。

 

發現 – 推薦

ZCOOL 的發現頁面采用了內容自適應動態布局和橫向延展填充布局相結合的適配形式,既可以保持界面元素大小不變,也能呈現更多內容,增強瀏覽體驗??梢愿菡鄣刺慕緱嬖亟惺逝?,如果有隱藏內容可以利用展開狀態進行延展呈現;如果內容固定(金剛區)可以利用間距調整達到適配的目的。

發現 – 酷友圈

酷友圈在布局上面進行了局部功能的優化,將發布置于底部便于操作,功能入口也更為明顯。展開狀態采用了內容響應式挪移布局,也和橫向延展填充布局一樣,都是利用延展空間展示更多內容,以瀑布流的形式呈現酷友發布的動態。

消息

ZCOOL 的消息界面為了更高效的處理信息,利用新增空間作為分屏形式來設計,如同內容流動式布局。運用展開的空間呈現次級內容,也方便用戶在當前狀態即可完成對于信息的處理。不過這里有個問題就是由于默認呈現有可能該信息容易被忽略而直接已讀了,這里還可以繼續深入嘗試(一起去思考)。

我的

ZCOOL 的個人中心利用展開狀態形成的分屏空間結合內容流動式布局,保持折疊狀態內容呈現不變,展開部分顯示作者作品列表。不僅便于進行相關功能操作,也方便進行作品管理,充分利用了延展空間的優勢。

 

小結

雖然折疊屏目前還未成為主流,作為設計的一種探索進行了本次案例的嘗試,在保持折疊狀態界面元素不變的情況下作為展開狀態的適配是最為便利的,不過我們也要重點利用新增的空間來完成更多交互內容,帶給用戶更好的體驗。由于缺少真機測試很多交互思路僅為個人嘗試與思考,主要是探索如何將現有的設計進行延展,不足之處望大家補全,僅為拋磚引玉。

參考文獻:

https://developer.huawei.com/consumer/cn/doc/90101

 

原文地址:黑馬家族(公眾號)
作者:黑馬青年(黎波)

 

轉載請注明:辽宁35选7开奖哪个台 » 原來折疊屏是這樣設計適配的(附案例實戰)

登錄收藏
 
你可能喜歡的:
設計驅動案例-如何優化金融產品購買體驗?設計驅動案例-如何優化金融產品購買體驗?
體驗設計的全鏈路案例——青桔單車體驗設計的全鏈路案例——青桔單車
Material Design Gestures 手勢Material Design Gestures 手勢
設計沉思錄丨如何利用場景化設計提升用戶決策效率設計沉思錄丨如何利用場景化設計提升用戶決策效率
用灰色文本字段來拯救你的注冊表單設計用灰色文本字段來拯救你的注冊表單設計
1套流程,帶你看遍1000萬個產品設計的從0到11套流程,帶你看遍1000萬個產品設計的從0到1
聊聊加載等待的那些事之“進度指示器“(落地篇)聊聊加載等待的那些事之“進度指示器“(落地篇)
設計系統的道與術——上篇設計系統的道與術——上篇
Material Design Customization 自定義Material Design Customization 自定義
組合組件的交互規范整理方法組合組件的交互規范整理方法
?