创作者社区案例

GPT-6 Astra 的 iPod 演示,怎样设计复古产品界面

带有杏色内嵌弧面的象牙白陶瓷圆环,斜立于炭灰色圆盘上
为 Ciyo 本文生成的 AI 抽象插画,创作者的实际作品见嵌入帖子。

Pietro Schirano 让 Astra 制作一款 Mac 应用,用 Blender 建出的三维 iPod 和熟悉的界面呈现 Codex 任务。X 视频里,桌面上出现一件硬件造型的对象,小屏幕中放着菜单。回复很快聊到其他 iPod 灵感项目,以及这东西能不能运行 Doom。

值得借鉴的内容比拟物设计回来了更具体。熟悉的物件既提供视觉语言,也让用户对控件产生预期。本文为一款现代笔记应用设计原创随身录音机概念,先在 Ciyo 中确定外观,再考虑单独的交互实现。

看看硬件比喻怎样承载任务

作者明确要求 Blender 制作三维 iPod、Mac 应用和 Codex 任务导航,并报告约十五分钟得到结果。录屏支持存在一份硬件式界面演示,但不能当作可用性研究或生产就绪测试。

本文延续实体物件的视觉思路,并重新设计外观。虚构录音机采用小矩形屏幕、大小有别的两个按钮和暖灰色外壳,形成清楚的产品识别特征。

先选择物件应该帮助理解的任务

录音机概念只承担一件事,选择一条已保存笔记,并看清是否可以开始审阅。三个界面状态足以检验想法,简短笔记列表、选中的笔记和空状态。装饰性硬件不应遮挡这些状态。

增加斜面和反光之前,请 Astra 把每个控件对应到具体任务。纯装饰按钮要在说明里写清楚。渲染出的控件看起来能操作,因此后续实现应让它的用途明确,否则就应去掉。

原创随身录音机界面方案
部件用途视觉处理
屏幕展示三个简短笔记标题高对比、简洁的矩形
主按钮打开选中笔记较大的圆形按钮,使用一个强调色
次按钮返回列表更小、更安静的控件
状态灯表示选中状态小指示灯,实际界面同时提供文字说明
外壳框定任务区域暖灰材质与克制边缘明暗

探索材质时,固定控件位置

在 Ciyo 中先做正面概念,给屏幕明确留出区域。随后保持外壳轮廓和控件位置不变,只探索材质。哑光灰色与半透明琥珀色,可以回答一个范围清楚的视觉方向问题。

实际界面文字应留在设计或编码工具的独立层里。生成渲染能说明色彩和材质,小屏幕上的生成文字却不适合充当导航依据。交给客户审阅时,标明这是一张概念图。

让材质要求服从可读性

第一张渲染选择接近正面的镜头和安静背景。夸张透视让硬件更有戏剧感,却压缩了屏幕可用空间。功能性的正视图确认后,再为宣传素材尝试电影感角度。

把 Ciyo 输出与控件方案对照。模型若增加了按钮或改变屏幕形状,先修正这些特征,再请求另一种表面效果。后续营销视图都保留同一张已确认参考。

原创复古录音机视觉提示词
为笔记审阅应用设计一台原创虚构随身录音机。使用暖灰色外壳、简洁矩形屏幕区、一个较大的低饱和橙色主按钮、一个较小次按钮和一盏小状态灯。视角接近正面,外形与现有品牌音乐播放器有明显区别。材质明暗保持克制,背景使用安静的象牙色。不渲染精确界面文字。给出正视图说明、两种材质备选,以及位置必须固定的控件清单。

按真实使用尺寸检查这个比喻

把同样三个屏幕状态分别放进硬件概念和普通矩形界面,比较硬件处理是否帮助人理解操作位置。这是建议采用的审阅练习,并非本文声称已经完成的测试。记录具体困惑,例如读者是否期待一个装饰转盘能够滚动。

真正实现时,将平面素材参考和行为说明交给单独的编码流程。实际界面的重要文字和控件需要可访问。要求三维旋转时,要另做并测试真实几何,Ciyo 渲染无法提供不可见表面。

从概念到界面的交接
材料能说明什么还需要实现什么
正面渲染材质、轮廓和层级真实可操作控件
三个屏幕状态预期任务推进导航和数据处理
控件对应表每个可见部件的用途键盘、焦点与无障碍标签
营销角度宣传构图所宣称的三维旋转或动画

任务清楚后,再制作宣传图

正面图确认后,沿同一参考体系制作前侧主视觉,设备旁给可编辑产品文案留白。短而克制的动态素材可以介绍概念,但产品尚未实现时,不应让人误以为应用已经可用。

原演示的一部分趣味来自旧物件与现代任务的结合。自己的版本也需要独立任务和视觉身份。交付时把可运行界面与宣传渲染分别整理,让审阅者知道眼前是哪一种材料。

关于这个制作流程

Ciyo 能制作演示中的三维 iPod 应用吗?

原演示使用独立的 Mac 应用和 Blender 流程。本文用 Ciyo 制作原创视觉参考与宣传素材,并未描述原生三维应用功能。

怎样避免复古界面好看却难用?

让可见控件对应明确任务,把相同界面状态与简单版式比较,并测试真实实现。怀旧外观本身不能证明导航好用。

为复古概念找到自己的视觉身份

先确认正面图、屏幕区域和控件层级,再制作电影感产品画面。