我用Sketch 設計Android app 的工作流程 - 設計大舌頭

所以當我們在閱讀UI 教學、app 設計的心得時，往往也是iOS 的資源會比較多。

既然我愛Android，那就來幫綠色機器人寫寫文章，拋出我的磚，希望可以有更多的Andr​ ... Skiptocontent 我用Sketch設計Androidapp的工作流程 APP,UI/UX,心得分享,教學文章 315月,2015 dryden 要動筆寫這篇文章時，突然想到前陣子被問： 「通常…設計師不是都比較喜歡用iPhone的嗎？你為什麼喜歡Android？」 我喜歡Android的原因很多，這篇文章不談，以免分享文變戰文XD。

而事實上，的確因為iOS的各方面優質設計，讓很多設計師為它打造各種美輪美奐的應用。

所以當我們在閱讀UI教學、app設計的心得時，往往也是iOS的資源會比較多。

既然我愛Android，那就來幫綠色機器人寫寫文章，拋出我的磚，希望可以有更多的Andr​​oid好設計。

正在努力開發中的媽咪愛Androidapp（點圖放大）   使用工具Sketch｜inVision｜Zeplin   關於Sketch的教學文章網路上很多，剛接觸的人可以找來看看。

其實如果會用Photoshop和illustrator，要上手Sketch並不難，只是要改掉一直想按V鍵切換成選取工具的習慣而已（笑 要製作一支app，有很多的準備工作要做，當一切都準備就緒，和PM及工程師初步溝通的Wireframe也確定沒有問題後，我就會開始用Sketch把精圖畫出來。

（每間公司的流程不同，我待的是新創公司所以在製作時程上，也和要求嚴謹穩定的大型軟體公司不一樣） 新版的Sketch已經內建了MaterialDesign的樣版，可以直接套用。

但問題是，Sketch提供的是360*640mdpi的樣版，而我則是習慣用720*1232romaniafarmacie.comxhdpi的大小製作。

  為什麼會選用720*1232xhdpi？ 因為有搭配使用inVision，而它的建議製作尺寸就是720*1232 製作時會把畫面用SkalaPreview丟到手機上預覽，而我的MotoX就是xhdpi的螢幕 因為主流的手機螢幕就是xhdpi甚至xxhdpi（Nexus5），大畫面也較好塞進更多小細節 如果app同時有Android與iOS兩個平台版本的話，我會先在Android上用720*1232畫出一版，確定後，再複製到iOS，並調整成750*1334。

然後把細節換成iOS的樣式。

這樣做可以兼顧多平台的一致性和開發速度。

  要注意一點的是，這裡的寬度720變成750並不是用放大的方式，而是只延伸X軸。

因為在畫Android時本來就要考慮不同裝置的寬度問題，所以移植到iOS上時，把畫面寬度改成750，就像是把瀏覽器的畫面從720拉成750一樣，對於整體不會有什麼影響。

  MaterialDesignTemplate 所以，我偏好用xhdpi畫圖，但不論是Sketch提供的樣版，還是網路上下載的Google官方MaterialDesign檔案（其實兩者是同一個），都是mdpi的大小。

所以我自己把官方版本放大，調整了一個xhdpi的版本，可以在這邊下載到。

版權屬原作者所有   開工 把樣版的問題處理好以後，就可以開始畫圖啦！ 而因為樣版裡已經有設定好MaterialDesign的各種字體大小了，所以遇到有文字的部分，就直接套用就好，超方便。

  畫圖的過程，就是一邊畫，然後用SkalaPreview丟到手機上預覽。

  檔案標註 最後，完稿並設定好哪些圖層要切圖後，我會用一個Sketch外掛：SketchNotebook，來標註設計稿，告訴工程師，這張設計稿所用的有哪些圖，以及它們的名稱是什麼，讓工程師開發起來更有效率。

    它的使用方式很簡單，安裝好外掛以後，點選你要標註的圖層，按下control+option+command+9，就可以在跳出的對話框中，輸入你想註記的內容。

不過這個外掛之前在Sketch3.3中無法正常使用，爬文後發現在Github上有人修正了這個問題。

如果你的版本也無法正常使用，可以點選下載這個我修改過的js檔，放到你的Sketch外掛資料夾的SketchNotebook>library裡面，取代掉原本的notebook.js，應該就可以正常使用了。

註：Sketch外掛資料夾開啟方法，如下圖，點RevealPluginsFolder…     細節標註Zeplin 文件標註完成後，就按下command+E，送到已經安裝好的Zeplinapp裡面。

這樣工程師就可以直接在他自己的Zeplin裡面，看到每個元件的大小、相對位置、顏色等等。

  生命就該浪費在美好的事物上，元件的寬高如果都要設計師一一標註那真的是很浪費生命啊！（尤其在新創公司，臨時要改畫面改功能是很司空見慣的事情）讓Zeplin處理這塊就好，工程師想看哪一塊，點一下滑鼠就知道。

  同步素材inVision 把畫面傳到Zeplin後，我會對著剛剛的圖層按下control+option+command+0，來關閉剛剛開啟的SketchNotebook標註視窗。

然後讓inVision的桌面同步外掛恢復同步，把我新做好的圖同步到inVision的雲端去。

（平常畫圖時我會把inVision的同步功能暫停，以免它去切到我還沒整理好的檔案） 這時候就可以喝口水休息一下，等inVision同步完成囉。

因為剛剛在完稿時已經設定好哪些圖要切圖、要切成哪些大小、檔案名稱是什麼都設定好了，所以inVision同步完成後，就會全自動的幫你切圖，放到inVision的子資料夾Assets裡面。

所以我會把inVision的專案也分享給合作的工程師，並請他們安裝inVision的桌面同步app，這樣子只要我每次完稿，inVision就會全自動的上傳並更新最新的圖檔素材，並自動同步一份到工程師的電腦裡。

工程師在製作時完全不用再去網路硬碟下載圖檔，直接點開自己電腦硬碟的資料夾就有最新的檔案。

整支app的製作過程中，這來來回回省下的時間相當的可觀。

以上，就是我在使用Sketch製作Androidapp的工作流程。

使用這些方便的工具，讓開發時可以省下更多時間。

而這些省下的時間，就可以拿去設計更多好功能，看更多好文章，或是吃更多的好東西囉！   (本文由Dryden授權轉載，原文我用Sketch設計Androidapp的工作流程在此)   本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。

其他人也看了這些... 設計師學習Framer第三章：運用Animation讓原型更生動 如何讓介面中的動畫設計較容易被實現？ 使用sketch改善網頁前端與設計的標註與合作方式 你可能不知道的–關於iOS切圖那點事 Sketch初心者在設計UI前要做的五件事！ SketchPlugin–Zeplinvs.Sympli 訂閱設計大舌頭 隨時關注第一手UX、UI、科技、設計新知 電子郵件 訂閱 dryden 全部文章 Facebook LinkedIn Telegram Twitter 上一篇「十年磨一劍」騰訊的用戶體驗發展 下一篇查詢3+2郵遞區號有那麼難嗎？ 最新文章 Clubhouse為什麼熱門？從UIUX的角度淺談（一） 2021-02-08/ 0Comments 手機拿法也會影響介面設計–淺談拇指法則 2020-02-06/ 0Comments Supr.Link最安全的縮網址服務 2020-01-13/ 0Comments 開發流程優化人人有責：設計也能營運？ 2019-07-06/ 0Comments 台灣社會創新發展趨勢(本場次全程QA)–MIX2019Day1 2019-05-14/ 0Comments 數位金融–MIX2019Day1 2019-05-14/ 0Comments UI/UX 教學文章 心得分享 電子商務 體驗文 0 ×