WEB语言和APP语言是完全不同的,网页制作具体的流程性步骤也不同

作者:小站 来源:建站公司 2019-09-26 21:29

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

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

WEB语言和APP语言是完全不同的

所以交互设作品集创作之前,首先要明确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结束。下面把每一个环节拿出来单独解释,详细了解,明确每一个环节的操作和用途后,才能有条不紊的进行创作。

WEB Brower

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

WEB Build Format

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

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

WEB UI

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

WEB UX

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

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

WEB IDE

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

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

WEB Framework

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

WEB Automation

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

WEB Publish

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

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

02

案例分析

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

汉艺18届学员L同学作品集展示(部分)

获埃因霍芬交互设计MA offer

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

部分切图

URL Structure

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

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

因此,上面列出的8个环节,虽然看起来复杂繁琐,但是每个环节都紧密联系,缺少一个都会让最终实现大打折扣。同学们想要实现项目的落地,便需要梳理清晰网页设计Workflow和细节的把控,遇到困难不要跳过去,多试多练。

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


本文地址:网站建设教程频道 https://www.dayku.cn/jiaocheng/3226.html,武汉易企推建站公司提供一站式网站制作开发服务:武汉网站建设、网站开发、高端网站设计制作、手机网站开发,微信小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、网站优化服务、百科词条创建修改、新媒体引流、公司负面公关处理等


相关文章相关文章
  • Web下的301重定向如何设置?常见的什么情况下会用到301跳转?

    Web下的301重定向如何设置?常见的什么情况下会用到301跳转?

    常见的什么情况下会用到301跳转? 1.建立网站的时候,不带www和带www的地址,如果都可以打开,那么搜索引擎就会分散首页地址权重,建议最好用带www的地址域名来做,以后我们推广的地址都是用www即可。现在就有问题了,肯定还是有人会用不带www的地址来输入打...

    2019-09-12 21:00
  • web服务器的静态分析和动态分析取证

    web服务器的静态分析和动态分析取证

    现在互联网技术的蓬勃发展,诸如像大数据、云计算、人工智能、物联网、虚拟现实等新一代科学技术不断涌现。互联网技术带给我们极大的方便,“网网互联,物物互联,连接一切”已经深入到我们每天的生活中,我们随时随地都可以连接到互联网。...

    2019-06-24 10:23
  • Ai时代语音搜索已经来临 SEOer你们准备好了吗-语音搜索SEO解析

    Ai时代语音搜索已经来临 SEOer你们准备好了吗-语音搜索SEO解析

    Ai时代语音搜索已经来临 SEOer你们准备好了吗-语音搜索SEO解析,随着移动搜索的增长,各大语音软件的相继成熟,语音搜索 已不是什么很新鲜的功能了,并已明显成为用户需求的增长点,不断在发展。那受到 AI 和 语音搜索 影响的SEO,到底要怎么做呢?什么时候人...

    2018-06-14 22:29
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

5-10分钟售后响应机制<

贴心

5-10分钟售后响应机制

按效果收费,无效果不收费

放心

按效果收费,无效果不收费

行业高标准,效果稳定可靠

稳定

行业高标准,效果稳定可靠

1-3个月排名上百度首页

快速

1-3个月排名上百度首页

武汉易企推建站公司;公司地址:武汉市武昌区静安路6号5.5创意产业园4楼;公司官网:https://www.dayku.cn

服务热线:18120550335 / 027-88866235 欢迎来电咨询; 联系QQ:1193073039

Copyrigh@2017-2030 版权所有:武汉易企推网络科技有限公司 备案号:鄂ICP备17012199号 网站地图