17年的时候，为北京景行锐创做了JHappform全新版本的4.0UX/UI设计，负责该产品的交互设计、UI组件化设计，被限制使用kendo UI的实现，后来的产品是成功的，今天把当时的一些思路贴在这里。这也是我第一次全面的产品化设计的实践。
信息架构（IA）
首先是针对现有产品的业务了解，并由此绘制了产品信息架构图（Information Architecture），这里使用了ProcessOn这个在线工具，当然你也可以用xmind一类的思维导图软件来实现。
所谓信息架构其实就是将现有产品的功能点根据信息类型进行划分，并据此搞清楚这些功能的详细意义，多年以来的经验，这样做能是我很快了解公司的产品功能。 我希望你能够明白这个环节的重要价值，那么信息架构图长什么样呢？
大概就是这样个样子：
解释一下，以中心点对功能进行发散，上面的信息架构图是对一个单一功能的归纳。
现有系统的分析交互分析
因为我们现有系统也一直在用，加上有前端框架的限制，所以我不但不能忽略他的存在还得更加重视它，详细的使用，就像网上很多人对12306的redesign一样，因为你们对现有的12306 APP 有极度的不满，并且十分了解他的不满出现在哪里，所以才能够对他进行你想象中的设计。
这里重点说一下，产品的所有面向客户的设计，一定要想想用户想要什么，通常我们为此会做一些用户调研。
充分了解用户人群，站在他们的角度使用老系统，在过程中搜集问题，和你的用户调研结果一起整理，然后去找技术沟通，当时做成这个样子的的原因。这中间一些因为成本的妥协和取舍是在所难免的。但一定要考虑后期的迭代。
开始
把你想象的完美的系统UI/UX实现出来，并为它做一份设计文档。因为我还算是一名比较合格的前段开发工程师，后期还配合他们完成了API的开发。
文档的目录大概是下面这个样子
- 概述
- 基础
- 颜色
- 文字
- 组件
- 表单
- 按钮
- 弹出框
- 导航树
- 导航
- 表格
- 弹出Dialog
- 穿梭框
- 文件管理
- 桌面
- 图表
- icon
……
- 系统交互规范
- 概述
- 系统交互图谱
- Demo
- 设计demo
- 交互demo