iUXUI Journey IV — 7 UI Design Rule for DUMMY
บทความนี้ชอบมาก เพราะสาย coding อย่างเรา พอลองออกแบบหน้าจอทีไร ทำไมมันไม่สวยเหมือนต้นฉบับหว่า มันต้องมีสาเหตุซิ มาดูกันเถิดพี่น้อง
ลิงค์ต้นฉบับ designil.com ตอน1 ตอน2
1. แสงต้องมาจากบนฟ้า
abstract ฝุดๆ อ่านทีแรกงง ว่านี่คือสัจธรรมอะไรฤา มันเป็นการอธิบายเรื่องแสงเงาของ element ต่างๆ บนหน้าจอ ว่าหลักการออกแบบที่ดี เราต้องคำนึงถึงเรื่องแสงเงาที่อิงตามธรรมชาติ คือแสงมาจากข้างบน และเงาจะเกิดขึ้นด้านล่าง เพื่อให้หน้าจอแบนๆ ของเรา ดูเป็น 3 มิติขึ้นมา ซึ่งรายละเอียดค่อนข้างเยอะ รบกวนไปดูต้นฉบับประกอบซะ
2. เริ่มด้วย ขาว-ดำ เสมอ
การวางโทนสี ง่ายที่สุด คือใช้โทนขาวกับดำ เพราะเราควรใส่ใจเรื่องการวางของ layout ต่างๆ, ขนาด, ช่องว่าง, การใช้ font, element ต่างๆ ที่เราจะใส่เข้าไป ให้ดูสวย คลีน ดูง่าย และใช้งานง่ายก่อน
จากนั้นเราค่อยทยอยเติมสีเข้าไป ทีละสี ค่อยๆ ฝึกไป จำไว้ว่าสีที่ใส่เข้าไปมันต้องมีจุดประสงค์ของมัน ยิ่งใช้สีเยอะ เรายิ่งคุมยาก คนใช้จะงงสีได้ง่าย จนไม่ได้โฟกัสสิ่งที่เราต้องการจะสื่อหรือต้องการให้เกิด action
ซึ่งสีที่เราจะใส่เข้าไปก็ต้องคุมโทน โดยใช้ทฤษฎี HSL หรือ HSB ช่วย
อีกเรื่อง กรณีออกแบบเพื่อให้รองรับ responsive ui ควรออกแบบในหน้าจอขนาดใหญ่ก่อน เพราะมันออกแบบง่ายกว่า จากนั้นเราค่อยตัดอันที่ไม่จำเป็นออกในหน้าจอเล็ก หรือเปลี่ยนประสบการณ์การใช้งานไปอีกแบบก็ได้ แต่เราจะได้รู้ว่าต้องมีอะไรบ้างไว้ก่อน
3. อัด whitespace เข้าไป เพราะยุคนี้ ที่มันเหลือเยอะ
whitespace คือพื้นที่ว่าง ทั้งรอบ element รอบ font ใส่มันไปเยอะๆ เป็นสองเท่าของ content ยิ่งดี เยอะกว่านี้ก็ได้ เพราะหน้าเว็ปจะได้ไม่อึดอัด คนใช้สบายตา คนพัฒนาสบายใจ (แมะ คล้องจอง ^^)
4. การวางตัวหนังสือบนรูป
- รูปพื้นหลังต้องสีเข้ม มีจุดสีตัดกันไม่เยอะ
- ตัวหนังสือต้องสีขาว (หากอยากได้ตัวหนังสือสีดำ รูปต้องออกโทนสว่างมาก)
- ทดสอบกับหน้าจอทุกขนาด เพราะบางที พอย่อแล้วตัวหนังสือไปตกที่โทนสีที่อ่านไม่ได้ หรือไม่เด่น โดนกลืนหายไปกับพื้นหลัง
- ใช้ overlay (กล่องสีดำใสๆ) มาเป็นพื้นรองตัวหนังสือก่อน
- ใส่ข้อความในกล่องพื้นสีทึบเลย ง่ายดี
- เบลอรูปพื้นหลัง จะเบลอทั้งรูปหรือเบลอบางส่วนก็ได้ แต่ต้องวาง text บนจุดที่เบลอนะ
- ใช้ fade สีดำด้านล่างของรูป แล้ววางข้อความตรงบริเวณนั้น
5. เพิ่ม/ลด ความเด่นของตัวหนังสือ
อยากให้เด่นขึ้น ก็ ทำตัวหนังสือใหญ่, ฟ้อนต์หนา, ตัวพิมพ์ใหญ่, เพิ่ม whitespace รอบๆ ฯลฯ
อยากให้เด่นน้อยลง ก็ ทำให้ตัวหนังสือเล็ก, ฟ้อนต์บาง, ลด Contrast ฯลฯ
6. font ดีมีชัยไปกว่าครึ่ง
font มันไม่ใช่แค่สิ่งที่แทนข้อความ แต่ตัว font เอง มันมี mood & tone ที่กำหนดอารมณ์ความรู้สึกของผู้อ่านได้ด้วย ฉะนั้นมันจึงสำคัญมาก
และที่สำคัญยิ่งกว่าคือ font ดี มักไม่ฟรี ซึ่งคนเขียนเขาก็แปะลิงค์ font freeeee ให้ด้วย
- font thai free
- font eng [Google Fonts, Fontsquirrel] แนะนำ Lato, Open Sans, Bebas Neue, Montserrat, Raleway
(ดีแบบนี้ต้องไปอ่านต้นฉบับเขาบ่อยๆ ^^)
7. Steal like an Artist
ไม่มีใครเก่งตั้งแต่เกิด ทุกคนก็มีครูกันทั้งนั้น แต่การที่เราจะเหนือครูได้ เราต้องลอกเรียน ฝึกฝน ปรับปรุง จนได้ลายเส้นของเราเอง
ลองดูนี่ ข้าให้คัมภีร์แก่เจ้า ต้มดื่มวันละ 3 เวลา
สุดท้ายนี้ ขอบคุณ disignil.com ครับ ที่มีแหล่งให้ผู้สนใจเช่นผม เข้าไปสูบวิชา คารวะด้วยใจจริงๆ ครับ