/
section-wenji-1.html
157 lines (140 loc) · 7.68 KB
/
section-wenji-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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档详情页</title>
<link rel="stylesheet" type="text/css" href="css/section.css">
</head>
<body class="section">
<div class="section-content">
<header class="tuji-xiugai">
<h1>
<a href=""><img class="log-img" src="images/personal-web.png"></a>
<p class="tuji-adapt-none">童彪-前端工程师-本</p>
<span class="logo">personal web</span>
</h1>
</header>
<section class="section1 wenji-1-section1 adapt-wenji1-secion">
<nav class="nav1 wenji-1-nav1">
<p class="nav-top-img tuji-adapt-none"><img src="images/tophead.png"></p>
<ul>
<li >
<a href="section.html">
<i class="icon1 "></i>
<p href="">首页</p>
</a>
</li>
<li>
<a href="section-tuji.html">
<i class="icon2"></i>
<p href="">我的图集</p>
</a>
</li>
<li class="nav-li3">
<a href="section-wenji.html">
<i class="icon3 ul-li-i3"></i>
<p href="">我的文集</p>
</a>
</li>
<li>
<a href="section-jianjie.html">
<i class="icon4"></i>
<p href="">我的简介</p>
</a>
</li>
<li>
<a href="section-yinyue.html">
<i class="icon5"></i>
<p href="">我喜欢的音乐</p>
</a>
</li>
</ul>
<article class="tuji-none adapt-wenji1-article">
<p class="adapt-wenji1-p-top">
<a class="adataa-a3" href="section-wenji.html">返回文档列表</a></p>
<ul class="adapt-wenji1-ul">
<li class="adapt-wj1-li1">搞好站点内部的检索功能你知多少?</li>
<li class="adapt-wj1-li2">更新时间:2013-04-16 16:29:42 点击次数:843次</li>
<li class="adapt-wj1-li3">1、搜索热门关键字,能让用户点的不让用户区输入</li>
<li>,这就是人性化,搜索框下最好有经常被检索的关键</li>
<li>字,这个关键字可以用上述第2点获取。而且对于销</li>
<li>售型的网站不同时期都要及时的更新。</li>
<li class="adapt-wj1-li3">2、搜索结果页面,搜索出来后的结果页面也是不可</li>
<li>忽视的,经常看淘宝的用户知道,搜索结果页面上方</li>
<li>会有产品所属的分类,所属的型号,品牌、其实还可</li>
<li>以加入一排相关搜索关键字,类似百度下方的相关搜</li>
<li>索。总之一步步的让用户根据自己的需求找到相应的</li>
<li>产品,便捷从细节开始。</li>
<li class="adapt-wj1-li3">3、搜索提示功能,用户输入关键字 ,自动出现下拉</li>
<li>框显示相关搜素关键词,这个功能大家都很熟悉了,</li>
<li>比如百度 淘宝都在用;实用性很强,的确为用户提</li>
<li>供了很多方便;其实这个功能还有其他的作用,就是</li>
<li>引导用,避免了原来用户随意输入不太符合规则的关</li>
<li>键字,导致搜搜无结果的尴尬。尤其对产品销售型的</li>
<li>网站,友好的提示,让客户最快找到他要的东西。</li>
<li class="adapt-wj1-li3">4、用户搜素记录,用户在搜索的时候,做一下记录</li>
<li>处理,记录一下用户输入的关键字。做搜索数量统计</li>
<li>发觉自己网站用户的搜索倾向 ,配合高搜索率的</li>
<li class="adapt-wj1-li3">从这个功能的延伸,就是尽可能的获取用户的详细信</li>
<li>息,这个可以配合网站会员功能,具体实现起来:当</li>
<li>用户以登陆方式搜索时候,记录搜索的关键字及用户</li>
<li>会员ID 。这样就获得了用户信息,便可通过邮件等</li>
<li>方式将其感兴趣的内容传达给他。</li>
</ul>
<div>
<p class="adapt-we1-p1"><span>上一篇: </span><a href="">这些对站点进行修改时的经验你知多少</a></p>
<p><span>下一篇: </span><a href="">搞好站点的脉络建设也是成功的关键一步</a></p>
</div>
</article>
</nav>
<section class="section2 adapt-wenji-1-section">
<article class="wenji-article ">
<p class="public-p tuji-adapt-none"><span><a href="section.html">首页</a></span> > <span><a href="section-wenji.html">我的文集</a></span> > 文档详情页</p>
<article class="wenji-1-article">
<article class="inside-article tuji-adapt-none">
<h1>如何做一份让工程师泪流满面的标注?</h1>
<p>
<span class="wenji-1-span1">更新时间:2016-04-16 16:29:42 </span>
<span class="wenji-1-span2">点击次数:843次</span>
</p>
<article class="inside-article-content ">
<ul>
<li class="wenji-1-li1">没错,Markman 是传说中的标注神器,看起来也确实方便快捷,但是当一个页面中,要同时标注间距、</li>
<li>大小、颜色和字号时,过多的信息一齐扔给工程师,就会让人有些抓狂。</li>
<li class="wenji-1-li1">这里的标注虽然都有清晰的箭头指示,但却并不具有视觉逻辑,或者说呈现出来的视觉逻辑并不符合开</li>
<li>发逻辑。工程师在搭建一个页面的时候,会先去架构布 局,一块内容一块内容划分好,接着填充进内</li>
<li>容,最后来修改视觉的样式。那么我们也应该按照顺序,先告诉人家每个模块的间距啦大小啦,再告诉</li>
<li>人家用什么字体 和颜色,也就是先有布局标注,再有样式标注。</li>
<li class="wenji-1-li1">标注信息分类之后,我还会给标注本身设置共享样式:块面通常用蓝色的遮罩,区别不同百分比时则用</li>
<li>红黄绿的遮罩,数字间距用红底白字,视觉样式则用蓝 底白字,这样的好处是:对与设计师,可以快</li>
<li>捷修改所有标注样式;对于工程师,快速建立对这套标注视觉语言的认知,明白不同颜色所代表的信息</li>
<li>属性,更方便的 找到他所需要的信息。</li>
<li class="wenji-1-li1">设计实现之前,就和工程师们一起统一一套样式规范,除了常见的颜色和字体之外,我还会把通用的 </li>
<li>UI 组件拿出来,一半是针对系统原生控件的样式定制(alert/toast/radio btn/switch…),一半则</li>
<li>是完全自定义的 UI 组件(产品自己的 UI kit)可以是任何会高频复用的产品功能性的东西,比如这</li>
<li>里的 SKU 选择器和按钮。</li>
</ul>
</article>
<p class="weiji-1-content-bottom1p weiji-1-content-bottom3p"><a href=""><span>上一篇:</span>这效果超火!教你创建高大上的多边形字体</a></p>
<p class="weiji-1-content-bottom1p weiji-1-content-bottom4p"><a href="section-tuji-1.html"><span>下一篇:</span> PIC详情页 </a></p>
</article>
</article>
<aside class="wenji-1 tuji-adapt-none">
<p class="wenji-1-p1">精彩图集</p>
<img class="wenji-1-img1" src="images/index_07.jpg">
<img class="wenji-1-img2" src="images/index_09.png">
</aside>
</article>
</section>
</section>
<footer>
<ul>
<li class="li-1">我的微博:</li>
<li class="li-2">如需客服请拨打:15502953003</li>
<li class="li-3">咨询QQ:690534989</li>
</ul>
<p>Copyright © 2010-2013 uidiv.com All Rights Reserved Powered By PHPMyWind</p>
</footer>
</div>
</body>
</html>