手机屏幕越来越大,UX设计师面临哪些挑战?

移动开发 Android
从这两年厂商们发布的手机来看,手机都有一个共同的特点,就是屏幕尺寸越来越大。屏幕尺寸变大后,手握手机的方式和界面交互操作方式也随之改变,那对于设计而言,是否也应该随之进行改变呢?

编者按:iPhone X 在 2017 年上市以来,全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现,物理 Home 键都被舍弃改成虚拟按键,甚至是没有虚拟按键的手势滑动操作。

[[316867]]

而这些手机都有一个共同的特点,就是屏幕尺寸越来越大。屏幕尺寸变大后,手握手机的方式和界面交互操作方式也随之改变,那对于设计而言,是否也应该随之进行改变呢?

拇指的操作范围

想单手点击屏幕的操作,需要手足够灵活进行一轮操作才能够到屏幕上方,过程中稍有不慎,手机随时会砸地上。作者的手机屏幕已经修了几次,差不多赶上一台二手机的价格了。

在 2013 年,国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中,对一千三百名手机使用者进行量化研究数据:

手机屏幕越来越大,UX设计师面临哪些挑战?

据当时研究的数据可以看出,有近半的用户是单手使用手机(现在肯定不止)。当用户单手操作的时候,实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域,黄色区域是拇指能触碰到的最大限度范围,红色区域是触摸比较困难的区域。

手机屏幕越来越大,UX设计师面临哪些挑战?

然而这份研究报告的数据是在 2013 年发布,当时还没有全面屏的出现,如果把上面研究结论的区域,套用到如今的手机屏幕尺寸上,顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考,如下图:

手机屏幕越来越大,UX设计师面临哪些挑战?

拇指可操作范围大约在 3 分之 2 的区域,可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况,在当今已经不适用了,因此需要重新去考虑如何为大屏幕手机进行界面设计。

为拇指区域设计

根据 2020 年手机UX设计趋势,大屏幕设计将会成为热点。根据数据报告中有说明,2018 年 10 月使用大屏手机的用户比例是16.3%,到 2019 年 12 月,该数据已经上升到 41%,并且会在未来更多新机型的出现中持续上涨。

那随着大屏幕手机的普及,就意味着设计师在设计界面的时候,要为大屏幕手机的使用场景进行界面调整,避免用户难以使用的体验问题。以下是我整理的一些设计建议方案:

1. 头部区域设计更高

通过将标题栏的信息区域放大,尽量把主要操作内容向拇指区域靠近。

手机屏幕越来越大,UX设计师面临哪些挑战?

 

 


手机屏幕越来越大,UX设计师面临哪些挑战?

 

2. 常用导航与操作居于底部

比起导航栏放在顶部,更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。

手机屏幕越来越大,UX设计师面临哪些挑战?

3. 手势操作页面切换与返回

抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式,对页面进行切换,操作的学习成本很低,而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。

手机屏幕越来越大,UX设计师面临哪些挑战?

4. 提示弹窗从底部升起

常用的弹窗,很多是设计在屏幕中间弹出,为了适配大屏幕,不妨尝试从底部弹出,关键选项都能轻松选择,提高转化率。

手机屏幕越来越大,UX设计师面临哪些挑战?

5. 使用大卡片

屏幕尺寸变大以后,使用整张大卡片可以让用户浏览内容更专注,大面积的配图和留白,也能提高用户的点击欲望。

手机屏幕越来越大,UX设计师面临哪些挑战?

除此以外,作为手机厂商,在发布大屏幕手机的时候,就有对界面操作做了一些对应系统级的设计调整,比如界面下拉悬停,键盘单手模式,屏幕边缘滑动返回等等。

总结

大屏幕尺寸已经是趋势,屏幕大意味着内容可以更大限度地得到展示,有利于产品提供更多的服务,不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代,用户也不再满足于小屏幕的浏览方式。可以说,大屏幕已经是无法改变的趋势。与其担心问题到来,设计师更应该思考如何去适应产品的快速迭代,不断更新自己的设计思维模型,更全面思考问题,产出更合理、体验更好的设计方案。

希望本文内容可以对你有所启发。

责任编辑:未丽燕 来源: 优设
相关推荐

2009-04-25 08:55:05

智能手机应用移动OS

2022-12-27 19:05:54

建筑能源人工智能

2012-05-04 11:13:57

社交应用

2022-02-11 23:49:16

稳定币加密货币金融

2017-12-26 15:34:55

2021-03-03 14:23:06

微信小程序互联网

2019-03-07 14:40:37

前端开发React

2020-12-14 13:18:20

微信空间清理文件

2018-09-25 08:58:50

技术能力效率

2020-07-13 20:26:30

手机64G手机APP

2023-09-22 13:44:34

2021-11-17 11:09:53

比特币美联储货币

2022-07-19 10:14:53

勒索软件网络攻击

2021-09-27 10:23:49

谷歌云平台应用程序

2023-12-04 16:02:13

2017-08-16 11:09:54

App Store开发应用程序

2018-11-28 10:52:45

云计算阿里云微软

2021-11-08 14:15:34

物联网安全技术

2020-09-09 09:17:48

影子物联网网络安全物联网安全

2020-04-07 12:10:08

人工智能技术医药
点赞
收藏

51CTO技术栈公众号