4000-888-103

资讯动态交互设计项目作品集该如何包装资讯详情

交互设计项目作品集该如何包装

2019-11-27 16:37:40

最近做了蛮多PPT的,突然间想总结一个关于交互设计师“包装的套路”

于是写写试试看。

需要声明的是这里的“包装”是指在自己真实项目设计产出的基础上进行的合理呈现,以能够彰显设计师能力和专业度,为设计增加说服力的过程。

并不是虚假的项目或者夸大自身作用。

交互不等同于视觉,但也属于设计师范畴,所以也需要用作品集作为项目展示呈现,再加上“全链路设计师”概念的推广,交互视觉同一人完成,综合考虑需求也未尝不可,所以作品的呈现不仅代表交互设计师本身对产品的逻辑分析能力,一定程度也代表着交互设计师本身的视觉技能&审美水平。

所以这里的“包装手段”往往等同于你的综合能力水准。

包含:逻辑分析能力总结能力语言表达能力(需讲述时)、文案水平视觉审美能力细致耐心程度工作态度、个人风格

 

 

—————————下面开始讲述包装手手法—————————–

 

Image title

 

包装手段一:为你的设计方案找理由

这是很重要的“包装手段”。也是交互设计师的必备技能——就是接到需求之后采用了何种方式进行设计,以及产出后论证自己设计的过程。

一定要记得,任何事情都是有方法的,同时,任何产出都希望能够有合理的解释。作为理性逻辑的交互设计师来说,没有“感觉不错”这一说。

没事儿的时候我还喜欢刷刷“知乎”,看看一些戏精大佬如何把一些简单问题用各种论证手段写了那么多字。当然了你也可以刷刷“知网”,来看看什么是严肃认真的学术逻辑方法论。(如果你是设计学科的研究生毕业,在论文压力重重之下,一定会熟悉很多很多方法论,都可以用起来喔。)

 

1、已知设计原则解读

一般用来给已有设计的优化

官方给的一堆设计原则就是你能依靠的方法论。

扔个基础链接给你:https://developer.apple.com/design/human-interface-guidelines

Image title

 

同时,也有一些走查原则可以运用,比如尼尔森的十大可用性原则。

Image title

嗯就这样,举个例子:使用了一个“一致性原则”

话术:就端上XXXX和XXXX在交互展现上缺乏一致性的问题,所以进行了体验的优化,优化之后XXXX就符合了一致性的原则。

 

2、运用竞品分析

竞品分析是一个大的类别方式。一般来说针对不同目标我们还可以拆分小类方法。设计时针对不同的目标我们的阐述方式也不同:

针对依托于某个功能,寻找优化的,就是专注体验细节。

针对上线新功能的,就可能是罗列盘点市场竞品现状的。

同时,分析完之后的总结就是交互输出的很重要的部分,这些都可以作为这个项目作品的前期铺垫“包装”,也就是通过竞品给自己设计找“理由”,这些“理由”如果论证的足够充分甚至可以上升到提炼设计原则(上条)

下面这个案例是分析竞品到总结竞品的过程,产出的理论将辅佐于设计。

话术:通过总结出XXXX场景下的竞品,及竞品的表现XXXXX,可以得到这样结论XXXX,所以适合于我们端上的场景设计方案应该是XXXX。

Image title

 

3、分析产品数据

不同产品不同场景都不一样。

交互设计师需要有很强的数据分析能力,以数据挖掘体验,寻找方法。而且需求的背景很多是因为产品数据而产生的。包括:DAU、UV、PV、次留、各种展现率、互动率等等。例如:某某场景的互动率很低,交互设计师分析发现是因为互动入口隐藏过深或者互动方式成本过高导致,所以进行了优化。

设计方案的产出也有可能是AB、AA实验出来的数据结果来分析确定的。

分析的越深入,说明越是交互老司机,一下子就能从数据发现问题,推动并解决问题。

话术:因为在这个功能场景下XXX数据不高,设计上采用了XXX形式来增强XXXX。最后效果XXX,提升了XXX。

Image title

 

4、用户研究的利用与追溯

包括定性定量结合的各种方法

推荐一本书:《设计调研》-电子工业出版社的;

讲述了各种类型的用户研究方式:访谈法、跟踪法、眼洞仪、脑电等等,以及如何通过一系列的研究方法,发现体验问题。

通过用户研究得出的体验问题,也就是你设计要解决的问题,是设计的理由。

 

5、学术理论及研究结果

同时,一些纯人机、纯心理学的研究数据,往往也是会运用到设计中去的。

当然了这些理论往往也是根据上一节的用户研究产出的。

这些学术研究,往往科学性更高,也更深入,准确运用到设计中来也会有很明确的正向效果。下面两个是我随便贴图举例的。图一应该是人机工程学上面的截图,图二是单手握持时候用户拇指的操作热区图吧,绿色的是舒适区,橙色的部分是手指用力伸展可触及的区域,红色则是拇指无法触及的区域。

Image title

 

Image title

用理论辅佐支撑设计方案是一种很容易凸显专业性的“包装手法”因为理论的积累需要大量的时间和知识沉淀。而且需要多看书才行。

 

包装手段二:不说大白话,优化文案凸显专业性

如果说上面一章节是设计的过程,那么有了论证过程又有设计产出,就是完成的设计过程了。接下来三章都是润色过程。既然是“包装”,文案包装是必不可少的。

通俗的讲就是,设计不能说白话,要一本正经的用书面语夸自己。

“所以我觉得这样排版顺眼!””逻辑行得通就用的这个方案“这种是不能突出专业性的。

那么怎么是专业呢?(体现语文水平的时候到了)

我这里要说的是,如果没有个人的文字风格喜好的话,多看交互设计学术类的文章是很快能够提高的。

如果没时间看,我这里随便敲一些词汇用来表扬自己的方案好,当然了你还可以润色的更好,普通文案如下:

增强了情感化与趣味性、减少了用户焦虑

传递产品调性与理念、彰显品牌

吸引用户的注意力、视觉焦点清晰、信息层级明确

丰富场景、愉悦用户、加强多感知、聚焦主路径、后期扩展性强

缩短了用户路径、提高用户效率

给用户以控制感、符合用户预期、符合用户心智模型

反馈及时且明确、遵循用户行为路径…balabalabala

 

实践案例

  • 白话版:LOGO要大slogan放中间,用几种颜色的图表呈现了流程。

  • 包装版:我们按照信息的重要程度来组织页面排版,突出展示关键信息。将数据可视化,让用户可以直观地了解关键信息及整体情况。合理地使用颜色及栅格排版,减轻用户的视觉负担。

 

包装手段三:大声说“虽然是交互,视觉也不差!”

喂!不是视觉做的不好才来做交互的好么亲?

交互是能胜任视觉的只不过是在交互领域垂直深耕了,一旦拿起来视觉,虽然不如视觉设计师熟练度高,但是是能够完成的。

好了,作品集、项目总结汇报就是彰显你视觉能力的对吧。

 

1、运用一些元素排版提高视觉冲击力

枯燥的交互稿里面,往往需要点视觉点缀。

你可以放上视觉稿来配图说明,但是毕竟重点在交互,手绘好的同学放上手绘原型也是很酷的。

其他方面与交互稿有关的点缀可以有

 

1)各种姿势的手——配合界面显示会很可爱的~!

Image title

 

2)使用设备(一些Mock  up)

我觉得视觉同学不太建议用mock up,因为视觉要显示其界面元素的精致性,这样排布往往读者会看不清楚,但是交互同学还是可以用来配图包装的。

下面给你看看我的~感受一下下

Image title

 

3) 使用场景的绘制包装(故事版——同时也是一种设计方法)

下面是网上找的一个案例说明,就是APP场景的说明图示,也是用户需求、体验问题的挖掘过程。

Image title

 

2、各种流程、数据的可视化

无论是你的论证过程,还是你的设计流程、需求本身,都是流程对吧。

数据分析的时候还会有数据,都可以以视觉化直观的呈现,体验会很好

不举例子啦,可以百度“信息可视化”

实在不行再百度”PPT模版“

我就不贴图啦

 

3、什么都懒得弄——“整齐+留白”

整齐+ 合理留白就是美~不过多阐述啦~

下面这个是我举个的栗子,没有什么特点,就是整齐,很美也很清楚吧。

Image title

 

包装手段四:凸显独特性——“我就是我,不一样的烟火”

个人风格属于深度包装~在前几个的基础上,发挥个人的优势,可以是性格上的,也能以是特长方面的。

比如说:有人文案写的好,就可以突出文风特点,以文字吸引人。表现个人的特征。

比如说:有人会摄影,也可以以摄影元素进行视觉美化

 

总之就是:”让别人能记得你“

我们经常看到很多设计师的文章很火,个人IP做的很好,一方面说明这个人分享的干货很多,另一方面也是说明了这个人运营自己的能力比较强,也就是凸显了自身的特点优势。有时候,巧妙利用夺人眼球的字眼,塑造强有力的自品牌,还能掩盖掉了设计或文章本身的缺陷。

当然了,无论如何,沉下来做设计才是王道。

 

关键词:h5在线 h5设计网页 h5页面链接

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/manman.png