ui/ux设计过程中如何整理文件？

Alex是设计机构Clay的用户体验总监。他们为企业构建令人愉快的消费级产品，以及为顶级公司设计界面，网站和app。

数以百万计的用户已经体验过他们的工作成果，比如Clay设计了最受欢迎的互联网速度测试的用户界面。

设计机构通常只分享他们的Dribbble作品，展示他们美丽的工作场所，而一些人发表案例研究。读者很少访问有关内部知识和流程的详细信息。因此，今天分享的Clay公司的部分设计流程，以帮助世界各地的设计机构和设计团队创建有用的界面和app。

一，使用哪些工具？

Clay最常用的工具

我们使用Dropbox存储文件，您可以将Google云端硬盘与Google Docs或Microsoft OneDrive与Office 365 Word一起使用。找到具有良好桌面同步功能的云文件存储和协作文本/笔记编辑应用程序。国内可以考虑百度云和石墨文档。

我们的大多数工作都是通过以下格式创建的：

图形（sketch，Photoshop，Illustrator）

视频（After Effects）

3D（Cinema 4D）

二，文件结构

请记住，任何结构都应该由团队支持; 否则，它将无法正常工作。人们可能会犯错误，因此团队负责人或项目经理应检查并在必要时提醒团队成员正确更新文件。

正如许多设计机构所做的那样，我们为客户创建了一个文件夹，文件夹中包含项目的文件夹。但是项目应遵循什么样的结构呢？

我们想方设法根据我们的流程来建立项目文件夹，并根据使用场景存储文件。添加数字可以为任何文件系统提供顺序，默认情况下，文件和文件夹按名称排序。

阿拉伯数字是设计师的朋友！

这是我们在Clay所做的任何设计项目的文件夹结构。文件夹编号前缀按顺序放置文件夹，与项目的主要阶段想呼应。

Clay的任何项目的文件夹结构

01 - 设计需求

在这里，我们存储客户提供给我们的所有材料和参考：图像，照片，品牌，演示文稿，标志，屏幕截图，截屏视频以及与项目相关的任何其他源文件和文档。我们这里没有组织文件的具体规则; 我们只是根据内容存储。

Incoming文件夹中的内容示例

02 - 研究

在研究阶段，我们收集当前或计划系统的知识以及对竞争对手的参考：示例，屏幕截图，截屏视频，访谈记录和任何其他工作文件。我们存储了我们在Dropbox Paper或Google Drive中编写的研究文档。

样本研究报告

如果工作每天都在进行，我们将每日设计结果保存在以日期命名的文件夹中，例如“2018-11-25”。这样，日常研究材料可以很容易地组合成艺术总监的演示文稿。

Research文件夹中的内容示例

03-线框图

线框图是我们工作中不可或缺的一部分。它们使我们能够在短时间内设计所有必要的使用场景，确定人与产品交互的核心原则，并进行可用性测试。

我们创建高保真线框，以便开发人员可以使用它们，即使模型中没有应用样式。UX设计的主要部分发生在该阶段。

Clay的Speedtest线框示例

我们使用InVision组装线框以显示导航和流程图。此外，我们准备用户流程以涵盖所有场景和边缘情况。用户流程帮助我们了解已完成的工作和未完成的工作; 它还为开发人员提供了有价值的结构。

app map

04-设计

我们也称之为Visual Design部分。所有最终设计都进入04-Designs文件夹。典型的子文件夹结构与Research，Wireframes和Outgoing文件夹中的相同。

设计团队的子文件夹组织

05 - 项目输出

在项目期间，我们在按日期组织的文件夹中共享结果。在项目结束时，我们将所有内容都放在“Final Assets”文件夹中。我们还分享互动原型; 例如，InVision 线框图和视觉设计。

06-开发

在这里，我们为开发人员存储所有必需的文件，如线框，设计，资源和字体。开发人员还通过Zeplin获得最终设计。这样我们就可以控制究竟是什么进入开发阶段。

根据项目需要，我们可以替换此文件夹或添加过程中所需的其他特定部分。

三，文件命名

导出的文件命名

文件命名约定对于组织良好的过程至关重要。能够快速找到您需要的文件并将其全局区分（例如，在所有项目中进行搜索）非常重要。

示例设计文件命名约定

根据此模板为最终设计文件指定名称：

FlowNumber-StepNumber-StateNumber-AdditionlStateNumber(Optional)-Name

产品的每个流程步骤都有一个数字。例如，我们将Login页面设计为产品流的重要部分。登录通常是第一个也是最常见的产品流程步骤，因此会为其分配编号00。

数字从0开始。单个数字前的零有助于正确排序文件。如果您有超过99个，请继续使用3位数。注意：在过往的15年工作经历中，最复杂的项目工作也未达到过99。

产品流程中的每一步都会得到一个数字。例如，在登录页面中，我们有一个登录对话框，其中包含带有登录按钮的电子邮件和密码输入。此流程步骤将获得数字01，而密码重置对话框将在整个登录流程内分配流程步骤02，编号为00。

00-01-02-Password.png

在任何步骤中都有一个状态也可以得到一个数字。例如，我们在“登录”对话框中输入了密码。这样的状态得到数字02，因为它在电子邮件输入之后。我们还为每个状态添加一个名称。所以这个例子的最终名称是：

00-01-02-Password.png

如果用户在几次登录尝试失败后被锁定，则会命名该情况的设计文件：

00-01-06-EmailLocked.png

选择简短且易于理解的状态名称，例如Feed，Post，Filter和Event。用CamelCase替换空格：即NewMessage，FollowGroup。避免使用复杂而模糊的名字。如果要显示同一屏幕的多个可视选项，可以在数字链的末尾添加一个字母：

01-02-00a-Search.png

01-02-00b-Search.png

在Sketch中导出文件（.png）和画板名称

文件夹命名

我们使用相同的命名规则在文件夹中存储大组文件。

结束文件存储在流程的每个步骤的文件夹中

源文件命名

源文件使用相同的规则获取名称，但我们在前面添加项目名称：

ProjectName-FlowNumber-StepNumber-StateNumber--Name

我们经常可以将所有状态放在一个文件中，因此源名称将如此命名：

ProjectX-Design-02-03-People-Filter.sketch

四，结论

通过应用这种过多的文件存储结构，您可以确保在任何时候您都知道：

1，到目前为止已完成了多少天的工作

2，什么以及何时呈现给客户

3，设计师最近在做什么

4，该系统的哪些部分已经设计和交付

5，我们是否已完成屏幕以执行设计QA

6，在哪里可以找到所有确认的设计

7，开发人员是否具有最低设计要求

8，图形源，字体和其他材料的位置

访问这些答案非常方便，无需询问项目经理甚至使用项目管理工具。

如果您愿意尝试我们的项目文件组织方式，请下载此模板并将其保存在您的云项目文件夹中。双击模板后，将出现一个新的项目文件夹。然后重命名该文件夹并开始工作。

未归档的设计项目模板