设计一个网页的一般流程是怎样的?

发布时间:2020-01-16 05:05:12 来源:新博体育-nb88新博官网-nb88官方网站点击:7

  WEB是以展示型功能为主,不同于应用型的APP。而网页设计除了需要设计视觉效果,还需要落地实现可操作性。接下来,康石石会帮助题主梳理出可使用的网页制作具体的流程性步骤。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  因此,上面列出的8个环节,虽然看起来复杂繁琐,但是每个环节都紧密联系,缺少一个都会让最终实现大打折扣。题主想要实现项目的落地,便需要梳理清晰网页设计Workflow和细节的把控,遇到困难不要跳过去,多试多练。顺着整个流程再加上高质量的视觉呈现才会让网页设计实现视觉和使用的双重提升。

  以上,望有帮助。——————————————————

  欢迎关注我的个人官方微信(kang-shishi)

  如有艺术留学、院校、专业、作品集方面的问题,可私信康石石咨询。