把用户经常容易犯的错都考虑到常规操作流程里,把可以确定的误操作,给其正确的操作结果。让用户犯错不知不觉。
2.2.3.4 *操作的灵活高效性
. 优化操作流程:依用户习惯的流程去设计操作流程,把相关的操作放在一起,不断优化操作流程,以主要任务为中心,围绕完成这个任务设置相应的操作,去掉多余或是无关操作 . 减少误操作:容易误操作的按钮尽量不要放在一起 . 批量操作:重复的操作可以考虑做成批量操作 . 键盘操作:如Enter,Esc等
. 快捷按钮:如返回顶部,返回底部,团购的浮动分类等
. 简单的判断:用户操作尽可能是不需要思考的,如果点击一个按钮需要思考3秒以上才确定则肯定不合格
. 响应时间:点击首页响应的时间不要超过5秒,其他页面的响应时间应短些。有研究表明超过10秒绝大部分大部分用户会闪人的。
2.2.3.5 *操作提示
1.预先信息提示
所有交互进行前需要提供给用户预先应该知道的提示信息。 a.表单提交类
表单提交的步骤,每个表单项的要求需要给出提示信息。(如密码要多少多少位。实时提示密码的强度等) b.谨慎类操作
如果一个操作导致的结果会涉及到用户利益的,如扣除金币等。都需要预先特别提示。(如:扣除金币的操作需要预先提示扣除金币数目,以及当前金币是否足够。等等。) c.差异化规则
当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时,需要给出提示。或者给出帮助链接。
2.所有交互进行中需要提供操作相关的提示。 a.操作确认提示
一个操作涉及数据删除,等需要谨慎操作的操作需要给出删除确认提示框。 b.操作错误提示
当用户的操作不符合操作的规则,需要给出操作提示。(如评论字数为0或超过限制字数,搜索框未输入内容时提交)
3、结果信息提示
交互进行后给出结果反馈。 a.查询类结果
任何信息列表、查询结果,当对应信息无结果的时候需要给出有无结果状态提示。 b.保存类结果
一个表单是用户提交保存数据的。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。 c.附加类结果
一个表单是对其他数据进行附加的,如评论等。提交成功后应直接跳转到操作产生的结果展示部分。(如提交评论后应该直接展示给用户他提交的评论)
2.2.3.6 *各类弹框
弹框以不遮盖与弹框信息相关原页面用户可能需要核对信息为基本原则,弹框与原信息放在相近的位置,并保真用户可见且易操作。
确认框: 常用于删除或批量操作,再次确认使用。交互规则:直接显示对话框,
点击按钮后直接消失。
标题:操作+目标,例如删除日志,删除照片专辑,解除好友关系…… 按钮:确定+取消 把取消放在更容易点击的位置
操作框: 常用于进一步操作,入口较小,但操作步骤较多时,比如加好友,设隐私等。交互规则:直接显示对话框,确认完毕后,变为通知框。
标题:操作+目标,一般为入口的名字,例如新建照片专辑,修改真心话,添加选项……
按钮:保存(行为)+取消,行为例如加为好友,添加,分享…… 把保存放在更容易点击的位置
通知框: 常用于确认框和操作框的确认后,通知用户结果,一般只有一个按钮。交互规则:点击按钮立即消失,如果不点击按钮,1秒后渐隐消失。 标题:沿用之前操作框的标题并加上结果 按钮:关闭 把按钮放在最容易点击的位置
提示框: 常用于表单提交后的验证,通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列 标题:提示
按钮:确定(或知道了) 把按钮放在最容易点击的位置
未保存提示框: 常用于表单未保存就跳转的提示,提示用户未保存信息是否需要保存。
标题:未保存+目标,例如未保存日志,未保存个人档案,未保存隐私设置…… 按钮:保存+不保存+取消 把保存放在最容易点击的位置
操作框快捷键: 支持键盘的enter操作框上的主操作,一般为”确定”\等,支持键盘的esc操作框上的取消/关闭操作,一般为”取消”\XX”等。
2.2.4 页面间交互
1、 用于规定页面链接是采用新窗口打开还是本窗口打开的规则。首页所有链接的页面一般情况都是新页面打开,除非首页的重要功能在其他页面都也有,这时候可以是在当前页面打开。通常情况往一下级页面都是新页面打开,往上级页面当前页面打开。
2、不常规的链接,点击时应给出提示信息。如:其他页面中的logo, 鼠标移入时应提示“返回首页”
3、在没有导航的页面需要放上面包屑导航。 4、页面链接规则: 主页链接所有的频道主页
主页一般不直接链接内容页,除非是推荐的内容
所有频道主页都链向其他频道主页 频道主页都链回网站主页
频道主页也链向属于自己本身频道的内容页 频道主页一般不链向属于其他频道的内容页 所有内容页都链向网站主页
2.2.5 任务交互(工具类)
. 完成任务的流程: 采用用户通常的思考先后顺序作为参考流程,并辅助其他要素形成最终的流程。如:现实生活中完成这个任务的先后顺序、时间顺序、从主要到次要、从简单到复杂、从必须步骤到可选步骤等。
. 任务的分解:以为相对有区隔的子任务划分步骤,并且这个步骤是在一个页面可以操作完成的。每个步骤用户完成的操作方式最好一致,这样操作更通畅,效率更高。
. 可返回操作:当前步骤应有返回上一步的按钮,上一步后可以对上一步骤重新编辑。
. 实时保存信息:当页面中用户编辑的信息量较大时,应考虑撤销和保存功能,这样用户万一操作被中断时,仍可以找回之前填写的信息。
2.3 web业务架构
业务架构 , 以客户赚钱为中心。网站的架构服务用户的同时也需要加进去商务信
息,预留推商务信息的位置。每一块推的商务信息是针对哪些心理的用户群,以及哪种方式他们才更容易接受所推的商务信息。
2.4 web结构seo
web结构seo , 以服务搜索引擎为中心
2.4.1 逻辑结构
逻辑结构,网页内部链接所形成的逻辑或链接的网络图。它本身由网页链接决定,通过链接的网络图可以更直观的检查网站的链接是否合理。
2.4.1.1 逻辑结构的意义
逻辑结构有两方面的意义:一方面是用户在浏览页面时,方便用户通过链接跳转到相关页面;另一方面是方便搜索引擎的蜘蛛爬虫抓取信息。
搜索引擎抓取的是一张张的网页,链接就等同于投票,别人的网页链接了你的网页,就等于那个网页告诉搜索引擎它支持这个网页,不同的外部链接权重也是不一样的!做个简单的比喻,现在参加老毕的《星光大道》,里有很多的观众(比喻为内部链接),还有评委老师(外部链接),你要首先获得观众的支持,虽然每个观众投的一票只等于一份,但是观众人数很多,加起来,票数就很多了,评委老师都是权威人士,他们的投票权重自然比观众更有用,但是一共只有三位评委,他们的一票可以抵得上观众十票。所以这下大家就应该明白大型网站的内部链接为何如此重要了,一张网页如果自己站内的兄弟网页都不支持,你让搜索引擎怎么相信这是一张好网页?所以网站里一定要组织好内部链接。
原型设计规范、网页规范、用户体验规范、交互规范
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)