🔨 网页设计工作流

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

文件夹的组织

文件夹可以分为 assetsHTMLUI

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

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

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

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

设计成果的分发

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

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

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

小结

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