设计师在工作中实用的一些妙计

如果你是刚从事网页设计的新手，在初次进入公司是否会担心自己不能胜任网页设计的职位呢？

如果你是从事网页设计2-3年的初级设计师，对网页设计工作的各项流程都比较清晰和了解，不妨也可以看下以下内容，或许能够帮助你对自己的工作有一个更清晰的定位，以便于提高工作效率节省更多的时间来扩充自己的其它设计能力...

“哇...他/她是设计师呢！真牛逼，多高端大气上档次...”以前没接触到这个行业时是不是心里一阵憧憬，羡煞不已。如今自己是设计师了，却听到身边的人经常说“设计师不就是和程序猿一样经常加班无休止改来改去苦逼的技术工吗...balabala”,你是否会觉得并没有当初想象的那般美好？（小编也这么觉得—︵—，但是不要气馁︶-︶）我们都是设计的狂热粉丝，我们都是美好事物的追求者,我们做设计我们创造我们骄傲。 

作为一名网页设计师，基本的工作流程是怎么样的呢？以下我列出了一般公司工作的一个基本流程：

以下我给大家分享在网页写代码前设计师用的上的一些通用技巧三大点：切图技巧、图片压缩优化技巧、设计稿与成品无缝衔接技巧：

<一>切图技巧

我们的切图工具：切片工具

（1）设计师切图前需要了解网页版面结构：

无论设计师是否懂DIV+CSS,都需要在切图前了解最基础的网页版面布局结构，我们可以通过分层的办法分析自己页面的网页布局结构，这样能够清晰的明确出自己该如何分块切图，降低切出不能用图的风险。

（2）设计师切图时切图对象尺寸尽可能为偶数：

切图资源尺寸尽可能为偶数，是为了保证切图资源在工程师开发时能够更好适配一些适配载体（如手机版、Ipad版）；如果是单数切图的话，例如适配手机系统可能会出现自动拉伸变形，从而导致切图元素边缘模糊，造成开发出来的最终界面效果与原设计效果差距甚远。

（3）设计师切图对象大小在不失真的情况下尽可能质量要小：

图片切图一般情况下文件大小都是相对较大，不利于用户在使用过程中加载页面，因此图片切图要尽量压缩图片文件的大小，这样的优点就是：提高网页加载速度，增强用户体验性。 

（4）设计师切图时需要了解—无需切图的部分：

（5）设计师切图时需要了解—切图命名规则：

一个大型项目会分很多模块，每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tab、nav等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。

（6）设计师切图需要了解—切图工具：

<二>图片压缩优化技巧

（1）为什么要压缩优化图片？

对于一个网站而言，页面的开启速度是至关重要的。它不仅直接影响到该网站在搜索引擎中的排名参数，更为重要的是，会影响访客的页面开启速度。

建议：

1.使用photoshop的“存储为web所用格式”功能来输出图片，减少失真。

2.图片格式选择，色彩少的图片使用png、gif格式文件会小些，色彩丰富的图片，则使用jpg会小些。

（2）压缩工具的选择：

<三>设计稿与成品无缝衔接技巧

（1）尽早了解工程上的限制，减少自适应和手机端适配的难度。

如果你没有及早搞懂技术或时间上的限制，最好别为了根本不可能实现的设计费心。最糟的情况是你投注大量时间和心血去完善设计，到头来却发现根本不可行。所以如果有什么好点子冒出来，但你心中对于是否可行却感到疑虑重重时，别猜，可以直接问工程师（如前端和程序）。

（2）设计稿避免使用特殊字体

设计师设计稿需要根据所做项目承载的载体来灵活使用字体，同时也要考虑字体的版权问题，设计师设计稿如果出现一些不常用的特殊字体，而网站系统字体又没有这个字体，从而会造成效果的不一致。

（3）设计稿细节方面尽量要完整

1. 国际化：你的设计是否有考虑过在其他语言下会因为语言长短的不同造成排版上的不协调吗？

2. 人性化：用户如果没有活动或信息该怎么显示？亦或是有太多活动记录或信息改怎么显示？

3. 转换性：到底 A 画面转换到 B 画面的具体方式是怎样的？

（4）细心的与代码工作者高效沟通

交付标注稿绝不是设计工作的结束符，设计师要及时主动的跟进进度，和工程师沟通在设计稿中可能会比较难以理解的部分，这样可以很大程度上去避免实现效果与预期不符。当然，在开发完成后的测试也是非常关键的一环，因为工程师往往更专注代码结构和性能方面的优化，并不都像设计师那样具有“像素之眼”，如果发现实现效果与设计稿有出入，也要和开发小哥哥及时提出和修改。虽然这个环节往往会让人忽视，但确实是产品上线之前，作为设计师来说最后一次可以修正结果的时候，当然在开发小哥哥如你所愿的实现最终效果的时候，也别吝啬你的鼓励哦。