Please enable JavaScript.

Coggle requires JavaScript to display documents.

UX/UI - B2 - Coggle Diagram

- - - - ưu điểm:
        
        nhanh chóng, hiệu quả
      - nhược điểm:
        
        tạo cảm giác rời rạc, đôi khi nhàm chán
      - chỉ đơn giản đặt các hình khối cạnh nhau, không có tương tác với nhau, ko đổ bóng,...
    - - nguyên tắc cũng như phong cách phẳng nhưng có tạo sự liên kết:
        
        liên kết bằng màu sắc tương đồng
        
        shadown: chọn nền phía dưới và kéo đậm hơn. Màu đen và ghi chỉ phù hợp khi nền dưới màu trắng
        
        sử dụng đường nét viền của hình: chọn màu nền và kéo đậm hoặc nhạt hơn
      - bộ icon lởm
      - shadown
        
        xu hướng cũ: đậm, bám vào đối tượng
        
        xu hướng mới: soft design, shadown nhạt hơn, mở rộng hơn
    - - ưu điểm:
        
        hấp dẫn, cảm giác có thể sờ nắm, bật tắt được
      - nhược điểm:
        
        đòi hỏi skill design cao
        
        figma ko làm được mà phải kết hợp công cụ khác
        
        đòi hỏi hiệu năng cao
    - - tạo các đối tượng giả 3D
    - - 2 loại: pixel 8-bit và pixel thường
        
        phải sử dụng photoshop để thiết kế bằng mode bút chì :smiley:
    - - sử dụng các tone màu trầm, các thiết kế có họa tiết + hoa văn
    - - sử dụng các màu pastel
        
        soft design, các đối tượng mềm mại
    - - chọn 3 phong cách
  - - - đường nét nhằm tách đối tượng với nhau => sử dụng 1px
        
        đường nét đóng vai trò trang trí => nên sử dụng lớn hơn 1px
    - - hình chữ nhật nằm:
        
        thiết kế đối xứng
        
        sử dụng cho thiết kế slideshow, backdrop
        
        ko hay sử dụng trong UX/UI
        
        chia thành 9 ô, theo tỉ lệ vàng trong UX/UI
        thiết kế 2/3 + 1/3
      - hình chữ nhật đứng
        
        đối xứng đi từ giữa ra
        
        hoặc 2/3 + 1/3 theo chiều dọc
      - hình vuông
        
        đối xứng
      - các hình còn lại: biến đổi từ các hình cơ bản
    - - 3 màu cơ bản
        
        màu nóng-lạnh
      - màu chủ đạo
        
        áp vào các vị trí lớn
        
        nhường màu chủ đạo cho màu link - action được
        
        VD: button, link,...
        
        xác định màu chủ đạo:
        
        dựa vào design guideline
        
        dựa vào màu logo
        
        dựa vào sản phẩm
        
        dựa vào phong thủy
        
        dựa vào color of the year (pantone)
        
        hướng theo ý nghĩa màu sắc
      - phối màu
        
        trang cung cấp bộ màu: colorhunt, colorpalettes
        
        các màu gần nhau không phối gần cấp với nhau
        
        màu link:
        
        thường có thể sử dụng màu phối cấp 2
        
        phải đối chiếu xem màu link có nổi bật k
    - - nên sử dụng google font
        => được support trên toàn bộ các thiết bị
      - font có chân
        font ko có chân
      - sử dụng duy nhất 1 font cho hệ thống
        
        kết hợp 2 font: sử dụng 1 có chân (trang trí), 1 ko chân
      - thường sử dụng cỡ chữ 14-16
    - - nền đóng vai trò tôn hình lên
      - phải có sự phân lớp rõ ràng
  - - - cân bằng tĩnh
        
        so sánh đối tượng với đối tượng
        
        không phải lúc nào cũng xảy ra cân bằng tĩnh
        
        làm thiết kế bị cứng => hạn chế
        
        xu hướng thiết kế dạng thẻ => cũ => hạn chế
        
        hạn chế thiết kế 50:50
      - cân bằng động
        
        so sánh đối tượng và 1 cụm đối tượng
        
        với khối đặc và khối rỗng: cần mở rộng khối rỗng 1.5 đến 2 lần so với khối đặc
        
        cần so sánh, tính toán sao cho phù hợp
      - 2 loại khối:
        
        khối đặc: full nội dung (VD: hình ảnh)
        
        khối rỗng: có những khoảng hở (VD: text)
      - cân bằng khoảng cách trên-dưới, trái-phải của hình khối
    - - khoảng cách giữa các dòng
        
        khoảng cách giữa các cấp
      - bộ phân cấp: => lấy size theo vertical spacing
        
        với các trang content hiện đại, nên chọn cấp 1 <160, nhiều khoảng trắng
        
        với các trang về ecommerge, cấp 1 chỉ khoảng
        
        với mobile, cấp 1 nên <80, thường 40-60
        
        các sản phẩm nhiều nội dung có thể chỉ khoảng 56
        
        các cấp sau nhỏ hơn cấp 1
      - phân cấp text và heading:
        
        size theo heading
        
        với phần nội dung (normal text):
        
        nên sử dụng size 14 hoặc 16, mode regular
        
        16px lề trên
        
        24px lề dưới
        
        với phần page Title => 30-40px, size medium trở lên
        
        một số cách giảm cấp text:
        
        theo fontsize
        
        theo độ rộng text
        
        hạ tone màu
      - Button nằm trong khối:
        
        với PC:
        
        button chỉ nên maximum 48px height
        
        text 14-18
        
        với mobile, button chỉ nên maximum 40px height
        
        Button ko nằm trong khối (link)
        
        Button cũng có phân cấp như nội dung
    - - B1: xây dựng bộ phân cấp, bộ font
    - - tạo sự kết nối giữa các đối tượng
  - - - dày-mỏng
      - to-nhỏ
      - cứng-mềm
        
        nội dung cần làm nổi bật => font cứng
        
        nội dung phụ => font mềm
        
        hoặc ngược lại
      - hoa-thường
- - - - xác định thể loại
        
        web giới thiệu
        
        đơn giản hơn, có thể booking qua điện thoại
        
        booking
        -
      - định dạng web
        
        web ngắn
        
        scroll chuột từ 1-3 lần
        
        web vừa
        
        (3-5 lần scroll)
        
        web dài
        
        (5+ lần lần scroll chuột)
        
        Note: ng dùng hiện nay ưa chuộng web ngắn và vừa hơn
    - - trả lời các câu hỏi
        
        5W2H: when, why, what, who, where, how, how much
        
        xây dựng bộ khảo sát ng dùng
        
        xây dựng hành trình khách hàng cho sản phẩm
        
        who?
        
        đối tượng chính sử dụng là ai
        
        độ tuổi: 18-45 (dựa trên khảo sát)
        
        gender?
        
        giới tính
        
        nữ nhiều hơn
        
        Vẽ site map => lên danh sách nội dung theo từng trang
    - - trải nghiệm chính: click (90%) và hover
        
        trải nghiệm phụ:
        
        hạn chế số lần tương tác cho ng dùng
      - những nội dung quan trọng:
        
        để ở vị trí ngang tầm mắt
        
        để trong 3 screen gần nhất, screen đầu tiên quan trọng nhất
        
        các website giới thiệu ưu tiên về mặt hình ảnh => 1 screen đầu bắt mắt
        
        các website yêu cầu nhiều về nội dung => giảm tập trung vào hình ảnh, tập trung vào nội dung nhiều hơn
        
        có dấu hiệu nhận biết cho n dùng
      - trải nghiệm của ng dùng theo thứ tự
        
        trên => dưới => trái => phải
        
        chữ Z, chữ S:
        
        tư duy ng đọc overview trước, rồi mới đến detail
        
        hệ thống navigator, menu rõ ràng
      - đảm bảo ng dùng hiểu rõ những nội dung hiểu thị
      - ng làm UX tốt: đặt được nhiều câu hỏi và trả lời được các câu hỏi về ng dùng