首页

用品牌基因法做图标设计，高级UI设计师才会的手法！（实战篇）

涛涛

1. 收到任务

我们每天都可能收到不同的设计任务，作为设计师，顺利的完成这些任务是我们最基本的能力，那我们今天要讲的任务是什么呢？

嘿嘿！一套天气图标。

认真的构思中…..

2. 找参考

算了，还是先看看别人都是怎么做的吧！

我找了一堆参考，随机选几个展示下，如下图（图片采集于花瓣网）：

评论(0) 浏览(4631)

前端Boostrap系列之一：稀世珍宝：270款圆滑的 Twitter Boostrap 矢量图标

蓝蓝设计的小编



如果你不那么在意许可证，那么还有很多类似的字体图标库可以使用，最引人注目的是 Font Awesome。下载此字体时，你还会收到所有 SVG 格式的矢量图标，这样你就可以修改这些字体，使其更加完善，并贡献到 Github 上面。

 



评论(0) 浏览(3516)

一站式图标设计指南

用心设计

这是一篇由国外万粉dribbble大神Justas
Galaburda免费提供的图标设计指南，在国外的UI设计圈子里算是引起了不小的关注。与一些小伙伴所期待的可能不一样的一点是，这是一篇侧重于方法论方面的指南，涵盖了从设计第一枚图标开始到完成一整套图标所需要的一切，而不是一篇侧重于软件技术方面的指南。

一站式图标设计指南

评论(0) 浏览(4836)

巧夺天工！50枚来自Behance、DRIBBBLE的超精致图标

蓝蓝设计的小编

自从苹果iOS系统推出后，拟物化图标设计逐渐风靡全球（好吧！让我们暂时别提iOS7的扁平风），随着技术发展，设计师们也越来越厉害，图标做得愈加精致。如果你是一个移动界面设计师，或者你对图标设计感兴趣，那就千万不要错过接下来的这50枚精致图标！希望它们能给你带来创意与灵感。

多尝试，多练习，多模仿，你也可以的！
PS+AI制作精致可爱的毛线风格图标
在PHOTOSHOP中创建精细的工具图标

Minion App Icon by CreativeDash

iOS Icon by Eugene Zolotco


评论(0) 浏览(3763)

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

蓝蓝设计的小编

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

图标式导航的案例

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

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

这是Squarespace的图标式导航：


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

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

评论(0) 浏览(3943)

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

蓝蓝设计的小编

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

图标式导航的案例

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

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

这是Squarespace的图标式导航：

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

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

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

问题所在

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

 

评论(0) 浏览(3683)

学点新技能！玩转响应式图标设计

蓝蓝设计的小编

什么是响应式图标设计？

响应式设计主要讲的是布局，那么什么是响应式图标？响应式图标设计是一种根据屏幕尺寸来改变图标类型、从而达到更好可读性的设计。

图标为什么要响应式？

怎样阅读内容？时至今日，我们用来阅读内容的平台越来越多。设备、屏幕分辨率、浏览器、平台——我可以拿着5S+Safari+iOS7.0浏览网页，也可以拿着1020+Chorome+WP8浏览网页。

各种选择，各种搭配实在是太多了，这些都或多或少的影响了内容的可读性。而图标作为一种视觉语言，可读性非常重要。

图标设计，首先要满足易于理解。其次，图标的可读性必须高。在小尺寸的情况下，图标设计为了追求更高的辨识度/可读性，可以选择牺牲一点美感。

那么能不能美感、可读性兼得呢？图标设计的艺术便在于二者的平衡，取与舍。怎样设计，让不同尺寸的图标均能展现美感，同时又具备可读性？

我认为，需要根据尺寸范围进行图标响应式的优化

sizes

这个理念不是新的。对于栅格化图标来说，这种设计方法很常见。

评论(0) 浏览(4130)

界面图标创意设计教程

蓝蓝设计的小编

在网上看过很多设计师的图标制作过程,基本都是偏向技法的介绍.其实在图标设计过程中除了技法之外最重要的就是图标创意了,但这方面的系统介绍网上倒是很少.借这次实际的界面设计项目,来分享下我自己对界面图标制作创意阶段的方法的理解.并以丰富的图例来阐释自己的想法!以次作为图形界面设计师交流的引子!欢迎大家进来交流!

这个过程比较长,自己只能分阶段的准备好,发上来!快毕业了事情很多,多多谅解!
今天把部分草图放上来!创意说明后续准备.

第一部分：图标创意阶段

其实这个阶段之前还有个重要的步骤,就是创意准备.

根据项目需求,确定图标的风格,这在界面设计过程中,有风格评测的方法来确定项目是走什么风格路线.这也是项目前期用户研究的内容,有潜力的公司会制定"用户角色",

评论(0) 浏览(5128)

社交媒体共享图标在网页设计中的作用

蓝蓝设计的小编

剖析社交媒体图标

事实上，社交媒体图标可以理解为社交媒体、社交网络的标志以及说明的链接。

社交媒体图标可以表现出几个不同的功能。有时，它是社交网络中的公司资料页面/帐户的链接。通常情况下，你可以在它们的周围看到“跟随我们……”或“加入我们……”这样的字样。这些图标通常会被放在网页的顶部或底部，也可以放置在侧边栏。从经验来说，它们在整个网站都是可见的。

Lucius

Social media sharing icons influence web designs

评论(0) 浏览(5851)

Polaris UI Kit：精美的 UI 组件包和矢量图标(AI, PNG, PSD, SVG)

蓝蓝设计的小编

Smashing Magazine 发布了一个包含非常有用的 UI 组件和 48 个精美的矢量图标的素材包。界面组件包 Polaris UI Kit  里面包括编辑框，复选框，单选按钮，页面导航，菜单，按钮等等，可以免费用于任何项目。图标集合 Linecons 里面包含的 48 个可伸缩矢量图标都是 outline 风格，提供了 AI, PNG, PSD, SVG 等多种格式。

评论(1) 浏览(4707)

分类

日历

链接

个人资料

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

存档