ข้อกำหนดของระบบดีไซน์ของ Vercel ถือเป็นตัวอย่างระดับตำราเรียนที่ผมเคยเห็นมาเลย
วันนี้ผมศึกษาอย่างจริงจังกับไฟล์ DESIGN.md ของเขา ทั้งธีมสว่างและธีมมืด มันอธิบายสี ฟอนต์ ระยะห่าง คอมโพเนนต์ การเคลื่อนไหว และกฎเกณฑ์การเขียนข้อความได้อย่างครบถ้วน จนกลายเป็นวิธีการออกแบบที่นำไปปฏิบัติได้จริง
ผมรู้สึกว่าผมสามารถเดินตามเส้นทางนี้เพื่อเขียน design.md สำหรับผลิตภัณฑ์ทั้งหมดของผมในอนาคตได้เลย
รายละเอียดอยู่ที่นี่:
เพื่อนบางคนอาจจะยังไม่เข้าใจว่า DESIGN.md คืออะไร พูดง่ายๆ ก็คือ มันคือข้อกำหนดการออกแบบที่ให้ AI อ่าน เมื่อ AI ช่วยเราเขียนโค้ด มันจำเป็นต้องรู้ว่าจะใช้สีอะไร ขนาดฟอนต์เท่าไหร่ และระยะห่างระหว่างองค์ประกอบต่างๆ
ถ้าไม่มีไฟล์นี้ อินเทอร์เฟซที่ AI สร้างออกมาจะดูแตกต่างกันไปในแต่ละครั้ง สไตล์ไม่เป็นหนึ่งเดียวกัน
หลังจากอ่าน DESIGN.md ของ Vercel แล้ว ผมก็ตระหนักว่า DESIGN.md ที่ดีนั้นมีอะไรมากกว่าแค่การบอก AI ว่าต้องใช้รหัสสี Hex หรือขนาดฟอนต์ไหน มันคือชุดความคิดด้านการออกแบบทั้งหมด มันค่อนข้าง颠覆ความเข้าใจของผมเลยทีเดียว
วันนี้ผมจะมาวิเคราะห์ให้ฟังว่าทำไมไฟล์นี้ถึงดีขนาดนี้
1
อย่างแรก มาพูดถึงเรื่องสีก่อน
ตอนที่ผมเริ่มเขียน DESIGN.md ครั้งแรก ส่วนของสีนี้ง่ายมากๆ ผมแค่ลิสต์ค่าสีสองสามค่า บอก AI ว่าสีไหนเป็นสีหลัก สีรอง สีเน้น ก็จบ
แต่การเขียนแบบนี้ AI ก็ยังไม่รู้ว่าสีเหล่านี้สอดคล้องกับสถานะการโต้ตอบต่างๆ อย่างไร
ยกตัวอย่างเช่น ปุ่มหนึ่ง ปุ่มในสถานะปกติควรเป็นสีอะไร? เมื่อเอาเมาส์ไปชี้ (hover) ควรเข้มขึ้นเท่าไหร่? ตอนที่คลิกควรเป็นสีอะไร? ถ้ารายละเอียดเหล่านี้ไม่ได้ถูกกำหนดไว้อย่างชัดเจน ผลลัพธ์ที่ AI สร้างขึ้นในแต่ละครั้งก็อาจแตกต่างกันไป
วิธีการของ Vercel แก้ปัญหานี้ได้อย่างสมบูรณ์แบบ
ในระบบดีไซน์ของพวกเขา สีแต่ละชุดจะถูกแบ่งออกเป็น 10 ระดับความเข้มตั้งแต่ 100 ถึง 1000 และแต่ละตัวเลขจะสอดคล้องกับสถานะอินเทอร์เฟซที่ตายตัว
100 คือพื้นหลังเริ่มต้นขององค์ประกอบ, 200 คือพื้นหลังเมื่อ hover, และ 300 คือพื้นหลังเมื่อคลิก ถัดขึ้นไป 400 คือเส้นขอบเริ่มต้น, 500 คือเส้นขอบเมื่อ hover, และ 600 คือเส้นขอบเมื่อคลิก
700 ใช้สำหรับบล็อกสีทึบ เช่น แท็กหรือตัวปุ่มเอง; 800 คือสถานะ hover ของบล็อกเหล่านี้ 900 ใช้สำหรับข้อความและไอคอนรอง และ 1000 ใช้สำหรับข้อความและไอคอนหลัก
มันดูเหมือนแค่การกำหนดหมายเลข แต่เบื้องหลังมันคือตรรกะการโต้ตอบที่สมบูรณ์แบบ
100 ถึง 300 จัดการสถานะพื้นหลัง 400 ถึง 600 จัดการสถานะเส้นขอบ 700 และ 800 จัดการสถานะบล็อกสีทึบ 900 และ 1000 จัดการลำดับชั้นของข้อมูล
พูดอีกอย่างคือ Vercel กำลังบอก AI ว่ามีสถานะต่างๆ อยู่หลายสถานะ สีเป็นเพียงการแสดงออกของสถานะเหล่านี้เท่านั้น
ประโยชน์ของสิ่งนี้ชัดเจนมาก
เมื่อ AI เขียนโค้ด มันไม่จำเป็นต้องเดาว่าปุ่มจะเข้มขึ้นเท่าไหร่เมื่อ hover หรือเส้นขอบจะเปลี่ยนไปอย่างไร สถานะเริ่มต้นตรงกับ 100, hover ตรงกับ 200, คลิกตรงกับ 300; กฎถูกกำหนดไว้ล่วงหน้าแล้ว
นอกจากนี้ บนพื้นฐานนี้ Vercel ยังมีทั้งธีมสว่างและธีมมืด แต่ใช้ชื่อ Token ที่เหมือนกันทุกประการ
ตัวอย่างเช่น gray-1000 ในธีมสว่างคือ #171717 ซึ่งใกล้เคียงกับสีดำสนิท ในธีมมืด มันกลายเป็น #ededed ซึ่งใกล้เคียงกับสีขาว
สำหรับระบบดีไซน์ สองสีนี้แท้จริงแล้วคือสิ่งเดียวกัน
ทั้งคู่แสดงถึงข้อมูลที่สำคัญที่สุดบนหน้าเว็บ นักพัฒนาและ AI เมื่อสร้างอินเทอร์เฟซ จะสนใจความหมายเชิงความหมายของ gray-1000 มากกว่าค่า Hex เฉพาะที่อยู่เบื้องหลัง เมื่อธีมเปลี่ยน ระบบจะจับคู่ความหมายเชิงความหมายนี้กับสีที่สอดคล้องกันโดยอัตโนมัติ
2
หลังจากแก้ปัญหาสีแล้ว ข้อจำกัดที่สำคัญอีกอย่างคือจังหวะของหน้าเว็บ
ระบบระยะห่างของ Vercel อิงจากผลคูณของ 4px โดยมีให้เลือกเพียง 9 ค่าเท่านั้น: 4, 8, 12, 16, 24, 32, 40, 64, 96 ระยะห่างทั้งหมดในผลิตภัณฑ์ทั้งหมดถูกเลือกจากตัวเลขเหล่านี้
ปฏิกิริยาแรกของผมคือมันดูจำกัดไปหน่อย ถ้าฉันต้องการ 20px ล่ะ? ถ้าฉันต้องการ 28px ล่ะ?
ผมถามเพื่อนที่เป็นนักออกแบบ เขาบอกว่าสำหรับผลิตภัณฑ์ส่วนใหญ่แล้ว ระยะห่าง 9 แบบก็เพียงพอแล้ว
ถ้ามีตัวเลือกระยะห่างมากเกินไป จังหวะของหน้าก็จะหายไป เว็บไซต์ที่แย่ๆ หลายแห่งมีการออกแบบระยะห่างที่ไร้ระเบียบ ซึ่งเป็นข้อห้ามสำคัญในการออกแบบผลิตภัณฑ์
ระบบดีไซน์ที่ยอดเยี่ยมไม่ได้ให้ตัวเลือกที่ไม่มีที่สิ้นสุด แต่กลับจำกัดตัวเลือกอย่างตั้งใจ
Vercel ให้ชุดคำแนะนำจังหวะที่ชัดเจน: ระยะห่าง 8px ระหว่างองค์ประกอบภายในกลุ่มเดียวกัน, 16px ระหว่างกลุ่ม, และ 32 ถึง 40px ระหว่างส่วนต่างๆ นี่คือการกำหนดจังหวะการหายใจของหน้าเว็บอย่างแท้จริง
ผู้ใช้อาจไม่สังเกตเห็นช่องว่างเหล่านี้ แต่พวกเขาจะรู้สึกได้โดยธรรมชาติว่าส่วนไหนเป็นส่วนหนึ่งของภาพรวมเดียวกัน และจุดไหนคือจุดเริ่มต้นของเนื้อหาส่วนใหม่
บ่อยครั้งที่หน้าหนึ่งดูดี ไม่ใช่เพราะนักออกแบบใช้เทคนิคขั้นสูงอะไร แต่เป็นเพราะจังหวะนี้คงที่ตลอดทั้งหน้า
ระบบตัวอักษรก็เป็นไปตามตรรกะเดียวกัน
ระบบฟอนต์ของ Vercel เหมือนกับตรรกะของสีและระยะห่าง
ข้อความทั้งหมดถูกจัดหมวดหมู่เป็นบทบาทที่ตายตัวไม่กี่แบบ: หัวเรื่อง (heading), ป้ายกำกับ (label), เนื้อความ (copy), และปุ่ม (button)
ภายใต้แต่ละบทบาท จะมี Token ที่มีขนาดต่างกันให้ และแต่ละ Token ก็มีฟอนต์ ขนาด น้ำหนัก ความสูงของบรรทัด และระยะห่างระหว่างตัวอักษรที่กำหนดไว้ล่วงหน้า
ก่อนหน้านี้ เมื่อเจอข้อความสักชิ้น นักออกแบบอาจคิดว่าจะใช้ 14px หรือ 15px ดี และความสูงของบรรทัดที่เหมาะสมคือเท่าไหร่
แต่เมื่อมีระบบดีไซน์ วิธีคิดจะเปลี่ยนไป AI จะกำหนดก่อนว่าข้อความนี้มีบทบาทอะไร เป็นหัวเรื่อง เนื้อความ หรือข้อมูลรอง? เมื่อกำหนดบทบาทได้แล้ว สไตล์ที่สอดคล้องก็ถูกกำหนดตามไปด้วย
การเปลี่ยนจากกรอบความคิดเรื่องขนาดฟอนต์ ไปเป็นกรอบความคิดเรื่องบทบาท จาก การตัดสินใจด้วยภาพ ไปเป็น การตัดสินใจเชิงความหมาย นี่คือคุณค่าที่แท้จริงของระบบดีไซน์ ยอดเยี่ยมมาก
พอเห็นแบบนี้ คุณจะรู้ว่าไม่ว่าจะเป็นระยะห่างหรือฟอนต์ Vercel กำลังทำสิ่งเดียวกัน: ลดการเล่นอิสระในช่วงการดำเนินการให้มากที่สุด กฎถูกกำหนดไว้ล่วงหน้า ดังนั้นการดำเนินการจึงแค่ต้องเลือกบทบาทเท่านั้น
สิ่งนี้เป็นจริงสำหรับนักออกแบบ สำหรับนักพัฒนา และสำหรับ AI
3
นอกจากนี้ การเขียนข้อความ (copywriting) ก็ถูกมองว่าเป็นส่วนสำคัญของข้อกำหนดการออกแบบของ Vercel นี่คือส่วนที่มักจะหายไปจากไฟล์ DESIGN.md ส่วนใหญ่
Vercel กำหนดรายละเอียดเหล่านี้ไว้อย่างเฉพาะเจาะจงมาก
ตัวอย่างเช่น ข้อความบนปุ่มต้องเป็นคำกริยาบวกกับวัตถุ เช่น "Deploy Project" หรือ "Delete Member" คุณไม่สามารถเขียนคำคลุมเครืออย่าง "Deploy," "OK," หรือ "Delete" ได้
เหตุผลง่ายมาก เมื่อเห็นคำว่า "Delete" ผู้ใช้ยังต้องคิดอีกว่ากำลังจะลบอะไรกันแน่ แต่ถ้ามีทั้งคำกริยาและวัตถุ ผู้ใช้จะเข้าใจได้ทันที
ข้อความแสดงข้อผิดพลาดก็เช่นกัน กฎของ Vercel ชัดเจน ขั้นแรก บอกผู้ใช้ว่าเกิดอะไรขึ้น จากนั้น บอกผู้ใช้ว่าต้องทำอะไรต่อไป
ตัวอย่างเช่น ถ้าการ build ล้มเหลวเพราะไฟล์แพ็คเกจมีขนาดเกินขีดจำกัด วิธีแก้คือลดขนาดหรือปรับขีดจำกัด หลังจากอ่านสามประโยค ผู้ใช้จะรู้ทันทีว่าปัญหาอยู่ที่ไหนและต้องทำอะไรต่อไป
ข้อความแจ้งเตือนข้อผิดพลาดในผลิตภัณฑ์หลายๆ ตัวคือ "การดำเนินการล้มเหลว กรุณาลองใหม่อีกครั้งในภายหลัง" เนื้อหาข้อมูลของข้อความแจ้งเตือนแบบนี้แทบจะเป็นศูนย์ ข้อมูลเดียวที่ผู้ใช้ได้รับหลังจากอ่านคือมันล้มเหลว ส่วนสาเหตุที่ล้มเหลวและต้องทำอะไรต่อไป พวกเขายังต้องเดา
ข้อกำหนดการเขียนข้อความในระบบดีไซน์本质上คือการลดการเดานี้ลง
Vercel ยังกำหนดมาตรฐานข้อความแจ้งเตือนหลังจากดำเนินการเสร็จสิ้น ซึ่งแค่ต้องระบุว่ามีการเปลี่ยนแปลงอะไรเกิดขึ้น เช่น "Project deleted" ไม่ใช่ "Project deleted successfully"
เพราะความจริงที่ว่ากล่องข้อความแจ้งเตือนสามารถปรากฏขึ้นได้นั้นบ่งบอกอยู่แล้วว่าการดำเนินการเสร็จสมบูรณ์ คำว่า "successfully" จึงเป็นข้อมูลที่ซ้ำซ้อน
ต่อไปคือการเคลื่อนไหว (motion)
ส่วนนี้น่าสนใจเป็นพิเศษ เพราะมันตรงกันข้ามกับสัญชาตญาณของผมโดยสิ้นเชิง ผมคิดว่ายิ่งมีอนิเมชั่นมากเท่าไหร่ ผลิตภัณฑ์ก็ยิ่งดูดีขึ้นเท่านั้น
ดังนั้น การเพิ่มอนิเมชั่นเล็กน้อยให้กับปุ่มเมื่อ hover หรือเมนูที่เด้งขึ้นมา ดูเหมือนจะทำให้มันดูพรีเมียม ผลิตภัณฑ์ Vibe Coding หลายๆ ตัวในตอนนี้ดูเหมือนจะมุ่งไปในทิศทางนี้
แต่ทัศนคติของ Vercel แตกต่างอย่างสิ้นเชิง พวกเขาเขียนไว้อย่างชัดเจนด้วยซ้ำว่าในสถานการณ์การโต้ตอบหลายๆ แบบ 0 มิลลิวินาทีมักจะเป็นตัวเลือกที่ดีที่สุด กล่าวคือ ไม่มีอนิเมชั่น เสร็จทันที
ถ้าปุ่มเปลี่ยนจากสถานะปกติเป็นสถานะ hover การเปลี่ยนแปลงนี้ก็ชัดเจนพออยู่แล้ว ผลตอบรับที่ดีที่สุดคือให้มันเกิดขึ้นทันที การเพิ่มอนิเมชั่นอีกชั้นจะทำให้อินเทอร์เฟซรู้สึกช้าลงแทน
แน่นอน บางสถานการณ์ก็จำเป็นต้องมีการเคลื่อนไหว
ตัวอย่างเช่น ป๊อปอัพที่ปรากฏขึ้นมาอย่างกะทันหัน ถ้าไม่มีการเปลี่ยนผ่านเลย ผู้คนจะไม่รู้ว่ามันมาจากไหน นี่คือจุดที่อนิเมชั่นมีคุณค่า
Vercel ยังกำหนดระยะเวลาสำหรับสถานการณ์ต่างๆ อีกด้วย การเปลี่ยนสถานะปกติประมาณ 150 มิลลิวินาที, ป๊อปโอเวอร์ประมาณ 200 มิลลิวินาที, และโมดอลประมาณ 300 มิลลิวินาที
ยิ่งการเปลี่ยนแปลงใหญ่เท่าไหร่ ก็ยิ่งให้เวลาตอบสนองมากขึ้นเท่านั้น ยิ่งการเปลี่ยนแปลงเล็กเท่าไหร่ ผลตอบรับก็ยิ่งตรงไปตรงมามากขึ้นเท่านั้น
ตรรกะเบื้องหลังมันเหมือนเดิมเสมอ: ไม่ต้องเคลื่อนไหวถ้าไม่จำเป็น และเมื่อต้องเคลื่อนไหว ก็ให้มันเร็ว เบา และยับยั้งชั่งใจ
ส่วนสุดท้ายที่สร้างความประทับใจให้ผมอย่างมากคือการเข้าถึงได้ (accessibility)
พูดตามตรง ผมไม่ค่อยได้ให้ความสนใจเป็นพิเศษกับส่วนนี้มาก่อน เพราะส่วนใหญ่แล้ว ตราบใดที่อินเทอร์เฟซของผลิตภัณฑ์ดูดีและฟังก์ชั่นการทำงานใช้ได้ ก็ดูเหมือนจะเพียงพอแล้ว แต่ Vercel เขียนส่วนนี้อย่างจริงจังมาก
พวกเขากำหนดให้มีความคมชัดเพียงพอระหว่างข้อความและพื้นหลัง การเปลี่ยนสถานะไม่สามารถพึ่งพาแค่สีได้ ต้องจับคู่กับไอคอนหรือคำอธิบายข้อความ
องค์ประกอบที่โต้ตอบได้ทั้งหมดต้องมีสถานะโฟกัสที่ชัดเจน และไม่สามารถลบทิ้งเพื่อความสะอาดทางสายตาได้
กฎเหล่านี้หมายความว่าระบบดีไซน์ให้บริการทุกคน รวมถึงผู้ที่มีความไวต่อสีต่ำ ผู้ที่นำทางด้วยแป้นพิมพ์ และผู้ที่ดูโทรศัพท์ในที่แสงจ้า
DESIGN.md นี้มืออาชีพเกินไป ผมคิดว่าเมื่อทุกคนสร้างผลิตภัณฑ์ใหม่ในอนาคต ก็สามารถเขียน DESIGN.md ของตัวเองโดยอิงจากแนวคิดของไฟล์ MD สองไฟล์นี้ได้
