Oskar Groth 如何 bridging the gap between development and design
瞭解 Oskar Groth 如何以程式設計師的思維使用 Sketch 打造 Sensei for Mac
Cindori 的創辦人 Oskar Groth 是 Sensei app（一款全面的 Mac 效能工具）背後的靈魂人物。從程式設計到設計，Oskar 全部一手包辦，而且主要使用 Sketch。
在這次的訪談中，Oskar 將與我們分享他的流程，以及他如何平衡設計和開發，將優秀的產品帶入生活。
您的經歷真的令人印象深刻。您不僅是一位程式設計師，還完成了 Sensei 的所有 UI 設計。您是什麼時候開始接觸設計的？
我第一次接觸設計是在我擁有第一個 Apple 產品——第一代 iPod nano 的時候。但直到我開始製作應用程式，我才意識到我必須學習設計技能。當時我嘗試使用任何流行的工具，像是 Photoshop 或 Illustrator，但都感到很吃力。直到 2015 年左右，我遇到了 Sketch。
我覺得它比我之前嘗試過的任何工具都更容易上手，所以我開始用它來設計我的應用程式。從那時起，這就變成了一段漫長的學習過程，透過不斷的練習，我的設計技巧也越來越好，並且能夠創造出更複雜的設計。
Sensei 的核心是數據，但您努力讓這些數據變得美觀。這是您在開發此應用程式時的一大重點嗎？
是的，絕對是！macOS 中隱藏了大量關於 Mac 效能和健康的數據。我認為我的工作是選擇並提煉出最相關的資訊，並以美觀的方式呈現出來。
原因有兩個：一方面，我想要創造一個藝術作品，向 macOS 優美、原生的設計致敬，並讓它完美融入使用者的 Mac。但另一方面，這也與易用性有關。許多效能和系統監控應用程式可能很難理解，除非您有豐富的電腦使用經驗。
我希望 Sensei 不僅是 Mac 愛好者的應用程式，也是一般使用者可以輕鬆使用的應用程式。因此，設計過程不僅僅是創造好看的形狀和顏色，而是簡化複雜的資訊，並教導使用者如何將所有資訊串聯起來。
以引人入勝且賞心悅目的方式呈現數據始終是一項挑戰，但 Sensei 的儀表板確實做到了。
您如何處理將這麼多資訊塞入設計中的挑戰？特別是在空間有限的情況下，例如選單列？
處理大量高度動態的數據絕對是一項巨大的挑戰。我試著思考數據類型——它是否可以有最小值或最大值，或者我是否可以建立指標層級？但即使如此，在各種 Mac 機型中，還是有許多難以預測的邊緣情況。
以 Sensei 的選單列功能「監控」為例，在幕後有許多最佳化程序，以最有效的方式呈現數據。例如，您或許不需要查看所有 24 個左右的 CPU 溫度感測器數據 — Sensei 可以直接計算 CPU 平均溫度並顯示該值。
透過仔細評估其他數據點，資訊可以濃縮成最佳的呈現方式。之後，只需以美觀的方式呈現，這通常需要花費數小時微調每個像素，直到看起來恰到好處 😄
Sensei 可以根據您的喜好顯示多或少的資訊，但 Oskar 需要設計應用程式，使其無論使用者偏好為何都能保持美觀。
你的設計流程是怎樣的？你是先設計再編程，還是反過來？
當我有了想法後，我總是先製作一個我喜歡的設計拼貼。這些設計可以來自其他具有類似功能的應用程式，或者完全不相關的概念設計，展示我覺得可能值得探索的特定使用者介面元素。擁有一面這樣的靈感牆是讓想法源源不斷、避免卡關的好方法。
之後，我會製作一個粗略的模型，其中可能包含應用程式視窗和基本的視圖層次結構。在這裡，Apple 的 Sketch 設計資源非常實用，因為我可以快速地將設計精準的 macOS 系統元件作為「符號」放入。對我來說，所有設計元件都是符號非常重要，這樣對設計的任何更新都會自動應用到設計的所有其他部分。
當我對想要的東西有了初步想法後，我通常會開始編程。在開發應用程式的過程中，你經常會遇到許多挑戰你對功能運作方式理解的事情。我通常會多次回到 Sketch，修改一些原型，並開始為按鈕和圖示等更精細的細節製作新的原型。
在開發過程結束時，我通常會得到一個與最終成品大約 90% 相似的版本。在那時候，我會花一些時間完善設計，製作最終版本的素材，並可能使用它們來製作宣傳圖。
看看 Oskar 在 Sketch 中的符號收藏的一部分。
Sensei 與 macOS 的風格完美融合，但你仍然加入了一些漂亮的擬真插圖，例如風扇、電池等等。你如何在 UI 設計和擬真風格之間取得平衡？
這真的非常棘手！我確實很喜歡創作描繪 Apple 產品精美硬體設計的圖像。但在某些情況下，沒有足夠的空間容納複雜的圖示，我需要改用簡單的符號。
在某些情況下，圖示可能過於擬真而無法傳達預期的訊息。例如，現代 Mac 的 SSD 固態硬碟基本上只是一些微小的記憶體晶片。但我仍然在 Sensei 中使用傳統的旋轉硬碟圖示，因為那是使用者熟悉的圖示。
Apple 原版電池圖示與 Oskar 的 Sketch 插圖並排比較。
對於想要開始創作更多擬真設計（例如上面的電池）的設計師，你能提供哪些快速技巧？你會推薦哪些特定的 Sketch 工具或技術？
我會說，即使你並非追求高度擬真的設計，你也應該研究該事物在現實中的呈現方式。如果是硬體，它有哪些形狀？有哪些顏色？光線如何反射在其不同的部位？你會如何用文字描述它？一旦你掌握了基本要素，接下來就是利用陰影和漸層來達到逼真的效果。而這通常需要大量的嘗試和錯誤。
即使你並非追求高度擬真的設計，你也應該研究該事物在現實中的呈現方式。
你為什麼喜歡用 Sketch 來做擬真設計？
我認為 Sketch 真正掌握了設計的基礎，對我來說，這些基礎包括向量編輯、遮罩、陰影和顏色。這些聽起來都很簡單，但它們共同構成了創造高品質設計所需的工具組。因為 Sketch 讓這些功能使用起來非常容易，我發現它更容易上手，而且我經常使用 Sketch 比其他類似工具獲得更好的成果。
我認為 Sketch 真正掌握了設計的基礎，對我來說，這些基礎包括向量編輯、遮罩、陰影和顏色。這些聽起來都很簡單，但它們共同構成了創造高品質設計所需的工具組。
這裡有一些 Oskar 使用 Sketch 創作的酷炫擬真圖標。
你覺得同時兼顧設計和程式開發的演進很困難嗎？你是如何應對的？
絕對會！身為一名獨立開發者，你必須身兼數職。有時，我會好幾天都只做設計研究，而這會佔用我寶貴的程式開發時間。我最好的策略是追蹤 Twitter 上許多優秀的開發者和設計師，這樣我就能隨時掌握兩個領域的最新趨勢。
從程式設計師的角度來看，你喜歡 Sketch 的哪些方面？
作為一名 Mac 開發者，我非常欣賞 Sketch 原生的使用體驗。它比其他工具反應更靈敏，效能也更好。但在功能方面，我最喜歡的是「符號」。
使用「符號」設計功能非常強大，你可以建立一個完整的設計系統來支援你的設計。我認為用這種方式思考你的使用者介面元件很有幫助，因為這也正是程式設計方面的最佳實務。
這裡再次介紹 Oskar 如何使用「符號」，這在他準備開始程式開發時節省了大量的時間。
你會給剛入門且需要自己設計的年輕程式設計師什麼建議？
即使我現在已經在 Sketch 上花了無數個小時，我仍然不認為自己是一位設計師。我製作數位產品，而製作優良產品的一部分就是做出好的設計。我認為「必須天生具有設計才能才能成為好的設計師」是一種誤解；設計和程式開發一樣，是一種後天習得的技能。
我看到許多其他獨立開發者，他們是很棒的程式設計師，但不認為自己是設計師，所以他們甚至不敢嘗試設計。我想說的是，如果你認真想打造一個很棒的產品，你也應該認真學習設計。這可能是一段漫長的旅程，但從長遠來看絕對值得。
我看到許多其他獨立開發者，他們是很棒的程式設計師，但不認為自己是設計師，所以他們甚至不敢嘗試設計。我想說的是，如果你認真想打造一個很棒的產品，你也應該認真學習設計。
你是否在 Sketch 中開發了很棒的產品？使用 Sketch 創作了藝術傑作？與我們分享，我們可能會在下一個 #MadeWithSketch 貼文中推薦你。
