การสร้างคู่มือสไตล์ UI เพื่อ UX . ที่ดีขึ้น

ฟังเวอร์ชั่นเสียงของบทความนี้

มั่นใจได้ถึงการออกแบบผลิตภัณฑ์ที่สอดคล้องกันและประสบการณ์ผู้ใช้

ในปีพ.ศ. 2519 จอห์นนี่ แคชได้ปล่อยเพลง One Piece at a Time ซึ่งเป็นเพลงที่บอกเล่าเรื่องราวของพนักงานขับรถในดีทรอยต์ที่ใช้เวลายี่สิบปีในการรวบรวมชิ้นส่วนคาดิลแลคที่ถูกขโมยมาจากสายการผลิต

น่าเสียดายที่เมื่อคนงานเริ่มสร้างรถ Cadillac เถื่อน เขาพบว่าหลายชิ้นส่วนเข้ากันไม่ได้เนื่องจากคุณลักษณะการออกแบบที่สำคัญมีการเปลี่ยนแปลงตลอดหลายปีที่ผ่านมา ด้วยความเฉลียวฉลาดเล็กน้อย รถคัสตอมคันนี้จึงมารวมกัน แต่กลับกลายเป็นสิ่งอัปลักษณ์ที่ไม่น่าดูซึ่งจุดประกายให้เกิดการเยาะเย้ยไม่ว่าจะไปที่ใด

ท่อนหลังก็ดูตลกดีเหมือนกัน
แต่เราใส่มันไว้ด้วยกันและเมื่อเราผ่านพ้นไปได้
นั่นคือเมื่อเราสังเกตเห็นว่าเรามีครีบหางเพียงอันเดียว

นักออกแบบและผู้พัฒนาประสบการณ์ดิจิทัลในปัจจุบันต้องเผชิญกับความท้าทายที่คล้ายคลึงกัน กาลเวลาเป็นศัตรูตัวฉกาจที่สามารถทำลายความต่อเนื่องของผลิตภัณฑ์ดิจิทัลได้ เมื่อเวลาผ่านไป สมาชิกในทีมก็เข้ามาและจากไป แนวโน้มจะเปลี่ยนแปลงไป และคุณลักษณะต่างๆ ก็เปลี่ยนไป นอกจากนี้ การเติบโตอย่างรวดเร็วของภูมิทัศน์ดิจิทัลในยุคปัจจุบันของเราหมายความว่านวัตกรรมผลิตภัณฑ์เกิดขึ้นเป็นไตรมาส ไม่ใช่หลายปี

หากทีมธุรกิจหรือทีมออกแบบไม่มีบันทึกที่ใช้ร่วมกันซึ่งบันทึกรูปลักษณ์และความรู้สึกที่ตั้งใจไว้ของผลิตภัณฑ์ ภาพและประสบการณ์ที่ไม่สอดคล้องกันจะเกิดขึ้น ผู้ใช้จะรู้สึกหงุดหงิดและชื่อเสียงของแบรนด์จะได้รับผลกระทบ

UI Style Guides เป็นเครื่องมือออกแบบและพัฒนาที่นำการทำงานร่วมกันมาสู่อินเทอร์เฟซผู้ใช้และประสบการณ์ของผลิตภัณฑ์ดิจิทัล แก่นแท้ของพวกเขา พวกเขา:

• บันทึกองค์ประกอบการออกแบบและการโต้ตอบทั้งหมดที่เกิดขึ้นภายในผลิตภัณฑ์
• แสดงรายการส่วนประกอบ UI ที่สำคัญ เช่น ปุ่ม การออกแบบตัวอักษร สี เมนูการนำทาง ฯลฯ
• จัดทำเอกสารส่วนประกอบ UX ที่สำคัญ เช่น สถานะโฮเวอร์ การเติมแบบเลื่อนลง แอนิเมชั่น ฯลฯ
• มีองค์ประกอบสดและข้อมูลโค้ดสำหรับนักพัฒนาเพื่ออ้างอิงและใช้งาน

ก่อนที่เราจะพิจารณาอย่างละเอียดถึงวิธีการประกอบ UI Style Guide ระดับผู้เชี่ยวชาญ สิ่งสำคัญคือต้องเข้าใจว่าไม่มีแนวทางเดียวที่เหมาะกับทุกคน คุณค่าของคู่มือสไตล์นั้นครอบคลุมมากกว่าแบรนด์ใหญ่ ๆ ด้วยทีมผลิตภัณฑ์ขนาดใหญ่ ธุรกิจขนาดกลางถึงขนาดเล็กที่แสวงหาประสบการณ์ดิจิทัลที่สอดคล้องกันก็จะได้รับประโยชน์เช่นกันเมื่อ UI Style Guide ได้รับการปรับแต่งตามความต้องการเฉพาะของพวกเขา

รวมส่วนประกอบการออกแบบที่สำคัญเหล่านี้ไว้ในคู่มือสไตล์ UI

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

เคล็ดลับสำหรับมือโปร: จัดทำเอกสารเฉพาะส่วนประกอบการออกแบบที่เกี่ยวข้อง ข้อมูลที่ไม่เกี่ยวข้องทำให้ UI Style Guides บวมและใช้งานยาก

โครงการวิชาการพิมพ์

วิชาการพิมพ์เป็นหนึ่งในองค์ประกอบการออกแบบส่วนต่อประสานที่พบบ่อยที่สุด ดังนั้นจึงไม่เพียงพอที่จะระบุเพียงชื่อแบบอักษรที่ใช้ในผลิตภัณฑ์ ควรให้คำแนะนำที่ชัดเจนสำหรับชื่อเรื่อง คำบรรยาย หัวเรื่อง (H1, H2, H3) ข้อความเนื้อหา และคำอธิบายภาพ

นอกจากนี้ ควรระบุขนาดแบบอักษร น้ำหนักที่ระบุ และรูปแบบที่กำหนด ความสูงของเส้นและการจัดช่องไฟก็จำเป็นเช่นกัน และควรเลือกใช้ฟอนต์แบบ go-to เฉพาะเมื่อเกิดสถานการณ์พิเศษขึ้น

เลย์เอาต์ที่ตอบสนอง

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

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

จานสี

วิธีที่รวดเร็วที่สุดในการทำลายอินเทอร์เฟซคือการใช้สีที่ไม่สอดคล้องกัน ดังนั้นจึงต้องกำหนดชุดสีให้ชัดเจน การแสดงสีและค่าของสี (HEX, UIColor) เป็นการเริ่มต้นที่ดี แต่ควรให้ตัวอย่างการจับคู่และการใช้งานที่เฉพาะเจาะจงด้วย

หาก UI Style Guide อ้างอิงถึงชุดของแนวทางเอกลักษณ์ของแบรนด์ ให้ตรวจดูว่ามีชุดสีเสริมที่เน้นสีอ่อนกว่าหรือไม่ ถ้าไม่สร้างเอกสารของคุณเอง การเลือกค่าสีเทาก็มีประโยชน์เช่นกัน

ปุ่ม

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

ส่วนประกอบ UI เพิ่มเติมที่อาจจำเป็น

• ยึดถือ
• เคล็ดลับเครื่องมือและป๊อปโอเวอร์
• Modals
• องค์ประกอบของแบบฟอร์ม
• ตารางข้อมูล
• เมนูนำทาง
• แผนภูมิและการสร้างภาพข้อมูล
• แท็บ
• สวิตซ์เปิด-ปิด
• ไดอะล็อก
• รายการตารางเนื้อหา
• รายการแนวตั้ง
• แถบเครื่องมือ
• เครื่องมือเลือกวันที่และเวลา
• กำลังโหลดตัวชี้วัด
• ช่องทำเครื่องหมาย
• การแจ้งเตือน
• เมนูแบบเลื่อนลง
• สไลเดอร์
• สเต็ปเปอร์
• การแบ่งหน้า

จัดระเบียบและกำหนดบริบทคำแนะนำการออกแบบ

นอกจากองค์ประกอบ UI ที่ต้องมีแล้ว ยังมีฟีเจอร์ที่ใช้งานได้จริงจำนวนหนึ่งที่ทำให้ UI Style Guides ง่ายขึ้นสำหรับธุรกิจและทีมออกแบบในการอ้างอิง นำทาง และนำไปใช้

สารบัญ

สารบัญที่มีการจัดระเบียบอย่างดีและทำเครื่องหมายไว้อย่างชัดเจนเป็นวิธีง่ายๆ ที่จะช่วยให้ทุกคนค้นหาสิ่งที่อยู่ภายในเอกสารได้อย่างรวดเร็ว

หมายเหตุบริบท

เป็นไปไม่ได้ที่จะคาดเดาทุกการตัดสินใจในการออกแบบที่เป็นปัญหาที่อาจเกิดขึ้นตลอดอายุการใช้งานของผลิตภัณฑ์ ดังนั้นการระบุเหตุผลในการออกแบบเบื้องหลังส่วนประกอบ UI ที่ใช้บ่อยจะช่วยให้แก้ไขสถานการณ์ที่ไม่คาดฝันได้ง่ายขึ้น

ตัวอย่างเช่น:

“โดยพื้นฐานแล้ว ผลิตภัณฑ์ของเราคือการจัดแสดงภาพสถาปัตยกรรมที่ดีที่สุดจากทั่วโลก ด้วยเหตุผลดังกล่าว เลย์เอาต์ของอินเทอร์เฟซของเราจึงจัดลำดับความสำคัญของรูปภาพที่มีขนาดใหญ่และกระฉับกระเฉงมากกว่าข้อความ เมื่อใดก็ตามที่เป็นไปได้ ทำให้ภาพเป็นจุดโฟกัสของผลิตภัณฑ์ของเรา”

คำแนะนำการเว้นวรรคและการวางตำแหน่ง

ระยะห่างและการวางตำแหน่งมักจะครอบคลุมอยู่ในส่วน 'เลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์' ขึ้นอยู่กับความซับซ้อนของผลิตภัณฑ์ดิจิทัล คำแนะนำอาจประกอบด้วย "กฎง่ายๆ" ทั่วไปหรือค่อนข้างละเอียด

สิ่งที่ควรทำและไม่ควรทำ

บ่อยครั้ง การเขียนโครงร่างสิ่งที่ควรทำและไม่ควรทำอย่างชัดเจนอาจเป็นประโยชน์ ตัวอย่างเช่น:

• “ โปรด ใช้โลโก้บริษัทของเราในรูปแบบคำสีขาวในส่วนท้ายของอินเทอร์เฟซ”
• “ อย่า ใช้โลโก้บริษัทของเราในรูปแบบสีอื่นบนพื้นหลังสีดำ”

สิ่งที่ควรทำและไม่ควรทำป้องกันการโต้วาทีและประหยัดเวลาในการออกแบบและพัฒนา แต่ควรจดบันทึกบริบทเช่นนี้ไว้เสมอ:

“รายการสิ่งที่ควรทำและไม่ควรทำนี้ครอบคลุมการตัดสินใจในการออกแบบที่สำคัญมากมาย แต่ไม่ได้คำนึงถึงการใช้องค์ประกอบการออกแบบของผลิตภัณฑ์ของเราในทางที่ผิด เมื่อคำนึงถึงสิ่งนี้ ให้ใช้วิจารณญาณที่ดีที่สุดเมื่อเกิดความไม่แน่นอน และทำการเลือกที่สะท้อนถึงรูปลักษณ์โดยรวมของผลิตภัณฑ์ของเราได้อย่างแม่นยำ”

องค์ประกอบสดและตัวอย่างโค้ด

หลักเกณฑ์เกี่ยวกับเอกลักษณ์ของแบรนด์มักเป็นเอกสารแบบคงที่ แต่ UI Style Guide มีองค์ประกอบที่ใช้งานจริงซึ่งทำงานเหมือนในผลิตภัณฑ์ขั้นสุดท้าย ซึ่งหมายความว่าปุ่มจะทำงานเหมือนปุ่ม เมนูดรอปดาวน์ จริงๆ แล้วเมนูแบบเลื่อนลง และแอนิเมชั่นเป็นภาพเคลื่อนไหว

ข้อมูลโค้ดช่วยให้นักพัฒนาสามารถคัดลอกและวางโค้ดขององค์ประกอบที่ใช้งานจริงลงในส่วนหลังของผลิตภัณฑ์ได้อย่างรวดเร็ว

ทำให้ UI Style Guides เข้าถึงได้ง่ายสำหรับทีมออกแบบ

ตอนนี้เราเข้าใจวิธีสร้างคู่มือสไตล์และส่วนประกอบและคุณลักษณะที่รวมอยู่ในคู่มือสไตล์ UI แล้ว เราจึงเปลี่ยนความสนใจไปที่การแบ่งปันและการสื่อสาร โดยเฉพาะอย่างยิ่ง ตัวเลือกสำหรับ UI Style Guides คืออะไร

ตามเนื้อผ้า UI Style Guides จะมีอยู่ในหน้าเว็บ ซึ่งช่วยให้นักออกแบบและนักพัฒนาเข้าถึงได้ง่าย และช่วยให้องค์ประกอบการออกแบบทำงานได้เหมือนในผลิตภัณฑ์

ไม่นานมานี้ มีแพลตฟอร์มบนคลาวด์จำนวนหนึ่งปรากฏขึ้น ซึ่งช่วยให้ทีมออกแบบ สร้างต้นแบบ และทดสอบผลิตภัณฑ์ร่วมกันได้ แพลตฟอร์มเดียวกันนี้ยังสามารถจัดทำ UI Style Guides และทำให้สมาชิกในทีมสามารถแลกเปลี่ยนความคิดเห็นและข้อเสนอแนะอย่างต่อเนื่อง

มาดูกันว่าบางแพลตฟอร์มเหล่านี้อธิบายแนวทางของพวกเขากับ UI Style Guides อย่างไร

ฟิกม่า

“สร้างระบบการออกแบบที่มีองค์ประกอบ UI ที่เชื่อมโยงกันซึ่งทั้งทีมสามารถใช้ได้ รับการอัปเดตเมื่อมีการเปลี่ยนแปลงส่วนประกอบที่ใช้ร่วมกัน”

เฟส

“ไลบรารี่ที่ควรจะเป็น: สี คุณสมบัติ & องค์ประกอบ…แม้กระทั่งจังหวะการเปลี่ยนภาพ — ทุกอย่างในองค์ประกอบตอนนี้ แก้ไขเรียบร้อย—ทุกอย่างล้วนเป็นผู้เชี่ยวชาญ แทนที่สิ่งที่คุณไม่ต้องการ ต่ออินสแตนซ์”

InVision

“ส่วนประกอบแบรนด์และ UX ทั้งหมด รวมถึงเอกสารการใช้งาน ได้รับการจัดการในที่เดียว การเปลี่ยนแปลงจะซิงค์กับทั้งทีม และนักออกแบบสามารถสลับไปใช้เวอร์ชันล่าสุดหรือย้อนกลับการอัปเดตได้ทุกเมื่อ”

วัสดุ.io

“สร้างธีม Material ของคุณเองและสร้างไลบรารีสัญลักษณ์ของแบรนด์โดยใช้การเปลี่ยนแปลงสไตล์กับสี รูปร่าง และการพิมพ์ แชร์ อัปโหลด และนำเสนอการออกแบบซ้ำในแกลเลอรี จากนั้นใช้โหมดตรวจสอบเพื่อเข้าถึงเอกสารของนักพัฒนา”

คู่มือสไตล์ UI ควรใช้งานง่าย

เมื่อประกอบ UI Style Guides จะไม่สามารถรับการสื่อสารได้ ทีมผลิตภัณฑ์ประกอบด้วยผู้คนจากหลากหลายสาขาวิชา ภูมิหลังทางวัฒนธรรม และประสบการณ์ทางวิชาชีพ ใช้หลักการเหล่านี้เพื่อความชัดเจนและใช้งานง่าย

เลย์เอาต์ที่เรียบง่าย

UI Style Guides ต้องการเลย์เอาต์หน้าจอที่สะอาดและไม่กระจัดกระจาย แต่ละหน้าจอควรได้รับการจัดระเบียบอย่างดี มีป้ายกำกับชัดเจน และอ่านง่าย หน้าจอที่โหลดมากเกินไปพร้อมข้อมูลภาพไม่มีประโยชน์ ดังนั้นให้ตั้งเป้าให้มีการจัดเตรียมที่มีทั้งขนาดเล็กและกว้างขวาง

คำแนะนำสั้น ๆ

ทำตามคำแนะนำที่สั้นและไพเราะ หลีกเลี่ยงย่อหน้าที่ยาวและใช้หัวข้อย่อย หากเป็นไปได้ สาธิตด้วยภาพมากกว่าคำพูด

สถานการณ์การใช้ข้อมูล

สงสัยว่าเมื่อใดควรใช้ตัวเลื่อนสไตล์นี้กับตัวเลื่อนนั้น? 'ใช้สถานการณ์' แก้ไขความสับสนประเภทนี้ อีกครั้ง ภาพจริงแข็งแกร่งกว่าคำพูดที่นี่ ดังนั้นให้ตัวอย่างที่แสดงให้เห็นอย่างชัดเจนทั้งสถานการณ์สมมติและเส้นทางที่ถูกต้องไปข้างหน้า

ประวัติเวอร์ชันที่เกี่ยวข้อง

ผลิตภัณฑ์ดิจิทัลมีการอัปเดตบ่อยครั้ง เนื่องจากทีมผลิตภัณฑ์ต้องการปรับปรุงทุกรายละเอียดของอินเทอร์เฟซล่าสุด การเก็บบันทึกอย่างต่อเนื่องว่าองค์ประกอบการออกแบบมีการพัฒนาไปอย่างไร ใช้ดุลยพินิจที่นี่—สำหรับธุรกิจขนาดเล็กและทีมผลิตภัณฑ์ การดูแลรักษาไลบรารีประวัติเวอร์ชันที่กว้างขวางอาจไม่สามารถทำได้

คู่มือสไตล์ UI เป็นทรัพยากรที่มีค่าและเครื่องมือออกแบบที่ทรงพลัง

ทีมออกแบบและพัฒนาร่วมสมัยให้ความสำคัญกับประสิทธิภาพและการทำงานร่วมกันแบบสหสาขาวิชาชีพ ซึ่งเห็นได้จากระบบภาษาการออกแบบที่ได้รับการขนานนามจากแบรนด์ใหญ่ๆ เช่น MailChimp, Google และ Salesforce

ระบบภาษาการออกแบบช่วยให้ทีมงานที่หลากหลายที่ทำงานเกี่ยวกับผลิตภัณฑ์ดิจิทัลที่ซับซ้อนสามารถสื่อสารโดยใช้ภาษาภาพที่เป็นมาตรฐานได้ UI Style Guides ถูกถักทอเข้าไปในโครงสร้างของระบบภาษาการออกแบบและทำหน้าที่เป็นเครื่องมือที่ไว้วางใจได้สำหรับการทำซ้ำอย่างรวดเร็วและประสบการณ์ดิจิทัลที่สอดคล้องกัน

ในขณะเดียวกัน การออกแบบไม่ใช่การแสวงหาที่สงวนไว้สำหรับบริษัทขนาดใหญ่เท่านั้น ทีมผลิตภัณฑ์และโครงการดิจิทัลที่หลากหลายจะได้รับประโยชน์จาก UI Style Guides ที่สร้างขึ้นมาอย่างดี แต่ทรัพยากร (การเงิน เวลา และความสามารถ) แตกต่างกันไปในแต่ละธุรกิจ

ด้วยเหตุนี้ UI Style Guides จึงมีประโยชน์มากที่สุดเมื่อได้รับการปรับให้เข้ากับความต้องการของแต่ละธุรกิจและทีมออกแบบ จุดมุ่งหมายสูงสุดของ UI Style Guide ทุกรายการคือความสมดุลของความชัดเจนและการใช้งานจริงซึ่งนำไปสู่ประสบการณ์ผู้ใช้ที่น่าพึงพอใจอย่างต่อเนื่อง

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• ลักษณะแบบอักษรสำหรับเว็บและการออกแบบสิ่งพิมพ์
• การออกแบบที่ตอบสนอง – แนวปฏิบัติและข้อควรพิจารณาที่ดีที่สุด
• ทำไมสตาร์ทอัพต้องมี Styleguide
• แนวทางปฏิบัติที่ดีที่สุดในการใช้งานไอคอนและการออกแบบ
• ใช้แรงบันดาลใจของคุณ – A Guide to Mood Boards