บทความ IT เจ๋งๆ

6 UI Concepts ที่จะช่วยให้คุณเก่งด้าน Front End ยิ่งขึ้น

30-ก.ค.-21

คัมภีร์เทพ IT

หากคุณต้องออกแบบ User Interface หรือ UI ถือว่ามีความสำคัญไม่น้อยไปกว่าการพัฒนา Back End เนื่องจาก UI จะเป็นสิ่งผู้ใช้งานจะเห็นเป็นด่านแรก ดังนั้นการทำให้ Website หรือ Application ของคุณสวยงามน่าใช้ จะสร้างความประทับใจให้กับผู้ใช้งานได้ และนี่ก็คือ 6 UI Concepts ที่จะช่วยให้คุณเก่งด้าน Front End ยิ่งขึ้น

1. เน้นจัดลำดับความสำคัญขององค์ประกอบ

ในขณะที่พัฒนา Frontend ของ Application ของคุณ ให้ตรวจสอบให้แน่ใจว่าคุณยึดถือในเรื่องการจัดลำดับความสำคัญขององค์ประกอบอยู่เสมอ ไม่ว่าจะเป็น Colors, Font Weight, Font Style เป็นต้น การจัดลำดับความสำคัญที่ดี จะทำให้ Application ของคุณ ถูกรบกวนสายตาน้อยลง อีกทั้งช่วยลดปัญหาเรื่องการแข่งกันดึงดูดความสนใจของสิ่งต่างใน Interface อีกด้วย

ตัวอย่างเช่น: 

  • จาก Dashboard Page ด้านล่าง คุณจะเห็นว่าทุกอย่างมันดูกลมกลืนกันไปหมดใน Page และทำให้รู้สึกไม่ชัดเจนว่า User ควรจะ Focus ไปที่จุดใดในการเข้าชมครั้งแรก

  • ปัญหานี้สามารถแก้ไขได้ง่ายด้วยการใช้ Set ของ Font Weights, Color Hierarchy และกำหนด Border-radius ให้กับ Element ที่สำคัญ
  • เมื่อคุณสร้าง Application ด้วยการจัดลำดับความสำคัญ ผลลัพธ์ที่ได้ก็จะเป็นที่น่าพอใจมากขึ้น โดยที่ไม่ต้องเปลี่ยนแปลงหลายอย่างมากเกินไป

2. ไม่จำเป็นต้องใช้ Grey Text ทั่วไปหมด

มีบางครั้งที่เราต้องใช้ Text Colors ที่แตกต่างกันสำหรับสิ่งที่คุณให้ความสำคัญเป็นหลักและเป็นรอง และส่วนใหญ่แล้วผู้คนจะลงเอยด้วยการใช้ Text สีเทาธรรมดา ๆ กับส่วนที่สำคัญน้อยกว่า

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

เพื่อที่จะทำให้ Text ที่คุณให้ความสำคัญโดดเด่นขึ้น คุณสามารถใช้สีที่มีเฉดสี (Hue) เดียวกันได้ แต่ให้ปรับ Saturation จนกว่าจะตรงกับความต้องการของคุณ เพื่อให้เกิดความแตกต่างได้

3. การใช้ Labels

เรามักพบว่ามี Labels อยู่เกือบทุกที่ใน Application แต่คุณอาจไม่ได้ต้องการใช้ Labels ในจำนวนที่มากนัก

Front-end Developers ส่วนใหญ่ จะให้ความสำคัญกับ Labels เท่ากันทั้งหมด ซึ่งทำให้ Users ต้องใช้เวลาทำความเข้าใจนานขึ้น เนื่องจากข้อมูลต่าง ๆ มีความสำคัญเท่ากันหมด 

ดังนั้น คุณควรลองจัดระดับความสำคัญให้ Labels สำหรับส่วนต่าง ๆ ของ Application ของคุณ

ตัวอย่างเช่น: 

  • ใน E-Commerce Application นั้น หาก Items Inventory ของคุณแสดงเป็นตัวเลขตรง ๆ, Users ของคุณอาจต้องใช้เวลาในการคิดวะเคราะห์ว่า ตัวเลขเหล่านั้นมันเกี่ยวกับอะไรกันแน่
  • จงอย่าทำแบบนั้น หากคุณเพียงต้องการแค่บอก Users ของคุณว่า สิ่งที่เกี่ยวกับตัวเลขนั้น มันทำให้พวกเขารู้สึกสบายใจมากขึ้น

4. การสื่อความหมาย มีความสำคัญในลำดับรอง ๆ

มีหลายครั้ง ที่เรามีหลาย ๆ Actions ภายใน Page เดียวกัน ในสถานการณ์เช่นนี้ มันง่ายที่เราจะตกหลุมพรางของการออกแบบที่ Actions เหล่านั้นต้องการสื่อความหมาย

คนส่วนใหญ่มักจะละเลยในเรื่องการจัดลำดับความสำคัญสำหรับการสื่อความหมาย โดยเฉพาะอย่างยิ่งในขณะที่การออกแบบ Buttons ก็มีบทบาทสำคัญ เนื่องจาก Pages ส่วนใหญ่มักมี Action ที่สำคัญหลัก ๆ เพียงปุ่มเดียว, ส่วน Actions อื่น ๆ ก็ที่มีความสำคัญน้อยลงไป

ขณะออกแบบ Action Buttons เหล่านี้ ให้ตรวจสอบหัวข้อต่อไปนี้:

  • Primary Actions ควรชัดเจนที่สุด: ใช้ Background Colors เป็นสีทึบและมีความ Contrast สูง
  • Secondary Actions ควรชัดเจน: พยายามอย่าทำให้โดดเด่นเกินไป Outline Styles และ Background Colors ที่มีความ Contrast ต่ำ จะเหมาะสมอย่างยิ่งในกรณีนี้
  • Tertiary Actions ไม่ควรชัดเจนมากเกินไป: Actions ในรูปแบบนี้ อย่างเช่น Link ดูจะเหมาะสมที่สุด

หมายเหตุ: ควรให้ความสำคัญกับเรื่องการจัดลำดับความสำคัญ ในการออกแบบ Actions บน Pages อยู่เสมอ ซึ่งมันจะส่งผลให้ UI มีสิ่งรบกวนน้อยลง ซึ่งทำให้สื่อสารได้ชัดเจนยิ่งขึ้นกว่าเดิม

5. Elements ที่มีการทับซ้อนกัน

เคล็ดลับที่ดีในการทำให้ Web Applications มีความ Smooth สำหรับ Users ก็คือ การทำให้ Elements มีการทับซ้อนกัน ซึ่งสามารถทำได้ง่ายด้วยการแสดง Element หนึ่งอยู่เหนือ Elements อื่นๆ เพื่อทำให้ดูเชื่อมโยงกับทุก Elements ที่อยู่ใกล้เคียงมากขึ้น

ตัวอย่างเช่น:

  • คุณควรลองสังเกต UI Trend ลักษณะนี้ใน Applications ต่าง ๆ ที่มีในปัจจุบัน โดยที่คุณมักจะเห็น Elements ที่มีการซ้อนทับกัน ปรากฏในหน้า Web

6. การใช้ Empty Spaces

Applications บางครั้ง Features ที่ถูกเพิ่มเข้ามาใหม่ก็ไม่ได้ได้รับการออกแบบมาเป็นอย่างดี และมีเหตุผลหลายประการสำหรับสิ่งนั้น ซึ่งหนึ่งในนั้นคือ ปล่อยให้เป็น Empty Spaces

อย่าละเลย Empty Spaces เหล่านี้ใน Application ของคุณ เนื่องจาก Users จะเห็นส่วนนั้นได้ในบางจุด และพวกเขาก็มักจะรู้สึกสับสน

พยายามเพิ่ม Icons หรือ Images ที่สื่อความหมายชัดเจนใน Empty Spaces เหล่านั้น เพื่อให้ดูเป็นธรรมชาติและเข้ากับส่วนอื่นๆ ของ Application ของคุณยิ่งขึ้น

ที่มา: https://javascript.plainenglish.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ