UI/UE Guideline and Standard

为了保障去中心化协作的顺利进行,我们制定了一套设计工作指南,详细内容如下。该指南会基于实际情况不断调整优化,以达到最佳效果。

设计流程说明

  • 分析需求 > 素材搜集 > 设计风格稿 > 评审(修改确认) > 设计其余页面 > 评审确定 > 对接开发

  • 在参与比较重要的/时间紧急的项目时 ,用参考素材来快速给出设计方向。此时整理的素材也是需要给大家讨论确认的,避免一开始就走弯路。

  • 当产品的页面很多时,可分阶段对接开发。(完成一部分交付一部分)

1.设计工具

不限,主要推荐使用 Sketch 和Figma,其它 PS、AI、C4D等。

2.交付结果

  • 视觉稿(内部所有人可查看、评论)

  • 标注及Web、IOS和安卓不同尺寸的切图(对接开发,跟进后期实现效果)

  • 页面命名规则:模块_子页面_状态,全英文小写字母,方便大家快速定位到某一页面(例如:login_verification code_success)

  • 切图命名规则:组件_类别_功能_状态,全英文小写字母,方便开发人员直接使用切图(例如:[email protected]

  • 命名核心原则:清晰的表达页面/切图内容,并且没有重复的名称

3.设计要求

  • 符合Comnion品牌调性和产品设计规范。

  • 页面功能型文案必须为最终上线的文案。

  • 涉及到跳转链接的,建议明确标注跳转链接。

  • 交付终搞时,插图、图标等必须为最终上线时的插图和图标。

4. 设计文稿分类

版本

用途及要求

交付位置

素材整理

供设计师本人确定设计方向,无特别要求。重要项目时,在整理好素材后可与设计负责人简单沟通下设计方向。

Figma+谷歌文档

风格稿

与设计负责人确认后和产品开发等人员开会来展示说明,包含主要页面的模块设计,及风格设计说明。

Figma

终稿

最终对外输出版本,包含全部页面,及全部流程、细节、异常情况、空白状态等详细说明。(设计规范,标注说明,插图、图标等的切图)

Figma+谷歌文档

如某个版本的设计文稿进行了迭代,则新建 page 以“x.1、x.2、x.3”的方式命名。

5. 交付位置说明

  • 各版本均需要传到 Figma 上,方便大家在线协作,浏览和讨论。

  • 最终版本需要上传到谷歌云盘对应的文件夹下,作为归档记录。

6. 时间节点和沟通

  • 在确认交互流程文档后,设计师需要自己规划出风格稿和终稿的交付时间,并和大家同步。

  • 风格稿在和大家同步前需要和设计负责人确认,并留出修改时间。

参会成员:风格稿是一个重要的版本,如无特殊情况产品组全员、产品负责人、技术负责人均需要参加,其他人员感兴趣的也可以参加。

沟通方式:为线上会议,采用「 Skype屏幕共享」 或 「微信」。

会议时间:需要提前 2 天公布会议时间,并根据大家的情况酌情调整时间。风格稿需要在公布会议时间时上传到 Figma 上,方便大家提前查看。如有变动,上传时间最迟不晚于会议开始前 1 天。

  • 终稿可分阶段交付,无需会议,但每次交付的界面需要与设计负责人和产品负责人确认无误后,再进入开发流程。

7. 与其他角色的交互

  • 设计执行人将最终版本交付开发人员之后,需要与工程师保持沟通,待工程师实现后,及时验收,实现效果和查漏补缺。

  • 设计师在执行过程中,遇到交互问题或修改建议可总结成文档交与产品执行人讨论。

8. 其他

  • 所有的文档均以谷歌云盘为准,更新也请更新到谷歌云盘。请勿在微信群里传文件,否则超过x天文件可能被清理,其他人无法查看;聊天信息过多不便查看;后加入的人无法查看历史文件。

  • 微信群里请传谷歌云盘对应的文件夹链接和Figma对应的文档链接。

9. 常用工具链接

Skype:http://skype.gmw.cn/

会议桌:https://app.huiyizhuo.com/

Figma 产品团队:https://www.figma.com/files/team/737211529851819060/Comunion-Product

Figma 设计团队:https://www.figma.com/file/V0m1Kc8RgAI43B6fdrl9ftGW/Dashboard