一、為什么要做設(shè)計(jì)文件整理

靈犀是一個(gè)多產(chǎn)品線的部門，目前高頻迭代的就包括外貿(mào)通、靈犀辦公、云筆記等多個(gè)產(chǎn)品，外貿(mào)通作為一個(gè)龐大的產(chǎn)品線又細(xì)分了多條業(yè)務(wù)線，截至目前靈犀設(shè)計(jì)文件已多達(dá) 300+。日積月累的設(shè)計(jì)資產(chǎn)是設(shè)計(jì)的一筆財(cái)富，但同時(shí)也帶了一系列的問(wèn)題，比如不同產(chǎn)品線、業(yè)務(wù)線的設(shè)計(jì)資源整理方式不統(tǒng)一，跨業(yè)務(wù)線團(tuán)隊(duì)協(xié)作起來(lái)相互的文件難以查找，同一團(tuán)隊(duì)需求迭代時(shí)歷史文件查找效率低，以及上下游同學(xué)查找設(shè)計(jì)資源時(shí)沒(méi)有頭緒和線索等問(wèn)題，為了促進(jìn)設(shè)計(jì)師之間的協(xié)作、提升歷史文件查找的效率，助力上下游的同學(xué)對(duì)設(shè)計(jì)資源的高效使用，規(guī)范設(shè)計(jì)文件意義重大、價(jià)值可觀。

麥肯錫全球研究所的研究顯示，人們工作時(shí)間的 19% 都耗費(fèi)在了日常查找資料上。也就是說(shuō)，每周五天工作日中，有一天基本上都在查找資料，如果可以將這些浪費(fèi)的時(shí)間利用起來(lái)的話，工作效率能提升 30%-35%。正是這些不起眼的細(xì)節(jié)才是每天浪費(fèi)你大量時(shí)間的地方，而提高設(shè)計(jì)工作效率最簡(jiǎn)單、最容易出效果的恰恰是大部分人都經(jīng)常會(huì)忽略的日常資料素材整理。

整理設(shè)計(jì)文件可以：

1. 方便迭代時(shí)歷史文件查閱；
2. 方便團(tuán)隊(duì)其他同學(xué)查閱、使用；
3. 將設(shè)計(jì)過(guò)程中產(chǎn)生的新的控件，納入控件庫(kù)，并及時(shí)更新設(shè)計(jì)規(guī)范；

而今天的主角“Figma”對(duì)設(shè)計(jì)的提效是顯而易見(jiàn)的，對(duì)文件的整理顯然也提出高效的解決方案，而我們?nèi)绾胃玫睦眠@款軟件，發(fā)揮他的價(jià)值呢？

更多Figma技巧：

二、怎么做設(shè)計(jì)文件整理

1. 價(jià)值觀（基本原則）：

①清晰

因?yàn)槲覀兊脑O(shè)計(jì)文件要服務(wù)設(shè)計(jì)、研發(fā)、產(chǎn)品、測(cè)試等多角色，文件信息的清晰展示，可以降低不同業(yè)務(wù)線的同學(xué)的理解成本、溝通成本。例如如果可以通過(guò)顏色、命名形成條件反射，就可以減少大腦的思考，以達(dá)到清晰的目的。

②快捷

設(shè)計(jì)文件主要用于需求迭代的設(shè)計(jì)、研發(fā)、歷史文件復(fù)用等，文件夾的層級(jí)簡(jiǎn)單，可以減少相關(guān)同學(xué)使用成本。例如 figma 由文件夾、文件、頁(yè)面三個(gè)層級(jí)的形式。

③生長(zhǎng)

設(shè)計(jì)文件的整理應(yīng)當(dāng)以服務(wù)業(yè)務(wù)為根本，規(guī)則要跟隨業(yè)務(wù)需要不斷變化，不寬泛、不束縛、可拓展。

2. 策略：

①統(tǒng)一文件夾層視覺(jué)語(yǔ)言

對(duì)于多產(chǎn)品線的團(tuán)隊(duì)而言，文件夾可以很好的將設(shè)計(jì)文件按照產(chǎn)品劃分，方便相關(guān)產(chǎn)品線的設(shè)計(jì)同學(xué)、上下游產(chǎn)品的研發(fā)、產(chǎn)品、測(cè)試同學(xué)進(jìn)行文件查找、查看。這里要注意文件夾的命名一定要清晰、簡(jiǎn)短，最好不要超過(guò) 7 個(gè)字符，面對(duì)不同團(tuán)隊(duì)的文件要分到不同文件夾，比如桌面端、移動(dòng)端。我們?cè)谟玫奈募A的命名規(guī)則是：產(chǎn)品線-所在端，例如：云筆記-移動(dòng)端。同時(shí)也要用好 figma 的文件夾收藏功能，將自己參與或是常用的文件夾添加在側(cè)邊欄。

注：1.將文件夾收藏到側(cè)邊欄 2.紅色區(qū)域?yàn)槲募A列表

②統(tǒng)一文件層視覺(jué)語(yǔ)言

我們將文件類型劃分為設(shè)計(jì)稿、開(kāi)發(fā)稿、交互稿、設(shè)計(jì)規(guī)范、升級(jí)改版五類，根據(jù)不同類別，制定不同文件的規(guī)范。

我們的文件命名及封面規(guī)則：

對(duì)文件的命名規(guī)則：產(chǎn)品 (端) /業(yè)務(wù)-稿別-編碼，例如：靈犀辦公移動(dòng)端-開(kāi)發(fā)稿 3，外貿(mào)建站-UI 稿 4，其中端分桌面端、移動(dòng)端，可以選填，業(yè)務(wù)線龐大的產(chǎn)品名稱也可由二級(jí)分支如外貿(mào)的主站、業(yè)務(wù)系統(tǒng)、建站等代替。

對(duì)封面的設(shè)計(jì)規(guī)則：主標(biāo)題行包含：產(chǎn)品/業(yè)務(wù) (兩者取其一）、稿別、編碼。副標(biāo)題行包含：端 (選填）、版本號(hào)。不同的背景顏色對(duì)應(yīng)不同文件類型。

由于 Figma 文件存儲(chǔ)于云端，頁(yè)面的數(shù)量過(guò)大會(huì)出現(xiàn)經(jīng)常 loading 的現(xiàn)象，根據(jù)我們自身的經(jīng)驗(yàn)，會(huì)每季度更換一次新的文件，相互文件通過(guò)序號(hào)繼承。

需要注意的是不同類型的文件樣式及命名區(qū)分度，靈犀辦公產(chǎn)品就曾出現(xiàn)研發(fā)對(duì)照交互稿開(kāi)發(fā)的案例，不僅對(duì)研發(fā)帶來(lái)重復(fù)性的工作量，也對(duì)后期的走查帶了不小的挑戰(zhàn)。可以通過(guò)對(duì)封面的設(shè)計(jì)及文件的命名規(guī)范，以達(dá)到條件反射，減少大腦的思考，展示清晰的目的。

按照規(guī)則以上 5 種文件類型在一個(gè)業(yè)務(wù)線下的樣式如下：

和文件夾類似，也要用好 figma 的文件收藏功能，將自己參與或是常用的文件添加在側(cè)邊欄。

③統(tǒng)一頁(yè)面視覺(jué)語(yǔ)言

我們將文件類型劃分為設(shè)計(jì)稿、開(kāi)發(fā)稿、交互稿、設(shè)計(jì)規(guī)范、升級(jí)改版五類，根據(jù)不同類別，制定不同文件的規(guī)范

設(shè)計(jì)稿

設(shè)計(jì)稿按功能模塊劃分，注意功能模塊與飛機(jī)稿、探索稿區(qū)分，頁(yè)面內(nèi)通過(guò)一級(jí)標(biāo)簽、二級(jí)標(biāo)簽直觀的標(biāo)識(shí)功能點(diǎn)，并保持設(shè)計(jì)稿最新。為了確保 “設(shè)計(jì)稿” 中每個(gè)模塊都是最新的設(shè)計(jì)稿（即與線上的版本一致），各業(yè)務(wù)線需要定期整理（建議在每版本封包后）。

注：

1. 文件列表欄按功能模塊劃分頁(yè)面
2. 其他設(shè)計(jì)頁(yè)面，如：飛機(jī)稿、探索稿等
3. 一級(jí)標(biāo)簽樣式，常用于功能點(diǎn)
4. 二級(jí)標(biāo)簽樣式，常用于功能分支

開(kāi)發(fā)稿

開(kāi)發(fā)稿按版本劃分，一個(gè)版本的需求量大，有固定模塊劃分的產(chǎn)品線可在此基礎(chǔ)上增加業(yè)務(wù)劃分。例如：外貿(mào)需求量大，且研發(fā)資源較為固定跟隨業(yè)務(wù)，故而將每版本需求按模塊拆分，更便于研發(fā)定位設(shè)計(jì)稿。頁(yè)面內(nèi)通過(guò)一級(jí)標(biāo)簽、二級(jí)標(biāo)簽直觀的標(biāo)識(shí)功能點(diǎn)，一級(jí)功能點(diǎn)后需@相應(yīng)的設(shè)計(jì)師，方便研發(fā)、測(cè)試同學(xué)對(duì)接，同時(shí)也方便后期走查時(shí)定位自己的設(shè)計(jì)稿。

交互稿

考慮到交互稿同開(kāi)發(fā)稿同期服務(wù)于研發(fā)，故頁(yè)面結(jié)構(gòu)需相互保持一致，便于研發(fā)對(duì)照。

同時(shí)在交互稿內(nèi)必須包含信息：需求標(biāo)題、更新時(shí)間、產(chǎn)品、交互、UI 分工、一級(jí)標(biāo)簽、二級(jí)標(biāo)簽，根據(jù)需求選填項(xiàng)目背景、項(xiàng)目目標(biāo)、設(shè)計(jì)目標(biāo)/內(nèi)容、PRD 鏈接、UI 稿鏈接、重點(diǎn)關(guān)注，樣式如下。

視覺(jué)規(guī)范

根據(jù)業(yè)務(wù)的發(fā)展，不同產(chǎn)品線的組件一般有所不同，規(guī)范源文件建議包含：更新日志、組件索引、基礎(chǔ)樣式、變體源文件

升級(jí)改版

升級(jí)改版的頁(yè)面包含：需求分析、競(jìng)品分析、靈感版、飛機(jī)稿、不同的風(fēng)格稿、核心頁(yè)面等

最后

隨著項(xiàng)目越做越多，資料越積越大，特別是多人協(xié)作的時(shí)候，就會(huì)發(fā)現(xiàn)井然有序的文件整理多么的重要，而文件的整理遠(yuǎn)不止 figma 設(shè)計(jì)文件這么簡(jiǎn)單，工作文檔的整理、學(xué)習(xí)資源的整理、靈感素材的整理等等甚至可以發(fā)展成為一個(gè)學(xué)科，這里也向大家推薦《佐藤可士和的超整理術(shù)》，希望能拋磚引玉，讓大家的文件可以井然有序，不再讓這些不起眼的細(xì)節(jié)在每天浪費(fèi)我們大量時(shí)間，以把精力釋放到更有價(jià)值的地方，做更有意義的事情。最后的最后就是隨著 figma 的更新迭代，部分功能的入口已經(jīng)調(diào)整，但整體的思路和方法不變，希望可以對(duì)大家有所幫助。