html5css3网页设计教程解答.ppt

第四部分：深入 最后的一英里：即时校验 多数表单都已经使用JavaScript做即时校验，除了考虑到减轻服务器负担外，也能极大的为用户提供良好的交互体验，即时校验不应该只纠错，也要赞扬。若能实时根据用户的填写更新后续相应的信息，将使交互变得更加完美 要纠错，也要表扬 第四部分：深入 即时效应—要纠错，也要表扬 纠错 第四部分：深入 即时效应—要纠错，也要表扬 表扬 第四部分：深入 到底是用户名还是密码错误？ 即时效应—要纠错，也要表扬 即时效应—要纠错，也要表扬 第四部分：深入 即时效应—实时更新信息 1件和100件总价格的区别 第四部分：深入 简化长表单 清晰的预期 并不是所有的交互都能够简化，但要尝试让交互看起来更容易。为用户建立清晰的预期，把复杂的过程分解成能一口口干掉的小块，这样复杂的交互也便于控制了。 第四部分：深入 简化长表单—清晰的预期 你办信用卡了吗？ 是 否 你参加工作了吗？ 是 否 第一个问题选择是后 请问您在哪个银行办的？ 建行 工商 民生 选择建行后 请问您办理了多长时间了？ 1年以内 2-3年 3年以上 第四部分：深入 简化长表单—清晰的预期 您是否办过信用卡？最先在哪个银行办理的？ 你参加工作了吗？ 是 否 请问您办理了多长时间了？ 1年以内 2-3年 3年以上 建行 工商 民生 没有办理过 给人的第一感觉，这版设计没有第一版简洁，但是现在完成它所需精力更少，并且为它建立了清晰的预期 第四部分：深入 让他们登录 再一次改进标准 我们大家肯定都经历过忘记用户名或者密码的事情，无奈下只好使用网站提供的“忘记密码”链接 作者通过记录用户名的方式优化了重新找回密码的过程，以名为happy的用户登录XX首页为例，当这个用户收藏XX首页的时候，自动为他保存的是/happy，这样只需要密码就可以登录，不用记住用户名,而当忘记密码的时候，系统通过用户名自动在后台找到注册邮箱，将密码发送过去。避免了用户在忘记密码页面重新输入用户名和邮箱的麻烦。这在很大程度上会促进用户的再次登录 第四部分：深入 让他们登录—再一次改进标准 保存用户名，方便再次登陆。或者通过网址的收藏，知道用户名。很多时候，我们是忘记了用户名 第四部分：深入 计算字符数 到达限制 有很多表单域都需要字数限制，我就经历过充满激情的写了很多文字，点击确定按钮后却出来个提示告诉我字数超过限制，真是让人郁闷。还有一种情况就是当你输入的字数达到限制后，你后来输入的任何文字都无法显示，而当一直低着头打字的你，终于抬头发现问题时，或许你会第一时间怀疑键盘出了毛病 第四部分：深入 计算字符数—到达限制 第四部分：深入 计算字符数—到达限制 第四部分：深入 用虚拟的视觉效果 当页面加载时间过长时，用虚拟的视觉效果提前给用户展现，来满足他们的预期，是个不错的办法。 第四部分：深入 用虚拟的视觉效果 live的图片搜索在图片加载过程中将数据正在读取的图片用灰色背景填充而不是显示空白，让用户感觉这个加载的时间不会太长。 第四部分：深入 提供引导邀请 我们有句古话：叫“酒香不怕巷子深”。可是在互联网你如果遵循这句话就会死得很惨。因为我们的服务实在太多了，用户如果找不到他们想要的信息，会毫不犹豫的离开。提供邀请有利于帮助他们建立熟悉的体验。 第四部分：深入 提供引导邀请 一个改变，就将followers的百分比提高了2倍 第四部分：深入 提供引导邀请 Google docs在“share ?folder“功能刚上线时，采用了两种邀请方式：一个大大的覆盖层指向“my folders”，帮助说明告诉用户如何使用以及share后的提示信息。并提供以后查看或关闭该邀请提示。关闭后还可以点击页面上方的链接查看详情。 第四部分：深入 提供引导邀请 在输入框运用了文案的邀请提示 第五部分 参与 第五部分：参与 创建个人资料 递进的增加 为了满足网站中不同用户的不同需求，对于创建资料的过程进行分层，设计一种能自动变化的个人资料页面，让它能动态记录用户在网站上的行为。以便增加用户之间的交互。所谓的分层是指对于所有用户只需要填写基础的个人信息即可完成注册，而对于特殊的用户，比如平面设计师社区中的设计师们，可以额外为他们增加一些关于发布作品什么的特殊信息。 第五部分：参与 创建个人资料 递进的增加 我们每个人大概都在社交网站上注册过，而每次登录的时候，可以看到自己以及好友的最新动态，你可能对好友最近发表的某篇文章感兴趣，然后点击进入他的页面进行浏览，评论以及其他的操作，然而如果他的信息没有显示在你的页面，或许你不会主动查看他最近是否有发表新文章。这种动态记录用户行为的方式，确实能增加彼此之间的交互。而用户为了获知好友的最新状况，会不断地回访，则意味着会反复的光顾网站。 第五