Từ Sketch đến AE/Prototype

Tôi không chắc những người khác làm thế nào, vì tôi chỉ là một “thiết kế UI hoang dã”, không thực sự xứng đáng với danh hiệu nhà thiết kế. Tôi cũng không biết cách mà các chuyên gia trong ngành thiết kế xử lý quy trình này… Vì vậy, tôi sẽ ghi lại cách tôi làm.

Thiết kế một hình ảnh - Xuất sang AE hoặc công cụ nguyên mẫu - Điều chỉnh - Tạo GIF

Đây là quy trình làm nguyên mẫu của tôi. Tất nhiên, nếu bắt đầu viết mã (code), chúng ta sẽ sử dụng một quy trình khác. Phần xuất có sự khác biệt và tương đồng:

Thiết kế một hình ảnh - Xuất [bang xep hang bong ngoai hang anh 2025](/post/2024-2-9/)  sang xasset - Thực hiện bằng code - Ghi màn hình tạo GIF

Được rồi, phần viết mã để sau, bây giờ hãy nói về AE và các công cụ nguyên mẫu. Trong số đó, tôi thích Principle nhất, chủ yếu vì yêu cầu của tôi đối với các công cụ nguyên mẫu là: 1. Không thể chỉ dừng ở các chức năng đơn giản như Button/Push/Pop (câu chuyện của bạn, Axure). 2. Cần phải có khả năng thực hiện một số hiệu ứng cơ bản, chẳng hạn như Drag/Scroll/Page/Tween animation. 3. Nhưng tôi không muốn viết mã để làm những điều này – viết mã thật phiền phức! Và nếu phải học thêm JavaScript, thì thà dùng ObjC luôn cho tiện (nói với bạn, Framer.js). Phân loại như sau:

Những công cụ kém hơn cả Storyboard: Pop/Axure/Flinto 
Không cần viết mã nhưng vẫn làm được nhiều thứ [mua the cao](/post/uhandsarchieve/)  thú vị: Principle/QC/Keynote
Phải viết script mà tôi không giỏi: Avocado/Framer

Vậy thì hãy xét nhóm Principle/QC/Keynote. Đây hoàn toàn là sở thích cá nhân. MartinRGB nói rằng QC gần giống với tư duy của lập trình viên, nhưng khi tôi tìm hiểu QC, đó là trước khi tôi học iOS, nên tôi thấy nó khó quá và đã từ bỏ để chuyển sang iOS… Còn Keynote, nếu sử dụng tốt tính năng “Magic Move”, bạn có thể tạo ra những hiệu ứng tuyệt vời. Tuy nhiên, logic tuyến tính của Keynote (chỉ có trang trước và trang sau, không thể kết nối đa dạng như Storyboard) khiến việc tạo tương tác thời gian thực trở nên khó khăn. Do đó, tôi thường dùng Keynote để làm slide thuyết trình ấn tượng hơn là làm nguyên mẫu. Vậy thì hãy nói về Principle (có vẻ hơi quảng cáo chút đỉnh). Nguyên tắc cơ bản của phần mềm này cũng dựa trên Storyboard, nhưng nó có thêm các hiệu ứng chuyển tiếp giữa hai khung hình và tích hợp sẵn chức năng Scroll. Tôi cảm thấy đây là công cụ phù hợp để nhanh chóng tạo nguyên mẫu và thử nghiệm ý tưởng. Còn AE?… AE quá mạnh mẽ, để đề cập sau (trốn tránh).

Trong cả Principle và AE, điều quan trọng nhất là sắp xếp đúng thứ tự các lớp (layer) và chuẩn bị các hình ảnh cần thiết trước hoặc tạo các mặt nạ tương ứng. Điều này giúp tiết kiệm thời gian khi làm việc trong phần mềm sau này. Ví dụ, hai hoạt ảnh dưới đây…

Trường hợp 1: Sử dụng Principle

! Làm thế nào để thực hiện cái này? Trước tiên, các loại slot game hãy nghĩ cách tách các phần tử: 1. Nội dung trang có thể dùng một hình ảnh duy nhất, nhưng đừng bao gồm thanh trạng thái và ba nút bên dưới vì theo GIF, chúng di chuyển độc lập với nội dung trang (thanh trạng thái luôn ở trên cùng và các nút phía dưới có đường đi riêng). Vì vậy, chúng ta cần chuẩn bị ba hình ảnh không có thanh trạng thái và ba nút phía dưới để làm nội dung trang: 2. Ba nút phía dưới rõ ràng có hành vi khác nhau, đặc biệt là nút quay lại, nên cần xuất riêng từng nút (dùng nền đen để dễ nhìn). 3. Xuất thanh trạng thái (dùng nền xám để dễ nhìn). 4. Mark phân trang Page (ba dòng dọc, vẽ đại qua loa, không cần hình ảnh). Khi đã phân chia và tổ chức các phần tử xong, việc nhập vào Principle sẽ rất dễ dàng. Chỉ cần bốn Board là đủ để hoàn thành hoạt ảnh này.

Trường hợp 2: Sử dụng AE

! Đối với trường hợp này, không cần phải lo lắng quá nhiều về việc tổ chức hình ảnh vì giao diện chính là 3D và có ánh sáng hào quang, điều mà bất kỳ phần mềm nguyên mẫu nào cũng không thể thực hiện được ngoài AE với camera 3D và Optical Flare. Điểm chính cần nói đến là hiệu ứng trong suốt (translucent) của Navigation Bar. Điều này không thể thực hiện được bằng cách xuất từ Sketch vì hiệu ứng Background Blur của Sketch chỉ áp dụng cho hình ảnh tĩnh tại thời điểm xuất. Nhưng trong AE, khi nội dung bên dưới Navigation Bar thay đổi, hiệu ứng trong suốt cũng cần thay đổi theo. Để tạo hiệu ứng translucent thực tế, sử dụng Layer điều chỉnh (Adjustment Layer): đặt nó ở trên cùng, thiết lập Mask cho toàn bộ kích thước của Navigation Bar, sau đó thêm Gaussian Blur. Lúc này, hiệu ứng translucent sẽ là màu trắng. Nếu muốn thêm màu sắc (tint color) cho translucent, hãy thêm một Layer hình dạng (Shape Layer) trên Layer điều chỉnh, chọn màu bạn muốn (ví dụ: đen), và thiết lập độ trong suốt khoảng 66%. Vậy là xong!