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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
触摸交互设计——平板篇
0.0°
2014-11-19 好文转载 经验/观点 原作者: 原作者 举报 10512 38 23 1

平板上的交互设计:注意边角

拇指法则在iPad上依然有效,但是根据持握方式的不同产生了多种拇指热区。iPad持握方式取决于身体姿势。站立的情况下,你需要用两只手持握平板进行敲击触控。坐在桌子前,你需要一只手托住平板,另外一只手敲击。躺下或者倚坐在沙发中,你会用一只手把平板立在你的肚子上,另一手进行操作。

在所有这些持握方式中,手指在设备上所能控制的区域范围也不同。而且设备与用户之间的距离也不同。当我们站立的时候进行操作,我们会下意识的让平板离自己的距离近一点,其一是为了更好的阅读,其二是为了防止花落。当我们躺下的时候,由于角度的问题,我们会吧平板放在离自己远一点的地方才能看清屏幕。

尽管iPad的持握方式多种多样,但是我们可以肯定两点:第一,我们一般习惯持握iPad的上半部分(因为杠杆原理),这就意味着,拇指一般在屏幕的三分之一处(上部分)活动,比较接近平板的边角。第二,iPad的大屏幕,导致了信息量的提升,用户在手机上扫一眼就能知晓大致内容,但是在平板上不能,而且,平板的视觉引导有点像印刷设计,用户的视觉注意力很自然的集中于平板的顶部,因此信息层级的设计应该遵循这种用户习惯。

换句话说,在iPad上,眼睛和手指都很自然的作用在设备的上部分。(有时候,下半部分无法阅读。当用户躺着的情况下,iPad一般是倾斜的,在光反射的作用下,底部有时甚至一点都看不到)

跟手机不一样,iPad app的主要控件和按钮应该放在上半部分。更具体一点,应该放在上班部分的两边角。当你握住iPad的时候,在这片区域,拇指能够很自然、很灵活的移动。Instapaper和Twitter的iPad版就是很好的示范:

要避免将控件放在顶部的中央,如果控件放在顶部的中央,就意味着在操作的时候你的手将会挡住内容。控制按键绝对不能在内容的上面,影响阅读,因此把控件放在边角是个不错的设计模式。The Daily的iPad版本,在页面的上部分提供了一个滚动栏,能够预览文章页面,但是当你使用滚动栏进行预览的时候,不但手挡住了缩略图,你无法精确操作,而且手还挡住了下半部分的内容。

底部放置控件的方法

The Daily的失误在于没有预料到“手会遮住屏幕”这种状况,这就证明了顶角设计指导原则的重要性,也证明了“控制永远不要妨碍内容正常显示”原则的重要性。其实“内容至上,控制居下”这句话,我们不能仅仅从字面上理解,至上应该理解成“最重要”,所以控制放在两边,也算是一种“居下”。比如,The Sydney Morning Herald的iPad版app,就用书籍目录的方式来快速显示每日新闻列表,你只需要用手指点一下屏幕底部指示器一样的小点,就能弹出列表。因为要显示的标题列表很长,所以放在屏幕底部非常合理额;如果放在顶部,当你打开列表的时候,手会挡住列表中的信息。

那到底是顶部还是底部?这里是一份对比:

 iPad的顶角对于导航按钮和单击工具(分享、收藏、删除)来说是个理想的区域。

 iPad的底部对于app来说非常适于放置一些内容预览或目录列表之类的控件。

 

这就是为什么在针对书籍或杂志的界面设计中,页面缩略图最好放在底部的原因。相似的如果你在设计一款具有标注功能的地图app,地标可在调色版中换色,然后用拖动的形式把地标放入地图中,那么给地标换色的掉色板最好放在底部,这样就不会在调色过程中,手臂挡住屏幕。

大而不倒

持握的方式决定了控制的范围,手指的大小决定了控件的大小。触摸交互设计师需要将触控目标设置的大一点,才能避免出现问题。目标尺寸应该是“矮胖”的,这样既方便用户寻找目标,又方便用户操作。

对于触控目标来说,多大的尺寸比较合理呢?好吧,回答这个问题,要再问一个问题,指尖的尺寸是多大?很多的平台都提供了设计规范知道,但是跟往常一样,Apple是最有自己看法和主见的,我赞同Apple的看法:44像素点法则,最小目标尺寸为44x44px,或者7x7 mm。对于网页页面来说,44像素点法则也同样适用。

更新:2014-11-19

收藏

38人已收藏

Cyy_Emma

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

  • 35

    作品

  • 425

    粉丝

  • 21

    关注

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

    猜你喜欢

      2014-11-19 好文转载 经验/观点 原作者: 原作者 举报 10512 38 23 1

      触摸交互设计——平板篇

      0.0°

      你确定要举报触摸交互设计——平板篇

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      23
      38
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录