《Web界面设计》章节试读

《Web界面设计》的笔记-第52页

事例：
Gmail：邮件左边有一个表示可拖动的纹理视觉提示，鼠标只有经过那个地方时，由箭头变为抓住的小手，小手右侧出现你正拖动一个邮件的提示，这个提示左上角与鼠标位置对齐。
拖动邮件到左侧文件夹处，如果是可以放置的文件夹则这个文件夹显示被选中的颜色（如图），如果不可放置，文件夹无任何视觉变化。
QQ邮箱：邮件任何一处都可以直接拖动，需要移动几个像素后才会显示拖动提示，拖动到文件夹时，无论是否可以放置，文件夹都会显示出选中状态，在经过可放置的文件夹时，提示语会多显示一个绿色对勾表示可放置。鼠标放在邮件上时，光标没有变化来表明可拖动。
网易邮箱：基本同gmail，邮件左边有一拖动纹理暗示，鼠标经过时箭头变为十字型，经过文件夹时，文件夹都显示成鼠标经过状态，如果是不可放置的文件夹时，鼠标右侧提示为红色，有红色无效标记；如果是可放置的，鼠标右侧提示为绿色，有绿色对勾。

《Web界面设计》的笔记-第250页 - 原理六 及时反应

根据比较通行的设计翻译，即时反应应该叫即时反馈比较恰当。

《Web界面设计》的笔记-第299页 - Designing web interfaces

本书全面深入的探讨了设计交互的内容，并总结6个简单的原理：直接了当、简化交互、Stay on the page、提供邀请、使用变换、即时反馈，每一个原理的背后都有很多详细的例子予以分析论证，很多很多都是我们日常上网中能够遇到的。
每一个交互设计的背后都有许多的趣味瞬间，都需要认真仔细的去思考每一个进程。任何一个交互瞬间都要充分的去考虑，这样才能拥有完美的交互。
书中很多都是雅虎的范例，很多案例现在都在被互联网使用，足见当时的雅虎是如此之强大。稳中求变，不断创新是根本，过去的成绩不能说明一切，需要稳固并发展之。

《Web界面设计》的笔记-知识要点 - 知识要点

用户体验六原则 《WEB界面设计》 读书笔记
http://www.cnblogs.com/trance/archive/2011/10/19/2217752.html
《Web界面设计》读书笔记1
http://blog.sina.com.cn/s/blog_71944a840100pclv.html

《Web界面设计》的笔记-第181页 - 原理四 提供邀请

《Web界面设计》的笔记-第26页

趣味瞬间
拖放过程涉及到大量细节。在拖放期间，须要处理许多特定的状态。我们反这些微状态称为趣味瞬间(interesting moment)。
1、用户怎么知道可以拖动
2、拖放对象的目的是什么
3、在哪里可以或者不可以放置拖动的对象
4、通过什么视觉元素来表示拖动能力
5、拖动期间，怎样表示有效和无效的放置目标
6、是否允许用户拖动实际的对象
7、还是只允许拖动实际对象的幻影ghost
8、还是拖动一个小缩略图
9、整个拖动与放置期间，要给用户哪些视觉反馈。
趣味瞬间网格
行是6个相关元素、列是15个事件。它就像一个备忘录，可以确保不遗漏交互期间要处理的任何情况。每个交叉点上，就是想要实现的行为。
iGoogle中拖放交互的趣味瞬间风格，处理了8种交互瞬间。

《Web界面设计》的笔记-第1页

一：直截了当 （在哪里输出，就允许在哪里输入）
1、页内编辑
2、利用拖放
3、直接选择
（启动与关闭，进入与退出的交互应该是对称的）
二：保持简洁
4、上下文工具 （恰当的弱化、隐藏）
三：减少跳转
5、覆盖层 （浮层、弹出窗）
6、嵌入层 （抽屉）
7、虚拟页面 （Tab、悬停预览等）
8、流程处理 （购物车下拉、浮层、新页面...）
四：提供邀请
9、静态邀请
10、动态邀请 （使界面更具魅力，增进沟通，使用户容易理解）
五：巧用变换
11、变换模式
12、变换目的 （如豆瓣购书单删除书时，使界面更具魅力，增进沟通，使用户容易理解）
六：及时反馈
13、查询模式 （便捷操作，预防错误）
14、反馈模式 （进度指示、渐进展示、及时反馈）

《Web界面设计》的笔记-第1页

可读性很差的记录
Interaction 09: Parti & The Design Sandwich
http://www.lukew.com/ff/entry.asp?775
讲到parti 构想的时候 提到了建筑学模型 ↑
同时类比了web设计
设计原理
——————
各种用途的
能满足人们or组织交流、同学及工作需要的应用程序
——————
设计注意事项
的三层Sandwich状物。。。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
书中有很多反模式，很有趣，这种反模式现在在国内各大网站也比比皆是
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
书中资源
官网 http://designingwebinterfaces.com/
flickr上的图片资源 http://www.flickr.com/photos/designingwebinterfaces/
（顺便google的时候一道拖出来的http://www.slideshare.net/billwscott/designing-web-interfaces-presentation等等）
六大原则 1.直截了当 2.简化交互3.足不出户4.提供邀请5.使用变换6.即时反映
1. Make it Direct{1.直接编辑内容（flickr）2.利用拖放（igoogle）3.直接选择 }
2.Keep it Light weight{Digg,Fitt`s Law,上下文工具(egDigg)}
3.足不出户{心流(Flow : The Psychology of Optimal Experience),变化视盲,虚拟滚动（web应用程序越像桌面应用，就越容易利用用户已有的桌面应用程序操作经验。），内置分页，传送带，ZUI（很嗲HardRockCafehttp://memorabilia.hardrock.com/，Aza概念视频演示http://www.azarask.in/blog/post/firefox-mobile-concept-video），流程处理（魔法原理http://www.cooper.com/#training:interaction_design）}
4.提供邀请{悬停邀请（视觉提示，动态响应&静态显示），变换模式，lightbox effectlightbox effect （通过加亮&减暗）用途（1. 突出重点 2.表明活动状态 3 表明未就绪 ），聚光灯效果，改善感知性能Improve perceived performance}
5.6略
21世纪已经过了10年！ 时光飞逝！
ps 有bug 竟然不能评论 提示页面不存在摔

《Web界面设计》的笔记-第1页

原作者 http://www.douban.com/people/2196493/
原作者书评: http://book.douban.com/review/3586734/
Web界面设计
封皮上是这样描述本书的：想知道怎样在今天的Web上创造伟大的用户体验吗？……本书以当前最流行的Web站点为例，介绍了两大良行之有效的Web界面设计模式。如果你想构建或重构站点，并希望站点以丰富的交互为特色，那么本书就是你出奇制胜的宝典。
首先，这是一本工具书。
其次，这是自认为一本比较糟糕的好书。好书，因为它提供了大量思路与操作办法（“最佳实践”的部分）；糟糕的是平庸的用例和花里胡哨的组织（重复与滥用）。鉴于此，我废弃书中巧言令色、不知所云的“六大原理”，按功能重新组织。另外，这本书定价80元，有点离谱。
正文之前，必须强调：“伟大的用户体验”并不等同于原理和模式的叠加，而是有选择、有特色地按需部署。现在的互联网富交互技术已经呈现泛滥之势了。
一、鼠标原理
涉及鼠标的“直接操作”分类到鼠标原理中。
悬停即现，基于悬停显示工具可以减少界面上的视觉干扰。设计时要避免任何元素的偏移；否则用户的视线就到了不该到的地方。 “编辑”链接
页内单击编辑内容，一来，用户不用离开页面；二来，编辑时可以直接参考上下文。要么能让用户知道这里可以编辑，要么就加上“编辑”的字样或按钮。
书中貌似没提到这点，但用过网上地图的人（可能）知道，有“放大地图”的功效。关于此条的建议同下。
右键菜单，执行任务就像应用程序那么方便了。右键菜单一般不容易发现，所以一定得具有可替代性。 拖放布局
拖放排序、布局和拖放处理任务，符合用户的心智模型。要适时地提示可以拖放，算好启动拖放的距离单位（5像素）和时间单位（按住鼠标0.5秒）。拖放时，用户需要随时获得必要信息。 滚动实时加载新内容
滚动实时加载新内容，脱离翻页的枷锁。基于个人所有的连续性内容用这个办法比较好。个人认为，还应该保证显示的流畅性。比如，谷歌阅读器和谷歌图片搜索很流畅，而人人网和QQ空间老给人一卡一卡的感觉。
二、键盘原理
归类方法同鼠标原理。
用户不用输完也许就能命中。一般而言，每输入一个字符显示一次反馈比较好。保证有足够的有用信息基础之上，选中建议条目也应提供多种办法：回车、上下箭头和鼠标单击。我认为，取消建议条目也应如此。
同上。个人认为，自动完成对条目的精确性要求更高，一次也不宜给过多条目。
比如用户密码强度。
三、显示原理
显示原理中包含的模式与鼠标和键盘没有直接联系，它作为一种辅助效果，简化交互，提升用户体验。
突显界面变化。个人认为，如果用得乱七八糟的话，还是别用了。 扩展与隐藏
用不着的相关内容或其他面板可以隐藏起来。这是一种很古老的技术了，用的时候要注意切换时的连贯性，硬生生地割裂画面就不好了。 菜单按钮
它提供默认的按钮操作，又有更多操作的提示，方便快捷。设计时，避免目标过小，另一方面，保证键盘和移动设备能正常访问。
书中写的是删除一条评论时应简化步骤，保证在一个页面之内。这个……唔，现在都是这样做的吧？什么，你还不是？
有了新功能（商品），或者网站改版，用静态（或动态）页面引导用户学习、认识。静态页面引导可以利用未完成的区域引导用户操作，人类的天性会促使用户想“完成”它。动态引导（比如小气泡什么的）则该简明扼要、过程简单。我认为，还要能屏蔽引导或再次打开引导。
个人认为，添加了这样部件（比如购物车或聊天窗口），能在访问多页面的同时，集中某个任务的操作。 弹出层
书中用词是“覆盖层”，我认为“弹出层”更通俗。有了弹出层，便可以在文本流中处理任务，省去了跳转页面的麻烦。相比弹窗，它占用资源少，速度快，更容易控制样式。可以用作“确认对话框”、“详细信息”和“输入覆盖”等。
定时刷新无须用户介入就可以保持站点内容新鲜，极其方便。唯一需要注意的是，刷新不能太频繁，要在易读和关联之间寻求平衡。
这一点夹杂在书中各个角落，无非是淡入淡出、平移滑动之类的效果。适当的缀饰，网站的流畅性和用户体验肯定上一个档次。

《Web界面设计》的笔记-第73页

混合选择
两种模型混淆
在同一个位置上有3种交互方式：
1 使用 切换选择 来选择，以便执行编辑，删除等操作；
2 使用 对象选择 来启动一次拖放；
3 通过鼠标单击打开。
事例：
Gmail
首先选中第一条 ：
拖动第二条：
yahoo mail
网易mail
QQ邮箱（同网易）
当拖放到文件夹再返回邮件列表区时，松开鼠标按键：
所有邮箱都会把选中状态返回到拖放之前的状态。
但是
QQ邮箱，鼠标返回到被点击启动拖放动作的邮件上方时，会打开该邮件，返回到其它邮件上方，即使是复选框被选中的邮件，也不会打开。
其它邮箱都不会打开任何邮件。