首页

海报创意设计干货

seo达人

图片

海报视觉如何做的有创意?有哪些方法呢?

比如从构图、拟物、光影、嫁接、对比、或者反差?等等等等

每一种又都可以拆分成很多细类。

比如对比在视觉海报中的运用,又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了!

首先我们来分析一下大小对比是如何应用的。

 

一、大小对比

1、大小对比的作用

我们先看下这张图:

图片

两个元素, 如果一样大,平铺在画面中,就会显得普普通通的,没有任何亮点。

如果我们把其中一个放大,另一个缩小,再来看:

图片

画面是不是有特点了很多,并且有了节奏感, 就连文案排版也有更多的方式。

所以对比就是让画面的两个组成部分/元素,以夸张的手法,布局构图,以让画面产生强烈的反差。以提升画面冲击力,画面纵深,内容丰富度。是非常有效提升画面品质的方法之一。

那大小对比如何玩的精通,玩得高级呢?
我们一起来看一下:

01 人物与人物

⑴ 全身与半身对比

图片

图片

这种半身人物和小人物的对比,或者头部表情眼神与小人物的对比主要可以展示人物细节,后面的人物放大表情传递情绪,前面的人物展示全身,传递状态,可以很好地传递内容,常常用在各类视觉海报中。

⑵ 局部大特写与小人物对比 (下面右侧的图是江湖哥2017年做的图,分析两次了,哈哈,备注下)

图片

这种对比有强烈的大小反差,并且可以很大程度地拉伸画面纵深,表现出很强的空间感!
并且还有一个细节:这两张都是三角形构图,非常稳定。

图片

所以我们在设计的时候要也要注意画面的构图方式,夸张对比同时,要保证画面的稳定和饱满!

图片

⑶ 全身与全身对比

图片

全身的人物对比很小的人物,让画面有更多的空间可以利用, 可以留白想象,也可以打造场景氛围,展示更多场景氛围。

02 人物与场景

⑴ 小场景与大人物

图片

夸张化的对比,让本该小巧的人物矗立在场景里,很容易就营造除了一种巍峨磅礴的视觉感受。

图片

一般需要很高的设计成本,工时不小。简单点的做法我们可以直接在人物下面拼接一些小场景,比如这样:

图片

一些日常小需求中,没有那么多的时间去打磨细节,就可以这样做,既能保证按时完成需求,也能有一定的创意性。

⑵ 小人物与大场景对比

图片

这种方法也非常具有创意性,把一些很小的物体放大,人物缩小, 反差表现两个主体的大小对比。往往也能有出人意料的效果,需要更多的灵感和想法。

小节

创意本身就是打破常规,把不可能变成可能,达到出人意料的效果就是创意。本期分享的大小对比在画面中的各种玩法就是可以很好达成这种目的的方法之一,大家可以多去尝试,和练习,单这一种方法用好了就很牛逼了。

光影是在平面视觉里常用的一种技法方式,在说光影的创意之前,我们先说一下光影的作用。让大家对光有所了解。

 

二、光影对比

1、光影的作用

我们为了直观一些,直接用几个图片说明。
现在这张图,这是一个瓶子的图形:

图片

我们给瓶子加入光影:

图片

瓶子就变得立体了!

我们给背景加入光影

图片

空间变得有纵深了,画面层次也丰富了起来!

所以光在画面中最基础的有两个作用:
⑴让物体变得立体,更加真实!
⑵增加空间纵深,丰富画面层次!

那我们应该如何利用光影,去做更有创意性的设计呢?

光影、光影,先有光后有影。那我们就先来说说主要表现光的几个玩法:

 

2、光

⑴逆光
逆光就是主体在正前方,光源与主体重叠的一种使用方式,可以说是我们最常用的光影塑造方法之一了:

图片

它的特点是光源与主体重合,形成很强的对比,在画面可以可以非常好地聚焦视线,强化主体。

⑵侧光
侧光是光从主体侧面打过来的光,一般不会太强:

图片

主要是起到一个丰富画面层次,营造氛围的作用。

⑶顶光
从主体顶部打下来的光:

图片

这种光,可以有效引导视觉,把需要的部分亮起,不需要的部分暗下去,由上至下,吸引人的视线范围和顺序。

⑷聚光
从前方照射过来的灯光:

图片

聚焦视线,不要的地方全部暗下去,是一种最能收拢视线的打光方式了。有些细节比较丰富的聚光画面,暗部也会保留一定的细节,不会是一个纯黑色。

⑸造型
给光赋予一个造型,可以达到一种形式创意上的突破,
比如这种:

图片

把光塑造成一个人物的造型,下面放置对应的人物垂丧的状态,形成很强的人物情绪反差,可以说是非常有创意了。

还可以把光塑造成物体,比如这种:

图片

把偷过来的光塑造成与主体相关的某个物品造型,中间放置一个小的人物,同样也是一种很棒的创意方式。

⑹分割
除了打光方向,造型之外,其实还可以用光来风格画面,也可以起到一些非常亮眼的视觉效果,比如这样:

图片

以上就是光的玩法了,可以看到,光的玩法多种多样,利用好了可以让画面非常具有创意性。

说完了光,我们来接着说说影子的玩法都有哪些呢?

 

3、影

⑴投射
投射相交来说是比较常规的一种处理方式了:

图片

用投影的方式加入到画面中,可以增加画面层次,渲染氛围,让画面更有深度。

⑵造型
影子也是可以改变造型的:

图片

本来是应该与人物动作一致的影子,被改变造型与人物产生互动或对比,映射出了非常强的故事性,和内容深度,非常具有创意性了。

在一些插画或者游戏视觉中同样也可以应用起来:

图片

内容深度和想象空间直接拉满!

⑶剪影
配合逆光的形式,将主体以剪影的形式表现出来:

图片

剪影的表现形式,为了凸显剪影,背景上都会有一个逆光源存在,并且轮廓要清晰,在素材上刻画一些轮廓光源以让人物变得立体,可以营造出很棒的神秘感,常常应用在神秘嘉宾、新品发售、新角色发布等活动中。

应用在一些游戏中,强烈的明暗对比配合富有气势的人物造型,也可以打造出一些很有视觉冲击力的海报视觉!

图片

光与影的玩法多种多样,既可以让画面变得立体,又可以提高空间纵深。打光方式、造型、剪影、分割等等用法,可以让我们的视觉变得不太平淡单调,让画面拥有无限想象力的创意方式。

海报视觉如何做的有创意?有哪些方法呢?

比如从构图、拟物、光影、嫁接、对比、或者反差?等等等等
每一种又都可以拆分成很多细类。
比如对比在视觉海报中的运用,又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了!

今天就先分析一下大小对比是如何应用的。

 

其他对比

1、阵营对比

阵营对比的特点是5:5分画面,以对比色铺垫画面,形成强烈的视觉对比,和阵营感。常用于表现两个不同的阵营,或者正反派的视觉表现中。

图片

除了影视海报、游戏,竞技类体育类也常常使用这种对比方法:

图片

主要表现:对抗、竞争、阵营

 

2、状态对比

状态对比常用于表现同一个人或主体物的多种状态,比如人物的正常状态和特殊状态对比。通过一些技法让两种状态和谐地拼接到一起,是让单薄画面丰富起层次和内容的一种有效方法。

比如用画面拼接的方式:

图片

或者是同一主体,把两种状态表现到一起的方式:

图片

主要表现:人或物的的两种不同的状态,冰对火、明对暗、正常对黑化等等。

 

3、时空对比

让两个不同的时空联系到一起,形成时间地点上的反差对比。

⑴两个不同空间的对比

由同一个元素贯穿两个不同空间,提供画面的延续性,表现出打破/穿越空间的意境,非常具有冲击力。

图片

⑵两个不同时段的对比:

同一人物不同时期通过倒影等巧妙的表现方式,与主体形成时间上的对比。具有延续时间长河的感觉,为观者提供非常大的想象空间,是一种很有创意性的的方法。

图片

主要表现:空间穿越、时间变化的对比。

 

4、情绪对比

这种创意方式更多是传递人物的情绪,安静的状态
对比愤怒的状态,快乐的状态对比悲伤的状态,

图片

也可以表现人物的两面性,正常状态和阴暗面等等:

图片

会让观者感受到强烈的情绪传递,视觉表现上反而不会那么注重。

主要表现:重视情绪的传递

 

5、虚实对比

此虚实非彼虚实。
和我们常说的虚实对比不同,这里指的是虚幻和真实的对比,比如:

图片

用线条或者影子打造一些和实体区别开的虚构元素,和实体的元素形成对比,会有一种很虚幻浪漫文艺的感觉,可以用于表现一些幻想,不切实际的爱恋类似的主题中,能达到很少见的一些视觉效果。情感和创意都能得到很充分的传递。

 

总结 

以上就是我今天想和大家分享的内容,依旧是一些视觉层面的知识点,希望对大家所有帮助和启发!


作者:慢热

转载请注明:学UI网》第一次写3000字的干货,献丑了!

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


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


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


体验度量经验分享:如何沟通共识?

seo达人




一、共识目标

共识目标大致分为两方面,拉齐理解和对齐标准。

拉齐理解,减小彼此间的认知差距。总体上,我们需要拉齐彼此对度量长短期价值和目标的理解;到各执行阶段,则需要拉齐对所需资源和预期输出的理解。

图片

对齐标准,选择团队认同的维度指标与监测方式。个体对体验优劣的主观感受和不同岗位职责的关注视角不尽相同。总体上,我们需要以产品定位规划为指导,结合客观资源情况选择适合的衡量标准。

图片

如上图举例,一个对内的商户操作系统与其他竞对在系统操作层面的比较意义不大,度量模型中用于和同类产品对标的功能完整性的参考价值降低,则可以考虑暂不纳入监测维度。

确定维度后的下探监测指标是共识最主要的内容。如上举例,当前业务首要关心产品SOP(Standard Operating Procedure 标准操作程序)“使用率”,而这项指标与已确认的参与度指标定义极为贴合,那我们就不妨直接将该项做为参与度内衡量指标优先接入。

 

二、共识内容

到了具体的共识内容,我们再按立项之前、项目执行,项目复盘的阶段顺序聊聊。

1、立项之前

01.确认要做体验度量吗?
体验度量模型从搭建、验证,到持续分析应用需要一个渐进的过程。充足的数据和稳定的调研机制是良好应用模型的基础。处于探索与深化初期的产品调整较为频繁,数据资源可能也有待完善。这一阶段体验度量理论方法或可以辅助完善线上埋点、建立定期走查、用户调研等机制,但对度量前期数据可用于分析的价值预期要适度降低。

图片

02.首期度量的范围和预期?

首因效应的影响不容忽视。虽然第一印象并非总是正确的,但却是最鲜明、最牢固的,并且决定着以后双方交往的进程。

如上说到,度量需要一个渐进的过程。我们可以选择由局部扩充至整体,也可以由整体完善至局部。首期度量就面临着这样的选择,当然选择的范围也对应着不同的预期。

由局部扩充至整体,围绕业务当前需求,圈定最小度量范围。这样选择,一方面可以适度减低试跑数据的成本;另一方面,首期度量结果还不便向前比对应用分析,但这不妨碍调研监测到的信息为业务当前需求提供辅助价值。需要注意的是,虽然选择了由局部开始,但要始终遵循度量模型既定的统一框架,不能过分定制化。

由整体完善至局部,先监测宏观指标再逐步完善下探。这样选择,一般可以快速选定已处于长期监测的指标接入系统,但也因指标较为宏观,初期不免暂时无法解释数据现象,就需要多期的下探追踪来定位原因。

 

2、项目执行

01.指标统计

这部分是共识内容的主体,具体指标选取与统计方式我们在《体验度量经验分享:如何搭建体验指标模型?》中进行了梳理介绍。这里补充两个共识小方法,准备详细参考资料选取整合已有资源

对应每次共识的内容,参考资料可以有效提高沟通效率。“站在前人的肩膀上”在具体可感的案例指标基础上调整,远比凭空讨论有效。

选取整合已有资源,“避免重复造轮子”。举例满意度维度,如此前已建立了相似的NPS调研制度,那便不必费时费力重新发调研问卷或是开发线上场景化调研能力。接入现有调研数据,选择符合模型需要的数据接入或许更经济适用。然后,在此基础上再去优化指标细项与收集方式。

02.分析提炼

指标选取和统计仅仅是准备,怎么应用现有食材炒出好吃的“菜”,目前依旧需要人工分析提炼。

结合业务所需,明确重点分析方向,深挖原因是收获满意结果的基础。面对大量的数据呈现,虽不可预知提炼的结果,但唯有聚焦能减少迷失,尽量避免最终呈现结果过于泛泛。
分析结果往往包含需求洞察、痛点定位等多条信息,整体打包解决稍不实际。为跟进度量结果逐步落地,需明确优先级共识,推动度量不仅仅停留在“报告”的阶段。

图片

 

3、项目复盘

01.如何评定度量的投入产出?

每期度量复盘,除共识达成情况和后期调整外,团队内对度量本身的投入产出评定常常有被忽略。

因度量周期较长,定位问题也较宽泛,即便已经定义了问题优先级,通常状况下也不便短期内解决,有些方向性的洞察也会分散应用到更多常规需求上,度量的价值也就没能被很好的跟踪记录下来。这一方面我们的经验也稍显欠缺,与需求绑定似乎还是不够明确的解决方案。拿出来和大家分享,期待收获更多的讨论。

 

三、共识方式

最后,简要聊聊共识的态度与形式。

中立的态度是沟通的基础。每个环节共识前,可以先单独收集团队成员的思路想法,引导大家放心分享自己的见解,提高收集效率,而不需当即讨论合适与否。

内部访谈,基于团队成员职责差异,制定访谈大纲与沟通顺序,为方便更高效的沟通与记录。内部沟通在达成指标统计共识的基础上,更可以帮我们对产品表象之下的业务逻辑有更加深入的理解。

稳定的节奏,明确每一阶段的待办与负责人,定期组会对齐进度,定期汇总小结,逐层汇报共识,得到更广泛团队成员的认可。

以上,便是对往期度量共识中非理论方法部分的梳理。如何沟通没有标准,共识程度也难以衡量。期待大家提出宝贵意见,共同讨论如何将度量的理论方法更好地应用于业务实践。


作者:李明玥、贺紫蒙

转载请注明:学UI网》体验度量经验分享:如何沟通共识?

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


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


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


一文搞定UI设计间距那点事!【进阶篇】

seo达人

 一、文字与间距 

文字是UI设计中最重要的信息传递元素,文字的排版看似容易其实并不简单,因为文字的属性众多,比如字号、字间距、行高、段落等等。

很多设计师对文字属性很了解,也能够合理运用,但总会卡在开发环节,花费很长时间验收,最终还是得不到理想效果。

下面我们从根上去认识文字,对文字中能够影响排版间距的属性,一一解析,并且了解开发逻辑,正确与他们对接。

 

二、文字-行高

字体设计师,为了能满足文字行间距的合理展示,通常会给字体设定一定的行高。

行高就是在设计软件中选中文字后,上下外边框高度,字体的行高没有标准,不同的字体一般默认行高也不一样。

图片

也就是因为字体的行高,让UI设计师对文字与其他元素的间距设定,有不同的见解。

图片

上图都是30px的间距,但因为字体行高不同,A、B两个方案的实际视觉间距不同。

认同A方案合理的设计师,理由是文字最好设置一定的行高,不然折行时视觉上没有行间距,很拥挤,不得不再设置行高,最终30px的间距还是有间隙。

图片

认同B方案的设计师,理由是UI设计本身对几个像素的差距就很敏感,视觉上做不到统一,就是不合理。

两者的表述都对,但也确实都有一定的弊端,下面给大家介绍两个解决方案。

可以确定的是,为了满足文字折行后的阅读性体验,最好带有一定的行高,这样也会利于与开发对接。

 

1、第一种:

首先说一下UI设计中,间距设定的一个理念,间距设定一般要设定一个最小栅格基数,如4、5、6、8为间距设定的起始数值。

然后页面中,接下来所有的间距设定,都得是这个数值的倍数。(这点后面会详细讲解)

‍在一个带有文字的设计组件中,若设计思路上要呈现视觉统一的间距,那可以算出字号与行高的间隙,然后减去相对应的栅格数值,使其视觉上接近统一的间距。

下图所示,设计思路上想呈现一个30px的统一间距,那就可以减去一个最小栅格数值。

若最小栅格数值是6px,最终给出的间距就是24px,视觉距离呈现的就是接近30px的距离。

图片

这种方式也是我一直以来用的方法,好处就是没有打破间距设定的原则。

设计的间距与开发看到的间距,都是有规律的栅格系统间距。

唯一有点不完美的地方就是,实际距离有时还会有一点小误差,但其实在视觉上也完全可以忽略掉了。

 

2、第二种:

第二种方式就是精益求精,不考虑间距的栅格系统原则,算出字号与行高的间隙,间距上准确减去,保证没有一丁点的误差。

 

我找了一下这样的产品,发现iOS端的滴滴APP中,有个模块是这样的设计理念。

图片

上图案例中,字号36px,行高44px,文字上下的间隙就是4px。

所以设置距离26px,加上行高间隙正好是30px,得到统一的间距效果。

这种方式有一个小小的弊端,就是开发感受不到间距的规则,最终设计验收时可能会耗费更多的时间。

 

特殊情况:

另外有一种情况,就不能刻意去追求文字的视觉对齐,除非是平面设计,因为开发的逻辑也不会去支持这样做。

图片

上图中错误的方式是因为,开发写这个卡片,会写成一个容积俗称盒子,内容都会放在盒子里面,就算内容过多,也是向下进行扩展适配。

 

图片

 

三、开发对接-关于行高(重点内容)

字体行高的间隙有了解决方法,接下来是与开发的对接,这也是最关键的一个环节,设计的再好,最终不能很好的落地,也是白搭。

UI设计师在设计验收iOS端时,可能会遇到这样的问题,设计与开发都用了同样的间距参数,但最终呈现的间距还是不一样。

原因就是,同样的苹方字体,iOS端开发的默认字体行高,与设计软件中的字体默认行高不一样。

比如在Sketch软件中42号字的苹方字体默认行高是59,但是iOS开发软件中默认是52。

图片

如果开发不手动调整字的行高,就会出现与设计的偏差。

根据我的调研,iOS开发工程师,若不是特殊情况,基本不会去改默认行高参数。

下面我们列举一下,设计常用苹方字号的默认行高,与iOS开发默认行高的数值对比,从中找一下规律。

图片

上图中可以得出,字号越大,设计默认行高与iOS开发默认行高差距越大。

所以设计上最好把默认行高改成与开发一样的默认行高,这样才能保障,开发不手动调整行高下,是一致的。

iOS开发字号默认行高有一定的规律,随着字号的增加,行高会在字号基础上+4、+6、+8、+10以偶数递增。

图片

虽有规律但也不容易形成记忆,推荐一个公式。

用字号除10后乘以2,再加上字号,就是iOS开发的默认行高,公式如下:

图片

有公式可能还不够便捷,再给大家推荐一款Sketch行高修复插件,Auto Fix iOS Text Line 1 for Mac 。

这款插件是专门针对iOS字体行高修复,使其与开发默认行高保持一致。(公众号后台回复666可获取)

 

1、关于安卓

安卓系统 Material Design 使用的字体,中文是思源黑体,英文是Roboto。

因为安卓系统开源,不同的安卓手机厂商大多会更换字体。

比如小米手机MIUI系统中英文都使用Misans字体,所以安卓文字行高没有一个标准。

安卓开发与iOS开发还有个不同点是,安卓开发使用什么字体,行高就是字体本身的默认行高。

思源黑体行高默认和字号大小一样,Roboto行高接近苹方字体行高。

如果设计稿按安卓规范设计,那思源黑体最好设置成与苹方字体一样的行高,然后安卓工程师手动去调整,iOS开发工程师所见即所得。

 

2、字体修复后使用经验

关于修复后字体的使用方式,分享一些经验,UI设计中使用文字的频率很高,有标题、副标题、正文、辅助文字等,字号都有所不同。

当在设计中,确定这些文字字号后,做一次行高的修复,然后把这些文字创建成字符样式,每次用时从字符样式库里面选择即可。

图片

最后说一下,特殊情况结合自身产品风格,去定义文字行高是完全没有问题的,开发可以根据设计的定义的行高进行调整。

 

四、文字-段落

在有段落的文案中,很多设计师为了方便,直接给一个回车键的段落间距,这样是万万不可取的。

图片

一个回车键的间距,就是一行字的行高,通常这个间距都比较大,就算设计风格需要这么大的间距,那一定也要手动去设置段落。

图片

段落数值的设定,一般情况要大于文字行高的一半,比如文字行高为42,那段落最好大于21,这样段落间距加上文字行高,整体就是≥1.5倍。

为什么是≥1.5倍?原因是文字的行间距,一般大于1.5倍视觉上是比较舒适,例如字号是30,那行高设置为45,形成1.5倍的间距。

 

五、文字-字间距

字间距是字与字之间的间距,默认一般为0不做设定,特殊设计风格以外。

有一种情况,当一段左对齐文字中存在标点或数字英文字母时,那末尾可能不够一个字符的空间,就会出现末尾留白的情况。

图片

出现这种参差不齐的情况,确实不那么美观,但在UI设计中实属正常。

不用刻意去设置成左右水平对齐,这样虽整齐,但因为不同的字间距会影响阅读体验。

图片

 

六、文字-字号

不同字号间距设定有一个原则,当字号越大时,字与其他元素间距也就需要相对越大。

字号越大说明级别越高,级别越高从信息层级上来讲,就需要较大的间距来呈现。

图片

这是客观上的一个原则,文字越大,就需要更多的留白去承托,就像文字的行高,字号越大文字的行高增加的倍数也就越大。

 

 1、如何定义间距? 

间距是UI设计中建立信息层级、提升阅读体验、表达元素之间的关系、表现重要信息的重要方式。

定义合理的间距其实非常有学问,打开京东、淘宝你会发现元素之间的间距非常紧凑,打开爱彼迎、蔚来又会发现元素之间较为宽松,这是为什么?

其实就是他们的设计语言不同,致使展示出的形态也就各异,而间距就是表现设计语言的其中一种方式。

UI设计中,间距的设定一般会选择一个最小栅格基数,如4、5、6、8等数值,之后页面中,所有的间距都要以,最小栅格基数的倍数呈现。

谷歌推出的设计语言 Material Design 推荐栅格系统的最小基数是8dp,一切间距、尺寸都应该是8dp的倍数。

淘宝的设计,据我所知用的是5的基数,爱彼迎用的是8的基数,从这点来看,基本可以得出一个结论,使用越小的数值基数,设计呈现通常就会越紧凑。

一个最小栅格基数的倍数值有很多,但其实通常有6个左右常用间距,就能满足绝大多数的场景。

我目前负责的产品最小栅格基数是6,设计上常用间距大概有6个,完全能够满足大多数设计场景所需。

图片

这些间距其实并不用刻意去选择,当你使用最小栅格倍数值时间长了,就能自然得出几个常用的间距,字号的选择使用基本也适用这个逻辑。

另外,一个产品中模块众多,难免会出现一些特殊情况,所以肯定不能限定死只可以用那几个间距。

除了上图中列举的常用间距之外,12、36、90、120等一些间距数值也会用到,只是用的频率不会很高。

 

2、案例解析

接下来,根据最小栅格基数为6的设计规范,通过一个商品卡片案例,分析一下间距设定的几个原则。

图片

上图中,首先要给各个元素分类,比如主标题和副标题是一类内容;标签是一类内容;价格是一类内容;“找相似”按钮又是一类内容。

图片

根据亲密关系原则,同类内容的间距应该更近,这样有利于建立信息层级关系,提升用户的可读性。

具体多近呢?可以根据商品卡片在页面中的外边距,来进行分析定义。

看一个产品的外边距基本能判断,是宽松型排版,还是紧凑型排版。

图片

产品的外边距是根据设计语言,产品定位,产品内容多少等来定义,常见的边距有20、24、30、36、48、60等。(大概就是这个范围内)

使用较大外边距,内容区域的间距要小于外边距,小到可以直观分辨即可,这样可以体现出页面中,内容的亲密关系。

图片

使用常规外边距,比如我们的案例中,使用30px就是常规外边距,内容区域要适当小于或等于外边距,这样视觉上体现的是统一性。

图片

主标题与副标题属于同类项,它们之间的间距一定要小于,卡片的内边距,这样整体看上去才能体现信息层级。

间距小到多少,还是那个理念,可以直观感受到比内边距小即可为止,不能过小。

一般来说,视觉上的间距大概是内边距(同模块中的大间距)的一半,就会表现的不错。

图片

案例中设置的是一个栅格单位6px,再加上文字的行间隙,视觉上大概就是15px的间距,就是内边距的一半。

接下来,给案例加标签,标签与文字不是同类信息,所以要适当与主副标题拉开间距。

通常第一选择就是,视觉距离与内边距30px,保证统一。

案例中设置的是24px,再加上文字的行间距,就非常接近30px。

图片

接下来是价格,对于一个商品卡片设计,价格是需要着重突出体现的。

一般设计上要突出一个元素,大概3种方式:一是改变颜色;二是放大;三是加大留白;也就是加大间距。

案例的商品卡片,设计风格价格颜色规范是黑色,所以颜色不能改变。

只能放大或加大留白,放大和留白得在合理的范围内,不然就会破坏卡片的整体结构性。

间距上与标签设置30px的间距,加上文字的行高,视觉上的间距,会成为卡片中最大的间距留白,从而起到突出的作用。

图片

这种设计方法,在一个设计组件中,最好只出现一个,不然整体结构就会有一定程度上的破坏。

另外强调一下,统一性固然重要,但设计的核心是为需求目标服务,所以,这时候统一性的优先级是次于需求目标的。

就像淘宝首页的瓷片区,间距非常紧凑,失去了一定的美感,但这样做确实展示了更多的内容,满足了需求目标。

 

 七、最后 

最后做个总结:

1、关于文字的间距,要考虑文字的行高,尽可能保持视觉统一性;

2、iOS设计稿,设计软件中默认的文字行高,与开发软件中的默认行高不一致,最好修复行高,与开发保持一致;

3、文字段落不要用回车键去定义,要用段落参数,段落间距通常要大于文字行高1.5倍;

4、多行文字出现这种参差不齐的情况,不要设置为左右水平对齐;

5、一般字号越大,字与其他元素间距也需要越大;

6、UI设计要结合产品定位等,制定最小栅格基数,然后任何间距要以最小栅格基数的倍数呈现;

7、一个产品中,通常设置6个左右的间距数值,能满足大多数设计的场景;

8、善于使用亲密关系、留白理念、统一性等设计原则,设计前理解需求目标。


作者:吴星辰

转载请注明:学UI网》一文搞定UI设计间距那点事!【进阶篇】

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


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


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


深度剖析:如何做好详情页文字排版?

seo达人

那么如何做好详情页文字排版呢?

 

图片

排版的目的是帮助用户整理信息,提升阅读效率,所以我们需要给文字分组、划分层级关系。

文字最重要的属性是可读性,且不管排版形式如何,首先要让用户看清、看懂,然后才要谈排版形式、美观、协调、设计感等等。

现在的电商详情页,用户使用场景几乎都来自于手机端,文字小了会看不清,文字大了又会过于粗暴、缺少精致感,所以主副标题文字的大小应该在什么范围,才能兼顾可读性和设计美感呢?

我以6.5英寸屏幕的P50 pro手机为例,经过多次对比实验得出一个可以参考的字号范围:主标题:50-80px、副标题:26-36px。

图片

当文字大小控制在上述范围内,更利于详情页的文字信息表达,当然这组数据并非绝对,有一定的局限性,所以仅供大家参考。

同时为了严谨,我又结合众多案例进行验证,得出的结论也是基本都符合。

图片

字号规范之后,接下来再来说说排版结构。

 

 

图片

详情页的文字排版结构相对来说并不复杂,常见的对齐方式就三种,即居中对齐、左对齐、右对齐。

图片

这也是最基础的文字对齐方式,但在实际工作中,我们一般还会用到线条、英文、图案等装饰元素,对整体排版丰富美化,平衡、增加其节奏感和设计感。

比如像下面这样:

图片

你会发现不管怎么美化丰富,其基础排版结构、对齐方式还是没有变化。所以我们能在这三种基础的排版结构上,变化出很多种不同的视觉呈现形式。

那么接下来具体说说如何做好排版。

 

 

图片

设计中的每个元素在视觉上都具有一定的“分量感”,所以当需要文字排版时,我们可以根据画面重心来选择排版形式,这也是工作中很常用的文字排版思路。

 

1、居中对齐排版

正如上面所说的那样,居中对齐的排版重心更稳,自然也更适合用在相对平稳的构图,比如:

图片

如上图所示,不管产品如何摆放,只要画面重心始终相对平稳,居中对齐的排版就很好用,也是最不容易犯错的,看几组案例:

图片

做个案例,下面这张图本身构图就相对稳定,又没有其他元素干扰文字排版。

图片

那么只需要加上文案,做好对齐,一张详情页海报就做好了。

图片

说完居中对齐排版,再来说说左右对齐排版,居左和居右本质上没太大区别,无非就是我们习惯的阅读方式是从左往右,出于用户习惯的原则,左对齐相对而言用到的会多一些。

 

2、居左、居右对齐排版

一般情况下,当画面重心不平稳时,我们会考虑通过文字排版、装饰元素等来平衡,所以这时候就会用到居左、居右对齐排版。

图片

如上图所示,当画面重心偏向一侧时,根据情况选择居左或居右对齐排版就变得顺理成章,比如下面几个案例:

图片

在设计工作中,仅依据重心排版虽然很常用也好用,但如果都按照重心原则排版,那么形式上难免过于单一,而且也有些许局限性。

比如你也能看到一些案例,即便文字排版前的画面重心相对稳定时,并没有按照上述所说的重心原则,一定要用居中排版的形式。

图片

那么我们还可以依据什么来做好详情页的文字排版呢?

 

 

图片

因为电商详情页的使用场景更偏向手机端,而且现在都是按照手机一屏的尺寸为单位划分模块,所以图文的形式大多数情况下都是上下结构。

因此受其结构的特质影响,详情页排版相对而言并不复杂,不像首页、海报、平面类设计那样,需要太多的板式结构,所以很少会出现故意营造画面重心不稳,用作突出强调的。

这也是我在翻阅大量优秀的详情页案例中验证后得到的结论。

在详情页文字排版的过程中,画面重心并不是影响排版结构的唯一因素,还会受画面结构、每一屏尺寸、文字可阅读性、整体布局等等的影响。

比如用下面这张图,虽然图中两个产品的长短不同,但两个产品所占的直觉比重是差不多的,所以整体的视觉重心是相对平稳的。

图片

可如果将这张场景图做详情页首图,即便是重心相对平稳,文案也不再合适用居中排版的形式做,因为受到了图片本身结构的影响。

下面我简单的排了一下:

最终是这样的:

图片

所以就出现了相对平稳原则。

理解起来很简单,就是利用英文、线条、图标、数字等装饰元素或必要排版元素平衡画面,营造视觉上的相对平稳即可。

原则上来说,相对平稳原则适用于绝大部分详情页的文字排版工作。

这就能解释为什么重心明明很平稳,有很多详情页案例中的文案不用居中对齐也能做的很出彩的原因:“他们做到了视觉上的相对平稳。”

如下图所示:

图片

视觉相对平稳是允许存在偏差的,并不是像对称式构图那样要求那么绝对,设计有很强的主观性,也不像数学那么严谨,看起来差不多就行。

当然,你也能看到一些竖向排版,或不规则的排版,但核心思想是共通的,就是视觉上的相对平稳。

 

 

图片

设计的魅力在于不确定性,没有一成不变的解决方案,详情页排版同样如此,不管是依据重心原则还是相对平稳原则做排版,都只是为大家提供设计理论依据。

比如下面这个案例:如下图将产品简单的摆放好。

图片

初步的详情页海报构图就出来了,很多人的第一直觉就是居中排版,因为毕竟这么构图整体重心是稳的,比如像下面这样:

图片

一个简单的海报雏形就有了,可能你会感觉有点太平了、还有点空,那么我们可以加点光影元素丰富一下画面,再稍微调下整体的颜色,如下图:

图片

这个海报的确很简单,但感觉还不错,如果按照相对平稳原则,换个排版形式是不是也可以:

图片

不同的排版结构给人的感受也不一样,两者没有对错,至于你会选择用哪一种,这就取决于你对整体规划和自己的主观感受了。

设计理论固然重要,但设计师的主观感受也很重要,所以我们除了要学好理论知识外,还要提升自己的审美。

补充:本文以详情页首图排版为切入点,详情页中其他模块同理。

好了,就写这么多吧,下次再见!


作者:老张

转载请注明:学UI网》深度剖析:如何做好详情页文字排版?

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


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


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


对话河南卫视-年轻化趋势下的传统文化新表现形式

seo达人



在全媒体时代,河南卫视为什么能频频登上热搜?晋级顶流、频繁出圈的“流量密码”究竟是什么?

近日MEUX对话设计系列邀请到河南广播电视台导演钱林林、奇妙夜系列视觉总监李鹏,与MEUX运营设计经理小勇、资深运营设计师思任围绕【年轻化趋势下的传统文化新表现形式】开展了深入的线上交流。

一、流行密码法则:90%熟悉+10%惊喜

中国节日等系列节目作为文化产品,流行背后的底层逻辑,通俗来说就是要给观众创造“熟悉+惊喜”的心理体验的过程。一方面,熟悉能让观众有安全感和亲近感,但与此同时,观众的审美疲劳也是可以预见的。因此需要在熟悉之外,持续融入创新的元素与手法,才能给大家带来新鲜的刺激。

图片

导演钱林林表示,“我们的节目持续破圈得益于我们的网友和观众朋友对中国节日的喜爱,这一份喜爱鞭策着我们要更加的去深挖我们中国的传统文化。”

图片

 

二、创新表达引年轻人共情

视觉总监李鹏以《唐宫夜宴》为例,介绍了作品背后的三种呈现方式:

  • 提前录制与后期抠图,让舞者在幕布前起舞,通过后期抠图,将幕布换成三维动态场景,营造强烈的画面感。
  • 舞台表演与虚拟投影,舞者以舞台为主要表演场地,通过后期投影将虚拟的场景投射在舞台上,让舞台空间无限延展。
  • 实景拍摄+特效技术,在著名的文化地标进行实景拍摄,通过后期的特效制作,打造亦真亦幻的视听盛宴。

图片

“5分多钟,运用了抠像、3D、5G、VR以及AR等技术,传统文化与技术的结合呈现出奇观化的场景,将舞台与实景拍摄融为一体,突破传统晚间舞台的局限,圈了很多年轻人的粉。”

 

三、活化创新关键在坚持

李鹏认为,传统文化不是在单纯的传承中延续传承,而是在不断创新中传承。 “我们一早就认清了一个事实,要想做出好作品,基本线是要吃苦、受折磨,这才有进圈的可能,然后精益求精、追求完美,才有出圈的可能,最终被网友认可,才有破圈的可能。”

导演钱林林表示,中国年轻Z时代的文化自信在崛起,受众需要情感的出口,希望河南卫视能继续借由当下流行的‘沉浸式体验’讲好中国故事,让大家真正地感受到传统文化的魅力所在。

图片

紧接着MEUX运营设计经理,百度用户体验架构师小勇分享了互联网运营活动中关于传统文化的设计玩法。他提到,“对传统文化工艺的挖掘一直是我们核心设计理念,我们希望用传统工艺之美唤起用户对传统文化的喜爱与关注。最重要也是最难是将传统文化技艺和互联网产品运营设计的巧妙融合,这需要我们找到合适场景、时机和目标用户。”

随后百度MEUX的运营团队资深设计师思任重点介绍了好运中国年、故宫中国节、以及百度二十四节气的项目案例,分享了近年来MEUX运营设计师们对于传统文化传承的设计本心。

 

四、好运中国年

从19年与央视春晚合作到现在,好运中国年已经持续了4年,虎年好运中国年选择了木板年画和黎侯虎作为融合元素,为用户带来新的感受。而中国年当用中国色,从年画的传统色彩体系中提炼提取主品牌色锦鲤红与老虎金,传递更加民族的色彩感知。

图片

 

五、故宫中国节

运营设计团队联合故宫文创一起做了个找宫猫的活动,对于大黄这个IP,设计师构思了很多比较有趣的姿势。像弹窗猫脑袋长草猫隐身猫等等。最终呈现出一个生动有趣的宫廷活动。设计师表示故宫的设计非常讲究的。他们有自己的运营审核团队,对历史的考证和物品的观察非常精细,这种在合作项目中的共同探讨,也是不同公司之间对设计和艺术思维上的碰撞。

图片

 

六、百度二十四节气  

设计团队用中国宋代花鸟传统绘画技法结合民间人文特色以动态形式提升用户情感共鸣,让百度搜索用户在浏览体验中获得乐趣的同时了解中国文化。摆脱了之前枯燥乏味的文字解释(此项目也获得22年意大利A Design设计奖)。

图片

交流会后许多同学表示,在本次沟通后增加了关于设计师对于传统文化的思考,加深了设计在传承中的理解。


作者:百度MEUX

转载请注明:学UI网》对话河南卫视-年轻化趋势下的传统文化新表现形式

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


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


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


沉浸式刷视频,抖音的产品设计妙在何处?

鹤鹤

在短视频领域,抖音(TikTok)无疑是全球范围内最热门的短视频平台之一。


“抖音5分钟,人间2小时”用来描述我们对抖音的“上瘾”程度再准确不过了。


人们对抖音“上头”,除了依赖于它的神级算法机制,其实还和抖音自身的产品设计有关。


抖音究竟是如何令大家“沉迷式”玩耍的,今天小摹带大家来深扒下抖音,看看产品设计中那些有意思的细节。


一、AB test测试不同版本实际效果


在产品迭代的过程中,使用ABtest方案验证产品优化的好坏,是非常普遍的情况。


通过ABtest同时上线不同的方案,根据线上的实际转化效果数据,帮助决策者客观选出最合适的方案,从而避免经验主义带来的用户流失等问题出现。


不难发现,我们常会在抖音中发现频繁改版优化的痕迹,例如长按视频后弹出的“转发”菜单界面,其中倍速播放、私信、分享的位置及交互曾多次变动,最终调整成现在我们看到的样式。



二、产品设计不应打破用户熟悉的产品形态


抖音团队在对抖音进行产品设计时,所有的创意都是基于其产品形态进行的拓宽和延伸,下面我们来一一分析:


1)主页面


相较于大多PC端播放器的横屏播放而言,抖音的竖屏全屏播放更容易让用户获得沉浸式体验,视觉冲击力更强。


当我们打开快手或秒拍时,发现视频多以列表形式展现。


一屏中展现的短视频越多,给用户选择的权利也会越大。


但要知道,选项越多,用户越难沉浸式体验,通常需要下滑两三屏,才会找到想看的内容,难免有些意犹未尽。



2)开屏广告


开屏广告可谓是当今主流App的标配,广告一般以图片/视频的形式展现,展示时长3-5s,期间可以通过点击或“摇一摇”进入广告落地页,如若什么都不操作,便会自动关闭进入App首页。


但90%的开屏广告都会面临一个问题,投放的广告很难与App本身建立起持续的关联,用户点击“跳过”后,转化效果将会大打折扣。



然而抖音却利用了自身的产品形态与开屏做了紧密结合,开屏广告以全屏视频为主,3-5s展示后,显示抖音的组件布局,与普通短视频没有太大的区别。


若用户对广告内容感兴趣,可长时间观看广告视频,同时还能点击“查看详情”跳转至广告落地页查看或填写表单,与商家建立更深层的联系。


如此一来,抖音给用户营造了更为沉浸式的观看体验,也减少了开屏与App本身的割裂感,可以说将用户体验做到了极致。


3)图文计划


2021年,抖音官方推出了图文计划,经过一年的沉淀,抖音图文每日用户阅读上百亿次,超七成用户每天都会看数十篇图文内容。
用户上传多张静态照片,可以大大降低创作门槛,并且图片轮播,也可以给观看的用户展现近似短视频的观看体验。


4)直播间机制


在刷短视频的过程中,抖音官方时常会给用户精准推流直播间相关信息。


其展现形式与短视频没有太大的区别,为便于区分,在界面中下部分显示“点击进入直播间”按钮,在用户昵称位置标识“直播中”字样。
短视频与直播间的过渡流畅自然,直播间信息流中的引导话术,很大程度能刺激用户进入直播间,为下一步购买转化做好准备。



5)本地生活服务


虽说抖音是一个视频内容创作平台,但本质上还是一个流量平台。在抖音尝到了直播购物的甜头后,今年又开始布局本地生活服务项目。


例如,一名消费者入住一家网红民宿后,只需要拍视频打卡上传抖音,甚至拍几张照片,以图文模式上传,再加上民宿的团购券,一条短视频就搞定了。


而对于普通用户而言,这样一条短视频可以简单划过,也可以点击左下方团购券详细查看,直至产生购买消费行为。



本地生活服务的展现形式更多以达人种草为主,与日常咱们经常使用的小红书、大众点评的产品逻辑一致,广告植入的痕迹比较自然,用户体验抖音的确拿捏住了。


三、情感化设计更贴心


七夕当天,你会发现点赞的“爱心”图标变成了玫瑰花,多次点击会出现满屏的玫瑰花,让点赞变得更具趣味性,并且也能与用户在节日情感上会产生更深的共鸣。


当刷视频的时间过长时,抖音官方会不定时以动画短片或真人出演的形式,给用户推送休息的关怀提示。


写在最后


当然,抖音并非全无缺点,例如,发布视频时,先选音乐的操作就让大家吐槽不已。


但总的说来,抖音的产品设计始终围绕产品的基础形态在不断创新,让用户、商家及平台三方都能得到最大利益,满足各方述求。


作者:摹客设计云
转载请注明:站酷

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


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


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


全真3D实践: 云网络体验馆

seo达人

云网络 · 产品体系可视化

来到云网络体验馆,看到的是整个云网络核心架构的速写图景 —— 云上网络、跨地域、混合云。
抽象的云网络产品体系在这里被具象化,吸引用户去深入探索云网络。

我们通过三维探索的体验方式,用视觉、动画、空间去讲述云网络抽象的业务架构,帮助用户从立体视角,去直观的领略云网络产品的功能与架构。
多场景间无缝切换衔接,单场景内沉浸式体验:

图片

— 探索云上网络

 

图片

— 探索跨地域网络

 

图片

— 探索混合云网络

 

云网络 · 产品形象设定

由于用户终端硬件性能差异会很大,所以Web端的Run-time 3D体验对性能优化,模型的设计都有专业要求。
3D渲染要尽可能的降低性能消耗,同时兼顾产品体系可视化的美观与识别性。所以我们对16个云网络产品,在云产品形象、REAL 3D 产品模型资产库V1.0的基础上,进一步优化升级了视觉设定。
以负载均衡的产品形象设定为例:

图片

 

云网络 ·  REAL 3D技术沉淀

动画路由 (Animation Router)

经过三维具象化后的云网络核心架构,共有5大模块共14个页面。为了减少性能开销和切换动画流畅,所有这些页面动画都需要渲染在同一个 HTML <Canvas> 元素内,而非页面跳转。

基于全真3D的底层能力 —— GDS,我们为此设计并开发了一个支持URL路由的三维动画架构管理模块,将每个页面的三维场景、动画、和摄像机实现动画变换和页面路由的双向绑定。当用户在进入页面或跳转时,对这些动画数值进行赋值和插值计算,以此实现动画顺滑过渡的路由管理。

— GDS:阿里云设计中心自研WebGL图形技术能力,由丰富的WebGL代码组件构成

 

低实例化合并渲染 (Less DrawCalls)

完成功能和动画的开发之后,很重要的一步是渲染性能的优化,在计算与渲染里,实例越少,DrawCalls越少,意味着性能越高。首先是模型面数,在进行3D低面布线建模(Topology)并烘焙AO(Ambient Occlusion)贴图后,我们对模型进行了低实例化合并,同时根据摄像机运动角度,我们还使用背面剔除(Backface Culling)提升模型渲染性能。

图片

— 模型面数优化+合并、背面剔除(Backface Culling),以及烘焙

为了控制每一帧显卡GPU进行渲染批次DrawCall的次数,我们通过REAL 3D图形合并能力,将动画逻辑类似的三维元素进行合并渲染,最终平均渲染批次从平均50次每帧降为平均30次每帧。

图片

— 实例合并渲染、DrawCall与性能控制

 

多终端性能适配 (Adaptive Rendering)

本次体验馆上线到阿里云官网,面对性能各异的消费级电脑,我们准备了多套性能适配方案。全真3D对设备支持情况进行硬件与GPU的检测,适配跨度从Fallback到四层性能分层,以控制渲染画布的精细度(DevicePixelRatio)与渲染帧率(Adaptive FrameRate)。

图片

全真3D致力于云产品架构可视化,与升维下一代云产品管控体验。
整个云网络体验馆,协同产品运营与前后端工程师,阿里云设计中心的设计师完成了从体验维度(业务逻辑、体验设计)、视觉维度(界面、模型资产)、到技术维度(3D图形开发)的快速建构。
设计的边界,可能存在于我们不满足于现状,而偏执探寻的下一种可能里。

 


作者:阿里云设计中心
转载请注明:学UI网》全真3D实践: 云网络体验馆

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


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


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

苹果和三星,哪家设计强?

seo达人


图片

a

字体 

图片

第一个就是字体,大家都知道,设计其实就是形色字构质,字体是设计中非常重要的因素。2014年三星委托了一家名为 Sharp Type 的字体制造商来设计了旗下产品字体。这款字体就是 Samsung Sharp Sans,今天我们看见的字体都是这款字体。

 

Samsung Sharp Sans

图片

三星这款字体是一个几何感很强,接近完美的圆形O和简约设计感强的小写字体,特别是字母a设计的脱颖而出。

图片

三星这款字体除了用在移动端,还包括电子业、生物技术各个行业,同时还考虑了线下的印刷需要,扩展了拉丁字体系列。

图片

在首尔的街头上,物理交通工具上,这款字体都很清晰美观,和整个城市的时尚结合在了一起。图片字体不仅仅是一个字体,同时还是一个沟通工具。三星这款字体不仅用在数字广告,还包括印刷上,这个字体承载了三星对于未来的突破。三星不再是只有产品线,而是成为时尚生活品牌。图片
无论一线大品牌还是国货新潮流,都靠一系列创新商品,在这波浪潮中占据一席之地。三星 Sharp Sans 在海报上的运用,高级且现代,同时基于全球化最大的中欧俄罗斯是智能手机增长最快的,三星也单独设计了俄罗斯版本字体。
图片
在网页设计中运用,也考虑俄罗斯本土市场行情。可以看出作为一家全球的跨国公司,对于各个体验极致的考虑。Samsung One
图片

在移动端,三星使用的是 Samsung One 字体,它也是一个非衬线字体,相对于传统的衬线字体,这款字体设计更加具有人性化。

图片

苹果和谷歌早已推出了自己的字体,三星也推出了自己的通用字体,Samsung One 由三星和 Brody Associate 联手打造。超过400种语言,以及超过25000个字符,成为一套全球性的字体。从手机到电视,从笔记本电脑到微波炉,所有的三星产品都将用上这套字体。它也是未来三星视觉语言的核心。图片
Samsung One 字体设计语言有5个关键词:人文主义,易区分,通用性,专业性,清晰可扩展。图片
人文主义:笔画自然就像手写一样变化,字体具有动态角度的正方形曲线,有很大想象空间。图片
字没有的左右空间都很窄,所以有效空间非常好。图片
易区分:这个不用解释,字体大小写符号的区分。

图片

通用性:在全球各种语言环境下要足够通用。图片
专业性:就是每个笔画的设计都需要经得起考究。图片清晰可扩展:各种场景的拓展性这块需要能适用。图片
三星 One 这款字体,让整体三星设计语言在多端使用时候无割裂,设计语言的统一性有助于用户减少陌生感,提升使用效率和交互体验。
苹果 San Francisco 字体

图片

苹果在 iOS10 后更改了系统字体 Helvetica Neue 为 San Francisco,优化字体的目的是让字体保证清晰度和易读性,新的字体不管缩放如何,无论电脑上还是手表上,都能很清晰展示内容。这个字体也得到了一致的好评。
图片
Helvetica Neue 字体之前有一些设计很受诟病的地方,比如时间的冒号不居中,理想状态应该是居中,识别性和平衡感更好。图片
Helvetica Neue 之前的6和9在缩小时候容易和8混淆,但是新的 San Francisco 显示更清晰,也不容易混淆。
但是不可否认 Helvetica Neue 是这个时代最伟大的字体,因为他不止是苹果设备可以使用,在其它的场景都可以使用。也是第一个给系统设计字体的引领者,包括后面的谷歌和三星都陆续为自己的产品设计字体。

苹果和三星对于字体的设计,你更喜欢那个呢?

 

版式 

图片
三星整体的版式采用的左图右文或者右图左文,这样的设计能让用户更加关注内容,阅读也比较符合从左到右的习惯。图片这样的版式结构在全球官网设计都是类似,和苹果的上下排版不同。版式字体上也是通过字重来凸显视觉层级。图片
在电视页面中,采用的文字居中的方式,和苹果那种沉浸式大图全然不同。整体三星PC上设计略显沉迷和安静。

图片

相比如苹果大胆的设计,三星在动态设计上官网并没有体现太多,除了一个活动广告弹窗是一个动态的盒子打开。在这方面和苹果还是有点不足。
图片
图片

这两张是三星和苹果十年前的设计,从这个图中就可以看出两家设计水平差异。苹果的设计和广告语今天看起来也还不错,但是三星看起来就会觉得有些粗糙,可能10年前审美也不一样。

 

图片 

图片
图片

苹果的图片更加强调产品的实用性,以突出产品本身功能和价值为主。

图片
苹果会结合产品的特点,重点体现产品,其次生活场景。图片三星的产品图片,色调都是以生活化,贴近生活为主,无论手机还是电器。图片
注重生活化,接地气。
图片
图片

苹果的图片则不一样,和摄影师合作,每一个图片都是一个摄影作品、一个伟大艺术创作,苹果手机可以拍大片、可以拍电影等等。体现出苹果产品无与伦比的优秀,虽然他那些样品,我怎么也拍不出来。

 

最后 

图片
最后,无论是苹果还是三星,都是伟大的公司,产品服务的人群不同。苹果主要是移动端数码产品,三星覆盖全品类,两个公司用户人群不同,决定设计风格和主张不同,我们要学会去学习这些巨头设计上可取之处。随着当今智能手机水平不断提升,包括我们的华为,未来差距只会越来越小。但是随着用户审美和经济水平提升,大家对于品牌苛刻度更高,希望我这篇研究对大家有些帮助。
但是从我个人而言,更喜欢苹果,也是苹果的忠实粉丝。你呢?更喜欢哪个品牌,欢迎评论中留言哦。

 

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》苹果和三星,哪家设计强?


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


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


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


作品集这样排版,不进大厂都难!

seo达人


01.关键词排版

关键词排版是很常用的一种排版方式,可以让面试官一下就抓到重点。但是大部分人都是圆圈加文字的表达方式,会显得有些简单、乏味。如果能配上图形或者图标搭配就会丰富、精致很多。

图片

图片

图片

图片

图片

图片

图片

 

02.模块分离

将页面中部分的内容模块分离出来展示,可以是图形或是卡片等等。不仅可以强调页面的层级展示,还可以让作品集排版更加出彩。

图片

图片

图片

图片

图片

图片

图片

图片

图片

a

03.细节特写

作品集排版页面中可以穿插一些放大的特写,可以展现一些精心制作的小细节,或者项目当中需要强调的内容。不仅可以丰富页面的排版形式,还能一目了然地展示出项目的侧重点。

图片

图片

图片

图片

图片

a

04.图文搭配

这个看起来好像是“废话方法”,一个主体图形和文字进行搭配,但是精髓在于文字部分最好是两种粗细或者字体或者大小写的不同对比,让文字内容更有层次。

图片

图片

图片

图片

图片

图片

图片

 

05.平分画面

将画面一分为二,填充不同的颜色背景。有鲜明的层次感和形式感,可以很好地表达一些需要对比的内容,或者需要进行多维度展示的内容。

图片

图片

图片

图片

 


作者:设计师深海

转载请注明:学UI网》作品集这样排版,不进大厂都难!

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


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


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


这应该是最近几年,苹果电脑ui设计变化最大的一次了!(附含源文件)

seo达人


图片

图片

图片

图片

图片

图片

图片

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

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

01 轻

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

图片

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

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

图片

现在变成这样了:

图片

也是变轻了很多。

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

 

02 圆

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

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

图片

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

图片

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

图片

有可能吧。

 

03 统

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

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

图片

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

图片

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

图片

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

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

图片

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

 

04 新

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

图片

图片

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

图片

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

图片

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

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

图片

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

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

 

总结

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

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


作者:菜心设计铺

转载请注明:学UI网》这应该是最近几年,苹果电脑ui设计变化最大的一次了!(附含源文件)

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


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


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


日历

链接

个人资料

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

存档