当前位置:主页 > 艺术设计 >

UI设计师想学习交互设计,应该从哪里入手?

来源:精英杂志-国际时尚汇_时尚焦点 作者:精英杂志

UI设计(还称UE)主要负责线上产品,设计的时候要有交互理念、考虑产品特点和用户体验等,包括app、网页等页面的色彩、布局、icon、字体方面的设计工作,最后交给制作(前端)的东西应该是高保真的视觉稿+页面标注+切图。

需要会使用的软件工具:有PS、Ai、Sketch、Axure、AE等……

当然啦,做UI设计师的人,PS这种基础办公软件,是必须要会的。

需要具备的思维&审美:要有交互方面的知识,设计类的工作和其他工作不同,他不仅看重技能还很看重你的设计思维,只靠自然形成的审美是不够的,要多看其他设计类网站和书籍。

怎样才能成为一名合格的UI设计师?

小U妹经常在后台看到这样的问题:UI设计现在这么火,零基础能不能自学?

我特地去询问了专业老师,他说的意思是,如果只是想自学一些PS、AI等等软件的基础入门,简单修一些图的话,自学没有问题。

但如果想真的做到月薪过万的UI设计师,没有多年的经验,又不是科班出身的话,是很难自学成功的。

完整的交互设计流程是怎样的?

感谢邀请,交互界面设计的核心是使用者的体验,无非就是效率,美感,简捷和清晰,如果做到这些,对产品功能分析和使用者的心理研究就是流程的第一步。在此基础上,通过不断的设计迭代(草绘,低模和高清界面)和原型设计就可以完成交互界面的设计。因此,该流程是一个涉及用户研究,画像分析,产品分析(竞品研究,市场研究),头脑风暴,手绘导航,信息流程优化,图标设计,界面控件设计,高清图标设计,Axure原型设计和交互测试的流程。

一个完整的交互设计流程是怎样的呢?

首先,我们先来认识一下产品的五个用户体验的要素

用体验的五个层面分为:战略层、范围层、结构层、框架层、表现层。

五个层面自上而下地建设,具备基本的双重性、用户体验的要素和应用这些要素。

所谓战略层,即为产品目标、用户需求,通俗来讲,经营者想从网站上得到什么,用户想从网站上得到什么?

所谓范围层,即功能规格和内容需求,其意义在于这是一个有价值的过程,同时能够产生有价值的产品。比如,提供用户可以保存之前的邮寄地址功能。

结构层,即交互设计、信息架构层,其目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点:理解用户的工作方式、行为和思考模式。

框架层,即界面设计、导航设计、信息设计层。

界面设计是用来确定界面空间元素以及位置,提供用户完成任务的能力,通过它,用户能真正的接触到那些“在结构层的交互设计中”确定的具体功能。

导航设计:呈现信息的一种界面形式,提供给用户区某个地方的能力。

信息设计:呈现有效地信息沟通,表达想法,它是这个层面中范围最广的一个要素。

实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起,形成一个统一的、有内在凝聚力的架构的地方。

1,通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。

线框图的好处是可以确定一个建立在基本概念结构上的架构,同时指出了视觉设计应该前进的方向。

表现层,即为视觉设计。

界面设计考虑可交互元素的不足,导航设计考虑在产品中引导用户移动的元素安排,信息设计考虑传达给用户的信息要素的排布,解决并弥补“产品框架层的逻辑排布”的感知呈现问题。

评估一个页面的视觉设计的简单方法:终于眼睛。一个成功的设计有2个重要的特点:

遵循的是一条流畅的路径;在不需要太多细节来吓到用户的前提下,它为用户提供有效选择的、某种可能的“引导”。

所以,我们的设计师应该怎么做呢?

读懂原型图

读懂PRD。确保在需求理解上,与PM保持一致;查找漏洞。人无完人,在成熟的PM,也难免有疏漏。找出遗漏,与PM反馈、沟通;提出产品新想法。读PRD时,总会有一些产品的好想法冒出来,及时与PM和团队沟通;开始构思交互。

草图快速沟通

通过草图,快速将“产品关键流程”、“关键交互界面布局”呈现纸面,以此与PM、技术沟通至达成共识;目的是为了:

再次扫遗漏;收拢想法。这个阶段,产品设计基本定型;达成共识。确保让产品、设计、技术队要做的事情有一致的理解,PM需更新PRD、技术开始做开发准备。

Axure线框图表现产品流程、界面

包含:产品流程图、全部的页面原型。

Axure让团队对产品的理解无异议,对最终的产品有直观的了解。这个阶段,产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。

视觉设计

有前面两个“扫清障碍”的过程,这个阶段,视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下,视觉包括:

风格探索;关键页面的视觉设计;关键交互动画表现(如果无法口头项技术表达动画效果时,给出一个“活的”效果,是非常直观的。

视觉素材输出、设计文件标注

每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具,Cutteran、Assistor PS是很方便的切图工具。

开发后期,细节跟进

与开发跟进细节,是设计过程的一部分。在我们团队,完全依靠规范作业、设计文件标注(不和开发人员说一句话),能够确保80%的交互、视觉细节能够被还原。剩下的20%,就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中,一定要预留这个时间。主要包括:边距、字体、界面动画的数值微调。

链接:

精英杂志-国际时尚汇_时尚焦点 备案号: 滇ICP备2021006107号-80 版权所有:蓁成科技(云南)有限公司 网站地图

本网站文章仅供交流学习,不作为商用,版权归属原作者,部分文章推送时未能及时与原作者取得联系,若来源标注错误或侵犯到您的权益烦请告知,我们将立即删除。