什么是UI设计以及如何做好UI设计

UI的本意是User Interface也就是用户与界面的关系。UI设计是指对软件或网站的人机交互、操作逻辑、界面美观的整体设计。很多人把UI设计理解为APP图标设计显然是片面的。

UI(User Interface-用户界面),UE(User Experience-用户体验),IxD(Interaction Design交互设计),组成了UED(User Experience Design)。大概是从2000年以后用户开始纳入设计考虑的重要因素。现在我们用的产品也多,经常会发现一些界面做的很精美,但是却很难用的产品,用户看到的视觉部分很完美,但使用的感受却不那么友好。如何让人与机器的交互更加友好,符合人的使用习惯,让使用者能一步一步的继续往下操作,便是操作逻辑。以 Iphone的锁屏界面为例。设计师除了要考虑界面的整体美观,还要让人不阅读说明书的情况下,知道如何去操作,一眼便能找到开机的按钮并且知道去移动, 当移动滑块,机器会发生什么样的变化,并让操作者确定已经成功。滑块移动到一半放手,又会是什么样的变化。整个人与机器的交流过程便是人机交互。遇到的问题比较突出的比如:

  • ● 他们不知道这个是什么东西?他们感觉到迷惑吗?
  • ● 用户不清楚能够通过此物做什么?
  • ● 不知道怎么完成任务?
  • ● 当用户有兴趣去尝试时,却不知道如何开始?
  • ● 当用户开始后,知道如何进行下一步吗?
  • ● 当不想要使用时,能够快速明白如何退出吗?
  • ● 当用户退出后,下次来用,是否需要重新去学习掌握如何操作?
  • ● 每一步操作时,用户心理会感觉到愉悦还是枯燥乏味?

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

UI(界面设计)

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

IxD(交互设计)

以人的需求为导向,理解用户期望需求, 理解商业技术以及业内的机会与制约。基于以上创造出形式,内容,行为,有用易用令用户满意且技术可行,具有商业利益的产品。 以用户为中心理解用户的行为习惯,创造出便于使用的产品,接近用户心里模型的产品的设计叫做交互设计。

UE(用户体验)

通过对于用户的工作环境、产品的使用习惯等研究,使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去,从而帮助企业完善产品设计或者探索一个新产品概念。通俗的讲这是个整体的使用感受,包括受品牌影响,用户个人使用经验的影响,总之就是用实际数据说明这么做让用户会爽。一个通用软件和网站界面的设计大体可分为5个步骤,这5步也是UI设计师所必须经历,只不过有些互联网大公司分工细致,有些则压缩在一起了:

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

需求阶段

参与讨论,了解并挖掘需求。进行用户需求分析(走访用户,做用户调研等),任务分析,提供网站架构图(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:换位思考,将自己换成用户去使用产品,带着任务去测试,发现不足。

用户验证阶段

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