I update my dribbble more frequently. Please go there to see more.

Bạn đang  đọc các blog của mình.  English version is on Medium
  • grid-interface
  • bullet-list

Designing.

July 26, 2021 - 11 phút đọc

20 Nguyên tắc Thiết kế đồ họa cơ bản khi áp dụng vào UI Design

Để thực sự làm trọn vẹn Product – UX/UI Design đòi hỏi bạn tiếp thu và áp dụng rất đa dạng kiến thức chuyên nghành (Domain Knowledge) từ Business, Human Psychology, Usability Pattern, Technology tới cả những kỹ năng mềm để khai thác và phân tích thông tin.

Hẳn sẽ rất choáng ngợp đối với những bạn mới bắt đầu ở lĩnh vực này vì quá nhiều thứ phải học, rồi đến khi học xong lại không biết phải áp dụng vào công việc hàng ngày như thế nào.

Lời khuyên của mình là hãy bắt đầu từ những cái cơ bản nhất, làm đi làm lại cho đến khi nào không còn là kiến thức phải nhớ lại mỗi khi cần, mà trở thành một loại thông tin giống như “trí nhớ cơ bắp”. Biến nó trở thành một điều hiển nhiện mỗi khi bắt tay thực hiện thiết kế nào đó.

Bây giờ bắt đầu với UI Design, hãy ngồi ôn lại 20 nguyên tắc thiết kế cơ bản và cách mà mình áp dụng chúng vào những thiết kế của mình.

Đọc thêm nếu bạn quan tâm về các Domain Knowledge khác:


1. Line & Stroke

Nếu vật chất được tạo bởi đơn vị nhỏ nhất là phân tử, thì những hình ảnh chúng ta đang nhìn thấy được tạo bởi các điểm. Có 2 điểm nối lại ta sẽ được 1 đường, các loại đường thẳng, cong, góc cạnh kết hợp lại với nhau sẽ tạo ra được những yếu tố mà thiết kế sử dụng.

Các kiểu đường nét khác nhau sẽ thể hiện ra những loại cảm xúc khác nhau, đọc thêm ở đây nhưng nhìn chung, đường nét sẽ có 3 chức năng chính:

  • Giúp điều hướng mắt người xem
  • Tạo ra sự nhấn nhá, tiêu điểm
  • Mang lại cảm giác chuyển động cho thiết kế tĩnh

Trong thiết kế trang chủ cho InteractiveLabs, mình đã sử dụng nét chéo ngay giữa màn hình để giúp cho phần họa tiết logo thêm nổi bật, đồng thời tăng thêm tính dynamic của cả phần header trang web.

Xem thiết kế


2. Scale & Size

Thiết kế tốt là thiết kế có tỷ lệ phù hợp với cách con người nhìn sự vật.

Có thể định nghĩa đơn giản tỷ lệ là việc xác định kích thước các yếu tố trong thiết kế 1 cách có chủ đích.

Việc xác định này sẽ giúp:

  • Thu hút sự chú ý tới các yếu tố đã xác định
  • Tạo ra sự nhấn mạnh, kịch tính cho thiết kế

Với thiết kế trang thông tin của các hành tinh trong hệ mặt trời, người xem sẽ nhanh chóng bị thu hút bởi cụm chữ Jupiter và quả cầu ngay giữa màn hình. Kích thước của quả cầu này nổi trội hơn hẳn các yếu tố còn lại khiến cho thiết kế trở nên ấn tượng hơn.

Xem thiết kế


3. Color Scheme

Không cần phải nhắc lại tầm quan trọng của màu sắc, có thể ví nó như nước có thể đẩy thuyền cũng có thể làm lật thuyền.

Vì thế hãy cẩn thận chọn lựa và tạo ra một bảng màu tốt nhất có thể, đừng quên sử dụng các nguyên lý màu sắc và những màu ý nghĩa trong máy tính như:

  • Xanh lá, thành công
  • Xanh dương, đang xử lý
  • Vàng, cảnh báo
  • Đỏ, đã có lỗi

Trong ví dụ minh họa, mình đã chọn những màu đủ khác để phân biệt các loại thông tin, mà vẫn hài hòa khi xếp chung với nhau. Các thiết kế còn lại giữ sắc độ trung tính giúp người xem có thể scan nhanh thông tin của Pie chart.

Xem thiết kế


4. Repetition

Lợi ích lớn nhất của sự lặp lại đó là thể hiện được yếu tố thương hiệu một cách nhấn quán và ghi nhớ vào tâm trí người xem thiết kế.

Ngoài ra, lặp lại được sử dụng khéo léo cũng sẽ giúp kết nối những thành phần riêng lẻ lại mà không cần nhiều các linking-elements (yếu tố liên kết) có thể khiến cho thiết kế trở nên rườm rà.

Ở thiết kế này, mình đã cố tình lặp lại rất nhiều các hình tròn nhỏ màu đỏ, vàng, xanh để tạo ra sự nhất quán với phong cách minh họa ở phần đầu. Hãy bấm vào link bên dưới để xem thêm ý đồ chuyển động giúp điều hướng mắt người xem khi họ scroll xuống trang web.

Xem thiết kế


5. Negative Space

Không gian âm là khu vực, khoảng cách giữa các phần tử thiết kế và nhờ những phần tử này mà đôi khi không gian này cũng có hình dạng và mục đích của riêng nó.

Không gian âm thường được sử dụng nhiều bởi các Logo Designer, những người rất giỏi trong việc sử dụng phương pháp sáng tạo ẩn dụ và hoán dụ (6 phương pháp tạo ra ý tưởng).

Trong UI Design, ta dùng không gian ẩn để tạo ra các khoảng thở cho mắt và tạo được ấn tượng cho chủ thể.

Lại là con chym huyền thoại (như các bạn hay nói) của Enginethmes, 1 team thiết kế và lập trình các web ứng dụng nền tảng WordPress. Đây là một trong những thiết kế thời đầu tâm đắc nhất của mình. Mình dùng shape logo con chim ruồi để thể hiện sự kết hợp giữa thiết kế và lập trình, và để lại rất nhiều khoảng trống xung quanh nó để gây ấn tượng.

Xem thiết kế


6. Symmetry

Mắt người cảm thấy dễ chịu và bị thu hút bởi các cấu trúc đối xứng. Sự đối xứng càng hoàn hảo, chúng ta lại càng thấy đẹp.

Chính vì thế, bố cục đối xứng thường là lựa chọn an toàn, tuy nhiên đôi khi mặt trái của nó lại khiến cho thiết kế của bạn trở nên nhàm chán.

Màn hình home của ứng dụng Savy (ứng dụng để mở sổ tiết kiệm theo mục tiêu của ngân hàng TPBank) được thiết kế thể hiện các gói tiết kiệm đối xứng, giúp người xem dễ chịu khi theo dõi thông tin và bố cục cũng thuận mắt hơn.

Trải nghiệm thử app Savy


7. Transparency

Độ trong suốt giúp các yếu tố có thể tương tác với nhau để tạo ra các hiệu ứng thị giác thú vị. Nó cũng giúp tạo ra sự chuyển động trong thiết kế khi xếp lớp các hình ảnh khác nhau theo cùng một hướng.

Để chữ có thể đọc rõ ràng nhưng không đơn điệu, trong ví dụ minh họa mình đã sử dụng một mảng màu lớn có tone màu phù hợp với hình nền và độ trong suốt vừa phải. Đồng thời duplicate hình nền thêm lần nữa và cố tình xếp nó lệch đi so với hình lớn, kết quả thu được cũng khá ấn tượng.

Xem thiết kế


8. Texture Pattern

Kể từ khi phong cách thiết kế tả thực (Skeuomorphism) biến mất thì việc sử dụng texture hay pattern cũng ít được quan tâm vì những bất cập nhất định của nó như: rối mắt, tăng dung lượng ứng dụng,… Nhưng đôi khi nếu biết khéo léo sử dụng nó có chủ đích, có thể giúp cho thiết kế của bạn trở nên sinh động hơn khi có chiều sâu và gợi xúc giác bề mặt.

Với trang login cho ứng dụng liên quan tới du lịch, mình đã sử dụng pattern giống như những tấm bản đồ địa lý. Vừa tăng sự thú vị, vừa thể hiện được tinh thần sản phẩm.

Xem thiết kế


9. Balance

Đối xứng là sự cân bằng cùng tính chất như kích thước, độ dài, hình dáng,… Tuy nhiên để tạo ra sự cân bằng thị giác thì không nhất thiết phải cùng khía cạnh với nhau.

Một thứ dài nhưng nhỏ sẽ có thể cân bằng với thứ khác ngắn nhưng to hơn. Đây được gọi là “trọng lượng thị giác”, giúp cho tổng thể thiết kế hài hòa mà không nhàm chán.

Ở Khu vực cuốn sách trên trang landing page này mình đã làm độ dài line, số lượng gấp khúc và vị trí gần xa khác nhau để đạt sự cân bằng thị giác.

Xem thiết kế


10. Contrast

Ở trên vừa nói cân bằng xuống đây nói tương phản, thiết kế thật phức tạp.

Đúng vậy, thiết kế là công việc phức tạp nhưng lại cực kỳ thú vị. Cái thú vị của nó là không có chuẩn chung cho tất cả, đòi hỏi người thiết kế phải rất tinh tế điều chỉnh các nguyên lý cho phù hợp ngữ cảnh sử dụng.

Nhìn chung, tương phản là sự khác nhau về mật độ, màu sắc, hình dáng của những yếu tố thiết kế đứng cạnh nhau. Có ảnh hưởng lên tính dễ đọc, tạo sự nhấn mạnh giúp thiết kế nổi bật hơn.

Khi thiết kế nền tối, cần phải rất lưu ý tới độ tương phản của chữ so với nền để có thể dễ đọc, giữa các loại thông tin cũng cần tạo sự khác biệt để người xem dễ tìm thấy thông tin cần thiết trên cùng một khu vực.

Xem thiết kế

Thật tế có những ví dụ, khi làm mình không hoàn toàn nhớ và suy nghĩ rõ như bây giờ viết lại. Nhưng như đầu bài mình có chia sẻ, thực hành những nguyên tắc này đủ lâu nó sẽ trở thành bản năng thiết kế. Giúp chúng ta tiết kiệm thời gian và tạo ra những sản phẩm tốt hơn. Chờ đọc tiếp 10 nguyên tắc cuối cùng nhé!

đọc thấy hay? share ngay cho bạn bè cùng đọc

Nhận 5 bài viết hot nhất về Sáng tạo và Tư duy.

    và nhận thông báo khi có bài viết mới.

    Tiếp tục đọc

    Working

    January 22, 2024 - 15 phút đọc

    10 Mặt trái của việc phát triển thương hiệu cá nhân

    close-sound-svg
    heart-svg
    hand-svg
    eye-svg
    hit-left-svg
    hand.svg hand.svg
    oval-default oval-designing oval-writing
    loading

    to tell you a better story.
    I prefer you visit my site on
    the desktop.

    music brings emotion
    so turn it on for your best
    experience.

    having a great idea to share?

    or want to have a cup of coffee and chit chat, just drop me a message.

    drop me a message to

    I use cookies to ensure that I give you the best experience on my website. If you continue to use this site I will assume that you are happy with it.