ปัญหาใหญ่ของโปรแกรมเมอร์ หรือคนที่ทำอาชีพด้านอื่นที่ไม่ใช่ Designer เวลาทำเว็บไซต์ / แอพ คือ ขาดเซ้นส์ด้านดีไซน์ ครับ ไม่ว่าจะลองออกแบบยังไงก็เลือกสีได้ไม่โดน เลือกฟ้อนต์ได้ไม่สวยสักที Show
เมื่อก่อนแอดมินก็พบปัญหานี้เช่นกันครับ แต่ไม่นานมานี้มีโอกาสได้อ่านบทความเรื่อง 7 Rules for Creating Gorgeous UI จากคุณ Erik D. Kennedy ซึ่งพูดถึงวิธีการออกแบบ UI สวย ๆ สำหรับคนที่ไม่มีหัวอาร์ตเลย เช่น โปรแกรมเมอร์, UX Designer ฯลฯ แอดมินเห็นว่าบทความนี้มีประโยชน์มากโดยเฉพาะกับคนที่ประสบปัญหาเดียวกับแอดมินมาก่อน เลยนำมาเรียบเรียงเป็นภาษาไทยให้อ่านกันง่าย ๆ ครับ ไม่ว่าคุณจะไม่ได้เป็นดีไซเนอร์ หรือเป็นดีไซเนอร์ก็แนะนำให้ลองอ่านดูครับ ได้ประโยชน์แน่นอน บทความนี้เหมาะกับใคร
คุณ Erik (ผู้เขียน) บอกว่าบทความนี้อาจไม่เหมาะกับคนที่ทำงานอาชีพ UI (User Interface) Designer อยู่แล้วครับ เพราะอาจจะรู้สึกว่าเนื้อหาน่าเบื่อหรือผิดไปจากสิ่งที่เคยเรียนรู้กันมา แต่ผม (Designil) มองว่าบทความนี้จะทำให้คุณมอง Design จากอีกมุมมองหนึ่งของคนที่ไม่ได้ออกแบบเป็นงานหลักครับ เมื่อก่อนเค้าเป็น UX Designer ที่ออกแบบไม่เป็นเลย แต่พอเค้าทำงานด้าน UX ไปเรื่อย ๆ เค้าก็พบว่าเค้าจำเป็นต้องเรียนรู้เทคนิค UI Design ด้วย เพราะเรื่องต่าง ๆ ดังนี้:
ถึงไม่ได้เรียนจบด้านศิลปะ ก็ออกแบบให้สวยได้คุณ Erik เรียนจบคณะวิศวกรรมศาสตร์ ซึ่งขึ้นชื่อมากในด้านการทำสิ่งที่ประสิทธิภาพดีเยี่ยม แต่ดีไซน์ห่วยสุด ๆ แน่นอนว่าเค้าไม่ได้เรียนเกี่ยวกับการออกแบบให้สวยงามมาแม้แต่น้อย เค้าจึงใช้เทคนิคการเรียนรู้แบบที่วิศวะสอน โดย นำดีไซน์สวย ๆ จำนวนมากมาวิเคราะทีละงาน ทีละงาน ว่าทำแบบไหนถึงสวย ลอกงานคนอื่นมาเพื่อศึกษาว่าสิ่งใดที่ทำให้มันดูดี เค้าเคยรับงาน UI Design มางานหนึ่งที่ต้องใช้เวลาศึกษา ทดลอง แก้ไขนานกว่า 10 ชั่วโมง แต่คิดเงินลูกค้าไปแค่ 1 ชั่วโมง โดยอีก 9 ชั่วโมงเค้าบอกว่าเป็นเวลาที่ใช้ค้นหาจาก Google, Pinterest, Dribbble เพื่อหาแนวทางการดีไซน์ที่ต้องการ และลอกมาใช้ กฏ 7 ข้อที่เราจะเรียนรู้ในวันนี้ ก็คือกฏที่คุณ Erik ได้ศึกษามาจากระยะเวลาเหล่านี้นั่นเอง คุณ Erik ได้ย้ำชัดเจนให้กับคนที่รู้สึกว่าตัวเองดีไซน์ไม่สวย ว่า “เทคนิค UI Design ของผมทั้งหมดมาจากการศึกษางานจำนวนมาก ไม่ใช่ว่าอยู่ดี ๆ ผมก็มีเซ้นส์ออกแบบให้สวยงามขึ้นมา” สิ่งที่บทความนี้จะสอน ไม่ใช่ทฤษฎีการออกแบบใด ๆ เราจะไม่มีการพูดถึง Golden Ratio (อัตราส่วนทอง) หรือ Color Theory (ทฤษฎีสี) ใด ๆ ทั้งสิ้น แต่จะเป็นกฎง่าย ๆ ที่คนทำงานด้านไหนก็เข้าใจได้ง่าย ซึ่งมาจากการศึกษาดีไซน์แบบล้มลุกคลุกคลานของเค้าทั้งสิ้น 7 กฎการออกแบบ UI ให้สวยงาม ที่ใครก็เรียนรู้ได้มาดูกันก่อนว่าแต่ละข้อมีอะไรกันบ้าง
กฏข้อ 1 : แสงต้องมาจากบนฟ้าอาจจะฟังดูไม่มีอะไร แต่ข้อนี้เป็นกฏที่สำคัญมากข้อหนึ่งเลยครับ คนเราชินกับการที่แสงมาจากท้องฟ้า เพราะฉะนั้นถ้าแสงมาจากด้านล่างเมื่อไหร่จะทำให้ดีไซน์ดูแปลกไปทันที เมื่อไหร่ที่มีแสงสาดลงมา ก็ต้องเกิด “เงา” อยู่ด้านล่างครับ เพราะฉะนั้นด้านบนของสิ่งที่โดนแสงจะสว่าง และด้านล่างจะมืดกว่าเสมอ การออกแบบ User Interface ก็เป็นไปตามเรื่องแสงนี้เช่นกันครับ ถ้าสังเกตในเว็บไซต์ต่าง ๆ จะเห็นว่า UI หลาย ๆ จุด เช่น ปุ่ม จะมีการใส่ “เงา” เพื่อให้เรารู้สึกว่าปุ่มเป็น 3 มิตินูนออกมาจากหน้าเว็บไซต์นั่นเอง จากรูปปุ่มด้านบน ถึงแม้มันจะดูเรียบ ๆ สไตล์ Flat Design แต่ก็มีการใช้รายละเอียดเรื่องแสงเข้ามาเกี่ยวข้อง ดังนี้:
จะเห็นว่าขนาดปุ่มธรรมดายังมีการใช้รายละเอียดเรื่องแสงถึง 4 อย่าง แน่นอนว่ากับ UI ส่วนอื่น ๆ เราก็ใช้ความรู้เรื่องแสงนี้เช่นกัน รูปด้านบนเป็นหน้า Setting ของ iOS6 สังเกตว่าในหน้านี้มีการใช้รายละเอียดเรื่องแสงมาประกอบการดีไซน์มากมาย
User Interface ที่มักจะนูนลง (inset):
User Interface ที่มักจะนูนขึ้น (outset):
พอเรารู้แล้วว่ามีสิ่งที่ “นูนขึ้น” กับ “นูนลง” ใน UI Design เราก็จะสังเกตเห็นมันอยู่ทุกที่ ทุกแอพ ทุกเว็บไซต์ที่เข้าเลยครับ เดี๋ยวก่อน แล้ว Flat Design ล่ะ…?iOS7 มาพร้อมกับดีไซน์แบบใหม่ที่เรียกกันว่า Flat Design (ถ้ายังไม่รู้จัก แนะนำให้ดูบทความ เทรนด์เว็บดีไซน์ใหม่ล่าสุด ประจำปี 2014 ผมอธิบายไว้ให้แล้วครับ) ซึ่งมันก็ Flat สมชื่อมาก ไม่มีการนูนหรือการใช้เงา มีแค่เส้นกับรูปทรงที่ใช้สีเดียวทั้งก้อน คุณ Erik บอกว่าเค้าชอบความสะอาดและความเรียบง่ายของ Flat Design แต่เค้าไม่คิดว่ามันจะเป็นเทรนด์ในระยะยาว เพราะการใช้แสง ใช้เงาใน UI เป็นสิ่งที่ขาดไปแล้วรู้สึกไม่เป็นธรรมชาติ เพราะฉะนั้นในอนาคตเราน่าจะกำลังขยับไปทาง Semi-Flat Design (ในบทความเรื่องเทรนด์เว็บดีไซน์ ผมเรียกว่า Almost Flat Design ครับ) มากกว่า ในช่วงที่บทความนี้กำลังเขียนอยู่ Google ก็เปิดตัว Material Design ซึ่งเป็นหลักที่ใช้ดีไซน์ Product ในเครือ Google ทั้งหมด โดยเน้นการแสดงความลึกของสิ่งต่าง ๆ ด้วยแสงเงา เลียนแบบเงาของจริง ลองดูรูปอธิบาย Material Design ด้านล่างครับ ผมคิดว่า Material Design จะอยู่กับเราไปอีกนาน เพราะมันมีการใช้ Flat Design ร่วมกับสิ่งที่มาจากในชีวิตจริง (แสงเงา ความลึก ความนูน) แบบบาง ๆ ไม่ใช่แค่ Flat เรียบ ๆ แบบ iOS7 ครับ กฏข้อ 2 : เริ่มด้วย ขาว-ดำ เสมอการออกแบบเป็นสี ขาว-ดำ ก่อน แล้วค่อยใส่สีเข้าไปทีละนิด จะช่วยให้ดีไซน์ UI ที่ซับซ้อนออกมาได้ง่ายขึ้น และนอกจากนั้นยังทำให้เราโฟกัสกับเรื่องการจัดช่องวาง และวาง Layout สิ่งต่าง ๆ ก่อนด้วย ในปัจจุบัน UX Designer มักจะออกแบบด้วยวิธี “Mobile-first” (ออกแบบจากขนาดหน้าจอมือถือก่อน แล้วค่อยขยับเป็นหน้าจอที่ใหญ่ขึ้นเรื่อย ๆ) ซึ่ง “Mobile-first” ทำให้เค้าโฟกัสกับปัญหาที่ยากกว่าก่อน เพราะการออกแบบเว็บหรือแอพที่ใช้ได้ง่ายบนหน้าจอเล็ก ๆ นั้นลำบากกว่าการออกแบบให้ใช้ได้ง่ายบนหน้าจอใหญ่ กฏข้อนี้ก็มีแนวคิดคล้าย ๆ กัน คือ เราควรออกแบบเป็นสีขาว-ดำก่อนเพื่อจัดวาง UI Element ต่าง ๆ ให้เข้าที่ และคิดวิธีให้เว็บออกมาดูสวยและใช้งานง่าย โดยไม่พึ่งการใช้สีเลยแม้แต่น้อย อันนี้เป็นสิ่งที่ยากครับ หลังจากนั้นเราค่อยใส่สีเข้าไปทีละนิด และจำไว้ว่าการใส่สีทุกครั้งต้องมีจุดประสงค์ในการใส่ เทคนิคนี้จะทำให้ดีไซน์ขาว – ดำของเราออกมาคลีน ๆ ดูง่าย ใช้ง่าย และยังทำให้เราโฟกัสเรื่องของช่องว่าง, ขนาด, และ Layout ก่อนสิ่งอื่น ๆ ซึ่ง 3 อย่างที่กล่าวมาถือเป็นหัวใจสำคัญของการออกแบบเว็บไซต์ให้เรียบง่ายและดูดีครับ อย่างไรก็ตาม ในบางเคสการออกแบบเว็บไซต์ขาว – ดำก็ไม่เวิร์คเท่าไหร่ครับ ถ้าเป็นดีไซน์ที่ต้องการความฉูดฉาด, การ์ตูน ฯลฯ ก็ต้องหาดีไซเนอร์ที่ใช้สีเก่งมาก ๆ แต่เราโชคดีที่งานออกแบบแอพส่วนใหญ่ในยุคนี้เป็นแนวคลีน ๆ เรียบง่ายกันหมด ไม่งั้นแอพนั้นจะหาดีไซเนอร์ที่เหมาะสมได้ยากมาก เทคนิคการใส่สีใน Web Designหลังจากออกแบบขาว – ดำเสร็จแล้ว ก็ได้เวลามาใส่สีกันครับ แบบง่ายที่สุดคือใส่เพิ่มเข้าไปแค่ 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 เทคนิคการเลือกใช้สีในงานออกแบบที่มาจากเนื้อสีหลักไม่เกิน 1-2 เนื้อสี จะทำให้เราสามารถแบ่งส่วนของดีไซน์ที่ต้องการให้เด่น หรือไม่เด่นได้ง่าย ๆ โดยที่ไม่ทำให้ดีไซน์โดยรวมดูเละเทะ สิ่งที่คุณต้องรู้เพิ่มเติมเกี่ยวกับเรื่องสีการเลือกสี ถือเป็นศาสตร์หนึ่งที่ยากที่สุดในการออกแบบทุกสาขา เพราะจะมีทฤษฎีเกี่ยวกับสีให้คุณศึกษาจนปวดหัวมากมาย แต่โชคดีว่าในปัจจุบันมีเครื่องมือดี ๆ ที่จะช่วยให้คุณเลือกสีได้ง่ายขึ้น มาดูกันเลยว่าคุณ Erik แนะนำอะไรบ้าง:
สำหรับบทความชุด “7 กฎการออกแบบ UI ให้สวยงาม สำหรับคนที่ไม่ใช่ Designer” พาร์ทแรกขอจบที่ 2 ข้อแรกก่อนครับ ค่อย ๆ อ่านทีละนิดจะได้ซึมซับเทคนิคดีไซน์ไปครับผม อ่านตอน 2 ได้ที่นี่ ท่านที่ไม่อยากพลาดเมื่อพาร์ท 2 ของบทความนี้ออกมา ท่านสามารถ สมัครรับข่าวสารจาก Designil ได้ในกล่องด้านล่างบทความนี้เลยครับ ไม่เสียค่าใช้จ่าย และไม่มีการแสปม 100% ครับ มีแต่บทความดี ๆ ของฟรีดี ๆ ส่งไปที่ E-Mail คุณเท่านั้น บทความที่เกี่ยวข้อง
|