Hiện đại hóa thiết kế Gradient

Gradient là công cụ quá quen thuộc với nhà thiết kế trong lĩnh vực giao diện phần mềm máy tính.

Chúng thường được sử dụng cho các color ramp (dốc màu), để shade (tô bóng) các đối tượng hoặc điều khiển các thông số phức tạp trong ứng dụng 3D. Có cảm giác như chúng luôn tồn tại và bất biến mặc cho thời thế đổi thay.

Tác giả: Matthaus Niedoba

Chú thích người dịch: Gradient được biết đến phổ biến là vùng chuyển màu, tuy nhiên trong phạm vi bài viết này, là công cụ tạo ra gradient trong phần mềm.


Khi thực hiện thiết kế cho Cinema 4D phiên bản R20, tôi đã có cơ hội tái thiết kế giao diện Gradient, để tương thích với hệ thống chất liệu mới. Trong bài viết này, tôi sẽ chia sẻ các cải tiến mà nhóm của mình đã tích hợp vào giao diện Gradient, và chúng hoàn toàn có thể được thực hiện cho bất kì ứng dụng đồ họa nào. Tôi hy vọng đây có thể là một nguồn cảm hứng cho các nhà thiết kế đã và đang xây dựng phần mềm chỉnh sửa đồ họa.

Gradient mới trong Cinema 4D R20

Gradient có thể được bổ sung các tính năng sau:

Kích cỡ có khả năng tùy biến

Với tình trạng độ phân giải màn hình tăng tiến liên tục và các yếu tố giao diện ngày càng nhỏ hơn, điều đó tuy cho phép chúng ta đặt nhiều chức năng hơn trên một màn hình duy nhất, nhưng khi khi các phần tử giao diện càng nhỏ, chúng càng trở nên khó click. Các tiện ích giao diện như công cụ chọn màu, curvesgradient phải được tinh chỉnh kĩ càng nên chúng cần kích cỡ phù hợp. Lý tưởng nhất là kích cỡ đó có thể được tùy biến thoải mái.

Các nhà thiết kế luôn ưa chuộng giao diện
có thể cá nhân hóa. Gradient cũng nên được thiết kế như vậy.

Lựa chọn và tùy chỉnh nhiều đối tượng

Một trong những vấn đề lớn nhất của Gradient hiện tại là việc di chuyển nhiều nút thắt (knot) vô cùng khó khăn. Thật phiền toái khi lúc bạn muốn di chuyển một đoạn gồm nhiều nút mà phải kéo từng nút riêng lẻ. Hãy tham khảo mục timeline (dòng thời gian, có sẵn trong các ứng dụng chỉnh sửa video hoặc hoạt ảnh), chúng ta có thể thấy rằng vấn đề này đã được giải quyết triệt để.

Các phần timeline thường chứa rất nhiều keyframe (khung hình chính). Để di chuyển nhiều keyframe, chương trình chỉnh sửa sẽ cho phép kéo hình chữ nhật để chọn nhiều vật thể cùng lúc và bước di chuyển tiếp theo trở nên hết sức dễ dàng. Chúng tôi áp dụng nguyên lý này cho Gradient. Ngoài ra, chúng tôi cũng thêm vào khả năng tăng lớn hay thu nhỏ các khoảng nút được chọn.

Các nhà thiết kế nay có thể chọn và di chuyển nhiều nút cùng lúc trong 1, 2 cái kéo-thả.
Việc kiểm soát hay sao chép các khoảng nút nay cũng dễ dàng hơn để tạo ra các pattern (mô thức).

Các lệnh sao chép và tinh chỉnh

Nút thắt giờ đây có thể dễ dàng được copy khi bạn sử dụng thao tác kéo thả và ấn nút hỗ trợ. Cùng với một loạt các lệnh, nhà thiết kế có thể nhanh chóng tạo ra nhiều pattern gradient khác nhau.

Nhờ vào tiện ích chỉnh sửa nhiều đối tượng cùng lúc,
nhà thiết kế có thể sao chép một loạt nút thắt.

Phóng to, thu nhỏ

Đôi khi các nhà thiết phải thực hiện các tinh chỉnh cho Gradient. Để đảm bảo độ chính xác, họ thường mở rộng giao diện của mình để Gradient có được nhiều không gian màn hình hơn. Ở đây một lần nữa, các timeline đã giải quyết vấn đề này một cách thông minh hơn. Chúng ta có thể phóng to các timeline để thực hiện việc điều chỉnh. Vậy thì tại sao không áp dụng điều này vào Gradient?

Nhà thiết kế có thể sử dụng nút cuộn để zoom.
Và bằng cách bấm vào dấu ngoặc để đưa gradient lại kích cỡ bình thường.

Các dấu hiệu hỗ trợ thị giác

Chu kỳ tương tác cho thấy dấu hiệu hỗ trợ thị giác là vô cùng cần thiết cho tương tác người dùng. Trong trường hợp của Gradient, chúng có tác dụng hướng dẫn và hỗ trợ nhà thiết kế đánh giá màu sắc. Các dấu hiệu hỗ trợ phải tinh tế và dễ nhận thấy. Trong các ứng dụng máy tính, hovering (việc di chuột vào một yếu tố mà không click vào nó) là một công cụ hữu hiệu để tích hợp dấu hiệu hỗ trợ. Nhà thiết kế đang ở chế độ “thăm dò” và có thể di chuột qua bất kỳ phần tử giao diện người dùng nào mà không sợ thực hiện lệnh sai. Các dấu hiệu hỗ trợ có thể là:

Nút thắt “ma”

Một nút thắt ảo hiện ra ngay nơi bạn sẽ chọn.

Hướng dẫn sử dụng

Khi chuột bất động, phần hướng dẫn sử dụng sẽ hiện ra để bạn
biết có thể sử dụng nút bổ trợ nào để sử dụng các tính năng.

Thay đổi màu sắc để nhấn mạnh

Khi lướt qua bạn sẽ biết ngay nút thắt nào có thể click được.

Con trỏ đa dạng

Các con trỏ khác nhau sẽ cho bạn biết bạn có thể thực hiện những hành động nào.

Nút thắt “3D” hơn

Bởi vì gradient thường được biểu thị dưới dạng 2D, chúng ta sẽ rất khó phân biệt khi các nút thắt đè lên nhau.
Dấu hiệu hỗ trợ thị giác mới sẽ giúp bạn làm điều này.

Vài lời kết

Cuối cùng, tôi muốn kết thúc với lời kết, người dùng có những kỳ vọng rõ ràng về những gì sẽ xảy ra khi tương tác với các giao diện như Gradient. Ngay cả khi nhận thấy mô hình Gradient hiện tại chưa phải là hoàn hảo, chúng tôi vẫn tiếp tục thực hiện mô hình tương tác này. Bỏi vì việc phát minh ra những cách thức tương tác mới có thể dẫn đến sự khó chịu từ người dùng.

Điều này cũng đúng đối với giao diện. Tuy thêm nhiều chức năng vào Gradient, chúng tôi luôn tránh tạo thêm bất kì nút nào để không làm rối giao diện. Tất cả các tính năng phải được sắp xếp một cách hợp lý.

Hãy tạo ra những phiên bản mẫu

Tất cả các tùy chọn này đều là kết tinh của một quá trình thử nghiệm. Rất nhiều phiên bản mẫu đã được tạo ra để giúp chúng tôi đánh giá xem ý tưởng có hiệu quả hay không. Việc tạo ra các phiên bản mẫu là hoàn toàn “đáng đồng tiền bát gạo” bởi bạn sẽ có được những kiến thức không thể ngờ tới.

Người dịch: Thanh Phạm
Nguồn: UX Collective

Hình trong bài (10)
Phạm Thanh Phạm ThanhWriter
an obsessive simpleton with a sense of humour