郑州发布UI界面响应式设计过程中要遵循的步骤

　　步骤1、内容清单

　　响应式设计的步是创建一个文档，其中包含应添加到应用程序的元素或信息组。然后根据信息的重要性对信息进行级排序，以确保在所有分辨率中预先捕获级信息。

　　步骤2、定义断点

　　在响应式设计中，“断点”是设计和内容适应该特定分辨率的“点”。根据要扩展设计的平台（台式机、平板电脑、移动设备），相应地定义断点。下面显示了六（6）种较常用的屏幕尺寸;

　　还值得注意的是，用户可以横向查看应用程序（在移动设备或平板电脑上）。此外，桌面设备上的应用程序用户可能无法较大化窗口。因此，应优化设计以处理“中间”，而不仅仅是常见的屏幕尺寸。

　　步骤3、定义布局（动态布局）

　　动态布局是指随着窗口大小的更改而更改屏幕布局的布局。这是通过使用百分比而不是固定像素宽度定义屏幕部分来实现的。此外，在决定布局时规划列比。可用于响应式设计的流体布局包括：

　　a.主要是液体

　　这是大多数响应式应用程序中使用的流行流体布局之一。Mostly Fluid是一种多列布局，可在大屏幕上引入更大的边距。随着屏幕尺寸的减小，流体网格会进行调整以显示较重要的信息，从而使其他信息垂直堆叠。下面给出了一个示例。

　　通常使用此模式，因为屏幕布局的核心结构可能不会在平板电脑中更改。但是，在移动设备中，由于屏幕尺寸较小，布局可能会发生重大变化。

　　b.列放置

　　这是响应式设计中使用的另一种流行的多列布局。它从多列开始以获得更大的屏幕，然后随着屏幕变窄（在移动应用程序中）而删除每一列，从而慢慢减少到一列。下面给出了一个示例。

　　在此模式中，元素的大小几乎保持不变，这与元素大小可变的其他流体模式不同。

　　c.布局移位器

　　这种类型的布局很少使用，因为布局根据屏幕尺寸变化超过60%。在此方法中，布局将根据部分的重要性而变化，并首先显示主要信息。如果使用这种布局，设计师将有更多的工作要做。下面给出了一个示例。

　　d.微小的调整

　　这种布局较适合简单且屏幕上数据较少的应用程序。对于具有如此简单的应用程序，多设备适配可能只是对字体大小和图像布局进行一些微小的调整。下面给出了一个示例。

　　e.画布

　　外较后也是较受欢迎的流体布局是画布外。此布局利用屏幕外空间来保留内容或隐藏导航，直到较大的屏幕允许其可见或直到用户执行操作来查看它。此模式通常用于本机应用程序。下面给出了一个示例。

　　步骤4、创建设计组件/元素

　　确保要创建的元素与屏幕尺寸一致且兼容。创建样式指南并定义文本大小和组件大小在不同分辨率下如何变化。有时，设计元素和功能必须适应不同的分辨率。元素还应具有足够的填充和白色间距，以确保存在适当的层次结构，并且不会感到拥挤或未对齐。