深圳網站建設-複雜産品的響應式設計

深圳網站建設-複雜産品的響應式設計

響應式網頁與傳統的網頁不同，傳統的網頁僅需要考慮一(yī)種狀态，而無需交付一(yī)組設計草案。 它給設計，前端和開(kāi)發團隊之間的協作模型帶來了新的挑戰。 在具有複雜産品的完全響應項目中(zhōng)，應在交互的每個階段生(shēng)成什麽？ 互動和願景如何協同工(gōng)作？ 前端何時進入？ 什麽使後端開(kāi)發更加合理？ 在體(tǐ)驗了第一(yī)版的“玩家”之後，我(wǒ)們得到了一(yī)些答案。

      響應式設計稱爲響應式“設計”，而不是響應式“技術”，因爲它是設計優先的工(gōng)作。 在實施之前，您需要設計一(yī)個清晰的響應方法。 在發布了一(yī)組設計草案後，您不能等待前端看到這種情況并将其變成響應式網頁。 因此，整個過程最初從交互階段開(kāi)始，分(fēn)爲6個主要步驟。 根據情況，盡早介入視覺，前端和發展的角色。  （深圳網站建設）

  第一(yī)步：信息架構，确定内容策略。
      基于産品定位和用戶分(fēn)析，交互設計器确定站點信息架構。
      此時，您可以澄清産品有多少頁，每頁包含多少内容以及内容的優先級。 許多産品包含N個多頁，并且每個頁面都被認爲是響應式設計，這很容易引起混亂和代價。 因此，下(xià)一(yī)個重要任務是分(fēn)析頁面類型并對頁面進行分(fēn)類。 以播放(fàng)器爲例，可以将超過10個頁面分(fēn)爲三類：列表頁面，詳細信息頁面和操作頁面。

  第二步：移動框架
      讓我(wǒ)說說爲什麽在第二步中(zhōng)首先設計移動框架。 移動優先是由盧克·沃布勒夫斯基（Luke Wroblewski）首次提出的移動互聯網浪潮中(zhōng)出現的概念。 移動第一(yī)并不意味着移動更重要。 在響應式設計中(zhōng)，設備同等重要。 它指的是優先考慮移動體(tǐ)驗設計的三個原因：
  1.手機使設計能夠集中(zhōng)精力，迫使您清楚地考慮哪些信息最重要。 由于手機屏幕較小(xiǎo)，因此每個屏幕上顯示的内容較小(xiǎo)； 觸摸屏手機采用手指操作代替鼠标等精密設備進行操作，對操作的要求更高； 手機使用情況更加豐富，并且在許多情況下(xià)用戶都不耐煩，例如，當您排隊看電影并在手機上尋找電子機票時，這令人沮喪，以至于您無法在以後找到機票 等待了很久。
  2.手機的許多功能使設計更加強大(dà)。 通過語音輸入，地理位置定位，豐富的手勢操作以及手機上越來越多的傳感器，手機交互比PC具有更多的可能性。 通過手機進行設計可讓您盡早考慮如何使用這些功能。
  3.手機發展迅速。 手機即将超越PC，成爲上網的最主流方式。 這種趨勢是不可逆的。
      對于習慣于PC環境的設計師來說，從移動設備進行設計可能是一(yī)個挑戰，他們被迫改變思維方式和工(gōng)作習慣。 但是，由于用戶習慣正在發生(shēng)變化，因此必須适應這種變化。 返回主題，上一(yī)步對頁面進行了分(fēn)類，并确定了每個頁面内容的優先級。 現在我(wǒ)們将分(fēn)析每種類型的頁面導航的框架結構，主要内容等，最後得到一(yī)個框架結構表。 從播放(fàng)器的框架結構可以看出，全局導航對于所有頁面都是通用的，而局部導航僅可用于列表頁面，詳細頁面具有“頁面所有者”信息，并且并非在每個頁面上都具有關聯的導航。

  第三步：響應式框架
      根據手機的框架，平闆電腦和PC的框架得以擴展。 這是複雜産品實現響應式設計的關鍵步驟，也是許多頁面有序響應的基礎。 首先要确定響應模式，即從手機到平闆電腦再到PC，導航如何更改，頁面布局使用哪種響應方法，如何根據内容優先級調整模塊順序，等等。 上。 播放(fàng)器主要在PC側使用三列布局。 左列用作本地導航或所有者信息區域，中(zhōng)間列始終是主頁信息。 當頁面需要關聯的導航時，它會放(fàng)在右列中(zhōng)。

  步驟4：模組設計
      根據移動優先的原則，應該首先進行移動模塊的詳細設計，但是我(wǒ)們選擇從PC端設計細節。 由于PC端開(kāi)發可以完全暴露業務的複雜性，因此項目團隊的設計，開(kāi)發和測試在PC環境中(zhōng)具有成熟的工(gōng)具和流程，這使從PC開(kāi)始的開(kāi)發過程更加順暢。 因此，我(wǒ)個人認爲，移動優先是确定内容策略時應遵循的概念。 詳細的設計和開(kāi)發過程是否應該首先移動，取決于産品定位和項目團隊的情況。
      響應框架确定頁面結構和響應模式。 模塊設計的過程開(kāi)始改善所有信息的布局和交互形式。 這是交互設計師最熟練和最耗時的工(gōng)作。 此過程與傳統過程沒有太大(dà)不同，隻是要提醒自己，該模塊不僅是爲該設備設計的。