首页风格
门户
博客

CSS中有关圆圈的趣味设计

日期:2013-10-13  来源:GBin1.com

CSS中有关圆圈的趣味设计

曾被设计师抛弃的圆圈元素,现在又卷土重来了。圆形并不会像其他矩形那样堆叠,所以可以营造出不一样的整体感觉。圆圈的形状是完美的,无论从哪个角度看它都一样。圆圈是完整的,与自然相和谐的——想想有多少自然元素都是以圆形为基调的。让我们来看看用圆圈能做些什么吧!

基础的圆形

圆圈对于我们来说是既熟悉又安全的图形。圆圈里面的物质被保护起来,圆圈外围的物质无法影响到圈内。这种形状非常有趣,很有特点。将圆形应用到设计中去是经 过深思熟虑的。但是处理圆形也是具有挑战的,因为这种奇怪的形状可能与其他设计元素无法融合。以圆圈为主题的设计方案必须经过详细计划、设计和执行。

在现代设计作品里,除了传统意义上的圆圈之外,我们通常还能见到更多的圆状元素。椭圆形、拥有显著弧形边缘的类似矩形等等,这类元素都带有各自的设计风格。今天我们专注于标准的圆形图案,讨论近期火热的设计作品。

圆圈体现的内容

CSS中有关圆圈的趣味设计

圆圈可以带有很多关联性。它们是流体的,与运行和移动联系在一起(想想车轮)。由于圆形是大自然中一种基础图案——月亮,花朵,水果——所以圆形代表的图案能够表达真实与生活。此外,圆形的弧度还可以与能源,力量,和谐,无限联系起来。

作为设计师,我们经常见到带有颜色的轮子形状,它是最易于辨认的圆圈。这种运用很成功,因为结合了上述特征,创造了一个传递信息的对象,这是一种简单,有力,和谐的方式。圆形是完整的,用于突出强调。

网页设计中的圆圈

CSS中有关圆圈的趣味设计

圆圈,曾经很少用于网页设计中,如今却成为一种主流。很多年前,在CSS中很难创建圆形图案,但现在情况不同了。那么一个很棒的带有圆圈的网站设计包括哪些特点呢?通常有以下五种展示形式:

作为占主导地位的形状或框架

比起矩形图案,一些设计师更愿意使用圆圈。圆圈可能被用于标志或按钮。圆圈能够增加趣味性,把图案“困”在圈内。图案是否适合圆形呢(相机拍的照片就不是圆 形的)?圆圈是否足够大以保证里面的内容不至于乱七八糟?将圆圈作为框架在组合设计中很流行,用于“引出”某方面的工作,而可以不把全部内容都展示出来。

作为用户界面元素

大家都很熟悉圆形的按钮图案了。经常用作按下(或单击)它来做出选择,所以圆圈图案是受欢迎的一个选择,用来表示采取行动。保守的圆形UI元素是最受欢迎的。

作为背景

由于圆形表现出先天的和谐感,可以经常被用来当做背景图案。它们营造一种流动和沉静的感觉。圆形的背景也可以有助于聚焦它们围绕的元素,比如一个圆圈内的图标。

作为一个图形信息的工具

把圆形叠加起来的公共区域常用来说明不用事务的相同点与不同点。这是一种常见的工具,用于显示不同类型的数据与信息。

引起兴趣

有时候使用圆圈仅仅是为了区别与背景图案,突出被圆圈圈出来的部分。圆圈能轻易引起视觉兴趣。但是需要注意的是,使用过多的圆圈会引起外观感觉的混乱和不协调,反而使内容更加不明显了。

用户界面元素中的圆形

CSS中有关圆圈的趣味设计

作为一种用户界面工具,最好的使用办法是将圆圈作为整个设计主题的某个部分。它们需要一定的空间,被定义,然后附加意义。这样,圆圈才可以替代其他类型的导航。

Gravitate Design为例。圆圈被用于一个特定的功能——导航向左和向右。所有其他的按钮均为矩形。圆圈在这里的作用是用出乎你意料的一种方式与你互动(在这个案例中,网页能够上下滚动,同时还能水平滑动)。

Zervice也采用圆圈作为按钮和导航,但操作方式不同。左侧导航使用“按钮”,让你进入到下一个页面。除了网站特定的功能,圆圈还起到固定文本内容的作用,相对于不断变动的背景,让你注意屏幕上的某个确切位置。

应用程序和移动设计中的圆圈

CSS中有关圆圈的趣味设计

圆圈在应用程序中也可以带来很多的乐趣。我现在沉迷于Hundreds,它是一个只包含圆圈的游戏。通过该游戏可以练习如何应用圆圈进行设计——它们需要更多的空间。游戏中,不同尺寸的圆圈在屏幕上移动,如果他们彼此接触到了,则游戏结束。这与设计原理一致。圆圈需要一定的空间来达到更好的功能性。

在比较小的屏幕上使用圆圈将是一个挑战,因为圆圈必须足够大才容易看清内容,如果圆圈作为按钮使用的话,也必须拥有足够面积才能易于点击。

Buza采用圆形按钮进行销售。它们是大块而孤立的,用户能够轻松点击到它们。

其他设计项目中的圆圈

CSS中有关圆圈的趣味设计

圆圈在名片上同样也是一个受欢迎的标志和形状(这并不奇怪,因为我们看到许多相同的趋势,既有电子版本又有印刷版本)。

同样的理由适用于印刷产品使用或不使用圆圈。但有一个额外的考虑,印刷不同于数字项目的设计,你限于一个矩形屏幕来创建和设计一个圆形媒体。

传单、贴纸、卡片和其他材料,切割成不同行状,被用于更多非常规的用途时就带有额外的价值。

留意圆的内部有些什么。记住圆形是设计来确定某些内容的。确保形状和视觉图像和文字都共同传递一种统一的消息。当圆圈用在数字化项目的时候就要按照这几点来考虑方案。

结论

那么,你会如何使用圆圈呢?有一大堆的资源可以帮助你想象可能性,包括我最喜欢的资源网站,Creative VIP

Creative VIP不仅使用大量的圆圈元素,还有许多好用的工具。现在,你可以找到漂亮的圆形图标、圆形应用设计模板、登陆页模板使用环形、圆形滑块、甚至一些徽章(我是这个资源网站的会员,我非常喜欢这个资源网站)。

via 极客标签

来源:CSS中有关圆圈的趣味设计

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐