TV App设计经验谈——10个可向游戏界面设计学习的地方

来源: 徽徽的UX世界

TV App的设计,相对来说是一个全新的领域,有哪些领域可供我们借鉴?

游戏主界面有2种形式,全屏的和窗口的,全屏的独占式游戏主界面曾经是唯一的形式,也是玩家游戏时关注的重点,游戏内的其他模块,比如个人信息、物品栏、地图、公告、技能等,都在固定位置以悬浮的方式,占据屏幕的边角,并且这些模块是可以缩小和隐藏的;而需要及时处理的通知,以及一些需要复杂操作的模块,如物品的交易,技能的升级等,则以弹出窗口的形式出现,他们通常占据屏幕不到1/3的空间,并且可以立即关闭。

大家熟悉的TV也一样,画中画之类的玩意儿虽然新鲜,但是使用场景少,使用频率低,用户在使用TV的时候,也是用独占式的全屏,而电视台标、频道号、字幕、滚动广告等,通常也是在TV屏幕的边角,在TV本身的设置中,频道号也是可以隐藏的;另一方面,因为内容提供商——电视台的盈利模式缘故,这些滚动广告不可隐藏或缩小,甚至用户需要忍受他们TV的全屏,都被广告所占据,当然,用户也可以选择——换台。

与TV不同,电脑APP天生就不是独占式全屏的,天生就是为多任务设计的;而手机、Pad上的App,却是天生独占式全屏的,但是它与TV App的不同之处在于,它们的屏幕要小得多,在家用电视屏幕开始不断增加到40寸及以上时,3.5寸、7寸、10寸的手机屏和Pad屏,大约就是足球和鸡蛋的关系。而相对来说,游戏在电脑、TV上,已经有了至少十多年的经验,不管是曾经的《传奇》,还是曾经的小霸王游戏机,抑或是Wii或者X-box 360,在大屏幕的独占式界面设计上,显然游戏更有经验,所以,TV App的设计,个人认为,可以更多的借鉴游戏界面设计的经验。

经验一:游戏主界面最大化

对玩家来说,当他们游戏时,注意的重心在画面的背景,也就是游戏内容本身上,它们是持续的,动态的Flow,而诸如个人信息、物品栏等游戏组件,虽然是界面的前景,却是断续的,可隐藏的、辅助的;游戏画面风格很大程度上影响了玩家的游戏选择,而游戏画面风格更大程度上是由游戏主界面的背景——游戏内容决定的;对于TV App来说,它同样应该具有游戏主界面背景所具有的特征:全屏、动态、持续,而这些特征,恰恰是TV内容所固有的特色。

wow

经验二:操作区域内容的Global,Context和Customizable

在游戏的不同场景,这些位于游戏主界面前景的内容并不相同,比如玩家在游戏内闲逛时,以及在游戏中战斗时,他所希望看到的信息和他想要进行的操作是不一样的,比如说,在闲逛时,Social的部分可以范围大一些(通常在屏幕左下角以及玩家游戏角色头顶上),而在战斗时,玩家战斗状态相关的信息就更重要了,这时Social的内容应该以自动和不打扰为主,否则玩家就该骂娘了。

泡泡战士

此外,就像上文中提到的,以及上图中《魔兽世界》所示的,这些游戏组件在内容、显示区域、显示大小上应该是可定制的,从而最大的发挥它的“辅助”价值。

在TV App的设计中,我们对TV App用户的使用期望仍然是“沉浸”(也是“Flow”),在游戏中,通过游戏剧情、游戏角色之间的关系、游戏角色与场景之间的关系、游戏角色与游戏NPC之间的关系等等,来实现使用户“沉浸”;而在TV App中,尤其是电商TV App中,引发用户沉浸的肯定不是迷宫一样的导航,机器人一样的搜索,而是用户与商品之间的关系,用户与用户之间的关系等等,这也就决定了我们的信息架构,我们的Home,Category,Search,Product Detail, Shopping Cart,Check out等等,他们的内容、结构和关系要打散了重新组合,并且千万要理清自己的“辅助”位置。

经验三:图标式操作

图形化是一个显而易见的趋势,并不止是游戏如此,只是游戏图形化的更彻底一些,对于大屏幕的TV App来说,这个不用多说。

经验四:分屏展示(没有全屏幕的上下滑动)

这个是从游戏中获得的经验,但是它不符合在TV上使用Google搜索、浏览网页的场景(虽然不知道多少人会在TV上这么用),部分内容的上下滑动(注意:不是全部内容)是可以接受的,比如说一些TV App的Global/Context Menu的设计是通过遥控器上的五向键的一些操作从底部滑上来的,个人认为,屏幕底部用类似前景的方式呈现一些可操作的内容,跟游戏中的可隐藏的物品栏和公告栏等是异曲同工的,另外,如下图所示,下图的App栏(前景)和主要内容(背景)的关系还可以优化,这两部分内容的融合看起来非常的生硬。

google tv

经验五:定义快捷键并用可见的方式展示

游戏是为普通用户设计的,也是为新手和专家设计的,正因为如此,游戏的Settings里面有一堆的快捷键并且这些快捷键大多数都是可以自定义的,那些游戏专家,除了敏捷性等生理机能外,更多的是熟能生巧(仅限于劲舞团之类的休闲游戏);对于TV App来说,定义快捷键并用可见的方式展示的优势在于,它能兼顾新手、普通和专家用户,另一方面,它减少了键盘/遥控器操作的复杂性。

经验六:2D vs. 3D

游戏的发展历程是从文本到图像,从2D到3D,我相信,软件,硬件的发展都是服从于这个规律,并且为之服务的,而由于TV本身的大屏幕优势,以及3D电视的出现,并且相信会逐渐普及,3D的TV App相信会成为主流,而游戏领域在3D引擎技术的领先使用,决定了游戏在3D的界面设计领域有更多的经验可以供我们借鉴,比如说《魔兽世界》如何去吸引那么多中国的女玩家,去克服3D带来的方向迷失以及眩晕感,使她们同男性玩家一样,能够很好的享受这个游戏的。

经验七:用地图来导航

游戏的信息架构同样复杂,但是在游戏设计中,使用了地图这样一种图形化的方式来实现导航的目的,而在Web中,我们看到的站点导航是什么呢?大多是一堆树形结构。在TV App设计时,我们是否也可以借鉴游戏的这种导航方式,用图形化的方式来达到导航的目的,当然,地图只是一种形式。

经验八:多账号、多角色、多关系

对游戏来说,一个玩家通常会有一个主要角色,多个小号,多个辅助角色,而对于一个游戏角色,也有多种不同的关系,比如好友、师徒、夫妻、帮派、国家、主人和宠物等等,在游戏中,这个游戏角色更多的是一个Public的角色,而游戏也是为了Public,为了Social的目的而设计的,而在Web上,在SNS出现之前,我们看到的更多的账号是非常Personal的,它们很少去处理这些Account之间的关系。另一方面,对于Mobile,对于Pad来说,更多的时候也是一个非常Personal,非常private的设备,而TV,确是服务于Home和Family的,它也需要处理不同的角色,不同的关系,这同样也决定了,TV App的设计需要从游戏设计中取经,借鉴他们处理多账号、多角色、多关系的经验。

经验九:文字简洁

这个不言而喻,在Web上,在Mobile和Pad上,我们可能看到满屏的文字,它尤其适合阅读场景,但是在TV上,如果看到满屏的文字,这绝对是一个灾难,乔布斯式的Presentation为大众所喜欢,原因之一也是因为,它言简意赅;TV App的设计要想达到文字简洁的效果,需要学习借鉴的,不能仅仅是乔布斯式的Presentation,因为不管是PPT,还是Keynote,虽然演讲人试图把Presentation变成一个或者一个个连续的故事,但是这依赖于演讲人本身的努力,但是从PPT和Keynote本身来说,虽然它可以自动播放,但是它仍然是非连续的,甚至是静态的;而相对来说,游戏设计在这方面又更有经验了,我们可以学习它如何在有限的空间里,呈现不同类型的,多种多样的信息。

经验十:用字体、字号、字色的设计来表现信息架构

仍然是以上面的《魔兽世界》的图为例,或者是上面《泡泡战士》的图,我们都可以看到,它们用字体、字号、字色的设计,对不同类型的信息进行了区分。在Web上,由于技术、兼容性等原因,字体、字号、字色的设计等应用得相对较少,所以我们在浏览网站时,看到的经常是千遍一律的宋体,黑色字,但是在TV App领域,因为App本身的特性,我们对字体、字号、字色的设计上有了更多的自主性,可以更多的在上面做文章,那么,作为这方面先驱的游戏设计,当然也是我们可以借鉴的了。

作者:徽徽

文章来源:徽徽的UX世界

2011年被捕的八大黑客:制作病毒 入侵网站(国外)

来源: CSDN

尽管有许多神秘的黑客可以逃避法律的制裁,但是通过举报和逮捕,警方依然取得了傲人的战绩。下面是在今年轰动一时的黑客名单:

1.LulzSec首领:Ryan Cleary

今年夏天警方搜捕了19岁的英国人Ryan Cleary的寓所,他涉嫌使用分布式拒绝服务攻击(DDoS)袭击了英国SOCA站点,并使之瘫痪。国际唱片业联合会的站点也惨遭袭击。

2. 哈弗黑客:Aaron Schwartz

24岁的Aaron Schwartz是哈弗大学Safra伦理中心的研究员和程序员,他通过MIT和Jstor(Journal STORage,期刊存储,创立于1995年)之间的网络链接,窃取了4百多万份科技文献。

3. DNSchanger病毒的制造者: Timur Gerasimenko、Vladimir Tsatsin、Dmitri Egorov、Konstantin Poltnev、Valery Alekseev和Anton Ivanov

以Tsatsin为首的6名DNSchanger病毒制造者在今年11月份被捕。他们制造了史上最“昂贵”的僵尸网络,通过此病毒制造恶意点击,他们非法赚取了1400万美元的广告收入。

4.Sony黑客:Cody Kretsindzher

Cody Kretsindzher于9月份被捕,他曾在今年夏天对索尼发起SQL注入攻击。

5. AT&T:Lance Moore

Lance Moore是AT&T的临时工作人员,据说为黑客组织Anonymous窃取了成千上万的电话号码、用户名、安全服务器IP地址和密码等等。

6.窃取ipad用户数据的黑客:Andrew Ornhaymer

Andrew Ornhaymer是Goatse安全组织的成员之一,他被指控利用AT&T的安全漏洞,窃取ipad用户的数据。

7.Gucci黑客:Sam Ying Chilun

Sam Ying Chilun失业后在亚洲地区销售从Gucci偷窃来的手袋和鞋子,并通过VPN入侵,销毁公司数据、删除员工的邮箱数据。

8. 窃取名人隐私的黑客:Christopher Cheney

Christopher Cheney热衷于窥探名人的隐私,他通过名人公开在博客上的信息猜测他们的Google和Yahoo密码,并将名人收到的邮件转发到自己邮箱中。有50多位名人受害,包括Mila Kunis、 Scarlett Johansson和 Christina Aguilera等。

真正的换位思考:我做测试人员的一天

来源: 伯乐在线

昨天一个偶然的机会,临时充当了下软件测试的角色,体会很深!也让我对软件测试人员有了更多的了解和理解,并对自己(开发者)也提高了要求。

开发、测试不分家,心在一起,劲往一处用就可以大大改变产品的质量。这个道理大家谁都明白,但是我们是做到了60分,还是90分呢?这是值得我们深思的!

情景1:

我拿到一个产品,让我测测,我首先根据自己的理解来测试这个产品,保证链接的正确,数据不敢保证,随着测试的逐渐深入,我发现,有些功能根本不知道是做什么用的。

感想:一个产品如果没有需求文档,就算有使用文档,那又有何意义呢?

情景2:

我找到了需求文档,对里面的内容进行查看,多多少少还是帮助了我理解了这个产品的功能,但是好多页面展现,无从考究!例如一些展现的关系图,是根据什么绘出来的?箭头代表什么?等等等等!总之给我的感觉就是功能依照使用手册会用了,但是不知道是用来做什么的!顿时你会想到,这些都是什么做什么用的?为什么文档没有写清楚?难道还要我逐条写下来,依依的问?

感想:情景2做到了60分,因为有了需求文档,但是这份需求文档,有跟没有差别不大,主要是解决了有、无问题。对于根本性的问题还是没有解决。

这时候想想我们自己做开发的时候,是不是以为这个很简单,我们组内都清楚,就没有写在需求里呢?现在想想,开发觉得自己明白的东西,往往别人是不明白的!看来以后写文档的时候,我们需要转换一个角度来写这个文档。逐渐达到70分!

情景3:

找到开发问了这个功能,开发简述一遍,是简述哦!大体知道这个功能是干啥的了,也能看到展现,但是展现的对错与否,谁又知道呢?

感想:测试点很重要,我们的展现对错,是要考虑测试人员对这个系统的理解,如果我们能够在文档中,写清楚测试点,那么测试人员就会更有依据来判断展现的内容是否正确了,如果做到这点,我相信应该可以打80分了!

the bug stops here 真正的换位思考-我做测试人员的一天

情景4:

随着时间的推移,我烦躁了起来,感觉能用,不知道为什么用,每个功能都可用,但是如何串联在一起呢?看了产品的SPD,使用手册,没有对各个模块串联着用的一个概览,这让我和恼火,我当时心里只有一个想法,这咋测?没有需求评审吗?双方之前没沟通吗?

后来得知沟通过,需求是因为项目多,开发没时间,只是简略的说做了什么,没有说做到什么程度,什么效果!

感想:看来对需求的沟通事值得我们深思的,开会了、沟通了,依然没有解决问题。所以我觉得只要是会议,一定要双方达成一致,且一定要形成结论,不然那就是扯淡!话糙理不糙!就是这么个道理!

本以为这一天的时间是浪费了。其实不然,通过这一天的实际换位,真正的达到了换位思考的效果,理解了测试人员的苦衷,也了解了一些作为测试人员最需要的是什么样的文档,需要的是开发怎么的配合。同时自己身为开发人员的我,觉得在今后的开发中,一定要落实文档,积极配合测试人员!当然开发人员也有苦衷!但是我们需要先从自身找原因,解决掉自身问题,也许很多难题会迎刃而解也说不定呢?

作者:丛立

原文地址:伯乐在线

九个原则设计网站着陆页

来源: 创业邦

我儿子三四岁的时候,有天下午外面下雨,于是我把他带到一个巨大的室内海边游乐场玩。我以为那些闪烁的灯光,令人眼花缭乱的机器摆动和大堆青蛙过河、小蜜蜂、大金刚之类的模型会让他很兴奋,让我们在那里度过几小时的快乐亲子时间。

可实际上,他却踌躇地呆立在游乐场正中,眼花缭乱,不知所措。随便朝一个斜坡扔了几个小球后,他转过头问我:“妈妈,够了吗?我们可以回家了吗?”

网站的着陆页面时常看起来感觉就像游乐场,对访问网站的用户不仅没有吸引力和引导效果,反而令他们丈二和尚摸不着头脑——这也就意味着你的访问者会像我儿子一样迫不及待地想要点“后退”逃离这个乱七八糟的地方。

着陆页是指访问者在其他地方看到你发出的某个具有明确主题的特定营销活动——通过Email、社交媒体或广告发布的诱人优惠信息等,点击后被链接到你网站上的第一个页面。通常,着陆页上各种诱人的优惠信息背后暗藏的是发掘并收集潜在消费者信息的表单,目的是将访问者转化为潜在客户,根据收集到的信息继续跟进。着陆页为访问者提供了一种“目标超明确”的访问体验:通过呈现一个特定页面,为他们指出一条明确的路径继续加深与你公司的关系。

设计一个目标明确的着陆页面是一种艺术(也是科学)。行之有效的着陆页面应含有足够的信息,但信息量又不能太多,不能让访问者觉得眼花缭乱不知所措。理想的着陆页应传递三个简单信息:访问者所处的位置;你为他们准备了什么优惠(这些优惠是多么诱人);如果想要得到这个诱人的优惠,下一步要做什么(以及了解更多关于优惠物品的详细情况)。

一个很容易出现的误区是画蛇添足——像花枝招展的游乐场一样——在着陆页塞满了各种各样重要但非必要的花哨信息。应尽量简单明了,导航条一目了然。贵在求精。

下面将为你介绍一些设计高效着陆页的关键——可以将浏览者变成真正的买家,或至少增进你和访问者之间的关系。

承诺了就要做到

如果你在宣传中对潜在顾客或实际顾客承诺要给他们提供某种东西(比如产品使用说明、免费电子书等),一定要确保实现你的承诺——而且是即刻。

“信息不符”是极为常见的情况:电子邮件营销服务商Silverpop研究了150个不同着陆页后发现,大部分成功的着陆页都与Email促销信息中的“点击诱因”相呼应——浏览者就是为了这个才决定点击访问你的网站。然而有45%的登陆页并没有在标题中重复Email中的促销信息。如果你在促销时对人做出了某种承诺,一定要确保对方访问你的网站后立刻就能实现这个承诺,而不是给人家一个截然不同的说法。

提供的内容要有价值

有天我点了一个链接,链接标题是提供适合家庭度假的加勒比度假村指南,但当我下载后发现,其实只是一家度假村的促销小册子。我觉得被人耍了,让我这个潜在消费者觉得非常不是滋味。确定你在着陆下载页面中提供的内容的确有价值:潜在客户会喜欢吗?还是很差劲?

避免信息过量。我儿子在游乐场里的感觉就是这个问题的最佳示范。千万不要在着陆页中塞入太多东西。

这样可导致超链接干扰,令你的潜在消费者不知不觉地点开其他不相关链接,然后将原本的目的全抛到一边。Ion互动营销代理公司总裁兼合作创始人斯科特·布林克尔将这种用长篇文字和解释填充页面的倾向称为“填充页面综合征”。

“努力将所有信息塞入一个页面就等于在浏览者身上压上了筛选内容的负担,”布林克尔说,“遗憾的是,大多数时候人们还没兴趣在你身上花那么多时间。”

标题要以客户利益为导向

通过告诉顾客你提供的产品对他们有什么好处,不断重复这次活动有多好。一个以产品为导向的标题会突出你的产品或服务可以做什么。一个以客户利益为导向的标题则告诉客户你的产品和服务能为他们做什么。

我们在MarketingProfs进行过一次实验,分别测试两个不同着陆页面的效果,两个都提供了对我们公司一个计划工具的访问,第一个着陆页说,“立即加入,访问SmartTools:社交媒体营销工具。”第二个着陆页说,“SmartTools帮您迅速创建成功的社交媒体宣传活动。”第一个页面是以产品为导向,第二个却告诉订购者可以从中得到什么。结果并不意外,第二个以客户利益为导向的着陆页最终转换效果比以产品为导向的页面高出26.06%。

关于副标题和视频图片

位于标题下方的副标题是阐述你提供的产品有何主要益处的好地方。在营销圈内,这里应长篇大论还是寥寥数笔是个广受争议的话题。我个人喜欢用比较少的笔墨,最好是易于分辨的点列格式,或许还可以配上视频或相关图片。总而言之:不要将视频或音频文件设为页面下载后立即自动播放模式。这样不仅有些烦人,而且突然冒出的声音还会吓到很多想在安静环境中工作的人。

突出强调“点击诱因”

“点击诱因”指的是吸引访问者采取下一步行动的按钮或链接。当访问者打开了页面,选择你所提供的产品服务,接下来就要确保他们知道下一步该怎么做。将“点击诱因”放在明显位置,同时选择最适合你的文字标签进行注释。有些研究结果建议,着陆页的提交按钮上只写着“提交”字样的效果会逊于更有行动性的文字,比如“立即下载”或“注册”。按钮一定要注意4B原则:大(Big)、鲜艳(Bright)、醒目(Bold)、显而易见(Blindingly obvious)。

保持简单

收集购买意向时,只要求对方提供最相关的信息。主要理念是排除横亘在访问者和你希望他们做出的行动之间的一切阻力——引诱他们参与而不是打消人家的积极性。简单还意味着将页面所用的文字和图片削减到最精华的部分。着陆页的内容越少,重要位置或者访问者无需向下滚动页面就可以看到的显著位置就越突出。

利用信用证明和社会认可

通过传递你的可信度来建立信任感:证明书、媒体报道、第三方信任和安全认证(比如TRUSTe或商业改进局)、不满意退款等。你还可以加入“社会认可”,像是博客评论或Facebook、Twitter的粉丝数量。“社会认可”可以增强可信度,因为这发送了一种信号,代表其他人对你的公司的认可。

测试,测试

你的产品和服务是独一无二的,你的受众群体也是一样。设计着陆页面时,测试哪一种对你效果最好——亦即对你的受众效果最好。最直接的方式是通过简单的A/B测试,同时提供几个不同版本的促销页面,然后看哪个效果最好。从测试“青菜”(Apple)vs“萝卜”(Orange)开始,然后进行修改。当你确定“青菜”的销售转换效果比“萝卜”强,然后决定是否麦金塔的转换率比富士强。 _译/金笙