网页改版设计怎么样做到一稿过？
网页改版设计全流程入门解析，告诉你在改版的过程中需要注意的细节点有哪些。
前言
最近的一个网页的改版设计总结和设计过程中的一些思考，希望能让大家对下面三点有一点学习的帮助。
一个完整的网页改版设计流程是怎么样的？
如何做到对多个任务进行合理的时间规划？
怎么避免反复改稿，做到有理有据的输出？
首先我特别强调一点就是当我们接到PM给的一个需求或原型的时候，
千万别第一时间打开Photoshop去做设计
千万别第一时间打开Photoshop去做设计
千万别第一时间打开Photoshop去做设计
重要的事情要说三遍，因为我们不能养成一接到需求就打开ps的习惯。
不打开Photoshop，那我们首先要干嘛呢？
我们首先要了解整个项目的时间，这样我们就会预期有一个设计的时间段，不然就会出现这样的对话。
设计师：我啥时候设计好呢？
PM：当然是越快越好了。
上面的对话是不是非常熟悉的画面，所以在接到任务时要先问一下这个项目什么时间上线，这个时候PM会到我们一个大概的时间点，我们就可以根据这个时间点倒推，预估开发需要的时间，我们设计以及改稿的时间， 评估之后反馈给PM我们设计的一个时间节点，这样我们就可以得到下面这样一张时间规划图。
这样一个合理的时间规划，让我们知道什么时间要干什么，因为很多时候我们不仅仅是只有一个任务在身的，有了这时间规划就可以很清晰知道任务的轻重缓急。
有了时间的规划，第二步也不是打开我们的Photoshop，而是我们要知道这次，
业务目标是什么或者说业务诉求是什么？
然后我们才可以确定设计目标是什么？
业务目标
怎么理解业务目标呢？比如这次网页为什么改版？因为业务觉得网页内容太过杂乱，用户进来看的东西没有重点，看完之后的转化率不高，希望能通过这次改版让转化率有所提高，这就是业务的目标，然后还有客户使用我们产品的反馈。
客户反馈
客户：因为打开网站就是为了进后台，每次都要点击上面登录在输账号密码感觉很麻烦，所以希望能登录更便捷。
业务梳理
不同的用户进来需求是不一样的，所以给不同用户看的内容也是不一样的，所以希望有一些针对性的展示。
设计目标
那么我们的设计目标就有了，重点突出登录功能，功能明确目的，功能层级梳理，给不同用户有定制化的展示。
资料收集
明确设计目标之后，PM会给到我们原型或需求文档，但是仅仅有这个还不够，我们还有需要去收集一些相关的资料和数据，因为我们是改版也就是说原先的网站已经上线使用了一段的时间，所以我们就会有了网站使用的一些相关数据，我们需要拿到网站功能模板的点击量的数据，这个数据可以让我们知道对用户而言那个功能是他更关注的。 然后我们上面的业务诉求和客户反馈建议梳理成文档。当收集完这些资料后能让我们进行改版设计时更有理有据， 而不是人云亦云。
页面分析
有了资料然后我们再对原有的网页进行分析，两者结合进行设计，我们分析页面就可以从框架层，表现层，交互层三个层面去分析页面存在的问题加以改进。
框架层
你也可以理解为我们说的原型，那么我们拿到原型之后肯定不是先打开我们万能的photoshop了，而且先对原型功能的分类和排序进行分析梳理。
我们可以看到banner图被一堆广告给包围了，一是给人感觉难别扭，二是banner的主要功能是带提高转化的给人转达关键信息的作用，这样广告围绕的情况下，用户注意力很难聚焦到banner的内容上，这样就不能有效的传达信息，这就是明确功能目的，banner的功能目的就是为了传达信息，为了做好这一功能目的我们就需要把广告移除。
第二点就是功能归类，页面中三个地方出现了广告，这样会让用户在浏览的时候内容的不能有一个连续性，所以我们应该把广告归到一起，功能介绍归到一起。
第三就是功能模板的排序，那个功能模板放前面那个功能模板放后面，这里我们可以从两个维度去分析，一个维度是这个功能对公司而言转化率如何，这点可以和业务沟通，第二个维度这个功能用户是否很注重，这里就可以用到我们上面从开发那拿到的数据。
表现层
这里就是视觉方面的事，页面设计风格有没符合现在的流行趋势，有没符合公司品牌调性。页面元素之间的间距呼吸感如何。页面的节奏感如何，设计的细节有没做到位。
这里就可以说是时候表现真正的技术的时候，页面做的好不好看就靠我们设计师了，这也是我们本质的工作，如果设计出来的东西不好看，分析的再多没有好的界面作为承接也是没有用的。
交互层
第一点是交互逻辑，功能与页面之间的跳转逻辑，这一点PM一般情况已经是写好在需求文档里面的了，不过我们也要稍稍留意一下，在设计的时候自身的感觉这个逻辑对不对，感觉到不对的时候要及时和PM沟通。
第二点是交互动效，用户操作之后的反馈，不同元素之间的衔接等，这里特别要注意一点的是做出来的动效要及时和开发确认，是否交互动效会难度太高，会不会导致开发成本过高。
不然辛辛苦苦K的帧做出来的动效，信心满满的甩到开发的时候，开发来一句：这动效太复杂，开发成本太高给否了，那就不好了。
大家到这一步可能会觉得烦琐，上的一连串操作有没有必要，我这里可以告诉大家。上面的收集整理分析的过程非常重要，至于为什么，这里先有留疑问，下面会给大家解答。
色彩
前面说了我们这次的设计目标之一就是建立品牌认知，品牌色的运用就是很重要的一环，如果觉得现有的色彩不符合品牌调性可以通过情绪板进行再确认，但是这次改版可以说是网站整体对品牌色的运用的不够，没有建立品牌认知，所以我直接从logo上取了一个绿色作为主色，确定主色之后在进行拓展。
在确定颜色的时候最好就是把能用到的颜色的地方都想好用色，这样不会造成成这里用了这个偏点黄的绿色那里用了个偏点青的绿色。
字体
大家在选择字体的时候千万要注意的是字体的版权问题，现在字体版权的意识是越来越强了，不小心踩雷就损失严重了，如果公司的版权意识很好而且能出购买字体版权的费用就是最好的， 如果不能的话那就选择一些开源的字体。
上面说的是一点，选择开源的字体，然后在开源的字体里选择符合公司品牌调性的字体，比如无衬线体，衬线体不同的风格。
关于哪些是可以免费商用的字体大家自行网上查找，关于如何购买有版权的字体网上的相关资料倒是不多，有机会会出一篇文章专门聊聊关于购买有版权的字体的问题。
设计范围
大家的习惯都是一打开ps就直接建了一个1920*1080的画布，但是呢？大家有没考虑过在浏览器上呈现的效果呢？我们来看一下下面的图示。
上面我是mac系统下面浏览器的的呈现效果，Windows系统的也是同样的，我们可以看到浏览器的标签栏，搜索栏，书签栏这些是已经占了一部分位置，下面的系统自带的程序栏也占了一部分，所以我们的画布大小不应该建的1080px这么高，一般情况下900px的高度是合适的，因为第一版页面是非常重要的，不然出现内容展示不完整就不好啦。
栅格化系统
还有另外一点要注意的就是大家经常会听到的栅格化系统。
这个栅格化系统是要干嘛用的呢？这个栅格化系统最早应该在实体的印刷行业，主要的作用是让元素的排版更有依据，让整个画面有韵律感，慢慢发展到应该用很多地方，网页设计也可以用到这个栅格化系统，我们看一下下面的图示
我们可以看到当栅格化系统建立之后，不同元素的对齐和排版就有了依据，这是一个作用，还有另外一个作用就是我们通过这个栅格化结合国内电脑屏幕分辨率的占比来确定设计的安全范围，这样的好处在于后面不会导致在1920px的屏幕网页看着是没问题，到了1334px的屏幕网页的主要内容就看不全了。
设计阐述
最终通过我们的有理有据的设计之后输出了设计稿就可以进来过稿流程了。
上面的所有准备就是了这一刻，为什么有些设计师会频繁改稿，而有些设计师却能很轻松就过稿呢？
就是因为他们前面进行了大量的有依据的设计，说出页面之前是怎样的之后为什么要这样设计，这样才能在过稿的时候能说服相关负责人。避免反复的改稿，导致经常性的加班。
设计走查
当设计稿确定之后我们不要着急切图输出给开发，我们先页面进行一个大致的梳理，可以说是一次走查，这样也方便后期规范的整理，走查这一步有什么用，这一步可以帮我们查漏补缺。
这里拿字体字号举例，我们一开始设计的时候并不确定导航栏多大大字体，正文用多大字体，提醒文字用多大字体，那么当我们整个网设计完之后很可能会出现七八种字号，相同的文字功能也使用不同的字号，这样就会导致页面字号混乱，给人感觉不专业，给前端开发增加难度，后期不好整理规范。
所以这一步我们最好把字体，颜色，间距，布局这些进行一次验证和检查。
设计交付
做完走查这一步之后接下来就到了设计输出了，和前端开发进行对接，关于怎么切图标注的我这里说两点大家会忽略的。
标注
一是标注时要注意的切图的间距问题，我们来看一下下面的图示，红色的是软件自动标注的，蓝色是我手动标注的
红色和蓝色所显示的数值是不一样的，为什么会出现这样的情况呢？是因为每个字都是有字符框的，而且字体越大标注的误差也越大，这就是为什么前端开发写出来的页面和我们设计出的页面总是存在差异的一个原因。
切图
不同图标的形状大小不一样，但是我们要保证设计出来的图标的视觉大小是统一的，然后就是我们在切图输出的时候要保证同一功能的图标的大小是一致的。
这一步是一是为了方便开发写页面，二是为了能让开发更好的还原我们的设计稿。
不同的交互状态
不一样的交互状态一定要和开发沟通清楚，比如最常见的按钮的五种状态，这里是不能偷懒的，不能只设计了一个默认的状态，不然在开发的时候前端肯定会问你点击是什么样子的，登录成功是怎么样的，这样会给人很不专业的感觉，而且对用户的体验来说也是不好的。
到这里就是等到开发写完页面，后台接口对接，测试完成后，在收集后期数据，平常注意数据的收集，关键位置的埋点，为了下一次改版做好准备。
今天就分享到这里，不知道大家看完文章之后有没对以下三个问题有了答案呢？
一个完整的网页改版设计流程是怎么样的？
如何做到对多个任务进行合理的时间规划？
怎么避免反复改稿，做到有理有据的输出？
欢迎大家在留言区给我留言交流分享，最后可别忘了给我点个赞喔！
