干货贴: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-15
  • 【译】2016年UX发展状态

    原文:The State of UX in 2016 作者:Fabricio Teixeira 译者:冬火鸟 简介:总结2015,了解目前发展趋势,hold住2016UX发展动态 #1 抠像素的时代已经结束了 2015年,你将“UX”这个流行的词汇加入到了你的简历中——…

    2016-01-29
  • 交互设计文档怎么写? | 设计基础05

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员…

    2017-08-04
  • 如何将“用户体验”做到极致?我有绝招!

    如何将“用户体验”做到极致?我有绝招!无崖子现在大多数掌柜的没有重视用户体验或者说不知道如何做用户体验。三只松鼠相信很多掌柜的都很熟悉,坚果类目的老大,三只松鼠是如何成功的呢?三只松鼠的成功不是偶然的而是必然的,三种松鼠将“用户体验”做到了极致,三只松鼠的创始人:章燎原是传统行业出身,在做三只松鼠之前在传统行业就对坚果非常熟悉,章燎原对坚果行业的把控至今无人能敌,三只松鼠的成功一部分是对供应链和仓储的把控,还有就是注重“用户体验”的极致...

    2018-03-16
  • 阿里UED:优秀阿里设计师如何养成

    编者按:一个优秀的专业交互设计师该具备哪9个素质?一个完整的交互设计流程该经历哪12个阶段?今天阿里的交互设计师从零开始一一帮你解答这两个问题,非常适合新人入门哟。一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后...

    2018-03-09
  • 中国app产品UI在歪果仁眼里是怎么样子的?-Dan Grover

    小木导读:中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。

    2014-12-30
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07
  • 内部教程|6步透视网易设计规范(附规范PDF下载)

    LOFTER这份精而美的设计规范,页数不多,但每页都是经过三思后得出的总结,推荐一看。

    2017-05-20
  • 无形的设计!聊聊为应用创建「一致性设计」的几个原则

    「一致性」可以理解为统一或者更通俗的规范,这篇文章有一定深度,作者从多方面阐述了一致性对于UI设计的重要性。最后给出了为应用创建“一致性设计”的几个原则。下面让我们来阅读发表在Medium上的,由交互设计师兼工程师的Joe Toscano创作的文章。我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27