คู่มือการออกแบบ UI ขั้นสูงสุด

เนื้อหา

• 01. เลือกตัวอักษรของคุณ
• 02. เลือกจานสีที่เหมาะสม
• 03. สไตล์ลิงค์และปุ่ม
• 04. สร้างส่วนประกอบของคุณ
• 05. จัดทำเอกสารและทำงานร่วมกัน

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

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

01. เลือกตัวอักษรของคุณ

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

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

ตัวพิมพ์ "สวย" เป็นสิ่งที่น่าเกลียดจริงๆเมื่ออ่านไม่ออกเพราะความหงุดหงิดมักจะมีความสวยงามมากกว่า การออกแบบที่ยอดเยี่ยมมีความสมดุลและกลมกลืน

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

เมื่อพูดถึงความชัดเจนและความสามารถในการอ่านขนาดฟอนต์ขั้นต่ำที่ยอมรับได้ตามที่กำหนดโดยแนวทางการเข้าถึงเนื้อหาเว็บ WCAG 2.0 คือ 18pt (หรือตัวหนา 14pt) ขนาดตัวอักษรที่ดีที่สุดที่จะใช้ส่วนใหญ่ขึ้นอยู่กับตัวอักษร แต่สิ่งสำคัญคือต้องคำนึงถึงลำดับชั้นของภาพและวิธีที่ขนาดฐานนี้แยกความแตกต่างจากบทสรุปและส่วนหัว (เช่น h1>, h2>, h3>).

ด้วยเครื่องมือออกแบบ UI ที่คุณเลือก (เราจะใช้ InVision Studio) สร้างชุดของเลเยอร์ข้อความ (ที) จากนั้นปรับขนาดทั้งหมดให้สัมพันธ์กับเทมเพลตต่อไปนี้:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

ด้วย InVision Studio (และเครื่องมือออกแบบ UI อื่น ๆ ทั้งหมด) สามารถทำได้โดยการปรับสไตล์โดยใช้แผงตัวตรวจสอบทางด้านขวามือ

จากนั้นเลือกแบบอักษรของคุณ แต่ระวังเพราะสิ่งที่คุณอาจสังเกตเห็นในบางฟอนต์คือ 18px p> และ 22px h3> ดูไม่แตกต่างกันทั้งหมด เรามีสองทางเลือก: ปรับขนาดแบบอักษรหรือพิจารณาแบบอักษรอื่นสำหรับส่วนหัว ถ้าคุณคาดหวังว่าการออกแบบของคุณจะหนักไปทางข้อความ

โปรดทราบว่า:

• การออกแบบ Visual UI มักเป็นแนวทางที่ให้ความรู้สึก
• ไม่มีอะไรตัดสินใจ; ทุกอย่างอาจมีการเปลี่ยนแปลง

ความสูงของเส้น

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

อีกครั้ง WCAG ช่วยเราในเรื่องนี้โดยประกาศว่าความสูงของบรรทัดควรเป็น 1.5 เท่าของขนาดตัวอักษร ดังนั้นในเครื่องมือออกแบบ UI ของคุณภายใต้ "เส้น" (หรือคล้ายกัน) ให้คูณขนาดตัวอักษรด้วย - อย่างน้อย - 1.5 ตัวอย่างเช่นหากข้อความเนื้อหามีขนาด 18px ความสูงของบรรทัดจะเป็น 27px (18 * 1.5 - คุณสามารถดำเนินการคำนวณทางคณิตศาสตร์ได้โดยตรงในตัวตรวจสอบ) แต่ขอย้ำอีกครั้งว่าหาก 1.6x รู้สึกว่าพอดีกว่าให้ใช้ 1.6x โปรดจำไว้ว่าแบบอักษรที่แตกต่างกันจะให้ผลลัพธ์ที่แตกต่างกัน

ยังเร็วเกินไปที่จะคิดเกี่ยวกับการใช้ข้อมูลจริงในการออกแบบของเรา แต่อย่างน้อยที่สุดเราควรใช้ข้อมูลที่ค่อนข้างเป็นจริง (แม้แต่ lorem ipsum) InVision Studio มีแอปข้อมูลจริงในตัวเพื่อช่วยให้เราเห็นว่าตัวอักษรของเราอาจมีลักษณะอย่างไร

ระยะห่างของย่อหน้า

การเว้นวรรคไม่ใช่รูปแบบที่เราประกาศได้โดยใช้ InVision Studio’s Inspector แต่เราจะต้องจัดเรียงเลเยอร์ด้วยตนเองโดยใช้ Smart Guides (⌥) เช่นเดียวกับความสูงของเส้นตัวคูณเวทย์มนตร์คือ 2x (สองเท่าของขนาดตัวอักษร) ตัวอย่างเช่นหากขนาดตัวอักษรคือ 18px ควรมีช่องว่างอย่างน้อย 36px ก่อนที่จะนำไปสู่บล็อกข้อความถัดไป ระยะห่างของตัวอักษรควรมีอย่างน้อย 0.12

อย่างไรก็ตามเราไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้จนกว่าเราจะเริ่มสร้างส่วนประกอบ

รูปแบบที่ใช้ร่วมกัน

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

02. เลือกจานสีที่เหมาะสม

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

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

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

01. สตาร์ค
ปลั๊กอิน Stark เข้ากันได้กับ Sketch และ Adobe XD และช่วยให้คุณตรวจสอบความคมชัดของสีและจำลองตาบอดสีได้โดยตรงจากผืนผ้าใบ รองรับ Figma และ InVision Studio เร็ว ๆ นี้
02.สี
สีคือชุดสี 90 ชุดที่มีความคมชัดของสีในปริมาณที่เหมาะสมเพื่อให้เป็นไปตามแนวทางของ WCAG 2.0 - บางสีสามารถจัดการได้เพื่อให้เป็นไปตามมาตรฐาน AAA
03. โครงการ A11y
โครงการ A11y เป็นศูนย์กลางขนาดใหญ่สำหรับทุกสิ่งที่เกี่ยวข้องกับการเข้าถึง ประกอบด้วยทรัพยากรเครื่องมือเคล็ดลับบทช่วยสอนและสร้างขึ้นโดยผู้สร้างปลั๊กอิน Stark และได้รับเงินทุนจาก InVision

ทั้งสามประเภทของสี

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

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

สิ่งนี้เปิดใช้งานสิ่งต่อไปนี้:

• โหมดมืดจะสามารถทำได้อย่างง่ายดาย
• สี CTA ของเราจะไม่ขัดแย้งกับสีอื่น ๆ
• ไม่ว่าในสถานการณ์ใด ๆ เราจะสามารถเน้นย้ำและไม่เน้นย้ำได้

ตั้งค่าจานสีของคุณ

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

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

ความคมชัด

ต่อไปเราจะต้องตรวจสอบสีของเราเพื่อให้ได้ความคมชัดของสีที่เหมาะสมที่สุด มีเครื่องมือมากมายที่สามารถทำได้เช่นปลั๊กอิน Stark สำหรับ Sketch และ Adobe XD หรือ Contrast สำหรับ macOS อย่างไรก็ตามโซลูชันออนไลน์เช่น Contrast Checker หรือ Color Contrast Checker ก็ทำได้ดี

ตรวจสอบความคมชัดของสีสำหรับแต่ละชุดค่าผสมและปรับแต่งสีให้เหมาะสม หากคุณไม่แน่ใจว่าจะใช้สีอะไรให้ลองใช้คำแนะนำของ Color Safe

03. สไตล์ลิงค์และปุ่ม

ขนาด

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

การทดสอบความสามารถในการจ่ายด้วยภาพคือการทดสอบการใช้งานที่ใช้เพื่อตรวจสอบว่าเป้าหมายการแตะดูเหมือนจะคลิกได้หรือไม่ ซิงค์การออกแบบจาก Studio ไปยัง Freehand (⌘⇧F) ส่ง URL ผลลัพธ์ให้กับผู้ทดสอบและให้พวกเขาวนองค์ประกอบที่เชื่อว่าคลิกได้

ผู้ใช้ที่ไม่ใช่ InVision Studio สามารถใช้ Freehand ได้เช่นกัน แต่ผู้ใช้ InVision Studio สามารถเปิดใช้งานการออกแบบของพวกเขาเป็น Freehand ได้อย่างราบรื่นจาก InVision Studio ซึ่งเป็นวิธีที่เร็วและมีประสิทธิภาพที่สุดในการรับการตอบรับด้วยภาพจากผู้ใช้

โดยทั่วไปเราขอแนะนำให้ประกาศข้อความปุ่มเป็น 18px (เช่นเดียวกับข้อความเนื้อหา) แต่ปุ่มนั้นมีขนาดสามรูปแบบ:

• ปกติ: ความสูง 44px (มุมมน: 5px)
• ใหญ่: ความสูง 54px (มุมมน: 10px)
• ขนาดใหญ่พิเศษ: ความสูง 64px (มุมมน: 15px)

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

ความลึก

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

การโต้ตอบ

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

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

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

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

04. สร้างส่วนประกอบของคุณ

ส่วนประกอบช่วยประหยัดเวลาได้มากและเครื่องมือออกแบบ UI ทั้งหมดมีคุณลักษณะนี้ (เช่นใน Sketch จะเรียกว่า Symbols) ใน Studio เราสามารถสร้างคอมโพเนนต์ได้โดยเลือกเลเยอร์ทั้งหมดที่ควรประกอบเป็นส่วนประกอบและใช้⌘เค ทางลัด.

การใช้ส่วนประกอบ

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

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

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

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

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

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

ใช้กฎของเรา

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

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

การทดสอบความเครียด

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

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

05. จัดทำเอกสารและทำงานร่วมกัน

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

สี

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

ไลบรารีที่ใช้ร่วมกัน

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

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

InVision Studio ค่อนข้าง จำกัด ในแง่ที่ยังไม่ได้ซิงค์กับเครื่องมือ Design System Manager อย่างเป็นทางการของ InVision แต่ง่ายพอที่จะจัดเก็บไลบรารีไว้ใน Dropbox เพื่อให้นักออกแบบรายอื่นใช้และอัปเดตเมื่อเวลาผ่านไป เมื่อทำการเปลี่ยนแปลง (ในเครื่องหรือจากระยะไกล) ไฟล์ Studio ทุกไฟล์ที่ใช้ไลบรารี (อีกครั้งในเครื่องหรือจากระยะไกล) จะถามว่าคุณต้องการอัปเดตสีและส่วนประกอบหรือไม่ นี่คือวิธีดูแลไลบรารีการออกแบบระหว่างทีม

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

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

ออกแบบตามขนาด

เมื่อการออกแบบขยายออกไปการจัดการก็ยากขึ้น มีการปรับเปลี่ยนหลายอย่างที่เราอาจต้องการเพื่อให้มีประสิทธิภาพและบำรุงรักษาได้โดยเฉพาะอย่างยิ่งเนื่องจาก DSM ของ InVision ยังใช้กับ Studio ไม่ได้

ตัวอย่างเช่นเราอาจต้องการใช้เลเยอร์ข้อความเพื่อใส่คำอธิบายประกอบไลบรารีของเราเพื่ออธิบายกรณีการใช้งานขององค์ประกอบต่างๆ สำหรับรูปแบบการพิมพ์เรายังสามารถแก้ไขข้อความให้สื่อความหมายได้มากขึ้น (เช่น "h1> / 1.3 / 44px") นี่บอกว่า h1>s ควรเป็น 44px และมีความสูงของเส้น 1.3

ออกแบบ Handoff

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

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

เนื้อหานี้เคยปรากฏในนิตยสารเน็ต