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，圖形源，字體和其他材料的位置

訪問這些答案非常方便，無需詢問項目經理甚至使用項目管理工具。

如果您愿意嘗試我們的項目文件組織方式，請下載此模板并將其保存在您的云項目文件夾中。雙擊模板后，將出現一個新的項目文件夾。然后重命名該文件夾并開始工作。

未歸檔的設計項目模板