雖然昨天好不容易把舊專案改成最新版,但想到要把舊的 Xml 系統改成 Compose 就好累,所以決定開一個新專案來寫吧,首先是重新設計頁面
你是資深Android工程式和資深Android系統分析師,會分析我的提問回答出最好的解決方式,你很會使用Compose製作Android的畫面,你會盡量使用無障礙的方式設計應用程式
> 我要設計一款盲人用的無障礙筆記App,你要與我對話討論設計方式完成架構和應用程式,我們先從compose+mvvm開始討論
增加核心設計原則:
1.每個頁面都要有用手指放大和縮小的功能
2.每個文字區塊,例如標題、內文、分類、標籤,都要能自訂文字顏色和背景顏色,可以在設定頁設定
3.圖示都採用高對比顏色
4.每個按鈕要有聲音和文字回饋,可以在設定頁設定
✦ 我們來一步步地設計每個頁面的佈局和互動方式。我會提出設計草案,您可以隨時提出修改意見。
1. Model (資料模型) 的擴充:
2. 新增「設定」相關的元件:
3. View (Compose UI) 層的實作調整:
4. 資料層 (Data Layer) 的擴充:
您對這個更新後的架構和開發計畫滿意嗎?如果同意,我們就從第一步開始:定義 `Note` Model 和設定 Room。
> 不同意,你要跟我討論頁面如何設計
✦ 好的,您說得對。在深入研究程式碼和架構之前,優先討論並確定使用者介面 (UI) 和使用者體驗 (UX) 是至關重要的一步,這能確保我們開發的功能真正符合使用者的需求。
我們來一步步地設計每個頁面的佈局和互動方式。我會提出設計草案,您可以隨時提出修改意見。
1. 筆記列表頁 (主畫面)
2.
從上到下的設計是這樣
上左:一個按鈕,點擊後進入設定頁
上中:一個長條輸入框,只要輸入文字就用過濾的方式搜尋筆記的標題和內文,展示在下方的清單中,當輸入框是空的時候,顯示分類功能
上右:一個按鈕,點擊後跳轉到新增筆記頁
✦ 好的,非常感謝您提供如此清晰的佈局想法!這是一個很棒的設計,它將搜尋和分類功能整合到了主畫面的核心位置,非常高效。
讓我們根據您的描述來細化這個新的 筆記列表頁 (主畫面) 設計。
1. 如何進入搜尋狀態?
2. 分類的管理:
3. 視覺與動畫:
1. 如何進入搜尋狀態?輸入框是一個edittext
2. 分類的管理:建立筆記時可以輸入分類,有一個預設的分類是「無分類」」如果這個筆記沒有輸入分類,分類可以被修改
3. 視覺與動畫: 頁面切換動畫使用滑入和滑出的方式
4. 分類在資料庫中是一個獨立的表單
5. 如果列表是空的,不顯示列表,改成文字顯示「目前沒有筆記,點我增加筆記」,使用者點擊後不用點右上的新增按鈕也能進入筆記頁
6. 列表的顯示是階層顯示,先條列式顯示類別,點擊類別後再顯示屬於該類別的條列式筆記
7. 搜尋框也要能搜尋標籤
8. 一個筆記只能有一個分類,但是能有多個標籤
筆記列表頁 (主畫面) 設計
1. 佈局與互動 (由上到下):
* 頂部操作列 (固定不變):
* 核心內容區 (取代原有的列表):
* 狀態一:搜尋框有文字 (搜尋模式)
* 狀態二:搜尋框為空,且資料庫中有筆記 (階層分類模式)
* 狀態三:資料庫完全沒有筆記 (空狀態)
2. 資料庫 (Room):
* 我們需要一個 Note Entity 和一個 Category Entity。
* ViewModel 的邏輯會變得更複雜。它需要管理 UI 的三種不同狀態。
* 空狀態處理: 設計了更友好、互動性更強的空狀態提示。
這個設計方案在功能性和使用者體驗上都更加成熟了。它清晰地劃分了「瀏覽模式」(階層分類)和「搜尋模式」(扁平列表),非常合理。
您對這個設計方案是否滿意?如果滿意,我們就可以正式進入「筆記編輯/新增頁」的詳細設計了。
> 滿意