有关门户网站整体设计思路

1、门户网站有专门多种。最为国人熟知的是象新浪搜狐那种信息类门户。要紧以广告收入为主。现在也有博客门户等。象当当、淘宝那样的购物平台，事实上也是一种门户，只只是陈列的是商品信息，赢利方式是依靠出售商品。不同的门户，有不同的需求，都应该依照这些需求动身去设计网站，这是众所周知的，然而它们之间也有共性，那确实是都要求提高扫瞄效率！促使网站达成赢利目标。信息类门户：1.网页的体积最小2.分类明确，多方向引导3.信息量最大4.风格一致，易于治理5.以适当的方式提供多种多样的广告位6.分栏目设计突出主题风格购物类门户：1.网页体积尽量小2.分类明确，多方向引导3.信息依照重要程度疏密有秩4.每一个页面信息差

2、不多上一种广告方式5.突出商品本身6.分栏目设计突出主题风格一、网站风格/创意“风格(style)是抽象的。是指站点的整体形象给扫瞄者的综合感受。整体形象包括站点的版面布局，色彩，字体，扫瞄方式等。如：我们觉得迪斯尼是生动爽朗的而IBM则是专业严肃的。每一个网站都会给人们留下的不同感受。那个地点我们需要做到的是依照网站的定位做出网站特有的风格。除此我们还需要在风格同一上需要把握一下，事实上那个风格的统一和传统的印刷出版物没什么区不。你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，都要统一风格，贯穿全站。如此子用户看起来舒服、顺畅，会对你的网站留下一个“专门专业”的印象

3、，有一个全局感受。创意，所谓创意确实是不拘一格？某些设计师在做创意的时候大费周章，做出来确实不可否认专门有创意、专门不致，但往往关于行业网站的客户什么缘故不能同意呢？现在不要太责备客户的不识货，应该反思，抓住客户的需求。事实上做行业网站不需要专门多大的创意，也不要白费过多的时刻去追求如何个性、如何好看，我们只需要一点小小的创意贯穿全站，也许会使网站更生动更具有吸引力、更有思想。”不要在页头用大面积的装饰图片来体现整个网站的风格门户网站构成专门复杂，通常会兼并、嵌套专门多小网站。网站的经营方因此希望让这些小的网站套用整个门户的VI。因此，在使用最频繁的页头部分，应该是能够专门明确的标识网站风格的

4、地点。然而，不要用大副的装饰图片来体现，LOGO？LOGO是干什么用的？设计时的动身点是什么？不确实是标识企业突出门户风格吗？假如LOGO不能起到如此的作用，那还要它做甚？因此为了扫瞄速度快，最好页头只有LOGO、文字导航、简单色彩装饰。我建议页头最好是能够宠满页面的，没有宽度限制，如此就能够适应各种宽度的网页了。不要制作过多过大的图片镶嵌在网页中，如大片的没有意义的装饰图片，不忘了你是在做一个门户！有商业目的的门户！这是在做生意！假如你做生意老总会批给你专门多钞票去做些对销售没有关心的事吗？也许他会批给你钞票组织职员去旅游，用于提高士气，然而他绝对可不能批给你钞票带所有职员去冰岛，并盖一个希

5、尔顿饭店！二、网站LOGOLogo顾名思义确实是站点的标志图案，logo最重要的确实是用图形化的方式传递网站的定位和经营理念、同时便于人们识不。网站logo的设计过程中一般有以下三种思路：1.直接以网站网址作为logo。2.依照网站提供的产品/服务特点展开logo设计。3.以传递网站运营商的经营理念为特色。我个人建议门户网站的LOGO中最好包含：网址（去掉WWW及网址后缀）中文标识辅助图形标识。辅助图形标识能够最好的体现网站风格，变化多样。网址和中文标识的设置要清晰易用。最好独立创建一套字体，但最好跟常见字体相差不太大。便于应用在子栏目中。三、视觉流程“人们在阅读某种信息时，视觉总有一种自然的

6、流淌适应，先看什么，后看什么，再看什么。在心理学的研究表明，一般的扫瞄适应是从上到下、从左到右，在一个平面上，上松下稳而压抑。同样，平面的左松右稳。因此平面的视觉阻碍力上方强于下方，左侧强于右侧。如此平面的上部和中上部被称为“最佳视域”，也确实是最优选的地点。在网页设计中一些突出或推举的信息通常都放在那个位置。左侧为常规信息，右侧为推举信息。因此这种视觉流程只是一种感受并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就能够更为灵活地运用，在网页设计中，灵活而合理地运用直接阻碍到传达信息的准确与有效性。”四、网页框架与布局网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框

7、架型、Flash型、变化型，在那个地点就不做一一论述了。事实上在我们在做设计的时候并没有过多的去考虑什么形式，比如我们在一张纸看到一个圆形的东西，专门容易能够联想到它像太阳，而有些人则联想到月亮等等这差不多上一种形式比喻，最重要的是抓住客户的需求，把握网站的定位做处合理的框架布局。1分辨率网页的整体宽度可分为三种设置形式：百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用，行业网站也不列外。我们在设计网页的时候必定会考虑到分辨率的问题，科技进展到现在我们通常用的是1024*768和800*600的分辨率，现在网络上专门多差不多上用到778个象素的宽度，在800的分辨率下面往往使整个

8、网页专门压抑，有种不透气的感受，事实上那个宽度是指在800*600的分辨率上网页的最宽宽度，不代表最佳视觉，不妨试试760770的象素，不管在1024依旧800的分辨率下都能够达到较佳的视觉效果。同时，针对你的目标用户，你能够采纳不同的分辨率标准，比如购物网站的用户，通常差不多上比较适应网络生活，有一定经验的网民，他们的显示器通常会比较先进，象目前就能够采纳最低1024*768分辨率。假如你面对的目标用户，行业不固定，也许有相当一部分都只是间或上网，那么他们专门可能采纳的是过时的旧设备。就要考虑用较低分辨率做为制作标准。2合理广告在目前一些网站的广告（弹出广告、浮动广告、大广告、banner广

9、告、通栏广告等等）让人觉得专门烦琐，更本就不情愿来看，有时连你那个网站都不上了，如此一来网站受到了严峻的阻碍、广告也没达到广告的目的。这些问题差不多上我们在设计网站之前需要考虑、需要规划的内容之一。浮动广告有两种，第一种是在网页两边空余的地点能够上下浮动的广告，第二种是满屏幕到处随机移动的广告。建议能使用第一种的情况下尽量使用第一种，不可幸免第二种情况时尽量在数量上操纵最多一个就好。假如数量过多会直接阻碍到用户的心理、防挨到用户扫瞄信息,适得其反。首页广告不宜过多适中即可。如在注册或者某个购买步骤的页面上最好不要出现过多的其他无关的内容让用户分心，幸免客户流失等。最新新流行的一种广告是将整个页

10、面按1024*768或更高的分辨率标准来设计，在超过800*600用户扫瞄范围的地点，放置的是常规广告信息或软广告信息，如此一来，设备条件好的用户就能够扫瞄将近全屏的页面内容，而800*600的用户只能看到广告部分的一个小边，然而不阻碍扫瞄要紧信息。3空间的合理利用专门多的网页都具有一个特点，用一个字来形容，那确实是“塞”，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致扫瞄时会遇到专门多的不方便，要紧确实是页面主次不分，喧宾夺主，要不确实是没有重点，没有专门好的归类，整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也能够用个“散”

11、字来形容。并非要把整个页面塞满了才不觉得空，也并非让整个页面空旷才不觉得满，只要合理的安排、有机的组合，使页面达到平衡，既使在一边的部分大面积留空，同样可不能让人感到空，相反如此会给人留下宽敞的考虑空间，给人回味又达到了视觉效果。比如重要但形式单一的文字信息，就要在块于块之间多点留白。图片花色凌乱的部分要于其他块有明显区分。在首页上展示子栏分类信息要紧凑，以一大类作为一个整体块。相同类的信息采纳相同的排榜方式。门户的导航是经常变且类不繁多的，不一定什么时候是单数什么时候是双数，因此不要用图片来制作。重要的第一屏包括页头的的第一屏，应该集中了用户最常用的信息，导航，服务链接。这一屏的装饰，应该专

12、门大程度的体现了整个网站的设计风格，同时分为页头（分类导航服务导航）；登陆区；首推图片广告/文字广告；热门信息/导航；最新信息推举；首推专题；4文字编排在网页设计中，字体的处理与颜色、版式、图形化等其他设计元素的处理一样特不关键。4.1文字图形化文字图形化确实是将文字用图片的形式来表现，这种形式在页面的子栏目里面最为常用，因为它具有突出，同时又美化了页面，使页面更加人性化加强了视觉效果。是文字无法达到的。关于通用性的网站弊端确实是扩展性不强。4.2强调文字假如将个不文字作为页面的诉求重点，则能够通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果

13、，使其在页面整体中显得出众而夺目。这些方法实际上差不多上运用了对比的法则。假如在更新频率低的情况下也能够使用文字图形化。五、网站配色1.用一种色彩。那个地点是指先选定一种色彩，然后调整透明度或者饱和度，(讲得通俗些确实是将色彩变淡或则加深)，产生新的色彩，用于网页。如此的页面看起来色彩统一，有层次感。2.用两种色彩。先选定一种色彩，然后选择它的对比色(在Photoshop里按ctrl+shift+I)再进行微小的调整。整个页面色彩丰富但不花稍。3.用一个色系。简单的讲确实是用一个感受的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也确实是在同一色系里面采纳不同的颜色使网页增加色彩，而又不花

14、，色调统一。这种配色方法在网站设计种最为常用。4.灰色在网页设计中又称为“万能色”，其特点是能够和任何颜色搭配，在使用时把握量幸免网页变灰。在网页配色中，尽量操纵在三种色彩以内，以幸免网页花、乱、没有主色的显现。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出要紧文字内容、也使用户在扫瞄信息的时候可不能觉得累。六、常见问题6.1分解大型表格为了加快网页的扫瞄速度，尽可能幸免用大型表格，因为扫瞄器必须等待整个表格的内容全部到达客户端，才能显示那个表格的内容，而文本或图像则是一边下载一边显示。同时我们制作网页时要尽量减少表格的深度、表格复杂化，这一点尤为重要可直接阻碍网页扫瞄

15、速度、又给后面的程序添加带来了不必要的苦恼。将浮动层等load时刻慢的信息块(div)放在的最后，能够尽量少的阻碍用户扫瞄速度。6.2网站导航要清晰“您所在位置”在大型网站中是不可缺少的一部分，其作用表明您现在所处在的位置，使用户可不能不知东西南北迷失在网站中。其次还有读者进入目的页的点击次数，不能超过三次。假如三次以上还找不到用户所要的信息，人家可就没有耐心陪你玩了！6.3图片注解在专门多网站上我们都能够找到一个共同的缺点，当网速慢时有专门图片都无法显示，又没有注解使得用户反感，如在注册时的按钮是图片做的又没加图片注解，而导致连注册都找不到，假如加了注解这些问题也就不成问题了！6.4系统按钮

16、在我们做按钮的时候，要做成“按钮”的形式（type=button），而不要做成“提交表单”的形式（type=submit），方便以后程序设计。6.5空链接、死链接在一个优秀、专业的网站上是找不到任何一个空链接或死链接的情况，假如有这种情况会阻碍到用户对您网站的评价，因此我们在制作的时候尽量幸免，幸免方法确实是提早做好链接，假如尚未完成的页面则链上“建设中”的页面，加以解释。6.6导航条在大型的行业网站里面主导航条最好是用文字形式，幸免使用图片或Flash做导航条、缩小网站扩展性。6.7网站的扩展性关于一个行业网站而言，网站的扩展性是相当重要的，随时都要考虑到网站需求的变化！七、专题设计实际上，

17、我认为整个网站投入设计力量最多的地点，就应该是专题页了。因为一个门户是不应该经常改变结构和风格的。而为了更快速的引导顾客扫瞄，首页上放的多是文字分类，不应有过多图片装饰。而专题页上，最重要的是营造消费氛围，刺激顾客的消费欲望，因此，只要是能够体现商品特性，吸引用户，即使页面体积有些大也能够容忍。在那个地点，有设计人员更多的发挥空间。在专题设计中需要注意的是，标题文字或广告文字应该突出明显，一般描述文字与背景色对比清晰。商品图片突出，整个布局丰富而不凌乱，主次分明。可供用户操作的空间明显而突出。七、广告图片通常门户网站的广告来源专门广，又的是广告客户自己制作的，有的是其他网站制作的，有的是门户网

18、站自己的广告部门设计制作的。在设计上专门难治理，只是有一个原则，确实是：颜色鲜艳层次少；主题文字突出；构图简单；动画播放时刻只是长。从网易看大型门户网站首页设计思路许多人也许认为大型门户网站首页设计思路只是把一些导航、资讯内容和广告堆积起来摆放得好看就能够了，尽管那个观点也并不是完全错误的，确实门户网站首页是由这三方面内容组织而成，但随着互联网的快速进展，用户对访问网站的要求也越来越高，在互联网行业，因为专门多东西是免费和相似的，用户转移成本会比较低，在那个网站有的东西去其他网站差不多都能找到，只是输入个网址就能够了。网站营运商假如想留住用户和吸引更多的用户扫瞄自己的网站，那那个时候确实是需要

19、提高网站的用户体验来满足用户多方面的需求。因此现在大型门户网站的设计越来越讲究和更为用户着想，最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤，事实上有专门多门户网站设计也会经历其中一些步骤，只是公司对这方面还没有一个专门好的认识，没有一个系统的叫法和详细的职能分工，往往差不多上一个人身兼多职，大部分差不多上按个人经验主观推断去决定，没有一些客观的数据支持。例如经常会有一些网站策划者讲：我也是网站用户之一，那个功能我没有使用需求，其他用户也应该没有使用需求能够删除。假如这时候有一份客观的使用分析数据就明白用户到底有没有那个需求了。尽管我们不可能全部都需要客

20、观数据去做支持，但起码能以客观数据为基础再延伸到其他设计中。下面我们从几个方面来分析网易门户网站的设计思路：一、架构设计网站的首页是兵家必争之地，每个频道负责人都想在显眼的位置推举自己的产品或者资讯来增加曝光率，总是希望把所有东西一下子让用户看到，但最后我们就发觉你放的东西越多，用户就全然找不到他想要的东西，快速离开的可能性专门大。在国内的门户网站都适应了资讯多、页面长，什么都往首页堆，感受内容越多会显的越大气，但用户的耐性是有限的，因此网页的通透性对国内网站专门重要，每一屏的架构变化不宜太多，适当就好，主次内容信息位置保持一致性，不然用户每扫瞄到下一屏都需要重新去解读架构，考虑该从那儿开始阅

21、读，不但用户的耐性被消耗掉还会增加用户的扫瞄成本，因此网站首页的架构必须清晰明了，保持较好的通透性，减少用户的扫瞄成本。例如网易首页，采纳三栏式结构，左栏为导航推举区提供网易特色产品入口，中栏为要紧资讯区，提供快速、全面、动态的各类新闻资讯，右栏为特色栏目区如博客、论坛等。各栏的内容属性清晰，用户能快速找到他们需要的信息畅顺的扫瞄不需要多余的考虑。据研究分析用户扫瞄网页的视觉一般是从左到右、从上至下的一个扫瞄适应。网易网站的架构也在往那个方向改进，不断的提升用户体验。网易资讯类页面大致可分为3类架构，下图是3类架构的视觉走向图。网易首页采纳第一种架构，各频道首页例如新闻、体育、娱乐等采纳第二种

22、架构，新闻最终页采纳第三种架构。如此可使用户保持统一的视觉走向，不管扫瞄那个页面用户都明白他们需要的资讯在那儿，符合用户扫瞄网页的适应，减少用户扫瞄成本。 二、风格设计相信多数人都专门喜爱apple的产品，什么缘故apple的产品那么受大众欢迎，除了品牌阻碍力外，时尚简单的外观设计和界面设计，也是受欢迎的其中缘故之一，在apple的产品设计中让人感受没有多余的东西，每一根线存在差不多上有意义的。还有在中国的书画史上，有专门多艺术境地高远的作品差不多上少费笔墨却格外传神(如郑燮的竹石、齐翁的墨虾)。尽管 HYPERLINK / 网站设计不能称作为一件艺术创作，但用最少的元素设计出最好的作品那个也

23、是网站设计中所追求目标之一。能用一根线表现出效果就没有必要使用2根线，能用文字表示清晰的就不需要用图片。页面设计假如使用过多装饰元素，会造成页面庞大下载速度缓慢，不要高估网民的耐性，大部分网民差不多上没有耐性的。扫瞄大量信息的时候需要一个简洁无阻碍的界面，过多的色彩和装饰反而会分散用户的注意力，阻碍到用户扫瞄效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰(个性产品网站除外)。这也是网易门户一直沿用简洁风格缘故之一。例如新改版的网易新闻，打破了以往条条框框的感受，取消了多余的线框，界面更清晰简洁，资讯内容更突出。列举2个简洁风格做的比较好的外国门户网站Yah

24、o新闻使用的是立体效果的设计，time是以线条为主的设计，2者给人感受是简洁清晰没有多余的东西，既突出了资讯内容又不失美感，如逆云网首页的设计。 每个门户网站的面向受众都不同，也会造成门户网站的风格定位不一样，例如面向受众年龄层比较年轻的门户网站，在设计风格可能会偏向多色彩多功能，而面向受众年龄层较大的门户网站，在设计风格上就会相反。但不管如何样的设计风格保持清晰方便用户扫瞄的界面是必要的。设计思路三、信息排布大型门户网站首页一般都会承载大量的资讯信息，密密麻麻的信息会让用户扫瞄网页的时候会产生压迫感，如何能让用户顺畅的扫瞄成为设计中重要的一环。大伙儿能够对比下面2张信息排布图，信息条数差不多上相同的但第一张信息排布图会让人感受信息专门清晰。而第2张图会让用户感受到信息排布有压迫感，可能还没有开始阅读就差不多没有耐性了(忠诚度特不高的用户例外，但这类用户怎么讲比较少)。因此在信息排布的时候到达一定