Flat Design ปุ่ม​ไม่มี​ขอบ ลูกค้า​รู้​ได้​อย่างไร​ว่า​กด​ตรง​ไหน

คำถาม​ที่​ธุรกิจ​ต้อง​ตอบ​เมื่อ​ทำ​หน้า​จอ​ให้​แบน​ลง​ไม่ใช่​เรื่อง​ความ​สวย แต่​เป็น​เรื่อง​ที่​ลูกค้า​หา​ปุ่ม​เจอ​หรือ​ไม่ เมื่อ​ปุ่ม​ไม่มี​ขอบ ไม่มี​เงา และ​ไม่​นูน บท​นี้​อ่านคู่มือ iOS 7 UI Transition Guide ที่ Apple เขียน​ให้​นัก​พัฒนา​ช่วง​เปิด​ตัว iOS 7 ซึ่ง​ตอบ​คำถาม​นี้​ไว้​ตรง ๆ และ​ยัง​ใช้​วางแผน​รับ​การ​เปลี่ยน​ดีไซน์​ของ​ระบบ​รอบ​ต่อ​ไป​ได้

Flat Design คือ​แนว​การ​ออกแบบ​หน้า​จอ​ที่​ลด​เงา ลาย​พื้น​ผิว และ​การ​เลียน​แบบ​วัตถุ​จริง แล้ว​ใช้​สี ตัว​อักษร และ​พื้นที่​ว่าง​สื่อ​ความ​หมาย​แทน หนึ่ง​ใน​จุด​เปลี่ยน​ที่​ชัด​ที่สุด​คือ iOS 7 ของ Apple ในปี 2013 ซึ่ง​เปลี่ยน​หน้าตา​ของ​ระบบ​ที่​ผู้​ใช้​หลาย​ร้อย​ล้าน​คน​เห็น​ทุก​วัน​ใน​การ​อัปเดต​ครั้ง​เดียว

ข่าว​เปิด​ตัว​ของ Apple วัน​ที่ 10 มิถุนายน 2013 เรียก iOS 7 ว่า​เป็นการ​อัปเดต​ครั้ง​สำคัญ​ที่สุด​นับ​ตั้งแต่ iPhone รุ่น​แรก ระบบ​ถูก​ออกแบบ​ใหม่​ทั้งหมด​ด้วย​การ​เคลื่อนไหว​ที่​แนบ​เนียน ชุด​สี​ใหม่ และ​ชั้น​ของ​หน้า​จอ​ที่​แยก​หน้าที่​ชัดเจน ตัว​อักษร​ถูก​ปรับ​ให้​ดู​สะอาด​และ​เรียบ​ขึ้น ข่าว​เดียวกัน​ระบุ​ว่า​หน้าตา​ใหม่​นี้​ออกแบบ​ให้​ผู้​ใช้​เดิม​จำ​ได้​ทันที

Jony Ive ซึ่ง​เป็น​รอง​ประธาน​อาวุโส​ฝ่าย​ออกแบบ​ใน​เวลา​นั้น อธิบาย​ไว้​ใน​ข่าว​ว่า​ความ​เรียบ​ง่าย​ที่แท้​จริง​ไม่​ได้​หมาย​ถึง​แค่​การ​ไม่มี​ของ​รก​หรือ​การ​ตกแต่ง แต่​หมาย​ถึง​การ​จัด​ระเบียบ​ให้​ความ​ซับ​ซ้อน คู่มือ​สำหรับ​นัก​พัฒนา​สรุป​แนวคิด​เดียวกัน​เป็น​สาม​หลัก

ที่มา: หน้า Before You Start ของ iOS 7 UI Transition Guide

Flat Design แปล​ว่า​ไม่มี​มิติ​เลย​หรือ​ไม่

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

หน้า Controls ของ​คู่มือ ระบุ​ว่า​ปุ่ม​สี่เหลี่ยม​มุม​มน​ถูก​เลิก​ใช้​ใน iOS 7 และ​ให้​ใช้​ปุ่ม​ระบบ​แทน ปุ่ม​ระบบ​ของ iOS 7 ไม่มี​ขอบ​และ​ไม่มี​พื้น​หลัง บรรจุ​ได้​ทั้ง​สัญลักษณ์​หรือ​ข้อความ และ​ใช้​สี​ของ​ตัว​เอง​หรือ​รับ​สี​จาก​ชิ้น​ที่​อยู่​ด้าน​บน แอป​เดิม​ที่​ใช้​ปุ่ม​มุม​มน​จะ​ถูก​เปลี่ยน​เป็น​หน้าตา​ใหม่​อัตโนมัติ​เมื่อ​สร้าง​ด้วย​ชุด​เครื่อง​มือ​ของ iOS 7

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

ที่มา: หน้า Controls และ Bars ของ iOS 7 UI Transition Guide

ถ้า​อยาก​ให้​ปุ่ม​สำคัญ​มี​กรอบ​ต้อง​ทำ​อย่างไร

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

เมื่อ​ปุ่ม​ไม่มี​กรอบ สิ่ง​ที่​แยก​ข้อความ​ที่​กด​ได้​ออก​จาก​ข้อความ​ธรรมดา​คือ​สี หน้า Appearance Customization ของ​คู่มือ ระบุ​ว่า​ใน iOS 7 สี tint เป็น​คุณสมบัติ​ของ​ทุก​ชิ้น​บน​หน้า​จอ และ​แอป iOS 7 มัก​ใช้ tint กำหนด​สีห​ลัก​หนึ่ง​สี​ที่​บอก​ว่า​อะไร​โต้ตอบ​ได้​และ​อะไร​กำลัง​ถูก​เลือก

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

สี​แบรนด์​ควร​เป็น​สี​ของ​ปุ่ม​เสมอ​ไหม

ไม่​เสมอ คำถาม​ที่​ต้อง​ตอบ​ก่อน​คือ​สี​แบรนด์​ถูก​ใช้​ที่​อื่น​บน​หน้า​จอ​ด้วย​หรือ​เปล่า ถ้า​สี​เดียวกัน​อยู่​บน​หัวข้อ เส้น​ตกแต่ง และ​ภาพ​ประกอบ ลูกค้า​จะ​แยก​ไม่​ออก​ว่า​อะไร​กด​ได้ หลัก​ของ iOS 7 คือ​ใช้​สีห​ลัก​กับ​สิ่ง​ที่​โต้ตอบ​ได้​เป็น​หลัก ธุรกิจ​จึง​มี​สอง​ทาง คือ​สงวน​สี​แบรนด์​ไว้​ให้​ปุ่ม​และ​ลิงก์​แล้ว​ใช้​สี​อื่น​กับ​การ​ตกแต่ง หรือ​ใช้​สี​แบรนด์​ตกแต่ง​แล้ว​เลือก​สี​อื่น​เป็น​สี​ของ​สิ่ง​ที่​กด​ได้ ความ​ต่าง​ของ​สี​ปุ่ม​กับ​พื้น​หลัง​ที่​ต้อง​ผ่าน​เกณฑ์​อธิบาย​ไว้​ใน​บทความ ทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ

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

อีก​เรื่อง​ที่​คู่มือ​เน้น​คือ​ขนาด​ตัว​อักษร​ที่​เปลี่ยน​ได้ iOS 7 เปิด​ให้​ผู้​ใช้​ปรับ​ขนาด​ตัว​อักษร​ที่​ชอบ​ใน​การ​ตั้ง​ค่า และ​แนะนำ​ให้​แอป​ดึง​รูป​แบบ​ตัว​อักษร​ตาม​หน้าที่​ของ​ข้อความ เช่น เนื้อ​ความ เชิงอรรถ หรือ​หัวข้อ แอป​ที่​วาง​ตำแหน่ง​ด้วย​ตัวเลข​ตายตัว​ต้อง​รับ​ผิด​ชอบ​เอง​ว่า​หน้า​จอ​ยัง​จัด​เรียง​ถูก​เมื่อ​ขนาด​ตัว​อักษร​เปลี่ยน

หน้า​จอ​แบน​ที่​ดี​ต้อง​มี​อะไร​แทน​เงา

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

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

ที่มา: หน้า Before You Start ของ iOS 7 UI Transition Guide

แอป​แบบ​ไหน​เสี่ยง​ดู​ล้า​สมัย​ที่สุด

คู่มือ​ตอบ​ไว้​ตรง ๆ ว่า​แอป​ที่​ทำ​หน้าตา​เลียน​แบบ​ส่วน​ประกอบ​มาตรฐาน​ของ iOS 6 ขึ้น​มา​เอง​ทั้งหมด​น่า​จะ​ต้อง​แก้​มาก เพราะ​จะ​ดู​ล้า​สมัย​ทันที คู่มือ​ยัง​บอก​ว่า​ผู้​ใช้ iOS มัก​อัปเดต​เครื่อง​เร็ว​และ​คาด​หวัง​ให้​แอป​ที่​ชอบ​อัปเดต​ตาม หน้า Supporting Earlier iOS เสริม​ว่า​บน​เครื่อง iOS 7 กล่อง​แจ้ง​เตือน​ของ​ระบบ​ใช้​หน้าตา​ใหม่​เสมอ แม้​แอป​จะ​ยัง​ใช้​หน้าตา​เก่า ลูกค้า​จึง​เห็น​สอง​ยุค​ปน​กัน​บน​หน้า​จอ​เดียว

ต้อง​รองรับ​เครื่อง​รุ่น​เก่า​ด้วย ควร​เริ่ม​ปรับ​จาก​ฝั่ง​ไหน

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

ระบบ​ปฏิบัติ​การ​เปลี่ยน​หน้าตา​เป็น​รอบ ๆ และ​แต่ละ​รอบ​ทำให้​แอป​ที่​ไม่​พร้อม​ดู​เก่า​ทันที ห้า​ข้อ​นี้​ใช้​ตรวจ​แอป​หรือ​เว็บ​ที่​ธุรกิจ​มี​อยู่​ได้​ตั้งแต่​วัน​นี้

• ระบุ​ว่า​แอป​เป็น​แบบ​ไหน Standard, Custom หรือ Hybrid ตาม​ตาราง​ด้าน​บน
• หา​ส่วน​ที่​ทำ​เลียน​แบบ​ระบบ เช่น ปุ่ม แถบ​เมนู หรือ​กล่อง​แจ้ง​เตือน​ที่​วาด​ขึ้น​เอง แล้ว​เปลี่ยน​เป็น​ส่วน​ประกอบ​มาตรฐาน​เมื่อ​ทำได้
• กำหนด​สี​ของ​สิ่ง​ที่​กด​ได้​เป็น​ค่า​เดียว แล้ว​เช็​กว่า​ไม่มี​ข้อความ​ตกแต่ง​ใช้​สี​เดียวกัน
• ทดสอบ​กับ​ขนาด​ตัว​อักษร​ใหญ่​สุด​ของ​เครื่อง ว่า​ปุ่ม​และ​ข้อความ​ไม่​ทับ​กัน
• ให้​คน​ที่​ไม่​เคย​เห็น​หน้า​จอ​ลอง​หา​ปุ่ม​หลัก ถ้า​ต้อง​ถาม​ว่า​กด​ตรง​ไหน แปล​ว่า​สัญญาณ​ยัง​ไม่​พอ

Flat Design บน iOS 7 ปี 2013 ถอด​ขอบ​และ​พื้น​หลัง​ออก​จาก​ปุ่ม แต่​คู่มือ iOS 7 UI Transition Guide ของ Apple ไม่​ได้​ทิ้ง​ผู้​ใช้​ให้​เดา สีห​ลัก​หนึ่ง​สี​บอก​ว่า​อะไร​กด​ได้ ชั้น​โปร่งแสง​กับ​การ​เคลื่อนไหว​แทนที่​เงา และ​การ​หรี่​สี​บอก​ว่า​อะไร​ยัง​ใช้​ไม่​ได้ คู่มือ​ยัง​เตือน​ว่า​แอป​ที่​เลียน​แบบ​หน้าตา​ระบบ​เอง​ทั้งหมด​จะ​ดู​ล้า​สมัย​ทันที​เมื่อ​ระบบ​เปลี่ยน ธุรกิจ​ที่​ปรับ​หน้า​จอ​ให้​แบน​จึง​ควร​กำหนด​สี​ของ​สิ่ง​ที่​กด​ได้​ให้​ชัด และ​ใช้​ส่วน​ประกอบ​มาตรฐาน​ใน​ส่วน​ที่​ไม่​ต้อง​เป็น​เอกลักษณ์