-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio-4.html
284 lines (266 loc) · 17.8 KB
/
portfolio-4.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Resume</title>
<meta name="description" content="Here goes description" />
<meta name="author" content="author name" />
<link rel="shortcut icon" href="images/photos/favicon.ico" type="image/x-icon" />
<!-- ====================== Mobile Specific Meta ====================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- ====================== Style CSS + Google Fonts =================== -->
<link rel="stylesheet" href="css/custom-scrollbar.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/icomoon.css" />
<link rel="stylesheet" href="css/owl.css" />
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/screen.css" />
</head>
<body>
<!-- ========================= START HEADER ======================== -->
<!-- <header class="header">
<i class="nav-toggle fa fa-bars"></i>
<a class="brand" href="#">
<img src="img/logo_black.png" alt="logo" />
</a>
</header>
-->
<!-- ========================= START NAVIGATION ======================== -->
<nav>
<ul>
<li><i class="nav-close icon-cross3"></i></li>
<li><a href="#main">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
<!-- ========================= START SITE PRELOADER ======================== -->
<div class="preloader">
<div class="preloader-wrapper">
<img src="img/logo_black.png" alt="resume logo" />
</div>
</div>
<!-- ========================= START SLIDE PRELOADER ======================== -->
<div class="slide-preloader">
<div class="slide-preloader-wrapper">
<span></span>
<span></span>
<br />
<span></span>
<span></span>
</div>
</div>
<!-- ========================= START MAIN CONTENT ======================== -->
<div id="fullpage" class="content">
<section class="section" data-anchor="main">
<!-- ================ Start Single Project Slide Slide ================ -->
<!-- <div class="slide single-project-slide" data-anchor="single-project">-->
<div class="container">
<!-- ====== Start Single Project ====== -->
<div class="single-project">
<!-- === Go Back === -->
<div class="go-back">
<a href="javascript:history.back(-1)" class="fa fa-angle-left"></a>
<span>返回</span>
</div>
<!-- === Project Header === -->
<div class="project-header">
<h1>H5活动</h1>
<div class="details-and-share">
<div class="project-details">
<ul>
<li>
<div class="date">
<a href="#"><i class="icon icon-clock3"></i>2018.9</a>
</div>
</li>
<li>
<div class="tags">
<a href="#"><i class="icon icon-tag2"></i></a>
<ul>
<li><a href="#">运营</a></li>
<li><a href="#">H5</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!--
<div class="share-links">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
//-->
</div>
</div>
<div class="project-body">
<!--<p> 前沿</span></strong></p>
<p>为了拉新和活跃用户需要推一个活动，最终定位用H5的形式策划一个运势测试活动。</p>
<p><strong><span style="font-size: 18px;">目录</span></strong></p>
<p>1、《测今日运势》策划</p>
<p>2、风格确定</p>
<p>3、首页</p>
<p>4、关键字页面</p>
<p>5、测试题目页面</p>
<p>6、二维码链接</p>
<p>7、第二个活动《你的招财指数有多高》</p>
<p>8、总结</p>
<h1>1、《测今日运势》策划</h1>
<p>此活动可以单次测试，也可以连续15天进行每天不同的测试结果，每天只有一个测试结果。</p>
<p>中间会有查看解析卡引导用户关注的流程（拉新）每天一个测试结果，想知道第二天的结果只能等第二天再重新测试一遍（活跃）。</p>
<p>一共有30道题，每次测试一套题5个问题（2道脑洞+2道主观+1道情景题）。共有15种测试结果。</p>
<p><img src="https://img.ui.cn/data/file/6/4/4/2333446.png" ></p>
<p><br></p>
<p>1表示好，0表示不好。每套题5个问题，15个测试结果。</p>
<p><img src="https://img.ui.cn/data/file/8/0/4/2293408.png" ></p>
<p>15个测试结果对应15个关键字，即每次测试完一套题便有一个测试结果包括一个关键字和一个破解卡。<img src="https://img.ui.cn/data/file/9/0/4/2293409.png"></p>
<h1>2、风格确定</h1>
<p>风格要求：有测试预知未来的感觉，脏脏的</p>
<h1>3、首页</h1>
<p><img src="https://img.ui.cn/data/file/5/1/4/2293415.gif"></p>
<p><br></p>
<p><span style="font-size: 14px;">（本来想在中国周易八卦算命啥的方向，后面没有过集团审核又修改为西方卡罗牌方向了）</span></p>
<h1>4、关键字页面</h1>
<p>根据原型确认了关键字页面结构</p>
<p><img src="https://img.ui.cn/data/file/6/1/4/2293416.jpg" ></p>
<p>紧接着整个页面结构风格确定</p>
<p><img src="https://img.ui.cn/data/file/7/1/4/2293417.jpg" ></p>
<p>图片做了两种风格，一种偏平的、一种描边风格，最后确定为右边的描线风格。</p>
<p><img src="https://img.ui.cn/data/file/9/1/4/2293419.jpg" ></p>
<p><img src="https://img.ui.cn/data/file/0/2/4/2293420.jpg" ></p>
<p>确定后就好做了</p>
<p><img src="https://img.ui.cn/data/file/2/2/4/2293422.gif" ></p>
<p>关键字为了每次测完题能给用户不同的感觉，故把每个关键字的背景色进行独立调色。</p>
<h1>5、测试题目页面</h1>
<p>后面是测试题目的设计：一共30道题如果每道题都用一种不同的颜色，那样用户测试的过程中会有比较乱的测试体验，但又不想就用一种土黄色，用户测试这个活动15天也会单调。如果想让每套题不一样的颜色也不会单调，但由于用户每次测的一套题是自由组合的，同一题目可能在不同的套题里，这又和同一题目只有一个颜色相冲突（如果为不同套题配色，整个开发包大小会增大）。或者让开发代码调色，在不了解开发难度的情况下还是尽量不要给程序找事，最后结果可能是拖延工期。于是寻求其他方案，由于是分3类题，脑洞题、主观题、情景题，所以最后决定用3种颜色分别对应3种题型。并根据3种题型做了一个当前题目小图形提示，强化了题型象意并增加趣味性。</p>
<p><img src="https://img.ui.cn/data/file/3/2/4/2293423.jpg"></p>
<p>先用第一套题做了个体验流程真机效果，感觉了下还可以</p>
<p><img src="https://img.ui.cn/data/file/5/2/4/2293425.gif" ></p>
<p>最后合照（部分）</p>
<p><img src="https://img.ui.cn/data/file/8/2/4/2293428.jpg" ></p>
<h1>6、最后奉上线上链接二维码</h1>
<p><img src="https://img.ui.cn/data/file/9/2/4/2293429.jpg" ></p>
<h1>7、第二个活动《你的招财指数有多高》</h1>
<p>由于上次H5活动上线后效果不错，在18年12月的时候又推出一个相同逻辑的活动，继续来拉新促活，不过由于第二次开发时间缩短很短，相应的也缩减了一些结果页。</p>
<p><strong><span style="font-size: 18px;">首页</span></strong></p>
<p><img src="https://img.ui.cn/data/file/2/1/9/2293912.jpg"></p>
<p><strong><span style="font-size: 18px;">loading页</span></strong></p>
<p>总结上次活动发现loading页挺重要，不过上次第一次做以为加载也用开发默认页可以就没关注。其实上线后才发现根本就不行，这次增加了一个loading页。由于2019就是猪年了，所以整个活动里有个猪的形象，loading页猪抱着大元宝进行一个抛起接住的动作加上一个进度条，由于是测试招财指数有多高，所以做了一个由下向上越来越高的进度条形式。</p>
<p><img src="https://img.ui.cn/data/file/6/1/9/2293916.gif" ></p>
<p><strong><span style="font-size: 18px;">结果页</span></strong></p>
<p>本次活动减少了结果页，变为4个招财指数页。根据每个解析的描述我进行构思为4种不同身份的人物。</p>
<p><img src="https://img.ui.cn/data/file/7/3/9/2293937.jpg" ></p>
<p>(点击查看大图)</p>
<p><strong><span style="font-size: 18px;">解析卡</span></strong></p>
<p><img src="https://img.ui.cn/data/file/3/4/9/2293943.jpg" ></p>
<p>最后奉上线上链接二维码</p>
<p><img src="https://img.ui.cn/data/file/2/5/9/2293952.jpg" ></p>
<h1>8、总结</h1>
<p>第二个活动是在第一个活动的活动逻辑基础上，快速完成的，节约了大量开发时间，不过也有缺点，和第一个活动同质化有点严重，玩法一样会没有新鲜感。项目给的时间少，这样也是最稳妥的办法。</p>
<p><br></p>
<p><br></p>
<p><br></p>
//-->
<div class="works-cont editor-style ui-theme" id="p-content">
<p><strong><span style="font-size: 18px;"> 前沿</span></strong></p><p>为了拉新和活跃用户需要推一个活动，最终定位用H5的形式策划一个运势测试活动。</p>
<p><strong><span style="font-size: 18px;">目录</span></strong></p>
<p>1、《测今日运势》策划</p>
<p>2、风格确定</p>
<p>3、首页</p>
<p>4、关键字页面</p>
<p>5、测试题目页面</p>
<p>6、二维码链接</p>
<p>7、第二个活动《你的招财指数有多高》</p>
<p>8、总结</p>
<p><strong><span style="font-size: 18px;">1、《测今日运势》策划</span></strong></p>
<p>此活动可以单次测试，也可以连续15天进行每天不同的测试结果，每天只有一个测试结果。</p>
<p>中间会有查看解析卡引导用户关注的流程（拉新）每天一个测试结果，想知道第二天的结果只能等第二天再重新测试一遍（活跃）。</p>
<p>一共有30道题，每次测试一套题5个问题（2道脑洞+2道主观+1道情景题）。共有15种测试结果。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/4-1.png"></p>
<p><br></p>
<p>1表示好，0表示不好。每套题5个问题，15个测试结果。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333483.png"></p>
<p>15个测试结果对应15个关键字，即每次测试完一套题便有一个测试结果包括一个关键字和一个破解卡。<img alt="Image title" class="fr-fil fr-dib" src="img/2333484.png"></p>
<p><span style="font-size: 18px;"><strong>2、风格确定</strong></span></p>
<p>风格要求：有测试预知未来的感觉，脏脏的</p>
<p><strong><span style="font-size: 18px;">3、首页</span></strong></p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333485.gif"></p>
<p><br></p>
<p><span style="font-size: 14px;">（本来想在中国周易八卦算命啥的方向，后面没有过集团审核又修改为西方卡罗牌方向了）</span></p>
<p><strong><span style="font-size: 18px;">4、关键字页面</span></strong></p>
<p>根据原型确认了关键字页面结构</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333476.jpg"></p>
<p>紧接着整个页面结构风格确定</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333475.jpg"></p>
<p>图片做了两种风格，一种偏平的、一种描边风格，最后确定为右边的描线风格。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333479.jpg"></p>
<p><br></p>
<p>确定后就好做了</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293422.gif"></p>
<p>关键字为了每次测完题能给用户不同的感觉，故把每个关键字的背景色进行独立调色。</p>
<p><strong>5、测试题目页面</strong></p>
<p>后面是测试题目的设计：一共30道题如果每道题都用一种不同的颜色，那样用户测试的过程中会有比较乱的测试体验，但又不想就用一种土黄色，用户测试这个活动15天也会单调。如果想让每套题不一样的颜色也不会单调，但由于用户每次测的一套题是自由组合的，同一题目可能在不同的套题里，这又和同一题目只有一个颜色相冲突（如果为不同套题配色，整个开发包大小会增大）。或者让开发代码调色，在不了解开发难度的情况下还是尽量不要给程序找事，最后结果可能是拖延工期。于是寻求其他方案，由于是分3类题，脑洞题、主观题、情景题，所以最后决定用3种颜色分别对应3种题型。并根据3种题型做了一个当前题目小图形提示，强化了题型象意并增加趣味性。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293423.jpg"></p>
<p>先用第一套题做了个体验流程真机效果，感觉了下还可以</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293425.gif"></p>
<p>最后合照（部分）</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293428.jpg"></p>
<p><strong>6、最后奉上线上链接二维码</strong></p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293429.jpg"></p>
<p><strong>7、第二个活动《你的招财指数有多高》</strong></p>
<p>由于上次H5活动上线后效果不错，在18年12月的时候又推出一个相同逻辑的活动，继续来拉新促活，不过由于第二次开发时间缩短很短，相应的也缩减了一些结果页。</p>
<p>首页</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333472.jpg"></p>
<p>loading页</p>
<p>总结上次活动发现loading页挺重要，不过上次第一次做以为加载也用开发默认页可以就没关注。其实上线后才发现根本就不行，这次增加了一个loading页。由于2019就是猪年了，所以整个活动里有个猪的形象，loading页猪抱着大元宝进行一个抛起接住的动作加上一个进度条，由于是测试招财指数有多高，所以做了一个由下向上越来越高的进度条形式。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333486.gif"></p>
<p>结果页</p>
<p>本次活动减少了结果页，变为4个招财指数页。根据每个解析的描述我进行构思为4种不同身份的人物。</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293937.jpg"></p>
<p>解析卡</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2333471.jpg"></p>
<p>最后合照</p>
<p><img src="img/D04.png"></p>
<p>最后奉上线上链接二维码</p>
<p><img alt="Image title" class="fr-fil fr-dib" src="img/2293952.jpg"></p>
<p><strong>8、总结</strong></p>
<p>第二个活动是在第一个活动的活动逻辑基础上，快速完成的，节约了大量开发时间，不过也有缺点，和第一个活动同质化有点严重，玩法一样会没有新鲜感。项目给的时间少，这样也是最稳妥的办法。</p>
<p><br> </p>
<p><br> </p>
<p><br> </p>
</div>
<!-- ======= Start scroll down toggle ======= -->
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
<span>回到顶部</span>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="js/jquery.easings.min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/placeholder.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script src="js/customScrollbar.js" type="text/javascript"></script>
<script src="js/isotope.pkgd.min.js" type="text/javascript"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>
<script src="js/plugins.js" type="text/javascript"></script>
<script src="js/options.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>