当前位置Q?a >首页 > |站
分析css3可以l我们带来更好的用户体验
来源Q徐州亿|网l科技有限公司 旉Q?012-03-24 作者:
作ؓ重构工程师,必然要更x他背后的技术革斎ͼ那就是css3的支持了Q在q里徐州|络公司设计师从l节入手Q看看css3会给Z么期待?/p>
我们应该都有所察觉QIE6占比逐渐降低Q而支持css3的浏览器Q也占有了相当的份额Q也意味着Q我们一斚w可以更多有选择的放弃IE6的兼容,另外Q也可以在支持CSS3的高版本览器上做更多的考虑?/p>
利用伪类提升用户体验
比如说文本,大家在浏览网늚时候,l常会用鼠标反选一些文字内容,用来方便阅读。这时候网|字通常呈现高亮白色文字+蓝底背景色显C?/p>
当遇C个暗色皮肤背景,依然昄蓝底儿白字,那效果就不是特别帅气了。这时候,其实可以考虑用伪cselection为网|字的高亮提供了设计方案,来改变反选展C效果。鼠标选中文字后可讄相应的背景色和文字色Q甚x透明。简单一个属性就体现了品对用户操作的关怀Q从而提升用户用感受?/p>
利用渐变字色提升视觉冲击
随着css3的广泛用,文字色渐变效果也来受到设计师和前端工E师的青睐。一个良好的渐变可以使文字看h有质感,仿佛(jng)dUR上一P从而给用户一个良好的视觉感受。我们可以利用CSS3支持的文字透明Q显C景渐变的方式来模拟文字渐变。再加上一些过渡动L果,我们甚至可以模拟一个简单的跑马灯的效果了?/p>
利用鼠标交互提升快感
鼠标点击QclickQ、滑q(hoverQ、激z(activeQ操作仍是当今webPC端上最重要的几个交互方式。新微博上大部分的互动操作也来自于此。以V4宽版Z当前微博ȝ可以有鼠标交互操作的模块大致包括Q顶|左侧栏导航,勋章列表Qfeed区,右侧栏皮肤选择按钮Q皮肤选择弹层……
利用动画效果吸引眼球
在摄׃品中Q讲I布局不要太死Q要l照?ldquo;留口?rdquo;。借鉴到网设计中Q这个说法同h它的存在意义。先看看我们的微博首,各个模块之间挤在一P看上d局有点Pq时候,右上角那个彩Ҏ(gu)钮就成了点睛之笔?/p>
利用按钮多态效果提升直观感?/strong>
我们设计的时候都会考虑按钮的三态(即没有activeQ至也要保证有link和hover吧)。按钮的三态用来模拟用L(fng)点击q程Q一个好的按钮设计可以大q增加用L(fng)点击Ԍ特别是一些电(sh)商网站上Q一个button制作的是否精良,是否吸引人点击,甚至可以直接影响到电(sh)商网站的最l成交量?/p>
而CSS3的到来,通过动画Q渐变再加上按钮q渡效果Q阴q属性的使用Q则可以更加l致的模拟整个用L(fng)ȝq程Q得用户在整个操作的交互过E都变得愉?zhn)且舒服。比如下图我做的q个l合CSS3 3D所模拟的立体键盘效果。大家可以看到Z、X、N、M键是被按下的效果Q其余是没有被按下的效果Q如果用户在长按住按钮的时候,q会出现按键模拟被按下的q程动画。被按下后光U投׃变,而文字的凹凸感改变?/p>
其实许多交互l节效果是无法体现在设计E上的,q就需要我们工E师有一定的敏锐和直觉,最好能够在UEE出来后p交互设计师商榷一些具体可行的交互Ҏ(gu)Q进而提高我们的产品使用体验?/p>
以上是由徐州亿网|络公司Q?a >http://www.exz.cnQ提供!
公司动?/a>
- 2015徐州亿网APP点子大赛
- 周六游?—?水深火热
- 数钱游戏 --- 开心一?/a>
- 周末游戏
- 由徐州亿|承建开发的塔机动态监控管理系l正式上U?/a>
- 由徐州亿|承建开发的Zȝh防伪防窜货功能的微信公众q_正式上线
- 中秋攑ց前的团队Ƣ聚
- 台儿庄一日游
- 周六游戏 ------ H出重围
- 7.26日周六活?/a>
行业资讯
- 1?日~1?日百度相关系l出现故?/a>
- 癑ֺ公司的技术别以及薪资范?/a>
- 企业App开发推q的三大程
- 徐州|络公司Q网l陷׃可不?/a>
- iPhone6涉嫌外观抄袭
- 山寨Q扒一扒那些靠着别h才能zȝ手机APP应用
- APP当道的时代你用或者不用,它就在那?/a>
- 做网站要选择合适的域名
- 如何避免成ؓGoogle补充材料
- 认识SEO原理和网站推q方?/a>
营销{划