naming-file

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

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

การตั้งชื่อไฟล์

การตั้งชื่อไฟล์งาน 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 เกศสุรางค์ได้เป็นคนทำไว้นั่นเอง

 


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

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

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




There are no comments

Add yours