UE/UI设计流程

时间:2022-05-18 03:47:26

UE/UI设计流程

UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


UE/UI设计流程


一、生成产品原型Prototype (线框图)
原型就是用来让人改的。它存在的价值就体现在被修改了几次,被更新了几次,以及它的下一步被少改了几次。 
二、生成产品模型Mock-up (效果图)
在原型被大家接受之后,就该关心产品长得好不好看了。 我们以“模型”这个词来统称该步骤的交付物。和原型相比,它关注于产品的视觉设计,包括色彩、风格、图标、插图等等。 
三、生成HTML/CSS页面
Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技术实现出来,以便后端的开发工程师可以接手编码。


这个流程不是一个快速开发的流程,虽然在用户分析中投机取巧节省了一点时间,但是在交互设计阶段需要消耗相当的努力和创造激情,当然还有时间和成本。在急于看到成果和关心“成本”的队伍中,很容易被一笔带过或敷衍了事,很多人习惯以看到界面设计框线图作为设计成果的标志,呵呵,画框线图其实是很简单的。缺少慎重的交互分析基础的框线图,很容易浮于形式而缺少内涵。



UE/UI设计流程

“AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中心的Web设计的流程和用户体验的要素
战略层——网站目标和用户需求
成功的用户体验,其基础是一个被明确表达的“战略”。知道企业与用户双方对网站的期许和目标,有助于确立用户体验各方面战略的制定。
范围层——功能规格和内容需求
带着“我们想要什么”、“我们的用户想要什么的”的明确认识,我们就能弄清楚如何去满足所有这些战略的目标。当把用户需求和网站目标转变成网站应该提供给用户什么样的内容和功能时,战略就变成了范围。
结构层——交互设计与信息架构
在收集完用户需求并将其排列好优先级别之后,我们对于最终产品将会包括什么特性已经有了清楚的了解。然而,这些需求并没有说明如何将这些分散的片段组成一个整体。这就是范围层的上面一层:为网站创建一个概念结构。
框架层——界面设计、导航设计和信息设计
在充满概念的结构层中开始形成了大量的需求,这些需求都是来自我们的战略目标的需求。在框架层,我们要更进一步地提炼这些结构,确定很详细的界面外观、导航和信息设计,这能结构变得更实在。
表现层——视觉设计
在这个五层模型的顶端,我们把注意力转移到网站用户会先注意到的那些方面:视觉设计,这里,内容、功能和美学汇集到一起来产生一个最终设计,这将满足其他四个层面的所有目标。