導讀：Matt Gemmell是歐美知名iOS/Mac開發人員，現居蘇格蘭愛丁堡。Matt圍繞他近期釋出的一個開源iOS控制元件MGTileMenu寫了兩篇博文。在驚歎國外頂尖開發人員對細節精益求精的專業態度之餘，我們是否也應該反思國內從業人員低水平重複的現狀與深層次原因？
很高興宣佈我的又一個開源iOS控制元件MGTileMenu釋出了。這個控制元件基於iOS 5開發，使用了ARC（譯者注：Automatic Reference Counting），能提供具有關聯性、基於磚形按鈕的彈出式選單，對Retina和非Retian螢幕都有很好的支援，同時還支援VoiceOver。MGTileMenu最初是為iPad應用開發設計的，但把它用在iPhone和iPod Touch應用裡也是可以的。
你可以基於署名授權許可證（Attribution License）免費使用MGTileMenu，也可以付點費用而免去署名授權協議的限制。MGTileMenu沒有使用其它第三方資源。在Retina解析度下，看起來是這個樣子：
彈出選單每一頁會顯示最多5個圖示，而第六個省略號圖示用來引出下一頁的按鈕，你可以擁有任意數量的頁面。這裡有一個demo的視訊：
注意翻頁按鈕（…）的位置可以通過設定MGTileMenu的左右手使用習慣屬性而改變，同時這個控制元件還考慮的對使用者手指遮擋區域的留白處理。
MGTileMenu提供了委託協議（delegate protocol）以方便開發者對按鈕圖示、背景（支援圖示、漸變色、純色）的深度定製。
MGTileMenu同時還丟擲了各種通知訊息（notifications）以方便開發者呼叫。當然，為了獲得最佳的使用者體驗，我在開發這個控制元件的時候大量使用了Core Animation技術。
我本著方便開發者呼叫的初衷設計了MGTileMenu控制元件：它的預設介面和操控表現已經可以滿足大部分場合的呼叫。此外控制元件的一些智慧化處理也將降低呼叫者的開發量，例如：它會根據開發者告之的螢幕顯示位置，結合螢幕邊際距離、裝置旋轉能因素，綜合計算後安排選單最終顯示位置，以避免控制元件顯示在螢幕外等尷尬的結果。隨控制元件附帶的view controller也是按照方便使用的原則設計了屬性、方法及委託協議。總之，你會發現整合MGTileMenu到你的專案中是很容易的一件事兒。
在程式碼資源裡我還放了一個demo程式，用來展示如果配置生成一個例子選單。執行這個demo後，在螢幕任意位置雙擊可以喚出MGTileMenu選單。當然，在你自己的應用開發中，你可以通過單次觸碰等更自然的方法喚出MGTileMenu選單。
許可證及捐贈
MGTileMenu是基於署名授權協議（Attribution License）釋出的。同我的其它程式碼一樣，我開發並免費釋出這個控制元件是為了給iOS及Mac開發社群提供一點貢獻，我本人很自豪成為這個社群裡的一員。
為了支援這個控制元件的不斷更新（同時為了支援我的部落格），請考慮捐贈或者購買非署名授權許可證。
你可以通過下面的捐贈按鈕，或者向我的PayPal賬號 (matt.gemmell at Gmail)捐助，我會非常感謝，並通過未來的部落格文章以及程式碼做出回報。
如果你不想在你的應用中提供本控制元件的授權署名資訊，請通過我的線上許可證商店購買非署名授權協議。感謝支援！
下載程式碼
支援，bug及功能請求
我不承諾對這個控制元件提供任何支援。哥們，遇到問題你只有靠自己了。當然，你可以通過github上的issue tracker提交新功能請求。如果想提交bug報告，也請通過github的issue tracker，請務必同時附上你對bug的分析及修復方案（要原始碼哦）。我想，作為使用者，你一定是一個有能力自行分析並修復問題的合格開發者，對不？同時歡迎在github上提交pull請求或者補丁申請。
再囉嗦一次：請不要提交不含分析及推薦修復程式碼的bug報告！
聊聊MGTileMenu的設計
設計MGTileMenu的初衷是為了發掘一種新的UI/UX方式，當使用者觸控iPad螢幕後，提供具有關聯性的可選項或者工具按鈕。我在開發一個應用的時候設計了這個控制元件，後來我覺得有必要把這個控制元件單獨釋出出來。
在此之前，我也做過一些嘗試，比如為每一個手指分配工具選項, 但是這次我想做的更加自然，使用者體驗更加有質感一些。我把最初的想法畫在本子上。
不難看出，最終的成品和上面的草圖差別不大。就這樣，憑著一個草圖和聊聊幾筆註釋，我開啟Photoshop開始了第一版設計：
請注意，我把每一個選單按鈕方塊的尺寸設計得和iPad螢幕上的應用圖示一樣大，這樣可以給使用者提供一個使用習慣上的延續性。但是，最初我在PS裡面繪製按鈕的時候，只是憑感覺拉了一個尺寸，結果正好是應用圖示的大小，這完全是一個美妙的巧合！
看著第一版設計，我總感覺少了點什麼：這些散佈的按鈕應該用什麼東西把他們聯合起來？很自然的，我想到了在按鈕後面疊加一層皮膚：
可是，圓形的背板看起來太單薄了，它承託不出前面按鈕矩陣的氣場；那些輻射狀的連線線看起來也很雜亂，使得功能按鈕和關閉按鈕直接的關係變很令人費解。這些線必須幹掉。
接下來我用了一個可以完全包住所有按鈕的圓角背板，感覺還不賴，但是少了幾分活力，多了幾分沉重。我理想中的背板應該更具動感，以迎合之後我通過Core Animation編寫的動畫效果的氣質。
所以我把圓角背板的尺寸裁剪了些許，這樣既整合了四周的按鈕，又為中心的關閉按鈕提供的背景支撐。事實上在我看來，懸於背板邊緣的按鈕佈局多了幾分活潑和有趣的意味。
在最終設計稿基礎上，我通過程式碼實現了一切。下面是一個執行的例項，呈現的是預設顯示風格：
下面是使用一些定製化背景的效果。
我個人對最終的效果很滿意。我想這是一個靈活、漂亮、吸引人的控制元件。接下來讓我們看看使用者互動設計及動畫效果。
使用者互動設計
設計伊始，我十分渴望能在使用者手勢操作上做出一些亮點。當我把自己的手放在iPad螢幕上，我發現我們會自然的把手向內側彎曲，這使得我們的手指在螢幕上的滑動路徑是斜向的而不是直上直下的。
因此，在這個控制元件的左下角（針對左撇子使用者）或者右下角（針對右撇子使用者），我安排了一些的留白，這裡不能安排按鈕，以避免被使用者的手遮擋，事實上為了得到最佳效果，我留出了兩個按鈕的留白位置。
這樣的留白設計同時也減少了在一頁中可顯示的最大按鈕數量，這其實是件好事，我希望以此激發開發者在他們的應用中減少可選操作項，以體現簡潔美。
注意，在為左撇子使用者佈局按鈕順序的時候，我不是簡簡單單把右撇子的按鈕排序映象反轉過去的哦。因為我不認為左撇子的閱讀、理解順序也是反著的。當然通過委託協議你依然可以堅持翻轉按鈕排序如果你認為有必要的話。
好了，談了這麼多靜態的佈局和外觀，現在我們看看動畫效果。基於前面談到的各種因素，我立刻想到我們需要以下幾處動畫效果：
1. 選單的顯示和消失。
2. 選單換頁時。選單的顯示消失動畫很容易想：出現的時候是一個放大加淡入的效果，消失的時候是一個縮小加淡出的效果。難度在從一頁選單切換到下一頁選單的處理，因為同時要替換頁面上所有的按鈕。
基於按鈕的佈局，因為它們看起來都是浮動在背板邊緣的，我想到的動畫效果是：當使用者選擇換頁的時候，四周的按鈕被吸收到中心位置，替換成下一頁按鈕的圖示，在釋放回到原位。
我的最初實現看起來很傻很天真，我用慢動作回放一下動畫效果給你們看一下：
同步的吸放動畫效果
後來我在每個按鈕的動畫效果前都安排的一些滯後，這樣出來的效果就好多了：
布進式的吸放動畫效果
而按鈕的替換我用了基本的淡入淡出效果，這樣的替換看起來不那麼唐突。
上面演示的動畫是最終版本的效果。實際上，一開始這些按鈕的動畫效果是按照從左到右、自上而下的順序逐個激發的：
可惜這種激發順序產生的綜合效果看起來比較雜亂，尤其是從上一行最右邊按鈕到下一行最左邊按鈕的過渡很不協調。後來我嘗試了從翻頁按鈕（…）順時針激發按鈕動畫，因為…按鈕是使用者觸發整個切換場景的開端。所以最終的效果就是自翻頁按鈕（…）上面的那個按鈕開始，順時針繞一圈，逐個按鈕吸收、替換、釋放。如果配置成左撇子使用者，則是反順序的。
動畫處理上畫了我一點時間，但是看著最終的效果還是覺得很值得。
當然，內部程式碼以及委託協議裡面對按鈕的排序還是基於從左到右、自上而下的自然邏輯，這裡我就不折騰呼叫控制元件的程式設計師了。
後記
我個人很享受制作MGTileMenu的過程，同樣我希望這個東西對你有所幫助，包括這篇文章 — 無論是設計還是編碼，我注入的全是愛與激情。 不厭其煩的再次插播廣告，請考慮通過捐贈或者購買非署名許可證的方式支援我的程式碼和部落格。
另外，我透過MGTileMenu開發過程的另外一個視角寫了另外一篇部落格： API Design, and why I designed it the way I did（譯者注：此篇稍後翻譯） 。對於開發者來說，API就是他們的使用者介面。在那篇博文裡，我以MGTileMenu為例，闡述了自己對iOS及OS X元件開發的一些觀點。
預知更多資訊，請粉我的推 (@mattgemmell). Enjoy MGTileMenu!
英文原文：Matt Gemmell 編譯：伯樂線上 – 陳遠
【如需轉載，請標註並保留原文連結、譯文連結和譯者等資訊，謝謝合作！】