联系方式

咨询热线：400-998-6158

常见问题

学习资讯

Web前端工程师要掌握的工作经验

一、Photoshop

开发者经常需要处理设计师制作的Photoshop PSD文件，因此任何对设计师有益的事情也会对开发者有益，包括绘制易于维护、易于理解的PSD文件。

1、有效地进行版本控制

设计师经常会面对各种装满了一堆没有清晰版本命名的PSD的文件夹。为了解决这个问题，设计师可以事先确定一种合适的版本命名格式(理想的格式应该使文件在字顺排序下自动有意义地排列)。

2、保持图层

不要轻易合并图层。需要导出时，通过组合，隐藏/显示图层的方式来进行，导出后再把文件恢复到原来的状态。不要轻易破坏有用的数据。电脑性能更不是合并图层的理由——若被此限制，你应该做的是买内存更大，性能更好的电脑。

3、对图层进行有意义的命名

虽然对图层命名比较繁琐，但这样做确实能够帮助理解，尤其是在重用文件元素的时候。命名时应确保文字图层的名称反应其内容。重复的图层也要进行有意义的命名，而不是简单的“副件”。

4、合理地对图层编组

应该把分散在不同图层的视觉元素编为一组。对单一设计的文件来说，编组整体上应该一致按照从左到右，从上到下的顺序。层次和顺序比按颜色编码图层更好，因为图层移动时，颜色还需要保持。

5、去掉不需要的图层

不再需要的旧版本、模版和参考材料以及临时复件应该从图层中及时删除。间歇性地浏览一下你的所有图层，及时删除不需要的东西。

6、使用图层复合

Photoshop的图层复合功能可以让你制作多组图层状态，如可见性，位置甚至图层风格。你可以用图层复合功能来灵活地在一份文件中整合设计中不同部分(比如网站的多个标签、应用的多个页面)。这样做可以不必保留重复的图层编组，从而减小文件大小。

7、保存矢量文件和可伸缩效果

在设计应用时，很可能会需要原设计两倍尺寸的图片来适应有双倍像素的新设备。确保在这种情况下你不需要重新绘制所有的图标。

二、助力开发者

还有一些特别与应用及网页设计相关的建议，每项都有相应的要求和限制。

8、学会在缩放时保存圆角

操作系统经常会统一圆角的角半径(iOS通常为12像素)。Adobe Fireworks会保持圆角矩形的角半径，但Photoshop不会。因此确保你用直接选择工具来选取圆角的点并且以传统的方式缩放图像。

9、在72ppi下进行设计

一个像素就是一个像素，更多的像素只会生成更大的文件。不要通过改分辨率来蒙混过关。

10、对齐像素

确保相关的形状工具设置成对齐像素。根据你的需要使用像素网格等工具。一贯使用偶数尺寸来方便裁剪。

11、使用RGB模式

这点不仅对颜色显示重要，对开发者将颜色正确地写入代码也同样关键。

12、资源准备是你工作的一部分

很多(大多数)开发者除了基本的编辑功能外对Photoshop一窍不通。设计师需要适时地导出可能会在应用或网站上用到的裁剪图，因为毕竟他们是对文件和Photoshop较熟悉的人。这项工作虽然很痛苦，而且很耗时，但这是除“设计”外**的工作。

13、谨慎地使用字体

不同的设备和操作系统的预设字体有所不同，因此不能确保这些设备都有你进行设计的电脑上的字体(事实上，你比一般人的设备上的字体都多)。基本上，将应用或网站上的文字以实际文本的格式呈现会有更好的效果，但这也使对字体的选择不仅基于视觉，还有可行性上的考虑。

还有一点值得注意，允许个人设计使用的许可也许不允许你将该字体完全使用在应用或网页上。在选定设计中使用的字体之前，确保和你的开发者或客户进行有效沟通。

14 、确定设计尺寸

对移动设备应用来说，屏幕尺寸不是全部信息，你还需要考虑系统状态栏等的存在，以及他们如何在屏幕横排和竖排时影响尺寸(比如iOS设备的状态栏会在横排的时候减小较小边的尺寸，在竖排的时候减小大边的尺寸)。和你的开发者确认一下应用是否为完整的全屏很必要。

15 、使用平台风格

每个平台(操作系统)都有其独特的用户界面元素和交互风格(也会根据不同的设备有所不同)。在设计时注意这些风格，并且除了有特殊原因，不要进行与平台本身风格差别太大的设计。例如，在iPad上，你会发现这些需要注意的地方：

1、支持两种屏幕方向的强烈需求

2、双栏设计在两种屏幕方向上都可接受

3、将弹出框作为一种界面元素和分组机制

4、确定的文件浏览器的风格

5、在级别较高的导航栏中，返回按钮是向左指的图标

因此，在设计时要熟悉平台，因为你的设计要适应它。没有哪一种单一的设计可以适应所有的平台。。

16、对横排和竖排分别进行设计

不同的屏幕方向需要不同的交互设计风格，这不仅是因为屏幕宽高比，还因为用户以不同方向手持设备时外形、重量和平衡上的区别。只针对适应屏幕宽高比进行设计顶多是一个糟糕的妥协策略。

17、针对每种主流尺寸和情景进行设计

同一应用在手机、平板和电脑上的内容和交互都应有所不同。对移动设备而言，我们也需要考虑注意力持续时间、注意力分散、使用设备时的身体协调性减弱，以及用户在移动或危险情境下使用设备的可能性(例如走路时的障碍物、过马路时的交通情况以及驾驶安全性)。这些使用情景与设备的尺寸和本质有不可否认的关系，有效的设计应该充分考虑这些因素。

18、使用纯正的，至少实际的示例内容

好的示例内容标准有以下几条：

1、示例内容涵盖应用可能的长度，而不是仅仅为了原型设计的方便。

2、设计必需的数据缺省时的显示方案，尤其如用户照片等。

3、考虑不合需要的输入示例，比如需要进行裁剪的过宽或过长的图片。

4、包含*端或少见的名字示例，包括超长或不间断的姓和名。

5、地址不*制为当地的地址形式，而包括各种可能的长度和格式。

6、在设计的任何角落都找不到“Lorem ipsum”。

19、本地化考虑

当大多数人考虑支持其它语言时，他们想的是文本。而当设计师或开发者考虑本地化时，他们应该考虑的是布局。为了实现本地化，你的设计应该使所有文本支持与英文**的宽度差异。在显示同等内容时，亚洲语言需要的空间比英语少接近**，而欧洲语言会比英语多接近**。这个问题在设计按钮和帮助文本时尤其重要。

20、考虑屏幕全局光源

作为设计师，你应该早就了解每个平台都有其不可改变的屏幕全局光源(例如在iOS上，是在中心的正上方，或90度)。所有高光和阴影效果都应该和平台的光源相协调。