I. Lợi ích, công dụng
- Các công cụ thiết kế khác Adobe XD, Sketch, Figma, InVision, MS Paint, chỉ cho phép bạn tạo các tương tác giả bằng cách liên kết bất cứ thứ gì bạn vẽ. Những gì họ thiếu là các trạng thái tương tác Interactive States, Logic và các Code components của UXPin.
-
Yếu tố trạng thái tương tác (Interactive Stateful Elements)
-
Hãy dành cho mình sự hỗn loạn và dư thừa. Điền vào thiết kế của bạn với các yếu tố tương tác mà không cần phải sao chép bản vẽ
-
Code components
-
Thiết kế từ một nguồn của sự thật. Nguyên mẫu với các yếu tố chức năng và tương tác được tạo ra từ mã sản xuất.
-
Tương tác có điều kiện (Conditional Interactions), biến (Variables), biểu thức (Expressions)
-
Đến gần hơn với các ứng dụng thực, được mã hóa - thêm một lớp logic vào các nguyên mẫu của bạn, lưu trữ và thao tác với đầu vào của người dùng.
II. Tính năng
1. Tất cả bắt đầu với một ý tưởng ...
-
Ý tưởng cần một nơi để đi vào cuộc sống. Tạo mọi thứ từ các bản phác thảo (tiếng Anh gọi là Wireframe) được lên kế hoạch tốt đến các giao diện hấp dẫn trong UXPin.
-
Tích hợp thư viện (Built-in libraries)
-
Dễ dàng truy cập các thư viện cho iOS, thiết kế vật liệu - Material Design và Bootstrap, cũng như hàng trăm biểu tượng (icon) để cho phép bạn làm việc nhanh hơn.
-
Yếu tố hình thức tương tác (Interactive form elements)
-
Sử dụng các trường văn bản (text field), hộp kiểm (checkbox) và nút xoay (radio button) có thể tương tác đầy đủ thay vì chỉ vẽ mô phỏng tĩnh của chúng.
-
Công cụ vẽ vector (Vector drawing tools)
-
Vẽ và kết hợp các hình dạng vector để tạo biểu tượng hoặc hình minh họa đẹp. Điểm và đường cong trơn tru.
-
Các thành phần (Components)
-
Xây dựng mọi thứ nhanh chóng, nhất quán và tiết kiệm cho các công việc lặp đi lặp lại. Cập nhật tất cả các thành phần cùng một lúc hoặc chỉnh sửa từng trường hợp riêng biệt.
-
Mã thành phần (Code components)
-
Tự động đồng bộ hóa các thành phần React.js components với UXPin từ kho lưu trữ của bạn. Không cần phải vẽ lại mô hình của bạn một lần nữa.
-
Nhập dữ liệu HTML (HTML import)
-
Khởi động nguyên mẫu Prototype của bạn bằng cách nhập một trang web hiện có hoặc bất kỳ phần nào của nó vào UXPin.
-
Dữ liệu (Data)
-
Làm cho thiết kế của bạn có ý nghĩa. Sử dụng dữ liệu của riêng bạn ở các định dạng khác nhau hoặc nội dung sẵn sàng sử dụng, chẳng hạn như hình đại diện (avatars), thành phố (city) và tên (name).
-
Tính năng truy cập (Accessibility features)
-
Giữ thiết kế của bạn phù hợp với tiêu chuẩn tương phản WCAG Contrast Standard. Xem các thiết kế trong điều kiện như những người có một trong tám loại mù màu khác nhau.
-
Hợp tác thời gian thực
-
Làm việc với nhóm của bạn trong thời gian thực giống như bạn làm trong Google Docs. Trên Windows, Mac hoặc trong trình duyệt.
2. Nguyên mẫu Prototype như thật.
-
UXPin không phải là công cụ tạo mẫu bình thường của bạn chỉ để liên kết màn hình tĩnh hoặc bản vẽ nghệ thuật với các hiệu ứng chuyển tiếp. Nó cung cấp cho bạn mọi thứ cần thiết để thiết kế các nguyên mẫu Prototype hoạt động giống như chúng là sản phẩm hoàn chỉnh.
-
Các trạng thái (States)
-
Thiết kế các phiên bản khác nhau của bất kỳ yếu tố (element) nào và hoạt ảnh giữa chúng. Cập nhật thuộc tính giữa các trạng thái chỉ với một cú nhấp chuột.
-
Biến (Variables)
-
Tự động cập nhật các yếu tố văn bản (text element), thu thập dữ liệu từ đầu vào hoặc lưu trữ tùy chọn người dùng để sử dụng sau này trên nguyên mẫu Prototype của bạn.
-
Tương tác có điều kiện (Conditional interactions)
-
Thêm một lớp logic vào nguyên mẫu Prototype của bạn. Đặt quy tắc làm cho sự tương tác xảy ra chỉ khi những quy tắc đó được đáp ứng.
-
Biểu thức (Expressions)
-
Sử dụng JavaScript để tạo các thành phần tính toán, như giỏ hàng (shopping cart) hoặc để xác thực đầu vào của người dùng, chẳng hạn như email.
-
Chuyển trang (Page transitions)
-
Liên kết các trang và tạo hiệu ứng chuyển tiếp thú vị giữa chúng một cách nhanh chóng. Tích hợp sẵn hơn mười tùy chọn hiệu ứng chuyển tiếp trang.
-
UXPin Mirror (UXPin Mirror)
-
Xem trước các nguyên mẫu Prototype của bạn trên thiết bị di động nhanh chóng và dễ dàng. Có sẵn trên iOS và Android. Không cần USB / Wi-Fi. Chỉ cần quét mã QR.
-
Nhập thiết kế từ Sketch (Sketch import)
-
Bạn sử dụng Sketch? Nhập tệp Sketch của bạn vào UXPin để bạn có thể chọn đúng nơi bạn rời đi.
3. Hợp tác dễ dàng hơn khi làm việc với UXPin.
-
Chia sẻ ngay lập tức bất cứ điều gì bạn tạo trong UXPin. Thu thập phản hồi từ nhóm của bạn, chia sẻ thông số kỹ thuật với nhà phát triển, nhận được sự chấp thuận từ các bên liên quan - tất cả ở một nơi.
-
Chia sẻ (Share)
-
Mỗi nguyên mẫu Prototype có liên kết có thể chia sẻ riêng của nó và luôn luôn cập nhật. Bạn thậm chí có thể mật khẩu bảo vệ nó.
-
Bình luận (comments)
-
Thu thập phản hồi từ nhóm của bạn để sửa lại nhanh chóng, đồng bộ hóa và đảm bảo tính minh bạch trong toàn bộ quá trình.
-
Giao nhiệm vụ (Task assignments)
-
Làm nổi bật ý thức trách nhiệm và tinh thần đồng đội bằng cách phân công các thành viên trong nhóm nhận xét và theo kịp các thay đổi.
-
Yêu cầu phê duyệt (Approval requests)
-
Mời các bên liên quan đến các nguyên mẫu Protoype của bạn và nhận được sự chấp thuận chính thức của họ mà không cần phải đăng ký.
-
Thông số kỹ thuật, tài sản và mã (Specs, assets and code)
-
Giúp nhà phát triển dễ dàng kiểm tra thông số kỹ thuật trực quan của các thành phần của bạn, chẳng hạn như đo khoảng cách, kích thước và kiểu dáng.
-
Tài liệu miễn phí (Freeflow documentation)
-
Thiết lập các hướng dẫn chi tiết hoặc đơn giản là để lại ghi chú. Sau đó, ghim chúng vào các yếu tố cụ thể trên nguyên mẫu của bạn.
-
Hướng dẫn về Style tự động (Automatic style guide)
-
Giữ một bản tóm tắt của tất cả các màu sắc (color), phông chữ (font) và tài sản (asset) từ mỗi nguyên mẫu Prototype ở một nơi duy nhất. Hướng dẫn cập nhật Stype khi bạn thiết kế.
-
Thông báo (Notifications)
-
Nhận thông báo hoặc email Slack khi mọi thứ thay đổi hoặc ai đó đề cập đến bạn.
4. Các hệ thống thiết kế theo quy mô
-
Xây dựng các hệ thống thiết kế năng động, gắn kết và có thể tái sử dụng, dễ bảo trì bởi mọi người trong nhóm của bạn để đảm bảo tính nhất quán giữa các thiết kế.
-
Thư viện các thành phần (Component libraries)
-
Tạo một tập hợp các đối tược có thể chia sẻ gồm màu (color), kiểu văn bản (text styles), tài sản (asset) và các thành phần UI để đảm bảo tính nhất quán và tăng năng suất.
-
Phân quyền (Permissions)
-
Đặt quyền cho các thành viên của nhóm thuộc hệ thống thiết kế của bạn để có toàn quyền kiểm soát ai có thể chỉnh sửa hoặc xem chúng.
-
Đồng bộ hóa (Syncing)
-
Đẩy và kéo thay đổi với một cú nhấp chuột. Hãy yên tâm, mọi người trong nhóm sẽ luôn sử dụng phiên bản mới nhất.
-
Cổng trao đổi thông tin của hệ thống thiết kế (Design system portal)
-
Giữ nguyên tắc thiết kế, tài sản và các thành phần của tổ chức. Tra cứu tài liệu và mã. Tất cả đều có thể được thực hiện ở một nơi.
-
Xuất đầu ra (Export)
-
Các nhà phát triển có thể truy cập hệ thống thiết kế của bạn trong JSON, cũng như các định dạng kiểu dáng phổ biến để tích hợp chúng với mã.
5. Một bảng điều khiển gọn gàng với tất cả các thiết kế của bạn.
-
Giữ mọi thứ có tổ chức. Mời những người khác hợp tác thông minh hơn. Nâng cao năng suất của nhóm và đẩy mọi thứ về phía trước cùng nhau.
-
Trạng thái (Statuses)
-
Khi thiết kế của bạn phát triển, hãy chắc chắn rằng nhóm của bạn nhận thức rõ về tiến trình.
-
Sử dụng lại (Iterations)
-
Lưu thiết kế của bạn, lấy theo ý muốn và làm cho chúng có thể truy cập được cho những người liên quan.
-
Phân quyền (Permissions)
-
Mời những người khác xem thiết kế của bạn và phân quyền cho nhóm.
-
Chủ động cung cấp thông tin về hoạt động (Activity feed)
-
Không bao giờ bỏ lỡ những gì đang diễn ra. Thanh công cụ Activity Sidebar được bố ở trên mọi cửa sổ phụ khác.
-
An toàn (Safety)
-
Bất cứ điều gì bạn thiết kế đều được mã hóa an toàn và sao lưu đầy đủ. Chúng ta không bao giờ có thể nhấn mạnh điều này là đủ.
-
Đám mây riêng (Private cloud)
-
Với ứng dụng dựa trên nền tảng web, ứng dụng và cơ sở dữ liệu chuyên dụng, chúng tôi giữ thông tin bí mật của bạn tách biệt với các khách hàng khác.
III. Yêu cầu hệ thống
IV. Download
V. Các phiên bản hiện có
-
UXPin hiện cung cấp 3 tùy chọn cấp phép gồm:
-
Basic
-
Xây dựng nguyên mẫu Prototype với các hiệu ứng hoạt ảnh (animations), tương tác (interactions), và trạng thái (states)
-
Advanced
-
Xây dựng nguyên mẫu Prototype với các biến (variables), hàm (expressions), và logic.
-
Enterprise
-
Tạo một giải pháp thiết kế nguyên mẫu Prototype tùy chỉnh đáp ứng đầy đủ nhu cầu của bạn.