top of page

​吃藥吧

app改版設計

01

專案介紹

此項作品為app改版設計。“吃藥吧”是一款服藥提醒和健康日誌的應用程式,可以輕鬆管理自己和家人的用藥進度,以及醫學檢查結果與健康狀況,並可生成PDF報告與醫生討論治療方案

Isometric-Mockup1.jpg

02

設計研究

app下載的用戶評論中,搜集了近半年​希望改善的意見,並整理歸納出以下幾點

01  藥物提醒搭配照片對照

建議可以將藥物拍照上傳,附上照片對照比較不容易與其他藥物混淆

02  紀錄追蹤圖表不明確

建議在測量紀錄圖表中可以標示出異常值及數據說明,以更清楚了解測量結果

03  自訂用藥狀況及週期選擇

建議在紀錄用藥狀況時,可以加入自訂內容及時間週期

​資訊架構

將原本的資訊架構重新做了調整,使分類層級更加明確,讓使用上可以更直覺操作

資訊架構.jpg

工作流程

將上方所提到的改善項目以及資訊架構規劃至下方流程內,並將更新項目以不同顏色特別標出

工作流程_每日提醒.jpg
工作流程_紀錄追蹤.jpg
工作流程_我的療程.jpg

03

UI Guide

色彩規劃

將原本較深的藍綠主色調調整至較為舒適的天藍色調,並搭配淺灰色調作為輔色,減少原本土金色的衝突感

Before

​主色調

#308195

After

​主色調

#718EC7

警示色

#F63F40

#2B7284

​輔色調

#B3A200

警示色

#E25454

​輔色調

#406196

#023868

#DFE4EA

#ADB2B8

文字顏色

#3C3C43

字體樣式

​在字體樣式上,因考慮到使用者年齡層可能會較高,因此特地將字級設定比一般再大一階
 

字體樣式-01.png

介面圖示

介面圖示-01.png

04

頁面設計

每日提醒

​原本的行程畫面中只會顯示當日的提醒,當新增之後時間的行程時就無法在app中呈現。因此將行程分成今日提醒未來一週兩個部份做切換,同時也可以讓需要幫忙家中長輩設定的使用者能預先設定一週行程

Before

117859174_670569453807692_70219247182854
001.png

After

007.png
Artboard – 3.png
Artboard – 4.png

​將未來一週的行程橫向排列每天的提醒項目,並以左右滑動查看當天所有行程,以避免項目過多讓畫面過長

新增提醒

​在新增藥物提醒的設定中,加入了備註以及新增照片的選項,並將設定選項統整至同一畫面中,讓設定可以更加流暢

Before

117906380_608239393219931_11967282880528
118081742_704096486809226_76266810601533
117967816_1628974983929518_9889201072726

After

002.png
003.png

​新增備註及照片,讓服藥時可以更清楚分辨及確認

新增藥物提醒.gif

​時間到確認

​將確認視窗從下方區域彈出覆蓋,讓操作時不會脫離前一狀態,並在提醒時顯示照片及備註

Before

117627597_614095736160241_57272693670281
118131584_717998182377941_74515225414087
005.png

After

006.png

​新增備註及照片

​選擇切換是否延後提醒

紀錄追蹤

原本的介面中,將所有的藥物、測量等數值全部紀錄於同一進展頁面當中,但當紀錄多項時頁面就會過長需滑動來查看及尋找。因此將頁面名稱改為紀錄追蹤,並依"藥物、測量、運動、症狀”4種項目分類切換來查看不同的數值紀錄

藥物追蹤

在原本的介面圖表中,日期及服藥情形並不是很清楚,也比較難標示一天多次服藥的狀況,因此重新調整後,將日期選項標示於上方,而服藥名稱、時間及數量則標示於下方列表

Before

117594030_355612288781344_11222582748323
008.png
藥物測量日期.gif

After

測量追蹤

在原本的介面圖表中,對於數值標示並不清楚,僅可以看出折線起伏的狀況。因此在改善方案中,重新整理了圖表規劃,並且標示超標的數值及最近一次測量值,而詳細列表則可以從右方menu點擊查看

Before

117740689_642061426423788_51986683028618
117632825_732033487580896_26313923938213
117351450_656182368582856_17904835457157
009.png

After

在項目上方先顯示最近一次測量數值

圖表顯示單位、時間及超標值,以明確查看測量狀態

因收縮壓與舒張壓的相差值也是分析重點,因此以長條圖標示兩者數值,而脈搏則以折線圖標示

2.2 記錄追蹤_測量 – 1-01.png
2.2 記錄追蹤_測量 – 1-02.png
4.2.1 新增內容設定 – 1.jpg

運動追蹤

在改善方案中,同上先顯示最近一次運動紀錄,並增加圖表的時間單位,讓資訊可以更精確

Before

117240562_1004401833326993_5148344326828
010.png

After

症狀追蹤

在改善方案中,以百分比來顯示一段時間內的身心狀態,讓查看圖表時可以更方便快速的了解

Before

117190958_2627513114182164_1774342468306
011.png

After

2.4 記錄追蹤_症狀-01.png

團隊成員

介面上維持原本的模式,在分類命名上則改為團隊成員,讓選擇上可以更直觀

Before

117404567_627643254551299_42781332862356

After

012.png

我的療程

在改善方案中,將療程的內容資訊顯示更加詳細,並在每項療程旁增加開關按鈕,讓使用上可以更快速操作。而療程設定功能上則維持原本的模式,在完成設定後便會出現在每日行程的分類頁面上

Before

117654983_313105099836985_86778542077422

After

013.png

新增療程

在新增的內容中,特別著重於時間模式的設定,將週期、頻率、時間都分開選擇,讓操作上可以有更多彈性,並同樣也添加備註欄位

015.png
014.png
Simple Mockup Free Scene.jpg

   © 2020 Judy Chen. Proudly created with Wix.com

bottom of page