您的位置:首页 > 其它

6条建议帮助你开发优秀Web应用程序

2011-11-30 18:48 477 查看
注:这篇文章由Greg和Adrian发表于2011年11月16日。它从分析传统的web设计入手,指出传统设计中容易被忽略的细节,并给出了6条中肯的建议。译者认为这篇文章将会给web设计师带来更美妙的设计体验及更多的灵感。

设计Web应用程序比设计网站更具有挑战性。设计师需要对用户的行为作出预期,使用户的生活更便捷,并且尽可能使产品的视觉体验吸引人。许多设计师倾向于使自己的体验更简便,而不是站在用户的角度进行考虑。下面列出了设计者在设计web应用程序中容易忽略的几个窍门。

1.好的工具提示的力量

当你把你的web应用程序展示给潜在用户看的时候,最糟糕的就是到处放上文字来吸引新用户的注意力,这反而破坏了可爱的画面。这时,图标的工具提示可以为你带来非常大的用处。工具提示使用户通过研究按钮来了解整个系统,并且不会妨碍到应用体验。正在了解所有按钮的用途的用户能完全沉浸在体验过程中。当需要动态显示的时候,你需要一个切换按钮来开关工具提示。第一个标签可以显示工具提示,第二个标签可以提交操作。





工具提示清晰地告诉用户该图标会使页面跳转到哪

2.不要指望用户的记忆力

当需要填在第一页的内容在第二页上的时候,没有比在页面之间来回跳转更让人感到沮丧的了。Web app不应该强制用户记住细节,只需要让用户做些他们需要做的操作就可以了,并尽可能提供他们完成任务所需要的相关信息。比如,如果用户必须在程序开始输入用户编号,那他们就不需要再次输入该信息。如果你必须让用户填写不止一条信息,而这些信息需要参考另外的地方(银行账单,脚注等),你需要把这些信息安排在同一个页面上,以防认知超负荷。

3.提供多个可执行的方法

你开发的任何web app都需要适应用户的行为,并且提供多个可达到最终目的的方法。想象一个任务管理程序。典型的任务包括若干信息属性,这些属性(日期,优先级,描述等)定义了需要哪些操作。默认的方法是添加一项任务及其相关的信息属性。然而,你应该给用户提供一个快速方法添加任务,而不需要填多余的信息属性。提供不同的不同的方法来达到最终目的会使用户感觉你的程序充满活力,因此他们可以以自己的步调来办事。





添加一个新任务和所有你需要的信息





只添加任务,稍后整理细节

4.不要过度模式化

“看我,没什么大不了的。”这是模式弹出窗口显示给用户的提示。这是充满现代化气息的弹窗响应,虽然有时被滥用。你可以用弹窗引起用户的注意,但是如果你在每个跳转都试图引起用户的注意,他们会感觉厌烦,有想关掉程序的冲动。为了使用户有更多主动权,在弹窗的右上角添加一个取消按钮或者是“X”图标,使用户在关闭弹窗的时候不需要太多操作。另外一个容易被忽略的窍门就是允许用户点击窗口以外灰色区域来关闭弹窗消息。用户不喜欢必要之外的操作,也不喜欢不友好的提示。明智并谨慎地使用弹窗消息帮助用户控制局面。

5.提供有价值的状态信息

“请稍侯……”和“正在下载……”通常会在页面的顶部发现这种信息。这些词没有增加用户对于应用程序的体验,但是他们通知用户程序忙,问题是当这些状态信息很小,并且不起眼的时候,忽略了信息的用户会因为程序没有响应而感觉沮丧不已,因为他们并没有注意到程序正在被其他任务占用。

比如说,当你第一次加载GoogleMaps时,页面顶部靠左边的位置出现一条黄色的状态信息,也许之前你从未见过它。当显示这类信息的时候,拖拽地图没有一点响应直到完成加载。如果信息重要到能使你的程序停止一切响应,那一条小小的状态信息反馈是不够的。如果一条状态信息有例如“请稍候”等字眼,那它应该以弹窗形式出现,除弹窗外的网页部分变透明。这明确地告诉需要等待,当用户确切意识到发生来了什么的时候他们会更宽容。





下次使用GoogleMaps的时候留意该信息

6.不要担心,把滑动条当成你的优势来用吧!

太过担心重叠,会是你本来可滚动灵活的界面变得促狭、凌乱。这个问题的根源是不切实际的担心,担心使用电脑的用户不懂如何使用滚动条,滚动条下面的部分会被忽略。为防止这种情况发生,你需要让用户快速了解你的web app在滚动条上面的部分内容。这是什么意思?用户为什么要关心这些?页面的下半部分有没有更多信息。如果你的app没有被遮住的部分足够吸引用户,用户会滑动鼠标看页面上更多的信息。把足够的内容放到被遮住的部分来满足用户。一旦用户浏览页面的底部,你会因为有感兴趣的用户在浏览你的内容感到自信。页面的底部可能是你的网站最重要的部分,因为浏览页面底部的用户比其他只浏览页面顶端的浏览者更有可能被app所吸引。

有关用户使用滑动条的研究

结论

但愿这个一览表能帮你重新思考你已经做过和正准备做的设计决策。无论你是设计一个web应用程序还是一个网站,最终目的都是一样的。那就是让你的用户从访问到离开得到满意的体验。









关于Greg和Adrian

Greg是web开发人员,Adrian是平面设计师,他们一起成立了GingerPenguin,理念是生产有利而直观的web应用程序。他们是舞台上的新秀,却用他们的To Do List app开发出了优秀的程序,这些程序发布在web设计师的visual
CMS上。在Twitter上关注他们的进度。

原文出处:6 Tips to Help You Build a Great Web Application


译文来源:http://www.webapptrend.com/
WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展

请大家在关注CSDN的同时,关注我们的新浪微博 @WebAppTrend,欢迎加入我们的QQ群:193775364

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: