One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works. Visual direction is controlling the eye movement of the user; this can be achieved by carefully selecting your images and by well-placed and aligned design elements.
1 trong những bí mật lớn của thiết kế là học để làm sao thu hút hướng thi giác của ng xem .nguyên tắc này thường bị bỏ qua thậm chí cả ng nh kinh nghiệm nhất.hôm nay chúng ta sẽ xem xét kỹ hơn về cách hoạt động. hướng thị giác đó là kiểm soát hướng di chuyển của mắt ng dung web, điều này có thể đạt đc bằng cách cẩn thận lựa chọn các hình ảnh và cá yếu tố tke tốt đc đặt thẳng hàng .
It is greatly established that the default eye movement throughout the page (in an LTR – Left to Right – layout) is from the top left towards the bottom right as the image illustrates:
đó là việc thiết lập các chuyển động mặc định cho mắt qua giao diện. từ trái qua phải tren giao diện,trong hình minh họa bên dưới :
However; this can’t be further from the truth, by arranging the composition elements in a certain way, a designer can control and force the movement of the viewer’s eyes in and around the layout of the design. For example, the eye will travel along an actual path such as solid or dotted line, or it will move along more subtle paths such as from large elements to little elements, from dark elements to lighter elements, from color to non-color, from unusual shapes to usual shapes, etc. Graduation of size, and repeated shapes and size of related elements subtly leads the eye as well.
tuy nhiện ko hoàn toàn đúng , mà bằng cách sắp xếp các yếu tố thành phần bằng 1 vài cách, 1 ng thk có thể kiểm soát và lực chuyển động của mắt ng nhìn trong và xung quanh 1 thk giao diện .VD, mắt sẽ di chuyển theo dọc 1 chiều dẫn thực tế như các solid hoặc các chấm, hay chúng sẽ di chuyển từ những yếu tố to hơn đến nhỏ dần, từ yếu tố tối đến yto sáng,từ mầu sắc đến ko mầu, từ những hình dạng bất thường tới những hình dạng bt... kích thước và hình dạng của kích thước, các hình dạng lặp lại, và các yếu tố liên quan tới kích thước là yếu tố dẫn dắt mắt rất tốt .
1. Controlling Directions with Images - kiểm soát các chiều hướng với hình ảnh .
Images can easily control how your clients view your design, below are some explicit examples of directional images that can either be used as part of your design or in the content to guide visitors around the page:
Of course it’s pretty obvious which direction these images are pointing to, however many images may not be as clear, take a look at these other examples:
tất nhiên điều này khá là rõ ràng cái mà những hình ảnh này hướng tới , tuy nhiên nh hình ảnh có thể ko rõ ràng, hãy xem những vd khác :
2. Leading the Eye - dẫn dắt mắt
This is one of the top mistakes designers and content editors fall into, as a rule, never make your images facing outward from your page, images (especially faces and eyes) should be looking towards the center of your design.
đầy thường là 1 trong những lỗi thường gặp của ng tk và những ng làm nội dung mắc pải, như 1 quy luật, hãy chú ý tới hướng mắt và mặt hướng tới ,và điểm hướng tới nên là phần trung tâm của trang layout đó .
Take a look at these examples from both the CNN and BBC websites:
In the BBC example, the 2 top left images are both looking away from the center of the page, this leads to “not-seeing” important information along the default path as the image illustrates:
- You start at the top left as the usual default location - điểm mặc định để bắt đầu là ở trên góc trái.
- Moving along the default path you encounter the first image looking outwards, so your vision automatically moves outside of the page ( trong hình minh họa ở trên thì việc di chuyển mắt là hướng ra ngoài trang web )
- Your eyes start to look back towards the center of the page ( sau đó mắt sẽ tự động hướng lại vào trong giao diện theo hướng trung tâm)
- You encounter another image looking outwards making you vision again move outside of the page (và lại bắt gặp 1 ảnh có hướng nhìn ra ngoài giao diện, làm mắt ta lại hướng ra ngoài giao diện )
- At last your eyes start to move towards the page center, however there is a large “blind-spot” created by the image placement and direction marked by the “?”(và cuối cùng thì mắt bạn lại bắt đầu hướng vào trugn tâm trang, tuy nhiên có những "điểm mù" lớn đc tạo bởi việc chuyển ảnh và hướng
Now compare this next “fixed” version of the BBC homepage to the original one above:
Looking at this version you will notice that your eye does not move outside of the page, the people’s faces looking inward help you look in the same direction towards the center of the page.
nhìn vào trong bản này ,bạn sẽ chú ý tới việc mắt của bạn ko pải đi chuyển ra ngoài trang, khuôn mặt của nguoi trong ảnh giúp bạn nhìn theo 1 huong đó là hướng vào trung tâm trang.
3. Forms - các dạng
Take a look at this example showing 2 ways to align labels with your form fields which can greatly affect how easy it is for users to fill out that form:
hãy xem vd này thể hiện 2 cách thằng hàng các vùng text cái mang hiêu quả lớn.làm sao để nó dễ dàng để điền những thông tin vào các dạng này .
On the left we have top aligned labels which are faster and easier to fill out than left or right aligned labels (on the right). This is because top aligned labels require half as many eye movements than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.
ở dạng bên trái ở trên,chúng ta có những nhãn thẳng hàng cái nhanh và dễ dàng để điển các thông tin hơn các nhãn thằng hàng trái và phải( mẫu bên phải) điêu này là bởi các nhãn thẳng hàng yêu cầu mắt di chuyển nh hơn tới các nhãn trái phải.
Placement not only controls how the eye moves, but contributes to making a design easier to use, even if on a subconscious level.
vị trí điểm đặt ko chỉ kiểm soát làm sao để mắt hướng tới, nhưng góp phần khiến 1 thk dễ dùng ,thậm chí ngay cả ở mức độ tiềm thức.
4. Design Direction - hướng thiết kế
The element of direction can have a powerful influence on the mood of a design, but making a conscience decision about the dominant direction in a design can have a noticeable effect on the atmosphere of the work.
Sometimes the image or layout will dictate the dominant direction. Sometimes it will allow you to impose a direction on it.
các yếu tố hướng có thể mang sức mạnh ảnh hưởng lên tinh thần của 1 tk, nhưng (đ dịch đc )hướng đi chủ đạo trong tk có thể có tác động đáng chú ý lên toàn tk .
The clear horizontal lines in the below designs give a feeling of stillness, stability, tranquility and calmness.
các đường chân trời rõ ràng trong tk phía dưới mang lại cảm giác yên tĩnh, thanh bình, và bình tĩnh
In the second group below, the diagonal placement of elements reinforce the feeling of movement and action.
trong nhóm thứ 2 bên dưới, các vị trí đường chéo của các yếu tố tăng cường cảm giác chuyển động và hành động .
The third group has a dominant vertical direction which adds a static orderly influence to what might be otherwise random, also gives a feeling of alertness and formality.
trong nhóm thứ 3, có 1 hướng chiếm ưu thế thẳng đứng cái mà ảnh hưởng tới trật tự tĩnh cái mà ko pải ngẫu nhiên , cũng mang tới cảm giác của sự tỉnh táo và quy cách .
The same change in character can be seen in these three photographs. The subject is the same in each, the change in directional emphasis creates a different atmosphere in each image.
The vertical emphasis in the first image gives a feeling of orderly formality the second horizontal emphasis feels calm and stable while the third diagonal emphasis feels active and animated.
sự nhấn mạnh theo chiều dọc của ảnh đầu tiên cho một cảm giác về hình thức có trật tự,sự nhấn mạnh theo chiều ngang thứ 2 cho cảm giác về sự bình tĩnh và ổn định trong khi nhấn mạnh chéo thứ 3 cảm thấy hoạt động và hoạt hình .
Conclusion
Always keep in mind how you want your audience to feel, set the mood by choosing the direction of your design, then enforce this by choosing the correct content layout and image selection.
When it comes to forms or text based designs, understanding how your visitors will move their eyes around a design will greatly enhance the usability of your work.
source : webdesign.tutsplus.com
Không có nhận xét nào:
Đăng nhận xét