-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathMr.Weather 的故事.html
821 lines (370 loc) · 30.5 KB
/
Mr.Weather 的故事.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
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
<!doctype html>
<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />
<meta name="keywords" content="roczhang" />
<link rel="alternate" href="/atom.xml" title="Roc Zhang's Blog" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.0" />
<meta name="description" content="Mr.Weather 是第一个从 0 到 1 完全由我自己完成的 App，因此我也在这个过程中体验到了产品、设计、开发甚至是客服等各个角色。从构建 Mr.Weather 首版雏形至今已经超过一年，我想不如就从这几个身份来聊聊 Mr.Weather 的故事。">
<meta property="og:type" content="article">
<meta property="og:title" content="Mr.Weather 的故事">
<meta property="og:url" content="http://www.roczhang.com/Mr.Weather%20%E7%9A%84%E6%95%85%E4%BA%8B.html">
<meta property="og:site_name" content="Roc Zhang's Blog">
<meta property="og:description" content="Mr.Weather 是第一个从 0 到 1 完全由我自己完成的 App，因此我也在这个过程中体验到了产品、设计、开发甚至是客服等各个角色。从构建 Mr.Weather 首版雏形至今已经超过一年，我想不如就从这几个身份来聊聊 Mr.Weather 的故事。">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/banner.png">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/2.png">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/4.png">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/5.png">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/6.png">
<meta property="og:image" content="http://www.roczhang.com/images/mrWeatherStory/7.png">
<meta property="article:published_time" content="2017-05-30T07:47:32.000Z">
<meta property="article:modified_time" content="2018-11-10T07:02:11.560Z">
<meta property="article:author" content="Roc Zhang">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://www.roczhang.com/images/mrWeatherStory/banner.png">
<script type="text/javascript" id="hexo.configurations">
var NexT = window.NexT || {};
var CONFIG = {
root: '/',
scheme: 'Mist',
sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
fancybox: true,
motion: true,
duoshuo: {
userId: 'undefined',
author: '博主'
},
algolia: {
applicationID: '',
apiKey: '',
indexName: '',
hits: {"per_page":10},
labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
}
};
</script>
<link rel="canonical" href="http://www.roczhang.com/Mr.Weather 的故事.html"/>
<title> Mr.Weather 的故事 | Roc Zhang's Blog </title>
<meta name="generator" content="Hexo 4.2.1"></head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-128981660-1', 'auto');
ga('send', 'pageview');
</script>
<div class="container sidebar-position-left page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-wrapper">
<div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">Roc Zhang's Blog</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<h1 class="site-subtitle" itemprop="description"></h1>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-me">
<a href="/me" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于我
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<link itemprop="mainEntityOfPage" href="http://www.roczhang.com/Mr.Weather%20%E7%9A%84%E6%95%85%E4%BA%8B.html">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="name" content="Roc Zhang">
<meta itemprop="description" content="">
<meta itemprop="image" content="/images/avatar.png">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Roc Zhang's Blog">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
Mr.Weather 的故事
</h2>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time title="创建于" itemprop="dateCreated datePublished" datetime="2017-05-30T10:47:32+03:00">
2017-05-30
</time>
</span>
<span class="post-category" >
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="http://schema.org/Thing">
<a href="/categories/Product/" itemprop="url" rel="index">
<span itemprop="name">Product</span>
</a>
</span>
</span>
<span class="post-comments-count">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-comment-o"></i>
</span>
<a href="/Mr.Weather%20%E7%9A%84%E6%95%85%E4%BA%8B.html#comments" itemprop="discussionUrl">
<span class="post-comments-count disqus-comment-count"
data-disqus-identifier="Mr.Weather 的故事.html" itemprop="commentCount"></span>
</a>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p><img src="http://www.roczhang.com/images/mrWeatherStory/banner.png" alt="Markdown preferences pane"></p>
<p>Mr.Weather 是第一个从 0 到 1 完全由我自己完成的 App，因此我也在这个过程中体验到了产品、设计、开发甚至是客服等各个角色。从构建 Mr.Weather 首版雏形至今已经超过一年，我想不如就从这几个身份来聊聊 Mr.Weather 的故事。</p>
<a id="more"></a>
<h2 id="产品"><a href="#产品" class="headerlink" title="产品"></a>产品</h2><h3 id="思路的雏形与改变"><a href="#思路的雏形与改变" class="headerlink" title="思路的雏形与改变"></a>思路的雏形与改变</h3><p>坦白说，开始动手做 Mr.Weather时我甚至没想好到底要做个怎样的产品，这也是为什么中间花费了如此长的时间。甚至于今天看来，雏形和现在的版本完全是两个不同的产品。最开始是在突发奇想下决定要做一个程序员风格的天气 app，实际上就是类似于 Terminal ，直接输入各种命令，完成查询某个城市天气之类的动作。而在这种奇特的思想驱动下，甚至还加入了类似聊天机器人的对话功能。整体风格也是尽力模仿像素风，甚至字体也是用的 Xcode 默认的 Menlo。当时还在大二的我觉得这种感觉很酷，而现如今看起来则是有些惨不忍睹了。<br><img src="http://www.roczhang.com/images/mrWeatherStory/2.png" alt="Markdown preferences pane"></p>
<p>之后大二暑假实习期间的一个晚上去 Kevin 家吃饭，我掏出手机给 Kevin 看了当时的 Mr.Weather。依稀记得 Kevin 说挺有趣但感觉有些自嗨，我认真一想感觉还真的是。就算是程序员，也不会每次想要查温度都要输入一个 weather -temp 呀。</p>
<h3 id="思考"><a href="#思考" class="headerlink" title="思考"></a>思考</h3><p>在实习结束后，我开始认真考虑究竟应该做一个怎样的天气应用。如同买钻头的人需要的往往不是钻头而是洞，大部分用户查看天气都不是为了研究天气数据，而是想要知道这些数据会怎样影响到自己，自己需要做出怎样的决定。<br>在仔细观察自己和朋友的使用习惯之后，初步将需求划分成两部分：一是经常发生的，有规律的动作，比如我们会在早晨出门前查询天气，通过降雨概率决定要不要带伞，或者通过空气质量指数决定要不要戴口罩，再或者在周五晚上看看周末的天气适不适合安排出游之类。而另一部分则是相对随机的，没有太多规律的动作。比如临出门时天色暗下来了查查当前天气。于是根据这两类需求，我开始重新考虑 Mr.Weather 的 feature。对于第一类规律性的动作，我做了 Mr.Weather 中最重要的一个功能，自定义天气通知。你可以自定义触发通知的条件、监测时间与通知发送时间，如 “当天的空气质量指数大于100时，在早晨提醒我带口罩”，又或是“第二天的降雨概率大于 50% 时，在晚上提醒我装好伞”。这些规律性的动作，就可以完全交给 Mr.Weather 来监控，用户不必每次手动查看了。而对于另一方面的需求，我给出的解决方案是当用户主动查看时，以最直观的方式告诉他所需要的信息。如 App 中包涵了分为四大类别的可定制卡片，拥有实时播报和天气动画的 Widget。并且尽量更直接的告诉用户天气变化趋势以及将带来怎样的影响，而不单是天气数据。<br><img src="http://www.roczhang.com/images/mrWeatherStory/4.png" alt="Markdown preferences pane"></p>
<p>每一次增改 feature 都可能让已经完成的设计和代码被放弃重来，甚至让完成进度变成遥遥不可期。在经历了第一版的 Mr.Weather 之后，我也学着更谨慎的面对每一个设想和功能。</p>
<h3 id="克制"><a href="#克制" class="headerlink" title="克制"></a>克制</h3><p>在考虑其他功能点时我也相对保持克制，引用 Alan 的话说，我非常讨厌 “航母级应用”，所有的生活需求被一个 App 接管是一种非常可怕的事。相比而言我更喜欢目的明确的产品，用起来干脆利落。少即是多的道理谁都会讲，而增加功能却经常是一个思考成本相对更低的选择。而由于 Mr.Weather 是个人作品，所以也有机会更加纯粹，无需面对所谓的 「 KPI 压力 」 吧。</p>
<h2 id="设计"><a href="#设计" class="headerlink" title="设计"></a>设计</h2><p>我很敬佩那些设计优秀重视细节的产品，这样的产品处处都会充满着设计者的巧思与灵魂。同时我很享受做设计的过程，打开 Sketch 看到一个个 Artboard 排列在屏幕上的感觉总会让人非常愉悦。从自己画下 Mr.Weather 中用到的每一个小图标，到设计调整各个天气动画，甚至是通知提示音，很多细节都需要时间和精力打磨。<br><img src="http://www.roczhang.com/images/mrWeatherStory/5.png" alt="Markdown preferences pane"></p>
<h3 id="气质与迭代"><a href="#气质与迭代" class="headerlink" title="气质与迭代"></a>气质与迭代</h3><p>设计的理念倒不像产品一样，从开始时我就希望 Mr.Weather 的设计干净明晰。Mr.Weather 的整体配色相对克制，也尽量注意留白。整体由信息驱动，寻求干净开阔。由于在产品构思上的更新导致整个产品有过数次推翻重来，我自己又稍稍有些强迫症，经常会和一个图标、界面死磕，找不到想要的感觉就会再来。单一个设置界面就反反复复改了数版，而至于引导界面、主界面之类则更甚，经常是自己看着不舒服就推倒再来。不过除去做个人作品怕是很难会有这样的时间成本可以让自己打磨了。好在最后的结果自己总体还算比较满意，当然还是有很多不足（比如不少用户甚至都没能找到设置入口）。<br><img src="http://www.roczhang.com/images/mrWeatherStory/6.png" alt="Markdown preferences pane"></p>
<h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><p>配合 Mr.Weather 整体的气质，我为 Mr.Weather 的英文与数字选择了 Gill Sans 这款字体。Gill Sans 被誉为英国的 Helvetica，甚至在 SHERLOCK 电影前的 BBC 片头里还能见到他的身影。虽然我对字体的了解还非常浅薄，但我很喜欢这款字体那种相对谨慎且平和的气质。在 Sketch 和 iPhone 屏幕上反复比较之后，我觉得 Gill Sans 相对 Open Sans 、Helvetica 等字体与 Mr.Weather 整体更加契合，于是选定了使用 Gill Sans。而中文字体由于考虑到对应用整体大小的控制，所以算是在妥协之下选择了系统默认的苹方。</p>
<h3 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h3><p>Mr.Weather 的天气动画依然在寻求自然干净的感觉，晴天、阴天、雨天及下雪等场景的动画也遵循 Mr.Weather 整体的配色。 除去较大的天气动画之外，在 App 中我也加入了很多细小的动画。比如下拉菜单时后面背景的逐渐模糊，添加卡片时类似一推滑动的 toggle 动画，天气卡片下方展开分类筛选时的提示用户可以滑动的动画，以及各类 alert 动画等等，都希望能营造出一种自然、干净、利落的体验。<br>Mr.Weather 中的动画在少数地方使用了 Facebook 的 pop 与 Airbnb 的 Lottie，而 95% 以上的动画还是使用了 CoreAnimation 来完成。<br><img src="http://www.roczhang.com/images/mrWeatherStory/7.png" alt="Markdown preferences pane"></p>
<h2 id="开发"><a href="#开发" class="headerlink" title="开发"></a>开发</h2><p>由于自己程序员的主要身份，所以整体开发上的烦恼基本只剩下 Xcode 经常崩溃的自动提示与 Swift 越来越长的编译等待时间。但最重要的天气通知则还是遇到了一些问题。对于如何处理天气通知想过非常多的办法，甚至于一开始打算把所有用户的通知设置保存在 Server 上，由 Server 来处理判断再给客户端发通知。而这种办法对于目前的 Mr.Weather 来说基本不可行。后来还是采取了后台应用刷新和远程静默通知结合的方式来解决。</p>
<h3 id="数据源与运营压力"><a href="#数据源与运营压力" class="headerlink" title="数据源与运营压力"></a>数据源与运营压力</h3><p>另一件比较烦心的则是天气数据源的选择。先后比较了几个数据源，最后还是选择了一个付费数据源。毕竟准确、及时的数据对于一个天气应用至关重要，也会在很多时候影响用户体验。而在上架时，考虑到 Mr.Weather 目前的完善状况，觉得现在收费还是对用户不太负责的行为，所以选择了免费也没有添加内购选项。后来 Mr.Weather 的日访问突然增长，按次收费的天气接口费用让我措手不及。非常感动的是不少用户都给予了捐助支持，也帮助我在想清 Mr.Weather 的未来之前缓解了不少压力。</p>
<h3 id="内测"><a href="#内测" class="headerlink" title="内测"></a>内测</h3><p>在 Mr.Weather 上架之前，我先通过 TestFlight 发布了数个测试版本。由于开发者使用时的一些惯性非常容易忽略掉不少问题，所以进行测试非常必要。 Mr.Weather 先后从 0.1 测到 0.7，其中数次都是凌晨新版本通过审核后交由朋友们测试一天，我在当天晚上就会做修改调整，再提交下一版本审核。朋友们给了很多反馈与建议，数次下来 Mr.Weather 的问题也少了很多，方提交到了 AppStore。<br>值得一提的是，作为自己第一次提交给 AppStore 的应用，一次就通过审核了，而且前后一共也只用了两三天的时间，非常意外。</p>
<h3 id="上架后与用户反馈"><a href="#上架后与用户反馈" class="headerlink" title="上架后与用户反馈"></a>上架后与用户反馈</h3><p>Mr.Weather 于 5 月 18 日上架到了 AppStore ，至今差不多两周的时间。期间最佳排名为国区天气类免费榜第 25 名。而上架之后，阅读每日的反馈与来信也变成一件非常有趣的事情，也正是通过这个渠道，结识到了不少用户甚至是设计师和开发者，感觉非常奇妙。</p>
<h2 id="尾巴"><a href="#尾巴" class="headerlink" title="尾巴"></a>尾巴</h2><p>从大二开始参与过大大小小的项目开发，在团队中每个人各司其职，相互配合与学习的过程让我非常快乐。而第一次通过 Mr.Weather 完整体验了从 0 到 1 制作一款产品，自己独立掌控产品的方方面面则别有一番感触。这两种体验都让我投入且着迷。<br>我曾想过做设计对一个程序员而言会不会是不务正业，然而上面提到的每一个角色努力的目的都是为了打造出一个更好的产品，之间并没有冲突。而将我的所学所想杂糅并倾注到一款产品中去，不断打磨完善，再实现新的想法，这个过程我想我永远不会觉得无趣。</p>
<p>我是 Roc Zhang，这就是我的首个独立作品 Mr.Weather。<br>Mr.Weather 官网与下载地址：<a href="http://www.roczhang.com/mr.weather/">http://www.roczhang.com/mr.weather/</a></p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/in-Swift.html" rel="next" title="'===' & '!==' in Swift">
<i class="fa fa-chevron-left"></i> '===' & '!==' in Swift
</a>
</div>
<span class="post-nav-divider"></span>
<div class="post-nav-prev post-nav-item">
<a href="/%E8%B7%A8%E8%B6%8A%E5%A4%A7%E4%B8%89.html" rel="prev" title="跨越大三">
跨越大三 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</article>
<div class="post-spread">
</div>
</div>
</div>
<div class="comments" id="comments">
<div id="disqus_thread">
<noscript>
Please enable JavaScript to view the
<a href="https://disqus.com/?ref_noscript" target="_blank" rel="noopener">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
文章目录
</li>
<li class="sidebar-nav-overview" data-target="site-overview">
站点概览
</li>
</ul>
<section class="site-overview sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/avatar.png"
alt="Roc Zhang" />
<p class="site-author-name" itemprop="name">Roc Zhang</p>
<p class="site-description motion-element" itemprop="description"></p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">24</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories/index.html">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<span class="site-state-item-count">1</span>
<span class="site-state-item-name">标签</span>
</div>
</nav>
<div class="feed-link motion-element">
<a href="/atom.xml" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/RocZhang9673" target="_blank" title="GitHub">
<i class="fa fa-fw fa-github"></i>
GitHub
</a>
</span>
<span class="links-of-author-item">
<a href="https://twitter.com/roczhang9673" target="_blank" title="Twitter">
<i class="fa fa-fw fa-twitter"></i>
Twitter
</a>
</span>
<span class="links-of-author-item">
<a href="http://weibo.com/u/3210801545" target="_blank" title="Weibo">
<i class="fa fa-fw fa-weibo"></i>
Weibo
</a>
</span>
</div>
</section>
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">
<div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#产品"><span class="nav-number">1.</span> <span class="nav-text">产品</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#思路的雏形与改变"><span class="nav-number">1.1.</span> <span class="nav-text">思路的雏形与改变</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#思考"><span class="nav-number">1.2.</span> <span class="nav-text">思考</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#克制"><span class="nav-number">1.3.</span> <span class="nav-text">克制</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#设计"><span class="nav-number">2.</span> <span class="nav-text">设计</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#气质与迭代"><span class="nav-number">2.1.</span> <span class="nav-text">气质与迭代</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#字体"><span class="nav-number">2.2.</span> <span class="nav-text">字体</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动画"><span class="nav-number">2.3.</span> <span class="nav-text">动画</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#开发"><span class="nav-number">3.</span> <span class="nav-text">开发</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数据源与运营压力"><span class="nav-number">3.1.</span> <span class="nav-text">数据源与运营压力</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#内测"><span class="nav-number">3.2.</span> <span class="nav-text">内测</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#上架后与用户反馈"><span class="nav-number">3.3.</span> <span class="nav-text">上架后与用户反馈</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#尾巴"><span class="nav-number">4.</span> <span class="nav-text">尾巴</span></a></li></ol></div>
</div>
</section>
<!--/noindex-->
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
© 2016 -
<span itemprop="copyrightYear">2025</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">Roc Zhang</span>
</div>
<div class="powered-by">
由 <a class="theme-link" href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> 强力驱动
</div>
<div class="theme-info">
主题 -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">
NexT.Mist
</a>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.0"></script>
<script id="dsq-count-scr" src="https://roczhang.disqus.com/count.js" async></script>
<script type="text/javascript">
var disqus_config = function () {
this.page.url = 'http://www.roczhang.com/Mr.Weather%20%E7%9A%84%E6%95%85%E4%BA%8B.html';
this.page.identifier = 'Mr.Weather 的故事.html';
this.page.title = 'Mr.Weather 的故事';
};
var d = document, s = d.createElement('script');
s.src = 'https://roczhang.disqus.com/embed.js';
s.setAttribute('data-timestamp', '' + +new Date());
(d.head || d.body).appendChild(s);
</script>
<script>
var cloudTieConfig = {
url: document.location.href,
sourceId: "",
productKey: "a79c1aa145ae437d8c58e9e10aa1c84a",
target: "cloud-tie-wrapper"
};
</script>
<script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
</body>
</html>