首页

设计规范制作流程

资深UI设计者

 

产品发展日趋平稳时,产品定位和品牌形象已进入稳定状态,参与设计的人越来越多,设计的统一性和效率的问题也渐渐显现。因此,为了保证平台设计统一性,提升团队工作效率,打磨细节体验,就需要我们定义和整理设计规范。

确定规范内容

UI 设计中,设计规范是一个关键步骤。知名大厂基本上都有一套自己的完整规范体系,在整理设计规范时,以大平台规范体系作为参考,针对产品自身情况增删,整理出我们自己所需要的规范内容,能有效地避免规范内容遗漏缺失。

拓展链接:各大官网设计规范集合

截屏2024-09-20 上午11.36.39.png

色彩规范

颜色是设计中最重要的元素,颜色的运用与搭配决定设计的品质感。在 UI 设计中,颜色的使用规范主要在于:品牌主色、文本颜色、界面颜色(背景色、线框色)等。

 

字体规范

不同的字体气质不一样,并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明。

 

图标规范

在 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。设计规范中,图标一般按照用途分为两类:应用图标、功能图标。

应用图标:各种应用程序的识别标志,在应用商店里下载的一些应用程序的标志。

 

功能图标:规范中最好标明图标格式与使用方式。比如 Web 设计,图片可以使用 iconfont 管理,可生成代码交付给前端开发;如果是原生 APP,那么需要标注图标导出格式与尺寸。

 

图片规范

图片作为界面设计的重要组成部分,需要标明尺寸规范,分为不同用途的种类。

 

设计尺寸&栅格系统

设计尺寸,是指进行设计时,选择的画板尺寸。例如是 750*1334,还是 375*667,每个公司设计的基准都不一样,所以设计尺寸并没有规定只能用某一个尺寸,我们在设计时,使用的 1 倍图为基准进行设计的,基准尺寸为 375*667。

栅格系统,是运用固定的格子设计版面布局,在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统,是因为现在的设计基本都是一稿适配多端,而栅格系统能很好的解决这个问题。

△ Christie Tang

栅格系统拓展链接:《看不懂不会用的栅格系统,这篇帮你彻底掌握它!》

界面布局

布局是页面构成的前提,是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来保证同类产品间的一致性,设计者在选择布局之前,需要注意以下几点原则:

  • 明确用户在此场景中完成的主要任务和需获取的决策信息。
  • 明确决策信息和操作的优先级及内容特点,选择合理布局。

 

△部分布局类型展示

控件规范

控件是指产品界面中可操作的部件,与组件是有一些区别的。控件翻译为 Control,组件翻译为 Component。

通俗的解释说法就是组件为多个元素组合而成,控件为单一元素组合而成。

常用的 UI 控件(Control):按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。

以下列举一些我们在 APP 设计规范中整理的内容。

1. 按钮

按钮有 5 个状态:正常、点击、悬停、加载、禁用。需要在规范中分别罗列出这五个状态,标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度,按钮文本大小、颜色值。如果是图标按钮的话,除了上述参数值以外,还需要标注 icon 和按钮文本之间的间距,icon 图标的大小。

 

2. 输入框

用于单行信息录入文字上下居中显示,支持键盘录入和剪切板输入文本,对特定格式的文本进行处理:密码隐藏显示、身份证、卡号分段显示,标注宽高。

 

3. 选择

选择可分为单选与多选,并且也有五种不同状态:未选择、已选中、未选悬停、已选失效、未选失效项。规范中需展示出所有效果状态。

 

4. 选项卡

用于让用户在不同的视图中进行切换。标签数量,一般是 2-5 个;其中,标签中的文案需要精简,一般是 2-4 个字。每个标签所占的宽度可适当调整。

 

5. 滑动开关

滑动开关有两个互斥的选项(例如开/关、是/否、启动/禁止),它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作。

 

6. 进度条

用于向用户展示步骤的步数以及当前所处的进程。

 

7. 角标

用于聚合型的消息提示,一般出现在通知图标或头像的右上角,通过醒目的视觉形式吸引用户眼球。

 

组件规范

常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。△ Ant design 移动组件

在 skecth 中设计时,使用 Symbol 创建的组件,在后期整理时,可以节省许多的时间。

推荐阅读:《Sketch 进阶教程!利用Symbol 建立一套设计规范组件库?》

当然,Figma 也同样具备这样的能力,你所创建的组件都存在于 Assets 中。

 

缺省页面

  • 空状态页面:显示对应的页面空状态的图标,增加相应的引导按钮。
  • 无网络状态:在没有连接到网络时的提示页面。
  • 404&505页面:发生未知错误时的页面。

 

规范优先级

了解规范的内容有哪些之后,我们需要确认的是规范优先级,规范内容庞大复杂,基础的、必要的、高性价比的放在第一个版本中,复杂的往后放,随着产品的迭代,规范才会越来越完整。

 

一个好的规范应该是的、简单易懂的。具体执行时,我们应该确保分类合理、规范本身保持一致、布局排版易读,来提升设计师查阅的效率;确保定义清晰、描述准确、场景完备,来帮助设计师理解和使用。但值得注意的是,设计规范并不是「圣经」,不要因为规范而限制了自己的思维,当发现规范有问题的时候,要及时去修正,而不是做了一次之后,一直沿用,永不修改。

以下是蓝蓝设计(北京兰亭妙微)给中国移动研究院设计三套软件,制作的部分UI规范。

 

 

 

 

 

 

 

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

网格基础手册

资深UI设计者

网格系统是针对于平面的,而不是网页设计和移动端的设计。网格系统、栅格系统、网格基线和网格基数,应用层面完全不同,大家跟着学慢慢就会理解它们之间的差异。平面中的网格系统非常庞大,网格基础就分为很多部分,如:网格的基础知识(认识网格)、网格的元素、网格的类型、网格的应用等等。

这些知识掌握后就要去理解网格都应用在哪里?如:宣传册和小册子,插画书,杂志和报纸,包装,海报等等。理解了网格系统都会使用在哪里后,就要去理解网格系统的具体结构,又分为两类:结构网格和解构网格。它们俩的知识又细分为:模块网格、比例网格、复合网格、分层网格、栏式网格等等。

理解了网格系统的结构就要去理解网格系统的设计思维,如:避免呆板的设计、留有呼吸的空间、用色彩来编码、让读者参与运用组织规则等等。这篇文章先来讲一下网格系统基础中的基础。

网格的概念

这里我引用了蒂莫西·萨马拉和德里克·博德萨尔,两位大师对网格系统的理解。蒂莫西·萨马拉认为:「在文字问题全部解决之后,网格真正的成功取决于设计师是否超越网格结构所蕴涵的整体性,然后用它来创造一部分动态的视觉表述,这些部分可以让读者保持对整本书中每一页的兴趣。」德里克·博德萨尔认为:「在版式设计中,网格是最容易引起误解和误用的元素。网格只有在你想用的素材上时才会有用。」

另外再了解一下罗伯特·劳森伯格先生对网格的理解:网格是用来给读者组织空间和信息的,它给整部作品提供了规划。网格给信息提供了围栏,同时也是规定和维持秩序的一种方法。虽然网格已经使用了许多个世纪,但是很多图表设计师还是把网格与瑞士人联系在一起。在 20 世纪 40 年代的时候,人们热切希望维持秩序,因而创造了这种可以提供视觉信息,并且更加系统化的方法。几十年后,网格设计被认为既单调又乏味。而如今,网络设计再次被看作是基础性的工具,无论是行业新手还是具备几十年经验的老手都依赖此种工具。

我这里再引用一下《秩序之美-网页中的网格设计》这本书中所阐述的对网格系统的观点,网格就是在混沌中建立规则。再引用《塑造和突破网格》书中的观点根据以上观点做结合得出:「在混沌中建立规则,突破网格结构并打破规则」,就是网格系统的核心概念。这些观点结合起来,这就是我理解的网格系统的概念。

网格的构成

网格构成的概念:网格包括一套独特的对齐关系的原则,用于指导如何在一个版面中分配各个组成部分。版面中包含若干个不同的部分和构成,每个部分都有着不同的用途和功能。设计师也可以根据自身喜好,将某些部分从整体结构中去掉,这一切也取决于设计师如何理解材料、市场和读者的需求。网格的构成:版面、版心、外缘留白/外页边距、订口、栏目、栏间空白、底部留白/底页边距。

网格的构成 – 大体结构:

  • 版面:版面是页面中所有构成部分的总和;
  • 版心:版心是页面中主要内容的所在区域;
  • 外缘留白/外页边距:外缘留白或外页边距有助于将文本框纳入整体的设计中;
  • 订口:订口是装订时所需要的留白,通常存在于两个页面之间的折叠部分;
  • 栏间空白:两个栏目之间的分隔区域;
  • 底部留白/底页边距:页面底部的留白区域。

网格的构成 – 局部结构:

  • 空白:空白可以提供如注释和说明文字等二级信息;
  • 基线:基线是网格的基本结构,用来引导文本和其他元素在设计中的布局;
  • 栏目:栏目是有组织的放置正文的地方,并让读者容易阅读;
  • 空间区:空间区可以为文字、广告、图像或其他信息构成特定区域的模块组或栏目组;
  • 模块:模块是给网格内图像元素留出的空间,相连接的网格可以建立不同的行列模块;
  • 标志:标志能标明出现在同一位置的素材的方位,包括页数、页首标题和页脚(标头、页脚),以及图标。

网格的度量

在网格系统中有两种度量:绝对度量和相对度量。网格系统本身有自己的绝对度量单位,例如英寸(inch)或磅(Pt,印刷字体大小的一种单位,1pt等于0.01384英寸,约1/72英寸)。在网格内部中很多元素可能会使用相对度量,来表示它们的大小和其他元素之间的关系。

运用网格系统时,可以从起始点就开始使用坐标。红色的线条是基线,它们之间的间隔为 12p 磅。首行、分栏一起构成一个坐标。一个模块单位有 13 条基线,每条间隔为 12 磅,因此版心高度是 156 磅(13×12)。

1. 网格的度量 – 文字

文字经常以绝对单位磅来计算的。对于确定的长度,绝对单位能提供一个固定值,这便意味着设计师能有效地控制文字和基线之间的关系。文字和基线通常使用磅值(pt)来进行计算的,用毫米算也行,但要注意的是将文字和基线放在同一个度量单位下进行计算。

上图中就有一个两栏文本块。在这个例子中,一旦建立起网格系统,说明元素的度量可变性更强了,绝对度量单位便不是那么重要了。

2.  网格的度量 – 图像

数码图像被用于设计时,通常是按照百分比缩小的,或者可以在程序中重设尺寸以适应特殊的空间要求。尽管如此,为了保证良好的印刷质量,印刷时图像的分辨率至少要保持在 300dpi。而在屏幕上显示,其分辨率则至少要保持 72dpi。

就像上图所表现的这样,图像也能占据单个模块或覆盖一组模块。

表现形式

网格系统与当代艺术运动有着紧密的关联,例如立体主义、构成主义和其他一些偏爱严谨结构的当代艺术的分支,都与网格系统有些紧密的联系。为了创造出流畅并令人印象深刻的设计,文本和图像的不同组合被当作表现形式来使用。如同画家在画布上构图一样,设计师也用相似的办法来吸引读者的注意。不同的表现形式能有效吸引读者,并形成一系列的联系。

上图介绍了一种设计观点,利用元素的放置位置可以创造出不同的视觉效果。设计对象既可以在页面中占主导位置,也可以被小心翼翼地插入页面的一角;既可以建立相互之间的关系,也可以被清楚明白的独立出来。

1. 分组

聚合成组的元素能使相关的信息联系起来。而不同的设计元素对应排列,也有助于建立起它们之间的联系。分组的方法就是将图像和文字置于单页、通页甚至整个出版物的特定模块或空间区中。

2. 边界

在设计中,为了使边框保持整齐和美观,设计师常常使用元素的远离来与边框保持一定的距离。尽管如此,对于边界的利用仍能有效的创造出具有设计感和活力感的版式设计。

3. 水平

当设计师要利用网格来引导读者视线横跨一个单页或通页时,设计元素便会依照这种水平运动的趋向来进行编排。也可以运用出血印刷和横跨订口的图片,形成水平的运动感。

4. 垂直

当设计师通过运用网格中的各个元素来引导读者视线在页面上下浏览,就是垂直形式的最好表现。垂直形式的垂直线不一定要在中线的位置。在平面中设置一个轴线,元素按照这个轴线做重心的平衡这种表现形式更好,这样不对称的版面具有一定的动势和张力,也更有冲击力和跃动感。

5. 斜角

把网格倾斜一定的角度,一般会倾斜至 30°、45° 和 60° 这三种角度,这些倾斜的网格发挥的作用原理与水平网格相同,但由于它们是倾斜的,设计师便能够以不同寻常的方式展现自己的创意。因网格可以设置成任何角度,往往这样有角度的网格更难设置也更难处理一些。

6. 轴线

网格中的轴线是一条隐形的平衡线或重力线,会贯穿整个设计作品,这个作品就是利用轴线网格来做的,它产生并受控于页面元素的位置和布局。

元素的比例

在设计中改变图像或文本等元素的比例,页面就能营造出跃动率和动势。在平面中运用元素之间的比例关系,就可以从不同的视角展示同一个主题。元素在没有经过比例调整的情况下,元素之间的比例只是按照它们固有的样式出现,这时它们之间存在一种消极的关系。相反,元素之间的对比关系存在,比例经过调整后,它们之间存在一种积极的关系。

这里的积极和消极可以理解为「动与不动」,页面元素没有变化就给人感觉死气沉沉的,版心上下留白一致也会给人这种感觉,这种布局适合用于古典书籍和较为传统的平面设计中。不动且没有变化给人感觉没有动势和张力并很消极,动而有变化给人感觉灵动活跃并很积极。

通过改变元素之间的比例关系就会存在积极的关系。相对较大的元素层级更高,并吸引了更多的注意力。

元素的层级

设计师利用层级的概念,通过比例大小或布局结构来定义作品,并呈现作品中最重要的信息。

1. 消极

下图所示中的页面是处于消极的状态,两大栏目没有对比关系。尺寸一致显得整体页面很平静,也没有表现出动势和张力,文本之间也不存在层级的关系。但要注意的是,采用这种排版布局,读者的视线会自然的从左到右依次阅读,并被带入作品所传递的信息中。

2. 位置

对设计元素的布局能明确设计中的层级关系。下图中的标题独立放置在了左页,来突显出它的优先级与重要性。

3. 位置和尺寸

位于页面入口处的元素被放大,它与下面元素的间距也被拉大,就形成了这个元素在层级中的重要性。

网状与点状网格

设计师会利用网状网格或点状网格来辅助对设计元素的布局。使用网格之前,必须理解它们是如何辅助设计师进行设计的。要思考牺牲对布局的多样性,换来多少设计的连贯性,而且也为实践留下了更大的空间。

1. 网状网格

网状网格是基础网格,它由一系列的水平线和垂直线组成的,以此来引导设计元素的布局,使设计师能快速布局并变得连贯而准确,它常被运用在设计定稿之前的草图中。

2. 点状网格

点状网格同样是一个基础网格,用来安置不同的设计元素。它们也可以用来补充页面元素的布局,例如文字和图片之间的空白等。

文章来源:优设

这九招让你的视觉动起来!

资深UI设计者

在我们平时的设计工作中,经常会需要做一些有动感的画面,去体现某些产品所具有的运动属性,比如汽车的速度感、球鞋的运动感等等。可是由于载体或是成本的原因,导致客户没办法投入动态画面的制作,所以就要求我们只能在静态的平面中去创造动感,让原本不会动的画面看上去好像也能动起来,这就是今天要为大家带来的内容。

我们先来看一组照片,这些猫的图片明明都是静态的,可是为什么我们看到这些照片的时候,却能够明显的感觉到猫在跳跃的动感呢,这个主要是因为我们的心理作用。

正如佛教里所讲的,不是风在动,也不是云在动,而是心在动。那些看上去带有动感的图片并不是真的在动,也不是屏幕在动,而是我们的心理作用。

所以我们做设计的时候,就可以很好的利用这一心理作用,去实现一些具有动感的画面。既然要做动感的画面,我们需要先了解,关于运动在物理学中的定义。

物理学中的运动,必须具备两个要素,分别是速度和能量。

那我们就可以总结出两种画面中的动势,第一种就是具备速度和方向的动势,比如画面中这两张图片,我们可以很明显地感觉到,图片中的主体是正在运动的,并且具有很快地速度和明确的运动方向。

第二种就是静止的,但具有强烈能量的动势。比如画面中这两张图片都没有在动,可是我们也能够感觉到它的动感。如果说前一种动势更注重于刻画运动的速度感,那么第二种则更加注重刻画一触即发的能量感。

那么,我们在平面中应该如何去创造动感呢?其实很简单,因为张力在画面中不平衡时,便会产生动感。

所谓张力就是画面中元素向外扩张的心理作用力。

这么解释可能有些抽象,我们可以将张力与万有引力进行类比。万有引力就是,任意两个物体具有通过连线方向上的力相互吸引。而我们可以将张力定义为画面中任意两个元素,通过连线方向上的力相互吸引。也就是说画面中的任意元素都有相互吸引的力。

比如我们在一个画面中的上下左右各放一个圆点,然后在画面的正中间放一个较大的点,中间这个点由于均衡地受到上下左右吸引力的作用,所以它所受到的张力是平衡的。

当我们将中间这个大点往上移动,大点受到的张力平衡就会被打破,产生了要往下坠的动势。

根据万有引力定律公式,物体所受的吸引力和质量是成正比的。

所以我们同样可以类比到张力中来,画面中打破平衡的那个元素的质量和面积越大,所带来的动感就会越强烈。

看完了刚才所讲的这些,相信大家现在心里大概都会想起一句话,就是听过很多道理,依然过不好这一生。的确,听了这么多的理论公式,难免会越听越懵。而且我们在做设计的时候,也不可能去测量画面中每一个元素的大小、间距、方向,也不可能把每一个元素之间的张力进行量化,然后再用公式去计算出动感的大小强弱。那大家肯定还会继续追问了,那么到底该如何去制造动感呢?

这里我总结了三点产生动感的原因,分别是基于生活经验与心理认知、诱导视线移动,以及非平衡状态下产生的视觉冲击。

基于生活经验与心理认知

我们先来看基于生活经验与心理认知,每个人在成长的过程中都会碰到许多人和事,并且对不同的事物会总结出一套规律和认知,也可以说是刻板印象,所以我们就能感觉到一件事物是运动的还是静止的。

比如这两个小人,虽然只是一个轮廓,但是我们却能感觉到左边的人是站立的,静止的,而右边的人正在走路,是运动中的。

这样的例子很多,例如书本是静,车子是动。

树懒是静,猴子是动的。

另外由于人类拥有一种组织倾向,所以当我们看到某一个运动的瞬间时,会自动脑补中出他运动的过程。比如这张静态图片,相信很多人看到时都会脑补出那个视频。

但是这里有一个问题,就是不同的人他的生活经验是不同的,对于事物的认知和理解也就不同,可能对于一部分人来说这是具有动感的,而对另一部分人来说却是静止的。比如刚才那个打篮球的图片,如果是没看过视频的人,当然就脑补不出他的动感了。所以对于这种刻板印象的利用,我们需要根据受众的具体特征具体分析,千万不要盲目使用。

诱导视线移动

接下来我们来讲讲第二种情况,诱导视线移动。由于运动是相对的,所以我们在看东西的时候,视线移动也可以理解为是物体相对视线发生了移动。

比如我们在看报纸的时候,从左上角往右下角看,在我们眼睛里出现的画面是这样的,从而便产生了好像报纸在动的动感。

最简单移动的案例就是箭头,例如这是一条水平的直线,我们会认为他是静止的,而当我们在一端加上箭头之后,我们的眼睛就会随着箭头所指方向移动,从而产生动感。

这两个都是通过一些指向性的图形进行引导视线移动的作品。

非平衡状态下产生的视觉冲击

接下来我们来说一下第三种情况,非平衡状态下产生的视觉冲击。

比如在天平的两端各放一只猪,那么这个天平就是处于一个平衡的状态。

当我们在其中一边再加一只猪时,天平就会失去平衡,重量更大的一边会往下倒,直到找到一个新的平衡。

而我们的大脑其实也和天平相似,当我们看到一些不平衡的画面时,我们就会有把它转换为平衡状态的倾向,所以动感的产生,也就是大脑脑补不平衡到平衡的这个运动过程。

我们在半空中放一块石头,由于这块石头受到重力的作用,处于一个不平衡的状态,所以我们认为他有向下掉的趋势,直到与地面接触找到新的平衡状态。

如果我们把石头换成一个气球,那么情况就相反了,由于气球受到重力作用的同时也受到了更大的浮力,所以气球会有往上飘的趋势。

举一个更加能说明的例子,其实我们大多数人或多或少会有一些强迫症,比如看到这种一只铅笔没对齐的画面就会很难受,特别想把它怼回去。

所以我们就会脑补出这只铅笔往左移动的过程,从而产生了动感。

这两个海报都是通过创造一些不平衡的场景带来刺激感,从而产生动感。例如颠倒的房子和悬空的蒸笼。

制造动感的技巧

经过前面的讲解,相信大家应该对动感是如何产生的,有了一定的认识,但是,我们刚刚只是从理论的角度去讲解了动感是如何产生的,运用到实际的设计中可能还是会一头雾水。那接下来的部分就是真正的干货环节了,去给大家讲一些比较实用的制造动感的技巧。

这里总结了 9 个小技巧,我们一个个来看。

1. 捕捉动态瞬间

我们在前面提到了当我们看到某一个运动瞬间时,我们就会脑补出整个运动过程。那我们就可以反过来,从运动过程中捕捉某一个瞬间,用这一个瞬间来表达平面中的动感。

这里可以分为两种情况,一个是捕捉运动刚开始的瞬间,强调运动刚开始的那种能量感。

这是两个捕捉运动开始瞬间的例子,两名运动员都穿好了装备,虽然还没开始动,但是却能感受到一触即发的紧张感。

第二种就是捕捉运动过程的某一瞬间,这种方式带来的动感会比上一种强烈得多。

例如这两个例子都是捕捉了运动员正在运动中的瞬间。

这种方式所传达的动感强弱是由运动物体的动作姿态所决定的,所以我们需要认真比较每一瞬间的动作,选出最适合的一帧。

2. 倾斜

第二种技巧是倾斜构图,一般横线和竖线都会给我们一种稳定平衡的感觉,而斜线相对于横线和竖线来说,则会给我们带来强烈的不平衡感。

例如这些图片,无论是迈克尔·杰克逊的经典舞蹈动作,还是比萨斜塔,都给我们带来一种不安定、危险、不平衡的视觉冲击。通过这种不平衡感从而产生动感。

我们观察这些线,会发现 45° 时的斜线相对于横线和竖线的倾斜角度最大,所以 45° 倾斜时不平衡感最强,动感也最强烈。

漫画中的倾斜构图

在漫画作品中经常会将剧情画在倾斜的格子中,目的是为了弥补漫画纸质作品的缺陷,强化漫画内容的动感。

电影中的倾斜镜头

在电影中也会故意用到倾斜的镜头,由于电影本身就是动态的,所以运用倾斜镜头一般是用来强调危机感、动荡不安的漂泊感等等。

摄影中的倾斜镜头

摄影作品中也会用到倾斜视角,这两张都是通过倾斜视角强化速度感的例子。

文字倾斜

那么我们看看倾斜在设计中是如何使用的,首先可以是文字倾斜,这两个海报的人物主体都是竖直的,通过文字倾斜来增加动感。

主体倾斜

这两张海报则是保持文字水平排列,将主体进行倾斜处理从而带出动感。

叠加倾斜色块

我们也可以将文字和主体都水平或者竖直放置,然后添加倾斜的色块强化动感。

画面整体倾斜

这种是将包括主体和文字在内的画面整体进行同一角度倾斜处理。

多角度倾斜

最后这种是难度比较高的,画面中出现了多个角度的倾斜对比,画面十分灵活且动感十足。

3. 错位

接下来看看第三种倾斜技巧,错位。什么是错位呢?就像这辆小车一样,他在运动的过程中,身后会产生的一些虚影错位,使得画面中的一部分被破坏了,视觉需要在脑子里想象补充这一被破坏的部分,使画面还原为原本的样貌,从而产生运动感。

重复

错位这种技巧我们也可以分为几种类型,首先第一种就是重复,通过重复的手法去模拟物体的运动轨迹,让人脑补运动的过程,从而产生动感。

模糊

第二种就是通过将背景或者是主体进行模糊,从而传达动感。第一张图片是通过模糊主体身后的背景去产生动感,而第二张则是通过模糊文字的外轮廓从而产生一种收放的动感。

错开

第三种是错开,就是将画面的某一个部分进行错开处理,让画面遭到破坏,需要人脑去修补这部分的破坏,从而产生运动感。

其他

除了上面三种还有许多别的类型,例如通过车辆行驶溅起的水花,融化往下低落的液体等等,都可以造成对画面的破坏,从而制造动感。

4. 集中与发散

对于集中与发散我们可以分为两种,第一种是这种通过线条绘制的发射或是集中图案,从一个中心向某一方向或四周扩展,或者是四周向一个中心集中的线条图案,盯着看会出现一种光耀感,通过光学效果产生视觉幻想,从而产生视觉动感。

而第二种则是通过物体或图形的疏密节奏变化,从而产生出类似扩散或是集中的效果,这种效果会令我们联想到河流或是烟雾扩散的情形,从而产生了动感。

当扩散的图案配合上透视的效果,会使得动感变得更加的强烈。

背景

对于这种集中发散的图形,我们可以将它作为背景来烘托动感和氛围。

文字

也可以将文字编排成发射状,模拟出那种喷口而出的效果。

主体

或者是将图形作为主体去表达特殊的主题。

以透视作为发散

这两个海报是比较特别的例子,将放射状与透视相结合,体现了很强烈的动感。

5. 螺旋曲线

接下来讲讲关于螺旋的技巧,因螺旋发展或内收形成的曲线,会让人联想到水的旋涡形,视觉上就形成动感,且螺旋曲线的旋转曲度越大,动感就会越强。

另外,密集的螺旋曲线也能给人带来一种集中或者是发散的效果,从而也能带来一定的动感。

这两张海报是将螺旋曲线作为主体使用,来表达其特定主题。

这张海报个人比较喜欢,非常灵活地将画面中的文字和图片沿着螺旋曲线排布,加上大小的变化,让画面产生了一种集中的动感。

这张海报则是将螺旋线作为背景,并将文字放在螺旋曲线间排列。

6. 波状曲线

第六种技巧是波状曲线的使用。因为曲线的来回反复扭曲,会令人联想起翻滚的海浪。

而且由于曲线本身就具有不平衡的张力,他会有一种向直线转变的趋势,所以波状曲线特别适合用来表达动感。

波状曲线的曲度越大,他所产生的动感就会越强烈。

对于波状曲线,我们可以将其用来作为主体或者是背景进而表达动感。

也可以通过将文字做成这种扭曲的效果,从而产生一种文字在扭动的动态感。

7. 色彩

第七种技巧则是对色彩的使用。因为色彩有前进感和后退感,所以我们可以利用这一点来制造动感。其中最容易理解的就是使用色彩的渐变,沿着色彩逐渐变化的方向,来诱导人们的视线移动,从而产生视觉上的动感。

这两个都是利用不同色彩的渐变来引导视线移动,从而产生动感。

我们在前面讲过运动是需要能量的,而象征高温的暖色调比象征低温的冷色调更具备能量感,所以暖色调比冷色调更适合表达动感。

这是一张日本新干线的海报,虽然用的是静止的列车作为主体,可是鲜红的背景却能很好地传达出列车的能量感。如果我们将红色的画面换成蓝色的话,那种能量感瞬间就没了,多了些科技的属性,画面变得冷静克制了。

8. 重心偏移

接下来是重心偏移。一般我们编排版面时都会注意版面重心的均衡,将画面整体的重心放在画面中间。可是在塑造动感画面时,我们却可以将画面的重心偏离视觉中心,使画面形成一种不平衡感,从而产生动感。

我们来看看这两个海报,都是通过将画面的重心全都放在画面的一侧,从而产生了一种很强烈的不平衡感。

另外,由于视觉重力的原因,当画面重心偏上时,能很好地塑造出往下坠的动感。现在画面中的这两个作品都是将重心放在了画面的上方,我们能感受到画面中的主体会有一种往下掉的趋势。

9. 蒙太奇

最后一种是蒙太奇的手法。前面我们说过人类天生具有一种组织倾向,当我们看到运动的瞬间状态时,我们便能脑补出运动的过程。所以通过蒙太奇的手法,将一些不同时刻或状态的图片放在一起,便能使画面产生动感。蒙太奇手法比起单纯使用一张运动瞬间图片,能承载更长时间的运动和更多的运动内容。例如画面中的这两个动作,把他们放一起之后我们就可以联想到这个小哥从热身到起跑的过程。

其实漫画运用的就是蒙太奇原理,通过几个关键的情景,去传达一个完整的剧情。

这些都是运用蒙太奇手法的作品。

案例

以上就是今天的理论部分,接下来我们进入案例实操的环节,这次我给大家带来了四个案例,分别运用到了倾斜、重心偏移、发散与集中,以及蒙太奇的手法去塑造动感。希望通过这些案例的演示,能够让大家更好地理解今天的内容,下面我们就来进入案例的部分。

案例一

首先确定好画面的页边距,并且将画面横向分为 6 份。

然后将主体,也就是科比的形象,放在画面正中间,横向占中间四栏。

接着在科比的下方叠加一个红色的倾斜色块,强化科比倾斜的体态和动感。

从球鞋的名字中提取出关键词叠在科比下层,并将球鞋的中文名放在英文下方。

将球鞋与介绍性文字做成文字组的形式放在画面下方 。

由于主标题英文被遮挡了一部分,缺失了一些可读性,所以我们将球鞋的英文名做一个重复放在左上角,并在右上角添加 logo。接下来我们在背景上叠加一个篮球场的场景。

并将画面的四周涂上黑色的渐变,强化主体形象。

由于现在画面和主体都有一些偏暗了,所以我们对整体画面进行稍微调亮,那么这个案例就完成了。

案例二

这个案例同样也是一双运动鞋,但是我们这次利用重心偏移的技巧去塑造动感。

同样的确定页边距,并将画面横向分为四栏,将主体放在画面左上角占上方两栏。

然后从球鞋的名字中提取出相关英文放到版面顶部,并置于主体下方。

因为我们要做一个重心偏移的版面,所以我们接下来将所有的介绍性文字按照主体的负空间排列在版面上方。

为了防止重心的过度偏移,同时和左上角的球鞋做一个对角线的呼应,所以我们在版面的右下方放置价格以及球鞋的型号等信息。

然后吸取球鞋的颜色做一个色彩上的呼应。这一张球鞋的海报就完成了。

案例三

这个案例我们来做一个放射光线的海报,这个海报内容是一款果汁软糖的促销海报。

首先确定好页边距。

然后我们从这款软糖的包装上提取出一个图形作为画面主体。然后将软糖的名字和介绍文案放到这个图形中。

把图形按照黄金比例和网格放到画面中间。

在主体图形后面叠加放射线条,底下留出一部分空间放置产品图片及其他信息。

将产品图片和促销信息以居中对齐形式排列在画面下方。

然后我们可以在放射线上添加一些表情愉悦的人物图片,去强化吃了这款软糖会很开心的这个动态过程。

还可以在画面周围添加一些可爱的小图形去烘托氛围。

最后加上 logo,这个软糖的促销海报就完成了。

我们也可以将这个海报做成不同的配色,每一款产品对应一个配色。

案例四

这是一个艺术展的海报,我们通过蒙太奇的手法来表现。

由于展览主题是过去、现在和中间的一切,所以我们将画面分成三份,并用运动过程中的三个不同动作来代表着三个阶段。

由于第一张图片的底色偏亮了,所以我们将它抠出来,做一个与另外两个图片的相同背景。

将主题和时间这两个比较重要的信息放在画面的左上角。

其余信息排列在右下角。那么这个案例就完成了,也是非常简单的,利用的就是蒙太奇的手法。

本期教程到这里就结束了,我们来简单地总结一下今天的内容。首先我们了解了动感是画面张力不平衡所造成的,以及强调速度感和强调能量感的两种动势。接下来我们讲解了三种产生动感的原因,分别为基于生活经验与心理认知、引导视线移动以及不平衡状态下带来的视觉冲击。最后我们总结了 9 点实用的小技巧,分别为捕捉动态瞬间、倾斜、错位、集中与发散、螺旋、波状曲线、色彩、重心偏移、蒙太奇。希望大家能够掌握好这些方法,让原本静态的画面也能带来全新的动感。

文章来源:优设

为什么设计概要对专业的创意过程至关重要

资深UI设计者

设计概要(Design briefs),也可以理解为设计简报、设计说明文档。设计概要负责说明设计的目标、设计的方向风格、不同阶段及对应的里程碑(指标)。


简而言之,设计概要是对本次设计项目的简要概括,可能是一份文档,或者一组文件内容,其中包括设计的几个关键概念如项目描述、项目范围、项目目标,目标受众、风格外观、预算时间安排。那么我们所整理的设计概要是提给谁看的呢?按照原作者观点是增进设计师和需求方的理解及信任。作者的观点是建立在服务甲方的基础上提出的,因为作者所属领域为平面设计领域,偏向创意性设计活动,因此通过建立共同目标,统一想法更容易创造出高满意度的方案。


但事实上设计概要不止于此,它不应该被局限在平面设计领域,虽然作者是以平面设计师的身份来普及这个观念(倾向提点平面广告类设计工作者,而不是UI/UX领域),但事实上其中很多角度都是从设计本质及设计工作的协作本质上提出的,它也可以被我们移植到UI/UX领域。当我读完这篇文章,我发现了设计概要一个更加重要的功能,那就是帮助UX设计团队梳理关键工作,建立共同目标,提高设计工作的效率,促进团队成员的协作与信任。(从设计团队角度)


当然如果从甲方角度考虑,设计简报依然可以用于UIUX领域,比如向leader提案,以及在项目初期向外包方展示设计说明,增进沟通交流,以保证设计师对需求的理解,同时更展示了设计人员的专业性。


总之设计概要适合在设计流程的前期被组织,并分享至团队和需求方,增进团队的凝聚力,促进创意的发生,展示团队专业性及增加需求方与设计人员的理解与信任。设计概要与最终提案实际上是一次完整的设计活动的首与尾,两者应当相互对应,设计结果应当围绕最初定义的目标进行,设计概要更像是设计思维的理解和定义阶段,把我们面临的问题,假设的目标呈现出来,以便在接下来的设计过程中精准打击,去解决设计概要中提到的问题或者目标。


下面开始正文。这里是帅气的分割线


在过去18年的广告设计工作中,我逐渐意识到这个行业里最好的事情就是与你合作的人——作家,艺术总监,用户体验和用户界面设计师,拥有出色的有创意的大脑,卓越的才能,不同的心态。 
当他们有清晰的指导和足够的自由与时间时,他们往往能迸发出好的想法,提出创意性的解决方案。但只要是缺乏指导,各种相互矛盾的指示,混乱的目标及紧迫的时间,将导致设计师无法产出优秀的方案。 
我多年来一直在观察这个现象,但我不知道该如何解决。一开始,我很难将客户需求好创意输出完美的结合,随着时间流逝,我逐渐明白,这一切都因为我们没有一个清晰地设计概要。从客户的需求文档开始,我们从中收集信息建立我们的总的设计概要,然后以此总概要来进一步细分为具体的概要,如视觉设计概要、体验设计概要、布局排版设计概要等。 
没有任何东西可以取代一份准确详细的设计概要。没有任何电子邮件或者个人会议可以取代创意概要。如果缺少基本信息,你无法开始任何工作,无法估算资源,无法保证最后期限。 

如果认真对待,设计概要就是任何创造性工作的关键。主要问题是客户和设计师在某些情况下都被低估了。设计行业变得如此庞大且不断扩张,任何人都可以称自己为设计师,任何人都可以收取任何费用。因此,需要特定流程的真正的设计被置于次要地位,完全以价格来评判。虽然我支持竞争并且完全理解并非每个公司或个人都能获得同样的预算,但它仍然对整个行业不利。 

设计概要是一个很关键的部分,应当在正式设计开始前就组织好,但在一般设计流程中,它经常会缺失,通常我们认为我们一切都准备好了,认为我们的方案没有问题可以直接开始设计了,但事实往往相反。 


什么是概要(brief)?

“概要”一词来源于军事术语,在军事术语中,简报被定义为“事先给出具体指示或信息的行为”。“它有一个具体的结构,简短扼要,包括所有必要的资信息,但不多,并包括一项既定的任务和要完成的结果,但有足够的自由来适应局势(任务摘要)。 
当指示部队接管敌方阵地时,将军可能会给出如何执行以及考虑哪些因素的指示,但不会说把右脚放在左脚前面,重复这个动作100米(前进一百米),然后右转,等等。军事简报只给出一项任务,留给个人决定的空间。同样,creative briefing也不是一个描述创意过程的详细用户手册。它也不是对预期结果的描述。创意概要是一个框架,它可以通过提供足够的指导来推动创意过程,使创意保持在正确的轨道上,并为创意提供足够的自由。(译者注:核心是指导列表,且保证足够的自由,只提供框架,不干扰创意执行) 

为什么我们在创作过程中需要概要?
如果我们有一个需要别人解决的问题,我们需要创意简报和创意简报用作说明,就是这么简单。当我们要进行创意活动时我们会写创意概要,列出关键的点,这意味着我们此时已经清楚存在的既定问题,我们列出问题然后才知道去解决什么。当然,也只有在别人要执行设计活动时,我们才需要去写一份概要,以供说明。 (简单理解,从某种角度,设计概是要写给需要执行设计的人员看的,我们需要别人去解决问题,而概要负责说明这些问题。) 

什么是设计概要?
设计概要是描述设计项目的目标和里程碑的书面文档。它是设计过程中至关重要的一部分,因为它有助于在客户和设计师之间建立信任和理解。它和合同一样重要,是双方的重要参照点。它确保重要的设计问题在设计师开始工作之前就被考虑和讨论。 

根据不同工作范围和不同产品领域,设计概要可以由许多元素组成,每个元素都详细描述某个范围的特定部分。 
但为了保持简洁,以下五个要素不容忽视: 

1.项目描述
简单描述一下我们需要做什么:我们对任务了解多少?期望是什么?一个新的设计?一个新的想法?现有的网站重新设计?我们需要用它来解决什么问题?这最多只能是一句话。


译者注:项目描述是对你所进行的项目的最简洁的概括,比如"我们在做一个共享打车的产品"。当然可以在这基础上丰富一点如:“我们在做一个服务白领人群、针对夜间打车场景的共享打车产品”,后面这个描述增加了用户和场景,但整个描述仍然是清晰易懂的。项目描述一般由战略层相关人员来定义,如公司老大,产品经理等。当然对于redesign项目,则需要设计师自己明确项目目标,然后去定义一个简洁的项目描述。 

2.项目范围
根据项目的大小,这里需要提供更多的细节。什么是预期目标,有多少页多少内容量,它将具有什么功能和特性。你需要了解更多的细节来服务一个新的企业品牌项目,而不是一个简单的网站。报价将主要依据这一环节。尽可能具体是至关重要的。 
此外,在互联网世界中,客户相信设计师能够解决所有问题,从UI到UX,最终开发一个完整的网站并解决SEO排名(seo即搜索引擎优化的意思),非常重要的是,尽早说明哪些内容在范围内,哪些不包括在范围内。 
译者注:项目范围即范围层中的内容规格。我们在产品设计的五个层面中第二层中可以了解这部分内容,内容规格是对产品目标的拆解,细化为具体的内容和功能,例如我们设计一款打车应用,它可能会包含,顺风车(对应顺路接送服务)、普通快车(对应出租车服务)、高端用车(对应企业服务高端出行领域)这三种规格。 

3.目标
通常情况下,你的客户并不知道他们的目标,也不知道设计工作会如何影响他们。但概括下来有以下三种不同类型的目标。 
业务目标:客户给出的一个可衡量的目标,例如增加销售、市场份额、渗透率、减少X%的客户流失率等KPI。 
营销目标:帮助客户实现商业目标中一切与营销相关的事情。帮助客户提升客户参与度的活动:意识-考虑-偏好-试用-购买-忠诚-宣传。(对标用户生命周期模型:获客、留存、激活、变现、传播 ) 
沟通目标:我们需要行动的目标!预期的结果是什么,消费者的行为或预期从我们设计的产品中获得什么?它必须以具体有形的形式表达出来,例如1500人注册,5000个额外的点赞,优惠券下载,产品试用,撰写评论,应用程序的使用,潜在客户,分享。 
虽然了解业务和营销目标很重要,但是让我们的客户了解UI和UX有其局限性,并且它们并不会对糟糕的商业策略产生影响,这一点非常重要。这可能很关键(撇清责任俗称帅锅哈哈)。 


4. 目标受众
这个产品是给谁的?谁将使用它,在什么时候什么场景下,为什么使用?描述用户受众必须尽可能具体,因为设计师通常会考虑到角色,特别是在UX方面,产品使用流程主要由用户角色及其在客户旅程中的特定阶段决定。 

6.预算和时间
有些人可能会争论是否应该在一个简短的报告中加入预算,不一定是准确的预算,但我们至少要确定一个大致范围。清晰的预算可能意味着设计师或代理机构甚至不会接受该项目,或者如果客户无法支付他们的服务费用,他们会考虑另一种成本更低的解决方案。但若没有沟通清楚,在设计进行期间更容易产生分歧和问题。 

定义总的时间和预期的各时间节点则是为了避免那些清晰沟通可以避免的冲突点。时间还会影响预算;在任何紧急情况下,获得额外资源都是可能的(比如若时间紧急可会提高价格)。 

根据我的经验,真正重要的问题都是双重的。 
1.客户的教育程度不足以提供可以推动项目正常运行的必要信息 
2.设计师在没有正确理解客户的需求的情况下就心急直接开始设计。 


总结
如果您是客户,一个好的设计概要将节省您在无意义的电子邮件,电话和会议上花费的时间。它还可以帮助您获得来自不同设计师和代理商的更和可比的报价。 
如果你是一名设计师,如果你坚持从一个设计概要文件开始你的设计工作,你会从客户那里获得简洁的愿景和期望,这可以让你保持动力。你的时间和努力是昂贵的,从潜在客户那里获取的某种信息可能毫无意义。明智的做法是优先考虑那些已经有一些远见、愿意承担自己那部分工作的客户。(即优先考虑那些清晰的分析了产品的各类目标、预算等关键内容规格的客户) 

一个好的简介应该是简洁、清晰和全面的。如果目标足够清晰,应当不超过两页。 

为了使最终的结果尽可能的好,我们需要鼓励和教育客户和设计师去做更好的设计概要(说明文件),让我们的工作更容易,并把重点放在更重要的事情上。 

文章来源:UI中国

如何理解设计中的统一和打破?

资深UI设计者

在日常的设计工作中,我们也许会遇到这样的情况:作品缺少变化导致枯燥乏味;而变化太多又会显得杂乱、没有章法;这就对应了设计中统一和打破的关系,那么为什么统一和打破这两种看似矛盾的关系,却总是能同时出现在我们的设计作品中?如何更好的理解二者之间的关系并运用到日常的工作中去?希望本期内容能对大家有所帮助。





在设计中统一并不是所有元素1:1的一模一样,它可以体现在:板式、配色、元素属性、处理手法等等,那么为什么要统一?统一的目的是什么?下面我们具体来说:


统一:让作品更整体

作品不够整体,会给人一种信息散乱、没有视觉焦点的感受;而将视觉元素进行“统一”,就能很好的解决这一现象,这无关乎技法的熟练与否,在我们的日常生活中就随处可见:比如:我们的书本排版,会有统一的页眉、页脚、段落留白、文字间距等等,其目的就有让文本内容在视觉感受上更像一个整体;下面我们看个设计中的案例:



如图所示,上侧案例给人的感觉比较杂乱,不够整体,原因在于:元素与元素之间的关联性不强,且视觉形态及色彩属性各不相同,导致整体各元素之间的呼应不够明显,所以会给人一种不够整体甚至杂乱的感觉。而下侧案例通过在形态、色彩、属性等方面的统一化处理,加强了每个单独视觉元素之间的呼应,使得画面更整体!



统一:让作品更整洁

不管是在设计工作还是日常生活中,干净整洁的东西都是更易于大众接受的,在设计工作中,做好统一是最重要的一环,在此前提下,才能做好另一环“打破”!所以当设计作品出现乱的现象时,我们需要对其视觉元素进行规整及相应的处理,比如:

通过左右对比我们发现,很明显右侧给人的感觉杂乱无章,而左侧干净整洁、有条理,原因在于:


①、元素与元素之间并不是相互孤立的,而是在视觉上存在着一定的呼应关系,相互关联,这样画面整体性也会更强。

②、视觉上将原本各不相同的形态以及色彩重新进行了统一处理,目的是通过减少视觉元素形态及色彩变化而进一步提升画面的整洁。

③、视觉元素在物理关系以及属性上也做到了统一,即统一元素与元素之间的间隔、形态、颜色等等。


下面我们再看组案例:


上图中,相比而言案例二比案例一给人的感觉更整洁、干净、也更像一个整体,原因在于:案例二中配图的属性做到了视觉上的统一,具体体现在:①、图片的颜色属性:统一蓝色色相属性;②、图片的内容属性:统一高端、仰视角度建筑属性;③、图片的留白属性:每一幅配图在视觉上都会有一些留白性质的属性,给人的感觉很舒服。


所以:出于让整体更整洁的统一,大多是在做减法或者合并的过程,目的是减少一些造成视觉整体杂乱的因素,比如:色彩杂乱、图形杂乱、文字形式杂乱、视角角度杂乱、以及过多无关联的视觉元素等等,统一的过程也是整合视觉元素的过程。


注意:设计中的统一并不是绝对的,而是相对的,如果所有的视觉元素、属性都严格按照统一化去处理,那么就会滋生另一个问题:整体视觉太过平滑、缺少变化甚至会给人一种单调、枯燥的感受。那么在强调统一的同时,“打破”就是为了解决这难题的。





在日常设计工作中,打破是建立在统一基础之上的操作,那么既然已经做好了统一,为什么还要打破呢?打破能为作品带来什么?下面我们具体分析:



打破:提升作品视觉层次感

当作品过于统一时,很容易会给人一种单调、乏味、缺少层次变化的视觉感受,而在统一的基础上做一定的打破操作,就能起到很好的解决这一现象的作用,那么什么是打破?举几个简单的例子:


如上图所示,图①就属于过于统一的表现形式,很明显整体平淡、乏味,缺少视觉变化;而其他都是在统一的基础上做了一些“打破”的处理,只不过各自切入点不同,下面我们逐一分析:


图②:切入点是打破了一成不变的排列形式。

图③:切入点是打破了一成不变的配色形式。

图④:切入点是打破了完全统一的配色形式以及形态。

图⑤:切入点是打破了统一的元素属性值。

图⑥:切入点是打破了统一的元素属性。


以上这些虽然切入点都各不相同,但是目的都是通过打破过于统一的视觉现象,增加整体视觉变化程度,从而提升整体视觉层次感,也打破了呆板、乏味,增添了一些视觉上的跳跃性。



下面我们再看个设计中的例子:

如图所示,上侧案例属于很好的贯彻整体统一的理念,而下侧案例则是打破了固有的统一、却也保留了大部分统一的属性,通过两者对比我们发现,其实单只看这一组案例:两种表现形式都是可取的,只不过相比而言下侧案例给人的视觉感受变化更多、层次感更强,所以相比而言给人留下的视觉印象更深刻。


上面说两种表现形式都可取的前提是:单单只看这组案例,但是很显然这组案例只是页面的局部,如果整体页面都如上侧案例那样严格的按照统一进行,那么页面整体就会过于平淡、缺少视觉层次感、甚至主次不分明。



打破:划分视觉主次

在现实生活中,具有差异化的人或实物会很容易引起周围人的注意,甚至印象深刻、难以忘怀。在设计中亦是如此!其具体表现形式参考上图①-⑥,因为打破过于统一就是在营造具有差异化的视觉元素,从而会很容易在视觉上形成先后、主次之分,所以就起到了一定的划分视觉主次的作用。


注意:打破也不可盲目的进行,过于统一会单调、乏味、重复感强;而过于追求差异化也会出现杂乱、没有章法的视觉现象。所以一定要结合实际情况灵活运用。一幅作品中大多情况下:打破的次数要少于统一,即作品整体绝大不多保留整体统一的属性,通过局部打破处理提升整体出彩度,这样容易给人一种干净、整洁且不失视觉变化、层次感的感受!


不妨找一些优秀的网页分析一下,是否很多优秀的设计作品都符合这一规律?





综上所述,统一是为了让作品有视觉条理性、更整体,而打破则是增加视觉层次变化,让作品更出彩!统一和打破看似是两个矛盾的名词,实则在设计中是相辅相成的作用!不管是统一还是打破,两者的切入点都是相似的,一般体现在:形态、属性、色彩、大小、位置关系、留白等等。但是无论如何统一都是打破的前提,如果作品整体性都不够,再一味的追求打破关系,只会让作品越做越乱。所以一定要先做好统一,其次才是进行打破、改变。当然文中提到的只是一部分,希望大家能活学活用、举一反三!

文章来源:站酷

智能电视UI设计基本原则

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

之前一直在做移动端的 UI 设计,在进入小米后,开始接触电视端的 UI 设计,目前在负责小米电视商城。经过一个电视端项目后,自己做了一些关于电视 UI 的总结以及设计方法原则。

电视 UI 算得上是一个偏冷门的界面设计,因为它的交互比较特殊,同时有一些限制,比如交互限制,焦点原则等等。以下就自己的项目经验为电视 UI 设计原则做一个总结。

智能电视的特性

对于现在家庭智能电视而言,技术在不断的进步,但是其饱和度和对比度有的还是很强,还会遇到大红碰到大紫的色块对比。但是信息变得简约了,都是以 tab 导航为主,下面是几个卡片信息瀑布流显示。语音提示很重要,会随着焦点的移动发出提示声响,提示用户电视焦点的移动状态。

小米电视商城全新改版,在接到需求后,一定要模拟用户来体验一下购物流程还有用电视购物的环境,环境应该是固定的,那就是在家里。电视和手机购物体验是不一样的,电视是要用遥控器来控制,所以每一步的操作流程都很珍贵,如果界面跳转太多,会给用户一种烦躁的感觉,所以尽量同一层级的信息要在同一界面填写完毕,避免二次跳转。

第二点说的就是焦点问题,焦点不能层次不齐,跳动太大会引起视觉不适。以小米电视商城详情为例,焦点尽量在同一水平线上,同行的焦点移动,视觉感受上会舒服很多。

设计尺寸

智能电视的分辨率和大家平常在 app 看电影的时候差不多,如上图所示,目前 1080p 最常见,2k 和 4k 基本都是资源类节目。设计尺寸以小米电视为例,通常做 1920*1080 的视觉稿就可以了,开发会适配比 1920*1080 小的电视屏幕,这样下来,如果小分辨率的电视没问题了,大的分辨率也就没问题了。

我们知道在设计 app 的时候,都有左右间距的控制,移动端一般常见的控制在 28px 或者 32px,电视端因为是大屏设计,所以预留的空间也要大一些,基本左右留出 120px,上面留出 90px 就可以了。一般我设计的时候左右是固定的 120px,上面可以随设计内容来自定义,90px 或者 100px,都是可以的,只要视觉舒服即可。

焦点在电视端 UI 设计里显得尤为重要,因为它就是你的视觉焦点,焦点会随着遥控器上下左右确认而改变。焦点的设计不能是扁平的,因为那样不能够提醒用户焦点状态的位置,焦点的设计应该是放大的、夸张的、可以带边框,也可以使用投影外发光的方式来设计,确保能够给用户足够的清晰位置。

焦点放大我这里建议放大 1.1 倍或者 1.2 倍就可以了,再大就显得过于大了。

交互设计

如上图所示,我在设计焦点的时候,就用了放大+外边框的形式,这样焦点移动起来可以让用户足够看到位置所在。电视端的交互也是很简单的,基本属于十字交互,即自上而下,从左到右的交互方式。红色剪头属于禁区,所有的电视交互,没有斜 45 度的交互,这样是错误的。

大家可以看到,在 app 里,常见的弹窗和浮窗可以压盖在可点击功能上,比如美团的红包,爱奇艺的一键关注,即使是这样,也不会影响功能的正常使用。但是电视端的设计,如果两个可点击功能压盖在一起,焦点是无法获取的,因为它没法判断你想要选的那个功能,所以在电视上,一定要将两个功能分开来布局最为合适。

露出屏外的内容,和移动端设计是一样的。如果有多个卡片内容,我们需要将露出屏外的那张卡片做一些边界化处理,控制好间距,也就是说我们要将一个完整的卡片漏出来一些,让用户知道,后面还有内容;反之,用户可能不知道后面还有内容,就不会按遥控器右键查看了。

电视端 UI 设计忌讳控件隐藏,比如上图,如果有很多文字的时候,左边的设计是错误的,因为隐藏了 button 按钮。改为右边的设计是比较好的,我们可以选择焦点选中文字给一个弹窗状态或者其它,将 button 功能位露出来,如果一个界面可选功能位较少,我们设计的时候尽量在第一屏展示。如果实在不行,可以选择吸底吸边来设计。

视觉设计

颜色的选择运用是重中之重,因为这个会直接影响到用户的视觉体验。因为用户环境大多数是晚上的时候回去看电视,分开灯和关灯的情况,开灯的情况其实还好。如果关灯,颜色太刺眼的话,饱和度较高的颜色会直接影响到眼睛,这个危害是很大的,而且不一样颜色的色块,会增加用户的视觉负担,这样就得不偿失了。所以我们要避免大面积的使用单一纯色或者渐变色。

电视 UI 设计中,白色谨慎使用。因为白色过多实在是太刺眼了,我们可以选中较为灰一些的接近白色的颜色来代替。

背景的运用这里也建议使用深色的背景,原因和上述讲的一样,还有一个就是深色背景可以更好地衬托出界面的主要内容。反之如果用浅色的背景,有的卡片如果需求方要求设计成浅色,那么这样浅色的背景+浅色的卡片叠在一起,主要内容就特别难区分了。

我们在设计电视端 UI 的时候,要真实的先去体验一下特殊的场景,电视端每个 tab 是一个频道,每个频道的设计风格也是不同的,比如少儿频道,购物频道和电影电视剧频道,设计风格肯定不同,体验模拟流程可以让我们更快地了解电视特性。

字体的选择默认思源黑体,因为这个字体是开源字体,可以免费使用,没有版权之分,以上列入的字体是小米电视商城改版的字号,具体的字体和间距可以根据自己的设计需求变化。

关于字体的选择,当然你也可以选用其它字体,或者一些特殊字体,好看的字体,但是这样的话,字体包应该会很大,会影响一些加载速度。

字体颜色的选择尽量用白色或者亮色,深色背景上选用白色是最好的,这样更易于阅读。

字体的粗细大小,这里标题建议加粗选择,其余选择常规字体就好,避免太粗或者太细的字体。

更好的智能家居体验

电视的设计只是其中的一部分,未来我们的电视可能比现在的体验更加好,比如会出现实景商城,单一的图片形式已经不能满足我们对购物的需求,一些视频类,动效类的体验会更加合适。想让电视拥有好的体验并不是一件简单的事情,想必大家已经从诸多「电视盒子」上体验到了这一点。我们曾经熟悉的电视已经发生改变,而我们适应的手机、平板和电脑和新的电视还有着巨大的差别,我们需要忘掉之前熟悉的模式,未来五年、十年、甚至更久。电视、电灯、冰箱洗衣机等智能家具的体验,正是我们设计师需要在未来几年所做的事情,这很重要。

小米电视商城全新改版是我接触的第一个电视端 UI 设计项目,第一期的优化还有很多不足,根据项目经验总结了上面的规范。以上的基本设计规范掌握后,那么做电视 UI 基本问题不大,大的错误肯定不会有了,但是每个公司的设计规范肯定也有所差别。电视端的设计是个偏冷门的 UI 设计,多掌握一些另类项目经验也是设计师必备的技能。

文章来源:优设网

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

快速了解“私域流量”

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

为什么“私域流量”如此火爆,互联网人必看!

最近一个全新的名词频繁出现在我们的视野里,它和去年的“增长黑客”一样,在互联网圈子里被炒的火热,它伴随着微商和社交电商而出现,它已经悄悄改变着整个互联网营销格局,它就是“私域流量”。


恰好上周我在团队内部也分享了关于“私域流量”的话题,这期间还纠结要不要整理到公众号里。然鹅,乐于分享的精神将我腐蚀~,今天就不聊设计、不聊产品,来谈一谈我眼中的“私域流量”,拓展一丢丢互联网的思维边界。




一、什么是私域流量?



要读懂私域流量,首先要了解流量池的概念,流量池是流量的蓄积的容器,主要是为了防止有效流量流走而设置的数据库,比如:淘宝、百度、微博等。只要有足够的预算,可以持续不断的获客(获取新用户的渠道),被称为流量池。


而私域流量指的是品牌或个人自主拥有的、无需付费的、可反复利用的、能随时触达用户的流量。它并不是一个新生事物,只是与我们曾经接触的流量相比,更加便于商户或个人使用的流量。


比如:之前社交媒体还没普及的时候,私域流量就是客户的联系方式(手机号、邮箱、住址等),想要联系他们时,可以打电话、发短信、发邮件、甚至往他们家寄样品体验。当时这些客户信息甚至都是公司的商业机密。


随着时代的进步,如今的私域流量是一个完全属于“你”自己的私人地盘,大到年入上亿的商家,小到个人经营者。这些流量存在于公众号、微信好友、微博、社群、朋友圈、头条号、抖音等社交媒体里,它是一切你可以随时掌控的私人流量池(既私域流量),这个流量池里聚集的是你的粉丝、客户和潜在客户。


而产品则是承载用户流量的工具,即使用户分布在不同的产品里,但只要是在个人账号的,就是你的私域流量。顾名思义,私域流量就是属于自己的流量,相对公域流量而言,主要指个人或品牌自主拥有的自由流量,它需要通过沉淀和积累来获取的更精准、转化率更高的垂直领域流量。





二、公域流量与私域流量



任何一家互联网公司,都离不开一个核心问题——流量。得流量者得天下,有了流量才能进行下一步转化,“流量”既代表大众的关注点。


对互联网公司来说,流量就是市场,流量就是用户,流量就是商机。我们讲的私域流量就是这部分流量属于商家或个人的“私有资产”。既然有私有,那必然有公有。与私域流量对应的是公域流量,比如淘宝、京东这些大的流量平台,所有的流量都要花钱买,而且越来越贵,这里的“花钱买”指的是广告推广、排名推广等。有了曝光率,用户的关注点(浏览行为)自然就来了。


这两类流量有什么本质上的区别呢?


公域流量和私域流量并不是绝对概念,而是相对概念。比如一家商场开在步行街上,商场里的流量相对于步行街就是私域流量,因为店铺基于步行街内。而步行街的流量相对于商场就是公域流量,因为其他店铺也可以享用。再比如,从淘宝里打开一个网店,网店里的流量相对于淘宝就是私域流量,而淘宝的流量相对于网店又成了公域流量。同样,公众号的流量相对于微信就是私域流量,微信的流量相对于公众号就是公域流量。


所以说,公域流量就像大海,刚开始鱼多,捕鱼的人少,即便我们捕鱼的技术一般,也能有所收获。随着捕鱼的人越来越多,捕到鱼的成本越来越高,鱼的质量却越来越低,于是很多人就开始自建鱼塘养鱼,这样捕鱼的成本低了,也更容易捕到鱼了,还能租出去让别人钓鱼,自建鱼塘就是私域流量。伴随着流量红利的减缓,公域流量逐渐饱和,商家很难再以较低的成本来获客了,为什么是较低的成本?请往下看案例。


公域流量:

公域流量也叫平台流量,它不属于单一个体,而是被集体所共有的流量。来看看我们常见的的平台流量五大板块:


电商平台(淘宝,京东,网易考拉等);

内容聚合型平台(腾讯新闻、网易新闻、今日头条等);

社区平台(百度贴吧、微博、知乎、简书等);

视频内容型平台(腾讯视频、爱奇艺、抖音等);

搜索平台(百度搜索、谷歌搜索、360搜索等)。


对于平台中的个体来讲,他们只能以付费或活动等方式,在满足平台规则的原则下获取流量,留存率较差,因为个人没有支配权,只能跟随平台的发展规律顺势而为,且流量始终属于平台,个体稍有过分的营销嫌疑就会被封号。很显然,他们都依靠于平台获取流量,并且不能完全掌控自己的流量分发。


这种形式所带来的弊端便是每次流量的使用需支付高昂的费用。当然,优点仅为流量获取方式相对简单,花钱购买,付费即可,平台会根据你付费的级别来定制推送计划。但这种推广方式,相当于大海捞针,比如我们在百度上做推广,想利用百度的流量来曝光我们的UI设计网课,但是每天使用百度的用户来自于各个阶层、各个岗位,需求五花八门,可能100个访问用户中,只有1个是具备目标用户条件的,所以平台流量不能精准的曝光到目标用户所在的群体。


私域流量:

接下来,我们对比一下私域流量,它属于单一个体的流量。比如某个公号的关注用户都是UI设计师,那这个公号的私域流量就是推广UI设计网课的首选目标,因为大家都有这个需求、都来自这个领域,只不过需求的渴望程度不一样而已。在100个阅读用户中,可能有10个会仔细了解。所以这种推广方式的精准度要比平台流量更高,关键是推广费用极低。弊端是曝光率、影响面积、用户热度是临时性的,但在短时间之内是有明显的用户增长,这就是所谓的“极速获客”、“热点获客”。


所以我们常见的私域流量都存在于个人号中,他们可以完全掌控自己的流量分发。比如在微信中,好友也是我们的私域流量,我们可以选择不同的好友分组推送消息,所以私域流量最大的特点是直接触达用户。


同时,私域流量可以反复利用,更适用于复购属性强的产品,利于增加复购率,比如我们生活中一些小超市的营销手段就是利用私域流量增加顾客的粘性和复购率的:在超市购买商品支付时,收银员要求你添加他们店长的微信号,添加成功可以送多少积分,打多少折扣,这就是获客的第一步,然后店长会把这些顾客拉入到一个微信社群里,每天定时推送一些打折商品、优惠新品等,有些用心运营的还在社群里做“抢红包”的活动,抢到最多的前三名当日到店购买商品送500积分等。


我们可以看出,比起公域流量,私域流量更注重引导和运营。如果用一句话概括私域流量和公域流量的区别,就是:私域流量的用户属于个体,公域流量的用户属于平台。

Image title




三、私域流量的特点与价值



1、更可控

假设某平台有一百万用户,然而这一百万用户跟我们没有任何关系,我们只有把里面的用户导入到自己的平台,才算自己的用户,后续对这些用户的针对性服务才有可能发生。


就拿“抖瘾”来说,用户喜欢的短视频很多,当对其中一个视频感兴趣时,可以选择关注号主,关注后可以第一时间享受到号主提供的视频服务,而对号主来说,关注者就是从平台引入的私域流量。当关注号主的用户越来越多时,这个号主就成了所谓的网红,并在特定领域有一定的影响力,因为后面有一大群“私域流量”在支持他,基于此,一些其他的业务和广告就随之而来,这伴随的也就是收入。号主也可以选择性服务,将关注用户人群细分,从而合作不同的品牌。



2、更省钱

产品在平台流量获得曝光需要支付高昂的费用,比如:关键词竞价、关键词推广等,如果你想通过平台获得不花钱的曝光...还是别想了,不可能的,人家的流量也是花钱砸出来的。


私域流量几乎是免费的,一旦把用户从平台流量引入到私域流量,比如:微信社群,那真是我的地盘我做主,怎么玩都是我的权利,当然也不能太放肆而丧失了所谓的本质,如果用户体验不好,分分钟会被别的“私域流量”引导走,毕竟选择也是用户的权利。再就是前面举的UI设计师网课和超市的例子,直接跟“熟客”建立联系,省下了渠道推广费不说,熟客们还愿意为你安利更多用户,这相当于帮你免费做了宣传推广,无形中产生了裂变。所以产品在私域曝光的成本要比平台曝光低得多,甚至几百块就可以搞定一个精准推广,而这个精准推广还会产生二次流量。



3、更丰富的营销玩法

私域的运营能让商家与消费者建立更亲密的连接,那商家就可以基于产品做延展,不管是二次营销还是多元化营销,只要你输出的内容不让用户失望、讨厌,就有助于销售。


我们身边最常见的就是分享文章到朋友圈进交流群、参与文章中的红包抽奖、评论区积攒送书、公众号文章互推等活动。这无形中就是为商家的私域流量进行了裂变和促活。


当然这些只是很小一部分的玩法,也不违背互利的原则:我分享你的文章进了我想进的交流群、我帮你的文章带来一次阅读,但我可能获得抽奖红包、我发动身边朋友帮我积攒,对你的产品进行了裂变式曝光,但我得到了想要的书籍...


写到这里让我想起之前在网上看到的段子“我把你当朋友,你却把我当你的私域流量”。然而,不管是现实还是网络,不可能有人在商业环境里无私的付出,虽然说的很透,但我们还是需要正确认识现实,毕竟这是个资源互换、资源共享的互联网时代。

Image title



4、更高的客户稳定性

私域流量可以有效防止用户流失,尤其是你经常交互的用户。通过运营私域流量,与用户建立起情感互动(交互),你推荐的产品他们也不会条件反射般地当作广告去屏蔽掉,同时你的诚恳推荐也会让用户稳定性越来越好,不容易流失。

现在很多商户都会主动以个人号去添加一些顾客,通过私人关系为他们提供订座、专属折扣和所谓的VIP服务,平时有事没事唠唠嗑、相互点个赞、时不时来一句赞美的评论啥的。所以,商户在用户面前曝光多了,也能起到唤醒用户记忆的作用,久而久之复购率也就提升了。



5、更利于塑造品牌和个人IP

好品牌反映了好口碑,在某种程度上会帮助用户消除掉选择困难症,比如我们买鞋子,品牌这么多,我肯定首选我心目中排在第一的,这个“第一”就是用户对商户精神层面的认知和信任,品牌塑造的过程就是用户忠诚度建立的过程。


私域流量的交互,可以拉近品牌和用户之间的距离,通过产品提供的服务把同类人群聚集在一起,这些人累计起来的影响力不可小瞧。不管商户大小,掌握私域思维,都能有效的促进与用户的沟通,增加用户粘性和忠诚度。


在运营私域流量时,最常见的错误是沿用以前的思维。比如很多公司让客服团队搞大量微信个人号做朋友圈运营,但其实没有任何一个微信用户希望自己的朋友圈里多了一个广告客服。私域流量转化的核心是信任,是基于人与人之间的信任。这里有一个非常重要的环节,就是个人IP化打造,打造一个行业KOL或专家的身份,比如你在某个领域有丰富的行业经验,通过某些途径将你的经验分享给有需要的人,这就从中产生了浓厚的信任,因为在用户眼里,你就是行业的专家(你说啥都对~),完成这步之后,私域流量才可能提高转化。说白了就是你(商户)能为用户提供什么样的服务,这些服务被多少人所认可。




四、身边常见的导流方式



1、靠利益诱导

比如关注公众号领红包、下载APP送现金、注册领优惠券等。在流量池获得曝光后,用户看到进入私域流量有好处时,一般都会形成转化。虽然数据在短时间内很美丽,但留存率和活跃度不敢保证,这需要产品内的引导和体验来支撑。



2、解决内容诉求

做优质的内容输出,解决用户的内容诉求,靠内容本身打动用户形成转化。比如你正在看这篇文章,你觉得有点收货,就产生了关注我公众号的想法,并做出了关注的行为,这个“行为”就是一次转化。所以做内容私域的本质在于产出有价值、有思考、有帮助的干货。当别人发现你产出的东西,对自己有帮助时,会主动前来,这是长久的打法。




五、写在最后



私域流量的拉新和运营,就是与人打交道、与一群人打交道,和做产品一样,满足他们的核心需求,以及一些增值需求。现在关于私域流量运营还没有太多成熟的玩法,商家多半还在摸索和尝试中。我们也不要只盯着微信平台,用户在哪里流量就在哪里,私域流量池就在哪里,就像有些朋友从公众号转战到“抖瘾”一样。


掏心窝子:当然我个人并没有太在乎私域流量给自己带来的利益,因为我始终把在UI中国写文章当做一种学习成长的方式而已,通过输出一些复盘和有挑战的知识点,帮助自己突破思维边界,同时还能结交各位同行,简直两全其美。



❤️希望对你有所帮助~




是的,我们距离目标又近了一步,标红的你都看了吗?

Image title

文章来源:ui中国

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

「表单设计」知识点

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

表单是产品设计中的重要组成部分,如果说弹框的主要作用是完成信息反馈,那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素:标签(标题)、输入框和按钮。

标签是用来告诉用户这个列表项是什么;输入框是供用户完成信息录入的;按钮是供用户完成信息录入后点击进入下一个流程的。

标签

根据标签所处的位置,可以将其分为左标签、顶部标签和行内标签。

1. 左标签

左标签在目前来说是最常见的一种标签样式,但是这并不意味着我们可以无所顾虑地使用它。以手机端为例,手机端的屏幕尺寸(宽度)有限,左标签会占据屏幕较大的空间,此时右边的输入框就可能无法展示完整的信息。

例如,如果用户输入的地址过长,就会造成信息的展示不完全,这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认,如果连完整的内容都无法获知或者获知的难度较大,则用户根本不会进行下一步操作,这就造成了操作流程的中断。所以,我们在使用左标签的时候,一定要考虑对多行文本的展示。

2. 顶部标签

顶部标签是指位于输入框上方的标签,这样输入框就可以独占整个页面,信息可以得到更完全的展示。

与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。在界面设计中,更多的空间还意味着具有更高的信息层级。同一个表单中会有很多的输入项,有些输入项的优先级很高,我们可以考虑使用顶部标签的样式来进行凸显。

但是这种布局方式也有缺点:会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。

3. 行内标签

行内标签又可以被看成是输入提示,其样式看起来很适合手机端的表单设计,因为它可以极大地节省页面空间。但是一旦用户点击切换到输入状态以后,就看不到这些标签了。如果操作提示字数很多,例如密码规范,那么用户记忆会很吃力。我们可以在调起的键盘顶部加上提示,减少用户的记忆成本。

但是,如果表单项目过多,则用户在填写的时候很容易串行,可能会出现把家庭住址填到毕业院校一栏中的情况。更严重的是,用户因为无法看到标签,这类错误是无法被检查出来的。为了解决这个问题,我们可以在行内标签前加一个图标来标识这个列表项,图标所占据的空间不会太大,而且会提高页面的美观性。

当表单项目过多时,我们要对其进行整合分组来提升内容的可读性。如下图所示,这里将 15 个字段分成 3 组。同样的内容,但给用户的印象却大不相同。

输入框

输入框的作用是供用户完成信息录入,这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒,把所有的输入框都做成文本框样式,用户必须调起键盘一个字一个字地输入,这种体验是非常不友好的。如果我们想让用户录入个人信息,其中的生日和城市就应该使用日期和城市组件,而不是让用户手动输入。

即使非要让用户手动输入,我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字,那么应该给用户调起数字键盘;如果要输入文本,那么应该给用户调起全键盘,避免用户手动切换键盘。

即使用户输入符号,我们也要考虑如何减少用户的操作步骤。例如,我们发现当光标位于周星星三个字右边的时候,点击「“」键,会出现左右双引号;当光标位于周星星三个字中间的时候,点击「“」键,只会出现左双引号。这是因为光标在文本右边,用户只要输入「“」,那么就必然需要「”」来结尾,这里直接提供左右双引号更合适。如果光标是文本中间,无法确定「”」需要在哪里出现,所以只展示「“」。

容错性设计

在理想状态下,用户填写完表单信息,然后点击「提交」按钮,系统显示提交成功。但是,现实情况却是用户在填写过程中经常会发生错误,那么如何将容错性原则融入表单设计中呢?

首先我们需要给予用户足够的操作提示,日期录入就是最典型的例子。不同的地区对于日期录入的格式也不一样,「02/12/2019」到底是2019年2月12日还是2019年12月2日?如果我们不提示用户,用户就不知道应该怎么输入。

为了避免用户犯错和提升用户的信息录入效率,我们可以提供自动完成录入功能,当用户在文本框里输入时,系统可以猜测可能的答案,显示可选列表,避免了用户手动输入造成的错误。

如果你确定对用户足够了解,在用户进行信息录入时,可以提供合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间。

能让系统完成的任务,就尽量不要让用户来操作。用户会犯错,而系统不会。表单容错性设计的另一个方向就是梳理表单中的鸡肋项目。

现在很多的购票类 APP 都提供送票上门的功能,这就需要用户填写收货地址。以交通出行类 APP 飞猪、途牛和去哪儿为例,其中,上图中左侧的两张图,飞猪和途牛都需要用户填写邮政编码,而在去哪儿中则是选填的。其实根据用户填写的地址,我们已经可以获取到邮政编码,邮政编码完全可以自动回显,不需要用户手动输入。

而在小米有品 APP 中就可以根据用户填写的地址回显邮政编码,这看起来很方便。这只是看起来很方便,我们可以继续思考一下:如果系统完全可以根据用户填写的地址获取到邮政编码,那么邮政编码这一项完全可以不在界面中露出。其实很多产品在用户填写收货地址的时候已经不需要用户填写邮政编码了。

对于容错性原则,我们还要考虑如何给用户展示合理的报错提示。目前来说,我们经常看到的一个报错提示样式是对话框。在我看来,对话框并不是一个好的选择。因为用户如果要进行修改,就必须要关闭对话框,那么用户就看不到错误信息了。如果错误原因和解决方案的字数较多,那么用户就需要花一定的时间记住这些信息,然后再来修改,这会增加用户的记忆负担。如何才能设计好表单的报错提示呢?表单中的报错提示可以分为两种:单行表单报错提示和多行表单报错提示。

单行表单中意味着在当前界面中表单只有一行输入框,其一般用于手机号、银行卡号、身份证号和金额的录入。对于此类场景,建议使用输入框底部的文字报错提示样式,并且要对录入的信息进行实时校验,不要等到用户进入下一个界面才告知用户在上一个界面中手机号输错了。

给多行表单进行报错提示时,除告知传统的错误原因和解决方案外,还应该告知用户错误的位置。因为在一个界面中,有很多的输入项,用户在短时间内无法把报错提示和错误项联系起来,因此,为了提升用户对于错误场景的感知效率,对错误项进行标记是非常有必要的。具体的实现方式有改变文字颜色、输入框背景色和设置提示文案抖动。

以上图为例,这里通过改变文字颜色或输入框背景色来标记错误位置,用 Toast 告知用户错误原因和解决方法。我们也可以不改变配色,让该输入框左右抖动也能起到快速标识的作用。

按钮

表单中的提交类按钮按照位置可以分为以下三种。

其中位置 A 是最常见的布局样式,这样的布局符合用户的视觉习惯和操作流程:用户由上而下完成表单信息的填写,最后点击「提交」按钮进入下一个页面。但是这种布局有一个问题:如果表单项目过多,则用户必须滑动页面才能完成提交操作。

位置 B 跟位置 A 很相似,唯一的区别在于位置 B 是固定在页面底部的。那么位置 B 跟位置 A 的适用场景有什么不同呢?位置 B 意味着用户在不用滑到页面底部的情况下就可以点击「提交」按钮,那么在什么样的场景下用户不用滑到页面底部就可以提交呢?

其实在很多表单中,不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例,只要用户输入了地址,系统就能获取邮政编码,相关信息是可以直接回显的,用户没有看到此类信息的必要性。所以,对于一些重要性不是很高、不强制用户看完的表单项目,很适合使用这类底部悬浮按钮。最常见的就是各种协议页。

位置 C 出现的原因在于,对于前两种方案,当调起键盘时就会遮住「提交」按钮,用户必须先关闭键盘才可以点击「提交」按钮,多了一步操作。而位置 C 可以完美解决键盘遮挡的问题,但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势,用户在单手握持手机的情况下很难直接点击到界面右上角的「提交」按钮,增加了操作难度。

其实位置 C 完全可以被忽视,因为现在很多产品已经支持在调起键盘时滑动页面,所以位置 C 最大的优势已经不复存在。这里还介绍位置 C 的原因是希望读者知道交互规则是会随着技术的发展而不断改变的,可能在这本书里提到的一些技法过一段时间就会落伍了。要成为一名优秀的设计师,必须具备持续学习的能力。

文章来源:优设

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

跟全球 Top 4 的时尚杂志,一起学平面设计基础知识!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在日本文化中,「属性标签」是一个重要的组成元素。一个人是「御宅族」还是「视觉系」,抑或是「食草男」,细分标签总会添加上去。虽然这样的标签会给人一种「固化」的感觉,但是有时候也会让人对一个事物有更清晰明确的认知。

日本的杂志同样如此。一本杂志应该针对什么样的群体,带有什么样的特征,传达什么样的情绪,都会有非常清晰的「属性标签」。

20世纪80年代是日本时尚杂志百花齐放的年代,众多现有知名日本杂志诞生,例如《ViVi》、《CanCam》、《JJ》、《mina》、《sweet》、《SPRING》等等。不同的杂志风格不同,面向的群体也不同,上面所带的标签也不同。

比如时尚杂志《PopEye》是针对「City Boy」的男性,「美式复古」和「学院派风格」是这本杂志最典型的标签。

而女性向时尚杂志《mina》的标签则是「清新少女」、「独立」、「青文字系」。「青文字系」是一个非常日本的标签,简单来说,带有「青文字系」标签的杂志在精神内核上强调女性要潇洒独立,不应该对男性谄媚,带有同样标签的杂志还有《sweet》、《steady》、《mini》、《SPRING》、《InRed》。与之相反的标签则是「赤文字系」,带有这一标签的杂志特别强调女子力,会教读者如何穿搭、如何做才能讨男生欢心,带有这一类标签的杂志有《JJ》、《ViVi》、《Ray》、《CanCam》。当然,近年来还出现了「黑文字系」,其实指的是喜欢穿一身黑的姑娘……

不过言归正传,今天我们要聊的主要是《mina》这本杂志。《mina》其实在新世纪之初进入过中国大陆,当时中文名称为《米娜》,巴拉排行榜曾将其列为全球十大时尚杂志之一,是日本少女清新风格的杂志。

《mina》能获得这样的赞誉,和它本身极高的内容素质是分不开的。包括尾身沙纪在内的许多著名的摄影师,会给《mina》拍摄图片,而模特更是有村架纯、竹内凉真这样的一线明星。

清新秀丽的妆容,凸显少女气质的整体设计,真实而细腻的场景,《mina》借助精心打磨的视觉排版,将女性最真实可爱、贴合年纪的美丽以及元气满满的少女感,都呈现出来了。

如果你是一名热爱视觉和排版设计的设计师或者爱好者,《mina》简直就是为你量身定制的排版素材库。稍加拆解,你会发现这个杂志中到处都是可供学习的排版知识。

版心:创造不同的视觉感知

《mina》杂志因为其少女特性,多样活泼的使用不同的区域放置元素,同一本杂志会给你带来不同的视觉效果。下面左图四周无间距的设置,会使你的视线更加开阔,无论看向版面的哪一部分,都可以传递信息给你,吸引你打开这本杂志。右图的框线设置,限制了阅读的区域,让你的视线聚焦在框线内,阅读精心为你准备的内容。

下面左图三张图片和两段文字的排列,使整个版面显的更加充实和生活化,而右图单张图片和零星的文字使得整个版面显的更加高级,这不仅仅是图片和颜色选择的影响,更多的还有元素的排列给你带来的视觉感受。

分组:使版面信息清晰且富有条理

为了让读者更加易于阅读,在该版面上停留更长的时间,分组的设计在杂志中较为常见。图文元素整齐的搭配,是不是给你一种画面美观,信息可信赖的感觉呢?这样的设计也更加的吸引读者进行阅读。

反复和对齐:使版面富有韵律感而不失规整

同一排版样式的反复使用,会给你舒适的阅读体验,整个版面会更加的有节奏感,不会让你觉得某一元素特别跳脱。同样,为了美观和便于阅读,无论是图片还是文字,都遵循着一定的对齐原则,常见的有左对齐、上对齐和居中对齐。

对比:通过视觉差异突出重点

活跃于广告界的白承坤先生说,无论使用怎样的图片,目的都是为了让眼睛停留两秒钟。同理,各类元素或色彩之间的对比是杂志常用的让你停留「两秒钟」的方式。由于视觉心理的作用,相对来说,大的元素、鲜艳的元素会更加的吸引人眼球,引人注意。

出血位:打破规整,活泼版面

对于少女杂志而言,如何体现少女心和元气满满的感觉是一个需要解决的难题,而出血的设置为这个难题提供了一把钥匙,让整个画面活泼生动起来,右图奶茶开放式对话框的加入,有一种奶茶说「快来喝我!」的活泼感,使得整个版面顿时可爱起来。

留白和透气:创造呼吸与韵律感

《mina》很少在版面的四角放置满满当当的元素,是因为适当的留白可以让人在众多的元素冲击中舒缓下来,给你清新舒适的观感。让你在开阔的视野中,使杂志想展现出来的重点,成为你的焦点。这样好用的突出重点的方式,快快学起来吧。

抠图和四方版:控制元素与环境的关系

抠出来的人物没有其固有的背景,会让你聚焦于少女的动作和轮廓,隔着屏幕都能感受到少女满满的活力。而四方版更加强调人与环境的关系,让你得以获得更多的信息。两种方式如何恰当的使用,就看你想用来传递什么样的信息啦!

传递信息是最重要的,其余的套路就快去打开《mina》找寻吧!

文章来源:优设

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

日历

链接

个人资料

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

存档