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 圖示。

Quick hotkeys support – 支援熱鍵

開發人員可以在 iOS 模擬器中不需要用到滑鼠就可以與設計稿互動或是比較設計稿與實作上的差異:

  • ⌃⌥→ 用來在選取的設計圖檔間切換
  • ⌘⇧E 用來開啟/關閉對照功能
  • ⌘⇧R 切換對照模式

使用長形設計螢幕

有時你會有些像「新聞摘要」這樣有著一堆項目的螢幕畫面。設計師們喜歡製作一些比 iOS 模擬器螢幕長度還長的畫面。Flawless App 同樣也支援這樣的案例。開發人員可以選取一個長型畫面而我們的工具會在 iOS 模擬器中允許它滾動。哇,如此一來你就可以很容易地與 App 進行互動!

與 GIF 進行比較

動作及動畫在使用者介面裡扮演著重要的角色。在 UI 中即使是微小的動作也可能劇烈地改變使用者與 App 間的互動方式。那就是為什麼我們引進檢查實際運作的能力而不僅是靜態圖像,還有 GIF 圖像。Flawless App 會判斷設計稿是 GIF 格式並可以透過暫停/播放的能力來適當地播放 GIF。

小結

雖然 Flawless App 被設計給 iOS 開發者使用,但我希望現在你看到使用它會帶給整個產品團隊多大的助益。我們正與我們的使用者一齊推進產品的能耐。我們相信對於正在建構一個成熟的產品並關心使用者的你來說,視覺上的品質是非常重要的。持續的設計實作不應該是痛苦且耗時的。

加入我們改變設計-開發互動的道路吧。歡迎分享你對於改善團隊協同合作以及視覺品質的想法吧。此外,作為製作者,我非常希望可以聽到你對於 Flawless App 的回饋以及它是如何融入你的設計流程之中。

本篇為 Flawless App 創辦人兼 CEO – Ahmed Sulaiman 先生的客座投稿內容。你可以透過 Twitter 與 Ahmed 聯絡。
由今天至3月5日,可透過此連結以優惠價(20% off)購買Flawless app。
譯者簡介:楊敦凱-目前於科技公司擔任 iOS Developer,工作之餘開發自有 iOS App同時關注網路上有趣的新玩意、話題及科技資訊。平時的興趣則是與自身專業無關的歷史、地理、棒球。來信請寄到:[email protected]

原文How Flawless App Helps You Become a Better Designer and Developer


此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This