适合用户单手点击操作的奇技淫巧(慎入!)

适合用户单手点击操作的奇技淫巧(慎入!)

胡痴儿胡痴儿

之前提到为适应大屏手机单手操作,ios轻触home、搜狗输入法的单手键盘都做出了淫荡的改变,那么我们又该怎么做呢?

我从点击和手势两个维度来讲解

一、点击

(1)增大可点击区域(热区)


Path的个人背景图
单击任意一处弹出

再单击弹窗外任意一处退出


触控屏如何感知手指操作?

由图可知,拇指会覆盖用户操作区域周围屏幕的一部分区域,从而遮挡用户视线

面对这种情况,ios系统做出了适应(谢@孩子苏 的补充)


  • iOS的键盘字母点按反馈,就是点按一个字母后字母放大在拇指点按的区域上面显示,这种方式运用在键盘上不仅满足了点按后的反馈还让用户看到了被遮盖的内容
  • 后两幅的放大镜也是一个很好地例子

Android则在下方设了一个操纵杆

和PC时代时精确到1个像素的鼠标不同,手指的精准度很低

接触面的大小取决于手指的大小和方向、手指给屏幕压力以及用的什么手指?

(2)二级页面操作栏置于底部

我在对手机屏幕尺寸进行研究的时候通常会用到下面这张图

即尽量把点击操作放在绿色(安全区域内),把点不到用滑动手势代替,把用户可能会承担较大的操作风险或者不需交互的内容(如logo)放在盲区

这是一种常见的做法,底部点击,内容区域可与之互动

我归纳了半数以上的app都将操作栏放置在了底部

新闻类:

知乎日报、好奇心日报、今日头条、澎湃新闻、网易、搜狐新闻客户端、mono、凤凰新闻、腾讯新闻

影视类

vimeo、acfun、bilibili、芒果TV、PPTV、乐视、风行网、百度视频

阅读类:

medium、简书、instapaper、storehouse、果壳、家用

看图类:

flickr、picsArt、500px、微可拍

社交通讯:

google+、微博、weico、陌陌、闰土、微视、Mail、QQ邮箱……

电商类:

闲鱼、淘宝、天猫、京东……

最后,拷两张百度mux的图过来

注意:这张以右手单手为例,越靠近左上角,越重要,就越是一些高级的不怎么使用的页面切换,而越靠近右下角则是越频繁的操作。

这一张图考虑到了路径触发的连贯性

二、长按

长按头像

长按头像唤出action Sheet的例子在社交类应用中较为常见

Twitter、moke、微信朋友圈、TweetBot、vvebo



三、滑动手势

  • 隐藏UI元素,只在需要时出现
  • 腾出更多空间展示内容

以往的框架布局,UI占了很多内容


而现在,让核心功能内容凸显,而让用户沉浸在体验之中。让信息结构轻量化、扁平化,使用户更专注核心功能和内容,操作路径不被打断。

listen

乐流
emo

补充一个emo的脸部表情识别,我是不是笑得很甜很可爱咩?

peek

  • 左滑手势设置
  • 长按半秒添加新事件
  • (单击某天会展开你创建的事件,然后)右滑拖动查看事件的持续时间和地点
  • 打开事件,滑到最下面删除
  • 拖动绿色长条直至蓝色长条出现,再拖动蓝色长条
  • 下拉手势新建条目


下拉添加书签
多看阅读&豆瓣阅读

2、左滑唤出被隐藏的选项,这种比较常见

mail和duckduckgo、digg左滑唤出三个选项


一维连续型滑动

当然,使用这几种手势的前提是左右滑不会进行页面切换(包括父子关系页面切换和兄弟同级页面切换)


solar上下滑手势查看不同时间点的天气


  • 左右滑手势进行页面切换

第一种是兄弟同级页面切换

全景图式导航(Panorama navigation)如何减少迷失感? - 胡痴儿的回答

QQ音乐
最下方的miniplayer左右滑动切歌(更轻更扁平)


  • 还有一种是父子间页面层级的切换,两种不同的右滑


全屏右滑的app有:QQ、知乎、豆瓣……(不列举了)
仅屏幕左边缘右滑的app有:微信、ios原生应用……(不列举了)

文章被以下专栏收录
3 条评论