Thực đơn
trang chủTập tin và thư mục

Giới thiệu thực tế về Material Design Lite của Google. Tương tác, màn hình trống và hoạt ảnh

Bài viết này dành cho những ai đang có ý định tham gia phát triển thiết bị di động. Các chuyên gia phát triển đã biết tất cả những điều này.

Quả táo

Hãy bắt đầu với hướng dẫn có lẽ là phức tạp nhất của Apple. Thoạt nhìn, mọi thứ có vẻ hơi keo kiệt, mỗi công cụ hoặc phần có 2-3 hình ảnh và một vài đoạn văn: hướng dẫn được phát triển rất tốt về mặt trình bày thông tin trên mỗi đơn vị văn bản. Bạn hoàn toàn có thể hiểu tất cả các khuyến nghị chỉ trong vài giờ.

Trong số những điểm hạn chế, đáng chú ý là thiếu tiếng Nga nhưng lại có bản dịch nghiệp dư. Đọc: Medium.com/ios-guidelines-in-russian.

chú ý đến hướng dẫn từng bước một về phát triển ứng dụng cho iOS: https://developer.apple.com/library/ios/referencelibrary/GettingStarted/DevelopiOSAppsSwift/index.html. Hướng dẫn sẽ giúp một người, thậm chí một chút quen thuộc với việc phát triển ứng dụng, làm quen với các giai đoạn phát triển. Để thực hiện việc này, trước tiên bạn cần tải xuống công cụ dành cho nhà phát triển Xcode chính, sau đó tạo kiệt tác nhỏ đầu tiên của mình với hướng dẫn từng bước.

Bằng cách kết hợp hướng dẫn này với hướng dẫn dành cho nhà phát triển, bạn có thể hiểu biết ban đầu về cách phát triển ứng dụng iOS. Đối với mọi thứ khác, bao gồm cả việc nhai lại những gì bạn đọc, đều có một nghề - “”.

Google

Material Design từ Android là một cụm từ thường được tìm thấy trên Internet, nhưng thật không may, nhiều người hiểu nó chỉ là một bộ tiện ích đồ họa bổ sung của Google, không có gì hơn. Trên thực tế, đây là một đề xuất khá nghiêm ngặt được thiết kế để làm cho ứng dụng của bạn rõ ràng và dễ dàng cho người dùng tìm hiểu.

Hướng dẫn bao gồm từ phần giới thiệu chung đến cách sử dụng các công cụ cụ thể. Những thông tin cơ bản và những bước đầu tiên của nhà phát triển đều có kèm theo hình ảnh và video: có thể thấy ngay rằng Google đã làm việc khá chăm chỉ với hướng dẫn này.

Từ quan điểm về tính hữu ích của nội dung được trình bày, người ta cũng chỉ có thể nói theo hướng tích cực: mỗi thuộc tính của công cụ, mỗi hành động đều được cung cấp bằng văn bản và mô tả đồ họa, cũng liên kết đến hướng dẫn phát triển. Do đó, ngay cả khi không có hướng dẫn hành động cụ thể, hãy tạo một ứng dụng nghiêm túc Vật liệu thiết kế Cả người mới bắt đầu và chuyên gia đã làm sẵn đều có thể làm được.

Điện thoại Windows

Sau khi nghiên cứu và làm việc kỹ càng với những hướng dẫn tương tự của Google và Apple, tôi không khỏi cảm thấy hướng dẫn của Windows Phone có phần vụng về. Có vẻ như những người sáng tạo thực sự không muốn tuân thủ chính sách của công ty về việc chuẩn bị những tài liệu như vậy, nhưng các ông chủ nhất quyết nhấn mạnh.

Ưu điểm chính của hướng dẫn là tiếng Nga. Thông tin được trình bày chi tiết nhưng không có cấu trúc thuận tiện; có quá nhiều “nước” cho một hướng dẫn như vậy. Tuy nhiên, nếu bạn coi hướng dẫn này không phải là một cuốn sách giáo khoa mà trước tiên bạn phải đọc rồi mới bắt đầu phát triển mà là một cuốn sách tham khảo bỏ túi, thì bạn có thể thừa nhận rằng những điều bổ sung như vậy là hữu ích.

Tất cả các nhà sản xuất phổ biến nền tảng di động Chúng tôi đã tiếp cận việc phát triển sổ tay thiết kế chính một cách có trách nhiệm và khôn ngoan. Làm việc với mỗi người trong số họ đều thuận tiện, dễ chịu và quan trọng nhất là hữu ích. Tất cả những gì bạn phải làm là học cách tạo ứng dụng, khi đó các hướng dẫn chắc chắn sẽ hữu ích.

Bạn nghĩ gì về các hướng dẫn? Nói với chúng tôi.

Đào tạo theo hướng dẫn: nghề nghiệp.

Từ tác giả: năm 2014 Google đã xuất bản đặc tả Material Design, ngôn ngữ hình ảnh, nhằm mục đích tập hợp các nguyên tắc thiết kế đã được thiết lập, trải nghiệm người dùng liền mạch trên các nền tảng và thiết bị cũng như đổi mới khoa học và công nghệ.

Nếu bạn đang sử dụng Bower làm trình quản lý, bạn có thể gõ lệnh sau để cài đặt MDL trong thư mục bower_comComponents: bower install Material-design-lite –save

Nếu bạn sử dụng npm, để cài đặt MDL trong thư mục node_modules bạn cần nhập lệnh sau: npm install Material-design-lite –save

Google khuyên bạn nên sử dụng các tệp CSS và JS nằm trên CDN. Phương pháp này chúng tôi đã sử dụng nó trong bản demo. Trước hết, trong phần head của tài liệu HTML bạn cần kết nối tập tin CSS Các biểu tượng MDL, Material Design và kiểu dự án mà bạn có thể thực hiện các thay đổi của riêng mình:

< link rel = "stylesheet"

href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" >

< link rel = "stylesheet"

href = "https://fonts.googleapis.com/icon?family=Material+Icons" >

< link rel = "stylesheet" href = "css/styles.css" >

Kiểu chữ trong Material Design Lite

Vì bằng tiếng Anh và những ký tự tương tự (ký tự Latinh, Hy Lạp và Cyrillic) trong vật liệu thiết kế Phông chữ được chọn là Roboto và Noto.

Noto cũng hỗ trợ các chữ viết "dày đặc" như tiếng Trung, tiếng Nhật và tiếng Hàn, cũng như các chữ viết "cao" như các ngôn ngữ từ Đông Nam Á và Trung Đông, tức là. Tiếng Ả Rập, tiếng Hindi, v.v. Để đưa phông chữ Roboto vào dự án của bạn, hãy thêm thẻ liên kết vào đầu phần đầu của tài liệu HTML:

< link rel = "stylesheet"

href = "http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300" >

Đối với các ký tự Latinh, Hy Lạp và Cyrillic, đặc tả Material Design đề xuất thang kiểu chữ là 12, 14, 16, 20 và 34. Bạn có thể áp dụng các nguyên tắc kiểu chữ MDL bằng cách thêm một tập hợp các lớp đặc biệt vào đánh dấu của mình. Ví dụ: .mdl-typography—display-2 cho h1 và .mdl-typography—display-1 cho

Sẽ tạo kích thước phông chữ lần lượt là 45px và 34px:

Tiêu đề

Phụ đề

< h1 class = "mdl-typography--display-2" >Tiêu đề< / h1 >

< p class = "mdl-typography--display-1" >

Phụ đề

< / p >

MDL có khá nhiều lớp với thang đo typographic, khả năng truy cập và khả năng đọc. Các lớp học giúp hiển thị nội dung văn bản dễ dàng hơn, sau đó sẽ rất thú vị khi đọc bất kể trang web được xem từ thiết bị nào.

Cách chọn màu cho dự án của bạn trong MDL

Hãy xem tệp MDL của thư viện Material.indigo-pink.min.css. Tên tệp đề cập đến bảng màu Thiết kế Vật liệu trong tệp styles. Bảng màu mặc định sử dụng màu chàm làm màu chủ đạo và màu hồng làm màu nhấn. Nhưng bạn hoàn toàn không bị giới hạn ở những màu này. Dưới đây là hướng dẫn thiết kế vật liệu về cách phát triển bảng màu của riêng bạn và cách sử dụng nó trong MDL.

Nguyên tắc chọn màu sắc trong Material Design

Material Design thích kết hợp các màu sáng và trầm, bóng tối và điểm nổi bật: “Màu sắc phải bất ngờ và tươi sáng
Đặc tả thiết kế Material Design của Google"

Tuy nhiên, điều này không có nghĩa là bạn có thể sử dụng màu sắc tùy ý trên một trang web. Nó hoàn toàn ngược lại.
Material Design cung cấp nhiều bảng màu đẹp, hài hòa. Để thuận tiện cho việc lựa chọn màu sắc, mỗi màu trong bảng màu có nhiều cấp độ và giá trị khác nhau. hệ thập lục phân. Có 500 màu cơ bản trong nguyên tắc thiết kế vật liệu. Các màu khác được sử dụng tốt nhất để tạo điểm nhấn.

Khi phát triển bảng màu của riêng bạn, Material Design khuyên bạn nên sử dụng ba sắc thái từ bảng màu chính và một màu nhấn từ bảng màu phụ. Ví dụ:

Khi bạn hiểu các nguyên tắc sử dụng màu sắc trong thiết kế vật liệu, đã đến lúc chọn bảng màu thú vị cho dự án MDL của bạn. Dưới đây tôi sẽ cho bạn biết làm thế nào để làm điều này.

Cách tùy chỉnh bảng màu mặc định trong Material Design Lite

Chuyển từ bản địa bảng màu Màu chàm có thể được áp dụng cho bạn theo một trong những cách sau. Nếu bạn đã sử dụng Google CDN như trong bản demo ở trên, bạn cần:

Đặt URL thành tệp kiểu MDL trong thuộc tính href của liên kết trong tiêu đề tài liệu HTML của bạn.

Thay thế màu chàm và màu hồng bằng màu chính và màu nhấn tương ứng.

Ví dụ: bạn chọn màu ngọc lam làm màu chính và màu vàng làm màu nhấn trong bảng màu. Dưới đây là kiểu URL tới MDL trên CDN sẽ trông như thế nào:

< link rel = "stylesheet"

href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css" >

Đó là tất cả! Nếu bạn lưu trữ các tệp MDL đã biên dịch và rút gọn trên máy chủ của mình thì trang web MDL sẽ giúp bạn. Ở đó, bạn sẽ tìm thấy công cụ Tùy chỉnh và Xem trước, cho phép bạn chọn màu chính và màu nhấn bằng cách sử dụng bánh xe bảng màu tương tác. Sau đó, bạn có thể tải xuống tệp CSS với chủ đề bạn đã chọn và dán trực tiếp vào dự án của mình:

Bản demo HTML cho bài viết này sử dụng bảng màu chàm mặc định, nhưng bạn có thể thoải mái thử nghiệm các màu khác nhau theo một trong hai cách.

Lớp thành phần MDL

MDL cung cấp nhiều thành phần web được sử dụng phổ biến, bao gồm các lớp, nút, thẻ, nút radio, v.v. Bắt đầu xây dựng cấu trúc mẫu HTML của bạn bằng cách sử dụng các lớp Material Design Lite. Lớp MDL mở rộng đến toàn bộ vùng chứa với các lớp.mdl-layout .mdl-js-layout. Bắt đầu với đoạn mã bên dưới, dán nó ngay sau thẻ body mở:

CSS flexbox được sử dụng để tạo các lớp trong MDL. Thẻ có class.mdl-layout là thùng chứa linh hoạt với thuộc tính flex-direction: cột. Lớp này bao gồm các thành phần phụ sau:

Lớp điều hướng

Cách sử dụng các tab để điều hướng

Bạn có thể tạo menu bằng một trong các cách sau: phương pháp sau đây:

Tiêu đề trong suốt

đã sửa bảng điều khiển bên Không tiêu đề

Tiêu đề cố định

Tiêu đề cố định và thanh bên

Tiêu đề cuộn

Tiêu đề xếp tầng

Vui lòng xem tất cả các tùy chọn trên trong phần điều hướng MDL và cũng có thể thử nghiệm từng tùy chọn trong dự án của bạn.

Đối với bản demo ở đầu bài, ở đó tôi đã chọn thành phần Tabs làm menu. Điều tuyệt vời về các tab là mặc dù nội dung được chia thành các màn hình riêng biệt theo từng phần nhưng tất cả các phần đều nằm trên cùng một trang. Điều này có nghĩa là khi người dùng nhấp vào liên kết tab, họ không đợi máy chủ tải trang mới trong trình duyệt. Nội dung có sẵn ngay lập tức, từ đó tạo ra trải nghiệm thú vị cho khách truy cập trang web.

Để nhanh chóng tạo tiêu đề bằng các tab, bạn sẽ cần: Thêm hai lớp nữa vào vùng chứa mà chúng ta đã tạo trước đó - .mdl-layout—fixed-header và .mdl-layout—fixed-tab.

< div class = "mdl-layout

Mdl-js-layout mdl-layout--fixed-header

Bố cục Mdl--tab cố định">

< / div >

Lưu ý cách MDL sử dụng các lớp CSS từ không gian tên BEM.

Tab Tiêu đề của bạn 1 Tab 2

< header class = "mdl-layout__header" >

< div class = "mdl-layout__header-row" >

< ! -- Title -- >

< span class = "mdl-layout-title" >Tiêu đề của bạn< / span >

< / div >

< ! -- Tabs -- >

< div class = "mdl-layout__tab-bar mdl-js-ripple-effect" >

< a href = "#fixed-tab-1" class = "mdl-layout__tab is-active" >Tab 1< / a >

< a href = "#fixed-tab-2" class = "mdl-layout__tab" >Tab 2< / a >

< / div >

< / header >

Tất cả những gì còn lại là thêm các bảng tương ứng với nội dung:

bảng nội dung 1 bảng nội dung 2

< main class = "mdl-layout__content" >

< ! -- Panel 1 -- >

< section class = "mdl-layout__tab-panel is-active" id = "fixed-tab-1" >

< div class = "page-content" >

< ! -- контентпанели1 -- >

bảng nội dung 1

< / div >

< / section >

< ! -- Panel 2 -- >

< section class = "mdl-layout__tab-panel" id = "fixed-tab-2" >

< div class = "page-content" >

< ! -- контентпанели2 -- >

bảng nội dung 2

< / div >

< / section >

< / main >

Bảng có id="fixed-tab-1" có lớp được đặt thành .is-active và sẽ được hiển thị theo mặc định.

Cách đăng bài nội dung bổ sungở thanh bên

Bản demo cũng sử dụng phần ngăn kéo. Ngăn kéo là một thanh bên có thể được ẩn hoặc hiển thị bằng cách nhấp vào nút. Bạn cũng có thể làm cho bảng điều khiển mở và cố định để nội dung của nó luôn hiển thị.

Tiêu đề của bạn

< div class = "mdl-layout__drawer" >

< span class = "mdl-layout-title" >Tiêu đề của bạn< / span >

< / div >

Xem các đoạn mã này hoạt động hoặc xem bản demo đã hoàn thành với các tab và thanh bên.

Lưới trong Material Design Lite

MDL sử dụng lưới 12 cột cho máy tính để bàn, Lưới 8 cột cho máy tính bảng (tối đa 800px) và 4 cột cho màn hình thiết bị di động (tối đa 500px). Bạn có thể biến vùng chứa thành lưới bằng cách thêm lớp .mdl-grid:

Theo mặc định, vùng chứa các cột lưới chiếm toàn bộ chiều rộng của màn hình. Nếu bạn không thích điều này, hãy giới hạn chiều rộng bằng cách sử dụng style. Ví dụ: trong bản demo cho bài viết này, cả hai tùy chọn đều được triển khai, cả lưới toàn màn hình và khối ở giữa:

Bạn có thể đạt được kết quả này nếu bạn bọc từng phần trong các phần tử .mdl-grid khác nhau và thêm một lớp tùy chỉnh có CSS ​​max-width: 960px vào một phần riêng biệt.

< div class = "mdl-grid intro-section" >

< ! -- контентненавесьэкран-- >

< / div >

Phần giới thiệu (độ rộng tối đa: 960px; )

Phần giới thiệu (

chiều rộng tối đa: 960px;

Ngoài ra nếu bạn muốn thoát khỏi lề lề giữa các cột lưới, MDL có một lớp tuyệt vời cần được thêm vào vùng chứa cột - .mdl-grid—không có khoảng cách:

< div class = "mdl-grid mdl-grid--no-spacing" >

< ! -- контент-- >

< / div >

Bạn sẽ nhận được một cái gì đó như:

< div class = "content-grid mdl-grid" >

< div class = "mdl-cell" >

< ! -- контент-- >

Material Design là một khái niệm thiết kế được tạo ra để thống nhất các dịch vụ, giao diện và các sản phẩm khác. Khái niệm này được Google phát triển và giới thiệu tới đông đảo khán giả vào ngày 25 tháng 6 năm 2014 tại hội nghị Google I/O. Cốt lõi của sự phát triển bảng màu, thuộc tính và thành phần của đối tượng thiết kế. Material Design được các nhà phát triển bổ sung và cập nhật thường xuyên. Nói bằng ngôn ngữ đơn giản, ý tưởng cơ bản là một thiết kế dạng khối mở ra và gấp lại thành hình khối giống như những tấm thẻ, sử dụng hiệu ứng đổ bóng. Bản thân các thẻ nên chuyển đổi suôn sẻ với nhau.

Chiến lược đằng sau thiết kế này là tạo ra một hệ thống toàn diện Kinh nghiệm người dùng, khả năng dịch vụ thâm nhập vào hầu hết Những khu vực khác nhau hoạt động cuộc sống của người dùng PC.

Khi tạo ra các đồ vật, chúng ta tiến hành từ kinh nghiệm hàng thế kỷ và dựa vào nó. Nhưng thiết kế phần mềm- đây vẫn chỉ là mới ra đời và có hệ thống phát triển sản phẩm. Nhìn vào nó một cách trọn vẹn, chúng tôi tự hỏi: nó bao gồm những gì?

- John Wiley, Giám đốc thiết kế tìm kiếm của Google

Nguyên tắc chính

Các nguyên tắc chính của Material Design bao gồm bề mặt xúc giác, thiết kế in ấn, hoạt ảnh có ý nghĩa và thiết kế thích ứng.

Bề mặt xúc giác. Giao diện bao gồm "giấy kỹ thuật số". Các lớp “giấy” này được đặt chồng lên nhau và tạo bóng. Nhờ những cái bóng này, người dùng PC hiểu rõ hơn những điều cơ bản khi làm việc với giao diện.

Thiêt kê in ân. "Giấy kỹ thuật số" hiển thị "mực kỹ thuật số". Đối với hình ảnh mực kỹ thuật số, phương pháp thiết kế áp phích hoặc tạp chí truyền thống được sử dụng. Các yếu tố chính của thiết kế in ấn là tỷ lệ, lưới, màu sắc và không gian. Từ đó, trọng tâm, thứ bậc và ý nghĩa được tạo ra. Nhờ màu sắc, phông chữ, kích thước, nền và các yếu tố khác, thiết kế giao diện đã được tạo ra. Sử dụng nó tập trung sự chú ý vào chính chức năng, những điểm chính của quản lý sản phẩm hoặc dịch vụ.

Hoạt hình ý nghĩa. Độ rõ ràng và dễ hiểu của hoạt ảnh ứng dụng quyết định trực tiếp thời gian mà người dùng máy tính cá nhân dành để hiểu kết quả của các hành động được sử dụng trong chương trình này. Hoạt ảnh là một loại gợi ý để quản lý giao diện Material Design.

Thiết kế thích ứng. Một trong những tính năng của Material Design là tính linh hoạt của nó, tức là khả năng sử dụng ba thành phần được mô tả ở trên trên các thiết bị khác nhau, chẳng hạn như máy tính, điện thoại, máy tính bảng, v.v.

Bề mặt xúc giác

Bề mặt xúc giác là những mảnh “giấy kỹ thuật số” tương tự, không giống như giấy thông thường, có siêu năng lực - chúng có thể kéo dài, kết nối và thay đổi hình dạng.

Bề mặt

Bề mặt là một phần của thành phần thiết kế tạo ra bóng làm cho thành phần này khác với thành phần khác. Material Design hướng tới sự đơn giản tối đa và thiết kế “sạch sẽ”.

Thiết kế “thuần túy” thường được gọi là khả năng truyền tải các thuộc tính của một vật thể thông qua độ dốc hoặc bóng mà không cần sử dụng cấu trúc. Tất cả các bề mặt đều có bóng riêng và độ cao nhất định.

Chiều sâu

TRONG " thiết kế phẳng“Cố gắng không sử dụng bóng thể hiện âm lượng. Đồng thời, bóng được thiết lập một hệ thống phân cấp nhất định và cấu trúc của các thành phần giao diện. Bóng sâu làm nổi bật chủ thể chính và tập trung sự chú ý vào đó một cách tinh tế và trang nhã.

Độ sâu là manh mối về cách các vật thể tương tác. Tại thời điểm người dùng cuộn, tấm màu xanh lá cây được gắn vào lớp trên cùng và tạo thành bóng. Điều này thể hiện rõ ràng không chỉ sự chuyển động của “mực” mà cả sự chuyển động nền trắng nằm bên dưới.

Lớp sâu dưới cùng là "đáy".

  • Hãy nhớ hậu cần. Nhiều những hộp thoại, các cửa sổ nổi, thanh công cụ có độ cao nhất định. Để tránh va chạm, chúng cần định kỳ di chuyển dọc theo trục Z.
  • Đừng ép các nút. Bạn chỉ nên sử dụng nút nổi trong trường hợp cần thiết vì việc sử dụng nút này ngay lập tức mang lại hiệu ứng Material Design cho thiết kế. Bạn không nên sử dụng nó để xác nhận bất kỳ hành động nào hoặc đóng cửa sổ.
  • Không phải tất cả mọi thứ cần phải có trên thẻ. Chỉ nên sử dụng thẻ khi đối tượng chứa nhiều hình thức và lượng nội dung lớn. Đối với các tùy chọn khác, sẽ hợp lý hơn khi sử dụng văn bản hoặc danh sách truyền thống.
  • Chủ nghĩa tối giản trong hộp thoại. Hộp thoại chỉ nên được sử dụng để xác nhận hành động của người dùng khi có câu hỏi.
Thiêt kê in ân

Tất cả các đối tượng nằm trên bề mặt của thiết kế vật liệu đều được áp dụng “mực kỹ thuật số”. Những đối tượng này là hình ảnh, bài kiểm tra, chữ tượng hình. Việc sắp xếp các đồ vật này tuân theo nguyên tắc thiết kế in ấn.

Kiểu chữ thanh lịch

Kiểu chữ rất quan trọng trong thiết kế in ấn. Nó thiết lập cấu trúc nội dung và ảnh hưởng đến sự hình thành phong cách của một thương hiệu cụ thể.

Kiểu chữ tạo thành một cấu trúc gồm các phần tử có kích thước, phông chữ, thứ bậc riêng. Với sự trợ giúp của chúng, chúng tôi hiểu trực quan những phần tử nào quan trọng hơn và tại sao một số phần tử trong số đó là chính còn những phần tử khác chỉ là thứ yếu.

Kiểu chữ tương phản

Một nguyên tắc quan trọng khác của in ấn là sự tương phản của kiểu chữ. Dễ dàng nhận thấy rằng dòng tiêu đề lớn và phông chữ tối nghĩa là điều gì đó quan trọng và cơ bản, trong khi văn bản nhỏ hơn và tông màu nhạt hơn nghĩa là thông tin thứ cấp. Độ tương phản cho phép bạn làm nổi bật những điểm chính, mang lại tính thẩm mỹ tổng thể cho nội dung.

Lưới mô-đun và hướng dẫn

Nếu các lưới cơ bản được sử dụng trong thiết kế màn hình thì trong thiết kế in ấn - lưới mô-đun. Đối với Material Design, lưới có bước 8dp được sử dụng.

Một tính năng đặc biệt của vị trí nội dung trong Material Design là vị trí của các nguyên tắc cơ bản. Nhờ chúng, các vết lõm được tạo ra từ viền màn hình, ảnh hưởng đến cấu trúc nội dung trang và khả năng kiểm soát ánh nhìn của người dùng. Kết quả là chúng ta thấy văn bản chính ở giữa màn hình và các phần tử bổ sung được đặt bên ngoài nó, gần các đường viền.

Hình tượng hình học

Các biểu tượng đơn giản nhất từ ​​​​lâu đã được sử dụng trên nền tảng hệ thống Android. Trong Material Design, chúng trông thậm chí còn đơn giản hơn và đẹp mắt hơn.

Ví dụ: các chỉ báo và nút được làm nổi bật bằng màu sắc tươi sáng, phong phú. Nhờ những màu sắc này, chúng tập trung vào các yếu tố điều khiển chính (nút nổi, v.v.). Nếu cần thiết, hãy thực hiện màu sắc bổ sung Nên sử dụng các sắc thái cơ bản, kín đáo trong thiết kế.

Tải xuống các biểu tượng về chủ đề:

Màu sắc

Màu sắc trong thiết kế chịu trách nhiệm về tính biểu cảm. Trước đây, trong Android, cách phối màu chỉ là thứ yếu, nhưng bây giờ nó được gán một trong Những vai trò chủ đạo. Trong Material Design, bảng màu cơ bản bao gồm các sắc thái nhấn và chính.

Thanh hành động được sơn màu chủ đạo và thanh trạng thái làm nổi bật nó với tông màu bão hòa hơn. Màu nhấn được sử dụng cho sọc, chỉ báo, nút nổi. Nó thu hút sự chú ý đến các yếu tố chính của bảng.

Điểm nhấn được đặt theo điểm và với số lượng nhỏ. Đối với phần còn lại của giao diện, màu sắc được sử dụng theo quy tắc: một lượng lớn văn bản (danh sách các chữ cái trong thư) được để ở kích thước chuẩn và màu sắc được thêm vào để thu hút sự chú ý của người dùng PC; một lượng nhỏ văn bản (máy tính, ảnh) được tăng kích thước lên 2-3 lần và thêm các khuôn màu.

Trong hệ thống Android, bạn có thể tô màu giao diện một cách linh hoạt, tức là làm nổi bật các màu chính trong tổng thể bức ảnh.

Những bức ảnh đẹp

Trong Material Design, bạn có thể và thậm chí cần sử dụng nhiều hình ảnh và hình minh họa khác nhau. Hình ảnh thường không có khung. Bản thân thanh trạng thái được làm không màu để không làm phân tán sự chú ý khỏi hình ảnh. “Mực kỹ thuật số” luôn được sử dụng không chỉ vì vẻ đẹp mà còn vì chức năng của thiết kế.

  • Xây dựng thương hiệu được khuyến khích.
  • Chúng ta không được quên thụt lề và không gian trống (đối với lưới cơ sở 8dp, đối với thụt lề - 72 dp).
  • Sử dụng hình ảnh tươi sáng.
Hoạt hình có ý nghĩa

Material Design, giống như thế giới vật chất, sử dụng hoạt ảnh có ý nghĩa để hiển thị cho người dùng những gì đã xảy ra trong khoảnh khắc này. Nghĩa là, người dùng sẽ thấy rằng không một vật thể nào từ đâu đến và biến mất vào hư không.

Ví dụ 1. Hoạt ảnh cho thấy thẻ cụ thể này, sau khi được nhấp vào, sẽ xuất hiện ở nền trước, mở ra và hiển thị nhiều thông tin hơn.

Ví dụ 2. Khi bạn nhấp vào một ngày trong lịch, một sự kiện sẽ bật lên, được tách ra một cách trơn tru dưới dạng một lớp từ lịch chung, biến thành một khối riêng biệt và hiển thị trong một khối riêng biệt chi tiết kèm theo mô tả về sự kiện này .

Hoạt ảnh giúp tập trung sự chú ý của người dùng và tập trung ánh nhìn vào các hành động của giao diện.

Sự phản ứng lại

Một khía cạnh quan trọng khác của hoạt ảnh trong Material Design là phản ứng với hành động nhất định Người sử dụng máy tính. Những thay đổi trong giao diện Android L xảy ra sau khi bạn chạm vào ngón tay. Những thay đổi này được phản ánh dưới dạng hành động giống như làn sóng.

Hoạt hình vi mô

Hoạt hình vi mô là cực kỳ quan trọng. Chúng được sử dụng như một phản hồi cho mọi thao tác của người dùng. Điều này làm cho giao diện chi tiết hơn và phản hồi nhanh hơn.

Rõ ràng và sắc nét

Nguyên tắc cuối cùng của hoạt hình là sự rõ ràng và sắc nét của hành động. Material Design có đường cong hoạt hình thú vị. Tất cả các đối tượng nhanh chóng phản ứng với hành động của người dùng, quay trở lại mạnh mẽ, nhưng mất nhiều thời gian hơn để đóng băng và chuyển sang trạng thái bình tĩnh cuối cùng. Cuối cùng, người dùng không lãng phí thời gian chờ đợi, điều đó có nghĩa là họ không cảm thấy khó chịu hoặc trải qua những cảm xúc tiêu cực khi tương tác với giao diện.

  • Hãy suy nghĩ trước về hoạt hình.
  • Sử dụng hoạt ảnh một cách tối ưu (không nên sử dụng quá nhiều vì tất cả hoạt ảnh phải có ý nghĩa).
Thiết kế thích ứng

Cuối cùng khía cạnh quan trọng Thiết kế vật liệu là một khái niệm thiết kế đáp ứng. Điều này có nghĩa là các lựa chọn để áp dụng ba khía cạnh còn lại vào màn hình khác nhau thiết bị (điện thoại, PC, TV, v.v.).

Từ chung đến cụ thể


Phương pháp phổ biến nhất là nén lượng thông tin cùng với việc nén chính màn hình. Bạn có thể chứa nhiều nội dung trên TV của mình. Đầu tiên, điện thoại sẽ hiển thị một danh sách, bạn có thể nhấp vào danh sách này để xem thông tin chi tiết.

Thụt lề

TRÊN màn hình lớn nội dung được đặt bằng cách sử dụng các khối. Chúng lấp đầy không gian trống và có thể được kéo dài theo chiều rộng. Việc kéo dài xảy ra với khả năng dễ đọc của nội dung. Trên phần còn lại của màn hình, các vết lõm được tạo ra để có thể đặt các nút hoặc ô nổi trên đó.

Hướng dẫn


Thụt lề được thiết lập bằng cách sử dụng hướng dẫn. Độ rộng của vết lõm đối với điện thoại thông minh, máy tính bảng, máy tính và TV sẽ hoàn toàn khác nhau. Vì vậy, đối với máy tính bảng là 80 dp và đối với màn hình điện thoại thông minh là 72 dp.

Kích thước

Tất cả các thành phần giao diện phải có nhiều tỷ lệ. Kích thước màn hình của máy tính bảng và điện thoại thông minh khác nhau, nhưng các ứng dụng sử dụng các thành phần có nhiều thông số sẽ thích ứng với mọi kích thước thiết bị.

Khối

Một mạng lưới các khối mô-đun giúp thiết lập nhịp điệu trực quan để đưa ra quyết định tối ưu.

Thanh công cụ

Thanh hành động là một trong những thành phần chính của giao diện. Nó chứa các nút hành động và tiêu đề. Trong Android L, thanh hành động đã trở thành một đơn vị điều khiển chức năng và hấp dẫn. Điều này đạt được nhờ thực tế là các biểu mẫu, nút nổi và điều hướng kéo ra với các điều khiển thuận tiện có thể được đặt trong Thanh công cụ.

  • Bạn không nên sử dụng ngăn điều hướng cho công cụ đơn giản. Bạn chỉ nên sử dụng điều hướng cho nhiều tác vụ trong ứng dụng.
  • Hãy táo bạo với các thanh công cụ.
  • Đặt nút nổi ở vị trí tối ưu nhất. Đừng chụp chặt vào góc dưới cùng.
  • Thực hành các yếu tố giao diện theo cả chiều dọc và chiều dọc màn hình ngang thiết bị.
Vật chất như một phép ẩn dụ

Các nhà phát triển của Google đã cố gắng kết hợp thiết kế đẹp, hấp dẫn với sự đổi mới. công nghệ hiện đại va khoa hoc.

Chủ nghĩa duy vật ở quả cầu kỹ thuật sốĐây không phải là lần đầu tiên chúng được sử dụng. Vì vậy, Apple gần đây đã sử dụng triết lý skeuomorphism (bắt chước nhận thức về các vật thể trực quan từ thế giới vật chất xung quanh chúng ta) trong thiết kế giao diện.

Một ví dụ điển hình về điều này là ứng dụng Newsstand. Ở đây chúng ta hình dung ra những đồ vật quen thuộc: báo, tạp chí đặt trên kệ. Bằng cách lật qua các tạp chí này, chúng tôi mô phỏng việc lật một cuốn sách bình thường thực sự từ Cuộc sống hàng ngày. Như vậy, đời sống truyền thống hiện thực được nhân đôi trong “kỹ thuật số”.

Phát triển thiết kế kỹ thuật số

Đại đa số người dùng tương tác với môi trường kỹ thuật số hàng ngày. Chúng không còn yêu cầu sự tương đồng chính xác giữa các vật thể ảo và thế giới thực. Tất cả người dùng làm quen với thời điểm này càng sớm thì thiết kế kỹ thuật số càng sớm có thể bắt đầu tích cực tiến lên.

Dựa trên điều này, Material Design không còn bị ảnh hưởng bởi chủ nghĩa đa dạng nữa. Bây giờ đây chỉ là một bước mới trong quá trình phát triển của các vật thể ảo.

Khả năng hiển thị là cơ sở cơ bản

Bề mặt và cạnh của các điều khiển khác nhau trong Material Design tạo ra các tín hiệu về cách điều hướng và thao tác trên giao diện, tương tự như các hành động trong đời thực.

Đặc điểm xúc giác của đồ vật giúp phân biệt đồ vật chính với đồ vật bổ sung và xác định mối quan hệ giữa chúng.

Nguyên tắc cơ bản của thiết kế vật liệu cũng bao gồm các nguyên tắc thiết kế in ấn. Không chỉ chú trọng đến tính thẩm mỹ mà còn tạo ra một cấu trúc, hệ thống phân cấp đặc biệt và tạo ra một hệ thống quản lý đơn giản.

Thành phần trực quan của Material Design dựa trên màu sắc phong phú, các cạnh sắc nét, kiểu chữ lớn và khoảng cách lớn giữa các thành phần khác nhau.

Động lực có ý nghĩa

Sự chú ý chính tập trung vào hành vi (hành động) của người dùng. Sự tương tác của anh ấy với thiết kế diễn ra trên cơ sở trải nghiệm người dùng tích lũy và không có gì khác.

Ví dụ về các trang web theo phong cách Thiết kế Vật liệu

Ngay khi bản concept xuất hiện trên Internet, rất nhiều đại diện của Material Design đã xuất hiện trên mạng.

Các trang web mẫu được tạo tuân thủ nghiêm ngặt các nguyên tắc cơ bản của Thiết kế Vật liệu. Chúng đơn giản và rõ ràng, chứa các nút nổi, bóng, màu sáng Và hiệu ứng hình ảnh, điều hướng trơn tru. Tất cả điều này làm tăng thêm trải nghiệm người dùng tuyệt vời.



Video

Material Design đã thu hút một lượng lớn khán giả. Anh ấy trình bày cách tạo một giao diện người dùng một cách chính xác sao cho người dùng hoàn toàn dễ hiểu và rõ ràng theo cách giống hệt như một đối tượng quen thuộc từ thế giới thực, mà bạn có thể chạm vào bằng tay.

Roman Nurik, một trong những nhà thiết kế của nhóm Google, đã giải thích ứng dụng I/O 2014 đã thay đổi như thế nào trong quá trình phát triển để tuân thủ các nguyên tắc của Material Design. Chúng tôi đã dịch video của anh ấy đặc biệt dành cho bạn.

Video từ kênh Google Design.

Tại hội nghị nhà phát triển Google I/O 2018, ngoại trừ Android đã cập nhật và hội nhập sâu hơn trí tuệ nhân tạo với các dịch vụ của mình, Google đã giới thiệu tiêu chuẩn mới trong thiết kế hệ thống và ứng dụng di động- Thiết kế Vật liệu 2.0. Có gì mới?

Khoảng trắng và độ mờ 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à lớp lót màu xám ở mức tối thiểu, chỉ có khoảng trắng đồng nhất và độ trong suốt. 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ừ nay trở đi, cài sẵn 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 đây là giải pháp đẹp nhất trong số các giao diện. IMHO. Công cụ mới dành cho nhà phát triển: 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 nguyên tắc mới của Google trong Android P. Ngoài ra, khi phát triển với 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 được làm tròn hơn và tối giản hơn.


Như nhiều người đã lưu ý, vẻ bề ngoài trở nên rất giống với Apple iOS 10 và 11, nhưng chắc chắn bước này được công ty thực hiện đặc biệt dành 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 trong số đó đang tăng lên đáng kể hàng năm, bởi vì diện mạo của hệ thống và phần mềm này hoạt động tốt hơn nhiều với màn hình tròn của chúng.

Phông chữ mới


Trong thiết kế mới của logo và dịch vụ có thương hiệu, các nhà phát triển và nhà thiết kế của Google Chúng tôi đã 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 trang web và Dịch vụ di động Google. Hiện tại, một trong những đứa con đầu lòng của kho ứng dụng là Google Chơi game, Google Tasks và một ứng dụng dành cho 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ụ, mới Phiên bản 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 thông tin 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 khách hàng hiện tại lưu trữ video. 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 thay đổ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.


Người 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 Thông tin người dùng, bây giờ cả hai tham số có thể được truy cập bằng cách nhấp vào userpic. 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 đó nó vẫn có ý nghĩa giải pháp đúng, vì nó đơn giản hóa sự 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, những người 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 Google Concept. Chơi nhạc trong Thiết kế Vật liệu 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. Dịch vụ này tạo ra những ấn tượng 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 Âm nhạc, 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.


Điều phàn nàn đầu tiên về màn hình chính là tôi không thích nó như thế nào không gian rộng lớn, chiếm độc quyền 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.


Trong khái niệm của tôi màn hình chính cũng giống như vậy, nhưng nguồn cấp dữ liệu đượ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 nhấp thêm và rời khỏi phần chính màn hì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ể thực hiện được 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 chính thức Bìa bài hát trên Google Play Âm nhạc trải dài trên 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 trên các thiết bị có độ phân giải cao trên màn hình trông chúng rất luộm thuộm và lấm lem, 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 cách 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 để gọi thanh 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/Side Bar


Phù hợp với nguyên tắc thiết kế mới ứng dụng của Google, Tôi đã di chuyển menu thông thường có quyền truy cập 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 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. Đã viết một bài về kinh nghiệm sáu tháng trước sử dụng iOS Vào ngày 6 tháng 1 năm 2018, tôi thấy mình đã nghĩ rằng trong nhiều năm qua, thiết bị di động hệ điều hành Android và iOS chưa phát triển nhiều về mặt hình ảnh và thiết kế khái niệm của giao diện, nhưng hiện 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à so với Android.

Cám ơn vì sự quan tâm của bạn!

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, trước tiên hãy tạo trang 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 trực quan 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. Cung cấp tiện lợi tối đa nhận thức và tìm kiếm nội dung của bạn, 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 biết liệu 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. Hãy cố gắng tập luyện mạch logic cho các URL hình ảnh.
    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ể có 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. Vì vậy, sobaka.jpg được ưu tiên dùng làm tên 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 xấu(thuộc tính alt trống):
    • 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ể chỉ định thông tin thêm về hình ảnh và cung cấp cho Google địa chỉ của những hình ảnh mà lẽ ra không thể tìm thấy trong tệp Sơ đồ trang web.

    Sơ đồ trang web dành cho hình ảnh, trái ngược với tập tin thông thường loại này 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 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 hỗ trợ định dạng đồ họa

    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:

    dữ liệu hình ảnh…">

    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 Tuy nhiên, không phải tất cả các trình duyệt và robot tìm kiếm nhận ra các thẻ này, vì vậy, chúng tôi khuyên bạn cũng nên chỉ định URL dự phòng làm giá trị thuộc tính trong .

    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ẻ

    Phần tử Là một vùng chứa nhóm các thẻ với những nghĩa khác nhau cho cùng một hình ảnh. Nhờ đó, trình duyệt có thể chọn tùy chọn hình ảnh phù hợp dựa trên đặc điểm của thiết bị như mật độ điểm ảnh và kích thước màn hình. Ngoài ra, yếu tố hình ảnh giúp thuận tiện khi sử dụng các định dạng đồ họa mới trên các trang, có thể được hiển thị ở dạng đơn giản hóa nếu một ứng dụng khách cụ thể chưa hỗ trợ các định dạng đó.

    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 thực sự khuyên bạn nên đặt nội dung đó 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, Thuật toán của Google Dựa trên nhiều dữ liệu khác nhau, họ xác định kết quả nào không hiển thị. Trong trường hợp hình ảnh, nó đóng vai trò học máy Tuy nhiên, 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?