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

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

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

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

ห้าอันดับแรกเหตุผลที่ Styleguide เป็นแนวคิดที่ดี

1. Styleguide ทำให้การออกแบบเป็นรูปธรรมและการสร้างแบรนด์ชัดเจน

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

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

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

2. Styleguide ทำให้การออกแบบของคุณสอดคล้องกันมากขึ้น

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

1. 'ฝนตก; ฉันต้องการร่ม”
2. “ ฝนตกฉันต้องการร่ม”
3. “ ฝนตกฉันต้องการร่ม”

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

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

3. การนำส่วนประกอบของระบบเดิมกลับมาใช้ใหม่ทำให้แอปของคุณใช้งานง่ายขึ้น

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

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

ฉันควรเรียนรู้โหนด js

4. Styleguide ทำให้แอปของคุณพัฒนาได้เร็วขึ้นในระยะยาว

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

5. คู่มือสไตล์อำนวยความสะดวกในประสิทธิภาพการผลิตและนวัตกรรม

การสร้าง styleguide ทำให้การออกแบบสามารถเข้าถึงได้ง่ายขึ้นและพร้อมใช้งานสำหรับส่วนที่เหลือของ บริษัท นักพัฒนาและ นักออกแบบ สามารถสร้างต้นแบบไอเดียได้เร็วขึ้นและง่ายขึ้น Bootstrap มักได้รับการยกย่องว่าทำง่าย นักพัฒนา ในการสร้างต้นแบบที่ใช้งานได้ styleguide ของคุณมีจุดประสงค์เดียวกัน เป็นพื้นฐานอ้างอิงสำหรับ UI ใหม่ที่จะสร้างโดยนักพัฒนาโดยที่ทีมออกแบบไม่ต้องสร้างหน้าจอก่อน (แม้ว่าทีมออกแบบควร QA ในหน้าจอสุดท้ายก็ตาม)

ความท้าทายของการเริ่มต้น Styleguide ใน Flux

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

เมื่อพูดถึงการสร้าง styleguide สิ่งนี้อาจกลายเป็นปัญหาได้

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

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

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

เริ่มต้นด้วยแรงบันดาลใจ UI บางอย่าง

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

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

node.js เขียนด้วยอะไร

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

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

ออกแบบส่วนประกอบ Solid UI

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

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

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

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

Styleguide เป็นเอกสารที่มีชีวิต

คุณควรนึกถึง styleguide ของคุณว่าเป็นงานที่กำลังดำเนินการอยู่ เช่นเดียวกับการเริ่มต้นที่กำลังคิดหากลยุทธ์คุณจะต้องเข้าใจสไตล์ไกด์ของคุณในขณะที่ดำเนินการไป คุณจะแก้ไขและปรับเปลี่ยนไปเรื่อย ๆ จนกว่าจะกลายเป็นรากฐานของ UI ของคุณ แนวทางหนึ่งที่มีประโยชน์คือการเริ่มต้นแบบแรกในเวลาเดียวกันกับที่คุณเริ่ม styleguide ของคุณ เปิดไฟล์สองไฟล์ด้วยซอฟต์แวร์ที่คุณชื่นชอบ (ในกรณีของฉันคือ Sketch); หนึ่งเรียกว่า page name และอีกอัน styleguide. ในขณะที่คุณกำลังออกแบบหน้าจอคุณสามารถเริ่มต้นสร้างสไตล์ไกด์ด้วยองค์ประกอบที่ประกอบกันเป็นดีไซน์ของคุณได้

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

ฉันมักจะสร้างส่วนที่เรียกว่า 'ไอคอนเสร็จแล้ว' หากถึงจุดหนึ่งที่มีคนต้องการไอคอนพวกเขาจะต้องตรวจสอบส่วนนี้ก่อนที่จะสร้างใหม่

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

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

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

สรุป

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

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

•••

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

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