`
gray888
  • 浏览: 530473 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

从网页设计角度评测淘宝首页改版-来源:onling.net

阅读更多

这两天正好在看《网站界面设计》一书,这本书,也是我首次接触比较系统的介绍界面设计理论的书,书中对界面的可用性设计原则、交互设计、呈现设计以及网络广告设计四方面介绍的很系统很详细的介绍,而且书中包含了大量的实际案例分析,看后收获很大。于是,最近一直想找个界面来练练手,刚好taobao的首页进行了新一轮的“胖身”改版,就全当成学习来,来分析一下Taobao的首页界面改版评测:

 首页是网站的大门,用户从这里进入网站,又从这里进入到网站的各个频道和内容,首页是用户的主要集散地,他的呈现和侧重点直接决定了网站的导向,对于用户来说,首页是导航,对于网站来说,他相当于目录和发布区,对于活动以及商家,他又是广告。平衡三者的关系是首页设计的重点,网站的首页和栏目页体现了网站的主旨以及特色,把流量引向网站最重要的地方,这一方面来说,Taobao的网站改版还是达到要求了。 首页的基本设计原则:

(1)首页上最显著的设计元素之一应该是公司网站的名称,让用户知道他来到了什么地方。

呵呵,这个很明显,TAObao的LOGO依旧放在左上角最显眼的地方。
 taobaologo.jpg

(2)首屏需要体现最基本的用户任务,即70%以上目标用户需要使用的功能和网站的主推的服务,需要将两者巧妙地结合在一起,引导网站流量。

 Taobao是一个C2C的网站,用户上网主要来淘自己喜欢的东西,所以搜索是他最重要的入口,这里淘宝的首页把搜索的设计很显眼,也很人性化,只不过不知道为什么右上角上方也有一个搜索,虽然搜索很重要,但是太多相似的信息会不会令用户感到迷惑。



(3)首屏需要传达足够的信息,以让用户感受网站内容或功能的丰富。

这个看看后面密密麻麻的宝贝类目,就能感觉到,不过这个也是最最困难的,信息多了,要如何安排,安排不当,就容易造成信息的杂乱无章,让用户迷失导向,不过这里这个处理的还可以,一些重要的常用的用不同颜色处理,各个类目用不同的背景区分开来,相对信息还是比较清晰。只是他的背景背景感觉应该用橙色系的色度比较淡的来做背景,这个整体的有机型会强一些。

 taobao5.jpg

(4)首屏需要体现网站的更新,体现网站的活力。

淘宝集市;品牌商城,二手闲置。类目的右侧,全球购和促销区的领地,尤其是新增的促销区域,这些动态的数据更新,相信已经足够体现了这个中国最大的C2C的活力,这一版,也把这些强化了不少。

(5)首页的设计能够引人注目,能够让目标用户过目不忘,并对网站形象产生良好的准确的认知和记忆,就设计和视觉而言,用户所希望的是:布局整齐清晰,板块明确,色调不要让眼睛疲劳。

这一块,感觉改版後,板块比原来清晰不少,整个网站的架构也更明了,设计上更加大胆,色彩依旧保持鲜艳为主,刺激用户购买欲望,还是保持原来的主色调,毕竟也是一个企业色,但是个人感觉用色还是有点杂,有点很强烈的对比,让用户感觉心理很不舒服,

       taobao2.jpg
(网页页面的颜色跳跃会不会太突然了些,虽然这样可以强调公告信息,但是,感觉不是很和谐~)   
taobao31.jpg

(整体的色彩过于混乱,按照我个人的理解,taobao的主题色应该是橙红色,但是,感觉整个页面中,蓝色跟橙红比重相似,从上来拉下来,感觉进入两个世界,感觉整体性不是很好~)  (6)首屏需要较快的下载,因此网页顶端需要减少图片,减少表格的复杂性,保证表格横切的可能性以加快下载速度。

这个个人感觉淘宝的导航虽然设计的很漂亮,但是经常打开后圆角丢失,或者背景图片没现实出来,不过好在导航文字能很快出现,但是过多的图片还是影响了用户对网站整体的感觉,还有个问题,也是关于页面下载速度的,公告栏以及中间的图片广告的背景,好像是深色的粉红,在页面下载之前很刺眼,但是最后有出现清淡的板块,感觉用户心理变化很大,这一块的背景设置应该还是以淡色为主,虽然用户最终影响不大,但是,速度慢的时候,还好思很明显的。

(7)对于商业网站而言,首屏需要考虑广告的位置和呈现。

这个不要说了吧,眼球最中间就是三幅翻动广告, 广告鼠标放在下面数字上会出现相对应的图片,下面对应的数字会变大,背景变难,以前面区分开来,这个让用户有控制权,让用户掌握所有操作的主动权,感觉产品是为他服务,广告也是自己需要的,广告虽然对网站的生存很重要,但是Taobao的广告还不是很令人讨厌,已经成为首页设计的一分子,这方面他们处理得很不错。

 

 

 

 

 

 

 

Taobao的首页改版,整体来说还是很成功的,功能板块比之前清晰了不少,立体感也强了很多,给人感觉很好,之前的页面感觉信息有点匮乏,而且信息冗余很多,经常进来,就陷入迷失状态(会不感觉有点马后炮的感觉,呵呵,不过这的确是我的最初的感觉:)),首页信息的杂乱,影响了用户最网站忠诚度,现在的改版,整体感觉更清新,页面功能也更明了,对用户的操作也有一定的引导性 整体来说,个人感觉改版还是非常成功的,至少在一定程度上我在首页关注的时间比以前多很多,很多有用的信息,在首页就能找到。目前还在学习相关理论,等书全看完了,再过来分析一下~
分享到:
评论

相关推荐

    parking_android_app

    Onling停车系统:Android应用程序Android应用程序屏幕截图: 登录停车区 登录:能够从应用程序的登录页面创建帐户的用户。 如果用户忘记了密码,他们还可以通过单击“重置密码”按钮来重置密码。 在重设密码字段中...

    sqlserver_indexanalysis

    The information in the DMVs is gathered from when the SQL Server service last started, thedatabase was brought onling, or when the index metadata was updated (such as during reindex operations, which...

    实验室管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

    实验室管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS

    基于java的苹果网吧计费管理系统设计与实现.docx

    基于java的苹果网吧计费管理系统设计与实现.docx

    纸中世界-跳跃游戏.sb3

    纸中世界-跳跃游戏.sb3

    Keysight 网络分析仪新建校准件操作指导

    本操作指导用于在 ENA 系列网络分析仪 E5080B 上自定义校准件。目前 Keysight 网络分析仪的 PNA 系列 N52xxB、P50xx 系列、P937x 系列、PXI 板卡式网分以及 ENA 系列的 E5080B、E5081B 的操作界面均统一到如下界面,操作方式相同。

    调查海域浮游动物各类群栖息密度的空间分布表格.docx

    调查海域浮游动物各类群栖息密度的空间分布表格.docx

    ssm框架Java项目源码-高校毕业生就业管理系统+jsp毕设-大作业.zip

    本项目“高校毕业生就业管理系统”是一套基于SSM框架(Spring+SpringMVC+MyBatis)精心开发的Java Web应用,旨在为高校毕业生、高校就业指导部门以及企业用户提供一个高效、便捷的就业信息管理平台。 系统主要功能包括:学生用户可以查看和发布个人简历,搜索并筛选合适的工作岗位,申请心仪的职位;企业用户可以发布招聘信息,筛选和查看应聘者的简历,进行面试邀请等操作;高校就业指导部门则可以对学生的就业情况进行统计和分析,以更好地提供就业指导服务。 此外,系统采用了B/S架构,用户只需通过浏览器即可访问,无需安装客户端软件,方便快捷。数据库设计合理,数据存储安全,系统性能稳定。 本项目的开发,不仅为计算机相关专业的学生提供了一个实践SSM框架的好机会,帮助他们更好地理解和掌握Java Web开发技术,还能有效提升高校毕业生的就业效率和质量。

    使用 Python 进行视频编辑.zip

    电影剪辑 笔记MoviePy 最近升级到 v2.0,引入了重大的重大变化。有关如何更新 v2.0 代码的更多信息,请参阅本指南。MoviePy(在线文档在此处)是一个用于视频编辑的 Python 库剪切、连接、插入标题、视频合成(又名非线性编辑)、视频处理和创建自定义效果。MoviePy 可以读取和写入所有最常见的音频和视频格式,包括 GIF,并且可以在 Windows/Mac/Linux 上运行,并搭载 Python 3.9+。例子在此示例中,我们打开一个视频文件,选择 10 到 20 秒之间的子剪辑,在屏幕中心添加标题,然后将结果写入新文件# Import everything needed to edit video clipsfrom moviepy import *# Load file example.mp4 and keep only the subclip from 00:00:10 to 00:00:20clip = VideoFileClip("long_examples/example2.mp4").with_subcl

    基于java的视频播放器系统设计与实现.docx

    基于java的视频播放器系统设计与实现.docx

    基于java的车辆出租管理系统设计与实现.docx

    基于java的车辆出租管理系统设计与实现.docx

    mqtt等协议的pcap文件

    mqtt等协议的pcap文件

    小白的Python入门教程部分章节源码.zip

    学习python

    修木工施工规范及流程.docx

    修木工施工规范及流程.docx

    适用于 Windows,Linux 和 Python 3 (3.5,3.6,3.7) 的 Tensorflow Faster R-CNN.zip

    适用于 Windows/Linux 和 Python 3 (3.5/3.6/3.7) 的 Tensorflow Faster R-CNNtf-faster-rcnn使用 Python 3 在 Windows 和 Linux 上使用 Tensorflow Faster R-CNN这是在 Windows 和 Linux 上编译 Faster R-CNN 的分支。它深受这里和这里的出色工作的启发。目前,此存储库支持 Python 3.5、3.6 和 3.7。感谢@morpheusthewhite请注意我没有时间或意图修复此分支的所有问题,因为我不将其用于商业用途。我创建此分支只是为了好玩。如果您想做出任何承诺,我们非常欢迎。Tensorflow 已经发布了一个对象检测 API。请参考它。https: //github.com/tensorflow/models/tree/master/research/object_detection如何使用此分支安装 tensorflow,最好是 GPU 版本。按照说明操作。如果没有安装 GPU 版本,则需要注释掉代码中的所有 GP

    章节2:编程基本概念之python程序的构成

    Python是一种高级、解释型、面向对象的编程语言,以其简洁的语法、强大的功能和广泛的应用领域而著称。它无需事先编译,代码在运行时逐行解释执行,提供了极大的灵活性和快速开发的能力。Python支持多种数据类型,包括整数、浮点数、字符串、布尔值、列表、元组、字典和集合等,以及丰富的操作符和流程控制结构,使得开发者可以编写出复杂且灵活的代码。 Python拥有一个广泛的标准库,涵盖了文件操作、网络通信、文本处理、正则表达式、数学运算等多个领域,为开发者提供了大量的模块和函数。此外,Python还拥有丰富的第三方库,如NumPy、Pandas、Matplotlib等用于数据分析和可视化的库,以及Django、Flask等用于Web开发的框架,这些库和框架进一步扩展了Python的应用领域和功能。 Python在Web开发、数据科学、人工智能、自动化运维和游戏开发等多个领域都有广泛的应用。在Web开发方面,Python提供了Django和Flask等强大的Web框架,使得开发者可以轻松地开发出各种Web应用和网站。在数据科学领域,Python是数据科学家的首选工具,其强大的数据处理能力和丰

    毕设源码-基于python的西西家居全屋定制系统的设计与实现_ijsj--论文-期末大作业+说明文档.rar

    本项目是基于Python语言开发的西西家居全屋定制系统,旨在为家居行业提供一个高效、智能的定制解决方案。项目涵盖了从客户需求分析、设计方案生成、材料选购到最终订单生成的全过程,力求实现家居定制的数字化和智能化。 在主要功能方面,系统具备强大的客户管理模块,能够详细记录和分析客户的定制需求。设计模块则采用先进的三维建模技术,为客户提供直观、真实的家居设计方案预览。此外,系统还整合了丰富的材料数据库,方便客户根据自身喜好和预算进行材料选择。 框架方面,项目采用了B/S架构,确保了系统的稳定性和可扩展性。后端使用Python的Django框架,前端则结合了HTML、CSS和JavaScript等技术,实现了用户界面的友好和响应速度。 开发此项目的目的,不仅是为了满足家居行业对个性化定制的需求,也为计算机相关专业的学生提供了一个实践和学习的平台,有助于提升他们的实际开发能力。

    简单连接到 Binance Public API.zip

    Binance公共API连接器Python 这是一个轻量级库,可作为Binance 公共 API的连接器支持的 API/api/*/sapi/*现货 Websocket 市场动态现货用户数据流现货 WebSocket API包含测试用例和示例可定制的基本 URL、请求超时和 HTTP 代理可以显示响应元数据安装pip install binance-connector文档https://binance-connector.readthedocs.ioRESTful API使用示例from binance.spot import Spotclient = Spot()# Get server timestampprint(client.time())# Get klines of BTCUSDT at 1m intervalprint(client.klines("BTCUSDT", "1m"))# Get last 10 klines of BNBUSDT at 1h intervalprint(client.k

    离线安装eclipse的aptana插件详细中文最新版本

    Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。 Aptana的特点包括: 1JavaScript,HTML,CSS语言的Code Assist功能。 2Outliner(大纲):显示JavaScript,HTML和CSS的代码结构。

    学习自律养成小程序 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

    学习自律养成小程序 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS

Global site tag (gtag.js) - Google Analytics