Files
photo-live/docs/designs/viewer-mobile-concept-2026-09-21.md
T
2026-09-21 21:01:59 +08:00

4.4 KiB
Raw Blame History

观众页效果图 · 2026-09-21

观众相册与大图效果

生成方式:内置 image_gen(imagegen 技能)。这是视觉概念稿,不是现有运行页面截图。活动、人物、日期及统计数字均为设计示例。

左侧:宣传图、活动介绍、浏览次数、时间地点、语言切换、最新/热门、分类、双列图片、新照片提示与点赞气泡。

右侧:深色大图、左右切换、关闭、缩略图导航、连续点赞、分享和下载。

实现注意:实际列表保持不同图片高度的双列瀑布流,不照搬生成图中接近等高的排布;大图按原比例完整显示。浏览次数不是在线人数;总照片数只有接口提供准确值时才展示。下载遵守相册权限,连续点赞无需登录,气泡按实时消息显示。缩略图导航为本次设计建议,需纳入后续任务。英文为海外观众示例,中文与语言切换仍保留。

完整生成提示词

Use case: ui-mockup.
Create a polished high fidelity mobile web UI design presentation for an event live photo album platform, not a native staff app. Two large flat mobile screens side by side, front view, no perspective or physical phone hardware, on pale cool gray background. Extremely crisp readable English typography and coherent realistic event photography. Landscape design board around 1536x1024 or larger. Small board heading "EVENT PHOTO GALLERY", subtle screen labels "01 / Album" and "02 / Photo viewer". Screens occupy almost entire height, 390:844 proportions, generous separation. No fabricated analytics outside screens.
LEFT SCREEN white mobile public album website. Very slim top brand bar "PhotoLive" with small blue aperture mark and "EN ⌄" language switch. Below a prominent photographic promotional banner of a contemporary international trade exhibition venue with subtle blue overlay, exact banner text "CANTON FAIR" and "AUTUMN 2026". Below white information section: title "Moments from the fair", brief subtitle "Explore the event, one photo at a time.", eye icon "12,480 views", calendar "Oct 15–19, 2026", location "Guangzhou, China". Compact blue share icon action. Keep hierarchy clear, not too tall. Tabs "Latest" active with blue underline and "Popular". Small category chips "All" selected, "Exhibition", "People", "Highlights". Rest of screen dense beautiful TWO COLUMN MASONRY photographs with variable height, 4px gutters, subtle 4px image rounding, authentic international business event scenes: large architecture/venue, diverse adults meeting at product exhibition booth, warm networking portrait, product detail, speaker on stage. Images are dominant, no thick cards or captions. Tiny white heart counts overlay bottom-right of each photo e.g. heart 128 and heart 86. A small unobtrusive white pill "8 new photos ↑" floats near top of gallery. A few translucent small heart bubbles rising along right gallery edge showing shared audience reactions. NO bottom app navigation, no login, no upload or management buttons.
RIGHT SCREEN full-screen photo viewer mobile web overlay, almost black #11151C background. Top left white X close, top center "12 / 248", top right ellipsis menu. Large complete landscape photograph of the same exhibition networking group, contained uncropped horizontally at screen center with natural dark negative space above and below. Thin subtle previous and next chevrons at image edges. At lower right of photo a tasteful rising trail of translucent coral and pink heart bubbles, clearly visible but not obstructing faces. Below photo subtle photo position thumbnails of 5 images with one blue outline. Bottom safe area action bar three evenly spaced large tap actions: coral filled heart with "1,286" and label "Like"; white share arrow with "Share"; white download icon with "Download". Small centered helper "Tap to send more love" above actions communicates repeatable anonymous likes. No usernames, comments, registration or toggled once-only like wording.
Visual language: mature photo-centric editorial mobile web design, clean white and blue #1A73E8 album page, dark immersive image viewer, restrained shadows, clear 44px touch targets, sharp thin icons, balanced spacing, realistic implementable UI. All visible text English, spelled correctly. Use placeholder event content only as a design sample. No external brand logos, no watermark, no decorative 3D objects. This is a product effect mockup, not an infographic.