>

越来越多的web界面应用技术出现在网站上,本文

- 编辑:澳门博发娱乐官网 -

越来越多的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

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

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

 

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

Bootstrap

随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂。

十年前,一切都还简单得多。那个时候,大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道,并通过添加几个浏览器的hack,来兼容诡异的旧版本 IE 浏览器。时至今日,随着过去五六年间手持电子设备的突飞猛进,一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷,电子阅读器,以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。

可以预见,在不远的将来,相对于使用台式机,越来越多的人会使用移动设备来访问互联网。事实上,已经有相当数量的一部分人只通过智能手机上网。这意味着,我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品,这至关重要。在撰写本文的时候,尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果,但是用于实现这一目标的技术以及工具正在变得越来越好。

在不知道浏览设备屏幕大小的时候,最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备(如智能手机以及平板电脑)上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸,然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的,但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便,链接太小难以点击,缩放以及滚动的操作多多少少会让人在阅读的时候分心。

响应式网页设计利用同样的HTML文档来适配所有的终端设备,响应式网页设计会根据设备屏幕的大小加载不同的样式,从而在不同的终端设备上呈现最优的网页布局。举个例子,当你在大屏幕桌面浏览器中查看一个网页的时候,网页的内容可能是分为很多列的,并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面,你会发现页面的内容呈现在同一列中,并且导航按钮足够大,点击起来很方便。你可以在Media Queries这个网站上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例,然后改变浏览器窗口的大小,你会看到网页的布局会根据窗口大小相应变化。

到目前为止,我们可以看出,响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢?我们每个人都需要成为web大师才能驾驭这门技术么?或者是利用我们已经掌握的web基本知识就已经足够了?目前有什么工具可以帮到我们么?

这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难,但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架,你可以花最少的力气创建响应式且符合标准的网站,一切都很简单并且具有一致性。使用框架有很多好处,比如说简单快速,以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用,即使只掌握少量的web知识,你也可以毫无障碍的使用它们。

简而言之,如果你认真对待目前的web开发工作,那么使用框架进行开发就不是可选项而是必须要做的事情。你的站点必须高度灵活以适应不同的浏览器,平板,智能手机以及其他各种各样的手持设备。

一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了大家的使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。

 

1、界面元素的需求

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。

Bootstrap是用动态语言LESS写的,主要包括四部分的内容:

  • 脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
  • 基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
  • 组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
  • JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。

Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

  • jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
  • jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
  • Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
  • StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
  • BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
  • Bootswatch —— 提供大量免费的Bootstrap主题。
  • Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
  • LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

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

bootstrap动态导航页面跳转失效

手动切换active样式  

Bootstrap 随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得...

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

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

 

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

怎把已经做好的网页转化成bootstrap

需要改代码,重新布局。  

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

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。

选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。

附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。

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

Bootstrap(转),bootstrap

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

8、上下文关联导航

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

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

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

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

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

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

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

本文由胜博发-前端发布,转载请注明来源:越来越多的web界面应用技术出现在网站上,本文