首页

如何系统化的进行设计改版?

ui设计分享达人

项目背景


当公司的发展规模到一定程度时,考虑到信息安全、持续采购成本与相关风险,企业会采取自研的方式来实现部分协同工作软件的自产与自用,本文将以内部目标管理系统为例,阐述我们是如何系统化的做企业系统设计改版?


什么是OKR?


OKR,是Objectives 和Key Results 的缩写,即目标关键结果,它是企业进行目标制定和过程管理的重要手段。酷家乐同样采取OKR的管理方法,将公司目标层层分解到团队,部门再到个人,在各个层面贯穿和统一起来,以帮助实现目标达成。



改版的契机是什么?

改版不是设计说想改就能改,在做新的OKR系统之前,之前是通过「绩效系统」来进行目标管理和绩效评估,支持简单的制定和结果的评估的使用,因系统操作流程、界面体验、业务场景已经严重的影响到目标管理的效率和效果,具体体现在几个方面: 


  • 系统看不懂,新人的宣导成本高
  • 操作不流畅,从制定、提交、审核、修改到进度同步,员工使用起来不流畅
  • 误操作成本高,不小心点错导致信息的再次获取和编辑成本高

总之,工具的体验已经是严重影响公司员工目标管理的一道障碍,所以如何将整体的系统操作体验提升起来是设计急需去解决的问题。 

那么,确定有问题需要改,作为设计师,我们是如何去系统性的去为业务带来更多的体系化的价值?
  • 理清业务,制定策略
  • 理解用户,溯源问题
  • 串联场景,各个击破
  • 方案设计,中途验证
  • 落地追踪,拿到结果

一、理清业务,制定策略


理清业务目标,制定设计策略,是系统性改版产品的前提,在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽,只有非常清楚的理清业务的目标,才能制定系统性、合理的设计策略来支撑业务,通过专业的设计方法来助力业务结果的达成,在这个项目中我们是如何做的呢?


对焦业务目标

OKR系统的改版项目最开始是高层的诉求,提的业务要求很简单“ 让大家用起来,目标管理起来”,那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。


“ 让大家用起来,目标管理起来”需要去解析的是,为什么旧的系统大家用不起来?为什么目标管理有这个管理机制,但是没有依赖于系统管理起来? 

制定系统的设计支持策略

设计师同行可能会问: 不都是做需求吗,有啥做啥,有啥策略可言?如果是以这样的方式来做设计改版,很有可能会被业务方牵着跑,即便是知道对方坚持的不是很合理,但也没有办法来推动这件事往更好的方向发展。 


二、理解用户,溯源问题


理解用户,溯源本质问题,是最设计环节必不可少的环节,通过对用户的深入研究,挖掘本质的共性的问题。在这个项目中,我们通过定量+定性的手段获取用户的心声: 

定量问卷——获取用户的基础的问题

前期在公司内部针对普通员工、MGR、HRBP、高层4种角色,调研了100多位内部用户的心声,将不同岗位和职级对于绩效系统的问题真实反馈收集汇总。 

undefined


定性访谈——深入获取用户的诉求

因为系统面向对象是企业内部员工,所以针对每个角色都做了访谈调研,深入的挖掘他们对当前的产品使用问题,并将问题按照核心流程中所涉及的角色在不同阶段所需的操作和流程进行了梳理,整个阶段拆解为:制定阶段、执行阶段、结束回顾三个主要阶段,拆解每个角色在这些阶段中的触点和机会点。 



结合问卷、专访谈的分析和梳理,筛选出目前系统的核心问题: 制定流程、对齐关系、过程跟踪、信息触达


三、串联场景,各个击破


在前面已经初步发现和定义了问题,这么多分散的问题如果平铺出来可能会吓到产品和研发,所以接下来需要将其系统化的变为整体的设计方案,我们需要将其串联成完整的场景,然后逐步击破,我们是如何做的呢? 


重点模块及争议点的讨论

在场景分析前期,我们设计内部针对“核心阶段”、”对齐关系“、”权限管理“、”全员OKR“进行了讨论和范畴的界定,对以下问题进行了讨论: 


  1. 大的阶段:一共有几个阶段,在每个阶段各个角色的需要做什么? 
  2. 关于对齐:对齐关系是怎样的,如何处理对齐与被对齐,双方都发起了对齐,怎么对齐到具体哪一条? 
  3. 关于权限:普通员工的权限定义;mgr的组员关系;如何确定查看的权限? 



梳理清楚角色关系图,有助于多方去理解各个维度的关系

以一个普通员工【小何】为例,在OKR系统中进行OKR制定时,通常需要与多个角色产生关联:


  1. CEO/BO:通过查看高层的目标来看到公司的发力方向; 
  2. MGR:明确部门目标,制定个人的;OKR的审核与发布;进展的跟进; 
  3. 同组/协同部门:与协同部门绑定关联关系,同步实时进展;查看同组员工的进展,横向对比个人进度。 




结合业务需求,赋予体验价值

OKR系统虽然最为一个内部管理系统,我们也逐步在设计侧去从“具有功能价值”往”“赋予体验价值”去发力,将更多的“能”和“可以”转变为“方便”、“简单”和“轻量化”等,来提升各个流程阶段中的体验,比如: 
从“可以查看”到“方便的查看”
从“能更新” 到“  简单更新”

具体到串联场景怎么去理解?

一个新的OKR周期会经历三个主要阶段,每个阶段会涉及到多个节点,在每个一个节点上去思考发力方向: 


为了便于理解,将关键的场景提供了比较简短的描述,这个描述就是从旧到新的过程,后面的设计展示也是围绕着这些内容进行展开,具体如下: 

①制定阶段,包含写、看、评、管
  • 写:轻松撰写,高效共创 
  • 看:简单查看,便于跟进 
  • 评:轻量互动,便于记录 
  • 管:高效审核,随时跟进;条条对齐,事事关联; 

②执行阶段,包含更、改、推
  • 更:随时更新,条条追溯 
  • 改:慎重修改,条条有据 
  • 推:合理推送,终端打通 

③结束回顾,包含查看、追溯、复盘

  • 查看:快捷查看历史周期 
  • 追溯:记录明显标记,事事追踪溯源 
  • 复盘:复盘总结,目标达成 



四、方案设计,中途验证


经过前面一系列的调研、分析总结,设计围绕着3个阶段的关键结论进行展开,即OKR制定、执行、结束三个阶段 
(因每个阶段篇幅较长,方案设计部分仅展示部分页面的思考过程和页面展示)

轻松撰写,高效共创

在写OKR时,设计让撰写轻松、可以高效的共创,主要通过以下3点: 

(1) 清晰的页面结构:


让用户能明确的感知到系统的整体结构是有规律的,可以简单被理解的,即左边全局控制,右边内容展示

  • 左边导航全局控制着写、审、查、通4个功能 
  • 右边内容展示跟随着导航内容变化 



(2) O与KR的录入快速切换: 

为了让用户可以沉浸在一个页面写内容同时,还能纵览全局结构,在写OKR的页面增加了OKR大纲的锚点切换功能,便于多个KR之间的切换,避免因页面过长带来的翻阅困难的问题。 


(3) 减少步骤,减少跳转: 

减少步骤,减少跳转有很多场景都有涉及到,比如: 
  • 以以新增一个O和新增一个KR为例,步骤从原来10步减少到4步,页面调整从多步骤弹窗到在1一个页面即可完成内容的撰写; 
  • 在与别人关联时,在撰写页面会收拢所有邀请方的信息; 
  • 在查看对方进度,原来需逐个点击进去了解,到现在几乎可以全局视角来管理进度。 



简单查看、便于跟进


查看和跟进属于第三方的协同伙伴,为了让伙伴更轻松的跟进,做了2个设计处理: 
  • 在人员展示逻辑上,在OKR展示时,将关联人、同组人直接展示出来,减轻用户的查询成本; 
  • 在展示内容上,将O全部展示,进度以及更新时间全部直接展示出来,便于关联方快速便捷的知会。 



简单审核、随时跟进


在管理者审核下属员工时,简化了大量信息,前置待处理信息以及待处理的关键信息,让管理者比较直观的知道有哪些人提交了,哪些人修改了,哪些人需要重写等等。 



随时更新、条条溯源


为了让员工便捷的进度管理,在OKR管理页面以轻量的临时弹窗,来方便用户快速发起和输入内容,每条更新记录同时也能同步给关联方。 



慎重修改、条条有据


慎重修改、条条有据主要是满足管理者和关联管理诉求,OKR可以在中途被修改,但是修改的结果是需要明确告知相关人,在增加、删除、减少的内容上,以特殊的示意对比来记录依据,同时也督促发起方能审慎修改。 


合理推送


OKR的消息推送在整个阶段中占据了非常重要的信息触达的作用,在整个OKR的制定阶段和执行阶段不可或缺的部分,而消息推送过多将会导致信息冗余,那么如何合理进行推送消息也是重要一环。 

我们把消息类型通过两个维度定义消息的优先级:“重要性”和“紧急度”,通过四象限法则,我们拆出来了:


  1. 重要且紧急的消息
  2. 重要不紧急
  3. 不重要但紧急
  4. 不重要不紧急

通过此模型和产品确定了每一个消息类型的所在位置,且清晰表达的了每个消息应当的位置




在酷家乐有非常多的信息接收渠道,每个渠道都有相应的特点,我们结合渠道的特点去确定不同优先级的消息应当推送的渠道。 


最终在实现方案上,实现了有层次、分场景的消息推送方案,尽量做到少打扰用户同时,可以及时了解重要信息。 

终端差异


桌面端是主力生产平台,通常是多窗口多任务,键鼠操作精确高效。在专注姿态下,我们可以尽量安静地展示更多常用功能,让用户在一个视图中即可完成相对复杂的任务。同时在列表页中,更大的空间让我们可以把目录树展开,减少导航跳转。 

手机端的特点是专注当前任务。可以通过信息降噪,加强对比来让信息传达能明确,帮助用户完成单个任务;而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。 

最终实现方案

结合终端的差异,把移动端定位为:侧重便捷快速的查看和沟通,同时将重编辑的场景在移动端去除了,更加侧重于查看、互动和进展更新的低成本操作的场景。 


中途验证效果,确保上线的效果

在设计的过程中,为了进一步的验证设计合理性和易用性,针对角色代表进行了8组可用性测试,最终普遍反馈新版的操作体验更好。




五、落地追踪,拿到结果


针对了项目的设计效果落地,设计除了在过程中不断的跟进产品和研发提出的问题,在测试阶段提出效果走查文档,不断的打磨细节,才能保证最终的设计效果,当然付出总会有回报,新版的系统上线除了制定、管理、查看关键模块的UV和PV的业务数据达到了比较好的效果外,在新老版本的满意度和流程操作犯错率上也得到了一个比较好的验证。 


写在最后


在OKR系统项目的整体流程中,针对产品大改版的时候,我们设计需要前置思考业务,全局看待产品,系统性的去思考和设计,助力业务结果达成的同时让设计价值更好的体现出来,最后再回顾下整体流程: 

在惯性思维下做UI设计有多糟糕

ui设计分享达人

我们今天主要来讲4个主题:

1.颜色使用的误区-红色的警示含义

2.功能即按钮?-两者的区别与设计思路

3.设计中的样式-情理之中,意料之外

4.产品体验案例收集-宁缺毋滥

5.减少步骤就能提高转化?-少即是多,多即是少


所以,这篇文章还挺有意思的,大伙读读看



1.颜色使用的误区-红色的警示含义


最近有多个小伙伴来问问题,老师, 我的产品色是红色,那我用红色的按钮会不会给人传达很强烈的警告?还有我们的产品色是冷色,如果不用暖色按钮会不会没有强烈的引导感,我好纠结啊!


大家瞅瞅,他像一个好人还是坏人?





呐,颜色情绪表达不在于本身,而是其使用场景。大家都知道颜色都有其两面性,比如这样,同样是黑色系,但是左边看上去是潮流、硬朗的感觉而右边则有一些忧郁、沉重的感觉。





所以颜色怎么使用要看用在什么场景,特别是主色的使用,如果本身是红色或者暖色的主色,那么可以在以下地方使用:

1.希望引起用户强烈注意的地方(正向/警示)

2.核心转化按钮(几个不同层级)

3.正在激活的板块(标签、分段)





但是暖色为主色的产品核心转化按钮一定不会是冷色调


所以不用在意主色是红色而带来的正负向情绪,因为到了不同场景它的含义自然会变化,如果本身主色为冷色调,那么主色和辅助暖色都可以用在核心转化的按钮上或者用其主色,我见过冷色为主色但是核心转化按钮是辅助色的情况,我总结了一下,大家可以看以下两个产品的截图,如果本身产品的辅助色使用场景和频率很多,那么在核心转化和重要按钮上我们要使用品牌主色,但是如果在工具类型的产品中,辅助色的场景和出现频率很少,那么核心按钮和一些关键引导信息可以用辅助色。






2.功能即按钮?-两者的区别与设计思路


如果让你在原有的界面中设计某个功能,你会如何设计?可能我们第一反应就是先给他设计一个按钮。


按钮很好理解,我们先看看功能在释义上怎么说:事物或方法所发挥的有力作用


阿哟,这一听,简直太抽象了!这就好比让媒婆描述你的相亲对象长的怎么样小伙子看起来挺老实的抽象但又很清晰!大家看下面两个例子:


第一个-刷新,无论是图标还是文字,我们的预期是点击之后就会实现在当前状态/页面的数据重新获取



undefined



第二个-支付。支付也是一个功能,相比较刷新而言是一个复杂的系统的功能,但是它无法通过一个按钮来实现功能的全部作用。



很多同学在做信息架构的时候就很懵逼,那我要梳理的是按钮呢还是这样的功能呢?我好乱啊。当然,信息架构肯定不是功能的树状图堆砌那么简单啦,那个顶多叫做功能分类,信息架构需要包含更多的业务逻辑和状态逻辑


所以在这里就有三个结论:


1.功能是抽象的

有简单有复杂,但他们都需要通过外部的、具象的元素来实现其作用。



2.按钮只是功能具象化的一种

还有滑动、长按、甚至神经控制等等,如果大家玩过赛博朋克2077这个游戏就知道,义体的控制很多来自于大脑和神经,那么这些功能肯定不需要点击这样的操作行为啦,所以也不存在按钮。



undefined



3.如非必要,勿增按钮

我们在做设计的同时要思考,一个功能可以以什么样的形式存在,要满足高效、简约、符合心智模型等约束条件,比如做一个翻页,没有人会在app界面中设计一个下一页的按钮,抖音切换视频也不会出现一个按钮用来切换到下一个视频,再比如公众号文章收起需要通过滑动到指定位置,而非设置一个按钮。



undefined


以后再让你设计一个功能就不要直接做出一个按钮喔



3.设计中的控件样式-情理之中,意料之外


想把设计做的出彩一定要满足两个条件:1.符合常规认知  2.超出常规认知


听起来有点玄乎啊,第一眼看心知肚明,第二眼看我x,这个牛逼啊。


那其实我们在做UI设计的同时也可以多些创意和想法,不要被惯性思维和熟悉的手法所困扰。有时候你想做一些创意设计但总是被“不统一”这样的理由所驳回,麻烦把这篇文章转发给驳回你的人,很多有意思的设计都被淹没在这些“风险”提示里了。



比如网易云音乐这里的tab,大家都知道tab的样式和其交互方式,还有和segment的区别,那么如果既不想用segment样式又不想让用户进行所有滑动怎么办?


undefined



没错,他们在这个地方用了竖线隔开了,重新感受一下,是不是可滑动的感觉变弱了呢?


还有卡片设计中如何添加标签可以更顺滑,如何让一个按钮自然的融合到另一个模块里。



undefined



排版是否可以用异形设计,例如个人中心






4.产品体验案例收集-宁缺毋滥


我看到很多同学正在体验各种各样的产品,然后把一些不错的案例摘录下来进行分析,我觉得这是一件很好的事,我在2年前就鼓励大家这么做,因为这个也是作为一个UI设计师的基本功,除了视觉创意的积累以外也要有交互案例的积累。


但是我发现很多同学有点南辕北辙了,我们需要收录的是一些优秀的案例,何谓优秀呢,指的就是令人惊喜的功能,而非本该具有的或者无差别的功能(可以了解一下kano模型,这里不细说)。另外就是需要有分析的能力,不是什么案例都是优秀的,有些可能存在着不好的体验。俞军在其产品方法论中提到:用户价值=新体验-旧体验-切换成本,所以价值大不大取决于新体验是不是足够好。


现在看到的就是可能这个产品把字加粗了,也能写出一大堆分析这个加粗的好处,或者一个卡片设计就能写出非常有亲和力,信息更聚焦这样空洞的词汇,这对于我们积累案例没有任何的帮助。


例如以下的案例,在编辑状态返回系统会提示,从而滑出Actionsheet。如果不做用户体验会很差,但是做了,用户并没有很惊喜,这就是一个必备的功能而已,所以对于一个案例到底是否优秀我们需要尽量客观的看待。




所以很多交互案例并不是不好,而是还没有达到能够被我们收藏的地步,如果没有撩到你的心,那我觉得咱们就矜持一些。



那什么是一个比较好的交互案例呢?好的交互案例一定是更近一步解决问题和深入场景的,比如我们在场景分析过程中对于预判这个概念的理解,例如行动按钮前置、替换、引导等等,例如像电影app在近电影放映前弹出取票码一样,这个功能如果不做,用户体验不会很差,因为依然可以找到这个二维码,只是用户想不到居然还可以这样做,但是一旦研发出来,用户会觉得非常惊喜,这种就是优秀的体验设计。


undefined




再比如有些你可能觉得体验好的案例其实还没分析到位,就像高德地图在到达目的地时会给你很多场景的补全和选择,你肯定认为这很人性化啊,但是我在有一次使用“原路返回”功能的时候犹豫了。高德确实在帮助用户解决问题,但是在这里显然细节有待商榷。




很多用过这个功能的同学会发现“原路返回”的文案是有歧义的,功能是好功能,正不正紧就看文案了。来,我们解析一下场景:用户a通过高德地图导航到地点x,路上非常拥堵,好不容易到达目的地后需要返回起始地,这时高德提供了一个“原路返回”的按钮,他要不要点?


为什么说这里有歧义呢?


1.如果用户开始的行驶过程很拥堵,你告诉他原路返回,他的潜意识会觉得原路返回是不是也很拥堵。


2.原路返回到底是不是最佳路线,因为有时候来回路线的最优解并不是同一条马路的左右两侧。


所以,人是好人,正不正紧俺们也不知道。总之,这个文案让我不得不重新导航。


小结一下,优秀与否需要亲自深入的体验,并且结合上下文、用户、业务多角度的考虑,并非自己没见过的就是优秀的设计,咱们宁缺毋滥,提高自己的标准。





5.步骤少转化率就高-少即是多,多即是少


很多人一听到转化率就会把它和操作步骤关联起来,只要能减少用户的操作步骤和缩短任务路径就可以提升转化率。这个想法不能说全错,但也不能直接运用减法去当作提高转化的手段。



泰思勒复杂性守恒定律

不用管这人是谁,大家可以理解为能量守恒定律,也就是说在所有内容(功能、信息、元素)不变的情况下,步骤越少,单个步骤所承载的内容也就越多。比如你有100个球,给你5个盒子,平均每个盒子放20个球,但是如果拿走一个盒子,平均每个盒子就要放25个。


表面上盒子少了,但是每个盒子多出了5个球,这就意味着原来简洁的界面包含了更多的信息内容需要用户去理解、操作、判断。那我们可以说减少步骤就是提高转化率吗?显然不行。


比如我们看到马蜂窝和12306在购买车票流程中的表现:


马蜂窝

1.输入起始地目的地

2.选择出发时间

3.查看车次列表并选择

4.查看车次详情

5.选择座位类型、添加乘客信息、选择座位

6.确认订单

7.支付



12306

1.输入起始地目的地

2.选择出发时间

3.查看车次列表并选择

4.查看车次详情、选择座位类型、添加乘客信息、选择座位

5.确认订单

6.支付


大家可以看到马蜂窝比12306多了一个界面,他们把查看车次详情单独用一个界面设计了,而12306则是座位类型、详情、乘客信息、座位选择都放在了一个界面,表面上看好像步骤确实少了,但我们能看到像第三方的购票软件还有其他购票的选项,例如极速订座、车票+酒店等,所以在这个场景中需要展开展示给用户,那么如果把这些都放在12306的确认订单界面就会非常拥挤,而且选中状态也很不直观。所以最好的解决方法就是拆成两步。


undefined

undefined



再来看个例子,在某个产品的1级界面中,有一个添加训练计划的功能。左边是在1级界面中露出直接添加的按钮,并且添加成功后在1级界面直接展示。右侧则是进入二级界面进行添加。在步骤上来说显然左侧案例的步骤更短,那我们可以说左侧的用户体验、任务效率就更高吗?




对吗?大家可以思考一下。


显然不能直接说正确与否,因为我们缺少评判的标准和案例的背景对吧。首先左侧案例在添加任务流程中确实占优,但是对于需要频繁增删改查的用户而言就很不方便了,而且一直添加就会使首页下方内容推到很底部大大降低了曝光。而右侧的案例则更适合用户进行批量操作。


所以路径的长短并不能直接表示转化率的高低,那么有哪些情况可以缩短路径达到提高任务完成效率的目标呢?


1.减少步骤后不影响用户对界面和内容的理解


2.减少步骤后内容信息依然符合场景,不冲突


3.需要实时检查任务结果


4.有足够的版面可以进行内容合并


5.合并后对任务目标不会造成歧义


比如下面这个案例,一个书籍分类搜索原本的2个步骤是可以合并的,因为在原来的版本中,用户如果想切换更高级别的分类需要退出再选择,而一个界面其实就可以实现3级联动的效果,当然仅限于这个案例,根据业务不同我们需要对这些多层级、多类目的分类做更多的考量。



再来看一个案例,下面是一个预定篮球场地的流程,在这个流程中有几个关键的节点:场地类型、日期和时间,因为篮球场地和老板需求的特殊性,所以我们不横向去比较,我们可以来看看下面这个小程序的流程,预定步骤一共5步


1.时间和场地的选择

2.查看场地详情和说明

3.选择具体时间

4.确认订单详情

5.支付


undefined




我们先不讨论里面信息字段是否合理(最后确认订单还要填写性别和名字是什么鬼,打个球还要查家底吗),我们先来看这5个步骤是否可以简化。


一定是可以的,首先,日期和时间是属于同一纬度同一场景的信息,我在几月几号几点预约一个场地,这和看电影就完全不同了,每个电影院排期不同所以不能先把日期和时间都选了,但这里是可以一起选择完成的。那么第三个步骤完全没有必要,直接和第一个界面结合即可。





另外,不要被先入为主的样式给蒙蔽了,场地一定要做成列表吗?除非特殊场地,每一个半场其实都是一样的,可能在光线和设施上有些区别,但是对于经常打球和第一次预约的用户来说其实没有实质的区别,所以这里可以用宫格形式替代。


然后查看详情和说明个人觉得也比较多余,经常预约打球的用户已经非常熟悉场地了,对于新用户来说也只是看一下场地的环境,所以这个页面本身内容就不多,所以可以直接和确认订单详情结合,将确认订单页的内容做减法。这样是不是整个流程减少了两步,大大的提升了任务完成的效率呢?





最后总结一下


每个人都有自己的惯性思维和刻板印象,有时候能帮助我们更高效的完成任务,但有时候这些潜意识的反应也会让我们深陷泥潭而不自知。只有当我们深入剖析一个问题时,才能发现其本质,适当让自己保持批判性思维是有帮助的。

文章来源:站酷  作者:应骏

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

5G与AI的加持,智能家居能否“去伪存真”?

资深UI设计者

编辑导读:看过《钢铁侠》电影的朋友一定对“贾维斯”不陌生,这个智能管家是很多人的梦想,也是现在智能家居发展的方向。在5G和AI的加持下,智能家居的发展状况如何?本文作者对此进行了分析,希望对你有帮助。

“贾维斯,你在么?-我随时待命” ——只闻其声,不见其物的贾维斯,相信看过电影《钢铁侠》的朋友对它并不陌生。像“钢铁侠机甲的大脑,独立思考、处理各项事务,超级软件、智能管家”等等,是它留给观众的印象。

但其实,贾维斯在影片中塑造的形象最贴近钢铁侠机甲的大脑,这也是我们对它最深刻的印象。不过,贾维斯以智能家居的形态率先亮相,相信很多观众会被那种智能的体验所吸引。

贾维斯的出场方式给未来智能家居留下了很大的遐想,可如今的智能家居是否像荧幕上那般智能、令人向往?

要想回答这个问题,我们得知道,当下谈论智能家居的我们究竟在谈什么,是谈智能家居带给我们生活方式的变革,还是谈智能家居根本不是生活的必需品?智能家居的“真与伪”,这个话题似乎进行得如火如茶。

那一起聊聊这个话题吧,本文将围绕,[5G与AI的加持,智能家居能否“去伪存真”?]这个主题,做出一些思考和解析。

对于该主题,将从以下四个方面展开,并一一解析。

  1. 一伪,伪真实:“贾维斯”(智能管家)走出荧幕,并不真实。
  2. 二伪,伪智能:家居产品联网,并不智能。
  3. 三伪:伪需求:达不到预期的家居产品,并不需要。
  4. 真,有价值:真正的智能家居是可以给家庭创造价值的。

一、“贾维斯”走出荧幕,并不真实

本文开头提到《钢铁侠》中的贾维斯,是一个科幻角色,更是一种科技。不过,也正因影片留给我们一些难以触及的画面,所以对于科幻影视所塑造的科技,我们大都抱以不真实的态度看待,何以想象这些角色(科技)就如剧中所现(非简单的外观IP化)地走出荧幕,融入到真实生活。

时势造英雄,Facebook的创始人扎克伯格,或是出于个人兴趣,亦或是对商业的探索,于2016年打造出了人工智能管家——Jarvis(贾维斯),这也似乎预示着,科幻角色走不出荧幕的说法即将破灭。

但,扎克伯格给我们呈现的Jarvis,谈不上是钢铁侠中的贾维斯原型,两者并没有一些很吻合的地方,似乎更像智能音箱是一款家庭语音助手。然而,这也印证了“钢铁侠中的贾维斯走出荧幕并不真实”的说法是正确的。

或许仅凭一个“失败”的案例不足以证实以上的说法,那我们可以试着从这几方面来佐证。

第一,我们熟知贾维斯是具备“自然交流”的能力,这种自然交流的能力并不是现在NLP能实现的对话,它的交流是自然的、不需唤醒、不需设计槽位,它不像机器的语音对话只能交互、回答一些浅层的问题,只能基于训练过的语料做出回复。

它更像人一样可以理解基础、复杂的每一句话,做到精准的话语意图识别,思考反馈。

如,钢铁侠:信不过别人,就先放我自己服务器上——贾维斯:这次算秘密计划吧?

可惜,让机器像人一样思考和理解是目前的技术瓶颈,是弱人工智能所不能企及的。

第二,让我们觉得有意思的是,贾维斯提供了全息影像的人机交互方式,虽然这种交互方式不如语言交流来得便捷,高效。但,也正由于一些信息是没法通过语音表现,而又不得不处理这些信息时,全息影像的隔空控制是摆脱物理控制、屏幕控制乃至新型的触控投影的最佳方式。

全息影像,也就是增强现实(AR)的结果,以现阶段的技术实现来看,AR所能达到的更多是呈现一种沉浸式的画面体验。

最后,也就是贾维斯最为智能的地方,漫威的影迷肯定知道,从钢铁侠的系列更新,到复仇者联盟的系列更新,钢铁侠一次比一次厉害,也许这是剧情所要。但,不能忽略的是,钢铁侠的强化,其实是贾维斯自我进化的结果。

“自我进化”说起来或许比较空旷。换种说法,我们看到的贾维斯在接收钢铁侠的命名后,不用钢铁侠的操作,就能自行的处理钢铁侠的各项命令。

例如:它能创造出另一个程序来自动的组装钢铁侠铠甲,它能自行设计铠甲及铠甲模型,它能自行处理“结冰”的问题等

而这种智能就像人在做事一样,不需要外在的干预就能独立完成。或许,你会觉得当前利用神经网络的深度学习也具备自行处理信息并给出反馈的能力。

但其实,深度学习是基于特定场景才能实现的自行处理,更何况深度学习是需要事先采集无数的数据,反复的训练后,从而形成一系列规则。然而,对某件事进行处理前还得有触发条件(规则内的数据),才能做出反馈(非技术者的理解,可能存在错误)。

例如:现在著称具有创造性的AI海报设计,就是利用深度学习的结果。它首先需要学习无数张海报,才得以知道海报美与丑的规则,还需要学习无数组海报的标签,才能理解海报内容与含义规则。

所谓的应用,我们也知道,当我们让它设计一张符合“父亲节”主题的海报时,系统就会根据规则输出设计。难一点的就是需要先理解输入的主题是何含义,才能输出符合的设计。

所以,以目前的深度学习实现结果来看,拥有创造力,自我进化,自主意识的贾维斯并不容易。

基于此,我们可以清楚,原型的贾维斯在弱人工智能时代较难走出荧幕。读到此,或许你会疑惑,走不出荧幕的角色跟智能家居有何关系?智能家居不应该像《钢铁侠》贾维斯开场秀那般能自动报时、自动开启窗帘就可以了吗?智能家居拥有像贾维斯那般能耐有何用途?

我想,这就是智能家居的“智能”给我们造成的潜意识误判,我们总觉得每一样产品要是具备联网、自动、传感器监测、交互控制就算智能了,由此众多家居产品就自然被冠以智能的名号。

所以,我们就觉得智能家居并不需要像贾维斯一样以人工智能管家身份存在。但想想,缺失人工智能技术赋能的家居产品,是真的智能吗?真的会变革家庭生活方式?

奈何于只要人工智能(AI)对某个行业或某个场景成功赋能应用,就“称得上”变革、颠覆。似乎颠覆是AI的一种标配。

不过从金融、交通、医疗、安防、教育等领域都有AI成功应用的典例来看,“颠覆”更是AI的驱动力,如今,处处是AI的影子。

AI在这些领域的应用好像都有一个共同点,那就是更好服务于人。于是我不禁就想,人生活于家庭,那如果所有服务于人的场景都可以融合到家中,那岂不是要颠覆社会呀。虽然,只是想想,但或许这才是人工智能的一个终极目标、是人工智能最大的应用场景。

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

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

优秀设计如何做到商业变现

资深UI设计者

写在前面的话

从互联网行业崛起至今,广告视觉设计风格经历了多次“更新换代”,技法愈发讲究,视觉愈发酷炫。但无论视觉表现如何进化,终究没有脱离互联网行业广告设计的常规套路。

“让用户能最快识别广告内容”是互联网广告设计的核心原则,因此我们纵观市面上的各大平台广告设计,清一色是变着花样堆砌商品与利益点的内容形式,唯独不见传统广告所青睐的——创意。

的确,传统的4A广告创意内涵较为隐晦,往往需要观者沉浸体验、深入思考才能理解当中的精髓,这并不符合互联网广告的设计原则,但这不代表【创意】无法融入互联网广告之中。

乐信设计团队利用将近1年的时间不断探索、输出与验证,证实了创意也可以融入互联网广告,创意能为互联网广告产生更大的价值。

在分期乐平台,创意广告比普通广告的点击率平均提升了3倍以上!


互联网创意广告设计方法论

我们团队是怎么样做互联网广告创意的?
我们团队基于互联网广告设计的核心原则上,开发出一套适用于在互联网广告领域融入创意的设计方法论,我们称之为 【3S原则】。


何为【3S原则】?

【3S原则】分为三个部分,即 “Simple简单”“Story故事”,以及“Surprise出人意料”


SIMPLE:简单直接,易于理解。
由于互联网广告的性质决定了用户只会匆匆扫视而过,所以内容上必须尽可能的直接明了,降低用户的识别成本,毕竟我们不是真的在做4A广告,用户不会静下心来细品某一张图。

STORY:具有故事性,能引起情感共鸣。
能快速有效地引起用户共鸣的方式之一是,通过情景还原来击中用户的痛点,情景其实就是一个故事,因此一个好的创意需要一个好的故事作为载体。

SURPRISE:情理之中,意料之外。
一个出人意料的戏剧化结果可以有效地激起用户的兴趣,从而吸引用户的关注。比如在突出相机远摄变焦功能时,“在高楼中抓拍到蜘蛛侠”是否要比单纯的焦距倍数对比图要有趣得多?



创意方案
我们来看看具体案例。

① 美妆类创意方向

· 保湿补水
首先是一套关于护肤品的案例,主打保湿补水的功能。在业内常见的做法可能是在产品上浇点水,甚至直接放到水里面去,用的是非常简单粗暴的手法,那我们要怎么样围绕它来做创意呢?

根据【3S原则】,首先我们需要一个故事背景,其实就是讲清楚我们产品的卖点的是什么。

在这套广告里我们的“故事”其实就是表达产品补水效果的强大,且故事的结果必然是出人意料的,就是要让用户看到之后会惊呼:“诶,居然还能这样”。

于是我们想到了一个词——起死回生,用了这款产品能让你的肌肤起死回生;最后则是用最简单易懂的手法把我们的故事展现出来。


· 创意解读
把一个果干还原成它原本鲜嫩多汁的样子,并且利用1+1=2这种最简单的数学公式把果干(也就是使用前的状态)、产品、以及水果(使用后的样子)串联起来,让人一目了然。



② 手机类创意方向
做手机类的创意跟其他产品不太一样,因为手机是属于具有多种功能的产品类型,所以我们得考虑哪些功能会是用户更关注的。

在过程中我们挖掘了很多方向,比如有屏幕色彩、续航能力、摄影摄像、游戏性能等等,而我们选择的是各大手机厂商旗舰机型最着重的功能——摄影

但摄影里面也有很多细分,有广角、远摄、微距、人像等等,因此我们会根据厂商机型本身的卖点来进行创意发散。

但摄影里面也有很多细分,有广角、远摄、微距、人像等等,因此我们会根据厂商机型本身的卖点来进行创意发散。


当中我们挑选了两款远摄变焦功能特别强大的机型,分别是OPPO Reno 10倍变焦版以及VIVO X30pro。另外还有一款具备超级微距功能的OPPO Find X2。



A. 长焦距远摄创意
我们先来看一下远摄的案例。

一般来说官方的做法是直接把焦距放大的倍数效果图放出来,比如原图是怎样、放大10倍是怎样、20倍又是怎样。这样做虽然是非常直接有效的,但同时也会略显无趣,而我们要如何做这个创意?

这里我们采用了两种方案,第一种是“捕捉不可能”,意思是通过长焦我能抓拍到正常情况根本拍不到的东西,还记得【3S原则】里提到的意外结果的比喻吗?在高楼里抓拍到蜘蛛侠就是这种。


· 创意解读
而我们的方案是,我们的手机变焦的强大甚至能够抓拍到河对岸森林里的野人。那这是其中一种。
另外还有第二种方向,当然因为卖点同样是主打“超长变焦”,其实原理是一样的,但这种方向除了捕捉不可能以外,还结合环境联动的效果,看起来会更加有趣味性。我们一起来看看。


从方案里我们能看到正常拍出来是一个普通城市风景,当变焦到40倍时会发现“诶,大楼窗边好像有什么东西”。当变焦到最大60倍时会愕然发现,居然有个人拿着张纸叫你“买它”,而且纸上还有个箭头指着下面的手机。这种把画面内容超出边界,与环境互动的手法本身就比较特别,并且还蹭了个李佳琦的小热点,最终形成了化学反应,使得我们的广告更有趣味性。

其实在手法上用的是业内常用的倍数对比效果图,但当我们有一个戏剧化的结果时候,一切都会变得不一样起来。



B. 微距创意
我们再来看一下Find X2微距的案例。
同样官方直接展示微距摄影图,那根据 【3S原则】的“意外结果”,我们能不能通过拍摄微距,拍到一些不可能的奇妙事物呢?

· 创意解读
由于疫情的爆发,我们不管去哪里都得带上口罩,基于此我们把“疫情”、“口罩”这种热点考虑到我们的创意里,于是得到了这个方案:我们通过微距摄影拍到了带口罩的蚂蚁!

利用这种超现实的夸张结果可以让用户眼前一亮,同时结合了广告投放时正处于疫情这种特殊时期,可提醒用户外出记得带口罩。



C.5G及游戏性能创意
接下来还有关于5G及手机游戏性能的创意。

最近“5G”功能可谓手机界最大的热点,而我们也围绕了“5G”进行过创意。“5G”时代的到来预计会对人们的生活带来颠覆性的改变,但由于现今尚未普及,我们想要接地气的宣传“5G“功能的话还需要结合一些现有的用户痛点才行。

恰逢腾讯黑鲨游戏手机的上市,给了我们机会点,我们决定以5G+游戏性能为目标开展创意。

但现今手机对游戏性能的体现主要是硬件维度上的展示,但如果我们需要结合用户痛点来体现我们的创意,则需要更清楚游戏玩家有哪些痛点才行,那么用户在玩游戏时都会有哪些痛点呢?



我们根据简单的用户调研发现,玩家们最关注的痛点是“网速”、“性能”,由这两个因素引发卡网、卡顿甚至掉线或死机是最难以忍受的,尤其是在竞技、对抗类游戏中,稍微“卡”一小会都能影响比赛的胜负。

因此我们利用“卡网”这个痛点来开展创意,并根据 【3S原则】,给出了因卡网导致的意外结果。


· 创意解读
创意主要结合了当下流行的游戏“吃鸡”,画面上以“对面快把你打死了,你连武器都还没加载出来”来体现网络卡、手机卡导致的悲剧,配以文案“绝不输在加载中”来反向提醒用户,你需要一台性能强大、网络连接极好的手机。



D.一加手机创意系列
这套创意主要围绕着新品“一加8系列”手机来展开,我们对一加8手机提取了主要的两个核心卖点。一个是一加8的“轻量”(整机重量只有180g,为当时全网最轻的手机),以及一加8pro所具有的超强还原的“瞳孔屏”。

针对这两个卖点,我们根据【3S原则】延展出两套创意,分别是以轻量为主的“轻如无物”,以及以屏幕还原为主的“以假乱真”


方案一:轻如无物

· 创意解读
既然主打轻量,那我们便把“轻”这个概念做到极致,让“轻”变得“更轻”,变得就像空气一样,完全感知不到它的重量,因此画面上展示的是拍照、玩游戏等日常的手机使用情景,但人物的手是空的,只保留使用手机时的姿势。



方案二:以假乱真

· 创意解读
对于“以假乱真”这块,我们也延伸出了两种不同的方向。其一是屏幕逼真显示的事物骗过了宠物,营造出一系列出其不意的有趣结果,如小狗无视了远处的飞盘,把手机叼回来给主人,以及猫猫被屏幕显示的鱼骗到,不停地舔屏;


至于其二,除了主打屏幕逼真显示的卖点以外,创意上还融合了一加8全网最轻手机(仅180g)的理念,把手机置换成扑克牌,或者用小尾指撑起手机,仿佛如蝴蝶般轻盈。




数据反馈
以上创意方案我们均通过ABtest得知点击率有很大提升。



补水专场:
创意广告点击率提升约2.87倍



OPPO Reno:
创意广告点击率提升约3.39倍


vivo X30 Pro:
创意广告点击率提升约3.87倍


OPPO Find X2:
创意广告点击率提升约3.13倍


腾讯黑鲨游戏手机:
创意广告点击率提升约4.49倍



一加8手机:
创意广告点击率提升约4.71倍


以上创意广告不仅点击率有大幅提升,对分期乐平台首页广告区域产出的GMV也带来了积极的提升作用,创意对GMV的拉升率约3.91%



One more thing?
然而,我们除了在平台首页banner应用创意以外,是否能有其他渠道,利用创意创造更大的收益呢?

答案当然是——有的!


· 品牌合作
有了创意,将使我们能与品牌方达成更深层次的合作。

我们可以利用创意来跟品牌方置换资源,比如在一加8系列广告中,我们通过创意为公司争取到品牌方的微博、微信、社区广告的投放及众多周边产品,通过投放我们的创意广告提升双方的品牌曝光,促进手机销售,实现双赢。

创意,能让我们的设计不再局限在自身平台,能以更多的维度创造更大的价值。



结语
项目启动至今,整个过程都由我们乐信设计团队的设计师主导并推动业务方,我们持续挖掘创意在互联网广告领域应用的可能性,持续跟进数据反馈,最终不仅在专业维度上产出了优秀的创意作品,更在商业上取得了优异的成果,我们证明了好的设计、好的创意是具备促进业务增长的商业价值。


文章来源:站酷  作者:乐信用户体验设计

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

B端设计师怎样发挥设计价值?

资深UI设计者

在工作中,由于需要带一些新人了解 B 端知识, 而他们了解到的关于 B 端资料又非常少且都是碎片化的呈现。并且相对于 C 端的创新和趣味,会觉得 B 端设计显得更理性,视觉发挥空间相对有限,也会对 B 端设计的价值产生迷茫。因此,我尝试将自己 B 端经验提炼总结出来,一方面用于给团队成员做培训,另一方面也整理成文章,分享给其他同仁,希望互相学习。

做好角色定位

作为刚接触 B 端的人,可能并没有很快的认识到自身的角色和其所具备的责任、技能和能创造的价值。也不清楚如何体现自身价值以及增加自身价值的方向。

我们先来看一下基本产品的设计流程

B端设计师怎样发挥设计价值?来看京东高手的总结!

△ 基本产品设计流程

对思维的培养

你常常听见的设计流程就是产品出原型,在原型和需求文档的基础上进行设计,这在与产品的配合中属于被执行者,被动的接收产品的需求,按照原型输出设计稿,这会使 B 端的设计变得无趣,也体现不出你的价值。

B端设计师怎样发挥设计价值?来看京东高手的总结!

△ 你当前的流程

实际当中你可以是与产品互相成就、互相补位。与产品共同参与到对需求的挖掘、用户分析以及调研摸底当中,这会使你对项目的了解和后期的需求分析具有很大的帮助,能与产品一起组合考虑需要解决的根本问题是什么,我将采用何种设计方案去解决问题,这样才不会变成被动接收信息的工具人。

你要对所属项目的深入了解,看看是业务支撑类产品还是办公协同类产品或是商家端的产品等等,先了解是干什么的,在了解使用人的操作习惯和哪些方式对他们效率的提升有帮助。平常也要注意对通过用户发声的渠道收集他们对产品的讨论、建议和意见。便于我们对问题的积累和归类,使我们更容易站在全局的角度上思考问题,当启动相关问题的设计时我们能更快捷更深入的设计出用户需要的东西。另外帮助我们在与产品讨论一些迭代的体验优化提供数据支持。

B端设计师怎样发挥设计价值?来看京东高手的总结!

自身的修炼

B 端设计师的核心竞争力就是解决问题的能力,快速理解业务和处理业务的能力,只有拥有这些能力后,才可以去创造更多的价值。

B 端设计师可以在这几个地方锻炼自身的价值:

1. 从拆解入手:

我们通常在设计工作中会遇见小需求和大需求(包含多个产品模块小需求),小需求基本上是点对点需求,不需要细化拆解,这里就不多说了。

而大需求通常包含多个小需求,我们要采用化繁为简的方法——先规划后开工,拆解设计任务,从整体出发系统化的思考产品任务,在明确产品目标和设计目的后对需求进行拆分为多个阶段,再对每个阶段进行设计。在你拆分任务的时候你已经对未来的工作在心里有了建设,比如哪些地方是核心展示区域,我们需要花费的精力是多少,哪些数据图的展示形式会造成下游工作量的增加,是否对整体进度产生影响,哪些明细的展示是次要的花费精力最少,这里面也有可能会有团队协作的情况,这就要求大家有一致的目标、一致的规范。

B端设计师怎样发挥设计价值?来看京东高手的总结!

△ 基于目标拆解需求

2. 从解决问题入手:

后台的搭建离不开一套强大的、统一的 UI 规范。规范是设计视觉统一的基础也是配合技术团队高效产出一致体验所必不可少的工具。

说到规范就得提一下组件了,组件的产生是为了避免我们重复的造轮子,并且对控件细节进行了把控。市面上虽然有已经成熟的组件,但是和自身的业务特点并不一定贴合,就需要我们基于 B 端产品特性和自身业务特点,以灵活性、复用性、全面性的设计原则来进行设计,例如我们就对头部筛选项的自定义设置,在纵向间距关系和横向间距关系上指出信息之间的距离和关联性之间的关系,更能灵活的选取我们想要的状态进行搭配,复用全局的使用。提升了研发团队的效率也解决了视觉一致性的细节问题,节约时间去做更有意义的事情。

B端设计师怎样发挥设计价值?来看京东高手的总结!

△ 根据类型选择需要的头部筛选组件

设计赋能

对业务需求的 100%支持是设计的本职工作,那么我们的附加值就在“赋能“上,说起赋能我们就要说一下文章开头对思维的培养了,对思维的培养就是对需求的深挖,对问题的收集和思考,那么再进一步就要行动起来,主动进行用户调研,挖掘需求的突破点,找到更好的解决方案和更有价值的驱动点。那么我们在对不同项目赋能时也可采取此种方法进行思考,拆解任务跟进落地,提供规范与组件支撑,采集此流程中带来的价值,在项目结束后进行复盘总结,逐渐沉淀累积自身能力,逐步搭建自身的方法论在验证中成长。

结尾

这是一些我对自身价值寻找的一部分提炼,在工作当中我们也有很多其他方面的价值,这需要你自己去寻找,在寻找中增加自身价值,在设计中体现价值。变得越来越好。



文章来源:优设  作者:
JellyDesign

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


Widget-网络革命新思维

ui设计分享达人

从6月分的全球开发者大会至今,大部分苹果用户都更新至iOS 14正式版系统。Widget成为新版本系统中讨论度最高的部分,知乎、小红书、公众号各个平台都能会看到关于桌面小组件的讨论以及各种关于小组件排版设计攻略。本文带你了解Widget的「前世今生」,除了很Android外,Widget这次为什么会成为这次iOS 14更新的重中之重,各大应用抢先适配iOS 14,抢占流量的新入口。

小部件最初来源于苹果电脑工程师Rose的一个插件工具—Konfabulator,用来更换桌面运行工具的皮肤和外观。2003年的Konfabulator是运行在苹果操作系统之上的,而其中的主运行文件叫做Widget。就像现在很多的新型产品一样,当年的Konfabulator一经发布,在美国引起众多人的关注,两位开发者也最终决定将这款工具命名为Widget。

一直到2004年11月Widget1.8版本正式对外发布,此时的Widget不再局限于某一平台,而是一款跨平台的产品。Windows和Mac用户可以根据自己的喜好开发或使用Widget工具,这只是这款工具的开始。

时间来到2008,当时的苹果已经推出了iOS 2。而Google联合多家厂商开发了安卓系统,当时Android的最大特色就是开放,开发者可以根据自己的喜好随意的修改底层文件,我们当时印象中多变的Android桌面使用的就是Widget程序。我们熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的随意设计导致后来的Android设计语言碎片化严重、交互感受相互割裂。一直持续到Google将物理设计体验带入屏幕的设计语言Material Design,利用具象化的设计语言规范各家的开发,遵守统一的设计语言和交互感受,由于篇幅限制就不详细展开去说。

Widget的定位其实相当于应用程序的扩展程序,使用的关键点在于用户可以在不打开应用、无需加载等待的情况下,在屏幕上快速获取信息甚至进行简单的操作。

Widget按应用可分为三种:Desktop Widget、WEB Widget以及Mobile Widget,目前讨论最多的iOS14更新的Widget其实是运行在移动设备上的Desktop Widget,又称为Mobile Widget

注:Widget在刚进入中国的时候,没有通用的译名,由当时的中搜命名为“微件”。直到这次iOS 14才使用“小组件“的命名。

苹果多次强调Widget不是进入应用的另一种快捷方式,Widget是一种的信息展现方式,用来快速提供展示某些用户关心的应用程序数据。

Widget按照用户使用场景的不同,可以分为:信息小组件、集合小组件、控件小组件及混合小组件。而iOS 一直将主屏幕的控制放置于控制中心中进行交互,因此小组件类型的主要是信息小组件及集合小组件。

信息小组件

在人们的日常生活中有一类应用,无需进行操作,但应用需要经常性的更新信息。比如:天气、时钟等等。信息小部件将应用的关键性信息展示在小部件上,同时跟踪相关信息的变化。根据小部件的大小选择性的展示信息的密度。

集合小组件

同一类型的众多元素展示在小部件内,常见的比如:新闻报道、系列图片或电子邮件等等。这类小部件有两个特点:1.信息集合;2.点击集合元素中的某一个元素可快速进入详情页进行浏览。集合小部件可进行垂直滚动,但在iPhone端由于交互限制,并不能进行此项操作。例如:微博、知乎。

控件小组件

控件小组件子除了显示常用的功能状态外,用户可直接在主屏幕进行简单的触发操作,不需要打开相关应用,类似相关应用的外部遥控器。例如:音乐类小部件,用户可以在当前小部件上进行简单的暂停、切换曲目等操作。而iOS系统传统的“控制中心”包括大部分的手机操作部分,因此iOS 14的小组件还是以展示信息为主。

混合小组件

实际上更多的小部件是同时具备以上两个到三个特性的混合小部件。比如:音乐类小部件,不仅可以进行简单的交互,同时也展示了当前播放音乐的基本数据。

苹果作为全球化的顶级手机制作商,一直追求通用的设计语言。设计规范包括:完整性、一致性、直接操作、反馈、隐喻,用户控制等几个设计原则。苹果有别于其他手机系统的封闭式系统,作为一个习惯于为用户做决定的父系公司,虽然这次Widget的跟新被看做是苹果对于之前控制的减少,但在iOS 14关于Widget的官方设计指南中,也有明确的关于Widget尺寸的限制、卡片式的圆角半径的限制、展示内容形式限制、设计交互的限制。

iOS桌面小组件的内容虽然可以通过开发定制,但在手机桌面仍然保留规范的视觉规则。

三种尺寸

Android小部件之前虽然也有限制minHeight和minWidth的大小属性,但却可以通过左右上下拉伸大小,调整小部件信息展示内容的多少,因此大小其实是不受控制的。

在iOS 14这次更新的小部件,同一应用限制只提供3种尺寸2x2、2x4、4x4

小组件的核心功能是让用户无需进入app便可获得信息,即少量但即时、有用且高度相关的信息。因此针对不同作用的应用需要先进行展示信息的梳理整合,明确小部件的核心目标。


  • 2x2小尺寸的小部件类似动态图标,仅显示当前当地的天气,并可以打开应用。

  • 2x4中等尺寸以及4x4大尺寸的小部件,则可以在2x2的基础上额外展示更丰富的信息,并且可以与用户进行交互。


同时为了确保所有小部件的圆角看起来都是一样的,要求所有小部件采用SwiftUI容器应用正确的角半径。相关开发文档ContainerRelativeShape

位置吸附

Android手机桌面的widget可以随意的放置在任何位置。而iOS的小部件和之前的所有图标一样,仍然要紧贴其他应用吸附在屏幕的顶端,不能居住只能靠边放置。

智能堆栈

当在同一区域希望有多个小组件进行展示时,可以使用智能堆栈功能。根据不同的使用场景,通过上下滑动进行切换。Siri会根据时间的变化,显示不同的小组件内容。

苹果从iOS7开始借鉴了微软以及谷歌的设计语言,减少视觉装饰、抛弃了拟物化的设计风格,尽量以内容为核心,在这次的iOS小部件也对内容展示进行了限制。

  • 聚焦内容目标点。小部件的关键点在让用户易于浏览,所以需要前期进行设计目标的梳理,仅展示少量的信息,专注于程序的某一部分内容。

  • 显示内容与大小的关联性。创建不同尺寸的小部件时,不应该只是简单的扩大小部件的大小,而应该是在大尺寸时考虑展示更多内容,更详细的可视化效果,围绕基本信息的基础上修改表现形式,进行优化和调整。

  • 提供真正有用的信息。小部件的意义在可以在主屏幕立即为用户提供有意思的内容,而不是像桌面图标一样成为另一种快捷打开方式。

  • 保持展示内容的更新。小组件的展示数据需要不断的更新,否则无法吸引用户的注意。

  • 寻找应用的特殊性。例如日历小组件,可以针对特定的时间和事件进行独特的视觉处理。

  • 合理的设置选项。长按小组件会出现“编辑小组件”的选项,可以对组件的展示内容做分层或重要程度展示。例如:天气、时间切换城市的定位。网易云音乐“定制我的云音乐小组件”切换“每日音乐推荐、我喜欢的音乐、私人FM、歌单推荐、私人雷达”的顺序。

  • 避免在小组件中加入过多的交互元素。避免过多的目标,以至于用户无法点击所需的目标。根据内容小尺寸,设置一个点击元素便可,中大尺寸的小组件,可设置多个点击元素。如中等尺寸的微博,可以通过点击任意一条热点,查看热点内容。

  • 仅支持点击,不具备垂直滑动。在Android的集合类小部件除了基础的点击交互外,支持部件内信息的垂直滑动,但在iOS系统中的小部件不具备垂直滑动的操作方式,应该是苹果考虑到小部件在左划的homescreen,可以无限堆叠小部件,容易引起交互操作的冲突。唯一的交互方式就是点击打开应用。

可以看到iOS 14的widget没有其他交互方式,只能通过点击唤醒应用或某条资讯的详情页。苹果在保证一贯简单明了的用户体验外,不建议应用商设计过于复杂的样式来呈现内容,尽可能的减少用户电池、网络方面的消耗。

weight设计系统内容常见布局形式,可以作为设计小组件时的参考。

由于苹果本身自带的话题属性,在2020年6月22日第一次线上开发者大会—WWDC20发布的widget,到iOS14正式版上线期间,国内外热度一直高居不下,首先各家应用厂商、个人设计开发师都推出自己对widget适配的产品;小红书、知乎、微博等公众流量平台的个大私欲流量博主基于产品的适配推出各种风格主屏幕的应用攻略,widget迅速成为巨大的流量入口。

从6月分的开发者大会到正式版上线,苹果在自家的应用App store的Today专题、iOS 14精选App对widget进行了针对性的推荐,当搜索“小组件”等关键词时还会出现“超实用的小组件”专题推荐。

基于苹果用户的巨大市场,App能够获得苹果的推荐意味着大量有效曝光以及话题热度,此时很大一部分应用,根据产品特点,抢先适配小组件功能,获得苹果推荐,抢占一波流量。

从9月份开始,color Widgets、倒数日、Widgetsmith、我的天气等多款以时钟、计时、日历、天气功能的小组件应用多次轮番登上App Store应用免费榜第一。(数据来自七麦数据)

并且直到现在依然维持相对稳定排名的高度,及高下载量。

这些数据一方面不仅因为用户在知乎、小红书、抖音对于如于如何使用小组件的功能、如何更定制化的设计布局自己桌面的讨论,还在于各大社交平台应势对于小组件话题的推送,使苹果的小组件获的了更多的关注度,与用户关注度。

而有些设计师看到这其中的巨大流量赚的盆满钵满。9月20日设计师@Traf在自己的社交媒体账号发布了自己设计的iOS 14主屏幕,立刻获得大量用户的喜欢。Traf转手将自己的这套图标以28美元的价格出售,开始就获得了3626人的支持(有兴趣的小伙伴可以点击https://icons.tr.af/ 购买),六天就赚了10 万美元,有人要去画图标了吗?

苹果对widget的特性定义为:简单明了(Glanceable)、恰当展示(Relevant)、个性化定制(Personalized)。阿里和京东于9月中旬基于对iOS新特性widget的理解与限制,分别对自家产品手淘和京东进行了适配设计。

京东根据iOS 14 widget提炼出的关键词:简洁、高效、内容化。整合自己出自己品牌的设计三大原则:个性、信息、情景。在设计原则的基础上,结合京东的业务指标和用户场景,制定出了京东widget的四个方向:物流(工具)、直播(互动)、店铺(私域)、秒杀(营销)。

  • 物流——提升获取信息的效率。及时查看物流通知,跟踪物流进度,提升用户获取信息的效率

  • 店铺——建立用户与产品间的连接。利用widget的展示功能,在桌面推出店铺的新品,方便用户随时随地关注不同店铺的新品。

  • 秒杀——聚焦首页获取核心信息。为用户实时提供秒杀商品,红包,配合京东的签到形式,承载京东营销矩阵的业务背景。

  • 直播——用户互动。推荐热门、感兴趣的直播,预告明星直播,增加用户与用户、用户与主播间的互动。

手淘根据数据得出:用户虽然平均每天进入屏幕的次数超过90次,但停留的总时长不过几分钟。结合一闪而过的快速切换应用的主屏幕里,设计交互复杂的应用界面并不能契合用户的需求。得出设计要素:一目了然、高相关性、个性化

  • 所见即所得的物流——将查看物流信息之前需要“打开手淘、点击我的、进入订单、查看物流”4步操作,简化至前台widget透出,用户轻松掌握包裹的一举一动。

  • 强大的订单管理——基于手淘人群60%的目标在订单模式,快速启动功能。以及对一些必要widget做了深色模式的颜色适配。

  • 便捷的互动权益提醒——针对淘宝人生、淘金币、芭芭农场等互动专区,可在widget组件上时效了解自己互动权益的完成状态。

  • 千人千面内容定制——基于商品、社区、直播、店铺等手淘的广泛产品,通过多元的方法将前台的展示权利交给用户。例如:关注的店铺,关注的直播内容,爱豆的时装秀。

京东立足于自身的业务指标和用户场景制定京东widget的四个方向,手淘根据数据导向一目了然的用户需求。但由于京东与手淘都是购物应用,结合widget信息展示的特点,最终的聚焦点都是在于信息的获取效率及提醒。使用户在不打开应用的前提下,满足不同的场景需求。但淘宝常年的游戏营销,淘宝人生、淘金币、芭芭农场的互动场景使他的业务场景化比京东更游戏化,在视觉方面也更丰富。

推荐阅读:

京东APP iOS14适配解锁

来了来了,iOS14 和淘宝新功能一起来了!!

下面推荐几款我自己觉得非常不错的小组件。

开发者David Smith发布的一款用户可以自己创建定制天气、日期、天文等widget的应用。该应用采用了直观的图形界面话,精确调整每个widget包括字体、颜色、背景色等的显示信息和样式。支持大、中、小三个尺寸,与iOS 14的Widget 大小是完整匹配。

与其他小组件不同的是,Widgetsmith可以根据时间自动变换小组件,在编辑小组件时选择“Add a Timed Widget”,然后在表盘上划分时间,并添加对应的小组件。放置在桌面的小组件就会随着时间变化成相对的画面。

这款应用与其他天气类应用不同的地方在于,它提供了9种的widget样式,17个主题,满足用户各种风格的需求。除了常规的天气预报外,还有实时天气,空气质量、世界天气、生活指数可供选择这款应用与其他天气类应用不同的地方在于,它提供了9种的widget样式,17个主题,满足用户各种风格的需求。除了常规的天气预报外,还有实时天气,空气质量、世界天气、生活指数可供选择。


我的天气同一家开发团队的另一款小组件倒数日,是一款可以直接在屏幕上看到不同主题倒数天数的小组件,能根据自己心情更换背景。此外还可以设置日历小组件和时钟小组件。

西窗炷采用白底黑字简约的界面风格,每天推送一首诗词,点击便可阅读全文。也可以通过编辑小组件选择自己想看朝代、体裁和显示字体。


没有买过豆瓣日历的举手,买完心心念念觉得自己会每天看一部电影,em……然而并没有。豆瓣的小部件除了两种电影日历的样式外,实时热门书影音排行的界面也能让用户不用打开应用,便可获得及时的影音信息,点击进入详情页面。

当然也有网友做出了史上最强小组件,以及其他有趣的组件

目前每个手机用户主屏幕上都会有越来越多的app,我们的衣食住行娱乐都需要各种app的协助完成,但随着app的增长,用户会将各种app按照种类、类型进行划分,靠线索记忆或肌肉记忆,熟悉app的位置,但随着时间的推移,我们可能又会有各种新的应用需要下载使用。重复分类、查找、点击进入的行为,其实是很浪费时间的步骤。

首先我将之前的主屏幕全部隐藏,只留一个主屏幕页面。数据显示日常对手机的操作交互中,有50%左右的通过左手/右手单手握持操作,而我本人习惯左手单手握持操作。操作热区如下图中所示的从左到右从下到上。

其中顶部区域及右边区域放置,豆瓣、西窗烛、我的天气等展示类小组件;Todoist、Thing3、倒数日等任务管理类小组件;知乎、微博、头条等咨询类小组件则可以放置于画面中间,不妨碍点击某条信息。也可以使用智能堆放功能,将多种小组件放置同一区域,通过上下滑动进行切换。最后放置自己平时使用频繁的应用图标即可,使用频率也是按从左向右的顺序。大小方面

苹果的app资源库会默认经常使用应用可以直接点击进入,在使用其他app不常用的app时,可以通过上方的查找区域进行搜索。

目前已经使用1个月左右,之前也试过各种好看的小部件,最后还是以效率为出发点,将大部分的app放置在app资源库中。

在我们的认知中,手机桌面更像是一个应用程序的目录。我们不会过多的在主屏幕停留,需要借助启动图标点击进入应用进行操作,用户打开某个桌面应用,在应用内进行操作;另一方面在当前app应用越来越多的现在,高频应用与低频应用混合,常常在使用时,陷入查找应用中,降低了信息获取的效率。小部件的使用,使得用户虽然还是不能在主屏幕界面进行数据处理,但小部件作为应用程序的扩展程序,用户却可以在不打开应用、无需加载等待的情况下,在主屏幕上快速获取信息甚至进行简单的操作,不得不说是在改变用户长久以来的使用习惯。

无论是Google从碎片的Android系统转向物理设计体验的Material Design设计语言来规范各家的开发。还是最早提出“One productfamily,One platform,One store”希望将手指与手机触摸交互与鼠标指针交互的打通,保证多设备的一致性,但最后却被自己各种花样作死的微软磁铁设计。各家都在尝试统一设计语言,以及交互感受。而这次iOS 14的,我们已经看到了苹果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的联动与融合,而小部件就是最重要的一步。

文章来源:站酷  作者:9号自习室

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



9招,提升设计中的空间感!

ui设计分享达人

空间感是指艺术形象通过一定手法引起的类似现实空间的审美感受。包括作品直接表现的空间和作品具体形象之外的使人想象到的空间。这种空间感,一定程度上决定着版面的视觉效果与美感。巧妙的利用空间,可以集中观众的注意力,丰富的层次感使作品更具观赏性,同时又可以让作品主次分明,更有效的传达信息。

通过对设计作品的参考分析,设计师深海总结了营造空间感的方法,大致分为以下九个类别,希望这篇文章能对大家有所帮助。



一、遮前掩后

“遮前掩后”的意思是:通过画面设计元素之间的遮挡,交代空间关系,从而产生一定的空间感。这种形式可能空间感较弱,但易于表达,可以使文字和图片更好的结合。


设计时为了保证信息的传达,普遍会选择将文字信息完整的展示出来。其实像上面两个案例一样,适当使用遮挡关系,反而能让文字与图像结合的更好。

人的大脑有“惯性阅读”的能力,这使得即使文字被遮挡,也不会影响太多识别性。


利用蒙版,然后局部破出,这也是营造空间感常用的手法。本质上,这也属于使用遮挡关系的一种方式,这种效果空间感更强,让观众有一种打破次元壁的感觉。

使用这种样式时需要注意:用作蒙版的图形或文字,必须简洁,并且识别性足够高,否则会影响信息的传达。



二、以小见大

“以小见大”指的是:利用近大远小、近疏远密的基本透视原理,来营造空间感的一种方式。

在平面设计中,面积大的元素使我们感觉更近,面积小的感觉更远,即使是单一的设计元素,只要遵循基本的透视原理,也能塑造出空间感。


从这两个案例可以看出,元素的面积大小变化越大,空间的纵深感就越强;通过控制元素之间的位置关系,可以使空间看起来平整或者曲折,表现力非常丰富。



三、山重水复

“山重水复”是“以小见大”的进阶版,同样是利用近大远小的物理规律,塑造空间感。不同的是,通过元素的无限重复,会让空间感更强,对排版的把控能力也要求更高一些。


重复的元素会让画面有很强的冲击力,强烈的空间感让观众仿佛在无限的跌落。使用这种版式一定要注意近疏远密的空间关系,否则会降低画面的可信度。



四、横峰侧岭

“横峰侧岭”是指:通过变形,改变元素的透视,在整个版面中塑造多个平面,以此来增强作品的空间感。


将同一平面的元素对齐,创造出虚拟的边界线,借助这些参考线来塑造不同方向的平面。如果觉得空间感不够强烈,可以借助辅助线加强透视。使用这种形式的重点在于,要注意阅读顺序和空间平面之间的关系,不要为了画面,一味地堆砌空间,信息的传达永远都是最重要的。


最近非常流行的立体效果,因为空间感强,很容易出效果,深受设计师们喜爱。其实这种类型也是通过透视和多个平面来塑造空间感,制作时大多需要3D软件进行辅助,才能实现如此真实的透视效果。



五、冰厚三尺

“冰厚三尺”指的是通过给元素添加厚度,增强元素的立体感,从而提升空间感。这是一种非常简单粗暴的方式,立体化后的元素,可以展现更多的角度,使排版方式更加多变,画面也更加灵动。


最常见的2.5D风格,去除了透视感,依靠立体元素来营造空间感,可以使整个版面更加稳定和谐。有些设计师还会引入矛盾空间,让设计作品看起来更有趣味性,吸引用户目光。



六、潜踪隐迹

“潜踪隐迹”的意思是:通过改变透明度,模拟雾中的物体,距离越远的元素可见度越低,从而营造出空间感。


在中国传统国画中,就会通过控制水墨的浓淡,来展现画面的空间感。因此这种方法很适合中国风的设计,让整个作品富有神秘、幽寂的气质。



七、雾里看花

“雾里看花”和“潜踪隐迹”很相似,通过虚实的变化,模拟现实世界中的景深效果,从而塑造空间感。这种方法是最常见的,也是最出效果的,在塑造空间感的同时,还可以强调主体信息。


在对版面元素进行模糊处理的时候,要考虑元素与焦点的位置关系:距离焦点越远,模糊程度越高,普遍情况下,会将最主要的视觉元素作为焦点,保证信息的准确传达。



八、浮光掠影

有光的地方就存在影子,投影本就是空间感的一种直接反应,“浮光掠影”就是利用光影的变化,在平面中营造视觉上的空间感。


光影的变化非常丰富,因此,光影的表现方式也是五花八门。殊途同归的是,所有的光影都是为空间感服务的,所以大多数情况下,都要遵循现实世界中的规律,确定一个光源,保证整个画面的光影统一。



九、镜花水月

随着软件功能越来越强大,重现现实世界越来越容易。“镜花水月”指的就是:参考现实世界的折射、反射等自然现象,在平面空间塑造空间感。这种方式看起来质感很强,效果也非常酷炫。


需要注意的是:在设计之前一定要考虑好效果与内容的关系,一味的堆加效果,除了炫技毫无价值。

文章来源:站酷  作者:设计师深海

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


浅聊B端产品设计

资深UI设计者

带各位了解下B端和C端的区别,重点介绍下设计规范体系搭建的框架和思路



初识C端和B端产品


C端 Consumer,表示为消费者、个人用户或终端用户,

直接面向普通用户提供服务来帮助他们实现个人需求,

常见就是大家手机中常用的应用。


B端 Business,表示为商业和企业,

是为帮助企业集团等实现商业目的而设计的软件、工具或者平台,

常见的两种类型:

  1. 支撑前台产品(千牛、商家后台、微信公众平台、微信开发平台、微博开放平台等)

  2. 资源管理产品(Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系统、FMS财务管理系统等)


C端产品主要偏向消费互联网,更感性,怎么用的舒服怎么来,用户体验极佳;

B端产品主要偏向产业互联网,更理性,能解决实际问题,降本增效;


B端产品为什么要做设计规范


因为B端产品属性不同于C端,竞品参考少之又少,能找到也可能因为付费或者权限的原因,无法从“上帝”视角查看全局,也只能看到冰山一角,而且每个企业单位都有一套自己的产品体系,竞品差异化还是有的,但是有一点是不变的,就是设计底层的规范和原则,变得只是产品流呈现,就像乐高。


B端产品往往拥有复杂的业务逻辑且页面量级巨大,快速迭代也会引发频繁的变动以及并行概率的增加,需要设计师内部协同,或与开发能够快速的产出方案保证上线。这样的工作模式引发的副作用如:“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现,变成一个急待解决的问题。


设计规范就是为了节约成本,提升效率,保证质量。


这里不由得要提另一个概念——原子化组件思维,一个完整的页面是由无数个元素构成的,页面元素可以进行层层拆解。“组”是页面元素的搭建方式,“件”由不同的最小单位解耦元素组成。


这里着重说一下一定在前期做好设计规范的规划和宣导落地,自己在项目设计执行阶段因为时间紧张且经验不足,一边画页面一边搭建规范,设计稿前后优化内容差异较大,导致有大量之前实现的页面问题较多,后期要投入很多的时间和人力去修改,这个问题还是蛮典型的,希望各位可以意识到设计规范的重要性。


怎样搭建设计规范?


我们没必要自己从0开始搭建,一套完整的规范体系,需要经过上百甚至上百张页面的积累打磨才能完成,时间也不允许我们这样做,但我们可以站在巨人的肩膀上去实现,现在很多大厂都有自己一套完整的设计规范体系,以下也是自己经常参考的规范:


蚂蚁设计:https://ant.design/index-cn

蚂蚁数据可视化:https://antv.vision/zh

饿了么:https://element.eleme.cn/#/zh-CN

iview:https://www.iviewui.com/

贝壳:http://design.ke.com/page/home


自己为公司建立的设计规范体系也是基于AntD,根据公司产品属性做了一些调整和优化,才逐渐形成了适合自己产品的规范体系,下来带各位梳理下设计规范需要做什么?


先放一张通用架构图,总体了解下有什么

接下来带各位过一下这五大板块内容,重点展示会配图解释,没配图的可在文末下载AntD设计规范作为参考,

设计过程中及时要和产品研发进行沟通评审,防止大面积复用带来的改稿,痛苦面具···


一、全局样式


1. 常规颜色

  • 主题色、功能色(错误/警告/成功);

  • 状态色(A/B/C等级);

  • 文字色(主要/次要/辅助/禁用/占位符/白色);

  • 线条色(基础/分割器);

  • 背景色(基础/禁用/表头);


2. 图表颜色(较常规颜色饱和度偏低,视觉体验较好)

  • 顺序色板(8种顺序颜色,饼图/环图适用);

  • 同色相色板(8种顺序颜色,饼图/环图适用);

  • 分组柱状图/堆叠图色板(5种颜色);

  • 语义色板(成功/警告/严重);

  • 文字色(轴标签/轴单位,继承文字常规颜色);

  • 线条色(XY轴实线/网格虚线);


3. 字体

  • 字体家族(字体识别顺序);

  • 字号(3~5种,保持克制);

  • 字重(Regular/Medium/Semibold);

  • 行高(一般为@1.5,较大字体行高需特殊处理);


4. 阴影

  • 默认(上下左右方向);

  • 悬浮(较默认偏深);

  • 模态框;


5. 图标(建议上传iconfont自己的项目库,方便前端调用)

  • 通用图标(线性/填充);

  • 行业图标(业务需要);

6. 布局(特别注意栅格自适应问题)

  • 间距(8点网格法是最为合适的产品间距制定方法);

  • 框架(导航/头部/页头/标签栏/树状容器/内容区域);

  • 栅格与标注(筛选/表单/详情/表格单元/弹窗);

顺手


二、组件库


1. 按钮

  • 常规按钮(填充/线框/虚线按钮);

  • 图标按钮;

  • 文字按钮;


2. 导航

下拉菜单、标签页、步骤条、分页器、锚点链接、面包屑;


3. 数据录入

输入框、选择器、单选框、多选框、开关、日期选择器、时间选择器、滑动输入条、上传;


4. 数据展示

头像、徽标、标签、文字提示、气泡卡片、内容、表格、滚动条、统计数值、时间轴、折叠面板、分隔器;


5. 反馈

对话框、全局提示、警告提示、进度条、结果、气泡确认框、加载中;


三、数据规则

空数据、电话号码、数值、金额、日期、时间、相对时间、脱敏、标准词汇库;


四、数据可视化

数据可视化这个板块其实并没有想象的那么简单,画个圆画个长方形什么的,你要重点了解的是以下几点:


1. 选择正确的图表类型(时间类、比较类、分步类、流程类、占比类);

2. 组件使用规范和说明(标题与注释、轴、图例、标签、提示信息);

3. 图表布局自适应(面对海量数据量与有限屏幕空间的冲突);

4. 交互(数据获取、信息加工、知识流转);


这里不多做赘述,基础介绍可以看看之前发布的文章,深层级的介绍可移步https://antv.vision/zh


五、模板页面提炼

规范体系搭建完成后,我们就可以用组件去搭建各类型场景的标准模板页面了,就像搭积木一样,过程还是很有成就感的。


登录页、引导页、工作台、查询列表、表单、详情、弹窗、左树右表、设置页、异常页、空状态;


每一类模板页面都有自己的使用场景、基本构成、注意要点等,举个例子,

1.【工作台】为用户提供处理和查看信息的捷径,为产品适当宣传产品的新动向等运营内容。

2.【查询列表】四大构成:数据过滤—数据统计—数据列表—批量操作;;

3.【表单页】明确当前页面任务,快速定位修改目标,简化填写流程,确保用户准确、轻松、快速地完成任务;


最终的这些模板页面还是要根据自己公司的产品属性来做一些调整,随着经手的同类型页面越多,最后的模板页面越标准。私密原因,这里展示些AntD的标准页面参考下:https://preview.pro.ant.design/


规范宣导落地


上述就是规范体系的主要构成了,规范搭建也只是设计部门的产出物,宣导和落地才是重中之重,

我们要对产品和研发拉会进行一次完整规范的内容宣导,

让产品同学明晰现在的产品框架和样式,原型图绘制样式和交互接近视觉稿;

让研发同学知晓我们是基于什么前端框架设计,源生组件有哪些地方修改过,还原过程中注意些什么;


给出我们规范的产出物,一份完整的PDF查看手册,一份上传设计稿可查看标注的链接地址和一个规范迭代文档,方便相关人员查看和对接迭代。


这中间过程不比规范搭建所花费的时间和精力少,做好持久战的决心,公司产品体验升级是否能成功就靠这一战了···加油。


总结


以上就是本次分享的全部内容了,总结的方向比较多,但都不太细致,也是先给各位一个整体框架和思路来应对相关的设计,更多的内容可以多去参考大厂,你会发现很多有意思的东西,从0到1或者从0.5到1,自己去探索去实践,成就感满满,这个过程就是进步的味道,相信你会爱上。



文章来源:站酷   作者:MiFan菌

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




微信的私域流量生意

资深UI设计者

这几年私域流量这个词很火热,很多企业都开始做私域流量,特别是在微信场景下进行的社群运营;一个优质的社群运营能让社群一直处于活跃状态,并且可以提高转化率;本文作者分享了关于微信的私域流量生意,我们一起来了解一下。


一、从做好一个微信群说起

最近这两年,随着在线教育和社区团购行业的兴起,私域流量这个词越来越被大家所熟知。不过我很讨厌私域流量这种说法,仿佛不把人当人看,而仅仅是一种流量数据指标而已。

那么什么是私域流量呢?用一句话来说,私域流量就是一个能与顾客拉近距离,离用户最近、最方便触达的方式而已。

在这之中,人情味是核心,比拼的是执行力,是一个慢工出细活的事情。

做好一个私域的内核是用户和内容的运营。

我今天来说说私域中的一个类目,社群运营

整个体系涉及到了打磨产品、如何做好增长、如何做好用户的活跃、和内容的产出以及如何服务好用户的多元化需求。

我相信在座的各位,在私域中与用户打交道的时候或多或少的沟通问题。

解决沟通问题有一个核心思路:你说出去的每一句话,做出来的事儿,都要真诚。

我们今天拆解的两个案例,一个是目前互联网最大的创投类科技媒体同时也是纳斯达克的上市公司;另一个则是目前国内规模最大的针对于企业高管的知识付费课程。

还有一系列的私域案例,有我深度参与的,有我日常打辅助的,也有也有我们进行代运营工作的(但是由于客户的隐私问题,有的案例我不方便透露具体的名称)。

我敢保证,今天的两个案例在座的人80%的人都或多或少使用过他们的产品,或者听过他们的名字。

二、社群产品的冷启动

为什么我把冷启动放在第一位?

因为一个冷启动好与坏直接关乎于后期的分销变现的效果。

先说一下XX创新大学。

目前市面上很多头部知识付费的公司,他们开始做上市辅导的IPO工作了,不要天真的以为这些公司都是靠单打独斗起来了,其实他们在很多的城市都有地方站的布局。

看似很牛逼,但是你知道他们在早起布局的过程中,也栽了不少的坑。

知识付费的地方站本质是一个代理生意,由于这是一个代理的生意,执行人员很容易按照原先设定话术和引流的一些行为ctrl+v 进行运营工作,但很快就发现了问题。

一是因为地方的认知与一线城市的差距很大。

不知道大家在过年回家的时候,跟身边的朋友或者当地的企业家前辈聊天的时候,能发现的明显的代沟。

我认识的很多当地传统企业的老板他们对于互联网和新媒营销的认识差距还是很大的。

其次,是因为当地年龄代沟的问题。

我们发现当地企业领导和公司高管都是将近四五十岁的人,线上时间较短,更不要提成交转化了。

基于这两个问题,我们开展了一系列攻艰克难的尝试。

首先,我们通过了很多人脉在线下对接到了很多地方优秀的创业者,在接触的过程中发现,大家在疫情时期对于传统行业如何转型有着迫切的需求,而且他们泡在线下的时间远比线上的时间多。

针对于这一点,我们打算从线下的交流分享会进行切入,将交流会的服务搭配着虚拟会员一起售卖,不仅提升了客单价还可以发展很多线下的分销渠道。

那我们是如何做线下的冷启动呢?

因为对我们而言,线下流量的多少,直接关系到我们的成交,以及品牌势能,包括后期分销渠道的搭建。

因为我们针对的更多的是企业家,也就是B端的用户,他不像C端的流量可以进行投放去算ROI。一个好的冷启动是非常关键的。

当时我们想了很多花里胡哨的操作,最终让我们醍醐灌顶的是王兴说过的一句话。

王兴最喜欢讲的一句话,结硬寨,打呆仗,你知道这句话谁说得吗,是曾国藩。

曾国藩曾给清廷上奏,原文是这样写的:

“臣不善骑马,未能身临前敌,亲自督阵。又行军过于迟钝,十余年来,但知结硬寨、打呆仗,从未用一奇谋、施一方略制敌于意计之外。”

说白了,这里讲的就是步步为营,稳扎稳打,不出奇兵,战胜对方。

我们经常说一句老话,就是:听了这么多道理却依然过不好这一生。

我问一下大家,大家有多少人坚持100天来履行自己的健身计划呢?所以说,大家抓执行的能力的度待提升的,因为大部分人是不一定具备躬身入局的能力。

就拿我们老家,河北省的地方运营中心来说。我们也算是把细节做到了极致。

我们前期,通过人脉关系让所有人都免费参加,来增强线下的初期势能。

针对地方已购买产品却长期沉默的用户我们人工电话一个个电话或者线下一对一的去进行召回的。在这里说一点,一个声音好听的妹子,确实可以让用户多听你BB一分钟。

那个时候一天在线下能见30多个人,嗓子都干了,确实累,不过,只要有效,莽就完事了。

用尽一切的能力去找到联运方,那个时候我们很荣幸的找到一个很有名的读书的地方代理,但是大家要记住,在联运的前期,一定要把双方的权益写清楚,否则后期会遇到很多麻烦的事情。

动用你所有邀请到的人,让他们去发发朋友圈,因为他们企业家的朋友圈还是比较精准的。

那个时候我们通过大半个月的时间基本把当地的创业者跑了一遍,初次召集了2000多号的人。

试想一下当地上千号的大小老板在同一时间的发朋友圈帮你宣传,是一种什么样的影响力。

利用个人IP好好的去做内容,保持个人的内容输出。

通过这种方式我们在前期基本上能在当地进行小规模的刷屏。

后期我们又不断提升线上的影响力。我们在抖音、快手和视频号的平台选择中,最终选择了全力做视频号;我们利用手中已有的企业家资源,进行微信视频号的连麦直播,通过社交关系,很快的就覆盖了市内的大部分企业家,不仅增强了品牌的影响力,也慢慢的增强了他们对于线上的使用习惯。

到此为止我们才慢慢的开始利用品牌的影响力开始裂变分销。

我相信很多人都在意社群的转化,在意分销体系的搭建;只不过一口吃成一个胖子,这是不现实的。

在分销转化之前还有很重要的一步,就是活跃。

三、社群的活跃与用户粘性

这个案例是一个行业媒体的社群。

在上文中我们列举了冷启动做起来的种种方法,在启动后相信很多人都遇到了一个问题,社群是有生命周期的,我们拿这个行业媒体的社群给大家拆解一下生命周期活跃的这个事儿。

作为行业媒体来说,大家更看重其自身所带的内容,所以在社群的活跃方面,用户的忠诚度一定是以内容的价值来衡量的。

那么针对于一家互联网创投媒体来说什么是有价值的内容呢?

1. 要看目标用户定位

创投媒体的受众大部分是以互联网、广告营销、金融为主的人,还有一部分的创业者和对商业科技感兴趣的学生;所以在话题的选择上也是围绕这些去做文章,尽量的找一些大家感兴趣的话题引起讨论。

2. 需要营造一个有发散性的话题和一个良好的讨论气氛

如何做一个社群交流的话题呢?

按照我的总结就是:信任感+信息差。

所谓的信任感,来源于用户对于品牌信任,以及群友对于群主的信任。绝大多数人不具头部品牌的影响力,那么就更要专注于你与群友之间的信任建立。

信息差是什么?俗话说:三日不见当刮目相看。

为什么人和人拉开距离的速度会非常的快?这背后的原因就是是彼此的认知和信息差不一样。

国与国之前有信息差,行业之间有信息差。那么信息差呢?

我来举个例子!

我问大家两个问题:

  • 大家都知道美国比我们的科学技术发达,互联网的普及程度更早,那么为什么移动支付却在中国得到了大量的普及呢?
  • 国内的蚂蚁花呗和京东白条这么普及的情况下,为什么上门推销信用卡却这么被人抵触呢?

这些看似是讨论移动支付或互联网金融的商业问题,但这个简单的问题底下是我们通过词云埋藏了十多个话题点供大家讨论。

每一个词云点里至少有大于三种的讨论方向,大家想想海王为什么和姑娘总有的聊。

那么当这种内容进行发散输出的时候,这就是大家所期待的有价值的内容。

作为一个好的群聊话题,它是有节奏性的,从抛出话题,再到讨论话题,再到最后话题的总结,它是一个有始有终的过程;所以说,作为群主,想好这个话题的讨论点,把控好每一个环节,不要让这个环节里面出现过于激烈的争论。

如果有的话,你需要动用自己的情商去好好的缓解;千万不要评判这个人说的是对的还是错的,其实世界上所有东西在我看来没有对和错,只有说合适和不合适。

3. 定期做主题分享

分享的形式有两种:一种是邀请嘉宾,另一个是主题讨论。

我们会利用客户平台资源去邀请一下嘉宾。或者邀请群友进行分享。

有的群友可能没有那么系统性的输出,那么就可以进行一个主题会,比如我曾经就邀请了关于电商平台的运营人员、MCN以及品牌方从各个角度来讲解关于品牌营销的主题演讲。

4. 利用小KOL去影响更多的人

那在群里,什么样的人符合KOL的标准呢?

当一个合格的 KOL,其实并不容易,既要上知天文又要下知地理,又要能文善武,既要保持调性,还要平易近人,不能让群友太过仰视,离群友距离太过遥远;更不能让群友们俯视,变成单独服务向的“客服小妹”。

那我们筛选的漏斗模型是什么呢?

  • 乐于分享的人留下
  • 思维缜密对行业有独特认知的人留下
  • 有独特的分析角度和正确价值观的人留下

大家一定要好好服务好这些人,无论是做一笔生意也好,还是交朋友也罢,这些挖掘到的kol都是你在数字世界开疆拓土的战略盟友。

他们独树一帜的思想一定是能够在未来引起别人的关注。

在分享的过程中,一定要对分享者多多鼓励,毕竟谁不喜欢被表扬呢,无论这个分享是怎样的,能分享就是好的;一定要让分享,成为群内的良性循环。

不过再怎么活跃,各位一定也会遇到死群的问题;很多做微信生态的人都非常的拧巴,总觉得解散社群是一件非常抹不开面子的事情。

对于一些死群,我会利用解散社群重组的方式重新活跃。

每一次换血都意味着生命体细胞的再造。

这句话话怎么理解呢?

其实社群生命周期的本质跟细胞的组成是一样的,按照生物学的角度来说:人体细胞是有寿命的,每天都在更新,衰老死掉的细胞会被新的代替。

但是,人的大脑细胞是永久不变的,就算过了7年的周期,你的脑子依然还是同一个。

那么针对于社群来说,群主就是这个生命体的大脑,群员就是细胞,你的信息与内容就是流动的血液。

不要害怕社群的生命周期,作为一个生命体来说,摄取更多的氨基酸和维生素,寻找新的细胞来源,才是大脑应该考虑的事情。

当社群到了无话不谈的时候,就会出现新的交流需求。

群中有的人聊生活,有的人聊工作,有的人聊行业。

大家从陌生到熟悉是需要时间去建立的,每一个愿意在群里聊天的人都有他存在的意义,每一位发言的群友都值得被认真对待。

四、做社群的一些最朴素的方法论

1. 学会复制

对于绝大多数人来说,刚开始进入一个行业,最佳的方式不是创新,而是复制头部玩家成熟的模式,以保证自己能够在行业理解、团队结构、 技术运营等能力上迅速度过冷启动期;所以每一个互联网人,都应该有分析项目、拆解项目、复制项目的能力。

我们需要对于行业头部的打法保持敏感,同时想把办法跨行业的知识进行融合。

2. 人情味

群主本身即群员,我们既是社群的运营者,同时也是别人社群的群友。

当你脱离出kpi的数据视角,用人本主义的视角和同理心去理解社群,你会发现更大的世界。

3. 求知欲

求知欲就是对一切事物保持好奇。

我特别喜欢的一句话就是:好奇心是我对这个世界永不停歇的热情。

4. 对小工具的利用

在人类的进化史中,人类之所以为人,是因为人会使用火。在数字世界中生存进化,我们也需要利用好一切可以辅助运营的工具,方便我们进行事半功倍的管理。

5. 最后一点题外话

我时常问自己一个问题:一个知识社群的终局是什么?社群模式的天花板又在哪里?

先直接说一个结论,从长期来看,社群必然走向沉默。以社群为主的商业模式也注定会有天花板。

社群经济更多的是以服务成年人,以活跃的角度来说,没有一个人有时间在群里面天天扯闲。而且随着社群的发展,会逐渐导致流量的不精准,群里面也会逐渐“水”化,这是其一。

其二是因为,随着社群规模的扩大,就必须要做标准化的流程。

大家知道标准化是什么吗?

标准化意味着工业化,工业化的过程中就很难让底下的执行人兼顾到互动和情感。

但是,互动与情感其实是在数字社会中是尤为可贵的,这也是主办方伴我们召集在线下的原因,我们在线下的每一个点头,每一次眉头紧锁,都是很好的情感交流,这其实是在一个工业化的社群中很难做到的。

但这不意味社群的生意不赚钱,一个高效率的社群一定要讲究标准化,只有足够稳定的SOP才能做起来规模;所以社群组织的机体再生能和情感传递力才是我们应该多思考的思路。

解题不一定在当下,当大家好在嘲讽拼多多的拼一刀的时候,黄峥已经在思考生命科学和粮食安全的事情。

我粗浅地认为,这个事情,是从他22岁和段老师一起会面巴菲特的时候,就已经注定。

做一个砍一刀的电商并不性感,利用科学为社会提供价值才是性感;做一个数据导向的社群不性感,让社群有生命力有再生能力,才是真正的性感。



文章来源:人人都是产品经理   作者:纸皮小火车

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

CDEC中国数字智能生态大会的品牌视觉形象

seo达人

很荣幸受合作伙伴邀请,代表公司参加了CDEC中国数字智能生态大会。作为蓝蓝UI设计公司的一员,小编对本次大会的平面设计设计风格感受颇深、甚是欣赏。看了几家大公司的行业报告,欣赏了他们的软件功能之余,也膜拜了一下他们的平面设计风格,可以说各有千秋,都特别有隶属于自己的高端风格定位。下面是我在网站上搜索到的设计师重新定义的CDEC品牌视觉形象,希望你们也可以像我一样感受到艺术的力量给你带来的净化心灵的美好感受。我们蓝蓝UI设计公司承接各大软件大佬的软件大屏UIUE等设计和开发,欢迎联系我们,感受一下我们专业的技术与服务,一起合作共赢成长。
 

CDEC中国数字智能生态大会的前身为中国软件渠道大会,至今已经走到第十四届。覆盖20座城市,汇聚10000+优秀厂商、5000+渠道商,覆盖行业人群500000+,100+媒体深度报道,100+业界KOL参与演讲,促成合作数千家,大会发布权威研究报告《企业服务生态发展状况研究报告》十多本,打通企业数字化转型服务最后一公里。

2021年我们重新定义了CDEC的品牌视觉形象,以适应中国数字智能生态大会的全新定位。

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
文章来源:站酷   作者:许静工作室 

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

日历

链接

个人资料

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

存档