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

บทความนี้เขียนเมื่อปี 2017 ซึ่งอาจจะoutdateไปแล้ว {alertWarning}

เนื่องจากตอนนี้ค่อนข้างมีปัญหาเรื่องของการสื่อสารกันในทีม รวมไปถึงนอกทีม ผมเลยต้องการสื่อสารให้มีรูปแบบเดียวกัน จึงรวบรวมเอาข้อมูลเบื้องต้นมาสรุปเป็นแนวทางการทำงาน

แต่ก่อนอื่น ทุกคนจะต้องทำความเข้าใจ Concept ของการเรียกองค์ประกอบ ตาม Atomic Design ต่างๆก่อน

• Atom : คือระดับชิ้นส่วนเล็กที่สุดในองค์ประกอบของ UI เช่น ปุ่ม, Lable
• Molecules : คือการนำ Atomics ที่มีความเกี่ยวข้องกัน
• Organism : คือ Molecules ที่เริ่มมีการทำงานร่วมกัน มีความสัมพันธ์ในระดับของ Ecosystem ของตัวมันเอง
• Template และ Page: มีความคล้ายกัน แต่ Tempalte จะเป็นต้นแบบทั่วไปในขณะที่ Page จะเริ่มเห็นว่ามี Story และ Mechanism ของการทำงานในสภาพแวดล้อมจริงแล้ว

         

รูปแบบที่ให้ใช้

[function]_[behavior]_[preference]_[size]_[sequence]

ตัวอย่าง

Ic_voicemail_black_24dp.png ic_stay_primary_landscape_black_48dp.png

Ic_voicemail_2x.png ic_stay_primary_landscape_48pt_3x.png

Ic_voicemail_black_24dp_1x.png ic_stay_primary_landscape_black_48dp_2x.png

Home1_0 acoount1_0

home2_0 account1_1

ตัวอย่างเพิ่มเติม https://material.io/icons/#ic_stay_primary_landscape

ห้าม : ตัว Capital, เว้นวรรค, อักขระประหลาดหรือสัญลักษณ์,

ให้ : ตัวอักษร, ตัวเลข, Underscore, Lower-case หรือ ตัวพิมพ์เล็ก

[function] : ไฟล์จะต้องประกอบด้วยส่วนที่บอกว่าทำหน้าที่ของส่วนนี้ทำอะไร เช่น

Page Level	home
	dashboard
	edit_account
	manage_account
Atomic level	b (มาจาก button คือปุ่ม)
	ic (มาจาก icon)
	Label (มาจาก ชุดข้อมูลรวมกับ button หรือ Organism )

[behavior] : เป็นลักษณะพฤติกรรมของชิ้นส่วนนั้น เช่น Delete, Edit, New.

[preference] : คุณสมบัติติดตัวของชิ้นส่วนนั้น หรือมี Expression เป็น สี เช่น red, blue เช่นสีอะไร หรือ landscape/portrait

[size] : ขนาดของภาพ เป็นตัวเลข

1. Android : hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi
2. iOS        : 1x, 2x, 3x (ปกติ 1x จะไม่เขียน)
3. Web : 1x,2 x

[sequence] :  ลำดับการทำงานของแต่ละ function เพื่อให้เรียงลำดับเหตุการณ์ได้ ให้ตั้ง “1” + “_” + “0” เป็นหลัก เช่น

A1_0

A1_2 กรณี เพิ่มเติมภายหลังจะทำได้ง่าย

A1 ถ้าตั้งแค่นี้ ลำดับจะเรียงได้ยากใน MAC ถ้ามั่นใจว่าจะไม่ผิด จะทำแบบนี้ก็ได้

A2_0

A3_0