福子
少了崇拜,多了感悟
随笔- 5  文章- 1  评论- 38 
博客园  首页  新随笔  联系  管理  订阅 订阅
2009年6月30日
仿天涯底部固定漂浮导航
有些东西找起来很麻烦,好用的又不太容易找到,之前看到很多用JS写的,固定漂浮这种效果拖动时难免会产生抖动自己对CSS还是蛮有好感的,找来找去找到了天涯,仔细一看是纯CSS的,没有使用JS效果我觉得它比之前看到的要精简些不用嵌套多余的DIV 简单的看一下CSS样式部分:

body { background-image:url(text.txt); /* for IE6 */

background-attachment:fixed; }

 #bottomNav { background-color:#096; z-index:999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */

 _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible; }

HTML部分加上这个id为 #bottomNav 的DIV即可:
<div id="bottomNav">固定漂浮物在此处O(∩_∩)O~</div>
再看看这些需要注意的地方:
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
看到 _top 大家都知道是为IE6独家准备的,但是当我只加了上面这句时,IE6下拉动滚动条看到的这个漂浮物是抖动的-_-||| 解决方法我们为IE6添加这样一条语句:
background-image:url(text.txt);

注意这里的 text.txt 其实不需要有这个txt文档,txt的文件名叫什么看自己喜好喽,如此一来我们就解决了IE6下的缓动问题。 PS:你可能会对 text.txt 和 expression 感到郁闷,也有人使用多嵌套一层 DIV 做了个假滚动条实现了这个方法,当然这种方法在也会相应的改动下默认属性,可这种写法和之前网站融合起来很郁闷,要添加一个DIV(因为我之前没有在最外层写DIV.wrap)。相比之下我更喜欢天涯这样的纯CSS写法,这里是DEMO

 

固定漂浮选择这样写的理由:

纯CSS的写法,避免了多嵌套一层外部DIV制作假滚动条造成的网站重构麻烦的尴尬场面。同时不会有JS漂浮所产生的抖动效果。

可能更好的我没有发现,如果你有更多更好的方法别忘了告诉我哈~

 原文链接:http://www.uecss.com/index.php/fixed-floating-imitation-navigation/

 抱歉之前这里 <div id="bottomNav"> 的为中文引号 现已改为英文引号~

posted @ 2009-06-30 10:39 福子 阅读(3741) 评论(20) 编辑
2009年6月19日
注册流程及细节部分优化整合

 

公司网站改版在紧锣密鼓的进行中,觉得目前这版的注册流程还需要再优化些就抽空搜罗下前人的经验,整合如下:

先来看看helicopter的这篇07年的译文
Adaptive Path的一项研究比较了包括博客平台、社交网络、社区及其他四类、共20家2.0公司的注册页面在以下几方面的表现:
  
  • Homepage content 主页内容
  • Initial calls to action 吸引注意力的首元素
  • Registration flows 注册流程
  • Error handling 错误处理
  • Finding and inviting friends 寻找、邀请朋友
  • New user calls to action 吸引新用户注意力
  
   从所得数据中,他们总结出注册页面的若干模式以及提出四条设计指南。内容太多,无法迅速翻译完毕。详见原文,可免费下载。含大量例子,巨有用!
  
  http://www.adaptivepath.com/ideas/reports/signup/
  
  看下这几条建议:
  
  1. Give the user good reasons to join 为用户提供加入的好理由
  
  To persuade a new user to sign up for a service, a site should strive to increase perceived value while reducing the investment required to join. The strategies in this section focus on motivating users to join by communicating benefit to the user both explicitly and implicitly.
  要说服新用户注册,网站应致力于提高可感知价值,同时降低用户加入所需要投入的成本。战略集中于从显性与隐性两方面同时向用户灌输加入的好处,以提供动力。
  
  2. Make the sign-up process feel effortless 设计使用户感到轻松的注册过程
  
  increasing the cost/benefit ratio by making it painless to join. If signing up feels quick and easy, users will be more inclined to try it out, even if they are unsure how it will benefit them.
  通过轻松的注册过程,提高成本/效益比例。如果注册过程是便捷快速的,用户会更倾向于尝试各种其他服务,就算他们并不确定到底会得到什么好处。
  
  
  3. Don’t leave new users hanging 不要悬置新用户
  
  Guidance of new users should not stop once they’ve registered. Dumping new users on an unfamiliar page with no clear calls to action may leave them baffled as to what they should do next. Instead, reward new users with a welcome message and implicit and explicit guidance as to what they can do next.
  对新用户提供的指引信息不应在他们注册后就停止。将新用户抛弃在一个不熟悉的页面或缺乏他们下一步该如何行动的指示会使用户感到迷惘。因此应向新用户提供欢迎信息,隐形或显性地指导他们下一步可以做什么。
  
  4. Accelerate initial connection-making 加快初始的联系建立过程
  
  Building an adequate social network is one of the greatest barriers facing users of a new community. Without friends, community-based services lose much of their value. Thus, helping the user to quickly find and add friends en masse is essential to retaining users.
  对于新加入某个社区的用户来说,如何建立属于自己的社交网络是最大的障碍。没有好友,基于社区的服务会失却很大价值。因此,帮助用户迅速找到和加朋友是留住用户的关键。

再来看下用户注册细节部分(参考KDUED.COM)
1、简化页面,扫清干扰项
2、注册页面主体宽度小于800像素,利于用户聚焦操作。
3、注册步骤引导使用文字,不要用图片。
4、密码强度提示需提前让用户了解强弱极限度,辅助提示如何设置高强度密码。
5、操作提示语尽量少且简短,并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
6、警告语在填写出错后即时触发,不填错不触发。
7、用户已正确填写,给出鼓励提示。
8、验证码简化,全数字或全英文(全大写或全小写),要有即时更换验证码的操作功能。
9、注册提交按钮同时包含同意条款,服务条款重要级别低,可放在按钮下方。
10、注册页面中不设置跳出页面的链接,可用浮层替代。

让我们对照着图示来分析下吧:

1、简化页面,扫清干扰项
用户在注册时,是在进行聚焦操作,我们也不希望在注册完成之前用户被别的元素干扰,导致离开。例如,去掉注册页面的导航及广告等元素,会注册页面更加简洁。

淘宝注册页顶部
(淘宝注册页顶部)

Windows Live注册页顶部
(Windows Live注册页顶部)

2、注册页面主体宽度小于800像素,利于用户聚焦操作。

先来看下几个用户体验相对较好的网站的注册页面实际宽度统计:

淘宝 width:734px

Yahoo英文站 width:753px

Live width:700px

腾讯 width:750px

从上面这些数据看来,注册页面的总体宽度W < 800px,之所以不统一于网站的其他页面,是考虑到800以内的宽度有利于用户的聚焦操作,如果我们采用用1000左右的宽度,用户在阅读的时候左右扫视内容会产生来回的摇头现象,这并不是我们愿意看到的,因此800以内似乎是目前的理想宽度。

3、注册步骤引导使用文字,不要用图片。

注册步骤引导是图片还是文字?文字下载时间更快

淘宝注册步骤引导
纯文字的淘宝注册步骤引导

百度注册步骤引导
使用部分图标的百度注册步骤引导

4、密码强度提示需提前让用户了解强弱极限度,辅助提示如何设置高强度密码。

腾讯的有密码强弱提示供用户参考(腾讯有密码强弱提示这项供用户参考)

淘宝目前没有提供密码强弱提示这项淘宝目前没有提供密码强弱提示这项,但给出了“怎样设置安全性高的密码?”这项,遗憾的是当我单击此链接后跳到了一个新的页面。

Yahoo英文版的两者结合(Yahoo英文版的两者结合,且没有新页面的跳转,而是利用巧妙地布局默认有条理的给出安全性建议)

5、操作提示语尽量少且简短,并用浅颜色弱化。操作提示语与注册字断垂直排列比平行排列更好。
提示语多少给用户带来的心理暗示
提示语多少给用户带来的心理暗示
不预设提示语,感觉规则少,简单

提示语多少给用户带来的心理暗示
预设提示语,感觉应该规则很多,复杂

提示语多少给用户带来的心理暗示
如果实在有必要预设操作提示语,应尽量简化提示语,参考百度

操作提示语的位置摆放
操作提示语的位置摆放
提示语与注册字段平行排放,好处是:减少页面长度;
坏处是:页面文字较多且密集,给用户以“规则很多”的心理暗示,左右同一行宽度增加,与字段对照阅读时需左右摇头。

操作提示语的位置摆放
与注册字段垂直排列的好处是:阅读时不需要左右摇头、方便对照,操作提示语和字段之间有明确的从属关系,不用像左右平行布局要做对应分辨;操作提示语可占据更宽空间,显得更为简洁。
坏处是:可能导致页面过长

操作提示语的呈现方式
腾讯操作提示语的呈现方式

淘宝操作提示语的呈现方式
腾讯和淘宝的注册页面看起来刚好相反,可能淘宝更倾向于密码的安全性吧

Google操作提示语的呈现方式
Google体现的更为明显,注册字段黑体加粗,操作提示部分浅灰体现


大多数网站采用两端向中间靠拢的布局方式,更方便用户聚焦操作

6、警告语在填写出错后即时触发,及未填写时的友好提示。


警告语在填写出错后即时触发,对于简短的表单项还可忍受,如果碰到较长较复杂的页面,用户很难再次尝试。


不同的情况,给出不同的提示语,更贴近用户的感受。

7、用户已正确填写,给出鼓励提示。


8、验证码简化,全数字或全英文(全大写或全小写),要有即时更换验证码的操作功能。


从网站的安全方面考虑,验证码越复杂越安全,从用户体验考虑,验证码越简单越好。

9、注册提交按钮同时包含同意条款,服务条款重要级别低,可放在按钮下方。


蜕变网采用了常见的排列方式,注意此刻注册协议的复选框默认已勾选。

大众点评网将提交按钮和注册协议压缩成了一行排列,最大限度的节约页面长度,尽可能的使整张页面左右两边平衡。

似乎后两者简少了有效内容的长度,腾讯将注册协议放到提交按钮的下方,似乎是不想让注册协议干扰用户,同时有意的加重突出按钮上的确定两个字,似乎一切都那么自然、简单。

10、注册页面中不设置跳出页面的链接,可用浮层替代。

淘宝目前没有提供密码强弱提示这项淘宝目前没有提供密码强弱提示这项,但给出了“怎样设置安全性高的密码?”这项,遗憾的是当我单击此链接后跳到了一个新的页面。

看完这10项注册细节问题后似乎还需要补充些,多吸纳一些大家的观点:

对于用户陌生的网站,或是竞争激烈的站点(已经有品牌效应的就不说了)


在蜕变网的注册页右侧草图上我用上图中右边部分替换掉左边的部分,因为保护用户的隐私信息是最基本的事情,在这里我选择将站点的优势体现展示出来,同时加深了用户对网站的理解。

再来看下出侧完成后的引导,是否给用户多个选择呢?

这是采自叽歪网的注册成功页面,它给出了用户多种选择。


不同情况不同需求,在简单的注册完成后,并没有采集到我们想要的信息,给用户一个大体的概念(当然这些看起来不是一般的功能按钮),
在这个页面我留了一个“开始蜕变”的按钮,点击后会引导用户进行人生GPS、目标进度进行的过程中同时会收集一些注册时没有采集的但对我们来说很重要的信息。9.18的新版蜕变网是否用到这些,目前不能确定,文字部分是自己整凑的,新版会有新的结构树及文字介绍。

原文地址:http://www.uecss.com/index.php/registration-process-details-optimization-integration/

posted @ 2009-06-19 16:47 福子 阅读(1296) 评论(5) 编辑
2009年5月21日
53个运用办公文具元素设计的网站实例欣赏
最近我发现一种有趣的趋势,很多设计师都在使用办公文具比如钢笔、铅笔、标志、回纹针、报纸杂志、书写纸、文件持有人(document holder)以及笔记薄去设计网站。现在的设计师喜欢观察人们如何运用及处理事物的,并将这些体验表达在他们的设计之中。尽管这不会是一个共同的趋势,但还是作为一种新的设计风格流行起来,随着越来越多的设计师注意到它们,并将他们运用到自己的工作上,这种新的趋势逐渐显露出来了。



上面的算是封面吧,具体的53个创意设计往下看:

01. Simpleart



Official Link

02. Speaklight


Official Link

03. Brandstorm


Official Link

04. Blueprintds


Official Link

05. Mitxel


Official Link

06. Revota


Official Link

07. Wrapragecure


Official Link

08. Sqcircle


Official Link

09. Njrebel


Official Link

10. Homedesignfind


Official Link

11. Woonky


Official Link

12. Rxmonsters


Official Link

13. Modatrading


Official Link

14. Stangursky


Official Link

15. 5pts-interactive


Official Link

16. A-Antonov


Official Link

17. Tischlerei-Klehn


Official Link

18. Dann Whittaker Creative


Official Link

19. Rebariley


Official Link

20. Kinoz


Official Link

21. Emrahduzer


Official Link

22. Jeremythomas


Official Link

23. Simplyfired


Official Link

24. El Rincon De Blablaton


Official Link

25. Nocopycat


Official Link

26. Pointofe


Official Link

27. Tohavit


Official Link

28. Nisgia


Official Link

29. Studs-Up


Official Link

30. CodingMonkeys


Official Link

31. Porliniers


Official Link

32. Freshivore


Official Link

33. Edesign


Official Link

34. Filmschool


Official Link

35. Taufiq-Ridha


Official Link

36. Planet Web Group


Official Link

37. Ekoudruga


Official Link

38. Tempera


Official Link

39. Unevie Des Voyages


Official Link

40. Agencynet


Official Link

41. Games For Her By You


Official Link

42. Elanchicas


Official Link

43. Catalyst Studios


Official Link

44. RespiroMedia


Official Link

45. Anton.Shevchuk


Official Link

46. Isabel-Abedi


Official Link

47. Narfstuff


Official Link

48. Doodle Friendzy


Official Link

49. Chris Likes To Draw


Official Link

50. Ispoil


Official Link

51. Opelika Daily News


Official Link

52. John Joubert


Official Link

53. Boyles Webdesign


Official Link

在这里展示53个案例,你会发现各种各样的高度创意,这些出鼓舞人心的外观设计似乎都用了静态布局的趋势。我们不想让你遵循这种趋势,只是想通过此文来激发你的想象力,以创建自己的设计风格,因为您的网站代表你和你的品牌。
PS:对应的网站链接感觉好多 -_-! ,又需要的话可以到原文中查看链接。

英文原文:50+ Beautiful Website Designs Using Office Stationery
翻译原文:53个运用办公文具元素设计的网站实例欣赏

转载请附本链接:http://www.uecss.com/?p=525
posted @ 2009-05-21 17:26 福子 阅读(420) 评论(0) 编辑
2009年5月7日
[原创]淘宝栅栏布局模块化命名浅析

来源:Jeffpan的博客    转载请本附链接:http://www.uecss.com/?p=350

      来公司的时间不算很长,最近公司现有的蜕变网将要进行一次大的改版,作为公司的前端开发人员自然要在行动前做出些准备,于是先是为网站做了栅格化设计,总宽950的24栏栅格。OK,废话不多说,下面赶紧开始。

看之前建议先看一下我收藏的一篇 《栅格化研究总结前析》里面对A a i 950 24 做了一定的解释可能 字母 a 的大小写有些出入

先来看下淘宝网的一处3栏布局:

淘宝栅栏布局

这里是对应的代码:

grid-c3-s5e7

我们可以看到 class=”grid-c3-s5e7″ 这个命名似乎有些特别,
再看看其包含的class=”col-main” 和 class=”col-sub” 以及 class=”col-extra skin-orange”

再多一些样本代码:

.grid-c, .grid-c2-s4, .grid-c2-s4f, .grid-c2, .grid-c2f, .grid-c2-s6, .grid-c2-s6f, .grid-c2-s7, .grid-c2-s7f, .grid-c2-s8, .grid-c2-s8f, .grid-c2-s9, .grid-c2-s9f, .grid-c2-s10, .grid-c2-s10f, .grid-c2-s11, .grid-c2-s11f, .grid-c2-s12, .grid-c2-s12f, .grid-c3, .grid-c3f, .grid-c3e, .grid-c3d, .grid-c3c, .grid-c3b, .grid-c3-s5e7, .grid-c3-s5e7f, .grid-c3-s5e7e, .grid-c3-s5e7d, .grid-c3-s5e7c, .grid-c3-s5e7b, .grid-c3-s9e6, .grid-c3-s9e6f, .grid-c3-s9e6e, .grid-c3-s9e6d, .grid-c3-s9e6c, .grid-c3-s9e6b, .grid-c3-s8e8, .main-wrap, .col-sub, .col-extra {
}

我们选择其中一个来仔细看下可以尝试着作出这样的解释:

关于grid-c3-s5e7

上图中 s5e7 里的 5 和 7 代表的是在 24栏 中所占的栏数。

如下这样更方便我们进行模块化操作:

.grid-c3 {}
.grid-c3-s5e7 {}
.grid-c3-s5e7 col-main {}
.grid-c3-s5e7 col-sub {}
.grid-c3-s5e7 col-extra {}

.grid-c2 {}
.grid-c2-s7f {}
.grid-c2-s7f col-main {}
.grid-c2-s7f col-sub {}

      稍微注意下你会发现 上例中我只提到了 s, e 的解释,并没有对 f, b, d 做出解释,因为我觉得原理我们已经掌握,f b d 只是淘宝因内容区域不同而采取的命名方法(应该可以这样理解)。
原本 -s5e7 , -s7f , -s5e7d , -s5e7b , -s9e6c 之类的就不能解释 DIV+CSS命名规则有利于SEO
只是为了让我们更方便的使用,我这个人喜欢简洁些的风格,因此在这里我对它进行了升级。

下面看下整合出属于自己的栅栏布局命名,我将用在公司蜕变网的新版上,来看下我的命名方法:

三栏页面栅格布局-例:部分列表页  Grid-c3-c6e5
(三栏页面栅格布局-例:部分列表页) Grid-c3-c6e5

class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 简洁版
注意这里的数字和上图中的数字进行对比,你会发现我省掉了w13即最宽的那一栏main(通常最宽的为main),
我将c 和 e这样除了main之外的窄栏通常固定宽度, main的宽度则为width:100%; 具体实现如下:
假设最外层的div 为 <div class=”content”>
.content {
 position:relative;
 width:总宽减窄栏的宽度;
 padding-left&right:窄栏的宽度;
}

窄栏浮动,main 绝对定位
.main {
 position:absolute;
 top:xx;
 left&right:窄栏的宽度;
}

先作下简单的说明,这里与淘宝网命名不同的是我没有采取 s(sub)和 e (extra) 这样的习惯,
而是用到了 w(west), c(center), e(east)
—-我将网页上的方位分为上北下南左西右东
不使用 l (left) 等上下左右表示是因为在如宋体等字体下 left 里的 l 与数字1 很容易造成混乱。

下面是一系列方位栅栏模块化命名例如:

(两栏页面栅格布局-例:首页)  Grid-c2-e5
(两栏页面栅格布局-例:首页) Grid-c2-e5

 (两栏页面栅格布局-例:商品详细页)  Grid-c2-w6
(两栏页面栅格布局-例:商品详细页) Grid-c2-w6

(两栏页面栅格布局-例:注册流程页)  Grid-c2-e7
(两栏页面栅格布局-例:注册流程页) Grid-c2-e7

方案一:(三栏页面栅格布局-例:部分列表页)  Grid-c3-c6e5
方案一:(三栏页面栅格布局-例:部分列表页) Grid-c3-c6e5

方案二:(三栏页面栅格布局-例:部分列表页)  Grid-c3-c7e5
方案二:(三栏页面栅格布局-例:部分列表页) Grid-c3-c7e5

(三栏页面栅格布局-例:商城主页、个人空间预览页)  Grid-c3-w6e5
(三栏页面栅格布局-例:商城主页、个人空间预览页) Grid-c3-w6e5

(三栏页面栅格布局-例:个人空间管理页)  Grid-c3-w5e6
(三栏页面栅格布局-例:个人空间管理页) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 这类的完整版去掉main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″ 这类简洁版(很快可以猜出-w5e6所对应的宽栏位c13,即左边占24-5-6=13a的main),
不想用上面的方法为main定width:100%;

那我们可以这样:

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

      .grid-c3-c6e5的名字看起来蛮长的,考虑过去掉.grid-c3-c6e5中的 grid 这个单词,但似乎不太方便阅读,况且后面会出现 .mode-a , .mode-b 之类的模块命名,统一下会更好;
这里的命名习惯建议使用的表意命名《超越CSS》有提到过。

      可以看到简洁版的只有3个字母出现 w (west), c (center), e (east) 这里已经做了解释
不用记太多的字母含义,grid-c3-c6e5这样的命名方法让我们更好的对栅格化布局进行操作。

转载请附本链接:http://www.uecss.com/?p=350
蓝色理想:http://bbs.blueidea.com/thread-2926561-1-1.html

补充:
光顾着解释命名了,再来回顾下这段代码的结构:

grid-c3-s5e7

你会发现”宝儿们”把 col-main 放到了 col-sub 和 col-extra 上面,这么做很直白为了SEO优化,将最重要的内容优先展示在搜索引擎面前。
他的实现方法我想大家应该比我清楚。
关于 grid-c3-s5e7 子级的命名我想大家不必一味参照淘宝的做法,我想每个人都有自己对web的理解和看法。
比如:我可能会选择

网易主页的命名 左边 productMain 中间 midContent 右侧 rightContent

腾讯主页的命名 左侧 resArea 中间 proArea 右侧 adArea

甚至是 左侧 leftsidebar 中间 main 右侧 rightsidebar

说到命名之前我在给图片命名时,发现有些以字母AD开头的图片名称,在遨游浏览器下是不能显示的,估计是当成广告给屏蔽掉了。
以上内容仅供参考讨论,愿我们在web的发展历程上越走越远。(母亲节快到了,不能只关注web哦~)

posted @ 2009-05-07 17:47 福子 阅读(2240) 评论(13) 编辑
2009年4月7日
写下第一笔

落地生根

自己的blog 域名没有备案  挂掉了,

虽然里面的东西不多,才开不久,就哦了。。

蛮郁闷的,干脆用另一个 cnpass.net 做个转发 搬来和cnblogs 们  一起住吧  嘎嘎 ,先写到这儿~!

这里的插入表情   还要弹出新页面呀

posted @ 2009-04-07 11:27 福子 阅读(32) 评论(0) 编辑
仅列出标题  
Copyright ©2012 福子