设计操作系统改版我都经历了什么

工作流程：

1产品层

理解业务、任务、操作流程

——原流程有些重复、不顺、杂乱、不一致、操作不方便的地方，在理解时会造成一定困难，在改版整理时进行了优化。做改版相当于战略、范围层都已做好，我从结构层、框架层做到视觉层。期间我做了截图整理对比、功能结构思维导图、原型研究。

2视觉层

（1）确定导航框架

——原系统导航结构混乱，有时只有横向导航起作用竖向导航只是重复累赘，有时竖向导航又有内容。经过梳理发现系统其实比较庞大，由多个子系统组成，于是改版后横向导航放置各子系统模块，竖向导航放一个子系统里一系列任务模块。这算是一个比较庞大的系统了，采用了横竖导航并用的形式。

——由于是第三方的系统平台，所以系统里要放置系统图标、注册用户名、注册用户所在公司的图标和名称。一般系统只放置其中两项，所以一个放在头部导航左边、一个放在头部导航右边，或者一个放在头部导航左边，一个放在竖导航上边或下边。要放置三块身份信息的话，首先我将软件标志放在了头部导航左侧，这是最易和最先看到的地方，可以起到宣传我们应用平台的作用；其次，我将用户所在公司和用户名归为一组显示在头部导航右侧账号区，图标展示公司图标而没有个人头像的上传和展示位置，因为是to b的系统，所以个人个性需求会减弱。

（2）布局设定

——确定好导航框架后，基本布局已经出来，剩下的为信息展示和操作区。为方便适配小屏幕和大屏幕，设计稿取了中间值1440*720，操作区宽度为1280，布局设置为24裂水槽宽16px，网格设置为8px。网格很好用，非常方便各元素对齐，位置间距也有了统一（不用动脑）的标准。

（3）主要页面排版

——设定好布局后，排布主要的功能页面，在这里走了一些弯路，因为对业务和系统还不够熟悉，设计了多张表格页面以推演不同功能页的表现方式，但由于这时还没有形成控件、颜色的统一规范，后续调整时做了许多重复动作。下次表格功能内容的推演应该放到原型里去做，减少严谨ui图调整的麻烦。

（4）确定颜色、控件规范

——虽然做页面前就试图制作的颜色规范，但随着页面的制作，有些颜色不合宜就会令取，用色变得不够刻制有些杂乱。做完页面后，我将主要颜色提取出来，包括有彩色、灰度色。其中灰度色最多易杂乱。

——灰度色包含文字色（标题、正文、提示、导航）、线条色（边框、分隔）、背景色（屏幕、表头）。颜色多为浅冷灰，会显得页面清爽干净。

——彩色。源系主题色为深灰配暗金，想要表现高级感，但是这种配色可能比较适合偏平面的作品，在系统页面中与白底色相配会显得有些脏和单调。改版后采用了一些鲜艳明快的颜色，给后台系统加入了轻松感。改版后大面积采用清浅颜色，重点元素用靓丽色彩，侧边栏用暗色背景以和信息操作区有明显区分。（但是改版后会担心登录页面与内页有些基调统一，不过可以留到后续再解决，因为后续横向导航中还有许多不同模块，有可能产生其他风格。）设置彩色的时候还要保持各色相的明度浓度的和谐统一。

——和颜色规范同时进行的是控件种类、交互状态的规范整理，在标准化控件时还需要对颜色规范进行修改。几个主要控件包括表单控件（输入框、选择框）、按钮（主要按钮、次要按钮、开关、状态按钮、单选框、复选框、文字按钮、图标按钮），状态主要分为常态、悬停、按下、抬起/选中/已输入。

（5）确定完这些规范后，对之前做的主要页面排查修改-将零散的部件替换成规范组件库的零件，这样既保证统一，又能简化图层。

（6）确定好这一系列的视觉层后，就可以复用了，以后不需要每次整理，也方便和技术交流，不需要在设计图上展示多种状态，只需制作常态设计稿。

3获得反馈

这些分析和设计做完后，自己做了一些整理，回顾了一下改版的优化点，给产品经理，待和同事进行评审讨论，算作简单测试

总结：

在给产品前又做了一些排查整理，总想优化完美，但感觉总有一些遗留待处理。

——永远做不到完美，应该给自己一个排期，给自己一个一个的小目标，给项目一些分割给自己一些压力。

——有了前面的积淀后续工作应该会容易一些，有章可循，也会给自己一些新的任务目标。后续工作中也可以多做一些及时的交流。（分享你的成果，否则它会消失。和同事交流能让团队联系更紧密并获得反馈，对进度保持兴奋）