Web APP界面[编辑]

概述

Web app界面就是指可以在web app下看到的软件界面。在web界面中，有很多通用性的元素，例如各种表单元素，各种功能的图标以及操作按钮等等。

简介

Web app界面就是指可以在web app下看到的软件界面。比如报表软件，以FineReport为例，在你做好设计器模板后，点击分页预览或填报预览，就可以在浏览器里打开你做的报表。你可以在这个界面上实现数据的增删改等操作。用户界面设计直观的来说就是用户看到的网站的外观设计。在web界面中，有很多通用性的元素，例如各种表单元素，各种功能的图标以及操作按钮等等。

什么是web app?

Web app是一种通过网络（如互联网或内联网）访问的应用程序；也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言（如JavaScript）并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。
Web无需安装，对设备碎片化的适应能力优于App，它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行。随着iPhone带来的WebKit浏览体验升级，使得专为iPhone等有WebKit浏览内核的移动设备开发的Web应用，也有了如App一般流畅的用户体验。

Web app界面

一、元素变化

力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多，用户需要寻找和思考的时间也就越多。同样，界面中存在的选项越少，可用功能就越明显、越容易浏览。不过简化界面并非轻而易举，尤其是你不想减少应用程序功能的情况下。将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能，然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例如，搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起来，并不是一个简单的工作，需要取决于功能控件的重要程度和被使用的频繁程度。

二、增加阴影

弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸，有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。
这个技巧根植于传统桌面程序，帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来，阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上，于是拉近了模态窗口与用户的距离。为实现这样的效果，设计师往往将透明的PNG背景图片作为容器，再把内容填充到容器中，同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图片，并将内容框绝对定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的drop shadows命令，但需要注意浏览器是否支持。

三、提醒用户

当设计web app的时候，不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放置一条帮助信息告诉用户如何开始。例如，一个项目管理的应用程序主页会列出用户的项目，假如还没有什么项目信息，可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮，一个额外的帮助并不会有什么妨碍。这个技巧可以有效地鼓励用户试用该服务，并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。
此外，只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是，用户通常想从应用中获得或多或少的信息，但却不想跳进细节中，用户没有时间也没有兴趣。在空白状态中激励用户，可以显著地降低用户的流失率，并帮助潜在的用户更好的理解程序系统是如何工作的。

四、Button

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

五、情境导航

在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。
上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。Web app可以从这种上下文情境导航中获益，仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。

六、关键功能

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

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

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

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

1.界面元素随需而变

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

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

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

4.Button状态积极反馈

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

5.使用上下文情境导航

在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。
上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。

6.更加重视关键功能

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

7.嵌入视频

虽然图片和文字是向用户介绍应用程序功能的很好的方式，但如果资源允许的话，视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能;然而这并不是视频使用的唯一方式。
GoodBarry 在其首页中使用截屏视频来展示产品。同时它还在应用中嵌入了视频来指导用户如何去开始。

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

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

Webapp界面设计工具

（一）、webAPP界面设计工具：Kendo UI

Kendo UI拥有统一测试，支撑框架下你所需要的所有工具。它使得你专注于创建自己的应用程序，而不是从成百上千不支持的插件和库中创建（和支撑）框架。 Kendo UI Web包括简单、一致的编程接口，安全可靠的数据源，精美和新颖的UI小部件，MVVM框架，主题和模板等。你需要做的就是以Kendo UI Web为基础，去开发现代化、交互式的HTML5和JavaScript应用程序。

（二）、webAPP界面设计工具：MOQUPS

这个工具可创建出非常惊人的webapp，具有高保真、独立分辨率的 SVG 模型和线框。Moqups 是一款HTML5在线的WEB框架、模型、UI设计并创建的网络应用程序。基于HTML5在线WEB框架、模型、UI设计并创建:Moqups 它内置有超过60套手绘的SVG模板及特性。值得推荐使用。

（三）、webAPP界面设计工具：Fluid UI

Fluid UI 是目前最快的移动 app 原型设计工具，它可以在移动设备上测试各种低保真和高保真的 app 模型，帮助你以最快的速度收集 app 需求，节约时间和金钱。

（四）、webAPP界面设计工具：UI Parde

这是一个在线设计工具，你可以用它设计按钮、菜单、图表和功能区，设计好后可以一键生成 HTML 或 CSS 代码，生成的图标还可以直接导出 PNG 格式的图片。总之，这款 UI 设计工具不要求你有多么丰富的代码知识。

（五）、webAPP界面设计工具：UXPin

UXPin是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。该软件还提供了版本控制和迭代功能，可以轻松的共享预览，直观的注解和实时的协同编辑和聊天。该软件拥有大量具有吸引力的用户界面元素风格（包括web，iOS，Android等），并且具有快速、灵敏的响应拖放接口。

参考资料：百度百科

扩展阅读：