在线ui设计设计流程图-UI设计的全工作流程是怎样的？

一、流程图工具

1、Mindnode

Mindnode是在Mac和IOS上的流程图工具,它同时具备专注性和灵活性。是进行头脑风暴和组织规划生活事务的绝佳工具。

2、百度脑图

百度脑图是一个线上,云端操作的思维导图工具。即时存取,方便分享\协同,不受终端限制,在任何地方都可以打开。

3、Xmind

同样的,Xmind是一款流行思维导图软件,打造易用、美观、高效的可视化思维管理工具。

4、MindManager

其实,思维导图工具都是大同小异,具体的你用的舒不舒服,需要你亲自实践,你觉得哪个合适你,你就选择用哪一个。

有关UI设计的工具可以看《

ui设计工具大揭秘

》

作为一个专业UI设计师,不仅仅要了解整个产品在UI界面设计,交互设计中的工作流程,更需要了解整个产品从需求提出到产品上线的整个工作流程。

以下是互联网产品各部门的工作分配及流程:

从图中可以看到,一个互联网产品从策划到最后的上线营销,都需要由不同的部门分担其责,而每个部门中,根据岗位的划分,在细分到每个工种上来,所以一个互联网产品的开发流程,并不是单个的人,或者个别的部门可以实现完成的,它是一个完整的团队通力合作的产物。部门与部门,岗位与岗位相互协作配合,才会出色高效的完成项目。

一般互联网公司会有几个部门划分:

1、产品部门(产品经理、产品专员)

2、设计部门(GUI设计师、交互设计师、前端工程师)

3、研发部门(构架工程师、程序开发)

4、测试部门(测试专员)

5、市场部门(销售、渠道、公关、品牌)

6、运营部门(客服、运维)

各部门的工作职责如下:

产品部门:负责产品调研,产品方案策划,产品原型图设计,和技术开发对接,后续可能和运营部门对接。

设计部门:负责产品视觉设计,交互设计,前端布局。有一些公司会把前端这一块划分到开发部门,理由是前端的工作和程序开发一样,都是码代码,设计部门就是单纯的只管视觉设计方面。但是这种说法其实不太正确,前端的代码实现和后台的程序开发,虽然都是码代码,但是运用的技术是不一样的,实现的功能和效果也是不相同的,所以前端工程师划分到设计部门会更合理一些。

研发部门:产品构架设计,数据库设计,前后台编码设计,后期的运维,网络安全。

测试部门:测试程序中的bug,编写测试计划、测试用例及测试报告等文档,优化流程。

市场部门:产品企划策略,促销活动的策划及组织,品牌规划和品牌的形象建设,市场广告推广活动和公关活动。

运营部门: SEO/SEM优化推广,平台活动策划(线上线下),广告投放,客户关系管理,数据分析。

设计部门的岗位划分通常有UI设计师、交互设计师、前端工程师,小型公司岗位划分不完善,会把交互设计师的工作(交互流程、交互线框、交互动效)交由产品人员来完成,以下梳理出UI设计师参与和需完成的流程:

一、需求梳理、分析

发生在产品开发前,以APP产品为例,会对市场和用户进行调研分析:市场定位(用户定位、产品定位、技术定位),市场需求分析(目标客户群分析、竞争对手分析)。在前期的产品需求分析会议中,UI设计、技术工程师都会参与。此过程UI设计师了解清晰的用户定位,产品定位,竞争对手分析,为后期的素材收集和风格把控做准备。

在这个过程中会根据提炼的真实用户需求来确定产品需求,产品经理将根据沟通中的相关资料的word、ppt、jpg等等东西翻译成逻辑语言,最简单的就是产出一张产品功能脑图或者一份功能列表。

产品功能脑图:

产品功能列表:

大家开始讨论用户体验流程,在白板上边画流程边添加粗略的UI元素。之后产品经理会在纸上做手绘版线框图。这阶段产品经理、UI设计师、包括技术工程师会一同作大量的讨论,而且主要讨论的是流程和主要功能,因此手画故事版最快最方便并易于修改的。此环节要敲定userflow,用户流程及其中的关键步骤,每一步骤都是一个主要界面。之后产品经理绘制纸质版低保真交互原型图(可借用专业的模板本和工具)

二、关键界面线框图(可不带交互功能)

初步产品功能需求梳理清楚之后,产品经理持续跟进,反复沟通,在确定的用户流程中,选出几个关键的,有代表性的步骤,做1:1细化线框图。此环节要确定关键界面里的UI元素和布局,以及全局的布局排版风格。

三、关键界面视觉设计

此环节UI设计师会做关键界面的整体视觉设计,尝试不同风格、颜色的搭配,UI元素的运用,最终确定产品的视觉设计风格。

四、 全部界面线框图(带交互功能)

产品经理完成1:1带交互和流程的全部界面线框图设计并确认。

界面线框图(为交互功能添加释义和说明。)

线框流程图

五、 全部界面视觉设计

UI设计师输出全部界面的视觉设计图,并确认。

六、 界面标注、切图

1、在确认全部界面视觉稿以后,首先对每个界面进行标注,标注图移交前端工程师。

标注图(像素大厨、蓝湖等软件)

2、界面切图,移交前端工程师

切图文件夹

切图文件

至此,UI的工作流程才算完成,但是现实项目中,很多环节是一个交替迭代的过程,需要不停地修改和优化,包括整个流程进入到开发以后,也会需要UI设计师协同调整,所以UI设计师的工作,不单单是只完成单纯的界面视觉设计,前面包括用户定位,线框绘制,流程梳理,交互实现,后面包括前端布局,很多环节,UI设计师都必须参与进来,只有多角度地了解项目,了解各岗位的工作流程,才能做出符合市场需求,符合用户需求的产品。

那设计软件千千万,到底应该如何选择设计软件呢?其实,大多数UI设计师用的软件就是那几大类,只是电脑系统不同有稍许区别而已,那我们选择几款大多数UI设计师常用的软件去简单了解一下。

1、PS-Adobe Photoshop,

是由Adobe Systems开发和发行的图像处理软件。相信不是设计行业的小伙伴也对它久仰大名,更是设计专业人员必须掌握的设计工具。Photoshop主要处理以像素所构成的数字图像,其重点在于对图像的加工处理。

在这里先给大家推荐两本PS的学习书籍,《Adobe Photoshop CC 2019经典教》、《Adobe Photoshop国际认证培训教材》,这两本书都是权威认证的官方图书,针对Photoshop初学者深入浅出地讲解了软件的使用技巧,并用实战案例进一步引导读者掌握软件的应用方法。

图片来源于网络  侵删

2、AI-dobe illustrator,

是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。它的功能强大,用户界面体贴,是大多数设计师选择矢量编辑软件的不二选择。

3、XD/Sketch,

Adobe XD被定义为Photoshop的原型工具,是一种轻量级的矢量图形编辑器和原型设计工具,它常常被拿来和Sketch做比较。Sketch是一款轻量、易用的矢量设计工具,让UI设计的工作更加简单高效。那你肯定会问这两个工具到底哪个好?这一切完全取决于个人习惯和爱好。 如果你已经习惯并喜欢使用一个工具,则无需切换其他的同种类工具。

图片来源于网络:XD工具界面

Sketch工具页

4、AE-Adobe After Effects

,Adobe公司推出的一款图形视频处理软件。现如今动效设计在UI设计界面中越来越常见,国内很多互联网公司也开始重视动效设计了。产品中的动效设计可以给用户带来很好的视觉感受,更好的表达产品特色,让产品操作体验更加流畅。

图片来源:阿多比设计学院学生作品

5、C4D

是UI设计中一个非常重要的工具,只要是涉足三维场景、产品、视效制作的地方,C4D都可以胜任。C4D常常和AE这两款软件配合使用,协助我们完成3D渲染工作。它们好比一根麻花,是分不开的,同时也是互补的。

当C4D中画面做的过大,重新渲染的话,要老命一条,这个时候就可以打开AE调节一下;在C4D中颜色无法达到预期,那就打开AE重新润色一下;在C4D中这个灯光不好,效果不对,那就打开AE重新补光一下。

一旦你都会,并且掌握得行云流水,那么它俩合作呈现的视觉效果不仅狂拽酷炫炸翻天,同时也会为你的作品增添很多的质感,作品高大上加分很多!

最重要的是这俩软件会极大的缩短你工作的时间,却能收获极佳的效果。

6、AXURE-Axure R

P是一款专业的快速原型设计工具,它可以快速创建应用软件或Web网站的线框图、流程图、原型设计图。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。Axure不仅是UI设计师需要掌握的工具,在互联网行业也要求产品经理熟悉该工具的使用。

当然也有很多类似的工具,比如磨刀、Invision等,他们的优点各有不同,这些原型设计工具额优点不同,依据自己的习惯和爱好选择使用。

设计工具的种类很多,各个工具也在不断的优化,让设计变得更加便捷。

在UI设计的学习和工作中还会接触到更多的工具,各个工具都有着自己的功能和优点,选择自己喜欢的工具配合完成设计工作,让自己的设计有更加丰富的视觉效果。

三、UI设计需要具备怎样的能力?

UI设计除了需要会使用工具,其实更多还是需要具备设计思维,掌握设计规范,这样设计出来的产品才不会显得空洞。那UI设计具体还需要具备怎样的能力呢?调研设计的招聘要求可以得出,目前的UI设计市场不仅需要UI设计懂设计、懂交互,还需要会手绘、懂前端等等。总结起来,目前市面上需求量最大的就是全链路UI设计,也就是精通UI设计,了解项目项目全过程。

所以UI设计除了需要掌握软件的应用,还需要会手绘插画、设计基础、UI设计相关知识以及综合软实力。

1、手绘插画:

设计师可以通过手绘去了解线条、明暗关系、结构关系、基本造型、透视关系等,有这样的思维,在设计工作中可以帮助我们快速抓到绘制图形、图标、拟物风格作品的要点。

从各个招聘要求可以看出,UI设计越往后走越是要求从业者有丰富的美术功底,将插画和设计灵活运用,相辅相成才可以顺应目前用户的视觉体验。

图片来源:阿多比设计学院学生作品

2、设计基础:

UI设计也属于设计专业,所以必须掌握设计原则、平面构成、色彩构成、立体构成(即三大构成)等设计理论。有了这些才可以灵活的去怎样根据不同行业不同人群去定位品牌色彩,分析Logo图形的形式与气质、图像抽象化变形正负型结合、字母和图形结合等等。

3、UI设计规范:

每个行业都会有一定的规范,掌握了设计基础以及工具使用,还需要掌握对行业内网页设计、移动端设计的规范、方法、流程等才能真正开始做UI设计。对于不同行业背景的企业,对于网页UI设计、客户端UI设计、电商UI设计肯定又不一样的需求。

对于设计规范,可以参考一些大厂的设计规范,因为他们的产品多,设计师多,所以总结出来的规范对于一个行业来说都很适用。

4、其他技术:

所谓的全链路UI设计师,就是全程参与整个产品的生命周期。

从需求分析到需求评审,用户调研、情绪板梳理到交互设计, 视觉设计到视觉评审,UI走查、验收到用户调研,这一系的工作需要设计师都懂,设计部分全会。

除了以上硬性的能力要求,对于UI设计岗还要求具有良好的沟通表达能力、团队写作能力、分析总结能力等综合软实力。其实通过几个月的学习其实可以掌握UI设计的技能,但是对于设计思维的培养,只有靠平时的多做多练多思考,慢慢累积才可以得到。