Thiết kế ứng dụng là một bài tập đơn giản, là thiết kế lấy người dùng làm trung tâm. Điểm cộng sẽ là một giao diện đẹp có chức năng. Nó phải trực quan để di chuyển, nhanh chóng để tải, nhưng cũng phải độc đáo và đáng nhớ.
Nhờ vào cuộc cách mạng thiết kế phẳng, và sự phổ biến của thẩm mỹ hoàn hảo trong các ứng dụng của Apple và Google, nhiều ứng dụng có nguy cơ trở nên tương tự hay không có điểm nổi bật.
Ở một mức độ nào đó, đây là một điều tích cực, vì người dùng bản năng biết các chức năng của một số chức năng hoạt động như thế nào. Nhưng nó sẽ gây áp lực nhiều hơn cho các yếu tố hình ảnh như minh hoạ hoặc nhiếp ảnh để giúp xác định giao diện của ứng dụng.
Vậy thì làm thế nào để sử dụng hình ảnh hiệu quả trong thiết kế ứng dụng?
1. Tối ưu hóa hình ảnh cho màn hình HD
Màn hình độ phân giải cao là chuẩn hiện nay với hầu hết các điện thoại thông minh, tạo ra một thanh chất lượng cho những hình ảnh bạn chọn sử dụng - đặc biệt nếu bạn đang sử dụng photography. Đối với iPhone X, bạn đang làm việc với độ phân giải rất lớn 1125 x 2436 pixel.
Pixellation và fuzziness sẽ có thể trông không chuyên nghiệp, nhưng may mắn thay những điều này là dễ dàng để tránh nếu bạn sở hữu một số tài sản chất lượng. Luôn luôn nhớ thời gian tải, tuy nhiên - mọi người mong đợi mọi thứ sẽ được tải trong vài giây - vì vậy đừng lạm dụng nó. Tất nhiên, đôi khi không thể tránh khỏi rằng một số chức năng sẽ mất nhiều thời gian hơn. Đó là nơi bạn cần suy nghĩ sáng tạo hơn, để làm cho sự chờ đợi dễ chịu hơn cho người dùng - thanh kéo hoặc thanh tiến trình tốt hơn màn hình trống hoặc tĩnh. Một lựa chọn khác là một 'màn hình bộ xương' tải từng phần cho một thông tin.
2. Sử dụng hiệu quả animation
Ngay cả những gợi ý tinh tế nhất của animation có thể thêm nét duyên dáng và cá tính vào ứng dụng của bạn, cho dù đó đơn giản như chuyển đổi chức năng, hoặc một nhân vật nào đó hoặc câu chuyện có thể gây ngạc nhiên và làm hài lòng người dùng.
Từ quan điểm chức năng, animation có thể giúp mọi người hiểu được sự thay đổi của từng phần trong ứng dụng - điều gì đã kích hoạt nó, hiệu quả của nó và làm thế nào để bắt đầu nó một lần nữa nếu cần. Nó cũng có thể hướng sự chú ý của người dùng đến một điểm cụ thể của màn hình.
Một số animation có hình ảnh động có trong xây dựng các liên kết. Ví dụ, nếu một phần tử biến mất, hàm ý là nó đã được loại bỏ hoàn toàn. Một quá trình chuyển đổi theo đó nó trượt ra phía bên ngụ ý nó chỉ đơn giản là ẩn, và có thể được trở lại sau.
Loại thứ hai được biết đến như là 'hình ảnh vui tươi'. Điều này làm tăng thêm sự nồng ấm cho ứng dụng của bạn và làm cho nó cảm thấy nhiều tính người hơn. Nó có thể kết hợp bất cứ điều gì từ cách xử lý vui tươi của màn hình tải hoặc thanh tiến trình, hướng dẫn về các tính năng của ứng dụng.
3. Hướng mọi thứ trở về sự cơ bản
Một trong những quy tắc phổ quát nhất về thiết kế ứng dụng là cắt bớt sự lộn xộn. Bạn đang làm việc với một màn hình tương đối nhỏ, và nhiều nút, tùy chọn và chức năng hiện diện trên màn hình cùng một lúc, thì mọi thứ sẽ ít trực quan hơn.
Giữ các phần tử giao diện ở mức tối thiểu, và chỉ đưa ra cho người dùng những gì họ cần biết. Mọi người muốn thực hiện các tác vụ nhanh chóng và hiệu quả nhất có thể, lý tưởng là ở một vài nút, không cần cuộn qua màn hình bất tận hoặc nhập nhiều dữ liệu vào các hình thức phức tạp.
4. Giữ các yếu tố trong giao diện ổn định
Sự nhất quán cũng rất quan trọng, cả về hình ảnh và tính năng. Một cái nhìn và cảm giác đặc biệt, mạch lạc - ngay cả khi các phần tử xác định nó tương đối tinh tế - giúp người dùng cảm thấy quen thuộc và thoải mái trong ứng dụng và cuối cùng làm cho việc điều hướng trở nên dễ dàng hơn và trực quan hơn.
Từ quan điểm thị giác, điều này bao gồm các yếu tố cấu trúc như màu sắc, kiểu chữ, nút và nhãn. Nhưng cũng có thể sử dụng illustration hoặc nhiếp ảnh: phong cách được lựa chọn, vai trò của nó trong giao diện và tần xuất xuất hiện.
Sự nhất quán bên ngoài cũng quan trọng. Nếu có thể, một ứng dụng nên bổ sung cho giao diện, cảm nhận và tính năng của trang web thương hiệu - mặc dù được đơn giản hóa. Các đặc điểm này không chỉ giúp tránh nhầm lẫn, mà còn xây dựng sự công nhận thương hiệu.
5. Tạo hệ thống phân cấp với kích thước và màu sắc
Bên cạnh các trò chơi, phần lớn các ứng dụng trên điện thoại di động chủ yếu là các danh sách của một số hình thức - danh sách tùy chọn; chức năng; điều cần làm, xem hoặc chơi. Là nhà thiết kế ứng dụng, một phần trong vai trò của bạn là làm cho khung công việc đó thú vị hơn và dễ điều hướng hơn.
Ngay cả trong một giao diện đơn giản với đơn giản các yếu tố thiết kế tối thiểu, bạn cần thiết lập một hệ thống phân cấp mạnh mẽ để hướng người dùng hướng tới những thông tin quan trọng nhất và kêu gọi hành động rõ ràng nhất có thể.
Kích thước là một giải pháp: yếu tố lớn nhất trên trang nên, thông thường, cũng là điều quan trọng nhất. Nhưng màu sắc cũng có thể rất hiệu quả. Nếu được trình bày với một danh sách các lựa chọn trình đơn được phân loại từ màu đen sang màu xám nhạt, mọi người sẽ cho rằng màu tối hơn là quan trọng và hấp dẫn theo đó.
Cũng có những mối liên hệ nhất định - đặc biệt là màu đỏ và xanh lá cây. Một nút 'xác nhận' màu đỏ bên cạnh nút 'hủy' có màu xanh lá cây sẽ làm cho người dùng trông đợi và nhầm lẫn. Tuy nhiên, theo hướng dẫn về khả năng tiếp cận của W3C, màu sắc không bao giờ là dấu hiệu duy nhất: nhãn văn bản, hoặc các biểu tượng như dấu gạch chéo hoặc chữ thập, tất cả đều giúp thiết kế của bạn có thể truy cập được.
Nhờ vào cuộc cách mạng thiết kế phẳng, và sự phổ biến của thẩm mỹ hoàn hảo trong các ứng dụng của Apple và Google, nhiều ứng dụng có nguy cơ trở nên tương tự hay không có điểm nổi bật.
Ở một mức độ nào đó, đây là một điều tích cực, vì người dùng bản năng biết các chức năng của một số chức năng hoạt động như thế nào. Nhưng nó sẽ gây áp lực nhiều hơn cho các yếu tố hình ảnh như minh hoạ hoặc nhiếp ảnh để giúp xác định giao diện của ứng dụng.
Vậy thì làm thế nào để sử dụng hình ảnh hiệu quả trong thiết kế ứng dụng?
1. Tối ưu hóa hình ảnh cho màn hình HD
Pixellation và fuzziness sẽ có thể trông không chuyên nghiệp, nhưng may mắn thay những điều này là dễ dàng để tránh nếu bạn sở hữu một số tài sản chất lượng. Luôn luôn nhớ thời gian tải, tuy nhiên - mọi người mong đợi mọi thứ sẽ được tải trong vài giây - vì vậy đừng lạm dụng nó. Tất nhiên, đôi khi không thể tránh khỏi rằng một số chức năng sẽ mất nhiều thời gian hơn. Đó là nơi bạn cần suy nghĩ sáng tạo hơn, để làm cho sự chờ đợi dễ chịu hơn cho người dùng - thanh kéo hoặc thanh tiến trình tốt hơn màn hình trống hoặc tĩnh. Một lựa chọn khác là một 'màn hình bộ xương' tải từng phần cho một thông tin.
2. Sử dụng hiệu quả animation
Từ quan điểm chức năng, animation có thể giúp mọi người hiểu được sự thay đổi của từng phần trong ứng dụng - điều gì đã kích hoạt nó, hiệu quả của nó và làm thế nào để bắt đầu nó một lần nữa nếu cần. Nó cũng có thể hướng sự chú ý của người dùng đến một điểm cụ thể của màn hình.
Một số animation có hình ảnh động có trong xây dựng các liên kết. Ví dụ, nếu một phần tử biến mất, hàm ý là nó đã được loại bỏ hoàn toàn. Một quá trình chuyển đổi theo đó nó trượt ra phía bên ngụ ý nó chỉ đơn giản là ẩn, và có thể được trở lại sau.
Loại thứ hai được biết đến như là 'hình ảnh vui tươi'. Điều này làm tăng thêm sự nồng ấm cho ứng dụng của bạn và làm cho nó cảm thấy nhiều tính người hơn. Nó có thể kết hợp bất cứ điều gì từ cách xử lý vui tươi của màn hình tải hoặc thanh tiến trình, hướng dẫn về các tính năng của ứng dụng.
3. Hướng mọi thứ trở về sự cơ bản
Giữ các phần tử giao diện ở mức tối thiểu, và chỉ đưa ra cho người dùng những gì họ cần biết. Mọi người muốn thực hiện các tác vụ nhanh chóng và hiệu quả nhất có thể, lý tưởng là ở một vài nút, không cần cuộn qua màn hình bất tận hoặc nhập nhiều dữ liệu vào các hình thức phức tạp.
4. Giữ các yếu tố trong giao diện ổn định
Từ quan điểm thị giác, điều này bao gồm các yếu tố cấu trúc như màu sắc, kiểu chữ, nút và nhãn. Nhưng cũng có thể sử dụng illustration hoặc nhiếp ảnh: phong cách được lựa chọn, vai trò của nó trong giao diện và tần xuất xuất hiện.
Sự nhất quán bên ngoài cũng quan trọng. Nếu có thể, một ứng dụng nên bổ sung cho giao diện, cảm nhận và tính năng của trang web thương hiệu - mặc dù được đơn giản hóa. Các đặc điểm này không chỉ giúp tránh nhầm lẫn, mà còn xây dựng sự công nhận thương hiệu.
5. Tạo hệ thống phân cấp với kích thước và màu sắc
Ngay cả trong một giao diện đơn giản với đơn giản các yếu tố thiết kế tối thiểu, bạn cần thiết lập một hệ thống phân cấp mạnh mẽ để hướng người dùng hướng tới những thông tin quan trọng nhất và kêu gọi hành động rõ ràng nhất có thể.
Kích thước là một giải pháp: yếu tố lớn nhất trên trang nên, thông thường, cũng là điều quan trọng nhất. Nhưng màu sắc cũng có thể rất hiệu quả. Nếu được trình bày với một danh sách các lựa chọn trình đơn được phân loại từ màu đen sang màu xám nhạt, mọi người sẽ cho rằng màu tối hơn là quan trọng và hấp dẫn theo đó.
Cũng có những mối liên hệ nhất định - đặc biệt là màu đỏ và xanh lá cây. Một nút 'xác nhận' màu đỏ bên cạnh nút 'hủy' có màu xanh lá cây sẽ làm cho người dùng trông đợi và nhầm lẫn. Tuy nhiên, theo hướng dẫn về khả năng tiếp cận của W3C, màu sắc không bao giờ là dấu hiệu duy nhất: nhãn văn bản, hoặc các biểu tượng như dấu gạch chéo hoặc chữ thập, tất cả đều giúp thiết kế của bạn có thể truy cập được.
