-
让品牌有温度、有情感
专注品牌策划15年
ui设计的流程（UI设计的流程和工具是什么-）
发布时间：2023-04-28 02:59:28
稿源：
创意岭 阅读：
157
大家好！今天让创意岭的小编来大家介绍下关于ui设计的流程的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、ui设计师的工作流程
UI设计师必备知识：大公司设计工作流程规范，啥也不懂进啥公司？
1、在设计之前，首先需要产品经理确定好客户或者老板的需求，没有产品需求，就没有互联网开发，没有需求，我做产品也就没有意义了。
比如说：我们设定一个需求。毕业生都需要找工作，我们需要找公司，但是没有那么多时间一家家的去询问要不要人，我们需要投简历，这个时候就需要网站，需要APP，像智联、58等等热门。
有需求，自然会有交易。这个时候产品经理需要了解这个APP需要具备哪些功能，最好是能够进行及时采访，能够切实地了解到真实需求：比如我找工作，需要公司的规模，是不是真实，薪资构架等等，这些需求都需要储存起来。
了解到真实需求，才有了我们的产品开发。
2、确定需求之后，产品经理会做具体的说明，让交互、UI、开发、测试明确产品需求，明确项目的具体细节。
这个阶段里面是最关键的，涉及到需求与产品的对接。PRD文档和线框原型图一般情况都是在这个环节内明确的。
当然也会有特殊情况，比如某宝，他的流畅是交互明确需求——低保真原型——派PRD，应该是这个流程，出现差错，请轻喷。
这里面需要注意的是：PRD文档，线框原型图出来了之后，设计师才开工，不然也是反复修改。
3、设计组内部会议、界面风格确定，
这个时候需要确定一个设计负责人。设计负责人会给同事做具体的工作安排，线框图标、版式设计等都有具体的分配。
后面就开始出稿，稿子出了之后，需要确定那个风格的效果更好。
判定结果的标准还是客户的需求。
重要的事情说三遍：需求、需求、需求！
4、分工已经明确，进行具体设计工作
5、标注图、效果图、切图
这个不需要多讲，大家都明白。
这个步骤，产品经理会进行把关。
6、开发完成，进行最后的测试
测试工程师会对开发出来的产品进行测试，看看有没有疏漏，有没有错误，当测试和调试完成，上线，就完成了整个开发的流程。
二、UI设计整个过程一般分为哪些步骤？
嘿设汇app上的回答很全面，分享给你，希望对你有帮助。
一、前期工作
1.画。草图记录理念。用笔记本来收集创意，不时的翻翻可以根据一些有趣的旧点子想一些新玩意儿。
2. 收集图片。方法有好多种，我习惯Dropbox文件夹分类（例如，我会分成后台界面设计、iOS设计、插画设计等等）这些图片，有新项目时可以用来寻找灵感。
3. 情绪板和准备工作。Dribbble，Behance，嘿设汇、Pttrns，Pinterest。我总会准备4个文件夹——PSD，屏，资源，灵感。把和项目相关的东西全分类到文件夹里。
二、开始着手设计
4. 不必在乎线框图的质量。 线框图的作用是帮助架构层级，让彼此更好的理解目的，而不是最终结果。设计师必须懂得去“敏捷”设计，如果真的太在意线框图的细节，那么整个设计流程会拉长。
5. PSD - 大尺寸画布。我一般会创建8000*5000的画布，不是用来画出整个应用的UI套件，而是用来记录元素在不同阶段的不同状态——也就是流程。设计复用很方便，开发看到这种东西也会工作的更快。
6. 所有屏都放入一个PSD中.整体的对比效果会更好，也更容易让他人理解你的设计理念。
元素的复用也非常方便，只需要复制一下其他屏的图层/图层组，修改一下背景或者几个图标就成了。
7. 整理、规范图层和图层组
我是一个崇尚整齐的人，因此我的PSD结构非常的有序。我个人的规则是，如果超过8个图层，那么就创建一个图层组。
8. 和朋友沟通
我非常重视那些能够给出专业性反馈意见的人。留意他们的反应和初次看到你设计时的想法，这未尝不是一种用户测试。而且多聆听别人的意见，能够让你从不同的角度看待问题。9.图示
当所有屏的设计都装入到一个PSD中后做一点图示，用来暗示交互流程，我觉得这算是一种早期原型设计吧，与此同时，还能充分感受到视觉设计的细节。
三、后期工作——视觉规范
完成了设计工作后，要做的事情就是出一份视觉规范，然后检查一下整体的视觉层级。我个人认为，无论是小型项目还是大型项目，视觉规范都有其存在的必要性。无论是对你自己，还是对于同事，都能起到很好的规范作用，避免不一致的设计。
10. 配色表
扁平化的要领之一是配色精简。也方便了我们展现配色表。
11. 字体表
12. 要完善的记录Logo使用的字体，文本使用的字体，标题使用的字体等等，这对于开发会大有裨益。个人复查作品时也会很有帮助。
12. UI 套件
UI套件非常重要，尤其对于工作对接来说，能够保持视觉高度的一致性。前端也非常需要这东西。做好了之后丢给前端，他要问你，你就说这东西在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设计
最近看到很多小伙伴不知道UI设计师到底是干什么的，那么我们来一起参与探索这个UI设计到底是做什么的？UI设计怎么做的？
一、UI设计是做什么的？
UI设计中文名简称：用户界面设计（这里的用户指的就是人；界面就是通过某种显示所表达出来的信息和你看见感知的信号。比如：我们常用的手机、电脑、电视机、包括现在的通话手表、银行里面的取款机、汽车的导航界面）等等都是UI设计。
二、现在大家基本上知道了UI设计是做什么的了，那么我们在来一起了解一下UI设计怎么做的？
1.就目前的UI设计师平均技法这块基本是有以下5个软件。会了这5个基本UI设计技法没有多大问题了。不过也有少部分公司是只会这5个不够的。PS，AI主要是用来做界面，AE用来做动效，ARP用来做交互原型，DW用来做网页的。
2.我们在学习UI设计的过程当中，需要学习到很多知识，比如软件 PS，AI，AE，ARP，DW这些都是一名UI设计必备掌握的一些软件基础
3.而学习到这些软件，我们可以通过网站，视频、字纸书籍和电子书这些资料等多种方法了解提升和学习。
网站：我们可以通过站酷来学习，可以了解UI的作品是什么，除此之外还可以检测实力，我们认真观察可以提升审美。
电子书：一般用的比较少，需要大家也可以去淘宝店了解一下
纸质书：我给大家推荐几本，腾讯传、UI设计黄金法则、三大构成、配色设计由入门到精通、设计师要懂得心理学。
视频学习：通过视频学习这个是最有效的，但是视频去哪里找，什么样的视频才有效呢请往下看。
4.工欲善其事必先利其器，从这个阶段开始，就得先学习软件工具了，一般UI设计要学习有以下4款软件（PS 、AI、 AE、 ARP ，DW）那么这几款软件在UI设计工作是负责什么的呢？
PS—UI界面世界设计-70%
AI-更多是UI图标设计—5%
AE-交互动效设计-5%
AXUER-交互原型图设计-10%
DW-简单网页制作-5%
三、PS CC 2019（最新版本）
PS可以在UI设计中，绘制界面设计，图标设计等。
ps有很多功能，在文字、图形、图像、视频、出版等各方面都有涉及Adobe家族的顶梁设计软件、想从事设计工作PS软件一定要精通，PS的强大，只有你想不到没有它做不出的图。
四、AI CC 2019（最新版本）
在UI设计中AI软件主要用来绘制图标，界面等设计。
AI是出版、多媒体和在线图像的工业标准矢量插画软件。 AI可以用来从事，平面设计，网页设计，UI设计等多种设计工作。
五、AE CC 2019（最新版本）
在UI设计中AE主要用制作交互动效图
AE可以用来从事影视后期， 平面设计，UI设计等多种设计工作。
四、APR 8.0(最新版)
在UI设计中ARP主要用制作交互原型图。
Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等。
五、DW CC 2019(最新版本)
DW软件在UI设计中主要用于制作简单的网页
这边所给大家介绍的全是最新版本的软件，因为学习UI设计不同于其它
设计，UI设计对于版本要求较高，建议使用最新版本学习及工作。
如果需要最新版UI设计软件可以大家多关注多提问多交流。
其他方面的在给大家一下经验，在我们UI设计软件里，软件的操作部门只占了30%的精力投入，这样是找不到工作的。
为什么这么说呢？因为我们更多设计到的是，比如： 色彩 、创意、审美、UE、竞品分析和交互逻辑。
除此之外我们还应具备一些非专业的能力，比如：人品、办公软件、演讲能力、沟通能力、有责任心、激情活跃，面试技巧、学习能力等其他的因素。
最后才是所谓的学历、年龄和经验，这也是一个考验的条件，但是想做好一名UI设计师更重要的还是自己做出来的作品，你的作品集基本上就决定了你可以成为一名怎么的UI设计师。
最后在送大家一句，这个世界没有绝对的创新，所有的创新都是微创新，所谓的灵感，就是将脑袋里的信息重新组合（原创于设计的终极奥秘）
好啦，今天有关UI设计 了解一下？就到此分享完毕，希望对大家有所帮助。
以上就是关于ui设计的流程相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
赣公网安备 50019002502384号
