网站注重用户体验(文档)


一、用户体验的概念 用户体验(User Experience,简称 UX 或 UE)是一种纯主观的在用户使用一个 产品(服务)的过程中建立起来的心理感受。因为它是纯主观的,就带有一定的 不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全 模拟或再现的。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能 够经由良好设计的实验来认识到,用户体验是操作规程,不是技术流程。 我们经常会谈论某家餐厅的服务很好或电影院的环境很糟糕等,这些都是一些关 于用户体验可用性的非正式讨论。当设计或评估某一交互式产品的用户体验时, 我们需要以条理更加清晰的方式来了解该产品和对其进行讨论。 产品必须能够为用户提供价值,才可以称为实用产品。 二、用户体验的五个层面: 表现层 在表现层(surface),你看到的是一系列的网页,有图片和文字组成。一些 图片是可以点击的,从而执行某种功能,例如把你带到购物车里去。一些图片就 只是图片,比如一本书的封面或网站自己的标志。 框架层 在表现层之下是网站的框架层(skeleton):按钮、表格、照片和文本区域 的位置。框架层用于优化设计布局,以达到这些元素的最大效果和效率——使你 在需要的时候,能记得标识并找到购物车的按钮。 结构层 与框架层相比更抽象的是结构层(structure),框架则是结构的具体表达方 式。框架层确定了我们的结账页面上交互元素的位置;而结构层则用来设计用户 如何到达某个页面,并且在他们做完事情之后能去什么地方。框架层定义了导航 条上各项的排列方式,允许用户可以浏览书籍的不同类别;结构层则确定哪些类 别应该出现在那里。 范围层 结构层确定网站各种特性和功能的最合适的组合方式,而这些特性和功能就 构成了网站的范围层(scope)。有些卖书的网站提供了一个功能,使用户可以保 存之前的邮寄地址,这样他们可以再次使用它。这个功能——或任何一个功能 ——是否应该成为网站的功能之一,就属于范围层要解决的问题。 战略层 网站的范围基本上是由网站的战略层(strategy)所决定的。这些战略不仅 仅包括了经营者想从网站得到什么,还包括了用户想从网站得到什么。就我们的 网上书店的例子而言,一些战略目标是显而易见的:用户想要买书,我们想要卖 出它们。另一些目标可能并不是那么容易说清楚的。 二、用户研究 举个小小的例子,某位小朋友饿了,他可能会说“我要吃点东西”,然后你 就知道应该给他找点吃的;如果他什么都不说,抓起某样食物就狂吃,这很明显 他饿了;要是他说“我想吃火锅”,而你没有火锅只有馒头呢?稍后再说明这个 问题。 不过你至少可以看出,用户的需求通过这样三种形式来传达——目标、行为、 说法。 在这个例子中,用户最根本的需求是饥饿(我们通常不需要了解用户最根本 的需求),目标是找东西吃下去,行为显示了这个目标,他自己认为火锅能解决 这个问题。我们要做的,就是根据这些资料提供给他适合的食物。这里我们提供 的是馒头,小朋友看到馒头的时候,有两种可能,一种是什么也不说,抓过来就 狂啃;另一种是一边狂啃一边生气。第一种情况说明,你提供给他的选择比他想 象的更实用。同时说明:用户所说的其实不一定就是他们真正的需求,行为才是 最真实的。第二种情况说明,你对用户的需求了解得不够,需要再收集更多的数 据,比如他爱吃米饭还是面食,喜欢甜还是辣等。 (一)用户使用习惯研究 用户不用的功能,就不该存在 用户在互联网上的行为习惯=日常商店中的顾客们 用户视觉流程为 F 型 用户扫视浏览,然后快速捕捉到他想要的 这里的用户没耐心,且必须立即被满足 把认知负荷降到<0. 用户不做最优的抉择,他们通常留在第一个较好的 用户遵从他们的直觉 用户富有控制欲,但绝对不能让他感到他很笨 用户很讨厌出乎他们预料 别玩文字功夫,那样更糟(注册就是注册,不是"点这开始体验") 滚动条是最糟的交互. 视觉设计,不是美化,是导向用户看内容的. 遵从规范,你将获得用户的信心,信赖,信任,且证明你的可靠 常常测试,不停测试,今天会与昨天不同 不要触犯主流(非主流是在玩个性) 宁可问完全不懂的人,也不要去问了如指掌的人 最好的体验是什么都不让用户做 给用户反应.确保他们所做的一切都有回应 告诉用户,有些事我们帮你做了 让用户知道他在哪 那个常点的按钮一直在那 新的技术只用在无关痛痒的地方 告诉用户下一步会怎样 (二)产品使用时用户关心的一些问题研究 1.产品的运行/开启速度快吗? 2.软件的功能完善吗,能够以最直接的方式达到想要的效果吗? 3.在等待/错误/警告的时候,是否有足够的提示,我能够知道现在的状态,以及 到底是哪里出了问题吗? 4.如果我有数万条记录,我是不是能马上筛选出我想要的东西? 5.我如果对某些地方觉得使用起来不顺畅,能不能按照我平时的使用习惯自动, 或者手动调整? 6.一些例行工作,软件能帮我完成吗? 7.兼容性好吗?在不同的软硬件环境下是不是同样可视? (三)用户行为分析 用户本身行为属性: 1,年龄 2,性别 3,登陆属性(时间,登陆页面等) 4,硬件环境属性 5,用户登陆出错率 6,用户登陆弹出率 网站行为: 登陆相关 1,登录入口 2,登录后页面 3,登录后第一次点击 浏览相关 1,浏览行为路径 2,浏览行为目的性 3,浏览到触发任务的动作过程 4,浏览结束后完成任务情况 检索(搜索)行为 1,搜索的入口 2,搜索选择的内容 3,比对搜索和最后成交商品的分类和属性 4, 搜索关键词词义属性(目的性,商品性。如:“质量好的 MP3”“N730 手机”) 5,搜索变化,热门搜索,上升最快的搜索等 用户交互行为: 用户对其他用户评论的回复 用户对商品的评论(购买前,后) PUSH(关联)商品的评论 对相关推荐(PUSH)类互动兴趣行为: 1,PUSH(关联)商品的点击比率 2,PUSH(关联)商品的评论与购买情况 投诉建议相关行为: 咨询 1,用户的咨询属性 2,用户的咨询的分类 3,用户的咨询的潜在需求和对应的产品 投诉 1,用户投诉的基本属性(时间,长度,方式等) 2,用户投诉的问题对应产品 3,用户投诉的阶段 4,用户投诉的情绪记录 5,用户投诉的相关问题 6,用户投诉的渴望解决时间 7,用户投诉对解决时间的要求(可接受程度上) 8,用户投诉后的访谈追踪 三、用户体验设计 (一)用户体验设计概念 用户体验设计是“以用户为中心”,或者叫“以人为本”的设计。国外把用户体 验设计分为:视觉设计、交互设计、用户行为研究、可用性分析和测试等等。其 中很多又涉及到美学、心理学、行为学、图形学等。 视觉设计(Graphic Design): 界面设计、图标设计、颜色和布局设计、风格设 计等 交互设计(Interaction Design): 人机交互,即在一定场景内用户获悉指令, 判断含义,作出回应的过程设计 用户行为研究:定义目标用户群特征、研究用户喜好、习惯和期望等等 可用性分析和测试(Usability Testing): 分析和发现可用性问题并提出改进 在用户体验设计时需要注意以下几点: 1.要针对目标用户进行设计 2.视觉上别让用户看得费劲 例如 3.要减少交互 让用户少思考,让用户少选择,让用户少等待,让用户少操作,让用户少转动眼 球寻找。因为人都很懒,懒得选择,懒得等待,人们希望马上到达他希望的“内 容”。 4.减少用户操作、减少选择和思考 5.主动提供帮助,以用户为中心 6.把复杂性留给自己,把简单留给用户 例如,一个搬家公司的网站,需要用户从下拉框中选择移出城市和移入城市,搬 家时间 用户需要在长长的下拉框中选择哪个州,哪个城市,而且要选择两次,用户体验 可想而知,改成下面的样子好多了。 (二)用户体验设计目标 第一步 有用:产品做出来最重要的是要让它有用,这个有用是指产品满足用户 的需求。 第二步 易用:这非常关键。不容易使用的产品,也是没用的。比如;市场上手 机有一百五十多种品牌,每一个手机有一两百种功能,当用户买到这个手机的时 候,他不知道怎么去用,一百多个功能他真的可能用的就五、六个功能。当他不 理解这个产品对他有什么用,他可能就不会花钱去买这个手机。好的产品要让用 户一看就知道怎么去用,而不要去读说明书。这也是设计的一个方向。 第三步 友好:最早的时候,加入百度联盟,百度批准后,发这样一个邮件:百 度已经批准你加入百度的联盟。批准,这个语调让人非常非常难受。所以现在说: 祝贺你成为百度联盟的会员。文字上的这种感觉也是用户体验的一个细节。 第四步 吸引力:这种吸引力让用户觉得这个产品可爱。“苹果”这个产品其实 就有这样一个概念,就是能够让用户在视觉上受到吸引;视觉设计的目的其实是 要传递一种信息,是让产品产生一种吸引力。 第五步 爱上:让用户爱上你的产品,可以通过视觉去改善,去提供一种感觉。 这就是为什么百度和 Google 要做节日 LOGO 的原因,因为搜索这个产品也是太普 通了。节日的时候做做 LOGO,用户产生一种感觉、情感,黏度会更好。这一类 的东西我们都可以从视觉上去提高。 (三)用户体验设计的一些建议 1)一定不要浪费用户的时间,例如,巨慢无比的打开网页/启动程序,又如,让 用户一次次的在超过 50 个内容的下拉框里选择。请珍惜用户的时间、减少用户 鼠标移动到距离和点击次数,减少用户眼球转动满屏寻找的次数 2)一定要明白你的产品面对的是什么样的用户群 3)一定要去尝试接触你的这些用户,了解他们的特征和行为习惯 4)一定要把静止的界面看成交互或对话(Treat interface as conversation), 成功的 web 开发者是利用网页与用户对话 5)一定不要‘我觉得’,不要打扰和强迫用户,不要为 1%的需求骚扰 99%的用户 6)一定不要提出‘这些用户怎么会这样?’的怀疑,一定不要高估用户的智商 7)一定不要以为给用户提供越多的东西就越好,相反,重点多了就等于没有重 点,有时候需要做减法 四、用户体念中常见适用性分析 (一)文案内容 网站文案其实大概包括:网站导航、栏目标题、告知提醒(实时提示、警告、状 态、还有出现最多的帮助)。网站文案撰写的工作更多时候被设计师和程序员兼 职了,他们会在认为需要的地方加上自己认为合适的文案。在写文案内容时应该 注意以下几点: 1.准确、简洁、易读 网站文案的目的就是要给用户传达一种信息,说明白就好。现在很多网站的文案 实在是太罗嗦了,而且有的看了半天看不明白的。这个简洁的原则就是:能不说 就不说,能用图片就不用文案,能用一句就不要用一段。但是要注意准确和易读。 尤其是用图片的时候。 2.统一性 由于大多数公司没有专门负责写网站文案的,所以处在各个流程的团队成员都在 兼职写文案,就造成南腔北调的文案了。例如一个登录:有人说账户有人说通行 证,程序员大概会说 id。类似这样的说法会让用户迷惑。 3.情感化 网站的文案很多时候是在提示、帮助用户完成一个使用。大多数的网站文案更像 一个机器人在帮你。反面的例子看看很多网站的帮助中心吧! A)给用户成就感: 用户在经过一些列操作而完成一个目标的时候,我们也应该为用户高兴,这时候 不要吝惜的给一个:恭喜您成功„,现在就可以„ 之类的提示就会让用户很有成 就感! B)鼓励用户: 用户不小心一个误操作(请注意这个误操作一般是我们设计的太糟糕造成的), 你这时候不解人意的给出一个你出错了!会不会让人很沮丧? 而好的文案一般会清楚的告诉你哪里出了问题,并鼓励你再试一次。也有的网站 很体贴的在旁边提示,例如:忘记密码了? C)适时营销一下: 有的网站则很适时的提示:还不是网站用户,花几秒钟注册一个吧?(这种人真 会做生意啊!)既然说到登录的问题,不妨引申一下这个话题。很多网站都是考 虑了密码忘记的问题,很少考虑用户名忘记的问题。 D)为用户着想: 我们发现很多网站发布信息的时候往往会看到类似这样的提示:发布信息不完整 将被删除!这岂不是典型的恐吓? 4.出现在合适的地方 我们有时候去专卖店逛的时候,往往会遇到一个店员跟着你不断的给你介绍东西, 虽然我理解他们的辛苦和无奈,我仍然很反感这样的,会尽快离开那里。而有时 候则恰恰相反,我看中一件商品,想找个营业员询价等,却找不到了! A)做帮助要低调,不要干扰用户: 其实网站的文案也应该在合适的时候出现在合适的地方。把握好尺度的原则就是, 这些文案在用户使用网站的时候不会造成干扰,这就需要我们好好考虑文案的颜 色,大小等形式。以及放的位置等等。 B)适时出现,适时消失 而用户需要帮助的时候能很快找到,并能够帮助用户解决问题。而解决问题之后 再合适的消失。 5. 需要交互 这个交互可能更多的是说帮助文案,因为帮助很多时候是我们自己臆想的认为那 些地方需要帮助的。例如微软的帮助会在最后问你,这个答案对你有帮助么?这 样用户就可以跟我们交互了(如:FAQ)。 第二节 扩大可操作区域 从 Google 的一个细节说起: 整个虚线框都是“Next”的可点击区域。看似不经意,却直接提升了细节的可用 性。其它页码也巧妙地和上面的字母 o 一起组成可点击区域。与百度的翻页相 比,Google 优胜。 再来看 Twitter 的注册页面: 很大很舒服,到了这个页面,瞎逛都会忍不住去填写。提示文字也恰到好处,能 提供帮助,不让人觉得烦。 来看下 Google Docs 中的颜色选择: 和其它富文本编辑器相比,Google 的颜色小框框大了不少。 对比 FCKEditor 的: 再来看一个看起来很美的设计,TinyMCE 的颜色选择: 注意 A 旁边的下拉小箭头:只有点击到小箭头时,才能打开颜色选取框。点击在 A 上时,是取当前色进行设置。这是跟微软学的: 从功能上讲,微软的处理方式很强大。作为客户端软件的 Office, 按钮相对较 大,重复使用同一颜色的频率也较高,这样设计无可厚非。但作为 Web 文本编 辑器,觉得没必要如此设计。这会让小箭头的可操作区域很少,影响可用性。 下图是新版 Yahoo 首页的注册链接。注意“New here?”, 闲着也是闲着,不如 放进链接里,扩大可点击区域。 下图是最近刚上线测试的“我的淘宝”。注意“已买到的宝贝”左边的小箭头, 可点击区域很小。这些收缩小按钮,都属于看起来很美但实际上基本无用的鸡肋 设计。 第三节 用户登录 纳米盘的登录 再看看鲜果的登录: 按照图中所示,用户习惯应该是在第一时间输入邮箱“iamschiy@gmail.com”, 而不是“schiy”。 这种情况比纳米盘的要好,可是还不够。应该还存在一部分用户刚开始的时候不 知道在密码栏输入邮箱的密码还是在鲜果的注册密码吧。 接着看看抓虾和豆瓣的登录: 显而易见,用户名和密码两栏都标示的很清楚了,用户在输入邮箱后也不用考虑 是输入邮箱本身的密码还是在该网站的注册密码了。 第四节 内容为空提交处理 1.内容为空时“update”按钮干脆不可用,从根本上杜绝提交空信息的操作。实 例: 2.焦点进入输入框后出现“发送”按钮,内容为空时点击“发送”,输入框变色 闪动,没有任何文字提示。实例: 3.同样,焦点进入输入框后才出现“发布”按钮,不输入任何内容点“发布”, 将回到如图默认状态,也是正面反馈。实例: 4.内容为空,点击“提交”后,在输入框下方打印一行提示文字。实例: 5.内容为空时“提交”后,弹出模态窗提示应进行何种操作。实例: 首先明确一个问题,当用户进行某操作后,应当给予反馈。这 5 种方式都实现了 这个基本目的,然后再来看哪种更好。凡事有个度,恰到好处的处理应该是提示 充分,又不显累赘。 对比过后发现,第 2 种更合适于处理这种简单的话题式发布,交互上也不冗余。 同时,它利用了人们长期以来形成的认知习惯——红色代表错误或停止。看一次 就能明白,哦,原来没有内容是不让提交的。 另一个角度,目标用户的操作和认知水平如何。开始做幼儿园项目时,从调研结 果看普遍认为用户是校友录的老用户,操作水平相对较低,太新潮的交互会对这 群人造成挑战,由此保守的设计了第 5 种,指引式反馈。 设计得走在习惯前面,好的设计是等待人们去习惯的。 第五节 二次确认页面 二次确认页其实就是 Confirmation Alert,属于 Alert 家族中重要的一员。英 文定义:A confirmation is a modal dialog box that asks if the user wants to proceed with an action. 翻译成汉语大概就是:一个确认页是一种询问用户是否想继续执行某个动作的对 话框。 1.二次确认页面的特点 直接出现在用户刚刚发起的某个操作之后。 询问并确认用户是否想要继续之前的操作。 一般会包含一个简单的问题和两到三个操作。 2.二次确认页面的好处 减少误点击 避免动作中断时的损失(保存确认) 使操作更加慎重 安全性(有的二次确认还需要用户输入密码) 3.二次确认页面的缺点 干扰了正常的操作流程 不恰当的多余的二次确认面还会让客户心生厌烦 在一些鼓励的流程中,二次确认页还会形成巨大的漏斗效应,直接造成客户流失 4.什么时候适合使用二次页面 A)保存确认(Save Confirmation) 例:填写表单中途离开,邮件写了一半关闭浏览器,文档未保存状态下点关闭。 确认的目的:避免误操作或损失。 B)删除确认(delete confirmation) 例:开心网账户的删除(不能恢复),删除好友或文件等。 注意:并不是所有的删除都需要确认,例外情况有如:频繁的操作(如删除邮件), 不重要的删除或者恢复成本较低。 C)其他重要且后果不可逆的操作 例:淘宝的确认收货并同意放款,百度有啊的撤销退款协议。 确认的目的:告知后果使操作谨慎,避免误操作。 D)重要且不推荐的操作 确认的目的:通过确认让用户更改选择。 最典型的例子,淘宝的“评价确认”: 二次确认页的特征既然是存在两个以上的操作选择,所以当只存在一种选择的时 候,无论页面长得再怎么像确认页,也不是。例如以下的页面: 第六节 “反馈提示” 一个 UI 上的“反馈信息”主要有两种分类角度: 从形式上分: 工具/信息提示 (Tool/Info Tips) 就地信息 (In-place Messages) 气球状通知 (Balloons) 对话框 (Dialog Boxes) 从内容上分: 信息 (Info) 警告 (Warning) 错误 (Error) 确认 (Confirmation) 反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产 生影响。在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息 输入者他的操作结果。它有很多种形式,包括界面元素、声音、影像变化和物理 位移(如震动)等。页面上的反馈提示作为一种信息输出,最重要的属性要求就 是迅速明确的被信息输入者所知晓,这也是对设计师来说最重要的设计原则。执 行起来,可以参照以下具体标准: 1.当前页面:反馈提示应该放在操作发生地的附近。 一般来说,如果宽度足够或不希望表单过长(想在一屏内解决战斗)、过于跳跃 的话,那么把反馈提示放在表单元素右侧是可行的,例如淘宝的注册页: 如果对象是有严格逻辑顺序(如纵向)的系列操作,那么反馈提示放在操作流向 途中(对应的表单元素下面)则比较合理,并能达到更好的提示效果,例如淘宝 的订单页面: 2.刷新页面:反馈提示应该放在用户最渴望看到它的地方或最容易注意到的地 方。 网页的加载特性让我们的操作区域有可能会在页面刷新后消失于我们注意力的 聚焦范围之内。新的页面中,紧张、“短暂失忆”的用户不一定会拖动滚动条来 找刚才的操作区域(原来的聚焦范围也很快消失掉了),进而找到反馈结果。他 们担心、茫然,渴望在新页面中一目了然地看到它。这个时候,把反馈提示放在 新页面中的显著位置无疑是最佳选择,页面导航的下方和表单区域的上方都是不 错的位置。 3.状态,样式。 关于状态和样式在这里不去做过多的探讨,注意两点: 1)将状态分类(对/错/提/警等)并进行差异化设计是一个不错的办法,至少对 你的中高级用户会有一定的好处; 2)icon 能起到明显的状态提示作用,但选用时需慎重,要明确,要友好,不要 夸张。至于形式上到底需不需要有底色、带边框、配 icon、长箭头等,对反馈 来说并不必要,不需要很纠结,具体情况具体分析一下,只要能引起注意、表意 快速明确并且不让用户产生迷惑,所有的样式都是值得尝试的。 3.文案 首先你需要一个文案模板以辅助设计和保证统一性,业内比较认同的是“[状态+ 解释]+(解决办法)”的文案结构,一般来说,按照这个套路来,大体上都能保证 文案的完备和明确。下图中都是同形式同指意的反馈提示,百度的说的就比 YouTube 要清楚。 4.出口 出口,它可以是用户对当前反馈的非正常状态的解决途径,如图中的[?];也可 以是一个交互阶段结束后,系统给用户的操作引导,如图中的文字链接。在某些 情况下,这些出口是十分必要的,这就好像当你告诉用户此路不通时最好指给他 一条能通的路,当用户走到一个丁字路口时,你最好能告诉他是该往左还是该往 右。 需要提醒的是,这种出口切忌太多,阶段交互结束后,对于思路中断并且茫然的 用户来说,太多选择甚至比不上没有选择。按照用户心理需求和操作习惯排个序, 最多放出两个,一主一次。 第七节 标点符号 在日常的工作中往往会忽略标点符号的作用,其实无论在英文界面文本设计还是 中文界面文本设计中,标点符号都是重要组成部分。要想做出好的界面设计,不 仅要重视视觉、交互以及 wording 的表达,还要重视标点符号的使用。 标点符号的作用 标点符号大致来说有三种作用:表停顿;表语气;表词语的性质。 1.表停顿:用来表明句子的结构。 2.表语气:通常交谈的语气有三种:陈述预期,告诉别人一件事情;疑问,向 别人提出一个问题;祈使,要别人做一件事情。这几种语气在交谈中用语调来表 示,在书面上用标点符号表示。 3.表词语的性质:某些词语加上某种标点,词语的性质就会发生变化。如“高兴” 指的是一个形容词;而《高兴》就表示一部电影或书籍或文章的名字。 中英文标点符号的差异 1、汉语中某些英文中所没有的标点符号。 a) 顿号(、),英文中分割居中的并列成分多用都好。 b) 书名号(《》),英文中没有书名号,书名、报刊名用斜体或下划线表示。 在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。 c) 间隔号(·),英文中需要间隔时多用逗号。 2、英文中某些汉语中所没有的标点符号 a) 撇号(’) b) 连字号(-) c) 斜线(/) 用户界面文本中标点符号的使用 在用户界面文本中何时使用标点符号主要遵循以下依据。 句号 1.控件标签或主要标题说明后不使用; 2.辅助说明、辅助解释或其他包含完整句子的静态文本后使用。 如下图: 这里的区分主要是看文本内容的性质,是主要文本还是辅助性的文本,这两种文 本的区别在后面的是否使用英文标点符号中也会用到。 问号 可以在所有的问句后使用,问号应用于所有类型的文本,如下图: 感叹号 带有强烈的感情色彩,应尽量避免使用,只有在一些特殊情况下可以使用,如任 务完成等。 冒号 1.在外部控件标签的末尾使用; 2.用冒号来引导一组并列项。 如下图: 省略号 表示不完整或未完成,在以下情况中使用省略号, 1.表示该命令需要额外的信息。不是所有显示其他窗口的操作都加省略号,只是 那些需要额外的信息来完成的操作的情况需要。 菜单项不需要额外的信息来完成。 菜单项是一个命令或者隐含着命令,需要额外的信息来完成。 2、表示文本被截断。 3、表示任务正在进行中。 中文界面里使用英文标点的情况 与普通的书面表达不同,在界面设计中会出现混杂了英文标点符号的现象,这不 是设计师的疏忽而是英文标点将有助于提高无障碍访问特性,所以在一些重要信 息中应该使用英文标点,如标签尾部的冒号和在命令、数据、标签中表示不完整 的省略号,主要标题后面的问号。 粗略的总结了一些常用标点的用法和用户界面文本中的特例,其中难免有疏漏之 处,欢迎大家指出疏漏之处予以斧正。 第八节 鼠标悬停 1.鼠标悬停在界面设计中的用途 1)触发事件。减少点击操作,更便利的人机交互,如前面当当的“修改”操作 框。 2)表示可点。这个通常与鼠标指针变化为“手形”一起用,告诉用户这个是可 以“按”的。 (Facebook) 3)悬停菜单。 (Facebook) 4)显示操作选项。可避免操作选项重复出现所造成的页面排版和显示的混乱。 (饭否) 5)指示鼠标的位置,帮助浏览(如上图中鼠标悬停后出现的背景颜色),常用于 多个内容显示列表。 6)帮助选择,常用于评分系统。 (豆瓣) 7)诠释细节信息。HTML 中的 alt 就有这种作用,也可以用 CSS 和 JavaScript 来实现更多的效果和媒体信息。 (Flickr) 8)内容展示。许多门户网站为了节省信息空间,通常把信息集中在相同位置, 用内嵌 Tab 实现信息显示,有时候 Tab 还会自动播放。 (腾讯网) 2.悬停触发事件的显示效果 1)即现和即逝 (Facebook) 2)渐现和渐隐 3)展开和缩拢 (Yahoo) 4)抽拉式 (WordPress 管理后台) 5)过程加载
还剩30页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 1 人已下载

下载pdf

pdf贡献者

世界之光

贡献于2013-04-19

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf