Các nguyên tắc thiết kế ứng dụng di động

Tại sao bạn cần biết Các nguyên tắc thiết kế ứng dụng di động?

Khi thiết kế một sản phẩm mới, một trang web hay một ứng dụng bạn thường hay hỏi những người xung quanh hoặc Sếp của bạn về sản phẩm của mình và đôi khi câu trả lời thường kiểu: “Tôi luôn luôn cảm thấy rằng trang không nhìn tốt, nhưng tôi không thể nói là tại sao?”, “Tôi không hiểu được thiết kế, nhưng tôi chỉ cảm thấy có cái gì đó nghịch mắt” Và bạn phải lắng nghe những lời quen thuộc kiểu “Bạn có nghĩ rằng thẩm mỹ của bạn đang có vấn đề?” hay “Liệu mắt cậu có vấn đề không?” Khi bắt đầu làm một sản phẩm thì bản thiết kế thường là sự khởi đầu của một cuộc xung đột. Nếu không tìm ra hướng giải quyết cho các vấn đề trong thiết kế thì sẽ có rất nhiều người dùng sẽ có cùng cảm giác với những người có câu trả lời ở trên. Bạn sẽ có một bản thiết kế thất bại, một sản phẩm thất bại!

Các nguyên tắc thiết kế ứng dụng di động “Siêu thực tế”! 

Trong thực tế, các thiết kế khác nhau sẽ có những kỹ thuật khác nhau, thẩm mỹ khác nhau để thể hiện cái riêng của từng thiết kế đó cũng là cái để nhà thiết kế có thể thuyết phục người khác. Khi nhà thiết kế bắt đầu thiết kế một sản phẩm nguyên mẫu, nếu chỉ đơn giản phù hợp với các nguyên mẫu mà không quan tâm đến bất kỳ quy tắc thì sẽ tạo ra các kết quả thiếu sự phối hợp. Sau khi thiết kế các sản phẩm không hài lòng mọi người thì chính ban thân anh ta cũng sẽ cảm thấy không hài lòng, bạn cứ thử bị ai đó nhận xét không tốt về mình xem!

Trong thực tế, có rất nhiều nguyên tắc bố trí thiết kế giao diện người dùng, nếu các sản phẩm thiết kế được thiết kế với một sự hiểu biết nhất định để tạo ra một nguyên mẫu (prototyle) và đưa chúng ra phân tích thì lúc đó bạn mới có thể hiểu các bản thiết kế này hơn.

Tôi tổng kết một số nguyên tắc thiết kế bố trí phổ biến sau đây, đó là một điều kiện tiên quyết khi làm việc để tạo ra một hiệu ứng hình ảnh tốt.

1. Nguyên tắc sắp xếp các thông tin

Bất kỳ thông tin được sắp xếp phải thẳng hàng với đối tượng đầu / lặp lại / gần gũi / xuyên suốt trong các nguyên tắc thiết kế.

Dựa trên nguyên tắc trái sang phải dưới giống như thói quen đọc sách, nội dung của việc bố trí giao diện cuối cùng thường là để căn chỉnh lại trọng tâm.

Trong quá trình thiết kế phải luôn giữ ý thức về tỷ lệ, cho phép người dùng tìm thấy trọng tâm, giúp người sử dụng dễ dàng nhận thấy những thông báo quan trọng mà chúng ta muốn truyền tải. Sự lặp lại và độ tương phản là sự kết hợp của các box, nên thiết kế các yếu tố hình ảnh lặp đi lặp lại để tăng độ rõ nét và sự gắn kết, giảm bớt khó khăn về nhận thức của người dùng. Sau đó, bạn phải sử dụng phương pháp so sánh, chẳng hạn như kích thước hình ảnh khác nhau, màu sắc khác nhau để nhấn mạnh, cho phép trực giác của người dùng có thể cảm nhận được thông tin nào quan trọng nhất.

Với các thông tin phức tạp, nếu không thường xuyên sắp xếp nó sẽ làm giảm khả năng đọc văn bản. Tổ chức thông tin theo các nguyên tắc quan hệ, gần gũi với các thông tin khác có liên quan, nhóm chúng lại với nhau. Nếu nhiều mục tồn tại gần nhau có quan hệ chặt chẽ nó sẽ trở thành một nhóm trực quan, chứ không phải là các yếu tố bị cô lập, đơn lẻ. Điều này sẽ giúp làm giảm sự nhầm lẫn và cung cấp cho người đọc một cấu trúc rõ ràng. Nói tóm lại những nội dung nào có tính chất giống nhau thì bạn cần nhóm vào một nhóm (group) tạo các mối quan hệ và sự liên quan giữa chúng, ví dụ như trong ảnh, phần SETTINGS sẽ gồm 1 nhóm các thiết lập, Phần ABOUT HEADSPACE là nhóm giới thiệu, vv…

Trong thiết kế biểu đồ, chúng ta phải xem xét các nội dung ở mức độ dễ đọc. Việc sử dụng các hình ảnh đồ hoạ sẽ hiệu quả hơn so với văn bản thông thường. Cách sử dụng hình ảnh hiển thị mô tả chi tiết sẽ giúp nội dung trở nên rõ ràng và xúc tích. Đồ họa trực quan có thể giải thích được các giá trị / Tiêu đề / nội dung ngắn một cách nhẹ nhàng hơn.

2. Nguyên tắc sử dụng hình ảnh

Sau khi cấu trúc trang và phần văn bản xong thì sẽ bắt đầu sắp xếp các biểu tượng / nút / hình ảnh. Lần này từ một trang văn bản đơn giản sẽ được “đọc” theo cấu trúc đã được điều chỉnh để “xem” giúp tăng khả năng đọc của trang và tạo tác động rất lớn đến hiệu quả tổng thể của trang.

Việc sử dụng hình ảnh cũng cần phải được thử nghiệm để mang lại cảm xúc khác nhau cho từng đối tượng người dùng từ những đối tượng như “chuyên gia”, “dân thường” và “thân thiện” qua đó đánh giá được mức độ sử dụng cho từng thành phần, loại hình hình ảnh cho từng trang ứng dụng hay là xuyên suốt cả ứng dụng của bạn.

Trong các trang nội dung ít nhưng muốn cải thiện cách bố trí bạn có thể sử dụng một số màu sắc, hoặc mô phỏng trừu tượng của đối tượng thực tế, chẳng hạn như tác dụng của vé xem phim, sách, giấy, phiếu giảm giá, ghi chú, vv, để làm cho giao diện thân thiện hơn và giảm cảm giác trống rỗng. Bằng cách này bạn có thể thay đổi trang bằng cách hiển thị kinh nghiệm thị giác, nhưng phương pháp này sẽ thay đổi tông màu trang / kết cấu và có thể thay đổi cách “đọc” nội dung theo tỷ lệ, đây là điều cần phải chú ý.

3. Nguyên tắc sử dụng màu sắc

Màu sắc khác nhau có thể mang đến cho người dùng những cảm xúc khác nhau, bạn nên ý thức được điều này. Trong giao diện ứng dụng di động thường cần phải chọn màu sắc chính, màu sắc tiêu chuẩn rõ ràng. Giữa điện thoại di động và web là hơi khác nhau, mặc dù màu sắc chính xác định phong cách màn hình màu nhưng không thể được sử dụng cho một vùng rộng lớn. Thông thường trong thanh điều hướng / phần button / icon / landing page và những nơi khác, thiết lập hiệu ứng âm thanh, màu sắc chính thống cho phép người sử dụng tìm thấy ở thương hiệu một cảm giác quen thuộc, chẳng hạn như: đỏ Youtube / xanh Twitter / xanh Facebook / cam Google plus vv

  • Đầu tiên là ta có thể sử dụng một nhóm màu chính, nhóm màu này có thể có nhiều hơn một màu nằm rải rác, thường bao gồm hai phần ba dải màu sắc, phương pháp thường được sử dụng như chuyển màu mềm tự nhiên.

  • Thứ hai là sử dụng cùng một nhóm màu với màu sắc chính (màu sắc tương tự nhưng có độ bão hòa khác nhau), phương pháp này giúp người sử dụng một trải nghiệm nhất quán.

  • Thứ ba là sử dụng màu sắc tươi sáng, màu sắc chính với một màu sắc tương đối tươi sáng nhưng nhẹ hơn, Sử dụng màu trắng để nhấn mạnh các đối tượng ưu tiên.

  • Thứ tư là sử dụng các màu trung tính với một số tông màu trung tính tạo một sự can thiệp nhẹ. Đây là phương pháp phổ biến nhất trong thiết kế ứng dụng di động.

Ngoài ra còn một số phương pháp khác ở đây như Gradient, Brightness adjust contrast, Multicolor

Phần 2:

4. Nghệ thuật khoảng trắng
5. Sử dụng linh hoạt tâm lý thị giác
6. Không kiểu dáng thiết kế

Các nguyên tắc thiết kế ứng dụng di động
5 (100%) 17 votes

Các nguyên tắc thiết kế ứng dụng di động

1 phản hồi

Gửi phản hồi