首页

如何做好直播设计的体系化复盘?

资深UI设计者

前言

“直播”作为一个大热领域,用户规模早在 2020 年就突破了 5 亿大关,在“直播+”的模式下,电商、教育甚至是医美,都能在直播领域下找到新赛道,并产生持续性获客。但就是这样一个核心领域,具体要怎么分析复盘,却鲜少看到系统化的文章。本文主要是结合我近期参与产品直播项目的思考,总结了自己的一套直播复盘方法论和大家分享。

为什么要做直播复盘?

虽然“直播+”模式已成为行业趋势,但在产品接入直播模块而产生的付费效益又不明显时,其存在的意义和价值仍时常被挑战,因此首要的就是验证其价值;

同时,新领域缺乏可复用的方法论,只有不断探索、优化、沉淀才能促进其健康化生长;

最后,在产品范围下的直播领域,定向吸引的还是产品用户为主,持续挖掘探索直播能为产品开辟的新赛道,为产品带来拉新,是“直播+”模式对于产品的直接价值体现。

如何做好直播设计的体系化复盘?

直播复盘怎么做?

直播具备快节奏性和强竞争性,在兼顾快速复盘的同时,还需要考虑阶段性的整体化的对直播数据进行监控,因此需要将直播复盘分为快速复盘和阶段复盘 2 个大方向。

1. 快速复盘

在直播结束当天或隔天对昨日数据进行快速复盘,此时重点关注单期直播下的直观数据表现和用户反馈。目的是获得沉淀当天直播的经验并快速应用至后续直播中,是一个不断 PDCA 的过程。

在复盘维度上,可以分为数据侧和用户侧:

数据侧中我们重点聚焦本期的数据表现,同时横向对比其他直播期,去明确本期的数据表现

1)横向对比时,需要将直播关注的 3 大核心数据(总人数、最高在线人数、评论人数、在线时长均值)与其他期对比,明确该期直播的“优劣”。

如何做好直播设计的体系化复盘?

当期直播核心数据

2)聚焦本期时,重点关注直播数据的整体在线人数变化趋势,定位到最高在线点,和直播内容拟合,能够帮助我们定位直播的“高光点”。

用户侧中则更关注主播在播、用户在听和答的过程,包含:

  • 直播过程中,用户情绪、反馈异常的节点(如消极发言等),定位用户可能存在的痛点。
  • 固定同学作为“直播观众”时,察觉到的异常问题(如信息衔接不自然等),及时复盘。
  • 在直播间的互动评论中,呼声最高的内容,可以作为后续直播可以“返场”的内容,纳入直播内容需求池中。

2. 阶段复盘

在累计多场直播后,此时最需要的就是阶段性的复盘,从宏观角度对多期直播进行收敛分析,能够帮助我们明确直播对于产品的核心价值,并定位核心用户圈层、吸引点及直播应该要有的“节奏”。

在阶段复盘中,除了数据侧、用户侧外,我们还需要关注市场侧:

数据侧—不同于快速复盘,数据侧我们关注整体宏观角度上直播对产品的价值,以及直播整体的数据表现,热点分布等

1)从直播对产品价值定位来说,在未探索付费的情况下,直播能为产品做的就是吸引新用户,增加用户活跃、延长用户在产品内停留的时长上。

如何做好直播设计的体系化复盘?

价值定位时关注的数据范围

在明确价值后,就应该明确后续要如何把直播做的更好,这里数据上可以分为 2 个大的方向,一是热点分析,二是直播节奏分析。

2)热点分析上,需要从单期、分类、词项拆解上看。首先,单期直播就是简单地对单期直播数据进行排序,找到“好”的直播提炼其特征性;其次,分类分析上关注各类直播数据间的横向对比,能从分类数据对比上,看出哪一类直播更吸引用户;最后,通过对每期直播的标题进行词项拆解,筛除掉无意义的词项,再乘以对应期直播的人数,对每个出现 2 次及以上的词项数据取出其对应的单期直播人数均值,即可定位到用户最关注、最能吸引用户的核心关键词。

如何做好直播设计的体系化复盘?

热点分析

3)直播节奏分析上,得益于阶段性复盘的庞大数据量,我们可以聚类出多期直播聚类下的直播趋势线,在趋势线上,亦关注 3 大核心点 “拉新、增长、流失”。

a. 用户进入直播的高峰期(即新增高峰),可用于定位直播亮点,并对应布局以留住用户

如何做好直播设计的体系化复盘?

用户进入直播节奏分析

b. 通过直播数据排序后的高于中位数直播、低于中位数直播的 2 种直播数据走势的对比,我们能够看出好的直播应有的数据走势应该是什么样的。以我这次分析的直播为例,能够直观看出,“差”的直播在增长黄金期都“爬”的很慢,而在黄金期后直播数据逐渐平缓,“差”的直播数据就成了定局。因此要做的就是在增长黄金期,去尽量促进增长。

如何做好直播设计的体系化复盘?

用户流入流出关系分析

c. 那么在增长黄金期,从产品策略来看,要做的是留住用户?还是尽量去拉新?从数据上,我们有 2 种方式判别,分别是相关性分析和假设分析。在相关性分析中,将新增人数/流失率对标最高在线人数,以数据模型分析其相关性,从相关系数来看哪个指标与最高在线人数相关性最高,即影响最大;在假设分析中,我们可以将“低于中位数”的直播数据中的新增人数/流失率分别对标“高于中位数”直播的数据,其他保持不变,看哪种情况下,最高在线人数是更高,数据是更好的,就可以定位出更应该在哪块发力。

用户侧—要明确直播受众及用户圈层,并针对这部分受众的观看体验,进行服务体验走查,更能够帮我们明确后续业务重心、范围及宣传模式。

在用户圈层上,我们对观众数据清洗,从年龄、性别、地域、渠道等各项维度去定位观众的特征。同时,考虑到直播本身是以产品为载体,其用户圈层基本上与产品本身重合,但会存在一定差异性。因此,此处可以结合 TGI 分析,可以定位到直播用户圈层相较于产品来说的差异点,从而更针对受众进行直播内容调整。

如何做好直播设计的体系化复盘?

用户圈层分析

同时,直播本身因其特殊性质,也可类比至服务体验设计的思维,因此在用户侧分析时,从直播前-中-后 3 个大环节上分析用户行为、需求、痛点、快点,从而定位到各个环节直播优化的机会点,推进优化。

如何做好直播设计的体系化复盘?

直播-体验地图

市场侧—在市场分析时,我们不仅需要关注那些在直播领域做的好的同类竞品,同时也要去多分析在受众群体中,最近的热门话题是什么,有助于后续在宣发时引出直播核心话题,也能够带领我们思考直播的新赛道,以协助产品拓宽其用户圈层。

小结

直播作为互联网新赛道,直播+的模式可用于产品宣发、获客、促活等各个方面,挑战与机遇并存。但正因为是新赛道,也相对缺乏体系化的方法论。本文主要是分享我在工作中沉淀下来的直播复盘方法论,也欢迎大家有什么见解或者想法也可以与我分享。

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

文章来源:优设  作者:番茄

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

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

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




线下业务数据体系搭建

资深UI设计者

编辑导语:数据分析有助于帮助我们获知业务效果及其他效果反馈,然而当下企业在线下业务当中,不少数据都有所流失,这就要求企业寻找更有效的数据体系搭建方式。本篇文章里,作者就线下业务的数据体系搭建做了总结,不妨来看一下。


前言

在实际的业务环境下,能够完全通过线上留存的数据搭建业务数据体系的情况主要还是以互联网公司为主,有大量的线下传统公司,是没办法通过线上数据的积累完成业务数据体系的搭建的,在这种情况就得通过不同类型的数据来源去获取业务中可能涉及的数据,设计合理的业务数据体系,完成线下业务数据的监控、维护和分析。

01

如果是从数据逻辑出发,第一步应当是监控数据,就是我们平常一直说的看数据。

但在实际业务中,尤其是线下业务中,其实有大量业务没有留存业务发生时点的数据,在业务的各个转化节点的数据也很难及时获取留存,大量的数据丢失。如果需要从监控数据开始,其实相对来说难度会很大,甚至有很多业务数据没有合适的方式被留存下来,在日后的数据分析搭建中也无法起到作用。

所以,我更建议从业务的发展方向上入手,尽量细化业务流程,明确各个业务流程对部门业务到底有什么影响,核心业务流程是什么,优先从核心业务流程入手,根据业务流程的步骤完成业务数据的监控和留存。

举个例子,如果对保险行业熟悉的朋友会知道,保险业所有公司都有“培训”这个项目,甚至在保险业里面“组训”、“督训”都是很吃香的岗位,能够在短期内积累大量经验,往公司中高层走更快速,这个岗位主要的业务范畴就是“培训”,培训外勤、培训新人、培训合作渠道等等。

怎么评价培训效果呢?依靠外勤人员的销售量、销售额对培训效果进行评价,剩余对培训效果的评价来自学员和更高级的培训讲师的打分。

其实可以从上述模式看出,对线下培训这种业务模式的评判,对培训岗工作人员能力、业绩的评估其实很难通过以上评分模式进行量化,更不用说实际培训效果的追踪。

还是同个例子,如果要想追踪实际培训对销售业务产生的效果和影响,要关注几个模块:

从培训业务的目标出发,如果想从更细化的角度去关注培训,会有以下几个业务方会想要关注的点:

  • 培训的效果怎么样,怎么评估培训效果;
  • 培训效果和培训人员的关系;
  • 什么课程的培训效果好;
  • 不同类型的培训课程能够影响销售人员的销售业绩;
  • 不同类型的培训课程影响销售业绩的时间长短。

所有这些关注点的数据,均无法从线上获取,也很难追踪(这还是仅仅线下业务在实际业务细化关注项提出后的一部分数据的数据量化和追踪,如果要实现业务数据的获取,就需要公司严格要求外勤人员反馈该类型数据,可想而知如果是沟通渠道获取业务数据,就会显得更为困难)。

在这种情况下,线下业务数据体系建立就需要建立严格且标准的业务数据体系,这需要与每一步工作流程相互契合,这个流程有点类似于线上数据埋点的过程,只不过因为业务不在线上,没法在线上完成数据积累。

当然,线下数据埋点和线上数据埋点完全不一样,因为缺乏线上工具的记录能力,大量数据记录只能依靠人力完成,如果想要通过人力完成这类数据登记汇总,就需要使用统一的工具,使用统一的数据字段、数据格式,这需要做到数据流转记录的标准化留存。

以上问题的解决方法除了需要依靠人力对数据进行核准清洗外,建议最好是按照统一的字段建立本地数据库。

熟悉EXCEL或者WPS EXCEL的朋友会了解,这两个软件的处理能力随着数据量的上涨会十分受限,如果是行数超过百万级的话,是无法在EXCEL中操作的,会出现数据丢失。

同样的,如果数据量在20万以上,使用IF系的函数将会加重性能负担,非常容易崩溃,尤其是当出现过去的某一原始主键重复出现的时候,利用EXCEL技巧实现等价FOR循环会变得更难。

这个时候我们会更倾向于在本地建立MySQL数据库,可以利用MySQLworkbench或者NAVICAT对本地数据库进行处理, 利用本地数据库的字典表的字段完成线下交互数据EXCEL/CSV表格表头字段的统一,在简单获取了线下汇总回来的数据之后利用update函数完成数据更新,形成本地数据库。

作为参考,这个是阿里天池某次比赛的测试集数据源,测试数据集的文件不超过100M,模型处理后的预测集也就100M-150M,这部分数据条数约为20W,如果是数据条数在70-80W左右的线下数据,文件大小会达到超过200M,如果还需要清洗、维护这些业务数据,仅仅依靠EXCEL是完全不现实的。

既然要建立数据库,线下数据的维护同步时间就极为关键,线下数据的收集端口需要明确,不同部门、不同渠道之间进行数据交互的人员要固定,交互时间要固定,否则就容易出现数据交互不清晰,导致最后在不同的统计节点的数据无法统一,不断会出现数据重复更新的情况,不利于数据检测监控。

这要数据监控和数据维护以及数据统计在同个周期内完成,同时还要确定所有数据的每一次更新都是以数据覆盖的逻辑,即每一次新增更新的数据范围和内容必须是完全新增的数据。

举个例子,新增的数据版本为C,数据库内现有数据版本为B,更早的版本为C,上传的时候就不允许C版本的数据中含有A版本的数据内容,这样会导致数据的转化顺序存在混乱,涉及时间续流的数据就出现问题。

02

以上是线下数据体系中数据监控和数据维护的部分,接下来我们聊聊线下数据分析体系的搭建.

和线上数据类似,所有的线下“埋点”的数据回收都是服务于实际业务数据分析的,可以这么说,我们要的不是数据,而是数据告诉我们的事实,以及我们根据历史事实能推导出的合理预测,从逻辑方法论上面,就是归纳—演绎。

想进行数据分析,首要的是需要对历史和现阶段的事实情况进行归纳统计,这就需要加入线下“埋点”的数据进行统计分析,即,先深入了解知道自己的情况。

深入了解自己的情况可以从以下几个方向去深入思考:

  • 我们部门/公司实现盈利、绩效评估的核心指标是什么,什么指标是业绩反馈的核心指标(从律师来说是胜诉率,从医生来说是治愈率,蒙牛公司是销售额,德勤是咨询服务的收益)。
  • 当前部门/公司处在什么样的阶段(在不同阶段下的核心指标是不完全一致的,像快要破产的公司的核心指标是清算)。
  • 和核心指标有直接关联的业务主要有哪些,这些业务的工作流程分别是什么。
  • 历史核心指标和当前核心指标出现了什么变化,这些变化主要源于什么工作流程上的改变?

了解了这些自身情况之后,还需要深入了解,那些和你在做一样事情的人,在面对同类型业务核心指标的人,他们的工作情况、业务完成情况、实际业务流程转化,和他们历史的情况。

当然,所有的这些外部事实情况都可能不准确,这就需要从业人员实际判断这些外部信息的准确性和可用性。

这些事实怎么得出?通过数据的形式。

这些事实怎么校验?通过数据的形式。

举个例子,还是以我们上说的保险公司培训部门的例子。

假设当前保险公司的业务正常,市场正常,政策上国家没有对保险市场提出什么更为严苛的政策要求,在这些条件下:

  • 核心指标:保险专项培训对实际保险销售业务的影响大小;
  • 当前部门所处阶段:所有工作正常展开,外部竞争环境处在正常竞争环境下,无不良竞争情况;
  • 和核心指标有较强相关度的工作业务流程:根据外勤需求主动拆分培训需求-进行培训项目筛选-制定培训流程-设计培训课程-执行培训-跟进培训结果;
  • 历史变动情况:历史同类型课程的培训量几乎保持一致,培训频率也保持一致。

这些是相对比较概念化的事实,这时候就需要利用数据把所有的事实细化描述清晰,且所有的数据都需要和工作流程相关联。

同时,所有的业务数据分析都需要建立“时间”的概念,我们可以画一个时间轴来看这个业务流程:

每个业务流程下其实都需要一定时间完成当前工作状态的信息收集,数据本身就具有时间的特性,如果是金融公司、金融部门,还会对数据的时间序列有更严格的要求,因此,数据本身就需要打上所属时间的标签。

在业务流程中,记录每个事件发生时间点的数据,留存这些时间标签下的数据,完成基础数据源的汇总。

在分析中可以将分析划分为几层,可以先按“事前—事中—事后”的顺序留存各个事件发生时点的数据,从中尽量明确有规律性的节点,例如:

  • 从收到不同规模的培训需求到实际举办培训需要多长时间?
  • 培训完到培训成果检验需要间隔多久时间?

这些时点的数据收集可以帮助你深入了解业务流程,在日后做到各类自动化有很大程度上的帮助,这就是业务体系初步建立之后再进行优化的工作了。

在关注了业务的核心指标后,找到能够对核心指标产生影响的因素,将这些因素拆分成“事前—事中—事后”的形式,设定一定的主键完成数据特质化的积累。

以电商为例,电商可以以“订单号—用户ID”的形式,如果是在保险培训的角度下可以参训外勤人员ID作为主键,当然,不同的业务模式会有不同类型的主键,涉及的后续的一些数据内容也不一致。

还是以保险培训为例,在培训中有大量数据是没有办法轻松进行积累的,也同样不能很明确地进行量化,这时候就要建立评分卡的制度,用于量化一部分难以直接估量的行为数据。

比方说,A讲师培训营销技巧和保险学原理课程,两门课程完全不属于同一个课程体系下,在实际外勤作业中,营销技巧所能给实际业绩的增长是短期高效的,而保险学原理课程可能在提升外勤人员金融素养方面更为突出,可能在面对高净值客户的时候能更体现优势。

这部分提升并不会很直接的在实际销售业绩上有明确的体现,这时候就会需要对实际的培训效果进行分类归纳,建立不同评分评级制度。

类似于量化投资,这些数据都会需要和业务核心指标建模拟合判断,根据历史经验,最好是建立相关的多元线性回归模型,机器学习模型虽然在预测方面更具有优势。

但是实际可解释性并没有那么强,在实际业务总结反馈的时候并不能明确的找出问题所在,所以在预测分析的角度还是更推荐从线性回归的角度配合相关性进行分析。

希望分享的这些给现在还在线下摸索业务数据体系搭建的朋友们一些启发。

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

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

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

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

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



设计沉淀录:如何让你的设计更有价值

ui设计分享达人

前言:如何让你的设计更有价值,设计有价值代表你的方案有价值,你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现,归根到底,说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看,在公司里,属于站在用户体验上的提出的设计建议或者设计方案,基于“以用户为中心”理念和交互设计原则,通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。

目录:

一、设计行业的发展趋势

a)设计与产品的关系

b)找到自身价值的重要性

二、了解设计师的价值分层

a)设计协同

b)推动业务增长

c)设计驱动产品

三、设计师需要具备的哪些思维?

a)双钻模型解决问题

b)“五度”设计成果评估模型

c)培养数据思维,利用数据提升设计的价值


一、设计行业的发展趋势

a)设计与产品的关系

以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多,甚至有时候需要滑动寻找。寻找点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。

设计目标:减少首页模块寻找的时间,加大成功点击率,考虑延展性发展

现有问题:主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案:1、主次布局调整,主上次下;2、面积放大提高模块命中率;3、色彩区分主次按钮;4、添加“➕”自定义配置首页主功能,加入人性化设计理念。

体验连接:https://www.growingio.com/projects/lPQ7bOj9/product-analytics/heatmap/j9yvlyRy(账户/密码miaomiao/liuge1)


b)找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值,按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现,但是这里注重成果的价值,设计师的成果更多是设计方案,方案成果的价值的接受度也是需要从易到难的渐进的。


举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性,且减少用户在使用过程中的行为认知负担,快速同事达成合作,还可以减少不必要的操作和排查,提高易用性。

设计目标:保持产品的统一性,减少认知负担,降低时间和人力成本,提高易用性

现有问题:同个功能存在组件多样、组件学习成本高、反复修改,

优化方案:1、建立组件库;2、功能类型划分,采用同一个组件的变形处理;3、组件集中化; 

体验连接:https://lanhuapp.com/url/rKmeX 


二、了解设计师的价值分层

设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。

a)设计协同

一个完美的执行者,能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。


举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范,有助于开发高效实现,实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点,由于自己写的数字组件具有局限性,导致体验上无法满足部分需求,如:输入框的定位在数字键盘之上。基于这个问题点,我们提出A/B方案,A方案是自己写的数字组件,B方案是自己写的数字组件延用原生的逻辑,从用户测试得出,A方案是更符合用户操作习惯。

设计目标:组件高效快捷输入,侧重交互体验提升,视觉优化,提高易用性

现有问题:学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案:1、划分主次信息,阅读更直观;2、建立设计规范;3、组件优化,符合用户操作习惯;4、图文结合,按钮优化,加强页面指导性

体验连接:https://bshop.guanmai.cn/?cms_key=miaotest&timestamp=1561085945884#/product(账户/密码miaomiao/1qaz2wsx)



b)推动业务增长

这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整,其实在用户调研阶段的热力图数据和观察法分析得出,工具类移动端侧重点在功能区,需要一目了然知道我的当前任务数是很重要的信息,且是高频操作,所以放置顶部;标签栏的添加功能是为了快速添加采购单据和询价为目的,用户群体特殊性,需要一键新建添加的需求。

设计目标:侧重交互体验提升,提高工作效率,提高易用性

现有问题:学习成本高、缺少设计基础、操作路径长、体验差

优化方案:1、操作路径简化,采用路径集合弹框;2、建立设计规范;3、组件优化,符合用户操作习惯;4、一键新建“➕”的功能,达到快速新建

体验连接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(账户/密码zhangsan0001/ liuge1)



c)设计驱动产品

这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。也是UXD发展的终极方向。


三、设计师需要具备的哪些思维?

a)双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。


双钻设计模型把设计过程分成4个阶段:发现问题(挖掘)、定义问题(创意)、构思方案(制作)和交付方案(落地)。



采购APP进行双钻模型思维构建的基础,提供交互迭代的底层设计理论支持,在挖掘需求阶段,属于用户调研阶段;创意阶段,关注点在于问题梳理、实现目的、设计层面;制作阶段,寻找潜在的解决方案;落地阶段,解决方案的分析和验证,输出最适合一个。


b)“五度”设计成果评估模型

用户体验周期(由阿里巴巴UED提出概念)


用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段,每个阶段中有不同的细分。

  • 「当前」阶段,分为 3 个过程:

    • 触达:用户来访问网站,包括第一次访问网站的新用户和再一次访问网站的老用户;

    • 行动:用户在网站上进行相关操作;

    • 感知:用户在操作完成后对产品形成的主观感受。


  • 「长远」阶段:分为 2 种表现:

    • 回访:用户自己再次使用该产品;

    • 传播:用户推荐给其他人使用该产品。


如何在具体项目中体现呢?下图,运用一个具体项目举例:

c)培养数据思维,利用数据提升设计的价值

项目与需求上线后,去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。

关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。

那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。


小结:

以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。

文章来源:站酷  作者:麦海欣

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

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

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


通知消息推送从0-1

ui设计分享达人

我们每天都会收到很多应用软件推送的短信或者push消息,它们总会推送各种消息吸引我们打开APP。鉴于我每天都要手动清除这些通知消息,并且有时候打扰到了我的生活(午休的时候被推送消息吵醒),除了微信和工作软件外我基本关闭了APP消息通知,下载新的app也会选择不开启消息通知。


消息通知能提升用户活跃度,但是推送过多的消息对用户来说是一种信息负担,也打扰了用户的生活,用户轻则关闭消息通知,重则卸载应用。每天接触这么多消息通知,大家有没有想过他们是怎么推送这些消息的?


不管是to c 产品还是 to B 产品,消息推送是运营必不可少的一部分。to C产品在产品运营环节通过消息推送,能提升用户活跃率、留存率,提升业务转化率,to B产品通过消息推送能提高工作效率,及时知晓业务问题(毕竟用户只会在工作需要的时候使用系统)。


近期我在做crm系统移动端的版本时,销售反馈系统推送的消息太多,打扰了正常工作,他们觉得很烦,表示都不相干收到这么多消息通知。接到反馈后,我盘点了系统推送的所有消息,发现消息类型多达20几种,并且集中在周一上午10点推送,导致销售短时间内会收到十几条消息。对此,我把盘点出来的消息进行筛选,精简了通知数量,优化了推送策略,优化后销售的满意度和消息触达率都高了许多。


我们不能把消息推送看做是一个简单的功能,要有一个系统性的思维,从盘点消息项、制定推送策略、设计消息文案/内容、建立推送任务、选择推送渠道、筛查有效用户、消息存储等各个阶段流程,都包含了很多因素需要我们仔细考虑的。


本文将以系统通知消息为例来介绍消息推送功能。



一、简述消息推送


undefined


1、通知来源

告诉用户消息来自哪里,谁发送的,让用户对消息内容快速建立认知,同时增强用户信任度,避免认为是垃圾消息;


2、触发条件

什么情况下会推送这条消息,如任务到期没有完成。


3、推送时间/频率

什么时候推送给用户,多久推送一次


4、通知对象

消息应该推送给谁,谁会受到消息,可能是系统中的全部成员,也可能是某个部门,或者某个人。


5、推送渠道

怎么样可以把消息发送到用户的设备上,如短信,app通知。


6、消息文案

用户收到这条消息可以干什么,如处理待办任务。


7、操作反馈

用户需要做什么,可以得到什么结果,如收到线索分配通知,需要跟进线索。



二、消息推送策略


推送的消息既不会打扰到用户,又能达到运营目的,我们需要在合理的时间选择合适的渠道推送合适的消息给合适的用户,这句话有点绕但是就是这个意思。


1、列出消息清单

建立推送任务之前,我们要盘点系统中所有的通知消息,列出消息清单。根据上述消息推送描述的几大要素,以下是我在优化crm系统通知消息列举的消息项,

以销售订单和开票明细两个业务对象为例:


undefined



可以从以下三个角度来盘点消息项:

1、按通知来源:业务消息(线索、商机、回款、订单、任务等)、系统消息、用户信息等;

2、按触发条件:运营消息(回款预警、商机跟进等)、用户发起、待办消息、系统反馈等;

3、按通知对象:所有成员、部门、个人


我们要列出所有可能用到的消息项,不怕多,就怕遗漏。盘点完所有的消息后,可以按照上述表格列出消息清单,再根据业务目标、运营需求、用户需求、对消息去重、精简消息项,只留下必需推送的消息类型。



2、确定通知对象

列出消息清单后,要明确什么类型的消息应该推送给什么人,即通知消息要匹配正确的通知对象。

系统给用户推送了消息,用户对消息内容感兴趣,点开了消息查看详情并进入目标页面或者处理通知消息,才能实现推送消息的目的。


to c产品需要对用户信息、用户行为等构建用户画像,用于精准推送或者个性化推送。to b产品的用户结构相对简单一些,一般是企业人员(员工、部门负责人、管理层等),根据业务使用场景

对用户划分角色,再以角色为基础匹配功能权限,进行权限控制,如销售、研发、财务、运营等对应不同的业务场景,推送消息侧重点也不同。



3、确定推送时间/频率

确定好了通知对象,我们需要思考以下问题:

    1、什么时候推送消息既不会打扰到用户,又能引起用户的注意?

    2、是主动推送还是由用户触发后被动推送?

    3、多久推送一次合适,推送是一次性的还是持久性的?

    4、这个消息推送触发后要立即处理吗?

    3、用户怎么样能收到消息?收到消息后要做什么?

以下这个金字塔图可以解决上述的问题:


消息清单上的消息项,我们不能一股脑全部推送,要根据信息的提醒强度平衡通知量、推送时间、推送频率,避免对用户造成干扰而影响推送效果。


undefined



3.1、强提醒

消息类型:对于需要用户立即处理,或者用户确认才能继续进行的操作,如预警、异常、错误、验证码、重要消息等,让用户及时发现并采取措施。以飞书为例,飞书上要是有人给你发了紧急消息,会以短信的形式提醒你。

推送渠道:电话、短信,但是一般不会用电话,一是成本高,二是对于用户来说是强打扰,而且陌生电话用户一般不太会理。


3.2、中提醒

消息类型:无需用户立即处理,但是需要引起用户注意的操作,如运营消息、待办提醒、审批通知、系统公告等。对用户会产生一定的干扰性,此时要给用户一定的控制权,可以通过设置通知方式或者关闭通知提醒,减少消息打扰。

推送渠道:系统推送、应用内提醒,邮件。


3.3、弱提醒

消息类型:无需用户立即处理,仅提醒用户有新的状态,或者对用户操作后的反馈,如应用更新提醒、状态变更通知、操作成功提示等,对用户几乎不产生干扰

推送渠道:一般只在应用内提醒或者系统内提醒。


提醒强度越强,通知数量越少,呈金字塔形状,强提醒通知数量要比弱提醒少很多。通知消息数量较多时,要权衡推送数量,推要克制,对于推送频率比较高且用户不需及时处理的消息,可以通过合并通知的方式减少消息推送的数量,减少对用户的打扰



4、推送渠道

根据提醒强度选择推送渠道,多渠道组合协同推送,能够提高推送效率,但要保证多渠道消息内容一致。一般来说to b产品通知消息是以系统内提醒和办公协作应用(第三方工具,如飞书、企业微信等)内提醒的形式通知用户。

对于系统内的通知消息,不同强度的提醒消息会对应不同的消息通知组件。


4.1、强提醒消息组件类型

强提醒的内容对用户来说是高关注度的,要求及时、主动的把消息推送到用户面前,用户要立即采取措施,对用户当前操作具有强干预性。




4.2、中强提醒消息组件类型

中提醒的内容对用户来说是中关注度的,要在合适的时间推送,可以是系统主动推送也可以用户发起的,用户可以延后处理,对用户当前操作的干预性为中等。


undefined



4.3、弱强提醒消息组件类型

弱提醒的内容对用户来说是低关注的,可以是用户操作后的及时反馈,短暂的出现后就消失,或者可以延后处理的消息,对用户当前的操作几乎无干扰。


undefined


用户正在使用crm系统办公,同时飞书也在线,我们该如何推送消息?

用户可能已经在系统内查看了消息,再把消息推送到飞书上对用户来说就是重复提醒了。如果飞书上已经读了消息,那么系统内该条消息就要标记为已读。


5、消息文案

用户收到推送消息后,要能快速抓到重点内容,知道这条消息表达了什么,是否需要进行处理。

一般我写消息内容时是会遵循3w1h原则:what(发生了什么),why(什么原因),when(消息触发时间)、how(我该怎么做),再根据实际情况进行适当调整。在设计消息文案时要考虑用户的预期,不要标题和消息内容不一致,或者消息内容和详情页不一致,可以通过推送点击率辅助判断推送是否达到预期效果。



上述原则并不是固定死的,需要根据实际推送目的进行调整,如运营信息可以通过标题、摘要或图片吸引用户,可以直接附带链接跳转到详细信息。


设计消息文案/内容的要点:

    1、消息文案要简明易懂;

    2、重要的信息要放在前面;

    3、不同推送渠道的消息内容要保持一致;

    4、通过短信或者邮件推送的消息要说明信息来源平台,避免用户认为是垃圾信息,如【腾讯】【网易】等。




三、消息中心设计


消息推送给用户后,用户看完不一定会立即处理,延后处理的时要能够找到相应的消息,此时需要消息中心呈现所有的push消息。


消息中心受产品定位、系统框架等因素影响呈现形式会有所不同。消息中心的入口主要有顶部图标(悬浮通知)、左侧tab等形式。

    1、顶部图标:适用于消息数量较少,或者消息不是产品核心业务场景的情况。一般会在顶部导航右边,或者左侧导航下方,以 badge 的形式在图标上提示新消息的数量;

    2、左侧 tab:适用于消息以用户间通讯为核心场景的情况。可根据消息类型进行分类,以 badge 的形式提示未读消息或未处理消息的数量。


undefined


消息列表按时间维度排序,可以对信息进行分类展示,如全部,未读、稍后处理的tab分类形式展示,消息类型比较多的情况下通过选择消息类型快速找到相应消息。


undefined



四、总结


消息推送并不是简单的把需要提醒用户注意的事项全部推送出去,合理的推送策略才能到达推送目的。

消息推送前的思考:

    1、应该推送什么消息,推送给谁?

    2、什么时间适合推送,为什么要推送这条消息?

    3、怎么推送?

    4、推送的这条消息是否能引起用户兴趣?

    4、用户查阅了这条消息知道要干什么吗?


思考完以上问题基本上能确定一份消息清单 ,要保证推送效果还要注意以下推送的要点:

    1、权衡消息推送数量,只推送必需的消息;

    2、选择合适的推送时间、推送频率,避免对用户产生打扰;

    3、消息文案简明易懂;

    4、多渠道推送保持消息文案一致,不要重复推送;

    5、需要用户采取措施的消息提醒,在用户解决问题之前,要持续提醒;

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

文章来源:站酷  作者:仲夏M

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

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

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

构建视觉层次的4个技巧

ui设计分享达人

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。


什么是视觉层次

视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。 

视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。

当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。 

如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次

颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。

Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab. 

Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。 

Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。 


运用文字大小字重建立层次

丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。 

无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。 

除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。 

很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。 

运用视觉重量建立层次

比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。

如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。 

headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。 

在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。 

设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。

同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。

文章来源:站酷   作者:我们的设计日记

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

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

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


设计沉淀录:如何让你的设计更有价值

ui设计分享达人

前言:如何让你的设计更有价值,设计有价值代表你的方案有价值,你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现,归根到底,说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看,在公司里,属于站在用户体验上的提出的设计建议或者设计方案,基于“以用户为中心”理念和交互设计原则,通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。

目录:

一、设计行业的发展趋势

a)设计与产品的关系

b)找到自身价值的重要性

二、了解设计师的价值分层

a)设计协同

b)推动业务增长

c)设计驱动产品

三、设计师需要具备的哪些思维?

a)双钻模型解决问题

b)“五度”设计成果评估模型

c)培养数据思维,利用数据提升设计的价值


一、设计行业的发展趋势

a)设计与产品的关系

以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多,甚至有时候需要滑动寻找。寻找点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。

设计目标:减少首页模块寻找的时间,加大成功点击率,考虑延展性发展

现有问题:主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案:1、主次布局调整,主上次下;2、面积放大提高模块命中率;3、色彩区分主次按钮;4、添加“➕”自定义配置首页主功能,加入人性化设计理念。



b)找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值,按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现,但是这里注重成果的价值,设计师的成果更多是设计方案,方案成果的价值的接受度也是需要从易到难的渐进的。


举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性,且减少用户在使用过程中的行为认知负担,快速同事达成合作,还可以减少不必要的操作和排查,提高易用性。

设计目标:保持产品的统一性,减少认知负担,降低时间和人力成本,提高易用性

现有问题:同个功能存在组件多样、组件学习成本高、反复修改,

优化方案:1、建立组件库;2、功能类型划分,采用同一个组件的变形处理;3、组件集中化; 


二、了解设计师的价值分层

设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。

a)设计协同

一个完美的执行者,能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。


举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范,有助于开发高效实现,实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点,由于自己写的数字组件具有局限性,导致体验上无法满足部分需求,如:输入框的定位在数字键盘之上。基于这个问题点,我们提出A/B方案,A方案是自己写的数字组件,B方案是自己写的数字组件延用原生的逻辑,从用户测试得出,A方案是更符合用户操作习惯。

设计目标:组件高效快捷输入,侧重交互体验提升,视觉优化,提高易用性

现有问题:学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案:1、划分主次信息,阅读更直观;2、建立设计规范;3、组件优化,符合用户操作习惯;4、图文结合,按钮优化,加强页面指导性



b)推动业务增长

这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整,其实在用户调研阶段的热力图数据和观察法分析得出,工具类移动端侧重点在功能区,需要一目了然知道我的当前任务数是很重要的信息,且是高频操作,所以放置顶部;标签栏的添加功能是为了快速添加采购单据和询价为目的,用户群体特殊性,需要一键新建添加的需求。

设计目标:侧重交互体验提升,提高工作效率,提高易用性

现有问题:学习成本高、缺少设计基础、操作路径长、体验差

优化方案:1、操作路径简化,采用路径集合弹框;2、建立设计规范;3、组件优化,符合用户操作习惯;4、一键新建“➕”的功能,达到快速新建

体验连接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(账户/密码zhangsan0001/ liuge1)



c)设计驱动产品

这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。也是UXD发展的终极方向。


三、设计师需要具备的哪些思维?

a)双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。


双钻设计模型把设计过程分成4个阶段:发现问题(挖掘)、定义问题(创意)、构思方案(制作)和交付方案(落地)。



采购APP进行双钻模型思维构建的基础,提供交互迭代的底层设计理论支持,在挖掘需求阶段,属于用户调研阶段;创意阶段,关注点在于问题梳理、实现目的、设计层面;制作阶段,寻找潜在的解决方案;落地阶段,解决方案的分析和验证,输出最适合一个。


b)“五度”设计成果评估模型

用户体验周期(由阿里巴巴UED提出概念)


用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段,每个阶段中有不同的细分。

  • 「当前」阶段,分为 3 个过程:

    • 触达:用户来访问网站,包括第一次访问网站的新用户和再一次访问网站的老用户;

    • 行动:用户在网站上进行相关操作;

    • 感知:用户在操作完成后对产品形成的主观感受。


  • 「长远」阶段:分为 2 种表现:

    • 回访:用户自己再次使用该产品;

    • 传播:用户推荐给其他人使用该产品。


如何在具体项目中体现呢?下图,运用一个具体项目举例:

c)培养数据思维,利用数据提升设计的价值

项目与需求上线后,去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。

关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。

那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。


小结:

以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。



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

文章来源:站酷   作者:麦海欣

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

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

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

如何写出一份大家都认可的交互说明文档?

资深UI设计者

最近有设计小伙伴咨询,怎么样的交互说明才是最好的,是大家都喜欢的。他写的交互说明文档提交给需求评审会的成员审核时,大家都建议他再写的合理些,这让他伤透了脑筋。

我告诉他:

第一、岗位对象不同:没有一份十全十美的交互说明可以打动所有人,让所有人为之惊叹。毕竟,由于阅读交互说明文档的对象不同,他们会对交互说明文档有不同的要求,这是岗位属性导致的结果。例如前端开发希望详细到字段、初始默认值、数据调取接口等,而领导只要看保证业务方向没有错误的大交互链路。

第二、同岗位不同认知:同一岗位不同成员的认知、从业经历、个人喜好、性格脾气等也会导致不可能有完美适配所有人的交互说明文档。例如在一个行业已经深耕多年的前端工程师,即使你的交互说明文档写的没有那么详细,他也可以从你现有的文字中推敲出其他方面,同时还能帮你补充完善;而针对刚入行的前端工程师,你要是写的不详细,他就会抓狂,项目时间紧急的时候还会自己脑补交互细节。之后你走查时候也会抓狂,但是没用呀,谁让自己没有写明白交互细节,遗漏了呢。

第三、使用场合不同:不同场合需要的交互说明文档也不同。例如与对方面对面沟通,交互说明文档可以少写点;但是通过线上工具与对方沟通,就需要写的尽可能详细;如果是会议型的评审,那就要方方面面都做足功课了。简单来说就像准备一份 PPT:针对同一个主题的 PPT,在外部演讲和在公司内部演讲,同一份 PPT 会需要设计两个版本,一个是内部版,一个是外部版,原因在于使用场合不同。

第四、产品阶段不同:交互说明文档阐述的是一个产品的交互,而不是阐述其他的。如果产品所处阶段为成熟期,那往往产品的交互文档已经沉淀了很多通用法则,可以被复用,那么现在的交互说明文档少写点,问题也不大;但产品处于探索期或成长期,通常来说可复用性的交互资产是不存在的,那交互说明文档就需要准备的相对完善。

有些设计小伙伴就说了,既然不可能满足所有人,那我就按照自己的想法随意写好了。这可不行哦,毕竟我们的主要工作有一部分是撰写交互说明文档,这就必须要有认真、严谨、专业的工作态度,把这部分工作做好。那我们来看看,编写一份友好的交互说明文档要注意哪些。

什么是交互说明文档

交互说明文档是用来告诉参与产品研发的团队成员页面交互相关细节的一个说明文档,包括页面间的逻辑跳转、页面内模块的交互、页面功能的状态等。交互说明文档写的越详细越有利于参与产品研发各方的正确执行。

有待改进的交互说明文档

我汇总了一些日常工作中有待改进的交互说明文档形式,看看都存在哪些问题。

1. 文字密密麻麻,无结构

几乎所有刚初入职场的设计师,在编写交互文档时,会怕自己写少了别人觉得自己不专业,怕写的不全没办法表达页面细节,导致交互文档密密麻麻都是文字,这让阅读者几乎无法阅读,找不到视觉落脚点。

2. 描述简单,不完整

有几年工作经验的设计师,由于很多通用交互法则已了然于心,他们在编写交互说明文档时就比较简单,一些交互就没有写在文档上,这导致在开发时,忽略了某些交互。

3. 数据太假,没有逻辑

交互稿数据没有逻辑,是很多设计师经常会出现的问题,一部分原因可能在于产品经理没有理顺产品逻辑和细节就提交设计师画图了,另一部分原因可能在于设计时间紧张,来不及对交互稿中所有的数据都做到逻辑合理。

曾经遇到过的情况有,关联数值关联不上,表格中字段对应的值对不上,表单填写的数据和实际情况不符。

如何写出一份大家都认可的交互说明文档?

建议大家在时间允许或有条件反推产品经理协助完善数据的情况下,尽量数据展现的真实与符合逻辑,如此有助于开发及相关阅读者高效理解。

4. 图文太远,找不到

有几次我注意到设计师提交上来的交互说明会标注“见图 X”这样的文字。也就是一段说明读完了,还得去页面的某个角落寻找对应的图,这种体验非常不好。

在交互设计原则中有一项为“足不出户”。“足不出户”的意思是指能在当前页面解决的事情,不要去其他页面;能在就近完成的事情,不要距离过远。频繁的切换和跳转会导致用户心流被打断,容易引起用户思绪中断、思考不流畅,甚至可能对产品产生反感。

同理,我们交互说明文档中的图文也应尽量相邻,通过一眼文字一眼图,让用户看的顺畅、舒适,理解的快速。

5. 零散,东一句西一句

东一句西一句是指交互说明文档中本该成为一体去描述的文字,被分成了好几个部分去阐述,这对看文档的人来说简直是灾难,他需要自己重新梳理交互思路,将交互规则串联起来。

我们自己在编写交互说明文档时,尽量规避上述常见的问题。

什么是好的交互说明文档

对于什么是好的交互说明文档,网上一搜一大把,这里我根据自己的经验,和大家分享下什么是好的交互说明文档。

首先我们来明确下,什么是好,有了好的标准以后,再来谈谈如何做到好。

1. 什么是好

通常情况下,交互文档会给产品经理看,用来评审设计方案是否满足需求;给视觉设计师看,用来指导视觉方案的呈现;给前后端开发人员看,用来指导开发逻辑;给测试工程师看,用来协助测试编写测试用例。基于此,好的交互说明文档关系着设计方案是否可被最大程度的实现。并且如果交互文档文字冗长、逻辑不清晰,不仅看的人吃力,还会需要增加额外的时间来和开发工程师沟通。好的交互文档,我认为至少需要具备以下 7 点:

  • 明确价值
  • 考虑全面
  • 通俗易懂
  • 结构清晰
  • 图文并茂
  • 仅此一份
  • 修订记录
2. 如何做到好

为了让大家一边学习一遍实践,我使用“表单校验”的交互案例给大家进行讲解。

明确价值

能协助项目成员通过文档更顺利地完成工作任务,能帮助用户解决问题,能达成产品目标,则是好的交互说明文档。文档对各方有价值,是一份好的交互说明文档的起点。那么,如何编写才能达到上述结果呢?

一方面是将此次文档的价值写清楚,包括写明此次交互设计的背景与需求来源、需求清单,标明交互设计的理论依据,可以给用户带来的价值等。另一方面要和成员宣导这些内容,让成员感受自己要做的工作是有价值的。

“表单校验”上场:

如何写出一份大家都认可的交互说明文档?

考虑全面

抛开文档阅读对象等相关影响因素,通常来说交互需要考虑到以下几方面:

a. 整体交互流程

整体交互流程是指产品页面与页面之间的交互逻辑。

b. 页面模块交互说明

页面模块交互说明是指模块自身的交互说明,或同页面内独立模块之间的交互逻辑,或不同页面模块之间的交互逻辑。例如点击导航树节点会联动右侧表格内容刷新;点击 banner 跳转到对应的商品详情页,且定位到页面 1/2 位置。

c. 页面功能交互说明

页面功能交互说明是指单个功能的各种情况阐述。例如搜索框内输入文字,通过 enter 触发对应页面跳转。

d. 尽量真实的数据展示

虽然是交互说明,我们也尽量做到模拟真实数据,否则很容易让阅读者产生错误判断。并不是所有人都会一字一句的去阅读文档,因此,尽量真实的数据,有利于阅读者更有效的了解。

e. 特殊情况额外补充说明

很多情况下,会因为某些原因出现极端交互情况,此时也需要补充完整。

f. 通用交互一处即可

建议交互团队为产品建立通用型交互说明库,遇到类似的情况,直接调取即可。

实际上我们在编写交互说明的时候,不太会分得那么细,很多说明是混合在一起表达的。

“表单校验”上场:

如何写出一份大家都认可的交互说明文档?

通俗易懂

通俗易懂是指要让文字、语言、图片等做到让受众易于理解和感知,从而在信息传递过程中尽量少的出现损耗,这一点同时也与人类的理解能力有关。

百度百科是这么解释理解能力的:

“理解能力是指一个人对事物乃至对知识的理解的一种记忆能力。

理解,有三级水平:

  • 低级水平的理解是指:知觉水平的理解,就是能辨认和识别对象,并且能对对象命名,知道它“是什么”;
  • 中级水平的理解是:在知觉水平理解的基础上,对事物的本质与内在联系的揭露,主要表现为能够理解概念、原理和法则的内涵,知道它是“怎么样”;
  • 高级水平的理解属于间接理解,是指:在概念理解的基础上,进一步达到系统化和具体化,重新建立或者调整认知结构,达到知识的融会贯通,并使知识得到广泛的迁移,知道它是“为什么”。”

当我们了解了人类的理解能力水平是参差不齐后,我们就要尽量在工作中将专业知识化繁为简(也可以针对人群化繁为简),增强沟通效果,最终达到完成团队目标的结果。

交互文档尽量做到讲人话,不要讲一堆专业术语。记得之前有个交互设计师在会议上阐述自己的交互方案时,提到用了“提供邀请”原则。由于与会成员是开发工程师和产品经理,他们问到什么是“提供邀请”原则,并且在这个问题上大家讨论了很久。

由此可见,表达通俗易懂,是很必要的。

结构清晰

交互说明文档除了要表达通俗易懂外,还需要结构清晰。

结构清晰的内容不仅使阅读者一目了然、理解成本低,还可以让阅读者了解撰写者的意图。要做到文档结构清晰,除了需要遵守一些规则外,也不能脱离当前文档的实际情况。

“表单校验”上场(把文字进行分段处理,并取出关键词):

如何写出一份大家都认可的交互说明文档?

图文并茂

图片和文字相得益彰可以加深阅读者对文字的理解,同时避免阅读者去想象文字对应的结果。由于人们对同一段文字的理解不完全相同,因此建议设计师尽量安排交互说明对应图解。

“表单校验”上场(左图右文):

如何写出一份大家都认可的交互说明文档?

仅此一份

仅此一份是说交付给团队交互说明文档的时候不要多份。之前我们的前端小伙伴拿到了两份交互文档,一份是纯原型交互文档,一份是视觉稿交互文档,两者描述的信息大同小异。此时,建议交互文档的信息做合并,只提交一份完整的给前端小伙伴,让前端小伙伴能专心致志理解一份。

修订记录

建议交互说明文档留存修订记录,一方面可以了解交互文档的变更历史,另一方面有利于回溯和查找信息。修订记录一般包括修订人、修订时间和修订内容。

总结

由于项目进度、业务复杂程度等不同,我们不可能每次都能写出一份最好的交互说明文档,但我们可以想办法写出一份相对可读性高、可理解性高的友好的交互说明文档。我们常说自己是做用户体验的,那交互说明文档就是体现我们交互能力一个方面。

除了完成交互说明文档,想要让开发小伙伴真正理解交互说明,还需亲自和开发沟通,千万不要认为我写的很详细了,他怎么还是实现的有偏差。事实上,就如开篇所说:同一岗位不同人的认知理解、从业经历、个人喜好、性格脾气等也会导致理解不同。特别是对于一些我们非常创新的、特殊的交互点,需要重点和开发说明。

并且,交互说明文档基于业务的发展,也会不断的迭代,我们要抱着多听、多想、多思考、多接受的态度去不断优化我们的文档,尽力写出一份友好的交互说明文档。

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

文章来源:优设   作者:小果

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

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

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

如何提高设计还原质量和验收效率?

资深UI设计者

前言

最近我们产品做了一次全新改版的项目。作为此次项目的设计师,从项目的前期分析、设计、交付开发、验收上线,整个流程,在项目走查验收阶段我们设计师投入了30人/天!在我们觉得应该设计投入最少的阶段,却占了我们大量的工作 且最后还原度也远不达预期。


在这个项目中我遇到了哪些问题:

还原问题不单单是设计师把设计稿做的多精准,标注的多仔细,这么简单就能解决的。是设计和开发,团队之间的合作共识问题。我把整个和开发对接工作分为前中后三个阶段,在这里从头来梳理一下,聊一聊设计师和开发如何高效对接,也是对自己的一次复盘总结。



一、评审/排期


1.1、设计师对还原的要求宣讲


在评审环节,设计师本人一定要将自己的设计稿进行宣讲、帮助开发理解。注意给技术讲述一些适配要求、设计规范、交互状态及动效等,同时解答技术同学的一些疑问,这样就能将一些可预见的问题解决掉,解决后期的沟通成本。

有一些地方有多种实现方式,如果前期没有跟开发沟通清楚,就会导致最终实现的效果存在误差,比如:下方这个tab项,单给一张图,开发根本不知道设计师想要的实现方式是什么,固定间距还是固定菜单宽度,还是每项平分宽度,最后很大可能就会按照自己的理解去做了,导致出现重复返工的现象。



再比如一些点击热区,如果不手动标明,有可能就做的很小

下图是我们手动标注的热区



1.2、实际开发者要参与评审

每个开发负责的具体页面模块不一样,别人对具体了解程度也不会不一致,所以在评审会议上,一定要具体开发者在场,如果对应开发没有发表意见,设计师可询问,确保他已经理解需求。



1.3、开发充分评估还原工作问题

设计师在讲解自己的要求后,开发也要及时反馈是否有还原困难,如:是否有技术限制?是否有组件改动困难(牵一发而动全身)?实现成本过高(投入产出的性价比不够)?等意见和原因,设计师也可抛出之前是否遇到过类似的阻碍,帮助开发去了解。



1.4、认真记会议纪要


评审过程的问题和重要讲解点,一定要记录下来,会议中开发提出的一些问题及解决方案、或者没有达成共识的地方,记录下来等领导决策,在会议结束后以邮件形式、或wiki文档发送前端们,抄送产品,确保会议内容的传达到位。后面也好跟踪。


还有一点就是,我们之前遇到的情况,在宣讲会上 讲解的一些要求,开发在做的时候可能就忘记了,让开发改他认为设计没有明确要求、会有点难推动,就会搞得双方都有抱怨。有会议记录也可避免此类情况发生




二、开发阶段


2.1、还原有问题及时反馈

在前面我们做了详尽的沟通和评审,但有时也避免不了在开发过程有些问题才发现暴露。这个就需要开发同学能重视还原问题,积极沟通反馈,和设计确认商议 是否有其它可替代方案,切勿自己发挥,等到后期验收的时候才说出问题可能会影响进度


2.2、开发完成后对齐设计稿自查

开发者在完成自己负责的模块界面时,可自己对齐设计稿自查一遍,参考【3.1验收标准】的表格,可帮助判断问题,在此阶段也可发给设计者确认效果。


三、验收阶段



3.1、测试同学确保交互和视觉还原度至少在70%左右


这里可以提前在项目排期阶段,设计师将所需的验收工时同步给技术和测试,将验收时间考虑进去

为什么要求测试同学保证还原度至少在70%呢?

因为如果不要求测试走查还原度,设计验收的时候就会有大量的问题,最后变成设计在测试界面而不是验收。设计师不像测试对整个流程的测试配置那么熟悉方便,反复验收需要测试和设计不断配合,双方的工作量都会加大。


理想的状态应该是测试整个流程走通,视觉和交互还原问题也要着重测试,设计和产品在测试没什么大问题后再进行验收。


参考【验收标准】的表格,可帮助判断还原问题



3.2、明确知道模块的开发者

最好是提前知道模块的开发者,这样验收的时候一对一进行模块的打版验收效率更高


3.3、设计走查问题标注优先级

技术对功能上的BUG,可以自己很好的判断哪些是严重的紧急的,但对于视觉和交互层面的感知就比较低。在提问题单的时候,我们可以帮他标注出优先级,告知开发哪些是比较严重的需要优先修改的,不然 开发自己很难判断,可能就会挑一些比较好改的先改了,重要的问题反而被搁置了。尤其在项目时间比较紧张的时候,有优先级标注 开发能够看出哪些是可以为项目进度做出妥协的,哪些是必须要修改的。



3.4、BUG单

设计提BUG单的不能简单的说这里出错了,请参考设计标注重新调整。要直接给出正确的尺寸、增多少、减多少、这样可帮助技术提高更高效率,也能避免开发自己去看又出现误差、又要返工修改。



3.5、遗留问题有记录



四、结语

设计师在验收过程中容易遇到的一个比较头疼的问题就是,技术和产品小伙伴可能因为项目上线时间紧,觉得视觉还原和页面交互体验上的问题不重要不给予修改,优先保障功能上线。

除了这些原因,设计侧也在检讨总结,自己有哪些做的不足的地方,所以 以上文档也是对接下来工作的优化方案。设计还原度也是日常考核之一,需要大家重视,好的产品要严格把控精心打磨,希望这次的总结、相关流程和经验,在接下来工作中能够提升设计验收效率和还原度。

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

文章来源:站酷   作者:飞行的考拉

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

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

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


如何自定义栅格系统

ui设计分享达人


栅格系统(grid systems)

规则的网格阵列来指导和规范网页中的版面布局以及信息分布。


基本原理

在网页设计中,把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,把“a+i”定义“A”。他们之间的关系如下:

W =(a×n)+(n-1)i

由于a+i=A,

可得:(A×n) – i = W

我们通常把a称为“柱”,对应代码中的Column;i称为“水槽”,对应代码中的Gutter;a+i=A称为“列”

设计栅格系统,本质就是定义a,i,n的数值。

UI设计中有一个通用做法,就是元素的宽度尽量是8的倍数,基于今天的大多数的网页设计,画板宽度都为1440px ,此时我们将a=24,i=24,n=24,这是一组简单美妙的数值,可算得W=(24x24)+23x24=47x24=1128px;将栅格居中于画板(偏置156px),此时的栅格系统如下:

1128栅格系统:

得到的这个栅格布局被广泛使用,比如站酷网首页:



观察计算公式W=1128=47x24=(24+23)x24,这里的47不是8的倍数,我们容易想到把它变成48,

将a=25,i=24,n=24,算得W=(24x24)+(25-1)x24=48x24=1152px;此时的栅格系统如下:

1152栅格系统:

这个栅格系统的美感在于,宽度W=48x24=1152px,两边的留白为画板1440px宽度的1/10等于144px。Ant Dseign中运用了此栅格:

以上两个栅格布局都是24栅格系统,使用24栅格系统的好处是,它可以轻松实现2等分、3等分、4等分、6等分、8等分、12等分,也可以进行1:2:1、   1:3:2、   1:2、 1:3  等不对称分割的布局。


除了最常见的24栅格布局外,也可进行36栅格布局,例如:

a=16,i=16,n=36,W=(16x36)+16x(36-1)=16x(36+35)=1136

1136栅格系统:

a=26,i=24,n=24,W=(26x24)+24x23=24x49=1176px

例如腾讯文档:

1176栅格系统:

“厂”型布局网页的栅格布局:

以上的网页布局都是瀑布式布局,在许多应用型网站中,常使用“厂”字布局,对于“厂”布局的网页,该如何设计合适的栅格系统呢?

我们可以先确定左侧菜单栏的宽度,例如飞书管理后台中左侧菜单栏的宽度为228px,在拉动浏览器时,这部分通常是不动的,再确定主体内容去和左侧菜单栏间的间隙,比如12px。

此时可以计算W=1440-228-12x2=1188。

使用24栅格系统时,12a+11i=1188,方程中有两个未知数,我们设定其中一个时,就可计算出另一个。另i=12,解

W =(a×n)+(n-1)i

1188=(ax24)+23x12

a=38

是帮助,而非限制

对开发者而言栅格是实现动态布局的手段,而设计师对于栅格的理解源自平面设计中的栅格,不应把栅格系统当成一种限制,而是帮助,也不用总是担心元素超出栅格。


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

文章来源:站酷   作者:
隔岸吃瓜

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

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

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

对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

ui设计分享达人

但结束往往是另一种开始,从研究心得来看,任何一种横空出世的风格都能找到过去风格成分,只是当事人是否愿意承认而已,所以旧风格某程度而言能在新风格中获得新生。

新艺术平面风格总结

我们在此大致为新艺术运动做个“结案陈词”,首先这个名称源自法国,含义指“一切新出现的艺术”,单从这个定义来看,它的风格形式其实没有固定规范,但是当大家同处一个时代,经历同样变迁,艺术表达就必然有共性。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

法国“新艺术”平面设计

总体而言,新艺术运动平面设计风格能找到以下几点共性:

  • 崇尚曲线,主张学习自然,花卉枝蔓元素多,但也有一些国家例外。
  • 受日本浮世绘影响深刻,平涂技法是主流。
  • 插画是设计的核心,多数设计师本身都是插画家。

新艺术本质上属于风格群组,包含很多子分类,除了法国、美国等本身称作新艺术之外,其它国家多数有别称,比利时是“先锋派”,德国是“青年风格”,奥地利是“维也纳分离派”,意大利是“自由风格“,英国则是”格拉斯哥派“等等。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

美国地区的“新艺术”平面设计

新艺术风格如果以法国为正统,带给人的主要气质感受是:浪漫、柔美、悠闲。

而德国、维也纳跟英国区因为加入直线,显得阳刚一些,所以这三个地区的风格有时候会划分到“初期现代主义”部分去讨论,这些总结值得大家记下,有助于运用。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

英国区“格拉斯哥”风格平面设计

最简单的例子就是给甲方提供类似风格的设计时,可以谈一点历史故事,有时候有渊源就是有文化的代名词,品牌故事就是如此来的。

在新艺术运动的末期,整个社会发生了很大变化,比如资本主义国家产生内部阶级矛盾,贫富分化,经济急速发展等。

上一期说过,艺术与设计永远是时代的精神折射,在急剧变化的社会中,文化艺术界开始涌现各种现代主义运动,例如表现主义、立体主义、未来主义等,这些运动的发展明细详见史太浓「风格列传」系列,这里不重复去谈。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

表现主义风格平面设计

这些以绘画为核心的现代主义艺术运动对当时的平面设计发展产生巨大影响,逐渐形成本次要谈的主题“图画现代主义“(the Pictorial)。

这是一场发生在平面设计中的运动,以德国地区影响力最大,输出最多大咖,历史上单独将其称作“海报风格”(Plakastil),原因是以海报设计为主要载体,标志、包装、书籍一类都无法体现。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

“海报风格”平面设计

文章本天成,妙手偶得之

“海报风格“的主要特点就是简洁鲜明,主题突出、色彩扁平。

这种风格在过去历史当中难以想象,甲方看来也总感觉钱花得不值,因为留白特别多。

甲方一般也不清楚做减法比做加法难太多,这种特征其实在上一回谈意大利“自由风格“的时候,李昂内托·卡皮尔洛(Leonetto Cappiello )的作品中就已经初步具有。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

李昂内托的海报设计作品

但这种风格真正的奠基人是德国的卢锡安·伯恩哈塔(Lucian Bernhard),后面简称卢锡安,史太浓在翻译外语名字时候希望尽量像中文名,好记一点。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

卢锡安·伯恩哈塔

卢锡安同学也是自学成长的大神,1883 年时候他出生于德国斯图加特(奔驰汽车的总部就在这个城市),父亲经营工艺品生意,家境还不错,但经常出差不在家,回来的时候会带一些有意思的小物品送给卢锡安。

卢锡安从小贪玩,经常闯祸,比如戏弄老师这种事情也经常干,也父亲头疼不已。

但父亲发现儿子其实有艺术天赋,具体表现是喜欢用橡皮泥尝试做一些工艺品,而且对于讲述艺术的书籍、故事特别感兴趣。

在卢锡安 15 岁(1898 年)那年就因为爱摆弄惹得父亲非常生气,情况大致是这样的:当时德国慕尼黑举办室内装饰展览,卢锡安很兴奋的跑去看,现场带有现代气息的设计让他非常入迷,他自信满满的感觉自己可以做出来,于是决定回家实践。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

慕尼黑的室内装饰展览

恰好父亲那时候需要出差几天,机会从天而降,他找来小伙伴协助,将家里按自己的想法从新设计装饰了一遍,比如用鲜艳的油漆刷墙,是劳斯莱斯一类的拼色操作,再将一些他认为风格不符的家具扔掉,从新进行布局。

完成之后其实他并不满意,因为眼前的条件限制了很多想法的实现,我想到假设一个设计师对自己的设计结果不满意,那么去到甲方那边是肯定会出问题的,这叫“墨菲定律”,担心的事情 90%都会发生,到时自己一切的解释都变成掩饰。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

“海报风格”平面设计作品

果不其然,父亲回家看到房子面目全非之后大发雷霆,摩拳擦掌,大骂卢锡安一顿,还准备揍他,卢锡安一气之下离家出走,这一走居然就没有再回过家了。

他跑到德国柏林,在那里找到一份制造工厂的工作,一边做车间工人来保障生活一边自学美术,他内心还是强烈希望日后可以成为一名设计师,虽然还没想清楚具体设计什么。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

“海报风格”平面设计作品

时间很快去到 1905 年,卢锡安已经 22 岁,终于碰到一个改变他一生的机会。

柏林有一个老牌的知名火柴厂叫“普莱斯特“(Priestermatches),100 多年前,火柴还是民生中必不可少的产品,印象中我小时候有很长一段时间都是用火柴生火做饭的(暴露了我的年龄)。

某天这个火柴厂玩起“设计征集“这样的营销,通过刊登报纸向社会征稿,设计主题是新品海报,当时做这类征稿的商家还不多,所以博得不少眼球,另外他们也确实希望通过这种方式获得耳目一新的设计。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

“海报风格”平面设计作品

征集活动被卢锡安知道了,此时他已经自学设计多年,自然希望借此机会浮出水面,成为真正的设计师,万万没想到,还真的成功了。

事情的经过是这样的:当他发现消息时候已经距离截稿时间很近,他赶紧请假几天在宿舍闭关。

刚刚开始的时候他设计得比较复杂,海报的元素很多,最初设想是桌子上有一个烟灰缸跟雪茄烟,边上还有一个跳舞瓷娃娃增加气氛,画完之后他满意的拿给朋友看,朋友的反应却像一盘冷水,因为朋友问他是否一个卖雪茄的广告。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

年轻时候的卢锡安

于是卢锡安回宿舍后将雪茄涂掉,没了雪茄烟后灰缸自然是多余的,去掉,没了烟灰缸后瓷娃娃也很奇怪,去掉,如此这般桌子也没了意义,也去掉。

最后这些元素全部涂没了,只剩下一个蓝色的工厂名字标题,纯黑色背景,而当天晚上再不寄出征集活动就要截稿了。

卢锡安急得不停冒汗,这种体验很多广告设计师都肯定试过,他想了很多替代方案,但此时不管想法如何好都不够时间实现。

最后只能死马当活马治,在黑色背景上刷刷两笔画了两根红色杆黄色头的火柴,匆忙将稿件寄走了,心里感到万分的沮丧,类似约会心仪的女孩但是表现得不好的那种。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

“普莱斯特“火柴厂海报设计

寄出稿件之后他其实就忘记了这件事,我猜测是选择性遗忘,因为心里难受,不抱任何希望,但人生往往是充满惊喜与意外的,一个月后卢锡安收到电报,告知他居然获得活动第一名,电报中还用不少美丽的词汇称赞他为“设计天才“。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

卢锡安的海报设计

领奖金的时候他才知道原来最初他的作品被评委扔到垃圾桶,觉得过于简单,缺乏风格,后来被一位外邀的专家评委捡了起来,看了很久,认为这样的设计主题突出,名的明确,具有很好的传达功能,而且设计方式非常大胆,正是“普莱斯特“火柴厂需要的,应该得第一名。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

卢锡安的海报设计

这一类故事史太浓之前在大师列传就聊过,主人公是扎哈·哈迪德(著名女建筑师),当时也是参加比赛,我总感觉这种事情是为了增加主人公成名传奇性而杜撰,但不管如何,只能说实力跟运气都重要吧。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

扎哈·哈迪德

如此这般,卢锡安一举成名,正式投身设计界,我忽然想设计大咖李永铨在《消费森林&品牌再生》这本书里面说到的一句话:设计有时候就是需要冒险,因为设计就是投资,投资不存在零风险。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

《消费森林&品牌再生》

具有一定试错成本的时候试试,因为万一成了呢。

“海报风格”练成

卢锡安 1905 年这一份传奇的火柴海报设计让风行多年的“新艺术“风格得以”交班“,大家发现平面设计的另一种可能性,就是重视传达,信息明确,形式简练。

入行之后的卢锡安成为“海报风格“领军人物,采用这一类风格设计出很多优秀作品,比如 1912 年为斯蒂勒皮鞋公司(Stiller)设计的产品海报,也属于经典之作。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

斯蒂勒皮鞋公司海报

市场都是喜欢新鲜,爱追热点的,卢锡安开创的这种风格大胆好用,很快成为德国广告界的领军风格,市面上大量平面设计都开始走“海报风格“路线。

其中有一所叫“火雷不老与十米特“(thehollerbraumand schmidt Lithography firm)的石版印刷公司极有先见之明,抢先以丰厚酬金跟卢锡安,还有市面上善于这种风格的五位设计师签订长期合同。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

德国其它“海报风格”设计师的作品

模式类似经纪公司签约明星,市面上的其它公司如果需要找这些设计师工作,必须先通过他们,一般最后也会找他们印刷成品,这样一来让公司大发其财。

五名设计师中有一位叫朱立思·克林杰(Julius Klinger),早期在奥地利维也纳学习设计,所以设计风格受“维也纳分离派”影响不少,具有新艺术运动的曲线特点,随后再在这个基础上转向“海报风格”,有不少出色作品。

用一篇文章,帮你了解风靡平面界的「图画现代主义」

朱立思·克林杰

而这群人在我们下一期的内容中都有重要戏份,因为第一次世界大战马上到来,这次大战改变了很多设计师的命运,有人一飞冲天,有人从此凋零,有时势造英雄,也有英雄造时势。

文章来源:优设   作者:Reman刘斌

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

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

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



日历

链接

个人资料

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

存档