微信号:BestWebDesign

介绍:分享网页设计精选文章、案例、行业趋势、课程和书籍.

人人都在说的扁平化设计,真正懂的人却不多

2017-05-24 21:07 网页设计精选

作者:刘戈,网易资深设计专家

转载自网易内部论坛“网易实践者社区”


作为视觉设计师来说,能设计出一款赏心悦目、走在设计潮流前线而又有自己品牌设计基因的产品是每个人心目中的追求。


无可否认,在2013年扁平化设计风格全面普及以来,扁平化依旧是移动产品设计的主流方向。但扁平化的普及也使得产品之间的视觉差异越来越小,设计师如何把自己的产品设计做得与众不同,让自己产品于同类竞品中脱颖而出就变得尤为关键


结合实际工作经验,我将在文中简单分享下当前移动产品扁平化视觉的一些趋势,主要由质感、色彩、文字、图标、动效、手势几点进行分析,如果有说得不正确的地方欢迎大家指正,也希望对扁平化设计有兴趣的同学私底下与我多多交流,相互学习。


质感


| 极致扁平


趋向使用更轻量、简洁的方式设计界面,去除所有质感,追求极致扁平设计是当下一个设计潮流。


界面内只关注核心内容,抛开任何无关的设计元素,排除了视觉干扰,同时也使界面风格变得更加现代、优雅,工具及内容展示类产品特别适合于此种风格。


| 弱质感


过度扁平的设计对于内容比较复杂的产品来说并不利于视觉层级的表现,所以现在很多产品的视觉设计融入了轻微质感元素,既丰富了细节,同时也使内容层级更加清晰直观。


色彩


配色以简洁为主,界面中的颜色比例对比之前更加精简,更倾向于用更少的颜色进行设计,充分利用颜色对比度去突出重要的内容信息,提高视觉冲击力并强调产品关键功能,同时也可以为产品体验营造氛围,提升产品的品牌辨识度。



文字


文字信息作为内容的重要载体之一,一直是扁平化设计排版的重要环节。现在更多产品的文字设计更加趋向于使用单一字体,通过字体自身样式(加粗、中等、细体、斜体)去划分内容层次,有助于优化浏览体验,打造更加简洁、优雅的界面,增强产品的品牌属性。



偏向选用无衬线字体设计,字体线条清晰、笔触统一,避免过多的装饰性细节。IOS9专门针对中文字体做了设计调整,使用新的“苹方”字体,字体形态更粗,边角更圆润。


图标


图标是产品功能的重要标识,同时也是塑造产品品牌设计风格的核心基因之一。图标设计必须注重好辨识度与创意的平衡,太抽象的图标影响用户认知,不利于操作,太普通的图标则比较中规中距,视觉上没有亮点。


扁平化的图标主要以“线、面”两个基础元素不断地进行多种组合表现,不同的组合能产生不同的质感风格,在视觉呈现上具有一定的差异化。


| 纯线条形式


线条式图标在当今设计中被广泛应用,线条的提炼对于以前越来越精简,同时更注重细节呈现。



| “线+面”组合形式


通过线与面的搭配,让图标在保持扁平风格基础的同时融入拟物化元素,贴近实际,丰富细节。



| 剪影形式


现代设计趋势的剪影图标更加讲求色彩的对比度,同时也可以通过对形体不同的面进行拼色搭配达到拟物效果,让图标与现实物件联系起来,减少用户认知成本。  



另外,图标设计上考虑触发后的效果,可以加强情感化元素,给用户带来轻松愉悦的视觉感观。



动效


在产品使用过程中,操作动效通过视觉上的反馈可以把用户的注意力吸引到特定区域,减少用户对产品的思考,促进了任务参与。此外,产品动效在情感上可取悦用户,让用户在操作过程中感到惊喜,有利于塑造品牌设计基因。


流行的动效设计是以交互思想作为核心准则去设计,以“轻”为主,视觉呈现上要把握好合适的度,不能太刻意地随意添加。因为多而复杂的动效既影响了性能,也使操作过程变得更为复杂,极大降低了效率。一般来说,动效设计比较适合于用在产品核心功能操作、切换、使用反馈上,也可以用在产品特性介绍上。


操作反馈的动效设计,让产品的使用体验更加轻松愉悦,促进了用户的参与度,并且交互层次更“轻”



启动页通过动效的使用,让用户在等待过程中不再枯燥,也体现了品牌设计基因



手势


随着iOS、安卓智能手机的普及,用户对手势操作也有了一定的认知,产品结合手势运用能大幅度提升效率,给用户呈现更简洁、直观的体验。



最后的总结


了解设计趋势对后面的视觉设计工作有重要帮助,它能让设计师形成“审美标准”,让具体的设计工作更加有效率。


但设计趋势毕竟是带主观的分析结果,具体的产品视觉呈现还要综合产品需求定位、交互、市场运营等等因素,所以视觉设计师在设计中要学会灵活运用,不能一味照搬,选取最符合自己产品的设计方法才能更好地包装产品,突出品牌设计基因,并不断地加以优化去加深品牌设计对用户的影响。


最后说几个小建议:


* 作为视觉设计师,除了工作之外应该要多注重生活中的发现,要善于发现美。


* 当看到一个很棒的设计效果,除了收藏之外,更应该多想一下为什么。


* 工作之外视觉设计师应该勤做设计尝试,注重自我提升,不要依赖产品项目提升自己。


* 时刻了解设计行情与资讯,关注产品的最新动态,设计不是闭门造车。


* 优秀视觉设计师要有更好的发散思维,懂得针对当前流行的设计手法加以优化提炼,形成自己独树一帜的设计文化去引领潮流。


为什么工作三年,

你还是初级设计师?

“我有已经入行3年了,但还是初级设计师”

“我已经工作好几年了,但工资一直没涨”


无法突破初级设计师的瓶颈,这是很多人都碰到的问题。是身边无高人指点?是学习方法不正确?还是理论基础不扎实?


5月25日,我们邀请了网易UEDC项目组视觉设计负责人吴挺聪(葱头),他将结合很多设计师都遇到的职场问题,分享自己从初级设计师一步步成长的心得,帮助你完成转型。

Live主题:


为什么工作3年,你还是初级设计师?』



分享人介绍:


吴挺聪(葱头),阿里巴巴3年工作经验,网易5年工作经验。现任网易UEDC项目组视觉设计负责人,参与过LOFTER、网易云阅读、网易漫画等项目。


通过本次 Live 你将了解:


* 设计师为什么成长慢?
* 初级设计师和高级设计师的状态有什么不同?
* 年薪30W+的UI设计师都在干什么?


参加Live的方式:


长按扫描下方二维码,加入网易UI设计师交流群收听直播~

↑↑ 扫我 ↑↑


成为突破年薪30万的高级设计师


2015年3月,网易云课堂UI设计微专业推出,如今已经开设了第6期,迎来6000+名学员。


如今,高级UI设计微专业上线。这门课程面向具有基本设计技能的小伙伴,帮助你完成从初级设计师到高级设计师的转变,开拓设计思路,实现更易用、更具美感和更有商业价值的产品设计。



5月23日-6月1日,高级UI设计微专业正在进行新课首发,早鸟价仅需1398元,并可获赠网易UEDC内部期刊。


戳阅读原文,了解更多课程信息↙↙

 
网页设计精选 更多文章 20个明亮多彩的网站设计欣赏 这5个技巧,让你的404页面变的更加实用 字体,究竟是怎么一回事?(附案例) 整整2.5小时的干货,UI设计师从零到一百的蜕变 15个极简风格的网页设计欣赏
猜您喜欢 大数据动态追踪:Hadoop周报(4.27~5.3) The Delicious Evils of PHP 2014年八大最热门的大数据工作 腾讯云副总裁黎巍:打造真正的下一代智慧安全 PostgreSQL中BRIN和BTREE索引的比较(一)