Các lập trình viên và nhà phát triển thường không phải là nhà thiết kế - điều này được nhiều người chấp nhận là đúng. Các nhà phát triển có xu hướng tập trung vào việc làm cho một ứng dụng hoạt động - các nhà thiết kế tập trung vào việc làm cho ứng dụng hấp dẫn về mặt thẩm mỹ . Nhưng tại sao các nhà phát triển không thể làm như vậy?
Ngày trước, khi các trang đích giật gân hoạt hình và bố cục lạ mắt là một điều thú vị, thì chắc chắn, thuê một nhà thiết kế chuyên nghiệp là điều hoàn toàn hợp lý. Nhưng xu hướng ngày nay là tối thiểu - hoặc ít nhất là được đơn giản hóa rất nhiều.
Hãy để tôi cho bạn một ví dụ điển hình - một thời gian trước, một người nào đó đã yêu cầu tôi tạo một màn hình giật gân cho phần mềm PC của họ. Vì vậy, tôi đã làm hết sức mình - vẽ nó ra giấy nháp, nhập nó vào PhotoShop, tạo ra rất nhiều đường nét và hiệu ứng neon lạ mắt. Đó có thể là hình nền máy tính, chứ không phải là màn hình giật gân. Vấn đề là tôi đã tạo ra thiết kế thực sự lạ mắt và công phu này cho họ.
Như bạn có thể đoán, họ không thích nó. Thiết kế mà họ đi theo đúng nghĩa là một logo nhỏ gồm một vài vòng tròn màu chồng lên nhau và tên phần mềm bên dưới nó. Như, 2 phút trong công việc PhotoShop. Và bạn biết những gì? Tôi phải đồng ý rằng nó tốt hơn của tôi.
Do đó, quan điểm của tôi là - Tôi nghĩ rằng các lập trình viên rơi vào cái bẫy này khi mắc phải sai lầm giống như tôi đã làm. Chúng tôi có xu hướng nghĩ rằng giao diện người dùng và màn hình giật gân cần phải là những thứ thực sự lạ mắt, bắt mắt để làm cho ứng dụng nổi bật . Nhưng họ không nhất thiết phải như vậy - thành thật mà nói, họ không nên như vậy. Chúng ta nên học lập trình viên tư duy và áp dụng nó vào thiết kế thẩm mỹ - công trình đơn giản, chức năng.
Trong bài viết này, chúng ta sẽ xem xét một số cách rất đơn giản để tạo Giao diện người dùng / UX APP Android trang nhã, ngay cả khi bạn hầu như không có kinh nghiệm thiết kế.
Trừ khi bạn thực sự muốn thứ gì đó khác, hãy tập trung vào thiết kế Material Design
Ứng dụng của bạn không cần phải “ độc nhất” và “ nổi bật so với phần còn lại” để nó trở nên phổ biến và trông đẹp mắt. Đó là những gì Material Design của Google đặt ra để đạt được - một tiêu chuẩn cho giao diện người dùng ứng dụng trong toàn ngành và họ đã hoàn thành rất tốt công việc của mình. Có rất nhiều ứng dụng phổ biến gắn liền với Material Design - một số tên tuổi lớn nhất trong các ứng dụng Android, như SwiftKey, Nova Launcher, Textra SMS, YouTube, chỉ là một vài cái tên.
Trọng tâm cốt lõi của Material Design là bố cục dựa trên thẻ, với bảng màu đồng nhất. Google đã làm việc với các nhà thiết kế hàng đầu trong ngành, rút ra rất nhiều yếu tố từ các phương pháp thiết kế tối giản và sau đó phát hành miễn phí toàn bộ - đó là một thỏa thuận khá tốt, vì các khóa học thiết kế trang web và ứng dụng có thể trị giá hàng trăm đô la cho sách điện tử, video, vv
Bắt đầu với Material Design vô cùng dễ dàng và có một số công cụ giúp việc này trở nên đơn giản hơn nữa mà chúng tôi sẽ liệt kê bên dưới:
- Trình chỉnh sửa chủ đề vật liệu (macOS + Sketch)
- Trình cắm Bảng màu Material Design (PhotoShop / Illustrator)
- PSD Material Design UI Kit (PhotoShop)
- Bộ giao diện người dùng thiết kế vật liệu Android ( Sketch)
- Trình tạo chủ đề Material UI
Và nếu bạn cần một số cảm hứng để tạo các chủ đề Material Design đơn giản, thanh lịch, hãy xem các blog danh sách sau:
- MaterialDesignBlog - 15 ví dụ tuyệt vời về Material Design được thực hiện đúng cách
- MockPlus - 12 Ví dụ về Trang web Thiết kế Vật liệu Tốt nhất để Tạo Cảm hứng
- AndroidAuthority - 10 ứng dụng Material Design tốt nhất dành cho Android
Màu sắc dễ dàng hơn bạn nghĩ
Để thay thế cho Material Design, các gradient dolor đơn giản, hợp thời trang và bắt mắt. Và bạn có thể nghĩ rằng các nhà thiết kế dành rất nhiều thời gian để sơn tất cả các màu hoặc thiết kế gradient cuối cùng. Bạn đã nhầm - nó có thể được thực hiện trong 10 giây trong PhotoShop.
Tôi thậm chí sẽ hướng dẫn bạn cách này để cho bạn thấy nó dễ dàng như thế nào.
Tạo một dự án PS mới cho Di động ( 1080 x 1920 px @ 72 ppi hoạt động tốt)
Truy cập UIGradients.com và tìm thứ gì đó bạn thích.
Sao chép các màu chuyển sắc từ phía trên bản xem trước.
Nhấp chuột phải vào một lớp trống trong PS và đi tới Tùy chọn hòa trộn> Lớp phủ Gradient.
Nhấp trực tiếp vào bản xem trước mẫu gradient trong menu thả xuống - không nhấp vào nút thả xuống. Nhấp trực tiếp vào gradient sẽ mở trình chỉnh sửa màu.
Bây giờ chỉ cần dán dán các giá trị hex màu từ UIGradient vào trình chỉnh sửa gradient PS.
Điều chỉnh khi cần thiết. Giờ đây, bạn đã có một nền gradient chuyên nghiệp cho ứng dụng Android của mình.
Các công cụ gradient khác đáng thử:
- WebGradients.com
- Trình tạo hình dạng Android ( để tạo hình dạng qua XML, với tùy chọn cho gradient)
Sử dụng SVG thay vì JPG / PNG
Thay vì sử dụng PNG hoặc JPG cho các yếu tố đồ họa của bạn (nút, biểu trưng, v.v.), bạn thực sự nên sử dụng SVG ( Đồ họa vectơ có thể mở rộng) thay thế. Điều này là do SVG có thể được thay đổi kích thước mà không làm giảm chất lượng - ví dụ:nếu bạn nâng cấp JPG lên một giá trị lớn hơn, nó sẽ mất chất lượng và trở nên mờ / pixel. SVG thì không. Mọi người cố gắng sử dụng các tệp PNG lớn sẽ được giảm tỷ lệ để vừa với màn hình Android - thay vào đó, bạn có thể sử dụng SVG nhỏ hơn được nâng cấp mà không làm giảm chất lượng.
Hơn nữa, SVG có thể có kích thước tệp nhỏ hơn tới 60% đến 80% so với PNG . Điều này có nghĩa là ứng dụng hoặc trang web dành cho thiết bị di động của bạn sẽ tải nhanh hơn đối với người dùng và trông sẽ đẹp bất kể độ phân giải màn hình.
Bao gồm Chế độ tối bằng cách sử dụng Theme.AppCompat.DayNight
Bạn không cần thiết kế hai chủ đề riêng biệt để bao gồm chủ đề chế độ tối / đêm trong ứng dụng của mình. Nó được tích hợp khá nhiều vào thư viện AppCompat, bạn chỉ cần kích hoạt nó và chỉnh sửa các giá trị.
Xem hướng dẫn của Appual “Cách triển khai Chế độ tối trong ứng dụng Android của bạn”.
Sử dụng Mẫu hoặc Bộ giao diện người dùng di động
Nếu ứng dụng của bạn không yêu cầu GUI tùy chỉnh, lạ mắt, thì việc sử dụng mẫu hoặc bộ công cụ hoàn toàn không có gì sai. Mẫu và bộ dụng cụ có thể được sử dụng như một hướng dẫn đầy cảm hứng hoặc bạn có thể chỉ sử dụng mẫu / bộ dụng cụ như nó vốn có, thêm các nút và nội dung của riêng bạn.
Một số tài nguyên tuyệt vời dành cho các mẫu và bộ công cụ giao diện người dùng Android:
- SpeckyBoy - 50 Bộ giao diện người dùng di động miễn phí cho iOS và Android
- SketchAppSources - Tài nguyên ứng dụng giao diện người dùng Android ( Sketch)
- Freebiesbug - Bộ dụng cụ giao diện người dùng PSD ( PhotoShop)