视觉与产品 / UI · UX DESIGN

UI设计

让复杂,
回归从容。

兼具美感、易用性与转化力的界面。
以清晰的秩序与细致的交互,连接品牌与每一位使用者。

从业务目标,到每一次交互。

灰白曲面与青绿色空间构成的视觉概念图
视觉概念 / 秩序、层次与流动

01 / 设计理念

好界面,
让体验自然发生。

从业务目标与用户路径出发,梳理信息架构与交互流程,构建兼具品牌感与易用性的界面设计,提升产品使用体验与转化效率。

以信息层级、操作反馈和品牌语言建立一致体验,让重要内容更容易被看见,让下一步行动更明确。

CLARITY / 清晰

有序的信息层级

围绕关键任务组织内容,减少不必要的选择,让用户在每个页面都能找到方向。

CONSISTENCY / 一致

统一的品牌表达

从色彩、字体到组件和状态,构建可以延展的视觉语言,让不同触点保持一致。

CONTINUITY / 连贯

顺畅的任务路径

关注操作前后的反馈与衔接,以交互原型走查关键流程,让体验连贯而清楚。

02 / 服务内容

从体验结构,
到界面的每一处细节。

根据产品阶段与业务场景组合设计内容,贯通体验规划、视觉设计与开发协作。

01

信息架构与交互

梳理内容层级、用户任务与页面关系,通过线框图和交互原型明确核心流程。

信息架构任务路径交互原型
02

品牌界面与视觉规范

将品牌语言转化为界面中的色彩、字体、图形与版式,形成关键页面与视觉规范。

视觉方向关键页面界面规范
03

组件库与设计系统

整理可复用的组件、状态与使用规则,支持后续功能扩展和多团队协作。

组件与状态设计变量使用规则
04

响应式与设计交付

考虑不同屏幕和使用环境,说明布局适配、交互反馈与异常状态,配合开发实现。

多端适配交互说明开发协作

03 / 协作流程

每一步,都有清晰的方向。

  1. 01 / DISCOVER

    理解问题

    明确业务目标、目标用户、关键使用场景与项目范围。

  2. 02 / DEFINE

    定义体验

    梳理信息架构和任务路径,以原型沟通核心交互。

  3. 03 / DESIGN

    构建界面

    建立视觉方向,展开关键页面、组件与状态设计。

  4. 04 / DELIVER

    协作落地

    整理适配规范与设计说明,配合开发沟通和界面走查。

车载座舱界面

座舱课题的三种合作方式。

我们设计屏幕里的内容,不做屏幕硬件。

Workshop · 结构工作坊

3–5 个工作日

把一个屏位的任务链走完,输出问题清单与不可谈判项草案。适合立项前对齐。

交付

  • 任务走查记录
  • 问题与风险清单
  • 不可谈判项草案(1 页)
  • 下一阶段建议

不包含

视觉终稿、软件开发

Sprint · 课题冲刺

4–8 周

围绕一个明确课题(如空调路径、单屏底栏、海外适配),完成研究、决策与证据包。

交付

  • 问题定义与约束表
  • 决策说明(含舍弃项)
  • 关键状态静帧与动态
  • 状态与告警抢占矩阵
  • 量产标注草稿

不包含

长期驻场研发、操作系统底层、硬件选型

Partnership · 驻场伙伴

按季度,可续

嵌入座舱团队,按评审门禁推进多个课题。适合平台车型或持续 OTA。

交付

  • 季度课题看板
  • 评审门禁纪要
  • 按车型或 OTA 的交接包

不包含

未经授权的对外命名、没有任务依据的纯视觉包装

评审门禁:不过门,不往下做

  • 问题没定义清→不进视觉终稿
  • 任务路径没走完→不谈图标体系
  • 告警抢占没写清→不交给软件
  • 对外命名与承诺→须客户批准

04 / 相关案例

在不同场景中,呈现体验的价值。

探索站内已有的界面与多端视觉项目。

爱奇艺内容平台界面展示

内容平台 / 多端视觉

爱奇艺

让内容成为体验的中心。

网页端与多端视觉系统,围绕内容的沉浸体验和智能推荐,组织平台的视觉层次与品牌表达。

界面视觉内容层级多端体验
探索项目
滴滴企业版数字界面展示

企业服务 / 数字界面

滴滴企业版

让专业服务更清晰易用。

网页端与多端视觉系统,以智能出行的管理场景为基础,表达企业服务的专业性与平台品质。

企业场景平台视觉多端系统
探索项目

START A CONVERSATION / 开启交流

下一段体验,
从一次交流开始。

告诉我们产品阶段、使用场景与希望解决的问题,一起明确设计目标与协作方向。

沟通项目需求

常见问题

我们先明确业务目标与用户路径,再整理信息架构和交互流程。界面同时照顾品牌识别与易用性,目标是更好的使用体验和更高的转化。

清晰:围绕关键任务组织内容,减少不必要的选择。一致:从色彩、字体到组件构建可延展的视觉语言。连贯:关注操作前后的反馈与衔接。

发现:明确业务目标、目标用户、关键场景。定义:梳理信息架构和任务路径。设计:建立视觉方向,展开关键页面与组件。交付:整理适配规范与设计说明。

核心流程的线框图和交互原型、关键页面与组件的视觉设计、可复用的组件库与状态规则、不同屏幕的适配规范与交互反馈。

项目合作前,先明确这些问题

选择UI设计公司时应看哪些内容?

UI设计应以实际业务任务为起点。

界面设计需要说明用户任务、信息结构、操作状态和异常反馈,再建立视觉与组件规则;通过实际流程原型检验理解和操作。

可以结合界面设计系统和交互原型设计的具体应用,核对合作方的方法、交付范围与样稿,确认与本项目需求是否相符。

如何安排UI设计流程,评估UI设计费用?

启动前可准备:

  • 目标用户
  • 核心流程
  • 现有系统
  • 技术实现边界

合作流程:

  1. 确认问题、合作范围与评审节点
  2. 研究
  3. 方案
  4. 样稿验证
  5. 交付

费用与周期取决于:

  • 研究深度
  • 应用数量
  • 语言版本
  • 制作协同

具体报价、修改轮次、使用权和实施责任需要在项目约定中写清。

沟通项目需求