用 Sketch 和 Xcode 设计的第二款 App

这次我设计的 App 叫「DoDid」,是一款 to do 类的 App. 在这个过程中使用到的一些工具如下：

• Sketch
• Xcode
• Iconjar
• Google
• 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 的按钮基本上都采用的圆形。

calendar

---

以上是「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 的交互视频：

http://v.qq.com/page/n/f/s/n0185y0otfs.html