【译】八个大限将至的设计元素

原文地址:http://uxmag.com/articles/goodbye-to-8-design-elements-whose-time-has-come

by john McKinney

去年,几个我不太喜欢的设计元素和技术手段的丧钟被敲响。其中一些已经销声匿迹,一些正逐渐消亡,有一两个最近走到了它们的终点。从长远看,我觉得它们的消亡会让14年的体验设计更好。

1.下拉菜单

下拉菜单从互联网的诞生之日起就是用户界面的基础之一。数不清的网站仍然使用hover状态的下拉列表来作为主要导航的一部分,但是随着响应式设计、跨设备设计趋势的到来,下拉菜单将没有用武之地。

现有技术格局中,下拉菜单无法再没有hover状态的平台上完成功能(平板电脑或者是手机)。随和移动优先的运动日益壮大,以点击为基础的导航变得更流行,如“汉堡图标”将整个网站导航纳入一个可点击列表中。

2.轮播

轮播图是另一个古代界面遗迹(至少从互联网标准来说是这样),它在页面首屏以上特定区域展示多重特色元素。基于时间的循环的轮播正被逐步淘汰,特别是在支持基于宽度自适应内容模块的新闻网站中。这种趋势消亡也是因为手机和平版电脑用户的增加,在他们尝试“滑动”轮播图或者元素中间的导航却滑不动的时候,就很令人沮丧了。我们所熟知的轮播将会进化成基于滑动的画廊式界面和导航而不是基于时间规则。

3.IE9

感谢互联网之神!一些大的互联网公司终于开始加快淘汰老版本IE浏览器的速度。记住,仅仅在几年之前,我们还需要舍弃一些用户体验来确保兼容IE6。更糟的事,我们一直受迫好多好多年才逃出生天。快进到今朝,像谷歌和脸谱这样的大哥大都基于标准的改革,迫使微软要么做同样的事情,要么就被拉在后面。

老的“拥抱、扩展、消灭”哲学并没有在浏览器大战中起到作用。如果微软不能赶上chrome、火狐甚至safari漂亮的创新的步伐,IE会持续失去浏览器市场份额。在2013年11月,谷歌宣布停止支持IE9,这通常意味着其它用户体验社区也会步其后尘。这对未来很有帮助,因为体验是基于你最弱的一环,兼容老版本的IE使得你失去创新的能力。

4.拟物化

设计呆子们之间最火的话题,拟物化和平面化之争在去年吵得沸沸扬扬,而且在2014年也会继续下去。毫无疑问,苹果是拟物化最大的支持者,它的IOS设计和其它2013年前使用的移动系统版本都证明了这一点,然而谷歌却以多年来的扁平化设计赢得冠军。随着安卓市场引人注目的上涨–同时微软通过新的Surface和手机操作系统也搭上扁平化的列车–苹果已经做出了选择:要么坚持固有无趣的设计趋势(也许是不友好的界面),或者是拥抱新的设计趋势。随着IOS7发布,苹果选择了扁平,熄灭了拟物化最后的火种。

5.FLASH

虽然苹果很晚才加入扁平化的阵营,但是他们赢了Flash的战争。当苹果发布iPhone和iPad的时候就决定不支持Flash,因为这些平台的流量不容小觑,广大广告商、网站管理员、和开发者们都积极接纳了“HTML5”风尚。在2013年,flash广告开始衰败,更不用说纯flash网站了。很多我所知的Flash开发者都开始接触Adobe Edge,一款基于HTML5、CSS和JS的动画功能,希望能留住某些网页开发者的心,但是这一切在如今随处可见的优秀开源工具面前,显得太晚、太微不足道了。最初发布于2011年,在2012年又做出了一些重大更新,Abobe公司大力在推广Edge,虽然Flash任然可以使用和支持,但是开发者们已不再青睐它了。你也很难再找到一些主要网站仍在使用Flash组件了。

6.网页

网页仍然随处可见,但是它们正在经历一些重大变革。上面提到过的内容不再赘述,我们越快逃离折磨集体智慧的旧版IE,就能越早放弃独特的网站页面。这种趋势是设计和技术变革结合的产物,几年前就开始酝酿,现在开始彰显它的魅力。现在很多网页开始“应用化”,大多数都是那些既没必要也不愿意开发原生应用来迎合平板和手机用户的平台。如Quartz、Facebook、Google App都顺应了这个趋势,并在网上获得不错的反响。

Gawker media是这种方法的早期采用者,2011年就推出备受争议和短命的hashbang驱动体验。他们的网站借助当时新的HTML5标准PushState实现无页面化设计,该技术实现在不更新页面导航情况下,异步更新内容。Pitchfork.com是另一个尝试这种技术的网站,很好推广了如PJAX和TurboLinks等工具,后者后来成为Rails4的核心特性。随着实现障碍的降低,越来越多的网站开始尝试这种思路,可以预见会有大量网站接受这种方法,因为它更简洁、更快、成本更低。

7.共享主机

在我预言主机提供商们即将完蛋的时候,它们实际上还活得好好的,还有一些公司需要物理服务器(虽然未来可能只有Google和Amazon两个数据中心)。“共享主机”的概念除了大量迁移到云计算和平台的耗费外,一无是处。为什么非要每个月支付给GoDaddy20美元来买一个你啥都不能控制的主机,你完全可以花更少的代价得到你需要的带宽。为什么你要同其它你不知道的人共享你的服务,忍受你无法攻克的瓶颈?现在几乎所有的主机公司(GoDaddy、MediaTemple等)都有云或者其它虚拟服务器,以便于Heroku、Amazon网络服务器和Google应用引擎竞争。

8.“m.”网站

在响应式设计的普及之前,只有一种向平板和移动用户传递内容的办法:读初始请求,检查用户设备,然后重定位到该网站的移动版本。移动版网站有不同的代码库和完全不同的特性。发布者任何时候更新网站版本,都需要对两个版本做同样的事情,维护起来更复杂,开发成本更高。即便是如此,“m.”网站在响应式设计出现后仍然有存在的理由。比如,广告平台需要一段时间来调整成单一页面能够输出两套截然不同的广告。为了解决这个问题,广告商需要为每个页面的所有服务,渲染基于设备的移动或桌面广告。类似这种特殊问题很早以前就被广告平台解决,现在“响应式设计”早就成了日常术语,支持单一平台而不是两种展示样式的成本收益很明了。

Read More

css Kwicks

原文地址:daviswalsh.name/css-kwicks

Kwicks的效果是我最喜欢的js效果:一组能够在鼠标滑过时产生反应的东东。5年前,这种效果当然是需要js来实现的,但是现在浏览器有了高效强大的动画效果。这次我们能够使用一点点的css实现相同的效果。

HTML

kwicks的HTML结构很简单,一个无序列表,列表项内添加任何你想要的富文本内容。

<ul id="kwicks">
  <li><a class="john" title="John Lennon" href="http://en.wikipedia.org/wiki/John_lennon">John Lennon</a></li>
  <li><a class="paul" title="Paul McCartney" href="http://en.wikipedia.org/wiki/Paul_mccartney">Paul McCartney</a></li>
  <li><a class="george" title="George Harrison" href="http://en.wikipedia.org/wiki/George_harrison">George Harrison</a></li>
  <li><a class="ringo" title="Ringo Starr" href="http://en.wikipedia.org/wiki/Ringo_starr">Ringo Starr</a></li>
</ul>

CSS部分

js方法的核心在于鼠标滑过时改变元素的宽度,现在仅用CSS就可以完成这一工作!

/* structure */
#kwicks { width: 590px; overflow-x: hidden; }
#kwicks:hover li a { width: 100px; }
#kwicks li {
float: left;
overflow-x: hidden;
display: block;
}
#kwicks li:hover a { width: 285px !important; }

/* individual kwicks */
#kwicks li a {
display: block;
text-indent: -9999px;
width: 134px;
height: 143px;
transition-property: width;
transition-duration: 1s;
}

上述CSS代码中必须指出的是:

  • 我发现最好给UL加上overflow-x:hidden;避免奇数行错误。
  • 有两个选择符控制着动画的过渡效果;鼠标滑过的对象长度变长以外,其他对象都变短。

上例中的每个列表项都只有一个元素,你可以尝试在列表中添加更多元素。

Kwicks效果真的非常性感,自五年前就是这样,只是现在只需要简单CSS就可以实现,效果不变,只是更加容易实现了!

Read More

css3 flipping animation

利用css3可以完成非常棒的动画效果,今天咱们看个3D的图片翻转的效果。首先贴结构代码:

        <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <!-- 正面内容 -->
    <p>我是正面</p>
      </div>
      <div class="back">
        <!-- 反面内容 -->
    <p>我是反面</p>
      </div>
    </div>
  </div>

这里front和back两个容器分别是正面和反面的内容,ontouchstart使得整个效果在触摸屏上可用。

然后就是主角css的内容了:

/* 整个容器,保持透视的效果,透视为1000 */
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}
/* hover的时候,对容器进行翻转,可以思考下为啥是rotateY */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 320px;
  height: 480px;
}

/* 翻转的速度 */
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* 隐藏背后的内容 */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* 让正面内容在反面内容的上面 */
.front {
  z-index: 2;
}

/* 背面,初始时候是返回转180度的 */
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

首先说说整个perspective,直接翻译过来就是透视的意思,它的值可以是none或者数字值。如同例子中的值为1000,意思就是图片效果将与你在距离屏幕1000像素看到的真实物体的效果是一致的。如果把respective的值设置得更大会出现什么效果呢?答案是图片翻转的时候观察到的透视效果就会越弱。用过3Dmax的同学可能方便理解一点,respective的值增加,相当于把透视镜头拉远。

了解了perspective之后再来看下backface-visibility属性,该属性表示该元素就如同一个透明的玻璃容器,翻转过去是否可见。如果把上例中的backface-visibility的值改为visible,可以看到back容器内的内容永远不会出现,因为,会被正面的镜像效果给挡住(记住正面的z-index是2,永远在back内容的上面)。

最后再思考下为什么需要把back内容提前翻转180度呢?想象一下我们做得翻转效果,就跟平常我们翻牌的动作是一样的。那么这个扑克牌需要怎么去制作呢?肯定是先有一个正面有一个方面,然后我们把正反两面粘贴到一起,注意粘贴的时候我们肯定是把反面的内容翻转下,然后把“背部”用胶水粘一起,所以我们需要提前把back元素翻转180度。

最后是关于rotateY,rotateX和rotateZ的内容,其实就是绕着那个轴旋转的问题。我们这里的翻转是沿着Y轴转动的,所以是rotateY(水平方向为X轴,竖直方面为Y轴,垂直显示器面的轴为z轴)。

最后该效果在opera和IE9下没有效果,firefox15下的效果被阉割,chrome22和safari下效果正常。

Read More

HTML5 hidden属性

HTML5给我们提供了很多简单易用的HTML属性:placeholder,download还有autofocus。这里我再给大家介绍一个hidden属性。当给一个元素体那几该属性时,它的表现有点类似于css当中的display:none;元素变为不可见,而且不占任何空间。实际案例如下:

        <div hidden>
     You can't see me!
  </div>

如果浏览器不支持该属性,你可以添加如下的css:

     *[hidden] { display: none; }

为什么要使用hidden属性呢?因为它在语义上更加正确,而且对于屏幕阅读器更加友好。同时,你的css中还省略了display:none这些字符。

ps:可以思考下是否是表现的内容在HTML中回归?仔细想想就能发现,hidden其实并不是仅仅只是表现上的隐藏,它同时表示内容的一种状态。
还有,不用测试了,IE(IE9)暂不支持该属性。

Read More

input file在浏览器间表现的差异

给input file化化妆

近期我让一个照片上传的btn蛋疼了很久很久,站在前人的肩膀上来个小结。

首先是我蛋疼的原因,各浏览器原生的input的样子不一样,而且和设计稿更是差了好远:

input file在浏览器间表现的差异
input file在浏览器间表现的差异

整体的效果还是不错的,但是有两点小问题,第一是看起来像输入框的东西是不能输入的,第二是浏览按钮没有手型,而且这个手型还不是cursor能够解决的。

第一个问题可以使用一个input来模拟,采用如下方案:

<form method="POST" name="frm1" enctype="multipart/form-data"><input id="F1" style="display: none;" type="file" name="F1" size="20" />
<input style="border: 1px solid #B4C9DC;" type="text" name="FileName" size="20" />
<input onclick="test()" type="button" name="B1" value="TEST" /></form>function test(){
with(document.frm1){
F1.click();
FileName.value = F1.value;
}
}

这样的话前面的那个框框便可以输入了,但是如果把问题回归一下,这个输入框是需要的么?这个地方不是我们用来输入的,而是记录上传文件的地址的。我们所模拟的上传文件真的需要这个东东么?

个人觉得这个输入框是很鸡肋的,一个btn就能搞定这个问题,在浏览器的效果中,还是觉得chrome和safari的方式最棒,后面的文字的效果是不难模拟的,我们把目光集中在如何让这个btn变成手型。

思路跟原来的还是一样,其他东东模拟设计稿,然后用一个透明的input覆盖在模拟层的上面。

这里面除了定位还有一个问题,就是btn的大小,有些设计稿的btn是很大的,用什么办法可以将input[file]的按钮弄大一点呢?设置width解决不了问题,有兴趣可以试试改变width在各浏览器的效果。设置zoom是可以的,最好还是使用font-size来改变btn的大小。ok,理论部分到此结束,自己动手尝试一下:

首先是dom部分:

<div class="out_wrap"><a class="btn_wrap" href="###">我美么</a>
<input class="btn_file" type="file" /></div>

这里我们先用一个a标签来模拟btn,用其他元素也是可以的。下面的input是原生的file模式。最后在外面加一个无用的div来做为父级元素方便input定位。如果使用背景图片的话,可以直接使用a嵌套input的模式,让input相对于a定位。css如下:

.out_wrap{position: relative;height:50px;float:left;overflow: hidden;}
.btn_wrap{display:inline-block;_zoom:1;margin:0;padding:0 15px;line-height:50px;overflow:hidden;text-align:center;background-color:#ccc;text-decoration: none;color:#d70000;border-radius:10px;font-family: "\5FAE\8F6F\96C5\9ED1";font-weight: 700px;}
.btn_file{position: absolute;top:0;right:0;opacity: 1;filter:alpha(opacity=1);font-size: 300px;}

然后你会发现鼠标hover上去还是不是手型啊,给input加一个cursor:

.btn_file{position: absolute;top:0;right:0;opacity: 1;filter:alpha(opacity=1);font-size: 300px;cursor: pointer;}

然后在chrome下就可以了,firefox也ok,safari也可以,IE也可以的……好神奇的,这里有神马秘密呢?注意input的定位方式:

.btn_file{position: absolute;top:0;right:0;

为什么要右对齐呢?让我们看一下各浏览器手型出现的区域,就明白了:

浏览器hover出现位置
浏览器hover出现位置

在各浏览器中,给input设置cursor属性后,最右边都会出现手型,只要将input调整到合理的大小,然后将位置定位好,就可以达到要求。我们这个例子是没有hover效果的。如果需要做成hover背景翻转的效果,可以尝试如下dom结构:

<a href="###" class="btn_wrap" title="上传文件">
  <input type="file" class="btn_file" />
</a>

这个东东还有继续下去的可能,比如在背景图片不加载,css不加载,功能是否可用的问题……

Read More