創作者社群案例

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 製作原創視覺參考與宣傳素材,並未描述原生三維應用功能。

怎樣避免復古介面好看卻難用?

讓可見操作元件對應明確任務,把相同介面狀態與簡單版式比較,並測試真實實現。懷舊外觀本身不能證明導航好用。

為復古概念找到自己的視覺身份

先確認正面圖、螢幕區域和操作元件層級,再製作電影感產品畫面。