当前位置:主页 > 平面设计

最新发布

详细解析网页设计中的轮廓框案例技巧
详细解析网页设计中的轮廓框案例技巧

网页设计中使用轮廓框元素的案例不多。但实际上,这些纤细的、整洁的轮廓框效果极佳。为了保证效率的最大化,轮廓框一般采用纯色线条,这样便能产生前景与背景的明显对照。黑和白,是最传统的配色,以其对比强烈,效果突出而著称。因此很多轮廓框采用了白色线条。除了颜色,线条的粗细也是一大考量,纤细的线条让人感觉精致细腻,粗厚的线条显得异常醒目。下面,本文收集了一些网页设计中轮廓框应用的案例。Olivier Staub此网页设计一反传统,对菜单采取了简化设计,蔚为壮观的全屏图像滚动。厚重的轮廓狂和粗字体极具视觉冲击效应。Flinders Street Station Design Competition这个网站由一大堆轮廓框组成,线条很厚。轮廓框中填充了柔和的色调,功能为按钮。Ola Kvernberg.干净整洁,颇具视觉吸引力。设计师成功的融入了个人风格,极具创意和吸引力的主页。尽管主页采用了单色设计,但是紫色轮廓框线条很好的进行了调和,让整体显得错落有致。

8 次浏览
浅谈10个CSS简写和优化的心得技巧
浅谈10个CSS简写和优化的心得技巧

CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。下面介绍常见的CSS简写规则:这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:你可以简写成: 1 margin:1px 2px 3px 4px; 语法 margin:top right bottom left; 12345678 //四个方向的边距相同,等同于margin:1px 1px 1px 1px; margin:1px; //上下边距都为1px,左右边距均为2px,等同于margin:1px 2px 1px 2px; margin:1px 2px; //右边距和左边距相同,等同于margin:1px 2px 3px 2px; margin:1px 2px 3px; //注意,这里虽然上下边距都为1px,但是这里不能缩写。 margin:1px 2px 1px 3px; 二、边框(border)边框的属性如下:可以缩写为一句:

8 次浏览
详细解析2014年网页设计趋势分解
详细解析2014年网页设计趋势分解

在过去的2013年及2012年,网页设计理念或多或少都受到大公司设计风格的影响。Google过去几年中也在搜索算法上做出很多调整——更注重网站内容原创性及可用性。HTML 5释放了设计师的思维,有利有弊,HTML 5 动画有时也玩过火了。随着移动Web的访问不断增大,响应式设计变得愈加重要了。下面我们通过简单的一些案例阐述2014年的Web设计趋势。但是,记住,不要过度使用。不是每一种趋势都适合你的客户。作为设计师或Web开发人员,你有责任紧跟趋势,并量身定做你客户的网站。准备好,跟随我们的脚步来看看今年的流行走向,然后决定你要如何使用它们。一、扁平化设计当苹果放出iOS 7的时候,不是每个人都喜欢这种全新的扁平设计的。然后,乔纳森·艾维知道这是去掉拟物化的最佳时机,引进了极简、干净、硬朗的设计风。iOS 7发布后,大量的扁平化风格出现在网络上,今年也不例外。这不仅对移动友好,而且更能体现设计的本质——有效组织外观和感觉。Mostlyserious完全的扁平化设计及少量动画效果Belancio

7 次浏览
详细解析网页设计中的F式布局
详细解析网页设计中的F式布局

今天我们来重点介绍网页设计中的F式布局。传统的布局方式,依赖布置视觉线索,“控制”用户的视觉路径,相较之下,F式布局更加自然,更加友好。本文将讲述一些F式布局的规则、原理以及设计方法。F式布局简介F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究。一般来说,用户浏览网页的视觉轨迹是这样的——先看看顶部,然后看看左上角,然后沿着左边缘顺势直下….而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素(诸如品牌Logo,导航,行为召唤控件)放在左边,而右边一般放置一些对用户无关紧要的广告信息。我们来看一下Webdesigntuts+的眼动热点图:这张眼动热点图展示了用户浏览此网站的视觉轨迹,呈一个F型。热区(途中红色、黄色、橙色部分)代表用户注意力最集中的地方。总结一下用户浏览网页的一般模式:先看看页面的左上角,了解一下这是什么网站(因此此处适合放置Logo)——“知道是什么”然后扫描一下页面的顶部(导航栏,搜索栏)——“了解用法”

2 次浏览
利用颜色查找快速制造大感觉专题设计
利用颜色查找快速制造大感觉专题设计

当接到一个紧急需求的时候,设计师脑子里一定在抱怨不爽了。因为设计要用”赶出来”的话,是很难有优秀的作品的。但有时候不得不面对现实,需求方急着要,我们也只能加快速度设计。把脑子里有的设计形式全都翻出来,全用在页面上。有时候可能会有意想不到的结果!有时候又会出现那种连自己都不愿意承认是自己做的尴尬处境。这种快速设计没有经过前期的精细推敲,总有站不住脚的地方,但是时间有限,能达到一眼望去,让各位爷能心里感叹一声”哇”,就已经谢天谢地啦!!快速设计专题有很多种方法,这里只是给大家提供其中的一个小思路,并不一定适用每一个专题,如果在你紧急的情况下,不妨试试这个。今天收到了一个交互稿,如下。是一个在圣诞节的日子里卖皮肤也送皮肤的营销类型专题,并强调要使用”冰原狙击 凯特琳”这张原画进行设计。游戏类的专题,一般没有专门的交互设计师给你去设计交互稿,所以拿到交互后,就需要对交互进行一遍”审查“,把不明白的地方和接口人对一遍。比如这张交互上,标题有3列,”冰原献礼”"限定皮肤3送1起”"冰原狙击凯特琳 首战正义之地 “这些是出现在头部的文字,一般都属于最重要的信息传递。所以要特别详细的问接口人,这些文字都是什么意思,是不是已经完全确定采用这些字(因为后面要对这些文字进行设计,如果后面再要修改,就会浪费很多时间)又比如:上面四条”献礼1、2、3、4″是什么意思,放在这里有什么用。等等。总结来说,拿到交互后,一定要对交互的内容进行梳理,分析出内容的主次(对你后面的设计特别重要)

15 次浏览
如何给网站布置干净的关于我们页面
如何给网站布置干净的关于我们页面

所有网站,无论是官方、电子商务、社会化网络还是个人站点,都应该设计一个恰到好处的“关于”页面,直截了当地告诉到访者,为什么要浪费他们宝贵的时间浏览你的网站。编者:这是一篇老文章,不过写得还算实用,大家可以了解一下设计思路。一、为什么要有“关于”页面不要让用户思考!1、向浏览者传达本站的价值,留住用户2、始终提醒自己站点的主旨,不要跑题二、起什么名“关于”页面存在的目的就是尽快让浏览者找到网站的方向,或者作为进一步补充,比如陈列相比竞争对手而言,自己的优势和特色。所以名字越简单、越朴 素就越好。典型的门户的名字比较传统,因为它们无人不晓。比如网易的“公司简介”,谷歌的“Google大全”。大众、平易近人的网站往往都称呼为“关于我们”,比如嘀咕、phpChina;“关于+网站名称”的类型也不在少数,比如豆瓣和支付宝。

20 次浏览
精选2013年精致漂亮的UI设计作品欣赏
精选2013年精致漂亮的UI设计作品欣赏

回顾2013年,我们发现很多很优秀的UI设计作品,也期待2014年有更多创新的设计诞生!本期设计达人网从Dribbble上总结了2013漂亮细致的UI设计作品,有APP设计、界面设计、网页设计等等,这些设计很多看上去都令人兴奋,细致到位,而且又创新,很适合设计师们学习和参考。由于设计作品太多,图片已经被压缩,所以大家可以查看这些设计作品的原图,有PNG大图以及GIF动画,很多效果很棒哦! 越来越多类似iOS 7的扁平化、半透明、拟实景动态界面。 查看原图 漂亮的半透明Tag、catelog选择 查看原图 以后的网站导航设计不一定是横向的了,更多表现为侧边栏。扩展阅读《2014网站导航设计趋势 使用垂直的导航菜单设计》 查看原图 APP也追求简约设计,并重视本色方案 查看原图 Windows 8的时尚Metro UI风格,界面简洁,配色清新有活力,很漂亮。 查看原图 使用统一圆形风格设计,字体、图案以及交互设计动画都是以圆为主,请点击看GIF动画,很不错哦! 查看原图一个和地图位置应用界面设计,背景蓝色与白色的配合使得界面看起来很清晰,也很漂亮

16 次浏览
网页设计配色剖析之绿色使用技巧
网页设计配色剖析之绿色使用技巧

每个人都有自己最喜欢的颜色,在工作以及生活中,当购买产品或进行艺术创作的时候,他们会选择自己喜欢的颜色。对于设计师来说也是同理。设计师偏好在设计中重复使用他们最喜欢的色系。虽然命题是无限的,但是他们还是喜欢遵循自己的审美感觉。推广成功、运营优秀的网站,往往让用户感觉到页面和谐感强、视觉效果符合本能审美、元素具有图像象征且与产品服务紧密联系,这归功于网页设计。绿色的定义绿,是一种颜色,绿色处于光谱中间,波长较短,大约为500~570nm。在减色法中,绿色不是主色,但是可以由黄色和蓝色、或者黄色和青色创造出来的。绿色是加法三原色之一。Green网页设计中的绿色绿色在网页设计中效果极佳,因而被广泛的应用。可能是因为绿色是自然中最多的颜色,绿色能够唤起一种人类对于自然的本能意识。高手能够行之有效的将绿色和其它颜色有机结合,奏出一曲色彩、色调、明暗完美互补的视觉三重奏,让人兴趣满满。而材质的加入也能改变颜色的效果,比如,粗糙的材质表面让颜色看起来更深,平滑的表面让颜色看起来更浅。

24 次浏览
如何创意的使用网页设计中的方块元素
如何创意的使用网页设计中的方块元素

当你欣赏下面这些案例时,留意一下他们如何以及为何使用矩形或正方形元素,会使得你思路大开。此处列举的方块元素,被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。让我们来详细了解一下。使用方块布局的目的是什么?或许这对你而言有点哲学和理论化,我们来看看别人选择方块布局的原因。(顺便提一句,我所指的方块也包括矩形,有些案例也使用矩形。)使用这种元素有两大原因。首先也是最重要的,它有助于组织内容。其次,它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。看看Dennis Adelmann的作品集,显而易见,方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径,让事物保持简洁。Dennisadelmann不过再看看We Love Noise这个网站,它就完全不同!是的,到处都是方块,移动鼠标时还有个有趣的动画效果。不过除了组织内容之外,你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。Welovenoise怎样用好它们?

19 次浏览
网页设计心得之网页乾坤大挪移心得
网页设计心得之网页乾坤大挪移心得

腾讯TGI高级视觉设计师@晋小彦的系列专题,童鞋们看过瘾了木有?这一期教你如何将呆板僵硬的网页设计转眼就变成灵动活泼的创意设计,究竟是怎样的方法才能快速拓展设计思路呢?这一期,有招。时间短、没点子、没创意,又要快速捕抓眼球,怎么办?对页面整体进行旋转和平移是快速改变视觉是快速有效的方法.它打破了正常的网页视觉习惯,吸引了观众的注意力。说说 —— 旋转和平移如果每天要面对着巨大的需求量,难免有创意枯竭的时候,如果有一些相对讨巧的办法,能够不受主题限制,当然是再好不过的,这时候,我们不防试试这简单的小办法。旋转和平移,这是针对整个页面的大版式而言的,到底会造成怎样一种效果,我们继续往下看。

15 次浏览
共计26043条记录 上一页 1.. 2474 2475 2476 2477 2478 2479 2480 ..2605 下一页