仓储系统改版项目总结

项目背景

某公司仓储系统管理平台要求改版升级，一是对风格作大的改版，二是主要功能优化

一、需求了解

业务需求：参照旧系统

用户需求：也就是这次改版的需求范围，要求风格作大的改变。模块清晰，并优化主要功能，

兼顾初级用户的易学性及高级用户的高效操作

关于用户需求的设计思路作以下简单介绍：

我们把需求拆开来看

1、风格大改

考虑到用户操作习惯，布局不建议做太大改动，颜色上应该有大的变化，色彩的变化是最容易被察觉到的，这一点很容易满足用户的改版需求。

2、模块清晰

一是从信息架构来说模块分布要清晰合理；二是从视觉角度，通过颜色和空间将模块清晰划分。

3、优化主要功能

此项目需要改版的为单表操作界面，主要操作是增删改查等，在后边内容讨论时需要详细讨论优化方案。

4、关于初级用户易学性和高级用户的高效操作

首先需要模块清晰，再一个很重要一点是交互，交互的核心是即时反馈，当用户作出悬停或点击的动作如果界面没有任何反应会让用户产生疑惑，降低效率，这一点同时试用初级和高级用户。

二、设计目标

在设计目标会议开始前我在网上找了一些界面素材以供会议讨论，拿具体的实物做问题分析总是能把问题清晰化、具体化，好过于空讲。

1、结构布局

首先要确定的是结构布局，需要同时考虑前端的框架，此项目采用较为流行的vue框架。

考虑到现有版本的界面结构以及此类平台高频率的操作需求，依然采用将导航置于左侧。通过和前端人员沟通左侧导航固定，右侧内容区自适应并一屏展示，这样既美观又充分利用界面空间。

结构布局展示

2、色彩风格

首先说导航的颜色采用现在流行的深色系，再一个是搭配的明亮色选择橘黄色为主。

参考

3、主要内容

主要内容包括摆放元素、交互、功能的讨论，基本按照头部、导航、内容区的顺序依次讨论。

头部包括logo、管理平台名称、功能按钮

导航包括默认状态二级导航展开方式，收起状态二级导航展开方式。

内容区设计操作较多，如现有版本查询条件占据界面空间过多，表格中需增加双击修改等功能。

此时前端人员已经开始框架搭建，这样可以提高项目整个流程的效率。

三、设计执行

因前期需求清晰、设计目标明确，基本是一次定稿

改版前

改版后

界面评审通过后就可以输出标注、切图以及规范，与前端人员交接。这个环节需要注意的是要和前端人员多沟通，不要自己闷头把所有细节标注做完发现前端并不需要，切图也一样。关于规范，此项目采用vue框架+IViewUI库，规范可以结合UI库输出，这样既减轻了自己的工作负担，又提高了前端的工作效率，对整个项目成本来说是重要的一部分。

四、设计走查

作为设计人员，并非和前端交接完就完成了所有工作，走查是重要的一个环节。因为前端人员和设计人员的工作重心不同，所以前端人员在实现设计稿的过程中因为技术或时间等问题会对设计稿的效果有所取舍，这个取舍设计人员一定要参与。

一般情况下走查需要注意三个方面

1）对于前端人员疏忽的地方做到友情提醒；

2）考虑到技术或时间不容易实现的效果，和前端一起想一个更快捷的方法；

3）对于效果实现以后和自己预期有差距，也一定要立即调整，尤其是动效方面，动的物体最吸引用户的眼睛，也是对用户的心流最有影响的一个因素，如果动效体验差，就直接影响产品的整体体验。

小结

首先要有一个良性的工作流程，根据项目周期调整流程的繁减，在整个流程的各个环节以用户为中心，以满足用户需求为目的，但是有时也可以适当调整工作方法，无论怎么调整流程和方法，最重要的有两点：

效率

设计目标讨论时要需求人员、设计人员、技术人员同时在场，这样避免多次重复沟通，要拿具体界面说话，这样问题更清楚，也更加快速的找到准确的解决方案；

利用现有资源，采用iviewUI库，节约了时间成本，简化了开发流程；

在效果和成本有了矛盾的时候，要综合考虑，找到一个好的平衡点。

质量

需求要了解清楚，设计目标的讨论也必须是实事求是，这样才会得出高质量解决方案；

设计稿交付以后，参与实现效果的走查，保证设计的还原度。