Cách tạo Mẫu F và Z bằng HTML và CSS | Học trực tuyến CNTT, học lập trình từ cơ bản đến nâng cao

Cách tạo Mẫu F và Z bằng HTML và CSS

Chia sẻ kiến thức 16/06/2022

Thiết kế trang web của bạn nên hướng đến việc dẫn dắt khách truy cập theo một hướng nhất định. Các kỹ thuật phân cấp trực quan dưới đây cung cấp một nền tảng để xây dựng ứng dụng web của bạn.

Trong thời đại quá tải về nội dung, thật khôn ngoan khi tập trung vào việc làm cho trang web của bạn dễ nhìn và sử dụng hệ thống phân cấp trực quan để thu hút khách truy cập. Thiết kế của bạn nên xem xét màu sắc, độ tương phản, khoảng cách trắng, căn chỉnh và các mẫu quét trang… Các mẫu F và Z là một số mẫu phổ biến nhất và dễ thực hiện trong ứng dụng của riêng bạn.

Vì vậy, không cần thêm bất kỳ lời khuyên nào nữa, hãy xây dựng các mô hình F và mô hình Z tùy chỉnh từ đầu.

Thiết kế mô hình F với HTML và CSS

Theo mô hình F, khi khách truy cập bắt đầu đọc một trang, chuyển động mắt của họ bắt đầu từ góc trên bên trái và lướt qua trang cho đến khi họ chuyển đến một thứ gì đó hấp dẫn. Nếu trang web của bạn có nhiều nội dung, mô hình chữ F là cách phù hợp.

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
     href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
     rel="stylesheet"
   />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
     href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
     rel="stylesheet"
   />
   <link rel="stylesheet" href="f-style.css" />
   <link rel="stylesheet" href="general.css" />

   <title>F and Z-Patterns Using HTML and CSS</title>
 </head>
 <body>
   <header>F-Pattern Using HTML and CSS</header>
   <section class="container padding">
     <div class="logo">Design Patterns</div>
     <div class="text-heading-primary">
       Most users follow the F-pattern for content heavy websites.
     </div>
     <div class="text-heading">
       Lorem ipsum dolor sit amet consectetur adipisicing elit vitae incidunt
       similique!
     </div>

     <div class="grid-2-cols">
       <div class="text">
         <li>
           Nobis assumenda, in recusandae quam laborum quibusdam sint iusto
           excepturi omnis earum aspernatur magnam maiores cum facilis alias
           quo id. Dolorem, expedita!
         </li>
         <li>
           Facilis obcaecati fugiat libero quas quod animi rerum
           exercitationem, accusantium autem dicta incidunt, qui voluptatem,
           recusandae nobis inventore sunt accusamus neque nam?
         </li>
         <li>
           Officia deserunt assumenda aut temporibus eligendi obcaecati
           similique totam iste aliquid molestias rem modi, inventore ex
           voluptatem repellendus voluptas animi? Suscipit, reprehenderit?
         </li>
       </div>
       <div class="css-image img-01"></div>
     </div>

     <div class="cta">
       <button>Start learning today</button>
       <button>Sleeping, would start tomorrow!</button>
     </div>
   </section>
 </body>
</html>

CSS chung (chung cho cả hai mẫu)

Vì chúng tôi đang xây dựng cả hai mẫu F và Z, nên CSS này là chung cho cả hai.

* {
 padding: 0px;
 margin: 0px;
 box-sizing: border-box;
}

html {
 font-size: 62.5%;
}

body {
 font-family: 'Rubik', sans-serif;
 line-height: 1;
 font-weight: 400;
 color: #555;
 font-size: 1.8rem;
}

header {
 font-size: 4.4rem;
 text-align: center;
 padding: 0.8rem;
 background: #e78229;
 color: #fff3e8;
}

.container {
 max-width: 130rem;
 background-color: #fff3e8;
 margin: 0 auto;
}
.padding {
 padding: 3.6rem;
}

.css-image {
 height: 24rem;
 width: 24rem;
 background-color: #e78229;
 justify-self: center;
 position: relative;
}

Tạo kiểu bằng CSS

Bây giờ, hãy áp dụng CSS đặc biệt để tạo F-pattern.

.logo {
 font-family: 'Pacifico', cursive;
 font-style: bold;
 font-size: 4.4rem;
 margin-bottom: 5.6rem;
}

.text-heading-primary {
 font-size: 3.6rem;
 margin-bottom: 2.4rem;
 color: #e78229;
 font-weight: 600;
}

.text-heading {
 font-size: 2.2rem;
 margin-bottom: 5.6rem;
 font-style: italic;
}

.grid-2-cols {
 display: grid;
 grid-template-columns: 1fr 1fr;
 padding: 2.4rem;
}

.text {
 display: grid;
 gap: 3.6rem;
 margin-bottom: 4.8rem;


}
.img-01 {
 border-radius:  5% 40% 40% 40%;
}

button {
 font-family: 'Rubik', sans-serif;
 font-size: 1.8rem;
 color: #555;
 font-weight: 600;
 padding: 2.4rem;
 display: inline-block;
 margin-right: 5rem;
 border: none;
 border-radius: 15px 15px 15px 15px;
 background-color: #ffc18b;

}

Đầu ra:

Như bạn có thể thấy, những thứ đầu tiên mà mắt bạn hướng đến là tiêu đề và tiêu đề phụ. Sau đó, bạn có thể quét các gạch đầu dòng và thấy các nút Kêu gọi hành động (CTA). Hình ảnh hoạt động như một yếu tố bổ sung, khác biệt. Sắp xếp một trang web bằng cách sử dụng mô hình F đảm bảo rằng khách truy cập đi qua một thứ tự trực quan cụ thể khi đến nút CTA.

Thiết kế Z-Pattern sử dụng HTML và CSS

Hình chữ Z bắt chước chuyển động mắt tiêu chuẩn để quét các mục. Nó hoạt động tốt nhất cho các trang có nội dung tối thiểu. Ý tưởng là hình thành một hệ thống phân cấp hình ảnh zig-zag để dẫn khách truy cập qua một trang. Khách truy cập bắt đầu quét ở trên cùng bên trái và quét theo chiều ngang. Khi quét tự nhiên về phía dưới bên trái, chúng tạo thành một đường chéo và quét theo chiều ngang, theo mô hình chữ Z.

Xây dựng mô hình chữ Z từ đầu:

HTML

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
     href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"
     rel="stylesheet"
   />
   <link rel="stylesheet" href="z-style.css" />
   <link rel="stylesheet" href="general.css" />
   <title>F and Z-Patterns Using HTML and CSS</title>
 </head>
 <body>
   <header>Z-Pattern Using HTML and CSS</header>
   <section class="container grid-2-cols">
     <em><!-- section-01 -->em> 
     <div class="text">
       <div class="text-number">01</div>
       <div class="text-heading">Minimal copy? Use the Z-Pattern right away!</div>
       <div class="text-description">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
         voluptatum ad, impedit ab consequatur porro harum a distinctio
         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,
         earum labore esse culpa?
       </div>
     </div>
     <div class="css-image img-01"></div>

     <em><!-- section-02 -->em> 
     <div class="css-image img-02"></div>
     <div class="text">
       <div class="text-number">02</div>
       <div class="text-heading">Minimal copy? Use the Z-Pattern right away!</div>
       <div class="text-description">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum
         voluptatum ad, impedit ab consequatur porro harum a distinctio
         accusantium reiciendis rerum, vel ut blanditiis excepturi nostrum,
         earum labore esse culpa?
       </div>
     </div>
   </section>
 </body>
</html>

Tạo kiểu bằng CSS

Cách dễ nhất để tạo Z-pattern là sử dụng lưới CSS có hai cột.

Lưu ý : Đừng quên bao gồm tệp general.css được đề cập trong phần F-pattern (nó chung cho cả hai mẫu).

.container {
 max-width: 130rem;
 background-color: #fff3e8;
 margin: 0 auto;
}

.grid-2-cols {
 display: grid;
 grid-template-columns: 1fr 1fr;
 padding: 5rem;
 gap: 5.2rem;
 justify-items: center;
 align-items: center;
}

.text {
 max-width: 45rem;
}

.text-number {
 color: #ccc;
 font-size: 8.6rem;
 font-weight: 600;
 margin-bottom: 1.2rem;
}

.text-heading {
 font-size: 2.4rem;
 font-weight: 600;
 margin-bottom: 3.4rem;
}

.css-image {
 height: 24rem;
 width: 24rem;
 background-color: #e78229;
 justify-self: center;
 position: relative;
}
.img-01 {
 border-radius: 5% 40% 40% 40%;
}
.img-02 {
 border-radius: 40% 5% 40% 40%;
}

Đầu ra:

Như bạn có thể thấy, Z-pattern hoàn toàn phù hợp cho các trang web có nội dung nhẹ nhàng. Hệ thống phân cấp trực quan được xây dựng theo mô hình chữ Z và khoảng cách trắng thích hợp đủ mạnh để thuyết phục khách truy cập trang web hành động.

Cải thiện trải nghiệm người dùng bằng cách sử dụng F và Z-Patterns

Việc tìm hiểu hành vi của người dùng và dự đoán động thái tiếp theo đòi hỏi nhiều nghiên cứu, nhưng cuối cùng nó cũng được đền đáp. Kiểm tra một số trang web phổ biến và nghiên cứu cách họ đã thiết lập nó để dẫn khách truy cập qua trang. Có thể bạn sẽ tìm thấy các mẫu F và Z nhiều lần.

Mặc dù những mẫu này rất tốt để cải thiện trải nghiệm người dùng, nhưng chúng không phải là phương pháp duy nhất. Thiết kế lấy người dùng làm trung tâm có thể là giải pháp bạn cần để cắt giảm các phàn nàn của người dùng và cải thiện các đánh giá tích cực.

Vân Nguyễn

Dịch từ: https://www.makeuseof.com/build-f-z-patterns-using-html-and-css/

ĐĂNG KÝ TƯ VẤN HỌC LẬP TRÌNH TẠI FUNiX

Bình luận (
0
)

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        
Chat Button
FUNiX V2 GenAI Chatbot ×

yêu cầu gọi lại