五大模块,解析产品设计中的视觉走查

时间:2019-10-13 来源: 国内新闻

每个人都是产品经理。我想在4天前分享它

视觉演练通常分为五个模块:形状,颜色,文字,结构和质量,本文还将结合这些点来讨论视觉演练的注意事项。

设计审查失败?总是让您更改草稿吗?

在进行设计时,我们经常不由自主地运用过去的经验,将自己沉浸在自己的小世界中,从而导致程序过于主观或过于理想化,不符合目标。这将导致审查失败和结果不完善,因此我们需要根据某些规则进行自检。

设计演练

我们都去了医院进行体检。前台会给我们体检表。我们将根据体格检查表上的项目检查并记录结果。设计演练类似于程序的物理检查。根据某些设计标准和规则,对设计进行从始至终的总结和总结,易于修改和迭代。

如何进行设计演练?

设计步行检查作为一种设计检查方法,那么我们还需要有一个“身体检查表”来确定项目的检查情况,一般来说,设计步行分为交互式步行和视觉步行,本文介绍了视觉步行演练方法,交互式演练将在以后的文章中介绍。

视觉演练通常分为五个模块:形状,颜色,文字,结构和质量。

在确定“体检表”的各个项目之后,我们如何知道该项目不符合标准?

因此,我们需要具有一定的标准才能确定该项目的标准。如果符合标准,它将通过,如果不符合标准,则需要进行调整。

(1)视觉漫游形状

1.图片

由于通常将图片留在图片中进行操作上传,因此用户上传的是类似UGC的APP图片,因此有必要确保图片尺寸和比例合理统一。例如,与商品图基坑相同,如果它们全部为1: 1,则它们应全部为1: 1。

具体的产品图是根据实际情况而定的,例如赛璐travel的出行策略,用户通常是手机上载照片,因此比例大多为4: 3或1.382: 1;像电子商务APP一样,商品的主要所有者该图通常是正方形的。

下图显示了常用图像的比例和比例:

2.标签

标签可以按照从低到高的级别分为纯文本标签,线框标签,浅色标签,纯色/渐变标签。检查时,要注意标签是否统一使用。例如,诸如促销和卖点之类的标签通常较多,因此使用线框标签时,诸如自营店和旗舰店之类的官方属性反映出较高的真实心态,并且出现的频率可能相对较小,因此使用实心/渐变标签。在这种情况下,有必要确定颜色是否均匀。

3.按钮

根据从低到高的级别,这些按钮可以分为文本按钮,线框按钮,灯光按钮,纯色/渐变按钮。我们还需要注意按钮是否统一使用。例如,取消按钮统一为线框按钮,您突然变成实心/渐变按钮变得不合理。

(2)视觉演练颜色

1.合理的水平

在上面的模块中,价格水平一目了然最高,其次是标题的上部,而中部的最低部分。不同的颜色代表不同的级别,页面中的级别应清晰合理。流行的一点是颜色不太明显,层次较低。哪种颜色不显眼:根据背景色,在下图中,text1与背景色相似,不易区分,不起眼,层次低; text2和背景色有一定区别,易于区分,因此引人注目,层次很高。

2.统一规范

顾名思义,统一标准应该在颜色使用方面统一。例如,如果将蓝色用作文本链接,则通常所有文本链接都应为蓝色。当然,如果由于背景色导致蓝色识别不高,则需要适当调整。

3.适量

太多的颜色可能会令人眼花,乱,因此您需要控制使用的颜色量。通常,除了黑白灰以外,页面的颜色不应超过3,具体取决于页面的复杂程度,但是如果出现多种颜色,则需要说明原因并保持所有页面颜色均匀。

(3)视觉演练字

1.合理的水平

不同的字体大小和不同的字重代表不同的级别。众所周知,字体大小越大,字重越重,级别越高,因此需要合理使用。例如,下图辅助小单词选择Semibold,主标题使用Light,明显不合理。

2.高舒适度

单行文本通常具有相同的行高和字体大小,多行文本的行高通常为字体大小的1.618倍(四舍五入,取整),行高过高,页面内容过大散乱,不利于阅读,行高过低。内容太紧凑而不利于阅读,1.618是黄金比例,间距适中,易于阅读。

3.适量

除字体大小外,可能还有多种字体。页面上的字体数量通常不超过两个。一种是常规文本字体(通常是系统字体),另一种是数字字体。因为有太多的中文字符并且字体包很大,所以不建议嵌入第三方中文字体包。数字字体通常会删除多余的英文字体,符号等,以减少字体组合。

(4)视觉演练的构建

这里的结构是页面结构,主要分为两部分:水平和间距:

1.合理的水平

不同的模块和不同的内容具有不同的级别,并且不同的页面具有不同的用途。合理的级别表示该页面的排名合理。那你怎么理解?让我们看一下下面的图片:

这是一些产品信息,显示在产品列表页面上,在这里我们希望能够快速找到用户的首选商品,以便用户可以转到产品详细信息页面以完成转换。产品信息包含产品图,价格,卖点和产品名称。您如何确定优先级?

产品图对用户来说是最直观和最吸引人的地方,因此产品图优先级绝对是最高的,那么我们需要确定哪个卖点和标题具有更高的优先级?用户什么时候需要阅读文字?

当然,当图片无法识别并且用户不确定产品是什么时,在这种情况下,我们要做的第一件事是帮助用户识别产品,其次是显示卖点。如果我们无法确定产品是什么,那么表明卖点的意义何在?

仍然有价格。用户在什么情况下会看到价格?

当然,除非我们知道产品,否则我们不会查看价格,因此我们优先考虑:商品图表<商品名称> <卖点>价钱。但是在大多数情况下,用户可以通过商品图来识别商品,因此用户将立即查看价格,因此在这种情况下,优先级是:商品图。 <价格> <商品名称>卖点。

注意:这仅是推论,并非调查的实际结果。正常优先级排名需要调查。

2.合理的间距

在间隔方面,我们需要充分利用格式塔原理来制定某些规范,以确保内容之间的间隔是统一和合理的,例如主标题和副标题。这两个部分是对商品的描述。因此,作为一个整体,我们将两者之间的间隔设置为6pt,而商品地图和标题属于一组内容。将两者之间的距离设置为9pt也是商品之间的一组内容。我们可以将两者之间的距离统一设置为12pt。

注意:例如,实际间距需要根据页面内容进行调节。

格式塔原理的接近度

格式塔原理的相似性

格式塔原理的连续性

格式塔原则已关闭

格式塔原理对称性

格式塔原理身体/背景

格式塔原则共同命运

(5)视觉漫游质量

质量强调页面的整体感觉是否合理:

1.合理的样式和统一性

合理合理的样式统一主要是指页面都具有相同的样式。无论是图标还是按钮,还是整个图标(例如,图标是扁平的),按钮都不会真实。

2.合理统一的音调

色调的合理统一主要是指页面的整体感觉。例如,该产品是奢侈品。有必要营造高端氛围。结果是促销气氛很浓。这是不合理的。在这一部分中,主要是看情绪面板的生产和使用。不管它是统一的,还是如果情感板在完成之后没有被实际使用,那么就会有或多或少的问题。

第三,确定优先级

当发现不符合标准的对象时,我们将通过四象限规则对这些对象进行优先级排序,并对它们进行优先级确定以确定优化顺序:

收款报告投诉

视觉演练通常分为五个模块:形状,颜色,文字,结构和质量,本文还将结合这些点来讨论视觉演练的注意事项。

设计审查失败?总是让您更改草稿吗?

在进行设计时,我们经常不由自主地运用过去的经验,将自己沉浸在自己的小世界中,从而导致程序过于主观或过于理想化,不符合目标。这将导致审查失败和结果不完善,因此我们需要根据某些规则进行自检。

设计演练

我们都去了医院进行体检。前台会给我们体检表。我们将根据体格检查表上的项目检查并记录结果。设计演练类似于程序的物理检查。根据某些设计标准和规则,对设计进行从始至终的总结和总结,易于修改和迭代。

如何进行设计演练?

设计步行检查作为一种设计检查方法,那么我们还需要有一个“身体检查表”来确定项目的检查情况,一般来说,设计步行分为交互式步行和视觉步行,本文介绍了视觉步行演练方法,交互式演练将在以后的文章中介绍。

视觉演练通常分为五个模块:形状,颜色,文字,结构和质量。

在确定“体检表”的各个项目之后,我们如何知道该项目不符合标准?

因此,我们需要具有一定的标准才能确定该项目的标准。如果符合标准,它将通过,如果不符合标准,则需要进行调整。

(1)视觉漫游形状

1.图片

由于通常将图片留在图片中进行操作上传,因此用户上传的是类似UGC的APP图片,因此有必要确保图片尺寸和比例合理统一。例如,与商品图基坑相同,如果它们全部为1: 1,则它们应全部为1: 1。

具体的产品图是根据实际情况而定的,例如赛璐travel的出行策略,用户通常是手机上载照片,因此比例大多为4: 3或1.382: 1;像电子商务APP一样,商品的主要所有者该图通常是正方形的。

下图显示了常用图像的比例和比例:

2.标签

标签可以按照从低到高的级别分为纯文本标签,线框标签,浅色标签,纯色/渐变标签。检查时,要注意标签是否统一使用。例如,诸如促销和卖点之类的标签通常较多,因此使用线框标签时,诸如自营店和旗舰店之类的官方属性反映出较高的真实心态,并且出现的频率可能相对较小,因此使用实心/渐变标签。在这种情况下,有必要确定颜色是否均匀。

3.按钮

根据从低到高的级别,这些按钮可以分为文本按钮,线框按钮,灯光按钮,纯色/渐变按钮。我们还需要注意按钮是否统一使用。例如,取消按钮统一为线框按钮,您突然变成实心/渐变按钮变得不合理。

(2)视觉演练颜色

1.合理的水平

在上面的模块中,价格水平一目了然最高,其次是标题的上部,而中间的最低部分。不同的颜色代表不同的级别,页面中的级别应清晰合理。流行的一点是颜色不太明显,层次较低。哪种颜色不显眼:根据背景色,在下图中,text1与背景色相似,不易区分,不起眼,层次低; text2和背景色有一定区别,易于区分,因此引人注目,层次很高。

2.统一规范

顾名思义,统一标准应该在颜色使用方面统一。例如,如果将蓝色用作文本链接,则通常所有文本链接都应为蓝色。当然,如果由于背景色导致蓝色识别不高,则需要适当调整。

3.适量

太多的颜色可能会令人眼花,乱,因此您需要控制使用的颜色量。通常,除了黑白灰以外,页面的颜色不应超过3,具体取决于页面的复杂程度,但是如果出现多种颜色,则需要说明原因并保持所有页面颜色均匀。

(3)视觉演练字

1.合理的水平

不同的字体大小和不同的字重代表不同的级别。众所周知,字体大小越大,字重越重,级别越高,因此需要合理使用。例如,下图辅助小单词选择Semibold,主标题使用Light,明显不合理。

2.高舒适度

单行文本通常具有相同的行高和字体大小,多行文本的行高通常为字体大小的1.618倍(四舍五入,取整),行高过高,页面内容过大散乱,不利于阅读,行高过低。内容太紧凑而不利于阅读,1.618是黄金比例,间距适中,易于阅读。

3.适量

除字体大小外,可能还有多种字体。页面上的字体数量通常不超过两个。一种是常规文本字体(通常是系统字体),另一种是数字字体。因为有太多的中文字符,并且字体包很大,所以不建议嵌入第三方中文字体包。数字字体通常会删除多余的英文字体,符号等,以减少字体组合。

(4)视觉演练的构建

这里的结构是页面结构,主要分为两部分:水平和间距:

1.合理的水平

不同的模块和不同的内容具有不同的级别,并且不同的页面具有不同的用途。合理的级别表示该页面的排名合理。那你怎么理解?让我们看一下下面的图片:

这是一些产品信息,显示在产品列表页面上,在这里我们希望能够快速找到用户的首选商品,以便用户可以转到产品详细信息页面以完成转换。产品信息包含产品图,价格,卖点和产品名称。您如何确定优先级?

产品图对用户来说是最直观和最吸引人的地方,因此产品图优先级绝对是最高的,那么我们需要确定哪个卖点和标题具有更高的优先级?用户什么时候需要阅读文字?

当然,当图片无法识别并且用户不确定产品是什么时,在这种情况下,我们要做的第一件事是帮助用户识别产品,其次是显示卖点。如果我们无法确定产品是什么,那么表明卖点的意义何在?

仍然有价格。用户在什么情况下会看到价格?

当然,除非我们知道产品,否则我们不会查看价格,因此我们优先考虑:商品图表<商品名称> <卖点>价钱。但是在大多数情况下,用户可以通过商品图来识别商品,因此用户将立即查看价格,因此在这种情况下,优先级是:商品图。 <价格> <商品名称>卖点。

注意:这仅是推论,并非调查的实际结果。正常优先级排名需要调查。

2.合理的间距

在间隔方面,我们需要充分利用格式塔原理来制定某些规范,以确保内容之间的间隔是统一和合理的,例如主标题和副标题。这两个部分是对商品的描述。因此,作为一个整体,我们将两者之间的间隔设置为6pt,而商品地图和标题属于一组内容。将两者之间的距离设置为9pt也是商品之间的一组内容。我们可以将两者之间的距离统一设置为12pt。

注意:例如,实际间距需要根据页面内容进行调节。

格式塔原理的接近度

格式塔原理的相似性

格式塔原理的连续性

格式塔原则已关闭

格式塔原理对称性

格式塔原理身体/背景

格式塔原则共同命运

(5)视觉漫游质量

质量强调页面的整体感觉是否合理:

1.合理的样式和统一性

合理合理的样式统一主要是指页面都具有相同的样式。无论是图标还是按钮,还是整个图标(例如,图标是扁平的),按钮都不会真实。

2.合理统一的音调

色调的合理统一主要是指页面的整体感觉。例如,该产品是奢侈品。有必要营造高端氛围。结果是促销气氛很浓。这是不合理的。在这一部分中,主要是看情绪面板的生产和使用。不管它是统一的,还是如果情感板在完成之后没有被实际使用,那么就会有或多或少的问题。

第三,确定优先级

当发现不符合标准的对象时,我们将通过四象限规则对这些对象进行优先级排序,并对它们进行优先级确定以确定优化顺序:

偃師高压液压注浆机厂家

新闻排行
  1. 16:24:03东北网根据《最高人民法院关于建设一站式多元解分机制一站式诉讼服务中心的意见》的精神,密山市人民法院迅速作出反应并迅速实施,并在诉讼服务中心建立了财产保全和评估服务窗口。密山法院将原有

    16:24:03东北网根据《最高人民法院关于建设一站式多元解分机制一站式诉讼服务中心的意见》的精神,密山市人民法院迅速作出反应并迅速实施,并在诉讼服务中心建立了财产保全和评估服务窗口。密山法院将原有...

  2. 22:50:55明朝阳光文/感阳光斗争是品格,成功是目标,积极思考会使生活富裕,消极思想会使人生活贫困,个人努力和财富会影响每个人的生活水平,1984年6月21日出生的朋友的诞生,是什么样的她会有生

    22:50:55明朝阳光文/感阳光斗争是品格,成功是目标,积极思考会使生活富裕,消极思想会使人生活贫困,个人努力和财富会影响每个人的生活水平,1984年6月21日出生的朋友的诞生,是什么样的她会有生...

  3. ?&nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&nbsp&nbsp;&n

    ?&nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&nbsp&nbsp;&n...

  4. 当吸吮猫和吸狗进入现代主流生活方式时,你可以自由抚养你的宠物吗?AuroraMobile(纳斯达克股票代码:JG)

    当吸吮猫和吸狗进入现代主流生活方式时,你可以自由抚养你的宠物吗?AuroraMobile(纳斯达克股票代码:JG)...

  5. 作为2019年最独特的旗舰手机,魅族16S拥有太多的小牛:横向复兴电机,6.2英寸对称全屏,纯白机身,光学防抖,Flyme等。随着魅族新品越来越紧,魅族16S价格一路下滑,截至目前魅族16S价格已降

    作为2019年最独特的旗舰手机,魅族16S拥有太多的小牛:横向复兴电机,6.2英寸对称全屏,纯白机身,光学防抖,Flyme等。随着魅族新品越来越紧,魅族16S价格一路下滑,截至目前魅族16S价格已降...

  6. ?朝鲜重新发布消息面对美国,日本和韩国:8月2日测试仍然是火箭发射器(观察员网络新闻)韩国联合参谋部(联合)2日宣布,朝鲜当地时间凌晨2点59分和凌晨3点23分,在咸镜南道永兴地区的东海发射了一架不明

    ?朝鲜重新发布消息面对美国,日本和韩国:8月2日测试仍然是火箭发射器(观察员网络新闻)韩国联合参谋部(联合)2日宣布,朝鲜当地时间凌晨2点59分和凌晨3点23分,在咸镜南道永兴地区的东海发射了一架不明...

  7. 央行释放巨大利益汽车行业引领了上升趋势5G概念更强是恒强银行股在后期交易中上涨中央银行正在降息人工智能

    央行释放巨大利益汽车行业引领了上升趋势5G概念更强是恒强银行股在后期交易中上涨中央银行正在降息人工智能...

  8.     使用LNG燃料动力正在成为全球越来越多的邮轮公司的选择,LNG燃料动力邮轮订单已经超过手持订单半数,成为新造船市场的绿色“领航船”。  自从邮轮投入商业运营以来,邮轮的主要动力是使用重燃料油

        使用LNG燃料动力正在成为全球越来越多的邮轮公司的选择,LNG燃料动力邮轮订单已经超过手持订单半数,成为新造船市场的绿色“领航船”。  自从邮轮投入商业运营以来,邮轮的主要动力是使用重燃料油...

  9. ?我必须在2天前聊天。高铁是我们经常出行的一种交通工具,不仅方便快捷,而且内部服务也很满意。当然,为了改善高铁,有必要提一下里面的空姐。奇怪的是,高铁的秘密是隐藏的。女乘务员的高流动率是多少?辞职的女

    ?我必须在2天前聊天。高铁是我们经常出行的一种交通工具,不仅方便快捷,而且内部服务也很满意。当然,为了改善高铁,有必要提一下里面的空姐。奇怪的是,高铁的秘密是隐藏的。女乘务员的高流动率是多少?辞职的女...

  10. 总结[最新的ETF数据即将到来!大量的黑马公司已经扩大。今年,基金公司ETF的热线有所增加。股票ETF持续增长

    总结[最新的ETF数据即将到来!大量的黑马公司已经扩大。今年,基金公司ETF的热线有所增加。股票ETF持续增长...

友情链接