Flawless App 如何讓你成為一位更好的 UI 設計師及開發者

編者的話： 我們非常喜歡 Flawless app。這個星期我們特別邀請 Flawless App 的創辦人 Ahmed Sulaiman 介紹一下這個應用程式，看看如何讓你的app 設計和開發流程做得更好。如你讀完此文章之後，也覺得Flawless App對你有幫助，由今天至3月5日，可透過此連結以優惠價（20% off）購買Flawless app。

即使到了 2018 年，我們仍然努力解決設計師與開發人員之間的互動問題。雖然每個團隊在設計及開發時有著不同的組織架構，但問題依舊存在。所以產品團隊仍然須指出如何改善設計-開發流程以及為使用者提供優質產品方面變得更有成效。

長期以來，我只身為其中一邊，我過去負責 Android、iOS、macOS 的開發。但在 2015 年的時候，事情有了巨大的變化：我開始學習設計而之後更負責我的公司‑Flawless App 的所有設計工作。

我們 Flawless App 的使命在於幫助 iOS 開發人員及設計師們改善 App 的設計實作。我們的工具可以在開發環境中將開發人員的實際情況與設計稿進行比較。所以開發人員可以即時地比較設計稿與最終 App 畫面的差異、點出所有視覺上的問題以及立即地修復。這將會增加視覺上的品質、節省時間及幫助所有團隊更快速地向前推展進度。

我想要分享 Flawless App 是如何的幫助你改善 iOS App，讓其在每個裝置上看起來跟設計稿幾乎相同。此外，也改善你的團隊間的溝通及省了許多頭疼的惱事。

儘管 Flawless App 主要是為 iOS 開發人員所設計，但它不只能節省開發人員的時間也節省了設計師及測試人員的時間。所以讓我帶你看看 Flawless App 中對設計師及開發人員來說最重要的功能。

設計稿與實際App的比較

Flawless App 的核心功能是能夠在 iOS 模擬器上比較設計稿與實際上的差異。快速開啟一個 iOS 模擬器（藉由 Xcode，一個 iOS/macOS 開發使用的 IDE），然後選擇一張設計稿作為圖檔（可以是 jpeg、png、tiff、gif 等等格式）或是選擇一個 Sketch 檔案。我們的工具將會施展魔法將設計稿無縫地置入 iOS 模擬器中。所以開發人員可以瀏覽及找出所有視覺上的問題。

對 iOS 開發人員的效益

你可以在所使用的工具 Build App 時看到畫面。不需要開啟「另一個視窗」浪費珍貴的螢幕空間及時間。設計樣式就在你指掌之間切換。
非常容易地整合進你現在的製作流程裡。不需要額外的步驟，不需與第三方程式庫連結或是需要設定。只要下載後即可使用。

對 UI 設計師的效益

將設計稿的確認委託給開發人員。
對於開發人員會注意到設計稿與實際情況的差異，同時在建構 UI 時不會有太多意見充滿信心。實際的成果將會看起來與你可愛的設計稿一模一樣。

螢幕擷取動畫

你是否曾參與過設計稿的審核呢？是的，就是那些讓開發人員與設計師們坐在一起找出「哪些花俏的按鈕沒有運作」的會議。如果是，那你閱讀這篇真是對極了。

藉由使用 Flawless App，你可以立即地從 iOS 模擬器中擷取出設計稿與實際情況比較的 GIF 檔案。因為它是個 GIF 檔案，所以它可以被分享到任何你們團隊所用的服務像是：Slack、Asana 或是 Jira。

要啟用這項功能，開發人員只需要選取一個設計稿檔案，然後選擇適當的比較模式（分隔或是覆蓋）接著按下擷取扭，這將會在桌面建立一個比較的 GIF 檔案。

對 iOS 開發人員的效益

你可以在版本控制系統中附加螢幕截圖 GIF 動畫到你的 Pull-Request。這樣你的團隊不只可以檢視你的程式碼同時也可以檢視設計上的實作。
擷取螢幕畫面動畫並分享給設計師及測試人員來確認你的實作已經依最初的設計稿進行足夠的改善。

對 UI 設計師的效益

檢視截圖動畫來取代檢視整個 App。所以設計審核將會花更少的時間完成。
附加螢幕截圖 GIF 動畫到 Trello、JIRA、Asana 等等的地方來展示 UI 工作已完成。所以團隊的其他人也可以來查看結果。

動態設計製作

過去，iOS 平台對不同的裝置尺寸方面或多或少是保守的。但如今已非如此，現在 iOS App 需要支援至少 10 種不同的螢幕尺寸。你會如何處理這些尺寸的設計？或許我們需要為不同的螢幕尺寸設計個別的圖像？不！應該還有更好的方法。

最後，Sketch 從 44 版開始可以調整約束條件的大小(Resizing Constraints)。這是一個非常有用的內建工具讓設計師可以在 Sketch 內動態地調整元素的大小。使用這些設定條件，設計師們可以藉由在圖像編輯中變更螢幕尺寸來找出元件布局在不同螢幕尺寸中是如何運作。這對建構響應式元件布局是非常重要的。

不幸的是，在程式實作時開發人員沒有辦法看到設計稿是如何在不同的螢幕大小中運作。在大部分的例子裡，開發人員必須以常識來猜想調整的規則。而且一旦有任何的困難，設計師就要幫忙協助。

這與設計師如何和開發人員分享設計稿無關。在現今的工具裡，設計稿最後會變成一張靜態的圖像。所以開發人員無法直接調整大小然後看這些元件在不同的螢幕尺寸中會發生什麼變化。藉由使用 Flawless App，這些就不再是個問題。使用動態設計製作（Dynamic Design Generation），開發人員可以看到設計稿在在任何的螢幕尺寸中會是什麼樣子。

設計師所要做的就是在選定的畫布(Artboard)中為對應的布局指定調整約束條件並在 Sketch 中開啟“Adjust content on resize” 選項。然後開發人員會在 Flawless App 中選取這份 Sketch 檔案。我們的工具會自動找出現在正運行的 iOS 模擬器（iPhone 5、iPhone X、iPad 等等）然後產生出符合螢幕大小的正確設計樣貌。這是不是很驚人呀？！此外，要感謝 Xcode 9 可以讓開發人員同時開啟多個 iOS 模擬器，讓開發人員可以找出不同螢幕尺寸所有可能的設計變化。

對 iOS 開發人員的效益

不再猜想不同的螢幕尺寸下該如何調整設計樣式。只要即時地看一下然後實作適當的約束條件。
Flawless App 支援多個 iOS 模擬器，因此你可以一次在多個模擬器上開啟一個設計稿。
可以完全地由設計師來設定約束條件的調整。

對 UI 設計師的效益

你可以為單一個螢幕尺寸設計畫面就好，然後在 Sketch 中為其他螢幕尺寸指定整體大小即可。
如果正在使用版本控制系統的話，你可以也邀請開發人員加入。如此一來開發人員就可以拿到最新且符合正確約束調整條件的 Sketch 檔案。這樣的方式可以更加無縫地傳送 Sketch 檔案。

進一步改善你的工作流程

Zeplin files support – 支援 Zeplin 檔案

如果團隊的設計師使用 Zeplin 來將設計稿傳給開發人員，Flawless App 是你現有的工作流程中不可缺少的補充套件。我希望你會很高興 Flawless App 支援 Zepline 設計檔案。開發人員可以從 Zeplin 的 macOS 軟體中拖拉一個或多個設計圖檔到工具列的 Flawless App 圖示。