首页

回顾飞书管理后台的更新,这就是一个B端产品的发展史

分享达人

前言

如何了解一款产品是如何发展的?

我从 19 年到 23 年一直在关注飞书,4 年的变化,看到了我们作为设计师,在一款业务不断发展的产品、日益庞大的产品线中,它是如何进行设计的优化。

 

今天我们会结合 4 年产品的竞品截图,通过图片的方式来讲解飞书的交互更新。

 

并且我也是深度使用用户,也尝试揣测每一个改版背后设计师有哪些思考~ 「文末给大家准备了一点小福利,所以一定要看到最后」

 

小 Tips:今天我们主要说的是飞书管理后台,和飞书的客户端无关,这里为了方便描述,就以飞书代替。

初代丨第一版是如何设计的?

 

我记得第一次使用飞书是我司的产品想要寻找新的平台上架,那时候正是飞书刚刚面市商业化,我们老板去参加了飞书内部的无限大会,会议回来后就准备将我们产品上线到飞书,从那时开始我就对它有了个基础的了解。所以我是被迫的~

 

设计特点

在初代版本当中,飞书的设计其实十分有个性,因为当时很少看到如此设计的管理后台。

 

- 卡片内容区域:将飞书的内容区域变为一个圆角的卡片,这种做法即觉得很时髦(当时确实没见过),同时又感觉很不妥,看上去品牌调性不够严谨,果然后面这个方案就被优化了。证明刚开始一个产品问世,也不是做得非常的完美~

 

 

 

- 高饱和度的配色:整体颜色还是以高饱和度为主,无论是 图标 或者是 整体设计,颜色都用的十分靓丽,充斥着大量的 红、橙、黄、绿、紫,这也给人一种不够严谨的视觉形象。

 

 

- 全局导航:这是一个非常新颖的交互,当我们点击右上角的全局导航过后,会展开对应所有的导航信息,按照设计师的结构进行安排,这样我们就能预览所有的导航内容。这种做法当时觉得十分奇特,我也反复使用,但整体的使用感受不佳,因为我的导航信息所有都在左侧,而我要使用全局导航反而在右侧,不太符合使用习惯,后面你会发现这个功能也被砍掉了。

 

 

- 页面区分:页面的区分是整体设计非常重要的一环, 第一版本的飞书主要是通过分割线+投影来解决,你就会发现整体的页面分割不够明确,感觉像分了又没有完全分,也就导致页面当中很难聚焦,用户总是在漫无目的地不停寻找。

 

 

 

整体感受

通过初代的设计你会发现,即使是飞书在第一个版本的时候做得也不算特别好,并且还会有很多优化的空间,因此我们自己在实际的项目当中,刚开始主要还是以快速产出为主,不要有太多顾虑,完美主义也会有很多不完美的情况,就留在后续进行调整。

 

 

过渡丨业务发展是如何设计的

这次管理后台的迭代我记得是在2020年前后,那时候正是疫情的高峰期,也就导致了协同办公类的软件迎来了发展的黄金时期。而之前设计当中的很多问题,都在这一个时候勉强解决。

 

设计特点

- 前后台风格统一:在之前的飞书当中,你会发现 管理后台与桌面端 非常割裂,感觉像是两个产品。而现在通过统一的品牌色,尽可能将它们俩拉到同一起,看上去才像是一个统一的管理后台。

 

 

 

- 布局调整:在整体的交互结构上,做了相应的优化。比如之前的 tabs 与 标题 在整体导航的顶部,感觉其与内容毫无关联,现在的设计将标题下放,更适合大多数产品的使用场景。

 

 

- 面包屑的出现:从截图上我们其实能看到,这个时期的导航菜单已经非常多了,同时层级也会特别的深,因此在设计上通过面包屑来进行优化,先解决目前的燃眉之急,等后续产品业务发展成熟后再统一进行优化。

 

整体感受

这一时期很明显的能够感受到飞书就是在调整过渡,一方面业务发展十分迅速,需要响应;另一方面知道设计存在问题,但是没有太多精力,无法进行大改。这时候就会将用户反馈的所有问题记录下来,站在设计的角度思考方案可能就是我们应该做的。所以有的时候我们目前的方案哪怕有些瑕疵并不要紧,更重要的是如何解决这些瑕疵,汇总记录,等待时机。(毕竟研发资源很难争取...)

 

 

确定丨明确的设计思路

这次改动应该是在 2021 年,明确了未来设计的方向,开始进行大刀阔斧的改动。首先这一时期的飞书产品线急剧增加,据我了解就会有 「考勤、OKR、招聘、绩效、打卡」等多个产品线需要独立的管理后台,因此需要提供一个统一的设计方案,来将这些产品线的风格统一。

 

 

 

 

 

设计特点

 

- 纯白风格:内容部分主要是以纯白风格为主,同时 导航、功能 等辅助信息使用灰色进行呈现,这样我们可以更为聚焦。对比前两个版本发现确实要清晰很多。

 

 

- 降低饱和度:对比之前的设计方案,你会发现目前的设计整体降低了页面的饱和度,同时也明确的品牌的主题色 蓝色,其他颜色进行辅助,这样设计上更为明确,哪些内容为重点一目了然。其实这种风格是值得很多设计师借鉴的,因为现在有太多设计师产出的内容过于视觉,导致和整个品牌调性不相符,就会发现你的设计稿其实挺好,但就是不适合我们产品。

 

- 框架设计更清晰:这时候的内容与结构就会更为清晰,整体的白色突出的是内容部分,我们可以将内容完整的凸显出来。

 

整体感受

这一阶段其实已经非常完整,设计风格上没什么可挑剔的,同时交互结构上没有进行大的调整,更多是将 常用/新加 的功能进行呈现,比如 帮助中心、配置任务 等,都是为了满足特定的业务场景设计的。同时由于产品业务功能较多,你会发现他们提供了一个查看全部的按钮,用于一些 低频 隐藏功能的展示,在导航上尽可能的优化用户的使用体验。

 

整体来说这次改版比较成功,后面也会有很多产品前仆后继的采取这种风格形式,流行了一段时间。

 

 

优化丨基于业务再优化

就在前几天,飞书又进行了设计调整,从这一次改版发现 业务层面 还是有一些问题亟待解决,产品导航过多需要优化,看看飞书它的做法。

 

设计特点

- 导航优化:在之前的版本当中,一级导航菜单有 20+ 个,同时还有会很多其他产品线的管理后台,也就导致飞书管理后台非常的散乱,经常会出现来回不停的跳转。

面对这种情况,之前是采取隐藏+全部导航的思路,但是现如今已经不太能够解决这样的问题,同时飞书的很多产品都需要单独独立的配置项,因此采取页面的拆分,将导航分为 企业管理 与 产品设置。企业管理为产品的基础配置;产品设置则为对于附属产品的设置配置,这样就能让用户更为清晰的理解导航。

 

最后说说,面对导航如此之多,即使再自身的设计师来了也只能增加层级进行优化。木有太多灵丹妙药~ 

 

 

- 视觉调整:因为导航层级的增加,也就导致现在需要凸显顶部导航部分,所以将之前的灰色调整为白色。但感觉目前这个方案理解的难度依然较大,在座的同学们也可以思考一下能否有其他的解决方案。

 

 

 

整体感受

这次飞书将多条产品线打通,满足我能够在一个管理后台里,去配置多个产品的业务。其实这个问题我在之前体验飞书招聘时就发现,这样就能避免产品之前的割裂感,同时统一的交互在后续的 功能业务面市时,也能够快速的产出和响应。

这次的迭代由于有动画的效果,以及新颖的新手引导,整体还是感受还是十分不错。你会发现设计是没有一个终点,我们会根据业务的情况进行设计上的调整。而我们能做的,就是根据一次次的业务要求,去做出合适的设计。

 



作者:CE青年
链接:https://www.zcool.com.cn/article/ZMTUyMzk4MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计

软件qt开发软件wpf开发软件vue开发

B端产品设计01-业务及产品价值分析

分享达人

关于需求


来源


C端产品的需求通常来自用户自身的诉求,没有明显的行业特征和限制,会基于产品核心功能去附加其他的功能,探索更多的可能性。比如在聊天社交应用上,加一些娱乐性的小游戏、直播功能等。
而B端,一般由于外部环境改变,如政策法规、技术改革等引起企业对生产管理、工具的升级需求,或是企业人员、市场规模扩张带来的组织管理、产能提升等需求。
概括的说,就是C端的产品需求倾向于「 无中生有 」的制造需求。而B端,则是基于企业经营过程中「存在的问题」,然后为解决这些问题而促发的需求。


本质


企业经营管理的基本任务是「 合理地组织生产力 」,因此「 B端产品 」可以理解为企业用来提升生产力的「 工具 」,而提升生产力终极目的就是「 更多的盈利 」,而盈利的方式归根结底就是「 降本和增效 」。所以B端产品的作用,就是让企业有效的降低运营成本和增加效益。
在此之前,需要先清楚企业在「 做什么 」「 怎么做的 」以及这么做「 还存在什么问题 」,然后确定我们的产品可以怎样让企业「 更好更快更省钱地解决、改善这些问题 」,最终获得更大的经济效益。




了解业务


刚进入一个新公司、接触一个新行业时,我们通常只是了解到一些零星的信息,比如公司是干嘛的、业务名是什么、属于什么行业等等,对业务的了解只是停留在被动的阶段,想要做好相关的产品设计,需要主动进行更多的信息收集。围绕获取到的关键词,从市场、业务、产业、发展历程和趋势等方面,全面深入了解所要服务的企业状况,建立起对企业业务关系、价值体现的清晰认知。
「 建议 :在信息收集的过程中,可以同步把当前认为有用的信息整理出来,而那些可能有用但暂时还不清楚有什么用的内容,可以把相关链接记录下,并用文字标注自己对这个内容的记忆点和归类,方便后面再次查看。这样随着对业务的了解加深,范围会越来越大,可以减少后期再次查找资料的时间 」


名词定义


信息来源:「 XX 」「 XX是什么 」等关键词汇。
关于一些业务词汇的定义,可以先通过相关的百科词条,来了解它们的客观定义,纠正可能存在的认知偏差。
然后再从这些内容中获取到业务相关的其他信息、关键词汇,扩大信息收集范围。


产业链


信息来源:「 XX产业链 」「 XX行业上中下游」「 XX产业链分析 」等关键词汇。
关于产业链的内容,主要要清楚两方面的信息:

一是清晰企业处于产业链的哪个位置。中游,上游还是下游?

另外是上下游的业务关系,包括产品服务的供需关系和信息、价值的交换关系。




了解产业链的信息,有助于我们更全面的了解业务,在跟相关业务人员沟通时,也可以更好地理解对方所要表达的信息内容。


核心业务和目标


信息来源:「 XX业务流程 」「 XX工作规范」「 XX生产过程 」等关键词汇,根据所属行业的具体性质调整。还有企业方提供的资料。
清晰,以及确定我们产品的核心目标。
通过获取到的信息,梳理清楚业务的流程、逻辑和相关规则。确定业务的核心是什么,以及要达到的目标是什么。然后从业务的流程中,找到达成目标的关键节点,以及可以通过什么方法、技术、工具来实现。





发展历程


信息来源:「 XX发展史 」「 XX现状」等关键词汇。
「 当有事情想不清楚时,尝试回到基础理论、发展源头上 」,这个是我自己想不明白一些东西时会采用的方式,比如看相关的一些概论、发展史的书籍。
对于业务也是,从源头上开始了解,同样有助于我们更深刻和清晰的了解相关业务发展的最初目的。
从时间的维度上,了解业务从以前到现在、从线下到线上、从手工到电子到信息化等,在流程、使用技术、工具、相关政策标准等方面有什么样的发展变化。然后这些变化解决了哪些方面的问题,以及目前仍然存在什么问题。
在这个过程中,我们通常可以发现某些方面的问题,是整个业务发展过程都在关注和寻求改进解决方法的。而相关的需求通常就是整个产业发展的最根本需求点




行业现状和趋势


信息来源:「 XX现状 」「 XX未来发展」等关键词汇。这一部分跟前面的「 发展历程 」在收集信息过程中一般是重叠的。
「 站在巨人的肩膀上 」、「 知己知彼,超越竞品 」。
关于行业现状,一方面通过行业报告、行业概况等信息来源,了解行业发展状况和技术水平。另一方面是了解同行产品、同类型头部产品的水平,清楚目前业务功能的实现情况,以及强调的价值点是什么。站在行业和同行的水平上来进行产品设计,避免局限在自己的主观世界里。
而发展趋势,同样可以反映出行业所关注的产品价值点,清楚行业整体的发展方向,以及期望的发展方向是什么。




标准法规


信息来源:「 XX业务标准 」「 XX操作规范」「 XX质量要求 」等关键词汇,根据所属行业的具体性质调整,还有企业方提供的资料。
这方面对于一些G端、医疗类产品来说比较重要。
主要是通过相关的政策法规、行业标准、共识等,避免产品设计触及一些行业风险点。同时清楚产品相关标准和性能要求。


产品竞争力


通过对业务全方位多角度的了解和梳理,我们可以确定业务的核心需求和产品的价值点。但B端产品本质是商品,在市场上同样存在竞争,所以在清晰了核心业务和价值之后,还需要进一步找到我们产品的竞争力。
即如何让我们的产品在同类产品中占据优势,呈现出更高价值,让客户选择我们,甚至愿意付更高的价格。
在前面的分析中,关于「 现阶段业务流程存在的问题 」、「 同行新产品情况 」以及「 产业的最根本需求 」等信息,这些都是我们要重点关注的。再结合行业共识、发展趋势等关键信息,分析现有产品跟行业需求预期的差距,从中找到我们产品的机会点,发挥产品的价值。



总的来说


通过对业务的分析,需要清楚:

我们处于产业链的什么位置以及上下游的关系

核心业务和目标是什么

业务处理模式的发展过程以及最根本的需求点是什么

行业(业务)目前发展情况如何

我们产品的价值及竞争力在哪


注意点


我自己进行在业务信息收集时,经常会受以往接触到的信息或者自己假设的信息影响,有时候会在结论上混入一些主观想法。这是不太好的,因为对信息进行收集整理,就是要以客观存在的信息为依据,分析真正的产品价值点,而不是人为捏造创造的需求。也就是我们一开始说的,B端需求是基于已有问题来寻求解决方案的。
所以分析过程中要避免受自身的主观影响,而是基于现实的、客观的信息情况来分析得出相应的结论。
另外关于同类型产品价值点分析,如果所在行业业务发展还不是很成熟,需要从另外的角度去了解这些功能点的实际使用情况。比如同行们强调了5个功能价值点,实际客户有3个是基本没有利用到的,类似这样的情况。因为可能同行也还没搞清楚业务方的真正需求,只是在「 创造需求 」或是功能点的性能没有达到客户预期。
这一点也是有次在跟实施人员聊天时发现的,目前所在的行业发展也是比较初期的,所以很多东西并不是特别成熟。有几个我们跟同行都在宣传的价值点,实际在终端并没有怎么用,或者使用这个功能的目的跟我们设定的是不一样的。所以也不能过于相信竞品的,尽可能从另外的角度去对比、验证下。



以上就是关于B端产品设计中的业务和价值分析部分。
感谢阅读,期待交流。


作者:大鱼小鱼虾米
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

经典案例研究:推动业务发展,利用B端设计挖掘潜在价值

分享达人

当今提到促进业务增长,尤其是有关互联网行业,总是绕不开B端设计。那么今天我们来挖一挖B端设计到底牛在哪里。

1、什么是B端设计

B端设计是指针对企业的终端用户的产品设计,包括适用于消费者、企业、政府、行业等等市场的协同、全方位的客户体验设计,例如产品UI/UX设计、信息可视化设计等等。B端设计是提供终端用户新的解决方案,注重以客户的需求为导向,通过数据分析、可视化、流程优化等手段来进行产品设计。

在一个产品设计中,要考虑到用户的体验,UI/UX有着至关重要的作用,它能够把产品从用户的角度出发,将用户直接引入到设计之中,使用户步入终端,真正成为使用者。

此外,B端设计还要注重对业务流程的优化,例如在订单管理系统的设计中,需要把客户的需求分析清楚,尽可能用最少的步骤帮助客户快速进行订单操作,增加操作效率;同时,也需要考虑到如何将整个管理系统融入到业务流程之中,使其成为一个可持续发展的解决方案。

此外,B端设计还需要考虑系统安全性和可用性。系统安全性指的是在设计过程中重视数据安全,例如考虑不同用户的权限,避免未经授权的访问以及防止误操作等;而系统的可用性则指的是系统操作的一致性,即如何在使用中满足客户的需求,在系统功能上保障系统的完备性和易用性,为用户提供更方便的操作体验。

2、B端设计的组成部分

正确的B端设计应包括:用户界面设计、业务流程的优化、系统安全性以及可用性的考虑等。

用户界面设计的目的在于提供简单易用的用户界面,以满足客户需求,提高用户体验。

业务流程优化则是确保系统能够有效地协调用户间的沟通,使用户流程更加高效、可靠。

系统安全性考虑需要重视数据安全,增加对不同用户权限的考虑,以避免未经授权的访问以及误操作。

而系统可用性方面,则需要系统操作一致性,保障功能的完整性和易用性,使用户操作更加便捷。

用户界面设计还需要考虑跨浏览器的兼容性,以确保用户能够在不同的终端上获得有效的使用体验。此外,对于功能性更强的应用,还需要考虑响应速度、网络请求数和业务性能等方面的优化,以便在处理大量的信息时能够有效地完成任务。

对于不同的用户群体,应当提供相应的交互界面设计,例如考虑弱智使用者和视觉障碍者,以及婴幼儿等特殊群体。此外,可以通过支持多种语言、国家文化差异和地域语言来优化用户体验。

3、如何使用B端设计原则来推动业务发展

B端设计原则可以帮助企业更好的把握商业机遇,推动业务发展。

首先,应当按照核心业务找出客户需求,深入挖掘,从客户视角出发,明确目标。

其次,要强化设计意识,注重交互性,利用技术手段和平台将功能元件组合在一起,以便更好地解决客户面临的问题和满足客户的需求。

最后,对产品的功能、使用效果和用户体验进行定期的测试评估,根据反馈进行变更和优化,以满足客户的需求。

4、如何利用B端设计实现潜在的价值

为实现B端设计的潜在价值,可以采用多重方法,比如从创新的角度增加产品的附加值,加强功能和服务体验,提升网站可用性,优化页面布局,提高页面加载速度等。

另外,还可以改进客户体验,通过可视化或语音技术提升网站和移动应用的交互性,以便让客户更容易获取想要的信息和服务。

此外,可以加强产品的社会化和移动性,以便更好地满足客户的需求,从而获得更多的潜在价值。

对于B端设计来说,还要考虑技术层面的因素。

首先,应根据客户使用情况进行系统优化,以提高系统效率。

其次,要重视人机交互技术,尽可能提供给用户更好的界面体验,并利用智能技术提升用户体验。

此外,应结合实际情况,采用合适的网络技术和安全技术,提升网站的安全性。

最后,还要将设计与市场营销结合起来,通过有效的营销手段,提高客户购买意愿,以获得更多的潜在价值。

B端设计要考虑的技术层面因素有:系统优化、人机交互技术、网络技术和安全技术以及营销手段。这些都是为了能够更好地满足客户的需求,并获得更大的价值。

5、优秀的B端设计案例,以及借鉴价值

首先,淘宝的B端设计把价值的提升放在了首位。它通过实时监测用户行为来分析用户习惯,以实现实时调整,提升客户体验。此外,淘宝的营销手段也让它的业务获得了极大的成功。

另外,微信也是一个优秀的B端设计案例。它引入了更多的人机交互技术,以有效沟通用户,同时也提供更安全、便捷的服务,大大提升了用户体验,获得了广泛的应用。

总之,优秀的B端设计不仅能优化用户体验,还可以带来更多的商业价值。

从用户体验角度来看,优秀的B端设计应包括系统优化、人机交互技术、网络技术和安全技术,这样可以给用户提供更流畅的体验,更快的响应速度和更好的安全保障。

此外,B端设计还应该拥有一套完整和灵活的营销手段,帮助企业获得更多的客户价值,以提升品牌影响力和竞争力。

要做好B端设计,一个重要的方面是把用户群体的心理需求和行为习惯结合起来,设计出更具吸引力的产品界面。例如,可以通过实时调整产品配置、设定营销活动等手段来满足不同用户群体的需求。

另外,为了提升用户体验,应该使用更智能化的人工智能(AI)技术,帮助企业更好地分析用户行为,从而更有针对性地进行产品调整。

总而言之,B端设计的成功关键在于结合用户群体的心理需求和行为习惯,并利用智能化的AI技术对用户行为进行分析,只有这样才能设计出更具吸引力的产品界面,满足不同用户群体的需求,并提升用户体验。

在企业开发B端产品之前,应该先进行大量的市场调研,以便弄清楚用户的心理需求和行为习惯,这也是设计成功的前提。在制定设计思路时,应该结合用户需求和行为习惯,并加入智能化AI技术,以有效调整产品界面,使其更具吸引力。在可行性研究阶段,应该采用多种方法,以测试产品整体性能,包括安全性、可靠性等,确保系统可以正常运行,避免潜在风险的发生,为用户的体验提供完善的保障。市场调研是设计成功的先决条件。除了市场调研,企业还应该采用新颖的营销策略,以拓展客户群,丰富产品服务,提升用户体验,实现B端设计成功。


作者:和阿莫伊
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

作者:和阿莫伊     来源:站酷

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

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

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

如何提升设计价值

分享达人

引言:设计师的“价值困惑”

UX/UI设计师在日常工作中是否遇到以下疑问:

- 方案由业务、产品主导,设计师没有发挥空间怎么办?

- 如何从设计视角出发梳理体验优化建议?

- 如何向各方证明你的优化建议是有价值的?

要回答以上问题,首先得理解设计价值究竟为何。

一.如何理解设计的价值

设计≠艺术,设计从诞生之初就是为“解决问题”而存在。

在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。



下面详细解读【设计价值】与【业务/用户/产品】三方的关系:

1、设计价值源于业务目标,产于业务价值变现

商业设计本质上服务于业务,因此判断设计价值几何的关键是:是否真正地帮助业务解决问题,助力业务目标达成。换而言之,设计价值就是设计师通过设计思维/策略/方法,直接或间接帮助业务创造的那部分价值。

设计不能脱离业务自嗨,不能“为了强调存在而存在”。 有效设计在于对业务诉求的精准满足。我们构思设计方案时,脑海中始终要回答:

- 实现了哪些业务目标

- 解决了哪些业务问题

- 创造了哪些业务价值

2、通过对用户需求的洞察和满足,为业务创造价值

业务价值最直接的来源是用户价值的变现,因此,想要实现业务价值≈要服务好用户,这为设计价值的实现提供了有效抓手:设计师可以通过洞察用户需求,完善产品功能、优化操作体验的方式助力业务目标达成。

P.S.用户价值=产品给目标用户带来的核心价值,即:帮助用户解决了什么问题,满足了什么需求,提供了什么服务。

3、产品PRD是“第二参考视角”

对于资深设计师来说,产品PRD不一定是最优解,它更像是提供了解决问题的第二参考视角,产品侧在理解业务目标的基础之上,从实现角度产出了初步解决方案,为设计师打开思路。

不同阶段设计师在面对同一份PRD时,有如下处理方式:

- 初级:不知其然,表象复刻——直接按照PRD方案输出相应设计;

- 中级:知其然,表象完善——对PRD方案进行查漏补缺,提出体验层优化建议;

- 高级:知其所以然,透过表象看本质——综合业务/产品目标,挖掘用户原始需求,提出当下最优解。



二.“业务×用户×产品”三维度推导设计目标

当设计师拿到 BRD & PRD 后,如何综合多维视角制定设计目标和策略?下面列举了笔者在日常工作中重点关注的维度。

1、业务视角:明确定位

业务会从商业角度提供清晰定义产品边界和价值变现模型,从BRD中可以提取以下重点信息:

- 产品/需求的目标用户类型和特定场景范围;

- 给用户带来的核心价值(帮助用户解决了什么问题/满足了什么诉求);

- 用户价值变现模型和策略(如何通过满足诉求进而实现用户价值变现);

- 业务价值可量化指标

我们需要注意一下两点:

- 关注北极星指标,比如某些场景侧重“留存”,有些侧重“转化”,这会影响设计侧重;

- 在产品发展初期,了解业务线未来的布局和规划,可以帮助我们把握设阶段性计节奏。

2、用户视角:匹配 & 完善需求

用户是一切需求的源头,仅从业务视角出发定义需求是无本之木。因此当设计师碰到业务需求不明确,或者对产品方案存疑时,最好的办法就是回归用户视角。用户需求挖掘一方面可以丰富和完善业务目标,另一方面也帮助我们审视当前业务需求是否与用户诉求吻合。通过用户分析我们可以得到:

- 目标用户特征;

- 典型场景下核心诉求、任务和关键行为;

- 关键行为可量化指标

P.S.为了挖掘多维度用户诉求,我们可以根据具体场景将用户细分,如:

- 角色:如B端/C端;

- 熟悉程度:小白/普通/专家;

- 客户价值:高价值/一般价值;

- 兴趣/偏好:价格敏感/XX控;

- 目标强弱:强目标/半目标/无目标;

- 阶段:获取-激活-留存-收益-推荐;

- 流程:开始前/进行中/结束后...

3、产品视角:方案转化 & 实现约束

在业务主导的场景下,产品经理往往是需求的“第一经手人”,我们需要在PRD中捕捉到产品对业务需求的理解和转化策略。另外,产品视角也阐释了在落地实现层面的约束限制,特别是前台与中/后台的依赖关系。从 PRD 中可以获取以下重点信息:

- 产品目标和策略;

- 功能范围和核心流程;

- 中后台能力支持;

- 实现成本和风险点;

我们需要注意一下两点:

1/ 从产品系统的视角审视需求

多数情况下,我们接到的需求是点状的,可能是某个子模块的子流程/功能,此时我们可以用更系统的视角向上追溯,定位模块所属能力矩阵,找到模块与模块之间的联系,这有利于精准把握需求,保证链路场景闭环,为后续由点到面驱动更大层面体验优化作准备;



2/不要忽略实现层面的限制

很多功能不是“不该做”,而是当下“做不了”或“性价比低”,一些优化方案提出前,我们需要从产品角度考虑现有中后台能力支持、研发可行性、运营人力成本等,避免设计“空中楼阁”。

综合以上业务、用户和产品三个维度,我们更加精准推导设计目标。需要注意的是,设计不是万能的,大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现,我们只需关注可以通过设计手段参与、干预和落实的部分即可。一个设计目标的完整表述 = 通过【XX设计策略】帮助目标用户【实现XX价值/满足XX需求/解决XX问题】,以助力【XX业务目标/变现方式】达成。(在实际表达中可以适当精简)



三. 方案推导和设计价值量化

确立明确的设计目标和策略后,下面进入设计实施和验证阶段,这里推荐两个基础的推导模型。

1、SKS模型:从策略到方案

SKS模型,即策略(Strategy) → 影响因子(Key factor) → 解决方案(Solution)。设计目标中的策略是一切方案推导的源头,我们需要找到影响策略实现程度和效果的关键因素,将其视为可控变量,并以这些变量为切入点进行方案尝试,最终衍生多种解法。

比如:我们把提升Banner的点击率作为策略,那影响banner点击的影响因素可能是:形式是否新颖、配色是否亮眼、是否有动效引导、利益点是否突出、行动按钮是否吸引人点击等等,每一个影响因子都可以衍生出多种设计方案。

2、GAM模型:从目标到指标

上文提到,设计手段通常是以间接方式助力用户价值实现,进而赋能业务目标达成。那如何量化设计价值呢?我们可以使用“GAM模型”,即设计目标(Goal) → 高价值行为(Action) → 衡量指标(Metric)。具体方法如下:

1/ 设计目标反推高价值行为

一个设计目标实现,一定是由链路中一个/多个高价值行为促成。比如用户在真正“下单”前,会访问商品详情页,浏览商品详情页信息,加购物车等。

2/用行为指标度量设计价值

用数据刻画和度量高价值行为的指标变化,进而度量设计方案的价值用数据刻画和度量高价值行为的指标变化,进而度量设计方案的价值。 我们可以尽量多维度拆解高价值行为和相应度量指标,维度越多,关联性越高,判断误差越小。

结语

事有轻重缓急,不是所有的需求都需要走上述方法进行设计分析,要学会辨别重点的、有发展潜力的需求投入更多设计精力深入研究。后续笔者将通过具体的设计项目,详细阐述如何运用业务×产品×用户三重视角,推导改版目标和设计策略,敬请期待《「②实战篇」如何提升设计价值——2022京东APP频道广场V2.0改版探索》。


作者:AKA小蕾子
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

设计的价值是保障产品用户健康度

分享达人

宜家的设计为销售负责。比如设计一个杯子,宜家的设计师需要考虑如何更多的卖出杯子。没错,销售更多的产品是设计师的KPI。在这样的目标导向下,设计师很容易去思考几个问题。

  • 一定成本的杯子,用户为什么要买我的产品?解决做好产品设计的动力。
  • 杯子的使用场景和定位,是刷牙杯、还是咖啡杯,它应该是家用的、还是在高端的商业场所出现?基于成本出发,对设计、原材料和制作工艺的思考。
  • 杯子在售卖时期的陈列、互动形式应该是怎样的?基于如何能售出更多,解决产品的流量获取问题。
  • 杯子在使用过程中的手感、方便性。基于用户感受和体验,解决产品和用户互动的故事性,口碑问题。

众所周知,宜家的产品是场景化的,总能让人感受到设计师们的热情、心血和心机。设计为销售负责,售出更多的产品确实可以作为设计有效性的验证方式之一,但销售量却不能作为设计的量化标准。

这两者之间有很微妙的差异。我们引入一个概念叫做“数据趋势的正向反馈”来解释这个问题。“数据趋势的正向反馈”,它具备允许波动,且不为一个具象的数值服务的特征。类似下图示:

设计为销售负责,我们可以理解为,衡量好设计的其中一个维度标准就是销售“数据趋势的正向反馈”,值得注意,不是销售量的某个单一的KPI值。因为达成某个销售量的KPI值有很多手段,设计策略、产品策略、运营策略和营销策略等等方式都可能完成,如果用销售量去衡量设计,会让设计变得不够纯碎。但是,用“数据趋势的正向反馈”来衡量设计是否有效,用户是否认同却是可行的。而且,“数据趋势的正向反馈”意味销售量是持续增长的,哪怕有波动,哪怕有快慢,长期看能够持续增长代表用户是健康的。设计价值是为产品带来健康用户,或者说是保障产品的健康度。产品健康度一般看几个值。

用户跳出率

用户跳出率指只访问了入口页面就离开的访问量与所产生总访问量的百分比。通常互联网的平均跳出率大致是73%,如果你的产品跳出率超过这个值,说明用户质量不高。

平均访问时长

平均访问时长指用户在一次访问中,平均使用产品的时间。互联网的平均访问时长大致是2分40秒。

平均访问页数

平均访问页数=浏览量(PV)/访问次数。互联网的平均访问页数大致是2页。

除此之外,产品还会从营收的角度看用户支付金额、ARPU值和转化率等等。营收指标对与设计来说,就是需要参考的趋势数据了。了解了这些原理,怎么做呢?我们用首页改版为例,首先按上述要求定义用户健康度指标。假设首页承载电商内容,根据电商特性在基础指标之上,增加一个用户在首页的停留时长指标,这个指标衡量用户是否能在首页逛起来。

依据这些指标,就可以搭建针对于当前项目的用户健康度指标,在设计过程中通过对指标和指标用户的数据分析和对指标用户的访谈综合得出项目的核心问题及解决思路。通过线上验证设计方案观测数据模型的趋势变化,以获得最优的设计。设计在保障产品用户健康度上,是一个持续迭代的过程。

产品没有最健康,只有更健康。

作者:ZA大人

转载请注明:站酷

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


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


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


工作中如何体现设计价值?

分享达人

http://www.lanlanwork.comhttp://www.lanlanwork.comhttp://www.lanlanwork.comhttp://www.lanlanwork.com/dp.htmlhttp://www.lanlanwork.comhttp://www.lanlanwork.com/web.htmlhttp://www.lanlanwork.com/Design.htmlhttp://www.lanlanwork.com/Design.htmlhttp://www.lanlanwork.com

写在前面

一年一度的年底复盘总结大会即将开启,期间闲聊时被问:作为设计师,日常工作中如何体现设计价值?你们平时做的那些不是业务需求吗?如何体现设计价值呢?直白一点:你们设计一年都没产出啊!!!我开始反思:如果平时做的业务需求不能体现设计价值,那么什么体现我的价值呢?设计价值到底用什么来衡量?


分享目录

1、如何理解设计价值

2、设计师价值分层 

3、设计价值案例体现

4、设计价值具体表现方向

一、如何理解设计价值

很多招聘上都写着会插画会动效的加分,很多职场人没面试或没应聘上理解是不会某个技能,因此抱怨设计要学的太多了...但是注意「加分」这个词的前提是满足必要条件之后才去考虑的,如果公司有大量的剪辑和插画需求,自然会招插画师和剪辑师(我上家公司有专门的插画师和视频剪辑人员),所以不妨反省自己是否满足必要条件。

前几年大家或许可以凭借这些差异化优势拿到不错的薪水,但是寒冬之下公司更多的思考着如何活下去,更看中设计能给产品发展带来什么价值



商业设计本质上服务于业务,公司需要用户参与盈利,所以每个季度或每个月分发每个部门业务目标,项目团队根据当前部门任务制定相应的项目目标,然后再一层层分发到设计,总结他们的关系如下:



因此判断设计价值的关键是:是否真正地帮助业务解决问题,助力业务目标达成。换言之,设计价值就是设计师通过设计思维/策略/方法,帮助业务创造的那部分价值。

  • 实现了哪些业务目标
  • 解决了哪些业务问题
  • 创造了哪些业务价值

根据设计价值,市场上衍生出各种设计师头衔,被划分为更靠近产品的UXD(User Experience Design)、以及在UXD基础上提升出与业务更密切的UGD(User Growth Design),最后就是更偏纯视觉的VD(Visual design)。



相信大家和我一样,在公司对设计师的要求再也不是单纯界面输出了,虽然职称头衔没变,但是公司对我们的要求越来越高了,那说明你正在向体验型设计师或用户增长型设计师发展。今天看了我的文章,打开格局,未来的路也会越走越宽

二、设计师价值分层

设计师的价值可以分为五层:

基础价值(设计协同):重要且紧急,设计师立身之本

二级机制(优化负向):自驱解决负向问题,量化优化结果

三级价值(增长爆破):洞察增长爆破点,自驱推动增长

四级价值(L型赋能):垂直击穿,经验沉淀,实现L型赋能

五级价值(业务领军):人人都是业务方,拓展设计师在行业和生态影响力

今天主要聊聊前三种,我相信很多人最初选设计师这个职业认为设计不用对接太多人,做好自己的事情就OK,紧接着慢慢的在无止尽的改稿消耗了激情,开始喊出设计没前途想转行不好找工作等等,但是正真玩明白设计的人往往笑而不语

第 1 层:基础价值

不知其然,表象复刻。设计协同最基本要求就是在拿到需求后高效又完美地实现落地。也就是我们刚刚入行时日常工作中所做的事情:产品给到原型、设计开始执行、接着进入研发、再接着走查等等,甚至很多人都没玩明白设计系统有哪些,各个设备的的规范区别...
做好这个阶段是设计师基本素养,需要良好的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。



第 2 层:负向优化

我之前在小红书分享了很多关于设计优化内容,优化前VS优化后。以用户体验为核心,不同场景不同设计。相较于基础价值而言,负向优化开始逐渐融入业务当中,慢慢了解整个业务流程,很多小伙伴往往提出优化方案后被认定为优先级不高,就是没有针对当前业务主要功能提出优化



第 3 层:增长爆破

这个阶段在设计师晋升中非常关键,领导非常看重设计是否主导项目优化,我目前公司晋升标准是设计师除业务需求外,一年至少需要2次设计主导项目推动。这个过程比做业务需求复杂的多,因为当你没有足够资源协助优化时,需要设计自己前期调研、设计问卷、找数据、写产品文档、画原型图、标注交互规则...整个过程由你主导。

当然这个阶段的设计师会比上一个阶段更能体现设计价值,并对产品产生一定的影响力。我们要把格局打开不要局限于设计本身,不是说忽略设计,是基于日常设计界面去考虑设计的意义,给产品和业务带来的影响。能在以用户为中心的基础上,寻找机会点,推动业务的增长,所以这个阶段的设计也被称为UGD(User GrowthDesign)


这时候对设计的要求更高,比如需要具备用户洞察力,数据分析能力等,从这些维度出发,去熟悉业务、分析业务,寻找设计机会点,制定设计策略,从而推动业务。这个阶段的设计师,也是市场最需要并且很稀缺的。



三、设计价值案例体现

通过一个案例我们一起讨论设计价值体现,首先看一下业务目标,设计目标是由它推导而来,这个推导的过程并不是直观可见的,需要我们进行用户调研、问卷调查、数据分析等等一系列方式去推导,最后总结归纳出可行设计目标。推导过程是整个设计过程中最重要的环节,为了让大家理解,我在网上查了很多案例

1、业务目标

一般业务目标是决策人开会共同决定的,它只是某个阶段大的方向,基本可以套进下面这个公式



以我目前工作正在执行的项目为例,可以组合其中一部分作为业务目标,例如:
Q4:通过提升中介版位的曝光率引导中介入驻(上传社区资料),来增加社区内容的丰富度

阿里《五导家设计法》中对业务目标和设计目标的定义是:

1、业务目标:用[某策略]给目标用户带来[某价值],以实现[某变现方式]

2、设计目标:用[某设计策略]给目标用户带来[某价值],以助力[某变现方式]

这个刚开始理解会比较困难,因为很多项目其实只有一个总体的目标并不会细化到这样的颗粒度。于是我去网上查了一些设计师的分析部分内容,整理组织一下发现大致的信息是这样的:



由业务方提出一个需求,这个需求背后往往伴随着一个业务指标,设计师则需要将定量指标拆解为有设计执行指向的目标。上图中简化XX功能的操作路径,就需要拉出整个操作过程中的数据,观察同级功能及子级功能有什么影响,用户是在哪一步流失的,有什么优化途径...,可以看出短短几个字背后的工作远远比想象的多



2、洞悉产品的业务场景

这次设计改版也是伴随着业务的发展而来的,为了做出贴近业务目标的设计,项目前期对产品的定位及业务底层逻辑做了深刻的理解,思考我们为什么要做这个产品?用户通过我们产品得到什么?为了方便理解,我从项目背景开始说起
项目背景:随着平台买卖租赁业务迅猛发展,用户对于房屋周边关注度越来越高,单个房屋详情无法满足用户对整个房屋周边的了解,所以推出社区找房平台。产品主要定位是提供小区内真实有效的房屋信息,帮助用户省时省力的筛选出优质房源
问题:由于第三方合作平台房屋资料更新不及时,导致C端用户(买卖租赁)去线下看房时发现已卖已租,渐渐地对平台产生不信任,最后很大可能弃用。
解决:为了改善这一现状,平台引入「社区专家」这一概念,并通过提升中介版位的曝光引导中介入驻,入驻则需上传该小区户型图/平面图/内景图等 。也就是说中介入驻后被称为社区专家,在APP端曝光量增加,吸引C端用户点击互动,从而提升房屋成交量的可能性(也就是业绩)

这样一来,我们就明确了现阶段为什么要做这件事:中介通过上传房屋信息获得一定的曝光量;而买卖租赁用户通过房屋信息省力省心找到符合自己预期的房源。



3、洞察目标用户特征

产品最终服务于用户,不同产品面对的不同人群的需求是不一样的,所以前期深入了解了用户,明白用户诉求,这样能更好的聚焦设计策略,将产品的核心价值及服务价值传递给用户,从而提升用户使用体验
接着对此次需求目标用户(中介)进行了调研分析,当前我们的中介用户特征具体表现为:年龄在45岁以下的用户人群占73%左右,整体年龄不大,对互联网接受度较高,工作业绩直接与房屋成交金额挂钩



4、梳理用户入驻流程

社区专家入驻流程简单的看就是上传社区信息图片,然而其实是一个系统化决策的过程,整条关键路径从了解入驻优势(信息获取)到怎么上传(上传图片)再到上传成功(入驻成功)经历了几个关键节点,开始呈现一个漏斗状的情形,转化率越来越低。
因此在产品设计之前,我们对用户决策的关键路径进行了相应的梳理:主要为入驻前、入驻中、入驻后几个阶段,同时围绕着每个环节去强化用户内心感知,挖掘设计上的机会点
在这几个阶段我们主要解决的问题可以归纳以下几点
1、入驻前:如何让中介快速找到入驻入口,明确入驻优势
2、入驻中:如何让用户入驻更顺畅
3、入驻后:如何提升用户入驻后效果感知,为再次入驻做推动



5、设计目标推导

到此产品整体的设计思路已经很明确了,如果前期我们没有对业务进行宏观层面的拆解和分析,设计后期可能找不准设计的发力点,从而导致设计没有贴合实际业务场景
围绕着这些背景,经过多次沟通最终设计和产品同学达成了一致,本次主要设计目标为
1、提升用户信息阅读效率
2、提升用户入驻决策效率
3、提升用户入驻后效果感知



6、设计方案落地

在明确了设计目标之后,最后一部分是设计落地了,正确的设计始终围绕着产品策略来执行的,并通过深耕的设计解决方案来为用户打造优质的服务体验,那么我们将从以下几个维度来进行视觉方案的设计

6.1、提升用户信息阅读效率

(1)以传达信息内容为主
说到权益设计师视觉常常会体现荣誉感,就会联想到黑金权益对比,但是不管是什么样的视觉表现,最终的结果都是以清晰传达信息内容为主,让用户看的明白这个是干什么的,对他有什么好处
如果用户看不明白,即使信息有效触达,最终会以为是广告不明所以的关闭



当然这中间也不仅仅是设计的问题,产品给的交互原型稿就有问题,整个图就没让人明白这个是基础权益和置顶权益的对比。设计拿到原型搞后要提前沟通,在交互原型不确定的情况下不要开始设计,这个在《设计如何提升工作中话语权》有提到过,等交互评审多方达成一致后开始着手设计,这样才会事半功倍



(2)利益点的展示
关于用户入驻的利益点运营角度肯定是展示越多越好,但是产品为了减少用户跳出率,期望查看任务是在当前页面用弹框承载。由于弹框承载信息有限,我们尽量想在电脑一屏内展示完当前任务及主要利益点,所以在用户能看明白的前提下不能无限增加利益点



(3)挽留弹框优化
无论什么类型的弹框,必须要做到文案简洁。不要让用户看半天还没明白你要说的是什么,然后才没办法也无所谓的点了确定或取消,当然大部分这种情况,他们都会点击取消,或者右上角的关闭键。
而一般弹框按钮,右边是主操作按钮,也就是引导用户操作下一步的按钮,这次优化前按钮文案不好理解,确定操作与用户本身理解有歧义,易造成误操作



6.2、提升用户入驻决策效率

(1)统一入驻后的视觉效果
中介入驻前后状态分为:入驻前、入驻中(审核中、未通过、已通过)、入驻后(免费续期)。其中入驻中未通过使用警示色红色,为了强化中介入驻后的视觉效果也采用了红色,这与入驻成功的绿色不符。
在视觉上用色混淆,那么后续红色是表示警示的同时还可表示强调?那么下图中「1筆成交」用红色是成功了还是未成功?为了避免这个问题,入驻后视觉效果统一为绿色,在后续色彩感知上更清晰明确,无论是设计师还是用户都不会混淆



(2)优化入驻路径

主要按照流程最短,操作最少方向去优化,1.0版本完成整套任务流程:免费入驻 → 入驻成功 → 做任务 → 免费置顶。当1.0第一版设计稿灰度上线后,产品预期是与中介达成共赢的结果,但是灰度数据结果显示中介用户入驻率低
在优化前我建立了一个用户调研群收集用户反馈,与部分用户电话1V1,发现有很大潜力去提升。比如与用户沟通时,用户说不知道入驻成功后还需要做任务;做完一个任务置顶后怎么还需要做任务;再做任务有什么作用等等
①免费入驻 → 入驻成功过程产生疑问,即入驻成功有权益还是做任务有权益?有什么不同?
②置顶一词有歧义,他们理解置顶是整个流程完成,而产品放理解置顶是前端页面的置顶



(3)任务弹框关闭方式
通常来说为了方便用户关闭弹框,点击蒙层或点击关闭都可任务。入驻任务弹框是中介进入后强制弹出,1.0版本用户点击蒙层也可关闭,在2.0版本时候新增上传社区格局图,需要填写筛选格局信息,关闭筛选框最常见方式点击筛选框其它区域,由于任务本来是弹框展示区域有限,点击蒙层是大多数人选择,这时候可能上传一半就打断了,体验非常不好。
处理方式:增加关闭按钮点击区域,弹框只能点关闭按钮关闭,点击蒙层不能关闭



6.3. APP优化专家入口

买卖租赁用户与中介的互动率在一定程度上影响着中介留存以及再次入驻意向,入驻后中介用户在APP展示上至关重要。
由于品牌色是饱和度比较高的橙色,所以前期整个页面的可点击区域基本以品牌色为主,每次强调都是在原视觉上更强。当专家版位的视觉强调用橙色,视觉上可能无法凸显;
用其辅助色蓝色时,存在2个问题,①蓝色辅助色视觉感比较重(新建案品牌色不能随意修改),作为按钮时更像是一个主按钮;②后续设计可能与其他业务线用色混淆,用户也可能分不清2个业务之间的关系

设计侧如何解决呢?

面对这样的僵局再做优化,就一定需要转换思路了。跳出纯页面设计的层面去看转化,我们到底设计什么?此时需要重新梳理模块内容,明确产品诉求是想突出什么,结合产品诉求重新梳理内容优先级,以视觉维度重新输出设计优化。



7、数据反馈

这一个阶段就是证明之前所说内容是对的,证明你的设计正确性与有效性,并对后续的优化做准备

从入驻前中后期及APP展示在10月18号优化上线后,中介入驻成功率明显上升,从而影响着社区入驻率也明显上升,APP端互动按钮点击率也极大提升。整体来说这次改版非常成功,后续在响应式详情页上也会做相应的专家版位优化,社区专家曝光率最大化,同时也提升C端用户找房效率


上面说了这么多,以上五步简单来说:

为了什么做 (问题在哪) → 要怎么做 (如何解决) → 如何才算做好了 (评估体系) → 做好了吗 (“定性、定量”在过程中的合作方式和态度) → 还需要优化吗 (验证复盘,再次出发)

四、设计价值具体表现方向

上面说了这么多其实想说明设计价值的本身不是局限的,它不仅仅是大多数人看到的可感知的界面,它还包含对外增值和对内成本两种类型:


对外增值是指价值的增加,用户、营收、知名度等,这些都是对外增值的部分,也就是我上面从设计维度改版产品;对内成本是指成本的控制,资源、效率、投产比等,这些都是对内成本的部分
而这两部分又可以被分为有形和无形



1、对外增值的有形价值

对外增值的有形价值,一般是指用户行为数据、业务盈利数据这些,是能被直观看见的。
如果一个决策是由你主导推进的,且因为这个决策引起了数据的上升,这个决策就是唯一变量,它能直接证明你的价值;


但是设计不是万能的,大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现,我们只需关注可以通过设计手段参与、干预和落实的部分即可,这个就是我上面内容项目复盘总结的内容
当然,直接证明并不一定比间接证明更有价值。更重要的是,你要情境合理、逻辑自洽。



通常我们需要关注的指标有新增(新用户数,日周月)、传播(传播周期)、活跃用户数(DAU、MAU)、留存率以及流失率,还有aarrr的海盗指标-获取、激活、留存、传播、收入,这里不展开讲了大家可以去搜索一下。这些数据在改版以及做新功能的时候我们经常会用到。

2、对外增值的无形价值

对外增值的无形价值是什么呢?比如公司周年庆,设计组会承担全部的舞美设计,但是这个结果没办法用数据来衡量的。但是整个过程是设计全程跟进支持,使得客户好评高于往年,甚至还在行业内有一定的传播和讨论,这些都是对外增值的无形价值。
也就是说除了直观的数据目标,我们还可以从定义抽象的目标,抽象的目标也可以衡量。

3、对内成本的有形价值

设计组件规范可以最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化,我们就使用了这样的公式:组件开发时间*使用次数-投入的时间成本,以此估算出组件库带来的工时缩减。当然组件库只是对内成本价值的一种,对内价值包含很多,比如设计原则提炼、设计语言统一等,这些在多个设计合作时事半功倍



大家常被到的问题:市面上开源的组件这么完善,设计师为什么花费那么多时间重新做组件?其实它存在2个问题

3.1、业务属性不符
虽然网上存在很多第三方组件比如Ant Design、TDesign等等,研发使用这些确实提升效率,但由于设计语言不同(公司不同业务属性不同),市面上的组件不一定与自家产品属性贴合,需要我们结合产品愿景以及业务规划进行重新设计。



3.2、业务特性不贴合

我们见到的很多组件只是基础组件,可以保证基础设计一致性,但由于业务领域的独特性和多样性,在一些专业的场景中有着强烈的业务属性,需要我们对一些基础组件进行组合,进行更专业的沉淀,这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。



4、对内成本的无形价值

推动产研设流程优化,比如我之前写的《设计师如何提升话语权》就是我今年上半年发现了协作流程的不合理,反复沟通推动了流程的优化。这件事让整个团队有了更高效的合作,就属于对内成本的无形价值。
项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式,因为它在是实践中的反馈,这种直观的经验沉淀最终会融入自己解决问题的知识体系架构,而这将进一步反辅自己的职业成长。
复盘可以让我们站在第三方角度,重新对项目流程进行全面的回顾与总结。结合不同的反馈,客观的了解当前设计在整个业务目标中的价值,这是对我们设计量化最佳途径。




和大家再说远一点,工作可能常遇到的场景,设计优化推不动,无法进行下去。得到反馈是:优先级不高,后续有时间再优化...这个其实在大中小厂都有这个情况,属于设计价值的第二层体验优化,它优先级高不高,取决于这个问题是否足够致命。


比如说这个问题是核心功能,但根本不可用,这些就是致命问题;如果核心功能可用,只是没那么好用,也许对于你这个产品来说,就没有那么致命。所以与其想着怎样优化体验,不如看看是不是还有什么可以带来增长的方式,比如扩充下一类用户,或者更多的生态、品类等等

另外有个例子是关于一个朋友的,这个朋友工作很拼,在怀孕的时候周末都不休息,她当时负责2个业务中的一个很差。她调研了相关用户,把用户做画像分层,也找出了可以带来增长的方式,但是发给当时的合作方,他和他leader都是想混混日子的类型,就应付了一下,也没有往上汇报。在当时,级别差两级去沟通就很费劲了,这家公司在绩效期,也不强制要求给合作方评价,所以问题得不到解决,这些辛苦却换不来的成长
最后朋友就离开了,但她的性格闲不下来,而是找了一份挑战更大的工作。在之后的几份工作中,一路得到赏识和重用,充分发挥了能力。HR告诉她主管的评价是,没有做不好的事,就算不带设计团队,也可以转行带别的团队甚至创业。
他现在的公司,上下级也要互相打评价。所以身为主管,本身也要真的能力强,不然会被下属挑战,所以大家的话语权,就靠自己的能力和人品,简单明了,行就上,不行就下。团队的同学都说在她来了之后,他们有干劲多了。他们之前也很积极提方案,但总是被说优先级不高,其实是没有找准更值得做的项目。
所以建议是,首先看看是否是自己的问题,如果在和他人充分沟通后,明确问题确实不在自己身上,那你改变不了环境,就改变自己。或者你本身所在的公司挺好的只是部门不好,那就换个部门,找个级别相对弱化,专注于能力本身和项目本身的公司,成长会非常快。

作者:贝贤设计笔记

转载请注明:站酷

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


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


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


经验分享丨B端设计师价值体现那些事!

分享达人

提到B端设计你是否经常听到这样的声音:

  • B端不需要怎么设计,直接对着低保真出图就可以了;
  • 不要花时间在这些细枝末节上,参照Ant Design上的规范,在我的需求文档的基础上快速出图;
  • 不知道怎么跟需求团队沟通,感觉他们的设计思维太Low,聊不到一起;
  • 产品的图片设计好看才是设计师的价值,功能体验这些与设计师无关;
  • ……

刚转B端那段时间,我相信每一个设计师都曾有过这样的困惑。

设计师在实际工作的时候经常会遇到自己的设计方案与业务需求高度融合,由于B端的行业属性,缺乏完善的数据验证,常常到了最后也区分不了设计师真正的能力体现在何处,这就导致团队成员对设计师的价值认识不够全面。

那么我们B端设计的价值又该如何体现?今天本文将从4个方面进行阐述,一起来看一下吧~

01 设计价值是什么

B端设计师追求工作中如何体现价值的时候,我们得先明白B端的设计价值是什么。

那么何为B端的设计价值呢?

百度百科中设计价值的含义是:把一种计划、规划、设想通过视觉的形式传达出来的活动过程。今天本文中的B端设计价值分为视觉设计、交互体验以及业务流程优化,通过信息传达的改变,帮助客户降本增效的方式获取收益。

如果将B端整个生命流程进行剖析,我们会更好的理解其设计价值。

1.1 视觉设计吸引客户

B端产品与C端产品不同,它需要市场销售人员利用自身的能力以及资源向目标企业进行销售或者在一些大型展会上对外演示,据有关资料表明人所感知的信息的80%的信息来自视觉,这就需要对产品的功能进行视觉化展示。

因为竞争激烈,经常需要在众多竞争者中进行厮杀。在技术水平趋同的情况下,视觉起到了非常大的作用。特别是在展会期间,假如两家公司技术水平相当,演示的视觉完全碾压对手,让客户有着良好的品牌印象,这将产生快速的口碑影响,而这些将影响用户的最终决定。

1.2 交互体验留住客户

这一步需要我们理念进行升华,将视觉视角切换至体验视角。

企业是我们B端设计的重要客户,它是一个具有不同成员角色的群体组织。该组织为了工作管理的效率,会有不同的权限体系。权限的不同关注的信息也有所不同,这需要我们在设计中依据权限,考虑不同信息呈现优先级。

功能繁琐是很多同学对B端的第一印象。因其有着不同角色的参与,每个角色因为岗位职责的不同,所参与公司的业务流程存在差异,这意味着需要将不同的功能在遵循产品体验一致性的基础上汇聚在一起。

1.3 业务价值赋能客户

业务价值对于B端设计特别重要,这是企业决定购买B端产品的出发点。我们在说业务设计的时候,需围绕企业“降本增效”理念,让用户觉得有用,完成企业的管理需求。

举个例子,比如我们做了一款报销系统产品,帮助用户解决财务报销过程复杂、冗长的问题。通过前期参与用户调研,洞察业务,挖掘需求的突破点,找到当前背景下最优的业务流程解决方案。企业员工使用我们的产品后少填写信息,更快速的拿到了报销费用,平均比传统流程节省了20分钟。假设企业员工平均时薪60元,那么这个100人的企业每周可以节省1.6万的人力支出,而一年可以节省76.8万左右的支出。

02 如何体现设计价值

在了解了设计价值的体现后,我们知道B端设计的落脚点在业务价值的赋能上。当我们实实在在的解决了业务问题,而不是产品外层视觉与交互的表层需求,才能让我们的设计价值最大化,让设计得到团队其他成员的认可。接下来结合工作经验阐述下设计师可以赋能业务的点。

2.1 主动养成系统思维

很多B端设计师都是被动的接到产品经理的低保真,然后根据低保真的需求直接输出设计稿,妥妥的沦为一个画图的美工,这会使得自己在团队内部被定义为一个工具人。

那我们的发力点该是什么?借用Jesse James Garrett的理论用户体验五要素这个专业名称(表现层、框架层、结构层、范围层、战略层)。单纯的视觉设计虽然容易感知,但它却属于五要素的最顶层,价值有限,无法准确传达最底层战略层的含义,我们需要往下突破才能凸显我们的价值。

当我们在收到需求的时候,需要具备系统化思维,从底层战略开始,首先了解业务需求背后的价值,同产品经理对其业务目标后,帮助他梳理业务需求,结合用户目标以及当前的技术能力等多方因素系统性思考最优的设计解决方案。

只有发挥了我们的主观能动性,改变单点视角,具备系统化思考的能力,才能更好出结果,体现我们的价值。

2.2 更专业的组件规范

功能复杂繁琐的B端为了最大化的保证设计的一致性、提升开发的效率以及方便产品的迭代优化,组件规范是我们产品必不可少的工具。

那目前市面上的组件规范这么完善,对于我们设计师而言自身的价值是否无法体现了呢?其实它存在2个问题:

1、业务属性不符。虽然市面上存在众多的第三方组件,但由于设计的出发点不同(公司不同影响的业务属性不同),导致市面上的组件不一定与自家产品属性贴合,需要我们结合产品愿景以及业务规划进行重新设计;

2、业务特性不贴合。我们见到的很多组件只能归于基础组件,可以保证基础的设计一致性,但由于业务领域的独特性,在一些专业的场景中有着强烈的业务属性,需要我们对一些基础组件进行组合,进行更专业的沉淀,这样在实际使用的时候会更加高效。例如高级筛选、不同的场景弹框等。

2.3 赋能业务提升价值

不管B端还是C端的设计目的都是为了解决业务问题(业务目标的达成也是KPI考核的重要目标),我们始终要以业务目标作为我们的关键目标。

我们设计师需要参与整个行业生态的搭建,做到体验结构展示清晰,核心信息简洁明了,降低用户的操作门槛,通过提高体验效率(缩减时间成本),节省企业的人力成本。

对业务需求的赋能其实就是要求我们进行需求的挖掘,发现更多的业务增长点,提供当前背景下最优的解决方案。需要例如我们可以主动的进行XX调研活动,给出XX解决方案,最后给公司带来了XX业务价值。

2.4 复盘沉淀经验

项目复盘对于我们设计师的能力成长的作用是巨大的。它之所是最快的学习方式,因为它在是实践中的反馈,这种直观的经验沉淀最终会融入自己解决问题的知识体系架构,而这将进一步反辅自己的职业成长。

复盘可以让我们站在第三方角度,重新对项目流程进行全面的回顾与总结。结合不同的反馈,客观的了解当前设计在整个业务目标中的价值,这是对我们设计量化最佳途径。不单单对于个人,团队内部的其他成员也可以通过复盘加深对设计信任感的建立,他们可以看到我们的设计思路,更深层次的了解我们的设计价值。

03 写在最后

设计价值的体现建立在一朝一夕的积累上,如果想在B端设计中体现价值,一定要透过现象看本质,站在业务的角度,寻找真正的发力点,让自己参与业务赋能的同时共同成长。

作者:江鸟的设计生活

转载请注明:站酷

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


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


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

【干货】设计师的发力点

纯纯

其实说到设计的价值,它是非常大的,可以从很多不同的维度去出发,每一个小点都可以作为闪亮的发光点去助力产品获得价值,并且现在互联网时代,多元化思维越发重要,我们不仅需要在本职范围内去发光,还需要拓展更多的能力。


但是我也发现目前普遍存在一个很严重的问题,有很多小伙伴设计一个红包也能扯出一堆增长模型,这也是因为随着全链路、全栈设计的噱头出现,以及一系列的模板化思维体系所影响。


设计思维本没有对错,但是需要合理的运用,并且将设计点需要落在实际的内容上,像我们常见的用户画像、体验地图、情绪版等等,那么我们应该如何有效的将设计点落实在内容上呢?



  • 视觉层


众所周知,在整个产品设计中,视觉感受是最直观的,也是我们作为一名UI设计师能直接去影响的,而视觉层面的内容基本可以划分为六个点,也就是我们常常所说的 - 形色字构质动


在很多的设计运用场景中,这六点都是作为比较基础的内容,像一些视觉语言制定上,而产品设计的过程中,纵使有再多的方法论和思维体现,最终都需要通过视觉的表现,所以我打算利用这几点去深入挖掘,也许可以找到更多的设计发力点。



  • 图形


形也就是设计中最基础的图形元素,在平面和品牌设计中经常可以见到,像一些点线面、图形构成等等,而回到产品设计中呢,最典型的形就是我们经常见到的图标,那除此之外,形还有哪些体现方式呢?


1.1 插画

图形的设计表现中,我第一个联想到的就是插画,但是插画的类型和使用方式也分为很多种。


1.1.1 功能插画

首先我们先设想一个场景,当我们接触到一个新鲜的事物时,我们首先需要快速的了解他,我们可以通过产品说明书、产品结构图,场景使用模拟等不同的方式来表现。


因此在一些服务页面或新功能介绍中,都会适当的融入功能插画,而这种表现形式可以使得界面展示更直观,快速的让用户理解所描绘的功能含义,减少用户学习成本。


1.1.2 场景插画

像一些页面中还可以利用场景插画去表现,不仅可以打造内容的差异性,还可以快速让用户融入到场景中,进一步提升用户的情感体验。


1.2 品牌强化

品牌设计的目的就是为了利用图形化的元素,去加强用户的记忆,而随着产品发展成熟,为了可以非常有效的去强化品牌,形成产品间的差异性,设计在表现层可以利用不同的形式去强化品牌。


1.2.1 风格延展

设计表现上可以赋予产品非常明确的设计风格,例如抖音的故障风格,在图标、插画、活动页面都有很好的延展,这也赋予了很深的产品印象,甚至有很大一部分用户看到故障风格就会联想到抖音。


1.2.2 品牌应用

除此之外也可以利用品牌元素进行一定的延展设计,像Logo图形可以用到很多的图标和默认图上,或者也可以使用品牌形象,在一些界面的提示信息、内容引导、以及一些插画绘制上,都可以进行有效的融入,进一步达到品牌延展的功能。


1.3 元素渗透

那么说到延展,其实我们也可以针对一种元素进行适当的延展,将所需要体现的内容进行强渗透,从而进一步打造内容的专属调性,以及强化用户的心智。


下面的案例来自携程精选榜单,而在整个入口、详情页,均采用钻石元素贯穿到整个页面当中,不仅可以使得画面更加具有视觉冲击力,也可以使得钻石品质的氛围在页面中多次露出,进而加深页面品质感。


1.4 数据可视化

图形的表现还有一个非常重要的内容体现,那就是数据图表。在一些工具型或B端产品中,都会有着大量数据,而为了让产品使用更高效,我们可以利用这种形式来展示。


但每一个结构不同的图表,所侧重的功能都是不一样的,有的偏向于于数据对比,有的偏向于连续变化数据,有的偏向于占比情况等等,因此在使用的过程中需要区分内容的侧重以及用户对数据使用的倾向。



  • 色彩


在现实中,颜色赋予了这个世界缤纷多彩,它是我们肉眼最直观的感受。在设计中,颜色是尤为关键的一部分,它赋予了内容不同的表现形式。


颜色的学问也比较广泛,除了我们常说的色彩关系、颜色搭配等等一系列之外,色彩上到心理学、下到用户体验,涉及的范围十分全面,那接下来我们就来感受一下色彩的美妙吧~


2.1 色彩体验

生活中有着不同的颜色,例如黄昏与清晨、深夜与极光,都有着不同的色彩倾向。除此之外,色彩心理学中介绍,不同的颜色给予用户不同的心理感受。


2.1.1 色彩心理学

例如我们常常所说的金色表示尊贵,这就好比现实生活中的金银铜牌,他们利用不同的颜色去体现内容的品质,我们恰好可以利用这种颜色运用到会员、勋章等内容中,去凸显会员的尊享感、情感化,进一步强化用户的身份感知。


2.1.2 暗黑模式

颜色的感受也可以利用到全局的设计配色上,我相信大家肯定都非常熟悉前段时间非常火爆的暗黑模式,这就是利用不同的颜色来打造特殊的模式,而暗黑模式可以使得用户在黑夜也能舒适的使用产品,并且一定程度上节约手机的电耗。


但不是所有的深色系产品都是暗黑模式,我们也可以利用这种颜色搭配打造不同的产品氛围与特色。例如抖音、MOO音乐等等。


2.1.3 无障碍设计

并且随着互联网的发展,用户群体逐渐庞大,其中也有部分身体有局限的用户,对于他们来说更加迫切通过互联网获取信息,因此越来越多大公司注重到这一方向,而这也是我们作为一名设计师,更应该去优化的方向。


可以采用无障碍色系,以及颜色的色差处理,针对性的服务于色盲和色弱群体,使得他们可以在信息阅读上更符合他们的习惯,从而进一步打造更人性化的产品体验。


2.2 沉浸式体验

色彩搭配讲究颜色统一、协调,在一些界面中,我们可以利用这种色彩技巧去营造氛围,可以有效的提高界面沉浸感,但是产品中由于内容的差异无法固定颜色,而这也会导致颜色统一性较难处理,因此可以利用代码的能力判断封面色彩倾向,从而进行填色,例如豆瓣app。


不仅如此,我们也会市场看到头部背景图和banner图的色彩也会统一处理,这是单独配置了一张背景图,从而达到页面头部的协调性。



  • 字体


字体在设计中占有很重要的一部分,在UI设计中也是最为关键的信息传递载体之一,而关于字体的内容也是十分广泛的,下面我将从字体排版、字体设计和字体内容三个方向来分享我的心得。


3.1 字体排版

字体排版中的字体行高、间距、段落等等,这些都是一名设计师必须去掌握的基础,但是有一些看似简单的规则,却常常会被忽略。


3.1.1 避首位法则

例如下面案例中的结尾标点符号在首,这个是避首位法则中最关键的内容,那为了解决这种方式,我们可以利用「推出式避头尾」,这也是目前主流的方式之一,利用这种换行的形式避免问题,但是往往会形成句尾参差不齐。


因此我们可以利用「优先推入式」标点挤压的方式,将标点符号进行空间挤压,这样可以在很大程度上确保文字在合适的版心内整齐一致。


3.1.2 空格处理

空格是我们平时接触最多的一种字符了,常使用与内容分割中,但是在排版中有很多场景也会用到空格。


例如英文排版中的点号后面需要加空格,不然会导致语句之间过于拥挤,而中英文结合的时候,之间也是需要空格进行分割处理,除此之外中文和数字之间也是如此。


3.2 字体类型

字体的类型分为很多种,而常规的界面信息展示中,一般都采用无衬线字体,但个别产品利用特殊字体去传递产品的气质,例如阅读产品中采用衬线字体。

除此之外, 大厂也纷纷设计属于自己的专属字体,通过这样的方式去强化自身的品牌感。


一年前的MIUI11版本更新,最重磅的内容即是推出动态字体,用户可以自由选择字体粗细,同时为了让界面的美观度及文本识别性不会被破坏掉。


3.3 字体内容

既然聊到字体,那我们顺便再来谈谈近期比较火的微文案,虽说内容听起来侧重于文案策划,但是其目的是为了优化用户体验,甚至提高转化率等等,那么作为一名设计师,我们更应该去关注这样的内容。


3.3.1 情感文案

而微文案的体现也分为两个部分,例如下图中所展示的情感文案,百度网盘的会员到期提示,拟用“藏头诗”的形式,渴望留住用户。


3.3.2 微文案

除了上面所描述情感文案外,我们还可以利用文案内容来影响用户行为,往往是这种越细节的地方越是存在着成就或破坏用户体验和转化率的因素,而这些文案一般出现于,提示文案,引导文案,弹窗文案等等,不仅可以解决用户的疑惑,还能进一步引导操作。



  • 结构


说到结构,我们一般都会联想到用户体验五要素中的结构层,他在产品设计中更多体现于信息布局和内容结构布局,而对于我们设计师来说,更多的感觉就好像画面中的布局与排版。


结构的内容相对来说还是比较广泛的,我主要是围绕界面布局来进行分析,讲一些我觉得还不错的优秀案例,希望从这几个角度出发,可以带给大家一些启发。


4.1 场景化体验设计

场景化设计是体验设计中较好的发力点,也是我最近一直在研究的方向,后续有空我会单独写一篇文章再进行深入分析。总的来说呢,场景化设计分为多个侧重点,今天分享的内容主要围绕着用户分层,为不同的用户设计。


4.1.1 用户需求

像我们常见的一些首页布局中,其实有也简单的分层,我们可以根据用户不同的目的来进行布局拆分。


下面的案例从上到下依次为,目的明确的搜索用户、分类明确的用户以及只想随便看看的用户,这样的话,可以有效的服务与不同用户的目的,也可以快速实现流量分发的作用。


4.1.2 用户行为

而这两个界面都属于功能服务类界面,用户去完成某件事的行为也可能会存在差异,所以我们也可以对于功能进行合适的分层布局。


下面的案例从上倒下依次为,想快速申请贷款或者快速完成任务获取现金的用户,我们提供了直接操作区域,并且置于头部进行业务属性强化,中间融入了更多的分类与内容引导,进一步激发用户的兴趣,最后可以再通过不同的形式适当的减少用户顾虑,例如优惠券的福利(强化申请贷款),为新用户提供发帖示例(确保社区的内容品质)


虽然两个界面的内容差异较大,但是结构拆分的方式以及目的都是大同小异的,主要还是为了满足不同行为的用户,进一步辅助他们完成功能服务。


4.1.3 用户身份

而关于用户分层的场景设计中,我们还可以区分用户不同的状态/身份来对界面进行差异化布局,下面的案例来自于百度网盘会员界面。


我们都了解会员他分为很多不同的阶段,而不同阶段的用户,对于内容的关注上也存在很大的差异的,我们可以从这个角度出发,区分用户的会员状态,进一步来进行差异化设计。从而有效的提高不同阶段用户的行为决策。


4.2 拓展卡片

论最出色的界面布局结构,那滴滴的 xpanel 必定让人印象深刻,它是一个将卡片附着于第一信息架构层级上,内容上分为“消息卡片”“主体卡片”“拓展卡片”三个维度,通过这种方式将一屏内抢占的空间通过简易的交互模式补偿回来了,这样既不打破用户的核心体验,同时又增强了运营、功能的玩法与拓展。


所以我们会发现在大部分的打车、导航产品中,均会采用这样的结构布局,这也是对特定场景垂直领域的深耕和挖掘,寻找“接触点”,帮助获取更多的功能、内容、服务,实现业务的“有效增长”。


而对于一个设计点,在历经了一段时间的发展后,也演变出了一系列的其他内容,我从这个点深入出发,围绕着内容和布局进行延展。


4.3 内容 · 信息流

众所周知,产品和运营都希望我们能在有限的空间中去展示更多的信息,并且有效的给其他功能进行导流,因此我们可以根据长尾效应,在无限长的信息流当中,利用不同的卡片布局,给予不同的活动、功能进行导流。


4.4 布局 · 半模态卡片

上面所说到的xpanel,是将卡片附着与信息之上,跟着这个思路发展,我们便产生了下图所示中的半模态卡片布局,虽然追波之前出现一大批叠上叠上叠中叠的布局,但通过线上的实际使用最终发现,叠一层才是比较合理的方式,而这种布局有着良好的空间收纳能力与信息拓展能力。



  • 质感


质感是设计师在表现的时候最直观的体现,也可以称为设计风格,但风格近几年间也发生了很大的变化,从起初的拟物到扁平,而最近也有很多不同“流派”的质感表现,下面我将举例给大家欣赏一番。


5.1 新拟态风格

前段时间流行了一段时间的新拟态,一度被扣上有望成为未来趋势主流的设计风格,但由于质感表现上细节过多,影响信息内容,并且局限性太大,因此并没有被广泛流传,但是在视觉设计上,是一个不错的设计表现。


5.2 磨砂玻璃风格

磨砂玻璃的质感表现其实很早很早在iOS的界面设计中就已经存在,但当时并没有广泛普及,而最近这种风格又以一种全新的姿态回到我们的视线中,他给我们最直观的感受就是虚虚实实。


在用户界面中,这种虚实的变化可以有效的创建视觉层次结构,增加自然精心的细节,并且在多复杂内容中能让用户全面感知与处理信息,有效传达信息,让信息可阅读、易阅读。


5.3 微色彩渐变

随着大屏手机的兴起,单屏显示高度也明显增高,而大部分页面内容并不能占据一屏空间,因此利用设计手法去强化页面头部,除了元素装饰外,就是这种淡淡的色彩渐变效果,起初只运用于少部分页面中,但慢慢的这种效果开始流行起来,越发广泛。



  • 动效


动效设计,顾名思义就是动起来的效果,这种表现形式使得静态的页面可以更加灵活的动起来,不仅可以使得操作体验更加顺畅,也可以在某种程度上吸引、引导用户。


6.1 动效转场

在动效的编排中,转场是非常关键的一部分,我之前也专门写过一篇《交互动效-转场的那些事儿》,感兴趣的朋友可以再碰个场,支持下。


6.1.1 入场元素

用户操作进入新页面后,通常会比较关注入场元素,像一些金融产品、数据图表,都会采用短暂的动态效果,强化元素的展示效果,进一步吸引用户关注数据与内容。


6.1.2 持续元素

在很多优秀的设计网站上,我们可以发现大多数交互动效都是对持续元素进行特殊处理,他们不仅可以让动效更加特别,还可以提高产品的流畅度。


例如下面的案例,前后页面的内容关系比较大,因此操作后可以采用持续效果,进一步引导用户的视线,提高视觉体验,强化交互流畅感。


6.1.3 停留元素

在整个动效编排中,除了关注入场和持续元素之外,停留元素也是非常值得关注且可以深入打磨的内容。


例如下面的案例,在整个搜索体验的链路中,我们可以发现搜索框提示文字、输入的单词等等均在进行了停留处理,确保在页面切换时,减少用户的视觉跳转,可以有效提供用户的专注度,打造更加轻松的体验。


6.2 信息折叠

产品设计中都希望在足够的空间内可以展示更多的信息,但这样往往会带来信息过载的问题,因此我们需要在设计的过程中对信息展示进行区分,利用行动触发结合动效的形式,辅助信息布局更合理。


6.2.1 同类信息

下图的案例来自vivo全新的原子随身听,利用现实生活中音乐播放器的样式,将同类app进行收纳,完美的体现了,在较小的空间布局下如何展示更多的内容。


6.2.1  容器折叠

与此同时也会发现很多产品中利用容器来承载信息,典型的案例就是FAB按钮,用户操作后再利用动效的形式进行反馈,其实和上面的相差不大,只不过他属于不同信息共用同一区域。


6.2.3 触发展示

网页端有一个不同于移动端的交互,那就是hover,因此我们可以利用这种交互方式,去处理信息的重要层级,然后根据用户的操作再进行详细露出,很大程度上优化了信息空间展示。


6.3 交互流程

随着产品体量越来越大,功能繁多的同时,页面结构也变得十分复杂,为了确保用户体验过程中,更清楚页面层级,以及操作后的流程,所以我们可以通过动效合理安排交互流程,助力用户的舒适体验。

我之前也专门写过一篇《交互流程中的三大重点》,感兴趣的朋友可以再碰个场,支持下。


6.3.1 操作预知

利用动效的形式,提升用户在交互流程中的操作预知,例如下图的分类图表,充分的体现内容的含义,进一步强化用户操作前的预知性。


6.3.2 交互反馈

在一些结构复杂的页面中,我们可以通过合理安排交互动效,转场方式、状态反馈等等一系列的设计,有效的对界面层级路径梳理。


  • 总结


其实设计师的发力点不单单只是我们平时看到的产品分析、用户画像、体验地图,其实从设计的角度出发,也有很多价值点,我们作为一名设计师,更应该根据产品现状去制定明确的设计目标,深入挖掘,利用有效的设计价值观,正确的驱动设计前行,最终通过设计去提高产品体验。

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

作者:三石设计   来源:站酷

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

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



中后台加载-被忽略的体验细节

分享达人

先看目录,大家按需取用,当然更建议全文阅读(全文7756字,建议阅读20分钟)

undefined


undefined

大部分设计师应该都遇到过这种场景:在做设计前并没有考虑到加载,但在进行还原度走查或者验收的时候才发现,由于某些页面数据请求较慢,导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。

归根结底是因为设计师在设计过程中,更多关注页面本身,而很少去思考页面在呈现过程中何时会出现白屏状态,都是后知后觉去补充完善。加载作为必备的一环,却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划,导致系统的加载体验缺失或者不统一。

因此希望这篇文章能够讲清楚中后台加载出现的场景和规则,对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。


undefined

加载通俗来讲就是用户从触发页面操作,到页面最终呈现的一个等待过程。这个过程始终存在不可避免,只是时间有快有慢。快的加载只需要几百毫秒就结束,但慢的加载就可能会达到几秒甚至十几秒,让人产生焦虑。

而为什么会有如此大的差距,这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址,再到我们看到完整页面的这个过程,网页到底经过了哪些步骤呢。经过资料查询和与前端确认,整体过程可以阐述如下:

从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段:用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。

而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型:静态资源和动态资源。


静态资源:前端的固定页面,这里面包含HTML、CSS、JS、图片等等,不需要查数据库也不需要程序处理,直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快,比如我们看到的展示型官网一般都是前端写好的静态资源。


动态资源:而对于页面上的动态变化的,需要程序处理或者从数据库中读数据,能根据不同的条件在页面显示不同的数据,比如表格数据、统计数据等称为动态资源,这种都需要调用后台接口来进行返回,因此加载速度相比于静态资源就会更慢。

而它们的区分点用下图可以表示:

可以看到静态资源基本是直接返回,而动态资源还需要连接数据库调取资源,尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题,也基本上更多出现在动态资源的获取上。


undefined

当我们清楚加载形成的原因,接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式:「默认处理」和「使用进度指示器」


2.1程序默认处理方式:直接显示

当我们对加载过程不进行任何处理时,程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式:

但是这种做法就会导致我们在页面加载过程中会出现空屏状态,比如上图切换到概览时出现了空屏状态,尤其是当遇到了网络缓慢的情况,会造成在加载时页面停留在当前状态下不动,往往会让用户陷入到「系统故障」的错觉。


2.2通用处理方式:进度指示器

这个名词说起来可能比较陌生,它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障,而是正在读取数据。

通过添加进度指示器来对空屏状态进行承载,能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡

但是在体验过程中很容易发现一个问题,就是在产品的整体加载过程中,某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时,很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖:

想要更全面的把加载动画覆盖到所有页面,我们就需要弄清页面在哪些状态下会出现空屏状态,从而制定统一的加载动画规则。这个问题可以先思考一下,后面解答。


undefined

在制定统一加载规则之前,我们需要明确一个概念,就是加载的模态与非模态。


3.1模态加载

模态加载的含义就是当前加载会中断用户其余操作,用户在这个期间只能等待加载而不能进行其他操作(有的模态会提供取消按钮)。如果你的页面涉及到以下2种情况,可以考虑使用:

1.用户当前的操作本身不能与其他操作同时进行。比如系统更新,或者工具类的导入导出相关操作,我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载,比如protopie的导入操作;

2.当用户进入到一个全新的页面时,这个时候页面什么都没有,我们只能等待页面加载完成才能进行后续的操作,因此在这种情况下也可以采用模态加载,比如我们刚进入Asanan产品页面看到的首屏加载动画:

除了上述2种情况外,你也可以根据你的业务场景来进行模态加载的选择,但建议是尽量少用模态加载,其会对用户的打断和干扰性比较强。


3.2非模态加载

非模态加载的话,这种加载通常只会出现在需要加载的部分,不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。

非模态加载相比于模态加载会更轻量,因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载,比如飞书的左侧栏切换操作:


undefined

接下来我们进入正题,在这里我从加载的角度将网页整体加载过程分为呈现加载规则操作加载规则

我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后,我们就可以开始为我们的产品制定统一的加载规则,以保证后续页面加载的一致性。


4.1 页面的加载过程拆解

在拆解页面的加载过程前,我们进一步阐述之前提到的渲染原则,从前文中提到最后会经过「解码」和「渲染」2个步骤,这也是决定了我们看到的页面的最终呈现顺序:


1.页面渲染顺序

我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式,JavaScript则是负责页面中的交互(当然JS也可以控制样式,这里只描述主要功能)。

页面在「解码」阶段,拿到的HTML文档会被解码为DOM树,同时将CSS文件解析成CSSOM,这两者结合后一起渲染页面,JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染,最后渲染交互。视觉的角度来讲就是先看到元素样式,然后才能进行对应操作。


2.页面呈现的视觉顺序

由于浏览器渲染顺序一般会根据代码的顺序进行渲染,而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的,因此我们看到的页面的视觉呈现顺序也是遵循从上到下,从左到右。

所以几乎所有的产品都是先看到顶栏,然后左侧边栏,然后其他内容。因此我们可以通过这个原则来拆解对应的页面,我们按照页面常规结构可以将其分为三个加载部分:顶栏、左侧导航栏、内容区域。而其加载顺序如图所示:

当知道对应页面的渲染顺序后,我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序:

undefined

我们的加载动画需要承载的就是上述这些白屏的地方,从而将加载细化为三种场景的拆分:全局加载+局部加载+内部加载。如图所示:

undefined

通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。


4.2 全局加载

如上图所示,全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景:

1.通过网址进入到一个新的页面时;

2.通过鼠标右键或网页刷新按钮对该页面刷新时;

3.通过页面操作需要新开页面时。

该全局加载的动画构成为:

1:覆盖整个页面的加载,由纯白色+加载动画构成;

2:加载类型为模态加载,因为用户在这种页面状态下并不能进行其它操作。

undefined

但在这里我们需要注意全局加载的开始和结束时间:

开始时间:当进入页面时立即呈现加载动画;

结束时间:当页面加载出顶栏的时候,此时停止加载。


为何要这么处理结束时间,原因其实图中已经给出了。这里再解释一下原则:只要有页面资源返回,我们的全局加载动画就会结束,随后启用局部加载来承接后续的状态,避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的,所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏,可以以左侧栏来作为结束标准。


4.3 局部加载

局部加载是用在页面整体框架加载的过程中,承接在全局加载后。局部加载的使用场景可以概括如下:

1.顶栏加载结束后,用在剩余框架的加载效果(具体体现为左侧边栏和右侧内容区域);

2.对于涉及到局部页面的切换操作都会进行局部加载(比如左侧边栏的切换);

光看文字可能不是特别清晰,在这里可以举一个动态的例子来帮助理解:


上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的,可以通过程序控制让这种加载动画只在初次加载时出现。


第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间:

但第二次的时候由于有缓存(缓存会加载我们的静态资源,能够让我们的页面框架在第二次时更快显示),这样在读取框架时基本不需要加载,我们就可以通过程序来直接去掉其中的局部加载动画,直接显示框架来进行呈现。

undefined

目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的,而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态,又避免了局部加载动画的频繁出现。


4.4 内部加载

内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束,但某些数据由于接口比较慢,此时还没有返回,这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况:

在进行内部加载的时候,需要注意,内部加载的时候一般标题是存在的,因为标题基本都是固定的,所以能够很快被拉取。比如Zoho的内部加载,加载时标题已经出现了:

通过这三种类型的加载,能够覆盖从用户输入网址,到页面渲染完成这个页面呈现过程中的全部加载场景。


undefined

说完页面的呈现规则,再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态,而且需要考虑到控件影响的其他页面范围。


5.1需要考虑控件本身加载

控件的加载并不是随时都需要,我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下:

undefined

比如图中的按钮的加载状态是必备的,在很多场景下都会用到。但是下拉列表和级联列表,在一般的场景下都不太需要进行加载,当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。


5.2当控件操作会影响到页面其他元素

这种控件比如日期筛选、表格筛选或者保存等操作,当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法:

1.被影响元素不可被操作,且该区域有遮罩+加载动画来覆盖;

2.被影响元素可进行操作,无任何动画,但操作并不会影响之前提交的结果;


这两种方案一种是利用遮罩防止用户无效操作,另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1,我认为被影响的元素是需要有遮罩+动画的,来避免用户在加载期间对其进行无效操作,比如示例中方案2后面修改的名称是没有被系统保存的。

需要注意的是如果在产品中使用方案1,我们的遮罩区域只需要覆盖被影响的元素就可以了(保存这种可以将按钮一起覆盖),比如通过筛选导致图表数据发生变化,这时只需覆盖图表区域,而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时,用户可以通过切换筛选项来打断当前加载。

上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时,则整体遵照页面呈现的规则进行加载。


undefined

上面阐述的加载已经完全能够覆盖我们页面整体的加载,但是还是需要提及一下骨架屏和进度条这两种加载形式。

undefined

先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的(骨架屏的加入使用会让用户感觉网页出现的更快)。那么为什么在大部分的B端业务页面中没被用到呢,主要有2点原因:

1.每种骨架屏都需要进行对应的定制开发,需要与加载后的页面框架保持一致,这会增加了开发成本。

2.中后台的业务界面对来说固定结构的页面会较少,这对于骨架屏的使用机会就相对较少。

个人认为在前期可以以统一加载体验为主,在后期业务相对成熟后,可以针对固定结构,通过骨架屏的使用优化加载体验。


再说进度条。我理解的进度条的使用条件:对于加载时间较长的规定场景可以考虑用进度条来承载,比如我们常见的游戏加载中进度条就用得比较多,因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。

进度条在特定场景下能够缓解用户焦虑,让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度,这也会导致有时候我们看着加载到99%,那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因,很大程度是没有那种加载特别长的场景。


因此这两种加载场景的使用会更加定制化,如果需要使用请根据具体的业务场景来进行选择。


如果把加载动画等比作页面加载的外在,那么缓存和加载策略则是页面加载的内核,合理使用缓存和加载策略可以从根本上提升我们页面的加载速度,让用户更快速地看到页面。


7.1 关于页面的资源缓存

大家肯定听过缓存这个概念,前后端都可以使用缓存。缓存就是数据交换的缓冲区(称作Cache),是存贮数据(使用频繁的数据)的临时地方。在这里主要讲一下浏览器缓存:

undefined

从这张图可以看出,服务器在请求数据时,会进行缓存的判断,如果有缓存则首先读取缓存,如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度,缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存,这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。


但程序其实也可以对动态资源(也就是需要从数据库等拿到的资源)进行缓存的,并且可以设置缓存的过期时间(比如设置过期时间为1小时,那么1小时过后就会重新拉取新资源)。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略,从而提升整体的页面加载体验。


7.2 加载策略的正确使用

现阶段我们常用的主要有下列6种加载策略:

加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间,接下来我们详细看一下每种加载策略的具体使用策略:


7.2.1懒加载

懒加载是当内容落入视窗被用户看到时,才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计,能够让用户更快看到当前屏幕内的内容,减少等待时间。

比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载,这样能够保证用户在进入网页第一时间看到首屏内容,并且用户几乎感知不到这种加载延迟。


7.2.2预加载

预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中,等用户需要使用时,通过缓存直接调用呈现。比如用户在看A页面的时候,就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候,立刻就可以呈现。

比如某些页面在实际中加载比较慢,这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态(图中我将页面网络切换为断开状态),可以看到依旧可以点击全文进行查看和视频的部分预览。


7.2.3分步加载

当页面中有文字和图片时,优先加载占用网络资源小的,比如文字资源,然后再进行占用资源较大的加载,比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。


7.2.4分页加载

分页加载是我们目前很常见的方式,比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载,分页适用于数据量比较大的内容,比如表格数据或者大数据搜索场景可以使用。

分页加载可以理解为当前获取到100条数据,但是将100条数据分别拆成5页每页20条数据提供给用户,这样也可以让用户减少等待时间:

在目前还有一种滚动分页的加载,就是不提供视觉上的分页,而是当用户进行滚动时,自动加载一定数量的内容,这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略,有的也把这种滚动分页的方式称为自动加载。


7.2.5延迟加载

这里讲的延迟加载更多的是一种防护加载机制,一般延迟设置的时间为300ms。这里的延迟加载有2种使用,第一种多用于搜索,通过延迟加载能够让用户更好进行连续输入,避免搜索结果被高频率刷新,同时缓解服务器压力。如下图,可以看到我在输入1后会有个延迟才出现加载列表,并且我在连续输入12306的过程中是没有对结果进行更新的,当我输入完后才更新。

第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时,如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上,防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知:

延迟加载更多用于上述2种场景,对于其他情况的加载,直接加上就可以了,并不需要刻意设置延迟。


7.2.6后台加载

这里想要表达的含义是当用户在操作后,客户端立即反馈操作成功,然后把请求放到后台与服务器交互,这一过程用户不需要了解,不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作,即使你在断网的情况下都能够立刻发布,但实际上这个时候并没有发送成功,还需要上传到服务器后才你的朋友们才能看见。


这样的好处是用户使用起来非常流畅,但是坏处就是,当操作不成功时,用户并不能及时进行感知,仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作,毕竟很多发布的功能会同时影响很多业务线。


这里就拿微信的朋友圈发布来进行举例,下方手机状态都为断网状态,可以看到微信立即发布,而贴吧在这种状态下提示网络错误。

通过这些加载策略的选择性使用,能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识,这样我们不仅知道加载慢的原因,还可以利用加载策略去提升页面性能。



在整体的加载过程中,别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来,这时我们需要考虑对长时间的加载过程进行处理。

通常做法是我们要对加载状态有一个最长时间的限制,一般为加载不超过10s,超过最长时间后就进行异常状态显示(提示语+刷新按钮)。这样用户可以选择重新加载或者离开此页面,而不是一直等待。

在这里还想到一点,就是对于编辑页面,我们应当加入网络连接是否异常的判断,比如当进入到编辑页面后,如果遇到网络断开,需要在页面的顶部加上常驻提示条【当前网络连接断开】,这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。


加载在设计中是非常容易被忽略的模块,因为在大部分情况下网络速度都较快,人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点:

1.我们需要明白加载为什么会出现,这个过程是怎么样的;

2.加载的通用处理手段是怎么样的,非通用处理方式有哪些;

3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。


这样当我们在页面上遇到加载速度慢的问题时,在为其加上动画承载过渡的同时,还应该思考其加载缓慢背后的原因,是因为数据量太大还是加载策略的相关问题,是否可以将其进行懒加载或者分步加载,这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题,才是后续产品设计过程中的长久思路。

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

文章来源:站酷 作者:进击的M
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


如何从业务出发,发掘更多的设计价值

分享达人

“价值”在百度百科的解释是————“价值属于关系范畴,从认识论上来说,是指客体能够满足主体需要的效益关系,是表示客体的属性和功能与主体需要间的一种效用、效益或效应关系的哲学范畴。”
因为一些外部原因,让我最近一段时间都在思考一个问题,作为一名设计师,我的价值是什么???我的设计能力。那我设计能力的价值是什么???完成产品视觉的呈现,帮助项目上线和产品落地?
当这个回答摆到我面前的时候,我竟然有了一丝的不安。
因为在我看来视觉呈现这只是能力,并不是真正的价值。如果作为设计师只是这样的能力,你会发现在团队的位置是很容易就会被顶替的。
那作为设计师的我,那如何才能让自己不容易被顶替,体现自身价值到底是什么就成了重中之重的事情。
那体现自身价值之前,我需要去知道设计价值是什么。设计价值说到底就是解决问题,从而带来了想要的效益。


那我需要思考的方向(我工作主要方向B端产品)

一、设计师解决了什么问题
1、发现问题
2、定义问题
3、分析问题
二、设计师如何解决的问题
1、明确设计目标
2、制定设计策略
三、设计师如何验证问题是否解决
1、收集用户反馈
2、跟踪数据指标
四、举个例子
五、总结一下

 

第一步:「设计师解决了什么问题」

发现问题、定义问题、分析问题
一开始工作的时候很长一段时间都是被动接需求、找参考、输出设计稿,这样一个流程下来,解决的问题无非就是如何用设计呈现需求的过程,设计师的价值发挥就会非常有限。所以如果想发掘更多设计价值,就需要转被动为主动,将设计前置,从业务出发去发现问题(通过分析项目背景/目标、用户调研、行业/竞品分析等)、定义问题(问题出现的原因是什么?用户的原因?还是产品本身的原因)并且分析问题(细化出现问题的原因,给出解决问题的方案)


第二步:「设计师如何解决的问题」

明确设计目标、制定设计策略
虽然如何解决问题每个人的侧重点都不一样的,但是设计目标作为体验提升的开始,正确的设计目标决定了提升的方向,而设计目标可以由产品目标(提升某个具体的指标、提高用户的操作效率)和用户目标(用户的想要得到什么、用户使用产品的痛点是什么)的推导出来。目标有了就要落地去实现,作为设计师,设计策略是落地的重要一步:统一规范、缩短操作路径、提升用户满意度等等


第三步:「设计师如何验证问题解决与否」

收集用户反馈、跟踪数据指标
我们总是在主观的评价这个设计好不好看、好不好用,导致设计的价值很难去真正的衡量。其实衡量价值最基本的方法无非就是你这样做带来了什么,结果导向是衡量设计最为标准的,也是流程闭环的最后一步,如果没有结果,流程无法闭环,那设计价值也无法衡量。而产品上线后得到结果又是什么?无非就是用户反馈是否满意和数据指标是否达标。 


举个例子

项目背景是在公司业务快速增长和用户对于服务品质的诉求提升,加上客服团队一直处于被动依靠人力处理用户问题的服务模式的情况下,排除大幅度叠加人员的方案,希望通过数据驱动+服务产品智能化的方式来对客服体系的升级。从而提高客服人员的工作效率,减少公司的招聘成本的同时提升用户的体验,最终实现公司业务的快速增长。

第一步:「设计师解决了什么问题」

1、发现问题

通过项目背景不难发现其中问题所在:在不增加人员的情况下,当前客服团队的服务模式,已经满足不了现有的业务增长趋势和客户的品质诉求。

那我们需要做的就是解决服务模式的问题。

服务模式有什么问题呢?一直处于被动依靠人力处理用户问题。

2、定义问题

为什么一直处于被动依靠人力处理用户问题呢?

· 用户一遇到问题就去找客服,用户做不到遇到问题可以通过自我查询或者其他不依赖客服的方式来解决。

· 客服人员能力有限,每天的用户承接量大,重复性问题多,问题处理流程繁琐,导致单个问题处理时间较长。

3、分析问题

排除人力堆加的方法以外,如何才能解决服务模式的问题呢?

方法就是

增强用户自主解决能力:自主渠道的升级,实现渠道扩增和业务分流,通过内容分层,简化用户查找问题的流程,培养用户自主解决能力的心智模型;引入智能机器人能力,实现简单性、高频率问题由机器人代理解决。

提升客服解决问题能力:调整问题的优先级排序,优先解决重要客户的问题,减少重要客户的投诉和流失;寻找问题处理流程的机会点,减少客服单个处理时长;分析不同程度客服同时处理问题量的数据,限制客服最大承接量。

既然问题已经确定了,那就要去解决问题。根据对问题的分析结果,该如何转换为设计呢?


第二步:「设计师如何解决的问题」

1、确定设计目标

结合产品目标(自助渠道升级、产品智能化/数据化)+用户目标=设计目标的推导公式

产品目标是产品经理/需求方给到你的,但是用户目标则是设计师自己调研分析得来的

----用户想做什么?

用户想快速解决遇到的问题

----客服想做什么?

客服想轻松快速的帮助用户解决遇到的问题,完成工作中的KPI指标

----用户的痛点?

用户在自助渠道找不到答案,于是遇到问题就找客服去解决问题,智能机器人的回答也解决不了问题,所以需要找人工客服,但是需要等待很长的时间

----客服的痛点?

每天高负压的的工作环境,枯燥重复的工作流程,敏感繁多的考核指标。

2、制定设计策略

那在确定好设计目标之后,就需要通过制定设计策略,以达到设计目标。

注意:我们在做设计之前,必须要确定设计目标。因为目标是方向,不然做到最后发现自己做的设计没有解决产品目标和用户目标,那就是白白的浪费时间,也说明自己做的设计是又问题的。

第三步:「设计师如何验证问题解决与否」

项目上线后,我们需要去收集用户反馈,关注我们设定好的指标去衡量、验证构建的设计方案是否解决用了用户问题以及是否达成了产品目标,因为这样设计工作才能实现一个闭环。

1、收集用户反馈

可通过在产品上线初期以及上线一段时间后进行调查问卷的发放,通过调查问卷得到用户在使用新的产品的感受,直观感受产品迭代后的反响,同时也可以为下次的迭代提供方向和依据

2、跟踪数据指标

从产品目标我们可以看出,我们的数据指标就是提高用户对自主渠道的使用率,那我们只需要在自主渠道的页面增加一定的数据埋点:页面点击率、页面浏览时长等等


总结一下

写了这么多,才发现自己现在欠缺的,还有环境欠缺的。所以冷静的理一理自己的工作的流程,多关注业界的动态。主动的将设计前置,提升自己的价值,提高自己在团队/项目中的话语权。不然如果只是简简单单的设计呈现,自己永远处于被动挨打的状态,没有话语权,没有价值体现,随时都有可能被替代。

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

文章来源:站酷  作者:一曲问灵
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档