用Github瀏覽文檔更好：Phylab-Web用戶界面設計原型文檔
團隊主頁鏈接：http://www.cnblogs.com/buaase/
用戶界面原型設計
版本號:v1.1
修訂歷史：
| 版本號 | 修訂記錄 |
|---|---|
| v1.0 | 完成產品初稿 |
| v1.1 | 加入原型設計 |
目錄
1. 概述
1.1. 產品初稿
1、核心功能：
支持通過選擇物理實驗序號進入相應物理實驗預習報告頁面。
在本頁面點擊導出模版時可以得到一個關於模版的詳細說明與模版標准樣式。
在點擊導入數據后，等待一定時間后生成一個由用戶填寫的帶數據的已經計算完成的標准實驗報告並在預習實驗報告的位置顯示。
這時數據庫中應當包含有各大物理實驗報告的模版，用戶生成的實驗報告不予以保留，臨時存儲即可。
2、進階α版本需要功能：
增加用戶在數據庫中的信息：包括用戶名，用戶密碼，用戶注冊郵箱， 用戶的學號（查驗）用戶收藏的物理實驗報告。
Feature： 用戶可以在生成物理實驗報告后將帶有用戶個人數據的物理實驗報告收藏到用戶的收藏夾，收藏夾有存儲上限。
此時生成物理實驗報告界面大致如下：
3、進階β版本需要功能：
徹底解決物理實驗報告中的繪圖問題（FIXME：在沒有之前如何解決？需要討論） 。
增加物理實驗平台交流區，不同的交流區類似於論壇樣式的獨立顯示。交流區的編輯器只支持基本的文字編輯，加粗，加斜與圖片上傳即可。交流區盡量簡潔優雅，不需要有評論的樓中樓回復。回復時像多說一樣，只顯示頭像與用戶名，其余不顯示。
1.2. 大綱說明
在本次項目中，我們嘗試和使用了UXPIN、MockPlus、MockUpBuilder工具進行了用戶界面的原型設計，經過反復多次的用戶原型設計修改，最終確定用戶原型界面設計如下。該界面設計是針對到α版本的功能實現的主要界面的設計。因為MockUpBuilder對中文支持不佳，所以最后使用英文來展示我們的原型界面。
我們的界面框架大致如下:
2. 首頁
2.1. 首頁預覽版
上圖為我們所設計的首頁預覽版原型圖，涉及到的按鈕與功能有：
| 按鈕 | 功能 |
|---|---|
| Home | 如果用戶已處於登錄狀態，則返回用戶登錄時的主頁；如果用戶處於未登錄狀態，則返回用戶預覽主頁。 |
| Community | 點擊后進入物理實驗交流平台頁面 |
| Login | 點擊后進入用戶登錄頁面 |
| Register | 點擊后進入用戶注冊頁面 |
| Search | 搜索后自動進入物理實驗交流平台頁面，並顯示對帖子內容搜索結果返回的界面 |
| Try it now! | 如果當前用戶已經登錄，則自動跳轉到物理實驗報告生成頁面；否則跳轉至用戶登錄頁面，當用戶登錄完成后，自動跳轉到物理實驗報告生成頁面。 |
| ? | 彈出彈窗，並顯示一些物理實驗的相關注意事項 |
注:物理實驗交流平台是后期功能，將放在beta版本中進行開發
-
在網站主體左側是一個
物理實驗平台與工具的使用視頻。 -
在網站主體右側顯示我們項目的特色：
-
根據用戶數據定制物理實驗報告
- 支持生成圖表
- 支持顯示公式
- 支持物理實驗文檔pdf導出
- 支持用戶收藏定制的物理實驗報告
- 老師與學生的互動交流平台
-
在網站右下角顯示了當前的日歷與時間
2.2. 首頁登錄版
首頁登錄版增加的功能是：
當用戶點擊右上角的User welcome時，彈出一個懸浮框，有兩個按鈕，按鈕功能如下：
| 按鈕 | 功能 |
|---|---|
| Personal Center | 點擊后進入用戶的個人中心 |
| LOG OUT | 點擊后退出登錄狀態，頁面跳轉向首頁預覽版界面。 |
3. 登錄
以上是我們設計的登錄界面原型圖，涉及到的控件與功能有：
| 控件 | 功能 |
|---|---|
| Home | 返回首頁預覽版 |
| Email/Name | 填入用戶名或郵箱以登錄。輸入的用戶名長度限制在6-20個字符之間：如果用戶名長度不符合限制或輸入了非法字符，右側的checkbox將變為錯誤狀態；如果輸入的郵箱不符合郵箱合法檢查的正則表達式，右側的checkbox將變為錯誤狀態。其他情況，右側checkbox處於正確狀態。 |
| Password | 填入密碼。輸入的密碼長度限制在6-15個字符之間：如果密碼長度不符合限制，右側的checkbox變為錯誤狀態。否則checkbox處於正確狀態。 |
| Sign in! | 使用填好的用戶名和密碼在數據庫中進行查詢，如果記錄不為空則自動跳轉到首頁登錄版，否則跳轉到登錄界面。 |
4.個人中心
4.1. 個人中心—個人資料
以上是我們設計的個人中心—個人資料的原型圖，涉及到的控件與功能有：
| 控件 | 功能 |
|---|---|
| Edit Profile | 更改個人資料，能更改的屬性包括：Company，NickName，Introduction，Course(目前的物理實驗積分情況) |
| Share | 點擊下方的分享按鈕后，可以分享到新浪微博等。 |
| Change Password | 點擊修改密碼后，將進入修改密碼的界面。 |
| Log out | 點擊后進入首頁預覽版界面。 |
| Profile | 點擊Profile時切換顯示個人資料的標簽頁 |
| Favorite | 點擊Favorite時切換顯示用戶收藏報告標簽頁 |
注：Course是我們考慮在beta版本中可能推出的一個物理實驗課程推薦功能的基礎，暫時只當作課程積分資料使用。
Share的分享功能也考慮在beta版本交流平台成熟后增設。
4.2. 個人中心—用戶收藏報告
以上是我們設計的個人中心—用戶收藏報告的原型圖，涉及到的主要是可點擊的物理實驗報告，用戶在點擊物理實驗報告的鏈接后，會新建一個頁面，顯示用戶在服務器上存放的特定的實驗pdf文件。
5. 生成報告
以上是我們設計的生成報告的原型圖，涉及到的控件與功能有：
-
主體左側上方是個下拉列表框，可以選擇帶有實驗序號和實驗名稱的實驗。
-
主體左側下拉列表框在下拉時遮擋住了一個按鈕
Export template table即導出模版表，數據表的形式是excel，為各個實驗的標准源數據記錄excel模版。 -
主體左側下方按鈕
Import data table即導入數據表，數據表的形式是excel，導入后即向后台發出請求對excel進行對應實驗的處理。如果導入的數據表格式不正確，則彈窗警告；否則就在后端生成PDF，並送給前端進行加載。 -
主題左側下方按鈕
Chart是指是否在實驗報告中插入該實驗的圖表，點擊變為ON的狀態時生成的實驗報告帶有圖表；點擊變為OFF狀態時生成的實驗報告不帶圖表。 -
主體右側是物理實驗報告。在導入數據表之前，它是一個預習實驗報告；當導入數據表后，它是一個帶有用戶自己數據的定制實驗報告。
-
主體右側下方是按鈕
Export，當點擊該按鈕時可以導出帶有用戶數據的PDF物理實驗報告。 -
主題右側按鈕左側的★圖標表示收藏，當點擊該按鈕時，首先判斷用戶收藏夾的pdf是否已經到達上限，如果到達上限，那么提示用戶刪除一部分物理實驗報告；如果沒有到達上限，將該pdf從臨時緩存區取出存放到用戶的收藏夾中，並且星星變為填充滿的狀態，表示已經收藏到收藏夾。