LCCNET 聯成電腦

m_nav_line m_nav_line

聯成電腦設計好文分享:成為更好的產品設計師(二)-檔案命名及設計資源整理​

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、Medium  UX四神湯 / Shandy Tsai

 

 

【本文適合想提升工作效率的設計工作者】

 

「欸欸小菜,你上次那個幫客戶A修改的檔案在哪啊?我怎麼找不到」
『等等喔,我看一下…』
『我記得是這個檔案,誒,怎麼長得不一樣,還是這個?好像也不對呀…』
(過了二十分鐘…)
「小菜,你是好了沒啊!客戶A等得有點不耐煩了」

 

以上的情形是否對你而言並不陌生呢?其實不是你的記憶差,而是我們需要一個更有條理的檔案歸納方式。

 

圖1. 令人摸不著頭緒(惱怒)的檔案命名

 

 

 

身為一個設計師,我們看到喜歡的設計,截圖存檔,卻沒有好好分類;又或是在創作時,為了貪圖一時方便,沒有養成命名的習慣,等到下次想要開啟檔案時,花費更多的時間尋找。

 

這篇文章教導你一步步地從小地方改變,養成檔案管理的好習慣,成為更有效率、條理的產品設計師。以下是這篇文章的結構:

 

1. 觀念介紹 Introduction
• 為什麼?好處在哪?Why? Benefits?
• 基本觀念/步驟 Basic Mindset

 

2. 如何著手 How to Start? 
• 檔案內元件:圖層命名及建群 Components/Layers & Groups
• 版本控制及收納格式:檔案及資料夾命名 Files & Folders
• 設計資源整理 Design Resources Collections

 

3. 結論 Conclusions

 

4. 參考資料 References

 

►有興趣的朋友,可以閱讀「成為更好的產品設計師」系列文章

 

圖2. 整理檔案與整理房間一樣,不到關鍵時間是不會感受其重要性

 

 


 

 

1. 觀念介紹 Introduction

 

1.1 為什麼要命名檔案、分類整理?好處在哪?

 

• 易於搜尋 Easy to find
適當的命名可以節省時間,利用關鍵字快速地搜尋到需要的檔案,同時易於瀏覽。

 

• 易於修改 Easy to modify / manage
當檔案內的命名是有條理、有秩序的分群,我們可以更輕易的選取想要的元件進行修改。

 

• 易於合作 Easy to collaborate / scale
當產品設計團隊擴大時,不同的設計師會有不同的命名方式,若能統一檔案歸納的方法,可以確保檔案管理的一致性,減少不必要的來回溝通。

 

 

1.2 基本觀念

 

• 制定適當及一致性的命名格式 Naming appropriately and consistently
當你和其他設計師一起合作時,可以開個小組會議,根據內部需求及工作習慣,討論該如何分類及命名檔案

 

• 養成命名的習慣 Naming Conventions
為了更順暢的團隊溝通合作,一旦制定了格式,請每個人務必遵守

 

• 理性、有架構的歸納分類 Group Tidily
根據檔案格式、內容,並將符合的檔案存取在適當的資料夾

 

圖3. 寫到這,不禁想起幼稚園老師叫我們把玩具好好收拾分類lol

 

 


 

 

2. 如何著手 How to Start?

 

大處著眼,小處著手。要改變習慣不容易,但也沒想像中的那麼嚇人,我們可以先從基本的小地方開始,從檔案內的圖層、Grouping到歸納檔案及設計資源整理,我們接下來會一步步的說明。

 

2.1 檔案內元件:圖層命名及建群 Components/Layers & Groups

首先,我用Sketch畫了一個以地點搜尋活動的iPhone X 介面作為說明範例。設計原則可以參考先前文章:提升易讀性(二): 視覺層級介紹與實例Visual Hierarchy 。乍看之下,左圖及右圖的設計完全相同。

 

• 工具:Sketch

• 螢幕大小:iPhone X (375 x 812 px resolution)

• 介面功能:查詢地點附近的推薦活動

 

圖4. 看似完全相同的介面,但內部圖層組成完全不同

 

 

不過,當我們仔細看版本一的圖層結構 (根本沒有結構(╯-_-)╯╧╧ ),可能是因為節省時間,創作者不斷複製、複製、再複製,並沒有因圖層性質命名,或者適當的建立群組,造成介面的內部雜亂無章。

 

圖5. 版本一內部圖層

 

 

相較版本一,版本二結構十分清晰,依照圖層性質命名,讓就算第一次開啟檔案的人,也能一目瞭然介面的結構順序 (小編:看起來舒爽多了啊~)。

 

當然,如果一開始不習慣更動所有名稱,也可以使用縮寫,例如event 1 → E1、Profile 1 → P1等。

 

圖6. 版本二內部圖層

 

 

當我們對照這兩個版本,便可以一分高下,版本二的圖層階級清晰, 讓搜尋及修改更加方便,即便是沒有使用過Sketch的初學者也能辨別介面的結構,讓人加深設計者的專業印象。

 

圖7. 版本一 V.S. 版本二

 

 

另外,我自己滿常使用的Sketch Plug-In插件之一叫做 Sortme,可以自動將圖層依據字母及數字排序,十分推薦像我一樣的偏執控使用哈哈

 

圖8. Sort Me 功能展示

 

 


 

 

2.2 版本控制及收納格式:檔案及資料夾命名 Files & Folders

 

每一家公司有不同的檔案收納格式,有人用version、日期、或是內容區別,以下是Fevo產品部門的檔案命名格式,提供大家參考:

 

| Project_MMDDYY_Author’s Initials_Content/Changes
項目名稱_月份日期年份_作者姓名開頭_檔案內容

 

這樣命名雖然長度較長,但好處是極大化搜尋效率及辨認檔案。假如使用v1, v2, v3或是01, 02, 03,雖然知道哪個檔案是最新的版本,卻不清楚裡面的內容,尤其過了一段時間,想要回頭修改細節,不免必須一一打開所有檔案,花了更多時間搜索介面。因此,我們在檔案的最後加上了附註,說明更改的內容,加深對檔案的印象。

 

圖9. 檔案收納參考格式

 

圖10. 檔案收納參考格式 — 範例

 

 


 

 

2.3 設計資源整理 Design Resources

 

相信以下的桌面對你應該不陌生,充斥著各種檔案、截圖和資料夾。身為設計師的我們,看到喜歡的介面或是互動設計反射動作就是”截圖”!但往往最後這些好的設計名稱仍停留在Screen Shot 2018–03–15 at 2.00.07 PM,存放在一個永恆的資料夾”Design References”,再也沒打開過…(sad)

 

圖11. 充斥各種檔案、截圖、資料夾的崩潰桌面

 

 


 

 

以下分享我個人整理設計資源的方式 / 工具:

表1. 設計資源整理工具比較表格

 

 


 

 

2.3a Desktop Folders 桌面資料夾分類

 

基本上,我有一個總資料夾搜集不同類型的UX/UI 元件,包含:登陸頁面、註冊流程、支付流程、確認訊息、對話框、頁腳、純UX等等。看到好的設計,我會截圖並重新命名,當需要找尋靈感時,我常會到這資料庫瀏覽。

 

圖12. 個人資料庫的基本分類

 

 

例如我需要設計價格頁面,便會到Price_Hierarchy的資料夾尋找適合的元件,在截圖之後,我會盡量重新命名成該網站名稱,以便重新Reference。

 

圖13. Price Hierarchy 資料夾範例

 

 

在這資料夾中,我可以立即看到不同公司對於Pricing Plan的設計,進而加速設計過程。不過這需要設計者較大的心力去維持,培養命名、分類的好習慣,才能發揮資料庫的最大效益。

 

圖14. Hulu & BigCommerice Pricing Plans的頁面設計

 

 


 

 

2.3b Google Spreadsheet 表單

 

有時候,好的設計不僅是單一元件,有可能是整體網頁的排版、結構、互動設計、動畫等。因此,我會使用Google Spreadsheet將喜歡的連結分類整理成不同的Tabs,包含:設計師個人作品集、設計工作室、案例探討等。

 

在整理時,除了網頁名稱、連結外,還可以簡單地加上網頁的優點和附註,可以加深印象,以便之後回顧。

 

圖15. Google Spreadsheet適合瀏覽網頁整體設計、搜集連結

 

 


 

 

2.3c Pinterest Save Button

 

Pinterest 是收集及整理視覺設計靈感的網路剪貼簿,也是我常使用的工具之一,使用Chrome的朋友們可以安裝Pinterest extension,看到圖片按右鍵,可以將圖片加入自己的收藏,也可選擇加入不同標籤的分類資料夾。

 

Pinterest雖然很方便、節省時間,也可以自動儲存連結,但由於存取圖片時會壓縮檔案,造成解析度較低,我反而相對其他方法較少使用,但還是很適合有時偷懶的我 😬

 

圖16. Pinterest是收集及整理視覺設計靈感的網路剪貼簿

 

 


 

 

2.3d Invision Boards

 

最後,來介紹功能最多元的Invision Boards。Invision除了大家熟知上傳介面的功能,Boards可以當作Brand Guides, Team Inspirations 或是Photo Gallery

 

一個Board裡可以建立不同的段落 (sections)、可以針對每一個介面留言討論,非常適合團隊內部溝通、呈現ideas的工具。

 

影片1. Invision Boards

 

 


 

 

3. 結論 Conclusions

 

檔案歸納整理其實就跟收拾房間的道理大同小異,作者本身一開始也不是一個房間乾淨的人,不過自從學習慢慢收拾房間,試著將衣物收納到適當的位置,房間頓時清爽整齊許多。

 

這次的文章我們從三個面向討論:

 

• 檔案內元件:圖層命名及建群 Components/Layers & Groups
將Sketch, Photoshop, or Illustrator 裡圖層,依照元件屬性適當地命名及建群,方便未來進行修改、交接檔案

 

• 版本控制及收納格式:檔案及資料夾命名 Files & Folders
團隊裡應制定一致的命名方式,以便搜尋及規模化

 

• 設計資源整理方式 Design Resources Collections
本文提供四種不同的資源整理工具,包含桌面資料夾、Google Spreadsheet、Pinterest及Invision Boards,可以根據個人需求選擇適合的方法

 

養成良好的命名、歸納檔案的習慣,不但可以提升工作效率,同時增加他人對你的專業印象。如果大家有更好或是不同的命名分類方法及工具,也歡迎在底下留言分享喔!大家一起成為有效率的設計師吧!

 

圖17. 視覺上亂有亂的美感,但在檔案整理上還是清楚有條理比較好 ^.<

 

 

4. 參考資料 References

 

1. *Setup a design system

2. Sketch Symbol Best Practices

3. How to keep your design files neat and tidy

4. Graphic designers — a filing system for design files that work

5. Best Practices For Organizing Your Graphic Design Files

6. Find Files Faster: How to Organize Files and Folders

7. Designing Better File Organization (Part I)

 

 

文章轉載自「Medium  UX 四神湯」,已取得作者授權同意,原文為:成為更好的產品設計師(二):檔案命名及設計資源整理​

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策