干货贴: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

相关推荐

  • 交互基本功:如何设计一个好用的搜索框?

    搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。本文作者分享了设计一个搜索框的几个要点,希望大家从中可以有所收获。

    2017-05-04
  • 面对大项目,交互设计应该如何进行?

    去倾听用户真正的心声,才能设计出一款既能解决用户所担心的问题,又能让他印象深刻的产品。

    2017-05-08
  • 微信10个交互设计细节问题的探讨(下)

    文章转自:http://qinsman.com/1701_wechatrd/微信号:西市馒头铺接上篇~~~5. 删除会话时的危险操作警告左滑会话可以调出删除按钮是一个iOS下很常规的交互操作,但微信中删除一个会话意味着所有聊天记录、图片文…

    2017-08-02
  • 用户体验提升才是“蔚来”

    nEqual 是业界领先的赋能“智慧商业”的数据智能技术提供商,是精硕科技集团下专注数据技术的事业部。nEqual以数据和技术为支撑,为企业实现营销自动化、智能新零售、AI人工智能等“智慧商业”模式打造和运营,帮助企业提升营销体验、销售体验及服务体验等全面的超级用户体验,进而助力企业构建可持续发展的商业竞争力。近年来,人工智能迅速占领大家视野,虽然业界已经探索了几十年,但近五年来才开始飞速发展,这得益于数据和技术的进步。近日,朋友圈被蔚...

    2018-01-30
  • 设计师们全都疯了!出Ps的Adobe公司又出新神器!

    图文来源:新设技 这次Microsoft 与 Adobe 强强联手退出了神器一样的应用,让现场设计师为之疯狂~~,不多说了,看视频吧... 设计师们,这到底是什么节奏啊~~?你们都懂的... 随著 Microsoft CEO Satya Nadella 近日…

    2014-10-12
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • EVA「Flow」Living in the Future | Flow 正式上线

    吕骋说:“智能语音助手解决的是人机交互,但并没有解决人人交互,我认为,把人机交互和人人交互打通才是最重要的。” 为了保证最佳的视觉体验,我们特意制作了搜狗输入法的对应皮肤 大家在搜狗输入法的皮肤商店里,…

    交互设计 2015-09-11
  • 从第三代锁屏,看移动端交互设计的未来趋势

    每年的梅花网传播业大展都是传播业界的一大盛事,我们不仅能看到过去一年整个市场和行业的进步与创新;也会看到互联网、移动互联网催生的一系列产品,它们共同预示着未来的发展方向。今年的梅花网传播业大展上,我…

    2017-08-01
  • 交互设计之寻求设计需求点

    交互设计师如何进行设计需求分析?首先看交互设计的职责,协助产品经理进行需求分析,进行交互稿绘制,与视觉设计师对接。交互设计必须懂得进行需求的分析,不仅仅是用户需求,还有业务需求的分析,也就是来自产品的诉求,企业做这个产品的目的是什么。因此一个方案如果不能满足业务需求、用户需求和一个好的用户体验,那么它就不是一个好的方案。在这篇文章主要介绍的是如何进行需求分析和关键因素分析,找到设计的需求点。在这里主要分为了四个步骤:分析业务需求、分析用...

    2018-04-30
  • 18个UI demo设计实例,深挖让用户愉悦的小惊喜

    文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。

    2017-05-11