首页

互联网B端设计不可缺失的一项技能——视觉校验

ui设计分享达人


今天这篇文章,传授我在工作中关于校验的心得~





01.  在工作中遇到的状况

不管是在大公司工作、还是小公司工作,设计师常常会遇到这样的问题,在新产品发布之前,都会做一遍线上的ui视觉校验,在这个过程中,前端开发工程师所写的界面总会发生图片变形,文字字号不对,元素与元素之间不对齐的事情发生。


设计师给前端开发工程师标记了已经实现页面中错误的地方,但是多数前端开发工程师一听那么多头都大了,在紧张的上线日期限制下更有甚者不予理睬直接上线,用户吐槽设计不严谨,导致设计背锅。

为什么老板会觉得不好呢?其实是产品在用户体验的本能层次出现的不好的体验。


02.  好产品具备的特征

全球的认知心理学家(美)诺曼在《情感化设计》这本书中讲产品本能水平的设计——本能层;行为水平的设计——行为层;反思水平的设计——反思层。


如果把产品做的做为产品一个目标的话,我们可以利用产品五要素把产品划分5个层次,再用诺曼教授提出的感情感化设计的3个层次联系起来,并把这些情感分为5个纬度进行考察就可以得到下面这张知识网络图。

从上面这张图我们可以看出用户评判一个产品好坏的标准还是来自于产品的表现层、框架层、结构层中的直观体验也就本能层次和行为层次的感受,如果产品的吸引度、完成度、满意度、忠诚度、推荐度的数据很高也就证明产品很好,如果数据表现不好那可以判断产品还是有需要提升的地方。


回到第一张图片,老板觉得有问题的原因就在于产品在本能层次的不合格,那重点来了有什么设计方法可以避免本能层出现问题的情况吗?我的答案是可以使用设计走查这个方法。


03.  设计走查的意义

一名专业的B端设计师,并不是说你把设计稿做的很完美,把标注和切图完整的交给开发小哥哥之后就完事了,其实在这个阶段设计只是完成设计工作中产出效果图的工作,并没有进行最后验收的环节,如果开发还原出来的产品跟设计稿差距较大的话,设计其实也是要负很大责任的。


就好比工厂的流水线中一台电脑的生产,把电脑从工厂搬到运输车上也算是电脑生产完毕,但是必须要送到客户手里,客户签字确认,工厂才能算是电脑卖出去了,由此可见设计走查是保证用户有高质量体验的不可缺少的一个环节。


我理解设计走查的意义在于3点:

1、确保产品的设计细节的还原度合格,从而保证产品的视觉效果和交互体验能满足用户需求。

2、是设计师衡量设计师是否合格设计师的一项重要指标;

3、通过细致入微的专业设计素质赢得公司团队内部设计话语权的提升。


既然设计走查这么重要为什么大家还会忽视呢?其实大家对设计走查的看法有一个误区,如果你想成为一名专业的B端设计师,一定要改变以上的错误观念,摆正一个正确的设计观念。


设计师在公司代表着视觉上的最高水准,设计稿则是设计师专业能力的体现,如果一个设计师的能力是100分,设计稿的分值90分,开发实现后的产品分值为50分,在没有进行设计校验的情况下,这时候将产品发布出去,用户或者老板只知道该公司的产品设计只有50分,而不会知道背后设计师最高的水准是100分。


慢慢的设计师就会在开发团队中做设计变得很被动,越被动就会越没有话语权,所以对一名专业的B端设计师来说,除了拥有很强大的效果图设计能力之外,还需要有保证效果图落地能力。




01.  设计走查的种类

设计走查是一种设计层面找寻问题的方法,多数应用在找寻产品问题或者是对项目开发过程中的测试环节。具体的方式我归类为3种:


1)体验设计走查:是指人机交互之间的细节体验、比如非力度测试、满意度测试。可用性测试的调查这些方法都是体验走查的一部分。

2)交互设计走查:是指针对产品场景与场景之间的动态交互效果进行走查。

3)视觉设计走查:是指前端开发出来的静态页跟设计师出得效果进行视觉细节的校对和检查,确保开发出来的视觉和设计图保持一致。


02.  制作走查表的三种方法

设很多人会纳闷了,我们公司是没有这种走差表的那怎么进行这三种设计走查呢?这里告诉大家我的一个工作办法,总共分为3个阶段“寻找·借鉴”——“思考·定制”——“优化·完善”。


a.寻找·借鉴

当大家有一个知识的概念如果想更深入了了解这个概念就需要在网上找一些关于这个概念的信息,这个过程就是寻找。如果大家没有做过类似这种设计走查的经验,那第一时间也是去寻找,寻找设计走差的概念甚至是做好了的走查表用过工作中,那有人会有疑问那不是抄袭吗?我的回答“是的”,但是大家要想清楚一个问题,在工作中用最高效简单的办法是完成工作内容是最重要的。


可能还会有人问,别的公司和我们公司做的行业不同,那别人公司的走差表我们公司能用吗?我的回答是可以复用70%左右的,那剩下的30%就需要进入下一个步骤“思考·定制”阶段了。


b.思考·定制

当我们完成第一步之后,就需要做自己所处的行业或者产品有一个认知,思考我们的用户类型是什么,他们的使用场景是什么,他们最需要解决的需求是什么等等问题,然后在根据这些问题定制一系列体验、交互、设计的问题,那就成为了自己产品定制的一份设计走查表了。


c.优化·完善

任何工作都需要持续迭代,为了变得更好的适合当前的工作。比如在第二阶段定制的问题有些微交互动效果的问题前年是用户比较在意的,现在很多产品都有了微交互动效了现在还问意义就没有那么大了,我们的设计走查表也要根据互联网的大环境不断的进行优化和完善。



03.  产品表现层——视觉校验

设计走查和设计校验并没有大的区分,但是我理解设计走查是一个比较新型的词,设计走查的范围要比设计校验的范围大一些。


有些公司会把设计走查应用与改版之前当作找寻产品问题的一种方法,也有一些公司会把设计走查应用于项目做完开发在测试环节做测试的一种方法。比如在启动产品改版前可以通过“视觉设计基础自查表”来收集产品目前的视觉体验问题;

当项目处于即将上线在测试阶段时候可以使用“视觉设计基础自查表”来审查产品视觉实现层面是否合格,现在很多公司都用更简单的“设计校验问题记录”表格来把视觉问题记录。


04.  视觉校验需要审查那些纬度

设计校验验收表可以简单的理解为是用于审查产品表现层的“形状、色彩、字体、构成、质感、动效这六点问题的记录的表格。其实这六点也是诺曼教授提出的感情感化设计中本能层次和行为层次审查的六点。




再讲如何做之前,大家还是要先了解一下验收流程中的步骤。


01.  视觉校验做什么

这里描述两点一个是开发阶段、测试阶段的流程。

在公司的项目开发阶段:是设计师设计完效果图,进行标注(现在大家都是使用第三方标注软件比如蓝湖、摹刻、Sketch Measure 等),在交付开发。


在项目测试阶段:一般都是产品经理发起一个项目进入测试阶段的通知把设计师、开发、测试、和产品经理都设置为参与者,之后由测试人员进行产品功能逻辑的测试、设计师进行视觉验收;验收完成后产品经理验收测试结果,如有问题找开发进行修改;修改完毕再找测试、设计、产品进行确认,没问题就封版了,产品经理确认发版日期,如果还有问题就再修改。


02.  视觉校验的验收标准

很多刚入行的设计新手,在校验阶段不知道那些纬度的视觉差别,以至于很多视觉元素都需要查看,对于c端谁是来说界面的场景因为交互比较简单还能应付,


但是对于模块功能复杂、交互场景众多的B端ui设计来说每个场景都要查看很耗费精力工作效率也不高。


所以我总结以下几个高频出现问题的点供大家参考,大家可以按照以下几个纬度进行视觉走查,提高自己在工作中的效率。


a.检查设计稿的可行性

人无完人,再专业的设计师,也不可能100%保证自己的设计方案就是最好的设计方案,在交付设计稿前期设计师应该自我检查自己的设计稿是否能清晰的传递信息,对于一些重要的模块是否能凸显出来,对于一些比较复杂的交互场景开发是否能够实现,市场上众多的屏幕尺寸,这样的布局方式是否是最为合理的等这些纬度进行思考做设计,保证设计方案的可行性。

这里我举一个我真实的案例,起初我接到的需求就是设计一个模块里面信息排版,如果我采用我直接采用第一个方案那肯定是不行,因为信息层级区分不够明显,所以第二个方案把数字标签用颜色进行了区分,但是我又想如果出现文案比较多的场景,对齐方式都是左对齐那“指标值”的细心就不可能保持左对齐,所以我又出了第四个方案,目前来看第四种方案可是适应多种场景,算是最佳方案。


假设当时我就交付前端开发第一种方案,上线后出现问题,还需要调整到第四种方案,慢慢的前端开发就会质疑设计的专业能力,后续合作也会难以推进了。


b.组件调用是否正确

B端产品的业务复杂、,模块交叉设计数量多,所以在设计b端产品初级都是用原子化的思维搭建一个组件库,前端是开发阶段在样式库中写一个标准的控件样式,然后在不同的页面场景中调用公共样式,原理类似于我们在 Sketch 中搭建 Symbol。我们要从两个方面看组件是否调用正确。


1)公共组件是否正确

公共组件调用正确,好处就是公产品的整体视觉风格是一致的,比如页面的侧边导航,搜索场景、详情页场景布局是否一致,在断网或者报错的场景中出现提醒条样式是否一致。可进行交互的按钮样式出现的交互状态的按钮是否一致等等。


2)业务组件是否正确

在真实开发场景中,有一些前端开发在虽然调用一个样式,但是在设计规范中一个样式可能会有多个尺寸,比如这个按钮,在开发阶段避免不了出现样式虽然是对的,但是尺寸调用错误的情况出现,所以要查看一下组件的样式和尺寸前端开发是否调用正确。

按照这个思路去设计最为重要的就是要检查开发人员调用的组件库的规格是否是我们设计稿的规格,以此类推去整体的布局、按钮样式,报错样式。


这里需要描述的内容相对较多,以后有机会我可以再补充一份关于《如何搭B端建组件库》的文章,咱们详细聊一聊。


c.空间关系是否一致

空间关系可以简单的理解为模块与模块之间的“间距”关系和组件与组件之间“间距”的关系。


1)模块与模块之间——间距

所有模块(卡片)之间的间距,这里具体指的页面布局包括横向间距和纵向间距,大家可以采用4px(或者8px)的倍数进行删格布局,把删格布局的基础规范梳理出来,以这个规范当作标注来审查横向间距和纵向间距。


2)组件与组件之间——间距

另外一点就是我们在搭建组件阶段,组件与组件之间的间距关系是否一致,不要出现不对齐的情况出现。


3)为什么要用统一间距

大家了解空间关系都看那些纬度后,我们再来解答一下大家的心中的疑惑。总说要间距要保持一致,但是为什么要保持一致呢?主要原因有以下三点:


对于如何使用间距,我建议大家可以看一看《写给大家看的设计书》里面关于版式设计四大原则的讲解和有关格式塔原理的文章。



d.文案的显示是否清晰

在ui设计中,我们总避免不了与字体打交道,字体也经常是我们在设计中容易忽视的部分,影响字体的清晰度无非是字体、字号,字重,段间距这几个参数的设计。


1)字体

字体的实现其实是电脑渲染的一个过程,mac电脑默认字体是苹方,wids电脑默认字体是微软雅黑。在字体的选择里面行业里是有标准的规范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy这无种字体,前端在编写代码时候会把这种多个字体名称保存为“字体的回退机制”来定义,意思就是如果展示的设备(浏览器)检索是没有第一款字体就依次顺延使用下一款字体,这个大家只需要了解就好,在字体选择中使用频次最多的还是对数字字体的选择。


对于数字的字体设计要提前查看是否字体有版权。这里分享一个可以免费查询字体的网站:https://fonts.safe.360.cn/?from=bd

不同的网站对字体排序的方式可能不一样,有兴趣的小伙伴可以用下面这个的方法进行查看。


2)字号/行高

对字体的字号也要进行走查,因为在开发阶段在不同的浏览器种显示的字号会有变形的情况出现。


另外考虑各个浏览器的兼容问题,pc端建议使用最好的字号是12pt,因为12pt可以保证在现在市面上的浏览器种是可以清晰显示的,如果有特殊场景需要用到12pt以下的字号,需要和开发说明并且标注出来。


3)字重

设计区分文案层级的场景使用频率最高、视觉效果最好的设计方法就是给字体加粗的字体样式了。


这里要注意的是初级设计师的眼力可能还没有达到很高的水平,尤其是最小的字体显示加粗或者不加粗的效果视觉在电脑那么大的屏幕上感官并不是很明显,所以最好可以通过从代码的层面进行核对,具体方式可以看图:



e.颜色的选择是否科学

产品是给用户呈现面积最大的一个元素对用户来说感官层也是表现最为明显的一个元素,所以在校验中“颜色”是最容易造成落地页面与设计稿视觉差异的一个因素。


1)色差

因为大家屏幕的技术一般是LG屏幕(屏幕的使用时间越长色彩的还原度越低)。


虽然有的时候在查看代码时候色值是正确的,但是也要根据具体的场景进行分析,这里建议大家不要使用具有不透明度的色值(虽然在c端中经常会使用,有不透明度会使颜色比较透亮但是在B端产品中定位是工具,工具就要以效率在第一位,美观在第二位,所以这个场景的颜色使用尽量以清晰展示为第一准则。


2)颜色种类

b端产品中,柱状图、折线图的样式比较多,在设计这类图标时候尽量避免多种颜色的出现,还是因为B端产品定位的原因,太多的颜色设计势必会干扰用户进行判断。



g.图标的尺寸是否合理

不管是在C端产品还是B端产品中图标的也是高频出现的一个元素,图标本身的意思就是简化文字信息,通过图形去高效的传达一个固定的文案信息。


对于图标的设计走查大致分为两点:


1)大小

我们在设计icon图标时候,会根据不同的场景进行图标尺寸的规范输出,但是在真实的开发环境当中,开发在使用我们提供的插件(蓝湖)进行icon下载时候,会提供3种icon的尺寸下载,前端开发在使用切图时候往往会忽视掉图标的尺寸问题,对于图标的设计走查,是否图标使用的尺寸是我们设计使用的规范,所以第一个就要看大小是否能清晰的展示。


2)svg格式开发

因为pc电脑的屏幕尺寸、分辨率往往是高于移动端的屏幕尺寸、分辨率,图标的切片做的太小上传到屏幕上会出现模糊的展示效果,如果图标不能清晰的展示图标所呈现的图形,那就会造成用户一定的识别障碍,所以一定要保证图标不要有模糊的情况出现,尽量使用svg格式图标切片给到开发。



设计校验工作不能说难,但是有耐心有细心的设计师都可以完成的,一遍视觉校验需要1——2天的时间,相对来时比较耗费大家的精力。


换个角度思考,如果我们从项目开发的前期就控制设计走查的工作量,那我们可能会减少了走查的工作量。接下来我们就聊一聊怎么减少设计校验的工作量。


01.  了解需要视觉校验的原因

前面我们一直讲的是做视觉校验需要校验的维度,我相信更多的设计师还是希望把精力放在做设计效果图阶段,毕竟如何做只能单纯的提高我们的校验的效率,想要在开发过程中减少对项目的设计校验的工作,


我们需要清楚两个答案,一个是“在开发过程中为啥需要设计走查”和“开发不愿意修改的原因”。


a.谁负责实现样式

开篇我已经讲了设计走查的意义(原因),为啥要做视觉校验其实和设计走查的原因差不多,但是我想从开发流程再聊一聊。在一个产品开发中设计师下游需要对接人的人员角色统称为开发工程师。


但是在这类角色中其实也是会细分为三种角色:前端工程师、后段工程师、测试工程师。而前端工程师是我们主要对接工作内容的对象。

因为做项目多数情况是多人写作共同完成的工作可以从上面图片可以看出,前端工程师是实现我们效果图样式的主要人员。


b.前端工程师心里所想

前端工程师的工作内容需要一一查看设计师提供的标注,然后再一一去实现,所以难免不了心里会这样所想:好麻烦,如不我自己按照感觉写。


在真实的工作中,前端开发按照规范进行项目开发这种思路是对的,但是设计师强硬的要求前端开发工程师,按照规范进行开发是过于“理想化”的一种表现。


所以我们还是要先从自身出发,循循渐进的要求前端工程师按照我们的设计规范进行开发,这就来到我们下一个话题。


02.  如何避免呢

那么接下来我们来聊一聊身为设计师我们要怎么做,才能避免进入过多的设计校验呢。


a.了解开发实现原理

如果想成为一个高端进阶的设计师,我们要给自己增加筹码,那最为直接增加筹码的方式就是——站在开发者的视野看待问题,了解开发思维。


国内前端写样式的代码基本上是HTML+css,jacascript,注意这不算是编程,只是一个写样式的语言,简单的理解就是盒子模型(css语言)


1)盒子模型

CSS盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:

举一个图文模块的例子:图(1)是设计师输出的设计稿, 图(2)是开发需要的标注信息(我们实际给到开发的标注)开发需要的查看的就是色块的尺寸和色块之间的间距。



2)用框架化思维做设计稿

了解完前端制作咱们效果图的原理后,我们就要用这个盒子模型的概念,像是搭建房子的原理去制作效果图,所有的组件之间都是有理有据的,那这个专业术语就叫做框架化ui。


前端开发工程师通过一个个盒子填充来将我们的组件元素放入其中,最终形成前端展示的页面。

注意:标准的额框架化就像前面的盒子模型是一块一块制作的,考虑到开发同学开发阶段组件的嵌套逻辑。


3)开发者模式

如果还是不太了解盒子模型具体是什么的同学可以在线上使用下图的方法自己去查看。


设计师在视觉校验时使用浏览器就可以看到开发写的盒子,了解盒子也可以方便我们走查时知道问题在哪。具体操作步骤:



b.检查自己的设计稿

在给前端开发工程师的提供设计标注阶段需要提前保证自己出的效果图是有效的设计方案,符合基础的视觉需求,都能保证模块设计的可扩展性及规范化,避免定稿后在反复修改设计方案。


比如;当我们设计产品中的搜索条件模块时候,我们需要考虑在一行展示3个搜索条件,一行展示4个搜索条件或者一行展示6个搜索条件并且放不下的情况下,那效果的展示样式都是应该是什么样式的这列问题。

再比如,我们设计完一个场景的设计稿之后,还要考虑不同屏幕尺寸下这套效果图的布局是否能满足产品需求,如果不满足在那设计稿需要调整成什么样式的设计稿。



03.  做好标注文档

除了确保设计稿的可行性之外,还要做好设计稿的标准文档。如果项目是小版本的迭代就只需要进行简单的描述即可,如果是组件库的升级,那就需要 给前端工程师的标注文档,尽量是详细的、准确的。


包括设计稿、切图(规范的切图命名、压缩好的图片文件)标注、设计规范已级交互文档(包含标字体标注)。


a.描述到什么程度

那细致描述到什么程度呢?这里我简单的说几个点,比如:
·侧边导航栏在正常模式下、缩紧模式下,导航栏的宽度是如何变化的,
·如有有图片信息的上传,是什么图片比例是什么,是21:9‘16:9,4:3.1:1?
·如果出现文案超长的信息场景,不可展示的文案信息是什么样子展示,是文案后面是省略号展示?还是鼠标滑上去有气泡弹窗的展示样式。


b.图标命名的规范

随着业务增多,团队内对图标的随意命名的习惯也开始凸显出弊端,这种不好的习惯会造成同一类功能的图标会出现不同样式尺寸,所以我们在搭建图标规范时候,就可以把切片的命名规范好。


在图标规范中,图标需要有着单独的后缀,这样可以让公用图标与业务图标更方便的溯源。值得注意的是我svg格式的图标可以不用写切片的尺寸,而png的图标我建议写上切片的尺寸。

有些公司习惯于去icon进行英文的格式命名,左侧是我整理的比较高平使用的命名,文章末尾我会分享出来文字格式,供大家使用。


c.图标的上传

可以在开发前在与前端开发沟通达成共识、图标制作完成确认后,将图标上传到阿里巴巴图标库中,更方便前端调用图标大小和调整颜色。


如果开发需要自己去找到相关图标,也可以给予权限让开发从蓝湖上传图标(前提是得整理好图标到蓝湖上)。




04.  和前端开发工程师的沟通

在虽然很多时候项目的到发版本时间、验收标准团队内部都是由明确的规划和标准,但是有些问题还需要特别分析、特别对待:这里我就列举几点我在项目由几个比较重要的点。


a.进行设计宣讲

设计宣讲最大的意义就是加深他们的印象,提前大家心里都有一个预估,把一些规范标准类的问题暴露出来,把关键核心点,规则讲清楚,为了后面减轻设计走查的工作量,开发也轻松一些。


1)用认知对齐,目标一致

如果团队内部四个角色成员大家的认知都是一致的——提升用户体验是我们公共目标。


如果不一致,那就要说服其中一个角色,最好是项目负责人,说明校验影响发版时间,如果大家都按照规范去完成自己工作内容,可提高效率。确保大家理解一致:设计师要和开发、测试确认视觉表现层的验收内容、确保内容大家理解一致。


2)做有效的沟通

认真是前提、尊重是法宝。


在部分开发团队中,设计师的也不能太过于教条的对待自己的设计标准,毕竟开发生气请假不修改了,那就真的没有人可以进行代码的修改了,设计效果更是显示不了了在开发之前,就要和开发沟通,目前这些界面的效果在技术层面上是否能实现,针对比较复杂的界面场景,实现出来的代价有多少,权和利弊后在确定是否按照效果图进行开发。


针对复杂的页面需要把标注标记的更加详细,并且明确告知他们,我的删格在哪里说明,布局规范在哪里说明,在这个交涉过程中设计师就需要尊重他人工作成果,明确自己的需要做的事情,把问题描述清楚就好,不可要求开发同学100%还原设计稿、过多的干预别的开发团队的开发步骤和内容。


3)不必焦虑

前端开发工程师找我们沟通他们的疑问点时候我们要积极回应他们,并且和他们一起处理问题,比如某些复杂的页面,避免不了实现效果图不好的情况出现,这时候不要一口咬定就是开发的原因,先沟通具体原因,然后找出解决办法。


不必焦虑、遗留问题下一版再解决:开发人员在修改的代码的阶段,开发人员的效率是有限的,而且大家都是身兼多条业务线,在这种开发的场景中可以在不影响正常发版日期的阶段,把不太重要的视觉问题,放到下一个版本中在进行修改。


4)规划时间节点

而且在工作项目中也要注意分配自己的精力,我建议用对需求等级进行划分。

把问题的界面自己标记优先级,定期(每天定时)跟程序员沟通,跟他一起制定解决方案和时间。如果时间允许可以慢一点修改,只要改对了就可以,毕竟完成比完美更加重要。



对于设计校验的工具就一个原则:你开心就好,工具的最大作用就是提升工作效率,只要你觉得能提升你工作效率,你喜欢用啥就用啥。


如果还在迷茫用什么工具进行设计校验的同学,我把我使用的工具主要分类两类工具,第一类是发现开发问题和效果图的不符合的工具;第二类是针对如果高效记录、追踪问题的工具。重要目的就是提高设计师在设计走查中的工作效率。


01.  4款发现问题的工具

我在工作中发现很多时候开发不愿意检查自己代码样式的一个原因就是不知道以下四种工具,在很多公司里面前端开发工程师都是多条业务线并行开发的局面,没有更多的工作时间自己做设计审查,觉得又繁琐又麻烦,


这是时候我们可以提供工具给予开发,帮助他们提高工作效率。设计师同学也可以借助以下4款工具进行校验:

前三款都是Google Chrome浏览器的具体操作步骤可以看下面的图片,如果还有不懂的地方可以在评论区给我留言,我看到后会为大家一一解答。


至于“他山石”这款软件大家有兴趣的话可以在晚上直接打名称就会出来软件信息。


02.  记录追踪问题的工具

介绍完发现问题的工具后,咱们再聊一聊记录追踪问题的工具,有的人会问了,你前面讲了视觉校验都要看哪里,有推荐了视觉校验的工具来发现问题,我直接把需要修改的地方告诉前端开发工程师不就可以了吗?为什么还要知道这个记录追踪问题的工具呢?


a.进为什么要使用记录追踪问题的工具

在一些设计团队稍微成熟的公司里面由于项目的规模比较大,涉猎的模块多,参与的人员相对也多。


面对这种体量的项目如果不进行问题的记录的话,这周做项目里面的1号模块,下周做项目里面的2号模块,大下周要对项目里面的1号模块进行修改,然后自己就会发现1号模块当初的修改问题是什么忘记了,更有甚者都忘记一起协同工作前端开发工程师的名字了。


这时“记录追踪问题的工具”就显的尤其重要了,因为这种工具的出现可以帮助我们回忆起当初具体的修改问题和修改的进度,从而降低上线安全性的风险度。



b.TO DO LIST 思维模式

to do list是一种实际走查阶段使用的一种走查模式。


在设计走查阶段,主要由设计师发现问题、记录汇总递交到前端工程师这里进行修改和跟进,主要的优势是在于协助走查可以顺利的开展,不遗漏掉任何信息。


在输出的表格比较注重3点,问题需要逐条记录、需要截问题图片及描述修改正确内容、相关对接人员的名称和处理进度。

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

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


文章来源:站酷   作者:斜杠7湿兄

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

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



三孩政策都开放了适老化设计还会远吗?

ui设计分享达人



前不久看了阿里巴巴的设计周,其中有一个话题引起我注意“适老化”设计,今天就来聊一聊适老化设计的注意点。*文章末尾我会把阿里巴巴的演讲ppt分享出来,如果这篇文章能帮助到你,还请点赞、分享。





1 老龄化是一个全球趋势

据《世界人口展望:2019年修订版》的数据显示,到2050年,全世界每6人中,就有1人年龄在65岁(16%)以上,而这一数字在2019年仅为11人(9%)。

再来看看我国情况:因中国的人口基数庞大,中国目前老龄化进程是世界第一。我国的网民除了地域呈现从一线城市向四、五线城市的迁移之外,也呈现出偏向老龄化的特征。



2 三孩政策暗示老龄化时代来临

前不久国务院发布国家开放了“三孩政策”也看出来国家针对人口老龄化表现所作出的国家方针的决策。回归我们所在的互联网行业,也许慢慢的互联网的原住民不再是z时代的年轻群体,他会慢慢的向中年、老年人所迁移。

今年1月份国家也开始重视了关于老年人互联网生活感受,先后颁布了《关于切实解决老年人运用智能技术困难的实施方案》。通知在全国范围内组织了为期一年的互联网应用适老化及无障碍改造专项行动, 专项行动方案针对老年人、视障听障人士、肢体障碍人士使用app需求,进行改造要求,并且列出43个手机APP的适老化改造产品清单。



我体验了百度、支付宝、喜马拉雅、滴滴打车这四款app针对适老化项目的改版。



老年版还有一个特殊的名称,就是精简版。从产品的功能上进行了大量的精简,比如支付宝在老年版的模式中只提供了使用频次比较高的功能健康码、结账付款、充话费等功能,做到了功能上的精简。




我相信在未来的几年,我们的产品会有适老化的改版需求。听完我说这么多大家心中都会有一个疑问:哪些群体属于老年群体?生活中老年人用户数量比较少不了解他们的需求?针对适老化项目我们应该怎么改?


1.老年群体的划分

各国对老年人口的年龄界限的规定各不相同,有的国家规定为65岁以上,有的规定为60岁以上。 我国《老年人权益保障法》第2条规定老年人的年龄起点标准是60周岁,即凡年满60周岁的中华人民共和国公民都属于老年人。



2.老年人的需求有哪些

身边的人肯定会有上了年纪的人,回答这个问题前,咱们先说老年人和我们有什么不同, 其实当人类的生理年龄超过20岁,人类的老化过程就可以开始,老年用户最大的特点就是其五力—视力、听力、表达力、行动力和认知力的弱化,导致产品的可读性和体验型低,造成用户对我们的产品失望更有甚者认为我们的产品是一个糟糕的产品。



如果把这些需求进行整理,就会发现多数情况是用户的听力、视力和手部敏捷度下降造成用户的可读性下降,从而导致用户产生了不理解、犯错的操作。归根到底我们可以把用户的需求分为两种类型“服务需求”和“生理需求”。



3. 为啥老年人看不清楚

人的眼球就像是一部精密的照相机,眼之所以能看见物体,是因为照在物体上的反射光线,经过眼球的角膜、晶状体及玻璃体等屈光间质折射后,成像在视网膜上。

随着年龄增长人的晶状体会出现硬化、睫状肌衰弱的情况出现,造成物体不能很好地成像在视网膜上,具调查反馈在 40 岁时,只有一半的光线像 20 岁时一样进入视网膜。对于 60 岁的人来说,只有 20%。正是因为以上的原因,导致老年人的视觉分辨物体的敏感度、明暗感觉、空间感觉、色彩感觉的能力下降,有看不清楚的情况出现。



4 别让适老化的设计只有“大、大、大”

设计师是团队中唯一站在用户的角度考虑问题的人员,我们不应该只把适老化设计变成只是“大字版”的解决方案——加大字号、加大音量、加大屏幕尺寸这么简单。



5. 有规划的设计解决方案

凸显我们设计的专业程度应当站在用户同理心的角度,针对的为自己用户的群体设计一份专业化的设计思路,把需要解决分问题点都一 一梳理清楚,再动手制作设计图纸。



undefined


老年人眼睛最常见的问题是视力障碍,俗称“老花眼”,影响用户进行阅读。 如果老年人不会阅读它,或者如果他们无法阅读或理解它,那么拥有它又有什么意义呢?

我归纳出4种方法,大家可以按照以下归纳的设计方法和设计技巧来做适老化的设计改版。



1 字体

ui中的文字是产品界面中最重要的一个元素,我们先来看看关于字体的一些技巧。当产品中的文本给用户很难阅读的感觉,用户想阅读的意愿就会降低,还有一个场景细心的同学不难发现,当用户阅读时间变长了之后就会弯腰驼背,甚至眯起眼阅读,如果发现产品的用户出现这样的情况,那就要注意以下几点。

A 使用非衬线体

衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线字体(serif);没有衬线的字体,则叫做无衬线体(sans-serif)。

简单的理解就是非衬线体(例如黑体等)就是没有装饰性笔画的末尾,这种无衬线体也是被广泛应用网页端或手机端的产品,所以非衬线字体有醒目而且轮廓清晰的特点,是提升屏幕可读性的首选。

*注意的是在设计过程中避免使用多种字体或者精心设计的造型字体,因为这可能会造成用户混淆。



2 文本

随着年龄的增大,老年人可看到的视野也是变化的他会越来越小,所以在设计多字文本场景时候我们要注意以下两点。


A 文本字号不小于16像素

有资料显示12像素的字体可以正常阅读文本了,但是对于大多数读者来说,12 像素仍然太小了。即使是 15 像素也会让原本可能会转换的访问者望而却步。

为什么文本字号要设计为16像素呢?有研究表明在我们屏幕上 16 像素的文本大小与印刷在书籍或杂志上的文本大小相同,这很符合人的阅读习惯,但是人阅读还有一个因素是不能忽视的,就是人和屏幕之间的距离。



举一个例子,我们读书都是手捧着书,印刷字体通常设置在 10 点~12点左右,考虑到用户距离屏幕的距离其实和显示器上16像素的字体大小相同的。(一般前端开发会使用em单位进行字体大小开发,这个可以保证在不同分辨率上字体的比例,设计师只需要了解即可。 )



*浏览器的默认字体高都是16像素,除非特殊情况,通常情况下字体不建议使用10 像素。

*任何阅读类或点击类的内容都应该按一定比例放大,尤其是在设计按钮上面的字号,应该尽量保持较大,不少于16像素。



说一个有趣的事情,我发现在印刷中小至 8 像素的字体是可读性和成本之间的理想折衷方案,我查阅了相关文章,是因为过大的字号会浪费纸张造成印刷成本增加。在 Web 上,不需要为更多空间而支付任何费用,考虑的是给用户高效的传达文本信息。


B 添加设置字体大小的功能

现在很多系统中都会有调节字号的功能,如果在资源条件充沛的情况下可以开发类似的功能,方便用户自己进行设置调节。下图是苹果系统自定义文字大小功能。



3 颜色

任何设计都是离不开色彩的那么接下来让我们看看在颜色的选择上要注意那些情况。


A 使用和现实生活中认知一致的颜色

老年人通常会用经验去判断一个事物,尤其是与外国人相比中国人更习惯以经验来思考问题,所以我们在做设计时候要尽量降低老年人的学习成本。比如我们生活中常常会见到十字路口的红绿灯,绿色代表通行,黄色代表等待,红色代表禁止,我们在设计重要提示时候也可以借鉴这种方式去设计,保持和老年人现实生活对色彩的认知是一致的。



B 避免使用蓝色

前面已经说 老年人对对比度差异的敏感度降低、区分相似颜色方面变得更差。尤其是无法分辨蓝色和紫色之间的区别,对绿色鉴别能力下降更明显。

考虑到老年人眼睛对蓝颜色的阴影不敏感,那么就要降低设计中使用蓝色和紫色相互配合的场景,比如背景、文字、图标、图片等模块。



C 找到最合适的对比度

使用具有高对比度级别的配色方案使页面更具可读性在颜色的对比度上,可以根据WCAG2.1(Web Content Accessibility Guideline,Web内容无障碍指南)设计颜色的对比,比如把重要的文字信息的对比度设计到AAA,次级的文字信息的对比度设计到AA。



在适老化设计中,色彩对比度要在4.5:1之上,即对比度达到 AAA级和AA级,让界面中的信息与其背景间的关系对比度较大,才能足以让老年人看清信息。



如果不了解怎么判断对比度是什么级别,我建议大家可以收藏下面的网站。只需要把色纸填入到软件中,就可以看到两个颜色关系的对比度。



4 交互

人在手机上的交互手势会有很多种,根据不同的业务场景,我们使用的交互手势也不相同。 大致分为四类:单击(tap);长按(long press);双击(Double Tap);长按&拖拽(long press & Drag)。



这么多交互手势,机器需要先判断你是什么手势再根据手势指令给出相应的反馈。

当手指贴合上屏幕的时候,反馈的热区,并不是均匀向四周扩散的,而是向下的扩散。对于触摸中心点,在触摸的过程中,就会有向下的一个偏移,如图:



例如在iOS内的手势识别,有一个专门的接口来做识别:PanGestureRecognizer,这个接口会在10px内先判定手指移动的方向和距离,再对具体触发的手势来做定义。



A  大的间距

在移动端,按钮尺寸根据手指触摸屏幕的最小点触区域,平均长度在10-14mm之间,指尖的长度为8-10mm,所以10mm x 10mm就是一个最小触摸目标尺寸。在iOS 人机交互规范里面的 44*44 point是Apple HIG建议的手指点触最小点触面积。所以我们可以在不同设备不同 PPI 时处理尺寸,在移动端设定点触尺寸的最小点触区域大小来设置按钮尺寸的大小。



·移动端:按钮高度35px-50px之间,字号13pt-17pt,圆角4-8

·web端:按钮高度24px-48px,字号12-18,圆角6-10



因为老年人的手指偏大,反映变慢,就要需要把相关按钮的大小、组合的间距等设计的足够宽大,方便用户点击;一些操作反馈的时长也需要拉长,给老年人足够的反应时间。建议至少保持在8像素以上的间距。



B 点击好于输入

基于以上因素考虑,对于老年人群,选择类的交互和输入类的交互相比,用户的效率会大大提高,所以点击类交互要好于输入类交互。



C 符合用户心理预期

这里我列举一个苹果的案例,苹果在设计积极按钮的时候通常会放到布局的最右侧,举个例:

这里有“取消”和“确认”两个按钮,对于业务方来说判断“确定”是积极按钮,所以在设计这样的弹窗时候 会把“确定”放在最右侧。



5 具体的内容


A 形象应更加真实

老人对设计师的样式判断不是那么清晰和明显,设计师尤其是在制作活动banner场景中,使用具象的图像往往会比插画的图像信息传达更为直接。



B 图标加文案

人与人之间的认知水平是存在差距的,老年人的认知水平相对较低。比如在图标的设计方向,可能一个通话的图标会有手提电话和座机电话两种表现方式,但是真正使用那种图标就会给用户产生误区,最好的解决办法是用“纯文字加图标”的形式表达是最为合理的一种方式。



C 色彩更有辨识度

对于部分的用户来说,有好的色彩更能增加信息传达的辨识度。比如我们在把图标虽然加上了文案,用户第一眼看上去还是撞色处理的方式更好。



D 有引导性文案

对于老年人,我们可以运用潜意识作为界面中的隐形向导,确保视觉提示清晰,帮助产品顺利完成目标行为。



老年人的理解能力也会比常人要弱一些,对于一些文案或者专有名词要描述具体,便于用户进行理解和做出选择。研究发现带有目的性的行动文案要好于描述类的文案。



6 语音功能的加入

语音功能也是辅助老年人的一项功能点,通过语音搜索直达某个功能等。比如在搜索场景、客服场景、查询场景等等。

值得注意的是在设计之初要考虑以下几个场景:

·适当地增大音量、使接收的声音更加清晰。

·添加声音反馈机制,如果声音发送成功,应该给予正确的声音提示。




1 验证的范围

其实验证设计是否成功和我们正常做项目的思路大致相同,无外乎从比如产品体验,用户服务,产品功能这三个层面进行跟踪反馈。



2 验证的指标

目前都是通过定量测试的方式,进行可用性指标来进行衡量的。我列举了四个纬度,方便大家进行借鉴和衡量。

任务成功率:用户能否顺利的完成任务,解决用户需求。

任务完成率:用户多快能完成任务,耗费时间多久,多数情况用于衡量效率。

任务出错率:在用户完成任务的路径出,用户出错几次,用于衡量出错频率。

用户满意度:用户完成任务后,用户对产品的功能进行打分,用户衡量用户的满意程度。





其实国家提倡的适老化设计,我们可以设想另外一个话题——为老年人做设计等于为更多的人做设计。



1 无障碍设计在互联网产品中的应用

如果你使用的是苹果MacOS系统的操作系统,你可以看到苹果在这种老年人(无障碍)设计中的功能设计,比如苹果的辅助功能中的设计选项,有兴趣的同学可以体验一下。



其实在国内的互联网产品公司也有做过无障碍的设计,比如小米发布的MIUI系统中的无障碍触感设计,有兴趣的小伙伴可以自己下载去体验。



2 开拓自己的知识面

其实网上有很多关于无障碍设计可以借鉴的参考文献,比如W3C无障碍指南(WCAG 2.1)就是其中一款,WCAG是Web Content Accessibility Guidelines 即web内容无障碍指南有兴趣的同学可以查询一下。



很多设计规范网站都会有关于无障碍设计的介绍,有兴趣的同学也可以查看。



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

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



文章来源:站酷   作者:斜杠7湿兄

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

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



app界面赏析+图标分享 ——— 北京蓝蓝设计 移动端UI设计资源分享(二十八)

前端达人


App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时又面临无限机遇,唯有不断的学习才能滋生出源源不断的设计灵感,站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么,除了提供简单好用的设计工具,我们也整理了非常多的优秀设计案例,希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题,我们以月为单位,整理了国内外设计师的优秀APP界面设计案例,我们是搬运工,更是好设计的传达者,希望你会喜欢。

接下来为大家分享精美的app UI设计案例:



WechatIMG2026.jpegWechatIMG2027.jpegWechatIMG2028.jpegWechatIMG2029.pngWechatIMG2030.jpegWechatIMG2031.pngWechatIMG2038.pngWechatIMG2037.pngWechatIMG2036.pngWechatIMG2035.pngWechatIMG2034.jpegWechatIMG2033.jpegWechatIMG2032.pngWechatIMG2039.pngWechatIMG2040.pngWechatIMG2041.jpegWechatIMG2042.png





--手机appUI设计--

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



  更多精彩文章:

      手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

       手机appUI界面设计赏析(九)

        手机appUI界面设计赏析(十)

       手机appUI界面设计赏析(十一)

      手机appUI界面设计赏析(十二)

      手机appUI界面设计赏析(十三)

      手机appUI界面设计赏析(十四)

      手机appUI界面设计赏析(十五)

      手机appUI界面设计赏析(十六)

      手机appUI界面设计赏析(十七)

      手机appUI界面设计赏析(十八)

      手机appUI界面设计赏析(十九)

      手机appUI界面设计赏析(二十)

      手机appUI界面设计赏析(二十一)

     手机appUI界面设计赏析(二十二)

     手机appUI界面设计赏析(二十三)

     手机appUI界面设计赏析(二十四)

     手机appUI界面设计赏析(二十五)



app界面赏析+图标分享 ——— 北京蓝蓝设计 移动端UI设计资源分享(二十七)

前端达人

App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时又面临无限机遇,唯有不断的学习才能滋生出源源不断的设计灵感,站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么,除了提供简单好用的设计工具,我们也整理了非常多的优秀设计案例,希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题,我们以月为单位,整理了国内外设计师的优秀APP界面设计案例,我们是搬运工,更是好设计的传达者,希望你会喜欢。

接下来为大家分享精美的app UI设计案例:

jhk-1623378361587.jpgjhk-1623378458458.pngjhk-1623378929226.pngjhk-1623379179475.jpgjhk-1623379189278.jpgWechatIMG2009.jpegWechatIMG2010.jpegWechatIMG2018.jpegWechatIMG2016.jpegWechatIMG2015.jpegWechatIMG2014.jpegWechatIMG2013.jpegWechatIMG2012.jpegWechatIMG2011.jpegWechatIMG2025.jpeg




--手机appUI设计--

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



  更多精彩文章:

      手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

       手机appUI界面设计赏析(九)

        手机appUI界面设计赏析(十)

       手机appUI界面设计赏析(十一)

      手机appUI界面设计赏析(十二)

      手机appUI界面设计赏析(十三)

      手机appUI界面设计赏析(十四)

      手机appUI界面设计赏析(十五)

      手机appUI界面设计赏析(十六)

      手机appUI界面设计赏析(十七)

      手机appUI界面设计赏析(十八)

      手机appUI界面设计赏析(十九)

      手机appUI界面设计赏析(二十)

      手机appUI界面设计赏析(二十一)

     手机appUI界面设计赏析(二十二)

     手机appUI界面设计赏析(二十三)

     手机appUI界面设计赏析(二十四)

     手机appUI界面设计赏析(二十五)

     手机appUI界面设计赏析(二十六)



WordPress默认编辑器遇到意外错误的解决方法

前端达人

好不容易是用wordpress搭建好了我的网站,找了几个不错的插件提升了一下性能,也解决了安装主题时出现的各种问题,终于能够正常地使用了。正当我兴致冲冲地打开文章编辑器,正打算开始写我的第一篇博客的时候,又有一个意外的错误出现了——那就是wordpress的默认编辑器古腾堡。



我上网搜索了好半天,好像大多数人都有遇到这个问题,古腾堡是WordPress十多年来第一次更换的全新的编辑器,从他的外观来看,确实是十分的舒服,功能也似乎很完善,可惜还是有些小bug。









网上主要的解决方法有三种:



1、切换浏览器。他们都说换成谷歌浏览器的时候就不会出现这个问题了。但是我一开始用的就是谷歌浏览器,所以对我不起作用。



2、清楚浏览器缓存, 这个我也照做了,也是没有什么效果。



3、安装Classic Editor 插件,我就是采用这个办法解决的。而且Classic Editor 插件可以切换区块编辑模式和经典编辑模式,虽然经典编辑模式十分的丑陋,而且用的也不是特别舒服,但是我意外地发现,区块编辑模式就是原来的古腾堡编辑器,在安装了插件之后,原来的意外的错误就再也不出现了,而且当我把Classic Editor禁用了之后,也仍然不见原来的报错。



虽然问题是解决了,但可惜我刚开始使用wordpress,还没有开启错误日志,所以也不知道这个问题到底是为什么出现,在网上搜索了好久,也不能确定我这个问题到底出现在哪里。



反正结果还是好的,就先在这里埋个坑吧,以后再遇到的时候再回来补充!


另外,如果你有兴趣,或者是有问题想要与我探讨,欢迎来访问我的博客:https:mu-mu.cn/blog 作者:贪玩的木木 https://www.bilibili.com/read/cv6589030/ 出处:bilibili

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

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


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

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

还不会标题设计?这个方法很好用!

seo达人



设计大多是服务于商业的,或许我们会遇到很多奇葩要求,但我们要学会留给自己一些空间,去发现设计中的乐趣,这样才不会觉得枯燥乏味。今天的文章会着重讲解AI自制画笔与字体设计如何结合。今天的案例虽然是刚刚过去的端午节,但是掌握了方法,下一次标题设计,一样好用。

 

大家都知道端午节也叫端阳节,那么我们就以端阳节为主题进行设计,先把文字整理好。

图片

 

 STEP 01 > 分析属性 

接着我们分析字体属性,作为中国传统节日,端阳节有两个显著的特征,那就是粽子与龙舟。

图片

根据分析出的属性,我们确定字体设计的风格方向,笔画我们可以用粽叶的特征。

图片

 

 STEP 02 > 设计字体 

下面画出字面框确定字形的横竖比,重心偏低;字体的笔画粗细保持一致。

图片

将制作好的画笔拖入到画笔框中,选择艺术画笔,就得到了五条横线的画笔。

图片

接着垫字在字面框里将文字做出来,可以看出还是遵循了方块字的做法,只是笔画特征发生了变化。

图片

接着我们将部分笔画替代,增加特异性,同时调整字体的大小和部分细节。

图片

到这里字体基本就设计完成,接着我们需要对字体进行编排,增加的元素有云,粽子,粽叶样子的舟,都是用混合工具做成的,这样整体风格更匹配。

图片

 

 STEP 03 > 搭配颜色 

然后就是搭配颜色,这里我想到的就是粽叶的绿色,那么我们填充好将文字变成白色就完成了。

图片

OK,设计做完了,可以看出自制画笔他本身具有的优势,由于固有相同的特征,会在笔画细节处理的时候更方便,同时还具备设计感。这个方法是比较常用的,希望大家多多练习

 

原文地址:

作者:趣趣熊


转载请注明:学UI网》还不会标题设计?这个方法很好用!


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

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



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

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


如何安装WordPress主题

前端达人

在Envato Tuts +的代码类别中,我们涵盖了很多   内容。 范围从诸如如何使用一些最新JavaScript框架编写代码到如何通过诸如WordPressOpenCart之类的内容管理系统实现某些目的 。

因为我们倾向于将大部分内容集中在已经对计算有一定程度的了解的人们,所以我们经常假设在开始教程之前已经做好了某些准备。

例如,有时我们假设您在进入实际框架之前已经掌握JavaScript的知识。 或者,也许我们假设您在开始有关如何使用新库构建Web应用程序的教程之前对PHP或Ruby有一定的了解。

在我们发布的“ 如何做”文章中,我们正在努力提供教程,向读者提供建立和运行特定软件所绝对必要的步骤,尤其是那些与很多软件兼容的软件。在Envato市场可用。

如果您有兴趣使用WordPress构建网站,那么您应该对WordPress主题应该有一个有效的定义,并且对如何安装WordPress主题有一个实际的了解。

了解WordPress主题

在了解如何安装WordPress主题之前,让我们定义WordPress主题应该是什么。 我区分这从一个WordPress主题什么,因为你经常会发现,做更多的比他们应该的主题。 如果您选择更改主题的设计,这些主题将很难尝试其他主题。

我将在稍后详细讨论。

什么是主题

现在,让我们使用WordPress Codex中提供的定义:

从根本上讲,WordPress主题系统是一种“蒙皮”您的Weblog的方法。 然而,它不仅仅是一个“皮肤”。 对您的网站进行外观设计意味着仅更改设计。 WordPress主题可以更好地控制您网站上材料的外观和呈现方式。

从此定义中得出的主要结论是,WordPress主题提供了您网站的演示。 也就是说,它负责使您的网站或博客具有特定外观。

它会影响您所看到的所有内容,设置内容样式以及影响字体,配色方案等。

主题锁定如何?

安装WordPress主题时,请务必注意其提供的功能。 现代主题通常不仅仅包括演示。 也就是说,它们引入了功能。

功能可以定义为任何可以改变主题行为的东西。 例如,假设您的主题在帖子编辑器屏幕上提供了某种类型的搜索引擎优化选项。

并且由于这不在表示的范围之内,因此被认为是功能。 如果主题提供了类似的内容,那么您就有遭受“主题锁定”之苦的危险。

它是这样工作的:安装一个主题,它不仅提供演示文稿(例如上面概述的SEO功能)。 如果您选择将站点更新为提供完全相同的SEO功能实现的新主题,则会丢失它。 所有的。

您可能会得到一个很棒的设计,但是您已经失去了为主题提供所有SEO信息的工作。 因此,您要么被锁定使用与开始时相同的主题,要么面临使用新主题并失去所有工作的麻烦。

最终,主题应该包括这种类型的功能。 功能保留给插件。 这是我们将在另一篇文章中讨论的内容。

现在,请记住主题应该全部与演示有关。 如果您可以使用主题锁定,那么选择一个可以提供很多功能的主题可能就可以了。 但是,如果您希望最终不时更改设计,请尝试坚持严格遵循修改网站外观的主题。

安装WordPress主题

话虽如此,现在我们可以讨论安装WordPress主题所需的过程。 实际上,有两种方法可以执行此操作:

  1. 您可以从WordPress中安装主题。
  2. 您可以通过S / FTP安装主题,然后在WordPress中将其激活。

尽管第一个选项可以说是最简单的,但我们将在本指南中介绍这两个选项,以确保为您提供了最全面的信息。

请注意,本指南假定您已经在计算机或Web主机上安装了WordPress。 我们将逐步完成获取主题并通过WordPress或FTP进行安装的过程。

话虽如此,让我们开始吧。

下载WordPress主题

网上有很多地方可以下载WordPress主题。 但是,从任何地方下载主题并不总是安全的。 审查主题提供者的声誉很重要。

这超出了本文的范围; 但是,从WordPress主题存储库Envato Market中选择主题不会出错。

出于本教程的目的,我们将使用免费提供的第二十六主题。 首先,我们将从WordPress中安装它,然后我们将了解如何通过S / FTP安装它。

对于以下步骤,我假设您是从WordPress仪表板开始的:

WordPress仪表板

无论您选择使用哪种方法来安装主题,这都是我们开始本教程步骤的地方。

从WordPress内部安装主题

要从WordPress本身安装主题,请单击“ 外观”菜单,然后选择“ 主题”选项。

主题菜单项

从那里,您将看到所有已安装的主题。

安装的WordPress主题

接下来,单击屏幕顶部的添加新按钮。 从这里开始,您将进入一个如下所示的屏幕:

添加WordPress主题

注意 页面顶部的“ 搜索主题”字段。 在此字段中,输入“ 二十十六”(不带引号),它将返回以下屏幕:

二十六

之后,单击选项以安装主题。 之后,WordPress将为您提供预览主题或激活主题的选项。 对于通过S / FTP上传主题的用户,也将提供相同的选项。

因此,目前,我们将看一下通过上传文件来安装主题的必要步骤。 如果您对以下替代步骤不感兴趣,则可以跳至下面的“ 激活主题”部分。

通过S / FTP安装主题

此版本的主题安装假定您熟悉术语服务器,端口,用户名和密码。 它还假定您熟悉wp-contenttheme目录。 如果不是这样,那么最好的做法就是坚持上述方法。

但是,如果以上都不是行话,那就继续吧。 就本演示而言,我将使用Transmit作为我的S / FTP客户端; 但是,请随时使用您喜欢的任何客户端。

首先,我们需要从WordPress Theme Repository下载二十一十六 。

WordPress主题存储库

一旦您单击Download ,这会将主题的zip文件放置在您选择的目录中。

二十六档案馆

接下来,您将要提取存档。 这将在包含zip文件的目录中创建一个包含所有主题文件的子目录。

主题目录

之后,连接到您的Web服务器并导航到WordPress安装的wp-content/themes目录。

上传二十一十六

上载提取主题文件时创建的目录。 从那里跳到WordPress仪表板,然后导航到“ 主题”页面。 您应该看到《 二十一岁月》的副本   出现在主题列表中。

此时,无论我们如何安装主题,我们都准备好继续激活主题。 就是说,如果您选择使用S / FTP或选择从WordPress中安装主题,则会为您提供相同的选项集。

所以做吧。

激活主题

通过WordPress下载主题或通过S / FTP上传主题之后,便拥有了激活主题并更新网站外观所需的一切。

获得主题之后,应该为您提供激活主题的选项:

激活WordPress主题

在这里,您可以选择 实时预览以了解如何更改当前内容,或者您可以单击“ 激活”继续进行设置。 我选择与后者一起使用。

完成后,您将看到以下屏幕:

激活的WordPress主题

从那里开始,您应该能够像在安装此主题之前一样继续使用WordPress。 这意味着您可以继续添加帖子,页面,类别等。

根据主题,您还可能有机会更新标题图像,背景图像等。 请注意,这取决于已安装的主题。

要确切了解您的主题提供了什么,请务必参考文档。

结论

如您所见,安装WordPress主题是一个相对简单的过程,尤其是从WordPress应用程序中进行安装时。 即使您对使用FTP客户端的过程感到有些恐惧,一旦上传了文件,激活主题仍然相对容易。

其次,请注意区分想要的主题类型很重要。 您是否想要一个具有很多功能而您永远都不会改变的主题,还是想要一个与一组插件完美配合,可以独立于该功能更改网站外观的主题?

无论哪种情况,您都应该拥有选择主题,安装主题并以最适合自己的方式激活它所需的一切。

最后,如果您要寻找适合几乎所有情况的主题主题,请务必查看Envato Market中提供的功能 。

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

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


部分借鉴自:csdn  

原文链接:

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

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

让设计更有价值——设计流程指南

资深UI设计者

随着设计团队规模扩大,人数快速增多,但每个人都带着自己以往工作经验和习惯,

一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。

所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值:



从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。


1.需求分析


我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。



背景分析


目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。



用户分析


目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。



竞品分析


目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。



需求评估


目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

           对不同类型的需求,我们都可以用5个问题去评估:

           1.是否可被证伪?

           2.目标是否明确?

           3.投产比如何?

           4.是否有更优解法?

           5.是否有可预见风险?

           基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。



目标对齐


目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、创新项目型。

           针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。



2.交互设计


在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。




设计原则


目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。



流程梳理


目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

           1.功能是否完整?

           2.链路是否流畅?

           3.步骤是否冗余?

           4.是否易于理解?

           基于以上问题,我们可以用自身的专业储备去推动流程的优化。



原型优化


目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

           1.架构是否符合目标

           2.层级是否足够精简

           3.信息是否传达准确

           4.状态是否有所缺失

       在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。



3.视觉设计


视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出准确且高质量的视觉页面。




设计情绪板


目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。



设计语言


目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。



典型页面


目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。



4.设计系统


在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。




基础规范


目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。



图标库


目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。



组件库


目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。



5.落地跟踪


在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。




设计评审


目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。



设计验收


目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。



数据验证


目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。



设计复盘


目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。



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

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


文章来源:站酷   作者:酷家乐UED

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

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


什么样的设计才是好设计?

资深UI设计者

编辑导语:设计师在日常工作中经常与其他同事有些分歧,比如产品不理解你的设计,觉得页面不够好看等等,那到底什么样的设计叫做好设计呢?本文作者分享了关于“好设计”的定义以及分析,我们一起来了解一下。

有同学问我,说做设计好难,领导和产品不懂设计,每次给看设计,都说觉得丑,改了受气,不改又说态度不行,那么到底什么是好设计。今天和大家聊聊到底什么是好设计?希望这篇文章可以帮到你。

一、什么是好设计

做设计这么久,我们先来看看什么是好的设计?好的设计到底是如何定义的。

1. 得过设计大奖

主管每次看我作品就说:好丑!

▲一组无印良品海报获得了由日本平面最高奖项——龟仓雄策奖,被誉为日本设计界的「奥斯卡终身成就奖」,代表着日本平面设计的最高水平。画面仅用色彩和几何图形的结合,完美构成了人在自然中露营的和谐场景。

主管每次看我作品就说:好丑!

▲可以看到海报中有湖泊、蓝天、山脉、森林和露营帐篷,而整个视觉效果是用废纸板制作表现出来的,可以说非常有创意了。同时和整个商业很好的结合起来。

主管每次看我作品就说:好丑!

每年德国举行的红点设计大奖,有「设计界的奥斯卡」的美誉,是全球工业设计和发展趋势的风向标。

主管每次看我作品就说:好丑!

▲德国的红点设计也是让全球设计师狂热的奖项,徕卡相机除了价格昂贵,在设计上也是独具匠心,获得过很多设计大奖,非常有代表性的大奖设计,同时商业上也很成功。

主管每次看我作品就说:好丑!

▲自2015年发布以来,Apple Watch已经成为生活中必不可少的电子设备,获得了无数设计大奖。

主管每次看我作品就说:好丑!

▲除了工业设计,韩国我很喜欢的设计公司Plusx也获得过很多红点设计大奖。

主管每次看我作品就说:好丑!

所以判断一个设计是不是好的设计或者商业设计,获得过大奖是很重要的一个评判标准。

2. 符合好的设计原则

主管每次看我作品就说:好丑!

在众多设计准则中,其中特别受广泛推崇的是Dieter Rams)所定义的“好设计的10个原则, 也即德国博朗公司设计十项原则。

1)Good design is innovative

好的设计是创新的

主管每次看我作品就说:好丑!

▲日本设计大师深泽直人设计的这把伞,在伞柄弯曲的地方有一个小凹槽。当你在雨天去超市买完东西,提着袋子去乘公交车或者地铁的时候,这个凹槽刚好可以在你站着的时候为你充当一个挂钩的角色。这个设计非常自然又贴心,又有创新。

2)Good design is aesthetic

好的设计是美的

主管每次看我作品就说:好丑!

▲产品的美感是实用性不可或缺的一部分,因为每天使用的产品都无时无刻的影响着人类和我们的生活。但是只有精湛的东西才可能是美的。比如苹果iMac的设计,无论从第一代的半透明,到今天的超薄,无不是完美的设计,在各种电影,MV里,即使遮住了苹果的LOGO你也知道是苹果的产品。

3)Good design makes a product understandable

好的设计是易懂的

主管每次看我作品就说:好丑!

▲好的设计自己会说话,简单易懂,比如无印良品这个CD机,即使是老人和小朋友都会使用。

4)Good design is unobtrusive

好的设计是克制的

主管每次看我作品就说:好丑!

▲很喜欢张小龙对微信的设计理念定义,克制带有约束的,就从微信开屏来说,其它是APP早已经商业化了,而微信的开屏多年如一日。

5)Good design is honest

好的设计是诚实的

主管每次看我作品就说:好丑!

▲不会故意夸大产品的价值,而是强调功能本身,也不会去欺骗消费者。比如现在很多广告,特别电商里面,比如我经常买的这款牛奶,从广告点进去第二件0元,兴冲冲的加入购物车,发现还是原价。

6)Good design makes a product useful

好的设计是实用的

主管每次看我作品就说:好丑!

▲无论APP也好,还是工业产品设计也好,都是用来用的,必须满足基本的功能,好的设计会去强调实用性的同时也不会忽略细节,比如无印良品这个电饭煲外形圆圆的很可爱,同时还很多贴心细节,比如有凹槽放饭勺等等。

7)Good design is long-lasting

好的设计是经得起岁月的考验

主管每次看我作品就说:好丑!

▲这些产品或许随着时代发展消失了,但是它们的设计永远不会过时,和设计趋势不同,它会成为一种文化,一种理念,博朗和苹果早期的作品在今天看来也是经典。

8)Good design is thorough down to the last detail

好的设计是考虑周到并且不放过每个细节的

主管每次看我作品就说:好丑!

很多产品的设计,很容易在用户关注地方做的很好,在用户忽略地方做的很粗糙,就好比我们去了一个商场,一楼都是各种名牌,高大上,但是去了洗手间,去无法下脚;这种体验估计用户不会再去第二次,所以极致的设计不会放过每一个角落。

9)Good design is environmentally friendly

好的设计是环保的

主管每次看我作品就说:好丑!

▲瑞典品牌freitag,以卡车车篷为材料的袋包作为材质,具有独特的二手感,以及独一无二的花样及颜色,设计好用同时兼具环保。

10)Good design is as little design as possible

好的设计是尽量少的设计

主管每次看我作品就说:好丑!

▲简洁,并不是简单,因为它浓缩了产品所必须的具备因素,剔除了不必要的东西。“大道至简,平淡为归”比如图中这个时钟设计,兼具美和实用,同时没有一个多余的设计。

3. 好用且销量高

主管每次看我作品就说:好丑!

另外很重要一点,什么是好的商业设计,就是好用而且市场反馈好,用户好评多,比如苹果系列产品,设计本身获得很多大奖,同时商业价值好,销量很高。

主管每次看我作品就说:好丑!

同理还有戴森的产品,以黑科技为卖点,无论推出的吹风机,还是卷发棒都销量非常的高,所以好的商业设计需要具备上述所说。

二、产品设计好的设计标准是什么?

主管每次看我作品就说:好丑!

了解了好的设计标准,回归到产品设计,那么什么决定视觉设计的标准呢,UI设计的标准又是什么呢,UI设计视觉元素有木有对应的表达标准。

特别是在一些大公司,每个设计师的视觉表达手法是不一样的,那么有哪些统一的设计标准么,在我认为一共有以下这几个设计标准:

1. 标准的网格系统

1)PC网格

主管每次看我作品就说:好丑!

网格的重要性就不再详细说,谷歌,微软,苹果,Naver,阿里都将网格系统作为设计的标准。明确网格系统,它是设计指南里非常重要的一部分,当然网格也不是绝对的,也是可以在基础上变化。

通常,在Web设计中一般采用12列作为网格标准,因为12列可以轻松的分成6列,4列,3列和2列。

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲PC中12栏网格运用案例,整个页面会更加统一和标准化,有规律可循。

主管每次看我作品就说:好丑!

▲网格是很多公司建立标准的准则,特别是响应式设计运用上。

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲reddit的官网设计也是采用的12栏设计,很好的将页面进行布局。所以如果你做网页或者PC设计,网格一定是一个好设计的基础准则。

2)移动网格

主管每次看我作品就说:好丑!

移动端一般采用6列网格,因为大多数产品6列就足够了。6列在页面中也很容易3等分或者2等分,6列也是比较常用的一些布局方式。当然也要看场景像淘宝,电商可能需要12列,因为页面密度太高了。

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲Pin的界面网格系统,可以看出它们是运用一个6列网格系统,所有的图片各占3列,按钮占六列,每个页面的左右边距相同。

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲airbnb采用的左右边距48,中间24的网格系统,可以看出这套栅格系统留白会比较多,所以我们在浏览airbnb的设计时候会发现他们页面会非常舒服原因也是如此,airbnb设计和体验都非常棒。

主管每次看我作品就说:好丑!

我们再来看看被称为规范鼻祖的谷歌在最新的设计语言中,第一次把栅格系统提出来讲,谷歌的产品覆盖手机,web,以及平板,那么谷歌是如何去用栅格系统来定义它们产品体系呢?

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲谷歌的栅格系统除了传统的边距和水槽,内容区域外,同时也定义了4栏,可以看出谷歌也是第一次重点来讲解他们的网格系统。

2. 合理的比例关系

主管每次看我作品就说:好丑!

比例关系非常重要,可能同样的内容,合理的比例和不合理看起来会相差甚远。所以好的合理比例准则也是衡量一个设计好坏的重要标准。

主管每次看我作品就说:好丑!

说道比例不得不提黄金比例,是由几何学的创始人Euclied定义的,大概在公元前300年前。黄金比例值是1.618,但是也有人质疑说,这里比例不是绝对。用黄金比例作为设计依据不合理。我的观点是,黄金比例可以当做设计参加的基础,但不是绝对的数字。

主管每次看我作品就说:好丑!

▲苹果设计中,运用黄金比例作为整个APP图标的设计准则,在苹果很多设计中都可以看见这种比例的运用。

主管每次看我作品就说:好丑!

▲还有很多知名互联网公司的品牌设计都运用着黄金比例。

主管每次看我作品就说:好丑!

▲Facebook的官网设计比例,也是采用的接近黄金比例作为布局方式。

主管每次看我作品就说:好丑!

主管每次看我作品就说:好丑!

▲谷歌的material规范中有讲到,如何定义布局。统一按照标准的比例16:9,3:2,4:3,1:1,3:4,2:3等标准的比例去做设计布局,来统一整个设计。

所以,好的比例规则规范,是设计中非常重要的。我们的设计都应该遵循这种有规律的比例。

3. 文字的易读性

产品设计中,文字信息节奏处理非常重要。我们应该通过各种手段去提升文字的易读性。

1)通过对齐方式提升易读

主管每次看我作品就说:好丑!

▲上图是一个简单的示范,3种不同的阅读感受,如果阅读节奏没有做好,没有对齐,那么阅读效率就会变的低下,我们来看看上图用户是如何阅读的。

主管每次看我作品就说:好丑!

▲拆解上面的方案,你会发现不同的排版,用户看的方式就不一样,如果你间距过小,用户就很难阅读。间距过大也会出现难以阅读,所以必须在合理的比例下面设计的阅读性才会更好。

2)通过文字大小提升易用性

主管每次看我作品就说:好丑!

▲大多数信息都是由标题,副标题,正文组成。所以在组织信息的时候,可以通过文字大小,字体粗细来加强信息阅读。苹果还把黄金比例用于字体上。每个字体大小的对比都是1.7和0.7左右对比,非常接近黄金比例。

3)通过对比提升易用性

主管每次看我作品就说:好丑!

▲运用对比也是提升易用性经常用到的手段,比如通过文字大小对比,文字的透明度对比。但是要注意互联网的文字的可访问性,推荐使用web无障碍标准4.5:1

主管每次看我作品就说:好丑!

▲苹果的官网设计,就是将文字信息运用到极致,如上图通过文字大小,文字颜色,文字透明度等方式,让信息阅读起来更加流畅。

三、最后

关于设计的准则有很多,设计的准则目的是让我们的设计更加和谐,它是一个参考标准,但是又不是绝对的,你可以理解为它是一把尺子,这把尺子是保证设计有一个基础。



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

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


文章来源:人人都是产品经理   作者:sky

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

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


峰终定律,揭露用户宁愿长痛不愿短痛的秘密

seo达人



用户体验的本质其实是心理学在科技产品的运用,需要的是让技术顺应人性。我在读人机交互硕士时,学的也都是些心理学的研究成果和方法。可在心理学这块了解得越多就越发现,很多人做不好体验设计,是因为喝太多鸡汤,导致脑子里不自觉地产生了很多反人性的思想。而这些反人性的鸡汤,虽然能够帮助自己更加优秀,对于理解用户来说却一点帮助都没有,甚至可能适得其反。

图片

例如今天我就用一个很经典的心理学定律来给大家讲讲:

 

峰终定律——The Peak–End Rule

意思是,人们对于一件事物的记忆好坏,取决于高峰和结尾的感觉

注意,这个高峰并不一定是正向高峰,也有可能是负向高峰。

诺贝尔经济学得主丹尼尔•康纳曼(Daniel Kahneman)曾经做过一次实验,让两组人带上耳机听噪音。

两组人听的时长和音量都是一样的,唯一不同的是,第一组听完这段就结束了,而第二组听完这段后,还会再听一段音量小一些的。

从测试设计者的角度看,第一组的忍受噪音的时间更短,总量也更少,理论上应该比第二组体验好一点。

然而根据调查发现,忍受完这轮噪音后表示愿意继续参加实验的人,竟然是第二组更多一些!

康纳曼让两组受试者戴上耳机,听很大声、令人不舒服的噪音。两组听到的音量都一样,不同的是,第一组听完大声的噪音就结束实验,第二组还会再听一段比较弱的噪音。

图片

按常理推断,第二组的人听了更久的噪音,应该比第一组感觉更痛苦,但事后调查,愿意继续参加实验的人,居然是第二组较多!

 

宁愿长痛不愿短痛?

我们都说长痛不如短痛,但为什么实验中,而且哪怕长痛的总量比短痛的总量更大,大多人都宁愿长痛不愿短痛?

  • 明知道高考的时候再努力一把,毕业后就能找到好工作了,可偏偏忍受不了。
  • 明知道晚上少熬点夜,第二天神清气爽工作效率高,可就是做不到。
  • 明知道每天只要花半个小时锻炼一下,不但体型能改善而且精气神也能上去,可就是坚持不了。
  • ……

看来,短痛什么的都只能是对自己的要求,对大多数人来说,还是长痛更加符合人性。

运用到产品体验上,那就是:便捷性比不过易学性,与其与让用户短时间内完成一个高难度的操作,还不如花更长时间完成一个低难度操作

例如我以前设计过一个控件,方便用户快速滑动切换到某个日期。

结果用户测试发现,虽然这个控件操作效率高,但是几乎所有的用户都无法立即理解,于是效率反而下降。

图片

 

结尾比过程更重要?

虽然很多鸡汤文说,要重视过程而非结果。 

但是对于只体验一次的事情来说,大多数人更在意结果而非过程。

以电影为例,通常对于喜剧和悲剧的划分,并不是根据过程,而是结尾。也就是说哪怕同样的故事,只要结局反转,就会给人完全不同的感受。

把这个类比到产品体验,就拿购物为例,不论搜索产品的过程有多么复杂,只要最终我能买到合心意的产品,用户体验就是美好的。

所以说拼多多这类主打实惠电商平台,根本没有必要再一些体验细节上死抠,点击收货时自动拉摄像头什么的……都被拿到便宜商品后的愉悦感冲淡了~

相反,如果一个电商平台流程体验上再考究,可只要在最后一步收货阶段让用户失望,前面的努力都白费了。

这么一想,写之前那篇《拼多多这个恶心的交互,居然有人说好?》时,我的困惑也终于找到答案。

不过,我还是不喜欢这个方案,这个下面再解释。

 

脚踏实地比不上巧言令色?

通常我们受到的教育是,做事要脚踏实地,那些巧言令色的小人走不长远。

可如果真的是这样,为什么不论是职场还是相亲,「老实」这个词都被认为是贬义词呢?

其实大部分人根本不喜欢稳定,例如投资股票的朋友,经常喜欢张口闭口就说“我最近赚了 50%”、“再加把劲,说不定可以翻倍”……

可是股神巴菲特的年均收益率不过 20% 左右,据我了解无论是创投还是私募,实际年收益率平均能超过 20% 已经相当不错了。

图片

蓝色线为收益率

 

但是对于大多数业余股民来说,即便是自己年均收益率为负数,只要曾经有过一段高光时刻,那就很满足了。

对应在产品体验上那就是:只要有一点让用户感到了「高光时刻」,那就足够让用户记住要长时间了

例如 iPhone 其实整个产品的用户体验,尤其是在刚需上未必比 Android 强多少,可他们抓住自己在细节上的优势,让用户在某些时候突然印象深刻一下,就能圈住不少果粉:《iPhone 这些体验细节太感人,换安卓后不习惯了》。

当然,Android 也有自己的「高光时刻」,例如我在接到陌生电话,看到屏幕上显示“诈骗电话”时,立即由路人转粉。

当然,这个「高光时刻」也可能是负面的「至暗时刻」,例如虽然拼多多能够让我买到便宜的商品,结尾通常是美好的,但是那个点收货拉摄像头实在是让我的体验一下子跌落谷底,所以始终无法产生好感。

 

总结

鸡汤本身就是反人性的,用来要求自己可以,用来要求他人可千万别。

所以说用户体验要反鸡汤,这个其实再合理不过。

以后可千万别抱怨用户这不好那不好,因为人性本来就是这样,样本大了从概率学上看,是一个绝对不可能改变的客观事实。

体验设计就是要运用技术去迎合人性,而千万不要妄图改变什么。

 

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

作者:设计师ZoeYZ

转载请注明:学UI网》峰终定律,揭露用户宁愿长痛不愿短痛的秘密



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

                                                            微信图片_20210513163802.png

 

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

 

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




日历

链接

个人资料

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

存档