• Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
AnonyViet
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức
No Result
View All Result
AnonyViet
No Result
View All Result

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google

Lmint by Lmint
15/07/2018
in Đồ Họa
3

Các bài viết liên quan

canva pro mien phi

Cách nâng cấp tài khoản Canva Pro miễn phí dùng đầy đủ tính năng

27/09/2020
Download PICHON 8.6 Full (ICONS8) - Bộ sưu tập ICON dùng để thiết kế 18

Download PICHON 8.6 Full (ICONS8) – Bộ sưu tập ICON dùng để thiết kế

03/03/2020
logo anonyviet designevo

Hướng dẫn thiết kế Logo Online với DesignEvo – nhiều mẫu đẹp

20/02/2020
Google Chrome Canvas

Cách vẽ online bằng ứng dụng Google Chrome Canvas

15/02/2020

Mục lục bài viết

  1. Phong cách Material là gì ?
    1. Ví dụ thực tế
    2. Giới thiệu phần mềm thiết kế Adobe XD
    3. Lời kết

Thời đại công nghệ 4.0 đang gây ảnh hưởng lớn tại Việt Nam. Số lượng website và ứng dụng di động không ngừng tăng lên. Đồng nghĩa với việc thiết kế giao diện ứng dụng ngày càng được chú trọng hơn. Xu hướng thiết kế 2018 đang theo chiều hướng thiết kế đơn giản Material của Google.

Mình làm việc nhiều trong lĩnh vực giao diện website (Front-end). Học được rất nhiều kinh nghiệm trong phong cách thiết kế này của ông lớn Google. Gần đây nhất, mình có đăng một video demo về khả năng thiết kế của mình tại Fanpage AnonyViet.

Nếu bạn thích phong cách thiết kế phẳng của Google thì hãy dành thời gian đọc bài này. Mình có chuẩn bị nhiều kiến thức hay dành cho bạn. Những kiến thức này, mình đã học trong sách và xem các video về phong cách thiết kế của Google mà học được.

Phong cách Material là gì ?

Nói đơn giản đây là phong cách thiết kế dựa trên vật chất có thật. Vật chất mà Google sử dụng trong phong cách thiết kế Material chính là giấy cứng. Giấy cứng có màu sắc sáng, hài hòa và đường nét sang trọng.

Xem thêm:  Lợi ích và ứng dụng của Smart Object trong Photoshop

Hãy tưởng tượng màn hình của bạn nằm theo 3 trục X-Y-Z như ảnh dưới đây.

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 10

  • Trục X – theo chiều ngang màn hình.
  • Trục Y – theo chiều dọc màn hình.
  • Cuối cùng, trục Z sẽ là trục nằm vuông góc (đâm xuyên màn hình).

Công việc của chúng ta là cắt những tờ giấy màu thành các hình dạng cần thiết. Sau đó sắp xếp chúng thành một bố cục hợp lý trên màn hình với các mức độ xếp chồng khác nhau (theo trục Z).

Ví dụ giao diện của một ứng dụng di động bình thường bạn thấy là như thế này!

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 11

Nhưng quan sát trên trục Z thì chúng là những tờ giấy được sắp xếp như ảnh dưới này đây!

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 12

Những tờ giấy được cắt ra và sắp xếp trôi nổi chính là mấu chốt của thiết kế Material. Để có thể biểu diễn độ sâu của các tờ giấy chúng ta sẽ sử dụng hiệu ứng đổ bóng. Xem ví dụ dưới đây bạn sẽ hiểu rõ hơn.

Ví dụ thực tế

Ví dụ mình có một giao diện ứng dụng trên điện thoại như ảnh dưới.

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 13

Khi nhìn vào bạn sẽ khó cảm nhận được phần nào ở trên, phần nào ở dưới. Bạn cảm thấy tất cả như 2D và nó không mang lại cảm giác có chiều sâu trên trục Z. Bây giờ, mình sẽ thử đổ bóng cho bản thiết kế này để xem có gì khác biệt không nhé !!

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 14

Wow, lúc này bạn thấy rõ rành chiều sâu rồi đúng không? Cảm giác phần màu xanh lá nằm phía trên và phần màu trắng sẽ ở dưới. Chỉ đơn giản là đổ bóng thôi, nhưng nó mang lại chiều sâu cho thiết kế của bạn, rất giống với Google Design.

Xem thêm:  Cách Ghép mặt Cầm cành đào dựa cột điện,Gia đình đạp xe đạp, chú Tiểu

Giới thiệu phần mềm thiết kế Adobe XD

Bạn có thể sử dụng Photoshop để thiết kế giao diện. Nhưng mình là lập trình viên, mình mệt mõi nếu phải học thêm đống kiến thức về Photoshop lắm !! Mình có giải pháp hiệu quả và nhanh hơn nhiều, đó là sử dụng Adobe XD ( mình dùng trong video phía trên ).

Đây là phần mềm được Adobe phát triển để giúp lập trình viên thiết kế giao diện UI/UX. Phần mềm được Adobe miễn phí bản quyền và rất dễ sử dụng.

Bạn có thể tải về tại liên kết dưới đây.

Adobe XD

Tải về và cài đặt như các phần mềm thông thường khác.

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 15

Khi bạn mở chương trình lên sẽ thấy giao diện như ảnh dưới đây.

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 16

Có thể lựa chọn nhiều kiểu màn hình của các thiết bị khác nhau để bắt đầu thiết kế. Ở trên mình đã thiết kế giao diện trên màn hình của Iphone 6 Plus trong vòng 10s.

Thiết kế giao diện material đẹp như Google

Adobe XD chỉ có 8 công cụ thiết kế đơn giản ở thanh bên trái. Không cần kiến thức phức tạp như trong Adobe Photoshop. Ngoài ra, phần mềm cũng hỗ trợ rất mạnh về mảng thiết kế UI/UX dạng Material.

Học thiết kế giao diện Material cho Website và App điện thoại đẹp như Google 17

Adobe XD sử dụng rất đơn giản với thao tác kéo thả các công cụ bên trái. Điều chỉnh thông số ở thanh bên phải. Dưới đây là video hướng dẫn thiết kế với Adobe XD, bạn có thể xem qua để hiểu sâu hơn cách dùng 8 công cụ thiết kế của Adobe XD.

Xem thêm:  Share PSD Thẻ hội viên hội thánh đức chúa trời

Sau khi làm xong, bạn có thể xuất ra ở các định dạng khác nhau như file SVG, PNG, JPG,…

Lời kết

Nếu bạn có trục trặc hoặc thắc mắc gì trong quá trình thiết kế. Vui lòng tham gia nhóm riêng của AnonyViet để đặt câu hỏi. Mọi người trong nhóm và các Admin sẽ giải đáp giúp cho bạn trong thời gian sớm nhất.

Tham gia nhóm

Cảm ơn bạn đã dành thời gian cho AnonyViet
Lmint.

Tags: học thiết kế giao diệnkhóa học thiết kế đồ họamaterial designthiết kếthiết kế giao diện materialthiết kế phẳngđổi giao diện
Previous Post

Cài đặt ứng dụng xem video Tik Tok trên Windows 10 không cần giả lập

Next Post

Sau khi học lập trình JavaScript ổn rồi thì nên học gì tiếp theo?

Lmint

Lmint

Người mà bạn nên trông đợi, chỉ có bản thân bạn mà thôi. Đừng phụ thuộc quá nhiều vào người khác để đến khi nhìn lại bản thân thì chẳng làm được gì nên trò.

Related Posts

ghép ảnh áo dài tết
Đồ Họa

Cách ghép mặt vào ảnh áo dài Tết không cần Photoshop

17/01/2021 - Updated on 18/01/2021
cach tao canva edu free
Đồ Họa

Tạo tài khoản Canva Edu miễn phí để thiết kế ảnh Online đầy đủ tính năng

11/11/2020
photoshop 2021 full crack
Đồ Họa

Download Photoshop 2021 Full Active – Tích hợp sẵn bản quyền

28/10/2020 - Updated on 03/11/2020
Cách đăng ký tài khoản Freepik Premium để tài file đồ họa miễn phí 19
Đồ Họa

Cách đăng ký tài khoản Freepik Premium để tài file đồ họa miễn phí

18/10/2020 - Updated on 19/10/2020
canva pro mien phi
Đồ Họa

Cách nâng cấp tài khoản Canva Pro miễn phí dùng đầy đủ tính năng

27/09/2020
5 Mẹo chỉnh sửa ảnh đơn giản để làm nổi bật ảnh của bạn 20
Đồ Họa

5 Mẹo chỉnh sửa ảnh đơn giản để làm nổi bật ảnh của bạn

28/08/2020
Next Post
Sau khi học lập trình JavaScript ổn rồi thì nên học gì tiếp theo? 21

Sau khi học lập trình JavaScript ổn rồi thì nên học gì tiếp theo?

guest
guest

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

3 Comments
oldest
newest most voted
Inline Feedbacks
View all comments
Nguyen Thanh Chi | <span class="wpdiscuz-comment-count">6 comments</span>
Nguyen Thanh Chi | 6 comments
2 years ago

cái này thiết kế ứng dụng hay sao ad, nhìn cũng khó hiểu

0
Reply
GSD HIV | <span class="wpdiscuz-comment-count">59 comments</span>
GSD HIV | 59 comments
2 years ago
Reply to  Nguyen Thanh Chi

bạn lên mạng xem video hướng dẫn có nhiều lắm ở đây ad chỉ giới thiệu phần mềm thôi

0
Reply
GSD HIV | <span class="wpdiscuz-comment-count">59 comments</span>
GSD HIV | 59 comments
2 years ago

cái này đc nè đơn giản và gọn nhẹ hơn photoshop tks ad

0
Reply

Liên hệ Quảng Cáo

Lien he AnonyViet

Đối tác

Fshare

Các bài mới

cach hack dien thoai

12 Cách để Hacker có thể Hack điện thoại của bạn

25/01/2021
Ping of Death ddos

Ping of Death là gì? Thực hiện Ping of Death để DDOS như thế nào?

24/01/2021
Download Burp Suite 2020.12 Pro Full Key - Cách Active bản quyền 22

Download Burp Suite 2020.12 Pro Full Key – Cách Active bản quyền

24/01/2021
Cách chọn thức ăn theo Nhóm Máu để cường tăng sức khỏe

Cách chọn Thức Ăn theo Nhóm Máu để cường tăng sức khỏe

23/01/2021
Cách cài đặt Docker trên Ubuntu 20.04 LTS 23

Cách cài đặt Docker trên Ubuntu 20.04 LTS

23/01/2021

Ads

Giới thiệu

AnonyViet

AnonyViet

Nơi chia sẻ những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

Chúng tôi sẵn sàng đón những ý kiến đóng góp, cũng như bài viết của các bạn gửi đến AnonyViet.

Hãy cùng AnonyViet xây dựng một cộng đồng CNTT lớn mạnh nhất!

Giới thiệu

AnonyViet là Website chia sẻ miễn phí tất cả các kiến thức về công nghệ thông tin. AnonyViet cung cấp mọi giải pháp về mạng máy tính, phần mềm, đồ họa và MMO.

Liên kết

Game B52 |  Tải game đổi thưởng online | Chơi game bài hot 2020 | Chơi game bài đổi thưởng online | Gam Víp | 88vin link

Liên hệ đặt Ads: [email protected]

Liên hệ

Email: anonyviet.com[@]gmail.com

1409 Hill Street #01-01A
Old Hill Street Police Station
Singapore 179369

Bài viết mới

  • 12 Cách để Hacker có thể Hack điện thoại của bạn
  • Ping of Death là gì? Thực hiện Ping of Death để DDOS như thế nào?
  • Download Burp Suite 2020.12 Pro Full Key – Cách Active bản quyền
  • Cách chọn Thức Ăn theo Nhóm Máu để cường tăng sức khỏe
  • Cách cài đặt Docker trên Ubuntu 20.04 LTS
  • Nhận bản quyền License 6 tháng VPN của Seed4Me
  • Giới thiệu về AnonyViet
  • Liên hệ Quảng cáo
  • Privacy & Policy
  • Contact

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

No Result
View All Result
  • Network
    • Mạng cơ bản
    • Hyper-V
    • Linux
    • Windown Server 2012
  • Security
    • Basic Hacking
    • Deface
    • DDOS
    • Kali Linux / Parrot
    • SQL Injection
    • Virus-Trojan-Rat
  • Thủ thuật
    • Khóa Học Miễn Phí
    • Code
    • Mẹo Vặt Máy Tính
    • Facebook
    • Windows 7/8/10
    • Đồ Họa
    • Video
  • Software
    • Phần mềm máy tính
    • Phần mềm điện thoại
  • MMO
    • Advertisers – Publishers
    • Affiliate Program
    • Kiếm tiền bằng điện thoại
    • Pay Per Click – PPC
  • Tin tức
  • Kiến thức

© 2019 AnonyViet - Chúng tôi mang đến cho bạn những kiến thức bổ ích về Công nghệ.

wpDiscuz