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

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

ฉันขอยกตัวอย่างเรื่องเล่าให้คุณฟังสักครู่หนึ่งมีคนขอให้ฉันสร้างหน้าจอเริ่มต้นสำหรับซอฟต์แวร์พีซีของพวกเขา ดังนั้นฉันจึงออกไป - ดึงมันออกมาจากกระดาษร่างนำเข้ามาที่ PhotoShop สร้างเส้นนีออนและเอฟเฟกต์มากมาย มันอาจเป็นภาพพื้นหลังเดสก์ทอปมากกว่าหน้าจอสาด ประเด็นคือฉันสร้างการออกแบบที่หรูหราและประณีตสำหรับพวกเขา

ในขณะที่คุณสามารถเดาได้พวกเขาไม่ชอบ การออกแบบที่พวกเขาไปด้วยนั้นเป็นโลโก้เล็ก ๆ ของวงกลมสีที่ซ้อนทับกันอยู่สองสามดวงและชื่อซอฟต์แวร์ด้านล่าง เช่นเดียวกับ 2 นาทีในงาน PhotoShop และคุณรู้อะไรไหม ฉันต้องยอมรับว่ามันดีกว่าของฉัน

จุดที่ฉันทำคือ - ฉันคิดว่าโปรแกรมเมอร์ตกหลุมพรางการทำผิดแบบเดียวกันกับที่ฉันทำ เรามักจะนึกถึงหน้าจอ UIs และหน้าจอที่ต้องมีสิ่งที่น่าสนใจและสะดุดตาจริงๆที่ทำให้แอป โดดเด่น แต่พวกเขาไม่จำเป็นต้อง - โดยสุจริตพวกเขาไม่ควรจะเป็น เราควรใช้ความคิด ของโปรแกรมเมอร์ และนำไปใช้กับการออกแบบที่สวยงาม - เรียบง่ายใช้งานได้ดี

ในบทความนี้เราจะดูวิธีง่ายๆในการสร้าง Android APP UI / UX ที่สง่างามแม้ว่าคุณจะไม่มีประสบการณ์ในการออกแบบ

นอกจากว่าคุณต้องการบางสิ่งบางอย่างจริงๆให้ยึดการออกแบบวัสดุ

แอพของคุณไม่จำเป็นต้อง " ไม่เหมือนใคร" และ " โดดเด่นจากส่วนที่เหลือ" เพื่อให้แอปนั้นเป็นที่นิยมและดูดี นั่นคือสิ่งที่การออกแบบวัสดุของ Google กำหนดไว้เพื่อให้บรรลุ - มาตรฐานสำหรับ UI ของแอปทั่วทั้งอุตสาหกรรมและพวกเขาทำได้ดีมาก มีแอพยอดนิยมมากมายที่ยึดติดกับการออกแบบวัสดุ - ชื่อที่ยิ่งใหญ่ที่สุดในแอพ Android เช่น SwiftKey, Nova Launcher, Textra SMS, YouTube เพียงเพื่อตั้งชื่อไม่กี่

จุดเน้นหลักของการออกแบบวัสดุนั้นอยู่ในรูปแบบของการ์ดซึ่งมีจานสีทึบ Google ทำงานร่วมกับนักออกแบบอุตสาหกรรมชั้นนำโดยดึงองค์ประกอบมากมายจากแนวทางการออกแบบที่เรียบง่ายออกมาจากนั้นปล่อยให้ฟรี - นั่นเป็นข้อตกลงที่ดีทีเดียวเนื่องจากหลักสูตรการออกแบบเว็บไซต์และแอปสามารถวิ่งได้หลายร้อยดอลลาร์สำหรับ e-books วิดีโอ เป็นต้น

การเริ่มต้นใช้งานการออกแบบวัสดุนั้นง่ายอย่างไม่น่าเชื่อและมีเครื่องมือจำนวนหนึ่งที่ทำให้ง่ายขึ้นซึ่งเราจะแสดงรายการด้านล่าง:

• ตัวแก้ไขชุดรูปแบบวัสดุ (macOS + Sketch)
• ปลั๊กอินวัสดุการออกแบบจานสี (PhotoShop / Illustrator)
• ชุดการออกแบบวัสดุ UI Kit PSD (PhotoShop)
• ชุด UI การออกแบบวัสดุ Android ( ร่าง)
• วัสดุสร้างธีม UI

และหากคุณต้องการแรงบันดาลใจในการสร้างธีมการออกแบบวัสดุที่เรียบง่ายและสง่างามให้ดูบล็อกรายการเหล่านี้:

• MaterialDesignBlog - 15 ตัวอย่างสุดยอดของการออกแบบวัสดุที่ถูกต้อง
• MockPlus - 12 ตัวอย่างเว็บไซต์ออกแบบวัสดุที่ดีที่สุดในการวาดแรงบันดาลใจ
• AndroidAuthority - แอปออกแบบวัสดุที่ดีที่สุด 10 อันดับสำหรับ Android

การไล่ระดับสีเป็นวิธีที่ง่ายกว่าที่คุณคิด

สำหรับทางเลือกในการออกแบบวัสดุการไล่ระดับสีมีความเรียบง่ายทันสมัยและสะดุดตา และคุณอาจคิดว่านักออกแบบใช้เวลาวาดภาพในทุกสีหรือออกแบบไล่ระดับสีขั้นสุดท้าย คุณคิดผิด - สามารถทำได้ใน 10 วินาทีใน PhotoShop

10 วินาทีใน UI การไล่ระดับสีของ PhotoShop

ฉันจะแนะนำคุณผ่านสิ่งนี้เพื่อแสดงให้คุณเห็นว่ามันง่ายแค่ไหน

สร้างโครงการ PS ใหม่สำหรับมือถือ ( 1080 x 1920 px @ 72 ppi ทำงานได้ดี)

UIGradients.com - คอลเลกชันขนาดใหญ่ของการไล่ระดับสีที่ทำไว้ล่วงหน้า

ไปที่ UIGradients.com และค้นหาสิ่งที่คุณชอบ

คัดลอกค่าฐานสิบหกสีจาก UIGradients

คัดลอกสีไล่ระดับสีจากตัวอย่างด้านบน

ตัวเลือกไล่ระดับสีของ PhotoShop

คลิกขวาที่เลเยอร์ที่ว่างเปล่าใน PS และไปที่ตัวเลือกการผสม> การไล่สีแบบไล่ระดับสี

คลิกที่รูปแบบการไล่ระดับสีโดยตรงในเมนูแบบเลื่อนลง - อย่าคลิกที่ปุ่มดรอปดาวน์ การคลิกที่การไล่ระดับสีโดยตรงจะเป็นการเปิดโปรแกรมแก้ไขสี

ป้อนค่าฐานสิบหกจาก UIGradient ลงในเครื่องมือไล่ระดับ PS

ตอนนี้เพียงแค่วางค่าสีฐานสิบหกจาก UIGradient ลงในโปรแกรมแก้ไขการไล่ระดับสี PS

ปรับตามความจำเป็น ตอนนี้คุณมีพื้นหลังไล่ระดับมืออาชีพสำหรับแอพ Android ของคุณ

เครื่องมือไล่ระดับสีอื่น ๆ ที่ควรค่าแก่การตรวจสอบ:

• WebGradients.com
• ตัวสร้างรูปร่าง Android ( สำหรับการสร้างรูปร่างผ่าน XML พร้อมตัวเลือกสำหรับการไล่ระดับสี)

ใช้ SVG แทน JPG / PNG

แทนที่จะใช้ PNGs หรือ JPG สำหรับองค์ประกอบกราฟิกของคุณ (ปุ่มโลโก้ ฯลฯ ) คุณควรใช้ SVG ( Scalable Vector Graphics) แทน นี่เป็นเพราะ SVG สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ - ตัวอย่างเช่นหากคุณอัปเกรด JPG เป็นค่าที่สูงขึ้นจะสูญเสียคุณภาพและกลายเป็นพร่ามัว / พิกเซล SVG ไม่ได้ ผู้คนพยายามใช้ไฟล์ PNG ขนาดใหญ่ที่จะ ลดขนาด ให้พอดีกับหน้าจอ Android - แต่ในทางกลับกันคุณสามารถใช้ SVG ขนาดเล็กที่ลดขนาดลงได้โดยไม่สูญเสียคุณภาพ

นอกจากนี้ SVG สามารถมี ขนาดไฟล์เล็กกว่า PNG ได้ถึง 60% ถึง 80% ซึ่งหมายความว่าแอปหรือเว็บไซต์มือถือของคุณจะโหลดเร็วขึ้นสำหรับผู้ใช้และจะดูดีไม่ว่าความละเอียดหน้าจอจะเป็นอย่างไร

รวมโหมดมืดโดยใช้ Theme.AppCompat.DayNight

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

ดูคำแนะนำของ Appual“ วิธีการนำ Dark Mode มาใช้ในแอพ Android ของคุณ”

ใช้เทมเพลตหรือ Mobile UI Kit

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

แหล่งข้อมูลที่ดีเยี่ยมสำหรับเทมเพลตและชุดอุปกรณ์ Android UI:

• SpeckyBoy - ชุดอุปกรณ์มือถือ UI ฟรี 50 ชุดสำหรับ iOS และ Android
• SketchAppSources - ทรัพยากรแอป Android UI ( ร่าง)
• Freebiesbug - ชุด PSD ของ PSD ( PhotoShop)