ออกแบบ Reverie ให้สงบขึ้น: จากหน้าแชทสู่ทั้งผลิตภัณฑ์

หากคุณเปิดบทสนทนาในช่วงไม่กี่วันที่ผ่านมา คุณอาจรู้สึกว่ามีบางอย่างเปลี่ยนไป

หน้าแชทดูสงบขึ้นเล็กน้อย ข้อความอ่านง่ายขึ้น ส่วนควบคุมเบาลง และแผงหรือหน้าต่างต่าง ๆ ไม่แย่งความสนใจจากบทสนทนามากเหมือนเดิม ฟังก์ชันที่คุ้นเคยยังอยู่ที่เดิม แต่พื้นที่รอบตัวละครของคุณรู้สึกผ่อนคลายขึ้น

เราเริ่มจากหน้าแชท เพราะเป็นที่ที่หลายคนใช้เวลาใน Reverie มากที่สุด และเป็นสถานที่ที่เหมาะที่สุดในการทดสอบคำถามหลักของการออกแบบใหม่นี้: อินเทอร์เฟซควรรู้สึกอย่างไร เมื่อต้องใช้งานสบายตลอดทั้งบทสนทนา ไม่ใช่เพียงสร้างความประทับใจแรกที่ดี?

สิ่งที่คุณเห็นไม่ใช่การปรับหน้าเดียว แต่เป็นส่วนแรกของระบบการออกแบบใหม่ที่ปรากฏให้เห็น ปัจจุบันระบบนี้ครอบคลุมทั้งผลิตภัณฑ์ ตั้งแต่การค้นพบและหน้าตัวละคร ไปจนถึงเครื่องมือสร้างสรรค์ เรื่องราว การชำระเงิน รางวัล การตั้งค่า และหน้าจอเล็ก ๆ ระหว่างกัน

Reverie เป็นผลิตภัณฑ์ที่มีการแสดงออกชัดเจนเสมอ บุคลิกนั้นอยู่ในเส้นขอบที่เด่น เงาที่มองเห็นได้ การ์ดหลายชั้น ส่วนควบคุมหลากสี และพื้นผิวที่เหมือนวัตถุมากกว่าสี่เหลี่ยมบนจอ ทั้งหมดทำให้ผลิตภัณฑ์อบอุ่นและจดจำได้

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

เราไม่ได้ออกแบบ Reverie ใหม่เพื่อลดเอกลักษณ์ แต่เพื่อให้เอกลักษณ์นั้นเกิดจากประสบการณ์เอง

เบาขึ้น แต่ไม่เย็นลง

คำว่า “เบา” อาจกลายเป็นพื้นหลังสีขาว ตัวอักษรสีเทาบาง และคอมโพเนนต์ที่จางจนดูไม่เสร็จ นั่นไม่ใช่เป้าหมายของเรา

ระบบใหม่สงบขึ้นแต่ยังอบอุ่น เราเปลี่ยนจากสีขาวจัดเป็นพื้นผิวสีกลางที่มีเฉดอ่อน ตัวอักษรเข้มและหนักขึ้นในจุดที่ต้องอ่านนาน เส้นขอบเรียบลง เงาตื้นลง และใช้สีอย่างมีจุดหมาย น้ำหนักทางสายตาลดลง โดยยังรักษาความรู้สึกว่า Reverie คือพื้นที่สำหรับเรื่องราวและความสัมพันธ์

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

ตัวอักษรสำหรับการอ่านที่ยาวนาน

การเปลี่ยนแปลงสำคัญอย่างหนึ่งคือการทำให้ลำดับชั้นของตัวอักษรชัดขึ้น หัวเรื่องใหญ่ยังมีเอกลักษณ์ แต่เนื้อหาหลักหนักแน่นขึ้น ป้ายสำคัญ การนำทาง และการกระทำมองเห็นได้เร็วขึ้น ส่วนข้อความรองยังคงถอยหลังโดยไม่จางจนอ่านยาก

หลักการนั้นเรียบง่าย:

• ข้อความยาวควรสงบและอ่านได้มั่นคง
• ควรเข้าใจการกระทำได้ก่อนอ่านทุกป้าย
• ข้อมูลรองถอยได้ แต่ต้องไม่หายไป
• หน้ายังคงอ่านได้บนจอ ธีม และแสงที่ต่างกัน

ตัวอักษรที่ดีไม่เรียกร้องความสนใจ แต่ช่วยให้เรารักษาความสนใจไว้ได้

ภาษาคอมโพเนนต์เดียวทั่วผลิตภัณฑ์

นี่ไม่ใช่การเปลี่ยนหน้าตาทีละหน้า เราสร้างภาษาคอมโพเนนต์ร่วมที่อยู่ใต้ผลิตภัณฑ์ขึ้นใหม่

ปุ่ม การ์ด หน้าต่าง เมนู แท็บ ฟอร์ม ตาราง ทูลทิป การแจ้งเตือน แผงเลื่อน ป็อปโอเวอร์ และการนำทาง ใช้กฎเดียวกันสำหรับ:

• ความโค้งและคอนทราสต์ของเส้นขอบ
• สีและระดับของพื้นผิว
• สถานะโฟกัส โฮเวอร์ และกด
• น้ำหนักตัวอักษรและระยะห่าง
• สีที่สื่อความหมาย

ความสอดคล้องนี้สำคัญกว่าการเลือกภาพใดภาพหนึ่ง เมื่อการกระทำแบบเดียวกันดูและทำงานเหมือนกันทุกที่ ผู้ใช้ใช้แรงตีความน้อยลง การกระทำที่อันตรายดูอันตราย ตัวเลือกที่เลือกดูถูกเลือก และปุ่มหลักหาได้ง่ายโดยไม่ต้องให้ทุกปุ่มแข่งขันกัน

เรายังเพิ่มรูปแบบร่วมสำหรับสถานะเน้นและสำเร็จ เพื่อไม่ให้แต่ละฟีเจอร์สร้างสีหรือไล่เฉดของตนเอง

ส่วนยาก: ตามหาข้อยกเว้น

การอัปเดตคอมโพเนนต์ปุ่มไม่ได้เปลี่ยนทุกปุ่มโดยอัตโนมัติ

ผลิตภัณฑ์สะสมการตัดสินใจเฉพาะจุด เช่น การ์ดราคาที่มีขอบของตนเอง หน้ารางวัลที่มีแสงพิเศษ หน้าต่างแชร์ที่มีพื้นหลังเฉพาะ หรือการ์ดที่สร้างโฮเวอร์ใหม่ ข้อยกเว้นเหล่านี้ทำให้การออกแบบใหม่ดูไม่เป็นหนึ่งเดียว

เราจึงตรวจมากกว่าคลังคอมโพเนนต์ ทั้งหน้าการตลาด การชำระเงิน รางวัล ความสำเร็จ การ์ดตัวละครและเรื่องราว หน้าต่างแชร์ การนำทาง สถานะว่าง แบนเนอร์ และหน้าที่ไม่ค่อยถูกเปิด

เราไม่ได้ลบข้อยกเว้นทั้งหมด บางช่วงต้องมีเอกลักษณ์เพื่อสื่อการเฉลิมฉลอง ความเร่งด่วน ความหายาก หรือสถานะ แต่ตอนนี้ช่วงเหล่านั้นขยายระบบแทนที่จะละเลยระบบ

ตกแต่งน้อยลง ปฏิสัมพันธ์ชัดขึ้น

เราเอาเอฟเฟกต์ที่ดูโต้ตอบได้แต่ไม่ให้ข้อมูลออก เงาหนักไม่อยู่บนทุกการ์ด การเคลื่อนไหวตอนโฮเวอร์ลดลง การไล่เฉดใช้เฉพาะจุดที่ต้องเน้น และเส้นขอบแสดงโครงสร้างโดยไม่ใส่ทุกอย่างไว้ในกล่องใหม่

ขณะเดียวกัน สถานะจริงชัดขึ้น:

• ตัวเลือกที่เลือกสื่อสถานะทั้งทางภาพและความหมาย
• ติดตามโฟกัสจากคีย์บอร์ดได้ง่าย
• การ์ดโต้ตอบใช้โฮเวอร์และโฟกัสแบบเดียวกัน
• ปุ่มสื่อระดับความสำคัญด้วยรูปแบบร่วม
• หน้าต่างและเมนูแยกจากพื้นหลังโดยไม่ดูหลุดจากผลิตภัณฑ์

เมื่อการตกแต่งลดลง เรามีพื้นที่ปรับปรุงการตอบสนอง อินเทอร์เฟซเคลื่อนไหวน้อยลงแต่สื่อสารมากขึ้น

การเข้าถึงเป็นส่วนหนึ่งของระบบภาพ

ระบบการออกแบบยังไม่สมบูรณ์หากอธิบายเพียงตอนใช้เมาส์

เราตรวจวงแหวนโฟกัส พฤติกรรมคีย์บอร์ด ความหมายของสถานะเลือก คอนทราสต์ และการ์ดโต้ตอบใหม่ บางส่วนควบคุมแจ้งเทคโนโลยีช่วยเหลือชัดขึ้นว่าอยู่ในสถานะกดหรือเลือก รายการเรื่องราวที่ทำงานเหมือนลิงก์สามารถโฟกัสและเปิดด้วยคีย์บอร์ดได้

การเปลี่ยนแปลงเหล่านี้ตั้งใจให้ละเอียดอ่อน การเข้าถึงไม่ควรเป็นโหมดแยก แต่ควรอยู่ในพฤติกรรมเริ่มต้น

รากฐานที่ดีกว่าสำหรับสิ่งต่อไป

ผลลัพธ์ที่มีค่าที่สุดไม่ใช่สี ความโค้ง หรือเงาใด แต่คือการที่ผลิตภัณฑ์มีคำตอบที่ขัดกันน้อยลงสำหรับคำถามการออกแบบเดียวกัน

เมื่อสร้างฟีเจอร์ใหม่ เราไม่ต้องตัดสินทุกอย่างจากศูนย์ ระบบมีคำตอบสำหรับหน้าต่าง ช่องกรอก และการ์ดที่ถูกเลือกอยู่แล้ว งานจึงเร็วขึ้นและประสบการณ์คาดเดาได้มากขึ้น

ความสอดคล้องไม่ได้หมายถึงทุกหน้าต้องเหมือนกัน แต่หมายถึงการให้ความคาดหวังที่มั่นคง เพื่อให้เนื้อหาเปลี่ยนได้โดยอินเทอร์เฟซยังคุ้นเคย

สิ่งที่เราอยากให้คุณรู้สึก

ในทางที่ดี คุณอาจไม่สังเกตมากนักในตอนแรก

Reverie ควรอ่านง่ายขึ้น ใช้งานสงบขึ้น และต่อเนื่องขึ้นเมื่อย้ายจากการค้นพบไปยังการสนทนา การสร้าง และเครื่องมือบัญชี การกระทำสำคัญเห็นเร็วขึ้น ส่วนควบคุมรองแย่งความสนใจน้อยลง และการใช้งานนาน ๆ สบายตาขึ้น

ตัวละครยังแสดงออกได้ เรื่องราวยังมีบรรยากาศ และช่วงเวลาที่ควรเฉลิมฉลองยังสดใสได้

อินเทอร์เฟซเพียงรู้ดีขึ้นว่าเมื่อไรควรพูด และเมื่อไรควรเงียบพอให้สิ่งอื่นมีความหมาย

---

ระบบการออกแบบใหม่ครอบคลุม Reverie แล้ว หากส่วนใดดีขึ้นอย่างชัดเจน—หรือยังรู้สึกไม่เข้าที่—บอกเราได้ในชุมชน Discord