瞬间之美-web界面设计(part1,part2).pdf

瞬间之美 WEB 界面设计如何让用户心动 [美]Robert Hoekman,Jr.著 向怡宁译 前言 良好的用户体验，全在于那些完美的瞬间 1. 瞬间是什么？how to define it 进入网站的刹那，如何观看视频，寻找注册，联系公司等等 另：对于瞬间设计师应该做些什么？ 他说“标准用户”的概念触及到的是交互式体验目标，而不算是生活体验然后说在这个瞬 间我们希望用户做什么， 界面又应该如何鼓励他们完成这个任务， 而且还需要考虑这位用户 在此刻的目标是什么？我们的设计又如何帮助他实现目标？他的目标是想了解一个新网站 吗？是想找到某些具体的信息等等 2．每一个瞬间是完整的用户体验的部分 用户在这个瞬间心情愉快，效率很高从而感觉得心应手是设计是的目标 我们的工作不是设计花哨的屏幕，而是要设计美好的瞬间 为瞬间而导航 用户在每个瞬间都将发出各种各样的行为，可能注册，创建，共享和参与，也可能犯错，遗 忘，注销 这本书讨论如何设计支持所有行为的界面，并创建交互行为鼓励输入、编辑和共享，激励他 们完成我们希望他们做的事，并讨论如何设计各种手段来提升工作效率 第一章 令人心动的第一印象 第一印象就是第一时间就吸引人们的眼球。

Case：专门面向平面设计师的社区网站 分析：站点的主要目的是展示社区成员的艺术创作以及相关新闻 站点的业务目的，也就是首页，是吸引浏览者注册并成为该社区的成员需要一种设 计诱使用户注意到 sign up now 现在就注册按钮同时让他们想去单击它 1.1 发现页面布局 关键字：throw 布局是页面设计最基础的元素它是内容组织的必然结果，是逐渐成形的 做法： ①将所有栏目区域都扔到显示屏上，然后移来移去不断的调整让它们彼此协调 类似拼图游戏 ②注册区域=颇具号召力的标语+一个按钮 题外话 Automattic 的一次飞跃 Automattic 的博客软件 WordPress 的设计研讨会 改动是增大注册区域为一个很大的 banner 区域所替代，放了一条颇具号召力的标语，同时还把按钮做的又大又美观，并设置为绿色， 与页面其他元素形成鲜明对照 Score: 上线后的第一天，新的博客注册率和用户注册率分别提高了 12%和 14%接下来的几周内， 注册率提高到了 25%，并且稳定的保持在这个水平 (author 一直强调说某某大公司其实并不能打动我，因为很多人总是会用这样的手段来吹嘘 自己，真正的可能并非如此。

但是现在这里的数字让我比较信服了) 1.2 引导用户的视线 手段 1： 把注册区域移到主要图片展示区的下面，创造出“对角线平衡”的和谐状态 古腾堡图表 描述了阅读轨迹规律，人们通常都是从左到右，由上往下的阅读，久而久之视线自然的趋向 于从左上角移动到右下角如同自然引力一样 做法： POATA 运用视觉元素创建虚拟的一条线，让用户的视线跟随它从左上到右下呈对角线的移动 例子：Mini Cooper 首页，参考 动画里各个元素出现的先后次序同样也采 取了对角线设计首先，网站的 logo 标志出现在页面的左上角，然后页面上有一个矩形线 框，而右下角驶入屏幕的是车模，同时车模的颜色和线框的颜色是同样的这三个部分构成 了一条很和谐的对角线 手段 2： 使用颜色来吸引注意相对于一致性来说，人类对物体间的差异性更为敏感 附：LOGO 的主色调海蓝色设置为图片展示区域的背景颜色，并应用到 sign up now 按钮上 那么页面中的其他元素将不会用到海蓝色 Author:对角线法则多数情况下会发生作用 第二章 凸显个性 我是一个极简主义者 Author’s 个人网站：开始它认为，图片没几张，所以没什么可欣赏的；然而文字却不少，所 以必须读很多。

然而很多人表示赞许它真的非常简洁 所有网站都在展示某种个性， 但很多时候个性都是在无意间流露的， 并不一定是有意而为之 2.1 统一设计风格 我做了哪些工作？ 1.应该采取单列布局，因为网页中的文本只有一列，同时站点导航只需要一行 2.文本列的两侧都留下了很宽的边距，所以在左边区域放置站点标志标志是一个非常简单 的 logo，包含了两个单词 Love+Rage，用+隔开在这个 LOGO 下面有一个小小的、手绘的心 形图标，从而构成整个标志放到结构框图里，把它与动画图片顶部对齐 Love+Rage 如同 Romeo+Juliet 的设计一样 3.使用符号+能够在整个站点中一直延续下去 就像电影里的隐喻和象征，用来表现某个主题比如 in the cut 从始至终都是黯淡的色调， 但偶尔会插入一抹深红来勾勒出主角的线索 在大多数情况下，他们只需要简单的在网站中重复出现，来保持一致的主体风格 备选的是加号图案和心形图案一个网站有很多心，看起来相当愚蠢，作者如是说 +号图案有两层含义： 网站的 LOGO 元素在整个站点中的元素，同时暗示内容是新的，仿佛那个+意味着刚加上一 样 4.LOGO 和标题文字不是特别相配 标题文本做成图片显示，但却带来另一个问题，就是搜索引擎无法对标题进行分析。

第一二章的读书笔记都是抄下来的，我时常觉得这并非一个好的方式，正如一个朋友说自己的见解才是最重要的，那么仅仅因为我是网页设计的菜 鸟所以我就不能对书中的内容做自己的判断吗？记忆仓库式的学习我太累了 后面的学习我想选择另外的方式来做要么以自然语言的方式来写书中要点，要么写出我的看法来 我接受自己的这种慢慢的状态，我该怎么学习是在这个过程里逐渐形成的 第三章 导航之道 熟悉一个 WEB 应用的关键在于能否理解整个站点的内部结构 人们获得导向的方法： 浏览页面的 main 主要区域找出 relate 部分，然后在这些部分里找出关联性更强的，最终 找到寻找的内容 这个过程有点像地图搜索，一步步缩小范围，直到发现目标 那么作者提出导航的意义对于用户来说是否合情合理，而在于是否反映了网站的内部结构 网站必须符合我们思考问题的方式 这是作者对自己的导航理解的解释 简单的说就是以用户为中心 我的看法是这符合 WEB2.0 的精神，WEB2.0 是可读可写的互联网，用户才是主角所以作者做出对导航的判断我觉得是 OK 的 3.1 告诉软件该做什么？ 导航原则 1：有意义的分组 开始时： 导航很简单， 只包含两个按钮标签， 分别是 home 首页和 site 站点。

然而展开 site 标签后， 却出现了一大堆应用功能选项，而且菜单项之间毫无顺序 分析： 没有一个用户会这么想，我要编辑联系信息，所以应该到 site 菜单里面找但事实上这两 个选项就像两个走丢的小狗一样紧紧靠在一起 分组变为了 Home,Site,Add-ons,Styles,Misc，Settings,HELP 导航原则 2：动宾短语 分析： 心理上， 人类不喜欢感觉到自己正在按软件的要求去做事情， 而是在决定采取某个行为的瞬 间，希望由自己控制软件大概就是塑造一种“我是主人，我正在指挥软件”的感觉 那么 author 认为菜单是基于对象而是基于任务的所以要以任务类型来设计 作者的叙述逻辑是从用户心理特征开始，不过我的理解反而是，逻辑的起点从用户看网站是来做任务的开始，然后做任务就意 味着菜单是任务类型的，那么动宾短语是一个很好的方式，能给人一种“我是主人”的感觉 动宾短语，从语言角度上来说我觉得更能把事情说清楚就像一句完整的话是主谓宾一样，那么这里的主语就是用户咯 区分： Login 不是一个动作，就像鞋不是一个动作一样它是一个名词应该转换为 log in 导航原则 3：我来说，你来做 对于用户来说，对站点保持兴趣的关键在于能否获得方向感，能否得到所需的信息，以及能 否完成任务。

创建导航时，请确保以用户为出发点，而不是以系统为出发点 第四章 链接生来不平等 举例：新闻网站的链接按时间，相关度，点击率等顺序排列 案例：公司内网首页上创建一个标题列表，让公司的职员们随时了解最新事件基本上最新 事件往往是最重要的事件 分析： 先建一个简单的列表，开初想通过一些说明性文字来告诉用户标题链接按什么顺序排列 作者认为这会话费用户更多的精力阅读，不必要的阅读是人们最不愿意做的事情有点不可以 理解，因为在我看来就是一个筛选按钮嘛第二种方案是 1 到 5 进行编号 不过 author 还是觉得不好， “他们彼此之间还是太像了” 那么就希望凸显 NO.1 的重要性 4.1 环境提示成为引导的线索 日本的城际地铁线，每经过一个站，都会播放一段每个站特有的音乐广播，从而有效引起乘 客的注意，避免坐过站 标签云是一种链接列表，按热门程度来加重显示某些标签标签含有的项目越多，字体就越 大；点击次数越多，颜色就越深 做法：链接字体从大到小，颜色从深到浅，从视觉上使得第一个或者上面的链接凸显出来， 同时也隐喻了重要程度越来越低那么效果就是扫一眼页面就能自动理解链接顺序的含义， 凭直觉，而根本不需要思考。

PS：展现岁月的印记，岁月感就是一本小书，不小心洒了一点茶水，然后留下了痕迹 Author:环境提示并没有在互联网上完全推广开来 第五章 标签云抬头看路 标签云是一种链接列表， 显示在一个区域内， 并且按照热门程度或者其他方式来加重显示其 中的某些标签标签云是越受欢迎，字体越大程序算法) F 是第一个使用标签云的大型网站 酷！咱们就这么干标签云现在越来越流行，让我们看看这里是否也能用上很明显这是一种很 孩子气的想法，因为流行，因为大家用，所以我也要用吗？用也好看是否适合我啊 5.1 你的创新是否有效 案例： 博客设计者除了标签云之外， 还加上了一个 cloud 按钮和 list 按钮， 让用户可以在标签云和 普通列表之间可以来回切换 分析： author 认为应该更注重提高品质，而不是一味的创新 把链接列表改善成了标签云的形式，已经提高了品质了，添加几个按钮有些画蛇添足 他分析说知道标签云的人会从标签云上获得方便， 不知道标签云的人所看到的仍旧是一个链 接列表 也就是说标签云已经把普通列表的功能和附加的含义都表达出来了， 那么增加一个普通列表 就比较多余了同时增加一个普通列表会带来麻烦，用户瞪着两个按钮看半天，到底该选择 标签云呢还是普通列表呢？所以，只显示标签云就够了。

我认为 author 的分析是可靠的，知道标签云的人和不知道标签云的人来分别讨论，说的蛮有道理的 5.2 什么时候该说“不” 用户使用标签云需要知识 author 说直接把标签云去掉，因为他说“这个世界上不存在任何理由让用户思考” 大概意思就是我们应该假想用户都是懒得 思考的人，然后再来设计页面Flickr 的用户会上传大量的图片与朋友、家人分享，标签云确实有助于用户粗略的了解其他人如 何使用网站 但大部分人浏览博客只是做短暂的停留， 看一两篇日志就会离开， 这里不是强迫用户学习新潮交互方式的好地方 author 安慰自己在这个事情上的失误，他说，一个人不可能知道所有事情 对了，他还说设计绝不包含任何运气成分哈哈，他不是在极简的个人网站那一节说运气绝对是设计的一部分吗 应该这么表述：歪打正着的运气当然可以有，但设计的基本功修炼不能讲运气 第二部分 学习 第六章 开门见山 案例： 小型教育软件公司为某航空公司开发一套学习管理系统， 该系统让机场数以千计的工人 随时学习并了解最新的安全措施， 这些工人绝大部分都没有接受过大学教育， 所以人力资源 部门认为所有的内容都必须提供透彻的解释 6.1 为什么说欢迎辞没有用？ 分析： “废话文本： 保留、 删减还是去掉？”一文中指出， 人们通常不会在网页上阅读文字， 他们只是扫描一下。

很长的介绍性文字，往往直接忽略也就是说，篇幅短的文字才可能吸 引一部分注意力 除了我们专注于阅读的大信息量网站外，我们考虑的是做而不是读。