?!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

欧美日韩在线看,日韩视频一区二区三区,青青网站,国产欧美日韩综合,欧美日韩中文字幕在线观看,亚洲精品制服丝袜二区,久久综合狠狠综合久久

当前位置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点击q程Q一个好的按钮设计可以大q增加用L点击Ԍ特别是一些电(sh)商网站上Q一个button制作的是否精良,是否吸引人点击,甚至可以直接影响到电(sh)商网站的最l成交量?/p>

        而CSS3的到来,通过动画Q渐变再加上按钮q渡效果Q阴q属性的使用Q则可以更加l致的模拟整个用Lȝ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提供!