恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
触摸交互设计——布局篇
0.0°
2014-11-19 好文转载 经验/观点 原作者: 原作者 举报 14555 22 30 4

初试触摸交互设计之布局篇

您忠实的作者,Josh Clark我年轻的时候手臂上一直都系着一块线条优美的卡西欧计算器手表,直到1985年,这块手表才退休。这块手表的问题不但在于按键太小,还在于这块手表太死板,使我没能成为当年“最受欢迎男生”。以及,手表按键彼此之间贴的太紧。你本来想按个5,结果出来个2或者8——这更像个随机的转盘赌游戏,而不是精确操作的计算器。按键尺寸,换句话说,并不是影响触摸精确度的唯一决定因素;还需要考虑的是间距问题。

Photo by Jon Rawlinson

当针对小屏幕进行设计时,由于空间有限,设计师不可避免的会压缩控件间距,以期传达完善——这是一种设计理念上的诱惑。“我只是将控件布局的稍微紧密了一点。我只是在工具栏中多加了一个按钮而已”我对这种现象的看法,要引用计算器手表全盛期那时的一句口头禅:“我只想说,‘不’!”

 

按钮的排列越紧密,就越应该选择更大的尺寸。看看iPhone上的VoIP通讯应用,Skype和Call Global。两者的按键都紧密的贴在了一起,但是补偿措施是将按键设置的更大,尺寸都超过了44 x 44这一最小尺寸。尽管按键极为贴近,但是依然非常易于点击。

两款应用的不同之处在于屏幕的底部。这两款应用都在底部导航栏的上方堆砌了几个按钮,正如本章所提到过的,这样设计并不理想。但是Skype中,这些按钮很大,这就一定程度减轻了问题的严重性。在Call Global中,这些拥挤在导航栏上方的按钮实在是太小了,而且和导航栏贴的这么近,很肯能会导致用户操作失误。尽管为了防止出错,专门设置了比最小尺寸44 x 30更大的触摸对象尺寸,但是在屏幕底部,由于控件之间缺乏足够的间距,以及容易出错的堆砌方式将会导致操作问题。合理的布局需要更大的按钮尺寸和更从容的控件间距。

尽管似乎有点有违直觉,但即使是小屏幕的触摸交互界面,若想满足用户体验需求,就必须依赖大的界面元素,矮胖的按钮以及顺畅的间距。屏幕可能很小,但是我们的手指(以及注意力跨度)并不小。在设计的时候要为肥胖的手指考虑。让设计为手指和手的操作提供舒适,这很重要。但是这仅仅是成功的一半,仅仅是设计的人机工程学部分。在交互设计中还有很多精细的工作要做。

 

更新:2014-11-19

收藏

22人已收藏

Cyy_Emma

接设计私活,q交流群:145065052

  • 35

    作品

  • 425

    粉丝

  • 21

    关注

  • 利用Tableau开发通用性Dashboard指南
  • 优雅Dashboard,附送Sketch源文件~
  • 第二阶段C4D练习
  • 2016年11月移动端交互设计Top 5
相关标签

    猜你喜欢

      2014-11-19 好文转载 经验/观点 原作者: 原作者 举报 14555 22 30 4

      触摸交互设计——布局篇

      0.0°

      你确定要举报触摸交互设计——布局篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年11月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      30
      22
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录