Lời nhắc giao diện người dùng hữu ích có nội dung giống như thông số kỹ thuật của sản phẩm. Nó đặt tên cho canvas, phân cấp, nội dung thực, thành phần, trạng thái, quy tắc phản hồi và kiểm tra chấp nhận. Phong cách trực quan xuất hiện sau những quyết định đó. Thứ tự đó cung cấp cho GPT Image 2.5 đủ cấu trúc để tạo ra một mô hình mà nhà thiết kế có thể xem xét và nhà phát triển có thể giải thích.
Bắt đầu từ Trang chủ Image3, mở Không gian làm việc bùng phát hình ảnh GPT 2.5 và giữ Trang mô hình Hình ảnh GPT 2.5 ở gần trong khi bạn kiểm tra lời nhắc bên dưới. Flare là bước thực tế đầu tiên để lặp lại nhanh chóng. Sunburst là một tùy chọn cho khung đánh giá muộn hơn, có độ chân thực cao hơn. Kiểm tra cả hai trên màn hình của chính bạn thay vì coi sự khác biệt đó là điểm chuẩn chung.

Hình ảnh và video ngắn ở trên là minh họa biên tập cho quy trình làm việc này. Chúng không phải là kết quả chuẩn hoặc ảnh chụp màn hình của sản phẩm được vận chuyển.
Trả lời nhanh: nhắc hệ thống phía sau màn hình
Đừng bắt đầu bằng việc "tạo một bảng điều khiển tài chính hiện đại". Yêu cầu đó khiến mô hình phải phát minh ra sản phẩm, dữ liệu, điều hướng và định nghĩa về hiện đại. Thay vào đó hãy cung cấp cho nó một hợp đồng màn hình:
SẢN PHẨM: phân tích đăng ký cho một công ty phần mềm nhỏ.
CÔNG VIỆC CỦA NGƯỜI DÙNG: tìm ra nguyên nhân khiến doanh thu hàng tháng giảm trong vòng chưa đầy 30 giây.
CANVAS: ứng dụng web dành cho máy tính để bàn, 1440 x 1024, chiều rộng nội dung 1200.
HIERARCHY: tiêu đề trang, phạm vi ngày, bốn số liệu tóm tắt, biểu đồ xu hướng, bảng thay đổi.
ĐIỀU HƯỚNG: đường ray bên trái với Tổng quan được chọn; Thanh toán, Khách hàng và Cài đặt bên dưới.
BẢN SAO CHÍNH XÁC: chỉ sử dụng nhãn và giá trị được cung cấp trong khối DATA.
THÀNH PHẦN: thẻ số liệu, kiểm soát ngày được phân đoạn, biểu đồ đường, bảng có thể sắp xếp, chip trạng thái.
TRẠNG THÁI: bao gồm mẫu tải hiển thị và biến thể bảng trống trên một trang trạng thái nhỏ.
PHONG CÁCH: Giao diện người dùng sản phẩm B2B trang nhã, nền trung tính, điểm nhấn màu xanh lam, khoảng cách nhỏ gọn.
TRÁNH: logo bị phát minh, lời chứng thực giả mạo, hiệu ứng kính trang trí, văn bản nhỏ không thể đọc được.
ĐẦU RA: một màn hình chính cộng với một dải trạng thái thành phần hẹp.
Lời nhắc này giúp bạn có thể kiểm tra các quyết định quan trọng. Nếu biểu đồ thống trị trang, bạn có thể thay đổi thứ bậc. Nếu thiếu trạng thái trống, bạn có thể yêu cầu trực tiếp. Lời nhắc chỉ theo tâm trạng sẽ cung cấp cho bạn ít quyền xử lý hơn để sửa chữa.
Tại sao các mô hình giao diện người dùng hấp dẫn lại thất bại khi chuyển giao
Một màn hình được tạo có thể trông như đã hoàn tất trong khi không xác định hành vi của nó. Điều hướng có thể chứa năm điểm đến trên máy tính để bàn và bảy điểm đến trên thiết bị di động. Thẻ có thể hiển thị trạng thái thành công nhưng không có trường hợp tải hoặc lỗi. Một bảng dữ liệu có thể sử dụng những con số hợp lý mà không ai cung cấp. Những khoảng trống này trở thành quyết định về sản phẩm trong quá trình triển khai, khi việc giải quyết chúng diễn ra chậm hơn và tốn kém hơn.
Hình ảnh cũng là một tạo tác dẹt. Nó không mang tên thành phần, mã thông báo, điểm dừng, cấu trúc ngữ nghĩa, thứ tự bàn phím hoặc hợp đồng dữ liệu. Hãy coi nó như một đề xuất trực quan. Gói chuyển giao phải nêu các quy tắc không thể nhìn thấy được trong các pixel.
Sử dụng mô hình để trả lời các câu hỏi trực quan: Thứ tự thông tin có hợp lý không? Hành động chính có rõ ràng không? Vùng dày đặc có thể thở được không? Sử dụng các yêu cầu bằng văn bản cho hành vi: Điều gì xảy ra khi tải dữ liệu? Cột nào biến mất dưới 768 pixel? Văn bản xác nhận xuất hiện ở đâu? Những gì vẫn có thể truy cập được mà không có màu sắc?
Bảy trường trong hợp đồng màn hình
Mỗi lời nhắc giao diện người dùng theo định hướng sản xuất phải bao gồm bảy trường. Chúng có thể vừa với một trang văn bản.
| Lĩnh vực | Quyết định ghi lại | Thất bại nó ngăn cản |
|---|---|---|
| Công việc của người dùng | Một nhiệm vụ mà màn hình phải hỗ trợ | Một trang có vẻ bận rộn nhưng không được ưu tiên |
| Vải | Thiết bị, chiều rộng, chiều cao và vùng nội dung | Bố cục không có ràng buộc thực tế |
| Hệ thống phân cấp | Vùng có trật tự và hành động chi phối | Trọng lượng hình ảnh bằng nhau trên mọi thứ |
| Nội dung | Nhãn, giá trị và giới hạn chính xác | Dữ liệu bị phát minh và bản sao không ổn định |
| Linh kiện | Đặt tên các phần giao diện lặp đi lặp lại | Thẻ, điều khiển và khoảng cách không nhất quán |
| Kỳ | Đang tải, trống, lỗi, bị vô hiệu hóa, thành công | Một thiết kế chỉ dành cho con đường hạnh phúc |
| Quy tắc đáp ứng | Bất biến và các phép biến đổi được phép | Màn hình di động và máy tính để bàn không liên quan |
Viết nội dung dưới dạng một khối riêng biệt. Nếu người mẫu có thể phát minh ra chất độn, hãy nói ở đâu. Nếu mọi nhãn đều được kiểm soát, hãy trích dẫn từng nhãn. Giữ biểu đồ chất lượng trừ khi bạn cung cấp số liệu đã được xác minh. Một biểu đồ trông thực tế vẫn đưa ra tuyên bố thực tế.
CHÍNH SÁCH NỘI DUNG
Sử dụng chính xác các nhãn điều hướng này: Trang chủ, Chuyến đi, Đã lưu, Hồ sơ.
Sử dụng chính xác tiêu đề trang này: Lên kế hoạch cho chuyến đi tiếp theo của bạn.
Sử dụng các thẻ mẫu sau: Lối thoát ven biển, Khám phá thành phố, Đường mòn trên núi.
Không thêm giá, xếp hạng, số lượng đánh giá, huy hiệu, điểm đến hoặc bản sao quảng cáo.
Nếu vùng văn bản không được chỉ định, hãy để trống thay vì tạo ra văn bản.
Chọn Flare hoặc Sunburst theo quyết định tiếp theo
Lựa chọn mô hình nên tuân theo quyết định bạn cần đưa ra. Sử dụng Flare trong khi bố cục vẫn đang chuyển động: thứ tự màn hình, tỷ lệ thành phần, mật độ, điều hướng và cấu trúc phản hồi. Việc lặp lại nhanh hơn rất quan trọng vì hầu hết các bản nháp ban đầu sẽ bị loại bỏ.
Hãy dùng thử Sunburst sau khi hợp đồng màn hình đã được giải quyết và khung đánh giá chi tiết sẽ hữu ích. Điều đó có thể bao gồm hình ảnh trình bày bóng bẩy, hướng trực quan có sắc thái hoặc một chỉnh sửa khó cần kiểm tra kỹ hơn. Độ trung thực hình ảnh cao hơn không khắc phục được yêu cầu sản phẩm chưa hoàn chỉnh. Lời nhắc Sunburst mơ hồ vẫn có thể tạo ra màn hình mơ hồ.
Trình tạo hình ảnh AI cung cấp điểm truy cập rộng hơn, trong khi Thư viện lời nhắc GPT Image 2 rất hữu ích khi bạn muốn so sánh các cấu trúc nhắc nhở ngoài công việc giao diện người dùng. Giữ mô hình đã chọn và cài đặt chất lượng trong ghi chú bàn giao của bạn để đồng đội khác có thể tái tạo bối cảnh tạo.
Lời nhắc giới thiệu trên thiết bị di động
Việc triển khai cần một công việc hữu hạn. Ví dụ này giúp người dùng mới kết nối lịch và chọn thời gian thông báo mà không cần biến màn hình thành băng chuyền tiếp thị.
Tạo quy trình giới thiệu trên thiết bị di động trên ba màn hình cho trợ lý lịch.
VẢI
- Ba bản vẽ giống iPhone ở độ phân giải 390 x 844, hiển thị cạnh nhau.
- Tôn trọng khu vực an toàn. Sử dụng một hệ thống khoảng cách 8 điểm nhất quán.
MÀN HÌNH 1: KẾT NỐI
- Tiêu đề: "Kết nối lịch của bạn"
- Dòng hỗ trợ: "Xem thời gian mở mà không thay đổi các sự kiện hiện có."
- Nút chính: "Kết nối lịch"
- Liên kết văn bản phụ: "Không phải bây giờ"
MÀN HÌNH 2: CHỌN
- Tiêu đề: "Khi nào chúng tôi nên nhắc bạn?"
- Ba lựa chọn radio: trước 10 phút, trước 30 phút, trước 1 giờ.
- Chọn trước 30 phút.
MÀN HÌNH 3: SẴN SÀNG
- Tiêu đề: “Bạn đã sẵn sàng”
- Hiển thị một chương trình mẫu nhỏ gọn với hai sự kiện.
- Nút chính: "Mở ngày của tôi"
QUY TẮC HỆ THỐNG
- Giữ vị trí nút ổn định trên cả ba màn hình.
- Sử dụng một phong cách minh họa và một nhóm biểu tượng.
- Hiển thị tiến độ theo 1 trên 3, 2 trên 3, 3 trên 3.
- Không có lời chứng thực, giá cả, độ dốc, biểu tượng hoặc các bước thiết lập bổ sung.
Xem lại kết quả đầu ra theo trình tự. Có thể điều hướng quay lại trên màn hình hai và ba. Giá trị thông báo đã chọn cần có trạng thái được chọn hiển thị. Màn hình cuối cùng không được đưa ra yêu cầu cấp phép mới mà lời nhắc chưa bao giờ xác định.
Lời nhắc trên bảng điều khiển SaaS
Lời nhắc trên trang tổng quan cần có câu hỏi chứ không chỉ là danh sách tiện ích. Công việc của người dùng bên dưới xác định hệ thống phân cấp trang.
Thiết kế bảng điều khiển SaaS trên máy tính để bàn cho trưởng nhóm hoạt động hỗ trợ.
Người dùng phải xác định loại vé nào gây ra tình trạng tồn đọng ngày hôm nay.
BỐ CỤC
- Canvas 1440 x 1024 với thanh điều hướng bên trái 240 pixel.
- Tiêu đề: "Tổng quan hỗ trợ", ngày địa phương, bộ chọn nhóm.
- Hàng đầu tiên: Mở, Đang chờ, Đã giải quyết hôm nay, Phản hồi đầu tiên trung bình.
- Khu vực chính: biểu đồ tồn đọng theo giờ bên trái, bảng danh mục bên phải.
- Vùng dưới cùng: 5 vé mở lâu nhất có chủ sở hữu và tuổi.
DỮ LIỆU
Mở 184; Chờ đợi 36; Đã giải quyết hôm nay 92; Phản hồi đầu tiên trung bình 18 phút.
Danh mục: Thanh toán 71, Đăng nhập 48, Thế hệ 39, Xuất khẩu 26.
Không thêm phần trăm hoặc tuyên bố xu hướng.
TÍN HIỆU TƯƠNG TÁC
- Hàng thanh toán được chọn và lọc biểu đồ hàng giờ.
- Một điều khiển "Xóa bộ lọc" hiển thị xuất hiện phía trên biểu đồ.
- Chỉ báo sắp xếp chỉ xuất hiện ở cột Backlog.
PHONG CÁCH
Giao diện người dùng thao tác nhỏ gọn, khung vẽ màu trắng nhạt, văn bản mực tối, điểm nhấn chọn màu xanh lam.
Tránh các hình minh họa trang trí, thiệp quá khổ, hiệu ứng kính và cảnh báo giả.
Kiểm tra mọi số đối với khối dữ liệu. Sau đó hỏi xem hàng Thanh toán đã chọn và biểu đồ đã lọc có thể hiểu được mà không cần chỉ dựa vào màu sắc hay không. Thêm biểu tượng, nhãn hoặc cách xử lý đường viền nếu mối quan hệ không rõ ràng.
Lời nhắc trang định giá
Các trang định giá không thành công khi sự nhấn mạnh vào hình ảnh âm thầm thay đổi ưu đãi. Kiểm soát tên gói, giá, các mục được bao gồm, loại trừ và nhãn CTA.
Tạo trang định giá đáp ứng cho ứng dụng ghi chú của nhóm.
KẾ HOẠCH
Miễn phí: 0 USD, 3 dự án, dung lượng lưu trữ 1 GB, hỗ trợ cộng đồng. CTA: "Bắt đầu miễn phí".
Nhóm: 12 USD mỗi thành viên hàng tháng, dự án không giới hạn, dung lượng lưu trữ 50 GB, hỗ trợ qua email.
CTA: "Bắt đầu thử nghiệm nhóm". Đánh dấu kế hoạch này là "Được chọn nhiều nhất".
Kinh doanh: $28 mỗi thành viên hàng tháng, SSO, nhật ký kiểm tra, hỗ trợ ưu tiên.
CTA: "Liên hệ bán hàng".
MÁY TÍNH ĐỂ BÀN
- Canvas 1440 pixel, ba cột sơ đồ bằng nhau, Nhóm ở giữa.
- Đặt phiếu thanh toán hàng tháng bên cạnh giá tiền, không để ở phần chân trang xa xôi.
DI ĐỘNG
- Canvas 390 pixel, các gói được xếp chồng lên nhau Miễn phí, Nhóm, Kinh doanh.
- Hiển thị mọi giá và CTA mà không cần băng chuyền ngang.
QUY TẮC
- Không phát minh ra các khoản giảm giá, giá hàng năm, bảo đảm, số lượng khách hàng hoặc tính năng.
- Chỉ sử dụng dấu kiểm cho các mục được bao gồm. Viết các loại trừ dưới dạng văn bản thuần túy.
- Mang lại cho Team độ tương phản đường viền mạnh mẽ hơn mà không tăng giá.
Sau khi tạo, so sánh các kế hoạch theo từng dòng. Việc thiếu loại trừ hoặc giảm giá được phát minh là lỗi sản phẩm, ngay cả khi trang trông đáng tin cậy. Xây dựng lại văn bản định giá chính xác trong mã thay vì coi kiểu chữ được tạo như tác phẩm nghệ thuật sản xuất.
Lời nhắc trạng thái trống, đang tải và lỗi
Tạo trạng thái sau khi màn hình tham chiếu có hệ thống thành phần ổn định. Sử dụng lại các kích thước vùng chứa giống nhau để bố cục không nhảy giữa các trạng thái.
Sử dụng màn hình danh sách dự án đã được phê duyệt làm tài liệu tham khảo trực quan, tạo một bảng trạng thái.
Hiển thị bốn phiên bản của cùng một bảng nội dung 720 x 420:
1. MẶC ĐỊNH: ba hàng dự án có tên, chủ sở hữu, trạng thái và ngày cập nhật.
2. LOADING: ba hàng xương trung tính không có chữ hoặc số giả.
3. TRỐNG: tiêu đề “Chưa có dự án”, một câu, nút “Tạo dự án”.
4. LỖI: tiêu đề "Không thể tải dự án", thông báo "Kiểm tra kết nối của bạn và thử lại.",
nút chính "Thử lại", liên kết văn bản phụ "Xem trạng thái".
BẢO QUẢN
Kích thước bảng điều khiển, vị trí tiêu đề, căn chỉnh cột, nền, đường viền, bán kính,
tỷ lệ loại, khoảng cách và vị trí hành động.
TÍN HIỆU TIẾP CẬN
Không truyền đạt lỗi hoặc trạng thái tải chỉ bằng màu sắc.
Giữ các đường viền tiêu điểm hiển thị trên Thử lại và Tạo dự án.
Đừng đặt lời giải thích duy nhất bên trong một biểu tượng.

Hình minh họa ở trên là tài liệu tham khảo QA được thực hiện cho hướng dẫn này. Nó hiển thị các danh mục cần kiểm tra, không phải thư viện thành phần sản xuất.
Lời nhắc đáp ứng trên thiết bị di động và máy tính để bàn
Hai bản vẽ không liên quan không xác định hành vi đáp ứng. Trước tiên hãy nêu các bất biến, sau đó liệt kê các phép biến đổi được phép.
Tạo màn hình ghép nối giữa thiết bị di động và máy tính để bàn cho cùng một sản phẩm lập kế hoạch du lịch.
BẤT BIẾN
- Thứ tự nội dung giống nhau: tìm kiếm, lọc danh mục, chuyến đi nổi bật, chuyến đi còn lại.
- Tiêu đề thẻ và điểm đến giống nhau trên cả hai khung vẽ.
- Cùng một điểm nhấn màu xanh lam, cách xử lý hình ảnh, họ loại và bán kính thẻ.
- Tìm kiếm là hành động chính ở cả hai chiều rộng.
DI ĐỘNG Ở 390 PIXEL
- Điều hướng phía dưới với Trang chủ, Tìm kiếm, Đã lưu, Hồ sơ.
- Thẻ chuyến đi một cột có phần đệm trang 16 pixel.
- Danh mục chip cuộn theo chiều ngang trên một dòng.
MÁY TÍNH ĐỂ BÀN Ở 1440 PIXEL
- Điều hướng hàng đầu với Chuyến đi, Khám phá, Đã lưu, Hồ sơ.
- Lưới chuyến đi ba cột bên trong vùng nội dung 1200 pixel.
- Trường tìm kiếm nằm ở tiêu đề; chip danh mục nằm phía trên lưới.
KHÔNG
Thay đổi bản sao thẻ, thêm đích đến, ẩn hành động tìm kiếm hoặc tạo chủ đề hình ảnh riêng biệt.
Lời nhắc ghép nối này tạo ra sự khác biệt có chủ ý. Trong quá trình chuyển giao, hãy biến mỗi chuyển đổi thành một quy tắc: điều hướng dưới cùng trở thành điều hướng trên cùng tại điểm dừng trên màn hình; danh sách thẻ thay đổi từ một đến ba cột; điều khiển tìm kiếm di chuyển nhưng vẫn giữ nguyên công việc và nhãn.
Lời nhắc cài đặt và quyền
Các trang cài đặt cho biết mô hình có hiểu được hành vi của hệ thống hay không. Nhóm kiểm soát theo hậu quả và khiến các hành động phá hoại khó có thể vô tình kích hoạt.
Thiết kế trang cài đặt máy tính để bàn cho không gian làm việc chung.
PHẦN
Hồ sơ: tên, vai trò, hành động hình ảnh hồ sơ.
Thông báo: chọn thông báo qua email, chuyển đổi cập nhật sản phẩm, chuyển đổi cảnh báo đề cập.
Bảo mật: liên kết phiên hoạt động, nút thay đổi mật khẩu, trạng thái hai yếu tố.
Vùng nguy hiểm của không gian làm việc: nút rời khỏi không gian làm việc.
TÍN HIỆU HÀNH VI
- Hiển thị trạng thái đã lưu bên cạnh Hồ sơ sau khi chỉnh sửa.
- Hiển thị nút Lưu bị tắt khi không có trường nào thay đổi.
- Cung cấp cho các công tắc trạng thái bật và tắt riêng biệt bằng nhãn văn bản.
- Đặt phần “Rời khỏi không gian làm việc” vào vùng nguy hiểm riêng biệt kèm theo bản thuyết minh.
- Không hiển thị phương thức xác nhận hủy diệt trong cùng một màn hình chính.
BỐ CỤC
1440 x 1024, đường ray bên trái 240 pixel, cột cài đặt 720 pixel, khoảng cách giữa các phần rộng rãi.
Sử dụng giao diện người dùng sản phẩm thông thường, không phải trang đích tiếp thị.
Yêu cầu người đánh giá mô tả chức năng của từng tùy chọn kiểm soát mà không cần đoán. Nếu một công tắc không có nhãn, trạng thái đã lưu không có thời lượng hoặc hành động nguy hiểm trông giống như một liên kết điều hướng thông thường thì hình ảnh cần được sửa chữa và các yêu cầu cần chi tiết hơn.
Sửa chữa một vùng mà không làm mất màn hình
Lời nhắc chỉnh sửa hữu ích nêu tên một lỗi, một vùng, phần thay thế và các bất biến. Không kết hợp việc sửa kiểu chữ với thiết kế lại màu sắc và thay đổi bố cục.
CHỈ CHỈNH SỬA TIÊU ĐỀ CỦA BẢNG ĐIỀU KHIỂN MÁY TÍNH ĐỂ BÀN.
Thay thế tiêu đề trang "Tổng quan hỗ trợ" bằng chính xác "Tổng quan về hỗ trợ".
Giữ tiêu đề trên một dòng và giữ nguyên vị trí hiện tại, cỡ chữ, trọng lượng và màu sắc.
Giữ nguyên ngày, bộ chọn nhóm, thanh điều hướng, số liệu, biểu đồ, bảng, khoảng cách,
nền, đường viền và mọi từ có thể nhìn thấy khác.
Không thêm bất kỳ nhãn hoặc biểu tượng mới nào.
Kiểm tra đầu ra hoàn chỉnh sau mỗi lần chỉnh sửa. Tiêu đề đã sửa sẽ không giúp ích gì nếu mô hình cũng thay đổi hai số liệu. Nếu các thay đổi phụ xuất hiện, hãy quay lại phiên bản sạch nhất trước đó và thu hẹp thêm yêu cầu chỉnh sửa. Để có sự nhất quán về hình ảnh trên các màn hình sau này, quy trình tham khảo kiểu thương hiệu giải thích cách giữ cố định các quy tắc nhận dạng, bảng màu, ánh sáng và bố cục. Để phân cấp hình ảnh dày đặc, hãy sử dụng quy trình làm việc nhanh chóng của đồ họa thông tin.
Xây dựng gói chuyển giao cho nhà phát triển
Mô hình cuối cùng là một mục trong gói chuyển giao, không phải toàn bộ gói. Đính kèm màn hình được chấp nhận và ghi lại các quyết định mà pixel không thể thực hiện được.
- Đặt tên cho từng màn hình và công việc của người dùng.
- Liệt kê chính xác bản sao và dữ liệu mẫu đã được phê duyệt. Đánh dấu mọi phần giữ chỗ.
- Ánh xạ các phần trực quan lặp lại tới các thành phần được đề xuất.
- Ghi lại các mã thông báo khoảng cách, loại, màu sắc, bán kính và độ cao làm giá trị triển khai.
- Xác định trạng thái tải, trống, lỗi, vô hiệu hóa, thành công và quyền.
- Nêu rõ các quy tắc điểm dừng dưới dạng bất biến và các phép biến đổi.
- Thêm kiểm tra bàn phím, tiêu điểm, nhãn, độ tương phản, kích thước mục tiêu, giảm chuyển động và khôi phục lỗi.
- Liệt kê các câu hỏi chưa được giải quyết về sản phẩm với chủ sở hữu thay vì để mã trả lời trong im lặng.
Các nhà phát triển có quyền tự do sửa các hình dạng không thể thực hiện được, các tương tác không thể truy cập và các quy ước nền tảng. Mô hình này thiết lập ý định. Nó không ghi đè lên phần mềm đang hoạt động.
Kiểm tra màn hình trước khi thực hiện
Sử dụng bốn thẻ đánh giá. Đầu tiên, so sánh từng từ và số hiển thị với khối nội dung đã được phê duyệt. Thứ hai, theo dõi công việc chính của người dùng và xác nhận rằng hệ thống phân cấp và hành động hỗ trợ công việc đó. Thứ ba, kiểm tra các trạng thái và hành vi đáp ứng. Thứ tư, kiểm tra gói chuyển giao để biết chi tiết mà hình ảnh không thể thể hiện được.
Ở độ phân giải đầy đủ, hãy tìm lỗi chính tả, khoảng cách không nhất quán, biểu tượng bị méo, sự trùng lặp ngẫu nhiên và dữ liệu bị phát minh. Ở 390 pixel, hãy xác nhận rằng tiêu đề, hành động chính và thông báo trạng thái vẫn có thể đọc được. Một thiết kế chỉ hoạt động ở kích thước bản trình bày thì chưa sẵn sàng để triển khai.
Không sử dụng mô hình làm bằng chứng cho thấy giao diện có thể truy cập được, sử dụng được hoặc khả thi về mặt kỹ thuật. Những tuyên bố đó yêu cầu nguyên mẫu, mã và thử nghiệm của người dùng hoặc tự động. Giao diện người dùng được tạo mạnh nhất là một đề xuất nhanh giúp đưa ra các quyết định về sản phẩm đủ rõ ràng để tranh luận.
Lời nhắc cuối cùng có thể sử dụng lại
Mẫu dưới đây đặt các yêu cầu về sản phẩm lên hàng đầu về trang trí trực quan. Xóa các trường không áp dụng nhưng không thay thế chúng bằng tính từ.
Tạo giao diện người dùng [cặp di động/máy tính để bàn/đáp ứng] cho [sản phẩm].
CÔNG VIỆC CỦA NGƯỜI DÙNG
[Một nhiệm vụ người dùng phải hoàn thành.]
VẢI
[Kích thước chính xác, chiều rộng nội dung, vùng an toàn, lưới và phần đệm bên ngoài.]
THÔNG TIN ĐẶT HÀNG
1. [Khu vực đầu tiên và mục đích của nó]
2. [Khu vực thứ hai và mục đích của nó]
3. [Khu vực thứ ba và mục đích của nó]
NỘI DUNG CHÍNH XÁC
[Điều hướng, tiêu đề, nhãn, giá trị, thông báo và bản sao CTA đã được phê duyệt.]
Không phát minh ra văn bản hoặc dữ liệu bên ngoài khối này.
THÀNH PHẦN
[Điều khiển được đặt tên, thẻ, bảng, điều hướng, biểu đồ, biểu mẫu và mẫu lặp lại.]
TIỂU BANG
[Mặc định, di chuột, tập trung, tải, trống, lỗi, bị vô hiệu hóa, thành công, được phép.]
QUY TẮC ĐÁP ỨNG
Bảo tồn: [nội dung, trật tự, hành động và bất biến hệ thống thị giác].
Chuyển đổi: [cho phép điều hướng, cột, gói, ẩn hoặc sắp xếp lại ở mỗi chiều rộng].
HƯỚNG TẦM NHÌN
[Phong cách sản phẩm cụ thể, vai trò loại, vai trò bảng màu, mật độ, đường viền và hình ảnh.]
KIỂM TRA CHẤT LƯỢNG
Không có logo, dữ liệu, tính năng, lời chứng thực, huy hiệu, hình mờ, bản hiển vi khó đọc được phát minh,
kiểu thành phần không nhất quán hoặc tín hiệu trạng thái chỉ có màu.
Chạy mẫu trong Không gian làm việc bùng phát hình ảnh GPT 2.5. Quay lại Trang chủ Image3 khi bạn muốn so sánh các quy trình xử lý hình ảnh khác và sử dụng Trang mô hình Hình ảnh GPT 2.5 để chọn tuyến thế hệ tiếp theo. Giữ lời nhắc chiến thắng, hình ảnh được chấp nhận, lịch sử sửa chữa và các quy tắc bàn giao bằng văn bản cùng nhau. Gói đó sẽ biến màn hình được tạo thành quyết định về sản phẩm có thể xem xét được.
Câu hỏi thường gặp
Tôi nên sử dụng mô hình GPT Image 2.5 nào cho mô hình giao diện người dùng?
Bắt đầu với Flare khi bố cục và nội dung vẫn đang thay đổi. Kiểm tra Sunburst khi khung đánh giá có độ chính xác cao hơn có thể thay đổi quyết định. Ghi lại mô hình và cài đặt vì kết quả phụ thuộc vào khối lượng công việc thực tế.
GPT Image 2.5 có thể tạo mã giao diện người dùng sẵn sàng sản xuất không?
Không. Đầu ra là một tham chiếu trực quan, không phải là cây thành phần hoặc đặc tả hành vi. Xây dựng giao diện bằng mã và kiểm tra nó theo các tiêu chí chấp nhận bằng văn bản.
Làm cách nào để giữ văn bản chính xác trong mô hình giao diện người dùng?
Cung cấp bản sao chính xác, giảm số lượng văn bản trên mỗi màn hình và kiểm tra từng nhãn và số. Sửa chữa từng vùng văn bản trong khi vẫn giữ nguyên phần còn lại của hình ảnh.
Tôi nên nhắc phiên bản dành cho thiết bị di động và máy tính để bàn như thế nào?
Cung cấp cho cả hai chiều rộng canvas. Tách nội dung và hành động bất biến khỏi các quy tắc điều hướng, lưới và gói có thể thay đổi trên các điểm dừng.
Tôi có nên tạo mọi trạng thái ứng dụng trong một hình ảnh không?
Trước tiên hãy ổn định một màn hình tham chiếu. Sau đó, yêu cầu một bảng trạng thái nhỏ gọn sử dụng lại kích thước, loại, khoảng cách, màu sắc và các điều khiển của nó.
Mô hình bóng bẩy có chứng minh được khả năng tiếp cận không?
Không. Kiểm tra ngữ nghĩa, thứ tự bàn phím, tiêu điểm, nhãn, độ tương phản, kích thước mục tiêu, tùy chọn chuyển động và khôi phục lỗi trong giao diện đã triển khai.
How to apply this
- Viết hợp đồng màn hình
Xác định công việc của người dùng, canvas, phân cấp thông tin, bản sao chính xác, các thành phần và trạng thái tương tác trước khi yêu cầu kiểu trực quan.
- Tạo một màn hình tham chiếu
Sử dụng GPT Image 2.5 Flare để kiểm tra nhanh hệ thống phân cấp, sau đó kiểm tra kết quả ở kích thước đầy đủ và chiều rộng trên thiết bị di động.
- Thêm trạng thái và điểm dừng
Yêu cầu các trạng thái tải, trống, lỗi và thành công cùng với bố cục trên thiết bị di động và máy tính để bàn được ghép nối với các bất biến rõ ràng.
- Sửa chữa một lỗi tại một thời điểm
Xác định một vùng, trích dẫn sự thay đổi cần thiết và nêu rõ các yếu tố xung quanh nào phải cố định.
- Xây dựng gói chuyển giao
Chuyển bản sao, khoảng cách, thành phần, trạng thái, hành vi phản hồi và các câu hỏi chưa được giải quyết được chấp nhận vào danh sách kiểm tra triển khai bằng văn bản.
Frequently asked questions
Tôi nên sử dụng mô hình GPT Image 2.5 nào cho mô hình giao diện người dùng?
Bắt đầu với Flare khi bạn cần lặp lại bố cục nhanh chóng. Kiểm tra Sunburst để có khung xem xét có độ chính xác cao hơn khi thời gian tạo thêm được điều chỉnh phù hợp với khối lượng công việc của bạn.
GPT Image 2.5 có thể tạo mã giao diện người dùng sẵn sàng sản xuất không?
Không. Mô hình được tạo là một tham chiếu trực quan được làm phẳng. Các nhà phát triển vẫn cần định nghĩa thành phần, quy tắc đáp ứng, ngữ nghĩa có thể truy cập, hành vi dữ liệu và tiêu chí chấp nhận.
Làm cách nào để giữ văn bản chính xác trong mô hình giao diện người dùng?
Cung cấp kho bản sao chính xác, giới hạn số bản sao trên mỗi màn hình, kiểm tra mọi nhãn và sử dụng lời nhắc chỉnh sửa có mục tiêu cho từng lỗi văn bản tại một thời điểm.
Tôi nên nhắc phiên bản dành cho thiết bị di động và máy tính để bàn như thế nào?
Đặt tên cho cả hai chiều rộng canvas, xác định những gì phải nhất quán và chỉ định những gì có thể di chuyển, thu gọn, bao bọc hoặc trở thành một mẫu điều hướng khác.
Tôi có nên tạo mọi trạng thái ứng dụng trong một hình ảnh không?
Trước tiên hãy sử dụng một màn hình tham chiếu. Sau khi hệ thống thành phần của nó ổn định, hãy yêu cầu một bảng trạng thái nhỏ gọn cho các biến thể đang tải, trống, lỗi, vô hiệu hóa và thành công.
Mô hình bóng bẩy có chứng minh được khả năng tiếp cận không?
Không. Độ tương phản trực quan chỉ là một kiểm tra. Thứ tự bàn phím, cấu trúc ngữ nghĩa, nhãn trình đọc màn hình, tùy chọn chuyển động, kích thước mục tiêu và khôi phục lỗi cần các thử nghiệm triển khai riêng biệt.