วิธีออกแบบ UI ของแอป Android ที่ไม่ห่วย

. แต่ทำไมนักพัฒนาถึงทำแบบเดียวกันไม่ได้

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

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

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

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

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

หากคุณไม่ต้องการสิ่งอื่นจริงๆให้ยึดติดกับดีไซน์ Material

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

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

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

ตัวแก้ไขธีมวัสดุ (macOS + Sketch)
ปลั๊กอิน Material Design Color Palette (PhotoShop / Illustrator)
PSD ชุด UI การออกแบบวัสดุ (โฟโต้ช็อป)
ชุด UI การออกแบบวัสดุ Android ( ร่าง)
ตัวสร้างธีม UI วัสดุ

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

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

การไล่ระดับสีทำได้ง่ายกว่าที่คุณคิด

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

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

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

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

UIGradients.com - ชุดการไล่ระดับสีสำเร็จรูปจำนวนมาก

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

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

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

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

คลิกขวาที่เลเยอร์ว่างใน PS แล้วไปที่ Blending Options> Gradient Overlay

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

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

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

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

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

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

ใช้ SVG แทน JPG / PNG

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

world of warcraft ไม่สามารถเริ่มการเร่งความเร็ว 3 มิติได้

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

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

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

ดูคู่มือของ Appual“ วิธีติดตั้ง Dark Mode ในแอพ Android ของคุณ ”.

ใช้เทมเพลตหรือชุด UI มือถือ

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

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