5x8小时服务热线:131 4102 7650(同微信)
您当前的位置:首页 > 网站常识 - SEO优化

网页前端开发:新浪微博CSS3适用细节初探

来源:加网编辑部 标签:网页前端开发,CSS3
分享到:
  利用伪类提升用户体验

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

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

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

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

  哈哈。不过别对这个设计当真。这只是一个示范,不代表我们UDC的品味。

  利用鼠标交互提升快感

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

  比如微博左侧导航的勋章栏,那里的向下展开操作区,在鼠标滑过时虽然有背景色变换,但略显生硬。时间久了,也许用户会对这种变换感觉厌倦了。没关系,现在我们可以通过CSS3可以把这里玩儿活。CSS3过渡属性(transition)的出现,可以很好的解决这个问题。通过设定过渡时间,可以让这种效果有一个过程化的变化效果,让鼠标滑过的变化效果,用柔和的渐显渐隐来处理。这样便改善了突兀的视觉变化,同时给人一种优雅的操作感受。

  那么延伸想象,当点击了勋章展开操作区之后,勋章模块由原来的一行,变成全部展开。嘭的一下,几十枚勋章跳出来,那这个展开效果是不是也可以采用刚刚那个柔和的方式展开呢?在CSS3诞生之前,这种效果只能通过js帮忙实现。而现在,这种效果交给CSS动画处理再合适不过了。CSS3不仅能够控制展开的速度函数,而且可以设置展开内容的透明度。当然,只有高级浏览器可享用哦,亲~

  利用动画效果吸引眼球

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

  可能当时因为实现成本的原因,新浪博客这里使用flash设计了鼠标滑过的动画。我们再来看现在搜狐微博的例子,鼠标划过,柔和展开。
他主要通过js时间来控制按钮外层的class名123的切换,在连续切换三次后模拟了这种柔和的展开效果。

  他主要通过js时间来控制按钮外层的class名123的切换,在连续切换三次后模拟了这种柔和的展开效果。

  而现在的新浪微博的情况是用户鼠标滑过,彩虹简单跳一下,如果觉得“灵气”少了点,那么好,我们可以设法加上一些效果看看。

  利用css3简单加上一些五角星欢快的旋转飞出,然后淡出的效果。这样给人一种欢快活泼的感觉,仿佛点击里会有一些惊喜。这样既满足了当今诸多互联网产品希望给页面添加活泼感的要求,又使得我们的页面不至于太闷,同时更能勾起用户的点击欲望。依次为五角星飞出的4个瞬间状态
是不是很path?当然这只是一个示范,不代表我们UDC的品味。

  是不是很path?当然这只是一个示范,不代表我们UDC的品味。

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

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

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

  看到这,各位看官可能笑了,你这都是纸上谈兵啊,都是还没上线的设想。当然路是一步步走的,饭是一口口吃的,我们不可能一下子就把这么多优化设想一步上线,但其实我们在线上也有一些细节是用到了css3的些许特性。

  比如在刚上线的微公益中多处鼠标划过都运用了过渡属性,使得鼠标滑过效果柔和且优雅。
还有投票项目,用户鼠标滑过参与者小头像,有0.2秒的过渡变化和2像素的绿色阴影扩散效果,这样可以良好的提示用户当前所划过的用户。

  还有投票项目,用户鼠标滑过参与者小头像,有0.2秒的过渡变化和2像素的绿色阴影扩散效果,这样可以良好的提示用户当前所划过的用户。
其实许多交互细节效果是无法体现在设计稿上的,这就需要我们工程师有一定的敏锐和直觉,最好能够在UE稿出来后就跟交互设计师商榷一些具体可行的交互方案,进而提高我们的产品使用体验。

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

  而且css3受累于国内浏览器占比的现状,无法大面积使用。但我想,作为行业内的一分子,从细节入手,逐步提高自己网站在高版本浏览器下的细节品质,多少也会影响到高版本浏览器的推进。

Use pseudo-classes to enhance the user experience

For example, text, everyone browsing the Web, often with a mouse anti-elect some text for easy reading. This time is usually presented bright white text on the page Text + blue background color. As shown below:

But microblogging master has a different skin, deep and shallow. When faced with a dark skin background, still shows blue Dier white, the effect is not particularly handsome up. At this time, in fact, consider using pseudo-class selection of highlighted text on the page provides design, showing the effect of changing the anti-election. Mouse to select the text can be set after the appropriate background color and text color, or even transparent. Simply a manifestation of a property on the user's operation care products, so as to enhance the user experience.

Use gradient color to enhance the visual impact of the word

With the widespread use css3, text color gradient effect is more and more popular designers and front-end engineers. A good gradient texture can make text look as if engraved on paper, like, giving the user a good visual experience. We can use CSS3 text support transparent, showing the way to simulate the background gradient gradient text. Plus some transition animation effects, we can even simulate a simple marquee effects. As shown below:

Haha. But do not take it seriously on this design. This is just a demonstration, it does not mean we UDC taste.

Use the mouse to enhance the pleasure of interaction

Mouse click (click), slides (hover), activation (active) operation is still today the most important ones webPC end interaction. Most of the Sina microblogging interactive operation is also from there. In the current version, for example V4 wide microblogging master can have mouse interoperable modules generally include: top guide, on the left navigation bar, medal list, feed zone, skin selection button on the right column, select the skin elastic layer ......

For example microblogging medal left navigation bar, where the drill down operating area, although when the mouse rolls over a background color changing, but slightly stiff. Over time, users will probably feel tired of this transformation. It does not matter, now we can live CSS3 can play here. CSS3 transition property (transition) appears, we can solve this problem. By setting the transition time, you can make this effect a process of changes in effect, make the mouse over effect of the change, with a soft fade Fade to deal with. Thus improving the abrupt visual change, while giving an elegant operating experience.

Then extend imagine, when you click to expand the operating area of ​​the medal after medal module from the original line becomes Expand All. Bang it, dozens of medals come out, and that this effect is not it also possible to start using just the gentle way to start it? Before CSS3 birth, this effect can only be realized through js help. And now, this effect to the CSS animated appropriate. CSS3 is not only able to control the expansion velocity function, and can be set up to expand the content of transparency. Of course, only advanced browsers can enjoy Oh, pro ~

Use animation effects to attract the eye

In photography, the dead do not be too particular about the layout, to give the photo "stay the tone." 网页设计中,这个说法同样有它的存在意义。">Reference to web design, this argument also has its meaning of existence. Take a look at our Weibo page, squeeze between the various modules together, the layout looks a bit boring, this time, the upper right corner of the rainbow buttons became the finishing touch.
In fact, this design is a continuation of the previous Sina blog design. FIG.

It was not possible to achieve cost reasons, Sina blog here use flash designed mouse over animation. Let us now look at an example of Sohu microblogging, mouse across, soft unfold:
His main time control button by js outer class name switch 123, three times in a row after switching simulates the effect of this gentle expansion.

His main time control button by js outer class name switch 123, three times in a row after switching simulates the effect of this gentle expansion.

And now the situation is Weibo user rolls the mouse over, rainbow simple jump, if you feel "Aura" was lacking, so good, we can try to add some effects to see.

Use css3 simple five-pointed star with some cheerful rotating fly, then fade out effect. This gives a lively feel cheerful, as if there will be some surprises click. This will not only meet many of today's Internet product page to add a lively sense of hope to the request, and so our page will not be too stuffy, but better evoke the user clicks desire. Pentagram were flying four transient state, as shown below:
Is not very path? Of course, this is just a demonstration, it does not mean we UDC taste.

Use the buttons to enhance the effect of polymorphic intuitive sense

When we design will consider three-state buttons (if not active, at least to ensure link and hover it). Three-state buttons are used to simulate the user clicks the process, a good button design can significantly increase the user clicks desire, especially some of the electricity supplier website, a button whether well-crafted, whether attractive clicks, or even a direct impact on Final volume of electricity supplier website.

The arrival of CSS3 through animation, using property gradients plus button transition effects, shadows, you can simulate more detailed user clicks the whole process, allowing users to interact with the entire operation have become pleasant and comfortable. For example, the following figure I will do this in conjunction simulated keyboard CSS3 3D stereo effect. We can see that Z, X, N, M key is pressed effect, the rest is not pressed effect, if the user pressing the button a long time, but also the key is pressed process simulation appear animated. After being pressed light projection unchanged, and the text of concavity change. Thus more sophisticated process simulates a user clicks

See this, Tell me what you may laugh, you ah this is on paper, are not envisaged on the line. Of course, the road is a step by step to go, rice is a stuttering, we can not conceive of a sudden put so much optimization step on the line, but in fact we have some details on-line is used in the css3 of little features.

For example, in micro-public just on the line in many places have used the mouse across the transition property, making the mouse over effects, soft and elegant.
Also voting project, the user rolls the mouse over a small picture of participants, transitional change of 0.2 seconds and a green shadow diffusion effect 2 pixels, which can prompt the user currently good across the user.

Also voting project, the user rolls the mouse over a small picture of participants, transitional change of 0.2 seconds and a green shadow diffusion effect 2 pixels, which can prompt the user currently good across the user.
In fact, many of the details of the interaction effect can not be reflected in the design draft, which requires our engineers have a keen and intuitive, it is best to come out just after the draft UE interaction designer interactive discussion of some specific and feasible solutions, thus improving our product experience.

In fact, many of the details of the interaction effect can not be reflected in the design draft, which requires our engineers have a keen and intuitive, it is best to come out just after the draft UE interaction designer interactive discussion of some specific and feasible solutions, thus improving our product experience.

And css3 involvement in the status of the domestic share of the browser, you can not use a large area. But I think, as a member of the industry, the details start to gradually improve their website details in high quality version of the browser, how much will affect the high version of the browser forward.
备注:本篇文章由加网编辑原创内容,转载请注明出处:转自加网

相关网站常识

更多