創作者社群案例
GPT-6 Astra 的 iPod 示範,怎樣設計復古產品介面

Pietro Schirano 讓 Astra 製作一款 Mac 應用,用 Blender 建出的三維 iPod 和熟悉的介面呈現 Codex 任務。X 影片裡,桌面上出現一件硬體造型的物件,小螢幕中放著選單。回覆很快聊到其他 iPod 靈感專案,以及這東西能不能執行 Doom。
值得借鑑的內容比擬物設計回來了更具體。熟悉的物件既提供視覺語言,也讓使用者對操作元件產生預期。本文為一款現代筆記應用設計原創隨身錄音機概念,先在 Ciyo 中確定外觀,再考慮單獨的互動實現。
看看硬體比喻怎樣承載任務
作者明確要求 Blender 製作三維 iPod、Mac 應用和 Codex 任務導航,並報告約十五分鐘得到結果。螢幕錄影支援存在一份硬體式介面示範,但不能當作可用性研究或生產就緒測試。
本文延續實體物件的視覺思路,重新設計外觀。虛構錄音機採用小矩形螢幕、大小有別的兩個按鈕和暖灰色外殼,形成清楚的產品識別特色。
原始社群貼文及創作者媒體內容。下文另行介紹在 Ciyo 中的應用方法。
先選擇物件應該幫助理解的任務
錄音機概念只承擔一件事,選擇一條已儲存筆記,並看清是否可以開始審閱。三個介面狀態足以檢驗想法,簡短筆記清單、選中的筆記和空狀態。裝飾性硬體不應遮擋這些狀態。
增加斜面和反光之前,請 Astra 把每個操作元件對應到具體任務。純裝飾按鈕要在說明裡寫清楚。渲染出的操作元件看起來能操作,因此後續實現應讓它的用途明確,否則就應去掉。
| 部件 | 用途 | 視覺處理 |
|---|---|---|
| 螢幕 | 展示三個簡短筆記標題 | 高對比、簡潔的矩形 |
| 主按鈕 | 開啟選中筆記 | 較大的圓形按鈕,使用一個強調色 |
| 次按鈕 | 返回清單 | 更小、更安靜的操作元件 |
| 狀態燈 | 表示選中狀態 | 小指示燈,實際介面同時提供文字說明 |
| 外殼 | 框定任務區域 | 暖灰材質與克制邊緣明暗 |
探索材質時,固定操作元件位置
在 Ciyo 中先做正面概念,給螢幕明確留出區域。隨後保持外殼輪廓和操作元件位置不變,只探索材質。霧面灰色與半透明琥珀色,可以回答一個範圍清楚的視覺方向問題。
實際介面文字應留在設計或編碼工具的獨立層裡。生成渲染能說明色彩和材質,小螢幕上的生成文字卻不適合充當導航依據。交給客戶審閱時,標明這是一張概念圖。
讓材質要求服從可讀性
第一張渲染選擇接近正面的鏡頭和安靜背景。誇張透視讓硬體更有戲劇感,卻壓縮了螢幕可用空間。功能性的正面視圖確認後,再為宣傳素材嘗試電影感角度。
把 Ciyo 輸出與操作元件方案對照。模型若增加了按鈕或改變螢幕形狀,先修正這些特徵,再請求另一種表面效果。後續宣傳視角都保留同一張已確認參考。
為筆記審閱應用設計一臺原創虛構隨身錄音機。使用暖灰色外殼、簡潔矩形螢幕區、一個較大的低飽和橙色主按鈕、一個較小次按鈕和一盞小狀態燈。視角接近正面,外形與現有品牌音樂播放器有明顯區別。材質明暗保持克制,背景使用安靜的象牙色。不渲染精確介面文字。給出正面視圖說明、兩種材質備選,以及位置必須固定的操作元件清單。按真實使用尺寸檢查這個比喻
把同樣三個螢幕狀態分別放進硬體概念和普通矩形介面,比較硬體處理是否幫助人理解操作位置。這是建議採用的審閱練習,並非本文聲稱已經完成的測試。記錄具體困惑,例如讀者是否期待一個裝飾轉盤能夠滾動。
真正實現時,將平面素材參考和行為說明交給單獨的編碼流程。實際介面的重要文字和操作元件需要可訪問。要求三維旋轉時,要另做並測試真實幾何,Ciyo 渲染無法提供不可見表面。
| 材料 | 能說明什麼 | 還需要實現什麼 |
|---|---|---|
| 正面渲染 | 材質、輪廓和層級 | 真實可操作操作元件 |
| 三個螢幕狀態 | 預期任務推進 | 導航和資料處理 |
| 操作元件對應表 | 每個可見部件的用途 | 鍵盤、焦點與無障礙標籤 |
| 行銷角度 | 宣傳構圖 | 所宣稱的三維旋轉或動畫 |
任務清楚後,再製作宣傳圖
正面圖確認後,沿同一參考體系製作前側主視覺,裝置旁給可編輯產品文案留白。短而克制的動態素材可以介紹概念,但產品尚未實現時,不應讓人誤以為應用已經可用。
原示範的一部分趣味來自舊物件與現代任務的結合。自己的版本也需要獨立任務和視覺身份。交付時把可執行介面與宣傳渲染分別整理,讓審閱者知道眼前是哪一種材料。
關於這個製作流程
Ciyo 能製作示範中的三維 iPod 應用嗎?
原示範使用獨立的 Mac 應用和 Blender 流程。本文用 Ciyo 製作原創視覺參考與宣傳素材,並未描述原生三維應用功能。
怎樣避免復古介面好看卻難用?
讓可見操作元件對應明確任務,把相同介面狀態與簡單版式比較,並測試真實實現。懷舊外觀本身不能證明導航好用。
為復古概念找到自己的視覺身份
先確認正面圖、螢幕區域和操作元件層級,再製作電影感產品畫面。