โปรแกรมเมอร์และนักพัฒนโดยทั่วไปไม่ใช่นักออกแบบ - นี่เป็นที่ยอมรับกันทั่วไปว่าเป็นจริง นักพัฒนาทendance มุ่งเน้นที่การทำให้แอป ทำงาน - นักออกแบบมุ่งเน้นที่การทำให้แอป สวยงามดึงดูดสายตา แต่ทำไมนักพัฒนาจึงไม่ทำได้เหมือนกัน?
ในอดีต เมื่อแอนิเมชัน splash landing pages และ layout หรูๆ เป็นเรื่องนิยม แล้วแน่นอนว่าจ้างนักออกแบบมืออาชีพเป็นเรื่องสมเหตุสมผล แตแนวโน้มวันนี้คือ minimal - หรืออย่างน้อยก็ simplified อย่างมาก
ลองให้ฉันให้ตัวอย่างจากประสบการณ์ส่วนตัว - ไม่นานมานี้ ใครสักคนขอให้ฉันสร้าง splash screen สำหรับซอฟต์แวร์ PC ของพวกเขา ฉันจึงทำเต็มที่ - วาดบนกระดาษ sketch นำเข้า PhotoShop สร้างเส้นนีออนและเอฟเฟกต์หรูหรามาก มันอาจเป็น desktop wallpaper ได้ มากกว่า splash screen จุดคือฉันสร้างดีไซน์ที่หรูหราและซับซ้อนมากสำหรับพวกเขา
คุณคาดเดาได้ว่าพวกเขาไม่ชอบ มันดีไซน์ที่พวกเขาเลือกคือโลโก้เล็กๆ เพียงวงกลมสีทับซ้อนกันไม่กี่วง และชื่อซอฟต์แวร์ด้านล่าง แค่งาน 2 นาทีใน PhotoShop และคุณรู้ไหม? ฉันต้องยอมรับว่ามันดีกว่าของฉัน
จุดที่ฉันพยายามบอกคือ - ฉันคิดว่านักเขียนโปรแกรมตกกับกับดักของการทำข้อผิดพลาดเดียวกับที่ฉันทำ เรามักคิดว่า UI และ splash screens ต้องเป็นสิ่งหรูหรา ดึงดูดสายตา ที่ทำให้แอป โดดเด่น แต่ไม่จำเป็น - จริงๆ แล้วไม่ควรเป็นเช่นนั้น เราควรนำ mindset ของโปรแกรมเมอร์ ไปใช้กับการออกแบบเชิงศิลป์ - เรียบง่าย ทำงานได้ ฟังก์ชันครบ
ในบทความนี้ เราจะดูวิธีง่ายๆ สำหรับการสร้าง Android APP UI/UX ที่สง่างาม แม้คุณจะมีประสบการณ์ด้านการออกแบบเกือบศูนย์
หากคุณไม่ได้อยากอย่างอื่นจริงๆ ให้มั่นกับ Material Design
แอปของคุณไม่จำเป็นต้อง "ไม่ซ้ำใคร" และ "โดดเด่นจากคนอื่น" เพื่อจะได้รับความนิยมและดูดี นั่นคือสิ่งที่ Google Material Design มุ่งบรรลุ - มาตรฐานสำหรับ UI แอปทั่วอุตสาหกรรม และพวกเขาทำได้ดี มีแอปยอดนิยมมากมายที่ยึด Material Design - ชื่อดังบางชื่อในแอป Android เช่น SwiftKey, Nova Launcher, Textra SMS, YouTube เพื่อนำไปบ้าง
หัวใจสำคัญของ Material Design คือ layout แบบการ์ด พร้อม color palette ที่มั่นคง Google ทำงานร่วมกับนักออกแบบอุตสาหกรรมชั้นนำ ดึงองค์ประกอบมากมายจากแนวปฏิบัติ minimalist design และปล่อยทั้งชุดฟรี - นั่นเป็นดีลดีมาก เพราะคอร์สออกแบบเว็บและแอปอาจราคาร้อยดอลลาร์สำหรับ e-books, วิดีโอ ฯลฯ
เริ่มต้นกับ Material Design ง่ายมาก และมีเครื่องมือช่วยให้ง่ายขึ้นอีก ซึ่งเราจะรายการด้านล่าง:
- Material Theme Editor (macOS + Sketch)
- Material Design Color Palette plug-in (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit (Sketch)
- Material UI Theme Generator
และหากคุณต้องการแรงบันดาลใจสำหรับการสร้างธีม Material Design ที่เรียบง่าย สง่างาม ให้ดูบล็อกรายการเหล่านี้:
- MaterialDesignBlog - 15 ตัวอย่าง Material Design ที่ทำได้ถูกต้อง
- MockPlus - 12 ตัวอย่างเว็บไซต์ Material Design ที่ดีที่สุดเพื่อดึงแรงบันดาลใจ
- AndroidAuthority - 10 แอป Material Design ที่ดีที่สุดสำหรับ Android
Color Gradients ง่ายกว่าที่คุณคิดมาก
สำหรับทางเลือกแทน Material Design color gradients เรียบง่าย ทันสมัย และดึงดูดสายตา และคุณอาจคิดว่านักออกแบบใช้เวลามากในการระบายสีทั้งหมด หรือออกแบบ gradient ที่ยอดเยี่ยม คุณคิดผิด - ทำได้ใน 10 วินาทีใน PhotoShop
ฉันจะแนะนำทีละขั้นตอน เพื่อแสดงว่ามันง่ายแค่ไหน
สร้างโปรเจกต์ PS ใหม่สำหรับ Mobile (1080 x 1920 px @ 72 ppi ใช้ได้ดี)
ไปที่ UIGradients.com และหาสิ่งที่คุณชอบ
คัดลอกสี gradient จากด้านบนของ preview
คลิกขวาบน layer ว่างใน PS ไปที่ Blending Options > Gradient Overlay
คลิกโดยตรงบน preview รูปแบบ gradient ในเมนู dropdown - อย่ากดปุ่ม dropdown ให้คลิกตรงที่ gradient จะเปิด color editor
ตอนนี้แค่วางค่า hex color จาก UIGradient ลงใน PS gradient editor
ปรับแต่งตามต้องการ ตอนนี้คุณมีพื้นหลัง gradient มืออาชีพสำหรับแอป Android ของคุณแล้ว
เครื่องมือ gradient อื่นๆ ที่คุ้มค่าที่จะดู:
- WebGradients.com
- Android Shapes Generator (สำหรับสร้าง shapes ผ่าน XML พร้อมตัวเลือก gradient)
ใช้ SVGs แทน JPG / PNG
แทนที่จะใช้ PNGs หรือ JPGs สำหรับองค์ประกอบกราฟิก (ปุ่ม โลโก้ ฯลฯ) คุณควรใช้ SVGs (Scalable Vector Graphics) แทน เพราะ SVGs สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ - ตัวอย่าง หากคุณขยาย JPG ให้ใหญ่ขึ้น มันจะเสียคุณภาพและเบลอ/แตกพิกเซล SVG ไม่เป็นเช่นนั้น
นอกจากนี้ SVGs สามารถเล็กกว่า PNG ได้ 60% ถึง 80% หมายความว่าแอปหรือเว็บมือถือของคุณจะโหลดเร็วกว่าสำหรับผู้ใช้ และดูดีไม่ว่าจะเป็นความละเอียดหน้าจอเท่าไหร่
รวม Dark Mode ด้วย Theme.AppCompat.DayNight
คุณไม่ต้องออกแบบธีมสองชุดเพื่อรวม dark/night mode theme ในแอป มัน built-in ใน AppCompat library เกือบหมด คุณแค่ต้องเปิดใช้งานและแก้ไขค่า
ดูคู่มือ Appual "How to Implement a Dark Mode in your Android App"
ใช้ Template หรือ Mobile UI Kit
หากแอปของคุณไม่เรียก GUI ที่หรูหราแบบกำหนดเอง ไม่มีอะไรผิดกับการใช้ template หรือ kit Templates และ kits สามารถใช้เป็นแนวทางแรงบันดาลใจ หรือคุณสามารถใช้ template/kit เลยตามที่เป็น แค่เพิ่มปุ่มของคุณเองและสิ่งต่างๆ
แหล่งข้อมูลดีๆ สำหรับ Android UI templates และ kits:
- SpeckyBoy - 50 Free Mobile UI Kits สำหรับ iOS & Android
- SketchAppSources - Android UI App Resources (Sketch)
- Freebiesbug - PSD UI Kits (PhotoShop)
