搭配 sketch & zeplin 製作 iOS 的健康 App 和 App Store 畫面 — 漂亮的UI設計!!!

更新 發佈閱讀 1 分鐘

這次模仿製作IOS的APP設計,第一次使用sketch和zeplin兩個軟體模仿,這真的是像我這種沒有設計感的人的救星啊!!!,你可以從sketch去分析你要的圖片或者色塊,甚至設計你的UI版面。

這次是將sketch檔案中需要的圖片及文字分別進行make exportable,以此可以讓sketch需要傳輸到zeplin進行模仿。需要特別注意的是,若是要讓symbel類型的圖傳送到zeplin,則需要點兩下會帶到symbel區塊,找到要傳輸的symbel,才能進行make exportable。最後選擇左上角 plugins -> zeplin -> Exported Selected…,將已處理好的檔案輸出到zeplin。

在zeplin中,可由剛剛傳輸過來的檔案進行分析,尤其是UI元件的位置及大小,真的會讓我們在模仿的過程容易並精準很多,甚至更容易去設計出類似的APP。

這次我是先參考圖中的設計去自行模仿,看自己的能力到哪裡,而之中遇到的問題原本我以為是在cells中加入上方四格圖片,後來參考潘帥之後,才發現可以在table view和navigation bar 之間加入一個view進行設計。

另外就是aligment欄位可將文字自動靠左上固定,然後在設計文字在圖片中的距離可以發現,裡面的距離是指你所在範圍的距離,而不是你離整個APP版面的距離,這點可以注意一下。

另外,我們可以在Tint部份去改變icon的圖片顏色,這點我自己是覺得很神奇啊~

最後的最後,之後應該會花點時間學習應用sketch看能不能增加一點自己的設計力,看什麼時候可以設計出那麼漂亮的版面!!!

留言
avatar-img
dab戴伯的沙龍
1會員
37內容數
dab戴伯的沙龍的其他內容
2024/09/03
*本文章為參考李弘毅2021年機器學習課程後的筆記。 在訓練模型的時候,常常會遇到訓練上的問題,像是Loss值太大,或是Test出來的結果不如預期,但我們又不知道模型中到底發生了甚麼事,就跟黑盒子一樣。 因此,感謝李弘毅教授傳授了一套SOP來幫助我們判斷模型是哪裡出了問題,應該要怎麼解決!!
Thumbnail
2024/09/03
*本文章為參考李弘毅2021年機器學習課程後的筆記。 在訓練模型的時候,常常會遇到訓練上的問題,像是Loss值太大,或是Test出來的結果不如預期,但我們又不知道模型中到底發生了甚麼事,就跟黑盒子一樣。 因此,感謝李弘毅教授傳授了一套SOP來幫助我們判斷模型是哪裡出了問題,應該要怎麼解決!!
Thumbnail
2024/05/16
本文介紹自我監督學習的概念和訓練方式,以BERT和GPT為例,深入探討Masking Input及Fine-Tune的實際操作和可應用性。
Thumbnail
2024/05/16
本文介紹自我監督學習的概念和訓練方式,以BERT和GPT為例,深入探討Masking Input及Fine-Tune的實際操作和可應用性。
Thumbnail
2024/05/15
這篇文章探討了生成式對抗網路中機率分佈的使用與相關的訓練方式,包括Generator不同的點、Distriminator的訓練過程、生成圖片的條件設定等。此外,也提到了GAN訓練的困難與解決方式以及不同的learning方式。文章內容豐富且詳細,涵蓋了GAN的各個相關面向。
Thumbnail
2024/05/15
這篇文章探討了生成式對抗網路中機率分佈的使用與相關的訓練方式,包括Generator不同的點、Distriminator的訓練過程、生成圖片的條件設定等。此外,也提到了GAN訓練的困難與解決方式以及不同的learning方式。文章內容豐富且詳細,涵蓋了GAN的各個相關面向。
Thumbnail
看更多
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
本文介紹了景觀設計師常用的軟體,包括平面設計、3D模擬、渲染等多個方面,運用這些軟體幫助設計師展現出專業的圖面和設計理念。
Thumbnail
本文介紹了景觀設計師常用的軟體,包括平面設計、3D模擬、渲染等多個方面,運用這些軟體幫助設計師展現出專業的圖面和設計理念。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
這篇文章分享了許多好用的設計工具,包括Adobe、Canva和Mirosoft Designer,提供了它們的特色和適用對象。文章還附上了可以直接使用這些工具的連結。
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
實時繪圖(一)-安裝ComfyUI+krita心得與教學繼這一篇安裝完畢後,就是開始挑戰電商產品圖製作,意外的簡單,基本上素材找好,在調整個2分鐘,就完成了 接下來我就把我做的方法與步驟分享給大家巴 首先先找好的你的透明素材產品,那麼免費的素材網站我已經幫你找好了,可以商用,請注意一定要用去背的
Thumbnail
當你下定決心想要創作完美的圖片時,是否總是感到生圖製圖工具太過複雜、難以使用?別擔心!今天我們將介紹一款簡單直覺的 AI 生圖工具,幫助大家輕鬆製作出美美的圖片!   Stylar.ai 是一款極具多功能的 AI 圖片生成工具,旨在讓圖像處理變得更加容易且具有創造性。無論是要匯入圖片還是文
Thumbnail
當你下定決心想要創作完美的圖片時,是否總是感到生圖製圖工具太過複雜、難以使用?別擔心!今天我們將介紹一款簡單直覺的 AI 生圖工具,幫助大家輕鬆製作出美美的圖片!   Stylar.ai 是一款極具多功能的 AI 圖片生成工具,旨在讓圖像處理變得更加容易且具有創造性。無論是要匯入圖片還是文
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
Ideogram ai生成圖像工具,只需輸入文字描述,就可以輕鬆生成所需的圖像,能製作出精美的 Logo 及海報,最大的優勢在於可以生成使用者想要在圖像呈現的文字內容,也可根據之前生成的圖片,再次生成新的圖片,讓圖片趨近你想要的樣子。
Thumbnail
Ideogram ai生成圖像工具,只需輸入文字描述,就可以輕鬆生成所需的圖像,能製作出精美的 Logo 及海報,最大的優勢在於可以生成使用者想要在圖像呈現的文字內容,也可根據之前生成的圖片,再次生成新的圖片,讓圖片趨近你想要的樣子。
Thumbnail
本文介紹如何使用Mockup模板圖庫快速合成高質感的圖檔,包含選擇模板、PSD下載、PS套圖等步驟,讓您輕鬆展現作品並模擬示意圖。
Thumbnail
本文介紹如何使用Mockup模板圖庫快速合成高質感的圖檔,包含選擇模板、PSD下載、PS套圖等步驟,讓您輕鬆展現作品並模擬示意圖。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News