2022年企业网站界面设计简介 .pdf

《2022年企业网站界面设计简介 .pdf》由会员分享，可在线阅读，更多相关《2022年企业网站界面设计简介 .pdf（37页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目 录1.文档介绍. 31.1.文档范围. 31.2.读者对象. 31.3.参考文献. 31.4.术语与缩写解释. 32.应当遵循的界面设计规范 . 42.1.协调运用颜色 . 42.2.适当选择线条和形状 . 42.3.均衡的分割版式. 52.4.强调 UI 统筹 . 52.5.适当美化去除冗余（视觉噪音）. 63.网站结构. 63.1.网站栏目结构 . 73.2.网页排版. 83.3.网页框架与布局. 84.首页界面. 84.1.顶部版块（TOP） . 94.2.头部版块 (HEADER) . 104.3.内容版块（CONTENT） . 104.3.1.公司公告.114.3.2.简介信息.

2、114.3.3.优势或者特色 . 124.3.4.公司简介. 134.3.5.客户评价版块 . 134.4.友情链接版块 . 144.5.尾部版块 (FOOT) . 145.文章展示. 155.1.文章列表界面 . 165.2.文章详情界面 . 176.产品展示. 186.1.产品列表. 186.2.产品详情界面 . 216.2.1.概述 . 226.2.2.产品选项卡. 22名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 37 页 - - - - - - - - - 网

3、站界面设计 2016 Page 2 of 37 6.2.3.产品留言框. 236.2.4.设计注意事项 . 237.下载界面. 248.关于我们. 258.1.联系我们界面 . 258.2.人员招聘 . 279.其它页面. 289.1.客户名录 . 289.2.全站搜索界面 . 299.3.404 页面 . 2910.公共版块 . 2910.1.面包屑导航 . 2910.1.1.作用 . 2910.1.2.适用条件. 3010.2.反馈组件设计. 3011.界面资源设计. 3211.1.分享组件 . 3211.2.TAG 标签 . 3311.3.在线客服组件 . 3311.4.图标资源 . 3

4、311.5.图像资源 . 3312.WAP（手机）站 . 3412.1.页面设计 . 3412.2.栏目导航 . 3412.3.底部菜单 . 3513.其他 . 3713.1.会员中心 . 37名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 3 of 37 1. 文档介绍1.1. 文档范围本文档对网站设计过程中需要注意的信息进行汇总以期对网站设计提供指导。本文档包含网站设计过程中应当遵循的视觉

5、规范和页面布局规范，同时对网站页面结构的进行分解讲述。本文档仅列出常见的展示方式，具体应用需要设计师根据实际需求进行选择。1.2. 读者对象本文档主要面向网站设计人员编写，目的是让设计人员掌握到网站设计的核心要点。文档中论述的一些信息对前端开发人员也有相当的指导意义。由于网站上线后要进行搜索引擎优化，因此本文档也需要网络营销人员进行阅读，以便提供更高意见。1.3. 参考文献本文档中的信息没有参考任何权威的文献，文档的编写均是来自于个人日常积累和网络上搜集的相关资料，因此本文档不具有权威性。1.4. 术语与缩写解释缩写、术语解释成品站即网站模版，由网站设计师根据自己对特定行业的理解设计出站点，一

6、个站点由多个网站页面组成。网站风格所谓网站风格是指，网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受。页面版块在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 4 of 37 2. 应当遵循的界面设计规范2.1. 协调运用颜色一个网站不可能单一地运用一种颜色，这会让人感觉单调，乏

7、味；但也不可能将所有的颜色都运用到网站中，给人感觉轻浮、花俏。一个网站必须有一种或两种主题色，既不至于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是设计者必须考虑的问题之一。通常情况下，一个页面内尽量不要使用超过4 种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果；另外还要考虑哪种因素可能占主要地位，是明度、纯度还是色相。下面讨论几种网站的主题选色方法，来自于（移动 设计，电 子工业出版社） ：1、 基于产品来选色当产品有一定的统一度，颜色也大致相近时，可以选中产品中的色彩，来做首页的主色调

8、。例如，产品主要以座椅为主，座椅基本都应用了木质纹理，那我们从木质纹理出发选取土黄色或者棕色；工厂机械设备都被涂成蓝色的，所以很多机械设备网站是蓝色的；轴承一般都采用灰色来体现金属的质感。2、 基于产品定位人群来选色儿童产品应当色彩鲜艳，活泼灵动；男装产品一般色调偏深，厚重感强烈等。3、 基于概念性来选色当产品颜色很多，比较杂乱的时候，比如节庆的喷彩，各种气球等。这是，我们想到这款产品是用在节日中，而节日一般是比较温馨、浪漫的， 于是就可以用温馨的粉丝或者橙色。2.2. 适当选择线条和形状文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的名师资料总结 - - -精品

9、资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 5 of 37 组合，构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。以下我们来探讨一下几种不同线条和形状的使用方法。直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐的，也就是所谓的有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。曲线（弧形）的应用。曲线的效果是

10、流动、活跃，具有动感的，曲线和弧形在页面上的重复组合可以呈现流畅、轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其他线条（形状）。2.3. 均衡的分割版式在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的

11、问题。均衡并非简单理性的等量不等形的计算，一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果，是对设计师的艺术修养、艺术感受力的一种检验。在面积对比强烈(不等形 )而又均衡 (等量 )的设计中，我们可以看到对比法则的成功参与；而在一些对比不十分强烈、典雅的不对称设计中，我们则可感受到设计者儒雅的学者风范。需要注意的是，传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。2.4. 强调 UI 统筹名师资料总结 - - -精品资料欢迎下载 -

12、 - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 6 of 37 除开宏观的色彩版面设计，页面设计里还有一个很重要的环节UI 元素的设计。在设计人员的理解层面上，所有界面上可视范围内的东西，都可以并入UI 里，但是单说UI 设计，则更侧重于 Tab 标签、小图标、按钮、控件等。这些细节的优化，通过使用元素来影响整站风格，制造整体性及连续性，能统一整个站点的形象，并且在精致中表达网站的整体格调。2.5. 适当美化去除冗余（视觉噪音）在必要的

13、元素都设计完成之后，回顾整个页面，根据整站的风格需要，也许你会觉得设计得过于复杂了，或者是设计得不够完美，不能突出想要的风格。这个时候就需要适当调整对页面的美化控制。简洁的往往是美的，而美的东西不一定简洁。尤其在网页设计上，对于内容很多的门户网站，任何多余的修饰都会加重浏览者眼睛的负担，所以可以看到门户的设计往往特别简单；而某些专业型网站，就首页来说确实没有什么东西可以展示，那么则需要刻意增加一些点缀而不显得特别空洞。当然，这也不是定理，针对行业不同或者突发性事件，适当地对设计进行调整也能够起到很好的效果。3. 网站结构企业成品站（网站模板）需要网站设计师根据自己对特定行业的理解设计出的符合行

14、业特点的模板。尤其是在网站风格上要与企业的整体形象相一致，比如说企业的整体色调、企业的行业性质、企业文化、提供的相关产品或服务特点都应该要能在网站的风格中得到体现。网站风格 (style)是抽象的。是指站点的整体形象给浏览者的综合感受。整体形象包括站点的版面布局，色彩，字体，浏览方式等, 。如：我们觉得迪斯尼是生动活泼的而IBM 则是专业严肃的。每一个网站都会给人们留下的不同感受。这里我们需要做到的是根据网站的定位做出网站特有的风格。网站风格最能传递企业文化信息，所以说好的网站风格不仅能帮助客户认识和了解网站背后的企业，也能帮助企业树立别具一格的形象。通过网站风格的独特，直接给自身网站和所处名

15、师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 7 of 37 行业的其它网站之间营造出一种清晰的辨识度。很多设计师认为做好了企业网站就一定能够做好行业网站的设计，其实对设计来说行业网站和企业网站的设计截然不同，对整个网站的创意、风格、整体框架布局、文字编排、图片的合理利用，空间的合理安排上面等, 有着许多诸多的要求，需要考虑的面更广，面对的问题也会更多。对于一名优秀的网站设计师来说不能绝不能放

16、过任何一点小细节，本篇文章简述的是设计师在做行业网站时所需考虑的一些问题。网站结构是为了合理地向用户表达企业信息所采用的栏目设置、网站导航、网页布局、信息的表现形式等。网站结构是企业网站建设的基本指导方针。3.1. 网站栏目结构网站栏目结构是一个网站的基本框架，原用来表达企业的主要信息和服务。一般来说，一个中小型企业网站的一级栏目不应超过8 个，而栏目层次以三级以内比较合适。网站栏目要突出最有价值的内容，栏目描述意义明确，不能混淆。一般的网站栏目结构如下图所示：网站首页产品展示新闻资讯下载中心客户案例关于我们招贤纳士产品分类 2产品分类 1在线留言联系我们企业文化公司简介行业资讯公司动态文件下

17、载软件下载图网站栏目结构图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 8 of 37 3.2. 网页排版人们在阅读某种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。在浏览网页时，用户对网页浏览习惯是从上到下、从左到右，浏览视线呈“F”形。 所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。因此，网页最重要的信息

18、要放在网页左上方，例如：在页面左上角放置企业LOGO ；站内检索、会员注册/登录等服务放置在右侧或中上方显眼位置。将最重要的信息放在首页的中上部，一般包括产品促销信息、新产品信息、 企业要闻等；公司介绍、联系信息、网站地图等网站公共菜单一般放在网页最下方。这种视觉流程只是一种感觉并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就可以更为灵活地运用，在网页设计中，灵活而合理地运用直接影响到传达信息的准确与有效性。例如：网页的图片信息能够吸引用户的目光，强烈的对比元素往往可以形成焦点等等。3.3. 网页框架与布局网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、“F”字型、综合框

19、架型、等等。在进行网站设计时，并不需要过多的去考虑什么形式，比如我们在一张纸看到一个圆形的东西，很容易可以联想到它像太阳，而有些人则联想到月亮等等, 这都是一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做处合理的框架布局。搜索引擎对网页的浏览视线呈“E”形，所以网页设计不能忽视网页底部的位置，在网页底部可放置一些比较次要的导航条。此外，网页里面最好不要设置那种浮动或者滚动型的在线交流客服，这样会使用户感到厌烦。4. 首页界面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8

20、页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 9 of 37 网站首页是整个网站的入口，其作用相当于一家实体店铺的门面，一个标准的首页界面如下图所示：顶部（ Top）头部（ Header）广告 banner产品版块文章版块公司公告简介版块优势或者特色公司简介客户评价合作伙伴：带图的友情链接友情链接版块文字链接内容（ Content ）尾部（ Footer ）图首页模块图这是一个最普通的企业网站的首页结构，下面讲对每个结构包含的信息进行论述。4.1. 顶部版块（ Top ）头部可以放得信息有：欢迎语、手机站（使用二维码图片）、新浪微博（使用链接地址）、微

21、信（使用二维码图片）、联系电话等信息。展示为二维码图片时，可以采用下面的方式：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 10 of 37 图二维码弹出展示4.2. 头部版块 (Header) Logo、站内搜索、产品分类、网站导航、联系电话、购物车等信息。图头部版块4.3. 内容版块（ Content）首页中的一些版块要做成滚动式的，这样有利于用户浏览。因为不是所有用户都懂得切换。为了让

22、页面更加丰富，可以增加一些动态效果。图滚动式的模块名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 11 of 37 4.3.1. 公司公告公司公告是实时发布公司的热点信息，并不是所有的行业都需要这个版块，一般只有业务与网站相关的公司才会使用。P2P 网贷行业的网站一般会有动态的公告信息；电商网站中，京东会有京东头条，淘宝有淘宝头条。图滚P2P 行业公告图淘宝头条图京东快报4.3.2. 简介信

23、息在首页中重点展示的网站内容，一般链接到一个单页。简介模块标题图片摘要链接简介信息不关联某个具体的内容分类，简介信息包含标题、图片、内容摘要和链接地址。简介信息可以根据需要增加字段。设计师可以根据需要来展示网站重要的信息。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 12 of 37 图解决方案版块图核心业务简介版块4.3.3. 优势或者特色简短的描述，一般不会链接到内容页面，包含信息有标

24、题、图片、内容。优势或者特色图片或者图标，一般不会太大短语，四到八个字之间对短语的进一步解释，字数不多标题图片内容图优势或者特色包含信息表现可以展现形式如下图所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 13 of 37 图服务优势版块4.3.4. 公司简介有的公司喜欢放这个，该模块一般会链接到关于我们页面。公司简介包括图片、简介内容；有的还会有一个链接地址，链接地址指向关于我们界面

25、。公司简介一些公司喜欢传张图片文字不会太多图片内容链接一般指向到关于我们界面图简介包含信息4.3.5. 客户评价版块展示这一信息没有其他的目的，就是要让潜在的客户相信你能够（而且已经）为那些信誉良好的公司提供过很好的服务。展示的推荐语可以表名以合作客户对商工作质量的认可，打消潜在用户的疑虑。客户评价一般包含下面的信息：客户评价图片，根据布局可有可无客户名称（公司名称+职务 +姓名）评价（文字不会太多，多了没人看）客户名称图片内容图客户评价包含信息名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - -

26、 - 第 13 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 14 of 37 图客户评价展示形式之一4.4. 友情链接版块友情链接是指互相在自己的网站上放对方网站的链接。必须要能在网页代码中找到网址和网站名称，而且浏览网页的时候能显示网站名称，这样才叫友情链接。友情链接分成图片形式和纯文字形式。友情链接设计时要注意，该版块仅在首页存在，企业页面中时没有友情链接的。图合作伙伴版块4.5. 尾部版块 (foot) 网站尾部可以放一些不重要的导航，例如：公司简介、公司团队、企业文化等信息。尾部版块中第三方认证信息需要询问客户意见后再加入。名师资料总结 -

27、- -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 15 of 37 尾部模块次要的导航文字友情链接版权信息企业信息例如：公司简介、企业文化、公司团队、董事长寄语等等网站的版权信息公司名称、联系电话、服务时间、新浪微博、微信公众号等信息第三方认证网络警察、备案网站、企业工商局链接、可信网站身份认证等等图尾部模块可展示信息图尾部版块5. 文章展示发布文章的顶级栏目一般叫新闻中心，然后是新闻中心的各个子栏目，新闻中心

28、最多3 级栏目。文章的栏目全部展示在界面的左侧即可。如下图所示：图新闻栏目版块名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 16 of 37 5.1. 文章列表界面文章列表可以有多种表现形式，例如标题列表、简介列表、图文列表等等。要注意的是，每种列表可适应的行业是不一样的，例如标题列表适用于传统行业；图文列表一般是新媒体使用较多，新媒体发布文章时都会附一张图，36 氪、虎嗅网都是如此。图标

29、题列表图简介列表名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 17 of 37 图图文列表5.2. 文章详情界面文章详情界面中可展示的元素如下图所示：内容版块文章的内容标题、作者、发布时间、点击次数分享到微信、微博等社交平台标题区域核心内容分享组件标签组件内容核心关键字，相当于内容的索引文章详情界面推荐引导推荐版块可以热门文章、相关文章、推荐文章等等。需要注意的是推荐版块并不适合所有的网站

30、，有些企业不会发布太多的文章。引导用户进一步进行阅读前一篇后一篇文章推荐栏目版块文章中没有分类功能，所以可以直接展示栏目面包屑导航图文章详情界面元素名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 18 of 37 图文章详情界面6. 产品展示产品展示需要考虑产品分类的展示和产品信息的展示。产品分类在后台功能上是支持无限级分类的，但是即使在大型电商网站其设计的分类一般也只有4 级。由于中小企业

31、的产品种类不是甚多，所以在设计成品站时只提供两级分类即可。6.1. 产品列表产品列表界面并不是必须的，在设计时需要根据企业的实际情况进行设计。一般可以根据产品的多少分成以下几种表现形式：（1）将产品分类和产品名称与导航进行结合展示这种方式的特点是网站的分类数量不多，并且只有一级分类。每个分类下跟随这个分类的所有产品。展示方式如下面两幅图所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 1

32、9 of 37 图产品与分类展示下拉方式图产品与分类展示左侧列表方式（2）分类展示形式该方式适合有多级分类的情况，采用该种形式需要提供产品列表界面。因此这样的设计方式可以适用于产品多分类多的企业。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 20 of 37 图分类展示与导航结合方式（3）产品列表界面一般设计列表界面的企业，都是拥有产品较多的企业。产品列表界面包含三个元素分别为产品分类，产

33、品搜索和产品列表。产品搜索可以根据是页面布局来决定是否提供。下面列举两种产品分类的展示方式：图产品分类左侧栏目展示方式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 21 of 37 图产品分类内容版块头部展示方式下面列举两种产品信息的展示方式：图产品列表大图展示方式图产品列表列表展示方式6.2. 产品详情界面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - -

34、- - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 22 of 37 6.2.1. 概述产品详情界面可以包含以下元素：内容版块文章的内容产品名称、属性、价格分享到微信、微博等社交平台标题区域核心内容分享组件标签组件内容核心关键字，相当于内容的索引产品详情界面推荐引导推荐版块可以热门产品、推荐产品等等。需要注意的是推荐版块并不适合所有的网站，有些企业不会发布太多的产品。面包屑导航产品操作立即预定咨询客服1、点击按钮，跳转到尾部的预定留言框2、点击按钮，弹窗展示预定留言3、点击按

35、钮，跳转到新的页面进行留言一般是通过QQ 咨询图产品详情界面元素6.2.2. 产品选项卡在一些行业中，一些产品拥有众多的属性，这些属性对于大部分用户来说不是很重要，但有些用户又特别关心这些信息。因此在一些网站中提供选项卡的功能来划分这些信息。选项卡的使用需要设计师根据建站企业的要求来决定是否在设计时加入到界面中。常见的选项卡形式的展示如下图所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page

36、 23 of 37 图产品选项卡网站编辑人员在后台编辑的控件如下图所示：图网站后台产品选项卡6.2.3. 产品留言框预定留言信息需要设计师自己询问客户需要的字段，产品留言框必须设计验证码 文本框。留言框的设计请参照后面的反馈组件设计章节。6.2.4. 设计注意事项名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 24 of 37 （1）如果首页有产品模块，那么需要保证首页模块的产品图片的比例与

37、产品列表页或者详情页一致。（2）详情页的内容需要使用富文本编辑，所以不要讲详情页面设计成为全屏的，因为不好使用编辑器编辑，而且1200 宽的页面一般人是设计不好的。7. 下载界面下载界面也包含两个页面下载列表和下载详情界面。由于并不是所有企业网站都需要在网站中提供资料下载，所以下载界面不再进行具体说明。下载界面不再成品站中体现，企业如果需要那么需要进行页面定制。图下载列表界面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 37 页 - - - - - - - - - 网

38、站界面设计 2016 Page 25 of 37 图下载详情界面8. 关于我们“关于我们”有助于建立有关网站效能和可靠性的第一感觉，而且让用户了解到在网站的背后有一个真实的公司或个体。它为不人性化的网站加入了人性化的成分。“关于我们”通常都位于网站结构的顶级营销部分，以便用户在初次访问网站时即可快速得到相关的信息。“关于我们”可以包含下面的模块：关于我们人员招聘公司背景联系我们团队介绍小型公司通常都会提供一个介绍团队成员和管理层的页面介绍公司的相关信息，可以划分出：企业文化 、公司历史 、财务状况 、社会责任 、董事长寄语等企业荣誉荣誉证书是社会一些机构对企业的认可和企业实力的证明，因此有必要

39、提供一个页面进行展示。图关于我们构成元素8.1. 联系我们界面联系我们界面包含企业详细信息版块、地图版块和留言版块。地图模块可以根据自己的需要随意进行变形操作，但是地图版块在有多家分公司时不容易展示，在设计时可以自行判断是否添加该版块。留言反馈版块设计时，需要参考后面介绍的反馈模块设计部分。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 26 of 37 图联系我们界面留言反馈版块图联系我们

40、界面地图版块名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 26 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 27 of 37 图联系我们界面详细信息版块8.2. 人员招聘招聘需要展示的属性有：职位名称、工作地点、工资待遇、招聘人数、有效时间、发布日期、招聘内容。招聘内容是在富文本编辑器添加的，如下图所示：图招聘内容编辑界面名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师

41、精心整理 - - - - - - - 第 27 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 28 of 37 9. 其它页面9.1. 客户名录使用客户名录完全就是为了建立信任。展示这一信息没有其他的目的，就是要让潜在的客户相信你能够（而且已经）为那些信誉良好的公司提供过很好的服务。列出的客户可以用于参考，而展示的推荐语可以作为对供应商工作质量的认可。一份好的客户名录甚至能够展现公司价值，打动投资者。下图是百度分享组件的客户名录：图百度分享组件客户名录界面（1）图百度分享组件客户名录界面（2）名师资料总结 - - -精品资料欢迎下载 - - - - -

42、 - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 28 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 29 of 37 9.2. 全站搜索界面如果在页面的头部提供了搜索框，那么需要提供搜索结果展示页，如下图所示：图搜索结果展示界面9.3. 404 页面404 页面是客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应，且不知道原因所返回的页面。404 页面是网站必备的一个页面，它承载着用户体验与SEO 优化的重任。404 页面通常为用户访问了网站上不存在或已删除的页面，服务器返回的404 错误

43、。如果站长没有设置404 页面，会出现死链接，蜘蛛爬行这类网址时，不利于搜索引擎收录。10.公共版块10.1. 面包屑导航面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。10.1.1.作用1、 让用户了解当前所处位置，以及当前页面在整个网站中的位置。2、 体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 29 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page

44、 30 of 37 很好的位置感。3、 提供返回各个层级的快速入口，方便用户操作。4、 有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。5、 面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。10.1.2.适用条件虽然眼下很多网站都流行使用面包屑导航，但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。2、独立不交叉的网站结构，由于面包屑网站导航路径是线性结构的，因此网站

45、内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。10.2. 反馈组件设计为了增加网站与用户的互动性质，让用户可以与网站形成交互，也便于网站用户的需求信息；因此可以定义多种字段的，因此要求在需要在网站上开辟客户留言空间。留言空间一般是只 HTML表单， HTML表单拥有多种交互元素；由于所有的企业网站都需要这种交互方式，所以需要将这些元素封装成组件，避免重复开发。反馈组件在使用时，元素的样式要与网站的主题相匹配，例如：如果当前网站主题是红色，那么元素获取焦点时，肯定不能显示蓝色。HTML 表单的组成元素如下图所示：名师资料

46、总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 30 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 31 of 37 图反馈组件构成元素设计要求：（1）在每个字段上要提供相应的验证提示样式，显示验证提示信息（2）在文本框获取焦点时，要改变相应的样式，以表明元素处于选中状态，如下图：（3）在每个元素的后面要有字段描述信息，如下图：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整

47、理 - - - - - - - 第 31 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 32 of 37 11.界面资源设计界面资源可以根据客户要求和布局需要灵活使用，不强制要求使用所有的界面资源。11.1. 分享组件文章、下载、招聘和产品可以使用加网分享组件来丰富页面（http:/ - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 32 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 33 of 37 11.2. T

48、AG标签TAG 标签是一种自定义关键字的功能，文章搜索时候只需点击TAG 标签就可以搜索到包含该 TAG 的文章。产品、文章、图片和下载四个模块提供标签操作，如下图所示：并不是所有的网站都适合做TAG 标签，因为网站的行业不同，性质不同，类型不同，所以最后的结果也是不相同的。我们都知道，网站的类型不同，网络机器人对其的爬寻规则，收录规则都不尽相同，那么我们就可以分析得到，只有那些行业站、门户站、博客类型等等网站更加适合做TAG 标签。而一般来说，企业站已经划分好了对应的框架，如果再使用TAG 标签，或许会有反效果出现。11.3. 在线客服组件提供一个在线沟通模块的组件，从我们的阿里云服务器进行

49、下载使用。客服模块只提供QQ的方式，信息有客服的名称、QQ号码、在线状态。11.4. 图标资源针对每个行业积累图标资源。11.5. 图像资源针对每个行业积累图片资源。例如：banner等。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 33 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 34 of 37 12.WAP（手机）站12.1. 页面设计成品站的手机版的首页设计要与电脑版的首页保持一致的内容和风格。企业网站管理员可以在后台选择相应的栏

50、目到手机站上进行展示，所以在设计成品站手机版的时候需要将电脑站的所有栏目对应的界面都设计一个手机版界面。12.2. 栏目导航成品站的电脑版的栏目可以有三级栏目，在进行设计时需要考虑菜单的切换。下面是一种一级栏目切换的方式，点击按钮打开下拉导航菜单：图一级栏目切换方式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 34 页，共 37 页 - - - - - - - - - 网站界面设计 2016 Page 35 of 37 三级栏目的切换方式是到子页面中点击按钮进行切换的，效果如下图所