本次政务之星web前台系统部分的页面设计共耗时2周半，从对熟悉项目到界面绘制再到规范形成，过程中出现了较多的返工，浪费了大量的时间。

由于是ZF的项目，处于安全考虑不能上界面展示，仅针对该项目过程遇到的问题记录一些心得体会，给自己做一个复盘的同时，希望也能给和我一样刚刚入门的小白们一些启发和警示

遇到的一些问题

拿到需求文稿或原型图后，第一时间不应该动手绘制界面，这样做的主要有以下几点缺陷：

1.对产品功能的不熟悉导致无法有效利用组件化思维进行设计

2.不能很好的把控产品的视觉风格，往往每做几个功能会发现之前定下的规范和思路不能满足该功能的设计需求，这会导致之前的设计思路被打乱，并造成大量的返工现象

3.对于网页控件的不了解造成设计进度缓慢，很多时间花费在单个组建的样式上，同样会造成前后反复修改的现象

4.对于sketch的组建库功能一定要有提前的规划，不然不如不用，针对如导航栏，顶部条，弹窗等贯穿系统始终的高频复用组建可以建立组建模版，方便后期对细节的修改

针对这些问题的思考

首先要做的是理解产品的功能和流程，最好能够将产品进行粗略的功能分层，以本次的政务之星系统为例子，分为以下几层：

1.左侧导航条：贯穿系统始终，极高的复用率，应该优先建立组件

2.顶部工具条：同样有极高复用率，并伴随着高频的修改率

3.内容显示区/首页数据：主要支持待办事项，日程等主要信息的快速查看和快捷入口

4.内容显示区/各功能数据：通过左侧导航栏进入的各种功能模块，主要展示该功能的各项参数，分为浏览和新建功能

5.内容显示区/各功能新建：点击新建后弹出的页面，不同模块间版式上相似度极高，由输入区和设置区组成

得到整套系统的功能与信息分层后，应该优先从版式入手，制定合理的区块划分，不要过分斟酌细节，克服自己的强迫症

确定版式，需要总览原型来梳理出重要的交互节点，政务之星的设计中主要可以分成三类，按钮  选框  文本框。然后明确几个重要的复用性极高的节点进行统一的设计。比如所有功能模块中都有的“新建按钮”，各种信息列表末尾的“查看/处理”等按钮。

根据按钮的用处和位置进行归类，设计几种针对不同环境下的按钮样式，并建立组件库，方便后期的修改和调试，其他的表单控件等也是同样的道理。

关于细节方面的思考

先说版式方面，版式的确定一定要参考栅格布局和黄金分割的理论，不能拍脑门凭感觉乱定，越是顶层的步骤，在后期的修改中就越是耗时

控件方面，这次的缓慢有很大程度上是对于网页设计和控件规范的不了解造成的，一开始不知道去哪里找参考只能从网上东拼西凑的自己设计，直到发现Element UI情况才有所好转，参考别人控件的交互布局，再结合自己产品的设计风格进行修改，出产一套控件规范对于后期的设计和前端开发都很重要

图标方面，不要一开始就置入图标，更不要自己花时间绘制，全部使用占位符进行填充，其他定稿后统一添加图标。另外每个图标都要保证有规则的正方形外框，这样在和文字等元素进行对齐时可以大大提高效率

由于是刚进公司就接手的项目，在设计开始的时候受到了前任留下规范和风格的影响，导致登录模块和其他模块在风格上有较大的差距，并且中途有几次改换风格也造成了不少的浪费，以后关于调色和风格还是要先按自己的想法和甲方进行沟通后再进行设计

先骨后肉的设计理念

这次项目中最大的体会就是自己的强迫症，总是在做的过程中不自觉的去调整细微的尺寸，纠结一两个像素的对齐，这让我浪费了大量的时间和精力，商业设计不同于作品集的设计，讲求时效性，往后的项目中应该坚持先骨后肉先整体后局部的思路进行设计