Google เปิดตัว Android 10 ล่าสุดเมื่อเดือนกันยายนที่ผ่านมา และแม้ว่าจะมีให้บริการในโทรศัพท์ระดับพรีเมียมรุ่นล่าสุดเพียงไม่กี่รุ่น แต่ผู้ผลิตโทรศัพท์จำนวนมากคาดว่าจะเปิดตัว Android 10 ในโทรศัพท์รุ่นล่าสุดบางรุ่นในเร็วๆ นี้ ในอนาคต
การอ่านที่คล้ายกัน:คอมพิวเตอร์ที่ดีที่สุดสำหรับการออกแบบกราฟิก
Android 10 นำการอัปเดตจำนวนหนึ่งและฟีเจอร์เด็ดๆ เช่น Dark Mode ทั่วทั้งระบบ แต่มีน้อยมากในการอัปเดต UI จริง Google ติดอยู่กับดีไซน์ Material เนื่องจากใช้งานได้ดีมาก ดังนั้นคู่มือนี้จะใช้ได้กับ Android เวอร์ชันก่อนหน้าด้วย (Oreo, Pie ฯลฯ)
การรู้วิธีออกแบบองค์ประกอบ UI สำหรับดีไซน์ Material อย่างเหมาะสมจะช่วยได้หลายอย่าง ตั้งแต่การพัฒนาแอปที่ทำงานได้ดีบนอุปกรณ์ Android ไปจนถึงการยอมรับธีมที่กำหนดเองของคุณในร้านค้าธีม เช่น Samsung Theme Store
คุณยังสามารถอ่านหัวข้ออื่นๆ เหล่านี้ใน Appuals ซึ่งจะให้ข้อมูลเพิ่มเติมมากมายที่เกี่ยวข้องกับหัวข้อนี้:
- วิธีใส่ธีมสีเข้มในแอป Android
- วิธีเริ่มพัฒนาแอป Android ใน Visual Studio 2017
- วิธีสร้าง ROM แบบกำหนดเองจาก Android Open Source Project | ปตท. 2
- วิธีการกำหนดธีม UI ระบบ Android ด้วยตนเอง (บางขั้นตอนอาจล้าสมัยสำหรับ Android 9 / Android 10 แต่ข้อมูลโดยรวมยังมีประโยชน์มาก)
ภาพรวมของดีไซน์ Material
ดีไซน์ Material เกี่ยวข้องกับสิ่งสำคัญสองสามอย่าง จานสี เลย์เอาต์กริดที่ตอบสนอง และรู้แนวทางของคุณเกี่ยวกับ UI ระบบ Android หากคุณกำลังออกแบบธีม สำหรับการพัฒนาแอป คุณจะต้องทราบข้อมูลทั้งหมดข้างต้น รวมทั้งสิ่งต่างๆ เช่น การอนุญาตและคำขอรันไทม์ของ Android หากแอปของคุณจะเข้าถึงโฟลเดอร์ที่เก็บข้อมูลของผู้ใช้ กล้อง ฯลฯ
หน้านี้ในนักพัฒนา Android อย่างเป็นทางการจะเจาะลึกถึงการเปลี่ยนแปลงความเป็นส่วนตัวและการอนุญาตที่นักพัฒนาแอปควรทราบสำหรับ Android 10 แต่โดยส่วนใหญ่ เราจะเน้นที่ ธีม ไม่ใช่การพัฒนาแอปจริงสำหรับบทความนี้
จานสี
สำหรับจานสีดีไซน์ Material Google ต้องการระบบ "สองสี" ที่มีรูปแบบต่างๆ:
เช่นในภาพนี้ สีหลักของคุณจะเป็นสีม่วง โดยสีรองของคุณคือสีฟ้า จากนั้นสำหรับองค์ประกอบอื่นๆ ของ UI คุณจะต้องใช้เฉดสีม่วงและฟ้า เพื่อให้ทุกอย่างผสมผสานเข้าด้วยกัน
ตัวแก้ไขดีไซน์ Material นี้เป็นเครื่องมือที่มีประโยชน์มากซึ่งช่วยให้คุณสร้างรูปแบบสีต่างๆ ได้ คุณยังค้นหาแรงบันดาลใจจากหน่วยงานออกแบบ UI/UX มืออาชีพ เช่น Clay หรือรายชื่อบริษัทออกแบบเว็บไซต์ยอดนิยมประจำปี 2019 ได้อีกด้วย
เลย์เอาต์กริดที่ตอบสนอง
การทำความเข้าใจโครงร่างกริดแบบตอบสนองหมายถึงการทำความเข้าใจว่าความหนาแน่นของพิกเซลและการปรับหน้าจออัตโนมัติทำงานอย่างไร โดยส่วนใหญ่ DPI ของโทรศัพท์ Android โดยเฉลี่ยจะอยู่ระหว่าง 300 ถึง 480 DPI
ด้วยเหตุนี้ หน้าจอ 300 DPI จึงสามารถแสดงได้ถึง 4 คอลัมน์:
ในขณะที่หน้าจอ 600 dpi จะแสดงได้ถึง 8 คอลัมน์
ระหว่างแต่ละคอลัมน์คือ "รางน้ำ" โดยพื้นฐานแล้วจะเป็นพื้นที่ที่แยกแต่ละคอลัมน์ ดังนั้นในมือถือที่มี 360dp รางน้ำแต่ละอันจะมีขนาดประมาณ 16dp
ทำความเข้าใจ DPI ของหน้าจอ
เมื่อออกแบบ UI ไม่ว่าจะเป็น UI ของระบบหรือ UI ของแอป คุณต้องคำนึงถึงความหนาแน่นของพิกเซลที่แตกต่างกันของขนาดโทรศัพท์ต่างๆ ต่อไปนี้คือแผนภูมิแสดงความละเอียดหน้าจอและความหนาแน่นของพิกเซลที่พบบ่อยที่สุด:
ตามหลักการทั่วไป เมื่อออกแบบธีมหรือแอป "สากล" และไม่เน้นที่การสร้างธีมสำหรับอุปกรณ์เครื่องเดียว คุณควรเริ่มต้นที่ความหนาแน่นต่ำสุด เนื่องจากถ้าคุณเริ่มการออกแบบที่ 1x คุณเพียงแค่ต้องใช้การวัดเป็นพิกเซล และค่าต่างๆ จะยังคงเหมือนเดิมใน DPs
อย่างไรก็ตาม หากคุณออกแบบสำหรับ 3.5x คุณต้องหารค่าทั้งหมดด้วย 3.5 เพื่อปรับให้เข้ากับความหนาแน่นอื่นๆ จากนั้นจะกลายเป็นเรื่องปวดหัวในการคำนวณค่า DP หลายค่า
เคล็ดลับเพิ่มเติมสำหรับการออกแบบ UI/UX ของ Android 10
หากคุณต้องการสีที่กำหนดเองสำหรับองค์ประกอบของธีม เช่น วิทยุ ปุ่ม ช่องทำเครื่องหมาย ฯลฯ คุณควร ไม่ ใช้ drawables เพื่อแสดงสถานะต่างๆ (ตรวจสอบ คลิก ฯลฯ) . เพราะเมื่อคุณใช้ drawable คุณจะสูญเสียเอฟเฟกต์การออกแบบวัสดุ (เหมือนคลื่น) ซึ่ง Google ได้อัปเดตอย่างกว้างขวางใน Android 9 และ Android 10
เมื่อทำงานกับดีไซน์ Material Google มีสินค้ามากมายที่คุณสามารถใช้ประโยชน์ได้ และสิ่งเหล่านี้จะไหลลื่นอย่างเป็นธรรมชาติมากขึ้นกับ UI/UX ของคุณ
ตัวอย่างเช่น ต่อไปนี้เป็นคำหลักสองสามคำสำหรับองค์ประกอบที่เป็นธีมที่มีองค์ประกอบดีไซน์ Material ในตัว และแอปหรือ UI/UX ของคุณจะยังคงชอบการทำงานของระบบดั้งเดิมและสถานะ UI
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"
หากต้องการแสดงเงาด้านล่างส่วนประกอบอย่างในโหมดการ์ด คุณเพียงแค่ต้องใช้คุณสมบัติระดับความสูง
android:elevation="1dp"
การรวมแท็กและคุณสมบัติพาเรนต์มีประโยชน์อย่างยิ่ง เพื่อให้คุณควบคุมและจัดการไฟล์ XML ได้ดียิ่งขึ้น
<LinearLayout> <include layout="@layout/light_expanded_card" /> <include layout="@layout/light_collapsed_card" /> <include layout="@layout/color_indicator_strip" /> </LinearLaout>
การเปลี่ยนแปลงเลย์เอาต์แบบเคลื่อนไหวสามารถปรับปรุง UX ของคุณได้จริงๆ และ ViewGroup เกือบทั้งหมดจะเคารพในสิ่งนี้ ดังนั้นเมื่อใดก็ตามที่มีการเปลี่ยนแปลงในลำดับชั้นการดู ก็จะมาพร้อมกับแอนิเมชั่น ด้วยความรู้เล็กน้อย คุณยังสามารถออกแบบเอฟเฟกต์การเปลี่ยนแบบกำหนดเองได้
android:animateLayoutChanges="true"
