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

更新於 2024/11/12閱讀時間約 1 分鐘

raw-image

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

raw-image

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

raw-image

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

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

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

raw-image

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

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

    avatar-img
    1會員
    37內容數
    留言0
    查看全部
    avatar-img
    發表第一個留言支持創作者!
    dab戴伯的沙龍 的其他內容
    作業目的: 不寫程式,從 storyboard 運用 tab bar controller,navigation controller,table view controller & static cell 實作電子書 App。 使用功能 搭配 tab bar controller & navi
    作業目的: 不寫程式,從 storyboard 運用 tab bar controller,navigation controller,table view controller & static cell 實作電子書 App。 使用功能 搭配 tab bar controller & navi
    你可能也想看
    Google News 追蹤
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    在每位女性的衣櫃中,內褲與睡裙的選擇不僅關乎舒適,還能展現個人魅力。好的內褲和睡裙不僅可以提升自信,還能讓你在任何場合中都保持性感與優雅,選擇最適合自己的內褲與睡裙,可以讓你魅力大提升。
    Thumbnail
    子標題: 安心才能長抱,保守投資人的組合。想搭配正二,但又希望波動不要太高,維持率更安全、綜合標準差更低的設計。 前言 有些投資人希望可以通過高低波投資組合提升績效,又希望波動不要太高,或風險小一些,在這次的研究中,來討論一下可行的方向有哪些,也通過回測看一下績效落差有多少。 大綱
    本公司,株式会社iai(總部:神奈川縣橫濱市,代表:舟久保 大輔),宣布將於2024年9月13日(星期五)在東京・表參道開設新式希臘優格專門店「& Yogurt」。 在「& Yogurt」,我們不僅提供搭配水果的「進化型希臘優格」,還包括通過獨家管道採購的烤牛肉等食材,推出不僅限於甜點,甚至可作為
    Thumbnail
    大家好,我是小畢,選擇投資0050的投資人,目的除了希望讓自己的資產增加外,還有另一個目的就是期望0050在退休後能提供生活開銷,但是到底該從0050提領多少作為生活費?才不會太快耗盡資產造成無錢可用的狀況,或是資產只有0050的話退休可能會遇到什麼問題呢? 我在另一篇文章介紹了退休如何從0050
    Thumbnail
    Sunny在2024年4月11日參加並且通過金融科技力的證照考試了,實在是太開心了🎉🎉🎉 老實說,這次金融科技力考試的準備心境,對Sunny而言是非常戲劇化的。從一派輕鬆,到緊張、鬆口氣、信心滿滿,再到考試時的驚悚,最後是看到合格通過的驚險,真的彷彿搭雲霄飛車般的千變萬化,心境起伏很大。
    在製造業中,選擇適合的金屬加工方式對於產品的品質和效率至關重要。在進行金屬加工時,常見的兩種技術是板金成形和雷射切割金屬。本文將探討這兩種技術的優點和局限性,幫助讀者找到最適合其項目的選擇。
    Thumbnail
    *合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
    在每位女性的衣櫃中,內褲與睡裙的選擇不僅關乎舒適,還能展現個人魅力。好的內褲和睡裙不僅可以提升自信,還能讓你在任何場合中都保持性感與優雅,選擇最適合自己的內褲與睡裙,可以讓你魅力大提升。
    Thumbnail
    子標題: 安心才能長抱,保守投資人的組合。想搭配正二,但又希望波動不要太高,維持率更安全、綜合標準差更低的設計。 前言 有些投資人希望可以通過高低波投資組合提升績效,又希望波動不要太高,或風險小一些,在這次的研究中,來討論一下可行的方向有哪些,也通過回測看一下績效落差有多少。 大綱
    本公司,株式会社iai(總部:神奈川縣橫濱市,代表:舟久保 大輔),宣布將於2024年9月13日(星期五)在東京・表參道開設新式希臘優格專門店「& Yogurt」。 在「& Yogurt」,我們不僅提供搭配水果的「進化型希臘優格」,還包括通過獨家管道採購的烤牛肉等食材,推出不僅限於甜點,甚至可作為
    Thumbnail
    大家好,我是小畢,選擇投資0050的投資人,目的除了希望讓自己的資產增加外,還有另一個目的就是期望0050在退休後能提供生活開銷,但是到底該從0050提領多少作為生活費?才不會太快耗盡資產造成無錢可用的狀況,或是資產只有0050的話退休可能會遇到什麼問題呢? 我在另一篇文章介紹了退休如何從0050
    Thumbnail
    Sunny在2024年4月11日參加並且通過金融科技力的證照考試了,實在是太開心了🎉🎉🎉 老實說,這次金融科技力考試的準備心境,對Sunny而言是非常戲劇化的。從一派輕鬆,到緊張、鬆口氣、信心滿滿,再到考試時的驚悚,最後是看到合格通過的驚險,真的彷彿搭雲霄飛車般的千變萬化,心境起伏很大。
    在製造業中,選擇適合的金屬加工方式對於產品的品質和效率至關重要。在進行金屬加工時,常見的兩種技術是板金成形和雷射切割金屬。本文將探討這兩種技術的優點和局限性,幫助讀者找到最適合其項目的選擇。