> > 製作網頁結構示意圖與網頁雛形

製作網頁結構示意圖與網頁雛形

決定好網站結構之後
再來就是製作網頁的頁面結構
用來決定網頁的佈局及動線
頁面要有哪些功能與內容
以及那些功能與內容如何擺放之類的
規劃的越詳細越好
但不用畫的很仔細
若想詳細的標示出一些細節也是可以
譬如說
各區塊的大小?
各區塊之中的項目內容是什麼?
之類的

<!--
此時請不要考慮視覺的部分
-->
製作時請務必參考整理出來的資訊網站概略結構
保持一致並檢視是否有不周全之處
以及考慮一些網站使用性的相關問題
譬如說
連結方式是要另開新視窗還是在自身視窗?
若文章很長要怎麼讓使用者快速回到導覽選單?
或是要讓使用者直接到別的頁面?
之類的問題



Page Lab 的首頁與內頁之頁面結構示意圖



Balsamiq Mockups 將頁面結構示意圖製作得更詳細一點
<!--
增加了一些在收集以及整理資訊時沒想到的功能
。分頁功能
。相關文章
。回到頁首
。路徑導覽
。工具提示
。頁尾資訊
-->
<!--
Blogger 自訂性很高
可以任意地修改
所以不用去遷就 Blogger 既定的架構
首頁跟內頁內的不同呈現
就能模擬實現上篇製作網站概略結構所提到的企業網站結構
-->
<!--
由於背景不同的人
瀏覽網站的習慣也大不相同
這個部份就只能去猜想使用者的習慣
以及學習一些相關知識
優使性(Usability) | Usability Notes 優使性筆記本
也可以參照一些網站當做範本
-->
<!--
由於 Blogger 己經有了基礎的功能雛形
在這個基礎上建立一個 Prototype 比一般網站容易多了
若可以的話
建議先做出 Prototype 來進行測試
不要在乎視覺部分
只要把功能擺到大概的位置
看看功能正不正常
以及頁面動線與功能以及使用性是否符合當初的想像
雖然網頁最終都還是要進行測試
不過先做 Prototype 測試
可以提早發現問題
-->