给亲爱的平面设计师们 关于UI设计交付物 #经验总结
最近每天review设计师们的UI设计图，眼花头疼还颇为闹心，遂写下这篇指南专门提供给从平面设计转向UI设计的设计师们，希望他们能产出程序真正可用的产品。
1 交付内容
效果图
标注图
切图（根据平台而定是否需要多尺寸）
文件命名:
参见苹果的参考文档 注意不要使用空格
其他：参照相关规范
建议：
使用Git或者其他文件管理工具管理设计文件
每次用.zip格式压缩文件夹
在文件夹内附带一份更新记录（从第一次进行该项目相关工作开始书写，每次有所修改都给予更新）
2 标注与切图要点
* 不要随便使用平面设计工具进行标注——这会带给你们的程序员同事很多不必要的思考与测量时间。
* 根据内容区块大小进行标注（最好直接使用html/css的写法进行相应标注 以便准确表达边距与间隔）
* 考虑边界情况，根据边界情况进行尺寸标注与设计
* 要注意统一性，设计图上标注的尺寸要与服务器上相关资源大小一致，同一平台上相同控件大小也应该一致
* 使用工具进行标注后必须检查设计——是否有所遗漏 是否清楚表明区块布局 以及是否有过多赘余设计
3 根据平台进行设计
* 移动端（App)
根据对应平台规范选取主流屏幕尺寸与分辨率进行设计，以及对其他常见状况进行一定优化。
根据平台需求输出不同尺寸单位的标注，注意各个平台的限制。
仔细阅读平台规范，熟悉并且尊重系统原生控件以及其常见变体。
* 桌面端以及移动Web端
清楚自己的交付物哪些是程序绘制的结果哪些是图片
减少图片使用，或设计时提供相应解决方案（如图标字体，如SVG Sprite等）
熟悉基本网页设计规范，设置好字体方案（中英文都需要）以及字体尺寸方案（不小于12px)
功能相似的控件之间要有一致性
保持设计灵活性 强调结构而不是具体的尺寸（因为可能需要针对不同屏幕进行适配）
4 进行相应优化
参见：
http://goo.gl/N6hJA9
http://goo.gl/gk8Kp4
5 MORE：
阅读关于网络优化以及SEO优化的书籍
掌握基本前端知识
学习浏览器运作原理
不仅仅看PSD还留意各种开源网站 上面通常有许多程序实现demo方便借鉴与基本调试
评论
发表评论
"fire in the hole"