《響應式Web設計全流程解析》一導讀

2021-09-23 16:13:02 字數 1260 閱讀 4459

響應式web設計全流程解析

關於什麼是正確的web設計流程,這個問題沒有統一的答案,探其原因,是因為web設計是一門非常年輕的行業。

十幾年前,web設計是由傳統的平面設計師兼職的,在之後十幾年變化中,這一職位漸漸**為web設計相關的各個職位,包括使用者研究、互動設計、視覺設計、前端開發。這些職位的分割帶來了設計流程上的隔閡,每個人成為流水線上的一環,專注於輸出自己的「交付物」。互動設計師輸出線框圖、流程圖以及可互動的原型。視覺設計師參考互動設計師的交付物,輸出精美的視覺設計稿,如果是響應式設計,需要輸出多份設計稿。前端工程師根據視覺設計稿來輸出靜態頁面。

這一現象帶來的弊端有:很慢的開發流程,在輸出產出物上無謂地浪費了時間;在針對需求變更的時候不能很好地響應變化;在移動浪潮來臨的時代因為要輸出多份交付物,流程顯得更慢;大家的工作方式更像是傳統軟體公司的流程,而不是網際網路公司的流程。

本書作者stephen對這一現象提出了自己的疑問,並給出了自己親身實踐的一套流程方案。

stephen鼓勵耦合度更高的設計流程:設計團隊更加緊密地坐在一起,為同乙個專案快速研發。

鼓勵關注內容,關注基本內容的可用性,這樣能確保在最糟糕的情況下,使用者得到的**也是可用的。

鼓勵設計師身兼數職,不再區分互動設計師和視覺設計師,因為現在的互動線框圖太具體明確,視覺設計師沒有發揮才能的空間。

即使仍然保留互動設計師和視覺設計師的職位區分,也不再輸出傳統互動線框圖,而是使用可迭代的交付物。互動設計師輸出html頁面,視覺設計師可以基於此來工作,避免時間浪費在交付物的輸出上。

鼓勵設計師學習一些自動化工具,比如簡單的html和css、自動截圖指令碼、靜態伺服器等,把自己從無聊的大量輸出中解放出來。

第1章  擁抱變化

1.1  精美設計稿的誕生

1.2  靜態設計稿舒適區

1.3  專家的入侵

1.4  我們都是互動設計師

1.5  跳出瀑布模型

1.6  壓死駱駝的稻草

1.7  屋裡的大象

1.8  這並非福音書

1.9  這是個挑戰

第2章 從內容開始

第3章 內容參考線框圖

第4章 基於文字而設計

第5章 線性設計

第6章 斷點圖

第7章 為斷點而設計

第8章 建立web設計模型

第9章 截圖

第10章 成果展示:瀏覽器體驗

第11章 建立設計手冊

響應式web設計(一)

最近在研究響應式web頁面設計,入門級media queries 即 查詢,查詢在css3中引入,作用是允許設定表示式檢查 環境,用來確定應用不同的樣式。查詢應用的兩種方式 一.在引入樣式表的時候判斷 尺寸,根據尺寸引入不同的樣式表,如下 表示當 分表率小於620畫素時,應用a樣式表 畫素只是 查詢...

響應式Web前端設計 Viewport解析

viewport 是使用者網頁的可視區域。viewport 翻譯為中文可以叫做 視區 手機瀏覽器是把頁面放在乙個虛擬的 視窗 viewport 中,通常這個虛擬的 視窗 viewport 比螢幕寬,這樣就不用把每個網頁擠到很小的視窗中 這樣會破壞沒有針對手機瀏覽器優化的網頁的布局 使用者可以通過平移...

響應式web設計

initial scale 1.0 script 不使用width px 只使用百分比寬度width xx 或者width auto 字型也不能使用絕對大小 px 而只能使用相對大小 em 如 font normal 100 helvetica,arial,sans serif 字型大小是頁面預設大...