界面设计

根据用户行为数据创建美观且易用的界面

大多数网站由于设计不佳的 UX (User Experience) 而流失客户。过于复杂的订单表格、不明显的导航、过载的菜单或手机屏幕上难以阅读的字体,都会促使用户关闭标签页并转投竞争对手。视觉设计不仅要“令人喜欢”,还要解决业务问题——引导访问者沿着转化漏斗完成购买或提交申请。

我们基于UX研究和行为心理学来设计界面。我们分析热力图和网站录屏,开发客户旅程地图(CJM - Customer Journey Map),在Figma交互原型上测试假设,只有在此之后才会开始绘制最终的视觉布局(UI)。

我们设计稿上的每个按钮、表单和界面元素之所以出现在特定位置,绝非仅仅为了“美观”,而是因为得到了最佳可用性实践和雅各布·尼尔森 (Jakob Nielsen) 启发式评估的证实。

  • 竞争对手、目标受众分析及客户旅程图 (Customer Journey Map) 构建
  • 创建用于确认逻辑的交互式原型 (wireframes)
  • 针对任何屏幕的响应式布局开发(Mobile-First)
  • 开发完整的系统化设计(组件、UI-Kit、样式)
  • 在Figma中按像素网格准备布局,以实现快速切图

+40%

在进行全面的UX/UI重新设计后,网站的平均转化率(CR)增长

0.05 秒

访客对品牌形成第一印象所需的内容

100%

响应式设计 — 所有版式均包含基于网格的移动端和平板端版本

Figma

24/7 共享布局访问的现代设计标准

基于 Atomic Design 方法论的设计系统

我们使用细小的可复用原子和分子(按钮、输入框、卡片)来组装界面。这确保了100%的风格一致性,并将后续程序员的开发速度提升了2倍。

我们的理念

高质量 UX 设计的三条规则

我们设计能够帮助用户以最快速度完成任务的界面。

设计前的原型制作

我们绝不会直接开始绘制精美的图形。首先,我们创建一个交互式的黑白原型(Wireframe)。在此阶段,我们将确认转换逻辑、模块组成、目录结构和申请表单。

这节省了项目时间,并允许在不进行昂贵的布局修改的情况下调试逻辑。

Mobile-First 概念

现代互联网中高达 80% 的流量来自手机。我们以智能手机屏幕为导向设计界面。精心考量单手手指点击元素的便捷性、字体大小和对比度。

无论是小屏幕还是超宽 4K 显示器,您的网站都将同样便于使用。

可点击的 Figma 原型

我们交付的方案不是静态图片,而是在Figma中构建的交互式可点击原型。您可以在智能手机或电脑上打开链接,点击按钮、菜单和输入框。

这使得在程序员开始工作之前,就能全面体验未来的网站。

流程

界面设计阶段

从分析和原型到构建 UI 套件并交接给前端的设计分步路径。

01

UX 研究与需求沟通

研究公司的业务目标,确定用户画像,对竞争对手网站进行审计,收集结构需求。

02

客户旅程图 (CJM)

绘制用户从首次进入网站到成功发送请求的路径地图,消除不必要的步骤和障碍。

03

创建原型

开发所有关键屏幕的示意性黑白布局 (wireframes)。确定元素排列和文本。

04

设计概念

创建 2-3 个主页的视觉设计方案:选择字体、颜色、图形风格,并确定整体美学。

05

所有屏幕设计

将所选风格扩展到所有内部页面、表单、弹出窗口和购物车。创建平板电脑和智能手机的设计稿。

06

构建 UI-Kit 并交付给开发人员

设计设计系统:字体网格、颜色、按钮状态(悬停/激活/禁用)。配置图标和图片的导出供前端开发人员使用。

我们的技术栈

UI/UX 设计师的工具

我们使用现代专业界面设计工具。

Figma UI & Design Systems

界面开发的主要工具。允许使用自动布局(Auto-layout)、变体(Variants)设计组件,并组织实时团队协作。

Adobe Photoshop & Illustrator

用于在导入设计稿之前,进行深度照片修饰、拼图制作以及复杂矢量图形、图标和 Logo 的绘制。

Principle & Lottie Files

用于创建界面动画原型并将矢量动画导出为JSON格式的软件。这使程序员能够轻松地将动画迁移到运行中的网站,而不会降低质量。

价格方案

UI/UX设计价格

费用取决于项目规模、唯一页面数量以及对交互原型图的要求。

功能与特性 落地页设计 用于展示单一产品或服务 40 000 ₽ 期限:最多 7 天 订购 热门 企业形象设计 多页企业网站界面 70 000 ₽ 期限:最多 14 天 订购 网店设计 大型电子商务系统设计 110 000 ₽ 起 期限:20天起 讨论
独特的页面布局 1 个页面(最多 7 屏) 最多 15 个页面 最多 30 个页面(包含个人中心)
交互式可点击原型 页面基础过渡效果 在 Figma 中进行完全界面模拟
响应式移动端版式 智能手机版本 智能手机 + 平板电脑网格布局 智能手机 + 平板电脑网格布局
构建设计系统和 UI-Kit 基础字体与颜色 成熟的组件 UI-Kit 包含 Token 和 State 的设计系统
风格概念数量 1 个风格概念 2 个方案供选择 3 个方案供选择
准备图形资源文件 导出SVG/PNG 导出 + 大小优化 导出 + 优化 + Lottie动画
FAQ

关于UI/UX设计的常见问题

想要更新现有网站的外观或设计新 Web 应用程序的界面吗?留下申请,我们的艺术总监将为您提供免费咨询。

  • 什么是UI/UX设计,它们之间有什么区别?

    UX (User Experience) 即用户体验。 settled 它是界面的工作逻辑:导航便利性、模块结构、表单字段数量、文本通俗易懂程度。即用户完成购买的容易程度。UI (User Interface) 即用户界面。 settled 它是视觉设计:颜色、字体、图标、插图、按钮、动画。简单来说:UX 是骨架和逻辑,UI 是皮肤和美感。我们始终紧密结合设计这两个部分。
  • 您提供多少种设计概念供选择?

    在视觉概念创建阶段(通常是落地页首页或系统关键屏幕的设计),我们开发 2 种在氛围、调色板、排版和网格方面有所不同的概念。您选择最符合您品牌价值的一个,我们会根据您的反馈将其打磨至完美。项目的内部页面严格按照选定并批准的概念进行设计。
  • 你们能为我们当前的网站进行重新设计吗?

    是的,改版重构是我们的常态任务之一。我们从 Web 分析的角度来切入。首先,我们研究 Yandex Metrika 和 Google Analytics 的数据:热力图、销售漏斗、设备报告。找出用户最常关闭网站的页面。然后重新设计 UI,消除障碍,同时保留 URL 地址结构,以免损害网站现有的 SEO 推广。
  • 您以什么格式将设计图交付给程序员进行前端排版?

    设计稿以Figma项目链接的形式交付。所有元素按组件分组,并配置了用于自适应的Auto-layout网格。程序员可以进入检查模式(Inspect)并复制现成的字体、阴影、间距和尺寸的CSS样式。所有图标都转换为SVG矢量格式,图片已为导出做好准备,这消除了布局错误并保证了Pixel-Perfect效果。
UI/UX 原型设计

想创建一个现代、易用且具有高转化率的设计吗?

提交申请——我们的首席设计师将研究您当前的网站,指出关键的可用性错误,并为您准备界面设计方案。

订购界面设计