|
|
@@ -5,7 +5,7 @@
|
|
|
产品流程
|
|
|
----
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
更适合一人企业的产品流程
|
|
|
|
|
|
@@ -39,7 +39,7 @@
|
|
|
|
|
|
接下来,我们就来看看,怎么从这个还有些模糊的想法中提出一个明确的价值主张,然后围绕它进行商业模式规划、功能和界面设计、验证和迭代开发,最终使其成为一个商业产品。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词APP
|
|
|
|
|
|
@@ -52,7 +52,7 @@
|
|
|
|
|
|
### 价值主张
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的价值主张
|
|
|
|
|
|
@@ -64,7 +64,7 @@
|
|
|
|
|
|
### 客户细分
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的客户细分
|
|
|
|
|
|
@@ -78,7 +78,7 @@
|
|
|
|
|
|
### 价值主张的细化
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
细化后的福利单词价值主张
|
|
|
|
|
|
@@ -98,7 +98,7 @@
|
|
|
|
|
|
### 渠道通路
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的渠道通路
|
|
|
|
|
|
@@ -106,7 +106,7 @@
|
|
|
|
|
|
### 客户关系
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的客户关系
|
|
|
|
|
|
@@ -114,7 +114,7 @@
|
|
|
|
|
|
### 关键活动
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的关键活动
|
|
|
|
|
|
@@ -158,7 +158,7 @@
|
|
|
|
|
|
### 成本与收益
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的成本和收益
|
|
|
|
|
|
@@ -168,7 +168,7 @@
|
|
|
|
|
|
最后我们来看看完整的商业模式画布:
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
福利单词的完整商业画布
|
|
|
|
|
|
@@ -209,13 +209,13 @@
|
|
|
|
|
|
很多书里面都强调说,用户画像的头像要尽可能真实,最好用真人头像。但需要注意在网上乱找真人头像容易导致肖像权问题,这里给大家推荐一个通过AI生成真人头像的网站,叫做 thispersondoesnotexist.com。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
thispersondoesnotexist.com
|
|
|
|
|
|
不过这个网站生成的多是欧美人,对国内的产品来讲,反而各种违和。我更喜欢使用日系的动漫捏脸网站来做,比如 [charat.me](https://charat.me/) 这个网站。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
charat.me
|
|
|
|
|
|
@@ -223,15 +223,15 @@ charat.me
|
|
|
|
|
|
有了头像,再配上角色的说明和需求关键字,我们就有了一个简单好用的用户画像。下边是我们制作好的三个画像:
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
用户画像:王小康
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
用户画像:章小留
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
用户画像:卢小白
|
|
|
|
|
|
@@ -359,7 +359,7 @@ charat.me
|
|
|
- 图鉴模式:放到第二期,也可能是第三期。
|
|
|
- 语音回放:放到第二期。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
使用思维导图构建功能列表
|
|
|
|
|
|
@@ -369,7 +369,7 @@ charat.me
|
|
|
|
|
|
确定好某一期的功能列表后,可以把各个功能归类到界面里。新建一个思维导图,写上显而易见的各个界面,然后把功能放到界面下去。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
将功能归类到界面
|
|
|
|
|
|
@@ -384,7 +384,7 @@ charat.me
|
|
|
|
|
|
### 什么是 Adobe XD
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
AdobeXD
|
|
|
|
|
|
@@ -404,13 +404,13 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
点击左侧的菜单里面倒数第2个画板的按钮,
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
画板按钮
|
|
|
|
|
|
这时候在屏幕最右边就会出来一系列预置的画板尺寸。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
画板预设
|
|
|
|
|
|
@@ -420,7 +420,7 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
然后按住 CTRL或者CMD + D,就可以直接复制画板。我们把第一个画板叫做背单词界面,然后开始设计。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
复制画板
|
|
|
|
|
|
@@ -428,24 +428,24 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
先来制作背单词时,字母没有输入完时显示的遮罩效果。选择左侧工具栏中的矩形
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
矩形工具\
|
|
|
工具,画出一个覆盖全部画板的长方形。然后调节填充颜色为黑色,透明度为 30%。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
遮罩的制作
|
|
|
|
|
|
然后我们到 unsplash.com 这个无版权网站上,找一只猫的图片,把它也放进来。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
添加猫图
|
|
|
|
|
|
这时候猫是在遮罩上方的,所以它挡住了遮罩。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
调整图层顺序
|
|
|
|
|
|
@@ -455,14 +455,14 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
接下来,在遮罩上边,我们来放上单词释义和输入框。点击最左侧工具栏中的
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
文字工具\
|
|
|
图标,切换到文字工具。
|
|
|
|
|
|
然后输入文字释义。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
添加文字
|
|
|
|
|
|
@@ -470,7 +470,7 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
然后我们放上之前设计好的 Logo,加上单词输入框。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
添加单词输入框
|
|
|
|
|
|
@@ -478,19 +478,19 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
#### 虚拟键盘
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
虚拟键盘
|
|
|
|
|
|
虚拟键盘的制作在 XD 中也很简单,直接用矩形工具绘制就行。需要注意的是圆角的做法。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
圆角的设置
|
|
|
|
|
|
其实很简单,在右侧的属性设置里边,把圆角从0 改为 5 就可以了。在做好一个按钮后,我们可以按住 Shift 同时选中按钮和上边的文字,在右键菜单中将其编组(Group);然后按 CTRL或者CMD + D 就可以复制按钮。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
批量分布和对齐
|
|
|
|
|
|
@@ -500,7 +500,7 @@ Adobe之前准备收购Figma,于是放弃了XD的更新,但后来又收购
|
|
|
|
|
|
再下来,我们需要在界面中引入图标。既然是矢量界面,当然是矢量图标最好。前边我们已经介绍过 thenounproject.com 了,它还为 pro 用户提供了一个客户端。在这个客户端里边可以非常方便的复制图标。
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
矢量图标
|
|
|
|