Thực đơn
trang chủiOS

Google Material Design - một diện mạo khả thi cho một kỷ nguyên mới. Đề xuất khi làm việc với Google Hình ảnh

  • Hướng dẫn
“Cuộc đối thoại nhàm chán này có thực sự cần thiết không?”

Trong bài viết này, tôi đã phác thảo các nguyên tắc chính của Material Design và đưa ra lời khuyên về cách triển khai chúng. Văn bản này được viết sau một lớp học chính dành cho các nhà phát triển do chúng tôi, Robots, tổ chức cùng với văn phòng Google (Think Mobile) ở Nga.


Ngày xửa ngày xưa, tất cả các sản phẩm của Google đều trông tệ hại theo những cách khác nhau. Ngay cả một sản phẩm cũng có vẻ không nhất quán trên các nền tảng khác nhau.

Mọi thứ bắt đầu thay đổi vào năm 2011, khi Google bắt đầu làm việc chăm chỉ để thống nhất phần trực quan trong hệ sinh thái các sản phẩm của mình và gọi nó là Dự án Kennedy.

Kennedy có liên quan gì tới chuyện này?

Truyền thuyết là thế này: Tổng thống Kennedy đã khởi xướng chương trình đưa người lên Mặt trăng (nếu bạn tin rằng chuyến bay này đã từng xảy ra). Và ông chủ lớn của Google, Larry Page, tuyên bố nguyên tắc rằng không có ích gì khi cải thiện sản phẩm 10% - chúng phải tốt hơn sản phẩm của đối thủ cạnh tranh gấp 10 lần. Nếu bạn định tung ra một sản phẩm thì hãy đi thẳng lên mặt trăng. Ở đây cũng vậy, người ta đã quyết định làm lại hoàn toàn mọi thứ.



Kết quả chủ yếu ảnh hưởng đến web nhưng cũng ảnh hưởng đến một số sản phẩm di động. Đồng thời, một công việc riêng biệt đang được tiến hành về thiết kế Android - Holo, thay thế các giao diện không mấy thẩm mỹ của Android cũ.
Nhưng có một vấn đề: Holo vẫn khác với Project Kennedy.


Người dùng phải thích nghi với giao diện mới khi chuyển đổi, làm quen với hình thức, cách bố trí các nút điều khiển, v.v.
Do đó, tại một thời điểm nào đó, một nhóm nhà thiết kế từ các bộ phận khác nhau của Google đã tập hợp lại và bắt đầu vật lộn với vấn đề này để giải quyết nó một lần và mãi mãi.

Vào năm 2014, tại hội nghị I/O, một hệ thống thiết kế mới đã được trình bày, một phương pháp tiếp cận được gọi là Material Design. Hệ thống thiết kế mới cho phép bạn tạo trải nghiệm người dùng nhất quán trên tất cả các màn hình: máy tính để bàn, điện thoại thông minh, máy tính bảng, đồng hồ, TV, ô tô. Đối với các ứng dụng Android, Material Design là sự phát triển của các nguyên tắc thiết kế và ngôn ngữ hình ảnh của Holo. Theo nhiều cách, đây là một hệ thống linh hoạt hơn, được thiết kế với kỳ vọng rằng các nhà thiết kế khác sẽ sử dụng nó - Google chỉ là người dùng đầu tiên.

Material Design cho phép bạn thực hiện một cách tiếp cận khách quan hơn để đưa ra quyết định thiết kế: thứ gì đó trông như thế nào, thứ gì đó hoạt động như thế nào, cách thực hiện hoạt ảnh, v.v. Nó đặt ra những giới hạn hợp lý nhưng không đặt ra những hạn chế không cần thiết.

4 nguyên tắc của thiết kế Material Design

Material Design dựa trên bốn nguyên tắc chính:
  • Bề mặt xúc giác. Trong Material Design, giao diện được tạo thành từ các lớp hữu hình của cái gọi là “giấy kỹ thuật số”. Các lớp này được đặt ở các độ cao khác nhau và đổ bóng lên nhau, giúp người dùng hiểu rõ hơn về cấu trúc của giao diện và cách chúng tương tác với nó.
  • Thiêt kê in ân. Nếu chúng ta coi các lớp như những mảnh “giấy kỹ thuật số”, thì khi nói đến “mực kỹ thuật số” (mọi thứ được mô tả trên “giấy kỹ thuật số”), cách tiếp cận lấy từ thiết kế đồ họa truyền thống sẽ được sử dụng: ví dụ: tạp chí và áp phích thiết kế.
  • Hoạt hình ý nghĩa. Trong thế giới thực, các vật thể không tự nhiên xuất hiện và không biến mất vào hư không - điều này chỉ xảy ra trong phim. Đó là lý do tại sao tại Material Design, chúng tôi không ngừng suy nghĩ về cách sử dụng hoạt ảnh theo lớp và mực kỹ thuật số để cung cấp cho người dùng những gợi ý về cách hoạt động của giao diện.
  • Thiết kế thích ứng. Đó là về cách chúng tôi áp dụng ba khái niệm trước đó trên các thiết bị khác nhau có độ phân giải và kích thước màn hình khác nhau.

    • Vì vậy, hãy di chuyển theo thứ tự.

    Bề mặt xúc giác

    Hãy bắt đầu với bề mặt xúc giác. Đây là những mảnh “giấy kỹ thuật số” giống nhau, 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. Mặt khác, họ hành xử hoàn toàn phù hợp với các định luật vật lý và pháp luật của Liên bang Nga. Bề mặt

    Bề mặt là gì? Về cơ bản nó là một “thùng chứa” có bóng và không có gì khác. Nhưng điều này là khá đủ để phân biệt vật thể này với vật thể khác và cho thấy chúng nằm ở vị trí tương đối với nhau như thế nào. Triết lý Thiết kế Vật liệu hướng đến sự đơn giản và thiết kế “sạch sẽ”.

    Không cần phải đi quá xa và sử dụng kết cấu hoặc áp dụng độ chuyển màu để khắc họa chiaroscuro. Không cần thiết phải đưa ra những đặc tính trực quan của làn da giống như cánh cửa căn hộ của bà ngoại - một cái bóng gọn gàng có thể thể hiện rất nhiều điều. Nhưng mỗi bề mặt đều có chiều cao riêng - một vị trí trên trục Z. Và mỗi bề mặt đều tạo ra một cái bóng ở phía dưới, giống như trong thế giới thực.

    Chiều sâu

    Trong "thiết kế phẳng" truyền thống, những bóng như vậy được tránh như bất kỳ biểu hiện nào của âm lượng, nhưng chúng thực hiện một chức năng quan trọng là biểu thị cấu trúc và thứ bậc của các thành phần trên màn hình. Ví dụ, nếu độ cao của một phần tử càng lớn thì bóng của nó càng lớn. Độ sâu tăng lên này giúp tập trung sự chú ý của người dùng vào những điều quan trọng và thực hiện điều đó một cách duyên dáng.

    Độ sâu cũng cung cấp manh mối về sự tương tác. Ở đây, khi người dùng cuộn, thanh màu xanh lá cây sẽ dính vào lớp trên cùng và bóng sẽ được thêm vào. Điều này cho thấy không chỉ có “mực” chuyển động mà cả nền trắng ở bên dưới cũng chuyển động hoàn toàn.

    Điều quan trọng cần lưu ý là độ sâu có “đáy”. Người ta cho rằng nó bị giới hạn bởi độ dày của chính thiết bị di động. Nghĩa là, nếu trên điện thoại thông minh, nó cách kính đến bức tường phía sau một centimet và bạn có thẻ tín dụng trong giao diện, thì bạn không thể đơn giản lật nó lại - nó sẽ tựa vào kính và bức tường phía sau.

    NB!
  • Độ sâu phải có ý nghĩa. Hãy tự hỏi mình câu hỏi: “Tại sao lại thế này mà không phải thế khác?” Nếu không có câu trả lời, bạn nên tìm giải pháp khác.
  • Hãy chăm sóc hậu cần. Các nút nổi, thanh công cụ và hộp thoại ở độ cao nhất định. Đôi khi chúng cần di chuyển dọc theo trục Z để tránh va chạm khi có chuyện gì xảy ra. Bạn cần phải cực kỳ cẩn thận với vũ đạo này.
  • Không cần phải nhấn nút. Nút nổi là một yếu tố rất đặc biệt. Nhiều người cho rằng đáng để thêm nó vào giao diện: cái này ngay lập tức trở thành Material Design. Nhưng nó chỉ nên được sử dụng cho một hành động quan trọng trong ứng dụng của bạn. Nếu bạn cần đóng một cửa sổ hoặc xác nhận một hành động thì bạn không cần sử dụng nút nổi. Có những yếu tố khác cho việc này.
  • Không phải tất cả mọi thứ cần phải có trên thẻ. Nếu một đồ vật có nhiều hình thức và chứa đựng nhiều nội dung khác nhau thì một tấm thiệp là phù hợp. Và nếu không, có lẽ sẽ tốt hơn nếu làm điều đó với văn bản thuần túy hoặc danh sách văn bản?
  • Cuộc đối thoại nhàm chán này có thực sự cần thiết không? Các nhà thiết kế của Google đã cố gắng làm cho các hộp thoại trở nên tốt hơn nhưng Trang tính dưới cùng vẫn phù hợp hơn cho hầu hết các tác vụ. Ngoài ra còn có Snackbar. Hộp thoại chỉ cần thiết để hỏi người dùng một câu hỏi.
  • Sử dụng mở rộng danh sách. Đây là một mẫu được đánh giá thấp nhưng nó khá là Material và giải quyết tốt vấn đề.
    • Thiêt kê in ân

    Vì trong Material Design, chúng tôi gọi các bề mặt là “giấy kỹ thuật số”, nên mọi thứ được đặt trên đó - văn bản, hình ảnh, biểu tượng - đều được in bằng “mực kỹ thuật số”. Và Material Design sử dụng các nguyên tắc cổ điển của thiết kế in ấn trong thiết kế giao diện.

    Kiểu chữ thanh lịch Trong thiết kế in ấn, kiểu chữ đóng một vai trò cơ bản quan trọng. Chọn bất kỳ tạp chí nào và bạn sẽ nhận thấy rằng kiểu chữ phục vụ hai chức năng quan trọng. Thứ nhất, việc lựa chọn và bố cục phông chữ là yếu tố tạo nên phong cách cho thương hiệu của ấn phẩm. Thứ hai, kiểu chữ thiết lập cấu trúc của nội dung.


    Có khá nhiều văn bản trên màn hình này. Nhưng nếu bạn loại bỏ các biểu tượng và biến văn bản thành các khối màu xám, thì rõ ràng cấu trúc khá dễ phân biệt.

    Chúng tôi có một tiêu đề lớn và một tập hợp các phần tử nhỏ hơn được phân biệt bằng độ bão hòa của chúng - những phần tử quan trọng hơn sẽ tối hơn. Đồng thời, chúng tôi phân biệt rõ ràng việc phân nhóm do một số hình chữ nhật nằm gần nhau và có một khoảng thụt lề đáng kể giữa các khối. Nói chung, mọi thứ đều theo truyền thống tốt nhất!

    Cỡ chữ

    Trang web google.com/design/spec có bảng phông chữ tiêu chuẩn mà bạn có thể sử dụng một cách an toàn. Bảng màu sử dụng phông chữ Roboto nhưng có thể thay thế bằng phông chữ đặc trưng của riêng bạn để hỗ trợ thương hiệu. Điều quan trọng là phải kiểm tra mọi thứ một cách cẩn thận vì việc hiển thị phông chữ có thể hoạt động khác nhau trên các thiết bị khác nhau. Thông thường, phông chữ OTF hoạt động tốt hơn TTF.

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

    Một nguyên tắc khác trong thế giới in ấn rất phù hợp với Material Design là kiểu chữ tương phản - một sự tương phản thực sự đáng chú ý giữa kích thước phông chữ của tiêu đề và văn bản sắp chữ. Nó đẹp và làm nổi bật điều chính.

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

    Bây giờ đến vị trí của nội dung trên màn hình. Trong thiết kế in ấn, lưới mô-đun được sử dụng; trong thiết kế màn hình, đây là những lưới cơ bản hơn với các mô-đun rất nhỏ. Do đó, Material Design sử dụng lưới có bước 8dp. DP là pixel không phụ thuộc vào mật độ, một đơn vị giống như đơn vị điểm trong iOS.

    Nhưng đặc điểm phân biệt chính của việc đặt nội dung theo nguyên tắc của Material Design là vị trí của các hướng dẫn chính. Chúng đặt các vết lõm từ các cạnh của màn hình, cấu trúc thông tin và kiểm soát ánh nhìn của người dùng. Nếu bạn đã quen với việc thiết kế các ấn phẩm nhiều trang hoặc đã đọc Tschichold, thì có lẽ bạn biết rất nhiều về lưới và lề cũng như hiểu được các chân đến từ đâu.

    Trên thực tế, chúng ta thấy một cột văn bản ở giữa và một lề lớn ở bên trái, điều này giúp bạn có thể tập trung vào nội dung chính và cung cấp các yếu tố hỗ trợ ở lề.

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

    Nói về biểu tượng, các biểu tượng đơn giản đã được sử dụng trong Android một thời gian, nhưng trong Material Design, chúng thậm chí còn trở nên đơn giản và thân thiện hơn. Trên tài nguyên không chính thức của Materialdesignicons.com, các nhà thiết kế có thể tìm thấy các biểu tượng cho mục đích của mình và đóng góp nếu có thể. Màu sắc

    Giống như trong thiết kế in ấn, màu sắc là phương tiện biểu đạt quan trọng trong thiết kế giao diện. Trong Android cũ, màu sắc là thứ bổ sung nhưng giờ đây nó đóng vai trò nổi bật hơn. Trong Material Design, bảng màu mặc định cho ứng dụng bao gồm màu chính và màu nhấn.

    Thanh chính được sử dụng cho các khu vực rộng lớn như thanh hành động và thanh trạng thái được sơn màu tối hơn. Màu nhấn sáng hơn được sử dụng ở các điểm trên nút điều khiển, nút, sọc, đèn báo, v.v. Màu nhấn được thiết kế để thu hút sự chú ý của người dùng vào các yếu tố chính, chẳng hạn như nút nổi.

    Sử dụng bao nhiêu màu? Điểm nhấn được đặt theo điểm, với số lượng nhỏ. Có một quy tắc cơ bản đơn giản để tô màu phần còn lại của giao diện. Khi có nhiều văn bản, chẳng hạn như danh sách thư, bạn nên để thanh ứng dụng ở kích thước tiêu chuẩn và tô màu để người dùng có thể tập trung vào nội dung. Nếu không có nhiều nội dung, chẳng hạn như chế độ xem chi tiết về một phần tử, ảnh hoặc máy tính, thì đây là cơ hội tuyệt vời để sử dụng các ô màu lớn - gấp 2 hoặc 3 lần chiều cao của thanh ứng dụng.

    Android hỗ trợ thư viện có tên Palette cho phép bạn trích xuất màu từ ảnh. Tức là có thể tô màu giao diện một cách linh hoạt dựa trên ảnh minh họa trong ứng dụng.

    Chúng tôi đã chụp một bức ảnh và thuật toán đã xác định 6 màu với các đặc điểm khác nhau từ đó:
    - có 3 màu đậm và 3 màu nhạt;
    - chúng được chia thành các tông màu sáng, tiêu chuẩn và tối;
    - mỗi màu nền có màu văn bản riêng, cũng có thể được sử dụng.

    Những bức ảnh đẹp

    Cuối cùng, giống như thiết kế in ấn, Material Design khuyến khích việc sử dụng hình ảnh và hình minh họa một cách hoàn hảo nhất. Hình ảnh hầu hết được đặt không có khung, thường “xuyên suốt”. Ngay cả thanh trạng thái cũng được làm đặc biệt trong suốt để không gây cản trở. Hơn nữa, mỗi giọt “mực kỹ thuật số” trên màn hình đều có một chức năng, hầu như không có gì chỉ để trang trí.

    NB!
  • Thương hiệu với niềm vui. Google có lợi thế hơn khi sử dụng màu sắc tươi sáng làm thương hiệu, nhưng điều này không nên được coi là một vấn đề. Bạn có thể chọn màu từ sổ thương hiệu công ty và sử dụng logo nói chung.
  • Đừng quên các vết lõm và “cho chút không khí”. Lưới cơ sở 8dp và lề trái 72dp gần như là quy tắc. Hãy để nội dung tốt và miễn phí.
  • Những bức ảnh biểu cảm tạo nên sự khác biệt. Hình ảnh và hình minh họa là sự lựa chọn của chúng tôi làm phương tiện thể hiện.
    • Hoạt hình có ý nghĩa

    Trong thế giới thực, các vật thể không thể tự nhiên xuất hiện hoặc biến mất vào hư không. Điều này sẽ gây nhầm lẫn và khiến mọi người bối rối. Đó là lý do tại sao Material Design sử dụng hoạt ảnh có ý nghĩa để hiển thị chính xác những gì vừa xảy ra.

    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. Sau khi nhấp vào, một sự kiện trong lịch sẽ nổi lên, biến thành một lớp “giấy” riêng biệt, bắt đầu biến đổi và hiển thị dưới dạng thông tin chi tiết về sự kiện.

    Điểm thú vị là chuyển động tích cực sẽ thu hút mắt - đây là điều tự nhiên đối với tầm nhìn của chúng ta. Sử dụng hoạt ảnh, chúng tôi kiểm soát sự chú ý của người dùng.

    Bất đối xứng

    Vì độ sâu của giao diện bị giới hạn bởi độ dày của thiết bị nên tất cả các phép biến đổi đối tượng phải được thực hiện trong mặt phẳng. Điều này cũng dẫn đến thực tế là hoạt ảnh chuyển đổi phải không đối xứng - tức là sự thay đổi về chiều rộng và chiều cao của đối tượng phải độc lập. Nếu không, ảo giác di chuyển đến gần hoặc xa hơn khỏi người xem sẽ xuất hiện và ở một khoảng cách rất lớn.

    Sự phản ứng lại

    Một nguyên tắc rất quan trọng khác của hoạt ảnh trong Material Design là phản hồi hành động của người dùng. Nếu có thể, tâm điểm của những thay đổi về giao diện sẽ chạm vào màn hình thiết bị. Ví dụ, một sóng xuất hiện và đi từ điểm tiếp xúc với ngón tay. Hiệu ứng này được triển khai mà không gặp vấn đề gì trong Android L.

    Hoạt hình vi mô

    Trong Android L, chúng ta có thể tạo hoạt ảnh cho mọi thành phần của ứng dụng - có thể là chuyển đổi giữa nội dung hoặc các biểu tượng hành động nhỏ. Mọi chi tiết của ứng dụng đều quan trọng và các hoạt ảnh vi mô sẽ bổ sung thêm chi tiết và khả năng phản hồi cao hơn cho mọi hành động của người dùng.

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

    Và nguyên tắc quan trọng cuối cùng của hoạt ảnh: chuyển động phải nhanh và rõ ràng. Không giống như việc tăng tốc tầm thường ở đầu và chậm lại ở cuối, đường cong hoạt ảnh trong Material Design tự nhiên và thú vị hơn. Các đối tượng phản ứng nhanh hơn và đạt đến trạng thái mục tiêu, quay trở lại nhanh hơn, nhưng cuối cùng sẽ mất nhiều thời gian hơn một chút để đạt đến trạng thái nghỉ. Kết quả là người dùng phải chờ ít hơn (ít khó chịu hơn). Đồng thời, khi đối tượng đã rời khỏi phạm vi lợi ích của người dùng, nó sẽ cho phép bản thân hoạt động tự nhiên hơn.

    NB!
  • Đừng để hoạt ảnh cuối cùng. Không nên để hoạt ảnh cho đến cuối cùng - nó có thể là yếu tố quan trọng trong trải nghiệm người dùng và cần được suy nghĩ trước.
  • Biết giới hạn của bạn. Quá nhiều hoạt ảnh cũng không tốt. Hãy kiểm soát bản thân và nhớ rằng nó phải có ý nghĩa.
    • Thiết kế thích ứng

    Khía cạnh chính cuối cùng của Material Design là khái niệm về thiết kế đáp ứng. Tức là làm thế nào chúng ta có thể áp dụng cả ba khái niệm đầu tiên trên các thiết bị và màn hình khác nhau ở các dạng thức khác nhau.

    Kỹ thuật phổ biến nhất là giảm lượng thông tin hiển thị trên màn hình cùng với việc làm cho màn hình nhỏ hơn. Nếu trên màn hình lớn, chúng ta có đủ khả năng hiển thị cả danh sách và thông tin chi tiết về thành phần đã chọn, thì trên điện thoại thông minh, danh sách sẽ được hiển thị đầu tiên và để biết chi tiết, chúng ta cần một màn hình riêng. Trong trường hợp của máy tính bảng, thanh ứng dụng đôi khi có thể được tăng lên ít nhất một chút để giải quyết không gian trống dư thừa.

    Việc đặt nội dung bằng cách sử dụng các khối giúp làm việc với không gian trống trên màn hình lớn dễ dàng hơn nhiều. Chúng tôi biết nội dung của từng khối, chúng tôi hiểu nó có thể rộng đến mức nào để không làm mất khả năng đọc và cũng có thể thu hẹp như thế nào để không quá đông đúc. Trên màn hình rộng, các khối được kéo dài đến giới hạn khả năng đọc của chúng và sau đó lề được thêm vào từ các cạnh, có thể lớn. Chúng có thể được lấp đầy bằng một nút nổi và các ô màu.Khung màu trắng

    Bạn có thể tìm thấy ý tưởng sắp xếp không gian và khoảng cách cho các màn hình khác nhau trên trang web google.com/design/spec trong phần Whiteframes. Đây là nơi tuyệt vời để bắt đầu, tìm hiểu ý tưởng chung và sau đó tiếp tục tự mình thử nghiệm.Hướng dẫn

    Các hướng dẫn cung cấp cho chúng tôi các vết lõm để tạo “mực” trên các tờ “giấy” riêng biệt. Trên điện thoại thông minh, chúng ta có một tờ giấy và một vết lõm tốt ở bên trái, nhưng trên máy tính bảng có hai tờ giấy và trong cả hai trường hợp đều có một vết lõm. Điều quan trọng là vết lõm sẽ khác nhau đối với hai kiểu dáng này. Trên máy tính bảng là 80dp và trên điện thoại thông minh là 72dp. Lề từ các cạnh của màn hình cũng có sự khác biệt.

    Nên lấy nhiều tỷ lệ cho tất cả các yếu tố. Đặc biệt, việc chọn kích thước thanh ứng dụng sẽ thuận tiện hơn nhiều nếu bạn gộp nó thành bội số: 1x, 2x, 3x. Kích thước này khác nhau trên điện thoại thông minh và máy tính bảng, nhưng ứng dụng sẽ thích ứng mà không gặp vấn đề gì.

    Suy nghĩ theo khối nói chung có thể hữu ích. Nếu bạn đặt một lưới mô-đun gồm các khối chia hết cho 8dp như vậy, bạn sẽ có được nhịp điệu hình ảnh tuyệt vời và sẽ thuận tiện hơn khi đưa ra quyết định. Đi tới trang web có khung màu trắng và xem tài liệu.Thanh công cụ

    Thanh hành động là một trong những phần quan trọng nhất của giao diện. Nó chứa tiêu đề, các nút hành động và điều hướng. Trong Android Lollipop, thanh hành động đã chuyển từ một dải hạn chế ở trên cùng thành một tiện ích chính thức - một khối điều khiển ứng dụng đẹp mắt và đầy chức năng. Điều này trở nên khả thi do giờ đây bạn có thể đặt nhiều thành phần chức năng trên thanh công cụ mà trước đây bạn không thể mơ tới:
    - trường đầu vào, biểu mẫu;
    - nút hành động chính nổi;
    - thanh công cụ bị ẩn bởi điều hướng mở rộng, nhưng ở đây chúng ta thấy một tiện ích hoàn toàn hoạt động;
    - thanh công cụ thuận tiện quản lý nếu cần thiết.NB!
  • Ngăn điều hướng không phải lúc nào cũng cần thiết. Google rất thường xuyên sử dụng điều hướng trượt trong các ứng dụng của mình, vì vậy bạn có thể thấy tính năng này trong nhiều ví dụ khác nhau. Nhưng Google có rất nhiều vấn đề có thể được giải quyết với sự trợ giúp của nó: đăng trợ giúp, cài đặt, đăng nhập/đăng xuất, thông tin người dùng, v.v. Nếu bạn có những nhiệm vụ tương tự thì mọi thứ đều ổn, nhưng nếu bạn đang tạo ra một công cụ đơn giản thì điều đó không đáng.
  • Hãy táo bạo và hóm hỉnh hơn với các thanh công cụ. Khả năng thay đổi kích thước của thanh công cụ một cách linh hoạt, làm cho nó có kích thước gấp đôi hoặc gấp ba rất thú vị và tiện lợi. Hầu hết các nhà thiết kế đều ngại giải quyết vấn đề này và chọn một kích thước một lần và mãi mãi, nhưng ở đây bạn có thể và nên táo bạo hơn.
  • Không cần thiết phải tạo một khu ổ chuột ở góc dưới cùng cho một nút nổi. Nút nổi có thể ở bất cứ đâu: dưới cùng, trên cùng, phải, trái. Tất nhiên, có thể thuận tiện để tiếp cận nó ở một góc, nhưng đây không phải là lựa chọn duy nhất. Nút có thể được di chuyển từ nơi này sang nơi khác tùy theo nhiệm vụ.
  • Cả điện thoại thông minh và máy tính bảng; cả theo chiều dọc và chiều ngang. Phạm vi thiết bị Android rất lớn và điều này không giúp cuộc sống của các nhà phát triển trở nên dễ dàng hơn. Nhưng sự thật là người dùng có tất cả các thiết bị mà họ có thể xoay theo hướng này và hướng khác (ngay cả khi chúng ta đang nói về điện thoại thông minh). Thời điểm này cần phải được giải quyết.

    • Đây là Thiết kế Vật liệu. Đừng ngại thử nghiệm và mắc sai lầm: đừng bận tâm đến việc sao chép các giải pháp hiện có. Thử nó!

    Thẻ: Thêm thẻ

    Gắn thẻ ấn phẩm bằng các thẻ của riêng bạn. Tốt hơn là nên phân tách các thẻ bằng dấu phẩy. Ví dụ: lập trình, thuật toán Bình luận 121

                      • Bạn có giống như Google chỉ cầm điện thoại theo chiều ngang không?

                        Theo chiều dọc chỉ sử dụng 50-70% màn hình


                        • Có khá nhiều văn bản trên màn hình này.

                          Đây có phải là rất nhiều văn bản? Twitter đã làm gì với mọi người...

    Lưu ý của tác giả: Vào năm 2014, Google đã xuất bản thông số kỹ thuật cho Material Design, một ngôn ngữ trực quan nhằm mục đích kết hợp các nguyên tắc thiết kế đã được thiết lập, trải nghiệm người dùng liền mạch trên các nền tảng và thiết bị cũng như đổi mới khoa học và công nghệ.

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

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

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

    < link rel = "stylesheet"

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

    < link rel = "stylesheet"

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

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

    Kiểu chữ trong Material Design Lite

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

    < link rel = "stylesheet"

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

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

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

    Tiêu đề

    Phụ đề

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

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

    Phụ đề

    < / p >

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

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

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

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

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

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

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

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

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

    Bạn có thể chuyển từ bảng màu chàm hồng vốn có sang bảng màu của riêng mình theo một trong những cách sau. Nếu bạn đã sử dụng Google CDN như trong bản demo ở trên, bạn cần:

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

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

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

    < link rel = "stylesheet"

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

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

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

    Lớp thành phần MDL

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

    CSS flexbox được sử dụng để tạo các lớp trong MDL. Thẻ có class.mdl-layout là một thùng chứa linh hoạt có 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 lỗi thanh bên không có tiêu đề

    Tiêu đề cố định

    Đã sửa lỗi tiêu đề và thanh bên

    Tiêu đề cuộn

    Tiêu đề xếp tầng

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

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

    Để nhanh chóng tạo tiêu đề bằng các tab, bạn sẽ cần: Thêm hai lớp nữa vào vùng chứa mà chúng tôi đã 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 đặt nội dung bổ sung vào 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à lưới 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 loại bỏ các lề ngoài 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" >

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

    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? Và các nhà thiết kế của Google sẽ làm gì 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 định hình các nguyên tắc mới của Material Design.

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

    Phát triển một dịch vụ email mới là một nhiệm vụ đầy tham vọng đối với Google khi 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, đồng thời tạo ra trải nghiệm người dùng và nhận dạng thương hiệu độc đáo, tuân theo các quy tắc mới của Material Design.

    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 về trọng lượng hình ảnh. Và một trong những thách thức lớn nhất là tìm ra 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

    Việc sử dụng hình ảnh theo ngữ cảnh theo nhóm chữ cái là một tính năng đặc biệt khác của dịch vụ. Ví dụ: nếu người dùng đang lên kế hoạch cho một chuyến đi đến New York, anh ta sẽ nhìn thấy bầu trời Manhattan trên 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ấn vào nút Completed màu xanh lá cây, nền của thanh trên cùng cũng chuyển sang màu xanh lá cây, biểu thị ngữ 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 đã nghiên cứu khoảng chục biến thể khác nhau của khái niệm này cho đến khi đạt được trải nghiệm toàn màn hình như bạn thấy hiện nay. 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 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 khác của 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 đáp ứ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. Thanh điều hướng phía dưới 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 luồng, cách chúng di chuyển khi bạn mở và đóng chúng.

    Genevieve Cuevas

    Chọn các thành phần vật liệu phù hợp: Nút điều hướng dưới cùng hoặc Nút hành động nổi

    Sự chính xác và dễ sử dụng là những tính năng chính của Keep. 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.

    Cùng với nhau, các yếu tố này tạo ra một giao diện rõ ràng và đầy đủ chức năng, thích ứng với một tình huống 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ọ đã cố gắng 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 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 gặp phải 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 kinh nghiệm nhiều năm của Google nhưng nó không thể giải quyết hoàn toàn mọi vấn đề. 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.

    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. Sự phát triển dựa trên cách phối màu, tính chất và thành phần của các đố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 các 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 vẫn là một sản phẩm non trẻ và đang phát triển một cách có hệ thống. 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 đến 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 xác định một hệ thống phân cấp và cấu trúc nhất định 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. Các hộp thoại, cửa sổ nổi, thanh công cụ khác nhau 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ố 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

    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 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 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.

    Đ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: một lượng lớn văn bản (danh sách các chữ cái trong thư) được để ở kích thước chuẩn và màu sắc được thêm vào để thu hút sự chú ý của người dùng PC; một lượng nhỏ văn bản (máy tính, ảnh) được tăng kích thước lên 2-3 lần và thêm các khuôn màu.

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

    Những bức ảnh đẹp

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

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

    Material Design, giống như thế giới vật chất, sử dụng hoạt ảnh có ý nghĩa để hiển thị cho người dùng những gì đã xảy ra 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, sau khi được nhấp vào, sẽ xuất hiện ở nền trước, mở ra và hiển thị nhiều thông tin hơn.

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

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

    Sự phản ứng lại

    Một điểm quan trọng khác của hoạt ảnh trong Material Design 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

    Khía cạnh quan trọng cuối cùng của Material Design là khái niệm về thiết kế đáp ứng. Điều này có nghĩa là các tùy chọn để áp dụng ba khía cạnh còn lại trên các màn hình thiết bị khác nhau (đ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 là một trong những thành phần chính của giao diện. Nó chứa các nút hành động và tiêu đề. Trong Android L, thanh hành động đã trở thành một đơn vị điều khiển chức năng và hấp dẫn. Điều này đạt được nhờ thực tế là các biểu mẫu, nút nổi và điều hướng kéo ra với các điều khiển thuận tiện có thể được đặt trong Thanh công cụ.

    • Bạn không nên sử dụng ngăn điều hướng cho các 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 cho cả màn hình thiết bị dọc và ngang.
    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ắc tươi sáng và hiệu ứng hình ảnh cũng 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ế của nhóm Google, đã giải thích ứng dụng I/O 2014 đã thay đổi như thế nào trong quá trình phát triển để tuân thủ các nguyên tắc của Material Design. Chúng tôi đã dịch video của anh ấy đặc biệt dành cho bạn.

    Video từ kênh Google Design.

    Thiết kế vật liệu là gì? Nó là một tập hợp các phong cách và đồ họa do Google phát triển, cũng như các nguyên tắc và quy tắc để tuân thủ các phong cách đó. Thiết kế vật liệu lần đầu tiên được giới thiệu tại hội nghị nhà phát triển Google I/O vào mùa hè năm 2014. Phong cách này dựa trên định dạng của “thẻ” và “khối” - các hình thức và yếu tố đồ họa đơn giản và ngắn gọn, cũng như sự đơn giản và mới mẻ tổng thể của thiết kế - màu sắc dịu, nhẹ nhàng, thiếu khối lượng, chi tiết nhỏ và chi tiết trong tổng quan. Lần “xuất bản” đầu tiên về thiết kế vật liệu diễn ra với sự ra mắt của dịch vụ Google Hiện hành và phong cách này chính thức trở thành nền tảng cho hệ điều hành Android gần đây, ở phiên bản 5.0, còn được gọi là Android Lollipop.

    Theo tôi, Material Design có một số ưu điểm rất quan trọng so với tất cả những nỗ lực trước đây của Google nhằm đưa thiết kế hệ điều hành và chương trình của nó về một dạng thống nhất, nhưng cũng có một số nhược điểm. Trong bài viết ngắn này, tôi sẽ cố gắng trình bày quan điểm của mình về ngôn ngữ thiết kế mới của Google.

    Thiết kế vật liệu – lập luận CHO

    Theo tôi, lập luận đầu tiên và quan trọng nhất ủng hộ phong cách mới là việc thực hiện nó. Tôi không muốn một lần nữa tỏ ra là người ghét công nghệ và cách tiếp cận của Apple, nhưng trong trường hợp này điều đó không đáng sợ, vì tôi chỉ bày tỏ quan điểm của mình. Vì vậy, theo tôi, việc cập nhật iOS lên phiên bản thứ bảy và cập nhật Android lên phiên bản thứ năm, như người ta nói, là hai điểm khác biệt lớn.

    Trong trường hợp của Apple, chúng ta thấy sự chuyển giao đồ họa thông thường trước đây sang dạng phẳng, không có ý tưởng mới, không mong muốn mang lại điều gì đó mới mẻ - họ chỉ lấy giao diện hiện có, nghiền nát nó, vẽ lại các biểu tượng và thêm hình nền cầu vồng. Đối với tôi, hình ảnh nền trong iOS 7 mới và các hiệu ứng trong suốt của menu là dấu hiệu cho thấy sở thích tồi tệ và sự không sẵn lòng của các nhà thiết kế trong việc làm điều gì đó tốt đẹp và tử tế. Trong “seven”, họ chỉ đơn giản là làm mãn nhãn mọi người bằng hiệu ứng hoạt hình đẹp mắt và độ sáng chung của giao diện mới. Đối với tôi, có vẻ như không ai thực sự nghĩ đến việc liệu điều này có thuận tiện hay không, bởi vì nếu không thì các nhà thiết kế của Apple sẽ chú ý nhiều hơn đến các khía cạnh chức năng hơn là thiết kế cầu vồng.

    Bóng thông báo, được gọi từ trên xuống và bảng điều khiển, được gọi từ dưới lên, là những ví dụ rõ ràng về việc “nâng cấp” vô dụng trong iOS7. Điều đầu tiên chưa bao giờ được làm rõ ràng hơn - tất cả các thông báo chồng lên nhau một cách lộn xộn và có quá nhiều thông báo, điều thứ hai đã hoàn thành được nửa chừng, các công tắc cho phép bạn bật/tắt giao diện nhưng không tiến hành thiết lập chúng và chọn mạng

    Android 5.0 cũng đã được cập nhật rất nghiêm túc về mặt đồ họa so với 4.x chính xác là do việc chuyển hệ điều hành sang Material Design. Và, thoạt nhìn, những thay đổi ở đây tương tự như những thay đổi diễn ra trong iOS - sự thay đổi cuối cùng về phong cách sang kiểu phẳng, thiết kế tổng thể nhẹ nhàng hơn, sự đơn giản bên ngoài. Nhưng sau đó sự khác biệt bắt đầu. Trong Android 5.0, giao diện toàn diện hơn nhờ thiết kế vật liệu - mọi thứ được thực hiện theo một phong cách bình tĩnh, không có gì nổi bật và trông không sặc sỡ hoặc quá sáng. Nguyên tắc cơ bản của thiết kế vật liệu có loại trừ mức độ ưu tiên của hiệu ứng đồ họa trong giao diện so với tính thực tế của nó không? và điều đó thật tuyệt vời.

    Tóm lại lập luận đầu tiên - thiết kế vật liệu đã trông rất tổng thể, đây chính xác là điều mà hệ điều hành của Google và CO còn thiếu - tính toàn vẹn và tính tổng quát. Khi mở từng chương trình riêng lẻ, có thể là danh bạ, trình duyệt, ứng dụng email hoặc thứ gì khác, bạn sẽ thấy cùng một hoạt ảnh, cùng một bảng màu và các yếu tố đơn giản có thể nhận biết được. Do đó, việc làm quen với hệ điều hành mới sẽ dễ dàng hơn và thật dễ chịu khi làm việc với nó.

    Lập luận thứ hai là nếu bạn đã sử dụng điện thoại thông minh chạy Lollipop hoặc đã xem ảnh chụp màn hình, bạn có thể nhận thấy rằng giao diện đã trở nên lớn hơn về mặt hình ảnh. Việc hợp nhất giao diện đã diễn ra trên các thiết bị cảm ứng từ lâu. Nếu chúng ta so sánh các phiên bản Android đầu tiên với Windows Mobile “khi đó” thì rõ ràng Android lớn hơn và đơn giản hơn, ít thông tin hiển thị trên màn hình hơn nhưng cũng thuận tiện hơn khi điều khiển điện thoại thông minh. Trong thiết kế vật liệu, một số yếu tố đã được thay thế bằng “thẻ”, phông chữ, biểu tượng và kích thước dòng đã được tăng lên một chút và toàn bộ giao diện đã trở nên lớn hơn. Tôi thích điều này, có lẽ vì tôi đã già, gạt chuyện đùa sang một bên, nhưng càng lớn tuổi, tôi càng ít ham muốn nhìn vào các biểu tượng và thành phần “millized” ngay cả khi có thị lực tốt. Nhân tiện, đây là lý do tại sao tôi không thích iPhone 5 và bất cứ thứ gì nhỏ hơn. Tính nhỏ gọn là nhỏ gọn nhưng ngay cả trên màn hình có đường chéo 4,5 inch, bạn vẫn muốn xem các phần tử có kích thước bình thường chứ không phải nghiên cứu nó bằng kính lúp. Điều này đơn giản là thuận tiện hơn trong nhiều trường hợp, đặc biệt là khi làm việc với điện thoại thông minh khi đang di chuyển chẳng hạn. Do đó, đối với tôi, việc mở rộng giao diện chung trong Android 5.0 dựa trên thiết kế vật liệu dường như là một bước đi đúng đắn.

    Lập luận thứ ba ủng hộ là Google không chỉ chuyển Android sang một thiết kế mới mà còn chuẩn bị ngay các hướng dẫn trực quan cần thiết thể hiện việc triển khai các yếu tố chính cho các nhà phát triển phần mềm. Nói một cách đơn giản, nếu bạn đang tạo một chương trình mới hoặc muốn chuyển đổi một chương trình cũ sang một thiết kế mới, bạn trang mạng và nghiên cứu các đề xuất của Google.

    Ví dụ, nó cho biết nên sử dụng màu gì. phông chữ và cách sử dụng chúng được hiển thị. Và các khuyến nghị để sử dụng hình ảnh đồ họa chính xác trong chương trình.

    Thiết kế vật liệu – lập luận CHỐNG LẠI

    Tuy nhiên, lập luận thứ ba ủng hộ thiết kế vật liệu cũng là lập luận chống lại nó. Đúng, Google thật tuyệt khi không bỏ rơi các nhà phát triển và cung cấp cho họ hướng dẫn toàn diện về cách sử dụng đúng ngôn ngữ thiết kế mới, nhưng trong trường hợp này, giả sử, họ đã không nghĩ đến người dùng. Các chương trình được viết theo tất cả các quy tắc của thiết kế vật liệu hoặc được sửa đổi bên ngoài theo nguyên tắc của Google sẽ trông rất hài hòa trong Android 5.0 và không quá hài hòa trong các phiên bản trước của hệ thống. Và ngược lại - tất cả các ứng dụng không tuân theo các quy tắc của thiết kế vật liệu sẽ trông hơi xa lạ trên điện thoại thông minh chạy Android Lollipop. Và trong sáu tháng tới sẽ có nhiều chương trình như vậy, tôi đoán vậy. Tuy nhiên, không phải mọi nhà phát triển của một chương trình phổ biến, đặc biệt nếu nó phức tạp và yêu cầu cập nhật và cải tiến liên tục, sẽ bỏ mọi thứ và bắt đầu chuyển nó sang thiết kế vật liệu.

    Một ví dụ rõ ràng về thiết kế cũ trong một chương trình rất hiện tại - WhatsApp. Bao lâu thì ứng dụng không được chuyển sang md? Câu hỏi hay

    Hóa ra là một số nhà phát triển giờ đây sẽ thực sự từ bỏ mọi thứ và chuyển chương trình của họ sang thiết kế vật liệu, trong khi những người khác thì không. Và trên Google Play, có những chương trình có thiết kế cũ hơn, chẳng hạn như, nhưng đôi khi cũng cần thiết cho công việc. Kết quả là, hóa ra mong muốn của Google (chắc chắn là đúng!) trong việc đưa Android về một dạng phổ biến là chưa đủ, cần phải làm gì đó với hàng trăm nghìn chương trình. Câu hỏi - cái gì?

    Các độc giả thân mến, bạn nghĩ gì về ý tưởng của Google trong việc đưa tất cả các dịch vụ và ứng dụng của mình về một hình thức chung, sử dụng thiết kế vật liệu làm cơ sở?