Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Material Design
Webdesign

Thiết kế ứng dụng mang phong cách Material Design bằng cách sử dụng Sticker Sheet

by
Difficulty:BeginnerLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Cảm ơn Material Design, một ngôn ngữ trực quan được phát triển bởi Google, việc thiết kế giao diện người dùng cho nền tảng Android trở nên dễ dàng hơn hơn bao giờ hết. Một khi bạn dành một vài phút lướt qua tài liệu hướng dẫn được cập nhật liêu tục của nó, thì bạn có thể bắt đầu thiết kế ứng dụng Android phù hợp với giao diện gốc của các bản phát hành Android, bao gồm Marshmallow và Nougat. Hơn nữa, để giúp bạn tiết kiệm thời gian và công sức, Google đã phát hành một Sticker Sheet cho Material Design.

Sticker sheet

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách sử dụng Sticker Sheet cho Adobe Photoshop để nhanh chóng thiết kế giao diện người dùng của một ứng dụng Android.

Tại sao nên sử dụng Sticker Sheet?

Những giao diện người dùng phù hợp với đặc tả Material Design, đối với hầu hết các phần, bao gồm các hình dạng đơn giản, màu sắc và một ít bóng đổ. Do đó, không giống như các giao diện người dùng theo phong cách Skeuomorphic, chúng không khác nhau nhiều. Trong thực tế, ngoại trừ màu sắc, kích thước, và độ cao, các widget của giao diện người dùng giống nhau ở hầu hết các ứng dụng Material Design. Sticker Sheet cho Material Design chứa những hình ảnh của những widget đó, và bằng cách sử dụng nó, bạn có thể làm theo phương pháp kéo thả để thiết kế giao diện người dùng một cách hiệu quả.

Drag and drop sticker sheet
Thiết kế kéo và thả giao diện người dùng

Mặc dù chúng tôi sẽ sử dụng Adobe Photoshop trong hướng dẫn này, cần lưu ý rằng Sticker Sheet cũng có cho Sketch, Adobe Illustrator và After Effects.

Điều kiện tiên quyết

Để có thể làm theo hướng dẫn này, bạn sẽ cần:

  • Adobe Photoshop CC
  • Sticker Sheet mới nhất cho Adobe Photoshop

1. Mở Sticker Sheet

Mở Adobe Photoshop và đi đến File > Open... mở Sticker Sheet bạn đã tải xuống. Trừ khi bạn có phông chữ Roboto được cài đặt sẵn trên máy tính của bạn, thì bạn sẽ thấy một hộp thoại nhắc bạn để đồng bộ hoá nó từ Adobe Typekit, hoặc tải về từ một nguồn khác (chẳng hạn như Google Fonts).

Nếu bạn sử dụng Typekit, bấm nút Resolve Fonts để tiếp tục. Tất nhiên, bạn phải đăng nhập tài khoản Creative Cloud của bạn để việc đồng bộ được hoàn tất.

Một khi mở Sticker Sheet, bạn sẽ thấy rằng nó là một tài liệu rất lớn—kích thước của nó là 5688 × 6790 px—với nhiều layer và các nhóm layer. Tôi đề nghị bạn dành vài phút nhìn vào tất cả mọi thứ mà nó cung cấp.

Contents of the Sticker sheet

2. Tạo các thành phần toàn cục

Thanh trạng thái, thanh điều hướng và thanh ứng dụng thường được gọi là "thành phần toàn cục" của một ứng dụng. Bằng cách tạo ra chúng trước tiên, chúng ta xác định khu vực mà bên trong đó các thành phần còn lại của giao diện người dùng sẽ được đặt.

Trong Sticker Sheet, tất cả các thành phần toàn cục có mặt bên trong nhóm layer được gọi là Global elements. Nó có chứa các thành phần toàn cục cho di động, máy tính bảng, và giao diện người dùng máy tính để bàn. Tuy nhiên, bây giờ, hãy tập trung vào nhóm layer MOBILE bằng cách chọn nó và giữ phím Alt đồng thời nhấp vào biểu tượng mắt của nó.

Contents of the MOBILE layer group

Như bạn có thể nhìn thấy, nhóm layer có chứa tất cả các thành phần mà chúng ta cần, cùng với một vài tham chiếu sẽ giúp chúng ta xác định chính xác vị trí các widget của giao diện người dùng. Hãy vào Layer > Duplicate Group... để tạo một bản sao của nó trong một tài liệu mới được gọi là MyMaterialApp.

Duplicate Group dialog for the MOBILE layer group

Trong hướng dẫn này, chúng ta đang tạo ra giao diện người dùng của một ứng dụng Android sẽ đóng vai trò như là một ứng dụng đếm số calo. Do đó, trong tài liệu mới được tạo ra, mở rộng nhóm layer App bar và sử dụng công cụ Horizontal Type Tool (T) để thay đổi tiêu đề của các ứng dụng thành "Calories".

App title changed to Calories

Ngoài ra, thiết kế của chúng ta sẽ có một biểu đồ trong khu vực thanh ứng dụng. Để nhường chỗ cho nó, chọn các layer key shadowambient, nhấn Ctrl+T và làm cho cả hai cao 250px. Đừng quên nhấn Enter để hoàn tất.

Height of the app bar changed to 250px

3. Thêm một danh sách

Chuyển về tab sticker sheet và tìm kiếm nhóm layer LISTS. Có tám kiểu danh sách khác nhau bên trong nó. Tuy nhiên, chúng ta sẽ chỉ sử dụng kiểu thứ bảy. Vì vậy, hãy chọn nhóm layer được gọi là List7 và đi đến Layer > Duplicate Group... để tạo ra bản sao của nó trong các tài liệu MyMaterialApp.

Duplicate Group dialog for List7

Trở lại tab MyMaterialApp, hãy chắc chắn rằng bạn đặt layer List7 ngay bên dưới layer App bar. Một khi bạn làm như vậy, bạn sẽ thấy rằng các tham chiếu và nội dung của danh sách được sắp xếp một cách chính xác.

List7 layer group positioned below the app bar

Luôn luôn là một ý tưởng tốt khi đặt cho nhóm layer của bạn một cái tên có ý nghĩa. Vì vậy, hãy đổi tên nhóm layer danh sách thành "Foods list".

4. Sửa đổi danh sách

Bây giờ cho phép chúng tôi thay đổi danh sách để nó sẽ hiển thị đồ ăn cùng với kích thước từng phần. Đó là một việc đơng giản. Chọn layer chữ phù hợp và sử dụng công cụ Horizontal Type Tool (T) để thay đổi nội dung của chúng. Tôi đề nghị bạn dùng phông chữ "Bold".

List items displaying foods and portion sizes

Một ứng dụng đếm lượng calo sẽ không hữu ích nếu nó không hiển thị số calo. Tuy nhiên, danh sách của chúng ta, hiện tại đã không còn chỗ cho việc thêm văn bản. Do đó, xóa các layer được gọi là "square" từ các nhóm layer có tên là list_01, list_02, và list_03.

List items with the squares removed

Bạn có thể sử dụng công cụ Horizontal Type Tool (T) để thêm mới các layer chữ hiển thị số calo. Thay đổi cỡ chữ của các lớp thành 24px, tên phông chữ của chúng thành Roboto Regular và màu của chúng thành #333333.

Calories added to each list item

5. Thêm các biểu tượng Material Design

Chúng ta có thể làm cho giao diện người dùng của chúng ta hấp dẫn hơn nhiều bằng cách thêm các biểu tượng Material Design cho nó. Bây giờ, hãy tải về ba biểu tượng khác nhau cho ba phần tử trong danh sách của giao diện người dùng của chúng ta.

Vào trang Material Icons và trước tiên chọn biểu tượng được đặt tên local pizza. Trong bảng bật lên ở dưới, thay đổi kích thước của nó thành 36dp và bấm vào nút PNGS để tải về một tập tin ZIP có chứa các biểu tượng.

Material Icons page

Giải nén tập tin ZIP và đi đến thư mục android/drawable-mdpi để tìm tập tin hình ảnh thật. Kéo và thả nó vào trong tab MyMaterialApp của cửa sổ Adobe Photoshop.

Lặp lại các bước tương tự cho các biểu tượng có nhãn local cafelocal dining.

Bây giờ chúng ta có thể thay thế các vòng tròn trong danh sách bằng các biểu tượng. Hãy bắt đầu với biểu tượng local pizza. Chọn layer của nó và layer được gọi là circle, một trong đó là bên trong nhóm layer list_01. Vào Layer > Align > Vertical Centers để canh giữa chúng theo hướng dọc. Tương tự, vào Layer > Align > Horizontal Centers để canh giữa chúng theo hướng ngang.

Aligning the icons with the circles

Tại thời điểm này, bạn có thể xoá layer "circle" ở trong list_01.

Lặp lại các bước tương tự cho hai biểu tượng khác.

All icons in their final positions

6. Thêm màu sắc

Hãy thêm một số màu sắc ngay bây giờ, bởi giao diện người dùng Material Design có xu hướng sáng sủa và đầy màu sắc.

Chọn layer có tên là "ic_local_pizza_black_36dp", nhấp chuột phải vào nó và chọn Blending Options.... Trong hộp thoại bật lên, hãy đi tới phần Color Overlay và chọn màu #ffc107, được gọi là Amber 500 trong bảng màu Material Design.

Color overlay for the pizza icon

Lặp lại các bước tương tự cho các layer có tên là "ic_local_cafe_black_36dp" và "ic_local_dining_black_36dp". Hãy chắc chắn rằng mỗi lần bạn chọn một màu sắc khác nhau.

All icons colored

Bây giờ hãy thêm màu sắc cho các thành phần toàn cục. Để thay đổi màu nền, chọn lớp có tên là "Background", bấm A để chọn hình chữ nhật bên trong nó, và thay đổi màu Fill thành trắng.

The Fill field set to white

Để thay đổi màu sắc của thanh trạng thái, mở nhóm layer "Status bar", chọn lớp có tên là "bar", nhấn A, và thay đổi màu Fill thành Red 900, có giá trị hex là #b71c1c.

Tương tự như vậy, để thay đổi màu sắc của thanh ứng dụng, mở nhóm layer "App bar", chọn lớp đặt tên là "key shadow", nhấn A và thiết lập Fill thành Red 500, hoặc #f44336.

The colored global elements

7. Thêm một nút hành động

Nút hành động là một trong những widget nổi bật nhất trong một giao diện người dùng Material Design. Bạn có thể có được nó bằng cách nhân đôi nhóm layer "Floating action button" của Sticker Sheet. Nếu bạn gặp khó khăn khi tìm nó, thì hãy tìm nó trong nhóm layer "METRICS AND KEYLINES".

Trong tài liệu của bạn, đặt nhóm layer "Floating action button" bên trên nhóm layer "Foods list".

Tiếp theo, sử dụng công cụ Move Tool (V) và đặt Floating Action Button ở góc dưới bên phải của giao diện người dùng.

The floating action button placed at the bottom right corner

Floating Action Button phải có một màu nổi bật. Vì vậy, chọn layer "key shadow" bên trong nhóm layer của nó, bấm A để chọn các vòng tròn bên trong nó, và thay đổi màu sắc Fill thành Red Accent 700, hoặc #d50000.

Tương tự như vậy, thay đổi màu sắc của lớp "ic_add", trong đó có chứa dấu cộng, thành màu trắng. Hơn nữa, mở Blending Options... của nó và thay đổi giá trị của Opacity thành 100%.

The colored floating action button

8. Cắt tỉa tài liệu

Bạn có thể thấy rằng tài liệu của chúng ta là rất lớn, và thiết kế chỉ chiếm một khu vực nhỏ bên trong nó. Để thay đổi kích thước của tài liệu như vậy để nó phù hợp với kích thước của thiết kế, hãy đi đến Image > Trim. Trong hộp thoại bật lên, giữ nguyên giá trị mặc định và nhấn OK.

The Trim dialog

9. Thêm một bảng biểu đồ

Như tôi đã đề cập trước đó, khu vực của thanh ứng dụng trong giao diện người dùng của chúng ta sẽ có một biểu đồ. Bởi vì Sticker Sheet không có bất kỳ Sticker nào cho biểu đồ, nên chúng ta sẽ phải tự tạo ra nó.

Bắt đầu bằng cách bật Grid. Để làm như vậy, hãy vào View > Show > Grid.

Nhấn Shift+Ctrl+N để tạo một layer mới bên trong nhóm layer App bar, và sử dụng công cụ Pencil Tool (B) để vẽ bốn đường ngang, có màu trắng và dày 1 px, bên dưới tiêu đề của ứng dụng.

The four lines drawn using the Pencil tool

Sử dụng công cụ Horizontal Type Tool (T) để thêm ba thời điểm bên dưới dòng ngang cuối cùng. Cỡ chữ của các thời điểm này có thể là 13px.

3 dates added below the last line

Bây giờ bạn có thể tắt tính năng Grid bằng cách vào View > Show > Grid.

Chọn tất cả các layer mà bạn đã tạo ra ở bước này và nhấn Ctrl+G để tạo ra một nhóm layer mới cho chúng. Đặt tên cho nhóm layer này là "Chart".

Tiếp theo, bên trong nhóm layer "Chart", tạo một layer mới và gọi nó là "Data". Bên trong layer, vẽ một path đóng bằng cách sử dụng công cụ Pen Tool (P). Hình dạng của path không quá quan trọng, do đó, miễn là nó trông giống như một đường cong mềm mại.

The path drawn using the Pen tool

Để Fill vào path bằng màu Foreground, vào bảng Paths, nhấp chuột phải vào Work Path và chọn Fill Path.... Trong hộp thoại bật lên, chọn các giá trị mặc định và nhấn OK.

The Fill Path dialog

Để làm cho biểu đồ bớt nặng nề, giảm Opacity của nhóm layer "Chart" thành 75%.

Cuối cùng, sử dụng công cụ Horizontal Type Tool (T) để hiển thị tổng số calo tiêu hào bên dưới biểu đồ. Định kích thước phông chữ của số là 24px, và nhãn là 14px.

Thiết kế của chúng ta bây giờ đã hoàn tất. Bây giờ hãy ẩn nhóm layer "Guides" bởi vì chúng ta sẽ không cần đến nó nữa.

The completed design

10. Tạo ảnh minh hoạ trên thiết bị

Đặt thiết kế của bạn trong một khung của thiết bị thực tế và thêm một ánh sáng chói màn hình vào nó nhằm làm cho nó trông bóng bẩy và thực tế hơn. Mặc dù bạn có thể sử dụng Adobe Photoshop để làm như vậy, nhưng dễ dàng hơn nhiều khi sử dụng Device Art Generator của Google.

Đầu tiên, xuất thiết kế của bạn như là một tập tin PNG bằng cách đi tới File > Save As...

Bây giờ, bạn có thể kéo tập tin PNG vào bất kỳ thiết bị mà bạn thấy trong Device Art Generator. Lưu ý rằng bạn sẽ phải thay đổi kích cỡ hình ảnh của bạn lên đến ít nhất 1080 x 1920px để sử dụng khung hình của các thiết bị mới nhất.

Một khi hình minh hoạ trên thiết bị đã được tạo ra, bạn có thể kéo nó vào bất kỳ thư mục trên máy tính của bạn để lưu nó.

Kết luận

Trong hướng dẫn này, bạn đã học được cách sử dụng Sticker Sheet cho Material Design và Adobe Photoshop để thiết kế giao diện người dùng của một ứng dụng Android. Hãy mạnh dạn thêm nhiều widget khác vào nó, thay đổi màu sắc của nó, và thử nghiệm với các layout của nó.

Tôi cũng muốn nhắc bạn rằng tài liệu Material Design chỉ đơn thuần là một tập hợp các hướng dẫn được khuyến nghị. Bạn không cần phải tuân thủ hoàn toàn nó, vì thế miễn là bạn chắc chắn rằng kết quả cuối cùng là thống nhất và trực quan.

Để tìm hiểu thêm về thiết kế ứng dụng cho Android, và để tìm kiếm thêm các nguồn thiết kế, bạn có thể truy cập vào Google Design.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.