Những lợi thế tương đối của thiết kế phẳng, thiết kế vật liệu và tính đa dạng là gì?


8

Tôi đã xem hướng dẫn của Google về điều này được gọi là "thiết kế vật liệu" và tôi đã theo dõi một số hướng dẫn. Tuy nhiên, tôi cũng thấy rất nhiều trang web sử dụng thiết kế phẳng: Twitter , CodecademyGitter - và đó chỉ là một số ít. Sau đó, có những cái sử dụng độ dốc CSS3, bóng tối, v.v. và hình ảnh chi tiết để thiết kế một trang web trông thật (sửa tôi nếu tôi sai, nhưng đây không phải là sự sai lệch?), Như trang chủ cho Twitter Bootstrap 2 .

Theo những gì tôi hiểu, thiết kế phẳng giúp giảm tải cho lưu lượng truy cập di động.

Những lợi thế nào (về tốc độ / UX / v.v., đặc biệt) để mỗi sản phẩm cung cấp cho nhau?


Tôi nghĩ rằng đây là một câu hỏi thú vị để đưa lên. Suy nghĩ ban đầu của tôi là các thiết kế đa dạng có thể có nhược điểm về tốc độ nếu chúng phụ thuộc nhiều vào hình ảnh. Tôi cho rằng đó là những gì bạn muốn nói với thiết kế phẳng giúp giảm tải lưu lượng truy cập di động. Nhưng như một điểm đối lập, một thiết kế đa dạng vẫn có thể được thực hiện với nhiều tính năng có sẵn trong CSS3, vì vậy tôi sợ câu trả lời cho dù cái này hay cái kia có thuận lợi về tốc độ sẽ là "đôi khi có, đôi khi không"
JohnB

@ John thậm chí không thể truy cập trang web. Mặc dù vậy, tôi gặp lỗi 'vòng lặp chuyển hướng' trong Chrome --- tốt nhất không nên đi sâu vào một cuộc thảo luận về OT ở đây.

Câu trả lời:


11

Skeuomorphism thực sự là đối diện của thiết kế phẳng . "Thiết kế Vật liệu" của Google chỉ đơn thuần là tên thương hiệu của họ cho những diễn giải cụ thể của họ về thiết kế phẳng. Đó vẫn là thiết kế phẳng. "FLat Design" được Apple đặt ra khi họ phát hành iOS7. Nó gây chú ý bởi vì đây là thuật ngữ đầu tiên được sử dụng, nó có thể dễ dàng được gọi là "Thiết kế Vật liệu" nếu Google thực hiện trước.

Việc thực hành tính đa dạng là thêm các yếu tố thị giác mà bạn mong đợi để xem liệu vật thể đó có thật không chứ không phải được chiếu trên màn hình. Một ví dụ sẽ là bóng tối và nổi bật. Chúng tồn tại trên mọi thứ trong thế giới thực nhưng không có gì trên thế giới kỹ thuật số. Thêm các yếu tố đa dạng này được thiết kế để làm cho con người cảm thấy quen thuộc hơn với các yếu tố kỹ thuật số.

Thiết kế phẳng là đối nghịch của điều này. Trong "thiết kế phẳng" không có sự cân nhắc nào cho vật lý và ánh sáng của "thế giới thực". Các yếu tố kỹ thuật số được tạo ra tuy nhiên nhà thiết kế muốn làm cho chúng không quan tâm đến "thực tế" sẽ làm gì với yếu tố đó nếu đối tượng là vật lý.

Trang chủ bootstrap không phải là một ví dụ về tính đa dạng. Đó là một ví dụ về thiết kế phẳng nói chung. Mặc dù có thể lập luận rằng hình chữ nhật chèn ở giữa với hiệu ứng "chạm nổi" bên trong cũng có dạng lệch. Vì vậy, có lẽ một "lai" có thể là mô tả tốt nhất.

Về mặt lợi thế / bất lợi về mặt kỹ thuật - không có lý do vững chắc để chọn cái này hơn cái kia.

Thông thường để kéo ra chất lượng cao, hình ảnh hiệu ứng sai lệch đáng tin cậy là cần thiết. Hình ảnh sẽ tự nhiên tăng yêu cầu HTTP và tải trình duyệt. Nếu bạn từ bỏ các hình ảnh có lợi cho CSS đa dạng, thì CSS có thể cực kỳ phức tạp và lớn. Trong khi giảm hình ảnh yêu cầu HTTP sẽ yêu cầu, kích thước bổ sung (kb) của tệp CSS có các yếu tố biến dạng có thể vượt quá mức giảm yêu cầu HTTP (theo quan điểm của người dùng).

Thiết kế phẳng thường dễ dàng thực hiện với CSS3 cơ bản. Nếu một hình ảnh cần thiết trong một thiết kế phẳng, thì hình ảnh tương tự rất có thể sẽ cần thiết trong một thiết kế sai lệch. Vì vậy, họ bù đắp cho nhau về lợi thế / bất lợi. Flat Thiết kế CSS là phong tục ít phức tạp hơn và dễ dàng hơn để chỉnh sửa, nhưng nó không được. Hoàn toàn có thể tạo ra một thiết kế phẳng với các thuộc tính CSS rất phức tạp. Hầu hết các thiết kế phẳng chứa độ dốc - chỉ là độ dốc "thế giới thực" dựa trên ánh sáng sẽ làm gì nếu vật thể là thật. Mỗi một biểu tượng iOS7-8 hoặc Windows 8 của Apple đều sử dụng độ dốc. Chỉ các độ dốc rất tinh tế trái ngược với độ dốc "làm cho nó trông giống như nó nhô ra".

Cuối cùng, không có lý do cứng nhắc nào về thiết kế phẳng có thể tốt hơn về mặt kỹ thuật hoặc tệ hơn so với tính đa dạng. Tất cả bắt nguồn từ vấn đề ưu tiên của nhà thiết kế. Cả hai tính đa dạng và thiết kế phẳng chỉ là xu hướng thiết kế mà không có bất kỳ cơ sở nào trong lý luận kỹ thuật.

nó giống như hỏi "trang web màu đỏ hay trang web màu xanh nào tốt hơn về mặt kỹ thuật?" - không có câu trả lời nào ngoài "Bất cứ điều gì bạn thích."


1
Một lưu ý là các hiệu ứng sai lệch được tạo hoàn toàn bằng CSS sẽ làm giảm hiệu suất rất lớn khi tải tệp vì độ dốc, bóng hộp, v.v. rất chuyên sâu
Zach Saucier

Tôi không chú ý đến điều đó trong câu trả lời @ZachSaucier :)
Scott
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.