手把手教你刻 iOS 鍵盤
這次閒來沒事，教大家怎麼模擬出 iOS 鍵盤打字的手感，以下範例請在手機上觀賞，Web保證出問題
線上範例
https://i927th.axshare.com/#p=keyboard&c=2
實作範例要點有下面四個
1.模擬手機打字
2.FontMapping
3.Float小按鈕
4.切換大小寫
感謝 #UXabc 素材提供
首先我們來看一下完成後的圖層結構，一層一層往上寫好就好，重複步驟很多
從最底層(最不重要)的開始就是鍵盤底(Rectangle)以及一些不會用到的按鈕，這些按鈕建議使用圖檔完成貼上即可，不影響操作
接下來我們開始製作按鈕點擊操作效果的部份，也就是當按下一個按鍵後會出現浮動的放大版本也就如下圖
這部份工作較為繁雜，複製貼上會很快XD！我們必須先把形狀兩個都描繪出來，小的按鍵直接刻出來其他參數如下圖，中間的字母直接打就好
浮動比較麻煩，不過幸好現在支援鋼筆，完全方便，同樣打上文字，參數一樣貼在下面給大家參考
接下來要讓按鈕動起來了，我們先將兩個按鈕對齊底部與中央，大圖Set Hidden，動作完全做在小按鈕上面，分別設定 OnMouseDown 顯示大圖 OnMouseUp 隱藏大圖，這兩個動作分別偵測按下去與放開，這樣我們就完成鍵盤按鈕的設計了，記得 Group 起來，複製貼上完成剩下的按鍵吧！
下一步，整理 FontMapping ，這個範例把鍵盤分為三排應該很清楚，由左至右由下而上，排列好後就會像下圖這樣，這邊沒有一定要怎麼分類，因為動作不會互相干擾，好整理就好
完成後我們就完成鍵盤基本架構了！可以嘗試在手機上測試效果！
區分大小寫其實不難，在剛剛做好的鍵盤複製一份，把字改為另一種寫法，製作 Dynamic Panel 一層放大寫、一層放小寫如下
大小寫切換按鈕我們加入 Interaction Styles
這裡偷吃步一下用換圖的方式，在 selected 狀態匯入圖檔，這樣一來我們可以明顯看到按鍵切換狀態
回到畫布，在剛剛的大小寫切換按鈕上加上同樣大小的 HotSpot ，加入 Click 動作。
- 加入 Set Panel State 切換 Next 並勾選 Wrap from last to first，確保大寫切到大寫小寫切到小寫；
2. 加入 Set Selected 對應到剛剛的大小寫切換按鈕參數 Toggle狀態
設定完成後就可以測試大小寫的正確切換與按鈕狀態的改變
最後如果很尬意這個元件，可以把它加入自己的 Widget 庫裡，在未來Prototyping 時候，給老闆們法喜一下
如果喜歡 Axure Geek 的內容，請用 👏 給我們支持與鼓勵，能分享更好！
最多可以 👏 50下哦！