本篇文章作為第三週的第二篇，我們透過實際的例子，
來聊聊功能轉換到頁面之後，到底有多大的出入。

--------系列簡介--------

網站系統可說是現在最多學子與新人想要入門的一個領域，
這個原本屬於新興的領域，這幾年來也累積許多年的知識與 pattern ，
在有限的環境（stateless）與有限的伺服器端、瀏覽器資源下，
成為許多人進入程式的一塊入門鐵板(?)。

這個系列希望能夠就網站系統設計幾個門檻著手，
這是設定給初心者作為學習，給同好們作為回顧，

重新認識有關網站系統的每個環節。
從功能列表到網頁，基本上設計網頁不能只考慮需求
還要考慮需求到實作之間的細節，像是登入這個功能，

就包含登入失敗跟登入成功這兩個細節的頁面，
能多仔細的列出所有功能中需要的頁面，

對網站專案的成功與失敗會有很大的影響。

因為今天比較忙不能寫太多，:(

只好先從昨天的需求訪談中，把需求轉換成的網頁先寫如下，
讓使用者能夠瞭解表面上的功能底下到底有多少細節。

	* 首頁
		* 決定預設功能與訊息

	* 會員系統
		* 註冊
			* 註冊完成
			* 註冊失敗（資料錯誤）
			* 站外信件內容

		* 登入
			* 登入失敗密碼輸入錯誤
			* 忘記密碼表單
				* 忘記密碼流程相關頁面
			* 登入成功（轉向、訊息提示、畫面回饋）

		* 文章管理系統
			* 瀏覽
				* 作者所有文章列表
				* 作者分類文章列表
				* 單一文章頁面
				* 全站分類列表
				* 全站分類文章清單
			* 發表
				* 文章發表
					* 發表失敗（字數超出限制、使用者已登出等）
				* 文章編輯
					* 編輯失敗（字數超出限制、使用者已登出等）
				* 文章刪除
					* 刪除失敗（使用者已登出、使用者權限不符等）
				* 類別建立
					* 建立失敗（類別已存在、使用者已登出等）
				* 類別編輯
					* 編輯失敗（欲更名之類別已存在、使用者已登出等）
				* 類別刪除
					* 刪除失敗（使用者已登出、使用者權限不符等）

這樣的清單是不是跟昨天的功能清單有相當大的差距呢？

因為網站是由非常多不同的狀態相互組成的，
所以每個細節都得要仔細思考才能設計出一個正常完整得網站。

列出所有頁面只是實作網站專案的第一步，
接下來還得要確認所有頁面的內容需要有哪些元素，

所以我們還會作視覺上的 wireframe ，將網站大概要有哪些東西列出來，
視覺設計師才能更容易以此 wireframe 跟對應的情境進行符合其精神的視覺設計。

有關這些細節，我們稍後再談。