Cách thiết kế giao diện người dùng ứng dụng Android không bị mút
Các lập trình viên và nhà phát triển nói chung không phải là nhà thiết kế - điều này được chấp nhận rộng rãi 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 trở nên 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?
Trước đây, 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ì chắc chắn, việc thuê một nhà thiết kế chuyên nghiệp là điều hợp lý. Nhưng xu hướng ngày nay là tối thiểu - hoặc ít nhất là đơn giản hóa rất nhiều.
Để tôi cho bạn một ví dụ điển hình - một lúc trước, có người yêu cầu tôi tạo màn hình giật gân cho phần mềm PC của họ. Vì vậy, tôi đã đi ra ngoài - vẽ nó ra giấy phác thảo, nhập nó vào PhotoShop, tạo ra rất nhiều đường nét và hiệu ứng neon lạ mắt. Nó có thể là một hình nền máy tính, chứ không phải là một 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ế họ đi cùng theo nghĩa đen là một logo nhỏ của một vài vòng tròn màu chồng chéo và tên phần mềm bên dưới nó. Giống 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 đó, điểm tôi đang làm là - tôi nghĩ các lập trình viên rơi vào cái bẫy mắc lỗi tương tự tôi đã làm. Chúng ta có xu hướng nghĩ về UI 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 cần phải - thành thật mà nói, họ không nên như vậy. Chúng ta nên lấy tư duy của một lập trình viên và áp dụng nó vào thiết kế thẩm mỹ - đơn giản, chức năng, công trình.
Trong bài viết này, chúng tôi sẽ xem xét một số cách rất đơn giản để tạo UI / UX Android thanh lịch, ngay cả khi bạn gần như không có kinh nghiệm thiết kế.
Trừ khi bạn thực sự muốn một cái gì đó khác, hãy bám vào thiết kế vật liệu
Ứng dụng của bạn không cần phải là một ứng dụng duy nhất và khác biệt với các ứng dụng khác để cho nó trở nên phổ biến và đẹp mắt. Đó là những gì mà Thiết kế Vật liệu 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 tốt công việc. Có rất nhiều ứng dụng phổ biến hiện có gắn liền với Thiết kế Vật liệu - 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ỉ để đặt tên cho một số.
Trọng tâm cốt lõi của Thiết kế Vật liệu là bố cục dựa trên thẻ, với bảng màu vững chắc. Google đã làm việc với các nhà thiết kế công nghiệp hàng đầu, rút ra rất nhiều yếu tố từ thực tiễn thiết kế tối giản và sau đó phát hành toàn bộ miễn phí - đó 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ể chạy hàng trăm đô la cho sách điện tử, video, v.v.
Bắt đầu với Thiết kế Vật liệu cực kỳ 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, chúng tôi sẽ liệt kê dưới đây:
- Tài liệu chỉnh sửa chủ đề (macOS + Phác thảo)
- Chất liệu thiết kế bổ trợ Bảng màu (PhotoShop / Illustrator)
- Thiết kế vật liệu UI Kit PSD (PhotoShop)
- Bộ giao diện người dùng thiết kế vật liệu Android ( Phác thảo)
- Tài liệu giao diện người dùng vật liệu
Và nếu bạn cần một chút cảm hứng để tạo các chủ đề Thiết kế Vật liệu đơn giản, thanh lịch, hãy xem các danh sách blog này:
- MaterialDesignBlog - 15 ví dụ tuyệt vời về Thiết kế Vật liệu được thực hiện đúng
- MockPlus - 12 ví dụ trang web thiết kế vật liệu tốt nhất để lấy cảm hứng
- AndroidAuthority - 10 ứng dụng Thiết kế Vật liệu tốt nhất dành cho Android
Màu sắc dễ dàng hơn bạn nghĩ
Đối với một thay thế cho Thiết kế Vật liệu, gradient dolor rất đơ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 nhiều thời gian để vẽ tất cả các màu sắc, hoặc thiết kế gradient tối ưu. Bạn đã sai - có thể hoàn thành sau 10 giây trong PhotoShop.
Tôi thậm chí sẽ hướng dẫn bạn thực hiện điều 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 thiết bị di động ( 1080 x 1920 px @ 72 ppi hoạt động tốt)
Truy cập UIGradrons.com và tìm thứ bạn thích.
Sao chép màu gradient 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 Blending Options> Gradient Overlay.
Nhấp trực tiếp vào phầ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 các giá trị hex màu từ UIGradient vào trình chỉnh sửa độ dốc PS.
Điều chỉnh khi cần thiết. Bây giờ bạn có một nền gradient chuyên nghiệp cho ứng dụng Android của bạn.
Các công cụ gradient khác đáng để kiểm tra:
- WebGradrons.com
- Trình tạo hình dạng Android ( để tạo hình thông qua XML, với tùy chọn cho độ dốc)
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, logo, 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 các 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 giá trị lớn hơn, nó sẽ mất chất lượng và trở nên mờ / pixel. Một SVG thì không. Mọi người cố gắng sử dụng các tệp PNG khổng lồ sẽ được hạ thấp để phù hợp với màn hình Android - khi thay vào đó, bạn có thể sử dụng các 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ể nhỏ hơn tới 60% đến 80% kích thước tệp so với PNG . Điều này có nghĩa là ứng dụng hoặc trang web di động của bạn sẽ tải nhanh hơn cho người dùng và sẽ trông ổn dù màn hình có độ phân giải.
Bao gồm Chế độ tối bằ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 thực hiện 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 biến, ưa thích, hoàn toàn không có gì sai khi sử dụng mẫu hoặc bộ công cụ. Mẫu và bộ dụng cụ có thể được sử dụng như một hướng dẫn truyền cảm hứng, hoặc bạn có thể chỉ cần sử dụng mẫu / bộ theo nghĩa đen, thêm các nút và công cụ của riêng bạn.
Một số tài nguyên tuyệt vời cho các mẫu và bộ 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
- SketchAppSource - Tài nguyên ứng dụng giao diện người dùng Android ( Phác thảo)
- Phần mềm miễn phí - Bộ dụng cụ UI PSD ( PhotoShop)
