Trải nghiệm, mẹo và kỹ thuật thiết kế trải nghiệm Adobe

01 trên 07

Trải nghiệm, mẹo và kỹ thuật thiết kế trải nghiệm Adobe

Adobe Experience Design cung cấp cho bạn một số tính năng đồ họa cho phép sự sáng tạo tuyệt vời.

Khi Adobe giới thiệu thiết kế Experience như một bản xem trước công khai , công ty đã hoàn thành hai kỳ công khá tuyệt vời cùng một lúc. Đầu tiên, họ đưa ra một không gian trong thị trường phần mềm tạo mẫu mới nổi. Thứ hai, họ tạo cơ hội cho người dùng chơi với "công việc đang tiến bộ" và cho phép người dùng ảnh hưởng đến tiến trình đó. Bây giờ ứng dụng đã có sẵn trong một vài tháng, tôi nghĩ đây sẽ là thời điểm tốt để chia sẻ một số thủ thuật, mẹo và kỹ thuật trong Thiết kế trải nghiệm.

Nhưng trước tiên, bạn có thể tự hỏi ý nghĩa của phần mềm Prototyping là gì. Trong số những người chơi chính trong không gian này là Proto.io, Nguyên tắc, UXPin, Atomic.io , Thiết kế trải nghiệm và InVision. Không giống như các ứng dụng như Sketch 3, Photoshop và Illustrator, nơi các thiết kế tĩnh được tạo ra, các trình soạn thảo đồ họa này giới thiệu tính tương tác, chuyển động và các tính năng khác phổ biến trong không gian thiết kế di động và web ngày nay.

Với sự gia tăng của điện thoại di động và không thể tránh khỏi, tập trung vào laser trên người dùng, nó không còn đủ cho một nhà thiết kế để roi lên một vài phác thảo, kéo cùng một vài comps và sau đó phát hành dự án hoặc tải nó lên một máy chủ web. Dòng công việc UI / UX đã thay đổi về cơ bản mọi thứ. Mỗi bước của quy trình, từ việc xác định người dùng, bản phác thảo, wireframes, mockups và prototyping giờ đây phải chịu thử nghiệm người dùng mở rộng.

Đó là giai đoạn cuối - tạo mẫu - nơi các điểm đau được phát hiện và cố định trước khi dự án chuyển sang sản xuất cuối cùng. Đây là nơi tương tác, chuyển động, chuyển tiếp màn hình và sắp xếp mọi thứ trên màn hình rất quan trọng. Các vấn đề và vấn đề không thể được hiển thị đơn giản như một hình ảnh tĩnh hoặc được giải thích bằng lời nói. Sau khi tất cả, các sản phẩm này là dành cho con người thực sự. Thay vì chuyển tất cả điều đó sang mã, quá trình tạo mẫu đang ngày càng được thực hiện bởi phần mềm đồ họa được thiết kế chỉ cho mục đích đó. Nó dễ dàng hơn để sửa lỗi, thay thế một hình ảnh, viết lại một số văn bản, di chuyển một nút và sử dụng trình soạn thảo trực quan hơn là viết lại và gỡ lỗi mã liên tục.

Trong thực tế, phần mềm này đã trở thành một thành phần quan trọng trong môi trường thiết kế và phát triển "Tạo mẫu nhanh" ngày nay.

Với điều đó đã nói, chúng ta hãy vui vẻ với thiết kế Experience.

02 trên 07

Tạo một Ghim đích với một vòng tròn đơn giản trong thiết kế trải nghiệm Adobe

Kinh nghiệm thiết kế của vector khả năng làm cho biểu tượng và giao diện yếu tố tạo ra một cách dễ dàng.

Một khía cạnh gọn gàng của XD là việc sử dụng các công cụ vẽ vector. Không thể tìm thấy biểu tượng? Không vấn đề gì. Cuộn của riêng bạn. Dưới đây là cách thực hiện:

  1. Chọn Công cụ Ellipse và, với phím Option / Alt-Shift được nhấn, vẽ một vòng tròn.
  2. Với vòng tròn được chọn, thiết lập màu Fill thành FF0000 và Border thành "none" trong thuộc tính.
  3. Nhấp đúp vào vòng tròn để hiển thị các điểm neo. Kéo neo dưới cùng xuống dưới.
  4. Nhấp đúp vào Anchor Point đã chọn và các đường cong được thay thế bằng các dòng.
  5. Vẽ một vòng tròn nhỏ khác với tô màu trắng và không bị nghẹt. Di chuyển nó vào vị trí và chọn pin và vòng tròn. Trong bảng Align ở trên cùng của Properties, nhấp vào nút Horizontal Center và Pin được tạo.

03 trên 07

Tạo nền mờ trong thiết kế trải nghiệm Adobe

Tạo hiệu ứng nhòe hậu cảnh trong XD bằng cách không sử dụng gì ngoài hình dạng và hình ảnh /.

Thông thường có văn bản hoặc nội dung khác trên hình nền. Vấn đề ở đây là hình ảnh, thường xuyên hơn không, vượt qua nội dung trên nó. Một cách để giải quyết vấn đề này là làm mờ hình nền. Bạn có thể làm mờ hình ảnh trong Photoshop hoặc phần mềm chỉnh sửa hình ảnh khác, nhưng điều này có phần không hiệu quả, đặc biệt kể từ khi XD có thể xử lý công việc này cho bạn. Dưới đây là cách thực hiện:

  1. Tạo một bản vẽ mới và thêm hình nền của bạn.
  2. Chọn công cụ Rectangle Tool vẽ một hình chữ nhật trên hình ảnh. Với Rectangle được chọn, thiết lập Fill to White và Stroke thành None.
  3. Với Rectangle được chọn, chọn Background Blur trong bảng thuộc tính. Ba thanh trượt là Blur Amount, Brightness và Opacity. Đây là những gì họ làm:

Nếu bạn thực sự muốn "chuyển đổi mọi thứ", hãy thay đổi màu của hình dạng và phát bằng giá trị Độ mờ để thay đổi "giao diện" của hình ảnh.

04/07

Tạo một Scrim trong thiết kế trải nghiệm Adobe

Sử dụng gradient để tương phản provovide khi hình ảnh và màu sắc có được trong cách của các yếu tố giao diện.

Một vấn đề thiết kế chung là các yếu tố giao diện các yếu tố phải là một màu chung nhưng bị mất khi được đặt trên một ảnh nền hoặc màu đồng nhất. Các giải pháp là một scrim. Một scrim là một gradient hơi mờ đục đặt giữa phần tử giao diện và nền. Điều này rất dễ thực hiện trong XD. Dưới đây là cách thực hiện:

  1. Tạo bản vẽ của bạn trong XD, thêm hình ảnh và sao chép và dán các phần tử giao diện từ Bộ công cụ giao diện người dùng phù hợp - Tệp> Mở Bộ công cụ giao diện người dùng ... - vào bảng vẽ. Trong ảnh trên, ảnh làm cho thanh Trạng thái và Thanh ứng dụng khó nhìn thấy.
  2. Chọn công cụ Rectangle Tool và vẽ ra một hình chữ nhật. Trong bảng Properties chọn Fill và chọn Gradient từ pop xuống trong Color Picker. Đặt màu gradient thành Đen và Trắng. Đặt giá trị A - Opacity - 60%giá trị White A thành 0%.
  3. Với Rectangle được chọn, chọn Object> Arrange> Send Backward . Các yếu tố giao diện hiện có thể nhìn thấy trên hình ảnh.

05/07

Tạo một Avatar Hình ảnh trong Thiết kế Trải nghiệm Adobe

Khả năng tạo mặt nạ và chỉnh sửa chúng trong Thiết kế trải nghiệm là một trình tiết kiệm thời gian rất lớn.

Một mẫu thiết kế phổ biến được tìm thấy trong ứng dụng Trò chuyện nơi mọi người nói chuyện với nhau và hình ảnh của người nói sẽ xuất hiện trên màn hình. Những hình đại diện này thường là những hình ảnh bị che khuất. Nó là chết đơn giản thực hiện điều này trong XD. Dưới đây là cách thực hiện:

  1. Bạn bắt đầu với hình ảnh và hình tròn hoặc hình dạng khác trên bảng vẽ. Bạn có thể điền vào vòng tròn với bất kỳ màu nào. Những gì bạn không cần làm là thêm màu đột quỵ. Nó sẽ biến mất khi bạn tạo ra hiệu ứng, vậy tại sao lại bận tâm. Nếu bạn cần phải stoke vòng tròn, sao chép nó vào clipboard.
  2. Di chuyển vòng tròn vào hình ảnh và chọn cả hình ảnh và hình tròn. Với các đối tượng bot được chọn, chọn Object> Mask with Shape . Khi bạn nhả chuột, Avatar sẽ được tạo. Từ đó bạn có thể thay đổi kích thước nó.
  3. Nếu bạn cần thêm đột quỵ, hãy dán vòng tròn đang nằm trên khay nhớ tạm của bạn lên bảng vẽ. Với bản sao được chọn tắt tính năng điền vào các Thuộc tính và thêm màu và độ rộng của nét vẽ. Để xếp hàng chúng, hãy chọn cả hai đối tượng và nhấp vào nút Căn giữa trong tùy chọn Căn chỉnh ở đầu bảng điều khiển thuộc tính.
  4. Nếu bạn muốn di chuyển ảnh xung quanh trong mặt nạ, hãy nhấp đúp vào mặt nạ. Điều này sẽ hiển thị hình ảnh và hình dạng mặt nạ. Nhấp vào hình ảnh và kéo nó vào vị trí. Khi bạn nhả chuột, hình ảnh sẽ ở vị trí mới bên trong mặt nạ.

06 trên 07

Chơi với Adobe Experience Design Artboards

định hướng, Màu tùy chỉnh và Cuộn dọc là các tính năng của bảng vẽ khá gọn gàng.

Artboards Experience Design không chỉ dành cho bạn để đặt nội dung. Họ cũng có thể bị thao túng. Dưới đây là một vài điều bạn có thể làm:

  1. Nếu bạn cần các phiên bản Phong cảnh và Chân dung của một bản vẽ, sao chép bản vẽ và, với bản sao đã chọn, hãy nhấp vào nút ngang trong bảng Thuộc tính. Bản vẽ sẽ thay đổi thành Hướng ngang. Nếu Artboard có nội dung trên đó, nhấp vào tên Artboard và các thuộc tính Artboard sẽ xuất hiện trong Properties Panel.
  2. Để thêm một màu tùy chỉnh vào Artboard và dự án cho vấn đề đó, chọn Artboard và nhấp vào Fill color chip trong phần Appearance của Properties Panel. Nhập giá trị thập lục phân cho màu và nhấp vào dấu +. Màu sẽ được thêm dưới dạng Màu tùy chỉnh. Để áp dụng màu đó ở nơi khác, chọn một đối tượng và nhấp vào chip Màu tùy chỉnh để áp dụng màu.
  3. Artboards có thể được thực hiện theo chiều dọc cuộn. Để thực hiện việc này, hãy chọn bảng vẽ và thay đổi chiều cao của nó trên Bảng Thuộc tính hoặc bằng cách kéo phần cuối của bảng vẽ xuống dưới. Trong vùng Có thể cuộn của bảng thuộc tính, chọn dọc từ trình đơn thả xuống và nhập chiều cao khung nhìn cho màn hình. Đường màu xanh ngắt quãng đó cho bạn thấy phần dưới cùng của khung nhìn. Để kiểm tra, hãy nhấp vào nút Phát và cuộn đi. Để tắt cuộn, hãy chọn Không có trong cửa sổ Cuộn xuống.

07/07

Chỉnh sửa Bộ giao diện người dùng trên thiết bị di động trong thiết kế trải nghiệm Adobe

UI Kits hoàn toàn có thể chỉnh sửa được.

Thiết kế trải nghiệm có chứa Bộ công cụ giao diện người dùng để phát triển giao diện người dùng iOS, Android và Windows. Khi bạn lần đầu tiên mở chúng, bạn có thể nghĩ rằng chúng được thiết lập khá tốt. Không hoàn toàn - mỗi bit và phần trong các bộ này hoàn toàn có thể chỉnh sửa được. Hãy tìm hiểu bằng cách xây dựng một khung dây Android.

  1. Bạn bắt đầu bằng cách chọn công cụ Artboard và chọn Android Mobile trong phần Google của Bảng điều khiển thuộc tính .
  2. Chọn Tệp> Mở Bộ công cụ giao diện người dùng> Tài liệu Google . Thao tác này sẽ mở Bộ giao diện người dùng thiết kế Material Design. Chọn Magnifying Glass và marquee t ông Screen Guides artboard . Tôi thích bắt đầu với điều này bởi vì nó cung cấp cho tôi các hướng dẫn để sắp xếp đúng vị trí trên màn hình của các phần tử giao diện. Nếu bạn bấm vào một trong các thanh màu xanh, bạn sẽ thấy nó bị khóa. Nhấp vào khóa được đính kèm với từng khóa để mở khóa . Marquee artboard và sao chép vùng chọn vào clipboard. Quay lại tài liệu của bạn và dán màn hình vào bản vẽ của bạn.
  3. Nhấp một lần trên thanh Ứng dụng ở phía trên cùng của bảng vẽ. Lưu ý cách bạn có thể chọn nó. Chọn Object> Arrange> Bring to Front. Lựa chọn của bạn hiện nằm phía trên Hướng dẫn trên màn hình. Điều này sẽ cho bạn biết rằng mỗi phần tử trên màn hình có thể được chỉnh sửa.
  4. Nhấp đúp vào thanh trạng thái ở trên cùng và trong bảng Properties Panel và tô màu Fill là 455A64 . Kích đúp vào App Bar và thiết lập nó là 607D8B. Điều này sẽ cho bạn biết mỗi phần tử trong bộ giao diện người dùng có thể được chỉnh sửa để đáp ứng các thông số màu của dự án.
  5. Còn các biểu tượng thì sao? Đây là cách thay đổi màu sắc của chúng. Nhấp đúp vào trái tim để chọn nó. Nếu bạn nhìn vào Properties Panel, bạn có thể giả định rằng bạn không thể chỉnh sửa vùng chọn. Không hẳn. Nhấp đúp vào trái tim một lần nữa . Các thuộc tính mở và bạn thay đổi màu tô thành FF0000. Lặp lại thủ thuật double-double-click này cho các biểu tượng còn lại và văn bản.