东城网站制作：移动设备的热门数据和内容设计模式

适当的内容和信息设计不仅对传统发布或用户生成的内容网站很重要，无论是前端体验还是底层系统（例如：内容管理系统）都能使它们保持正常运行。

由于用户能够与他们的应用程序的更多部分进行交互和编辑，每条信息（即位置数据，时间戳，配置文件信息，相互连接等）和内容（配置文件图像，用户生成的内容，商业列表，应该考虑到这一点。除了技术挑战之外，允许多个用户（消费者和/或企业） - 尤其是非技术用户 - 编辑和交互更多类型的内容和信息需要对现有模式的实现和新模式的开发进行重要思考。东城网站制作

8个数据和内容设计的最佳实践

在设计内容和数据管理时要记住许多细节，每个细节的重要性因应用程序而异。以下是我多年来发现的一些最佳实践：

1. 保持一致

2. 考虑信息和内容块的高度和长度

3. 设计导航时要考虑信息和内容

4. 使用真实信息和内容进行测试

5. 只显示相关内容

6. 让内容充满活力

7. 让用户保持井井有条

8. 尽可能为您的内容和信息添加图层

模式概述

请记住上面的设计目标，这里是我们在本文中详细介绍的设计模式的概述，

1. 全屏模式

2. 交互式内容层

3. 内联扩展区域

4. 界

5. 透明度

6. 地图作为背景

7. 集团的朋友和内容

8. 全出血图像

9. 网格

10. 牌

11. 隐藏的信息

12. 空国家

13. 直接操作内容和数据

14. 可拖动的对象

15. 拉到刷新

1.全屏模式

Houzz

问题

用户希望专注于内容而不是被UI分心

解

设计一个全屏模式，隐藏或最小化内容的UI混乱。这有助于用户专注于重要的事情，而不是被UI的混乱分散注意力。除了对视频播放器至关重要外，这种模式特别适用于Medium，Houzz和Kindle等多媒体应用，它们可以让用户通过点击主要内容来最小化UI“框架”。这样可以最大限度地减少屏幕上的导航和其他按钮，从而在用户需要时为内容提供更加身临其境的体验。Snapchat也在他们的相机中实现了这一点，摆脱了大多数UI“chrome”，转而采用简约导航，向您显示1或2个更重要的按钮，并根据您所处的视图更改这些主要按钮。在视图之间，您可以单击其中一个主按钮或向左或向右滑动。

2.交互式内容层

Houzz，Airbnb

问题

用户想要更详细地了解他们可以与内容视图中的哪些项目进行交互。

解

分层交互式项目，为您的内容提供“增强现实”方法。像Houzz这样的应用程序可以通过在正在销售的图片中的单个项目上放置价格标签图标来做到这一点，并且点击它们可以提供更多信息。这不仅是突出用户可以与之交互的图片内容的好方法，而且还通过使标签基于设备的移动和方向摆动而增加了娱乐性元素。

3.内联扩展区域

Facebook Messenger

问题

用户希望访问相关的辅助细节而不会使主UI混乱。

解

除非用户明确想要查看元数据，否则使元数据不可见。例如，Facebook Messenger隐藏了各个时间戳和位置数据，只有当用户点击特定消息时才会显示它。其他应用

4.圈子

Facebook Messenger，Instagram

问题

用户想要快速区分按钮和媒体。

解

虽然传统的照片缩略图在网络和移动设备上一直是矩形的，但我们看到许多应用程序打破了这种模式而选择了圈子。因为它是触摸屏的最佳点击目标，但是通过相邻内容之间的额外空白区域来略微清理UI。像LinkedIn这样的应用使用不同的形状来在视觉上区分动作按钮和其他媒体。像Tinder和Swarm这样的应用程序只使用圈子。Facebook Messenger和Instagram以圈子形式显示所有用户缩略图。这个UI设计模式由Google+推广并且在某些方面得到Path的改进，虽然它比传统的方形缩略图更有优势，但除了增加多样性，明确的“生活情趣”之外，这种设计模式越来越受欢迎。

5.透明度

Rdio，Gogobot

问题

用户想知道叠加层后面是否有内容。

解

使用渐变和渐变叠加显示下面有内容分层。当您向下拖动以进一步展示隐藏在半透明列表标题后面的照片时，Yelp让您在列表详细信息和照片库之间切换。半透明和响应内容的使用在这里创造了一种美妙的体验。Rdio和Gogobot使用透明度和模糊来实现相同的效果，不仅为用户提供了关于他们所处位置的上下文，还使交互菜单看起来很有吸引力。

6.地图作为背景

Yelp，Lyft

问题

用户希望在地图上空间放置内容以查看周围发生的事情。

解

Lyft和Yelp提供地图作为背景，鉴于其本地特性，这是有意义的。随着本地应用程序变得更加突出，更多信息可以分层到地图视图上，这将成为一种日益增长的趋势，使地图成为一种完整的体验，而不仅仅是网络或移动设备上的一次性指示。您还将看到更多的UI设计模式，这些模式从视频，图片和其他媒体开始作为背景。

7.团体朋友和内容

YouTube，Facebook Messenger

问题

用户希望根据他们自己的分组来组织内容

解

允许用户在应用内对朋友和关注者进行排序和整理。YouTube和Facebook Messenger允许您对朋友和内容进行分组。随着所有表单（包括朋友档案）的内容不断增加，用户以对他们有意义的方式策划和组织事物的能力变得更加重要。

8.全出血图像

秘密

问题

用户希望以最少的干扰来关注内容。

解

从UI中消除绒毛，只留下绝对必需品。像Secret这样的应用程序不会将空白视为理所当然，在顶部和旁边堆叠全出血图像，同时在其上层叠一些重要信息以充分利用空间。这些图像作为背景，在覆盖图中具有相关信息。与Pinterest相比，这种UI设计模式让用户更加专注于更少的空白区域和令人分心的设计细节。

9.网格

问题

用户希望组织内容。

解

在网格中显示内容片段。像OKCupid和Spotify这样的应用程序将所有内容呈现在网格中，有效地将每个项目与另一个项目分开，同时保持结构。网格是简单列表视图的绝佳替代方案，对于可以直观呈现的内容非常有效，使用户滚动浏览大量内容更加愉快。

10.卡片

Tumblr，Google Now

问题

用户希望快速浏览内容并与其进行交互，而不会使详细视图混乱UI。

解

在一口大小的卡片中显示信息片段，如果用户需要，可以操作这些片段以显示更多信息。由Pinterest等人推广，以紧凑的布局显示大图像缩略图，我们看到“卡片”视图现在正在网络上的视频和照片画廊之外的各种应用程序中实现。此模式最适用于可以单独查看或操作的数据“模块”，例如Tumblr或Facebook上的帖子。卡片是一种允许用户以更具吸引力的方式浏览和发现各种内容的方式，同时适应响应式设计趋势以及社交馈送模式。

11.隐藏的信息

Snapchat

问题

用户希望快速访问通常不需要显示的辅助信息。

解

隐藏上下文信息，这些信息不是UI背后的必要信息，但可供高级用户使用。Snapchat让你看到隐藏的信息 - 收到和未读的消息数量 - 点击Snapchat标题。Tinder让你通过向左拖动文本来看时间戳，这也是Apple的原生消息应用程序的工作原理。

12.空国

YPlan，Airbnb

问题

用户需要知道为什么应用程序的一部分为空以及下一步该做什么。

解

通过设计“空白状态”确保您的UI提供良好的第一印象，这是没有用户数据时的条件。这是UI的自然状态，也是用户看到的第一件事。这也是许多用户决定是否值得继续的点，因此设计空状态非常重要。这是一个展示一些有助于用户入门的示例的好地方，或者只是向他们展示如何继续操作的说明。

13.直接操作内容和数据

Instagram，Photoshop Express

问题

用户希望以直接和直观的方式与输入的内容或数据进行交互。

解

允许直接编辑内容，而无需在编辑或删除模式之间进行转换。让用户直接在屏幕上处理数据可以通过消除按钮或上下文菜单提供的额外交互层来使您的UI更具吸引力。例如，Wunderlist的用户可以直接点击任务名称来编辑或删除它们，而不是选择项目然后在单个CRUD（创建，读取，更新，删除）状态之间切换。像Instagram和Photoshop Express这样的照片编辑应用程序也遵循这种模式，允许用户直接在所选照片上查看过滤器的结果，而不是从列表中选择并希望获得最佳效果。在大多数地图应用程序中，没有可放大或转动的按钮，您只需执行此操作即可！

14.可拖动的对象

Asana，Google Play音乐

问题

用户希望以在当前视图中对他们有意义的方式对项目进行排序和组织，而无需在内容的主视图和详细视图之间进行pogo-sticking。

解

可以拾取和重新排列内容，也可以直接拖动内容以执行操作。这种模式的一个很好的例子就是当你在主屏幕上安排项目时，我们也会看到它在许多应用程序中实现。

举例来说，让你通过按住并随后将它们拖放到任何你想要的地方来移动任务; 您可能希望将项目移动到不同的类别或日期，并且此拖放功能会将其置于直观状态。同样，Google Play音乐允许您拖放播放列表中的歌曲以重新排列播放顺序。由于这是一个非常互动的动作，因此您应该确保UI以动画或颜色变化的形式提供视觉反馈，以清楚地指示正在发生的事情。例如，在Asana中拖动的项目会以阴影突出显示，并且在iPhone主屏幕上重新排列图标会做出臭名昭着的摇摆舞。另一个视觉提示是突出显示放置目标，即当用户放开时项目将落下的位置。

15.拉到刷新

9Gag，Snapchat

问题

用户希望能够手动刷新内容。

解

不要仅依赖刷新按钮，而是允许拖动主内容窗口以刷新它。这是另一种非常互动的模式，UI在动作期间和之后提供的视觉反馈的数量和种类对于让用户了解正在发生的事情非常重要。例如，Gmail中的pull to refresh实现伴随着水平彩色活动指示符，而Twitter实现显示循环加载动画。Snapchat展示了一个舞蹈动画。此模式适用于包含需要更新的内容的列表，例如时间轴或活动源。这是一个直观的手势，与标准按钮一起进行手动刷新，但并不完全取代自动刷新的界面。

保持用户组织

跟踪用户应该与数据和内容交互的位置，是否他们查看应用程序的这些部分，他们与他们交互的频率，他们来自和进入应用程序的位置（即用户流程） ） 等等。保持重新排列，重新排序，重新调整大小和调整这些控件，直到您获得更多所需的操作。当然，深入思考用户在查看和使用数据和内容时实际使用移动应用程序的方式 - 确保在设计应用程序时不会遗漏任何明显的东西。

东城网站制作