始終相信作為一名設(shè)計(jì)師，所有經(jīng)由我手產(chǎn)出的東西，都必須是被我精心設(shè)計(jì)過的——不僅僅是最終的視覺稿或標(biāo)注，而是在整個工作流程中，每一份文件都應(yīng)該做好接收眾人審視的準(zhǔn)備。讓自己的工作更有邏輯性，更高效，也讓拿到你文件的同事或者客戶一秒看懂你的文件結(jié)構(gòu)找到他們需要的東西，易于修改和補(bǔ)充，并且露出“哇看起來好專業(yè)”的星星眼。

本文為作者授權(quán)優(yōu)設(shè)發(fā)布，未經(jīng)作者本人授權(quán)請勿轉(zhuǎn)載，謝謝 ：）

為新項(xiàng)目建立 6 個文件夾

如果是一個完整的新項(xiàng)目，我一定會一開始就設(shè)好這幾個文件夾，不過對于一些日常迭代的需求，則會做適當(dāng)刪減。

1. docs?：放置需求文檔、多語言文案、產(chǎn)品數(shù)據(jù)、競品分析、郵件歸檔
2. spec?：交互文檔
3. mockup?：視覺源文件
4. output?：截圖、展示用的完整視覺稿、change log
5. measurement?：視覺標(biāo)注
6. assets?：切圖

(@JJ Ying 提到每個文件夾里都可以再有一個archive的子文件夾，用于存放舊版或不再需要的文件，這是個非常棒的建議)

再建立 4 種不同用途的源文件

1、標(biāo)準(zhǔn)文件名_for_me.sketch?：（給自己的工作臺）

這是創(chuàng)作過程中的文件，我會按照主流程的順序，一個環(huán)節(jié)放在一個page；把自己需要用到的一切素材和靈感放在叫 Mood Board 的page里（個人覺得用工具不如全部拖進(jìn)sketch里來的直觀）；那些實(shí)驗(yàn)性的創(chuàng)作半成品則放在一個叫 EX 的page里，總之，這是給我自己看的文件，就像有些混亂的工作臺，把所有需要的東西都放在觸手可及的位置。

2、標(biāo)準(zhǔn)文件名_measurement.sketch?：（視覺標(biāo)注）

這是為開發(fā)者準(zhǔn)備的文件，我會從設(shè)計(jì)稿中提取通用的組件做統(tǒng)一標(biāo)注，再針對單獨(dú)頁面，分別從縱向布局、橫向布局和視覺樣式的三個維度來說明一個頁面。

3、標(biāo)準(zhǔn)文件名_mockup.sketch?：（正式視覺稿）

這是為所有人準(zhǔn)備的文件，當(dāng)需要和同事合作或向團(tuán)隊(duì)展示進(jìn)度時，我會從自己的sketch文件中把確定的界面整理到這里，每個頁面按照版本號排列。

4、標(biāo)準(zhǔn)文件名_style_guide.sketch?：（Style Guide）

設(shè)計(jì)完成后，制定 Style Guide，不僅說明規(guī)則，也列舉出可以多次復(fù)用的組件，方便自己和團(tuán)隊(duì)高效的完成后續(xù)的迭代，同時保持設(shè)計(jì)的一致性。

文件命名規(guī)則

說完文件夾結(jié)構(gòu)，再來看看文件和文件內(nèi)的命名規(guī)則 —— 沒辦法，我強(qiáng)迫嘛。

文件名

• 交互文檔：產(chǎn)品名_平臺_產(chǎn)品版本號_ui_spec_文檔版本號/文檔修改日期.pdf/sketch

例：ae_android_4.0_ui_spec_20150101.pdf

• 視覺稿：產(chǎn)品名_平臺_產(chǎn)品版本號_mockup_文檔版本號/文檔修改日期.pdf/sketch/jpg/png/psd.ai

例：ae_ios_4.0_mockup_v2.4.sketch

（如果不同平臺的設(shè)計(jì)或不同版本的放在了一個源文件中則做適當(dāng)刪減就好）

頁面名 & 畫板名

• 頁面可以根據(jù)主流程或者版本號或者其他維度來區(qū)分。
• 畫板則最好遵守文件一樣的命名規(guī)則：流程/場景_操作/說明_狀態(tài)，這樣方便將畫板隨時導(dǎo)出，不必慌慌張張的批量改文件名。

圖層名

把每一個屏幕的內(nèi)容按照功能分區(qū)，一個個 group 起來，排排坐，吃果果。注意同一組件在不同平臺里可能叫法不一樣。比如 Web 端我們有 header、main content 和 footer，但是?iOS 里的 navigation bar 是在天上的，Android 里卻是指地上的那三個原生按鈕。

熟記好不同平臺的結(jié)構(gòu)，不然跟工程師 buddy 手舞足蹈說了半天才發(fā)現(xiàn)在說不一樣的東西。(當(dāng)然也可以直接叫 top 和 bottom，這樣就比 header 和 nav_bar 都要簡短也不易混淆）

同時熟練地利用 sketch 里的 symbol 功能，要會聰明的偷懶。

DOs & DON’Ts

1. 使用小寫和下劃線（或減號，只要和你的工程師保持同步就好），不要出現(xiàn)空格和特殊字符
2. 使用簡短的單詞描述功能/屬性而非樣式，比如「btn_pressed」而非 「btn_blue」
3. 用具體日期或者版本號做為后綴，不要隨意寫成「修改1」「修改2」「最新」「最新新」「最最新」

~設(shè)計(jì)工作流程是我非常著迷的東西，不僅僅要拿出有說服力的作品，整個創(chuàng)作過程也應(yīng)該處處散發(fā)著 “專業(yè)” 的精神，如果你有任何想法都請隨時與我探討~

Happy Designing！

匡

【免費(fèi)字體下載排行榜】

Top 1：人氣超高的35款英文字體免費(fèi)下！
《字體排行榜！2014年最受歡迎的35款字體素材打包下載》

Top 2：春節(jié)期間的特供中文字體，年味十足！
《春節(jié)特供中文字體！10款年味十足的書法字體打包免費(fèi)下載》

Top 3：字體腫么用？來惡補(bǔ)基礎(chǔ)先！
《老外教你學(xué)漢字！超全面的中文字體新手指南》

原文地址：zhuanlan.zhihu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量96萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：