《腾讯网UED体验设计之旅》

一本记录腾讯网媒体验设计案例的书籍，以视觉设计为主。

书籍封面

书籍：《腾讯网UED体验设计之旅》
出版社：电子工业出版社  2015年4月
作者：任婕 等

《腾讯网体验设计之旅》一书中包含了大量腾讯网媒设计团队的设计案例，大部分案例偏向于PC端设计，介绍的角度包括了交互、视觉、动画、设计管理等。其中，大量章节讲了视觉方面，包括了手绘设计、文字设计（+logo设计）、改版、主题页面设计、图形化设计。我想一方面是因为网媒的原因（更侧重表现信息内容的展现，不同于流程步骤化的交互设计）；另一方面，在体验设计中，交互设计与视觉设计本身是分不开的。

作为一名交互设计师，在了解视觉设计之外，我更关心与交互有关的部分，比如信息排版布局、动画设计、响应式设计，还有H5页面设计、web端设计与移动端设计。网媒是基于内容建立起来的，并且这些内容阅读相对典型的特征是层级相对较少，且同一层级上信息内容内涵意义丰富、之间关联性弱同时信息量大。所以通过视觉化编辑呈现这些信息显得更加重要。

PC设计与移动端设计的差异：
①触发方式不同；PC端主要是鼠标悬停、点击、滚动等，移动端包括点击、滑动、摇一摇等；PC端出发需要更小的点击面积，移动端手动出发需要的点击面积则比较大。
②屏幕大小不同，承载内容不同；
比较典型的例子是电商类网站，网页端鼠标悬停时，会展示产品的其他相关内容，移动端则做不到，只能把详细内容平铺出来。
从PC端到移动端的设计，需要考虑信息设计与交互设计。首先是用户群体对于这种转换的需求性，然后是对于信息板块的设置、内容更新频率的考虑，交互方式、控件的尺寸等细节问题。值得注意的是，从大屏幕到小屏幕的转移，信息内容要保持同步，并能保证用户对信息的对应的可识别性。书中特别讲到一句话“用人性的思想做产品，而不是程序的思想做产品”。

H5页面：
H5页面即移动端的web页面，网上有很多区别两者的方式，感兴趣的去找度娘问问。H5页面相对原生页面的优势是传播速度快，开发周期短、发布和更新方便。（一般原生页面完成开发到上线的时间不如H5页面调整来得快）对于运营需求更容易实现，对于可视化效果更易于开发传播。一般H5页面都是活动页面，比如微信红包页面。

动画设计：
主要分为三类，讲故事类、强调类、反馈类。讲故事类偏向运营，且动画播放一般是由用户触发的；强调类是为了吸引用户的注意力，达到传递信息的目的；反馈类是针对用户操作或页面状态的反馈，比如页面转场时候的衔接动画。
动画的表现方式有两种，CSS动画和逐帧动画。CSS动画主要是位移动画、旋转动画、缩放动画和变形动画；逐帧动画通常是gif或者jpg或png格式。
动画设计中需要注意动画效果的触发方式，设计每个屏幕之间的转场效果以避免僵硬。

自适应设计与响应式设计：
【参考链接】http://blog.csdn.net/zxl1033394132/article/details/50574382
自适应设计是识别屏幕的大小后，对版面进行缩放。响应式设计是识别屏幕大小后，对版面内容进行一定程度上的重新布局等。
响应式设计中应该注意在小屏幕上要把字体放大。同样像素及字号的字体在手机上会比在PC上小很多。

交互设计：
网页端横向滚动设计；主要使用场景包括展示一系列图片、在一个较大的区域内展示结构化信息、展示以一屏为单位的信息、展示一个项目列表。
图片排列形式：宫格式严谨布局（等大图片与等比缩放图片排版），菱形排布，场景化排版（比如海报拼贴、散落明信片样式等），图文结合等。
……
书中提到的交互知识点穿插在每个实践案例中。我学到最重要的一点是 完整。交互设计的完整性包括呈现内容的完整性、交互触发-反馈的完整性。相应的是用户感受到的完整性与整体性。
想到这里，似乎空谈每种交互方式都太概念，交互方式更适合在实际的案例中讲述，在一个场景中谈论交互如何，更有价值，也更有说服力。

视觉设计：
字体设计/LOGO设计、信息图形化设计、手绘原形设计、改版设计、系列设计、主题设计……（方法都懂，重要的是实践）

书中有趣的点：
1.眼动追踪的相关研究表明，用户的视觉器官在观察物体时，最初的20秒内色彩感觉时间占80%，形体感觉时间占20%；2分钟后色彩感觉时间占60%，形体感觉占40%；5分钟后二者各占一半，并且这种状态将持续保持。
2.美国著名社会心理学家约瑟夫和哈里认为人与人之间的关系取决于其相互之间的暴露程度。一般而言，能够敞开心扉，适当暴露自己，将真实的一面展示出来，往往较容易赢得对方信任。
3.关于大项目规范建立，包括视觉规范、交互规范、文档交接规范等。从设计的执行层到项目传递层均需要设计师参考规范执行，页面板块设计采用模块化设计，以提升项目视觉体系和体验体系的统一，同时提升工作效率。