Layout content

1
CÁC QUY T?C THI?T K? LAYOUT CONTENT Principles
to design layout content

• Prepared by Phuc Thinh Vo
• DBA Researcher-UNP

2
Design Flow

• Verbal Flow - con du?ng th?c hi?n khi d?c van b?n
  trên trang
• Visual Flow - con du?ng th?c hi?n khi nhìn vào
  hình ?nh và d? h?a trên trang
• (Lisa Graham, Basics of design)

3
Các nguyên lý co b?n

• Trong ti?ng Anh h? ch? Latin ngu?i ta d?c t?
  trái sang ph?i và trên xu?ng du?i
• Các nguyên t?c d? làm cho van b?n tr? nên d? d?c
• Phát tri?n phong cách typographic nh?t quán -
  Nh?t quán v?i vi?c b?n s? d?ng size, face và
  color ch?n font ch? d? d?c
• Các nguyên t?c c?a s? g?n gui - Ð?t tiêu d? g?n
  v?i van b?n d?c gi? thích, d?t chú thích g?n các
  hình ?nh, . t? ch?c các y?u t? van b?n c?a b?n
  d? nó rõ ràng v?i nh?ng gì dang di?n ra
• Ð?t d? r?ng c?a c?t - Không làm c?t d? r?ng ho?c
  quá h?p s? làm c?n tr? vi?c d?c
• Nh?t quán chi?u cao dòng c?t dòng

4
Ví d?
5
C?i thi?n Visual Flow

• Dòng ch?y th? giác t? nhiên cho ngu?i xem là m?t
  mô hình ch?"S" ngu?c
• Nhi?u hình ?nh có m?t hu?ng. M?t mui tên, m?t tr?
  tay, m?t m?t nhìn v? m?t hu?ng. m?t c?a b?n s?
  tang t?c d? ho?c làm ch?m
• S? d?ng các chi?u c?a hình ?nh d? ki?m soát t?c
  d? và hu?ng c?a dòng m?t
• T?o rào c?n khi b?n mu?n d?o ngu?c hu?ng m?t
• T?o các du?ng m? d? cho phép di chuy?n d? dàng
  thông qua các thi?t k? c?a b?n
• S? d?ng màu s?c và hình d?ng tuong ph?n d? kéo m?t

phong cách typographic nh?t quán và m?t s? b? trí
m?ng lu?i giúp duy trì các pattern và tang cu?ng
dòng ch?y c?a trang web c?a b?n .
6
Gutenberg Diagram

• So d? Gutenberg chia b? c?c thành 4 góc ph?n tu
• Khu v?c quang h?c chính y?u n?m trong d?nh trái
• Ph?n ít du?c chú ý nhi?u nh?t n?m trên góc ph?i
• Ph?n dích d?n n?m ? góc du?i bên ph?i

7
Z-pattern layout

• Ngu?i d?c s? b?t d?u trong top / trái, di chuy?n
  theo chi?u ngang d? d?u / ph?i và sau dó theo
  du?ng chéo d? phía du?i / ph?i tru?c khi k?t thúc
  v?i m?t chuy?n d?ng ngang phía du?i / ph?i.
• Mô hình Z - mô hình dôi khi du?c g?i là mô hình S
  ngu?c

8
F-pattern (Jacob Nielsen)

• Thông tin quan tr?ng nên du?c d?t trên d?u trang
  c?a các thi?t k?
• Thông tin ít quan tr?ng hon du?c d?t d?c theo
  c?nh trái c?a thi?t k? thu?ng t?i các di?m c?nh
• Ngu?i d?c không d?c tr?c tuy?n mà h? quét m?t .

9
Ðang bài

• 1. Ð? dài c?a m?i bài vi?t d? dài bài vi?t nên
  ng?n g?n, súc tích. Các bài vi?t nhu v?y thu?ng
  tuong tác và thu hút ngu?i d?c r?t cao và ngu?c
  l?i.2. Cân nh?c v? du?ng d?n (URL) rút g?n n?u
  d? nguyên du?ng d?n (URL) m?t cách d?y d? s?
  tuong tác du?c g?p 3 l?n so v?i du?ng d?n rút
  g?n.3. Khi nào th?c hi?n vi?c dang bài m?i
  thuong hi?u/ ngành có th?i gian dang bài nh?t
  d?nh trong ngày khác nhau. Sau 4PM các bài vi?t
  gi?m d?n.4. Nên dang bài vào ngày nào trong
  tu?n Nghiên c?u cho th?y 86 các bài vi?t du?c
  dang lên t? th? hai d?n th? sáu, trong dó th? nam
  và th? sáu tuong tác m?nh nh?t.

10
Th?i di?m dang bài

• Nghiên c?u cho th?y 86 các bài vi?t du?c dang
  lên t? th? hai d?n th? sáu, trong dó th? nam và
  th? sáu tuong tác m?nh nh?t. Tuy nhiên, còn tùy
  vào các ngành s? có ngày dang bài phù h?p.
• Ngành gi?i trí Uu tiên dang bài vào các ngày
  ngh? cu?i tu?n.
• Ngành truy?n thông Uu tiên dang bài vào th? sáu
  và th? b?y, không nên dang vào th? hai.
• Ngành bán l? Hi?u qu? cao khi dang bài vào ch?
  nh?t, dang vào th? sáu là m?t ý tu?ng t?i.
• Ngành công nghi?p ô tô H?u h?t các ngành d?u
  r?t thích h?p dang bài vào ch? nh?t, riêng ngành
  công nghi?p ô tô không nên dang vào ngày này. M?c
  d? tuong tác gi?m 8 so v?i trung bình.
• Ngành công nghi?p th?i trang Ðang bài cao di?m
  vào th? nam, gi?m dáng k? vào th? sáu và cu?i
  tu?n.
• Công nghi?p th?c ph?m và d? u?ng Ð?t d?nh di?m
  khi dang bài vào th? ba, th? tu và th? b?y.
• Cham sóc s?c kh?e và làm d?p Tuy?t v?i khi dang
  vào th? nam.
• Ho?t d?ng th? thao Nên dang bài vào ngày ch?
  nh?t.
• Du l?ch Cao di?m nh?t là vào th? nam và th?
  sáu. Tham gia th?p nh?t là th? tu và cu?i tu?n.