在无线产品中,一些普适的交互设计原则及实践(上)

本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。


本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

在无线产品中,一些普适的交互设计原则及实践(上)

开始正文之前,再次明确一下什么是交互设计,我认为交互设计可以狭义理解为人与设备或系统交流以便完成特定任务的过程。 可以看到这则简单定义里交互设计至少包含两方参与者,即人与设备(或系统),例如:人可以是男人、女人、老人、小孩、学生、白领等等……系统或设备可能是手机、电脑、手表、电视、冰箱、门、窗等任何物品。本文中所指的交互设计的双方参与者粗略的界定为智能手机的主流用户(熟悉一般智能的手机的使用)和智能手机:

  • 智能手机的主流用户:有智能手机的多年使用经验,已使用过多部智能手机,熟悉系统的常规操作方式,对多数主流应用都有过使用经验
  • 智能手机:拥有较为复杂的智能操作系统,相对强大但一般低于PC的运算能力,集成多种芯片或外设(如GPS、陀螺仪、扬声器、麦克风、蓝牙、闪光灯等等……)

如孙子兵法说——道为术之灵,术为道之体;以道统术,以术得道。本文将逐条列出我总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

原则一:尽量减少让用户输入文本内容次数

现在的智能移动设备多无实体按键,文本键入效率不高,频繁要求用户输入文本内容无疑将增加用户使用成本。好的交互设计应尽可能少的要求用户键入文本内容。

方式1:使用滑动或点击代替输入字符验证码:这类校验的主要目的是确定执行登录或注册的是人而非破坏程序,在满足目的的前提下以下几种验证方式能够减轻用户操作的复杂度

在无线产品中,一些普适的交互设计原则及实践(上)

图 1 咸鱼的安全校验

在无线产品中,一些普适的交互设计原则及实践(上)

图 2 人人都是产品经理网站的注册过程中的拼图式验证

在无线产品中,一些普适的交互设计原则及实践(上)

图 3 12306的点击验证

方式2: 注册不做密码校验(少一次输入),并支持输入密码明文显示。传统的密码校验是为了避免用户实际输入的密码与期望不一致,导致无法登陆。早期的互联网账号往往要求有各自的用户名和密码,密码一旦忘记找回成本非常高。而近年来随和手机和邮箱的普及,忘记密码后的找回成本已大大降低,所以即便出现了实际输入的密码与期望不一致的情况也很方便的便可重设密码。且因为手机相对于电脑,其隐私性更高,所以对于大多数用户而言注册仅输入一次密码且支持明文回显可提高用户注册过程效率。

在无线产品中,一些普适的交互设计原则及实践(上)

图 4 Keep的明文密码

方式3:自动读取短信获取短信验证码:短信验证码的目的是验证用户填写了真实的手机号码,而应用自动读取短信并填写验证码在不违背此目的的前提下减轻了用户操作复杂度。这个功能曾经流行过一段时间,但现在很少能够看到了,推测原因可能是系统升级后有所限制或出于某些安全方面的原因考虑,但如若仅从交互设计上考虑,这仍是一个有效的提高用户效率的方法。

方式4:解锁使用手势、指纹而非字符密码,对于大多数的二次身份验证型场景——如登录用户解锁屏幕来说,并不需要文本密码那样高级别的保密形式,而手势密码则可较好的在解锁便捷性与保密上取得折中。而指纹密码则优势更加明显——保密系数更高,授权操作更简洁,只是它需要依赖更多的硬件支持,而指纹硬件现阶段普及程度有限。

在无线产品中,一些普适的交互设计原则及实践(上)

图 5 支付宝的手势解锁

在无线产品中,一些普适的交互设计原则及实践(上)

图 6 微信的指纹支付

方式5:将大段的必须录入的文字内容转移到PC端,如求职产品新用户在无线端填写个人简历时,可将其引导到PC端进行操作(交互设计四策略——策略)。

原则二:多考虑手势操作,避免功能即按钮的设计

相较于电脑而言,手机的屏幕空间十分有限,而目前手机端产品所提供功能的全面程度却与PC端程序相差无几,而如若将这些功能全部显示在手机几寸大的小屏幕上,可能很多控件的可操作性会变得很低,这个时候应当考虑使用一些通用的手势代替界面上的控件。

方式1:视频播放工具在全屏状态下左侧区域上下滑动调节屏幕亮度,右侧区域上下滑动增减音量,左右滑动快退或快进。示例:手机暴风的视频播放界面。

方式2:点击阅读工具型产品文本内容显示区域左侧向前翻页、右侧向后翻页区、中间区域显示已隐藏的更多操作或工具栏。示例:京东阅读的文章阅读界面。

方式3:人人都是产品经理可在文章末尾继续向上滑动时切换到下一篇文章。

方式4:36氪在文章末尾继续向上滑动返回到文章列表。

方式5:凤凰网图片浏览时左右翻页、向上滑动返回文章列表。

原则三:尽量选择符合系统的既有使用习惯交互形式

虽然有一些创新的交互方式确实带来了使用效率上的提升,甚至被系统借鉴,但在在对标新立异的设计没有足够信心的情况下还是应该遵守系统已有的交互设计形式。因为用户在面对新功能时往往习惯使用原有的思维模式和使用方式来尝试使用它,如果功能能够按照系统交互形式进行设计,将能够大大降低用户的学习成本,并大大提升用户在尝试过程中的成就感。

方式1:向左滑动列表项展示更多操作(标记、删除等)

在无线产品中,一些普适的交互设计原则及实践(上)

图 7 IOS向左滑动显示操作

在无线产品中,一些普适的交互设计原则及实践(上)

图 8 支付宝账单向左滑动显示更多操作

方式2:点击状态栏回顶部,IOS系统中在列表页面点击顶部的状态栏(运营商-时间-电池用量)可以返回到列表开始位置。

原则四:充分考虑利用外设硬件提升体验

方式1:闪光灯可用做照明 示例:ofo的手机端解锁页面提供了照明功能(此功能可进一步优化为通过感光元件获知环境光线明暗,自动开启照明)。

在无线产品中,一些普适的交互设计原则及实践(上)

图 9 ofo开锁界面的照明功能

方式2:O2O产品一般非常看重其推荐体系的推荐精准性,而常见的推荐模式一般分为两类,即按照用户喜好接近程度进行推荐和按照用户喜好元素与商家具备元素的匹配程度进行推荐。前者判断用户喜好程度的标准一般需要根据用户行为来定义,而到店消费无疑是应该给予分数较高的一种行为,那么怎样识别用户确实到店消费了呢?常规办法可能看用户是否有过支付记录,然而并非所有的用户都会在O2O平台进行支付,那么这个时候通过判断用户是否接入过合作商家的WiFi作为确认其是否到店消费的补充依据,便可在一定程度上作为确认行为的补充依据。而这正是一种无须用户感知便达到企业目的的交互方式。

方式3:陀螺仪可以识别设备翻转方向,那么提供横屏界面的产品可以通过陀螺仪数据实现自动翻转,这样例子比较多,播放器算是其中一类。游戏方面对陀螺仪的使用则更加深入。

对移动设备外设的使用方式还有很多,文中不再一一列举。

原则五:考虑单手操作

手机屏幕近年来有愈发变大的趋势,虽然手机屏幕变大意味着可视区域随之变大,但对于习惯或者不得不单手操作手机的用户或场景,变大意味有些应用的按钮或空间很难实现单手操作,这就需要应用开发者在交互设计上有充分的考虑,以便用户在单手使用手机时仍能方便的完成需要的操作。具体形式很多,需要视产品而定,这里仅举一例:凤凰新闻客户端的左下角返回按钮。

在无线产品中,一些普适的交互设计原则及实践(上)

图 10 凤凰新闻的返回按钮

小结

本文是以智能手机的主流用户(熟悉一般智能手机的基本使用)和智能手机作为交互设计的双方为前提,在不深入考虑具体业务流程和使用场景的前提下的一些普适的通用解决方式。但需要注意这是一些一般环境下相对普适的交互设计方式,这些设计方式可能在很多场景下适用,但在你考虑引入到自己的产品设计中之前,务必确保你已明确参与交互设计的双方是谁(Who)、以及在什么场景(Where&When)下为达到什么目的(Why)要完成哪些任务(What),而你的交互设计应当服务与此(How)。
篇幅有限,未完待续……

 

本文由 @我是开水 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23337/

(0)
CatherineCatherine
上一篇 2017-05-04 22:30
下一篇 2017-05-05 00:34

相关推荐

  • 017. 单选按钮、复选按钮——axure线框图部件库介绍

    有时候发现这做事情坚持下来是一件很不容易的,写教程也一样,不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多,我就想想 在坚持坚持把基础部分先完善了! 1. 简单的问卷调查: 您的性别?  答案…

    2014-09-12
  • 别再浪费时间了!如何从细节上真正节省用户的时间

    本文转自:优设网 原文翻译:阿布 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,…

    交互设计 2014-10-20
  • 交互的细节!向用户征询IOS授权的五种常见设计模式

    对于iOS app,当功能涉及到推送通知、访问照片或调用相机、获取地理位置等等时,都需要向用户申请授权。申请会发生在app运行的过程中,而不是像Android那样在安装的时候就莫名其妙的问用户是否同意app调用某些系统…

    交互设计 2015-09-17
  • 用户体验是玄学吗?

    恍恍惚惚又是一年年底。又到了设计师们的“季节性迷茫期”,最近我的公众号后台经常接到好多朋友的信息,自己行间透露着迷茫和不自信。大的趋势和节奏还是和去年一样,有些视觉设计师询问我如何转UI,有些UI设计师问我如何才能培养产品思维…其实大家都在迷茫,在这里我想分享一个用户体验相关的综述给大家,希望能对大家找准自家的定位有帮助。我最初是一名UI/视觉设计师,然后随着一步一步的发展,给自己的目标也在发生变化,我现阶段给自己的最终定位是成为一名用...

    2018-02-06
  • 设计的物理定律的动力响应

    动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

    2014-12-27
  • 译文|优秀用户体验设计师该具备的8个习惯

    用户体验设计 界有个流传甚广的段子:美国太空计划和其对于反重力笔的需求。据报道,美国人花了几百万美元用于研制一种使用固态墨水写字的高科技笔,这种笔的墨水平时固态的,但写字时的压力会让它变为液态从笔尖流出,所以这种笔倒着也能写出字。然而俄罗斯的航空员则直接使用铅笔。

    2017-05-26
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 2016年网页设计领域11个流行趋势预测

    来自 Medium 的设计师在这篇文章中预测了2016年最值得关注的设计趋势 ,而老牌设计博客Designmodo 对此也有自己的看法。新的技术和新的设计趋势 会在2016年逐一涌现,但是总体上来说,它依然会沿着2015的大趋势来逐步演变。可以预见到的是,2016年会有更多的网站使用视频背景,更多基于Material Design 风格的界面设计,幻灯片式的界面切换也会继续火热下去。

    2017-05-29
  • “5媚娘传奇”——H5总结大会

    作者:KIKI 去年JDC出了不少优秀的武媚娘...不,H5呢,大家都很拼哒,同时当然也是累计了一些经验和教训啦。今天就从字体,排版,动效,音效,适配性,想法这几个方向结合咱们的例子朕就关上门只跟你来好好聊一聊关…

    2015-01-27
  • 数据交互的常见方式及案例

    交互设计师作为整个项目贯穿始终的一根线,除了有自身对需求的理解把控以及对页面布局的拿捏以外,充分吸取各种不同的思维方式,才能让我们在打怪升级的路上越走越远。

    2017-05-07