這次模仿製作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看能不能增加一點自己的設計力,看什麼時候可以設計出那麼漂亮的版面!!!