Hướng dẫn thiết kế giao diện người dùng dành cho người mới bắt đầu

Khi nghĩ về quá trình thiết kế giao diện người dùng, chúng ta thường nghĩ về một số màu sắc, kiểu dáng và bố cục phức tạp và khó thực hiện. Nhưng nếu nhìn vào các thiết kế được phát triển bởi các công ty lớn và những thay đổi mà chúng đã thực hiện qua thời gian. Chúng ta sẽ thấy rằng các thiết kế đơn giản hoạt động rất tốt.

Trong bài viết này, tôi sẽ hướng dẫn bạn qua những thay đổi được thực hiện trong một số ứng dụng được sử dụng nhiều nhất trên thế giới và từ đó rút ra được một số bài học để xây dựng giao diện người dùng tốt hơn.

Hãy xem một số thay đổi được thực hiện trong các ứng dụng này.

1*fmzQ7m0jU4w2LH41XZSQ3Q.jpeg


Thay đổi được thực hiện trong ứng dụng Things

Sau khi xem hình ảnh này, chúng ta có thể thấy rằng các màu gradient và hình dạng 3D càng trở nên đơn giản và phẳng hơn.

1*9f8Hf5X_hAIztUFrr0y0bQ.jpeg


Ứng dụng Facebook thay đổi theo thời gian.

Những điều tương tự cũng phù hợp với ứng dụng của Facebook. Họ đã xóa các màu gradient cổ điển và bắt đầu sử dụng các biểu tượng đơn giản.

1*u1jTV00Gyqt7PY5ppslceg.jpeg


Evernote thay đổi theo thời gian.

Hãy xem xét một số thiết kế web.

1*AJXVYG3u7XOB57er99vQLA.jpeg


Ảnh chụp từ lapa.ninja

1*BVjNXIUOdGxfsYxJnIUe8Q.jpeg


Ảnh chụp từ lapa.ninja

1*02kEoxy_ZJOisN0L3QOz8A.png

Những yếu tố chính trong những thiết kế này là gì?
  • Đơn giản và sử hạn chế sử dụng màu sắc
  • Khoảng cách xung quanh các thành phần
  • Sử dụng các góc tròn
  • Biểu tượng đơn giản
  • Căn chỉnh hợp lý
Hãy xem cách chúng ta có thể thiết kế một số thành phần:
  • Mẫu đăng nhập
Hãy bắt đầu với các kiểu mặc định của trình duyệt

1*5ZiXDx8bumFyaB3BnkULNg.png


Kiểu mặc định của trình duyệt

Bây giờ chúng ta hãy xếp chúng theo chiều dọc và đặt một khoảng trống vào giữa.


1*HZauWBGKf9hLkUZ7_mKYbg.png

Bây giờ thay đổi màu nền để làm cho biểu mẫu nổi bật hơn một chút.



1*SlZJ-N-nVjjqExBYBrIW2w.png

Nhưng nó không đẹp lắm.
Chúng ta hãy tinh chỉnh nó bằng cách tạo viền, bo tròn góc và thêm bóng (box-shadow) cho nó.

1*c-m-Te1tauQ1rEvASPosSw.png

Bây giờ thử thêm padding (khoảng trống nằm giữa nội dung và viền) cho các trường nhập và thay đổi đường viền một chút và bo tròn góc cho nó.

1*PSUwkse9ywzRhGq5qAw1Vw.png

Bây giờ nó trông đẹp và dễ chịu hơn nhưng nút Login không ấn tượng cho lắm.
Vậy nên, chúng ta hãy thêm màu cho nút này và đặt nó sang bên phải đồng thời xóa bỏ đường viền.

1*f_2fPLGHyZuqNMjoWXVScw.png

Chúng ta có thể thấy những thay đổi đơn giản này đã làm cho nó đẹp như thế nào.



1*IkLqsO6PD8MGmXpvlu_xoA.png


Chỉ cần thực hiện một số thay đổi nhỏ nhưng nó sẽ đem lại hiệu quả lớn cho thiết kế của bạn.

Nguồn: Nitesh Kumar Niranjan/Hình ảnh: uixNinja
 

Đính kèm

  • ui-desing.jpg
    ui-desing.jpg
    82.9 KB · Lượt xem: 0
  • Thẻ Thẻ
    tutorial ui design
  • DesignerVN là chuyên trang cung cấp thông tin dành cho cộng đồng Designer, nhà thiết kế Việt Nam. Thư viện font chữ, tài nguyên thiết kế đa dạng.
    Back
    Bên trên