Loading...
Tìm kiếm

Tag Archives: UI/UX

Xây dựng landing page trong vòng 1 tiếng với Unicorn Platform và Github Page

Vừa rồi mình có tính xây dựng vài trang landing page cho các dự án cá nhân của mình, do đó được @khoanguyen là CEO Nocode VietNam giới thiệu cho công cụ Unicorn Platform để tạo ra các trang static pages.

Kết hợp với thêm kiến thức trước đó về việc tự host 1 static page lên Github Page và gắn domain vào thì mình có thể xây dựng được 1 trang okela.

Vậy từng bước như thế nào?

 

Từng bước xây dựng Landing Page với Unicorn Platform

Bước 1: Truy cập https://unicornplatform.com/ và đăng ký một tài khoản

Bước 2: Tạo page => Chọn template và kéo thả (thêm, xoá, sửa) các sections + cập nhật nội dung

Bước 3: Kết nối các form (nếu có) với database/nơi dữ liệu xuất ra (Như google sheet, mailchimp,…)

Bước 4: Cập nhật thông tin SEO, Feature image, Title, Description cho trang web

Bạn xem tất cả các bước từ đăng ký đến khi tạo ra website và tự host lên github page qua video sau nhé:

Tải source về và xoá branding

Bước 1: Nhấn setting -> Export HTML => Và download file Assets và name.html về

Để tải về được thì bạn phải đăng ký tài khoản https://unicornplatform.com/pricing/ với giá 9$/tháng

Bước 2: Giải nén file assets và copy file name.html vào trong thư mục vừa giải nén

Bước 3: Đổi tên file name.html thành index.html

Bước 4: mở file index.html trên trình duyệt và xem thử nó đã hiển thị như mình đã thiết kế trên UnicornPlatform hay chưa?

Bước 5: Mở file index.html với trình chỉnh sửa code như Visual Studio Code, Notepad, Hoặc Sublime Text để xoá đi branding UnicornPlatform

Host lên trên Github Page

Bước 1: Bạn tạo tài khoản Github nếu chưa có và tạo 1 repository để làm nơi lưu trữ code của static page

Bước 2: Sử dụng phần mềm Github Desktop clone code từ repository bạn mới tạo về local (máy tính của bạn)

Bước 3: Copy code từ thư mục lúc nãy bạn download vào trong thư mục bạn vừa clone từ Github về.

Bước 4: Bạn commit và push dữ liệu lên ngược lại trên github

Bước 5: Cấu hình Github page (bạn xem kỹ video của mình có hướng dẫn rồi nhé)

Gắn Domain

Bạn thực hiện gắn domain theo như hướng dẫn.
Mình dùng cloudflare để làm DNS cho domain của mình, bạn xem kỹ video để làm theo nhé.

 

Sau khi gắn xong bạn có thể có 1 trang web như mình 😀 https://blockchainba.hoangphan.blog/

Có gì chưa ok thì bạn có thể comment trên bài đăng youtube của mình, mình sẽ làm video hướng dẫn cụ thể hơn cho những bước bạn chưa hiểu nha.

Giới thiệu chung

Mình bắt đầu sử dụng công cụ Figma đã được gần 2 năm, trước đây rất lâu được nhiều bạn giới thiệu nhưng vì những công ty mình làm việc qua đều không sử dụng công cụ này.

Nhưng khi có cơ hội được vào một môi trường startup, nơi mà tất cả mọi thứ chưa được định hình, tự công cụ quản lý, process – quy trình, vận hành, đội ngũ, và cả những công cụ sử dụng để vẽ wireframe/mockup/design/prototype.

Do đó mà tại thời điểm đó mình mạnh dạng đề xuất quy trình vận hành, và tất cả công cụ cho đội ngũ công ty sử dụng (và đặc biệt là team Tech), những công cụ mình đề xuất gồm có:

  • Công cụ quản lý task/process: Sử dụng Jira hoặc Larksuite hoặc Notion
  • Công cụ viết tài liệu: Notion hoặc Confluence
  • Công cụ vẽ thiên về wireframe/mockup/prototype: Figma
  • Công cụ brainstorming: Figma & Miro
  • Công cụ vẽ diagram: Figma Jam và Draw.io
  • Kênh chat trao đổi: Sài mặc định công ty đang sài Telegram
  • Meeting: Google Meet/GG Calendar
  • Một số công cụ riêng cho team Dev như Github/Gitlab, CI/CD, DB: MongoDB, Postgre,… thì do ae chuyên về Dev tự đề xuất cho phù hợp mình follow theo.

Công cụ Figma

Giới thiệu xong rồi thì vào phần nói về Figma thôi.

Thực ra công cụ này được giới làm UX/UI biết tới nhiều hơn dùng để vẽ UI (User Interface) và làm về UX (User Experience), nhưng dĩ nhiên khi làm những công việc BA vẫn có thể sử dụng nó, vì dùng Figma ta có thể vẽ Wireframe, Sketch, Mockup,… rồi dùng để brainstorming, và vẽ cả diagram (thường mình vẽ activity diagram ở đây)

Vì sao mà mình lại đề xuất sử dụng Figma như vậy?

Thực tế là mình đã sử dụng qua rất nhiều công cụ dùng để vẽ wireframe/sketch/mockup, làm prototype và trao đổi với đồng nghiệp như là: Axure RP, Balsamiq Mockup, Adobe XD, Sketch, thậm chí từng làm việc với Photoshop để view wireframe/mockup khi đi làm cho các dự án/công ty. Và dùng thử qua các công cụ kiểu như FluidUI, Mockflow,… nhưng chưa áp dụng vào công việc thực tế.

Nhưng vì có những ưu điểm mà mình thấy nó đã hội tụ đủ mọi yêu cầu về công việc của mình:

  1. Miễn phí/paid: nếu mình áp dụng cho công ty thì sẽ dùng bản trả phí, còn nếu mình làm freelancer mình sài phiên bản miễn phí, tối đa là 3 figma files và 3 figjams. Nếu bạn dùng phiên bản Education (free 2 năm) thì sẽ không giới hạn số file, số pages và có thể cùng với những người khác edit chung 1 files, cuối bài viết mình sẽ hướng dẫn đăng ký.
  2. Vẽ wireframe và mockup: Dĩ nhiên công cụ này để vẽ UI/UX nên việc dùng để vẽ được wireframe và mockup là điều hiển nhiên được 😀
  3. Thiết kế prototype: Mình thường hay present design cho đối tác và anh em trong team, hoặc present trực tiếp với ae đội ngũ C-level, nên việc có tính năng prototype sẽ rất tiện để trực quan hoá một design/wireframe/idea hay luồng trong khi build một ứng dụng.
  4. Vẽ diagram, brainstorming: ở Figma có tính năng Figjam giúp vẽ diagram rất tiện, còn có hỗ trợ các widget như đếm giờ hay note trực tiếp trên canvas => dùng thảo luận brainstorming rất đã.
    Nhưng thực tế là mình sài draw.io cho việc vẽ diagram nhiều hơn :D, draw.io nó được tích hợp trong confluence nữa.
  5. Comment xuyên lục địa, cộng tác đa người dùng: yeah, tính năng này mình cực kì thích khi mà phải làm việc với nhiều stakeholders khác nhau, nên việc có thể cho nhiều người vào xem, phân quyền view only hoặc cho edit, và có thể comment góp ý trực tiếp trên chính xác vị trí đề xuất, tính năng này tuyệt vời hơn trên XD Cloud và Axure, Balsamiq cloud khi mà comment nó đôi lúc bị trật chỗ, chưa kể trên XD nó cho webview tách từng frame nằm trên 1 page rất khó để review, chưa biết nay đã update lại chưa :D. Yeah, cái này mình thích nhất á =)). Đã đã.
  6. Chia sẻ dễ dàng, nhiều người cùng vào xem mà không cần gì cả: Như mục 5 có nhắc, thì chỉ cần chuyển qua view with the link by anyone, thì ai có link đều có thể xem design mà không cần tài khoản, nên khi đó ai hỏi mà họ được quyền xem design => Đưa họ cái link là họ xem được rồi. Xưa mình sài Balsamiq desktop, nên việc share này cực kì mệt, chưa kể phần góp ý cứ screenshot rồi edit trên screenshot rất là mệt.
  7. Các thiết kế cùng nằm trên 1 canvas/project, zoom nhỏ ra để xem tổng quan và zoom to vào để xem chi tiết: Này thì mình nghĩ giờ nhiều công cụ đã hỗ trợ, nhưng bên figma có hỗ trợ mấy tính năng ở mục 5, 6 thành ra thấy tính năng này khá tiện.
  8. Tài nguyên phong phú (free & trả phí), mình có thể lên Figma Community và tải về các thiết kế có sẵn hoặc mẫu wireframe, nên khi mà thiết kế wireframe, mình hay dùng các component mình clone sẵn và gọi ra để sử dụng, nên vẽ rất tiện luôn. Ví dụ mình thường có các component sẵn như Popup thông báo (với nhiều style như 1 button, có nút close, hoặc popup có 2 button, …), Buttons, Tables, …
    Ngoài ra có các widget và plugin nơi mà mình dùng icon miễn phí (đôi lúc là trả phí), và nhiều thứ hay ho khác, bạn nên sài và thử nghiệm 😀
  9. Sử dụng component: Như mình chia sẻ ở trên, thì có component nên khi mình vẽ wireframe rất tiện luôn, đầu tiên là clone component qua 1 project mới, rồi sau đó khi vẽ sẽ gọi ra sử dụng và sửa content, thay vì phải vẽ từ đầu từng elements rất chi là cực. Nên rất là speed up thời gian mình hoàn thành tasks. 
  10. Dễ dàng học và sử dụng: Theo mình thì nếu bạn đã quen sử dụng 1 công cụ design thì việc sử dụng Figma rất chi là dễ, thậm chí là có thể bạn chưa sài nhiều thì tiếp cận nó rất dễ, trong cty mình nhiều bạn chưa sài bao giờ, mình chỉ làm 1 buổi seminar chia sẻ thôi thì về các bạn sài được hết mà gần như không có Q/A gì thêm, vì các bạn đó chỉ sài tính năng basic nên sẽ ít hỏi lắm 😀 còn ông nào làm chuyên design thì không kể tới nhá, mấy cái như variants, effects, auto layout, different states,…
  11. Kết hợp với team design, review design/luồng: Này thì như mục 5, 6 khi mà mình vẽ wireframe xong, cùng trên 1 project đó design sẽ mở page riêng và vẽ design trên đó, dữ liệu thiết kế được tổng hợp tại một nơi, rồi từ đó mình cũng review design trực tiếp bằng comment luôn, nghĩa là team BA/PO và UX/UI Design sài chung 1 project trên figma.
  12. Dùng như một công cụ để mình thiết kế banner/standee/…: Mình hay sài như này để thiết kế banner/standee/ rồi mấy hình cần thiết, mình xem nó như 1 công cụ giống Adobe Illustration (AI), bao gồm cả việc thiết kế logo luôn nha khi mà mình có thể export file vector hay export png, pdf,…
  13. Đôi lúc export ra được html để xem trước trên webview như một website thực sự: Này thì sau khi thiết kế ra xong, mình hay export ra html rồi mớ view trên các screen khác nhau, lý do là khi view trên canvas đôi lúc nó bị sai size và mình không nhận ra được sự khác thường, mình từng bị trường hợp này rồi khi thiết kế nhìn trên canvas nhìn rất ok, nhưng khi dev ra sản phẩm, layout nhìn rất là chán vì các element bị bự ra so với cách mình nhìn trên canvas,… màn hình bự cỡ 27, 32 inch thì không sao, chứ khi trên màn hình cỡ 14 inch là nhìn nó chán lắm. Nên tính năng này cũng là thứ cần thiết (dĩ nhiên là có thể làm kiểu prototype để view cũng đc, nhưng html giúp mình xem nó real hơn 1 tíu).

Còn mấy lý do khác thì giờ mình chưa nghĩ ra,… khi nào thấy có thêm thì mình bổ sung vào bài.

So sánh Figma với các công cụ khác

Thực ra tính không viết phần này, vì đa số các công cụ mình sài chưa hết tính năng đâu, chỉ sài 1 phần các tính năng, nên khi so sánh sẽ bị thiếu sót gì đó,.. nhưng mình cứ chia sẻ theo quan điểm và cách mình sử dụng để mọi người có thể thấy 1 cách nhìn nhận nào đó hé.

Chắc nói mấy cái hơn của Figma đi ha, tại giờ mình mê Figma quá nên …. à…

  1. So với Adobe XD:
    • Dễ comment, review hơn, trên XD lúc comment nó hay bị sai vị trí sao đó
    • Dễ sharing hơn, trên XD nó bị 1 lỗi là nó tự động zoom hơi bị to so với size mình thiết kế, chưa kể zoom in, zoom out không được mượt lắm
    • Mình thấy XD hỗ trợ phần component không được xịn như trên Figma lắm, sài Figma sướng hơn nhiều, chưa kể trên Figma có nhiều thư viện bao đã.
    • Thật ra mình thích cách dùng XD để thiết kế banner/standee, logo nha, xưa là sài XD làm việc đó không á
    • Trước khi sài Figma, thì công cụ chính mình sài là XD, nhưng khi sài Figma nhiều rồi thì lại sài Figma nhiều hơn.
    • XD giờ không có bản free nữa, xưa có giờ thì không còn.
    • XD thì mình chưa thử nghiệm làm việc với member khác kiểu nhiều người edit 1 file, nên k review chỗ này.
  2. So với Axure:
    • Axure xưa mình phải sài crack rất cực luôn, phải trả phí để sài (không biết giờ có bản free chưa), nhưng có bản cho students/teachers dùng free 1 năm.
    • Khúc làm prototype bên Axure hơi bị cực
    • Lúc vẽ wireframe mình cũng thấy cực nốt, cực hơn khi vẽ bên Figma rất nhiều, kiểu vẽ từng elements, rồi đổ dữ liệu vào, với lúc ra element nhìn như thời window hay kiểu UI của element nó cũ cũ sao đó.
    • Được cái nó hỗ trợ kiểu như Git để mà làm việc với team, nhưng mình lại thấy hơi phức tạp để sài.
    • Mình thấy công cụ này mà kiểu công ty bự bự sài sướng, crack để sài nên cũng giảm bớt chi phí sử dụng cũng ok.
    • Axure cũng có các thư viện khá là okela như Figma.
  3. So với Balsamiq:
    • Balsamiq mình sài ver 3, có key free, còn ver 4 thì phải trả tiền.
    • Sài ver desktop nên khi làm việc với members khác sẽ khó, phải export rồi gửi file xong import, quản lý version rất cực
    • Bản cloud thì buộc phải trả phí => cũng phần làm việc với team khá ok chỗ này, cũng ok chỗ quản lý version luôn.
    • Được cái Balsamiq mình thấy còn dễ sài hơn cả Figma, nhưng mà cũng bị giới hạn phần components và elements có sẵn, muốn sài xịn phải tự define ra khá là cực.
    • Balsamiq vẽ wireframe cũng nhanh, nhất là mấy cái liên quan đến table thì balsamiq là nhanh lắm (so với các công cụ khác)
    • Mình cũng có quay khoá hướng dẫn sử dụng Balsamiq, ae thử xem qua nhé.
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Cách đăng ký miễn phí Figma sài trong 2 năm (Education).

Bước 1: Truy cập Figma Education

Bước 2: Nhấn vào Get verify

Bước 3: Đăng ký tài khoản 

Với việc bạn có tài khoản thì bỏ qua bước đăng ký mà đi trực tiếp vào link apply student program nhé.

Bước 4: Điền thông tin sau khi đăng ký

  • Điền tên, Làm vị trí gì
  • Và cái số 3 phải chọn là “For teaching or taking a class

=> Sau khi tạo xong, check email các kiểu thì mở lại link: https://www.figma.com/education/apply 

Bước 5: Điền thông tin Get free Figma for Education

Nhớ là bạn đang đăng ký với Figma bạn là 1 sinh viên => bạn cần phải xác nhận bạn là sinh viên

Bằng cách điền các thông tin như sau:

  • Are you a student or an educator? chọn Student
  • What type of institution do you attend or work for? => Chọn K12 => Rồi 2 câu dưới chọn Agree, Agree
  • Why are applying for a free Figma Education plan: Bạn nên gõ tiếng Việt, ghi gì cũng được, đại loại là tui cần acc figma để làm bài tập, mình thì hay ghi bằng tiếng Anh “For doing assignment from teachers where I can design User Interface and Wireframe for application”
  • School name: School not listed
  • Full school name: nhập tên tiếng Anh của 1 trường đại học bất kỳ => Như mình học UIT thì mình điền đúng University of Information Technology – VNU HCM.
  • Nhâp địa chỉ Website của trường bạn đã khai báo ở trên: nhập đúng website chính của trường
  • Why is your primary field of study: Chọn bất kỳ theo ngành trường đó dạy, ví dụ mình chọn Information Technology hay kiểu kiểu vậy.
  • Expected graduation date: chọn tháng nào cũng được, năm 2024 trở đi, nên chọn từ năm hiện tại + 2 năm nữa là ok nhất.
  • Có 1 bước là upload lịch học, thì bạn cứ lên web chọn đại 1 lịch học nào đó điền, mình thì vào trực tiếp lịch kế hoạch năm file png của trường mình upload lên.Mình thấy là khi đăng ký tuỳ lúc nó ra form thông tin khác nhau, bạn điền sao cho hợp lý nhất là được nhé, lúc thì chỉ show có vài trường, lúc thì show 1 mớ thông tin. => Tuỳ cơ ứng biến thêm nhé.

Bước 6: Tạo team

Bạn chỉ cần điền tên Team rồi tạo thôi.

Sẽ có bước mời thành viên team => bạn có thể mời hoặc skip nhé, tuỳ mục đích.

Bước 7: Chọn gói dịch vụ và thanh toán (Free)

Lúc này bạn nhấn vào team => Sẽ có popup show ra và chọn Next cho team đó.

Sau đó chọn thanh toán (upgrade)

Vậy là giờ bạn đã có tài khoản Figma Edu được dùng như bản Professional trong 2 năm.

Kết bài

Như vậy là mình đã chia sẻ công cụ Figma, một công cụ tuyệt vời cho anh em Business Analyst, không chỉ là một công cụ để thiết kế mà còn có một công cụ để tư duy, trình bày và thực hiện ý tưởng của mình một cách chuyên nghiệp và hiệu quả, dù bạn làm trong team nhỏ hay lớn.

Và cũng đã chia sẻ luôn cách đăng ký tài khoản Figma Edu (free 2 năm).

Hi vọng giúp cho anh em nào chưa từng sử dụng tìm được công cụ mới hữu ích khi làm công việc Business Analyst nhé.

Giới thiệu

Mới gần đây thôi,… cỡ đâu 14-15 tháng trước, có một anh giới thiệu công cụ kiểu vẽ để present và phát khảo nhanh ý tưởng mà dân Defi (Decentralized Finance – ý nói những người hay nghiên cứu, chơi và build sản phầm tài chính phi tập trung) hay sử dụng.

excalidraw
excalidraw

Từ ngày mình biết tới nó mình sài hơi bị nhiều, vì kiểu nhìn nó như bản vẻ tay, vô cùng thân thiện.

Một số ưu điểm mà mình nghĩ nó over hợp với BA.

À mà đâu phải hợp mỗi BA, mình thấy hợp với nhiều người á chứ, cứ liên quan đến phát khảo idea, present đồ các kiểu là over hợp hết.
Dưới là một số ưu điểm mà mình thấy

  1. Phác Thảo Ý Tưởng Nhanh Chóng: Excalidraw cho phép bạn nhanh chóng phác thảo ý tưởng, tạo wireframe và sketch với giao diện đơn giản, trực quan. Có sẵn một số mẫu để kéo ra sử dụng từ library, giúp phát khảo ý tưởng rất nhanh.
  2. Present Dễ Dàng: Với Excalidraw, việc chia sẻ và trình bày ý tưởng cho team của bạn trở nên dễ dàng hơn bao giờ hết. Bạn có thể vẽ, chỉnh sửa và cùng làm việc với đồng nghiệp chỉ qua một link mà không cần phải tạo tài khoản.
  3. Lưu trữ local/lưu cloud linh hoạt: Khi tạo xong wireframe, có thể lưu lại file vào local sau đó có thể mở ra sử dụng sau đó, hoặc thay vì lưu local, mình có thể lưu trên cloud và sẽ có 1 link để mình truy cập và sử dụng sau này, khi mở link thì những gì mình đã vẽ sẽ còn lưu lại.
    Có hỗ trợ export ra hình ảnh png, sgv, copy phần đã chọn để paste (dạng image) vào nơi khác.
  4. Free, không cần tài khoản: Sử dụng hoàn toàn miễn phí, cứ mở link https://excalidraw.com/ lên là sử dụng thôi, và có thế bật lên chế độ cùng chỉnh sửa, nhiều người cùng tham gia edit và phát hoạ ý tưởng trên cùng 1 Canvas.
  5. Thư viện wireframe: Hiện có nhiều thư viện wireframe có thể bạn thêm vào, và kéo thả từ khung thư viện, nào là icons, khung frame web, mobile, wireframe mẫu sẵn, …
  6. Text to diagram (AI): Hiện tại có hỗ trợ text to diagram để lên diagram, flow chart, sequence, class nhanh chóng (bạn xem hình mình để mẫu nhé). => mình có thấy tính năng wireframe to code,… ae có thể sài ChatGPT thử nghiệm thử nhé.
  7. Các công cụ (tools) cơ bản mà một ứng dụng vẽ wireframe cần có như: Thêm hình vuông, hình tròn, ellipse, hình thoi, mũi tên, đường thẳng, đường cong, vẽ pen, thêm text, thêm image, xoá, hỗ trợ group layers, add frame, đổi màu, …
  8. Hỗ trợ tính năng present: Laser pointer, import video, web embed, …
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Mình nghĩ là sẽ còn nhiều tính năng hay ho khác bạn có thể xem tại đây: https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw, nếu mà bạn thử nghiệm trực tiếp thì sẽ có cảm nhận thực tế hơn qua cách mình trình bày 😀

 

Ngoài ra hình như có hỗ trợ embed/integrate Excalidraw vào trong ứng dụng (app/webapp) của bạn, tìm hiểu kỹ hơn tại đây https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration

Nhược điểm mình thấy

Nhưng vẫn có 1 nhượt điểm đó là thực sự so sánh với những công cụ chuyên cho công việc của chính công cụ đó thì Excalidraw sẽ không bằng.

Ví dụ như vẽ diagram để trình bày trong tài liệu, thì sẽ không thể ngon bằng các công cụ Visio, Draw.io, LucidChart
Hay vẽ wireframe, mockup thì không thể ngon bằng sketch, xd, hay figma được.

Nhưng nếu chỉ xét khía cạnh present và thực hiện nhanh khi đang present, thì công cụ này tuyệt vời với những tính năng và ưu điểm mình nói ở trên.

Thực tế đối với mình khi xử dụng, mình vẽ phát hoạ nhanh bằng Excalidraw lúc đang call với mọi người khi trình bày ý tưởng, hoặc thảo luận về luồng, cách thức hoạt động, cấu trúc hệ thống.
Rồi khi document details lại thì sẽ screenshot màn hình của Excalidraw rồi copy bỏ vào Figma nếu liên quan đến wireframe/mockup => Rồi vẽ lại = figma cho đầy đủ, chỉnh chu. Còn nếu là diagram thì sẽ bỏ vào draw.io rồi vẽ lại để có sản phẩm cuối cùng.

 

 

Dưới đây là một số hình minh hoạ, bạn có thể xem qua nhé.

Vẽ sketch/wireframe với Excalidraw.com

Image 1 of 5

Kết bài

Mình hi vọng với bài chia sẻ này, bạn có thể thấy công cụ này hữu ích với công việc của bạn, và giúp bạn tối ưu công việc của mình bởi việc sử dụng nó :D.

Khi mình làm việc với nhiều anh em Business Analyst, mình thấy nhiều bạn dùng các từ Sketch, Wireframe, Mockup và Prototype đôi lúc sai ngữ cảnh, ý nghĩa. Nên mình viết lại bài này, hi vọng sẽ giúp bạn hiểu hơn về các khái niệm, dùng khi nào và cách dùng cho hợp lý nhé.

1. Sketch

  • Là bản phác thảo một cái gì đó trên giấy hoặc trên bản vẽ ở máy tính.
  • Nó cung cấp cho mình những thông tin cơ bản.
Sketch
Sketch

DÙNG KHI NÀO?

  • Thường là giai đoạn đầu của việc phân tích, mình hình thành ra ý tưởng, luồng, màn hình cơ bản.
  • Mình hay vẽ đại ra trên giấy để có cái nhìn vô một cách trực quan để dễ hình dung và phân tích.

CÁCH DÙNG:

Vẽ đơn giản, dễ hình dung,  tiết kiệm thời gian, vẽ miễn sao dễ hiểu và nhanh, dễ truyền đạt ý tưởng chứ không cần vẽ cho đẹp.

Dùng giấy, hoặc phần mềm Excalidraw, Balsamiq, Figma

 

2. Wireframe

  • Là kiểu thiết kế có các thông tin cơ bản, giao diện cơ bản đủ thành phần (ví dụ phải đủ các trường, dữ liệu, nút button…)
  • Và bản thiết kế này thì không cần màu mè gì nhiều, không cần quá đẹp, nhìn vô là hiểu trên màn hình sẽ có nội dung ra sao, nút đặt chỗ nào, …
Wireframe
Wireframe
Đọc thêm  Công cụ vẽ wireframe và diagram tuyệt vời mình tìm được cho Business Analyst.

DÙNG KHI NÀO?

  • Trong khi phân tích chi tiết, viết tài liệu nghiệp vụ, business rule, trước khi làm UI, khi làm các bước về luồng màn hình.
  • Giúp cho thấy được sự luân chuyển giữa các màn hình (điều hướng), cách các màn hình làm việc với nhau.

CÁCH DÙNG:

  • Vẽ đơn giản, đầy đủ thông tin trên màn hình,  dễ hình dung,  tiết kiệm thời gian.
  • Đừng thêm màu mè quá nhiều, chỉ dùng các màu đơn giản để đánh dấu tạo điểm nhấn, nút quan trọng,…
  • Thông tin trên màn hình nên đầy đủ về trường, nút, …
  • Đi kèm với mô tả Business Rule hoặc viết tài liệu hoặc comment/chú thích.
  • Vẽ đường mũi tên để chỉ sự điều hướng giữa các màn hình, hoặc đôi lúc gắn nút điều hướng trên ứng dụng design để có thể thể hiện sự tương tác giữa các màn hình => giúp cho việc trình bày với KH, stakeholders khác dễ hình dung hơn.
  • Mình hay dùng Balsamiq, Figma, Excalidraw, Adobe XD, Giấy, hoặc Ipad (với bút) để tạo wireframe.

3. Mockup (UI)

  • Là kiểu thiết kế trực quan, khá giống với phiên bản thực tế khi xây dựng web/ứng dụng. Có màu đầy đủ, có mấy yếu tố như đổ bóng, viền, animation kèm theo,…
  •  Vẽ kỹ tới mức mà Front-end designer có thể nhấn vào và xem kích thước chính xác, có các thành phần CSS, responsive.
  • Mình làm công ty thì thấy mọi người hay gọi là UI, Bảng design
Mockup
Mockup
Đọc thêm  Figma Professional miễn phí: Công Cụ Đắc Lực Cho Business Analyst

DÙNG KHI NÀO?

  • Thường thì BA chả đụng gì trong phần thiết kế UI mà chỉ làm phần review luồng, nút có đủ chưa, phù hợp với tính năng nghiệp vụ đang làm hay không?
  • Thường được làm sau bước đã xong tài liệu nghiệp vụ/hoặc làm song song dạng cuốn chiếu với tài liệu nghiệp vụ.
  • Được dùng khi thiết kế trực quan, cụ thể để từ đó dựng nên giao diện web/ứng dụng.
  • Khi mà cần đánh giá yếu tố màu, phong cách, thương hiện, phối giữa các đối tượng giao diện, hình ảnh, sự chuyển động.

CÁCH DÙNG:

  • Thường BA ít/không làm phần này, mà là Designer sẽ lo, do đó BA có thể đi sâu vào mục review đánh giá, góp ý cũng như bổ sung thêm các thông tin còn thiếu trên giao diện, hay sự tương tác giữa các màn hình sao cho khớp với yêu cầu nghiệp vụ.
  • Nếu bạn có kỹ năng về phần giao diện này thì bạn có thể góp ý cũng như đưa ý kiến cá nhân nếu thấy sản phẩm mockup chưa được phù hợp.
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Prototype

  • Là một bản như Mockup mà nó có thể hoạt động được khi mình gắn sự liên kết giữa các màn hình và user có thể thao tác được. Mục tiêu chính là để mô phỏng sự tương tác giữa người dùng và giao diện.

DÙNG KHI NÀO?

  • Phần này thường bên BA dùng để đi trình bày với khách hàng, stakeholders, mô phỏng ứng dụng thực tế 
  • Hoặc có thể xem và đánh giá trước khi code để chắc chắn rằng bản giao diện phù hợp, luồng tính năng hợp lý, hoặc làm cả việc nhờ người dùng đánh giá,…

CÁCH DÙNG:

  • Cũng là phần Design lo là chính, BA thường phụ phần gắn tương tác giữa các màn hình.
  • Lưu ý khi bật prototype thì chọn màn hình cho phù hợp, mà mở ở mức 100% để cảm nhận nó giống thật, không bị phóng to, hay thu nhỏ mà đánh giá sai về giao diện.
  • Với mình thì mình đánh giá cả độ tương phản, rồi test WCAG.
  • Ngoài ra Prototype còn hay được dùng cho các ứng dụng xây tạm thời, mô phỏng giao diện và build ra app/web để đưa ra cho người dùng thấy (có thể viết một vài tính năng cơ bản mà chưa xây dựng đủ, dùng dữ liệu giả,…)

Kết bài.

Cảm ơn bạn đã đọc bài viết của mình, nếu có gì sai sót hoặc chưa đúng thì để lại comment cho mình nhé.

Team mình đã dành giải nhất 10K$ trong cuộc thi SOLANA CODING CAMP VIỆT NAM và

6 bước mình thực hiện trong quá trình Business Analysis với vai trò lại một BA như thế nào?

1. Tiếp cận dự án & trao đổi business & idea (Elicit)

  • Anh em ngồi lại thảo luận ý tưởng và chọn 1 ý tưởng thấy phù hợp để tham gia Coding camp. Các ý tưởng là tự bộ những tính năng team mình dự kiến build cho công ty để xây dựng sản phẩm hoàn hảo.
  • Thảo luận về ý nghĩa thực sự của tính năng, giúp cho user làm gì? Tương lai phát triển tính năng ra sao (Ở đây là thảo luận để thực hiểu về Business, cách business vận hành, problem và solutions)

2. Phân tích & nghiên cứu giải pháp

  • Mình dùng các kỹ thuật khơi gợi (trong chính mình) để phân tích các tính năng, vẽ ra user flow, các trường hợp có thể xảy ra.
  • Vẽ sketch, mình dùng phần mềm excalidraw để vẽ ra những trường hợp xảy ra, lên phát hoạ ý tưởng, hình dung tính năng nó như thế nào, sẽ có những nút nào, những màn hình như thế nào,… chọn lọc và đưa ra những phân tích sơ khởi để đi đến bước tiếp theo…
Đọc thêm  Công cụ vẽ wireframe và diagram tuyệt vời mình tìm được cho Business Analyst.
Sketch
Sketch
  • Vẽ wireframe, mình cũng tiếp tục dùng excalidraw để vẽ wireframe, nhưng vẽ lộn xộn từ luồng màn hình, các thành phần trên  màn hình, vị trí tính năng, một số diagram, vẽ tất cả những gì mà sản phẩm có thể xây dựng được.
  • Ở bước này vì khơi gợi và chưa chốt cụ thể tính năng nào sẽ build, scope ra sao nên mình ghi ra tất cả những gì mình phân tích và các trường hợp/ tính năng có thể build
Wireframe
Wireframe

3. Trình bày giải pháp

  • Call với anh em trong đội ngũ phát triển dự án để trao đổi về giải pháp, thảo luận và chọn ra những tính năng cần xây dựng trong thời gian ngắn là 5 tuần.
  • Chốt scope và chốt giải pháp từ nghiệp vụ đến technical.
  • Phân chia công việc
Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

4. UI & Business rule

  • Scope wireframe về Figma & vẽ rõ luồng hơn để nhiều người nhìn vô dễ hiểu, sẽ khác với wireframe ở mục 2, phần wireframe này sẽ gọn gàng, ngăn nắp, vẽ các mũi tên điều hướng chỉ sự tương tác giữa các màn hình rõ ràng hơn để anh em phát triển dự án theo dõi dễ hơn.
Arranged Wireframe
Arranged Wireframe
  • UI vẽ cuốn chiếu, vẽ màn hình nào thì sẽ review và chỉnh sửa đến đó, cùng thời điểm đó Dev FE cũng sẽ theo dõi và làm dần.
  • Mình viết Business Rule & review UI/flow/cases xảy ra(không viết tài liệu cụ thể)
Business Rule
Business Rule
  • Tester viết checklist (vì thời gian quá ngắn)

5. Dev & Test

  • BE/Smart Contract Dev viết code theo Wireframe & Business Rule mình đã định nghĩa ở mục Wireframe đã chốt scope (ở mục 4)
  • FE dev theo UI, và code cuốn chiếu cùng lúc với thời điểm vẽ và review UI.
  • Review checklist & test UI cùng với tester để tìm ra lỗi UI, từ đó kịp thời sửa chữa lỗi ngay thời điểm làm UI.
  • Lắp ráp FE & BE, SC để thấy sự tương tác giữa các tính năng, giữa BE và FE, cả về Smart Contract.
  • Test functional để tìm ra lỗi hoạt động của tính năng, cũng như tích hợp tính năng.
  • Luôn cập nhật Business rule & Review UI cùng với anh em để có thông tin mới, chính xác nhất.

6. UAT

  • Test sau khi sản phẩm hoàn thiện xem có đáp ứng yêu cầu không, nếu chưa đáp ứng thì feedback và chỉnh sửa bổ sung cho phù hợp, còn nếu đã hoạt động ok rồi thì anh em mang đi nộp bài và nhận giải thôi.

 

Kết bài.

Từ 6 bước của mình, bạn có thể áp dụng cho các dự án mà các bạn đang thực hiện, đây cũng là quy trình mà mình thực hiện khi tham gia các dự án thông thường khác, chỉ khác là mình thực hiện chi tiết, cẩn thận và viết tài liệu đầy đủ hơn.
Hi vọng bài viết sẽ giúp ích cho quá trình làm Business Analysis của các bạn.

 

Bạn có thể tìm đọc bài viết về giải ở đây:

https://nhipcaudautu.vn/cong-nghe/solana-vietnam-coding-camp-mua-2-cong-bo-doi-doat-giai-3349752/

https://vnreview.vn/thread/cuoc-thi-lap-trinh-solana-vietnam-coding-camp-mua-2-da-tim-ra-nhung-team-danh-chien-thang-trao-thuong-gan-2-4-ty-dong.492581209480721

 

Blockchain Business Analyst

Dưới đây là một số thuật ngữ mà mình hay sài cũng như nói chuyện với các bên khi xây dựng một token launchpad.

Launchpad

Thường được đi kèm với hình ảnh tên lửa được phóng lên bầu trời, với ý nghĩa là một nơi bệ phóng Token giúp cho các dự án dễ tiếp cận với nhà đầu tư, hay còn gọi là gọi vốn đầu tư dựa theo lượng users của công cụ launchpad đó hoặc ngược lại.

Vì là bệ phóng nên Launchpad có nhiều loại như ICO – Initial Coin Offering (Lần đầu phát hành token/coin), IDO – Initial Dex Offering – (Lần đầu phát hành token trên sàn DEX), IEO – Initial Exchange Offering (Lần đầu chào bán token trên sàn giao dịch crypto), IGO – Initial Gaming Offering (Lần đầu chào bán/phát hành NFTs/Mystery Boxes/Token liên quan đến GameFi), INO – Initial NFT Offering (Lần đầu phát hành NFT)

Token & Coin

Bạn tham khảo thêm nhiều bài viết để hiểu rõ hơn nhé. Để tránh mình mô tả ngắn gây hiểu sai lệch về 2 khái niệm này. Các từ khoá liên quan: Tiền điện tử, Crypto, Tiền mã hoá, …

White paper

Là một tài liệu để trình bày ý tưởng, kế hoạch phát triển dự án, kiến trúc hệ thống, phân chia token, dự báo tăng trưởng, … Nhằm mục đích chia sẻ minh bạch thông tin về dự án đến nhà đầu tư.

DYOR

Do your own research – bạn tự nghiên cứu về dự án để biết rằng dự án đó tốt không? Những người đi shill dự án chỉ là chia sẻ thông tin – họ không chịu trách nhiệm gì về việc đầu tư của bạn

ROI

Return On Investment – tỷ suất hoàn vốn, là chỉ số đo lường những khoản thu được so với chi phí bỏ ra (thường ở đây là tiền và thời gian).

Ví dụ bạn đầu tư 100$ và sau 1 năm bạn bán ra 500$ ⇒ ROI = ((500$-100$)/100$)*100% = 400%

KYC

Know your customer = quy trình xác minh danh tính của người dùng hoặc chủ dự án. Nhằm biết được người chủ dự án hoặc người tham gia là người thật.

Staking

Staking được hiểu là việc mang một lượng coins/tokens nhất định khoá lại để nhận được một lượng phần thưởng nhất định.

Ngoài ra bạn có thể tìm hiểu thêm Proof of Stake để rõ thêm nhé.

Smart Contract

Là bộ giao thức tự động thực hiện những điều khoản/thoả thuận giữa các bên dựa trên công nghệ blockchain.

Thường là smart contract sẽ được viết code và xử lý các logic mà được ví như những điều khoản trong hợp đồng.

Nhưng vì hợp đồng thường cũng có lỗ hỗng → có thể điều chỉnh hợp đồng cho phù hợp, nên smart contract cũng có upgradable.

Blockchain

Blockchain thì đóng vai trò như một bộ database phi tập trung, lưu trữ thông tin theo từng khối (block) và được liên kết với nhau bằng mã hoá, cứ theo thời gian thì các block này càng dài tạo thành một chuỗi (chain)

Vì là phi tập trung nên dữ liệu được nằm phân tán ở nhiều máy tính khác nhau, và các thông tin được liên kết với nhau và không thể phá vỡ nên thông tin cũng không thể bị thay đổi dưới bất cứ hình thức nào.

Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Chain

Từ này mình hay sài để chỉ các công nghệ blockchain/nền tảng khác nhau.

Ví dụ như Binance Chain, Etherium Chain, Solana Chain ⇒ Multi chain là đa chuỗi/đa nền tảng khác nhau.

Off-chain

Là các giao dịch xử lý và lưu trữ nằm ngoài blockchain

On-chain

Là các giao dịch xử lý và lưu trữ nằm trên blockchain

Audit

Là hành động kiểm tra code trên smart contract xem đã code tốt/có đảm bảo được bảo mật hay chưa? Nếu có lỗ hỗng bảo mật thì báo lại đội ngũ phát triển dự án điều chỉnh để tránh rủi ro về lỗi và hackers.

Một cái hay nữa là thường Audit giúp cho dự án uy tín hơn nhiều, và thu hút thêm nhà đầu tư.

Thường các dự án blockchain liên quan khá nhiều tới tài sản (coin/token) nên cần được audit cẩn thận bởi những đội ngũ có trình độ cao.

Nhưng không phải dự án nào audit rồi cũng an toàn 100% nha 😀

Pool

Mình định nghĩa từ này trong các launchpad mình tham gia, cũng như build.

Pool ở đây nghĩa là một nơi/một cái hồ/một contract address được sinh ra để chưa tokens/coins/NFTs/… từ đó dựa vào cơ chế xây dựng trên smart contract mà phân phối tokens sao cho phù hợp theo logic đã được định nghĩa.

Đôi lúc lại hiểu nó như một dự án launchpad.

Social task

Là các nhiệm vụ nhà đầu tư phải làm như chia sẻ lên facebook, theo dõi một bài viết, nhấn like, bình luận một bài viết, truy cập trang web,…

Mục đích tuỳ thuộc vào cơ chế hoạt động của dự án, có thể là để có quyền được tham gia launchpad của pool, hoặc có cơ hội, hoặc được quyền nhận miễn phí tokens,…

Whitelist

Kiểu như một danh sách các wallet hoặc một định danh nào đó đã được chọn lọc để có quyền tham gia một chương trình đặc biệt nào đó. Cụ thể ở đây là được quyền tham gia pool.

Tokenomics

= Token + economics: Thường là mô tả về cách token hoạt động trong nền kinh tế như: Tổng số lượng tung ra là bao nhiêu? vốn hoá như thế nào? phân bổ tokens ra sao? Các tiện ích gồm những gì?

FCFS

First Come First Served – ai đến trước thì được tham gia trước, thường là dành cho các pool được tham gia rộng rãi tới mọi người, và ai nhanh tay thì được tham gia trước.

Allocation

Sự phân bổ tokens, nhưng còn được hiểu là phần tokens được dành riêng cho một nhà đầu tư, một tổ chức đầu tư.

Ví dụ như cái bánh 10 phần chia cho 5 người, mỗi người 2 phần.

Thì 2 phần này là allocation của 1 người nào đó được chia.

Raffle

Là kiểu xổ số – quay ngẫu nhiên để chọn những người chiến thắng.

Vesting

Một nhà đầu tư nào đó tham gia để mua tokens, nhưng mà không phải được lấy toàn bộ token và ưng bán đi lúc nào thì bán. Mà phải được dự án giữ lại hoặc khoá lượng tokens đó lại, và chỉ được mở ra theo lộ trình nhất định. Quá trình này gọi là vesting → Nhằm tránh nhà đầu tư xả hàng hàng loạt hoặc thao túng thị trường → giúp cho dự án an toàn hơn, có thời gian để phát triển dự án.

DEX

Decentralized Exchange – là loại sàn giao dịch crypto phi tập trung. Thường mấy IDO Launchpad pool xong sẽ list trên DEX.

Lưu ý

Sẽ có những khái niệm trong blockchain mà bài viết này không thể mô tả hết được, bạn vui lòng tìm kiếm thêm trên google nhé.

Lúc mình làm BA tại công ty, có rất nhiều bạn Business Analyst mới dùng Balsamiq hay hỏi mình tải ở đâu, rồi cách crack công cụ này :D, sẵn dịp mới mở lại vụ viết blog, nên chia sẻ anh em Balsamiq Mockup miễn phí (key) nha.

Nhưng trước hết mình phải biết được Balsamiq Mockup là công cụ gì cho anh em nào chưa biết nhé.

Balsamiq wireframe là gì?

Đây là một công cụ mà giúp xây dựng nên những giao diện web/app dưới dạng wireframe bằng cách kéo thả những widget đã được tạo sẵn. Giao diện thì bao dễ sài, dùng vài lần là sài dễ như ăn chơi. Anh em có thể tìm thêm khóa học của mình về Balsamiq để học nhé, hướng dẫn chi tiết từ A tới Z luôn.

Đọc thêm  Khóa học làm quen với Balsamiq Mockup 3 - Miễn phí

Trước kia khi mình dùng và hay kiểm tra trang web của Balsamiq thì tên của công cụ này là Balsamiq Mockup, nhưng hiện nay đã đổi qua tên mới là Balsamiq Wireframe.

Để hiểu hơn về Wireframe, mockup, sketch, prototype thì anh em đọc thêm 2 bài này nhé:

Đây là giao diện của em Balsamiq

Balsamiq có 2 phiên bản, phiên bản desktop và cloud – và 2 phiên bản đều có trả phí. Nhưng trên các diễn đàn chia sẻ cách crack rất nhiều, riêng mình thì tìm được một số key từ một số diễn đàn và dùng thử, mình thấy rất tốt nên chia sẻ lại cho anh em sài phiên bản Desktop – Version Balsamiq Mockup 3.

Đọc thêm  Khoá học nghiệp vụ Blockchain cho Business Analyst

Tải và cài đặt

Để sử dụng thì bạn tải balsamiq mockup 3 tại đây: https://balsamiq.com/wireframes/mockups3fordesktop/

Sau khi tải và cài đặt, bạn nhập key sau nhé:

1) Name: Flash
Serial: eNrzzU/OLi0odswsqnHLSSzOqDGoca7JKCkpsNLXLy8v1ytJTczVLUotKNFLzs8FAJHYETc=

2) Name: SoftVnn
eJzzzU/OLi0odswsqgnOTysJy8ursUQCNc41hjV+7q5+AClADYE=

3) Name: tuan.cse06 – SoftVnn
eJzzzU/OLi0odswsqikpTczTSy5ONTBT0FUIzk8rCc..q7FEAjXONYY1f u6ufgD21RF1

Cảm ơn anh em đã đọc bài viết của mình nhé, hi vọng bài viết này sẽ giúp cho anh em sài được Balsamiq miễn phí nha. Nếu yêu thích bài viết của mình thì lâu lâu ghé thăm blog của mình nhé. Cảm ơn ae 😀

Đọc thêm về cách chia sẻ wireframe/mockup đến khách hàng khi làm Business Analyst nhé

Đọc thêm  Balsamiq Wireframe miễn phí - công cụ cho Business Analyst
Review wireframe/mockup dễ hơn với tool Axure Cloud.”]

Giới thiệu

Mình là một user của Adobe XD, phải nói là cực kỳ thích sài ẻm. Bắt đầu sử dụng từ phiên bản Beta đầu tiên tên ”Adobe Experience Design CC” vào tháng 03/2016, và còn sài đến hiện tại với tên chính thức là Adobe XD.

Mình sài Adobe XD từ việc làm đồ án thời sinh viên, đến khi đi làm thì sài ẻm trong công việc hằng ngày, đặc biệt là với công việc Business Analyst. Và ngay cả những lúc làm freelancer với anh em cũng mang XD ra để thiết kế dạng product design cho các dự án của team. Và cái hay của Adobe XD là được sử dụng miễn phí với phiên bản Starter Plan.

Nên khi đi làm việc mình sử dụng quen và thích sài XD là một chuyện thường tình. Trong lúc làm dự án với anh em trong công ty, mọi người thì sài Axure, mình thì sài XD nên không đồng bộ được, nên mình lên chị google tìm cách đồng bộ các source từ 2 bên với nhau – chưa kịp tìm được cách đồng bộ source, thì vô tình mình lượm được mẹo review wireframe/mockup dễ hơn khi kết nối XD và Axure Cloud.

Lưu ý là bài viết này dành cho những bạn thích sài XD (miễn phí) và muốn sử dụng thêm mẹo này, thay vì sài những công cụ có sẵn như Figma (miễn phí và trả phí), Axure (trả phí),…hoặc chính bản gốc Axure XD Share (bị giới hạn cho phiên bản Starter)

Tình huống review wireframe/mockup mà Business Analyst thường dùng.

Dưới đây là những tình huống review wireframe/mockup hay gặp:

  • Gặp khách hàng/đồng nghiệp (KH/ĐN) trực tiếp, mở file lên để review
  • Gửi nguyên file source cho KH/ĐN để họ mở trên phần mềm của họ và xem (điều không được hay đó là có thể khách hàng có thể không sài chung phần mềm với mình, do đó họ không mở được luôn, nên sẽ có trường hợp sài cách thứ 3 và thứ 4 dưới đây)
  • Export file hình ảnh/pdf và gửi cho khách hàng để họ xem và đánh giá trên hình ảnh, có thể là note comment ngay trên hình ảnh luôn.
  • Copy hình bỏ vô file word offline hoặc docs online cho khách hàng xem và review với tính năng comment trên word/docs (hoặc tool công cụ như excel,…).
  • Export ảnh ra và copy ảnh lên phần mềm cho phép review online (Ví dụ như Axure, Invision,…)
  • Sử dụng tính năng sharing and reviewing của công cụ đó (Ví dụ như Adobe XD Share designs and collaborate, Balsamiq sharing and collaborating) – nhưng công cụ này sài nhiềutrả phí.

Đối với bản thân mình thì từng sử dụng tất cả các cách trên, và mình dần dần chuyển đổi dần qua cách mới tốt hơn. Và mẹo mình chia sẻ ở bài viết này chính là cái mình thấy tiện và dễ sử dụng nhất, do đó chia sẻ cho anh em để dùng thử, biết đâu lại thích như mình.

Note: Bạn đọc nào chưa sài 1 trong 6 cách trên thì comment ở dưới, mình viết hướng dẫn cụ thể cho nhé.

Mẹo mà Hoàng hay sài

Đây là một tính năng trên Axure Cloud – gọi là Publishing Artboard Projects, tính năng này giúp user publish source từ các phần mềm khác: Sketch, Adobe XD, Figma, lên Axure Cloud và chia sẻ cho những thành viên khác, và có cả chia sẻ public – được comment không cần tài khoản Axure Cloud (Đây là điểm khác so với Figma).

Đặc điểm:

  • Hoàn toàn miễn phí (adobe XD starter + Axure Cloud)
  • Được sài XD theo mong muốn của bạn (giống mình, thay vì sài các tool tương tự)
  • Chia sẻ wireframe/mockup dễ dàng, dễ review/comment trực tuyến
  • Không bắt buộc đăng nhập để comment
  • Dễ quản lý source (vì gửi qua gửi lại, nhiều khi lộn giữa các file source)
  • Không bị giới hạn sharing của Adobe XD Starter- Share Links: 1 active shared link

Cách cài đặt và sử dụng:

  • Bước 1: Cài đặt Adobe XD phiên bản Starter (miễn phí) – tải tại đây
  • Bước 2: Cài Axure Cloud Desktop (miễn phí) – tải tại đây
  • Bước 3: Đăng nhập XD và Axure Cloud (chưa có tài khoản thì tự tạo nhé)
  • Bước 4: Tải plugin the Axure plugin for XD
  • Bước 5: Trong XD, chọn artboard muốn chia sẻ để publish lên Axure Cloud.

  • Bước 6: Trên top menu, chọn Plugins > Axure > Export Selection to Axure Cloud. (Lưu ý là phải mở app Axure Cloud trước nha, không mở nhiều khi lỗi không hoạt động được)

  • Bước 7: Trong Axure Cloud App, bạn chọn workspace và artboard project mà muốn publish lên. Nếu chưa có sẵn thì bạn tạo mới “Create New Project” và đặt tên dự án “Project Name” – và lưu ý bạn chọn Project size cho phù hợp nhé, ví dụ thiết kế ở size Iphone 12 thì chọn iPhone 12 (390 x 844)
  • Bước 8: Nhấn Upload, sau đó chia sẻ cho KH/ĐN để comment – và ở đây bạn cũng có thể chia sẻ với mật khẩu (Access Code) hoặc dạng private cho tài khoản cụ thể.

Bạn có thể test project mình share ở đây: https://nnsbdq.axshare.com/start.html – mật khẩu là “hoangphan”

Cách comment

Làm theo như hình:

Bước 1: Nhấn vào icon comment

Bước 2: Nhấn Add comment

Bước 3: Chấm 1 điểm bằng click chuột trái vào vị trí muốn comment

Bước 4: Add comment

Bước 5: Nhấn Post

Bước 6: Bạn có thể comment bởi đăng nhập hoặc a guest (điền email bất kỳ)

Bước 7: Team review tất cả, sau đó BA hoặc các bên khác có thể update lại wireframe/mockup

Bước 8: Mark Resolved các comment nào đã được giải quyết, hoặc delete comment.

Áp dụng cho chia sẻ Wireframe từ Balsamiq.

Cơ bản thì mình copy image từ Basamiq qua XD, rồi share lên Axshare để mọi người có thể thảo luận và comment trên đó. Các bước mình thường thực hiện như sau:

  • Bước 1: Chọn vùng cần copy trên balsamiq

  • Bước 2: Nhấn Command + C (trên MacOS) để copy vùng chọn. (Đọc thêm phần hướng dẫn export/copy image ở hướng dẫn ở balsamiq để biết thao tác trên Windows nhé, xưa mình nhớ phím tắt nó phải 3 nút lận mới copy được)
  • Bước 3: Nhấn Command + V (trên MacOS) để paste hình ảnh lên XD

Mình trình bày ở XD như sau:

  • Bước 4: Share lên Axure Cloud như hướng dẫn ở trên (Project Size thì chọn Auto Web), sau đó copy link gửi cho KH/ĐN

Tham khảo mình share project demo từ Balsamiq lên Axshare: https://50wmtz.axshare.com/start.html#g=14

Đọc thêm về sử dụng Balsamiq Mockup 3 miễn phí (dùng key – không cần crack)

Đọc thêm  Balsamiq Wireframe miễn phí - công cụ cho Business Analyst

Kết luận

Phía trên là mẹo sử dụng Axure Cloud để chia sẻ wireframe/mockup đến ĐN/KH để dễ dàng review và comment cho một Business Analyst. Giảm thiểu chi phí cho cá nhân người sử dụng khi được sử dụng miễn phí cả Adobe XD Starter và Axure Cloud, khi mà công ty các bạn không/chưa hỗ trợ trả phí cho việc sử dụng phần mềm trả phí.

Dĩ nhiên có nhiều công cụ, tính năng tương tự nhưng đây là mẹo dành riêng cho Adobe XD Starter, đặc biệt là đối với các bạn thích dùng Adobe XD Starter giống mình.

Alternative app:

  • Adobe XD – sharing (9.99$/mo)
  • Figma (Free or 12$/mo)
  • Axure (25$/mo)
  • Sketch (9$/mo)
  • Invisionapp (Free or 7.95$/mo)
  • Balsamiq Mockup

Vào năm 2020 mình có xây dựng khóa học Vẽ wireframe với Balsamiq Mockup 3, nay mình xin phép chia sẻ lại khóa học với mọi người.

Tập 1 – Cài đặt và giới thiệu Balsamiq Mockup 3

+ Giới thiệu tổng quan về Balsamiq Mockup 3

+ Những thành phần có trên ứng dụng

+ Các chức năng riêng của từng thành phần

+ Thêm controls

Tập 2 – Chọn, di chuyển, sắp xếp các controls

Tập 3 – Thay đổi kích thước và group các control

+ Thay đổi kích thước của từng control

+ Group các controls lại thành từng nhóm

Tập 4 – Chỉnh sửa các controls

Chỉnh sửa màu, nội dung, các thuộc tính của các controls

+ Nhóm 1: Chỉ 1 dòng text

+ Nhóm 2: Không có text nào để edit cả

+ Nhóm 3: Mặc định không có text, nhưng có thể chèn 1 text vào

+ Nhóm 4: Nhiều hơn 1 text

+ Nhóm 5: Nhóm sử dụng shortcut style

+ Nhóm 6: Datagrid

 

Tập 5 – Mockup linking và presentation

Trong bài học đã tạo sẵn các wireframe màn hình: Login, Signup, Forgot Password, Homepage, Homepage with panel.

+ Link button từ màn hình login qua màn hình homepage, tương tự với các màn hình khác

+ Presentation: Trình bày luồng của wireframe cho các khách hàng, stakeholders

Tập 6 – Symbol/ Assets

Hướng dẫn về tính năng symbol/assets, giúp cho style của wireframes đồng bộ, cũng như chỉnh sửa 1 màn hình mà cập nhất cho các màn hình có vùng thông tin giống nhau.

Tập 7 – Thực hành vẽ wireframe

 

Bạn có bất kỳ câu hỏi nào thì email cho mình để mình giải đáp cho nhé – [email protected]