网页视觉设计与创意表现
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

第二节
网站设计思维与制作流程

1.了解网站设计思维及网站的制作流程。

2.理解互联网思维及网站制作中不同职位的组成。

3.掌握网页设计与制作的基本流程。

牢记一点,不可能所有的用户显示器的分辨率都和设计者的一样,要考虑余量,不然很可能做出来不符合浏览器要求。一般可以设定得再稍微小一点,因为有些浏览器加了插件或者其他的功能,导致宽度会有变化。

自适应屏幕:简单的就是Flash动画,只是说这几年html5、自适应、交互式的需求越来越多,感觉全屏显示已成为现在网页设计的主流,自适应屏幕也分为几种,一种是整体自适应,宽度100%,高度自适应屏幕的现实高度,内容基本显示在一个页面上,通过交互效果来显示网站内容信息;一种是一半固定一个值,另一半自适应,通过比例来确定另一半的宽度,来将这个网站满屏起来。

像全屏自适应的网站,比如现在流行的大数据、个人网站相对用得比较多。

说-说:设计中的故事思维。

大部分的设计师都知道深泽直人,并且都赞赏过他设计的这个壁挂式CD机。(图1-11)

深泽直人(图1-12)是这么介绍自己的设计的:“一天,我一边听着从敞开盖子的CD播放器播放出来的音乐,一边看着旋转的CD。旋转的形象让我想起厨房里由马达所驱动的通风扇,当你拉下通风扇的线绳,叶片就开始转动;过一会儿,当叶片的旋转趋于稳定,风的声音也随之变得恒定了。我想,如果在CD播放器里内置一个扬声器,把它挂在墙上听,感觉应该会很好……当拉绳被拉下,CD开始慢慢地旋转,音乐播放出来,就像气流从风扇中吹出来一样。”

深泽直人没有夸夸其谈他的设计是如何的有创意,如何的漂亮。他讲了一个故事,在这个故事里传达了他的设计想法,产品操作方式、使用情境;而观众从第一句“一天”开始,就被他带入了故事中,仿佛身临设计师当时所处的情境。

图1-11 壁挂式CD机

图1-12 深泽直人

想-想:设计思维的核心是什么?

设计师应具备哪些设计思维?

设计思维的核心是以用户为中心,在如今的互联网行业已经是非常普遍的认知。作为一名合格的用户体验设计师,需要有坚实的设计思维理论基础,并能够运用在设计工作中。

一、网页的设计思维与制作流程

网页的制作是一个循环往复的过程,大致要经历前期策划,规划网站框架,整理相关素材,网页设计与制作,编写代码、实现动态效果,测试、完善后上传及推广、维护更新这七个步骤(图1-13)。

图1-13 网页的制作流程图

1.前期策划

策划网站主题,明确网站建设的目的意义,进行前期调查,包括:

(1)了解同类型网站的发展趋势,了解目标用户的需求,分析其优劣势;

(2)根据调查结果,结合自身特点,确定网站的产品和服务方向;

(3)考虑网站所用技术。

2.规划网站框架

以用户为中心,规划网站的内容框架,即提供哪些服务,拥有哪些功能,明确网站各个页面之间的关系,知晓每个页面上的功能及栏目划分(图1-14)。

3.整理相关素材

收集的材料主要来源于两个方面:甲方提供的网站,从书籍、期刊和网上等收集而来。

4.网页设计与制作

(1)确定网站页面间的交互关系及交互原型;

(2)确定界面布局、拟定视觉风格,根据各个主题栏目布局绘制线框图、设计平面效果图(图1-15)。

5.编写代码、实现动态效果

编写代码时要遵循由大到小、由简到繁的规律,即先布局框架,再实现动态效果。

图1-14 网页的框架

图1-15 布局线框图

6.测试、完善后上传

网站成型后由测试工程师对产品进行功能、性能、安全等测试,并对测试结果进行分析,利用FTP工具将网站发布到Web服务器上。

7.推广、维护更新

网络安全、动态信息更新、新产品更新、咨询回复等,适度地更新网站信息能培养忠实用户,增加网站的黏合度。

二、网站开发的团队与协作

从整体上看,一个小型网站的设计团队起码应该具有产品策划人员、开发人员、设计人员及运维人员4个角色,而在一些较为大型的公司中则细分为产品经理、架构师、交互设计师、UI设计师、前端开发工程师、后端开发工程师、测试工程师、运维工程师等职位。在一些大型项目中每个职位都可能是由多人团队组成,他们进行具体的任务分工(图1-16)。

图1-16 网站开发团队示意图

图1-17 源于火星时代网站职业介绍

1.产品经理:是对网站从策划到上线都了如指掌的角色。他们负责分析项目、分析市场、分析用户、分析竞品、产品线规划、设计原型、PRD、产品宣讲、进度推进等。他们根据用户的需求策划设计产品、制作团队的推广计划,在执行中发现问题并及时调整,具有一定的线下活动策划能力,同时还要兼具协调好全公司产品上下游所有部门关系的能力。

2.架构师:是既能掌控网站整体开发技术又能洞悉技术局部瓶颈,并依据具体的业务场景给出合理的解决方案的团队技术领导型人物。他们主要着眼于系统的技术实现,负责确认和评估系统需求,给出开发规范,搭建网站实现的核心系统构架,并澄清技术细节、扫清主要难点。

3.交互设计师:是秉承以用户为中心的设计理念,以用户体验度为原则,对交互过程进行研究并开展设计的工作人员。他们一边要和信息、技术部门协调相关的页面逻辑、数据承载方式等,平衡多方利弊,一边还要梳理用户与网站间的交互关系,并将交互流程转换为流程图、线框图,可视化展现网站的低保真原型(也称交互原型),确保设计人员与开发人员的有效沟通。

4.U I设计师:也称用户界面设计师,负责界面设计。他们具备较强的图形设计能力,了解各平台的设计规范,掌握一定的前端开发知识,能将模糊的需求直接转化为富有创意与视觉表现力的界面。UI设计师负责设计高保真原型(即网页视觉效果图)以及输出切图、标注给开发工程师,并且与前端工程师密切沟通,确保自己的设计实现(图1-17)。

5.前端开发工程师:是随着Web技术发展,从开发工程师中细分出来的职业。前端开发工程师熟知前端开发技术(如HTML、CSS、JavaScript等),负责网站前端代码的修改调试和开发工作。他们既要与上游的产品经理、交互设计师和U I设计师紧密配合实现设计想法,还要与下游的后端工程师沟通,确保代码有效对接,优化网站前端性能。

6.后端开发工程师:复杂逻辑的设计(如权限控制、前端数据交互、配置信息、路由等),让用户不仅从视觉上体验到炫酷的效果,而且还要能够达到实用的目的。

7.测试工程师:负责的内容包括编写测试计划、规划详细的测试方案、编写测试用例等,他们根据测试计划搭建和维护测试环境,然后执行测试工作,提交测试报告,对测试中发现的问题进行详细分析和准确定位,并与开发人员讨论问题的解决方案。

8.运维工程师:负责响应及解决客户的技术需求、疑问以及系统使用过程中遇到的各种问题。他们会收集并撰写服务过程中的问题现象和处理方案,形成知识库,并且及时反馈技术处理过程中的异常情况,联系相关部门负责人,主动协调资源推动问题解决。

做-做:如何制作一个自己的个人网站?

三、个人网站的设计与制作

第一步:框架规划(图1-18)。

第二步:素材参考(图1-19)。

第三步:网页布局及效果图制作,效果图应注意页面间交互合理、风格一致、图像精美、色彩统一、字体易于识别(图1-20)。

图1-18 个人网站架构图

图1-19 个人网站参考图

图1-20 个人网站线框图和效果图

本章总结

本章着重学习了网站的一些基本概念,了解了网页界面空间的影响要素和网站开发团队各个职责间如何协作,理解网站制作的工作流程,掌握了平面设计师与网页设计师的区别及网页界面设计尺寸的要求。通过本章的学习,使学生们能够从传统的平面思维转向互联网思维方式,培养网页界面设计师、UI设计师、网站前端设计师的基本设计与制作能力。

本章关键词

网站 主页 网站分类 商业模式 网页 第一屏设计思维 网站流程

经验法则

为辨认文件格式,需要先记住文件的扩展名。

关于文件格式

1.网页文件的扩展名为html、htm、shtml。

2.像素图兼容格式中最具代表性的是JPG、PNG和GIF。

3.矢量图格式中最具代表性的是SVG。

网页所使用的文件扩展名为“html”或“htm”,是“Hypertext Markup Language”的缩写,两种扩展名所代表的文件格式相同。

网页所使用的图像扩展名有“JP G(有时候为JPEG)”“GIF”和“PNG”这3种。这些格式全都是像素图兼容图像,是由许多像素(pixel)呈格子状排列组成的。

推荐阅读

[日]SE编辑部。网页设计:10位日本资深设计师的185条经验法则。北京:人民邮电出版社,2014.

余兰亭。网页设计:从界面布局到视觉表现。北京:人民邮电出版社,2018.

思考与练习

◎ 根据本章第一节所学内容,按网站不同种类搜集网站效果图,并以手绘的形式绘制出来。

手绘要求:

1.每一类搜集2张效果图,共计12张,并分析各自特点。

2.每一类挑选一张进行布局图的绘制(见参考图1-21)。

3.用直尺绘制,注意页面的长宽比例,注意页面的布局和网页元素的栅格化对齐。

设计步骤:

准备纸张和临摹网站—确定网页高、宽比例—利用直尺绘制页面布局—各自栏目元素对齐(图片用X表示)

考核要点:

1.考查对网页分类的理解,掌握不同网站页面设计的要点。

2.对页面布局进行设计时,能注意到页面尺寸对设计的影响。

图1-21a

图1-21b

网站是为产品及其品牌服务的媒介,不同性质、不同行业的网站所呈现出的界面内容各不相同。合理的界面板块划分,权威全面的信息介绍,及时完整的动态更新,丰富多彩的网站文化展示,塑造的是一个积极正面的网站形象。

本章将按照网站提供的功能给界面内容分类,主要包括网站形象、导航、信息内容、广告四大设计元素。通过对每一个元素细致的讲解,让学生了解各部分的内容及要求,熟知每一板块的设计规范,使学生们能够根据要求完成网页内各个部分的设计。