100DaysUI - 002: Cách tạo nguyên mẫu Tương tác widget xếp hạng theo nguyên tắc

Có giao diện người dùng tối cho web Audible

UI rê bóng tối

100 ngày

mỗi ngày tôi sẽ thiết kế một giao diện mới dưới hai giờ và giải thích ý tưởng đằng sau nó, hoặc dạy cho bạn những gì tôi học được khi thiết kế nó và liệt kê các vấn đề tôi gặp phải để có thể ai đó có thể chia sẻ câu trả lời.

Ngày 2 - Trình phát web tối âm và đánh giá Widget bằng Trình điều khiển nguyên tắc

Ý tưởng rất đơn giản, tôi yêu Audible, võng mạc của tôi bị đốt cháy từ nhiều năm giao diện người dùng ánh sáng và tôi đã rất muốn thử một trong những tiện ích xếp hạng tuyệt vời dựa trên hiệu ứng kéo. Do đó thiết kế này

một số thứ chỉ dễ dàng hơn với mã

Vậy đây là cách tạo widget này trong Nguyên tắc:

Phần 1 - Thiết kế & chuẩn bị

1. trong Phác thảo hoặc Figma, thiết kế tiện ích xếp hạng của bạn bằng cách tạo tất cả các yếu tố bắt buộc:

  • 5 biểu tượng cảm xúc (hoặc bất cứ điều gì bạn thích) cho năm xếp hạng có thể (ngáp, umm, tốt, tuyệt vời, trong tình yêu) và đặt chúng lên nhau.

→ Tên thứ tự & lớp không quan trọng trong tương tác này vì tất cả các biểu tượng cảm xúc khác sẽ bị ẩn nhưng mỗi tên trong mỗi trường hợp và chúng tôi sẽ làm việc bên trong một bản vẽ. Nhưng nó sẽ dễ dàng hơn để làm việc với một tập tin có tổ chức. Cuộc gọi của bạn.

  • 5 mô tả văn bản cho mỗi tiểu bang. Cũng được đặt lên nhau.
  • thanh đánh giá (hình chữ nhật cong nền & 5 điền). Nguyên lý tỷ lệ chiều rộng từ trung tâm để điền sẽ tiếp tục nhảy sang trái khi chúng ta di chuyển tay cầm. Chỉ cần tạo năm thay thế, nó dễ dàng hơn.
  • đánh giá nền hộp.

2. Đặt nó ở trạng thái ban đầu (ngáp) bằng cách hạ thấp độ mờ của tất cả các biểu tượng cảm xúc và mô tả văn bản xuống 0% ngoại trừ các biểu tượng cho trạng thái đó.

3. Nhập bản vẽ vào Nguyên tắc.

4. Về nguyên tắc, nhấp vào tay cầm mà bạn sẽ kéo để thay đổi xếp hạng và làm cho nó có thể kéo theo chiều ngang.

kiểm tra ảnh chụp màn hình bên dưới để xem làm thế nào để làm điều đó.

Phần 2 - Thiết kế tương tác

  1. với lớp xử lý vẫn được chọn, hãy nhấp vào Trình điều khiển trên đầu.

chúng tôi sẽ thay đổi minh họa xếp hạng & văn bản được hiển thị dựa trên vị trí nằm ngang của tay cầm.

2. chọn tất cả các biểu tượng cảm xúc và các lớp văn bản trừ ngáp + tất cả các thanh xếp hạng điền ngoại trừ màu đỏ và tạo khung hình chính trong đó tất cả chúng đều có độ mờ 0%.

2. Di chuyển tay cầm theo chiều dài của màu cam và thêm khóa một khung hình chính trong đó:

  • độ mờ đục của YAWN và văn bản của nó là 0%.
  • độ mờ đục của trạng thái UMM và văn bản của nó là 100%.
  • độ mờ đục của màu cam là 100% và màu đỏ là 0%.

VẤN ĐỀ

nếu bạn thử điều này, bạn sẽ thấy độ mờ đục của hai trạng thái đầu tiên sẽ thay đổi cùng một lúc trong khi bạn di chuyển tay cầm tạo ra kết quả không phù hợp này:

có những điểm mà người dùng sẽ có trạng thái ở giữa

Điều này là do nó tương tự: các lớp được tạo hình động giữa hai điểm cho đến khi chúng đạt đến trạng thái trong khung hình chính tiếp theo. Chúng tôi cần một công tắc kỹ thuật số; một cách để bật / tắt một trạng thái nhất định tại một điểm đang chuyển động để người dùng sẽ chỉ nhìn thấy một trạng thái rõ ràng tại mỗi điểm. Tôi không chắc chắn rằng không có cách nào tốt hơn, nhưng đây là cách tôi giải quyết vấn đề này.

3. Tại điểm CHỈ trước khung chính, tạo một khung hình chính khác có cùng độ mờ như khung hình chính trước đó cho biểu tượng cảm xúc & lớp văn bản được đề cập. Điều này nói lên nguyên tắc rằng cho đến thời điểm này, chỉ thay đổi màu sắc & độ dài của lớp tô. Giữ biểu tượng cảm xúc và văn bản.

4. Ngay sau đó, tạo khung hình chính với trạng thái tiếp theo. Như thế này:

5. Lặp lại điều đó cho tất cả các trạng thái tiếp theo và bạn sẽ có một tiện ích hoạt động như trạng thái bên dưới :)

Tôi hy vọng bạn thích hướng dẫn này!

  1. Có ý kiến ​​gì không? những điều bạn biết một cách tốt hơn để làm gì?

2. Tôi không bao giờ đánh giá các nhà thiết kế của Amazon, tôi chỉ đang mơ mộng ở đây. Rất nhiều sự tôn trọng với họ và những nỗ lực tuyệt vời của họ!

3. Emjois là bởi Roundicons.

4. Tìm hiểu về trình điều khiển nguyên tắc ở đây.