Understanding the Z-Layout in Web Design
The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic “Z-Layout” isn’t going to be the perfect solution for each and every website out there, it’s certainly a layout that’s effective enough to warrant inclusion in any web designer’s arsenal of layout ideas.
Cấu trúc "Z" là một cách tốt để bắt đầu với bất kỳ một dự án web nào bởi nó giải quyết các yêu cầu cốt lõi đồi với bất kỳ một trang web nào một cách hiệu quả : Xây dựng thương hiệu, hệ thống phân cấp,cấu trúc, hay buttton .Trong khi ở cấu trúc dạng "Z" cổ điển sẽ ko pải là giải pháp toàn diện cho bất cứ trang web nào , nó chỉ là giao diện mang đủ hiệu quả để đảm bảo cung cấp cho bất kỳ một webdesigner về ý tưởng thiết kế .
Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.
This post marks the first in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we’ll also be looking at the “F” shaped pattern, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.
Introducing the Z-Layout - giới thiệu giao diện dạng Z
The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your “call to action” at the end. All along the path you can include bits of information that build up to the call-to-action. Let’s take a look at the diagram:
trc tiên cấu trúc giao diện dạng "Z" ( viết tắt Dạng "Z") đơn giản là đặt chữ Z trên trang . ở đó nội dung mà ng đọc có thể theo dõi theo hình dạng chữ Z . theo một cách rất tự nhiên mắt sẽ theo dõi từng phần của dạng Z, đó là mục đích mà ta gọi là "Call to action" - lệnh gọi hành động tới điểm cuối . tất cả các điểm theo đó bạn có thể bao gồm những thông tin mà chúng ta xây dựng nên để "Call to action" ,hãy theo dõi bảng cấu trúc bên dưới :
(mắt sẽ theo từ điểm 1- top of Z lần lượt tới 2,3 và 4 - end of Z đó là lộ trình của mắt ,tại các điểm đó sẽ đặt các call to action- nội dung hay button tại đó )
Notice that we’ve numbered the key points along the path – these represent the order in which a reader is likely to view the page content. Let’s see how this translates to an actual layout:
Now let’s overlay the Z-Diagram on top of the layout:
Simple, right? There’s certainly nothing complicated about this layout – but it quickly and effectively moves the eye from Point 1 to Point 4 in a logical order – concluding with a powerful call to action. There’s still a few things that we can do to spice this layout up though… so let’s add a few things to the design:
Chẳng có j phức tạp về giao diện này , nó thuận lợi và hiệu quả trong việc di chuyển mắt từ điểm 1 đến đ 4 theo cách logical hợp lý và theo mong muốn - và kết thúc với một lệnh gọi hành động - call to action-button .vẫn có một vài chỗ chúng ta cần làm để hoàn thiện hơn cấu trúc này ,trong đó :
- Background separation to focus the eye movement inside the framework of our design. BG chia cắt điểm tập trung của mắt trong khung .ở hình bên dưới là một ví dụ tốt và dễ hiểu khi tác giả sử dụng mầu sắc hợp lý tạo sự kết nối giữa phần banner lớn ở giữa và button - call to action nổi bật ngay bên dưới . ở đây cần sự khéo léo và kinh nghiệm thiết kế .^^
- A styled logo to grab the user’s attention at point #1. tạo ấn tượng cho logo tại điểm 1, nên tạo sự liên kết ngay từ đầu cho toàn trang bởi tại đ 1 này là nơi bắt đầu ng dùng bắt đầu nhìn. sẽ là nơi tạo ấn tượng ban đầu cũng như liên kết .
- A colorful “sign up” button at point #2: this will reinforce the desired eye movement. tạo mầu sắc cho nút " sign up" tại điểm 2 sẽ củng cố hướng di chuyển của mắt.
- A Featured Image Slider in the center of the page: this will separate the top section of the design from the bottom, and facilitate eye movement downward. tính năng ảnh trượt tự động hay banner ở trung tâm trang ,điều này sẽ phân chia phần trên và phần dưới cùng,và làm thuận tiện cho việc di chuyển hướng mắt nhìn xuống .
- Icons at point #3 and along the bottom axis: this will encourage “title scanning” as the eye moves to the call to action. tại điểm 3 và theo dọc xuống dưới, điều này sẽ khuyến khích việc nhìn lướt tiều đề tại đây .
- A big “call to action” at point #4 – thanks to the new background separation, this feature should stand out more.Một nút hay lệnh gọi hành động lớn và nổi bật tại điểm 4. giống như một cách chấm câu dễ hiểu và ấn tượng bằng mầu sắc và bố cục .
Here you can see that the new “sign up” button in the navigation stands out more; The “slider” that we’ve added to the leaderboard area helps keep the user’s attention within the center of the frame; The 2 icons next to the blocks of content in Point 3 also help to make them a bit more visually interesting. Again – this stuff is simple as it can be, but simple can be good when it comes to website design! You can layers in complexity as you please, but don’t overlook the power of a simple, effective layout.
Giờ bạn có thể thấy rằng nút "Sign up " mới trông nổi bật hơn, tính năng slide ở trung tâm luôn nổi bật và giữ cho ng dùng luôn ở trung tâm của trang . 2 biểu tượng ở block tiếp theo của nôi dung tại điểm 3 cũng khiến chúng thêm hấp dẫn.Loại giao diện này đẹp vì chúng đơn giản và chúng sẽ tốt nhất khi là một thiết kế cho website .Mặc dù bạn có thể làm các layer trở nên phức tạp hơn do yêu cầu hoặc do bạn muốn thế nhưng cũng sẽ ko làm nó giảm đi sức mạnh của một bố cục đơn giản và hiệu quả .
Why it Works
The Z-Layout certainly doesn’t need to be the final concrete solution for all sites, but as I mentioned before, it’s often a great jumping off point for any design project because it tackles the 4 of the big principles of an effective design:
Dạng Z chắc chắn ko phải là giải pháp cuối cùng cho tất cả các website, nhưng như đã nói ở trên,nó thik hợp với bất kỳ một dự án làm web nào bởi nó đã khắc phục 4 nguyên tắc lớn của một thiết kế hiệu quả đó là
- Branding- Xây dựng thương hiệu
- Hierarchy - Hệ thống phân cấp
- Structure - Cấu trúc
- A Call to Action- Các button hay lệnh gọi hành động
It works because most Western readers will scan a site the same way that they would scan a book – top to bottom, left to right. From this simple foundation you can pretty much go anywhere: Add multiple calls to action, shrink the height of the Z, extend it, do whatever you’d like that makes sense to the goal of the site.
Nó đc tạo ra dựa trên thói quen đọc của hầu hết ng đọc phương tây việc lướt một trang web giống như việc họ đọc một q/sách theo lộ trình - từ trên xuống dưới, từ trái sang phải .Từ nền tảng cơ bản này bạn có thể dùng cho việc thiết kế web : Thêm các tính năng liên kết hành động, thu nhỏ chiều cao dạng Z, hay mở rộng nó, làm tất cả những j bạn muốn để tạo ra mục đích của trang .
Let’s take a look at a few great site designs that use the Z-Layout as the basic structure. One thing you’ll want to note in these examples is how the z-layout is able to adapt. The Call to Action may not always be the same (some sites may want to drive you to their portfolio more than they want to you “Sign Up”); the content along the path may look markedly different than our example. The thing to notice is how the storytelling aspect is carried across: 1, 2, 3, Action! By moving the eye along the Z-Path, the chances that a viewer will end up doing what you want them to do is increased.
Hãy xem một vài ví dụ bên dưới để hiểu thêm về dạng Z như một cấu trúc cơ bản . một điều mà bạn muốn note ra trong những ví dụ này là làm cách nào dạng Z có thể phù hợp .Các nút có thể ko luôn ở cùng điểm ( ở một vài trang có thể muốn lái bạn tới portfolio hơn là muốn bạn đăng nhập -Sign up ) ; nội dung bên dưới có thể khác biệt rõ ràng hơn với ví dụ trên của chúng ta. Điều chú ý là làm sao để kể câu chuyện về diện mạo đc thực hiện qua từng bước 1,2,3, rồi hành động ! Bằng cách di chuyển mắt theo dạng Z, khả năng của bạn sẽ cải thiện bằng dạng Z bạn sẽ cho ng xem cơ hội để họ thực hiện và xem hết những điều bạn muốn họ thấy .
While you view these examples, try to find the Z-path that the designer wants you to follow.
Examples of the Z-Layout in Action
Evernote looks complex at first glance, but a closer inspection reveals a z-path ending with the “download” button.
Much simpler, the Daina Reed site delivers a couple quick bits of information, then prompts a “Get in Touch” action.
The path on CodeMonkey starts at the logo and ends on “Get Started”. chú ý các phần ở Codemonkey bắt đầu bằng các logo biểu tượng và kết thúc bằng "get started ".các nút call to action đều nổi bật ở phần góc phải và luôn tạo ấn tượng như một nốt chấm hết nhưng thực ra là bắt đầu của một thông tin khác .
It’s a bit harder to see here because of the duo-chrome palette, but the z-layout creates the general framework.
This example ends with a bright, bold price tag. ở ví dụ này kết thúc bằng một bảng giá nổi bật và đậm .
Probably one of the clearest uses of the Z-Layout, the Blue Acorn design hits each point along the path.
Campaign Monitor’s design mixes up the layout, but the 1, 2, 3, 4 steps are all intact.
Caveats Worth Mentioning những chủ để cần đề cập đến
It’s important to note that the Z-Layout isn’t the only layout paradigm that’s out there. Heck, there are about as many layouts as there are letters in the alphabet. The Z-Layout is one of the principle layouts because it’s so simple to use as a foundation, but you’ll always want to trust your instincts when it’s time to make a final layout decision.
Điêu quan trọng nhất cần lưu ý là giao diện Z ko chỉ là giao diện duy nhất . Có rât nh về các dạng giao diện như các kiểu chữ cái Alphabet . Dạng Z là một trong những giao diện cơ bản bởi nó đơn giản để dùng như một nền tảng ,nhưng bạn sẽ luôn muốn sử dụng nó như một kiểu bản năng khi đây là lúc cần tạo một phiên bản giao diện cuối cùng .
…Regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page.
... không cần chú ý tới bất kỳ giao diện rõ ràng nào, người xem chỉ chú ý tới yếu tố đầu tiên tại điểm to nhất, sáng nhất, và có độ tương phản lớn nhất trên trang web ...
There have been a bunch of interesting studies done on eye-tracking that suggest trying to predict eye-movement across a website is about as erratic as sending 1,000 kids into a candy store. Several studies have also shown that the “F” shaped layout (which we’ll be reviewing next in this series) is more effective at controlling a viewer’s eye movement across a page. The simple truth is that, regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page. Keep this in mind; if your goal is to guide a viewer through the Z-Layout, don’t give them any more opportunity to be distracted along the way than they already have.
có một loạt các nghiên cứu thú vị đc thực hiên trên viêc theo dõi mắt di chuyển trên trang web như việc gửi 1000 đứa trẻ vào một của hàng kẹo ^^ . Một vài sinh viên cũng sáng tạo ra dạng "F"( dạng chúng ta có thể xem trong phần tiếp theo ) là dạng hiệu quả hơn để điều khiển mắt ng nhìn trên trang web .Sự thật đơn giản là đây , không cần chú ý tới bất kỳ giao diện rõ ràng nào, người xem chỉ chú ý tới yếu tố đầu tiên tại điểm to nhất, sáng nhất, và có độ tương phản lớn nhất trên trang web .hãy giũ điều này trong tâm trí và nếu mục đích của bạn là dẫn một ng xem qua dạng Z. thì đừng làm bất kỳ điểu j để họ phân tâm khỏi cách họ đang có .
Where the Z-Layout truly shines is in design projects where simplicity and a call-to-action are the most important principles. Trying to force a Z-Layout on a complicated content structure probably won’t work well, but allowing the Z-pattern to form a framework for a very basic site can bring a sense of order that can help increase your conversion rate.
Nơi dạng Z thực sự tỏa sáng trong một dự án thiết kế nơi đơn giản và button - call to action là công thức đơn giản nhất .Cố gắng để buộc một giao diện Z trên một nội dung có cấu trúc phức tạp hầu như sẽ không hoạt động tốt, nhưng cho pép cấu trúc dạng Z để hình thành khuôn khổ cho một site cơ bản có thể mang tới một cảm giác của .
Check back soon for the next post in this series!
Oh! Check out a list of stock-templates that use the Z-Layout here.
Không có nhận xét nào:
Đăng nhận xét