← → / 空格翻页 · 亦可左右滑动

视觉风格探索 · 设计陈述

StyleShift:为设计师打造的直观风格转换工具

韩雨坤MC56909 · 杜佳洺MC569281

一、为什么制作这个工具?

目标与痛点

目标用户:视觉传达设计师、插画师、创意工作者。

设计痛点:

我们的解决方案:StyleShift 帮助设计师在设计过程中快速完成风格转换,一键查看相同元素的不同风格,节省时间,激发灵感。

二、如何在视觉传达设计过程中使用?

1. 风格探索

StyleShift 贯穿设计的探索阶段与深化阶段

上传设计稿,在油画、水彩、赛博朋克、水墨等多种风格间自由切换,快速预览不同风格的视觉表现,帮助设计师拓宽思路

风格选择界面:油画风、水彩风、复古风、赛博朋克、波普艺术、水墨风、素描风、霓虹光效等预设

二、如何在视觉传达设计过程中使用?

2. 元素提取与融合

通过「元素拆解」功能,自动提取画面中的色块元素;可以对局部进行单独风格转换,或将多种风格融合在同一画面中,形成新的、复合的设计语言。

迁移结果预览与元素拆解与替换面板:主色概括程度、分析刷新元素、选区说明等

二、如何在视觉传达设计过程中使用?

3. 精细化调整

支持对选区进行风格强度等参数微调;可通过色调叠加(全局)、颜色覆盖等方式调整画面气质,使最终效果更贴合设计意图。

区域再迁移与精细化:区域参数滑块、色桶、仅此区域再迁移、拾取色覆盖等

三、关键的 UI/UX 设计决策与原因

决策一:从「整体」到「局部」的功能演进

初始设想:仅支持整张图片的风格迁移,满足基本的风格探索需求。

发现问题:设计师往往只需要改变画面中的某个局部(如主体物、背景),而非整张图。整体迁移会导致不需要改变的部分也被「改过头」,破坏原有设计。

迭代方向:局部选区与编辑作为改进版的核心功能,使设计师能够:精确控制修改范围保留画面核心结构、实现多种风格在同一画面中的融合

三、关键的 UI/UX 设计决策与原因

决策二:色块智能选区,降低操作门槛

设计思路:传统选区工具(如魔棒、套索)参数复杂、操作繁琐。我们利用图像分析自动提取主色块,用户只需:

设计原因:让设计师无需学习复杂选区工具,即可快速定位想要修改的区域,把精力集中在创意本身。

迁移结果:画面上紫色区域为智能选中的相连色块
迁移结果预览:风格迁移后的画面与选区示意

三、关键的 UI/UX 设计决策与原因

决策三:三栏布局 + 对比视图

布局逻辑:原始作品 | 风格选择 | 迁移成果——从左到右遵循「输入 → 处理 → 输出」的心理模型,所有操作在一个界面完成,无需跳转。

对比视图:支持拖动分界线左右对比原图和效果图,比传统「前后切换」更直观,尤其适合设计评审与方案汇报

补充:界面提供中英文切换、右侧可拖拽分隔条调节预览区与工具区高度,便于教学演示与小屏设备使用。

迁移结果 · 对比模式:拖动中线左右对照原图与风格化结果
迁移结果 · 分屏模式:左右分栏完整展示原图与结果

三、关键的 UI/UX 设计决策与原因

决策四:历史记录 + 撤销

设计原因:创意过程需要反复尝试。历史条让用户可以保存多个版本进行比较;撤销降低试错成本,鼓励大胆探索。

顶栏:English/中文、撤销、重置、历史、导出

附录 · 操作示意

① 整体界面:左图 · 中控 · 右结果

与「设计风格迁移-改进版」一致:左侧上传原图,中间选风格与参数并生成,右侧看结果与后续拆解工具。

顶栏另有:语言切换、撤销、重置、导出。

StyleShift 整体界面:原始作品、风格选择、迁移结果三栏布局与顶栏操作

附录 · 操作示意

② 上传原图

在左侧虚线区域内点击选择文件,或将图片拖入该区域。支持常见网页图片格式(以工具内说明为准)。

上传成功后,中间「生成」按钮会变可用。

左侧上传区:拖拽上传或点击选择图片,支持 JPG / PNG / WebP(最大 20MB)

附录 · 操作示意

③ 选风格、调滑块、点「生成风格迁移」

在中间栏点选一种风格卡片 → 按需拖动强度、饱和度等 → 可选色调叠加(色点)→ 切换「效果图 / 对比 / 分屏」为生成后的查看方式 → 点击紫色主按钮生成

风格选择:八类风格卡片(油画、水彩、复古、赛博朋克等)
风格强度等滑块、色调叠加色点、效果图 / 对比 / 分屏与「生成风格迁移」按钮

附录 · 操作示意

④ 查看结果:效果图 / 对比 / 分屏

对比:在同一画面内拖动竖线,左为原图侧、右为结果侧。分屏:左右两栏分别完整显示原图与结果。

右栏大图区悬停可出现缩放与下载。

操作演示

⑤ 元素拆解:分析 → 选色块 / 点画面 → 局部再迁移

生成结果后,右下出现面板:先点分析 / 刷新元素 → 列表中点色块或在图上点选相连区域(紫色为选区)→ 为此区域选风格、调区域参数与色桶 → 点仅此区域再迁移

元素拆解面板:区域风格、区域参数滑块、色桶占比、与「仅此区域再迁移」按钮

四、总结

StyleShift 的核心价值

将强大的风格迁移能力,转化为设计师手中直观、可控的创作工具

我们不是简单地做「一键换风格」,而是从设计工作的真实场景出发:

最终,StyleShift 不只是一种技术实现,更是对设计创作自由的一次回应——让风格不再是一次性的整体套用,而是可以被拆解、重组、局部打磨的灵活语言。