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

相关推荐

  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • 3秒即灭,APP引导页如何闪亮

    大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的…

    2014-12-05
  • Excel表格常用快捷键大全之11-20个(含操作演示)

    温馨提示:零基础或者对Excel不熟悉的小伙伴,请在公众号后台回复数字:1,免费学习滴答老师的全套Excel小白脱白系列视频教程。第十一,选定当前活动单元格区域比如,咱们需要给A1:C18单元格区域加上边框,首先得选中这些单元格。除了用鼠标拖动选择之外,还可以使用下面的两个快捷键:鼠标随便放在A1:C18单元格区域之间的任意单元格,按下Ctrl+Shift+*(星号)或者Ctrl+A就可以快速选定当前活动单元格区域。第十二,excel选...

    2018-03-18
  • 超实用!比较重要的设计方法论大整理

    @戴小维Saki :设计方法论,顾名思义是当设计师在进行设计活动时可从理论和方法上所提出的实际性意见。当进行不同设计需求时,可为设计师提供明确的步骤与框架。众所周知设计方案要做到有理有据,富有说服力,所以设计方法论也是设计师进行产品设计时的一大利器。虽然会在创新上有所限制,但却能为设计师在没有灵感时候,提供一个有依据的可重复操作流程,进行自己的设计思考,从而输出自己的设计方案。其实资深设计师基本都会形成一套自己的设计方法论。尤其在常常需要进行汇报提案时,这更是方案汇报时的重要方法。

    2017-11-06
  • 你的产品有没有为老年人考虑?

    原文:smashingmagazine 木为艾欧网-交互学堂翻译 如果你在科技行业工作,很容易忘记,年长的人存在。大多数技术工人真的很年轻,所以很容易看到为什么大多数技术是为年轻人设计的。 考虑到这一点:到2030年,在美国19%…

    2015-02-08
  • 认知设计论:关于认知最全面的一篇

    所谓的成长就是认知升级。——傅盛

    2017-05-03
  • 看了都说好!如何建立交互设计自查表?

    强烈推荐!很多同学做设计的时候经常会漏掉这个漏掉那个,等到开发来问的时候才想到。现在有了网易同学自创的自查表,可以把一些问题提前预防起来,文章系统全面,条理性强,是不可多得的实用好文呦。飞灵:对于移…

    2017-08-01
  • 交互设计应该学的软件有哪些?

    数十万互联网从业者的共同关注! 作者:Yoojoo,作者授权早读课发表,转载请联系作者。来源:知乎仅针对现有企业交互设计师常见设计范围(网页,桌面app,移动端app)作答。1-7为交互设计师必备,8-10有兴趣的…

    2017-08-01
  • 小而美的过场-视觉设计

    有些网站无论在内容,可用性,设计或者功能等方面胜人一筹,其取胜之道在于交互和动效的细节上。在这里通过各种模型和大家分享一些案例,并分析为什么这些简单的方式能产生让人难忘的效果。   我们常常会用Pho…

    2014-09-20
  • 成也排版败也排版:一个选择的过程

    作为设计师有一个重要的技能:如何选择文字。这是因为文字是设计师和客户沟通的主要方式之一。那么排版就是决定你设计好坏的重要因素。GoldenRatio (1:1.618)
    1.000x 1.618 = 1.618
    1.618x 1.618 = 2.618
    2.618x 1.618 = 4.236
    4.236x 1.618 = 6.854
    6.854x 1.618 = 11.089GoldenRatio (1:1.618)

    11.089x 1.618 = 17.942
    17.942x 1.618 = 29.03
    29.030x 1.618 = 46.971
    46.971x 1.618 = 75.999
    75.999x 1.618 = 122.966MinorSecond 15:16
    MajorSecond 8:9
    MinorThird 5:6
    Major Third 4:5
    …PerfectFourth (3:4)

    9.969x 1.333 = 13.288
    13.288x 1.333 = 17.713
    17.713x 1.333 = 23.612
    23.612x 1.333 = 31.475
    31.475x 1.333 = 41.956
    41.956x 1.333 = 55.927FontSizes
    Header1: 55px
    Header2: 42px
    Header3: 31px
    Header4: 24px
    Header5: 14px
    Body:17px
    Caption:14px

    2017-05-01