瞬间之美

按有用程度 按页码先后 最新笔记

• 

  第1页

  天天天蓝

  第一部分 指引用户 1 令人心动的第一印象 1.1 发现页面布局 1.2 引导用户的实现 1.2.1 应用古腾堡图表 人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。 1.2.2 使用颜色来吸引注意 颜色能把人的注意力吸引到特定的元素上去，尤其当某个元素的颜色与其他的形成反差时更.. (更多)

  第一部分 指引用户

  1 令人心动的第一印象

  1.1 发现页面布局

  1.2 引导用户的实现

  1.2.1 应用古腾堡图表

  人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。

  1.2.2 使用颜色来吸引注意

  颜色能把人的注意力吸引到特定的元素上去，尤其当某个元素的颜色与其他的形成反差时更是如此。

  2 凸显个性

  2.1 统一设计风格，形成积极的印象

  使用风格统一的符号

  3 导航之道

  3.1 告诉软件该怎么做

  3.1.1 每个人都想当指挥

  菜单不是基于对象而是基于任务，所以应为动宾词组

  4 链接生来不平等

  4.1 让环境提示成为引导的线索

  标签云：标签含有的项目越多，该标签字体就越大；项目点击的次数越多，该标签颜色就越深

  5 标签云里抬头看路

  5.1 你的创新是否有效

  5.1.1 什么时候该说不

  这个世界上不存在任何理由强迫用户思考，无论对于一个页面、一个场景、还是一个博客模板。

  我们没有理由要求用户学习了解为什么有些链接比其他的要大。

  5.1.2 如果你不是解决方案的一部分

  第二部分 学习

  6 开门见山

  对用户来说，一个简短的句子比一大段文字要来得有意义，及时这段文字的文笔很好。重要的并不是我们提供的信息量有多大，而是我们能够给他们提供真正需要的信息。

  7 为界面做标记

  7.1 停止标记你的假设

  检查应用程序中每一个控件的标记，并且问问自己，一个从没见过这个程序的人是否也能明白它的意思。把所有回答是“不”的项目列一个清单，要么修改这些标记使其变得通俗易懂，要么加上说明元素解释他们。

  首先，为大部分控件加上相关帮助文档的链接。其次，为各输入栏加上说明性文字，解释什么样的输入才是有效的。最后，修改几处标记，使它们的意义表达得更为清楚。

  设计不能只基于我们自己一向情愿的“假设”。相反，我们需要假设用户毫不了解我们的软件，随后给他们足够的信息以便帮助他们理解。

  8 生动传神的视频

  8.1 视频演示胜过千言万语

  8.1.1 使用视频来表述问题

  8.1.2 使用视频来表述想法

  8.2 极为简单的视频演示艺术

  第三部分 搜索

  把被动的网站浏览者转变为主动的活跃用户其实很简单，只需要把他们的目标从浏览转变为搜索。

  9 提出搜索词建议

  9.1 运用Poka-yoke机制，使用自动完成输入框

  “自动完成”指的是某种奇特的文本输入框。他们能够尝试猜测用户输入的文字，并且动态地搜索出适配的结果，然后推荐给用户，辅助他们完成输入。

  9.1.1 局限性

  用户可能不会注意到推荐列表

  用户往往会因为推荐而放弃自己先前的主张，但其实他们自己想输入的文字很可能比推荐的词汇更加有效。

  10 列出搜索结果

  10.1 信赖那些行之有效的标准

  提供回到搜索结果列表的出口

  11 精简你的搜索

  11.1 高级搜索也简洁

  11,1,1 递进显示

  递进显示：根据实际需要（即依靠用户的输入）而逐步显示控件，而不是默认把它们一股脑全堆在眼前。

  第四部分 深入

  12 视频播放器的标准化

  滑块控件大小、文本大小、播放时间（总时长，播放时长）、视频标题、分章节播放（非必要）

  13 巩固你的表单布局

  13.1 设计出行云流水般的表单

  布局一列显示，标签放在每个输入域的上方，居左对齐。这种布局让用户只用花最少的时间就能将标签和输入域对应起来，因此浏览速度比两列布局要快不少。用户只需要在同一个方向移动视线就能看到标签和输入域，而不用先阅读左列的标签然后再瞥一眼右侧的输入域。

  13.2 让“确定/取消”更完美

  费茨法则：当一个人用鼠标移动指针时，屏幕上目标的某些特征会使得点击变得轻松或者困难。目标离得越远，到达就越费劲。目标越小，就越难点中

  14 驾驭Wizard向导

  14.1 建立清晰的预期

  为每个步骤加上一个描述标题栏，展示所有的步骤，用颜色标出正处于哪步。用户可以随时瞥一眼自己正在哪个阶段，然后决定是否继续。

  15 最后的一英里：随时校验

  15.1 要纠错，也要赞扬

  用户正确地填写完某项后，在该项旁边显示一个绿色的勾号以表示“通过”。如果出错给红色提示。

  16 简化长表单

  16.1 清晰的预期

  17 让他们登录

  17.1 再一次改进标准

  17.1.1 网络用户名与用户姓名

  17.1.2 更上一层楼

  只输入名字和注册时所有的电子邮件地址。网站把电子邮件地址作为第一辨识规则，同事适配你在数据库存档中名字的任意格式

  18 计算字符数

  参照Twitter网站字符数，一开始不断减少的变量是灰色文字，而一旦用户输入字符数超过了120，该变量就会变红，提醒他们还剩下不到20个字符了。

  第五部分 参与

  19 创建个人资料

  19.1 递进地增加

  19.1.1 把数据变成仪表盘

  19.1.2 空白资料页面

  20 编辑

  20.1 在正确的时间显示正确的工具

  20.1.1 把高级的玩意藏起来

  递进显示是一种根据功能是否普及或必要逐步展现它们的方法

  21 开展社交活动

  21.1 朋友与随员

  22 显而易见的博客

  22.1 通往更好的博客的三条路

  博客应该便于浏览者扫描页面，以决定某篇日志是否值得阅读

  博客应当能更好地鼓励交流。最显而易见的办法是提供Trackback引用通告

  能够诱使人们阅读更多其他的日志

  22.1.1 解决方案

  在页面顶部有清晰的网站标题，紧随其后的是一段概要。

  它的下方是日志的标题，标题下方放上了一段简短的内容概要。

  后面是评论部分。

  最后是一个简短的表单，让用户发表评论。

  左侧的工具栏中有一个搜索栏，其后是几个链接模块，分别指向网站其他栏目、相关的日志，以及最受欢迎的日志。

  右侧工具栏顶部提供了订阅按钮。

  23 邀请讨论

  23.1 让你的顾客发表意见

  24 得到一个好的评分

  24.1 清晰胜于效率

  第六部分 管理信息

  25 让RSS更有意义

  26 自定义标签

  27 通过拖放来组织信息

  28 用系统通知来管理中断

  28.1 为改变而设计

  为发布更新设定明确的时间

  在更新公开发布之前，先在一小部分人中试用

  把通知邮件发送给每一个注册过的人

  利用通告区，沿着页面顶部的横条，里面包含着某个通知，并且通常会链接到另一个信息更详细的页面。使用的颜色和页面上其他颜色区分开来，才能引起注意。

  28.2 界面元素的再利用资源--利用欢迎界面

  第七部分 离开

  29.1 化简为繁

  29.2 动员用户返回

  sign-out时，回到Sigh-in页面，但同时也会看到一些他们希望你能深入了解的功能。

  29.2.1 空间的再利用

  29.2.2 发布消息

  它可以通过指出用户尚未发现的功能鼓励用户再次回到站点，或者引导用户了解新功能，甚至可以宣布网站新取得的成就，或者其他影响到整个用户群体的新闻。

  30 抹去那些尘封的用户

  30.1 变怠惰为热情

  在邮件时事通讯中加上链接或者提供折扣等等其他因素来吸引用户

  30.1.1 个性化的沟通

  发出去的讯息应该富有人情味的，而不是代办的、充斥着行业辞令和广告语气的营销套话。这类讯息应当是一种会话般的口吻，完全聚焦于接受方，而不是我们自己。

  30.1.2 调查

  简短的在线调查问卷，了解应用中还差些什么，或者是哪里让这些用户失望

  30.1.3 对话的机会

  为“尘封用户”提供一个机会与真正的开发团队交谈，并把他们的关注点和愿望描述出来。

  31 由他们去吧

  全文完 (收起)

  2011-02-23 14:55:13   3人收藏   回应

  收藏

  推荐
• 

  视频播放器的标准化

  苍浪 (混互联网)

  

  用CNN、TED和Youtube举例，说明视频播放器设计时应该注意的事项。 1、滑块按钮比反例NYtimes要大，在Web上估计够用，但在iPad\iPhone上其实比较难选中。如果可以在iPad上做针对性的优化，估计会更好； 2、“暂停”之后出现硕大的广告，此时点击图像区域当然是新开窗口去看广告。出于商业目的的用户体验降低，其实是可以理解的，但交互设计师是不可以接受的，因为这样用户就不得不“关闭广告”再点“暂停”或者直接点“暂停”；... (更多)

  用CNN、TED和Youtube举例，说明视频播放器设计时应该注意的事项。

  
  优酷播放器：www.youku.com

  1、滑块按钮比反例NYtimes要大，在Web上估计够用，但在iPad\iPhone上其实比较难选中。如果可以在iPad上做针对性的优化，估计会更好；

  2、“暂停”之后出现硕大的广告，此时点击图像区域当然是新开窗口去看广告。出于商业目的的用户体验降低，其实是可以理解的，但交互设计师是不可以接受的，因为这样用户就不得不“关闭广告”再点“暂停”或者直接点“暂停”；

  3、在显示已经过去的时间和总体上，与其他都相同处理；

  4、书中讲到TED一个很棒的地方，如果视频是分章节的，鼠标移动到视频下方的区域会浮出章节，然后点击之后就可以查看，而优酷是直接打开就提示“点击这里选剧集”，就很好的让用户知道了这个细节。

  另外，优酷还有一个很酷的地方，就是有些视频你可以鼠标移动到播放条，可以预览那个地方的片段（这个是借鉴国外网站的），另外还会把这个视频的某些特别精彩的点去标注出来，告诉观众这个点发生了什么，很不错。

  我想在体验上优酷差不多到头了，但应该还有可以增加的地方。

  比如在视频中引入主人公的环境或者主人公的衣服，来推荐购物。 (收起)

  2011-11-18 20:35:34   回应

  收藏

  推荐
• 

  第153页

  爱咋地咋帝

  我们真正想要的并不是建立友谊，而是一种简单而又不张扬的功能。它能激发人们阅读更多的文章、与网站发生更多的联系。 (更多)

  我们真正想要的并不是建立友谊，而是一种简单而又不张扬的功能。它能激发人们阅读更多的文章、与网站发生更多的联系。

  (收起)

  2011-08-26 10:32:21   1人收藏   回应

  收藏

  推荐

• 

  第1页

  天天天蓝

  第一部分 指引用户 1 令人心动的第一印象 1.1 发现页面布局 1.2 引导用户的实现 1.2.1 应用古腾堡图表 人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。 1.2.2 使用颜色来吸引注意 颜色能把人的注意力吸引到特定的元素上去，尤其当某个元素的颜色与其他的形成反差时更.. (更多)

  第一部分 指引用户

  1 令人心动的第一印象

  1.1 发现页面布局

  1.2 引导用户的实现

  1.2.1 应用古腾堡图表

  人们在浏览页面或布局的时候，视线往往趋向于从左上角移动到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下地阅读，久而久之视线自然会沿着这一路径移动。

  1.2.2 使用颜色来吸引注意

  颜色能把人的注意力吸引到特定的元素上去，尤其当某个元素的颜色与其他的形成反差时更是如此。

  2 凸显个性

  2.1 统一设计风格，形成积极的印象

  使用风格统一的符号

  3 导航之道

  3.1 告诉软件该怎么做

  3.1.1 每个人都想当指挥

  菜单不是基于对象而是基于任务，所以应为动宾词组

  4 链接生来不平等

  4.1 让环境提示成为引导的线索

  标签云：标签含有的项目越多，该标签字体就越大；项目点击的次数越多，该标签颜色就越深

  5 标签云里抬头看路

  5.1 你的创新是否有效

  5.1.1 什么时候该说不

  这个世界上不存在任何理由强迫用户思考，无论对于一个页面、一个场景、还是一个博客模板。

  我们没有理由要求用户学习了解为什么有些链接比其他的要大。

  5.1.2 如果你不是解决方案的一部分

  第二部分 学习

  6 开门见山

  对用户来说，一个简短的句子比一大段文字要来得有意义，及时这段文字的文笔很好。重要的并不是我们提供的信息量有多大，而是我们能够给他们提供真正需要的信息。

  7 为界面做标记

  7.1 停止标记你的假设

  检查应用程序中每一个控件的标记，并且问问自己，一个从没见过这个程序的人是否也能明白它的意思。把所有回答是“不”的项目列一个清单，要么修改这些标记使其变得通俗易懂，要么加上说明元素解释他们。

  首先，为大部分控件加上相关帮助文档的链接。其次，为各输入栏加上说明性文字，解释什么样的输入才是有效的。最后，修改几处标记，使它们的意义表达得更为清楚。

  设计不能只基于我们自己一向情愿的“假设”。相反，我们需要假设用户毫不了解我们的软件，随后给他们足够的信息以便帮助他们理解。

  8 生动传神的视频

  8.1 视频演示胜过千言万语

  8.1.1 使用视频来表述问题

  8.1.2 使用视频来表述想法

  8.2 极为简单的视频演示艺术

  第三部分 搜索

  把被动的网站浏览者转变为主动的活跃用户其实很简单，只需要把他们的目标从浏览转变为搜索。

  9 提出搜索词建议

  9.1 运用Poka-yoke机制，使用自动完成输入框

  “自动完成”指的是某种奇特的文本输入框。他们能够尝试猜测用户输入的文字，并且动态地搜索出适配的结果，然后推荐给用户，辅助他们完成输入。

  9.1.1 局限性

  用户可能不会注意到推荐列表

  用户往往会因为推荐而放弃自己先前的主张，但其实他们自己想输入的文字很可能比推荐的词汇更加有效。

  10 列出搜索结果

  10.1 信赖那些行之有效的标准

  提供回到搜索结果列表的出口

  11 精简你的搜索

  11.1 高级搜索也简洁

  11,1,1 递进显示

  递进显示：根据实际需要（即依靠用户的输入）而逐步显示控件，而不是默认把它们一股脑全堆在眼前。

  第四部分 深入

  12 视频播放器的标准化

  滑块控件大小、文本大小、播放时间（总时长，播放时长）、视频标题、分章节播放（非必要）

  13 巩固你的表单布局

  13.1 设计出行云流水般的表单

  布局一列显示，标签放在每个输入域的上方，居左对齐。这种布局让用户只用花最少的时间就能将标签和输入域对应起来，因此浏览速度比两列布局要快不少。用户只需要在同一个方向移动视线就能看到标签和输入域，而不用先阅读左列的标签然后再瞥一眼右侧的输入域。

  13.2 让“确定/取消”更完美

  费茨法则：当一个人用鼠标移动指针时，屏幕上目标的某些特征会使得点击变得轻松或者困难。目标离得越远，到达就越费劲。目标越小，就越难点中

  14 驾驭Wizard向导

  14.1 建立清晰的预期

  为每个步骤加上一个描述标题栏，展示所有的步骤，用颜色标出正处于哪步。用户可以随时瞥一眼自己正在哪个阶段，然后决定是否继续。

  15 最后的一英里：随时校验

  15.1 要纠错，也要赞扬

  用户正确地填写完某项后，在该项旁边显示一个绿色的勾号以表示“通过”。如果出错给红色提示。

  16 简化长表单

  16.1 清晰的预期

  17 让他们登录

  17.1 再一次改进标准

  17.1.1 网络用户名与用户姓名

  17.1.2 更上一层楼

  只输入名字和注册时所有的电子邮件地址。网站把电子邮件地址作为第一辨识规则，同事适配你在数据库存档中名字的任意格式

  18 计算字符数

  参照Twitter网站字符数，一开始不断减少的变量是灰色文字，而一旦用户输入字符数超过了120，该变量就会变红，提醒他们还剩下不到20个字符了。

  第五部分 参与

  19 创建个人资料

  19.1 递进地增加

  19.1.1 把数据变成仪表盘

  19.1.2 空白资料页面

  20 编辑

  20.1 在正确的时间显示正确的工具

  20.1.1 把高级的玩意藏起来

  递进显示是一种根据功能是否普及或必要逐步展现它们的方法

  21 开展社交活动

  21.1 朋友与随员

  22 显而易见的博客

  22.1 通往更好的博客的三条路

  博客应该便于浏览者扫描页面，以决定某篇日志是否值得阅读

  博客应当能更好地鼓励交流。最显而易见的办法是提供Trackback引用通告

  能够诱使人们阅读更多其他的日志

  22.1.1 解决方案

  在页面顶部有清晰的网站标题，紧随其后的是一段概要。

  它的下方是日志的标题，标题下方放上了一段简短的内容概要。

  后面是评论部分。

  最后是一个简短的表单，让用户发表评论。

  左侧的工具栏中有一个搜索栏，其后是几个链接模块，分别指向网站其他栏目、相关的日志，以及最受欢迎的日志。

  右侧工具栏顶部提供了订阅按钮。

  23 邀请讨论

  23.1 让你的顾客发表意见

  24 得到一个好的评分

  24.1 清晰胜于效率

  第六部分 管理信息

  25 让RSS更有意义

  26 自定义标签

  27 通过拖放来组织信息

  28 用系统通知来管理中断

  28.1 为改变而设计

  为发布更新设定明确的时间

  在更新公开发布之前，先在一小部分人中试用

  把通知邮件发送给每一个注册过的人

  利用通告区，沿着页面顶部的横条，里面包含着某个通知，并且通常会链接到另一个信息更详细的页面。使用的颜色和页面上其他颜色区分开来，才能引起注意。

  28.2 界面元素的再利用资源--利用欢迎界面

  第七部分 离开

  29.1 化简为繁

  29.2 动员用户返回

  sign-out时，回到Sigh-in页面，但同时也会看到一些他们希望你能深入了解的功能。

  29.2.1 空间的再利用

  29.2.2 发布消息

  它可以通过指出用户尚未发现的功能鼓励用户再次回到站点，或者引导用户了解新功能，甚至可以宣布网站新取得的成就，或者其他影响到整个用户群体的新闻。

  30 抹去那些尘封的用户

  30.1 变怠惰为热情

  在邮件时事通讯中加上链接或者提供折扣等等其他因素来吸引用户

  30.1.1 个性化的沟通

  发出去的讯息应该富有人情味的，而不是代办的、充斥着行业辞令和广告语气的营销套话。这类讯息应当是一种会话般的口吻，完全聚焦于接受方，而不是我们自己。

  30.1.2 调查

  简短的在线调查问卷，了解应用中还差些什么，或者是哪里让这些用户失望

  30.1.3 对话的机会

  为“尘封用户”提供一个机会与真正的开发团队交谈，并把他们的关注点和愿望描述出来。

  31 由他们去吧

  全文完 (收起)

  2011-02-23 14:55:13   3人收藏   回应

  收藏

  推荐
• 

  第1页

  咖啡猫 (轻猫淡写 weibo.com/1217463900)

  记录下这本书 (更多)

  记录下这本书 (收起)

  2011-04-22 14:47:20   回应

  收藏

  推荐
• 

  第1页

  尘宇碎星

  对角线平衡------人的视觉从左上到右下扫描~ 递进显示-------以+层层展开 视频代替文字------有一些屏幕录制，屏幕截图软件 动宾短语------让用户成为指挥者 避免重复，可让暂时不用的按钮变灰~ 想起来这些，待续。。。 (更多)

  对角线平衡------人的视觉从左上到右下扫描~

  递进显示-------以+层层展开

  视频代替文字------有一些屏幕录制，屏幕截图软件

  动宾短语------让用户成为指挥者

  避免重复，可让暂时不用的按钮变灰~

  想起来这些，待续。。。 (收起)

  2011-05-05 21:09:53   回应

  收藏

  推荐

• 

  第150页

  抱着橘子入睡

  似乎从第十二章开始变得有点意思了。 (更多)

  似乎从第十二章开始变得有点意思了。 (收起)

  2012-02-08 17:30:03   回应

  收藏

  推荐
• 

  第99页

  春天的绿袖子 (二零一一年六月二十一日)

  http://rhjr.net/dtm/ 表单中标签右对齐可以与输入域有较好的映射，但是两列的形式会影响浏览速度，所以通常采取单列布局，标签位于输入域上方左对齐。 无论往返的交互还是即时的交互，左侧ok右侧cancel都是具有代表性的按钮套装。值得注意的是ok并不是一成不变的，在注册表单中可以更清楚地表达为register now，cancel按钮作为第二处理方式，应将其弱化，register now仍作为一个按钮，而cancel可以作为... (更多)

  http://rhjr.net/dtm/

  表单中标签右对齐可以与输入域有较好的映射，但是两列的形式会影响浏览速度，所以通常采取单列布局，标签位于输入域上方左对齐。

  无论往返的交互还是即时的交互，左侧ok右侧cancel都是具有代表性的按钮套装。值得注意的是ok并不是一成不变的，在注册表单中可以更清楚地表达为register now，cancel按钮作为第二处理方式，应将其弱化，register now仍作为一个按钮，而cancel可以作为一个链接，这样用户甚至可以不用阅读文字，但往往可以猜到的东西，反而促使阅读（这一点可以应用到以后希望用户仔细阅读的地方）。

  Wizard向导，不仅仅是每个页面的next，还可以以标签的形式告诉用户当前在做什么，以后还有几步，每步分别是什么，而用户不可以点击后面步骤的标签而越过此步。通过这种方式帮助用户建立信心。

  除了步骤数量，还应该明确每步的高度，进而用户可以推断过程的时长。可折叠面板控件的界面可以满足这一要求，点击next自动弹开下一面板，并可将填过的表单变成链接形式以便修改。

  如何提示错误？Js警告对话框~NO！作为一种应用程序模式，强制浏览器失效，是很不友好的。对于表单的输入应该扬弃，输入域焦点失去的时候，进行判断，正确的绿色的√，错误的，要用红字提示，并用输入域的框变成红色。第三种情况就是跳过了部分表单并尝试提交，那么应该在页面上面提示错误的内容。第四要做到实时更新信息，比如涉及到数量*单价=总价时。

  继续说表单，要简历简单的预期，或许交互看起来复杂，实际上让用户使用起来更容易。书中提到的方法：在表单上方提示用户需要准备好的资料，避免在填写中有被欺骗的感觉。用户有时不需要为no买单，因此可以把yes or no的单选框变为复选框。

  挑战标准，同一个用户名，多次使用不同的密码，失败，点击forgot password？，进入一个新的页面会重新输入用户名，徒劳的。第二个挑战是没有密码，依旧有安全性，只需要用户名和邮箱，这两者必须匹配，用户名：姓名？姓？名？大写？小写？等等，任何一种形式都ok！~如果输入别人的用户名和邮箱，那么由于从来没有过登录记录，则会往邮箱发一封确认信。

  poke-and-hope变成poka-yoke。带字数限制的输入域：1.提示“you can enter no more than 50 characters.”2.(黑字)50.49.48......（红字）20.19.18....0。3.由于从上到下的阅读习惯，因此提示语应位于输入域的上方。

  (收起)

  2012-02-07 11:30:04   回应

  收藏

  推荐
• 

  第54页

  抱着橘子入睡

  就现在来说，我几乎没有读到什么真正有意义的内容啊。 (更多)

  就现在来说，我几乎没有读到什么真正有意义的内容啊。 (收起)

  2012-02-07 09:25:36   1回应

  收藏

  推荐