分析css3可以给我们带来更好的用户体验
来源:齐发棋牌游戏 发布时间:2012-03-24浏览

        作为重构工程师,必然要更关注他背后的技术革新,那就是css3的支持了!在这里徐州网络公司设计师从细节入手,看看css3会给人什么期待。

        我们应该都有所察觉,IE6占比逐渐降低,而支持css3的浏览器,也占有了相当的份额,也就意味着,我们一方面可以更多有选择的放弃IE6的兼容,另外,也可以在支持CSS3的高版本浏览器上做更多的考虑。

        利用伪类提升用户体验

        比如说文本,大家在浏览网页的时候,经常会用鼠标反选一些文字内容,用来方便阅读。这时候网页文字通常呈现高亮白色文字+蓝底背景色显示。

        当遇到一个暗色皮肤背景,依然显示蓝底儿白字,那效果就不是特别帅气了。这时候,其实可以考虑用伪类selection为网页文字的高亮提供了设计方案,来改变反选展示效果。鼠标选中文字后可设置相应的背景色和文字色,甚至是透明。简单一个属性就体现了产品对用户操作的关怀,从而提升用户使用感受。

        利用渐变字色提升视觉冲击

        随着css3的广泛使用,文字色渐变效果也越来越受到设计师和前端工程师的青睐。一个良好的渐变可以使文字看起来有质感,仿佛刻在纸面上一样,从而给用户一个良好的视觉感受。我们可以利用CSS3支持的文字透明,显示背景渐变的方式来模拟文字渐变。再加上一些过渡动画效果,我们甚至可以模拟一个简单的跑马灯的效果了。

        利用鼠标交互提升快感

        鼠标点击(click)、滑过(hover)、激活(active)操作仍是当今webPC端上最重要的几个交互方式。新浪微博上大部分的互动操作也来自于此。以V4宽版为例当前微博主站可以有鼠标交互操作的模块大致包括:顶导,左侧栏导航,勋章列表,feed区,右侧栏皮肤选择按钮,皮肤选择弹层……

        利用动画效果吸引眼球

        在摄影作品中,讲究布局不要太死,要给照片“留口气”。借鉴到网页设计中,这个说法同样有它的存在意义。先看看我们的微博齐发棋牌游戏,各个模块之间挤在一起,看上去布局有点闷,这时候,右上角那个彩虹按钮就成了点睛之笔。

        利用按钮多态效果提升直观感觉

        我们设计的时候都会考虑按钮的三态(即使没有active,至少也要保证有link和hover吧)。按钮的三态用来模拟用户的点击过程,一个好的按钮设计可以大幅增加用户的点击欲,特别是一些电商网站上,一个button制作的是否精良,是否吸引人点击,甚至可以直接影响到电商网站的最终成交量。

        而CSS3的到来,通过动画,渐变再加上按钮过渡效果,阴影等属性的使用,则可以更加细致的模拟整个用户点击的过程,使得用户在整个操作的交互过程都变得愉悦且舒服。比如下图我做的这个结合CSS3 3D所模拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果,其余是没有被按下的效果,如果用户在长按住按钮的时候,还会出现按键模拟被按下的过程动画。被按下后光线投影不变,而文字的凹凸感改变。

        其实许多交互细节效果是无法体现在设计稿上的,这就需要我们工程师有一定的敏锐和直觉,最好能够在UE稿出来后就跟交互设计师商榷一些具体可行的交互方案,进而提高我们的产品使用体验。

在一切开始前,说说您的需求

  • 上海静安区平型关路金赢108创意广场银座18楼

  • 咨询电话:021-61542532

  • QQ咨询:603233758

  • 江苏省南通市崇川区崇川路58号

  • 咨询电话:13585803906

  • QQ咨询:603233758

  • 江苏省徐州市淮海西路120号颖都大厦11F

  • 咨询电话:0516-85645808/85645818

  • QQ咨询:603233758

©Shanghai zhenlue net technology Co., Ltd. 齐发棋牌游戏 版权所有 沪ICP备15021857号-4
上海app制作上海app定制开发上海app开发 专家首选上海真略!