DESIGN · UI/UX

网站 UI 界面设计

从设计规范体系到交互原型,打造既好看又好用的数字产品界面

UI设计理念
UI + UX

UI 不是"皮肤",是品牌气质 + 用户体验的双重载体

很多人以为 UI 设计就是"给产品画漂亮界面",其实不然。庆新创联的 UI 设计,是从用户研究出发,先用线框图理清信息架构与操作路径,再用视觉界面传递品牌调性——最终产出的是一套完整的设计规范体系,而不是几张孤立的设计图。

我们支持 Figma / Sketch 双平台交付,组件化设计让开发对接高效精准,设计系统可持续迭代。

  • 先交互后视觉,信息架构先行
  • 组件化设计系统,开发对接零损耗
  • 多端适配:PC / 平板 / 手机独立设计
  • Figma 源文件交付,协作与迭代便捷
DESIGN SYSTEM

UI 设计规范体系

不是零散的页面图,是可复用、可扩展、可协作的完整设计系统。

01

色彩系统

品牌主色 / 功能色(成功/警告/错误/信息)/ 中性色阶(10-90% 灰度),每个色值配 Figma Variable。

02

字体排版

标题层级 H1-H6 / 正文 / 注释 / 数字字体,统一字号 / 行高 / 字距规范,支持中英文混排。

03

间距布局

4px 基础网格 / 栅格系统(12 列)/ 组件间距规范,整个界面视觉节奏统一有呼吸感。

04

组件库

按钮 / 输入框 / 卡片 / 导航 / 弹窗 / 表单 / 数据展示组件,每种含默认/悬停/点击/禁用状态。

05

图标系统

统一线性 / 面性风格,16/24/32/48 四个标准尺寸,支持 SVG 矢量导出。

06

微动效

过渡时长 / 缓动曲线 / 滚动动画规范,让交互反馈自然流畅不生硬。

INTERACTION PROTOTYPE

交互原型设计说明

原型不只是"画页面",是模拟真实操作流程,提前发现体验问题。

STEP 01

用户路径梳理

梳理核心用户旅程图(User Journey Map),明确关键场景与操作路径,识别体验痛点。

STEP 02

低保真线框

用黑白灰线框图快速搭建信息架构,聚焦"放什么、在哪、顺序如何",不陷入视觉细节。

STEP 03

可点击原型

Figma / Axure 实现页面跳转、弹窗、表单交互等真实行为,可在手机预览全流程。

STEP 04

交互说明文档

每个组件的状态变化、边界条件、异常处理都有明确说明,开发对接无歧义。

STEP 05

可用性测试

内部走查 + 目标用户小范围测试,发现认知偏差与操作障碍,迭代优化。

STEP 06

高保真视觉

交互原型确认后,应用设计系统完成高保真视觉界面,确保像素级精准。

UI CASES

UI 设计案例展示

不同行业、不同调性的界面,见证设计系统的落地力量。

STYLE CO 电商UI
电商 UI · 时尚

STYLE CO. 时尚电商 App UI

卡片流商品浏览 + 极简详情页,降低决策路径,移动端优先提升转化率 38%。

LEARN 教育UI
教育 UI · 在线课程

LEARN ACADEMY 在线教育 UI

学习路径可视化 + 进度追踪仪表盘,清新明亮视觉语言降低学习压力感,完课率提升 25%。

AERO TECH SaaS UI
SaaS UI · 数据平台

AERO TECH B 端管理后台 UI

深色科技风 + 数据可视化组件库,复杂信息层级清晰,操作效率提升 30%。

FAQ

UI 设计常见问题

UI 设计和平面设计有什么区别?
平面设计是静态的(海报/名片/包装),UI 设计是交互的,需要考虑点击、跳转、状态变化、不同屏幕尺寸等。UI 设计师需要懂用户体验、信息架构、前端开发基础。
你们用什么工具交付?开发能直接用吗?
我们用 Figma 设计,支持组件化 + Auto Layout,开发可以直接导出 SVG / PNG 切图,也可以对接蓝湖 / MasterGo 等协作平台,设计还原度 95%+。
改版老系统的 UI 你们能做吗?
可以。我们会先梳理现有系统的页面结构、用户行为数据、开发框架,再制定渐进式改版方案,确保用户体验提升的同时不影响业务连续性。
做 UI 设计需要多长时间?
取决于页面数量与复杂度。一个典型官网(10-15 页)约 2-3 周;SaaS 后台(30-50 页面)约 4-6 周。我们会先做工作量评估再报价。
让你的数字产品界面既有品牌感又有好体验
设计规范体系搭建 · 交互原型验证 · 多端适配 · Figma 源文件交付