用 Sketch 和 Xcode 设计的第二款 App
这次我设计的 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 的按钮基本上都采用的圆形。
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 的交互视频：
