ui设计整个过程一般分为哪些步骤?
发布网友
发布时间：2022-04-23 14:03
共3个回答
懂视网
时间：2022-04-02 05:34
ui前端设计流程是：
1、UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。从字面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系。
2、界面设计不是单纯的平面设计，需要定位使用者、使用环境、使用方式并且为最终用户而设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。
3、好的UI设计基础界面要做到能够吸引人，给人耳目一新的感觉这就要求工作者不仅要具备广告创意和美工艺术，还要了解心理学，抓住用户的心理。UI设计里面最重要的就是交互设计，负责人类与机器之间的交流，这一操作要简单，便捷，直接有效。通过这一操作从而达到用户的使用目的，这也是交互设计的目的。
热心网友
时间：2022-04-02 02:42
1. Storyboard 故事版：
主要负责人：产品经理或交互设计师
最早大家开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。
此环节要敲定userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。
*白板上一般都是这样，交互设计同学会在纸上重绘。
<img src="https://pic4.mg.com/5b5007aa23668ae60f26e87b5e807453_b.jpg" data-rawwidth="360" data-rawheight="240" class="content_image" width="360"/>
*移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
<img src="https://pic3.mg.com/e0816d618c7316adbd90e091f7cebe_b.jpg" data-rawwidth="400" data-rawheight="300" class="content_image" width="400"/>
2. Key wireframe 关键界面线框图
主要负责人：交互设计师
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
<img src="https://pic2.mg.com/ed48f0c692a530b4bb5903f50c7ef2f5_b.jpg" data-rawwidth="439" data-rawheight="280" class="origin_image zh-lightbox-thumb" width="439" data-original="https://pic2.mg.com/ed48f0c692a530b4bb5903f50c7ef2f5_r.jpg"/>
3. Key visual design 关键界面视觉设计
主要负责人：UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人：交互设计师
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
<img src="https://pic4.mg.com/9f67c96abfd05c88769252258aea0b6f_b.jpg" data-rawwidth="599" data-rawheight="371" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic4.mg.com/9f67c96abfd05c88769252258aea0b6f_r.jpg"/>5. Prototype 可动原型
主要负责人：交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住帖一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带mmy数据！客户都以为你开发完毕了有木有。
<img src="https://pic1.mg.com/2c1005ec8685f2765d802a7ff759b1cc_b.jpg" data-rawwidth="596" data-rawheight="117" class="origin_image zh-lightbox-thumb" width="596" data-original="https://pic1.mg.com/2c1005ec8685f2765d802a7ff759b1cc_r.jpg"/>
6. UI design 全部界面视觉设计
主要负责人：UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
热心网友
时间：2022-04-02 04:00
嘿设汇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套件中，他立马就能明白了。
这一条非常重要，关系到整体的视觉一致性。
