Hướng nội dung trực quan Những gì bạn cần biết
Các hướng trực quan của nội dung là một khía cạnh ít được thảo luận rộng rãi, nhưng rất quan trọng của thiết kế web chuyển đổi cao. Mỗi khách truy cập "ngâm" một trang web mới khi tải trang đầu tiên - cho dù họ có làm điều đó một cách có ý thức hay không.
Thẩm mỹ đóng một vai trò, nhưng đó là về cảm nhận chung về thiết kế. Cảm giác này có thể bị ảnh hưởng bởi khoảng trắng, kiểu chữ, đối xứng, nhưng chủ yếu là các mối quan hệ giữa các yếu tố trang.
Nhà thiết kế muốn khách đến ở lại trang và tiếp tục di chuyển bằng cách thu hút sự chú ý của họ và giữ cho họ quan tâm đến trang web. Nguyên tắc thiết kế nên luôn luôn tập trung về chức năng trước khi hình thức. Điều này có nghĩa là thiết kế nên bổ sung nội dung, không đẩy nó vào như một suy nghĩ sau.
Trong bài đăng này, tôi muốn cho bạn thấy một số mẹo về cách bạn có thể cải thiện bố cục và dòng nội dung trực quan của bạn trên trang web của bạn.
Tập trung vào thành phần
Mỗi phần của một trang web được xây dựng theo cách bố trí tổng thể. Bố cục tổng thể này tạo ra một bố cục tuân theo các quy tắc của lý thuyết Gestalt, trong đó nêu rõ rằng toàn bộ luôn luôn lớn hơn tổng của các bộ phận.
Các khu vực riêng lẻ của một trang kết hợp với nhau tạo thành một tổng thể. Yếu tố thiết kế cần xây dựng lực hấp dẫn về nội dung; mọi thứ trên trang nên tự nhiên hướng dẫn khách truy cập xuống xa hơn cho đến khi họ đến cuối trang.
Đây là lý do tại sao mối quan hệ giữa các phần khác nhau của nội dung (hình ảnh, văn bản, nút, v.v.) rất quan trọng để thiết kế.
Mục tiêu của bạn nên là khuyến khích mọi người để duyệt các trang web từ thiên hướng riêng của họ. Nói thì dễ hơn làm, nhưng bạn có thể học được nhiều thứ bằng cách nghiên cứu các ví dụ thực tế.
Trang chủ cho Monkop là một ví dụ tuyệt vời về phân cấp thị giác với cả văn bản và hình ảnh. Rất nhiều không gian được sử dụng giữa các yếu tố và kiểu chữ bổ sung cho các minh họa vector thương hiệu.
Khi bạn cuộn, bạn sẽ nhận thấy khối trang thẳng chia theo màu sắc, đường viền và đồ họa. Chúng được xây dựng với mẫu thiết kế trong tâm trí để cung cấp sự nhất quán trong suốt trang.
Về phía dưới, bạn sẽ tìm thấy một tách hai cột với hình ảnh ở một bên, văn bản ở bên kia. Những hình ảnh cũng hoán đổi bên trong một mô hình của phải-trái-phải-trái. Điều này thu hút sự chú ý, và phá vỡ sự đơn điệu của trang điển hình trong khi vẫn giữ một dòng chảy tự nhiên trong nội dung.
Một thiết kế thẩm mỹ tương tự có thể được tìm thấy trên trang web của Picjumbo, một trang đích cho một addon ảnh cho người dùng Photoshop và Phác thảo.
Trang chủ đặt trọng tâm vào logo và video xem trước. Khi bạn cuộn, bạn sẽ thấy các hình động tùy chỉnh di chuyển khắp trang. Hoạt hình này thực sự thu hút sự chú ý, và có được người xem quan tâm để tiếp tục di chuyển.
Nhìn chung, trang cảm thấy mở và dễ duyệt. Nội dung là chia thành các khối ngang với kiểu chữ rõ nét và các biểu tượng sạch.
Xem xét cách các yếu tố trang khác nhau cân bằng với nhau, không gian giữa các yếu tố, độ tương phản giữa các màu sắc và hình dạng khác nhau. Tất cả những điều này đóng một vai trò trong thành phần tổng thể. Mỗi trang web tự nhiên thu hút một trọng lượng nhất định vào nội dung.
Không có câu trả lời tuyệt đối vì nó khác nhau cho mọi trang web. Ví dụ, một số liên kết điều hướng trông tốt hơn khi chúng lớn và quá khổ. Những người khác phù hợp hơn khi họ nhỏ với chữ in hoa.
Tôi đề nghị bạn nghiên cứu các trang web khác trong thị trường ngách của bạn. Thực sự phân tích cách họ kết hợp với nhau. Thậm chí hãy thử xây dựng lại bố cục để xem yếu tố nào cuối cùng làm cho thiết kế "kết hợp".
Kiểu thiết kế vấn đề
Cách bạn thiết kế kiểu chữ của bạn sẽ ảnh hưởng đến hướng nội dung trên trang web của bạn. Điều này phải làm với phân cấp kiểu và phong cách thiết kế của các yếu tố trang khác nhau như đoạn văn, tiêu đề, danh sách dấu đầu dòng, dấu ngoặc kép và các thành phần bố cục đặc biệt như cột hoặc bảng.
Hình ảnh cũng có thể ảnh hưởng đến bố cục, vì vậy nên thiết kế nội dung với sự tiến triển tự nhiên. Viết nội dung theo cách chảy xuống trang, và giữ cho mọi người đọc qua từng đoạn.
Công cụ tuyệt vời nhất mà bạn có theo ý của bạn là mắt của bạn cho thiết kế. Tìm hiểu để nhận ra sự khác biệt trong các yếu tố chính tả và cách chúng liên quan đến các yếu tố trang khác. Tạo mối quan hệ giữa các phần trang để phân biệt các khu vực nội dung.
Một số điều bạn có thể cân nhắc:
- Cỡ chữ
- Họ phông chữ
- Độ tương phản màu
- Mối quan hệ phần trang
- Chiều cao dòng và lề đoạn
- Khoảng cách chữ và chữ hoa / chữ thường
Ví dụ: xem trang chủ của Trình giám sát chiến dịch. Các liên kết điều hướng hàng đầu sử dụng tất cả các mũ với chữ nhỏ. Các tiêu đề khác trên trang làm theo điều này cùng một thiết kế mũ mà tạo cảm giác đồng đều.
Các tiêu đề lớn hơn khác trên trang web là nổi bật hơn nhiều, và họ thực sự nhảy ra khỏi trang. Chỉ cần nhìn vào một thiết kế tiêu đề điển hình, nó sẽ dễ dàng để nói sự khác biệt giữa một tiêu đề và bản sao cơ thể được ghép nối của nó.
Các kiểu thiết kế kiểu chữ trên Trình giám sát chiến dịch rất tinh tế và chúng hòa trộn tự nhiên vào bố cục. Cần thực hành để đạt được kết quả như thế này, nhưng bạn càng cố gắng, nó sẽ càng dễ dàng hơn.
Để tìm hiểu thêm một chút, tôi khuyên bạn nên sử dụng các liên kết sau:
- Nguyên tắc thiết kế: Trọng lượng và hướng thị giác
- Làm việc với Trọng lượng hình ảnh trong thiết kế của bạn
- 19 yếu tố tác động đến sự cân bằng thành phần
Nội dung hướng dẫn
Hiểu điều đó các loại trang web khác nhau có phương pháp khác nhau để hướng dẫn du khách thông qua trang web. Ví dụ: trang đích muốn hướng dẫn khách truy cập thông tin, biểu tượng nhỏ, ảnh chụp màn hình, và lời chứng thực.
Các trang web khác như blog thường không đưa mọi người vào trang chủ cùng một lúc. Hầu hết mọi người hạ cánh trên một trang bài viết, vì vậy bố cục bài viết trên blog có nghĩa là làm nổi bật tiêu đề, và vẽ người hơn nữa vào nội dung. Đây là nơi mà việc sao chép chất lượng phát huy tác dụng vì bạn muốn người đọc bỏ qua từng từ.
Mạng xã hội và ứng dụng web cần trải nghiệm người dùng chất lượng, vì vậy đó là một chủ đề hơi khác nhau, nhưng hãy xem xét cách thức ăn của Facebook được thiết kế để khuyến khích di chuyển và tương tác người dùng.
Các phương pháp thiết kế bạn sử dụng để giữ mọi người duyệt trang web sẽ thay đổi theo thời gian. Nhưng nói chung, mục tiêu của bạn là hướng dẫn du khách với một hướng nội dung trực quan.
Chúng ta hãy xem một trang đích và một thiết kế blog để phát hiện sự khác biệt.
Cactus là một trình tạo trang tĩnh cho OS X. Trang chủ của họ theo sát phong cách thiết kế của Apple - nhiều khoảng trắng và phông chữ sans-serif mỏng.
Nội dung được sắp xếp thành các cột, khối và khối văn bản với đồ họa đơn giản. Những thẩm mỹ tương tự là chung với các sản phẩm của Apple, vì vậy người dùng Mac sẽ thích phong cách thiết kế này.
Thông tin về sản phẩm - bao gồm các tính năng và thiết lập - được liệt kê ngay trên trang chủ. Bản thân trang khuyến khích di chuyển thông qua nội dung độc đáo, các biểu tượng cơ bản và mô hình cột xen kẽ của các khối nội dung trái / phải.
Mục tiêu ở đây là cung cấp thông tin cho người dùng hiện tại, và để bán những người dùng mới ý tưởng về cây xương rồng.
Bây giờ so sánh thiết kế đó với trang chủ cho The Next Web. Nội dung là lẻ tẻ hơn nhiều trên một trang chủ blog, bởi vì có rất nhiều chủ đề bài khác nhau.
Hình chữ nhật tạo ra một hệ thống lưới đóng gói nhiều bài viết vào một bố cục. Mục tiêu ở đây là khiến người dùng đọc nội dung trên trang web. Không có vấn đề gì nếu khách truy cập tải xuống bất cứ thứ gì, nhưng nó không thành vấn đề nếu họ dính xung quanh để đọc một cái gì đó.
Cách để mọi người đọc là với những bức ảnh tuyệt vời và tiêu đề hấp dẫn. TNW làm rất tốt công việc này và bố cục của chúng là được xây dựng để giữ cho mọi người duyệt với hình thu nhỏ bài đăng có liên quan trong thanh bên và khu vực sau nội dung.
Hướng dẫn khách truy cập đến một hành động cụ thể là khác nhau trên mỗi trang web. Nhưng bạn có thể học được rất nhiều bằng cách nghiên cứu những gì các trang web thành công khác làm và học cách sao chép.
Tin vào mắt bạn
Các thuộc tính thiết kế riêng lẻ có thể được giải thích một cách phân tích, nhưng việc thực hiện thay đổi cho từng trang web. Hình ảnh anh hùng với liên kết "Di chuyển xa hơn" không thực hiện như nhau trên tất cả các trang web.
Học thiết kế rất nhiều quá trình trực quan. Mắt của bạn cho thiết kế là khía cạnh quan trọng nhất. Bạn cần phải thấy mọi thứ đúng để xác định điều này hệ thống phân cấp thị giác. Nếu bạn có thể nhìn thấy nó trên các trang web khác thì bạn sẽ có thể sao chép nó trên các trang web của riêng bạn.
Lời khuyên tốt nhất tôi có là chỉ cần tin vào mắt của bạn. Tạo một danh sách các trang web yêu thích của bạn và dành 5 phút để duyệt từng trang. Viết ra các yếu tố yêu thích của bạn trên trang và cách chúng ảnh hưởng đến thiết kế. Điều này sẽ giúp bạn tiếp thu những khái niệm này từ góc độ UI / UX, thay vì quan điểm của người dùng.
Cũng đừng ngại thử đồ! Không ai giỏi thiết kế chỉ bằng cách đọc các bài viết về thiết kế. Vâng, họ giúp - họ thực sự có thể giúp rất nhiều. Nhưng bạn nhu cầu đến tạo công cụ từ đầu để tìm hiểu những gì công trinh vậy thì sao không.
Huấn luyện mắt của bạn bằng cách nghiên cứu bố cục trang web bạn thích và tạo lại chúng. Theo thời gian, bạn sẽ xây dựng một thư viện mẫu trong tâm trí của mình, điều này giúp việc thiết kế trang web mới dễ dàng hơn nhiều.
Kết thúc
Hy vọng, những lời khuyên này sẽ giúp bạn bắt đầu và đưa ra một lộ trình cơ bản để làm theo. Không dễ để trở thành một nhà thiết kế web, nhưng thế giới cần có tài năng và việc dạy cho bản thân những khái niệm cơ bản này chưa bao giờ dễ dàng hơn thế.
Học ví dụ tốt nhất về các trang web có yếu tố trang bạn thích. Xe lửa mắt của bạn để nhận ra các mối quan hệ, và bạn sẽ nhanh chóng phát triển, xây dựng các kỹ năng cần thiết để nhân rộng những mối quan hệ trong công việc của bạn.
