熱門標簽
回答的一般過程是什么網(wǎng)站設計
響應式web設計不同于傳統(tǒng)web設計。它只需要一種心態(tài)，不需要提交一套設計草稿。它對設計、前端和開發(fā)團隊之間的協(xié)作模型提出了新的挑戰(zhàn)。在一個具有復雜產(chǎn)品的完全響應的項目中，在每個交互階段應該產(chǎn)生什么樣的交互和愿景，如何協(xié)同工作，何時在前端進行干預，以及什么使后端開發(fā)更加合理。在播放器的**個版本之后，我們得到了一些答案。
響應方程設計稱為amp；ldquo；設計amp; rdquo；代替amp；ldquo；技術amp；rdquo因為它是設計優(yōu)先級。我們需要設計一個明確的回應方式。我們不能生產(chǎn)一套設計草案，并等待前端看到它。將其轉(zhuǎn)換為響應網(wǎng)站設計。因此，整個過程從互動階段開始，分為六個主要步驟。視覺、前端、開發(fā)等角色將根據(jù)情況盡快參與。
第1步：信息架構、內(nèi)容策略。
互動設計事業(yè)部根據(jù)產(chǎn)品定位和用戶分析，確定網(wǎng)站信息架構。呈現(xiàn)信息體系結構的方法有很多種。這不是本文的重點。
此時，您可以確定產(chǎn)品有多少頁，每個頁包含多少內(nèi)容，以及內(nèi)容優(yōu)先級是多少。許多產(chǎn)品包含N個多頁，并且對每個頁的響應性設計進行一對一的考慮可能會讓人感到困惑和昂貴。因此，下一個重要步驟是分析頁面類型并對頁面進行分類。例如，10多個頁面可以分為三類：列表頁面、明細頁面和操作頁面。
第二步：移動框架
我們先來解釋一下為什么第二步是先設計移動的框架移動的優(yōu)先級是移動互聯(lián)網(wǎng)的概念，這是由LukeWroblewski移動首先提出的優(yōu)先級并不意味著移動更重要。作為響應的設備設計同樣重要。它指的是優(yōu)先考慮移動終端體驗設計，原因有三個。
手機關注設計，迫使你清楚地思考什么信息**重要。由于屏幕較小，每個屏幕顯示的內(nèi)容較少；觸摸屏手機使用的是手指操作的復雜設備，而不是鼠標，因此操作要求更高；手機使用場景更加豐富，很多場景用戶非常不耐煩。比如，當你排隊看電影，用手機尋找電子機票時，你會立刻出現(xiàn)在你面前，結果，你很長時間找不到機票。
手機的許多功能使設計更強大。隨著語音輸入、地理定位、豐富的手勢操作和越來越多的傳感器，移動交互比pC更有可能。從移動電話開始，您可以考慮如何更早地利用這些功能。
移動電話發(fā)展迅速移動電話將很快超越pC，成為**主流的互聯(lián)網(wǎng)接入方式。這種趨勢是不可逆轉(zhuǎn)的。
對于習慣pC環(huán)境的設計教師來說，從移動設備上實現(xiàn)設計可能是一個挑戰(zhàn)，他們的思維和工作習慣也被迫改變。但這種變化必須適應，因為用戶習慣正在改變。
回到主題，**后一步是對頁面進行分類，并確定每個頁面內(nèi)容的優(yōu)先級。現(xiàn)在我們分析了每種頁面類型的導航、主要內(nèi)容等框架結構，**后給出了框架結構表。從播放器的框架中，我們可以看到全局導航對所有頁面都是通用的，本地導航只能用于列出類頁面，并且有一個詳細類頁面amp；ldquo；頁面所有者amp；rdquo；信息，關聯(lián)的導航不是每一頁。
然后我們開始在手機上研究amp；ldquo；超薄頁amp；rdquo；設計框架（因為手機通常采用單列布局，頁面又細又長）。在這一步中，信息結構是設計成**廣泛的框架，可以在白板或紙上完成。關鍵是要把**需要呈現(xiàn)給用戶的內(nèi)容放在**重要的位置，符合手機的閱讀和操作習慣，充分利用移動設備的特性。
第三步：應對框架
基于手機的框架擴展了平板和pC的框架，這是實現(xiàn)復雜產(chǎn)品響應設計的關鍵步驟，也是多個頁面有序響應的基礎。首先要確定響應模式，即從手機到平板電腦再到pC的導航變化，頁面布局的響應模式，如何根據(jù)內(nèi)容優(yōu)先級調(diào)整模塊順序等。玩家在pC端用三欄布局，左邊作為本地導航或主信息區(qū)，中間一欄永遠是主頁信息，當頁面需要關聯(lián)導航時，在右邊一欄。
在此階段，所有頁面響應都開始遵循規(guī)則。下一步是細化規(guī)則并將幀細化到特定大小。具體來說，就是開發(fā)流體網(wǎng)格系統(tǒng)。流體網(wǎng)格系統(tǒng)是一種基于百分比的網(wǎng)格布局工具，具體公式將在下一章介紹。
響應設計是設計概念的一種新興形式，與前端技術緊密結合，鼓勵早期的跨職能溝通和協(xié)作。在與響應框架和光柵系統(tǒng)交互之后，其他角色可以同步。前端包括網(wǎng)格和框架的構建，以及頁面基礎設施的輸出。視覺同步開始探索和定義視覺風格探索，開發(fā)視覺框架，輸出風格關鍵詞，產(chǎn)品配色方案。在整個過程中，需要討論和確定幾個角色。
用途：模塊設計
根據(jù)移動優(yōu)先原則，我們應該首先設計移動模塊的細節(jié)，但我們選擇從pC端開始。由于pC機開發(fā)可以充分暴露業(yè)務的復雜性，項目組擁有成熟的設計工具和流程，在pC機環(huán)境下進行開發(fā)和測試，使得開發(fā)過程從pC機端更加順暢。所以我認為移動優(yōu)先級是在確定內(nèi)容策略時應該遵循的概念。具體設計和開發(fā)過程移動的優(yōu)先級取決于產(chǎn)品定位和項目團隊。
響應框架定義了頁面結構和響應模式，模塊設計流程開始細化所有信息排版和交互表單，這是交互設計人員**熟練、**耗時的工作。這個過程和傳統(tǒng)的過程沒有太大區(qū)別，但不斷提醒自己，這個模塊不適合這個設備設計，其他設備下會不會有什么問題
以交互方式確定頁面模塊的詳細信息后，可以提取產(chǎn)品使用的控件、組件和公共模塊。現(xiàn)在，遠景和前端開始做一些不同于傳統(tǒng)流程的事情。視覺設計控件組件和常用模塊根據(jù)前面定義的視覺效果樣式，把它們放在一個模擬頁面中，我們稱之為拼貼樣式。前端實現(xiàn)了風格拼貼手稿中的控制組件和通用模塊，并統(tǒng)一維護了一套組件規(guī)范代碼。
傳統(tǒng)上，頁面完成后，設計部門開始將視覺規(guī)范組織到前端。風格拼貼是為了促進作品盡快成為設計協(xié)作的工具。其優(yōu)點如下：
1.頁面的視覺效果實際上是一堆控制組件和公共模塊。模擬頁面將折疊，其中包含真實的控制組件和公共模塊，以顯示產(chǎn)品的視覺樣式。制作一個10頁以上的產(chǎn)品的視覺草圖既費時又費力，而且制作一個風格拼貼要容易得多。所以這是一個有效的設計工具。
2.復雜產(chǎn)品總是涉及多個設計工程師與前端并行工作。盡快提取控制元件和通用模塊，統(tǒng)一管理是一種有效的方法。避免不同設計人員設計同時設計同一控制元件或通用模塊，減少重復開發(fā)造成的浪費。它還大大降低了以后更新和維護頁面的成本，例如，當您需要修改時amp；ldquo；注意amp；rdquo；按鈕，您只需要更改一個按鈕就可以對整個站點產(chǎn)生影響。
第5步：響應模塊設計
pC頁面模塊的細節(jié)和樣式拼貼完成后，剩下的工作是展開平板電腦和移動終端的完整設計草稿，前端輸出所有響應頁面代碼。在設計響應模塊中，**重要的是使操作符合設備習慣，充分利用設備特性。
此時，一個網(wǎng)站回復產(chǎn)品頁面相繼出現(xiàn)。許多人認為responsive設計維護成本高的原因是頁面必須同時有多個設計草稿。經(jīng)驗告訴我們，當我們決定設計起草和網(wǎng)格系統(tǒng)，然后擴展設計其他設備時，工作量遠低于預期。
步驟6：測試、討論、優(yōu)化、提交和開發(fā)
**后一步是在實際設備上測試頁面效果，項目組將討論并繼續(xù)優(yōu)化。
在進行開發(fā)之前，需要盡早定義服務器響應策略（RESS）。服務器端和客戶端的結合是解決響應頁面性能問題的**合理方案。哪些大圖片只需要在移動設備上輸出小尺寸的圖片，哪些不需要在哪些設備上開發(fā)，這樣可以減少數(shù)據(jù)輸出量，開發(fā)團隊的響應能力可以有效控制頁面文件的大小，并防止頁面成為燒掉移動設備上用戶流量的罪魁禍首。
通過測試后，將頁面提交到開發(fā)鏈接。我們總結了可用性和可訪問性方面的響應性頁面測試清單。測試點包括但不限于內(nèi)容。
http://ywxrmy.cn/wangzhansheji/940.html 回答的一般過程是什么網(wǎng)站設計
