学ui新人教程第一节:我们不止画图标

分享到:更多 ()

UI设计的基本概要,及标准工作流程,课程针对准备转行从事UI设计0基础的同学

今天很久没联系的老同学突然问候了我,寒暄了几句后,问我现在在干什么,我对他说做UI设计,他完全不懂,我详细认真的给他说明了下什么是UI设计。最后他停顿了一会若有所思的对我说“就是做手机图标嘛” 瞬间石化。我觉得大家也应该遇到过类似的问题,UI设计是个新名词,一些人以前没听说过,这可以理解,但是既然人家问到你了这就需要你用专业的角度给他们普及下知识。让他们了解你的专业看到你的价值,我不止做图标好吧!!!

UI的本意是User Interface也就是用户与界面的关系。他有几个好兄弟分别是UE(用户体验)IxD(交互设计)它们3个组成了UED(用户体验设计)大概是从2000年以后用户开始纳入设计考虑的重要因素。现在我们用的产品也多,经常会发现一些界面做的很精美,但是却很难用的产品,用户看到的视觉部分很完美,但使用的感受却不那么友好。遇到的问题比较突出的比如:

●他们不知道这个是什么东西?他们感觉到迷惑吗?

● 用户不清楚能够通过此物做什么?

● 不知道怎么完成任务

● 当用户有兴趣去尝试时,却不知道如何开始

● 当用户开始后,知道如何进行下一步吗?

● 当不想要使用时,能够快速明白如何退出吗?

● 当用户退出后,下次来用,是否需要重新去学习掌握如何操作?

● 每一步操作时,用户心理会感觉到愉悦还是枯燥乏味?

在使用软件中我们崇尚效率,但是如果过程中的愉悦感,也不会觉得效率低下,这就是UED(用户体验设计)在这其中UI设计不仅是让软件变得有个性在众多同类产品中脱颖而出,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点,体现公司品牌价值,在产品越来越多的情况下这无疑是非常重要的卖点。

 

UI(界面设计)

最美ui 学ui UI新人教程第一节-我们不止画图标!!!

在软件发展中,界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终用户设计满意视觉效果的过程。

-IxD(交互设计)

最美ui 学ui UI新人教程第一节-我们不止画图标!!!

以人的需求为导向,理解用户期望 需求 理解商业 技术以及业内的机会与制约。基于以上创造出形式,内容,行为,有用 易用令用户满意且技术可行,具有商业利益的产品。

以用户为中心理解用户的行为习惯,创造出便于使用的产品,接近用户心里模型的产品的设计叫做交互设计。

UE(用户体验)

最美ui 学ui UI新人教程第一节-我们不止画图标!!!

用户研究通过对于用户的工作环境、产品的使用习惯等研究,使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去,从而帮助企业完善产品设计或者探索一个新产品概念。通俗的讲这是个整体的使用感受,包括受品牌影响,用户个人使用经验的影响,总之就是用实际数据说明这么做让用户会爽。

一个通用软件界面的设计大体可分为5个步骤,这5步也是UI设计师所必须经历,只不过有些互联网大公司分工细致,有些则压缩在一起了,希望各位准备转行从事UI的同学将其记下

1.需求阶段   2.原型阶段  3.视觉-前端开发阶段  4.测试优化阶段  5:用户验证阶段

【需求阶段】

参与讨论,了解并挖掘需求。进行用户需求分析(也会与BI部门以及用研配合,走访用户,做用户调研等),任务分析,提供网站架构图(site map), 网页流程图(page flow)等,协助产品经理细化需求,从BRD(商业需求文档)到PRD(产品需求文档).

软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/ 遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类性质的软件也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。

【原型阶段 】

输出各阶段所需的产品原型,也即线框图(Wireframe). 探索满足需求的各种解决方案(包括任务流以及单页面交互),并组织评审和讨论会,在评审和讨论后,输出一个确认版的线框图以及交互说明文档。此阶段若有必要,也会配合用研进行可用性测试,以便提前发现问题。

▲要做的事

1:根据需求文档画线框图,2:对线框图进项评估,3:与用户配合做可用性测试,4:模拟任务用线框图去完成,发现问题

▲依据的方法

1:用户为中心设计,有用户探究数据用数据,没有数据靠同理心换位思考

2:平衡商业,用户,技术,设计等各方利益。做出优先级有主有次有得有失

3:解决问题时想3套方案,择取最优的

4:线框图时就要以设计原则规范为依据,别做坑人的事。产品经理你知道设计师是多希望你出个规范点的原型图嘛···

【视觉-开发前端阶段】

根据品牌形象 用户定位设计界面,期间要跟产品经理不断沟通协调确认需求完善交互设计,跟开发工程师讲解需求帮助他们准确无误的将设计图实现,测试阶段对界面进行验收

▲要做的事

1:根据产品定位,研究当前市场上类似的软件风格,找出差异点。进行设计风格确认

2:用设计软件进行设计(PS AI)等

3:跟产品经理不断确认需求,对交互设计进行改进

4:与开发人员讲解设计要点

【优化阶段 】

观测核心数据变化,进行可用性测试和用户调研,以便优化下个版本。

▲要做的事

1:换位思考,将自己换成用户去使用产品,带着任务去测试,发现不足

【用户验证阶段】

改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。

今天呢就先讲到这里哈,学习是一个需要坚持的事,别三分钟热血,浩哥给大家的学习建议就是每天进步一点点,这一点点只要你坚持住,一段时间后你会被自己的进步幅度吓到滴。下次谁再问你UI是啥,你就可以正八景的告诉他了。

继续关注哦~

最美ui 学ui UI新人教程第一节-我们不止画图标!!!

原文:ui.cn

作者:小浩哥

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 学ui新人教程第一节:我们不止画图标

0
分享到:更多 ()