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

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

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

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

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

PART 1 — เรามาเริ่มกันใหม่ตั้งแต่ต้น

ขั้นตอนแรกสำคัญ: การเลือกคุณสมบัติเหนือเค้าโครง

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

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

แอปพลิเคชันคือกลุ่มของคุณสมบัติโดยพื้นฐานแล้ว

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

รายละเอียดรอได้

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

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

เลือกเสียงการออกแบบของคุณ

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

แม้ว่าอาจฟังดูเป็นนามธรรม แต่การกำหนดบุคลิกภาพให้กับการออกแบบนั้นมีพื้นฐานมาจากปัจจัยที่มั่นคงและเป็นรูปธรรม :-

ตัวเลือกแบบอักษร

การออกแบบตัวอักษรมีส่วนสำคัญในการกำหนดความรู้สึกของการออกแบบ

• หากคุณต้องการรูปลักษณ์ที่หรูหราหรือคลาสสิก คุณอาจต้องการใช้แบบอักษรเซอริฟในการออกแบบของคุณ:

• เพื่อให้ดูขี้เล่น คุณสามารถใช้ sans serif แบบโค้งมน:

• หากคุณต้องการลุคที่ดูเรียบๆ หรือต้องการพึ่งพาองค์ประกอบอื่นๆ เพื่อสร้างบุคลิก sans serif ที่เป็นกลางจะทำงานได้ดี:

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

• สีฟ้าปลอดภัยและคุ้นเคย — ไม่มีใครเคยบ่นเกี่ยวกับสีน้ำเงิน:

• ทองคำอาจกล่าวได้ว่า “แพง” และ “ซับซ้อน”
• สีชมพูสนุกกว่าเล็กน้อยและไม่จริงจังนัก

การปัดเศษมุมในการออกแบบอาจดูเหมือนเป็นรายละเอียดเล็กน้อย แต่สามารถส่งผลต่อความรู้สึกและความสวยงามโดยรวมได้อย่างมาก

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

ใช้ระบบการออกแบบที่กำหนดไว้ล่วงหน้า

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

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

• กำหนดระบบล่วงหน้า

อย่าใช้ตัวเลือกสีทุกครั้งที่ต้องเลือกเฉดสีม่วงใหม่ — เลือกจากชุด 8-10 เฉดสีที่เลือกไว้ล่วงหน้า

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

• ออกแบบโดยกำจัด

เริ่มต้นด้วยการเดาว่าขนาดใดจะทำงานได้ดีที่สุด อาจเป็น 16px จากนั้นเปรียบเทียบกับตัวเลือกที่ด้านใดด้านหนึ่ง เช่น 12px และ 24px โดยทั่วไปแล้ว 2 ใน 3 ตัวเลือกจะดูด้อยกว่าอย่างชัดเจน หากตัวเลือกรองลงมาอยู่ที่ปลายด้านนอก ตัวเลือกตรงกลางก็น่าจะเป็นตัวเลือกที่ดีที่สุด

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