`

网易网站设计(思想)

阅读更多

很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由这三方面内容组织而成,但随着互联网的快速发展,用户对访问网站的要求也越来越高,在互联网行业,因为很多东西是免费和相似的,用户转移成本会比较低,在这个网站有的东西去其他网站基本都能找到,只是输入个网址就可以了。网站营运商如果想留住用户和吸引更多的用户浏览自己的网站,那这个时候就是需要提高网站的用户体验来满足用户多方面的需求。

 因此现在门户网站的设计越来越讲究和更为用户着想,最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤,其实有很多门户网站设计也会经历其中一些步骤,只是公司对这方面还没有一个很好的认识,没有一个系统的叫法和详细的职能分工,往往都是一个人身兼多职,大部分都是按个人经验主观判断去决定,没有一些客观的数据支持。例如经常会有一些网站策划者说:我也是网站用户之一,这个功能我没有使用需求,其他用户也应该没有使用需求可以删除。如果这时候有一份客观的使用分析数据就知道用户到底有没有这个需求了。虽然我们不可能全部都需要客观数据去做支持,但起码能以客观数据为基础再延伸到其他设计中。

 下面我们从几个方面来分析网易网站的设计思想:

一、架构

1、网站首页是兵家必争之地,每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率,总是希望把所有东西一下子让用户看到,但最后我们就发现你放的东西越多,用户就根本找不到他想要的东西,快速离开的可能性很大。在国内的门户网站都习惯了资讯多、页面长,什么都往首页堆,感觉内容越多会显的越大气,但用户的耐性是有限的,所以网页的通透性对国内网站很重要,每一屏的架构变化不宜太多,适当就好,主次内容信息位置保持一致性,不然用户每浏览到下一屏都需要重新去解读架构,思考该从那里开始阅读,不但用户的耐性被消耗掉还会增加用户的浏览成本,所以网站首页的架构必须清晰明了,保持较好的通透性,减少用户的浏览成本。

 

例如网易首页,采用三栏式结构,左栏为导航推荐区提供网易特色产品入口,中栏为主要资讯区,提供快速、全面、动态的各类新闻资讯,右栏为特色栏目区如博客、论坛等。各栏的内容属性清晰,用户能快速找到他们需要的信息畅顺的浏览不需要多余的思考。

e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac2

据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。网易网站的架构也在往这个方向改进,不断的提升用户体验。网易资讯类页面大致可分为3类架构,下图是3类架构的视觉走向图。

e7bd91e69893e7bd91e7ab99e8a786e8a789e8b5b0e59091e59bbee589afe69cac1

网易首页采用第一种架构,各频道首页例如新闻、体育、娱乐等采用第二种架构,新闻最终页采用第三种架构。这样可使用户保持统一的视觉走向,无论浏览那个页面用户都知道他们需要的资讯在那里,符合用户浏览网页的习惯,减少用户浏览成本。

二、风格

 相信多数人都很喜欢apple的产品,为什么apple的产品那么受大众欢迎,除了品牌影响力外,时尚简单的外观设计和界面设计,也是受欢迎的其中原因之一,在apple的产品设计中让人感觉没有多余的东西,每一根线存在都是有意义的。还有在中国的书画史上,有很多艺术境界高远的作品都是少费笔墨却格外传神(如郑燮的竹石、齐翁的墨虾)。虽然网站设计不能称作为一件艺术创作,但用最少的元素设计出最好的作品这个也是网站设计中所追求目标之一。

 能用一根线表现出效果就没有必要使用2根线,能用文字表示清楚的就不需要用图片。页面设计如果使用过多装饰元素,会造成页面庞大下载速度缓慢,不要高估网民的耐性,大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面,过多的色彩和装饰反而会分散用户的注意力,影响到用户浏览效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰(个性产品网站除外)。这也是网易门户一直沿用简洁风格原因之一。

例如新改版的网易新闻,打破了以往条条框框的感觉,取消了多余的线框,界面更清晰简洁,资讯内容更突出。

e4be8be5ad90

列举2个简洁风格做的比较好的外国门户网站Yaho新闻使用的是立体效果的设计,time是以线条为主的设计,2者给人感觉是简洁清晰没有多余的东西,既突出了资讯内容又不失美感。

 每个门户网站的面向受众都不同,也会造成门户网站的风格定位不一样,例如面向受众年龄层比较年轻的门户网站,在设计风格可能会偏向多色彩多功能,而面向受众年龄层较大的门户网站,在设计风格上就会相反。但不管怎样的设计风格保持清晰方便用户浏览的界面是必要的。

三、信息排布 

门户网站首页一般都会承载大量的资讯信息,密密麻麻的信息会让用户浏览网页的时候会产生压迫感,如何能让用户顺畅的浏览成为设计中重要的一环。

 大家可以对比下面2张信息排布图,信息条数都是相同的但第一张信息排布图会让人感觉信息很清晰。而第2张图会让用户感觉到信息排布有压迫感,可能还没有开始阅读就已经没有耐性了(忠诚度非常高的用户例外,但这类用户毕竟比较少)。所以在信息排布的时候到达一定行数时需要用一些留空做到视觉隔离,让视觉上有透气的感觉。

e4bfa1e681afe68e92e5b883

四、视觉顺序
 

每天的新闻会有重点和非重点之分,有新和旧之分(旧只是相对),大部分用户是希望先看最重要的后看非重要的,先看新的后看旧的这样一个顺序,那网站设计师就需要在视觉设计上引导用户去浏览,如下图示

 

e8a786e8a789e9a1bae5ba8fe59bbee589afe69cac

 在一个信息版块里,会有第一视觉区、第二视觉区、第三视觉区,就是说当用户看到这一信息版块时第一眼会落到图片的位置,第2眼会落到大标题上,第3眼会落到其他地方。这样有顺序的引导用户浏览,可减少用户的浏览成本,增加页面的视觉效果。在这个信息版块里第1视觉和第2视觉有可能会因为选材方面而转换视觉,按常理图型视觉冲击力是大于文字的,但当选用的图片素材不优的时候也会被文字所吸引过去。

五、亮点

在国内的门户网站有资讯多页面长的特点,当用户浏览到页面最底部而又需要浏览更多资讯的时候,可能需要拉到最顶部才能点击导航浏览其他页面,这是一个比较费力的工程,一般门户网站的做法是提供一个“返回顶部”的功能,新改版的网易频道页面在这个位置提供一个和头部对应的导航,不需要用户二次点击就能达到目的。如下图:

e5b0be

以上从几方面简单分析了网易网首页的设计思想,相信还存在很多不足的地方,但我们会不断的摸索和尝试,为网友提供一个人性化的网络平台而努力。

    现阶段国内互联网行业和一些发达国家相比确实还有一段比较远的距离,特别是在网站用户体验上还处于摸索阶段,国人对浏览网站舒适度需求也在不断提升,因此提高网站的用户体验是网站设计未来发展的方向。但因为用户体验是纯主观的,就带有一定的不确定因素,个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计的实验来认识到。

分享到:
评论

相关推荐

    Android stuido 仿网易云音乐播放界面

    网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用...本文将会分享一些视觉效果实现的方法以及设计思想,但难免有错漏之处。若读者发现有错误的地方或者更好的实现方法,请留言回复,希望与大家共同进步。

    Android课程设计---基于Android系统的音乐播放器设计与实现.doc

    也使设计者更加熟练Android的技术 和其它在市场上的特点 设计报告撰写格式要求: 1设计题目与要求 2 设计思想 3系统结构 4 数据结构的说明和模块的算法流程图 5 使用说明书(即用户手册):内容包含如何登录、退出、...

    网易云音乐zip

    网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用...本文将会分享一些视觉效果实现的方法以及设计思想,但难免有错漏之处。若读者发现有错误的地方或者更好的实现方法,请留言回复,希望与大家共同进步。

    泛型编程与设计新思维 我总结的经典c++编程思想

    泛型编程与设计新思维 我总结的经典c++编程思想

    Android体育新闻app课程设计

    本app的系统设计基于MVC架构思想,可分为三大层:用户界面,控制器,业务模型(数据库)。 数据库层中设计了两张表,分别是user表(存储用户的个人信息)、collection表(存储用户收藏的文章信息)。对数据库的创建...

    王焱:如何利用数据分析推动产品设计

    2013互联网产品大会上,来自网易有道的产品总监王焱带来了工作坊《如何利用数据分析推动产品设计》。王焱介绍了产品数据的来源,以及数据分析的一般步骤。介绍了从数据到产品的生命周期,包括引入期、成长期、成熟期...

    猛犸代码助手V3.6

    它总结关系数据库操作的一些共性,根据面向对象的思想和分层架构设计,将大量代码按照预先设置的模板上自动生成出来。 使用XML+XSL技术,利用模板插件机制,根据不同的项目模板可以生成ASP、PHP、C#、JAVA、...

    猛犸代码生成器 v3.9

    它总结关系数据库操作的一些共性,根据面向对象的思想和分层架构设计,将大量代码按照预先设置的模板上自动生成出来。 基于xml+xsl技术,使用模板插件机制,根据不同的项目模板可以生成ASP、PHP、C#、JAVA、...

    编程小白的第一本python入门书高清全彩版.zip

    作者对本书的思想是: 既然笨办法不能让我学会 Python,那么我决定用一种聪明方法来学,为自己创造学习的捷径。这种高效学习法的核心在于: 1、精简:学习最核心的关键知识; 2、理解:运用类比、视觉化的方法来理解...

    认识计算机网络(教学设计).doc

    " " "培养学生正确应用网络,遵守网络道德法规,不沉迷网 " " "络游戏的思想意识。 " "重、难点 "重点:了解网络的功能 " " "难点:了解局域网、广域网、因特网的概念及关系。 " "教学方法 "游戏激趣法 测试指导 ...

    认识计算机网络(教学设计)(1).doc

    " " "培养学生正确应用网络,遵守网络道德法规,不沉迷网 " " "络游戏的思想意识。 " "重、难点 "重点:了解网络的功能 " " "难点:了解局域网、广域网、因特网的概念及关系。 " "教学方法 "游戏激趣法 测试指导 ...

    【毕业设计】基于大数据个性化音乐推荐算法分析.rar

    国内也涌现了一些优秀的音乐推荐网站如豆瓣电台、虾米音乐、网易云音乐等等,根据用户平时推荐给好友的歌曲,听歌行为以及歌曲收录信息,找到“相似的品味者”,更好的做出推荐。 本文针对传统基于用户或者基于物品...

    Zoomla!逐浪CMS v6.0.rar

    在不做“网络交换机”,专注于WEB芯片与智能办公的思想中,启用全新VI体系与设计思想,力求提供最底层的应用,如同手机上的高通芯片解决方案,大道无形,逐浪有道,做最卓越的WEB内核系统,并让人人都能建设好网站!...

    reactor宝典.doc

    2、React的设计思想 (包含java代码示例) 3.React的生命周期(包含java代码示例) 4.React事件机制(包含java代码示例) 5.数据如何在React组件中流动(包含java代码示例) 6.React hooks解决了什么问题 (包含java...

    在线客房预订系统源码

    9.能使网页设计师面向对象设计,更体现随意发挥创意和思想,可根据网站本身的性质而设置其本身的特性如:模块 ,颜色,标志,如商务型,国际贸易型,个人型(简约)根据系统本身的功能,您可以做成,网上商店型,...

    word源码java-annotation-parser:通用的注释解释器

    设计思想 根据自己的了解,程序语言(重点是c++,java,javascript)的注释,一般分为两种。一种是由双斜杠(//)开头的单行注释,令外一种是由斜杠星号(/)开始和对应星号斜杠(/)结束的段落(多行)注释。在由注释...

    基于WCF构建企业级大型分布式SOA架构(初级篇)

     2、让学员对SOA架构设计的思想和方式具有初步的认识, 对后期我们将要学习的SOA架构有一个宏观的了解;  3、让学员通过完整的示例的学习, 能够熟练搭建开发环境, 服务构建,服务配置,服务调试、服务单元测试, ...

    我的编程感悟(中文PDF)(共37M二分卷)分卷二

    之前我经常奇怪,云风还非常年轻,他程序思想中的那种老练的智慧是从何处得来的呢?读完这本书之后,我终于明白,还是那句话:“无他,唯手熟耳”。 面对这沉甸甸的作品,我确实感到,这是云风用心写的书。用心写...

    我的编程感悟(中文PDF)(共37M二分卷)分卷一

    之前我经常奇怪,云风还非常年轻,他程序思想中的那种老练的智慧是从何处得来的呢?读完这本书之后,我终于明白,还是那句话:“无他,唯手熟耳”。 面对这沉甸甸的作品,我确实感到,这是云风用心写的书。用心写...

Global site tag (gtag.js) - Google Analytics