建站常识
关于“反馈提示”的交互设计
2009-05-08 08:08:00
反馈这个词儿其实是控制论的基本概念,泛指发出的事物返回发出的起始点并产生影响。在信息交互过程(输入输出)中,它是一种界面输出物,用以提醒信息输入者他的操作结果。它有很多种形式,包括界面元素、声音、影像变化和💮物理位移(如震动)等。
我们这里讨论的反馈仅特指用户对网页表单元素进行操作所得到的可视化的输出♏信息,为了加强区分避免歧义,我们这里姑且称之为反馈提示(如图)。这里分几个方面对其设计中应注意的事项加以简要说明。
位置:
页面上的反馈提示作为一种信息输出,最重要的属性要求就是迅速明确的被信息输入者ꦯ🍷所知晓,这也是对设计师来说最重要的设计原则。执行起来,可以参照两条具体标准:
1.当前页面:反馈提示应该放在操作发生地的附近。
根据心ꦗ理学的注意力分配模型,不熟悉或十分关注的操作都会占据人脑相当多的注意力资源,若任务有延时反馈,则操作完成后注意力发生聚焦,投射在行为发生地附近,以关注产生的ꦑ结果。简单点说就是,我在输入框中输入内容,若有任何问题,我希望反馈就在这个输入框旁边发生。这是再正常不过的交互与反馈了。
这条原则对于有同理心的设计师们可以说是共识,他们普遍争议的是另一个问题,反馈与表单元素的相对位置究🍨竟该怎样安排才最合理?实战派的主张“左右”,理论派的则倡导“上下”… … 但其实这一点并不需要太纠结,一般来说,如果宽度足够或不希望表单过长(想在一屏内解决战斗)、过于跳跃的话,那么把反馈提示放在表单元素右侧是可行的,例如淘宝的注册页:
如果♉对象是有严格逻辑顺序(如纵向🅷)的系列操作,那么反馈提示放在操作流向途中(对应的表单元素下面)则比较合理,并能达到更好的提示效果,例如淘宝的订单页:
♛所以,上下左右并不像想象中有那么大的关系,只要在发生地附近,用户都是可以注意到的,只是程度不同而已。倒是怎样清晰明确地表达反馈与对发生地之间的关联、不让用户产生迷惑显得更为关键,关于这一点,jQuery Validation 所提供的 Plugin Demo里给出了一个比较好的思路,设计师们ജ可以考虑通过一些样式的改变来制造一些联系。
现在facebook采用的也正是这样的一种方式,它通过加粗的边线与箭头更强的表达这种关联性:
2.刷新页面:反馈提示应该放在用户最渴望看到它的地方或最容易注意到的地方。
网页的加载特性让我们的操作区域有可能会在页面刷新后消失于我们注意力的聚焦范围之内。新的页面中,紧张、“短暂失🐭忆”的用户不一定会拖动滚动条来找刚才的操作区域(原来的聚焦范围也很快消失掉了),进而找到反馈结果。他们担心、茫然,渴望在新页面中一目了然地看到它。这个时候,把反馈提示放在新页面中的显著位置无疑是最佳选﷽择,页面导航的下方和表单区域的上方都是不错的位置。
状态,样式:
关于状态和样式在这里不去做过多的探讨,注意两点:1.将状态分类(对/错/提/警等)并进行差异化设计是一个不错的办法,至少对你的中高级用户会有一定的好处;2.icon能起到明显的状态提示作用,但选用时需慎重,要明确,要友好,不要夸张。至于形式上到底需不需要有底色、带边框、配icon、长箭头等,对反馈来说并不必要,不需要很纠结,具体情况具✨体分析一下,只要能引起注意、表意快速明确并且不让用户产生迷惑,所有的样式都是值得尝试的。
文案:
虽然说最好的文案就是没有文案,但这只是个遥远的vision,现实中文案必不可少,交互设计师是应该注意一些的,它的好坏直接影响用户体验。
首先你需要一个文案模板以辅助设计和保证统一性,业内比较认同的是“[状态+解释]+(解决办法)”的文案结构,一般来说,按照这个套路来,大体上都能保证文案的完备和明确。下图中都是同形式同指意的反馈提示,百度说的就比YouT♓ube要清楚。
除了明确、清楚之外,文案还需要尊重用户的扫读习惯和个人情感:比如,你想表达一个or的关系,用“或”会比用“或者”好些,因为“或”字会让两边的主体内容在扫读的情况下变得🌳更容易识别;再比如,你面向的是注重风水和彩头的商人,也许“恭ꦰ喜,只差一步…”就应该写成“恭喜,还有一步…”,因为你的用户们对负面的文字和语义会比其他人更加敏感… …
写文案比写文章困难,它需要更多细腻的心思和周全的考虑,在满足基本要求的同时还必须在狭小的发挥空间内体现出独特的产品气质,这是非常难能🔯可贵的事情。如果你有精彩的案例,请跟我们分享吧!
出口:
出口,即上文中提到的解决办法,它可以是用户对当前反馈的非正常状态的解决途径,如图中的[?];也可以是一个交互阶段结束后,系统给用户的操作引导,如图中的文字链接。在某些情况下,这些出口是十分必要的,这就好像当你告诉用户此路不通时最好指给他一条能通的路,当用户走到一个丁字路口时,你最好🌟能告诉他是该往左还是该往右。
需要提醒的是,这种出口切忌太多,阶段交互结束后,对于思路中断并且茫然的用户来说,太多选择甚至比不上没有选择(如下图)。按照用户心理需求和操作习惯排个序ཧ,最多放出🍌两个,一主一次。
可以说有交互就会有反馈,反馈是交互设计中最前线最直接的一环,它的ﷺ好坏直接影响产品体验。实际设计中,由于缺乏意识或项目时间紧张,设计师对这一块往往并不给以过多的关注,设计起ꦫ来也比较仓促和盲目,这点需要特别纠正过来,在原型中期,就需要把表单元素的校验规则以及可能的反馈情况都设计好。这是一个良好的习惯。
近期更新
- [2025-02-11 14:34:54] 加拿大预测网-在线预测:青岛高端网站定制化设计
- [2023-06-25 23:22:29] 加拿大预测网-在线预测:优秀网站设计的五大特点
- [2023-04-27 14:05:55] 加拿大预测网-在线预测:Html 5 响应式网站设计制作
- [2023-04-10 11:07:30] 加拿大预测网-在线预测: 网站建设制作流程知多少
- [2022-10-14 10:11:30] 加拿大预测网-在线预测:做网站设计应该更看重框架搭建还是视觉观感?
- [2022-08-09 15:57:48] 加拿大预测网-在线预测:以“产品”思维搭建网站!
- [2022-08-08 09:12:57] 加拿大预测网-在线预测:一家公司的网站应该有哪些板块内容?
- [2022-08-05 09:28:06] 加拿大预测网-在线预测:企业网站建设为什么要设置新闻板块?
- [2022-07-04 15:58:06] 加拿大预测网-在线预测:网站加拿大预测网-在线预测设计的好看,这个网站就成功了一大半!
- [2022-05-20 09:34:19] 加拿大预测网-在线预测:网站后台管理系统是什么?有什么作用?
- [2022-05-17 11:29:32] 加拿大预测网-在线预测:作为消费者,应该如何选择一家水平高的网站建设公司
- [2022-05-17 11:27:01] 加拿大预测网-在线预测:高端网站定制与模板化网站应该怎么选择?
延伸阅读
- [2010-10-29 17:23:00] 加拿大预测网-在线预测:设计模式-自动完成
- [2009-12-19 09:46:00] 加拿大预测网-在线预测:交互设计(2):“有效性🍷”之“可及”
- [2010-11-12 08:27:00] 加拿大预测网-在线预测:20K的纠结 腾讯游戏flash广告设计的现状与未来
- [2009-11-13 14:24:00] 交互设计小贴士
- [2016-09-05 12:34:00] 网页设计模板赏析
- [2009-12-19 09:51:00] 加拿大预测网-在线预测:交互设计师的专业度表现
- [2009-06-19 08:15:00] 加拿大预测网-在线预测:用户不会记得点了多少下
- [2010-11-11 08:26:00] 加拿大预测网-在线预测:瞬间的快感之细节提升用户满意度
- [2009-11-04 22:35:00] 交互设计表格
- [2010-12-15 08:44:00] 加拿大预测网-在线预测:Twitter设计细节引发的惨烈思考
- [2009-12-16 17:45:00] 加拿大预测网-在线预测:交互设计模式(四)-Spatial Memory(空间记忆)
- [2010-11-25 08:34:00] 加拿大预测网-在线预测:兼容心理模型和系统模型的交互设计
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案