Google ปล่อย Android 10 ล่าสุดเมื่อเดือนกันยายนที่ผ่านมา และแม้จะพร้อมใช้งานบนโทรศัพท์พรีเมียมล่าสุดเพียงไม่กี่รุ่น ผู้ผลิตโทรศัพท์หลายรายคาดว่าจะนำ Android 10 ไปใช้บนโทรศัพท์รุ่นล่าสุดของพวกเขาในอนาคตอันใกล้
อ่านเพิ่มเติม: Best Computers For Graphics Design
Android 10 นำมาซึ่งการอัปเดตและฟีเจอร์โคอลๆ หลายอย่าง เช่น Dark Mode ทั่วระบบ แต่มีการอัปเดต UI จริงๆ น้อยมาก Google คงคง Material Design ไว้ เพราะมันทำงานได้ดีมาก ดังนั้นคู่มือนี้จึงใช้ได้กับ Android เวอร์ชันก่อนหน้าด้วย (Oreo, Pie, ฯลฯ)
การรู้จักวิธีออกแบบ UI elements สำหรับ Material Design จะช่วยในหลายๆ เรื่อง ตั้งแต่พัฒนาแอปที่ทำงานดีบนอุปกรณ์ Android จนถึงการให้ธีมปรับแต่งของคุณได้รับการยอมรับใน Theme store ต่างๆ เช่น Samsung Theme Store
คุณยังอ่านหัวข้ออื่นๆ บน Appuals ได้ ซึ่งจะให้ข้อมูลเพิ่มเติมที่เกี่ยวข้องกับหัวข้อนี้มาก:
- How to Include a Dark Theme in your Android App
- How to Start Developing Android Apps in Visual Studio 2017
- How to Build a Custom ROM from Android Open Source Project | Pt. 2
- How to Manually Theme Android System UI (บางขั้นตอนอาจล้าสมัยสำหรับ Android 9 / Android 10 แต่ข้อมูลโดยรวมยังมีประโยชน์มาก)
ภาพรวมของ Material Design
Material Design หมุนรอบสิ่งสำคัญไม่กี่อย่าง Color palette, Responsive grid layout และการรู้จัก Android System UI หากคุณออกแบบธีม สำหรับการพัฒนาแอป คุณต้องรู้สิ่งข้างต้นทั้งหมด รวมถึง Android runtime permissions และ requests หากแอปของคุณจะเข้าถึงโฟลเดอร์จัดเก็บ กล้อง ฯลฯ ของผู้ใช้
หน้านี้บน Android Developer อย่างเป็นทางการ ลงลึกลงไปในการเปลี่ยนแปลงความเป็นส่วนตัวและสิทธิ์ที่นักพัฒนาแอปควรทราบสำหรับ Android 10 แต่ว่าด้วยส่วนใหญ่ เราจะเน้นที่ Theming ไม่ใช่การพัฒนาแอปจริง สำหรับบทความนี้
Color palette (แพลเล็ตสี)
สำหรับ Color palette ของ Material Design Google ชอบระบบ "สองสี" พร้อม variants:
เช่น ในรูปนี้ สีหลัก (Primary) คือ สีม่วง สีรอง (Secondary) คือ สีซีแอน และสำหรับองค์ประกอบ UI อื่นๆ คุณจะใช้ shade variants ของสีม่วงและซีแอน ทำให้ทุกอย่างผสมผสานเข้าด้วยกัน
Material Design editor นี้เป็นเครื่องมือที่มีประโยชน์มาก ช่วยประกอบ color variations คุณยังสามารถหาแรงบันดาลใจจากเอเจนซี UI/UX อาชีพอย่าง Clay หรือรายการบริษัทออกแบบเว็บอันดับนำปี 2019
Responsive grid layout (เลย์เอาต์กริดตอบสนอง)
การเข้าใจ Responsive grid layout หมายถึงการเข้าใจว่า pixel density และการปรับตัวของหน้าจออัตโนมัติ ทำงานอย่างไร โดยส่วนใหญ่ ค่า DPI เฉลี่ยของโทรศัพท์ Android อยู่ระหว่าง 300 ถึง 480 DPI
ด้วยข้อนี้ในใจ หน้าจอ 300 DPI จะแสดงได้ถึง 4 คอลัมน์:
ในขณะที่หน้าจอ 600 dpi จะแสดงได้ถึง 8 คอลัมน์
ระหว่างคอลัมน์แต่ละคอลัมน์ มี "gutters" โดยพื้นฐานคือพื้นที่ที่แยกคอลัมน์แต่ละคอลัมน์ ดังนั้น บนมือถือ 360dp แต่ละ gutter จะประมาณ 16dp
การเข้าใจ Screen DPI
เมื่อออกแบบ UI ไม่ว่าจะเป็น System UI หรือ UI ของแอปคุณ คุณต้องคำนึงถึง pixel densities ที่ต่างกันของขนาดโทรศัพท์ต่างๆ นี่คือตารางความละเอียดหน้าจอและ pixel densities ที่พบบ่อยที่สุด:
ดังนั้น กฎทั่วไป เมื่อออกแบบธีม "global" หรือแอป ไม่เน้นสร้างธีมสำหรับอุปกรณ์เดียว คุณควรเริ่มที่ density ต่ำสุด เพราะถ้าคุณเริ่มดีไซน์ที่ 1x คุณเพียงต้องวัดใน pixels และค่าจะคงที่เหมือนกันทั่ว DPs
แต่ถ้าคุณออกแบบที่ 3.5x คุณต้องหารค่าทั้งหมดด้วย 3.5 สำหรับการปรับตัวไป densities อื่น และมันจะกลายเป็นปวดหัวในการคำนวณค่า DP หลายค่า
เคล็ดลับเพิ่มเติมสำหรับการออกแบบ UI/UX Android 10
ถ้าคุณต้องการสีปรับแต่งสำหรับธีมคอมโพเนนต์ เช่น radio, buttons, checkboxes ฯลฯ คุณ ไม่ควร ใช้ drawables เพื่อแสดงสถานะต่างๆ (checked, clicked, ฯลฯ) เพราะตอนใช้ drawables คุณจะสูญเสีย native Material Design effects (เช่น ripple) ซึ่ง Google อัปเดตอย่างกว้างขวางใน Android 9 และ Android 10
เมื่อทำงานกับ Material Design Google รวมสิ่งดีๆ มากมายที่คุณสามารถใช้ประโยชน์ได้ และจะไหลไปกับ UI/UX ของคุณได้อย่างเป็นธรรมชาติ
เช่น นี่คือ keywords สำหรับ theming components ด้วย Material Design elements ในตัว และแอปหรือ UI/UX ของคุณยังจะเพลิดเพลินกับพฤติกรรมระบบและ UI states ตามที่เป็นอยู่
Button with custom colour android:backgroundTint="@color/red" ----- Radio Button with custom colour android:buttonTint="@color/red" ----- Images & Icons android:drawableTint="@color/red" ----- ProgressBar with custom colour android:progressTint="@color/red"
เพื่อแสดงเงาเรียบง่ายใต้คอมโพเนนต์ เช่น cardview mode คุณเพียงต้องใช้ property elevation
android:elevation="1dp"
การรวม tags และ parent properties มีประโยชน์มาก ให้คุณควบคุมได้ดีกว่า และไฟล์ XML จัดการได้ง่ายขึ้น
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
Animated layout changes สามารถปรับปรุง UX ของคุณจริง และเกือบ ViewGroup ทั้งหมดจะเคารพสิ่งนี้ ดังนั้น ทุกครั้งที่มีการเปลี่ยนแปลงใน view hierarchy จะมาพร้อม animation ด้วย ด้วยความรู้เล็กน้อย คุณยังสามารถออกแบบ custom transition effects ได้
android:animateLayoutChanges="true"
