Web无障碍设计(Accessibility in Web design,也叫网站可及性 )是要让所创建的网站对所有用户都可用/可访问,不管用户的生理/身体能力如何、不管用户是以何种方式访问网站。

 

为什么无障碍如此重要(帮助残障人士)

为什么不是所有网站都能无障碍访问?你可能也会问自己为什么存在“无障碍”的问题,为什么不是所有网站都能让所有用户无障碍访问?要进行无障碍设计有许多不同原因,其中包括残疾人用户的需求、不同的人访问和使用互联网的不同途径和方式。


作为一个混迹互联网的IT人士,如果想各方面都了解点得话,那么设计gif动画也是个不错的学习方向哦!

下面就step by step 教大家如何设计一个loading.gif的加载动画图:

先看效果图:

苹果的首席设计师Jony Ive最近接受了采访,大师透露的第一点设计经验之谈是要务实不要务虚:

设计这个词既含义丰富又空洞无物。我们平时都不谈设计,而是讨论创意形成和产品制造。

Jony Ive开发产品时会时刻记住两个目标

  1. 让设计尽可能简约
  2. 把每个产品设计到足够好,好到用户无法接受其他样子。

应用设计有一条原则是,好看的就是有用的。但是Google新近的一项研究表明,情况并非如此。

推荐给所有产品经理和用户体验设计师:需要用文字来解释的交互不是好交互;自然往往和人的本性相关的;产品经理在面对一个复杂问题时,需要有一种符合“自然”原则的建模方法,来通过产品结构模块以及模块之间的联系来映射和解决问题。

 

TAT.melody 完美的自定义滚动条
In 用户体验设计 on 2012年05月14日 by view: 8,840
8

今天写了一个滚动条UI组件。欢迎大家体验:http://alloyteam.github.com/ui/

为何称之为完美呢?只因其具有以下优点:

  1. 兼容所有浏览器。
  2. 支持所有鼠标事件,包括长按。
  3. 样式可以完全自定义。
  4. 使用该组件无需改动原来的任何代码,也不要求原来的元素使用什么定位方式。
  5. 只需引进一两个js文件,再添加一句代码即可。

下面讲核心部分。

你是否遇到过这样的情景:

1、用gif格式的loading菊花会有背景颜色,与页面背景格格不入
2、于是,设计师给你一帧一帧变化的透明png合图,你能想到的就是用JS来控制
3、最终,你会发现用JS控制的loading菊花,对网页性能有一定的影响

        好在现在,这个HTML5到来的时代,如果你不用考虑浏览器兼容问题,你就可以用CSS3轻轻松松实现透明loading菊花的加载效果,下面的Step By Step 会让你茅塞顿开:

文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完全不是问题,因为css3里面已经有实现text-overflow:ellipsis,但是最新w3c文档中却移除了这个属性,即使这样,也有不少浏览器实现了这个特性。其浏览器支持情况如下:

可以看到,只有firefox和opera11一下的版本不支持这个浏览器,以此也可以放心大胆的用了。但是遇到要求高的产品经理时(╮(╯_╰)╭),就不得不考虑firefox等不支持的浏览器了,唯有使用js进行字符截断。

比较简单的截断方式就是按字符个数截断,以一个中文宽度等于两个英文宽度为前提,根据给定字符个数进行截取。但是字符在页面显示的时候,其宽度并不是一定的,会根据不同的字体和字体大小的不同而不同,更何况字母i和A的宽度是不一样的,存在bug且不够精确。