Đặc tả Material Design từ Google ban đầu nhắm vào nền tảng Android như một cách để đề xuất tính nhất quán của thiết kế trên nền tảng.
01 trên 06
Cách tạo thẻ thiết kế material design trong thiết kế trải nghiệm Adobe CC
Khi các nhà thiết kế bắt đầu chọc qua nó và hiểu được suy nghĩ đằng sau nó, Material Design đã lặng lẽ trở thành một trong những triết lý thị giác có ảnh hưởng nhất trong thiết kế web và thiết bị di động . Tất cả những gì bạn cần làm để xem chúng tôi đang làm gì để tìm kiếm Material Design trên Pinterest và bạn sẽ thấy hàng trăm ví dụ và thử nghiệm trên thiết bị, máy tính bảng và thậm chí cả trang web.
Khía cạnh hấp dẫn của Material Design là suy nghĩ của Google về cách ứng dụng xuất hiện và hoạt động trên thiết bị di động nhưng các khái niệm đang được áp dụng cho bất kỳ màn hình nào có kích thước trên bất kỳ nền tảng nào. Như Google nêu trong đoạn mở đầu của đặc điểm kỹ thuật, “Chúng tôi đã thử thách chính mình để tạo ra một ngôn ngữ trực quan cho người dùng của chúng tôi tổng hợp các nguyên tắc cổ điển về thiết kế tốt với sự đổi mới và khả năng công nghệ và khoa học. Đây là thiết kế material design. Thông số này là tài liệu sống sẽ được cập nhật khi chúng tôi tiếp tục phát triển các nguyên lý và chi tiết cụ thể của thiết kế material design ”.
Các tài liệu nói về, trong điều kiện rất chung chung, là giấy và một dấu hiệu của thiết kế Vật liệu là thẻ. Hãy suy nghĩ về một thẻ chỉ mục trên bề mặt và bạn đang đi đúng hướng. Thẻ là phần tử chứa ảnh, video, liên kết văn bản, v.v. nhưng chúng khác với hầu hết các thiết kế tương tác là chúng có nghĩa là tập trung vào một chủ đề duy nhất. Thẻ có góc tròn, chứa các bóng mờ nhạt cho biết chúng ở trên bề mặt và nếu chúng nằm trên cùng một mặt phẳng, chúng được gọi là "bộ sưu tập".
Trong phần “Cách thực hiện” này, chúng ta sẽ tạo một thẻ dựa trên thông số kỹ thuật. Thay vì tạo thẻ với nhiều công cụ tạo hình và vẽ khác nhau, chúng tôi sẽ đi theo hướng đó từ một hướng khác. Chúng tôi sẽ sử dụng các công cụ trong Thiết kế Trải nghiệm của Adobe hiện đang trong bản xem trước công khai dành cho Macintosh và miễn phí. Bạn có thể tải xuống tại đây.
Băt đâu nao.
02/06
Tạo Artboard Prototype trong thiết kế trải nghiệm Adobe CC
Không có cách nào rõ ràng để tạo ra một màn hình Android từ màn hình bắt đầu trong kinh nghiệm thiết kế CC (XD). Những gì chúng ta đã làm khi chúng ta mở XD, là chọn tùy chọn iPhone 6 và khi giao diện mở ra, chúng ta chọn công cụ Artboard ở dưới cùng của Thanh công cụ và chọn Android Mobile từ các lựa chọn trên bảng Properties ở bên phải. Sau đó, chúng tôi chuyển sang công cụ chọn, nhấp một lần vào tên của bảng vẽ trên iPhone và xóa bảng vẽ. Không còn nữa.
Trong phiên bản hiện tại của XD, có một mũi tên nhỏ bên cạnh iPhone 6, khi được nhấp, sẽ mở ra một trình đơn thả xuống. Từ đó, bạn chọn phiên bản Android Mobile và bảng điều khiển Android Mobile được chọn sẽ mở ra trong giao diện.
Để đảm bảo chúng tôi có không gian màn hình thích hợp mở cho thẻ, chúng tôi thường chuyển sang Sketch 3 và sao chép và dán thanh trạng thái, thanh điều hướng và thanh ứng dụng từ Mẫu thiết kế material design vào bản vẽ. Sketch 3.2 chứa một mẫu Material Design ( File> New From Template> Material Design ) và một cái khác thực sự tốt là từ Kyle Ledbetter mà bạn có thể lấy ở đây. Nếu bạn không có Sketch, bạn có thể sao chép và dán chúng từ các hình dán XD được tìm thấy trong Tệp> Mở Bộ công cụ giao diện người dùng> Tài liệu Google . Bạn cũng có thể tải chúng xuống từ Google để sử dụng trong Photoshop, Illustrator, After Effects và Sketch.
03/06
Thêm một thẻ thiết kế Material Design vào một bản Adobe CC CC Artboard
Một trong những tính năng hữu ích nhất của XD là bao gồm UI Kits cho Apple iOS, Google Material và Microsoft Windows. Trong nhiều khía cạnh, họ thêm từ “Rapid” vào từ “Rapid Prototyping”, cũng như làm cho công việc của nhà thiết kế dễ dàng hơn trong các thành phần UI thông thường không cần phải được tái tạo liên tục trong một ứng dụng thiết kế như Photoshop, Illustrator hoặc Phác thảo.
Phần tử giao diện người dùng chúng tôi cần là thẻ. Để truy cập vào nó, chúng tôi đã chọn Tệp> Mở Bộ công cụ giao diện người dùng> Tài liệu Google và bộ công cụ mở dưới dạng tài liệu mới. Phần tử chúng tôi cần được tìm thấy trong danh mục Thẻ.
Những gì chúng tôi yêu thích là chúng tuân thủ các đặc điểm kỹ thuật thiết kế như được trình bày trong thông số kỹ thuật của khối nội dung cũng như định dạng văn bản và thông số khoảng cách được trình bày trong thông số Typography.
Kiểu thẻ mà chúng tôi muốn là cái ở phía dưới bên trái. Chúng tôi chỉ đơn giản là marquee nó với con chuột của chúng tôi và sao chép nó vào clipboard. Thật không may, XD không chứa một giao diện tab cho các tài liệu mở. Những gì chúng tôi làm là di chuyển cửa sổ tài liệu đang mở xuống một chút để hiển thị cửa sổ chúng tôi đang làm việc, chọn nó và dán. Một cách khác để chuyển đổi nhanh chóng giữa các tài liệu XD mở là nhấn Command- ' .
04/06
Cách chỉnh sửa phần tử thiết kế material design trong thiết kế trải nghiệm Adobe CC
Khi thẻ trong XD đến từ clipboard không vui vẻ bắt đầu làm việc với nó. Điều đầu tiên bạn cần làm là để Ungroup thẻ vì bạn cần truy cập vào các bit và miếng soạn thẻ. Để làm điều này, chọn thẻ và chọn Object> Ungroup hoặc nhấn Shift-Command-G.
Thẻ của bạn hiện bao gồm ba phần:
- Hộp màu xám nhạt cho hình ảnh.
- Hộp màu xám trung bình cho văn bản
- Hộp sau được sử dụng làm nền.
Bước đầu tiên là xóa hộp màu xám nhạt. Mục đích duy nhất của nó là hoạt động như một trình giữ chỗ cho hình ảnh mà làm cho nó, nếu bạn chọn, tùy chọn.
Hộp có văn bản thực sự là màu xám đậm với độ mờ là 50%. Hộp này có thể được sử dụng làm nền văn bản và bạn có thể thay đổi màu và độ mờ của hộp.
Mặc dù nó không phải là hiển nhiên ngay lập tức, hộp màu xám nhạt tuân theo thông số Material Design ở các góc trên cùng của nó được làm tròn 2 pixel. Hãy ghi nhớ điều này nếu bạn đang thêm hình ảnh. Nó cũng sẽ cần các góc tròn có thể được thêm vào một ứng dụng hình ảnh hoặc trong XD.
Thấy như thế nào là trạng thái nghỉ ngơi của thẻ nó cũng cần một cái bóng. Thông số kỹ thuật làm cho nó rõ ràng có một độ cao nghỉ ngơi của thẻ 2 pixel. Để thêm mục này, chọn hình nền màu đen và đặt giá trị Y và B (Blur) thành 2 trong bảng thuộc tính.
05/06
Cách thêm hình ảnh vào thẻ thiết kế material design trong Adobe XD CC
Biết thẻ rộng 344 pixel và diện tích hình ảnh cao 150 pixel ( nửa chiều cao của ô màu xám nhạt ) Chúng tôi đã mở hình ảnh trong Photoshop, cắt nó thành kích thước và lưu nó bằng cách sử dụng tùy chọn @ 2x trong hộp thoại Xuất dưới dạng Photoshop cái hộp. Hình ảnh đã được nhập vào Adobe XD.
Sau đó, chúng tôi kéo hộp màu xám nhạt lên hình ảnh trên bảng và chọn Object> Mask With Shape . Kết quả là hình ảnh chọn lên các góc tròn của hình dạng. Sau đó chúng tôi chuyển hình ảnh đến vị trí cuối cùng của nó.
Với hình ảnh tại chỗ, chúng tôi đã thay đổi màu nền của hộp Medium gray, thay đổi văn bản và màu của văn bản liên kết.
06 trên 06
Sử dụng tính năng Adobe XD CC Grid
Với thẻ hoàn thành, nó cần được đặt đúng theo thông số kỹ thuật của Material Design. Điều này có nghĩa là có 8 pixel ở hai bên của thẻ và thẻ cần phải ở dưới 8 pixel bên dưới thanh ứng dụng. Để thực hiện việc này, nhấp một lần vào tên bảng vẽ và trong Bảng điều khiển thuộc tính, chọn Lưới. Lưới xuất hiện trên bảng vẽ.
Kích thước lưới mặc định là 8 pixel có cùng kích thước lưới cho Material Design.Nếu bạn cần kích thước khác, hãy thay đổi giá trị trong vùng Lưới. Nếu bạn muốn thay đổi màu của lưới, hãy nhấp vào chip màu và chọn một màu từ Bộ chọn màu kết quả.
Với lưới có thể nhìn thấy, nhấp vào thẻ và di chuyển nó vào vị trí cuối cùng của nó.
Để kết thúc, chúng tôi đã chọn thẻ, nhấp vào nút Lặp lại lưới và thay đổi khoảng cách giữa các thẻ thành 8 pixel.