APP定义视觉风格,如何开始?

今天和大家聊一聊关于设计改版过程中一些问题,设计改版每年每个公司都会去做,大家经常遇见的问题就是在目前限制的条件下去改版,那么改版后如何让用户能感知明显,今天就来跟大家分享一个观点——设计记忆点。

一、什么是设计记忆点

我们在记住一个设计时脑海中会有印象最深的点,比如iOS11的圆角卡片、大字体,instagram的彩虹标致,双11的猫头运用、镭射色彩等等!包括最新的微软Fluent Design里面的立体关系以及投影处理,这些都是记忆点。

微软最新设计语言Fluent Design官方效果图里面运用质感、投影及高斯模糊

iOS11运用的大圆角及大字号


二、如何打造设计记忆点

在改版中,如何通过视觉元素来塑造这个设计记忆点?很多产品改版了,最终方案用户并不是很满意,很大原因是改版了用户无法感知,那么如何做呢?

1、色 彩

Airbnb的同学不难发现,16年的版本和17年版本变化很大,其中很大的一个记忆点就是颜色变化,Airbnb通过对于颜色变化,由原来的红色变成绿色来强调他们设计记忆点,再配合一些交互框架的优化以及大字号、大间距来强调他们设计调性的转变。

经典的instagram通过对logo的变化,让用户感觉到风格发生了变化,图标从拟物经典图标变成彩虹色图标,首先让用户在视觉感知上抓住一个记忆点。

在界面里通过去色,图标由面调整为线,更加轻量化,同时去掉多余的色彩更加突出内容!ins在改版过程中是怎么做到让用户感知到记忆点的呢?通过logo颜色的变化,界面的设计语言从黑色、蓝色,变成黑白灰,让用户有一个从外到内的记忆感知。

2、板式构图

在2017年双11的设计中,一个是形式open,所有元素像空中飞舞,有视觉冲击,另一个是3D立体方块、水银质感和彩虹色作为设计记忆点。

若细心的同学还记得2016年的双11,它是运用椭圆形元素以及波普的构图形式,作为设计记忆点。

3、字 体

字体也是记忆点的一个纬度,字体的变化有时候也会让整个设计有一个很好的记忆点!iOS11最大变化就是字号,通过加强字体层级,对界面中字体大小,通过对比来强调,来形成设计记忆点。

Dropbox新版本对于字体的重新设计,新的字体更加符合多场景的线上线下的运用

4、图形刻画

方形变成圆形,线的图标变成面的图标这些都是设计记忆点,只要我们把这个设计记忆点很好的落地到整个界面那么就会形成很强的记忆感知。

计算器图形由方形变成圆形

图标由线变成面

椭圆形的运用

5、质感刻画

质感变化很好理解,如何让用户感知明显很重要一点是质感的变化,比如从扁平调整为写实3D风格,例如16年双11到17年双11,变化就很明显,从原来的扁平波普变成3D波普风格。


2016年风格质感很明显,扁平化 波普的设计形成记忆点

整个质感的差异形成设计记忆点


6、辅助图形

Uber在新的品牌设计中,logo的背景根据不同国家使用不同纹理

插画是Uber新改版设计中很强的一个设计记忆点,将各个国家的文化元素提炼出对应的图案很好的将国际化特征表现出来。

中国元素的提炼

爱尔兰元素的提炼

墨西哥元素的提炼

印度元素的提炼


7、插  画

除了色彩、形状、辅助图形、质感外,其实插画也是很好的一个点,今年dropbox更新了他们设计语言,其中很重要一点就是对于设计插画的升级,以往我们记忆中dropbox的设计语言是运用蓝色商务的插画风格比较可爱,这次新的改变配色大胆且很潮,虽然褒贬不一,但也是一个能让用户感知的点。

2017新版本的插画风格

旧风格

三、总 结

今天这篇分享更多的是抛砖引玉,关于设计记忆点远远不止是我说的这些,还有很多,关键是我们如何通过设计去表现出来,哪怕你的记忆点是一根线条,像可口可乐那样,或者三道杠像阿迪达斯一样,在定义设计风格过程中,我们需要去不断寻找一些设计记忆点和线索,帮助我们在设计改版的时候能让我们的用户感知,形成视觉符号及品牌感知!

欢迎更多对Ui设计、品牌设计有兴趣的朋友可以加我微信一起讨论、交流学习。

我们的设计日记(公众号)

作者:sky

(0)

相关推荐

  • 如何定义视觉规范?(APP)

    常用的手机APP设计工具: Sketch:常用来制作线框.界面,偶尔绘制图形.MAC电脑专用移动APP设计软件.也是一款快速设计APP界面的软件. Illustrator & Photosho ...

  • APP概念设计前后那些事儿(扩充作品集)

    学UI网老虎帮的五月妹子:"很多新手UI设计师缺少项目,而想要尝试App概念设计来进行练习或是筹备作品集时,常会有点无从下手的感觉.本篇文章想要通过自己的设计经历和大家分享一些设计思路和,阐 ...

  • 阿里巴巴(1688) APP 8.0 视觉品牌升级手记

    通过对阿里巴巴APP为什么要改版,分析哪些内容需要改变,对每个改版内容的详细透析,得出最优改版方案.这一切的改版都需要从用户的角度出发,让产品更符合用户的需求. 前言 阿里巴巴副总裁.中国内贸事业部总 ...

  • 易被忽略的App界面设计细节

    谈到App界面设计,很多新手都会过于纠结界面尺寸.图标尺寸,也会在颜色.字体.间距间毫无头绪.本文将按照app界面设计流程来讲解一下,新手需要注意的细节和误区. App界面设计流程 产品定义 产品定义 ...

  • 互联网金融APP情感化体系探索

    前言 唐纳德·A·诺曼在<情感化设计>一书中提到我们更喜欢与人交流而非机器,要让产品对用户产生足够的亲切感,产品应该是富有趣味性且易于沟通理解的.他从本能.认知.反思方面诠释了情感化设计的 ...

  • APP品牌调性分析

    公司APP经过了几年的迭代,缺乏视觉设计指导方向,品牌形象不够清晰.通过最近的视觉优化,梳理了整个视觉优化过程,从多个维度分享提炼APP品牌基因的方法,进行品牌升级.本套品牌调性分析方法是由视觉推动, ...

  • App软件用户体验之七种设计技巧

    操作方法 01 别样 网络:UI设计是一个移动互联网或互联网产品的门面,设计做得好是赢得用户的第一步,因此设计是用户体验的关键.本文中我们所讲到的是移动app开发用户体验之七种设计技巧. 在过去的几年 ...

  • 三星I9500用户使用误区(省电APP.清理后台.跑分软件.手机杀毒软件)

    省电APP真的省电? 不少用户在购买手机后总会去尝试着下载一些省电软件,殊不知这样其实可能适得其反.省电软件主要通过对手机处理器降频,关闭网络,降低屏幕亮度,自动开关WIFI,强制关闭一些正在运行的后 ...

  • 微信app怎么自定义转账到账时间?

    微信转账默认是转完很快就到账了,但是如果转错账就完了,想要自定义转账到账的时间,该怎么定义呢?其实,微信转账现在是是可以设置到账时间的.下面我们就来看看详细的设置方法. 1)点开微信APP,首先点击首 ...