it-swarm-vi.tech

Ưu / nhược điểm của mockup PSD so với mockup HTML

Tôi đã đọc một số bài viết ( bài nàybài này ) gần đây đang mở mắt cho các mô hình HTML trái ngược với các mô hình PSD thông thường.

Trong bài viết họ trích dẫn một số ưu điểm:

  • Thay đổi nhanh hơn rất nhiều (bao gồm thay đổi màu sắc và ở một mức độ nào đó đối với phông chữ).
  • Khi bạn đặt trang dưới dạng HTML, bạn đang hiển thị cho khách hàng một cái gì đó gần hơn với sản phẩm cuối cùng sẽ trông như thế nào.
  • Họ có thể thấy tác động của bố cục chất lỏng bằng cách thay đổi kích thước của cửa sổ.

Nhược điểm:

  • Không phải tất cả các nhà thiết kế hình ảnh có thể tạo ra một mockup trong HTML. Nó sẽ phải là một nhiệm vụ hai người. Một người HTML và một người Photoshop.

Các bạn thấy điều gì là ưu/nhược điểm của một trong hai cách tiếp cận?

24
milesmeow

Nếu bạn đang xây dựng một trang web hoặc ứng dụng, các mockup HTML vượt trội hơn nhiều vì bạn đang thiết kế mockup ở định dạng càng gần với sản phẩm cuối cùng càng tốt. Điều này cho phép bạn đặt kỳ vọng dễ dàng hơn nhiều, nó ràng buộc bạn chỉ là những gì có thể có trong sản phẩm cuối cùng và nó mang lại sự linh hoạt cao hơn nhiều.

Quy ước này đang dần được gọi là "thiết kế trong trình duyệt". Thiết kế trong trình duyệt phá vỡ phương pháp thác nước bằng chính bản chất của nó. Photoshop mockup giới thiệu một rào cản giữa nhà thiết kế hình ảnh và nhà thiết kế tương tác/UX: người làm việc trong Photoshop có thể ở xa, suy nghĩ hoàn toàn về độ trung thực của hình ảnh, mà không xem xét sản phẩm cuối cùng và các ràng buộc đi kèm của trình duyệt. Khi mockup photoshop đã sẵn sàng, nó sẽ được "tung" lên đội UX để chuyển sang giai đoạn tiếp theo. Điều này không thúc đẩy một quá trình lặp đi lặp lại, theo định hướng phản hồi.

Tôi đã viết một bài đăng trên blog vài tháng trước về triết lý này, mà chúng tôi đã sử dụng để xây dựng công cụ tạo mẫu của chúng tôi. Dưới đây là một số bài viết tôi đã tham khảo ở đó có thể hữu ích (bao gồm cả bài viết của Megan Fisher mà bạn đã liên kết):

Các nhà thiết kế và phát triển khác đồng ý với anh ta:

  • 37signals xông Tại sao chúng ta bỏ qua Photoshop giải thích quy trình của họ: Photoshop mockups aren tương tác; họ không cho bạn cảm nhận về dòng chảy của ứng dụng; họ khuyến khích bạn tập trung vào chi tiết quá sớm.
  • Bài viết của Meagan Fisher Waste 24ways.org Make Mockup in Markup nói thêm về các nguyên tắc của Clarke và giải thích cách bắt đầu với cấu trúc HTML cho phép các nhà thiết kế lặp lại nhanh chóng trên nhiều bố cục trang.
  • Những 12 mẹo để thiết kế trong trình duyệt tại Design Shack cũng cung cấp một số thông tin chi tiết tốt.
18
Rahul

Đó là một vấn đề trung thực.

Điều hấp dẫn là một trong hai tài liệu có thể có độ trung thực cao hơn tài liệu kia tùy thuộc vào những gì bạn đang tập trung vào.

Một nguyên mẫu HTML thực sự là cách duy nhất để thực sự giả lập bất kỳ sự tương tác nào với độ phức tạp vừa phải. Đơn giản là không có cách nào để ghi lại đầy đủ thiết kế tương tác trong tệp PSD.

Ngược lại, nếu bạn ở trong môi trường mà thiết kế hình ảnh liên tục được điều chỉnh/cải tiến/lặp đi lặp lại, PSD có thể là 'tài liệu ghi chép' tốt hơn để xử lý các yếu tố thiết kế hình ảnh.

Cuối cùng, tôi không nghĩ rằng nó thuộc về PSD so với HTML. Bạn cần cả hai với số lượng khác nhau tùy thuộc vào chi tiết cụ thể về nhu cầu của bạn trên cơ sở thành viên của dự án và nhóm.

13
DA01

Một nhược điểm tiềm năng của việc sử dụng các mockup HTML là khách hàng có thể nghĩ rằng bạn đã hoàn thành ứng dụng - ngay cả khi bạn đã nói với họ nó là gì.

Nghiêm túc mà nói, tôi đã biết mọi người - cả khách hàng và người quản lý - những người khi nhìn thấy một mockup sử dụng các công cụ bạn thường sử dụng để xây dựng sản phẩm thực tế nghĩ rằng bạn đã hoàn thành phần lớn công việc và ngạc nhiên khi bạn nói rằng sẽ mất thêm 6 tuần (hoặc tuy nhiên dài) để thực sự làm việc.

Loại bỏ các mockup một bước có thể giúp xua tan sự hiểu lầm này.

Tuy nhiên, đã nói rằng một mockup động sẽ cho phép bạn và khách hàng hiểu rõ hơn về cách hệ thống hoạt động và cách bạn điều hướng qua ứng dụng.

7
ChrisF

Đây không phải là công việc của nhà thiết kế hình ảnh để chuẩn bị các mô hình tương tác, mà là công việc của nhà thiết kế UI/UX. Đúng - thường thì họ là một và giống nhau, chủ yếu là vì lý do ngân sách, nhưng công việc của họ rất khác nhau.

Trên thực tế, câu hỏi của bạn có thể được đánh giá lại là Tĩnh so với Động mockup.

Theo tôi, mockup động là gần như luôn vượt trội so với tĩnh:

Lý do chính theo ý kiến ​​của tôi là chúng có thể được sử dụng để kiểm tra khả năng sử dụng chính xác - tưởng tượng bạn đang làm gì đó rất khác so với thực tế, nhận ra thời gian, số lần nhấp, chuyển động, v.v. cảm nhận thực sự của dòng chảy trong hệ thống.

Tuy nhiên, không có gì là không có giá - việc tạo ra một mockup năng động thường đòi hỏi nhiều thời gian hơn. Hơn nữa, nó tạo ra kỳ vọng cao hơn với khách hàng - nếu bạn nhấn một nút và nó làm gì đó trong hệ thống, bạn sẽ mong tất cả các nút thực hiện giống nhau (và một số có thể ít liên quan đến kịch bản chính).

Với một mockup tĩnh, việc hướng dẫn khách hàng cũng có thể dễ dàng hơn và nhà phát triển thông qua các trường hợp sử dụng - bạn chỉ cần hiển thị từng màn hình theo thứ tự "chính xác", đảm bảo tất cả các trường hợp sử dụng đều được bảo vệ như bạn dự định Mặc dù sử dụng động lực có thể mang lại cho người dùng sự tự do "quá nhiều", khiến họ bỏ lỡ các trường hợp sử dụng chính, v.v.

BTW - bạn không phải là một lập trình viên để tạo các mockup html. Có rất nhiều công cụ (ví dụ Axure, Balsamic, Flair Builder và nhiều công cụ khác) cho phép tạo ra các mockup như vậy bởi những người không lập trình.

5
Dan Barak

Với sự phổ biến ngày càng tăng của thiết kế đáp ứng, nó thậm chí còn có ý nghĩa hơn nữa sử dụng một mô hình động (HTML có thể đoán được). Khi thiết kế bố cục thô ban đầu, tôi thấy mình liên tục thay đổi kích thước trình duyệt để xem cách bố trí hoạt động ở nhiều độ rộng.

Để cố gắng chỉ định một thiết kế đáp ứng với một hình ảnh tĩnh là không thể, và để thể hiện nó với nhiều hình ảnh tĩnh là tốn thời gian và quá phức tạp.

2
obelia

Câu trả lời giai thoại

Gần đây tôi đã làm việc trên một trang web nơi mẫu chính được thiết kế bằng Photoshop (mà tôi sẽ gọi là "PS"), nhưng các phần riêng lẻ của trang web vẫn cần được thiết kế. Tôi đã làm việc trên một số phần với một số yêu cầu UI không chuẩn và tôi phải quyết định xem tôi sẽ giả lập chúng trong Photoshop hay chỉ thực hiện chúng với HTML/CSS. Tôi đã chọn cái thứ hai và được RẤT cảm ơn vì điều đó.

Tôi thực sự bắt đầu bằng cách đánh dấu nội dung trang và các yếu tố điều hướng trong HTML. Khi tôi đã có nó, tôi chỉ bắt đầu chơi với CSS và xem những gì đã hoạt động. Tôi đã có thể rất nhanh chóng tạo ra một số bố cục hoàn toàn khác nhau và thực sự kiểm tra chúng trong trình duyệt ngay lập tức. Có một số tùy chọn mà tôi biết sẽ không hoạt động gần như ngay lập tức và có thể từ bỏ chúng nhanh chóng (nơi tôi thường hoàn thành thiết kế trong PS). Tôi cũng có thể thêm các yếu tố tương tác (hiển thị/ẩn/vv) mà không thể có trong Photoshop.

Có một số thứ chỉ cần đi cách nhanh hơn trong HTML so với PS, ví dụ như bảng. Phải mất một số nỗ lực thực sự để thiết kế trực quan các bảng trong PS với nội dung văn bản thay đổi bên trong các ô và tiêu đề. Nó là siêu nhanh trong HTML và bạn thực sự thấy nó sẽ thực sự trông như thế nào.

Tất nhiên điều này chỉ đưa bạn đến nay vì bạn không thể làm mọi thứ với CSS. Thỉnh thoảng tôi sẽ quay lại Photoshop và tạo ra một hình ảnh như vậy cho một phần cụ thể, nhưng đối với hầu hết các phần tôi đã ngạc nhiên khi thấy tôi có thể làm được bao nhiêu với CSS.

Tôi lấy

Tôi vẫn sẽ tiếp nhận điều này trong từng trường hợp. Nhưng tôi chắc chắn sẽ nghiêng về các mockup HTML trong tương lai.

2
jessegavin

Nếu tôi đúng, tôi tin VB ban đầu được viết như một cách nhanh chóng đánh bại một số mockup ... Với suy nghĩ đó, tôi có thể nói rằng câu trả lời "đúng" có lẽ là để đi vào con đường của mockup HTML.

Tuy nhiên, tôi đang trong quá trình tạo các mockup cho một sản phẩm mới khi tôi gõ, và thật lòng mà nói, tôi không tin rằng những nỗ lực liên quan đến việc tạo ra các mockup html trông giống như chúng ở định dạng PSD, là đáng giá. Để một chút văn bản, hoặc một hình ảnh, hoặc vv, xuất hiện chính xác nơi bạn muốn, với thiết kế bố cục phức tạp sẽ khiến một nhà phát triển web mất nhiều thời gian hơn so với một nghệ sĩ photoshop có trình độ kỹ năng tương tự.

Ngoài ra, nếu bạn sẽ làm nhiều hơn văn bản và thiết kế cơ bản, có lẽ bạn sẽ sử dụng Photoshop (hoặc các gói đồ họa tương tự) để thực hiện công việc thiết kế đó - tại sao phải làm phiền vấn đề?

Cấp, nếu có bằng chứng thực sự cho việc sử dụng các mockup tương tác (ví dụ: một nhóm người dùng lớn để chứng minh cách bạn nghĩ một số màn hình tương tác cụ thể sẽ hoạt động), thì nỗ lực thêm là đáng giá.

Nhưng nếu bạn chỉ cho khách hàng thấy bạn nghĩ một số cửa sổ của ứng dụng sẽ như thế nào, tôi không nghĩ rằng sự biện minh cho nỗ lực thêm là ở đó?

1
Sk93