08SHOW Dribs And Drabs | 网站信息构架、足球

网站中常用见的字体就是“宋体”。但现在很多电子商务网站都会有标价，这就涉及到了符号和数字，然后品牌和内容中又会有英文和字母，这就又涉及到英文字体，光用“宋体”会不协调。因为“宋体”本身是为中文字符设计的，符号、数字和英文、字母当然也应该使用英文字体来定义显示才会更合适。

前几天做一个项目我们决定使用 font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋体),sans-serif 的字体显示顺序（先别管合理不合理），我们测试了IE6/IE7/IE8/Firefox/chrome/(使用以上几款浏览器访问我们网站的用户加起来占90%以上)，在IE7/IE8浏览器中显示英文和数字时字体有区别（见下图）


“Aisleep”和“88”感觉上面有明显的锯齿而下面的感觉粗厚平滑一些。

大家知道，这是因为IE7/IE8浏览器中[属性] > [高级]选项卡 > [多媒体]有一个ClearType(
增强屏幕字体)属性，默认是被选中的原因(见下图)。

如果把这个选项去掉勾，那IE7/IE8浏览器显示的字体就和其它浏览器统一了。反之，通过Windows控制面板 > ClearType Tuning 启用ClearType（见下图）


对于操作系统控制面板没有ClearType Tuning选项的可以通过以下方式实现：

1. 单击[开始]，单击[控制面板]，单击[外观和主题]， 然后单击[显示]。
2. 在[外观]选项卡上，单击[效果]。
3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框，然后单击该列表中的 ClearType[清晰]。

那以其它浏览器显示的字体就会和IE7/IE8统一了。(注：据我调查大多数XP操作系统默认为“标准”)

接下来会看到一些测试和整理，目的只是为了解字体在不同设置下的特性。这里不会有什么字体的推荐设置，因为我认为字体的设置和你所做项目的具体情况有关，没有什么设置是最好的，只要清楚字体在不同设置下的特性才能在以后的应用中得心应手。

测试：12px和14px的字体大小是中文网页中最常见的；字体family：黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体，雅黑字体在Vista以后的操作系统才有，但根据网站数据统计80%都是XP操作系统，目前兼容性会是个问题)；文字加粗容易分辨区别，浏览器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。下图显示效果不好，这里访问→http://docs.google.com/View?id=ds4hm4h_241f5cpdkff

整理：
从 ClearType角度：除了IE7/IE8外其它浏览器字体显示效果都是一样的，如何统一所有字体显示效果，方法上面已经说过。

* 黑体：字体大小12px/14px时 ClearType设置有作用（16px/18px/20px时无作用，22px以上会有作用）；
* 宋体（\5b8b\4f53）：字体大小 12px/14px/16px/18px时ClearType设置无作用（20px以上会起作用），所以 12px-18px之间的宋体在所有以上浏览器中能得到高度统一，但粗体的符号显示真的很不理想比如"@"；
* sans- serif：无衬线字，细心的一定发现唯独这类字体上图中出现了三种字体。在IE6和IE7/IE8中区别只是ClearType设置问题，字体其实就是Tahoma(无衬字)，但在FireFox和Chrome中调用的是宋体（衬字）（可设置）；
* Verdana：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。
* Tahoma：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。(仔细观察其实 Verdana和Tahoma字体外形是差不多的，只是单词中字母间距的区别。)关于Verdana和Tahoma再延伸一下，之前看到过根据 Jackob Nielsen用户调研显示，Verdana 字体是易读性最高的，推荐设置为第一默认字体，前提那是英文站点。但在中文站点又要老生长谈中英文排版问题，具体用什么字体要考虑文章中是否有斜体、粗体：
o 当ClearType设置为“标准”时，Tahoma比Verdana锯齿感强，而且Verdana字母的间距较宽的优势会体现出来。


o 当ClearType设置为“清晰”时，Verdana和Tahoma效果相近。

至于说Verdana由于字母间距的问题导致中文结合时效果不佳，各位有时间可以看看样稿http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp，对平常的浏览和排版的影响是微乎的（Verdana的字体文章会更长一些），如果我不那么刻意去比，几乎是看不出来的，何况是大多用户（我做过测试把两种字体的文章分开，分别给朋友、同事、家人等不是专业领域的人看，Ta们没有任何意识，并且在我指出字体区别后，他们对我说：“你也太无聊了吧？”）。所以具体用什么字体时，最关键还是考虑字体用在什么对象(系统、访问者)上，然后是字体是否会涉及到的变化：大小、斜体、粗体。
* Arial 和Helvetica：以上浏览器中视觉上几乎是一致的（IE7/IE8中感觉上颜色偏深一些），无锯齿感觉，但和Verdana、Tahoma 比起来整体偏小很多。可以把字体设置的大一些，CSS样式中就会多一行特殊的定义。

参考：

* 使用 ClearType 增强屏幕字体http://support.microsoft.com/kb/306527/zh-cn
* 细说字体 Sans Serif 与 Serifhttp://yx.takeback.net/121/serif-font.html
* 无衬线体http://zh.wikipedia.org/wiki/%E6%97%A0%E8%A1%AC%E7%BA%BF%E4%BD%93
* 15.3 Font family: the 'font-family' propertyhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font-family
* web-default-fonthttp://lifesinger.googlecode.com/svn/trunk/lab/2009/web-default-font.html
* 微软雅黑http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91[完]...

Read More...

淘宝新登录页：

1.登录页比旧版更简洁明了，但左边宣传图的设计实在没有加深我立刻登录的行为，反而让我停顿一会，在仔细看那几个草书写的是什么？放慢了登录行为。那还是旧版右边的内容更好些:)

2.登录框原先的设计考虑安全，现在考虑用户类型。其实说到登录框就要延伸到注册页，而且不仅是淘宝的注册页面还有支付宝的注册页面，淘宝注册页分[手机]和[邮箱]两种，支付宝的个人注册页也是分[手机]和[邮箱]两种，那为什么不整合一个登录框呢？

3[帐户名]其实这个标签取的对于淘宝的注册页面来说挺失败的，为什么？麻烦各位去看看支付宝的注册页面，在输入第一项内容时的提示语，竟然比淘宝本身的注册页面还要对应的多，难怪支付宝在注册的首页中不提“该手机号或者邮箱还能登录淘宝“，呵，纯属调侃！

4.[使用安全控件登录 ],我不清楚大多数用户是否能了解这句话，如果把文字换成“使用更安全的登录”会不会在理解上更好呢?还有使用[使用动态密码 ]，点击后，[帐号名]变成了[会员名]，难道是一定要输入会员名，但为什么Input输入框中又提示[手机号/会员名/邮箱]?

5.在用户输入用户名和密码错误时，是否登录框下面的[忘记密码?]应该变的醒目一些。还有把[用户注册]四个字颜色变成和登录按钮一样的颜色，视觉上这样不仅不会让注册功能显的不明显，而且也不会影响登录的醒目性（因为登录按钮的色块本身较大）！...

Read More...

在淘宝首页登录后跳转到回首页，右边有一块显示用户的当前可处理的功能模块。


因为目前只有唯一一个待评价，但我点击完那个小的可怜的（1）(为什么这块文字的链接不都做上去呢？)，跳转到了已经买到宝贝的页面，还要再点击一次评价，而且[评价]两字在这里已经不明显了。


当[等待您评价]只有（1）个时，页面直接跳转到评价页面是不是更合理呢？！

[完]...

Read More...

今天在看朋友的博客，有篇文章里分享照片，不过只提供了照片的链接地址。点击链接就跳转到上图这张页面。哦，原来网站服务器正好在升级，暂时不能看到照片。不过它提供了你另外的一个选择：“2.如果你乐意，挑个游戏玩吧”。意思大致是：网站暂时不能用，但你可能是想看看图片消遣一下的，那就玩玩游戏吧。但对于那些有重要性访问请求的用户是否应该再做一个“保存这次访问请求”的功能，当网站升级成功后通过邮件或者其它可联系的方式第一时间通知用户，这样不仅做深服务，同时也能提高网站的访问黏度！


一般是外链过来的用户有这类需求可能性较大，并且用户在点击“保存这次访问请求”时是需要登录的：如果是已注册用户直接登录保存记录（浏览器有cookie记录的用户话会更方便）；如果不是注册用户，那这时马上提拱一个注册页面，关键这类情景下的注册页面尽量简洁，只要输入用户名，密码，和邮箱就行！（等下次，他再次访问时再引导他完善个人资料也不迟。）

一个好的用户体验，哪怕是服务器升级时也能做。[完]
...

Read More...

2月19号晚上由于种种原因在joyo下了两个订单，晚半小时下的那个订单，今天收到货了！为什么早半小时的，没有任何音讯呢？明明两本书都有货啊，尚未发货也给我个理由什么的吧？未处理给我个理由吧？思前想后，觉的两个订单除了下订时间有半小时左右的区别，还有一个原因就是这个早半小时的订单我多加了一个备注：



2009.2.23注：终于忍不住给joyo.com打了电话，他和我解释了一大堆，主要内容是25号之前会给我个明确答复！
2009.2.24注：今天已经收了到两本书！[完]...

Read More...

过年去乡下拜年，100860提醒手机快没钱了，夜不深人静的躺床上体验一把手机淘宝上冲值。


01.打开手机淘宝网登录后，进入“充值”（省略图），正好在搞充值话费活动，加深充值行为的兴趣。


02.再仔细一看，一直没明白获“全年话费”的概念，但能明白应该是有机会能拿到额外的话费。进入“我要充值，我要全年话费”（手机淘宝网页上，只要是蓝色文字就是可点击的。统一性！）


03.选择好充值选项，点击“快速充值”。


04.由于手机是手指触摸屏和输入法设计界面的问题，导致在输入“确认号码”时焦点不方便选中。像这类有 input框的交互页面，触摸屏手机有这类输入法界面是比较多的，将页面设计的稍长一些，页面底部留个100像素的空白，这类问题就基本可以解决。


05.选择“在线付款”


06.等待...


07.进入支付宝，选择支付方式，看到熟悉的“卡通付款”，进入"卡通付款"


08."您好，！" 没有我的名字，应该是BUG！但接下来“选择卡通”这一步，既然只有一个银行选项为什么不直接默选中呢，让我多一步操作！输入支付密码，点击“确定”......页面载入时...嗯!...看到最下面一行的“wappaygw-1-2”是什么意思呢？


09.显示了一个莫名其妙的提示，我只按了一次“确定”按钮哦。就算出错啦，也应该给我一个返回上一步的操作按钮或者建议我使用“短信支付”的提示按钮。现在，要不让我退出？要不让我去支付宝首页？


10.好吧我再试试，回到刚才的选择支付步骤，选择“短信支付”


11.秒速收了一条短信,回复130


12.支付成功！


13.追加。在我充完话费后，中国移不动和充值商家没任何回复，那我这钱到底是充了没有呢？！！！

手机：MEIZU M8
浏览器：UC浏览器V7.0
输入法：A4
[完]...

Read More...