7 สิ่งสำคัญ ออกแบบ UI ที่ไม่ว่าใครก็ควรรู้




  • UI หรือ User Interface มีบทบาทอย่างมากในชีวิตเรา ยิ่งในยุคที่ทุกอย่างถูกย่อลงในสมาร์ทโฟน และเว็บไซต์ การออกแบบ UI ยิ่งมีบทบาท เราจะเห็นได้ว่า Apple นั้นใส่ใจกับ UI เป็นอย่างมาก และนี่คือ 7 สิ่งสำคัญ การออกแบบ UI ที่ไม่ว่าใครก็ควรรู้

    ui-ux-design

    บทความของ Erik D. Kennedy ในชื่อ 7 Rules for Creating Gorgeous UI ได้อธิบายกฏง่ายๆ 7 ข้อที่ดูเหมือนไม่ยุ่งยากซับซ้อน แต่สำคัญสุดๆสำหรับ UI ซึ่งไม่เฉพาะ Designer เท่านั้นที่ควรรู้ ทั้งโปรแกรมเมอร์และคนออกแบบ UX ก็ต้องรู้ด้วยเช่นกัน เพราะทุกอย่างส่งผลต่อการวางแผนและทำงาน

    7 สิ่งสำคัญ ในการ ออกแบบ UI

    • Light comes from the sky

      แสงมาจากท้องฟ้า หมายความว่าเงาต้องอยู่ด้านล่าง การออกแบบ UI ที่ดีต้องมีพื้นฐานมาจากความคุ้นเคยของผู้ใช้ ดังนั้นการทำเงาจึงต้องอิงหลักธรรมชาติ

    • Black and white first

      การออกแบบต้องเริ่มจากสีขาว-ดำ เพราะการออกแบบ UI ในยุคที่เป็น Mobile-first เรื่องของพื้นที่และการวางองค์ประกอบสำคัญกว่า การใช้เพียงสีขาว-ดำ ทำให้เห็นพื้นที่ต่างๆ ดีขึ้น การจัดวาง UI Element ก็จะออกมาดีมากขึ้น จากนั้นค่อยใส่สีเติมเข้ามา

    ui-design-1

    • Double your whitespace

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

    • Learn the methods of overlaying text on images

      การวางตัวอักษรบนรูป เป็นสิ่งพื้นฐานที่ควรรู้ โดยมีหลักอยู่ง่ายๆ คือ รูปพื้นหลังสีเข้มตัวอักษรขาว(หรือรูปพื้นหลังขาว ตัวอักษรสีเข้ม), ทดสอบทุกหน้าจอ ว่าอ่านออกไหม ตัวอักษรเคลื่อนไหม

    • Make text pop— and un-pop

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

    ui-design-2




Create Date : 27 เมษายน 2559
Last Update : 27 เมษายน 2559 11:58:03 น.
Counter : 407 Pageviews.

0 comments
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
ยืนยันรหัสความปลอดภัย :
(กรอกตัวเลขที่ปรากฎในภาพ)

knzfreestyle
Location :
  

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 1 คน [?]



เมษายน 2559

 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
28
29
30