为原生表单控件穿上美丽的外衣

标签: 前端技术 CSS isux 用户体验 | 发表时间:2013-11-25 03:55 | 作者:Fufu
出处:http://isux.tencent.com

在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等。表单控件是web页面上重要的组成元素,具有非常高的功能性。交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现。可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件。让我们从一个真实的“栗子”开始。

视觉设计师提供了一张设计稿:

为原生表单控件穿上美丽的外衣

作为前端同学,我在收到稿子的一瞬间,其实内心各种想法交织:

为原生表单控件穿上美丽的外衣

这样设计很好看,只是需要模拟控件,看样子还要切图,下拉效果也是要模拟的,最重要的是要考虑兼容性,此外做完还要留下详细文档解释用来与团队沟通。

这样的模拟需要在兼顾实现设计的同时,还要保证网站的性能和可用性。这时我不禁开始怀念那些看起来平凡却非常实用的原生表单控件。如果用他们几乎可以解决以上所有问题。

1. 说服设计师用原生控件,原生控件好处一箩筐

我们从美观性、易用性、可用性、愉快感、忠诚度等几个维度对一个web产品评价,美观是其中的一环, 但是更好的功能实现、更高的效率会比华而不实的设计更加有利于产生愉悦的用户体验。

1.1 节省团队沟通成本

原生控件自身属性丰富,比如单选、复选框的不可选状态,输入框的不可输入状态等,可以直接开发使用,而不用像模拟控件,需要用样式模拟,增加工作量的同时增加各个环节的沟通成本。

1.2 兼容性

使用原生控件在各个浏览器都有非常高的兼容性,同时表单控件会根据各个浏览器的默认设置显示相应的视觉风格,也会根据在实际的不同状态做默认的相应变化。这样有效避免了模拟控件中包括对位置、状态等等判断和控制。

为原生表单控件穿上美丽的外衣

 

1.3 可用性

关爱有障碍的人士是我们的社会责任,作为前端开发者,我们也致力于为有障碍的人士提供更好的上网体验。原生控件的特性更好地支持键盘操作,tab切换,快捷键等功能,这样有助于视觉障碍用户使用读屏软件等等辅助工具对网页访问。

1.4 体验一致性

此外,跨平台开发比如在日趋火热的移动端开发,原生控件可以调用浏览器调用手机的控件,保证了跨平台的体验一致性;同时可以适应响应式设计,兼容多种终端设备。

1.5 美观性

还在担心没办法自定义原生表单控件的外观吗?Webkit给我们提供了这种可能,它允许重新定义控件的外观,让它们跟设计稿一样美丽。下面的例子告诉你。

2. 原生控件也可以很美丽,原生控件变装实例

使用原生控使用原来的html表单控件结构,通过css对控件自定义,改变其外形。下面从几个实例中,我们一起关注下那些可以自定义的相关属性,探寻未来可以自定义的种种可能。

例1:下拉菜单

为原生表单控件穿上美丽的外衣

 

这里我们可以通过通用的css定义方法,定义下拉框的宽度、高度、边框、背景,还可以自定义下拉按钮的图片。这里为了方便处理,采用base64的图片。

Tip: 下拉菜单的样式暂时只支持定义字体的大小。

例2:单选框

为原生表单控件穿上美丽的外衣

 

单选框也可以被改变包括宽度、高度、背景图片等属性。这里为了节约流量,把几种状态的图片合并为雪碧图。从图中效果来看,依靠单选框本身固有属性很方便实现选中和未选中时不可点的状态,并且不用担心兼容性问题。

例3:复选框

为原生表单控件穿上美丽的外衣

 

复选框和单选框非常相似,我们可以通过定义宽度、高度、背景图片等属性,得到我们想要的效果。同样的也可以用自己自身属性实现可点击、不可点击、选中和未选中状态的设置。

例子4. 其实,还可以做得更加好看些

以上的几个例子是在原生控件基础上做小的视觉改动,其实,我们可以做得更漂亮一些。下图设计是一组第一眼看起来跟单选框没关系的控件,透过现象看本质,同一时间只能选择其中一个空间,这就一个单选框控件的设计。所以我们以单选框为基础,改变他们的展现就做成了下面样子。

为原生表单控件穿上美丽的外衣

 

这一组已经用在我们项目中, 是不是看起来非常特别。 未来有更多的不拘泥默认样式的表单设计我们也可以试试看。

3. 某个时候美丽的外衣还是“国王的新衣”

非常遗憾,由于非webkit内核浏览器不支持这种自定义的操作,一部分用户包括国内浏览器大户ie版本比较低的用户还是不能体验到这种美观的控件。实用和美观的平衡对于产品来说固然都非常重要的,有时候舍弃一些视觉效果多一些实用性可能换来的是更好评的体验, 而且随着技术的发展,自定义越来越灵活,浏览器对其的支持也越来越好,从这个角度来看,或许未来我们可以更多使用一些原生表单控件。

为原生表单控件穿上美丽的外衣

相关 [控件 美丽] 推荐:

为原生表单控件穿上美丽的外衣

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
在互联网成熟的今天,大家对网站的要求不仅仅在功能实现上,也开始注重视觉设计,多终端用户体验等等. 表单控件是web页面上重要的组成元素,具有非常高的功能性. 交互设计师为它设计更加方便的操作方式,视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现. 可是由于表单控件自身的局限性,不能很好地自定义外表,所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件.

QR 码爱美丽

- jun - 爱范儿 · Beats of Bits
如果 QR 码到最后都不能流行,原因是什么. 长得丑肯定是原因之一,没有人愿意把 QR 码印在婚礼请柬的前面. 但是,一切都抗不过人类的想象力和行动力,有人发誓要把 QR 码变得美观,让我们看看他们的成果. 由 Paperlinks 为美国洛杉矶高级餐厅 Ayara Thai Cuisine 设计的 QR 码,颜色采用和餐厅相称的绿色,在 QR 码中间放了一只用简笔画画的大象.

珍藏一生的美丽

- Xin - 5time经典语录网
长颈鹿的脖子那么长 哽咽的时候是不是很难受-. 章鱼有三颗心脏 心痛的时候是不是很疼-. 乌鸦可以学人说话 尴尬的时候会不会装咳嗽-. 骆驼有长长的睫毛 想哭的时候能不能说眼睛进了沙-. 蛇没有宽宽的肩膀 她累的时候给不了能够依靠的温暖-. 小强有两个大脑 孤单的时候会不会一起想着谁-. 我没有长长的脖子 却哽咽的说不出话-.

美丽的雪景[10P]

- - 挖掘基

给数据穿上美丽的外衣

- babaru - 所有文章 - UCD大社区
如今,在设计,通讯,信息及数据新闻,用户界面多个领域都可以见到数据可视化的身影,引入视觉设计的数据大大提升了说服力,可读性和逻辑性都得到了增强,他带来的不仅仅是颠覆表格那么简单,而是一种思想理念,它不仅把可视化信息作为一种沟通工具;同时也是一种重要的数据挖掘的手段. 在互联网还没有诞生的年代,有一群元老们为数据可视化做出了不可磨灭的贡献,而至今他们仍在在努力地工作着,他们就是表格、饼图、柱状图等.

美丽的”玻璃海滩”[11p]

- suki - 煎蛋
这是位于加利福尼亚的MacKerricher州立公园里有这样一个神奇的海滩,海滩上铺着的不是沙子,而是一粒粒、一颗颗圆润又色彩各异的玻璃. 想想看,走在这样一片七彩而梦幻的玻璃滩,这是何等的浪漫啊. 至于这神奇的玻璃滩是如何形成的呢. 我只能说这是个奇迹 你先把图看完,然后且听我将它的形成过程为您慢慢道来~.

整形未必带来“美丽”人生

- Kione - 果壳网 guokr.com - 果壳网
不知道“窄、瘦、小”的“锥子脸”是怎么被奉为迷人脸型的标准的,只眼看着电视屏幕里女星们的脸一天比一天类似,个个都似一把磨尖了的锥子. 女星们是为了上镜好看,我们这些普通人又不是生活在楚门的世界里,无需镜头里看着好看,而是要生活里看着舒服. 更何况整形医生都说了,我们看到的整过形的美艳明星只是少数成功案例,我们看不到的是众多的失败案例.

给数据穿上美丽的外衣

- crete - FeedzShare 1天最热
发布时间:2011年07月25日,  已有 5 人推荐. 如今,在设计,通讯,信息及数据新闻,用户界面多个领域都可以见到数据可视化的身影,引入视觉设计的数据大大提升了说服力,可读性和逻辑性都得到了增强,他带来的不仅仅是颠覆表格那么简单,而是一种思想理念,它不仅把可视化信息作为一种沟通工具;同时也是一种重要的数据挖掘的手段.

美丽的选择性彩色照片

- lishali - 玩意儿
这些美丽的照片,并不需要任何的摄影技巧,但需要经过后期PS的处理,其中大部分照片都转换成了黑白,只有局部会留有一点本身颜色,有色彩的部分,在整体看来就会更受到关注. 本文原始链接:http://www.cngadget.cn/beautiful-selective-color-photos.html.