首页

如何整理页面交互规约,让你的宣讲无懈可击

分享达人

小伙伴们画好视觉稿后,是不是页面的交互/视觉规约经常丢三落四,常常在设计宣讲时被开发测试提问?自己表面镇定,内心慌的一笔:这个...我没想到,那个...我没想到...

要想在宣讲时能够从容应对各种问题,就需要在设计稿完成后,把设计规约提前想好,那么设计规约要从哪些方面写起呢?往往B端产品的页面更加复杂,要补充的交互规约更多,小Zi就从实际工作中总结一些,供大家参考~

先来看个列子:

页面

交互规约如下

 

一个页面,交互和标注规则很长很长,很多同学反馈说不知道交互规约从何写起,看了上面的列子,大概从以下几个方面来书写规约:


大方面我习惯于分成【整体】和【具体内容】来写。

整体

一、页面自适应规则

首先从整体来考虑,首先要考虑页面是如何布局的,是自适应?还是定宽?常用的网页布局有:静态布局、百分比布局、响应式布局;页面的整体布局方式,也决定了页面具体内容规约的撰写;

参考文章《3种常用网页布局与设计注意点》:https://www.zcool.com.cn/article/ZMTIwMjYxNg==.html



二、滚动条/滚动区域

1.页面整体滚动区域

滚动区域是从哪里开始?是页面级滚动吗?


2.滚动条的样式

需要给出滚动条的视觉和交互


举例:

三、初始状态/空状态

页面“加载”是做设计时常常忽视掉的,因为大家肯定是重点考虑有内容的情况,并且页面数据是否需要加载、加载时长等等需要根据前后端接口返回情况确定。


1.补充初始状态的页面;初始页面是骨架图还是保持不变,是否添加页面引导?等都是需要考虑的;

2.补充页面数据为空的样式;

举例:

四、加载样式

页面级加载的样式是什么样的?也需要补充到设计稿中;

举例:

五、其他特殊情况的处理

比如“无权限查看”“记录已被删除”“已被拉黑”等等情况;

举例:

具体内容

当补充完页面整体上的规则之后,就可以着手补充页面具体内容的规约了。具体内容的规则其实和整体规则从大方向是差不多的,也是那几个方面,只是更细节:

一、考虑是否自适应,自适应的规则

如果页面整体是定宽的,那么内容也是定宽的,就不需要考虑内容随着页面拉伸或缩小带来的变化;如果页面整体是自适应的,那么具体模块可以根据功能需要来设置哪些区域自适应,自适应的规则是什么;

举例:


二、考虑内容过多时的样式

B端产品设计场景更复杂,内容更加不可控,再加上电脑屏幕大小适配,页面宽度可自由拉伸,种种因素都要我们更加仔细的考虑页面的各种极限值情况,如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是:这里内容过多怎么展示?虽然我们在设计的时候是按照80%的场景去考虑,但是剩下20%的极限场景也需要我们给出设计规则。

内容过多,具体划分还可以分成以下几类:文字过多、选项过多、弹窗内容过多、按钮/标签过多、表格内容过多、功能过多等等情况,每种情况下有哪些解决方式呢,可以参考文章《B端交互设计之内容太多怎么办》:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html


举例:


三、考虑极限情况下的提示/反馈

用户反馈,页面中肯定不少,我们画页面时也会画出大部分提示,但是缺少提示/反馈依然是设计师常忽略的内容,主要是提示的场景非常非常的多,而且有很多细分情况:

1.数据处理慢的提示

问题举例:操作的数据过多时,后台数据处理慢是否有提示?


2.操作后的提示

成功、失败、进行中等,还有部分成功,部分失败的情况

问题举例:启用失败时如何提示?


3.无权限、禁用等的提示

问题举例:项目列表-阶段没有权限时,需要添加tips提示;


4.缺少二次确认提示

问题举例:新建页面点击取消是否需要二次确认提示?

四、考虑校验的时机和样式

1.校验的时机:是失焦后还是提交按钮时,还是实时的

问题举例:表单的必填校验,是失焦实时校验,还是在提交时校验?

 “实时校验”是在用户浏览表单时实时检查用户输入的有效性,而不是在用户提交表单时一次性检查全部输入:

验证消息显示在靠近输入的区域,并一起显示;

2.校验的样式:是在下方出提示,还是全局提示,还是什么的;

举例:


五、考虑是否缺少滚动条的样式

不仅要考虑页面整体的滚动区域,有些模块也是单独需要滚动的;

滚动区域是哪里?包不包括表头?标题?有没有内容需要锁定?滚动条的样式?这些问题都要给出规则。

问题举例:信息内容过多时,容器内展示不下怎么办?--答:展示不下时容器内出现滚动条,滚动区域是整个内容区;

六、数字方面的问题

1.数字输入超长的显示

问题举例:极限数字如何显示,比如筛选结果超过三位数:999+

2.数值是0时,是否有特殊的规则

问题举例:数值为0时,是否显示此模块?

3.是否有输入限制,比如,限制正整数、小数,小数精确到几位等等;


七、点击热区的范围

我们一般默认热区就是触发控件的区域,但是有时可能视觉上图标需要小一点的,但是热区需要更大一点,就要特殊标注出来。总之,方便用户操作为上。

举例





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

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


应用程序设计中的色彩原则

分享达人

颜色会潜意识地为观看者提供有关应用程序的大量信息,即使他们从未阅读过任何文字。


什么是色彩心理学?

不同的颜色实际上可以对人类的情绪甚至行为产生深远的影响。这是全球各城市许多绿色和蓝色倡议者背后的想法:绿色和蓝色使观看者感到更加平静和放松。

绿色对减轻压力(和其他因素)的影响如此深远,以至于实际上可以帮助人们延长寿命

这对应用程序设计意味着什么?

嗯,颜色的影响不仅仅是观众喜欢与否,还会影响他们的感受。例如,深浅不一的蓝色会激发忠诚和可靠的感觉。绿色激发舒适和幸福。黄色与快乐和刺激有关。红色让人兴奋并引发欲望。

但是那些不一定是感觉的东西呢?人们是否也倾向于将某些价值观与颜色联系起来?

这项调查要求人们选择与某个词相关的颜色。他们发现:

  • 信任 = 蓝色(34% 的受访者)

  • 速度 = 红色 (76%)

  • 便宜或便宜 = 橙色 (26%) 和黄色 (22%)

  • 高品质 = 黑色 (43%)

  • 高科技 = 黑色 (26%)、蓝色 (23%) 和灰色 (23%)

  • 可靠 = 蓝色 (43%) 和黑色 (24%)

  • 乐趣 = 橙色 (28%) 和黄色 (26%)

  • 恐惧、恐怖 = 红色 (41%) 和黑色 (38%)

应用程序设计人员在开发应用程序时最好牢记这些关联。然而,这些都不是应用程序开发人员绝对必须遵循的硬数据。相反,它们是开发人员可以遵循的指南,并结合下面讨论的其他设计原则。


围绕颜色的文化差异


在选择颜色时,牢记应用程序的受众始终是至关重要的。

例如,在西方文化中,白色往往代表纯洁或纯真。然而,在亚洲的某些地区,白色是用来表示哀悼、厄运和死亡的。显然,如果应用不当,这可能会产生严重的意外后果。

为此,设计人员应该了解他们的受众并相应地选择颜色,这在日益全球化的社会中并非易事。


选择主调色板


应用程序设计人员和公司等都应该在确定其品牌的主要调色板之前进行仔细研究。最重要的是考虑观众和他们想要传达的内容。

蓝色是一种流行的颜色,因为它与信任和可靠性有关,但它也变得有点过度使用了。

橙色可以与廉价联系在一起,但也可以与乐趣联系在一起。

红色可以令人兴奋和振奋,但也代表恐惧。

更好的使用颜色来设计应用将有助于塑造观众的感知。设计人员需要了解颜色关联以及用户如何下意识地查看设计以创建成功的调色板。


色彩和谐


一旦应用程序设计人员确定了主要颜色,就该选择其他颜色了。使用一种颜色很简单,通常不会很引人注目。

但是,选择的颜色需要很好地搭配。

冲突的颜色会让观看者感到不安或有压力。相反,应用程序设计者应该寻求创造一种赏心悦目的组合。一种会让用户感兴趣并让他们对应用程序感觉良好的应用程序,从而引导他们尝试它。

这里有一些设计师可以遵循的基本原则,以在他们的设计中创造和谐的色彩。


单色

首先是在整个设计中坚持使用相同的颜色,但使用不同的色调。这增加了产品的兴趣但又不会很突兀。


类似色

另一个流行的选择是使用类似的颜色。这种方案也很难搞砸,尽管设计人员确实需要了解每种颜色的饱和度。

此方法可以使用色盘上彼此相邻的颜色。例如,绿色和蓝色,或橙色和红色。


互补色

互补色方案使用调色板上彼此相反的颜色。例如,黄色和紫色或蓝色和橙色。

使用互补色时,设计师必须仔细选择阴影和色调。如果做得不好,很容易创建一个视觉上不和谐的方案。

但是,如果做得好,互补色可以使应用程序设计真正流行起来,并在众多其他不那么吸引人的应用程序图标中脱颖而出。这可以使用户更有可能选择该应用程序而不是其他类似功能的应用程序。


分裂互补色


这种方法有点复杂,但可以产生一些引人注目的结果。它采用三种颜色,一种颜色和两种相邻颜色的互补色。例如,从紫色开始,然后添加橙色和绿色。

设计师必须小心使用这种方法,错误的组合会使设计从有趣变成突兀。


正确的应用程序设计颜色

总而言之,应用程序设计中的颜色世界非常复杂。没有一种颜色会吸引所有观众,也不会适合所有品牌。然而,选择正确的颜色绝对意味着一个成功的应用程序和一个普通的应用程序之间的区别。

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

文章来源:站酷 作者:ZZiUP

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

B端数据可视化组件设计规范:平台级项目复盘

分享达人

关于数据可视化项目


在贝壳,有店东、圈经、CA等多种服务角色依赖数据信息作业,各种各样的数据被用于管理、分析和制定目标。但是,房产垂直领域的数据非常庞杂,数据体量也在急剧增长,图表的应用场景越来越复杂,除了pc和移动端的数据看板,还出现了线下门店大屏场景。


与此同时,数据展示一直处于无可视化规范的状态,导致频频出现“数据堆叠”“数据出界”“数值无单位”等可读性低的问题。因此,把这些复杂、抽象的数据,通过更直观更容易理解的可视化方式展示出来,建立一套专注于房产领域的可视化组件规范,变得尤为重要。


图1 数据部分展示现状


Kecharts项目从汇总和梳理数据展示问题出发,聚焦并抽象问题点,旨在建立起统一的可视化规范。同时,我们还对极端数据的展示进行计算规则处理,从人工配置的效率考量,系统性地帮助用户进行高效分析和决策。


1.从不统一到有规范


数据规范的第一步,解决“知道什么数据用什么图表,了解颜色的使用规范、数据排版展示的要点、适配性原则”等基础规范,从配色、布局、基础展示规则上,满足数据展示的美观度和可读性。



2.极端情况的处理规则


最难解决但也最有价值的痛点是:数据体量大、维度多带来的“不确定性问题”,想要把海量、高维的数据以准确有效的方式展示,需要建立高质量的交互和配图规则。因此,我们在梳理基准展示规范的基础上,也对极端情况进行了一系列的规则处理。



3.人员可配的高效性


数据往往是由平台自上而下传达到城市,再由专业的商业分析师对数据进行分析和处理,很多数据需要人工绘制和展示。因此,Kecharts在设计数据规则展示的同时,也要考虑数据的可配置输出规则,尽可能减少人工操作成本,降低由于人工分析水平不同导致的报告质量方差。



一、建立图表可视化

基础规范


建立基础可视化规范,是为了将图表展示拉到基准线水平,也是当前要做的第一步。基础的规范建立,可以让图表迅速换身衣服,第一时间提升用户的感受。所以,第一步首先解决配色的使用、基础的布局、图形的基本表达等方面的规范问题,满足数据的基础美观度



1. 配色

更科学的配色带来崭新的视觉感受


图2 配色色板图示(局部)


优化前,Kecharts各种配色之间关联性低,与整体平台的表现层形式不统一。优化后色板的样式与KeDesign贝壳设计系统,“UXD笔记”公众号后台回复“贝壳”,领取VI规范文档)无缝融合。现有配色方案饱和度更协调,阅读体验更友好。


由于数据体量大,我们尝试将8种常用色扩展成10种常用色以及24种扩展色来更好地满足业务需求。并且根据不同品牌主色,进行明度调整。除此之外还增加了更沉稳的商务主题以及暗黑主题配色,满足特殊业务场景的使用。


图3 配色的概念图


2. 布局

更合理的布局带来清晰准确的表达


基础布局

图表的构成,由一系列独立的图形与法元素结合而成,如包含标题区、操作功能区、面包屑、图例区、单位区和图表区,通过合理的基础布局增强图表的秩序性一致性,同时规范标题、图例等元素的展示适配规则。


图4 数据基础布局规范(局部)



精细图形

整体的图形展示细节也做了统一调整,从整体排布、字体、字号、圆角、描边粗细、数据轴、标签等方面进行了优化设计,使整个图表看起来更加精细。


基础的配色、字号、布局调整之后,基本满足了数据的展示基准,从基础合理性展示和视觉感提升上,有了一定的改良。


图5 基准规范后的对比



3.适配

更灵活的规则带来细腻的交互体验


图6 栅格化设计图示



定义图表的适配规则

定义四种图表卡片的适配方案,当图表放大或缩小到某一区间时,内部布局会根据图表大小变化进行有权重的删减,使图表在多种区间内能够将核心数据表达的更清晰。


图7 栅格化设计图示



二、极致探索

极端情况规则


满足了数据的基准展示,并没有达到完整的可视化展示规范,海量和高维带来的展示问题依旧存在。所以,在建立基准规则的基础上,结合贝壳数据的特色,需要集中处理极端情况带来的问题,从基准线提升到具有易用性的“标准线”。

图8 以饼状图为例的极端情况分析



1.解决数据量过载

导致的不确定问题


过滤数据

首先从底层数据进行过滤,过滤底层占比0%的数据,减少数据呈现量。将占比为0%的大部分数据在图表的可视化展示中去除,转移到图例中展示,满足了用户需要完整数据的诉求外还大幅度提升了图表的可视化程度。


元素优化

优化标签、线条、指示等元素的展示规范,从定义边界位置、规范标签的展示内容上,对图表内元素的极端情况做适配处理。


智能检测

为了消除信息过载带来的标签碰撞,我们制定了标签的智能检测规则,当两个标签重叠超过1/3时,自动化地隐藏部分标签,被隐藏的部分可以通过悬停展示详细信息,不经意间大幅度的提升图表的展示美感和用户的浏览体验。

图9 饼状图为例的处理过程


2.拓展通用性极端处理规范


从单点问题扩展为通用性规范处理,在不同类型图表的极端情况处理过程中,从全局的角度出发,对极端情况下出现的核心问题做汇总并抽象,在颜色、碰撞、超图形等方面,输出极端情况处理规范。


图10 通用性智能检测规则(局部)



三、提升人工配置

的高效性


数据分析和传达的过程,依托于人工过滤、处理、绘制和展示,考虑数据的配置输出,人为水平难以把控,尽可能减少人工不必要的操作成本,从而提升数据报告产出的质量。


在配置自由度时结合产品定位、属性和功能进行思考。用户希望数据通过配置层处理后转化为可视化图表。普通用户期望通过简单的操作快速搭建数据看板;高级用户希望对可视化图表有精细化的自定义需求。


我们尽量用智能处理代替人工对数据无效数据的筛选,对数据的展示做智能的适配,如指标卡的展示,前置设置了一系列的展示模版,在用户选择指标数据的同时,会根据指标的数量做自动化贴合排布。与此同时,保留了一定的人工可配置自由度,支持用户可自由配置指标卡的细节展示等。

图11 指标卡用户配置示意



因此,针对大量杂乱的数据,数据的呈现通常需要两层呈现给用户。第一层是数据库和数据源,会自动过滤掉存在的垃圾数据和无效数据


第二层是数据分发层,尽可能的通过自动化的配置去辅助操作员进行数据的分发和最终数据面板的呈现效果。通过简化操作流程和匹配人为操作习惯,降低学习成本,提升操作效率,为操作者提供“顺其自然的设计”。


图12 数据处理分层图示



结语


Kecharts的初衷是保证数据的真实、高效展示数据、遵循美学原则。我们遵循数据能够真实呈现的原则,在可视化表达中确保不遗漏、不误导,确保数据准确性

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

文章来源:站酷 作者:大魔V

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

2021-2022设计趋势报告·动态篇

雪涛

动态设计有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息

动态设计(Motion Design)有助于创建令人愉悦且直观的用户界面。好的动态设计,不仅能引导用户对数字产品的体验,还可传达有关产品的品牌信息。本文将介绍近来最流行的动态设计趋势,这些令人惊艳的动效表现手法,在不久的将来势必席卷所有人的目光。


1.1 动态在UI/UX扮演的角色


动态能激发用户的情绪,为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态,能让你的产品展现与众不同的魅力。另一方面,动态有助于支持可用性,通过自然流畅的物理运动,突显元素在过渡时的关联性与状态变化,增强用户对产品功能的感知。

因此,动态设计必须是有意义的,同时兼具可用性与美感,UX行业也将动态设计视为多学科的交集,细分成一个专业的设计门类。作为UI和UX设计中重要的组成部分,动态设计从三个层面发挥影响力:

1. 提高连贯性(Increase Continuity)


让界面元素在用户流程中顺畅地转变与过渡,将用户操作导向期望的任务结果。



2. 连接场景(Connect Scenes)


在转换场景的过程中扮演润滑剂的角色,阐明场景之间的位置、层级与空间的关系。



3. 视觉吸引(Visually Appealing)


聚焦用户视线,将其注意力放在重要的事情上,从而起到信息传达、提升识别度的作用。


1.2 动态设计趋势


植基于UI和UX设计而发展的第三维度,动态设计的趋势自然与两者密不可分。综观近年,多数作品巧妙地运用绚丽的动态图像(Motion Graphics)与动效设计,让新的视觉手法得以表现更为出彩。再者,随着移动端芯片性能提升,跳脱二维平面的表现形式不再难以实现,让设计师能够解开束缚,发挥无限的想像空间。2021年的动态设计可归纳为三个趋势:

1. 增强表达(Enhance Expression)


运用引人注目的表现手法将信息传递给用户,包括变形、动态文字和背景动画。



2. 创造层次(Create Hierarchy)


在视觉平面中创建空间层次结构,遮罩与视差是常用的表现手法。



3. 扩展维度(Expand Dimensions)


突破二维限制,将界面元素多维化营造空间感,例如3D动态图形和摄像机运动。


2.1 变形 Morphing


变形创造了一种连续的叙事状态,告知用户元素的状态或作用发生变化,是一种最引人注目的表现手法,能将形状、图像、色彩无缝地融合与过渡。

| 动画插图 Animated Illustrations


2021年看到许多有趣、吸引人的插图,而更多的设计师开始为静态图像添加动态,也让GIF和动画插图越来越受欢迎。



动画插图看起来更生动,并带有叙事性质。在示例中,运用动画插图来呈现这杯果汁是由哪些水果打成,比起文字描述更能吸引观众的注意力。


by Lobster



通过动画插图来呈现同一系列的转变,有利于延续外形上的特徵,让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化,同样风格的系列家具利用动画来体现一致性。


by Graceful illustrations ™



| 流体动态 Liquid Motion


动态的有机形状,包括流体、烟雾和火焰等粒子效果,能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换,而是颜色在流动的液体中扩散,进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡,并为设计增添有机感,也是2021年最引人注目的动画趋势之一。



运用流体动态来展现抽象的有机体,除了轻易地攫取受众目光,还让人不自觉地伫足在画面上,感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画,或是吸引目光焦点的主角。


by ✞anton mishin✞



流体动态运用到网站设计所营造的视觉冲击力更为惊艳,能为用户带来独特、新鲜的视觉感受, 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动,因此会在许多特效网站见到流体动态的踪迹。


by Gilles Tossoukpé



| 动态渐变 Dynamic Gradients


扁平化设计缺少现实质感的元素,搭配渐变色能有效缓解不足,为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓,充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪,许多内容创作者和品牌已经注意到这一点,开始在广告活动、识别设计和数字内容使用动态渐变。

by Pixelz Studio



| 微交互 Micro Interactions


在用户体验设计中微交互变得日益重要,而动态设计正是微交互的灵魂所在,即使只是微小的视觉提示或反馈,都是人机交互易于使用的关键。从经典案例来看,微交互的动画细节必须带有明确的目的性,让用户获得实时反馈,指导用户进行下一步。从近几年的设计趋势来看,微交互已成为不可或缺的存在。

by Илья Бабушкин


by Google



| 动画商标 Animated Logos


过去几年动画商标是最流行的动画趋势之一,通过各种视觉效果,设计师能创造出不同类型的动画商标,许多企业开始采用动画商标作为吸引注意力的手段。多数情况下,商标是进入网站时最先看到的东西,因此商标应该令人难忘、引人入胜,并使用符号或排版来揭示品牌个性。结合动画的优势,设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征,并为静态排版和商标注入一股活力。

by Yulia K.


by Meta



2.2 动态文字 Kinetic Typography


动态文字是使用移动文本来吸引注意力的动画技术,许多卓越的品牌在网页设计中使用动态文字,为网站外观增添动感和视觉冲击力,是近年UI动画的趋势之一。



设计师使用动态文字为单词或句子添加生动的元素,借此定下情绪氛围与设计基调,吸引用户的注意力。几种常见的表现手法,挤压和拉伸一个词能会唤起一种俏皮感,而连续重复这个词则具有催眠感和前卫感。另外,使用大号和粗体字体来增强份量以强调某些信息,也是动态文字的特徵之一。

无论在电商网站、电视广告或音乐视频,动态文字都占有举足轻重的地位,有利于加深用户对品牌的关注与印象。


by HOLOGRAPHIK®


by Hrvoje Grubisic



2.3 背景动画 Background Animation


通过背景动画来强化叙事,成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事,展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱,它能让用户在进入登录页或网站首页时,轻易地了解更多有关公司或产品的信息。调研显示,从银行、医疗保健公司、电商零售商、餐馆到B2B供应商,这些跨越不同细分市场和行业的网站都开始使用背景动画。

by Carlo Soleri


by Kirill Zhukovsky



3.1 遮罩 Masking

遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物,等同于舞台幕布设计,能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效,是最常见的过渡动画之一。



| 切换场景 Scene-Switching


其中一种遮罩过渡,是将当前场景完全置换,如同揭开蒙在上层的布,逐渐展露叠在下方的景,并利用景物相似性和动作延续性,让两个场景能够顺畅地衔接,不致于差异过大,造成用户心理负担。

by intent


by Minh Pham ✪



| 状态变换 State Transformation


另一种遮罩的表现形式,较无明显的场景过渡,而是利用遮罩来表现景物的状态变化,界面元素和布局基本保持一致,以此塑造无缝过渡的视觉效果,这种手法被广泛地使用,例如气候变化、人物换装、产品组合等。

by Daniel Tan


by Outcrowd



3.2 视差 Parallax


视差是利用不同的界面元素以不同的速率移动,创造前后景深的分离效果,借此在平面中塑造空间层次,已成为网站首页最为普遍的表现形式。



视差之所以能形成一股风潮,广为各个行业所接受,一方面是信息层级更加清晰,明确定义各种元素的关系,让用户专注于主要操作和内容,将背景或非交互元素往后退,同时保持设计的完整性。另一方面是丰富的层次变化,当用户滚动或滑动时,能在扁平化界面拉开空间关系,利用不同的速率和纵深,塑造多层次的感官体验。


by Studio VØR



4.1 3D动态图形 3D Motion Graphics

近年来,结合3D动态图形的界面设计呈现爆炸式增长,虽然创建3D动画需要更多的时间、技巧与协作,但不可否认的,3D动画比2D图形更加逼真,从而提供更具吸引力和互



动性的用户体验,并有效地展示品牌的活力。

| 更生动的表情 Lively Emoji


动画的吸引力在于能够创建各种角色,并为无生命物体注入生命力,表情符号就是一个很好的例子。作为独特的网络语言,表情符号生动地描摹日常面对面交流的非言语信息,随着图形界面的设计趋势逐渐结合2D与3D,运用3D动态图形来创造更加动感、拟人化的表情,能让这些非言语信息更加丰富,有机会引领下一波风潮。

by Outcrowd



| 营造空间感 Spatial Awareness


3D动态图形为平面设计建构了空间叙事框架,在扁平化界面中展现立体感,从而表达空间中元素的位置与层级关系。多维化的发展趋势,推动了视觉表达形式的演变,空间感让界面设计更符合人类的认知逻辑,运用各种3D运动特效,包括旋转、翻转、折叠、透视、Z轴位移等,打造令人难忘的感官冲击。

by UI8


by Bruno Ortolland



| 拟人动画 Anthropomorphic Animations


拟人化能让物体、植物、动物等非人类事物,表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的,1927年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引,越来越多设计师在界面中添加拟人元素,利用这种效果让画面更加生动有趣,增强用户体验的愉悦感。

by Gregory Riaguzov



4.2 摄像机运动 Camera Movements


在动态设计中,摄像机运动是最自由、灵活的一种表现形式,能让画面过渡更有张力,突破2D平面在视角上的限制,创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动,包括推近、拉出、平移、跟拍等方式,备受动态设计师青睐,让用户以多变的视野探索数字产品。



| 推近/拉出 Dolly In/Dolly Out


推镜头是指被拍摄的对象不动,摄像机由远而近,朝着对象不断推进, 用来突出人或物的主体。镜头推近的运动方式,用来呈现从整体到局部、由分散到集中的变化,引领用户进入故事情景,给人一种身临其境的感受。



相反地,拉镜头则是将摄像机后退,使画面逐渐远离被摄主体,侧重的是从局部到整体、由点到面的转变,强调主体所处的空间环境。随镜拉出的景象,能激起人们无限的想像。


by Michael Crawford


by Ali Zafar Iqbal



| 水平/垂直移动 Truck/Pedestal


水平向左或向右,垂直向上或向下移动摄像机,使画面不断变化,让用户跟随镜头视角一起移动,产生一种置身其中的感觉。这种运镜方式,通常用于具体的场景,利用角色或景物的延续性来消除场景过渡时的边界,表现出一种流动感,无论是手势滑动或鼠标滚动都能有顺畅的操作体验。

by Netguru


by Minh Pham



| 结合多种运镜 Multiple Camera Movements


运用多种摄像机运动相当普遍,既能扩大视野,又有很强的空间感,可以更加自由与多样地展示不同视角和情景。比方说结合横摇(Pan)、直搖(Tilt)和跟随(Tracking)镜头,连续而详尽地展示一个产品,由于画面始终跟随一个主体,有利于突出产品特徵,并让用户从不同的角度和距离观看产品,是一种增强临场感和参与感的有效方法。

by Gregory Riaguzov


by Paul Ilnitski



| 一镜到底 One Shot


在电影中为了不将观众的情感和注意力割裂,使用一个镜头来完成全片的场景刻画和叙事,这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡,以此增强操作过程的流畅性,例如一气呵成的购物体验,或是贯穿全场的人物角色,其特点是给用户最沉浸的感官体验,无间断地体验整个流程。

by Orizon: UI/UX Design Agency


by Minh Pham ✪


动态设计作为近年热门的创作形式,广泛应用到各个领域,逐渐成为设计的主流趋势。受益于技术演进与发展,从创意生产到落地实现,动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品,并有机会创造新的表现手法,玩出许多新花样,成为2021年动态设计的特色。



文章来源:站酷 作者:大魔V

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


2022年网页和UI设计趋势

雪涛


设计趋势可以塑造一切,从设计师的创作方式到用户界面设计,再从网站到包装设计的未来迭代方向。因此关注现在的流行趋势很重要,这样您的设计就不会很快过时。


让我们深入探讨2022年的一些顶级网页设计趋势。我们将着眼于 2021 年末开始出现的趋势,这些趋势将为来年即将流行的设计趋势奠定基础。


阅读更多以前的趋势文章:2021 年网页设计趋势


目录:

有趣、积极乐观的设计

黑白配色方案

大胆和实验性排版布局

超大鼠标指针

三维设计元素的应用

近乎野蛮

滚动文本元素

玻璃拟物风格

更多渐变

无图片主页

图层效果

分屏美学

交互式字体

巨型页脚

包容性设计

非凡的想象力

结论

有趣、积极乐观的设计

时髦的形状、颜色,甚至面孔可以带来很多的乐趣。设计师们正在使用这一网页设计趋势,应用到公司机构、电商或个人展示类网站内容,提供趣味、乐观的设计(如上面的示例),这些设计的共同点是它们为世界注入了一点额外的快乐。


没有什么比笑脸更能表达乐观了。恰当的配图是描绘这种氛围和利用这一趋势最简单方法。注意拍摄技巧和被拍对象的整体形象,寻找与内容契合角度,例如上面来自 LegalSuper 的示例。


在经历了全球肺炎大流行的几年之后,设计师们正在为设计的项目增添一些额外的乐趣和温度。这就是我们现在都需要的感觉。


趣味和乐观的情绪被注入以面孔为载体的配图上、较细的字体、有趣的搭配,以及散发出积极情绪的颜色。为了充分利用这一趋势,请考虑较细的元素并避免选择使用较粗的字体或厚重的配色。

FOFSO用鲜艳的衣服、模特紧张但带着快乐的面孔紧盯镜头来做到这一点。


黑白配色方案

黑白配色方案是今年最鲜明的设计趋势。不使用彩色,你真的必须在限制范围内思考和设计。虽然这听起来有点吓人,但它可以释放并激发你的创造力。结果绝对是惊人的。


从另外一个角度来说,黑白配色的设计几乎无处不在。这种对比鲜明审美表明有很多设计师会关注简单和直接。

使黑白配色方案既清新又现代的关键在于应用恰当的效果和表现技巧。


在上面的例子中,悬停时有一个微妙的、流动的动画以及超大的鼠标反色指针来增强交互性。


大胆和实验性排版布局

在2022年,没有错误的字体排版方式。大、黑、粗——甚至是衬线字体——无处不在。他们看起来棒极了。在使用这种网站设计趋势时,请考虑文字将如何动态响应(在手机屏幕上一切看起来都将不同)以及如何最大限度地对访问者产生影响。许多实验性字体不仅设计有天赋,还包括动画或 flex(CSS响应字体布局) 选项等元素。


从轮廓到彩色字体,再到不断变化的形状和填充,大胆和实验性字体应用在网站设计中占据主导地位。谈到今天的网络排版,真的没有规则,设计师们在打破束缚重建一切可能。


Garcia Salmeron在主页的设计上使用了多种字体效果来体现这一趋势:混合和匹配主标题中的字符、带有实验性的字体选择以及带有图像和背景的彩色填充层。


超大鼠标指针

这是一种新的设计趋势,点击上图链接,您会看到许多超大光标的应用示例,在参与设计过程中,在网站前端交互完成之前根本看不到超大指针或鼠标悬停的实际效果,这属于页面交互效果的一种。


这个用户交互界面的应用无处不在。最常见的例子和用法是 Jade Sheng 的例子,它的圆形指针在屏幕上移动,甚至可以在穿过可点击元素时改变颜色。


这种 UI 设计趋势的伟大之处在于,它为网站访问者提供了有价值的可用性信息,并帮助他们更好地参与改进设计,提升用户体验。


三维设计元素的应用

虽然在2020和2021年有很多设计师为网站进行全面的3D化设计,但新兴趋势是将扁平的元素通过3D控制与整体有美感结合起来。


具有3D风格的元素属性包括用于创建深度和维度的阴影、动画以及拉伸和变形等图层效果。

Sennep 在上面的例子中使用一个手指插图引导用户发现来做到这一点,伸出手指扶正标题。插图使用手部动作配合阴影来完成这种好玩的设计。


Skolkovo Park


是时候思考在3D三维界面中完成所有事情了。从真实的网络模型到具有深度的视频或照片插图,三维元素有助于为设计提供更好更直观的理解,例如上面的建筑渲染,或者增强视觉刺激兴趣点。


Zoox


三维设计也延伸到视觉叙事。考虑如何以突出景深和阴影的方式讲好您的故事或产品展示。例如上面的示例使用视频,是有效传达这种风格的最可靠和最真实的方式之一。


近乎野蛮

野蛮主义是最近比较瞩目的网站设计趋势,但它对于大多数项目来说过于苛刻和尖锐。于是进入这一趋势的最新迭代——“近乎野蛮” 的出现也就不足为奇了。


这些设计沿用了许多相同的鲜明效果,但边缘处理更柔软。即使有一些明显的边界和线条,元素之间也有足够的空间,而不是锐利的硬边缘。


没有太多的装饰或其他视觉效果,留下颜色和文字来真正承载这些。其结果更引人注目,不至于太苛刻把用户拒之门外,是野蛮主义和可用性的结合体。


滚动文本元素

虽然我们总是希望文本元素可读,但它们也可以是动态的。滚动文本元素——通常使用超大字体,只有几个字,在同一个位置循环出现——可以强调关键词并激发用户的兴趣。


文本滚动通常往屏幕左侧位置缓慢移动。空心描边字体是一种流行的选择,保持可读性的关键是使用简短的常用词或短语。


引导用户关键行为召唤用语和其他消息应与滚动文本分开,以确保网站访问者可以轻松阅读它们。


Peppa Sauce


滚动文本选项不仅仅是网站设计趋势或技巧,它们实际上可以帮助鼓励用户互动增加参与度。在上面来自 Mama Joyce Peppa Sauce 的示例中,超大鼠标光标内包含滚动文本,该文本显示的是更大的滚动文本。(您甚至可能想重复观看这个互动内容。)


玻璃拟物风格

玻璃拟态风格(Glassmorphism)的最初始于2020年末和 2021 年初的新拟态风格(Neumorphism),并演变进化成现在流行的玻璃拟物效果。


Glassmorphism设计外观让人联想到玻璃。有透明、折射或光泽等元素构成。

很多设计师在追波(Dirbbble) 上展示使用这种设计风格的作品,也可以在大量已发布的网站设计中找到这种设计方法的设计。


更多渐变

渐变的应用一直很广泛。在2021年之前的设计中的大部分渐变都出现在背景中。

2022年,渐变将会增加两种新的形式:

l  文本颜色渐变填充(如上面的例子)来增加影响和突出强调

l  填充矢量插图或图标以创建渐变纹理效果


无图片主页

没照片?没问题!无需图像也可设计,让我们在2022年紧跟潮流吧。


使用不同类型的UI或设计技巧,来充分美化没有图像的主页。在此处的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之间增加叠印效果。超大字体和手写风格的字体有助于将它们整合在一起。(请注意将其他设计趋势与这一趋势相结合以获得出色的效果。)


没有图片的设计也是尝试其他技术的好机会,例如动画、鼠标指针悬停状态或其他交互元素。



主页上没有图像的设计通常会导致美感缺失。但这完全没问题。使用另一种设计方法来激发用户兴趣吧,例如使用有趣的大文本字体元素。


图层叠加效果

图层堆叠、元素间距和图形重叠可以在设计元素中产生景深错位效果,彼此之间建立连接。分层效果展示明显又直接,也可以简单一点。这两个选项可以一起使用或单独使用以产生整体影响。


State Creative 使用多个图层——背景、中景、前景——以视觉上有趣且有意义的方式将各种元素组合在一起。


分屏美学

分屏美学重新流行。几年前的趋势是出于可用性和响应性的原因,现在它更像是一种细分设计。

这些视觉效果可以包括水平或垂直分割的屏幕,每一侧具有相同或不同的功能或点击动作。

最好的分屏设计可以同时做两件事:

l  提供了强烈的视觉冲剂体验

l  他们使用多个入口点来深入挖掘内容


交互式字体

可变粗细的交互字体在大多数情况下,这种效果需要使用悬停状态才有效,尽管您可以尝试其他一些更复杂的效果。(带有流体字体动画也越来越受欢迎。)


在考虑交互式文本元素时,请优先考虑内容的可读性和易于理解性。文本的效果仅在其中的文字可读和可理解时才有效。(否则设计的意义就会丢失。)


当设计展示相对简单时,这种设计才最有效。这个技巧在单独使用时是最好的。


巨型页脚

谁能想到网站页脚——尤其是那些包含大量信息的页脚——会成为流行的网站设计元素?


对于包含大量信息、大量页面或多个节点入口的网站,超级页脚是 2022 年必备的设计元素之一。

世界自然基金会有一个双层页脚:

l  在粗黑条中,有三列菜单选项,便于导航,按用户可能想要在站点上执行的操作(发现、支持、联系)分组

l  黑条中还有一个完整的注册表单,用于了解订阅有关该组织的更多信息

在底部较细的白色页脚栏中是组织信息、社交媒体链接、非营利免责声明、版权声明和服务条款链接(隐私政策、披露信息和相关条款)


当存在明显具有不同目的的元素分组时,超级页脚效果很好。带有标题的列格式以及水平底部锚点帮助, Wild Souls的这个页脚看起来很棒。

巨型页脚甚至可以呈现出“近乎野蛮”的风格。诀窍是使用元素来创建独特的组织感,以便用户知道如何轻松找到他们正在寻找的信息。

包容性设计

设计师正在努力打造一个更具包容性的网络,它几乎体现在所有已发布的内容中。从图像到语言再到替代文本,没有理由不尝试让您的项目更加包容所有人。


包容性延伸到种族、性别中立、文化、可及性和能力上。共同的主题是您的网站应该以这样的方式组合在一起,以便任何想要访问内容的人都可以访问到内容,并且人们也可以在屏幕上看到他们可以与之相关的其他人。


这里的要点是,你不需要用大喊“我们具有包容性”的图像和语言。这是展示比讲述更重要,真实比蛮力更重要的设计。


非凡的想象力

真实和想象之间的界线从哪里开始?当您查看大量网站时,可能无法100%确定。没关系。


享受这种想象力带来的乐趣,融合真实和想象,创造出非凡的图像。你的想象力是这里唯一的限制。


在 K Plus Film 的示例中,人物位于屏幕周围飞舞的水果顶部。颜色和比例创造了一种引人入胜的视觉效果,这真是太棒了。

文章来源:站酷 作者:mrdoing 

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



iOS 规范与 Material Design 哪里不同?官网总结了这几点

lanlanwork


图片

 

1.  屏幕尺寸

图片

iOS 规范没有特别规定的屏幕尺寸,因为不同尺寸的 iPhone 宽度不同。

图片

以前常用的是 iPhone 8 的 375×667,后来常用的是 iPhone 11 Pro / X 的 375×812

但是 Material Design 的屏幕尺寸就很明确,一直都是 360×640,看起来就让强迫症很舒适的数字。

 

2. 手势指示条

图片

iPhone 的底部都是统一的手势指示条,而 Android 手机底部可能是三个导航按钮,也可能是手势指示条,甚至可能什么都没有。

Material design 的示意图上,通常底部没有任何东西,所以设计稿也可以简单点,手势条和导航按钮都不用放。

 

3.  状态栏

图片

iOS 的状态栏很高的,如果改成 Material Design 就会窄很多。

上面是比较简单的展示形式,下面是 Material Desgin 官网的示意图,高度是 24:

图片

 

4.  底导航

图片

iOS 的底导航比 Material Design 更高,给手势条留出的位置更高,而且常用磨砂玻璃做背景。

而下图是 Material Design 官网给出的底导航尺寸,字号规定是 12,非常清晰了吧:

图片

 

5. 下拉浮层

图片

iOS 使用很多 Action Sheet,而 Material Design 则较少使用这类浮层,较多使用页面。

当然,Material Design 也是有类似浮层的,叫做 Bottom Sheets,只是一般只作为菜单使用:

图片

 

6.  页签

图片

iOS 规范的页签是上图左侧这种拟物风格的,而 Material Design 的页签是上图右侧这种简单的线条风格。

下图是 Material Design 官网给出的尺寸规范,推荐字号是 14:

图片

 

7. 表单

图片

iOS 和 Material Design 的表单还是有挺多差异的,例如:

  • iOS 的表单项之间有分割线,而 Material Design 没有。
  • iOS 的表单项之间右侧一般放置箭头,Material Design 则可能是图标。
  • iOS 的文本框都是简单的下划线,Material Design 可能是矩形框也可能是下划线。
  • ……

内容太多不一一举例了,还是自己去看规范比较好。

 

8. 样式

图片

iOS 喜欢用浅色大阴影,而 Material Design 一般用比较细的深色阴影。

两边的复选框也不一样,iOS 喜欢全部用圆形,而 Material 则严格遵照复选框应该是方形的心理习惯。

 

对比

图片

对比一下两边的差异,看看有多不同。

 

总结

大部分公司为了节约成本,并不会为手机端搞两套设计,通常是两个平台规范都要综合考虑。

所以 Material Design 这把 iOS 规范直接改成 Material Design 的教程,显然是不建议直接拿来用。

在不同的场景,寻找最适合的方案才是上策。

不过要说设计资料,还是 Material Design 提供得比较丰富,适合新人学习借鉴,例如我给大家准备了几个 Material Design 的组件方便下载,关注公众号,后台回复【MD组件】:

图片

 

原文地址:体验进阶(公众号)

作者:设计师ZoeYZ

转载请注明:学UI网》iOS 规范与 Material Design 哪里不同?官网总结了这几点

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

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

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

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




被吹爆的巴黎设计风格,到底有多牛?

lanlanwork


01.  什么是巴黎风格 

图片

如果要追溯巴黎风格的历史,得回到大概100年前后,这个城市的时尚和设计就已经开始得到重视,20世纪初,由于当地消费和随之而来的出口,巴黎的时装行业完全爆炸式成为一个产生了大量财富的产业。

我们要特别赞扬一位法国人,他把时尚设计与时尚风格联系在了一起,尤其是巴黎,至今仍享有这样的声誉,都需要感谢上图这个人Louis XIV路易十四,太阳王。

图片

自1643年起直到1715年去世,这位来自波旁王朝的君主保持着欧洲历史上在位时间最长的国王的记录,为72年零110天。法国和巴黎之所以成为路易十四统治时期的时尚主导力量,与他在位期间的极度集权有关。在那个时候,王室控制了奢侈品和时尚产业,从根本上使他们服从于王室的品味和特点。

这种时尚在影响法国国内外的人们,对于当时什么是“热门”时尚方面扮演了重要的角色。它通过超越宫廷的营销设计和发明创意,如改变时尚的风格和季节,用一种在当代有意义的方式来谈论巴黎风格。

图片

二战后的法国,是法国时尚界的转折点,由于设计师克里斯蒂安 · 迪奥(Christian Dior)1947年推出的New Look,巴黎重新成为世界时尚之都。他当时对时装设计的大胆尝试,是自路易十四(Louis XIV)时代以来让法国时装引人注目的东西,即对魅力和青春的关注。在二战期间被纳粹占领后,这些东西引领了巴黎高级定制时装的复兴。

图片

图片

与此同时,著名的时尚杂志,香奈儿于1945年在法国成立,著名时装设计师可可 · 香奈儿本人于1952年回到巴黎。

图片

图片

到了20世纪60年代,法国的高端时装再次全面展开,这导致了其他著名设计师的(成衣)时装获得了巨大的成功和销售。法国设计和时尚的爆炸式增长导致许多品牌被集团化,如大家熟悉的LV,Dior,让我们快速回到今天。

图片

如今基础历史,巴黎已经拥有法国八大奢侈品牌,爱马仕、LV、香奈儿、迪奥等等。这座著名的城市里除了有奢侈品牌,同时巴黎风格还被用到了生活方式、室内设计、室外建筑等各种场合。

图片

标志性的铁塔,让全世界都想来打卡的圣地,铁塔的设计也是非常有特色。

图片

这座铁塔也被用在了很多知名设计、品牌中,更是巴黎的一个代名词。还有巴黎的建筑,也是充满历史与文化底蕴。

图片

这几年比较火的新锐法国品牌AMI就是诞生于巴黎,我也很喜欢这个品牌的设计。

图片

巴黎每年的时装周,最新最潮的设计理念,无不向世界传递着这座城市的设计态度。从室内设计到室外设计,这使得巴黎的设计风格不仅存在于时尚行业,在各行各业都有所体现。巴黎的风格经典,独特,是一个非常高端的设计。

除了今天介绍的巴黎风格,国内一些大公司对于设计风格也有很多研究,比如天猫之前官方发布的一个报告,今天也分享给大家,可以用来参考和学习,需要的话可以添加叮当猫回复“报告”领取。

图片

图片

长按扫码添加叮当猫回复:报告

e

02.  巴黎风格设计特点 

图片

了解完巴黎风格历史后,那我们来学习下,巴黎风格给人视觉感受到底是什么?

f

1.有趣的纹理

图片

巴黎风格很大一个特点就是高级感,经常用一些非常有趣的纹理,比如上图的金属质感纹理,以及右侧像羽毛的一样的纹理,纹理无论在服装上,还是在奢侈品包包上都体现的淋漓尽致。

图片

无论是LV经典的老花纹理,还是今年新款,对于皮革的不同运用,都能感受到巴黎风格对于纹理极致的运用。有趣的纹理能让产品有自己独特的气质。

图片

包括在LV这些有代表性的门店设计,纹理是很核心的元素,看这个LV门店设计,使用了非常强烈的纹理作为主视觉。

图片

同样来自法国巴黎另外一个品牌香奈儿,也是在纹理上下了很多功夫,他们的衣服纹理运用,包的纹理运用,都在引领时尚界。

图片

香奈儿在海报品牌宣传上的设计,也延续了这种纹理的高级感。

f

2.白色(负空间)的运用

图片

巴黎风格还有一个特点就是负空间用的比较多,页面留白比较多,当然这个白色不一定的纯白,而是页面空间感,这点可以从一些大牌的设计中看到身影,通过大气、空旷简单的背景,聚焦到元素主题上。

图片

爱马仕的这组海报,就是这种风格,人物主体就是模特,后面深邃起伏的山丘作为烘托。让页面呈现出这种动感,放飞自我的气质。也能传递出品牌的释放、狂野的感受。

图片

白色空间的运用,遵循少即是多原理。再配合巴黎风格对于人物的选择,对于纹理的运用,让画面形成焦点,同时这样的设计能体现出很强魅力,万众瞩目的视觉感受,上图巴黎八大奢侈品牌的一些设计中,都能看见这样的身影。

g

3.极简主义

图片

图片

以香奈儿为例,就是极简的典范,无论是门店设计极简的线条,还是到日常产品设计,都遵循着极简,但是极简不代表没有质感,巴黎设计风格的纹理,配合极简的设计,让设计别出一格。

图片

上图的两件服装设计,就是最简单的黑白配色,搭配不简单的裁剪,有纹理的材质,让整个衣服的气质呈现出高级,优雅感。

图片

图片

如上图的棒球设计,香奈儿将极简主义发挥到了极致,就是简单的配色,放上一个精致纹理就让这个棒球充满了艺术气息。周边的桌球台面设计,一个简单的logo,整体桌球台也是运用黑色。

图片

再看上图案例,无论是香奈儿的香水、口红包装,还是周边时钟设计,简约的线条,黑白经典的配色。

图片

包括爱马仕的很多设计,橙色的配色,加上极简的包装。让设计简约之中透着高级。

图片

爱马仕的工业设计,遵旨着极简主义和功能实用主义,如上图的吃药提醒,分为白天吃的和晚上吃的,让人文设计温暖到了每个细节。

f

4.整洁干净

图片

巴黎设计风格还有一大特点就是整洁干净,可能和文化差异有关,无论是他们的建筑风格,还是人文,都给人干净整洁的感觉。

图片

在服装设计上,巴黎风格整体给人一种干净的视觉感受,哪怕是在深色服装设计,或者在不同材质上运用,都能将这种整洁干净的感觉运用到淋漓尽致。

那么,在设计上,巴黎风格又是如何运用?又有哪些特点呢?我们一起来看看。

e

03.  巴黎风格在平面中的运用 

图片

a

1.粗茎的衬线体

巴黎风格的设计很大一个特点,就是在字体选择上,一般衬线体比较多,并且衬线体的粗茎比较粗,形成很鲜明的反差,如上图的GUCCI海报设计,就是一个很典型的特点。

图片

如果你想做一款有巴黎风格的设计,一定要选择一个有特点的衬线字体,这里推荐一款免费的,就是google旗下的playfair字体。

图片

上图海报设计,这个字体就是巴黎风格最大的一个特征之一。

图片

上图的品牌海报,就是一个巴黎风格设计,大的衬线字体,有纹理质感的图片的运用,让页面非常低调的高级。

f

2.连体的运用

图片

图片

连体赋予了巴黎风格灵魂,运用的场景也非常非常多,可以当标题,也可以单独直接使用。

图片

这种笔画之间的组合,让画面充满了优雅和独特的气质,就像巴黎这座城市一样充满了神秘。

图片

图片

连体的运用让设计细节更加丰富,同时字体本身也具有装饰性,是一个非常高级的设计手法。

g

3.引人瞩目的数字字体

图片

图片

巴黎风格的字体,除了上面我说带一些英文字体特征外,在数字上的运用也很特别,数字一般很有特点,非常引人入胜,如上图香奈儿官网的数字字体,运用的恰到好处。

图片

数字字体一般比较大,衬线为主,配合标题的衬线为辅,形式冲击力很强的对比。

图片

数字字体和衬线体搭配一起,是巴黎风格最有代表性的手法之一,杂志感也非常强。

f

04.  巴黎风格在界面中的运用 

图片

巴黎风格在UI中用的也比较多,特别适合一些高端电商,或者一些有杂志感的设计。如上图的图文排版,清晰的图片,搭上高级的颜色,再搭配有代表性的衬线体,给人的视觉感受很高级。

图片

上图是爱马仕的官方APP,整体风格呈现出杂志感,清晰的留白,明快的配色,经典的衬线字体。

图片

香奈儿官网设计,经典的巴黎风格设计,无论字体选择,数字运用,还是留白空间关系,整体呈现的感觉非常整洁干净。

图片

页面保持了香奈儿一直坚持的黑白风格,大的图片,大的留白,衬线体的运用恰到好处,简约的线条,网格似的布局都让整个页面很高级。

图片

这组设计也是充满了巴黎风格,干净整洁的背景,模块的色卡,清晰的商品图,衬线字体设计。

f

05.  巴黎风格在网页中的运用 

图片

在网页中,巴黎风格也是用的比较多,如上图,粗茎的衬线体,简单的背景,有焦点的人物运用。

图片

整体的页面设计非常得体,虽然页面看起来简单,但是细节和统一每个点都值得推敲,也值得我们学习。

图片

上图两个网页设计也是巴黎经典风格,所有的上述特点都有,衬线字体,留白,整洁清晰的图片等等,都让这个页面充满了浓浓巴黎风格。

r

05.  最后 

图片

今天这个分享,也是源于我对巴黎风格的喜欢,巴黎风格对于设计潮流而言,是一种设计手法,它也不仅仅用于高端品牌,而是显示出平易近人的态度。希望今天这篇文章,对你有些启发。


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

作者:sky

转载请注明:学UI 网》被吹爆的巴黎设计风格,到底有多牛?

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

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

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

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



笔刷教程 | PS颜色动态功能在绘画中的作用

lanlanwork


一、画笔设置窗口

 

1.我们可以在PS的菜单栏:窗口-画笔设置(F5)里面打开画笔设置窗口,或者点击右边的画笔设置图标也可以打开。

图片

 

2.我们打开了画笔设置后,就能看到颜色动态选项(需要在画笔工具的状态下,不然是灰色不可用状态)。我的这张蛋糕侧面就是用肌理画笔打开颜色动态画的,能一笔就画出丰富的颜色。

图片

 

二、如何设置抖动参数

1.前景/背景抖动:是指颜色根据前景色和背景色不透明度的变化抖动,数值越小,以前景色为主抖动,数值越大,2个颜色之间的抖动越明显。

图片

 

2.色相抖动:颜色根据前景色在色环上抖动,数值越小,抖动范围越小,数值越大,抖动范围越大

图片

 

3.饱和度抖动:颜色根据前景色的饱和度变化抖动,数值越小,抖动范围越小,数值越大,抖动范围越大。

图片

 

4.亮度抖动:颜色根据前景色的亮度变化抖动,数值越小,抖动范围越小,数值越大,抖动范围越大。

图片

 

5.综合使用:我们搞清楚不同的抖动有哪些效果后,就可以结合着调整数值,就能一笔画出更加丰富的颜色,大家可以多调整数值试一下。

图片

 

三、插画中的运用

我在插画中经常用到这个功能,通常我把抖动变化开的比较小,这样能得到丰富的变化,又不会变得很突兀,会更加的耐看。

比如说这张,荷叶的型用套索工具圈出来后,再选稍微带点肌理感的笔刷去画,基本上是一笔画出来的,又快,颜色又比较丰富。

图片

 

这张插画的地面色块也是通过颜色动态+形状动态(也在画笔设置里面)来画的,很适合用来画花海之类的,大家可以举一反三。

图片

 

我很多作品我都用到了这个功能,不知道你是否能发现呢?

图片

图片

图片

 

原文地址:空青肆绘(公众号)

作者:风绽

转载请注明:学UI网》笔刷教程 | PS颜色动态功能在绘画中的作用

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

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

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

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



如何高效地进行网页设计?重点关注这些要素

lanlanwork


1.把握中心目标

大多数网页设计是以目标为导向,也就是网页做出来能为用户提供什么、能解决用户的哪些问题。

例如电商网站的终极目标是卖出更多的商品,资讯类网站的目标是让用户能更多地阅读最新讯息,目标不同,两类网站在设计上也会有截然不同的差异。

在设计上,电商网站会更注重页面氛围的营造,把红红火火的促销氛围搞起来,用户看到会更兴奋。

图片

▲ 在电商网站中,设计重点放在帮助用户浏览店铺并轻松找到特定商品上,放在详情页上用尽可能好的方式展示商品;付款流程也经过简化和仔细计算(例如某宝最近更新的订单页把价格聚集在一起),因此用户不需要经过太多思考就能快速下单购买。

 

2.打造平衡的效果

网页中炫酷的视觉效果能让用户印象深刻,但效果实现需要付出更成本。能明确知道什么时候更简洁的视觉效果能让整个设计变得更好,能让用户专注于正确的事情,这一点很重要。

有时候在网页中添加过多元素,会分散有价值的信息,用户也难以识别他们想看的内容。

图片

▲ 对齐和对称是页面保持平衡的重要因素。对齐既保证了布局统一,又将有联系的元素紧密连接起来;对称营造一种平衡的感觉,元素整齐有序。

 

图片

▲ 网站的登录注册页往往都设计得很简洁,有大面积的留白处理,只保留关键的信息输入框,这样用户能更专注于输入内容。

 

图片

▲ 在宜家网页中,清晰的视觉层级结构以及留白的运用让整个页面看起来非常整洁有序。好的结构能让用户知道他们在看什么,留白提供了视觉上的缓解作用,有助于引导用户的注意力。

 

3.了解基本的设计原理

格式塔原理基本上定义了我们感知事物的六种不同的认知规则。在网页设计中,这意味着需要以一种合理的方式来安排元素,帮助用户从整体上理解设计。

图片

▲ 设计中需要考虑不同元素的对齐关系、相似元素或按钮的排放位置、一组信息要如何展示、列表类信息该如何展示…

 

另一个重要的原则是希克定律,也就是向用户展示的选项越多,做出决定需要的时间就越长。因为我们的大脑需要考虑和分析所有选择,然后再选出最好的选择,当选择太多时,这就会成为一个问题。

这就像我们在餐厅里点菜一样,如果拿来一个20页的菜单,我们可能会从头到尾把这20页全看了,仍然不知道该点哪个,然后又把这个20页的菜单重新翻一遍。

去餐厅吃饭是件放松高兴的事,我们肯定不想在点餐上给自己带来压力,这样吃饭的乐趣也会大打折扣。

图片

▲ 如果需要填写很长的表单,考虑将长表单拆分成几个短的问题,让用户按步骤依次作答,避免一下看到过多问题给用户带来负担。

 

4.了解面对的用户

网页设计需要知道面对的用户是谁、他们想获取什么、想处理什么问题以及他们是想法是什么等等。

对最终用户的印象越清晰,越有可能创造出成功的设计,就像设计一个面向儿童的网站与设计一个供老年人使用的网页会完全不同。所以在一开始,要先学会把自己的观点先放在一边,倾听目标用户的意见,然后再慢慢验证自己的想法。

图片

▲ 抖音千人千面的推荐机制,能为用户精准推送他们感兴趣的内容,把握住了用户的兴趣,产品才能越来越受欢迎。

 

5.排版很重要

排版需要长期的积累和沉淀,如何合理地安排页面中的品牌标识、图片、文字等元素,是始终需要考虑的事。

比如不管网页设计的目标是什么,或者选择什么样的视觉效果,在选择字体时我们总要考虑字体的粗细、大小或对比度等因素。

对于更多的排版和设计技巧,可以回顾这篇文章: 快速改善网页设计的13个技巧!

图片

▲ 根据设备不同,最佳字体的选择可能会发生变化。在移动端设计中,文字可读性是首要的,屏幕越小越要保证信息的可读性。

 

6.信息架构和导航

网页的导航设计和信息架构共同构成了产品的主干,让用户能够了解产品和功能并找到需要的信息。

图片

无论信息的长短如何,合理的层级结构有助于在产品中创建逻辑结构,以便用户可以查找信息。导航能反映出产品架构,这样用户无需花费大量精力,就能轻松找到主要信息和功能。

图片

▲ 点击按钮之后会切换到哪一页、怎么返回到当前页、点击哪些按钮页面不跳转。架构流程不仅自己要明确,更需要用户看得懂。

 

7.降低认知成本

咱们前面提到,如果面临的选择太多,就需要经过大量思考,这样用户很可能会变得有压力甚至困惑。其实这里面还包含着另一层意思,过多的选择会增加用户的认知成本

只有降低认知成本,才不会给用户带来过多压力,才能快速做出判断。在网页大框架已经设计好的基础上,降低认知成本的地方往往更在于细节。

图片

▲ 准确拿捏细节。在面包屑导航中,鼠标悬浮上去是一种状态,点击后又是一种状态;选中的标签与未选中的标签在颜色上做出区分;当前页码重点突出的同时,告知用户前后页码还支持左右切换。

 

最后

最后为大家精选了网页设计Web UI Kit源文件,包含5套网页模板、30个不同的组件、3种颜色模型,很难得很实用的一份资源,涵盖了大部分的设计场景,赶快下载使用起来~

领取方式:关注公众号,后台回复【网页设计】获取设计源文件

图片

 

慢慢来比较快,希望对你有所帮助!

 

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

作者:Clippp

转载请注明:学UI网》如何高效地进行网页设计?重点关注这些要素

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

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

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

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



不会排版的来看看,序如何运用对比制造秩

lanlanwork

咕噜噜

今天我们讲版式中如何运用对比制造秩序

图片

图片

首先如何理解秩序,我们用点的示例放置,当展现在画面中出现无序的形态时,会显得没有规律性,而以螺旋状的方式放置时就明显感受到了画面的舒畅和秩序感。

图片

两者同样以圆为形态,秩序感的形成却截然相反。

图片

秩序感的体现就像建筑和摄影中对于画面布局的形态与物体之间的关联起到微妙的动态变化。

图片

在整个呈现过程中,我们就需要运用秩序里的大小对比、空间对比、粗细对比和颜色对比的关系。

图片

我们用一个小案例来诠释对比的作用

 

1.大小对比

 

图片

首先运用大小对比,这是正常文案放置时的排版结构,文字的大小比例都是相等的。

图片

我们将文字的主次进行了拆分、强化了大小关系,这时文字的比例从原来的大小相等到互相有了不同变化。

图片

强化了对比后,我们看下效果,能明显感受到对比后的阅读逻辑性了有了一定提升。

图片

 

2.空间对比

图片

将主题中的文字放大并改变字体后弱化显示,再将原有内容放置到前面,在四周增加一些装饰信息作为点缀。

图片

通过对比后的效果,可以看出主体内容得到了一定的空间层次,整体也显得丰满一些。

图片

 

3.粗细对比

图片

通过筛选出优先重要信息,将内容作出粗细之间的明显区分,这样的方式可以帮助用户在阅读画面时有更好的着重点,也有了明显的阅读顺序。

图片图片

 

4.颜色对比

图片

改变主题颜色或者一些需要强化记忆的文字,能让整体的版式即显得完整,又多了一些阅读体验感。

图片

图片

我们刚才通过了多种对比,可以看出秩序性在整个版式中的重要,规律的变化也从来都不是毫无逻辑的呈现。

图片

 

示范案例

图片

为了让大家更容易理解和运用起来,我们再用一个案例来展现秩序性在版式中的使用方法。

首先填充红色为背景色,将主标题文字放大,副标题缩小。

图片

改变字体和颜色,利用英文拉开字间距放到主标题上形成了对比和颜色之间的关系。

图片

再复制主标题文字放大移动到背景上,改变字体颜色形成为背景之上的层级

图片

通过元素、图形、背景肌理、素材等去强化与文字版式之间的空间层级关系。

图片

这样一来,不仅文字信息有了非常清晰的逻辑表达,画面上也得到了视觉呈现的丰满和秩序性的动态规律。

图片

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网》不会排版的来看看,如何运用对比制造秩序

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

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档