So sánh 02 công cụ thiết kế Sketch và Axure

Hôm nay, mình muốn so sánh Sketch và Axure.

Thực ra cũng suy nghĩ mãi. Có nên viết bài này không? Bởi so sánh Sketch với Axure cứ giống như so sánh con cá cảnh với con cá ngừ. Hai con đều bơi được, ngắm được, ăn được, nhưng thực ra lại không hề giống nhau. Từ môi trường hoạt động, chức năng sử dụng đến nhóm người dùng: một con dành cho đối tượng ngắm nghía thưởng ngoạn, một con dành cho đối tượng đánh bắt ăn thịt. Hai con vẫn có thể đổi vị trí cho nhau, nhưng nếu đổi vị trí, mỗi con đều không còn thực sự thỏa mãn được thứ mà người dùng mục tiêu của nó cần nữa. Hãy thử tưởng tượng bạn ngắm con cá ngừ bơi trong bể cá mỗi ngày và mang con cá cảnh lên nấu canh chua.

Tương tự, Sketch và Axure cũng như con cá ngừ và con cá cảnh. Chúng đều làm được những công việc giống nhau: vẽ wireframe và làm layout. Nhưng thực sự thì mỗi tool lại có thế mạnh riêng và thế giới riêng của mình. Vậy có cần thiết phải làm bài so sánh?

Anyway, mình nghĩ cần. Bởi mình suy từ bản thân mình ra, mình cũng từng tò mò muốn thử xem Sketch có power hơn Axure trong việc vẽ wireframe không, có nên chuyển từ Axure sang xài Sketch? Chỉ đơn giản bởi mình biết Sketch cũng có thể vẽ được wireframe. Nếu một tool làm được thứ gì đó mà mình cần, mình sẵn sàng thử nó, hoặc kể cả là thử nhiều thứ như nó, để từ đó tìm ra thứ công cụ mà mình cho là tốt nhất.

Vì vậy, mình đã quyết định thử vọc Sketch trong một khoảng thời gian, thử vẽ wireframe, thử làm cả layout. Và đây là những gì mình kết luận:

Axure quả là sinh ra để dành cho một product. Còn Sketch chính xác là sinh ra cho một designer.

— 

1- Sketch tập trung nhiều hơn và xử lý tốt hơn về interface, trong khi Axure thì không.

Xài Sketch, vẽ layout thì khỏi lo về độ đẹp. Thực sự là rất đẹp luôn. Sở dĩ như vậy, mình nghĩ phần nhiều nhờ vào mấy cái plugins tích hợp đi cùng Sketch.

(Giải thích thêm một chút, cùng với sự phát triển của Sketch là sự song hành của nhiều plugins hỗ trợ thêm các tính năng, ví dụ như lấy ảnh, tạo animation v.v… Các plugins này sau khi down về sẽ tích hợp thẳng vào Sketch, tới lúc cần cứ lôi ra dùng thôi.)

Ví dụ ở đây, mình cài Craft (by InVision LABS), nó có một tính năng là cho nhúng ảnh trực tiếp từ một website khác vào trong Sketch, chỉ cần quăng cái link vào rồi chọn chọn. Rất nhanh. Hình ảnh chất lượng cao. Nét căng. Sketch xử lý nhẹ bẫng như không.

Còn khi mình xài Axure thì sao?

Copy image hoặc image source rồi paste vào. Còn không, thì kéo thả file có sẵn từ máy tính vào cũng được.

Có điều, cứ ảnh nào chất lượng cao một tí là nó bắt đầu vật vã hiện cái này lên:

Dù có chọn optimize hay không optimize, thì sau đấy trong quá trình xử lý, chỉ cần đụng tới cái ảnh đó và thay đổi nó một tí là thế nào nó cũng sẽ dần trở nên mờ câm mờ điếc. Tới khi xong file, xuất được cái ảnh ra thì nhìn thật chán không buồn nói. Axure không chịu được file nặng, càng gắn nhiều hình, nó càng ì ạch hẳn lên.

Bởi thế, nếu chỉ làm wireframe thì không sao, chứ cần làm layout hay demo gì đẹp đẹp với nhiều hình ảnh phải được insert vào thì đảm bảo sẽ mất công loay hoay nhiều.

Do vậy, với một product như mình, thì Axure là ok, nếu không muốn nói là quá đủ và quá tốt, để vẽ một wireframe.

Còn nếu là designer, cần tập trung nhiều vào interface, thiết kế có nhiều ảnh, nhiều icon… thì Sketch sẽ là lựa chọn phù hợp hơn hẳn.

2- Bộ công cụ của Sketch thiên về việc tạo ra một layout, chứ không phải một wireframe. Axure thì ngược lại.

Bây giờ, thử nhìn vào những gì mà Sketch cho bạn:

Đây là materials có sẵn của Sketch. Tài sản chỉ có nhiêu đó thôi 🙁 Trong khi đây là materials có sẵn của Axure Và đây, Axure’s materials part 2. Đây mới chỉ là bộ default thôi đó nghe.

Được cái là, cả Sketch lẫn Axure đều cho tích hợp thêm các materials khác (với Sketch thì tích hợp vào thành UI Kits, còn Axure thì tích hợp material vào Library). Tuy nhiên, nếu bạn là product và đã quen vẽ wireframe chỉ bằng việc kéo thả, thì khi xài Sketch có lẽ bạn sẽ bị “shock văn hóa”. Ngược lại, nếu đã xài quen các tool thiết kế, thì việc Sketch chỉ đem lại chừng đó thứ, còn lại bạn lo mà tự vẽ, cũng sẽ không có gì bất ngờ.

3- Sketch tập trung nhiều vào thiết kế icon cũng như thiết kế dành cho nhiều màn hình của nhiều loại thiết bị khác nhau. Axure không có điều đó, mà chỉ suggest một vài dạng lưới cơ bản thôi.

Phần chọn artboard của Sketch

Trong hình là artboard của Sketch. Ở đây đã tích hợp sẵn đủ loại từ iOS devices đến responsive web design, material design, iOS icons, Android icons, v.v…

Trong khi với Axure, ta phải tự tạo grid, và chỉ được suggest vài thứ basic.

Điều này cũng dễ hiểu. Product nếu chỉ vẽ wireframe thì không cần tới quá nhiều thứ mà Sketch đang cung cấp. Bản thân mình làm wireframe, thường cũng chỉ làm một bản web PC (1200), một bản web mobile (320 hoặc 640).

Còn với designer, họ sẽ được yêu cầu thiết kế layout cho nhiều loại màn hình của nhiều thiết bị. Giả sử làm web mà HTML xịn thì designer cũng sẽ chỉ cần thiết kế khoảng hai bản như product làm với wireframe, các bản khác HTML tự suy ra, tự xử luôn. Còn không, design sẽ cần làm nhiều bản, và lúc này mà xài Sketch thì sẽ tiện vô cùng, chỉ cần chọn sẵn các loại màn hình từ kho cho trước, và kéo ra để tạo artboard mới luôn.

—

Với vài lý do như thế, mình nghĩ Axure là đủ dùng với một người làm product như mình, trong khi Sketch sẽ hợp hơn nếu bạn làm designer.

Đó là so sánh chung giữa Sketch và Axure.

Còn nếu nói về vẽ wireframe, mình vẫn thấy Axure làm tiện hơn Sketch.

Axure show full bộ material của mình ra. Mỗi khi cần dùng chỉ cần kéo thả. Chưa kể còn tích hợp được cả thư viện material vào, tiện vô cùng.

Axure cũng show luôn sitemap của trang ra, rõ ràng, minh bạch. Ví dụ:

Ảnh từ wireframe của một dự án freelance mình làm

Và thêm nữa, xài Axure thì khỏi cần cài thêm plugins khi xuất file HTML. Nếu như Sketch cần cài thêm plugins (ví dụ như Zeplin) để support cho ra file mà developer có thể xài được, thì Axure đã tự tích hợp sẵn trong tính năng Publish của nó rồi:

Tiện không?

KẾT LUẬN

Cả Axure và Sketch đều là những công cụ rất powerful. Tùy vào việc bạn là ai và bạn cần dùng tool vào việc gì, bạn sẽ quyết định chọn xài Axure hay Sketch.

Với mình, mặc dù công việc hiện tại chỉ cần làm việc với Axure là đủ, nhưng mình cũng đang học thêm về design, nên sẽ vẫn tiếp tục mày mò Sketch thêm và có lẽ sẽ còn tốn nhiều thời gian thêm  nữa (tool nào càng powerful thì càng tốn thời gian mà). Nói chung, mình sẽ tiếp tục update những thứ hay ho về Sketch khi mình phát hiện thêm ra điều gì mới.

Nhân tiện, link cho các bạn có nhu cầu tìm hiểu về Sketch và những thứ xung quanh nó như Craft, Zeplin v.v…:

• Tải Sketch: https://www.sketchapp.com/
• Giới thiệu về Zeplin, download các tài liệu khác tại đây: https://zeplin.io/features.html
• Discover Craft, xem video hướng dẫn, download tài liệu ở đây: https://www.invisionapp.com/craft

Còn lại các bạn Google là ra rất nhiều thông tin khác nhé.

Good luck & have fun các bạn.

—

Đọc thêm bài khác trên Mockplus – một trang khá hay về UX:

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers

Xem thêm: Khóa học Product Management – Quản lý sản phẩm cho người mới bắt đầu