《腾讯网UED体验设计之旅》章节试读

《腾讯网UED体验设计之旅》的笔记-第88页 - 从大屏到小屏

设计师应该：1）参与内容策划2）首先确定专题的信息架构3）充分发挥图片的视觉冲击力4）要学会遵循并打破设计惯例

《腾讯网UED体验设计之旅》的笔记-第205页 - 色彩定位很简单但很重要

“在做设计之前，首先面临的就是产品的色彩定位，很多设计师在处理这部分设计工作时，或是不够重视，或是在操作方式上没有形成科学的推导流程。在首页的色彩定位上，设计师采用了一种非常简单高效的设计方法，我们称之为“取点法则”。这种方法可以非常简单快速精准地定位产品气质，并为后期周边产品的视觉统一与视觉规范打下基础。
1、采集基准色图片：利用搜索引擎或者其他手段收集与设计对象相关的视觉图片，从中筛选出一些最具代表性的素材作为基准色图片。千万别小看这个步骤，因为这些图片的选择在很大程度上决定了后期产品的视觉气质与形态。
2、将收集到的基准色图片进行像素化（可以使用photoshop的滤镜－马赛克功能，像素块可以尽量大一些）。
3、从像素化图片中萃取一些有代表性的色彩。
4、剔除相近色，并从互补色的角度筛取出整个产品的标准色和辅助色。”

《腾讯网UED体验设计之旅》的笔记-我们的用户 - 我们的用户

1、我们了解用户吗
艺术家通过创作吸引欣赏他的人，而设计师的创作以用户喜爱并接受为前提。
有限的用户言论会可能会给设计师带来偏见，但倾听更多用户的声音有助于了解更真实、更全面的用户。（偏听则暗，兼听则明）
了解用户需要技巧，因为每人的了解、见识都有局限性，所以渴求与诉求也不同。需要了解用户自身的特点及能力，用户想要实现的目标及其实现方式，以及设计的方案是都可以让其目标更有效地完成。
不能凭借自己的经验来判断用户的需求，对目标用户进行适当地了解与研究，在设计与优化产品时需要对用户进行长期的观察与研究。
2、常用的用户研究方法
用户研究适用于产品生命周期的各个阶段，需求挖掘和设计评估都需要与用户打交道。
用户研究适用的阶段：构想→ 评估→计划→设计→开发→上线→日常运营
研究用户，需要透过用户的语言、行为去了解他们内心最深处的需求。需要设计师始终保持一颗同理心与开放的心态，有时用户的“是”与“否”也许只是提问方式不同导致的，是非判断只在一念之间，关键要挖掘用户的核心诉求。
问卷法
熟悉且使用的最多的方法之一，以书面形式向特定人群提出问题，并要求被访者以书面或口头形式问答来进行资料搜集的一种方法。可以同时在较大范围內让众多被访者填写，因此在较短时间内搜集到大量的数据。
网络调查在组织实施、信息采集、信息处理、调查结果等方面具有明显的优势。在制订问卷目标、设计问题及文案上都有一定的专业需求。
设计问卷——首先明确问卷法的目标及适用范围，从目标制订、方案设计、样本回收、数据统计分析到最后的结果输出，每个环节都需要严格把关。在问卷设置阶段，要考虑问卷结构、问题设置的一般原则，控制问卷长度等。
可用性测试：指在设计过程中被用来改善产品的可用性的一系列方法。
用户研究员根据测试目标设计一系列操作任务，通过测试5~10名用户完成这些任务的过程来观察用户实际如何使用产品，尤其是发现这些用户遇到的问题及原因，并最终达成测试目标。测试额完成后，用户研究员会针对问题所在，提出改进的建议。
通过可用性测试能尽早地发现问题，通过改进问题提高用户的满意度、忠诚度，降低用户成本，可用性测试的实施成本低、易操作，因此被广泛采用。可用性测试先观察用户的操作，再通过访谈得到测试中的答案，重点关注现象背后的原因。
眼动测试
对个体而言，外界信息的80%~90%通过眼睛获取，眼动有一定规律性，通过眼动仪记录用户浏览页面视线的移动过程及对不同板块的关注度。通过眼动仪可以了解用户的浏览行为，评估设计效果。眼动仪通过记录角膜对红外线反射路径的变化，计算眼睛的运动过程，并推算眼睛的注视位置。
眼动仪可以帮助我们记录快速变化的眼睛运动数据，同时可以绘制眼动轨迹图、热力图等，直观而全面地反应眼动的时空特征。眼动分析的核心数据指标包括停留时间、视线轨迹图、热力图、鼠标点击量、区块曝光率等，通过将定量指标与图表相结合，可以有效分析用户眼球运动的规律，尤其适用于评估设计结果。
用户访谈
可以与用户有更长时间、更深入的交流，通过面对面沟通、电话等方式都可以与用户直接进行交流。
操作方便，可以深入地探索被访者的内心与看法，容易达到理想的效果。
一般在调查对象较少的情况下采用，常与问卷法、测试法等其他方法结合使用。
定性研究对访谈员的专业素质要求较高，通常访问者会根据研究目的，事先准备一些问题或者交流的方向。
根据不同目的，访谈分为结构式、半结构式和完全开放式访谈。

《腾讯网UED体验设计之旅》的笔记-第258页 - 文字设计的方向选择

《腾讯网UED体验设计之旅》的笔记-第267页 - 科技，简捷并不等于简单

“设计师都会归纳和思考：所有颜色都有意义吗？所有的转折线处理都有必要吗？所有的形状结合都必要吗？可不可以删减一些多余的手法而只留核心内容？任何过度设计或不到位的设计都不是好的设计，我觉得过度比不到位更让人烦恼，因为它会干扰用户的阅读和理解。这就好比产品，任何产品并不是功能越多越受欢迎，相反，功能越多问题也越多，甚至好多功能多余或难以使用，给用户带来挫败感。字体设计也是一样，当把一切能想到的元素通通都放进来时，往往等于都没放。有时少既是多，抓住一个视觉着眼点，就足够了。”

《腾讯网UED体验设计之旅》的笔记-第164页 - 过大年！春节系列皮肤绘制办法

“因此设计皮肤前的思考过程很重要，身未动意先行，做过几次皮肤后归纳出来了倒推法：传统绘画或者插画是作者先选择某种题材然后创作，最后在人们的观览中产生某种情感因素；而节日皮肤设计首先要锁定欲表达的某种文化和何种人文情怀，然后再逆向思考需要什么样的内容和绘画风格方式去实现”
身未动意先行——我总是意未动身先行，习惯性逃避思考过程，用战术的勤奋掩盖战略的失败！

《腾讯网UED体验设计之旅》的笔记-第81页 - 从大屏到小屏

如果触控目标太小的话，用户需要付出额外的精力来进行精确点击，用户需要不断的调整他们的手指来点击目标获得反馈，会增加用户的挫折感

《腾讯网UED体验设计之旅》的笔记-第289页 - 动画效果部分的设计

对于手机端来说，视觉层面的完成只算完成了50%，因为html5技术本身就可以承载很丰富的动态表现，动画效果设计也是手机端设计必须考虑的部分。将结构布局拆分成在不同时间段内出现的画面，确定开始画面和结束画面。
1、第1秒，标题部分开始出现，其运动轨迹向下，并在第2.5秒到达预定位置。
2、第2.3秒，主体徒刑部分开始出现，其运动轨迹向右，并在第3.5秒时达到预定位置。
3、第3.2秒，结论部分开始出现，其运动轨迹向上，并在第4.5秒时到达预定位置。
4.5秒内全部动画动作完成。通过动态引导，画面的展现更富有层次，并且动画是一种运动着的视觉引导，让读者的视觉流程更加清晰。
动画效果的主题设计框架完成，在这个框架的基础上还要完成如下两个扩展设计：
1、要添加动画效果的触发方式。触发方式是点击触发、滑动屏幕触发，还是摇一摇触发等。手机端的处罚方式丰富多彩，这是与pc端键鼠触发不一样的地方。良好的触发方式，会大大提高读者的阅读体验和阅读兴趣。
2、要设计每屏内容之间的转场效果。转场效果就是上一屏内容如何消失和下一屏内容如何出现之间的过渡动画。如果缺少转场动画，则内容之间的切换会显得非常僵硬。
全部动画效果设计完成之后，还需要将动画效果设计的运动轨迹、时间节点和触发方式等设计说明给前端技术人员。交给前端人员的设计说明越准确，动画的还原程度越高，越符合设计预期。设计说明含糊粗糙，动画离设计预期的差距可能越大，这是动画效果设计中要注意的。另外，手机端的页面还需要一个封面和封底的设计。

《腾讯网UED体验设计之旅》的笔记-第7页 - 常用的用户研究方法

《腾讯网UED体验设计之旅》的笔记-第35页 - 尼尔森启发式评估十原则

“尼尔森启发式评估法是一种用来发现用户界面设计中的可用性问题，从而使这些问题作为再设计过程中的一部分被重视的可用性工程法。
1、可用性原则：系统状态有反馈，等待时间要合适；
2、不要脱离现实：使用用户语言而不是开发者语言，贴近生活实际而不是学术概念；
3、用户有自由控制权：操作失误可退回；
4、一致性原则：同一事物和同类操作的表示用语要各处保持一致；
5、有预防用户出错的措施：关键操作有确认提示，及早消除误操作；
6、要在第一时间让用户看到：识别胜于回忆，提供必要的信息提示（可视且易取），减少记忆负担；
7、使用起来灵活且高效：为新手和专家设计定制化的操作方式，快捷操作且可调整；
8、易读性：减少无关信息，体现简洁和美感；
9、给用户明确的错误信息，并协助用户方便地从错误中恢复工作；
10、必要的帮助提示与说明文档：无须文档就能流畅地应用当然更好，有一般的帮助提示与说明文档很重要，而且也提供便利的检索功能，面向用户进行任务描述，列出具体的实现步骤，并且不要太冗长。
根据经验，1位评估人员可以发现大概35%的可用性问题，5位评估人员可以找到75%的问题，所以参与评估的人数控制在5位以内即可。启发式评估多用于产品发布之前的设计评估。”

《腾讯网UED体验设计之旅》的笔记-第4页 - 我们了解用户吗

“偏听则暗，兼听则明”

《腾讯网UED体验设计之旅》的笔记-第116页 - css动画的主要样式

在动画的实现上，主要有两种方式：css动画和逐帧动画。其中css动画能够实现2D/3D位移、缩放、颜色和透明度变换以及简单的滤镜效果（如模糊）。它的体积小、效率高，是优先考虑的动画实现方式。逐帧动画通常以GIF图或PNG/JPG序列的格式呈现，这类动画还原度高，可以提供形变效果，但体积大，更适合展示时长较短，面积较小的可循环动画。