2022年BB行业门户网站页面设计基础---济南网络公司[定 .pdf

《2022年BB行业门户网站页面设计基础---济南网络公司[定 .pdf》由会员分享，可在线阅读，更多相关《2022年BB行业门户网站页面设计基础---济南网络公司[定 .pdf（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、B2B 行业门户网站由于具有B2B 网站的特性和门户网站的特性，决定了页面设计及制作具有与其他网站很多的不同点，当然还是有许多的相同点。在写这个篇章之前，我觉得有必要从理论上和大家讲下页面设计及制作的基本要点。这些基本原则将指导大家更好的阅读和理解这个章节的所有内容。1、页面用色、框架及整体风格应该是严谨的，充满商业氛围的由于 B2B 行业网站涉及行业的发展动态、技术知识、营销管理知识、产品信息等，注定了内容是严谨的、高端的;由于涉及的是企业与企业之间的交易促进、信息交流与交友，所以在商业栏目更多的要体现出浓厚的商业氛围，一切页面设计都是为商人而考虑的。A、页面的用色要更严谨、忌讳非商业色彩蓝

2、色、红色、黄色是B2B 行业网站的常用主色，其中常常是几种颜色搭配使用，当然在使用过程中， 常常是用这几种颜色之外的颜色来搭配，或者这几种颜色的渐变色。由此衍生的颜色包括：深蓝色、暗红色、鲜红色、橙色、橙黄色、灰色等等，在此不一一列举，颜色的搭配由设计师自己来确定，我们最后来审核即可，关键要的就是一个页面整体效果。B、页面标题栏和导航栏更多要方形的、规则的作为企业网站、 时尚类型的网站，或者为了表达时尚、活泼的主题，网站的设计可以比较活泼一些，多采用圆形或不规则的排版方式，但是作为B2B 行业网站，就不能这样设计。每个部分要具有明显的区分，每个区域都是规则的，使用的图片、背景都是严谨的。不能把

3、图片斜放、 用很大的椭圆形、用很大的图标、用卡通的图标、活泼的图形等来设计网站的标题栏和导航栏。C、整体风格应严谨、充满商业氛围网站的整体风格比用色、标题栏设计更加重要，某个搭配颜色比较活泼、时尚一些，并不会影响整体的风格。某个图片不规则，或者网页里的内容图片不规则，也不会对整体的感觉产生多大的影响。B2B 行业网站的首页、二级栏目首页、重要的专题页，都要先做效果图，保证整体的效果后， 才能开始做页面设计，不能一开始就做页面。整体的页面风格不能花哨，要降低框架、背景等对阅读内容的影响，专业的说法叫降低页面的噪声，整体风格要淡雅，让访问的人静下心来思考。同时B2B 行业网站不是面对普通消费者的，

4、而是面对行业从业者，是为了大家获得行业知识与商业信息而出现的，提供的是工作和商业上的帮助，需要严谨。2、内容和功能决定表现形式和界面设计页面设计是没有一个固定标准的，很多时候我们不能用美丑来判断，也不能用是否有创意来判断，而应该综合分析这个页面的访问者，页面的内容、功能。有时候一点创意都没有，和其他很多网站都是类似的，才是最好的， 因为就应该是这样的。看到过一篇讲设计的文章说：“创意是可耻的， 分析能力远比创意来的重要”， 和我这个小标题所要表达的内涵是一样的。设计师常常希望自己的网站是最有创意的，最漂亮的;程序员希望自己开发的网站功能是最强的，最易用的;但是任何设计、功能都是为访问者、使用者

5、服务的，设计者的分析能力远比创意来的重要。综上所述， 任何一个页面在设计之前，设计师都必须要静下心来想想，这个页面在表达什么内容， 或者说是一个什么样的功能，根据内容和功能再来确定应该具有的表现形式。否则设计的页面与网站策划者所想要达到目的的有时会相差很远，甚至方向都是不对的。同时设计师还要具有一定的商业思维，将自己的设计变的更加商业化。关于在策划的时候就要初步的为设计师考虑页面的表达形式，我在B2B 行业门户网站策划实战研究报告里对这个问题进行过系统的阐述，策划是设计的基础。3、要多使用习惯用法，不要轻易使用一种新用法所谓习惯用法，是用户经常使用的网站，或者非常知名的网站用法，往往就是用户的

6、习惯，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 26 页 - - - - - - - - - 因为知名网站的用户最多，用户也是最认可的。相同的功能， 或者说不会因为网站的不同而表达方式发生变化的功能，就可以用习惯用法。比如网站的注册，几乎所有具有会员功能的网站都有这个功能，用户点击一个注册的链接，在新窗口里填写自己的登录信息、联系方式等， 用户注册过非常多的网站，如果你的页面做的和其他易用的知名网站很多不一样，用户就会不习惯。 比如当我们来到一个新网站的时候，常常需

7、要了解这个网站的介绍、主办方联系方式等信息，习惯就是在网站底部找这些信息，绝大部分的网站底部都有一排的链接来表达，如果你设计个网站，希望很创新， 把这些链接不放在底部，用户就会觉得不习惯，因为你打破了习惯用法。对设计师来讲， 那怕有时这样的熟悉让你觉得相似而乏味，一点都没有创新，你还是要这样去用。比如绝大部分的网站都是把Logo 放在页面左上角，如果你非要放在右上角，用户就不能很快的明白这是一个什么样的网站，因为他习惯了左边看网站Logo，也许右边根本就不怎么注意到。但是并不是说，我们不需要创新，相反，在策划、设计的工作中，我们需要大胆的创新，如果我们不打算使用一种习惯用法，策划者、设计师必须

8、确认新用法有如下两个特点：(1)同样清楚，同样不言而喻：只是换一个更好的表达方式，和原来的本质上没有太大的改变，同样让用户一眼就能看明白，也就是说我们有所创新，但还是建立在习惯用法的基础上，不是完全凭空创新。(2)带来很大的价值，值得用户付出努力来学习：这个功能虽然是以前大家没有见过的，但是我们确认他能带来质的变化，而不是仅仅换个用户不习惯的功能和界面。比如以前绝大多数的网站注册都是一步搞定，现在如果注册会员，有许多网站就分为二步或三步，为什么要这么设计呢 ?因为填写的内容太多，分成几步用户更能接受。4、建立清楚的视觉层次，让用户能从视觉上区分页面具有层次感，一看就能明白那些是重点，那些是次要

9、的， 每个部分表达的内容都非常的清晰，用户能很快的找到自己重点关注的部分。与此相反的就是页面很凌乱，结构不清晰，用户来到页面不知道那些是重点，1 分钟之内很难发现自己感兴趣的内容，网络上的用户耐性很差，不能很快找到就不找了，认为你的网站很差，或者干脆以后都不来了，但是实际上网站有他要的内容或想使用的功能，只是由于页面设计的不好，不能更快的找到而已。建立清楚的视觉层次，既要确保页面上所有内容的外观、所有的可视线索清楚，还要能准确地表述页面上的内容之间的关系。一个视觉层次清楚的页面有如下三个特点：A、越重要的部分越突出 ;B、功能或内容相关的部分在视觉上也要相关;C、功能或内容在逻辑上包含的部分在

10、视觉上也要进行嵌套，关于这三个特点，我在B2B 行业门户网站设计开发实战研究报告里做了非常详细的阐述。5、访问者不是在阅读，而是在扫描根据别让我思考(英文名： DONTMAKEMETHINK)一书所讲：“访问者不是在阅读，而是在扫描，是极少数几个得到了证明的事实之一，人们会花极少的时间来阅读大部分的页面，相反，我们只是扫描一下(或者匆匆掠过)网页，寻找能吸引我们注意力的文字或词语。”当然这个还是有一定条件的，对于导航页、 首页等， 用户会更多的用扫描来获得自己感兴趣的内容。 但是对于内容最终页，大部分用户是在阅读，但是也会先扫描一下大概内容，对于太长的文章或内容，就要看下是否有小标题，如果有就

11、要先扫描小标题，看自己是否感兴趣，感兴趣了才会继续阅读。从这个角度讲，还是会先扫描。当我们在策划、 设计网站的页面时，在编辑网站内容时，要时刻谨记用户不是在阅读，而是在扫描，将这个思想贯彻地执行下去。会指导很多正确的策划和设计，比如：重要的内容要大标题、要加粗;每个模块尽量能图文并茂，让读者扫描的时候看到图片，更容易引起兴趣;对重要的内容，广告文案等要多加总结、提炼，吸引他们感兴趣;编辑在写文章、内容编辑名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 26 页 - - -

12、 - - - - - - 的时候，对于超过800 字的文章，最好能加上小标题，让用户可以预先扫描是否感兴趣。6、闭门造车者做出的东西，是远远赶不上综合借鉴者的网页技术更新很快，一个网站的界面设计寿命仅仅2-3 年而已。不管是垃圾还是精品，都没有所谓的经典。经典只存在于是那个首次成功创新性的应用。一个闭门造车者做出的东西，是远远赶不上综合借鉴者的。网页设计不同于其他艺术，在模仿加创新的网页设计领域当中，即便是完全自己设计的，也是沿用了人们已经认同的大部分用户习惯，而且这种沿袭的痕迹有时非常的明显!还有那个设计者敢腆着脸说，这都是我自己的原创设计?对于业界来说， 经典只是个理念和象征! 对于 B2

13、B 行业网站的设计，要多参考，多模仿，找出几十个同类型的最优秀网站来参考，分析别的网站为什么要这么设计，取其精华， 去其糟粕， 联系自己设计网站的特点加以改进或修改， 往往这样的设计才是最成功的设计。因为最成功的网站都是经过多方研究的，他们不仅仅模仿， 也有属于自己的创新，大部分也经得起用户的考验，符合绝大部分用户的需求。7、B2B 行业网站大部分的页面界面应弱化，强调功能和内容B2B 行业门户网站不同于企业网站，它存在的最大的价值在于给用户提供一个平台，提供更多有价值的内容，界面存在的价值在于辅助、引导用户更好的去使用这个平台，发现里面自己感兴趣的内容，挑选并阅读， 获得知识。 并不是要浓墨

14、重彩的使用大量的颜色和图标来表达页面的主题，这个是一些设计B2B 行业网站的人常犯的错误，尤其是初学者。比如做一个企业网站，我们为什么要使用大的图片、图标，大面积的颜色去渲染这个页面呢?因为每个企业都有其自己独特的产品与企业文化，来这个页面的读者都是想了解这个企业或产品的，我们需要用设计向访问者很直观的传递企业信息，尤其是很多品牌公司网站。B2B行业网站的专题页面设计、收费服务介绍等页面与建设企业网站一样，需要用大的图片、小图标、大面积的颜色来衬托页面的主题。8、页面要模块化、可修改性要强模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。模块化的最大好处就是统一网站风格，让

15、用户无论在网站的那个页面，也能明白还是在这个网站，形成了很强的品牌辨识度。时刻记住，做网站的最终目标，就是要做品牌，设计时就必须要作为指导思想。无论是架构、模块或图片，都要考虑其可修改性。采用DIV+CSS 设计是目前最好的解决方法， 不仅使页面易于修改，关键是降低页面代码的数量，易于搜索引擎找到最重要的内容，我在B2B 行业门户网站推广实战秘籍里做过详细的解答。总之，关于 B2B 行业网站页面设计基础作者李学江就讲这8 条，这将作为设计B2B 行业门户网站的指导思想，也是顺利看完本章节的基础知识。也许还有更多的设计基础知识，待大家自己在工作中去总结和提升。名师资料总结 - - -精品资料欢迎

16、下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 26 页 - - - - -

17、 - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - -

18、 - - 第 8 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - -

19、- - - - - - 名师精心整理 - - - - - - - 第 11 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资

20、料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 26 页 - -

21、 - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 -

22、 - - - - - - 第 19 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - -

23、- - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 26 页 - - - - - - - - - 济南网络公司http:/www.31688.org 编辑 :fuuto名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 26 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 26 页，共 26 页 - - - - - - - - -