Data flow of web applications
Jump to navigation
Jump to search
網頁的資料流程考量因素
目的
- 該網頁的目的
資料流: 資料的輸入、輸出 (與背景進行的資料處理)
- 網頁此處顯示的資料從哪裡來?到哪裡去?
- 文字欄位的必要性: 必填或選填? ... 或者是根本不需要存在在網頁上?
- 由誰輸入資料: 一般使用者、管理者
- 資料的新增、編輯、刪除。如果資料已經存在於之前的頁面流程,使用者可不可以節省操作步驟,節省輸入時間,例如:
- 哪些資料已經有輸入過,可以不需要再次輸入
- 從瀏覽器取得的資訊: e.g. 自動偵測取得的 User agent 、referral、使用者所在的時區(timezone)、使用者偏好使用的文字語言 Windows 10 可以關閉這個選項,建議提供使用者自行輸入修改的選項。
- 同一網站的瀏覽記錄等資料
- 資料清理: 資料空值、錯誤
- 資料驗證
- call to action
- 異常狀況: 當資料發生錯誤時,介面上如何呈現、使用者需要介入處理嗎或程式處理嗎、 處理狀態追蹤、當其他資料跟這匹資料有相依性,如何調整
資料量增加/變化
- 如果資料筆數 0 筆,如何設計? --> Empty States examples
- 原定資料筆數 5 筆,變成數倍之後,設計要如何處理? --> 分頁(pagination)
- 原定資料長度 20字,當輸入超過預定長度數倍之後,設計要如何處理? --> ____
資料狀態
- 如果資料狀態包含多種,例如未執行、執行中、已完成。版面設計上不同狀態項目是否要區別不同表格,另外完成的項目會逐漸增加,再看是否要分頁。
程式功能面
- 進入點(entry point): 從何處開始觸發
- 時間增加/變化: 原本時間區間是以當下來設想,當時間過了一年一後,設計要如何處理? --> 時間動態調整,不要寫死年份、月份之類可能變動的數值
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary