深圳网站建设-复杂产品的响应式设计

深圳网站建设-复杂产品的响应式设计

响应式网页与传统的网页不同，传统的网页仅需要考虑一种状态，而无需交付一组设计草案。 它给设计，前端和开发团队之间的协作模型带来了新的挑战。 在具有复杂产品的完全响应项目中，应在交互的每个阶段生成什么？ 互动和愿景如何协同工作？ 前端何时进入？ 什么使后端开发更加合理？ 在体验了第一版的“玩家”之后，我们得到了一些答案。

      响应式设计称为响应式“设计”，而不是响应式“技术”，因为它是设计优先的工作。 在实施之前，您需要设计一个清晰的响应方法。 在发布了一组设计草案后，您不能等待前端看到这种情况并将其变成响应式网页。 因此，整个过程最初从交互阶段开始，分为6个主要步骤。 根据情况，尽早介入视觉，前端和发展的角色。  （深圳网站建设）

  第一步：信息架构，确定内容策略。
      基于产品定位和用户分析，交互设计器确定站点信息架构。
      此时，您可以澄清产品有多少页，每页包含多少内容以及内容的优先级。 许多产品包含N个多页，并且每个页面都被认为是响应式设计，这很容易引起混乱和代价。 因此，下一个重要任务是分析页面类型并对页面进行分类。 以播放器为例，可以将超过10个页面分为三类：列表页面，详细信息页面和操作页面。

  第二步：移动框架
      让我说说为什么在第二步中首先设计移动框架。 移动优先是由卢克·沃布勒夫斯基（Luke Wroblewski）首次提出的移动互联网浪潮中出现的概念。 移动第一并不意味着移动更重要。 在响应式设计中，设备同等重要。 它指的是优先考虑移动体验设计的三个原因：
  1.手机使设计能够集中精力，迫使您清楚地考虑哪些信息最重要。 由于手机屏幕较小，因此每个屏幕上显示的内容较小； 触摸屏手机采用手指操作代替鼠标等精密设备进行操作，对操作的要求更高； 手机使用情况更加丰富，并且在许多情况下用户都不耐烦，例如，当您排队看电影并在手机上寻找电子机票时，这令人沮丧，以至于您无法在以后找到机票 等待了很久。
  2.手机的许多功能使设计更加强大。 通过语音输入，地理位置定位，丰富的手势操作以及手机上越来越多的传感器，手机交互比PC具有更多的可能性。 通过手机进行设计可让您尽早考虑如何使用这些功能。
  3.手机发展迅速。 手机即将超越PC，成为上网的最主流方式。 这种趋势是不可逆的。
      对于习惯于PC环境的设计师来说，从移动设备进行设计可能是一个挑战，他们被迫改变思维方式和工作习惯。 但是，由于用户习惯正在发生变化，因此必须适应这种变化。 返回主题，上一步对页面进行了分类，并确定了每个页面内容的优先级。 现在我们将分析每种类型的页面导航的框架结构，主要内容等，最后得到一个框架结构表。 从播放器的框架结构可以看出，全局导航对于所有页面都是通用的，而局部导航仅可用于列表页面，详细页面具有“页面所有者”信息，并且并非在每个页面上都具有关联的导航。

  第三步：响应式框架
      根据手机的框架，平板电脑和PC的框架得以扩展。 这是复杂产品实现响应式设计的关键步骤，也是许多页面有序响应的基础。 首先要确定响应模式，即从手机到平板电脑再到PC，导航如何更改，页面布局使用哪种响应方法，如何根据内容优先级调整模块顺序，等等。 上。 播放器主要在PC侧使用三列布局。 左列用作本地导航或所有者信息区域，中间列始终是主页信息。 当页面需要关联的导航时，它会放在右列中。

  步骤4：模组设计
      根据移动优先的原则，应该首先进行移动模块的详细设计，但是我们选择从PC端设计细节。 由于PC端开发可以完全暴露业务的复杂性，因此项目团队的设计，开发和测试在PC环境中具有成熟的工具和流程，这使从PC开始的开发过程更加顺畅。 因此，我个人认为，移动优先是确定内容策略时应遵循的概念。 详细的设计和开发过程是否应该首先移动，取决于产品定位和项目团队的情况。
      响应框架确定页面结构和响应模式。 模块设计的过程开始改善所有信息的布局和交互形式。 这是交互设计师最熟练和最耗时的工作。 此过程与传统过程没有太大不同，只是要提醒自己，该模块不仅是为该设备设计的。