UI/UX design - Questionnaire App

Page 1

問卷調查系統

軟體畫面介紹


App Icons


0、登入

a. 登入頁面

b. 忘記密碼頁面

第一次使用或未登入時,顯示 a. 登入頁面 供使用訪員輸入帳號密碼登入,若有忘記密碼者,則顯示 b. 忘記密碼頁面。


一、首頁

主色:RGB(102, 155, 152) 按鈕:RGB(219, 219, 106) 連結:RGB(191, 198, 45)

點擊收合/ 展開側邊欄 登入後預設顯示:1. 首頁 點擊顯示:二、先驅 點擊顯示:三、敲門 點擊顯示:四、問卷

a. Segment 1:公布欄


1. 首頁

b. Segment 2:路線圖

c. Segment 3:問卷進度表


1. 首頁

d. Segment 4:檢誤通知


2. 設定 點擊收合/ 展開側邊欄

前往 集區資料下載與集區選定頁面

點擊後登出,回到 0、登入 的 a. 登入頁面

唯 一、首頁 的 2. 設定 顯示此頁


2. 設定 回上頁 「首頁」 ( 的「設定」)

顯示 版本號 Modal

集區資料下載與集區選定頁面

版本號 Modal


二、先驅 點擊收合/ 展開側邊欄

主色:RGB(239, 123, 50) 前往 b. 起抽點-文字列表頁面

按鈕:RGB(193, 157, 185) 連結:RGB(151, 91, 39)

點擊顯示:1. 起抽點 點擊顯示:2. 起抽點 點擊顯示:3. 路線圖

點擊地圖上的 Pin 以選取地點

點擊顯示:4. 回報單 點擊顯示:5. 先驅上傳 點擊顯示:6. 設定

a. 起抽點-地圖顯示頁面


1. 起抽點 點擊收合/ 展開側邊欄

前往 a. 起抽點-地圖顯示頁面

點擊後跳至 2. 地址抄錄

b. 起抽點-文字列表頁面

點擊後跳至 2. 地址抄錄


2. 地址抄錄

唯點擊完結後,抄錄之地址可於 5. 先驅上傳 上傳 顯示 g. 刪除全部操作畫面

點擊收合/ 展開側邊欄

地址抄錄頁面 (無地址)

顯示 a. 新增地址 Modal

顯示 f. 前往頁面 Modal


2. 地址抄錄 關閉 a. 新增地址 Modal 新增地址

顯示 d. 新增地址 Modal (跳一號) 點擊顯示 b. 新增地址 Popover 往左滑可刪除 (h. 滑刪)

a. 新增地址 Modal

地址抄錄頁面 (有地址)

顯示 c. 編輯地址 Modal

顯示 e. 新增地址 Modal (跳兩號)


2. 地址抄錄 關閉 c. 編輯地址 Modal

顯示 a. 新增地址 Modal

隱藏 b. 新增地址 Popover

b. 新增地址 Popover

c. 編輯地址 Modal

編輯地址


2. 地址抄錄 關閉 d. 新增地址 Modal (跳一號)

d. 新增地址 Modal (跳一號)

新增地址

關閉 e. 新增地址 Modal (跳兩號)

e. 新增地址 Modal (跳兩號)

新增地址


2. 地址抄錄 離開 g. 刪除全部操作畫面

前往指定頁面

關閉 f. 前往頁面 Modal

f. 前往頁面 Modal

g. 刪除全部操作畫面


2. 地址抄錄

h. 滑刪


唯點擊完結後,路線圖可於 5. 先驅上傳 上傳

3. 路線圖

點擊收合/ 展開側邊欄

a.

畫筆工具 (a.) 橡皮擦工具 (b.)


3. 路線圖

b.


4. 回報單 點擊收合/ 展開側邊欄

a. Segment 1:村里資訊

新增村里資訊


4. 回報單

往左滑可刪除 (滑刪)

b. Segment 2:體檢發受文 (新增村里資訊)

b. Segment 2:體檢發受文 (滑刪)


4. 回報單

b. Segment 2:體檢發受文

c. Segment 3:體檢場地 (1)


4. 回報單

c. Segment 3:體檢場地 (2)

b. Segment 2:體檢發受文 (3)


4. 回報單

s. Segment 3:體檢場地 (4)

新增警察局

d. Segment 4:警察局


4. 回報單

往左滑可刪除 (滑刪)

d. Segment 4:警察局 (新增警察局)

d. Segment 4:警察局 (滑刪)


4. 回報單

新增行政單位

往左滑可刪除 (滑刪)

e. Segment 5:行政單位

e. Segment 5:行政單位 (新增行政單位)


4. 回報單

e. Segment 5:行政單位 (滑刪)

f. Segment 6:其他單位


5. 先驅上傳 點擊收合/ 展開側邊欄

點擊上傳


6. 設定 點擊收合/ 展開側邊欄 顯示 版本號 Modal


6. 設定 關閉 版本號 Modal

版本號 Modal


三、敲門

主色:RGB(191, 198, 54)

按鈕:RGB(129, 201, 192) 連結:RGB(102, 155, 152)

顯示 行政單位 Popover

拒訪:RGB(299, 64, 34)

點擊收合/ 展開側邊欄

前往 敲門狀況-個人檔

點擊顯示:1. 敲門狀況 點擊顯示:2. 敲門上傳

備註 (c. 備註 Modal 儲存後顯示於此)

點擊顯示:3. 補地址 點擊顯示:4. 設定 敲門狀況-家戶檔

已訪:RGB(44, 178, 95)

有約:RGB(255, 216, 90) 其他:RGB(0, 122, 255), RGB(239, 123, 50)

已上傳:RGB(87, 98, 149)

點擊 展開敲門狀況側邊欄 (家戶檔)


1. 敲門狀況

以透明度表示選取與否 唯點擊完結後,可於 2. 敲門上傳 上傳 顯示 c. 備註 顯示 a. 家戶性質 Modal Modal

顯示 b. 訪視狀況 Modal

點擊帶入 當前時間

行政單位 Popover

敲門狀況-家戶檔 展開敲門狀況側邊欄


1. 敲門狀況 關閉 a. 家戶性質 Modal

a. 家戶性質 Modal

選取家戶性質

家戶性質若為其他則顯示備註欄

敲門狀況-家戶檔 展開敲門狀況側邊欄(選取家戶性質)


1. 敲門狀況 關閉 b. 訪視狀況 Modal

b. 訪視狀況 Modal

選取訪視狀況

訪視狀況若為其他則顯示備註欄

敲門狀況-家戶檔 展開敲門狀況側邊欄(選取訪視狀況)


1. 敲門狀況 關閉 c. 備註 Modal

c. 備註 Modal

儲存備註


1. 敲門狀況

回上頁 (敲門狀況 - 家戶檔) 唯點擊完結後,可於 2. 敲門上傳 上傳

顯示 a. 新增人口 Modal

點擊 展開敲門狀況側邊欄 (個人檔) 備註 (f. 備註 Modal 儲存後顯示於此)

敲門狀況-個人檔

a. 新增人口 Modal

新增人口


1. 敲門狀況

以透明度表示選取與否 顯示 f. 備註 Modal

關閉 a. 居住狀況 Modal

顯示 a. 居住狀況 Modal 顯示 b. 與戶長關係 Modal 顯示 c. 設籍狀況 Modal 顯示 d. 個人訪視狀況 Modal

敲門狀況-個人檔 展開敲門狀況側邊欄

a. 居住狀況 Modal

選取 居住狀況


1. 敲門狀況 關閉 b. 與戶長關係 Modal

居住狀況若為其他則顯示 備註欄

敲門狀況-個人檔 展開敲門狀況側邊欄(選取居住狀況)

b. 與戶長關係 Modal

選取與戶長 關係


1. 敲門狀況 關閉 c. 設籍狀況 Modal

c. 設籍狀況 Modal

選取設籍狀況

關閉 d. 個人訪視狀況 Modal

d. 個人訪視狀況 Modal

選取個人 訪視狀況


1. 敲門狀況

顯示 h. 身份選擇 Modal

敲門狀況-個人檔 展開敲門狀況側邊欄(選取個人訪視狀況) 拒訪情況 1:本人拒訪

敲門狀況-個人檔 展開敲門狀況側邊欄(選取個人訪視狀況)

拒訪情況 2:家人代為拒訪 --需選取拒訪身份


1. 敲門狀況

關閉 e. 身份選擇 Modal

e. 身份選擇 Modal

選取身份

敲門狀況-個人檔 展開敲門狀況側邊欄(選取拒訪身份)

拒訪情況 2-1:拒訪身份為本人+照顧者


1. 敲門狀況

敲門狀況-個人檔 展開敲門狀況側邊欄(選取拒訪身份)

拒訪情況 2-2:拒訪身份為本人+照顧者

關閉 f. 備註 Modal

f. 備註 Modal

儲存備註


2. 敲門上傳

點擊上傳


3. 補地址 點擊收合/ 展開側邊欄

補地址頁面 (無地址)

顯示 a. 新增地址 Modal

點擊上傳 (g. 已上傳)


3. 補地址 關閉 a. 新增地址 Modal

顯示 d. 新增地址 Modal (跳一號) 新增地址

a. 新增地址 Modal

點擊顯示 b. 新增地址 Popover 往左滑可刪除 (f. 滑刪)

補地址頁面 (有地址)

顯示 c. 編輯地址 Modal

顯示 e. 新增地址 Modal (跳兩號)


3. 補地址 關閉 c. 編輯地址 Modal

顯示 a. 新增地址 Modal

隱藏 b. 新增地址 Popover

b. 新增地址 Popover

c. 編輯地址 Modal

編輯地址


3. 補地址 關閉 d. 新增地址 Modal (跳一號)

d. 新增地址 Modal (跳一號)

新增地址

關閉 e. 新增地址 Modal (跳兩號)

e. 新增地址 Modal (跳兩號)

新增地址


3. 補地址

f. 滑刪

g. 已上傳


4. 設定 點擊收合/ 展開側邊欄


4. 設定 關閉 版本號 Modal

版本號 Modal


四、問卷

主色:RGB(151, 91, 39)

點擊收合/ 展開側邊欄

點擊顯示有備註者

點擊顯示:1. 家戶清單

前往 家戶清單-個人檔

點擊顯示:2. 個案清單 點擊顯示:3. 家戶體檢 點擊顯示:4. 照片清單

備註 (b. 備註 Modal 儲存後顯示於此)

點擊顯示:5. 錄音清單 點擊顯示:6. 資料上傳 點擊顯示:7. 設定

家戶清單-家戶檔

按鈕:RGB(245, 176, 132) 連結:RGB(239, 123, 50)

其他:RGB(44, 178, 95), RGB(299, 64, 34), RGB(146, 146, 146) 已上傳:RGB(87, 98, 149)


1. 家戶清單

回上頁 (家戶清單 - 家戶檔)

家戶清單-個人檔

顯示 a. 新增人口 Modal

新增人口

a. 新增人口 Modal


1. 家戶清單 關閉 b. 備註 Modal

b. 備註 Modal

儲存備註


2. 個案清單

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄

備註 (家戶清單 b. 備註 Modal 儲存後顯示於此)

敲門狀況-個人檔

c. 錄音

b. 問卷 a. 同意書

e. 複製 (同一戶時)

d. 照相


2. 個案清單 關閉 a. 同意書

a. 同意書

儲存同意書

回上頁 (家戶清單 - 家戶檔)

b. 問卷


2. 個案清單 關閉 c. 錄音

c. 錄音 (未開始)

關閉 c. 錄音

c. 錄音 (錄音中)

儲存錄音


2. 個案清單

取消

d. 照相

e. 複製

複製


3. 家戶體檢

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄


4. 照片清單

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄

描述 (b. 描述 Modal 或 a. 檢視照片 -描述 Modal 儲存後顯示於此)

顯示 c. 刪除操作畫面

點擊 a. 檢視照片

往左滑可刪除(d. 滑刪)

顯示 b. 描述 Modal


4. 照片清單

回上頁 (照片清單)

a. 檢視照片

顯示 a. 檢視照片-描述 Modal

關閉 a. 檢視照片-描述 Modal

a. 檢視照片-描述 Modal

儲存描述


4. 照片清單 關閉 b. 描述 Modal

b. 描述 Modal

離開 c. 刪除操作畫面

儲存描述

c. 刪除操作畫面


4. 照片清單

d. 滑刪

e. 已上傳


5. 錄音清單

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄

描述 (b. 描述 Modal 儲存後顯示於此)

顯示 c. 刪除操作畫面

顯示 a. 播放錄音 Modal 往左滑可刪除(d. 滑刪)

顯示 b. 描述 Modal


5. 錄音清單 關閉 a. 播放錄音

a. 播放錄音 Modal (播放)

關閉 a. 播放錄音

a. 播放錄音 Modal (暫停)


5. 錄音清單 關閉 b. 描述 Modal

b. 描述 Modal

離開 c. 刪除操作畫面

儲存描述

c. 刪除操作畫面


5. 錄音清單

d. 滑刪

e. 已上傳


6. 資料上傳

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄

唯綠色項目出現

a. Segment 1:問卷


6. 資料上傳

b. Segment 2:家戶體檢

c. Segment 3:錄音


6. 資料上傳

b. Segment 4:照片 (無可上傳資料)


7. 設定

唯點擊完結後,可於 2. 敲門上傳 上傳

點擊收合/ 展開側邊欄

顯示 版本號 Modal


7. 設定 關閉 版本號 Modal

版本號 Modal


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.