项目评审
-
新项目评审
（1）看下页面的整体风格是否统一：主色是什么；页面背景颜色是否一致；同种功能的按钮是否有个统一的标准样式等。确保风格一致有利于我们后续把相似相同内容提取出来。
（2）深入了解需求：分析设计稿，要揣测产品和设计师的意图，为什么要这么做，这么做有什么目的有什么效果，用户会是一个怎样的体验，当我们看到一个设计稿的时候，就要养成这么思考的习惯，并及时和设计师产品沟通。
（3）重视交互设计：交互设计在设计稿上有时是体现不出来的，比如那种小型的动画效果，最好是设计产品重构这里可以做出一个gif图或者视频或者flash来展现一下要达到的效果。然后效果确认之后，我们要确定这里是重构来实现，还是重构和前端一起去实现。
（4）是否做媒体查询：如果做媒体查询，需要和设计师确认一下媒体查询分辨率的范围和相应原型图。 -
改版项目评审
（1）确认下哪些页面是新加页面，哪些模块是新增模块。
（2）浏览已发布的旧项目，以便更好地了解改版项目的需求。
和设计师沟通
1.浏览设计师提的需求单。
2.检查切图：切某些svg格式的矢量icon时，看一下icon四周的留白是否过大或者左右留白不一致。因为有时不合理的留白会导致页面错乱。
3.最好在自己的本地保存一份设计稿，后续有新的改动设计稿可以按日期分类继续保存，并要浏览下设计提的改动需求单，确定是哪个项目，哪个位置。
规划
1.目录结构/文件分布：根据页面的数量，以及资源文件大小等，设计目录结构。
2.扩展性：扩展性可以理解为增加新的模块时，对原来的代码没有什么太大的影响。
3.复用性：多次使用的代码提取出来（或提取成sass的变量，或一个组件，或通用样式文件）。
4.页面性能：具体可以参考 优化页面性能 。
5.定义一套重构规范，并遵守。
开始重构页面
1.先写页面大框架，再用通用组件，用页面大框架包着通用组件和私有样式。由大到小，循序渐进。
2.注意DOM结构的命名，以及标签语义化（我之前一直没有意识到标签语义化的重要性，直到导师跟我讲，当一个页面出现了加载问题css没有加载进来时，如果我们做了标签语义化，网页的显示就不会很糟糕，由于语义化的标签自带样式，所以页面还是整整齐齐的）。
3.注意适当地写一些注释。
检查
1.检查font-size、color、间距等是否和设计稿一致。
2.检查一些伪元素的写法与展示是否合理。
3.检查有没有做字数限制（多出文字省略），如果不确定字数限制范围，一定要和设计师产品确认一下。
4.按钮里的文字是否水平垂直居中。
5.DOM结构简化（作为一个重构，一定要对文件的大小关注到病态，越轻量越好，当然在项目不会出问题的前提下）。
6.检查dist目录有没有异常。
7.检查兼容性有没有达到要求。
8.删除某一模块测试，看看页面是否会错乱。（因为重构这边的页面是静态的，但是在前端那里，有的模块可能是触发后才会显示，所以我们自己在测试时，要试一下删除某一模块页面是否还会正常显示）。
9.每一个页面的title（页面题目）是否正确。
10.若是PC端，需要在可点击的地方加“cursor: pointer;（小手指）”。
11.注意换行问题（word-break, word-wrap, white-space）。
12.避免样式冲突。
13.检查每个元素是否偷偷地变形。
14.严格检查一下代码，是否符合W3C标准。
提交&交接
1.保存、编译、提交、上传、验收。
2.跟前端确认，关闭需求单。
发布后
在测试环境或正式环境发布之后，要去测试网、现网检查。
标签：重构,严谨,检查,是否,前端,UI,模块,设计,页面 来源： https://blog.csdn.net/baidu_29086999/article/details/110436838
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。