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

Ở phần trước chúng ta đã tìm hiểu 3 nguyên tắc: “Nguyên tắc sắp xếp các thông tin”, “Nguyên tắc sử dụng các hình ảnh” và “Nguyên tắc sử dụng màu sắc”, đó là 3 trong tổng số 6 nguyên tắc thiết kế ứng dụng di động Mobile Apps. Phần 2 chúng ta sẽ nói về 3 nội dung tiếp theo, đó là: “Nghệ thuật khoảng trống”, “Sử dụng linh hoạt tâm lý thị giác” và cuối cùng là Thiết kế không theo bất kỳ kiểu dáng nào. Để bắt đầu phần tiếp theo, một lần nữa chúng tôi xin nhắc lại với các bạn: Mọi thiết kế, kể cả in ấn, website hay ứng dụng di động Mobile Apps đều cần phải tuân thủ những nguyên tắc cơ bản trong thiết kế, ngoài ra cần tuân thủ những nguyên tắc riêng, đặc trưng của từng loại hình thiết kế khác nhau, tất cả những nguyên tắc này đều nhằm một mục đích chung đó là tránh tạo ra những bản thiết kế thất bại, kém hiệu quả và không đặt được yêu cầu.

Điểm qua các nội dung Phần 1:

  1. Nguyên tắc sắp xếp các thông tin
  2. Nguyên tắc sử dụng các hình ảnh
  3. Nguyên tắc sử dụng màu sắc

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

4. Nghệ thuật khoảng trắng

Không chỉ văn bản và hình ảnh cần phải thiết kế, bố trí trang trắng cũng được coi là một yếu tố cần thiết. Tất cả các màu trắng là “Khoảng trống có mục đích” với một mục đích rõ ràng là để kiểm soát các cấu trúc của trang.

  • Đầu tiên là phải bố trí không gian của các trang, đặc biệt là trang chủ và các trang chính một không gian dễ chịu, nhẹ nhàng, tránh mang lại những áp lực căng thẳng cho mắt của người dùng, đây là nguyên tắc cơ bản và xuyên suốt trong quá trình thiết kế. Các bạn biết là các thiết bị di động rất chật hẹp về không gian hiển thị, kể cả đối với các dòng máy tính bảng, việc bạn bố trí quá nhiều thông tin trên trang chủ, trang đăng nhập, các trang chuyên mục, … sẽ gây ra áp lực rất lớn cho người dùng trong việc tìm kiếm và định hướng nội dung.

  • Thứ hai là sử dụng khoảng trống để tạo khoảng cách phân biệt các yếu tố/đối tượng tồn tại, làm suy yếu các rào cản giữa các đối tượng với nhau.

Vd: Giữa bảng cá nhân và thông tin cá nhân, giữa các nút và các nút được liên kết với nhau nhưng cần phải phân biệt giữa các đối tượng bằng một khoảng trống giúp dễ dàng tạo ra một sự phân biệt giữa dạng hình ảnh và các đoạn text, nó còn tạo cho người dùng một cảm giác sạch sẽ, gọn gàng.

  • Thứ ba sử dụng khoảng trắng lớn với mục đích tạo sự tập trung. “Thiết kế bao gồm việc điều khiển sự khác biệt”.

Lặp đi lặp lại cùng một công việc đã dạy tôi rằng điều quan trọng là hạn chế những sự khác biệt, chỉ giữ lại những thứ quan trọng nhất, hạn chế sự khác biệt giữa các nội dung là cách tạo sự nổi bật tốt nhất một cách đơn giản và tự nhiên các yếu tố của trang cũng như làm giảm màu sắc lộn xộn, vì vậy người dùng có thể nhanh chóng tập trung vào bản thân sản phẩm, phương pháp này được sử dụng rất nhiều trong các ứng dụng bán hàng online.

  • Thứ tư là khoảng trống giúp tạo ra những thay đổi khác nhau. Thiết kế layout có một cảm giác nhịp điệu, đó là những gì tôi muốn nhấn mạnh.

Mở các tạp chí truyền thống, trên mỗi trang sẽ có một trải nghiệm thị giác khác nhau, bạn cũng có thể tạo ra một bầu không khí thị giác khác nhau thông qua khoảng trống để thay đổi bố cục cùng với những nguyên tắc khác giúp tạo ra những kết quả khác nhau.

Cũng cần lưu ý rằng, không nhất thiết phải sử dụng màn hình trắng để thiết kế nội dung, nhưng nếu sử dụng sẽ giúp bạn tận dụng được sự tự nhiên của không gian và khoảng cách tạo ra một cảm giác thoải mái.

5. Việc sử dụng linh hoạt của tâm lý thị giác

Hai hình vuông có chiều rộng bằng nhau, một hình vuông có hình hình tròn ở giữa tạo cho ta cảm giác nó rộng lớn hơn. Việc sử dụng rộng rãi các phương pháp khoa học sẽ hướng dẫn trực quan thị giác cho người dùng.

Cách đầu tiên và phổ biến nhất là sử dụng các tỷ lệ vàng, văn bản và dòng khoảng cách, tỉ lệ của hình ảnh

Việc bố trí giao diện hình tròn và vòng tròn tạo cảm giác nuốt trọn nội dung hơn là hình được bo tròn các góc

Hình bo tròn các góc thường được sử dụng để hiển thị toàn diện hơn, chẳng hạn như hình ảnh của người dùng, bìa album, ảnh nghệ thuật, trưng bày hàng hóa và những nơi khác. Góc tròn có kết quả tốt hơn trong danh mục cá nhân hoặc avatar, banner,…

Trong cách bố trí toàn trang cũng nên tránh sự đơn điệu và tăng cảm giác nhịp điệu.

Như tôi đã đề cập ở trên bố trí có một ý nghĩa về tỷ lệ, do đó trong quá trình cho phép người sử dụng xem không cảm thấy tẻ nhạt, nhàm chán.

Hình ảnh cũng có màu sắc khác nhau thông qua các phương pháp mặt nạ có thể kiểm soát các giai điệu.

Nếu bạn chọn màu sáng hơn có thể làm giảm áp lực lên người dùng hơn là chọn màu tối, nó có thể làm cho toàn bộ hình ảnh nhẹ nhàng hơn, nội dung hiển thị rõ ràng hơn.

6. Thiết kế không theo kiểu dáng nào

Đây không phải là nguyên tắc thiết kế bố trí cuối cùng, thiết kế giống như một trạng thái của tâm hồn vậy.

Mội người thiết kế có những cảm nhận khác nhau, có suy nghĩ khác nhau, họ có kiến thức và nền tảng xã hội của từng môi trường sống khác nhau cho nên mọi nguyên tắc dẫn tới những triết ký thiết kế cũng khác và người dùng cũng vậy. Do đó các nhà thiết kế không nên bó hẹp mình bằng những cách thức khác nhau của người thiết kế khác, tự xây dựng cho mình một phong cách, tìm kiếm sự hoà hợp với những đối tượng người dùng mà bạn nhắm tới, đôi khi cần cả sự tiên phong bới không có xu hướng nào là mãi mãi, nó luôn thay đổi và phát triển.

Đây không phải là tất cả, đây không phải là mãi mãi, mọi nguyên tắc, mọi xu hướng đều thay đổi và cập nhật hàng ngày, hàng năm và cũng chẳng có cái gì gọi là thiết kế hoàn hảo, chỉ cố gắng để những thiết kế trở nên tốt hơn. Hy vọng với những chia sẻ trên sẽ giúp các bạn thiết kế tiết kiệm được thời gian nghiên cứu và định hướng thiết kế của mình. Mọi chia sẻ xin để lại bình luận bên dưới, hãy giúp chúng tôi hoàn thiện hơn!

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

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

7 Bình luận

  • tuyet
    Reply

    Thanks ad về bài viết hữu ích này , mình muốn xin hỏi thêm về 1 số nguyên tắc như font chữ, khoảng trắng ….bla…bla thường thì thiết kế app mình nên để tỷ lệ pixel ntn là hợp lý…
    Thanks ad nhiều 🙂

    • Quannd
      Reply

      Về Font size và khoảng trắng thì còn tuỳ thuộc vào bạn sử dụng loại font gì? và bạn thiết kế cho các đối tượng cụ thể nào, trên iOS, Android, Mobile hay Tablet, nếu tất cả các thiết bị thì đòi hỏi sự bố trí riêng hoặc cần phải kết hợp với kỹ thuật (coder) để tuỳ chỉnh cho các thiết bị khác nhau. Bạn nên cài ứng dụng Adobe Preview hay Ps Play để view file khi thiết kế trên các thiết bị từ đó có các điều chỉnh phù hợp.

  • Quannd
    Reply

    Hãy cùng chúng tôi chia sẻ kiến thức kinh nghiệm để cùng xây dựng cộng đồng thiết kế web, app Việt Nam lón mạnh!

Gửi phản hồi