网页教学网收集的10个有用的界面设计技术和最佳做法

　　网页教学网收集的10个有用的界面设计技术和最佳做法

　　简介：本文介绍了我们在现代 Web 应用程序中广泛使用的设计模式和有用的设计解决方案，这是第一部分。您可以在下面找到网络教学网络在许多成功的网站 应用程序中采集的 10 种有用的界面设计技巧和最佳实践。

　　最近，越来越多的软件应用程序迁移到网络。由于没有平台限制或安装要求，网络上的软件即服务模型看起来非常有吸引力。 Web 应用程序界面设计的核心是网页设计，但其重点主要是功能性。与桌面应用程序相比，网络应用程序必须提供更简单、更直观和更灵敏的用户界面，让用户能够以更少的精力和时间做事。

　　过去，我们并不关心 Web 应用程序的方式。现在我们应该并且是时候仔细研究一些有用的技术和设计解决方案，以使 Web 应用程序更加用户友好和美观。本文介绍了我们在现代 Web 应用程序中广泛使用的设计模式和有用的设计解决方案，是第一部分。您可以在下面找到网络教学网络在许多成功的网站 应用程序中采集的 10 种有用的界面设计技巧和最佳实践。

　　1. 界面元素要求

　　简单是一个非常重要的用户界面设计。在任何时候，您在屏幕上显示的控件越多，您的用户花在弄清楚如何使用界面上的时间就越长。 When there are fewer choices, the available functions become more obvious and easier to navigate.简化的界面是最好的，尤其是当您不想限制程序的功能时。

　　

　　当您单击 Kontain 搜索框中的搜索链接时，会出现一个类似的下拉菜单。因此，如果您需要缩小搜索范围，您可以使用菜单选择对您要搜索的内容进行排序。折叠这些选项以简化搜索框。

　　隐藏或伪装其高级功能是让事情变得更简单的方法之一。在您的界面或其他部分找出最常用的功能，并使用最常用的桌面软件弹出菜单和控件来制作它。例如，如果您的搜索栏具有高级过滤功能，请不要将它们放在下拉菜单的底部。如果用户需要这些过滤功能，只需点击几下即可完成操作。决定保留什么和隐藏什么不是一件简单的事情，而是取决于每个控件的重要性和使用频率。

　　

　　当您点击 CollabFinder 搜索链接时，您无需输入其他网页，而是可以通过控制搜索框中的下拉菜单直接开始搜索。

　　2. 特殊控件

　　重要的是选择界面控件的正确位置。不同的岗位有不同的处理方式，有些控件在执行其预期功能时表现优于其他控件。

　　

　　背包有一个紧凑的日历日期和时间选择器来选择提醒日期。

　　例如，您可以使用下拉列表来选择某个日期的年、月、日，但与日历选择相比，下拉菜单并不是很有效。在日历选择中，您可以直接点击您想要的日期。日历选择还可以帮助您查看天、周和月（尤其是工作日和周末），因此与简单的下拉列表相比，日历选择更容易让您做出更明智的决定。

　　

　　MyBankTracker 的 APY 计算器功能简单易用，您可以使用滑块控件快速尝试不同的预测。

　　另一个很好的例子是滑块。您可以随时手动输入一些数据，但在某些情况下，使用滑块控件可以更好地完成很多工作。它们不仅易于使用（只需单击并拖动），而且您还可以了解如何选择适合的最低和最高适用范围。

　　3.禁用按钮按下

　　Web 应用程序表单提交遇到的问题。非常简单的表单，如果您非常快速地按两次或更多次“提交”按钮，表单将被提交两次或更多次。这显然是一个问题，因为它会创建重复的相同项目。防止重复提交并不难，但对于大多数网络应用来说，这是必须做到的。

　　可以采取两种保护措施：客户端和服务器端。这里我们不会采取服务器端的保护措施，因为这取决于您使用的编程语言和您的后端架构。基本上你应该做的是验证以确保在处理阶段不会提交重复提交，并防止重复提交。

　　

　　Yammer 会在您提交新电子邮件后禁用“更新”按钮。

　　客户端保护要简单得多。您需要做的就是让“提交”按钮不总是可点击：最简单的方法是在“提交”按钮中添加一个 JavaScript 脚本，如下所示：

　　1.

　　当然，我们也建议您同时进行服务器端验证，以确保不会重复通过。

　　4.模式窗口周围的阴影

　　下拉弹出菜单和窗口周围的阴影不只是养眼（Photoshop*敏*感*词*区域昏暗内容的干扰。

　　这项技术源自传统的桌面应用程序，可帮助用户将注意力集中在出现的窗口上。由于大多数模态窗口的主要内容不像桌面应用程序那样容易区分，因此阴影的出现似乎更接近读者，因为窗口以三维形式出现并放置在网页其余部分的顶部页面。

　　

　　Digg 的登录窗口周围有一个厚厚的阴影，以阻止来自页面下方内容的干扰。

　　为了达到这种效果，设计师经常使用透明的png图片作为背景，并使用一个放置内容的盒子（每边等距填充）来创建一个容器。另一种选择是使用带有透明边框的背景图像并使用绝对定位来定位内容框。 Digg 正是这样做的——他们使用 (dialog.png) 图像。这是他们使用的标记和 CSS 样式：

　　(X)HTML：

　　...

　　CSS：

　　.dialog {

　　位置：绝对；

　　左：50%;

　　左边距：-315px;

　　宽度：630px;

　　z-index: 100001;

　　}

　　.dialog .body {

　　背景：url(/img/dialog.png) 0 0; /* 半透明 .png 图像 */

　　内边距：40px 13px 10px 40px;

　　}

　　或者，您也可以使用 JavaScript 灯箱，或者使用我们之前介绍的 CSS3 属性的下拉阴影，但您必须意识到 Internet Explorer 不支持它们。

　　

　　Basecamp 的项目切换窗口有一个很大的柔和阴影，以帮助菜单项变得更加突出。

　　5.闲着，告诉别人怎么办

　　当您设计 Web 应用程序时，告诉人们在空闲状态下该做什么非常重要，不仅要测试示例数据，还要确保它看起来不错且有帮助，不管那里有什么。

　　当进入一个没有任何信息或查询的网页时，告诉人们该做什么是一个非常有用的信息。例如，项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，您可以提供指向项目创建页面的链接。即使网页上已经有一个按钮来执行此操作，一点额外的帮助也无济于事。

　　

　　当您开始创建电子邮件活动时，Campaign Monitor 可以为您指明正确的方向。

　　这项技术实际上鼓励用户试用服务并在使用服务后直接注册。引导用户完成一个单步应用程序，这可以帮助他/她了解应用程序提供了什么优势，以及它相对于他/她是否有用。为用户提供最重要的选项并确保它是最重要的也很重要，因为给他们很多选择是不明智的。请记住，用户通常希望您向他们提供或多或少的具体想法，但他们不想深入细节，因为他们既没有时间也没有兴趣。

　　使用空闲状态来激励用户并触发他们的操作可以大大减少“退出”并帮助您的潜在客户更好地了解系统的工作原理

　　

　　Wufoo 有很多表单页面。如果您没有，一条友好的消息会邀请您创建一个新表单。

　　文章共2页：[1][2]

　　

　　更多10个有用的网站interface设计技巧和最佳实践，请查看论坛：

　　【双击滚动屏幕】【评论】【 】【 】【 】来源：互联网日期：2009-8-12