隨2020年6月Apple推出了iOS 14，這次系統更新後，過去分格一致的桌面多了一些自由度，各路網友、開發者也發展出不少有趣的小工具，例如：利用透明小工具露出桌布、自己排版成喜歡的樣式等等，網路上還有各種範例，有興趣可以自己搜尋～
而如果你要設計一個需進入開發流程的工具該注意什麼呢？以下整理其中的十個細節，繼續往下看吧～
各裝置的大中小版都有固定的尺寸！
從iOS 14開始小工具有了大中小三個版，且各裝置皆有固定的長寬（目前官方僅公開五種機型尺寸），也許因為有了三種版型，他們取消過去小工具可以隨內容變長和下拉伸縮內容的功能。因為這樣的尺寸限制，小工具的功能規劃與設計出圖就有以下兩點需要注意。
- 不能自由的塞功能、刪除功能：以前增加/刪減功能，最多就是小工具變長/變短，但現在因為小工具尺寸已經固定了，若是不刪減欄位的方案，就要考慮該欄位沒有資料時，欄位消失會不會視覺失衡或該欄位要有替代資訊；或是工程師要另外開發多種版型來符合小工具的自由度，那就要考慮專案時程、工程師時程是否可以配合。
- 建議所有尺寸都要以％來設定：小工具有了固定寬高，但基本上各裝置小工具寬高比是非常接近的，為了方便Resize，建議大家要用％來規範間距、元件的尺寸。
小工具的內距規範
官方有規範兩種內距可使用：
- 一般間距 16pt
- 窄版間距 8pt
不過縱觀部分產品的小工具，包含官方在內，似乎還是有出現規範以外的尺寸，因此看起來官方設定是一個參考值而非硬性規定。
小工具的圓角
從官方釋出的Sketch檔案可知，375x812螢幕的小工具圓角設定為Smooth Corners 20pt。我自己量測414x896螢幕截圖的圓角，約為Smooth Corners 23pt上下，看起來不只各裝置尺寸有異之外，圓角也會隨裝置動態調整。
如果你的小工具上的元件有圓角（例如：apple內建的地圖小工具），在請工程師開發時建議要套用官方的工具，好讓元件圓角也能隨小工具的圓角一起動態調整，維持好的視覺感受。
可以自由的定義背景顏色
iOS 14前的小工具，僅能使用官方帶有Blur的固定背景，這次iOS 14解開了這個束縛，開放讓大家自定義小工具背景色，除了讓產品可以展現各自產品特色之外，也有部分app推出讓使用者自己配色、放照片在小工具上、讓小工具消失好配合使用者桌布的服務，讓原本過於一致的iOS系統多了很多自由度和可玩性。
盡量避免出現Logo、App icon
官方建議小工具上盡量不要出現產品Logo或App icon，但當你的小工具上顯示的資料為多個來源的資料時，可以在小工具右上角顯示App icon或資料來源。 多個來源的例子類似，你的App是一個收集各家新聞台新聞的工具，而你的小工具的功能是顯示『今日焦點新聞』，上面會顯示來自各家新聞台的焦點新聞，這就會有資料來自多重來源的狀況。（註：求助英文好的友人才得出這個結論，若有缺漏或不正確的解釋再請提出～）
總之，這項建議也不是一項硬性規範，設計者可以自行斟酌。不過在實作上，我會建議如果你的產品功能，很容易跟其他產品重複的話，為了方便使用者辨別正在使用工具，加上產品圖標會是一個比較好的選擇。
設定亮、暗模式
為符合系統亮、暗兩種模式，官方建議設計者要設定兩種模式下的顯示方式。但如果你的產品剛好有條碼、載具等條碼區域，要記得該區域還是要維持高對比、便於掃碼的狀態。
設定佔位符內容
當小工具在更新資料或暫時沒有或暫時沒有資料時，可以用圓形、方形的佔位符代替圖片或文字的位置，讓使用者更有效的理解小工具上可能會有什麼內容和顯示方式。
記得考量其他狀態
小工具上的部分功能，可能會因為未升級、未登入等狀況而無法顯示資料，當你的小工具上會有類似的狀況時，也要一併將這些狀態納入設計版位的考量中。
內容更新
雖然小工具上的內容並不會隨時更新，但你還是可以為你的小工具設定一個抓取新資料的時間區間。而實作上，如果有些資料你想要在特定時間顯示在小工具上，也可以對該筆資料設定一個特定的時間更新上去，確保使用者接收到我們希望他看到的新資訊。
為小工具加上描述文字
最後，要上線時，為了方便使用者更理解你的小工具提供的功能，可以給他一些簡短清楚的說明文字和名稱。
以上十點是我實作後整理出來認為可以稍加注意的，除了以上十點之外，官方文件上還羅列了其他小工具的設計建議，需要的人可以再去查閱～
對文章的內容有問題或想討論的話可以留言 🥳
