Checklist for Better UI
UI design หรือ User Interface Design คือการออกแบบที่มุ่งเน้นไปยังความต้องการของผู้ใช้งานในแง่ของดีไซน์ เช่น การวางภาพ ขนาดตัวอักษร แพลตฟอร์ม หน้าจอเมนูต่าง ๆ แบบที่เรามองเห็นได้ด้วยตา ซึ่งการออกแบบส่วนนี้จะต้องทำให้สามารถเข้าถึงได้ง่าย เข้าใจง่าย และต้องมีความสวยที่ทันสมัย และสามารถสื่อถึงอัตลักษณ์ของตนเองได้เป็นอย่างดี พูดง่าย ๆ ว่า การออกแบบ UI นั้นจะต้องคำนึงฟังก์ชั่นการใช้งานที่ตอบสนองความต้องการของผู้ใช้ได้เป็นอย่างดี และจะต้องดูสวยงามไปในเวลาเดียวกัน
แล้วการออกแบบที่ดีควรเป็นแบบไหนล่ะ? ถ้าพูดถึงความสวยงามก็คงไม่มีอะไรที่ถูกหรือผิด แต่การออกแบบที่ดีนั้นจะทำให้ผู้ใช้งานได้รับประสบการณ์และความพึงพอใจสูงสุดนั่นเอง ซึ่งจะต้องพึ่งพาหลักการออกแบบหลายข้อเลยทีเดียว
วันนี้ More Studio เลยรวบรวมหลักการออกแบบ UI ที่จะช่วยพัฒนาหน้างานออกแบบของคุณให้ดีขึ้น ลองไปสำรวจกัน!
การออกแบบ Typography ที่ดี ไม่ควรใช้ฟอนต์มากกว่า 2 แบบขึ้นไป และควรให้ความสำคัญกับน้ำหนักของฟอนต์ให้ดี ควรจะแยกน้ำหนักตามความสำคัญของข้อความ และควรย่อยข้อความให้สั้นและกระชับมากที่สุดเท่าที่จะเป็นได้ แต่ถ้าจำเป็นจะต้องมีข้อความเยอะ ๆ แบบยาวเหยียดทำให้ตัวอักษรติดกันเกินไป ก็ควรปรับ Tracking หรือ Line Hieght ให้พอดีมากขึ้น เพื่อที่จะทำให้อ่านง่ายมากขึ้นนั่นเองจ้า ถ้าอยากรู้เรื่องการออกแบบ Typography อย่างละเอียดมากขึ้นล่ะก็ สามารถเข้าไปอ่านได้ที่
UI ที่ดีควรมีพื้นที่ ‘Negative Space’ หรือที่ว่างไว้หายใจบ้าง (เยอะ ๆ เลยก็ดี) พื้นที่ว่างจะช่วยทำให้เราแยก Elements ต่าง ๆ ได้ชัดเจนมากขึ้น ทำให้เกิดจังหวะและความสมดุลที่ดี
การออกแบบทุกอย่างควรอ้างอิงจากเส้นกรอบ และ Grid เป็นหลัก จะทำให้งานดีไซน์ดูสะอาดและเป็นระเบียบมากขึ้น
การวาง Element ต่าง ๆ ไว้รวมกันใช่ว่าจะวางได้อย่างอิสระ เราควรคำนึงถึงความสำคัญของชุดข้อมูลต่าง ๆ ให้ดี ว่าควรเริ่มจากอะไร พยายามยึดจาก Layout ที่คุ้นตา อ่านง่ายและพบเห็นได้ทั่วไป
สีที่ใช้ไม่ควรเยอะมากเกินกว่า 3 สี โดยแบ่งให้เป็นสีหลัก 70% สีรอง 20% และสีเน้นอีก 10 % และควรใช้สีที่มีความสอดคล้องตามคอนเซปต์ และให้ภาพลักษณ์ที่สื่อถึงอัตลักษณ์ของแบรนด์หรือไซต์นั้น ๆ
การใส่เงาไว้ที่ใต้ Object จะช่วยให้งานมีความตื้นลึก ดูมีความเป็น 3 มิติมากขึ้น แต่ไม่ใช่ว่าพอเห็นว่ามันสวยแล้วเราจะใส่มันไว้ทุกที่เลยก็ไม่ได้นะ ควรดูความเหมาะสมให้ดีว่าควรจะใส่ไว้ใต้ Object ไหนและที่สำคัญ เงาไม่ควรจะเป็นสีดำนะ ! เงาใต้ Object ควรจะเป็นสีที่เข้มขึ้นของ Background จะช่วยให้เงานั้นดูเป็นธรรมชาติขึ้น และไม่หลอกตานั่นเอง
การใช้ไอคอนสื่อสารแทนข้อความเป็นส่วนประกอบที่สำคัญมาก เพราะจะทำให้งานไม่น่าเบื่อจนเกินไป เราควรเลือกชุดไอคอนที่เป็น Style เดียวกัน (สี, น้ำหนักเส้นควรจะเท่ากัน) ไฟล์ที่แนะนำให้ใช้ในตัวงานก็คือไฟล์ vector นามสกุล .SVG หรือถ้าใช้เป็น PNG ก็ควรเป็นไฟล์ที่มีขนาดเหมาะสม ไม่เช่นนั้นจะทำให้ภาพแตกได้นะจ้ะ (รวมถึงรูปภาพต่าง ๆ ในงานด้วยนะ !)
บางครั้งการยึดติดหลักการมากเกินไปอาจจะทำให้งานดูน่าเบื่อไปหน่อย การเพิ่มลูกเล่นด้วย งาน Illustrate (ภาพประกอบ), Motion คูล ๆ หรือ Pattern สวย ๆ มาตัดมู้ดก็เป็นตัวเลือกที่ดีเลยทีเดียว เพราะจะช่วยดึงดูดความสนใจของผู้ใช้และช่วยให้งานดีไซน์ของเราดูเข้าใจง่ายมากขึ้นด้วย
