爱思享成长俱乐部 网页设计说明书

网页设计 创意说明 作者 柴洪伟

4

网页设计 柴洪伟

关于我 柴洪伟 男， 出 生 于 1996 年 12 月 11 日， 籍 贯 为 河 北 省 邢 台 市 广 宗 县。2014 年 9 月 1 日进入华北理工大学艺术学院 视 觉 传 达 系 就 读， 现 为 14 级 视 觉 传 达设计 1 班的班长，曾担任华北理工 大学学生会宣传部部长以及唐山彩绘 公 益 联 盟 办 公 室 主 任。 连 续 获 得“ 优 秀大学生”、“优秀学生干部”及“优秀 党 员” 等 称 号。 荣 获 多 种 大 赛 奖 项， 在“庆母校更名，书心底祝福”微语征 集大赛中获二等奖；在华北理工大学 2016 年 校 园“ 创 青 春” 大 学 生 创 业 大 赛中获得三等奖；在 2016 寒假社会 实践中获“优秀个人”；在校艺术大赛 中 多 次 获 得 奖 项 等 等。 连 续 获 得“ 校 内一等奖学金”及“国家励志奖学金”。

曾在唐山志道和公司做后台管理以及 宣传策划；爱思享成长俱乐部形象包 装设计师；组织参加多个大学生创新 训 练 计 划 项 目 —“ 动 漫 形 象 UI 设 计” 和“以升平台视觉识别系统设计研究” 等；多次参加外出墙绘志愿活动；并 在新视觉设计工作室中实习。

大学前三年的经历让我切身体会到， 要不断的充实自己，才能不断进步， 为即将进入社会的自己加油打气，做 足准备。

6

网页设计 柴洪伟

W

课程介绍 《网页设计》是视觉传达设计的 专业课程。课程几乎涉及到了视觉传 达设计专业基础课程的各个方面，课 程实践中注重对专业基础课程如图 形、字体、标志、色彩、版式设计等 课程的统合和整体应用。同时，网页 设计是信息设计的一部分。至少未来

课程初，我们以模拟实战的方式

五到十年，我们还处在互联网时代，

确 定 网 站 的 类 型 和 风 格 —— 儿 童 类

无论我们从事何种工作，所接触到的

网站设计。课程中，首先引导学生有

载体或多或少的都会与互联网产生关

针对性的浏览、参考、借鉴国内外优

系。国家层面的推动以及营销方式的

秀的网站，在色彩设计、图形应用、

改变，驱动着要我们要更加了解、更

结 构 的 层 次 感、 视 觉 的 节 奏 感 等 方

加擅长处理在屏幕（电脑、手机、电

面提高视野与审美；其次通过调研分

视、pad 以及可穿戴设备）内的设计

析 —— 设 计 结 构 流 程 图 —— 线 框 图

（这也叫新设计）。

（ 原 型 图） —— 视 觉 效 果 图 等， 建 立并让学生熟悉比较完整的网页视觉 设计流程，由于课时所限本次课程不 涉及网站的上线运行这一环节；最后 的 作 业 形 式 是 —— 创 意 指 南， 同 学 们把前期的调研、设计中的创意构思 以及网页界面的视觉效果进行梳理， 并把累积的视觉符号、图片、元素、

整个课程设计是一个完整的思维

色彩、文字、草图以及课程总结等进

过程，真心希望同学们建立一套适合

行编排，形成一本完整的、纸质的设

自 己 的 思 维 方 式， 那 将 是 终 身 受 益

计手册。

的！

李宝亚 2017 年 5 月

8

目录 ●《网页设计》作者简介···························· 5 ●《网页设计》课程表····························· 6 ●《网页设计》课程介绍···························· 7

前期调研

优秀网页赏析 ● Stupid Studio — 丹麦····························10 ● Cyril Masson — 法国 ····························13 ● C&C Coffee Company — 美国 ·························16 ● Rhode Island School of Design — 美国····················19 ● The Webby Awards — 国际 ··························21 ●赏析总结 ··································23

网页流程图 ● Baby TV ··································24

网页原型图、效果图 一级页面 ● Baby TV 首页 ································25 三级页面 ● Baby TV—亲子活动—产品 ··························26

网页设计 柴洪伟

W

后期制作

网页流程图 ●爱思享成长俱乐部 ······························28

网页原型图、效果图 一级页面 ●爱思享成长俱乐部首页 ····························30 二级页面 ●爱思享成长俱乐部—绘本馆···························32 ●爱思享成长俱乐部—培训班···························34 ●爱思享成长俱乐部—亲子活动·························36 三级页面 ●爱思享成长俱乐部—绘本馆—简介························38 ●爱思享成长俱乐部—绘本馆—图书························40 ●爱思享成长俱乐部—培训班—简介························42 ●爱思享成长俱乐部—培训班—课程························44 ●爱思享成长俱乐部—培训班—教师························46 ●爱思享成长俱乐部—亲子活动—线下·······················48

●《网页设计》课程总结·····························51

10

优秀网页赏析 ● Stu pid Studio —丹麦 简介： Stupid Studio is a Danish design a n d b r a n d i n g a g e n c y. A w a r d winning Danish design studio.

Our work connects companies with people in new and engaging ways.

Stupid Studio— 丹 麦 著 名 设 计 工 作 室，位于丹麦首都哥本哈根。

前期调研

（哥本哈根曾被联合国人居署评选为 “ 最 适 合 居 住 的 城 市”， 并 给 予“ 最 佳 设计城市”的评价）

首页： 布局结构—扁平 / 模块化 标准色彩基调—深灰色 名称 & 导航—两侧置顶 宣传标语—居中突出 版块 / 栏目—交互动态 其他信息—底部辅助 网页设计 柴洪伟

W

版块 / 栏目： 网站版式特性突出 模块扁平化设计，图形为主，文

栏目丰富：主题栏目个数在总栏目中

字为辅；

占绝对优势，有明显的专业，主题突

块面结构突出：模块化不仅可以提高

紧扣主题：将主题依据内容分类并将

出，容易给人留下深刻印象；

重用性，也能统一网站风格，还可以

它们作为网站的主栏目（专题）；

降低程序开发的强度。

12

子网页： 结构：秉承一贯的网页风格，以块面结构特 征 为 主， 风 格 统 一， 增 强 了 专 业 性； 图 文 结

前期调研

合避免了长文本文字，减轻视觉疲劳，增强 易读性；

颜 色： 变 中 又 整， 整 中 有 异， 避 免 了 单 一 颜 色的单调，增强视觉效果；

布 局： 经 典 的 左 右 框 架 型， 图 文 并 排， 踏 实 稳重。

网页设计 柴洪伟

W

● Cyr il Mas so n—法国 简介： Cyril Masson（France） P h o t o g r a p h e r & F i l m D i re c t o r.

Co-founder & Creative Director of STUDIO.

西里尔马森 ( 法国 ) 摄 影 师 兼 电 影 导 演， 联 合 创 始 人 & 工作室创意总监。

首页： 网站首页以一张大尺度图像为

面中表现出无限的空间感的同时也在

主，侧重于构图、色彩及表达思维主

影射站主的职业身份。网站名称以及

旨，给人以空灵的意境和透气爽快的

导航信息短幅度围绕图像展开，更好

感觉，这种构图形式可以在有限的页

的服务于主题。

14

前期调研 网页设计 柴洪伟

W

子网页 : 网站结构特性突出 水平滚动网页设计相较于垂直页

结构：作品集的展示与众不同，通过

面设计，水平滚动设计在图片展示中

水平滚动设计，提供了更多作品的细

具有压倒性优势。在众多千篇一律的

节，而作品本身也非常适合采用水平

垂直布局网站中，该网站恰恰结合自

滚动；

身特性设计出一款水平滚动浏览的图 片网站，可以称得上是鹤立鸡群，独

色彩：深灰色的背景给人稳重舒适的

树一帜；

享受，平滑统一，没有突兀感。通过 水平滚动，让人有一种漫步于画廊的 感觉，创意和实际的完美结合。

16

● C&C Coffee Co m pan y —美 国 简介： C&C Coffee Company is a locally owned coffee shop that seeks to bring quality and fair trade coffee to downtown Chambersburg and beyond. From our slow-process cold brew to our handcraf t espresso drinks, we strive to offer the ver y best coffee and specialty drinks.

C&C Coffee Company— 美 国 钱 伯 斯堡的一家力求为当地居民带来高品 质生活享受餐饮店。

首页：

前期调研

网站颜色特性突出 该餐饮店利用色彩与消费心理的 关系，将网站的主色调设置成橙色， 是抓住了了橙色兼有红与黄的优点， 明度柔和，使人感到温暖又明快，是 易于被人们所接受的颜色。一些成熟 的果实往往呈现橙色，而且富于曹养 的食品 ( 面包、糕点等 ) 也往往都是 橙色。因此，橙色又易引起营养、香 甜的联想，使人产生饥饿感，从而促 进消费的产生。

网页设计 柴洪伟

W

主旨突出：宣传标语位于首页，字体 简洁大方，与复杂的背景图片形成鲜 明的对比，更加突出文字部分即该公 司的服务宗旨。

主题鲜明：菜单栏分类清晰可见，简 洁明了，主要突出文字部分，归纳了 几种不同口味的咖啡及其原材料，可 见该店的用心细心，让每位饮者买的 舒心，喝着放心，印象满分。

18

前期调研 子网页： 形 式 与 内 容 统 一： 这 个 网 站 只 有 — OrderOnline 一 个 子 网 页 且 这 个 网 页上的食品分类很清新（让人由衷的 感觉干净卫生有食欲），形式的规整 更加烘托出内容的丰富，变化统一；

信息文字的弱化：在主页和子页底部 都有具体的营业时间和联系方式，再 一次印证该店的用心。而且这些文字 居于底部，更好的为主体服务，主次 分明。

网页设计 柴洪伟

W

● Rh od e Is land Sc ho o l of De sign — 美 国 简介： Rhode Island School of Design (RISD) is a fine ar ts and design college located in Providence, in the U.S. state of Rhode Island. It has been ranked among the best art and design universities in the United States, while the QS World Univer sity Rankings by Subject ranked it as the world's 3rd best institution for the study and practice of Art & Design in 2016.

罗得岛设计学院—美国最好的艺术 设计大学。 2016 被 评 为 世 界 第 三 最 佳 艺 术 设 计 研究实践机构。 首页 使用高品质充满了设计感的的背景图片 不仅给网站添加更多的吸引力，更使网站达到美学的更高水平

该网站 2011 年推出，2012 年就获得教学类威比奖

20

子网页： 网站关系特性突出 颜色：背景以灰色调为主，高雅别致， 满满的艺术气息； 排版：扁平化的设计风格，背景大图 呈暗色，与主要信息部分的亮色对比 鲜明，起到了很好的衬托作用； 通过形状、色彩和字体呈现出了清晰 的视觉层次。

前期调研 版块：每个版块下面有各自的主栏目 和分版块分类清晰，各版块既有相对 独立性又相关联，版块的内容始终围 绕站点主题； 布局：匡字形布局结构，上面是标题 及分类导航，左侧是一窄列菜单，右 列是很宽的正文，下面是一些网站的 辅助信息，很浅显易懂； 空间：合理的空间留白，使页面达到 了视觉上的平衡。

网页设计 柴洪伟

W

● Th e Web b y Awards— 国 际 简介： A We b b y Aw a rd i s a n a w a rd for excellence on the Internet presented annually by The International Academy of Digital Arts and Sciences, a judging body composed of over one thousand industr y exper ts and technology innovators.

Categories include websites;

首页：

advertising and media; online film

网站响应特性突出

and video; mobile sites and apps;

响应式网页设计：不仅能让桌面网页

and social.

智能地根据用户行为以及使用的设备 环境（系统平台、屏幕尺寸、屏幕定

威比奖是由国际数字艺术与科学学院

向等）进行相对应的布局，同时还为

主办，针对网站设计、功能以及创意

用户带来完美的体验，方便阅读和导

而设立的评选全球最佳网站的奖项，

航，只需最少的调整便可实现缩放滚

这个奖项开始于 1996 年，约 500 位

动，支持了更广泛的设备；

Web 专 家、 企 业 代 表、 杰 出 人 物、 幻想家和创意名人共同参与评奖，被

多彩色风格：运用多种纯色块搭配使

誉为互联网界奥斯卡奖。

用，得到很好的视觉效果，该设计风 格很适合多屏式的页面排版；

布局：以综合框架形结构为主，通过 左右上下框架的完美结合，丰富有内 涵且时尚大气简洁；

信息框架扁平化：减少信息层级，追 求信息到达用户的最短距离，从根本 上解决移动端页面小的问题；

简洁的主操作栏：便于用户的使用和 了解，并且减少用户发生错误选择的 可能性。

22

子网页： 文字在字体、大小、颜色上区分 让文字在视觉上拉开功能性方面的区 分，让整篇文字大小看上去差不多的 页面有了视觉中心和层次感，这些细 节体现出设计上的专业性；

白色背景看上去柔和更人性化；

色块间的显著对比在划分不同信息区 域中散发出整体偏亮的设计，独有的 时尚的味道；

简洁的色彩方案、方形的设计元素、 简洁的图标、无衬线字体等统一的设

前期调研

计风格构成整个页面干净、简洁的心 理感受；

整体风格感觉很干净，整个页面近乎 于白色 , 极个别的色块和图片萦纡其 上，简约靓丽；

各部分信息间较宽的留白，让页面也 更有透气感，设计感十足，留白和细 腻精致让设计看上去清爽、透气。

网页设计 柴洪伟

W

●赏 析总结

1. Stupid Studio—网站版式特性突出（扁平化设计）

2. Cyril Masson—网站结构特性突出（水平滚动网页设计）

3. C&C Coffee Company—网站颜色特性突出（色彩与消费心理）

4. Rhode Island School of Design—网站关系特性突出（层级关系处理）

5. The Webby Awards—网站响应特性突出（响应式网页设计）

24

网页 流 程 图

● B a by T V

前期调研 网页设计 柴洪伟

W

网页原 型 图 、 效 果 图 ● B a by T V 首页

☆效果图

☆原型图

26

● B a by T V—亲子活动—产 品 ☆原型图

前期调研 ☆效果图

网页设计 柴洪伟

W

概述： Baby TV 是一家专门针对幼儿的 在线互动交流网站。整个网页设计充 分贴实网站主旨，通过运用对比与调 和、对称与平衡、节奏与韵律以及留 白等手段，通过空间、文字、图形之 间的相互关系以及交互动态效果建立 整体的均衡状态，产生和谐的美感。

28

网页 流 程 图

●爱 思享成长俱乐部

后期制作 网页设计 柴洪伟

W

概述： 爱思享成长俱乐部是一家专注儿 童教育的机构，本网站根据该机构的 分 部 门 共 设 为“ 俱 乐 部、 绘 本 馆、 培 训 班、 亲 子 活 动 以 及 联 系 我 们” 五 大 版块，由此构成网站的一级页面，即 首页。 每个版块各成一体，又有自己的 分版块，由此构成网站的二级页面。 分版块直接对应各自的内容页， 由此构成了网站的三级页面。

30

网页原 型 图 、 效 果 图 ●爱 思享成长俱乐部首页

后期制作

☆效果图

☆原型图

网页设计 柴洪伟

W 一级页面

概述： 首页一屏，简洁大方，易浏览；

拟物化的导航栏不仅生动形象，

流动的背景大图，前后呼应，场景感

吸引浏览者的目光，更及时有效的提

十足，加上孩子们天真可爱的动态，

供了网站信息；各导航的内容交互动

自然流露，代入感倍增；大尺度图像

态切换，层次错落之中增强了浏览兴

为主，侧重于构图、色彩及表达思维

趣，引发共鸣，体现诚意；

主旨，给人以空灵的意境和透气爽快 的感觉，这种构图形式可以在有限的

主题栏目个数占绝对优势且主题 突出，容易给人留下深刻印象；

页面中表现出无限的空间感，网站名

色调统一，静谧之中不失活泼，

称以及导航信息短幅度围绕图像展

变中又整，整中有异，避免了单一颜

开，更好的服务于主题；

色的单调，增强视觉效果；

宣传标语居左，符合视觉浏览习

信息文字位于主页和子页底部，

惯且表达俱乐部的宗旨，让浏览者从

弱化处理，更好的为主体服务，主次

心了解；

分明。

32

●爱 思享成长俱乐部—绘本 馆 ☆效果图

后期制作 网页设计 柴洪伟

W 二级页面

概述： 爱思享绘本馆是爱思享成长俱乐 部旗下的一个专门为少年儿童开设的 公益性质的读书交流场所，宗旨是在 家长无需支付昂贵费用的前提下，培 养孩子的良好阅读习惯，让孩子尽情 享受正版阅读带来的乐趣。 根据绘本馆的这一大特性，将该 ☆原型图

网页设计成专门针对少儿这一受众群 体的简易浅显版式结构。在线 TV 不 仅可以让你畅所欲读，更有人声版音 频让你尽享视听盛宴；“最新图书”和 “热门图书”更是将你想要的图书信息 一览无遗，分享收藏一键即可，人性 化的设计真实可信；色彩明亮，版式 新颖，分栏清晰，力求在不失个性的 同时，符合形式美法则，对称均衡， 变化统一。

34

●爱 思享成长俱乐部—培训 班 ☆效果图

后期制作 网页设计 柴洪伟

W 二级页面

概述： 爱思享培训班是爱思享成长俱乐 部的优势部门，旨在发展成为年招生 人数达到千人以上的河北省最具竞争 力的培训机构之一。培训班师资力量 雄厚，分为文化和艺术两大版块，共 有“语文、数学、英语、美术、钢琴、 舞蹈”六大专业课程。 根据培训班的实际情况，在本二 级 页 面 中， 特 别 将“ 网 课 直 播”、“ 视 频 聊 天” 这 两 项 优 势 特 色 放 置 于 此， 吸引浏览者的目光，让你足不出户便 可与各课程的老师面对面讨论交流， 增强自身学习硬实力，文化软实力以 及艺术修养；卡通人物图标形象生动 的表现了各位老师的真实面貌，一统 网页风格，满足了少儿受众群体的需 要，贴实主题；设计强调其整体性， 使浏览者更快捷、更准确、更全面地 认识并掌握网页，给人一种内部有机 联系、外部和谐完整的美感；简约、 清爽，文字可读性强，信息呈递效果 佳，有趣的创意。顺畅的浏览体验， 追求极致美的享受。 ☆原型图

36

●爱 思享成长俱乐部—亲子 活 动 ☆效果图

后期制作 网页设计 柴洪伟

W

爱思享亲子活动致力于为广大家 庭带来温馨快乐的同时，增强家长和 孩子间的互动交流，促进情感升华， 让爱的种子传遍中华，培养出思行全 能的新一代祖国花朵。 根据亲子活动这一特色，将这一 网页的在线 TV 充分利用，“歌曲单”“ 和 “节目单”两大栏目强强联合，旨在让 ☆原型图

每一位家长都能陪着孩子一起听歌学 歌看节目，促进亲子互动；浅色的背 景给人稳重舒适的享受，平滑统一， 没有突兀感；内容部分分栏处理，简 约顺畅，表达贴切，创意和实际完美 结合；通过认真设计和充分的考虑来 实现全面的功能并体现美感，实现形 式与内容的统一；网页具有多屏、分 页、嵌套等特性，并对其形式加以适 当变化以达到多变性处理效果，丰富 整个网页的形式美。

二级页面

概述：

38

●爱 思享成长俱乐部—绘本 馆 —简 介 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

40

●爱 思享成长俱乐部—绘本 馆 —图 书 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

42

●爱 思享成长俱乐部—培训 班 —简 介 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

44

●爱 思享成长俱乐部—培训 班 —课 程 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

46

●爱 思享成长俱乐部—培训 班 —教 师 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

48

●爱 思享成长俱乐部—亲子 活 动 —线 下 ☆效果图

后期制作 网页设计 柴洪伟

W

三级页面

☆原型图

50

三级页面概述： 结构上秉承一贯的网页风格，点

合理的空间安排、有机的组合，

线面结构特性突出，以经典的匡字形

使页面达到平衡，即使有大面积的留

布局结构为主，上面是标题及分类导

空，同样不会让人感到空，相反这样

航，左侧是一窄列菜单，右列是很宽

会给人留下广阔的思考空间，使人回

的正文，下面是一些网站辅助信息，

味又达到了视觉效果；

浅显易懂，各级网页风格统一，增强 了专业性；

一键置顶，符合实际需要，减少 浏览难度；

透亮的大背景更好的烘托网页内

文字在字体、大小、颜色上的区

容，层次清晰，关系明确，给人以舒

分让文字在视觉上拉开功能性方面的

适愉悦的视觉享受；

层次感，这些细节无不体现出设计的

图文结合，避免长文本文字，减 轻视觉疲劳，增强易读性；

唯一性和专业性； 简洁的色彩方案、圆形的设计元

后期制作

素、高辨识度的图标、无衬线字体等 统一的设计风格构成整个页面干净、 整洁的心理感受； 细腻精致的留白让设计看上去清 爽、直观，让页面也更有透气感，设 计感十足； 整个网站内部的页面，都统一规 划，统一风格，让浏览者体会到完整 的设计思想和理念； 本网页在追求单纯、简练、清晰 和精确，强调艺术性的同时，更注重 通过独特的风格和强烈的视觉冲击 力，来鲜明地突出设计主题； 网页上所有的图像、文字，包括 背景颜色、区分线、字体、标题、注 脚等在风格上始终保持大同，贯穿全 站，给浏览者舒服、顺畅的体验，提 升专业性能，印象满分。

网页设计 柴洪伟

W

●《 网页设计》课程总结

本学期的网页设计课程可以说是

从课程的第一节课开始，就注定

虽然我的大学生活仅剩下短短的

给了我莫大的启迪，让我受益匪浅。

我的思想境界与设计观念将因此而得

一年，但是学习的时间并不会因此而

到全面的升华。

中断，相信自己，努力过后，成功不

通过让我们每个人对优秀网页设

再是空谈。

计解析这一形式，充分体现了我们的 指导教师李宝亚老师的责任心、耐心 和用心，这不仅仅激发了我对网页设 计的学习兴趣，调动学习的自觉性， 增强自己动脑、动手，动口的能力， 更让我在和老师交流沟通中不断的学 习和进步。 “网页设计”顾名思义是对网站页 面的设计研究，与平面设计可谓是息 息相关。作为网页设计的初学者，我 在相关资料的整理和老师的指导下， 结合自己先前的工作经验与亲身实 践，使得前期的调研工作得以充实， 并在不断发现问题和解决问题的过程 中学到了很多知识，增强了我的创作 能力和动手能力。尽管设计网页，并 不是一件容易的事，它包括网页的选 题、内容采集整理、图片的处理、页 面的排版设置、背景及其整套网页的 色调等很多东西，但是在这一整套的 学习制作过程中，从构思到设计、完 善，我都全身心投入，虽有不足但收 获颇多。接下来我会利用自己的业余 时间来投入到网页设计中，并努力的 通过自身对相关知识的再学习，以此 来不断的充实和完善自我。

— 柴洪伟 2017 年 5 月 11 日 于华北理工大学艺术学院

52

网页设计 柴洪伟