在实际的工作中,UI设计师所负责的工作内容不仅仅只是设计这一环,通常需要与团队成员进行协作,毕竟,UI设计师需要有完善的设计思维与逻辑思维,深入地参与到交互设计的部分。那么,UI设计流程是什么?让我们一起来看看完整的UI设计流程。
1. 架构设计阶段
在UI设计流程中,不管是To B还是To C,信息架构设计UI流程都需要简洁清晰,减少用户的学习成本,让用户在最短的时间内做效率最高的事情。具体的办法就是提炼最核心的主要功能,通过聚焦核心场景对需求进行合理的划分和整合。好的信息架构可以让用户初次就有一个简单且清晰的认知,知道产品大概的用途,可以迅速找到某个功能,并且可以有明显的感知主次分明。总结下制作信息架构来设计UI流程的主要步骤:
-
了解用户的使用习惯、偏好
-
用户最关心的有哪些功能
-
确定关键使用场景和用途
-
调研竞品的信息架构
-
卡片分类整理
-
绘制信息架构
2. 整理需求
探索初期的需求通过优先级排序后,得到的是迭代计划的安排,每个迭代做哪些需求以及未来1-3年的需求规划。目前这个阶段定的关键页面主要场景涉及到的需求,一般是基础必备的功能。在设计UI流程考虑需求价值时候,可以从四个维度考虑:
-
这个需求受众有多大?
-
这个需求的使用频率是以每天、每周还是每个月为周期?
-
用户对这个需求是刚需还是无所谓?
-
这个需求属于当前迭代规划吗?(优先级和重要性)
3. 整理设计步骤
UI设计师不是一个人在战斗,还有前端、后端、测试、产品等等并肩作战。UI设计流程并不是一味的串行,很可能是你输出一部分图,前端开发一部分界面,测试写一部分的测试用例,齐头并进。而且前端开发会涉及到数据的关联逻辑,有些界面必须先行开发,才能支撑其他界面的开发。所以你得搞清楚哪些模块优先级较高哪些较低。根据他们的开发优先级来确定设计UI流程的先后顺序。
4. 绘制低保真原型
接下来可以进入UI设计流程绘制低保真原型阶段了。UI设计师拿到产品的原型后千万不能照搬原型不加思考被动工作,可以结合自己的理解给予更细致的交互建议或者更合理的布局优化。
由于探索前期的不确定性,原型图会反复修改,所以建议采用最简单便捷的方式去绘制原型图。以便和项目组成员方便讨论和深入讨论细节和推敲逻辑的合理性,最短的时候内作出修改和调整。点击了解低保真和高保真原型的区别。
5. 确定设计风格
确定设计风格是UI设计流程中重要的一个阶段。由于每个角色对美的认知不一样,所以对设计风格也会有各自主观意识。如何减少用户的主观意识,get到用户甚至是牵引用户喜欢的设计风格呢?其实不外乎以下几点:
-
明确项目背景,提炼核心目的
-
提取用户特征,主要角色有哪些,关注点各自是什么和宏观要求
-
提炼3-5个关键词
-
根据关键词头脑风暴关联
6. 设计高保真原型
这是设计UI流程前期探索阶段的的最后一步。输出直观的可视化页面,远远比一堆文字和报更能触动人心和说服力。除了商业价值和收益估算,直接影响立项的重要一环就是关键页设计。
这个就是考验设计功底部分了,此处需要再次回顾竞品分析总结的共性部分,以及UI设计流程上阶段设计风格里面涉及关键词的参考图。建议设计之前一定要浏览学习大量设计前沿的一些优质作品,拔高眼界,设计出高质量不平庸的作品并且交付给开发同学。点击了解高保真原型图怎么做。
7. 进行设计走查
UI设计流程中最后一步便是进行设计走查。在走查完最后一轮并且达到公司对上线要求的还原度后,便可以封装上线。走查时可以采用以下三种方式与开发沟通:
方式一:当面口述
站在程序员边上,将问题直接说出来,看着程序员修改,修改完毕后离开。
适用场景:
-
产品即将上线,设计问题仍未进行修改。
-
多次强调设计缺陷,但仍未修改。
-
用文字无法表达自己的想法。
优点:
-
沟通及时,能快速达到自己想要的效果。
缺点:
-
会给程序员压迫感。
-
设计提问题的速度远快于修改的速度,所以较浪费设计的时间。
方式二:图片截图
发现有设计问题,图片截图发给开发。
适用场景:
-
开发有时间能及时响应设计问题。
-
设计问题需要大家进行讨论。
优点:
-
截图发到群里后,群里成员可以对此问题及时发表看法,方便沟通。
-
方便设计人员提出问题。
缺点:
-
截图容易淹没在聊天记录中,开发忘记有此问题。
-
无法追踪该问题是否已解决。
方式三:文档记录
使用在线文档记录所有设计走查问题,并使用不同文字格式代表此问题的当前状态。
适用场景:
-
外包项目,将设计走查内容输出一份文档给外包人员更容易确定工作量。
-
团队中尚未推行缺陷管理工具。
优点:
-
可以协同编辑,沟通方便。
-
可以记录当前问题是否解决。
缺点:
-
定义的文字格式规则略显麻烦,不容易在不同项目组中推广。
推荐使用在线UI设计工具Pixso
对于UI设计师来说,好的网页设计工具,能够帮助其突破UI设计流程的局限性。Pixso是一款功能齐全+易于上手+团队功能强大的在线协同UI设计工具。
-
实时协作
UI设计师可通过链接邀请团队成员,进行多人云端协作设计,实时同步字号、边框、颜色等各种细节。
-
智能UI设计工具
Pixso自带组件变体、自动布局等专业设计工具,支持UI/UX设计和原型播放,一体化完成高保真产品设计。
-
高保真原型
在UI设计流程中可视化、智能化预知用户体验, 支持添加页面交互和原型播放,模拟产品最终形态,助力团队规避无效投入,快速提升产品核心价值。