干货贴:To B 系统软件Web端的交互设计总结

文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。


文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。

干货贴:To B 系统软件Web端的交互设计总结

PART1-简单介绍

这里所说的系统软件(内部这么称呼),指的是由软件与硬件设备所结合成的系统的软件那一部分。这种系统一般都比较复杂,往往是面向企业开发的,也是所谓的B端产品。比如本人参与过的智能某某网管系统和某某分析保障系统,它们的软件层面如右图所示。

干货贴:To B 系统软件Web端的交互设计总结

我在做系统软件时做交互设计的主流工作时步骤如下:信息架构—整体布局—任务操作流程——线框图。接下来就按照这个步骤来总结一下。

PART2-信息架构

构架信息架构对于交互设计师来说,是一种很核心的能力。对于我所接触的这种比较复杂的系统软件的信息架构,有幸有机会去学习以及实践了一下。用户体验要素那本书中信息结构分类就有以下那么几种(如图从左往右):

  1. 层级结构
  2. 矩阵结构
  3. 自然结构
  4. 线性结构

这些结构在用户体验设计的信息架构设计中就起到了不少的作用。

干货贴:To B 系统软件Web端的交互设计总结

关于我所接触的系统软件,运用得比较明显的是层级结构,比如树状图,比如在某某管理系统中的区域、站点、机房、屏、箱、盘。因为在实际情况中,一个区域可以包含很多站点,一个站点又可以搭建很多机房,每个机房可以摆放很多屏,一个屏可以装很多个箱,一个箱一般有6个盘,很明显的一层包含一层的。这也是管理某某的一个实际情况以及它所具有的特性。在面对这种情况,很自然就可以考虑从上到下的使用方式了,也很符合逻辑,用一个树状导航就可以有组织地将管理某某的这种状况在软件界面上可视化地展示出来,随时查看其的状态。这种使用方式,就解决了该系统中可视化工程的信息架构问题了,如下图:

干货贴:To B 系统软件Web端的交互设计总结

干货贴:To B 系统软件Web端的交互设计总结

对于层级结构还有另外一种使用方式,从下到上,就是从最低级别的功能特性出发,将最低级别的功能特性归属到较高一级的类别中,一步一步往上找归属。例如某某管理中的,要将实际生活中纸制输出工作指令这一业务在软件的界面中表现出来,就得了解管理人员与执行者之间执行任务的流程、操作流程以及相关的内容,然后将其倒推为一个功能模块,再将这个功能模块倒推到整个系统中。这样的话就可以将传统工作流中的纸制输出工作指令转化为网络电子输出工作指令了,就找到了其的信息架构。

一个系统软件往往业务很多,运用第一种从上到下和第二种从下到上不见得就能得到一个统一的信息架构。毕竟这两种方法都是有缺陷的。要去弥补这种缺陷,可以考虑从上到下和从下到上的方法之间找到平衡,也就是从中间考虑。刚好在某某管理这个系统中将有些功能特性分组时我们遇到了比较模糊的分组问题,犹豫不决,就与客户以及用户都沟通了一下,让他们对这些功能特性进行认知并分组。得到客户以及用户的分组后,我们就对上以及对下都各做调整,最后就能得到一个统一的信息架构了。

每种产品对这四种基本结构的偏重是不同的。在我做系统软件时,在考虑某些场景的时候,比如管理人员需要查看某个对象的状态,但是这个对象的同类又非常多,那就得根据对象的具体特性把它给找出来。在组织这类信息的时候,用矩阵结构就很合适了。如下图,就展现了一个矩阵结构,具体一点就是可以进行多条件查询。

“矩阵结构允许用户在节点与节点之间沿着两个或更多的“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起,因此矩阵结构通常能帮助那些“带着不同需求而来”的用户,使他们能在相同内容中寻找各自想要的东西。“

干货贴:To B 系统软件Web端的交互设计总结

在构建系统软件的信息架构的过程中,层级结构与矩阵结构是运用得比较明显的两种结构,其他两种结构在一些轻型产品的信息架构中会用得比较多。

PART3-整体布局

当把信息架构建立好了时候,就要考虑怎么布局这些功能模块,怎么在界面内将这些功能模块有的放矢地摆放出来,也就是规划整体布局。

整体布局按照用户体验5要素中的说法就是属于框架层面的内容,这里主要总结的就是导航。这种系统软件导航一般有三种,分别是横向导航(顶部导航)、纵向导航(侧边导航)以及横向+纵向导航(两者综合的导航)。 顶部导航适合功能模块较少的系统,也可以给界面留出更多展示信息的空间,但是拓展性差一些。如图:

干货贴:To B 系统软件Web端的交互设计总结

侧边导航适合功能模块稍多的系统,拓展性也好,逻辑呈现还比较清晰,也能够增加较多的功能模块和子级菜单,一般还会细分为树结构、直接展示二级菜单的以及鼠标移入显示二级菜单三种,缺点就是如果每次操作都需要展开二级菜单栏,就会增加了用户的心理认知负担和操作成本。如图的导航。

干货贴:To B 系统软件Web端的交互设计总结

顶部导航+侧边导航,这种适合于很复杂,功能模块很多的系统。如图某银行的系统导航。

干货贴:To B 系统软件Web端的交互设计总结

PART4-任务操作流程

在将整体布局规划好之后,就需要梳理任务操作流程了,结合业务流程进行梳理,也就是将需要完成某任务的操作一步一步地规划好,看怎么样能有效率地完成操作目标,边梳理边画流程图。将规划好的步骤再合理有序地安排在一个页面内或几个页面内,同时画页面流程图,标好每一个页面以及页面与页面之间的关系,如图(来源网络,毕竟项目图不要随便发布啊哈)。接着将页面内容摆放在软件界面上时这一步就会涉及到相关的设计法则了(这个有时间再总结,笑脸),也就是画原型啦!所谓的线框图。

干货贴:To B 系统软件Web端的交互设计总结

以上就是我做这一两个系统软件后的一点点总结。

 

作者:夏天的树,一枚想从事产品工作的交互ui设计师,微信号:luxun_chen

本文由 @夏天的树 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-07 04:36
下一篇 2017-05-07 06:21

相关推荐

  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03
  • 设计师进阶:从UED向UXD转型

    UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?

    三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

    2017-05-12
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 为了优化夜间阅读体验,ISUX总结了一套通用的夜间模式设计方法

    你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。

    2017-05-09
  • 超实用的格式塔原理小科普

    在界面排版,网页广告设计等视觉传达设计工作中,视觉上的画面琐碎,零散,信息混乱无序总是视觉设计师无可避免的问题。

    2017-06-02
  • 优化夜间阅读体验-夜间模式设计通用方法

    作者:花咯   你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结…

    交互专题 2017-08-07
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 交互设计篇-如何处理需求

    如何处理需求,是产品经理的基本功,不管是来自老板还是客户的,亦或来自企业内部(运营、业务)及产品本身的发展,产品经理都需要把需求的收集、分析、管理做到有效进行。一、需求收集用户调研运用场景:产品规划初期或者遇到重大版本迭代,需要重新架构设计时,将会进行用户问卷、用户访谈的方式去挖掘用户的真实需求。基本方法:用户问卷-定量研究的方法,问卷问题一般为15个左右,包含用户基础资料信息(包括年龄、收入、教育水平等人口统计学范畴信息)和主观性的信...

    2018-05-06
  • 老外看中国的移动App设计精髓-3 通用ui、颜色、文字、表情

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22