Thay đổi mọi thứ theo cách sản phẩm của bạn cần: cách chính các nhà thiết kế của Google áp dụng nguyên tắc Material Design
Phong cách thiết kế Vật liệu (thiết kế vật liệu trong phiên bản tiếng Nga), đã trở nên phổ biến đáng kinh ngạc, vẫn là một đối tượng khó hiểu và chưa được biết đến đối với hầu hết mọi người. Chúng ta sẽ sử dụng các ví dụ đơn giản và rõ ràng để hiểu thiết kế vật liệu là gì và cách sử dụng nó.
Ban đầu, các nhà thiết kế của Google đặt ra cho mình ba mục tiêu toàn cầu:
- Tạo ra không chỉ một phong cách mới mà còn là toàn bộ hệ thống thiết kế trong đó các nguyên tắc và quy tắc sẽ được nêu rõ ràng;
- Cập nhật các phong cách hiện có (FLAT/Metro, chủ nghĩa tối giản và các phong cách khác), dựa trên các công nghệ mới.
Thiết kế Vật liệu đến từ đâu: thống kê internet di động
Màn hình nhỏ của điện thoại di động đặt ra yêu cầu cao hơn nhiều về khả năng sử dụng, buộc các nhà phát triển phải xem xét cẩn thận tất cả cơ chế của một ứng dụng hoặc trang web thích ứng. Phong cách mới của Google đã được tạo ra, cùng với những thứ khác, nhằm kết hợp các trang web “di động” và “máy tính để bàn”, đưa ra một khái niệm duy nhất cho chúng.
“Chất liệu” trong thiết kế: nó là gì?
Cơ sở của phong cách là khái niệm về vật liệu. Đây là “khối xây dựng” cơ bản mà từ đó các khối thiết kế chức năng được tập hợp lại. Có thể mô tả ngắn gọn như sau:
- Bạn nên muốn chạm vào nó;
- Nó có tính tương tác và trên màn hình điều khiển, nó hoạt động giống như cách một số vật thể vật lý sẽ hoạt động trong cuộc sống;
- Nó trông giống như giấy;
- Nó tạo ra những cái bóng, uốn cong, chuyển động như thật.
Một ví dụ về việc chồng các lớp “giấy kỹ thuật số”
Những điều kiện này khá dễ hiểu: bạn có thể đã nhận thấy - hơn một lần - rằng bạn thường muốn nhấp vào nút ba chiều "ngon", hoạt động giống như nút thật khi nhấn. Vì màn hình máy tính chỉ truyền hình ảnh trực quan nên những người có hệ thống nhận thức khác (thính giác và vận động) sẽ thấy mình bị thiếu thốn và không nhận được những cảm giác mà họ quen thuộc. Người thiết kế chỉ có thể mô phỏng: làm cho chiếc nút sao cho hình ảnh này gợi lên trong trí tưởng tượng của khách truy cập một cảm giác như thể anh ta đang chạm vào nút này và cảm nhận được độ nhám, góc cạnh, âm lượng của nó. Ví dụ, điều này rất quan trọng đối với động vật vận động - đây là những người đặc biệt nhạy cảm với cảm giác xúc giác.
Tất nhiên, những đặc tính như vậy đã được sử dụng trong thiết kế trước đây: ví dụ, các nút lớn bóng loáng có điểm nhấn rất phổ biến trong phong cách Web 2.0. Nhưng trong thiết kế vật liệu, các đặc tính được nêu rõ. Đặc biệt, tất cả các phần tử đều có “độ dày” như nhau: không còn nút web nào nổi bật so với các khối trang còn lại.
Nút theo phong cách thiết kế vật liệu và nút Web 2.0
Ngoài ra, theo các quy tắc mà các nhà thiết kế của Google đưa ra cho Material Design, các phần tử riêng lẻ “nằm” gần nhau và không lơ lửng trong không trung. Kết quả là, bóng luôn nhỏ và có đường viền rõ ràng (ví dụ: thay vì bóng từ ánh sáng khuếch tán gần đó).
Một điểm khác biệt quan trọng khác của phong cách mới là tính năng động của nó. Lý do ở đây một lần nữa là ở điện thoại di động và máy tính bảng: kích thước màn hình hạn chế không cho phép đặt tất cả thông tin và điều khiển cần thiết ở chế độ xem đơn giản và người dùng phải di chuyển, cuộn và nhấp chuột nhiều. Google đã cung cấp các sơ đồ rõ ràng cho thiết kế vật liệu: bất kỳ chuyển động nào cũng có ý nghĩa riêng - đây là menu trượt hoặc một phần tử có thể được loại bỏ bằng cách trượt ngón tay, v.v.
Những sai lầm và quan niệm sai lầm
Đầu tiên. Để tạo ra một thiết kế vật liệu, chỉ cần thay thế tất cả các thành phần và hình nền trên trang web bằng họa tiết là đủ. KHÔNG! Nếu bạn làm điều này, bạn sẽ có một trang web bẩn và xấu, thậm chí không đạt đến cấp độ của những trang web.
Thứ hai. Vật liệu thực tế nên được sử dụng trong thiết kế. Không cần thiết! Điều quan trọng là họ cư xử như người thật. Không quan trọng đó là kết cấu gỗ thật hay kết cấu “tổng hợp” được tạo trong Photoshop bằng công cụ Noise.
Ngày thứ ba. Chất liệu và sự tương tác của nó là những thứ duy nhất phân biệt phong cách này. KHÔNG! Để đạt được thiết kế vật liệu “chuẩn mực”, như của Google, bạn cần tuân theo các nguyên tắc khác:
- Hình ảnh được vẽ không có khoảng trống, từ cạnh này sang cạnh kia;
- Phông chữ sans serif lớn, dễ đọc;
- Mã màu;
- Các biểu tượng được tạo theo nguyên tắc thiết kế vật liệu giống nhau;
- Bố cục thích ứng.
Bạn có thể tìm thấy danh sách đầy đủ các quy tắc trong phần chính thức của Google về thiết kế vật liệu.
Thiết kế vật liệu Android
Việc áp dụng các quy tắc chung vào ứng dụng di động cũng có những đặc điểm riêng. Bạn có nhớ chúng ta đã nói về bóng tối không? Ban đầu, các yếu tố thiết kế vật liệu dành cho Android thực sự nằm chồng lên nhau, giống như những mảnh giấy. Nhưng với sự tương tác, mọi thành phần, có thể là hộp thoại hoặc nút điều hướng, đều được đưa lên hàng đầu. Đây là cách phong cách này làm nổi bật các khối hoạt động. Nó sử dụng nguyên tắc tương tự đã được áp dụng trong công nghệ cửa sổ bật lên kể từ Web 2.0.
Giờ đây “nguyên tắc phân lớp đã chuyển từ cửa sổ bật lên sang toàn bộ giao diện
Điều thú vị là các nhà phát triển Material Design tại Google thậm chí còn xác định rõ ràng tất cả các thông số cho từng thành phần giao diện có thể có!
Màu sắc trong thiết kế vật liệu
Cách tiếp cận bảng màu gợi nhớ đến phong cách FLAT. Đây là những màu sắc khá tươi sáng, phong phú, tự nhiên. Thiết kế vật liệu liên quan đến việc sử dụng ba loại màu chính:
- Màu sắc chủ đạo thống trị mọi màn hình giao diện;
- Một màu bổ sung thường biểu thị các khối có liên quan, giải thích hoặc bổ sung cho nội dung chính. Thường thì nó chỉ đơn giản là màu sáng hơn hoặc đậm hơn của màu chính.
- Màu nhấn dùng để làm nổi bật các nút, phần tử chuyển đổi và những thứ quan trọng khác.
Màu sắc của thiết kế vật liệu: bảng màu của Google
Vào ngày 25 tháng 6 năm 2014, Google đã giới thiệu với công chúng tầm nhìn mới của mình về thiết kế giao diện trong tương lai - một bộ quy tắc và điều kiện mà theo đó giao diện của tất cả các sản phẩm của tập đoàn sẽ được xây dựng từ đó trở đi. Tại sao tất cả điều này lại cần thiết? Chỉ 5 năm trước, tất cả các sản phẩm của Google đều rất khác nhau, bao gồm các phiên bản khác nhau của cùng một ứng dụng trên các thiết bị khác nhau. Các nhà phát triển đã nghĩ đến việc tạo ra các quy tắc đặc biệt để xây dựng và thống nhất tất cả các ứng dụng và dịch vụ đã phát triển, sau này được hợp nhất dưới tên chung là “Dự án Kennedy”. Chính dự án này sau đó đã phát triển thành Vật liệu thiết kế (vật liệu thiết kế).
Triết lý vật chất
Nhờ dự án của Kennedy, tất cả các dịch vụ chính của Google đều nhận được các đặc điểm giao diện và thiết kế chung. Điều này giúp có thể thống nhất các phương pháp tạo giao diện web và giao diện ứng dụng di động sau này.
Một trong những tính năng của thiết kế thống nhất là các thẻ chứa thông tin có thể được đặt ở bất kỳ vị trí nào trong khu vực làm việc. Trong khi khám phá chúng trong ứng dụng Google Hiện hành, các nhà phát triển đã tự đặt câu hỏi: “Có gì bên dưới những tấm thẻ này?” Theo Phó Giám đốc Thiết kế Matias Duarte của Google, "câu hỏi ngây thơ này đã khơi dậy một tia lửa mạnh mẽ".
Nhóm thiết kế bắt đầu xem thiết kế không phải là một tập hợp các mặt phẳng và pixel mà là một vật thể thực tế. Họ muốn truyền tải điều tương tự đến người dùng, để họ có cảm giác hữu hình về giao diện, rằng những gì đang diễn ra trên màn hình trông đáng tin cậy và hợp lý nhất có thể.
Sau sự thống trị hoàn toàn tính đa hình(bắt chước chính xác các vật thể thực của thế giới vật chất trong thiết kế) mọi người đều chuyển mạnh theo hướng ngược lại - . Chính điều này đã được Google lấy làm cơ sở khi phát minh ra “ vật liệu" Đồng thời lùi một bước nhỏ về phía chủ nghĩa hiện thực.
Giấy lượng tử
Yếu tố chính của thiết kế vật liệu là ẩn dụ đối tượng vật lý có đặc tính tương tự như giấy và có hầu hết các đặc tính của nó - kích thước, màu sắc, độ dày. Mỗi lớp của chất liệu ẩn dụ này nằm trong không gian ba chiều và tuân theo mọi quy luật vật lý, do đó, không giống như phong cách phẳng cổ điển, nó có thể tạo bóng xuống các lớp bên dưới. Tất cả các lớp được đặt trên vật liệu đáy chính.
Do đặc tính giống giấy nên vật liệu này ban đầu được gọi là “giấy lượng tử”. Đây là loại giấy giống như ở thế giới vật chất, nhưng nó có một số đặc tính “ma thuật”, chẳng hạn như nó có thể thay đổi kích thước và di chuyển trơn tru trong không gian, kết hợp với các “chiếc lá” khác hoặc bẻ thành nhiều mảnh. Giấy lượng tử nằm ngay phía trên nền, thường có màu trắng. Bóng di chuyển tùy thuộc vào chuyển động của vật liệu và giảm hoặc tăng tùy thuộc vào độ cao của vật liệu so với nền.
Mực kỹ thuật số
Nếu "giấy lượng tử" nhằm mục đích phản ánh các đặc tính vật lý của một vật thể, thì mọi thứ trên bề mặt của tờ giấy này - màu sắc, hình ảnh, văn bản, biểu tượng - đều được hình thành bằng cách sử dụng " mực kỹ thuật số" - một đối tượng độc đáo khác của thiết kế vật liệu.
Thiết kế vật liệu sử dụng tất cả sự phát triển của in ấn trong thiết kế giao diện. Nhưng ở đây cũng có những tính năng độc quyền của Google. Ví dụ: phông chữ chính được sử dụng trong thiết kế vật liệu là Roboto. Tuy nhiên, không có gì ngăn cản các công ty sử dụng phông chữ công ty để duy trì danh tính của họ. Nguyên tắc sử dụng Material Design cung cấp các ví dụ về cách sử dụng các kiểu và kích thước phông chữ khác nhau trong giao diện.
Nhưng điều quan trọng nhất trong đồ họa thiết kế vật liệu là màu sắc. Màu sắc là phương tiện biểu đạt chính trên giấy lượng tử và do đó đóng vai trò rất quan trọng. Thiết kế vật liệu thường sử dụng nền tảng Và màu nhấn. Cũng như một số sắc thái cho các tình huống khác nhau.
Thường xuyên màu cơ bảnđược sử dụng để tô màu các khu vực lớn như tiêu đề, thanh hành động, thanh trạng thái. Dùng để làm nổi bật các yếu tố quan trọng màu nhấn. Ví dụ: đối với danh thiếp thiết kế vật liệu - các nút hành động nổi.
Các nguyên tắc cơ bản của thiết kế vật liệu quyết định việc sử dụng hình ảnh. Đây là một yếu tố quan trọng nên bạn nên sử dụng hình ảnh có kích thước tối đa không có khung. Hơn nữa, các thanh hành động trở nên trong suốt để tối đa hóa tầm nhìn của hình ảnh.
Android hỗ trợ một thư viện đặc biệt Bảng màu, có khả năng trích xuất màu chính và màu nhấn từ hình ảnh, đồng thời thay đổi linh hoạt thiết kế của ứng dụng, thích ứng với hình ảnh đang hoạt động (ví dụ ở trên).
Tầm quan trọng của hoạt hình
Tiếp tục so sánh với thế giới tự nhiên, cần lưu ý rằng không có gì biến mất vào hư không, cũng như không có gì từ hư không mà ra. Vì vậy, trong Material Design, cần phải thay đổi giao diện hiện có một cách trơn tru để đáp ứng mọi hành động của người dùng sao cho mọi chuyển đổi đều hợp lý và rõ ràng. Như vậy, trong Material Design, hoạt ảnh là hệ quả của sự tương tác giữa người dùng và giao diện.
Chuyển động tích cực thu hút sự chú ý của người dùng, vì vậy để đạt được hiệu quả như hiện thực, cần áp dụng một số quy tắc:
- Bất đối xứng
Thông thường, kích thước của vật thể bị giới hạn bởi chiều rộng của thiết bị, do đó, để tạo ra sự thay đổi kích thước thực tế của giấy lượng tử, cần phải thay đổi bất đối xứng chiều rộng và chiều cao của vật thể một cách độc lập, nhờ đó tránh được ảo giác vật thể trở nên lớn hơn hoặc nhỏ hơn. . - Trả lời
Phải có phản hồi tương ứng với bất kỳ hành động nào của người dùng. Ví dụ: Google đưa ra hiệu ứng thay đổi sóng trong các đối tượng giao diện với tâm chấn tại điểm tương tác - Chuyển động đích thực tự nhiên
Về bản chất, các vật thể khi di chuyển không thể tăng tốc hoặc dừng lại ngay lập tức, do đó, để mang lại tính chân thực, tất cả các hoạt ảnh không được tuyến tính mà phải có sự chậm lại và tăng tốc.
Phần kết luận
Vật liệu thiết kế là một cách tương tác và xây dựng giao diện hoàn toàn mới, vẫn đang được phát triển và có thể mở rộng bất cứ lúc nào. Tuy nhiên, người ta đã có thể dự đoán được triển vọng của nó. Ở mức tối thiểu, nó sẽ chiếm ưu thế trong việc phát triển ứng dụng Android, vì sự thống nhất của tất cả các giao diện sẽ có tác động tích cực đến tính dễ sử dụng.
Tại chính Google, sự phát triển của thiết kế vật liệu được đặt ngang hàng với các sự kiện quan trọng như sự phát triển của giao diện cửa sổ và điều khiển con trỏ (Xerox PARC) và việc tạo ra màn hình cảm ứng (Apple). Nào, hãy xem chuyện gì sẽ xảy ra.
Logo và nhận dạng mới của Google thúc đẩy thiết kế vật liệu tiến lên phía trước
Bạn có thể tìm thấy hướng dẫn chi tiết từ nhà phát triển thiết kế vật liệu tại đây -
Google Hình ảnh cho phép bạn tìm thông tin trên Internet được trình bày trực quan. Các tính năng mới như chú thích hình ảnh, biểu tượng dễ nhìn và trang AMP trong kết quả tìm kiếm sẽ giúp người dùng nhanh chóng tìm thấy thứ họ cần.
Bằng cách cung cấp hình ảnh với thông tin bổ sung, bạn sẽ đạt được độ chính xác tìm kiếm cao hơn và thu hút nhiều người dùng quan tâm hơn đến trang web của mình. Tối ưu hóa các trang của bạn và hình ảnh trên đó để chúng có nhiều khả năng được tìm thấy hơn trong Google Hình ảnh. Để làm điều này, hãy làm theo các khuyến nghị dưới đây.
Cấm các liên kết có thể nhấp vào trong kết quả tìm kiếm hình ảnh
Nếu muốn, bạn có thể ngăn các liên kết có thể nhấp vào xuất hiện trong kết quả tìm kiếm của Google Hình ảnh, do đó hình ảnh có kích thước đầy đủ sẽ không được hiển thị trên trang kết quả.
Hướng dẫn
- Khi yêu cầu hình ảnh của bạn, hãy kiểm tra tiêu đề Người giới thiệu HTTP.
- Nếu yêu cầu đến từ miền Google, hãy gửi phản hồi có mã HTTP 200 (OK) hoặc 204 (Không có nội dung).
Google vẫn có thể phát hiện hình ảnh khi thu thập dữ liệu trang nhưng kết quả tìm kiếm sẽ hiển thị hình ảnh thu nhỏ được tạo trong quá trình thu thập dữ liệu. Lệnh cấm như vậy có thể được áp dụng bất cứ lúc nào và việc xử lý lại hình ảnh trên trang web là không cần thiết. Đây không được coi là ngụy trang và sẽ không dẫn đến biện pháp trừng phạt.
Làm cho trang web thân thiện với người dùng
Để cải thiện thứ hạng nội dung của bạn trong kết quả tìm kiếm hình ảnh, tạo trang chủ yếu cho người dùng chứ không phải cho công cụ tìm kiếm. Dưới đây là một số lời khuyên:
- Hãy nhớ rằng bối cảnh là quan trọng.Đảm bảo nội dung hình ảnh của bạn có liên quan đến chủ đề mà trang hướng tới. Chỉ nên sử dụng những hình ảnh bổ sung ý nghĩa cho phần còn lại của nội dung. Chúng tôi không khuyến khích hiển thị văn bản có hình ảnh trên một trang trừ khi nội dung của một trong hai loại là nguyên bản.
- Hãy thông minh về vị trí của bạn. Bất cứ khi nào có thể, hãy đặt hình ảnh bên cạnh văn bản mà chúng minh họa. Đôi khi việc đặt một hình ảnh quan trọng ở đầu trang là điều hợp lý.
- Không đặt văn bản quan trọng trực tiếp lên hình ảnh. Cố gắng không sử dụng văn bản trên hình ảnh vì tất cả người dùng ở dạng này không thể truy cập được văn bản này. Điều này chủ yếu áp dụng cho các thành phần văn bản quan trọng như tiêu đề trang và các mục menu. Ngoài ra, văn bản trong hình ảnh không được các công cụ dùng để dịch trang sang ngôn ngữ khác nhận dạng. Để đảm bảo mức độ dễ dàng nhận biết và tìm kiếm nội dung của bạn, hãy chỉ thêm văn bản vào trang bằng đánh dấu HTML và cũng đừng quên nhập mô tả cho hình ảnh trong thuộc tính alt.
- Tạo các trang web tốt, nhiều thông tin. Toàn bộ nội dung của trang cũng quan trọng khi tìm kiếm trong Google Hình ảnh như chính nội dung trực quan vì nó cho phép bạn xử lý nội dung đó hiệu quả hơn. Ví dụ: các đoạn văn bản từ một trang cụ thể có thể được sử dụng làm mô tả cho nội dung đó. Google cũng tính đến chất lượng thông tin được trình bày trên trang web khi xếp hạng hình ảnh.
- Tạo các trang web được tối ưu hóa cho thiết bị di động. Người dùng có nhiều khả năng tìm kiếm Google Images trên thiết bị di động hơn trên máy tính để bàn. Vì vậy, điều quan trọng là làm cho trang web của bạn dễ xem trên các thiết bị thuộc mọi loại và kích cỡ. Kiểm tra mức độ dễ xem trên thiết bị di động sẽ giúp bạn tìm hiểu xem các trang có được hiển thị chính xác hay không và có bất kỳ lỗi nào trên chúng hay không.
- Hãy cẩn thận về cấu trúc URL cho hình ảnh của bạn. Ngoài tên tệp, Google còn tính đến đường dẫn URL khi xử lý nội dung trực quan. Cố gắng đưa ra một thiết kế hợp lý cho các URL hình ảnh của bạn.
Chú ý đến tiêu đề và mô tả của trang
Google Hình ảnh tự động tạo tiêu đề và mô tả cho hình ảnh để người dùng hiểu một kết quả cụ thể liên quan như thế nào đến truy vấn của họ. Điều này giúp người dùng quyết định có nên nhấp vào kết quả hay không.
Chúng tôi nhận được thông tin cần thiết từ nhiều nguồn khác nhau, bao gồm tiêu đề và thẻ meta của mỗi trang.
Để đảm bảo rằng tiêu đề và mô tả mà chúng tôi tạo mang tính mô tả, hãy làm theo các nguyên tắc được nêu trong bài viết này.
Thêm dữ liệu có cấu trúc
Nếu bạn thêm dữ liệu có cấu trúc, hình ảnh của bạn sẽ xuất hiện trong Google Hình ảnh dưới dạng kết quả nhiều định dạng (bao gồm cả các biểu tượng dễ nhìn thấy). Điều này sẽ giúp người dùng hiểu rõ hơn về trang web của bạn, đảm bảo rằng những người quan tâm nhất đến việc truy cập trang web của bạn sẽ truy cập trang web đó. Dữ liệu có cấu trúc được hỗ trợ cho các loại nội dung sau:
Trong Google Hình ảnh, biểu tượng AMP giúp người dùng chọn các trang tải nhanh hơn. Hãy thử chuyển đổi trang chứa hình ảnh của bạn sang định dạng AMP. Lưu ý rằng trang đích là trang mà người dùng truy cập sau khi nhấp vào kết quả tìm kiếm.
Thêm ảnh chất lượng cao
Người dùng thích ảnh chất lượng tốt. Hình ảnh thu nhỏ rõ ràng trong kết quả tìm kiếm cũng có nhiều khả năng thu hút khách truy cập vào trang web của bạn hơn.
Đặt hình ảnh chính xác trong văn bản và chọn tiêu đề, tên tệp và chú thích có ý nghĩa cho chúng
Google trích xuất thông tin về chủ đề của hình ảnh từ nội dung khác trên trang, bao gồm tiêu đề và chú thích của hình ảnh. Bất cứ khi nào có thể, hãy đặt hình ảnh trên các trang dành riêng cho chủ đề liên quan và bên cạnh văn bản liên quan đến chúng.
Tên tệp có thể có chức năng tương tự như tiêu đề có chú thích. Đó là lý do tại sao con chó.jpg như một cái tên thích hợp hơn IMG00023.JPG.
Thêm mô tả hình ảnh vào thuộc tính alt
Văn bản thay thế trong thuộc tính alt giúp người dùng không thể xem hình ảnh trên các trang có thể truy cập nội dung (ví dụ: vì họ đang sử dụng trình đọc màn hình hoặc có kết nối Internet chậm).
Khi xác định chủ đề của hình ảnh, Google tính đến các mô tả trong thuộc tính alt cũng như kết quả nhận dạng hình ảnh và nội dung trang. Ngoài ra, văn bản thay thế có thể được tạo thành văn bản liên kết nếu bạn quyết định sử dụng hình ảnh cho mục đích đó.
Cố gắng đưa ra mô tả phù hợp với nội dung của trang càng nhiều thông tin càng tốt. Đừng lạm dụng từ khóa vì điều này sẽ tạo ấn tượng xấu cho người dùng và có thể bị coi là thư rác.
- Tùy chọn không thành công (thuộc tính alt không được điền):
- Tùy chọn xấu (lạm dụng từ khóa):
- Một lựa chọn tốt hơn:
- Sự lựa chọn tốt nhất:
Sử dụng Sơ đồ trang web cho Hình ảnh
Hình ảnh là nguồn thông tin quan trọng về nội dung tổng thể của một trang web. Bạn có thể cung cấp thông tin bổ sung về hình ảnh và cung cấp cho Google địa chỉ của hình ảnh mà có thể không được tìm thấy trong tệp Sơ đồ trang web của bạn.
Sơ đồ trang web hình ảnh, không giống như sơ đồ trang web hình ảnh thông thường, có thể chứa URL từ các tên miền khác. Điều này cho phép quản trị viên web sử dụng CDN (mạng phân phối nội dung) để lưu trữ các tệp đồ họa. Chúng tôi khuyên bạn nên kiểm tra tên miền SDK của mình trong Search Console để chúng tôi có thể thông báo cho bạn khi phát hiện thấy lỗi thu thập dữ liệu.
Các định dạng đồ họa được hỗ trợ
Google Hình ảnh hỗ trợ các định dạng sau: BMP, GIF, JPEG, PNG, WebP, SVG và hình ảnh nhúng.
Hình ảnh nội tuyến là tập hợp các byte dữ liệu đồ họa trong thẻ . Mã ví dụ cho một hình ảnh như vậy:
Thay vì dữ liệu hình ảnh, bạn nên thay thế chuỗi được mã hóa Base64.
Mặc dù hình ảnh nội tuyến có thể làm giảm số lượng yêu cầu HTTP nhưng quản trị viên web nên xem xét cẩn thận các quyết định của mình vì chúng có thể dẫn đến chi phí trang đáng kể. Bạn có thể tìm hiểu thêm về ưu và nhược điểm của hình ảnh nhúng trên trang web Cơ bản về Thiết kế Web.
Hình ảnh đáp ứng
Các trang web đáp ứng thường dễ sử dụng hơn vì chúng có thể được xem trên nhiều thiết bị. Mẹo về cách làm việc với hình ảnh trên trang web phản hồi được trình bày trong phần tương ứng trong tài nguyên "Nguyên tắc cơ bản về thiết kế web" của chúng tôi.
Hình ảnh được đặt trên một trang phản hồi bằng cách sử dụng thẻ hoặc
.
Sử dụng thẻ 
Thuộc tính srcset cho phép bạn chỉ định trong một phần tử nhiều phiên bản của cùng một hình ảnh cho các kích cỡ màn hình khác nhau.
Ví dụ
Sử dụng thẻ
Yếu tố
Tối ưu hóa hình ảnh của bạn cho Tìm kiếm an toàn
Tìm kiếm an toàn là tính năng cho phép bạn chặn hoặc cho phép hình ảnh, video và trang web có nội dung khiêu dâm trong kết quả tìm kiếm của Google. Để các cài đặt này được áp dụng đúng cách, bạn cần cung cấp cho Google thông tin về loại nội dung hình ảnh của bạn.
Đăng hình ảnh chỉ dành cho người lớn ở một địa chỉ riêng
Nếu trang web của bạn chứa nội dung trực quan chỉ dành cho người lớn xem, chúng tôi rất khuyến khíchđặt nó một cách riêng biệt. Ví dụ: http://www.example.com/adult/image.jpg.
Thêm siêu dữ liệu vào trang nội dung người lớn
Nếu người dùng đã áp dụng bộ lọc Tìm kiếm an toàn thì thuật toán của Google sẽ sử dụng nhiều loại dữ liệu để xác định kết quả nào không hiển thị. Trong trường hợp hình ảnh, học máy đóng một vai trò, nhưng các yếu tố khá đơn giản cũng được tính đến, chẳng hạn như vị trí và bối cảnh mà một hình ảnh nhất định đã được sử dụng trước đó.
Cách hữu ích nhất để phân biệt nội dung chỉ dành cho người lớn là đánh dấu đặc biệt. Nếu bạn xuất bản nội dung như vậy, chúng tôi khuyên bạn nên thêm các thẻ meta sau vào mã trang của mình:
Nhiều người dùng không muốn nội dung người lớn xuất hiện trong kết quả tìm kiếm, đặc biệt nếu trẻ em có quyền truy cập vào cùng một thiết bị. Do đó, bằng cách sử dụng một trong các thẻ meta này, bạn đang đảm bảo rằng người dùng không phải xem nội dung không phù hợp.
Giống như bất kỳ thuật toán nào khác, Tìm kiếm an toàn có thể mắc lỗi. Nếu bạn cho rằng hình ảnh hoặc trang của mình đang bị loại khỏi kết quả tìm kiếm do nhầm lẫn, .
Và cuối cùng
Bài viết này hữu ích không?
Làm thế nào bài viết này có thể được cải thiện?
Thiết kế vật liệu là gì? Nó là một tập hợp các phong cách và đồ họa do Google phát triển, cũng như các nguyên tắc và quy tắc để tuân thủ các phong cách đó. Thiết kế vật liệu lần đầu tiên được giới thiệu tại hội nghị nhà phát triển Google I/O vào mùa hè năm 2014. Phong cách này dựa trên định dạng của “thẻ” và “khối” - các hình thức và yếu tố đồ họa đơn giản và ngắn gọn, cũng như sự đơn giản và mới mẻ tổng thể của thiết kế - màu sắc dịu, nhẹ nhàng, thiếu khối lượng, chi tiết nhỏ và chi tiết trong tổng quan. Lần “xuất bản” đầu tiên về thiết kế vật liệu diễn ra với sự ra mắt của dịch vụ Google Hiện hành và phong cách này chính thức trở thành nền tảng cho hệ điều hành Android gần đây, ở phiên bản 5.0, còn được gọi là Android Lollipop.
Theo tôi, Material Design có một số ưu điểm rất quan trọng so với tất cả những nỗ lực trước đây của Google nhằm đưa thiết kế hệ điều hành và chương trình của nó về một dạng thống nhất, nhưng cũng có một số nhược điểm. Trong bài viết ngắn này, tôi sẽ cố gắng trình bày quan điểm của mình về ngôn ngữ thiết kế mới của Google.
Thiết kế vật liệu – lập luận CHO
Theo tôi, lập luận đầu tiên và quan trọng nhất ủng hộ phong cách mới là việc thực hiện nó. Tôi không muốn một lần nữa tỏ ra là người ghét công nghệ và cách tiếp cận của Apple, nhưng trong trường hợp này điều đó không đáng sợ, vì tôi chỉ bày tỏ quan điểm của mình. Vì vậy, theo tôi, việc cập nhật iOS lên phiên bản thứ bảy và cập nhật Android lên phiên bản thứ năm, như người ta nói, là hai điểm khác biệt lớn.
Trong trường hợp của Apple, chúng ta thấy sự chuyển giao đồ họa thông thường trước đây sang dạng phẳng, không có ý tưởng mới, không mong muốn mang lại điều gì đó mới mẻ - họ chỉ lấy giao diện hiện có, nghiền nát nó, vẽ lại các biểu tượng và thêm hình nền cầu vồng. Đối với tôi, hình ảnh nền trong iOS 7 mới và các hiệu ứng trong suốt của menu là dấu hiệu cho thấy sở thích tồi tệ và sự không sẵn lòng của các nhà thiết kế trong việc làm điều gì đó tốt đẹp và tử tế. Trong “seven”, họ chỉ đơn giản là làm mãn nhãn mọi người bằng hiệu ứng hoạt hình đẹp mắt và độ sáng chung của giao diện mới. Đối với tôi, có vẻ như không ai thực sự nghĩ đến việc liệu điều này có thuận tiện hay không, bởi vì nếu không thì các nhà thiết kế của Apple sẽ chú ý nhiều hơn đến các khía cạnh chức năng hơn là thiết kế cầu vồng.
Bóng thông báo, được gọi từ trên xuống và bảng điều khiển, được gọi từ dưới lên, là những ví dụ rõ ràng về việc “nâng cấp” vô dụng trong iOS7. Điều đầu tiên chưa bao giờ được làm rõ ràng hơn - tất cả các thông báo chồng lên nhau một cách lộn xộn và có quá nhiều thông báo, điều thứ hai đã hoàn thành được nửa chừng, các công tắc cho phép bạn bật/tắt giao diện nhưng không tiến hành thiết lập chúng và chọn mạng
Android 5.0 cũng đã được cập nhật rất nghiêm túc về mặt đồ họa so với 4.x chính xác là do việc chuyển hệ điều hành sang Material Design. Và, thoạt nhìn, những thay đổi ở đây tương tự như những thay đổi diễn ra trong iOS - sự thay đổi cuối cùng về phong cách sang kiểu phẳng, thiết kế tổng thể nhẹ nhàng hơn, sự đơn giản bên ngoài. Nhưng sau đó sự khác biệt bắt đầu. Trong Android 5.0, giao diện toàn diện hơn nhờ thiết kế vật liệu - mọi thứ được thực hiện theo một phong cách bình tĩnh, không có gì nổi bật và trông không sặc sỡ hoặc quá sáng. Nguyên tắc cơ bản của thiết kế vật liệu có loại trừ mức độ ưu tiên của hiệu ứng đồ họa trong giao diện so với tính thực tế của nó không? và điều đó thật tuyệt vời.
Tóm lại lập luận đầu tiên - thiết kế vật liệu đã trông rất tổng thể, đây chính xác là điều mà hệ điều hành của Google và CO còn thiếu - tính toàn vẹn và tính tổng quát. Khi mở từng chương trình riêng lẻ, có thể là danh bạ, trình duyệt, ứng dụng email hoặc thứ gì khác, bạn sẽ thấy cùng một hoạt ảnh, cùng một bảng màu và các yếu tố đơn giản có thể nhận biết được. Do đó, việc làm quen với hệ điều hành mới sẽ dễ dàng hơn và thật dễ chịu khi làm việc với nó.
Lập luận thứ hai là nếu bạn đã sử dụng điện thoại thông minh chạy Lollipop hoặc đã xem ảnh chụp màn hình, bạn có thể nhận thấy rằng giao diện đã trở nên lớn hơn về mặt hình ảnh. Việc hợp nhất giao diện đã diễn ra trên các thiết bị cảm ứng từ lâu. Nếu chúng ta so sánh các phiên bản Android đầu tiên với Windows Mobile “khi đó” thì rõ ràng Android lớn hơn và đơn giản hơn, ít thông tin hiển thị trên màn hình hơn nhưng cũng thuận tiện hơn khi điều khiển điện thoại thông minh. Trong thiết kế vật liệu, một số yếu tố đã được thay thế bằng “thẻ”, phông chữ, biểu tượng và kích thước dòng đã được tăng lên một chút và toàn bộ giao diện đã trở nên lớn hơn. Tôi thích điều này, có lẽ vì tôi đã già, gạt chuyện đùa sang một bên, nhưng càng lớn tuổi, tôi càng ít ham muốn nhìn vào các biểu tượng và thành phần “millized” ngay cả khi có thị lực tốt. Nhân tiện, đây là lý do tại sao tôi không thích iPhone 5 và bất cứ thứ gì nhỏ hơn. Tính nhỏ gọn là nhỏ gọn nhưng ngay cả trên màn hình có đường chéo 4,5 inch, bạn vẫn muốn xem các phần tử có kích thước bình thường chứ không phải nghiên cứu nó bằng kính lúp. Điều này đơn giản là thuận tiện hơn trong nhiều trường hợp, đặc biệt là khi làm việc với điện thoại thông minh khi đang di chuyển chẳng hạn. Do đó, đối với tôi, việc mở rộng giao diện chung trong Android 5.0 dựa trên thiết kế vật liệu dường như là một bước đi đúng đắn.
Lập luận thứ ba ủng hộ là Google không chỉ chuyển Android sang một thiết kế mới mà còn chuẩn bị ngay các hướng dẫn trực quan cần thiết thể hiện việc triển khai các yếu tố chính cho các nhà phát triển phần mềm. Nói một cách đơn giản, nếu bạn đang tạo một chương trình mới hoặc muốn chuyển đổi một chương trình cũ sang một thiết kế mới, bạn trang mạng và nghiên cứu các đề xuất của Google.
Ví dụ, nó cho biết nên sử dụng màu gì. phông chữ và cách sử dụng chúng được hiển thị. Và các khuyến nghị để sử dụng hình ảnh đồ họa chính xác trong chương trình.
Thiết kế vật liệu – lập luận CHỐNG LẠI
Tuy nhiên, lập luận thứ ba ủng hộ thiết kế vật liệu cũng là lập luận chống lại nó. Đúng, Google thật tuyệt khi không bỏ rơi các nhà phát triển và cung cấp cho họ hướng dẫn toàn diện về cách sử dụng đúng ngôn ngữ thiết kế mới, nhưng trong trường hợp này, giả sử, họ đã không nghĩ đến người dùng. Các chương trình được viết theo tất cả các quy tắc của thiết kế vật liệu hoặc được sửa đổi bên ngoài theo nguyên tắc của Google sẽ trông rất hài hòa trong Android 5.0 và không quá hài hòa trong các phiên bản trước của hệ thống. Và ngược lại - tất cả các ứng dụng không tuân theo các quy tắc của thiết kế vật liệu sẽ trông hơi xa lạ trên điện thoại thông minh chạy Android Lollipop. Và trong sáu tháng tới sẽ có nhiều chương trình như vậy, tôi đoán vậy. Tuy nhiên, không phải mọi nhà phát triển của một chương trình phổ biến, đặc biệt nếu nó phức tạp và yêu cầu cập nhật và cải tiến liên tục, sẽ bỏ mọi thứ và bắt đầu chuyển nó sang thiết kế vật liệu.
Một ví dụ rõ ràng về thiết kế cũ trong một chương trình rất hiện tại - WhatsApp. Bao lâu thì ứng dụng không được chuyển sang md? Câu hỏi hay
Hóa ra là một số nhà phát triển giờ đây sẽ thực sự từ bỏ mọi thứ và chuyển chương trình của họ sang thiết kế vật liệu, trong khi những người khác thì không. Và trên Google Play, có những chương trình có thiết kế cũ hơn, chẳng hạn như, nhưng đôi khi cũng cần thiết cho công việc. Kết quả là, mong muốn của Google (chắc chắn là đúng!) là đưa Android về một dạng phổ biến là chưa đủ; cần phải làm gì đó với hàng trăm nghìn chương trình. Câu hỏi - cái gì?
Các độc giả thân mến, bạn nghĩ gì về ý tưởng của Google trong việc đưa tất cả các dịch vụ và ứng dụng của mình về một hình thức chung, sử dụng thiết kế vật liệu làm cơ sở?
Tại hội nghị nhà phát triển Google I/O 2018, ngoài việc cập nhật Android và tích hợp sâu hơn trí tuệ nhân tạo vào các dịch vụ của mình, Google đã giới thiệu một tiêu chuẩn mới trong thiết kế hệ thống và ứng dụng di động - Material Design 2.0. Có gì mới?
Khoảng trắng và độ trong suốt
Một trong những thay đổi đáng chú ý nhất trong thiết kế vật liệu mới là lượng màu bão hòa và nền xám ở mức tối thiểu, chỉ có khoảng trắng đồng nhất và độ trong mờ. Theo tôi, điều này trông rất mới mẻ, từ đó đưa hệ điều hành và phần mềm lên một tầm cao mới về cảm nhận trực quan. Từ giờ trở đi, sử dụng Android P, không có tiện ích bổ sung đồ họa từ nhà sản xuất bên thứ ba, tôi thực sự coi đó là giải pháp đẹp nhất trong số các giao diện. IMHO.Công cụ phát triển mới:
Chủ đề vật chất
Plugin Material Theme dành cho Sketch về cơ bản là một thư viện phông chữ, biểu tượng và màu sắc công ty được cung cấp theo hướng dẫn mới của Google trong Android P. Ngoài ra, khi phát triển với sự trợ giúp của nó, bạn có thể chỉnh sửa hình dạng của các thành phần và kiểu chữ trong dự án của mình một cách dễ dàng. số lần nhấp chuột.
Làm tròn và tối giản hơn
Như nhiều người đã lưu ý, giao diện đã trở nên rất giống với Apple iOS 10 và 11, nhưng bước đi này chắc chắn được công ty thực hiện dành riêng cho các nhà sản xuất và chủ sở hữu điện thoại thông minh không khung, số lượng này đang tăng lên không ngừng mỗi năm, bởi vì sự xuất hiện này của hệ thống và phần mềm phù hợp hơn nhiều với màn hình cong của họ.
Phông chữ mới
Trong thiết kế logo và dịch vụ có thương hiệu mới, các nhà phát triển và nhà thiết kế của Google đã sử dụng kiểu chữ Product Sans. Một nhánh đặc biệt của Google Sans đã được tạo cho họ. Nó dựa trên phông chữ nói trên, thay thế phông chữ Roboto tiêu chuẩn.
Vì vậy, chúng ta có thể sớm mong đợi một cuộc thiết kế lại trên quy mô lớn tất cả các dịch vụ web và di động của Google. Hiện tại, một số sản phẩm đầu tiên trong kho ứng dụng là Google Play Games, Google Tasks và một ứng dụng dành cho những người tham gia hội nghị Google I/O 2018.
- Phong cách cập nhật của minh họa công ty
- Sử dụng bốn màu cơ bản của logo làm ngôn ngữ hình ảnh
Ví dụ, phiên bản mới của Gmail:
Ý tưởng thiết kế vật liệu 2.0
Tất nhiên, cộng đồng thiết kế đã phản hồi những thay đổi thiết kế sắp tới từ Google và đúng một tháng trước, một người dùng Reddit với biệt danh Morphicsn0w đã trình bày tầm nhìn của mình về trang Google Play.
Ngoài những thay đổi trực quan dưới dạng thẻ tròn trình bày các ứng dụng, theo ý kiến của mình, tác giả đã loại bỏ những phần không cần thiết như các ứng dụng đã tải xuống gần đây, từ đó làm cho giao diện cửa hàng đơn giản và nhiều thông tin hơn.
Trên màn hình mô tả ứng dụng, Morphicsn0w đã tập trung vào mô tả ứng dụng, chuyển trọng tâm ra khỏi thông tin về số lượt tải xuống và xếp hạng của người dùng.
Nhà thiết kế cũng thiết kế lại hệ thống tìm kiếm trong Google Play, bổ sung thêm tính năng sắp xếp kết quả tìm thấy theo giá, ngày cập nhật, xếp hạng và số lượt tải xuống. Sự hiện diện của tính năng sắp xếp như vậy sẽ đơn giản hóa đáng kể việc tìm kiếm phần mềm cần thiết trong cửa hàng, tôi đang chờ đợi và hy vọng Google triển khai tính năng đó.
YouTube được yêu mến, tác giả của cổng 9to5Google và nhà thiết kế giỏi bán thời gian Alex Brooks, cũng đã mơ mộng về những gì có thể thay đổi trong ứng dụng lưu trữ video hiện tại, cũng không bị bỏ qua. Kết quả cá nhân đã truyền cảm hứng cho tôi rất, rất nhiều.
Điều đầu tiên Alex thiết kế lại là thanh điều hướng màn hình chính, sơn nó bằng những màu sắc tươi sáng, vui tươi. Tiếp theo điểm đầu tiên là một thanh tìm kiếm được thiết kế lại; giờ đây nó không phải là một nút riêng biệt mà chiếm toàn bộ khu vực có thể sử dụng được ở phần trên cùng của ứng dụng, do đó đơn giản hóa việc truy cập vào nó. Và thanh số lượng người đăng ký, nút đăng ký kênh và quay lại cấp độ trước đó theo quan điểm của tác giả nằm ở phía dưới, đây cũng là một giải pháp hữu ích xét về mặt dễ sử dụng.
Nhà thiết kế đã kết hợp phần thư viện (lịch sử video đã xem, quản lý video đã tải xuống, video đã thích, v.v.) với phần cài đặt hồ sơ người dùng, giờ đây cả hai tham số đều có thể được truy cập bằng cách nhấp vào ảnh người dùng; Theo tôi, mặc dù điều này còn gây tranh cãi nhưng ở một mức độ nào đó, đây vẫn là quyết định đúng đắn vì nó đơn giản hóa việc tương tác của người dùng với dịch vụ và làm cho ứng dụng trở nên dễ hiểu hơn đối với những người dùng mới làm quen với thế giới công nghệ di động.
Để biết thêm thông tin về ý tưởng YouTube của Alex, hãy đọc bài viết gốc.
Khái niệm Google Play Âm nhạc trong Material Design 2.0
Lấy cảm hứng từ bài thuyết trình và hàng tá tác phẩm của các nhà thiết kế khác, tôi quyết định thử tạo ra thứ gì đó của riêng mình, sử dụng một trong những dịch vụ hiện tại của Google làm cơ sở; lựa chọn của tôi là Play Âm nhạc. Tôi chưa bao giờ làm việc với dịch vụ này trước đây, đặc biệt là với tư cách là một nền tảng phát trực tuyến, nhưng vì không có nhiệm vụ nên tôi phải làm vậy. Ấn tượng của tôi về dịch vụ này là cực kỳ tích cực, nếu chỉ vì bản thân ứng dụng hoạt động bình thường và không gặp sự cố, không giống như Apple Music mà tôi đã sử dụng kể từ khi phát hành trên Android.
Nhìn chung, các dịch vụ tương tự nhau và cả hai đều thực hiện nhiệm vụ chính - phát nhạc. Và cả hai đều có phàn nàn về giao diện, nhưng vì hôm nay chúng ta đang nói về Google nên chúng tôi sẽ xem xét dịch vụ của họ cho phù hợp.
Màn hình chính
Khiếu nại đầu tiên về màn hình chính là tôi không thích việc một không gian rộng lớn như vậy chỉ bị chiếm giữ bởi thanh tìm kiếm và bìa danh sách phát với các lựa chọn. Trên thực tế, trước hết, tôi quyết định khắc phục điều này.
Theo ý tưởng của tôi, màn hình chính vẫn như cũ, nhưng được thiết kế lại một chút với các lựa chọn album, bài hát, danh sách phát dựa trên sở thích của người dùng, chỉ bây giờ để xem nội dung và phát bản nhạc mong muốn, bạn không cần phải thực hiện một cú nhấp chuột thêm và rời khỏi màn hình chính, điều tương tự cũng áp dụng cho quá trình chuyển đổi giữa các phần (trang chủ, gần đây, cuộc diễu hành nổi tiếng, v.v.), giờ đây có thể được thực hiện bằng cách vuốt qua màn hình.
Người chơi
Điểm thứ hai chưa thành công trong thiết kế, theo tôi, chính là người chơi. Trong ứng dụng Google Play Âm nhạc chính thức, bìa bài hát bị kéo dài theo toàn bộ đường chéo của màn hình điện thoại thông minh, đó là lý do tại sao chúng trông rất cẩu thả và mờ trên các thiết bị có màn hình độ phân giải cao. Tôi đã trình bày giải pháp cho vấn đề như sau:
Giờ đây, các bìa được đặt gọn gàng ở giữa và bản xem trước của các bản nhạc trước và tiếp theo được hiển thị ở cạnh trái và phải, như thể gợi ý về khả năng chuyển đổi chúng bằng một cú vuốt.
Thư viện phương tiện
Điều thứ ba tôi không thích ở Play Music là cách bố trí và trang trí của thư viện media. Theo tôi, cấu trúc của nó quá phức tạp. Ví dụ: để truy cập phần này từ màn hình chính, bạn cần thực hiện tối đa bốn hành động: vuốt để hiển thị menu bên; bấm để chọn phần “Thư viện nhạc”; vuốt qua danh sách để chọn tab mong muốn (danh sách phát, đài phát thanh, nghệ sĩ, album).
Do đó, tôi đã di chuyển nút có quyền truy cập vào các bản nhạc đã thêm vào thanh dock bên dưới và khi nó mở ra, theo mặc định, tab album sẽ được hiển thị với khả năng sắp xếp chúng theo ngày phát hành, phần bổ sung và bảng chữ cái.
Menu/Thanh bên
Để phù hợp với các nguyên tắc thiết kế ứng dụng mới của Google, tôi đã chuyển menu thông thường có quyền truy cập vào cài đặt sang góc trên bên phải.
Trình bày khái niệm Google Play Âm nhạc trên Behance
Phần kết luận
Tóm lại, tôi muốn nói rằng tôi rất hài lòng với con đường mà Google đang cố gắng đi theo. Ngoài bước nhảy vọt lớn trong sự phát triển và sự tiện lợi của các dịch vụ của mình, công ty đang tiến về phía trước với mã thiết kế của mình. Cách đây sáu tháng, viết một bài viết về trải nghiệm sử dụng iOS 6 vào năm 2018, tôi chợt nghĩ rằng trong những năm qua, hệ điều hành di động Android và iOS không phát triển nhiều về mặt hình ảnh và thiết kế ý tưởng của giao diện, nhưng bây giờ tôi tôi hoàn toàn không bị thuyết phục về quan điểm của mình, ít nhất là liên quan đến Android.
Cám ơn vì sự quan tâm của bạn!
