最近超火的折叠屏手机应该如何做交互设计?

  随着折叠屏手机的发布,我们看到未来手机的形态可能会朝着柔性手机方向发展,那么,让我们来思考一件事:如何在折叠屏手机上做交互设计呢?

  最近三星、华为和柔宇各发布了一款折叠屏手机,它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种,也是我目前最看好的手机形态之一(未来手机的形态应该是柔性手机,现在已知有柔性电路板的存在了)。通过几天的观察和思考,我认为折叠屏手机有以下好处:

  更好的阅读体验。目前各手机厂商的折叠屏展开态均大于7英寸,我们看视频时拥有更好地观看体验,同时我们再也不用担心看漫画时字体太小看不清了。

  提升效率。在「展开」模式下空间变大了,多窗口操作成为可能,我们可以一边看世界杯一边用微信和朋友一起视频呐喊。

  易用性。在这里我想到了 ipad 一个不错的特性,打开多个应用后,并在多个应用之间进行文件管理,例如将相册里的图片拖到微信或者邮件里,避免了多个应用之间的来回切换。

  华为在MWC2019上演示了一个名叫「镜像智拍」的功能,它可以让被拍摄的人实时看到拍摄效果,并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍,妹子们再也不用担心自己的男朋友把自己拍得很丑了。

  在折叠状态时可以把背面当做一个附加的交互空间,实现一些简单的交互操作,例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放,这种背部触控方式并不是什么新鲜事,在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。

  除了附加的交互空间,我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序,例如我们可以用主屏幕玩游戏,在加载游戏时翻转屏幕刷个微博,操作起来十分方便。

  折叠屏当然不只有展开和折叠两个状态,还有翻折状态,它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上,实现中远距离的自拍;同时它可以进行多角度拍摄,成为制作 VR 内容的利器。在玩法上,翻折状态可以通过两面屏幕的不同内容引入多人互动的概念,但这种应用场景比较难想象。

  相比外折叠设计,内折叠设计玩法相对较少,在这里我只想到了任天堂NDS 的概念:在翻折状态时它就是两块独立屏幕,它可以独立显示不同的内容,例如上屏显示内容,下屏显示操作区域,打游戏时翻折状态明显要比其他状态舒服。

  个人观点:从以上案例来看,外折叠设计在交互和玩法上都比内折叠设计好,未来很有可能以外折叠设计为主。

  当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大,而是要考虑响应式布局设计。

  描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器,那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上,但现在手机也应该考虑响应式设计,以下是设计时需要考虑的细节。

  它不是简单的响应式设计。从上文得知,「展开」态时要考虑是平板模式还是双屏幕模式,如果是平板模式,那么内容应该在一个整体里;若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。

  调整位置:你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子:为了确保同时展示两个元素,在手机上我们必须采用纵向滚动界面,而在平板电脑上,我们可以调整框架的位置,变为横屏滚动界面。如果你用网格设计这些位置,你也可以不改变内容框架,但其他 UI 元素可以使用响应式设计。

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

  调整顺序:通过调整 UI 元素的顺序和方向,优化内容显示效果。举个例子,在大屏上运行时,可以再添加一栏,并且加入分类列表,这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动,而在平板上使用两栏横向滚动的优化。

  展现:你可以基于屏幕的真实大小,设备支持的功能,特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子,小屏幕上这些按钮通常是被删减的,但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。

  换位:这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单:小屏幕上他是隐藏在汉堡菜单中纵向排列的,但是在大屏幕上,更大的 Tab 是更好地选择。

  改变结构:你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。

  考虑用户翻转折叠屏幕时的场景和动机是什么,从而优化现有界面及交互流程,举几个例子。

  以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面,使游戏的沉浸感更强;当玩家采用大屏模式时,我们可以认为玩家需要获取更多信息,这时候把聊天、装备等相关功能界面展示出来。

  当用户在微信里查看定位信息有新消息提醒时,手机变成大屏模式时应该同时存在地图界面和聊天界面。

  Google 在2018年11月就宣布了对折叠屏的支持,包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验,必须考虑以下两个方面:生命周期管理以及转场动效。

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

  从目前 Google 公布的新版 Android系统来看,已经可以做到当折叠/展开设备的时候,页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。

  注:由作者撰写的《AI改变设计——人工智能时代的设计师生存手册》已经上架了,欢迎购买 →

  AARRR模型因其掠夺式的增长方式也被称为海盗模型,是Dave McClure 2007提出的,核心就是AARRR漏斗模型,对应客户生命周期帮助大家更好地理解获客和维...

  当你在做饭的时候,发现油盐酱醋被放到了东南西北5米外的桌子上,你会怎么想? 当你发现从家走到超市的路被堵住了,你必须要走两倍的路才...

  一、CONCEPT 近几年,AR/VR 的概念非常火热,许许多多的科技公司投入到这股浪潮之中。 2017年上半年我参与了「小白墙」产品项目,这是一款通过 M...

  @薛斯塔 :京东iPad作为一个独立的客户端app,在外界看来一直处于一个比较尴尬的境地。一方面对标的电商类竞品们大都放弃了Pad阵地,基本放弃了原生界面的...

  网易UEDC – 张书超 : 在过去一年多的时间里,188bet滚球专家我有幸参与了电视端大屏幕的项目。在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些...

  今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的一个颠覆性作品,车内...

  微交互应该火热了相当一段时间了。它成为话题中心很大程度是因为微交互所带来的令人动容的体验。如果说要界定微交互,那么它应该是围绕着用户完成单个任务前后而存在的...

  呆呆:经常会收到一些小伙伴提的问题,大部分也都不怎么去回复,除了个别比较值得讨论的我会仔细解答一下。所以就想把那些好问题拿出来,不是对一个人解答,而是与大家...

  Echo :交互设计师真正提高的标志是思维思想上的提高,而非专业技能的提高。 去年四月份,带着平静的心情来H区面试ITUX项目组。初次进入H区,有种安静、祥...

  王M争:前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发现直接回到了搜索结果页面,把刚才那层...

  对于用户而言,网站不仅仅需要有优美易用的布局和漂亮美观的图片,网站的细节和整体体验都要足够突出,才能让人印象深刻。 你想让访客去哪里,希望他们看到什么,以及...

  说出来你可能不信,我去了几家公司,每个公司里都让我制作设计规范,说是为了便于公司规划流程化管理,当时我可是费了老大劲...

  不会适配 iPhone X 的设计师不是好设计师,本专题既有 iPhone X 的交互方式分析,也有 iPhone X 适配指南,更有超多适配案例经验分享。学会收藏,适配不难!

  不是专业设计师怎么做好一份PPT呢?有这份PPT 设计专题就够了!从基础方法到进阶技巧,从排版、配色、字体、动画到PPT 的相关插件、模板应有尽有。

  在这儿不仅可以找到几十万张免费可商用的图片,还有超多特色图库,包括NASA 太空图、多边形图、美食图、故宫图等,搜索更精准!另外我们还贴心为您准备了高级设计师会用的图片管理术和管理神器哟~

0
首页
电话
短信