别让我等!别让我想!别让我烦!

4
1063

别让我等!别让我想!别让我烦!各位UED们的目标。别让我等:优化你的代码,压缩你的Javascrip、CSS,图片要指定大小……;别让我想:这个应该比较好理解,就是这个是点击标题呢,还是旁边的图标呢?还是一句cursor:pointer来解决吧,这年头浪费的脑细胞太多了,设计就简单些吧;别让我烦,这个链接怎么点击不上啊,怎么这个图片挡住了内容呢,怎么这么多不相关的广告啊,怎么找不到我想要的啊,怎么……

某团队说要做“地球上做好的UED”,好吧,那我也学学“地球上做好的UED”,所以折腾WordPress又开始了,之前用手机的UC浏览本博客,在搜索内容的时候发现基本上是陷于囹圄了,因为之前的搜索没有提交的submit,只有输入的text,在电脑上的任何浏览器只要输入搜索的东西,小拇指一个回车,想要的东西基本上就呈现在你面前了,可是手机上就麻烦了,UC浏览器输入之后,按上确定,无动于衷,Opera也是一样的。

所以这个得改,另外没有submit相信难住了很多人搜索的脚步,所以昨晚上花了一个小时,加入搜索旁边的提交按钮,相信让访客的体验程度肯定是有0.01的提高,时间主要花在了CSS上,为了显得跟主题协调以及某些浏览器下的CSS HACK,不过后来还是去掉了CSS HACK。更麻烦的是密码框也被牵扯进来了,所以一块给加上了。

难处就在于input全局样式下处理submit的样式,来看看Google的方法:

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
.jhp input[type="submit"], .gssb_c input, .gac_bt input {
    -moz-user-select: none;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: default;
    font-family: arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 29px;
    line-height: 27px;
    margin: 11px 6px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
.jhp input[type="submit"]:hover, .gssb_c input:hover, .gac_bt input:hover {
    background-color: #F8F8F8;
    background-image: -moz-linear-gradient(center top , #F8F8F8, #F1F1F1);
    border: 1px solid #C6C6C6;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #333333;
}
.jhp input[type="submit"]:focus, .gssb_c input:focus, .gac_bt input:focus {
    border: 1px solid #4D90FE;
    outline: medium none;
}
.gssb_c input, .gac_bt input {
    height: 27px;
    margin: 6px;
}

本文转自http://onedou.com[OneDou Blog] 声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0共享协议. 转载请注明http://onedou.com/[OneDou Blog]
好吧,原来也可以input[type=”XXX”]这样写啊,好吧,关键就在于这里了!看看改好之后的在侧边栏上的搜索是不是很容易让你知道怎么操作?这样也就向Don’t make me think靠近了。

生活中但愿也是Don’t make me think,简简单单,不再复杂,不再让我纠结!

4 评论

发表回复

× 4 = 16