Web app制做细节:web app互动制做技巧

Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图创建以本身为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。
本文将围绕web app的制做,与你们讨论几点制做技巧。web

什么是web app?

Web app是一种经过网络(如互联网或内联网)访问的应用程序;也能够指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并 依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网站浏览器的普及,以及使用这一轻薄客户端方便的用户体验。没必要下载安装就能够实现更新和维护,具备支持跨平台的内在属性,是web app开始流行的关键缘由。典型的web app产品包括web邮箱、web商店、wikis等等。浏览器

Web app的优势

◆经过兼容性浏览器实现配置而不须要任何复杂的“转出”步骤;服务器

◆浏览器应用程序几乎不须要客户端上的磁盘空间;网络

◆新功能从服务器自动传递给用户,用户本身没必要升级程序;app

◆能够轻松整合进入其余服务类web程序;工具

◆跨平台的兼容性网站

现阶段web app还很难有一个制做原则

HTML5 技术仍在发展中且发展尚不完善, web app做为该技术的产物天然也是在不断试验中进步;此外,web app还要依赖兼容性浏览器更强大的渲染能力,俗话说“皮之不存毛将焉附”,在你们都期待的强大浏览器出现以前谁也难以预言web app须要作成什么样才算是一个合格的产品。在这种行业背景下,web app还难以有一个所谓的制做原则,起码如今还不构成总结一个合理制做原则的条件。指针

其实,所谓的制做原则本就是从已有的、典型的制做做品中 倒推得出的。好比,解构主义制做风格的提出不是以前就有的,是理论家在分析总结了建筑制做师盖里、埃森曼、特斯楚米等大师的典型制做做品,结合这几位大师 的制做理念后定义的一个流派名称。所谓的解构主义制做原则也是从权威大师典型做品中概括总结的; 制做原则出现后继而能够对以后的制做起必定的指导做用。视频

所以本文不谈所谓的web app制做原则,现从已经上线的优秀产品中选择典型制做元素与你们讨论分享,寻找能够借鉴的地方,并借此增进对web app产品制做的认识。教程

Web app界面制做的8个实用技巧

Web app用户界面制做,核心是web制做;不过与通常意义上的web制做相比较,web app更加注重功能。为了在与桌面应用程序的竞争中展示其优点,web app须要提供简洁、直观、快速响应的用户界面,以便于用户在任务操做中节省精力和时间。

1.界面元素随需而变

力求简洁明了是用户界面制做的重要原则。在同一时间给用户展现的功能越多,用户须要寻找和思考的时间也就越多。一样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并不是垂手可得,尤为是你不想减小应用程序功能的状况下。

以Kontain搜索模块为例,在搜索框中有一个下拉菜单,帮助用户细化搜索范围。用户能够经过菜单选择本身想要寻找的内容。该网站经过这些选项简化了搜索框。

将 高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最常常用的是哪些功能,而后把其余功能隐藏处理。这些可由下拉式菜单和控件完成。例如,搜索栏 中的高级过滤器能够作成尾部的特殊下拉菜单样式。当用户须要这些过滤器的时候只须要几回点击就可使用。决定哪些功能保留展现哪些须要隐藏起来,并非一 个简单的工做,须要取决于功能控件的重要程度和被使用的频繁程度。

擅长如此处理的还有CollabFinder, 如上图。用户点击搜索连接后并无被立刻带到其余页面;搜索框控件下拉下来,容许用户在当前页面内直接进行搜索操做。这样的制做方式,既保持了用户视觉焦点的稳定,又使得整个页面在不使用某个特定功能的状况下简洁清爽。

2.为模态窗口增长边缘阴影

弹出式菜单和窗口周边的阴影不只仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸,有助于将菜单或窗口从背景中区别开来;另外一方面经过灰度化的边缘阴影能够屏蔽背景内容的噪音干扰。

这个技巧根植于传统桌面程序,帮助用户将注意力集中在弹出的窗口。因为不少模态窗口不容易从桌面程序内容页面中凸显出来,阴影可使它们看起来具备立体效果、仿佛悬浮于其余内容之上,因而拉近了模态窗口与用户的距离。

如上图,Digg的登陆窗口边缘拥有厚厚的阴影,对下面内容的视觉噪音起到了有效的屏蔽做用。

为 实现这样的效果,制做师每每将透明的PNG背景图片做为容器,再把内容填充到容器中,同时等距离填充弹出框各边缘。或者使用具备透明边框的背景图片,并将 内容框绝对定位在其中。另外,也可使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令,但须要注意浏览器是否支持。

3.空白状态时告诉用户能够作什么

当制做web app的时候,不只须要关心通常状况下的信息展现,还要确保界面在空白状态时表现良好、具备指引做用。页面中尚未产生任何信息的时候,能够在空白区域放 置一条帮助信息告诉用户怎样开始。例如,一个项目管理的应用程序主页会列出用户的项目,假如尚未什么项目信息,能够为用户提供一个项目建立页面的连接。 即便这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

如上图,Campaign Monitor在右边方向提供了一个创建新信息的快速入口。

Wufoo的表单页面有醒目的、友好的信息鼓励用户去建立新的表单。

这个技巧能够有效地鼓励用户试用该服务,并在注册后当即进行使用。经过应用程序的单一操做步骤能够帮助用户理解这个应用的优点以及对他们是否有用。

此外,只为用户展现最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并无什么实际意义。须要牢记的是,用户一般想从应用中得到或多或少的信息,但却不想跳进细节中,用户没有时间也没有兴趣。

在空白状态中激励用户,能够显著地下降用户的流失率,并帮助潜在的用户更好的理解程序系统是怎样工做的。

4.Button状态积极反馈

许 多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景,文字连接有时候看起来又太含蓄。须要注意的是,把连接作成Button样式的时候,它们 就应该有button的表现形式。好比,在点击button的时候它们应该会出现被“压”过的样子。这不只仅是纯粹的视觉变化。及时反馈给用户,可使 web app感受起来更灵敏,与桌面应用程序的用户体验更接近。

可使用CSS添加按钮的“pressed”等状态,实如今不一样状态下显示不一样背景图片的功能。

例如Highrise中的按钮,在鼠标指针点击的时候会呈现 “pressed”状态效果,为用户提供了灵敏的反馈感觉。

5.使用上下文情境导航

在既定的情境下考虑用户但愿看什么、须要什么是很是重要的。不须要在每个地方都放置相同的导航控件,由于用户不是在任何状况下都须要它们。

上下文情境导航最好的一个例子就是Office 2007中,原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能,如编辑图形、校对或者简单书写。

Web app能够从这种上下文情境导航中获益,仅展现用户须要的、而不是全部可用的功能,从而保持用户界面的整洁清爽。

例如上图中,Lighthouse 有很是典型的tab导航菜单;然而,在tab导航栏的下方它还有二级导航,在这个二级导航中只显示网站活跃部分的相关条目。

6.更加剧视关键功能

并 不是全部的控件都拥有相同的重要性。例如建立一个新的条目,页面中会有“建立”“取消”两个button. 这里的“建立”就要更加剧要些,由于这是大多数状况下用户即将要作的事情。极少的状况下用户才会去点击取消。虽然这两个控件并排放置,可是不要给予相同的 重视程度。

为了将注意力引导到“建立”上,咱们能够尝试使用不用的风格或样式。一种方式是将“建立”制做成button样式,“取消”制做成文字连接样式。另外一种方式是在视觉上使用使用不一样的颜色,并使button略有凸起的效果。这样便于抓住用户的目光。

例如在Google+建立新圈子的弹窗中,建立按钮在视觉上具有了更加醒目的效果,拥有该页面中更高的重视等级。

7.嵌入视频

虽然图片和文字是向用户介绍应用程序功能的很好的方式,但若是资源容许的话,视频将是一个更优方案。近年来视频在网络上的使用愈来愈频繁。Web app的截屏视频常常被使用在营销网站中来展现产品的功能;然而这并非视频使用的惟一方式。

GoodBarry 在其首页中使用截屏视频来展现产品。同时它还在应用中嵌入了视频来指导用户怎样去开始。

MailChimp在管理面板中使用教程视频以帮助新用户。

一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。视频是快速演示产品怎样使用的绝佳方法,由于与文字相比视频更容易被用户所接受,并且视频可使用户准确地看到须要作什么,更加清晰。

8.让升级或降级的提示简洁、不扰民

在 不少互联网产品中都会有不一样权限的用户帐户存在,好比邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个帐户后,他们能够对帐户进行升级或降级。怎样 制做界面来提示用户他们能够升级而不去干扰用户的工做流程呢?制做师确定不肯意在应用程序以外完成这件事情,这样的提示应该是和app是无缝链接的,并且 最好是让用户感受方便。所以升级帐户的提示最好放在app内完成。

经过几个例子咱们了解一下升级帐户的处理方式。

FreshBooks 的升级提示是一直存在的,被放置在了web app的底部。如上图。因为提示是在界面的工做区之外的位置,并不会对用户的工做流程形成影响。

在Basecamp的升级提示中,用户能够很清晰地得知升级后将会有哪些变化。请看上图。

在CompVersions中,各类升级后的变化状况很直观 ,整个页面简洁清晰。请见上图。

总结

Web app的制做细节远不止上文中提到的这些,本文只算做抱砖引玉,但愿你们能够在已有的优秀产品中发现更多思考的触发点。当咱们习惯了蜻蜓点水地浏览其余公 司产品的时候,咱们已经对太多的东西习觉得常;当咱们开始制做用户界面,开始处理细节的时候,却时常会有拿捏不许的感受。若是平时多总结一下其余产品(不 必定拘泥于本身的产品圈子)的细节亮点,相信不少东西在实际工做中能够为我所用。

相关文章
相关标签/搜索