网页设计_用户体验设计_xiaoler宁波UCD http://www.chn0.com/blog xiaoler_UCD Thu, 02 Dec 2010 02:54:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 浅谈HTML语言的学习和计划 http://www.chn0.com/blog/html_%e5%ad%a6%e4%b9%a0_%e8%ae%a1%e5%88%92.html http://www.chn0.com/blog/html_%e5%ad%a6%e4%b9%a0_%e8%ae%a1%e5%88%92.html#comments Thu, 02 Dec 2010 02:54:06 +0000 xiaoler http://www.chn0.com/blog/?p=28 初涉HTML语言的朋友会发现这是一门及其容易上手的语言，确实如此。但是上手后，会出现诸如”如何深化自己的能力?”"如何提升熟练度？”"如何通过这门技能找到好工作？”等问题。

经多年的经验得出以下几个点：
1.通过自己的实践提示自己的熟练度。
2.通过项目的历练，提升自己对需求的理解。
3.通过不断摸索其它大公司的网站结构特点，提升自己的能力。
4.给自己做一个博客或个人站，一是记录自己工作学习的点滴，二是鞭策自己不断进步。同时好的个人站也是找工作一块黄金敲门砖。
（当然这几个点深化可以用在任何事物的学习和进步上）

关于实践。可能有人会说，你说的都不现实。我现在没工作哪来的项目可言，其实不然。只是你没有真正去寻找这样的机会。鉴于中国社会的现状，第一个项目可以“免费”服务。当然这只是价格免费，但实际上通过这个项目使你的技能得到了提升，那么相对你就更加值钱了。好比游戏中通过打怪兽，获得EXP升级。很好理解吧,然后你有了更高的等级技能，你就能找到更好的工作或更多的项目：）

关于借口。有人说我不懂英文、我记不得几个单词、我看见英语就晕了。其实这都是在给自己找台阶下，一门语言好比一个美女，你没有勇气去仔细了解接触她。她又怎么会给你机会，为你付出真感情呢。相信大家都拥有一颗勇敢的心，只是偶尔内心比较内敛：）

关于学习。通过查看大公司（如：淘宝、腾讯等）的代码脚本，你会发现越看越来劲。同时发现自己的能力慢慢在跟这些公司的衔接，别慌这都是正常的。说明你的努力得到了回报，有时成就感也能带领我们走很长一段路，所以当你成功的时候千万别停留，要有着拿起拐棍继续向前冲的毅力，我会告诉你“下一个成功马上就要到了。”

关于计划。所以，现在给自己定一个计划。一个学习计划，一个实践计划。当然目标要定在A~C之间的那个点，为什么呢？A目标定简单了,太容易实现.而C太难了实现不了。所以定在有可能实现的B目标，比如1个月能做出一个站。当然后期能力的成长后你可以定更广阔的目标，可以超出HTML语言。比如学习其他语言、学习企业的管理、学习项目需求的定制等等。这对你职场的长远发展都是有帮助的。

-----------------------------------相关文章-----------------------------------

]]> http://www.chn0.com/blog/html_%e5%ad%a6%e4%b9%a0_%e8%ae%a1%e5%88%92.html/feed 0 索尼导航DIV+CSS实战 http://www.chn0.com/blog/sony_nav_xhtml.html http://www.chn0.com/blog/sony_nav_xhtml.html#comments Tue, 30 Nov 2010 12:57:34 +0000 xiaoler http://www.chn0.com/blog/?p=20 效果如下图：

sony导航效果图

源码下载地址：索尼导航示范.rar

div框架部分：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>索尼导航示范</title>
<link href=”style/style.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”homeNav”>
  <span></span>
  <ul>
    <li><a href=”#”>联系我们</a></li>
    <li><a href=”#”>驱动</a></li>
    <li><a href=”#”>服务相关</a></li>
    <li><a href=”#”>产品介绍</a></li>
    <li><a href=”#”>关于</a></li>
    <li><a href=”#”>首页</a></li>
  </ul>
  <span></span> </div>
</body>
</html>

css框架部分：

*{word-wrap: break-word;word-break: break-all}
body,ul,li{margin:0;padding:0}
body{font:12px/1.5 tahoma,arial,\5b8b\4f53}
ul{list-style:none}
a{text-decoration:none;color:#b5b5b5}
a:hover{text-decoration:underline}
img{border:0}
table{border-collapse:collapse;border-spacing:0}
input,select{vertical-align:middle}
body{background:#020202;letter-spacing:1px}
/* sony nav 2010-11-01 初始值 by xiaoler */
#homeNav{ width:765px; height:45px; background:url(../img/blue_line.gif) no-repeat 5px 43px;overflow:hidden;margin-left:auto;margin-right:auto; margin-top:10px;}
#homeNav ul{ width:755px; height:43px; background:url(../img/nav_bg.gif) repeat-x 0 -90px; padding-bottom:2px; float:left;}
.nav_on,.nav_off{ width:90px; height:43px;float:right; text-align:center; font-weight:bold}
.nav_on a,.nav_off a{ width:90px; height:20px; padding:11px 0 12px 0; line-height:20px; display:block}
.nav_on{ background:url(../img/nav_on.gif) no-repeat bottom;}
.line a{ background:url(../img/line.gif) no-repeat;}
.nav_on a{ color:#FFF}
.nav_l,.nav_r{ width:5px; height:45px; background:url(../img/nav_bg.gif) no-repeat;}
.nav_l{ float: left;}
.nav_r{ float:right; background-position:center;}
/*
.nav_on为蓝色箭头样式，当前页面被按下样式
.nav_off所有未激活状态的按钮
.line a 为画线样式
.nav_l,.nav_r两圆角
*/

-----------------------------------相关文章-----------------------------------

]]> http://www.chn0.com/blog/sony_nav_xhtml.html/feed 0 xiaoler,立足宁波面向全国的前端设计、开发团队 http://www.chn0.com/blog/%e5%ae%81%e6%b3%a2_%e7%ab%af%e8%ae%be%e8%ae%a1_%e5%bc%80%e5%8f%91.html http://www.chn0.com/blog/%e5%ae%81%e6%b3%a2_%e7%ab%af%e8%ae%be%e8%ae%a1_%e5%bc%80%e5%8f%91.html#comments Fri, 26 Nov 2010 03:19:10 +0000 xiaoler http://www.chn0.com/blog/?p=18 xiaoler,立足宁波面向全国的前端设计、开发团队。

1.我们的设计不仅仅局限于好看

引入用户的思维方式，通过用户的视角、用户的操作、用户的使用感受去把握整个项目。

2.我们的设计业是品牌的定位

综合您公司特色，通过合理是色系搭配给出最佳方案。同时突出品牌特质，带给用户深刻的感受。

3.我们的框架将是更灵活的

在网页框架以及FLASH框架的编写上，提供更灵活更易于程序员、后续开发者掌握的框架。使您的网站或软件在后续的开发和更新中事半功倍。

4.我们的框架拥有更好的兼容

由于早期的浏览器版本不统一，造成浏览器渲染方案的不同。通过长期实践，并真实统计全国浏览器使用频率，制作出适用于IE6\7\8\Firefox的最佳兼容方案。

5.我们提供最佳的前端培训

经过2年多的教学经验，掌握一套适合中国人由浅入深的教学方式。只要您对计算机和设计充满热情，我们将引领您从基础面不断向上攀登，同时解决您技术上的拦路虎。

————-注重细节，追求卓越————-
xiaoler，将您的思维放飞到新的高度。

最多留言日志

]]> http://www.chn0.com/blog/%e5%ae%81%e6%b3%a2_%e7%ab%af%e8%ae%be%e8%ae%a1_%e5%bc%80%e5%8f%91.html/feed 0 玩的就是技术（以图找图） http://www.chn0.com/blog/%e7%8e%a9%e7%9a%84%e5%b0%b1%e6%98%af%e6%8a%80%e6%9c%af%ef%bc%88%e4%bb%a5%e5%9b%be%e6%89%be%e5%9b%be%ef%bc%89.html http://www.chn0.com/blog/%e7%8e%a9%e7%9a%84%e5%b0%b1%e6%98%af%e6%8a%80%e6%9c%af%ef%bc%88%e4%bb%a5%e5%9b%be%e6%89%be%e5%9b%be%ef%bc%89.html#comments Sat, 06 Nov 2010 15:36:45 +0000 xiaoler http://www.chn0.com/blog/?p=16 有的时候你只有一张明星的照片，但是你不知道名字。想搜到更多，或者你知道名字像获得所有关于这个名字的照片那么下面几款人脸搜索引擎特别适合你去一试。

http://www.tineye.com/
据说是最早的，不过对国人图片库不是很全。技术目前来所算成熟不只是人脸，其他宠物等都能识别。

http://cn.pictriev.com
这个不只能识别脸，还可以从你的脸部特征中分析出年龄和性别，在细节分析上很下功夫了，而且对中文支持相当好。

http://www.facesaerch.com/
依然来自国外找明星比较方便~滚轮特效很炫：）

最多留言日志

]]> http://www.chn0.com/blog/%e7%8e%a9%e7%9a%84%e5%b0%b1%e6%98%af%e6%8a%80%e6%9c%af%ef%bc%88%e4%bb%a5%e5%9b%be%e6%89%be%e5%9b%be%ef%bc%89.html/feed 0 什么是UCD http://www.chn0.com/blog/%e4%bb%80%e4%b9%88%e6%98%afucd.html http://www.chn0.com/blog/%e4%bb%80%e4%b9%88%e6%98%afucd.html#comments Thu, 13 May 2010 06:51:54 +0000 xiaoler http://174.120.207.225/~chncom/blog/?p=1 User-Centered Design(以用户为中心的设计) 　　简单的说，就是在进行产品设计、开发、维护时从用户的需求和用户的感受出发，围绕用户为中心进行产品设计、开发及维护，而不是让用户去适应产品。无论产品的使用流程、产品的信息架构、人机交互方式等，以UCD为核心的设计都时刻高度关注并考虑用户的使用习惯、预期的交互方式、视觉感受等方面。　　衡量一个好的以用户为中心的产品设计，可以有以下几个维度：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction），延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后的整体心理感受等。　　UCD是将来公司开展网络服务所必须的，所以UCD职位也将是一种趋势。　　我们也应该十足的相信，网络时代的高速迭代会让UCD这样一个设计核心思想越来越多的被人们所接受，并且会由网络平台走向现实生活中实业，入驻战略层。　　只有一个高度关注用户，并竭力为客户开发出适用、易用产品的公司，才会在未来更激烈的商战中拥有自己的市场。

最多留言日志

]]> http://www.chn0.com/blog/%e4%bb%80%e4%b9%88%e6%98%afucd.html/feed 1