插画在app中的应用-如何将插画艺术应用到UI设计中?
插画在APP设计中的应用现在APP的数量越来越多,制作也越来越精美,各种APP都想在设计上能够与其他APP区别开来,从而更好的吸引用户的注意,将插画运用在APP当中,无疑是一种好的选择,在iOS
11的AppStore“Today”中就用了很多的插画,给用户带来了全新的体验。
一.什么要在APP当中使用插画?
增加视觉冲击感,总结为两个字“惊艳”,例如“walkup”APP,当中的每一个页面都运用了插画,而且设计得极其精美。
增添趣味性,使页面不显得单调、乏味,一个明显的例子就是APP当中的空页面和错误页面,例如淘宝在无网状态下,显示一幅可爱的插画要比单纯的显示文字要给人的感觉好得多,也可以尽可能的减轻用户的焦虑。
承载更多的信息量,更加的直观,这一点在图标上显示的比较明显了,例如百度糯米的分类图标,采用了写实的风格,给人的感觉就更加的直观了。
满足用户的情感需求,情感化设计,这一点在keep当中得到了很好的体现,在刚刚过去的七夕节,keep把跑步路线变成了粉红色,还配上了一条狗,七夕节还在跑步的人,很有可能是单身狗啊,意思不言而喻。
二.目前比较流行的几类插画及其特点
扁平插画
肌理插画
手绘插画
MBE插画(dribble一位大神创作了这种风格,因此被称为MBE风格插画)
渐变插画(有时也称微光插画)
立体插画(也叫2.5D插画)
描边插画
下面分别对各种插画进行举例,所有例子均来自dribble。
扁平插画:扁平插画的特点是扁平,简洁明了,扁平插画是现在很流行、也是最常用的风格
肌理插画:我觉得肌理插画也属于扁平插画的一种,但是在最后要增加颗粒感,肌理插画最明显的特点应该就是有质感,光影关系表现得比较好。
手绘插画:我认为这是难度最高的一种,也是对设计师的美术功底要求最高的。手绘风格的应用比较广,可以展现的东西很多。下面这位设计师的作品富有童趣,像梦境一样美好。
MBE插画:简洁、圆润、可爱。
渐变插画:一种很唯美的风格,在颜色的运用上一般采取近似色,颜色的种类不要过多。
立体插画:从名字就可以看出,这类插画最大的特点就是立体了,能够在二维的空间里表现出三维的事物。
描边插画:除了运用形状,还要运用描边,可以很好的对事物进行抽象化处理。
MBE插画:下厨房当中的图标,MBE风格很适合用来制作icon
渐变插画和立体插画:拉勾。把这两种放到一起来讲,是因为很多时候一幅插画是包含这两种风格的。(用在banner、专题)
描边插画:拼多多、网易云音乐(用在icon、启动页)
总结一下:插画适合用在APP当中的启动页、banner、专题、刷新、icon、弹框、背景图等等。
如何将插画艺术应用到UI设计中?【导读】在过去几年当中,插画开始以一种坚挺的姿势,站在设计趋势的最前列,不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页、UI和动效设计师都纷纷学习插画设计,那么如何将插画艺术应用到UI设计中?今天我们就来具体看看插画艺术的应用。
1、插画的独特性来自于其中的隐喻和引人入胜的视觉
和艺术一样,设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成,包含的隐喻使得其中的价值更加复合,值得反复咂摸,而不是一眼就可以完全看穿。
2、数字插画能强化交互
应用在短视频中数字化的好处就在这里,通过不同的数字软件,合理的处理之后,不仅能够变成动态的,运用于视频当中,还能够作为微交互,强化产品的整体体验。一旦涉及到的动效和短视频,整个数字插画就开始具备更多的可能性了,不同的动效能带来截然不同的感觉和体验,更不用说这种玩法正贴合时下的流行趋势。
3、插画赋予设计以美学价值,更容易被接受
即使所有人都在分析和争论产品的可用性和易用性,大家在对美的追求上,始终保持着一致的态度。一个设计是否具备可取性,是否能够通过甲方、客户和实际用户,是每个设计人都需要面对,都力求做到最好的事情。精心设计的插画在美学和风格上更加扎实,风格化的设计不弱于现成设计素材所提供的价值。
4、插画让用户可以更快理解和操作
无论是图标还是大幅的插画,都能帮助用户理解,更加直观地知道要看哪里,要做什么。面对如今的数字界面,用户的注意力持续的时间越来越短,而插画则让用户更快、更直接地获取信息,并且决策下一步要做什么。
5、插画能让品牌识别度更高和文本相比,插画的视觉化属性无疑是更强的
图片插画所提供的定制化内容能够从各个方面来贴合品牌的需求,更加到位地表达品牌所需呈现的信息。这也使得插画不仅仅在品牌宣传的时候,运用在广告、海报等显而易见的地方,而且也成了品牌
APP中新用户引导和教程中必不可少的元素。
这样的将插画艺术应用到UI设计的技巧,当然也不是每个人都能领会的,可见,以后UI设计将会更加和我们的实际生活相联系,当然交互设计ui设计理念在未来一定会有更多的应用,赶紧来进行技能提升吧!
手机上有什么可以绘画的软件手机上可以绘画的软件有SketchBook、InfiniteDesign、Painter、画吧、画皮皮。
1、SketchBook
SketchBook属于自然画图软件,软件界面新颖动人,功能强大,仿手绘效果逼真,笔刷工具分为铅笔,毛笔,
马克笔
,制图笔,水彩笔,油画笔,喷枪等,自定义选择式界面方式。
2、InfiniteDesign
InfiniteDesign和《无限绘画InfinitePainter》的设计作者是同一人,软件功能特色有无限画布(平移,缩放,旋转)无限图层和图层选项:分割,合并,翻转,重复,透明
转换层
等。
3、Painter
Painter拥有全面和逼真的仿自然画笔。它是专门为渴望追求自由创意及需要数码工具来仿真传统绘画的数码艺术家、插画画家及摄影师而开发的。它能通过数码手段复制自然媒质效果。
4、画吧
画吧可以学会画画,无论是卡通,简笔,还是素描,水彩。还可以通过画的方式与朋友们直接交流。
5、画皮皮
画皮皮入门级手机画画软件,画皮皮以临摹为切入,提供最简单方便的工具,让小白也能画出好看的画。
绛旓細娓愬彉鎻掔敾鍜岀珛浣撴彃鐢:鎷夊嬀銆傛妸杩欎袱绉嶆斁鍒颁竴璧锋潵璁,鏄洜涓哄緢澶氭椂鍊欎竴骞呮彃鐢绘槸鍖呭惈杩欎袱绉嶉鏍肩殑銆(鐢ㄥ湪banner銆佷笓棰)鎻忚竟鎻掔敾:鎷煎澶氥佺綉鏄撲簯闊充箰(鐢ㄥ湪icon銆佸惎鍔ㄩ〉)鎬荤粨涓涓:鎻掔敾閫傚悎鐢ㄥ湪APP褰撲腑鐨勫惎鍔ㄩ〉銆乥anner銆佷笓棰樸佸埛鏂般乮con銆佸脊妗嗐佽儗鏅浘绛夌瓑銆傚浣曞皢鎻掔敾鑹烘湳搴旂敤鍒癠I璁捐涓?銆愬璇汇戝湪杩囧幓鍑犲勾褰...
绛旓細娓愬彉鎻掔敾鍜岀珛浣撴彃鐢:鎷夊嬀銆傛妸杩欎袱绉嶆斁鍒颁竴璧锋潵璁,鏄洜涓哄緢澶氭椂鍊欎竴骞呮彃鐢绘槸鍖呭惈杩欎袱绉嶉鏍肩殑銆(鐢ㄥ湪banner銆佷笓棰)鎻忚竟鎻掔敾:鎷煎澶氥佺綉鏄撲簯闊充箰(鐢ㄥ湪icon銆佸惎鍔ㄩ〉)鎬荤粨涓涓:鎻掔敾閫傚悎鐢ㄥ湪APP褰撲腑鐨勫惎鍔ㄩ〉銆乥anner銆佷笓棰樸佸埛鏂般乮con銆佸脊妗嗐佽儗鏅浘绛夌瓑銆
绛旓細娓愬彉鎻掔敾鍜岀珛浣撴彃鐢:鎷夊嬀銆傛妸杩欎袱绉嶆斁鍒颁竴璧锋潵璁,鏄洜涓哄緢澶氭椂鍊欎竴骞呮彃鐢绘槸鍖呭惈杩欎袱绉嶉鏍肩殑銆(鐢ㄥ湪banner銆佷笓棰)鎻忚竟鎻掔敾:鎷煎澶氥佺綉鏄撲簯闊充箰(鐢ㄥ湪icon銆佸惎鍔ㄩ〉)鎬荤粨涓涓:鎻掔敾閫傚悎鐢ㄥ湪APP褰撲腑鐨勫惎鍔ㄩ〉銆乥anner銆佷笓棰樸佸埛鏂般乮con銆佸脊妗嗐佽儗鏅浘绛夌瓑銆傚浣曟垚涓烘彃鐢诲笀锛1銆佽浜嗚В鎻掔敾鐨勫熀鏈姛銆傜粨鏋勬槸鎸囨墍...
绛旓細娓愬彉鎻掔敾鍜岀珛浣撴彃鐢:鎷夊嬀銆傛妸杩欎袱绉嶆斁鍒颁竴璧锋潵璁,鏄洜涓哄緢澶氭椂鍊欎竴骞呮彃鐢绘槸鍖呭惈杩欎袱绉嶉鏍肩殑銆(鐢ㄥ湪banner銆佷笓棰)鎻忚竟鎻掔敾:鎷煎澶氥佺綉鏄撲簯闊充箰(鐢ㄥ湪icon銆佸惎鍔ㄩ〉)鎬荤粨涓涓:鎻掔敾閫傚悎鐢ㄥ湪APP褰撲腑鐨勫惎鍔ㄩ〉銆乥anner銆佷笓棰樸佸埛鏂般乮con銆佸脊妗嗐佽儗鏅浘绛夌瓑銆
绛旓細5銆佺珛浣撴彃鐢銆傜珛浣撴彃鐢昏兘澶熶簩缁寸殑绌洪棿閲岃〃鐜颁笁缁寸殑浜嬬墿,涓虹敾闈㈠甫鏉ラ忚鎰熷拰绌洪棿鎰,鏇村ソ鍦颁紶杈句俊鎭傚晢鍔℃捣鎶ヤ腑鎵佸钩鐭㈤噺灏忎汉鍙粈涔 杩欐槸涓寮犲叧浜庣煝閲忔彃鐢讳汉鐗╂彃鐢诲浘鐗,鍔犱笂鎻掔敾浜虹墿涓鸿楗板厓绱,鍙敤浣滃伐浣滄彃鐢汇佹彃鐢讳汉鐗╂彃鐢汇傚崱閫氱煝閲忔墎骞冲寲鍟嗗姟宸ヤ綔浜哄憳鎻掔敾浜虹墿PNG绱犳潗鏍煎紡涓篜SD...鎻掔敾鍦ˋPP璁捐涓殑搴旂敤 鐜...
绛旓細鎻掔敾澧炲己浜嗙敤鎴风殑浣撻獙,鏄彁楂楿I璁捐鍚稿紩鍔涚殑寮哄ぇ宸ュ叿銆傚彟澶,鎻掔敾姣旇捣鍥剧墖鍙帶鎬ф洿寮,鏇村鏄撳彂鎸ュ垱鎰,浼犻掍俊鎭傚笇鏈涜璁″笀浠兘澶熻鎻掔敾鏈澶у寲鍦颁负鐢ㄦ埛鍒涢犱环鍊,鎶瀹搴旂敤鍒颁骇鍝佸綋涓,鎴愪负浜у搧鍜屽搧鐗屼笉鍙垨缂虹殑涓閮ㄥ垎銆鎻掔敾鐨浣滅敤 涓浗鏈鏃╃殑鎻掔敾鏄互鐗堢敾褰㈠紡鍑虹幇鐨,鏄殢浣涙暀鏂囧寲鐨勪紶鍏,涓哄浼犳暀涔夎屽湪缁忎功...
绛旓細鐢鎻掔敾鐨刟pp鎺ㄨ崘 绗憼绉:濡欑瑪鐢熻姳(AutodeskSketchBook)AutodeskSketchBook鏄竴娆惧畬鍏ㄥ厤璐圭殑涓撲笟缁樼敾搴旂敤,鎿嶄綔绠鍗,鍗充娇鏄彍楦熶篃鑳藉緢蹇笂鎵嬨傞傜敤浜巌OS8.0+鐨刬Phone鍜宨Pad鍙夾ndroid4.0+鐨勮澶,鍚屾椂涔熼傜敤浜嶹indows鍜孧ac鐗堢數鑴戝鎴风銆傝皟鑹茬洏鑷敱閫夋嫨,澶氳壊褰╄壊鍙锋櫤鑳借ˉ鑹 绗憽绉峊ayasuiSketchesPro Sketches...
绛旓細娓愬彉鎻掔敾鍜岀珛浣撴彃鐢:鎷夊嬀銆傛妸杩欎袱绉嶆斁鍒颁竴璧锋潵璁,鏄洜涓哄緢澶氭椂鍊欎竴骞呮彃鐢绘槸鍖呭惈杩欎袱绉嶉鏍肩殑銆(鐢ㄥ湪banner銆佷笓棰)鎻忚竟鎻掔敾:鎷煎澶氥佺綉鏄撲簯闊充箰(鐢ㄥ湪icon銆佸惎鍔ㄩ〉)鎬荤粨涓涓:鎻掔敾閫傚悎鐢ㄥ湪APP褰撲腑鐨勫惎鍔ㄩ〉銆乥anner銆佷笓棰樸佸埛鏂般乮con銆佸脊妗嗐佽儗鏅浘绛夌瓑銆俹ppo濡備綍鐢ㄦ闈㈡彃鍥 鎻掍欢鍗虫闈㈠皬閮ㄤ欢,涔熷彨妗岄潰鎺т欢,...
绛旓細涓銆鎻掔敾鍦骞抽潰骞垮憡璁捐涓殑浠峰 鎻掔敾浣滀负涓绉嶈瑙夊舰璞″寲鐨勮璁,鐢ㄨ瑙夌殑璇█灏嗚璁′富棰樻湁琛ㄧ幇鍔涚殑鍛堢幇銆傚畠鐨勫熀鏈瘔姹傚姛鑳藉氨鏄皢淇℃伅鏈鏄庣‘銆佹竻鏅般佺畝娲佸湴浼犻掔粰鐩爣鍙椾紬,寮曡捣鍏遍福,婵鍙戣捣瑙備紬鐨勫叴瓒e拰娆叉眰,鍔姏浣夸粬浠簡瑙d紶閫掔殑淇℃伅鍐呭,骞跺湪鍏剁殑杩囩▼涓鐒剁殑鎺ュ彈鎻掔敾鐨勫姖璇翠笌寮曞,鏈缁堜骇鐢熷叿浣撶殑娑堣垂琛屼负銆 l)灞曠ず...
绛旓細濡傛灉浣犳兂灏嗚嚜宸辨墜缁樼殑鍥剧墖瀵煎叆鐢讳笘鐣,鍙互閫夋嫨鈥鎻掔敾鈥濅綔鍝佸垎绫汇傛彃鐢绘槸鎸囧埄鐢ㄥ悇绉嶆潗鏂欏垱浣滅殑鍥剧墖,鍖呮嫭姘村僵銆佹补鐢汇佺礌鎻忋佹秱楦︾瓑,鍙互琛ㄧ幇鍑虹敾瀹剁殑鐙壒椋庢牸銆傜敾涓栫晫濡備綍涓婅壊 鏂规硶涓 1銆侀鍏堟墦寮鐢讳笘鐣APP,鐐瑰嚮涓棿鐨勭敾绗斿浘鏍,閫夋嫨缁樼敾,鏂板缓鐢诲竷銆2銆佸湪鐢诲竷涓婃垜浠粯鍒朵竴涓渾褰,鎴栬呭鍏ヤ竴浜涙病鏈夎儗鏅壊鐨勭嚎绋...