去年感恩节的时候,我和 Ray 突然谈起能不能在 Today Widget 里面快速开关 VPN 的问题,我们希望做一款极致体验的 VPN 产品,送给朋友和家人以表达感谢
(不要以为我们从去年一直搞到现在,其实两天开发+四天打磨,两个月后才提交,今天才过审核而已……)。
之前 iOS 8 的 Personal VPN 相关技术已经被我们完全攻克,所以整体来说,这个 App 剩下的似乎只是设计和体验的问题。
在进行动画前,我们先要理解 UIView 和 CALayer 的关系。
CALayer 是 iOS 系统绘制图形的底层类,UIView 是基于 CALayer 的上层类,具有 CALayer 的全部功能,并且多了对用户交互事件的响应能力。
而 iOS 主要有两种动画方式,一种是底层一些的 Core Animation 直接针对 CALayer,一种是顶层一些的 UIKit 针对 UIView,UIKit 使用起来要方便一些,但是支持的参数没有 Core Animation 多,可定制性也会差一些。
我想这可能是一切魔法和困惑的开始, iOS App 从哪里开始?
传统的 Objective-C 项目要更底层一些,但是从 Swift 开始,已经隐藏了部分底层细节。既然我们用 Swift 开始开发生涯,那此刻对我们来说,了解那么多徒增困扰,不如先把鸭子煮熟吧。
你可以在 Github 找到相关代码。
人机交互是设计中最复杂的一部分,因为往往需求和现实总是矛盾的。对程序而言,人们总是希望功能强大,但是又要使用简单。或者既要设计简洁,又想在里面体现更多的内容。
对于设计师而言,最大的问题莫过于人们认知的偏差,总是有些非常简单的设计,最终却在用户手里变成了要 Google 一下才能知道的技巧。
在正式开始交互设计之前,不妨先了解一下人脑是如何处理交互的。
浏览主要涉及到三个方面,查询,分类,展示。
存了这么多日记,早就想读取出来看看了。为了看到保存的日记,我们需要依次解决:
在文字竖排方面,我原本是打算用 CoreText 来实现,源码里有一个 DiaryVerticalTextView,就是竖排效果,但是考虑到 UIWebView 可以简单灵活的实现,我们还是采用 UIWebView 来搞定这个问题。
在使用 WebView 之前,我们需要先实现这个网页的样式。
写网页,推荐编辑器 Atom。
这两天和 Ray 一起吃拉面的时候,除了关注那位可爱服务员之外,他还煞有介事的跟我讲 —— “我发现了一个超屌的设计师,balabala”,其实时至今日我已经不知道如何定义超屌的设计师这个概念了,就像超屌的开发者一样,这个问题探究到最后只会变成一句感叹——人类最屌竟然只能做成这个样子。
不过,还是捧捧 Ray 的场啦,我问道 “是何许人也?”。
他拿过来几乎没有信号的 iPad 给我看,你看这个人,这个人,目光从 Safari 地址栏的 .cn 这个坑爹的后缀扫过后,赫然发现一个完全不知道的名字 Marcus Eckert。 虽然不知道名字,但是接下来的内容绝对是如雷贯耳——Wide Sky。
现在你已经了解了营销的基本方法和思路,那么你可以先找一个小群体测试自己的点子。无论是积极的反馈还是令人沮丧的反馈,都可以帮助你进一步改进产品。
App 发布之前内测是必须的,一般人可能以为自己拿几个手机测试一下还不就得了??但是事实远不是这样,由于你对自己的 App 的行为非常捻熟,而且使用场景有限,设备有限,导致的结果就是——温室里的花朵测不出 Bug。
在用户中也存在一种人,总是能在你以为完美的版本里,找出重大的 Bug。
在「在年之外」的一章中,我们已经可以显示出年份,接下来我们需要实现点击年后月份的显示,月和年的界面并没有很大区别,只是字体从康熙字典换成了文悦古仿宋。
当然,此刻点击并没有什么会发生,因为还有一个问题需要回答:当点击的时候,该做什么。
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
我想这可能是一切 Magic 和困惑的开始, iOS App 从哪里开始?传统的 Objective-C 项目要更低层一些,但是从 Swift 开始,已经隐藏了部分底层细节。既然我们用 Swift 开始开发生涯,那此刻对我们来说,了解那么多徒增困扰,不如先把鸭子煮熟吧。
创建第一个 App,这是一个又兴奋又激动的过程,虽然过程中会有很多你不明白的地方,没关系,后面我们会逐一了解。
1.打开 Xcode,点击 Create a new project
以 小记 作为主体的第一本 Producter 到此结束,希望这本书可以帮助你开始产品人的生涯,期望可以在下一本中与你继续探讨新的产品。
最后,要感谢 Ray (@rayps) 为本书设计的封面和官网,或许你可能会讶异——“为什么你不自己做呢?”
独立完成一款好的产品是一种修养,让产品变得更完美是一种艺术。
“工欲善其事,必先利其器。” 现代设计更加注重色彩、比例、形状这些设计语言,因此在开始设计之前,选择一个得心应手的工具尤为重要。
但是,永远不要因为工具的进步放弃对基础知识的了解,会设计和会用设计工具终究是两回事儿。
Photoshop是比较老牌的工具,它有一些过人之处:
第一次总是很特殊的体验。对设计来说,第一次体验可能是尴尬的。有可能是在 Photoshop 里拖曳了几个难看的方框,也可能是在草稿纸上画了一堆歪扭得不成样子的曲线,反反复复,最后只能感叹一句——“算了吧,我果然没什么天赋!”
但是,设计并不是看起来那样坐在桌子前凭空臆想,然后动动鼠标就可以有所产出,也不是一项与在桌子前待多久有关系的活动。设计师往往要以年为单位,让自己沉浸在优秀的设计里,增强自己的设计嗅觉,掌握了大量的设计模式,才能够 最终做出优秀的作品。
设计可以从模仿开始。
小记 我最早的构思是想像 iOS 7 之后的日历一样,以时间为线索,通过纵深层次转换来表现时间的变化,以呈现不同级别的内容。
但是当我开始设计的时候,我突然想为什么要做一个没有特色的东西?为什么日记一定要为大量书写,图文混排而生?
于是在 Sketch 上经过一番尝试,最终,以时间为交互线索,纵书为展现格式的设计诞生了。
可能你已经迫不及待要进行下一部分的开发了,但是且慢!有一件很重要的事情此时需要你来做一下——用 Git 管理你的代码。
Git 是由 Linux 之父 Linus Tovalds 为了更好地管理linux内核开发而创立的分布式版本控制/软件配置管理软件。
简单来说,Git 是一个管理你的代码的历史记录的工具。
在开始复杂的 iOS App 之前,我们先从最简单的 App 熟悉下它是怎么运作的。
如前所述,在开始设计之前,选择一个得心应手的工具非常重要。无数的贴心设计使Sketch无可厚非地成为移动设计的王者,现在,几乎所有的移动端设计师都选择了Sketch。
Sketch 项目的结构分为两级
在这个进阶章节,我们用 Sketch 设计一个展示电影的 App 界面。