← → / 空格翻页 · 亦可左右滑动
视觉风格探索 · 设计陈述
韩雨坤MC56909 · 杜佳洺MC569281
一、为什么制作这个工具?
目标用户:视觉传达设计师、插画师、创意工作者。
设计痛点:
我们的解决方案:StyleShift 帮助设计师在设计过程中快速完成风格转换,一键查看相同元素的不同风格,节省时间,激发灵感。
二、如何在视觉传达设计过程中使用?
StyleShift 贯穿设计的探索阶段与深化阶段。
上传设计稿,在油画、水彩、赛博朋克、水墨等多种风格间自由切换,快速预览不同风格的视觉表现,帮助设计师拓宽思路。
二、如何在视觉传达设计过程中使用?
通过「元素拆解」功能,自动提取画面中的色块元素;可以对局部进行单独风格转换,或将多种风格融合在同一画面中,形成新的、复合的设计语言。
二、如何在视觉传达设计过程中使用?
支持对选区进行风格强度等参数微调;可通过色调叠加(全局)、颜色覆盖等方式调整画面气质,使最终效果更贴合设计意图。
三、关键的 UI/UX 设计决策与原因
初始设想:仅支持整张图片的风格迁移,满足基本的风格探索需求。
发现问题:设计师往往只需要改变画面中的某个局部(如主体物、背景),而非整张图。整体迁移会导致不需要改变的部分也被「改过头」,破坏原有设计。
迭代方向:将局部选区与编辑作为改进版的核心功能,使设计师能够:精确控制修改范围、保留画面核心结构、实现多种风格在同一画面中的融合。
三、关键的 UI/UX 设计决策与原因
设计思路:传统选区工具(如魔棒、套索)参数复杂、操作繁琐。我们利用图像分析自动提取主色块,用户只需:
设计原因:让设计师无需学习复杂选区工具,即可快速定位想要修改的区域,把精力集中在创意本身。
三、关键的 UI/UX 设计决策与原因
布局逻辑:原始作品 | 风格选择 | 迁移成果——从左到右遵循「输入 → 处理 → 输出」的心理模型,所有操作在一个界面完成,无需跳转。
对比视图:支持拖动分界线左右对比原图和效果图,比传统「前后切换」更直观,尤其适合设计评审与方案汇报。
补充:界面提供中英文切换、右侧可拖拽分隔条调节预览区与工具区高度,便于教学演示与小屏设备使用。
三、关键的 UI/UX 设计决策与原因
设计原因:创意过程需要反复尝试。历史条让用户可以保存多个版本进行比较;撤销降低试错成本,鼓励大胆探索。
附录 · 操作示意
与「设计风格迁移-改进版」一致:左侧上传原图,中间选风格与参数并生成,右侧看结果与后续拆解工具。
顶栏另有:语言切换、撤销、重置、导出。
附录 · 操作示意
在左侧虚线区域内点击选择文件,或将图片拖入该区域。支持常见网页图片格式(以工具内说明为准)。
上传成功后,中间「生成」按钮会变可用。
附录 · 操作示意
在中间栏点选一种风格卡片 → 按需拖动强度、饱和度等 → 可选色调叠加(色点)→ 切换「效果图 / 对比 / 分屏」为生成后的查看方式 → 点击紫色主按钮生成。
附录 · 操作示意
对比:在同一画面内拖动竖线,左为原图侧、右为结果侧。分屏:左右两栏分别完整显示原图与结果。
右栏大图区悬停可出现缩放与下载。
操作演示
生成结果后,右下出现面板:先点分析 / 刷新元素 → 列表中点色块或在图上点选相连区域(紫色为选区)→ 为此区域选风格、调区域参数与色桶 → 点仅此区域再迁移。
四、总结
将强大的风格迁移能力,转化为设计师手中直观、可控的创作工具。
我们不是简单地做「一键换风格」,而是从设计工作的真实场景出发:
最终,StyleShift 不只是一种技术实现,更是对设计创作自由的一次回应——让风格不再是一次性的整体套用,而是可以被拆解、重组、局部打磨的灵活语言。