UI และเนื้อหาสำหรับผู้ใช้หลายพันล้านคน
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ตรวจสอบว่าแอปมี UI แบบอินเทอร์แอกทีฟที่ตอบสนองต่ออินพุตของผู้ใช้ได้อย่างรวดเร็ว และหากจำเป็น ให้ชดเชยการเปิดตัวที่ช้า
ตรวจสอบว่าแอปได้รับการออกแบบมาให้แปลได้ง่ายโดย
รองรับความแตกต่างระหว่างภาษาต่างๆ ได้แก่ อนุญาตให้มีช่องว่าง ความหนาแน่น
ลำดับ การเน้น และการเปลี่ยนแปลงคำ นอกจากนี้ โปรดตรวจสอบว่าวันที่ เวลา และ
หน่วยอื่นๆ ได้รับการแปลเป็นภาษาต่างๆ และแสดงตามการตั้งค่าของโทรศัพท์
อินเทอร์เฟซผู้ใช้ที่รวดเร็วและตอบสนองได้ดี
การรับรู้ของผู้ใช้เกี่ยวกับประสิทธิภาพของแอปส่วนใหญ่เกิดจาก
การตอบสนองของแอป ตัวอย่างเช่น การโต้ตอบกับผู้ใช้และการแสดงผลที่คมชัดเป็นลักษณะสำคัญ 2 ประการของแอปที่มีประสิทธิภาพ ในส่วนนี้ คุณจะเห็นเคล็ดลับในการเพิ่มประสิทธิภาพลักษณะเหล่านี้และลักษณะอื่นๆ ของความเร็วและการตอบสนองของแอป
การตอบสนองการสัมผัสในรายการที่แตะได้ทั้งหมด
- การตอบสนองต่อการสัมผัสจะช่วยเพิ่มความรู้สึกในการสัมผัสให้กับอินเทอร์เฟซผู้ใช้ คุณควร
ตรวจสอบว่าแอปให้การตอบสนองต่อการสัมผัสในองค์ประกอบที่สัมผัสได้ทั้งหมดเพื่อลด
เวลาในการตอบสนองของแอปที่รับรู้ได้ให้มากที่สุด
-
การโต้ตอบที่ตอบสนองกระตุ้นให้ผู้ใช้สำรวจแอปในเชิงลึกมากขึ้นด้วยการ
สร้างการตอบสนองบนหน้าจอที่เหมาะสม ทันเวลา และน่าพึงพอใจต่ออินพุตของผู้ใช้
การโต้ตอบที่ตอบสนองจะยกระดับแอปจากบริการนำส่งข้อมูล
ไปสู่ประสบการณ์ที่สื่อสารโดยใช้การตอบสนองทางภาพและการสัมผัส
ที่หลากหลาย
- ดูข้อมูลเพิ่มเติมได้ที่การฝึกอบรม Android เกี่ยวกับการปรับแต่งการตอบสนองต่อการสัมผัส
UI ควรโต้ตอบได้เสมอ
- แอปที่ไม่ตอบสนองเมื่อทำกิจกรรมในเบื้องหลังจะดูช้า
และลดความพึงพอใจของผู้ใช้ ตรวจสอบว่าแอปมี UI ที่ตอบสนองเสมอ
ไม่ว่าจะมีกิจกรรมใดๆ ในเบื้องหลังก็ตาม คุณทำได้โดยการดำเนินการเครือข่าย
หรือการดำเนินการที่มีการประมวลผลหนักในเธรดเบื้องหลัง และทำให้เธรด UI
อยู่ในสถานะว่างมากที่สุด
- แอป Material Design จะใช้การเปลี่ยนแปลงภาพน้อยที่สุดเมื่อโหลดเนื้อหา
โดยแสดงการดำเนินการแต่ละอย่างด้วยตัวบ่งชี้กิจกรรมเดียว
หลีกเลี่ยงการบล็อกกล่องโต้ตอบด้วย
ตัวบ่งชี้การโหลด
- สถานะว่างเปล่าจะเกิดขึ้นเมื่อมุมมองไม่มีเนื้อหาที่จะแสดง อาจเป็นรายการที่ไม่มีรายการหรือการค้นหาที่ไม่มีผลลัพธ์ หลีกเลี่ยง
สถานะว่างโดยใช้เนื้อหาเริ่มต้น เนื้อหาเพื่อการศึกษา หรือเนื้อหาที่ตรงกันมากที่สุด
เมื่อใช้ตัวเลือกเหล่านี้ไม่ได้ ให้แสดงรูปภาพแบบไม่โต้ตอบและสโลแกนที่เป็นข้อความ
ซึ่งจะบอกผู้ใช้ว่าพวกเขาจะเห็นอะไรเมื่อมีสิ่งที่จะแสดง
- ดูข้อมูลเพิ่มเติมได้ที่การฝึกอบรม Android เกี่ยวกับการทำให้แอปตอบสนอง
ตั้งเป้าหมาย 60 เฟรมต่อวินาทีในอุปกรณ์ราคาประหยัด
- ตรวจสอบว่าแอปทำงานได้อย่างรวดเร็วและราบรื่นอยู่เสมอ แม้ในอุปกรณ์ราคาถูก
- การวาดทับอาจทำให้แอปทำงานช้าลงอย่างมาก โดยจะเกิดขึ้นเมื่อมีการวาดพิกเซล
มากกว่า 1 ครั้งต่อรอบ ตัวอย่างเช่น เมื่อคุณมี
รูปภาพที่มีปุ่มวางอยู่ด้านบน แม้ว่าการวาดทับบางส่วนจะหลีกเลี่ยงไม่ได้ แต่ก็ควรลดให้เหลือน้อยที่สุดเพื่อให้มั่นใจว่าอัตราเฟรมจะราบรื่น แก้ไขข้อบกพร่อง
การแสดงพิกเซลซ้ำด้วย GPU ในแอปเพื่อให้มั่นใจว่ามีการแสดงพิกเซลซ้ำน้อยที่สุด
- อุปกรณ์ Android จะรีเฟรชหน้าจอที่ 60 เฟรมต่อวินาที (fps) ซึ่งหมายความว่า
แอปของคุณต้องอัปเดตหน้าจอภายในเวลาประมาณ 16 มิลลิวินาที สร้างโปรไฟล์
แอปโดยใช้เครื่องมือในอุปกรณ์เพื่อดูว่าแอปของคุณไม่
เป็นไปตามค่าเฉลี่ย 16 มิลลิวินาทีนี้หรือไม่และเมื่อใด
- ลดหรือนำภาพเคลื่อนไหวในอุปกรณ์ราคาถูกออกเพื่อลดภาระของ
CPU และ GPU ของอุปกรณ์ ดูข้อมูลเพิ่มเติมได้ที่
ปรับปรุง
ประสิทธิภาพเลย์เอาต์
- ลำดับชั้นของมุมมองที่มีประสิทธิภาพจะช่วยเพิ่มความเร็วของแอปได้โดยไม่ต้องเพิ่ม
การใช้หน่วยความจำของแอป ดูข้อมูลเพิ่มเติมได้ที่
ลำดับชั้นของประสิทธิภาพ
และมุมมอง
ใช้หน้าจอเปิดตัวในแอปที่เริ่มต้นช้า
- หน้าจอเปิดคือประสบการณ์ครั้งแรกของผู้ใช้ที่มีต่อแอปพลิเคชันของคุณ
การแสดง Canvas ว่างเปล่าขณะเปิดแอปจะเพิ่มการรับรู้ถึง
เวลาในการโหลดของแอป ดังนั้นให้ลองใช้ UI ตัวยึดตำแหน่งหรือหน้าจอเปิดตัวที่มีการสร้างแบรนด์
เพื่อลดเวลาในการโหลดที่รับรู้
-
UI ตัวยึดตำแหน่งเป็นการเปลี่ยนผ่านการเปิดตัวที่ราบรื่นที่สุด เหมาะสำหรับ
ทั้งการเปิดตัวแอปและการเปลี่ยนผ่านกิจกรรมในแอป
-
หน้าจอเปิดตัวที่มีการสร้างแบรนด์ช่วยให้แบรนด์ได้รับการมองเห็นชั่วขณะ ซึ่งจะช่วยให้ UI
มุ่งเน้นไปที่เนื้อหาได้
- วิธีที่ดีที่สุดในการจัดการกับความเร็วในการเริ่มต้นที่ช้าคือการหลีกเลี่ยงไม่ให้เกิดปัญหาดังกล่าว ประสิทธิภาพเวลาเปิดตัวจะให้ข้อมูลที่อาจช่วยเร่งเวลาเปิดตัวแอป
แนวทางปฏิบัติแนะนำสำหรับอินเทอร์เฟซผู้ใช้
-
Material Design คือภาษาภาพที่รวมหลักการดั้งเดิม
ของการออกแบบที่ดีเข้ากับเทคโนโลยีและศาสตร์ใหม่ๆ ที่เป็นไปได้
ไว้ด้วยกัน Material Design มีระบบสำคัญระบบเดียวที่
ช่วยสร้างประสบการณ์ที่สอดคล้องกันในแพลตฟอร์มและอุปกรณ์ขนาดต่างๆ พิจารณา
ใช้คอมโพเนนต์หลักของ Material Design เพื่อให้ผู้ใช้ทราบวิธี
ใช้แอปของคุณโดยสัญชาตญาณ
- คอมโพเนนต์ Material Design ที่พร้อมใช้งานมีอยู่ในไลบรารีการรองรับ Material Design คอมโพเนนต์เหล่านี้รองรับใน Android 2.1 (API ระดับ 7) ขึ้นไป
การแปล
- ผู้ใช้อาจมาจากส่วนใดก็ได้ในโลกและภาษาแรกของพวกเขา
อาจไม่ใช่ภาษาเดียวกับคุณ หากคุณไม่นำเสนอแอปในภาษาที่ผู้ใช้ของคุณอ่านได้ ก็ถือว่าพลาดโอกาส ดังนั้นคุณควร
แปลแอปเป็นภาษาหลักของภูมิภาค
- ดูข้อมูลเพิ่มเติมได้ที่การฝึกอบรม Android เกี่ยวกับ
การรองรับ
ภาษาต่างๆ และดู
รายการตรวจสอบการแปล
- ตั้งแต่ Android 7.0 (API ระดับ 24) เป็นต้นไป เฟรมเวิร์ก Android
จะจัดเตรียมชุดย่อยของ API ของ ICU4J ซึ่งจะช่วยให้คุณแปลแอปเป็นหลายภาษาได้ ดูข้อมูลเพิ่มเติมได้ที่
ICU4J Android Framework APIs
แหล่งข้อมูลเพิ่มเติม
ดูแหล่งข้อมูลเพิ่มเติมต่อไปนี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้
หัวข้อเพิ่มเติม
บล็อกโพสต์
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# UI and content for billions\n\nMake sure that your app offers an interactive UI that responds quickly to user input and, if necessary, compensates for a slow launch.\nEnsure that your app is designed to be easily localized by\naccommodating the variations between languages: allow for spacing, density,\norder, emphasis, and wording variations. Also make sure that date, time, and\nother units are internationalized and displayed according to the phone's\nsettings.\n\nFast and responsive user interface\n----------------------------------\n\n\u003cbr /\u003e\n\n\nThe user's perception of app performance is formed in large part by the app's\nresponsiveness. For example, interaction with the user and a crisp display are two important\ncharacteristics of a performant app. Here you can find tips on how to optimize these and\nother aspects of an app's speed and responsiveness.\n\n### Touch feedback on all touchable items\n\n- Touch feedback adds a tactile feeling to the user interface. You should ensure your app provides touch feedback on all touchable elements to reduce the perceived app latency as much as possible.\n- [Responsive interaction](https://material.io/guidelines/motion/material-motion.html) encourages deeper exploration of an app by creating timely, logical, and delightful screen reactions to user input. Responsive interaction elevates an app from an information-delivery service to an experience that communicates using multiple visual and tactile responses.\n- For more information, see the Android training on [Customizing Touch\n Feedback](/training/material/animations#Touch).\n\n### UI should always be interactive\n\n- Apps that are unresponsive when performing background activity feel slow and reduce user satisfaction. Ensure your app always has a responsive UI regardless of any background activity. Achieve this by performing network operations or any heavy-duty operations in a background thread---keep the UI thread as idle as you can.\n- Material Design apps use minimal visual changes when loading content by representing each operation with a single activity indicator. Avoid blocking dialogs with [loading indicators](https://material.io/guidelines/components/progress-activity.html).\n- [Empty\n states](https://material.io/guidelines/patterns/empty-states.html) occur when a view has no content to show. It might be a list that has no items or a search that returns no results. Avoid empty states using starter, educational, or best match content. When these options aren't applicable display a non-interactive image and a text tagline that tell the user what they'll see when there is something to display.\n- For more information, see the Android training on [Keeping Your App\n Responsive](/training/articles/perf-anr).\n\n### Target 60 frames per second on low-cost devices\n\n- Ensure that your app always runs fast and smoothly, even on low-cost devices.\n- Overdraw can significantly slow down your app---it occurs when the pixels are being drawn more than once per pass. An example of this is when you have an image with a button placed on top of it. While some overdraw is unavoidable, it should be minimized to ensure a smooth frame rate. Perform [Debug\n GPU overdraw](/tools/performance/debug-gpu-overdraw) on your app to ensure it's minimized.\n- Android devices refresh the screen at 60 frames per second (fps), meaning your app has to update the screen within roughly 16 milliseconds. [Profile\n your app](/studio/profile/dev-options-rendering) using on-device tools to see if and when your app is not meeting this 16 ms average.\n- Reduce or remove animations on low-cost devices to lessen the burden on the device's CPU and GPU. For more information, see [Improve\n layout performance](/develop/ui/views/layout/improving-layouts).\n- An efficient view hierarchy can speed up your app without increasing the app's memory footprint. For more information, see [Performance\n and View Hierarchies.](/topic/performance/optimizing-view-hierarchies)\n\n### Use a launch screen on slow to start apps\n\n- The launch screen is a user's first experience of your application. Displaying a blank canvas while launching your app increases the perception of its loading time, so consider using a placeholder UI or a branded launch screen to reduce the perceived loading time.\n- A[placeholder UI](https://material.io/design/communication/launch-screen.html#placeholder-ui) is the most seamless launch transition, appropriate for both app launches and in-app activity transitions.\n- [Branded launch screens](/guide/topics/ui/splash-screen) provide momentary brand exposure, freeing the UI to focus on content.\n- The best way to deal with slow start speeds is not to have them. [Launch-Time Performance](/topic/performance/launch-time) provides information that may help you speed up your app's launch time.\n\nUser interface best practices\n-----------------------------\n\n- [Material Design](https://material.io/guidelines/material-design/introduction.html) is a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science. Material Design provides a single underlying system that allows for a unified experience across platforms and device sizes. Consider using key Material Design components so that users intuitively know how to use your app.\n- Ready-to-use Material Design components are available in the [Material Design Support\n library](/topic/libraries/support-library/features#material-design). These components are supported in Android 2.1 (API level 7) and above.\n\nLocalization\n------------\n\n- Your users could be from any part of the world and their first language may not be yours. If you don't present your app in a language that your users can read, it is a missed opportunity. You should therefore localize your app for key regional languages.\n- To learn more, visit the Android training on [Supporting\n Different Languages](/training/basics/supporting-devices/languages) and see the [localization checklist](/distribute/tools/localization-checklist).\n- Starting from Android 7.0 (API level 24), the Android framework makes available a subset of the [ICU4J APIs](http://userguide.icu-project.org/), which can help you localize your app into multiple languages. For more information, see [ICU4J Android Framework APIs.](/guide/topics/resources/icu4j-framework)\n\n\u003cbr /\u003e\n\nAdditional resources\n--------------------\n\nTo learn more about this topic, view the following additional resources:\n\n### Further topics\n\n- [Keeping your app responsive](/training/articles/perf-anr)\n- [Improving layout performance](/training/improving-layouts)\n- [Introduction to animations](/training/animation/overview)\n\n### Blog posts\n\n- [Writing for global audiences](https://medium.com/google-design/writing-for-global-audiences-d339d23e9612)"]]