Làm thế nào để bạn trình bày webdesign tương tác?

Tính tương tác ngày càng trở nên nhiều hơn trong thiết kế của chúng tôi dành cho web, nhưng có ai tìm thấy một cách tốt để trình bày tính tương tác cho khách hàng không? Tôi chủ yếu nói về những hình ảnh động nhỏ như thế này:

• Di chuột vào nút
• Một hiệu ứng trên thanh điều hướng khi người dùng cuộn,
• Một yếu tố trên thiết kế di chuyển khi người dùng cuộn
• Một cửa sổ bật lên
• Một hộp thông tin xuất hiện khi người dùng nhấp / di chuột một phần tử
• ...

Tôi chưa tìm thấy một cách mà tôi thực sự thích. Tôi tò mò về cách các bạn làm điều đó.

Điều này thực sự phụ thuộc vào quy trình làm việc của bạn. Hãy nhớ rằng rất nhiều nhà thiết kế web ngày nay đã từ bỏ việc sử dụng bất kỳ phần mềm đồ họa nào và thiết kế trực tiếp trong trình duyệt của họ. Bằng cách đó, bạn trình bày các thiết kế của mình trong một trình duyệt, nơi chúng sẽ kết thúc. Xóa một súc tích.

Nếu bạn sử dụng các mockup tĩnh trong bất kỳ phần nào trong quy trình làm việc của mình, bạn luôn có thể tạo một mockup động nhỏ trong trình duyệt chỉ để hiển thị các phần tương tác bạn đang lên kế hoạch.

Tùy chọn tôi thường thực hiện là trình bày các yếu tố tương tác trong thiết kế web của mình ở giai đoạn sau hơn là thiết kế hình ảnh tĩnh. Khi thiết kế tĩnh được thỏa thuận, tôi bắt đầu mã hóa và sử dụng trang web xem trước để trình bày các phần tương tác của thiết kế. Với đầu vào của khách hàng, trang web xem trước đó nhanh chóng phát triển thành sản phẩm thực tế.

Câu hỏi của bạn là tại sao tôi đề xuất mã hóa trong trình duyệt (tham khảo: các bước trong thiết kế trang web là gì? ). Cách tốt nhất để hiển thị tính tương tác trong một trang web, ứng dụng hoặc bất cứ thứ gì là phương tiện được sử dụng. Tôi không nói rằng hoàn toàn phát triển trang web và phân phối nó. Điều tôi đang nói là bạn có thể cung cấp các giai đoạn trong quy trình thiết kế / phát triển:

• Phác thảo đơn giản (thủ công) bằng giấy hoặc dạng PDF thường được gọi là động não. Một số công ty và cá nhân nghiêm túc sẽ có bảng xóa khô 4 'x 8' được phủ bằng các bản phác thảo về cách hiển thị một ứng dụng.

• mockup mã hóa màu đen và trắng của trang web để thử nghiệm thiết bị và bản demo cho khách hàng nếu trong giá thầu. Tôi thường sử dụng Bacon Ipsum (không thích tham chiếu thịt xông khói " Thay thế cho Lorem Ipsum (văn bản giả) cho các trang web ") làm nội dung giả của tôi và nếu cần một hình ảnh, tôi sẽ đặt một hình ảnh mô phỏng có hình ảnh.
• Nếu thử nghiệm thiết bị hoàn tất, tôi sẽ chuyển sang các tương tác và hiệu ứng nếu chúng được yêu cầu cụ thể trong dự án.
• Thêm màu sắc, độ dốc và độ sâu cho trang web.

Tôi sẽ đề nghị trong thiết kế tương tác đừng phạm sai lầm bạn tìm thấy trong nhiều "chủ đề" trong đó mọi thứ đều hoạt hình. Đối với tôi, điều đó trở nên khó khăn và lấy đi ý nghĩa của trang web và nội dung của nó. Tôi sẽ đề nghị sử dụng hình ảnh động trên các khu vực chính cần nổi bật hoặc cần hiển thị nhiều hơn một nội dung có thể phân phối.

Nếu bạn tò mò về cách lưu trữ này, tôi sẽ hy vọng nếu bạn đang thiết kế web, bạn có trang web của riêng mình và tôi sẽ thực hiện một tên miền phụ không áp dụng theo dõi.

Nếu bản trình bày của bạn là một tài liệu in, cá nhân tôi vẽ một khung dây hoặc đề xuất thiết kế cuối và chú thích nó với các bình luận và giải thích. và tôi trình bày tất cả các tương tác có thể như vậy - ví dụ.

• ví dụ, nếu bạn có một menu thả xuống hoặc một menu lớn trong thanh điều hướng trên cùng, tôi kết xuất một tệp có thanh điều hướng với một mục menu đã mở.
• nếu có một kịch bản mở một bảng điều khiển, tôi chỉ hiển thị tất cả các bước nếu cần thiết.
• đôi khi tôi chú thích thiết kế / khung dây của tôi với một tham chiếu URL mẫu trực tuyến.
• bất kỳ yếu tố trang web nào xuất hiện cho người dùng dưới dạng một chiếc lá, tôi kết xuất nó theo thiết kế của mình.

nhưng nếu bài thuyết trình của bạn là một bài thuyết trình trực quan, tôi sẽ làm bất cứ điều gì tôi thích bằng cách sử dụng hoạt hình, chuyển tiếp, âm thanh, video ... vv. để hiển thị khái niệm bằng một trong các phần mềm thuyết trình. và phương pháp này là đáng để làm. khi bạn chỉ cho khách hàng tất cả các tương tác có thể theo một cách hấp dẫn và đừng lo lắng giữ một bản sao thiết kế của bạn trong tay anh ấy - nếu bạn hiểu ý tôi muốn nói gì;)

Dường như có xu hướng gần đây về việc tạo GIF động của các tương tác UI ( một tìm kiếm nhanh trên Dribbble sẽ tiết lộ nhiều hơn). Tôi tưởng tượng rất nhiều trong số đó được kết hợp với nhau bằng After Effects. InVision gần đây đã đăng một bài viết phác thảo cách họ làm kênh này.

Mặc dù tôi có thể hiểu được sự hấp dẫn của các loại sản phẩm này (chúng là đồng nghiệp, chúng trông rất ấn tượng và chúng có thể dễ dàng vận chuyển), chúng tấn công tôi như một vấn đề cố hữu trên một số mặt trận:

1. Họ thiết lập những kỳ vọng không chính xác từ quan điểm của khách hàng - AE cho phép bạn thêm tất cả các loại hiệu ứng hình ảnh có thể không thực sự khả thi khi được dịch sang CSS
2. Chúng không phản hồi - cả về ý nghĩa truy vấn phương tiện và thực tế là người dùng không có tương tác với họ. Khách hàng thực sự không thể thử các hành động di chuột, họ chỉ thụ động quan sát chúng.
3. Chúng đòi hỏi nhiều công việc hơn - tại một số điểm trong dự án, các hình ảnh động và tương tác này phải được dịch sang CSS. Tại sao phải đầu tư nhiều thời gian để tạo hiệu ứng cho các yếu tố này trong một phương tiện khi bạn chỉ đơn giản là gạt tất cả sang một bên và thực hiện nó trong CSS

Tôi muốn giới thiệu - và sử dụng - hai cách tiếp cận khác nhau:

Thứ nhất, sử dụng nguyên mẫu giấy cho các tương tác cấp cao và các mối quan hệ nội dung. Điều này cho phép khách hàng hình thành một mô hình tinh thần khá sớm trong dự án. Tôi ủng hộ các nguyên mẫu giấy hơn bất kỳ khuôn mẫu hoặc bộ dụng cụ tạo mẫu nào có sẵn (a la Bootstrap). Mặc dù những điều này được cho là tối thiểu nhưng tôi thấy chúng vẫn có quá nhiều tác động trực quan và có thể khiến khách hàng mất tập trung khi nghĩ rằng đó là sản phẩm cuối cùng thực sự sẽ trông như thế nào. Điều này ít có khả năng khi bạn đang sử dụng bút và giấy phác thảo.

Để có các tương tác chi tiết hơn (nghe giống như những gì bạn quan tâm), chúng tôi sử dụng các kiểu kiểu , một trang đơn giản có một loạt các thành phần khác nhau. Những điều tuyệt vời về những điều này là:

1. Máy khách xem chúng trong trình duyệt, vì vậy có thể kiểm tra sự tương tác, xem nó có phản hồi không
2. CSS tương tự sau đó được sử dụng trong sản phẩm / trang web cuối cùng
3. CSS có thể được ghi lại kỹ lưỡng trong suốt quá trình xây dựng, có thể hướng tới việc phát triển một hướng dẫn phong cách.

Nó hoạt động tốt cho chúng tôi, chúng tôi có thể lặp lại khá nhanh. Tất nhiên, điều này phụ thuộc vào việc có một quy trình công việc khá mạnh mẽ, mà chúng tôi đã dành khá nhiều thời gian để phát triển, nhưng chúng tôi xem đó là một khoản đầu tư đang diễn ra, vì mỗi dự án tiếp theo sẽ ngày càng nhanh hơn.

Có nhiều ứng dụng khác nhau để làm việc này. Có một số cái tốt miễn phí nhưng trong một số trường hợp chúng bị giới hạn ở chức năng mà bạn có thể chứng minh cho khách hàng của mình. Invision là tuyệt vời và miễn phí nhưng có nhiều chức năng cho các thiết bị di động hơn so với các thiết bị máy tính để bàn. Nó cho phép bạn gửi một liên kết đến khách hàng và cho phép họ đưa ra nhận xét và gửi lại. Một lời cảnh báo với những kẻ này. Hãy chắc chắn rằng ứng dụng sẽ làm mọi thứ bạn cần trước khi bạn lao vào.

Có những ứng dụng khác hiện có cho phép toàn bộ chức năng nhưng bạn phải trả tiền cho chúng. Theo tôi, rất đáng đồng tiền vì bạn có thể tìm ra chức năng trước khi bắt đầu viết mã.

Chúng tôi sử dụng Axure tại nơi làm việc trước khi bắt đầu bất kỳ thiết kế hoặc mã nào. Ứng dụng này là một công cụ đóng khung dây tương tác tuyệt vời Bạn có thể xây dựng một ứng dụng đầy đủ với logic đi kèm. Nó cho phép bạn có được ứng dụng / trang web đầy đủ được xây dựng trước khi thiết kế hoặc mã hóa. Nó cũng có một nút sẽ khởi chạy vào chế độ demo nơi bạn có thể trình bày thiết kế của mình. Ứng dụng này là một yêu thích của các nhà thiết kế UX.

Và đề nghị cuối cùng của tôi là Indesign. Indesign sẽ cho phép bạn xây dựng bản demo trang web làm việc chính thức với các tệp thiết kế của bạn. Bạn có thể giới thiệu trạng thái cuộn qua và nhấp qua các trang khác trong tài liệu của mình.

Hy vọng những sự giúp đỡ này. Chúng tôi sử dụng tất cả các phương pháp này tại nơi làm việc tùy thuộc vào thời gian và ngân sách chúng tôi có cho dự án mà chúng tôi đang thực hiện.

Tôi thích xây dựng các tương tác và trình bày chúng trong trình duyệt. Trước khi có thể cho họ thấy điều đó, chúng tôi thường chú thích các tương tác nhưng không cố gắng sao chép chúng bên ngoài mã web. Khi bạn cố gắng sao chép các tương tác bên ngoài mã web (Sau hiệu ứng, GIF hoạt hình, Axure, v.v.), bạn có nguy cơ thiết kế xung quanh phần mềm cụ thể đó thay vì mã thực tế sẽ được sử dụng trong sản phẩm thực.

Tôi thường sử dụng html / css và javascript để hiển thị các tương tác phức tạp nhưng nếu thay đổi đơn giản thì tôi hiển thị các trạng thái khác nhau trong lớp comps (và sử dụng biểu tượng con trỏ quá cỡ) để hiển thị các trạng thái khác nhau.

1. Trạng thái ban đầu
2. Hiển thị biểu tượng chuột và chú thích nếu cần thiết
3. Hiển thị thay đổi trạng thái ...

Điều đó phụ thuộc vào những gì bạn đang trình bày.

Nếu bạn đang trình bày hoạt hình và trải nghiệm ở mức độ thấp, thì bạn phải thực hiện nó trong phương tiện của sản phẩm cuối cùng. Bất cứ điều gì khác là một xấp xỉ kém hoặc không thể thực hiện được. Bạn sẽ không bao giờ trình bày cách một tờ giấy sẽ gấp hoặc cảm giác của nó trên tay hoặc mùi hương tinh tế của nó trên màn hình, tại sao bạn lại cố gắng trình bày cách một nút làm hiệu ứng di chuột trên giấy?

Nếu bạn đang trình bày sự tương tác ở mức độ cao giữa người dùng và các thành phần, bạn không thể xây dựng chúng một cách khả thi mà không mất một lượng lớn thời gian để xây dựng nó, vì vậy bạn cần có một vị trí. tạo ấn tượng sai rằng bạn sắp hoàn thành hoặc bạn đã đặt các chi tiết cấp thấp thực sự không phải là chủ đề chính cho bản trình bày hiện tại , đó là tương tác cấp cao. Một bản trình bày sơ sài sẽ truyền đạt tổng quan cấp cao mà không áp đảo khách hàng với các chi tiết.

Một điều quan trọng nữa là khi bạn trình bày chi tiết hoạt hình ở mức độ thấp là bạn nên đặt chúng trong bối cảnh chúng được sử dụng. Vì vậy, nếu bạn đang trình bày một thanh menu, hãy đóng khung chúng với các trang còn lại, khi trình bày một hiệu ứng di chuột, trình bày chúng khi chúng sẽ được sử dụng trong một hình thức. Cẩn thận để khử các yếu tố theo ngữ cảnh đó để mọi người có thể tập trung vào điểm hiện tại (ví dụ: tắt tiếng, sử dụng hình ảnh chung, trung tính, sử dụng văn bản lorem ipsum, v.v.).

Trình bày những hình ảnh động này trong phương tiện cuối cùng cũng sẽ cho phép bạn thực hiện nghiên cứu khả thi cùng một lúc. Không có gì tệ hơn là hứa hẹn một thiết kế tuyệt vời mà khách hàng của bạn chỉ YÊU trong After Effects, chỉ để cuối cùng không thực sự có thể cung cấp chúng vì chúng chỉ là không thể trong phương tiện.