Chúng ta đang ở giữa sự thay đổi lớn nhất trong các công cụ thiết kế UI kể từ khi bắt đầu có các công cụ thiết kế vào những năm 70. Các công cụ thiết kế dựa trên code đang có một sức hấp dẫn lớn và sẵn sàng chiếm lĩnh thị trường bị chi phối bởi các công cụ minh họa đã cũ.
Vì vậy, bạn nên xem xét thêm một công cụ dựa trên code để cho vào quy trình thiết kế của bạn? Chà, nếu bạn đang làm việc trên các giao diện và bạn chỉ sử dụng các công cụ dựa trên hình ảnh, bạn sẽ hạn chế mức độ biểu cảm của mình trong thế giới kỹ thuật số. Ngoài ra, có lẽ bạn không mong muốn tạo ra căng thẳng giữa các chuyên gia thiết kế và chuyên gia kỹ thuật trong nhóm của bạn.
Đọc năm lý do chính để xem xét cho một sự thay đổi. Hoặc, để có một bài học lịch sử nhanh chóng về các công cụ sáng tạo, hãy cuộn xuống phía dưới.
1. Nâng cao prototyping
Các công cụ dựa trên hình ảnh, như bạn biết bây giờ, ban đầu được dùng để giới thiệu công việc minh họa cho thế giới điện toán. Mô hình này không bao giờ có ý nghĩa là để phục vụ thiết kế giao diện người dùng tương tác phức tạp. Không có gì ngạc nhiên khi các công cụ dựa trên hình ảnh bị hạn chế rất nhiều khi thiết kế sự tương tác.
Các công cụ dựa trên hình ảnh hiện đại cho phép bạn liên kết các bản vẽ tĩnh với nhau. Một số thậm chí sẽ làm chuyển động các thay đổi giữa các bản vẽ. Điều đó có thể đủ cho các trang đích đơn giản, nhưng nếu bạn cố gắng thiết kế một hình thức tương tác với sự phức tạp cao hơn, một bảng có thể sắp xếp hoặc trên thực tế, bất kỳ mẫu nâng cao nào, bạn sẽ gặp khó khăn đáng kể.
Các công cụ dựa trên hình ảnh không hỗ trợ các trường văn bản, trạng thái của các thành phần, tương tác có điều kiện, các biến, v.v. Người ta có thể lập luận rằng chúng không hỗ trợ bất cứ điều gì chúng ta thực sự cần để thiết kế giao diện tương tác. Nếu bạn đang thiết kế giao diện động, các công cụ dựa trên code là dành cho bạn.
2. Sự trung thực thực tế
Các công cụ thiết kế dựa trên hình ảnh sẽ tổng hợp tất cả các yếu tố trên màn hình, dựa trên các công cụ tổng hợp độc quyền. Các công cụ dựa trên code sử dụng các công cụ tổng hợp trình duyệt. Tính kỹ thuật này có tác động lớn đến quá trình thiết kế và phát triển. Khi được thiết kế trong một công cụ dựa trên hình ảnh, văn bản, màu sắc, gradient và vân vân sẽ trông rất khác nhau khi một kỹ sư mã hóa chúng thành phiên bản cuối cùng của sản phẩm. Những khác biệt có xu hướng dẫn đến sự hiểu lầm giữa thiết kế và kỹ thuật và làm chậm phát triển sản phẩm.
Các công cụ dựa trên code hiển thị tất cả các yếu tố thiết kế chính xác như trình duyệt. Thiết kế sẽ giống hệt với sản phẩm cuối cùng.
3. Các thành phần tương tác, tái sử dụng
Tất cả các công cụ thiết kế hiện đại cho phép bạn lưu các thành phần (biểu tượng) có thể tái sử dụng. Tuy nhiên, các công cụ dựa trên hình ảnh lưu các biểu diễn tĩnh của các thành phần được biểu thị trên khung vẽ - không có trạng thái hoặc tương tác nào được lưu để sử dụng lại. Tuy nhiên, với các công cụ dựa trên code, bạn có thể lưu các thành phần tương tác đầy đủ trong các thư viện dùng chung. Chỉ cần tưởng tượng bạn và nhóm của bạn có thể tiết kiệm được bao nhiêu thời gian, nếu bạn không bị buộc phải tạo lại tất cả các tương tác mỗi lần.
Tại đây bạn có thể thấy một thành phần tương tác (mật khẩu có xác nhận nâng cao) được thiết kế hoàn toàn bằng UXPin và được lưu trong thư viện hệ thống thiết kế dùng chung.
4. Những hạn chế thường gặp
Các công cụ dựa trên hình ảnh cho phép sáng tạo hoàn toàn không bị hạn chế. Các nhà thiết kế có thể tạo ra các thiết kế khó (hoặc hoàn toàn không thể) để tạo lại mã. Mặc dù điều đó tốt cho công việc minh họa, nhưng không thể chấp nhận được đối với thiết kế giao diện người dùng. Rốt cuộc, thiết kế của chúng tôi phải được mã hóa thành sản phẩm cuối cùng.
Các công cụ thiết kế dựa trên code tồn tại trong cùng một tập hợp các ràng buộc như môi trường kỹ thuật. Nếu một cái gì đó có thể được tạo ra trong một công cụ dựa trên code, nó có thể được tạo ra trong code.
5. Những khả năng mới
Sự gần gũi giữa thiết kế và code với công cụ kết xuất trình duyệt có nghĩa là các thiết kế giao diện được cung cấp bởi các công cụ dựa trên code có thể vượt qua mọi thứ được tạo trong các công cụ dựa trên hình ảnh và tạo ra một số thiết kế thực sự tuyệt vời. Các công cụ dựa trên code có thể hiểu mã, và do đó, kết xuất nó!
Công nghệ Merge của UXPin (hiện đang ở giai đoạn alpha) có thể mang các thành phần React.js sẵn sàng sản xuất đến trình chỉnh sửa thiết kế. Các thành phần nâng cao như máy quét ngày hoàn toàn không thể tạo lại trong một công cụ thiết kế dựa trên hình ảnh. Trong một công cụ như vậy, chúng xuất hiện dưới dạng tương tác ngay bên trong trình chỉnh sửa dựa trên code trong vòng vài giây. Các công nghệ như thế này cũng có thể là "chiếc đinh cuối cùng trong quan tài" cho các công cụ dựa trên hình ảnh.
Vì vậy, bạn nên xem xét thêm một công cụ dựa trên code để cho vào quy trình thiết kế của bạn? Chà, nếu bạn đang làm việc trên các giao diện và bạn chỉ sử dụng các công cụ dựa trên hình ảnh, bạn sẽ hạn chế mức độ biểu cảm của mình trong thế giới kỹ thuật số. Ngoài ra, có lẽ bạn không mong muốn tạo ra căng thẳng giữa các chuyên gia thiết kế và chuyên gia kỹ thuật trong nhóm của bạn.
Đọc năm lý do chính để xem xét cho một sự thay đổi. Hoặc, để có một bài học lịch sử nhanh chóng về các công cụ sáng tạo, hãy cuộn xuống phía dưới.
1. Nâng cao prototyping
Các công cụ dựa trên hình ảnh, như bạn biết bây giờ, ban đầu được dùng để giới thiệu công việc minh họa cho thế giới điện toán. Mô hình này không bao giờ có ý nghĩa là để phục vụ thiết kế giao diện người dùng tương tác phức tạp. Không có gì ngạc nhiên khi các công cụ dựa trên hình ảnh bị hạn chế rất nhiều khi thiết kế sự tương tác.
Các công cụ dựa trên hình ảnh không hỗ trợ các trường văn bản, trạng thái của các thành phần, tương tác có điều kiện, các biến, v.v. Người ta có thể lập luận rằng chúng không hỗ trợ bất cứ điều gì chúng ta thực sự cần để thiết kế giao diện tương tác. Nếu bạn đang thiết kế giao diện động, các công cụ dựa trên code là dành cho bạn.
2. Sự trung thực thực tế
Các công cụ dựa trên code hiển thị tất cả các yếu tố thiết kế chính xác như trình duyệt. Thiết kế sẽ giống hệt với sản phẩm cuối cùng.
3. Các thành phần tương tác, tái sử dụng
Tại đây bạn có thể thấy một thành phần tương tác (mật khẩu có xác nhận nâng cao) được thiết kế hoàn toàn bằng UXPin và được lưu trong thư viện hệ thống thiết kế dùng chung.
4. Những hạn chế thường gặp
Các công cụ dựa trên hình ảnh cho phép sáng tạo hoàn toàn không bị hạn chế. Các nhà thiết kế có thể tạo ra các thiết kế khó (hoặc hoàn toàn không thể) để tạo lại mã. Mặc dù điều đó tốt cho công việc minh họa, nhưng không thể chấp nhận được đối với thiết kế giao diện người dùng. Rốt cuộc, thiết kế của chúng tôi phải được mã hóa thành sản phẩm cuối cùng.
5. Những khả năng mới
Sự gần gũi giữa thiết kế và code với công cụ kết xuất trình duyệt có nghĩa là các thiết kế giao diện được cung cấp bởi các công cụ dựa trên code có thể vượt qua mọi thứ được tạo trong các công cụ dựa trên hình ảnh và tạo ra một số thiết kế thực sự tuyệt vời. Các công cụ dựa trên code có thể hiểu mã, và do đó, kết xuất nó!
