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

如何简化操作流程?来看这篇超全面的总结!

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

本文主要包含交互设计,产品分析,操作流程,用户体验,经验分享等相关知识,王M争希望在学习及工作中可以帮助到您

王M争:关于提升用户体验的方法论非常多,其中一个比较常见的就是简化操作流程。我们对此非常熟悉,但是我很少看到有文章系统的去论述该如何去简化操作流程。这里我就做一个简单的分析,如果大家看完之后有所收获或启发,不胜荣幸。

一、什么是操作流程?

操作流程指的是用户为了达到某个目标所需要经历的操作和场景转换。举个生活中的例子,小时候我爸带我去营业厅交电话费。当时交话费的操作流程为:从家骑自行车去营业厅,排队,查询话费,交钱,骑车回家。所需要经历的场景转换是从家到营业厅,再回家。

而产品设计中的「操作」我们可以理解成交互方式,「场景转换」理解成参与的页面数。所以简化操作流程可以划分为两个方向:优化交互方式,减少不必要的场景转换(页面)。

二、优化交互方式

交互方式的优化我们可以从两个方面来入手:减少用户点击次数和降低操作难度。让用户在更少的点击次数下完成操作,其实就是提升信息的录入和反馈效率。一些新技术的应用可以帮助我们实现这个目的。

例如现在绑定银行卡的时候,一些产品给用户提供了拍照识别卡号的功能,用户就不需要手动输入卡号。这样可以减少用户的点击次数,而且还降低了用户手动输入错误的风险。此外还有一些指纹支付,刷脸登录这样生物识别功能,这些新技术的应用可以极大的提升用户的交互效率。所以设计师对新技术的持续关注是非常有必要的。

当然并不意味着我们需要埋头于对新技术的追求。很多时候只要消化好现有的技术,同样可以优化产品体验。例如,在性别录入的时候,这里设计师选择的下拉列表的样式,但是我觉得使用单选框会更加合适,因为总共就两个选项。选择单选框可以减少用户的点击次数。

从上面这个例子我们可以发现有些组件在功能上是有相互重叠的部分。一旦一个功能可以由多个组件来完成,那么我们必须找出最优方案。所以交互设计师和产品经理的一个基本功就是明确每个的组件的最适用场景,在原型图中予以明确。

以上围绕的重点是减少点击次数,接下来我们主要说降低操作难度。我们再看一个案例,以前用户想删微信好友,会从底部弹出一个对话框确认一下操作。但是新版的「确认操作」直接在原消息栏这里展示。其实改版前后用户的点击次数都是一样的,但是新版的反馈具有更强的指向性,用户的目光(注意力)不会发生转移。

上面说到了用户的目光,这里跟大家分享一下人类眼球对于视觉信息的处理过程:

  • 基本信息提取,并处理多个特征;
  • 根据目的需要,筛选关注内容;
  • 保存关键目标,联想相关描述。

其中第一阶段中的基本信息涵盖了形状、颜色、位置、轮廓等。每次用户收到一个反馈,进入一个新的界面,都要重新去获取这些信息。为提升了用户对视觉信息的处理效率,我们可以提供相同的形状、颜色、位置、轮廓等,这就是一致性原则可以减少用户的学习/操作成本的原因。以上面的例子为例,底部对话框的反馈样式,用户要重新识别位置和形状,而新版的反馈样式则不会出现这种情况,更加易用。

三、减少场景转换

我们在为一个任务绘制流程图的时候,应该避免让用户跳转过多的页面,因为多跳转一个页面就意味着多流失一部分用户,就像漏斗一样。

前几天有个朋友在微信群里问了一个问题:新用户在注册完成的时候,我们是否应该让用户去设置登录密码,类似的还有支付密码设置问题。

为了回答这个问题,我特地下了两款竞品,都是教你怎么做菜的。这里分别说是产品A和产品B,这两款产品都支持第三方登录,而且登录后都要求用户去绑定手机号。但是产品B给用户提供了「跳过」按钮,用户可以选择不绑定。

首先得承认我对这两款产品都不太了解,直接评论好坏的话会有失偏颇,而且设计无所谓好坏。仅从我个人角度来说,不支持在这里让用户就去设置密码或者去绑定手机号。因为用户刚注册完,还没有享受到你提供的服务,你就考虑用户再次登录和购买的场景了,说不定用户看到这个设置界面直接就走人了。因为现在产品同质化现象非常的严重,你的产品可以有很多替代品。

从上面这个例子,我们也可以发现在操作流程设计阶段,我们非常有必要去进行任务分析,去明确高层次的任务和低层次的任务。每一个任务映射到设计层级,可能是一个 icon,也可能是一个页面。以下图为例,同样的购票界面,这里的主要任务是选座。而更换场次属于次要任务,但它展示形式只是一个 icon,没有打乱整个界面的布局,也没有过度分散用户的注意力,在这里我觉得是非常合适的。

如果低层次的任务需要新增一个页面来完成,而新增的页面又有让用户大量流失的风险,我个人的建议是舍去。产品设计过程中设计师需要去做很多决定,其中很多都不是非黑即白的选择。每一个选项都有其背后的意义,我们只能去做更符合当前阶段产品利益的选择。

当然并不是只有进行任务分析才可以减少场景转换,通过简单的小细节修改也可以达到目的。以微信为例,当用户编辑状态准备发朋友圈,如果点击了「取消」,我们会发现会弹出一个对话框,让用户选择「保留」或「不保留」。这样的处理有一个问题,如果用户是误点击了「取消」,那么他只能点击「保留」,然后退出再进入编辑状态。我看了一下 QQ 和微博,他们用的是从底部弹出的动作栏,用户如果是误操作,只要点击「取消」就可以了。这样弹框的一个小变化,就可以避免了用户再次返回到原界面,减少了场景的转换。

总结

以上就是我从优化交互方式,减少场景转换这两个方面对简化操作流程的一个分析。如果你有不同的想法,欢迎留言或者添加我个人微信讨论交流。

欢迎关注作者的微信公众号:「王M争」

图片素材作者:Paul Olek

「App分析让你对产品理解更深刻」

  • 《用苏宁金融的案例,教你学会分析一款App》
  • 《腾讯的设计到底好在哪?高手是从这3个维度分析的!》
  • 《那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书》
  • 《用百度外卖的案例,教你学会分析移动端产品的方法!》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

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

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

相关文章

  • 2017-08-06ipad上借助firebug工具来进行页面调试
  • 2018-08-23这篇字体设计教程,可能让你少赔几万
  • 2018-08-23打破以往的思考方式,才有可能成为UXD设计师
  • 2017-08-06在FireFox中导入导出Cookies与收藏夹的解决办法
  • 2018-08-23腾讯设计师:超全面的变体美术字设计手册
  • 2018-08-23“撸班”机器人翻译功能上线,完美解决甲乙双方沟通问题!
  • 2018-08-23大型的视觉设计系统都是怎么设计出来的?
  • 2018-08-23高手的平面课堂!最容易上手的配色方法
  • 2018-08-23设计师没原创灵感?试试这个方法!
  • 2018-08-23在开始 VUI 设计之前,你需要做些什么?

文章分类

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

最近更新的内容

    • 手机网页wap用Bootstrap还是jQuery Mobile
    • 抓住这4个核心,搞定UI中报错信息的用户体验设计
    • 超详细的《Design Systems》读书笔记
    • 总结来了!聊聊点融投资4.0改版踩过的那些坑
    • 即将成为主流的2015—2016交互体验趋势
    • 重新认识滚动交互,让你设计的网页更适合这个时代
    • 超全面!腾讯出品的交互微动效设计指南
    • 设计道理谁都懂,为什么换自己就不会?
    • 对于图片社交网站UI应用的对比分析(图)
    • 这10个理由告诉你,为什么要在设计中使用渐变

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

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