-
食物图标设计欣赏
UI设计师们请看过来,这里有一大波食物类的icon来袭——食物图标设计欣赏
还有一波厨房用具放送—— -
口腔图标设计
口腔图标设计
-
WC厕所图标设计
WC厕所图标设计
如厕,这可是件人生大事。无论你是土豪还是乞丐,无论你是贵族还是贫民,在这件事情面前大家都一样,当你去公厕干这件事情之时,正是体会人人平等的最好时刻。当一个苹果砸到夏娃的时候,我们伟大的人类祖先就意识到,有些事情需要男女分开来解决。 在人类害羞天性以及各种伦理道德规范下,公厕分男女了!明末清初的小说《掘新坑悭鬼成财主》中提到“连那女流也来上粪坑,穆太公便又盖起了一间女厕所”。这本佚名者所著的小说,至少很明确的告诉我们,明末时期我国的公厕就已经分男女了。民国时期街上的公厕渐渐增多,但是女厕极少。新中国成立之后,我国的公厕一般采用汉字“男”,“女”来标明性别;或者用直立的男女标准示意图;再或者以男女头像分别代表;改革开放后,外国人朋友来的多了,就相应的汉字下面标明“men”,“women”。 Well,well,如果公厕的性别标识如此平淡无奇,小编还说什么。随着时代的发展,公厕性别标识符号,呈现百花齐放百家争鸣的状态。以一种极简主义的姿态,阐述男女有别: 以简笔画的形式勾勒男女面部,来作为公厕的性别标识 同样以简笔画的姿态,描绘”倒三角“、”正三角”的男女身材差别,作为性别标识 蝴蝶结在下则为男士领结,蝴蝶结在上则是女士发饰,男女之别一目了然 这个的标识的设计亮点,在于巧妙的运用阴影来作为公厕性别标识 点+线条勾勒男女如厕之形态 充分整合男女外观差别,本着“取之于谁,用之于谁“的态度,告诉你“女士这边请,男士,让一让请走那边” 这三个标识以男女内衣的差别为出发点,来达到公厕性别区分的目的 斯文一些,不盯着内衣看了,从男女的外套上区分“西装革履”代表男士,“礼服套裙”代表女士 内衣,外套都被设计师挖掘了,接下来设计师们又瞄准了帽子和鞋子。当然设计师的出发点都是考虑大多数情况,在这种情况下“高跟鞋”就是女士的象征 按着正常人的思路出发,“长胡子的”便是个爷们,“涂红唇”的就应代表婀娜的女性 酷爱童话故事的设计师认为,海洋的世界中,当海盗的就一定是个男人,美人鱼就是个姑娘 这位设计师根深蒂固的认为,骑28自行车的怎么也得是个爷们。可是小编依稀记得天后王菲某个MV中就是骑着28自行车满城的瞎逛……再者你让不会骑自行的人情何以堪啊,这厕所上还是不上啊。当然也有一部分设计师生理课学的很好,对生活的观察也很到位,他们的作品是这样的: 生理课学好之后,设计者们又充分发挥各自的幽默细胞,所以厕所的性别标识变成了一段故事: 此处无声胜有声 以上不雅动作,小编可不支持~~ 男人想踢球,女人想购物 生物课没学好,你连厕所都上不了,深深的感受到来自世界的恶意…… -
国内手游图标设计
为了能够在“第一眼”战斗中取得先机,大家知道这些上架AppStore的游戏们有多拼吗?光是之前的在游戏名称上大做文章已经不能满足开发商了,于是,美工将他们的双手伸向了:游戏图标。国内手游图标设计如果你闲来无事打开中国区iPhone游戏畅销榜,就会看到这个有趣的现象,由某一两家巨头引领的给图标加上“黄金字”的潮流正在蔓延。App图标上原本醒目的人物或设计变成了背景,而真正醒目的主角变成了这些大字:
“黄金字”们的样式也惊人地统一,无非就是字号要大、字体要加粗加粗再加粗,颜色要金黄色,加对比度强烈的边框,简直跟我们用美图秀秀P海报字体如出一辙,总之就是第一眼就抓住玩家的眼球,顺路从气势上压倒其他完全不闪的对手们。笔者看了一下,这些黄金字也有不同的种类,大致可以分为:一突出游戏特色新内容比如“草薙降临”、“招亲”、“家园”这种。当然因为发挥空间有限,所以四个字已经是极限,以喊出来朗朗上口为佳。 二突出PK对战有“仙盟战”、“跨服战”、“帮会战”、“5V5”等各式各样的名目,本质不过就是VIP玩家们的人民币碾压。 三特殊纪念活动这个很好辨认,清一色的“一周年”、“二周年”,了不起的已经有“三周年”了。 四意味不明但就是很醒目 现下最流行的关键词:觉醒! 神器! 翅膀!我整个人都不好了……金光闪闪的背后,十足体现了这块区域严重的同质化,同风格同类型到泛滥的图标设计、缺乏IP实力毫无辨识度的游戏名称,想尽方法增加搜索入口的副标题和括号附注,这些在AppStore的国内手游里格外明显。 你剑我也剑 你熊猫我也熊猫尽管如今大版权时代这种“雷同”现象已经少了很多很多了……如果说《DNW(魔龙与勇士)-光明之翼(腾讯第一实时PK格斗手游)》、《三国笑传-神将录(王祖蓝代言,天天送橙将,真神将觉醒)》等标题顶多看上去比较烦人,还算正常的话,那么像《新苍穹之剑-我们结婚吧》和新上架的《泽诺尼亚S(ZenoniaS)-国服上线,怎能不玩》这种完整标题,已经让人不知道从什么地方开始吐槽。有对比才有槽点、啊不,才有进步,同样是iPhone游戏畅销榜,我们且去看看隔壁美国区和日本区又是什么情况吧。美国区游戏畅销榜:风格众多,难以总结,不过出现类型比较多的是社交大厂King霸榜的各种点心系休闲三消,你可以看到图标都是五彩缤纷的糖果点心设计,还有清一色的777博彩类手游。可见美国玩家的手机娱乐基本都是以休闲为主,当然像《我的世界》还有*车球题材的作品也大受欢迎。 日本区游戏畅销榜:风格众多,同样难以总结,硬要说的话可以分为两类,一类占绝大部分的是亚文化二次元图标,也就是我们熟知的日系动漫风;另一类则是少量的非二次元人物、物品图标。另外二次元图标里可以清晰地分出妹子系和汉子系阵营,只不过以萌妹为图标的手游实际上都是宅男在玩,而以帅哥为图标的手游基本都是妹子在玩就对了。 中国手游市场目前已经是世界最大也是潜力最大的市场,正是因为能从区区手游图标设计上看出这么多问题,才让人觉得再这样下去不行。真正有追求的开发商已经在努力转变这种格局,如果有一天我们打开排行榜能看到审美和原创兼具的各色游戏图标,种类丰富且令人赏心悦目,这才有自信说我们在手游上,已经发展好了。 -
金刚区图标设计
1.什么是金刚区?金刚区图标设计
金刚区是一个页面中头部的重要位置、是页面的核心功能区域,表现形式为多行排列的宫格区图标。比如淘宝app首页banner(广告横幅)下的两行图标、饿了么外卖app首页banner下的两行图标、支付宝app首页头部的4个图标就是金刚区。2.金刚区的意义和功能是什么?金刚区的位置通常是位于搜索框、banner之下,而且金刚区区域通常会占据屏幕22%~25%的大小且位于屏幕头部,从用户阅读屏幕内容的视觉流来说位置至关重要,而且是聚合各类子板块的入口,为各个子版块分发内容引导流量。所以其重要性不言而喻,产品要让用户通过不同类型展示方式的组件找到相应的功能,而图标具备精炼高度概括内容的特性,而且图标的识别度大于文字,所以金刚区的设计通常以图标+说明文字为主。我们都知道,app中的图标也是构成整个品牌设计语言的重要一部分,图标的展示形态,采用的配色,图标的设计层次、设计手法、设计细节都在影响着整个品牌设计语言的走向。所以在设计金刚区图标的时候也是值得花很多心思在上面的。3.金刚区图标的常见设计类型和表现手法?金刚区常见的设计类型有3种:面性图标实拍性图标线性图标下面我们通过案例来逐一分析他们的设计手法和设计亮点。(1)淘宝APP—面性图标因为淘宝的整个业务线很多,涵盖的方向也很多,所以金刚区的部分是1排5个图标,共2排也就是10个图标。一行5个图标也是当下行业内的图标数量极限了。在多的话势必会显得很拥挤,而且图标的识别性会打折扣。 淘宝8.0.0淘宝APP金刚区组成:圆形底板+业务说明+图形+板块名称纵观多种案例,我们会发现一个问题,为什么电商类APP金刚区图标多为圆形呢?我们来一起思考一下。从圆和方的直观直觉感受来讲,圆给人一种亲近柔和的感觉,而正方形有4个棱角会让人感觉很生硬显得有距离感。在设计上来讲,方形的图标还需要考虑到四个棱角部分的设计不然会显得很空,圆形会显得更加聚焦内容,如下图。 而且如果一排5个宽和高相同的圆形和方形图标,方形图标面积大所以会显得拥挤一些,所以金刚区图标圆形居多一些。颜色:底板是从左到右0度的渐变,左边的颜色和右边的颜色属于同一色系。在色相,明度,饱和度上等数值上都有差别,但不会让渐变的两个颜色相差的特别明显。视觉感官上是左边的颜色比右边的颜色“亮”一些。造型结构:图标是上下结构。上方是图标的业务说明描述,告知用户这个板块是做什么的,除了第一个图标外,其余的图标业务说明均是2个字,用最简短的词去描述、高度概括子版块内容。因为淘宝的受众用户人群众多,年龄跨度也较大,金刚区的识别性放在绝对的第一位,所以会在图标上写上业务说明。图形:图标的下方是和子版块相关的图形,不过因为淘宝的业务线众多,风格也不一,所以没有将下方的业务图形做成完全统一的风格。但在设计风格上都是扁平化的图标,没有添加阴影高光等立体效果。(2)京东APP—面性图 京东7.1.6京东APP金刚区组成:超椭圆底板+业务字设计/图形+板块名称超椭圆形状介于圆形和方形之间,而相比于圆角矩形又显得很灵活生动饱满。 颜色:底板采用的是从左上到右下的斜45度渐变,左边的颜色和右边的颜色属于同一色系,渐变柔和变化不是很明显。造型结构:在金刚区图标的设计上,京东也是将图标的识别性放在了首位,大部分图标使用板块的业务说明文字来进行设计,再叠加一个弧形的过渡,让图标内的图形看起来像是从一个空间延展到了另一个空间,增加了设计感不失趣味性。图形:业务相关图形或字体设计,且均添加了投影,营造空间感增加设计细节。有一点需要注意的是,比如“京东超市”这个图标的右上角是加了促销标签的,利用用户喜欢贪便宜的心里,也是吸引用户点击的一种手段。但是此处不建议做字体的倾斜,试想一下,金刚区有8个图标,每个图标上都有一个字,每一个字都倾斜,那么你会感觉整个金刚区都是“倾斜”的。(3)饿了么APP 饿了么8.3.1饿了么APP金刚区组成:轴测图立体图标+板块名称颜色:金刚区图标的颜色总体给人鲜艳明亮的感觉,来表达食物的新鲜美味。就像我们生活中吃的食物生鲜蔬菜一样,如果颜色看起来脏脏的,怪怪的,一点都不给人新鲜的感觉,那么你肯定也不放心去吃他。造型结构:饿了么采用的是2.5D轴测图的形式做的立体图标。与常规图标不同,这样的设计手法会展示图标3个不同的面,细节丰富设计感强,能在同类竞品中脱颖而出。而且这种设计手法所画出来的图标更加贴近真实食物的形态。外卖美食类APP的金刚区图标应该尽量以美观度为主,其次是识别度。为什么这样说呢,我们试想一个场景。当你打开外卖类APP的时候通常是肚子饿了,有了“吃”的这一层身体上的欲望,那么在进不同的板块选美食之前我们首先就是在选金刚区图标,除非用户在进APP之前脑海中已经决定好了要吃什么,进来直接下单。否则,金刚区图标的设计影响着对用户的吸引程度。你的第一印象看到了整体的图标都非常精致美观,你的潜意识也会觉得里面的东西应该会很好吃,反之亦然。图形:因为2.5D设计手法画出来的图标是3个面,所以细节相比正常的图标来说会多,那么就没必要在给每个图标添加一样的底板了,那样做会显得图标很复杂,不够精简。而且也会降低图标的识别度。(4)盒马APP—实拍性图标 盒马4.0.0盒马鲜生APP金刚区组成:实物实拍+统一圆形底板+板块名称颜色:底板的配色依然是业务色,比如“海鲜水产”的底板色是海蓝。但有一点要注意,底板色要与实物实拍图有区别,不能看起来像是融为一体的感觉。而且为了营造新鲜感颜色应明亮一些。 造型结构:实拍实物摆放角度为从左上向右下的斜45度。此处采用了“破格”的设计手法,让实拍物品一小部分“冲”出了圆形底板,空间感很强。图形:金刚区图标大多采用两件物品进行摆拍,而在两件物品的组合上选的是大小对比大的物品,这样更能营造层次感,空间感。类似的实拍性金刚区图标还有小米有品、网易考拉 小米有品2.5.1实拍性实物做图标的好处是可以带来真实,可靠的感觉。而且还可以将运营方需要主推的商品换成图标为板块带来流量。(5)京东金融-支付、支付宝—线性图标 京东金融4.9.10 支付宝10.1.35两个APP都是钱包和支付有关,钱包级别的应用要给用户带来安全、可靠的感觉,所以在金刚区的视觉上的设计尽量克制、简洁。线性图标在此应用最适合不过了。4.金刚区图标应该从哪几个纬度去设计?1.辨识度、识别性图标在辨识度上要优于文字。还有一层意思是在图标的设计上要与竞品有一些差异度。要让自身产品在市场中有“存在感”和“存在率”,存在感即我们通过对自身产品app的整体视觉语言设计从而让用户使用我们的产品和竞品时有一个明确的记忆区分。比如请你在脑海中回忆“咸鱼”app的颜色和“京东”app的颜色,如果你用过两款产品,那么你可以轻易的回忆起咸鱼的品牌色是黄色,京东的品牌色是红色。再回到金刚区,你只看到下面这组图标就能知道这是什么app,对么? 2.强调性金刚区图标通常是在app的首屏出现,位置位于搜索框、banner之下,而且金刚区图标通常会占据屏幕五分之或者四分之一的大小,还起着为各个子版块分发引流的重要作用,所以在设计的重量上应该比金刚区图标下方的内容区:UGC、瓷片区等内容要重一些。3.识意性有了前两步的铺垫后,金刚区图标还需要有可识意性,通俗来讲,能让用户做到看其形明其意,这一点很重要,即使画的再好看,用户看到图标后需要仔细思考图标的含义到底是什么的时候这个图标就是失败的(特殊情况除外),因为图标的作用就是为了在文字之上辅助用户识别,人脑对图片的敏感度要大于文字。图标要表意,高度概括说明文字,如果实在没有合适的图案那么可以像京东一样,将单字拿出来,去做一些字体基础上的设计。 飞猪9.0.54.趣味性相当于考试时候的附加题了。不做不扣分,做了加分。如上图的飞猪APP趣味性的出现让整体的金刚区图标更加的生动灵活,多渐变多色彩的应用会给你带来一种旅途出游很愉快的感觉。不死板便是增加了与用户的亲密感。有助于在用户首次使用产品是消除陌生带来的距离感,增加用户使用产品时的安全感。5.金刚区图标设计时有哪些注意要点? 贝壳1.8.0金刚区图标常用做法:45°渐变底板+白色面性图标+微投影网上流传一种做法,图标底板之上的图形区域范围是底板乘以黄金比例0.618的结果。但纵观市面上的案例,如此做法的少之又少,而且设计本来也没有特定的数值,具体情况要具体应用,而且习惯性操作后容易让自己的思维陷入死角。底板上图形设计区域约占底板区域的50%~65%之间,45°渐变可以让图标看上去更加有设计感,渐变的两色要在同一色系,渐变不要过于明显。整体金刚区图标底板色的饱和度和明度要尽量做成视觉统一。白色面性图标会使图标整体看上去更加简约,直接。有些稍复杂的图形在做白色面性图标时可以做一些渐变在上面,或者做一些透明度的变化,如上图贝壳APP和之前的支付宝口碑APP。在图形上加一些底板色同色系的投影上去,营造一些层次感空间感,但切记不要让投影过于明显和颜色脏。当然,并非一定要做统一圆形底板的面性图标。不带底板的异形图标,线性图标都可以,具体还得看业务需求,如果不需要金刚区视觉效果很重的话可以考虑线性图标,更加的轻量、简洁、逼格高。 -
UI元素图标设计流程及小技巧
图标设计要求熟练运用软件,涉猎各种矢量特性、蒙板以及构造实体几何,因此,会需要同学们运用不同的软件工具与技巧,今天的译文全都是超实用的技巧干货,周末来补充点有料的。UI元素图标设计流程及小技巧
图形创建vs图形样式我认为,对矢量路径的创建和图形样式的设定作出正确的区分是十分重要的,因为它们需要通过两种截然不同的设计软件来实现——Photoshop和Illustrator。你还在为网站改版的方向发愁吗?Photoshop的渲染质量和蒙板功能几乎超越了所有的设计软件,而Illustrator则囊括了丰富的矢量功能。在我的漫漫图标征途中,Illustrator可谓是矢量路径界的王者。值得庆幸的是,Photoshop和Illustrator两者之间的转换算得是无缝连接了。通常我的工作流程是这样的:在Photoshop中进行简单图形操作,但如果涉及到整套图标或任何复杂图形,我会先选用Illustrator进行创建,而后移步Photoshop进行样式处理。那些让人前赴后继投入其中的产品,秘诀是什么?简而言之,Illustrator用于创建图形,Photoshop用于设定样式及输出。规格如果你可以控制图标尺寸,那么图标样式和线条粗细应有助于规格的制定,因为许多图标都必须有一条中线。也就是说,如果一个图标的宽度为偶数,那么中线的宽度便不能为奇数。同理,如果一个图标的宽度为奇数,那么其中线的宽度便不可为偶数。UI设计中插画也很火,你知道如何更好的运用吗? 当你使用的线条宽度为偶数时,图标尺寸应为:偶数(宽)x偶数(高)。当线条宽度为奇数时,那么图标尺寸应为:奇数(宽)x奇数(高)。尽可能不要混合使用奇数和偶数尺寸(除非你不混合会抓狂,那么也确保不同轴使用不同粗细的线条)。提高产品可用性的实用动效设计原理勿用高分别率来掩盖这个问题——在奇数宽度的图标中使用1pt(或1dp)的线条,也许在Retina配置中看起来没有问题,但绝对会在1×和3×尺寸的分辨率中发现让你头大的问题。其实,大家只要把所有的点都想象成图标的基础网格,避免过于细小的偏移定位,一切也没那么复杂。要确保所有的图标设计应该从1×开始。关于UI界面设计的这些原则你知道吗?OSX应用图标使用简单的网格系统可有助应用图标的绘制。OSX的应用图标尺寸均为成倍增长,因此,我可以通过16×16像素的图标大致界定1024×1024图标的定位,这样的工作流程就轻松多了。对于那些极小的版本,也就无需过多调整细节了。关于UI界面设计的这些原则你知道吗? 然而,苹果的图标并没有完全吻合网格系统。不知为何,它们有着几个像素的偏差——Safari图标的直径为898像素,而非完全吻合1/16网格的896像素。5种字体设计的方法,解决你字体侵权!!! 综上所述,我定义的图标尺寸与Safari、iTunes和其它苹果图标并不完全相同,不过只是1024像素中的2像素差别而已,遵循网格对我来说更为重要。很好奇苹果为何选择这个尺寸。iOS应用图标iOS应用图标的尺寸不如OSX图标那么具有匹配度,工作流程略微复杂一些。以下所列为如今所有iOS图标的尺寸。•29×29•40×40•58×58•76×76•80×80•87×87•120×120•152×152•180×180•1024×1024(应用商店)目前总共有10种尺寸。但是,如果你只需制作1x的网格尺寸,那就只需关注5种主要尺寸即可。•29(1×),58(2×),87(3×)•40(1×),80(2×),120(3×)•60(1×),120(2×),180(3×)•76(1×),152(2×),228(3×)•1024×1024(应用商店)4种基础尺寸加上应用商店尺寸1024×1024像素,工作量直线减半。另有一个好消息,要是哪天苹果发布3x尺寸的iPad,那你基本也已经完成了适合该规格的图标。超热门卡片式UI设计你想学吗? 在一开始,要忍住高分辨率尺寸的诱惑,专注于1x尺寸是事半功倍的良方,这可以帮助我们节省时间,从而获得更有效,更易维护的设计。当水到渠成时,再开始制作2×、3×或4×的版本也不迟。特别要谨慎使用“智能对象”,要小心它们可能有特殊的尺寸变化。从Illustrator开始Illustrator不但能让你在设计1x网格尺寸的图标时清晰观察所有矢量节点,并且有着数不胜数在任何其它软件中都无法实现的独特功能。我对其中的许多功能真是欲罢不能,这也正是为什么我选择Illustrator作为我图标工作流程第一步的原因。对齐网格设定我不太喜欢Illustrator的对齐像素设定,不过勾选“视图→对齐网格”后的效果还是非常理想的,记得关闭对齐新对象到像素。对齐新对象到像素可在新建文档或变换面板中可找到。 如果你需要对像素作非常细微的调整,可以使用移动面板(对象→转换→移动,或直接按回车键)。 自定义工具面板最近,我重新编辑了我的工具面板,去掉一些不常用的工具,显示原本被隐藏的工具。 路径寻找器如果你想对图形进行加、减或排除操作(通常被称为布尔操作或构造实体几何),Illustrator中的路径寻找器可谓是所有矢量编辑软件中最好用的功能了。于路径寻找器中,我又最钟爱分割功能——它将重叠的图形分割成单独的形状,这样就可以轻易地删除不需要的部分。 形状生成器形状生成器功能比路径寻找器更新,使用起来更快捷。如果你有几个独立形状互相重叠,那么选中形状生成器,拖动鼠标即可组合形状,按住option同时拖动鼠标即可减去形状。 ⇧M选择形状生成器。实时圆角IllustratorCC2014新添加了实时圆角功能,像小手柄一样出现在所有转角处。拖动小手柄即可控制圆角的角度。这个功能不仅仅针对矩形,适用于所有形状。 实时圆角功能实现了那些原本绘制十分困难或费时的图形。Illustrator的这款功能一如许多其它可爱的功能,方便了设计师们的工作。 如果你希望精确定义角度,可以在控制面板中的输入转角直径数值即可。 扭曲Illustrator的扭曲以及其它封套扭曲工具可用于各种形状的弯曲和扭转,让图形变得更有趣。 路径轮廓我通常会先将笔触转路径后,再进入Photoshop设定样式。有些软件也有这个功能,但是不多。对我来说,该功能是矢量编辑软件必不可少的。 笔触变量在Illustrator中,我们可以对笔触各个部位的宽度进行调整。 选择宽度工具(shift-W),双击需要编辑的节点后,会出现控制面板供输入数据精确控制宽度。该工具可以精准绘制出其它工具所无法绘制的图形。 虚线Illustrator中的虚线有两种模式——转角对齐以及常规间隔。转角对齐虚线总是看起来更舒服,然而多数设计软件里并不包含这一选项。虚线可转化为路径后置入Photoshop中作后续编辑。 单个变换在Illustrator中,同时对多个对象进行大小、旋转角度及位移等调整是相当轻松的,并且它还能做到以每个单独物体为单位进行上述各类调整。这个小小的功能可以为我们省去大量的时间和精力。 套索选择当选取框无法满足复杂的选区时,套索工具可以做到。可与按键结合使用套索工具:(加选),(减选)。 图形样式为提高工作效率,我在Illustrator中设定了一些图形样式。如果你的图标中含有很多图形样式相同的元素,这么做一定能帮你节省不少时间。 像素预览说实话,Illustrator的像素预览图挺烂的,案例图中显示了它究竟是怎么个烂法——像素零散,没有渐变递色,等等这些都让它的像素预览无法令人信服。因为我最终会在Photoshop里进行样式设定,所以Illustrator的像素预览对我并没有什么影响,但我们还是要对这一特点有所知晓。大家可以在图中看到Illustrator和Photoshop的像素预览图对比,差异相当明显。 零星的像素是很危险的,iOS和OSX界面图像的规格须为精确成倍的数据,所以一个图像所多出的1个零散像素就会出现问题。Photoshop样式设定一旦完成图标的路径构建后,我会将他们作为形状涂层贴入Photoshop。如果你有多个路径,可以在Illustrator中将它们同时选中拷贝,在贴入Photoshop后仍可以分为单独图层。单独选中一个路径,并同时按⇧⌘J键,即可将其移入一个新图层。输出我不建议通过Illustrator输出位图。我亦不将iOS图标存为PDF格式。我使用Photoshop切片来输出PNG格式或其他位图格式。这一做法有诸多好处,譬如:可以选用一张需10秒载入的图层,或是一整套需100秒载入的图标;保持样式的整体性;易编辑。(原作者另著有一篇应用设计流程,其中录入了更多有关切片工具的详情,如果童鞋们有兴趣,小编可以进行后续编译。)如果是输出SVG格式,我通常结合使用Photoshop的生成器和Illustrator。 -
如何制作出令人眼前一亮的UI图标设计
好的图标设计往往令人眼前一亮,不需要具备诸多的元素,但一定要具备自己独特的个性。或写实或拟物,或追求统一性或追求差异性,都可以制作出令人眼前一亮的UI图标设计。下面小编就来具体介绍几种UI图标设计的技巧。一、拟物拟物从字面意思上来说就是模拟现实生活中已知事物。要运用好拟物这一技巧来设计图标,首先要注重图标的外形和质感,可以通过模拟材质、纹理以及添加高光、阴影等图层样式对现实中的事物进行模拟再现。拟物最大的特点就是可以让用户很快认出某一图标的具体用途。二、写实写实和拟物具有一定的相似之处。就是让图标看起来更加真实贴近现实生活。不过写实更加追求一种真实感。用户在点击使用某个图标时如同在现实生活中使用某一物品同样的感受。三、动效动效是令图标设计别具一格的独特技巧。以搜索图标与内容文本的提示交互为例,在动效的处理之下,摒弃了以往的刻板加载观感。使网页更具灵活性、交互性,从而也增加了用户的好感度。四、统一性整齐划一往往给人,直观、简洁之感,不会让人觉得眼花缭乱。而规律和秩序不仅能够加深用户的印象而且具有独特美感。这些都是UI设计追求统一性所带来的好处。人们仿佛天生就有追求统一的冲动。栉次鳞比的高楼建筑,一排排整齐的塔松都是对统一感的追求。五、差异性追求差异性不仅能够形成对比效果,而且能够让信息呈现出层级性。对于用户来说,则有助于视觉的引导。不管是颜色的对比还是大小、字体的对比,都可以制造出不一样的观感。当然这也可以作为吸引用户的一种手法,制造焦点,留住用户的目光。
-
关于APP应用图标设计的4大要素
相信大家在进行APP开发以后,都希望自己的APP应用能够受到广大用户的关注和喜爱。由于APP应用需要下载才能使用,用户通常都会在应用市场当中下载,所以用户在应用市场看到APP应用时,如果一眼就能被APP应用的图标吸引住,用户才会主动下载来使用。由此可见,APP应用的图标对于吸引用户下载是非常重要的。接下来长沙APP制作创研移动就来给大家谈谈,关于APP应用图标设计的几大要素。1、图标体现特色和创意在应用市场当中,拥有者成千上万的APP应用,这些APP应用依次排列,用户在挑选的时候,如果图标与其他APP应用的图标相似,用户就会很容易将其忽略,从而与APP应用擦肩而过。要想用户能够一眼就发现这个APP应用,那么在设计APP应用图标时,就需要保证自己APP应用的图标能够与众不同,体现出自己的特色和创意,这样才会显眼,用户才能更容易发现企业的APP应用,从而吸引他去下载和使用。2、准确的体现自身信息在用户筛选APP应用时,其时间是非常宝贵的,不会将每个APP应用都下载试用一番,再去决定是否留下。通常用户最普遍的做法就是,先看APP应用的图标,然后根据图标来判断这个APP应用是否是自己需要的,是否能够解决自己的问题。如果图标能够准确体现出APP应用的信息,那么用户就能做出准确的判断,这样对于有需求的用户来说,无疑是非常方便的,自然就会毫不犹豫的选择下载这个APP应用了。3、色彩搭配使用要合理APP应用的图标其实是非常小的一张图片,但是他却需要体现出非常多的信息,令用户能够做出更加精准的选择。在这样的情况下,对于图标的色彩搭配就要非常慎重了,如果采用过多的色彩,则会产生眼花缭乱的效果,导致原本重要的信息被弱化,很容易就会对用户的选择造成干扰。所以,在设计APP应用图标时,不仅要保证其美观度,还需要注意其色彩搭配的合理,要更好的显示图标所表达的主题。4、保持简洁的设计风格其实设计APP应用的图标并不需要多么的复杂,反而是越简单的设计越好,这样用户在浏览图标时,才能更容易理解所表述的含义,对APP应用的功能也就会更明确,这样APP应用所获得的用户就会越发精准,用户流失率也就会更少。但如果APP应用图标设计很复杂,用户就难以理解其中的含义,这样即便是APP应用的精准用户,也很难产生下载APP应用的兴趣。即便是下载了,也不能保证一定就是精准用户。总的来说,APP应用的图标设计看似是一个非常细微的工作,但却处处透漏着不平凡,它是APP应用在应用市场的名片,也是APP应用的形象展示窗口。用户无论是下载APP应用,还是使用APP应用,首先看到的都是其图标,是用户最先接触APP应用的地方。所以企业只有费尽心思将图标设计好,才能体现出APP应用的优势,才能对用户形成更强的吸引力,从而令APP应用拥有更多的忠实用户,实现更好的效果。
-
图标设计的基本原则有哪些?4大图标设计原则解析
当您打开电脑的时候往往最先映入你眼帘的就是桌面上的图标了,当你打开手机时,最先看见的也就是手机界面上的图标了。那么你是否知道这样的图标是怎么设计出来的呢?设计师都是秉着什么样的设计原则设计的呢?这些信息在UI图标设计教程里全部会找到答案。接下来小编就跟大家一起来学习一下UI图标设计的一些原则吧。图标设计的基本原则就是要尽可能的发挥图标的优点:比文字直观,比文字漂亮,减少图标的缺点:不如文字表达的准确。因此图标设计的基本原则可以简单的归纳一下几点。第一:可识别性原则可识别性原则,意思是说,图标的图形,要能准确表达相应的操作。换言之,就是我看到一个图标,就要明白他所代表的含义,这是图标设计的灵魂。可以当之无愧称之为图标设计的第一原则。第二:差异性原则差异性原则,什么意思呢?意思是如果一个界面上有六个图标,我一眼看上去,要能第一时间感觉到他们之间的差异性,否则我怎么辨认呢?这是图标设计中很重要的一条原则,但也是在设计中最容易被忽略的一条,图标和文字相比,它的优越性在于它更直观一些,但是如果图标设计失去了这一点。第三:合适的精细度,元素个数首先我们要明确一个点,图标的主要作用是用的,代替文字,第二才是美观。但现在的图标设计者往往陷入了一个误区,片面的追求精细,高光和质感。其实,图标的可用性随着精细度的变化,是一个类似于波峰的曲线。在初始阶段,图标可用性会随着精细度的变化而上升,但是达到一定精细度以后,图标的可用性往往会随着图标的精细度而下降。第四:与环境的协调性图标是没有单独存在的,图标最终是要放置在界面上才会起作用的。因此,图标的设计,要考虑图标所处的环境,这样的图标,是否适合这样的界面?比如你的界面是森林和大地,你就可以考虑用石块,木头,或者蘑菇,野花设计一系列的图标。如果你的界面是平面的,简约的,你可以考虑用一些简单的平面的符号或者图形来设计你的图标,这样整个界面会很协调,不要认为这样的图标是简陋的,其实这样的图标的可识别性非常强的,在简洁的界面里,会透露出一种简约之美。只有了解了这些UI图标设计教程中的这些设计原则了,才能设计出符合的实用的一些图标,你看这些内容有没有激发一下您的创作灵感呢?
-
按钮组设计
什么是按钮组?顾名思义,按钮组就是指两个或两个以上的按钮排布在一起。为了了解按钮组的使用场景,首先我们来思考一个问题:什么时候我们会使用按钮组?从按钮组的样式上我们可以看出常见的按钮组是供用户进行判断(两个选项)或者选择(两个以上选项)的。判断首先我们来说判断,就是只有两个按钮的情况。一般来说,两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击,那么我们会在样式设计上进行区分。微信的”取消”按钮背景色选择的是灰色,而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮,进而完成登录操作,提升了操作效率。其实可以让用户进行判断操作的组件还有开关。开关,又称switch,也是我们很常见的一个组件,表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作,例如你在iOS设置里开启了微信的“通知”功能,那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作,更像是一锤子买卖,这也是按钮组和开关的一个主要的区别。小时候,我们家的灯开关都是拉绳的。拉绳的开关有一个缺点就是停电的时候,你不知道当前的灯是开还是关,这个就很头疼。所以开关要用好必须要让用户明确自己当前所处的状态以及清楚操作后的结果。其实淘宝的这个switch用的并不是很好,因为这里的图形暗示并不是很清晰。线状和面状在上面我们提到了设计中的一个对比理论,这里我们不妨来进行一个拓展。我们在设计按钮的时候,经常会面临着抉择,线状按钮还是面状按钮?其实线状还是面状争论不仅仅存在于按钮,还有icon,tab和标签等样式。面状和线状代表不同的设计理念,我们都知道面状元素在界面中更容易吸引用户的注意力,而线状元素强调的是轻量化。具体到按钮,简单来说就是面状按钮比线状按钮具有更强的可点击性。我们可以来看一个例子:微信里“通讯录”里的icon加了一个色块做背景,但是“发现”和“我”界面中的icon都没有加色块做背景。我尝试着把icon的色块背景给去掉,发现它的视觉权重立马降了一档。因为通讯录这个界面中有用户头像,如果不加色块背景,用户很难注意到这四个功能。所以说块状元素的使用可以提升功能的转化率。我们再来看一个例子,喜马拉雅Fm这个界面中的“录音”按钮其实看起来特别的吃藕,因为很突兀。但是设计师的目的达到了,为了提升用户黏性,他们肯定很希望用户在喜马拉雅Fm里上传自己的录音作品,那么必须做到足够的显眼。我们对这个界面进行高斯模糊处理,发现视觉焦点就在这个“录音”按钮上,所以“突兀”算什么?就怕你不突兀呢!“一个”是我个人很喜欢的应用,它的界面中除了必要的配图,其余所有icon和按钮使用的都是线状元素,给用户一种非常清新淡雅的感觉,这倒也很贴合这款产品的气质。对于一款产品来说,设计师的职责是非常大的,不应该像现在这样仅限于美工层面。从整个产品的角度来说,设计师要准确的定位目标用户群,根据目标用户群的喜好来确定界面设计风格,具体到每个界面中设计师要考虑各个功能的优先级排布。不要怕麻烦,你能做的事情越多,你的“可替代性”就越低,所得的报酬就会越多。选择喝完了鸡汤,接下来我们回到正题。再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢?其实这种出现多个选项的按钮组样式我们可以看成是单选/复选功能的一个变形。只不过现在传统的单选/复选的样式很难满足当前的设计需要,用户渴望更加新颖多变的按钮样式。特别是选项过多的情况下,按钮的优势就凸显出来了。那么我们再回到之前的那个问题,“按钮组排布的时候是组合在一起好还是分开好?”对于这个问题,我是这么认为的:分开的按钮样式具有更强的适应性,可以换行,也可以滑动。组合按钮样式一般都要全贯通,适合展示信息层级较高的功能。总结成一句话:如果选项在一屏的宽度中可以展示完全,那么组合在一起和分开的区别并不是很大,但是一旦选项过多需要用户滑动和换行才能浏览完的时候,分开的样式更加适合。单选/复选都是供用户进行选择操作,其实还有一个组件跟单选/复选很相似,那就是下拉列表。当选项过多时,用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间,但是用户想要看到全部的选项必须要点击出下拉列表,增加了操作步骤,而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下,我的个人建议是尽量使用单选/复选按钮。