干货贴: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-30
  • 设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • 【UXRen原创】一款金融股单APP的设计之路

    作者: 股单小分队 @ 国信证券的产品设计中心   一、交互设计的那些事 许多朋友问我:你大学学的专业不是工业设计吗?都是做产品造型的呀,现在怎么跑去证券公司做交互了? 相信许多做交互设计的朋友和都会遇到这样…

    交互专题 2017-08-07
  • 双11的电商设计风格:5个角度分析天猫视觉页

    天猫官方的双十一预热页面刚刚上线,本文作者就帮大家分析双十一电商设计的流行趋势,包括场景、配色、角度、标题、辅助性元素等。干货+趋势,绝对值得一读!

    2017-05-17
  • 从设计默认值开始,给用户和产品带来更好的用户体验

    默认值是你的数字产品的默认基准设定值,这些填充设置的默认值虽然常常不多,但是换个角度来看,它更像是是设计师为设计作出一些基本的“决定”,帮助用户更快的让产品运行起来,上手使用。默认值对于产品和用户而言很重要,今天的文章,我们将会探讨设计师要如何设置默认值的样式、交互和字段细节,确保给用户和产品都能带来更好的用户体验。

    2017-05-03
  • 跟着电台动起来:如何设计跑步的垂直场景

    没想到吧,你竟然可以通过企鹅FM来跑步?为什么在电台App要深度挖掘一个运动场景,交互设计师又是如何将痛点和需求转化为市场蓝海,在设计的过程中怎样将场景垂直的特色表现出来······关于这些,我有一些想法与大家分享。

    2017-05-12
  • 做好用户体验,掌握这些要素就够(一)

    我在人人都是产品经理这个平台上,没看到更全面概括原则与思想的文章,所以我想在这系统的说说。考虑到篇幅太长,用户看的可能会比较费劲,所以我会分成几篇文章来讲。

    2017-05-19
  • 网易游戏交互设计师分享:游戏交互设计做什么及学习的关键性方法

    嘉宾介绍 陈振华,网易游戏做交互设计师 分享主题 游戏交互该如何做,新人该如何入门 交互设计是什么 首先我们来理解下,我们平时认为的交互是什么? ONE. 用户研究,调研 TWO. 功能分析,了解一下我们这个产品,也…

    2015-12-05
  • 平面设计中,有哪些简单好用的排版技巧和方法?

    当两张图片中应用的构成元素都相同,画布尺寸也相同的情况下,排版的好坏就决定你整张图片的质量了,这就好比两个厨师,同样的食材做同一道菜,味道却可能截然不同。

    2017-05-19
  • 数据可视化:如何为数据寻找适合的配色

    虽然如今好的配色方案已经唾手可得,但为数据可视化找到合适的配色方案,却仍是一项巨大挑战。

    2017-05-31