UI设计规范归档.docxVIP

UI设计规范归档(图形)使用Photoshop CS2，Illustrator CS2,Fireworks CS2，Flash CS4以上版本进行构建，以保证各产物间良好的适配性能；苹果端使用Adobe CS2以上即可，但需要植入ICC文件。对每个图层进行文件夹归纳；保留图层的FX,MASK等特效；保证图层的可修改性，避免合并图层；文件夹按模块命名；必要时图层也需要命名；图层文件夹命名框架（移动）：标题（CAPTION），中间内容（CONTENT）,底部（BOTTOM）,闪屏（SPLASH）,引导页面（INDEXSTREAM）,按钮（BTN）,图片轮换（PNS），列表（LIST）,图文列表（PTLIST），图标列表（ICONNAV）,菜单（NAV），剩余可按照模块名称给与标注。图层文件夹命名框架（PC）：头部（TOP）,全局（WRAP）,底部（FOOTER）,左边（LEFT），右边（RIGHT），导航（NAV），动态动画（PNS）,矢量动画（FLASH），广告动画（AD），新闻（NEWS），图片新闻（PNWS），注册（REG），列表（LIST），头部工具栏（TOOLS），用户模块（USERINFO），剩余可按照模块名称给与标注。对于文字图层尽量使用静态文本创建。对于某个元素需要创建效果，尽可能在同一个FX中完成。MASK，智能图层等同理。对于钢笔创建的路径需要在图层中加以注释。对于重要性、重点修改的图层需要加以彩色图层标注。绿色表示完成但还有少量修改；黄色代表未确认；红色表示需求未定，或不满意需要重新制作。Photoshop中统一把磁盘缓存设置为0，以达到高保真更快速度的渲染导入Photoshop等使用工具中的字体应用，针对iOS应用使用Arial，安卓应用使用DroidSans；Windows应用使用微软雅黑或者Tahoma；Safari应用使用黑体；以保证设计产物最大程度接近实际上线效果；字体大小统一使用PX定义。移动设备原型图字体大小定义：标题（32px-38px），副标题（28px-32px），正文（24px-30px），底部菜单（20px-24px），其他区域字体大小保持协调；PC设备标题（16px-18px），副标题（12px-14px），正文（12px-14px），其他区域字体大小保持协调。产出物字体大小根据实际运行环境（软件环境和硬件环境）进行PX/EM/IM/CM/MM/PT/PC/PERSENT(%)八个单位间灵活换算。移动端尽量使用EM和PERSENT(%)进行描绘，PC端重点使用EM/PX进行描绘。尽可能建立标准参考线，精确到1px。注意屏幕元素布局平衡，功能区域划分合理。避免控件与数据的过分集中而导致的视觉疲劳和判断错误。功能明确，安排合理，让用户通过最少的判断和最少的操作达到目的。手机设计中尽量使用PNG格式，对于需要适配拉伸的界面提供最小尺寸的Dot9PNG格式。对于同一个区域在不同状态下有不同显示的情况下，需要提供不同状态下，大小一致的多个图片，图片数由状态数来决定（例如按钮的几种状态）。对于比较大的图片，导致增加安装包体积，可以把PNG索引化再保存，这样可以有效压缩体积。iOS手机设计分辨率为960x640和1136x640，对应G4/G4s和G5；iPad设计分辨率2048×1536；iPad Mini设计分辨率1024 x 768;Android手机设计分辨率主要为480 x800、480 x854，1280 x720;Windows设计分辨率主要为1024 x768、1280 x800、1366 x768、1440 x900、1600 x900。其中1024 x768中要求页面主体宽度为1003px，1280 x800要求至少为1258px。设计网页效果图时所要用到的字体大小一般为12PX。设计印刷文档时需要使用300DPI以上的精度。设计系统应用类界面应当综合考虑各种情况，如最多10个浏览器、至少6种分辨率、3种使用环境以及对菜单、树状、表单、尾部等等众多元素的考虑。使界面尽可能满足于多类用户的要求每张场景的设计应分别保存对应的psd、fla、fir、ai、eps等源文件，并以一级栏目+二级功能+三级步骤+四级延伸的格式对文件名进行规范。例如：首页_搜索_结果反馈_导出数据.psdFlash构建中需保留libray中的所有Resoures，对每桢的绘制尽量加入Flag和注释，并以颜色标注。多个场景需要建立独立的文件夹。在Flash中对元件的处理尽可能保留形状，避免打散。特别需要打散的元件需要创建隐藏层。方便后期人员修改。每个产出的SWF文件需要保留用于存放导入到Lib中的元件的Resoures文件夹、设计效果的PSD文件、用于颜色校准的CU文件、创建SWF的FLA源文件。对于Flash