惊!Google+抄袭Facebook页面?交互设计

| 收藏本文 下载本文 作者:StanGioro

今天小编在这给大家整理了惊!Google+抄袭Facebook页面?交互设计(共含9篇),我们一起来阅读吧!同时,但愿您也能像本文投稿人“StanGioro”一样,积极向本站投稿分享好文章。

惊!Google+抄袭Facebook页面?交互设计

篇1:惊!Google+抄袭Facebook页面?交互设计

Google+在社交媒体里可能还是一个小孩子,但是这并不意味着营销者会忽略这个能够为他们带来利润的地方,他们会不断尝试寻求如何最佳利用这一平台来推销他们的广告,

EyeTrackShop一项新研究显示了用户在浏览Google+和Facebook上的广告时的观看顺序是何种模式。而这一调查结果一定会让那些广告商睁大眼睛,注视着这一结果的产生,因为他们也很想知道用户在浏览这两个网站时他们的关注点是以何种顺序转移的。

这家相对较小的瑞典研究机构在历时两天,研究了54名志愿者后发布了研究报告。在研究期间,该机构利用网络照相机跟踪用户的眼球运动,以此来估计Google+和Facebook网站上那一部分会更加吸引人,

在研究期间,EyeTrackShop发现两个社交网的网站运行模式几乎一样。用户都是首先关注中心区域,也是原创内容的所在,然后人们会从页首开始浏览并从左至右阅读,最后他们会将目光集中在右手边栏部位的广告。

有一点奇怪的是两个网站工作模式很相似,但是谷歌很可能再涉及Google+时大量的借鉴了Facebook,并且学习了Facebook将广告放置于对网页上原创内容影响最小的位置上。

看一看下面的模式,了解一下人们如何浏览Google+和Facebook,以及他们最后如何为广告进行排序:

Facebook视觉关注顺寻

Google+视觉关注顺序

Facebook 注视顺序

Google+注视顺序

篇2:远观页面评估视觉设计交互设计

作者:Dmitry;译者:UCD翻译小组, 笑炊

原文地址:Take a Step Back to See the Big Picture

译文出自:ucdchina.com/post/1531

我发现,当你做Web设计──或者其他任何涉及到排版和界面设计──的项目时,眯着眼睛,或者从一定距离的远处检查你的设计效果会很有帮助,你需要做的,就是眯­着眼睛,或者走得远一点,直到你观察到的内容开始变得模糊。

当内容页面变得模糊一片时,你就能看到页面上的空白部分是如何把它们隔离成各个小方块和小组的。现在,你无法看清页面正文,你看到的是各个文本组,以及一些你排版时划分的小方块。

好了...,这就是你想看到的。如果你只看到混沌一片,就表明页面各元素之间的空白没有起到应有的效果。

下面我们通过举例来阐述这一点。这是一个页面空白运用得不好的网站(Listmixer ):

如果你努力地眯起眼睛直到内容开始模糊,我们将看到这样的效果:

两大块文本区域,

说明过多的文本内容被堆到了一块儿。理想情况是,你希望把页面分割成不同的小方块,以方便没耐心的用户快速浏览。当需要阅读太多东西时,

这类用户往往是第一个放弃并选择离开的用户。

下面是一个在Opera浏览器下,较好地利用页面空白的例子:

如果我们眯着眼看:

文本区域被清晰地切分成为若干互相独立的小方块。这里的空白有效地分割了内容块,并分给每一个小方块足够的伸展空间。

有时候,这种方法也可以用于审视一个页面视觉上的美观度──观察设计所传达出的整体感觉。当你的设计在CSS样式库或其它博客文章中以缩略图的形式展示出来的时候,它可能被缩小到很小的尺寸,内容也变得模糊。那个时候它看起来怎么样?当视觉设计变得­很模糊时,是否依然会保持其独特的样式、形状、色彩主题?

远观你的设计同样可以让你站在新用户的角度考虑问题。他们尚未阅读文本,并不清楚网站的各个各小方块是什么,文本写的是什么,——他们只看到由各种元素组成的一个大页面。

然后呢,他们将首先关注什么?什么会吸引注意力?我找到了上面这种方法,让你了解到,是什么元素在这个页面突出,以及页面空白如何更好地起到隔离各个小方块的作用。

篇3:电子商务网站产品页面设计i模式交互设计

此文主要讨论电子商务网站产品页面设计模式,从产品页面元素、设计理由,解决方案等对产品页面设计进行分析,以客观的思路来探讨如何设计出好用的产品页面

产品页面作用

用于显示在一个电子商务网站中的产品信息,包括商品制造商,品牌,产品说明,价格以及用户评论等。

产品页面元素与解决方案

目前产品页面都会包含以下一些必要元素:

产品名称

产品图片

价格

“添加到购物车”或“购买”按钮

此外,下面的元素也经常出现在产品页面中:

折扣价格(通常为红色,与原价进行区分,原价一般都有横线)

详细的图像(大图片)

产品型号(大小,颜色等)

产品样式图片(不同颜色或图案的产品图片)

库存量

交货时间

“加入收藏”/“收藏夹”按钮

缩放功能

简短说明

更长的描述

产品规格/详细资料

产品标签与关键词(比如“畅销书”,“热销商品”等)

产品ID,

特别优惠(购买此产品可以免运费等)

支持信息 – 包括厂家维修电话号码或电子邮件地址

分享按钮(比如 ,豆瓣等)

产品页面设计目标

产品页面的主要目标就是将感兴趣的访问者转换成付费用户。说服用户作出决定购买一个或更多的产品。

如何增加产品页面转化率

有几个因素可以调整,以增加转换。包括技术和设计模式:

使用高质量的产品照片。照片可以包含的两个功能:(1)设置语音(以语音形式介绍产品的功能与使用范围)和(2)让客户可以从不同角度观看产品图片

篇4:从产品角度看GOOGLE和百度交互设计

谷歌离开中国,从此浏览器的地址栏里只有www.google.com.hk了,在这两年不到的时间里,当我想搜什么的时候仍然习惯性的输入谷歌的网址,当然肯定会跳转到HK了,不过有些时候因为电信限制的原因无法访问,无奈只有使用百度,于是常问自己为什么就那么喜欢用谷歌,个人感情的原因?念旧?本人也没和谷歌谈恋爱,哈哈,玩笑了,思考之下觉得该分析一下原因了,从产品经理的角度,我们撇开搜索质量不谈(已经有很多对比两家搜索质量的文章就不再赘述了),就从产品设计或者用户体验的角度去看看谷歌和百度在几个主力产品上的差别,做一个回合数较少的PK吧。

第一回合:首页

谷歌首页:

百度首页:

我们先看搜索分类和其他工具:

谷歌的搜索分类是放在屏幕顶部的工具栏(暂且叫工具栏)里

这里除了搜索分类还有更多产品、gmail邮箱、用户登录、选项图标

优点:搜索分类和其他产品的位置很突出,而且“更多”和“选项”按钮的表现形式为弹出菜单,因为放在最顶端所以菜单不会影响用户体验,最大的好处就是随宽屏显示器的普及,上面的黑色工具栏里可以放的东西可多可少,控制起来非常方便,灵活性和扩展性都很好。

缺点:因为离搜索输入框较远,用户有时候会忽略工具栏里的新产品。

百度的搜索分类是放在搜索输入框的上面

而要使用其他的产品则要点击“更多”进入更多产品的页面才能一览其他,而用户登录、注册、设置则是放在浏览器的右上角位置。

优点:分类切换很方便,大部分的功能集中在搜索输入框的周围,很容易被用户注意到新产品。

缺点:由于空间被局限在输入框周围导致在功能表现的时候不能采取像谷歌那样的下拉菜单的形式,所以在首页的内容容量方面收到了局限,在以后新产品越来越多的时候就会带来拥挤的问题,用户体验就会收到影响,

再看其他方面:

谷歌在搜索栏的右边还有两个功能链接,一个是高级搜索,一个是语言工具,高级搜索不用解释了,而语言工具是个很方便的产品,使用频率很高所以放在了一个很容易被用户看到的地方,我还记得以前用这个语言工具的时候还需要到更多里去找,也不记得啥时候谷歌把这个放到这里了,但是从这点看,谷歌是非常重视用户体验的。

百度不用说了,基本功能都放在搜索框周围,所以反而显得没啥重点了,要用更多产品直接点更多可以看到,要想看其他更多的网站可以去hao123,这反倒符合中国人的使用习惯了,就是多而全就行,不用百度推荐啥了,相信用户可以很快找到,这样其实也不能说不重视用户体验,但跟谷歌的重视程度比起来,就显得略逊一筹了。

首页点评:

两者的主要差别就在工具栏及其功能的布置上,谷歌放弃传统思想(以前跟百度差不多),集中放在最顶端,这样的想法其实与苹果电脑的操作系统是类似的,利用下拉菜单使用户可以快速的使用更多谷歌的产品,而不是跳转到另一个页面后再去选择;百度的排布方式比较传统,可能更加符合中国人的使用习惯,但是在越来越重视用户体验的今天,百度的用户体验方面做得比谷歌还是有一些客观差距的。

客观说百度和谷歌的首页在一些细节方面还是存在差异的,比如高级搜索功能我在百度首页就找不到,比如百度首页所有的功能链接鼠标反应均没有做,即鼠标移上链接后无任何变化,而反观谷歌则在细节上做的很好,弹出菜单竟然还带有阴影效果,很细致很漂亮,再加上谷歌出了名的logo变化(根据一些世界性的节日或者大事件会做一些很有意思的图片,跟自己的logo结合起来),实在很吸引人。

第一回合首页的较量我个人觉得谷歌略胜百度。

结语:

其实做产品的用户体验打个比方就好像感受汽车的内饰一样,用料再好用户也未必就觉得舒服,只有在驾驶的时候各个功能按钮合理放置再加上用料的恰到好处才能叫做舒服。

小处成就大事,细节决定成败。

篇5:隐藏在iOS5抄袭背后的设计思想交互设计

6月7日,一群copycats守在电脑前面期待着WWDC上乔老大再一次改变世界,以便自己也能学点什么,却发现只能一拍大腿:“坏了,他成copycat了”,

今年的WWDC发布了200项针对iOS5的更新,现场展示的10项更新包括:

1.“新的Notification Center”

2.“统一的杂志管理中心:Newsstand”

3.“深度整合的Twitter”

4.“强化的Safari”

5.“内置的Reminders”

6.“强化的Camera”

7. “优化的Mail”

8.“免电脑同步”

9.“社交化的Game Center”

10.“内置的iMessage”

在这些Apple引以为傲的新特性里,依稀能看到很多竞争对手的身影:Android的新通知系统、Kikmessager的即时消息、Google的云同步、Windows8的分离式键盘……

是苹果在退步么?已经不能做出创新的玩意儿了么?国外大公司不是一直很注重专利诉讼的么?老乔脑袋坏了么?其实,老乔在下一盘很大的棋。

专利诉讼本身就只是一种打击商业对手的武器。对于苹果来说,手里捏着一大把敌人的小辫子,对手即便发现苹果抄了自己,也不敢来告。专利已经成了核武库,一定要有,但基本不会真用,更多的是吓唬别人。我就抄了,怎么着吧!

专利仅仅是一种赢得商业利益的手段。对于苹果来说,此时重要的不是用憋屈的步伐通过对手的专利地雷阵,而是完善iOS的生态系统。在这一点上,苹果有自己核心的设计思想。为了达成该目的,自然是怎么好用怎么来。通过分析WWDC上着重展示的10项更新,我个人举得苹果应该有这样的设计思想:

1、为源于生活的需求革新效率,而非重新发明需求

用户生活在客观的现实生活中,他们的一举一动都由“需求”在驱动。当Nokia还在以换壳为本时,苹果就为了帮助用户满足“随时随地获取信息、处理事务”的需求而发布iPhone。

需求是一直存在的。所以,产品应做的,是分析这些需求在以往被满足时存在的缺陷,用新的设计方案和技术手段更快更好更省心地满足它。而非臆断出一些功能,再去招揽用户来用。教科书上曾经有一个马先生讲过,这就叫“提高生产力水平”。

在iOS的更新中,苹果以用户使用手机的实际情景为出发点,选择了“通知中心”、“杂志中心”、“Safari”、“记事本”、“相机”和“无线同步”作为优化点。这是因为这些都是用户在使用手机时能够明显感知到的痛点。

消息中心是第一个登场,但也是抄袭感最强的更新。iOS早期,只支持单任务,并且所有的消息推送都需要官方审批,所以简单的警告框提醒还说得过去。但进入多任务时代后,警告框就很吃力了。因为提醒是有强弱之分的。在运行某程序时,来自其他程序的提醒以警告框的方式出现就会非常干扰当前任务。为了摆脱这个诟病,iOS需要轻柔的提醒方式,以及一个暂存弱提醒的地方。而且,这个地方需要在任何位置都轻松唤出。从上往下被Android用了,从下往上被Palm Pre用了,依据iOS的界面逻辑,左右是平级的,不能用,

所以… 抄吧,谁怕谁啊。但苹果不会抄的那么没品。它将消息按照归属程序做了聚类,查看更方便。同时,将轻量的widget放在这里,以便用户经常查看信息。

浏览信息是手机的强项,但管理却不是。所以,苹果说:“我来帮你善后”。于是,就有了Newsstand。用户不必再一期期地去下载杂志,归类,分组。有了Newstand,只需要订阅就可以了。这就是Apple提升的生产力:用更高效的方式解决已有的问题。

“Safari”、“记事本”、“相机”和“无线同步”的优化也基本遵循同样的思路。

手机更多的用于碎片时间,阅读环境很不稳定。于是Safari就增加了Readlist的功能,帮助用户暂存没读完的页面。

糟糕的记忆力需要人们随时记下可能遗忘的东西,但每多带一件东西就多一份重量。而手机是最随身携带的私人物品,所以老乔决定把它列为手机的基本应用,减轻用户的负担。同时,它还支持云同步,省去了用户在多台设备间倒腾待办事项的麻烦。

抓拍生活中的趣事是相机应尽的责任。但按照现在的流程,掏出手机找出“相机”再打开它,镜头早就错过了。于是苹果就简化了打开相机的流程,直接一步到位。

其实“创新”并不遥远。它需要对生活的热爱,用心体会其中喜怒哀乐。只要思考如何才能让生活更美好,就是在创新。永远不要为了创新而创新,那只会刻意增加无用的“差异”,让产品支离破碎。

2、One Person,One Life

每个人的人生都应是唯一且统一的。人们在这个唯一的人生里,去和其他人的唯一的人生交流。但是,当代人的人生都被隔离在一个又一个产品中。一个人在甲产品中做的事儿,交谈的人似乎都与乙产品的世界无关。

生活想回归简单,就需要重新整合这些产品中的信息,打通围墙。用户,只不过是要过用这个产品去过他的这个生活,和他在现实世界里认识的交流。我们不要把用户搞得人格分裂啊。人只有一个,办公室里的小Q就是家里的小Q,就是飞机场候机的小Q;电话那头的小Q就是对话框那头的小Q,就是Google Latitude里地图上标的小Q,就是twitter上刚刚更新的小Q。

为了帮用户整合支离破碎的世界,苹果强化了云同步:用户不必再去想如何把一个个世界的碎片粘起来。为了更无缝的沟通,苹果对twitter做了深度整合:用户不必再“到twitter的世界里”更新生活。这样,Twitter已经融为了生活的一部分。它是嘴巴的自然延伸,是和视听嗅味触一样感受世界的超能力。

3、Be the Trend,or Push Forward the Trend

这应该是下很大的棋时所应有的思想。拥有海量的用户有两种方式,一种方式把服务做到极致,让用户非常需要你的产品,让自己成为潮流。但这受限于时机、受限于能力、受限于战略眼光,所以并非总是成功。另一种是,就是为别人的潮流“推波助澜”,成为用户追随潮流的最佳工具,最佳拍档。给沙漠里淘金热的人送水也是能发大财的。要对用户的需求敏感。

让苹果去重建一个twitter、facebook或是flickr,都显然是不可能的。所以,苹果要让iOS设备成为twitter、facebook和flickr用户的最佳拍档。于是,发推更方便啦,手机上也能简单编辑照片上传啦,掏出手机抓拍照片也能在3秒内搞定啦。那么,不用iPhone还用谁呢?

只要是能让用户觉得iOS设备很方便,并且苹果也能够方便复制的,乔布斯就绝对的毫不留情。他要把iOS打造成完美的生态系统,用户可以用它吃喝拉撒不出门。还有什么比这依赖度更高的么?所以kikmessager类的短信工具,wifi同步的工具等等,都在劫难逃。苹果搞出App Store弄开放平台,绝不是良心发现。它只是为了让自己的生意更红火罢了。

设计不是简单的画个线框图,流程图,加个阴影,上个高光。它的核心在于如何利用有限的资源让生活更美好。所以适时把自己从鼠标、手绘板上提起来,从生活的角度反思下设计的本质,也会有助于回到零点,寻清设计的方向。

篇6:WP8新界面:神抄袭的逆袭?交互设计

WP8发布后,很多人都愤恨不已,个中原因除了神不给自己的机子升级、将来的神应用不能运行在WP7以外,WP8的新主页界面也为一些用户和设计师所诟病:为了推出所谓的自定义livetile大小和颜色功能,WP8用livetile覆盖掉了整个屏幕,并去掉了主屏幕右边的小箭头,全盘否定了自己在Metro UI原则里所秉承的留白设计,整个界面被网友们笑讽为中国民间游戏“华容道”的翻版,

这样的界面孰优孰劣?好的方面讲,它是满足了用户自定义livetile大小的期望和需要,毕竟对于一些不常用应用,pin在WP7的桌面上是占据了太多空间,放在程序列表中又不易寻找和点击。能够自定义大小,用户就可以按照应用的重要程度来布局自己的手机桌面内容。但推陈出新不一定非得弃马丢车。总体而言我认为这是个见仁见智的问题,因为这次的发布会上WP8并没有揭开关于它的新界面的全部特性。

所以我比较感兴趣的是,按照WP8的思路接下来这个界面之后的设计会是什么样子。那天看完WP8发布会后,我总觉得这个设计在哪儿见过,于是搜索了一阵,结果就发现这个新界面和日本KDDI INFOBAR手机的iiDa UI几乎如出一辙(如下图)

图 INFOBAR iida vs WP8

INFOBAR是一款Android系统的手机,概念来自日本运营商KDDI,Sharp制造,也是我最欣赏的日本设计师深泽直人的作品,而它的UI则由日本设计师Yugo Nakamura(中村勇吾)操刀。

众所周知,WP7是10月11日发布的,而INFOBAR则发布于205月下旬,明显是晚于WP7的,设计师本人也直言该界面是根据WP7的图标排列规则而做出的设计,所以非常像WP7,

因此,在当时说iida的UI“抄袭”WP7并不为过。

尽管如此,iida UI和WP7的Metro界面有相似之处,但仍有许多特性明显是独创的设计:

整个屏幕被表现应用内容的方格覆盖

长按方格之后,可以拖动排序方格和调整方格大小,并通过右滑手势建立分隔将方格分组

点击主界面下方的向上小箭头或长按分组标题可以在分组之间快速跳转

点击分组标题右边的小箭头可以收缩和展开分组

大尺寸方格中的内容可以直接点击操作,如切换显示风格和直接播放歌曲而不用进入应用程序主界面

可以将任意数量的图片方格pin到主界面上,并根据需要自由布局和整理

在主界面下,有通知来的时候,方格中的图标会抖动并在顶部显示通知

在主界面下,向左滑动显示全局搜索

通过实体menu键来添加方格和设定界面主题

可以说,iida UI不仅对于千机一面的Android手机而言是一个创新,而且对于当时基础功能缺失的WP7其实更是一个突破。

现在回过头来看WP8,整个新界面几乎就是反抄iiDa UI,曾经WP用户引以为傲的个性鲜明的Metro UI及其留白设计原则就这样不明不白地被微软Windows Phone设计团队抛弃了——不仅抛弃了WP7,抛弃了诺基亚用户,也抛弃了自己。虽然这次发布会只公布了主页面和可以自定义Livetile大小的功能,但接下来呢?INFOBAR上的设计会不会在WP8上重现?

让我们拭目以待这场神的“逆袭”。

篇7:眼动仪研究如何服务于“页面布局”交互设计

一 用户是如何查看网页的

如今大多网页设计让人觉得杂乱,主要原因之一就是“优势点”过多,当只需要突出一两个优势点时还好,但当网站充斥着5个以上的“重要内容”时,用户能留下的印象也只有“杂乱”了。因此设计页面布局需要明确根本目的,一是用户目的,二是网站目的。以及指定网站的页面优势区。

有些时候,用户的目标与企业的商业目标相符,比如一个买了ipod的顾客会很乐意接受你给她推荐的配件并断然购买之;但更多时候用户与企业目标不符,比如看报纸的读者不想看到广告,会竭尽全力避免广告。

根据用户面对网页时的目的不同,浏览模式也大不相同。此文重点分析了几种浏览网页的行为:

1、查找新闻

在此处作者举了3个例子,都是针对特定用户的眼动轨迹注视点进行分析。发现这3个人各有自己的观看特点,有的人看左,有的人看中,有的人看右。【真是令人绝望,这让人怎么总结出模式来嘛!说不定这还是挑的眼动轨迹最清楚中的3人来看的,其他的根据眼动轨迹根本就难以自圆其说。不过从此处也学到了一个描述方法,就是挨个注视眼动轨迹,并找出一堆一堆的,至少,这能说明该用户的关注阶段所对应的关注区。】

2、浏览购物页面

在有购物任务(选择物品并完成购买)的这个案例中,举了较多的用户作为例子。但同样的存在有“百花齐放”的问题——用户的注视模式不尽相同,有的看广告图,有的看上面的水平导航,有的看左边的菜单。不过作者还是想方设法总结出了几个相同点,其实在我看来只有一个相同点,也就是模糊的雪景图片都被大家不约而同地忽略了。然后作者就得出结论说,清晰的图片引人注目,然后又根据看菜单那俩人的情况得出结论说菜单上加粗的选项也有人看。

3、购买特定商品

此行为分析中用了3个例子。因为有要购买商品的任务在身,大家都查看了水平导航。不过每个人还是有不同的模式。有的就专心只看了水平导航,有的盯着搜索框看了好几眼,有的也瞅了一下下方的大广告。然后作者又据此得出一个大白话结论就是如果任务特定,那么人们可能会倾向于查看相同的基本区域,不过区域里面又会有所不同。【这不是明摆着的吗,你测这么几丁人,页面又那么普通,大家的注视点要是如出一辙,那才奇了怪了。小样本测试的悲哀,555】

4、执行特定任务

例子是寻找一个公司的董事会团队。由于任务很有难度,信息深藏不露,大家八仙过海各显神通。有的人察觉到了这个颜色差别,几眼之间就找到了目标物——主菜单,有的人则是闪转腾挪了半天也无果,最后把目光投向了搜索。作者结论是要确保人们看到网站想让他们看到的。因此提出了设计标准之说。

用户期望的设计标准:

显而易见的菜单栏,贯穿页面顶部

网站徽标位于所有页面左上角

搜索输入框位于所有页面右上角

登录、注销位于所有页面右上角

功能导航位于页面顶部或最下面,比主导航略小或视觉感觉略弱。

【一言以蔽之,要符合一般网站的常规,打破用户心理预期是要付出代价滴!除非你做的是专卖店,开超市就要有开超市的样子,不能让人来了找不到东西】

作者还谈了一下企业内部盲目往网站这片“公地”无限制增加东西的现状【看来外国人也未能免俗】,建议解决之道是搞一个“网站设计指南”,简洁高于一切,如果有人再提无理要求就祭出这把大旗,令其知难而退,不了了之。

【收获:

1、学到一种描述方法,总结如下:

“某某先是看了……,然后也向(上/下/左/右)注视了……,随后看向……,也许她觉得(大胆推测之)”

“某某注视了……可能她觉得(大胆推测之),于是她跳过了……,在(底部上部中部)她看到了……(目标物)”

“某某先看的是……看到这里没有啥啥啥(大胆推测之),她的视线就直接向(上下左右),暂停在……,随后她跳过……,看了……,之后她向(上下左右)看去,可能她觉得(大胆推测之)”。

2、注视点轨迹图是用来说明具体观看情况最好的工具,既清晰又具体,根据它也可以描述区域。这篇的副标题可以叫《如何解读轨迹图》

3、我突然意识到一个问题,这些注视点之间的时间距离是等距的吗?是否能根据时间是否等距也琢磨出点什么来呢?不然你凭什么下结论说用户从一个点到另一个点能“只看了一眼就像被火灼烧了一样马上移开了视线”?】

二 组织好页面的秘诀

总结了几个秘诀:

1、简洁的页面

举了3个例子的热力图,从热力分布比较均匀并结合用户事后对此购物体验高度评价的事实,得出结论是“用户想浏览这个网站的整个主页”【莫非这是网站的目的?】而从网页本身的分析来看,其符合常规并重点突出、页面简洁是首要特点,

提供了一些设计tips:

空白区、内容框和色彩有助于用户看到。要勾划出这些区域,不要让内容太杂乱。

信息较多时要呈现一致的格式。

每个版块都要有标题。

举了一个反面例子,菜单重复出现,在页面顶部和左侧,这种浏览方式无法让人感到愉悦。

2、页面内容的多寡对注视点数目的影响有限

测试页面凌乱对用户的影响,引入了页面密度的概念,主要是通过数量来反映的,统计页面上各种元素的数量。作者用密度等级和注视点平均数量来比较。发现页面密度对注视点数目影响不大。【页面密度的概念很有新意,但用注视点数量和它建立相关性是不是太牵强,注视点的多与少能说明什么?有意义吗。我觉得用热点区或用户满意度来建立相关性倒更靠谱一些,毕竟网站设计的初衷不是要人多看几个点吧】

3、优势区

与页面密度相比,设计元素更重要。具有高度一致性的页面,即使充满很多内容也能让用户的浏览顺利愉快。

同2点所讲,页面密度和注视点的关系,在此处得到应用。此处的取向是,因为带有任务,所以在完成任务前注视点越少,说明页面可用性越高。

有两个总结点:

“色彩不经意间就提升了彩色框中内容的重要性。【这确实是个规律】用户体验并没有因为视觉渲染而提高,因为最重要的内容没有出现在用户期望的地方。【这取决于任务。注意设定的需要用户去完成的任务真的是网站的Top任务,不然就会喧宾夺主】”

眼动仪研究可取得数据:(1)用户事后感受,(2)用户对该页面浏览结束时是成功完成状态还是失败放弃状态,(3)完成时所用的时间,(4)判断注视点多是积极的注视(期望查看)还是无奈的寻找(过度查看)。(5)涉及多个页面的切换时,在某个页面注视点多,说明比较相信这个页面能完成任务。

“它让用户在这个标题下面的褐色框内花费了很多注视点,而实际上他们所需的信息并不在那里。”【对这个任务来说显然是沮丧的,但这是否意味着对另一个任务来说,这个页面布局却是非常有效的呢?这是否又落回到页面需要完成多个任务时,到底以谁为最优先,以谁为优势区的初始矛盾?】

首要任务概念。关注首要的任务。

有时铭记设计原则也pk不过用户的惯性行为:找人口数据时,用户对页面右方的目标值视而不见,一头扎进了搜索。

【网站用户的特点:1、惯性行为,2、广告盲】

导致任务失败的因素:

(网站因素)

优势错配:网站布局没有把此任务放到优势区

术语不清晰:用户看了也不知道就是要找的目标

广告盲:形式和位置貌似广告的,被自动忽略了

用户先前的经验:是搜索型还是浏览型用户

惯性行为:钻牛角尖

页面优势区域推荐。通常在水平导航和左边的菜单背景的结合处部分,是最高级别优势区。

4、合理分配版面

“如果把很大一块页面分配给人们并不注视或很少注视的内容,称为屏幕版面误分配。【我情不自禁地想起了网厅那个巨大的、闪烁不止的广告位,除了阻碍人们找到自己真正想找的东西之外,似乎别无它用】如果由于这个问题导致人们跳过一些有用的信息,那问题就比较严重了。【越说越严重了】如果主页呈现的是大量的横幅条幅和没有用的图形,则问题尤为严重。由于用户会把最初25%的时间用于访问网站的主页,因此这是主页设计的大忌。【救救网厅吧!】”

举的那个例子,被作者戏谑地称为“典型的越障训练的例子——页面里充满了用户有意避开查看的特性。”【一幅热力图就能说明问题了——你有滥用优势区的权利,我有无视广告块的自由】

3个例子当中,页面的主要图片都是用户回避的对象。

最糟糕之处就是图片占用了宝贵的优势版面,而让更有用的信息只能显示在页面的下一屏,或者图片传递的信息太微弱或是错误的,用户还要费劲避开。【这说的简直就是。。。】

5、突显最重要的元素

分辨最重要的任务,知道对用户来说页面上哪个东西是最突显的元素。

6、误看元素的代价

突出了你没想突出的。比如在解释说明页面也让一个巨大的Free明摆着来吸引人。太考验用户了!

7、用眼动追踪改善页面布局

建议进行误看元素研究。

四个定量数据来源:

任务完成时间

成功率

错误:确实点击走向了错误路径

满意度:对界面的体验评级

(本文内容来自对《用眼动追踪提升网站可用性》一书第三章“页面布局”的强力研读)

(用户因素)

篇8:开心网的页面是最彻底的“F”交互设计

4月,美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究》报告(原文:F-Shaped Pattern For Reading Web Content),

报告中提出,大多数情况下浏览者都不由自主的以“F”形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。

再看开心网的页面,用3条导航在每个页面都构建了一个大“F”。

顶部导航是与“交流”相关的频道,包括好友列表、群组和消息中心,这些都是要与其他用户 的产品。 左侧导航是用户个人操作的产品,包括日记、照片,及其他新增的组件。在频道的页面内,大部分又都有一个相同样式的页卡标签,通常为“我的XX”和“好友的XX”,

这三条导航构成一个巨大的“F”型框架,网站不同页面保持结构一致,使得用户在网站使用过程中的学习成本最低,一次经验,全站通用。同时让用户更愿意尝试开心网上其他产品,因为用户预期中其他产品的使用方法相同,不需要一个重新的学习过程,尝试的成本较低。

而不同产品页面结构各异的网站,用户使用任何一个产品和频道都是一次全新的学习和摸索过程,甚至连找到一个返回链接,都是一次大伤脑筋的走迷宫,这会让用户产生巨大的挫折感,更不愿意去尝试该网站的其他产品,因为用户不知道下一个产品又将是怎样一次令人头痛的探索历程。

从上图中我们可以看到,页面中大部分区域用户都不会去关注,所以在单个页面上,开心网的每个页面内可以操作和点击的链接都非常少,且集中大“F”型热点区域。这向用户传达的信息是:在这里,你只需了解极少的操作就可以使用这个网站。

而那些内容丰富,堆满链接和按钮的网站页面中,也许整个页面只有一个链接对用户是有价值的。但是用户来到这里,既要有足够的智慧和眼力排除所有干扰信息去找到那个唯一有价值的链接,同时还要面对如果我不点击其他的链接是否会错过某些重要信息的困扰和焦虑。

页面中哪些是无效信息,网站工作人员最清楚,但是他们却把排除干扰信息这种复杂的工作交给用户,将用户逼入一种烦躁和焦虑的困境中。这种痛苦的使用体验只会将用户全部赶走。

原文链接:www.niest.net/?p=152

自:认真不是好事 [www.niest.net]

篇9:日历与任务的区别,及Google日历整合任务交互设计

我们常常会用日历和任务来安排自己的工作和日程,比较常用见的有Google Calendar,Outlook等,一直以来存在着讨论,就是日历和任务这两个东西区别是什么,他们究竟是应该放在一起还是分开。(鸦:为什么不能合到一起?)

日历(Calendar) 和任务(Task)虽然比较类似,但有着3个大的区别:

1. 日历和时间紧密相关的,任务和时间的关系较弱

日历一般是用来安排在某个时间做什么事情,比如8:00起床,10:00 - 11:00和JJYY开会,12:00和帅哥吃饭,晚上20:00和FRJJ看电影……这些是紧密和时间相关的,指在这个时间,我要去做什么事情,因此日历还常常伴随着闹铃和提醒。

任务则一般表示我有什么事情需要做,比如“写完本月的报告”,“和汪总请假,准备五一出去玩”,“找个时间去看望大姨妈”,“买一个新的登山包”……这些事情是需要去解决的,但比较灵活可变,并不需要十分精确的说明我一定要在哪个时间内解决。

2. 日历很精确,弹性小;任务较模糊,弹性大

对于日历的日程是十分精确的,比如10点到11点开会,用户的回答只会是“去”,“不去”,“也许”,弹性很小,

而任务则弹性很大,比如“和汪总请 假”,汪总可能很忙,神龙见首不见尾,就很难订一个精确的时间去完成。只能类似是像记事贴那样贴在墙上,时刻提醒一下,也许吃中饭时遇见汪总就顺便请好假 了。对于任务来说,比较有意义的状态只会是“完成”,“未完成”。

3. 日历不关心结果,任务注重结果

对于日历的日程来说,时间一过就没有任何意义。8:00起床,你只要在这之前决定是“执行”还是“不执行”。过了这个时间,日程就没有任何意义了, 它只是提醒你应该要做什么事情,至于结果怎样无所谓。你可以继续制定新的日程,或者修改日程。而任务是注重结果的,完成或未完成,进行的状态怎样,这些非 常重要。

从上面我们可以看出日历和任务的区别,因此完全把它们放在一起可能产生各种问题,针对它们各自的特点进行设计会更好。

Google日历中对任务的整合

Google Calendar是目前最好用的日历之一,大家应该比较熟悉。在近期的更新中,Google Calendar把任务(Task)整合进了日历,通过点击左上角的“Google工作表”可以打开这个功能。

可以看到虽然是整合,但任务和日历还是在不同的区域区分开来,除非指定一个任务的具体时间,任务才会出现到日历中,具体的细节大家可以去试试看。

最后,如果你还没有使用过日历的工具,强烈推荐你试试看:)www.google.com/calendar/

本文来自:www.far2go.cn/blog/post/Calendar-and-task.html

交互设计面试自我介绍

方便和交互设计

交互设计专业就业前景

不同声音,一个设计交互设计

电子商务网站商品信息展示页面设计

全屏弹出广告交互设计探讨

页面点击分析工具设计与实现

我是我产品的用户交互设计

维特根斯坦&对设计和体验的思考交互设计

关于推荐引擎的5个问题交互设计

惊!Google+抄袭Facebook页面?交互设计(精选9篇)

欢迎下载DOC格式的惊!Google+抄袭Facebook页面?交互设计,但愿能给您带来参考作用!
推荐度: 推荐 推荐 推荐 推荐 推荐
点击下载文档 文档为doc格式

猜你喜欢

NEW
点击下载本文文档