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

Khi nghĩ đến việc thiết kế giao diện người dùng (UI design), chúng ta thường nghĩ về một số màu sắc, kiểu dáng, bố cục độc đáo và có vẻ như rất khó để làm những điều đó. Nhưng nếu chúng ta nhìn vào các thiết kế có vẻ hấp dẫn và đang được phát triển bởi các công ty lớn kèm theo những thay đổi sau mỗi bản nâng cấp. 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à cách những thay đổi đó có thể dạy chúng tôi 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 cách những gradient và hình dạng 3D này trở nên đơn giản hơn với ít màu sắc và biểu tượng đã dần được tối giản hơn.

1*9f8Hf5X_hAIztUFrr0y0bQ.jpeg


Ứng dụng Facebook 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 gradient và bắt đầu sử dụng các biểu tượng đơn giản.

1*u1jTV00Gyqt7PY5ppslceg.jpeg


Ứng dụng Evernote theo thời gian.

Hãy xem qua 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

Vì vậy, chìa khóa bí mật từ những thiết kế này là gì?
  • Đơn giản và hài hòa
  • Sử dụng khoảng cách xung quanh các phần tử
  • 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

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 tách ra.


1*SlZJ-N-nVjjqExBYBrIW2w.png

Nhưng nó không đẹp lắm.
chúng ta hãy tinh chỉnh nó và đặt một số góc tròn với viền và một chút box-shadow (tạo bóng cho hộp).

1*c-m-Te1tauQ1rEvASPosSw.png

Hãy đặt một số đệm bên trong các trường nhập và thay đổi đường viền một chút và đặt một số góc tròn.


1*PSUwkse9ywzRhGq5qAw1Vw.png

Bây giờ nó trông đẹp và dễ chịu nhưng nút "Login" chưa ổn.
Vì vậy, chúng ta hãy tỉnh chỉnh nó bằng cách thêm màu và tăng khoảng cách padding và bo viền cho nó và đặt nó sang bên phải.


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

Từ phong cách mặc định của trình duyệt đến một thiết kế mới.​
Nguồn: Medium
Biên dịch: Designer Việt Nam
Hình ảnh thumbnail: uixNinja
 

Đính kèm

  • ui-ux-design-tutorial.jpg
    ui-ux-design-tutorial.jpg
    139.9 KB · Lượt xem: 0
  • Thẻ
    giao diện thiết kế ui design
  • Bình luận mới

    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