Thực đơn
trang chủAndroid

Bài viết về thiết kế vật liệu của Google bằng tiếng Nga. Google Material Design - một diện mạo khả thi cho một kỷ nguyên mới. Tối ưu hóa hình ảnh của bạn cho Tìm kiếm an toàn

  • Hướng dẫn
Các nút có thể có hình lục giác?

Google I/O 2018 để lại một lượng lớn tài liệu cần phải 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án với Material Design. Qua 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 các vấn đề về thiết kế không đồng nhất cho 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 hình ảnh. 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. Cũng 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.

Bài viết này dành cho những ai đang có ý định bắt đầu phát triển điện thoại 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.

Hãy xem hướng dẫn từng bước để phát triển ứng dụng 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ừ 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ể, cả người mới bắt đầu và chuyên gia đã có sẵn đều có thể tạo một ứng dụng Material Design nghiêm túc.

Điện thoại Windows

Sau khi nghiên cứu kỹ và làm việc với các 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 này có phần “vụng về” Điện thoại Windows. 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 chúng ta coi hướng dẫn này không phải là một cuốn sách giáo khoa mà bạn phải đọc trước rồi mới bắt đầu phát triển, mà là một hướng dẫn bỏ túi- thì chúng ta có thể thừa nhận rằng sự dư thừa đó là hữu ích.

Tất cả các nhà sản xuất nền tảng di động phổ biến đều áp dụng cách tiếp cận có trách nhiệm và thông minh trong việc phát triển hướng dẫn thiết kế chính. 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.

Trong bài viết hôm nay, chúng tôi sẽ đề cập đến một chủ đề chưa được thảo luận về Khả năng sử dụng. Công bằng mà nói, chúng tôi lưu ý rằng ở RuNet, sự quan tâm đến chủ đề này chỉ mới bắt đầu có động lực, mặc dù thực tế là bản thân khái niệm này đã ra đời vào năm ngoái. Chúng ta đang nói về một hướng thiết kế giật gân và, như một số người tin, mang tính cách mạng, mà Google gọi là thiết kế vật liệu.

Thiết kế vật liệu thậm chí không phải là một số cách tiếp cận mới để xây dựng mối quan hệ giữa người dùng và môi trường ảo, mà là toàn bộ triết lý điều chỉnh các mối quan hệ đó. Giống như nhiều hiện tượng thực sự tươi sáng và mới mẻ trong thời gian gần đây, thiết kế vật liệu là sự tổng hợp thành công của những ý tưởng và khái niệm đã được gặp riêng lẻ trong các sản phẩm khác nhau hoặc, như người ta nói, đã xuất hiện. Vẫn còn nhiều tranh cãi về việc liệu thiết kế vật liệu có phải là một hướng đi tốt hay không, cũng như sự tỉ mỉ và tỉ mỉ tìm kiếm đủ loại khuyết điểm, nhưng có lẽ không ai phủ nhận rằng khái niệm này phản ánh rất chính xác tinh thần của thời đại và khát vọng của con người. người dùng thông thường. Nó có tính thẩm mỹ, hấp dẫn, trực quan và rõ ràng là rất dễ sử dụng. “Thiết kế Material Design thật tuyệt” - loại cảm xúc này gắn kết cả khán giả nhiệt tình và khán giả phê phán hơn, chỉ ra những thiếu sót của Material Design.

Thiết kế vật liệu có thể được coi là bước nghiêm túc đầu tiên và có thể đoán trước được hướng tới sự thống nhất đại chúng của các giao diện, và do đó, sự thống nhất Kinh nghiệm người dùng như vậy. Tính năng này là chìa khóa của thiết kế vật liệu - nó phổ biến và thống nhất. Như một giây tính năng đặc trưng Trong thiết kế vật liệu, cần nhấn mạnh tính trực quan, đây là khía cạnh quan trọng tiếp theo sau sự thống nhất toàn diện. Trên thực tế, hai thành phần này - sự thống nhất giữa các giao diện và tính trực quan tối đa - được thiết kế để làm cho thiết kế vật liệu trở thành một hiện tượng thực sự đại chúng.

Google công bố thiết kế vật liệu cho công chúng vào ngày 25 tháng 6 năm 2014 là thiết kế cho phòng phẫu thuật mới Hệ thống Android, sau này được gọi là Lollipop. Tuy nhiên, có thể sử dụng đầy đủ thiết kế vật liệu chỉ trong khuôn khổ tạo ứng dụng cho Lollipop, tuy nhiên, một số ứng dụng dành cho Android 4 cũng có thể được thiết kế lại theo phong cách vật liệu, tuy nhiên, với hạn chế nhất định. Yếu tố chính và có lẽ là duy nhất hạn chế đáng kể quyền tự do của các nhà phát triển ứng dụng cho Lollipop là khả năng tương thích kém của khái niệm thiết kế vật liệu với các phiên bản Android trước đó và tỷ lệ phổ biến của Android 5.1 Lollipop vẫn còn thấp. Trong mọi trường hợp, việc loại bỏ lỗ hổng mới nhất chỉ là vấn đề thời gian.

Android kẹo mút

Việc phát hành khái niệm thiết kế vật liệu gắn liền với sự xuất hiện của một phương pháp chi tiết, dễ tiếp cận và kỹ lưỡng hướng dẫn từ Google. Khi thảo luận về thiết kế vật liệu trong bài viết của mình, chúng tôi sẽ thường xuyên tham khảo hướng dẫn toàn diện và sinh động này do các nhà thiết kế của Google phát triển.

Luận văn chính và nguyên tắc cơ bản của Material Design

Toàn bộ triết lý của thiết kế vật liệu dựa trên bốn cơ bản và nguyên tắc rõ ràng:

  1. Bề mặt. Được thể hiện dưới dạng những tấm thẻ được tạo ra từ “giấy kỹ thuật số”, những bề mặt như vậy hoàn toàn tuân theo các quy luật của thế giới vật lý, có phản hồi xúc giác và cung cấp phản hồi mạnh mẽ cùng với tính trực quan cao.
  2. In kiểu chữ. Thay vì phát minh lại bánh xe, tại sao không tận dụng kinh nghiệm hơn một thế kỷ trong lĩnh vực in ấn? Xét rằng bề mặt ban đầu hiện được thể hiện bằng các lớp giấy ảo, thực tế hữu hình, việc áp dụng thông tin cho nó theo các ví dụ tốt nhất về sản phẩm in là khá hợp lý. Nói một cách khoa trương hơn, Google đã điều chỉnh các quy tắc về kiểu chữ “thực” cho màn hình thiêt bị di động.
  3. Hoạt hình. Hoạt ảnh trong thiết kế vật liệu phải tuân theo các định luật vật lý và do đó tuân theo những mong đợi trực quan của người dùng. Mối quan hệ của các vật thể chuyển động, ảnh hưởng của chúng lên nhau, cách chúng xuất hiện và di chuyển - tất cả những điều này phải thực tế, logic và có thể dự đoán được.
  4. Thiết kế thích ứng. Khía cạnh chính mà chúng ta đã nói đến ở đầu bài viết. Thiết kế đáp ứng nhằm mục đích thống nhất trải nghiệm người dùng và làm cho nó nhất quán trên tất cả các nền tảng.

Bằng cách kết hợp những nguyên tắc khá đơn giản và hiển nhiên này, Google đã tạo ra một hệ thống mạnh mẽ và cực kỳ logic mà chúng ta có thể sẽ sử dụng dưới hình thức này hay hình thức khác trong ít nhất 5 năm tới. Chúng ta hãy xem xét kỹ hơn từng khía cạnh trong bốn khía cạnh của thiết kế vật liệu.

Bề mặt, tính chất và chức năng của chúng

Tính vật chất của khái niệm Google tập trung vào các đặc tính của bề mặt. Bản thân cấu trúc giao diện càng thực tế càng tốt - nó có độ sâu bị giới hạn bởi độ dày của thiết bị. Ví dụ, một thiết bị dày 1 cm theo thiết kế vật liệu sẽ chứa một thế giới bên trong có cùng độ dày. Điều này rất giống với một bể cá mỏng có bức tường phía sau và kính phía trước, nhưng thay vì sinh vật biển trôi nổi xung quanh bể cá này, bể cá này có các bề mặt giống như những mảnh giấy và được phân bố thành từng lớp trên khắp độ dày của bể cá. Và, cũng giống như những cư dân dưới nước, những bề mặt thẻ này hoàn toàn tuân theo các quy luật vật lý - đôi khi có vẻ như chúng còn hơn cả thực tế, được bao bọc giữa bức tường phía sau của điện thoại thông minh và kính hiển thị.

Thiết kế vật liệu cắt

TrụcZtrên thế giớivật liệu thiết kế chịu trách nhiệm về khối lượng của giao diện

Trong thế giới thiết kế vật liệu, các bề mặt tồn tại ở các mức độ sâu khác nhau. Và nếu trong thiết kế phẳng, một trong những tiền thân của vật liệu, không có chút âm lượng nào, thì trong thiết kế vật liệu gần như không thể nhận ra, bóng sáng tạo thành độ sâu vô cùng chân thực.

Cách hiển thị bóng trong Material Design

Hãy tưởng tượng rằng trên bàn của bạn có những mảnh giấy thông thường được cắt thành hình chữ nhật với nhiều kích cỡ khác nhau. Bằng cách di chuyển chúng trên mặt bàn và chồng lên nhau, bạn sẽ thấy rõ thẻ giấy nào ở trên thẻ kia. Điều này xảy ra do có bóng mờ ở các cạnh của tờ giấy. Trong thiết kế vật liệu, các nhà phát triển đã tái tạo hoàn toàn nguyên tắc này và việc phân phối thẻ “giấy kỹ thuật số” trên khắp cấp độ khác nhau, khi một thẻ chồng lên thẻ khác, hoàn toàn tương ứng với hệ thống phân cấp nội dung - một bề mặt nằm chồng lên một thẻ khác và tạo bóng trên đó. khoảnh khắc này cái chính, sự chú ý của người dùng tập trung vào nó.

Bề mặt ưu tiên hiện lên phía trước, tạo bóng trên “chiếc lá” phía dưới

Bản thân bề mặt thực sự là một mặt phẳng có hình dạng nhất định (trong hầu hết các trường hợp là hình chữ nhật), có khả năng tạo bóng. Bề mặt đóng vai trò là nền tảng cho nội dung, một tờ giấy trắng mà sau này các phần tử khác sẽ xuất hiện. Không có gì hơn bề mặt trong thiết kế vật liệu - các mảnh “giấy kỹ thuật số” không và không thể có bất kỳ kết cấu hoặc chuyển tiếp độ dốc nào.

Đặc điểm của kiểu chữ trong Material Design

Như chúng tôi đã đề cập, kiểu chữ trong thiết kế vật liệu cũng “thật” như bề mặt. Điều này có nghĩa là nó sử dụng tất cả các quy tắc và cách tiếp cận được sử dụng trong in ấn. Trong các ví dụ do Google trình bày, bạn có thể tìm thấy những ví dụ hay nhất về kiểu chữ cổ điển trong thực thi ảo.

Ví dụ về kiểu chữvật liệu thiết kế

Phông chữ

Phông chữ chuẩn, trong một khoảng thời gian dàiđược sử dụng trong Android - Roboto. Hệ điều hành Lollipop và Material Design mới cũng sử dụng nó làm phông chữ chính. Ngoài Roboto, các ứng dụng Android cũng có thể sử dụng phông chữ Noto, dành cho những ngôn ngữ không có phiên bản Roboto riêng. Cho dù phong cách chung các ứng dụng dành cho Android và các đề xuất về phông chữ được đưa ra trong hướng dẫn, trong một số trường hợp, việc sử dụng phông chữ độc quyền của riêng bạn thay vì Roboto, được thiết kế để hình thành các liên tưởng phù hợp trong người dùng, là hoàn toàn có thể chấp nhận được.

Nét chữngười máy

Một trong những đặc điểm typographic đáng chú ý nhất trong thiết kế vật liệu là việc sử dụng kích thước phông chữ tương phản. Kỹ thuật cổ điển này có thể được nhìn thấy trong nhiều ví dụ từ Google - các tiêu đề trên màn hình được gõ bằng phông chữ rất lớn và nhờ đó, chúng nổi bật đáng kể so với phần còn lại của văn bản. Ở một mức độ nhất định, do các tiêu đề lớn có thể nhìn thấy từ xa, người dùng có thể dễ dàng điều hướng giữa các màn hình ứng dụng và nhanh chóng nắm bắt được bản chất của nội dung hiện tại. Ngoài ra, các tiêu đề ở định dạng này trông thực sự bắt mắt.

Kiểu chữ có độ tương phản cao đang hoạt động

Nguyên tắc sắp xếp nội dung hay bố cục trongvật liệu thiết kế

Cách đặt nội dung trong ý tưởng thiết kế vật liệu cũng tương ứng với các nguyên tắc thiết kế in ấn. Thành phần chính và hình thành phong cách của bố cục ảo trong thiết kế vật liệu là vị trí của các trường. Lề và phần đệm được sắp xếp sao cho sự chú ý của người dùng tập trung vào nội dung nằm ở giữa cột chính và nhẹ và truy cập nhanh có thể sử dụng các phần tử bổ sung nhờ lề trái rộng. Một nguyên tắc tương tự có thể được quan sát thấy trên các trang của nhiều ấn phẩm in ấn.

Cấu trúc và bố cục các trường trong Material Design

Biểu tượng

Hình tượng được sử dụng trong thiết kế vật liệu thể hiện sự phát triển hợp lý về ý tưởng đơn giản hóa tối đa có thể được thấy trong nhiều phiên bản trước Android. Google mô tả các biểu tượng cho tài liệu là đơn giản, rõ ràng và thân thiện. Đồng thời, ý tưởng về chất liệu cũng có thể mở rộng sang các biểu tượng - bản thân Google cũng nhất quán thể hiện ý tưởng về chất liệu trong các biểu tượng của sản phẩm của mình. Ví dụ: biểu tượng Gmail của một phong bì giấy xuất phát từ bản sao ngoài đời thực của nó. Trong môi trường thiết kế vật liệu, hình ảnh đơn giản của một phong bì trông gần giống như nguyên mẫu “thật”—biểu tượng hiển thị các bóng đặc biệt thể hiện các đường cong và cấu trúc vật lý của một mảnh giấy được gấp thành hình phong bì.

Nguyên mẫu ảo của phong bì giấy và biểu tượng đã hoàn thiệnGmail

Đáng chú ý là cách tiếp cận vật chất để tạo biểu tượng chỉ được phép đối với những biểu tượng tượng trưng cho một sản phẩm cụ thể, chẳng hạn như Gmail. Các biểu tượng khác, hệ thống (hoặc biểu tượng giao diện người dùng) lấp đầy các ứng dụng, có tính chất ít vật chất hơn. Chúng thực sự tối giản, thống nhất và đơn giản. Do tính đơn giản và tính biểu tượng của chúng, chúng có thể đọc được ngay cả khi giảm đi rất nhiều. Những biểu tượng này bị chi phối bởi các hình dạng hình học.

Biểu tượngAndroid kẹo mút– có thể có điều gì tối giản và đơn giản hơn không?

Đối với các nhà phát triển, Google cung cấp một bộ biểu tượng ấn tượng được làm theo phong cách thiết kế vật liệu. Trong bộ sưu tập này, có lẽ bạn có thể tìm thấy bất kỳ biểu tượng cần thiết nào để tạo các ứng dụng với thiết kế vật liệu. Bộ biểu tượng thiết kế vật liệu của Google có sẵn trên GitHub. Tôi cũng muốn đề cập đến tài nguyên Materialdesignicons.com, nơi bạn không chỉ có thể tìm thấy các biểu tượng của các tác giả khác mà còn cung cấp những biểu tượng do chính bạn phát triển.

Triết lý màu sắc

Trong thiết kế Lollipop mới, màu sắc đóng vai trò quan trọng hơn so với các phiên bản Android trước. Ngay cả ở khía cạnh thiết kế này, tính chất vật chất mà chúng ta nói đến xuyên suốt bài viết cũng rất đáng chú ý. Bản thân Google trình bày riêng chính sách màu mới, lưu ý các nguồn cảm hứng như kiến trúc hiện đại, biển báo đường và thậm chí cả băng đánh dấu vỉa hè. Đồng thời, sự kết hợp màu sắc tươi sáng nhân tạo trong thiết kế vật liệu cùng tồn tại với các sắc thái tự nhiên, trầm lặng. Theo nhiều cách, cách tiếp cận này một lần nữa phù hợp với quy trình in ấn, theo đó màu sắc có tác động đặc biệt đến nhận thức của người đọc về thông tin.

Ý tưởng chính khi làm việc với màu sắc trong thiết kế vật liệu là phân chia các sắc thái thành các sắc thái chính và điểm nhấn. Google đề xuất sử dụng 500 sắc thái khác nhau làm màu cơ bản, cùng nhau tạo nên bảng màu Chính. Tất cả các màu khác không có trong bảng màu này đều có thể được sử dụng làm màu nhấn.

Ví dụ về màu cơ bản từSơ đẳngbảng màu và các màu nhấn liên quan (được hiển thị ở các khối bên dưới, với ký hiệu chữ cái BẰNG "MỘT" trước số bóng)

Khi thiết kế giao diện, Google khuyên bạn nên giới hạn tối đa ba màu từ bảng màu chính và một màu nhấn. Màu chính được áp dụng cho các thành phần như thanh tác vụ và cũng được áp dụng (như trong trường hợp màu trắng) cho bề mặt chứa nội dung văn bản chính. Điều đáng chú ý là tô màu cho hành động ứng dụng thanh một trong những màu chúng ta phải sơn thanh trạng thái một màu tối hơn cùng màu:

Trạng thái quán balấy màuhoạt động quán ba, nhưng vẫn nổi bật với sắc thái đậm hơn, đậm hơn

Màu sắc thực sự tươi sáng và bắt mắt trong thiết kế vật liệu được sử dụng để tạo điểm nhấn. Các thành phần ứng dụng đang hoạt động cần có các điểm nhấn màu sắc như vậy, tất nhiên trước hết là Nút Hành động Nổi. Ngoài ra, cần sơn nhiều loại thanh trượt và công tắc bằng màu sáng để tạo điểm nhấn.

Các yếu tố hoạt động như nút nổi và thanh trượt có tính trực quan cao, phần lớn nhờ vào việc sử dụng màu nhấn để khuyến khích người dùng thực hiện hành động.

Hoạt hình

Phong trào Quảng trường Siêu đẳng, Kazimir Malevich (1920) vàÝ nghĩa Cử động, Google Vật liệu Thiết kế (2014)

Hoạt hình trong thiết kế vật liệu là một trong những khía cạnh thú vị nhất của nó. Chính nhờ hoạt ảnh chi tiết tuân theo các quy luật vật lý của thế giới thực mà các thiết bị chạy Android 5 trở nên quyến rũ và khiến người dùng muốn mày mò hàng giờ, đặc biệt là lúc đầu sau khi làm quen. Mục đích chức năng của hoạt ảnh trong thiết kế vật liệu là liên tục chứng minh cho người dùng thấy hậu quả của hành động của mình. Hoạt ảnh thu hút sự chú ý và hiển thị rõ ràng, hùng hồn cho người dùng chính xác những gì đang xảy ra tại một thời điểm nhất định.

Giống như tất cả các thành phần khác của thiết kế vật liệu, hoạt hình tuân theo các định luật vật lý về cơ bản không phải là điều gì mới - các nhà phát triển chỉ điều chỉnh các quy tắc của hoạt hình cổ điển cho phù hợp với môi trường ảo của hệ điều hành.

Cơ sở của hoạt hình thiết kế vật liệu là sự tương tác của các mặt phẳng, những mảnh “giấy kỹ thuật số” mà chúng ta đã nói đến trước đó. Những mặt phẳng này, di chuyển ở các cấp độ khác nhau trong thế giới của chúng, bị giới hạn bởi bức tường phía sau của điện thoại thông minh và mặt kính màn hình, có thể gặp nhau, dịch chuyển và dịch chuyển lẫn nhau, tiến lên phía trước theo lệnh của người dùng, tăng kích thước và lấp đầy không gian màn hình.

Giống như trong hoạt hình cổ điển, mọi chuyển động của máy bay đều được điều chỉnh quy tắc nghiêm ngặt, nhờ đó chuyển động của các bề mặt trong thế giới thực được mô phỏng chính xác.

Thứ nhất, bất kỳ vật thể nào trong thế giới thực đều có khối lượng và do đó có một lực cản nhất định. Để di chuyển một vật thì phải tác dụng một lực lên nó. Trong trường hợp này, vật thể (trong trường hợp của chúng ta là bề mặt) sẽ không bắt đầu chuyển động ngay lập tức - do khối lượng và lực cản của nó, nó sẽ tăng tốc trong một thời gian, và sau đó, sau khi chuyển động chính do tác dụng của lực kết thúc, nó cũng sẽ chậm lại một thời gian, chuyển động nhờ quán tính. Áp dụng những điều này luật đơn giản, chúng ta có được một giao diện với các chuyển động bề mặt cực kỳ chân thực.

Các bề mặt chuyển động có khả năng di chuyển tự nhiên, mang lại khả năng chống chuyển động có thể dự đoán được

Di chuyển lớp "giấy kỹ thuật số" trong thư viện

Thứ hai, thiết kế vật liệu rất hiệu quả trong việc chỉ ra sự xuất hiện hoặc sự xuất hiện của một đối tượng mới khỏi màn hình. Cũng giống như trong thế giới thực, trong môi trường thiết kế vật liệu, các vật thể không xuất hiện từ đâu cả, cũng không đi đến đâu cả. Trong Hệ điều hành Lollipop, sự xuất hiện của một vật thể mới ở tiền cảnh có liên quan đến những biến thái gây tò mò - thực sự, vật thể đó không đột ngột xuất hiện từ hư không, nó trượt ra ngoài, dần dần giãn ra và có hình dạng của một bề mặt. Trong trường hợp này, không có sự tôn trọng về tỷ lệ xảy ra, bởi vì sự tăng hoặc giảm theo tỷ lệ và đối xứng trên bề mặt sẽ tạo ra ấn tượng đang tiến lại gần hoặc di chuyển ra xa, trong khi chúng ta cần biểu thị sự xuất hiện trên màn hình của một mảnh “giấy kỹ thuật số” mới , biệt lập và độc lập.

Để nhận ra tác động của sự xuất hiện của một vật thể mới, thiết kế vật liệu đưa ra hai cách tiếp cận với mức độ rõ ràng khác nhau. Dấu hiệu sống động và rõ ràng nhất về sự xuất hiện của một bề mặt mới được hiện thực hóa với sự trợ giúp của mức giảm ngày càng tăng - sau khi chạm bằng ngón tay và gọi đối tượng, bề mặt bắt đầu lan truyền trên màn hình như một làn sóng.

Một giọt nước lan rộng tạo thành một bề mặt làm việc mới là một trong những hiệu ứng trực quan nhất trong thiết kế vật liệu.

Hiệu ứng của bề mặt trải rộng có thể rất trang nhã và đầy màu sắc.

Một cách khác để hiển thị cho người dùng nguyên tắc chuyển tiếp là độ phóng đại không đối xứng, không đồng đều của bề mặt hình chữ nhật do người dùng gây ra. Hình chữ nhật bề mặt được kéo dài không cân xứng cho đến khi nó có được hình dạng nhất định. Kỹ thuật này cho phép bạn thu hút sự chú ý của người dùng bằng chuyển động tích cực, phi tuyến tính và thu hút sự chú ý của anh ta đến nguyên tắc xuất hiện các bề mặt mới.

Ví dụ về hoạt ảnh của các biểu tượng cơ bản trongAndroid kẹo mút

Phổ cậpgợn sóng-Tác dụng

Hiệu ứng Ripple, cụ thể là chuyển động giống như sóng của bóng khi ngón tay chạm vào màn hình thiết bị, là một khía cạnh quan trọng khác của phản hồi. Trong Lollipop, hiệu ứng Ripple được áp dụng ở hầu hết mọi nơi. Khi chạm vào giao diện của hệ điều hành mới, trong hầu hết các trường hợp, các sóng sẽ phân kỳ, có thể là nhấn nút hoặc xem thư viện ảnh. Nói ngôn ngữ kỹ thuật, ngay khi hệ thống nhận được thông tin đầu vào (dùng ngón tay chạm vào màn hình), hệ thống sẽ ngay lập tức xác nhận việc chấp nhận thông tin này thông qua sự lan truyền dạng sóng của “mực kỹ thuật số”.

gợn sóng-hiệu ứng xảy ra khi bạn chạm nhanh vào màn hình bằng ngón tay

gợn sóng-hiệu ứng xảy ra khi bạn cố gắng di chuyển một hình ảnh bên trong thư viện

Khía cạnh kỹ thuật của hoạt hìnhvật liệu thiết kế hoặc phong bì tự nhiên

Như chúng ta đã nói, trong thế giới thực, để đưa một vật ra khỏi trạng thái đứng yên, phải tác dụng một lực lên nó, trong khi pha chính của chuyển động của vật sẽ diễn ra trước gia tốc của nó, giống như một trước khi dừng hoàn toàn sẽ có sự giảm tốc. Thường xuyên tương tác với thế giới vật chất, chúng ta đã quen với trạng thái này, vì vậy bất kỳ cách di chuyển vật thể nào khác, chẳng hạn như tăng tốc tức thời và dừng đột ngột mà không có quán tính, có vẻ không tự nhiên, kỳ lạ và thường gây khó chịu cho chúng ta. Khi tính đến khía cạnh này, những người tạo ra thiết kế vật liệu đã làm việc chăm chỉ về “vật lý” của hoạt hình, đưa nó đến gần nhất có thể với đời thực.

Trong môi trường thiết kế vật liệu, các vật thể được đưa ra khỏi trạng thái đứng yên sẽ tăng tốc nhanh chóng (nhưng không phải ngay lập tức!) và giảm tốc độ một cách nhẹ nhàng, từ từ. Loại chuyển động và hoạt ảnh này rất thú vị khi tương tác vì nó phù hợp với trải nghiệm của chúng ta với thế giới thực.

Đồ thị chuyển động của các đối tượng hoạt hình: tăng tốc nhanh và giảm tốc mượt mà

Thiết kế thích ứng

Khía cạnh quan trọng nhất của thiết kế vật liệu. Triết lý thiết kế vật liệu ngụ ý sự thống nhất hoàn toàn về trải nghiệm người dùng. Nói cách khác, người dùng sẽ không gặp phải các phiên bản khác nhau của cùng một ứng dụng khi sử dụng các tiện ích khác nhau. Trải nghiệm người dùng phải giống nhau trên cả máy tính để bàn và điện thoại thông minh hoặc máy tính bảng. Sự khác biệt duy nhất có thể chấp nhận được và khách quan là kích thước và tỷ lệ khác nhau của các thành phần giao diện ứng dụng. Trong tất cả các khía cạnh khác, các phiên bản khác nhau của cùng một ứng dụng phải cung cấp trải nghiệm người dùng hoàn toàn giống nhau.

Google là một trong những công ty đầu tiên nhận ra nhu cầu thống nhất và phát triển trải nghiệm người dùng thống nhất. Trên thực tế, nhận thức này đã trở thành cái gọi là Dự án Kennedy, khi vào năm 2011 công ty bắt đầu phát triển một loại giao diện duy nhất cho tất cả các ứng dụng của mình. Tuy nhiên, về mặt thẩm mỹ và UX, Google đã đạt được kết quả tốt giữa phiên bản dành cho máy tính để bàn và máy tính để bàn của sản phẩm của họ tiện ích di động vẫn còn một vực sâu thực sự trong Android. Trên thực tế, bản thân thiết kế vật liệu là nỗ lực tiếp theo sau dự án Kennedy nhằm tạo ra một giao diện thực sự thống nhất.

Tính đơn giản về mặt trực quan của vật liệu đã cho phép chúng tôi phát triển một số quy tắc và phương pháp giúp dễ dàng điều chỉnh các ứng dụng được tạo theo phong cách thiết kế vật liệu cho các nền tảng khác nhau.

Thứ nhất, các ứng dụng được thực hiện theo khái niệm thiết kế vật liệu có cấu trúc khối. Phân tích giao diện của các ứng dụng như vậy, bạn có thể thấy rằng nó được đặc trưng bởi sự phân bổ rõ ràng các khối dọc theo lưới mô-đun. Thay vì thiết kế giao diện đa dạng, không phải lúc nào cũng rõ ràng và khó hiểu, chúng tôi có một loại công cụ xây dựng, các bộ phận riêng lẻ có thể tương đối dễ dàng di chuyển và điều chỉnh cho phù hợp với một màn hình cụ thể.

Lưới mô-đun và khối phân tán

Nhờ các khối, mỗi khối đều có giới hạn mở rộng hoặc nén mục tiêu, chúng ta có thể làm cho giao diện ứng dụng trở nên dễ đọc và dễ sử dụng trên mọi màn hình. Nhờ vào giới hạn mở rộng và thu hẹp mà mỗi khối ứng dụng đều có thiết kế vật liệu đó cung cấp một công cụ thực sự hiệu quả để thống nhất hoàn toàn giao diện của các sản phẩm phần mềm khác nhau.

Giao diện được thiết kế theo nguyên tắcvật liệu thiết kế, phổ biến cho mọi màn hình

Thứ hai, việc điều chỉnh giao diện ứng dụng cho phù hợp với các thiết bị khác nhau gắn liền với lượng thông tin hiển thị trên màn hình. Rõ ràng là cái gì màn hình nhỏ hơn, thông tin ít chi tiết hơn mà chúng tôi có thể chứng minh trong đó. Trong trường hợp này, chúng tôi buộc phải chuyển một số nội dung sang các màn hình riêng biệt hoặc ẩn nó sau các phần tử bổ sung - cách làm này đặc biệt điển hình đối với các ứng dụng được điều chỉnh cho điện thoại thông minh.

Yếu tố

Nút nổi ở phiên bản bình thường hoặc mini

Nổi hoạt động cái nút. Nút nổi là một trong những yếu tố đặc trưng và dễ nhận biết nhất của thiết kế vật liệu. Đây là điều mà người dùng nhận thấy đầu tiên. Nút nổi là một cách rất tốt để thúc đẩy người dùng thực hiện một số hành động chính; với sự trợ giúp của nút này, một người sẽ nhanh chóng có quyền truy cập vào các chức năng phù hợp nhất với mình vào lúc này. Nút có xu hướng kết thúc ở phần khác nhau màn hình và mặc dù thực tế là nó thường được tìm thấy ở góc dưới, nhưng nó có thể nằm ở bất kỳ đâu trên màn hình.

Cần phải nhớ rằng nút nổi chỉ có thể được liên kết với một phím, hành động chính được thực hiện trong ứng dụng cụ thể. Ví dụ, trong quản lý tập tin nút nổi có thể có nghĩa là thêm tệp hoặc tạo thư mục mới, trong Messenger hoặc ứng dụng thư– tạo một tin nhắn hoặc lá thư mới, trong mạng xã hội– đánh dấu “thích”, v.v. Hành động chính luôn được gắn với một nút nổi, mặc dù có một số hạn chế nhất định.

Không phải màn hình nào cũng cần nút nổi. Một số hành động sẽ dễ thực hiện hơn bằng cách tương tác trực tiếp với nội dung của ứng dụng. Ví dụ điển hình nhất của trường hợp ngoại lệ đó là một bộ sưu tập ảnh. Khi xem ảnh, việc tương tác trực tiếp với ảnh sẽ dễ dàng hơn mà không cần qua trung gian là nút nổi.

Khi ở trong thư viện, người dùng không cần nút nổi - hành động chính là chọn và xem ảnh

Nút nổi luôn có dạng hình tròn, đổ bóng nhỏ và là mảnh “giấy kỹ thuật số” giống như các bề mặt khác. Nút có màu nhấn sáng không giao thoa với các màu chủ đạo từ sơ đẳng bảng màu, nhờ đó nó luôn là yếu tố chính và đáng chú ý nhất trên màn hình. Sự thống trị của nó còn được nhấn mạnh bởi vị trí của nó so với các lớp khác của giao diện - nút nổi luôn ở trên cùng và không thể bị các thành phần ứng dụng khác chồng lên nhau.

Nút hành động nổiV. hoạt động

Điều đặc trưng nhất của nút nổi là thực tế là nó chỉ có thể được liên kết với các hành động tích cực, chẳng hạn như tạo, thêm hoặc di chuyển trong điều hướng. Việc liên kết nút nổi với các hành động phá hoại hoặc không điển hình - xóa, điều chỉnh âm lượng hoặc gọi menu cài đặt - là phi logic và không có căn cứ về mặt tâm lý.

Hành động tích cực và tiêu cựcnổi hoạt động cái nút

Và cuối cùng là cái cuối cùng tâm điểm– chỉ có thể có một nút nổi trên màn hình. Sự hiện diện của một số nút hành động nổi trong một màn hình sẽ phá hủy hoàn toàn toàn bộ ý nghĩa của nút nổi - triển khai hành động chính trong ứng dụng.

Ứng dụng quán baai thay thếhoạt động quán ba

Thanh hành động đã thay đổi nghiêm trọng so với các phiên bản trước. TRONG Android Lollipop chức năng của nó đã tăng lên đáng kể và giờ đây thành phần được cập nhật được gọi là thanh ứng dụng. Nhờ những thay đổi, thanh ứng dụng mới là một công cụ toàn quyền kiểm soát người dùng qua ứng dụng và cũng như trường hợp của các khía cạnh khác của thiết kế vật liệu và đặc biệt là Hệ điều hành Lollipop mới, thanh ứng dụng hoàn toàn trực quan và dễ hiểu.

Thanh ứng dụng không bị giới hạn ở một kích thước cố định - giờ đây nó có thể được tăng lên theo tỷ lệ, đặt toàn bộ nội dung bắt buộc và các điều khiển ứng dụng như menu thả xuống, bộ lọc, biểu mẫu tìm kiếm, v.v.

Phiên bản cơ bản của bản cập nhậthoạt động quán ba, chứa các yếu tố cần thiết để kiểm soát ứng dụng

sắc tháiứng dụng quán ba, đề xuấtGoogle

Hiện trạng phát triển ứng dụng Android Lollipop và AppCompat v21

Vấn đề chính liên quan đến việc chuyển đổi sang thiết kế vật liệu là khả năng tương thích kém của giao diện mới với các phiên bản Android cũ hơn. Nhiều nhà phát triển không muốn hy sinh khả năng tương thích này và vì lý do này, việc áp dụng các ứng dụng Material Design vẫn còn khá hạn chế. Tình trạng này sẽ còn tiếp diễn trong một thời gian nữa cho đến khi có quá nhiều thiết bị Android chạy trên các phiên bản cũ hơn.

Tuy nhiên, đối với những nhà phát triển muốn giữ cho ứng dụng của họ tương thích với các phiên bản Android cũ hơn, Google cung cấp một bộ công cụ cho phép bạn sử dụng các yếu tố thiết kế vật liệu trong ứng dụng dành cho phiên bản tiền nhiệm của Lollipop. Trong blog tương ứng, các nhà phát triển được mời làm quen với thư viện AppCombat, thư viện này có thể được sử dụng để đưa các thành phần vật chất vào các phiên bản Android cũ hơn.

Một trong những tính năng thú vị nhất là trang bị cho ứng dụng chạy trên các phiên bản Android trước một thanh ứng dụng chính thức, đây là một yếu tố thiết kế quan trọng trong Lollipop. Cùng với tiện ích mới, các ứng dụng cũ nhận được tất cả chức năng nâng cao giúp phân biệt thanh ứng dụng với thanh hành động trước đó.

Tiện íchứng dụng quán ba

Một cái nhìn quan trọng về thiết kế vật liệu

Bất chấp tất cả sự mới lạ rõ ràng và việc triển khai thành công, thiết kế vật liệu (nếu muốn) có thể có một số thiếu sót. Mặc dù, như trong tất cả các vấn đề như vậy, mọi người đều tự quyết định xem những điểm được liệt kê có phải là nhược điểm hay không. Điều đáng chú ý là ở thời điểm hiện tại, những người ủng hộ khái niệm thiết kế vật liệu vẫn chiếm đa số trong số những người tiếp tục thảo luận sôi nổi về đứa con tinh thần mới nhất của Google. Tuy nhiên, công chúng hoài nghi hơn lại có những phàn nàn sau đây về giao diện Lollipop.

Microsoft Phẳng Thiết kếthực tế hơn và thành công hơn nhiềuvật liệu thiết kế. Như chúng tôi đã nói, thiết kế vật liệu không gì khác hơn là sự tổng hợp thành công các phương pháp và kỹ thuật đã được người khác phát triển và sử dụng trước đó. Một trong những khái niệm đã được các nhà phát triển thiết kế vật liệu áp dụng là cái gọi là “thiết kế phẳng” của Microsoft. Ý tưởng từ bỏ những thứ dư thừa để hướng tới một không gian kỹ thuật số phẳng lần đầu tiên xuất hiện trong các sản phẩm của Microsoft. Thiết kế phẳng thể hiện sự bác bỏ hoàn toàn tính đa dạng trong bất kỳ biểu hiện nào của nó. Thiết kế vật liệu là phiên bản nhẹ nhàng hơn của khái niệm này bằng cách mô phỏng “giấy kỹ thuật số” và “mực kỹ thuật số”. Thiết kế vật liệu kết hợp những gì tốt nhất của cả hai thế giới - không gian phẳng và tối giản từ thiết kế phẳng và một khối hoạt hình nhất định từ chủ nghĩa đa dạng.

Microsoft Thiết kế phẳng

Tuy nhiên, không phải ai cũng coi thiết kế vật liệu là nền tảng trung gian và là phiên bản thân thiện hơn của thiết kế phẳng. Hình ảnh động và khối lượng khá phong phú trong Material Design bị nhiều người dùng và nhà phát triển coi là dư thừa khiến người dùng mất tập trung và tạo gánh nặng cho họ với những thứ không cần thiết. thông tin trực quan. Thiết kế vật liệu cũng bị đổ lỗi vì yêu cầu cao về tài nguyên được sử dụng để tạo hoạt ảnh cho tất cả các phần tử.

Sử dụng không gian màn hình không hiệu quả, quá nhiều không gian trống. Sự phong phú của “không khí” tục ngữ trong thiết kế vật liệu (cũng như trong thiết kế hiện đại nói chung) là chủ đề tranh luận sôi nổi nhất giữa các nhà thiết kế, nhà phát triển và người dùng thông thường. Vấn đề về khoảng trống trong các giao diện hiện đại thực sự gây tranh cãi khá nhiều, vì thái độ đối với lượng không gian trống trên màn hình xét cho cùng phụ thuộc vào sở thích của từng cá nhân. Nhiều người dùng muốn xem tất cả (hoặc hầu hết) thông tin cần thiết trước mặt bạn, cố gắng không dùng đến việc cuộn và lật. Những người dùng như vậy thực sự gây khó chịu thụt lề lớn và khoảng trống giữa các nội dung, cũng như nhu cầu cuộn liên tục. Nội dung được nhóm lại, phân bổ thông minh trên toàn bộ khu vực màn hình là lựa chọn của họ.

Ngược lại, một kiểu người dùng khác lại hoan nghênh nội dung thưa thớt, sự hiện diện của “không khí” và không gian trống sạch sẽ. Họ không bị gánh nặng bởi việc phải cuộn và lật thường xuyên hơn trang ảo, và họ coi sự hiện diện của vết lõm lớn là điều kiện cần thiết để nhanh và xả dễ dàng phần tử mong muốn trong tổng khối lượng nội dung. Ngoài ra, những người dùng này coi “không khí” là hợp lý và thuận lợi từ quan điểm thẩm mỹ.

Ví dụ: hãy so sánh giao diện menu Cài đặt cho Android và iOS:

So sánh giao diệniOSVàAndroid- sự thắng lợi của nhận thức chủ quan. Một số người dùng xem xét vị trí của nội dung trongiOShợp lý và chính đáng hơn - mọi thứ đều trong tầm tay, trong khiAndroidphải mất nhiều công sức hơn để tìm thấy mục menu bạn đang tìm kiếm. Đổi lại, một bộ phận người dùng khác tìm thấy giao diệniOS quá tải và khó hiểu, giao diệnAndroid- dễ dàng và dễ tiếp cận hơn.

Cuộc thảo luận về ưu điểm và nhược điểm của thiết kế vật liệu vẫn đang tiếp diễn, người dùng và nhà phát triển đang chú ý đến các vấn đề và thiếu sót gây tranh cãi, đồng thời cũng đang tìm cách giải quyết sử dụng hiệu quả khái niệm thiết kế vật liệu. Trong tương lai rất gần, chúng ta sẽ thấy số phận nào đang chờ đợi thiết kế vật liệu - liệu nó có còn là một mốt mơ hồ áp đặt lên chúng ta trong một thời gian không? Google khổng lồ, liệu đây sẽ chỉ là một thử nghiệm lớn khác trong lĩnh vực giao diện hay sẽ là một giai đoạn mới đưa nghệ thuật giao diện người dùng lên một tầm cao mới? cấp độ mới.

Phần kết luận

Nếu bạn dự định tham gia nghiêm túc vào thiết kế vật liệu và muốn xem toàn bộ khái niệm vật liệu, thì bạn cần nghiên cứu một cách đơn giản, dễ tiếp cận và trực quan. hướng dẫn của Google. Chúng tôi hy vọng rằng bài đánh giá ngắn của chúng tôi sẽ là lời giới thiệu về một hướng đi đầy hứa hẹn như thiết kế vật liệu cho những độc giả quan tâm. Bằng cách hiểu triết lý của dự án mới của Google, bạn sẽ không chỉ có thể triển khai ý tưởng của mình ở định dạng mới mẻ và thực tế này mà còn có thể tinh chỉnh và cải thiện chính khái niệm vật chất, phát triển “thủ thuật” của riêng bạn và cải thiện mối quan hệ của người dùng với giao diện kỹ thuật số.

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 một cách đơn giản, ý tưởng cơ bản là một thiết kế 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 nhấ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 vẫn còn ở giai đoạn sơ khai và có tính 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. Việc sử dụng nó tập trung sự chú ý vào chức năng chính, các đ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 đến 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", họ cố gắng không sử dụng bóng để thể hiện khối 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ố trong số chúng là chính còn những phần 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 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

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 đư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, 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 đượ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.

Điểm nhấn được đặt theo từng đ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: để 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ư 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 tại thời điểm đó. 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, 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 khỏi 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 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 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 một chút để đó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á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 đọc được 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- 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 những đổi mới của khoa học và công nghệ hiện đại.

Đây không phải là lần đầu tiên chủ nghĩa duy vật được sử dụng trong lĩnh vực kỹ thuật số. 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à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 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 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, giống như một vật thể quen thuộc trong 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.

Tại hội nghị nhà phát triển Google I/O 2018, ngoài Android được cập nhật và tích hợp sâu hơn trí tuệ nhân tạo tới các dịch vụ của bạn, công ty 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 điều nhất những thay đổi đáng chú ý Thiết kế vật liệu mới có lượng màu bão hòa và nền xám 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 cổ 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ụ 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 ý, 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 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 trong số đó đang tăng lên không ngừng mỗi năm, bởi vì sự xuất hiện của hệ thống và phần mềm này tốt hơn nhiều với màn hình tròn của họ.

Phông chữ mới


Thiết kế logo mới và dịch vụ có thương hiệu Các nhà phát triển và 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 quy mô lớn cho tất cả các trang web và thiết bị di động dịch vụ của 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ụ, 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. Sau điểm đầu tiên có dòng tìm kiếm được thiết kế lại, bây giờ nó không được hiển thị nút riêng biệt, nhưng chiếm toàn bộ khu vực hữu ích của 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 đó, đây vẫn là quyết định đúng đắn 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 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 rơi vào 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.

Màn hình chính


Đ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 suy nghĩ 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 của Google Play Âm nhạc trải 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 trên các thiết bị có màn hình độ phân giải cao trông rất luộm thuộm và lem luốc. 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 để 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/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. Đã 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 12 năm 2018, tôi chợt nghĩ rằng trong nhiều năm qua, hệ điều hành di động Android và iOS đã không phát triển nhiều về mặt thiết kế giao diện hình ảnh và khái niệm, nhưng giờ 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!