把一座城市，
折进可以探索的谜题。A city, folded
into a world to explore.
折光庭是我自主发起的空间解谜体验设计。我以新加坡景点为创作线索，建立八关的场景视觉、鱼尾狮角色与交互构想，并借助 AI 将其中的基础转桥与升降机制做成可操作原型。这个项目连接了我的两个设计方向：系列化视觉表达，以及清晰、可探索的 UI/UX 体验。Foldlight is a self-initiated spatial puzzle design. Drawing on Singapore landmarks, I developed eight scene concepts, a Merlion character and an interaction direction, using AI to turn the foundational bridge and lift mechanics into working prototypes. The project brings together two areas of my practice: a coherent visual series and clear, explorable UI/UX.
我希望玩家在熟悉与想象之间探索新加坡：保留地标最有辨识度的轮廓，再把它们转化为庭院、廊桥与机关。低压力的氛围与明确的视觉线索，共同支撑这段探索。I wanted players to discover Singapore between recognition and imagination: retain distinctive landmark silhouettes, then translate them into courtyards, passages and mechanisms. A calm atmosphere and clear visual cues support the journey.
超级树的高架结构、莲花的曲面、摩天轮的圆环，为不同关卡提供构图骨架。地标意象同时延伸到前景的细小装饰。Elevated Supertree structures, curved lotus forms and Flyer rings provide compositional frameworks, with related motifs carried into small foreground details.
城市特征 → 空间构图City feature → Spatial composition象牙色道路、珊瑚色活动结构、黄铜机关与青玉配重各有职责。色彩配合形状和位置，让可操作部分更容易被注意到。Ivory paths, coral moving structures, brass controls and jade weights each have a role. Color works with shape and placement to make interactive elements noticeable.
视觉层级 → 操作识别Visual hierarchy → Recognizable actions柔和体积光、石质拱廊与简化几何贯穿八关；每关通过雾色、轮廓、植物和灯光保留独立情绪。Soft volumetric light, stone arcades and simplified geometry connect the series, while mist, silhouettes, foliage and lighting give each scene its own mood.
统一语言 → 场景变化Shared language → Scene variation以共同的视觉系统承载不同的机关构想。点击任一画面，查看完整设计图与对应的视觉、体验思考。A shared visual system supports distinct puzzle ideas. Open any scene to view the complete artwork and its visual and experience rationale.
我将鱼尾狮转化为亲近、轻盈的探索角色：圆润的比例与弯弯笑眼，呼应场景的柔和气质；珊瑚色鬃毛与青绿色鱼身，则让它在浅色石台上保持辨识度。I shaped the Merlion into an approachable, light companion. Rounded proportions and smiling eyes echo the scene’s softness, while a coral mane and teal fish body remain distinctive against pale stone.
我把入门体验拆成两种容易观察的空间变化：平面转桥与垂直换层。界面将操作留给道路和机关本身，提示按需出现，让探索保持连贯。下面可以直接体验前期两关的基础机制。I framed the introduction around two observable spatial changes: rotating a bridge and moving between floors. Paths and mechanisms act as the controls, with help available on demand. Explore the two foundational prototypes below.
可操作网页原型：转桥、升降、点灯与通关。点击石台行走，使用下方图标或黄铜把手操作；问号查看玩法，灯泡查看提示。Working web prototypes with bridge rotation, elevation, lighting and completion. Click a platform to move; use the lower icons or brass handle to operate. The question mark opens instructions and the bulb offers a hint.
选择一个原型，开始观察道路与机关。Choose a prototype and explore its paths and mechanisms.
我将八关规划为递进的学习路径：从直接观察连接，到理解联动、复用资源，再把多个条件放在一起考虑。每关引入一个主要思考点，让视觉主题与体验目标同时推进。I planned a learning sequence from reading connections to understanding coupling, reusing resources and considering multiple conditions together. Each level introduces a main thinking task, aligning its visual theme with an experience goal.
先用单一转桥建立基本认知：道路会随操作改变，固定石台是安全的观察位置。One rotating bridge introduces changing connections and a fixed platform as a safe place to observe.
这里展示的是学习顺序与难度递进的设计目标；实际难度和通关时长仍需通过后续试玩评估。This sequence represents intended learning and difficulty progression. Actual challenge and completion time still require playtesting.
主要信息是角色、可达道路与当前机关。场景内不烘焙说明文字，外围界面保留少量图标；操作说明与提示由玩家主动打开。The character, reachable paths and current mechanism carry the main information. Instructions are not baked into the artwork; a small set of surrounding icons offers help on demand.
路径未接通时给出反馈，移动过程中限制重复操作；点灯与通关呈现状态变化，重新开始入口保持可见。让玩家知道当前发生了什么、接下来可以尝试什么。Disconnected paths return feedback and movement limits repeated inputs. Lighting and completion show state changes, with restart kept visible. Players should understand what happened and what they can try next.
这个项目的难度，来自三件事需要同时成立：八种场景要形成系列，活动建筑要表达功能，操作后的空间变化要能被理解。我从视觉系统和 UI/UX 规则两端组织设计，再借助 AI 推进原型实现。The challenge was to make three things work together: eight scenes must form a family, moving architecture must express its function, and spatial changes must remain understandable after an action. I organized the work through both a visual system and UI/UX rules, using AI to support prototyping.
八处地标有不同的形态、环境与情绪。设计需要同时控制系列识别度与单关的记忆点。The landmarks differ in form, setting and mood. The design must balance a recognizable series with a memorable identity for each scene.
共同的石质语言与角色配色作为基础，再以轮廓、雾色和局部装饰组织变化。Shared stone architecture and character colors provide a foundation, with silhouettes, mist and local details creating variation.
桥梁既是构图中的线条，也是会改变路径的机关；过强的装饰可能分散对路面与目标的注意。A bridge is both a compositional line and a route-changing mechanism. Strong decoration can compete with paths and destinations.
把固定道路、活动结构、操作把手与目标分别编码，重要信息集中在行走与观察区域。Give fixed paths, moving structures, handles and goals distinct cues, concentrating important information where players move and observe.
转桥与升降会不断改变可达位置。玩家需要知道自己在哪里、哪些路已接通，以及何时可以继续操作。Bridge and lift movements continually change reachable locations. Players need to know where they are, which paths connect and when they can act again.
用明确停靠点、连续移动、灯光状态和操作反馈形成完整的交互链。Use explicit stops, continuous movement, light states and input feedback to form a complete interaction loop.
我将视觉与交互要求转成明确任务，Codex 协助编写实现。这里的技术选择，都对应一个查看者能够感受到的设计结果。I translated visual and interaction requirements into focused tasks, with Codex supporting implementation. Each technical choice below serves an outcome the viewer can experience.
以坐标描述平台、桥与角色，再投影到二维画面。矢量绘制让道路可以随机关状态变化，并为点击区域提供对应位置。Platforms, bridges and the character are described with coordinates and projected into a two-dimensional view. Vector rendering updates the paths with the mechanism state and provides matching hit areas.
转桥方向、升降停靠层与点灯状态决定当前连通的道路。点击目标后，原型先查找可达路径，再让角色沿路径移动。Bridge direction, lift floor and shrine state determine the active connections. On a destination click, the prototype finds a reachable path before moving the character along it.
逐帧动画呈现旋转、升降与行走，并在移动期间控制重复输入。图像、样式与交互打包到 HTML，便于直接打开、分享与体验。Frame-based animation presents rotation, elevation and movement while controlling repeated input. Images, styles and interactions are packaged in HTML for direct opening, sharing and exploration.
我希望玩家“站稳、观察、再改变道路”。实现将这一体验拆成四类状态，并对每个状态下的可达位置进行检查。The intended experience is to settle, observe and change a route. The implementation expresses this through four bridge states and checks the reachable locations in each.
| 桥的方向Bridge direction | 当前连接Active connection | 交互含义Interaction meaning |
|---|---|---|
| 入口Entrance | 入口 ↔ 中央石台Entrance ↔ Central platform | 先抵达稳定的观察位置Reach a stable place to observe |
| 灯台Shrine | 中央石台 ↔ 灯台Central platform ↔ Shrine | 建立一个清晰的阶段目标Introduce a clear intermediate goal |
| 光门Light gate | 中央石台 ↔ 出口方向Central platform ↔ Exit route | 点亮灯台后才能完成Complete after lighting the shrine |
| 空处Open space | 只有中央与桥面相连Center connects only to the bridge | 允许继续观察与调整Allow further observation and adjustment |
两关原型的程序规则检查覆盖 180 个可达状态，均保留到达终点的路径；同时检查桥面占用、升降停靠、点灯前置条件和移动中角色位置。此结果说明程序规则的连通性，交互易用性仍需后续任务测试。Programmatic checks cover 180 reachable states across the two prototypes, each retaining a route to completion. Checks also cover bridge occupancy, lift docking, shrine prerequisites and character position during movement. This establishes rule connectivity; usability still needs task-based testing.
我以视觉和体验目标组织协作：先定义主题、风格与探索方式，再把任务拆分为场景、角色、机关规则和可操作原型。AI 协助生成与实现，我负责建立设计语言、安排内容层次，并决定每一阶段要表达的设计意图。I organized the collaboration around visual and experience goals: establish the theme, style and mode of exploration, then separate the work into scenes, character direction, interaction rules and prototypes. AI supports generation and implementation; I define the design language, structure the content and set the intent for each stage.
新加坡八景、柔和立体感、石质庭院、可爱鱼尾狮，以及每关不同的场景情绪。Eight Singapore landmarks, soft dimensionality, stone courtyards, an approachable Merlion and distinct moods for each scene.
用场景与角色参考组织图像生成，分别描述地标轮廓、色彩、材质、光线和功能性元素。Use scene and character references to guide image generation, specifying silhouettes, color, materials, light and functional elements.
八张可作为系列展示的场景图，以及贯穿其中的角色与功能色彩设定。Eight scenes presented as a coherent series, supported by a character direction and functional color roles.
点击道路前行、改变建筑形成通路、以点灯作为阶段目标，并逐步增加思考层次。Click paths to move, change architecture to create connections, use lighting as an intermediate goal and progressively deepen the thinking task.
把“观察—操作—反馈”的体验链拆成具体状态，让 AI 协助制作网页原型和检查通行规则。Break the observe–act–respond loop into explicit states, with AI helping build the web prototype and check traversal rules.
两关可直接体验的基础机制原型，用来展示操作方式、状态反馈与入门路径。Two playable foundational prototypes that demonstrate controls, state feedback and the introductory journey.
协作工具：Codex 与 AI 图像生成。项目以自主设计探索为背景；此处呈现设计产出与原型体验，不预设商业转化、使用效率或用户增长结论。Collaboration tools: Codex and AI image generation. This self-initiated project presents design outputs and prototype experiences, without claiming commercial, efficiency or growth outcomes.
我把 AI 协作建立在三个可复用的步骤上：把设计意图说清楚，按视觉与交互任务组织工作，再把结果整理成便于展示和体验的交付物。这让我能够在不同项目和工具条件下，持续推进从概念到原型的设计工作。My AI collaboration follows three reusable steps: articulate the design intent, organize work into visual and interaction tasks, then package the result for presentation and use. This approach carries concept-to-prototype design work across different projects and toolsets.
以八处新加坡地标建立视觉内容体系，让统一的材质、色彩和角色贯穿不同场景。Eight Singapore landmarks form a visual content system, with shared materials, colors and character direction across varied scenes.
将转桥和升降做成网页体验，让查看案例的人直接感受操作、反馈与目标之间的关系。Bridge and lift prototypes let viewers directly experience the relationship between controls, feedback and goals.
用功能色彩、空间层级和角色动态连接视觉表达与交互理解，并形成八关的递进构想。Functional colors, spatial hierarchy and character motion connect visual expression with interaction, supporting an eight-level progression concept.
从主题意象出发建立艺术方向，把城市特征转译成构图、角色、配色与材质，再组织成能持续扩展的系列内容。我的关注点是识别度、氛围与视觉一致性。Establish an art direction from a theme; translate city features into composition, character, palette and materials; then organize them into an extendable series. My focus is recognition, atmosphere and visual coherence.
从玩家的观察与操作出发，安排界面层级、功能线索、状态反馈和学习顺序；借助可交互原型，让抽象体验构想变成可以讨论、尝试和继续评估的设计。Start from what players observe and do to define interface hierarchy, affordances, feedback and learning order. Interactive prototypes make experience ideas tangible enough to discuss, try and evaluate further.
当前成果包括场景视觉、角色设定、关卡构想与网页原型。下一步会围绕操作发现、信息可读性与关卡学习节奏开展任务测试。Current outputs include scene art, character direction, level concepts and web prototypes. The next step is task testing focused on discoverability, readability and the learning pace.
我能为团队与合作伙伴带来从视觉概念、界面与交互，
到 AI 辅助原型和展示交付的设计推进能力。I help teams and collaborators move from visual concepts, interfaces and interactions
to AI-assisted prototypes and presentation-ready design outcomes.
