11个优秀的交互设计作品集
本文转自墨刀编译自Vanschneider的10inspiringuxportfoliosandwhytheywork。
不管你做什么样的设计，一个在线交互设计作品集都是必备的。在大多数情况下，公司和客户根本不会考虑你是做什么工作的。虽然很多交互设计师可能认为自己的工作不能很好地以视觉化的方式呈现出来，但一个作品集对于交互设计工作来说真的很重要。
在交互设计作品集中，可以引导人们了解你的工作流程，分享你在简历甚至谈话都无法完全阐述出的细节。一个交互设计作品集将帮助面试官和用户都能更好地理解你的想法，以及你与众不同的地方。
通过与Semplice（我的设计师作品集系统）的合作，我看到了很多例子，这些例子表明：即使是复杂的交互设计工作也可以漂亮的作品集的方式呈现出来。我们可以去留意一些有才华的UI设计师的作品集，学习用可视化的方式来展现你的作品集，进而让人们对此留下深刻的印象。
1.KurtWinter我最喜欢Kurt的交互设计作品集的一点是：它看起来最不像是一个作品集。对于交互设计作品集来说，很容易塞满一些原型图，堆砌文字。Kurt确实分享了所有必要的细节，但同时成功地使它具有视觉吸引力。注意观察一下他的布局、图标和文本，这些都是值得学习借鉴的。
点击访问KurtWinter的作品集
2.LizWellsLizWells是我们交互设计作品集的代言人。她的作品集不仅让人眼前一亮，而且让人很容易理解她到底在做什么，以及她的作品是如何融入一个成功的最终产品的。每个案例研究都讲述一个具有相似结构的故事：
项目摘要
目前的任务
用户体验的挑战
UX解决方案
这使得读着很容易理解她从头到尾的方法流程。最令人印象深刻的是，她用了大量的图片来说明她的创作过程:早期的草图，批注笔记，线框图。许多这样的视觉效果都是简单地从笔记本上撕下来的，或者快速地写在白板上——这些视觉效果是任何UX设计师在随时随刻都能得到的。但Liz做的还远远不止这些，她拍摄这些笔记就像你拍摄印刷品一样，有互补的背景和可爱的小道具。她将最终产品的图片和视频呈现出来，让这个项目在屏幕上栩栩如生。
你可能会认为没有太多要展示的过程，尤其是策略和研究阶段，但是即使是头脑风暴的速记笔记也可能对你的交互设计作品集有价值。将这些小片段保存在你的整个项目中，你会惊奇地发现这个故事在之后是多么的容易拼凑起来。
点击访问LizWells的作品集
3.IsaPinheiro与Liz的“幕后“式的案例研究相反，IsaPinheiro在她的交互设计作品集中分享了精美的成品，并解释了她的工作如何影响最终用户。
以她在日本铁路系统的项目为例。Isa在页面中嵌入了交互式原型，因此读者可以直接从她的产品作品集中体验成品。如果你没有从早期项目阶段分享的点点滴滴，这是一个很好的解决方案。
（用墨刀做的交互原型，可以获取分享链接分享到作品集里）
艾萨（Isa）还花时间在自己的作品集中添加了一些个人风格。看看她的两个独特的导航选项：一个是带有两个直接菜单项的全屏导航，另一个是每个项都配图的图像式导航。平滑的滚动和全屏封面滑块为她的交互设计作品集增添了视觉冲击。
点击访问Isa的作品集
4.OykunYilmazOykunYilmaz擅长用一句话介绍客户并简要概述项目目标，从而使他的项目摘要简短而优美。但是他会确保用精准的数字来呈现具体的结果，这往往是许多交互设计作品集案例研究都缺乏的。交互工作在人们看来似乎是抽象的，所以可以通过解释你的工作是如何产生实际影响的，让它具体化。
点击访问OykunYilmaz的作品集
5.NaimSheriffNaimSheriff的主题对于读者来说看起来很简洁，使读者看起来很真实。以他的Ideapaint案例研究为例，他在其中分享“设计探索”阶段的重要性，以及他通常如何进行。甚至例出了在项目过程中问自己的问题，例如：“我们如何成功展示出相似产品之间的差异？用户怎么知道该为其的空间买多少油漆?”随后，他们团队分享了解决方案。
对于那些可能需要交互设计师，但又不了解内部术语和工作方式的客户来说，这样的交互设计作品集更加接地气。这样的作品集能让任何人，即使是招聘员（可能对设计一无所知）都容易理解你所做的工作。
点击访问NaimSheriff作品集
6.SebastiánMartínezSebastiánMartínez用单页作品集的方式带你了解他的作品。他的案例研究很短，但是他做了很多设计师忘记做的一件事：他分享了他对最终产品的感觉。“这是我感到自豪的最完整，最有趣的产品之一，”SebastiánMartínez谈到他的MonkopTestCloud项目时说道。分享对工作的感受不会花费你的太多时间，但很有价值。
在我们的“如何在X找到工作”系列中，我采访了顶级公司的设计师和招聘人员，只是询问我们如何能够在他们的设计团队中获得一份理想的工作。他们中的许多人都说，他们想知道你对项目和结果的看法。它给你的工作带来了深度，并给了我们一个进入你心灵的窗口。
点击访问SebastiánMartínez的作品集
7.HusamElfakiHusamElfaki的交互设计作品集案例研究在第一段会介绍项目、目标和结果。但他并没有就此打住，把一堆照片扔在下面，而是将项目分解，解释项目的每一部分。
不要想着放上图片你的读者能够理解它们的意思——花时间去写上标题或简短的摘要，解释你项目的来龙去脉。
点击访问HusamElfaki的作品集
8.KaliandKarina从概念到成品，KaliandKarina的工作涉及到全流程。她们很少提到UX/UI这些字眼，但这都隐含在他们的案例研究中。从精心设计的用户旅程、黑白草图到高保真的原型图，她们像讲故事一样分享她们的项目。
点击访问KaliandKarina的作品集
（通过墨刀制作的高保真交互原型）
9.ElliotOwenElliotOwen呼吁人们注意特定的手势、互动和经验，这使他的项目取得成功。以他的BritishAirways为例。
他展示了小的功能或特性如何对项目产生重大影响。而且他在合适的地方使用的GIF，不是为了让观众眼花缭乱或分心，而是准确地展示了他的交互设计项目的工作方式。
点击访问ElliotOwen的作品集
10.VedaDsiljakVedaDsiljak的案例研究几乎就像是产品营销页面，他们的作品销售得如此出色。不只是用产品或项目的标题来命名页面，而是为它们撰写一个性标题。它们的作用就是一开始就引起人们的兴趣。他在每个案例的结尾都添加了原型的下载链接，以便读者可以亲自体验。
点击访问VedaDsiljak的作品集
11.JasonYuan我们以上分享的一些示例是允许你在作品集上直接跟原型进行交互，但JasonYuan是使用带有鼠标操作轨迹的视频来可视化体验。通过这种方式，他能引导读者无障碍地明白产品的使用过程。
年轻设计师们可以学习这一点：Jason为Apple设计的作品是自发的重新设计，但设计是如此详尽周到，感觉就像是真正的客户作品。自发的重新设计是一种很好的方式，可以在你的职业生涯初期或你希望进入新的设计道路时展示你的技能和兴趣。我总是建议说不要给像苹果这样的大公司进行自发设计，因为它们已经是一个成熟的知名品牌，这太容易了。不过对于Jason来说，他成功做到了对FastCoDesign，NextWeb，Mic等产品的设计。
点击访问JasonYuan的作品集
在创建交互设计作品集时，就像在日常工作中一样，需要深思熟虑以及具有战略性。花一些时间来解释你的流程，让你的读者了解你工作的每一个步骤，并说明它是如何产生影响的，这样你的交互设计作品集就能被记住了。
————————————
10个最新交互式Web设计实例欣赏
如今，越来越多的UX/UI设计师将交互/动画元素（例如鼠标悬停状态，音频或视频媒体，滚动交互等等）添加到其网站设计之中。这样一方面可以使网站本身更加绚丽有趣，吸引更多访问者，同时也能够激励访问者更多的关注和阅读其网站内容。这也是为什么交互式网站设计已然成为设计师们跟风追赶的设计潮流的原因。
然而，网站的交互性设计并没有想象的那么容易，如何才能将寻常的交互或动画元素结合起来，打造出优质炫酷的交互网站呢？
下面为大家介绍10个最新优质的交互式网站实例，希望能给你的网站设计带来灵感：
1.APPS
APPS是一个由VGNC创意公司为酒类品牌设计创建的优秀交互式网站。尽管对设计师来说设计完成酒类产品的在线网站并不是易事，但是APPS却以一种有趣直观的方式展示了其主打产品：APPLECINDER（一款经典苹果酒）。那它是怎样实现这种效果的呢？
答案其实很简单。首先，设计师为网站设计了一个可视化的互动式动作模拟器，简单而生动的介绍了这款苹果酒的制作过程。网站访问者可以简单的点击即可一步步的了解其加工流程， 直观易懂。而且，其简单整洁的产品页面设计，也能让访问者更好的集中于产品特色，增加产品销售量。
2.Webflow
Webflow是一个内嵌各式动画的交互式网站，同时也是一个能够帮助设计师和开发人员简单有效地创建各类响应式和可视化网站的在线工具。
一般而言，一些常见的在线网站，为吸引更多浏览者下载和使用该网站产品或工具，常常会在其主页采用 “简单产品特色介绍 + 下载链接或按钮”的方式，而Webflow却选用了一个完全不同的方式：“网页历史介绍 + 开始使用按钮”。简单的说，Webflow首先使用各种有趣的动画和交互元素介绍网站历史（从侧面介绍其产品），引起访问者共鸣的同时，穿插一些产品下载按钮，方便有兴趣的访问者继续了解和使用其产品。访问者轻松滑动滚动条，即可了解网站的发展历史。那感觉就像放电影一般，视觉效果真的很赞。
3.PolishChristmasGuide
PolishChristmasGuide是一个能够帮助访问者了解和学习波兰圣诞节传统文化的交互式网站。其可爱卡通的外观，非常适合孩子们。
打开网站之后，访问者可以同圣诞老人一起，开启一段收集圣诞礼物的雪橇之旅。收集礼物的时候，一些关于波兰圣诞节传统的介绍也会随之弹出，非常有趣。
而且，作为一个添加有声音媒体的插画风网站，PolishChristmasGuide的收集礼物之旅，更像是在玩一个在线游戏，访问者可以简单的滑动鼠标或点击即可收集各类礼物。总之，这类添加酷似小型游戏的网站设计方式，对于激发访问者兴趣方面非常有效，且值得借鉴。
此外，网站最后所显示的关于保护和支助受虐孩童的弹出信息，对于帮助和保护这类人群也是非常有意义，给人留下深刻的印象。
4.Cyclemon
Cyclemon是一个介绍各式自行车的交互式网站。网站整体采用了多彩的插画风。作为一名骑行爱好者，简单地滑动网站，即可浏览各式自行车插画，挑选出你最喜欢的一款。其色彩搭配也很舒适时尚。
5.Climber
Climber是一个介绍创意工作室（即InteractiveProductionCompany）的在线交互式网站，界面整洁友好，森林主题鲜明独特。多样的交互和动画设计，方便访问者轻松点击滑动，即可流畅地查看其工作室设计作品以及相关信息。所以，如果你也在考虑设计和创建一个类似的特色工作室网站，可以参考这个网站的一些交互方式来完成。
6.AlexBuga
AlexBuga是一个优秀的交互式在线作品集网站，介绍了设计师的方方面面，例如展示了设计师的个人相册，网站设计作品，最喜欢的歌曲以及博客等等。
不同于一般在线作品集网站，机械的罗列和呈现各种的设计作品，设计师将整个网站设计成了一个现代感十足的个人房间的形式。而设计师添加的各种设计作品和内容，就如房间装饰物一般摆放在房间内。网站访问者简单点击，即可自由轻松的查看相关信息，炫酷而有趣。
而且，其特别添加的“我的音乐”模块也是你放松自己，了解设计师的绝佳场所。
7.TimotheeRoussilhe
TimotheeRoussilhe是一个简单且很有创意的交互式简历网站。添加了很多创意满满，乐趣多多的交互式元素，以便为网站访问者提供更加愉悦的体验。
例如，打开网站之后，映入眼帘的是一排由白色字母组成的设计师姓名（即TimotheeRoussilhe）。而这组白色字母本身就是一个有趣的小游戏。你可以随意拖动任何的一个字母，打散其它剩下的字母，就像平常玩儿保龄球一样。当然，你也可以简单的点击“Donotpressthis!”一次性的打散所有字母。
而且，当你将鼠标移动到其右上角的网页图标时，该图标也会转变成简笔画表情，并且每次点击，表情也会随之变化。
因此，对我而言，逐个找出设计师添加的各种交互式设计本身就是非常有意思的经历。
所以，如果感兴趣的话，你也可以尝试着打开这个网站，看看当将鼠标移动到设计师个人图片的时候，会产生怎样的炫酷效果呢？
8.Pieces
Pieces是一个展示了30种濒危生物的特色交互式网站。设计师巧妙的运用三十张各色的纸片，组合成多种濒危物种，同时也为这些类似中式剪纸般的生物添加了动画，它们时而憨态可掬，时而灵动俏皮，时而羞涩可爱，十分生动有趣。通过简单的点击和滑动，你可以自由的查看这些濒危动物的相关信息，例如发现日期，历史记录以及相关视频等。
此外，其颜色搭配，背景切换以及其他细节设计也是非常值得设计师们效仿的。
9.AbbeyRoadStudio
AbbeyRoadStudio运用3D技术为网站访问者们提供了在线参观英国著名录音工作室(即AbbeyRoadStudio)的机会。紧跟其网站向导，你可以轻松的体验和感受工作室的每个角落。同时也可探索和发现一些工作室相关的故事，图像，视频和音乐等。
而且，网站还结合了各种声音媒体，3D技术，内嵌视频技术以及其他先进的网页技术，旨在给访问者提供更加真实的体验。当滑动浏览网站时，你就仿佛置身于英国AbbeyRoadStudio工作室感受和探索一样。
10.Chekhov
Chekhov是一个具有独特插画风的交互式网站。网站访问者可以简单完成一个测试（即回答7个相关问题），来看看他们比较像契诃夫作品中的哪一个角色。而这一个设计想法是非常有特色的。
结语
这些就是我们收集的10个最新且最好的交互式网站实例。他们所采用的诸多关于在线交互式网站设计的想法，比如添加互动式小游戏，采用漂亮可爱的插画/卡通风，插入一些动画图片或图标等等，都是非常实用的。希望它们能带给你启发，帮助你设计并创建一个有趣/炫酷/独特/优质的交互式网站。（点击查看12个不容错过手机移动应用交互式设计实例）