澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

app设计浅谈,Web应用设计浅谈

Web应用设计浅谈

2011/08/19 · HTML5 · HTML5

注:本文转载自一叶苦雨

HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。

本文将围绕web app的设计,与大家讨论几点设计技巧。

什么是web app?

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

Web 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.界面元素随需而变

力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。

图片 1

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

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

图片 2

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

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

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

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

图片 3

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

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

3.空白状态时告诉用户可以做什么

当设计web app的时候,不仅需要关心一般情况下的信息展示,还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候,可以在空白区域放置一条帮助信息告诉用户如何开始。例如,一个项目管理的应用程序主页会列出用户的项目,假如还没有什么项目信息,可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

图片 4

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

图片 5

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

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

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

在空白状态中激励用户,可以显著地降低用户的流失率,并帮助潜在的用户更好的理解程序系统是如何工作的。

4.Button状态积极反馈

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

可以使用CSS添加按钮的“pressed”等状态,实现在不同状态下显示不同背景图片的功能。

图片 6

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

5.使用上下文情境导航

在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。

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

Web app可以从这种上下文情境导航中获益,仅展示用户需要的、而不是所有可用的功能,从而保持用户界面的整洁清爽。

图片 7

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

6.更加重视关键功能

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

为了将注意力引导到“创建”上,我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式,“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色,并使button略有凸起的效果。这样便于抓住用户的目光。

图片 8

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

7.嵌入视频

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

图片 9

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

图片 10

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

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

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

在很多互联网产品中都会有不同权限的用户账户存在,比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后,他们可以对账户进行升级或降级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情,这样的提示应该是和app是无缝连接的,而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。
通过几个例子我们了解一下升级账户的处理方式。

图片 11

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

图片 12

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

图片 13

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

总结

Web app的设计细节远不止上文中提到的这些,本文只算作抱砖引玉,希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公司产品的时候,我们已经对太多的东西习以为常;当我们开始设计用户界面,开始处理细节的时候,却时常会有拿捏不准的感觉。如果平时多总结一下其他产品(不一定拘泥于自己的产品圈子)的细节亮点,相信很多东西在实际工作中可以为我所用。

赞 收藏 评论

图片 14

图片 15

随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的web界面应用技术。

随着JS与XHTML的应用普及,越来越多的Web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些Web界面应用技术大大的丰富了网站的表现形式,本文将为您精心推荐十种最常见的Web界面应用技术。

首先感谢"折折熊"的翻译,本文虽然是说了10条网页界面技术的应用,不过作为界面设计师在哪里使用什么样的技术来说更为重要,所以我们觉得称其为设计思路更为恰当,不过作为现今的网页设计师来说,设计中仅仅考虑页面的美观与排版可能已经不够用了,很多时候我们设计页面的时候还要考虑进在哪里使用一些小的JS效果技术来使访问者用起来更方便,如果作为网页设计师您还没有这种思想上的准备,那阅读本文可能会对你日后的设计起到一些启发

HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主。
本文将围绕web app的设计,与大家讨论几点设计技巧。

Web应用程序的界面设计,其核心就是网页设计 ,但它的重点主要是在功能方面。要超越桌面应用程序, Web应用程序必须提供简单、直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情。

Web应用程序的界面设计,其核心就是网页设计,但它的重点主要是在功能方面。要超越桌面应用程序, Web应用程序必须提供简单、直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情。

无事看到不错的外文,简单翻译了一下共享出来,希望对大家有用。(转载请表明出处,以下为译文全部。)

什么是web app?

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

以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔细看看一些实用的技术和设计解决方案,让Web应用更友好更漂亮。

以前,我们并没有注意到Web应用程序这个方式,但是现在是时候仔细看看一些实用的技术和设计解决规划,让Web应用更友好更漂亮。

当今越来越多的应用程序迁移到web平台上。由于没有平台的限制和安装的要求,SAAS的模式看起来非常有吸引力。Web应用程序的界面设计,其核心就是网页设计,但它的重点主要是在功能方面。要超越桌面应用程序, Web应用程序必须提供简单、直观和即时响应的用户界面,让他们的用户花更少的精力和时间去完成事情。

Web app的优点

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

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

◆新功能从服务器自动传递给用户,用户自己不必升级程序;

◆可以轻松整合进入其他服务类web程序;

◆跨平台的兼容性

1、界面元素的需求

一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的Web前端技术呢?现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解。技术非黑即白,只有对和错,而技巧则见仁见智。

以前,我们并没有注意到web应用程序这个方式,但是现在是时候仔细看看一些实用的技术和设计解决方案,让Web应用更友好更漂亮。本文主要介绍的是在现代Web应用程序中,我们对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分,您可以在下面找到10个收集到的实用界面设计技术以及在许多成功Web应用程序中得出的最佳做法。

现阶段web app还很难有一个设计原则

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

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

因此本文不谈所谓的web app设计原则,现从已经上线的优秀产品中选择典型设计元素与大家讨论分享,寻找可以借鉴的地方,并借此增进对web app产品设计的认识。

在Web前端开发中,简单这个原则是很重要的。在任何时候,你在屏幕上显示越多的控制,您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时,可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的,尤其是如果你不想限制应用程序的功能的时候。

1、界面元素的需求

1、界面元素的需求

Web app界面设计的8个实用技巧

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

当你点击 Kontain 搜索框的搜索链接时,会出现一个类似于下拉菜单的层。所以,如果您需要来缩小搜索范围,您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。

在Web前端开发中,简单这个原则是很重要的。在任何时候,你在屏幕上显示越多的控制,您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时,可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的,尤其是如果你不想限制应用程序的功能的时候。

在用户界面设计中,简单这个原则是很重要的。在任何时候,你在屏幕上显示越多的控制,您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时,可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的,尤其是如果你不想限制应用程序的功能的时候。

1.界面元素随需而变

力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。

图片 16

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

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

图片 17

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

隐藏或者掩盖高级功能 是使事情更加简单的一种方法。找出最常用的功能,并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事,这在桌面软件中很常见。例如,如果您的搜索栏拥有高级过滤器,把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器,他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务,也会取决于重要性和操作时的频繁程度。

图片 18

图片 19

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

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

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

图片 20

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

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

当你点击 CollabFinder 的搜索链接时你不需要打开不同的页面,相反,搜索框的控制菜单下拉下来,允许你能够直接开始搜索。

当你点击 Kontain 搜索框的搜索链接时,会出现一个类似于下拉菜单的层。所以,如果您需要来缩小搜索范围,您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。

当你点击 Kontain 搜索框的搜索链接时,会出现一个类似于下拉菜单的层。所以,如果您需要来缩小搜索范围,您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。

3.空白状态时告诉用户可以做什么

当设计web app的时候,不仅需要关心一般情况下的信息展示,还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候,可以在空白区域放 置一条帮助信息告诉用户如何开始。例如,一个项目管理的应用程序主页会列出用户的项目,假如还没有什么项目信息,可以为用户提供一个项目创建页面的链接。 即使这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

图片 21

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

图片 22

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

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

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

在空白状态中激励用户,可以显著地降低用户的流失率,并帮助潜在的用户更好的理解程序系统是如何工作的。

2、专门操作

隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能,并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事,这在桌面软件中很常见。例如,如果您的搜索栏拥有高级过滤器,把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器,他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务,也会取决于重要性和操作时的频繁程度。

隐藏或者掩盖高级功能 是使事情更加简单的一种方法。找出最常用的功能,并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事,这在桌面软件中很常见。例如,如果您的搜索栏拥有高级过滤器,把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器,他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务,也会取决于重要性和操作时的频繁程度。

4.Button状态积极反馈

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

可以使用CSS添加按钮的“pressed”等状态,实现在不同状态下显示不同背景图片的功能。

图片 23

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

根据情况选择合适的界面控件 是很重要的。不同情况下可以用不同的方式处理,而且某些控件会比其他控件能够更好地完成他们的目标工作。

图片 24

图片 25

5.使用上下文情境导航

在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。

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

Web app可以从这种上下文情境导航中获益,仅展示用户需要的、而不是所有可用的功能,从而保持用户界面的整洁清爽。

图片 26

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

Backpack 里有一个紧凑的日历和时间选择器选择提醒日期。

当你点击 CollabFinder 的搜索链接时你不需要打开不同的页面,相反,搜索框的控制菜单下拉下来,允许你能够直接开始搜索。

当你点击 CollabFinder 的搜索链接时你不需要打开不同的页面,相反,搜索框的控制菜单下拉下来,允许你能够直接开始搜索。

6.更加重视关键功能

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

为了将注意力引导到“创建”上,我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式,“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色,并使button略有凸起的效果。这样便于抓住用户的目光。

图片 27

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

例如,你可以通过一个下拉列表来选择年月日,但是和日历选择器相比下拉列表不是非常高效的,在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份(特别是工作日和休息日),因此能够让你比用简单的下拉列表更快地做出更明智的选择 。

2、专门操作

2、专门操作

7.嵌入视频

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

图片 28

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

图片 29

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

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

3、禁用按下按钮

根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理,而且某些控件会比其他控件能够更好地完成他们的目标工作。

根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理,而且某些控件会比其他控件能够更好地完成他们的目标工作。

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

在很多互联网产品中都会有不同权限的用户账户存在,比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后,他们可以对账户进行升级或降 级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情,这样的提示应该是和app是无缝连接 的,而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。

通过几个例子我们了解一下升级账户的处理方式。

图片 30

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

图片 31

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

图片 32

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

在web应用程序的表单问题中有一个就是提交过程,非常简单的表单,如果你快速地点击两次或者更多次“提交”按钮,这个表单会被多次提交。这显示是个问题,因为它会重复创建相同的项目 。防止重复提交的不是很难,而且对于大多数Web应用程序来说做到这一点是非常必要的。

图片 33

图片 34

总结

Web app的设计细节远不止上文中提到的这些,本文只算作抱砖引玉,希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公 司产品的时候,我们已经对太多的东西习以为常;当我们开始设计用户界面,开始处理细节的时候,却时常会有拿捏不准的感觉。如果平时多总结一下其他产品(不 一定拘泥于自己的产品圈子)的细节亮点,相信很多东西在实际工作中可以为我所用。

职业指导

更多...

  • 醴陵二中2011年上学期高二年级物理科期
  • 醴陵二中2011年上学期期末考试高二年级
  • 醴陵二中2011年上学期期末考试高二年级
  • 醴陵二中2011年上期期末高二年级生物检
  • 醴陵二中2011年上期期末考试高二年级 历
  • 醴陵二中2011年上学期期末考试 高二年级
  • 醴陵二中2011年上学期高二期末考试地理
  • 揭阳第一中学2010—2011学年度第二学期
  • 揭阳第一中学2010—2011学年度第二学期
  • 揭阳第一中学2010—2011学年度第二学期

简历指南

更多...

  • 80后裸婚族理财:强制存钱加妙用信用卡
  • [名校联盟]四川省绵阳中学2010-2011学年高一下学期第三次月考[名校联盟]四川省绵阳中学2010-2011学年高一下学期第三次月考[名校联盟]四川省绵阳中学2010-2011学年高一下学期第三次月考[名校联盟]四川省绵阳中学2010-2011学年高二下学期期中考试英[名校联盟]四川省绵阳中学2010-2011学年高二下学期期中考试物[名校联盟]四川省绵阳中学2010-2011学年高二下学期期中考试数[名校联盟]四川省绵阳中学2010-2011学年高二下学期期中考试生[名校联盟]四川省绵阳中学2010-2011学年高二下学期期中考试地《海峡教育报》2011届初中毕业班数学总复习综合练习(一)

面试宝典

更多...

  • [名校联盟]四川省绵阳中学2010-2011学年
  • [名校联盟]四川省绵阳中学2010-2011学年
  • [名校联盟]四川省绵阳中学2010-2011学年
  • [名校联盟]四川省绵阳中学2010-2011学年
  • [名校联盟]四川省绵阳中学2010-2011学年
  • 求职者18则面试的禁口话题
  • 参加招聘会注意事项
  • 给大学生的面试三要诀:自信 细节 执着

职场八卦

更多...

  • 2011高考化学试题分类汇编-化学计量
  • 2011高考化学试题分类汇编-化学反应中的
  • 2011高考化学试题分类汇编-化学反应速率
  • 2011高考化学试题分类汇编-非金属及其化
  • 2011高考化学试题分类汇编-电解质溶液
  • 2011高考化学试题分类汇编-电化学基础
  • 2011高考地理试题与解析 重庆文综
  • 2011高考地理试题与解析 浙江文综.txt

劳动法苑

更多...

  • 2011高考地理试题与解析 四川文综.txt
  • 2011高考地理试题与解析 上海文综.txt
  • 2011高考地理试题与解析 安徽文综.txt
  • 2011高考化学试题分类汇编-有机化学
  • [名校联盟]四川省绵阳中学2011届高三高考适应性检测数学(文
  • [名校联盟]四川省绵阳中学2011届高三高考适应性检测数学(理
  • [名校联盟]四川省绵阳中学2011届高三高考适应性检测理综试题
  • [名校联盟]四川省绵阳中学2010-2011学年高一下学期期中考试语[名校联盟]四川省绵阳中学2010-2011学年高一下学期期中考试生

职场观察

更多...

  • 2011高考化学试题分类汇编-氧化还原反应
  • 2011高考化学试题分类汇编-物质结构 元
  • 2011高考化学试题分类汇编-离子共存 离
  • 2011高考化学试题分类汇编-金属及其化合
  • 2011高考化学试题分类汇编-化学与技术、
  • 2011高考化学试题分类汇编-化学用语
  • 2011高考化学试题分类汇编-化学实验
  • 2011高考化学试题分类汇编-化学计算
  • 关键是提高“后学历”的“含金量& amp;#8221;

职场礼仪

更多...

  • 助理设计师 南通乐福
  • 暖通设计 南通明禾通
  • 资料员 十三冶海门工
  • 高薪招聘售楼小姐数名
  • 造价师/预算师 南通永
  • 礼宾员 华润置地南通
  • 门窗制作安装 沪港公
  • 建筑大员 南通裕华建
  • 园林/景观设计 南通锦
  • 室内设计师 南通喜临

职场健康

更多...

  • 上海搜房网编辑待遇怎么样?
  • 怡馨居家纺 好吗
  • 武铁佳苑第三期三楼89平方米的房子如何啊?包括通风,布局,
  • 我09年底在苏州买的68平米的房子 可以转户口么
  • 怎么从浦东三林到康桥施耐德公司
  • 当时手机停机了没收到,房贷按揭晚交了3天,后全颌还清了,房
  • 请问谁是启东市香榭水岸一期的业主,怎么到现在还没有收房?
  • 怎样删除QQ空间的日志啊,谢了!
  • 从半壁店樱花园到朝阳十里堡都会国际大厦,怎么走最近?
  • 哪种电信宽带业务适合我,本人江苏丹阳的,谢谢!

加薪秘笈

更多...

  • 网页设计/制作 南通维
  • 网络管理员 天安保险
  • 网页设计/制作 江苏欧
  • 硬件工程师 南通拓友
  • 软件工程师 上海政通
  • 硬件工程师 南通友联
  • 技术支持/维护 南通恒
  • 网络管理员 南通鑫泰
  • 梦幻西游操作员 江苏
  • 技术支持/维护 南通市

南通人

更多...

  • 销售代表 发布时间:2011-04-20浏览0次
  • 销售代表 发布时间:2011-04-26浏览0次
  • 销售代表 发布时间:2011-05-05浏览0次
  • 销售代表 发布时间:2011-04-27浏览0次
  • 销售代表 发布时间:2011-06-14浏览0次
  • 销售代表 发布时间:2011-05-09浏览0次
  • 销售代表 发布时间:2011-04-28浏览0次
  • 销售主管 发布时间:2011-06-16浏览0次
  • 销售代表 发布时间:2011-05-17浏览0次
  • 销售代表 发布时间:2011-05-03浏览0次

南通话

更多...

  • 美容师 美丽经典
  • 化妆师 南通致尚摄影公司
  • 理疗师/学徒 漂亮妈妈产后修复中心
  • 美容师 超妍皇嘉金殿
  • 美容助理/学徒 南通美容美发有限公司
  • 发型师 富源集团
  • 美容师 心灵家园美容养生馆
  • 美容助理/学徒 来俪仿养生南通分公司
  • 发型师 富源美容美发连锁加盟集团
  • app设计浅谈,Web应用设计浅谈。美容师美容学员 香港来俪仿国际养生会所

通州

更多...

  • 求!!南通大学的学生!
  • 请问 南通大学的师范学院是在新校区吗
  • 南通大学杏林学院和扬州大学广陵学院
  • 南通大学周围有什么好玩的呢?
  • 南通大学在那里呀?
  • 南通大学和安徽师范大学哪个比较好啊?
  • 南通大学的大一新生的住宿环境怎样
  • 谁可以给我提供南通大学的具体资料
  • 南通大学的汉语言文学专业好吗?
  • 南通大学今年心内科招生多少人那?

如皋

更多...

  • 【佳乐宾馆】佳乐宾馆预订,电话,价格,点
  • 【金龙宾馆】金龙宾馆预订,电话,价格,点
  • 【长虹宾馆】长虹宾馆预订,电话,价格,点
  • 【明泉宾馆】明泉宾馆预订,电话,价格,点
  • 【天马宾馆】天马宾馆预订,电话,价格,点
  • 【德诚宾馆】德诚宾馆预订,电话,价格,点
  • 【天盛宾馆】天盛宾馆预订,电话,价格,点
  • 【永乐宾馆】永乐宾馆预订,电话,价格,点
  • 【美家宾馆】美家宾馆预订,电话,价格,点
  • 【富荣宾馆】富荣宾馆预订,电话,价格,点

海安

更多...

  • 【呈祥宾馆】呈祥宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【烟台约泰QQ连锁酒店海航店】烟台约泰QQ连锁酒店海航店预订
  • 【宏宇宾馆】宏宇宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【江宏宾馆】江宏宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【武汉港都宾馆】武汉港都宾馆预订,电话,价格,点评- www.ntb
  • 【天宏宾馆】天宏宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【恩施宾馆】恩施宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【乾佳宾馆】乾佳宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【豪生宾馆】豪生宾馆预订,电话,价格,点评- www.ntbaba.com
  • 【纺织宾馆】纺织宾馆预订,电话,价格,点评- www.ntbaba.com

启东

更多...

如东

更多...

  • 陈莉
  • 市第一人民医院
  • 如东县
  • 陈颖
  • 南通威辰数控机械有限公司
  • 南通市城中中学
  • 南通颜宇物资有限公司
  • 南通浩明电碳有限公司
  • 南通新锦江印染有限公司
  • 南通汉和外语培训中心

海门

更多...

  • 业务主任 康宝莱(中国)保健品有限公司
  • 市场拓展 HERBALIFE
  • 招企业项目营销助理 南通畅意地产研发中心
  • 市场拓展 南通双和食品有限公司
  • 市场拓展 南通裕航船务有限公司
  • 市场专员/助理 南通中政教育
  • 市场专员业务员 南通东渡广告装饰有限公司
  • 市场拓展 南通市本木装饰设计工程有限公司
  • 市场专员/助理 南通银月亮商贸有限责任公司
  • 市场部营销代表 广东三星装饰集团南通分公

南通崇川区

更多...

  • 客服经理/主管 发布时间:2011-07-31浏
  • 客服经理/主管 发布时间:2011-05-02浏
  • 售前/售后服务 发布时间:2011-07-16浏
  • 客服专员/助理 发布时间:2011-05-02浏
  • 销售代表 发布时间:2011-07-15浏览0次
  • 淘宝网销客服 发布时间:2011-08-03浏
  • 仓库管理人员 发布时间:2011-08-10浏
  • 电话客服 发布时间:2011-06-24浏览0次
  • 客服专员/助理 发布时间:2011-08-05浏
  • 客服专员/助理 发布时间:2011-06-12浏

职场跳槽

更多...

  • 干锅厨师 火锅饭店
  • 服务员 乐享驿站
  • 服务员 城市酒吧
  • 厨师 乐享驿站
  • 服务员 海安品古今
  • 服务员 南通新有斐大
  • 大堂吧服务员 南通加
  • 服务员 金南通生态酒
  • 服务员 西堤岛咖啡西
  • 配菜/打荷 常顺家常菜

职场薪酬

更多...

  • 是江苏省淮阴中学好还是江苏省启东中学好
  • 启东掼蛋网有没有代言人啊??启东掼蛋网有没有代言人?
  • 启东到镇江多少价钱
  • 启东 跑步机 好吗
  • 今天启东台风多少级?主要在哪个地方
  • 启东中学2100-2011高二月考试卷
  • 启东中学2010年高考成绩如何?
  • 启东中学作业本 9年级 语文 答案 要全
  • 怎么把启东百业网的求职信息去掉
  • 义乌市启东小学85626100

 

 

它有两层维护:客户端和服务器端 。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制,去检查被提交的内容是否重复,并且是否需要阻止提交。

Backpack 里有一个紧凑的日历和时间选择器选择提醒日期。

Backpack 里有一个紧凑的日历和时间选择器选择提醒日期。

在 Yammer 上,当你的新消息被提交之后,“更新”按钮将被禁止。

例如,你可以通过一个下拉列表来选择年月日,但是和日历选择器相比下拉列表不是非常高效的,在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份(特别是工作日和休息日),因此能够让你比用简单的下拉列表更快地做出更明智的选择 。

例如,你可以通过一个下拉列表来选择年月日,但是和日历选择器相比下拉列表不是非常高效的,在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份(特别是工作日和休息日),因此能够让你比用简单的下拉列表更快地做出更明智的选择。

客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮 。最简单的方法就是为“提交”按钮添加一段JavaScript,如下所示:

3、禁用按下按钮

图片 35

当然,我们会建议您同时还对服务器端进行检查,以确保重复不会获得通过。

在Web应用程序的表单问题中有一个就是提交过程,非常简单的表单,如果你快速地点击两次或者更多次“提交”按钮,这个表单会被多次提交。这显示是个问题,因为它会重复创建相同的项目 。防止重复提交的不是很难,而且对于大多数Web应用程序来说做到这一点是非常必要的。

MyBankTracker的APY计算器功能,通过使用容易控制的滑块去快速尝试不同的推测结果。

4、模拟窗口的阴影

它有两层维护:客户端和服务器端 。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制,去检查被提交的内容是否重复,并且是否需要阻止提交。

另一个很好的例子是滑块。是的,您可以随时手动输入一个数字,但某些情况下,滑块控件做了更好的工作。不仅由于他们易于使用 —— 只需单击并拖动——而且你也可以看清楚如何在最小和最大的范围之间进行合适地选择。

在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出 。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。

图片 36

3、禁用按下按钮

这种技术来源于传统的桌面软件,帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来,所以阴影帮助他们更接近于读者,因为感觉上窗口似乎是三维地浮在其他页面上。

在 Yammer 上,当你的新消息被提交之后,“更新”按钮将被禁止。

在web应用程序的表单问题中有一个就是提交过程,非常简单的表单,如果你快速地点击两次或者更多次提交按钮,这个表单会被多次提交。这显示是个问题,因为它会重复创建相同的项目。防止重复提交的不是很难,而且对于大多数Web应用程序来说做到这一点是非常必要的。

Digg 的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。

客户端则是简单得多。所有您需要做的就是在点击之后禁用“提交”按钮 。最简单的方法就是为“提交”按钮添加一段JavaScript,如下所示:

它有两层维护:客户端和服务器端。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制,去检查被提交的内容是否重复,并且是否需要阻止提交。

5、空白状态告诉你要做什么

<input type=”submit” value=”Submit” onclick=”this.disabled=true” />

图片 37

当你设计一个Web应用程序时,你不仅需要通过样本数据去测试这个程序,而且最重要的是当什么内容都没有的情况下,你要确保它看起来不错而且是有帮助的 。

当然,我们会建议您同时还对服务器端进行检查,以确保重复不会获得通过。

在 Yammer 上,当你的新消息被提交之后,更新按钮将被禁止。

当在页面或者查询结果没有信息时,告诉你如何才能处理这些空白区域是一条很有帮助的信息。例如,一个项目管理应用程序的网页可能会列出用户的项目,但如果没有项目,你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上,但一点额外的帮助并不会有损失 。

4、模拟窗口的阴影

客户端则是简单得多。所有您需要做的就是在点击之后禁用提交按钮。最简单的方法就是为提交按钮添加一段JavaScript,如下所示:

这种技术实际上鼓励用户试用服务,并在注册之后直接使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住,用户通常希望得到一些或多或少提供给他们的具体构思,但是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。

在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出 。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。

当然,我们会建议您同时还对服务器端进行检查,以确保重复不会获得通过。

通过空白状态去激励用户和行为,可以大大减少“辍学”,并且帮助您的潜在客户,更好地了解该系统如何工作。

这种技术来源于传统的桌面软件,帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来,所以阴影帮助他们更接近于读者,因为感觉上窗口似乎是三维地浮在其他页面上。

4、模拟窗口的阴影

6、按钮的按下状态

图片 38

在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。

许多Web应用程序有自定义的按钮样式。这些都是用自定义图片作为他们背景的锚点或输入按钮。默认输入按钮可能不适合在一些情况下,以及文字链接有时过于渺小。目前的挑战是,当你把你的链接弄得看上去像按钮时,它们的操作也应该和按钮一样——这包括当用户点击它们时会有被“按动”的效果 。

Digg 的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。

这种技术来源于传统的桌面软件,帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来,所以阴影帮助他们更接近于读者,因为感觉上窗口似乎是三维地浮在其他页面上。

这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性,并且给用户带来更接近于桌面软件的的用户体验。

5、空白状态告诉你要做什么

图片 39

你可以通过CSS为按钮增加按下的效果。

当你设计一个Web应用程序时,你不仅需要通过样本数据去测试这个程序,而且最重要的是当什么内容都没有的情况下,你要确保它看起来不错而且是有帮助的 。

Digg 的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。

Highrise 的按钮实际上是在你点击的时候显示一个按下的效果,给用户一个非常舒适的反馈感觉。

当在页面或者查询结果没有信息时,告诉你如何才能处理这些空白区域是一条很有帮助的信息。例如,一个项目管理应用程序的网页可能会列出用户的项目,但如果没有项目,你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上,但一点额外的帮助并不会有损失 。

为了实现这一效果,设计师往往建立一个透明的容器与PNG图像作为背景,把内容放进容器中——在盒子各边加上等距的边框。另一种选择是使用一个拥有透明边框的背景图像并且通过绝对定位来控制盒子内容的位置。这正是Digg的做法——这是他们正在使用的图片(dialog.png) 。这是他们使用的代码和CSS样式:

7、在登陆页面提供注册的连接

图片 40

(X)HTML:

一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应用程序,但是却不能立刻找到注册页面。可能他们已经试过访问一个只提供给注册用户的特定页面。

Campaign Monitor 会在你开始建立一个邮件广告时指导你正确的方向。

<div id="container"> <div style="display: block; top: 236px; opacity: 1;" class="dialog"> <div class="body"> <div class="content"> ... </div> </div> </div> </div>

Goplan 的登陆页面上有个漂亮的彩色按钮指向注册页面。

这种技术实际上鼓励用户试用服务,并在注册之后直接使用这项服务。通过应用程序的单步指导用户能够帮助他/她去了解程序提供的优势以及是否有用。同样重要的是把最重要的操作呈现给用户并且只有这些而已——把所有功能都呈现出来并没有意义。请记住,用户通常希望得到一些或多或少提供给他们的具体构思,但是他们不想要直接跳到详细说明去——他们既没有时间也没有兴趣。

CSS:

在你的登陆页面上放上注册的连接 会让一切容易很多。如果他们没有账户,他们不应该去寻找注册页面。我们研究证实:在注册页面,有18%的网站有登录表单或者链接到登陆页面的连接。

通过空白状态去激励用户和行为,可以大大减少“辍学”,并且帮助您的潜在客户,更好地了解该系统如何工作。

.dialog { position: absolute; left: 50%; margin-left: -315px; width: 630px; z-index: 100001;

} .dialog .body { background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */ padding: 40px 13px 10px 40px; }

8、上下文关联导航

6、按钮的按下状态

或者,你也可以使用基于javascript的lightbox特效库,或者通过使用之间 我们介绍过的CSS3属性 去模拟阴影,但是你必须意识到现在的IE浏览器将不会支持它。

思考什么是用户期望看到的以及在每个给与的情景 中他们需要什么是很重要的。你不需要在每个地方显示同样的导航控件因为在用户可能不是在每个环境中都需要它们。

许多Web应用程序有自定义的按钮样式。这些都是用自定义图片作为他们背景的锚点或输入按钮。默认输入按钮可能不适合在一些情况下,以及文字链接有时过于渺小。目前的挑战是,当你把你的链接弄得看上去像按钮时,它们的操作也应该和按钮一样——这包括当用户点击它们时会有被“按动”的效果 。

图片 41

上下文关联控件的比较好的范例之一是最近在微软office 2007中的界面,在它的界面中默认的工具条被带装控件代替。每个标签上有不同控件相关的特定操作,无论是图形编辑,校对或者简单书面形式。web应用程序也可以受益于这种上下文关联的控件,因为这些控件通过只显示用户需要的内容来帮助整洁界面,并非显示所有的内容 。

这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性,并且给用户带来更接近于桌面软件的的用户体验。

Basecamp 的项目切换窗口有一个大的轻阴影,帮助菜单区域脱颖而出。

Lighthouse 提供一个熟悉的标签导航菜单,但是它在标签正下方有二级菜单。这个层级只显示当前项目相关活动的部分。

你可以通过CSS为按钮增加按下的效果。

9、更加重视主要功能

图片 42

不是所有控件拥有相同的重要性 。例如,在屏幕上创建一个新项目,你可以有两个按钮:“创建”和“取消”。这个“创建”的链接更重要一些,因为是用户大部分时间会去用的操作。只有少数才会去取消。所以如果这些控件挨着排放,你可能不会想要给于相同的重视。

Paste_Image.png

这个 Lighhouse 的“创建任务”按钮。你可以看到“取消”链接在旁边以纯文本格式。这个按钮不仅具有更重要的操作而且会有较大的点击区域并且容易去点击。

Highrise 的按钮实际上是在你点击的时候显示一个按下的效果,给用户一个非常舒适的反馈感觉。

为了让用户的重点转向“创建”链接,我们可以简单地利用不同的样式或者控件形式。一些应用程序的表单输入按钮用来作为创建动作,并且把取消操作作为一个文字连接。这样不仅给与创建按钮更多的点击区域 ,而且也帮助那些在搜寻内容的用户获得更好的焦点目光 。

7、在登陆页面提供注册的连接

10、嵌入式视频

一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应用程序,但是却不能立刻找到注册页面。可能他们已经试过访问一个只提供给注册用户的特定页面。

当图片和文字作为一种很大的方式去和你的用户沟通并且教育你的用户有关你程序的特点时,如果你有资源去投入,视频甚至可以成为更好的选择。视频在最近几年的web应用上已被越来越受欢迎。对于Web应用程序,视频通常作为展示产品特点的示范影片 被用于市场网站中。但是这不是使用视频的唯 一方法。

图片 43

一些Web应用程序使用视频嵌入在程序本身教导用户如果使用某些特定功能。视频是一种非常好的方式去快速展示你产品是被怎么使用的,因为它更容易描述超过一页文字的内容,也清楚得多,因为观众可以清楚地看到该怎么办。

Goplan 的登陆页面上有个漂亮的彩色按钮指向注册页面。

想了解跟多web前端知识请持续关注厚学网。

在你的登陆页面上放上注册的连接 会让一切容易很多。如果他们没有账户,他们不应该去寻找注册页面。我们研究证实:在注册页面,有18%的网站有登录表单或者链接到登陆页面的连接。

原文来自厚学网:https://www.houxue.com/news/385892.html

8、上下文关联导航

思考什么是用户期望看到的以及在每个给与的情景中他们需要什么是很重要的。你不需要在每个地方显示同样的导航控件因为在用户可能不是在每个环境中都需要它们。

上下文关联控件的最佳范例之一是最近在微软office 2007中的界面,在它的界面中默认的工具条被带装控件代替。每个标签上有不同控件相关的特定操作,无论是图形编辑,校对或者简单书面形式。Web应用程序也可以受益于这种上下文关联的控件,因为这些控件通过只显示用户需要的内容来帮助整洁界面,并非显示所有的内容 。

图片 44

Paste_Image.png

Lighthouse 提供一个熟悉的标签导航菜单,但是它在标签正下方有二级菜单。这个层级只显示当前项目相关活动的部分。

9、更加重视主要功能

不是所有控件拥有相同的重要性 。例如,在屏幕上创建一个新项目,你可以有两个按钮:“创建”和“取消”。这个“创建”的链接更重要一些,因为是用户大部分时间会去用的操作。只有少数才会去取消。所以如果这些控件挨着排放,你可能不会想要给于相同的重视。

为了让用户的重点转向“创建”链接,我们可以简单地利用不同的样式或者控件形式。一些应用程序的表单输入按钮用来作为创建动作,并且把取消操作作为一个文字连接。这样不仅给与创建按钮更多的点击区域 ,而且也帮助那些在搜寻内容的用户获得更好的焦点目光 。

10、嵌入式视频

当图片和文字作为一种很大的方式去和你的用户沟通并且教育你的用户有关你程序的特点时,如果你有资源去投入,视频甚至可以成为更好的选择。视频在最近几年的Web应用上已被越来越受欢迎。对于Web应用程序,视频通常作为展示产品特点的示范影片 被用于市场网站中。但是这不是使用视频的唯一方法。

图片 45

Paste_Image.png

GoodBarry 特点是在头版有示范视频去展示产品,它也通过利用示范影片去教育用户如何开始使用。

一些Web应用程序使用视频嵌入在程序本身教导用户如果使用某些特定功能。视频是一种非常好的方式去快速展示你产品是被怎么使用的,因为它更容易描述超过一页文字的内容,也清楚得多,因为观众可以清楚地看到该怎么办。

本文来源:
http://www.oschina.net/question/2548434_2183723#tags_nav
版权归原作者所有,本文有改动。

图片 46

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:app设计浅谈,Web应用设计浅谈