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

> ที่มา: https://phygital.co.th/insights/flat-design-ui-history-guide · เผยแพร่ 28 สิงหาคม 2566 · อ่าน 11 นาที · โดย PARANATH PANARATANA

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

## Key Takeaways

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

คำถามที่ธุรกิจต้องตอบเมื่อทำหน้าจอให้แบนลงไม่ใช่เรื่องความสวย แต่เป็นเรื่องที่ลูกค้าหาปุ่มเจอหรือไม่ เมื่อปุ่มไม่มีขอบ ไม่มีเงา และไม่นูน บทนี้อ่าน[คู่มือ iOS 7 UI Transition Guide](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/TransitionGuide/) ที่ Apple เขียนให้นักพัฒนาช่วงเปิดตัว iOS 7 ซึ่งตอบคำถามนี้ไว้ตรง ๆ และยังใช้วางแผนรับการเปลี่ยนดีไซน์ของระบบรอบต่อไปได้

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

## Flat Design ในการเปิดตัว iOS 7

[ข่าวเปิดตัวของ Apple วันที่ 10 มิถุนายน 2013](https://www.apple.com/newsroom/2013/06/10Apple-Unveils-iOS-7/) เรียก iOS 7 ว่าเป็นการอัปเดตครั้งสำคัญที่สุดนับตั้งแต่ iPhone รุ่นแรก ระบบถูกออกแบบใหม่ทั้งหมดด้วยการเคลื่อนไหวที่แนบเนียน ชุดสีใหม่ และชั้นของหน้าจอที่แยกหน้าที่ชัดเจน ตัวอักษรถูกปรับให้ดูสะอาดและเรียบขึ้น ข่าวเดียวกันระบุว่าหน้าตาใหม่นี้ออกแบบให้ผู้ใช้เดิมจำได้ทันที

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

| หลักของ iOS 7 | คำอธิบายในคู่มือ                                                                     |
| -------------- | --------------------------------------------------------------------------------------- |
| Deference      | หน้าจอช่วยให้ผู้ใช้เข้าใจและใช้เนื้อหา แต่ไม่แข่งกับเนื้อหา                |
| Clarity        | ข้อความอ่านได้ทุกขนาด ไอคอนแม่นยำ การตกแต่งเบาและเหมาะสม เน้นที่การใช้งาน |
| Depth          | ชั้นของภาพและการเคลื่อนไหวที่สมจริงช่วยให้ผู้ใช้เข้าใจและเพลิดเพลิน       |

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

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

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

## ปุ่มที่ไม่มีขอบและไม่มีพื้นหลัง

[หน้า Controls ของคู่มือ](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/TransitionGuide/Controls.html) ระบุว่าปุ่มสี่เหลี่ยมมุมมนถูกเลิกใช้ใน iOS 7 และให้ใช้ปุ่มระบบแทน ปุ่มระบบของ iOS 7 ไม่มีขอบและไม่มีพื้นหลัง บรรจุได้ทั้งสัญลักษณ์หรือข้อความ และใช้สีของตัวเองหรือรับสีจากชิ้นที่อยู่ด้านบน แอปเดิมที่ใช้ปุ่มมุมมนจะถูกเปลี่ยนเป็นหน้าตาใหม่อัตโนมัติเมื่อสร้างด้วยชุดเครื่องมือของ iOS 7

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

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

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

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

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

## สีหลักหนึ่งสีบอกว่าอะไรกดได้

เมื่อปุ่มไม่มีกรอบ สิ่งที่แยกข้อความที่กดได้ออกจากข้อความธรรมดาคือสี [หน้า Appearance Customization ของคู่มือ](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/TransitionGuide/AppearanceCustomization.html) ระบุว่าใน iOS 7 สี tint เป็นคุณสมบัติของทุกชิ้นบนหน้าจอ และแอป iOS 7 มักใช้ tint กำหนดสีหลักหนึ่งสีที่บอกว่าอะไรโต้ตอบได้และอะไรกำลังถูกเลือก

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

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

ไม่เสมอ คำถามที่ต้องตอบก่อนคือสีแบรนด์ถูกใช้ที่อื่นบนหน้าจอด้วยหรือเปล่า ถ้าสีเดียวกันอยู่บนหัวข้อ เส้นตกแต่ง และภาพประกอบ ลูกค้าจะแยกไม่ออกว่าอะไรกดได้ หลักของ iOS 7 คือใช้สีหลักกับสิ่งที่โต้ตอบได้เป็นหลัก ธุรกิจจึงมีสองทาง คือสงวนสีแบรนด์ไว้ให้ปุ่มและลิงก์แล้วใช้สีอื่นกับการตกแต่ง หรือใช้สีแบรนด์ตกแต่งแล้วเลือกสีอื่นเป็นสีของสิ่งที่กดได้ ความต่างของสีปุ่มกับพื้นหลังที่ต้องผ่านเกณฑ์อธิบายไว้ในบทความ [ทฤษฎีสี (Color Theory) และจิตวิทยาสี บนป้ายร้านและบนจอ](https://phygital.co.th/insights/color-theory-psychology-branding-guide)

## แบนลงแต่ยังมีชั้นและการเคลื่อนไหว

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

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

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

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

## แอปสามแบบ รื้อมากหรือรื้อน้อยต่างกัน

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

| ประเภทแอป | ความหมายในคู่มือ                                         | งานเมื่อระบบเปลี่ยนดีไซน์                                                     |
| ---------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------- |
| Standard   | ใช้ส่วนประกอบมาตรฐานของระบบทั้งหมดโดยไม่ปรับแต่ง  | ส่วนใหญ่ปรับเล็กน้อยและรองรับท่าทางใหม่ของระบบ                          |
| Custom     | หน้าจอออกแบบเองทั้งหมด ไม่ใช้ส่วนประกอบของระบบเลย | ถ้าหน้าตาเดิมยังเหมาะก็แทบไม่ต้องทำ ถ้าอยากเปลี่ยนต้องทำเองทั้งหมด |
| Hybrid     | ผสมส่วนประกอบมาตรฐานกับส่วนที่ทำเอง                 | ต้องเช็กว่าส่วนที่ปรับแต่งยังเข้ากับส่วนมาตรฐานหน้าตาใหม่            |

ที่มา: หน้า 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 ไม่ได้ทิ้งผู้ใช้ให้เดา สีหลักหนึ่งสีบอกว่าอะไรกดได้ ชั้นโปร่งแสงกับการเคลื่อนไหวแทนที่เงา และการหรี่สีบอกว่าอะไรยังใช้ไม่ได้ คู่มือยังเตือนว่าแอปที่เลียนแบบหน้าตาระบบเองทั้งหมดจะดูล้าสมัยทันทีเมื่อระบบเปลี่ยน ธุรกิจที่ปรับหน้าจอให้แบนจึงควรกำหนดสีของสิ่งที่กดได้ให้ชัด และใช้ส่วนประกอบมาตรฐานในส่วนที่ไม่ต้องเป็นเอกลักษณ์

## คำถามที่พบบ่อย (FAQ)

### Flat Design เริ่มที่ iOS 7 ใช่ไหม

ไม่ใช่จุดเริ่มต้นแรก งานกราฟิกที่ลดการตกแต่งและใช้พื้นที่ว่างกับตัวอักษรเป็นหลักมีมาก่อนยุคหน้าจอ เช่น โปสเตอร์ในบทความ [Swiss Style กริดที่รองรับสองภาษาและใช้ซ้ำได้ทั้งปี](https://phygital.co.th/insights/swiss-style-international-typographic-design-guide) iOS 7 เป็นจุดเปลี่ยนที่คนจำนวนมากเห็นพร้อมกันเพราะเปลี่ยนหน้าตาของระบบทั้งเครื่องในการอัปเดตครั้งเดียว

### เว็บไซต์ธุรกิจต้องทำตามคู่มือ iOS ไหม

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

### รีดีไซน์แอปใหม่ทั้งหมดกับปรับเฉพาะส่วนต่างกันอย่างไร

คู่มือแนะนำให้ถามสองข้อก่อนเริ่ม คือแอปใช้ระบบจัดวางที่ปรับตัวตามขนาดหน้าจอและตัวอักษรหรือไม่ และแอปเป็นแบบ Standard, Custom หรือ Hybrid คำตอบบอกขนาดงานโดยตรง ธุรกิจที่จ้างทีมภายนอกควรขอให้ทีมตอบสองข้อนี้เป็นลายลักษณ์อักษรก่อนตีราคา และควรรู้ว่าใครถือซอร์สโค้ด ซึ่งอธิบายไว้ในบทความ [รับทำเว็บไซต์ เว็บแอป และโมบายแอป ใครถือโดเมนและซอร์สโค้ด](https://phygital.co.th/insights/web-mobile-app-development-agency)

### ไอคอนในแอปต้องแบนตามปุ่มด้วยไหม

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

### ระบบดีไซน์ที่มาหลัง Flat Design มีข้อมูลวิจัยอะไรบ้าง

ตัวอย่างหนึ่งคือการปรับ Material Design ของ Google ในรอบ Material 3 Expressive ซึ่งทีมวิจัยเผยแพร่ตัวเลขจากการทดลองหลายสิบครั้ง อ่านต่อได้ในบทความ [Material Design ข้อมูล 46 การศึกษาเบื้องหลัง M3 Expressive](https://phygital.co.th/insights/material-design-google-system-guide)

## เมื่อลูกค้าต้องเดาว่าปุ่มสั่งซื้ออยู่ตรงไหน ยอดขายก็หลุดไปตรงนั้นโดยไม่มีใครรายงาน

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

- [นัดประชุมผ่าน Google Meet](https://calendar.app.google/DotQdE7Ca8LZG6Us5)
- [เพิ่มเพื่อนใน LINE](https://lin.ee/J8Qq8Do)