腾讯X项目的交互设计小结

最近在做腾讯内部系统X项目的交互,具体的项目内容现在还无法透露,趁热打铁,先来一段交互小结吧。

一、可视化

当系统的数据过多,数据结构繁杂时,可以将数据可视化展示。能让使用者更好的理解数据,有效提高使用者的操作效率。

可视化的设计过程,可以分为两个步骤

1、提取数据结构;

分析现在的数据,并总结现有数据的框架结构,将数据分层级归类。

比如:在文章中,一级标题下包含二级标题,二级标题下包含三级标题。这里就有3个元素,三个层级关系。在设计中,第一步就是理清楚这些数据的层级结构。

2、抽象化数据;

这步需要掌握一些基础视觉原理,然后把数据元素,摆放在合适的层级位置就行。

这里的基本视觉原理无非就是几种:

1474270618-7799-CwGTdC8feYSABod1X7iPnA
a、上下左右的视觉浏览路线。越靠近视觉起点,层级越高。

1474270619-6330-VE84CCsxj5glnzuUmyMsDg

b、空间位置的物理关系。越靠近的元素,关系越密切。

1474270619-5113-zuhO45HvrOSdfnjUDCNa2A

c、视觉面积的物理关系。面积越大,层级越高。

1474270619-2861-P5GOroCHTRPHZxGEQ-G5-A

d、视觉颜色的层级关系。颜色越接近,关系越密切。

(其实,一篇文章的配图,就相当于一次简化的可视化设计)

二、流程智能化

在流程的设计上,并不是一直要追求简化流程,而应该追求流程智能化。

什么意思呢?就是在流程的展示上,我们应该考虑如何提高操作效率,而不是一味的追求少步骤。

1474270619-4720-LvLyOw3AKQvjt-ZPuEvKZw

常见的流程简化,就是将中间阶段的流程,合理的压缩合并,如上图所示。

并今天重要讲的是另一种情况,当流程很复杂,对操作的前后顺序也有一定的限制。

比如:

1474270620-1718-vF4-vdv-JYCJbvUvtJVSfA

第一步(必需)

先从A模块,完成创建“元素1”。

第二步(可选)

从B模块,找到“元素1”,进行“a操作”,完成“元素1”的创建。

1474270620-7268-3Z-M7CcIM5ukQkc2gQZNQ

我们可以在第一步操作完成后,就进行合理的提醒,让用户选择是否进行第二步操作。

当然这个操作过程是需要合并简化的。

总之,就是智能化操作流程,猜想用户下一步的操作,进行合理引导,提高操作效率。

三、减少思考

合理的减少用户思考,操作的步骤与流程一样,并不是越少越好,要根据使用人群/场景来衡量。

在技术人员的角度思考,可能多个功能操作都是同一个操作效果,于是就合并为一个操作方式。然而在用户的角度思考,他们的含义是有差别的。

比如:张三被任命为总监,李四被革职了,这两种情况,都属于人员的变动,操作上,都是对人员信息进行编辑修改,而含义上差别却很大。

1474270620-9886-YlzR-Cdz2Bjql2VrQpni5g

这时候,把一个入口,分割为两个子入口更符合“人事管理角色”的理解。

四、提升容错率

一句话:少限制,多提醒。

1474270620-8494-xvJGTFlXrz1zh4HnG-rJMg

从设计上,最大程度减少误操作的情况。对一些特殊操作,允许用户误操作,但需要给予合理的提醒。而不是为了避免误操作,都采取限制操作的方式。当然,对于误操作后,会带来严重后果的情况,还是需要有所限制的。

为什么呢?

限制如果太多,用户会觉得,这个产品设计不好,很多功能都无法用。如果“少限制,多提醒”,用户可以了解到这个操作可能带来的后果,从而去寻找解决办法,或后续知道怎么弥补这个误操作带来的后果。

五、加载

这个就真的是一句话了

在表格数据过多的情况,需要考虑加载数据时的用户体验。

六、翻页还是滚动条

当表格数据太多时,无非就是三种处理方式。

1474270621-8017-jF7VNFtwPGyzz4eHNxnRQ

a、无限往页面下方延展。

会导致页面过长,影响视觉效果的展示,而且也会影响页脚等信息的浏览。优先排除。

1474270622-5260-X0r8Jxgtv-uOw1eT4dnbKA
b、增加页码,分页展示。

用户操作比较麻烦,需要点击按钮翻页浏览信息。

1474270622-3987-ZZsUY2526BuCfYgv0GnORg

c、限定高度,内置滚动条。

当表格内容过多时,用户容易迷失在数据里,不好定位。

这次设计一直纠结要用翻页形式,还是要用滚动条形式。最后和腾讯团队讨论后,决定采用滚动条方式。

最大的理由就是……习惯使用滚动条了,哈哈。

其实还有两点其它方面的理由。

第一点:滚动条操作方便,鼠标中键滚一滚就行,不需要移动鼠标,点击翻页按钮。

第二点:技术实现上,采用滚动条可以节省一小部分的开发时间……

没了,等项目结束后,再结合交互稿写一篇更具体的总结。

作者:Mufly

原文链接:http://mufly.lofter.com/post/179451_c1932ea

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

(0)
TinadminTinadmin
上一篇 2016-09-19
下一篇 2016-09-19

相关推荐

  • 如何正确提示用户进行评价应用

    设计文章 / 交互设计 | 2014-10-15 | 来源:woshipm | 发布者: GUImobile 在App里提示用户“给应用打分”的做法已经相当普遍。但正因为它太普遍了,用户一直被各种评价请求骚扰。我并不认为用户会介意给他们喜欢,并且…

    2014-10-15
  • 澳洲科学家完成时间旅行模拟

    2009 年 6 月 28 号,世界闻名的物理学家史蒂芬霍金在剑桥举办了一场趴体,香槟美酒应有尽有。霍金邀请了每一个人却无人出席。对此,霍金并不意外,因为他在趴体结束后才寄出邀请函。他说,那是 " 对未来时间旅行者…

    2014-09-05
  • 移动界面动效设计的全方位科普指南

    读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

    2017-05-13
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27
  • 设计实战:教育产品组件化交互设计的实践与思考

    网易UEDC – 王媛媛 :组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。

    2017-10-16
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10
  • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(上篇)

    时光穿梭回到2012年,第一代ThinkPadX1 Carbon发布的时候的心情我清晰的记得。Think的意志清晰而明确,效率大屏+高强度轻薄+黑色商务气质。对于未来移动办公的理解,高端ThinkPad是什么样?如今的ThinkPad X1 Carbon 2018(Gen6)便是答案。Yonemochi San曾经坦言,曾经打造的ThinkPad X300正是如今X1 Carbon系列的“祖父”。碳纤维材料的应用,如出一辙的轻薄,不一味...

    2018-03-10