很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由这三方面内容组织而成,但随着互联网的快速发展,用户对访问网站的要求也越来越高,在互联网行业,因为很多东西是免费和相似的,用户转移成本会比较低,在这个网站有的东西去其他网站基本都能找到,只是输入个网址就可以了。网站营运商如果想留住用户和吸引更多的用户浏览自己的网站,那这个时候就是需要提高网站的用户体验来满足用户多方面的需求。
因此现在门户网站的设计越来越讲究和更为用户着想,最理想的门户网站设计流程需要经历“用户研究-交互设计-视觉设计-可用性测试”这几个步骤,其实有很多门户网站设计也会经历其中一些步骤,只是公司对这方面还没有一个很好的认识,没有一个系统的叫法和详细的职能分工,往往都是一个人身兼多职,大部分都是按个人经验主观判断去决定,没有一些客观的数据支持。例如经常会有一些网站策划者说:我也是网站用户之一,这个功能我没有使用需求,其他用户也应该没有使用需求可以删除。如果这时候有一份客观的使用分析数据就知道用户到底有没有这个需求了。虽然我们不可能全部都需要客观数据去做支持,但起码能以客观数据为基础再延伸到其他设计中。
下面我们从几个方面来分析网易网站的设计思想:
一、架构
1、网站首页是兵家必争之地,每个频道负责人都想在显眼的位置推荐自己的产品或者资讯来增加曝光率,总是希望把所有东西一下子让用户看到,但最后我们就发现你放的东西越多,用户就根本找不到他想要的东西,快速离开的可能性很大。在国内的门户网站都习惯了资讯多、页面长,什么都往首页堆,感觉内容越多会显的越大气,但用户的耐性是有限的,所以网页的通透性对国内网站很重要,每一屏的架构变化不宜太多,适当就好,主次内容信息位置保持一致性,不然用户每浏览到下一屏都需要重新去解读架构,思考该从那里开始阅读,不但用户的耐性被消耗掉还会增加用户的浏览成本,所以网站首页的架构必须清晰明了,保持较好的通透性,减少用户的浏览成本。
例如网易首页,采用三栏式结构,左栏为导航推荐区提供网易特色产品入口,中栏为主要资讯区,提供快速、全面、动态的各类新闻资讯,右栏为特色栏目区如博客、论坛等。各栏的内容属性清晰,用户能快速找到他们需要的信息畅顺的浏览不需要多余的思考。
据研究分析用户浏览网页的视觉一般是从左到右、从上至下的一个浏览习惯。网易网站的架构也在往这个方向改进,不断的提升用户体验。网易资讯类页面大致可分为3类架构,下图是3类架构的视觉走向图。
网易首页采用第一种架构,各频道首页例如新闻、体育、娱乐等采用第二种架构,新闻最终页采用第三种架构。这样可使用户保持统一的视觉走向,无论浏览那个页面用户都知道他们需要的资讯在那里,符合用户浏览网页的习惯,减少用户浏览成本。
二、风格
相信多数人都很喜欢apple的产品,为什么apple的产品那么受大众欢迎,除了品牌影响力外,时尚简单的外观设计和界面设计,也是受欢迎的其中原因之一,在apple的产品设计中让人感觉没有多余的东西,每一根线存在都是有意义的。还有在中国的书画史上,有很多艺术境界高远的作品都是少费笔墨却格外传神(如郑燮的竹石、齐翁的墨虾)。虽然网站设计不能称作为一件艺术创作,但用最少的元素设计出最好的作品这个也是网站设计中所追求目标之一。
能用一根线表现出效果就没有必要使用2根线,能用文字表示清楚的就不需要用图片。页面设计如果使用过多装饰元素,会造成页面庞大下载速度缓慢,不要高估网民的耐性,大部分网民都是没有耐性的。浏览大量信息的时候需要一个简洁无阻碍的界面,过多的色彩和装饰反而会分散用户的注意力,影响到用户浏览效果和减少对资讯的点击。网站需要用户看到的是网站提供的信息内容和服务而不是花俏的装饰(个性产品网站除外)。这也是网易门户一直沿用简洁风格原因之一。
例如新改版的网易新闻,打破了以往条条框框的感觉,取消了多余的线框,界面更清晰简洁,资讯内容更突出。
列举2个简洁风格做的比较好的外国门户网站Yaho新闻使用的是立体效果的设计,time是以线条为主的设计,2者给人感觉是简洁清晰没有多余的东西,既突出了资讯内容又不失美感。
每个门户网站的面向受众都不同,也会造成门户网站的风格定位不一样,例如面向受众年龄层比较年轻的门户网站,在设计风格可能会偏向多色彩多功能,而面向受众年龄层较大的门户网站,在设计风格上就会相反。但不管怎样的设计风格保持清晰方便用户浏览的界面是必要的。
三、信息排布
门户网站首页一般都会承载大量的资讯信息,密密麻麻的信息会让用户浏览网页的时候会产生压迫感,如何能让用户顺畅的浏览成为设计中重要的一环。
大家可以对比下面2张信息排布图,信息条数都是相同的但第一张信息排布图会让人感觉信息很清晰。而第2张图会让用户感觉到信息排布有压迫感,可能还没有开始阅读就已经没有耐性了(忠诚度非常高的用户例外,但这类用户毕竟比较少)。所以在信息排布的时候到达一定行数时需要用一些留空做到视觉隔离,让视觉上有透气的感觉。
四、视觉顺序
每天的新闻会有重点和非重点之分,有新和旧之分(旧只是相对),大部分用户是希望先看最重要的后看非重要的,先看新的后看旧的这样一个顺序,那网站设计师就需要在视觉设计上引导用户去浏览,如下图示
在一个信息版块里,会有第一视觉区、第二视觉区、第三视觉区,就是说当用户看到这一信息版块时第一眼会落到图片的位置,第2眼会落到大标题上,第3眼会落到其他地方。这样有顺序的引导用户浏览,可减少用户的浏览成本,增加页面的视觉效果。在这个信息版块里第1视觉和第2视觉有可能会因为选材方面而转换视觉,按常理图型视觉冲击力是大于文字的,但当选用的图片素材不优的时候也会被文字所吸引过去。
五、亮点
在国内的门户网站有资讯多页面长的特点,当用户浏览到页面最底部而又需要浏览更多资讯的时候,可能需要拉到最顶部才能点击导航浏览其他页面,这是一个比较费力的工程,一般门户网站的做法是提供一个“返回顶部”的功能,新改版的网易频道页面在这个位置提供一个和头部对应的导航,不需要用户二次点击就能达到目的。如下图:
以上从几方面简单分析了网易网首页的设计思想,相信还存在很多不足的地方,但我们会不断的摸索和尝试,为网友提供一个人性化的网络平台而努力。
现阶段国内互联网行业和一些发达国家相比确实还有一段比较远的距离,特别是在网站用户体验上还处于摸索阶段,国人对浏览网站舒适度需求也在不断提升,因此提高网站的用户体验是网站设计未来发展的方向。但因为用户体验是纯主观的,就带有一定的不确定因素,个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计的实验来认识到。
分享到:
相关推荐
网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用...本文将会分享一些视觉效果实现的方法以及设计思想,但难免有错漏之处。若读者发现有错误的地方或者更好的实现方法,请留言回复,希望与大家共同进步。
《在领域驱动设计(DDD)下重构网易新闻APP架构》 在移动应用开发领域,尤其是Android平台,网易新闻APP作为一款知名的新闻资讯应用,其架构的设计与优化对于提供高效、稳定的服务至关重要。随着业务的复杂性和用户...
设计思想: 1. **功能实现**:首先,为了实现播放功能,需要使用Android的MediaPlayer类来处理音频文件。MediaPlayer支持多种音频格式的播放,并提供了播放、暂停、停止等基础控制接口。 2. **界面设计**:UI设计...
易语言,作为一款以中文编程为特色的编程环境,以其独特的编程思想和简易的学习曲线,在国内编程爱好者中享有较高的知名度。本篇将围绕"易语言网易邮箱登录器"这一主题,深入解析其工作原理、实现方式以及源码结构,...
在毕业设计论文部分,你需要阐述上述技术的应用,并详细分析源码的设计思想和实现方式。同时,可能需要进行性能优化、错误处理和安全性方面的讨论。例如,如何避免内存泄漏,如何处理网络异常,以及如何保护用户隐私...
【标签】:“源码”意味着我们将探讨该应用的代码结构和实现方式,通过源代码来学习其设计思想和编程技巧。“工具”则表明这是一款日常生活中常见的实用工具软件,它的设计和实现往往需要考虑到用户体验、性能优化...
标题中提到的"网易公开课 CS 106A: Programming Methodology"指的是斯坦福大学计算机科学系教授Eric Roberts...这种方法论不仅仅是学习编程语言的语法,而是强调编程思想和逻辑构建,为学生打下坚实的计算机科学基础。
【标签】:“web”标签明确了这个项目的核心内容是关于Web开发的,这可能涉及到网页设计、交互实现、数据处理等多个方面。Web前端开发者通常需要掌握的技能包括但不限于HTML5、CSS3、JavaScript、DOM操作、响应式...
总的来说,实现这个仿网易评论加载动画需要结合iOS的视图动画技术,通过编程技巧和设计思想,创造出既美观又实用的加载效果。开发者需要对iOS的动画框架有深入理解,并具备良好的编程和设计能力。
1. **Android架构设计**:网易客户端源码通常采用MVP(Model-View-Presenter)或MVVM(Model-View-ViewModel)架构,这种架构模式有助于代码组织和解耦,提高代码的可维护性和测试性。我们可以深入研究其如何实现...
本文将深入探讨这个框架的核心技术和设计思想。 首先,让我们关注“TabActivity”和“TabHost”。在早期的Android版本中,TabHost和TabActivity是实现多标签界面的主要方式。TabHost是一个可以管理多个小窗口(或...
首先,`VierPager`是一个专门为Android设计的库,它提供了类似网易新闻App中底部Tab栏的左右滑动效果。`VierPager`的核心思想是通过自定义`ViewPager`扩展其功能,以支持四个页面(或更多)的平滑切换,并且可以添加...
易语言是一种可视化编程语言,它的设计思想是“易学易用”,采用全中文的命令名称,降低了编程的学习门槛。它支持事件驱动编程模型,开发者可以通过拖拽控件并设置相关事件来构建程序逻辑。 在《易语言网易163邮箱...
网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用...本文将会分享一些视觉效果实现的方法以及设计思想,但难免有错漏之处。若读者发现有错误的地方或者更好的实现方法,请留言回复,希望与大家共同进步。
首先,网易美学作为一个综合性的艺术平台,它整合了丰富的艺术资源,包括但不限于传统艺术作品、现代艺术创作、设计、摄影等多元化的艺术形式。这个平台不仅为用户提供了一个欣赏和学习艺术的窗口,同时也为艺术家和...
3. **中台设计与架构**:内容可能涵盖网易中台的具体架构设计,包括数据中台的角色,如何实现数据的统一管理和高效利用,以及如何通过微服务化实现业务的快速迭代。 4. **博弈过程**:中台建设并非一帆风顺,报告...
通过这个React Native仿网易新闻的Demo,开发者可以深入了解React Native的开发流程、组件化思想、网络请求、状态管理、页面导航等多个方面,并实践如何将它们应用于实际项目中。同时,这也是一个提升JavaScript和...
2. **MVVM设计模式**:Model-View-ViewModel(MVVM)是一种常见的Swift应用架构,有助于解耦视图和业务逻辑。 3. **AudioKit框架**:用于音频处理,如播放、录制、处理和分析音频。在模仿网易云音乐时,会用到播放...
在这个页面上,我们可以利用组件化的思想,设计和实现歌曲列表、评论数量统计等视图。此外,还可以通过Ajax异步请求获取后端数据,实现页面动态加载和更新,提升用户体验。 前端页面的样式设计可以使用CSS预处理器...