01/09
Cách bắt đầu với UXPin
Khi chúng tôi chuyển sang lĩnh vực thiết kế di động, thiết kế ứng dụng và thiết kế đáp ứng, sự tập trung ngày càng tăng trên UX (Trải nghiệm người dùng) và wireframing , tạo mẫu tương tác và mô hình hóa. Có rất nhiều công cụ hiện có nhằm vào niche này và họ chạy các gam màu đầy đủ từ phức tạp, tính năng khổng lồ khổng lồ đến thưa thớt và hầu như không hữu ích. Một trong những công cụ bắt mắt của tôi là UXPin đơn giản bởi vì nó được phát triển bởi các nhà thiết kế cho các nhà thiết kế.
Trước khi chúng tôi di chuyển về phía trước ... một báo trước. Nếu bạn là một tổ chức thích sở hữu phần mềm thì UXPin không dành cho bạn. Tất cả công việc được thực hiện trong ứng dụng này được thực hiện trong trình duyệt và các dự án bạn lưu được lưu vào tài khoản của bạn.
Để bắt đầu với UXPin, bạn khởi chạy trình duyệt và đi tới UXPin. Từ đây, bạn có thể đăng ký dùng thử miễn phí hoặc sắp xếp gói hàng tháng dựa trên nhu cầu dự kiến của bạn. Quá trình đăng ký khá dễ dàng và khi bạn đã đặt Tên người dùng và Mật khẩu, bạn đã sẵn sàng để bắt đầu.
02/09
Làm thế nào để bắt đầu một dự án trong UXPin
Khi bạn đăng nhập, bạn đến Trang tổng quan và từ đây bạn có thể quyết định tạo một wireframe mới, dự án di động mới hoặc dự án Thiết kế web đáp ứng. Ngoài ra còn có các trình cắm thêm cho UXPin cho phép bạn mang theo các dự án Photoshop hoặc Sketch của mình. Đối với điều này Làm thế nào để tôi sẽ tạo ra một biểu ngữ với một số văn bản và thêm một nút email vào banner. Để thực hiện điều này, tôi đã chọn Tạo một wireframe mới.
03/09
Cách sử dụng Giao diện UXPin
Bề mặt thiết kế được chia thành bốn khu vực. Trong khu vực màu đen ở bên trái là một loạt các công cụ cho phép bạn quay lại trang tổng quan, mở Phần tử bạn sẽ sử dụng, mở bảng Yếu tố thông minh, tìm kiếm phần tử, thêm ghi chú vào trang và thêm thành viên nhóm. Ở dưới cùng là một nút mở ra một hướng dẫn ngắn, một nút khác cho phép bạn truy cập tài khoản của mình và một tài khoản khác truy cập Câu hỏi thường gặp, hãy đặt câu hỏi và thậm chí cung cấp phản hồi.
Trong khu vực màu xanh dọc theo đầu trang là một loạt các công cụ và tài sản. Các nút tối hơn ở bên phải cho phép bạn lặp lại thiết kế của mình, điều chỉnh cài đặt dự án, chia sẻ trang và thực hiện mô phỏng trong trình duyệt của trang.
Bảng Elements là nơi bạn lấy các bit và phần cho Design Surface, đặt tên cho dự án của bạn và thêm hoặc xóa các trang.
Thư viện Elements là một bất ngờ thú vị cho các nhà thiết kế UX. Cửa sổ pop down này cho phép bạn chọn từ 30 thư viện khác nhau, từ iOS đến Android Lolipop. Bạn cũng có thể truy cập vào các yếu tố Bootstrap và Foundation cùng với các biểu tượng Font Awesome, biểu tượng cử chỉ dành cho điện thoại di động và bộ sưu tập các Widget xã hội.
04/09
Cách thêm phần tử vào trang UXPin
Để bắt đầu, tôi kéo phần tử Box vào bề mặt thiết kế và khi tôi nhả chuột, bảng Properties sẽ mở ra. Nút Properties cho phép bạn đặt tên cho phần tử và thiết lập chiều cao chiều rộng và giá trị vị trí của phần tử. Bạn cũng có thể thêm phần đệm vào phần tử, làm tròn các góc và điều chỉnh độ mờ của nó. Nhấp vào nút Màu nền sẽ mở bộ chọn màu RGBA.
Bạn cũng có thể gán phông chữ, đường viền và mẫu cho phần tử đã chọn. Lightning Bolt cung cấp cho bạn khả năng thêm tương tác vào một phần tử đã chọn.
05/09
Cách thêm và định dạng văn bản trong UXPin
Để thêm văn bản, hãy kéo phần tử văn bản vào bề mặt thiết kế và nhập văn bản của bạn. Nhấp vào nút Thuộc tính văn bản để mở thuộc tính Phông chữ và định dạng văn bản của bạn. Nếu bạn cần một khối văn bản giả, hãy thêm một phần tử văn bản và nhấp vào nút GENERATE LOREM IPSUM trong thuộc tính Phông chữ.
06/09
Cách thêm hình ảnh vào trang UXPin
Có một vài cách để thực hiện tác vụ này. Bạn có thể sử dụng Công cụ hình ảnh trong thanh công cụ, thêm phần tử Hình ảnh từ Thư viện hoặc chỉ cần kéo và thả hình ảnh từ màn hình của bạn lên phần tử trên bề mặt thiết kế như được hiển thị ở trên.
07/09
Cách thêm nút vào trang UXPin
Mặc dù có một yếu tố Button, nhập " Button " vào khu vực tìm kiếm , như được hiển thị ở trên, mở ra tất cả các nút được tìm thấy trong tất cả các thư viện. Kéo cái mà làm việc cho bạn lên bề mặt thiết kế và sử dụng các thuộc tính để thay đổi màu sắc, phông chữ và thậm chí là bán kính viền. Để thay đổi văn bản bên trong nút, hãy nhấp một lần vào văn bản và nhập văn bản mới.
08/09
Cách thêm tương tác vào trang UXPin
Điều này không phức tạp vì nó có thể xuất hiện lần đầu tiên. Đối với đầu vào email, tôi đã thêm phần tử đầu vào, định lại kích thước, nhập văn bản và định dạng văn bản. Với phần tử Input được chọn, nhấp vào nút Properties và khi thuộc tính Element xuất hiện, hãy nhấp vào nút Visibility- nhãn cầu - ở góc trên bên phải của bảng điều khiển.
Chọn nút và nhấp vào nút Tương tác - Lightning Bolt- trong thuộc tính. Khi bảng Tương tác mở ra, hãy chọn Tương tác mới. Chọn Nhấp từ cửa sổ bật xuống Trình kích hoạt. Trong vùng Hành động, hãy chọn Hiển thị phần tử. Bây giờ bạn sẽ được hỏi phần tử nào để hiển thị. Nhấp một lần vào gunsite và nhấp vào phần tử Input. Với phần tử đã được xác định, bây giờ bạn có thể xác định có hay không tạo hiệu ứng cho phần tử đó. Trong trường hợp này, tôi đã quyết định hiển thị hộp nhập liệu một cách dễ dàng và đã đi với giá trị thời lượng mặc định là 300 mili giây.
Tôi cũng muốn có nút di chuyển khoảng 65 pixel ở bên phải khi được nhấp. Tôi đã chọn nút, mở bảng Tương tác và chọn Tương tác mới . Tôi đã sử dụng các cài đặt này:
- Trình kích hoạt : Nhấp
- Hành động: Di chuyển theo
- Hướng di chuyển : 65 px trên trục x
- Hoạt ảnh : Tuyến tính
- Thời lượng: 300 mili giây
Để xóa tương tác, hãy chọn phần tử và mở bảng Tương tác. Chọn tương tác trong bảng điều khiển và nhấp vào Thùng rác để xóa nó.
09/09
Cách kiểm tra trang của bạn trong UXPin
Do thực tế bạn đang làm việc trong trình duyệt, kiểm tra đã chết đơn giản. Nhấp vào nút Simulate Design . Trang sẽ mở trong trình duyệt và bạn có thể kiểm tra cách. Cũng sẽ có một bảng điều khiển được thêm vào phía bên trái của trang cho phép Nhận xét, Sơ đồ trang web nếu có nhiều trang, Kiểm tra khả năng sử dụng, Chia sẻ trực tiếp, Chỉnh sửa và quay lại Trang tổng quan.
Ở cuối trang là một bảng điều khiển nhỏ cho phép bạn hiển thị các phần tử Tương tác, hiển thị hoặc ẩn các nhận xét và chia sẻ liên kết dự án với những người khác.