摸索APP外包开发之精品App问世的全历程(二)

发布时间:2020-01-17 05:58 | 浏览人次:浏览次数

这篇文章期望向你共享的是:假如你想开发一款App,而你请不起1个详尽的开发团队,那么你怎样依靠APP开发外包企业来做好这件事;你怎样去揽下立项、原型、系统、UI、交互,这些所有的工作,几乎没有任何应对面的沟通,一切想法都通过文档来跟外包交流,更终拿到1个跟你的预计分毫不差的精品App。

由于字数过多,这篇文章分成了上、下两篇来发表。你目前看见的是下篇。(上篇《摸索APP外包开发之精品App问世的全历程(一)》)
摸索APP外包开发之精品App问世的全历程(二)

UI设计/切图/适配文档:左右脑时候开工来制作拟物UI

由于是拟物设计且侧重颜值,「the App」的UI制作将会消耗成吨的开发精力,既包括我要1个人肩负所有的UI设计工作,也包括要消耗大批iOS外包开发的Manday——我没有契机犯错。

我没有条件去盯着开发人员的电脑,告诉他:“这里再往上1pt”、“这个按钮再往右一点”、“iPhone 6 Plus的启动icon再调大一点”——我必须在开发之前完全讲清白所有的问题,把每张切图、每个排版细节、每个机型的适配形式都思考进去——只通过一套文档,之间几乎没有任何交流,开发人员只出1个版本,就让「the App」的UI在所有iOS机型上完美展现。

正式做UI之前,首先要做每张页面的概念图,准则很简单——尽也许地偷懒,有些不主要的页面你甚至能够直接拿其他人的截屏来替代。我见过许多UI设计师在设计概念图时很纠结,来来回回对齐不一样的图层,统一各种字号或颜色,这样的劳动除了让你多加班之外毫无意义。做概念图更紧要的就是“潇洒”二字。

不要有太多顾虑。当我做页面B的同时,我无需去思考它的美术风格能否要跟刚刚做的页面A统一起来,因为说不定我在页面B上忽然有了非常好的设计灵感,做出了比页面A更美观的界面,那么反过来我重做页面A就是了。把每个页面当做1个独立的平面稿来设计,这将大大节约你找到更优设计方案的时间。

在几天的概念设计以后,我发现其中两个页面比较刻意思。第1个是文件夹页面,这个页面是会员在主页(上图右)点击某个文件夹以后跳转进来的。我发现,假如让文件夹页面成为墙壁的扩展(上图左)会大刻意思——会员在主页点击某个文件夹以后,其它的文件夹直接消失,整个墙壁(包括光照)直接往右边平移,挪出左边的空间,然后文件夹下面的纸张统统飞到右边,形成文件列表。在我跟智超讨论以后,这套炫酷的转场成效被临时搁置,因为我肩负不起它所消耗的Manday,然而这并不影响我把文件夹页面明确成这样的设计,因为它更符合故事的情境。

第二个让我感兴趣的是会员写东西的页面,我当时找来了许多主流日记、记事App的写作界面截屏,发现其中那些比较出色的UI都会有几个共性:

文字肯定要大,行间距和段间距也要大,这样你就算只写几十个字也大有造就感,仿佛是写了一篇大作。

光标不可以用默认的,要用大的,闪烁起来要有呼吸感,而且更好不要被行高限制住,要往下扩展到下一行的顶端,这样能激起人的写作欲望。

更常用的按钮不要摆在顶端,而是摆在键盘上面,而其中更主要的那个按钮要摆在右边,这样写完了以后不用抬手,右手大拇指轻松就能点到保存(老罗调研过,手契机员中,右手为主的会员比率尽管低于生活中右手为主的人,但还是轻松超出一半)

所以,我就截了几张UI放进设计稿里,简单拼凑了一下,照葫芦画瓢做了个左图中的UI,顺带把键盘改为跟上半部分统一的黑白色(iOS源生输入法能够定制颜色)。

我觉得这样的写作页面没有什么需要多此一举的地方了,再减1个元素就影响使用,再加1个元素就导致臃肿,那么目前我手上有2个页面的UI概念图都满足了我要的标准。

但问题是,它们1个是纯拟物,1个是纯扁平,这要怎样是好?经过考虑,尽管「the App」强调的是拟物,可是我能够把“拟物层”和“操作层”做成两种对撞的风格——所相关于纸张、墙壁这些“物理环境”的设计都做成纯拟物,而所有交互的内容都做成纯扁平的,这样看上去成效更好。假如我一根筋地去把所有的交互界面都做成拟物的,反倒会淡化纸张和墙壁的拟物感。所以我决定把“操作层”做成扁平的,让薄如蝉翼的“操作层”漂浮在厚重的“拟物层”之上,就会在带来沉浸感过程中,给人一种操作起来很轻便的感觉。

按照这种设计思路,扁平和拟物的风格不需要强行统一,反倒是比照越强烈成效越好,这就让我面对1个问题:如何的扁平设计是更纯粹的

你认为哪个扁平设计更纯粹?

尽管颜色看上去很缤纷,但除了不一样透明度的白色之外,事实上只有黄、蓝对撞色。

所有的图形,甚至包括字体,全是圆角的,圆角的半径也基础是一样的。

字体看上去许多,但事实上字体和字号都只有一种,看上去多只是由于颜色或加粗带来的成效。

当时研究了许多例子,发现出色的扁平化设计,也不例外能够用1个看法来综合:能用一种字号解决的,不要用两种字号;能用一种颜色解决的,不要用两种颜色……所以我就带着这种思路从新梳理了一下其它的概念图(这就是为什么不要那么早明确设计标准),基础形成了「the App」在“扁平化”部分的设计规范:

将所有系统字简化为“大”、“小”字

1、两种字体

(1)系统默认字体

除了会员自己写的文字内容需要单独来制定字号、行距、段间距之外(因为这个内容更主要,需要区别设计),其余情形尽可能用2种规格来解决(见上图),那便是“大字”和“小字”。在设计规范中,我分别定义了两种字体的字号、行距、段间距。

拥有它们具体规格的伎俩很简单,就是去复刻那些出色App界面中的字体,把它们软件到你设计稿中的若干个重要页面中,输出成几个主要机型的成效图,分别放到这些机子中去看实际成效,频繁微调几次就基础搞定了。在这个历程中,不要像许多人那样,总是填上那些排版更好看的文字内容,而是要尽也许让文字的排版丑陋。比如,一行字多出1个字跑到第二行,持续两次空行,持续敲许数个句号……你永远没法预测到会员会输入什么文字,假如你能在文字更不合适排版的情形下,也可以保障排版看得过去,那么你设立的字体才是更有适应力的。

用“刻宋”体作为交互类字体,提升UI级别

(2)自带字体

这是因为我发现,之所以许多中文App用同样的设计形式来做扁平化UI却比然而欧美,很大限度上是由于字体的丑陋。

扁平化设计中,字体是很重要的视觉元素——英语App能够随随意便就嵌入1个几十k的字体,而中文App嵌入1个字体就意味着多几M的大小,而且简体字体制作成本超大(5000数个常用字),做出来也很少人有付费意识去买正版,所以精雕细琢的字体也很少。于是我选购了不可多得非常耐看的造字工房的“刻宋”体,除了一些非常主要的标题之外(比如会员自己起的标题),我将尽可能让它只得到1个更合适手指点击的字号,用来担任绝大多数点击类的字体。

2、黑白设计

既然扁平化越纯粹,就能越突显拟物和扁平的反差之美,那么我能想到的更极致的方案就是全黑白设计。市面上大部分App的UI设计滥用各种颜色,到处全是不一样的彩色:这里需要强调,于是用绿色,那里更需要强调,于是用红色,还有个地方是重大通知,于是就用红色加粗加大,弄到更后,就成为了电线杆上的老军医广告。更极致的扁平化设计,就是拿更少的元素,把它们组合成更合理的视觉匹配,让它们自然地形成主次之分和操作指导。假如非要用红色才能突出某个视觉关键,只能证明我的版式设计还不够智慧。

关于版式设计,我当时买了佐佐木刚士的《版式设计原理》,版式设计是日本的传统强项,而且日语跟中文在视觉上有许多相似之处,它们都不能彻底照抄英文系的版式设计美学。纸质读物的设计元素大有限,大多数内容全是黑色的字,没有目前手机UI那么多变的视觉表现力,那么在设计元素贫乏的情形下,如何区别不一样内容的轻重限度,让读者能自然地依照你构想的次序去阅读这些内容,这就是版式设计的智慧。从以前的纸质杂志到目前的扁平化UI,变化的是介质,固定的是人类的视觉习惯。

由繁化简的“设计规范”

把每个页面的成效图基础跑通,然后尽我所能地抽象其中的设计元素,我就拥有了上图这些设计规范,具体包括:导航栏的布局、常用对齐线、常用图文按钮排布方法、常用列表类页面布局等等……这就是我为什么强调刚开始做概念图的同时不要先明确设计规范,而是放开灵感去做,因为它们实在太难以预测了。只有把所有页面成效图明确到七七八八,你才能看见你需要多少种字体、多少种透明度、多少种对齐线……设计规范是用高品质的概念图归纳出来的,而不是一开头就拍脑袋决定的。

基础明确了设计规范以后(并非说要100%明确下来,因为在具体设计的历程中,设计规范的增添或更改是无可避免的),接下来就是做正式成效图,这个节点跟扁平化UI设计会有一些不一样:

1、100%还原图

扁平化设计中,你能够只做大体的成效图,做成效图的目标只是明确UI文档该如何写,前端看的是文档,成效图只是视觉对比。在1个出色的扁平化UI制作步骤中,几乎所有设计素材全是单独存储的,有1个详尽的素材库,仅需依照设计规范把这些素材1个个摆进设计稿里就行了,而在设计稿里新产生的素材也会被快速参与素材库中。更后它们能够从素材库里一次性切图。

但在「the App」中,许多视觉元素是拟物的,假如我不在正式界面里做到100%还原,我就无法明确1个文件夹的封面是不是会不小心压住上面的吊灯(上图左);也无法明确文字的标题能否会跟“孔”重合起来(上图右)。因而,我必须把牵涉到拟物的页面成效图做到100%还原,以此来编写我的适配文档。

2、更大机型画布

扁平化设计中,普遍成效图仅需要做1个大小适中、主流的机型,比如许多人在设计iOS App时只做iPhone 6的成效图。不过,位图跟矢量图不一样,它只能缩小不能放大,所以我的100%还原图必须用6 Plus画布来做,因为许多拟物切图要直接从这里取材。

时候我还要此外去做各种小机型的,不必100%还原的成效图,来确保我的对齐方案在任何机型上都不会反常(比如,前文提及的,不能让封面遮住吊灯)。

鉴于以上2个原因,我就开始去做重要页面的iPhone 6 Plus 100%成效图。这里的“重要页面”包括两类,一类是需要从成效图中直接拿到切图资源的页面,也就是拟物设计非常强的一些页面;另一类是模板类页面,比如我们有三4个列表类页面,显然只做好其中1个就行了,其它的无需煞费苦心,只要1个大概的成效就充足了。

做完上述工作,就要开始出正式文件了。对于前端开发而言,需要的正式文件包括:成效图、适配文档、切图。这个章节的标题提及左右脑时候开工,之前的工作用右脑就能完结,而从这里开始就得用左脑了。

为了解决全部的适配问题,我先解决1个小问题,我的工作从这5张“纸”开始:

统一处理App中所有出现过的“纸”

这5张纸是「the App」UI中所有会出现的纸,为了适配便利,我得把它们的文本位做成一样的。由于更右边两种纸的左上角有回形针,所以“标题”统一往下调整,避免压住回形针。

用RGB通道来明确“纸”的切图范畴

纸的光环境是灯泡从右上角照过来,因而它阴影的边缘自然在左边和下方。为了拿到切图,我必须明确边缘,从成效图(左上)里直接找到边缘很困难,用通道+曲线极容易就找到了(左下)。有了左下角的边缘以后,我就能详尽把它切出来。为了文本对齐便利,显然我在纸张的顶端和右边也要留一样的空隙,这样纸张切图“纸”的部分就能刚好处于切图的中心(右)。

形成“纸”的统一文档

那么接下来就是给这张通用的“纸”来写文档。见上图:

文本框的宽、高,以及它相对于这张纸切图的位置,我都用它们与切图尺寸的比率关系来表示。这样做之所以能够成功适配,是由于无论纸张有几种规格的切图(@3x、@2x,或之后更高规格的切图),我们要明白1个特性,那便是文本框与切图的比率关系是不能够发生变动的。

标题的底端距离文本框的高度,并不需要用具体数值来表示,而是能够刚好分隔一行文本的距离,那么在文档中我就定义这个距离=正文的字号。也就是说,假设正文的字号是12pt,那么它们的间隔就是12pt。这样做的好处于于,无论我怎么调整正文字体的大小,标题与正文看起来永远刚好隔着一行。

标题的字号不是1个具体的数值,而是正文字号的1.4倍。因为从设计上来讲,标题之所以看起来是标题,就是由于它比正文的字要更大或许更粗。1.4倍刚好能够体现这个关系。当我后期要调整正文字号的同时,标题就能够随遇而变动大小,无需我手动去调整了。

纸张下边的小字,由于切图底端已经空出了空隙,所以直接让它0间距对齐就行了。

从上面整个文档来看,几乎所有的“束缚条件”(元素中间的相对空间关系)全是用“比率”来表示,这就意味着,前端工程师只要把这套条件放进去,我们就无需思考具体的机型,大到iPad小到iPhone 4都能完美展现。时候意味着,假如我们对其中某个地方不满意,也无需去更改每个机型的数值,而是从宏观上去更改某个比率关系就行了。

而唯一能影响这些比率关系的变量就是正文的“字号”(切图大小是不变的,所以它不会影响比率关系),所以接下来就是来定义这个“字号”了。

(1/2)“日记字”在“纸”上的不一样大小

首先,见上图,这张纸在iPhone 6P的3倍图里,和在iPhone 6/5/4的2倍图里,有两种不一样的大小。(2倍图是共用的,我必须在更窄的屏幕(iPhone 5s、5和4)中明确2倍图的大小,避免纸张太大,遮住了右边的吊灯和封面)3倍图比较大,2倍图比较小,假如字号一样,那么2倍图容纳的字数就会少许多。不过,从产品理念上来讲,我期望不一样机型上的纸所容纳的文字摘要字数基础一致,因为字数太多会导致许多纸张显示不满,给人一种空虚的感觉;而字数太少就无法形成摘要,每张纸都要点进去才能知道具体写的是什么。

为了达到这个理念,具体某个辨别率纸张上的字号,就应该跟纸张的大小挂钩。纸越大,字号就越大,纸越小,字号就越小——这样就能保障每个机型所显示的摘要字数相近。这个概念明确以后,先别急,再来看阅读界面的字体。

(2/2)“日记字”在阅读界面的不一样大小

感觉到了吗?在阅读界面,同样是这个道理(如上图)。假如我只设立一种字号,那么要么是6plus会员觉得字太小,写许多内容都撑不满屏幕,没有造就感;要么就是小机型会员觉得字太大,一屏幕只能看几句话——我同样应该设计成:大屏幕字大,小屏幕字小,所以,结合上面的“纸”,你应该猜拥有我打算如何做了——

用一句话来综合所有的“日记字”

如图,所有机型,无论是阅读页面的字,还是纸上的正文,它们用这简简单单一套规则就能够综合了。我们明确唯一的对比标准,就是当文本框宽度为363pt的同时,字的大小、行距、段间距分别是21pt、10pt、14pt,而其余所有的情形,不论是6plus纸上的字号,还是iPhone 4阅读界面的字号,都从文本框的宽度直接换算比率拥有

以上就是「the App」UI制作的核心思想:把几种机型几十个页面的不一样元素,从设计的角度把它们总结起来,用一层一层的变量关系来嵌套,像一棵树那样,追溯到更后,它只有不可多得的几个数值。变动这几个数值就能变动整个App。

这些不可多得的数值就是前端维度的“设计规范”,它与UI制作的“设计规范”事实上是一式两用的。在前端上,它们形成了设计规范的“宏”,这个宏定义了UI适配中的所有变量。当我描述1个长度的同时,我并不说这个长度是15pt,而说它是1.3{小字},这里的{小字}就是1个变量,向前追溯,就能查询到我对“小字”事先约定的设计规范。

下面再举几个例子。

一套规则,适应所有机型

在上图中,由于之间的选项文字的段落属性是居中的,所以明确左右25%的对齐线就能让他们容纳更大字数的内容,而不会超出屏幕。唯一需要用数值来表示的是这些具体选项中间的间距,这里定义它是43pt,因为经过测试,小于这个距离就容易误触(这类情形比较少,否则能够定义1个叫做{更小按钮间隙}的变量)。然后,这个重要模块当然能够定义成居中于屏幕,于是我们就能够进一步定义:上、下模块各自打剩余的空间中取得中心对齐线——整个界面只有一个具体数值,其它全是变量,且适配于所有机型。

同样,一套规则,适应所有机型

在跟会员写的文字有关的界面中(比如上图),会员的文字是{日记字}的格式,它是这些界面视觉的核心,所以大多数的间距都要跟着{日记字}的段间距来走。明确了大体的视觉以后,把各种间距换算成它与{日记字}的比率关系。当屏幕变大变小,{日记字}会随之变大变小,而不一样的间距都会随之变大变小,但它们看上去永远是和谐的,因为考虑这些变量关系自身就是在考虑“各种视觉元素以何种比率关系展现出来才是更有美感的”。

将所有切图汇聚到素材库,统一管理

当切图都汇聚到素材库(上图)以后,还要给每类切图都单独制作一份适配文档,这是因为拟物UI的多元性导致的。扁平化UI中,普遍我们会把1个具体的切图定义为只有1个规格,比如不管在3倍图还是2倍图中,某个按钮的大小全是30pt * 50pt,这样它在不一样的辨别率中都有相近的物理大小。

BTW:

之所以手机开发用的单位不是px(像素)而是pt(点),就是由于每款手机的像素颗粒大小不一样,屏幕的精度(ppi)越高,单个的像素就越小。

假设你定义1个字的字号是99px,这就意味着这个字的高度是99像素,你在你的电脑屏幕上看它有1个樱桃那么大,在iPhone 4里看它有大拇指指甲盖那么大,可是在iPhone 6 plus里看上去就只有黄豆那么大了。这是由于6plus的屏幕精度很高,在1个黄豆的尺寸里就有99 * 99个像素。

所以为了设计师的便利和机型的转换,大家就设计了pt这个单位,你在iPhone 4的成效图里设计了1个60* 60像素的图标,放到iPhone 4里看上去是1个小拇指盖的大小,你觉得刚刚好。那么由于iPhone 4的1pt = 2px,所以你就告诉程序员说,这个图标的大小是30 * 30pt。

某一天你开启iPhone 6 plus,发现这个图标看上去也是小拇指盖的大小,这是由于6plus知道自己像素很小,所以它告诉你的App说“我的1pt = 3px哦”,所以你的App就自动把这个图标放大到90 * 90像素给它了(当然前提是你切图格式是矢量pdf,否则就模糊了)。

过了10年,iPhone 100诞生了,它的像素密度已经高到了不可思议的限度,可是苹果工程师聪明地设立了1pt = 1000px(当然了,这已经超过人眼极限,这里只是夸张举例),所以你这个App在iPhone 100里开启,它仍然是小拇指盖的大小。

——逾越不一样终端不一样屏幕中间的差别,为人的眼睛去查找1个统一的标尺,这就是pt这个单位存在的意义。

封面图必须完美嵌入纸堆,不能有丝毫偏差

不过,「theApp」中的某些拟物元素并不能根据我们想要呈现的物理大小来决定,而是要根据它与四周元素的位置关系来决定。比如上图中,封面的图片必须完美地嵌入封面的切图中,不能有1pt的偏差,否则看上去就不像是1个整体。这个同时,只能是下苦功,分别制作@3x、@2x2个规格的切图,然后老老实实量出图片位的具体大小。

用切图的留白,来替代复杂的适配

也有一些适配情形是极难用变量来描述的。比如,在上图左的界面里,封面的两张切图要完美切合在一起,非常难适配,所以我就索性把这个工作揽过来,直接在成效图里设计好切图,给这些切图上下左右预留好精确的空隙。这样,程序员就无需适配,直接让2个切图中心对齐,就能展现出更完美的视觉成效。

动画成效“冲击波”的时间线设计

交互成效的设计则简单许多,我们同样先明确一些变量,然后用这些变量来描述具体的时间线就行了。假如你使用过Flash或其余动画、特效应用,你肯定很熟知时间线。事实上,你越熟知时间线,你就越不需要去做真正的动画给程序员看,因为你能在脑子里很轻松地视觉化这些时间线,很明确它能实现你要的成效。

然而要留意的是,变量的设计要巧妙,用更少的变量来给你的动画埋下更多的后期可塑性。比如上图是“冲击波”成效的时间线设计,我设计了变量o,调整o就能调整整个动画的速度,而调整4o为其余倍数(比如5o、3o)就能调整“冲击波”的宽度,二者一起调整就能实现许多不一样的视觉成效。

整个UI制作的历程是很苦的,但更终我实现了预计的构想——仅通过一次开发,「the App」的UI就基础在所有机型满足了完美的适配成效,后续的改动也很轻松,因为全是针对变量和比率关系的改动,无需在每个具体机型中频繁调整。「the App」在这个阶段省下的Manday充足开发1个同级其余的产品。

六、成本控制:虚拟迭代

「the App」曾经开发过1.0版本,尽管我对它的操作体验下足了功夫,可是体验只是给你产品加分的东西,它掩饰不住1个产品的致命伤。如下图,当时的设计是这样的:

1.0版本的“微博”设计

假设1个想要写下一条人生方向,比如:“我更致命的弊端是过分考虑却不行动”,这条人生方向就形成了一篇“微博”,而每当这个人有了关于对“过分考虑却不行动”的新观点,在生活中对它有了新的体验,或是看见一篇文章讲的也是这个话题,他都能够附带上新的看法来“转发”这条微博。

当他每天开启某个文件夹,比如这篇文章所在的“行动的巨人”文件夹,他就看见了1个详尽的微博小站。这些微博默认依照时间流来排序,他能够看见他更近转发了什么,原创了什么。而当他变换到另一种排序形式的同时,「the App」只向他展示原创的微博,而且那些转发次数更多的将会排在更前面,提示他更重视的人生信念是什么。

发布前我对这套逻辑信心十足,不过发布后才使用了两周,我就发现了其中的大问题。其一,越是转发次数越多的微博,我就对原文越不满意,因为我的考虑始终在向前走;其二,当我灵感一现,想要拿出「the App」来写东西的同时,我往往会愣住,因为我不记得我有没有写过相似的“原创”,假如有,我也很难第一时间找到它来转发。于是,我往往全是写去写一篇新的原创,这套转发机制渐渐成了摆设;其三,转发次数更多的微博,并不肯定是我更应该去坚持的人生信念,有同时,它反倒代表1个我走过许多弯路的错误信念。

从这件事情以后,我决定「the App」之后每个版本在开发之前,都要经历充足多的“虚拟迭代”。这个名词是智超后来帮我归纳出来的,它的含义是:在产品真正投入开发之前,尽更大努力在内心去虚拟这个产品发布以后真正的样子,不断地“使用”这个产品,从这个“使用”历程中提早发现产品的问题,不经过开发,直接进行下个版本的迭代。

假如1个产品原先要开发10个版本才能成功,通过虚拟迭代,你也许用三个版本就能满足同样的成效。由于「the App」是外包开发,所以我这边“虚拟迭代”的同时,外包企业的人力费用并不需要我肩负,所以你也许会说,我的情形并不能适用在1个需要每天养活开发团队的企业里。

可是反过来讲,为了让设计组、程序组不空转,就强行赶鸭子让产品组草率地设计1个版本出来,其中许多问题都没有细致检验,发布以后立即就改需要,1个想法接着1个想法,源代码被弄得千疮百孔,产品实际要解决的问题却还未找到重点的门路,随时面对打倒重来的危险,这样难道就是高效率的公司运转方法?

PM1个人再厉害也有许多情形是思考不周的。当产品设计在不断“虚拟迭代”时,设计和开发组不必那么快就进到正式开发的工作,设计组能够趁这个时间多做一些概念图,跟PM一起把产品视觉明确下来,一起面前端工程师去评估每个细节的可行性。而开发组则能够提早整理产品需要的模块和技术,提早攻克某些技术难点,跟PM一起讨论每个产品模块的性价比:哪些该做,哪些该查找代替方案……所有人坐在一块讨论产品将来也许的走向,便于提早设计好1个延伸性更强的框架,降低将来迭代的成本——更好的产品肯定是这个团队所有人作为1个整体来完结的,强行区分为策划、UI、开发的流程,或是强行说:“你是UI设计师,你不要加入功能设计”、“我不管你们怎么设计,我等你的文档出来然后敲代码”,这跟工厂流水线生产罐头又有什么区别呢?

把产品设计在脑海中具象化

在「the App」开发中,虚拟迭代分两步,第一步是让我在脑海中具象化这个App发布以后的样子,所以我会把成效图都贴在白板上,盯着他们看,想象自己在这些页面跳转;我也会拜托智豪同学帮我把成效图摆进墨客或Axure里,做成1个能够在手机里点击的高仿真H5原型。

当我从这一步中创立了我对这个App整体的视觉和操作记忆以后,我就会进行下一步,那便是做一份Word文档格式的“「the App」”,它很像桌游,我当做自己在使用真正的「the App」那样操作它,每天记录许多东西,就像是在使用真的App相同。

我在办公室、咖啡厅、湖边和菜市场写东西,我在醒着和睡着的同时写东西,几个月里写了十几万字的个人考虑和摘抄。每当我在原型或成效图里觉得某个功能已经设计得很不错的同时,过不了几天我就会在“使用”Word版「the App」时发现这样那样的问题,然后我就去更改设计方案,哪怕是打倒重来。

首先是初次虚拟迭代。既然灵感袭来的同时,我也不知情究竟该“原创”还是“转发”,那么就去掉它们中间的差异——所有写下的东西全是一篇“感悟”,我每次记录的文字中间不再有高低之分。等到我空闲的同时,我就把某些描述同1个人生道理的“感悟”汇聚到一起。比如,我发现我有3篇感悟全是在反思自己容易心情化的毛病,还有5篇是从网上搜集来的关于心情管理的文章片段,那么我就把这8篇内容汇聚到1个“信念”之中,然后给它取名叫“控制心情”。

初次虚拟迭代:“打孔”

并且,1个信念的权重也不再取决于他所包括的文件数目,而是你给它打了多少次孔。每天会员都将获取1个打孔器,选择当日对他生活起到真正协助的那条信念,去给它打孔。与日俱增,人生信念就会形成1个排行榜(如上图)。

当你看见一篇信念有50次打孔的同时,你就知道,它在生活中给了你50次的实际协助,可能它是1个不显眼的大道理,可是你应该坚持下去;当你发现某个以前看见流泪的心灵鸡汤只有2次打孔,你就知道,原来它属于劣质的地摊成功学,它讲的全是虚的,它对你没什么协助。

不过,当我在Word版「the App」“使用”这套新设计时,我又很快发现了2个大问题。

其一是我能够作弊。我并非每天都对生活有新感觉,但这些日子里,假如我不用打孔器它就会被浪费掉,为了不亏,我就随意找了个没有用的信念给它打孔。等到我有一天忽然发现1个好的看法时,我马上把那个没有用信念跟它合并了起来,再把没有用的部分删掉,这样它的打孔数就立即升高了。

其二是我的内容很乱。我更感兴趣的一条信念是稻盛和夫的“做恰当的事”,我每天都会有新感想写进去,但事实上许多并非思想上有什么新的认识,而是我当日做了什么事。这些等同于流水账的内容混杂到信念里,让我每天开启它不知情该看什么关键。

于是,在第二次“虚拟迭代”中,我设计了“涅盘”和“流水账”来解决上个版本的问题。

第二次虚拟迭代:“涅槃”

如上图,每个信念只能容纳9个更精髓的感悟,不必要的必须要“涅槃”,涅槃事实上就是让你从情感上接纳去卸载那些不主要的思想,它约等于卸载,但它的“英灵”永远存在于这个信念的1个小入口内,不允许完全清除,供你瞻仰。

时候,会员在打孔数上作弊也没那么自在了,假设你为了把1个20次打孔的信念提高到50次,而合并进来1个打孔30次的不有关信念,那么当你剔除那些不有关内容的同时,它将永远留存在涅盘区扎你的眼,让你不舒服。即便你先偷偷把那个不有关信念的内容都清除掉也没门,因为信念的合并也包括它们涅盘区的合并。

而“流水账”就能把每天的实践体会跟那些具备指引作用的文字隔离开,有什么实践体会,写流水账就行了,没必要写进信念里。但问题在于,写流水账这个功能并不在「the App」的主线上,而1个改进的步骤设计应该是“你肯定会依照我的设计来做”而不是“某个功能你能够用也可以够不用”。这个同时,我犯了1个非常愚蠢的错误,那便是额外设计了一套“分数”机制来保障会员会使用流水账这个功能——有同时,你沉浸在你的劳动中,于是忘记了你也曾是鄙视某种做法的人。

第三次虚拟迭代:“流水账”与“打孔”的结合

在接下来的“使用”中,我碰到的问题重要聚集在流水账的设计上。在第3个虚拟迭代版本中,我终于找到了解决办法,那便是把“打孔”跟“流水账”结合起来(上图)。会员假如要打孔,就必须结合这个信念写下今天的流水账,讲一讲今天为什么要给这个信念打孔,发生了什么,自己做得怎样,有什么感想。比如,你今天碰到1个老油条给你甩锅,可是你忽然想起你写的一篇叫做“不做老好人”的信念,于是你战胜了这个老油条,那么今晚回到家,你就找到这个信念去给它打孔,打孔的同时你就写上了今天的流水账,介绍今天这个值得庆贺的事情。

这样的设计就让流水账融入了主线之中。此外,我设计了让流水账不能卸载,写了就永远在那里,以保障每次的打孔必须是周密的而不能是随便的。

在第4个虚拟迭代版本中,我还设计过1个叫“导航器”的东西,因为当我想要给1个信念打孔,或给它增添1个新的感悟时,有同时我很难立即找到它。然而由于我始终坚信“附加功能”往往全是设计上智慧缺乏的遮羞布,所以我更终发现原来问题的症结来自于现成排序规则还不够改进,于是我就去掉了这个功能,然后改进了排序的规则。

更终,第N个虚拟迭代版本在我UI制作的1个月频繁“使用”,始终没有发现新的问题,于是我就提交文档给外包企业正式开发了。之间收到过30个左右的测试Build,经历了大概80次电话交流,3次当面交流和2000个左右的需要提交(包括Bug、细节改动,使用Worktitle平台),接着就有了目前的「the App」2.0——感谢我的朋友李颖、陈智豪、刘明清,后面这些工作许多是由他们帮我完结的,我一己之力是根本没法做到的;也感谢我的外包企业的老板邓智超,「the App」做到后期,许多模块的Manday都远远超出了预估,可是他没有多收我一分钱,因为他也渐渐爱上了这个产品。

虚拟迭代毕竟不是真实迭代,我总有一些地方会出错,我会收到会员的各种反馈,恰当看清这些反馈,我才能知道下1个版本迭代的关键在哪里。

《守望先锋》,源氏

《守望先锋》目前渐渐退热,许多会员都在抱怨各种问题,重要聚集在英雄这个话题。有的抱怨“不能玩源氏了”,有的抱怨“DVA太强了应该消减”,有的抱怨“凭什么我每天要玩奶妈”,有的抱怨“说好的1个月出1个英雄呢?”……

假如暴雪一条一条去改正这些问题,它就输了,因为这些抱怨背后的原因全是一致的——那便是过分强调团队配合。1个团战基因太强的游戏(参见暴雪的《风暴英雄》),它必定导致许多人要补位,因为所谓的配合体系就是“肉、DPS、奶”的不变匹配;它必定导致每个版本都会出现一些更强势的英雄组合,于是就有人玩不了源氏;它必定导致出英雄的难度会伴随英雄数目升高而呈几何指数加大,因为策划需要思考的不是单个英雄中间的平衡,而是巨量的英雄组合中间的平衡,于是就有人抱怨出新英雄的速度太慢……

会员会向你暗示产品的问题,但很少能直接指出产品的问题。你要做的不是挨个地去达到每个会员的需要,而是去考虑它们背后指向了产品的哪个根本性的症结。永远都有人抱怨和怀疑你的产品,你要做的不是去贴合,而是依靠他们的智慧来更完全地做自己。

「the App」在Appstore的平均评分是4.5,它的评分是两极分化的,好评的人给的几乎全是满分,有些人写了几百字的评论;差评的人偶尔给的只有1分,然后配上“垃圾玩意儿不知情怎么用”这种气愤的文字。但在我眼里,无论是给更高分还是给更低分的人,他们使用「the App」的体验全是相同的,我不能因为那些好评就认为「the App」只然而是门槛比较高,对于有心钻研的会员才能敞开他的大门。事实上,给更高分的人,他们所认可的是「the App」出色的那一面,从会员沟通来看,他们相同会碰到那些给1分差评的会员碰到的问题,只然而他们对「the App」更为宽容罢了。

有些人反映“进去不知情怎么用”,有些人反映“是不是鸡汤App?”,有些人反映“教程过于文艺”,有些人反映“创立了1个文件夹以后,不知情怎么开始写”,有些人反映“信念和感悟究竟有什么区别”,有些人反映“打孔器究竟是干嘛的?”。经过对产品核心的审视,这些问题的产生绝大多数都来自于同1个错误,那便是我之前提及的,那个愚蠢的错误——为了把流水账功能融入主线,而额外设计了“分数”这个体系。尽管后来我变动了流水账的设计,但我并没有去掉“分数”这套体系。

由于“分数”体系绑定的是文件夹,而文件夹代表的是“人生目的”,所以现在整个「the App」的主线上,都会太过强调“人生目的”这个概念。由于“人生目的”卡在「the App」和会员内容中间,我就没法绕开它来直接展现「the App」的核心思想,我还得此外去写一些教程来指导会员,详尽的会员步骤之间出现了1个不必要的节点,于是就产生了上述会员所抱怨的一切。

每个the App会员所追求的,全是变成更好的自己

事实上,大部分会员,包括我本人,只是偶然看见了书上一句点亮人生的话,只是偶然走在湖边,忽然想通了从今往后要如何应对这个世界。然后,我们不谋而合地开启了「the App」,只是想把这句话写进去,再在空闲时把他归类到某个人生信念里,便于让双眼能更为清楚地看见前方的路。在这个历程中,我们并不关心人生目的是什么,因为所有「the App」会员的人生目的全是一致的,那便是去做更好的自己。

但假如不是虚拟迭代,我可能要在第5版、第10版才能发现这个问题,而不是在第3版就能解决它。在「the App」接下来的2.1(或3.0)版本中,你将会看见1个更简约但更有智慧的个人成长软件。

整个「the App」的开发历程,假如说有什么更主要的信念,那便是在极力降低每个版本Manday过程中,用虚拟迭代的方法让每个版本中间的跨度尽也许地扩大,因为1个产品很少在第一版就能成功,在有限的成本内,我们需要更多的、更有质量的试错空间。

在给「the App」做UI之前,我的设计水平还停留在刚毕业时业余设计一些公益广告的阶段,我并不知情@3x的真正意义是什么,那么我就去查知乎、研究其他人的作品,用尽各种办法把主页做出来,啃下这块硬骨头以后,后面的UI设计也就轻松多了;

ASO和H5架设我都没接触过,那么我就去万能的淘宝,看那些店家说自己是怎么做的,然后动手学过来;

当我在人员完备的互联网企业里做产品时,我曾对外包开发不屑一顾,觉得不天天盯着开发岂可做出1个满意的产品来?而后来,我们认识了智超,然后我们做到了。

历程很简单,那便是像「the App」所请求的那样,去不断追求更好的自己。

上述内容就是小编今天为您带来的关于《摸索APP外包开发之精品App问世的全历程(二)》的全部内容,希望能对您有所帮助,我们是一家成立于北京的IT外包公司,如果您有app软件或者微信小程序需要定制开发,不妨联系我们。
免责声明:本站部分文章转载自网络,不代表本站的观点和立场,不以盈利为目的。如有侵犯公司或个人权益,本站会第一时间删除文章。我们是一家北京app开发公司,欢迎咨询免费获取思维导图!

本文地址:https://appbj.cn/article/3141/

网友热评

暂无更多评论
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

我们积累了丰富的移动互联网开发和运营经验,在开发中为客户提供更多帮助!
咨询热线:18611391767(微信同号)