对网页圆角设计的一些思考

Tags: Posted in UE on 2009/02/07 | 8 条留言

在日趋流行的web2.0设计风格中,圆角的设计算是比较常见的,有些东西流行肯定有流行的道理滴。圆角设计不靠明星般炒作,却像明星一样被人推崇。于是鄙人吃饱没事干的研究起怎么让自己像明星被人推崇(眼前飘来砖头。。)

还是看图好说话,简单画了一张,不出意外图上两个同高同宽的按钮,一个圆角,一个方角。看完有什么感受呢?

圆角设计的优势
我第一眼看来圆角设计的亲和度明显更好与方角,简单的说,想必有些MM会对着那个圆角说:哇,好可爱呀!这就是让人看起来很友好少了点排斥的心理,让人看起来通俗,舒服,这也是大多数web2.0设计的站点看起来让人爱不释手的一部分原因。

在细看文字,你会发现(至少我发现)圆角中的文字更容易被体现出来,凸显主要内容我想这也是在网页设计上的一个应用,这样恰恰体现出了圆角设计的优势但也败露它的一个缺点(任何事物都是有两面性滴!):你觉的相对于方角来说是不是显的小气了点?我想这不仅仅是减掉四个圆角的面积的原因,举个例子,你会对一个高大的肌肉男说他可爱吗,当然这是从视觉来看,性格特征排外。

圆角设计的应用
我觉得在表达亲和度上,个人博客的设计应该会更多的体现在这一方面,让访客觉得你的博客是友好的,加进之后就会比较容易与你互动,这也对提升回访率和忠诚度也有很大左右。

当然说到亲和度上,表单提交上的圆角设计更容易让客户接受你的调查或其他互动,在举个例子吧,你是喜欢上面提到那位说哇,好可爱呀的mm向你推销产品还是那位高大的肌肉男呢?轻轻撇起嘴角想想,别想歪了哦.

不过我觉得公司企业网站上用圆角设计可能就要慎重了,当然圆角设计会看起来更现代,但或许会让你的公司看起来不够大气或稳重,当然公司的类型也很重要,要具体分析也不能一概而论。

网页上的圆角设计
要在前端网页上实现圆角,方法是多种多样,网上随便搜索就有一大堆,我也就不必要花大心思转载,目前我发现的来说大概可以用:用图片实现圆角,用纯代码实现圆角,用javascript实现圆角,或者调用不同浏览器内核的私有属性实现圆角,就拿wordpress后台来说就是用不同浏览器的私有属性来实现,在ie牌系列(Trident内核)浏览器下显示方角,在firefox(Geckos内核),chorme(Webkit内核)等下显示圆角。

鄙人才学甚浅,如有补充增加会在本页修改。end~

Relate Posts:// 相关阅读

  • 暂无相关日志

已经有了8条煽情的读后感

  1. 还是觉得直角得好看些,尤其是多个按钮并排的时候看上去更像是个整体。

  2. 其实我觉得圆角的会更好一点,方角的比较适合一些纯粹的技术型网站,更加的硬朗一些,圆角的有一点柔美的感觉。各取所需吧。

  3. wp的后台是使用了CSS3的圆角和阴影属性,所以在FF下看到的是圆角的,在Safari和Chrome下看到的是圆角+阴影的,在IE下,只是直角:)

  4. 呵呵,圆角凸显内容一个原因是你加了渐变
    其实我觉得圆角还是很受人欢迎的
    但是现在使用圆角就要增加图片,用js在低级浏览器偶尔也会有问题
    还是期待CSS3吧

  5. 又学习了~

  6. 有的来说却是是这样的,就像本站的导航一样,不过具体的问题还要具体分析,圆角有助于凸显主要内容,如果导航比较小的话,可以用小圆角装饰。个人意见哈

  7. 对css3来说认可的属性是border-radius,就目前来说没有任何一款浏览器支持这个属性,实现圆角和阴影的都是用到私有属性。你看后台登陆的css.
    -moz-border-radius: 11px;/*这个是ff,Gecko引擎专用的*/
    -khtml-border-radius: 11px;/*这是使用khtml引擎专用的*/
    -webkit-border-radius: 11px;/*这是基于webkit引擎专用的*/
    border-radius: 5px;/*这才是css3定义的圆角属性*/
    如果你把
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    这些删掉的话,你会发现显示的是直角,也就是说就目前来说的浏览器都还不支持border-radius: 5px;这个属性
    所以总的来说,实现圆角是用到不同浏览器的私有属性,css3要普及还要等很久很久的。

  8. 同意

发表感言