# App 全页面效果图 · 新版

日期：2026-09-21。制作方式：内置 image_gen，使用 imagegen 技能。共 5 张设计板、20 个主要页面与关键状态。英文品牌与界面示例，实际产品保留中英文；图片不是当前运行截图。

## 设计方向

蓝白专业影像工具：活动封面主导、明确的上传状态、深色拍摄与照片大图、统一分组表单。底部导航只出现在相册/上传/设置根页面；内部页返回上层。

## 页面索引

### 1. 账号与设置：登录、设置、修改密码、语言选择

![账号与设置：登录、设置、修改密码、语言选择](01-account-settings.png)

### 2. 相册工作台：相册列表、详情、操作菜单、空相册

![相册工作台：相册列表、详情、操作菜单、空相册](02-albums-workspace.png)

### 3. 创建与协作：创建、编辑、成员、分类

![创建与协作：创建、编辑、成员、分类](03-create-collaborate.png)

### 4. 拍摄与上传：相机、上传中心、异常处理、服务端历史

![拍摄与上传：相机、上传中心、异常处理、服务端历史](04-capture-uploads.png)

### 5. 照片与分享：照片网格、大图管理、分享卡、隐藏确认

![照片与分享：照片网格、大图管理、分享卡、隐藏确认](05-photos-share.png)

## 落地约束

- 全部人物、日期、账号、数字、活动照片是设计示例，不可硬编码。生成图不同板的日期不完全一致，实施以真实数据为准。
- 示例二维码不是可用活动二维码，必须使用真实相册链接生成。
- 上传完成、服务端处理完成与公开状态分开；权限取后端结果，不能依据示例画面默认开放。
- 分类行中的照片仅为视觉建议；接口无分类封面时使用统一图标，不新增虚假资产。
- 用户无头像字段时使用姓名首字母。成员示例邮箱不是账号接口契约要求。
- 所有按钮需服从创建者/管理员/协作者权限；隐藏后恢复发布由有权限的人执行，不能向所有协作者承诺可恢复。
- 根页面角标与汇总以真实本机任务口径计算。服务端历史没有预览时显示占位，不泄漏其他账号照片。
- 创建表单和设置均可滚动，生成图仅展示首屏，不省略真实必填字段。照片完整查看使用 contain。
- 当前集合覆盖已核对的全部业务页面，并补充语言、菜单、空态和确认状态；系统相册选择器、权限弹窗、键盘等复用系统界面，不重绘全部操作系统页面。加载、网络失败等通用状态沿用统一组件。

## 完整生成提示词

### 统一样式

```text
Use case: ui-mockup. Generate a high-fidelity professional staff mobile app UI design board for PhotoLive, an internal event photo upload and album management Flutter app. Landscape canvas about 2400x1500, FOUR equally sized tall mobile screens in a single row, each 390:844 proportion, fully visible from status bar to safe area. Flat front-on screens, NO physical phone hardware, NO perspective. Background very pale cool gray, small editorial board heading and screen numbers outside screens, generous gaps. Consistent design system across all screens: white content surfaces on #F6F8FB, deep navy #172033 text, muted slate secondary text, brilliant blue #1A73E8 primary buttons, thin pale dividers, 16px cards, 12px controls, generous 16px page gutters, clean modern sans serif, crisp readable English text, minimal thin-line icons, realistic trade-fair documentary photos when relevant. PhotoLive wordmark with small blue aperture symbol only where appropriate. Mature practical enterprise photography tool, calm spacious hierarchy, image-led, no gradients except subtle image scrims, no excessive pills. Bottom navigation ONLY on root Albums, Uploads and Settings screens: Albums / Uploads / Settings. Inner pages use back arrow, no persistent root navigation. All display data is illustrative. Avoid Chinese text, gibberish text, unrealistic features, fake charts, comments, social followers, Feishu login, public registration, subscriptions, shopping. Staff credentials only, repeated public likes are NOT a staff interface feature. Keep typography large and sharp. All main actions comfortably tappable. 
```

### 01 / ACCOUNT & SETTINGS

```text
Screen 1 label "01 Login": white elegant login page, small brand, tasteful narrow event-photo mosaic at top, heading "Your event. In focus.", subtext "Sign in to your company workspace", fields "Account", "Password" with visibility eye, blue "Sign in", restrained "Accounts are provided by your administrator." and top-right EN language choice. No registration or forgot-password service promises.
Screen 2 label "02 Settings": header Settings, profile block avatar "Alex Morgan" subline "alex.morgan · Staff", grouped rows Language "English", Change password, Upload help, App version "1.0.0", separate restrained red "Sign out", bottom tabs Settings selected.
Screen 3 label "03 Change password": back header "Change password", brief instruction, three labeled inputs "Current password", "New password", "Confirm password", eyes, blue "Save password", compact neutral security guidance without made-up policy.
Screen 4 label "04 Language": settings screen dimmed beneath a polished bottom sheet with drag handle, title "App language", options "Follow device", "English" checked blue, "Chinese", explicit "Done" button. Sheet generous spacing, root settings visible behind.
```

### 02 / ALBUM WORKSPACE

```text
Screen 1 label "05 Albums": Albums header plus icon, three photographic album cards with 16:9 exhibition covers, "Canton Fair · Autumn", "Oct 15–19 · Guangzhou", Public and Uploads on small semantic labels; second "Product Launch", third "Team Stories" partially visible. Bottom tabs Albums selected, Uploads badge3. No fake search.
Screen 2 label "06 Album overview": back + ellipsis, compact venue banner, title "Canton Fair · Autumn", calendar and location, separate clear Public and Uploads on statuses. Secondary icon row Photos / Members / Categories / Share. Recent photos 3-column grid of realistic people/venue/products. Sticky bottom actions blue "Take photos" and outlined "Choose photos", safe area. No bottom root tabs.
Screen 3 label "07 Album actions": same album detail background dimmed with bottom sheet title "Album actions": Edit album, Manage members, Categories, Share album with neat line icons, Cancel. All actions equal except no dangerous giant buttons.
Screen 4 label "08 Empty album": back header "Team Stories", compact event information, quiet empty photo frame illustration at center, text "Ready for your first photo", subtext "Capture a moment or choose photos to begin.", bottom blue "Take photos" plus "Choose photos". Empty state professional, no huge cartoon.
```

### 03 / CREATE & COLLABORATE

```text
Screen 1 label "09 Create album": back header New album, white grouped form, field Album title "Canton Fair · Autumn", labeled Starts and Ends date rows, Time zone "Asia/Shanghai", Venue "Guangzhou", accordion "Description & languages" with English selected, primary bottom Create album. Form fits, no unimplemented banner upload control.
Screen 2 label "10 Edit album": back header Edit album, top slim segment Details / Access with Access selected. Distinct grouped switches "Allow uploads" on, "Public access" on, "Allow downloads" on, "Original downloads" off. Short descriptions make semantics clear. Secondary "Content language" English row. Blue bottom Save changes. Use light blue switch on state.
Screen 3 label "11 Members": back Members with plus, owner row "Alex Morgan" Owner, collaborators "Emma Chen" and "Daniel Lee" with small initials avatars, subline "Can manage their own photos", discreet overflow per row, note "Album owners manage all photos and members." Secondary invite button "Invite colleague". No public invitation email flow.
Screen 4 label "12 Categories": back Categories + plus, clean rows "Exhibition", "People", "Highlights" each edit pencil and restrained overflow. Bottom sheet open over lower part labeled "New category", language tabs English / Chinese, Category name field "Behind the scenes", blue Save category. No invented photo counts.
```

### 04 / CAPTURE & UPLOAD

```text
Screen 1 label "13 Camera": beautiful realistic full-screen camera preview of international trade booth and people, dark chrome, top back arrow, destination "Canton Fair · Autumn", category "Exhibition ⌄", bottom large white shutter, camera flip icon, small captured thumbnail, discreet toast "Added to upload queue", badge "3 uploading". No root tabs.
Screen 2 label "14 Uploads": root Uploads title with History icon, summary "Today · This device", large "82 uploaded" and smaller "3 uploading · 13 waiting · 2 need attention", segments All / Active / Needs attention, thumbnail rows showing filename, target album, Uploading 68% blue progress, Waiting for network amber, Confirming upload blue spinner, Uploaded green. Bottom root tabs Uploads selected badge 18. Do not say published for uploaded.
Screen 3 label "15 Needs attention": Uploads same root, Needs attention selected, 2 detailed rows: thumbnail IMG_083.jpg "Connection interrupted" secondary "Retry"; IMG_084.jpg "Source file unavailable" secondary "Select again". One blue "Retry eligible tasks" bottom action above root tabs. Restrained error red, explanatory text no scary giant errors.
Screen 4 label "16 Upload history": inner back header Upload history, subtitle "Server records · All devices", album filter Canton Fair, date Today, grouped clean thumbnail rows: IMG_081.jpg "Uploaded" timestamp, IMG_080.jpg "Processing", IMG_079.jpg "Ready". Small device labels "This device" / "Other device". No totals mixing local and server. No live thumbnail mistakes.
```

### 05 / PHOTOS & SHARING

```text
Screen 1 label "17 Manage photos": back Photos, album subtitle Canton Fair, filter tabs All / Published / Hidden, three-column actual photograph grid with exhibition shots varied subjects, subtle status flags Processing on one, Hidden on one, no giant filenames or like controls. Small uploader chips only if needed, no selection bulk mode.
Screen 2 label "18 Photo details": dark immersive management photo screen, top close and ellipsis, large complete photo of business networking using contain with dark space, navigation chevrons, bottom dark metadata panel "Emma Chen", "Oct 15, 2026 · 10:42", "2400 × 1600 · 2.8 MB", green Published label; bottom actions Hide photo and small red Delete. NO public heart/share/download toolbar.
Screen 3 label "19 Share album": light inner back Share album, refined share card showing small venue cover, Canton Fair · Autumn, date/location, large visually coherent QR placeholder with three finder squares (illustrative not a real link), muted "Scan to view the photo album", bottom blue Copy link, caption "Anyone with the link can view this public album." No fake scan guarantee.
Screen 4 label "20 Hide photo": photo details dark screen under subtle dim overlay, light rounded bottom confirmation sheet title "Hide this photo?", small thumbnail and explanation "Viewers will no longer see this photo. You can publish it again.", primary blue Hide photo and secondary Cancel. No permanent-delete language for hide.
```

### 最终修订提示词

02-albums-workspace

```text
Edit this exact UI board. Preserve all layouts, photography, typography and four screens. Correct only status and dates: replace EVERY upload-count label such as '1,248 uploads', '856 uploads', '32 uploads' with 'Uploads on' and an upload/cloud icon. Especially Empty album must show no photo count. Change visible year 2024 to 2026 everywhere. Keep all other elements identical.
```

04-capture-uploads

```text
Edit this exact four-screen UI board, preserve all layouts and all text except these changes: on first Camera screen REMOVE PHOTO / SQUARE / PANO mode selector entirely, keep that area plain black with safe area. On second and third screens change top PhotoLive wordmark header to plain bold 'Uploads' matching the typography of Upload history. Preserve summary, cards, progress, camera, history and bottom navigation exactly. No new functionality.
```

05-photos-share

```text
Edit this exact four-screen UI board. ONLY on first Manage photos screen remove bottom Albums / Uploads / Settings navigation bar and replace that space with continuation of the photo grid and bottom safe area. This is an inner page with back arrow, not root tab. Preserve all four screens, all other typography, images, actions, QR card, metadata and hide confirmation exactly.
```