iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0

雖然昨天好不容易把舊專案改成最新版,但想到要把舊的 Xml 系統改成 Compose 就好累,所以決定開一個新專案來寫吧,首先是重新設計頁面

對話懶人包

  1. 要求 AI 要與我對談,不要自己思考後自動產生程式碼
  2. AI 沒有跟我討論設計,直接開始規劃架構,拒絕他並且要求先談 UI 和 UX,把話提拉回來
  3. 提出構想,可以輸入 \ + Enter 換行
  4. 確認構想無誤後才進入下一個階段

對話

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

上一篇
114/12 - 專案更新完成
系列文
看見筆記捲土重來,試著用 Vibe Coding 完成一款 App 吧!13
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言