thingir

移动端H5页面的设计稿尺寸大小规范

移动端H5页面的设计稿尺寸大小规范

2015-11-03 14:10 来源:25学堂 编辑:FACENOW【纠错0人评论

A-A+

怎么开淘宝店 网站优化方法 创业如何获得投资 怎么做微商 最新LOL活动

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的。如果是app设计师,就不会那么纠结啦。

延伸阅读:

H5页面设计 H5页面制作 H5页面

那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。

请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含

<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />

<meta content=”telephone=no” name=”format-detection” />

根据目前市场流行的手机移动终端,统计他们的设备独立像素。

在这里,25学堂也跟大家分享一个罗列了当前最流行的手机的所有尺寸大小规范: http://screensiz.es/phone     值得大家好好细看的智能手机尺寸图表。

也只有iPhone6+采用了分辨率降频处理。

具体看下图:

H5页面设计 H5页面制作 H5页面

有兴趣的小伙伴可以去尝试不同的尺寸,比如1倍的、2倍的、3倍。最终得出的试验结果是。H5的设计稿一般设计为640x1136px即可。 既满足了显示需求,又能降低用户加载图片需要的带宽。

可以用各种分辨率的移动智能手机查看我们设计的H5页面时,当然,也会出现如下的情况,内容显示不全,甚至一些重要内容和按钮都会被遮挡。

第一:背景图片必须采用background-size:cover;来实现。

第二:我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下的位置或者偏上,否则前端布局时可能出现内容显示不全的情况。

H5页面设计 H5页面制作 H5页面

通过对比可得:

除去将浏览器全屏显示的情况,几乎所有情况均会有顶部的状态栏和导航栏。

iPhone的设计标准,状态栏和导航栏的独立像素高度分别为40px和88px。

由于Android系统可以更改状态栏和导航栏的高度,这里可以取默认值为48px和100px(这些尺寸网上均可查)。

那么就会把网页内容往下挤,进入盲区(根据不同的布局方式可能挤出视口,即可视区域之下,)。取这两个系统者的最大值为148(48+100),如下图5,设计稿要尽量保证单页下面没有重要内容。

H5页面设计 H5页面制作 H5页面

图5

那么在所有屏幕大小上把重要内容显示完全,就要注意市面上存在的小尺寸手机屏幕,现在绝大部分智能手机分辨率都在640x960px(iPhone4分辨率)之上,所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812(960-148=812)。

在此总结,一般情况下,以现有市场上流行的移动智能手机,单页翻转(非延伸向下的长页面)设计稿尺寸为640×1136,在高度为812处设置一条安全线(参考线),将重要的内容布局在这条安全线之上。

H5页面设计 H5页面制作 H5页面

移动端H5页面的设计稿尺寸大小规范内容如下:

1、像素是没有宽高的(不要被Photoshop中的像素格欺骗),它只代表一个采样的色值。

2、任何图片作为数据信息被保存在存储盘中时,只有宽高像素数是有意义的,此时的ppi对于图片来说时没有任何意义,也并不能描述这个图片有多少英寸的宽度或者高度,而只有在被打印出来后才有ppi的意义,被打印出来才可以描述这张图片有多高多宽。

3、平时制作H5页面时设计原型时,产品经理出的原型稿建议屏宽为320px,用这个尺寸一是为了浏览方便(现在很多手机的屏宽达到1440px,用这个尺寸去模拟显然不现实),

二是以iPhone5s为标准的手机屏宽较小,进行内容排版布局时屏宽应该向下兼容。

4、制作设计稿时,设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时,按照现在流行的做法,可以直接使用原型稿上的尺寸,也就是设计稿上的1/2。

5、一般情况下,H5页面设计稿做成640x1136px是最为稳妥的尺寸,在812px高度处增加一条安全线,重要内容在此线之上(网上有些文章说安全线是960px处,个人认为不太准确)。既保证了在移动设备上显示清晰,也保证了素材的最小尺寸。

最后在这里,25学堂给H5工程师推荐2个不错的图片压缩的工具。

1、腾讯智图(http://zhitu.isux.us/

智图–图片智能自动优化平台,为你的图片智能选择合适的图片格式,为你压缩图片以便节省带宽优化体验,为你提供WebP图片让你的站点高大上

2、tinypng(手机APP设计必备图片压缩神器-TinyPNG),这里的图片压缩还是相当好用,可以节省用户不少带宽。

以上部分内容来源:zikoman.lofter.com  感谢ZIKO的分享和实践。

改变网页中被选中文字的背景色方法

<!DOCTYPE html>

<html lang=en>

<head>

<meta charset=utf-8 />

<title>无标题文档</title>

<style>

#box{ /* 我们第一步要创建一个flex文档流(创建伸缩容器) */

     display:flex; 

     /* 然后我们定义伸缩流方向,并且可以换行

      * 记得我们要这样设置:

      * flex-direction: row;

      * flex-wrap: wrap;

      */

      

     flex:row wrap;

     

     /* 然后我们定义了如何分配伸缩容器的剩余空间 */     

     justify-content:space-between;

     

     width:100%; 

     height:100px;

     align-items:flex-end;

     background:#ccc;

}

#box span{ *display:inline-block; border-radius:50px; background:green; width:50px; height:50px;}

#box1{display:flex;flex-direction:row-reverse; width:100%; height:100px; justify-content:space-around; align-items:center;align-content: space-around; background:#efefef;}

#box1 span{ *display:inline-block;border-radius:50px; background:green; width:50px; height:50px;line-height:50px;font-size:24px; color:#fff;text-align:center;}

/*假设网站顶部有一个右对齐的导航,希望在小屏幕下能单列居中显示Large*/

#textfield{border:1px solid #000;height:16px;}

#button{background:#FFF;color:#000;border:1px solid #000;height:20px; float:left;}

/*改变浏览器默认的选择好弄文字的颜色*/

::selection {color:#fff; background-color:forestgreen;}

::-moz-selection { color:#fff; background-color:forestgreen;}

::-webkit-selection { color:#fff; background-color:forestgreen;}

</style>

</head>


<body>

<!--浮动盒子flexbox-->

<div id="box">

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>

<div id="box1">

  <span>1</span>

  <span>2</span>

  <span>3</span>

  <span>4</span>

</div>

<div>

<form> <input type="text" name="textfield" id="textfield" />

<input type="submit" name="button" id="button" value="提交" />

</form>

</div>

<!--end-->

<!--改变选中文本背景色-->

<span>111111111111</span>

<!--end-->

</body>

</html>


关于Flexbox的一些事

Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序),以最佳方式填充可用空间(主要是为了适应所有类型的显示设备和屏幕大小)。Flex容器会使子项目(伸缩项目)扩展来填满可用空间,或缩小他们以防止溢出容器。

最重要的是,Flexbox布局方向不可预知,他不像常规的布局(块就是从上到下,内联就从左到右)。而那些常规的适合页面布局,但对于支持大型或者杂的应用程序(特别是当他涉及到取向改变、缩放、拉伸和收缩等)就缺乏灵活性。

注:Flexbox布局最适合应用程序的组件和小规模的布局,而网格布局更适合那些更大规模的布局。

基本要素

因为Flexbox是整个模块,而不是一个属性,它涉及很多东西,包括其整个组属性。他们当中一部分是容器(父元素,称为“伸缩容器”),另一部分是子元素(称为“伸缩项目”)

属性display:flex | inline-flex;(适用于伸缩容器,也就是伸缩项目的父元素)

这个是用来定义伸缩容器,是内联还是块取决于设置的值。这个时候,他的所有子元素将变成flex文档流,称为伸缩项目。

display: other values | flex | inline-flex;

请注意:

  •  CSS的columns在伸缩容器上没有效果。
  •  float、clear和vertical-align在伸缩项目上没有效果。
flex-direction(适用于伸缩容器,也就是伸缩项目的父元素)

这个主要用来创建主轴,从而定义了伸缩项目放置在伸缩容器的方向。

flex-direction: row | row-reverse | column | column-reverse
  •  row(默认值):在“ltr”排版方式下从左向右排列;在“rtl”排版方式下从右向左排列。
  •  row-reverse:与row排列方向相反,在“ltr”排版方式下从右向左排列;在“rtl”排版方式下从左向右排列。
  •  column:类似 于row,不过是从上到下排列
  •  column-reverse:类似于row-reverse,不过是从下到上排列。

主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。其中“ltr”所指文本书写方式是“left-to-right”也就是从左向右书写;而“rtl”所指的刚好与“ltr”方式相反,其书写方式是“right-to-left”,也就是从右向左书写。

——大漠

flex-wrap(适用于伸缩容器,也就是伸缩项目的父元素)

这个主要用来定义伸缩容器里是单行还是多行显示,侧轴的方向决定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse
  •  nowrap(默认值):伸缩容器单行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
  •  wrap:伸缩容器多行显示,“ltr”排版下,伸缩项目从左到右排列;“rtl”排版上伸缩项目从右向左排列。
  •  wrap-reverse:伸缩容器多行显示,“ltr”排版下,伸缩项目从右向左排列;“rtl”排版下,伸缩项目从左到右排列。(和wrap相反)
flex-flow(适用于伸缩容器,也就是伸缩项目的父元素)

这个是“flex-direction”和“flex-wrap”属性的缩写版本。同时定义了伸缩容器的主轴和侧轴。其默认值为“row nowrap”。

flex-flow: <‘flex-direction’> || <‘flex-wrap’> justify-content(适用于伸缩容器,也就是伸缩项目的父元素)

这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时,这一属性才会对多余的空间进行分配。当项目溢出某一行时,这一属性也会在项目的对齐上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around
  •  flex-start(默认值):伸缩项目向一行的起始位置靠齐。
  •  flex-end:伸缩项目向一行的结束位置靠齐。
  •  center:伸缩项目向一行的中间位置靠齐。
  •  space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。
  •  space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

align-item(适用于伸缩容器,也就是伸缩项目的父元素)

这个主要用来定义伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。可以把他想像成侧轴(垂直于主轴)的“justify-content”。

align-items: flex-start | flex-end | center | baseline | stretch
  •  flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
  •  flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
  •  center:伸缩项目的外边距盒在该行的侧轴上居中放置。
  •  baseline:伸缩项目根据他们的基线对齐。
  •  stretch(默认值):伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content(适用于伸缩容器,也就是伸缩项目的父元素)

这个属性主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。

注:请注意本属性在只有一行的伸缩容器上没有效果。

align-content: flex-start | flex-end | center | space-between | space-around | stretch
  •  flex-start:各行向伸缩容器的起点位置堆叠。
  •  flex-end:各行向伸缩容器的结束位置堆叠。
  •  center:各行向伸缩容器的中间位置堆叠。
  •  space-between:各行在伸缩容器中平均分布。
  •  space-around:各行在伸缩容器中平均分布,在两边各有一半的空间。
  •  stretch(默认值):各行将会伸展以占用剩余的空间。

order(适用于伸缩项目,也就是伸缩容器的子元素)

默认情况下,伸缩项目是按照文档流出现先后顺序排列。然而,“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。

order: <integer> flex-grow(适用于伸缩项目,也就是伸缩容器的子元素)

根据需要用来定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

如果所有伸缩项目的“flex-grow”设置了“1”,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了“flex-grow”值为“2”,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。

flex-grow: <number> (默认值为: 0)

负值同样生效。

flex-shrink(适用于伸缩项目,也就是伸缩容器的子元素)

根据需要用来定义伸缩项目收缩的能力。

flex-shrink: <number> (默认值为: 1)

负值同样生效。

flex-basis(适用于伸缩项目,也就是伸缩容器的子元素)

这个用来设置伸缩基准值,剩余的空间按比率进行伸缩。

flex-basis: <length> | auto (默认值为: auto)

负值不合法。

flex(适用于伸缩项目,也就是伸缩容器的子元素)

这是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写。其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。默认值为“0 1 auto”。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] align-self(适用于伸缩项目,也就是伸缩容器的子元素)

用来在单独的伸缩项目上覆写默认的对齐方式。

属性值的介绍请参阅“align-items”的属性值。

align-self: auto | flex-start | flex-end | center | baseline | stretch 实例

让我们先从一个非常简单的例子开始,解决一个几乎每天都会碰到的问题:完美的居中。如果你使用flexbox,没有比这更简单的方法。

.parent { display: flex; height: 300px; /* Or whatever */ } .child { width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ }

这个依赖于设置“margin”值为“auto”值,自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“auto”,可以使伸缩项目在伸缩容器的两上轴方向都完全集中。

现在我们来使用一些其他的属性。

考虑使用6个列表项,并且为了视觉审美给他设置了一个固定大小尺寸,但他们也有可能可以自动获取尺寸大小。我们希望他们能均匀的、很好的分布在水平轴上,就算当我们调整浏览器,他们也依然显示得很好(不使用媒体查询)。

.flex-container { /* 我们第一步要创建一个flex文档流(创建伸缩容器) */ display: flex; /* 然后我们定义伸缩流方向,并且可以换行 * 记得我们要这样设置: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* 然后我们定义了如何分配伸缩容器的剩余空间 */ justify-content: space-around; }

完成。其他的一切都不过是一些美化外观样式。下面是在codepen上展示的一个例子。到codepen上查看,并试着调整你浏览器窗口去看发生什么事?

让我们试试别的。假设我们网站顶部有一个右对齐的导航,但是我们希望它在小屏幕和小型设备中能单列居中显示。非常简单。

/* Large */ .navigation { display: flex; flex-flow: row wrap; /* 所有列面向主轴终点位置靠齐 */ justify-content: flex-end; } /* Medium screens */ @media all and (max-width: 800px) { .navigation { /* 当在中等屏幕中, 导航项目居中显示,并且剩余空间平均分布在列表之间 */ justify-content: space-around; } } /* Small screens */ @media all and (max-width: 500px) { .navigation { /* 在小屏幕下, 我们没有足够空间行排列,但我们可以换成列排列 */ flex-direction: column; } }

让我们尝试一些更灵活性的伸缩项目!关于移动先行,3列布局与页眉页脚全屏。和独立的文档顺序。

.wrapper { display: flex; flex-flow: row wrap; } /* 设置所有标签宽度为100% */ .header, .main, .nav, .aside, .footer { flex: 1 100%; } /* 我们利用文档流顺序,考虑移动端先行 * 在这个例子中的顺序: * 1. header * 2. nav * 3. main * 4. aside * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) { /* 两个边栏在同一行 */ .aside { flex: 1 auto; } } /* Large screens */ @media all and (min-width: 800px) { /* 设置左边栏在主内容左边 * 设置主内容区域宽度是其他两个侧边栏宽度的两倍 */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } }


使用sass定义一个@mixin更容易解决为兼容浏览器写的各种混合语法:

@mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } .wrapper { @include flexbox(); } .item { @include flex(1 200px); @include order(2); }

如需转载烦请注明出处:

英文原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox

中文译文:http://www.w3cplus.com/css3/a-guide-to-flexbox.html

table内容过多是省略显示……

<!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=utf-8" />

<title>无标题文档</title>

<style>

.autocut td{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

.autocut{table-layout:fixed;}

</style>

</head>


<body>

<table width="550" border="0" cellpadding="5" cellspacing="1" class="autocut" bgcolor="#007373" >

  <tr>

    <th nowrap bgcolor="#159AA2" >List1</th>

    <th nowrap bgcolor="#159AA2">List2</th>

    <th nowrap bgcolor="#159AA2">List3</th>

  </tr>

  <tr>

    <td  >内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示内容过多是省略显示</td>

    <td>内容过多是省略显示</td>

    <td>内容过多是省略显示内容过多是省略显示内容过多是省略显示</td>

  </tr>

</table>


</body>

</html>


属性nowrap:

一般情况下浏览器会忽略空格;而white-space 如何处理元素内的空白的属性;

可能的值值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。pre-wrap保留空白符序列,但是正常地进行换行。pre-line合并空白符序列,但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

*还有一种控制表格内容在一定宽度内自动换行的属性:word-wrap:break-word

【转载】低版本IE正常运行HTML5+CSS3网站的3种解决方案

现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时,要面对数量庞大的浏览器种类如果开发时按最低标准,比如IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了;但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在早期浏览器上做一定的降级处理,这就是所谓 “渐进增强”,也是本文要说的重点。通过下面的方法,希望可以让网站也能够在低版本IE浏览器上奇迹般地运行得更好!

htmlshiv.js
Remy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。我们可以花很多时间来思考其运行原理,但谁会在乎呢?这种策略在所有产品网站上仍然是必须使用的。

复制代码代码如下:

<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js"></script><![endif]-->

selectivizr.js
Selectivizr.js 是一个不可思议的资源,用于填充不支持的CSS选择器和属性,包括重要的 last-child。在最近的重设计中,我嵌入了 selectivizr,并在更老的 IE 浏览器上也不会错过任何细节。下面是我的实现代码:

复制代码代码如下:

<!--[if lte IE 8]><script src="http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->


现代项目绝对必须的。只在老版本IE时才加载。
另外,Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv,我们只要引用 Moernizr.js 文件,IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等,也可以使用 CSS 对它们进行样式化。
条件注释
下面这样最土的情况你肯定看到过。但无论丑陋与否,事实上这段代码完全按预期的方式运行:

复制代码代码如下:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->


上面的方法是作用于css,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的class,这样可以方便hack。

然后我们在css文件中就可以这样写:

复制代码代码如下:


.ie6 xxx {};
.ie7 xxx {};


这是目前小编认为效率最高的方法,这个方法不需要或等待JavaScript,而且也不需要重量级的JavaScript库。你定义的styles类立即生效,还没有闪屏。

尽管IE浏览器正在迎头赶上竞争对手,新版本IE也有非常大的变化,并希望借助全新的IE重塑网络体验。但在国内旧版IE仍然是比较流行。好消息是,这些资源在所有现代浏览器上运行良好,代价也并不高!

css十道常见面试题

1、  如何定义高度很小的容器?

正解:在IE6下无法定义小高度的容器,是因为有一个默认的行高。

列举2种解决方案:overflow:hidden或font-size:容器高度px

 

2、  图片下方出现几像素的空白间隙?

正解:将img定义为display:block,或定义父容器为font-size:0

 

3、  IE6双倍margin的BUG?

正解:display:inline

 

4、  如何让层在falsh上显示?

正解:在falsh上添加<param name="mode" value="transparent"/>

 

5、  如何使得文字不换行?

正解:定义包含文字的容器为:width:xxx;white-space:nowrap;

 

6、  ie中如何让超出宽度的文字显示为省略号?

正解:定义容器为overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;

 

7、  如何使得英文单词不发生词内断行?

正解:word-wrap:break-word;

 

8、  如何区别display:none与visibility:hidden?

正解:相同的是display:none与visibility:hidden都可以用来隐藏某个元素;不同的是display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。

 

9、如何实现ie6下的position:fixed?

正解:html{_overflow:hidden;}

body{_overflow:auto;height:100%;}

.fixed{position:fixed;_position:absolute;left:0;top:0;padding:10px;background:#000;color:#fff;}

 

9、  如何让min-height兼容ie6?

正解:.min-height{min-height:100px;_height:100px;}  <divclassdivclass="min-height">我是兼容的min-height</div>

 

10、已知高度的容器如何在页面中水平垂直居中?

正解:

示例:<style type="text/css">

#box{width:200px; height:200px; background:#f00; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px;}

</style>

<div id="box"></div>

来源:谈笑涧

总结一下IE6和 IE7和 Firefox 的CSS hack写法

总结一下IE6和 IE7和 Firefox 的CSS hack写法

2010年01月08日 星期五 10:21 A.M.




引文来源  总结一下IE6和 IE7和 Firefox 的CSS hack写法_无知ZHE有畏_百度空...

来源:谈笑涧

Coming out of your comfort zone is tough in the beginning, chaotic in the middle, and awesome in the end…because in the end, it shows you a whole new world !!
Make an attempt..        

从安逸的环境走出来,开始很艰辛,过程很混乱,但结果很美妙。。。

因为到最后,它向你展现的是一个全新的世界。。。                 

去试试吧       

—— Manoj Arora,From the Rat Race to Financial Freedom


怎么招聘合适的设计师? 分享

Orlane:

招聘在企业发展战略中永远占据着重要的位置。在设计公司中,设计师是公司的核心价值,其意义更是关键性的。怎么招聘合适的设计师?我们来看看下面简单的招聘法则小册。

作为一个设计公司的招聘者,我们首先要来看下面十个问题:

1.你是如何“学习”招聘的?

2.你是依靠大脑的逻辑分析来招聘呢?还是跟着内心的感觉来招聘呢?

3.请用一句话表述,怎样才算优秀的设计师?

4.对于每个应聘者,你必问的一个问题是什么?

5.评估应聘者,你有什么特别的方法吗?

6.工作年限、成就、专业证书,会作为招聘的重要参考因素吗?

7.你希望更多的设计师具有哪些技巧?

问题一、你是如何“学习”招聘的?

很少有人会说,“我曾‘学过’如何招聘”,这也暗示了他们已经停止了这方面的学习。曾与我有过交流的专家都表示他们一直在不断地开拓和增强招聘技巧,他们的建议主要遵循三个原则。

● 寻找一位榜样人物

Foolproof联合创始人Tom Wood曾表示:“我的榜样人物是David Ogilvy。应该招聘具有什么特征的员工,他有一个清晰、公开的观点。他有一句名言:“如果招聘的员工能力低于我们,公司就会变成一个矮子公司;如果高于我们,公司就会成长为一个巨人公司。”这句名言为岗位的每个人提出了一个要求:向一个目标迈进,通过招聘者的能力来挑战自己。

Martin Belam作为资深面试官,曾参加过无数场面试。他表示曾从Mags Hanley、 Lorna Leddon和Karen Loasby等人那里学了很多面试技巧。

● 吸收他人的经验教训

在招聘过程中,我们要不停地改进招聘过程。我们不断总结教训,吸取他人经验,听取招聘机构和应聘者的建议,以使我们的招聘工作更加出色。

● 寻找适合自己的路

最后,你需要开辟自己的招聘之路,并跟着直觉走。向有成功招聘经验的人征求建议是很有必要的,但却无法完全照搬这些经验。

问题二、你是依靠大脑的逻辑分析来招聘呢?还是跟着内心的感觉来招聘呢?

逻辑思维和本能直觉在招聘过程中都起着重要的作用。做出一个决定,不仅要依靠大脑的逻辑思维能力,还要依靠内心直觉感受。

首先,你要通过大脑来判断该应聘者是否具有所必须的技能、经验以及特征,然后你要根据自己的内心和直觉来决定应聘者是否有能力适应公司的企业文化。

招聘的第一个阶段,要理性地分析问题,但最终会根据内心情感来做出最终决定。如果没有适当的理由,就必须放弃该应聘者。而一旦大脑做出了决定,内心才开始发挥作用,尤其在判断应聘者的 ‘软素质’方面,比如个性,对企业文化的适应能力。

但最终的决定还是来自你的大脑(逻辑思维),在小型或中型的企业中,如果你招错了人,就会给自己带来很多实际性的问题。

问题三、请用一句话表述,怎样才算优秀的设计师?

如果你不知道正在寻找什么,那你将永远无法找到它。招聘者不仅要知道优秀设计师的标准,还要明确需要什么类型的人才。

怎样才算优秀的设计师?这是个见仁见智的问题。但无论答案是什么,其背后都有一个共同点,就是:做出好东西,使东西更好。优秀的设计师必须具有表达能力、能与用户产生共鸣,及简化设计过程、执行设计方案的能力。

优秀的设计师要能设身处地为用户着想,并具有把用户的设想转换成系统设计方案的能力。他们可以使复杂的问题简单化,且更加完美、更加有趣。

要具有激情和好奇心,并不断研究学习人类是如何与数字产品交互的。渴望创新,乐意收集潜在用户的信息,对自己设计的作品始终保持着谦虚的态度。在设计过程中,十分愿意与最终用户及商业客户协作。

问题四、对于每个应聘者,你必问的一个问题是什么?

比较合适的问题诸如:

“请向我描述一个你觉得做得很遭的项目,它为什么很糟糕?你从中学到了什么?”

失败是面试过程中经常回避的话题,但像这样的一个问题可以帮助面试官了解面试者应对失败的方法(毕竟失败是一生中不可避免的事)。它可以帮助你了解面试者是否具有谦虚精神,帮助你了解导致该失败的设计过 程。这个看似浅薄的问题,却能告诉关于应聘者的大量信息。

“这个月,你在互联网上看到的最惊讶的事是什么?”

这是一个非常棒的问题。通过它,你可以了解该应聘者是否像他们自己说的那样富有激情。(他们是否关注业界发展趋势?)你也可以了解到应聘者对什么事情感兴趣。这个问题说不定还会揭示该应聘者是否适合加入公司团队及公司现在所做的项目。

“每天,你起床的动力是什么?你喜欢做这方面的工作吗?”

作为面试官,你一定想了解正和你对话的人的动机。毕竟,动机是让员工愉悦、高效工作的关键。如果你直接问他们的工作动力是什么,他们可能会用常用的面试语来搪塞你,诸如“出色完成一项工作后的成就感”之类。询问应聘者每天早上促使他们起床的事是什么,是对同样问题的间接问法。该问法可以让应聘者在不 经意间说出更真实的回答。

应聘者关于志向的问题

以此判断应聘者是否具有努力进取的精神,促进个人及公司的发展。这也是一个极好的问题,可以帮助你判断该应聘者是否对个人的职业生涯进行了短期、长期的规划。

问题五、评估应聘者,用什么方法呢?

评估应聘者是否适合当前工作岗位是招聘过程中最富有挑战的方面,了解业界中在这方面做得最好的人的做法是大有帮助的。

有些人很喜欢走实践路线,他们会在面试过程中给应聘者安排一个任务,以此作为评估根据。其实是“没有任何方法能比安排一个任务更有效了,也总能收到满意的结果。”

问题六、工作年限、成就、专业证书,会作为招聘的重要参考因素吗?

证书在招聘过程中,会起到什么样的作用呢?

表示,他最喜欢有经验的人,原因很简单,他们通过项目实践、积累工作成果而获得成长(毕竟,经历过很多失败后才能成功。)“我们十分强调与客户和最终用户进行面对面的工作交流,UX设计人员要想在这样的团队中惬意地工作,生活经验是很关键的,且无法取代。

而Stu和Odette均认为,“你可以招聘一个有十年工龄的员工,但不见得他能设计出好的作品来。”

Peter Merholz补充到,他的公司一般很喜欢有专业证书的人,但“如果我们正为一个更资深职位招聘,应聘者需具备客户管理等相关职业技能,这时经验便显得更加重要了。”

Martin Belam也补充到,“我认为,团队中需要有综合素养(技能+经验)的员工。我更喜欢给人以指导,引导年轻人进入该行业。我更关注他有能力完成什么任务及他如何完成,而不是工作年限及证书。”

而Justin Cooke提出了一个完全不同的观点,他认为,工作年龄及专业证书可以作为参考因素,但应聘者对面试问题的回答及对布置任务的完成情况是他们更加关注的。

问题七、你希望设计师具有哪些技巧?

这些技巧可能是支撑起设计师能够胜任此项工作的最基本的素养,大部分专家对这个问题的回答比较偏重于整体素质——全面要比专门的设计技巧更珍贵。

● 与客户相处的技巧

企业更需要那些这样一类设计师:他们与客户相处一室时,仍能轻松、自由的思考。

● 战略统筹的思维

一名优秀的设计师应该具有更强的思考能力,能很好地把握用户整体的想法;他们有理想去提高整体的服务,而不仅仅是体验;他们有超强的口才。

还有一点很重要,那就是对产品进行实用性设计的能力,而不是口头谈论用户体验的能力。

● 钻研的能力

一名优秀的设计师还得是要有大量广泛地阅读习惯,多关注一些传统设计技巧。

● 协调能力

“协调能力”在现在的工作中越来越重要,它能引导、促进跨部门间的协作,并获得最佳工作效果。

招聘和雇佣设计师是一件充满挑战与乐趣的事情。我们知道,设计师一项很独特的职业,创造力、沟通力、协作力十分重要。而除了最起码的设计、策划、协调、冲突管理、客观、领 导、开放等综合能力外,更重要的还要有一个比较恰当的自然审美能力,能够不断的吸取新的观点和方法,探索周围商业环境中的各个方面。而要了解这些,你不妨从上面7个问题来了解你所需要招聘的设计师。



经历了漫长的等待,即将开始新一段的旅程。祝自己好运!