Đề xuất khi làm việc với Google Hình ảnh. Thiết kế Vật liệu là gì?

Đó là tất cả ngày hôm nay số lượng lớn khách hàng doanh nghiệp nêu rõ trong cột “Yêu cầu thiết kế” trong phần tóm tắt về việc tạo trang web - “Thiết kế Vật liệu”. Đồng thời, thành phần hình ảnh không thu hút sự chú ý của phân khúc doanh nghiệp bằng phong cách hợp thời trang và nổi tiếng.

Trước khi chuyển sang các ví dụ, chúng ta hãy hiểu một sự thật đơn giản:

Thiết kế Vật liệu là phong cách công ty của Tập đoàn Google. Bắt chước anh ta cũng ngu ngốc như việc một nhà sản xuất mì ăn liền cố gắng bắt chước thương hiệu Ferrari.

Nguyên tắc Material Design, ngoài chính Google, còn áp dụng cho sản phẩm của các công ty đối tác, chủ yếu là ứng dụng dành cho nền tảng Android. Dành cho những người khác không liên quan đến Google Corporation và Nền tảng Android, sự quan tâm đến Thiết kế Vật liệu phải hoàn toàn mang tính giáo dục.

Trang web của công ty đòi hỏi một cách tiếp cận có ý nghĩa hơn là chỉ nói “Tôi muốn nó như thế này”. Nếu một trang web là bộ mặt của một thương hiệu trên Internet thì nó phải có những đặc điểm riêng và tương ứng về mặt hình ảnh với hình ảnh chung của công ty.

Material Design vẫn chưa đạt đến đỉnh cao phát triển và ngày nay không có nhiều trang web không chỉ được thực hiện tuân thủ đầy đủ các yêu cầu của sách thương hiệu Google mà còn được tích hợp hài hòa vào thương hiệu trực quan của riêng họ. Tuy nhiên, chúng tôi đã tìm được một số ví dụ thành công các trang web theo phong cách Thiết kế Vật liệu.

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

Trang web Kiosk Browser không chỉ được thiết kế theo phong cách Material Design mà còn được tối ưu hóa tốt cho thiêt bị di động.

Một giải pháp rất thành công khi kết hợp hài hòa các chi tiết và thiết kế theo nguyên tắc Material Design (bóng, nút, thiết kế phẳng, màu sắc và hiệu ứng JS) và phong cách doanh nghiệp của nhóm trường quốc tế ISoE.

Nền tảng lifeaweso được thiết kế tuân theo các nguyên tắc cơ bản của Material Design: đơn giản, rõ ràng, dễ hiểu. Trang web vẫn đang được phát triển nhưng việc tích hợp hình ảnh theo phong cách Material Design trông khá tốt.

Công ty phát triển nổi tiếng giải pháp kỹ thuật số và các dịch vụ trực tuyến Futurice đơn giản là không thể tạo ra một trang web tồi. Phối màu pastel, điều hướng mượt mà và các yếu tố chức năng kết hợp với nhau để tạo ra một trải nghiệm tuyệt vời Kinh nghiệm người dùng.

Trang web này sử dụng nguyên tắc đơn giản vốn có trong Thiết kế Vật liệu và bổ sung cho nó sự sống động, ảnh chất lượng cao. Đặc biệt ấn tượng hinh nên khi cuộn.

Ở đây chúng ta thấy yếu tố chính của Material Design - thẻ. Trang web rất nhẹ và đơn giản: không có sự lộn xộn của các yếu tố không cần thiết và Thông tin mấu chốt hiển thị trong các khối riêng biệt.

Ngoài các thuộc tính khác từ khái niệm Thiết kế Vật liệu, ở đây còn có một yếu tố điều khiển chính - một nút nổi phía trên trang web. Sau những tấm thiệp, đây có lẽ là một trong những yếu tố đáng nhớ nhất trong định hướng thiết kế của Google.

Và tất nhiên, đừng quên nguồn gốc. Giao diện dịch vụ Cảnh báo của Googleđược cập nhật gần đây lên Material Design, giúp cải thiện đáng kể các đặc điểm hình ảnh và khả năng sử dụng của nó.

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 nền tảng khác nhau và thiết bị cũng như những đổi mới về công nghệ và khoa học.

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. Đây là phương pháp chúng tôi đã sử dụng trong bản demo. Trước hết, trong tiêu đề tài liệu HTML 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 Chất liệu Thiết kế nhẹ

Đối với tiếng Anh và các ngôn ngữ tương tự (ký tự Latinh, Hy Lạp và Cyrillic), phông chữ Roboto và Noto đã được chọn trong thiết kế vật liệu.

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. Để kết nối phông chữ Roboto với dự án của bạn, hãy thêm thẻ liên kết vào đầu đầu HTML tài liệu:

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

Đối với tiếng Latin, tiếng Hy Lạp và Ký tự CyrillicĐặc tả Material Design đề xuất các tỷ lệ typographic là 12, 14, 16, 20 và 34. Bạn có thể áp dụng các nguyên tắc typographic 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 Material Design 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 hướng dẫn 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 vật liệu thiết kế 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 hồng 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 liên kết href liên kết trong tiêu đề của 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-hồng mặc định, nhưng bạn có thể tự do thử nghiệm. màu sắc 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ở:

Để tạo các lớp trong MDL, hãy sử dụng Hộp linh hoạt CSS. 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 theo một trong các cách sau:

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à 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 của thiết kế này dựa trên việc tạo ra trải nghiệm người dùng toàn diện, khả năng thâm nhập các dịch vụ vào nhiều lĩnh vực khác nhau trong 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ế, Google Tìm kiếm

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. Sự rõ ràng và dễ hiểu của hoạt ảnh ứng dụng ảnh hưởng trực tiếp đến thời gian của người dùng máy tính cá nhânđể 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òn cả sự chuyển động của 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

Typography 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 lần nữa nguyên tắc quan trọng in ấn là một 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 màu có 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 có 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

Trong khi thiết kế màn hình sử dụng lưới cơ bản thì thiết kế in ấn sử dụng 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 thụt lề đượ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 đưa thêm màu sắc vào thiết kế thì nên sử dụng các sắc thái cơ bản, kín đáo.

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, bảng màu chỉ là thứ yếu, nhưng giờ đây nó được giao một trong những vai trò chính. 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 được làm nổi bật 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.

Các điểm nhấn được đặt theo điểm và trong 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: để lại một lượng lớn văn bản (danh sách các chữ cái trong thư). kích thước tiêu chuẩn và thêm màu sắc để 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ư trong thế giới thực, 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 rằng 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, sự kiện này sẽ xuất hiện 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à được hiển thị trong một khối riêng biệt chi tiết mô tả 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 mắt vào các hành động của giao diện.

Sự phản ứng lại

Một lần nữa điểm quan trọng hoạt ảnh trong Material Design được coi là phản ứng đối với một số hành động nhất định của người dùng PC. 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ế thích ứ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ở nên hấp dẫn và khối chức năng sự quản lý. Đ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ụ

Cho các nhà phát triển Google quản lý để kết hợp thiết kế hấp dẫn tốt 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 những cuốn tạp chí này, chúng ta bắt chước hành động lật giở một cuốn sách bình thường trong 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ó thể bắt đầu tích cực tiến lên càng sớm.

Dựa trên điều này, Thiết kế Vật liệu 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 gợi ý 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.

Khái niệm cơ bản Vật liệu thiết kế 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à thụt lề lớn giữa các phần tử 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 ý tưởng này được tung ra trực tuyến, đã có 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 mượt mà. 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ế Nhóm Google, mô tả cách ứng dụng I/O 2014 thay đổi 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.

• Hướng dẫn

Các nút có thể có hình lục giác?

Google I/O 2018 còn lại số lượng lớn tài liệu để hiểu. Có gì mới? Làm sao để sống xa hơn? Ứng dụng của tôi có lỗi thời không? Các nút có thể có hình lục giác? Các nhà thiết kế không còn cần thiết nữa? Sẽ dễ chịu hơn khi hiểu từ từ và theo từng phần nhỏ. Phần này là về thiết kế.

Sau bốn năm, tôi đã khá chán ngấy Material Design. Theo Google, 1,5 triệu ứng dụng đã được tạo ra dựa trên hệ thống thiết kế này. Tại sao? Suy cho cùng, ban đầu nó được tạo ra cho nhu cầu nội bộ của Google.

Nó giải quyết được vấn đề về tính không đồng nhất trong thiết kế của Android và việc thiếu bất kỳ hệ thống nào
- Nó phổ biến cho các thiết bị khác nhau: máy tính bảng, điện thoại thông minh, web.
- Nó được thiết kế theo quan điểm của người dùng và trực quan.

Hệ thống này bị cáo buộc là không linh hoạt và kết quả là nhận được một thiết kế sao chép bằng carbon. Nếu bạn thiết kế một dịch vụ tuân thủ nghiêm ngặt các hướng dẫn thì về mặt trực quan, các ứng dụng sẽ thực sự trở nên vô nghĩa. Mặt khác, tại sao lại đổ lỗi cho hệ thống? Những nguyên tắc chưa bao giờ là kinh thánh; người ta có thể đi chệch khỏi chúng. Có lẽ bạn chỉ chọn màu cho ứng dụng của mình trong bảng màu Google Color? Tôi hy vọng là không.

Mặt khác, bằng cách thêm các yếu tố tùy chỉnh, bạn có nguy cơ đáp ứng được yêu cầu của chính mình. Nhà phát triển Android trong một con hẻm tối và lắng nghe một bài phát biểu dài về lý do tại sao và bạn sai như thế nào. Đây là thời điểm nguy hiểm.

Tất cả những người chiến thắng Giải thưởng Thiết kế Vật liệu đều gặp rủi ro như nhau. Bạn có nhận thấy giao diện người dùng của các dự án này tùy chỉnh như thế nào không? Nhưng Google đã khuyến khích họ và mọi người đều ngạc nhiên.

Bây giờ thì rõ ràng: Google muốn chúng tôi tùy chỉnh ứng dụng của mình. Sản phẩm phải đẹp và khác biệt. MD được cập nhật là một nỗ lực nhằm hướng dẫn các nhà thiết kế và doanh nghiệp cách tùy chỉnh giao diện người dùng mà không sợ bị các nhà phát triển mắng.

Material.io – Thiết kế, Phát triển, Công cụ

Bạn có thể bắt đầu tìm hiểu hệ thống thiết kế từ trang web - không chỉ một số nội dung đã được cập nhật ở đó mà còn cả phong cách trực quan. Giờ đây, ngay cả màn hình 404 cũng sẽ hướng dẫn bạn và bằng cách nhấp vào một phần tử từ hướng dẫn, bạn sẽ thấy thông số kỹ thuật của nó với tất cả khoảng cách, phông chữ và liên kết để tải xuống từ thư viện Google.

Kết quả vẫn chưa ấn tượng. Lợi ích lớn nhất đáng lẽ phải là mã được tạo sẵn cho các phần tử gốc, nhưng liên kết GitHub không thú vị lắm. Vẫn còn quá sớm để yêu cầu các nhà phát triển thêm các phần tử mới vào ứng dụng của bạn - mã cho chúng vẫn chưa được cung cấp.

Điều gì sẽ xảy ra nếu các phần tử của bạn không phải là bản địa? Bạn có thể nhìn thấy các dấu hiệu nhưng bạn sẽ không thể có được các biểu tượng bị cắt. Vì vậy, còn quá sớm để nói về việc thay thế Zeplin.

Nhà truyền giáo thiết kế Mustafa Kurtuldu của Google về việc sử dụng công nghệ của họ trong việc phát triển ứng dụng Keep và Inbox.

Để đánh dấu

Bản dịch được thực hiện bởi đội ngũ trường Anh ngữ trực tuyến Skyeng.

Material Design cung cấp một bộ công cụ và quy tắc giúp bạn tiếp cận thiết kế UX một cách có ý thức khi tạo giao diện ứng dụng.

Nhưng điều gì sẽ xảy ra nếu những nguyên tắc này không hiệu quả đối với một sản phẩm nhất định? va họ lam gi nhà thiết kế của Google, khi họ phát triển một sản phẩm vượt xa những nguyên tắc cổ điển?

Nguyên tắc vật chất có tính thích ứng. Trong bài viết này, chúng ta sẽ xem xét hai ứng dụng Google, Keep và Inbox, để hiểu cách chúng không chỉ đi chệch khỏi một số quy tắc mà còn hình thành các quy tắc mới. Nguyên tắc vật chất Thiết kế.

Hộp thư đến: Lưới mô-đun

Phát triển mới dịch vụ bưu chính- một mục tiêu rất tham vọng đối với Google, khi mà Gmail đã có mặt trên thị trường. Mục tiêu của Inbox là tăng thêm chiều sâu cho thiết kế giao diện và tạo ra trải nghiệm người dùng độc đáo cũng như phong cách hình thức, tuân theo các quy tắc mới của Thiết kế Vật liệu.

Khi nhóm Inbox đang đối chiếu các thiết kế sơ bộ, ý tưởng Thiết kế Vật liệu vẫn đang được phát triển. Điều này mang đến cho Inbox một cơ hội tuyệt vời để đặt ra các tiêu chuẩn cho Material Design đồng thời giải quyết thách thức về chiều sâu và khối lượng trong giao diện người dùng.

Chiều sâu

Thiết kế ban đầu của Inbox không đủ linh hoạt—không gian lưới chỉ cho phép bảy email vừa với màn hình 13 inch. Con số này là quá ít, đặc biệt là so với Gmail, vốn chỉ chứa được 16-20 chữ cái.

Nếu bạn mở Gmail và Inbox trong các cửa sổ liền kề, bạn có thể thấy sự khác biệt lớn trong trọng lượng thị giác. Và một trong những điều nhất nhiệm vụ phức tạp là tìm sự cân bằng phù hợp giữa nội dung và khoảng trắng.

Tim Smith

Trưởng nhóm thiết kế tại Inbox

Bằng cách thay đổi cài đặt lưới, độ cao của dòng và giao diện của phông chữ, các nhà thiết kế Inbox có thể đạt được độ sâu tối ưu trong giao diện trong khi vẫn hiển thị 12-17 chữ cái, mỗi chữ cái bên trong thẻ Material Design. Giao diện ứng dụng thích ứng với thiết bị của người dùng. Ví dụ: phông chữ ở dòng “Chủ đề” thay đổi tùy theo kích thước màn hình.

Màu sắc, hình ảnh và biểu tượng

Sử dụng hình ảnh theo ngữ cảnh trong các nhóm email là một cách khác đặc điểm phân biệt dịch vụ. Ví dụ: nếu người dùng đang lên kế hoạch cho chuyến đi đến New York, anh ta sẽ nhìn thấy bầu trời Manhattan trên một tấm thẻ có chữ cái tương ứng.

Có rất nhiều biểu tượng trên thanh điều hướng bên trái, màu sắc của chúng tương ứng với chức năng của chúng trong ứng dụng. Khi người dùng nhấp vào Nút màu xanh lá cây"Đã hoàn thành", nền bảng trên cùng cũng chuyển sang màu xanh lục, cho biết bối cảnh đã thay đổi.

Bảng trên cùng

Một nhiệm vụ quan trọng khác của nhóm là phát triển thanh trên cùng của ứng dụng. Ý tưởng ban đầu là tạo ra một bảng điều khiển có thể biến đổi, không kéo dài theo chiều rộng của cửa sổ trình duyệt nhưng sẽ thay đổi tùy thuộc vào nội dung.

Chúng tôi đã làm việc khoảng chục Các tùy chọn khác nhau khái niệm này cho đến khi cuối cùng chúng tôi đi đến chế độ toàn màn hình, mà bạn thấy bây giờ. Chúng tôi cũng đã tạo ra một số khái niệm về thanh tìm kiếm trước khi chọn kiểu tốt nhất.

Tim Smith

Trưởng nhóm thiết kế tại Inbox

Các thẻ trong Inbox mở rộng và thu gọn, nghĩa là định dạng tiêu đề thay đổi tùy thuộc vào cách người dùng tương tác với bằng email. Thanh trên cùng cũng hiển thị thanh tìm kiếm và menu với các Ứng dụng Google. Cách tiếp cận này cho phép Inbox duy trì khả năng thích ứng mà không làm phức tạp giao diện.

Giữ: mẫu điều hướng thích ứng

Keep là ứng dụng ghi chú đa nền tảng, có khả năng mở rộng và thu gọn các thẻ trên màn hình, tập trung sự chú ý của người dùng khi thêm ghi chú mới. Bảng điều khiển phía dướiđiều hướng cho phép bạn nhanh chóng tạo ghi chú mới chỉ bằng một cú nhấp chuột.

Tương tác, màn hình trống và hoạt ảnh

Thông thường, người dùng sẽ phải đối mặt với một màn hình trống khi không có nội dung trên trang. Trong Keep, màn hình này trông giống như một khung vẽ trống nơi người dùng có thể nhanh chóng ghi lại ý tưởng của mình.

Khoảng trắng khuyến khích người dùng khám phá các mục menu trong bảng điều khiển mở rộng để hiển thị các bộ lọc khác nhau được biểu thị dưới dạng biểu tượng; menu bố cục cho phép bạn chuyển đổi giữa danh sách và lưới cũng như thanh điều hướng bên trái nơi bạn có thể thay đổi cài đặt ứng dụng cơ bản.

Chúng tôi đã làm việc rất nhiều về hoạt ảnh - cách hiển thị các ghi chú dưới dạng dòng, cách chúng di chuyển khi bạn mở và đóng chúng.

Genevieve Cuevas

Sự lựa chọn yếu tố chính xác Chất liệu: điều hướng phía dưới hoặc nút hành động nổi

Sự chính xác và dễ sử dụng - tính năng chính Giữ. Trong quá trình thiết kế lại ứng dụng, các nhà phát triển đã nghiên cứu các mẫu Material Design và cuối cùng chọn các thẻ giúp phân biệt các ghi chú với nhau, thanh điều hướng bên trái giúp dễ dàng tùy chỉnh ứng dụng và menu ngữ cảnh thay đổi tùy theo loại ghi chú - như ghi chú bằng các hộp kiểm hiển thị menu để kiểm tra và thay đổi các thành phần trong danh sách.

Khi kết hợp với nhau, những yếu tố này tạo nên một sự rõ ràng và giao diện chức năng, thích ứng với hoàn cảnh cụ thể. Khi thiết kế lại Keep, những người sáng tạo đã thử nghiệm một số thành phần điều hướng cơ bản của ứng dụng - đặc biệt, họ đã thử thay thế điều hướng hiện có bằng nút hành động nổi.

Điều hướng ban đầu cho phép bạn tạo ghi chú mới chỉ bằng một lần nhấn và nút tác vụ nổi yêu cầu hai lần nhấp: một lần để hiển thị các tùy chọn và lần thứ hai để tạo ghi chú.

Khi chúng tôi giới thiệu nút nổi, một số người dùng phàn nàn rằng việc tạo ghi chú chỉ bằng hai lần nhấp chuột không thuận tiện bằng.

Genevieve Cuevas

Kỹ sư phần mềm Google Keep

Nhiều người dùng đã sử dụng ứng dụng trước đây và đã quen với việc điều hướng bằng một cú nhấp chuột đã không chấp nhận thay đổi này. Bằng cách thử nghiệm và cuối cùng từ chối nút nổi, các nhà phát triển Keep đã có thể chọn giải pháp phù hợp nhất với lợi ích của sản phẩm của họ.

Một hướng dẫn, không phải một bộ quy tắc

Nhóm Keep và Inbox đã sử dụng các nguyên tắc này làm cơ sở cho ứng dụng của họ. Khi họ gặp phải một tình huống người dùng không hoạt động, họ có thể điều chỉnh thiết kế của mình cho phù hợp với nhu cầu của người dùng.

Material Design cung cấp hướng dẫn dựa trên số năm trải nghiệm Google, nhưng với sự trợ giúp của nó, hoàn toàn không thể giải quyết được bất kỳ vấn đề nào. Ví dụ về Keep và Inbox cho thấy rằng bạn có thể sử dụng các nguyên tắc Material Design, thay đổi chúng nếu cần cho sản phẩm của mình.