首页

市场与用户研究基础

ui设计分享达人

前言:互联网产品都是以用户为中心,为用户服务,那么市场与用户研究对工作的重要性自然不言而喻。这是一项市场与用户研究的栏目,总计大概十个篇幅。本栏目将会对工作中市场与用户研究做一系列的整理与复盘,希望可以抛砖引玉,带给大家在市场分析与用户研究中一些经验。



一、WHAT/什么是用研?


更准确的定义是:市场与用户研究。


市场研究:是指为实现市场信息目的而进行研究的过程,包括将相应问题所需的信息具体化、设计信息收集的方法、管理并实施数据收集过程、分析研究结果、得出结论并确定其含义等。


—— 着重于产品的市场营销


用户研究:是用户中心的设计流程中的第一步。它是一种理解用户,将它们的目标、需求与企业的商业宗旨相匹配的理想方法。用户研究的首要目的是帮助企业定义产品的目标用户群、明确、细化产品概念,并通过对用户的任务操作特性、知觉特性、认知心理特性的研究,使用户的实际需求成为产品设计的导向,使产品更符合用户的习惯、经验和期待。


—— 着重于产品设计体验优化


二、WHY/为什么要做用户研究?


理解用户行为数据产生的原因


用户为什么来?为什么不来?

用户为什么留存?为什么流失?

用户为什么付费?为什么不花钱?

用户为什么喜欢A活动不喜欢B活动?



新的开发功能、新的界面风格、新的运营活动、新的品牌卖点更加贴合用户


这个真的是用户想要的吗?

这个风格是我们的目标用户喜欢的吗?

目标用户愿意参与我们的运营活动吗?

我们与竞品的差异化是什么?



产品的想法与用户的行为习惯与心理诉求


这个功能真的是用户需要的吗?

这个功能真的符合用户的行为路径吗?

......



三、WHEN/什么时候做用户研究?

我们可以听到:


“用户流失,我要做个用户研究,看看到底是为什么?”

“用户不付费,我要做个用户研究,我要找到原因。”

“用户一直活跃度不高,我要做个用户研究,找找改版的方向。”


但是事实上,我们应该

以科学的方法贯穿整个产品生命周期做用户研究。

    

1、在产品概念期,我们需要把握市场机会的判断、挖掘用户需求、做好产品概念的设计,那么在这个阶段,我们通过用户研究做好市场细分研究,估算市场价值。并且预测市场的规模,估算产品的竞争潜力。同时做好竞品的分析与研究,决定自己产品的定位与卖点。挖掘用户需求,找到用户痛点、爽点、痒点。做好产品概念测试,分析是否满足用户的需求,解决用户的痛点,找到用户的爽点,把握用户的痒点。


2、在产品设计开发期,在这个产品时期,我们需要进一步的把握目标用户的定位,设计产品的核心功能,做好用户付费策略的设计。那么在这个阶段,我们通过用户研究做美术风格的测试、核心功能的测试甚至产品名称测试,看产品在该市场的定位研究、以及进行商业化研究,帮助产品研究用户付费策略。


3、在产品的宣传推广期,在这个时期,为了更好的实现产品商业化,我们需要制定产品竞争的策略,帮助产品在市场中获得更好的变现。同时帮助市场营销部门制定传播策略,提炼产品的核心卖点。在这个阶段,我们通过用户研究帮助市场部门以及运营部门测试宣传素材、评估宣传效果、研究用户的触媒习惯以及测试用户U&A研究(使用与态度研究),提升市场营销品质。


4、在产品进入平稳发展期,在这个时期,我们需要进行持续竞争的策略制定,需要做好产品生命周期的管理,同时也要隔一段时间做品牌营销刷新。以便于更快,更好,更贴合市场。在这个阶段,用户研究需要做市场推广效果评估、版本迭代的监测研究、用户满意度的调查研究,并且需要做好流失用户研究,找到用户流失的点,做好改进。同时也要做好竞品研究,监测市场的变化。也需要做好品牌定位研究研究、用户诉求的研究以及用户情感研究,帮助产品做好迭代与更新。


5、 最后在产品衰退期,用户研究需要做再定位策略或者做好退出的计划。那么我们需要通过用户研究做好整体市场趋势研究、竞品研究、新机会的探测性调查,提供数据,帮助公司决策接下来的发展,是引流导入到二代产品?亦或是做好迎接新产品的准备?


四、WHERE/到哪里去做用研


我们可以采取线下以及线上两种方式相结合:

  • 线下

在街头进行街头访谈、或者去用户家里进行面谈或者调查纸质调查问卷的形式、到公司里进行入户访问以及在专门的访谈室进行座谈会等等。

  • 线上

可选方式更多,可以在qq群、论坛以及贴吧等平台发送调查问卷,或者在微信中直接进行语音或者视频等方式。也可以在产品内发放调查表,或者发放调查表到用户的电子邮箱等等。


五、WHO/谁来做用户研究? 对谁做用户研究?


谁来做用户研究呢?

一般来说,大企业有自己的用户研究团队,中小型企业可以外包给专业的用户研究公司,也可以进行内部设岗。

      

用户研究的对象是哪些人?

在不同的产品阶段、面对不同的问题、对应不同的目的,找到不同的人群。


1、在产品概念期,用户研究对象是通过各种维度定义出来的目标用户以及竞品用户。


2、在设计开发期,用户研究对象是围绕产品或者研究目的找到核心用户、次核心用户以及外围用户。


3、在宣传推广期,用户研究对象是把握住新进用户。


4、在平稳发展期,用户研究对象是产品的留存用户、活跃用户以及流失用户和回流用户。


5、在产品衰退期,根据策略决定需要调研的用户群体。



六、怎样做用研(How)


用户研究是为目的服务。


把握住问题六要素,是用户研究的核心。

(1)问题症状?

   • 在决策问题时遇到什么困惑,有哪些症状?

(2)用研目的?

   • 希望用研达成什么目的?

(3)决策处境?

   • 现阶段能支配怎样的资源?何时采取措施?

(4)问题假设?

   • 预计会是什么原因引起问题?结果可能会有哪些?

(5)行动方案?

   • 可能采取的行动方案有哪些?

(6)效果预期?

   • 行动方案下希望产生或者可能达到怎样的效果?


常用的市场与用户研究方法:




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:61嘀嘀
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


深度解析|流量时代私域H5营销设计的流量密码

ui设计分享达人









一、由销售演变成运营


在我看来,当今互联网行业的经营实际上与传统行业的销售并无区别,我们可以从以下两个行业的业务结构图看出,互联网行业的经营实际上是从传统行业的销售模式转变而来。



1.1 传统行业的销售

按照传统行业的业务结构可分为“采购、生产、加工、销售、财务”四个环节。一提起销售大家肯定都不陌生,指的是企业生产的产品通过销售人员的销售手段,将企业的产品卖出来兑换成货币,流入企业的财务。



1.2 互联网行业的运营

在互联网行业中业务结构还可分为“采购、PM/开发、运营、财务”。就流程而言,互联网行业的经营实际上存在着传统销售的影子,在将企业的产品(成品)转化为财务的这一环节之前,需要经历销售或运营这两个环节。


不像传统企业销售,运营不直接负责卖,更多地是负责推广。不直接负责销售,更多的是负责推广。换言之,互联网企业的产品并不直接兑换成货币,而是通过“引流、活动、转化、流失”等一系列运营操作,提升用户体验,将产品好服务卖给用户。


·引导用户使用产品:我们可以将传统销售中的初次拜访客户当作运营中的引流;

·保持用户黏性:把传统销售中的维护客户关系当作运营中做的活动和转化;

·用户流失管理:将传统销售中挽回客户这个动作当作运营中用户流失这个动作。

因此,互联网行业更加重视运营而不是销售。






二、运营设计的核心目标


在简单了解了互联网的运营之后,我们再谈一谈最新出现的一个新词“运营设计”。



2.1 运营设计并不是运营

运营设计在我看来是一个相对模糊的词汇,我能清楚地讲明白什么是品牌设计、界面设计、工业设计、平面设计、产品设计,但总觉得说不明白什么是运营设计。


比如说品牌设计是品牌,界面设计设计的是界面,而运营设计不是运营设计,好像运营设计无法用一个专业的方向来描述。


但在国内的互联网市场中,产品的运营又是一件必不可少的事情,从企业盈利的角度来看运营设计的地位不亚于UI设计和产品设计。在我看来运营设计是介于“运营”与“设计”之间的一个岗位。


·菜鸟运营设计师:多是帮助运营经理完成运营活动的投放物料,按时上线。

·老鸟运营设计师:通过较为多样的手段(合理的规划)和技能(设计感觉形式)更好地实现“用户获取&用户付费”等目的,并且在这个过程中可以“更好实现已有用户的维系”。



2.2 增长设计(海盗模型)

实际上,运营设计也被称为增长设计,一提到增长,我的第一反应就是《增长黑客》中的海盗模型,也就是AAARR模型。


AARRR(海盗模型)是《增长黑客》中最为重要的理论——用户生命周期的模型,因为这个模型和运营设计有许多相似之处,也有人将其作为业务流程的模型。运营的流程需要经历:先拉新,再促活,接着提高留存,然后获取收入,最后实现自我传播这5个环节,可以和模型中的概念一一对应上。


*对于海盗模型的知识点,我在这篇文章《一文读懂|数据好体验就好吗?—数据认知篇》里面讲过,这里我就不做过多地赘述了。


对用户生命周期AAARR模型的理解是一方面,最重要是要学会用模型中的关键数据指标去衡量活动,毕竟我们做运营设计的最重要的是以最低的设计成本来获得最大的运营收益。模型只是一种工具,对于不清楚怎么使用模型的同学,我建议看看我写的《史上最全|数据体验好就好吗?—体验度量篇》



2.3 以运营目标推导运营形式

运营经理的运营手段可谓是百花齐放,变化莫测,这里我们不展开讨论。一般运营活动属于推广这个动作,在推广的这个环节里面不会特指某一个目标,而是包含多个目标,所以对于运营设计师而言目标不能是一个,而应该多个。常规的以产品运营为核心提出来运营目标大致是“拉新、促活、回流、营收”等这四种。


如果把运营的目标需求转换成我们设计师的目标需求的话,逃不出我们常见的“用户增长、品牌传达、营销策略、商品成交量”这四个范畴。


把运营侧的目标转换为产品是为了帮设计更准确理解运营经理的需求,以目标确定活动类型、以类型快速定位适合的风格,提高运营活动质量,促进用户转化,如图


·基于用户的活动运营:如果是以用户为目标的活动,设计应该偏向于符合用户属性的风格,比如我们的用户都是年轻的用户,那在页面的设计上就应该多有“年轻化、博人眼球的、好玩有趣”等元素的呈现。


·基于营收的活动运营:如果是以营收为目标的活动,设计应该偏向活动场景对于入口的设计优化,比如Banner、落地页等物料设计。通过优化入口,提高转化率,完成产品体验的优化的目标。


·基于品牌的活动运营:如果是以品牌宣传为目标的活动,设计应该偏向企业品牌形象的树立以及传播,把产品的特色传递给用户,与其他竞品拉开差距,提升自己产品的核心竞争力。





三、私域的精细化运营

与运营有关的“私域”这俩词,最近火得不行,哪里都可以见到。为什么互联网企业这么重视私域的运营呢?主要是因为在互联网时代,大家都认同有了私域流量就相当于有了盈利这个观点。


3.1 什么是公域运营

首先我要简单地描述一下什么叫流量,流量的本质就是指用户,但是“用户”这个词过于抽象了,常常都用阅读量,粉丝量,点赞量,播放量等这些数据维度去衡量流量的体积。


打个不恰当的比喻,流量就像是一条河,如果无人管理的话,那就叫公域交通。您在河边挖一条水沟,将河水引到自己事先制作好的蓄水池里面,这个蓄水池里面的河水就叫做私域流量。


3.2 什么是私域流量

如上例所说,我们将能够自主运营的流量或用户(蓄水池),可以反复触达、“骚扰”、交流,获取反馈的流量统称为私域流量。典型的产品形态有微商、拼团群、朋友圈、微信公众号。私域流量相对于公域流量来说,是一种更精准,更容易被转化的流量。


简单的理解就是可以为所欲为的流量,比如我在我自己的微信公众号里面可以随意地删减用户的评论,典型产品形态有微信公众号、微商、拼团群、朋友圈等。


如今许多互联网产品都是私域流量与公域相结合的产品,比如说大家经常使用的站酷这个平台,如果我发布的作品没有上首页的推荐,只会在我的个人主页展示,获得的粉丝就属于私域流量;反之我的作品获得了首页推荐,在站酷首页展示,获得粉丝增长量就属于公域流量。


许多企业老板都明白这样一个道理“用户在哪里,私域流量就在哪里,生意就在哪里,企业的盈利就在哪里。”因此,企业老板们都希望把公域流量吸引到自己产品的中,成为私域流量,这样企业的流量即相对公域流量而言更加可控、高效、精准,后期盈利也有保障。



3.3 精细化的运营模式

正是因为许多企业开始注意到私域流量的重要性,互联网从之前的流量粗放运营模式,逐渐变成用户精细化运营模式,这是流量思维到用户思维的转变。精细化运营简单理解就是基于庞大的数据分析,让企业的产品为不同的用户推送不同的运营内容(或者是用户感兴趣的内容)。


提出“精细化运营”这一个概念行业里面最早最有名气的应当是号称一分钟出8000张Banner的鹿班平台,鹿班平台最大的意义不在于取代设计师这一个岗位,而是阿里巴巴在精细化运营的第一次尝试,为不同的用户推送自己所需要的商品内容。当然了,除了鹿班平台京东集团也有羚珑营销内容创意平台,有兴趣的同学可以查看一下。


在精细化运营中还有一个很专业的名词叫“千人千面营销策略”,这个营销策略的概念是指每一个用户看到的每一个内容都是不一样的,仔细想想这是人力所不能及,只有AI的大数据才能做到的,例如用户A的收藏夹是衬衫品类比较多,那淘宝Feed流推送的商品衬衫比重会多一些,用户B的购物车首饰品类比较多,那产品中推送的内容珠宝首饰占多数;用户C喜欢电子产品,那么产品推送的将会是电子类产品比较多。





四、了解运营设计师的工作内容

在公司里,产品体验设计师(又被称为界面设计师、UI设计师)在公司中扮演着美化产品的角色,随着互联网行业的业务扩张、人才涌入后会把UI设计师这一角色进行更加精细化的分类,在互联网企业中会把设计师按照工作内容进行两种类型的分类,分别是产品体验设计师和运营视觉设计师。



4.1 产品体验设计师

工作职责:产品体验设计师的工作职责,主要以提升产品功能体验为主。在分析产品逻辑和交互逻辑后,从视觉层面把控产品界面设计,并通过视觉设计高效传达有效的信息,并制造出愉悦的用户体验。

设计工具:Figma、Sketch、Axure、问卷工具等。



4.2 运营视觉设计师

工作职责:运营设计工作职责是在短期内达成提升相关运营活动的指标。他们以运营活动设计为主,运用视觉语言吸引用户参加对应的活动,加深用户对产品的印象,从而促使用户参与活动,完成活动中完成引流、成交、复购、传播等行为。

设计工具:PS、AI、AE、C4D等。



4.3 运营设计师需要具备的能力

运营设计师的主要工作内容就是协助企业中的运营经理做好产品的用户运营、内容运营、产品运营和活动运营。运营设计师应该参与到运营活动的策划中去,帮助运营经理想一些更有趣更好的设计策略,并且在这个过程中更好地提高自己的运营策略、数据分析、文案能力和视觉表现能力。


4.4 运营设计的工作范畴

运营设计师这个一个岗位更多的是内容驱动型(音乐、视频、教育应用等)、交易驱动型(电商、o2O服务等)产品中。它的工作范畴是一个很繁杂的事情,不仅需求数量大而且频率高,最繁杂的一点是需求种类比较多,比如有广告位Banner、专题页面设计 、活动专题、Icno图标等内容,并且需要批量处理的各种资源入口图,线下活动的海报、印刷物料等等。










如今运营活动可谓铺天盖地,手机端也能经常见到各大企业产品的优惠活动设计,比如活动图,落地页,优惠券,战略楼层等设计。国内的运营设计推广形式多以落地页(H5)的形式帮助企业做推广企业产品或者树立企业形象的活动。


由于,这类狂轰滥炸式的运营活动,让用户倍感无味,致使运营活动流量不高,设计师在实际的工作中往往会遇到以下三类问题,导致我们的运营活动流量不高,达不到预期的运营目的,如图





一、用形式解决内容过长问题

近些年在市面上落地页的推广形式多以长页面为主,比如电商的推荐页、商品的宣传页。由于企业想要表达的内容过多,使落地页的长度越来越长,这种形式虽然可以更全面地介绍商品优势,但是在快节奏的互联网市场,用户自然会觉得很臃肿。


针对落地页内容过长,视觉呈现不佳的问题,我们最快能想到的办法就是删减字段,但是如果运营经理不同意删减字段那怎么办?因此,删减这是一个办法,但不是最好的办法。


既然不能删减,我们不妨换个思路来解决这个问题。刚刚谈到内容过长导致用户感觉臃肿,感觉臃肿的核心所在是“内容”对用户没意义,按着这思路延展下去解决问题的关键在于“突出重点”,这里我提供四个方法帮助大家解决困扰。



1.1 优化头图的尺寸

许多设计设计师由于没有考虑清楚手机到最终的预览效果,导致很多重要的元素出现在低活跃的区域 ,用户第一眼看不到能吸引自己的内容,从而失去往下滑动了解更多内容的动作,造成运营推广的效果大打折扣。


因此在设计这种长图时要事先考虑好首屏要呈现什么内容,一般的运营头部高度一般定在600px-750px左右,如果是内容较多的话,我建议把头图的高度控制在460左右,这样可以促使用户在首屏看到更多的信息,引导用户有兴趣向下滑动,用户的点击率也随之上升。


1.2 手机海报的表现形式

除了缩减头图的高度之外,实际上利用海报宣传的方式进行设计也是可以的。在朋友圈或其他社交平台上经常看到这种带有二维码的宣传海报,用户通过扫码直接进入运营活动中心。


这类海报形式有着短小精悍,言简意赅、便于传播的优点,是一种提高运营活动流量很好的表现形式。



1.3 九宫格拼图的表现形式

虽然现在是抖音的天下,但是这类九宫格拼图的表现形式,在微博(微信、微淘)如日中天的时代也是风靡一时的,这里提出九宫格拼图的形式也是给大家提供一个思路,是否采用还需要考虑企业主要运营的平台。



1.4 闪屏的表现形式

闪屏这种表现形式虽然点击率并不高,但是一种很好蹭热度的方法。对闪屏的设计,设计师只需要思考好用什么呈现表现形式为闪屏物料注入新的活力,例如用下面这种只突出主体物和标题的表现形式,把内容更加精简、准确地传递给用户,这种表现形式就很好。





二、了解兴趣低的原因

在第二部分里,我想分为4个模块——了解兴趣低的原因、用形式提高用户兴趣、让标题文案更加突出、用猎奇心理引起用户兴趣,来谈一谈我对“用户兴趣”的理解。


2.1 解决用户兴趣的方法

早期的互联网产品以工具为主,例如百度就是用来搜索的、QQ就是用来聊天的、淘宝就是用来买东西的,这些产品呈现的感觉都以简洁清晰为主,但随之互联网越来越普及,娱乐产品出现与工具类产品越来越多的差异性趋势发展,尤其对于运营设计,简洁清晰变得没那么重要,个性、趣味才是占据主导。想要运营设计做得让用户有兴趣,不妨试一试我下面所说的四个技巧。



2.2 为什么要“动”会引起用户兴趣

以图片+内容的这种展现形式在市场出现很久了,对用户的吸引度不免有减弱的趋势,在这一阶段我们需要寻找一种更加有趣的形式来吸引用户。


兴趣可以用更为科学的方法“注目度”来解释,当我们眼睛在看到某一个事物的时候,大脑会根据事物的形态给一个由“强”到“弱”的排序,去支配眼睛去观察事物,如下图所示,我们可以直观地看到“动画”这个类目是排在前面的。大部分用户在看到运营活动内容的精神状态(注目度)是分散的,所以要抢占用户的时间,设计用户第一眼的吸引力。




三、用形式提高用户兴趣


3.1 加入更多的动效

根据上面的结论,在提高用户兴趣这个问题上,我们完全可以增加展示效果的动效来做到,很多产品也是这样做的。


比如今年拼多多的Banner上,做了一些标题旋转、优惠券飞出的动画效果:

  


像京东购物节中做一些开场的动画效果:

  



在活动流程上面的动效,比如在一些抽奖环节模拟真实物体的运动轨迹:

  




在图标或者标签上面加一些位移、渐隐渐显的动画效果:

  


在一些弹窗上面加上一圈光效,也是一个不错的选择:

  


如今在运营活动上加入更多的动效是设计师必备技能之一,最常规的就是把画面中的某一个元素变大,像是下面的按钮,采用放大缩小的动效。

  


或者是按钮旁边加上一个手指的元素,也可以起到吸引用户的目的。

  


元素围绕主题物周边沿着运动轨迹活动。

  


关于动效的案例,这里我就不一一举例说明了,大家可以登录蚂蚁设计服务平台 - 犸良这个平台获取灵感。



2.2 以静制动

对于不会动效软件的同学也没有关系,也可以着重对画面的张力进行设计,以静至动,以下我就分享几个以静至动的方法。


·元素之间的动势:合理的运营元素之间的组合关系可以营造出有动的感觉,如果单单放一个开飞机的场景可能并没有感觉在飞,但如果加上飞翔的红包、模糊的背景,那就感觉真的在开飞机。


·有力的指引力:如果单单地放一张优惠券,不会产生吸引人的观感,但设计四只手从四个方向争抢的画面,就会感觉画面有力量有争抢的感觉。


·以破形产生动感:画面中从左侧设计一张卡片,远处门的入口塑造的,大胆地破形处理,很容易营造出一种动态感觉。


·夸张的构图设计:当然了不同的视角和构图也可以让画面感觉生动,如下面这样的构图就会给用户营造出一种画面外还有画面的感觉。


·营造运动画面感:下面这套海报采用硬朗的直线和运营动作的完美结合,通过营造强烈的运动感给用户传达动的感觉。



2.3 视频推广的形式

由于短视频领域的兴起,朋友圈中转发视频的用户也日益增加,如果设计师可以给运营经理在以视频形式进行运营活动的推广的需求上出谋划策的话,也是一个很专业的设计师了。





四、让标题文案更加突出


造成用户不感兴趣的原因还有可能是信息传递效率不高,用户无法通过标题知道这是什么活动,怎么可能引起用户的兴趣而点击?

标题的文案可谓是用户判断信息的首要思想要素,他能迅速让用户了解活动主题,传达活动兴趣点,激发用户参与。


4.1 选择识别度高的字体

设计师是一个创造美的职业,但是也要有取舍,在我看来漂亮固然重要但高效的信息传递更为重要,尤其是在运营活动的标题设计上应该尽量选择一些识别度高的字体,先让用户清楚地知道该活动是干什么的,再用特殊的技法去吸引用户点击。


在标题字体上我比较推荐使用无衬线字体,因为黑体去掉过多的衬线装饰,是横平竖直,笔画粗细均衡,使字更为精练并且醒目。例如下面这张效果图,都是在黑体的字体基础上做的设计,光看标题就可以清楚活动大致是个什么类型的了。



4.2 给字体加点效果

如果觉得以上的方法并不能给用户起到视觉冲击力的效果,不妨给标题的字体加一点效果图,比如立体效果、加装饰物、更改字体结构等等,如图

我推荐一个我自己作图的习惯,就是先做标题文案的样式设计,再做配图元素的设计,我觉得这个方法既可以突出标题文案字体设计又很高效。博大精深,有机会后期会写一篇字体设计的文章,敬请期待吧。





五、用猎奇心理引起用户兴趣


以下内容不算是设计技法的内容了,算是运营思维方面的小窍门,我认为身为运营设计师,还是有必要知道的。



5.1 倒计时营造紧张感

如果在手机海报的表现形式上,加入以下这种“倒计时”主题,有助于激发起用户期待感和代入感,起到事半功倍的效果。


5.2 明星的效应

如果活动中有明星素材可以使用,千万不要放过这个机会,因为明星自带流量和话题,也是吸引用户兴趣,提高流量的好办法。


5.3 节日的热点

一年中有很多节日或者节气的时间节点,这些时间节点自带吸睛功能,可以把他们当成借势营销的主题,有的放矢地制作活动宣传图,增加曝光度,保证营销的新鲜度。


接下来,让我们谈一谈第三个问题——用户审美疲劳。









随着市场上充斥大量运营活动,对用户来说不免会造成审美疲劳,而用户出现审美疲劳的情况也是造成运营数据下降一个重要的因素。



一、了解什么叫审美疲劳


1.1 审美疲劳的概念

所谓审美疲劳,源于一个经典的心理学概念——刺激适应(Sensory Adaptation),就是用户长时间接触一种类型或者表现形式的事物而产生的厌倦、麻木的心理,最终都会被“适应”(即令人无感觉)。


这里我列一个例子,比如每天打你一棍子,你当然很不爽。但是连续打你一年后,你并不会感觉到不爽了,因为它变成了你生活的一部分,你已经没有感觉了——这就是刺激适应。


1.2 为什么会出现审美疲劳

审美疲劳的出现,有其客观必然性,多数情况造成用户审美疲劳的原因可以分为两种:


内容上眼花缭乱:是指一方面市场的运营活动太多,另一方面是活动内容让用户提不起兴趣,久而久之自然就会产生审美疲劳的心理。


时间上的心生厌倦:这是人正常的心理状态,当人从外部获得了幸福感(升值、金钱、美食)多会随着时间的推移最终回到基础水平。

这里我列一个例子,比如刚收到名校录取通知书的大学生,感觉到幸福感爆棚,但也最多持续几个月——等他入学后,日复一日地上课下课和高中生活一样,慢慢地觉得索然无味。



二、审美疲劳的解决方法

对于内容让用户提不起兴趣这一点,我在前一章我已经阐述了自己的观点,这里不做过多赘述了。但是我们可以就“时间上的心生厌倦”这一问题出发,来讨论设计方面的解决方法。


在我看来设计侧的解决方法其实就一个词——新颖,我总结设计师可以从以下5个方面着手进行设计方案的确立——夸张视角、细致刻画、多种风格、故事性、游戏化。



2.1 设计一些新奇的视角

这种方法属于吸引眼球而追求的形式上的“奇特”,比如我们看看第一幅设计稿(植美村的页面),夸张的鱼眼大透视配合风格感十足的原画级页面,至少第一眼就把我震撼了。


或者以微观视角看世界的视角去做设计稿,比如说OPPO的运营图设计,正常视角中人永远都是比手表大的,但如果反过来去观察,就好比自己像是一个小微生物去观察这个视觉,会给用户一种很新奇的感觉。



2.2 把刻画发挥到极致

形、色、质、构是搭建一个画面的基础,其中质感是拉开差距的关键,它是细微的,往往有质感的视觉感受会给用户一种高级的感觉,吸引用户点击或者是向下滑动浏览更多的内容。身为设计应该更专注于自己观察方法和技法的提升,一个图层达不到想要的效果,那两个图层呢?那把其中一个图层的图层样式调整成“正片叠底”呢?


质感虽然是一个相对抽象的词,但是做出质感并没有想象中的那么难,最重要的就是有耐心多做一些层次,如下图,不管是以文字或者图像为主形象的效果,都是因为考虑了字体变形、字体结构、投影、高光、色块对比等细节,才会让整体的效果给人一种很有质感的感觉。


*设计技法的提升是一个很漫长的过程,比较注重于直觉和感性的认知能力的培养,要多观察、多尝试,要相信自己总会有成功的那一天的。



如果你会3D类型的软件那就太好了,因为3D类型的工具最终呈现的画面本身就带有空间关系并且由于可以渲染不同种类质感的材质,画面天生带有一种质感,比如下面这两张图如果单单地铺上一个大色块点缀一些图形元素和3D类型的作品对比来看,质感还是差一截子。左侧是质感相对较弱的落地页,右侧是质感较好的落地页,如果你是用户的话,你会点击哪个?又会向下划动查看哪个呢?


并且现在的移动端设备的性能都有提升,并且5g的技术也在市场中出现,以前的3D场景加载卡顿的问题也逐渐在消失,我们不妨事先在运营活动中多加入一些3D的效果,来博取用户眼球。


就目前来看视觉观感偏向越来越立体化,而不是简单的平视扁平效果,以下这种成系列的设计稿,是深受用户所喜欢的,并且成系列的设计稿,也很容易让用户产生记忆点,是一个我非常推荐的做法。



2.3 多种风格的探索

为什么要做多种风格的运营设计呢?从设计美学的角度上来讲,用户的审美性质在发生变化,由过去“专注式”的审美在强大的信息流影响下变成娱乐式的“快餐式”审美,所以做多种风格这是适应市场趋势的必然结果。


每个企业的目标并不是为了用户设计出更好的视觉作品,企业的目的是在于用“创意”快速吸引用户眼球。有点儿像是铅笔和钢笔的关系,不是为了最好的铅笔而是钢笔,而是为了设计出可以代替铅笔的钢笔。


例如下图中的描边MBE风格、孟菲斯、噪点插画、复古等风格都可以运营到设计中。


今年大火的酸性设计(最早出现在西方60年代迷幻摇滚(Aicd Rock)文化中)是一种打破传统美感的设计,暗调的背景和镭射材质的素材搭配镂空的字体设计,在视觉感受上制造出一种迷幻绚烂的氛围,特别适合用在一些需要体现“潮流、新锐、个性”的视觉设计中。文章结尾我也给大家准备了素材,需要的去获取吧。



2.4 有故事性活动延展

大多数用户都喜欢听故事,在故事中包装自己的产品,告诉用户可获得什么好处的这种方法也是提高运营活动的数据的一种好办法。


这种形式早在2017年的offo就有用过,当时ofof的产品有借助于《神偷奶爸3》中小黄人的形象,设计了一系列新的自行车造型,以一系列报纸的形式设计,以小黄人车潜入车间为主要故事,了解 OFO小黄人版是如何造出来的,某种程度上说很好地宣传了 OFO。


例如《德芙Dove x故宫》的H5项目中,用长卷的表现形式绘制了从清朝至现代的过年场景,意指“以前宫里人也吃德芙,现在将德芙的福气传到千家万户”,让用户眼前一亮的同时,也宣传了企业产品。


《当代清明上河图》,快手品牌宣传H5项目中,设计师将现代与古代结合,通过长图绘制生活百态,用不同的故事来讲述励志故事和暖心故事,是故事性宣传企业品牌的经典案例。



2.5 活动ip的游戏化

用户对简单的商品宣传(运营活动)是没有什么兴趣的,但是如果把运营活动包装成一个游戏,却能俘获用户的芳心。很多企业正是抓出用户的这个心理,在自己企业的ip形象上做足了功夫,阿里巴巴集团就是这样一个典型的企业,只要是过节,ip形象总能参与其中发挥其最大的商业价值,是典型把ip形象加入运营活动游戏化的企业。


每年支付宝都会有积攒5福的游戏,在2021年他们还升级了自己的ip形象,让用户体验更加升级。ip形象的游戏化,未来也会成为一个趋势,每年应该都会有吉祥物来送钱。




三、构图好就成功了一半

画面清晰、构图合理应该是做运营设计的第一准则,尤其是大家都审美疲劳的今天,有一个好的构图,可以起到事半功倍的效果。


接下来我就介绍运营活动中常用的四种构图方法,便于大家在工作中有规律有节奏地排版画面上的图形、文字、元素之间的关系。



3.1 上下构图法

“上下的构图法”是将布局分成上、下两个部分,或使整个画面元素呈上下分布的趋势,主要信息(标题)常常融入图片中,放在主空间成为主体,阅读性文字放在次空间,这种构图的特点是内容的冲击力比较强。



3.2 左右构图法

“左右构图法”是占据图片和文字的一部分,形成左右两个独立的空间,产生良好的阅读体验。很实用的一种构图方式。这种构图的特点所占图幅较小,但要求文案的数量需要精简,尽量不超过6个字。



3.3 三分构图法

“三分构图法”是将画面中的内容三等分,并突出c位的信息,旁边有装饰元素围绕增添画面的气氛,具有稳定性又可以避免使用中心构图形成的呆板感。



3.4 中心构图法

“中心构图法”是把主体放置于画面视觉中心,形成视觉焦点,再利用其他信息烘托与呼应主体。其特点是能够突出重点信息,让用户一目了然。



3.5 对角构图法

“中心构图法”是指对画面进行等值分割,并将所要表达的信息对角排列。这种构图方式,会让页面显得更灵活,有动势,让画面有更多可能性。



3.6 倾斜构图法

“倾斜构图法”是版面整体或部分元素以倾斜的角度呈现在画面上,能很好地营造出轻松、动感、刺激等气氛感,一般游戏类活动也会比较常用。









好的运营活动会为企业带来可观的短期收益这是众多互联网企业所认同的,也是每一个企业所需要的,以下是我对运营设计的一些经验心法,希望对你有所帮助




一、如何最大限度地规避返工风险

对于设计者来说,最苦恼的是改稿,特别是那种做许多叠加质感光效的效果图,改起来成本很高,改稿这件事对运营设计师来说可以说是最头疼的事。


针对这种返工改稿的情况,我个人认为问题多数出在“沟通”这个环节。在沟通环节中最要解决的核心问题就是要进行有效的沟通,如果需求方(运营经理)和设计师之间的沟通是无效的,改稿那是必然结果,下面是我对于“高效沟通”上的3点经验。



1.1 明确项目的目标

身为设计师的你遇到一次两次交付后要改稿的情况倒是没有关系,有些协同的同事是初次合作,难免有些观点不对齐的情况,这属于正常的,但是经常遇到这种情况就要引起重视了。


需要反思一下是不是自己对项目的目标没有搞清楚,在做项目之前我建议直接让需求方说出痛点,多问问目标用户群体是谁?投放平台和渠道是哪些?上线时间和排期?尺寸大小等问题,把目标明确下来。


1.2 从抽象化到具象化

人和人受到教育不同,理解能力是不同的,有的需求方上来就说了很多概念词汇,比如我希望这次运营活动是高端、大气、上档次的,这很难让设计师正确地理解。


对于这种情况,我建议找一些可用的真实案例给到需求方,将抽象的概念具象化,事先搞清楚需求方心中的画面是什么样子的,特别是要明确设计风格、配色方案、背景元素、图文板式结构等信息。



1.3 提前弄清楚运营活动的要求

关于版权的问题是有可能导致项目无法上线的,我之前的一个项目就因为C4D这款软件侵权收到了一份律师函,需要将带有3D效果的在线元素全部替换。


因此在项目启动前可与需求方确认有关字体版权、图片版权、软件使用权等问题,避免在效果图出来后再去调整,耗费公司人力成本。



1.4 除了沟通还应该设立审核环节

这个并不属于交流的范畴,但是我觉得他也是影响设计师反复改图的重要原因之一,还是有必要说一下的。


运营活动上线都是有明确时间节点的排期安排的,所以设计稿审核的环节要特别重视,尤其是大型的运营活动不要等到最后的环节再去审核,因为如果审核不通过有可能会重新做,所以在设计过程之中应多设立几个审核环节,保持和需求方的想法是时时同步的,千万不要等交付时间快到了再进行审核,到时候谁加班谁痛苦。详细审核环节设置,大家可以参照下面的图片:






二、运营设计其实也可以增效

“增效”这个词近几年火得不行,尤其是和老板说增效的事情,他会非常感兴趣的。以下是我亲身经历的一个项目,也正是从这个时候开始,我开始思考团队增效的事情。



2.1 明白运营经理想要什么

以前遇到一个运营活动落地页的项目,需求方说;“我们不需要绘制复杂的插画放在Banner里,简单画点喜庆的元素,把活动标题展现清楚就好了,设计同学也不需要花那么多时间来设计,你们能多久给到我呢?。”


我相信有不少小伙伴曾经遇到过这个情况,通过以上案例,不难看出设计师想要的跟运营经理想要的并不一样。大部分运营经理更在意的是文案的露出、能多快地交付;而大部分运营设计师更在意的是图片美不美、炫不炫,整体的图形表达最终给用户的感觉是否和设计师所想的一致。



2.2 增效的两种方式

在理解了运营经理他们所在意的事情之后,我发现针对有严格交付时间的运营项目而言,运营设计的增效是很有必要的。一般来说“增效”有两种方式,一种是提高输出效率,另外一种是降低人工成本。


提高输出效率:我知道在行业内,58集团自主研发的运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器算是两款增效的工具,这两款工具为运营工作提供高效且高质量的输出环境。


降低人工成本:我相信大多数同学的公司是没有这类平台资源,不用担心,没有我们可以自己搭建简略版的组件代替,比如公司里有些运营活动要跟上新闻热点,如果我们事先做好3-5个尺寸一致的模版套件,当新闻热点来的时候只需要插入图片更新标题就可以先推送出去,这种做法会极大地降低设计师的制作成本。


再比如组内成员可以利用平时的工作时间做一些通用的组件如红包、优惠券等,在要求快速完成运营活动的时候,可以挑选风格合适的样式替换。





三、做好运营需要了解用户心理

纵观市场,会发现大部分设计师都是作图高手,那些能够在前期参与策划运营活动,帮助运营经理想一些更有趣好玩儿的idea的人才是凤毛麟角的。



3.1 需要有正向、反向思考角度

记得看过一次求职类节目,一位求职者推销颈椎治疗仪的案例让我印象深刻。因为他的推销过程很精彩,他用了两种方法去推销产品。


第一种思路:介绍产品的优点,表示你买了我们的颈椎仪脖子的酸痛问题会得到缓解。

第二种思路:如果你不买我们的颈椎仪,你很有可能因为颈椎不舒服而失去良好的睡眠质量。


当然那个应聘者也得到了心仪的企业offer,那时候我就觉得这位应聘者很聪明,聪明的点在于对犹豫不决、不想买的用户都设计了自己的对策。


对犹豫不决的用户来说,通过正向介绍产品优势,从而获取用户青睐;对于不想买的用户则利用反向思维讲述这个产品会和你睡眠质量有关系。


设计师是一个很重视用户同理心的一个职业,当我们越是了解用户的想法,就会知道用户最需要什么,做的设计也就能更好地贴合用户需求,最终完成提高运营活动的数据的运营目标。



3.2 触发点击行为和用户心理有关系

2009年,斯坦福大学行为科学教授福格(Fogg)提出了一种人体行为模型,简称为 FBM。根据这一模型,他提出促使一个人的行为的发生离不开三个因素:行为动机(Motivation),行为能力(Ability)和触发条件(Triggers),用公式表达就是B=MAT。用户行为的产生需要动机、能力、触发等有机结合,通过对动机、能力、触发等干预可以影响使用者的行为。


引发用户点击行为,本就是运营设计师必须要做的事情,但是触发用户点击这个行为就要洞察到用户心理所想。这里我推荐《飞书官方-认知偏差知识手册》,大家可以从这本书里面了解一些用户基础的心理学知识。


这里我还想补充一点,设计师为什么要学习心理学。如果有人问你设计是什么,很多人都会回答设计就是解决问题,这是一个很标准的答案。在我看来,设计解决两个问题,第一个就是实现,把以前没有的东西做出来,第二个就是推广,把已有的东西卖出去让更多人知道。很明显运营属于第二种。


但是需要大家注意的是主语,上一句话的主语是“设计”而不是“设计师”。设计师更像是一个翻译官的角色,其本质在于精准地表达,设计师利用擅长的图形、色块等元素给用户传递信息,比如说格式塔原理就在于能帮助设计师,清晰地规划出用户先看到什么,提早预测出用户看到这张图会产生什么感受,做到可以通过设计技巧,让用户感受到设计师想传递的信息和感受,这就是我们要学习心理学的原因——为了更科学地了解用户使用习惯(如格式塔原则可以科学地构建效果图的阅读顺序),做贴合用户需要的设计,让用户满意,从而完成盈收的运营目标。总结一句话,运营设计师不仅要询问用户想要什么,更要询问运营经理想表达什么。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:斜杠7湿兄
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




干货迟到了,职场的一些理解

seo达人


第一个问题:薪酬背后的竞争力究竟是什么?

不拉仇恨,但我的薪酬很不错,那这薪酬背后的竞争力究竟是什么?是我的视觉?创意?交互?管理?认知???诚然我的设计能力不错,但事实上大部分的业务方并没有很高的审美、绝大部分业务需求也用不到这么牛逼的体验思路。事实上,哪怕离了三鱼,这里的业务照常运转,对业务来说我的设计能力强弱并非决定性甚至算不上至关重要的因素,尤其是在B端。小伙伴们大概猜到了,决定我薪酬的不仅仅是业务方,更多的是设计团队的决定,而我对设计团队的价值,一定不止是搞定业务方这么简单。就像前面说的,支持业务需求迭代对设计的要求并不高,所以单凭这一点是不足以支撑起高薪酬的,毕竟互联网公司再有钱,这钱也不是大风刮来的。那么这个团队究竟是在为我的什么能力买单???视觉?创意?交互?管理?认知?还是说帅气的外表???我直到最近才慢慢想清楚,可能是我具备能为设计团队讲出一个好故事、进而帮团队争取到更多资源的能力。

这大概是三鱼微微想明白的一个游戏规则,它甚至不仅仅适用于职场,只要我们参与社会分工,就无时无刻不在进行自我推销:推销自己的能力,你就能得到一份工作;推销自己的观点,你就能得到一群信众;推销自己,你就能找到另一半(Maybe)。而前面说到的“讲一个好故事”,在我看来就是一种很高级的推销方式。

先举几个例子:

在品牌领域:宝马宣扬“驾驶的乐趣”,并用富有活力、运动感的宣传片塑造品牌,从而在一众高端车中打开了市场;奥妙宣扬“脏是对的”,并用一个个衣服脏了但换来了快乐体验的案例来塑造品牌,从而在一众强调去渍能力/不伤手的洗洁精中独树一帜。

在销售领域:从食品原料的采摘到最后送入口中的全环节,销售人员展示出一个绿色安全无公害的产品生产故事,赢得了高端消费者的信任。

哪怕在感情领域:同样是表白,“执子之手与子偕老”会比“我爱你”更有诚意,因为它描绘出了让人产生画面感的场景,从而使情感表达更容易打动人。

甚至大到国与国之间:“碳中和”、“人权” 也是用故事为外衣,包装经济、政治目的(不展开)。

再说说我们自己:“海洋保护”我们耳朵都听起茧了也没啥触动,但看完《海豚湾》之后,三鱼甚至产生了成为海洋保护志愿者的冲动。

比起说教,故事的杀伤力显然要强大得多。那么说回到一个公司的设计团队,它想要获得更多的话语权、更多的资源倾斜,就必须让公司乃至行业看到自己的价值,比起直白地表述,通过一个个设计故事来传达价值,显然是更高明、更容易被人接受的。而由此设计团队就可能获得更多的资源倾斜,进一步发展壮大。所以你会发现,对设计师而言,讲好故事是比支持好业务更高维度的要求,因此我的总监对设计质量的要求会远高于业务需求,因为他需要靠一个又一个的好故事,为设计团队换来更大的话语权、更多的资源倾斜,这样才能让整个团队活得更好,而我们的设计产出就是他的故事素材。

所以说到底,我的总监所看中的也许正是三鱼能在支持业务需求的同时为设计团队讲出好故事或者产出能让设计团队讲出好故事的必要素材。这便是第一个问题的答案:我的竞争力来源于我能讲出一些特别好的故事,这些故事不仅能把我的视觉、创意、交互、管理、认知能力直观地推销出去,也能为整个设计团队搏出更大的发展空间。

 

第二个问题:怎么定义好故事?

三鱼认为:能让人直观感受到业务价值以及你/团队不可替代能力的故事就是好故事。下面我先列举一下互联网公司常见的两类体验设计领域 (运营和品牌又是另一套玩法下次讲) 的故事形式:

1. 深刻的设计思考

顾名思义,这一类故事着重从设计能力的不可替代性发力,也是三鱼最推崇的一种方式。这一类故事具体又分为三种:

a. 主导某产品3.0以上的设计改版工作

如果你能主导某产品3.0以上的设计改版工作,那么你就很容易讲出一个好故事,通常一个产品发展到3.0以上,一方面功能已经铺设完善,有富余的开发资源愿意投入到体验打磨上,另一方面它已经具备一定的用户基数,你的设计方案可以靠数据进行直观验证。所以主导一个产品3.0以上的设计改版,可能算是体验领域最黄金的机会了。但这样的机会往往凤毛麟角,姑且不论一个产品走到3.0所需要的时间和几率,单你能否主导它这件事,在大公司就是一门玄学…3.0改版产出的故事,在业务价值和专业不可替代性上都容易讲好 (不排除有人专业能力实在拉垮的可能性)。但缺点就是这样的香饽饽,你抢得到吗?守得住吗?至少三鱼工作到现在也就遇到过一次,噢不,半次…

 

b. 设计自驱

既然大型项目的改版机会很难得,那么很多设计师退而求其次,开始“设计自驱”地发起项目,本质上是自己主动创造机会,这其实是一个很好的思路,主动挖掘设计机会是三鱼很推崇的。但据三鱼观察到的事实是,有相当大一部分设计自驱仅仅停留在“打补丁”式的创新,就比如“我们经过一系列专业的分析,决定把直角改成了圆角/把色值调亮15%,最终使得产品DAU上涨了1.5%,这次自驱取得了圆满成功”…这类自驱产出的故事在专业上勉强能讲讲,但在业务价值层面就比较单薄了。

 

c. 设计/业务创新

本质上它也属于设计自驱,但要求设计师有更高的业务视角和专业技能,能敏锐地在行业中找到新的赛道,并针对新赛道中的人群定义出完整的体验流程并把它推动落地。设计/业务创新产出的故事基本都是好故事,而且在新场景没打开之前也没人和你抢。但对设计师的专业能力、调动资源的能力都有较高的要求,并非人人都能把握住。

 

2. 庞大的项目体量

那我再来看看第二类故事形式,依靠体量讲故事的一般是在展现自己在资源调度、团队管理方面的不可替代性,讲这种故事的往往管理者居多。在体验设计领域,最有代表性的就是我们所熟悉的“主导设计体系落地”这类项目,为业务降本提效是这一类故事的卖点,衡量价值在于它能覆盖多大的业务体量。但因为设计体系是一个很虚的概念,两套设计体系之间也很难分出优劣,真正能把所有设计/业务团队统一在一套设计体系之下靠的不是设计本身,而是实权。既然这是一种只要权力(或背后的权力)满足条件,就能讲好的故事,那么这种故事基本上满足条件的人都会来上一个,但也存在问题,就是这种故事在业务价值上好讲,但在专业不可替代性上会被质疑,毕竟大家造的轮子高度同质化,而设计最怕同质化。几乎所有造轮子的人都绕不过去的一个问题:“你这个轮子和AntDesign有什么本质区别?”答案1:“我造的轮子比它的更大!”但市面上业务体量能大过蚂蚁的也没几家,总不能轮子造得比业务还大吧?答案2:“我造的轮子是为我们的业务场景量身定制的!”那你们的业务场景有什么特殊性?举几个你针对这样的特殊性做出的创新?讲得出来吗?倘若真的讲得出来,那么这个故事中在专业不可替代性的部分,已经朝“深刻的设计思考”靠拢了。所以至少三鱼认为,在体验设计领域,纯粹靠体量来讲故事会越来越不好使,互相拼体量并不现实,业务的体量终归有边界,那么项目的体量就不可能无限扩大。因此在故事中加入 “深刻的设计思考”,可能才是打出差异化更现实更低成本的方式。

讲到这里你会发现,三鱼所讲的这些体验领域好故事的条件都很苛刻,往往超出了设计师专业能力所能掌控的范畴。

 

第三个问题:有没有一种思路,能直接在设计师可掌控的范围内,讲出好故事呢?

答案是:有,但是似乎整个体验领域只有我一个人在用这个思路,至少三鱼是靠它一路开挂走到现在。而且这个思路其实人人都可以做到。

这是真的,先给大家看看我最初的水平:

培训班作品《爱情小管家》

再看一下我在百度的主要工作:我晚了2年才转行,在百度职级最低,被应届生倒挂。互联网工作经验为0的我在相当长一段时间被安排做一些类似广告图优化、日常运营图支持等繁琐但技术含量低的工作,和体验没有半毛钱关系。

广告图优化

运营图支持

三鱼的起点似乎也并不是特别好。早期你还能在我的站酷看到这些作品,但后来越来越多人评论:“看了作者早年的作品,感慨作者这一些年一定付出了巨大的努力。” NND,于是我就把这些作品都删了,以维持我的偶像包袱…

但我准备把这个思路放在下一篇文章来讲,乐观估计会在11月份和大家见面。抱歉不是三鱼故意卖关子,这个思路说到底就一句话,但倘若三鱼只讲这一句话,你是听不进去的。我需要结合实际案例的思路和收益来跟你讲,而我认为最合适的那个案例要到11月份才解禁。所以大家就保佑我11月份新作品能顺利上线吧。PS:可能还会有延期风险,抱歉…

 

原文地址:站酷

作者:三鱼先生

转载请注明:学UI网》干货迟到了,职场的一些理解

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



这应该是最近几年,苹果电脑ui设计变化最大的一次了!

seo达人

图片

图片

图片

图片

图片

图片

图片

界面变化这么大,尤其是图标,感觉设计师没少花功夫。

我就简单说下自己的几个小感悟吧!

01 轻

轻就是轻量,其实整体ui还是在往轻量来靠拢的,尤其是质感方面,比如像日历:

图片

基本是从有厚度变成平的了。

即使是一些框架层面的细节,以前长这样:

图片

现在变成这样了:

图片

也是变轻了很多。

整体变得越来越轻应该还会持续很长一段时间。

 

02 圆

圆就是圆润了,很多元素都比之前更加圆润了。

比如之前很多方角都变成了大圆角:

图片

很多控件也加了一些圆形,还有大圆角:

图片

感觉更有亲和力一些,,不知道是不是也融入了东方哲学:

图片

有可能吧。

 

03 统

统就是统一,可以从两个方面来解释。

第一个方面解释统一,是纯视觉样式的统一,比如之前的图标有的是圆角,有的是方角,有的是异形:

图片

改版后全都统一成了方形:

图片

第二个方面解释统一,是双端的统一,就是mac os还有ios系统的设计统一,很多地方,两端的设计越来越像,比如这些图标:

图片

都开始和手机里的图形一样了。

再比如,这些控件,和ios14的小控件形式一样:

图片

这样的统一,比较节省设计师的人力成本,还有用户的认知成本。

 

04 新

新就是新颖了,最近这种质感表现手法挺流行的:

图片

图片

而我们仔细观察,其实mac更新后的部分图标是有借鉴这种表达方式的,比如:

图片

我最喜欢的就是这个图标的更新,很有感觉:

图片

看起来还是比较眼前一亮的,所以说,苹果的设计师也是会看be上的流行趋势的。

除了上面这些,我觉得有一个图标变化是最大的,就是这个启动台:

图片

从原来的金属,变成了多彩、轻量的图标,看起来没有之前那么厚重,其实也是挺新颖的!

这些小点都可以看出方向上是在朝着流行趋势走的,所以平时多看be和追波还是很有必要的!

 

总结

mac的设计在一点一点变得年轻、多彩、轻量、简洁,我们也要多多关注趋势,跟着最前面的设计,成长自己,拥抱未来。

今天就分享这么多,一点点浅薄的感悟,希望对你有所帮助,下期见!


原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》这应该是最近几年,苹果电脑ui设计变化最大的一次了!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


列表流、卡片流、瀑布流、Feed流,你能分清它们的设计特点吗?

seo达人


图片

先把这四个概念分为两组,列表流和卡片流做为一组,瀑布流和feed流为一组。

接下来咱们就展开说说为什么要这样分组?分组的依据、目的?

如果你对这些概念也有点模糊不清,就一起来看看吧~

 

列表流与卡片流

列表流

说到列表,首先想到的就是一行一行的内容排列形式,列表流其实就是一种文字为主导的布局形式,内容以列表的形式表现出来,最典型的例子就是手机里的信息,进入之后会看到一行行的信息列表。

图片

除了信息这种以文字为主的布局形式,列表流常见的形式还包括图文并排的布局,图文的位置可以很灵活,左图右文、左文右图、上文下图都是常见的布局方式。

图片

列表流多用在新闻、信息、资讯类产品中,以文字内容为主导的布局形式既能快速突出重点,又能让用户浏览起来很方便。

图片

▲ 除了使用单一的布局方式,多种布局形式的混合使用变得越来越流行,混合使用能够打破单一的布局,让页面变得有节奏,通过布局的穿插变化让页面和内容更加多元化。

 

卡片流

无论在APP上还是网页上,卡片流都是最常用的布局形式。卡片式设计采用图像与文字相结合的方式将信息传达给受众,在有限的矩形空间中建立了无限的可能性。

之前分享过关于卡片式设计的特点,可以点击回看更多内容:《详解卡片式设计的特点和使用场景

对比列表流来看,卡片流相当于把图片尺寸放大,内容图文结合以卡片的形式展现出来。

图片

▲ 公众号就是一个很标准的卡片式设计,以卡片流的形式来推送内容,一行只有一个卡片,并且每个卡片尺寸都是固定大小。

 

图片

▲ 除了标准的单列卡片流,双列卡片流在产品中用的更多,每个卡片在宽度上相等,但高度上有可能不一样,而且卡片流中每个卡片不一定要严格地水平对齐。

 

图片

▲ 卡片流除了可以承载以图片为主的内容,层级结构清晰的文字内容也可以灵活使用卡片式设计,简单清晰地展示信息。

 

小总结:

通过前面的介绍能够看出来,列表流、卡片流都是设计形式的变化。

比如列表设计的宽一点、卡片设计的大一点或小一点等等,直接呈现出直观的视觉效果,带给我们最直观的视觉感受。

而且两者并不是对立存在的,而是可以相互联系、相互搭配使用,比如一个页面上可以结合使用多种形式,在使用列表流的时候我可以穿插使用一些卡片流,两者的混合使用往往能产生1+1>2的效果。

 

瀑布流与Feed流

为什么将这两个概念放一块说呢?大家可以根据上面讲到的列表流和卡片流的特点,一起来对比思考下。

 

瀑布流

瀑布流是指在滑动页面的时候,内容会源源不断地刷新出来,感觉一直滑不到底,Pinterest大家应该都很熟悉,有网友提到Pinterest是最早使用了瀑布流设计。

图片

瀑布流代表了内容呈现的方式,呈现的内容可以是源源不断的列表,也可以是源源不断的卡片,看到这里,大家是不是有点明白瀑布流跟列表流、卡片流的根本区别了。

另外需要注意的一点是,瀑布流只负责展现内容,并不会对内容进行干预,会把内容无差别地展示给用户。

图片

▲ 在500px网站的图片中,无论用户是否登录网站、有什么喜好,网站都不会干预内容的呈现,所有的用户都会看到相同的图片内容。

 

Feed流

和瀑布流不同,Feed流在呈现内容的时候,会对内容进行干预,会根据用户的喜好来更新和推荐内容。

在算法加持下,可以说所有人都是透明的,产品会记住每一位用户的喜好,为用户匹配相应的内容。

所以Feed流经常跟推荐这个词一起使用,组成Feed流推荐系统,产会通过数据算法为不同用户推荐他们感兴趣的内容,吸引用户长时间的留存。

图片

▲ 淘宝、小红书这类产品都是依托算法推荐,根据用户画像、用户兴趣推送特定的内容,以达到千人千面的效果。这种推荐模式现在已经成为主流,基本上大多数的头部产品都逃不过这样的设计。

 

小总结:

把瀑布流和Feed流放一起对比能发现,瀑布流侧重页面和信息布局,自上而下滑动的过程中会不断加载页面内容,呈现的内容并不会针对不同的用户做出调整。

Feed流则侧重于内容分发,会依据用户的订阅和习惯推送不同的内容。

 

最后

通过介绍这几个概念,再多说几句我的一些想法和思考。

很多时候我们都会遇到概念、问题,模糊不清或者容易搞混的情况,尤其是多个看起来相似的概念、问题碰在一起。

为什么说看起来呢,因为我们常常都是被这种看起来相似搞混了,比较两个看起来相似但实际意义却完全不同的概念或问题,只会造成越看越乱的情况。

所以最根本的做法是抓住内核,去探究问题或概念的本质,别被表面事物蒙蔽了思考。

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》列表流、卡片流、瀑布流、Feed流,你能分清它们的设计特点吗?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



海报教程 | 设计越怪,难道越惹人爱?

seo达人



图片

 

设计是一扇打开门的艺术


进入这个艺术领域,

你会看到奇奇怪怪的与世间分离的世界,

贯彻了个性与自由的边界,扭曲与矛盾的支点。

 

图片

艺术是孤独的

但人烟是温暖的

设计师将艺术世界里光怪陆离、变幻奇妙的思维和新的眼观转化为能与世间可解读的桥梁,让艺术具有普世性,让人烟温暖艺术,让艺术变得大众。

图片

近几年人们的视线里开始出现越来越怪的设计作品,更多的艺术性实验作品走向了商业化的常态,从另一种角度可以说明设计师不断在用作品拉近大众与艺术之间的距离,越怪的设计也开始不断被商业化所认可,如果用一个字概括出未来的设计趋势,那就是“怪“!

 

图片

 

 

 

 

 

 

 

 

图片

用最原始的渐变方式将扁平与线条绘制结合于版式之中,看似简单的设计暗藏着留白与文字空间的比例布局。

图片

 

 

图片

常使用撕纸、人物卡通、重映图片等元素错乱结合,就像一个孩子将毫无逻辑的东西放到了一个版面上,运用版式中的构图理念将这些串联在一起并形成新的故事符号。

图片

 

 

图片

将物体/人物部位等运用3D手段放置于版式的视觉中心,利用平面框架将画面转化为属于当下人类新时代的设计新视觉。

图片

 

图片

褶皱的纸张、水滴、液态流体都是该风格最常用的素材,整体的视觉非常像是在原有版式里打破固有思维的一种执念。

图片

 

图片

故障的处理手法或多或少或乱或单一都给予了版式不同的变化造型,让版式更为灵活和多变。

图片

 

图片

蒸汽波前几年流行到大众的一种复古风格,迷幻的风格从大众无法接受到年轻人的热衷,说明了时代随着艺术的推进在拉近之间的距离。

图片

 

图片

简笔图形、线条勾勒、粗犷的马赛克图案,风格的独特得力于插画与平面能完美融入的趋势。

图片

 

图片

以日本设计师高田唯为风格代表的新丑风,运用草率的图形和文字加上漫不经心的版式打破了常规的设计理念和观感,存在即合理。

图片

日本设计师高田唯想通过新丑风的方法打破美观、规整以及整个版式和常态的规格结构,用看似拥挤杂乱的排版和高饱和的色彩和简陋的图形诠释了设计不应该是遵循一种体系和结构化的理论,应该是多样且无序形成的艺术理念。

 

图片

案例实操步骤分享:

今天的案例就与”怪“有关,其中就运用了三维次元、多肌理材质、渐变极简等多风格融合的实验海报设计(干货不易,看完点赞+分享,谢谢!)

 

 

图片图片

 

步骤1:

使用渐变工具绘制扁平化的渐变铺满整个画布。图片

 

步骤2:

在画布中绘制方形并在四周最凸出改造,内部使用增加颗粒,流体图层【颜色】模式,让内部增加奇幻的风格质感。

图片

 

步骤3:

在长方型四周进行文字布局并利用图形色块拆分文字塑造个性的解读方式。

图片

 

步骤4:

长方形内部放置3D汽车建模,利用渐变映射让3D色彩变成流体的光泽色彩。图片

 

步骤5:

通过版式的框架结构对四周进行排列文字,并增加内部元素放画面丰满并形成“怪”的特质。

图片

 

步骤6:

将水滴材质素材放置到画面上,使用滤镜库>绘画涂抹调整数值,让内部的色彩看起来锐化且有颗粒绘制感。

图片

 

注意事项

很多风格是可以相互融合使用的,需要灵活的变动使用。

图片

设计是跳动的
用艺术的方式诉说商品

诉说艺术来源

也在诉说自己的个性

好了 ,周末还在写文章的小编到这里就分享完了,头发也随着绞尽脑汁开始出现脱发的痕迹,干货不易,

 

原文地址:修先森撩设计(公众号)

作者:修先森

转载请注明:学UI网》海报教程 | 设计越怪,难道越惹人爱?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2021 最流行的7种网页UI风格,简直美炸了!!

seo达人


图片

看完这一波网页UI类设计,再也不愁接下来该如何做设计创新了。

 

#1.图与线叠加

图片
这是今年出镜率比较多的一种设计风格,不管你是在Dribbble还是Behance上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。
图片
当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

图片

图片

又或者说图形只是作为装饰作用。

 

#2.纯文字版式

图片

 

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

图片
图片

上图是典型的文字图形化,将文字转化成线性设计。

图片
图片

 

#3.图文混合

图片

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。
图片

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

图片

图片

图片

 

#4.圆形版式

图片
圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。
图片
还可以将文字处理成圆形,与圆形图相呼应。

图片

图片

图片

图片

图片

 

#5.文字轮廓化

图片

文字轮廓化版式今年出镜率尤其之高,之前我还写个类似的文章。将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

图片

图片

图片

文字轮廓化设计还可以用在背景,作为设计装饰效果。

图片

 

#6.玻璃质感

图片

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

图片

图片

图片

#7.使用线条

图片
线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。
图片
线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

图片

图片
好了,差不多到这里就结束了。7种风格,希望能给大家带来一些新鲜的设计想法,在工作中将其运用进去。
当然,在做设计提案版式、作品集包装都是可以参考,希望大家不要被局限。

 

原文地址: 功夫UX(公众号)
作者: 功夫UX
转载请注明:学UI网》2021 最流行的7种网页UI风格,简直美炸了!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


非科班出身的我,发现这些插画基础知识才最有价值

seo达人



 

图片

彩云在6年前画的一些练习,每天一只动物,虽然画的不好,贵在坚持

 

图片

图源 Liza Moiseieva

 

你有想过成为一名插画师吗?你是否还处在刚入门阶段?这篇文章将告诉你一些简单的技巧,从根本上提升你的技能。

成为一名插画师有很多途径:学校学习、课程、书籍,甚至是在家自学。没有一条绝对正确的道路,这取决于你自己的选择。

图片

图源 Liza Moiseieva

 

但不论走什么路,都需要有一个目标。你必须了解未来的挑战,写实的概念艺术或极简主义,创意海报?如果是前者,你会发现没有绘画背景很难,它需要掌握技巧,学习处理空间和比例,研究透视和配色方案。如果是后者,你可以在没有基础的情况下也能有机会做好。

有哪些是不论在什么情况下都不可或缺的?有一些技巧是普遍适用的,无论是在视觉艺术、音乐、摄影又或是电影等领域,和谐以及整体与局部之间的相互作用是画面中最重要的两件事。

图片

 

构图

alexander Livanov一针见血的指出:“构图是插画的价值体系。”创造一个漂亮的构图是使你的插图具有吸引力的关键。插画师的工作是建立物体的层次,创造亮点和对比,引导观众沿着一条从主要到次要的无形路径,这样最终的结果是一个和谐的,有凝聚力的图像。

图片

A beginner’s guide to composition pinterest上的一个关于构图的收集,能看到的朋友推荐收藏

 

当然,构图取决于插图的类型,每种情况都需要不同的方法。例如,如果它是一个图案,那么所有的元素要么是相等的,要么是节奏不相等的。但我们会问,节奏到底是什么?

图片

 

节奏

节奏是一种有规则的空间、形状或颜色的顺序。

在视觉艺术中就像在音乐中一样,我们可以找到积极的、断断续续的节奏,也可以找到平稳的、平静的、舒缓的节奏。

图片

节奏是构图的主要工具之一,它创造了和谐与平衡。毕竟,插画师的主要工作之一就是组织视觉空间。要做到这一点,就需要不断地比较对象,在一个画面中不断的循环往复的调整每一个对象。

 

平衡

平衡是元素在并置过程中创造平衡和和谐,平衡感直观上让观者感到舒适。

不要忘记整体构图需要平衡。在创建任何图形对象时,平衡都是至关重要的。(如何让画面保持平衡,也是一个很重要的知识点,详见作者另一篇文章《为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好》。)

图片

图源 Liza Moiseieva

 

对比

当你需要强调某个信息时,请使用对比:它总是能吸引观众的注意力。你可以使用颜色、饱和度、空间、冷暖之间的对比。高亮一个物体的方法有很多种:你可以让它更亮、更有纹理、更大、更小……这都取决于你的选择。

图片

The principles of design (设计原则)

 

动态

插画师必须学会表达动线、动态和静态。运动可以用引导线或节奏来突出。如果你正在画一个图形,从一个显示身体各部分运动的框架开始。注意一个人物或物体的轮廓。越有特色、信息量越大,插画就越有趣、越全面。

图片

 

颜色和色调

色彩和色调是插画师的主要工具。它们影响对图像的整体感知和特定物体的可读性。它们可以用来传达空间和体积,强调情感和味道。

图片

以下是一些处理色调和颜色的技巧:

 

单色调配色

初学者可以简单地将色调从最暗到最亮进行编号。单色插图的元素有不同的色调是很重要的,颜色信息越丰富,画面将更加和谐。

图片

 

有限的调色板

通过限制调色板,可以更容易地创建特定的氛围。可以尝试预先选定的一组颜色,这样的作品将始终和谐。

图片

Weather change example (配色参考)

 

除了上面的方法,也不要忘记其他表达方式,例如:

  • 线条和点
  • 光和投影
  • 柔软和锐利
  • 纹理
  • 渐变
  • 透明度
  • 不同的笔刷

除了以上这些,还要考虑那些看不见的东西,画面背后的设计理念,它的本质和概念。确保你的插画总是有意义的,要有意识地创作插图。

 

像玩游戏一样画插画

设定一个明确的目标开始再开始画。你需要展示什么?例如,你可能想要反映现实或使用隐喻,说明一种情感体验或展示你的技术技能。你的插图应该如何工作?你想要什么样的风格?这些问题都需要去思考。

图片

Illustrations by Liza Moiseieva

 

插画的风格是一套表达方式,类似游戏规则。

把画布想象成一个运动场。现在让我们假设游戏大师的规则是,所有阴影必须是蓝色的,必须没有透视,所有角色必须不成比例,并且不能使用绿色。这些规则将显著影响插图风格。

当然,这些规则应该遵循一种内部逻辑。例如,如果你画一个钢琴演奏者,你可以把他的手画大一些,以强调他们的优雅和意义。其他时候,你可能不想使画面元素太详细,比如对于移动应用来说,在4 × 4mm的“树”图标中画出每一片叶子是没有意义的。

探索世界,发明自己的语言。不要害怕表达你的想法和情感。仅仅通过改变比例、颜色或基本概念,同样的技巧也可以用来创建令人眼花缭乱的多样化风格。

图片

Illustrations by Liza Moiseieva

 

一切都是为了改进

插图是一种语言,一种表达感觉和情感的方式。不要忽视你的“词汇量”,不断扩大和修改它。这是一个永无止境的过程,但也是一个令人兴奋的过程。

要想说艺术的语言,你需要拓宽你的视野,看高质量的作品,分析它们,并尝试模仿技巧。在日常看作品的同时不断问自己:是什么吸引我做这份工作?那些插画想要传达什么价值观?他们是怎么做到的?是什么让他们的风格与众不同?

不要忘记学习的经典方法:阅读。Johannes Itten的书《色彩艺术》(The Art of Color)便是一个很好的起点。一个有抱负的插画家必须学会使用颜色,因为它是主要的工具之一,这本书将教会你如何使用它。

 

本文翻译已获得作者的正式授权(授权截图如下)

图片

 

彩云注:《色彩艺术》这本书非常的经典,推荐大家一定要看看,彩云在这里也把这本书的电子pdf分享给大家。阅读公众号原文查看领取方式。

图片

 

原文地址:medium

作者:Liza Moiseieva

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》非科班出身的我,发现这些插画基础知识才最有价值

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



设计师应该了解的版式知识

seo达人



 

 

1 . 版式的认知和发展

版式设计是指设计师根据设计主题和视觉需求,在版面中对字体和元素的编排艺术和技巧。版式设计是信息媒介和接收者之间沟通的桥梁,是传递信息的特殊语言和手法。

 

1.1 版式设计的概念

在日常的设计应用中,版式的设计是无处不在的,也是做好设计的基础,所以我们打好平面中版式设计的基础就显得尤为重要。

为什么说版式设计是做好设计的基础呢,因为在设计工作中,版式设计的应用非常的广泛,比如在杂志、书籍、网站、海报、画册、UI设计等领域都离不开版式知识的支撑。随着人们物质生活水平的提升,人们的精神需求也在不断的提升,早期,书籍报纸和杂志等纸媒出版物已经可以满足人们的阅读需求,如今随着科技水平的提升和新媒体的快速崛起,人们获取信息的渠道也变得更多了,版式设计作为传递信息的媒介,也相应的被应用到各行各业。

优秀的版式能唤起读者审美性和阅读下去的耐心,且有助于内容的传递的有效性和艺术性。

 

1.2 版式设计的起源与发展

早在194年前,摄像技术的精进和人们对画面感的追求,在印刷工人不断的探索和研制下。在1871年照相制版技术被引入到印刷中。

在1917~1928年,蒙德里安等人在荷兰创立了荷兰风格派。荷兰风格派又称新造型主义画派,荷兰风格派对非对称字体、简洁性以及空间的动态分割进行了探索,并对结构主义和包豪斯产生了影响。

时间转眼来到1907法国,也就是距离现在101年前,立体主义的艺术家追求碎裂、解析、重新组合的形式,形成分离的画面,让立体主义的画面创造出一个二维空间的绘画特色。

时间再次来到1916年至1923年间出现于艺术流派的一种艺术运动。在距离现在97年前,一群年轻的艺术家和反战人士领导,通过反美学的作品和抗议活动,来表达了他们对资产阶级价值观和第一次世界大战的绝望。

达达主义艺术家通过对排版的实验,尝试用随意的布局进行版式设计,探索视觉的冲击力。

在20世纪20年代,李西斯基跟达达主义艺术家让·阿普(ARP)一起合著了一本书《论艺术主义》,这本书的无论是目录还是排版,都主次分明,在加上每页上面都有章节名称,易于查找,阅读体验远胜于当时的任何一本书,构成主义手法在这本书中体现得淋漓尽致,也解释了一切技法都是为视觉传达目的服务。

1919/4/1—1933/7,也即是距今93年前,德国包豪斯设计学院正式宣布成立,对现在的设计来说,包豪斯它既是一所学校,更是一种理念,它作为一种新式的教育模式在德国创建,并促成了平面设计的诞生。

72年前,1948年,莱斯特·比尔(Lester Beall)为强普制药公司制作的《瞭望》(Scope)杂志,开启了纽约的现代运动。

63年前,源于包豪斯的国际风格,或称为“瑞士风格”,其中就包括大师阿明·霍夫曼,他的作品具有鲜明的瑞士风格,精密,有效,经得起时间检验,堪称典范。他认为,海报是最好和最有效的沟通形式之一。他也在海报设计当中运用了网格、非对称、最低限度的排版对比。

28年前,在印刷术专家奈维尔·布罗迪(Neville Brody)的引领下,很多人开始探索排版的信息传达的准确性与最大视觉冲击之间的冲突性的问题。

他的设计作品在各大知名媒体中频频出现,并以其在著名时尚杂志《The face》和《Arena Magazine》的作品以及他为80年代深具影响力的乐队设计的唱片封面而广为人知。他还是世界最畅销的图像设计图书的作者,还设计了诸多极受欢迎的字体。

22年前,网格设计在90年代成了为热门学科,在很大程度上说这是一种数字化的印刷设计表达。另外根据文章“Information Architects JapanWeb design is 95% typography”的研究表明,网页设计中95%用到的都是版式设计。

18年前,计算机可以使设计回到任何一个时代,如用老式金属字体,又或者使用哥特字体做设计等等,这也说明了设计由纸质信息媒介向数字化信息媒介的转变。

 

2 . 设计三元素与版式初识

在版式设计中,点、线、面又被称作为设计三要素。在日常生活中,我们所看到的所以具象的物体都可以细化成点、线、面的元素。点、线、面在版面中不仅仅是抽象符号,还蕴含了丰富的设计语言,而设计师的职责就是在版面中处理好它们的位置关系。

在版式设计中,点、线、面之间既是相互独立的,又是相互影响的。在版面中,大家可以将一个文字看作是一个点,将一行文字看作一条线,将一段文字或一张图片看作是一个面,总而言之,设计师可以灵活运用点、线、面三大元素的大小、比例和位置变化,设计出独具匠心的作品。

 

2.1 点

在版面元素的定义中,点是构成图形的最小单位,其实,点、线、面的关系是一个递进的关系,点是相对于线和面更小的面积,点可以是一个文字,也可以是一个色块,具体看版面中的参照物而定的。而点则是一个图像构成的最小单位,任何图形都可以看作是一个个的点构成的。

之前风靡一时的网络游戏“我的世界”,相信大家肯定玩过,没玩过的可能也在网上看过一些截图或者视频,我的世界里的每个地图都是由一个个小方块构成的,构成我的世界的小方块,就可以理解为我们设计构成中的点元素。

 

2.1.1 点的作用

在日常的设计中,我们通过改变点的数量和位置,可以起到聚焦或分散视线的作用。当版面中点的数量比较少的时候,点能起到聚焦视线的作用,提高和引导人们注意力与视线;而大量的分散的点在画面中可以起到烘托版面气氛的作用,使版面内容看起来更加丰富、热闹。

 

(1)聚焦视线

与线相比,点不具备方向性和延展性,与面相比,点的视觉体量会比较小。点的数量的不同,可使人的视觉焦点发生变化。当版面中空无一物的时,人们的视线没有落地点,如果当版面出现一个点的时候,人的视线会不自觉地聚焦在这个点上,当版面中出现两个点的时候,人们的视觉落地点会在这两点之间转换,当版面中出现三个点的时候,人们的视觉落地点通常会在中间的那个点上,这个点就是平衡视觉的中心点。

所以,我们就可以知道,我们app的底部tap栏的图标一般是奇数,而重要且常用的功能会放在中间,因为那是人们视觉的落地点。而数量选用奇数是可以起到平衡视觉和聚焦视线的作用。

 

(2)分散视线

点除了可以有聚焦视线的作用,也可以起到分散注意力和烘托气氛的作用。在版式设计中,设计师经常运用散点排布的设计手法分散人的注意力。这种设计手法不仅仅丰富了版面,还可以让版面看起来充满活力,让版面看起来更加热闹,并让人感到放松、心情愉快。

 

2.2 线

在版面元素的定义中,线是由一个点任意移动所构成的图形,线只有长度,没有宽度和厚度。在版式设计中,线扮演着至关重要的角色,人们赋予了线条情感和属性。在平时的设计中,线具有长度、粗细、形式和肌理的变化,有时候在表达方式和表达情感上变化上比点要更加合适一些。

比如,我们在地上看飞机飞过,我们看飞机它只是一个点,但是它移动的轨迹被尾气记录下来,会形成一条线,所以,点经过移动和排列,便可以形成线。

 

2.2.1 线的作用

在版式设计中,线具有非常重要的作用。线不仅仅可以将版面划分成不同的区域,增强信息之前的逻辑关系,还可以引导读者的视线,提升阅读者的效率,可以起到支撑版面的作用。

 

(1)分割版面

在版式设计中,线可以用来分割版面。我们在设计的时候,在信息比较多或者没有规律的时候,设计师通常会用线将版面进行合理的划分,形成不同的信息区域,使版面更加的合理、规范。将版面进行合理划分可以构建良好的阅读秩序,方便读者阅读,并且丰富版面层次,使版面更富有变化。

 

(2)引导视线

线本身具有视觉延展性,因此在版面设计中,设计师经常会使用线来引导人们的视线。合理的运用线条的指引性可以使版面信息更具有关联性,不仅方便人们的阅读,还可以提高阅读的效率。

 

(3)支撑版面

水平的线或者垂直的线给人笔直硬朗的视觉感受。在版式设计中,设计师经常运用线的特性,使版面更加丰富饱满并富有视觉的张力。

 

2.3 面

线动成面,面在版面中所占的空间是很大的,也是设计师最花时间去排版的地方。面具有长度和宽度,但是没有厚度。面不仅仅代表区域,还可以将同类信息聚在一起。面的形状多种多样,在版式设计中,除了点和线构成的视觉元素,其他的元素都可以看作是面。面可以是放大后的点和线,也可以是一张图片或一个图形,其形态可以是规则,也可以是不规则的。在版式设计中,与点和线相比,面更具有表现力和实体感,也是最常用的视觉元素。总之,由不同大小的面组合而成的画面具有非常强的视觉冲击力。

面我们可以看作是线的移动轨迹,当它平移的时候是矩形,旋转的时候则形成圆形,我们生活中比较常见的卷帘门,当它缓缓拉下的时候,就可以线到面的移动过程。

 

2.3.1 面的作用

在版式设计中,调整面的大小、远近和前后关系,可以起到划分版面区域、丰富版面层次的作用,使整个版面信息条理清晰,并且具有层次感和纵深感。

 

(1)划分区域

在版式设计中,面的区域性表达很有力。通过色块将版面进行区域划分,可以使信息内容更加内敛,并且有规律可循。图片和文字段落都可以看作面的形态,图片是实面,文字段落是虚面。

 

(2)丰富页面层次

在视觉上,面能起到醒目、平衡和丰富空间的作用。面可以通过前后叠体出版面的空间感和纵深感,其视觉变现力更强,使二维空间看起来更加立体,并有层次感。

 

2.4 版式设计中的“三率一版”

在通常的版式设计中,设计师对点、线、面设计元素进行大小、比例和位置关系的处理,这就是版式设计。版式设计中有“三率”,通常说的“三率”是版面率、图版率和跳跃率,“一例”是指的是黄金比例。优秀的版式设计能给人带来视觉上的美感和精神上的愉悦,而不好的版式设计则不符合美学的规律,甚至毫无美感可言。将感性的设计进行理性的归纳和表达,有助于设计师在实际工作中设计出更优秀的作品。

在具体介绍和分析“三率一版”之前,我们先来看看什么是版面。

版面是指在页面中主要呈现图文信息的区域。在印刷设计中,大家可以将版面理解为去除天头、地脚、切口和订口后的中间区域。

  • 天头:页面中顶部页眉留白区域。
  • 地脚:页面中底部页脚留白区域。通常将页码和脚注设置在地脚区域。
  • 订口:页面中靠近书脊要装订的留白区域。
  • 切口:页面最外侧将来要被裁切的留白区域

在版式设计中,版面的地位非常重要,无论大家设计哪一类作品都需要先规划好版面的大小。版式设计是在有限的版面内进行有目的、有规划的设计,使版面内的图文信息编排得更加科学、合理,并符合美学规律,这也是版式设计的基本前提。

而在网页设计中,版面可以理解为网页的主视觉区域。一般网站主视觉区域的宽度范围为1000PX-1200PX,而垂直方向上内容是无限长的,因此,网页设计是不会限制高度的。在设计网页时,只需要在图文信息排布在安全区域内即可,超出安全区域的内容都是不会是特别和主题相关的重复信息或者背景。

 

2.4.1 版面率

在版面开本中所占的比例叫做版面率。版面率越小,页面留白就越大,这样会令人感觉到高级、雅致;版面率越大,页面留白越小,给人的感觉是内容越丰富、信息量大。

 

(1)增大版面率可以让版面更实用

一般的资讯类、工具类、产品宣传类和购物网站的版面率比较大,因为这些类型的版面需要传达的信息会比较多,如果版面太小则不能容纳较多的图文信息。这里需要注意的是,版面所承载的信息量与版面率没有绝对关系,大版面率的版面所承载的信息可能是一张满底的图片和少量的文字,而小版面率的版面所承载的信息可能是很多图片和文字。

 

(2)减小版面率可以让版面更精致

高品质刊物一般采用小版面率,将主要信息内聚,并且页面中有大面积的留白,使整个页面看起来清新、简约、高雅和精致。虽然前面讲到版面率和信息量没有绝对关系,但通常小版面率的版面可展示的信息较少,这避免了信息过度拥挤,不会破坏版面的设计风格和定位。

 

2.4.2 图面率

在版面中,图片所占版面的比例叫作图版率。图片数量越多,图片的尺寸越大,图版率越大,图片的数量越少,图片尺寸越小,图版率越小。图版率大的版面令人感到丰富、热闹,图版率小的版面令人感到低调、沉稳。提高图版率可以增加版面的可视性和跳跃率,但一味增加图版率就会忽视文字的作用,使版面显得空洞、乏味。总之,设计师应该根据版面的风格定位来灵活调整图版率。

 

(1)通过垫色处理增大图版率

在实际设计工作中,有时会遇到图片素材有限,但又必须提高图版率的情况。这时可以增加色块或图文信息进行垫色,使版面更具有层次感。

 

(2)通过重复图片素材增大图版率

在实际工作中,经常会遇到素材尺寸小和画质低的情况。这时,可以用重复图像和方法来解决。这种重复变化不仅可以增大图版率,使版面看上去更加灵活、富有节奏和韵律变化,还可以使版面不在空洞、呆板。

 

2.4.3 跳跃率

跳跃率是指版面中的设计元素通过大小和位置变化在视觉上营造出的一种对比关系。跳跃率大的版面令人感到生动、活泼并且富有节奏感和韵律感;而跳跃率小的版面则令人感到沉稳、宁静和高雅。

在实际工作中,跳跃率应该根据版面的设计风格和定位进行灵活调整,以营造出更好的视觉效果。在版式设计中,跳跃率主要分为文字跳跃率和图片跳跃率。接下来根据影响版面跳跃率的三个主要因素,结合介绍文字和图片的跳跃率。

 

(1)大小对比形成跳跃感

在版面设计时,调节文字或图片的大小可以增大或减小跳跃率。跳跃率大的版面,文字有明显的大小、粗细和角度变化,整个版面看起来更加丰富、活泼,并且亲和力更强;跳跃率小的版面,文字基本上大小相同,并按照一定的次序分栏排列,整个版面显得安静、典雅,令人感到稳住,但又略显呆板。

上面只说到文字对跳跃率的影响。实际上,图片对版面跳跃率的影响也是很大的,甚至在某种情况下比文字对跳跃率的的影响更大。总之,可以调整图片的大小、位置和方向改变版面的跳跃率。

 

(2)位置对比形成跳跃感

在版面设计中,调整图片和文字的位置可以使版面具有跳跃感。例如,调整设计元素的远近、疏密和方向。总之,灵活调整设计元素的位置,可以使版面更具有活力,并提高了版面的阅读趣味性。

 

(3)颜色对比形成跳跃感

在版面设计中,颜色与图片、文字共同构成了版面的主视觉元素。不同的色彩被人们赋予了不同的情感,例如,红色象征热情、恐惧,绿色象征生命、和平,蓝色象征纯洁、科技等。颜色对版面的跳跃率有很大的影响,大家可以通过不同色相、明度和纯度的颜色进行搭配,使版面看起来生动、活泼或沉稳、高雅。

 

2.4.4 黄金比例

黄金比例这一概念源自于毕达哥拉斯学派。黄金比例具有比例性、艺术性、和谐性三大特点。黄金比例蕴藏着丰富的美学,也是一种古老的数学方法。黄金比例揭示了自然界中的一种美学规律,在艺术和设计中也受众比较广,我们可以发现,在大量的艺术作品中都可以找到黄金比例的身影。

比如,AC线段与AB线段的比值等于CB线段与AC线段的比值,比例约为0.618:1或者1:1.618,这一比例被称为黄金比例。

黄金矩形的长宽之比为黄金分割率,一个黄金矩形可以无限生成等比例的黄金矩形。

黄金比例的用法也是比较多,例如我们字体需要对比的时候,可以先设定一个比较小的字体,在乘以0.618进行对比。

 

3 . 排版的基础规则

在我们的现实生活中,基础的规则构成了我们这个世界的正常运行,在上班的时候,我们需要遵守公司的规章制度,在社会我们需要遵纪守法,在排版设计中,也会有属于它的基础规则来保证基础的版面不会出现大的问题。

CRAP是罗宾·威廉斯提出的四项基本设计原理,在《写给大家看的设计书》中凝炼为亲密性、对齐、重复和对比4个基本原则。

 

3.1 对齐原则

在排版设计中,对齐原则是比较重要的。版面中的任何元素都不能随意的去摆放,每一个元素都应该与页面上的另一个元素有某种视觉关系,而这种视觉关系虽然看不到,但是我们可以感觉的到。

对齐在版面中能让我们的版面看起来更有秩序感,从而使页面看起来美观舒适,提升我们用户的阅读体验和观感

我们常用的对齐方式有:左对齐、右对齐、居中对齐、两端对齐、顶部对齐、底部对齐。

 

(1)左对齐

左对齐,是排版设计中最常见的方式,也是阅读最舒服的对齐方式之一,一般大段的文字编排都会首选左对齐的形式。因为根据中国人的阅读习惯,人的浏览视线都是从左往右移,因此大段需要阅读的文案,最好采用左对齐的方式排版。

但是由于左对齐的特殊性,容易造成右端留白过多,整体视觉失衡,所以,我们需要采用左对齐方式的情况下,要考虑到各种极端情况下的问题,这样才能保证较好的阅读体验。

 

(2)右对齐

右对齐,这种对齐方式与人们的阅读习惯与视线移动方向相反,会给人不自然的感受,但是在合适的场景下与合理的编排下,这样的对齐形式可以给人一种有个性的错觉,所以,右对齐的应用场景想多来说会少一点,多数的情况下,都是为了整体版面的和谐采用使用,当版面的构图为左右式时,且视觉重心在右边时,左边的文字采用右对齐,与右边的视觉中心(图片或图形)相互平衡。

 

(3)居中对齐

居中对齐,是用的比较多的一种对齐形式,也是属于万金油的对齐形式。通常居中对齐会让排版感觉很正式、严肃。一种抢夺注意力的对齐方式,阅读性上可以牢牢抓住用户眼球,因为这种特性,所以在大促海报、新品发售的时候,居中对齐也是运用的比较多的一种形式。

 

(4)两端对齐

两端对齐的排版方式多用于画册的排版,适合于多行文字。在面对大段英文进行排版时经常会因为字节/符号的原因导致文字两端很难绝对对齐,导致视觉效果显得比较粗糙,这时候就是用强制两端对齐或者强制两端对齐末行左对齐去运用于排版。这样可以使版式更加严谨、工整,提高阅读的效率和增强视觉文字带来的美感。

除了对文本的处理,也可以对设计元素进行对齐,通过两端对齐的设计手法,可以使得画面更有秩序美,形式上也更加舒服美观。

 

(5)顶部对齐

顶端对齐顾名思义就是纵向横排的对齐方式,这种对齐形式在我国古代的书法和书简中是比较常见的,所以,这样排版形式可以营造一些中国的古代文化的特色,在艺术展览或者中国的传统佳节都是比较常用的,虽然它的阅读性不如其他的对齐形式,但是,能营造一些文艺范和中国风的氛围。

 

(6)底部对齐

底对齐也同样是使用纵向排版,可阅读性相对来讲是所有排列方式中体验感最差的,一般在设计排版的过程中不会单独使用,会用于少量文字或者做装饰修饰版面使用。也可用于电影海报或人物海报的排版方式使用。

 

3.1.1 对齐原则:视觉对齐

什么是视觉对齐呢?一般我们的对齐形式,都是通过软件将两个元素进行物理上的对齐,这种对齐形式,可以解决99%的对齐问题,但是,剩下1%是比较特殊的情况,就是我们实际上对齐了,但是我们人眼看上去感觉没有对齐,这种情况就需要我们去手动调整,也就是视觉对齐。

比如:这两行字,左边对齐了吗?虽然我们用辅助线去测量,但是仍然会感觉第一行偏右了一点的感觉。

这个时候,我们就需要手动的去调整视觉对齐形式,让第一行的文字稍微出来点,形成视觉上的对齐。

虽然说上面的例子有点小众,也不会经常用到,但是我们画了一组图标,我们按照辅助线的高度将他们调整为以后,会发现他们看起来有的大有的小,但是,他们在辅助线上去量,它们是一条高的,这个时候,我们就需要手动去调整他们的视觉对齐和视觉大小关系。

调整之后,我们让它在视觉上看起来比较统一,大小是一致的。

 

3.2 对比原则

对比,是我们在设计中提升设计感所最常用的设计手法,通常对比原则的设计思路是为了避免页面中的元素太过的相似,如果字体、颜色、大小、线宽、形状和空间等不相同,那就干脆让他们截然不同。版面让用户能在第一时间分清页面的主次关系,形成对比通常是最重要的方式之一。

在版式中,对比最常用的就是区分一个元素与另一个元素截然不同的,我们都看过武打片,怎么能突出主角特别厉害呢?那就需要一群人去和主角对打,然后都被主角一一打败,这样,就是运用对比的手法突出主角的过人之处。

常用的对比手法有:大小对比、颜色对比、虚实对比、疏密对比。

 

(1)大小对比

大小对比,容易表现出画面的主次关系。在设计中,经常把主要的内容和比较突出的形象,处理的较大些。通过大小来区分层级,视觉让信息区分为重要和不重要的。

 

(2)色彩对比

色彩对比也是我们在做设计的时候想突出某些重点时常用的设计手法。相比于其他对比来说,颜色对比的分类也比较复杂一点,常见的色彩属性中能运用的对比的有:色相对比、明度对比、冷暖对比等。

例如,我们想在突出一些重点,让用户一眼能看清的时候,我们可以使用色相对比。

除了突出主体外,颜色对比还可以烘托气氛,例如常见的冷暖对比,可以让人有更有视觉冲击力,更加吸引人的眼球。

 

(3)虚实对比

“虚实”和“对比”本质上是对主次关系的取舍与调控。最常看到虚实对比的地方是合成海报中,为了突出主体,可以将周围一些元素按照一定关系进行虚化。其次就是为了营造空间关系,将页面中的元素进行虚实的对比,让画面更有层次感。

 

(4)疏密对比

疏密对比,也可以理解为是密集图形和空白空间,在版面中所占的比例关系,在版式中可以是图形、标题、正文等的分布方式,可以在某个位置密度分布,或者在其它区域少量的散落。疏密对比同时也具有大小形态的对比,明暗对比的效果,可以用空白和主体进行不规则或规则的分布,也可以在特定领域集中摆放。

疏密对比可以很好的营造我们版式设计中的节奏感,让画面更具设计力,版面设计中,疏会产生秩序感,让人感到轻松自在,而“密”给人急迫紧张的感觉,当疏密配置在同一版面中,画面才能产生节奏感,提升阅读舒适度。

对于版式的设计来说,处理好疏密对比关系,才能平衡好读者的视觉心理。

 

3.3 重复原则

重复原则,让设计中的视觉要素在画面中重复出现,比如:重复的字体、颜色、形状、线条、大小和图片等,这样,可以为版面增加理性和统一性。

当然,我们版式中常用的重复设计手法不是毫无目标的去复制重复,而是将需要重点传递的元素按照一定的规律去排列,在版式中形成一个规则的秩序美。

我们生活中也有很多重复,比如我们地板上的瓷砖,还有密集的写字楼。这些都是利用重复的统一的特性将空间最大化,所以,重复在设计中主要有两个作用:一、统一形式  二、加深记忆。

 

(1)统一形式

在我们版面中,肯定会有主次关系,不能全部都是大小不一样的元素,所以,我们需要统一设计元素和大小,来保证画面的统一美。

 

(2)加深记忆

我们都知道,谣言重复的足够广,范围足够大,那么就会有很多人去信,这便是量变产生质变,做设计的也是一样的,我们想要加深用户对品牌的感知,我们只需要不停的重复即可,比如,我们小时候在背诵课文的时候,一般在规定的时候内背不下,老师都会让我们抄几遍,然后再抄的过程中,我们便不知不觉的背下来了,这个抄的过程也和设计的中的重复是一样的道理。

而在实际设计工作中,我们重复的应用也是比较广泛的,应用场景也是比较多的,通常可以分为:基础形重复、主视觉重复、绝对重复和相对重复。

 

3.3.1 基础形重复

在版式设计中,任何基础单一构成的形状都是可以做重复的,单一基本形的重复构成:在同一画面内只有一种正形,在此基础上,通过将基本形进行空间距离的反复排列而构成的重复。但是任何基础的形状我们都可以归纳为点线面。

 

(1)点的重复

有规则的点的重复,可以让我们的画面看起来更有秩序感,让我们的视觉感受更加舒服,但是太过于统一的点元素的重复也会过于单调,所以,我们可以通过调节形状或者色彩来给画面调节单调,避免画面空乏。

不太规则点的重复,可以给画面传递空间的变化,增加版面设计中的运动感,让画面看起来更有活力。

 

(2)线的重复

线的重复,可以是元素的线,一行文字也可以看作是线,所以在我们在做banner或者做海报的时候,会经常看到竖着排版的文字,我们可以将它看作是线。

 

(3)面的重复

面的重复,不一定是完全相同,只要构成的形式差不多,我们都可以将它看作的是一个面,可能上面的颜色或者纹理了有差异,我们的都可看作是面的重复。面的重复在UI和网页中的应用是比较广泛的。

 

3.3.2 主视觉重复

主视觉的重复,我们说的是一个比较复杂的组合的形状,比如场景的是品牌LOGO或者传播比较广的图标或者图形,我们在将它复用到我们的设计中,所以,我们可以看到很多大牌的产品的外包装上会印满自家的LOGO,这些都是有规律的骨格重复,还有就是形状是没有规律的骨骼重复,例如一些比较不规律的形状,我们只需要运用的合适,也可以产品韵律美。

 

3.3.3 有序重复与随机重复

按照重用的重复手法,我们可以将重复分为绝对重复与相对重复两种形式,我们在设计中,可以根据实际的情况去灵活的使用和变通。

 

(1)有序重复

有序重复重复就是对原始的元素进行一成不变的复制和粘贴,通常让画面看起来比较整齐有秩序,让用户在秩序美中得到舒适感。

 

(2)随机重复

随机重复则是在原来图形的大小位置和形状都做了一定形式的更改和处理。通过适当改变形状的颜色、大小和位置,让画面有一定的运动感,让版面更加充满活力。

 

3.4 亲密性原则(组合)

亲密性原则是将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,

这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。如果多个项目相互之间存在很近的距离,它们就会成为一个视觉单位,而不是多个孤立的元素。这样有助于组织信息,减少混乱,为读者提供清晰的结构。

在我们日常的生活中,也能看到很多利用亲密性原则让我们生活更加便利的案例,比如,我们日常去逛超市的时候,超市商品的摆放原则也是按照亲密性原则,将相同的品类放在一个区域或者一个货架,让用户挑选的时候更加方便,节省用户的时间。

而在设计中,亲密性的运用而是非常广泛的,通常我们可以分为:间距形成组合、分割形成组合、色彩形成组合、视线形成组合

 

3.4.1 间距形成组合

我们的潜意识里,在电梯或者马路上,看到一对男女离的比较近,我们会默认他们要么是情侣关系,要么是认识的同事,又或者是其他的关系。

在版式设计中也是一样的,我们需要将有关联的信息进行归类和整理,将意思相近的的文字或者元素离的比较近,无关的可以用间距隔开,这样,我们的用户阅读起来也会清晰和方便很多。

 

3.4.2 分割形成组合

分割形成组合其实是留白的加强版,因为有时候我们的信息层级太多,单纯的留白无法区别彼此的亲密关系,我们可以通过线条或者其他的形式将版面进行分割,让彼此的关系能看的更加清晰明确。

 

3.4.3 色彩形成组合

我们都听过一句古话,叫“近朱者赤,近墨者黑”,版式中,以相同的色彩去决定亲密关系形成组合也是比较直观的,例如我们通过相同颜色的校服便可以分辨哪些学生是一个学校的,所以,我们版面中颜色一样的元素肯定具备亲密关系。

 

3.4.4 视线形成组合

视线也是就是元素排列的角度,就像我们生活中,一个团队一起朝着一个方向去努力一样,它也是比较直观反应在我们版式中的一种亲密关系,如果视线的角度一样,那么元素间肯定有某种联系。

 

4 . 格式塔原理助力版式的合理性

格式塔(Gestalt)理论是心理学中的理性主义理论之一,强调经验和行为的整体性。

格式塔心理学研究认为,人类具有不需要学习的组织倾向,使我们能够在视觉环境中组织排列事物的位置,感受和知觉出环境的整体与连续。研究人员在观察了很多重要的视觉现象后,其中最基础的发现是人类视觉是整体的。人类的视觉系统自动对视觉输入构建结构,并在神经系统层上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。格式塔原理的4项基本法则分别为:简单、相似、接近、闭合。

 

4.1 简单

“我们的眼睛在观看时,眼和脑并不是在一开始就区分一个个的形象的、各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体“

简单原理包含了常见的构图法则,比如,最常见的三角形构图、均衡构图法则、对阵构图、向心式构图(圆形)、对角线构图和X形构图法则,其目的都是在复杂的信息环境中构建更易懂的整体。三角形构图、X形构图、斜线构图在运动广告中经常用到。

 

(1) 向心构图

向心式构图,是让四周的元素呈现中心集中,而主体位于集中点的构图形式。简单的说,向心式构图就是让主体被四周物体共同所指,为了便于大家理解,可以脑补一个位于敌军中央的将军被包围的场景。

它最大的特点,就是能够引起强烈的聚焦效果,就像是对画面主体的加成一样,直接人的视线引导到画面的主体。

 

(2) 均衡构图

均衡是视觉艺术上的一种量比关系。摄影家维利·奎克指出:“每一幅照片都应保持一定的均衡。”一幅画面只有做到了均衡,才能达到艺术审美与视觉心理上的基本要求。

均衡式构图也称为平衡式构图,它给人以宁静、平稳的感觉,但又没有对称式构图的那种呆板、无变化。均衡式构图可分为对称平衡和非对称平衡两种。

均衡式构图区别于对称式构图,因为这种形式构图的画面不是左右两边的元素、数量、大小、排列的—一对应,而是相等或相近形状、数量、大小的不同排列,给人以视觉上的稳定,是一种异形、异量的呼应均衡,是利用近重远轻、近大远小、深重浅轻等透视规则和视觉习惯的艺术均衡。如下图中,左右不一样,但视觉上仍对称。当然,均衡中也包括对称式的均衡。

均衡构图的特点是通常这种构图给人以满足的感觉,画面结构完美无缺,安排巧妙,对应而平衡。常用于月夜、湖面、夜景、新闻等题材。

 

(3) 垂直构图

垂直线构图,是指画面主体元素成垂直线分布,画面具有明显的垂直线构成的图案形象。

垂直线构图源于左右方向力的均衡状态,因此垂直线构图可用来展现挺拔的视觉感,是展现力的美感的构图形式。通常用矩形或者线条等元素作为承载容器来展示垂直线的力度及形式感。

垂直线构图法的特点是会给人一种挺拔、纤细、向上生长、充满无限活力、庄严、强有力的感觉。

 

(4) 对角线构图

对角线构图其实是引导线构图的一个分支,将视觉引导线沿画面对角线方向展布,就成了对角线构图。

引导线可以是直线,也可以是曲线甚至是折线,只要整体延伸方向与画面对角线方向接近,就可以视为对角线构图。

当画面出现对角线时,必定会给画面带来动感。因为不平衡构图会让画面产生不稳定感,并且用户的视线方向也会受对角线的方向牵引。

对角线的特点,通常版式中会有最长的直线作为引导性。引导观众视线的能力很强,能带着观众视线“走”遍整个画面。

 

(5) X型构图

X形构图,使画面产生丰满的感觉,有的丰富而深邃的X形构图与设计创意密切配合,用来传递富有哲理的意味。还有一些设计按X形布局,透视感强烈。

X型构图,通常以线条、影调、元素等,按X形布局透视感强,有利于把人们视线由四周引向中心,或具有从中心向四周逐渐放大的特点。

 

4.2 相似

“我们的眼睛容易关注那些外表相似的物体,且不管它们的位置是不是相邻,总是可以将他们联系起来。”根据我们潜意识的分类,颜色和形状相似会自动归类为一组,尽管它们可能没有放在一起,但是,仍然不会影响我们的视觉感知。我们可以将相似原则分为三类:形状、大小、色彩。

 

4.2.1  形状

不同形状的信息组,多用于处理信息的重要程度平均的信息,不强调也不弱化不同的信息组,仅区别不同。

 

4.2.2  大小

不同大小的信息组,多用于区分信息的重要程度。

 

4.2.3 色彩

如果相邻元素色彩差异足够大,信息组很容易用作强调和区分。

 

4.2.4 相似性原则在设计中的应用

相似性原则在实际设计中的应用也是比较广泛的,我们可能在有意或者无意中会使用到,那让我们一起来看看相似性原则是怎么提升我们设计的质量的吧。

 

(1) 相似元素容易识别为一个整体

在我们设计版面或者界面的时候,我们可以把大致相同的元素看为是一个整体,例如,我们看下图,虽然定位和车的图标是不同的图标,但是他们使用的颜色、大小和线的粗细是一致的,使得内容看起来是一个整体,其次是文字部分,使用了相同层级的文字的字体和字号,使内容看起来是并列的层级。

 

(2) 相似颜色容易识别为一个整体

我们想要不同的数据或者元素看起来有联系,我们可以将他们的颜色改为一样的,这样用户更容易分别。比如,我们在入住酒店在选择日期的时候,我们为了让用户能快速分辨为自己的入住时候,我们可以将用户选择的时间段的颜色设置为一致的,这样,使它们既有联系又有区分。

 

4.3 接近

“单个视觉元素之间无限接近,视觉上会形成一个较大的整体。距离近的单个视觉元素会融为一个整体,而单个视觉元素的个性会减弱”。比如,我们只要稍微改变元素的间距,我们便可以看出不同,例如,图中的蓝色的圆点相互之前水平方向比垂直方向的距离更近一点,那么,我们可以看到4排圆点,而右图我们则可以看作是4列圆点。

简单的来说,便是:

  • 行间距<列间距,视觉呈“列”排布,纵向关系密切形成整体
  • 行间距>列间距,视觉呈“行”排布,横向关系密切形成整体

 

4.3.1 邻近性原则在设计中的应用

间距处理降低用户认知

我们都知道,我们在设计版面或者APP的时候,一般会涉及到很多信息的处理,我们为了让用户在第一时间里可以区分不同信息的层级,我们可以用间距来帮助用户来区分,比如,当列表信息都平均分布的时候,我们大脑试图分组简化信息的时候,大致位置和间距都相同的列表解读的时候,我们会花费更多的精力,所以我们需要人为的做出差异,帮助用户的大脑去识别。

比如,我们设置中心的列表,可以根据跟功能属性的不同来划分间距,让用户能比较直观的判断那些不同的功能。

 

4.4 闭合

人们在观察熟悉的视觉形象时,会把不完整的局部形象当做一个整体的形象来感知,这种知觉上的结束成为闭合。如果局部形象过于陌生或简略,则不会产生整体闭合联想。能够让用户自主的产生闭合的图形必定是生活中比较常见的,如:正方形、三角形、圆形、狗、车辆(这也是为什么我们能在经常把天上云朵想象成各种不同的动物的原因)。

 

4.4.1 闭合性原则在设计中的应用

(1) 规矩的版式提升易读性

我们在设计文字编排或者在做信息编排处理的时候,我们将信息按照简单且常见的图形轮廓来处理信息,这样能提升用户在阅读信息中的轻松和安全感。

比如我们常见的国家反诈中心的APP的启动页,便是按三角形构图来处理,因为它是一个正三角,所以会给与人一种安全稳定的感觉,我们在APP上阅读最多的信息列表,也都是基本上按照规矩的形状来排版,使得版面看起来会更整洁。

 

(2) 不完整更具设计感

我们在日常生活中,完整且闭合的事物见过多,偶尔看到一些缺少笔画的字体或者断口的图标会觉得更具有新鲜感,会让用户觉得比较艺术性。但是我们在缺少笔画和断口的时候,要保证字体和图形的可识别性,不能让大脑无法产生完整的联想。

 

5 . 常用的九个排版技巧

前面我们了解很多排版的基础知识,那么,我们怎么能用到自己的工作中,这里我总结了九个常用的排版小技巧,希望对大家有所帮助。

 

5.1 对比产生设计美感

我们在设计版面的时候,一般处理的信息会比较多,我们想让用户能快速的读懂版面传递的信息,我们首要的便是要大胆的对信息区分。我们的排版便是一次一次的进行对比,通过不断调整对比程度来让版面阅读起来更舒适,视觉更具张力。

对于版式的对比,我们可以有以下两点需要注意:1.多段文本不要使用粗体字、2.表意不同的文字必有对比。

 

5.1.1 多段文本不要使用粗体字

我们在排版的时候,肯定会遇到大量文本的情况,这个时候,我们为了让用户有比较好的阅读体验,文本的正文尽量不要去使用比较粗的字体,因为比较粗的文本会让用户感觉视觉层级比较重,体验会有点不适,其次是因为有的文本有标题和正文,如果都用比较粗的字体,区别不是很明显,不能形成信息层级的对比。

 

5.1.2 表意不同的文字必有对比

我们在处理大段信息的时候,为了能让用户快速分清信息的层次,对于传递信息不同的文本,我们需要字重上让用户一眼可以区分,在细节处给与用户良好的阅读体验,可以提升版式的质量。

 

5.2 间距处理是阅读体验的核心

前面我们了解到“格式塔原理”的“接近性原则”,用户在阅读版面信息的时候,第一眼便会根据元素的间距来进行视觉心理上分类,如果版面上的间距都一样,且间距的处理没有逻辑,会给用户的阅读体验造成障碍,如果用户无法主观的区分信息的分类,那么,这个阅读体验必定是不好的。

所以在排版的时候,我们需要注意将相关的元素靠近,无关的元素间距拉开,让用户能主观的区分版式的层级。

我们间距的处理也不会是随便给的,在版面中的间距也需要有一定的规律。在我们给客户或者领导讲方案的时候会具专业性。

想要给与用户良好的阅读体验,我们在处理版式中的间距问题有两个需要注意的细节:1.行高根据文本行数制定、2.常规文本删除字间距。

 

5.2.1 行高根据文本行数制定

用户的阅读版面信息的时候,读两行字和读10行字所需要的时间成本都是不一样的,所以,我们文本的行数的疏密程度也会大大决定用户的阅读时间,通常情况下,我们对多行文本的行高处理是根据文本的行数来定义的,通常是文本的行数越多,文本的行高也会越高,设置的值也在1.2-1.5倍之间,按照视觉感受可以自行的调节。

 

5.2.2 常规文本需注意字间距

字距大设定也对人的阅读也会有影响,字距过大的时候像树懒说话一样慢,字距小的时候感觉说话比较快。

当字距是800时候的感受,感觉像动漫里的树懒一样,说起话来慢吞吞的。

当字距是-100时候的感受,感觉像和人在吵架一样,说话的语速比较急切。

在一般的平面设计中字距设定为正负40-70之间去选择,但是在UI设计中,字距一般为0。

 

5.3 版式节奏控制用户视觉感受

我们用户在浏览任何版面的时候,都会有自己主观的浏览顺序,我们设计者需要通过版式去引导用户的浏览节奏,一个好的版式可以让用户根据我们的内容去自主的由上自下或从左到右的浏览,在浏览过程中就像看电影一样,有前奏的铺垫,有高潮有起伏,让用户对接下来的内容有所期待,好的版式可以给用户带来一场像电影一样的视觉盛宴。

如果我们整个页面比较平,或者全部是比较炸的视觉,会让用户觉得平淡或者不舒服,所以,好的版式是有铺垫有比较吸引人的设计点(例如强对比之类的),我们设计者要学会控制版式的节奏,

为了控制用户的阅读节奏,我们可以从以下两个角度来入手:1.版式需要有始有终、2.适当的停顿跟变化让版面更丰富、3.通过版式让用户无意识的给内容编号。

 

5.3.1 版式需要有始有终

在排版网页或者多页面的作品集及UI的时候,我们每一个页面不会是孤单的存在,上一个页面背景颜色可以复用到这个页面的字体上面,上一个页面的的点缀元素可以复用到其他页面,这样,可以让我们的每个页看起来更加整体,也不是每个页面都是单独的风格。

 

5.3.2 适当的停顿跟变化让版面更丰富

国家修建高速公路为我们省下了宝贵时间,经常走高速的人会发现,在我国的高速公路中没有哪条公路是直行。也许在某一段路上你会走的很舒服不用打反向。但是走一段就会有转弯,为什么不修建成直的,如果修成直可以省下成本,而我们也不会增加里程,非得这么修吗?

在不改变车速的情况下连续高速行驶。眼睛、思维和身体始终保持一种不变的状态,司机很快就会感到疲劳,注意力自然就很难集中,甚至看不清远处的物体。不用说,这很容易发生交通事故。另外长期直线行驶也会让驾驶员产生困意,如果真的睡着了,后果不敢想象!

所以我们对于排版也是一样的道理,如果在排版作品集或者网页的时候,用户在一顺看下来的时候,版面的变化比较小的时候,用户会感觉版式是比较无聊的,我们需要对用户当头棒喝,在版式上的形式上作出变化,给与新鲜感。例如当用户看了2页白色的版面后,下一页我们可以适当给点彩色页面,让用户感觉到变化。

关于版式的变化,我们可以从以下角度入手:1.色彩的变化、2.疏密变化、3.浏览路线变化。

 

(1)色彩的变化

用户在浏览一个页面的时候,对页面的背景色彩的感知是最强烈的,这样刺激也是最大的,页面间的不同,用颜色背景提醒用户,已经进入了第二屏,是最直接的。

彩色页面过多的时候,我们可以在中间插入消色(黑白灰),当深色的页面过多的时候,我们可以在中间加入浅色的页面来进行过渡,来平衡用户的视觉。

 

(2)疏密变化

我们坐过长途汽车都知道,在高速上跑一段时间,会遇到一个服务区,方便司机乘客休息和喝水,缓解疲劳,让大家在一段长途中不需要长时间的神经紧绷着。

用户在浏览信息密度比较大的版式的时候,我们在下一版块或者在后面的某处需要给视觉休息,视觉休息区可以是留白、指引图标或者是小段的文本,在页面中穿插,让用户浏览起来没那么累。

 

(3)浏览路线的变化

控制版式节奏除了在色彩和疏密外,我们还可以在用户的浏览路线上做改变,来提示用户,进了新的版块了,这一点在UI和网页中用的比较多,当用户浏览瀑布流或者纵向单一的版式过多的时候,我们在用户进入下一屏的时候可以插入横向的排版形式,来保证用户,浏览视线角度没那么单一。

 

5.3.3 通过版式让用户无意识的给内容编号

好的版式,应该能让用户第一眼知道第一眼能看哪里,主次分明,通过版式本身来引导用户的视觉走向,让用户主观的知道从哪里开始到哪里结束。

一般人的正常浏览顺序是从左自右、自上而下,由标题到正文,这都是比较基础的浏览顺序,如果在人们视觉心理层级来说的话,有色相元素的会优先,没有色相的元素会次之。饱和度高的元素视觉层级会优先,饱和度元素低的元素次之。在白色背景下,颜色越深,视觉层级越高,而黑色则相反。大的元素视觉层级优先,小的元素视觉层级则次之。复杂的元素视觉层级优选,简单的视觉元素次之。

从选字体的角度来说,衬线字体的视觉层级会优先,无衬线则次之。毛笔字和其他美术字体优于常规黑体,

按照留白的层面来说,留白越多的元素视觉层级越高,留白少的次之。

我们在设计版面的时候,遵循这些基本的视觉规则,可以让版式更有韵律感,让版式自动的使用户观看的时候去编号。

 

5.4 版式中的衔接尤为重要

在排网页、作品集和长图的时候,每一版块与另一版块过渡的地方就是衔接处,一个好的作品需要让衔接做的极其自然,才能在视觉上让用户感觉整个作品是成套系的,没有拼凑感。衔接自然我们可以从以下两个角度入手:1.无关版块需切断、2.两图之间增加文字协助衔接、3.不同版块底色区分过渡、4.版块之间元素破栅格衔接。

 

5.4.1 无关版块需切断

老话说过“剪不断,理还乱”,如果是不相关的页面,我们在设计的衔接处,应该干脆的切断,避免造成版式的视觉错乱,这样干脆利索的过渡能让衔接更自然,用户在视觉上的理解,会比较直观,看起来会没那么吃力。

 

5.4.2 两图直接增加文字协助衔接

我们都知道,图片和图片之间都是面,他们的切断感是比较强的,在切断的过程中有点生硬,我们需要在中间加上视觉缓冲区,让中间的隔断没那么突兀,通常的手法是在图片和图片之间加上说明文字,这样可以让过渡更加清晰。

 

5.4.3 不同版块底色区分过渡

我们为了区分页面之间的不同,提示用户进入了新的页面,也可以通过底色去区分,通过色彩之间的不同,可以让区分更加明显,在视觉上的隔断比较果断,避免用户在视觉上产生错觉,能让用户在视觉心理上区分页面与页面之间的差异。

一般我们用颜色去区分过渡也是有规律的,最常用的颜色便是,黑、白、浅灰和主色,这样的分割可以让版式更加整体。

 

5.4.4  版块之间元素破栅格衔接

我们让版式衔接自然除了需要将无关的版式果断的切断外,如果版式直接有承接关系的话,我们可以使一个元素跨越两个版块让版式的衔接更加自然,且版式相关的话,在视觉心理上也给与用户呈上启下的作用,让用户能在视觉上让版式关联起来。

 

5.5  版式中元素都有隐形基线

版式中每个元素都有其放置在其位置的意义,横向跟纵向都有隐形的对齐基线,可以让设计看起来更规整协调。优秀的设计师应该细心对待每一个元素, 不管它是主体元素还是点缀元素。关于隐形基线我们可以从以下几点入手:1.位置也可以复用、2.善用硬栅格的版式设计。

 

5.5.1  位置也可以复用

在日常的设计中,元素样式的复用可以增加版式的一致性,同样,我们元素的位置也是可以复用的,可以使得用户在版式中能找到规律,有规律的版式会让用户更觉得版式的统一感,能提升用户在阅读过程中的视觉舒适感。

 

5.5.2  善用硬ssm格的版式设计

我们可以通过栅格让我们的设计更加规矩,通过栅格去约束我们元素的位置,我们只有先去了解规则,才能去打破它,这样能保证我们的版式是符合大众的审美,不会做出特别奇怪的排版,所以我们在设计前,应该习惯先做好栅格。

栅格的处理也是有公式的:(总宽-页边距-水槽大小)/栅格数量=每列宽度。

 

5.6 版式中的自然留白

“留白并不是刻意的,填充才是。”,我们要习惯在版面中留白,不要为了让版面更丰满,而去刻意的填充一些不相关的元素,我们画面中只有正负空间平衡,才能看起来比较舒适,这里的负空间就是说的留白。我们可以从以下两个角度来入手:1.元素和英文都是留白的支点、2.点缀元素让版式更加细腻。

 

5.6.1 元素和英文都是留白的支点

我们在排版的时候,有时候会因为版式和素材的原因,导致某一方的排版元素会偏多,使版面失衡,这里我们需要知道的是,关于留白的定义不一定非得是空白的,所以当页面失衡的时候,或许我们加点基础的设计元素:一条线、一个图案点缀就够了,也可以是英文作为点缀。

 

5.6.2 点缀元素让版式更加细腻

我们在遇到素材或者文案比较少的时候,这种情况,我们可以在空白的区域添加一些简单点缀的图形,作为装饰,这样不仅可以使我们的版式看起来没那么空,让排版会看起来比较丰富。

如果我们觉得单纯的元素点缀缺乏设计感,可以在点缀元素加入一些层次,提升整个版式的设计品质感。

 

5.7 抽象让版式具备美感

我们在看一步新剧的时候,非常讨厌别人来剧透,甚至于过分的剧透都可以让我们放弃一部剧。

这便是人内心矛盾的地方,我们在设计中也需要注意,想要让用户觉得你的版式有设计感,不能让用户一眼就看透了,那么,就提不起用户的欣赏感。

我们为了让用户能体验到设计版式的高级感,通常用的设计手法是:1.图形提升设计感、2.让用户适当思考。

 

5.7.1 图形可以提升设计感

文字可以简单直接的传递信息,但是由于文字太具象没有任何的思考空囘,所以文字本身不具有绝对的美感。而图形可以给浏览者更多的想象空间。

如果我们在设计版式的时候,全身大段的文字描叙,会让用户看起来比较累,我们可以适当的改改版式,把一些能用图标表示的地方设计为图标,让版式更具吸引力。

 

5.7.2  让用户适当思考

让浏览者一眼看透,完全不需要思考的设计一定是路边的宣传单页,居民楼里的牛皮癣广告。真正让浏览者感觉具有设计感,有品质感的设计,一定是需要用户去思考的。

例如,我们苹果官网的文案就是做的比较高级,比如,把大屏幕上见换成,屏幕参数之类的,不仅没有记忆点,反而有点廉价。

 

5.8 特殊符号元素贯穿版式

遵循前面7条技巧可以让版式做到漂亮且易读,然而如果给版式中加入一些特殊符号贯穿整个设计,可以让版式增加记忆点,也会更高级且更整体。

例如京东吉祥物的微笑弧度就被应用在APP选择状态中,提升了用户的记忆点,还有每年阿里双十一的活动,都会运用猫头元素,让用户在不知不觉中提升了对品牌的印象。

 

5.9 组件思维来排版

UI设计需要严格遵循组件规范,可以极大的提升统一性使设计更严谨,排版同样需要遵循视觉规范,比如字号、色彩、点缀元素等,只有遵循规范的排版才是逻辑清晰且易读的。

通常版式中能复用的有:字体与字号、元素间距、色彩位置、特殊点缀、投影与圆角、手机模型等。

 

6 . 总结

我们的排版设计一定是需要遵循设计规则来进行创作的,单单凭借直觉,是很难做出优秀的设计作品的,为什么小朋友都喜欢看动画片,因为力量是线性放大的,是不需要积累经验的,靠变异或靠发现变身器就可以了。但是做设计上需要积累的,愿大家在设计道路上能越走越远。

 

原文地址:整点设计(公众号)

作者:Endings

转载请注明:学UI网》设计师应该了解的版式知识

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




看完这些韩国的UI设计,我终于知道差距在哪了!!

seo达人


#1.常用图标增加细节

图片

可能很多设计师说,图标我也会用啊,但是有极少部分设计师根本没有认真去应用图标,比如上图,这个产品在每一个选项上面增加图标进行信息设计,这样就避免全是文字的枯燥画面。

图片

上图这个产品,通过4个趣味性功能图标将整个页面救活了,试想,如果去掉这种图形化的表现形式,改成单色线性的,效果是不是又会大打折扣。

图片
图标特征的设计延续性,包括播放按钮都有着统一的特征。
图片

上图,一些小的列表场景都有图标的出现,还有中间这张图情感化生日蛋糕的图标设计,无一不体现对细节的深挖,体验的打磨。

图片

图片

 

#2.更个性的布局

图片

布局是最能影响视觉感官的设计语言之一,所占面积较大,进入产品第一眼的感受肯定是整体布局调性,然后到细节深入。在上图,我们可以看到设计师在首页大胆的运用图形叠加布局,圆弧背景图形与专辑封面叠加,错落有层次,营造氛围。

图片

在设计中,除了页面本身布局差异性设计,在包装时,也是将页面元素与画布外面相衔接,这样连续性的效果,让页面增加品质细节。

图片

上图,设计师也是在页面中采用图片错层叠加布局设计,杂志感与韵律节奏感让整个页面细节满满。
图片

如果你使用双圆角过多了,那么不妨试一试单圆角布局,但是需要整个体系保持统一。

图片

 

#3.超趣味性动画

图片

上图这个产品,全程虚拟小手在与用户互动,看起来感觉非常拟真化,也正是这种小细节的处理,才让产品打动人心。

互动视频链接:https://mp.weixin.qq.com/s/VlnFvhazOkpnuP0IqalAmw

#4.杂志化布局

图片
杂志化布局,在国内这两年都开始有不少产品在设计应用,杂志化设计思路,映射现实世界中精美杂志的设计和阅读质感;大标题、层叠布局、留白、大图等已成为产品杂志化的必要设计语言。

图片

图片与大标题文字叠加处理

图片

图片

 

#5.大量运用留白

图片

比如上图这个设计,设计师在处理布局信息时候,留白居多。在左侧页面处理中,通过图片丰富细节,然后再运用文字排版。右侧列表布局,也是大面积留白,可让用户在第一时间抓住关键信息。

图片

卡片之间布局也是大空间留白

图片

留白与个性化布局都有体现

好了,今天文章就分享到这里。大家下去多做一些设计练习,在做设计探索中多去延展应用,完成设计转化,设计品质更上一层楼。

 

原文地址:  功夫UX(公众号)
作者: 功夫UX

转载请注明:学UI网》看完这些韩国的UI设计,我终于知道差距在哪了!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档