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

网易可用性优化实录!如何让你的交互设计自查表真正用起来?

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

本文主要包含团队协作,经验分享,网易UEDC,设计走查等相关知识,网易UEDC希望在学习及工作中可以帮助到您

网易UEDC – 徐恺 :相信不少同学都尝试过建立自查表,但最后是否有真正利用起来呢?这一次就和大家分享一下,我们团队所用的自查表的迭代优化过程和结果。

一、自查表1.0的问题

首先,我们还是要了解一下优化前自查表的表现(如下图):

1. 建立自查表1.0时的部分思路:
  • 交互设计的一些基本法则,如架构要合理、层级要精简等,是设计师需要掌握的基础理论,而我们的自查表建立更侧重解决设计师对特殊场景、交互细节容易遗漏的问题,所以在内容上以场景列举和说明为主。
  • 自查表均分为两个部分:场景完成性和流程完整性,这是设计师通常容易遗漏的方面。
  • 邮箱大师有四个平台需要同时规划,而每个平台的特性有所差异,因此为四个平台各自建立了单独的自查表,内容有通用的,也有差异的,方便各平台设计师分别查看。
2. 存在的问题

文档使用路径长

因为使用了 Excel 电子文档,虽然对内容进行扩展很方便,但是每次要找到和打开这个文档都是一个漫长的过程,「在电脑桌面/某个文件夹找到这个文档 – 双击打开 – 等待程序启动文档打开」每一步都在增加使用成本;

阅读体验不佳

首先整个文档结构没有处理好,第一眼看不懂,导致设计师对内容缺少一个整体的认知,查找起来也比较累;其次,内容阅读同时包含横向和纵向的结构,有时还会需要操作滚动条,这样读起来也比较累;

内容更新不及时

这个不用说了,都没有人用,自然也不会有人来关心它的更新了,导致很多新的设计问题没有反应在上面。而且一共有四份文档,每改一个地方,都要同时改四份,想想这个工作就不轻松。

二、自查表2.0的建立

锁定问题后,就看如果解决了,这里我从两个方面来对自查表进行优化:文档格式和内容结构。

1. 文档格式:从线上到线下

我希望这份自查表可以让设计师随用随取,而不需要一个复杂的查找等待的过程,那么,我想到的一个比较好的办法就是可以打印出来,从线上作业转为线下作业,直接放在手边,时不时就可以拿出来瞄上一眼,还可以根据需要进行标注。

而在此基础上,也对内容设计提出了一些要求,比如所有内容必须承载在一张 A4纸的大小上,甚至最好不要超过1页,否则还要分页或双面查看,也不方便。

2. 内容结构:马里奥的交互自查表

内容结构的设计,很重要的一步就是对自查项的整理和分类。但同时,我也考虑到另外一个

问题:邮箱大师涉及的自查项关键词有几十项,如何让设计师更好的对文档结构留下印象,甚至记住它们呢?这里,我引用了一款经典游戏《马里奥》的界面来配合内容结构的搭建和介绍。

如上图所示,是一张经典的马里奥游戏画面,而在这里,我们可以把这个画面拆解为3大部分:背景环境(蓝天白云部分)、游戏路径(城堡障碍部分)、操作角色(马里奥本体)。

而借此,对应自查表的3大模板:

  • 环境:硬件环境、软件环境、邮箱环境(邮箱大师支持各种类型的邮箱,而不同邮箱下,支持的功能存在或多或少的差异)
  • 流程路径:入口、页面和控件、前进表现、后退表现、提示信息
  • 用户操作:手势、鼠标、键盘、其他(Touchbar、触控板、语音等)

然后,在大框架的基础上,再进行进一步细化,如流程路径部分:

  • 以游戏起点和终点,对应用户操作的入口和结果
  • 以关卡页面,对应用户的页面和控件设计
  • 以角色的前进后退,对应用户的下一步和返回操作
  • 以界面提示信息,对应各类界面提示引导

以上,是希望借一张图就让大家能够回忆起自查表的整体结构,方便记忆和定位内容。

结构确认好后,便依照分类将需要设计师注意的信息填入框架内。这些信息大多以关键词的形式存在,毕竟设计师还是对自己的产品有一定了解的,自查表中的关键词只要达到提示的目的即可(这样也是为了节省空间,毕竟要压缩到一页纸上)。每一个细节点在这里就不一一介绍了,因为不同的产品设计的关键词必然不同,关于内容,还是需要大家根据自己的产品以及设计时常遇到的问题,自己去完善。最后成品如下:

PS:设计分析和最后思考两个部分是在后期进一步优化的时候加上的,主要希望设计师进一步确认需求分析是否完整,以及考虑自己的设计是否还有优化的空间。

三、使用场景与总结

至此,自查表的结构设计就完成了,但是整体的可用性优化工作可还差一步,那就是在团队内推广新的自查表,和团队成员再一次沟通新表格的设计思路和使用方法,以确保大家对新的自查表有所了解并愿意使用它。这里,提前帮助大家打印好表格,并准备一个辅助的 PPT 也是必要的工作。

最后,为大家总结一下这份自查表的一些适用场景。

1. 设计评审后

往往在设计评审后,都会暴露出设计上大大小小的一些问题,这个时候,不妨拿出自查表,看看这些问题是否都有记录,如果没有,就加一项,如果已经有了,就加重标记一下。既是加强自己的记忆,又同时在为文档做补充,一段时间后,可以把标记的新内容,再更新到电子文档上(如一个版本结束后,更新一次)。

以下是我自己在几代自查表上做的批注:

2. 设计完成后

这个不用说,自查表建立的目的就是为了设计师自己检查交互场景和细节的。为什么放在后面,就是想要提醒大家对之前已经批注过的错误要格外注意一下。

3. 新人培训时

这个算是衍生出来的一种使用场景,团队新人一般对产品结构和功能还都不是很了解,自查表上一些关键词是很好的学习辅助工具。导师可以通过名词解释的方式,向新同学介绍相关的知识点,帮助其快速了解,如:

  • 大师帐号是什么?有什么作用?
  • 什么是 IMAP协议,什么是 POP3协议?什么情况下要注意这些协议的差别?
  • 产品文案有哪些规范……

关于自查表的优化过程就介绍到这里,表格内容依然会不断改进,也欢迎大家提供看法和建议。

工具的建立最终还是为人服务,「能用起来」是很基础也很重要的一个要求,先用起来,之后在实际使用过程中,不断的进行优化改进,以匹配个人或项目团队当下的需求,让其能真正为大家解决问题。

希望今天的分享可以给大家带来一点思路,建立切实可用的自查表,早日达到「手上无表,心中有表」的境界。

欢迎关注作者「网易UEDC」的微信公众号:

图片素材作者:Anna Salazar

「设计走查好文合集」

  • 《看了都说好!如何建立交互设计自查表?》
  • 《实战经验!交互设计师如何做好设计走查的工作?》
  • 《用腾讯高手的交互自查表,快速搞定设计中的分支流程和异常情况》

优设大课堂

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

  • 为什么几个人的小团队更加高效更加靠谱?
  • 半年做了两个APP,我总结出这6个实战经验
  • 腾讯出品!设计师辅技手册之项目同步管理法
  • 网易可用性优化实录!如何让你的交互设计自查表真正用起来?
  • 高手进阶技巧!全方位深入理解 Sketch 库(上)
  • 高手进阶技巧!全方位深入理解 Sketch 库(中)
  • 设计师该如何带团队?来看高级设计师的总结!
  • 如何输出高质量的交互稿?来看京东设计师的总结!
  • 经典好书!从零开始翻译《Design Systems》:设计系统
  • 如何规避 Design System 架构设计中的逻辑陷阱?

相关文章

  • 2018-08-23高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
  • 2018-11-02关于app端rem适应不同手机屏幕计算方法
  • 2017-08-06固定、流动、弹性网页布局的利弊分析
  • 2018-08-23化整为零!关于组件化设计升级的一些思考
  • 2018-08-23中小团队来收!如何快速制作有效的UI设计规范?
  • 2017-08-06网页设计制作科学化原则建议总结
  • 2018-08-23实战案例!京东商城iPad 4.0 商品详情页改版设计总结
  • 2018-08-23如何让设计团队的工作效率提升50%?亲测实用的方法!
  • 2018-08-23设计师必须了解的机器学习基础知识
  • 2018-08-23内容为王的时代,阿里设计师用实战案例解读内容化设计!

文章分类

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

最近更新的内容

    • 把玩近1000个App 后,我总结了这份超全面的「用户卸载原因指南」
    • 优酷视频去30秒广告代码的两种方法
    • 讲道理,这些都是最基础的字体设计知识
    • 想成为UXD设计师?先学会这4件事!
    • 网页设计师职位应聘面试的常见试题及参考答案
    • 网易设计师:做好文字排版的小技巧
    • 文案启蒙:感动是个好东西,我们都要保护它
    • 如何构建Web端设计规范之设计理念篇
    • 学会这简单几招,字体设计也能萌萌哒!
    • 这8条走心的建议,帮你设计出更加优秀的排版

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

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