首页

快速利用AE来制作一个点赞动效

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title

Image title


Image title

Image title

Image title


Image title

Image title

Image title

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

 

QQ20周年展 | 策划与设计执行

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

即便QQ已经陪伴大家20周年,我们依旧怀揣初心,保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念,来寓意新的里程碑到来。

Image title

Image title

Image title

https://v.qq.com/x/page/l087071z1ua.html

01 概述 | Overview


QQ 20周年,是互联网产品长青的一个传说,也是家喻户晓企鹅IP形象的成长,同时也代表了鹅厂精神的坚韧与奋进。即便已经陪伴大家20周年,但我们依旧怀揣初心,保持科技改变生活的热衷。应运而生我们设计了太空企鹅探索科技作为本次20周年的品牌理念,来寓意新的里程碑到来。就像宇航员勇于探索未知宇宙知识一样,QQ带着初心不断保持变革与成长,为用户提供更具科技力与创新的服务!也寓意鹅厂不断探索未来与科技向善的愿景!

02 logo设计ㅣLogo Design


我们在设计的第一阶段,logo设计,就是围绕“有趣和科技”来展开发散设计。我们决定从数字“20”开始入手,把QQ和20不断结合,同时融入宇宙太空元素,寓意QQ不断的对外探索,从多个维度来看世界,寻找有趣的内容。我们为了贴合“宇宙探索”这风格,为这次展览设计了专属徽章,徽章设计沿用了太空的概念,结合星球,星空,宇航员等科幻元素。简约的几何形状和大胆的配色贴合“QQ更好玩”的年轻潮流气息。


Image title

03 概念设计ㅣConcept & Design


1. Space QQ


太空QQ的太空服设计指的是科幻电影如《星际穿越》和《火星救援》中的太空服,我们也将的时尚潮流,2018年以来运动鞋领域最为明显的趋势,将 ugly & oversize 的潮流风格注入到运动鞋的设计当中。这种将时尚潮流与太空服相结合的新型运动鞋,使整体设计看起来时尚而风趣。如果没有它,太空服可能只是一个浅显的概念。


Image title


太空QQ创意草图


Image title


运动鞋设计草图


Image title


3D原型


Image title


2. QQ X PUPU


本次设定,由两只企鹅背靠背组成,20周岁的QQ与1周岁的PUPU,鹅厂拥有着各种企鹅IP形象,除了经典的企鹅QQ,还有各种其他特色企鹅,包括PUPU,BabyQ等等,同时PUPU来自外太空也是企鹅FM产品的主形象,经典企鹅QQ携带了新生代PUPU共同探索科技太空,寓意企鹅在不断创新与拥抱新生代相互合力,为年轻用户提供更具科技力与社交娱乐化的服务。


Image title

Image title


04 最终设计ㅣFinal Design


Image title

Image title


05 8米QQ模型制作ㅣ8m QQ Model 


对于实际生产出这个巨型模型是个大挑战,我们先利用电脑三维模型生产出8米高的泡沫模型,反复检查生产的泡沫模型是否和设计模型一致,不断的打磨调整,待到确定泡沫模后开始翻模工作。


Image title


先给泡沫模喷上泥巴水,便于脱模,之后喷上石膏水,并加入麻丝增加石膏的牢固性,待石膏模晾干,把石膏里的泡沫模掏出后开始往里面涂一层泥巴水(便于后面玻璃钢脱模),然后涂上树脂和纤维布/毡,干了之后砸烂石膏模,里面的玻璃钢模型就出来了。


Image title


玻璃钢定型之后给内部焊接钢铁骨架,作为加固作用。刚脱模的玻璃钢是非常粗糙的,于是对玻璃钢的外观进行打磨,使得表面光滑和调整细节,打磨完成后开始批灰和上底色,前后三次,为的是填补空隙瑕疵使模型更逼真完整。接着我们便调模型身上的颜色,在不断尝试中调出最接近效果图的颜色,开始逐步上色。


Image title


上色完成后再喷保护漆防止褪色,待模型的漆干后清洗整个模型,为贴上专属贴纸做准备,接着确定贴纸位置并逐一贴上。最后开始搭建安装,因为在搭建过程中模型会有磨损,搭建完后再做最后的修补工作,最后巨型QQ模型完美地呈现出来。


Image title


Image title

Image title

Image title

Image title

Image title

Image title

06 贴纸设计ㅣSticker Design


配合QQ20周年庆,我们要给8m的巨型QQ模型搭配上了贴纸设计,以slogan “QQ更好玩” 为设计的出发点,希望把有趣好玩的态度注入各个品牌中,为品牌logo严肃的视觉带来玩味感和潮流感。同时配合巨型QQ宇航员的造型,我们在设计贴纸时参考了航天飞机,科幻机器等机械图案元素,每个品牌的设计方案除了有趣值得玩味外,同时需要贴合宇宙科技探险的风格。


Image title


我们针对这个大方向再进行了几轮细化,选出能代表各个品牌的最终的设计方案,并把贴纸模拟在太空QQ模型上反复测试贴纸最适合的位置,让贴纸和模型的整体风格可以完美契合。通过各个品牌的logo再设计贴纸和太空QQ的碰撞,把品牌推广做到最大化。


Image title

Image title

07 搪胶玩具设计ㅣFigure Design


作为QQ20周年庆的惊喜,我们制作了与巨型太空QQ同款的迷你搪胶玩具,在这次玩具设计上我们加入了小机关,在玩具内部放置了小磁铁,使得QQ和PUPU可以方便拆卸组合。


Image title

Image title


同时为其设计了专属包装盒,包装设计从“太空宇宙”的角度出发,以黑色为主基调,图案印花设计选用了太空QQ来进行设计,把太空QQ模型线体化,配合QQ20周年logo进行设计,利用烫金工艺与醒目的图形搭配,更有效的展现了QQ年轻化的品牌特点。同时为了减少后期生产制作之间的沟通误会,我们同期将几个较重要的角度的包装3D效果图快速渲染出来,有着非常直观的参考对照作用。


Image title

Image title


08 品牌物料设计ㅣProduct Design


1. 海报设计


设计QQ20周年展的宣传物料,我们采用了最能代表这次展览的太空QQIP为主体,作为本次展览的专属元素,太空QQ贴近科技,同时又具有趣味性和潮流感。我们结合了太空探索的特性,提炼出宇宙元素作为宣传的内容,让海报设计具有更多内容可看性和观赏性。


Image title

Image title


2. T恤设计


配合QQ20周年展,结合宇宙太空元素,并从QQ20周年logo图形中延展设计出各类代表图形,正面简洁直接地显示出本次主题,把醒目的图形放置于T恤背后,利用坐标轴和经纬度的信息图案配合各个抽象化的宇宙元素,增加T恤设计的科技感,更明确地展现了科技向善的愿景。


Image title

Image title


09 QQ20周年展览ㅣExhibition Design


QQ联合深圳福田星河COCO Park 举办了“QQ20周年主题展览”,展馆外形模拟宇宙太空站,以太空白灰色为主调,搭配简洁的立方体造型,白色灯条勾勒大门,并以QQ20周年专属徽章做门面,科技未来感扑面而来,就如大型QQ太空站坐落于地球。


Image title

Image title


展馆大门旁的墙上安置了颇具科幻气息的全息投影装置,上面展示着QQ在不同时期的形象以及20年关键大事记。代表着不同时期的QQ形象用全息投影的方式展现出来,从最开始的胖QQ到现在的新版QQ,让你一眼了解QQ演变史。中间放着QQ历届各个跨界Figure展示,总有一款捕获你的心!


Image title


Image title


同时本次展览还和% Arabica咖啡跨界合作,% Arabica咖啡展台设计简洁透气与QQ20周年展览风格完美融合。一边喝美味咖啡,一边畅游展馆,两全其美。


Image title

Image title


蓝色发光的隧道科幻神秘,一进去马上感受到了超强的氛围感,仿佛时光碎片擦肩而过。用QQ扫描墙上的二维码,立刻生成你的专属时光隧道“QQ个人轨迹”,各种瞬间涌上心头。


Image title

Image title


联合天天P图,用13个LED屏组成了“复古头像画廊”。走进互动装置小屋里,往镜头前一站,稍作等待后,以你的形象即时合成的13个复古头像就会出现在面前的13块屏幕上,体验即时“变脸”效果。让自己的头像和曾经用过的QQ经典头像合二为一,形成专属的复刻版头像海报。


结语


QQ20周年展不仅包含了展馆设计,还包含了市场营销,运营活动,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个QQ20周年展的设计体系;展览设计了太空企鹅携带着新生代PUPU共同探索科技,寓意鹅厂不断创新探索与科技向善的愿景,为年轻用户提供更具科技力与社交娱乐化的服务,在打造“QQ更好玩”的路上奋力前行。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。


设计师都应该了解的Loading动画知识

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Loading动画,在现在的设计中已经是一个必须要设计的系统元素,它能减缓用户等待焦虑的心态,也能用来作为品牌透传,增加曝光。


那关于loading动画相关知识,我觉得对于设计师来说是有必要去了解的,所以我找到了这篇优秀文章,让大家能够深入了解loading动画,透过现象看本质,学以致用。


Image title

图片来源:Domaso



没有人喜欢等待

在用户心目中,优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。


举一个真实的例子:最近我们新发布了一个用户评价的应用,第一个版本并不完美,loading延迟在2-3秒。


你猜怎么着?


很多人认为这3秒是一个故障。在实际开发中,你可能要面对龟速的网络,没有优化的代码,操作时间长或数据处理太多等问题。因此,App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会,但绝大多数人会立即退出它。


除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么?是操作错误还是在等待服务器的请求?用户需要等待多长时间才能正常使用这个工具或网站?用户为什么要等待呢?


让我们一起深入了解Loading动画:

1、loading动画的历史由来

2、优秀loading动画所具备的特征

3、细节可以做出精彩

4、简单处理还是精心制作



loading动画的历史由来

对于这种类型的反馈,设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程,以减少用户的心理焦虑。


你觉得设计师是从什么时候开始考虑加上这种反馈的?


我很惊讶的看到关于Nielsen Norman的一篇文章,提到响应时间和loading动画是在1993年(参考1985年的资料):


如果计算机无法提供快速响应,则应该以百分比的形式向用户提供持续反馈。【Myers 1985 论文,“计算机-人机界面百分比进度指标的重要性”】


显示进度的三个主要优点:向用户保证系统没有崩溃且正在处理他们的问题;告诉用户还需要等待多久时间,让用户能腾出时间来做其他的事而不只是干等;甚至可以向用户提供一些可以阅读和查看的内容,减少等待的焦虑。— Jakob Nielsen, on January 1, 1993


自从Web 1.0以来,几乎每个网站都有loading状态,用户可以注意到当页面内容正在loading时,这些Loading动画活跃的身影。


在2007年的时候,网站的Loading形式大概是下面这张图上的样子:

Image title

2007年时的Loading


在那个年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)这样的工具来做这些 loading动画。


到了2010年,随着CSS3的迅猛发展,出现了很多教程教大家如何做CSS3动画,也能找到大量的loading 动画预设包。设计师也可以在Ps cs5中做这种loading动画,这个在10年前是非常流行的。


在那时,Loading动画更像是web的专属问题,因为页面loading确实是一个问题。在2010年的时候,很多Flash网页都做了一些很有创意的loading动画:


Image title

30个创意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)


渐渐地,设计师们开始不满足于简单的进度条和旋转Loading,到2014年-2016年的时候,变得更加关注这块的设计。所以,你能发现更多关于loading教程,免费的Loading设计资源,插件和开源项目。


Image title

2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)


设计趋势和方法已经发生了变化,但向用户提供有效反馈的原则依然需要遵循。



优秀loading动画所具备的特征

在一个完美的世界里,loading动画应该:


尽可能少的显示给用户

如果你的工具或网站工作的足够快,那就是非常完美的。或者至少要使得它们的速度符合用户的预期,显示好看的loading动画只是一个缓兵之计,等待太久了一样会惹恼用户。所以,首先应该是解决内容的loading问题。


给出具体时间

它可以是一条简单的文本信息,告知大致的等待时间,也可以是可视化的图形来表示。总共上传了多少文件?更新需要多少分钟?已经进行到了什么阶段?这些体验上的设计细节都可以给用户预期并减少焦虑。


Image title

宇航员数据loadingby Cream M.



告诉用户为什么需要等待

一些应用的loading过程,通常让用户不大容易理解。一个好的Loading动画,应该要告知用户等待的原因以及等待的背后软件正在做什么:


Image title

文件获取动画 by Vinoth


让我们说回我的案例,那个反馈工具软件。当我们的等待时间超过1秒时,我们决定给这段等待时间增加一段解释。动画说明应用目前正在处理截图资源,这清晰的表明,我们的工具没有崩溃,它只是正在处理请求:


Image title

好的loading动画



让等待的过程不那么让人无聊

可以放一个有趣的动画来吸引人,让用户的眼睛始终保持忙碌。


Image title

动画来源:Alex Kunchevsky



减少用户等待时间的心理感知

这与上面提到的一点非常相关,如果你在等待的过程中发现了一些能够吸引用户注意力的东西,那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配,有趣的想法,或者是一个什么特别的东西。


Image title

蛋糕loading by Pierre Kleinhouse



透传公司品牌形象

如果用户在用你的应用或者网站时会有一段等待时间,为什么不机智的利用好这段时间呢?我不建议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中,让它成为一个非常重要的设计细节:


Image title

BCG的车票应用动画 by Antonin



细节可以做出精彩

虽然有些人可能会认为Loading只是一个很小的UI细节,但它其实也有许多类型和变化。一般来说,我把loading动画分为几类,进度条,无限循环的loading图和骨架图。


进度条

当可以明确loading时间时使用,进度条可以通过数字或视觉化的形式来表现。


有数字进度的,有时也称为百分比指示符。他们可以简单直接,也可以很有创意,需要对你的用户业务表达更有效:


Image title

一个app loading页 by Nguyen Tran



你也可以找到有趣的进度条和循环动画结合的loading图。


Image title

Loading动画by Dragonlady



进度条背后的主要思想是显示一个操作将花费多长时间以及目前所处的状态。根据UI需求的不同,进度条也可以是线性的,没有百分比的形式。


想想Gmail,它没有显示进度百分比,但是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子:


Image title

Image title

Gamil loading和一个创意loading动画 by  Allen Zhang



无限loading动画

当loading的时间是未知的时候来使用,它可以是默认的旋转图,也可以是一些创意动画,显示应用正在做一些事情。


Image title

计算loading图标 by Hoang Nguyen



创意性loading动画一样可以与业务紧密相关,并帮助支持品牌发声。请思考下那些应用会使用这种loading动画?


Image title

LittlePin Spinner by Daniel Sofinet



无限循环动画要求用户在上传或执行某些操作时等待,但不要求具体需要多久时间,它们可能会非常简单或非常有创意。


Image title

Loading cat by domaso. So cute!


Image title

Infinity by Eszter Balogh. 看起来非常有趣,但是你并不想他们永远不停下来。


如你所见,如今的loading动画不仅仅只是一个系统状态的UI元素。



骨架动画

骨架动画展示了loading页面的变化过程,你可以把它理解为开始是一些页面占位图,逐步加载上一些可见的图片,文本和其他内容。


这个词最早出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。


举个栗子,如果你使用的是网页设计工具Figma,你会在页面顶部看到一个进度条,同时还在逐步loadingUI:首先你会看到占位符,然后才是可用数据:


Image title

Figma UI



简单处理还是精心制作

除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念,在目前大多数应用中,你可能能看到还是一个默认的Loading。


有一段时间,简单的Loading被大众所推崇,因为他们对于性能的影响最小(尤其是对于web)。使用默认的或开源的loading要容易的多,不需要设计师和开发花心思来设计和实现它。


如果你正在开发MVP或者项目的第一个版本,那么使用简单的或者开源的loading动画更符合逻辑。在这个阶段,即使把loading动画做的再怎么有创意,也并不会对你的产品有多么大的帮助,如果它不能解决真正的需求。


Image title

一些简单的loading动画案例



有趣的是,在2016-2019年,我们可以看到非常多精心的loading动画。注重细节,日益成熟的设计公司,更好的科技环境,更方便的设计工具,这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble,能找到非常多超赞的Loading动画,所以这也成了展现自己设计能力的一种方式。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

图标该配上文字吗

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

图标在增加界面美观性的同时也在破坏着界面的清晰性,在设计的过程中如果你纠结于图标是否需要配上文字那请仔细阅读这篇文章。

首先扪心自问下是否清楚在设计中什么时候用图标? 什么时候用文字?什么时候用图标+文字?你是否能清晰的分辨他们分别在什么场景下使用呢?


前言

之所以要写一篇这样的文章是因为最近有很多的设计小伙伴反复在争论一个观点 图标配上文字是否有必要?

举个栗子:

如下图一位设计同学觉得右上角红圈里面只需要图标就好了不需要文字的存在,并且节省屏幕空间,可是公司的开发和测试同学一脸懵,这个操作觉得不够清晰,识别性较差严重影响用户体验,当前视觉层面和功能层面产生了强烈的撞击。带着这个问题我们从图标的定义,图标变迁史,图标的优劣势来讲述今天的文章,相信文末你会有自己的答案。


图标定义

广义

图标是指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广,软硬件网页社交场所公共场合无所不在,例如:男女厕所标志和各种交通标志等。

狭义

应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。


图标变迁

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远,从上古时代的图腾,到20、21世纪具有更多含义和功能的各种图标,而且应用范围极为广泛,可以说它无所不在。一个国家的图标就是国旗;一件商品的图标是注册商标;军队的图标是军旗;学校的图标是校徽。

我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。


而在计算设备上,图标随着时代的发展而迅速流行。从最早的计算机GUI(施乐之星Xerox Star)再到之后的乔布斯Apple lisa,Windows1.0,Amiga Workbench,从最初的黑白到随着显示技术在分辨率和色域上的提高出现的彩色图标,设计师渐渐的有了更大的发挥空间。


图标的优势

1.节省屏幕空间

图标可以替代文字,相对于长文字来说只需要占用一个图标的位置如:worktile移动端新建聊天操作四个文字如果用图标来代替的话只需要占用一个文字的文字,并且把干巴巴的文字变为图形符号,用户对于图形的识别速度对于文字来说更快。

2.没有地域语言限制,针对国际通用图标。

国际上通用的图标对于每个人来说都能很快的识别处理,比如同样一个“放大镜”图标经过长期许多不同的网站、应用程序和操作系统的用户培养,让放大镜图标作为搜索的操作代表符号变得越来越流行,不论任何国家任务种族,用户很清楚这是搜索操作,相对于文字来说图形识别大大减少的用户识别的时间,用户也可以花更多的时间去做他真正要去做的事情,从而提升工作效率

3.图标可以提供视觉引导,迅速识别减少用户思考时间

人脑处理图形图像的速度是处理文字的60万倍,人会记住80%看过的东西,20%阅读过的东西,和10%听到过的东西,所以在我们发朋友圈或者写文章的时候避免干巴巴的文字描述,劲量配上相关图片,提升整体的图版率,俗话说看图说话不是没有道理。

4.提升整体视觉体验

好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心,激发人们的点击欲望。这样才能使图标设计达到上乘水准,从而提升整体的视觉水准


图标不适用场景

1.表达含义复杂,难以揣测

图标的目的就是快速识别并引导用户,用户如果无法快速识别通常会下意识的回避掉无法识别的界面元素,这是人类的天性,反而logo的设计更加适合深层次的寓意。之前乔布斯做的一个实验,他拿着苹果设备到一个智障儿童福利院让儿童们把玩,每个小朋友都认识那些图标的含义,当时的写实图标都是来源于生活,对于来源于生活而设计的图标对于孩子们来说识别效率更高花费的识别成本更低。

2.图标存在多重含义

如果图标不能言简意赅的表达出寓意,并且存在争议的请避免使用,如果非要使用请采用图标+文字的形式。比如appstore侧边导航第一个你觉得是什么?收藏?标记?错!他是探索,如果我不告诉你可能每个人猜的含义都不同。所以我们在设计图标的时候要劲量去避免多重含义的图标。

3.专业性过强很难作为通用图标

图标如果专业性过强,而没有办法简化为一个很直观通用符号时,二八原则我们只能考虑80%的人,而20%的人需要付出学习成本,,比如下面的这个图标,如果用它来代表“研发”,我相信会有很大一部分人没法识别代表什么意思。但是对于开发人员就是一个很通用的图标,在这种情况下,只能是允许20%人员付出学习成本来解决这个问题,除非你配上文字。


小结

1.为了提升产品视觉体验,图标设计一定要极简,如果使用图标能够百分百表达其含义时,请优先使用

2.针对国际上面通用的有大众认知的如:搜索、wifi、设置、蓝牙等图标无需配上文字,除非做视觉引导为了保持一致而统一添加文字的列表

3.禁止使用多意图标(不让用户思考,如果用户不能在5s内很快识别出图标的意思,那这个图标的设计是失败的)

4.针对专业性很强的并且局限于空间的采用文字形式,或者二八原则只要考虑80%的人员无识别压力,而20%的人付出学习成本。

5.我们不讨厌图标加文字的形式,前提为图标要足够简化表达其含义(如文章开始的案例,图标简化为加号并且加文字放到商品2做一个通栏操作就好了,这样更加符合用户操作的视线流,这样做的还有钉钉的报销审批界面)

 

蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

15年图标设计经验,总结出1套专业流程和8个注意事项

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章不一样,今天我们的文章不会花费很长时间来单独介绍某一个图标的设计,而是设计任何一套图标应当遵循的基本流程,以及一定要注意的8个关键的注意事项,你可以将这些东西带入到一些现成的案例当中去验证。

这个注意事项清单,也可以被视作为给设计师所编写的图标设计指南,即使设计趋势发生变化,这些规则和经验依然适用。遵循这些规则和技巧,能够确保图标从设计到使用都可以更加无缝和顺畅。

我们并没有重新发明轮子,相反,我们会以这种方式来呈现我们的工作流程细节,希望它也能帮你有效地组织工作。

循序渐进地设计图标

像我们需要系统而大量地设计图标,设计流程是最重要的事情。正如你所看到的,绘制流程在图标绘制之前,就已经开始了。

  1. 了解你要创建的图标的含义。明白不同图标的使用场景,不同的图标分别代表着什么,了解哪些图标需要使用隐喻,哪些图标使用现实世界中真实的形象。
  2. 梳理出图标正确的隐喻,脑暴出可能的符号和形象。记住图标的含义和形象之间的关联,以最佳的形式呈现图标,直指本质。借助词典和单词集来获取图标相关的概念的关键词,同义词和定义。简化和抽象你的想法,你会找到一个抽象概念「翻译」出来的对象。
  3. 不要拘泥于现在当前的任务和状态,尽量进行彻底的调研,尽可能地搜集相关参考资料。可能有人已经为这一主题设计了很不错的图标版本,可以参考已有的设计,获取灵感。
  4. 确定图标的样式。图标应该是扁平的,线性的,Material Design,是用符号还是借助手绘来呈现。有的 UI界面有很清晰的要求,比如 iOS 平台和 Material Design,如果 UI 有非常清晰固定的设计风格,那么图标的设计需要尽量贴近。
  5. 按照选定的方式来呈现设计,看看它最终呈现是否正确。保持整体设计的一致性。
  6. 注意图标要矢量化,连基本的草图都应该是矢量化的。
  7. 在 UI 布局中测试图标的设计。

Icons8 的实战案例

按照上面的流程,能够绘制出不同样式足够优秀的图标合集。下面是我们在这样的流程下所设计出来的图标示例。

▲ Material, Outline: Science and Studies Icons

▲ Carbon Copy: Animals

▲ Nolan Icons: Aging

注意事项清单

如果你像我们一样每天设计图标的话,也会碰到各种各样的问题。其中最重要的是下面的注意事项清单,它们能够确保我们不同的人在不同的时期不同状态下,设计出来的图标能够协调到一个主题、一个系统当中。如果你也要设计图标的话,可以将下面的清单打印出来,贴在自己的桌子旁边作为参考。

1. 像素完美

让图标踩在每个像素点上,确保清晰不模糊。

2. 视觉重量

用斜视的方法来感知图标,看看成套的图标是否都具有相同的大小。斜视、调整、再看、再调整,直至均匀理想。为了保持总体视觉重量的一致性,我们会使用「完美的圆形和正方形」来和所有的新图标进行对比。

3. 几何图形

尽量使用简单坚实的几何形状来绘制所有必要的线条,它们会让你的图标显得更加牢固可靠,具有吸引力和说服力。

4. 清晰简洁

删除所有无法传达图标概念的细节,避免让图标显得沉重而复杂。

5. 足够的空间

确保图标内每个细节和元素都有足够的空间,不会显得过于拥挤或者空旷。

6. 对比度

在黑色和白色的背景上检查图标的全部细节,看看是否其中的每种颜色都是可见的,以及元素之间的对比是否足够。

7. 视觉统一

检查线条的粗细重量,边角的大小,配色方案,细节层次和设计元素在整个合集中是否是不变且一致的。

8. 图层排序

确保图标中图层顺序清晰而规整。这是一种良好的习惯和专业的精神。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

博博

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我是你们的学霸姐 2017-12-13 11:01:13

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

对于图标如何断线,如果是经验丰富的设计师,估计靠感觉做就可以了,但不是大神的我们怎么办呢?总得有点规律让我们参考参考吧,虽然有些规律不能全盘通用,但这次总结一定能给你带来帮助。

来,看下大纲:

1.先考虑在拼接处断线

2.平衡视觉复杂度

3.避免正中间处断线

4.尽量让图标一笔画完

1.先考虑在拼接处断线

如果你觉得此篇文章对你有作用,请收藏转发分享给你的朋友,把自己的收获写在评论区,小编会解答。

如果一个物体是由两个部分组成,当我们选择在拼接处断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得两个部分还没组装好,是一种很自然的分开。

但如果是下面这样的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得它坏了,很不舒服。

我们做断线图标的时候也一样,可以先考虑在物体的拼接处断线,让断口看起来自然和谐!

举个例子:

下图是一个“我的”图标:UI设计学习群:583915450,领取100G学习资料,备注:资料领取

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果现在让我给它来做断线,我就先找到拼接处,分析如下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

虽然例子有点血腥,但事实确实如此,拼接处就在头和身子连接的地方,所以尝试在这里断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

哎呦,我觉得还ok。

行,那再来个例子!

下图是个消息的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

再来分析,它的外形是由一个矩形和一个三角形组成的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我们还是在拼接处断开,得到如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

嗯,也还行!

所以一般来做断线图标,我就会先利用这一个规律看可不可行。

如果可行,就继续优化细节,如果不可行再尝试其他方法。

2.视觉复杂度要平衡

有时候,我们的图标不好将其拆解,这时候我们就可以尝试去考虑图标的视觉复杂度。

来个例子,下图是一个皇冠的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

经过分析,我们可以得出,图标红色区域的复杂程度要比蓝色区域高:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以我选择在蓝色区域断口,来增加蓝色区域的复杂程度,达到平衡的效果:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

那如果在红色区域断开是什么样的呢,我们来分析对比一下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以,通过对视觉上复杂程度的解析后发现,方案一会平衡协调很多!

再来个例子,下面是个通讯录图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

图标的左侧要比右侧复杂:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果我们选择在左侧断线,那左侧就会更复杂,这样两边的复杂度就会失调,所以我选择在右边断线:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

这样图标左右都有细节,视觉平衡多了!

3.避免正中间处断线

有朋友会说了,那有些图标没有拼接处,复杂程度也都一样,比如下面这种:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

怎么办呢?

很简单,这种图标只要尽量避免在正中间断线就ok,因为正中间断线显得过于呆板:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其它地方都可以尝试,例如左上角、左上角、右上角、右下角等等。

4.尽量让图标一笔画完

这也是一个很重要的知识点:如果可以的话尽量让图标外轮廓一笔画完,如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其实很多时候,只要我们能从拼接处断线,基本都是可以一笔画完的,所以大家注意一下就好了。

当然,如果实在不能一笔画下来,也不必勉强,因为强扭的瓜不好看!

总结

这四个知识点就是目前为止菜心所整理的关于断线图标的规律,个人经验,供大家参考。

不过提醒大家,这些方法难免会有少数不适用的时候,遇到不适用的情况,千万不要因为规则而被困住,多多尝试,敢于不同,也许可以找到更合适的解决方案。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


超实用!UI设计图标欣赏,绝对激发你的灵感

博博

超实用!UI设计图标欣赏,绝对激发你的灵感

我是你们的学霸姐 2017-08-17 20:13:23

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

身为一名Ui设计师的你是否会有灵感枯竭的时候呢,下面本学霸会向大家分享一组简约却不简单的图标设计作品,希望大家在看完后能够激发自己无穷的灵感哦~

超实用!UI设计图标欣赏,绝对激发你的灵感

有需要的小伙伴可以加群661690541一起学习,还有免费资料等你领取哟~

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

博博

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

UI设计栈 2018-03-26 19:24:14

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

平时我们提到的布尔运算其实就是AI路径查找器(pathfinder),通过路径【加】【减】运算绘制出各种各样的形状,是成为一名优秀的UI设计师必备的技能之一。

对于初学者来说,刚开始可能模糊不清,确实不容易理解,下面栈长奉上最全的布尔运算深入解析教程,希望对迷途中的UI设计小白有所帮助。

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


如何系统学习功能图标?来看资深设计师的全面总结!

涛涛

一、图标的定义

1. 什么是图标

图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。

2. 什么是功能图标

功能图标是具有指代意义且具有功能标识的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。

二、图标的种类

  • 具象图标:保持事物本来固有形态进行优化设计。如汽车,轮船,飞机,车票……
  • 抽象图标:不是一个具体的事物,更趋于概念化。如个人中心,空间,模式,最近等。

三、图标的风格

1. 面性图标

面性图标是由一根封闭的线造成了面,面性图标同样具有大小、形状、色彩、肌理等造型元素。直面图标具有稳重、刚毅的男性化特征;曲面具有动态、柔和的女性化特征。

不透明度图标

不透明度图标是通过调节图标的部分面性结构来增加层次感,从配色角度属于同色系。

△ NO-921

光影图标

三大面五大调,通过调节面的反光和阴影来增加面性图标的纹理。在扁平时代的今天保留着微拟物风。

多彩色图标

多彩色给人很酷炫的感觉,从明度角度还是要提取深浅的颜色来代表图标的黑白灰。

△ Kyle Anthony Miller

2. 线性图标

线性图标是通过粗细一致的线条绘制,高度概括出来的图标,既能让人赏心悦目,又给用户带来创造和应用的乐趣。

圆角图标

圆角图标给人以亲和力,也有柔软,软弱的一面。在图标设计越来越精美的今天,圆角图标的应用行业已经越来越广泛。比如女性,母婴,儿童,旅游……

△ Stephen Andrew Murrill

直角图标

直角图标给人以锐利,坚强,果断,不拖泥带水的一面。让人眼前一亮的是魅族系统Flyme6 里面的图标它就是用的直角,给人明快干净的感觉。真正更好的诠释它内在含义的非京东金融里的图标了 ,投资理财的时候需要人们果断作出判断。理财有风险,投资需谨慎。直角的感觉让人当机立断,不拖泥带水,快买快出。如果用圆角就感觉柔一点,感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。

断点图标

断点图标是点线面演化的一种产物。在最开始UI兴起的时候,设计师们不满足于单线条的功能图标,通过点线面增加形式感。最早新浪体育运用到这一风格,算是还是很不错的一种风格。很遗憾只留在了我的记忆力,网上并没有找到之前的设计。

△ Catalin Mihut

高光式图标

高光式图标是传统绘画的产物,我们在传统绘画的时候往往最后一笔都是添加高光,起到画龙点睛的效果。高光式的功能图标采用里细外粗的规律,和断点式功能图标差不多一个年代的产物。在不断扁平不断简洁的今天,也不会感觉那最后一笔也是多余的。

△ Udisk6353

不透明度图标

不透明度图标是调节图标的部分结构的不透明度来增加图标的层次。色彩上面跟双色图标是一样的,只不过从配色角度属于同色系的范畴。

△ Laura Reen

双色图标

双色图标在实际应用中非常广泛,也是很百搭的那种。一种可以有彩色跟无彩色结合,有彩色的颜色可以是企业色,可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是主体色跟点缀色组合而成的双色,但使用时要考虑到当前界面中的配色不宜过多,多了就容易花。

△ stay

线面结合图标

线面结合图标也是一种很出彩的风格,线是高度概括的图标,这时候面更多的是充当装饰点缀的作用。面的表现方式也有很多种,可以是单色的,渐变色的,也可以像 MBE风格那样提取主体结构形成的面,也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。

△ Ted Kulakevich

△ Prakhar Neel Sharma

结构图标

结构图标算比较有争议性的图标,结构图标是我们学绘画的时候老师要我们起形,要开始绘画结构,对基础的三大面五大调有很好的理解。现在结构图标正好相反,比如对于一个具像图标,我们要分析出它的每一笔每一画,看清每一个结构,然后用固定的形式来表现出来。固定的形式可以像优酷图标的相交结构点,可以像上海玛娜花园一笔一个颜色,等等。

一笔画图标

一笔画图标是难度系数比较高的一种风格,也是我非常喜欢的一种风格,当才开始流行断点图标的时候,锤子设计师欧阳念念就提出了一笔画图标的概念,当时也是有争议的一种图标。当网易云音乐也出了这种图标后就更具有说服力。一般也很难驾驭,也基本都能做出来,但是视觉上看上去很舒服还是要有深厚的功底。

logo类图标

logo 类图标跟一笔画算是同等级别难度的,需要图标足够精致到可以直接拿来当应用图标,乃至于 logo。这种在app中屈指可数。最为经典的就当属网易云音乐的 logo 了,其实它也属于一笔画图标,同时又用做了 logo,它的含金量可想而知。

情感化图标

情感化图标是提取人的五官跟图标相结合具有拟人化的图标,这种拟人化的场景模仿人在真实场景的应用。QQ 的底部图标通过五官方向大小移动变化很好的表现出当前场景。QQ 开了先河,相信后续会有很多情感化图标出现,会有它的一席之地。

3. 如何转换线性图标与面性图标?

线性的闭合路径的图形变面性图标,闭合路径里面的线条反白,重要的关联结构线反白,让面性图标透气;线性的不闭合路径的图形变面性图标,应适当的增加线的粗度来达到视觉上的平衡。

△ Jory Raphael

△ Sebo

4. 如何去创造新的图标风格

绘画结构+点线面+色彩,绘画结构可以清晰的分析出事物的主体结构,勾勒出主体轮廓,对创造新的图标风格有很大帮助。绘画结构选的角度是人很熟知的角度,比如正面,尽量不要选择带有透视角度进行设计。点线面是设计的基础,通过从点线面角度去构思会获得更多的灵感。色彩方面可以是企业色、行业色、主题色、点缀色等等。(图design by Ted-Kulakevich and Graphéine )

四、图标的特性

1. 统一性

大小的统一

在网页设计中图标的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范中在2倍图下最适合人点击的区域大小为48*48px,iOS功能图标其他尺寸为48加或减4的倍数;安卓android 功能图标其他尺寸为48加或减8的倍数。为什么 iOS 是4的倍数,一个数除以2倍图在乘以3倍图要是偶数最小的数为4;为什么安卓android 是8的倍数,安卓开发中最小的单位是1dp,1dp=2px,同时也要满足一个数除以2倍图在乘以3倍图要是偶数最小的数为4,所以安卓要是8的倍数。在很多带有色块的图标,不仅要保证色块44*44pt的大小统一,也要保证里面色块里面的功能图标的大小统一。

风格的统一

风格上面已经归纳的很全了,直角图标和圆角图标基础上可以添加一个其他风格,如双色风格;但是剩余的其他风格最好就不要两两相加,不然就会给用户感觉很容易乱,也不够简洁,主次不明。

规范的统一

视觉的规范

为什么我们再同样的大小区域去绘制正方形、圆形、三角形,虽然符合了大小统一的特性,但是从视觉上还是不能看上去很均衡?这就需要我们规范化的去绘制图标,安卓android 规范里给出了图标的绘制方法。

圆角的规范

2. 简洁性

简洁性不单单体验在图标的简洁,还要体现在从创意到实际落地的简洁。在使用软件 ai 或者 sketch 的时候绘制基础图形不要出现小数点和基数,多用偶数。

3. 层次明确

图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态,主流底部标签栏会在点击前使用线性图标,点击时和点击后使用面性图标;也有使用颜色来区分。

4. 延展性

图标的延展性之前在图标的风格也讲到,好的图标可以直接当应用图标或者 logo 来使用。同时好的图标还可以通过点线面动效变化做下拉加载动画。

五、如何学会合理的设计功能图标?

1. 头脑风暴

头脑风暴看似一个不知道怎么解释的词,简单的说就是多动脑子,越用越活。头脑风暴不单单是这里用到,是所有设计师做设计之前必备工作。头脑风暴完你会觉得你的设计思路会很宽,然后就是要合理的分析每个的可行度,完成的工作量,自己当前设计的水平是否可以有效完成。其实很多设计师能有效的搜索到自己想要的东西也算是头脑风暴的一种,虽然你不会想出很多点子但还是很明确的知道自己想要什么,一定注意不要直接拿来主义,还是要通过平时的练习掌握更多的风格。为以后头脑风暴想出的很多点子能很好的实践出来。比如以旅游为主体进行头脑风暴,这个就能想到很多很多。

2. 搜集资料

搜集资料的时候要很好的提取关键词,直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事物可以看看该事物好的品牌公司的产品,品牌公司的工业设计相对较好,对后面提取元素也会有很大的帮助。也可以通过提取好的关键词,翻译成英文,再到国外的网站追波、be搜上一搜看看。搜索到的素材和元素一定要再设计,不能拿来直接用。

3. 提取元素

提取元素又归结到绘画结构中去了,绘画好的看到具象事物,心里默默打开一个灯,三大面五大调,光影关系都有了。不是很理解的还是多练习吧。具象图标就是提取主要轮廓线,保留可要可不要的元素,到最后的时候做统一删减;抽象图标有时候确实没有一点的思路的时候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找,找到了合适的还要进行 redesign。有想法后选择一种图标风格这样的绘制效率会很快。

4. 规范化

上面元素提取好后,需要开始选择一种图标风格进行绘制。开始绘制的时候不要过于追求图标的风格,还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是很快的,水到渠成。可能刚开始很难在规范化的框框里直接就提取元素开始绘制,那就只能先绘制要你想要创意的元素图标,全部画好后在统一的规范里面再绘制一遍。规划化的目的就是让图标统一,任何两个图标拿出来从视觉大小、风格都是一个统一的整体。

5. 加减法

一套图标绘制好了之后还是在放在一起看一下整理的感觉,最后通过加减法适当的修修补补,对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡;对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大,来增加它的视觉丰满感。

日历

链接

个人资料

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

存档