触摸优先设计，响应设计和移动优先设计是UI设计人员在设计网站时应遵循的三个原则。可以大程度地适应各种设备。

这三个原则在“设计良好的Web”中进行了详细说明。

CSDN编写了如下文章：随着技术的发展，网页设计的艺术和技术也不断发展。

新技术带来新挑战，新挑战需要新解决方案。

我们通常在未知领域工作，需要提供新的解决方案。

鉴于网页设计的历史有限，我们必须超越当前领域来回答更具挑战性的问题。

为此，我们可以学习其他无关领域的发展历史，例如音乐，以找到可以帮助我们解决问题的解决方案。

这里是关于18世纪初巴赫的短篇小说。

Bach和脾气暴躁的键盘手

Bach于1972年完成一本书《脾气暴躁的键盘》，有十二等温钢琴音乐，分为两册，每册有24前奏和河豚。

这是西方音乐史上重要的作品之一。

当时，完全不可能单独组成12个主琴键。

Bach总体上构成所有12种声音。

这是他的十二旋律钢琴曲调，终向人们证明了十二旋律可用于创作音乐，效果非常好，人们以前从未体验过。

在此过程中，采用的解决方案是重新定义和谐的概念。

通过修改一定的间隔，每个琴键会稍微偏离良好音高，从而形成一个调音系统，使人们可以在所有琴键上弹奏谐音钢琴。

为了达到更良好的整体效果而牺牲少量个体品质被称为平均律。

尽管这种情况与网站设计无关，但目的是相同的：使每个按键略有缺陷，以便使键盘的整体性能达到良好。

UI设计师需要什么？

近年来，为多种设备设计已成为Web设计领域激动人心的发展。

过去，主要关注的问题是网站是否可以在两种不同的浏览器上正常运行，但现在转移到了它是否可以在特性完全不同的多个设备上正常运行。这些设备具有不同的屏幕尺寸，不同的性能，不同的

使用环境和不同的界面。

尽管响应式设计和特定于设备的网站可以帮助我们针对不同的体验进行设计，但是还有很多时候我们必须做出统一的决定。

目前，平均律的概念可能会有所帮助。

此概念在UI设计中的应用是一个简单的过程：为了设计一系列不同的设备

为了获得良好的体验，我们必须允许某些界面偶尔出现缺陷。

我们必须做出一些小的妥协，以确保我们的设计可以很好地适应其他环境。##Touch-first设计

法律特征已将触摸界面纳入了新的桌面网站设计中。

在占用区域中，手指大于鼠标指针，因此手指需要更大的触摸区域。

为了确保可用性，交互元素需要更大。

当交互元素的面积增加时，其他元素也需要相应增加以保持平衡。

这需要通过margin和padding这两个属性进行设置。

Gmail的新版本设计有足够的空白和其他功能按钮的填充。

尽管它仅是为台式机设计的，但它也与触摸设备非常兼容。

iPad在触摸屏和不同尺寸的台式机屏幕之间架起了一座桥梁。

iPad的普及加速了触摸屏在桌面界面设计中的影响。

如果您查看一些刚刚经过重新设计的知名产品，例如Gmail和Twitter，您会注意到网页设计已经明显改变。

它们看起来更饱满。

按钮上有更多的空白空间和更多的填充，并且上面的元素似乎增加了很多。

当然，其他因素也在起作用，例如桌面屏幕尺寸的稳定增长。

如果为鼠标和手指提供了过多空间，则该空间是正确的，我们的设计已经完成。

我们允许稍微偏离体验标准，以便更好地支持所有可能的体验。

值得一提的是，触摸友好的UI易于使用用户使用桌面鼠标。

易于触摸的按钮使单击变得更容易。

受触摸优先思维影响的MicrosoftMetro风格设计

响应式设计达到统一设计的目的

尽管有关响应式设计的许多讨论都与响应式设计技术有关，但是响应性本身并不是终目的。

这是达到目的的手段。

该设计具有响应性，可用于其他目的。

可能是为了支持不同的内容，以低带宽发送图片，并在较小的屏幕上更好地显示布局。

它也可能是在广泛的不同设备上提供统一的体验。

具有响应式设计的火车可以到达统一的用户体验设计的目的地。

BostonGlobe网站在这方面做得很好。

BostonGlobe出色地将自适应设计应用于大型网站

响应式设计策略可以使简单的设计适应用户用来阅读BostonGlobe的任何设备，甚至是AppleNewton。

这不仅仅是前端工程师的功劳。

在JavaScr中使用媒体查询

使用两种技术也可以达到这种效果。

移动优先设计

以前的情况主要是图片设计，但是平均律的概念应该应用于产品设计，用户体验和信息架构-几乎任何其他设计领域。

让我们看一下产品设计和以移动设备为先的设计思想。

从移动设备的角度开始设计过程，并构建满足移动环境约束的产品，您需要关注产品重要的元素。

正如LukeWroblewski所说：

当团队进行移动优先设计时，终是要创建一种体验，专注于用户想要完成的重要任务，而无需任何操作绕行或接口碎片。

这对用户体验和业务都有好处。

近的Twitter版本验证了这些原则。##＃新版Twitter具有简化的设计和跨设备的一致体验。

Twitter修订版的目标之一是为用户提供一致的体验，无论是在计算机上还是在计算机上。各种移动设备。

获得一致的视觉和感觉体验是UI的挑战，但是要在整个产品的不同设备上获得一致的体验则是一个更大的挑战。

针对这两个挑战，移动优先设计可以帮助我们实现这一目标。

在Twitter版本中，我发现了一件有趣的事情：移动体验对整体产品设计。

例如，除了“鸣叫”按钮外，所有操作按钮都排列在“家庭”，“连接”，“发现”和“我”四个标签下。

这种简单的设计非常适合在小屏幕设备上使用，并且选项卡栏中的这四个选项都可以很好地配合使用。基于移动版本的简单性仍然需要存在。

尽管台式机版本上有足够的空间来完成更复杂的设计，但仍必须对设计进行约束和调整以确保一致的多设备体验。

请注意狼在巴赫（Bach）以前的调音系统中，同时演奏的音符间距不均匀，会产生类似侧耳的咆哮声。

音乐人将此声音称为金刚狼。

在界面设计中，将为一种体验类型设计的视觉或交互元素转移到另一种体验环境时，它将失败，然后我们称这个元素为狼。

回想一下，您曾经用手指努力单击鼠标设计的小链接，并痛苦地阅读了移动设备和触摸设备上的小文本，并且这些设备上的界面元素仅依赖于鼠标单击

。

这些都是UI上的狼。

这些文章的链接完全依靠鼠标来完成交互。

不太可能在启用触摸的移动设备上浏览它们。

纽约杂志提供了

易于使用的精美下拉菜单，但是您只能用鼠标单击它。

注意事项

响应式设计，提供特定于设备的体验，可以真正解决许多此类问题。

如果我们可以调整按钮的大小以适合特定的环境，那么我们就不必接受这种笨拙的全局方法。

但是我们需要支持的设备数量只会增加，并且定制所有可能的解决方案将变得不合理。

即使我们可以在执行级别定制良好的设计，仍然有必要在概念层面上考虑可调整且统一访问的设计。

下面列出了一些注意事项

●自适应思维

即使您没有实现完全响应的设计，只需以响应的方式思考也将有助于实现可用的统一设计。

●触摸-个想法

也可以使用鼠标单击专为手指触摸而设计的按钮。

但是用鼠标设计的按钮在用手指触摸时看起来太小。

Touch-first设计可以确保您的网站和应用程序很好地迁移到其他环境。

●统一思维

就像早期测试一样，经常测试。

在设计过程中，您应该及早并经常思考设计如何在不同设备上成功运行。

●移动优先的思考

＃##移动优先设计使您可以专注于对您的成功至关重要的事情。

关注重要的功能可以更轻松地在不同设备上实现统一的体验。

●注意

互动行为跨接口不统一支持。

使用鼠标完成的功能在触摸设备上可能会出现问题。

触摸操作可能无法用鼠标执行。

但这并不意味着我们不能使用它们，只是我们应该意识到他们的使用限制。

我们希望用户在使用我们的网站和不同设备上的应用程序。

我们也希望我们的劳动成果能够在尽可能多的环境中获得。