折叠屏手机或将大热 如何在折叠屏手机上做交互设计

最近,不少手机品牌都发布折叠屏手机,它可以把一台8英寸的平板电脑,通过折叠的方式变成方便携带的6英寸手机。而随着折叠屏手机的发布,未来手机形态可能会朝着柔性手机方向发展,那麽,如何在折叠屏手机上做交互设计呢?

◆ 折叠屏手机的好处:

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

1. 更好阅读体验,目前大多公布的折叠屏手机展开的尺寸均大於7英寸,这给用户在看视频、浏览网站时将带来更好的观看体验。

2. 提升使用效率,「展开」模式,使网站屏幕的空间变大,多窗口操作将成为可能,更方便用户在同时间使用多个软件。

3. 文件管理易用,参考「IPad」的特性,即打开多个应用後,能在不同应用之间进行文件管理,避免多个应用之间的来回切换。

基於以上「展开」态的好处,下面我们来看看折叠屏手机怎样做交互设计?

◆ 折叠屏手机怎样做交互设计?

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

1. 响应式布局

折叠屏从小屏往大屏发展,设计师不应该单纯考虑将画面按等比例放大,而是考虑进行响应式布局设计。以往,响应式设计多用户在PC端网页设计上,现在为了解决不同移动设备的尺寸问题,手机网页设计更应该考虑响应式设计。

· 那麽,手机在进行响应式设计需要考虑什麽?

它不是简单的响应式设计,从目前的各品牌推出的折叠屏手机样板来看,其模式主要有两种:平板模式和双屏幕模式。若平板模式,网页设计上所有内容应该在一个整体内;若是双屏幕模式,则需要考虑不同屏幕展示不同内容问题。

· 折叠屏手机的响应式设计技巧包括什麽?

① 调整位置:改变UI元素在不同屏幕上的位置,比如下面的这个例子。为了确保同时展示两个元素,设计师需要考虑,手机需采用纵向滚动界面方式;而平板电脑则需要调整框架位置,变为横屏滚动界面。
折叠屏手机或将大热 如何在折叠屏手机上做交互设计

② 调整尺寸:通过调整界面空白和UI元素的尺寸优化框架,比如下面的例子,就是通过简单的增大内容框架尺寸,提升大屏幕的阅读体验。

折叠屏手机或将大热 如何在折叠屏手机上做交互设计
③ 调整顺序:通过调整UI元素的顺序和方向,优化内容显示效果。如在大屏上运行时,可再添加一栏,并加入分类列表。
折叠屏手机或将大热 如何在折叠屏手机上做交互设计

④ 展现:基於屏幕的真实大小,设备支持的功能,特定的情况或屏幕方向展示界面。如下图的例子,小屏幕上某些按钮/功能一般会被删除,而在大屏幕则将会保留。

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

⑤ 换位:这项技巧主要适合那些特定屏幕方向或屏幕方向切换特定的界面。下面的导航菜单,小屏幕采用隐藏式汉堡菜单纵向排列;而大屏幕则是采用更大的Tab更为适合。

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

⑥ 改变结构:这适合为特定的设备优化特定的结构,下面这个例子就是两种不同的结合结构。

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

2. 场景化设计

在设计折叠屏的交互设计,首先要考虑用户使用反转折叠屏幕时的场景和动机,才能优化现有界面以及交互流程。

以RPG游戏为例,玩家使用小屏幕时,可设计收起所有功能的界面,使游戏的沉浸感更强;当玩家采用大屏幕时,可把聊天、装备等相关功能界面展示出来,帮助玩家获取更多信息。

此外,用户使用社交软件查看定位信息,且有新消息提醒时,手机变成大屏幕时,可同时展现地图界面和聊天界面。

3. 应用生命周期管理

目前大部分手机应用为了给用户带来更流畅的体验,设计师都会对应用做适量的生命周期管理,例如:IPhone的应用会定期释放相关内存。因此设计师在设计折叠屏交互时,可考虑哪些页面不能被销毁;页面一定要让用户可进行不同模式的操作;应用任务不中断不重启;产品可自动适应各种屏幕下的静态布局规格。

◆ Google宣布对折叠屏的支持

折叠屏手机或将大热 如何在折叠屏手机上做交互设计

2018年11月,Google支持对折叠屏的支持,包括多窗口支持、不重启适配等。此外,从目前Google公布的新版 Android系统来看,已经可做到当折叠/展开设备时,页面和内容可从一个屏幕自然切换只另一个屏幕。设计师在设计界面,应基於Google的技术规范考虑内容、组件等模块转场效果。

 

未来,手机趋势或将往柔性手机方向发展,设计师不妨多观察和参考柔性手机的交互设计发展,以应对未来手机市场的变化需求。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/43411.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月25日 23:42
下一篇 2022年6月25日 23:42

相关推荐

  • 网页设计预测:不同类型设计的色彩趋势

    色彩,无论是对网页设计、APP设计还是平面设计等都是非常重要的部分。很多时候,我们在欣赏优秀设计作品时,总以为色彩是保持不变,但实际上色彩每年都有新的流行趋势。 因此,当你准备开始新的设计项目,了解最新…

    2022年6月25日 建站资讯
    0162
  • 如何有效的防止网页可用性出现问题

    一、 减少错误的出现 进行网页设计的时候不要先急着出方案,而是站在如何降低页面当中出现错误的可能性进行思考和分析。比如提交按钮的设置,不要告诉用户只能够点击几次,而是直接在用户点击之後进行按钮的禁用设…

    2022年6月15日
    0109
  • 提升网站的用户体验,先喝点鸡汤

    以用户体验设计为主要方式的网站设计,应该还记得滚筒形式,是早前比较流行的。但是,对於用户来说,这种形式并没有多麽好,因为违背了用户体验的重要原则:需要用户回到页面当中才能够被识别。 由此得出一个经验:…

    2022年6月25日
    0114
  • 为什麽要建议你要使用底部导航?

    首先你要明白,除了手机端的界面设计,平板端的界面设计也是会有难以交互的现象出现。有相关的研究表明,49%的用户都会习惯使用单手握持以及拇指来完成界面浏览和操作。这个研究表明,可以展开分析,对於热区的内容…

    2022年6月25日
    0108
  • 网站架设基础知识:网站架设前需准备什麽资料给网页设计公司

    大多企业品牌在选择南宁网页设计公司时,常常会为资料提交方面存在疑惑。毕竟,再专业的网页设计公司都需要了解产业性质以及企业的基本资料,才能让网站精确地呈现企业风格,做到尽善尽美。那麽,网站架设前需准备…

    2022年6月23日
    0118
  • 进阶技巧!从4个角度教你打磨视觉设计细节。

    随着体验设计的持续发展,行业内各领域的体验设计质量都有了很大的提升,并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求,也是我们拉开竞品差距的关键一环。我们平时…

    2023年3月2日 SEO操作
    01
  • 网页设计案例分析:如何利用手机版UI设计增加消费者的购买意愿

    如何利用手机版UI设计增加消费者的购买意愿?在智慧型手机的推进下,全球智慧型手机的普及率逐年上升,现在吃喝玩乐几乎都可以通过一部智慧型手机实现。那麽,消费者使用智慧型手机上网都在做些什麽事情? 据数据统计…

    2022年6月21日 建站资讯
    0227
  • 面包屑导航的类型

    基於位置的类型 基於位置的面包屑导航,优点是能够很好地突出网站建设的结构特徵。因为它们可以直接的将网站层次结构呈现给用户,可以包含有多个层级。尤其是对於从外部而进入网站的用户来说,有良好的指引性。 基…

    2022年6月25日
    0138

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息