Tổng hợp các công cụ UX/UI nổi bật và dùng nhiều nhất năm 2021

Với mục tiêu là giúp các bạn UX/UI Beginnners có thể tiếp cận dễ dàng và thu thập được kiến thức dễ dàng. Dưới đây là những công cụ được sử dụng trong UX/UI được sắp xếp theo danh mục với những mục đích sử dụng khác nhau.

1. UI TOOLS

Đối với UX/UI designers mới vào nghề, các bạn hẳn sẽ rất bối rối không biết chọn công cụ nào phù hợp để thiết kế. Dựa theo số liệu thống kê của Uxtools.co, dưới đây là danh sách những công cụ mà các UX/UI designers thường sử dụng: + Figma + Sketch + Adobe XD + InVision Studio + Axure

1.1 Figma - https://www.figma.com/

Figma đã đứng vị trí top 1 về công cụ sáng tạo và thiết kế UI. Được đánh giá là một công cụ khuyên dùng vì nó hỗ trợ rất tốt trong việc quá trình thiết kế cùng với team khi có thể đồng bộ cùng một lúc.

Tương thích: macOS và Windows Chi phí: + Free Cho 3 projects và 3 trang/ project (gói Professional miễn phí cho học sinh và giảng viên) + $144/ năm – sử dụng phiên bản Professional

1.2 Sketch - www.sketch.com

Đây là phần mềm tiên phong trong việc thiết kế giao diện vào năm 2010, chỉ dành cho macOS. Nhờ việc chỉ xây dựng riêng cho macOS nên trải nghiệm sử dụng khá là mượt, ít bị lỗi vặt.

Tương thích: macOS Chi phí: + Free trong 30 ngày + $99/ năm – sử dụng phiên bản Standard

1.3 ADOBE XD - https://www.adobe.com/sea/products/xd.html

Vì nằm trong bộ công cụ của Adobe’s Creative Cloud, nên giao diện và các nút tắt của Adobe Xd khá thân thiện và dễ dùng, ngoài ra cũng có thể sử dụng Cloud của Adobe. Chính vì vậy, Adobe Xd cũng được nhiều nhà thiết kế ưa dùng.

Tương thích: macOS và Windows Chi phí: + Free trong 7 ngày + $131.61/ năm – phiên bản không giới hạn

1.4 Invision Studio - https://www.invisionapp.com/studio

Tương tự như Figma, InVision cũng có tính năng cộng tác (collaboarate). Điểm đặc biệt là có mục quản lí design system giúp cho các nhóm có thể hoạt động dễ dàng trong quá trình thiết kế sản phẩm. Tương thích: macOS và Windows Chi phí: + Free cũng đã đủ dùng với nhiều chức năng + $95.40/ năm – phiên bản Pro

1.5 AXURE - https://www.axure.com/

Một công cụ ngoài khả năng thiết kế giao diện còn có thể theo dõi và ghi lại quá trình làm việc của người dùng. Vì có các tiện ích có sẵn, kéo thả widget dễ dàng nên tiết kiệm được cho người dùng thời gian đáng kể. Tương thích: macOS và Windows Chi phí: + Free trong 30 ngày + $300/ năm – phiên bản Pro

2. PROTOTYPING TOOLS

Ngoài việc sử dụng các công cụ UI tools kể trên để tạo prototype, cũng có một số công cụ khác hỗ trợ làm prototype kèm animation cực kì hiệu quả, đơn giản dễ dùng . Chẳng hạn như:

+ Principle

+ ProtoPie

2.1 Principle - https://principleformac.com/

Công cụ tạo những giao diện tương tác có hiệu ứng hoạt ảnh (animation), kể cả là đa màn hình hay chỉ một vài tương tác đơn giản.

Principle có thể tạo ra những prototype chuyên sâu chỉ bằng các thao tác đơn giản. Ngoài ra, principle còn chức năng biên tập theo timeline, với những bạn đã từng xài After Effects sẽ cảm thấy quen thuộc.

Tương thích: macOS Chi phí: + Free trong 14 ngày + $129/ năm

2.2 Proto Pie - https://www.protopie.io/

Công cụ có thể tạo ra các tương tác animation từ đơn giản cho đến phức tạp. Proto Pie có nhiều chức năng khác nhau cód thể giúp bạn rút ngắn thời gian tạo sản phẩm. Và sử dụng được trên macOS, Windows nên bạn có thể import cả file Sketch và Adobe XD.

Tương thích: macOS và Windows Chi phí: + Free trong 30 ngày + $129/ năm

3. WHITEBOARDING

Khi tạo ra sản phẩm, việc brainstorming ý tưởng là điều hiển nhiên phải có. Nếu trong cùng 1 công ty và có không gian rộng kèm bảng trắng thì sẽ dễ hơn cho bạn, nhưng với các bạn làm việc work from home hoặc remote thì những công cụ này chính là cứu tinh.

+ Miro

+ FigJam

+ Whimsical

3.1 Miro – miro.com

Miro là giải pháp phần mềm Collaborative Whiteboard Software được đánh giá cao và sử dụng rộng rãi. Giao diện khi vào sẽ là một bảng trắng, các bạn trong nhóm có thể cùng tham gia thảo luận, đưa ra ý kiến bằng những khung nhập nội dung có sẵn từ User story, Mindmap, Kanban, Sprint Retrospective, Flowchart, Product roadmap, Business model canvas, Brainwriting. Ngoài ra, bạn cũng có thể tạo meeting và workshop trên đây với mọi người.

Tương thích: macOS và Windows Chi phí: + Free cho 3 boards + $96/ năm – team từ 2 đến 5 người

3.2 FigJam - https://www.figma.com/

Một công cụ bảng trắng khác đến từ nhà Figma được, chính nhờ yếu tố đó mà bạn vừa có thể đóng góp ý kiến, vừa chép những thành phần đó sang Figma và ngược lại khá dễ dàng.

Tương thích: macOS và Windows Chi phí: Tích hợp sẵn trong gói Professional của Figma + Free cho 3 FigJams (gói Professional miễn phí cho học sinh và giảng viên) + $144/ năm – sử dụng phiên bản Professional

3.3 Whimsical - https://whimsical.com/

Tương tự như Figma và Miro nhưng với một style tạo cảm giác khá thoải mái và giao diện hỗ trợ trực diện hơn. Ngoài ra, whimsical cũng hỗ trợ các tính năng để tạo ra wireframe nhanh chóng.

Tương thích: macOS và Windows Chi phí: Tích hợp sẵn trong gói Professional của Figma + Free cho 3000 items và 10 người tham gia

+ $120/ năm

4. WIREFRAME

Khi bắt đầu định hình xong ý tưởng, việc tiếp theo đó chính là vẽ wireframe của màn hình. Việc sử dụng công cụ nào là tùy theo ý thích mọi người từ Figma, Sketch, adobe XD hoặc Whimsical,.. đều được. Nhưng nếu bạn vẫn muốn tìm những công cụ với style vẽ và nhu cầu khác nhau thì các công cụ dưới đây là lựa chọn cho bạn

+ Balsamiq

+ Mockflow

4.1 Balsamiq - https://balsamiq.com/

Balsamiq Wireframes là một công cụ tạo khung giao diện (low-fidelity) nhanh chóng, tái tạo trải nghiệm phác thảo trên notepad hoặc bảng trắng, nhưng sử dụng máy tính. Giao diện dễ thao tác, thành phần và biểu tượng UI có sẵn nên chỉ cần kéo thả để tạo wireframe.

Tương thích: macOS và Windows Chi phí: + Free trong 30 ngày

+ $90/ năm – 2 projects

4.2 Mockflow - https://www.mockflow.com/

Công cụ thiết kế UX trực tuyến dành cho các nhà thiết kế sáng tạo và kỹ sư chuyên dụng. Công cụ dễ sử dụng để tạo wireframe và paper protyping cùng với các thành phần UI có sẵn.

Tương thích: macOS và Windows Chi phí: + Free cho 3 trang vẽ

+ $168/ năm – 2 projects

Ngoài ra, cũng có một vài công cụ wireframe khác bạn có thể tham khảo thêm:

+ Wireframe.cc

+ Mockup Builder

5. HANDOFF

Trong thiết kế web/app thì thiết kế bàn giao – Design Handoff (DH) là toàn bộ quá trình giao bản vẽ thiết kế cho bên Developer, các nhà phát triển web/app. Mục đích là nhằm giảm sự phỏng đoán hình ảnh, tính năng và nâng cao hiệu quả của bản thiết kế ở mức chính xác nhất.

Các công cụ UI tools hiện nay hầu như đều có thể dùng để handoff rất dễ dàng. Chẳng hạn như:

+ Figma + Sketch + Adobe XD + InVision Studio

Tuy vậy, Zeplin vẫn là một công cụ rất nổi bật và hỗ trợ rất nhiều cho người dùng từ nền tảng macOS muốn chuyển sang Windows.

5.1 Zeplin - https://zeplin.io

Tương thích: macOS và Windows Chi phí: + Free cho 1 projects

+ $144/ năm

Ngoài ra, mình cũng muốn giới thiệu thêm một vài công cụ khác hỗ trợ cho các bạn UX/UI nếu cần.

Công cụ hỗ trợ nghiên cứu người dùng từ xa

- Maze: https://maze.co/

- Userzoom: https://www.userzoom.com/

Công cụ nghiên cứu và theo dõi hành vi người dùng truy cập website

- Hotjar: https://www.hotjar.com/

- Fullstory: https://www.fullstory.com/

Để cập nhật nhanh những kiến thức về UX/UI, cùng những bài viết thông tin hữu ích về UX. Các bạn có thể cùng tham gia vào địa chỉ Facebook group: Xóm UX - Cộng đồng dành cho Newbies mới vào nghề