naming file

การตั้งชื่อไฟล์ ตั้งยังไงให้ใช้งานง่ายสำหรับดีไซน์เนอร์

naming file
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email
การตั้งชื่อไฟล์ยังไงเป็นคำถามที่เราเชื่อว่าหลาย ๆ คนคงจะเคยประสบในการทำงาน ด้วยข้อแม้ของทีมที่มีทั้งหลายคน, มีการแก้ไขจำนวนมาก ทำให้การจัดการไฟล์ที่ลูกค้าสั่งมาแก้มาซะหลายร้อย ดังนั้นการตั้งชื่อไฟล์ที่ดีก็เลยสามารถช่วยลดระยะเวลาในการทำงานลงได้

การตั้งชื่อไฟล์ ตั้งยังไงนั้นเป็นคำถามที่เราเชื่อว่าหลาย ๆ คนคงจะเคยประสบในการทำงาน ด้วยข้อแม้ของทีมที่มีทั้งหลายคน, มีการแก้ไขจำนวนมาก ทำให้การจัดการไฟล์ที่ลูกค้าสั่งมาแก้มาซะหลายร้อยเวอร์ชั่นก็จะก่อเกิดปัญหาที่สร้างความเจ็บปวดให้ทีมของเราทำงานได้ช้าลงไปอีก ดังนั้นการตั้งชื่อไฟล์ที่ดีก็เลยสามารถช่วยลดระยะเวลาในการทำงานลงได้

การตั้งชื่อไฟล์
การตั้งชื่อไฟล์งาน photoshop, sketch ยังไงให้ใช้งานง่ายกันนะ ?

โดยบทความวิธีการและเนื้อหานี้นำมาจากประสบการณ์ส่วนตัวในการทำเว็บไซต์ ที่ครูพักลักจำมาหลาย ๆ เอเจนซี่ทั้งในและต่างประเทศ อาจจะต้องขอเอ่ยตัวก่อนว่าบทความนี้เป็น Insight การทำงานส่วนตัวแบบสุด ๆ  โดยหากใครมีวิธีการตั้งชื่อไฟล์หรือไอเดียที่น่าสนใจอยากแนะนำก็สามารถคอมเม้นท์ไว้ที่ด้านล่างนี้ได้เลยนะคะ 😀

ก่อนอื่นเราต้องมาเริ่มต้นกันที่ว่าในการออกแบบเว็บไซต์หรือแอพลิเคชั่นงานหนึ่งนั้นจะต้องมีรายละเอียดต่าง ๆ เหล่านี้ เพื่อให้ทีมของเราเข้าใจไฟล์ของเราได้ง่ายขึ้นว่าตอนนี้ใครกำลังทำอะไรอยู่ตอนไหน หน้าใด เวอร์ชั่นอะไรอยู่นั่นเองค่ะ

สิ่งที่ควรมีในการตั้งชื่อไฟล์

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

มีทั้งข้อห้ามและสิ่งที่ควรทำแล้ว เรามาดูตัวอย่างการตั้งชื่อไฟล์แบบคูล ๆ จากเอเจนซี่ต่างประเทศกันบ้างดีกว่า ขออนุญาตยกมาสักสองสามตัวอย่างนะคะ
ปล.ใครอยากจะไปตั้งสลับสับเปลี่ยนเวียนวนนอกเหนือจากนี้ก็จัดการได้เต็มที่เลยค่ะ 😀

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
  • 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
    • R 2
    • R 3
  • 002 Checkout (ชื่อโฟลเดอร์)
    • R 1
  • 003 Compare (ชื่อโฟลเดอร์)
  • 004 Login Register (ชื่อโฟลเดอร์)

ส่วนใครที่มีไอเดียดี ๆ ในการตั้งชื่อไฟล์ที่นอกเหนือจากนี้อีกก็มาแชร์กันได้นะคะ
สุดท้ายนี้ขออวยพรให้ทุกท่านไม่เจอการแก้ไขงานแบบวิดีโอด้านล่าง

Brace yourself revision is coming!
ขอบพระคุณที่ตามอ่านจนจบค่า

……..

แล้วอย่าลืมมาติดตามบทความด้านการออกแบบได้ที่ Designil นะคะ

ข้อมูลเนื้อหาจาก Stanford – best practices for file naming

ปัจจุบันดีไซน์เนอร์ไม่เก็บไฟล์ในเครื่องกันแล้ว เพราะมีโปรแกรมออกแบบฟรี ที่สามารถทำงานออนไลน์ได้บน Browser อย่าง Figma พร้อมกับระบบ Design version control ติดตามอ่านบทความกันเลยนะคะ โปรแกรม Figma

บทความที่เกี่ยวข้อง

Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *