UI/UX 重新设计提示(波普设计风格)

Author:Maki@Sunwood AI Labs.
2026/01/05 09:12

Description

重新设计应用UI界面,采用波普艺术风格,展示移动端和PC端的响应式设计效果。

Tags

Image GenerationVisualizeSystem Design

Content

您是一位经验丰富的高级 UI/UX 设计师,专注于新服务发布和重新设计。

请分析所附图像(如果未附图像,则分析输入文本),并**仅提取其中显示的“功能需求”和“信息结构”**。
根据提取的功能,生成一个高分辨率的应用程序/服务设备模型图像,采用**全新设计**,并排显示“智能手机版本(移动应用)”和“PC 版本(Web 仪表板或 LP)”。

**重要要求:**
1.  **设计更新:** **请勿模仿**所附图像的视觉风格。请根据下面的“波普设计”说明,提出一个全新的设计。
2.  **功能维护:** 核心应用功能,例如“上传”、“视频平铺显示”和“导出设置”,必须包含在 UI 中。
3.  **无人物:** 图像中请勿放置任何人物或人物插图。只关注 UI 和设备。

▼ 生成过程说明(思考过程)
在绘制之前,请按照以下思考过程构建设计:
 * [步骤 1:功能需求提取]:从所附图像中识别服务的功能(例如,视频上传、平铺编辑、输出),并列出必要的 UI 元素。
 * [步骤 2:波普设计概念制定]:根据下面的“▼ 新设计和风格规范”,定义充满活力的调色板、有趣的形状和易于亲近的字体。
 * [步骤 3:响应式 UI 设计]:
    * 智能手机版本:使用定义的波普设计优化 UI,使其即使在小屏幕上也能有趣地操作。按钮应大且易于按下。
    * PC 版本:使用定义的波普设计,设计一个视觉上令人愉悦的网格布局,充分利用宽屏。
 * [步骤 4:空间构图]:设置一个角度,使 PC 和智能手机精美对齐,并清晰传达两个屏幕的新设计。

▼ 新设计和风格规范
 * **设计方向:** 采用**“有趣、亲和、充满活力的波普设计。”**
    * **颜色:** 使用高饱和度、充满活力的多色调色板(例如,糖果色、亮黄色、亮粉色、天蓝色),营造出充满活力的印象。
    * **形状:** 按钮、卡片和窗口频繁使用大圆角,以创造柔和、触感良好的质感。图标应采用粗线条绘制的俏皮风格。
    * **字体:** 使用易于亲近且高度可读的圆体哥特式日文字体。
    * **整体氛围:** 最终呈现出明亮、积极的 UI,让用户在使用时感到兴奋。
 * **构图:** 跨平台模型,PC 和智能手机精美对齐,采用等距(倾斜俯视)或正面视图。背景应为明亮的工作室环境,以增强波普 UI。
 * **文本:** 放置准确的日文文本,指示功能。

▼ 输入文本(应用功能定义)
{argument name="app function definition" default="用于平铺和导出上传视频的应用\n无需 AI 分析功能\n我希望能够设置分辨率!"}

---

**Original English:**
あなたは新規サービスの立ち上げやリデザインを得意とする、経験豊富なシニアUI/UXデザイナーです。

添付された画像(もし添付がない場合は入力テキスト)を分析し、そこに示されている**「機能要件」と「情報構造」のみを抽出**してください。
その抽出した機能を元に、**デザインを完全に刷新した**、このアプリ/サービスの「スマートフォン版(モバイルアプリ)」と「PC版(WebダッシュボードまたはLP)」を並べた高解像度のデバイスモックアップ画像を生成してください。

**重要なお願い:**
1.  **デザインの刷新:** 添付画像のビジュアルスタイルは**一切模倣しないでください**。後述する「ポップなデザイン」の指示に従って、全く新しいデザインを提案してください。
2.  **機能の維持:** 「アップロード」「動画のタイル化表示」「エクスポート設定」など、アプリとしてのコア機能は必ずUIに含めてください。
3.  **キャラクター禁止:** 画像内にキャラクターや人物のイラストは一切配置しないでください。UIとデバイスのみに集中してください。

▼ 生成プロセスへの指示 (Thinking Process)
描画前に、以下の思考プロセスを実行してデザインを構築してください。
 * [ステップ1: 機能要件の抽出]: 添付画像から、このサービスが何をするものか(動画アップロード、タイル化編集、出力など)を特定し、必要なUI要素をリストアップします。
 * [ステップ2: ポップなデザインコンセプトの策定]: 下記「▼ 新しいデザイン・スタイル指定」に基づき、鮮やかなカラーパレット、遊び心のある形状、親しみやすいタイポグラフィを定義します。
 * [ステップ3: レスポンシブUI設計]:
    * スマホ版: 定義したポップなデザインを用いて、狭い画面でも楽しく操作できるUIを最適化します。ボタンは押しやすく大きめに配置します。
    * PC版: 定義したポップなデザインを用いて、広い画面を活かした視覚的に楽しいグリッドレイアウトを設計します。
 * [ステップ4: 空間構成]: PCとスマートフォンを美しく並べ、両方の画面の新デザインが鮮明に伝わるアングルを設定します。

▼ 新しいデザイン・スタイル指定
 * **デザインの方向性:** **「楽しく、親しみやすく、エネルギッシュなポップデザイン」**を採用してください。
    * **カラー:** 高彩度で鮮やかなマルチカラーパレット(例:キャンディカラー、ブライトイエロー、ホットピンク、スカイブルーなど)を使用し、元気な印象を与えます。
    * **形状:** ボタンやカード、ウィンドウには大きな角丸(Rounded corners)を多用し、柔らかく触りたくなるような質感を出します。アイコンは太めの線で描かれた遊び心のあるスタイルにします。
    * **フォント:** 親しみやすく、視認性が高い丸ゴシック系の日本語フォントを使用します。
    * **全体の雰囲気:** ユーザーが操作していてワクワクするような、明るくポジティブなUIに仕上げてください。
 * **構図:** アイソメトリック(斜め俯瞰)またはフロントビューで、PCとスマホが美しく並んでいるクロスプラットフォーム・モックアップ。背景はポップなUIを引き立てる明るいスタジオ環境。
 * **テキスト:** 機能を示す正確な日本語テキストを配置。

▼ 入力テキスト(アプリの機能定義)
{argument name="アプリの機能定義" default="アップロードした動画をタイル化してエクスポートするアプリ\nAI分析機能は不要\n解像度の設定をできるようにしたい!"}