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

閱讀時間約 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
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    在每位女性的衣櫃中,內褲與睡裙的選擇不僅關乎舒適,還能展現個人魅力。好的內褲和睡裙不僅可以提升自信,還能讓你在任何場合中都保持性感與優雅,選擇最適合自己的內褲與睡裙,可以讓你魅力大提升。
    Thumbnail
    子標題: 安心才能長抱,保守投資人的組合。想搭配正二,但又希望波動不要太高,維持率更安全、綜合標準差更低的設計。 前言 有些投資人希望可以通過高低波投資組合提升績效,又希望波動不要太高,或風險小一些,在這次的研究中,來討論一下可行的方向有哪些,也通過回測看一下績效落差有多少。 大綱
    本公司,株式会社iai(總部:神奈川縣橫濱市,代表:舟久保 大輔),宣布將於2024年9月13日(星期五)在東京・表參道開設新式希臘優格專門店「& Yogurt」。 在「& Yogurt」,我們不僅提供搭配水果的「進化型希臘優格」,還包括通過獨家管道採購的烤牛肉等食材,推出不僅限於甜點,甚至可作為
    Thumbnail
    大家好,我是小畢,選擇投資0050的投資人,目的除了希望讓自己的資產增加外,還有另一個目的就是期望0050在退休後能提供生活開銷,但是到底該從0050提領多少作為生活費?才不會太快耗盡資產造成無錢可用的狀況,或是資產只有0050的話退休可能會遇到什麼問題呢? 我在另一篇文章介紹了退休如何從0050
    Thumbnail
    Sunny在2024年4月11日參加並且通過金融科技力的證照考試了,實在是太開心了🎉🎉🎉 老實說,這次金融科技力考試的準備心境,對Sunny而言是非常戲劇化的。從一派輕鬆,到緊張、鬆口氣、信心滿滿,再到考試時的驚悚,最後是看到合格通過的驚險,真的彷彿搭雲霄飛車般的千變萬化,心境起伏很大。
    在製造業中,選擇適合的金屬加工方式對於產品的品質和效率至關重要。在進行金屬加工時,常見的兩種技術是板金成形和雷射切割金屬。本文將探討這兩種技術的優點和局限性,幫助讀者找到最適合其項目的選擇。
    Thumbnail
    這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
    Thumbnail
    11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
    Thumbnail
    Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
    在每位女性的衣櫃中,內褲與睡裙的選擇不僅關乎舒適,還能展現個人魅力。好的內褲和睡裙不僅可以提升自信,還能讓你在任何場合中都保持性感與優雅,選擇最適合自己的內褲與睡裙,可以讓你魅力大提升。
    Thumbnail
    子標題: 安心才能長抱,保守投資人的組合。想搭配正二,但又希望波動不要太高,維持率更安全、綜合標準差更低的設計。 前言 有些投資人希望可以通過高低波投資組合提升績效,又希望波動不要太高,或風險小一些,在這次的研究中,來討論一下可行的方向有哪些,也通過回測看一下績效落差有多少。 大綱
    本公司,株式会社iai(總部:神奈川縣橫濱市,代表:舟久保 大輔),宣布將於2024年9月13日(星期五)在東京・表參道開設新式希臘優格專門店「& Yogurt」。 在「& Yogurt」,我們不僅提供搭配水果的「進化型希臘優格」,還包括通過獨家管道採購的烤牛肉等食材,推出不僅限於甜點,甚至可作為
    Thumbnail
    大家好,我是小畢,選擇投資0050的投資人,目的除了希望讓自己的資產增加外,還有另一個目的就是期望0050在退休後能提供生活開銷,但是到底該從0050提領多少作為生活費?才不會太快耗盡資產造成無錢可用的狀況,或是資產只有0050的話退休可能會遇到什麼問題呢? 我在另一篇文章介紹了退休如何從0050
    Thumbnail
    Sunny在2024年4月11日參加並且通過金融科技力的證照考試了,實在是太開心了🎉🎉🎉 老實說,這次金融科技力考試的準備心境,對Sunny而言是非常戲劇化的。從一派輕鬆,到緊張、鬆口氣、信心滿滿,再到考試時的驚悚,最後是看到合格通過的驚險,真的彷彿搭雲霄飛車般的千變萬化,心境起伏很大。
    在製造業中,選擇適合的金屬加工方式對於產品的品質和效率至關重要。在進行金屬加工時,常見的兩種技術是板金成形和雷射切割金屬。本文將探討這兩種技術的優點和局限性,幫助讀者找到最適合其項目的選擇。