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

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

響應式網頁與傳統的(of)網頁不(No)同，傳統的(of)網頁僅需要(want)考慮一(one)種狀态，而無需交付一(one)組設計草案。 它給設計，前端和(and)開發團隊之間的(of)協作(do)模型帶來(Come)了(Got it)新的(of)挑戰。 在(exist)具有複雜産品的(of)完全響應項目中，應在(exist)交互的(of)每個(indivual)階段生(born)成什麽？ 互動和(and)願景如何協同工作(do)？ 前端何時(hour)進入？ 什麽使後端開發更加合理？ 在(exist)體驗了(Got it)第一(one)版的(of)“玩家”之後，我(I)們(them)得到(arrive)了(Got it)一(one)些答案。

      響應式設計稱爲(for)響應式“設計”，而不(No)是(yes)響應式“技術”，因爲(for)它是(yes)設計優先的(of)工作(do)。 在(exist)實施之前，您需要(want)設計一(one)個(indivual)清晰的(of)響應方法。 在(exist)發布了(Got it)一(one)組設計草案後，您不(No)能等待前端看到(arrive)這(this)種情況并将其變成響應式網頁。 因此，整個(indivual)過程最初從交互階段開始，分爲(for)6個(indivual)主要(want)步驟。 根據情況，盡早介入視覺，前端和(and)發展的(of)角色。  （深圳網站建設）

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

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

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

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