欢迎来到虎课网 ，hello ，各位同学大家好 ，我是UI帮的UI乔帮主 ，今天这节课呢给大家讲的是网页设计 ，其实很多同学做一个UI设计师 ，经常会关心这个问题 ，就是你看我做一个UI设计师 ，是不是只需要去把我们的APP做好了 ，就算是一个网页设计师 ，其实呢不要这么想 ，今天我们呢也会重点给大家说一说 ，就是作为一个设计师 ，特别是刚刚入行的小白 ，我们应该有一个很好的认知 ，也就说网页设计它也是我们UI设计中重要的组成部分 ，好 ，那我们呢今天就开始正式的课程 ，首先那我们要知道网页设计也就是我们说的Web ，这是我们今天的主题 ，那么平时我们想到的网页 ，也就是我们可以看到的 对吧 ，这些呢就是一种产品的形式跟APP一样 ，它主要是应用在我们说的电脑端 ，然后呢我们整个的网页设计的学习 ，其实是一个非常系统的过程 ，我们不可能单纯就靠一节课就可以去 ，把这个网页设计就学得很全面了 ，所以呢我们UI帮给大家一共有大概七节课 ，来比较系统的学习我们说的这个网页设计 ，好 ，那今天呢我们先来看一下这个课程的这么一个安排 ，首先第一节课呢会给大家讲的就是 ，我们网页设计的一个基础认知 ，然后第二节课就是关于网页里边的组成与规范 ，第三节课就开始带着大家呢去进行一个实际的案例操作 ，当然呢也是分四个阶段大家可以看一下 ，我就不挨个去念了 ，然后在我们通过四节课的实际案例操作之后 ，在第七节课我们再总结一下我们这个 ，

整个的网页设计的一些知识点和一些 ，需要归纳的一些小的技巧 ，好 ，那么今天呢是第一节课 ，那我们在这一节课里边主要给大家讲哪些东西呢 ，那我们来看一下 ，首先第一个我们要知道就是网页设计的一个定义与分类 ，第二个呢要知道的就是我们经常听到的一个概念 ，就是网站 ，还有今天我们讲的网页经常傻傻分不清 ，那我们呢有必要去给大家了解和纠正一下 ，这些认知上的一些容易混淆的这种概念 ，然后第三个呢我们要知道的就是网站项目的一个工作流程 ，然后第四点我们要理解网页设计 ，它和前端开发的一个关系 ，最后我们呢要知道网页设计的软件和技能要求 ，好 ，接下来呢那我们就来看一看什么是网页设计 ，在我们正式给大家去讲网页设计的概念之前 ，我们先来想一想我们大多数大多数 ，非设计专业的大多数人 ，其实眼中的网页是什么呢 ，我们想到的平时比较熟悉的百度 对吧 ，基本上大家想想 ，作为我们最开始接触网络接触网页 ，基本上就是搜索嘛想找什么东西百度一下 ，然后呢后来我们呀有了点钱 ，或者是父母爸妈给了点钱 ，开始学会什么 呀开始败家了 ，是吧 ，在网上开始学会去淘宝 ，天猫京东也是电商平台的网站 ，开始有所接触了 ，

这就是我们常人经常会接触到的 ，如果说你现在混的不错 ，已经是一个职场的这种白领了 ，往往呢我们会用到一些工具型的一些网页 ，例如说印象笔记 ，然后当然除了网页版 ，它也会有独立的一些桌面端的产品 ，那我们现在主要说的就是它也会有 ，一些在线的一些网站功能 ，好的 ，那接下来呢我们来看一看 ，作为一个设计师的我们 ，眼中的网页它会是什么样子 ，是不是跟我们说的大众不一样呢对了 ，那我们看一下 ，其实作为一个设计师 ，我们往往对自己的审美有要求 ，往往我们希望看到的网页 ，或者是我们自己做的网页 ，能够更高品质一点 ，看成高大上一点 ，对吧 ，也就说我们经常在Behance的Dribbble上看到 ，一些这样的一些网页的概念设计 ，非常漂亮 非常不错 ，很好 ，但是它会有问题 ，一会我们来说说这个问题是什么 ，好的 ，那么我们该如何正确的去理解网页设计 ，好 ，很多人对网页理解都是比较浅的 ，如果说你是外行 ，你不是一个从事设计工作的一个普通人 ，可能网页对于你来说就是能够显示信息就行了 ，说白了就是一张A4纸打上字 ，我能看懂就可以了 ，但是如果说你现在已经是设计师了 ，你就不能很被动的 ，去想要呈现一个信息就可以了 ，我们往往需要去考虑到我做的网页 ，能不能有更好的体验 ，对吧 ，包括视觉上的 包括交互上的等等等等 ，

所以那我们来看一看 ，很多人都会觉得是不是能用就行 ，那我告诉大家肯定是不行的 对吧 ，如果说你仅仅把能用就行 ，当做是一个做网页的一个最终目的的话 ，那我们就没有必要要设计师这个行业了 ，对吧 ，所以呢我们还是要考虑很多维度的东西 ，那另外有同学会考虑网页嘛就要做得酷炫屌炸天 ，对不对 ，是不是这样呢是不是真的足够酷足够足够炫 ，那它就一定是一个好的网页 ，一会我们来看一看 ，还有对吧 ，也就是我们说的高大上 ，有的同学可能会想高大上还不好嘛 ，谁不希望高大上一点 ，当然高大上本身是没有错误的 ，但是我们必须考虑一个实际的问题 ，是不是 ，你现在做的项目适合高大上吗 ，有没有考虑到这个问题 ，所以那我们必须要结合实际的项目需求 ，再考虑高大上它是否合适 ，那还有一部分人觉得什么做网站嘛 ，就要做的大而全 什么功能都给它加上 ，特别是一些我们什么刚刚创业的一些 ，老板们希望这个产品做的就是大而全 ，搞得我们设计师焦头烂额的 ，所以这里边那我们要跟大家说清楚的就是 ，我们必须先清楚网页设计的好与坏 ，它不是只靠我们说的视觉层面的一个评判 ，还要看我们说的产品功能 用户需求等等 ，但是我相信很多同学可能对于产品和 ，用户理解的不是太深 ，那么我觉得大家有必要可以去 ，看一看网上相关的一些资料 ，当然UI帮呢也会推出一些非常优秀的 ，这种产品思维的课程 ，大家后面也可以关注一下 ，

好辣眼睛的来了 ，相信很多同学也看过这张图吧 ，应该是 ，它 ，否则南京的同学不得打我 ，南宁市 ，123走 ，好 ，接下来我们来看一个辣眼睛的 ，看见很多同学看完之后 ，对吧 ，是不是觉得自己的眼睛非常不舒服 ，反正我每一次看完之后都会觉得想揉眼睛 ，其实大家也看到了 ，这个确实足够酷炫屌炸天 ，但是它合适吗 ，我们来看看它是一个什么主题的 ，是南宁市21中学的官网 ，你没有看错 你没有看错 ，这是一个中学的官网 ，我还刻意在网上查过这个相关资料 ，应该是这个中学的一个老师非常有 ，怎么说呢个人技能比较强 ，所以呢给这个21中它们的学校 ，包括食堂 包括好像是保卫室 ，所有的部门好像都做了专属的网页 ，这个热心是好的 ，但是我觉得从视觉上真的不是特别美观 ，所以我们现在可以看到这已经是改版前了 ，现在的话我们再来看一看 ，

大家会发现是不是改版之后正常多了 ，对吧 ，虽然说我们现在在拿刚才看到那种 ，国外的概念性的网页对比 ，发现还是过于传统 ，但是我们相比之下是有一点我们这种 ，校园官网的这种感觉了 ，对吧 ，绿色的很规矩的很规整的 ，也不错了 ，对吧 ，但是这里边暴露出一个问题 ，我们再来看一眼 ，再来好好看一眼 ，我怕大家一会忘了仔细的多看几眼 ，可能以后想看也看不到 ，好 ，我们可以看一下 ，大家要知道我们去做设计不光是网页 ，就是我们去做设计 ，真不是一个设计师的一个自嗨的产品 ，就是说我想做我就做 ，是这样吗 ，当然不是 ，这个世界上并不是说我喜欢 ，我愿意 ，你做的东西就是一个优秀的产品 ，所以刚才一再反复强调 ，我们所做的东西真不是一个什么 ，自己就可以主导和控制的 ，我们需要去考虑产品本身 ，对吧 ，功能定位包括用户人群 ，好 ，那接下来我们正式来说一说这个网页 ，设计的一个定义 ，好 ，那我们可以看到其实那网页其实是什么 ，就是根据产品的功能和定位 ，向浏览者传递信息 ，当然这个信息包括什么 ，比如说电商的产品 ，它卖的就是电商的那种什么商品吗 ，比如说突出包括电影 ，对吧 ，包括服装这种产品的 ，那可能还会有一些服务类的 ，例如说法律咨询的服务 ，包括我们去在建设网站的时候去买 ，一些什么虚拟的一些服务器 ，

包括云存储这种都是服务 ，当然可能还包括一些公司要传播 ，一些理念文化对吧 ，那这些其实都是信息 ，只不过传递信息的种类会有所不同 ，好 ，然后还有一个就是网站的功能策划 ，包括页面设计的美化和操作体验的提升 ，其实很多同学只停留在我们说的这种页面设计的美化 ，刚刚我们看到的那个老师 ，它所做的停留在我们说的第二点 ，就是希望在这个设计上怎么美 ，对吧 ，怎么酷 ，就是好的设计了 ，其实这不是 ，所以我们呢在去理解这个网页的时候 ，你必须考虑的更全面一点 ，还有一点也非常注意的就是做网站做网页 ，其实它是一个对外宣传和提升品牌形象的重要展示形式 ，记住是提升 ，不是什么贬低品牌形象 ，但是这个中学的网页其实已经 ，现在反正很火嘛 ，就是说我相信这个老师在做的时候 ，它不是想说我非要刻意的去贬低这个学校的网站 ，因为在它们那个阶层的审美上觉得这是美的 ，这是好的 ，其实这个感觉就特别像我们很多 ，反正我是85年的哈80后 ，最开始会接触QQ秀的时候装饰QQ空间 ，那个时候就是我觉得挺丑的 ，但是还是有一部分人会觉得很酷 ，Bling Bling的 闪的挺好的 ，对吧 ，那种感觉是一样的 ，其实再举一个生活中的实例 ，就特别像我们可能现在很少听到的杀马特非主流 ，但是往它们那个年代和时期人群去想 ，

其实在它们眼中它就是一种美 ，只不过比较小众而已 ，所以我们能够理解但不能够认同 ，好的 ，接下来呢那我们来说说网页设计的分类 ，那网页这里边呢大致给大家分成三大类 ，当然除了这三类 ，可能还会有一些别的 ，那我们可以看一下 ，第一类呢是功能型的网页 ，主要是一些服务型的网站 ，还有一些软件的用户端 ，还会有一些就是形象性的网页 ，你说品牌的一些形象网站还会有一些信息型的网站 ，好 ，例如说第一个功能型的那功能型是什么 ，比如说像我们说的有道翻译 ，对吧 ，还会有一些什么在线转换的工具 ，这一类都是有实际功能型的 ，所以那像这种网页 ，它提供的是一种具体的某项功能 ，那就非常明显了 ，对吧 ，还有呢 ，有一些就是形象性的网页 ，哪一些行业经常会用到 ，现在我们看到的什么 奔驰 ，对吧 ，奔驰它某一款新的 ，某一款新的品牌的汽车 轿车 ，它呢会使用我们说的这种很强调品牌形象的 ，不一定非要有很多的文字的表述 ，但更多的是一种什么体验感 ，看起来展示起来看起来会更高端一些 ，还有什么呀比如说一些房地产 ，对吧 ，一些房地产它再去卖一些楼盘的时候 ，也会把这个包装得很很漂亮 ，对吧 ，但是当你去看的时候就不一样了 ，好 ，那还有一种呢就是信息型的网站 ，比如说我们说的36课 ，包括我们说的网易新闻呀等等 ，那这些都是它以主要呈现的是信息为主 ，

以信息传递为主 ，好的 ，那接下来那我们就来说一说网页设计的风格 ，其实网页设计风格这里边 ，我们很难去把所有的都给大家一一举例 ，但是这里边呢帮主给大家大概列出来大概四五个吧 ，第一种呢就是简约大气的这种风格 ，其实可能还会有一些什么素雅呀 ，或者是高级感等等这些关键词都 ，可以总结出来 ，然后还会有一种呢是给我们感觉很 ，正式严谨的 ，然后还有像趣味卡通 ，然后呢还会有一些年轻活跃等等等等 ，那我们先来看第一个什么样的网站 ，会让我们觉得简约大气 ，例如说我们非常熟悉的苹果公司的官网 ，对吧 ，iPhone MacBook对吧 ，那我们可以看到在苹果的官网上没有太多的修饰 ，所有的都是以突出产品为主 ，基本上就是黑白灰加上一些非常干净的纯色 ，其实大家会发现国内现在有很多的 ，公司都在去向苹果致敬 ，包括我们熟悉的很多的手机公司 ，现在大家看到的锤子 ，包括小米 包括魅族等等等等 ，你可以去看一下它们的那种产品的网页 ，基本上都是按照这个套路来的 ，但是我觉得这也是一个好的现象 ，至少我觉得带动了苹果的这种审美 ，至少带动了我们国内的一些同行业的网站 ，去提升了整个的对外宣传的这么一个形象的水平 ，我觉得挺好的 ，

但是总会有surprised对吧 ，总会有惊喜 ，那除了我们作为手机同行业去致敬苹果 ，也会有一些乱入的 ，例如说大家看到的卫龙辣条 ，我相信很多同学都吃过 ，这个其实大家会觉得跟苹果八竿子打不着 ，但是它确实是在效仿苹果 ，做了很多类似的设计 ，我们看完之后没想到一个辣条都能 ，做得如此高大上 ，当然也有可能是为了涨价 ，对吧 ，看起来高级一点 ，所以贵也会觉得是OK的 ，当然这可能是一个玩笑 ，但我知道卫龙辣条它有一个 ，非常非常专业的一个团队去来去把控 ，这个整个的设计风格 ，很多人在说卫龙是不是赤裸裸的抄 ，其实呢看你怎么去想这个事儿 ，但我觉得它这种营销广告上的这个 ，效应绝对是达到了 ，没想到一个做中国传统的一个小 ，