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

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

ในปีพ. ศ. 2519 จอห์นนี่แคชเปิดตัว ครั้งละหนึ่งชิ้น เพลงที่บอกเล่าเรื่องราวของคนงานรถยนต์ในเมืองดีทรอยต์ที่ใช้เวลายี่สิบปีในการรวบรวมชิ้นส่วนคาดิลแลคที่ขโมยมาจากสายการประกอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

เค้าโครงที่ตอบสนอง

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

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

จานสี

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

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

ปุ่มต่างๆ

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

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

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

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

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

สารบัญ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Figma

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

เฟส

“ ไลบรารีที่ควรเป็นมาโดยตลอด: สีคุณสมบัติและองค์ประกอบ…แม้กระทั่งช่วงเวลาการเปลี่ยนแปลง - ทุกอย่างในองค์ประกอบตอนนี้ แก้ไขในสถานที่ทุกอย่างเป็นหลัก ลบล้างสิ่งที่คุณไม่ต้องการต่ออินสแตนซ์”

InVision

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

Material.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 ทั้งหมดคือความสมดุลของความชัดเจนและการใช้งานจริงที่นำไปสู่ประสบการณ์การใช้งานที่น่าพึงพอใจอย่างต่อเนื่อง

•••

อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:

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

ทำความเข้าใจพื้นฐาน

คำแนะนำสไตล์การสร้างแบรนด์คืออะไร?

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

เหตุใดการมีไกด์สไตล์จึงสำคัญ

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

ข้อมูลโค้ดคืออะไรและจะใช้อย่างไร

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