Mockups: Mã hóa vs Vẽ?

Đây không phải là về thiết kế web mà là về thiết kế giao diện nói chung. Tốt hơn là viết mã Giao diện Mockup hoặc "vẽ" chúng trong một chương trình đồ họa, như GIMP, Photoshop, v.v.?

Hãy tự hỏi mình những câu hỏi sau:

• Có bao nhiêu bố cục / tùy chọn UI bạn có thể khám phá trong 30 phút bằng cách mã hóa? Có bao nhiêu bạn có thể khám phá bằng cách phác thảo?

• Bạn có thường xuyên nhận được một thiết kế UI chính xác ngay lần thử đầu tiên không? Nếu không thường xuyên, làm thế nào nhanh chóng / dễ dàng để thay đổi một bản phác thảo so với một mockup được mã hóa?

• Bạn có thể xác định ngay một màu chỉ bằng cách nhìn vào mã hex / rgb của nó (không chỉ là phỏng đoán trên sân bóng, mà là màu / màu chính xác)? Khi bạn hình dung một màu trong tâm trí của bạn, bạn có thể dịch ngay lập tức sang hex không? Bạn có thể chọn sơ đồ màu nhanh như thế nào bằng cách nhập mã hex so với sử dụng bộ chọn màu thực?

Thực tế là bạn đang hỏi câu hỏi này cho tôi biết rằng bạn rất có thể là một lập trình viên, không phải là một nhà thiết kế, bằng cách đào tạo. Nếu bạn là một nhà thiết kế, thì sẽ vô lý như việc phát triển một ứng dụng mà không lập kế hoạch cấu trúc lớp, thiết kế cơ sở dữ liệu, kiến ​​trúc ứng dụng, v.v. và chỉ cần nhảy ngay vào mã hóa và nếu bạn là một nhà phát triển có kinh nghiệm, thì bạn biết đấy Những loại vấn đề loại phát triển từ dưới lên này gây ra.

Tương tự, nếu bạn chuyển thẳng sang mã mà không thực sự thiết kế giao diện người dùng của mình trước, thì kết quả sẽ không đẹp, nếu chỉ vì nó không thực tế để hoàn thiện một thiết kế tốt bằng cách mã hóa một cách mù quáng.

Tôi sẽ bỏ phiếu cho "bản vẽ" đầu tiên. Trong GUI, bố cục / trình bày phù hợp là chìa khóa và nó yêu cầu các phương tiện trực quan được thiết kế. Thiết kế GUI trực quan cho phép bạn nhanh chóng thay đổi thiết kế của mình mà không phải "tưởng tượng" từng thay đổi, "dịch nó thành mã" và cuối cùng kiểm tra nó. Một cách khác cũng có thể, nhưng hiếm khi tốt hơn (ví dụ: dự án cực kỳ nhỏ, giống như chỉ một vài nút và bạn đã quen và làm việc ở mức "mã"; trong khi thiết kế, một số mẫu có thể xuất hiện, có thể chỉ là tái sử dụng với sửa đổi nhỏ).

Nếu bạn đang thiết kế cho một bộ công cụ widget cụ thể, bạn cũng có thể sử dụng một số ứng dụng "Trình thiết kế GUI" nếu có. Nó sẽ tăng tốc quá trình thiết kế GUI hơn nữa, bởi vì cả hai đều cho thấy chính xác GUI được thiết kế sẽ trông như thế nào trong chương trình đang chạy và có thể xuất sẵn sàng để sử dụng mô tả GUI ở cấp độ hiện tại.

Đối với thiết kế UI tôi có ba giai đoạn với các mục tiêu khác nhau:

1. Phác thảo. Đầu tiên, bạn muốn có được ý tưởng cơ bản về những yếu tố sẽ có và cách chúng sẽ phù hợp với nhau. Bất kỳ chi tiết tốt hoặc sự hoàn hảo thẩm mỹ trong giai đoạn này là một sự xao lãng. Tôi sử dụng bảng trắng và bút xóa chất béo để không bị phân tâm bởi quá nhiều chi tiết và dễ dàng viết nguệch ngoạc vô số ý tưởng khác nhau và bắt đầu lại bất cứ lúc nào. Tôi đã nghe nói về những người chỉ phác thảo trên các ghi chú nhỏ sau đó hoặc chỉ sử dụng tay trái của họ (ví dụ: tay trái nếu bạn thuận tay phải) để buộc bản thân không chú ý đến thẩm mỹ và tập trung 100% về ý tưởng và chức năng. (hình ảnh không phải của tôi, từ Frank Prendegast )

2. (2!) Mô phỏng.Thứ hai, bạn muốn nhìn xuống và nhận phản hồi, tìm hiểu càng nhiều càng tốt về trực giác và phản ứng không được giải quyết của mọi người trước khi bạn bắt đầu công việc thực hiện tốn thời gian. Điều này sẽ là trong bất cứ điều gì bạn làm việc hiệu quả nhất vì nếu bạn làm đúng, bạn nên thường xuyên quay lại bảng vẽ, tìm kiếm những lời chỉ trích và nhắm đến việc xác định càng nhiều vấn đề bất ngờ càng sớm càng tốt. Nếu bạn là một cỗ máy mã hóa điên rồ và là thứ bạn làm việc thoải mái nhất, thì mã hóa vẫn ổn, nhưng hầu hết mọi người sẽ làm việc nhanh hơn trong một số thứ như Fireworks, Photoshop, phần mềm tạo khung chuyên dụng hoặc có thể là trình tạo giao diện điều khiển UI như Flash Catalyst (tốt nếu sản phẩm cuối không phải là Flash, mục tiêu là nhận được phản hồi tốt trước khi bạn bắt đầu triển khai).

3. (3!) Thực hiện. Cuối cùng, bạn thực hiện điều đó và nhằm mục đích thực hiện theo cách cho phép bạn nhận được nhiều phản hồi sớm hơn và thường xuyên.

Ba phần của chu trình dự án có các mục tiêu khác nhau, vì vậy nếu đó là một dự án lớn thì nên sử dụng công cụ phù hợp nhất cho công việc trong từng giai đoạn.

Câu hỏi này hơi mơ hồ và, như vậy, là câu trả lời.

Trên hết, các dự án sẽ thay đổi mạnh mẽ, cũng như các đội.

Điều đó nói rằng, không có "tốt nhất". Đó là về việc sử dụng tất cả các công cụ trong quy trình làm việc có ý nghĩa nhất đối với bạn và nhóm của bạn.

Nói chung, tôi muốn nói rằng đây là loại quy trình công việc bạn nên hướng tới:

1. Phác thảo. Bút chì + giấy. Bảng trắng. Lặp đi lặp lại. Làm việc với càng nhiều thành viên trong nhóm càng tốt.
2. mock-up thấp. Có thể là PSD, có thể là visio. Có thể là giấy. Người dùng kiểm tra những cái này.
3. Nhận xây dựng nguyên mẫu. Đây là nơi bạn muốn bắt đầu làm nhiều nhất có thể trong mã làm việc. Nhảy vào Photoshop khi bạn cần và lấy những thứ trong đó thành mã nhanh nhất có thể. Tiếp tục kiểm tra người dùng / lặp đi lặp lại.

Điều làm việc cho tôi là tạo ra các mô hình bằng cách sử dụng một chương trình nhấn mạnh không tạo bố cục hoàn hảo pixel. Đối với tôi đó là Balsamiq Mockups, bạn có thể xem tại http://www.balsamiq.com/products/mockups