• fans
  • 1036 reader
  • followers
Tìm hiểu F Layout
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: Cả đời

Mình đã từng giới thiệu về Z Layout, trong bài hôm nay thì mình sẽ hướng dẫn các bạn về công dụng, chức năng của F-Layout, đây là một trong những kiểu layout phổ biến đối với các thiết kế hiện đại ngày nay.

Thay vì hướng người xem đi theo những vị trì đã được xấp xếp sẵn như Z Layout. Thì F Layout lại đi sâu hơn vào việc tìm hiểu một cách có khoa học các thói quen chung của người dùng và đưa ra những mẫu thiết kế hợp lý. Trong bài này thì chúng ta sẽ tìm hiểu sâu hơn về nguyên tắc của F Layout, tại sao nó lại hữu dụng và làm cách nào bạn có thể tạo cho riêng mình một thiết kế theo nguyên tắc F Layout.

GIỚI THIỆU F LAYOUT

Dựa theo các nghiên cứu khoa học, bằng cách khảo sát và quan sát người lướt web, người ta nhận thấy rằng, người lướt web thường có xu hướng xem theo thứ tự như sau: trên cùng bên trái, sau đó chuyển động ngang về phía bên phải, đến cuối cùng, sau đó họ sẽ chuyển hướng xuống dòng phía dưới và cũng đọc từ trái sang phải. Cứ như thế thì họ sẽ tạo ra một mô hình theo dạng hình chữ F. Theo như hình vẽ mẫu phía dưới thì mắt người xem sẽ đi chuyển từ vị trí số 1 > 2 > 3 > 4.

Và cách dễ hình dung nhất là nó giống như các bạn đang đọc một quyển sách vậy, cứ đọc hết dòng này sẽ xuống dòng kế tiếp. Đối với 1 website thì người xem họ cũng lướt qua từng đối tượng 1 theo như trong mẫu trên. Và các đối tượng bên trái phía trên thường sẽ là những đối tượng quan trọng (logo, slogan, menu, bài viết). Các đối tượng phía phải thì thường ít quan trọng hơn (slide-bar, sponsor, ads,….)

Nếu như thiết kế với F Layout thì bạn sẽ có được những lợi thế sau:
- Nhãn hiệu, thương hiệu là những đối tượng đầu tiên được người xem chú ý đầu tiên.
- Các hình ảnh, tiêu đề, bài viết sẽ được chú ý nhiều hơn.

ĐƯA F -LAYOUT VÀO THIẾT KẾ

Bạn hãy xem một mẫu thiết kế trong 1 dự án mà mình đang thực hiện dang dỡ.

Và nếu như bạn nhìn vào thiết kế trên thì bạn sẽ đi theo nguyên tắc mà mình đã nêu lên ở trên. Và khi mình gán chữ F vào thì có thể dễ dàng thấy được tác dụng của thiết kế F Layout, khi vào web, theo thói quen, người xem sẽ xem qua logo của bạn trước, sao đó là các liên kết (1-2). Sau đó, người xem sẽ chuyển về đầu và chuyển sang dòng thứ hai, ở đây các bạn có thể để silder hoặc một mẫu quảng cáo gây chú ý cho người dùng. Tiếp đó, người xem sẽ xuống dòng dưới và các đối tượng phía bên trái (3) như thumbnail hình ảnh, title và mẫu tin ngắn gọn. Ở bên phải (4) thì là các box chứa menu, category, ads, social,… Và những đối tượng ở phía này ít được chú ý đến.

Khoảng các giữa các dòng trong F Layout có thể có chiều cao khác nhau, tuy nhiên các nhà thiết kế lại thích cho thiết kế của mình mỏng lại (tức khoản các giữa các dòng ngắn lại) nhằm tăng lên tầng số quét của người xem, tuy nhiên, thì cách này lại có thể gây ra tác hại là làm cho người xem bị choáng với lượng thông tin dầy đặc. Nhưng chúng ta lại có thể giải quyết việc đó bằng các sau một vài dòng thì chúng ta có thể thêm 1 break object (quảng cáo, hình ảnh vui nhôn, lạ mắt), mục đích là loại bỏ sự nhàm chán cho người xem. Ngoài ra, các đối tượng phía bên trái, chúng ta cũng có thể thiết kế sao cho bắt mắt, nhằm gây sự chú ý của người xem.

ƯU VÀ KHUYẾT ĐIỂM

Z Layout có hiệu quả không? Câu trả lời là CÓ, nếu như các bạn để ý thì hầu như các blog hiện này điều được thiết kế với F Layout (Izwebz cũng thuộc F-Layout)

Và tại sao nó lại được yêu thích đến thế? Bởi vì đơn giản nó là thói quen từ nhỏ khi chúng ta đọc sách, trái sang phải, trên xuống dưới. Nên rất dễ dàng và thoải mái cho người xem.

Một điểm tốt nhất ở F-Layout đó chính là SEO, chính các tiêu đề và nội dung ngắn gọn bài viết rất tốt cho SEO.

Tuy nhiên, nó cũng có những nhược điểm là:
- Điều bắt buộc là nội dung nóng phải nằm ở trên.
- Người dung ko đọc chi tiết chữ, mà chỉ xem hình và tiêu đề, do đó, các hình ảnh và tiêu đề phải được chọn lọc kĩ càng.

Chú ý: Nội dung là chủ chốt để giữ chân khách hàng, slice-bar và các đối tượng bên phải chỉ là phụ.

THIẾT KẾ MẪU
1/ DesignSnack
2/ Phototuts
3/ CreativeSessions

Võ Minh Mẫn Website facebook twitter user_email

Nghề chính là chém gió, quăng bom và ném lựu đạn. Nghề phụ là cắt cỏ, chém chuối, cưa cây......

  • huy

    hay, thank Mẫn

  • Đỗ Thành Nguyên

    còn kiểu layout nào không huynh

  • http://www.hopmau.vn/author/simpleman/ Hưng simpleman

    Giờ mình đã biết thói quen người dùng lướt web như vậy gọi là F layout

  • http://www.sangtaohoanmy.com tungmnt

    Hay quá! Mấy cái này đi học không có được học qua. Thank rất nhiều.

  • http://danangdesign.com Mrdollar

    Cám ơn đã chia sẽ những thông tin hay và bổ ích, mình học được rất nhiều từ izwebz.
    Thanks!

  • http://keyduc.info keyduc

    Hay, trước h mình chỉ biết đến Z layout :D
    cảm ơn tác giả

  • http://7am.vn jasminela

    layout này có vẻ không phù hợp cho web doanh nghiệp nhỉ

  • http://cancaucom.com Can Cau Com

    Có vẻ như tác giả quên đề cập đến trường hợp nếu người thiết kế đang làm trang web cho một khách hàng sống ở các nước Ả Rập – nơi mà người ta đọc / viết từ phải sang trái liệu F layout có còn áp dụng được không hay phải lật ngược chữ F này lại theo hướng horizontal flip.

  • http://anhhao.com AnhHao

    Đón chờ những bài viết tiếp theo của izwebz

  • http://forum.szone.vn Lê Hoàng Nhất Kha

    lại một thứ để mở mang kiến thức :x

  • RynAki

    Rất hay cậu à , mô hình F-layout này tớ cũng đang áp dụng :D

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives