腾讯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

相关推荐

  • 按键的位置是如何强化用户习惯的?

    当设计师需要向用户展示大量的数据时,总是不可避免要利用到筛选和排序。筛选和排序可以帮助用户缩小他们正在寻找的数据范围。

    2017-05-30
  • 交互设计入门–了解交互设计

    之前写过类似的文章,想写的东西太多,结果什么都没讲明白。所以重新写一套入门的教程,分「了解交互设计」、「交互设计的职能范围」、「交互设计的常用方法」……几个章节把我对这门行业的理解和经验做个分享。

    2017-08-04
  • 一个至今没做出靠谱好产品的产品经理是这样活着的

    本文来自一位女性PM,她自称X小姐,08年开始入行折腾 我是一个没做过成功产品的产品经理,至今负责过的项目并不少,但不是夭折就是已经奄奄一息。我不是王兴,不是张小龙,不是老罗,更不是乔布斯。夜深人静的时候…

    交互设计 2014-12-24
  • 这7个趋势,也许是2017年电商用户体验设计的关键

    沉浸式体验,虚拟助手,个性化的购物体验,这些都是未来的购物方式的进化方向,影响用户购买的因素更加复杂,而大数据则能够在各个不同的环节帮助电商从业者预测用户的行为与口味。所有这些因素都和用户体验相关,同时,它们也意味着,电商行业任重而道远。

    2017-05-13
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18
  • 总结|2017年的5个网页设计趋势

    几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

    2017-05-08
  • 【译文】作为新手,我该如何学习Web设计

    我现在对于网页开发一无所知,我应该学习什么能让我可以在六个月之内开发任何网站?无论是看书或者开展项目都可以。 简单引导: 学习基础知识.  看一本书,而不是文章 设计一些东西.  从一款很酷的设计工具开始,比…

    2016-08-04
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 产品设计评价技巧的那些事(Airbnb产品设计总监)

    分享者:Katie Dill(Airbnb产品设计总监);译者:夏梦竹、张红月   在产品设计中会存在各式各样的评价,也许评价可能会带有一些意见色彩,但这就是它的价值所在。它让我们明白——为何人们喜爱或是讨厌我们的产品。…

    交互专题 2023-03-03
  • 为网页设计师 Web 设计编写的简要历史

    编者按:互联网的诞生本就是一个奇迹,作为其中最重要的载体之一,网页就是这个大时代最重要的缩影,相关技术、设计伴随着信息共享催动着整个时代滚滚向前。这是一段简短的网页设计 发展史,我们可以看到技术、设计与思想的演进,看到无数有识之士改变世界的剪影。本文作者是网站Froont.com的联合创始人Sandijs Ruluks。

    2014-12-30