自我介绍：
本人不是专业艺术生出身，理工科学生学习数字媒体技术专业。
大一大二敲了两年前端代码，大三因为兴趣使然跑路自学UI，大四在公司实习设计，目前毕业在互联网教育公司从事UI设计一职。
公司致力于B端项目的研发，也是我第一次接触B端产品的设计。
刚开始难免有点吃力，明明就简单的功能页面做起来怎么就那么麻烦？逻辑怎么就那么不好理清楚？
因为不是专业出身，很多专业系统的知识都是在大四实习这一年里项目实践下慢慢学习的。
为了许多像我一样的小白，接下来我将从一个项目的【产品-交互-视觉-定稿】这四个阶段和大家拆解讲述。
一、【产品】阶段
首先拿到一个产品给的原型，要理解项目的背景，明确用户的需求。
项目背景一般产品经理就会给你讲清楚了，不懂一定要问，不懂一定要问，不懂一定要问（重要的事情说3遍）。
用户需求的话就需要你自己和用户去沟通了，一定本着对自己和项目负责的态度深入沟通（血与泪的教训）。
注：公司项目为了保密，只截取部分模块进行讲解。
首先整体来看，这是一个【时间轴】样式，有对应时间节点、文字描述和图片展示。OK没什么问题~
然后仔细看发现有个翻页功能，这时候就要和产品沟通这个与翻页连动的数据具体是哪个模块？
1.按照布局来看，是对所有内容进行翻页。
2.整体联动的话图片与时间节点并没做到一一对应的关系，很容易出现文本已经到底，图片却还剩下一堆未展示的情况。
3.仔细分析对应关系发现其实这张图片与时间节点的文本也没起到对应的关系，那么他为什么要在C位进行联动。
4.综上所述，对于所有内容进行翻页是个不合理的展示，将原型驳回让产品梳理清楚自己的展示逻辑。
拿到产品二次数理逻辑后的原型感觉理解就方便很多了
1.首先祛除了整体翻页这个功能，这样就解决了我们所说的联动困扰。
2.将图片与时间节点区域进行了拆分，这样也解决了我们上述所提出的他们二者之间是否存在对应关系。
上述问题解决了，在动手之前我们还是要和产品确认右侧的时间节点区域最多展示几条 展示不下的怎么显示
当然在我提出这个问题的时候，交互出现拦住了我，对我说【等一下，缓一缓，交互还没理清楚】
二、【交互】阶段
交互的出现大大减少了我的工作量 原本这个大模块是这样的
它一眼望过去被分成了三个部分：时间轴展示区域、本周数据雷达图、学生详情雷达图
在交互和产品深入沟通调整展示逻辑后他长这样：
这个有点复杂的图我们可以理解成一个弧形展示的曲线图，横坐标为周数，纵坐标为四个星级维度。
图片只做展示用，不与任何数据相关，只是单纯轮播展示。
好，这样逻辑就已经十分清晰了。
深入思考后，和交互确定了几个问题：
Q1:横坐标最多有几个数据，五个如图所示，三个怎么展示，十个怎么展示。
A1:数据不定量，少于等于五个按照显示圆弧的距离进行均分，多余五个不论多少个都“藏”在未展示区域，将这个圆弧想象成一个可以无限延展的可动区间。
Q2:图片是只有一张固定不动还是与外侧数据统一联动？
A2:图片有多张，与外侧数据五官，自行轮播展示。
Q3:如图是选中第三周的激活态？德智体美劳这个图例文案怎么进行激活？
Q3:如图是激活态，图例文案也是可激活的“按钮”。两种逻辑样式补充后给你。
三、【视觉】阶段
好，目前一切逻辑都十分合理也都理解清楚了，现在需要做的就是根据产品风格定位进行视觉设计。
注：本项目为第二期，第一期已上线项目定位为数字画像大屏（整体风格已定）。
对于这个“想当然”存在的弧形折线图的设计，要先调研一下目前市场的设计样式，好的设计不是说从零开始的创新，而是符合现有用户定位和需求的合理设计。
在花瓣、behance、Pinterest上进行好的画板收集，将自己的设计思路做好草稿。
因为我也不是一个专业出身的设计师，所以让自己快速成长的最佳手段就是多看多想多问。
“首先要明确什么是好的才能做出好的设计”，加油只能一步一个脚印慢慢积累了。
四、【定稿】阶段
根据目前已经定好的设计风格和自己调研的设计样式，大方向都定好了就可以开始着手设计了。
￥%…………￥%#@￥#@%……￥#……#￥
考虑到视觉的均衡我将整半圆进行了垂直翻转，这样还能让图片展示区域更大限度的进行利用。
除此以外，横坐标的数据与德智体美劳的图例文案排版也能有呼吸感，将查看个人画像入口放在右上角也使整个画面更加均衡。
第一版：
视觉反馈：1.整体效果不错，建议在第三周选中时加上具体的1234数据提示
2.像交互稿一样将单纯的线性区分做出面性区分增强区分度
3.C位的图片又丑又亮，跟整个画面格格不入。
在收到反馈时，你要分析提出这些反馈意见的原因和你为什么没提前考虑到这种情况，只有这样不断地进行分析才能让自己快速成长。
1.提前想到了1234这种数据的展现，但是因为考虑到数据图重叠概率十分大所以选择隐藏数据。
2.数据图有多种色彩，颜色的叠加会使整个画面呈现出很脏的效果，所以抛弃了面性展示。
3.这个图片我无能为力。
针对第一个问题，我们要抓住产品需要的是数据展示，所以我改变了一种表现方法进行展示。
对于第二个问题，话不多少我们将两种效果做出来，将透明度进行降低展示达到效果。
针对最后一个问题，无能为力的是图片质量，我只能最大限度的使视觉稿符合预期。
第二版：
视觉反馈：1.数据图的戛然而止没给人无限延伸的感觉
2.图例的激活态不够显眼。
定稿：
总结：在公司里任何一个具体的项目的运作都是这个流程，可能有的没有专门的交互设计师，只能靠大家自己努力了。我也是小透明一个，只能按照我自己的思路和理解拿一小个模块和大家沟通一下平日里自己的工作流程。
谢谢看到这里的任何一个人，希望能对曾和我一样一无所知的小白起到一点点实际作用。感谢，长期不定时更新。
