交互设计师，在互联网思维被随时脱口而出的现代社会中一跃变为热门职业，随着5G技术的普及，交互水将成为发展迭代最快的方向，同时也成为众多艺术设计专业学生选择的前景专业之一。

那申请交互设计专业的作品集应该怎么做？康石石身边几乎所有学生提到交互设计就会和APP设计划上了等号，但别忘了网页设计也是同学们在交互设计作品集创作中必备项目形式之一，而且网页设计在PC端的应用场景依然十分宽广，不容忽视。

所以交互设作品集创作之前，首先要明确APP与WEB的区别。

从上图可以看到，在计算机语言方面，WEB语言和APP语言是完全不同的，虽然在界面表现上可以重叠，但开发方式相差很大，就像英语和德语的使用差异。功能性方面，WEB是以展示型功能为主，APP是以应用型功能为主。在刷新速度表现方面，我们也可以看到网页的加载很大程度上取决于网速，但是APP则是有缓存，同时也有离线功能的部分。更新方式和测试平台也有很大的差异。

接下来，康石石会帮助同学们梳理网页制作具体的流程性步骤，以便能及早对作品集查缺补漏。

01 网页制作实现流程Workflow

一套完整的网页制作的流程是从WEB Browser开始，中间依次是WEB build format---WEB UI---WEB UX---WEB IDE---WEB Framework---WEB Automation，到WEB Publish结束。下面把每一个环节拿出来单独解释，详细了解，明确每一个环节的操作和用途后，才能有条不紊的进行创作。

1. WEB Brower

在日常浏览网页时，不同浏览器会带来不同的布局差异。如果同学们想将网页真正制作出来，并能在网站上使用，就需要考虑到在每个网页中的浏览效果。市场上最常见的浏览器软件包括：Microsoft Internet Explorer，Google的Chrome，Mozilla Firefox，Apple的Safari和Opera。浏览器可用性取决于计算机使用的操作系统（例如：Microsoft Windows，Linux，Ubuntu，Mac OS等）。

图源：PCMag.com

2. WEB Build Format

网页实现有很多种展现形式，第一种为Custom-Built Website，自定义所有到布局，效果，用户读取数据的方式，这种是真正意义上的从0到1。第二种为Website Builders，以Squarespace，Wix为代表性模版网站，模版网站自带布局，效果，我们只需要往里面嵌套文字即可。第三种为CMS，论坛型模版网站，以WordPress为代表性网站模版。

这三种方式基本覆盖了在实现过程中我们会考虑的产出方式。

3.WEB UI

即网页中的视觉可视化。这在设计初期就必须把布局，配色，图标，图文比都设定。UI的制作通常在Photoshop中进行，所以同学们需要掌握如何在PS中切出网页适用性图片。同时，还为同学们推荐一个插件Cutterman，他可以替代传统的切图模式，提高相关工作的效率。

图源：cutterman.cn

4.WEB UX

即让网页逻辑清晰排布的线框图原型工具，原型图工具有Adobe XD，Sketch， Axure RP，Principle 等。

其中Adobe XD为免费软件，MAC和Windows端通用，使用门槛低，同时也支持多款免费插件，能比较基础达到作品集使用效果。Sketch为MAC端付费软件，虽然有破解版但功能略有差异，老牌软件支持多款插件。Axure为Win端付费软件，也有不少win设计师们经常使用。Princilple是专门针对原型动态演示视频，经常与Sketch搭配使用，能够有很好的动态演示效果。

5.WEB IDE

即网页软件开发工具，当我们一个网页里有了视觉效果，有了逻辑框架之后，就需要将UI，UX放入IDE中进行开发，把他们真正编写成可用网页。

常见的IDE工具有Dreamweaver，他是设计与编程一体化软件，可以可视化代码的编写过程，让网页开发时更加可视化，设计人员用的多一些。另外，Brackets，也是一款比较轻量级的前端编辑器，适合新手使用。这两款比较适合同学们制作作品集使用。

6.WEB Framework

即网页前端开发框架，比较常用的是Bootstrap，这也是国外老师常推荐使用的框架，帮助前端工具轻松搞定自适配等一些繁琐等预设。

图源：bootstrap

7.WEB Automation

即网页优化工具，这一点同学们使用的案例偏少，毕竟这个是涉及到专业的开发领域了，从字数，从跳转功能，从代码规整进行优化，来减少一个网页加载所需要下载的字节。在这一步，同学们有一个宏观的认知即可。

图源：Nordi APls

8.WEB Publish

即网页发布时，需要添加的架构逻辑。一个网页一定会有index主页，也就是首页，可以用自己的名字命名。除了首页之外还有其他链接的附属页面，需要大家有命名规范。

图源：kope media

发布网站的时候，如果不是用模版网站搭建的话，我们就需要自己找一个服务器，比如Namecheap，Bluehost，Dreamhost都是很好的服务商。目前来说，大部分同学会选择用模版网站服务商，毕竟操作更直观，价格也实惠。

图源：ChurchMag

02 案例分析

上一节对于网页设计的具体流程做了简单讲解，接下来以康石石东家-汉艺国际的一个优秀学生案例来看看网页设计的完整实现：

汉艺18届学员L同学作品集展示（部分）获埃因霍芬 交互设计 MA offer

L同学的作品呈现中可以看出她首先有一个清晰直观的网页设计逻辑，同时UI也按照网页制作要求进行了切图。那么之后的实现操作就会变得直观起来。

部分切图

URL Structure

L同学作品展示，高保真效果

L同学作品展示，网页Demo效果

最后对比两张图可以发现，高保真和网页Demo效果差不多，这都是源于设计前期UI和UX结构清晰分明。

因此，上面列出的8个环节，虽然看起来复杂繁琐，但是每个环节都紧密联系，缺少一个都会让最终实现大打折扣

顺着整个流程再加上高质量的视觉呈现才会让网页设计成为作品集中的拔高项目，向院校考官展现你从设计到实现的实践动手能力，让考官看到你的作品集值得“投资”的潜力，以增加你申校的成功率。

更多艺术留学及作品集相关问题，可头条私信康石石。