Human Interface Guidelines — คืออะไร หลักการออกแบบ iOS

Human Interface Guidelines คืออะไร?

Human Interface Guidelines (HIG) คือเอกสารอย่างเป็นทางการของ Apple สำหรับการออกแบบอินเทอร์เฟซผู้ใช้ เอกสารประกอบด้วยคำอธิบายของคอมโพเนนต์ระบบมาตรฐานทั้งหมด กฎการใช้งาน ข้อกำหนดเกี่ยวกับท่าทาง อนิเมชัน การพิมพ์ และจานสี Apple เผยแพร่ HIG ครั้งแรกสำหรับ Macintosh ในปี 1987 และตั้งแต่นั้นมาเอกสารก็พัฒนาไปพร้อมกับแพลตฟอร์ม ตั้งแต่ iOS 1 (2007) จนถึงเวอร์ชันปัจจุบัน iOS 18, iPadOS 18, macOS 15 Sequoia, watchOS 11 และ tvOS 18 HIG ครอบคลุมสามระดับ: ปรัชญาการออกแบบ (หลักการ) คอมโพเนนต์ระบบ (องค์ประกอบ UI) และคำแนะนำทางเทคนิค (ขนาดหน้าจอ Safe Area Dynamic Type) สำหรับนักพัฒนา HIG ทำหน้าที่เป็นแหล่งความจริงเพียงแหล่งเดียวในการตัดสินใจออกแบบ หากคอมโพเนนต์ถูกอธิบายใน HIG ก็ไม่จำเป็นต้องประดิษฐ์ขึ้นใหม่

โครงสร้างของเอกสาร Human Interface Guidelines

เอกสาร HIG แบ่งออกเป็นสามส่วนใหญ่: «Foundations» (หลักการพื้นฐานและรูปแบบ), «Platforms» (ส่วนของแพลตฟอร์มสำหรับ iOS, iPadOS, macOS, watchOS, tvOS, visionOS) และ «Components» (แคตตาล็อกขององค์ประกอบ UI ของระบบทั้งหมด) แต่ละคอมโพเนนต์อธิบายด้วยเทมเพลตเดียวกัน: วัตถุประสงค์ กายวิภาค พฤติกรรม แนวทางปฏิบัติที่ดีที่สุด และตัวอย่าง ตัวอย่างเช่น ส่วน Navigation Bars มีข้อมูลจำเพาะเกี่ยวกับความสูง (44pt ในแนวตั้ง 32pt ในแนวนอนบน iPhone) กฎการวางปุ่ม และข้อจำกัดในการปรับแต่ง HIG ยังรวมถึงคำแนะนำเกี่ยวกับการเข้าถึง — VoiceOver, Dynamic Type, ลดการเคลื่อนไหว — ซึ่งจำเป็นต้องปฏิบัติตามเพื่อเผยแพร่ใน App Store

เหตุใด HIG จึงสำคัญสำหรับนักพัฒนา iOS

การปฏิบัติตาม Human Interface Guidelines ส่งผลโดยตรงต่อความสำเร็จของแอปพลิเคชันใน App Store ในระหว่างการตรวจสอบ Apple จะตรวจสอบการปฏิบัติตาม HIG — ท่าทางที่ไม่ได้มาตรฐาน คอมโพเนนต์ระบบที่ถูกแทนที่ หรือการละเมิดลำดับชั้นการนำทางอาจทำให้ถูกปฏิเสธ ตาม Apple Developer Program License Agreement (2025) แอปพลิเคชันที่ใช้ API ของระบบอย่างไม่เหมาะสมจะถูกปฏิเสธในระหว่างการตรวจทาน ที่ IT Sectr เราปฏิบัติตาม HIG ในทุกโปรเจกต์ iOS ตั้งแต่ปี 2017 ซึ่งช่วยลดเวลาในการตรวจทานและเพิ่มคะแนนของผู้ใช้ นอกจากนี้ แอปพลิเคชันที่สอดคล้องกับ HIG ยังได้รับอันดับที่สูงขึ้นในการค้นหา App Store เนื่องจากประสบการณ์ผู้ใช้ที่ดีขึ้น

หลักการสำคัญของ HIG Apple

หลักการพื้นฐานหกประการ ของ Human Interface Guidelines กำหนดปรัชญาการออกแบบของ Apple หลักการแรก — Aesthetic Integrity (ความสมบูรณ์ทางสุนทรียศาสตร์): ลักษณะของอินเทอร์เฟซควรสอดคล้องกับฟังก์ชันของมัน หลักการที่สอง — Consistency (ความสม่ำเสมอ): องค์ประกอบที่เหมือนกันทำงานเหมือนกันในทุกแอปพลิเคชันของระบบ หลักการที่สาม — Direct Manipulation (การจัดการโดยตรง): ผู้ใช้โต้ตอบกับเนื้อหาโดยตรง (ปัด แตะ บีบเพื่อซูม) แทนที่จะผ่านตัวควบคุมเชิงนามธรรม

ความชัดเจน ลำดับชั้น และผลตอบรับ

Clarity (ความชัดเจน) ต้องการให้ข้อความอ่านง่าย ไอคอนเข้าใจง่าย และการนำทางคาดการณ์ได้ Dynamic Type และ SF Symbols เป็นเครื่องมือของ Apple ในการรักษาความชัดเจนบนทุกอุปกรณ์ Deference (ความเคารพ) หมายความว่าอินเทอร์เฟซไม่ควรแข่งขันกับเนื้อหา: พื้นหลังเบลอ แถบเครื่องมือแบบมินิมอล และองค์ประกอบโปร่งใส (ในสไตล์ iOS 7+) นำหลักการนี้ไปใช้ Feedback (ผลตอบรับ) รับประกันว่าทุกการกระทำของผู้ใช้จะได้รับการตอบสนองทางภาพหรือการสัมผัส: การเน้นปุ่ม การตอบสนองแบบสัมผัส อนิเมชันการเปลี่ยนผ่าน การละเมิดหลักการผลตอบรับเป็นสาเหตุหนึ่งที่พบบ่อยของคะแนนต่ำใน App Store ตามข้อมูลของ Appfigures (2025)

ส่วนสำคัญของ Human Interface Guidelines

Human Interface Guidelines มีข้อมูลจำเพาะโดยละเอียดของแต่ละคอมโพเนนต์ระบบ Apple ส่วน Bars อธิบาย Navigation Bar (ความสูงมาตรฐาน 44pt), Tab Bar (49pt), Toolbar (44pt) และ Search Bar ส่วน Views รวมถึง Table View พร้อมเซลล์ประเภทพื้นฐานและกำหนดเอง, Collection View ที่รองรับ compositional layout, Scroll View และ Text View ส่วน Controls ระบุ Button, Slider, Switch (เป้าหมายขั้นต่ำ — 44×44pt), Segmented Control, Stepper และ Date Picker สำหรับแต่ละตัวควบคุมจะระบุขนาดพื้นที่เป้าหมาย (พื้นที่สัมผัสขั้นต่ำ — 44×44pt ตามแนวทางของ Apple) สถานะภาพ (ปกติ เน้น ปิดใช้งาน เลือก) และอนิเมชันการเปลี่ยนผ่าน

การพิมพ์และสีใน HIG

Apple แนะนำให้ใช้ฟอนต์ระบบ San Francisco (SF Pro สำหรับ iOS/macOS, SF Compact สำหรับ watchOS) กับ Dynamic Type — การปรับขนาดอัตโนมัติตามการตั้งค่าผู้ใช้ HIG กำหนดสไตล์ข้อความ 11 แบบ: Large Title (34pt), Title 1 (28pt), Title 2 (22pt), Title 3 (20pt), Headline (17pt, ตัวหนากึ่ง), Body (17pt), Callout (16pt), Subhead (15pt), Footnote (13pt), Caption 1 (12pt), Caption 2 (11pt) จานสี HIG รวมถึงสีระบบ: labelColor, secondaryLabelColor, systemBackgroundColor, systemGroupedBackgroundColor — รองรับธีมสว่างและมืด การใช้สีระบบรับประกันการแสดงผลที่ถูกต้องบนทุกอุปกรณ์และการตั้งค่าการเข้าถึง

คุณสมบัติเฉพาะแพลตฟอร์มใน HIG

แต่ละแพลตฟอร์ม Apple มีองค์ประกอบอินเทอร์เฟซเฉพาะที่อธิบายใน HIG สำหรับ iOS ได้แก่ Tab Bar (การนำทางด้านล่าง), Navigation Bar (แถบด้านบนพร้อมชื่อเรื่องและปุ่ม), Sheets (แผงโมดอล), Activity View (การแชร์ของระบบ), Live Activities และ Dynamic Island สำหรับ iPadOS เพิ่ม Split View, Slide Over, Popover Presentation และ Keyboard Shortcuts สำหรับ macOS — Menu Bar, Dock, Sheets, Panels, Sidebar, Toolbar พร้อม NSToolbarItem สำหรับ watchOS — Complications, Digital Crown, Scribble, Swipe Gestures และ Always-On Display สำหรับ tvOS — Focus Engine, Parallax Icons, Top Shelf

การปรับการออกแบบระหว่างแพลตฟอร์ม

HIG แนะนำไม่ให้ย้ายองค์ประกอบระหว่างแพลตฟอร์มแบบกลไก: Tab Bar บน iOS ไม่เทียบเท่ากับ Sidebar บน macOS แม้ว่าทั้งสองจะแก้ปัญหาการนำทางก็ตาม สำหรับแอปพลิเคชันหลายแพลตฟอร์ม Apple มี Mac Catalyst และ SwiftUI ซึ่งปรับอินเทอร์เฟซให้เข้ากับแพลตฟอร์มเป้าหมายโดยอัตโนมัติขณะปฏิบัติตาม HIG เมื่อพัฒนาด้วย SwiftUI ที่ IT Sectr เราใช้ตัวปรับแต่งเฉพาะแพลตฟอร์ม: .navigationViewStyle, .tabViewStyle และ .pickerStyle ซึ่งรับประกันการปฏิบัติตามแนวทางดั้งเดิม นอกจากนี้ HIG ยังอธิบายข้อกำหนดในการปรับให้เข้ากับ Dynamic Type, ข้อความขยาย, ลดการเคลื่อนไหว และเพิ่มคอนทราสต์

วิธีนำ HIG ไปใช้ในทางปฏิบัติ

การนำ Human Interface Guidelines ไปใช้เริ่มต้นด้วยการศึกษาส่วน «App Architecture» ซึ่งอธิบายโครงสร้างของแอปพลิเคชัน iOS ทั่วไป: หน้าจอเริ่มต้น การแนะนำ หน้าจอโมดอล กราฟการนำทาง และสถานะการโหลด ขั้นตอนแรกคือเลือกรูปแบบการนำทาง (แบบลำดับชั้นกับ Navigation Controller, แบบราบกับ Tab Bar, แบบโมดอลกับ Sheets หรือแบบผสม) ขั้นตอนที่สองคือกำหนดลำดับชั้นของหน้าจอและตรวจสอบให้แน่ใจว่าแต่ละหน้าจอสอดคล้องกับเทมเพลต HIG ขั้นตอนที่สามคือเลือกคอมโพเนนต์ระบบสำหรับแต่ละงาน: Table View สำหรับรายการ, Collection View สำหรับกริด, Page Control สำหรับม้าหมุน

การตรวจสอบการปฏิบัติตาม HIG ก่อนเผยแพร่

Apple มี Xcode Preview Assets และ Accessibility Inspector สำหรับตรวจสอบการปฏิบัติตาม HIG แนะนำให้ทำตามรายการตรวจสอบ: พื้นที่เป้าหมายทั้งหมด > 44pt, ข้อความใช้ Dynamic Type, สีรองรับธีมมืด, การนำทางเป็นไปตามลำดับชั้น HIG, ท่าทางไม่ขัดแย้งกับท่าทางของระบบ (เช่น ปัดกลับไม่ถูกแทนที่) ที่ IT Sectr เราดำเนินการตรวจสอบ HIG ก่อนทุกการเปิดตัว ซึ่งช่วยลดการถูกปฏิเสธในการตรวจสอบ App Store นอกจากนี้ App Store Review Guidelines (ส่วน 4.0 «Design») อ้างอิงถึง HIG โดยตรง: แอปพลิเคชันที่ละเมิดแนวทางอย่างร้ายแรงจะถูกปฏิเสธจนกว่าจะแก้ไขการไม่ปฏิบัติตาม