設計網頁畫面

對於網站的需求前幾天已經討論過，也整理出User story和一些作業流程，儘管不是很正式、很精確，但也可以根據這樣的操作流程設計出該有的畫面。
藉由畫面，把所有功能與需求呈現，這就是畫面設計。
這個也是在開發前很重要的一部分，因為客戶（使用者）他們不知道什麼是User Story，不知道什麼叫做功能流程。就當他們是小孩子，只會操作使用，但不太會形容想要的是什麼。所以我們需要一個畫面來討論這樣的畫面是否達到他們的需求、期望，如果不是要如何調整。
同樣的，做自己的Blog，自己就是需求者。所以把自己當成小孩，畫出網頁畫面，與自己對話，看看這樣的排版、內容是不是自己想要的，是否要做調整。
以下用圖片和條列式的方式說明。

首頁

• 先前討論，文章中間是文章列表，左邊是顯示文章的年及隱藏月份。當使用者點擊年份，顯示該年份下有發文的月份。
• 點擊年或月份後，中間的文章列表，變成該時間的文章列表
• 使用者也可以使用關鍵字搜尋網頁內容。
• 使用者點擊標題，可以觀看該文章內容。顯示的文章內容是在文章列表區。

編輯區

• 進入編輯畫面前，必須登入。
• 編輯區分成：新增、修改。但是差別在於，修改會有標題與文章內容。
• 可以做並分區成：修改：標題、內容、標籤、預覽。
• 內容：使用Markdown編輯。
• 標籤：可以選擇既有的Tag，或是新增Tag。
• 預覽：顯示出標題、內容等內容，於修改區做變化。
• 按鈕：返回（回到上一頁）、預覽（觀看文章內容）、發佈（文章存檔，並發表）。

後台搜尋區

• 必須登入才能使用。
• 分成：搜尋區、顯示區。
• 搜尋區：包含年月搜尋，縮小範圍的Text Box。
• 顯示區：顯示搜尋區的內容。預設：提示使用上方搜尋。
• 使用者可點擊標題進入修改畫面

以上是Blog的畫面，可以看出根據之前的User Story和功能流程，再經過自己的想像，就可以勾勒出畫面。畫面可以不用精緻，但是卻要把一些細節詳細的記錄下來，這樣可以讓客戶或是開發者清楚到底要做的事情，成果是長什麼樣子。
重點在於，當初的需求是否有滿足，這樣的畫面與功能是否符合預期。
如果沒有問題，就可以確認好需求內容囉～～
所以...
有什麼覺得好玩可以做的，歡迎討論
如果沒有...
下一篇，開始設計資料庫內容！