首页

设计模式|输入线索:如何让用户清楚该输入什么?

ui设计分享达人

本文是《设计模式周周看·Ant Design 为你讲透设计模式》周刊第五期内容,上期内容,我们介绍了一种辅助用户输入的设计模式:输入说明

这一期,我们继续介绍一种辅助用户输入的设计模式:输入线索。


What 是什么

简介:「输入线索」是指用示例输入或说明文本以占位符(Placeholder)的形式显示在输入框中,以帮助用户理解需要输入的内容,或给出相关线索的一种设计方式。

例子:  在 Ant Design 输入框组件 的示例中(如下图),我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。


Why 为什么

「输入线索」这种设计模式可以让界面不言自明。由于输入线索的内容位于用户输入的位置,因此用户往往不会忽略这个信息。



对比:「输入线索」VS「输入说明」

「输入说明」与「输入线索」都是辅助用户输入的设计模式,这些模式可以帮助用户明确输入信息的内容形式。

那么这两种模式有什么差异性呢?


使用「输入说明」这种模式时,快速浏览用户界面的用户可能会轻易地忽略说明信息,因为用户的目标是尽可能快地完成表单,然后进入下一步操作(虽然有的场景下这也是其中一个设计目标,但在这里不讨论)。因此,过多的文本说明也会给用户带来较大的心智负担。


Google 注册账号页是结合使用「输入说明」与「输入线索」的一个典型案例。通过使用「输入线索」告诉用户需要填写的内容,通过「输入说明」来补充填写信息的相应意图,进而使得用户可以清晰地意识到需要填写什么,并输入相应信息。


When 什么时候使用

用户可能不一定清楚需要在输入框中输入的内容。在设计上,你可能不希望在输入框附近上添加更多的字,造成视觉压迫。还有一种情况,如果界面空间有限,无法使用「输入说明」时,也可以考虑使用「输入线索」。当出现下拉菜单或者组合输入框时,往往需要配合该模式进行使用。


使用条件

· 输入框要求输入的内容可能不容易让人马上理解;

· 设计上不希望在其他地方补充新的内容;

· 可以承载文本的输入空间可能没有太多;

· 配合下拉菜单或者组合输入框使用;


How 如何使用

1. 选择适当的提示文本

· 对于下拉列表,使用 “选择”、“选取”等单词,英文使用 Select Choose 或者 Pick 等;

· 对于文本输入框,使用“输入”等单词,英文使用 Type 或 Enter;

· 尽量使用祈使句,以动词短语开头;

· 以描述输入内容的名词结尾,例如“选择状态”,“在此处输入消息”或“输入患者姓名”等;


2. 提示文本的位置

有关文本提示的位置应该和输入值的位置一致。 比如,提示本身不应该是下拉菜单中的可选值。


Example 案例

案例一:Ant Design Pro 登录功能预览

用户需求:用户登录功能的预览与体验

Ant Design Pro 是一个中后台开发的模板脚手架,其并不提供真实账号登录服务。因此 Ant Design Pro 的开发者为了模拟真实使用环境,提供了一个可正常登录的账号,账号密码分别 user 和 ant.design ,其余情况下用户输入的账号密码均会提示不正确。


在这个场景下,通过将正确的账号密码以输入线索的方式显示在占位符中,巧妙地告诉体验 Ant Design Pro 的用户正确的账号密码。


案例二:163邮箱登录页面

用户需求:登录账号

163邮箱登录页面的账号输入框中的输入线索非常有用。正常用户在看到后缀有 @163.com 时可能并不一定能意识到可以输入手机号码。而通过在占位符中 显示「邮箱账号或手机密码」,高效便捷地提示了用户可以直接输入手机号码进行登录。


案例三:小米账号登录页面

用户需求:输入账号密码

「输入线索」有一种设计上的变体,称为「浮动标签」。因为一般来说,当用户激活输入框时,占位符文本会消失。而「浮动标签」不会消失,通过移动位置和更改大小驻留在界面中。这种设计方式可以使得界面变得简洁、优雅。


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

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



文章来源:站酷  作者:Ant_Design

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

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

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



综合指南:产品设计 vs. 用户体验设计

ui设计分享达人

区别指南 


产品设计和用户体验设计(以下简称UX设计)之间的区别在于,后者侧重于用户对应用程序或网站的体验感是否流畅,而前者则更多地是逻辑方面是否流畅。也就是说UX设计师负责确保设计看起来不错,使用起来感觉更好,使交互更愉悦。但产品设计师不处理这些,他们设计的是产品应该如何工作(甚至应该是什么样子)。


不过产品设计师还有一个更重要的责任——查看产品的不同部分如何相互作用。这里我们展开举例,比如进行手机设计时,他们就要确保操作系统与屏幕上的触控以及与物理按钮都能很好地匹配;如果是笔记本电脑或台式电脑,那么硬件和各式端口就需要合理地设计分布,这样用户在使用时才不会出现连接线乱糟糟的情况。


UX设计师的主要职责是确保用户可以轻松地在产品的数字部分执行他们希望的操作。


产品、UX设计师会使用不同的工具来完成其工作。例如,产品设计通常在AutoCAD等程序中完成,而UX设计则常常用Figma、Adobe Xd或Sketch创建。


产品设计师会更注重全局意识,因为他们需要将所有部件组合进同一个产品内,一起工作。


Vip Sitaraman作为设计顾问,服务的客户不光有创业公司还有财富500强


我与行业资深人士Viputheshwar Sitaraman聊了这个问题——UX设计和产品管理之间的区别是什么,他的回答很有帮助。Vip曾为初创公司和财富500强公司担任过设计顾问,亲身体验了许多不同的产品开发方式。


他认为这些角色有不同的职责需要考虑,他说:「关键的区别在于UX设计师更关注用户体验,而产品设计师关注整体业务目标(包括用户经验)。以及,他们各自与业务发展目标和关键绩效指标 (KPI) 的关系。」


关于用户体验设计师角色的具体细节,他告诉我:「UX设计师的主要/唯一KPI是用户对体验的满意度。因此,用户体验设计师的大部分工作都集中在优化、改进和创新客户流程上。」


他还进一步解释了产品设计师负责产品或项目时的更大蓝图:「产品设计师的 KPI与整个业务相关联,例如:扩展新市场、构建有机增长(organic growth)引擎或提高转化率。可以想象,这类决策与典型的UX角色体验设计任务大不相同。」


工作、职责和技能方面的不同

UX设计师主要关注产品的可用性,而产品设计师则更多地关注产品整体的感觉和体验。产品设计师并不总是用户体验设计师,但他们主要致力于产品的感觉和可用性。

by UX Store on Unsplash


产品设计师的职责

产品设计师从各个维度负责产品的外观和感受体验;

使用草图、线框图或其他设计工具来创造可以成为实际产品的想法;

产品设计师需要了解平面、色彩和排版等的设计理论;

他们需要衡量KPI并确保产品达到预期水平。


UX设计师的职责

UX设计师负责用户在使用产品时的体验与感受;

确保一切以直观明确为基准,避免用户感到迷茫或困惑;

UX设计师需要了解用户研究方法,如可用性测试、访谈、日记研究和现场实验等;

需要对认知负荷理论等人机交互原理有很好的理解;

UX设计师通常会在项目规划的初步阶段就开始制作线框图。


RadCollab的资深资深设计师Nolan Perkins提到,UX设计师的责任并不小,但也取决于公司。他告诉我:


根据公司的规模,产品设计师可以从前面提到的任何步骤开始。他们可以从报告或见解开始,也可以从用户故事或线框图开始。无论他们从哪里启动,产品设计师都会把这些信息带到完整的高保真模型中。


每个职业的利弊

产品设计师和UX设计师的工作内容虽有不同,但两者都对人们每天使用的产品产生着重大影响。

by JESHOOTS.COM on Unsplash


UX设计师更注重技术,并通过研究、设计工程或原型来解决问题;而产品设计师则通过产品体验来创造视觉和思想。这两种工作角色都为产品的许多方面提供了信息, 从市场营销再到界面功能都包揽其中。在一个凝聚力强大的公司中,请确保为每个职位雇用合适的人!


产品设计师的难处

这要看你怎么觉得了,辩证来说也许算不上难处,作为产品设计师的你,需要对研发的产品负责。而最重大的挑战之一,是要确保在交付时间及合理预算内,进行原型设计或功能试验。


要在这个行业取得成功,需要极大的决心和动力,其实所有高薪工作皆是如此,但产品设计会更迫切需要这种素质。这不仅仅是为了让一些东西看起来很漂亮,而是关于如何创造性的解决问题。


UX设计师的难处

UX设计师是设计过程中不可或缺的一部分,他们确保每个项目都能获得个性化的细节呈现。从前期一步步调研到草拟线框图,以及对不同部分的优化修改,UX设计师可以了解到产品开发的各个方面,全程跟进。


设计师们的兴趣也是多种多样的,有的人对整个项目感兴趣,而另一些人则更喜欢设计工作,比如原型搭建。有些招聘人员要求比较高,偏好能够完成全栈工作的UX设计师,这就需要一人同时拥有多项学科知识储备。


我经常听到的一种说法是UX需要大量的奉献精神,有时设计师会因接收信息繁多而感到不知所措,但这也侧面说明了UX设计师对产品开发过程如此重要的原因。设计师们应学习处理信息和研究,以易于理解的方式呈现结果同时推动设计决策。


成为产品设计师的益处

产品设计师可以在许多领域工作,无论是UI设计、业务策略还是产品架构。这些领域使得创意人员和来自不同背景的人聚集在一起,创造有价值的东西。

产品设计师有很多责任


产品设计师是少数通过工程思维方式和极强同理心,来塑造组织文化的人,而践行的方法则是他们用各式新设计出的产品去处理不同的问题,从而得出方法论。产品设计主要是解决问题,日复一日,它们也有助于平衡功能与形式,虽然总有新的难题出现——但也请你继续成长,迎难而上!


产品设计师横跨多个行业,因为他们拥有的技能非常多样化!当今产品设计师必须有像变色龙一样强的适应力,处理任何状况,这促使他们成为非常有价值的员工。


成为UX设计师的益处

UX设计师是炙手可热的高薪专业人士,他们在设计无缝体验方面发挥着强大的作用。UX设计师往往兼具创造性和协作性,这意味着他们也能很好地跨设备或平台(如移动设备)与来自不同背景的人共同工作。

UX设计师的工作似乎与产品设计师的角色重叠


UX设计工作可能要求很高,但个人成长的机会却是巨大的。你会发现这个方向将激励那些热爱学习技术的人,因为人机交互模型是不断变化的,它们对我们的行为有着很大影响,所以,很多时候你会觉得业务需求之间的交集也是一个发挥技能的领域。


实际工作中,设计师与用户/客户的沟通时间会占比较多,因为要对他们与产品或服务相关的行为、需求深入研究。这些信息能非常有利于他们创建原型图与线框图,同时,还能帮助用户在新设计实施前,深入了解提高客户转化率或增加收入流的方法。


如何知道自己是否适合这两种角色呢?

我与三位业内人士进行了交流,并问了问他们「觉得在这两个领域取得成绩需要什么」。

Lindsey Allard是PlaybookUX组织的CEO兼联合创始人


Lindsey Allard,PlaybookUX的CEO兼联合创始人告诉我:

如果满足以下条件,你非常适合在UX设计领域:有用户研究或用户测试过程的经验;同理心强,能从用户角度思考;能够客观和批判性思考的人;并且需要了解UX流程(必要的)。


如果符合以下条件,则你适合从事产品设计:熟练使用Adobe、Sketch等工具;对设计、美的事物有强烈渴望,并擅长结合品牌;跟得上潮流;能够将一个愿景变成设计。


它们是相似的,甚至UX设计师可以转为产品设计师(反之亦然),但在公司内部运作方面还是存在明显差异。


用户体验一直是我的热情所在,我也会继续在UX设计领域深耕(曾经有一段时间我本可以转到产品设计上),两者大部分差异来自我们对项目采取的方法,以及我们制定的完成目标。


Nolan Perkins,RadCollab资深设计师告诉我:

我认为新人不应该上来就专攻产品设计或UX设计,因为两者都是更高级别的职位。相反,在决定从事具体的细分岗位之前,建议先打好基础。


Viputheshwar Sitaraman,数字顾问告诉我:

作为一名UX设计师,要能通过交互设计来预测用户行为。对用户行为、UI流程和可访问性等具有敏锐洞察力的设计师,将在UX设计角色中茁壮成长,并通过提升客户体验来推动增长。


另一方面,产品设计师要能找到新的机会来扩展价值。一个商业和营销意识俱佳的人,如果对更广阔的市场(即竞争、趋势)有自己的深刻理解,也会更好地帮助产品和功能改进优化,在产品设计角色中快速成长。


产品和UX设计角色都需要对现代趋势(无论是业务、市场、用户行为和交互)有深入和最新的了解——这就是为什么找到你最关心/享受的东西是如此重要!


要想成为这两种角色,有什么建议?

好问题!UX设计师和产品设计师拥有截然不同的技能组合,每个人的职责都是独特的。为了让大家对这些区别有一个了解,我将逐一概述。


如何成为一名UX设计师

首先,如果你没有学过任何技术经验,只学过设计,那么成为UX设计师的道路会稍微复杂一些。用户研究方法深深植根于用户体验技术中,所以第一步是获得技术技能,帮助你以不同的方式探索用户需求,比如原型和其他需要时间来研究的活动。


Quick tips

加入一个UX的在线提升训练营;

在用户体验领域继续深造,例如读硕读博;

丰富自身技能,比如学习用户心理学;

向你认识的UX设计师学习请教。


如何成为产品设计师

成为产品设计师有两条关键路径:第一种是通过专业的设计学校,获得产品设计学位;另一种是获得工程学位,进入具有产品设计岗位的公司,通过转岗或是晋升获得。决定走哪条路可以改变你的整个职业轨迹!


Quick tips

确定您想要设计的内容和位置。产品设计师更多的是构建产品的专家,并不局限于设计一个项目,这也是为什么产品设计师必须在许多学科上多才多艺,这样才能对从构思到开发和生产的不同方面给予指导,比如工程、工业设计和用户界面设计 (UI) 和甚至创业技能;

产品类型千差万别,从服装或汽车等消费品到纳米机器人或3D打印设备。请尝试找到你擅长的领域,术业有专攻,你不可能掌握一切!

探索你的兴趣——通过阅读相关领域的博客或新技术的文章/视频,看看它是如何与为你关注的行业联系起来的。


写在最后

产品设计师搭建产品体系,UX设计师通过调研和数据推进决策,并确定最适合用户的交互体验。两个角色通常会一起工作,但也取决于公司的大小。如果需要,高级UX设计师可以同时完成这两项工作!


有人常将二者理解为是一码事儿,因为他们通常都会参与早期的开发阶段(无论是概念阶段还是线框图阶段时)。在很多情况下,会有一个团队专门从事UI设计。总而言之:


抱歉,你不能通过一件事来定义UX设计师或产品设计师!


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

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



文章来源:站酷  作者:UX词典

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

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

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


折柱饼 +3 个套路,简单图表你真的会用吗?

ui设计分享达人

本文一句话概括:数据可视化中,如何用最简单的图表高效地传递信息。


人人熟知的 3 类图表

看似简单的 3 类常挂在嘴边的「折柱饼」,你真的知道怎么使用吗?

@rubyxrli 在 纽约的Uber数据可视化大会上所做演讲中提到: 
根据我的经验(基于原型研究超过10年)大多数可视化问题可以通过一些图表来解决。很少情况下,需要你去想出一个全新的表达方式。像条形图、折线图、散点图、透视表等「图形化主力」真的很难被替代! 


对于大部分的企业级产品使用者来说,基本的图表类型,通常可以为大多数当前页面的问题作出解释,但是我们要做并不是简单地调用一个图表就结束了,如果想让你的页面更有效地传递结论、原因,可以让使用者探索更多可能性,甚至去发现新的分析思路,那么首先你需要掌握下面的分析套路:


3 个套路

「对比,细分,溯源」,给简单的图表加点「戏」

在数据分析中,分析思路一般可以概括为「对比,细分,溯源」,这也是《数据化管理》中提到六字箴言。首先我们来了解一下这六字箴言的具体含义:

此处引用部分《分析思维 第三篇:数据分析的三板斧》内容


1、对比

对比分为横向对比和纵向对比。

· 横向对比是指和“他人”比较,比如,两个网站的用户流失率;

· 纵向对比是指按照某个维度,和“自己”比较。比如,这个网站上个月今天和这个月今天的用户流失率。

2、细分

细分是指分维度、降低粒度来分析数据。

· 分维度是指增加维度,比如,离职率按照部门维度来分析;

· 降低粒度是指降低数据聚合的程度,比如,离职率不按年份,而按照月份来统计。

3、溯源

溯源是指在对比、细分锁定到具体维度和粒度之后,依然没有结论,那就需要查看原始数据或相关联数据,洞察数据,从数据中寻找灵感。


3x3 实践

第一个 3 代表图表类型;第二个 3 代表分析套路。

了解分析思维的三个套路后,可以尝试在自己的图表中检验打钩。

下面我用几个例子来说明一下,如何打开图表设计的脑洞:  


折线图

通常在一个数据概览页面,人们都会使用一个折线图,来表示一个关键指标的发展趋势,当然这么做非常直观,也非常准确。当我们为折线图添加一个对比的维度,就可以使折线图表达的内容更加丰满。

横向对比

可以是横向对比“和他人比”。


纵向对比

也可以是纵向对比“和自己比”。


添加辅助元素,强化关键信息进行对比

G2Plot 为图表提供了很多图表辅助信息组件:https://g2plot.antv.vision/zh/examples/general/label

例如:

· 参考型组件:参考线、趋势线、辅助区域等

· 极值型组件:最高/低点、预警线等

undefined


细分维度

通过右上角的 TAB 切换,提升和降低数据聚合的程度


柱 / 条形图

横向对比

和别人比。


细分维度

将维度拆分进行分析。


在使用柱状图/条形图时,问问自己「对比」的呈现效果好吗?

这是使用者在使用柱形图做对比时,经常遇到的问题:

· X 轴类别数量过多,柱子非常密集

· 轴文字标签数量过多,文字在 45%旋转后可读性降低

这时,设计者应该试着旋转柱图,把它变成一个条形图。


对比是好的,但不要做无用的对比


饼 / 环图

纵向对比

饼/环图天生自带「纵向对比」的性质,但是除了用一个饼/环图之外,还有什么做法?


细分维度


溯源,显示更多详情帮助用户定位问题


合并极小值的维度,在有需要的时候做细分


拓展:N x N 实践

第一个 N 可以代表图表类型,也可以代表页面,但需要是一个实体;

第二个 N 代表分析思路,上文中提到的 3 个套路只是众多分析思路中被总结出最为常用的,还可以根据不同业务场景的诉求去添加思路。

这个矩阵的表格填出来后,除了可以帮助设计者检验是否高度利用了图表区域之外,还可以总结出一份属于自己业务场景的图表指引,传递给下一个设计者使用。


结语

在企业级产品设计的领域中,用可视化的方式表达信息,让数据不再枯燥难懂,是一种常见的设计手法。在真实的业务场景中,大部分用户青睐 dashboard(报表页面),来呈现「数据概览」、「数据监控」、「数据明细」等信息,其中的重要组成部分即「统计型图表」。如何恰当使用「统计型图表」来实现用户的分析目的? 这对没有可视化基础的制作者来说,还是有一定的难度。

通过以下三步,让用户更高效地读取重要信息,驱动业务决策,实现商业价值。

本文用简单直白的工具方法,为「零基础」的图表制作者提供一种简单易学的思路,让你的图表在 Dashboard 里更全面、更有效地传递关键信息。


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

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



文章来源:站酷  作者:Ant_Design

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

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

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


数据可视化的驱动与使能

ui设计分享达人

老司机开车

开车的同学知道,一般我们用“指哪打哪”来形容汽车转向精准、没有虚位。“指哪打哪”是指汽车的操控体验,更是驾驶乐趣的一部分。驾驶员轻拨动方向盘,轮胎转向带来的阻力以及路面反馈传至车身,动力的线性输入与制动的时实响应让驾驶员能控制自如。


“指哪打哪”形容车听从驱使,是人对车的输入控制以及车对人的输出反馈,是一个互相修正的过程。在数据可视化设计中,操作“听从驱使”的可视化作品又是一种什么样的体验呢?



听从驱使示例

示例一

某公司运营同学需要找出品类销量下滑的原因。在图表上,运营同学的思路是找出症结、定位问题、关联分析、验证设想、得出结论并给出运营策略调整方案。



示例二

某同学向公安报案称账户被盗大额资金,公安案件科分析专员从受害人的资金流向追溯至相关木马团伙,通过关系扩散查验可疑人员,顺藤摸瓜最终找到嫌疑人并抓捕。

上面两个示例提供足够便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多视图空间,快速定位感兴趣的数据空间,这种操作体验能帮助用户事半功倍。



何谓听从驱使

听从驱使本质上是用户对可视化的控制能力,是一种主观感知与信念。听从驱使包括两部分,“驱动 Drive”与“使能 Enable”,这两步正向不断迭代,引导用户一步步剥开数据的面纱。



驱动 Drive

数据可视化听从差遣,用户可根据前馈信息预示、驱动可视化,用户对可视化作品享有控制权,数据可视化符合用户的显性需求。


使能 Enable

数据可视化遂用户心愿,用户根据反馈引导进行下一步操作,帮助探索数据规律或者发现更多数据奥秘,数据可视化符合用户的隐性需求。



为什么要听从驱使

增加探索意愿

用户处在海量、无序、异构数据的海洋中时,需要随时面对有限屏幕空间与无限数据空间带来的冲突。可视化应当给予用户适当的选择权,让其可对信息进行控制,具备信息聚焦、下探的能力。这些可视化能力能提升用户的参与度和探索意愿,不让其迷失在数据的海洋中。


减少焦虑感

移动端长按滑动(Touch & Hold)更新激活点数据、左右轻扫(Swipe)平移视图是用户的既定认知。左图长按滑动后的反馈为平移视图,此时用户心里咯噔一下,又继续操作了一遍,操作的预期与结果确实不一致,有些“不听使唤”。右图符合用户心智模型,预期与输出结果一致。


不听从驱使:视图平移,不符合预期-长按滑动时数据点不更新(如下图)


听从驱使:视图不动,符合预期:长按滑动时数据点更新(如下图)


由此可以看出,如果可视化作品操作时不符合用户的既定认知,可视化则变得不受控,用户心里会紧张、导致重复范错,甚至责怪自己。


如果赋予用户较高的驱使感且得到正向的反馈指引,引导用户操作下一步,那么用户心态会更积极,更愿意接受挫折及试错,这种听从驱使可以消除未知、不确定性所带来的紧张与焦虑。



怎么做到听从驱使

前面讲过,可视化听从用户驱使需具备两点能力:

· 驱动 Drive:通过前馈预示让用户知道可视化能做何互动;

· 使能 Enable:通过反馈引导用户进一步让用户与可视化互动;


可视化交互时,驱动用户完成一期探索,探索后反馈引导发出的信号成为下一步操作的前馈提示,再次驱动用户操作可视化后,如此反反复复直到帮助用户找到数据的潜在规律或者找出数据真相。


从心理学的四个概念进一步解释:

· 示能:可视化特性与预设交互的关系,是否可被操作;

· 意符:即信号,告诉用户可采取什么操作,如何行动;

· 映射:事物之间的关连关系,是怎么联系的;

· 反馈:操作之后的回应,是否及时、有效;


示能

示能 Affordance  指可视化作品可能的潜在行动,只有当它们都是可以被感知的用户才容易地发现它们,它揭示了用户与可视化互动的可能性。


例如我们默认认为屏幕上的可视化都可以进行交互,PC 可视化作品可以 Hover 交互,移动端可以点点按按。示能存在但可能不可见,可视化设计师的一部分职责就是实现示能的可见性。



意符

意符 Signifiers 是可视化作品传递的信号,暗示可能的潜在行动,让用户该知道该如何去控制可视化。无论是示能还是交互方式,都应照顾用户已有习惯,需符合用户心智模型。




在 PC 可视化上,可视化设计师很容易忽略鼠标指针样式设计,经常默认一个鼠标样式进行到底,可视化如何驱动用户以及如何让用户具备可视化的能力全靠猜。




映射

映射 mapping 表示可视化元素间关系,应用于控制-反馈模式的设计或布局;比如方向盘可控制汽车转向,下拉筛选器出来的选择框。以空间布局对应关系的自然映射为例。




反馈

反馈 feedback 是用户操作之后的回应,反馈应当是即时、有效的。在可视化设计时,如果需要,我们建议给出用户深层次的反馈以便指引其进行下一步的操作。




小结

要做到听从驱使,需给用户控制感,让用户享有对可视化的控制能力。例如提供足够便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多视图空间,快速定位感兴趣的数据空间,亦或根据特定变量对数据进行排序、突出、降维处理等。当我们将这些组件与交互动作进行结合,用一些习以为常的交互去操纵可视化时,用户将会很清晰、并且有信心控制好当前视图。



数据可视化不仅仅只是一张好看的图,它构建的是一个系统,这个系统随时在解决有限屏幕空间与无限数据空间带来的冲突。这个系统可以驱动用户完成一系列操作后引导用户有能力进一步拿到结果,如此反复交替迭代,帮助用户完成一些平时看来不可思议的任务。只有这样,用户才能操纵听从驱使的可视化,就像文章开头所述,如老司机开车一样丝般润滑。

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

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



文章来源:站酷  作者:Ant_Design

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

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

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



js判断当前浏览器的分辨率

前端达人

var events = navigator.userAgent;
if (events.indexOf('Android') > -1 || events.indexOf('Linux') > -1 || events.indexOf('Adr') > -1) {
console.log("安卓手机");
} else if (events.indexOf('iPhone') > -1) {
//根据尺寸进行判断 苹果的型号
if (screen.height == 812 && screen.width == 375) {
console.log("苹果X");
} else if (screen.height == 736 && screen.width == 414) {
console.log("iPhone7P - iPhone8P - iPhone6");
} else if (screen.height == 667 && screen.width == 375) {
console.log("iPhone7 - iPhone8 - iPhone6");
} else if (screen.height == 568 && screen.width == 320) {
console.log("iPhone5");
} else {
console.log("iPhone4");
}
} else if (events.indexOf('Windows Phone') > -1) {
console.log("诺基亚手机");
} else if (events.indexOf("iPad") > -1) {
console.log("平板");
}

使用js动态引入js和css文件方法

方法1:

//引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

方法2:

//引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

方法3:

var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('参数"path"错误'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');




















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

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


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

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

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


layui 鼠标移动在文字上显示 lay-tips 方法

前端达人

代码:

在源代码加上

<i class="layui-icon layui-icon-tips" lay-tips="最大长度为16个文字" ></i>

JS代码

加上js代码

$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');

this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});






禁用鼠标事件,设置pointer-events属性为none:

pointer-events:none

开启鼠标事件,设置pointer-events为auto:

pointer-events:auto








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

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


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

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

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


5个技巧,让你的做图效率翻10倍!

seo达人



相信很多设计师都会觉得每天时间不够用,没有效率,没有收获,那么今天分享5个时间管理的方法,帮助你提升效率的同时,个人也能得到成长。请看今天的分享,enjoy it。

 

如何做好时间管理?

图片

网上流传一张王健林的行程单,可以看得出时间分配相当满,于是我就特别好奇,专门问了一些我们公司的高P,他们每天那么多工作,是如何去平衡生活和工作的,其中有一个很重要的点就是做好时间管理且自律

比如今天晚上8点要和孩子去看一个音乐会,就会在8点之前把所有的工作全部搞定,然后去陪孩子!是呀,厉害的人,能在某一个点把事情全部搞定,本身就是超强的能力,那么作为职场人,我们该怎么合理管理时间呢,今天分享6个小方法给大家。

 

方法一:番茄工作法 

番茄工作法是由弗朗西斯科·西里洛于1992年创立的一种相对于GTD更微观的时间管理方法。因为创始人使用番茄定时器,所以叫番茄工作法。

图片

 

如何使用?

选择一个待完成的任务,将番茄时间设为25分钟,专注工作,中途不允许做任何与该任务无关的事,直到番茄时钟响起,然后在短暂休息一会(5分钟就行),每4个番茄时段多休息一会儿。

这个方法为什么好用呢?我相信很多设计师和我一样,每次工作几分钟后就会玩玩手机,看看微信,一边听歌,刷着网站,同时做着几件事情。

这个就是明显的一心多用,不够聚焦,番茄时钟好处就是督促你在这个25分钟内,专心只做一件事情。充分利用大脑的集中注意力去高效完成一件事,然后休息5分钟,再开始下一个番茄时间。

图片

当然你也可以根据你个人习惯来调整时间,我将番茄时间的25分钟改成了45分钟,这样有助于我更好的聚焦。比如我有一个需求时,我会花45分钟看完交互流程,45分钟去和开发还原开发细节,45分钟去收集设计灵感,45分钟去把页面框架搭建好,或者设计好一个局部等等,然后休息5分钟,让自己短暂休息下。

图片

 

合理拆解需求

学会拆解任务,设计师的需求有大有小,大的比如一个首页改版,一个设计语言的建立,小的有一个弹窗设计,一个图标绘制等等,那么运用番茄时间的第一步就是你需要对工作任务进行合理的拆解,才能用多个番茄时间段来覆盖整个项目,比如需要做一个首页改版,那么我就需要进行拆解任务。

图片

首页改版可以分成四个大的关键节点,需求讨论,设计风格探索,视觉设计,交付开发,然后每个大的模块下再细分小的任务,然后进行番茄时钟的评估,比如色彩收集我可能需要2个45分钟,那么就2个番茄时钟去完成它。

所以我们要学会合理的去拆分你的需求任务!明确到可执行的番茄时钟。

 

及时提醒

图片

每个25分钟或者45分钟的时间点提醒一定要及时,闹钟响了,停下手上工作,短暂的休息调整下,切忌继续一直工作下去,因为只有适当休息,我们才能更加高效,高质量的完成接下来任务。

 

听听白噪音

图片

很多同学在工作时,喜欢戴着耳机听着音乐,但是在使用番茄时钟时,我不太建议这样做,原因在于音乐会干扰我们思考,有时候音乐还会影响你的情绪,所以这个时候建议大家听听舒缓的白噪音,比如海浪声音、风声、雨声,我个人比较喜欢听海浪拍打的声音,能够让自己静下心来。

这里推荐一个番茄时钟的MAC工具,叫番茄钟,里面除了设置番茄钟外,还自带很多白噪音,非常好用!

图片

 

方法二:四象限时间法 

美国的管理学家科维提出的一个时间管理的理论,把工作按照重要和紧急两个不同的程度进行了划分,基本上可以分为四个“象限”:

1.既紧急又重要:

如同事投诉、即将到期的任务、上线危机等

2.重要但不紧急:

建立人际关系、设计培训、制定设计规范等

3.紧急但不重要:

如取快递、部门会议等

4.既不紧急也不重要:

如网购、闲谈、邮件、发朋友圈等

我们需要把每天工作任务,按处理顺序划分:先是既紧急又重要的,接着是重要但不紧急的,再到紧急但不重要的,最后才是既不紧急也不重要的。我们具体来看看设计工作中的一些场景。

图片

 

既紧急又重要

设计师工作场景:比如项目上线前的设计更改,明天和主管汇报的PPT,需求设计评审,这是我们每天工作的核心,大多数设计师在公司中日常任务就是产品的迭代,那么重要的事都是不能一拖再拖,都是迫在眉睫。

因为整个产品是赶时间点的,比如双11那天必须上线,那么无论如何都要按时保质量的完成,所以这时候是考验我们经验、判断力的时刻,如果没有做好,很有可能影响你的考核和晋升。

我自己的方法是每晚睡前给自己列出明天最重要的必须完成的3件事情,并用工具软件记录下来!

图片

 

重要但不紧急

这里主要是和你个人成长发展有关,比如学习英语、提升动效技能、掌握C4D、理财等等,这些很重要,但是很多时候我们每天都在处理重要又紧急的事情,特别是互联网公司,每天都在做需求,对于自己的个人规划,根本没有时间处理,就会导致你个人的提升这些事情完全没有时间做,多把精力放在这个领域去提升自己,必须主动去做,这是对于你个人成长最有帮助的。

比如你未来3年希望去大厂工作,那么你就要列出来大厂设计师的技能有哪些,比如科学设计方法、设计思维、动效、数据能力,然后都放在你重要不紧急事情里。在精力有限的基础上多做投入和提升,慢慢才能达到目标,否则就一直成为流水线设计,或者项目里面一个资源方,个人成长永远没有!

图片

 

紧急但不重要

比如PM找你聊需求,当然正常需求该聊还是聊,但是工作中经常有的聊,真的只是陪聊,很多时候真的在没有必要,没有结果的开会,聊需求真的是浪费时间,表面看似第一象限紧急事情里,因为迫切的呼声会让我们产生“这件事很重要”的错觉——实际上就算重要也是对别人而言。我们花很多时间在这个里面打转,其实不过是在满足别人的期望与标准。

设计师经常遇见的,改文案啊,产品会议,开发排期这种会议在我看来,出来关键节点有结果的需要参加,更多事情能少参与就少参与。

图片

 

既不紧急也不重要

这里的既不紧急也不重要就是每天你花费时间最多的地方,比如群里聊天,刷朋友圈,抖音,看八卦新闻,当然人都是需要一些无聊消遣的,但不值得花很多时间在这个象限。刚开始时也许有滋有味,到后来你就会发现其实是很空虚的。

我经常给大家说,你怎么比别人进步更快,就是设计之外的8小时你在做什么。别人工作时间外8小时都在学设计,学各种课程,而你在做些无聊事情,一年下去差别就出来了,不是说我们不应该去娱乐,而是需要注意时间分配。

总之,关于时间的4象限,需要大家多多的关注,多把精力放在重要又紧急,然后允许情况下,多提升重要不紧急事情的投入,长期坚持下去,你会有巨大的改变。

 

方法三:先思考再动手 

图片

在接到需求时候,多问自己几个为什么,这个页面为什么要改版?改版是为了提升用户留存,还是活跃度?还是提升页面转化?还是优化了什么?了解清楚,梳理清楚逻辑、流程关系以后再动手,这才是一个正确的做事方式,同时也需要思考,你在这中间做了哪些有价值的事!

这个道理很简单,但是很多人都没有做到,我也有很多时候,做着做着掉进一个坑里,所以做之前想清楚,想好了再做会更好!

 

方法四:避免重复造轮子 

图片

 

避免重复,经常总结积累

做一件事情,学会举一反三,学会从点到面,在很多公司面试晋升过程中,比如阿里,P6资深设计师和P7专家设计师,很重要的一个技能点就是,如何从点做到面。

我们在做很多需求时候,需要思考,这次做的这个需求后续如果遇见类似的,能不能快速解决,而不至于浪费时间和精力投入进去没有成长!比如说按钮设计,我们随便抓一个市场上的按钮,你会发现按钮的样式、大小颜色就是各种不统一,浪费开发资源和设计资源!如果你每天的工作都是做这种浪费精力没有存在感的事情,对于个人是很不利的,平时做项目多留心下,比如我做一个专题页面是不是可以去思考下,这个页面做完哪些控件我可以沉淀下来,复用到其他的场景中,赋能给其他设计师呢,这个是很重要的!

同样的,比如我们最近在研究一个弹窗,那么是不是我做这次弹窗,我就把弹窗彻底研究透彻,弹窗尺寸大小、颜色、按钮、状态都研究彻底,彻底掌握了这个知识点,后面再做弹窗信手拈来,深刻搞定一个任务,避免反复,经常总结和积累,也是提升效率很重要的方法。

图片

 

当你觉得很难的时候其实是在上坡

这是我很有感触的一句话,人的成长体现在同样的事情上,万事开头难,但后面会越来越顺手,因为在这个过程中你已经掌握了方法,我们需要做的就是不要半途而废,要学就学透学完整,后面工作效率就上来了。

图片

我们的专业知识就像这4个空杯子,一个代表AE,一个是C4D,一个是UI,一个是插画,很多东西都想掌握,于是每天学习一次就往这个杯子浇水一点,但是坚持10天就坚持不下去了,要么学别的,要么没有动力了,然后导致最后什么都没学到。

图片

正确做法是把一件事情学透了,学彻底了再去学下一件事情,你学AE就彻底把AE掌握了,再去学下一个,这样避免反复,彻底掌握不仅能加速你的成长,更能让你专业更深!

 

方法五:放下手机,定时间点 

最后这个方法对我来说很有效,学会放下手机,放下干扰,中国口香糖的营业额持续下降,大家知道为什么吗?口香糖一般都会摆在收银台的旁边,因为用户在超市收银台排队的时候,都在玩手机,没有人去看前面的货台!可见手机对我们影响有多大,所以当你准备学习时候,或者去完成一个任务时候,最有效就是手机放起来,至少一个番茄时间不要去看,这样保证你的效率变高。

另外一个方法就是定时间点,定结束时间点很重要,人对于时间点都是有天然遵守的,比如地铁错过末班车就回不了家,火车飞机晚点你也回不去,所以我们做事情时候可以立一个最晚完成时间,然后去做,比如我写作,定的时间就是每周末必须写完,所以我周末再忙,都会去抽空写完。

 

最后 

今天分享的这些经验,都是我实践过并有效的方法,希望可以帮助到大家一同实践起来,照着做下去,你会发现能压缩至少1/3的时间出来,让我们都把时间花在正确的事情,和正确的人身上,快乐工作,快乐成长,快乐生活!

 

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

转载请注明:学UI网》5个技巧,让你的做图效率翻10倍!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

当负责人和组内设计师过稿子的时候,都在想些什么?

seo达人



今天依旧是篇实战小分享,就是简单和大家分享下我最近和组内小朋友们的过稿日常。每次过稿子前我都深深在心中铭记3条准则:别刷存在感、别装13、别下手太重。这里和大家分享下我的心路历程,希望能对大家过稿有亿点点帮助。

 

1.不想看需求文档

通常拿到设计师投喂的需求设计稿后,第一时间非常抵触去看需求文档。不用找其他借口,不看需求文档纯粹就是因为懒。不过很神奇的发现,站在陌生的第三视角反而比沉浸在需求文档里更容易发现一些问题。(绝不是为我的懒找借口)

 

举个例子:

之前做海外版的需求,看到设计师有一个列表页面设计成这样的,我反复看了几遍都没明白这个“5 times(5次)”放在爱心按钮下是啥意思。

图片

直到对稿子的时候,设计师拿出了原型,上面对这个“5次”的解释赫然写着“访问次数”:

图片

图片

可能现在大家和我一样站在第三视角都会觉得这样的布局不合理,也不清楚“5次”的意思,但是在完整的需求文档面前很多时候疑问后面直接有解释的时候,我们就容易沉浸到产品给的信息设计中,忘记以一个陌生用户的视角来重新审视信息的设计了,也就是通常意义上的信息理解免疫

如果我们按照新的思路重新捋一下:这个访问次数应该和什么信息群放在一起更合理?

于是我们决定把字段信息都放在左侧,做一个三分段的信息布局:依次是名字、性别、访问次数、最后是访问时间。同时在访问时间字段上增加信息的补充辅助用户理解含义。整体对比如下图:

图片

 

2.交互细节好像不够合理

其实很多团队是没有专门来做界面细节交互的设计师的,就算有title是交互的设计师承载的任务大部分也都是原型绘制和无止尽的PPT产出。所以界面里涉及的一些权责模糊的交互细节大任就落到ui的头上,但这往往也是设计师们容易考虑不周全的地方。

 

举个例子:

我们这期的设计改版中涉及到一个礼物面板,设计师已经做了很多的基础优化(转线为面、空间排布及信息降噪)

图片

但这位积极的童鞋不止于此仍然还想做点创新的东西出来,ta参考了下之前look的交互,又做了一个直接竖滑动的交互设计:

图片

(左图为look直播的礼物面板交互)

 

这个交互方式比原始的轮播点横滑看上去要高大上与创新很多,but市面上不太有直播类的产品用到这种看上去very good的交互方式(除了look),那么这到底是为什么呢?

图片

仔细观察我们就可以发现使用了直接竖滑的look对礼物的种类进行了详细的分类(常用、热门、玩法、特权、星座等),且每个分类下的礼物滑动基本不会超过2行(大部分控制在一屏内)。

而对于我们现在要设计的礼物面板tab分类的方式并不是以礼物种类为维度的,所以所有礼物都被放到了一个tab下(数量很多),竖滑动没有轮播点的情况下用户很难定位到某个具体的礼物,而轮播点横滑就可以很好的对用户带来操作记忆,比如哪个礼物放在第几页大哥滑动几次就可以找到了。

而当设计改动极有可能影响到大哥送礼物的时候,以营收kpi当头的项目组是万万不敢轻举妄动的。

 

3.用户理解成本好像还可以降低

很多设计师设计的图标、布局都已经非常nice了,在设计质量上是没有任何问题的,但老实说设计这东西没有最好只有更好,除了好看我们需要更关注设计本身传达给用户的理解成本,成本越低体验的障碍就越小,这样带来的点击与转化也越多,这是一个即使不量化数据也相对合理的一个体验假设。

 

举个例子:

很多铁汁可能都做过会员、贵族之类的权益中心,通常这个聚合页的常规排布中段就是一大坨展示权益的图标和文案说明。

因为是权益等级大家的配色估计都会用的比较炫丽,这里我们展示的是一个贵族中心的权益图标,按照产品大大的指示,ta想要那种尊贵的黑金质感,所以我们的设计师就做了如下的设计:

图片

整体黑金质感已经符合产品的预期,也符合基本的设计质量要求,但如果要很严格的细究的话仍然有可以变得更好的方式,所以看到这个设计方案的时候我在想2个事情:

  1. 整体的亮点视重应该放在权益展示部分还是操作区呢?
  2. 图标氛围亮和暗2种代表着解锁与未解锁的概念用户能否一眼就get到?
  3. 现在一屏完整展示9个权益图标,但是实际上所有的权益图标超过了9个,这样的设计是否会影响信息的曝光(因为用户不知道底下还有更多了)?

于是,我们又做了下设计优化,如下:

图片

按钮增加了动效和光带,大家可以自行脑补。

以上就是我们过稿的设计日常,很符合猪厂“专业偏执”的特点。

 

原文地址:Nana的设计锦囊(公众号)

作者:柒爷

转载请注明:学UI网》当负责人和组内设计师过稿子的时候,都在想些什么?

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

数据好体验就好吗?

资深UI设计者

很多同学面试时候都会被问到产品数据,用户体验等问题,这篇文章将讲解产品数据中面试官最为在意那几个指标,以及用户体验的考核方法。*本次话题我会分为上、中、下两篇文章,此文关于产品数据哪些值得我们看,如果这篇文章能帮助到你,还请点赞、分享我会抓紧你分享下一篇怎么体验度量的方法文章。



                                       


1 为什么大厂面试都会问数据


a 数据衡量你的项目是否真实

现在ui市场竞争激烈,选人也很苛刻,面试官判断一个人是否可以入职大厂的第一个指标就是真实,而数据类的问题往往是划分这个人做的项目是否真实的一个重要指标。

因为只有真实的项目才会有数据的提现,自由发挥的项目往往是答不上来有关数据的问题。

所以在大厂面试中都会或多或少的提问数据相关问题,这也是很多同学能进入大厂的一条重要分水岭。


b 录取后给你定什么职位

设计师群体偏感性,单单的看设计作品很难和其他竞争者拉开差距,所以需要理性的数据思维拉开与其他设计师的差距增添自己竞争力的附加值,另外一点通过产品数据的表述可以更有力的证明自己设计方案是最好的方案,方便后期给予定位高级、资深还是专家岗位。


2 数据在项目中的作用

设计师在做多个设计方案对比的时候会遇到这样的提问,现有的设计方案是最适合用户的吗?究竟哪个版本是更好的?为什么是这个版比较好?有的人拿产品埋点数据来评判,有的人用用户反馈来评判,也有的人则坦言需要靠老板的建议来进行评估。


a 数据是一个衡量好坏的一个指标

数据是衡量一个产品甚至一个功能最为科学的办法,他在不同的开发场景中都起到很重要的作用。比如:


·在设计开始前,数据可用于发现问题、分析问题。从数据角度了解用户诉求,发现产品存在的问题,为产品设计优化提供启发和突破口。

·设计过程中,数据可用于帮助决策。通过历史数据论证各个方案的优劣和有效性,再择优。

·设计评审中,数据可提升设计方案说服力。通过理性数据分析,获得团队内部成员、产品/业务方对方案的认可。

·设计上线后,数据可用于量化用户体验价值。通过采集上线前后的数据变化,判断设计目标的实现程度。

大家有没有发现在我陈述的过程中,一直在说数据分析,那这个数据分析是怎么来的来呢?

其实数据分析就像是一个个监控产品数据波动的摄像头,实时监控着数据的波动。以下是我整理关于数据埋点的理论知识,让大家对数据埋点这个概念有个清楚认知。



b 数据对设计师的三个意义

很多人会认为数据是产品经理、运营的工作,其实不然数据对设计师也是设计师的工作,我把数据对设计师的意义归纳为三点:

undefined


1)为设计提案做依据

产品设计者可以由产品经理,UX,UI担当,那需求不能自己凭空出现的,是由相关人员需找出来了,数据就好比一个放大镜,它可以通过线上的数据波动来找寻目前存在的问题即需求。其实这就好比设计师的思维又产品思维转换成数据驱动思维。比如


1、产品初期,没有产品、没有相关的后台数据,那我们要做一个什么样子的产品,就这一个需求。做什么样子的产品可以通过了解大众用户、了解大众市场的数据分析报告得出一个结论,明确我们要做什么样子的产品,这就是数据对设计师的第一个价值做设计提案的依据。比如以下这些场景都需要数据做依据进行设计提案。


2)验证方案是否解决用户需求

判断这个设计方案是否解决用户需求:

2、在多个设计上线后,产品设计、运营方案与产品研发的三方对设计师输出的方案存在分歧点。

也可以通过后台的数据反馈来筛选出哪个方案最符合产品目标(即北极星指标),在多个设计方案中最好的设计解决方案。


3)晋升中衡量设计价值的指标

当然也有一些公司,做为后期晋升,评判设计价值的一种方法。

比如怎么证明自己的设计方案和其他同事相比,设计方案就好呢?通过数据对比,说明自己输出的设计方案价值远高于其他同事,以此证明自己的价值。



3 数据常用于哪里

其实在我们的工作中有很多设计方法可以辅助我们设计更好的设计方案,比如用户调研,竞品分析,产品测试等。这些方法都是通过对用户数据的反馈和整理来判断去发掘方案里面的问题、验证最终方案是用户是否满意。


用户调研:可以把字拆解开来看就两个字面意思,调查:反映客观事实。研究:分析客观事实

主要的形式是用户调研和用户访谈,直接出过这篇文章,有兴趣的朋友可以查阅。

传送门地址:http://www.woshipm.com/pd/4745810.html


竞品分析:确定几款市场上竞争产品,然后通过对产品功能、产品定位,信息架构、颜色、布局、风格等元素的分析,找不同点,再通过数据对比确定产品方案的一种办法。

(因为不同职位做竞品分析的目的,角度和方法都不相同,这里我就不一一讲解了,如果大家有需要后期我会考虑开一篇怎么做竞品分析的文章)下图是制作竞品分析的常规流程。


产品测试:这种方法是用处最广的一种方法,可用性测试是指让一群具有代表性的用户按照指令对产品进行典型操作,同时观察员在一旁观察、记录。

比如我们发现首页Banner的点击率很低,这时候我们就要想办法「通过设计」来提升Banner的点击率,是Banner的大小问题?还是轮播图切换的速度问题?还是图片样式的问题?

但是设计师没办法直接确定他到底是什么问题,所以就需要拿出不同方案给用户测试,看看哪个方案更容易促进他点击。

常用的测试办法有很多这里我就讲三个方法:一个是可用性测试、一个是灰度测试、一个是A/B test测试。


可用性测试:通常在产品开发之前使用,模拟真实的使用场景让用户体验,目的是使用最小的成本来输出正确的设计方案,避免全部做出来以后在进行调试修改。

灰度测试:是指产品开发通过后,将测试的版本发布到真实的线上环境中去,收集用户的反馈。

A/B test 测试:是指产品测试通过并发布之后,同一个功能将使用人群分为两个部分,一部分人使用a方案一部分使用b方案,对比数据波动。





数据的纬度有很多,首先咱们先来看看产品的数据都从哪里来的。通常情况下设计师可以直接找运营人员、产品经理、设计负责人在公司服务器日志里面调取产品埋点数据;或者项目结束后,项目负责人会发产品复盘邮件,数据考核邮件指标等信息,产品埋点数据也会在复盘邮件中体现。


除了以上两点数据来源,还有CNZZ网站分析、百度统计、goodle anlytics可以查询到相关数据。


1 数据可以分为「三个层面」

产品中的每一项数据其实都代表产品的一个纬度的数指都有其意义,如果想用比较简单的方法记住这些有用的数据不妨试一试以下这个办法:


我们可以把数据分为三个层面进行记忆,即用户数据 (描述用户人群的);行为数据 (描述用户使用方式的);业务数据 (描述产品营收的)。



2 用户数据的「四个维度」

用户数据 (描述用户人群的)主要意思就是描述使用产品的这个人群的。这里有四个比较有价值的概念需要大家了解分别是存量、新增用户、用户留存、渠道来源这四种。


a 访问量

访问量也有人称其为活跃用户数、用户存量,其实都是一个意思。简单理解就是指一个人来到网站,然后浏览了一些内容之后离开网站的过程(这个过程也会被称为访问),既在特定的统计周期内,再次访问产品的用户称为访问量。有三个专业名词—DAU/WAU/MAU(日活/周活/月活):每天有多少用户来用产品,每周有多少用户来用产品,每个月大概有多少用户来用产品,这是判断产品规模的最基本的指标。方便产品和设计人员了解产品的每日用户情况,了解产品的用户变化趋势。


DAU(日活):某个自然日内访问产品的用户,算该日一次日活(统计结果去重统计);

WAU(周活):某个自然周内成功访问产品的用户(统计结果去重统计),这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;

MAU(月活):某个自然月内成功访问产品的用户(统计结果去重统计),这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。



*这里补充一个知识点-去重统计:统计结果是按照设备去重统计,如同一个设备多次访问后台只记一个活跃用户。



b *新增用户

新增用户是一个企业很看中的数据,特别是在业务的起步阶段,这个指标尤为重要;这个代表公司的潜力。比如拼多多这家公司一年比一年亏损多,但股价却越来越高,主要原因就是资本市场看好拼多多用户的增速,按照统计跨度不同分为日新增(DNU)、周新增(WNU)、月新增(MNU)。


*在新增用户里面还有一个“用户流失率”的概念需要大家了解。流失率指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户,用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。

产品阶段不同,重心也会从拉新转移到留存,对于一个成熟的产品和饱和的市场而言,获取一个新用户的成本可能是留住一个老用户的数倍,流失率的降低也意味着营收的增加,在这种条件下,流失率的价值是显而易见的。


提到新增用户就一定要说《增长黑客》,这本书里边提到一句话非常精炼的概括了“增长”的概念:以数据驱动营销,以迭代验证策略。通过这句话应该就可以感知整本书的中心思想就是“数据”和“实验”,即AARRR(海盗模型)模型。通过阐述了一个用户生命周期的各个阶段——获客、激活、留存、变现、推荐和召回,实现用户增长的产品目标。



*a-ha moment:a-ha moment也叫Aha时刻中文翻译过来就是尖叫时刻,是增长的一个概念词汇,是指用户通过某个特定行为(产品内的功能体验)得到了很爽的体验,用户可以快速且准确的认识到产品的价值。例如很多知识付费类产品,都会让新用户完整的体验视频看课的流程并且感知到课程的价值,很可能变成产品的新增用户。


c *用户留存

上线的产品怎么反映用户的状况是不是健康呢?最好的指标就是留存率。即在某一统计时段内的新增用户数中再经过一段时间后仍使用产品的的用户比例(留存率=留存用户/新增用户*100%)。留存率又分为次日留存率,次周留存率,次月留存率等


以上三个指标的数据越好能反映用户愿意留下来,才能说明他们对产品的服务满意,满意才能养成惯性,持续消费,例如产品改版后,次月留存率提升了,且其他变量没有变化时,说明用户粘性是上升的设计改版成功。所以这三个指标是产品体验最直观的数据。



1)次日留存率,常用来衡量用户粘性。

通过日留存率的数值来判断一个 App 的质量,通常这个数字如果达到了 40% 就表示产品非常优秀了,比如可以结合产品的新用户注册的转化路径来分析用户的流失原因,通过不断的修改和调整来降低用户流失,提升次日留存率。


2)次周留存率(7日留存率),用于判断产生的忠实用户数。

通过周留存率来判断一个用户的忠诚度,比如在一周的时间段里,用户通常会经历一个完整的使用和体验周期,如果在第七日用户还在使用产品,就可以定义该用户为忠诚度较高的用户了。


3)次月留存(30日留存率),用于衡量版本迭代的效果。

通常 App 的迭代周期为 2 - 4 周一个版本,一个版本的更新,或多或少的影响用户的体验总成用户流失,所以通过比较月留存率能够判断出每个版本更新是否对用户有影响,衡量版本迭代的效果。


d 流量获取(渠道来源)

根据字面意思来讲就是描述用户路径,来指的是这些人变成用户之前,都来自哪里;知道用户从哪里来才能知道在哪个渠道做推广会更有效,一般和用户留存的数据搭配使用。


3 「行为数据」的五个纬度

关于行为数据是数据中的一个重点知识,此次主要讲解次数/频率、点击率、转化率、用户停留时长、跳出率、退出率这个五个纬度。



a 页面访问次数(pv)和人数(uv)

这两个指标能够了解用户的使用行为,衡量页面入口的设计和与其他入口的设计相比是吸引用户的注意力的核心指标。


·页面访问次数(PV ;PageViews的缩写)用于判断该活动/页面/功能被用户查看的次数,即页面浏览量;

·页面访问人数(UV;Unique Visitor的缩写)用于判断有多少个用户查看过该活动/页面/功能,即访问深度,也就是指用户的访问深度(总产品流程的体验完成度)。





b 点击率(CTR)

点击率(人均点击次数)是指网站页面上某一内容被点击的次数与被显示次数之比,即点击次数占展示次数的百分比。通过人均点击次数可以判断交互/视觉的设计要求是否足够引人注目,也可以用于衡量该功能对用户而言是否为强需求。通过下面这个案例让大家了解一下用法,比如7月7日10万人点击了“确定”按钮,其中一共点击了12万次,那么点击率(人均点击次数)为12/10=1.2次。


*点击率中也常常会结合pv和uv的数据使用,即PV点击率=点击次数/页面访问次数(PV);UV点击率=点击人数/页面访问人数(UV)




c *转化率

转化率即达到产品某个目标的访问量除以总的访问量,或达成目标的访客数占总访客的比例,即转化率=转化次数/访问次数。简单理解转化率是把用户分为“只逛不买”的用户,还有“逛了 就买”的用户,还有“逛了买买买”的用户。


为什么说转化率很重要,因为转化率常常是项目中企业最为看重的一个数据,毕竟转化率高了公司收益也就提高了,而且转化率的提升也常常是解释设计方案最好的支点,比如:在国外的养老计算器中,用户需要输入相关的字段后查看计算结果详情,最后得出计算结果,在这个流程中用户的转化率很低(在结果详情中会有金融产品)。但是如果把结果前置,比如新方案把输入字段,结果详情和计算结构都放在一个页面展示,就会提高用户的购买决策,大大提高转化率。


这里有一个思维方法即漏斗分析法,大家需要了解:

漏斗分析最常用的是转化率和流失率两个互补性指标。用一个简单的例子来说明,假如有100人访问某电商网站,有30人点击注册,有10人注册成功。这个过程共有三步,第一步到第二步的转化率为30 %,流失率为70%,第二步到第三步转化率为33%,流失率67%;整个过程的转化率为10%,流失率为90%。 该模型就是经典的漏斗分析模型。



d 用户停留时长

这个指用户在产品中的停留的时长,即所有用户session的时长总和/session数量。也有产品通过用户停留时长去衡量页面吸引度、判断用户粘性和依赖度,举个例子,抖音的页面内容吸引度就很强用户粘性就很高,用户的停留时间也很长。回想一下,是不是每次刷抖音,很快一个小时就过去了。这里的商业逻辑是,用户停留的时间越长,在产品中用户付费的可能性就会越大。



总结一句话:停留时间越长,用户粘性越强。当然也有反面场景,比如登录注册的表单填写,停留时间越长,说明体验越差。


e 跳出率(BR)

跳出率指该用户来到网站后,没有进行操作就直接离开的比例,即访问了一个页面就离开的访问量与所产生总访问量的百分比,跳出率等于访问一个页面后离开网站的次数/总访问量*100%。


这里有一个容易混淆的概念即跳出率和退出率。其实这两个数据都是用于衡量页面的内容质量或交互质量的一个指标。比如当用户进入 app后,只访问了一个页面就离开了,跳出率和退出率越低说明流量质量越好,用户对产品的内容越感兴趣。



4「业务数据」的四个纬度

接下来我们来看看三层数据中的最后一层概念——业务员数据,即和财务相关的数据知识。


a 总量

GMV (Gross Merchandise Volume),这个词太常见了;大公司在发布财报、销售额、成交量的时候,这个数每次必提。*值得注意的是GMV=销售额+取消订单金额+拒收订单金额+退货订单金额,包含付款和未付款两部分。


b 人均

ARPU(Average Revenue Per User,每用户平均收入),光总数高还不行,我们还要关心平均每个用户的贡献是否够多,是否在增长,所以就要关注人均的指标。它是 App 成功的指标,是用户忠诚度的反应,是预测用户增长的工具。


c 付费率

整个产品业务也要有一个健康度的指标来衡量,付费率就是这个衡量指标。到底有多少比例用户是付费用户,这就是付费率。我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高,这说明用户对该产品的认可度越高。







1 数据也许会骗人

数据并不会骗人,而是人看的数据不同,造成结论不同。在使用数据之前我们要认清楚以下三点偷换概念、只看单一纬度、数据不是万能的。


a 偷换概念

今年7月美国总统特朗普举了一个案例,我记忆犹新。在一个电视采访节目中他说“美国的死亡率低于欧洲的水平”他的算法是所有新冠死亡人数除以所有确诊人数得出右侧数据。



其实他就是偷换了一个概念,在医学上有两个指标去衡量死亡率,一个是病死率一个是死亡率。


当然两者在算法上是不同的,如果看病死率的话,美国的确低于中国,但是如果按照死亡率的结果看的话,美国是远高于其他国家,中国是美国相比一百五分之一,这结果是恰恰相反的。


这里就是一个偷换概念的例子,虽然病死率和死亡率都能反应生病的人数,但是病死率考虑的是救治能力。死亡率不仅考验救治能力,还考验着控制传播的救治能力。


b 只看单一纬度数据是表象的

如果单从一方面看数据是没有意义的,没有其他数据参照,挖掘不出数据的真正价值。

比如:我们在讨论一个产品是否成功时候,往往会看一个最突出的纬度数据,比如这个产品有2亿的日活,这个平台有5000万的产量。

也显然这种只盯着用户数量和产品规模的产品的做法是不对的,他并不能真实的反应一个产品是否成功,假如一个产品的日活是2亿但是愿意付费的用户不到1w,这个平台虽然有5000w的产量,但是用户的平均停留时长很短,很显然这并不是一个很高兴的事情,因为可以从侧面保暴露出产品的质量可能存在问题,导致用户付费意愿不高,停留时间较短。


c 数据有局限性

我们要搞清楚这样一个认知,数据虽然可以最为直观的反应产品的健康程度,但是数据绝对不是万能的,他只是衡量产品的用户体验的工具,就好比我之前写的问的用户调研的文章只是一种工具也存在其局限性,数据只能告诉waht,但是不能告诉why,而这个why是设计师做方案选择的关键所在。


2 数据应该怎么用

数据本身并不会欺骗人,他就真实存反应产品的表现,只是很多人用错了使方法或者认知出现了偏差,如果想把产品数据的价值利用率达到最大化,建议每次做数据分析时候从以下三点使用数据:


a寻找关键数据目标

为了避免偷换概念的情况出现,除了我们要理解数据概念之外,更重要的是寻找出关键的数据目标。

以上讲了这么多数据名称,但是大家需要注意的是并不是每个产品都要看这些数据的,不同的产品需要看的数据侧重点不同,就比如qq音乐看的是日活跃用户、淘宝看的是销售额、王者荣耀看的用户平均付费额度(appu),新浪新闻客户端看的是网站访问数量(uv)。


1)用户生成内容(UGC)类数据指标

UGC(User Generated Content)指用户原创内容,从进入web2.0时代后UGC第一次被论坛/社区应用,到今天,互联网产品或多或少都带有一点UGC属性。这些产品主要有抖音、知乎、人人都是产品经理、站酷等。

评价这类产品往往会从发表文章、用户点赞、订阅、评论、分享、打赏等几个数据指标进行评判产品是否健康。


2)电商类要看gmv

GMV(全称Gross Merchandise Volume),即商品交易总额 [1] ,是成交总额(一定时间段内)的意思。这个实际指的是拍下订单金额、包含付款和未付款的部分。


休息一下

听了脑袋大了同学不用担心,我特别绘制了下面这个表格,保存截图慢慢看就好了。


b 找好参照物A&B test 测试方法

多数产品在进行数据分析的时候,最常用的方法就是A&B test 测试法。(上面讲到了A&B test 测试发)


1)案例一

很多时候我们看数据不能看一个纬度,要看两个或者多个纬度,才能筛选中自己需要的结果方案。

比如这个案例在探究“与用户强相关的 BI 品类楼层,商品展示普通利益点和带券利益点,哪个更优?a方案展示普通的利益点,如“销量过万、好评率99%、满199减100”。b方案只展示带券利益点的文案,如“满199减100,领券”。

最后看的数据是A方案的点击率高,b方案的曝光点击率更高(由于方案 B 中可领券和点击跳转商详,可能有部分点击为领券导致,故方案 B 点击更高但点击转化偏低)。

如果单独看点击率或者转化率很难做出选择,但是只要两个数据综合看,就很容易得出B方案(带券利益点)能带来更高的曝光点击,引入订单表现更优的结论。



2)案例二

在做A&B test 测试时,是需要保持单一变量测试,现实生活中,很难做到单一变量测试,所以数据很多时候都需要进行分析探讨,才会有价值。

比如我们在首页流量分发场景中做了A,B两个视觉设计方案,a方式是所有的品类展示使用魔方圆形坑位,b方式是方形坑位。想探究方圆形坑位和方形坑位,哪个更能吸引用户点击?


最终A方案(圆形)用户点击数据为4.87%,B方案(方形)的用户点击数据为15.85%,那么,从这个A&B test 测试法的结果中就可以推导出B方案(方形)更好吗?

事实可能并不是,大家仔细观察不难发现,两个方案除了品类的背景造型不同之外,品类的种类也不同,文案的描述也不同,没有做到保持单一变量的测试环境,所以B方案(方形)更能吸用用户的点击这个结论是不成立。可能成立的是方形的展示面积比圆形的展示面积要大,可以更好的曝光产品的特点,而且促进B方案(方形)更吸引用户进行点击。

c 采用多次定性+定量验证

我们得到了数据其实可以采用多次定性+定量验证这种方式来验证我们方案是否解决了用户需求,是否完成项目目标。

定性可以采用用户访谈、眼动测试、可用性测试等方式去发现问题(需求)的多样性和严重程度。定量的方式有用户问卷、站内行为分析、A&B test 测试等方式,验证这个问题的发生概率。


比如我们可以通过五次定性质、三次定量的方式,通过数据反馈把结果更加靠近真实。


3 了解双面数据(虚荣数据)

什么是双面数据呢,其实也就是那些看上去很好,却不能给这个产品带来丝毫价值的数据,需要对比着看才能了解数据的价值。


a 点击率(CTR)

比如一个用户在有些资源位连续点击或者因为一些利益性的活动补贴引发的点击量变化这类场景在用户人数总量不变的情况下,单独位置的点击量增加,必然会导致其他部分的点击量降低,其实是0和博弈,增加这个功能的点击量是片面的。



b 访客数(UV)

计算访客数只是一场毫无意义的人气比赛,其实访客数可以分为三个类型即曝光UV、点击UV、意向UV,单纯地看这三个uv是没有意义的,除非能让用户做对产品有利的事。比如,在推出活动时,有多少用户能转化购买?只有知道了这个数字,这个用数据数才是有价值的。


·曝光UV即曝光在视野内的访客数,例如我们在淘宝搜索某个产品进入了搜索的feed列表页,当我在这个列表场景停留2-3秒的时候,我没有购买任何产品的情况下,数据就会判定我为一次曝光UV。


·点击UV即有点击行为的访客数,还是以淘宝做为例子,现在我在feed流列表页面里搜索产品,其中有一件是我比较中意的产品,我点击了产品进入到这个产品的详情页,在我没有购买任何产品的情况下,我发生了点击行为,数据就会算我是一个点击uv。


·意向UV即进入意向页面的用户数,其实这个和点击uv有点像,比如我在淘宝搜索完我想买的产品a,有去京东搜索了一下,那京东就会判定我为一个想要购买产品a的意向uv,这个意向uv只可以判断出我们对a产品是否感兴趣,并不能判断出我真正想要购买。


c 停留时间

用停留时间数据来统计用户参与度或活跃度,他并不能说明什么问题。比如,客户在某个全是文字内容页面上停留了很长时间,有可能是看不清楚或者是文字理解难度影响了用户的阅读时间,所以说产品效率、体验这两个关键指标本身就和停留时间相矛盾。


d 下载量

尽管有时会影响你在应用商店中的排名,但下载量本身并不带来价值;还需要参照的是:用户下载后的激活量、账号创建量以及用户在产品中的各个场景的跟踪。


e 退出率(ER)

很多人会有一个误区,认为退出率高是不好的一项数据,但是大家要明白并不是所有的场景跳出率越低越好,举个例子:我们通过漏斗数据发现用户操作路径太长,把好几个步骤的路径缩减到一步操作,最后看到用户退出率就减少了。



最后大家要清楚

数据是用于支撑设计师的某项设计决策和方法,但数据无法代替设计的直觉,更无法代替深入的用户研究、我们要学会利用数据指标,找出问题所在,通过设计方案改变用户行为,因为数据最终目标在于价值的体现:有效获取用户,创造营收。


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

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


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

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

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

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


网格系统:如何使用布局网格构建更好的 UI 设计?

资深UI设计者

网格系统已在印刷出版物中使用了很长时间。就比如阅读报纸,了解新闻如何以网格和文本块的形式呈现。这很简单,同时也很难系统。

网格系统已在印刷出版物中使用了很长时间。就比如阅读报纸,了解新闻如何以网格和文本块的形式呈现。这很简单,同时也很难系统。

但是,网格在印刷品中与在数字媒体中一样重要。没有什么比设计不一致更令人沮丧的了。它看起来不仅不专业,而且还使导航和阅读变得更加困难。这就是网格有用的地方。

不可否认,良好设计的秘诀在于视觉元素如何根据它们的位置进行组织和排列。您可以使用布局网格来实现这一点。

与颜色一样,排版也是UI/UX 设计的重要组成部分。布局网格也是其中的重要组成部分。如果没有网格,您的文本和图像将会无处安放,造成混乱。

因此,为了让您更容易理解,我们整理了这份关于网格的指南。它会告诉你:

A. 什么是网格?

B. 布局网格的类型

C. 交互设计中的布局网格

什么是网格系统?

网格系统,说的在简单的话,就是彼此交叉的垂直和水平线的组合。然后使用这些交点来安排网站或应用程序上的内容。网格系统允许设计人员以易于理解和更易于管理的方式排列内容。

网格充当元素之间的无形粘合剂。即使它们在物理上分开,它也会将它们保持在原位。

布局网格有哪些类型?

有四种类型的网格:

a. 手稿网格

b. 列网格

c. 模块化网格

d. 基线网格

让我们探索其中的每一个,以了解您可以在哪里使用它们。

手稿网格

手稿网格,也称为单列网格,是网格结构的最基本版本。它是一个大的矩形区域,占据页面或格式内的大部分空间。

这些网格对于显示连续的文本块很有用,或者您可以使用图像来填充块。它们通常用于印刷出版物,例如书籍。

列网格

列网格,顾名思义,将元素组织成列。根据配置,列网格可能只有两列或最多六列。

有两种类型的柱形网格,对称和非对称。

列网格中的图像可以放置在一列或跨两列。

杂志、研究或学术论文、在线报纸较多使用列网格。

模块化网格

模块化网格既有列又有行。它们具有相同大小的模块。当您想要对复杂布局进行更多控制时,这些类型的网格非常有用。

报纸使用模块化网格和列网格来更好地控制布局。使用模块化网格,无限变化是可能的。

基线网格

文本所在的行称为基线。基线网格可以应用于任何布局网格,为您的文本提供节奏。

网格确保每行文本(基线)的底部与垂直间距对齐。

基线网格可见于横线笔记本中。他们保持文本的节奏。

交互设计中的布局网格及其好处

交互式设计没有固定的大小。这背后的原因是人们使用不同屏幕尺寸的设备,例如智能手机、智能手表、平板电脑和台式机。

因此,当人们从一台设备移动到另一台设备时,需要重新组织元素以适应不断变化的屏幕尺寸。要完成这些更改,布局网格是最佳选择。

网格系统以多种方式提高设计质量,包括:

它有助于创建清晰度和一致性

一致性至关重要,尤其是对于数字媒体。它可以帮助用户理解在哪里寻找一条信息。网格为一致性奠定了基础,从而间接提高了清晰度。

使设计具有响应性

响应式设计已成为当今的必需品。如果您的网站没有响应并且对桌面和移动设备不友好,您的用户就会远离。因此,设计师使用网格来创建跨多个屏幕尺寸的设计一致性。

使设计更易于修改

数字媒体在不断发展。数字媒体的主要优势之一是只要创建,就可以重复使用。网格设计也是如此。您可以重新排列这些网格以创建新版本的设计。

常见问题

哪种网格系统最好?

网格的应用取决于格式。例如,手稿网格适用于书籍,但不适用于报纸或杂志。

关键要点

自 13 世纪首次使用网格以来,网格一直在帮助各种艺术家。网格就像一个骨架,将元素固定在一起。它们可以帮助您在设计中找到完美的平衡。

现在您已经很好地了解了布局网格、它们的类型和它们的优点,您可以在设计中使用它们。

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

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


文章来源:站酷  作者:对啊设计君

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

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

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



日历

链接

个人资料

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

存档