Apple在2020年的WWDC發表了全新的iOS14，此更新將包含了Home Screen的新功能— Widget。沒有看過WWDC的朋友，這個功能簡單的解釋就是app icon不再只有一個圖標，許多資訊現在可以直接在這個進化版的app icon—”Widget”上呈現，讓使用者原本要進入app內才能完成的任務，現在在home screen上即可完成。這說明了設計師與開發者在未來可以考量使用者需求，將最重要的資訊”surface”(表面化)到Home Screen上。Widget更是一個跨iPhone、iPad以及Mac的全新Feature，所以了解如何設計一個好的widget是非常重要的。在WWDC中Apple的Human Interface Designer提出Widget的設計原則，以下來淺談一下我自己的筆記。
Widget設計時分為兩個思考階段。Ideation與Creation。Ideation階段提供了大方向資訊設計的處理，而Creation階段則在視覺與互動細節上提供了設計的指導方針。
Ideation: Principles, Editing, Multiples
Widget設計的首要重點是資訊。設計師需要了解到底什麼資訊對於自己App的使用者來說是最重要的，再將這些資訊surface到widget上面。Apple提供的3個Principles為Personal、Informational、Contextual。
Personal的資訊講求呈現私人資訊以提供使用者與App情感上的連結。例如照片app會直接在widget上呈現使用者的照片。Informational是在說將最重要的資訊向上移動，達成所謂”Glanceable”：使用者可以一眼就瞥見所有最需要的資訊以減少使用者點擊進入App中的麻煩。Contextual的資訊則可以讓使用者感受到自己的下一步被神奇地預測了，此即Contextual Design一書中所說的”Direct into Action”。(當然Smart Stack的功能已經為不同的Widgets提供了contextual prediction，這邊所討論的是指在同一個App的widget中如何選擇需要提供的資訊。) 天氣這個app提供了一個很棒的contexual實例。在還沒下雨時，App提供每一小時的天氣狀況。然而下雨後，因為使用者可能會最在乎什麼時候雨會停止，所以提供每分鐘的雨量強度的資訊。
在思考的時候可能會發現這三個原則會有重疊的現象，這是沒有關係的。Design Principle提供設計的方針，非黑即白的定義分野並不是我們在這邊的主要目的。
接下來便可開始思考我們要提供給使用者多大的自由度去呈現(Editing)他們的widget。最直覺的例子就是在天氣、時間中，設計師會提供地點給使用者做選擇。在此iOS又提供了「單一App多Widget」的功能。例如，使用者可以同時製作兩個時鐘widget，而分別呈現不同時區的時間。iOS的這個設計幫設計師減輕了很多負擔。試想，如果要在同一個widget上面呈現多個地區的天氣，那會是視覺上很大的挑戰。
最後則思考是否有需要提供不同種的widget。例如股市App提供多支股票以及單一股票的兩種設計。
Creation: Size & Interactions, Content & Personality, Patterns
首先說明Deep Link。所謂deep link，是指當使用者點擊widget上的資訊時，直接將使用者帶到該資訊在App中所存放的位置。例如在使用者點擊新聞的widget時，Widget上正好呈現某特定新聞，App會直接將使用者帶到該則新聞。
Widget的尺寸上提供了Small、Medium、Large三種。而不同的尺寸也提供了不同數量的Tap Target：Small widget只提供一個Tap Target，而另外兩個較大尺寸則提供了Multiple Tap Targets。前面所說的deep link概念就會在不同的Tap Target中發揮作用。
例如在一個新聞的Medium widget中，使用者有多個新聞的Tap Target可以點擊，而每一個Tap Target都會deep link到該新聞。
Tap Target的Layout呈現方式(Target Style)則有三種：Fill Style、Cell Style、Content Style。Fill Style是我們目前最直覺的：點擊app icon、進入App，沒有別的互動結果。每一個small widget都是使用fill style，亦即前面所說的Small Widget只提供一個Tap Target。Cell Style和Content Style則提供了多個資訊的進入點。當資訊屬性不大相同時，我們可以使用Cell Style，例如以下Files的widget。（Cell Style和Content Style使用的情形與選擇我並不太肯定，希望有人能跟我解釋或討論）
決定了尺寸和Tap Target的排版後，開始思考這個app的最主要價值(Content & Personality)：”What are people looking for when they launch my app?”。這邊我覺得有點怪怪的，前面都已經在思考資訊的了，為何會到這個階段突然又問了一次這個問題呢？不過設計流程常常不是那麼美好，通常極為混亂，所以我想他們可能是在提醒設計師思考視覺的時候同時要去思考資訊的意思。總而言之這個階段是從整體的app中提取出視覺元素並把它放到widget上面呈現，同時思考資訊的架構。
而同一個app、不同大小的widget layout有兩種design patterns。一種是使用相同的Layout，另外一種是使用不同的layout，講起來像屁話不過還是要思考使用不同layout的目的。另外不能直接將small widget放大就說這是較大尺寸的widget。要好好思考不同尺寸下可以放下哪些不同的資訊，而非單純的放大widget。如果真的沒有可以放的資訊，那就不要硬是提供較大的widget給使用者使用，提供所有尺寸的widget並不是必須的。
最後Patterns的部分，Apple提供了一些layout pattern的範例給大家參考。可以作為設計的參考點。
接下來一系列在像素尺度上的dos&don’ts我就不用圖片說明，有興趣的朋友可以點入影片參考，Apple的視覺化解說非常清晰明瞭，不懂英文的我想應該也能大致理解。這邊我就用簡單幾句筆記帶過：Widget Layout需保持16px的margin，圖形資訊則可以使用較緊密的11px margin、margin在不同尺寸的widget中須保持一制性、使用SF Pro字體（如果真的必須使用，我也不知道怎麼辦，整個Home Screen應該會爛掉）、考量夜間模式的widget設計，設計夜間模式時保持與app內一致的色彩設計、設計無資訊時的模式、只有當app屬於content aggregator時才能使用logo於右上角、禁止將app icon和app name放在widget內、不可在widget上使用文字與使用者對話或指導使用者，如必要需使用圖像傳遞資訊、時間資訊不可以使用last updated或last checked。
其中我覺得最喜歡的是這個do&don’t：圖形資訊的圓角需要與widget圓角共圓心。這個規定讓我感受到Apple對設計細節的要求，所以很喜歡，雖然我不知道背後的設計原則。麻煩了解背後原理的朋友告訴我⋯⋯謝謝。除了共圓心之外，不同尺寸的螢幕會需要不同radius的圓角，不過似乎Swift UI container可以在開發上達成這個設計需求，所以應該不用太擔心。
結
究竟widget發布後，資訊會變得更混亂還是更唾手可得、這會是一場災難抑或是一個極佳體驗，在今年秋季iOS14發布後就可以揭曉。另外我也非常期待看到各種不同的App會怎麼樣去設計他們的widget，原本已經爭奇鬥豔的Home Screen現在又多了一個項目來衡量一個App的設計品質。然而一個好的widget設計對於一個App的商業影響有多大、投資的設計與開發成本又是否值得，這些都是值得思考的地方。