Lê Xuân Lộc 的個人照

Lê Xuân Lộc

Product designer & builder,河內

我設計、開發 App,讓生活更好。

我一個人從頭到尾做了五款 iOS App,每一款都有完整的付費流程。我正在找 UI 或產品設計的工作。

做 App 之前

小學四年級,我在筆記本上畫遊戲,班上同學付錢來玩。2017 年,上大學前,我開始做網站。大學的下課時間只有十分鐘,來不及排隊買吃的。所以我做了一款學生餐廳的點餐 App,學生就不用站著排隊等了。後來念經濟的時候,我用 R 寫 Web App。一個介面給人什麼感覺,我一直本能地在意。

我共同創辦了 Nala,一間河內附近的度假村;從 2022 年起,我負責它的營運和品牌,和那裡的員工、合作品牌一起工作。在網路上,我成了 TikTok 上的「Tớ là Lộc」,大約 10 萬人追蹤,有些影片的觀看次數達到數百萬。我還當了兩年 Nàng Mơ 的內容顧問,那是一個經營 TikTok、Facebook 和 YouTube 的創作者品牌。到了 2024 年,做媒體的收入不錯,卻讓我離真正喜歡做的事越來越遠。

所以我退了出來,待在家裡。大家以為我在把自己的未來丟掉。我是在打造一個新的未來:那些我希望世界上有的 App。就是這五款。

baseline 在 App Store 查看

動腦的事,交給 App。

baseline 的首頁:一條排行榜橫條、一整年的活動紀錄、一則請你選擇每週訓練 1 到 7 次的提示,接著是 TODAY,有兩個動作和一顆大大的橘色 START WORKOUT 按鈕。
baseline 的單組記錄畫面:特大字的 45 kg × 8,SET 01 /03,一行說明調整重量和次數的手勢,以及一顆和畫面同寬的橘色 LOG SET 按鈕。
baseline 的單組記錄畫面。
baseline 首頁的頂端:BOARD 橫條寫著 ONE SESSION TO JOIN,一整年的活動紀錄排成格狀,還有一張卡片寫著「SET YOUR BASELINE. Choose 1 to 7 sessions each week. Train on any day.」。
  1. 在健身房

    訓練的時候,我想動的是身體,不是腦袋。

    我到健身房,打開 App,看今天練哪些動作。動腦是 App 的事。

  2. 第一次嘗試:拖兩次

    我很早就決定用拖曳。數字鍵要一個一個點,箭頭又會吃掉畫面。

    第一版要拖兩次:一次調重量,一次調次數。我每天用,用了快兩個星期。還算可以。

  3. 圖表

    用著用著,我覺得少了一樣東西:一張把今天的重量和上次放在一起比的圖表。我就做了。

    有了圖表,拖一次就比拖兩次合理:上下調重量,左右調次數。

  4. 換你試試

    把手指按在數字上,然後移動。往上,更重。往右,多一下。方塊就是你這一組,和上次的畫在一起比。

  5. 對自己守信

    一開始它只給我自己用。有沒有別人用,我不在意。後來我發現,這可能就是我沒能持續的原因,而持續正是這款 App 的重點。

    所以我加了社群功能,好讓自己有點壓力。但不要太多。我把排行榜設計成只評一件事:你對自己有多守信。舉多重、練多勤,都不算。說一週練四次,也真的練滿四次,你就和說七次、練滿七次的人平起平坐。

    讀 baseline 的文章 在 App Store 查看 baseline

Lockeat 在 App Store 查看

從一張照片開始。

從 14 歲到 26 歲,我的體重起起伏伏。我很努力,不只一次改變了自己的身材。然後一切又打回原形,每一輪下來,羞愧就多一點。

回頭看這十二年,我才明白,不是我哪裡壞了。我一直想用一陣一陣、猛到撐不久的努力,去解決一個長期的問題。我佩服的那些健康的人,並不是每天早上都打贏一場大仗。吃得健康,已經成了他們生活裡平常的一部分。

所以我做了 Lockeat,一款每天記錄熱量的 App,整個設計照著一個原則:待在 App 裡的時間越短越好,效果越大越好。記一餐,只要拍張照,一兩秒後估算就出來了。我定的目標是只點一下。實際上架的版本要點三下:開相機、拍照、儲存。

我想要自律,卻不要有被管的感覺。Lockeat 不會一直唸你要達成每天的目標,也不會讓你對吃下去的每一樣小東西斤斤計較。

拍照記錄的流程,我先在 Claude Design 做了原型。App 一打開就是日曆:每一天只有一個簡單的總數,底部有一顆相機按鈕。上面沒有熱量圓環,也沒有進度條。先記錄,之後再評斷。

所有數字都是估算值,不是醫療建議。

在 App Store 查看 Lockeat

Lockeat 的確認畫面,疊在一張牛肉河粉的照片上:熱量 660、蛋白質 38、脂肪 28、碳水 62,Save 按鈕上方用白話寫著菜名。
Lockeat 的單日畫面:當天的總數 2,399 在最上方,用線連到下面的每一餐。畫面裡看得到兩餐,08:00 的 763 和 12:00 的 1,365;第三條線延伸到裁切範圍之外。

Elsewhere 在 App Store 查看

靜靜留在你的手機裡。

Elsewhere 把個人的照片和影片留在裝置上,藏在低調的外表後面。

它在主畫面上的圖示,你可以從十二個裡面選。iOS 讓 App 換圖示,但不能換名稱,所以名稱還是 Elsewhere。

在 App Store 查看 Elsewhere

Elsewhere 的設定頁,標題是 Home Screen icon:有十二個圖示可以選,還有一行說明,寫著圖示會在整台裝置上跟著換,名稱則維持 Elsewhere。
Elsewhere 的圖庫:範例照片排成三欄的格狀,拍的是一對虛構的情侶和一些紀念品。

lifelong 在 App Store 查看

那一個人。

lifelong 是一個只容得下兩個人的私密空間。沒有聯絡人清單,沒有動態牆。

它的助理叫 Tơ,在手機上運作。只有被要求的時候,它才會讀兩人的聊天內容,而且要兩個人都先開啟才行。之後你們任何一方都可以再把它關掉。

lifelong 的歡迎畫面:One person. For life. A private space for exactly two people.
lifelong 徵求同意的 sheet,標題是「Tơ & AI — private to the two of you」。兩行說明寫著助理在手機上運作,以及讀取兩人的聊天內容需要兩個人都同意。下方每人一列:「Me」有一個開關;「You」標示為「hasn’t agreed」。

它也是我差點放棄的 App。一次分手之後,我對它失去了希望,還打算大改,大到幾乎等於重寫。

後來我決定,一次痛苦的經驗,不該改變這款 App 對健康、快樂的關係的想像,所以我留下了原本的版本。它現在大約做到我理想中的 30%,我還在繼續改進。

在 App Store 查看 lifelong

Knowless 在 App Store 查看

一個畫面,一顆按鈕。

Knowless 的即時畫面:一行行譯文,原文在各自的下方。
  1. 在香港走丟

    小時候,我在香港走丟過。我不會說當地的話。

    後來幾次出國,去中國,也去其他我不懂當地語言的國家,都沒辦法用行動網路。每一次我想要的都是同一樣東西:一個不用連線的翻譯工具,讓我聽得懂別人,也能和他們說話。

  2. 第一次嘗試:雷達

    第一版是一個隨時都在聽的雷達。我想像它光靠聲音,就能判斷說話的人在哪裡。

    它辦不到。我的手機錄下來的聲音不含空間音訊,所以錄音裡看不出聲音是從哪裡來的。我看到資料說,比較新的機型也許可以。我沒有那種手機。我就停手了。

  3. 第二次嘗試:眼睛

    所以我改用眼睛,不用耳朵:兩顆鏡頭同時開,去找正在說話的那張臉。

    手機發燙,電量一直掉,還會當機。這條路我也放棄了。

  4. 我自己的耳朵

    理論上,在吵雜的地方做降噪聽起來很合理。後來我用自己的耳朵聽了一段很吵的錄音。連我自己說的話都聽不出來。

    降噪做得再多也救不回來,所以我放棄了這個點子。這就是我說的「human in the loop」:我得一直確認,自己要求的東西合不合理。

  5. 最後留下的

    一個畫面,一顆按鈕。按下去,說話,翻譯。

    第一個原型還會保留對話紀錄。為了及時上架、趕上 Shipaton,我把這個也砍了,還是差點錯過截止時間。這大概是我做過最簡單的 App。

  6. 一個效果,做了兩天

    一個很小的功能,做起來卻極為複雜:字要怎麼出現。語音先變成一個猜測,立刻顯示出來,才有即時的感覺。然後修正這個猜測。一句長句說完,再依上下文修正一次。

    每一個狀態看起來都要對,中間等待的樣子也一樣。我在 App 和設計稿之間來來回回,花了兩天多。

    有些東西不該在那裡。不是每個人都會注意到。

    讀 Knowless 的文章 在 App Store 查看 Knowless

像樂高

同時做好幾款 App 的時候,東西開始串得起來。替這一款做的零件,裝到另一款也剛好,像樂高。baseline 原本是 lifelong 裡的健身功能;2026 年 8 月我把它拆出來,變成獨立的 App,幾天後 Lockeat 又從 baseline 分了出來。

baseline 裡的動態牆,來自另外一款 App。那款我做出來了,等它真的跑起來,我才看出這個點子離現實太遠,行不通。有時候,我會後悔花在它身上的時間。不過它的動態牆搬進 baseline,剛好合用。

同一套規則

baseline、Lockeat 和 Knowless 共用一套我自己維護的小型設計系統,叫 Ground & Signal。它的想法是:這幾款 App 長得完全不像,運作方式卻一樣。它的規則:

  • 兩個畫面,其餘用 sheet。
  • 強調色只有一個,留給你所在的項目,和唯一值得做的那個動作。
  • 動態效果用來回報正在發生的事,不是用來表演。
  • 小字說的是實話。
  • 還原就能解決的地方,不跳警告,也不要你確認。
  • 只回報,不喝采:沒有連續天數,沒有徽章,沒有稱讚。

我的工作方式

我先做原型,再動手開發,而且動作快。Lockeat 在 2026 年 8 月 26 日成為獨立的 App。到了 8 月 28 日,它的拍照記錄流程(一張估算卡片、一個份量滾輪、三種滑動手勢)已經是 Claude Design 裡可以點的原型,也經過一輪 AI 輔助的審查,一個畫面一個畫面對照 iOS 允許的範圍。隔天,開發規格就照著它寫好了,細到連原型動態效果的手感都要保留。

在那個階段,我做了兩個決定。估算不是測量,但我決定 App 還是只顯示一個簡單的數字,同時把背後的推理即時跑出來。另外,有一張設計稿我看了覺得不對勁:後來發現,原因是範例食物照片裡混了 AI 生成的照片。從那之後,Lockeat 的圖片有一條規則:只用真實的餐點,不用 AI 生成的照片,也不用攝影棚拍的圖庫照片。

我用 AI 工具(Claude Code、Bitrig)開發,用我拿得到的最好的模型,而且全程盯著。AI 會給我很多不可行的點子,不過有時候它也讓我很佩服。累壞的時候,我會先讓模型把計畫審一遍,再自己讀,找不合邏輯的地方。決定權留在我手上。

五款 App,36 秒看完

在我的手機上,這五款放在同一個資料夾裡,名字叫 Quality life。

五款 App,為了有品質的生活。

關於我

我做的每樣東西,都盡量把設計當成最重要的幾件事之一;每一款 App 從第一個原型到上架 App Store,也都是我自己來。

我想把這樣的做法帶進團隊。我住在河內,UI 和產品設計的工作機會都歡迎,地點在河內、胡志明市或遠端都可以。我在設備齊全的居家辦公室工作,作息照越南時間(GMT+7)。

聯絡我

24m2space@gmail.com

寄信給我 LinkedIn CV App Store

怎麼讀這個網站

圖片下面沒有圖說,所以在這裡說明。手機畫面是真實介面的截圖和合成圖,裡面填的是範例內容;Elsewhere 圖庫裡的照片是生成出來的虛構內容,另外有一張 Lockeat 的單日畫面經過裁切。短片剪自我自己的示範影片和預覽影片,Knowless 裡的句子是事先寫好的。Knowless 那一章的三張線條圖(雷達、兩顆鏡頭、充滿雜訊的波形)是為這個頁面畫的草圖,不是截圖。可以動手試的兩個畫面,是為這個頁面另外重做的小版本,不是 App 本身。有兩張 lifelong 的截圖修掉了 iOS 疊在上面的東西(AssistiveTouch 按鈕和錄製指示器),36 秒剪輯裡的章節編號也遮掉了;App 本身的介面則維持截圖時的樣子。只有 36 秒剪輯有聲音,而且要你按下播放才有。它是示範影片,不代表各款 App 目前版本裡有的內容。

照片來源

Lockeat 的畫面和影片裡用到的 Wikimedia Commons 食物照片列在這裡,都經過縮放和裁切;每一張仍適用各自的授權條款。這份清單涵蓋整組照片,所以不是每一張都出現在這個頁面上。

授權條款全文:CC BY-SA 3.0、CC BY-SA 4.0、CC0 1.0。標題中的歐文字型是 Fraunces(SIL Open Font License),中文使用你裝置上的字型。Apple、iPhone 和 App Store 是 Apple Inc. 的商標;本站與 Apple 無關,也未經 Apple 認可。