🔨 网页设计工作流

这里描述的是一个具体的工作流，但不妨碍其一般化应用。这里的网页设计仅仅包含设计部分，不包含实现部分。一个首要的原则是所有文件命名应该有清晰的自我描述。

文件夹的组织

文件夹可以分为 assets、HTML、UI。

• assets 目录用来存储资源文件，可以进一步划分，比如 icons、logos 为名的文件夹。
• HTML 用来存放示例网页。
• UI 目录用来存放呈现网页的整体页面效果的文件，可以通过 v1、v2 文件夹分别存储来区分不同的版本。

图片设计文件的组织 (Photoshop)

.psd 文件内部也需要组织。按设计，可以分为三部分：图层、文字、效果。

• 图层。所有内容可以划分为三部分：Header、Content、Footer。
• 文字。每一段文本都应该有自己唯一的属性，比如，标题和段落应该分开放在两个图层里。这可以保证良好的可编辑性。
• 效果。效果附属于每一个图层。在Photoshop中可以吧效果转换成图层样式，从而可以移动对其他图层产生影响。

设计成果的分发

分发的内容包含两个主要部分：整体界面设计、组件及效果。

• 整体界面设计。在Photoshop中可以用save as web来保存。
• 组件及效果。包含按钮及按钮的效果、输入框及其效果、导航效果、采用的颜色等等组件和效果图，可以集成在一张图上。

另外，设计的另外两个内容是使用栅格系统，以及设计页面的背景。

小结

总结下来，首先确定文件夹的组织，然后是文件自身的组织，最后是设计成果的分发。需要保持文件的清晰结构和清晰的描述，还要保持文件的良好的编辑性，并且使得导出的设计成果是“易读”的。