แจกของฟรี

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

• โปรแกรมเมอร์ (Developer) ที่รู้สึกตัวว่าลองทำดีไซน์เองเท่าไหร่ก็ไม่สวยสักที และอยากรู้เคล็ดลับการดีไซน์ UI ออกมาให้ดูดี
• UX Designer ที่อยากให้ Portfolio ของตัวเองสวยงามกว่า Powerpoint น่าเบื่อ ๆ และ UX Designer ที่คิดว่าจะขายงาน UX ได้ง่ายกว่าถ้ามี UI สวย ๆ แถมไปด้วย (UX กับ UI ไม่เหมือนกันนะครับ UX Designer เป็นคนที่คิดด้านการทำให้เว็บใช้งานง่าย และทำ Wireframe เว็บต่าง ๆ ส่วน UI Designer เป็นคนออกแบบเน้นความสวยงามครับ)

คุณ Erik (ผู้เขียน) บอกว่าบทความนี้อาจไม่เหมาะกับคนที่ทำงานอาชีพ UI (User Interface) Designer อยู่แล้วครับ เพราะอาจจะรู้สึกว่าเนื้อหาน่าเบื่อหรือผิดไปจากสิ่งที่เคยเรียนรู้กันมา แต่ผม (Designil) มองว่าบทความนี้จะทำให้คุณมอง Design จากอีกมุมมองหนึ่งของคนที่ไม่ได้ออกแบบเป็นงานหลักครับ
เมื่อก่อนเค้าเป็น UX Designer ที่ออกแบบไม่เป็นเลย แต่พอเค้าทำงานด้าน UX ไปเรื่อย ๆ เค้าก็พบว่าเค้าจำเป็นต้องเรียนรู้เทคนิค UI Design ด้วย เพราะเรื่องต่าง ๆ ดังนี้:
 

• Portfolio ของเค้าเละเทะมาก ซึ่งไม่สามารถแสดงวิธีการทำงาน และวิธีการคิดของเค้าให้ออกมาดูดีได้
• ลูกค้าด้าน UX ของเค้ามักจะต้องการคนที่มีความสามารถมากกว่าแค่ขีดลูกศร หรือวาดกล่องอย่างเดียว (มันคือ การทำ Wireframe นั่นเอง)
• เค้าอยากลองทำงานใน Startup ที่เพิ่งเริ่มต้นดูสักครั้ง ซึ่งใน Startup ยิ่งทำอะไรเป็นหลายอย่างยิ่งดี

ถึงไม่ได้เรียนจบด้านศิลปะ ก็ออกแบบให้สวยได้ คุณ Erik เรียนจบคณะวิศวกรรมศาสตร์ ซึ่งขึ้นชื่อมากในด้านการทำสิ่งที่ประสิทธิภาพดีเยี่ยม แต่ดีไซน์ห่วยสุด ๆ แน่นอนว่าเค้าไม่ได้เรียนเกี่ยวกับการออกแบบให้สวยงามมาแม้แต่น้อย
เค้าจึงใช้เทคนิคการเรียนรู้แบบที่วิศวะสอน โดย นำดีไซน์สวย ๆ จำนวนมากมาวิเคราะทีละงาน ทีละงาน ว่าทำแบบไหนถึงสวย ลอกงานคนอื่นมาเพื่อศึกษาว่าสิ่งใดที่ทำให้มันดูดี
เค้าเคยรับงาน UI Design มางานหนึ่งที่ต้องใช้เวลาศึกษา ทดลอง แก้ไขนานกว่า 10 ชั่วโมง แต่คิดเงินลูกค้าไปแค่ 1 ชั่วโมง โดยอีก 9 ชั่วโมงเค้าบอกว่าเป็นเวลาที่ใช้ค้นหาจาก Google, Pinterest, Dribbble เพื่อหาแนวทางการดีไซน์ที่ต้องการ และลอกมาใช้
กฏ 7 ข้อที่เราจะเรียนรู้ในวันนี้ ก็คือกฏที่คุณ Erik ได้ศึกษามาจากระยะเวลาเหล่านี้นั่นเอง
คุณ Erik ได้ย้ำชัดเจนให้กับคนที่รู้สึกว่าตัวเองดีไซน์ไม่สวย ว่า “เทคนิค UI Design ของผมทั้งหมดมาจากการศึกษางานจำนวนมาก ไม่ใช่ว่าอยู่ดี ๆ ผมก็มีเซ้นส์ออกแบบให้สวยงามขึ้นมา”
สิ่งที่บทความนี้จะสอน ไม่ใช่ทฤษฎีการออกแบบใด ๆ เราจะไม่มีการพูดถึง Golden Ratio (อัตราส่วนทอง) หรือ Color Theory (ทฤษฎีสี) ใด ๆ ทั้งสิ้น แต่จะเป็นกฎง่าย ๆ ที่คนทำงานด้านไหนก็เข้าใจได้ง่าย ซึ่งมาจากการศึกษาดีไซน์แบบล้มลุกคลุกคลานของเค้าทั้งสิ้น
 7 กฎการออกแบบ UI ให้สวยงาม ที่ใครก็เรียนรู้ได้ มาดูกันก่อนว่าแต่ละข้อมีอะไรกันบ้าง
 

• แสงต้องมาจากบนฟ้า
• เริ่มด้วย ขาว-ดำ เสมอ
• เพิ่ม Whitespace (ช่องว่าง) เป็นสองเท่า (อ่าน ตอน 2)
• เทคนิคการวางตัวหนังสือบนรูป ไม่ให้จม (อ่าน ตอน 2)
• เพิ่ม – ลด ความเด่นของตัวหนังสือ (อ่าน ตอน 2)
• เลือกใช้ฟ้อนต์ให้เหมาะสม (อ่าน ตอน 2)
• ขโมยอย่างศิลปิน (อ่าน ตอน 2)

กฏข้อ 1 : แสงต้องมาจากบนฟ้า อาจจะฟังดูไม่มีอะไร แต่ข้อนี้เป็นกฏที่สำคัญมากข้อหนึ่งเลยครับ คนเราชินกับการที่แสงมาจากท้องฟ้า เพราะฉะนั้นถ้าแสงมาจากด้านล่างเมื่อไหร่จะทำให้ดีไซน์ดูแปลกไปทันที
เมื่อไหร่ที่มีแสงสาดลงมา ก็ต้องเกิด “เงา” อยู่ด้านล่างครับ เพราะฉะนั้นด้านบนของสิ่งที่โดนแสงจะสว่าง และด้านล่างจะมืดกว่าเสมอ
การออกแบบ User Interface ก็เป็นไปตามเรื่องแสงนี้เช่นกันครับ ถ้าสังเกตในเว็บไซต์ต่าง ๆ จะเห็นว่า UI หลาย ๆ จุด เช่น ปุ่ม จะมีการใส่ “เงา” เพื่อให้เรารู้สึกว่าปุ่มเป็น 3 มิตินูนออกมาจากหน้าเว็บไซต์นั่นเอง
  เทคนิคการใช้แสงในการดีไซน์ปุ่มบนเว็บไซต์ / แอพ
  จากรูปปุ่มด้านบน ถึงแม้มันจะดูเรียบ ๆ สไตล์ Flat Design แต่ก็มีการใช้รายละเอียดเรื่องแสงเข้ามาเกี่ยวข้อง ดังนี้:
 

• ปุ่มตอนที่ยังไม่กด (รูปบน) มีมุมใต้ปุ่มเป็นสีเข้ม เนื่องจากตรงจุดนั้นแสงส่องไม่ถึงนั่นเอง
• ปุ่มตอนที่ยังไม่กด บนผิวปุ่มด้านบนจะเป็นสีน้ำเงินสว่างกว่าผิวปุ่มด้านล่าง เกิดจากผิวปุ่มด้านบนเป็นเอียงเล็กน้อยเพื่อรับแสง ส่วนผิวปุ่มด้านล่างเอียงตรงข้ามกับทิศทางแสง (ดู Side View ของรูปบนประกอบ จะเห็นว่าผิวปุ่มเอียงนิดหน่อยครับ)
• ปุ่มตอนที่ยังไม่กด มีเงาออกมาเล็กน้อย (ดูรูปบน จุดที่ซูม)
• ปุ่มตอนที่กดแล้ว (รูปล่าง) จะเห็นว่าสีของปุ่มเข้มกว่าตอนแรก เนื่องจากพอกดปุ่มไปแล้วแสงจะส่องไม่ถึง (ดู Side View รูปล่างประกอบ) ลองนึกถึงปุ่มกดในชีวิตจริงที่พอกดไปแล้วมันจะสีเข้มขึ้นเช่นกัน เพราะนิ้วเราไปปิดกั้นแสงเอาไว้

จะเห็นว่าขนาดปุ่มธรรมดายังมีการใช้รายละเอียดเรื่องแสงถึง 4 อย่าง แน่นอนว่ากับ UI ส่วนอื่น ๆ เราก็ใช้ความรู้เรื่องแสงนี้เช่นกัน
  การใช้แสงในการออกแบบ Interface ของ iOS 6
  รูปด้านบนเป็นหน้า Setting ของ iOS6 สังเกตว่าในหน้านี้มีการใช้รายละเอียดเรื่องแสงมาประกอบการดีไซน์มากมาย
 

• กรอบขาวของช่อง Setting มีเงาเล็ก ๆ อยู่ด้านบน เกิดจากการที่กรอบนี้นูนลึกลงไปในผิว
• ตัวเลื่อน “ON” ที่นูนลงไปเหมือนกัน ก็เกิดเงาเล็ก ๆ ด้านบนเช่นกัน
• ตัวเลื่อน “ON” ที่นูนลง ทำให้ด้านล่างของตัวเลื่อนรับแสงเยอะกว่าด้านบน เกิดเป็นสีฟ้าด้านล่าง และสีน้ำเงินด้านบน (ดูรูป Side View บนประกอบ)
• ไอคอนนูนออกมาเล็กน้อย ทำให้ด้านบนของไอคอนรับแสงมากกว่าปกติ เกิดเป็นแสงสีขาวด้านบนไอคอนทั้ง 2 อัน (ดูรูป Side View ล่างประกอบ)
• เส้นคั่นระหว่าง Do Not Disturb กับ Notifications เกิดจากจุดที่นูนลึกลงไประหว่าง Setting 2 อัน ทำให้เกิดเงาสีเข้มขึ้นมา (ดูรูปด้านล่างนี้ประกอบ)

ตัวอย่าง UI ที่นูนลงไป ทำให้เกิดเงาเป็นเส้นคั่น
  User Interface ที่มักจะนูนลง (inset):
 

• ช่องกรอกในฟอร์มต่าง ๆ
• ปุ่มตอนที่กดแล้ว
• รางของตัวเลื่อน (แบบใต้ปุ่ม “ON” ใน iOS6 ด้านบน)
• Radio Button ตอนที่ยังไม่เลือก
• Checkbox

User Interface ที่มักจะนูนขึ้น (outset):
 

• ปุ่มตอนที่ยังไม่กด
• ตัวเลื่อน (แบบปุ่ม “ON” ใน iOS6 ด้านบน)
• ปุ่มเปิด Dropdown
• การ์ด (ใครไม่รู้จัก แนะนำให้อ่าน Card Design – UI Interface เทรนด์ใหม่ที่คุณต้องรู้)
• Radio Button ตอนที่เลือกแล้ว
• Popup ต่าง ๆ

พอเรารู้แล้วว่ามีสิ่งที่ “นูนขึ้น” กับ “นูนลง” ใน UI Design เราก็จะสังเกตเห็นมันอยู่ทุกที่ ทุกแอพ ทุกเว็บไซต์ที่เข้าเลยครับ
 เดี๋ยวก่อน แล้ว Flat Design ล่ะ…? iOS7 มาพร้อมกับดีไซน์แบบใหม่ที่เรียกกันว่า Flat Design (ถ้ายังไม่รู้จัก แนะนำให้ดูบทความ เทรนด์เว็บดีไซน์ใหม่ล่าสุด ประจำปี 2014 ผมอธิบายไว้ให้แล้วครับ) ซึ่งมันก็ Flat สมชื่อมาก ไม่มีการนูนหรือการใช้เงา มีแค่เส้นกับรูปทรงที่ใช้สีเดียวทั้งก้อน
  Flat UI Design บน iOS 7 ที่เรียบแบบสุด ๆ
  คุณ Erik บอกว่าเค้าชอบความสะอาดและความเรียบง่ายของ Flat Design แต่เค้าไม่คิดว่ามันจะเป็นเทรนด์ในระยะยาว เพราะการใช้แสง ใช้เงาใน UI เป็นสิ่งที่ขาดไปแล้วรู้สึกไม่เป็นธรรมชาติ เพราะฉะนั้นในอนาคตเราน่าจะกำลังขยับไปทาง Semi-Flat Design (ในบทความเรื่องเทรนด์เว็บดีไซน์ ผมเรียกว่า Almost Flat Design ครับ) มากกว่า
  Mac OS Yosemite มาพร้อมดีไซน์แบบกึ่ง Flat ที่ใช้แสงเงามาประกอบด้วย
  ในช่วงที่บทความนี้กำลังเขียนอยู่ Google ก็เปิดตัว Material Design ซึ่งเป็นหลักที่ใช้ดีไซน์ Product ในเครือ Google ทั้งหมด โดยเน้นการแสดงความลึกของสิ่งต่าง ๆ ด้วยแสงเงา เลียนแบบเงาของจริง ลองดูรูปอธิบาย Material Design ด้านล่างครับ
  Material Design ของ Google มีการใช้แสงเงาเพื่อเพิ่มความลึกใน Interface
  จะเห็นได้ชัดว่าแต่ละ UI Element ใช้แสงเงาทำให้เกิดความลึก ความนูน
  ผมคิดว่า Material Design จะอยู่กับเราไปอีกนาน เพราะมันมีการใช้ Flat Design ร่วมกับสิ่งที่มาจากในชีวิตจริง (แสงเงา ความลึก ความนูน) แบบบาง ๆ ไม่ใช่แค่ Flat เรียบ ๆ แบบ iOS7 ครับ
  จริง ๆ Flat Design เค้าใช้กันมานานแล้วนะครับ…
  กฏข้อ 2 : เริ่มด้วย ขาว-ดำ เสมอ การออกแบบเป็นสี ขาว-ดำ ก่อน แล้วค่อยใส่สีเข้าไปทีละนิด จะช่วยให้ดีไซน์ UI ที่ซับซ้อนออกมาได้ง่ายขึ้น และนอกจากนั้นยังทำให้เราโฟกัสกับเรื่องการจัดช่องวาง และวาง Layout สิ่งต่าง ๆ ก่อนด้วย
ในปัจจุบัน UX Designer มักจะออกแบบด้วยวิธี “Mobile-first” (ออกแบบจากขนาดหน้าจอมือถือก่อน แล้วค่อยขยับเป็นหน้าจอที่ใหญ่ขึ้นเรื่อย ๆ) ซึ่ง “Mobile-first” ทำให้เค้าโฟกัสกับปัญหาที่ยากกว่าก่อน เพราะการออกแบบเว็บหรือแอพที่ใช้ได้ง่ายบนหน้าจอเล็ก ๆ นั้นลำบากกว่าการออกแบบให้ใช้ได้ง่ายบนหน้าจอใหญ่
กฏข้อนี้ก็มีแนวคิดคล้าย ๆ กัน คือ เราควรออกแบบเป็นสีขาว-ดำก่อนเพื่อจัดวาง UI Element ต่าง ๆ ให้เข้าที่ และคิดวิธีให้เว็บออกมาดูสวยและใช้งานง่าย โดยไม่พึ่งการใช้สีเลยแม้แต่น้อย อันนี้เป็นสิ่งที่ยากครับ หลังจากนั้นเราค่อยใส่สีเข้าไปทีละนิด และจำไว้ว่าการใส่สีทุกครั้งต้องมีจุดประสงค์ในการใส่
  ตัวอย่าง Wireframe ขาว – ดำของคุณ Haraldur Thorleifsson
  เทคนิคนี้จะทำให้ดีไซน์ขาว – ดำของเราออกมาคลีน ๆ ดูง่าย ใช้ง่าย และยังทำให้เราโฟกัสเรื่องของช่องว่าง, ขนาด, และ Layout ก่อนสิ่งอื่น ๆ ซึ่ง 3 อย่างที่กล่าวมาถือเป็นหัวใจสำคัญของการออกแบบเว็บไซต์ให้เรียบง่ายและดูดีครับ
  Web Design แบบขาว-ดำ ก็ดูคลีน ๆ เท่ ๆ ไปอีกแบบครับ
  อย่างไรก็ตาม ในบางเคสการออกแบบเว็บไซต์ขาว – ดำก็ไม่เวิร์คเท่าไหร่ครับ ถ้าเป็นดีไซน์ที่ต้องการความฉูดฉาด, การ์ตูน ฯลฯ ก็ต้องหาดีไซเนอร์ที่ใช้สีเก่งมาก ๆ แต่เราโชคดีที่งานออกแบบแอพส่วนใหญ่ในยุคนี้เป็นแนวคลีน ๆ เรียบง่ายกันหมด ไม่งั้นแอพนั้นจะหาดีไซเนอร์ที่เหมาะสมได้ยากมาก
  ตัวอย่างดีไซน์แบบสีฉูดฉาดของเว็บไซต์ Nokia จากคุณ Julien Renvoye
  เทคนิคการใส่สีใน Web Design หลังจากออกแบบขาว – ดำเสร็จแล้ว ก็ได้เวลามาใส่สีกันครับ แบบง่ายที่สุดคือใส่เพิ่มเข้าไปแค่ 1 สี
  ดีไซน์เว็บไซต์ของ Uber ที่เป็นขาว – ดำเท่ ๆ แล้วสีฟ้าเข้าไป 1 สี
  การใส่สี 1 สีเข้าไปในดีไซน์ขาว – ดำจะทำให้สีนั้นเด่นขึ้นมาทันทีครับ ลองดูตัวอย่างจากรูปด้านล่าง
  ตัวอย่างการใส่สีแดงเข้าไปเพียงสีเดียว ในหน้าเว็บไซต์ขาว – ดำ
  คุณอาจจะพัฒนาไปอีกขั้น โดยการใส่สี 2 สี… 3 สี… 4 สี… ไปเรื่อย ๆ ก็ได้ แต่ควรจะใช้สีที่มาจากเนื้อสี (Hue) เดียวกันครับ เช่น ถ้าใส่สีแดง อาจจะใส่แดงธรรมดา แดงเข้ม แดงอ่อน อะไรแบบนี้
 เรื่องเกี่ยวกับสีที่คุณต้องรู้ เนื้อสี (Hue) คืออะไร ? ปกติการทำเว็บไซต์เราจะพูดถึงสี RGB เป็นหลักครับ (พวก #000000 ถึง #ffffff) แต่สำหรับการออกแบบเว็บไซต์การใช้ RGB ไม่ช่วยอะไรเราเลย คุณอีริคแนะนำให้ใช้สีแบบ HSB ครับ (บางคนอาจรู้จักกันในชื่อ HSV หรือ HSL)
สี RGB จะสร้างสีหนึ่งขึ้นมาจากการรวมของสี 3 สี คือ สีแดง (Red) สีเขียว (Green) และสีน้ำเงิน (Blue) แต่สี HSB สร้างสีขึ้นมาจากการรวมกันของ เนื้อสี (Hue) ความเข้มข้น (Saturation) และความสว่าง (Brightness)
เพราะฉะนั้นถ้าใช้สีแบบ HSB เราสามารถตั้ง Hue คงเดิม (เช่น สีแดง) แล้วเปลี่ยนเฉพาะ Saturation กับ Brightness เพื่อให้ได้สีใหม่ที่เป็นโทนเดียวกัน (เช่น สีแดงเข้ม สีแดงอ่อน) ลองดูตัวอย่างด้านล่างครับ เป็นการปรับสีแบบ Hue คงที่แล้วเปลี่ยนแค่ Saturation กับ Brightness
  Palette โทนสีทอง ที่คงค่า Hue เดิม แล้วเปลี่ยนเฉพาะ Saturation กับ Brightness จาก Smashing Magazine
  Palette โทนสีฟ้า ที่คงค่า Hue เดิม แล้วเปลี่ยนเฉพาะ Saturation กับ Brightness จาก Smashing Magazine
  เทคนิคการเลือกใช้สีในงานออกแบบที่มาจากเนื้อสีหลักไม่เกิน 1-2 เนื้อสี จะทำให้เราสามารถแบ่งส่วนของดีไซน์ที่ต้องการให้เด่น หรือไม่เด่นได้ง่าย ๆ โดยที่ไม่ทำให้ดีไซน์โดยรวมดูเละเทะ
  แอพนาฬิกาจับเวลาของคุณ Kerem Suer
  สิ่งที่คุณต้องรู้เพิ่มเติมเกี่ยวกับเรื่องสี การเลือกสี ถือเป็นศาสตร์หนึ่งที่ยากที่สุดในการออกแบบทุกสาขา เพราะจะมีทฤษฎีเกี่ยวกับสีให้คุณศึกษาจนปวดหัวมากมาย แต่โชคดีว่าในปัจจุบันมีเครื่องมือดี ๆ ที่จะช่วยให้คุณเลือกสีได้ง่ายขึ้น
มาดูกันเลยว่าคุณ Erik แนะนำอะไรบ้าง:
 

• Never Use Black – เทคนิคการใช้สีที่บอกว่า สีดำเข้ม 100% ไม่ควรถูกใช้ในงานดีไซน์ และเราควรใช้สีเทาเฉดไหนในการทำให้ดีไซน์ออกมามีน้ำหนักและดูดี
• Adobe Color CC – เครื่องมือสำหรับหา Palette สีสวย ๆ หรือสร้าง Palette สีใหม่ (มีแอพมือถือที่เอารูปในมือถือเรามาสร้าง Palette สีได้ด้วย)
• Colour Lovers – เว็บไซต์รวม Palette สีสวย ๆ และสร้าง Palette สีใหม่ได้ง่าย แชร์ให้เพื่อนก็ได้ เหมาะกับคนที่ต้องการศึกษาเรื่องสีสุด ๆ
• Dribbble search-by-color – เว็บไซต์รวมงานดีไซน์สวย ๆ ชื่อดัง ซึ่งอยู่ในลิสต์ 5 เว็บไซต์หา Inspiration ที่ Web Designer เก่ง ๆ เข้าทุกวัน ด้วย โดยเราสามารถค้นหางานตามสีที่ต้องการได้ เพื่อดูว่าดีไซเนอร์คนอื่น ๆ ใช้สีนี้คู่กับสีอะไรกันบ้าง

สำหรับบทความชุด “7 กฎการออกแบบ UI ให้สวยงาม สำหรับคนที่ไม่ใช่ Designer” พาร์ทแรกขอจบที่ 2 ข้อแรกก่อนครับ ค่อย ๆ อ่านทีละนิดจะได้ซึมซับเทคนิคดีไซน์ไปครับผม


ที่มา: http://www.designil.com/7-rules-beautiful-ui-design.html