《设计之下——搜狐新闻客户端的用户体验设计（全彩）》章节试读

《设计之下》的笔记-第9页 - 第一章 项目启动

交互设计师完成低保真原型时，界面的大体布局已经确定，此时视觉设计师便可开始着手视觉初稿的设计；而前端工程师可以在高保真原型和视觉设计初稿完成后，开始开发，在这个过程中，视觉设计师进行按钮等元素的细节设计，并配合工程师切图；而交互设计师可以继续优化特殊情况的表现，如“无网络状态”时的反馈文案。对于交互设计师而言，低保真原型和高保真原型的完成便是两个时间点，因为这分别标志着视觉设计师和前端工程师开始着手项目。在这两个时间点上，都会组织相关的评审会，团队所有成员都会参与，只有大家达成共识时，才会继续下面的步骤；否则主导人员便需要优化，直到评审会的通过。两次评审后需要进行细节优化，而这些优化对于精益求精的设计师来说，是永无止境的。不过，这些优化不再受严格的时间节点约束，只需要在产品上线之前循序渐进的完成；在这个时候，设计师也可以着手下一版本的设计，或考虑产品大体框架上可能优化的点，为产品的发展提供一些建议。
我在目前的工作中，时常会过早陷入细节，这也是我一直在调整的，文中两次评审的思路应该对我有帮助。即使真正的工作中只有一次评审，在自己的工作流中，也要将工作分为两个阶段完成。

《设计之下》的笔记-第32页 - 第2章 解析需求

无论方法和需求发生了怎样的变化，解析需求的这个过程我们一定要认真对待。通过这个过程，我们应得到如下收获：
1. 理清本次项目所设计的系统架构问题，以及本一个功能之间的内在联系，为之后的原型设计奠定坚实基础。
2. 通过分析此次项目所服务的用户、平台（包括硬件特性、交互方式和竞品等多方面）、使用环境和目标等，明确每一处设计的评估标准。当我们犹豫不定时，便可以及时用这些标准来评估方案。
第二章值得反复读，体会交互模型、功能系统、信息架构在解析需求中如何发挥作用。
PS，文中提到v1.1.1的小版本迭代，交互设计师有5个工作日的时间来完成低保真原型。真是奢侈啊，我们产品加上交互估计小版本也就1～2天时间吧。

《设计之下》的笔记-第276页 - 应该养成记笔记的好习惯

这本书买了一两个月了吧，每次读了一会，思想就飘出去了。最后发现飘出去的原因是我每个字都想理解。所以从昨天开始，我就只看重点和希望看到的，果然，今天就看完了。
不过我准备把里面对自己有用划拉下来，这样对自己的理解和记忆也很有用处的吧，这也要感谢之前看的一本书《如何阅读一本书》。
——————————————笔记未完待续——————————————
交互设计
视觉设计
1.前期准备
UI需要了解产品经理的意图，UE为什么这样布局。设计的时候，要经常想产品的一些功能，希望大道怎样的效果。了解本期的重点功能是什么，做出重点规划。
UI设计师要有自己的判断。产品经理提到一些UI建议，不要盲目听从，而是追溯他这个想法的来源，然后解决问题。
每个产品要有自己的气质，气质提现在UI上，包括了排版布局、色系、图标的细节等。搜狐新闻的是“静心浸于内容，快速找到自己想要的。”
要充分了解自己所设计平台的特性。
理解UE，UE在布局的时候，细节部分知识提出合理化建议，但具体细微的位置思考，则是在UI上面来提现的，对细节点UI设计师要思考是否合理，别的软件是否也会这样呈现，怎样更好地优化
2.界面风格
界面风格就好比一个界面的灵魂一样，看到一整套UI作品，一般人会有一个整体印象，这个印象，其实也正是界面风格的体现。
创作UI界面，就和画人像一样，开始是要描绘这个头像的轮廓，然后再画大的阴影投影，再逐步深入刻画，最后这个人像会非常完整。很多情况下，UE只是交代了模块的摆放位置，但是具体的摆放还是要靠UI来呈现。
3.界面颜色
风格是界面的灵魂，布局是界面的骨架，那么色彩则是界面的血液，为界面注入活力。
软件的主色决定软件的整个风格，这个主页不会占大面积，往往作为title bar，即软件头部来显示，或者页面主要元素颜色显示，其他则作为辅助颜色来搭配。
主色和辅助色。作为一整套的软件，作为一个容器，要能做到最多一种主色，辅助色同色系，即便辅助色不同色系，也不占用过大面积。
渐变。在趋向于扁平化这种设计风格的同事，色彩上运用一点点微妙的渐变，就像香水在前调后还能让人感受到中调和后调一样增加界面品质。见面不仅增添了界面的细节品质，还增加了点击的欲望。
强调色。界面里往往有很多提示，不可忽略的信息，都爱做强调色处理。强调色不仅仅用于积极告知用户该怎么做，也告诉你做的事情所产生的结果。
用我们产品最适合表达的色彩，用能传递给用户更合理感官的色彩，才是阅读类软件界面色彩选择的第一原则。只有适当湿度运用美妙的色彩，才能在第一时间抓住用户眼球的同事，让他更想也更有精力深入的了解你的产品。
4.优美图标
5.界面质感
扁平化设计不仅仅是表示视觉元素上的扁平，它也以为着产品结构上的扁平，尽可能地让产品的操作流程更加简单、便捷。
界面上的质感是一个锦上添花的事情，它有时并不影响整体使用，但是质感用的适当，加的舒服，会营造更好的使用环境，给用户带来更优质的使用。
6.UI动画
7.切图
点9。切标注时和工程师进行有效沟通。
8.与工程师的交流
不要在功能实现初期去烦他们，那会他们功能还没写全呢，根本无暇去管UI的事情，所以设计师只需要每天更新安装包，大小分辨率手机都每天看看，把问题记下来，大问题直接提，小问题写成“to do list”的文件，然后发给每个人。切图提供完成后，就开始进行UI这个工序，对UI要勤动腿动嘴，不要嫌麻烦，耐心和工程师讲解，让他了解做成什么样子才是我们想要的。
设计师内心要先有自己的一套取舍之道。不能只单单从视觉一方面来权衡，但是有时候也要有自己的坚持。
9.灵感
优雅的等待。隐藏的情怀。
10.关于品牌
三、他们眼中的设计师
产品经理
设计师与产品经理的关系，基本属于面子和里子的关系。产品经理把我用户需求，设计师理解用户感官，产品经理提供方向和理念，设计师雕琢细节和把控审美，完美配合，方能打造独一无二的产品风格。
　　审美人人都有，往往人们宁愿承认自己人品低下，也不会愿意承认自己的审美低下。
　　在美的问题上，产品经理就需要相信设计师的专业，相信他的职业能力。只要设计师清楚的知道，自己不是在制造技术制造创新，而是基于现状发现美打磨美，团队就有义务给予设计师足够的发挥空间及话语权。让懂美的人安安心心的设计美。
　　设计师越早介入项目的时间，就了解核心功能。

《设计之下》的笔记-第52页 - 第3章 原型设计

文档中的一个个线框图是相互关联的，有时候设计师总是想尽量把相关联的线框图放在一个页面中，觉得这样会更加直观。而实际上一页能展示的内容却总是有限的，如果在同一页中堆太多线框就会挤压说明文字的空间，以后再添加或者修改内容都会非常困难。拥挤的画面也会增加阅读时的理解难度，所以为了保持文档的易读性而多分出几个页面是非常有必要的。
两种方式的文档都写过，后来基本是web的一页只放一个界面，mobile的一页会放多个页面。因为原来mobile的一页放一个页面有工程师反应没有关联性。其实我还是很喜欢一页一个页面的，下次的文档中再试一次，各类文字、引线、箭头也尽量标准化。

《设计之下》的笔记-第17页 - 第2章 解析需求

在设计过程中，产品文档可能随时调整。有时是战略发生了转变，有时是交互、视觉、前端、后台、测试，甚至是市场、运营和渠道的同事从各自的专业角度，发现了更合适的方案。在这个时候，设计师不用惊慌和抱怨，感到自己似乎做了无用功。改变会让产品更好，而思考也会带来收获。没准这次没用上的设计，在下一个版本中发挥了大作用。

《设计之下》的笔记-第一章 - 第一章

1.设计要考虑最终版本的规划，相似的设计在同一个版本完成有利于统一和节约成本2.要分情况考虑每一个功能，要考虑出发时间时可能的场景用户体验五要素【操作】符合平台和产品的设计规范；产品要有大局观，对整体的架构有把握，没有信息流通的障碍；交互细节合理，考虑全面，有新意【环境】限制和优势（操作选择和地理位置）设计信息架构【以用户为中心，通过拆分用户的行为，力求为他们设计最简洁的操作步骤】【注意技术的实现】【从产品策略和延展性的角度考虑】交互模型关注的是用户与产品的关系，功能系统侧重的是产品内部各个模块之间的结构1.理清本次项目所涉及的系统架构问题，以及每一个功能之间的内在联系，位置后的原型设计奠定坚实的基础2.通过分析此次项目所服务的用户，平台（包括硬件特性，交互方式和精品等多方面）只用环境和目标，明确每一处设计的评估标准来评估方案。评论数是不可控数据，对于没有评论或评论特别多的极端情况，居于最下不会破坏视觉的焦点，张驰度较大试题低保真模型对于特殊硬件和特殊人群的设计有更重要意义布局/结构 位置/顺序（设计时要把希望用户先注意到的内容放在比较显眼的位置，把相互关联的内容放在相邻的顺序上，才能有效的展现呢绒，引导用户按照你的期望去使用产品） 层次/轻重大局观（设计师主动了解各部门的想法和立场，充分理解和消化需求，才能有机会再闲置中做出平衡而美丽的设计）使用自然思维而不是程序思维围绕用户的目的和行为设计让用户少动脑而不是少操作将常用功能提前遵循已经成型的用户习惯【动画反馈】——边界反馈 ，过程反馈（了解目前所在状态），结果反馈情感体验已经渐渐成为产品之间竞争的一个关键，有没的动画效果能比功能和内容更快让人产生惊叹和愉悦感。【视觉】产品的创造者要创造产品的气质，设计洁面前和铲平经理讨论后，选择色系和想要表达的气质，符合产品经理所要求的要给用户呈现的感官体验，产品的延续着在后期迭代功能时要谨记设计围绕着这种气质。要充分了解产品的意图，平台的差异和风格的延续字体大小是否满足用户需求，标题摘要字数是否满足用户理解，图片的位置和大小是够让用户舒适阅读，信息符号化还是文字化，标签的可用性（人的大脑需要信息的连贯性，因为标题另起一行，下面的见解则需要和标题左对齐依次排列，所以排列到另一边，如果与之相反，标题左下是图片，文字的连贯性就会非常差——利用空间，展示更多内容，不会造成严重的吞字）有时候图标的小细节，表达了设计师的一种精神追求，体现在界面上，提高了整个软件的精神品质，这是一种内在的东西，前提是，图标表意非常明确下的微小创新【按下的反馈】大小的各种反馈，轻重，一方面和索要表达的反馈力度有关，一方面和软件本身的整体风格有关，所以在选择点击状态时，不要随便了事。【三人行必有我师】好的设计是一定是丰满了自己的同事潜移默化地影响着周围的人，无论是快捷的思维方式还是良好的设计品味，只有让整个团队无论从审美品味前瞻性，思维方式下都得到共同提高，才不会频繁出现拖后腿的情况，也只有当你足够强，足够广播，足够有影响力，才能更大程度低发挥自我价值。【驴唇对马嘴】设计是在工作过程中需要掌握更多跨专业只是，理解不同部门的立场，同时必须学会表达自己的想法和坚持自己的立场弄清对方的真是想法，确保沟通时处于同一层面说同一事情。【现煮咖啡后放糖】注重细节意味着要投入更多的精力和时间。要按照需求的主次和用户的习惯归纳出主要的框架，在确定了总体的框架后，才结合设计风格和主题色彩确定具体方案。【认真你就输了】每个人都会维护自己的想法和观点，这点无可厚非，但我们没有必要像维护自己的人格一样维护他，因为每个人都观点都有一定的局限性，试着体会他人观点，控制自己的情绪，理性的看待，在轻松地情分析啊把讨论结果确定。如果坚持己见的不是你，请清楚列出你的观点后，静静滴看着他，相信群众的眼睛是雪亮的。【外援上场】俩人一起找一个权威人士介入讨论，年轻如你我，工作经验有限，思路也有限，找个权威人士，无论从经验，思维广度和深度都胜出一筹，即使一时解决不了，也会提出我们从未思考过的地方，给出新方向。【巧妇难为无米】不要局限于设计新动向，排版方法等，更多的平时自我整体设计品味的培养，动脑和动手能力，以及每次设计后经验的归纳和总结。只有当这些一并存在的时候才好。【不要临时抱佛脚】点滴收集，加强训练。【大处着眼小处着手】设计关注的大，不应该是市场的大，而是对历史，现在，甚至是未来，那些恒古不变的文化资源的关注，怀抱这样的理想，才不会被琐碎的设计工作积累，才会在日积月累的设计景艳霞，知道自己的设计风格是什么，不会朝九晚五地跟着每年市场的流行色变来变去。【这样就好】不是对产品品质的不负责任，更不是降低对最高审美的理想追求，而是在可以利用的资源范围内，充分将资源进行最合理的重组后，得到最适合产品定位的设计方向和风格。虽然一定程度上造成小量用户的不满足，确可以规避为不断满足个性需求而带来的超负荷的冗杂设计。【因专业而信任】设计师介入项目的时间越晚，对产品核心价值理解就会越浅，设计的产品就更容易浮于表面的光鲜，经不起时间的推敲，设计是洗完自己的设计更贴实与产品本质，就要更积极主动，实时为创造自己可以在近处了解产品的机会，不动声色地从源头开始催化设计与产品的融合。【设计驱动开发】所有的设计必须在项目迭代初期就已论证和确认，任何设计的修改都会不同程度地导致工程师的工作成果的浪费和流程秩序的打乱，甚至产生蝴蝶效应，牵一发而动全身。这个趋势越往后期越严重，积重难返。【简单是最高级的复杂】最高级的复杂是值得深思和推敲的，所以不要让自己的天马行空的想法增加不必要的负担。

《设计之下》的笔记-第17页

交互设计的五要素包括：人，动作，环境，工具，目的。
人/通过工具/完成动作/达到目的/在环境里。
总结：
1.设计要考虑未来版本的规划，想死的设计在同一个版本完成有利于统一和节约成本。
2.要分情况考虑每一个功能，要考虑出发事件时所有可能的场景。

《设计之下》的笔记-第81页 - 交互设计有话说——反馈提示

这篇读书笔记提取了书中的要点并配上实例，分享给大家。
一、为什么要反馈
1、以人与人的交流为例
1）人与人的交流中，无法忍受的一种情况是：对方对自己说的话没有反应，好像视而不见。
2）没有反馈或是不友好的反馈，就好像冷冰冰的人一样，会给用户带来无助或不悦的负面体验
2、及时恰当的反馈的用处是什么
1）能够告诉用户下一步该做什么
2）帮助用户做出判断和决定
二、反馈的形式
反馈的形式多样，所有的提示都应该在恰当的时候出现在恰当的位置， 用简短而清晰的文字提供有用的信息，不让用户产生迷惑。
1、气泡状提示
1）用处一
通常是短暂出现在画面上，就像气泡一样过一会儿就会自己消失，并不需要对它进行任何操作
通常用于告诉任务状态、操作结果
下图三个例子都属于操作结果的反馈提示，图1提示添加收藏成功，采用系统自带的toast吐司提示；图2是新微博加载成功的提示，在导航栏下方浮在内容区上方；图3是QQ空间添加到歌单的提示，显示在导航栏背景色与状态栏颜色一致，效果不错。尽管展示位置不同，但这些提示都是短暂的出现在画面上，1秒左右消失。
2）用处二
用于引导，就像漫画中的对话框一样，带有一个指向具体位置的小尖，提示用户需要关注哪个位置
与用处一不同，这类引导类提示通常不回很快消失。如下图，图1奇妙清单、图2知乎的例子，都提供了关闭按钮，用户既可以点击指引区域也可以点击关闭按钮，来让提示消失；图3来自图片社交App——in，用户点击指引区域才能让提示消失。
3）不足之处
容易被用户忽略，所以不适合承载太多文字或重要信息
2、弹出框
1）用法
一般会带有一两句说明文字和两个操作按钮，用于确认和取消重要操作（比如，是否删除内容）
通常会用明显的颜色，突出显示可能造成哟过户损失的操作项（比如，“删除”、“不保存”）
2）特点
弹出框的出现，会强迫用户关注弹窗内容和操作，并屏蔽背景的所有内容
对用户打扰最大的一种提示
3）设计注意
弹出框上的说明、按钮上的文字，最好言简意赅、一目了然，能帮助用户快速做出决策。 因为通常用户都想赶快关掉弹出框，以便接着完成被打断的操作。
设计过程中要避免滥用弹出框提示，对于不太重要又要反馈的事可以用气泡提示表示。
3、按钮/图标/链接的按下状态
1）基于人在现实世界经验
在现实中按一个按钮会立即有按下状态
2）人机交互
当用户在屏幕上按下一个按钮或链接时，也需要有状态的改变，让用户知道界面已经接收到他的操作了。
如下图，图1是iPhone照片界面，点击按下右上角的“选择”，文字透明度变高、颜色变淡；图2是豆瓣App，点击某个区块时显示背景色表示按下的效果；图3、4是知乎App，点击按下按钮时，背景颜色加深，同时按钮尺寸动效缩小。
4、声音
1）常见例子
虚拟键盘在按下时的咔嚓声
短信、邮件发送成功后的“嗖”一声
微信摇一摇手机之后的咔嚓声
拍照App按下按钮是的咔嚓声
2）设计注意
恰当使用声音反馈有点睛效果，但过多的使用反而会变成一种打扰
不能将声音作为主要反馈，且要给用户关闭提示音的权利（因为用户所处的环境多样，可能很吵而听不见声音，也可能不适合打开声音）
5、振动
1）用处
一种比较强烈的触觉反馈，可用来代替或加强声音提示
2）例子
在手机系统中应用广泛，比如来电、短信、已连接充电 在手机App中较少用到
3）设计注意
不要乱用为好
6、动画
1）用处
给用户提供有意义的反馈，帮助用户直观了解操作的结果
精美有趣的动画，能给用户留下深刻印象、提升使用时的愉悦感，甚至成为产品吸引用户的一个因素
2）例子
iOS系统在删除邮件、照片时，通过拟物化的动画效果，让用户知道操作已经生效，即——不要的邮件或照片已经被丢入了垃圾桶。 这种形象的动画，帮助用户清晰感受到操作的执行过程，并增添了乐趣。
在一些会持续比较久的操作里，比如下载、删除大量文件，用动态的进度条展示已完成的进度，并在可能的时候提供解释信息，能够减少用户的焦虑。
很多有趣的下拉刷新、上滑加载更多的例子，让等待不再枯燥
三、反馈的内容
1、信息
1）设计注意
文字信息应该简洁易懂，避免使用倒装句，最好一两句就能将意思表达清楚
避免使用过于程序化的语言
页面已有详细说明文字的操作，其反馈信息可以简单一些，不必重复页面已有文字。比如昵称，界面上已有格式要求时，反馈错误时只需提示“昵称不符合要求”
适当使用图标，可以吸引用户注意，帮助用户判断提示的类型。
2、警告
1）用处
警告框，用于向用户展示对使用程序有重要影响的信息。
2）特点
浮现在程序中央，覆盖在主程序之上
它的到来，是由于程序或设备的状态发生了重要变动，并不一定是用户最近的操作导致的
通常至少有一个按钮，用户点击后即可关闭窗口
一般会有标题，并展示额外的辅助信息
3、错误
1）用处
提示用户操作出现了问题或异常，无法继续执行
2）设计注意
错误提示，告知用户为什么操作被中断，以及出现了什么错误。
错误信息要尽量准确、通俗易懂。
有效的错误提示信息要解释发生的原因，并提供解决方案，以使用户能够从错误中恢复。
4、确认
1）用处
用于询问用户是否要继续某个操作，让用户进一步确认，为用户提供可反悔、可撤销的退路。
2）设计注意
当用户的操作结果较危险或不可逆时，通过二次选择和确认，防止用户误操作
四、反馈出现的位置
1、状态栏
1）优点
很好的利用空间
2）缺点
位置不是很明显，建议只提示重要程度不高、或有跨画面显示需求的提示
3）例子
如下图，图1、2是新浪微博App，在写微博界面点击“发送”，回到原界面同时状态栏提示发送状态；图3是网易邮箱大师App，邮件发送后离开写邮件界面，同时右上角提示邮件的发送进度。
通常发送内容时，需要一定的时间，为了不让用户空等、还能去做点别的事儿，将等待过程弱化是很有必要的。

2、导航栏
1）使用场景
一般是连接状态的展示，表示产品正在努力连接网络、拉取数据中
适合显示临时的较重要的提示类信息
2）例子
如下图，图1是QQ音乐添加歌单的提示，前文也有提到；图2是AppFlow，加载内容时在导航栏提示，加载完成后再回到原状态，这种方式在Reeder中也有用到。
3、内容区上方
1）使用场景
位置在内容区上方、导航栏下方，通常为下拉刷新，是加载新内容的一种快捷方式。
默认的提示信息是隐藏的，向下拉界面时才显示对应的提示信息，以引导用户操作。
4、屏幕中心
1）使用场景
通常为整体性的比较重要的信息提示
需要引起用户重视的、系统提示均可以显示在此位置
2）设计注意
现在大家越来越追求产品风格，奢易属于自己产品的独特反馈形式、并自定义某个固定的位置显示提示也较为流行。
5、菜单栏上方
1）使用场景
可根据需要灵活的使用，基本没什么限制
可以是应用的整体信息的提示；也可以是与界面底部内容相关的提示。 比如，加载更多内容、或气泡提示表示图片上传中 等等。
2）例子
如下图，豆瓣App，加载首页内容，暂无更新的提示。既告知了用户结果，又引导用户去搜索更多兴趣，让首页内容变得更加丰富。
6、底部（覆盖菜单栏）
1）使用场景
在此位置显示提示，并没有什么特别的好处，或许是对于新形式的一种追求。
2）例子
如下图，Keep下载视频的提示，进度条显示在底部，此位置较为明显也不会影响用户浏览内容区。
五、反馈的设计原则
1、为用户在各个阶段的反馈提供必要、积极、即时的反馈
2、避免过渡反馈，以免给用户带来不必要的打扰
3、能够及时看到效果的、简单的操作，可以省略反馈提示
4、所提供的反馈，要能让用户用最便捷的方式完成选择
5、未不同类型的反馈做差异化设计
6、不要打断用户的意识流，避免遮挡用户可能回去查看或操作的对象。
如果感兴趣，推荐大家也读一读这本书《设计之下：搜狐新闻客户端的用户体验设计》
##
同步发表至微信公众号：青溪札记（qingxizhaji）
一枚交互设计师正在这里分享产品体验记录、交互设计思考心得、阅读笔记、生活乱弹。