Lợi nhuận:
- Khả năng chuyển đổi mục đích màn hình và mức độ ưu tiên của nội dung thành một bản tóm tắt rõ ràng và tạo ra các bản nháp và biến thể wireframe bằng trí tuệ nhân tạo
- Khả năng đánh giá nhanh đầu ra của các công cụ tạo giao diện từ văn bản và sàng lọc chúng theo nguyên tắc thiết kế
- Khả năng phát triển wireframe AI chú ý đến nội dung thực, trường hợp phức tạp và khả năng truy cập
Wireframe là bộ xương cấp độ hộp của màn hình, được loại bỏ các chi tiết về màu sắc, hình ảnh và thương hiệu. Mục đích của nó rất đơn giản: để nhanh chóng kiểm tra mức độ ưu tiên, vị trí và luồng nội dung; giải quyết câu hỏi “cái gì, ở đâu, tại sao ở đây” mà không đi sâu vào thẩm mỹ. Thiết kế có độ chân thực thấp cũng mô tả giai đoạn phác thảo thô đầu tiên này. Trí tuệ nhân tạo tăng tốc đáng kể bước này: các công cụ tạo wireframe từ văn bản tạo đường viền màn hình từ yêu cầu một câu. Nhưng tốc độ này cũng gây ra quan niệm sai lầm rằng “đầu ra đầu tiên là thiết kế cuối cùng”. Đơn vị này dạy cách tạo wireframe AI một cách thông minh và hoàn thiện một cách nghiêm túc.
Đầu tiên là tóm tắt, sau đó là sản xuất
Hầu hết các wireframe tồi đều xuất phát từ một bản tóm tắt tồi. Nếu bạn yêu cầu AI "tạo màn hình đăng nhập", bạn sẽ nhận được một mẫu chung. Một bản tóm tắt wireframe mạnh mẽ bao gồm:
- Mục đích của màn hình: Tại sao người dùng đến màn hình này, họ được lợi gì từ nó?
- Ưu tiên nội dung: Ba yếu tố quan trọng nhất là gì? Mắt người dùng nên rơi vào đâu đầu tiên?
- Bối cảnh: Thiết bị (di động/máy tính để bàn), tâm trạng hiện tại của người dùng, màn hình trước đó.
- Hạn chế: Các yếu tố bắt buộc (tuyên bố từ chối trách nhiệm, yếu tố thương hiệu), giới hạn khoảng trắng.
- Yêu cầu biến thể: Bạn muốn xem bao nhiêu bố cục khác nhau.
Khi bạn đưa ra bản tóm tắt này, mô hình sẽ đưa ra các lựa chọn khác nhau giúp bạn đưa ra quyết định; Nếu bản tóm tắt yếu, tất cả chúng sẽ giống nhau và vô dụng.
Mẹo: Yêu cầu AI không phải về một wireframe “hoàn hảo”, mà là 3 cách tiếp cận khác nhau rõ ràng (ví dụ: “một nặng về danh sách, một nặng về hình ảnh, một tập trung vào một hành động”). Sự đa dạng của các lựa chọn sẽ mở ra điểm mù của bạn.
Vị trí thực tế của các công cụ tạo giao diện từ văn bản
Trong những năm gần đây, các công cụ hứa hẹn "viết nó và giao diện xuất hiện" đã trở nên phổ biến. Những điều này tạo ra một bản nháp khởi đầu thực sự nhanh chóng. Nhưng nếu bạn không biết giới hạn của nó, nó sẽ đánh lừa bạn:
- Chưa được thử nghiệm với nội dung thực tế: Văn bản mẫu luôn có độ dài lý tưởng; Nếu tiêu đề thực tế bị tràn, bố cục có thể bị gián đoạn.
- Không có trường hợp biên: Danh sách trống, tên dài, trường hợp lỗi thường không được rút ra.
- Khả năng truy cập không phải là mặc định: Độ tương phản, vùng cảm ứng, thứ tự đọc thường không được kiểm soát.
- Nó thờ ơ với mô hình tinh thần: mô hình tạo ra "giao diện trung bình", không phải thói quen của người dùng của bạn.
Thái độ đúng: coi đầu ra là bản phác thảo ban đầu, không phải là thiết kế cuối cùng. Điều tạo nên một wireframe "tốt" là nó đã được thử nghiệm với nội dung thực, trường hợp đặc biệt và khả năng truy cập.
Sân khấu
Đầu ra AI
Kỳ hạn bạn đã thêm
đơn hàng đầu tiên
Bộ xương dạng hộp
Sửa lỗi dựa trên mức độ ưu tiên nội dung
Nội dung
Mẫu có chiều dài lý tưởng
Thử nghiệm với nội dung thực, tràn ngập, trống rỗng
trường hợp cạnh
Thông thường không có
Trạng thái trống/lỗi/đang tải
khả năng tiếp cận
bỏ chọn
Độ tương phản, trình tự, vùng cảm ứng
Liên kết luồng
màn hình đơn
Tính nhất quán với màn hình trước/tiếp theo
ba trường hợp nhỏ
Trường hợp 1 - Ba biến thể, quyết định rõ ràng. Một nhà thiết kế đã yêu cầu AI tạo ra 3 bố cục khác nhau cho một bảng thông tin (thẻ tóm tắt, bảng, nhiều biểu đồ). 3 bản nháp đến sau 15 phút; Nhóm đã trình bày những điều này cho các bên liên quan và đưa ra quyết định hướng đi trong vòng 20 phút. Nếu làm thủ công thì 3 bản nháp mất nửa ngày.
Trường hợp 2 - Nội dung thực tế bị gián đoạn trật tự. Trong wireframe AI, tên sản phẩm luôn có 2 từ. Trong danh mục thực tế, một số tên dài 40 ký tự và tràn ngập thẻ. Nhà thiết kế đã thay đổi bố cục sau khi thử nghiệm nó với dữ liệu thực. Bài học: nội dung mẫu dối trá; Kiểm tra nó với nội dung thực tế.
Trường hợp 3 - Hộp trống bị bỏ quên. Khung dây màn hình "yêu thích của tôi" chỉ hiển thị danh sách đầy đủ. Người dùng mới không có mục yêu thích; Màn hình mở ra trống rỗng. Nhà thiết kế yêu cầu trí tuệ nhân tạo "vẽ cả trạng thái trống" và thêm trạng thái trống hướng dẫn. Bài học: trạng thái trống là một phần của thiết kế chính, không phải là một phần cạnh.
Nội dung trước, hộp sau
Quan niệm sai lầm phổ biến nhất trong Wireframing là nhầm thiết kế với "vị trí hộp". Tuy nhiên, wireframe tốt là định hướng nội dung: đầu tiên bạn quyết định thông tin nào sẽ hiển thị trên màn hình và mức độ ưu tiên; Các hộp là kết quả của quyết định này. Tạo "mức độ ưu tiên nội dung" là bước đầu tiên của wireframing: bạn liệt kê những thứ người dùng cần thấy trên màn hình này từ quan trọng nhất đến ít quan trọng nhất. AI là đối tác tốt trong việc đưa ra danh sách này; Nó ưu tiên các yếu tố nội dung có thể có khi bạn đưa ra mục đích của màn hình. Sau đó, bạn sắp xếp mức độ ưu tiên đó theo thứ tự: mục quan trọng nhất ở nơi dễ thấy nhất. Khi thứ tự này bị đảo ngược - khi bạn vẽ một bố cục đẹp lần đầu tiên và sau đó cố gắng đưa nội dung vào đó - thông tin mà người dùng thực sự cần sẽ bị đẩy xuống nền.
Thận trọng: Một khung dây đẹp mắt có thể ẩn mức độ ưu tiên nội dung không chính xác. "Việc bố trí này có ổn không?" mà là "Thông tin quan trọng nhất có phải là điều đầu tiên thu hút sự chú ý của bạn không?" hỏi.
Lời nhắc có thể sao chép
Vai trò của bạn: nhà thiết kế sản phẩm cấp cao. Mục đích màn hình: <<mục đích>>. Thiết bị: << di động/máy tính để bàn>>.3 mục hàng đầu: <<list>>. Các thành phần bắt buộc: <<list>>.Nhiệm vụ: Đề xuất 3 cách tiếp cận wireframe khác nhau rõ ràng (có văn bản, từng phần). Đối với mỗi cách tiếp cận: logic bố cục, thứ tự ưu tiên và lý do nó sẽ hoạt động.
Kiểm tra định nghĩa wireframe này trong điều kiện thực tế:<<wireframe text>>. Vẽ hoặc mô tả: trạng thái trống, nội dung dài (tràn), trạng thái lỗi, trạng thái tải. Đối với mỗi mục, hãy viết cách bố cục phù hợp.
Kiểm tra wireframe này để biết khả năng truy cập: thứ tự đọc có hợp lý không, mục tiêu cảm ứng có đủ không, chỉ có thông tin dựa trên màu sắc, hành động chính có rõ ràng không? Liệt kê từng vấn đề và đề xuất một. Khung dây: <<văn bản>>
Tạo nội dung giữ chỗ thực tế cho wireframe này: 5 tiêu đề có độ dài khác nhau (từ ngắn đến rất dài), 3 văn bản trạng thái trống, 2 thông báo lỗi. Mục đích: test thiết kế với nội dung thực tế, không lý tưởng. Bối cảnh: <<screen>>
Dấu nhắc yếu / Dấu nhắc mạnh
Yếu: "Tạo wireframe trang chủ."
Kết quả: Một khung chung có mức độ ưu tiên, tính đồng nhất nội dung không rõ ràng và không có trường hợp đặc biệt.
Mạnh: "Đề xuất 3 cách tiếp cận wireframe khác nhau cho trang chủ di động với mục đích X; 3 yếu tố quan trọng nhất là; giải thích logic ưu tiên của từng cách tiếp cận; đồng thời hiển thị trạng thái trống và lỗi."
Kết quả: Các lựa chọn có thể so sánh, ưu tiên, thực tế.
Sự khác biệt: lời nhắc mạnh mẽ đưa ra mục đích + mức độ ưu tiên + biến thể + trường hợp đặc biệt.
Những lỗi thường gặp
- Coi đầu ra đầu tiên là thiết kế cuối cùng. Khung dây AI là sự khởi đầu; Tiến hành ở trạng thái chưa trưởng thành của nó là tốn kém.
- Hãy hài lòng với nội dung mẫu. Văn bản giả có độ dài lý tưởng làm cho bố cục trông đẹp một cách giả tạo.
- Bỏ qua trạng thái null và lỗi. Màn hình đầu tiên người dùng nhìn thấy thường trống.
- Để lại khả năng tiếp cận cuối cùng. Độ tương phản và thứ tự đọc được xem xét ở giai đoạn wireframe và không được vá sau này.
- Tiếp tục với một biến thể duy nhất. Việc khắc phục ý tưởng đầu tiên mà không tạo ra các tùy chọn sẽ làm tăng thêm các điểm mù.
Tóm lại
Wireframing là cách rẻ nhất để kiểm tra mức độ ưu tiên và luồng nội dung mà không cần đi sâu vào tính thẩm mỹ; AI tăng tốc đáng kể giai đoạn này. Điều quan trọng là đưa ra một bản tóm tắt rõ ràng (mục đích, mức độ ưu tiên, bối cảnh, ràng buộc, biến thể) trước khi sản xuất và xem kết quả đầu ra như một bản nháp ban đầu. Đầu ra của các công cụ tạo giao diện từ văn bản sẽ không hoàn thiện cho đến khi nó được kiểm tra bằng nội dung thực, các trường hợp phức tạp và khả năng truy cập. Sử dụng mô hình như một trình tạo tùy chọn nhanh; Bạn thêm sự trưởng thành và quyết định.
Nhiệm vụ ứng dụng
- Chọn một màn hình và viết một bản tóm tắt bao gồm mục đích, 3 yếu tố quan trọng nhất và các yếu tố bắt buộc.
- Tạo 3 cách tiếp cận wireframe khác nhau rõ rệt với lời nhắc đầu tiên.
- Với lời nhắc thứ tư, hãy tạo nội dung giữ chỗ thực tế (ngắn-dài-trống) và kiểm tra bố cục.
- Thêm trạng thái trống, lỗi và đang tải bằng lời nhắc thứ hai.
- Thực hiện kiểm tra khả năng truy cập bằng lời nhắc thứ ba và đăng kết quả lên wireframe.
danh sách kiểm tra
- [ ] Tôi đã viết một bản tóm tắt có mục đích và những ưu tiên trước khi sản xuất.
- [ ] Tôi đã tạo ra không chỉ một mà là 3 biến thể khác nhau.
- [ ] Tôi đã thử nghiệm bố cục với nội dung thực tế (dài/ngắn/trống).
- [ ] Tôi đã thiết kế các trạng thái trống, lỗi và đang tải.
- [ ] Tôi đã thực hiện kiểm tra khả năng truy cập ở giai đoạn wireframe.
- [ ] Tôi coi đầu ra như bản nháp ban đầu và hoàn thiện nó.