Thực đơn
trang chủChương trình

Mọi thứ bạn cần biết về Thiết kế Vật liệu. UIDE là tài liệu phác thảo miễn phí của Mateusz Dembek. Thiết kế vật liệu tương tác trạm của Nelson Sawa

Phó chủ tịch thiết kế của Google Matias Duarte nói về các nguyên tắc cơ bản của thiết kế mới, được gọi là Material, trong một cuộc phỏng vấn với The Verge. Đây là một cách tiếp cận hoàn toàn khác, cung cấp một bộ quy tắc thống nhất, từ loại phần mềm đến chức năng. Hiện tại, thiết kế này có vẻ hơi lạ và phải mất một thời gian để làm quen.

Nhóm thiết kế tại Google cảm thấy cần phải đưa ra giao diện và chức năng thống nhất của phần mềm có thể được sử dụng trên tất cả các sản phẩm: Android, Chrome OS, dịch vụ web. Thay vì bắt đầu bằng việc phát triển bảng màu, họ bắt đầu bằng câu hỏi: “Phần mềm là gì?”

Vật chất và hình thức

Câu trả lời đến từ bộ phận thiết kế khi Jon Wiley, trưởng nhóm thiết kế công cụ tìm kiếm của Google, cùng đồng nghiệp Nicholas Jitcoff xem xét thiết kế. Tìm kiếm bằng google. Họ nhìn vào giao diện thẻ và nghĩ: “Và nếu bạn di chuyển lá bài thì đằng sau nó là gì?”

“Câu hỏi ngây thơ này đã thắp lên một tia lửa mạnh mẽ!” - Duarte nói. Cả nhóm bắt đầu nghĩ về một cách mới để tương tác với yếu tố phần mềm. Thay vì chỉ sử dụng các pixel trên màn hình và các lớp trừu tượng, nhóm bắt đầu nghĩ về thiết kế như một vật thể hữu hình, thực tế. Vì vậy, thẻ phải có tính chất vật lý. Đã đến lúc đưa ra các quy tắc xác định cách mọi thứ sẽ hoạt động và di chuyển trên màn hình. Nhóm phát triển muốn đạt được hiệu ứng mà người dùng đang tương tác với các vật thể vật lý.

Do đó, công việc bắt đầu trên một chất liệu ẩn dụ giống như tờ giấy - phẳng và trắng với bóng thực tế. Đây là hạt giống mà từ đó phần còn lại của thiết kế đã phát triển, việc triển khai phần này có thể được thấy trong Android L. Vật liệu thiết kế- Màu sắc đậm, tươi sáng, tối giản và cảm giác nhất quán.

Wiley và Zhitkoff cho rằng đây là sự phát triển mang tính thẩm mỹ trong toàn bộ triết lý thiết kế của Google. Vào năm 2012 và 2013, trong các bức tường của trụ sở chính của gã khổng lồ Internet, dự án Kennedy đã bắt đầu, dự án sẽ thống nhất thiết kế của mọi thứ.

Sự sáng tạo và những hạn chế

Material Design tập hợp tất cả những ý tưởng hay nhất. Matias Duarte nhận thấy chúng ta một phong cách mới như một loạt hạn chế, theo ý kiến ​​​​của ông, làm cho công việc của các nhà thiết kế ứng dụng trở nên dễ dàng và nhất quán hơn. Ví dụ: cử chỉ lật tấm thẻ để xem nội dung được viết ở mặt sau. Trong thế giới bình thường, điều này là không thể do thiếu không gian. Cứ như thể phần mềm là vật thể thực sự bên trong thiết bị. Và rõ ràng là điện thoại của bạn không còn chỗ để lật thẻ nên Google hạn chế kiểu thao tác này.

Chúng ta phụ thuộc rất nhiều vào vật lý và phần mềm thường hoạt động theo cách phá vỡ sự hiểu biết của chúng ta về thế giới, giống như một bộ phim khoa học viễn tưởng nào đó thách thức logic cơ bản. Duarte trực tiếp bình luận về triết lý thiết kế iOS mới của Apple.

Chúng ta không lao qua không gian và thời gian với tốc độ siêu thanh. Thiết kế - là tìm kiếm giải pháp trong những ràng buộc chặt chẽ. Thiết kế là một nghệ thuật.

Các nhà thiết kế của Google kiên quyết từ chối nêu tên vật liệu hư cấu được sử dụng. Một giải pháp vừa mang lại cho họ sự linh hoạt cao hơn vừa bổ sung thêm một lớp thần bí siêu hình cho nội dung. Giấy lượng tử - điều này đã được nói đến trong một số rò rỉ trước Google I/O. Điều này rất quan trọng vì vật liệu tuân theo vật lý và nó sẽ không rơi vào bẫy của hiện tượng lệch hình. Chính xác thì nó không phải là sự bắt chước các vật thể vật lý, như Duarte đã nói, nó là một thứ gì đó "ma thuật".

Chất liệu trong thiết kế của chúng tôi có thể làm được những điều mà giấy vật lý không thể làm được, chẳng hạn như phóng to và thu nhỏ bằng hình ảnh động. Những hoạt ảnh này rất quan trọng đối với Google vì chúng giúp người dùng hiểu rằng chúng đang ở bên trong phần mềm. Wiley so sánh phần mềm này với các bộ phim, trong đó có những bước chuyển đột ngột giữa các cảnh. Người dùng mất cảm giác về thời gian và không gian. TRONG phần mềmĐiều quan trọng là người dùng hiểu được nguyên tắc chuyển đổi từ cái này sang cái khác.

Cụ thể hoá

Điều quan trọng hơn nữa mà Material Design mang lại đó là sự thống nhất. Google đã nghiên cứu các thuật toán cho tất cả các sản phẩm trong nhiều năm và điều này đã trở thành một phần không thể thiếu trong triết lý thiết kế mới. Thay vì người dùng phải tự cấu hình mọi thứ, Material Design khiến họ tin rằng những gì họ cần trên màn hình sẽ là thứ họ cần vào đúng thời điểm.

Đó là lý do tại sao Mặc Android không mang lại cho người dùng gì hơn ngoài sự tương tác với các thông báo. Alex Faaborg, nhà thiết kế nền tảng, cho biết:

Bạn không dành nhiều thời gian để tương tác với đồng hồ. Bạn chỉ muốn có thể nhìn vào cổ tay của mình và ngay lập tức nhận được thông tin bạn cần hoặc thực hiện một hành động bằng lệnh thoại. Chúng tôi đã thực hiện rất nhiều công việc trên toàn bộ nền tảng của Google.

Google đang yêu cầu quá nhiều tín nhiệm cho bản thân và tài liệu giấy "ma thuật" của mình, nhưng Duarte tin rằng có những lý do chính đáng cho điều này.

Chúng tôi đã làm điều này bởi vì nó là giải pháp đơn giản nhất. Chúng tôi muốn thiết kế một thiết kế đơn giản nhất có thể cho người dùng.

Công viên 3.0

Có rất nhiều thứ liên quan đến Material Design hơn là chỉ thiết kế Android L, Android Wear và mọi thứ khác mà Google tham gia. Đó là về về cảm giác trong mối quan hệ giữa con người và công nghệ.

Duarte cho biết Xerox PARC đã thực hiện một công việc xuất sắc khi tạo ra trải nghiệm con trỏ và cửa sổ quen thuộc. Điều này thật sáng tạo vì công ty có thể tạo ra phiên bản ảo của máy tính để bàn thực sự. Mọi người hiểu cách máy tính hoạt động và có thể làm việc với nó một cách thoải mái. Điều này cũng áp dụng cho những gì Apple đã làm với màn hình cảm ứng.

Bây giờ Google tin rằng họ đã làm được điều tương tự. Wiley nói rằng con người ngày nay có rất nhiều công nghệ: màn hình cảm ứng, cử chỉ, khẩu lệnh, thuật toán thông minh. Material Design kết hợp tất cả sự đa dạng này thành một thứ trực quan. Điều này sẽ giúp bạn dễ dàng sử dụng tương tự trên Chrome OS, Android hoặc trên web.

9 nguyên tắc

1. Vật chất là một phép ẩn dụ

Material Design là một hệ thống hợp lý hóa không gian và chuyển động. Thiết kế dựa trên thực tế xúc giác, lấy cảm hứng từ khả năng của giấy và mực, nhưng mở ra trí tưởng tượng và phép thuật.

2. Bề mặt trực quan

Các mặt phẳng và các cạnh truyền tải tín hiệu thị giác dựa trên nhận thức của chúng ta về thực tế. Việc sử dụng các thuộc tính xúc giác quen thuộc sẽ tác động vào các phần cơ bản của não và giúp chúng ta nhanh chóng hiểu được những gì đang được tưởng tượng.

3. Kích thước tạo ra sự tương tác

Các nguyên tắc cơ bản về ánh sáng, bề mặt và chuyển động là chìa khóa cho cách các vật thể tương tác. Ánh sáng thực tế phân chia không gian và tập trung sự chú ý vào các bộ phận chuyển động.

4. Thiết kế đáp ứng thống nhất

Một thiết kế cho mọi thứ. Mỗi thiết bị phản ánh một quan điểm khác nhau về các yếu tố cơ bản giống nhau. Mỗi chế độ xem được điều chỉnh theo kích thước và mức độ tương tác cho từng thiết bị. Màu sắc, hình tượng, thứ bậc và mối quan hệ không gian vẫn không thay đổi.

5. Phông chữ, đồ họa, màu sắc

Thiết kế khác biệt tạo nên sự phân cấp, hiểu biết và giúp tập trung. Màu sắc được lựa chọn đặc biệt, sử dụng không gian từ cạnh này sang cạnh khác, phông chữ lớn và việc sử dụng màu trắng có chủ ý/có chủ ý cho phép bạn đưa người dùng hoàn toàn đắm chìm vào quá trình tương tác, làm cho quá trình tương tác trở nên rõ ràng và dễ hiểu hơn.

6. Hành động chính

Hành động của người dùng là bản chất của thiết kế. Các hành động chính biến đổi toàn bộ thiết kế. Chúng tập trung vào chức năng cốt lõi và ngay lập tức thu hút sự chú ý của người dùng.

7. Người dùng bắt đầu thay đổi

Những thay đổi trong giao diện xảy ra do hành động của người dùng. Chuyển động nâng cao trải nghiệm của hành động chính.

8. Vũ đạo hoạt hình

Mọi hành động diễn ra trong môi trường thống nhất. Các đối tượng mà người dùng nhìn thấy không làm gián đoạn phần còn lại của trải nghiệm người dùng, ngay cả sau khi chuyển đổi và sắp xếp lại.

9. Chuyển động mang lại ý nghĩa

Chuyển động có ý nghĩa và cần thiết để thu hút sự chú ý. Chuyển tiếp có hiệu quả.

Thiết kế là nghệ thuật sáng tạo. Mục tiêu của chúng tôi là đáp ứng nhiều nhu cầu đa dạng của con người. Khi những nhu cầu này phát triển thì các thiết kế, ý tưởng và triết lý của chúng ta cũng phải phát triển theo.

Chúng tôi đặt cho mình mục tiêu là tạo ra ngôn ngữ hình ảnh cho người dùng của chúng tôi, sẽ kết hợp các nguyên tắc quen thuộc thiết kế cổ điển với sự đổi mới.


Trong nhiều năm nay, Material Design đã nằm trong số những người dẫn đầu xu hướng thiết kế web toàn cầu. Và nó không có gì đáng ngạc nhiên cả. Rốt cuộc, chính anh ta là người có thể kết hợp sự đơn giản, logic hoạt động và vẻ ngoài tiện lợi, đồng thời tạo ra một sự chu đáo và chu đáo. Giao diện trực quan cho người dùng. Rộng rãi, không lộn xộn về chi tiết, sạch sẽ và không trang trí màn hình quá mức. Nguyên tắc cốt lõi của thiết kế vật liệu tập trung vào khả năng sử dụng chứ không chỉ là thiết kế tốt, điều này chiếm được cảm tình của khán giả đánh giá cao nhờ sự duyên dáng và tiện lợi của nó.

Sự phổ biến của xu hướng được giải thích một số lượng lớn Nhân tiện, các tài nguyên và công cụ dành cho nhà thiết kế, cả trả phí và miễn phí. Ví dụ: hôm nay tôi đưa ra một lựa chọn hữu ích với 30 nội dung miễn phí và đầy cảm hứng. tài nguyên trả phí dành cho các nhà thiết kế theo phong cách thiết kế vật liệu. Mỗi ngày các ứng dụng và dự án mới theo phong cách Material Design đều được phát hành. Đừng tụt lại phía sau. Tìm hiểu những công cụ giúp các nhà thiết kế vượt qua những thử thách khó khăn mỗi ngày và đạt được thành công. Giúp dự án tương lai của bạn tỏa sáng với thiết kế vật liệu.

Hữu ích cho người thiết kế. Một bộ sưu tập gồm 30 công cụ và tài nguyên thiết kế vật liệu miễn phí và trả phí.

Tầng lớp:

1. Hơn 40 hình nền miễn phí theo phong cách thiết kế Material Design

Thật tuyệt vời khi tìm thấy toàn bộ bộ sưu tập hơn 40 hình nền thiết kế vật liệu miễn phí ở cùng một nơi phải không? Được tạo ở độ phân giải cao, chúng chắc chắn sẽ truyền cảm hứng cho việc thực hiện một dự án web hoặc thiết kế in ấn khác. Một số lượng lớn các hình dạng và màu sắc khác nhau sẽ thu hút sự chú ý của ngay cả những nhà thiết kế khó tính nhất.

2. 10 hình nền miễn phí

Đừng bỏ lỡ cơ hội thêm bộ sưu tập 10 hình nền thiết kế vật liệu chất lượng cao vào thư viện công cụ của bạn. Có sẵn hai kiểu và năm cách kết hợp màu sắc, những hình nền này có 300 dpi Và 10 tệp .jpg, cũng như sự cho phép trong 5000x3000px. Và tất cả điều này có thể được lấy miễn phí.

3. 30 hình nền cho một dự án theo phong cách vật liệu

Một lựa chọn tuyệt vời khác về hình nền chất lượng cao cho dự án thiết kế vật liệu của bạn. Chọn từ 30 thiết kế khác nhau với các hình dạng bổ sung như hình vuông, hình tam giác và hình tròn và tạo cho dự án của bạn một nét thủ công. Có sẵn miễn phí tại .png Và .ai các định dạng.

4. 12 hình nền quảng cáo miễn phí theo phong cách thiết kế Material Design

Bạn có muốn một cái gì đó mới? Vui lòng. Tham khảo bộ sưu tập 12 sản phẩm thiết kế vật liệu mới tại độ phân giải cao. Tin vui - bộ sưu tập có thể được sử dụng cho cả mục đích cá nhân và thương mại, bởi vì... sản phẩm được cấp phép Sáng tạo chung số không, có nghĩa là chúng đã được kiểm tra và sẵn sàng để sử dụng. Hình dạng của viên kim cương ở giữa nền giúp thu hút sự chú ý vào sản phẩm. Có sẵn để tải xuống tại .png Và .jpg các định dạng.

5. Bộ hình nền hoa văn

Đừng bỏ lỡ bộ sưu tập hình nền tươi sáng và chất lượng cao được thiết kế theo kiểu lát gạch của chúng tôi. Tệp chứa các tệp .png, photoshop và định dạng vector minh họa, có nghĩa là bạn có thể tùy chỉnh bảng màu một cách độc lập theo yêu cầu của mình. Sử dụng miễn phí ở mọi kích thước và không làm giảm chất lượng.

6. Biểu ngữ miễn phí

Dưới đây là bộ 5 biểu ngữ theo phong cách thiết kế Material Design với độ phân giải trong 1140x600px. Tuyệt vời để làm nổi bật các tiêu đề, hình ảnh hoặc các phần riêng lẻ trong bất kỳ dự án web nào.

Công cụ phát triển di động

7. Bộ công cụ thiết kế di động miễn phí

Một lựa chọn tuyệt vời sẽ không được người dùng Photoshop và Sketch chú ý. Chúng tôi xin giới thiệu với bạn một tập hợp các thành phần khác nhau dành cho thiết kế vật liệu có thể mang lại năng lượng khá tích cực cho một dự án web. Một lựa chọn tuyệt vời để tạo một ứng dụng âm nhạc hoặc phiên bản điện thoạiđịa điểm.

8. Bộ giao diện người dùng thông minh

Bộ giao diện người dùng được thiết kế để tăng tốc quy trình làm việc của bạn.

9. DO là Bộ công cụ giao diện người dùng ứng dụng toàn diện. Miễn phí

Do là một công cụ thực sự dành cho những ai quan tâm đến việc tạo ra nhiều loại ứng dụng thiết kế vật liệu khác nhau. Do có 130 thiết kế, 10 chủ đề độc đáo và hơn 250 thành phần giao diện người dùng để tạo ra các thiết kế linh hoạt và sẵn sàng cho Retina. Ở đây bạn chắc chắn có thể tìm thấy chỗ để thử nghiệm. Lựa chọn thiết kế hiện đại, đầy màu sắc.

10. Một tập hợp các thành phần UI miễn phí để tạo ứng dụng âm nhạc

Khám phá bộ sưu tập các thành phần UI miễn phí tại .psdđịnh dạng hoàn hảo để tạo ứng dụng âm nhạc. Nhân tiện, thiết kế nữ quyền sẽ làm nổi bật một cách hài hòa các dự án web làm đẹp khác nhau.

Những bài viết liên quan:

11. Tập hợp các thành phần UI miễn phí theo phong cách thiết kế vật liệu

Đối với những người vẫn còn nghi ngờ về việc lựa chọn công cụ và tài nguyên theo phong cách thiết kế vật liệu, tôi khuyên bạn nên chú ý đến bộ sưu tập Bộ công cụ UI Thiết kế Vật liệu. Sử dụng đa dạng .psd Nhân tiện, các yếu tố này dễ dàng thích ứng với nhu cầu của bạn trong Photoshop, bạn có thể tiết kiệm thời gian và công sức ngay cả ở giai đoạn khởi động dự án. Thêm tài liệu tuyệt vời vào bộ sưu tập của bạn để tạo các dự án và ứng dụng thiết kế vật liệu nhanh chóng.

Biểu tượng

12. Bộ sưu tập biểu tượng Google theo phong cách Material Design

Bắt đầu tìm kiếm các biểu tượng phù hợp cho dự án hoặc ứng dụng web của bạn với bộ sưu tập Tài liệu của Google Biểu tượng. Bộ chứa tất cả các loại tùy chọn biểu tượng cho các ứng dụng khác nhau như phát lại media, liên lạc, chỉnh sửa nội dung, v.v. Tải xuống kho lưu trữ zip(~57 MB) và tận hưởng những tài liệu tuyệt vời mà mọi nhà thiết kế đều cần trong tầm tay.

13. Bộ sưu tập các biểu tượng miễn phí

Biểu tượng thiết kế Vật liệu là một bộ sưu tập biểu tượng miễn phí theo phong cách thiết kế vật liệu, có thể tải xuống ở định dạng, kích thước và màu sắc mong muốn tùy theo yêu cầu của dự án. Kéo và thả các biểu tượng vào Illustrator, Photoshop hoặc Visual Studio, thay đổi màu sắc và biểu tượng của bạn đã sẵn sàng.

14. Gói: Biểu tượng thiết kế Material

Tại đây bạn có thể tải xuống các phần tử miễn phí như biểu tượng, hình nền theo chủ đề hoặc bảng màu một cách nhanh chóng và thuận tiện. Các biểu tượng có sẵn trong .icns, .ico, .png các định dạng. Nhiều hình dạng và phong cách biểu tượng khác nhau rất phù hợp cho công việc thường ngày trong quá trình thiết kế.

15. Biểu tượng thiết kế Material

Thế còn một bộ sưu tập gồm 1000 biểu tượng được chia thành 20 danh mục với 7 độ phân giải thì sao? Kết quả là một tập hợp hơn 7.000 tệp, tất cả đều chẳng là gì cả. Chỉ cần chọn danh mục của bạn và độ phân giải được yêu cầu, thế là xong - biểu tượng đã sẵn sàng. Đã đến lúc bắt đầu xem xét các lựa chọn, bạn nghĩ sao?

Khung

16. Materialize - Khung giao diện người dùng thích ứng dựa trên nguyên tắc thiết kế vật liệu

Thêm vào bộ sưu tập của bạn một công cụ phổ quát để tạo mẫu nhanh các giao diện ứng dụng theo nguyên tắc của thiết kế vật liệu. Vì vậy, thiết kế văn bản có sẵn, lưới thích ứng gồm 12 cột, kiểu dáng phần tử, thẻ, khối, phần tử bật lên, v.v. Kiểm tra khuôn khổ trên dự án của riêng bạn.

17. Khung Lite Design Lite

Bạn có cần một công cụ hỗ trợ quá trình tạo trang web và ứng dụng dựa trên thiết kế vật liệu không? Thử tài liệu Thiết kế nhẹ là một khuôn khổ phổ quát tuân thủ các nguyên tắc của thiết kế vật liệu, hỗ trợ trình duyệt di động và giúp tạo ra các thiết kế đáp ứng và tối giản. Bao gồm các điều khiển giao diện khác nhau.

18. Khung vật liệu-UI

Có kinh nghiệm với React? Material-UI là một framework khá phổ biến khác bao gồm một tập hợp các thành phần dành cho React. Tùy chọn tùy chỉnh mở rộng, hỗ trợ các kiểu được chia thành tập tin riêng biệt và tuân thủ các nguyên tắc thiết kế vật liệu.

19. Khung LumX

LumX tự định vị mình là một khung giao diện người dùng dựa trên cả thông số kỹ thuật của AngularJS và các nguyên tắc của thiết kế vật liệu. Ngoài ra, cần có jQuery, Velocity và Momentum. Bao gồm một số lượng lớn Các thành phần AngularJS.

20. Khung nền tảng vật liệu dựa trên nguyên tắc thiết kế vật liệu

Dựa trên nguyên tắc của Tổ chức Zurb, khuôn khổ của Tổ chức Vật liệu ít nhất đáng được quan tâm vì nó miễn phí và tự cung cấp. Khung này cung cấp nhiều khả năng về mặt tùy chỉnh. Bao gồm các thành phần React tuân theo nguyên tắc Thiết kế Vật liệu.

Xem thêm:

21. MUI - Framework dựa trên nguyên tắc Material Design của Google

Một framework khá dễ sử dụng sẽ hỗ trợ rất nhiều cho việc phát triển các dự án trong tương lai. Cung cấp hỗ trợ cho Angular, React và WebComponents. Khung nhẹ có bộ cơ bản yếu tố để đẩy nhanh quá trình phát triển của các dự án nhỏ.

22. Khung vật liệu góc - Tập hợp các thành phần UI

Khung Vật liệu góc là một trong những khung phổ biến nhất được Google hỗ trợ. Cung cấp khả năng hoạt động với thiết kế vật liệu hoàn chỉnh cùng với các thành phần, biểu tượng và tập lệnh khác nhau. Thích ứng để hoạt động trên thiết bị di động, trình duyệt và ứng dụng máy tính để bàn.

23. Bootstrap Material Design – Bộ công cụ thiết kế vật liệu trên Bootstrap

Đúng như tên gọi, Bootstrap Material Design là một chủ đề Bootstrap được tích hợp nhiều các tính năng hữu ích từ Bootstrap trộn lẫn với các yếu tố từ thiết kế vật liệu.

Tài liệu trả phí

24.

Bạn có muốn dự án tương lai của mình khác biệt với hàng trăm dự án tương tự khác không? Với sự trợ giúp của gói cao cấp chứa 1100 họa tiết, bạn có thể nổi bật giữa đám đông và tạo ra một thiết kế độc đáo một cách dễ dàng và nhanh chóng. Có sẵn trong nhiều loại dải màuà, chẳng hạn như đá cẩm thạch, mực, tông màu acrylic hoặc màu nước, họa tiết sẽ phù hợp với thị hiếu của ngay cả những nhà thiết kế thiếu kinh nghiệm nhất. Tôi chắc chắn có điều gì đó để thử nghiệm ở đây.

25.

UTech là một bộ sưu tập cao cấp có nhiều màn hình, bố cục và kiểu dáng khác nhau, đồng thời đóng vai trò là giải pháp tuyệt vời cho nhiều công ty khởi nghiệp. Ngoài ra, bộ sản phẩm còn bao gồm một bộ màn hình khác nhau dành cho hồ sơ, nguồn cấp tin tức hoặc các trang chào mừng. Bộ sưu tập phù hợp với các lĩnh vực như tài chính, giáo dục, thực phẩm, cổng thông tin truyền thông hoặc thương mại điện tử.

26. Rainy Season – Yếu tố giao diện PSD cho portfolio của một nhà thiết kế, nghệ sĩ

Điều đáng chú ý là bộ sưu tập các phần tử PSD cao cấp rất hoàn hảo để tạo ứng dụng hoặc widget. Tại sao không thêm các thành phần chất lượng cao vào thư viện của bạn cho các dự án trong tương lai?

27.

Với sự trợ giúp của bộ sưu tập các phần tử Bootstrap cao cấp, bạn hoàn toàn có thể tạo bố trí đáp ứng dưới dạng thẻ. Kết quả là bạn có thể chọn từ 5 hình dạng, màu sắc và kiểu dáng hấp dẫn khác nhau. Tất cả đều phù hợp với nhau. Nhân tiện, phông chữ biểu tượng icomoon cũng được thêm vào bộ.

28.

Gói phần tử đồ họa thông tin cao cấp Tree Bundle đáng được quan tâm đặc biệt. Có thể sử dụng cả trong thuyết trình PowerPoint, và trong các tài liệu quảng cáo, báo cáo thường niên, sơ yếu lý lịch hoặc dùng cho mục đích kinh doanh, quảng cáo, tiếp thị, v.v. Như vậy, bộ gồm 4 màu EPS Và A.I. tập tin, với khả năng thay đổi kích thước bên trong tập tin nén. Làm việc tốt hơn với Adobe Illustrator CS5 hoặc mới hơn.

29.

Một lựa chọn tuyệt vời của tất cả các loại yếu tố đồ họa thông tin dưới dạng biểu đồ, sơ đồ, biểu tượng và các dạng tùy chỉnh khác để sử dụng trong các dự án trong tương lai. Các yếu tố phù hợp cho bài thuyết trình, báo cáo thường niên, quảng cáo, tiếp thị hoặc quảng bá sản phẩm qua email. Bộ sưu tập EPS Và A.I. các tệp hoạt động tốt nhất với Adobe Illustrator CS5 hoặc mới hơn.

30.

Đối với những người vẫn đang thu thập thư viện biểu tượng của mình, tôi khuyên bạn nên chú ý đến Tonicons. Còn 2000 biểu tượng chất lượng cao được chia thành 6 loại thì sao? Tôi đồng ý, nó đáng để hỏi. Ngoài ra, bạn có thể dễ dàng chỉnh sửa từng chúng theo yêu cầu của mình, thay đổi kích thước và các chi tiết cần thiết khác.

Tổng hợp

Ngay cả khi bạn là người mới làm quen với thiết kế vật liệu, với tuyển tập các công cụ và tài nguyên miễn phí và trả phí này, bạn có thể bắt tay vào công việc một cách an toàn. Lấy tất cả các tài nguyên trên và sử dụng chúng khi cần thiết. Bằng cách sử dụng thư viện này hoặc thư viện khác, mỗi nhà thiết kế có thể nhanh chóng nhận được giải pháp làm sẵn cho nhu cầu của mình mà không phải đau đầu không cần thiết. Hãy nhớ sử dụng kinh nghiệm, sở thích và kỹ năng của bạn làm hướng dẫn. Hãy tin tôi, điều này chắc chắn sẽ giúp ích trong tương lai. Nếu bạn có điều gì muốn nói và điều gì đó cần thêm vào danh sách, hãy đề cập đến điều đó trong phần bình luận.



Nguyên tắc chính của Google là theo dõi cẩn thận nhu cầu của người dùng và dựa trên đó, điều chỉnh thiết kế của nó (và không chỉ vậy). Một xu hướng như Material Design cho phép bạn cải thiện UX, khiến bạn muốn quay lại tài nguyên nhiều lần. Và một trong những yếu tố chính của nó là khả năng tương tác liền mạch các chức năng khác nhau trên một nền tảng.

Material Design bắt nguồn từ ý tưởng chuyển động tự do trong đúng người dùng hướng và dựa trên thực tế xúc giác. Ban đầu, các nhà phát triển của nó lấy cảm hứng từ mực và giấy thông thường, nhưng kể từ đó, tất nhiên, nó đã rời xa tính năng cơ bản này, có được những đặc điểm của ma thuật thực sự. Nói cách khác, bằng cách cải thiện phần hình ảnh và chức năng, các chuyên gia của Google đã kết hợp các nguyên tắc thiết kế tốt với sự đổi mới và khả năng của công nghệ mới.

Các tính năng của Thiết kế Vật liệu là gì? Các bề mặt và cạnh của các phần tử theo hướng thiết kế này kết hợp các hình ảnh và tín hiệu trực quan để tạo ra các tín hiệu giúp người dùng điều hướng trang web một cách trực quan (như thể tất cả đều diễn ra trong thế giới thực).

Ngoài ra, Material Design sử dụng các nguyên tắc thiết kế in ấn để đặt điểm nhấn một cách hiệu quả (nghĩa là tập trung sự chú ý vào thành phần mong muốn), đơn giản hóa việc điều hướng trong giao diện và truyền tải ý nghĩa của các thành phần trong đó một cách trực quan. Thiết kế Vật liệu được đặc trưng bởi màu sắc phong phú, đồng đều, các cạnh sắc nét, rõ ràng, kiểu chữ lớn và khoảng cách đáng kể giữa các thành phần. Cùng với nhau, những yếu tố này không chỉ tạo nên một bức tranh đẹp mắt mà còn tạo ra một thực tế mới với ý nghĩa khái niệm và nhiều chức năng mang lại cho người dùng một UX độc đáo.

Với kiểu thiết kế này, hành động của người dùng là trọng tâm. Mọi tương tác đều diễn ra trong cùng một môi trường, đối tượng tương tác không bị gián đoạn, trình tự di chuyển từ môi trường này sang môi trường khác.

Material Design là câu chuyện về chức năng mà mọi yếu tố đều phấn đấu đạt được. Theo nguyên tắc này, điều quan trọng là phải tập trung vào những điểm chính mà người dùng chú ý để hướng họ đi đúng hướng.

Material Design là một câu chuyện về tính tương tác. Trang phản hồi bất kỳ chuyển động nhỏ nhất nào của người dùng và mỗi chuyển đổi phải diễn ra suôn sẻ, như thể bạn đang lênh đênh trên một con thuyền trên dòng sông êm đềm và biết mình nên rẽ vào đâu và tại sao. Do đó, Material Design cũng là một câu chuyện về nhận thức: ngoài việc mọi hành động đều dễ chịu (và dễ dàng) thực hiện, người dùng phải hiểu rõ ràng và rõ ràng mình đang làm gì và tại sao cũng như lần chạm tiếp theo sẽ dẫn mình đến đâu. Như vậy, Nhận xét phải rõ ràng, dễ tiếp cận và dễ nhận biết.

Như đã đề cập, cấu trúc giao diện mượn nhiều “thủ thuật” của thiết kế in ấn, nhưng tất cả chúng đều không được sử dụng ở dạng nguyên bản mà ở dạng cải tiến. Material Design bổ sung vào các tính năng này khả năng chia tỷ lệ và thay đổi kích thước trang không giới hạn, cho phép bạn điều chỉnh thiết kế cho phù hợp với mọi thiết bị, chẳng hạn như máy tính bảng hoặc điện thoại thông minh. Tất cả các tính năng này mang lại cảm giác thoải mái tối đa khi làm việc với điều hướng và toàn bộ giao diện (vì khả năng không giới hạn phải tuân theo nguyên tắc đơn giản) và truyền cảm giác tin cậy.

Câu hỏi chính mà một nhà thiết kế nên trả lời trước khi phát triển là người dùng (hoặc muốn) chính xác sẽ làm gì khi làm việc với ứng dụng? Sau khi đã đưa ra câu trả lời, bạn có thể bắt đầu triển khai các ý tưởng Thiết kế Vật liệu.

Khi tạo một ứng dụng, hãy nhớ rằng nội dung ở đây không kém phần quan trọng so với nội dung của nó. thiết kế trực quan. Nó không được gây nhầm lẫn cho người dùng mà ngược lại, nó phải tạo cảm giác thoải mái và hiểu rõ lý do tại sao anh ta ở đây và anh ta sẽ làm gì bây giờ.

Kiểm tra các tùy chọn bố cục khác nhau, ví dụ: một thanh công cụ có thể được đặt ở đầu màn hình và do đó giải quyết được tất cả các tác vụ điều hướng, giúp chuyển đổi giữa các tab và tìm kiếm khác nhau dễ dàng hơn.

Hãy ghi nhớ các nguyên tắc về chức năng và cố gắng hướng dẫn người dùng, đừng “đánh rơi” họ ngay trên trang đầu tiên. Cách tiếp cận này sẽ có lợi hơn: bạn sẽ có thể tập trung sự chú ý của khách truy cập vào các khía cạnh quan trọng của sản phẩm/dịch vụ mà bạn cung cấp. Đã ở giai đoạn phát triển, hãy nghĩ đến việc tạo một hệ thống điều hướng cho phép bạn làm nổi bật các thành phần hỗ trợ mà mọi khách truy cập có thể dễ dàng và nhanh chóng tiếp cận.

Khi chọn những đồ vật, hình dạng và màu sắc đẹp nhất, đừng dừng lại ở đó: hãy bắt đầu thao tác những yếu tố này với sự trợ giúp của các chuyển động, mang lại cho chúng sự linh hoạt và trọng lượng “vật liệu” hữu hình. Khả năng kiểm soát xúc giác hoàn chỉnh này đối với mọi chuyển động, ngay cả những chuyển động nhỏ nhất khiến Material Design có vẻ đẹp độc đáo.

Mục tiêu của bạn ở giai đoạn phát triển này là tìm ra sự cân bằng giữa tính dễ di chuyển và tính chất vật lý của từng đối tượng sẽ đáp ứng các nguyên tắc của UX liền mạch.

Việc lập kế hoạch và thử nghiệm cẩn thận sẽ mang lại kết quả trong giai đoạn ra mắt: nếu bạn làm đúng mọi thứ, người dùng sẽ bị thu hút bởi thông tin bạn trình bày. Ngoài ra, nếu cần thực hiện một hành động theo nhiều bước, một thuật toán được lên kế hoạch sử dụng các vật thể sáng và hoạt ảnh sẽ đưa anh ta hoàn thành thao tác (sau cùng, anh ta sẽ hiểu rõ những gì được mong đợi ở mình và cách thực hiện nó) .

Hoạt ảnh trong Material Design thường được sử dụng để tạo ra các chuyển tiếp mượt mà hơn, nhưng không nên chỉ giới hạn ở điều đó. Với sự trợ giúp của nó, bạn có thể cải thiện nhiều chi tiết về giao diện và thanh điều hướng. Ngoài ra, bạn có thể sử dụng bộ phận nhỏ trong menu biểu tượng, điều này không chỉ tăng thêm sự rõ ràng mà còn một lần nữa nhấn mạnh mối quan tâm của bạn đối với tính thẩm mỹ của ứng dụng.

Hãy nhớ rằng Material Design tập trung vào khả năng sử dụng chứ không chỉ là thiết kế tốt. Các nguyên tắc của nó có thể là điểm khởi đầu tốt nhất để tạo ra một ứng dụng có thể thu hút một lượng lớn khán giả bằng sự duyên dáng và tiện lợi của nó.

Công việc của bạn với tư cách là một nhà thiết kế là làm cho cuộc sống của người dùng trở nên dễ dàng hơn và mang lại cho họ giải pháp hiệu quả khi nó tương tác với ứng dụng. Điều này xảy ra trước hết bằng cách cung cấp thông tin quan trọng nhất càng nhanh càng tốt. thời gian ngắn và ở định dạng thuận tiện nhất.

Luôn ghi nhớ các tiêu điểm mà người dùng nên tập trung vào và đảm bảo tại mỗi lần kiểm tra, chúng không bị mờ đi trong nền trong khi khách truy cập “đi lang thang” trong tài nguyên. Cửa sổ bật lên, thông báo và những phiền nhiễu khác có thể gây khó chịu cho khách truy cập hoặc thậm chí dồn họ vào chân tường. Hãy là một người hướng dẫn: giúp họ không bị lạc và tìm thấy thứ họ cần. Hướng dẫn và nút trợ giúp cũng phải luôn có sẵn.

Một ý tưởng hay khác là bao gồm mô tả về các liên kết bạn đăng trên tài nguyên. Chúng cần thiết để hiểu rõ ràng và nhanh chóng về nơi người dùng sẽ đến. Một công cụ kém hiệu quả hơn là sử dụng nút "bấm vào đây"

4. Mẫu biểu tượng từ Google Design:

5. Hệ thống lưới biểu tượng cho Android L:

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

Khi tạo ra các đồ vật, chúng ta tiến hành từ kinh nghiệm hàng thế kỷ và dựa vào nó. Nhưng thiết kế phần mềm- Đây là sản phẩm non trẻ và đang phát triển 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

Đến phần chính Nguyên tắc vật chất Thiết kế bao gồm các bề mặt xúc giác, thiết kế in ấn, hoạt ảnh có ý nghĩa và thiết kế đáp ứ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“Cố gắng không sử dụng bóng thể hiện âm 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ỉ chuyển động của “mực” mà còn thể hiện chuyển động của nền trắng nằm bên dưới.

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

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

Thiêt kê in ân

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

Kiểu chữ thanh lịch

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

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

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

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

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

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 thụt lề được tạo ra từ viền màn hình, ảnh hưởng đến cấu trúc nội dung trang và khả năng kiểm soát ánh nhìn của người dùng. Kết quả là ở giữa màn hình, chúng ta thấy văn bản chính và yếu tố bổ sung nằm bên ngoài nó, ở biên giới.

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

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

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

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

Màu sắc

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

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

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

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

Những bức ảnh đẹp

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

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

Hoạt hình có ý nghĩa

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

Ví dụ 1. Hoạt ảnh cho thấy 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, sự kiện này sẽ xuất hiện một cách trơn tru dưới dạng một lớp từ lịch chung, biến thành một khối riêng biệt và được hiển thị trong một khối riêng biệt chi tiết mô tả sự kiện này.

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

Sự phản ứng lại

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

Hoạt hình vi mô

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

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

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

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

Thiết kế thích ứng

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

  • Bạn không nên sử dụng ngăn điều hướng cho công cụ đơn giản. Bạn chỉ nên sử dụng điều hướng cho nhiều tác vụ trong ứng dụng.
  • Hãy táo bạo với các thanh công cụ.
  • Đặt nút nổi ở vị trí tối ưu nhất. Đừng chụp chặt vào góc dưới cùng.
  • Thực hành các yếu tố giao diện 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 sự đổi mới. công nghệ hiện đại va khoa hoc.

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

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

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

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

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

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

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

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

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à thụt lề lớn giữa các phần tử khác nhau.

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

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

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

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

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



Video

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

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

Video từ kênh Google Design.

Có lẽ bạn đã nhiều lần nghe đến cụm từ “thiết kế vật liệu”. Khái niệm về thiết kế vật liệu không phải là mới và đã được thiết lập khá vững chắc trên thị trường thiết kế web, chủ yếu do sự hấp dẫn của nó đối với trải nghiệm người dùng. Material Design được Google giới thiệu lần đầu tiên vào mùa hè năm 2015 và kể từ đó nó đã trở thành một khái niệm gắn bó chặt chẽ với công ty này. Các tính năng đặc biệt, nguyên tắc cơ bản của nó là gì và nó có tốt như người ta nói về nó không? Thông tin thêm về điều này sau trong bài viết.

Material Design không chỉ là một ý tưởng; nó từng buộc các nhà thiết kế phải xem xét lại hoàn toàn quan điểm của họ về quá trình tạo ra các trang web và ứng dụng. Các trang web hiện đại tận dụng tối đa các khung thiết kế và tài liệu thiết kế vật liệu của Google. Nhưng trước khi chuyển sang món tráng miệng, hãy xác định khái niệm về vật liệu thiết kế, mục đích và đặc điểm chính của nó.

Thiết kế vật liệu là gì?

Thiết kế vật liệu là ngôn ngữ đồ họa và phong cách thiết kế do nhóm tạo ra nhà phát triển Google, để giúp các nhà thiết kế tạo ra các trang web và ứng dụng dễ truy cập, thiết thực và hữu ích. Khái niệm này dựa trên tài liệu sống nằm ở truy cập công cộng và có thể được sử dụng bởi bất kỳ người dùng nào quan tâm đến khái niệm thiết kế vật liệu. Cho đến ngày nay, tài liệu này được cập nhật liên tục để phản ánh những thay đổi trong thiết kế và phát triển. Nhờ đó, thiết kế vật liệu vẫn phù hợp và không ngừng phát triển như một định hướng.

Material Design có một số mục tiêu và nguyên tắc được người tạo ra nó nêu ra. Danh sách này có thể trông hơi lý tưởng, nhưng chúng tôi vẫn sẽ trình bày những ý chính của nó bên dưới.

Mục tiêu thiết kế Material

  1. Tạo ra ngôn ngữ hình ảnh kết hợp các nguyên tắc cổ điển của thiết kế đẹp với sự đổi mới và khả năng của khoa học và công nghệ hiện đại.
  2. Phát triển một hệ thống cơ bản duy nhất cho phép bạn tạo các thiết kế phổ quát cho các nền tảng và thiết bị khác nhau. Nguyên tắc di động là cơ bản, nhưng cảm ứng, ra lệnh bằng giọng nói, nhập chuột và bàn phím là các phương thức tương tác và nhập liệu chính sẽ được xem xét khi phát triển thiết kế.

Nguyên tắc thiết kế vật liệu:

  1. Thiết kế vật liệu là một phép ẩn dụ: tín hiệu trực quan và tất cả yếu tố đồ họa các thiết kế phải dựa trên và kết nối với thực tế xung quanh, thế giới vật chất.
  2. Đồ họa, rõ ràng, có mục đích: Lý thuyết thiết kế cơ bản (sử dụng các loại, lưới, tổ chức không gian, tỷ lệ, tỷ lệ, màu sắc và hình ảnh) sẽ định hướng hình ảnh và bố cục cơ sở trực quan vật liệu thiết kế.
  3. Mọi chuyển động hoặc hành động đều quan trọng: chuyển động của đồ vật hoặc hành động khác được thực hiện không được gây trở ngại cho người dùng, ngược lại, phải đảm bảo sự thuận tiện và nhất quán của các hành động được thực hiện.

Ngoài các mục tiêu và nguyên tắc trên, còn có nhiều yếu tố định hướng khác. Mà xác định thiết kế vật liệu. Tài liệu thiết kế vật liệu được chia thành nhiều khái niệm và kỹ thuật cụ thể. Vì vậy, ví dụ: Google đã phát triển một bộ quy tắc cụ thể để tạo hoạt ảnh, kiểu, bố cục, thành phần, v.v.

Tất cả những khuyến nghị này đều dựa trên các đặc tính cơ bản của thiết kế vật liệu. Điều quan trọng nhất là thiết kế vật liệu dựa trên thực tế, trong đó các vật thể được đặt trong một không gian gần như ba chiều. Về mặt thẩm mỹ, thiết kế vật liệu nằm ở đâu đó giữa quy mô thiết kế phẳng ( thiết kế phẳng) và tính đa hình.

Màu sắc và kiểu chữ trong thiết kế Material Design

Màu sắc trong thiết kế vật liệu có nhiều điểm chung với . Các bảng màu chất liệu khá đậm và tươi sáng. , giống như trong thiết kế phẳng, sans serif đơn giản.

« Thiết kế vật liệu đầy đủ, kết hợp với tông màu trầm, một cách tiếp cận bắt nguồn từ kiến trúc hiện đại, biển báo đường bộ, băng đánh dấu và sân thể thao,” như đã nêu trong tài liệu thiết kế vật liệu của Google. “Làm nổi bật các vùng tối và vùng sáng đậm. Sử dụng màu sắc bất ngờ và tươi sáng».

Và điều tuyệt vời nhất về khái niệm màu sắc trong thiết kế vật liệu là việc sử dụng độ tương phản rõ ràng. Để thoải mái Người dùng Google cung cấp đầy đủ bảng màu với các mẫu có sẵn để tải về. Khái niệm màu sắc đơn giản đến mức bạn tự hỏi liệu Google có nghĩ rằng các nhà thiết kế đã hoàn toàn quên mất lý thuyết về màu sắc hay không.

Các hướng dẫn chọn và sử dụng font chữ cũng khá cơ bản và đơn giản. Phông chữ mặc định cho tất cả các ứng dụng – Roboto – có sẵn để tải xuống tại đây, nơi bạn cũng có thể tìm thấy bảng kết hợp và lựa chọn phông chữ.

Mẫu, cấu trúc và thiết kế

Trong cấu trúc và cách sắp xếp các yếu tố, thiết kế vật liệu vay mượn rất nhiều từ khái niệm thiết kế in ấn. Thiết kế vật liệu khuyến khích các nhà thiết kế tạo và sử dụng lưới cơ bản và cấu trúc toán học để đặt các phần tử dựa trên các mẫu.

Tiếp theo, mẫu được chia thành các khu vực, trong đó tài liệu cung cấp một số đề xuất nhằm cải thiện trải nghiệm người dùng trên trang web hoặc ứng dụng (cũng có các đề xuất về tầm quan trọng của một yếu tố cụ thể).

Yếu tố thiết kế vật liệu cơ bản

Mỗi phần tử mà một trang web được tạo theo kiểu vật liệu có thể bao gồm được mô tả chi tiết trong tài liệu. Bắt đầu từ cách tạo nó và nó trông như thế nào, cho đến vị trí, phương pháp và thời điểm xuất hiện trên màn hình của người dùng. Nói chung, rất khó để tìm ra thứ gì đó mà người sáng tạo đã bỏ sót hoặc không làm. Danh sách này bao gồm 19 thành phần cấu trúc chính, một số thành phần được liệt kê dưới đây.

  • Màn hình dưới cùng (lớp dưới cùng của thiết kế)
  • nút
  • thẻ
  • Đối thoại
  • Dấu phân cách
  • Lưới
  • Danh sách
  • Thanh tiến trình và hoạt động
  • Thanh trượt
  • Tiêu đề phụ
  • Công tắc
  • Tab
  • Trường văn bản
  • Cửa sổ bật lên

Các nhà thiết kế thích giao diện của các thành phần được đề xuất thậm chí có thể tải xuống nguồn cho Illustrator. Các biểu tượng và chi tiết khác được ghép nối với các kiểu và thích ứng với mẫu đã chọn.

Sự tiện lợi, khả năng tiếp cận và trải nghiệm người dùng

“Một sản phẩm sẽ dễ tiếp cận khi tất cả mọi người – bất kể khả năng – đều có thể sử dụng nó để đạt được mục tiêu của mình. thực sự sản phẩm thành công có thể tiếp cận được với nhiều đối tượng nhất có thể."

Tài liệu thiết kế Material Design tập trung rất nhiều vào khả năng tiếp cận, khả năng sử dụng và trải nghiệm người dùng, tất cả đều rất quan trọng. Trong khi nhiều đặc tính thẩm mỹ của thiết kế vật liệu có vẻ khá thô sơ đối với các nhà thiết kế có kinh nghiệm, một số khái niệm về trải nghiệm người dùng và tương tác được triển khai ở mức cao nhất.

Phần về các mô hình tương tác đặc biệt hữu ích. Nó tiết lộ những ý tưởng nhằm làm cho các yếu tố thiết kế nhất định trở nên phổ biến đối với tất cả các dự án web có thể thực hiện được. Ví dụ: định dạng để chỉ định ngày và giờ hoặc thao tác tìm kiếm. Những điều này có thể khác nhau tùy theo từng trang web, nhưng sự khác biệt là nhỏ và nhìn chung những yếu tố này khá phổ biến. Nếu khách truy cập nhìn thấy kính lúp, anh ta hiểu rằng trước mặt anh ta có thể sử dụng một tìm kiếm, ngay cả khi không có chỉ mục văn bản bên cạnh. Đó là lý do tại sao Material Design chứa một số công cụ đơn giản nhất mà người dùng mong muốn thấy trên bất kỳ trang web nào và đã quen làm việc với chúng.

Khả năng tiếp cận và dễ hiểu của thiết kế là một khía cạnh khác được đề cập rộng rãi trong tài liệu thiết kế vật liệu. Thiết kế vật liệu phải tính đến những người dùng có thể tương tác với nó không chỉ thông qua màu sắc và hình dạng mà còn thông qua âm thanh và tìm kiếm bằng giọng nói. Điều quan trọng là phải xem xét khả năng xem thiết kế trên các thiết bị có độ tương phản cao, màn hình lớn, không có màn hình hiển thị, chỉ với sự giúp đỡ điều khiển giọng nói hoặc xem xét sự kết hợp của tất cả các yếu tố này.

10 tài nguyên thiết kế vật liệu

Thiết kế vật liệu là một chủ đề thảo luận phổ biến và là nguồn cảm hứng cho nhiều blog, diễn đàn và các trang web khác nơi các nhà thiết kế web tập hợp. Có rất nhiều thứ hữu ích có thể tải xuống trực tiếp từ tài nguyên của Google, nhưng ngoài ra cũng có nhiều tài nguyên đăng tác phẩm của họ theo phong cách thiết kế vật liệu. Dưới đây là một số trang web có thể giúp bạn tìm hiểu các khái niệm về thiết kế vật liệu và tải xuống các tài liệu miễn phí.

  1. Tập hợp các yếu tố theo phong cách thiết kế vật liệu dành cho điện thoại thông minh và các thiết bị khác thiêt bị di động(xem bên dưới).

Phần 1: Thư viện thiết kế Material Design cho trang web và ứng dụng – Tài liệu miễn phí

Để đơn giản hóa công việc cho những độc giả quyết định thực hiện một dự án theo phong cách thiết kế vật liệu, chúng tôi quyết định tạo một phòng trưng bày với các giải pháp và phát triển sẵn có. Chỉ cần lấy một hoặc nhiều bộ miễn phí, được sự hỗ trợ của các nhà thiết kế trên khắp thế giới. Dưới đây bạn sẽ tìm thấy một bộ sưu tập phong phú các mặt hàng như vậy.

Thiết kế vật liệu của UXPin

Thiết kế vật liệu của Creative Tim

Lựa chọn vật liệu miễn phí từ Designtory

UIDE – tài liệu phác thảo miễn phí từ Mateusz Dembek

Tài nguyên phác thảo thiết kế vật liệu của Google

Thiết kế vật liệu L Bootstrap theo phong cách Android của Vitaly Chernega

Tài nguyên phác thảo cho thiết kế vật liệu từ Boilerplate

Thiết kế Vật liệu cho Niềm đam mê EL

Khối Froala theo phong cách vật liệu

Free Landing 1.0 theo phong cách vật liệu

Thiết kế vật liệu di động

thiết kế vật liệu avsc

Thiết kế vật liệu giao diện người dùng của Jakub Kośla

Thiết kế vật liệu cho Android của Ivan Bjelajac

Thiết kế vật liệu bởi Ultralinx

Thiết kế Vật liệu Di động của Emma Drews

Lựa chọn tài liệu miễn phí từ Adrian Goia

Thiết kế vật liệu từ UI8

Thiết kế Vật liệu cho Photoshop bởi Psddd

Thiết kế vật liệu Android PSD từ Nine Hertz

Các bộ sưu tập thiết kế vật liệu khác có thể hữu ích

Thiết kế vật liệu tương tác trạm của Nelson Sawa


Các vật dụng theo phong cách vật liệu từ Elad Izak


Bản phác thảo vật liệu từ Benjamin Schmidt




Vật liệu chọn màu Bộ chọn màu


Hãy tóm tắt lại

Khái niệm về thiết kế vật liệu là một giải pháp được cân nhắc kỹ lưỡng để tạo ra bất kỳ thiết kế hiện đại trang web hoặc ứng dụng. Ngoài ra còn có khá hướng dẫn chi tiết về Thiết kế Vật liệu, điều này sẽ rất hữu ích cho những nhà thiết kế mới bắt đầu nhưng có vẻ hơi thô sơ đối với những nhà thiết kế có kinh nghiệm.

Rất có thể ngày mai một thứ gì đó hoàn toàn sẽ xuất hiện sẽ xóa thiết kế vật liệu khỏi trí nhớ của các nhà phát triển, giống như nó đã xóa Công nghệ đèn flash. Không ai miễn nhiễm với điều này. Nhưng với tư cách là nhà thiết kế, bạn có quyền tự quyết định mức độ thú vị và cần thiết của thiết kế vật liệu đối với bạn trong các dự án tiếp theo, cũng như sử dụng các phát triển và thành phần của nó cho các thử nghiệm của riêng bạn.

Chúc bạn vui vẻ khi tạo ra các thiết kế và nếu bạn có điều gì muốn bổ sung vào bài viết, vui lòng viết đề xuất của mình trong phần bình luận.