Phân cấp thị giác trong thiết kế giao diện website

ĐỀ TÀI PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN WEBSITE GVHD Ths Nguyễn Lê Mai BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG Tổng quát Thiết kế giao diện người dùng đóng[.]

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG ĐỀ TÀI: PHÂN CẤP THỊ GIÁC TRONG THIẾT KẾ GIAO DIỆN WEBSITE GVHD: Ths Nguyễn Lê Mai Tổng quát Thiết kế giao diện người dùng đóng vai trị trọng yếu việc tối đa hóa tiện ích khả sử dụng sản phẩm Bài nghiên cứu nhóm chúng tơi cung cấp thơng tin phân cấp thị giác - kĩ thuật tiếng nhà thiết kế áp dụng để tổ chức nội dung trang web Bài viết vai trò, tầm quan trọng kĩ thuật phân cấp thị giác thiết kế giao diện website Ngoài ra, tổng hợp số phương pháp sử dụng, điểm mạnh mang lại việc thiết kế giao diện, đồng thời nhấn mạnh nguyên tắc mà nhà thiết kế cần lưu ý trình thiết kế, hiểu cách áp dụng nguyên tắc vào tình thực tế Qua đó, nhà thiết kế hiểu rõ yếu tố định phân cấp thị giác để áp dụng chúng việc đảm bảo nội dung thẩm mĩ thiết kế giao diện website Mục lục MỞ ĐẦU CHƯƠNG 1: TỔNG QUAN VỀ PHÂN CẤP THỊ GIÁC 1.1 Khái niệm phân cấp thị giác 1.2 Các nguyên tắc phân cấp thị giác CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE 2.1 Vai trò phân cấp thị giác thiết kế giao diện website 2.2 Phương pháp tạo nên phân cấp thị giác tốt thiết kế giao diện website 2.3 Các lưu ý phân cấp thị giác giao diện website 11 CHƯƠNG 3: TỔNG KẾT 14 MỞ ĐẦU Trong thời đại bùng nổ Công nghệ thông tin không phủ nhận tầm quan trọng việc thiết kế website doanh nghiệp Cho dù công ty hay doanh nghiệp kinh doanh lĩnh vực việc sử dụng website xu tất yếu mà hầu hết doanh nghiệp sử dụng Khi khách hàng ghé thăm website bạn nghĩa họ có quan tâm sản phẩm, dịch vụ mà bạn cung cấp Để níu chân khách hàng vào website lâu thu hút quan tâm điều dễ dàng Cùng sản phẩm, dịch vụ có nhiều người kinh doanh, việc bạn không giữ chân khách hàng đến với website bạn tạo hội cho đối thủ cạnh tranh khác Để giữ chân khách hàng từ lúc họ vào website bạn phải chắn website bạn có giao diện bắt mắt, thu hút người nhìn, bố cục hợp lý đơn giản dễ dàng thao tác Điểm cộng lớn để giúp cho khách hàng có thêm thao tác website bạn Đây lý doanh nghiệp dù lớn hay nhỏ nên có website cho riêng Theo thống kê, Việt Nam có 50 triệu người dùng mạng internet, nhận thấy thị trường thực tiềm hầu hết ngành nghề kinh doanh, dịch vụ hay mua bán Nếu trước đây, việc giới thiệu sản phẩm, quảng bá thương hiệu mua bán, kinh doanh diễn địa phương nước đây, thơng qua website doanh nghiệp, cơng ty tiếp cận với khách hàng lớn nước cách dễ dàng Việc thiết kế website riêng cho doanh nghiệp gần trở thành điều bắt buộc doanh nghiệp muốn thúc đẩy phát triển quảng bá sản phẩm, thương hiệu với người tiêu dùng Website trở thành mặt, kênh quan trọng để doanh nghiệp tiếp thị sản phẩm tới nơi giới Khi khách hàng ghé vào website đó, trước họ kịp xem liệu có thứ họ cần hay khơng, nội dung, sản phẩm website điều trước tiên đập vào mắt họ giao diện website Một giao diện xấu, cũ, màu sắc, bố cục lộn xộn, liệu có giữ chân khách hàng tìm kiếm họ muốn tìm, khách hàng sau nhìn thấy giao diện web mà không cần quan tâm đến website có Một thiết kế website gọi thành cơng người mang đến cho người dùng thuận tiện truy cập vào website Tâm lý khách hàng họ ghét website rối rắm, làm thời gian họ Thứ họ quan tâm sản phẩm, truy cập vào website đơn giản, giúp họ tìm đến nhanh với sản phẩm điểm cộng cho website bạn Mỗi nhà thiết kế có cách thiết kế khác để từ họ tạo sản phẩm sáng tạo hơn, nhiên có vài nguyên tắc mà tất nhà thiết kế cần phải tuân thủ hiểu rõ trước phá vỡ nguyên tắc Trong số nguyên tắc có nguyên tắc quan trọng mang tên "Phân cấp thị giác" nhiều người thường gọi phân cấp trực quan Một yếu tố quan trọng góp phần nâng cao hiệu thiết kế bạn đặt phân cấp rõ ràng, việc làm bạn cho người xem đâu điểm quan trọng nhấn mạnh tác phẩm, từ truyền tải thơng điệp cách rõ ràng chuẩn xác Phân cấp thị giác phương pháp tổ chức yếu tố thiết kế theo thứ tự quan trọng Nói cách khác, tập hợp nguyên tắc ảnh hưởng đến thứ tự mà nhận thấy thấy Những quy tắc vàng giúp sáng tác thiết kế có tính thẩm mỹ thu hút ý đắn Theo thuật ngữ bản, hệ thống phân cấp thị giác chỉnh kích thước phân phối yếu tố thiết kế Nếu nhà thiết kế, bạn nhận thấy việc chỉnh phân bố nội dung quan trọng, cần phải chia tỷ lệ phân phối đối tượng theo cách khiến cho người xem phân biệt thông tin quan trọng với phần lại Phân cấp thị giác tảng kiến trúc thông tin hiệu Khi yếu tố giao diện người dùng cấu trúc xếp, người thích sử dụng sản phẩm hiệu việc giải vấn đề họ Hơn nữa, hệ thống phân cấp thị giác mạnh mẽ cải thiện hệ thống định vị người định hướng tốt sản phẩm Bất kì sản phẩm từ trang web, phần mềm phân tích thành phần nhỏ tượng trưng cho yếu tố thiết kế thị giác Quan điểm thể Alan Hashimoto – giáo sư môn thiết kế đồ họa khoa học máy tính Đại học bang Utah, Mike Clayton – giám đốc kiêm giáo sư môn nghệ thuật thiết kế đồ họa trường Đại học Incarnate Word, sách Visual Design Fundamentals: A Digital Approach (Nền tảng thiết kế thị giác: Cách tiếp cận kĩ thuật số) Những yếu tố công cụ mà nhà thiết kế thị giác thường sử dụng, kiến thức chúng điều tất yếu công việc Một thiết kế thành công tạo ý cho người xem Để làm tốt công việc thiết kế giao diện website cách xếp, chọn lọc hình ảnh, nội dung, bố cục, đường nét việc phân cấp thị giác quan trọng Nó yếu tố quan trọng góp phần nâng cao hiệu thiết kế bạn đặt phân cấp rõ ràng, việc làm bạn cho người xem đâu điểm quan trọng nhấn mạnh tác phẩm, từ truyền tải thơng điệp cách rõ ràng chuẩn xác Để có trang web hay phần mềm đẹp mắt, cần nắm rõ yếu tố thiết kế thị giác cách ứng dụng chúng cho thật phù hợp Đường thẳng, hình dạng, khơng gian âm, cường độ, màu sắc sắc thái yếu tố Cách đặt tối ưu yếu tố kiến thức quan trọng nhà thiết kế Biết cách thiết kế cho có yếu tố quán, thống nhất, tầng lớp rõ ràng, cân bằng, tương phản, tỉ lệ hợp lý, tính trội tương đồng giúp bạn nhiều công việc Các nguyên lý phân cấp thị giác giúp ta có nhìn tồn diện, hiểu rõ thấy tầm quan trọng áp dụng vào thiết kế Các nhà thiết kế phải khôn ngoan chọn nguyên tắc để sử dụng Những quy tắc vàng giúp sáng tác thiết kế có tính thẩm mỹ thu hút ý đắn Phần lớn người đọc quen đọc từ xuống dưới, từ trái sang phải trừ số vùng Trung Đông, Nam Á Đông Á Bằng việc kết hợp chiêu bôi đậm việc đặt thông tin rõ ràng, bạn luyện chiêu phân cấp thị giác để truyền đạt cho người dùng câu chuyện mà bạn muốn kể CHƯƠNG 1: TỔNG QUAN VỀ PHÂN CẤP THỊ GIÁC 1.1 Khái niệm phân cấp thị giác Phân cấp thị giác nguyên tắc xếp yếu tố thể thứ tự quan trọng chúng thiết kế Bằng cách bố trí yếu tố hợp lý có chiến lược nhà thiết kế tác động đến nhận thức người dùng dẫn họ đến hành động mong muốn Phân cấp thị giác kỹ thuật cốt lõi áp dụng q trình thiết kế Ban đầu dựa lý thuyết tâm lý Gestalt để kiểm tra nhận thức trực quan người dùng yếu tố liên quan đến nhau, cho thấy người dùng có xu hướng gộp yếu tố hình ảnh thành nhóm 1.2 Các nguyên tắc phân cấp thị giác 1.2.1 Phân cấp Typographic Nội dung phần quan trọng thiết kế giao diện người dùng Đó lý hệ thống phân cấp thị giác thường phụ thuộc nhiều vào kiểu chữ Các chuyên gia định nhấn mạnh tầm quan trọng việc trình bày cách tạo hệ thống phân cấp thị giác riêng biệt gọi hệ thống phân cấp typographic Hệ thống nhằm mục đích tổ chức nội dung theo cách tốt cho nhận thức người dùng Nhà thiết kế sửa đổi kết hợp phông chữ để xây dựng tương phản yếu tố chép có ý nghĩa bật cần ý đến thông tin văn thông thường Các phông chữ sửa đổi cách điều chỉnh kích thước, màu sắc family liên kết chúng Phân cấp Typographic bao gồm yếu tố khác nội dung chép tiêu đề, tiêu đề phụ, nội dung, phần tử gọi hành động, phụ đề số nội dung khác Để xây dựng hệ thống phân cấp trực quan hiệu quả, tất phần tử cần phân đoạn thành cấp độ khác Hãy xem chúng Sơ cấp: Nó bao gồm loại lớn tiêu đề Cấp nhằm mục đích cung cấp cho người dùng thơng tin cốt lõi thu hút ý người vào sản phẩm Trung cấp: Đây loại phần tử chép cần quét dễ dàng Chúng thường liên quan đến tiêu đề phụ phụ đề giúp người dùng nhanh chóng điều hướng qua nội dung Cao cấp: Nội dung văn số liệu bổ sung tạo cấp độ cao Các nhà thiết kế thường áp dụng loại tương đối nhỏ đọc Vì nội dung thường nguồn thơng tin giao diện người dùng nên nhà thiết kế cần trình bày liệu Bằng cách phân đoạn phần tử chép vào trình thiết kế cấp độ khác giúp người dùng dễ dàng chuyển từ sang khác nhận thông tin theo thứ tự Một điều cần lưu ý tạo kiểu chữ cho sản phẩm di động, nhà thiết kế khuyến nghị giữ số lượng lớp cấp thứ hai Vấn đề hình di động nhỏ khơng cung cấp đủ khơng gian cho ba cấp độ Đó lý yếu tố cấp trung cấp tiêu đề phụ dịch chuyển sang bên để làm cho giao diện người dùng thiết bị di động trở nên rõ ràng 1.2.2 Công cụ phân cấp trực quan Khi nhà thiết kế chọn tất thành phần nội dung, trình phân cấp Hãy tìm hiểu điều giúp nhà thiết kế thiết lập hệ thống phân cấp trực quan hiệu thành phần giao diện người dùng - Kích thước Một cơng cụ mạnh mẽ để chuyển đổi vật liệu trực quan kích thước Nó bắt nguồn từ tâm trí người thứ lớn cách quan trọng nhỏ Đó lý ý người dùng tự động với từ lớn hình ảnh lớn Nhà thiết kế cần phải phân biệt mức độ ý nghĩa cho yếu tố nội dung dựa liệu biến đổi thành phần thành lớn nhỏ - Màu sắc Trong viết trước chúng tôi, đề cập màu sắc có tác động lớn đến nhận thức người dùng lý có vai trị cơng cụ hiệu để tạo phân cấp thị giác Màu sắc có hệ thống phân cấp riêng chúng xác định sức mạnh ảnh hưởng đến tâm trí người dùng Có màu đậm đỏ, cam đen dễ dàng thu hút ý Mặt khác, có màu sắc yếu mềm, màu trắng màu kem thường dùng làm tốt Sử dụng màu sắc khác hỗ trợ hệ thống phân cấp Element giao diện người dùng Ví dụ, nút CTA có màu đậm chắn gây ý đến người dùng Element khác tạo bảng màu nhẹ sáng - Tương phản Tương phản góp vai trò quan trọng hệ thống phân cấp thị giác Thiết kế cần đảm bảo độ tương phản tốt để người xem thấy khác biệt element nội dung Độ tương phản tạo thơng qua kích thước, màu sắc kiểu chữ Tuy nhiên, cần đảm bảo tương phản cần cân để Element không áp đảo - Khơng gian âm Có thể có nhiều thành phần giao diện người dùng để làm cho tất chúng đáng ý cho người thiết kế mắt người dùng cần phải cung cấp cho họ số không gian riêng tư Không gian âm, khoảng trắng, vùng phần tử thành phần thiết kế Một số nhà thiết kế thường không nghĩ không gian màu trắng thành phần thiết kế chuyên gia áp dụng cơng cụ hữu ích giúp xây dựng thành phần thích hợp - Tiệm cận Như chúng tơi nói trên, phân cấp thị giác xây dựng theo nguyên tắc Gestalt, đó, nhà thiết kế ý sâu đến gần gũi yếu tố giao diện người dùng Khi người có xu hướng thống yếu tố hình ảnh thành nhóm, thành phần giao diện người dùng cần đặt theo cách để người dùng phân loại chúng Nếu số yếu tố đặt khoảng cách định, người dùng tự động cảm nhận chúng nhóm Nhà thiết kế sử dụng khoảng cách gần công cụ giúp phân chia nội dung thành danh mục phụ - Lặp lại Nếu người nhận thấy số yếu tố trông giống nhau, họ tự động hợp chúng thành nhóm Đó cách lặp lại hoạt động Các nhà thiết kế lặp lại số mẫu cho đối tượng khác có mục đích để người dùng thống chúng Ví dụ: trang web có số lượng nội dung tuyệt vời trang làm bật câu quan trọng màu khác Nhìn thấy câu màu này, người dùng theo dõi từ điểm đến điểm khác CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE 2.1 Vai trò phân cấp thị giác thiết kế giao diện website Việc thiết kế giao diện website ảnh hưởng nhiều đến khả người đọc tiếp nhận thông tin, ghi nhớ thúc đẩy hành động Mặc dù nội dung nắm vai trị trọng tâm, khơng thích sử dụng website với thiết kế nghèo nàn Sự phân cấp thị giác đóng vai trị quan trọng giúp người thiết kế định hướng người xem, kể cho người xem câu chuyện, thông điệp phi ngôn từ hấp dẫn, thú vị, thay nhồi nhét thơng tin cách lộn xộn khô khan Phân cấp thị giác tảng layout hiệu Khi yếu tố giao diện người dùng cấu trúc xếp, người dùng thích sử dụng sản phẩm cảm thấy hiệu việc giải vấn đề họ Một phân cấp thị giác tốt thu hút người xem đến toàn website dẫn dắt họ qua phần cách tạo mức độ ưu tiên luồng trực quan khác Hệ thống phân cấp thị giác quan trọng loại thiết kế hình ảnh, cho dù trang đích cần hướng dẫn truy cập khách quan hay trang điều hướng giao diện người dùng Bời hiểu biết người dùng yếu tố xác định dựa yếu tố khác bố cục bối cảnh chúng Các yếu tố cấu thành xử lý phù hợp để hình thành nên mối quan hệ trực quan, từ thiết lập hệ thống phân cấp thị giác thiết kế Phân cấp thị giác chìa khóa để phân biệt trang web thực có tầm ảnh hưởng đến luồng người dùng trang web đẹp cách đơn điệu Khơng có hệ thống phân cấp thị giác thường dẫn đến số lỗi mà người xem dễ mắc phải: - Bị nhầm lẫn: Người xem cố gắng tiếp nhận tất nội dung nhận lại bối rối mà không thực hiểu thông tin Họ phải đọc lại nhiều lần để xếp ghi nhớ thông tin quan trọng - Bỏ qua: Người xem thấy thứ mức độ quan trọng nhau, họ chí cịn khơng cố gắng đốn xem trang web muốn nói với họ điều Họ bỏ qua tất phần khơng có thơng báo cho họ biết họ nên đâu di chuyển - Mất tập trung: Việc thiếu không gian trống (khoảng trắng) dẫn đến trang web lộn xộn, khó hiểu hỗn loạn Khơng gian trống khơng giúp người xem dễ dàng tiêu hóa thơng tin cách nhóm vào ngăn, mà cịn tạo tập trung giúp mắt khơng nhìn vào mục riêng lẻ Tóm lại, hệ thống phân cấp thị giác thiết kế giao diện website quan trọng để thể thúc đẩy tiêu điểm, cấu trúc trải nghiệm Hệ thống phân cấp trực quan gây ấn tượng thuyết phục người dùng hơn, đặc biệt hình thức giao diện 2.2 Phương pháp tạo nên phân cấp thị giác tốt thiết kế giao diện website Một website phân cấp thị giác tốt dẫn người dùng đến chức trang/màn hình cung cấp cho họ thông tin mà họ cần Bạn cần nghiên cứu người dùng để hiểu họ - Khi gặp trang web, người dùng phản ứng nhanh, họ định nhanh việc nên lại hay rời - Đôi mắt người dùng theo dõi đường dẫn đọc đốn trước được, theo hình chữ F hay chữ Z Vì vậy, bạn đặt thành phần quan trọng đường chữ F Z đó, dẫn dắt người dùng theo đường xây dựng đến mục tiêu mà bạn mong muốn (hoặc phá vỡ quy tắc để tạo điểm nhấn cho website mình, gây ấn tượng với người dùng) - Mơ hình phân cấp thị giác thiết kế website dạng chữ Z: Người dùng thích nhận dạng nhớ lại - lý họ lại họ qt mắt qua loa thơng tin - Mơ hình phân cấp thị giác thiết kế website dạng chữ F: Đây mẫu chuyển động mắt phổ biến Bởi xác cách đọc sách, thư trang web Quét trang từ trái sang phải dọc theo đầu lần cho dòng văn cuối trang Do xu hướng tự nhiên này, hầu hết nhà thiết kế thường sử dụng mẫu F soạn trang web minh họa khác phụ thuộc nhiều vào văn Bởi đọc theo số hướng khác khơng thoải mái khơng phải quen Với lưu ý này, bạn biết đặt thông tin quan trọng đâu, để hiển thị cho người dùng thông tin quan trọng Có thể áp dụng cách phân cấp nội dung, điều chỉnh kích thước văn bản, sử dụng màu sắc kết hợp với typography để tạo nên thiết kế phân cấp tốt 2.2.1 Phân cấp nội dung Những làm việc với web hẳn quen thuộc với cách phân cấp thông tin việc sử dụng tag va , nhiên điều hạn chế tính thẩm mỹ web với khối lượng nội dung chữ viết lớn Chính vậy, phải hiểu hệ thống phân cấp, từ tạo mẫu thiết kế đẹp, sâu sắc có khả giao tiếp cao với người xem trang web Cách để thực phân cấp cần thay đổi kích thước thơng tin Việc sử dụng phông chữ lớn đậm cho thông tin quan trọng sử dụng phông chữ gọn gàng kích thước phơng chữ nhỏ cho thơng tin quan trọng tạo nên phân cấp thông tin cho trang web Trong trang web thực phân cấp thông tin, ta thường phân nhóm để xếp chúng thành ba phần quan trọng: Phần thứ (Tiêu đề): Tiêu đề viết cần chọn kiểu chữ phù hợp phần quan trọng thiết kế yếu tố thu hút người xem Để đạt hiệu thu hút thị giác, ta chọn size chữ to đậm hơn, tạo tương phản lớn với phần thông tin khác trang web Phần thứ hai (Phần giới thiệu thêm): Ở phần này, yếu tố chữ cần phải có nét tương đồng, thống tiêu đề thân viết, điều khiến cho nội dung liên kết chặt chẽ lưu lốt Phần thứ ba (Nội dung chính): Thân nội dung viết, bạn nên sử dụng kiểu chữ nhỏ, đơn giản dễ nhìn để người xem dễ đọc Đối với trang tiếp theo, người dùng tự động hiểu mối quan hệ trực quan trang web Bởi tâm trí hiểu tín hiệu thơng tin này, liên kết chúng để có nhìn tổng quan dễ dàng tiếp nhận thơng tin cách tương tự 2.2.2 Phân cấp màu sắc Cách thứ hai sử dụng màu sắc Một trang web tinh tế sử dụng màu cách hài hoài Bộ màu gồm màu chủ đạo, màu nhấn màu bổ trợ Bộ màu tạo nên nhìn tổng thể cho trang web Nó coi yếu tố nhận diện thương hiệu Màu sắc cho trang web cần yêu cầu có kết hợp chủ đề trang web hướng đến, logo hình ảnh sử dụng Tuy nhiên, khơng nên sử dụng nhiều màu sắc, bạn nên sử dụng khoảng từ đến màu kết hợp cách khéo léo để tạo tương phản hỗ trợ lẫn Sử dụng màu sắc khác giúp tăng thêm đa dạng cho thiết kế bạn Bên cạnh đó, người ta sử dụng màu sắc để làm bật hình ảnh nhấn mạnh thông tin quan trọng.Tuy nhiên thiết kế bạn sử dụng nhiều gam màu màu sắc góp phần làm rối loạn thị giác bạn Chính thế, sử dụng màu với mục đích thiết kế điều quan trọng 2.2.3 Khoảng cách Khi thiết kế bạn có q nhiều thơng tin khơng có khoảng cách, điều ảnh hưởng đến thị giác người xem rối rắm lộn xộn, gây nhầm lẫn thơng tin Chính vậy, khoảng cách yếu tố cần thiết để tách rời thông tin thiết kế đồng thời thống chúng lại đặt bố cục trật tự cân Có loại khoảng cách: - Khoảng cách phần nội dung trang web - Tách rời khoảng cách bạn thành nhiều phần (căn chỉnh lề bên — giảm khoảng cách) Lợi ích Khoảng trắng phân cấp thơng tin: - Tăng tính dễ đọc nội dung: Khi người dùng trang web bạn, họ dễ dàng nhận biết nội dung để tiếp tục đọc Khoảng trắng đoạn văn xung quanh khối văn hình ảnh thực giúp người hiểu họ đọc nâng cao trải nghiệm người dùng tốt tổng thể - Tương tác nhiều hơn: Ln có vấn đề người dùng truy cập vội vàng duyệt qua trang web việc có nhiều khoảng trắng tăng tương tác cách ngăn chặn phân tâm khiến khách truy cập chậm lại Ngay khoảng đệm nhẹ xung quanh đối tượng giúp thu hút ý đến khu vực cụ thể trang web bạn - Tăng gọn gàng: Ấn tượng trang web bạn quan trọng.Bố cục chắn tuyệt vời, phối màu tốt - tất yếu tố làm tăng thêm ấn tượng cho trang web, khoảng trắng đặc biệt quan trọng thể khéo léo tài tình Khoảng trắng khơng làm cho trang web bạn trở nên trần trụi tối giản Miễn khoảng trắng sử dụng cách, chắn tạo thêm cảm giác sang trọng cao cấp cho trang web bạn - Tạo cân bằng: Quá khoảng trắng dẫn đến nhầm lẫn, vô tổ chức không đáng tin cậy - phẩm chất bạn không muốn gắn liền với thương hiệu trang web Mặt khác, nhiều khoảng trắng làm thiếu nội dung thiếu hướng dẫn người dùng Chìa khóa cân thiết kế bạn để khoảng trắng hoạt động công cụ để tách phần nội dung để dễ dàng truy cập cải thiện trải nghiệm người dùng - Hoạt động dấu phân cách: Khoảng trắng phân tách phần tử không liên quan thiết kế Nó sử dụng để tách hình ảnh / đồ họa khỏi cải thiện bố cục hình ảnh tổng thể bạn Việc sử dụng khoảng trắng thích hợp mở đường cho việc truyền đạt ý tưởng thiết kế hiệu rõ ràng 10 2.3 Các lưu ý phân cấp thị giác giao diện website Hệ thống phân cấp thị giác đầy đủ tảng web số thành cơng Nó giúp tổ chức phần tử trang web cách hiệu để nội dung dễ hiểu dễ xem Cách trình bày yếu tố hình ảnh có tác động lớn đến trải nghiệm người dùng Nếu thành phần tổ chức cách khơn ngoan, người dùng dễ dàng tương tác với web mà không cần nỗ lực nhờ tận hưởng q trình Vậy, điều tạo nên hệ thống phân cấp thị giác tốt? Tất nhiên, loại web khác đòi hỏi phương pháp khác để xây dựng có số giải pháp chung hữu ích cho việc tổ chức nội dung web Sau mẹo hữu ích cách tạo hệ thống phân cấp thị giác hấp dẫn cho website - Ghi nhớ mục tiêu web Một web làm ln để phục vụ mục đích định Để đạt chúng, người thiết kế cần tìm yếu tố quan trọng ưu tiên dựa theo vai trị chúng Ví dụ, tất yếu tố trang web thương mại điện tử thực nhiệm vụ khác Hình ảnh sản phẩm thường yếu tố quan trọng nhằm khuyến khích thu hút khách hàng Sau tiêu đề sau hình ảnh để giải thích sản phẩm yếu tố quan trọng nút CTA (Call-to-action), kêu gọi người mua mặt hàng Bằng cách xem xét mục tiêu kinh doanh tiếp thị đặt cho trang, người thiết kế chọn yếu tố quan trọng khiến bật lên so với yếu tố khác - Đặt tính khả dụng lên đầu Hệ thống phân cấp thị giác dường hướng đến khía cạnh thẩm mỹ, thực tế lại Trước hết, việc trúc tổ chức yếu tố trực quan trang web, người thiết kế cần đảm bảo web phải rõ ràng dễ sử dụng hệ thống điều hướng xác Hệ thống phân cấp thị giác xây dựng đặc biệt dựa tính thẩm mỹ hoạt động hiệu Giao diện người dùng với nội dung có cấu trúc khơng hợp lý dẫn đến trải nghiệm người dùng khơng tốt Vì vậy, xây dựng hệ thống phân cấp thi giác, nhà thiết kế cần xem xét chức yếu tố web vai trò chúng trình điều hướng - Khoảng trắng yếu tố thị giác quan trọng Khoảng trắng, hay không gian âm, không khu vực yếu tố thiết kế, thành phần cốt lõi bố cục thị giác Nó yếu tố có khả 11 làm cho yếu tố giao diện người dùng trở nên đáng ý mắt người dùng Người thiết kế web nhóm tách thành phần giao diện web để tạo bố cục hiệu Hơn nữa, khoảng trắng giúp nhấn mạnh yếu tố đặc biệt cần tới quan tâm người dùng Khoảng trắng công cụ hiệu để tạo hệ thống phân cấp thị giác, người thiết kế web cần phải tìm cách cân khoảng trắng - Áp dụng tỷ lệ vàng vào thiết kế web Tỷ lệ vàng tỷ lệ tốn học gần 1,6180 Nó thường tìm thấy tự nhiên sử dụng lý thuyết thiết kế cổ điển để tạo bố cục cân Nó thường minh họa hình xoắn ốc hình vỏ sị Tỷ lệ vàng áp dụng thiết kế web Dễ dàng thu hút ý với bố cục có cấu trúc ấn tượng Tuân theo tỷ lệ vàng có lẽ cách dễ chắn để thiết lập hệ thống phân cấp thị giác trang bạn - Sử dụng lưới thiết kế Lưới công cụ quan trọng áp dụng giai đoạn khác trình sáng tạo hệ thống phân cấp thị giác ngoại lệ Lưới giúp cấu trúc tất thành phần đặt chúng vào kích thước tỷ lệ thích hợp Hơn nữa, người thiết kế web làm việc cách hiệu với khơng gian âm lưới hiển thị phần tử đặt theo tỷ lệ đồng - Sử dụng màu sắc cho trang web bạn Lựa chọn kết hợp màu sắc với điều cần thiết cho hệ thống phân cấp thị giác chúng giúp người dùng phân biệt yếu tố cốt lõi với yếu tố khác.Đối với màu sắc, chúng có hệ thống phân cấp riêng xác định mức độ ảnh hưởng chúng tới tâm trí người dùng Có màu mạnh đỏ cam màu yếu trắng kem Màu mạnh dễ nhận thấy nhà thiết kế thường sử dụng chúng nhằm làm bật thiết lập độ tương phản cho thiết kế Hơn nữa, sử dụng chung màu cho số yếu tố thể chúng kết nối với cách 12 Ví dụ: Có thể chọn màu đỏ cho nút mua hàng để người dễ dàng tìm thấy chúng cần tới - Chú ý đến phông chữ Hệ thống phân cấp thị giác bao gồm tiểu mục quan trọng gọi typography dùng để chỉnh sửa kết hợp phông chữ với nhằm tạo dựng tương phản yếu tố có ý nghĩa bật cần ý với thông tin văn thông thường Các phông chữ chuyển đổi cách điều chỉnh kích thước, màu sắc, dạng chữ,… Các phông chữ khác chia nội dung thành cấp độ khác để người dùng tiếp nhận thơng tin Tuy nhiên, người thiết kế nên giữ số lượng phơng chữ khơng q ba phơng q nhiều phông chữ khiến thiết kế trông lộn xộn làm cho thiết kế thiếu nhất quán - Ba cấp độ dành cho web, hai cấp độ dành cho thiết bị di động Như đề cập bên trên, phông chữ khác tạo thành cấp độ kiểu chữ bao gồm yếu tố tiêu đề, tiêu đề phụ, nội dung, call-to-action thích Có ba cấp độ typography, cấp có kích cỡ lớn nhằm thu hút ý người vào thông tin cốt lõi hình Cấp độ phần thơng tin mà người dùng dễ dàng quét có khả giúp người dùng điều hướng Cấp độ cuối thường nội dung văn số thông tin bổ sung trình bày theo kích cỡ tương đối nhỏ Trong nhiều trường hợp, thiết kế web bao gồm ba cấp độ chúng có thường phải cung cấp lượng lớn thông tin cho người xem Mặt khác, người thiết kế nên giữ số cấp vòng hai làm typography cho thiết bị di động Màn hình thiết bị di động nhỏ so với máy tính nên khơng cung cấp đủ khơng gian cho ba cấp, đó, yếu tố cấp phụ tiêu đề phụ phải gạt sang bên để làm cho giao diện người dùng thiết bị di động trông gọn gàng Hệ thống phân cấp thị giác hiệu khơng bao gồm tính thẩm mỹ Nó cịn nhằm mục đích cung cấp hệ thống điều hướng tương tác giải vấn đề trải nghiệm người dùng thân thiện Để tạo hệ thống phân cấp thị giác đầy đủ, người thiết kế cần xếp tổ chức tất yếu tố trang web dựa chức mục đích web 13 CHƯƠNG 3: TỔNG KẾT Phân cấp thị giác thiết kế website đơn giản việc xếp yếu tố cho hợp lý, tốt để người dùng tận hưởng trải nghiệm liền mạch quên họ sử dụng giao diện làm phương tiện Phân cấp thị giác tảng kiến trúc thông tin hiệu Nó hướng mắt người xem đến trọng tâm thiết kế cách hợp lý có ý nghĩa Ngồi việc điều hướng đơi mắt người xem thơng qua thiết kế, việc sử dụng phân cấp thị giác củng cố nội dung truyền tải gợi lên tập hợp cảm xúc cụ thể Hệ thống phân cấp không thực tốt khiến người xem có cảm giác trống rỗng vơ tổ chức Trong thiết kế giao diện website, thường sử dụng phương pháp để phân cấp thị giác tốt Thứ phân cấp nội dung, thứ hai phân cấp màu sắc cuối phương pháp khoảng cách Để phân cấp thị giác thiết kế giao diện đạt hiệu tốt nhà thiết kế thường kết hợp phương pháp với Ngoài ra, phân cấp thị giác thiết kế giao diện website, nhà thiết kế cần lưu ý số nguyên tắc: nguyên tắc Gestalt, tương phản kích thước định luật Fitts, màu sắc, layout, tỉ lệ vàng thiết kế web, khoảng cách, luật Hick khoảng trắng, bố cục khoảng cách Việc vận dụng tốt nguyên tắc giúp cho giao diện web hấp dẫn, thu hút không mắc lỗi sai thiết kế giao diện Nói chung, phân cấp thị giác có vai trị quan trọng thiết yếu thiết kế giao diện web Việc vận dụng phân cấp thị giác vào việc thiết kế giao diện không truyền tải nội dung trang web cách hiệu quả, gợi lên cảm xúc người dùng mà thể thẩm mĩ thiết kế Áp dụng phương pháp phân cấp thị giác hiệu quả, tuân thủ nguyên tắc phân cấp giúp giao diện đạt hiệu cao việc thể nội dung thẩm mỹ Các nhà thiết kế phải khôn ngoan sử dụng nguyên tắc, phương pháp sử dụng để phân cấp thị giác thiết kế giao diện website Dưới số lời khuyên giúp nhà thiết kế phân cấp cách hiệu Hệ thống phân cấp thị giác sử dụng để giúp đặt tầm quan trọng lên yếu tố định thiết kế bạn, có nhiều yếu tố bạn cho “ quan trọng nhất”, khó để hồn thiện thiết kế bạn Hãy bắt đầu đơn giản tập trung vào điều quan trọng giúp thúc đẩy thiết kế bạn thành công 14 ... tắc phân cấp thị giác CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE 2.1 Vai trò phân cấp thị giác thiết kế giao diện website 2.2 Phương pháp tạo nên phân cấp thị giác tốt thiết. .. dõi từ điểm đến điểm khác CHƯƠNG 2: PHÂN CẤP THỊ GIÁC TRONG GIAO DIỆN WEBSITE 2.1 Vai trò phân cấp thị giác thiết kế giao diện website Việc thiết kế giao diện website ảnh hưởng nhiều đến khả người... thiết kế giao diện website, thường sử dụng phương pháp để phân cấp thị giác tốt Thứ phân cấp nội dung, thứ hai phân cấp màu sắc cuối phương pháp khoảng cách Để phân cấp thị giác thiết kế giao diện