สตูดิโอออกแบบ

หน้าตาระบบเลือกได้ ไม่ใช่มีแบบเดียวแล้วยัดให้ทุกคน

หกสไตล์ที่ทำมาแล้วกับงานจริง ทุกสไตล์ผ่านกติกาเดียวกันเรื่องการใช้งาน — เปลี่ยนแค่บุคลิก ไม่เปลี่ยนความง่าย เลือกจากงานที่ทีมคุณต้องทำทุกวัน ไม่ใช่เลือกจากความสวยอย่างเดียว

สไตล์ที่ 1 · ใช้บ่อยที่สุด

Monday Board — บอร์ดกลุ่มสี

งานเป็นแถว สถานะเป็นช่องสีที่กดเปลี่ยนได้ทันที เหมาะกับทีมที่ต้องเห็นว่า "ตอนนี้ใครค้างอะไร" ตลอดเวลา

  • แถบเมนูด้านข้างแบ่งเป็นหมวด พับเก็บได้
  • กลุ่มงานมีสีประจำ ยุบ/ขยายได้เหมือนกระดาน
  • สลับดูแบบตารางหรือแบบการ์ดได้ในคลิกเดียว
  • แผงรายละเอียดเลื่อนออกจากขอบขวา ไม่ต้องเปลี่ยนหน้า
ตัวอย่างสไตล์ Monday Board
สไตล์ที่ 2 · มาตรฐานของระบบงานจริง

Clean SaaS — ขาวสะอาดแบบแอปทำงาน

เน้นตัวเลขและตารางอ่านง่าย ไม่มีของตกแต่งแย่งสายตา เป็นสไตล์ที่ใช้กับระบบที่คนต้องนั่งทำงานทั้งวัน

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

Soft Rounded — นุ่ม มนตา ใช้ง่าย

มุมมนขึ้น ปุ่มเป็นแคปซูล ช่องไฟกว้าง เหมาะกับระบบที่คนหน้างานหรือพนักงานทั่วไปต้องใช้เอง ไม่ใช่เฉพาะฝ่ายออฟฟิศ

  • ปุ่มใหญ่ กดไม่พลาดแม้บนมือถือ
  • การ์ดเนื้อหาแยกเป็นก้อน อ่านทีละเรื่อง
  • ลดเส้นตารางลง ใช้ระยะห่างแทนเส้นแบ่ง
  • เหมาะกับงานที่ต้องสอนคนใช้ใหม่บ่อย ๆ
ตัวอย่างสไตล์ Soft Rounded
สไตล์ที่ 4

Editorial — การ์ดใหญ่ บุคลิกแบรนด์ชัด

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

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

Dashboard-first — เปิดมาเห็นตัวเลขก่อน

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

  • ตัวเลขสำคัญอยู่แถวบนสุด ไม่ต้องเลื่อนหา
  • รายการที่ต้องตัดสินใจแยกออกมาเป็นคิวเดียว
  • กราฟใช้เท่าที่จำเป็น เน้นตัวเลขกับแนวโน้มสั้น ๆ
  • กดจากตัวเลขเข้าไปดูรายการจริงได้ทุกจุด
ตัวอย่างสไตล์ Dashboard-first
สไตล์ที่ 6 · ใหม่

Ops Console — จอเฝ้างานโทนเข้ม

สำหรับทีมที่ต้องจ้องจอทั้งวัน เช่น ทีมโทร ทีมแชท หรือห้องคุมงาน พื้นเข้มลดแสงเข้าตา ตัวเลขและสถานะเด้งขึ้นมาแทน

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

สวยแบบไหนก็ได้ แต่ต้องใช้งานได้เหมือนกันหมด

สไตล์เปลี่ยนได้ แต่ข้อเหล่านี้ไม่เคยยกเว้นให้งานไหน

ฟอร์มเป็นหน้าเต็ม

หน้ากรอกและหน้ารายละเอียดมีลิงก์ของตัวเอง ส่งต่อให้เพื่อนเปิดดูได้ ไม่ใช่กล่องเด้งที่หายเมื่อกดพลาด

สามสีเท่านั้น

แดงคือผิด เหลืองคือเตือน เขียวคือผ่าน มีทั้งไอคอนและคำกำกับ คนตาบอดสีก็อ่านออก

กดแล้วต้องรู้ผล

ทุกปุ่มมีสถานะกำลังทำงานและข้อความบอกผล ไม่มีปุ่มที่กดแล้วเงียบ

มือถือใช้ได้จริง

ตัวหนังสือ 16px ขึ้นไป ปุ่มสูงอย่างน้อย 44px ช่องกรอกไม่ทำให้จอซูมเอง

ตอนโหลดไม่ใช่จอขาว

แสดงโครงหน้าไว้ก่อน คนใช้รู้ว่าระบบกำลังทำงาน ไม่ใช่ค้าง

ข้อความเป็นภาษาคน

ไม่มี error ดิบจากระบบโผล่ใส่หน้าคนใช้ บอกว่าเกิดอะไรและต้องทำอะไรต่อ

คลังงานออกแบบ

ทุกหน้าจอที่ทำมา เปิดดูได้ทั้งหมด

ภาพทั้งหมดเป็นหน้าจริงจากระบบที่เปิดใช้อยู่ กดที่ภาพเพื่อเข้าไปลองเอง

ชอบสไตล์ไหน บอกได้เลย

ถ้ายังไม่แน่ใจ เราเริ่มจากทำหน้าจอตัวอย่างให้ดูก่อน 1 ชุด แล้วค่อยเคาะว่าจะเดินหน้าแบบไหน

ดูระบบตัวอย่างทั้งหมด