前端»阿肆

良好的用户体验设计中应注意的几个细节

作者: 阿肆发表时间: November 30, 2008 分类: WebBuild 2条评论

我认为，在写网络程序时，要把每个用户都想像成满怀恶意的黑客高手，他们每个都想暴露你的数据库！安全是最重要的；在做网页设计时，要把每个用户都想像成刚接触电脑的电脑盲，他们连超链接是什么都不知道，可用性是最重要的。

而我觉得网页设计比网络编程更难，写程序时，遇到了难题，查查手册，google一下，基本就能搞定。但是一个网页，可能反复修改N多次还不能达到满意的要求，尤其是基于浏览器的原因，一个细节可能怎么都调不好。

而所有的一切，都是为了用户。当我不断的在用户和设计者身份间切换时，我学会了特别注意下面的细节处理：

1,首要的，尊重W3C标准，尊重每个浏览器，尊重每个用户。

2,不要忘记给radio和checkbox标签的说明文字加上label标签，你可以不必多辛苦，但是你的用户将不用玩“看你能不能点到我”的游戏；

3,翻转效果图片做在同一张图片上，然后用css定位位置。这样就不会出现当mouseover时图片未加载而出现什么都没有的情况。

4,一般情况下，对用于有明显表现意义的小图片（如Loading图片）进行预加载。

5，记住script只是页面功能的增强而不是增加。

6，noscript标签不要放在页面内容最前面，这样搜索引擎可能直接抓取了类于“抱歉！我们的网站需要启用jabascript才能正常浏览”作为摘要。你仍旧可以使用css将它绝对定位在页面的顶端。

7，如果你的<a>标签仅为了实现onclick，而不是真的需要连接，那么记得在代码后面加上"return false"，以避免将页面带到顶部（不过从语义化角度上来说，不建议将<a>这样用）。

8，无论如何，给验证码图片加个方便的刷新连接。

9，当作品完成后，亲自观看一下至少一位用户怎样使用你的产品，然后你绝对会有至少一处地方想要修改。

而一旦你知道哪点是重要的，你就要将这点应用到你的设计里去，就像每天的吃饭睡觉一样，就会变成习惯，变成一种需要，而不是只会说却永远忘记做的口号。

将twitter添加到XHTML页面

作者: 阿肆发表时间: September 18, 2008 分类: WebBuild 1条评论

因为twitter在国内的访问速度实在太慢，之前一直都没有将它放到博客。但是我的博客很久不更新，现在终于还是决定将twitter放上来，写twitter还是比较容易的。
没有去研究Twitter的API，因为它本身提供了添加到博客的widget，就直接用了。个人推荐用js版本的，因为可以通过CSS来改变输出样式。并且需要将后面的两个js链接放到网页<body>标签的最后（有统计代码的可以放统计代码之前，尤其用google统计的，如本博客），因为前面说了国内访问twitter那个慢啊...

但是，通过此方法添加在XHTML页面会出现不能通过W3C的验证，提示ul标签内需要至少一个li标签。

要解决这个问题，我们可以手动添加一个li标签，如本博客所表现的，并且在内容正式载入中用wait类语句代替也比较实用，等页面加载到页尾则调用twitter的js输出正式的内容，因为blogger.js通过innerHTML方法重写ul里的内容，所以之前的wait信息会自动替换调。

p.s:在上面的情况下如果twitter出现不能访问的情况（e.g:万恶的GFW），则wait信息会一直存在，可以通过在调用的两条js后面用js输出一个样式将wait信息的display设置为none，当然需要将此wait信息赋id或者class。

还有另外一种方法可以通过XHTML验证，那那就用js输出，如：


<div id="twitter_div">

<script type="text/javascript">

<!--//-->< ![CDATA[//><!--

document.write("

<ul id='twitter_update_list'>");

//-->< !]]>

</script>

完美调用新浪新闻的简单方法

作者: 阿肆发表时间: July 29, 2008 分类: WebBuild 7条评论

早段时间叫我同学帮忙看看南华校友网，看看大家需要些什么样的功能，有个朋友说应该加个新闻的功能。

我当时就准备做个rss聚合来获取新浪搜狐的新闻的，后面就去找新浪新闻的RSS地址，然后无意找到新浪还有这个：http://rss.sina.com.cn/my_sina_web_rss_news.html?url=news/marquee/ddt.xml 可以直接调用新浪的新闻的，所以就放弃了再去写个RSS聚合了，呵呵。

然后马上就布置到南华校友网，因为我一直都是使用的Firefox ，测试也一开始是在Firefox上测试的，一切很好。然后是opera，也很好。最后IE，啪，不行了!老是弹出一个警告框提示页面无法打开，我当时就郁闷，一时也不知道是怎么回事。

我开始以为是我的IE出现了问题(因为基本上只有测试网页兼容和上工行支付宝才会用到IE)，因为太久没用它，它给我闹脾气，然后在同学的IE上打开看，也是一样的问题。

于是就打开新浪提供的js地址看，看到在182有这样一句：


document.body.insertBefore(&nbsp;js,&nbsp;null);

而这里在我的网页上,UCH页面我调用了头尾模板,所以在新浪新闻调用之后及</body>标签之前还有内容需要载入的,此时</body>也没有载入,所以上面的代码才会在IE下出现错误。一种解决方法是可以判断页面载入完成了之后在执行这个操作，也可以将上面的语句改成类似：


document.getElementById("n_news").appendChild(js);

n_news是放js调用代码的div容器的id,这样就可以使页面内部数据照代码的顺序执行。

新闻调用的演示页面：http://www.nanhuau.com/news.php

还有，大家可以在调用的时候296行的：

~~code>document.getElementById(rss_news_sina_div).style.height = rss_news_sina_hight;code>~~

注释掉，因为这样才能自适用高度，至于宽度希望大家还是指定下，至于使用原新浪的方式还是自己的CSS那就看自己的喜好了，呵呵。

如果不想实用新浪指定的那些样式，可以将SinaRSSWriteCSS这整个函数去掉就可以了

然后将这个js文件保存上传到你的空间上，引用的时候替换新浪的路径到你的路径就可以了。

付：UCHome新闻速递插件下载（随便写的，功能比较简单，除上面说的调用新浪的新闻外，另加了百度的关键词新闻），演示地址在上面写出了,有需要的朋友就下着用吧
下载地址：http://www.iveshuo.cn/d/uchome_news_plug.7z

炎炎夏日,将南华校友网风格改成了清爽的风格

作者: 阿肆发表时间: July 28, 2008 分类: WebBuild 1条评论

很久都没有弄南华校友网了,前天在DZ论坛看到liuri朋友做的一个风格比较不错,可惜是宽版的,而南华校友网一直是用的窄版的风格,所以我依照这个颜色样式将UCHome默认的风格修改了下。
并且我将TOP，分享，其他的一些小图标都做成了绿色的，有需要的朋友在文章最后地方下载
下面是修改完之后的样子：（演示网站:http://www.nanhuau.com/news.php,首页的图还没有改过来.）

我的个人主页，是不是清爽了很多