พบกับ UI ฉบับดาร์ก
เผยแพร่เมื่อ 29 Nov 2022 โพสไปที่การออกแบบหน้าเว็บแบบ dark UI เริ่มเป็นที่นิยมมากขึ้นในปัจจุบัน เพราะมีความเรียบหรูและน่าดึงดูดใจ dark UI สามารถใช้ได้กับผลิตภัณฑ์หลากหลายชนิด แต่ก็ไม่ได้เหมาะสมกับทุกเว็บไซต์เสมอไปแม้จะมีดีไซน์ที่สวยสะดุดตา ทว่านักออกแบบหลายคนมักออกแบบ dark UI ที่ไม่ได้ส่งผลอะไรต่อการใช้งานมากนัก เนื่องจากโทนสีมืดๆ ทำให้การมองเห็นเป็นไปได้ยากขึ้นและโอกาสที่จะปรับใช้กับดีไซน์ทั่วไปก็มีน้อยลง
ในบทความนี้ เราจะมามอบคำแนะนำที่จะช่วยให้ dark UI ของคุณดึงดูดผู้ใช้ที่หลากหลาย โดยไม่ขัดต่อความสร้างสรรค์และการใช้งานจริงให้แย่ลง
สิ่งที่ควรคำนึงถึงเมื่อต้องเลือกดาร์กโหมด
โดยปกติแล้ว การเลือกใช้ dark UI นั้นขึ้นอยู่กับความชอบส่วนตัวมากกว่าความเข้าใจว่าสิ่งไหนดีที่สุดสำหรับผลิตภัณฑ์นั้น ซึ่งควรจะเลือกใช้อย่างระมัดระวังและสอดคล้องกับแบรนด์ด้วย แทนที่จะเดาเอาเองว่าทำแบบไหนจึงจะดีที่สุด เรามานึกถึงคำถามเหล่านี้กันดีกว่า
คอนเทนต์ของคุณเป็นอย่างไร
สีของพื้นหลังมีผลต่อการอ่านบนหน้าเว็บอย่างมาก ซึ่งเป็นสิ่งแรกที่ควรคำนึงถึง โดยเฉพาะเมื่อเว็บไซต์หรือแอปฯ มีข้อความเยอะ หน้าที่อ่านยากจะทำให้ลำบากต่อการใช้งานและทำให้ประสบการณ์ผู้ใช้แย่ลงอีกด้วย
Dark UI จะดีที่สุดเมื่อใช้กับโปรเจกต์ที่เน้นภาพเป็นหลักและมีข้อความน้อย เพราะจะทำให้ผู้ใช้โฟกัสกับภาพมากขึ้น เมื่อต้องการให้ผู้ใช้จดจ่อกับสิ่งใดสิ่งหนึ่งและมองดูความสวยงามของหน้าเว็บ พื้นหลังมืดๆ จะทำให้ผู้ใช้ไม่ว่อกแว่กและทำให้ข้อความหรือรูปภาพโดดเด่นออกจากพื้นหลัง
Interface ของคุณซับซ้อนหรือไม่
Interface ที่มีข้อมูลเยอะนั้นเหมาะสมกับ dark UI ที่สุด พื้นหลังมืดๆ จะช่วยดูดความสว่างออกจากองค์ประกอบอื่น ซึ่งจะช่วยทำให้การมองผ่านข้อมูลต่างๆ มีประสิทธิภาพมากขึ้น เครื่องมือวิเคราะห์ซึ่งผู้ใช้ต้องทำความเข้าใจกับข้อมูลด้วยเวลาอันรวดเร็วนั้นมักจะมีพื้นหลังสีมืด
อยากสร้างอารมณ์แบบไหน
จิตวิทยาในเชิงสีสันคืออีกปัจจัยที่ต้องระมัดระวังเมื่อต้องเลือกพื้นหลังและสีที่จะมีผลต่ออารมณ์ของผู้ใช้งาน ดีไซน์มืดๆ จะส่งผลต่อความรู้สึกมากกว่าสีสว่าง โดยสีดำนั้นเกี่ยวข้องกับความเรียบหรูและความมีพลัง ซึ่งจะทำให้สีดำเป็นสีที่เหมาะสมสำหรับผลิตภัณฑ์พรีเมียม
เว็บไซต์โปรโมต
ที่มา: Apple
Saint Laurent ใช้พื้นหลังสีมืดทำให้ดูหรูหรา
ที่มา: Saint Laurent
เว็บไซต์ที่มีคอนเทนต์น้อย
ที่มา: Paul Lapkin
ที่มา: Tribo
ผู้ใช้จะใช้ผลิตภัณฑ์ของคุณตอนไหน
คุณควรคำนึงถึงสภาพแวดล้อมและช่วงเวลาในแต่ละวันที่ผู้ใช้จะใช้ interface พื้นหลังที่เข้ากันกับสภาพแวดล้อมได้จะดีที่สุด (interface สีอ่อนสำหรับผลิตภัณฑ์ที่ใช้ตอนกลางวัน และ interface สีมืดสำหรับใช้ในที่มืดหรือตอนกลางคืน) ซึ่งจะช่วยลดความต่างระหว่างความสว่างของหน้าจอและสภาพแวดล้อม เพื่อเลี่ยงไม่ให้ผู้ใช้รู้สึกเคืองตา ตัวอย่างเช่น ผลิตภัณฑ์เกี่ยวกับความบันเทิงส่วนใหญ่จะใช้ UI มืดๆ เพราะกิจกรรมที่เกี่ยวกับความบันเทิงมักเกิดขึ้นในตอนกลางคืน
เนื่องจากว่าเรามักชมภาพยนตร์ในห้องที่มีแสงสลัว dark UI จะช่วยมอบประสบการณ์ที่เหมือนกับดูในโรงภาพยนตร์
ที่มา: Netflix
สีของแบรนด์เหมาะกับดาร์กโหมดไหม
ไม่ใช่ทุกแบรนด์ที่จะมีโทนสีที่เหมาะกับพื้นหลังสีมืด เราควรเลี่ยงพื้นหลังสีมืดหากโทนสีของดีไซน์มีหลากหลายสีสัน
กลุ่มเป้าหมายคือใคร ชอบอะไร
ก่อนจะเริ่มออกแบบ UI คุณควรทำวิจัยเกี่ยวกับกลุ่มเป้าหมายและความชอบของพวกเขาเสียก่อน บรรดาผู้ใช้มักมีความชอบและความคาดหวังที่ต่างกัน นอกจากนั้นแล้ว การวิจัยคู่แข่งเองก็ทำให้เข้าใจได้ว่าบริษัทอื่นใช้ดีไซน์แบบไหน รวมไปถึงปัจจัยต่างๆ ที่ส่งผลต่อการออกแบบอีกด้วย
ยกระดับ Dark UI ของคุณ
หากคุณต้องการจะใช้ dark UI สำหรับผลิตภัณฑ์ของคุณแล้วละก็ มีอยู่หลายอย่างที่คุณต้องคำนึงถึง
ใช้ white space อย่างเหมาะสม
การใช้ white space คือสิ่งสำคัญสำหรับ UI แต่จะยิ่งส่งผลมากเมื่อพื้นหลังเป็นสีมืด เนื่องจากว่าพื้นหลังสีมืดจะดูดซับแสงจากองค์ประกอบอื่น คุณควรเพิ่ม white space เพื่อไม่ให้ interface ดูรกเกินไป
การใช้พื้นหลังสีมืดอาจทำให้ผู้ใช้อ่านยาก เพราะฉะนั้นนักออกแบบควรระมัดระวังในส่วนนี้มากขึ้น เพื่อทำให้แน่ใจว่ามี white space ระหว่างบรรทัดเพียงพอ
เลี่ยงการใช้พื้นหลังสีดำสนิท
แม้ว่าจะมีความเชื่อกันโดยทั่วไป พื้นหลังสีมืดไม่ได้หมายความว่าต้องเป็นสีดำเสมอไป อันที่จริงแล้ว สีดำสนิทนั้นไม่มีอยู่จริงเพราะสิ่งที่เป็นสีดำจะถูกแสงสะท้อนอยู่เสมอ ทำให้กลายเป็นสีเทาเข้มแทน เมื่อใช้สีดำสนิทใกล้ๆ กับสีอื่น สีดำอาจเด่นเกินสีอื่นมากเกินไป ตัวอย่างเช่น สีที่มืดที่สุดบนแถบด้านบนของ Apple ไม่ใช่ #000000 แต่เป็น #333333
อย่าใช้สีที่สดเกินไป
ชุดสีสว่างกับชุดสีมืดเป็นส่วนที่สำคัญสำหรับการออกแบบ ซึ่งก็คือสีที่ตัดกัน การใช้สีตรงข้ามน้อยหรือมากเกินไปอาจเป็นปัญหาได้ ซึ่งการใช้สีตัดกันที่สมบูรณ์แบบนั้นคือการสร้างสมดุลระหว่างพื้นหลังสีมืดกับตัวอักษรสีสว่าง ควรเลี่ยงการใช้ตัวอักษรสีขาวบนพื้นหลังสีมืด แต่ควรเลือกใช้สีเทาอ่อนแทนเพื่อให้ผู้ใช้อ่านง่ายโดยที่ยังคิดว่าเป็นสีขาวอยู่
ใช้ฟอนต์ sans serif
ฟอนต์คือตัวการสำคัญในการสร้าง UI ที่ใช้ง่ายและควรระมัดระวังในการเลือกใช้อย่างมาก โดยเฉพาะกับพื้นหลังสีมืดๆ การใช้ฟอนต์ serif บนพื้นหลังสีมืดจะทำให้ผู้ใช้อ่านยากมากกว่า
ไม่ใช้พาเลตสีหลากหลายเกินไป
เพราะส่วนประกอบของเว็บที่มีสีมืดจะมีความลึกอยู่ในตัว เราควรใช้สีอย่างระมัดระวังมากขึ้น เมื่อต้องทำดีไซน์สีมืดให้ดูสะอาดและเป็นระเบียบ นักออกแบบควรเลือกใช้ชุดสีให้น้อยที่สุด การใช้พาเลตสีที่มีสีแค่สองหรือสามสีเป็นสิ่งที่เราแนะนำ การใช้สีหลากหลายเกินไปจะทำให้ dark UI ดูรกตาได้
ออกแบบสวิตช์เปลี่ยนดีไซน์
แม้ว่า dark UI จะเหมาะสมกับตอนกลางคืนเสียมากกว่า แต่แอปฯ นั้นก็ควรใช้ตอนกลางวันได้ด้วย สิ่งหนึ่งที่ทำได้คือการออกแบบสวิตช์เปลี่ยนสไตล์ของแอป ซึ่งผู้ใช้สามารถเลือกได้ว่าจะใช้ UI สีมืดหรือสว่าง เห็นได้จากที่ Google Maps เปลี่ยนชุดสีมืดและสว่างโดยอัตโนมัติไปตามเวลาในแต่ละวัน
มาออกแบบ Dark UI ให้มีประสิทธิภาพกัน
การตัดสินใจเลือกใช้ dark UI นั้นควรเป็นไปอย่างระมัดระวัง นักออกแบบควรทำความเข้าใจผลดีและผลเสียของ dark UI อย่างลึกซึ้ง และยังต้องพิจารณาด้วยว่าเหมาะกับแบรนด์และคอนเทนต์หรือไม่ แม้ว่า dark UI จะช่วยยกระดับผลิตภัณฑ์และประสบการณ์ผู้ใช้ในหลายๆ ด้าน นักออกแบบควรระวังไม่ให้เกิดข้อผิดพลาดเพื่อสร้าง interface ที่ทรงพลัง
เยี่ยมชมหน้าบริการของเราและเรียนรู้เกี่ยวกับการออกแบบ UI ที่มอร์โฟซิสได้เลย
