Tìm Hiểu Về Material Design (Phần 1)

Cập nhật thông tin chi tiết về Tìm Hiểu Về Material Design (Phần 1) mới nhất ngày 23/09/2020 trên website Zdungk.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 3,168 lượt xem.

Material Design là một phong cách thiết kế mới được Google giới thiệu cùng lúc với phiên bản Android 5.0 Lollipop.

Phong cách thiết kế Material Design nhắm đến những đường nét đơn giản, sử dụng nhiều mảng màu đậm nổi bật, các đối tượng đồ họa trong giao diện dường như: “trôi nổi” lên. Ngoài ra, nó còn bao gồm cả những hiệu ứng chuyển động tự nhiên khi các nút, menu hiện diện trên màn hình. Tất cả đều nhằm mang lại cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần giống đời thực hơn.

Material Design – một phong cách thiết kế giao diện mới của Google.

SƠ LƯỢC VỀ MATERIAL DESIGN

Chúng ta có thể tưởng tượng các phần mềm được xây dựng dựa trên Material Design giống như nhiều tờ giấy khác nhau, mỗi tờ có một màu và bản thân nó tồn tại như một lớp riêng. Khi bạn chồng các tờ giấy này lên nhau thì bạn ra được giao diện chung của một ứng dụng. Các hiệu ứng đổ bóng của tờ này lên tờ khác cũng được mô phỏng lại trong Material Design. Vì giấy là các đối tượng tự nhiên, có thực ngoài đời nên khi chúng xuất hiện, khi mở ra, khi di chuyển…đều phải có điểm xuất phát và kết thúc, không thể nào đột ngột có mặt và biến mất được.

Ngoài ra, Google còn muốn các ứng dụng Material Design phải thật đơn giản, tinh gọn và không sử dụng các thành phần thừa. Theo hãng, việc xuất hiện của các nút, các menu thừa thải có thể gây rối cho người dùng, nó cũng chiếm không gian của nội dung chính và mọi chuyện sẽ càng tệ hơn khi app chạy trên các thiết bị nhỏ như đồng hồ thông minh.

MỘT SỐ ĐẶC ĐIỂM CÓ THỂ DÙNG ĐỂ NHẬN BIẾT NHỮNG ỨNG DỤNG MATERIAL DESIGN NHƯ SAU:

Sử dụng các màu nổi bật, thường có một mảng màu chủ đạo nằm ở cạnh trên ứng dụng Các biểu tượng phẳng, đơn giản nhưng dễ hiểu Một số ứng dụng sẽ có một nút tròn to nằm ở góc dưới bên phải, thường có chức năng tạo mới Giao diện phẳng, ít hoặc không có hiệu ứng chuyển màu, có hoặc không có hiệu ứng đổ bóng đen Menu, nút nhấn, chữ viết… có nhiều khoảng cách trắng nên trông thoáng đãng Có các hiệu ứng chuyển động tự nhiên, dễ hiểu, có thể gợi ý cho một tính năng nào đó

LỢI ÍCH CỦA MATERIAL DESIGN LÀ GÌ?

Như đã nói ở trên, Material Design là một ngôn ngữ được Google tạo ra nhằm “phát triển một hệ thống nền duy nhất cho phép xây dựng các trải nghiệm đồng bộ giữa nhiều loại và kích thước thiết bị khác nhau. Việc thiết kế cho thiết bị di động được đặt lên hàng đầu, nó còn phải chú trọng đến việc nhập liệu bằng cảm ứng, giọng nói, chuột, bàn phím”.

Thông qua lời nói trên, chúng ta có thể thấy là Google muốn mang lại trải nghiệm thống nhất cho người dùng trong hệ sinh thái của hãng. Người dùng cuối như chúng ta sẽ có cảm giác quen thuộc hơn, dành ít thời gian để học hỏi hơn khi sử dụng cùng một app nhưng trên nhiều máy khác nhau. Các lập trình viên thì có thể đảm bảo rằng cách người dùng trải nghiệm app của họ là như nhau không quan trọng thiết bị đang chạy là gì.

Với những bạn nào đã dùng Android từ lâu thì Material Design cũng giống như một hơi thở mới cho nền tảng 7 năm tuổi này và tránh đi sự nhàm chán mà chúng ta đã phải nhìn thấy trong vòng nhiều năm liên tục. Nhờ có các màu sắc vui vẻ và sinh động hơn, hiệu ứng chuyển động mượt mà hơn, chúng ta sẽ cảm thấy như đang cầm trong tay một chiếc điện thoại mới…

NGUYÊN TẮC:

Material Design đang dần phổ biến để trở thành một xu hướng, một tiêu chuẩn mới trong thiết kế UI.Trong thời gian qua, chúng tôi nhận được khá nhiều lời yêu cầu về việc cung cấp Material Design resources chất lượng.

Tuy nhiên, resource sẽ không thể được sử dụng hiệu quả nếu không nắm được những nguyên tắc thiết kế mới. Chính vì vậy, để đáp ứng yêu cầu của mọi người, loạt bài viết này sẽ song song cung cấp những nguyên tắc đồng thời tổng hợp những resources tốt nhất hiện tại.

3 yếu tố căn bản:

    Không gian: không gian dưới lớp kính màn hình được mô phỏng như một không gian 3 chiều Oxyz với chiều sâu là trục Oz như trong hình minh họa. Để thể hiện yếu tố này, chúng ta sử dụng ánh sáng.

    Ánh sáng: là yếu tố môi trường được sử dụng nhằm thể hiện tính 3 chiều của không gian. Hệ quả của ánh sáng, hiệu ứng bóng đổ, sẽ phân định vị trí các lớp Material trong không gian theo trục Oz.

Có 2 loại nguồn sáng được kết hợp:

Nguồn sáng chiếu trực tiếp: nguồn sáng này rất quan trọng. Giống như nguồn sáng từ đèn pin, hiệu ứng của nó sẽ là Drop shadow. Nguồn sáng này cùng chiều nhưng có hướng nghiêng một chút so với trục Oz.

Ánh sáng môi trường: ánh sáng của toàn không gian, nguồn sáng không rõ hướng. Hệ quả ở đây sẽ là một viền bóng nhẹ xung quanh Material.

Material Design kết hợp 2 nguồn sáng này để tạo nên một hiệu ứng bóng tổng hợp mô phỏng thế giới trực quan.

    Material Là những mặt phẳng có độ dày đồng nhất 1dp, Material nằm song song với mặt phẳng Oxy.

Các mặt phẳng Material sắp xếp chồng lên nhau theo trục Oz. Thông qua việc thay đổi kích thước của bóng, bạn sẽ dễ dàng mô tả vị trí tương đối của mỗi lớp so với các lớp khác.

Trên mỗi Material là nội dung được thiết kế theo nguyên tắc Flat Design.

Material là một “vật chất vô định hình”. Nó có thể thay đổi hình dáng kích thước,có thể tách thành nhiều phần, cũng có thể gộp lại thành một.

Material có thể xuất hiện và biến mất từ bất kỳ đâu trong không gian. Điều này không thuận với cơ chế trong vật lý nhưng tạm thời chúng ta có thể coi tính chất này gần giống với tính chất Material có thể thay đổi kích thước.

Material có thể di chuyển song song với mặt phẳng Oxy. Khi người dùng tương tác với Material, nó sẽ di chuyển dọc theo trục Oz (nâng lên, hạ xuống)

4 Material căn bản trong UI

Button

Animation

Material Design hướng đến mục tiêu xây dựng giao diện người dùng đẹp mắt, thú vị cho người dùng nhưng đồng thời cũng phải trực quan, logic nhằm khuyến khích người dùng khám phá sâu hơn nữa ứng dụng và các tương tác trong ứng dụng.

Mô phỏng thế giới trực quan

Animation trong Material Design tuân theo những nguyên tắc cơ bản trong vật lý về vận tốc, gia tốc và khối lượng.

Khi xuất hiện, Material sẽ giảm tốc cho đến khi dừng lại. Ngược lại khi biến mất, vận tốc sẽ tăng dần cho đến khi mất dạng.

Bạn cũng có thể tùy biến theo độ lớn và sức nặng của Material. Khi Material trông có vẻ nặng nề hơn (màu sắc tối, nhiều yếu tố UI,…), nó sẽ chuyển động chậm hơn.

Hiệu ứng tự nhiên

Những hiệu ứng trong Material Design sẽ tùy thuộc vào người dùng. Ví dụ, khi bạn nhấn chọn một thành phần, hiệu ứng sóng trên màn hình sẽ tỏa ra từ vị trí của ngón tay bạn chứ không phải từ một hướng cố định.

Hiệu ứng bề mặt

Khi chuyển trang, các thành phần phải chuyển một cách tự nhiên và liên tục chứ không biến mất và load trang mới. Bằng cách này, người dùng sẽ hiểu được trang mới này từ đâu mà ra, có những thành phần gì, phải tập trung vào đâu.

Có thứ tự: những thành phần ở sau sẽ xuất hiện trước, thành phần lớn hơn sẽ xuất hiện trước, thành phần quan trọng hơn sẽ xuất hiện trước. Xuất hiện theo thứ tự sẽ giúp người dùng định hình những thành phần có trên UI và có thể tập trung vào những phần quan trọng hơn. Ví dụ, với 4 loại material, thứ tự xuất hiện sẽ là:

Card – Menu – Float Button – Button

Thống nhất: chuyển động của những Material phải thống nhất từ cùng một hướng.

Chi tiết thú vị: với xu hướng thiết kế mới, bạn không làm nổi bật tất cả mà sẽ chọn 1 chi tiết nhỏ tiết nhỏ để thiết kế những tương tác, chuyển động thú vị.

Liên quan

Ethernet Switch Có Chức Năng Gì? - Xem 21,879

Ethernet Switch có chức năng gì? Switch là một thiết bị chọn lựa đường dẫn để gửi frame đến đích, hoạt động ở Lớp 2 của mô hình OSI. Đôi khi Switch còn được gọi là Bridge đa port hay Hub chuyển mạch. Switch quyết định chuyển frame dựa trên ... Mỗi segment này là một kết nối riêng giống như một làn đường riêng 100 Mbps. Mỗi server có thể đặt trên một kết nối 100 Mbps riêng. Trong các hệ thống mạng hiện nay, Fast Ethernet Switch được sử dụng làm đường trục chính cho mạng LAN, còn Ethernet Switch, Ehternet Hub hoặc Fast Ethernet Hub được sử dụng kết nối xuống các máy


Oxit Axit Là Gì? Tính Chất Hóa Học Và Hướng Dẫn Bài Tập Oxit Axit - Xem 18,909

Oxit axit là các oxit khi tác dụng với nước sẽ tạo ra axit, tác dụng với kiềm tạo thành muối hóa học. Oxit axit thường là oxit của phi kim ứng với một axit hoặc kim loại có hóa trị cao. Vậy tính chất hóa học của oxit axit ... Oxit axit thường là oxit của phi kim ứng với một axit hoặc kim loại có hóa trị cao. Vậy tính chất hóa học của oxit axit là gì? Cách giải bài tập oxit axit tác dụng với bazo như thế nào? Cách gọi tên oxit axit Tên oxit axit: (Tên tiền tố chỉ số nguyên tử của phi kim) + Tên phi kim + (tên tiền tố chỉ số nguyên tử oxi) + ''Oxit'' Tính chất hóa học của oxit axit Trừ SiO 2 thì hầu hết các oxit axit


Drama Là Gì ? Ý Nghĩa Của Từ Drama Trên Facebook Là Gì? - Xem 15,939

Xã hội ngày càng phát triển kéo theo nhiều trào lưu xuất hiện, các thuật ngữ, ngôn từ mới lạ ngày càng nhiều trên các mạng. Những nội dung, các câu chuyện có tính chất kịch tính, gay cấn kéo dài luôn dành được sự quan tâm của các bạn ... Nhưng hiện tại trên facebook, ngoài nghĩa đó thì drama còn mang nhiều nghĩa khác như: phim dài tập để phân biệt với phim một tập (movie). Hay là những câu chuyện mang tính hồi hợp, gay cấn, kịch tính,... Phim drama Là những bộ phim dài tập có nội dung, tình tiết kéo dài. Phim nói về một câu chuyện xây dựng dựa trên nhân vật thật hoặc hư


Giải Vbt Vật Lý Lớp 6 - Xem 12,276

Giải bài tập môn Vật lý 6 Giải VBT Vật lý lớp 6 – Bài 8: Trọng lực – Đơn vị lực là tài liệu tham khảo môn Vật lý 6 hay dành cho các em học sinh, giúp các em ôn tập và củng cố kiến thức đã học ... Lực này do Trái Đất tác dụng lên viên phấn. II - PHƯƠNG VÀ CHIỀU CỦA TRỌNG LỰC 1. Phương và chiều của trọng lực Câu C4 trang 31-32 VBT Vật Lí 6: Lời giải: a) Khi quả nặng treo trên dây dọi đứng yên thì trọng lực tác dụng vào quả nặng đã


Kimochi Yamate Là Gì? Ý Nghĩa Của I Cư Kimochi Yamete Trong Tiếng Nhật? - Xem 11,484

Kimochi Yamate hay i cư kimochi và i kư kimochi là những thuật ngữ, cụm từ được sử dụng khả phổ biến trong thời đại hiện nay. Nhưng bạn có thật sự hiểu được nghĩa của từ kimochi là gì? Ở bài viết dưới đây, Zdungk.com sẽ giải đáp toàn ... Mời các bạn cùng tham khảo. Kimochi là gì? Nhắc đến Kimochi thì hầu như ai cũng biết đây là âm thanh quen thuộc được nhắc đến tại xứ sở hoa anh đào - Nhật Bản. Và ở trong tiếng Nhật thì Kimochi là từ nghĩa mang hàm ý biểu đạt cảm xúc, tâm trạng thích thú của một người nói sau khi đã chứng kiến một sự vật hay hiện tượng nào đó. Còn trong tiếng Anh thì kimochi được hiểu đồng


Đa Dạng Sinh Học Là Gì? Nguyên Nhân, Biện Pháp Hạn Chế Suy Giảm Đa Dạng Sinh Học - Xem 11,385

Đa dạng sinh học là sự phong phú của nhiều nhiều dạng, loài và các biến dị di truyền của mọi sinh vật trong đời sống tự nhiên, sự đa dạng và phong phú này được chia làm nhiều cấp độ tổ chức sinh giới đặc biệt là với các ... Hầu hết các chuyên gia đều cho rằng với nguyên nhân từ con người là do sự phá hủy đất để canh tác nông nghiệp cũng như gây xáo trộn trong việc nhập nội các loài đã tính đa dạng đồng thời còn săn bắn và giết thịt, việc loài người định cư cũng là một trong những nguyên nhân chính cho sự tuyệt chủng của những loài động vật và chim đã tồn tại từ nhiều năm trước đây! Tốc độ


Z Là Gì Trong Toán Học? - Xem 10,791

Bạn có từng nghe về tập hợp R trong toán học chưa? Hẳn là rất rất quen phải không? Dĩ nhiên rồi vì lớp 6 lớp 7 chúng ta được học cái này mà. Vậy Z là gì trong toán học nhỉ? “Tập hợp Z là tập hợp các số ... Vậy Z là gì trong toán học nhỉ? "Tập hợp Z là tập hợp các số nguyên âm, số nguyên dương và số 0. Z= {...; -2; -1; 0; 1; 2; ...}" VD: -10; -9; -8; 100 ; 0 đều thuộc tập hợp Z Tập hợp z trong toán học còn có một tên gọi khác là số nguyên. Tập hợp số nguyên chỉ ra các số nguyên là miền xác định nguyên duy nhất mà các phần tử dương của nó được sắp thứ tự tốt và các thứ tự đó


Tb Là Gì Trên Facebook? - Xem 10,098

TB nghĩa là gì? TB là viết tắt của từ gì? TB là 1 từ viết tắt có rất nhiều nghĩa tiếng việt và tùy từng ngữ cảnh mà ta hiểu nó sẽ có nghĩa là gì, dưới đây là các nghĩa hay được sử dụng nhất của từ viết ... Đơn vị này cao cấp hơn Gigabyte - GB. 1 TB = 1024 GB 5 TB = 5120 GB 10 TB = 10240 GB Ví dụ: Bạn có ổ cứng dung lượng 2 TB tức là ổ cứng của bạn bằng 2048 GB Một bộ phim, thư mục, video có dung lượng 1TB tức là 1048 GB -phim HD dung lượng cao. Vậy nếu bạn thấy đứng đằng trước TB là 1 con số thì nó thường là viết tắt của cụm từ Terabyte TB trên Facebook nghĩa là gì? Đối với


Số Cvv/cvc Trên Thẻ Atm Vietcombank Là Gì? - Xem 9,702

Số Cvv/Cvc trên thẻ atm đang được rất nhiều chủ thẻ quan tâm. Nhất là với những người dùng thẻ atm Vietcombank. Vậy số Cvv/Cvc trên thẻ atm vietcombank là gì? Bị lộ có sao không? Số Cvv/Cvc trên thẻ atm vietcombank là gì? Không phải ai dùng thẻ atm ... Nhất là đối với những giao dịch online thanh toán qua thẻ Visa/Mastercard. Hướng dẫn sử dụng số Cvv/Cvc Như đã nói ở trên, số Cvv/Cvc có tác dụng trong việc thanh toán hóa đơn mua hàng online qua thẻ Visa/Mastercard. Cách sử dụng mã số này như sau: Đầu tiên bạn chọn mặt hàng cần mua. Sau đó nhấn vào dòng chữ Thanh


Mã Zip Iphone Là Gì? - Xem 9,207

Zip Code (mã zip) là một trong những khái niệm không quá xa lạ đối với thế hệ trẻ. Chúng liên quan trực tiếp tới quy trình giao – Nhận bưu kiện khi mua sắm online hay đặt hàng thông qua các ứng dụng giao dịch trực tuyến. Không chỉ ... Mỗi quốc gia khác nhau sẽ có những cấu trúc mã Zip Code khác nhau. Tại Mỹ, mã Zip Code thường có từ 5 tới 9 số được thêm vào phía sau địa chỉ bưu chính nhằm hỗ trợ quá trình phân loại bưu phẩm. Trong khi đó, tại một số các quốc gia như Anh hoặc Canada, mã bưu chính lại gồm cả số lẫn chữ cái. Cấu trúc của mã zip thường bao gồm một tới hai chữa số đầu được đặt theo tên


Đề xuất

Otp Là Gì? Tổng Hợp Các Loại Mã Otp Được Dùng Phổ Biến? - Xem 2,574

Mã OTP là một thuật ngữ rất quen thuộc đối với những người thường xuyên sử dụng các dịch vụ thanh toán trực tuyến, hoặc thực hiện các giao dịch online. Và nó cũng là một yếu tố quan trọng giúp cho việc thanh toán trực tuyến của bạn được ... Sau thời gian này, mã sẽ không còn có hiệu lực nữa. Nhiệm vụ của OTP là được dùng để bảo mật 2 lớp. Ngoài lớp mật khẩu bạn đăng ký khi sử dụng tài khoản, thì để thực hiện được các giao dịch bạn còn cần phải nhập mã


Số Cvv/cvc Trên Thẻ Atm Sacombank Là Gì? Ghi Ở Đâu, Và Lưu Ý Gì? - Xem 3,267

Để bảo mật thông tin, trên thẻ ATM Sacombank có in số Cvv/Cvc trên thanh chữ ký mặt sau của thẻ. Mã số này còn có tên là mã xác nhận thẻ. Nhằm ngăn ngừa việc giả mạo thông tin cũng như là hạn chế giao dịch của kẻ gian. ... Muốn có được thẻ này thì bạn phải mở một tài khoản ngân hàng. Và sau thời gian khoảng một tuần bạn sẽ được hẹn đến lấy. Muốn sử dụng thẻ ghi nợ để chuyển tiền, giao dịch, nạp tiền điện thoại, thanh toán hóa đơn. Nói


Sang Năm 2020 Là Năm Con Gì, Mệnh Gì - Xem 2,673

Sang năm 2020 là năm con gì vậy, sinh năm 2020 mệnh gì? câu hỏi này nhận được sự quan tâm của rất nhiều quý độc giả, đặc biệt là những người đang có ý định sinh con đẻ cái, mưu đồ kinh doanh, xây nhà dựng cửa … nói ... Tương sinh với mệnh Hỏa và mệnh Kim, tương khắc với mệnh Mộc và mệnh Thủy. Đặc biệt, Thiên Can Canh lại thuộc Kim nên Chi hợp Can, rất tốt, điều này giúp Canh Tý luôn gặp được may mắn, hanh thông trong cuộc đời của mình. Về đặc trưng


Những Điều Cần Biết Khi Sử Dụng Màu Xanh Xám (Sage Green) Cho Căn Nhà Của Bạn - Xem 2,871

Tại sao màu xanh Sage lại hấp dẫn như vậy? “Đây là một màu sắc mềm mại, tự nhiên, dễ trang trí,” theo ông Luc Lucena-Orr – quản lý dự án và truyền thông màu sắc của hãng sơn Dulux. “Nó cũng kết hợp tốt với các sắc thái phổ ... Nó mang đến không khí của nông thôn trong lành và thư thái. Màu xanh Sage là màu lý tưởng để trang trí cho căn nhà của bạn để tạo cảm giác phục hồi năng lượng sau những ngày làm việc mệt mỏi. Có thể sử dụng nhiều tông màu xanh sage


Ui Ux Là Gì? Ui, Ux Design Là Gì? - Xem 2,970

Công nghệ thiết kế UI, UX là một trong các công nghệ thiết kế web phổ biến được nhiều công ty, sử dụng để làm web cho các doanh nghiệp. Đây cũng là xu hướng thiết kế web được đánh giá sẽ tiếp tục được ưa chuộng và phát triển ... Chuẩn bị về kiến thức Để học UI/UX hiệu quản hãy chắc chắc rằng bạn đã chuẩn bị cho mình một nền tảng thiết kế cực tốt, điều đó bao gồm: lý thuyết màu sắc, cách trình bày bố cục, lý thuyết về font, các nguyên lý cơ bản


Bạn đang xem bài viết Tìm Hiểu Về Material Design (Phần 1) trên website Zdungk.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!