這次我設計的 App 叫「DoDid」,是一款 to do 類的 App. 在這個過程中使用到的一些工具如下：
- Sketch
- Xcode
- Iconjar
- Stack Overflow
Logo 形狀的設計安排，采用兩個字母“D”, 前一個代表 Do, 后一個代表 Did, 表示計劃和完成的意思。其中 logo 顏色的黃顏色代表未完成事項，綠色代表已完成事項，Text view 和 Button 的高度也是 44pt. 下圖即是 App 的啟動頁面。
下圖是登錄頁面，與我上一個設計的 App 多了記住賬號選項。
背景是用 Background Blur，得到毛玻璃效果。
下圖是主界面，同樣界面上半黃色部分是未完成事項，下半綠色部分是已經完成事項，其中 to do list 項目用灰色表示，代表歷史沉寂事項。該頁面最頂端的日期點擊后可以跳轉出日歷界面。
點擊列表旁邊的加號后，會出現代表重要事項的“感嘆號”，事項完成后可以勾選“Check”選項，點擊垃圾桶可以在該事項上畫出一道橫線，代表刪除事項。
該頁面底部的菜單選項，點擊后出現 Popover View, 分別可以跳轉到重要事項和退出賬號。該 Menu Button 右邊的加號按鈕點擊后可以彈出新建任務的 Dialog view, 背景有一層 Mask view, 可以突出新建任務框。
下圖是日歷頁面，中間的三列是可以滑動選定日期的，另外這款 App 的按鈕基本上都采用的圓形。
以上是「DoDid」基本的 GUI, 下面紀錄下在 Xcode 的幫助下，使軟件達到好的交互效果。
-
下圖的 GIF 動畫是日歷啟動畫面（由于錄制 GIF 的軟件幀數達不到要求，達不到理想錄制效果）。
之所以考慮用 slide down 的模式向下展開日歷界面，是因為選擇日期的按鈕在頂部，所以這樣的交互動畫符合邏輯。這個需要在 Xcode 里將其 class 命名為 SpringView, Animation 選為 slideDown.
- 接下來是用代碼實現日歷列表的拖動。將三個可拖動的列表創建 UI View.
@IBOutlet weak var date1View: UIView!
@IBOutlet weak var date2View: UIView!
@IBOutlet weak var date3View: UIView!
然后在 Object library 中拖動 Pan Gesture Recognizer 到剛創建的三個 UI View 里。
最后，分別對三個 Pan Gesture Recognizer 創建 IBOutlet 和 IBOutaction.
@IBOutlet var PanRecognizer:UIPanGestureRecognizer!
@IBAction func HandleGesture(sender: AnyObject) {
let location = sender.locationInView(view)
date1View.center = location
}
這樣就可以實現對列表的手動拖動效果了。
- 點擊列表旁邊的加號會顯示出三個按鈕，如下圖。
創建的三個 Button View 可以預先設置 hidden, 再對三個按鈕設置 IBOutlet，對加號按鈕設置 IBOutaction.
@IBOutlet weak var edit1Button: UIButton!
@IBOutlet weak var eButton: UIButton!
@IBOutlet weak var cButton: UIButton!
@IBOutlet weak var tButton: UIButton!
@IBAction func edit1ButtonDidTouch(sender: AnyObject) {
eButton.hidden = false
cButton.hidden = false
tButton.hidden = false
}
- 點擊每個事項可以跳出任務框，點擊框之外的區域可以給任務框加個 fall 的動作。
給 Text View 加上IBOutlet, 任務框之外的 Button 加上 IBAction, 點擊 Button 之后輸出框有 fall 的動作。
@IBOutlet weak var dialogView: DesignableTextView!
@IBAction func backButtonDidTouch(sender: AnyObject) {
dialogView.animation = "fall"
dialogView.animateNext{
self.dismissViewControllerAnimated(true, completion: nil)
}
- 點擊底部的 Menu Button 后會出現 Popover View.
首先給跳出的對話框下面加上 UI View（背景色設為 Clear Color, 并 hidden）, 然后從 Library 拖物件置 UI View 上。
這部分代碼和上面加號按鈕代碼相似。
- 現在點擊底部右下角的 Button, 可以新建任務。任務框從底部彈出，動作是 Squeeze Up.
給 TextView 加上 Class: DesignableTextView, Animation 設置為 Squeeze up.
以上就是這款 App 的基本 UI 和交互動作，還有很多需要完善改進的地方。
PS. 本文中所用的 GIF 圖片錄制的效果不理想，掉幀嚴重，大家請見諒。如果能直接貼視頻就好了～
以下鏈接是 DoDid App 的交互視頻：
