50 mẹo giao diện người dùng để thiết kế ứng dụng Android và iOS đẹp mắt
MỤC LỤC
UI là gì?
UI có thể được mô tả đơn giản là sự tương tác giữa con người và giao diện.
Đối với ứng dụng, giao diện người dùng có thể là ứng dụng web, điện thoại thông minh, máy tính bảng, phablet vàcác thiết bị đeo được.
Các yếu tố hình ảnh mà người dùng tương tác là Nút, Hộp cuộn, Thanh trượt, Văn bản, v.v.
Bạn cần thiết kế giao diện để được tối ưu hóa cho từng thiết bị mà ứng dụng của bạn sẽ được sử dụng.
Bạn có biết rằng có 12.000 thiết bị thông minh được cài đặt hệ điều hành Android?
Mỗi màn hình có kích thước khác nhau… Màn hình nào có thể là dọc và ngang – Bạn thiết kế giao diện của mình như thế nào để đáp ứng để thiết kế giống nhau cho mọi kích thước?
Tôi tin rằng mọi sản phẩm nên được thiết kế theo cách mà nó sẽ được sử dụng 98%. ví dụ: Máy photocopy. Bạn có thể thực hiện hàng đống công việc với những chiếc máy này, nhưng tất cả 98% mọi người thực sự muốn làm là tạo một bản sao duy nhất. Đó là lý do tại sao việc tạo một bản sao dễ dàng như đặt giấy lên kính bằng cách nhấn vào một nút lớn màu xanh lá cây . Mọi ứng dụng phải được thiết kế như thế này. Đơn giản và Người dùng làm trung tâm. – Kỹ sư Zac Dickerson UX
Tại sao bạn cần một giao diện người dùng đẹp?
Thiết kế của giao diện sẽ tạo nên hoặc phá vỡ sự thành công của ứng dụng của bạn.
Đây là lý do tại sao rất nhiều thiết kế cho ứng dụng được gia công cho các nhà thiết kế UX / UI chuyên nghiệp.
Bạn cần biết cách biến các nút, màn hình và thanh trượt thành trải nghiệm thực tế.
Trải nghiệm người dùng (UX)là khả năng nắm bắt quá trình suy nghĩ tự nhiên của người dùng trong một thiết kế chức năng.
Giao diện người dùng chắc chắn là một trong những khía cạnh quan trọng nhất của UX. (Nhưng không phải là khía cạnh duy nhất)
Giao diện người dùng là kết hợp ‘tâm trí người dùng’ với tâm trí của thiết kế.
Nếu bạn nhồi nhét điều này, thì ứng dụng của bạn rất có thể sẽ nhanh chóng bị xóa.
Để đặt mọi thứ trong viễn cảnh trước khi chúng ta bắt đầu tiết lộ bí mật của mình, hãy nghĩ về điều này;
Phát triển ứng dụng Buzinga
Một người dùng iPhone biết cách sử dụng chức năng camera. Nó đã trở thành một hành động hoàn toàn trực quan mà họ có thể làm trong khi ngủ.
Chết tiệt, tất cả chúng ta đều biết rằng chúng ta có thể sử dụng nó sau một vài lần uống quá nhiều.
Khi ứng dụng máy ảnh được mở, người dùng iPhone mong đợi rằng hình ảnh họ đang cố chụp sẽ lấp đầy màn hình của họ. Như bạn có thể thấy trong hình trên.
Họ biết nhấn vào nút tròn màu trắng ở cuối màn hình để chụp ảnh.
Kích thước của nút được hoàn thiện vừa bằng ngón tay cái giúp thao tác dễ dàng và đơn giản.
Bất kỳ chức năng nào khác nằm ở góc dưới cùng hoặc trên đầu màn hình.
Bây giờ, vì hành động này đã trở nên quá trực quan đối với người dùng, tại sao bạn không tái tạo thiết kế này cho chức năng camera trong ứng dụng iPhone của riêng mình?
Facebook thực hiện điều này một cách hoàn hảo. Khi bạn chụp ảnh trên ứng dụng dành cho thiết bị di động, có vẻ như bạn đang ở trong ứng dụng máy ảnh.
Tại sao bạn muốn phát minh lại bánh xe?
Nếu nó dễ dàng, họ sẽ quay lại.
Được rồi, đến lúc bắt đầu. Tôi đã chia nhỏ các mẹo thành 7 loại. Nếu bạn nghĩ về điều gì nữa khi bạn đang đọc, hãy thêm chúng vào phần bình luận!
Thiết kế trước
1) Hãy chắc chắn rằng bạn bắt đầu sử dụng bút để giấy trước khi bạn nghĩ về thiết kế.
2) Đặt cùng một bảng tâm trạng về màu sắc, cảm hứng và cảm nhận.
3) Lập bản đồ khung dây và luồng màn hình. Bạn có thể tải xuống giấy nến wireframe chođiện thoại IphonevàAndroidthiết bị trực tuyến.
4) Cách dễ nhất để làm điều này là vẽ một sơ đồ hoàn chỉnh về ứng dụng của bạn, sau đó kết nối tất cả các màn hình và dấu chấm. Điều này sẽ cho bạn biết các tính năng chính về những gì ứng dụng của bạn phải làm.
“Giữ cho nó đơn giản, nhất quán và trao quyền cho người dùng” – Pete Flannery
5) Các công cụ nhưBiểu đồ Lucidgiúp bạn xây dựng các mô hình chức năng của ứng dụng trước khi đưa nó vào Photoshop để hoàn thiện giao diện.
Đây là những trang mà nhóm chúng tôi sử dụng để lấy cảm hứng:
Nguyên tắc thiết kế
6) Các nguyên tắc cơ bản của thiết kế ứng dụng cũng giống như các nguyên tắc thiết kế:
Cân bằng: Cân bằng là trọng lượng được phân bổ trong thiết kế theo vị trí của các phần tử của bạn. ví dụ; Một hình lớn gần trung tâm có thể được cân bằng bởi một hình nhỏ gần rìa.
Sự gần gũi : Sự gần gũi tạo ra mối quan hệ giữa các yếu tố. Chúng phải được kết nối trực quan theo một cách nào đó, không nhất thiết phải được đặt cùng nhau.
Căn chỉnh: Căn chỉnh các nút, hình ảnh và văn bản để cho người dùng thấy thông tin có liên quan như thế nào.
Lặp lại: Nó giúp tạo ra sự liên kết và nhất quán thông qua việc gắn kết các yếu tố hình ảnh lại với nhau. Đây có thể là các màu lặp lại hoặc một hình ảnh trong mỗi màn hình.
Độ tương phản: Độ tương phản là sự xếp chồng của các yếu tố đối lập (các màu đối lập trên bánh xe màu, hoặc giá trị sáng / tối, hoặc hướng – ngang / dọc). Sự tương phản cho phép chúng tôi nhấn mạnh hoặc làm nổi bật các yếu tố chính trong thiết kế của bạn.
Khoảng cách: Khoảng cách hoặc diện tích giữa, xung quanh, bên trên, bên dưới hoặc bên trong các phần tử. Không gian có thể là cả tích cực và tiêu cực.
Màn hình
7) Đừng ngại sử dụng toàn bộ màn hình.
8) Nhưng hãy sử dụng màn hình bất động sản một cách khôn ngoan.
9) Làm theoLuật rõ ràng.
10) Khoảng cách là bạn của bạn.
11) Mỗi màn hình cần có trải nghiệm, cảm nhận, chủ đề giống nhau
12) Bạn không bao giờ muốn người dùng cuộn, hình ảnh phải vừa với màn hình.
13) Tạo bố cục dễ đọc đặt các điều khiển gần với nội dung mà chúng sửa đổi.
14) Kích thước canvas iOS thay đổi từ 1024 × 768 (iPad) đến 640 × 960 (iPhone 4 và 4S) đến 320 × 480 (iPhone 3GS).
15) Hãy nhớ rằng không có bàn phím, màn hình nhỏ và rất ít nút bấm vật lý.
16) Khi thiết kế giao diện ứng dụng, đặc biệt cho màn hình cảm ứng, bạn cần xác định hệ thống phân cấp rõ ràng và hiểu các phần quan trọng của mỗi màn hình. Nếu một nút cụ thể được nhấn liên tục, hãy đặt nút đó gần phía dưới để ngón tay cái có thể chạm vào nút đó một cách tự nhiên hơn.
Kinh nghiệm người dùng
“Đặt mình vào vị trí của người dùng, cách trực quan nhất để điều hướng ứng dụng của bạn là gì? Trải nghiệm người dùng là chìa khóa để thiết kế các ứng dụng đẹp và thành công ”- Pasquale Skupin, Chuyên gia cao cấp về giao diện người dùng.
17) Thiết kế với chủ nghĩa hiện thực trong tâm trí, từ kết cấu, cảm giác, bóng đổ đến tính hiện thực của chức năng.
18) Bạn không bao giờ muốn phát minh lại bánh xe.
19) ví dụ; Nút gửi ở cùng vị trí với nút gửi trong chức năng nhắn tin văn bản.
20) Hoặc không sử dụng cử chỉ ‘véo’ cho bất kỳ điều gì ngoài thu phóng, thu gọn hoặc mở rộng, vì nó gần như chắc chắn sẽ khiến người dùng bối rối.
21) Người dùng sẽ bỏ qua bất kỳ biểu tượng / hành động nào mà họ không nhận ra.
22) Trình bày thông tin của bạn dưới dạng phân cấp.
23) Dẫn dắt người dùng của bạn xung quanh màn hình, điều này trao quyền cho người dùng của bạn mà họ không biết.
24) Luôn đảm bảo rằng người dùng có thể tìm thấy các tính năng quan trọng nhất trong một hoặc hai lần nhấp chuột.
25) Người dùng không bao giờ được tự hỏi phải làm gì tiếp theo, nhà thiết kế phải dựng màn hình để đảm bảo rằng người dùng không bao giờ phải suy nghĩ.
26) Người dùng sẽ luôn mong đợi nhìn thấy các thành phần giao diện trong ngữ cảnh của đối tượng mà họ muốn kiểm soát. Điều này tương ứng với cuộc sống thực: khi bạn muốn nướng một ít ngô, bạn hãy vào lò vi sóng và bật công tắc trên thiết bị.
27) Có một sự khác biệt lớn giữa việc mong đợi người dùng tự làm điều gì đó và yêu cầu họ làm điều đó một cách cụ thể. Bạn không bao giờ muốn người dùng hỏi biểu tượng thực hiện hành động gì, họ phải biết.
28) Bạn cần phải thông minh – nhưng không thông minh về việc khiến người dùng phải suy nghĩ. Thông minh để họ không bao giờ phải suy nghĩ.
29) Tạo các điều khiển đo ít nhất 44 điểm x 44 điểm để chúng có thể được gõ chính xác bằng ngón tay.
Bản văn
30) Theo phông chữhướng dẫn
31) Kích thước phông chữ khác nhau tùy thuộc vào cảm giác của ứng dụng.
32) Pasquale nói: “Tôi không bao giờ thực sự đi xuống dưới 24 hoặc 22pt khi nói đến phông chữ. Kích thước văn bản cho các ứng dụng lớn một cách đáng ngạc nhiên. Đừng để bị phát hiện. ”
33) Phông chữ tròn lớn đậm hơn có thể mang lại cảm giác thú vị trong khi phông chữ nhỏ hơn mỏng hơn mang lại cảm giác tinh tế và có xu hướng thanh lịch và nghiêm túc hơn một chút.
34) Tăng chiều cao dòng hoặc khoảng cách giữa các chữ cái để văn bản dễ đọc hơn.
Màu sắc
Nguồn: Kuler Color Wheel Cảnh sát Android
35) Biết bánh xe màu của bạn.
36) Màu tương phản – Nằm cạnh nhau trên bánh xe màu.
37) Các màu bổ sung – Đối diện nhau trên bánh xe màu.
38) ví dụ; Sử dụng văn bản tối trên nền sáng và văn bản sáng trên nền tối.
39) Đọc văn bản màu xanh trên nền trắng thì dễ, nhưng đọc văn bản màu xanh trên nền đỏ thì khó.
40) Vấn đề là không có đủ độ tương phản giữa xanh lam và đỏ để dễ đọc, trong khi có rất nhiều tương phản giữa xanh lam và trắng.
41) Đây là một công cụ tuyệt vời để tìm hiểu về các màu tương phản và bổ sung:Kuler
42) Màu sắc phổ biến vào tháng 2 năm 2015: Màu pastel, phổ biến nhất là Mint Green, với các sắc thái đen và trắng miễn phí (màu đặc trưng của Pasquale)
43) Một trong nhữngTáo nhiều quy ước thiết kế là có nguồn sáng 90 độ không đổi ở phía trên cùng của màn hình, chiếu xuống tất cả các thành phần giao diện.
44) Góc của ánh sáng này có nghĩa là các điểm sáng, độ dốc và bóng đổ trên các phần tử là thẳng lên hoặc thẳng xuống, không bao giờ nghiêng. Điều đó không có nghĩa là bóng đổ 45 độ không thể hoạt động, nhưng chúng có thể khiến ứng dụng của bạn cảm thấy lạc lõng bên cạnh những ứng dụng khác
Các yếu tố
45) Nếu bạn đang dốc toàn lực cho một giao diện người dùng đẹp, hãy luôn quảng cáo chiêu hàng ở thiết bị cấp cao nhất trước. Điều đó có nghĩa là thực sự tận dụng tối đa màn hình võng mạc với các kết cấu, chi tiết và sắc thái thiết kế bổ sung, sau đó thu nhỏ chúng theo yêu cầu để phục vụ cho các thiết bị cũ hơn
46) Luôn hiển thị hình ảnh ở tỷ lệ khung hình dự định để tránh biến dạng.
47) Cung cấp các phiên bản có độ phân giải cao (@ 2x) của tất cả nội dung hình ảnh. Các hình ảnh không phải là @ 2x sẽ bị mờ trên màn hình Retina.
48) Luôn giữ Constatine và Lockwoods Các nguyên tắc ‘Phần mềm để sử dụng’ được đặt lên hàng đầu.
Nguyên tắc cấu trúc: Thiết kế của bạn nên tổ chức giao diện người dùng có mục đích, theo những cách có ý nghĩa và hữu ích dựa trên các mô hình rõ ràng, nhất quán, rõ ràng và dễ nhận biết đối với người dùng, đặt những thứ liên quan lại với nhau và tách những thứ không liên quan, phân biệt những thứ khác nhau và làm cho những thứ tương tự giống nhau nữa. Nguyên tắc cấu trúc liên quan đến kiến trúc giao diện người dùng tổng thể của bạn.
Nguyên tắc đơn giản . Thiết kế của bạn phải làm cho các tác vụ đơn giản, phổ biến dễ thực hiện, giao tiếp rõ ràng và đơn giản bằng ngôn ngữ riêng của người dùng, đồng thời cung cấp các phím tắt tốt có ý nghĩa liên quan đến các quy trình dài hơn.
Nguyên tắc hiển thị: Thiết kế của bạn nên hiển thị tất cả các tùy chọn và vật liệu cần thiết cho một nhiệm vụ nhất định mà không làm người dùng phân tâm với thông tin thừa hoặc không liên quan. Thiết kế tốt không làm người dùng choáng ngợp với quá nhiều lựa chọn thay thế hoặc nhầm lẫn chúng với những thông tin không cần thiết.
Nguyên tắc phản hồi: Thiết kế của bạn phải thông báo cho người dùng về các hành động hoặc cách diễn giải, các thay đổi của trạng thái hoặc tình trạng cũng như các lỗi hoặc ngoại lệ có liên quan và được người dùng quan tâm thông qua ngôn ngữ rõ ràng, ngắn gọn và rõ ràng quen thuộc với người dùng.
Nguyên tắc khoan dung: Thiết kế của bạn phải linh hoạt và dễ chịu, giảm thiểu chi phí sai lầm và sử dụng sai bằng cách cho phép hoàn tác và làm lại, đồng thời ngăn ngừa lỗi bất cứ khi nào có thể bằng cách dung nạp các đầu vào và trình tự khác nhau và bằng cách giải thích tất cả các hành động hợp lý hợp lý.
Nguyên tắc tái sử dụng: Thiết kế của bạn nên sử dụng lại các thành phần và hành vi bên trong và bên ngoài, duy trì tính nhất quán với mục đích thay vì chỉ nhất quán tùy ý, do đó giảm nhu cầu người dùng phải suy nghĩ lại và ghi nhớ
49) Một cách hiệu quả để dịch ứng dụng trên các kích thước màn hình khác nhau là thiết kế tất cả các yếu tố đồ họa của bạn dưới dạng vectơ trong Illustrator, sau đó nhập chúng vào Photoshop.
50) Ở đó, bạn có thể tinh chỉnh chúng cho các kích thước và độ phân giải màn hình cụ thể, đơn giản hóa hoặc sửa đổi khi cần thiết.
Các ứng dụng được thiết kế tốt nhất hầu như không có giao diện người dùng – chỉ có nội dung hấp dẫn.
Tiếp tục sửa đổi thiết kế của bạn liên tục và đừng bao giờ tự mãn – hãy đặt câu hỏi về cách tiếp cận của bạn ở mọi giai đoạn có thể của quy trình.
“Hãy đặt mình đi đầu trong lĩnh vực thiết kế, đắm mình trong các xu hướng mới và sáng tạo” – Andre Skupin, Chuyên gia giao diện người dùng.
Nếu bạn không tiếp tục đặt câu hỏi về mọi thứ, bạn sẽ đưa ra một giải pháp hạn hẹp.
Bạn có thêm mẹo nào muốn chia sẻ không? Bình luận dưới đây!