扁平化视觉设计,你必须知道的7个注意点

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

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

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



1.质感

| 极致扁平

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

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

图片来源@网易实践者社区

| 弱质感

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

图片来源@网易实践者社区



1.色彩

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

图片来源@网易实践者社区



2.文字

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

图片来源@网易实践者社区

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

图片来源@网易实践者社区



3.图标

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

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

| 纯线条形式

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

图片来源@网易实践者社区

| “线+面”组合形式

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

图片来源@网易实践者社区

| 剪影形式

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

图片来源@网易实践者社区

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

图片来源@网易实践者社区



4.内容展示

扁平化视觉设计的核心是追求纯粹的内容信息本质,过往界面会使用线条分隔各种区域内容,但是这样的处理会显得界面比较拥挤,同时整体信息排列也比较散乱。

使用卡片的形式呈现内容,并通过适当的留白间隔,可以减少线条等元素对内容造成的视觉干扰,可以创造出更干净、清晰的界面,让用户更专注于内容,提高了易用性。

图片来源@网易实践者社区

融入一些平面排版元素(如杂志版式),可让界面更加高端、文艺。

图片来源@网易实践者社区



5.动效

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

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

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

图片来源@网易实践者社区

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

图片来源@网易实践者社区



6.手势

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

图片来源@网易实践者社区



7.品牌应用

品牌设计是个比较大的概念,色彩、版式、质感等设计元素都可以是品牌设计中的一种。这里说的品牌应用是指在产品界面中应用到的一些品牌延伸设计,比如依据品牌定制的图形、动效等等,这些设计元素可以让用户对产品品牌有更深刻的认识,以达到品牌推广目的。

图片来源@网易实践者社区

最后的总结

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

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

最后说几个小建议:

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

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

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

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

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


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

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


推荐阅读:

设计篇

3个维度分析腾讯的设计体验。

2018苹果最新设计规范及适配整理

品牌基因法做图标(升级篇)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容