การออกแบบระบบ UI แบบแยกส่วนผ่านการพัฒนาที่ขับเคลื่อนด้วยคำแนะนำสไตล์

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

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

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

การออกแบบโมดูลาร์ใน UI

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

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

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

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

นี่คือสิ่งที่โมดูลาร์นำมาสู่การออกแบบ UI: นำไปสู่ระบบที่ ยืดหยุ่น ปรับขนาดได้ และประหยัดต้นทุน แต่ยัง ปรับแต่งได้ ใช้ซ้ำได้ และสม่ำเสมอ

ตัวอย่างการออกแบบโมดูลาร์

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

นี่เป็นเนื้อเดียวกันหรือไม่?

หากการออกแบบโมดูลาร์เป็นเรื่องเกี่ยวกับการออกแบบระบบ และระบบ UI ส่วนใหญ่ประกอบด้วยส่วนเดียวกัน (ปุ่ม แบบอักษร ไอคอน กริด ฯลฯ) คุณอาจสงสัยว่า:

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

แม้ว่าคำถามเหล่านี้จะใช้ได้จริง แต่ก็ทำให้เกิดคำถามแฝงอยู่ว่า: นวัตกรรมและเอกลักษณ์ในการออกแบบผลิตภัณฑ์อยู่ที่ใด การอภิปรายนี้มีขึ้นเมื่อเร็วๆ นี้ (ดู “The Unbearable Homogeneity of Design” และ “In Defense of Homogeneous Design”) แต่ฉันจะบอกว่าเพราะการออกแบบภาพคือสิ่งที่เราเห็นในตอนแรก เรามักจะคิดว่านวัตกรรมและเอกลักษณ์อยู่ใน รูปลักษณ์ของการออกแบบ อย่างไรก็ตาม การออกแบบภาพเป็นเพียงส่วนหนึ่งเท่านั้น นวัตกรรมและเอกลักษณ์ในการออกแบบผลิตภัณฑ์จำเป็นต้องคำนึงถึงในผลิตภัณฑ์ทั้งหมด: ในคุณค่าที่แท้จริงที่ผลิตภัณฑ์มีให้และในวิธีที่ผู้คนได้รับประสบการณ์ ซึ่งรวมถึงรูปลักษณ์ภายนอกด้วย นั่งเก้าอี้ จำเป็นต้องเป็นเก้าอี้ แต่การออกแบบเก้าอี้ไม่ได้มีลักษณะ สัมผัส หรือทำงานเหมือนกันทั้งหมด อันที่จริงแล้ว การออกแบบเก้าอี้เป็นนวัตกรรมด้านการออกแบบและวัสดุมาแต่โบราณ ในทำนองเดียวกัน UI มีความต้องการของตนเอง และการใช้รูปแบบที่ได้รับการพิสูจน์แล้วว่าใช้งานได้ไม่ได้หมายความว่าต้องเสียสละนวัตกรรมและเอกลักษณ์ ในทางกลับกัน นวัตกรรมและเอกลักษณ์จำเป็นในการแก้ปัญหาเฉพาะที่ลูกค้าของคุณมี ความงามของการออกแบบโมดูลาร์คือการกระตุ้นให้เราเข้าหาโซลูชันเหล่านี้ในฐานะระบบของชิ้นส่วนที่เชื่อมต่อถึงกัน แทนที่จะค้นหาโซลูชันดั้งเดิมด้วยวิธีที่แยกออกมาเพื่อความแตกต่าง กล่าวอีกนัยหนึ่ง การออกแบบที่เป็นนวัตกรรมใหม่ที่ใช้กับการควบคุม UI จะไม่ถูกผลักไสให้อยู่ในที่เดียวในแอปพลิเคชัน แต่จะแทรกซึมไปทั่วทั้งระบบ รักษาการทำงานร่วมกันและปรับปรุงการใช้งาน

ความเป็นโมดูลของการพัฒนาไกด์-ไดรฟ์สไตล์

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

(จะเป็นอย่างไรถ้าไม่มีไกด์สไตล์ อย่าเพิ่งหงุดหงิด! ผมจะแสดงให้คุณเห็นในส่วนถัดไปถึงวิธีการออกแบบในแบบโมดูล แม้ว่าคุณจะไม่ได้ใช้ไกด์สไตล์ก็ตาม)

ขั้นต่อไปของการพัฒนาที่ขับเคลื่อนด้วยคำแนะนำอย่างมีสไตล์คือ ระยะ นามธรรม ซึ่งโดยพื้นฐานแล้วคือการฝึกแบ่งโซลูชันการออกแบบออกเป็นส่วนย่อยๆ ในระหว่างขั้นตอนนี้ นักออกแบบและนักพัฒนาจะทำงานร่วมกันเพื่อแยกแยะการออกแบบที่เสนอและระบุองค์ประกอบและส่วนประกอบ (เช่น โมดูล) ที่จะใช้หรือปรับปรุง หรือจะต้องสร้างขึ้นเพื่อการใช้งาน

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

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

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

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

ตอนนี้เราได้ระบุแนวคิดพื้นฐานของการออกแบบโมดูลาร์และการพัฒนาที่ขับเคลื่อนด้วยคำแนะนำรูปแบบแล้ว มานำไปใช้กัน

การออกแบบในแบบโมดูลาร์

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

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

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

เจาะลึกลงไปอีกหน่อย เราจะพบรูปแบบและรูปแบบการโต้ตอบ:

• รูปแบบ:

• สีที่ใช้เพื่อแสดง:

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

• วิชาการพิมพ์ที่ใช้เพื่อแสดงเนื้อหาประเภทต่างๆ:

  • ขนาดตัวอักษรสำหรับจัดวางข้อมูลตามลำดับชั้น
  • แบบอักษรสำหรับเน้นข้อความหรือให้ข้อมูลเพิ่มเติม
  • รายการสรุปข้อมูล

• เพเกินเพื่อถ่ายทอดความหมายทางภาพและเพื่อการอ้างอิงอย่างรวดเร็วถึงการกระทำทั่วไป

• รูปแบบการโต้ตอบ:

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

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

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

1. เราเริ่มต้นจาก อะตอม ซึ่งเป็นโมดูลที่เล็กที่สุดในระบบ (ในตัวอย่างของเราคือ ปุ่ม การพิมพ์ และการยึดถือ)
2. โมดูลเติบโตอย่างซับซ้อน โดยผูกเข้าด้วยกันเป็น โมเลกุล ซึ่งให้การทำงานที่มากขึ้น (ในตัวอย่างของเรา ตัวบ่งชี้ขั้นตอนการชำระเงิน และโมดูลผลิตภัณฑ์ที่เกี่ยวข้อง)
3. จากนั้นมี สิ่งมีชีวิต ซึ่งเป็นโมเลกุลที่รวมกลุ่มเข้าด้วยกันในแอปพลิเคชัน (ในตัวอย่างของเรา ส่วนหัวของแอปพลิเคชันและรูปแบบต่างๆ)
4. ออกจากการเปรียบเทียบทางเคมี ระดับถัดไปคือ เทมเพลต ซึ่งเป็นโครงสร้างที่กำหนดไว้ล่วงหน้าซึ่งวางสิ่งมีชีวิตไว้
5. สุดท้าย มี เพจ ซึ่งเป็นอินสแตนซ์ของเทมเพลต

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

การใช้แนวทางการใช้ชีวิต

คู่มือรูปแบบการใช้ชีวิตมีประโยชน์มากในระหว่างขั้นตอนการออกแบบ เพราะมีหลายอย่าง

พื้นฐานในการทำงานด้วย

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

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

เอกสารประกอบของโซลูชั่นการออกแบบ

ความรู้ที่ได้รับมาเพื่อแก้ไขปัญหา UI หรือ UX โดยเฉพาะสามารถฝากไว้เพื่อใช้ในภายหลังได้

ซึ่งจะช่วยรักษาความสม่ำเสมอในการใช้งาน กระตุ้นให้คุณปรับโซลูชันใหม่ให้เข้ากับส่วนหนึ่งของการออกแบบปัจจุบัน

คุณจะได้พัฒนารูปแบบที่ผู้ใช้คุ้นเคย ซึ่งจะช่วยเพิ่มความสามารถในการใช้งาน

ง่ายต่อการสื่อสาร

คู่มือนี้ช่วยในการสื่อสารการออกแบบโดยการนำเสนอ UI ที่เป็นปัจจุบันที่สุด

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

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

• “ภาพรวมเชิงลึกของเครื่องมือแนะนำรูปแบบการใช้ชีวิต” Robert Haritonov, Smashing Magazine
• “ภาพรวมของ Pattern Library Generators” David Hund, GitHub
• “Style Guide Generator Roundup” Susan Robertson, A List Apart

อย่าใช้ให้สุด!

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

คู่มือสไตล์ไม่ได้แทนที่งานออกแบบ

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

• จะต้องสร้างคุณสมบัติใหม่อย่างต่อเนื่อง
• การหาวิธีแก้ปัญหาเกี่ยวข้องกับการตัดสินใจออกแบบ

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

อย่าทำตามแบบแผนจนสุดโต่ง

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

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

อย่ามองข้ามการออกแบบซ้ำๆ

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

ภาระการบำรุงรักษา

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

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

ออกแบบโมดูลาร์เพื่อสร้างโมดูลาร์

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

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