-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio-1.html
173 lines (153 loc) · 7.16 KB
/
portfolio-1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>作品1</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>绘本森林</h1>
<div class="details-and-share">
<div class="project-details">
<ul>
<li>
<div class="date">
<a href="#"><i class="icon icon-clock3"></i>2017.3-2018.4</a>
</div>
</li>
<li>
<div class="tags">
<a href="#"><i class="icon icon-tag2"></i></a>
<ul>
<li><a href="#">App</a></li>
<li><a href="#">UI</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>
<!-- === Project Body === -->
<div class="project-body">
<h2>绘本森林App是一款儿童阅读类产品。主要受众为上海市和长三角一带中小学生。</h2>
<p>主要有手机终端和Pad终端，又分为Android和iOS版本。我的主要职责是负责日常迭代维护更新等APP相关设计工作。既要高质量高效率的完成设计需求也要考虑不同终端和不同系统的区别和设计实现的统一性。</p>
<img src="img/A01.png" alt="A01" />
<h2><br/></h2>
<h2>首页</h2>
<p>首页采用沉浸式场景来打动低龄学童，由于产品IP本身很有辨识度，市面上没有同类绘本App使用森林作为关键词。那我设计的时候就以这个为切入点，绘制了更符合产品和受众人群的森林场景，吸引他们进入这个可爱友好有趣应用。</p>
<img src="img/A02.png" alt="A02" />
<h2><br/></h2>
<h2>书架页</h2>
<p>利用偏写实性书架表现我收藏的书和下载的书，同时能让人有想填满自己的书架的欲望和阅读的本质更贴合。</p>
<img src="img/A03.png" alt="A03" />
<h2><br/></h2>
<h2>勋章图标</h2>
<p>本来勋章没有这么多，这次改变又加入了十几个。那根据不同类别设计勋章图标，既要有统一的样式又要有不同的区别。并要考虑后期延展性来设定和规范样式。比如每个图标上都有一个飘带，飘带的颜色代表不同类别，或者后期还可以做一些不同的飘带样式。然后就是飘带后一个形状，现在还比较简单，后期也可以做更特异化的形状。</p>
<img src="img/A04.png" alt="A04" />
<h2><br/></h2>
<h2>项目贡献</h2>
<p>项目负责期间，App下载量稳步上升，公司头牌产品，并被评为2017年“十佳”教育信息化产品奖</p>
<h2>项目链接</h2>
<p><a href="https://itunes.apple.com/cn/app/id965720136?mt=8">https://itunes.apple.com/cn/app/id965720136?mt=8</a></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>