2、标准文件名_measurement.sketch:(视觉标注)
这是为开发者准备的文件,我会从设计稿中提取通用的组件做统一标注,再针对单独页面,分别从纵向布局、横向布局和视觉样式的三个维度来说明一个页面。
3、标准文件名_mockup.sketch:(正式视觉稿)
这是为所有人准备的文件,当需要和同事合作或向团队展示进度时,我会从自己的sketch文件中把确定的界面整理到这里,每个页面按照版本号排列。
4、标准文件名_style_guide.sketch:(Style Guide)
设计完成后,制定 Style Guide,不仅说明规则,也列举出可以多次复用的组件,方便自己和团队高效的完成后续的迭代,同时保持设计的一致性。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)文件命名规则
说完文件夹结构,再来看看文件和文件内的命名规则 没办法,我强迫嘛。
文件名
交互文档:产品名_平台_产品版本号_ui_spec_文档版本号/文档修改日期.pdf/sketch
例:ae_android_4.0_ui_spec_20150101.pdf
视觉稿:产品名_平台_产品版本号_mockup_文档版本号/文档修改日期.pdf/sketch/jpg/png/psd.ai
例:ae_ios_4.0_mockup_v2.4.sketch
(如果不同平台的设计或不同版本的放在了一个源文件中则做适当删减就好)
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)页面名 & 画板名
页面可以根据主流程或者版本号或者其他维度来区分。
画板则最好遵守文件一样的命名规则:流程/场景_操作/说明_状态,这样方便将画板随时导出,不必慌慌张张的批量改文件名。
图层名
把每一个屏幕的内容按照功能分区,一个个 group 起来,排排坐,吃果果。注意同一组件在不同平台里可能叫法不一样。比如 Web 端我们有 header、main content 和 footer,但是iOS 里的 navigation bar 是在天上的,Android 里却是指地上的那三个原生按钮。
熟记好不同平台的结构,不然跟工程师 buddy 手舞足蹈说了半天才发现在说不一样的东西。(当然也可以直接叫 top 和 bottom,这样就比 header 和 nav_bar 都要简短也不易混淆)
同时熟练地利用 sketch 里的 symbol 功能,要会聪明的偷懒。
DOs & DON’Ts
使用小写和下划线(或减号,只要和你的工程师保持同步就好),不要出现空格和特殊字符
使用简短的单词描述功能/属性而非样式,比如「btn_pressed」而非 「btn_blue」
用具体日期或者版本号做为后缀,不要随意写成「修改1」「修改2」「最新」「最新新」「最最新」
~设计工作流程是我非常着迷的东西,不仅仅要拿出有说服力的作品,整个创作过程也应该处处散发着 专业 的精神,如果你有任何想法都请随时与我探讨~