美文网首页腾讯网UED体验设计之旅读书笔记PMbook
腾讯网UED体验设计之旅-读书笔记

腾讯网UED体验设计之旅-读书笔记

作者: 02e27fd367d1 | 来源:发表于2015-07-08 16:31 被阅读1032次

        2014年初读过一本一个团队专门介绍自己产品开发历程的图书《设计之下》,在阅读本书的时候,我会不禁时常拿来与《设计之下》对比,同样是产品开发纪实的图书,同样隶属于互联网巨头的一个团队,《腾讯网UED体验设计之旅》给我带来的整体感触是“隶属于一个大组织内按部就班的生产线流程,流程之外的经验可圈可点。也就是说,很多东西用处并不大,更确切地说是第一遍读之,对一个做产品的我来说,帮助并不是很多。当然这本书最有价值的地方就是案例,很多案例披露了腾讯网UED团队的创作过程,这个是非常难得可贵不可多得的。“

    1、用户在访问媒体和视频产品的时候在阅读什么?

    通俗的来讲,用户打开门户网站或者视频APP的时候,首先关注的内容是什么,由此才会引起用户下一步的操作。本书第一章简单粗暴,直接上了结论,也就是说在媒体类产品中,缩略框内容优先级依次为:标题>图片>摘要>标签链接等其它内容;对于详情页面,用户的需求占比:查看网友评论>浏览详细内容>延伸阅读>拓展阅读。可以看下下面这张图(对于图片浏览同样适用)。

    另外,产品中很多交互性语言/词语,用户是难以区分的,譬如用户对收藏、订阅、关注是傻傻分不清楚的。这个是需要产品设计者引起充分重视的,知乎在处理“订阅”和“关注”这个问题的时候,都统一使用了“关注”,用户关注的话题/人/专栏/圆桌等等所有类别中所产生的动态都是以统一的风格(媒体属性,标题优先级最高)展现到登录用户的首页,没有第二种展现方式。再对比看下国内低价导购的社区老大什么值得买,仅从web首页上可以看到风格不同的三种信息“置顶、优惠、资讯”,这也许从侧面能验证创始团队对产品本身管理不强或者是产品本身已经发展的足够大到可以多渠道横向发展的情况了。

    除此之外,第一章基本都属于常识性的问题,譬如“产品公司设计的分歧在用研的过程中可以得到统一”、“产品优化的一般流程”、“尼尔森启发式评估十个原则””用研的诸多方法“。总的下来,本章节干货还行,主要集中在披露大公司的用研方法,并适当的公布了一些已经众所周知的结论,譬如媒体类设计的预览框优先级和视频类的区别、用户在底层页面的行为方式等等。

    也是因为读第一章的内容,一度让我“误以为”此书干货满满。但不尽然~

    2 、 下一代 腾讯网

    同时兼顾用户、设计、移动端和商业的腾讯网,在产品设计之初用的最多的是眼动测试、灰度发布、反馈修改、再次灰度发布...本章节回顾了2003到2014年间腾讯网弹框(迷你首页)的发展之路。干货较少~可以理解为这一章就是广告。

    3 、 从大屏到小屏

    (1)正式的讲,这一章开始才是真正介绍UED的部分。CNNIC早在2014年月的报告显示,中国网民的手机使用率已经远远超过PC端,一年后的今天,当触控统治世界的时候,腾讯网选择投入H5的环抱(我们暂且不考虑微信的原因)。资讯移动化的趋势下,各大门户网集中表现了移动优先、产品社会化、交互趣味化三大趋势,这也是腾讯网选择H5的主要原因之一。除此之外开发成本低,周期快,硬件瓶颈的消除,足够的设备资源足以支撑webApp也是腾讯选择H5的一个重要原因,当然所有这一切与H5的灵活性和传播性是分不开的。

    附:各大系统的Guideline

    Apple的iPhone Human Interface Guidelines :推荐的触控目标最小尺寸为44*44点(Retina屏下,1点=2像素)。

    Google的Android Design 推荐7~10mm为比较理想的尺寸

    Microsoft的Windows Phone UI Design and Interface Guide推荐最小触控目标尺寸为7*7mm(26*26px),理想的尺寸为9*9mm(34*34px)

    Nokia建议目标尺寸不应该小于10*10mm(28*28px)

    另外根据MIT的研究大多数成年人的手指尺寸在16~20mm(约合45~57px),因此在设计过程中,45~57px才应该是用户最舒服的操作范围,虽然各大操作系统给出了各自的参考尺寸,但在设计的时候一定不要拘泥。尽量遵从“设计---测试---再设计”的流程,整个过程其实也是不断反馈成长的过程,毕竟《测试驱动开发》。

    (2)多个案例,以下是移动端网址/二维码

    通过以上案例可以把H5的动画按照功能分成3类:讲故事类、强调类、反馈类。在动画的实现上,主要有两种方式:CSS动画的逐帧动画。

    (3)从技术角度汇总的几个H5页面设计的注意事项

    不同屏幕尺寸的适配:可以使用CSS的@media screen 来判断屏幕、宽度、高度范围等,从而决定页面文字的大小和页面的布局。

    背景层和内容层的分离:

    特殊字体的使用:可以讲文字文件放在服务端,通过CSS中的@font-face来使用这些文字

    横屏和竖屏的适配:

    动效的选择:尽量选择简单的动画以防止不流畅等问题带来糟糕的用户提样

    第四章 /第五章 然并卵

    4、 改版的迭代思维与方法

    迭代在所有产品的生命周期中,都必不可少,像腾讯网这类成熟、用户量巨大的产品,每一次迭代都是为了修改BUG,增加某些元素或者新功能以及顺应时代潮流进行不得不变的改动,回顾小的互联网创业项目,一开始的每一次版本更新迭代与腾讯网完全相反,甚至产品发布好几个月内没有一个访问量的产品非常之多,所以改版、迭代、试错甚至推到重来就成为创业团队找到正确方向以前的无止境的探索。遇到运气好的团队可能一开始或者钱3个版本就开始大红大紫(这也是为什么国外很多验证的项目在国内被大量复制的原因),但产品完全来于自己创新的非明星创业者,往往运气并没有那么好,能坚持迭代3个版本且还在坚持的团队就更难能可贵,相比于动辄押宝数千万美金于明星创业者身上的投资人,我更觉得,投几十分之一给这类坚持迭代了3个版本以上,用户量逐步稳定的团队/创业者,风险可能更小,因为他们更成熟,更懂得坚持,一般也非常明确自己创业的目的。

    5、 主题型页面的设计创新

    比较认同的一个调研结果“一些严冬追踪的相关研究表明,用户的视觉器官在观察物体时,最初的20秒色彩感觉时间占80%,而形体感觉时间占比为20%;两分钟后这个百分百为60%和40%,五分钟后五五分并且一直保持下去。可见色彩的重要性”。

    剩下的为无数个案例~

    相关文章

      网友评论

        本文标题:腾讯网UED体验设计之旅-读书笔记

        本文链接:https://www.haomeiwen.com/subject/huayqttx.html