[{"data":1,"prerenderedAt":594},["ShallowReactive",2],{"spin-the-wheel":3,"work-nav-all":543},{"id":4,"title":5,"body":7,"cover":495,"description":481,"details":496,"extension":518,"headline":519,"meta":522,"navigation":523,"order":29,"path":524,"role":525,"seo":527,"seoTitle":529,"slug":532,"status":533,"stem":532,"summary":534,"tags":537,"year":541,"__hash__":542},"works\u002Fspin-the-wheel.md",{"zh":6,"en":6},"Spin The Wheel",{"type":8,"value":9,"toc":480},"minimark",[10,277],[11,12,13,18,22,25,48,51,55,58,79,82,111,115,118,170,174,177,180,187,194,198,201,207,213,216,222,256,260],"zh",{},[14,15,17],"h2",{"id":16},"一個下班後的日常問題晚餐到底要吃什麼","一個下班後的日常問題：晚餐到底要吃什麼？",[19,20,21],"p",{},"身為一個外食族，我常常在晚餐的選擇障礙裡打轉，便當、便利商店、拉麵、健康餐...，選項很多但就是下不了決定。",[19,23,24],{},"不只是吃什麼，生活中常有這種不是很重大的小決定。週末去哪裡晃晃、晚上要不要出門運動？",[26,27,30,41],"grid",{"align":28,"cols":29},"stretch",2,[31,32,34],"cell",{":media":33},"true",[19,35,36],{},[37,38],"img",{"alt":39,"src":40},"Garmin watch glance inspiring the idea for a fortune wheel widget","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Finspiration-watch-idea.webp",[31,42,43],{":media":33},[44,45],"inline-video",{"label":46,"src":47},"Looping animation of indecision among dinner options","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Finspiration-decision-struggle.mp4",[19,49,50],{},"算了，就交給命運好了，抽籤決定最快。低頭一看手錶，一個在手錶上抽籤的「命運轉盤」靈感就這樣冒出來了。",[14,52,54],{"id":53},"這是一個隨手使用的-widget","這是一個「隨手使用」的 Widget",[19,56,57],{},"剛好手上有支Garmin手錶，興趣使然便嘗試在Connect IQ上進行開發，我先從閱讀官方文件開始，作為設計與實作的基礎。",[59,60,61,72],"ul",{},[62,63,64],"li",{},[65,66,71],"a",{"href":67,"rel":68,"target":70},"https:\u002F\u002Fdeveloper.garmin.com\u002Fconnect-iq\u002Foverview\u002F",[69],"nofollow","_blank","Connect IQ SDK | Garmin Developers",[62,73,74],{},[65,75,78],{"href":76,"rel":77,"target":70},"https:\u002F\u002Fdeveloper.garmin.com\u002Fconnect-iq\u002Fuser-experience-guidelines\u002F",[69],"User Experience Guildlines",[19,80,81],{},"Garmin 的 UX 原則提醒我：「Great wearable apps stay out of the user's way and keep interactions to a minimum.」這個 Widget 的定位就是「隨手使用」，不是一個要讓人花時間的工具。",[83,84,86,95,103],"info-cards",{"cols":85},3,[87,88,92],"info-card",{"icon":89,"title-en":90,"title-zh":91},"material-symbols:touch-app","Minimal Interaction","互動越少越好",[19,93,94],{},"只保留必要操作，不在流程中加入任何多餘步驟。",[87,96,100],{"icon":97,"title-en":98,"title-zh":99},"material-symbols:play-circle","Second-Scale Flow","秒級節奏",[19,101,102],{},"打開→按一下→出結果，整個互動在幾秒內結束。",[87,104,108],{"icon":105,"title-en":106,"title-zh":107},"material-symbols:vibration","Clear Feedback","清楚的回饋體驗",[19,109,110],{},"回饋清楚，同時保留抽籤過程應有的期待感。",[14,112,114],{"id":113},"轉動過程才是抽籤的靈魂旋轉減速震動","轉動過程才是抽籤的靈魂：旋轉、減速、震動",[19,116,117],{},"如果只是啪一下直接顯示隨機結果，幾毫秒就能結束，但這樣並沒有什麼感覺。轉盤的靈魂在於那個等待的過程——指針掃過選項、速度漸漸慢下來且要停不停、最後定格在某個結果上。我圍繞這個核心感受，設計了三層動態反饋。",[26,119,121,130,138,146,154,162],{"align":120,"cols":29},"center",[31,122,123,127],{},[124,125,126],"h3",{"id":126},"減速曲線",[19,128,129],{},"四次方 easing 拉長低速滑行，讓轉盤在快停下來時保留期待感。",[31,131,132],{},[19,133,134],{},[37,135],{"alt":136,"src":137},"Illustration of an easeOutQuart deceleration curve comparing spin speed over time","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Ffeedback-deceleration-curve.webp",[31,139,140,143],{},[124,141,142],{"id":142},"刻度震動",[19,144,145],{},"指針掃過每個選項時加入短震動，模擬實體指針卡過刻度的觸感。",[31,147,148],{},[19,149,150],{},[37,151],{"alt":152,"src":153},"Animated fortune wheel reference illustrating tick-like vibration as the wheel spins","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Ffeedback-tick-vibration.webp",[31,155,156,159],{},[124,157,158],{"id":158},"結果揭曉",[19,160,161],{},"最後定格時用強烈震動與醒目動畫收尾，讓抽中的那一刻更有重量。",[31,163,164],{},[19,165,166],{},[37,167],{"alt":168,"src":169},"Wheel of Fortune celebration reference illustrating the energy of the final result reveal","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Ffeedback-result-reveal.webp",[14,171,173],{"id":172},"限制下的解法從披薩扇形到圓環指針兼顧效能與可讀","限制下的解法：從披薩扇形到圓環指針，兼顧效能與可讀",[19,175,176],{},"起初很直覺認為轉盤介面就應該像是披薩切片，每個扇形放一個選項，是大家最熟悉的樣子。但在 Monkey C 開發上很難處理文字旋轉效果，以及轉動時畫面更新幅度大，動畫容易卡頓，體驗反而很不順暢。",[19,178,179],{},"山不轉路轉，最終方案是反過來，轉盤本體不動，改讓指針沿著圓環旋轉。這樣大幅降低了運算量，動畫流暢許多，中央也能留出空間，清楚顯示目前指到的選項名稱。",[181,182],"full-image",{"alt":183,"caption-en":184,"caption-zh":185,"src":186},"Garmin 手錶圓環指針介面：固定選項圓環搭配旋轉指針，中央同步顯示選項名稱","Final solution: stationary ring with rotating pointer; center displays the full option name in sync","最終方案：固定圓環 + 旋轉指針，中央同步顯示完整選項名稱","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fsolution-ring-pointer.webp",[188,189],"video-block",{"caption-en":190,"caption-zh":191,"src":192,"loop":193},"Actual wheel experience on Garmin watch","Garmin 手錶上的實際轉盤體驗","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fwheel-on-watch.mp4","false",[14,195,197],{"id":196},"上架後被打臉使用者期待可在手錶上進行設定","上架後被打臉，使用者期待可在手錶上進行設定",[19,199,200],{},"v1.0 的轉盤設定入口只放在手機 Connect IQ App，理由是在手機輸入文字比手錶上輸入更為方便，應該是更好的體驗。興高采烈上架後的幾則低分評論讓我意識到，使用者的直覺完全不同。",[181,202],{"alt":203,"caption-en":204,"caption-zh":205,"src":206},"v1.0 僅限手機端的設定流程，需在 Connect IQ App 設定轉盤選項","v1.0 settings were phone-only, misaligned with what users expected","v1.0 僅提供手機端設定，與使用者預期不符","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fsettings-phone-only-v1.webp",[208,209,210],"blockquote",{},[19,211,212],{},"既然是在手錶上玩的轉盤，理所當然就應該能在手錶上改內容。",[19,214,215],{},"於是我在 v1.1 加入了手錶端設定入口，同時保留手機端作為「更快的推薦方式」。這次迭代雖然增加了開發複雜度，但帶來更直覺的設定體驗，也開始收到更正向的評論。",[181,217],{"alt":218,"caption-en":219,"caption-zh":220,"src":221},"v1.0.0 與 v1.1.0 設定流程比較，展示新增的手錶端轉盤編輯路徑","v1.0.0 to v1.1.0: expanding from phone-only setup to on-watch wheel editing","v1.0.0 到 v1.1.0：從手機端設定，擴充為可在手錶上編輯轉盤","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fsettings-v100-to-v110-flow.webp",[26,223,224,232,240,248],{"align":120,"cols":29},[31,225,226,229],{},[124,227,228],{"id":228},"相容性挑戰",[19,230,231],{},"從後台發現 1\u002F4 下載量來自 Forerunner 55，但這款舊裝置不支援 SDK 內建的文字輸入元件，需要額外補上一套相容的輸入方案，確保舊裝置也能在手錶端進行設定。",[31,233,234],{},[181,235],{"alt":236,"caption-en":237,"caption-zh":238,"src":239},"各裝置下載量統計，Forerunner 55 以 27.83% 位居第一","Dashboard stats: Forerunner 55 leads all devices in download share","後台裝置統計：Forerunner 55 下載比例最高","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fcompatibility-forerunner-55.webp",[31,241,242,245],{},[124,243,244],{"id":244},"封面圖的威力",[19,246,247],{},"設定流程修好之後，我也換了一張更吸睛的封面圖。沒想到下載量明顯提升、效果十分顯著😮。",[31,249,250],{},[181,251],{"alt":252,"caption-en":253,"caption-zh":254,"src":255},"Spin The Wheel 封面圖改版前後對照，下載量從 10+ 提升至 1K+","After the cover update, downloads jumped from 10+ to 1K+","換了封面圖後，下載量從 10+ 衝到 1K+","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fapp-store-cover-update.webp",[14,257,259],{"id":258},"結尾把小東西做到有靈魂","結尾：把小東西做到有靈魂",[26,261,262,270],{"align":120,"cols":29},[31,263,264,267],{},[19,265,266],{},"這個命運轉盤 Widget 走完了一個完整的迭代循環：從需求與靈感出發，定義互動原則，設計並打磨體驗細節，實作後上架驗證。更重要的是，上架後的回饋讓我重新對齊了使用者的預期。",[19,268,269],{},"我很享受把一個小東西做到有靈魂的過程，也會繼續迭代讓它更順、更完整。",[31,271,272],{":media":33},[44,273],{"label":274,"src":275,"size":276},"Looping final interaction showing the Spin The Wheel result reveal flow","\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fdemo-final-interaction.mp4","sm",[278,279,280,284,287,290,302,306,309,322,325,342,346,349,396,400,403,406,409,411,415,418,421,426,429,432,462,466],"en",{},[14,281,283],{"id":282},"an-everyday-post-work-problem-what-should-i-have-for-dinner","An Everyday Post-Work Problem: What Should I Have for Dinner?",[19,285,286],{},"As someone who eats out regularly, I often found myself paralyzed by options: bento boxes, convenience stores, ramen, healthy meals. Too many choices, no decision made. And it's not just food. Life is full of these low-stakes but annoying small decisions: where to go on the weekend, whether to exercise tonight.",[19,288,289],{},"\"Just leave it to fate.\" A quick glance at my watch, and the idea clicked: a fortune wheel, right on the wrist.",[26,291,292,298],{"align":28,"cols":29},[31,293,294],{":media":33},[19,295,296],{},[37,297],{"alt":39,"src":40},[31,299,300],{":media":33},[44,301],{"label":46,"src":47},[14,303,305],{"id":304},"this-widget-is-meant-to-be-grabbed-and-used","This Widget Is Meant to Be Grabbed and Used",[19,307,308],{},"I happened to have a Garmin watch on hand, so out of curiosity I decided to try building on Connect IQ. I started by reading the official documentation as the foundation for both design and implementation.",[59,310,311,316],{},[62,312,313],{},[65,314,71],{"href":67,"rel":315},[69],[62,317,318],{},[65,319,321],{"href":76,"rel":320},[69],"User Experience Guidelines",[19,323,324],{},"Garmin's UX guidelines put it clearly: \"Great wearable apps stay out of the user's way and keep interactions to a minimum.\" This widget is meant to be grabbed and used in a moment, not something that demands attention.",[83,326,327,332,337],{"cols":85},[87,328,329],{"icon":89,"title-en":90,"title-zh":91},[19,330,331],{},"Keep only what's essential. No extra steps added to the flow.",[87,333,334],{"icon":97,"title-en":98,"title-zh":99},[19,335,336],{},"Open, tap, get a result. The whole interaction wraps up in seconds.",[87,338,339],{"icon":105,"title-en":106,"title-zh":107},[19,340,341],{},"Feedback is clear and immediate, while preserving the anticipation of the draw.",[14,343,345],{"id":344},"the-spin-is-the-soul-rotation-deceleration-vibration","The Spin Is the Soul: Rotation, Deceleration, Vibration",[19,347,348],{},"Showing a random result instantly would take milliseconds, but it would feel like nothing. The soul of a fortune wheel is in the wait: the pointer sweeping across options, speed gradually slowing, finally locking onto a result. I designed three layers of dynamic feedback around this feeling.",[26,350,351,360,366,375,381,390],{"align":120,"cols":29},[31,352,353,357],{},[124,354,356],{"id":355},"deceleration-curve","Deceleration Curve",[19,358,359],{},"Quartic easing extends the low-speed glide, keeping the spin suspenseful right before it stops.",[31,361,362],{},[19,363,364],{},[37,365],{"alt":136,"src":137},[31,367,368,372],{},[124,369,371],{"id":370},"tick-vibration","Tick Vibration",[19,373,374],{},"Short haptic ticks simulate the tactile feeling of a pointer passing each option.",[31,376,377],{},[19,378,379],{},[37,380],{"alt":152,"src":153},[31,382,383,387],{},[124,384,386],{"id":385},"result-reveal","Result Reveal",[19,388,389],{},"A stronger haptic pulse and prominent animation give the final locked result more weight.",[31,391,392],{},[19,393,394],{},[37,395],{"alt":168,"src":169},[14,397,399],{"id":398},"a-solution-under-constraints-from-pizza-slices-to-a-ring-pointer","A Solution Under Constraints: From Pizza Slices to a Ring Pointer",[19,401,402],{},"The initial concept used a traditional pie-slice wheel: each option occupying a wedge, visually intuitive. But implementing it in Monkey C hit a wall. Rotating text inside wedges was difficult to handle, and the large screen updates during animation caused stuttering.",[19,404,405],{},"The solution flipped the concept: keep the wheel stationary and rotate a pointer around a ring instead. This dramatically reduced computation and smoothed out the animation. The center of the ring displays the full option name in sync, compensating for the ring slots that could only fit short abbreviations.",[181,407],{"alt":408,"caption-en":184,"caption-zh":185,"src":186},"Garmin watch ring pointer interface with a stationary option ring, rotating pointer, and centered option label",[188,410],{"caption-en":190,"caption-zh":191,"src":192},[14,412,414],{"id":413},"launched-and-humbled-users-expected-on-watch-settings","Launched and Humbled: Users Expected On-Watch Settings",[19,416,417],{},"v1.0 routed all configuration through the companion phone app. My logic: typing on a phone is easier, so it should be the better experience. The low ratings told a different story.",[181,419],{"alt":420,"caption-en":204,"caption-zh":205,"src":206},"v1.0 phone-only settings flow requiring users to configure wheel options in the Connect IQ app",[208,422,423],{},[19,424,425],{},"If it's a wheel you play on the watch, of course you should be able to change the options on the watch.",[19,427,428],{},"v1.1 added on-watch configuration while keeping the phone as the \"faster recommended method.\" The iteration increased development complexity, but made the settings flow more intuitive and started bringing in more positive reviews.",[181,430],{"alt":431,"caption-en":219,"caption-zh":220,"src":221},"v1.0.0 and v1.1.0 settings flow comparison showing the added on-watch wheel editing path",[26,433,434,443,448,457],{"align":120,"cols":29},[31,435,436,440],{},[124,437,439],{"id":438},"compatibility-challenge","Compatibility Challenge",[19,441,442],{},"The dashboard showed that about a quarter of downloads came from Forerunner 55. This older device doesn't support the SDK's built-in text input component, so I had to build a compatible input solution to make sure those users could configure options on the watch too.",[31,444,445],{},[181,446],{"alt":447,"caption-en":237,"caption-zh":238,"src":239},"Device download statistics with Forerunner 55 at 27.83%, ranking first among all devices",[31,449,450,454],{},[124,451,453],{"id":452},"cover-art-matters","Cover Art Matters",[19,455,456],{},"After fixing the settings flow, I also swapped in a more eye-catching cover image. Downloads picked up noticeably. The effect was way more significant than I expected.",[31,458,459],{},[181,460],{"alt":461,"caption-en":253,"caption-zh":254,"src":255},"Spin The Wheel app store cover before and after, downloads grew from 10+ to 1K+",[14,463,465],{"id":464},"closing-giving-small-things-soul","Closing: Giving Small Things Soul",[26,467,468,476],{"align":120,"cols":29},[31,469,470,473],{},[19,471,472],{},"This widget completed a full iteration loop: from need and inspiration, through defining interaction principles, designing and refining the experience, implementing and launching, then realigning with real user expectations post-launch.",[19,474,475],{},"I genuinely enjoyed the process of giving a small thing real character. I'll keep iterating to make it smoother and more complete.",[31,477,478],{":media":33},[44,479],{"label":274,"src":275,"size":276},{"title":481,"searchDepth":29,"depth":29,"links":482},"",[483,484,485,486,487,488,489,490,491,492,493,494],{"id":16,"depth":29,"text":17},{"id":53,"depth":29,"text":54},{"id":113,"depth":29,"text":114},{"id":172,"depth":29,"text":173},{"id":196,"depth":29,"text":197},{"id":258,"depth":29,"text":259},{"id":282,"depth":29,"text":283},{"id":304,"depth":29,"text":305},{"id":344,"depth":29,"text":345},{"id":398,"depth":29,"text":399},{"id":413,"depth":29,"text":414},{"id":464,"depth":29,"text":465},"\u002Fimages\u002Fworks\u002Fspin-the-wheel\u002Fcover.webp",[497,504,510],{"label":498,"value":501},{"zh":499,"en":500},"角色","Role",{"zh":502,"en":503},"UI\u002FUX 設計師 + 獨立開發","UI\u002FUX Designer + Independent Developer",{"label":505,"value":508},{"zh":506,"en":507},"平台","Platform",{"zh":509,"en":509},"Garmin Connect IQ",{"label":511,"value":514,"href":517},{"zh":512,"en":513},"產品","Product",{"zh":515,"en":516},"命運轉盤 SpinTheWheel","SpinTheWheel","https:\u002F\u002Fapps.garmin.com\u002Fzh-TW\u002Fapps\u002Fb2100008-aaf4-4179-9515-b445d8611e55?fbclid=IwZXh0bgNhZW0CMTAAYnJpZBExQ20xQjY1OHpuSWl5TlN2a3NydGMGYXBwX2lkEDIyMjAzOTE3ODgyMDA4OTIAAR4jv7MfKrrs5DEdlbrewdWiJg4I1T6MyCA4ixDr5s7MqYn4QjJaAk-683PW2Q_aem_0r462ScUWoXePYFnp1MgNQ","md",{"zh":520,"en":521},"做不了決定? 在 Garmin Connect IQ 上打造一款直觀好操作的命運轉盤 Widget","Can't decide? Building an intuitive, easy-to-use Spin The Wheel widget for Garmin Connect IQ",{},true,"\u002Fspin-the-wheel",{"zh":502,"en":526},"UI\u002FUX Designer + Developer",{"title":528,"description":481},{"zh":6,"en":6},{"zh":530,"en":531},"Spin The Wheel - Garmin 命運轉盤 Widget","Spin The Wheel: A Garmin Connect IQ widget","spin-the-wheel","published",{"zh":535,"en":536},"以「快速做出決定」為核心，設計並開發一款操作直覺、回饋明確的轉盤 Widget，讓使用者按幾下就能轉起來抽籤。在限制下重構轉盤呈現方式，兼顧效能與可讀性，上架後依使用者回饋持續調整設定流程。","Centered on quick decision-making, this project designed and developed an intuitive Spin The Wheel widget with clear feedback, letting users draw a result in just a few taps. Within platform constraints, the wheel presentation was rebuilt to balance performance and readability, with the settings flow refined after launch based on user feedback.",[538,539,540],"Wearable","Connect IQ","Dev",2026,"ZaOHUGjBO0rW_i67Lnqae-3ClojtlJxLoW0fHnYMSEE",[544,555,558,567,576,584],{"slug":545,"title":546,"cover":548,"tags":549,"order":554},"morph-inspect",{"zh":547,"en":547},"Morph Inspect","\u002Fimages\u002Fworks\u002Fmorph-inspect\u002Fcover.webp",[550,551,552,553],"AI","B2B","Mobile","Web",1,{"slug":532,"title":556,"cover":495,"tags":557,"order":29},{"zh":6,"en":6},[538,539,540],{"slug":559,"title":560,"cover":563,"tags":564,"order":85},"sim-monitor-dashboard",{"zh":561,"en":562},"散熱模擬監控儀表板","Thermal Simulation Monitoring Dashboard","\u002Fimages\u002Fworks\u002Fsim-monitor-dashboard\u002Fcover.webp",[565,566,540],"Design Challenge","IA",{"slug":568,"title":569,"cover":572,"tags":573,"order":575},"tiger-master",{"zh":570,"en":571},"師虎來了(修繕媒合平台)","TigerMaster Repair Matching Platform","\u002Fimages\u002Fworks\u002Ftiger-master\u002Fcover.webp",[574,552,540],"B2C",4,{"slug":577,"title":578,"cover":580,"tags":581,"order":583},"yodewang-rebuild",{"zh":579,"en":579},"yodewang.com","\u002Fimages\u002Fworks\u002Fyodewang-rebuild\u002Fcover.webp",[582,550,540],"Portfolio",5,{"slug":585,"title":586,"cover":589,"tags":590,"order":593},"ai-design-system-assistant",{"zh":587,"en":588},"建立一套讓 AI 看懂設計脈絡的知識庫","Building a Knowledge Base That Teaches AI Design Context","\u002Fimages\u002Fworks\u002Fai-design-system-assistant\u002Fcover.webp",[591,592,550],"[WIP]","Design System",6,1784180137906]