Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Đặc điểm của thiết kế phẳng (Flat Design) là gì?

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi jinbewon, 3/6/13.

Lượt xem: 8,495

  1. jinbewon Thành viên cấp 2

    Thiết kế phẳng (Flat design) tiếp tục là một xu hướng nổi bật, được nhiều người quan tâm và yêu thích. Để có một cái nhìn rõ nét hơn về thiết kế phẳng, hãy cùng phân tích 5 đặc điểm chính của thiết kế phẳng nhé!
    1. Không hiệu ứng
    Thiết kế phẳng giống như cái tên của nó, mọi thứ đều ở dạng 2 chiều – nằm trên một mặt phẳng. Thiết kế phẳng không có trang trí hay thêm thắt những hiệu ứng như đổ bóng, dập nổi, góc xiên, độ dốc hay bất kỳ yếu tố nào để tạo độ sâu… Mọi yếu tố từ hộp, khung ảnh cho đến nút chọn… đều mạnh mẽ, rõ ràng.
    [​IMG]

    Không có gì được thêm vào để làm cho các chi tiết trông thật hơn, sống động hơn. Sơ đồ thiết kế trong Flat design cũng giống như các phong cách khác, nhưng mặt bằng không chồng chéo lên nhau mà có sự phân chia rõ ràng.
    Nếu không sử dụng hiệu ứng như vậy thì điều gì khiến thiết kế phẳng trở nên hấp dẫn? Thiết kế phẳng mang đến một cái nhìn và cảm giác riêng biệt. Nó dựa trên trật tự, sắp xếp các chi tiết thiết kế để người đọc dễ hiểu, dễ đọc và tương tác tốt hơn. Trong khi ngày càng nhiều các trang web sử dụng đặc điểm của thiết kế phẳng thì các ứng dụng trên điện thoại cũng rất ưa chuộng xu hướng này. Với màn hình nhỏ, chỉ có vài nút chọn thì một thiết kế phẳng là lựa chọn khá dễ sử dụng.

    [​IMG]

    2. Chi tiết đơn giản
    Thiết kế phẳng sử dụng nhiều yếu tố giao diện đơn giản, chẳng hạn như các nút và icon. Nhà thiết kế thường dùng những hình dạng đơn giản, chẳng hạn như hình chữ nhật, hình tròn hoặc hình vuông… đứng một mình. Các đường bao quanh những hình dạng này có thể góc cạnh hoặc có độ cong.
    [​IMG]

    Thiết kế phẳng khiến cho người dùng dễ dàng click. Vì vậy nhà thiết kế không cần nhiều lời giải thích trong thiết kế. Nhưng bạn đừng cho rằng thiết kế phẳng là đơn giản và dễ thiết kế. Thiết kế phẳng cũng đòi hỏi nhà thiết kế phải suy nghĩ, tìm tòi, chọn lọc rất nhiều giống như các phong cách thiết kế phức tạp khác. Bạn có thể tham khảo bài viết bộ sưu tập thiết kế icon phẳng đẹp mắt để hiểu thêm về đặc điểm của thiết kế phẳng nhé.
    [​IMG]

    [​IMG]


    3. Tập trung vào Typography
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]

    Những chi tiết trong thiết kế phẳng đơn giản nên Typography (nghệ thuật font chữ) rất quan trọng. Font chữ cần phải phù hợp với toàn thiết kế, chẳng hạn như một font chữ dập nổi trông sẽ rất lạc lõng với một thiết kế đơn giản. Kiểu chữ nên đậm, không quá cầu kỳ. Bạn có thể chọn kiểu chữ là các phiên bản biến tấu từ kiểu chữ sans serif rất quen thuộc. Nội dung của câu chữ thường đi thẳng vào vấn đề. Những ai đã từng sử dụng qua giao diện của Windows Phone hoặc Windows 8 có thể dễ dàng nhận thấy điều này. Việc có thể xem trực tiếp thông tin ứng dụng mà không cần phải mở ứng dụng đó lên thực sự là trải nghiệm mới lạ và tiện dụng.

    4. Tập trung vào màu sắc
    Màu sắc rất quan trọng, chiếm một phần lớn sự thành công của thiết kế phẳng. Đặc điểm của thiết kế phẳng là dùng những tông màu sáng và dùng nhiều màu hơn các phong cách thiết kế khác. Màu sắc trong thiết kế phẳng có thể dùng để phân chia các khu vực rõ ràng, chẳng hạn như những hộp màu trong ví dụ dưới đây.
    [​IMG]
    [​IMG]
    Trong khi các thiết kế khác thường chỉ tập trung vào 2 đến 3 màu thì thiết kế phẳng có thể sử dụng từ 6 đến 8 màu. Sắc độ của màu trong thiết kế phẳng cũng rất sống động, Những màu của xu hướng retro như tím, xanh lá cây, xanh dương, màu hồng cam rất phổ biến.

    [​IMG]
    [​IMG]

    5. Khắc phục điểm yếu của thiết kế Skeuomorphic



    [​IMG]
    Skeuomorphic là phong cách thiết kế mô phỏng sao cho giống thật nhất có thể bằng cách sử dụng các hình ảnh dễ liên tưởng đến vật thể thực tế và áp dụng các hiệu ứng tạo độ sâu.
    Tuy nhiên, Skeuomorphic đã bộc lộ một số khuyết điểm như sau.
    - Giao diện đôi khi khó quan sát: Rõ ràng khi xem hình ảnh chiếc đồng hồ của Apple ở trên, chúng ta sẽ mất thời gian hơn so với loại đồng hồ số chỉ hiển thị số giờ và phút.
    - Tốn nhiều không gian màn hình thiết bị di động cho các trang trí không cần thiết: Thiết kế Skeuomorphic vốn đặt nằng tính hình ảnh với các trang trí bắt mắt. Hơn nữa việc xây dựng thiết kế cho phong cách này cũng gây nhiều khó khăn cho nhà thiết kế.
    - Hạn chế sự sáng tạo: Thiết kế Skeuomorphic vốn lấy hình mẫu là những vật ngoài thực tế. Vì vậy các nhà thiết kế không cần phải tưởng tượng nhiều về thứ mà mình định thể hiện mà chỉ nghĩ cách làm sao cho giống vật thật nhất có thể. Do đó, sẽ có thể xuấ hiện nhiều ý tưởng trùng lặp.
    - Việc áp dụng nhiều hiệu ứng trong thiết kế Skeuomorphic sẽ khiến các thiết di động chưa mạnh phần cứng, thời lượng pin hạn chế càng tốn nhiều tài nguyên hơn để thể hiện Skeuomorphic trên màn hình.
    Với sự đơn giản, thực tế và tương tác của mình, thiết kế phẳng hoàn toàn có thể khắc phục những yếu điểm của thiết kế mô phỏng.

    (Theo Designs.vn)

    ...
  2. bachloxo

    bachloxo Thành viên cấp 2

    cái theme cuối cùng là gì vậy nhỉ. nhìn đẹp gê.
  3. LeoWalker

    LeoWalker Thành viên cấp 1

    Rất có ích cho mình, cảm ơn thớt
  4. Trường Sơn

    Trường Sơn Thành viên cấp 2

    Lose Myselfjinbewon thích bài viết này.
  5. Lãng tử

    Lãng tử Mới đăng kí

  6. Lose Myself

    Lose Myself Thành viên cấp 2

    Ai biết site nào down free những icon kiểu này không :)
  7. HàVĩnhKỳ

    HàVĩnhKỳ Mới đăng kí

    Lose Myself : .google.com.vn/search?q=Flat%20icon%20pack&psj=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.47244034,d.bmk&biw=1280&bih=675&um=1&ie=UTF-8&hl=vi&tbm=isch&source=og&sa=N&tab=wi&ei=mqusUcvqHsKCrgf8_oHQBA#um=1&hl=vi&tbm=isch&sa=1&q=Flat+icon&oq=Flat+icon&gs_l=img.3..0i10.2734.3049.0.3336.3.3.0.0.0.0.92.271.3.3.0...0.0...1c.1.15.img.yk_6Cvav_wM&bav=on.2,or.r_cp.r_qf.&bvm=bv.47244034,d.bmk&fp=1eec3086fee6b4a4&biw=1280&bih=675

    Google kì diệu lắm bạn à =v=
    Lose Myself thích bài viết này
  8. orc

    orc Thành viên cấp 1

    Thiên về màu sắc vậy cần trình phối màu khá cao đây
    Cám ơn bài chia sẽ của anh nhé :D

Ủng hộ diễn đàn