在实际的工作中,UI设计师所负责的工作内容不仅仅只是设计这一环,通常需要与团队成员进行协作,毕竟,UI设计师需要有完善的设计思维与逻辑思维,深入地参与到交互设计的部分。那么,UI设计流程是什么?让我们一起来看看完整的UI设计流程。

1. 架构设计阶段

在UI设计流程中,不管是To B还是To C,信息架构设计UI流程都需要简洁清晰,减少用户的学习成本,让用户在最短的时间内做效率最高的事情。具体的办法就是提炼最核心的主要功能,通过聚焦核心场景对需求进行合理的划分和整合。好的信息架构可以让用户初次就有一个简单且清晰的认知,知道产品大概的用途,可以迅速找到某个功能,并且可以有明显的感知主次分明。总结下制作信息架构来设计UI流程的主要步骤:

  • 了解用户的使用习惯、偏好

  • 用户最关心的有哪些功能

  • 确定关键使用场景和用途

  • 调研竞品的信息架构

  • 卡片分类整理

  • 绘制信息架构

Pixso社区资源插画

2. 整理需求

探索初期的需求通过优先级排序后,得到的是迭代计划的安排,每个迭代做哪些需求以及未来1-3年的需求规划。目前这个阶段定的关键页面主要场景涉及到的需求,一般是基础必备的功能。在设计UI流程考虑需求价值时候,可以从四个维度考虑:

  • 这个需求受众有多大?

  • 这个需求的使用频率是以每天、每周还是每个月为周期?

  • 用户对这个需求是刚需还是无所谓?

  • 这个需求属于当前迭代规划吗?(优先级和重要性)

3. 整理设计步骤

UI设计师不是一个人在战斗,还有前端、后端、测试、产品等等并肩作战。UI设计流程并不是一味的串行,很可能是你输出一部分图,前端开发一部分界面,测试写一部分的测试用例,齐头并进。而且前端开发会涉及到数据的关联逻辑,有些界面必须先行开发,才能支撑其他界面的开发。所以你得搞清楚哪些模块优先级较高哪些较低。根据他们的开发优先级来确定设计UI流程的先后顺序。

Pixso社区资源插画

4. 绘制低保真原型

接下来可以进入UI设计流程绘制低保真原型阶段了。UI设计师拿到产品的原型后千万不能照搬原型不加思考被动工作,可以结合自己的理解给予更细致的交互建议或者更合理的布局优化。

由于探索前期的不确定性,原型图会反复修改,所以建议采用最简单便捷的方式去绘制原型图。以便和项目组成员方便讨论和深入讨论细节和推敲逻辑的合理性,最短的时候内作出修改和调整。点击了解低保真和高保真原型的区别

5. 确定设计风格

确定设计风格是UI设计流程中重要的一个阶段。由于每个角色对美的认知不一样,所以对设计风格也会有各自主观意识。如何减少用户的主观意识,get到用户甚至是牵引用户喜欢的设计风格呢?其实不外乎以下几点:

  • 明确项目背景,提炼核心目的

  • 提取用户特征,主要角色有哪些,关注点各自是什么和宏观要求

  • 提炼3-5个关键词

  • 根据关键词头脑风暴关联

6. 设计高保真原型

这是设计UI流程前期探索阶段的的最后一步。输出直观的可视化页面,远远比一堆文字和报更能触动人心和说服力。除了商业价值和收益估算,直接影响立项的重要一环就是关键页设计。

这个就是考验设计功底部分了,此处需要再次回顾竞品分析总结的共性部分,以及UI设计流程上阶段设计风格里面涉及关键词的参考图。建议设计之前一定要浏览学习大量设计前沿的一些优质作品,拔高眼界,设计出高质量不平庸的作品并且交付给开发同学。点击了解高保真原型图怎么做

Pixso社区资源插画

7. 进行设计走查

UI设计流程中最后一步便是进行设计走查。在走查完最后一轮并且达到公司对上线要求的还原度后,便可以封装上线。走查时可以采用以下三种方式与开发沟通:

方式一:当面口述

站在程序员边上,将问题直接说出来,看着程序员修改,修改完毕后离开。

适用场景:

  • 产品即将上线,设计问题仍未进行修改。

  • 多次强调设计缺陷,但仍未修改。

  • 用文字无法表达自己的想法。

优点:

  • 沟通及时,能快速达到自己想要的效果。

缺点:

  • 会给程序员压迫感。

  • 设计提问题的速度远快于修改的速度,所以较浪费设计的时间。

方式二:图片截图

发现有设计问题,图片截图发给开发。

适用场景:

  • 开发有时间能及时响应设计问题。

  • 设计问题需要大家进行讨论。

优点:

  • 截图发到群里后,群里成员可以对此问题及时发表看法,方便沟通。

  • 方便设计人员提出问题。

缺点:

  • 截图容易淹没在聊天记录中,开发忘记有此问题。

  • 无法追踪该问题是否已解决。

方式三:文档记录

使用在线文档记录所有设计走查问题,并使用不同文字格式代表此问题的当前状态。

适用场景:

  • 外包项目,将设计走查内容输出一份文档给外包人员更容易确定工作量。

  • 团队中尚未推行缺陷管理工具。

优点:

  • 可以协同编辑,沟通方便。

  • 可以记录当前问题是否解决。

缺点:

  • 定义的文字格式规则略显麻烦,不容易在不同项目组中推广。

推荐使用在线UI设计工具Pixso

对于UI设计师来说,好的网页设计工具,能够帮助其突破UI设计流程的局限性。Pixso是一款功能齐全+易于上手+团队功能强大的在线协同UI设计工具。

  • 实时协作

UI设计师可通过链接邀请团队成员,进行多人云端协作设计,实时同步字号、边框、颜色等各种细节。

  • 智能UI设计工具

Pixso自带组件变体、自动布局等专业设计工具,支持UI/UX设计和原型播放,一体化完成高保真产品设计。

  • 高保真原型

在UI设计流程中可视化、智能化预知用户体验, 支持添加页面交互和原型播放,模拟产品最终形态,助力团队规避无效投入,快速提升产品核心价值。

Pixso协作功能