ความแตกต่างด้านดีไซน์ 32 ข้อระหว่างแอป iOS และ Android

ไม่ใช่แค่การเปรียบเทียบแบบผิวเผิน แต่เป็นบทความที่ช่วยให้เข้าใจจุดเด่นของ UI ในแต่ละ OS ได้เป็นอย่างดี

ความแตกต่างพื้นฐาน

1. HIG vs. Material Design

2. หน่วย: pt vs. dp

3. หน้าจอ: 320pt x 568pt vs. 360dp x 640dp

4. ฟอนต์ : San Francisco vs. Roboto

5. แถบนำทางของ Android

6. Shadow และ Elevation ของ Material Design

7. การตั้งชื่อ:

→ Tab bar vs. Bottom Navigation Bar

→ Navigation Bar vs. Top App Bar,

→ Segmented Controls vs. Tabs

→ Alerts vs. Dialogs

→ Touch ID vs. Android Fingerprint

8. วิธีการนำทางระดับบนสุด

9. ความแตกต่างระหว่าง Tab bar กับ Bottom Navigation Bar

10. ความสามารถพิเศษของแท็บบน Android

11. ความแตกต่างของวิธีแสดงหน้ารอง

12. แพตเทิร์นการเรียกใช้ Navigation Drawer

13. ความแตกต่างของพฤติกรรมระหว่างการเลื่อน

14. ความแตกต่างของการค้นหา

ความแตกต่างของคอมโพเนนต์ (UI)

15. สิ่งที่ไม่มีใน iOS

→ Navigation Drawer, Backdrops, Banner, Snackbar, Chips, Bottom App Bar, FABs(Floating Action Button), Bottom Navigation Drawer, Side Sheet, Expanding Bottom Sheet, Standard Bottom Sheet,

16. สิ่งที่ไม่มีใน Android

→ Page Control, Toolbars, Steppers, Popovers

17. Status Bar ที่เหมือนกันแต่ต่างกัน

18. Refresh Content Control vs. Swipe to refresh

19. ความแตกต่างด้านภาพลักษณ์ของคอนโทรลต่างๆ

20. ความแตกต่างของรูปทรงลูกศรย้อนกลับและตำแหน่งของเฮดเดอร์

21. ความแตกต่างของไอคอน "จุดสามจุด"

22. Pickers : ตัวเลือกวันที่ของ iOS เป็นแบบวงล้อ ส่วน Android เป็นแบบปฏิทินทั่วไป

23. ความแตกต่างของ Text Field

→ iOS แสดงเลเบลไว้เหนือฟิลด์และจะหายไปเมื่อพิมพ์, Android จะเลื่อนขึ้นด้านบนเมื่อพิมพ์

→ ปุ่ม Clear เนื้อหาคล้ายกัน

→ Material Design จะเน้นเส้นใต้ด้วยสี Primary ระหว่างการป้อนข้อมูล

24. Context Menus vs. Menus

25. Action View/Activity View vs. Modal Bottom Sheet

26. Edit Menus vs. Text Selection Toolbar

27. ขนาดของ Divider : iOS 0.5pt vs. Android 1dp

ความแตกต่างอื่นๆ

28. ขนาด Tap Zone : iOS 44x44pt , Android 48x48dp

29. App Store vs. Google Play

30. Undo/Redo แบบเฉพาะของ iOS : หากผู้ใช้เขย่าโทรศัพท์ จะเรียกใช้ฟังก์ชัน Undo

31. ความแตกต่างของหน้าจอเปิดแอป : Material อนุญาตให้ใส่โลโก้แอปในหน้าจอเปิดแอปได้ แต่ HIG ไม่แนะนำให้ใช้หน้าจอเปิดแอปเพื่อการตลาด ควรใช้เป็นเพียง placeholder เท่านั้น

32. องค์ประกอบเพิ่มเติมของ Material Design : Data Format, Data Visualization, Empty States, Offline States เป็นต้น

[xguru]

เป็นสตาร์ตอัป ควรพัฒนาแอปด้วยอะไรดี? สำหรับคำถามนี้ คำตอบพื้นฐานของผมคือ

#1 ถ้าเป็นบริการที่ไม่ได้จำเป็นต้องมีแอปจริงๆ ทำแค่โมบายล์เว็บให้ดีก่อนก็พอ

#2 ถ้าจำเป็นต้องมีแอป ช่วงแรกให้รองรับทั้งแพลตฟอร์ม iOS/Android พร้อมกันด้วย React Native หรือ Flutter

#3 ถ้าผู้ใช้เยอะขึ้น นักพัฒนาก็มากขึ้น และมีเงินทุนแล้ว ค่อยเปลี่ยนเป็นเนทีฟแอปที่ปรับให้เหมาะกับแต่ละ OS ก็ได้ (Swift & Kotlin)

แต่คำตอบนี้ก็ยังเหมือนกับเมื่อ 10 ปีก่อน

ตอนนั้นก็แค่เป็น HTML5, Hybrid(Phonegap), Objective C++ & Java เท่านั้น..

ตอนนี้ถ้าสร้างเว็บด้วย React ก็คงสะดวกขึ้นนิดหน่อยเพราะมี React Native

#1 แน่นอนอยู่แล้ว, แนะนำ #2 และ #3 เป็นทางเลือก

บทความเปรียบเทียบ UI นี้เป็นสิ่งที่ควรเข้าใจให้ดีถ้าเป็นกรณี #3 และเป็นบทความที่ควรอ่านเก็บไว้แม้จะเป็นกรณี #2 ก็ตาม

[laeyoung]

ต่อจากคอมเมนต์ที่ xguru ทิ้งไว้

แต่ถ้าเป็นบริการที่พึ่งพาฮาร์ดแวร์มาก เช่น กล้อง, GPS, เซ็นเซอร์วัดความเร่ง ให้ข้ามไปข้อ 3 ได้เลย

(เช่น จะทำแอปฟิลเตอร์วิดีโอแบบเรียลไทม์ -> ไป #3...)