美文网首页
Icon风格

Icon风格

作者: W燚鑫 | 来源:发表于2019-01-28 21:36 被阅读18次

我们在设计界面的时候体现品牌调性和特性的图标。

比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如ofo的产品图标是字母ofo的组合,同时也是一辆自行车,这暗示了这款产品是共享单车的APP;再比如KEEP的字母“K”的图标,像极了一个在抬腿做运动的人,暗示了这是一个运动APP。

风格

文字风格

单读:单读是一个偏文艺的阅读产品,所以产品图标使用了黑白配色和两个非常有文艺气息的宋体繁体字,这样的设计符合产品调性,传递给用户一种产品的文艺气息。

今日头条:今日头条是一款优秀的新闻APP。它的图标非常直白:一张报纸上有红色的头条标题,头条使用了非常粗的黑体字,非常显眼。

淘宝:淘宝采用了一个俏皮的“淘”字作为icon的主要元素,并且背景颜色是令人兴奋和刺激的橘黄色,凸显了电商属性。并且这个字使用了很久,用户对此有一定的品牌认知。

爱奇艺:爱奇艺的icon采用了英文字母iQIYI和上下边框相组合的形式。整体看来像是一个电视机,强调了品牌属性和功能,并且使用了在视频领域非常有识别性的绿色,让人一看便知这是爱奇艺了。

正负形与隐喻风格

抖音:抖音的产品图标是一个音符,但是不知道大家是否发现,下面圆形的负空间也是一个音符,所以显得非常巧妙。为了增加动感还加了红和蓝绿色的类似3D的动感效果。

Keep:Keep产品图标是一个K,但是同时也是一个人抬着腿正在锻炼。

Skillshare:Skillshare是一个技能交换平台,第一眼看是两个手像太极一样交换着技能,同时也是该产品的首字母:S。

折纸风格

折纸的效果会让人感觉很立体,所以很多产品也选择了折纸效果(比较扁平的手法)来设计产品图标。

Calendar:这个产品的产品图标是一个正在翻页的日历,非常简洁明了。

Snapseed:除了扁平的设计之外,使用了长投影的设计风格。这个长投影也是扁平化的设计。

Netflix:Netflix的产品图标是该产品的首字母N,这个N用了一些阴影来表示立体感。

线性风格

Airbnb:Airbnb的背景是一个微渐变,线性风格是一个曲线组成的A,同时也是一个小蜜蜂。

LOFTCam:为了凸显文艺产品调性,使用了偏细的线条,同时使用了两种主题色。

NextDay:同样非常文艺的产品,使用了比较抽象的手法。这个ICON是一个牛奶,突出了这个产品必须今天看,否则就如牛奶一样会过期。

VUE:这是一个摄影产品,同样应用了黑色的微渐变,前面是非常前卫的45度长短不同的线。

LOWPOLY风格

潮自拍:潮自拍使用了暖色邻近色渐变的LOWPOLY作为背景,前景使用了一个很潮的S。

潘通色:潘通色本身的最大特征就是色卡,所以使用了LOWPOLY的形式。

美妆相机:通常LOWPOLY的形式是方块,而美妆相机使用了三角作为基础元素,很特别。

人人:人人的产品图标使用了不同的矩形斜度45°,增加了设计的速度感。

微渐变风格

每日优鲜:每日优鲜在背景上用了很多炫彩的圆球,由于促销时段在原有图标上增加了一个双十一的小标识,在手机中非常抢眼。

陌陌:陌陌图标如果设计成扁平你还会注意到它吗?使用线性图标会使得图标厚度感不够,而微渐变可以非常好地解决这个问题。

全民K歌:使用了紫红色的渐变来塑造一只鹦鹉,如果遇到其他使用场景可以使用扁平版本,这样会让产品图标的使用更加灵活。

Mindnode:这款脑图软件的产品图标使用了三组邻近色的渐变,同时使用了非常微妙的阴影。

卡通风格

开心消消乐:开心消消乐是一个休闲游戏,游戏类APP的产品图标通常是使用拟物风格,这样可以最大地吸引玩家的注意力和兴趣。

映客:映客是直播APP,通常用户年龄不是很大,所以使用了一个很可爱的猫头鹰作为产品图标。

Waze:Waze的产品图标不仅可爱而且突出了Waze的地图查找功能。

BOO!:BOO!是一个儿童社交产品,用户比较低龄,所以更适合使用可爱的卡通作为图标。


应用

标签栏图标

相关文章

  • Icon风格

    我们在设计界面的时候体现品牌调性和特性的图标。 比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如...

  • 【产品5分钟】和UI掰扯

    icon、字体、色彩icon大小是否一致、风格是否一致、形状粗细是否一...... 一、整体风格:APP icon...

  • 2018-05-02

    ICON的风格: MBE LINEAR FLAT

  • icon的设计原则有哪些?

    风格统一?大错特错 现在很多视觉设计师一味的追求icon的绘制风格,这本没有错,独特的风格可以让icon在界面中脱...

  • 字体图标制作流程

    公司现在已有一整套的Icon,那我们应该如何绘制一个Icon,让其风格与之前的保持统一呢。 | 在设计icon时,...

  • 用PS绘制超漂亮的相机UI图标

    此教程为相机图标icon设计,非常的不错,是一个经典的icon设计教程,主要使用Photoshop设计灰色渐变风格...

  • 产品体验日记

    色彩 版面布局 文字信息 icon设计风格 间距留白 体验一款产品,功能梳理,

  • 彩虹手帐010 |UI设计作品赏析3

    01:复古绅士风格 icon设计 - 作者:Aric 来源:淘灵感网站pick.mydesy.com 作品分析整体...

  • Flutter Icon(图标)

    Icon是 Flutter 的图标类,它集成了 Material 风格的图标。它有几个衍生的组件:ImageIco...

  • 沟通总结-20210608

    沟通基本原则:结构、性质、目标、风格 沟通主脉:谈判icon模型,利益、标准、选项、替代方案 说服、辩论、冲突管理...

网友评论

      本文标题:Icon风格

      本文链接:https://www.haomeiwen.com/subject/nhyzjqtx.html