Lập trình viên và developer thường không phải designer - đây là chân lý được chấp nhận rộng rãi. Developer tập trung làm app hoạt động - designer tập trung làm app thẩm mỹ. Nhưng tại sao developer không làm được như designer?
Xưa kia, khi trang landing page hoạt hình và layout lộng lẫy còn là trend, thuê designer chuyên nghiệp có lý. Nhưng xu hướng hiện nay là tối giản - hoặc ít nhất là đơn giản hóa mạnh mẽ.
Để ví dụ thực tế: lâu rồi, ai đó nhờ tôi tạo splash screen cho phần mềm PC. Tôi làm hết sức - vẽ sketch, import Photoshop, tạo hiệu ứng neon lấp lánh. Nó có thể làm wallpaper desktop hơn là splash screen. Ý là tôi tạo thiết kế rất phức tạp, cầu kỳ.
Như bạn đoán, họ không thích. Thiết kế họ chọn chỉ là logo nhỏ vài vòng tròn chồng chéo, tên phần mềm dưới đó. Việc 2 phút trên Photoshop. Và biết gì? Tôi phải thừa nhận nó tốt hơn thiết kế của tôi.
Điểm tôi muốn nói: lập trình viên rơi vào bẫy犯 cùng lỗi tôi mắc. Chúng ta thường nghĩ UI và splash screen cần cầu kỳ, bắt mắt để app nổi bật. Thực tế không cần - thậm chí không nên. Chúng ta nên áp dụng tư duy lập trình viên vào thiết kế thẩm mỹ - đơn giản, chức năng, hoạt động.
Trong bài này, chúng ta sẽ xem các cách đơn giản tạo UI/UX Android app thanh lịch, ngay cả khi bạn gần như không có kinh nghiệm thiết kế.
Trừ khi thực sự muốn khác biệt, hãy dùng Material Design
App không cần "độc đáo" và "nổi bật so với đám đông" để phổ biến và đẹp. Đó là mục tiêu của Google Material Design - chuẩn UI app trên toàn ngành, và họ làm tốt. Rất nhiều app phổ biến dùng Material Design - SwiftKey, Nova Launcher, Textra SMS, YouTube, chỉ kể vài cái tên lớn.
Trọng tâm Material Design là layout dựa trên card, với palette màu rắn. Google làm việc với top designer ngành, lấy nhiều yếu tố từ thực hành thiết kế tối giản, phát hành miễn phí - deal khá tốt, vì khóa học thiết kế web/app có thể chạy tới hàng trăm đô cho ebook, video...
Bắt đầu với Material Design cực dễ, có vài tool làm cho nó đơn giản hơn:
- Material Theme Editor (macOS + Sketch)
- Material Design Color Palette plugin (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Android Material Design UI Kit (Sketch)
- Material UI Theme Generator
Nếu cần cảm hứng tạo theme Material Design đơn giản, thanh lịch, xem các blog danh sách:
- MaterialDesignBlog - 15 ví dụ Material Design tuyệt vời
- MockPlus - 12 ví dụ Website Material Design tốt nhất để lấy cảm hứng
- AndroidAuthority - 10 app Material Design tốt nhất cho Android
Color Gradients dễ dàng hơn bạn nghĩ
Thay thế Material Design, color gradient đơn giản, trendy, bắt mắt. Bạn có thể nghĩ designer dành nhiều thời gian vẽ màu, thiết kế gradient hoàn hảo. Sai - có thể làm trong 10 giây trên Photoshop.
Tôi sẽ hướng dẫn từng bước cho thấy dễ dàng thế nào.
- Tạo project PS mới cho Mobile (1080 x 1920 px @ 72 ppi ổn)
- Vào UIGradients.com tìm gradient bạn thích.
- Copy màu gradient từ trên preview.
- Right-click layer trống trong PS, chọn Blending Options > Gradient Overlay.
- Click trực tiếp vào preview pattern gradient trong dropdown - không click nút dropdown. Click trực tiếp gradient mở color editor.
- Dán giá trị hex màu từ UIGradient vào PS gradient editor.
- Điều chỉnh nếu cần. Bạn đã có background gradient chuyên nghiệp cho app Android.
Công cụ gradient khác đáng xem:
- WebGradients.com
- Android Shapes Generator (tạo shape qua XML, có option gradient)
Dùng SVG thay vì JPG/PNG
Thay vì dùng PNG/JPG cho element đồ họa (nút, logo...), bạn thực sự nên dùng SVG (Scalable Vector Graphics). Vì SVG resize không mất chất lượng - upscale JPG lên to hơn bị mờ/pixelated. SVG không.
Hơn nữa, SVG nhỏ hơn PNG 60-80% dung lượng file. App/web mobile load nhanh hơn cho user, đẹp trên mọi độ phân giải màn hình.
Thêm Dark Mode dùng Theme.AppCompat.DayNight
Không cần thiết kế 2 theme riêng để có dark/night mode. Nó built-in trong thư viện AppCompat, chỉ cần bật và chỉnh giá trị.
Xem hướng dẫn Appuals "How to Implement a Dark Mode in your Android App".
Dùng Template hoặc Mobile UI Kit
Nếu app không cần GUI tùy chỉnh phức tạp, hoàn toàn không sai dùng template/kit. Chúng có thể làm hướng dẫn cảm hứng, hoặc dùng nguyên bản, thêm nút bấm của bạn.
Nguồn tuyệt vời cho Android UI template/kit:
- SpeckyBoy - 50 Free Mobile UI Kits cho iOS & Android
- SketchAppSources - Android UI App Resources (Sketch)
- Freebiesbug - PSD UI Kits (PhotoShop)