วิธีออกแบบ UI / UX สำหรับการอัปเดต Android 9 และ 10 ล่าสุด

จานสี

สำหรับจานสีดีไซน์ Material Google ต้องการระบบ 'สองสี' ที่มีรูปแบบต่างๆดังนี้

ตัวอย่างเช่นในภาพนี้ สีหลักของคุณจะเป็นสีม่วงโดยมีสีรองเป็นสีฟ้า จากนั้นสำหรับองค์ประกอบอื่น ๆ ของ UI คุณจะใช้เฉดสีม่วงและสีฟ้าที่แตกต่างกันเพื่อให้ทุกอย่างกลมกลืนกัน

นี้ บรรณาธิการออกแบบวัสดุ เป็นเครื่องมือที่มีประโยชน์มากที่ช่วยให้คุณรวบรวมรูปแบบสีต่างๆ คุณยังสามารถมองหาแรงบันดาลใจจากหน่วยงานออกแบบ UI / UX ระดับมืออาชีพเช่น ดินเหนียว หรือรายการไฟล์ บริษัท ออกแบบเว็บไซต์ยอดนิยม ในปี 2019

เค้าโครงกริดที่ตอบสนอง

การทำความเข้าใจเค้าโครงกริดที่ตอบสนองหมายถึงการทำความเข้าใจว่า ความหนาแน่นของพิกเซล และการปรับหน้าจออัตโนมัติทำงานได้ โดยส่วนใหญ่แล้ว DPI ของโทรศัพท์ Android โดยเฉลี่ยจะอยู่ระหว่าง 300 ถึง 480 DPI

ด้วยเหตุนี้หน้าจอ 300 DPI จะสามารถแสดงได้ถึง 4 คอลัมน์:

ในขณะที่หน้าจอ 600 dpi จะแสดงได้ถึง 8 คอลัมน์

ระหว่างแต่ละคอลัมน์คือ 'รางน้ำ' โดยทั่วไปจะเป็นพื้นที่ที่แยกแต่ละคอลัมน์ ดังนั้นบนมือถือที่มี 360dp รางน้ำแต่ละเส้นจะอยู่ที่ประมาณ 16dp

การทำความเข้าใจ DPI ของหน้าจอ

เมื่อออกแบบ UI ไม่ว่าจะเป็น UI ของระบบหรือ UI ของแอปคุณต้องคำนึงถึงความหนาแน่นของพิกเซลที่แตกต่างกันของโทรศัพท์ขนาดต่างๆ นี่คือแผนภูมิของความละเอียดหน้าจอที่พบบ่อยที่สุดและความหนาแน่นของพิกเซล:

ตามหลักทั่วไปแล้วเมื่อออกแบบธีมหรือแอป 'ทั่วโลก' และไม่ได้เน้นไปที่การสร้างธีมสำหรับอุปกรณ์เครื่องเดียวคุณควรเริ่มที่ความหนาแน่นต่ำสุด เนื่องจากหากคุณเริ่มออกแบบที่ 1x คุณก็ต้องทำการวัดเป็นพิกเซลและค่าต่างๆจะยังคงเหมือนเดิมใน DP

อย่างไรก็ตามหากคุณออกแบบสำหรับ 3.5x คุณต้องหารค่าทั้งหมดด้วย 3.5 เพื่อปรับให้เข้ากับความหนาแน่นอื่น ๆ จากนั้นก็จะกลายเป็นเรื่องน่าปวดหัวในการคำนวณค่า DP หลายค่า

เคล็ดลับเพิ่มเติมสำหรับการออกแบบ Android 10 UI / UX

หากคุณต้องการสีที่กำหนดเองสำหรับส่วนประกอบของธีมเช่นวิทยุปุ่มช่องทำเครื่องหมาย ฯลฯ คุณควรทำ ไม่ ใช้ drawables เพื่อแสดงสถานะต่างๆ ( ตรวจสอบคลิก ฯลฯ ) . เนื่องจากเมื่อคุณใช้ drawables คุณจะสูญเสียเอฟเฟ็กต์ดีไซน์ Material ดั้งเดิม (เหมือนระลอกคลื่น) ซึ่ง Google อัปเดตอย่างกว้างขวางใน Android 9 และ Android 10

เมื่อทำงานกับดีไซน์ Material Google มีสินค้ามากมายที่คุณสามารถใช้ประโยชน์ได้และสิ่งเหล่านี้จะเข้ากับ UI / UX ของคุณอย่างเป็นธรรมชาติมากขึ้น

ตัวอย่างเช่นคำหลักสองสามคำต่อไปนี้สำหรับส่วนประกอบที่เป็นธีมที่มีองค์ประกอบการออกแบบวัสดุในตัวและแอปหรือ UI / UX ของคุณจะยังคงเพลิดเพลินกับพฤติกรรมของระบบดั้งเดิมและสถานะ UI

ปุ่มที่มีสีที่กำหนดเอง android: backgroundTint = '@ color / red' ----- ปุ่มตัวเลือกที่มีสีที่กำหนดเอง android: buttonTint = '@ color / red' ----- รูปภาพและไอคอน android: drawableTint = '@ color / สีแดง '----- ProgressBar พร้อม Android สีที่กำหนดเอง: progressTint =' @ color / red '

หากต้องการแสดงเงาอย่างง่ายด้านล่างส่วนประกอบเช่นในโหมดมุมมองการ์ดคุณต้องใช้คุณสมบัติการยกระดับ

Android: ความสูง = '1dp'

การรวมแท็กและคุณสมบัติหลักมีประโยชน์อย่างยิ่งเพื่อให้คุณควบคุมและจัดการไฟล์ XML ได้ดีขึ้น

การเปลี่ยนแปลงเลย์เอาต์แบบเคลื่อนไหวสามารถปรับปรุง UX ของคุณได้อย่างแท้จริงและ ViewGroup เกือบทั้งหมดจะเคารพในสิ่งนี้ ดังนั้นเมื่อใดก็ตามที่มีการเปลี่ยนแปลงลำดับชั้นของมุมมองระบบจะแสดงภาพเคลื่อนไหว คุณยังสามารถออกแบบได้ด้วยความรู้เล็กน้อย เอฟเฟกต์การเปลี่ยนแปลงที่กำหนดเอง .

android: animateLayoutChanges = 'จริง'