• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 单手操作不方便?来看这两个新颖的交互方式是怎么做的!

单手操作不方便?来看这两个新颖的交互方式是怎么做的!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含交互设计,手势设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

编者按:当手机屏幕越来越大时,该如何保持单手操作的便携性?今天这篇文章提到了两个新的交互方式,值得一看,说不定有启发哟。

大屏手机有很多优势,大屏手机的趋势未来还会持续下去。但大屏也不是什么都好,更大的显示屏幕并没有承载更多的内容。实际尺寸和功能多少对于高、低分辨率显示是相同的。Steven Hoober 2013年的手机设备研究报告发现:49%的用户通过单手持机操作,36%的用户一手拿着手机一手操作,另有15%的用户双手持机操作。

2017年,并未有太多改变,单手拇指触控操作正在成为常态。首先,这样的操作比较方便;其次,同时使用双手并不总是太方便。但这里就有一个障碍:单手持握使用限制了你拇指能够触控的区域范围。

这就是为什么最好将应用程序的常用操作放在屏幕底部的原因。

因此开发大牛们开始关注用户是如何与他们的设备进行交互。即使为单手持握设计的应用已经无处不在。好消息是在努力改进产品的同时,大公司也在完善用户体验。

用户的反馈是无价的,最主流的应用服务也会收集、分析用户反馈,以此进行产品升级和优化。 通常,这些改变都会涉及到可用性,但不是所有更新都是我们能看得到的、视觉层面的优化。当和设备进行交互时,我们就会感受到这些优化,你的交互操作将变得更加自然流畅、毫不费劲。

根据舆情、反馈改进的产品在iOS和Android平台上变得越来越普遍,不仅仅大公司是如此,初创公司也是如此。如今,每一个创业公司都清晰认识到:用户需要支持到单手操作的应用。

Flipboard 和 Ada 就是非常不错的例子。

Flipboard是一个个性化的杂志,汇集来自新闻和社交媒体网络的内容,使你能够发现和分享你喜欢的故事,视频和照片。

屏幕截图展示了Flipboard的核心功能是如何布局的。差异不同之处是顶部导航栏的调整,顶部导航是iOS的典型设计。现在此设计转移到了屏幕底部,处于拇指触控区的位置。请注意!个人资料按钮放置在标示红色的难触控区。因此,Flipboard允许用户可以右滑打开个人资料页面。

搜索图标出现在屏幕中央的位置,它保持在黄色区域,需要拇指伸展。

Ada的开发大牛们创造了一个完全创新的导航设计。Ada是一个健康应用的程序,它会询问问题并提供个性化信息来改善健康。这个革命性的界面相当简单。它是一个基础界面结构的翻转镜像。一切被放置在顶部的内容都被重新放置到了屏幕底部,在上图中的绿色区域。

首屏界面如下所示:

采用汉堡导航的设计无法在当前界面展示App功能,因此汉堡导航略显过时了点。Ada 通过一个更自然的左滑复用了这一设计。

菜单列表放置在较低的位置,也没有人被负空间所惊吓到,因为这一设计显然是经过深思熟虑的。Ada的子视图也应用了拇指触控理念。

去年,我们产生了做一个可以单手操作的通话应用程序的概念设计。针对于拨号、消息应用,我们倾向于使用单手来完成进行拨号、输入操作。该设计没有从概念阶段落地实施,客户对整体功能性改版保持警惕心,这可能会疏远已经习惯界面结构的用户。

总结

首先,应用程序开发人员必须考虑用户和目标受众。这些是任何未来应用程序用户体验的基石。您的应用程序越简单、合理、便捷,就越有可能吸引更多受众。必须要紧随潮流 – 今天潮流新鲜的东西可能会在明天变得陈旧不堪。

欢迎关注非科班设计公众号:

「导航设计指南」

  1. 5种实用APP导航菜单设计
  2. 底部导航设计的四个关键原则
  3. 最热门的12种导航模式
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。

优设大课堂

您可能想查找下面的文章:

  • 交互设计和心理学之间的18条奇妙联系
  • Apple Watch 交互设计中四个全然不同以往的经验揭密
  • 资讯类产品阅读列表的交互设计思考与经验分享
  • 163邮箱登录框交互设计的改进经验与分享
  • 超全面!Android 应用与iOS 应用之间的设计差异对比
  • 超全面的设计异常情况和处理方式汇总
  • 以Apple Music为例,为你解读格式塔7大法则
  • 界面设计中,交互方式是选择滑动还是点击呢?
  • 新手交互设计师如何迅速成长?爱彼迎高手来教你!
  • 在开始 VUI 设计之前,你需要做些什么?

相关文章

  • 2018-08-23为什么你做的设计总是不耐看?
  • 2018-08-23零基础必备:详解十种常见的水彩基本技法+问题总结
  • 2018-08-23高手课堂!3招搞定数字元素在Banner及专题页设计中的运用
  • 2018-08-23学会这4个心理学小知识,你的设计会更有说服力!
  • 2017-08-06整理CSS中遇到的一些常见问题(Hack标识/固定容器/图片垂直居中)
  • 2018-08-23Airbnb设计副总裁:设计的困境与出路
  • 2017-08-06CSS常见11条技巧与经验收集
  • 2018-08-23超实用!3分钟带你掌握11个最常用的交互控件
  • 2017-08-06把网页变成黑白(兼容谷歌、火狐、ie等浏览器)
  • 2018-08-23这10个思路,能帮你设计出简单易用的网页

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 豆瓣9.0分的《我不是药神》,海报也是超高分!
    • 设计师该不该跳槽到区块链公司?来看入职的人怎么说
    • 如何选择设计保真度?来看 IBM 设计师的经验!
    • 那些很熟悉但又叫不出名字的设计法则:冯·雷斯托夫效应
    • 复制和粘帖是封装的大敌
    • 深度好文!如何积极正确地使用「预设计」方法?
    • 授人以渔!用一个清晰的思路帮你掌握移动界面标注
    • 基础小课堂!从零开始教你做高保真原型图+UI 设计规范
    • 水彩自学第三集:水彩笔常见问题及测评
    • web开发设计人员不可不用的在线web工具和应用

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有