近些年随着互联网行业的发展和智能手机的普及,UI设计也逐渐被越来越多人所接触。UI设计目前在整个设计行业可以说是起薪最高的设计方向,以北京上海一线城市为例,基本平均工资都在1w以上。尤其前些年,UI设计职位面临缺口,优秀的UI设计师十分抢手。
互联网从业十余年,在互联网大厂分别从事过UI设计师、交互设计师、产品经理等职位。今天借这个回答,把自己对这个行业的理解及日常的书籍积累,详细整理一下,希望对初入行的你有所帮助,终结此题。
UI英文全称是user interface,翻译过来是用户界面,对应的职位就是UI设计师。
很多人建议将“界面”应该解释为“介面”,指的是人机交互过程中的中介,更能表达它的含义,它的实际应用是很广泛的。
而今天我们所说的UI设计主要是指软件的界面设计,简单来理解UI设计,即所有带屏幕的设备(如手机)、仪表盘、中控中涉及到的界面视觉。目前应用最多的是app、网页相关的界面设计,UI设计师的工作是将原型图进行视觉输出,形成最终用户看到的界面。
简单理解就是手机APP、电脑网页、电子产品屏幕、小程序、AR、VR、其他设备等用户看到的界面视觉,它包含配色、界面构图、banner图、按钮设计Bsport体育、图标设计、字体设计、插画设计、动效设计、切图及设计规范等具体的工作内容。通常UI设计师与交互设计师、程序员形成上下的工作衔接,共同完成用户使用的产品。
配色决定了整个产品的设计风格,一般来说app产品由1个主配色+1-2个辅助配色组合而成,体现产品属性,整体上给用户一个直观的感受。
常用的构图有三角形构图、S形构图、圆形构图、方格构图等形式,将内容进行重要级别区分,并以一种最清晰的方式进行展示。好的构图设计,让用户对页面内容一目了然。
网页广告展示图(banner图)也是UI设计师的工作内容,一般Banner图会根据节日、企业宣传、特殊需求等原因进行更换,所以UI设计师会定期对banner图进行设计,用来符合当下的需求。
页面需要针对不同的需求级别进行按钮设计,方便用户更快的识别按钮功能,减少误触。
用的网站会涉及到图例、插画、图表的视觉设计,这也是UI设计师的工作内容。
页面的字体、字号选择会影响整个界面的风格,通常正文字体会选择一些通用文字,设计师主要负责选择,而标题或艺术字体UI设计师可以进行对应的文字设计。
动效设计作为资深Ui设计师加分项,这些年来被越来越多的大厂所看重,通过动效设计方便展示页面功能,也为页面增加了一些乐趣。
规范切图,能让程序员在后续的开发中更好的还原设计师的创意,减少误判。在切图过程中需要做好效果图和切图文件夹,并配合相应的设计尺寸说明,这样就方便了与后续跟研发人员的沟通成本。
所以UI设计师的设计技能是十分全面的,好的设计可以让产品使用起来更加简单、美观、高效,整体提升软件的品质,因此具有经验的资深UI设计师对于产品设计至关重要。
了解了UI设计后,再来说一下其他相关的职位名词,以及这些职位之间的逻辑关系,相信读后你对UI设计的理解会更加深入。
UX英文全称是user experience,翻译过来是用户体验,UE是user experience的另一种缩写形式,也就是说UX就是UE,具体叫什么看每个公司的情况。UXD就是用户体验设计师。简单来说,用户体验是指用户在使用产品或者系统的整个过程中的主观感受。就是说这个东西好不好用,用起来是不是方便。它包含了用户在整个使用过程中的体验、感受、情感、心理认知、印象认知等多各个方面。
用户体验是一个非常主观的概念,重点在于用户在使用产品的过程中的心理感受是不是友好的,满意的,甚至是有点爽的。因此一个好的用户体验产品,不单单指功能需求是否完善(pm)、页面逻辑是否清晰(IXD)、界面是不是好看(UI)、使用是否流畅、性能是否稳定(程序)…而是指全部能被用户感知的体验,当然也包含上述全部内容。
所以UE的工作在整个互联网职位中,既跟每个职位都有关系,又脱离于整个研发团队。很多互联网大厂,用户体验设计师,都是一个独立的部门存在,用来把控整个企业策略、产品设计标准及未来的优化体验方向等。
为了更加直观UE包含的职业内容,我将互联网用户体验设计相关内容进行梳理,做了一个图方便大家理解:
可以看到,用户体验设计师对知识体系的理解是全面的,是一种综合的方法论,指导整个团队及项目,提供更好地用户体验给用户,从而达到宣传品牌和企业形象的目的。
对于初学者相较其他名词,UE的概念确实相对难以理解,先不急,往下看,都看完之后,反过头来就会清晰很多了。
下面说一下IXD~ ~很多初学者容易混淆UX和IXD,也就是用户体验设计和交互设计之间的关系。主要是两方面原因,一方面很多公司不是两个专业方向都设有独立职位,尤其小型公司,可能不涉及到UE设计师的工作内容,因此只有IXD;再者,对于找工作的同学来说,这两个职位可以同时投递,也是由相同学术背景的人组成的。所以,他们的工作内容虽然有所区别,但也不需要过分区别这两个工作方向。
IXD英文全称是Interaction Design,翻译过来是交互设计。
下面是国际体验设计协会(IxDC)和美国交互设计协会(IxDA)对交互设计的定义,都比较晦涩难懂,大家可以参考理解一下:
交互设计,又称互动设计,是定义、设计人造系统的行为的设计领域。在于定义人造物的行为方式(即人工制品在特定场景下的反应方式)相关的界面。 —— 来自 IxDC
以创造有用且实用的产品及服务为宗旨,以用户为中心作为设计的基本原理,交互设计的实际操作必须建立在对实际用户的了解之上:包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发,同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系,交互设计师为复杂的设计挑战提供解决方法,同时定义和发展新的交互产品和服务。” —— 来自 IxDA
IxDA的解释相对容易理解一些,但是还有有一些难懂。我来简单说一下,交互设计师的工作就是通过一系列方法,让产品使用起来既满足用户的功能需求,又让产品体验感更舒适、互动性更友好、界面更好看。
通过上面职位要求的详述,我们就比较清晰了解IXD和UE之间的工作区别了,交互设计师的工作,更加专注于产品和设计本身,把一个需求或者概念,从零到一梳理出来、清晰化并最终具体形成页面。因此无论是app产品还是页面产品,交互设计师的工作内容都是很重要的,当产品还是需求或者设计文档的时候,是如何一步步梳理成最终用户看到的页面逻辑和内容,是很关键的。
交互设计师需要通过整个产品的前期调研,将需求进行流程图产出、信息架构图梳理、原型图制作、交互形式等具体方式形成页面逻辑和布局。然后交给UI设计师,进行视觉呈现。
除了流程图、信息架构、原型图这些主要产出外,交互设计师还需要考虑一些具体的设计细节,作为产品的整体指导。我做了一个图如下,列了一些需要考虑的方向。
这些设计内容,可以对整体页面有一个系统的规划,为后续UI设计师做界面提供参考。
UI设计师和GUI设计师什么区别呢?很多公司的招聘信息写的不太一样,这个在具体找工作的时候看岗位需求就好了,不需要过分纠结其区别。
目前GUI的工作范畴跟UI设计师是基本一样的,主要职责是做好界面的视觉设计。这包含:设计风格、配色、图形设计、界面布局等方面。如何将页面做的美观、吸引人、易用性,是GUI设计师的重要工作内容。
为了更加清晰上面这些职位之间的逻辑关系,下面我在展开聊一下,互联网研发团队的具体工作流程是什么?每个职位具体处于什么位置?
产品经理在了解市场需求及痛点后,经过系统性的用户和领域调研来定义产品的功能和架构,形成设计文档。
交互设计师在设计文档的基础上,梳理出逻辑框架、流程图、功能布局、交互细节等内容。
UI设计师再根据原型图的结构和功能,进行视觉设计。包含配色、图标设计、插画、按钮、布局、Banner图等方面。页面制作完毕后,进行切图及尺寸标注。
最后由测试团队进行内测,发现问题后,返给相关的负责人。比如说页面视觉问题,反馈给UI设计师;页面使用不流畅问题,反馈给程序等。
一个完整的互联网产品的制作流程大概就是这样,每一个职位和环节都是不可或缺的,最终形成我们使用的优秀产品~
好啦,互联网相关的关键词到这里就介绍完了~相信这部分内容,让你更加清晰什么是UI设计,相关的学科都有什么,以及工作中是如何配合的。
接下来聊一下其他几个关联学科“HCI、ID、Service Design”,如果不需要的了解的小伙伴可绕行下一个部分!
HCI英文全称是Human Computer Interaction平面设计,翻译过来是人机交互,简单来说就是人与计算机之间的互动。相较IXD交互设计,它更加偏向计算机方面,这就是为什么很多国外的大学将其设立在计算机学院里面。由于其综合性,其专业涉及到计算机编程、界面互动Bsport体育、计算机图形学、社会学、心理学等多个学科。
对比HCI跟IXD,两者在设计方法、设计原则、行为研究等方面的研究方法是一样的,因此很多岗位是相通的。而区别在于,HCI更加偏重人与计算机之间的互动,所涉及的专业领域比较广泛,是一个很挑战发际线的专业~而交互设计更加偏重产品用户调研、界面原型制作、设计能力及软件实用等实用方向,如当下比较热门的互联网交互设计师。
复杂的学科其实是很难用一两句话说清楚的,简单来说就是,在学术层面学习的侧重点不同,而在具体就业过程中,两者是可以根据具体的岗位需求互通的。
之前有一篇多图讲解工业设计方向的文章,比较直观,可以阅读看看,链接如下,这里就不做赘述了。
上面是关于服务设计的定义,相较交互设计,这个学科综合性更强,不仅需要考虑用户使用体验层面,还需要全面系统研究整个行为过程、环境、涉及到的双方甚至三方之间的关系,最终根据系统研究导出符合用户需求的产品、方法或系统。
关于HCI、ID、Service Design这几个学科方向,由于学科过于复杂,我之后会再出专门的文章展开详说,本篇主要侧重对比和学科间扫盲。
好啦,以上已经说完了所有的名词,小结一下,这些专业方向之间的关系又是如何的呢?
2008年,Dan Saffer在其《交互设计指南》中发表过一张图,阐述了用户体验设计及其相关专业和学科的逻辑关系图。
里面不仅涉及到交互设计、视觉设计、产品设计、人机交互等方向,还涉及到了一些其他的相关学科,比较复杂难懂,我将其进行了简化,只留下了我们今天正在讨论的这些专业,做成了下图:
通过上图就可以比较清晰的看到各学科之间的关系了,在综合整篇文章对各学科的分别讲解,相信你已经对这些学科有了更加清晰的认知~
二十世纪90年代由“唐纳德·诺曼”(Donald Norman)提出,2002由加瑞特(Jesse James Garrett)在其著作《用户体验要素》中提出用户体验分为五个层次,如下图