🔧 阿川の電商水電行
這是參加 「跨平台應用人工智慧挑戰賽—熱門設計展示」的參賽作品。
過去幾天，我挑戰自己使用Uno Platform Hot Design建立一個簡潔、現代、Instagram 風格的個人資料頁面。
劇透：它的開頭並不美好。差遠了。
但這正是這個專案令人興奮的地方。
出於好奇、挫折、突破和大量的實驗，我最終學到了比預期更多的知識，包括使用者介面結構、跨平台設計、XAML 以及 Uno 新推出的 Hot Design 工具的強大功能。
今天我想和大家分享這個故事、過程、犯的錯誤、最終結果，當然還有我在過程中學到的經驗。
🔥我為什麼選擇 Uno 平台熱門設計來應對這項挑戰
我其實並沒有主動選擇Uno 平台，這個機會是透過這次挑戰賽獲得的。
但當我開始與 Hot Design 合作時，我很快就明白了 Uno 團隊建立它的原因。
如果你是.NET開發人員，你一定了解常見的痛點：
-
UI佈局緩慢
-
預覽延遲
-
Hot Reload 在最糟糕的時候崩潰了。
-
跨平台使用者介面？那就更難了。
Hot Design徹底顛覆了這個體驗。
我無需費力地進行佈局更新，就可以在應用程式執行時即時調整間距、顏色、樣式、網格和字體。
它讓整個工作流程感覺更流暢、更快捷，而且真的很有趣，這真的是我在參加挑戰之前沒有預料到的。
😕第一次嘗試：我的“醜陋版本”
讓我們從誠實開始：
我的第一個版本…不是Instagram 。
間距很奇怪，佈局很生硬，圖示也不對，整體看起來不夠精緻。
這裡是：
這個版本很重要，因為它展示了這段旅程的起點。
當你記住起點時，進步會更有成就感。
😍最終版面設計
我希望這款應用程式看起來簡潔清新，接近真實的 Instagram 個人資料頁面，但又足夠簡單，可以作為熱門設計演示。
我的核心設計目標如下：
✔ 簡潔的極簡主義頂部
個人資料圖片、統計資料、個人簡介和連結。
✔ 橫向故事氣泡
帶有真實的邊框和標籤，模仿 Instagram。
✔ 簡潔的標籤選擇器
（貼文網格、Reels、標籤圖示）
✔ 響應式網格
三列，等間距，圖片UniformToFill 。
✔ 可自動適應桌面和行動裝置的佈局
（所以我把兩張截圖都放上來了！）
經過反覆試驗、調整顏色樣式、調整間距和改進圖標，我終於成功了。
📺 演示
🖼️最終設計：桌面版
📱最終設計：行動版
{% cta https://drive.google.com/file/d/1m9hhx2hC8NFYGBIkU\_xuYoxxzbN6\_b4C/view?usp=sharing %} 完整示範影片 🎥 {% endcta %}
{% cta https://github.com/Hadil-Ben-Abdallah/Uno-Instagram-UI %} GitHub 倉庫 🐈 {% endcta %}
如果您喜歡這個專案，請給我一顆星⭐，這對我幫助很大，也能激勵我開發更多開源應用程式！
🔧我學到了什麼（關鍵要點）
1️⃣ Hot Design 的原型製作速度極快
它的行為完全符合現代使用者介面編輯器應有的樣子。即時回饋改變了一切。
2️⃣ Uno 讓跨平台開發可預測
同一份 XAML 程式碼可以在桌面、行動裝置以及未來的目標平台上完美運作。
3️⃣ 好的使用者介面需要迭代，尤其是間距方面。
只有在我調整了內邊距、字體和對齊方式之後，我的版面才開始看起來像樣。
4️⃣ 工作流程感覺像是 Figma 和 XAML 的混合體。
我可以進行視覺實驗，同時也能寫出簡潔、可用於生產環境的程式碼。
💙特別感謝 Uno 平台團隊
我要感謝 Uno 平台團隊：
✔ 發布熱門設計，
✔ 建構這樣一個易於使用的生態系統，
✔ 並提供豐富的學習資源。
另外，我要感謝他們製作了這個影片，它對我的幫助非常大。
如果你是熱設計領域的初學者，一定要看這集。它能為你提供所需的思考模型。
🎉最後想說的話
這個專案最初的想法是“讓我嘗試一些小的東西…”，結果卻演變成了一次完整的使用者介面重新設計體驗。
但最重要的部分…
我玩得很開心。
如果你正在考慮嘗試Hot Design，那就去做吧。
說實話，這是我目前為止發現的用 .NET 將 UI 設計理念變為現實的最快方法。
感謝閱讀，也再次感謝 Uno 平台團隊讓這一切成為可能。 💙
感謝閱讀！ 🙏🏻
希望這對您有幫助✅
請按讚並關注，以獲得更多精彩內容😍
由Hadil Ben Abdallah傾情打造 | 
|
|---------|----------|---------|
{% embed https://dev.to/hadil %}
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
