โปรแกรมเมอร์และนักพัฒนาโดยทั่วไปไม่ใช่นักออกแบบ – ซึ่งเป็นที่ยอมรับกันโดยทั่วไปว่าเป็นความจริง นักพัฒนามักจะเน้นที่การทำให้แอปทำงาน – นักออกแบบเน้นทำให้แอป ดึงดูดสายตา . แต่ทำไมนักพัฒนาจะทำแบบเดียวกันไม่ได้
ย้อนกลับไปในสมัยที่หน้า Landing Page ของ Splash แบบเคลื่อนไหวและเลย์เอาต์แฟนซีเป็นเรื่องสำคัญ แน่นอนว่ามันสมเหตุสมผลที่จะจ้างนักออกแบบมืออาชีพ แต่เทรนด์วันนี้ ขั้นต่ำ – หรืออย่างน้อยก็ทำให้เข้าใจง่ายขึ้นมาก
ให้ฉันยกตัวอย่างเล็กน้อย ก่อนหน้านี้ มีคนขอให้ฉันสร้างหน้าจอสแปลชสำหรับซอฟต์แวร์พีซีของพวกเขา ดังนั้นฉันจึงทำทุกอย่าง วาดมันลงบนกระดาษสเก็ตช์ นำเข้าไปยัง PhotoShop สร้างเส้นนีออนและเอฟเฟกต์แฟนซีมากมาย อาจเป็นวอลเปเปอร์เดสก์ท็อปแทนที่จะเป็นหน้าจอสแปลช ประเด็นคือฉันสร้างการออกแบบที่หรูหราและประณีตสำหรับพวกเขา
อย่างที่คุณอาจเดาได้ว่าพวกเขาไม่ชอบมัน การออกแบบที่พวกเขาใช้นั้นเป็นโลโก้เล็กๆ ของวงกลมสีที่ทับซ้อนกันสองสามวง และชื่อซอฟต์แวร์ด้านล่าง ชอบงาน Photoshop สัก 2 นาที และคุณรู้อะไรไหม ฉันต้องยอมรับว่าดีกว่าของฉัน
ประเด็นที่ฉันทำคือ ฉันคิดว่าโปรแกรมเมอร์ตกหลุมพรางของการทำผิดพลาดแบบเดียวกับที่ฉันทำ เรามักจะคิดว่า UI และหน้าจอสแปลชจำเป็นต้องเป็นสิ่งที่สวยงามและสะดุดตาซึ่งทำให้แอป โดดเด่น . แต่พวกเขาไม่จำเป็นต้องเป็น พูดตามตรง ไม่ควรเป็นเช่นนั้น เราควรจะเอา โปรแกรมเมอร์ ความคิดและนำไปใช้กับการออกแบบที่สวยงาม – เรียบง่าย ใช้งานได้จริง ได้ผล
ในบทความนี้ เราจะมาดูวิธีง่ายๆ ในการสร้าง Android APP UI / UX ที่สวยงาม แม้ว่าคุณจะแทบไม่มีประสบการณ์ในการออกแบบเลย
ถ้าคุณไม่ต้องการอย่างอื่นจริงๆ ให้ยึดติดกับดีไซน์ Material
แอปของคุณไม่จำเป็นต้อง "ไม่เหมือนใคร" และ “โดดเด่นกว่าที่อื่น” เพื่อให้เป็นที่นิยมและดูดี นั่นคือสิ่งที่การออกแบบวัสดุของ Google ตั้งเป้าไว้ – ซึ่งเป็นมาตรฐานสำหรับ UI ของแอปทั่วทั้งอุตสาหกรรม และพวกเขาก็ทำได้ดี มีแอปยอดนิยมมากมายที่ยึดติดกับดีไซน์ Material ซึ่งเป็นชื่อที่ใหญ่ที่สุดในแอป Android เช่น SwiftKey, Nova Launcher, Textra SMS, YouTube เป็นต้น
จุดสนใจหลักของดีไซน์ Material อยู่ที่เลย์เอาต์แบบการ์ดพร้อมจานสีแบบทึบ Google ทำงานร่วมกับนักออกแบบชั้นนำในอุตสาหกรรม วาดองค์ประกอบมากมายจากแนวทางปฏิบัติด้านการออกแบบที่เรียบง่าย และจากนั้นก็เผยแพร่ทั้งหมดโดยไม่เสียค่าใช้จ่าย ซึ่งเป็นข้อตกลงที่ดีทีเดียว เนื่องจากหลักสูตรการออกแบบเว็บไซต์และแอปสามารถสร้างรายได้หลายร้อยดอลลาร์สำหรับ e-book, วิดีโอ, เป็นต้น
การเริ่มต้นใช้งานดีไซน์ Material นั้นง่ายอย่างเหลือเชื่อ และมีเครื่องมือจำนวนหนึ่งที่ทำให้ง่ายยิ่งขึ้นไปอีก ซึ่งเราจะแสดงรายการด้านล่าง:
- ตัวแก้ไขธีมวัสดุ (macOS + Sketch)
- ปลั๊กอิน Material Design Colour Palette (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit (Sketch)
- ตัวสร้างธีม UI ของวัสดุ
และหากคุณต้องการแรงบันดาลใจในการสร้างธีมดีไซน์ Material ที่เรียบง่ายและสง่างาม โปรดดูบล็อกรายการเหล่านี้:
- MaterialDesignBlog – 15 ตัวอย่างที่ยอดเยี่ยมของดีไซน์ Material
- MockPlus – 12 ตัวอย่างเว็บไซต์ดีไซน์ Material ที่ดีที่สุดเพื่อสร้างแรงบันดาลใจ
- AndroidAuthority – 10 แอปดีไซน์ Material ที่ดีที่สุดสำหรับ Android
การไล่สีทำได้ง่ายกว่าที่คุณคิด
สำหรับทางเลือกอื่นนอกเหนือจากดีไซน์ Material การไล่ระดับสีแบบเรียบง่าย ทันสมัย และสะดุดตา และคุณอาจคิดว่านักออกแบบใช้เวลามากในการวาดภาพทุกสีหรือออกแบบการไล่ระดับขั้นสูงสุด คุณจะคิดผิด – สามารถทำได้ใน 10 วินาทีใน PhotoShop
ฉันยังจะแนะนำคุณเกี่ยวกับเรื่องนี้ เพื่อแสดงให้คุณเห็นว่ามันง่ายแค่ไหน
สร้างโปรเจ็กต์ PS ใหม่สำหรับมือถือ (1080 x 1920 px @ 72 ppi ทำงานได้ดี)
ไปที่ UIgradients.com แล้วค้นหาสิ่งที่คุณชอบ
คัดลอกการไล่ระดับสีจากด้านบนตัวอย่าง
คลิกขวาที่เลเยอร์ว่างใน PS แล้วไปที่ Blending Options> Gradient Overlay
คลิกโดยตรงบนการแสดงตัวอย่างรูปแบบการไล่ระดับสีในเมนูแบบเลื่อนลง – อย่าคลิกปุ่มดรอปดาวน์ การคลิกที่การไล่ระดับสีโดยตรงจะเป็นการเปิดโปรแกรมแก้ไขสี
ตอนนี้เพียงแค่วางค่าฐานสิบหกของสีจาก UIgradient ลงในตัวแก้ไขการไล่ระดับสี PS
ปรับตามความจำเป็น ตอนนี้คุณมีพื้นหลังไล่ระดับสีแบบมืออาชีพสำหรับแอป Android แล้ว
เครื่องมือไล่ระดับอื่นๆ ที่ควรค่าแก่การตรวจสอบ:
- WebGradients.com
- เครื่องมือสร้างรูปร่าง Android (สำหรับสร้างรูปร่างผ่าน XML พร้อมตัวเลือกสำหรับการไล่ระดับสี)
ใช้ SVG แทน JPG / PNG
แทนที่จะใช้ PNG หรือ JPG สำหรับองค์ประกอบกราฟิกของคุณ (ปุ่ม โลโก้ ฯลฯ) คุณควรใช้ SVG (Scalable Vector Graphics) แทนที่. นี่เป็นเพราะว่า SVG สามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ ตัวอย่างเช่น หากคุณเพิ่มขนาด JPG เป็นค่าที่มากขึ้น มันจะสูญเสียคุณภาพและกลายเป็นภาพเบลอ/เป็นพิกเซล SVG ไม่ได้ ผู้คนพยายามใช้ไฟล์ PNG ขนาดใหญ่ที่จะ ลดขนาด เพื่อให้พอดีกับหน้าจอ Android – คุณสามารถใช้ SVG ขนาดเล็กที่ ยกระดับ แทนได้ โดยไม่สูญเสียคุณภาพ
นอกจากนี้ SVG สามารถมีขนาดไฟล์เล็กกว่า PNG ได้สูงสุดถึง 60% ถึง 80% . ซึ่งหมายความว่าแอปหรือเว็บไซต์บนอุปกรณ์เคลื่อนที่ของคุณจะโหลดเร็วขึ้นสำหรับผู้ใช้ และจะดูดีไม่ว่าความละเอียดหน้าจอจะเป็นอย่างไร
รวมโหมดมืดโดยใช้ Theme.AppCompat.DayNight
คุณไม่จำเป็นต้องออกแบบสองธีมแยกกันเพื่อรวมธีมโหมดมืด/กลางคืนในแอปของคุณ มันค่อนข้างสร้างมาในไลบรารี AppCompat คุณเพียงแค่ต้องเปิดใช้งานและแก้ไขค่า
ดูคำแนะนำของ Appual “วิธีใช้งานโหมดมืดในแอป Android ของคุณ”
ใช้เทมเพลตหรือชุด UI สำหรับอุปกรณ์เคลื่อนที่
หากแอปของคุณไม่ต้องการ GUI ที่สวยงามและปรับแต่งได้ การใช้เทมเพลตหรือชุดอุปกรณ์ก็ไม่ผิดเพี้ยน เทมเพลตและชุดอุปกรณ์สามารถใช้เป็นแนวทางสร้างแรงบันดาลใจ หรือคุณสามารถใช้เทมเพลต/ชุดอุปกรณ์ตามที่เป็นอยู่ โดยเพิ่มปุ่มและสิ่งต่างๆ ของคุณเอง
แหล่งข้อมูลดีๆ สำหรับเทมเพลตและชุดเครื่องมือ Android UI:
- SpeckyBoy – 50 ชุด UI มือถือฟรีสำหรับ iOS และ Android
- SketchAppSources – ทรัพยากรแอป Android UI (Sketch)
- Freebiesbug – PSD UI Kits (PhotoShop)
