2012年12月18日

【转】界面设计速成

Filed under: 前端设计 — cmpan @ 2012-12-18 12:51:39

(全文 …)

Views – 2092

2012年08月1日

[转]图片格式与设计那点事儿

Filed under: 前端设计 — cmpan @ 2012-08-01 15:30:54

第一次写技术博客,有不尽如人意的地方,还请见谅和指正。

为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定了解,这样才能更好的表达你的创意和想法。

除此之外,我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果,什么 样的设计才更适合Web页面;页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。

有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。
(全文 …)

Views – 2333

2011年10月12日

HTML的base标签在ie6下的问题解决

Filed under: WEB » 前端设计 — cmpan @ 2011-10-12 17:33:52

当我们用url重写的时候,用base标签可以使页面中的链接、图片地址等网址相关的元素基于我们设置的链接,如下
<base href=”/ctx/” />

但是发现在ie6下页面中的图片都不出来了,这是ie的一个bug,解决方案:
1)base的href属性使用完整的路径,如使用<base href=”http://yulans.cn/html/base/” />,不使用<base href=”/html/base/” />
2)base标签和</head>标签之间不要有任何html标签

Views – 2353

2011年07月4日

Web可用性设计的247条指导方针

Filed under: 前端设计 — cmpan @ 2011-07-04 13:20:37

译序:Userfocus是英国一家专门从事网站可用性设计的咨询培训公司。它为我们分享了247条Web可用性设计的指导方针,并把它们清晰的分为九个大类:首页可用性设计、任务
导向、导航和信息架构、表单和数据输入、可信度、写作和内容质量、页面布局和视觉设计、搜索可用性、帮助反馈和容错。如Userfocus所说,“虽然易
用性系统的设计远不止应用一些简单的指导方针,但是它们却可以为获取稳定性和好的实践提供有意义的帮助。”
(全文 …)

Views – 1970

2011年05月22日

在布局复杂的网站页面中使用div+css网页栅格化布局

Filed under: CSS » 前端设计 — cmpan @ 2011-05-22 17:17:00

栅格化布局样式表生成工具

有些前端设计师使用div+css布局的时候,每次做页面都要花大量的时间去写布局的样式,再用n个浏览器来轮个遍去测试布局是否能兼容浏览器。这样把大把的青春花在布局上,感叹着table布局的便利。其实这个是很容易解决的。如果你碰到了这样的问题,并且还没有解决的,请继续往下看就很容易搞定了。
(全文 …)

Views – 2085

用户体验之网页版块设计(转)

Filed under: 前端设计 — cmpan @ 2011-05-22 14:40:33

用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受。在基于Web的产品设计中,UE是一个相对较新的概念。Donald Norman博士提出了“用户体验”一词,他是一个认知科学的研究人员,首次提出了在互联网领域以用户为中心设计的重要性(用户的需求决定产品如何设 计)。
(全文 …)

Views – 1928

2011年04月28日

浏览器的加载与页面性能优化(转)

Filed under: 前端设计 — cmpan @ 2011-04-28 02:25:43

本文将探讨浏览器渲染的loading过程,主要有2个目的:

  • 了解浏览器在loading过程中的实现细节,具体都做了什么
  • 研究如何根据浏览器的实现原理进行优化,提升页面响应速度

(全文 …)

Views – 2224

2011年04月11日

json跨域传输数据

Filed under: 前端设计 — cmpan @ 2011-04-11 00:36:37

get请求用jsonp或直接script标签就可以,只单向跨域POST数据不需要取得响应数据,用iframe可以解决,但是如果要跨域POST数据并取得响应的json数据,则需要用flash来做代理。

1.使用jsonp,只能用GET方式请求
请求页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
 
 
 <script type="text/javascript">// <![CDATA[
    $.ajax({
        type: "GET",
          url:"http://a.com/test.php?a&#038;jsoncallback=?",
          dataType: "json",
          success: function(data){
              alert(data.a);
          }
    });

// ]]></script>

被请求页:

 

print “{$_GET['jsoncallback']}(” . json_encode(array(‘a’=>’sss’, ‘b’=>’bbb’, ‘c’=>’哦’)).’)';

第二种方法,使用flash做代理
可参考

http://blog.monstuff.com/Flash4AJAX/static/Xdomain.html

http://blog.monstuff.com/archives/000280.html

http://blog.monstuff.com/archives/000277.html

http://blog.s135.com/ajaxcdr/

crossdomain.xml文档见

http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf

Views – 2132

2010年10月14日

再谈 Web 默认字体

Filed under: WEB » 前端设计 — 标签:, — cmpan @ 2010-10-14 01:24:22

1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

2. Tahoma 字体从 Win95 就有了,并且从 Win2000 开始,Tahoma 成为 Win 英文系统的默认字体。2007 年,在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今,普及性还是相当不错的。

3. Google, YAHOO 等网站,首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持,这就和 Google 首页继续采用 table 布局一样,table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。

4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲,font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中,显示更好的字体,同时用 Arial 殿后,也能保证在尽可能多终端设备中正确显示。渐进增强无处不在,需要我们的共同努力和推广。(注:考虑 Mac 用户,Leopard 中内置了 Tahoma 字体,因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些)
(全文 …)

Views – 2931

默认Web字体样式

Filed under: WEB » 前端设计 — 标签:, , , — cmpan @ 2010-10-14 01:23:06

通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式。和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能,但是极少数会有用户去自定义,一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。
(全文 …)

Views – 2466

Copyright © 2009 流水孟春 版权所有
Web技术,LAMP,Nginx,Web2.0,前端技术
Powered by WordPress & UI Designed by 流水孟春