UI团队文件及版本管理规范
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 例（Btn_TabbarDiyBg_normal.160x98.png） • [控件类型] 参照常用字规范，首字母大写 在保证唯一性与表意明确的前提下可适当放宽书写，如无合适翻译，可用拼音描述
• [位置&功能描述&部件类型]
• 宽高在切图控件尺寸唯一情况下可不写，宽高相等时可省略为标一个数
附录：UI 文件命名规范常用字（初订）
• List（列表）Menu（菜单） • View（视图）Panel（面板）Sheet（薄板：底部弹出菜单） • Bar（栏）StatusBar（状态栏）NaviBar（导航栏）TabBar（标签栏）ToolBar（工具栏） • Switch（切换开关）Slider（滑动器）Radio（单选框）CheckBox（复选框） • Bg（背景：部件）Mask（蒙版/遮罩）
• 子文件夹命名：日期+活动名称+设计内容
• 例（2014-05-12 XX网站推广_Banner）
运营推广 图片需求提交规范（待定）
• 任务需求总概
• 任务名称：简要描述任务或活动主题 • 任务平台：应用市场/微博/线下/第三方应用或网站/
• 任务简介：活动具体实现方案
• 截止时间：图片需求最后截止日期时间
• 例（FN-Tech）
团队 文件整理规范
• 素材管理 • 文档资料 • 软件工具
设计中用到的素材，如UI示例、Icon参考、字体等 设计相关的书籍文档资料等 设计相关的软件工具等
• 识别规范
• 应用资源 • UI 设计 • 运营推广 • 网页设计
公司级VI（logo、名片）设计内容
应用内使用到的附加资源，角色形象，等不适合放在UI设计中的资源 应用UI设计文件，以项目名加版本整理 线上或线下运营推广所需的活动图片设计 公司网站或其他最终结果为网页的设计
• 子文件夹二级命名：[切图] [Android]
• [切图] 切图PSD文件平级置于此文件夹下，生成的切图置于PSD同名文件夹下
• [Android] 以iOS为主导时，Android平台适配版本置于此文件夹下，管理规则同iOS （独立时可提高层级）
UI设计 文件命名规范
• 切图PSD文件命名：控件类型_位置&功能描述 v版本.后缀
• 参考文档
• 《精准像素完美使用手册》http://www.ustwo.co.uk/blog/the-ustwo-pixel-perfect-precision-handbook/ （待学习）
素材管理 文件整理规范
• 子文件夹前缀规范
• [模板] • [示例] 有源文件的整体套用设计方案，可直接使用 有源文件的独立设计方案，可参考部分使用
UI团队文件及版本管理规范
2014.5.16
胥冥
工作前提说明
• 设计团队软件&工具
• Adobe PhotoShop （PC&Mac）不解释 • Adobe Illustrator （PC&Mac）不解释
• Sketch 3（Mac）矢量UI 设计工具 （做快速布局方便，逼格高，BUG多）
• Ps Play（iOS&Android）用于手机实时预览PS设计内容 • MarkMan（PC&Mac）设计图标注工具 • TortoiseSVN（PC）Cornerstone（Mac）SVN同步软件
UI设计 文件整理规范
• 主文件夹命名：应用名称 版本号&增量标记
• 例（喵喵 2.0）（喵喵 2.1+） • 版本后无+为完整版本，带+为增量版本，增量版本只保存对前一个完整版本有修改的内容
• 版本号（例2.1.1）首位变化新建完整版本，二位变化新建增量版本，第三位变化时仅新建修改版本文件
• 新建完整版本（2.0）时，先前的完整版本及其增量版本可进行首位归档，及（喵喵 1.0、喵喵 1.1+）归入（喵喵 1）中 • 首位归档文件夹达到3个后可进行项目归档，即（喵喵 1、喵喵 2、喵喵 3）归入（喵喵）中，后续依次添加 • 版本归档操作由组长执行
• 插件补充
• PS：Rounded_Rectangle_Radius_Resizer（矩形圆角半径调节）方便，稳定，四个角 • PS：Corner Editor（多边形圆角半径调节）支持多边形，多种角，不稳定，BUG较多
• PS：GuideGuide （辅助线插件）支持设置数值、分栏等，可存预设
• PS：Kuler（色板插件）辅助配色方案，可搜索、自定
• 控件子图层/组以所在控件的各个子控件或部件 相应名称命名，规则参照控件，上层组有状态时下属无需状态
• 此命名规则在 层级明确、描述清楚的前提下可适当调整书写，最终目标为仅依靠图层/组 名称即可准确识别内容 • PSD文件避免有空图层、连续未命名图层、未命名组，测试过程中的无用图层及时删除或归档到废弃或测试组
• 常用状态
• normal（正常）pressed（按下）selected（选中）disabled（禁用）visited（已访问）hover（悬停）
• 控件&部件（控件：较独立的可操作界面元素）（部件：描述属于某控件一部分）
• Btn（按钮：可点）Icon（图标：不可点、非点击主体、图案部件） Sign（标记）
• 例（Btn_TabbarDiyBg v2.1.1.psd） • 版本号（v2.1.1）只用在PSD和文件夹中，切图资源文件不加
• [控件类型]
参照常用字规范，首字母大写
在保证唯一性与表意明确的前提下可适当放宽书写，如无合适翻译，可用拼音描述
• [位置&功能描述]
• 切图资源文件命名：控件类型_位置&功能描述&部件类型_状态.宽高.后缀
• 子文件夹一级命名：模块名称
• 文件以各自所属模块整理，全局文件视为一个模板单独存放，有子模块内容较多且相对独立时可提高文件夹层级 • 文件夹内页面文件平级放置：PSD(源文件)、JPG(效果图)、PNG(标注图)、mkm(标注源文件)
• 页面文件名：当页面无平级页面且层级较浅时直接用页面名称，否则使用“上级模块-本页名称”
• [收集]
• [参考] • [其他]
有源文件的设计元素，可参考部分使用
无源文件的图片展示，可做设计参考 待完善
• 子文件夹命名：[前缀] 素材类别&内容
• 例：[参考] 手机截屏、[模板] UI套件、[模板] VI展示、[模板] 界面展示、[示例] UI、[收集] 共享图库
运营推广 文件整理规范（待定）
• 可用素材：可以使用于设计中的人物元素等素材，附件发送
识别规范 文件整理规范（待定）
• 子文件夹命名：品牌(公司/应用) 设计内容 ቤተ መጻሕፍቲ ባይዱ定版版号
• 例（喵喵 Logo v2）
应用资源 文件整理规范（待定）
• 子文件夹命名：资源名称
• 待定
网页设计 文件整理规范（待定）
• 主文件夹命名：WEB
• 子文件夹一级命名：网站(网页)名称
• 常用补充描述
• 上中下排序 Top（顶部）Middle（中间）Bottom（底部） • 次数排序 First（第一）Second（第二）… Last（最后） • 位置排布 Header（页头）Footer（页脚）
UI设计 PSD图层命名规范（待定）
• PSD图层命名
• 依页面框架整理顶层图层组，例：XX-Bar、Sheet_功能描述.宽高 v版本、View_视图描述.宽高 v版本、BG（整体背景） • 子图层组以所在框架内具体控件命名，例：Btn_功能描述_状态.宽高 v版本、bg（所在框架或控件背景）
• 图片需求规范
• 图片内容：各级文案及相应重要级别 • 图片用途：网页/手机应用/印刷 • 图片属性：宽高尺寸（px像素/mm毫米）、分辨率（ppi：尺寸单位为mm时必需）、格式（PSD/PNG/JPG） • 参考示例：类似场景图片（用于效果预估）、任务方中意图片（用于风格把握）
• 需求备注：需要注意的地方，风格描述，特殊使用限制等
• [位置&功能描述&部件类型]
• 宽高在切图控件尺寸唯一情况下可不写，宽高相等时可省略为标一个数
附录：UI 文件命名规范常用字（初订）
• List（列表）Menu（菜单） • View（视图）Panel（面板）Sheet（薄板：底部弹出菜单） • Bar（栏）StatusBar（状态栏）NaviBar（导航栏）TabBar（标签栏）ToolBar（工具栏） • Switch（切换开关）Slider（滑动器）Radio（单选框）CheckBox（复选框） • Bg（背景：部件）Mask（蒙版/遮罩）
• 子文件夹命名：日期+活动名称+设计内容
• 例（2014-05-12 XX网站推广_Banner）
运营推广 图片需求提交规范（待定）
• 任务需求总概
• 任务名称：简要描述任务或活动主题 • 任务平台：应用市场/微博/线下/第三方应用或网站/
• 任务简介：活动具体实现方案
• 截止时间：图片需求最后截止日期时间
• 例（FN-Tech）
团队 文件整理规范
• 素材管理 • 文档资料 • 软件工具
设计中用到的素材，如UI示例、Icon参考、字体等 设计相关的书籍文档资料等 设计相关的软件工具等
• 识别规范
• 应用资源 • UI 设计 • 运营推广 • 网页设计
公司级VI（logo、名片）设计内容
应用内使用到的附加资源，角色形象，等不适合放在UI设计中的资源 应用UI设计文件，以项目名加版本整理 线上或线下运营推广所需的活动图片设计 公司网站或其他最终结果为网页的设计
• 子文件夹二级命名：[切图] [Android]
• [切图] 切图PSD文件平级置于此文件夹下，生成的切图置于PSD同名文件夹下
• [Android] 以iOS为主导时，Android平台适配版本置于此文件夹下，管理规则同iOS （独立时可提高层级）
UI设计 文件命名规范
• 切图PSD文件命名：控件类型_位置&功能描述 v版本.后缀
• 参考文档
• 《精准像素完美使用手册》http://www.ustwo.co.uk/blog/the-ustwo-pixel-perfect-precision-handbook/ （待学习）
素材管理 文件整理规范
• 子文件夹前缀规范
• [模板] • [示例] 有源文件的整体套用设计方案，可直接使用 有源文件的独立设计方案，可参考部分使用
UI团队文件及版本管理规范
2014.5.16
胥冥
工作前提说明
• 设计团队软件&工具
• Adobe PhotoShop （PC&Mac）不解释 • Adobe Illustrator （PC&Mac）不解释
• Sketch 3（Mac）矢量UI 设计工具 （做快速布局方便，逼格高，BUG多）
• Ps Play（iOS&Android）用于手机实时预览PS设计内容 • MarkMan（PC&Mac）设计图标注工具 • TortoiseSVN（PC）Cornerstone（Mac）SVN同步软件
UI设计 文件整理规范
• 主文件夹命名：应用名称 版本号&增量标记
• 例（喵喵 2.0）（喵喵 2.1+） • 版本后无+为完整版本，带+为增量版本，增量版本只保存对前一个完整版本有修改的内容
• 版本号（例2.1.1）首位变化新建完整版本，二位变化新建增量版本，第三位变化时仅新建修改版本文件
• 新建完整版本（2.0）时，先前的完整版本及其增量版本可进行首位归档，及（喵喵 1.0、喵喵 1.1+）归入（喵喵 1）中 • 首位归档文件夹达到3个后可进行项目归档，即（喵喵 1、喵喵 2、喵喵 3）归入（喵喵）中，后续依次添加 • 版本归档操作由组长执行
• 插件补充
• PS：Rounded_Rectangle_Radius_Resizer（矩形圆角半径调节）方便，稳定，四个角 • PS：Corner Editor（多边形圆角半径调节）支持多边形，多种角，不稳定，BUG较多
• PS：GuideGuide （辅助线插件）支持设置数值、分栏等，可存预设
• PS：Kuler（色板插件）辅助配色方案，可搜索、自定
• 控件子图层/组以所在控件的各个子控件或部件 相应名称命名，规则参照控件，上层组有状态时下属无需状态
• 此命名规则在 层级明确、描述清楚的前提下可适当调整书写，最终目标为仅依靠图层/组 名称即可准确识别内容 • PSD文件避免有空图层、连续未命名图层、未命名组，测试过程中的无用图层及时删除或归档到废弃或测试组
• 常用状态
• normal（正常）pressed（按下）selected（选中）disabled（禁用）visited（已访问）hover（悬停）
• 控件&部件（控件：较独立的可操作界面元素）（部件：描述属于某控件一部分）
• Btn（按钮：可点）Icon（图标：不可点、非点击主体、图案部件） Sign（标记）
• 例（Btn_TabbarDiyBg v2.1.1.psd） • 版本号（v2.1.1）只用在PSD和文件夹中，切图资源文件不加
• [控件类型]
参照常用字规范，首字母大写
在保证唯一性与表意明确的前提下可适当放宽书写，如无合适翻译，可用拼音描述
• [位置&功能描述]
• 切图资源文件命名：控件类型_位置&功能描述&部件类型_状态.宽高.后缀
• 子文件夹一级命名：模块名称
• 文件以各自所属模块整理，全局文件视为一个模板单独存放，有子模块内容较多且相对独立时可提高文件夹层级 • 文件夹内页面文件平级放置：PSD(源文件)、JPG(效果图)、PNG(标注图)、mkm(标注源文件)
• 页面文件名：当页面无平级页面且层级较浅时直接用页面名称，否则使用“上级模块-本页名称”
• [收集]
• [参考] • [其他]
有源文件的设计元素，可参考部分使用
无源文件的图片展示，可做设计参考 待完善
• 子文件夹命名：[前缀] 素材类别&内容
• 例：[参考] 手机截屏、[模板] UI套件、[模板] VI展示、[模板] 界面展示、[示例] UI、[收集] 共享图库
运营推广 文件整理规范（待定）
• 可用素材：可以使用于设计中的人物元素等素材，附件发送
识别规范 文件整理规范（待定）
• 子文件夹命名：品牌(公司/应用) 设计内容 ቤተ መጻሕፍቲ ባይዱ定版版号
• 例（喵喵 Logo v2）
应用资源 文件整理规范（待定）
• 子文件夹命名：资源名称
• 待定
网页设计 文件整理规范（待定）
• 主文件夹命名：WEB
• 子文件夹一级命名：网站(网页)名称
• 常用补充描述
• 上中下排序 Top（顶部）Middle（中间）Bottom（底部） • 次数排序 First（第一）Second（第二）… Last（最后） • 位置排布 Header（页头）Footer（页脚）
UI设计 PSD图层命名规范（待定）
• PSD图层命名
• 依页面框架整理顶层图层组，例：XX-Bar、Sheet_功能描述.宽高 v版本、View_视图描述.宽高 v版本、BG（整体背景） • 子图层组以所在框架内具体控件命名，例：Btn_功能描述_状态.宽高 v版本、bg（所在框架或控件背景）
• 图片需求规范
• 图片内容：各级文案及相应重要级别 • 图片用途：网页/手机应用/印刷 • 图片属性：宽高尺寸（px像素/mm毫米）、分辨率（ppi：尺寸单位为mm时必需）、格式（PSD/PNG/JPG） • 参考示例：类似场景图片（用于效果预估）、任务方中意图片（用于风格把握）
• 需求备注：需要注意的地方，风格描述，特殊使用限制等