大屏手机界面如何设计,才能提升用户的交互体验?

用户头像
广州/设计爱好者/5年前/403浏览
大屏手机界面如何设计,才能提升用户的交互体验?

诚然大屏手机可以承载更多的内容,让用户获取信息更加高效,但大屏手机在操作体验上的不足也是无法忽视的

本文共计1469字,阅读时长大约5分钟。


乔布斯曾经说过:“3.5英寸屏幕是手机的黄金尺寸,更大的屏幕十分愚蠢。”

Jobs said that a 3.5inch screen is a perfect size for consumers, and that larger screens are foolish.

如今14年过去,iPhone的屏幕也从最初的3.5英寸发展到了目前最大的6.7英寸,不知道乔布斯看到此情此景,会有何感想?

论单手操作的话,小屏幕确实会更加适合。但乔布斯当初也不会想到,现在的人们会对手机的依赖会到如此程度。过去手机只是人们沟通联系的工具,而现在手机不但可以快速与人联系,还充当了游戏机、影音播放器等娱乐终端,甚至还可以作为钱包、车钥匙,内置了语音助手,大大便利了人们的生活,可以说现今人们的手机已经成为了第二大脑,在这样的情境下,屏幕自然是越大越好。


大屏下的单手操作,太难了

诚然,大屏手机可以承载更多的内容,让用户获取信息更加高效,在娱乐需求(看视频、玩游戏)的满足上体验更好。但大屏手机在操作体验上的不足也是无法忽视的。

首当其冲的,就是点击的困难——


上面两张截屏分别是iPhone的日历和Apple Store,标红的区域都是页面中比较重要的交互控件,但想要点击并不轻松,因为他们都处于屏幕中用户比较难点击的区域。

对于手机界面交互来说,可以对屏幕进行分区,对操作难易进行区域划分:


上图是在单手握持手机状态下,右手及左手用户操作屏幕难易区域的划分,以这两个APP界面为例,最高频交互的内容都在最困难的区域,最容易点击的区域反而没有放置什么内容,这明显不太合理。这样的设计在我们的手机上无处不在,可以说,有很多APP的UI设计并没有合理的设计内容的布局以及交互,那么怎样的设计,用户体验上才能更加友好呢?


目前来说市面上主流的设计方案主要可以分为三个类型:

· 操作控件下移;

· 放大交互对象;

· 用手势代替点击。


1、操作控件下移


上图中,左图为微博官方客户端,搜索栏在最顶部,也是大多数APP选择放置搜索栏的位置;右图为微博第三方客户端VVebo的搜索页设计,开发者把搜索栏放在了底部,相对两者来说,右边搜索栏的点击还是要更加容易一些。


这样的设计也并非完美,因为大多数用户已经习惯了搜索栏在顶部,特别是第一次使用产品的用户而言,可能会很难发现VVebo底部的搜索栏,我第一次使用时就遇到了这个问题。高德地图的首页设计则要灵活一些:


这是高德地图早前更新的新版首页,首页中的搜索栏从顶部移到了下方,从操作体验上来说更加便捷。对于已经习惯了搜索栏在顶部的老用户,也可以在设置中进行修改,继续用回旧版本的布局,增加了用户对界面的可控性。


可以看得出,仅仅只是一个搜索栏布局的优化,就可以大大提升用户的操作体验。


iPhone相机中,把拍摄设置都放置在了界面下方,通过上下滑动进行切换展示。


2、放大交互对象


在iOS的APP Store和音乐APP中,苹果设计师采用了卡片式设计,大大增大了元素的可点击区域,操作体验更佳。


3、用手势代替点击


在刚更新的豆瓣7.0中在一级页面加入了左侧边栏,在页面的左上角加入了点击展开的汉堡菜单按钮,如果只是光靠点击进行交互,不管是按钮的位置还是大小都十分不方便点击,所以很自然的引入了手势操作,只需要在屏幕左侧边缘向右滑动就可以呼出侧边栏,同样的操作也出现在了几天前更新的微信8.0新版中,只不过新版微信的侧边栏目前的功能还比较单一。






在条件允许的情况下,可以尽量采用手势操作代替点击,这样用户在与页面交互时就不需要局限在某个按钮区域,操作效率更高。



总结

大屏手机的发展是大势所趋,在不久的未来当技术成熟之后还会有很多折叠屏手机上市,屏幕尺寸将直接翻番,提供给用户的使用体验也许会有颠覆性的 变化,对UI设计师来说如何充分利用大屏的优势,同时兼顾用户体验,将是一个不小的挑战。


7
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
高级表盘系列UI源文件
钱包ui模板
户外旅行飞机情侣假日出行
【新年UI图标】秒杀icon
3D渐变流体抽象矢量UI背景图
盲盒APP UI设计
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】会员icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】钱包icon
新拟态风格 UI设计组件库
高级感金属拟物 UI设计组件库
Security Camera UI kit
UI 登录界面设计模板包
新能源APP应用UIKit
UI通用设计素材1
手表表盘UI系列
【新年UI图标】礼物/活动icon
【新年UI图标】汽车icon
我的钱包-UI界面设计-app
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
你可能喜欢
相关收藏夹
大家都在看
登录注册