首页

导航设计趋势!关于图标式导航的改进

蓝蓝设计的小编

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。
这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube的图标式导航(移动版):

为导航瘦身!关于图标式导航的改进

这是Squarespace的图标式导航:

为导航瘦身!关于图标式导航的改进

AWARD的图标式导航不拘一格:

为导航瘦身!关于图标式导航的改进

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说:操作缺乏反馈

 

想让网站动感十足?试试网页设计中的韵律线条

蓝蓝设计的小编

网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级。
当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同。

打破传统布局,创造动态的自由视感,让构成更加复杂——无论是利用简约的几何图形,或是精致的倾斜图像。
让你的设计更具吸引力,不妨试试斜线。

Paseo Itaigara

形状感很强,整体设计的很成功,显得并不杂乱。菱形无处不在,拼嵌式的菱形,装饰性的菱形,按钮的菱形,很好的主题一致性。

Paseo Itaigara
 

Impero

交互式网站,积极的氛围、极简的色彩。设计师利用两组对角线(粗细交织)打造了视觉路径。

Impero
 

Alpina

强烈推荐!利用视觉滚错,加上美轮美奂的照片。来感受这趟视觉盛典吧。流畅优美的照片美景。斜线分割的很巧妙(试想用直线风格,效果不会这么到位)

Alpina
 

android中px、dp和sp,这些单位有什么区别?

蓝蓝设计的小编

相信每个Android新手都会遇到这个问题,希望这篇帖子能让你不再纠结。

px:

即像素,1px代表屏幕上一个物理的像素点;

px单位不被建议使用,因为同样100px的图片,在不同手机上显示的实际大小可能不同,如下图所示。

dp:

这个是最常用但也最难理解的尺寸单位。它与“像素密度”密切相关,所以首先我们解释一下什么是像素密度。假设有一部手机,屏幕的物理尺寸为1.5英寸x2英寸,屏幕分辨率为240x320,则我们可以计算出在这部手机的屏幕上,每英寸包含的像素点的数量为240/1.5=160dpi(横向)或320/2=160dpi(纵向),160dpi就是这部手机的像素密度,像素密度的单位dpi是Dots Per Inch的缩写,即每英寸像素数量。横向和纵向的这个值都是相同的,原因是大部分手机屏幕使用正方形的像素点。

不同的手机/平板可能具有不同的像素密度,例如同为4寸手机,有480x320分辨率的也有800x480分辨率的,前者的像素密度就比较低。Android系统定义了四种像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它们对应的dp到px的系数分别为0.75、1、1.5和2,这个系数乘以dp长度就是像素数。例如界面上有一个长度为“100dp”的图片,那么它在240dpi的手机上实际显示为80x1.5=120px,在320dpi的手机上实际显示为80x2=160px。如果你拿这两部手机放在一起对比,会发现这个图片的物理尺寸“差不多”,这就是使用dp作为单位的效果,见下图。

网络营销常用方法及术语

蓝蓝设计的小编

最近看到一些刚接触网络营销的朋友,对于网络营销一些常用的方法以及概念性的东西都不是很了解,在交谈中说到软文营销、IM推广等这些的方法时他们就不知道是什么意思。在此小篇整理一部分常用的网络营销方法和术语,希望对新人有帮助,高手看到就请绕行。

网络营销常用方法

什么是网络营销?以国际互联网络为基础,利用数字化的信息和网络媒体的交互性来辅助营销目标实现的一种新型的市场营销方式。简单的说,网络营销就是以互联网为主要手段进行的,为达到一定营销目的的营销活动。(摘自百度百科)

搜索引擎优化/SEO:利用搜索引擎的搜索规则来提高网站关键词排名的方式。

搜索引擎营销/SEM:利用搜索引擎进行营销推广的,比如SEO、竞价推广等都属于SEM。

百度网盟推广:在百度的联盟网站上以图片或文字的形式展现广告。

软文营销:以文章为主,专门通过文字去宣传推广产品,或以新闻稿来提升品牌知名度。

数据库营销:通过收集和积累会员信息,经过分析筛选后有针对性的使用电子邮件、短信、电话等方式进行客户尝试挖掘与关系维护的营销方式。

邮件营销:在用户事先许可的前提下,通过电子邮件的方式向目标用户传递有价值信息的一种网络营销手段。

IM/即时通信营销:利用QQ、MSN、YY等即时工具营销推广的。

博客营销:利用新浪博客、百度空间等平台进行推广的方法。

超赞!设计师完全自学指南

蓝蓝设计的小编

超赞!设计师完全自学指南

本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设计但迷茫不知道从何入手的童鞋来说,可以遵循她的步骤去学习,除了规划得当,还能对设计有一个全局的了解 : )

做设计很慢?先来改正你使用PS的10个坏习惯

蓝蓝设计的小编

PS用途广泛,方法多样。可以用不同的方法来实现同一种效果,有时,大家会被思维局限住,采用”最笨”的办法完成工作。

本文,便是面对这一问题,罗列出PS使用中的10条坏习惯,相信只要克服这10个坏习惯,你的工作会更有效率。

1. 在单一图层内工作

尽管有很多教程讲述单图层打造xxx效果,大家不妨学习一下作为练习,掌握一下思路即可。
但是在工作中,这种习惯可真不好。

单一图层制图,缺乏灵活性,无法针对性的做出修改。
最安全的做法是:一种效果,一个新图层,这样以后修改起来会非常方便。

10 bad habits

无论如何,在工作中都尽可能的使用多个图层,编辑更起来有效率,组织也更分明。
当然也有牛人,完全在一个图层实现很复杂的。譬如这篇《PS教程!教你用一个图层制作相机图标》

2. 直接删除内容,而不使用蒙版

这个非常常见。删除和擦除图层内容几乎是不可逆的,是一种破坏性的编辑方式。其实不如利用PS的像素蒙版、矢量蒙版、剪贴蒙版来”屏蔽”内容。

蒙版仅仅会临时隐藏选中的图层部分,而不是性的删除。

10 bad habits

记住咯,尽量使用蒙版,尽量少用删除。

3. 点来点去(不会用快捷键)

20120711134546_vaEEM
 

4. 图像转换时,不利用智能对象

掌握动效设计!让你的设计富有未来科技感(下)

蓝蓝设计的小编

基于情景的消隐

掌握动效设计!让你的设计富有未来科技感(下)

这是iOS上的Chrome,有着基于情景的消隐动效。

掌握动效设计!让你的设计富有未来科技感(上)

蓝蓝设计的小编

掌握动效设计!让你的设计富有未来时尚科技感

为何有的产品、服务特别受欢迎?

是因为这些产品、服务在内容、外观、设计、可用性、功能等方面具有无可匹敌的优势。其实,所有的这些层面都属于交互设计的细节,其中一个关键点便是动效。

本文将介绍几种常见的动效模式(用GIF图演示),分析一下为何这些简单的设计模式在实际应用中能够奏效。
当我们设计数码产品时,我们一般用PS或者Sketch这种设计软件来进行设计。

了解设计的人明白这样一个道理:设计不光只是视觉表达。设计也不应该是静态的。乔布斯说过这样一句话:

设计并非外观怎样,感觉如何。核心在于,它是怎样工作的。

影响用户对产品的体验与印象的因素有很多,交互在其中扮演着关键性角色。我们不能再简单的把用户界面当成一种静态界面而设计。我们应该顺应互联网动态的本质,打造更加动态的图形用户界面。
好了,废话不多说,我们来看看,什么叫做更智能的交互、更精致的动效。看看这些设计模式是怎样提高用户体验的。

动效滚动

超链接是互联网的双刃剑,当你点击链接时,你可以在互联网中任意遨游,随心所欲。

可是过度自由好吗?不见得,比方说你在浏览一款精美的产品页面,然后你点击了一下页面中的链接,突然导入了一款令人毛骨悚然的木偶商店页面。这就是超链接的弊端,有时候的页面转换太突然,缺少过度,让用户一时不能接受。

我们可以看看书籍的用户体验:故事发展一般是线性的,每一章都和上文有所联系。想要阅读第二章,必须先阅读第一章,以便大致了解书中的环境与人物关系。如果你”跳章”阅读,不可避免的会错过一些关键剧情,因此无法理解有些内容。

在网页设计中,同理,尤其是那种内容比较大,页面比较长得网站,这种情况经常无意识的发生:用户会错过之前的某些关键内容,而且又缺少提示,因此很难理解当前内容,通过添加动效滚动,可以修正这一问题。

告别平庸!新颖的表单设计赏析

蓝蓝设计的小编

一般来说,网页设计师都极少关注表单设计,这使得大多数表单看起来都差不多,普通至极,毫无特色。本文中的这些案例化腐朽为神奇,将枯燥的表单页面设计的多姿多彩。一起来看一下吧。

还记得那篇备受好评的《向左走、向右走?表单元素设计大揭密》吗?让很多网页设计师第一次认识到表单设计的一些魔鬼细节。那么今天再来看看实际中的一些新颖案例吧。本文收集了一大批优秀的联系表单设计,希望对你有所启发。

Contact Page from Café Evoke

Contact Page from Café Evoke

Bold Contact Page from Mixd

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Submission Form from Dear Mum

Clean Contact Page from Mud

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

Contact Form from Mostly Serious

横向的进击!网页也可以横着看

蓝蓝设计的小编

老实说,你浏览过几个水平滑动的网站?如果让我来回答这个问题,我得说我没浏览过几个。而且水平滚动网站似乎在网页设计中并不流行。或者会被一些专家说这是反人类的浏览体验。
好吧,对无创意毋宁死的设计师来说。咱们就是爱打破常规,弄点新颖奇特的设计出来。

不过不得不说,水平滚动网页设计有点命途多舛,刚出来的时候短暂流行过一阵子,但后来渐渐消隐于大众视线,
有人说这种风格的网页,浏览起来非常不顺畅,有人说他们就没见过认真设计的水平滚动网站。但是本文将介绍几例优秀案例。

随着设计技艺和风格理解的提高,优秀水平滚动设计渐渐多了起来。
当然,还有重要的一点需要考虑,不是每一种内容都适合用水平滚动的布局方式呈现。大多数采用水平滚动方式设计的网站,内容一般都是图片和简洁的文字资料。

相较于垂直页面设计,图片展示是水平滚动设计唯一具有压倒性优势的地方。在众多的垂直布局网站中,如果出现一款水平滚动设计的图片网站,就会有鹤立鸡群的效果。

Samuel Esteves

Samuel Esteves是采用水平滚动设计的图库类网站范例。该网站中的很多图库都很有趣。

samuel esteves, great website design inspiration

Mariana Onate

正如我之前说的那样,水平滚动网页设计极度适合图片展示,看看Mariana Onate。采用了多种技术,以及简单点击的滚动操作给图像浏览带来高雅体验。

horizontal scrolling web design

Lucuma

此作品集与众不同,通过水平滚动设计,提供了更多作品的细节,而作品本身也非常适合采用水平滚动

nice web layout, websites layout examples

Asiance

Asiance是亚洲的数字服务商。通过水平滚动,用户可以获取大量有用的信息。

horizontal web design

Alex Flueras

对于Alex Flueras我无话可说。这是个非常棒的水品滚动图库网站。

horizontal web design

C.L. Holloway

这是一位艺术家的网站,色彩非常的平滑,没有突兀感。通过水平滚动,让人有一种漫步于画廊的感觉,创意和实际的完美结合。

horizontal webdesign, parallax scrolling

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档