首页

实战经验!如何做好网页后台的表单和表格设计?

之晨


一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时,首先确定设计风格,然后考虑这个后台尺寸是做居中固定式,还是全屏响应式。全屏响应式的网页设计,除非有规定,否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然,不管选择什么尺寸,都得基于做好一个后台而开展工作。

如何定义一个后台是好的?领导说好,用户说好,你自己也觉得好,那应该就是好的。大部分情况下产品已经定制好了每个功能模块,UI上只需要对着原型加以美化,如果你是这样做的,那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里,总是想让你改。

跟产品经理好好沟通,他们只是把功能模块设计出来而已,并没有设计这些模块如何呈现,如何操作,如何结合,如何分类等等。交互上在后台设计很重要,如果有专业的交互设计师,这些可以交给他们,毕竟,交互设计的收入比UI要高。然而在很多中小企业,产品原型直接给到设计是很常见的。当缺少专业的交互设计时,不要让产品觉得我们只是按照他们的原型做美化,那跟美工有什么区别,不是看不起美工,美工的全程是美术设计工程师,很高大上的职称,但是大家还是不太愿意这样被称呼吧,可能觉得头衔套太大压力会很大吧。事实上,UI本来就应该具备基本的交互技能。

风格选定是很客观的,需要经过产品经理/领导确认,如果他们很相信你的实力,你得说出足够充分的理由,为什么要选择这种风格,而并不只是看起来更高大上或只是个人喜欢。

本人对后台网页设计的风格理解,大致可以分为三类:纯白背景风,轻淡背景风,深色背景风。在后台开始设计之前,你最好先选定其中一种风格,因为后面的所有元件的设计,都得基于这个风格来设计。刚刚好,在早些时间就已经发布了一个后台的三种风格界面设计的作品,大家可以看出每个模块的搭配和区分:

纯白背景风:线框/轻淡色(灰)背景(文字一般采用黑色)

实战经验!如何做好网页后台的表单和表格设计?

轻淡背景风:纯白色块背景(文字一般采用黑色)

实战经验!如何做好网页后台的表单和表格设计?

深色背景风:带有透明度的纯色背景(文字一般采用白色)

实战经验!如何做好网页后台的表单和表格设计?

设计过程是很主观的,所有设计参数都取决于设计师,但是要严格按照设计规范,并且让所有设计看起来和用起来都是合适的。

全屏响应式+轻淡色背景风是目前很主流的设计,也是很保守和安全的设计。对于轻淡色的HSB色值,可参考:H:0-360;S:0-5;B:90-97,当然没有绝对大部分情况用的浅灰是最多的,如H0;S0;B93-95。

以下将依据这个设计风格做例子展示。

一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。

你应清楚的是

为了避免在设计后台时一个人在YY,请保持左跟产品沟通,右跟前端沟通,这点非常重要。或许很多朋友在接到项目的时候不知道从何做起,会在网上寻找一些相关素材,然后会看到很多很炫的风格样式,像是各种各样的数据/图形展示,各种各样的统计曲线图,还有各种各样的展示动效,真想拖到自己要设计的后台。

如果合适当然可以,然而,很多情况下,统计分析一类的图表设计,产品已经有很多现成套用的模板,你可以做的很炫,但前端不一定会按照UI效果图来制作。从技术上来说,没有前端实现不了的效果,你真的不必怀疑前端的实力。所以,保持设计跟前端的良好沟通,更能提高工作的质量和效率,并且,很多时候口头/文字描述如何展示,是淡入淡出,还是弹出等等,前端是能理解的。通常地,做动效只是产品的一种展示,而并不是产品的本身,就当自己练手做动画吧。

简洁又灵活的表格

一个典型的表格(table)包含标题(表头单元格th),内容(标准单元格td),通常都是一行行(tr)展示。设计时,应该将标题和内容区分,比如标题文字加粗/颜色加深/字号加大,或标题背景加深。因选择淡灰背景风,一般用白色块区分的原则,表格设计也尽量不使用线框,然而一行行的标准单元格如果都是白色的就不便于预览,因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式,居中对齐,居左对齐,整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示,我们还可以把每一列的间隔线去掉,但并不意味着间隔不存在。每一列的文字都不要贴边,给前端标记间距(内间距padding)值,告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度,拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。

我们都遇到过这样头痛的问题,当列表字段太多,一屏无法完全展示,这时应该怎么做?给表格设计一个左右滑动的滚动条?如果内容真的太多并且已经确定,这也未尝不是一种办法,但是,重新设计过表格的字段或许会更好,这个时候应该跟产品好好沟通了。有以下方法:

  • 减少不必要的文字(如下图中表头的“全选”去掉)。
  • 缩略内容或者用…省略后面内容,鼠标经过出现更多内容(如时间可以缩略后面的时分,鼠标经过出现具体时间)。
  • 将不重要的列表隐藏,表头右边设计一个>>按钮,点击跳到隐藏的列表,点击以后表头左边出现一个<<返回默认表格的状态。

实战经验!如何做好网页后台的表单和表格设计?

因为每个列表的宽度是可以拖动的,我们不能决定其固定的宽度,但每一行的高度可以设置一个值,建议所有元件的高度、宽度、间距的数值参数都设置为偶数。

如果列表的数据很多,一般都会设计page控件,但是也有一些列表会设计点击加载更多,或者直接滑动滚动条加载更多。另外一种情况更常见,即设计固定高度的列表,一页最多展示5/10/20…条数据,不管多少条,它的高度都是相对固定的。然而有时候数据太少只有一两条,这个时候仍然要固定默认最多展示条数的高度,如图:

实战经验!如何做好网页后台的表单和表格设计?

那么问题来了,在响应式设计当中,可没有什么参数是固定的值,一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变,因此当列表宽度缩小时,内容出现换行会增加高度而拉高整个列表的高度。值得注意的是,当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候,每一行的高度都应该按出现换行的且最高的高度保持一致,并且内容仍然保持垂直居中显示。另外,当前端做成这种响应式的列表时,一般不再让鼠标拖动列的宽度了。

同一组数据的不同宽度显示

实战经验!如何做好网页后台的表单和表格设计?

当宽度拖到第三种情况,按钮也出现了换行,那每一行的高度都应该按照这个高度保持一致,即使有一些数据只有一个按钮/地址并没有出现换行,如图:

实战经验!如何做好网页后台的表单和表格设计?

当然,如果你不想让内容出现换行,就可以用上面说的那三种方法来实现了。

不要再说为什么别人做的表格那么高大上,明明自己做的效果图还挺好看,为什么实现出来却那么丑,当你了解这里面的各种参数和逻辑,并且很好的跟前端沟通,参照以上规则,不管再复杂的列表都可以做的得心应手并且得以实现。

整齐并带有交互功能的表单

在后台设计中,表单出现的频率并不低于表格,甚至可以说几乎所有类型的网页都会出现。比如登录注册、信息录入、搜索、选择器等等。常见的表单有输入框、普通按钮、开关按钮、单选框、复选框、下拉菜单。

一个输入框,通常有标签名称label、提示信息placeholder(输入信息后提示文字消失)、初始值value(需手动删除)。如果是必填表单,在适当位置(标签的前后,输入框后)加上红色*号(或其他符号)。

实战经验!如何做好网页后台的表单和表格设计?

一些有字数规定的输入框,可以增加一个剩余字段提示

实战经验!如何做好网页后台的表单和表格设计?

事实上,在设计表单之前,我们就要先对表单的标签进行优化,标签字段尽可能的简约。每个组的表单,标签都必须是对齐的,输入框/选择框也应是对齐的。当这个组的表单的标签字数较少并且较对应时,可以采用左对齐的方式,并且最长标签的名称离输入框有margin值。

实战经验!如何做好网页后台的表单和表格设计?

另一种情况,也是更经常遇到的情况,当一组表单的标签很多时,某些标签字段不能更好的简化,标签的字段都不对应,这个时候可以采用右对齐的方式,这种方式更灵活。

实战经验!如何做好网页后台的表单和表格设计?

当一组表单的标签太多时,请跟产品沟通并对其进行分类。

实战经验!如何做好网页后台的表单和表格设计?

有些表单是有逻辑/顺序的,比如地区的选择、出生年月与生肖/星座的对应等等。例如,在选择省份之前,市区是不可操作的,在UI上做灰度显示不可操作。除了灰度代表不可操作,透明度也可以起到同样作用,这种方式也可以运用在按钮上。

实战经验!如何做好网页后台的表单和表格设计?

带有识别功能的输入框:

当输入有误时,尽量避免弹出框提示,可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。

实战经验!如何做好网页后台的表单和表格设计?

通过以上方式设计的一组信息录入型的表单设计,如图:

实战经验!如何做好网页后台的表单和表格设计?

表单的设计可以单独出一篇更详细的文章,还有筛选/选择器一类的表单,这里就不一一描述了。

友好舒适的弹窗

弹窗在后台的出现频率非常高,其强度一般分为三种,弱弹窗、强弹窗、重弹窗。字面上已经很好理解,轻弹窗,一般鼠标经过的时候即可出现而不用点击,比如提示说明,显示更多信息,鼠标移过后立即消失,它不会影响下一层(当前页面内容)页面的视觉效果和操作,因此这个弹窗通常会设计一个浮动带有阴影效果的框。

实战经验!如何做好网页后台的表单和表格设计?

而强弹窗则是一个对话框,它暗示你必须对这个对话框进行操作后才可以离开,如确认信息、错误提示信息。而重弹窗更像是一个新的页面,比如弹出的列表,详情,表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理,比如加上一定透明的黑色/白色,给下一层页面的内容做模糊滤镜等等。

实战经验!如何做好网页后台的表单和表格设计?

当然,这三种弹窗式可以结合的,针对不同场景使用不同的弹窗设计这点非常重要,这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时,动不动就弹窗,并且需要去点某一个按钮才可以关闭。

任何一种场景在设计上都可以得以解决,什么情况下使用什么弹窗设计,或者有时候必须使用强弹窗,但是又不想让用户操作关闭,我们可以设计几秒后自动关闭,或者点击弹窗以外的区域直接关闭。

弹窗还有两种主要的表现形式,一种是顶部有关闭按钮,另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时,尽量避免按钮功能的重复,比如一个提示信息必须让用户点击确认按钮才可以关闭,那么就使用没有顶部关闭按钮的设计。对于重弹窗,一般都会采用顶部有关闭按钮的设计。

实战经验!如何做好网页后台的表单和表格设计?

弹窗并不是后台的专利,它在移动端更高频率的出现,例如活动页面的弹窗,趣味性就显得更重要了。

总结:

这篇文章主要跟大家分享的是,当开始网页后台项目设计的时候,保持跟产品和前端的良好沟通。确定风格后开始设计,并分享了3个主要的点:

  • 制作灵活又简洁的表格
  • 设计整齐并带有交互功能的表单
  • 选择友好舒适的弹窗

后台还有其他元件设计,欢迎大家共同探讨。




文章来源:优设网    推荐:程远


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



数据可视化设计必修课(一):图表篇

之晨


图表是数据可视化中最常用的一种表现形式,一定要吃透它。

随着互联网数字化越来越完善,数据可视化这个词的使用频率也越来越高,而图表是数据可视化中最常用的一种表现形式。无论是工作汇报还是后台设计,都离不开图表的使用。然而关于图表类相关的资料太零碎了,不成体系,对于初学者非常不友好,本篇文章我从图表的祖辈开始,把它都给挖了出来,希望对你有帮助。

什么是图表

图表的定义:可直观展示统计信息的属性,对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观、形象地可视化的手段。

英文叫法:Chart。

用户对图形的敏感程度远远大于文字,所以产品就需要把数据信息可视化,用简单的图形表示出更多的信息量,而图表是数据可视化中最常用的表现形式。

接下来我们来介绍图表的具体构成及元素解析。

图表的构成

图表是由:标题、图例、刻度轴、数据展示、网格线、提示信息、水位线、时间轴组成,每一个元素都有它存在的意义。在实际使用中不一定非得把元素全部展示出来,精简化显示想要展示的内容即可。

数据可视化设计必修课(一):图表篇

图表元素解析

1. 标题

顾名思义,标题就是图表的名字,标题是必不可少的元素。标题的内容一定要言简意赅,不要太长,能两个字写清楚绝对不用三个字。

标题的常用位置有 3 个:左上角、顶部居中、底部居中。

数据可视化设计必修课(一):图表篇

一般情况下,标题字号 / 色值要突出一些,用户第一眼看到 chart 的时候,要清晰的看到这个图表是做什么的。

特殊情况下,如果需要对标题有额外解释的话,两种展现形式:

  • 增加提示图标;
  • 增加提示语。

数据可视化设计必修课(一):图表篇

2. 图例

图例的组成

颜色、名称、数值、单位。

数据可视化设计必修课(一):图表篇

图例的展现形式

圆形、开关、矩形、鼓包线、实线、虚线。

数据可视化设计必修课(一):图表篇

图例的位置

从左至右、从上至下。

数据可视化设计必修课(一):图表篇

图例的作用

  • 标识出每个颜色所代表的的类别;
  • 开启 / 隐藏数据显示;
  • 图例显示的数值一般为当前值。

图例的颜色选择

同一组图例中,不要出现相近的颜色,否则在图表显示中分不清彼此。

数据可视化设计必修课(一):图表篇

产品使用中,要规范图例颜色使用,一般分为两种:

  • 常用的图例颜色(颜色本身代表着行业中的某种含义),此类颜色需要是固定色值,无论哪个 chart 中,都是这个颜色;
  • 无特殊含义的图例,可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色,图例整齐划一。

图例过多时如何展示

  • 如果图例可整合前提下,展示主要图例 / top n 图例,其他的图例做整合,增加个详情页来展示完整的;
  • 如果图例不可整合/省略,则需要给出足够的展示空间。

共用图例

如果多个 chart 的图例一样,可进行合并,减少冗余图例。

数据可视化设计必修课(一):图表篇

图例省略

如果 chart 中只有一个图例的话,可省略。

数据可视化设计必修课(一):图表篇

图例名称限制

根据不同使用场景,为了更好的展示效果,要给图例名称设置一个最大值,超过最大值后省略展示。

数据可视化设计必修课(一):图表篇

3. 坐标轴

坐标轴分为 X 轴和 Y 轴,常规情况下为 1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

数据可视化设计必修课(一):图表篇

刻度值代表的意义

  • 时间点:12:00;
  • 时间段:周一、周二。

数据可视化设计必修课(一):图表篇

坐标轴使用规则

是否带单位:

  • 如果刻度值的含义明确的情况下,可以不用带单位,比如:2018、2019、2020…;
  • 如果刻度值含义有歧义的情况下,必须加上单位(具体是统一一个位置加单位,还是每个刻度值上加单位,则需要根据场景来判断)。

数据可视化设计必修课(一):图表篇

对齐方式(常用,但非必须):

  • X 轴:居中对齐;
  • Y 轴:右对齐。

数据可视化设计必修课(一):图表篇

刻度值过多时如何显示:

  • 可选择规律性省略刻度名称;
  • 倾斜文字以显示更多的文案

数据可视化设计必修课(一):图表篇

刻度值的选用一定要是同一个规律,禁止同距离的刻度值代表不同数据。

刻度点的样式使用规则:

刻度的线朝外。

数据可视化设计必修课(一):图表篇

4. 数据展示

数据的展示是 chart 中最为明显的地方,可以说如果只显示一个元素的话,就是他了。

数据展示的使用规则:

  • 边界要清晰,不可虚化;
  • 多个数据同时显示的时候,要保证每个数据都能清晰的看到,可以采用透明度来保证所有数据的显示。

5. 网格线

网格线的作用

呼应坐标轴,美观度。

网格线的使用规则

  • 线的颜色要弱化,不要喧宾夺主;

数据可视化设计必修课(一):图表篇

网格线使用实线居多,尽量不用虚线。

使用场景

横、纵、横纵结合、无网格线。

数据可视化设计必修课(一):图表篇

6. 提示信息

通常情况下,提示信息用来标识出 chart 中重要点的数据信息,需要注意的是:重要信息尽量简化,信息量不要太大,言简意赅就好。

数据可视化设计必修课(一):图表篇

7. 水位线

根据不同产品的使用场景,有的时候会用到阈值,当达到某个阈值后,就会触发某种联动。这个时候就需要有个水位线了,它起到警示的作用。

形式有两种,实线和虚线,颜色的选取则取决于产品的警告级别。

水位线可以是一个,也可以是多个,视情况而定。

8. 时间轴

时间轴可以灵活地调节刻度值的上下限,从而更精确的看到自己想看的数据。

时间轴的功能及限制没有不是很复杂,所以就不过多解释了,需要用的话就用。

图表使用建议

1. 折线图 line

定义

折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。折线图是通过线条的波动来表示数据的波动,主要体现的是数据随着时间的推移而变动的图表。

数据可视化设计必修课(一):图表篇

使用场景

常用于观察一段时间内数据波动的浮动变化,比如:一天内内存的使用情况。

使用建议

Y 轴刻度值选择要合理,当前显示的数据波动要最大化的显示;

数据可视化设计必修课(一):图表篇

重要节点可以单独做重点标注;

数据可视化设计必修课(一):图表篇

数据拐点要平滑,不要太锋利。

2. 面积图 area

定义

面积图和折线图比较类似,区别在于面积图把数据区域做了个面积划分,让数据的显示更加清晰。

数据可视化设计必修课(一):图表篇

使用场景

面积图展示尽量不要超过 3 个图例,否则数据多的情况下,数据的展示会特别乱,影响观看。

使用建议

面积区域要和折线的颜色用统一色系,不要换色系;

数据可视化设计必修课(一):图表篇

面积区域一般要比折线颜色浅一些,这样视觉上更加让人舒适;

数据可视化设计必修课(一):图表篇

如果多条数据情况下也用面积图的话,面积区域尽量使用透明度,否则有的数据会被遮挡看不到。

数据可视化设计必修课(一):图表篇

3. 柱状图 bar

 定义

柱形图,又称长条图、柱状统计图。用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。

数据可视化设计必修课(一):图表篇

使用场景

  • 柱状图分为横向和纵向两种展现形式;
  • 用于在同一维度下不同数据的对比,用柱状图更能清晰的对比出数据的差异化。

使用建议

柱状图的厚度不要是固定值,要做成自适应来应对不同尺寸的分辨率显示;

数据可视化设计必修课(一):图表篇

厚度与间距的对比要合理设计;

数据可视化设计必修课(一):图表篇

可使用小圆角,千万不要用大圆角,太丑了……

数据可视化设计必修课(一):图表篇

如果想要强调某个柱子的话,可以进行颜色区分,但是柱子颜色不要超过 2 个(同一维度下);

数据可视化设计必修课(一):图表篇

如果想要在柱子上显示数值的话,使用建议(下面的顺序为推荐顺序):

  • hover 的时候出现数值;
  • 数值默认在柱子上显示;
  • 数值在柱子顶部 / 右侧显示。

4. 饼图 pie

定义

饼图仅排列在工作表的一列或一行中的数据,它是有一个总和数据,方面查看每个类别分别占总数据的百分比的一种图表。

数据可视化设计必修课(一):图表篇

使用场景

  • 常用于做总结、年度汇报等;
  • 所有数据相加必须是 100% 才可用。

使用建议

  • 每个数据要使用单独的颜色来表示,不要有相同颜色;
  • 饼图中不能有负值;
  • 图例数量没有限制,但是如果遇到可以合并的图例,可以进行合并;
  • 饼图的开始点为 0/12 点位置。

数据可视化设计必修课(一):图表篇

5. 环形图

定义

环形图是由两个不同大小的圆叠在一起,切割中心部分得到的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

  • 环形图有一个独有的特点,就是可以在中心圆的位置突出某一项指标的数值。
  • 它常用于做数据的监控,监控某一类指标是否正常。

使用建议

  • 环形图的开始点为 0/12 点位置;
  • 环的粗细要合理,不要太粗和太细;

数据可视化设计必修课(一):图表篇

环形图的两个圆要从中心对齐。

数据可视化设计必修课(一):图表篇

6. 堆叠面积图

定义

堆叠面积图是把数据面积按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同资源中流量 / 容量的使用。

使用建议

  • 不要有重复的颜色;
  • 尽可能的把数据量按大小的顺序,由下至上的堆叠。

7. 堆叠柱状图

定义

堆叠柱状图是把数据柱状图按顺序逐步堆叠起来的一种图形。

数据可视化设计必修课(一):图表篇

使用场景

常用于不同维度下相同几个指标的展示。

使用建议

  • 不要有重复的颜色;
  • 按重要等级由下至上排序。

8. 非常用图表

上面介绍了常用的图表的使用建议,但是图表类型远远不止于此,还有很多非常用的图表类型,这次我先给大家列出来,如果大家感兴趣的话,我后面再写一期冷门图表的使用建议:

雷达图,散点图,K 线图,盒须图,热力图,旭日图,桑基图,树图,漏斗图,仪表盘。

数据可视化设计必修课(一):图表篇

常用的图表开源网站

1. echartsecharts

网站链接:https://echarts.apache.org/zh/index.html

数据可视化设计必修课(一):图表篇

2. highcharts

网站链接:https://www.highcharts.com.cn/

数据可视化设计必修课(一):图表篇

3. antv

网站链接:https://antv-g2.gitee.io/zh/examples/gallery

数据可视化设计必修课(一):图表篇

总结

Chart 是数据可视化必修课中最重要的模块之一,不可忽略。只有了解每个 chart 的定义及使用场景,才能在产品中用到最合适的那一个。



文章来源:优设网    作者:Luck gg


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



图形简化+衍生,教你真正的图形创意方法!

之晨


大家是不是很好奇别人的图形怎么都这么有创意,而自己想设计图形的时候却无从下手。可能是还没有掌握方法。今天就分享一个图形创意的方法。希望大家了解后,在设计图形的时候有一个清晰的思路。

图形简化+衍生,教你真正的图形创意方法!

△ 插图来自日本插画师 Yu Nagaba

我们先来看这个图形,大家能认出这是谁吗?

图形简化+衍生,教你真正的图形创意方法!

没错,是爱因斯坦。为什么仅仅几条简单的线条,就能把一个真实的人物刻画出来呢?这就是我们今天讲的内容,如何去简化并且衍生成完整的图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

简化的图形一直是趋势。它不仅仅利于快速传播、具有非常强的延展性,也经常作为海报的主体。

图形简化+衍生,教你真正的图形创意方法!

标志上也大部分以图形为主。所以作为设计师,简化图形的能力是必不可少的。

图形简化+衍生,教你真正的图形创意方法!

但是很多人对于图形简化还没有一个清晰的理解,更多的只会在图片的基础上进行简单的描摹。

图形简化+衍生,教你真正的图形创意方法!

这样描摹出来的图像很可能缺乏识别度,就像这个例子,描摹出来后它到底是狗呢,还是狼呢?

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

简化的第一步是确定基本元素。总的来说,就是什么元素能够确定这个物体的种类。比如玫瑰是确定它是“花”这一种类。什么元素能让我们辨别它是花而不是其他东西呢?

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

枝茎加上花苞,以及红绿配色就可以让我们辨别它是“花”的种类了。至于叶子就属于补充元素。这都是让我们辨别它的种类的基本元素。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

玫瑰花苞和枝茎的常态关系是:花苞在枝茎的末端。如果随意变换关系,会影响最简形态下的识别度,所以前期简化最好不要做变化。

虽然这两个步骤能确定它的种类是“花”。但是它是什么花呢?我们还分辨不出来。就需要到第三步,找到图形的重要特征。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

这个时候玫瑰花就需要以种类内的事物做参考。也是和其他花做对比。找出玫瑰花区别于其他花卉的重要特征。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

红绿配色是我们对玫瑰的印象。玫瑰的枝茎带刺。玫瑰花的花瓣开得比较紧密,花瓣层层包裹像漩涡一样。这些都是玫瑰比较明显的特征。

图形简化+衍生,教你真正的图形创意方法!

分析完这些特点,我们只需要在原有的元素关系上加上这些特点,就能分辨出它是玫瑰花了。而这些特点可以在保证识别度的情况下任意删减组合。

图形简化+衍生,教你真正的图形创意方法!

比如说去掉刺也能通过其他特征辨别玫瑰。或者保留刺,去掉花瓣的细节,如果对于玫瑰有刺这一点比较熟悉的人来说也可以辨别它是玫瑰。又或者保留所有的图形细节,把颜色变成黑白,都是可以的。

图形简化+衍生,教你真正的图形创意方法!

我们刚刚说的玫瑰是本身自带的特征,其实在现实生活中还存在其他因素影响的特征。

图形简化+衍生,教你真正的图形创意方法!

比如附加特征,这个图形我们都能分辨它是鸟,但是具体是什么鸟却看不出来。

图形简化+衍生,教你真正的图形创意方法!

一旦加入橄榄枝,啊,我们就知道,它是鸽子。鸽子本身是没有橄榄枝的,它代表和平也是人类赋予它的象征。所以这些属于附加特征。

图形简化+衍生,教你真正的图形创意方法!

还有状态特征,比如壁虎,哪种壁虎的状态和角度更容易让你辨别它们的身份呢?我相信应该是能看到壁虎紧紧抓在墙上的状态。所以它的状态是否能体现它的身份,也是很重要的一点。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

现在的示意图它只是随便画出来的,如果用在设计中,这个图形是不合格的,所以需要对它进行改造。

图形简化+衍生,教你真正的图形创意方法!

衍生图形主要从两个角度入手,风格化和陌生化。

图形简化+衍生,教你真正的图形创意方法!

比如花的漩涡状可以用同心圆表现。花苞用半圆形、枝茎和叶子同样用最基本的形状概括。

这个风格的图形非常简单,会显得它的完成度不高。所以这时就需要陌生化的处理,让它在创意想法上有亮点。

图形简化+衍生,教你真正的图形创意方法!

比如我们把同心圆的颜色改变,虽然辨识度少了。但是这种创意图形加上文案与画面氛围,可以判断出它的身份。

那么漩涡一定要圆形的吗?

图形简化+衍生,教你真正的图形创意方法!

带着这种疑问,我们就可以开始第二个衍生。以四变形为基本形,通过旋转不同角度,再加上渐变风格。第二个图形就衍生出来了。可能这两个会偏抽象一点,那也可以选择保留更多的特征。

图形简化+衍生,教你真正的图形创意方法!

就像这个图形的外形和线条刻画上更大地保留了玫瑰形态,所以在颜色上就可以不用完全遵循现实。

图形简化+衍生,教你真正的图形创意方法!

很容易,三个不同的图形就完成了。

因为图形衍生的过程对于想法、造型能力、不同风格的掌握有所要求,没办法通过简单的理论来分析,接下来会通过分析四个不同的案例的衍生方式,给大家提供一些衍生的思路。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

螃蟹它的颜色是橙红色。蟹钳是螃蟹比较明显的特征。蟹的八条腿可以作为辅助元素。它的躯壳偏圆形。这些特点的组合就能呈现一个非常清晰的螃蟹的形象。但是别忘了图形的衍生是需要对特征有所取舍和变化的。

图形简化+衍生,教你真正的图形创意方法!

为了让螃蟹看起来更加的陌生化,我们可以考虑改变印象中螃蟹的常见形态,让它以一种更加有趣的动态呈现,比如让这个多爪动物以一种太阳一样的放射状呈现,变身元气螃蟹。

图形简化+衍生,教你真正的图形创意方法!

第二个方案保留圆形的身体,加上尖锐的蟹钳特征,就完成了一个新的螃蟹图形。虽然颜色的变化和少了八条腿的特征,但是在保留其他特征时作出的变化却也能让我们清晰辨别它是螃蟹。

图形简化+衍生,教你真正的图形创意方法!

那传统的螃蟹都是圆形的身子,我们能不能尝试把螃蟹的身体变方呢?带着这种思考,保留其他特征的同时作相应的风格化处理。又一个新的图形产生。

图形简化+衍生,教你真正的图形创意方法!

这些就是螃蟹部分的衍生图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

火龙果的配色是很明显的特点。表皮会带有绿色的鳞片。相对椭圆的身体。火龙果是白色的果肉和黑籽的组合。

图形简化+衍生,教你真正的图形创意方法!

第一个衍生很简单的,就是简化火龙果的外形,最后变化颜色。

图形简化+衍生,教你真正的图形创意方法!

这一次同样保留火龙果的外皮特征,因白色果肉和黑籽的结合让我联想到骰子,我们可以把这个想法和火龙果结合一下,让它变得更加有创意。

图形简化+衍生,教你真正的图形创意方法!

使用不寻常的切块方式,也能产生另一个图形。

图形简化+衍生,教你真正的图形创意方法!

这些就是火龙果部分的衍生图形。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

颜色同样是我们辨别它的一个很重要的特征。除了颜色,我们还可以看到西瓜的表面有条纹的覆盖。像是西瓜这种简单的圆形水果,切块之后的造型,可能会更有辨识性。是一个很好的附加特征。最后,黑色的瓜籽同样是我们辨别西瓜时的一个显著特性。接下来就需要对它们进行风格化的处理。

图形简化+衍生,教你真正的图形创意方法!

西瓜的条纹部分,这一次我们用几何图形来做一些尝试。错位再压缩,让条纹的比例感更强。加入半圆形的西瓜切块之后,感觉有点像是人脸对吧?那我们就顺势添加一个眼睛,让它拟人化。

图形简化+衍生,教你真正的图形创意方法!

符合了这么多特征之后,造型上就不用那么写实了,我们完全可以抽象一些来绘制它。加入之前的眼睛和切块之后,它就完成了。

图形简化+衍生,教你真正的图形创意方法!

西瓜切开后的这个形状特征让我们很容易辨别它的身份,所以就可以保留这个形状特征,做一些大胆的变化。

图形简化+衍生,教你真正的图形创意方法!

比如颜色上可以完全脱离西瓜原有的颜色。用几何色块的方式去填充造型,让风格化的更强烈。到这里,这个图形也就完成了。按照这种思路,能不能保留配色,但是在切块的形状上进行改变呢?

图形简化+衍生,教你真正的图形创意方法!

那就到了第三个衍生,我们把它分成三块去表现西瓜的层次。因为造型已经足够抽象了,所以这里我们用颜色去尽量还原西瓜的印象。组合到一块,是不是就有西瓜切块的感觉了呢?

图形简化+衍生,教你真正的图形创意方法!

我们把这个数量增加一些,就更有辨识度了,再调整里面的一点变化。那么到这里,这个图形也就完成了。

图形简化+衍生,教你真正的图形创意方法!

这是西瓜部分的衍生。

图形简化+衍生,教你真正的图形创意方法!

图形简化+衍生,教你真正的图形创意方法!

青蛙是绿色的,由于身体和四肢的对比,会感觉四肢很细长。另外后爪很长,并且有蹼。弯曲的后腿是青蛙比较特别的地方。

图形简化+衍生,教你真正的图形创意方法!

这一次,我们可以从造型上做变化。比如切断连接四肢的关节部分,不过这样的造型在美感上还不是很理想。

图形简化+衍生,教你真正的图形创意方法!

那么尝试到这里,觉得下面的这个脚的直线结构很有趣,是一个很有变化性的特点。所以我们可以按照这个方向再去尝试一下。

图形简化+衍生,教你真正的图形创意方法!

把手臂的部分也修改成直线的样式,那么这里这个图形就完成了。

图形简化+衍生,教你真正的图形创意方法!

这一次,我们把目光聚焦到青蛙细长的四肢上,为了让造型看起来更生动,这个图形我决定打破对称的方式。将四肢和身体的比例做一些夸张的处理,让身体更小,四肢更大。爪尖用来划水的蹼也同样做了夸张的处理。那么在这个过程中,我们会继续摆放四肢的位置,让每个部分的空间看起来更均衡一些。

图形简化+衍生,教你真正的图形创意方法!

强调了四肢之后,我们还可以反着来,尝试强调身体的部分。为了让四肢看上去更细小,这一次我们用线条来绘制。

图形简化+衍生,教你真正的图形创意方法!

这是青蛙部分的效果。

图形简化+衍生,教你真正的图形创意方法!

来回顾一下我们这篇教程所有的图形。

我们从极简化的元素开始,通过不同特征的组合与变化,再为它添加陌生化和风格化的处理,就能能衍生出非常多形态各异、各种风格的图形。




文章来源:优设网       作者:研习社



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



视频号里为什么还没有出现电商巨头?

涛涛

导语:视频号从测试到上线也经过了很长的一段时间了,对于抖音快手来说,上面已经出现了不少电商巨头,但是谈到视频号,在电商行业目前好像并没有掀起特别大的水花,这又是为什么呢?


问各位村民几个问题,你可以试着在心理作答,也可以留言告诉村长。

  1. 你每天主动打开微信视频号看直播卖货的次数是多少?
  2. 你在视频号直播卖货中消费过几次?
  3. 你有自己每天必逛的视频号卖货主播吗?

之所以要问大家这几个问题,也是源自于我今天和一位付费村民关于视频号直播卖货的交流。今天一位做视频号直播的村民私信村长,问我为什么那么多做视频号直播带货的主播GMV就是冲不上去呢?

她的原话是:微信生态里面这么多的消费人群,每天买东西的人也不少,咋就搞不到视频号直播里呢?这些人在朋友圈、微信群、小程序买,为什么就不在视频号直播里面买呢?

的确,视频号发展到现在已经一年有余了,号称日活也超过了3亿,为什么到现在还没有真正的直播带货玩家出现呢?今天,村长便把自己的一些思考和大家分享,也欢迎各位发表自己的看法。

一、认知:微信内的消费是随机的

尽管在微信里面有了支付、小商店、直播、小程序等电商的功能,包括还有京东、唯品会等电商平台的入口。但是当你问用户,微信是什么的时候?

我相信大家最基本的答案是一个私密的通讯录、一个交流工具。哪怕在微信里面还有公众号、朋友圈等内容。但是如果你问用户,淘宝是什么?头条是什么?百度是什么?

他们的答案其实也是肯定的,购物、资讯、搜索。这也就注定了,在微信里面的消费是随机性的。用户很少主动在微信里去找购物商城、去看视频号里的直播带货。

更何况,视频号支持直播并支持购物也才不久而已。但是你问用户哪里可以直播购物的时候,用户会告诉你淘宝直播、抖音直播、快手直播。因为你在这三个平台里面,都能找到直播带货的领袖,而在微信里面没有。

二、裂变:微信内的消费是私密的

我们都在说微信裂变,分享传播,但是各位试想一下,你真正在微信里面,主动向身边亲友推荐商品的次数有多少?是在你消费之前,还是消费之后?尤其你的出发点,不是为了赚分销佣金的前提下,你会在看直播的时候,把一件商品发给好朋友吗?

其实是不会的,绝大多数的购物分享,都在在消费完成之后,和朋友聊到的时候,才会分享的,而且视频号直播带货的分享也有很多不便:

  1. 视频号播货还没有带分销锁佣的功能,所以用户没有足够充分的理由去分享;
  2. 直播卖货是连续性的,当你看到A商品分享给朋友的时候,可能他看到的时候就是B商品了。

这种分享是不精准的,中断的,转化效率是低的,你相当于分享了一个直播间给你的朋友。而我们微信里面绝大多数的成交,还是单品推荐为主,而且也是消费后分享为主。

三、传播:微信内的投放是中断的

既然依靠个人分享直播间不行,那就花钱买流量啊!

最近视频号也上线了推广助手,可以针对个人的视频号进行投放。但微信内的视频号直播投放,其实是中断的。当你在淘宝、抖音、快手直播卖货的时候,你只要在开播前后根据流量的情况,适时进行一些投放,就会有流量导入进行。

但是当你在视频号里面进行投放的时候,用户想要看到你的视频号直播,必须点击【直播和附近】,可大部分用户的第一路径是点击朋友圈下方的【视频号】。

微信主动把视频号内容和直播给分开了,大家可以通过【视频号】入口找找,你连续刷到直播的次数有多少?尤其是和抖快淘相比的概率。另外,在抖快淘三个平台直播时,只要你的直播热度达到一定阈值还会得到官方的推荐,会影响到更多的人。

而在视频号呢?官方就算给你推荐了,很大一部分流量也是浪费的,所以再问各位两个问题:

  1. 视频号百万大号有几个?能立马说出来吗?
  2. 视频号直播时同时在线人数超过1万的有几个?

在视频号一个5万粉丝的账号都可以算上大号了,都可以接广告变现了。但是5万的账号和快手抖音淘宝100万、500万甚至1000万的账号相比,开播之后观看的人数完全不是量级的。

当然许多人一定会说,视频号一个粉丝的价值至少大于快手5个粉丝、抖音10个粉丝,但是村长想说,个体价值再大,也打不过基本量啊!

四、信任:微信内的直播消费信任度不够

我们在微信内的消费,绝大程度上都依赖于个人信任关系的建立。所以除非视频号的主播你是认识了解的,或者是朋友主动分享给你,极力推荐你购买的,你才会去关注或消费。

而在抖快淘看直播卖货,除了基于个人对主播的了解之外,还有平台官方、店铺等级、用户口碑。大家在看看视频号内直播带货,店铺有等级吗?买了货之后哪里看订单?主播明天还会不会直播?

消费的不确定性,极大提高了用户在视频号里面自主消费的门槛。

五、承接:视频号没有直播溢出的流量

不知道各位有多少人在快手看过一些大主播卖货的?

比如当辛巴直播间昨晚卖爆了一款商品,你在当日或者次日就能刷到其他人在视频或直播分享辛巴的直播同款。包括淘宝、抖音也是如此,只要李佳琦、薇娅、罗永浩直播带过的货物,过几天你就能看到许多商品的标题写着XX同款,包括还会用他们直播视频进行投放。

这在一定程度上面,再次强化用户对主播带货的认知。但各位什么时候看过,在视频号里面,一个主播卖完货,全网都在传播的?都在说XX主播同款的?另外,各位村民在视频号里面每天都会去刷一个主播视频的有多少?

所以,我们直到现在依然还没有看到,视频号里面有哪个真正的电商KOL,除非官方愿意去打造这样一个人设。但事实我们发现,整个微信体系内,微信是干预品牌最少的,都是靠品牌自己发展的。

那么,视频号这么好的工具、又有微信天然的流量和无缝的对接,难道真的就卖不了货了嘛?

那肯定不是的,虽然短期里面,我们很难看到一个大品牌或者电商KOL的出现,但是视频号卖货的可行性是存在的,而且对于个人直播来说,是很有好多的。

六、个体:视频号电商更适合个体户

视频号依然延伸了微信整体的理念:再小的个体也有自己的品牌。作为个人来说,想在视频号内做直播带货是完全可行的,原因有三:

  1. 各种支付条件都很满足,比如支付、店铺;
  2. 个人的信任价值更容易在小范围里面建立;
  3. 流量的获取与转化方便,个人可以依靠朋友圈、微信群、公众号以及视频号本身吸引流量。

这也是为什么,许多做教育的,卖美妆、服饰、家居个人,在视频号能掘金的原因之一。

七、矩阵:视频号矩阵卖货才是出路

想在视频号里面,做大电商规模,就真的没有办法了吗?

我觉得除了官方主动持续造星以外,另一条路就是矩阵卖货。其实这种方法目前已经有一些品牌在尝试了,目前的交易额已经能做到三四千万了。

具体的做法就是打造头部主播甚至是创始人CEO出场,靠日更视频号和直播,来招募品牌代理。再通过培养1000个、10000个个人视频号主播,每天直播卖货。

只有这种方式,才能一天让一个品牌做到几千万的曝光量,从而产生转化。所以我个人认为,视频号直播,尤其是想做规模化,最适合传统的微商品牌、连锁店铺以及社交电商平台。

因为在他们这个体系里面,分销人员是现成的,大家可以统一卖一些品,保证了某一款品在视频号内集中的传播。

文章来源:人人都是产品经理   作者:十里村

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


新项目设计时一定会遇到的5个盲区,提前替你总结好了

之晨


最近负责的新项目快上线了(感觉我好像一直在做 0-1),给大家总结了5个一定会遇到的新项目盲区及最新的解法,希望能帮助大家在交付开发前就顺利完成设计输出。

关于苹果账户登录的硬性规定

2020 年 4 月后,我们在设计 iOS 登录界面的时候都知道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关于这个按钮的设计规范其实有比较硬性的规定,没有注意的话到了开发还原的时候就容易踩坑。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的第三方登录都会以更弱一点的视觉方式呈现。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(这个大家直接下载官方提供的图标,它是自带留白的区域的,保持图标与高宽一致就符合要求了)。

而国外的 iOS 登录设计中通常没有那么多的第三方登录方式并存,主要的“Facebook”与手机登录通常会与 Apple 账户登录按钮同一级出现在界面中。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

这个时候需要特别注意的是,苹果官方对于这种大按钮的限制主要在于 3 个部分:

  • 按钮的高度需要等于图标的宽高(图标官方有提供下载,已经是自带留白区域的)
  • 按钮的高度需要与中间的文案成一定比例(字体是按钮高度的 43%,比如 44 的高度配 19 的字)
  • 图标离左侧最小间距需要超过按钮高度的 10%

剩下的按钮样式,比如颜色和描边也非常有限,只可以使用白色填充黑色描边与纯黑色底这 2 种。

想了解更多具体内容,可以参考官方贴:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

关于安卓启动图标可带动效了

还记的早几年做安卓项目的时候上架应用商店的启动图标输出还是和 iOS 差异不大的,基本就是尺寸换换。这次输出启动图标,被安卓的开发大大告知,安卓可以出这种带动效效果的启动图标了,它的原理和效果,如下图:

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

实现这个效果的设计配合输出也很简单,只需要整理一下的具体启动图标输出就可以:

1. 启动图标(前景,不带背景的)-108dp(324px)

当然以上仅针对纯色背景,可以与 logo 主体轻易分隔的启动图标。如果是混为一体的话就需要调整输出方式为以下:

  • 启动图标(前景,不带背景的)-108dp(324px)
  • 启动图标(背景)-108dp(324px)

想了解更多具体内容的铁汁,戳底下官方传送门:https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

关于全屏切图的压缩限制

这次新项目又遇到了开发中改稿的问题,大部分都因为全屏的背景图切图大小问题。

个别全屏视觉的界面,比如闪屏、登录页、音视频语音等等,我们通常设计时不考虑切图的大小问题就会比较放飞去设计。

但实际情况是一张全屏的花色 3 倍 png 切图基本都在 2M 左右,就算把压缩率提到 80%+(市面上大部分压缩软件的压缩率都很有限,比如大家常用的 tinypng、pp 鸭等),就算你重复压缩,也有至少 200 多 KB,远远超出开发 100k 以内的切图大小限制。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

所以不得不要求我们在输出格式的时候抛弃 png 格式,启用 JPG。

不过实际设计时候我们可能仍然会遇到不能用 JPG,必须用 PNG 格式的情况(透明度蒙层),那么建议大家可以尝试以下 2 个小技巧:

  • 尽量使用纯色背景设计,这样背景图可以用代码来写,主体切图大小可以想对控制小一些。
  • 如果还是需要使用花色背景,建议可以尝试高斯模糊的花色背景,这样开发可以直接用 1 倍图进行拉伸,也可以有效控制切图大小。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

最后不想屈服于样式限制的铁汁,一定记得提前输出格式大小康康会不会超标严重(尽量控制在 100k 以内),不然无法落地再好看也没有用咯。

关于动效到底导出什么格式不坑爹

目前关于移动端界面里个别小动效的导出比较主流的几种格式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

Gif、逐帧、包括前几年流行的 Lottie 大家应该都比较熟悉了,这里稍微科普 2 个陌生一点的格式:

  • Apng:一个 PNG 格式的位图动画格式图片
  • Webp:2010 年 Google 推出的全部通吃的图片格式(可代替 Jpg、gif、png)

目前我觉得性价比最高的就是 webp,它的优势主要在于:

  • 压缩率极大提升,同分辨率的 webp 比 gif 要小很多
  • 支持位图、支持支持 Alpha 透明和 24-bit 颜色数、支持 3D 翻转(这些 GIf 和 Lottie 都有限制),也就是不会出现毛边啦、变色一类的坑爹情况
  • iOS、安卓都支持(比如同样高性价比的 Apng 只能用于 iOS 端)

唯一的 2 个问题在于:

  • webp 目前只兼容 Chrome 和 Opera 浏览器,其它浏览器不支持。不过基本我们都应用于移动端应用,所以浏览器兼容对这个影响应该还好
  • AE、PS 等各类动效设计的软件无法直接导出 webp 格式,需要通过插件或其他第三方软件转换。

我度娘过一些导出 webp 的方式都不是很好用,问了我司的动效设计师,推荐一个比较简单靠谱的方式分享给大家:

1. 先从 AE 导出逐帧图(记得需要循环的动效做好循环)

不知道如何到逐帧图的看这里:渲染→渲染设置→格式→选择“PNG”序列→导出即可

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

2.下载 isparta

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 格式(可选)

关于切图标注协作方式谁家强

设计交付的协同平台现在市面上很多,很多大厂也有自己内部的协同平台来承载设计交付,俺们猪厂用的叫 dbox(非常滴不好用),在强推之下开始申请经费改用 Figma 了。之前为了更换协同平台,把交付的协同平台都做了一番调研,这里给大家直接看表格吧。

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

看完图大家就会发现除了 Figma 大家的使用情况不会差很多,差的主要还是钱。总的来说的建议就是,如果已经从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给开发搞定切图标注以及文件存档这2件事儿了。

如果还在用 sketch 和 XD 的铁汁,交付型的协同平台我个人比较推荐 Zeplin,虽然有的人会说它服务器在国外很卡,我觉得其实还好吧,同时 Zeplin 近几年还解决了 Win 系统适配的问题。

然后最后小吐槽下腾讯的 Xshow。一开始我觉得它是最香的,因为高清度、流畅度到美感几乎都比较完美。一直到我发现了它居然是个完全开放的交付协作平台,也就是别人知道你的账户 ID 之后就可以搜到你并看到你的所有项目文件,瞬间安全系数降为 0。作为一个明显对标企业级的协作平台这么疯狂的植入社交功能,到底是企鹅的社交基因太强大还是怎么肥四?

新项目设计时一定会遇到的5个盲区,提前替你总结好了!

新项目设计时一定会遇到的5个盲区,提前替你总结好了!





文章来源:优设网     作者:Nana的设计锦囊



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



文字动效原来这么简单

之晨


       文字,是最常见的动效对象之一。我们可以通过对透明度、位置或者角度的改变,制作出丰富的动态效果。但你可能不知道的是,AE内置了超多的文字预设,只需用鼠标点击几下,就可以完成复杂丝滑的文字动效。 

AE文字动效预设使用方法 


       在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型

在AE的窗口中打开“效果和预设”面板,所有和文字有关的效果都在动画预设中的Text文件夹内,共十七种动效类型。

       将动效预设拖动到对象上,即可应用动效。

17种动效预设预览


      十七种类型分别为:3D文字动效、入场动效、离场动效、模糊动效、曲线动效、表达式动效、填充与描边动效、图形动效、亮度与透明度动效、机械化动效、多样化动效、多行文案动效、拟态化动效、路径动效、旋转动效、缩放动效以及字间距动效。

预设搭配组合


          有些效果可以相互叠加组合,理论上我们能做出成百上千种不同的效果。 






文章来源:UI中国       作者:设计师深海



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



如何设计好调查问卷?这篇总结全是干货!

之晨

调查问卷,是一个低成本快速收集资料的定量分析工具。这是个看起来简单,产出的问卷也看似很简单,但是在整体设计的过程却是需要很多的思考和预备。

关于调查问卷,会分成三个部分来解说,

  • 第一部分是关于「设计前的准备」
  • 第二部分是关于「如何设计问卷」
  • 第三部分是关于「数据清理和产出问卷报告」

废话不说,直接开干!

着手设计问卷前,先问

1. 为什么做问卷

这个是问卷的目的,也直接影响后面问题的设计。

2. 如何使用问卷的研究结果

这是关于问卷解决方案的落地。不需要太过细致的落地计划,但是至少要清楚,这份问卷的研究成果,可以获得多少支持力度。不管问卷发现了多么伟大的问题,如果没有落地,其实是没有无意义。也切忌不要今年做的研究结果,明年来实施,那问卷的时效性和准确性就会大打折扣了,因为市场的瞬息万变。

问卷的目的

这是做所有事前,都要问的问题,「为什么做 Why」。而这个问题为什么重要呢,因为这会关系到设计问卷的核心内容是什么,会影响问卷的构成,当然最后也会产出不同的结果。

问卷的目的主要可以分为六个方面

1. 收集用户信息

很多时候,我们或许知道理想目标用户是谁,但是谁才是真正使用我们产品的用户呢?了解真正使用的用户,可以对用户进行更针对性的分析和设计。

2. 了解用户使用习惯

了解用户在产品上是如何使用产品的,以及用户的使用路径是否按着我们期待的方式进行,这是很有必要,这也是一个验证的过程。

2. 满意度

了解用户对产品的满意程度,对于用户不满意的方面,可以进行归纳总结,并给出合理的解决方案

3. 建议反馈、吐槽、好评

从问卷中收集用户的心声,明白槽点是什么。同时也收集用户的好评,这也是激励团队一个很好的方法,因为是直接来自用户。

4. 体验优化

对一个成功的产品来说,它要好用,它也要好看。产品有大改版前,可以用问卷来评估整体产品的体验如何,以便在重新设计的方向上能更好聚焦。

5. 需求验证

很多时候,需求可能没那么明确,用户和产品间始终存在着 gap, 所以我们有时对方案琢磨不定时,可能会试运行,后续看用户反馈。通过合理设计问卷,我们也可以稍微窥探到用户的想法

但是对需求的验证,单通过问卷还是比较难的,只能窥探到比较浅的一层,最好后续可以对用户进行访谈来做后续跟踪,以便了解事情的全面。

这里要注意的是,问卷不适合探索用户的新的需求,或者要验证很精准的信息等比较复杂性的问题。

如果你问用户,近期会推出新功能,问他会不会用。大致上,你得到的回答都是肯定。很多时候,同意比拒绝更简单。

问卷问题的分类

根据提问的方式,可以分为 「是什么」「怎么样」「怎么办」

1. 是什么

主要是用户信息、使用习惯等问题。

例如,年龄层、职业、使用产品目的、知道产品的渠道、使用频率、使用竞品软件、整体满意度等

2. 怎么样

主要是询问用户原因,比如打这个分数的原因,某功能使用如何等

3. 怎么办

主要是询问用户的建议、期待产品改进的地方

设计问题需注意几点

问卷中并不是所有问题都适合问,有一些比较敏感的问题需要去避免,以免激起用户的负面情绪

1. 敏感性问题

个人信息类的问题比较容易会有敏感信息存在,就像你问用户工资区间,和在问卷最后告知用户参与问卷都有奖品,需要填写收货地址。很明显收货地址的准确性会比工资更高。

2. 措辞严谨

  • 无错别字,文明用词
  • 用词不产生歧义,准确表达;比如平时,比较多、近期,每个人对此理解是不同的,要提供明确的时间节点
  • 一个问题,就只问一件事
  • 尽量用陈述语句,不使用反问句、疑问句、否定句,用户可能无法准确明白,特别是否定句,用户有可能看成肯定句。
  • 避免用语过于口语话,不中英文夹杂,除非名词已完全普遍。根据目标群体的不同,会有差异性。比如 iOS 系统,不一定所有人都知道,这指的是苹果的手机系统。
  • 标准用词,尽可能或不使用缩写,比如 h,hr, 直接写小时,会更好。

3. 问卷的顺序

先简单后复杂,并注意整体逻辑性的表达。循序渐进,如果一开头就是很难的问题,用户很容易放弃答题

4. 问题长度

尽量保持所有问题在一个差不多的长度呢,保持一样的节奏。避免时长时短

5. 避免专业词汇

很多时候,我们会用一些所谓的“行话”来表达,但是在问卷当中,无法保证用户同样是理解的,而且也会让用户产生距离感,非必要情况下,不要使用专业词汇

6. 选择题枚举要穷尽

题目数最好不多于 7 个,太多也会造成用户选择困难,最后记得加个其他并提供文本框输入

7. 避免互斥、重复、相似

问题避免前后矛盾,造成用户困扰,也不要重复或相似度极高的问题,除非这个问题是陷阱题,为了检验用户是否认真答题。但是在数量有限的问题中,一般比较少使用陷阱题

8. 保持开放性

为所有选择的选项,加入「其他——」「以上都不是」「不知道」,用户可能会觉得问题或答案不匹配,而不知道选什么,这时需要给用户一个出口,避免产生无效数据

9. 避免询问引导性的问题

大部分用户认为 XX 功能,很好用,你觉得呢?

如果看到这样问题,大概可以从中读出两个信息,1. 大家都觉得好用 2. 平台希望我说好用。

这个问题所传达出来的隐藏含义会引导用户做出不真实的反馈,这是没有意义的问题

10. 避免让用户选择「 是/否」「真/假」「好/坏」

强制选择非黑即白,大部分情况下没什么意思,因为用户可能不确定。这个问题本身也没有太大价值,也会错过用户一些比较有趣的回答。

所以如果这个问题的目的,是一定要知道的,可以更改提问的方式。

如何设计好调查问卷?这篇总结全是干货!

对于用户的问题,答案要可以量化表达,来产生数据,才便于后续数据的分析

11. 避免问用户将来的事,或回忆许久前的事

当人们将自己的行为投射到未来时,通常会过于简单化和理想化,人们更擅于解释当下进行的内容。

所以,如果要知道特定环境下用户的操作,则要配合合适的场景预设,并且是用户熟悉的场景。或者可以直接问,今天你会如何如何

如何设计好调查问卷?这篇总结全是干货!

所以可以通过询问今天的行为来,确定将来会不会使用。当然这不是绝对的,毕竟未来存在太多变数。

对于许久前的用户的操作行为,也尽量不询问,因为会忘记,而当强迫他去思考时,他可能自己脑补,产生不准确的记忆,进而对研究结果产生偏差。

12. 其他

问卷中存在多选题,必选题,选填题,记得预览问卷时,注意问题平台有无自动添加文字说明。

不要用 checkbox, radio 来区别多选和单选,这是不能准确的传达,也有可能用户没有注意到,或者就不清楚,而使用文字的表述会更清晰,不会产生歧义。

必选题,选填题,如果问卷平台,也只是用*号来表达必选时,建议在文字上也加上这样的说明

设定日程安排

整体问卷的过程需要时间,所以也需要的具体的日程安排,以便整体问卷的进行是井然有序。

日程安排中,要包括:

  • 确定问卷的目标人群、确定问卷目的
  • 问卷设计时间
  • 问卷评审时间
  • 问卷内测时间
  • 问卷投放时间、时间长度
  • 产出问卷报告

如何设计好调查问卷?这篇总结全是干货!

最后的话

调查问卷从准备到产出报告,需要一个过程,建议与其他设计师或 PD 来一起配搭工作,更高效的完成,一个人去做,总是会有一些盲点,并且会比较大的压力。

如果你在问卷方面是新手,也建议找个有经验的设计师或 PD 来做你顾问,减少一些不必要的坑。


文章来源:优设网       作者:箴盐设计



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


B端设计规范如何落地?

涛涛

“B端设计规范怎么落实下去是困扰很多设计师的一个问题,我总结一套从制作到落地的全部流程“。

在B端设计中,设计规范怎么建立才能落实下去之前一直困扰着包括我在内的广大设计师老铁们。设计师期望参与产品的每一个角色(产品,设计,前端开发,测试)都能遵循设计规范,结合设计规范内的内容,保证前端开发页面的还原度。因此从目标来说,其实设计师小伙伴与研发小伙伴的目标是一致的,但是实现起来其实并没有想象中的简单。在业务初始阶段对业务不熟悉,盲目就着手建立规范其实并不是一个明智的选择,很多B端的萌新小朋友会在业务尚未明确情况下就从第一个版本就开始制定设计规范,这会蕴含巨大的风险在里面,也不易推动落地。在初期有限的研发资源里只有了解了业务的实际场景,针对场景进行深度思考与分析,与规范涉及人员进行深度沟通统筹各方面资源,才能最后形成一套可以落地执行满足设计标准和业务需求的设计规范。


目录


01.B端设计为什么要制定设计规范?

02.什么阶段适合建立设计规范?

03.推动规范需要像需求一样去迭代!

04.B端的设计规范需要整理那些东西

05.搭建组件库你需要知道的几件事!

06.如何输出规范?

07.整理设计规范对个人的影响!






对产品来说

搭建原型可直接调用组件库,能搭建出高保真的原型。与设计师沟通更加顺畅,小的修改可以直接和开发沟通不需要通过设计师出图,极大增加了前期的节奏。



对设计师来说

当同一个项目由多个设计师共同协作时,由于设计理解不一致等各种原因都会出现设计控件使用混乱等问题,此时为了保证设计各方面统一性需要一份设计规范做引导。



对开发来说

按照设计规范建立好公共组件库,开发效率提升有了明显的提升,可复用的东西确定了下来不会频繁改动,设计走查的问题也会逐渐减少。



对测试来说

模凌两可的交互可以有地方看交互样式了,不需要再询问设计师。有更多的时间专注于测试功能上的问题了。






过往,设计师一般默认在启动一个项目的初始阶段进行设计规范的制作,具体时间点跟着版本节奏走。在1.0版本之前就着手规范的制作,其实这是很欠缺考虑的做法,其中蕴含着极多的风险因素在里面。此处分享个人工作中两个比较建议的规范建立时间点供大家参考。


2.1 业务处于探索期

在初始版本开发并未制定相应的业务组件。规范主要涉及到色彩,字体,间距,布局,栅格等通用设计原则以及常用业务组件的定制。此阶段搭建的规范具备高效性以及灵活性的特点,由于尚未搭建特殊的业务组件(当领导想要突然调转方向也不会很慌,改动较小就可以完成整体的规范转向)此时搭建规范组件库需要考虑到预留后续更改的空间。 


优点:灵活,满足业务随时更换的需求

缺点:体量小,仅能支持初步业务场景



2.2业务处于成长期

当业务已经迭代几个版本后,整个团队对业务的理解都不可同日而语。产品也正到了较为稳定的版本,此时若提出搭建组件库可以结合业务设计出符业务场景的样式,每个符合当前业务的组件逻辑和样式都不是初始阶段凭空想象出来的,当产品有一定的发展,有足够的业务逻辑,积累足够的业务场景,才能设计出有着自身业务的完善组件库。


优点:可以依据反馈沉淀组件库,发展到一定阶段整体变数不会太大

缺点:0-1阶段需要设计师对整体业务设计有比较足的把控力



我们公司在2020年初开启的项目,目前已经过了探索阶段处于向成长阶段过度,当时正值疫情高发整个项目都由我个人负责。现阶段整个公司在今年第四季度把系统性的产品和服务竞争优势提上了日程,毕竟没有设计规范对整个业务底层设计架构进行指引是很难做好产品差异化和规范化。也是趁此机会,设计可以针对性对现有的业务组件库以及规范进行一次全面的复盘,迭代出一个新的版本,在团队内推动落地以便更好适应产品的发展。




3.1做好产品定位

在B端的项目评审时,设计师就需要做好B端的用户画像,弄明白产品的目标用户以及使用用户的区别,他们通常并非同一类人。除了目标用户的差异外,不同用户的使用场景也是不一样的。只用弄清楚了各个角色的关系以及功能设计的逻辑,具体用户年龄,解决什么问题,才可以产出符合用户需求的设计。


3.2整理规范的内容和分类

在制定规范前,需要明确产品中主要有哪几种分类,将最基础的分类定义好方便后续针对分类内容进行整理。B端产品与C端产品既有共同性也有着很大的差异化,可以借鉴但是切忌生搬硬套C端的设计规范。




3.3排优先级嵌入版本迭代内

一套完整的规范蕴含内容是非常丰富的,将程序小哥的头发全部薅完也难以在1个版本迭代里面改完的。因此我们需要将自己作为设计规范这个项目的产品经理,针对现有的需求进行拆分,并排出优先级分版本迭代进产品里面,我们可以依据从大到小的原则进行优先级排序。对产品设计风格影响大的先排,影响小的后排。那么针对我们业务优先级排序是:设计准则>框架布局>组件>控件>场景。当然设计规范的制定不单单局限于设计团队内部,在嵌入版本里面时可与产品和开发多沟通,以便达到更好的落地效果。



上面的场景是否很熟悉,开发小哥每天都得忙很多的事情,如果不用线上文档进行同步的话,他们可能转头就会忘记哦~





4.1 页面布局


统一设计尺寸

据统计,目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900,以 1440 来设计的话是一个比较合适的尺寸,向上适配或者向下适配误差会比较小。



页面框架

主流页面框架主要分为左右栏布局和上下栏布局。


左右布局:顶部菜单栏、左侧菜单栏为固定结构,右侧主体内容根据分辨率进行动态缩放。

上下布局:顶部菜单栏为固定结构,主体内容进行动态缩放,需定义两边空白区域宽度



栅格布局

栅格系统的使用是为了解决自适应和响应式问题,从而更好地进行产品设计和产品开发。响应式栅格常采用 12和24 列栅格系统实现,以满足 2,3,4,5,6 分比布局等多种情况。固定宽度 Column,将间隔 Gutter 进行动态缩放。

  • 网格(Grid)

  • 栅格总宽度(Container)

  • 列和槽(Column&Gutter)

  • 边距(Margin)

  • 区块(Col-n)



我们的产品是在1440px的框架下进行设计的,采用左右布局的形式,将左侧菜单栏(100px)以及间距(24px)减去以后,就是自适应的内容区域(1292px)



4.2颜色/字体


颜色

主色的选择,需要依据使用人群,目标用户,使用场景,产品属性等因素综合进行考虑,在颜色使用上B端与C端的目的并不相同,C端颜色使用更大胆自由一些,以抓人眼球为主。而B端端使用则是以辅助产品功能为主,需要遵循对比原则,提升产品易读性。

小例子:以我们产品举例,在定义主色之前我向产品要来了关于用户人群的调研报告以辅助我去推测目标人群以及使用场景,并通过相关平台(七麦网)(艾瑞网)去找到竞品的行业报告。这些资料不仅可以帮你定义产品使用的颜色,还可以辅助你进行风格的定义,将这些报告放入评审的会议里面可以极大增强设计说服力和专业性。



通过鲸准与艾瑞网等数据相关网站可以轻松获取行业内的一些基本数据,这些数据足以让我们进行用户画像的初步建立了。



在规范好颜色以后,需要与前端进行同步,将颜色赋予单独的编号,方便双方就颜色上达成统一。如下图所示,一个编号对应一个RGB色值。



字体

B端页面可读性很大程度是由排版所决定端,而在排版中文字更是重点中的重点。


字体选择

在参考相关线上的成熟产品后,发现字体的渲染是一个很复杂的过程,首先我们需要知道在Web世界中存在着五大字体家族,江湖人称font-family:serif、sans-serif、monospace、cursive和fantasy。

font-family规定元素的字体系列,可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。



在实际使用场景中,用户的电脑一般是PC和Mac,但是这两个平台的屏幕材质、渲染方式都不一样,所以使用的默认字体也是不一样的。PC默认使用微软雅黑,而Mac默认使用苹方。

当我们打开一个网站,浏览器会读取font-family中的字体名称,并去检索用户电脑系统中的字体,如果有的话就显示,没有的话检索下一个。



字号与字重

字号的选择有多种方式进行参考,比如等差递增和等比递增的方式。我们自身在字体选择上选择由4为基数进行等差递增方式,在定义字号大小时默认采用偶数。



字重的功能是为了在文本种突出重点强调内容,在文本中常采用3种规格的自重(regular,Medium,Smlbold)

设定标题一律采用Medium

正文一律采用Regular,强调内容采用颜色区分大于字重去区分。

在使用字体时,我们需要判断其与背景色的对比度是否符合WCAG2.0的最低标准,即3:1,此处我们可以在创建文字样式时将标准标注进去。当我们使用文字样式的时候就可以随时提醒我们不要滥用。


4.3分隔与间距

在日常工作中,会常常出现多个小伙伴协同工作时采用的间距不一致的情况。虽然之前有进行口头上的统一(采用8px为基数)进行设计,但是还是会出现同一情况间距不一致的问题。在参照现有的成熟系统以后,依据亲密性原则与格式塔原理整理出符合现有业务的间距规范。




我会将间距分为竖向间距与横向间距。为了方便管理与沟通我会将他们进行尺寸上的区分(XS、S、M、L、XL)。


竖向间距:常用于模块与模块之间,一般采用24px,32px,48px

横向间距:日常设计中使用频率最高的间距,一般出现在组件与组件之间




4.4 图标规范

B端设计和C端设计里的图标无论是从功能,应用场景,图标的状态等方面都有非常大的差异,如果按照C端的方法去绘制B端的图标那简直是费力不讨好。在之前做C端的图标时常常需要考虑精致感与氛围营造,而B端图标功能则是降低用户认知为优先。为了方便图标端管理我将图标分为两大类型,分别为基础图标和业务拓展图标。且图标规定在3种尺寸分别为:XS=12px / S=16px / M=20px / L=24px以方便业务随时调用,且遵循偶数原则。


基础图标 :常规图标,复用性高且出现地方多

业务拓展图标:依据不同业务场景进行定制化的图标,常常跟着业务走


图标尺寸规范

与间距类似,将图标同等进行划分等级。12号字体搭配外框为12px 图标;14号字体请搭配 16px 的图标;16号以上的字体搭配 20px 图标,以达到更好的视觉效果:



keyline

通过keyline我们可以保证绘制不同形状的图标的一致性,在keyline的基础上画图标时基线可以给予我们一定的参考避免图标的比例失衡。可以说keyline是图标的栅格也不为过。



业务图标制作规范

除了常规基础图标外,针对业务场景制作的定制化图标如果不加以限制就会显得五花八门非常杂乱。当图标数量增加到一定程度时就会出现同一表意图标有不同的样式结果。因此有必要在保持图标美观易读的前提下对业务图标进行规整。




图标命名规范

随着业务增多,团队内之前的随意命名的习惯也开始凸显出弊端。在图标规范中,业务图标需要将每个业务区分开,每个业务都有着单独的后缀,这样可以让公用图标与业务图标更方便的溯源。



图标的图层整理

着业务线拉长,涉及的团队人员也越来越多。简洁整齐的图层不但能提升团队效率还可以让会影响接手工作小伙伴的心态。所以图层整理还是得纳入规范内的,此处不进行具体规范仅做提醒和警示作用。



图标交付/iconfont

在与前端开发沟通达成共识,图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)





5.1组件库到底是什么?

组件库常可以类比于常玩的乐高玩具,每个组件都是积木,而产品相当于我们拼好的模型。我们可以根据业务需求,以“搭积木”的方式,让“模型”快速拼起来。但是并不是说我们可以随心所欲搭建积木,至少需要看一看“说明书”,而这“说明书”就是设计规范。产品、组件和规范差不多就是这样的关系。


5.2搭建组件库前需要知道的小知识


原子设计/拆分

在业务已经发展到一定体量情况下,需要将项目中具备服用行以及拓展性的模块进行拆解,对于B端产品来说筛选的时候会依据之前迭代的版本内容,把页面一一罗列出来,将可替换与相似的模块提取,并利用思维导图的方式统一归纳,并做成可以被替换的组件。组件的替换建议合成一个大的排期进行替换,避免了线上组件不一致导致体验问题。

以我们产品为例:

依据产品类型将组件拆分为:基础组件 、业务组件、数据可视化组件、常用模块。




原子设计

将产品拆分后,此时得到很多可复用组件。我们再依据原子设计理论针对性进行拆解直至拆分出5个层面

  • 原子(元素、要素)

  • 分子(组件)

  • 组织(模块)

  • 模板(原型)

  • 页面(填充内容)

从原子开始重新依据定好的视觉规范进行更改,再由原子组成新的分子。



盒子box

在与开发小哥沟通设计规范制定的过程中,常提到他们写CSS样式的时候是采用盒子(box)去写的。通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。


走查时使用浏览器我们也可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。



5.2按钮

按钮设定有五种类型:主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。设计师可以依据自身业务属性,针对性修改按钮的圆角大小与描边,圆角曲率越大越柔越小越硬朗。除了按钮状态,在制定规范时还需要考虑到按钮的其他情况。比如按钮在放大使用时圆角曲率的变化。



按钮的尺寸规定

常用的按高度可设定为:24px、32px、40px、48px,超出48px的按钮都属于特殊按钮,需要进行单独设置的,宽度随着内容区域自适应。常规的按钮可分为:主要按钮(Primary Button ), 次要按钮(Secondary Button),虚框按钮(Dashed Button),失效按钮(Disable Button ),危险按钮(Danger Button),文字按钮(Text Button)等,对照着不同使用场景灵活运用即可。



按钮的自适应

按钮与按钮间的间距随着网页尺寸变化而变化,常设定几种断点规格进行选择。



5.3表单

表单承载着采集数据信息的功能,是用户在数据输入的核心模块之一。表单基础单位是由标签,输入框,填写提示,操作按钮构成。一行行列表单位组成表单界面。


常见的组合样式

据统计,表单内常见的组件样式有:文本框,文本域,选择器,开关,checkbox,radio,步骤条,上传/下载,标签页等。组件类别繁多,在选用组件时需要考虑其排布形式,在多列表情况下会着重描述这一点。


单列表单与多列表单如何选择?

在web页面内,在左侧导航条较小情况下会导致右侧输入区域空间较大,纵向空间不足的情况。若此时业务需求输入内容较多且难以采取分模块,分步骤交互时,采用双列或多列表单的形式提高空间利用率也是可以接受的。(ps:可以参照菲兹定律,采用多列的形式需要着重考虑文本框内容长度以及表单间间距的合理性)下面以自身业务为例子,列举在工作中多列表单出现的一些状态。




多列表单极端情况

采用多列表单后,随着复杂程度提升会出现各种各样的情况,此时设计师还需考虑到极端情况下表单显示问题。如标签过长规则(标签最好在最初阶段进行限制),带按钮如何进行换行,屏幕分辨率改变如何进行处理等。建议由设计师制定规则时与前端小哥进行深入沟通,以保证最终的落地效果。



让表单具有节奏感

之前我在表单宽度没有进行有意识的规范,导致整个表单呈现一种无序状态,通过有意识控制表单的宽度可以使我们对整体页面有着更好对把控,整体对品质感得到提升。可以对现有业务的表单进行梳理,整理出适合自身业务的表单长度单位。此处推荐阅读Ant_Design《整齐划一?不如错落有致》相信你会有更深的理解。



5.4 表格

表格,常用语展示数据,用户既可以在表格里面获取信息,也可以在表格内进行数据输入。相对于表单,表格可以进行多维度的数据整理与分析。其难点在于表格的组件交互联动多,以及数据展示的形式多。表格的信息密度很高是我们在B端页面设计中涉及最多的一个组件。


表格的构成

为了方便记忆,个人将表格分解为2大区域分别是:操作区域以及信息展示区域

操作区域:标题,工具栏,操作单元格

信息展示区域:表头,信息展示单元格,分页控件



表头与单元格

表头:表头分为带选框与不带选框/带icon与不带icon,需要注意的是表头上文字表意要清晰,简洁的表头能让用户更快明白此列的内容。此时需要与业务方沟通限制字数,若字数过长无法删减,则可以考虑使用tooltips。



单元格:在与开发沟通后发现,开发在写表格时并不与我们设计师的逻辑相仿,设计师在设计表格时是依据行与列的思维进行表格的设计,而前端则是通过许多的</tr>标签与</td>标签进行堆砌而成。因此在设计时将单元格规范好,前端将更容易还原好表格。



表格在页面中的样式规范

一般来说,表格内组件功能复杂,为了提升整体表格统一性与设计效率,我整理了业务上几乎所有的表格样式。整理需求后发现几乎所有的表格蕴含序列号与复选操作,故整理了一套通用表格规范以供小伙伴们参考。常规页面通过栅格,由列的数量决定列宽,与现在的主流框架组件一致;特殊页面可以与前端沟通后,在设计稿里面标注某单元格进行固定宽度,其他百分比缩放进行处理。



业务中表格的常见问题

此处仅提出几个个人业务中常见情况,更多的表格问题解决方案推荐查看CE青年《B端设计指南06 - 表格(下) 》。


有些特殊字段采取左对齐不美观该怎么规范对齐方式?

常规文本字段:可点击的字段、普通文本类、数字字母等,此类长短参差不齐的,建议采用左对齐的方式

特殊字段:日期、时间、字符数一致且比较短可控的,建议与表头居中对齐

业务字段:金额、状态标签、类型标识等业务性较强的,可根据相关特性与阅读习惯确定对齐方式


文本内容过长怎么解决?

当表格列数过多或者横向数据过长时,难免出现单个单元格内数据展示不下的问题,此时常采取换行的方式处理。(ps换行处理后的结果需要与后端沟通好,避免出现换行不分字段的情况)



单元格内操作项数量不一致时,该怎么处理?

此处建议采用平铺式进行处理,此方式适用方式比较广,稳定性较高(亲测)

将所有操作按照一定的预设排列顺序进行平铺,这种方式能够适应B端的大多数场景,将操作都简单平铺出来虽然看上去简单粗暴,但是在实际工作中,也是一种不错的处理方式



每一页表单展示多少行合适?

如果你经常与开发打交道你就会发现,开发对表格信息的处理逻辑是通过逐行从上到下进行渲染处理的。如果不对行数进行特定的规范,那么开发可能会采取渐进式加载(用户通过滚轮下滑的方式滚动到末尾再进行下一批量的数据加载)来解决表格内容过多的问题,这就会导致体验上的不统一。可以梳理当前业务,遵循尽量不让用户过多滑动为原则定制每页的行数。


5.5弹窗

B端业务中使用的弹窗主要分为模态弹窗和非模态弹窗,其最大区别在于对师傅会打断用户的操作流程,模态弹窗会要求用户必须给予操作。而非模态弹窗不会打断用户当前操作流程,仅仅起提醒用户的作用,非模态弹窗常常过一段时间会自动消失。



常见的模态弹窗有:对话弹窗,表单弹窗分,分步弹窗等

常见非模态弹窗有:通知,全局提示,警告提示,气泡提示,文字提示等




弹窗依据栅格自适应

为了方便规范系统内等弹窗位置和大小,将弹窗作为一个单独模块进行处理是一个不错的选择,业务中弹窗的性质一般都是横向居中展示。将弹窗纳入栅格体系中。前端小哥可以让弹窗的宽度随着列宽的大小变化而变化。



5.6组件库如何进行迭代

当我们把第一个版本组件库搭建完成后,对于它当更新和迭代需要依据业务当发展不断去维护。建议设计团队内有规划有目地去维护组件库当多样性,以保证组件库能随着业务的发展一起成长起来。因篇幅原因,此处遍不细讲此部分内容,如果大家感兴趣后期可以再单开一篇讲讲组件库的迭代流程,此处附上有赞的组件库迭代流程供大家参考。



小总结:组件库需要保持简洁和清晰,不能为了做组件而做组件。最好的状态是适合业务当前需求的状态,组件在于精细而不在于数量。臃肿对组件库不但不能提升整体团队效率,反而会拖垮整个工作的节奏。





搭建设计规范和我们日常处理工作需求类似,并非输出一份文档就结束了。我们还需要将做好的设计规范推广给包括设计小伙伴,PM和开发小伙伴的团队内外,并且需要得到团队内的一致认可才算是初步完成。


如何推广给PM

利益点:提升协作效率,减少工作成本


在启动设计规范的整理之前,内部宣讲让PM对于设计规范的搭建已经有了一个基础的概念。否则也不会分配资源给予时间去搭建整体的设计规范。可以通过提升PM与设计的效率和降低原型搭建成本去切入,通过组件库以及通用模版的搭建PM只需要极低的成本学习一下组件库怎么使用(我们的PM是使用sketch搭建原型)即可搭建高保真的原型界面。甚至完善好组件库后直接不需要设计的参与,开发通过原型组件库搭建页面。



设计团队内部如何推广

利益点:提升设计效率,减少人力损耗

设计规范一般由团队内小伙伴共同制定,基本上已经对规范的优势达成共识。因此主要讲讲如何更好在团队内部使用规范。


Library共享+更新日志

通过Sketch Library 共享组件库,并建立更新日志规范项目流程提升效率。



研发团队内容如何推广

利益点:封装组件,更少的更改,缩短研发流程


需要研发团队认可设计规范,前期前端的参与是必不可少的。在制作规范时设计师了解了前端开发的一些简单原理,前端开发也能及时了解设计师的想法,大家不再是各司其职而是串联起来共同协作,当规范确认下来前端就不会频繁改动组件,而且在有限的项目时间中。设计规范的统一极大缩短了设计和前端开发所需的时间,为后面的项目争取了空间。



小总结:本人时常听到一些小伙伴的反馈在公司内部设计师的话语权不够,公司不太重视设计。其实总结下来就是专业性得不到团队内的认可。设计师在工作中如何体现自己的优势是通过一次次的需求业务来体现的,许多小伙伴在做业务时既没有前期调研,也没有进行资料收集仅仅只是闷头开始动手做,往往结果不会太好。在处理需求时团队内部的同事也是可利用的资源之一,多与他们协作获取业务相关的信息,不仅能帮你站在全局的角度去思考这个业务,而且能让团队内部成员具有参与感,输出的结果当然更容易让他人认可。





收集信息能力

通过整理规范,需要收集目标用户,使用场景以及前期调研等众多资料,此时我们需要去发现信息以及整理信息。这一点在日常工作中也常常被使用到,日常中我们在做需要时也需要不断去挖掘相关对信息才能从容解决问题。


归纳总结能力

将收集好的信息进行分类整理,这要求需要一定对逻辑性。在设计基础框架时合理对分类可以协助我们处理好每个控件对层级,这项能力无论实在工作还是日常中都有着巨大对好处,可以帮助我们从一堆繁杂的事物中“提纲挈领”,换言之就是“化整为零”,做减法,提取出最关键对因素。


全面复盘能力

将信息归纳整理好后,需要对全局进行思考,全局的交互都需要考虑到位,比如什么情况下适合跳转页面,什么情况下适合给与用户弹窗。大体符合什么交互原则。除了对大体交互需要考虑到位,细节上也不可以忽视,比如异常情况,极端情况该如何去处理,组件之间该怎么去配合等。在日常工作中我们也可以逐渐有意识去培养此类技能,对项目全局思考的越多,那么对整体项目对把控能力也就越强,与他人合作也会越显得专业。


表达能力

在整理设计规范时,难免会遇到模凌两可举棋不定的时候。此时可以寻求向上或者向下的资源寻求帮助,具备良好的表达能力能迅速帮助我们将问题阐述清楚,我认为表达能力是设计师需要具备的重要技能之一。每次在求助它人或向他人汇报,都需要在全面复盘问题过后做到心里有数,将问题自己复述一次是否有漏洞或者没考虑清楚的地方。长此以往你表达的事情会更清晰,别人也更容易听懂你说的事情快速理解内在逻辑,那么说服别人推动工作的难度也会越小。


沟通能力

在多次与他人沟通,个人认为是对我本人帮助最大的能力了。我总结了几个和上下游沟通的小技巧希望能帮助到小伙伴们,在开始与他人沟通之前我们需要搞清楚我们沟通的原因与对象。


原因里面包含:

包含为什么要进行沟通?(推进项目还是告知)

想要达到什么结果?(自己能做多少妥协,底线在哪)

预判对方对这件事持什么态度?(支持/反对/无所谓)

希望对方做?自己的目的是啥?(求助还是说服)


对象里面包含:

和谁沟通?(上游还是下游)

他们对这件事了解多少?(比我多还是比我要少,需不需要简单讲解一些)

当然在沟通时还需要考虑方式和语气,这些都需要好后斟酌。也遇到过情绪不太好的开发小哥,这个时候反倒我们更不能将情绪激化,一般这些情绪化对态度过一会都会消散,可以采取冷处理等情绪过后换一种方式沟通看看。

文章来源:站酷   作者:Weiyehe 

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

设计师必看!如何精准还原设计稿?

之晨

编辑导语:在一个团队里,成员之间“协同合作”是非常有必要的,比如一些岗位没办法完全理解设计师的想法,多沟通可以避免一些不必要的摩擦;在出现问题时,现在自己的环节找找问题,再进行沟通;本文作者分享了关于精准还原设计稿的环节,我们一起来看一下。

UI设计师作为展示产品形态的执行层,产品上线前走查视觉与交互还原是必经环节。

设计师可能都遇到过一个问题,作图时连一像素的分割线都纠结好几次,但是开发完的效果却不尽人意,UI验收不通过;然后前端这边委屈的想拿出藏在键盘下的四十米大刀找你来血拼。

设计师必看!如何精准还原设计稿?

我们经常会听到身边的设计师与开发哥的一些对话,关于对齐、大小、间距等设计还原问题经常会讨论很久;甚至有时会觉得,几个像素的间距是不是有必要这么纠结?

01 了解设计还原

1.1 设计还原到底是什么

「还原」是指事物恢复到原来的状况或形状,互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差,进行设计校对。

1.2 设计还原的现状

一直以来,设计验收都不太受重视:

  1. 设计师习惯于把时间用在雕琢设计稿上,而忽略掉后期的设计验收;
  2. 对自己和合作的程序员极其自信,认为对方能知道到自己所有的点,会完全按照设计稿来。

不同的项目类型还原度也不同:用户产品>B端产品>后台;对于用户产品最好是能做到像素级还原。

1.3 设计还原的意义

在这个快速发展、迭代、更新的时代,互联网产品的用户体验重视度越来越高,而其中的产品设计还原也成为了工作流中重要的一环。

我相信每一名UI设计师,心里应该都有一个前端能100%还原设计稿的梦想,毕竟那是我们艰苦奋斗的劳动成果。

而视觉还原的高低与否,则直接取决于设计——开发——测试这些环节的协作质量;不仅仅影响上线产品的用户体验,还影响着作为产品设计最后一环的工作质量。

02 影响设计还原的因素

经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。

深究原因后,线上效果的失真率其实涉及到设计、前端开发、测试这三个环节,分析造成这种现象出现的原因大概有以下几点:

2.1 从UI设计上来说:视觉处理不规范

  • 自由发挥,把界面UI设计当作画布任意挥洒,完全不考虑实现的难度;
  • 标注图不全,没有详尽的对接文档和设计规范;
  • 沟通不到位,评审时没有将设计思路和易错点交代清楚
  • 没有考虑设计稿扩展性和前端代码的逻辑,反复修改,增加FE工作量。

2.2 从前端开发来说:没有理解设计逻辑

  • 时间紧任务重,没办法一张一张看标注图;
  • 直男思维,想怎么写就怎么写,反正最后要上线,细不细致都一样;
  • 不知道如何解决,内向不肯和UI沟通找到解决方案。

2.3 从测试走查来说:交付走查不细致

  • 测试混乱,测功能时提UIbug;
  • 测试页面还原时,提UIbug不细致,用“请参照UI设计稿”概括一切问题。

03 精准还原的前提

了解开发依据哪些规则还原设计稿,前期的准备工作是重中之重,设定好每一个细节规则,后期落地还原时才会将页面的失真率降到最低。

3.1 视觉规范

UI 设计中,设计规范是设计还原一个关键步骤;一个好的规范应该是高效的、简单易懂的。

设计规范通常可以把颜色、字体、组件等内容制定成规范,不仅仅保证视觉的一致性,也极大方便样式和组件的复用,后期的维护和开发;在规范的辅助下,开发在搭建全局共用控件时规则更加清晰明了,如按钮、行间距、字体大小、色值等等。

3.1.1 色彩规范

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

设计师必看!如何精准还原设计稿?

3.1.2 字体规范

文字是APP主要信息的表现,尤其是新闻阅读、社区APP等制定标准的设计规范和良好的排版方式,用户使用APP也觉得毫无疲劳感,这一点很重要。

不同的字体气质不一样,并且不同场景下带给人的感受也不一样;所以需要在设计的时候考虑到字体的设计效果,然后在设计规范中注明;主要规范标准字的大小,标准字要注意跟上文的标准色进行组合,突出APP重要的信息和弱化次要的信息。

设计师必看!如何精准还原设计稿?

3.1.3 图标规范

在 UI 界面中,具有标识性质的图形就是图标。作为 UI 设计中重要的设计模块,产品的每个页面中都有可能存在图标。

设计规范中,图标一般按照用途分为两类:应用图标、功能图标。

图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。

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

设计师必看!如何精准还原设计稿?

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

设计师必看!如何精准还原设计稿?

3.1.4 图片规范

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

设计师必看!如何精准还原设计稿?

3.1.5 控件规范

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

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

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

3.1.5.1 按钮

按钮有 5 个状态:正常、点击、悬停、加载、禁用。

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

设计师必看!如何精准还原设计稿?

3.1.5.2 输入框

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

设计师必看!如何精准还原设计稿?

3.1.5.3 选择

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

设计师必看!如何精准还原设计稿?

3.1.5.4 进度条

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

设计师必看!如何精准还原设计稿?

3.1.6 缺省页

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

设计师必看!如何精准还原设计稿?

3.2 组件规范

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

如果UI忽略规范,前端在不知道有可复用组件的情况下,很可能每一次都要手动书写代码;写的代码越多,遗漏掉细节和犯错的可能性越大,导致效率降低。

最关键的是——对于今后的迭代,前端又得一个页面一个页面修改。

设计师必看!如何精准还原设计稿?

3.2.1 组件的好处

设计师必看!如何精准还原设计稿?

统一性:

  • 整个产品不同模块的业务按照统一规范使用,提升整个产品的视觉交互统一性,减少开发样式,提升开发效率。
  • 避免设计师自由发挥新的组件控件样式。
  • 统一交互设计规则,减少用户操作的迷惑感,提升产品的体验。

高效性:

  • 一套组件可以帮助设计师简单处理产品经理的初步需求,设计师通过拖动组件搭建界面来跟产品经理对需求,确认完善需求后再进一步推进需求——节约时间,提升工作效率。
  • 减少制作组件控件的时间,不需要对组件重新下定义,提升设计效率,可将更多时间放在流程体验和设计推动上。

延续性:

  • 通过设计规范,在以后更新中可以连续迭代,避免断层。
  • 团队即使有成员离开或者加入,通过设计规范和组件库可以快速的接手和进行正常工作。

3.2.2 组件化的特点

  • 通用性:意味着足够基础和常见且不带业务属性,参与设计每秒的每个人都应该知道这个组件的功能及目的,同时一定一定扩展性。
  • 灵活性:是要求元件的组合需要灵活,可以在不同场景下可以通过相互组合来快速构建交互框架原型图,并根据不同页面结构的变化来适应新的业务需求。
  • 选择性性:指的是适用于多个业务或产品,在设计过程和研发过程中都可以高频转换。

3.2.3 组件化分类

我们根据当下现有的业务场景和对往后一段时期的业务发展方向进行规划,将组件库的组件类型分为通用组件和业务组件;一般业务组件库是不对外的,所以在Ant Design官网只能看到通用组件部分。

3.2.3.1 通用组件

指适用范围广,扩大频次高,可重复使用多个业务且不包含业务逻辑。某些导航栏,按钮,吐司,弹窗等。我们将通用组件细分为五个子类别:基础组件,导航,数据录入,数据展示,操作反馈。

设计师必看!如何精准还原设计稿?

2.3.2 业务组件

这类组件对比通用组件而言最大的特点就是包含了一系列业务属性,跟产品功能有重叠的关联性,因此影响到适用范围可能仅限于于1〜2个业务系统或特殊场景,且复使用频次不高。毕竟使用场景特殊也有限,放出参考意义不大。

2.3.3 组件化搭建流程场景

组件化的搭建在两种场景下进行:

1)产品立项前就开始组件化,在产品0到1之前,拥有一套组件和设计规范。设计师可以从以前项目的组件库和设计规范直接套用并修改,这样项目前期设计做起来更加方便且省时省力少挖坑。

2)产品经历过0到1后,产品趋于成熟,这个时候开始做组件化。组件化搭建最多会有六个步骤,分别为:梳理类目、场景走查、问题分析、方案设计、生成插件库、验证开发。

具体的组件化设计升级流程我总结成了下图:

设计师必看!如何精准还原设计稿?

当团队搭建完成组件化之后,接下来就是成员间的使用,这一过程有业务需求产生组件模板、组件模版形成页面、页面形成页面流程和页面流程形成用户体验。

组件库重建之初无法一应俱全,是需要后续设计师不断的维护与迭代的。

3.3 详尽标注

关于设计输出,现在很多像蓝湖、zeplin、Pxcooker这种标注软件把设计师从手动标注解救出来,往往把视觉稿在蓝湖一扔就完事,前端开发完界面视觉还原度还是不高。

因为标注软件只能负责生成元素的尺寸、样式,遇到复杂样式即使你反复衡量的一些像素,开发还是会漏掉——这样很有可能出现视觉灾难。

所以,一些复杂而又关键的页面我建议可以贴心的做些手动标注,主动告诉开发重要性和注意点。

我们现在工作中会有两种标注情景:

3.3.1 运营标注

因为很多数据是后台传输到前端,有图片、有文字,每个内容都需要给运营设置一个上传标准。

设计师必看!如何精准还原设计稿?

3.3.2 开发标注

开发标注是从设计稿落地成代码的主要参考,除了蓝湖提供的标注,我们还需要写一些重要部分设计说明,例如:模块区分、局部特殊设计(该内容根据自身产品而确定)。

3.3.2.1 常规手动标注

设计师必看!如何精准还原设计稿?

3.3.2.2 特殊模块/页面划分说明

复杂的表单设计,是很具有代表性的复杂页面,根据页面的布局进行原型化示例,帮助前端更好的搭建代码框架。

设计师必看!如何精准还原设计稿?

设计师必看!如何精准还原设计稿?

3.4 同步切图逻辑

关于切图,切图之前应跟开发确定好输出的格式和尺寸,确定应该用 SVG,一倍图或是两倍图,SVG体量小渲染质量好,单色使时还能替换颜色;PNG则通常用在实景图,一倍图和二倍图则根据实际需要进行输出。

如果要做分层动画,那我们就涉及到分层切图,如果桌面端和手机端样式差别较大,那我们需要和开发沟通好如何实现,是否需要特殊切图;所有的特殊切图合特殊样式,我们都应该提前跟开发沟通好。

设计师必看!如何精准还原设计稿?

3.5 了解开发思维

设计-开发这个环节的协作质量对视觉还原起着决定性的重要影响;但是,由于本身的工作性质,我们和开发之间沟通是个棘手又麻烦的历史遗留难题;设计师与开发鸡同鸭讲从而导致视觉还原度低下的局面,几乎每天都在上演。

俗话说“知己知彼百战百胜”,如果设计师能够了解一些基本的开发术语以及开发流程,就可以更好的打破沟通隔阂。

那网页设计稿的实现具体是怎样操作的呢?

步骤可以概括如下:

设计师必看!如何精准还原设计稿?

3.5.1 设计师的要了解的「盒子模型」

3.5.1.1 什么是盒子模型

在开发的工作流当中反复提到的盒子模型。虽然不需要完全了解前端是怎么通过代码来落地你的设计稿的,但你一定要知道什么是「盒子模型」。

「盒子模型」是前端的基础知识,在「盒子模型」理论中,页面中的所有元素都可以看成一个盒子,并且占据着一定的页面空间。

一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构,二是理解多个盒子之间的相互关系。

3.5.1.2 盒子模型的组成

每个元素都看成一个盒子,盒子模型是由 content(内容)、padding(内边距)、margin(外边距)和 border(边框)这 4 个属性组成的;此外,在盒子模型中,还有宽度 width 和高度 height 两大辅助性属性。

举一个真实界面示例,我们在浏览器中打开「开发者模式」可以看到网页的样式代码以及当前界面是如何通过「盒子模型」来布局的。

设计师必看!如何精准还原设计稿?

前端并不能简单的像UI画图时一样,随意地拖放一个可见元素到某一个位置;他们要通过把每一个元素装进一个「盒子」中,再去界面中定位它所处的位置。

3.5.1.3 了解盒子模型对于UI的好处

当你摸清了前端是如何布局实现你的设计稿后,你在作图的过程中就会开始懂得站在落地的角度思考问题,善用「盒子」,将界面中每一块布局「盒子化」。

我举一个示例,如果我们不使用「盒子」,当我们在做一个卡片时,前端并不知道UI是如何定义每一个元素的间距;比如,然后将这一个间距套用在他也不知道应该设置为多高的「盒子」当中。

设计师必看!如何精准还原设计稿?

所以UI在出稿时就带入「盒子模型」思维,合理地构思好每一块元素的布局,一方面可以帮助自己在输出页面时,布局更加合理;另一方面可以在前端落地时辅助前端准确还原。

04 精准还原的落地方法

优秀的设计离不开开发人员的落地支持,作为设计师,协同开发人员完成设计落地也是工作中重要的一环。

做好以下几点,站在开发人员的角度为他们“多想一步”,高质量的设计还原指日可待。

设计师必看!如何精准还原设计稿?

4.1 设计宣讲

在进行设计还原的时候我更希望大家把设计评审的环节重视起来,之前也有详细的讲到过《如何进行设计评审》的,因为我认为评审对于设计还原的意义是把问题前置化。

通过设计评审可以把改版视觉变化最大的地方和开发说明清楚,这些改版布局框架改变都会增加开发工作量;这个环节把握好了,那基本都能实现出来,特殊情况除外,比如前期忽略了一些后台数据的问题。

有些细微的地方需要我们特别像开发说明,也加深他们的印象,在实现时候就减少出错;像开发走读的时候,只把关键核心点,规则讲清楚;我们前面每走一步,都是为了后面我们检视还原度的时候要轻松一些,开发也轻松一些,就比如前期基础没打好,后面深入很难。

设计师做好会议记录(记录问题及解决方案,以及达成的共识),并且在会议结束后以邮件形式发送前端们,抄送产品和运营,确保会议内容的传达到位;让设计师与前端工程师相关问题达成一致,提升工作效率。

在开发紧张环节中,即使我们前面所有工作都准备好了,也很难避免开发不找我沟通;这时候我们要积极回应他们,并且和他们一起处理问题。

比如某些难度大一点的页面,开发实现效果和设计稿差异不小;那么这时候,开发会截一张他们实现的效果图给你看,这时你就要仔细去找问题,不要一口咬定就是开发的原因;先沟通具体原因,然后找出解决办法,如果是标注出现问题,比如标注标死了,页面不灵活,适配局限性很大。

4.2 视觉走查

在视觉走查的时候我们可以把test环境下的页面和设计稿拿出来对比,走查头部、尾部等位置是否完整统一,按钮样式、反馈状态、报错等样式是否统一;是否有缺少的场景和状态,根据任务流程对场景和状态进行排查,保证设计的完整性。

这里给大家推荐两个视觉走查方法:

1)大家来找茬法

验收的时候,我们需要把开发实现后的效果截图,然后再去和设计稿做对比。

我们可以直接把截图放在设计图上方,降低透明度,大致比对下,就知道哪里不太对,然后再具体标注需要修改地方的参数。

设计师必看!如何精准还原设计稿?

2)页面重构走查

走查还原的时候,在Chrome浏览器的空白处右键点击检查,找到里面的Computed窗口,我们可以找到具体的文字、间距、投影等属性。

有时候一些比较细微的调整,我们可以双击具体的数值进行调整,调整到自己满意之后再给到具体的数值给开发;这样就不用在我们摇摆不定的情况下,造成双方的困扰

设计师必看!如何精准还原设计稿?

4.3 交互反馈

4.3.1 确保可用性

设计任务流程,进行设计走查,在移动App端,我们所设计的应用是建立在手指点击操作的基础上进行使用的。

我们的手指不像鼠标一样能够精确定位和响应,所以我们需要在设计的过程中确保可点击的区域能够较为明显的识别。

设计师必看!如何精准还原设计稿?

4.3.2 确保易读性

文本内容是大部分产品的重要组成部分,所以文本的排版是非常重要的(很多人说中文排版不好看,那是因为你不会用中文排版的方式去做排版);确保文字清晰、易阅读是在文字处理上的必须保证的。

在众多设计原理中,格式塔原理一直被广泛应用,它可以很好的梳理界面信息结构、层级关系,从而提升设计的可读性;在自查过程中,我们可以通过格式塔原理检验页面中的元素是否符合标准。

设计师必看!如何精准还原设计稿?

4.3.3 反馈机制

当用户和产品需要交互时,会使用不同的模式反馈信息或结果,为用户在各个阶段提供必要、积极、及时的反馈,避免过度反馈,以免带来不必要的打扰。

常见的三种反馈信息如下,大家可以在此基础上自查是否有反馈、反馈是否传达清晰,是否对用户有即时的响应等细节

  • 提示信息:如警告、通知,常见形式 Alert、Badge、Popover;
  • 过程反馈:加载状态、录入反馈、确认弹窗;
  • 结果反馈:全局提示、对话框反馈;

设计师必看!如何精准还原设计稿?

4.3.4 动效还原

动效这块是产品中比较高规格的一个存在,所以在使用的过程中一定要谨慎,不能随意加入多余的动效,导致在使用产品的过程中出现问题。

4.4 观察敏感点

在我走查的经验多了以后,发现 最容易造成落地页面与设计稿视觉差异的,其实就是颜色与间距还有图标的视觉错觉。不要小看这两个细节元素,把控不好它们会让落地页面效果大打折扣。所以在进行页面还原的可以着重对比一下几点:

4.4.1 分割线

在验收的时候要特别注意分割线的问题,分割线是在所有屏幕上都是1px,但是很多程序员没有注意这个,或者说设计师在开发前没有特别说明;程序员就写成了1pt,因为pt是1x下的单位,px是实际单位。

所以在做分割线的是,单位需要是「px」,这样才能保证每个屏幕的分割线都是1像素。

下面主要以3个主要场景来分点解释分割线的标注:

  • 列表流;
  • feed流;
  • 内容块之间。

设计师必看!如何精准还原设计稿?

4.4.2 投影

阴影作为一个重要的视觉元素,让主元素和其他元素从背景中“弹出”并拥有深度,更好地将信息层级呈现给用户。

常规投影与弥散阴影推荐使用css代码完美实现;特殊情况下还需提前与开发人员沟通权衡各种方式的利弊,选择适合项目产品的实现方式。

设计师必看!如何精准还原设计稿?

结合自己实际的工作经验和与开发人员沟通的心得,实现弥散投影的方法,可以通过两个方法实现:

1)切图对接开发人员

虽然切图可以解决这个问题,但是切图也有一些弊端,因为每个卡片都使用切图的话,会使开发的包变大,可能会出现加载慢、闪退等情况,这些体验也是很糟糕了;所以在这个过程中的一些问题务必要提前与开发人员及项目人员沟通好。

2)CSS代码实现

常规情况下,效果都比较好,但是也会遇到一些遇到异常情况,比如不规则形状,通常用代码也比较复杂,这个时候需要提前与开发人员沟通切图情况,避免后期一些问题。

在做设计的过程中,我们需要更好地理解下游的工作,达到一个高效的沟通。

不管是哪一种方法,没有对错之分,关键是要懂得“权衡利弊”,提前与开发人员沟通到位;只要是适合自己公司项目且能够高效还原设计稿的方法,都是值得一用的。

4.4.3 文字行高

文本间距也是影响落地效果的关键因素之一,文本间距指的是——纯文本与其他元素之间的间距。

UI出稿时应该注意 文本行高可能导致前端的测量误差,文本间距主要的原因是 sketch 与 ios 系统中字体的行高不同;最简单的解决方法是通过手动调整 sketch 中字体的行高,业界常用的行高是字体 size 的1.2或者1.4倍,实际这两个值都是够不准确的。

首先我们要理解什么是行高(line-height)。

我以 Sketch 为例,当我们设置了一个70px的文本,Sketch 会默认给我们设置文本为98px行高,文本的上下会包含一定的空白像素。

设计师必看!如何精准还原设计稿?

如果UI不设定行高规范,落地过程中就会出现以下问题:

设计师必看!如何精准还原设计稿?

行高的解决办法:

面对行高的问题,我一般会在设计的过程中,输出规范行高(可以是x倍行高,也可以是具体的行高值,如28px的多行文本行高为40px),和前端进行对接落地。

最简单的解决方法是通过手动调整 sketch 中字体的行高,业界常用的行高是字体 size 的1.2或者1.4倍,实际这两个值都是够不准确的。

最近看到了一个新的公式可以同步开发根据字号设置行高。

设字号为x,行高=x+2ceil(x/10),ceil()的意思是向上取整数 L(行高) 比如:12 + 2 * ceil(12/10) = 16。

注意这里适用于单行行高,由于多行涉及到的排版问题不仅仅是行高带来的,有机会的话可以单独聊一下。

推荐DoraemonKit 是一个功能平台,能够让每一个 App 快速接入一些常用的或者你没有实现的一些辅助开发工具、测试效率工具、视觉辅助工具;而且能够完美在 Doraemon 面板中接入你已经实现的与业务紧密耦合的一些非通有的辅助工具;并搭配滴滴的dokit平台,让功能得到延伸,接入方便,便于扩展。

设计师必看!如何精准还原设计稿?

4.4.4 视觉重心修正

在设计上为了保证界面的视觉平衡,往往不是设计软件直接精准对齐,我们总是会通过调整间距、大小或者角度补齐一些负空间,让画面保持视觉平衡。

设计师必看!如何精准还原设计稿?

还有设计中通常向右箭头来表示模块入口,当我们把箭头和文字右对齐,箭头视觉上会更外突;这时候我们会往里面缩进1至2像素,但是切图完给完全不知情的前端后,设计师要主动讲解一下,或者写进规范里。

设计师必看!如何精准还原设计稿?

项目会有些需要展示logo的地方, 有的圆形、有的长方形、有的纯文字,尺寸差距比较悬殊。

这种情况下,我们需要给他限制一个高度,在这个高度以内,再根据logo本身的体量来调整图形的大小,处理好logo的视觉平衡。

设计师必看!如何精准还原设计稿?

4.5 考虑特殊场景

特殊场景在设计过程中常常会被忽略,等到在现实中碰到才会意识到缺失异常状态会非常尴尬,所以大家在完成主流程设计后,一定也要考虑到特殊场景。

大家可以参照以下几种场景对设计进行自查优化调整:

1)网络异常

考虑到网络异常情况时,通常产品会通过异常状态页面或者交互反馈来告知用户当前的异常状态和如何解决问题(解决方案引导、刷新、toast)。

2)服务器异常

服务器异常状况较少出现,时间也较短,通常不提示具体原因,设计处理方式为在新页面展示缺省页,文案+插画的形式给予用户提示及重试引导。

3)空状态

空状态指的是页面中无内容,主要的几个情况,设计师需要根据不同的场景给出文案+插画的表现形式引导用户:

  • 无权限,针对的是某些需要权限开启后才能获取内容的页面;
  • 搜索无结果,对应搜索无相应结果的空状态提示;
  • 内容为空,如初始状态、内容被清空后的状态。

4)内容缺失

内容缺失展示效果的考虑,设定页面图片缺失的占位图。

5)加载页面的表达方

考虑网络加载或者数据加载的时候会等待几秒钟,通常产品会有一个简单页面的占位图形式来减轻用户在等待时的焦虑感;可以是loading,也可以是整体页面的刷新动效。

4.6 关注机型适配问题

设计还原的时候最后还还看一下不同机型适配的问题。保证不同机型的界面呈现效果一致。

4.6.1 动态眼光

手机适配的时候很多设计师会遇到一个问题,就是在750*1335的屏幕上做的设计图;但是适配到640*1136的屏幕上就有元素放不下,所以设计师在出图时需要用动态的眼光去考虑问题。

知识点:在简单的界面中,由于本身界面的内容比较少,确定位置就会比较难,因为要考虑到不同的界面内容要怎么放才能保持视觉统一;这个时候可以先将界面中的信息分成不同的几个部分,先保证每个部分内的固定内容,再确定自适应的内容。

4.6.2 固定适配内容

在简单的界面中,由于本身界面的内容比较少,确定位置就会比较难,因为要考虑到不同的界面内容要怎么放才能保持视觉统一;这个时候可以先将界面中的信息分成不同的几个部分,先保证每个部分内的固定内容,再确定自适应的内容。

4.6.2.1 图标或按钮

设计师必看!如何精准还原设计稿?

4.6.2.2 搜索框

设计师必看!如何精准还原设计稿?

4.6.2.3 Y轴间距

一般来说,Y轴的间如果在相近的组件里,都会是固定的,不会有变化。

设计师必看!如何精准还原设计稿?

4.6.2.4 图片

像这种图片的列表或者,十字纵横的头像或文字,大小都是固定的,变得会是间距或者数量,如下图所示:

设计师必看!如何精准还原设计稿?

对于比较复杂的模块,快速找到将以上所说的固定因素和自适应因素,除了能够让标注效率大大提高之外,还能够找到合适的适配方法,避免出现开发完成后才发现某机型适配效果不理想的情况。

4.6.3 自适配内容

自适配内容也给大家梳理出来。

4.6.3.1 文字弹性适配

文字流指在多行文字的情况下,文字数量变化会影像页面布局和元素大小,如下图所示:

设计师必看!如何精准还原设计稿?

文字弹性适配一般涉及的是宽度适配,宽度适配普遍使用的是间距适配,即定好左右页边距,中间弹性拉伸。

当文字左右两边有内容的时候,我们需要标明文字可显示的范围,也就是说它最多能显示几个字——这种方式可以做到较好的适配,也是做快速常用的适配方法。

4.6.3.2 banner

这里说的图片是指banner或者feed流里的图片,适配的方法大多都是自适应,界面中的元素间距和数量不变,元素尺寸进行等比缩放,比较适用于固定比例;但尺寸随屏幕宽度变化的元素,如下图所示:

设计师必看!如何精准还原设计稿?

对于比较复杂的模块,快速找到将以上所说的固定因素和自适应因素,除了能够让标注效率大大提高之外,还能够找到合适的适配方法,避免出现开发完成后才发现某机型适配效果不理想的情况。

05 设计还原的思考

假设视觉还原上真的出了问题,首先要寻找原因,是自己没做到位?还是对方没理解你的想法?

我感觉可以按照以下几个方法去做:

5.1 提升设计输出质量

设计团队内部先弄明白改版的意义,画好标注色值、像素的示意图和文档,做好产品原型等任何能让对方不需纠结,直接可以上手的工作。

做好前期的准备工作,尽可能的多做思考,完善设计稿;尤其是边界情况,把自己的问题留给自己,这样可能产生的设计还原问题就会大幅减少。

多向开发同学请教,即便遇到技术确实难以实现的情况,不要逃避或者过于固执,了解具体原因,不断累积自己的技术知识;自己的专业、努力是赢得程序员尊重的前提,赢得他们的尊重你才能顺利开展工作。

5.2 提高设计师话语权

这是一个比较复杂而且需要长期努力的话题,每个公司都会有其实际情况存在,团队越大,情况越复杂。

设计师团队或者个人的话语权如果很弱,确实会面对十分被动的处境;首先需要说明的是,话语权是赢得的,而不是赋予的;想要改善被动的局面,要认清所处的环境,问题的症结,调整定位,并付出努力;只有证明了设计确实能够解决问题,甚至驱动商业价值,才会逐步提升话语权。

5.3 灌输用户体验的重要性

完成一项任务时最重要的是团队的思维模式是否统一,设计师在乎用户体验,工程师只在乎开发成本,那问题没办法达成一致是很正常的。

想要让大家认同你的看法,就要在平常不断的潜移默化影响别人;比如没事多跟公司其他人聊产品、聊体验、聊感受,慢慢给他们灌输体验的重要性。

只要你的话题有趣,人有趣,没有人会拒绝跟你聊;时间长了,整个团队的思路就会有所转变。

5.4 按照进度和优先级优化

设计师自己可以先按优先级去排布还原顺序,看这1像素是否对当前产品重要性。

在搞清楚产品进度、优先级的情况下,记录所有还原问题,自己标记优先级,整理完毕后一次性给他,再跟程序员解决方案和时间;也可以与开发同学共同摸索一套双方都能接受的清单模式,标明问题,修改建议,重要层级,根据实际情况详细说明或者简要说明,能够当面沟通更佳。

5.5 加强团队建设

良好的团队合作氛围是有效的润滑剂;好的合作关系如同一条战壕里的战友,哪怕多年后回想起来,也应该是一起冲锋陷阵的光辉岁月。

设计师应该认识到自己在整个项目流程中的位置,不卑不亢,把麻烦留给自己,不要推卸责任或者互相推诿,逐步打造自己的声誉和气场。

06 结语

一个优质的项目落地是各部门协同合作的成果,就像我们玩游戏,后期高质量的输出也需要前期优秀的辅助来打铺垫。

在“协同作战”的基础上,灵活运用规范、标注和走查的方法来主动推动项目的进行;不仅可以让设计稿得到最大程度的还原,也可以提升我们协作能力和对环节的把控能力。

任何问题只要多交流,会避免很多阻塞情况;出于设计师的角度当然都希望每一张视觉稿得到100%的还原;因为用户只看你上线效果,但是往往排期紧张需要一些取舍,我希望能在有限的时间内做到最好。

在后期视觉验收的时候,我们可以换位思考,把自己当做程序员,站在他们的角度去思考问题;怎么样的验收方式会更方便开发修改,减少重复返工的次数,情愿验收标注的时候多花10分钟,也要把修改意见写详细,帮开发节省时间,反过来也帮我们自己减少了二次验收的成本。


文章来源:人人都是产品经理     作者:郝小七



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



数据之美:地理空间数据可视化

之晨


地理空间数据可视化 (Geo Spatial Data Visualization) 是近年来兴起的一个热门领域,越来越多的政府、企业青睐于通过这种强视觉的形式来展示政绩与实力。市场需求的增长也吸引了越来越多的设计师投身于这个领域。而在这样一个细分领域,也对设计师的能力提出了全新的要求。在该领域,我们团队沉淀出一套固定且可复用的设计模式。





文章来源:tob.design     作者:三鱼先生



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



日历

链接

个人资料

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

存档