如何制作《交互设计作品集》下

上一篇给大家讲了制作交互设计作品集,前期的准备和应具备的内容框架,将自己作品素材已经梳理好的小伙伴,接下来就可以来做核心的作品内容了。

本文将重点介绍上一篇框架中 “四、作品集主体” 这一部分的内容。

交互设计作品集,注重的是思维逻辑,将自己作品案例罗列累计显然是不明智的做法,一方面无法聚焦你的优势和专业能力,另一方面读者也会产生思维疲劳。好一点的做法是,将自己的专业能力和掌握的专业知识分解,然后映射到对应的作品案例上,每一个作品重点突出你的某一项能力,然后整个作品集是你的综合体现

下面我讲一下在不同的案例中,应该是怎样的框架,都需要透出交互设计上的哪些知识点。

1.有实践项目经验的你,就可以按以下结构来表现你的项目作品。

2.没有实践项目,课堂作业偏多的你,可以按以下结构,把作业中缺少的部分进行补充、逻辑结构上进行优化,完全可以改成较为成熟完整的作品。



一、展现交互流程完整性的作品案例

要点:交互设计所涉及的全流程个环节完整、每个环节不必特别详细,一页表达清楚即可,但前后逻辑关系要严谨。

深蓝色贯穿每一个环节,在这个案例中,上下游连接的顺畅和严谨性,是最重要的

知识点框架:透出内容之间的衔接、上下游的因果关系突出,是整个案例要表现的。

举个栗子为了大家理解内容的衔接,给看一个只有逻辑内容,没有视觉美化的案例:

每章封面元素:标题、副标题、简要介绍、小目录、相关背景图。(注意,没有任何多余无管要素哦)
1.提出现有产品“功能臃肿、框架扩展性弱、车载环境适应性差、不能同时适应车厂和普通用户的问题”  2.利用相关市场分析模型分析,进而得出机会缺口:核心功能聚焦、交互适配灵活,专注车载环境的轻导航。(该案例用SET分析环节,代替用户研究环节,这个章节重点突出“有分析” 让人知道你是有依据的,无论是市场还是用户。因为后面会有专门针对用户的案例,让你去展现相关能力)
3左:根据产品缺口,提出创新产品定位:功能模块化,简洁轻便,可与任何产品和环境组合使用的轻导航。阐述产品名称、理念等产品概念。3右:根据产品定位构建目标用户角色,总结需求痛点:车厂需要导航具备集成能力,适应厂商系统;用户觉得现有软件繁琐,需要适应车内环境,使用简单。
4左:根据产品定位和目标用户,将原来众多的功能,只围绕“巡航、导航、查看地图”三个场景展开,让用户认知中的层级结构变清晰,厂商利用时也可以在三个大模块中准确调用。4右:根据定义好的功能和层级,画出产品内部系统逻辑图。
4:用线框图表达主场景交互方案。用户最快可以用3步,最慢可以用5步,就可以顺畅导航,解决了之前提到使用繁琐的痛点;卡片式的结构,自由匹配功能,解决车厂系统适配和集成问题。5:视觉原型展现简洁轻松的理念。

以上是让人知道,你逻辑严谨,且可以跑通全程的。即便拿一个普通的作品来做也没有问题。



二、展现用户研究能力的作品案例

要点:突出对用户调研和可用性测试的专业性和完整性、研究结果利用的合理性。

深蓝色为重点部分,圆圈的大小代表重点部分的权重高低

①项目背景:简单描述,提出项目价值或问题。

②用户研究(完整展现知识点):前期准备、用户样本分类及特种、访谈或问卷提纲构建、数据分析、调研结论。

关于用户调研。可查看文章:《了解用户:调研的定量与定性》《用户体验之定量调研:让问卷无可挑剔》《用户体验之定性调研:让访谈物尽其用》

③需求分析:建立用户角色、分析目标用户特征,得出主要用户和次要用户,确定产品定位。

④需求解决方案:简单阐述产品定位,和核心界面的线框图即可,这一环主要是为了下一步可用性测试来起到衔接作用。

⑤可用性测试:测试前准备内容、启发式评估原则及结论、测试方法(发声法/观察法/AB测试/眼动测试等)、测试结果、分析后结论、修改建议。

⑥产品最终原型:是经过改良后的产品方案,要体现出可用性测试的结论。

作品集的展现上需体现出以下具体内容。用户调研相关可视化框架模板,供大家参考:

该章节需具备访谈提纲相关内容,展现你对调研准备的思考
对调研用户的分析,确保用户研究的合理性
根据访谈结果得出的用户相关结论
展示根据调研得出的定量数据结论
展示根据调研得出的定性数据结论
根据结论得出目标用户,以及调研用户类型之间的转化关系
根据调研建立用户角色

三、展现任务分析及信息架构设计的案例

要点:突出对流程和界面布局方案的思考、原型设计方法和修改。

深蓝色为重点部分

①项目背景:简单描述,提出项目价值或问题。

②产品定位:呼应背景中提出的项目价值或问题,给出相应产品定位描述、目标用户和典型场景,1~2页概括即可。

③功能架构分析:根据产品定位给出需求转化模型、功能优先级、产品整体功能架构。

④任务流程分析:根据功能架构,给出详细的流程分析图,定义每个功能任务。

⑤界面信息布局:详细的界面线框图、流程引导、注释说明。

⑥交互规范和视觉效果:控件规范、文字规范、色彩规范。

体现在页面上的可视化框架如下:

简明扼要的产品概念介绍(产品定位) 
对核心功能进行定义和阐述 
展示产品功能架构图,重点功能可以用不同颜色区分(图片禁止转载)
任务分析图,包括正常流和异常流(图片禁止转载)
详细界面流程图,具备:流程、界面布局、说明注释(图片禁止转载)
详细界面流程图,具备:流程、界面布局、说明注释(图片禁止转载)
产品控件规范(图片禁止转载)
高保真视觉界面的展示(图片禁止转载)

界面原型设计最完整的作品,适合在这一案例中表现,同时这也是一个设计师的基础核心能力。


四、展现服务设计及相关运营能力的案例

要点:一般选用已经面向市场的产品,提出当前问题后,阐述解决方案,突出服务设计理念的完整性,或运营前后的用户变化程度。

深蓝色为重点部分,圆圈的大小代表重点部分的权重高低

①项目背景:简要概括项目背景,一般是已经面向市场的产品。

②市场分析:利用SPET、波特五力模型、SWOT分析、5W2H等分析方法,得出市场现状。

③用户旅程图:用户从使用到结束完整的旅程,写出每一阶段的描述和遇到的问题。

④需求痛点分析:梳理用户核心痛点、设计机会、得出机会所转化出的功能、功能优先级。

⑤商业模式分析:商业画布(合作伙伴 关键业务 核心资源 价值主张 客户关系 渠道通路 成本结构 收入来源)。

⑥服务设计/运营方案:商业拓展方案、服务设计蓝图、或运营推广方案的模型图等(围绕之前提到的痛点和商业模式来进行可视化展示)。

⑦市场效果:设计或运营方案应用后,市场的反馈数据,活跃度或粘性的增加等(如果没有实际数据也可以不写)

对用户使用的旅程进行情绪与需求分析(图片禁止转载)
通过旅行图进行功能转化(图片禁止转载) 
产品概念相关的商业画布分析
产品整体生命周期的规划

五、其他小知识点补充案例

对细节问题的处理、微交互、相关设计原理或方法论的利用等。不必是完整的项目,可以是某个小环节,作为专题的形式来展现,证明你的细节处理能力。

如以下案例:

汽车内部环境中空屏幕,设置功能的界面布局的不同方案思考
车载屏幕键盘的点触交互设计思路与方案
硬件与软件的方控设计方案

六、其他能力展现

6.1 数据信息可视化

通过你作品集每一页的信息布局和图形表达来展现,因为原本你作品集上的每一页,应该有很多的文字和数据来传达,但为了他人更轻松易懂的看明白,你需要以可视化的方式表现。所以你的作品集在无形当中就已经在透出你这方面的能力。

关于信息可视化的一些技巧:利用方法论模型、利用数据表、场景故事化、关键字突出法

信息可视化模型(图片未经授权不可私自转用)
信息可视化模型(图片未经授权不可私自转用) 
故事板(图片未经授权不可私自转用) 

作品集信息可视化的一些常见问题:

将文字表述逐条表达,且突出关键字
注意视觉中心 信息层级的先后
布局需要有规律性 减少视觉负担
线框图要素要详实,包含:界面元素 界面信息 说明注释

6.2 沟通与话术构建能力

作品中总会有无法用可视化表达的内容,你每个项目中的介绍和注释描述,都去简化和推敲,你精准的文案表达就会体现出你的沟通与话术构建能力。

6.3 审美感知能力

作品集的封面与内页的装帧设计、每一项目的首页设计、每一页中的排版布局设计,将是你视觉审美设计的体现。

所以:

1.在制作作品集之前,找准作品集视觉风格,包括配色和图形特点,再开始制作;

2.在制作过程中随机调整图文;

3.作品集初稿完成后自查,统一各级标题与文本的“字体、字号、字色”,校对图形的主体色和辅助色,精简多余的装饰性视觉元素。

但要注意,这里的视觉效果还是以提升你作品集的可读性为主,装饰为辅。让人在阅读时把注意力放在你内容的逻辑上还是最重要的。

6.4 复盘思考能力

在每一章节或项目结尾,对项目核心所展现的能力进行总结。该总结应该重点放在知识点的运用梳理、方法论的理解、或某个问题的顿悟,尽量避免主观的情感表达。

学生作品集修改前

以上就是交互设计作品集制作的全部流程和方法论,你get到其中技巧了么?

\(^o^)/~:

蒹葭姐姐对应的作品集课程也上线了,可以进入cctalk听课哦


关于如何写背景分析,可查看文章《项目背景分析怎么写》

关于用户调研。可查看文章:《了解用户:调研的定量与定性》《用户体验之定量调研:让问卷无可挑剔》《用户体验之定性调研:让访谈物尽其用》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容