การตั้งชื่อไฟล์ ตั้งยังไงให้ใช้งานง่ายสำหรับดีไซน์เนอร์
การตั้งชื่อไฟล์ ตั้งยังไงนั้นเป็นคำถามที่เราเชื่อว่าหลาย ๆ คนคงจะเคยประสบในการทำงาน ด้วยข้อแม้ของทีมที่มีทั้งหลายคน, มีการแก้ไขจำนวนมาก ทำให้การจัดการไฟล์ที่ลูกค้าสั่งมาแก้มาซะหลายร้อยเวอร์ชั่นก็จะก่อเกิดปัญหาที่สร้างความเจ็บปวดให้ทีมของเราทำงานได้ช้าลงไปอีก ดังนั้นการตั้งชื่อไฟล์ที่ดีก็เลยสามารถช่วยลดระยะเวลาในการทำงานลงได้
โดยบทความวิธีการและเนื้อหานี้นำมาจากประสบการณ์ส่วนตัวในการทำเว็บไซต์ ที่ครูพักลักจำมาหลาย ๆ เอเจนซี่ทั้งในและต่างประเทศ อาจจะต้องขอเอ่ยตัวก่อนว่าบทความนี้เป็น Insight การทำงานส่วนตัวแบบสุด ๆ โดยหากใครมีวิธีการตั้งชื่อไฟล์หรือไอเดียที่น่าสนใจอยากแนะนำก็สามารถคอมเม้นท์ไว้ที่ด้านล่างนี้ได้เลยนะคะ :D
ก่อนอื่นเราต้องมาเริ่มต้นกันที่ว่าในการออกแบบเว็บไซต์หรือแอพลิเคชั่นงานหนึ่งนั้นจะต้องมีรายละเอียดต่าง ๆ เหล่านี้ เพื่อให้ทีมของเราเข้าใจไฟล์ของเราได้ง่ายขึ้นว่าตอนนี้ใครกำลังทำอะไรอยู่ตอนไหน หน้าใด เวอร์ชั่นอะไรอยู่นั่นเองค่ะ
สิ่งที่ควรมีในการตั้งชื่อไฟล์
1. ชื่อโปรเจค
เพื่อให้ง่ายต่อการค้นหาด้วยการเสิช
2. ชื่อหน้าที่เราทำ
เช่น Home, Shopping cart, Product List, Product Page, Login, Register เป็นต้น
เวลาส่งไฟล์ให้ลูกค้าจะได้ไม่สับสนว่าเรากำลังอยู่ในขั้นตอนไหน
3. ชื่อ State ของงาน
บางหน้าจะมีลูกเล่นอื่น ๆ เพิ่มเติม เช่น Login, Login alert, notification, ไหนจะหน้า hover, information อื่น ๆ
4. เวอร์ชั่นที่แก้ไข
revision ต่าง ๆ (สำคัญที่สุด !)
บอกให้ทีมของเรารู้ว่างานนี้เป็นงานเก่า งานนี้เป็นงานใหม่ อย่าทำทับงานไปเรื่อย ๆ เพราะแน่นอนว่าาสุดท้ายทำไป 100 แบบจะเจอลูกค้าที่อยากจะกลับมาใช้งานที่เราออกแบบเวอร์ชั่นแรก ต้องขอบอกว่าถ้าเซฟทับไปเรื่อย ๆ นั้นน้ำตาจะไหลอย่างแน่นอน
5. ชื่อดีไซน์เนอร์ที่ทำงานในโปรเจคนี้ (มีก็ได้ ไม่มีก็ได้ ใส่เป็นชื่อย่อก็ดี)
บอกให้ทีมงานของเรารู้สักนิดว่าไฟล์นี้ เกศสุรางค์กำลังแก้ไข, คุณพี่หมื่นได้เข้ามาช่วยแก้ใน version 2 และการะเกดกำลังจะทำ version 4
ข้อดี: ทำให้ดีไซน์เนอร์หลาย ๆ ท่านเข้ามาทำงานในหน้าเดียวกันได้ ตัวอย่างถ้าคุณการะเกดไม่มาทำงานวันนั้นต้องหยุดงานกระทันหัน เกศสุรางค์จะได้เข้ามาช่วยทำงานต่อได้โดยไม่ต้องตบตีกัน และการะเกดจะได้รู้ว่า version 2 เกศสุรางค์ได้เป็นคนทำไว้นั่นเอง
ตัวอย่าง: 001_R1_BP_Home_Ks_Rg.psd
คำอธิบาย: ไฟล์ที่ 001 แก้ไขครั้งที่ 1 ชื่อโปรเจค BP หน้า Home คนเริ่มชื่อ KS และ RG กำลังแก้ไข
นอกจากนี้แล้วสิ่งที่สำคัญอีกเรื่องในการตั้งชื่อไฟล์ คือข้อห้ามการตั้งชื่อแปลก ๆ เป็นสิ่งที่ควรหลีกเลี่ยง เพราะอย่าลืมว่าการทำงานของทีมงานเราไม่ได้ใช้ระบบปฏิบัติการคอมพิวเตอร์ในการดูไฟล์แบบเดียวกัน ดังนั้นการแสดงผลและการเรียงลำดับของไฟล์อาจจะผิดเพี้ยนได้ มาดูกันว่าสิ่งที่ไม่ควรทำมีอะไรกันบ้าง
สิ่งที่ควรหลีกเลี่ยงในการตั้งชื่อไฟล์
1. อย่าตั้งชื่อไฟล์ยาวจนเกินไป
ถ้าชื่อโปรเจคยาวเป็นหางว่าวก็ให้ใช้ตัวย่อแทน
2. อย่าใช้ตัวอักขระพิเศษ
ตัวอย่างเช่น ~ ! @ # $ % ^ & * ( ) ` ; < > ? , [ ] { } ‘ ” และ | ต้องยกเว้นเช่นเดียวกัน
3. หากตั้งชื่อไฟล์ด้วยตัวเลข
ประเมินแล้วว่าไฟล์จะรันเลขไปจนถึงหลักร้อย เพราะฉะนั้นหากเราจะใช้เลข 3 หลักก็ควรเริ่มต้นที่ 3 หลัก
เช่น “001, 002, …010, 011 … 100, 101, etc.
ไม่ควรเริ่มต้นด้วย “1, 2, …10, 11 … 100, 101, etc.” <— แล้วมาจบที่ 101 เพราะสุดท้ายจะเรียงไฟล์มั่วได้
4. อย่าใช้ช่องว่าง หรือเคาะ space bar ในการตั้งชื่อไฟล์
ให้ใช้ dash (-) หรือ underscores (_) แทน:
- Underscores, e.g. file_name.psd
- Dashes, e.g. file-name.psd
- No separation, e.g. filename.psd
- Camel case, where the first letter of each section of text is capitalized, e.g. FileName.xxx
คาเมลเคส ในกรณีที่ตั้งชื่อไฟล์เป็นภาษาอังกฤษควรให้คำขึ้นต้นเป็นตัวใหญ่เพื่อลดการเคาะวรรคและลดความสับสนนั่นเอง
5. การใส่วันที่ในชื่อไฟล์
ควรใช้ Format ที่เป็นปีขึ้นก่อน เพราะเวลาเรียงลำดับในโฟลเดอร์ จะได้อ่านตามปีล่าสุดขึ้นก่อน ตามด้วยเดือนและวันนั่นเองค่ะ
- YYYYMMDD หรือ YYMMDD
เช่น 20180415 หรือ 180415 เป็นต้น
ตัวอย่าง: การตั้งชื่อไฟล์ Screenshot, Design file
มีทั้งข้อห้ามและสิ่งที่ควรทำแล้ว เรามาดูตัวอย่างการตั้งชื่อไฟล์แบบคูล ๆ จากเอเจนซี่ต่างประเทศกันบ้างดีกว่า ขออนุญาตยกมาสักสองสามตัวอย่างนะคะ
ปล.ใครอยากจะไปตั้งสลับสับเปลี่ยนเวียนวนนอกเหนือจากนี้ก็จัดการได้เต็มที่เลยค่ะ :D
R1 – round 1, revision 1, version 1 แล้วแต่จะใช้ตัวย่อกันเลยนะคะ
BP – ชื่อย่อโปรเจค เอาไว้เสิชหาแบบไว ๆ
Home – ชื่อหน้า
Ks – ชื่อดีไซน์เนอร์ เกศสุรางค์
Rg – ชื่อดีไซน์เนอร์ หมื่นเรือง
Ex1 ชื่อโฟลเดอร์บุพเพสันนิวาส
- 001 Home (ชื่อโฟลเดอร์)
- 001_R1_BP_Home_Ks_Rg.png
- 002_R1_BP_Home_Hover.png
- 003_R1_BP_Home_Search_Rg.png
- 002 Checkout (ชื่อโฟลเดอร์)
- 001_R1_Checkout.png
- 002_R1_Checkout-Guest-Login.png
- 003_R1_Checkout-Existing-User_Ks.png
- 003 Compare (ชื่อโฟลเดอร์)
- 004 Login Register (ชื่อโฟลเดอร์)
Ex2 ชื่อโฟลเดอร์บุพเพสันนิวาส
- 001 Home (ชื่อโฟลเดอร์)
- R 1
- 100_BP_Home_Ks_Rg.png
- 102_BP_Home_Hover.png
- 103_BP_Home_Search_Rg.png
- R 2
- R 3
- R 1
- 002 Checkout (ชื่อโฟลเดอร์)
- R 1
- 003 Compare (ชื่อโฟลเดอร์)
- 004 Login Register (ชื่อโฟลเดอร์)
Ex3 ชื่อโฟลเดอร์บุพเพสันนิวาส
- 001 Home (ชื่อโฟลเดอร์)
- R 1
- images
- 100_BP_Home_Ks_Rg.png
- 102_BP_Home_Hover.png
- 103_BP_Home_Search_Rg.png
- 01_R1_BP_Design_Ks_Rg.sketch
- 02_R1_BP_Design_Ks.sketch
- 03_R1_BP_Design_Rg.sketch
- images
- R 2
- R 3
- R 1
- 002 Checkout (ชื่อโฟลเดอร์)
- R 1
- 003 Compare (ชื่อโฟลเดอร์)
- 004 Login Register (ชื่อโฟลเดอร์)
ตัวอย่างการตั้งชื่อหน้าบน Figma
สำหรับคนที่ต้องจัดการหน้าของ Design จำนวนมากนั้น
แอดนัทมีตัวอย่างไอเดียมาฝากสำหรับการตั้งชื่อกันค่ะ ^_^
ด้านล่างนี้เป็นวิธีการตั้งชื่อหน้าบน Figma โดยเรียงลำดับเลข 01, 02 ตามฟีเจอร์ของหน้า และใช้เลขหลักถัดไปในการจัดการ screen ที่เป็น popup หรือ screen ที่ต่อเนื่องกัน
เวลาทำ Prototype โยงหน้าจะช่วยให้เราสามารถจัดการหน้าของระบบได้ง่ายขึ้น เพราะทุกหน้าจะเรียงตาม order
ส่วนการใช้ Emoji ในการวางไว้หน้าชื่อไฟล์ จะช่วยเป็นการแจ้งดีไซน์เนอร์และทีม ว่าหน้านี้เสร็จแล้ว ห้ามแก้ไขแล้ว แล้วแต่การจัดการการสื่อสารร่วมกันของทีม
ส่วนใครที่มีไอเดียดี ๆ ในการตั้งชื่อไฟล์ที่นอกเหนือจากนี้อีกก็มาแชร์กันได้นะคะ
สุดท้ายนี้ขออวยพรให้ทุกท่านไม่เจอการแก้ไขงานแบบวิดีโอด้านล่าง
Brace yourself revision is coming!
ขอบพระคุณที่ตามอ่านจนจบค่า
……..
แล้วอย่าลืมมาติดตามบทความด้านการออกแบบได้ที่ Designil นะคะ
ข้อมูลเนื้อหาจาก Stanford – best practices for file naming
ปัจจุบันดีไซน์เนอร์ไม่เก็บไฟล์ในเครื่องกันแล้ว เพราะมีโปรแกรมออกแบบฟรี ที่สามารถทำงานออนไลน์ได้บน Browser อย่าง Figma พร้อมกับระบบ Design version control ติดตามอ่านบทความกันเลยนะคะ โปรแกรม Figma
บทความที่เกี่ยวข้อง
