首页

信息流产品个人资料卡如何设计?这些思路供你参考!

资深UI设计者


在信息流产品中,个人资料卡是一个很重要的页面。一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导用户关注;另一方面,消费型用户通过这个页面了解创作者,查看创作者更多内容,是众多消费型用户消费内容中重要的一环。只有把这个循环做好才能长期促进平台生态发展。

这个页面承载着这么多的价值,该如何设计?本篇将以 QB 看点号资料卡升级的设计思路为例,进行分析解答。

前言

在前期分析过程中,我们发现当前版本存在诸多问题。

从数据上看,对比公司内同类产品,关注按钮转化率较低(出于数据保护,数据隐藏)。

信息流产品个人资料卡如何设计?这些思路供你参考!

从样式上看,信息布局较乱,重点不突出。

信息流产品个人资料卡如何设计?这些思路供你参考!

基于以上背景,我们开始对资料卡进行改版升级。

设计前应该思考什么

做任何一个设计前,都应该思考设计目标,否则设计出来的结果没有意义,也缺乏过程依据和支撑。那么资料卡的设计目标是什么呢?这要从资料卡在信息流产品中的使命和价值说起。

一方面,消费型用户通过这个页面了解创作者,查看更多内容;另一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导浏览者关注。

如果创作者能够在资料卡充分展现自己的才华和魅力,带来了更多浏览者的“关注”,那他们就更有动力分享或生产优质内容,进而使产品内容更加丰富;从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存,让内容生产者有更多的涨粉空间,粉丝规模做起来之后再进行商业化。这样对消费型用户、内容生产者、平台方都有利,进而处于良性循环。

信息流产品个人资料卡如何设计?这些思路供你参考!

信息流产品个人资料卡如何设计?这些思路供你参考!

如何进行资料卡设计

了解了资料卡的使命和价值,设计目标也呼之欲出,作为平台方,我们需要帮创作者解决两个问题:辅助创作者吸粉 & 助力商业化变现

当然,创作者产出优质的内容才是吸粉的关键,平台方只能助攻。但不同的信息流产品有着不同的定位和侧重点,吸引着不同的用户,所以资料卡设计的样式也不尽相同。

信息流产品个人资料卡如何设计?这些思路供你参考!

1. 辅助创作者吸粉

在辅助创作者吸粉这里,有两个维度可以思考:

  • 内容展示维度
  • 用户关注维度

内容展示分析

在资料卡中,有三个大区域:头图区、信息区和作品区。

  • 头图区:指的是顶部的头图区域,这里可以让创作者设置个性化头图,展示个性。
  • 个人信息区:主要是作者的基本信息,包括昵称、账号名、简介、粉丝数、认证信息等…这里通常还承载着一些等级、榜单,属于信息展示和官方背书区。
  • 作品区:主要展示账号发布的内容,这部分通常是浏览者最关注、浏览时间最长的部分。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过对比市面 20+信息流产品,我们发现了一些有趣的规律:

信息流产品个人资料卡如何设计?这些思路供你参考!

① 头图区:越是社区类产品,对头图个性化重视程度越高,而资讯类的产品则不太重视。

从产品功能上来看,越是偏向于社区类属性产品,头图区域越大,可自定义替换的范围也越广。从用户使用角度来看,社区类产品的用户也更爱展示自我,头图替换的比例也更大,风格更多样化。而资讯类产品的创作者大多使用默认头图,并不进行个性化设置,自定义头图的比例很小。

所以我们在设计页面布局时,需要思考自身产品定位以及创作者需求,把有限的空间利用在刀刃上。

信息流产品个人资料卡如何设计?这些思路供你参考!

② 信息区:越是追求多元化收益商业化的产品,信息区承载量越大。

创作者不是活雷锋,想让他长久的留在平台必然需要给到创作者更多收益(收益除了显性也有隐形的,比如 B 站,很多创作者在 B 站发文平台收益相比其他平台少,但因为品牌声量大、氛围好,获得了巨大的关注和曝光,所以即使收益低,创作者也会持续在平台投稿)。

除了流量分成外,平台们也在帮助创作者实现多元化的收益,比如商铺、直播、付费课程粉丝圈等。甚至抖音很多创作者直接把商务合作写在了个人简介中招商引资。所以这个区域,随着多元化商业收入的更多尝试,信息承载量也越来越大。

信息流产品个人资料卡如何设计?这些思路供你参考!

③ 内容区:越是长内容,越倾向于展示更多作品和更多信息;越是短内容,越是“看就完了”。

对比多款产品我们发现,越是长内容的产品,在内容区越是注重效率选择。通常会显示更多内容,且单条内容会显示更多维度帮助浏览者决策是否点击查看。猜测可能是因为内容较长,浏览者通常会花费更多精力在选择上。而越是短内容,把单条内容放大,促进浏览者点击,直接“看就完了”,反正一条也没太长时间。

所以设计资料卡时,需要设计者清晰了解自己平台内容特征以及用户行为偏好,做出更合适自己平台风格的设计。

信息流产品个人资料卡如何设计?这些思路供你参考!

综上,在做内容布局展示时,需要综合考虑产品定位,思考这些区域对于产品和创作者浏览者意味着什么。

比如头图区域,资讯类产品并不重视,毕竟账号还是靠内容说话,即便是放张个性化头图,浏览者也不会因此而关注。而且大家都使用默认头图,个性化无从说起,就更没有什么意义了。

那么如何让头图有价值?创作者愿意为此更换,而浏览者看到能够感受到帐号的特殊性?

笔者提供一个思路抛砖引玉,参考 App Store 的编辑精选:只有精选的 APP 才可以有头图权利,其他 APP 都是默认样式。而稀缺性和被认可,正是人类所追逐和渴望的。如果平台选出一些精选帐号,赋予其设置头图资格。作为创作者,非常有意愿去更换,因为可以体现出和其他账号的不同。浏览者也可以通过头图感受到当前账号的优质属性。

信息流产品个人资料卡如何设计?这些思路供你参考!

用户行为关注调研

既然要帮账号吸粉,那么我需要了解浏览者的行为偏好,知晓浏览者根据哪些内容判断是否关注该账号。这里我们线下调研了 12 名用户,了解他们在信息流产品中(产品不限于 B 站、抖音、小红书、知乎、快手等)进入资料卡后,通过哪些信息和元素来决策是否关注账号。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过访谈,我们得到了 12 名用户的原始表述。

信息流产品个人资料卡如何设计?这些思路供你参考!

我们发现,浏览者在关注账号的时候,主要在意“内容是不是感兴趣” 、“粉丝量多少” 和 “内容领域”。少量同学提到了会关注下作品数,其他信息基本不看。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 主要看作者发的内容,把高播放量的看一下,如果都比较感兴趣就会关注。会看一下粉丝量,粉丝量多代表质量比较好,关注不会踩坑。作品数会看一眼,如果作品太少,比如5个以下就不关注了直接看。
  • 只看内容,其他作者资料基本都不看,偶尔看一下粉丝数。教程不看粉丝数,教程如果是我需要的内容,就算粉丝少我也会关注。
  • 主要看作者别的视频,关注主要是为收藏,不看别的只看所有视频。会关注最近内容的播放量怎么样,其他基本不看。
  • 那肯定是看内容是不是感兴趣啊,关键还是看内容,粉丝量和点赞作品数会看一下,但不会作为关注的主要原因。如果粉丝量作品数多的话,关注动力会大一些。其他的都不看。
  • 还是看内容是不是感兴趣。粉丝量分情况,特别需要的内容不关注粉丝量,搞笑类生活类的会看下粉丝量再考虑是不是关注。有一些作者如果只看个别内容感兴趣但整个领域不感兴趣的话不会关注。通过标题大概判断是不是自己喜欢的类型,最主要的还是内容,其他的不看,粉丝量会看一下别太差就行。

而在操作路径上,进入资料卡后:先到作品区查看内容列表 → 拖动页面向上查看更多内容 → 返回信息区查看粉丝量 → 关注账号。呈现先下后上的操作路径。

信息流产品个人资料卡如何设计?这些思路供你参考!

行为路径结合关注决策,有三个关键元素是形成操作链条并绑定在一起:内容、 粉丝数 、关注按钮,且内容为高播放量内容。所以高播放量内容,粉丝数是决策关键,激发下一步关注行为。

信息流产品个人资料卡如何设计?这些思路供你参考!

而且我们在访谈中发现,关注行为也是一个偏冲动行为,用户通常在进入资料卡的几分钟内做出决定,在页面停留时间越长,越不容易发生关注行为。所以在设计中,尽量缩短决策路径,减少决策时间。

基于以上结论我们做了两个方案再次进行测试:

  • 方案1:传统样式
  • 方案2:高播放量内容,粉丝量,关注按钮放置在同一区域,缩短决策路径

信息流产品个人资料卡如何设计?这些思路供你参考!

为什么做一个传统方案进行对比测试也是因为现在很多产品资料卡页面趋同,大家已经形成了认知惯性,而尊重用户习惯也是产品设计中需要考量的因素。接下来,我们又找了 12 名同学进行访谈和测试。

出乎意料的是,大家对于新事物的接受程度很高,有八名同学选择方案 2。虽然只是理论上的选择,并没有延伸到实际行为,但也佐证了大家对于高播放量内容确实存在很高的需求。对于选择方案 1(传统样式)的同学来说,主要是不喜欢横滑操作和不想改变既有习惯。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 喜欢方案1,不喜欢横滑,习惯竖着操作,标题清晰
  • 喜欢方案1,横着这样展示好像没有竖着这样展示清晰,喜欢这种长条的样式
  • 喜欢方案2,喜欢这个,重点突出,符合我的习惯,如果高播放量内容都不错我就会关注,省得找来找去了
  • 喜欢方案2,上面这个类似youtube的popular uploads的东西能让你第一眼看出这个UP主牛在哪

不管哪种样式,内容都是重中之重。既然是重中之重,大家也会注意到,有些内容区视频是双列形式,有些视频是单列形式。那么浏览者如何看待这种区别呢?会对关注产生影响吗?

基于两种样式进行访谈,比分最后打成平手。虽然在 2 选 1 的要求下大家各有各的选择,但最后也都表示差不太多,都能接受。从信息利用率上来讲,双列的形态展示的内容更多,而且对视频更加友好,预览图比较大。所以如果是视频内容,可以使用双列大预览图样式。

信息流产品个人资料卡如何设计?这些思路供你参考!

以上是关注吸粉的部分,设计时需要综合考虑产品定位和用户行为特征进行页面布局。

2. 助力商业化变现

商业化能力是创作者与平台形成强关系的纽带。平台为帮助创作者变现,不仅通过各类扶持政策给予补贴, 更是通过整合各类商业资源,不断拓展商业化渠道,打通全流程商业链条,帮助创作者实现内容价值最大化。

一般平台提供商业化有三种类型:

基础工具

  • 商业基础:平台提供流量分成、现金奖励等
  • 商业化功能:打赏、电商功能、内容付费功能、直播功能等
  • 精准推送功能:粉丝分组推送、粉丝必达等

平台政策

  • 扶持计划:出台各类流量扶持政策,赋能变现
  • 奖励政策:MCN 签约、创作活动

资源整合

商业资源整合:整合平台内外部的广告主资源、商业活动资源、投融资服务、新媒体账号孵化等各类资源

资料卡涉及到的商业化展示主要为:电商能力,内容付费,粉丝圈/粉丝付费。当有这些商业化内容的时候,通常占用信息区一行区域,大多数信息流产品多如此。

信息流产品个人资料卡如何设计?这些思路供你参考!

但当多种商业化能力同时提供时,不同的产品给出了不同的解决方案。比如大多数产品合并在信息区的一行,通过横划展示更多,以保证其他内容的露出。毕竟对于浏览者来讲,内容才是最重要的。

信息流产品个人资料卡如何设计?这些思路供你参考!

有一些产品则没有选择合并的方式而每个占用一行空间,与此同时,把创作者的信息展示的也更为详细,可能和本身社区类产品的定位有关,希望更能关注除了内容以外,创作者自身的独特价值。

信息流产品个人资料卡如何设计?这些思路供你参考!

还有一些产品则利用了内容 tab 区域承载橱窗和付费服务,减少信息区的占用,还可以通过逻辑把不同渠道或不同场景的用户引导不同 tab,让浏览者看到更适合自己的内容。

信息流产品个人资料卡如何设计?这些思路供你参考!

总结

资料卡里承载了很多的信息,从创作者的个性展示到内容到商业化变现,需要我们不断平衡每个区域的关系。

别的产品这么做,并不一定适合自己的业务,需要我们找准自己产品的定位,结合当下业务重点去综合考虑。

业务是偏资讯的还是偏社区的?是偏短内容平台还是长内容?有没有提供足够多的商业变现能力给到创作者?商业化能力做的如何?不同模块的用户数据怎么样?只有对现有业务充分了解,才知道哪些是现阶段的重点,才能对一个页面做出更有依据的设计。

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

文章来源:优设   作者:腾讯设计 

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

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

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




消息通知系统设计指南

资深UI设计者

消息通知可以及时地将状态、内容的更新触达到用户,用户则可以根据收到的消息做后续判断。但是如果没有及时将重要消息触达到用户或者滥用消息,则失去了消息通知的初衷。特别是针对涉及复杂任务流程的产品,消息类型繁杂,难以全面盘点消息类型,消息系统的设计就显得尤为重要。

希望通过这篇文章让各位在设计消息通知系统的时候能够更加全面高效。

如何「理解」消息通知

消息通知需要为产品服务,帮助用户快速获取对应的通知信息。收到一条新回复的提示、工作台展示工作进度、朋友的来电,生活中处处是信息的交换。在 App 和网页应用中最常见的信息交换方式则是消息通知。

消息作为一种信息交换方式,抽象其过程,即为“在达到某一触发条件下,由发送方发送消息给到接收方,接收方可针对此条消息提供反馈”。需要包含以下关键因素:

腾讯出品!消息通知系统设计指南

消息触发时间与条件(何时什么事):如按周期重复的时间点,或系统状态变更、用户操作结果等;

消息发送方(谁发现的事):可能是系统、第三方服务商,或者某个用户;

消息接收方(谁需要知道):即接收方,可能是系统中的全部用户,也可能会根据权限划分推送到某个用户群组,或者是某个特定用户;

消息触达渠道(怎么找到他):短信、电话、App 内通知等;

消息通知内容(告诉他什么):短信的文本、电话对话内容、通知消息的文案等消息通知;

消息操作反馈(他可以干嘛):主要分为只读与操作反馈。只读,即当前消息用户在浏览后不需要做更多的操作,主要以了解为主;操作反馈,即当前消息需要用户浏览,且在浏览后做相应的后续操作。

好的消息系统要满足什么条件:

腾讯出品!消息通知系统设计指南

全面:通知的消息项要完整全面,用户才能放心地通过消息通知系统了解消息更新内容;

及时:消息的触达方式要及时有效,在消息相关事件发生后,用户能在第一时间获取到信息并提供操作反馈给到消息发送方;

高效:能通过合理的消息发送途径,允许用户设置及合并相似信息等方式避免过多消息侵扰用户,让用户能够高效处理消息通知。

如何「盘点」消息通知

设计全面、及时、有效的消息通知系统需要对消息的六个关键因素进行全面盘点,通过分步的方式逐步完成消息通知系统的设计。主要分为以下三步:

腾讯出品!消息通知系统设计指南

① 盘点系统中包含的消息项:包含其触发条件、通知来源及通知对象。需要盘点完整消息项从而保证消息系统的完整性;

② 确定消息触达渠道:包含各消息项的触达渠道。让所有消息都能触达到用户的同时,能够让重要信息更易触达,保证消息通知的及时性;

③ 撰写通知内容与操作反馈:包含各消息项的通知内容与操作反馈。让消息内容能够有效地传达给用户,让用户能快速反馈、操作。

盘点的过程,即对消息通知清单的梳理。与产品、研发等团队成员的沟通也将使用该清单。最终目标即完成下方表格的填写:

腾讯出品!消息通知系统设计指南

1. 盘点系统中包含的消息项

当前步骤需要对系统中可能会有的消息项进行完整的盘点。盘点消息项可以通过按消息类型走查方式完成。市场上比较有共识的消息的分类方式主要分为禁止、警告、成功三类。但是在实际设计工作中还需要配合以下的消息分类方式去更完整地盘点消息项:

腾讯出品!消息通知系统设计指南

盘点出的每个消息项

都需要补充以下四个关键因素:

触发条件:结合产品核心场景梳理完整。可通过状态图或泳道图查缺补漏(详见下段内容);

通知来源:可能是某个内部系统,可能是某个用户组,也可能是某个具体用户。用户组的划分需要提前与产品、研发同事沟通完成;

通知对象:可能是全部用户,也可能是某个用户组或具体用户。由触发条件中的场景决定;

重要性:需要与团队沟通得出,可使用“高”、“中”、“低”的分类方式。

盘点完成的消息项使用下表进行整理,方便产品、设计、研发之间的沟通。

腾讯出品!消息通知系统设计指南

用流程图或泳道图查缺补漏:

对于 ToB 或 ToG 类含有复杂状态转换以及任务流的产品,除了使用分类的方式盘点消息项,还需要对照流程图或泳道图查缺补漏,避免消息类型的遗漏。

如,顾客线上购买商品并收取商品的商品相关状态变化如下图所示,每个状态都可对应着一条消息项:

腾讯出品!消息通知系统设计指南

线上购物过程中的消息流程图示意

当系统内包含多角色,且角色间流程有交互时,则可以使用泳道图的方式进行梳理。在泳道图中的每一条状态变更线,都对应着一个状态变更提醒。其中角色间交互的线,由于需要角色主动处理方可进入下一流程状态,这条消息一般会成为一条待办消息。

什么类型的消息不要纳入消息通知系统:

需要注意的是,虽然通知的完备性很重要,但某些消息在前期梳理时就需要从清单中剔除,包括:

  • 单纯问候类消息,如“好久不见”等
  • 不需要用户知道的消息,如系统后台数据更新等
2. 确定消息触达渠道

确定要推送给用户的消息类型后,需要给各消息匹配适合的通知方式。不同的通知方式会有不同的适用场景,可对照下表结合第一步整理的重要性配置消息的触达渠道:

腾讯出品!消息通知系统设计指南

消息触达渠道的配置结果到第一步的表格中:

腾讯出品!消息通知系统设计指南

平衡通知量:

一个好的消息系统需要能有效触达的同时不过分侵扰用户。这就要求我们对系统实际运行中可能会出现的通知量进行预估,并适量调整通知方式,让重要的消息能够更有效及时地触达到用户。最终调整后的消息数量与提醒强度的关系最好能形成如下图所示金字塔的模式。

腾讯出品!消息通知系统设计指南

提醒强度与消息数量的金字塔关系

合并重复消息:

对于出现频率较高,且用户不需及时了解每条消息的消息项,可以通过合并消息的方式减少通知的数量。合并主要有两种方式:合并流程过往节点信息和合并同类消息。

  • 合并流程过往节点消息:对于一些流程类通知,若用户在响应或查看前,流程已经进入到下一阶段,历史节点的信息已经无需了解时,可合并过往流程节点的消息。如淘宝在展示物流时,针对同一订单的物流,仅保留最新的一条。
  • 合并同类信息:对于同类型消息过多,且用户不需要一一查看,只需在用户有需要的时候提供入口查看完整内容时,自动合并同类型的消息,减少对用户的打扰。如 Instagram 在展示用户动态信息时,会合并同一天同一类型的消息。

腾讯出品!消息通知系统设计指南

两种合并消息方式

智能推送:有条件的系统可根据用户行为分析及用户画像,进行智能推送。如基于用户画像按类型推送运营类消息,基于用户接受消息数量,判断是否合并消息推送等。

渠道间消息项的延续与统一:

出于信息持续性的考虑,触达渠道之间有部分关联关系在制定消息触达渠道时需要注意,如:

  • 若系统包含 App、web 等不同端,相同通知类型的消息要保持统一
  • badge 提示需要在应用内消息通知模块有对应消息提示
  • push 消息的文案需要与应用内消息中心保持一致
3. 撰写通知内容与操作反馈

通知的内容需要满足简明易懂的同时,还要让用户能够快速处理。根据大量经验总结,通知内容的撰写可使用一个通用撰写公式:

腾讯出品!消息通知系统设计指南

在应用撰写公式写内容时,需注意以下要点:

  • 重点前置:用户触达的第一场景,可能是手机的 push 消息,可能是多个消息的列表。这就要求在撰写文案时要将重要信息前置,如验证码、还款金额、事件提醒名称等。
  • 敏感信息保护:由于无法确认用户获取信息的场景是否私密。对于金额、个人信息等隐私数据,建议在应用内或其他渠道提供设置项,提供用户自主选择是否在消息通知中包含具体数值。如果要默认显示,需要提前告知用户。
  • 来源信息露出:在邮件、短信等非产品自有渠道推送消息时,用户可能会不确定消息的来源是否官方,需要包含消息来源信息。
  • 提供触发时间:当消息的发生时间对用户后续判断、操作有影响时,需要在通知内容中包含消息发生的时间。

除了以上通用注意事项,由于渠道本身的特征差异,还需注意以下渠道相关的要点:

电话:需要设定客服话术标准,一般需要在会话开始前先告知用户来电是谁、有什么目的。在讲述完通知内容后,还应告知用户如何处理当前信息,如果想了解详细内容该前往哪个渠道了解。

短信-来源平台:由于通知类短信的发送号码可能会由于服务商设置的问题导致有多个发送号码发送给用户,用户无法根据号码判断发件人身份。故需要在短信最开始说明平台来源,建立品牌认知,避免用户错认为是垃圾短信。如:「腾讯科技」***

短信-操作反馈:由于大部分短信为纯文本短信,相关操作反馈需要通过链接或者路径指引的方式提供。若短信包含详情链接,链接最好能设置为保留根域名的短链,如:点击了解详情:cdc.qq.com/d8djei

邮件:与短信相似会有来源可信度问题,邮件内容需包含品牌元素,同时发件的邮箱地址后缀使用产品官方网站。另外需要注意,某些邮件软件会设置不自动下载图片,邮件重要内容不要使用图片。

push 推送(移动端):是消息在移动端的特有触达渠道,由手机系统发送。发送的信息格式会受系统要求有所限制。最新的推送要求可参考相关设计规范文档或接口规范。应用的 icon 与名称系统会自动补充,撰写文案时不用包含。

微信公众号(订阅号/服务号):由于微信对订阅号与服务号的消息推送方式会经常变化,需要确认最新的要求并撰写文案。

在完成通知内容以及操作反馈的梳理后,对消息梳理表格进行更新,补充相关信息:

腾讯出品!消息通知系统设计指南

自此,消息项的盘点已经完成,后续可基于该表格与产品、研发沟通。当业务出现变更时,也需要对表格内容进行同步更新。

如何「设计」消息中心

消息通知的触达渠道中,电话、短信、push 推送的呈现由系统决定。但是若产品有独立 App,往往需要消息中心去承载全量的消息列表。本章会介绍如何设计消息中心。

不同应用的消息中心处理方式受产品定位、应用框架等因素影响,设计差异化较大。但是可以通过按路径分割去简化设计:消息中心的入口、消息列表的组织方式、消息卡片的样式、消息的设置等几个部分。

腾讯出品!消息通知系统设计指南

1. 消息中心入口

主要有底部 tab、个人中心附近的图标入口、个人中心的菜单项等三种入口形式:

腾讯出品!消息通知系统设计指南

消息中心的三种入口

  • 底部 tab:一般适用于产品核心功能中包含大量用户间通讯,或者希望通过强化消息露出来促进用户上传更多内容。对于重要的消息类型可提供数字 badge 作为未读消息数量的提示;
  • 顶部图标入口:一般适用于产品消息数量较少,或消息对产品核心场景的影响较少的情况。一般会在首页的顶部,或个人中心页的顶部有一图标作为入口。图标会包含数字 badge 作为未读消息数量的提示;
  • 个人中心菜单项:一般适用于当产品顶部空间作他用,没有图标入口的位置时使用。

2. 消息列表

从消息中心入口点击后跳转到消息列表。由于消息的即时性,需要按时间维度排列。但是如果产品的消息类型较多,可通过分组合并或者分 tab 的方式提升用户触达消息的效率。

腾讯出品!消息通知系统设计指南

分组合并消息列表

腾讯出品!消息通知系统设计指南

分 Tab 合并消息列表

对于通知类型复杂的系统,还可使用二级列表的形式对消息进一步分类展示,如微信及支付宝,由于其包含大量第三方服务,消息复杂,均设置了二级消息列表帮助用户分类查找消息。

腾讯出品!消息通知系统设计指南

二级消息列表

3. 消息卡片

消息列表中的卡片有两种样式可选,一般在一级消息列表使用小卡片样式,让用户有更高的浏览效率。大卡片样式则用于二级消息列表,或当前应用的消息数量较少时。

腾讯出品!消息通知系统设计指南

消息卡片应用示意

4. 消息中心设置

一般位于消息中心列表页右上角,若可设置项较多,则提供设置入口在二级页设置。一些常用的消息设置项如下:

全部已读:对于消息数量较多,且未读态会影响 badge 的展示时需要提供该设置项。点击后设置列表消息项全部已读。

发起对话:若系统包含通讯功能,一般会在消息类表页提供发起对话的快捷入口。点击后跳转到通讯录或好友列表。

设置通知提示方式:提供按消息类型设置某些通知项的接受渠道、接收时间段、各渠道之间的已读联动等,如微博;或者让用户选择消息通知的精确度,是否包含具体信息,如微信可接收“您收到了一条信息”的模糊消息。

打开消息推送权限:一些应用有一些状态更新或重要的提醒需要用户在系统设置中打开当前应用的通知权限,会包含提示用户打开通知的功能。这些提示需要在用户进行了如“办理事项”、“上传状态”等发起流程的操作后提示。不建议在用户启动 App 时就弹窗提示打开通知。

总结

本文是对消息通知系统设计的初步介绍,希望能帮助到新手产品、交互、产品体验设计师快速了解消息通知系统的内容盘点与消息中心的设计方法,制定及时、高效、完整的消息通知系统。

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

文章来源:优设   作者:腾讯设计 

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

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

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



如何从零开始创建新的设计原则?

资深UI设计者

本期提纲:

  • 为什么我们需要新的设计原则
  • 制定新的设计原则
  • 推行新的设计原则
  • 新设计原则的影响

在本文中,我们将分享如何提炼出设计原则,并在团队中引推广实施的。

去年,我们一群人聚在一起探讨了一个棘手的问题:随着 Spotify 的不断发展,我们如何在产品迭代中保持高水平的设计质量?

经过研究和讨论,我们确定了一个方向:为了提高质量,我们需要清晰、有用的设计原则。一方面,我们认为只有定义了 Spotify 的设计原则是什么,才能够帮助团队评估他们是否以 “Spotify 方式” 进行设计。另一方面,我们还希望帮助设计师在讨论设计目标和设计评审时使用相同的评价标准。通过不断更新的设计原则可以实现保持高水平设计质量的目标。

为什么我们需要新的设计原则

为了解决设计无法标准化的问题,2013 年,Spotify 制定了最初的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分,这些原则让设计师们在输出和讨论方案的时候有方向可循。有了设计原则之后,我们的设计方案在字体、色彩、图片、板式、信息架构和交互方式等方面都具备了一致性,即使不是设计师也能够对我们的设计产生共鸣。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 在 2013 年制定的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分。

但设计原则是需要与我们的业务目标一起向前的,到了 2020 年,Spotify 已经发生了很大变化,我们在播客上加倍发力,我们为消费者提供的不仅仅是音乐,而是包含广播、故事等更多元的音频形式;我们服务的对象,不仅仅是听众,还有艺术家和广告商;我们的设计师团队也不断的壮大,发展到现在已经有近 200 人。

看着 2013 年制定的设计原则,我们问自己:这些设计原则对于我们现在的设计是否还是正确的?Spotify 的设计师们是否真的意识到这些设计原则的存在?答案是否定的。

我们经过对现有设计原则的讨论,发现了以下三个方面的问题:

1. 无法满足不同内容的需求:原本的设计原则,更专注于消费者的音乐体验,然而随着 Spotify 的发展壮大,我们的产品不仅仅是音乐,而是包含更多内容的音频,但这些原则似乎并不适用于我们设计的所有内容。

2. 概念容易混淆:比如 “lagom” 和 “do less”,都有简约的、恰到好处的意思,在表意上存在重叠使得它们很难分辨,在评估设计方案时,我们很难确定从哪一方面评估我们的工作。

3. 数量过多的原则很难记住:根据我们的调研和设计师的反馈,设计师们往往记不住这些设计原则的内容,这也就导致了他们无法很好的在设计实践中应用。

简而言之,旧的设计原则需要更新。

制定新的设计原则

去年,我们工作组的十几名产品设计师和用户体验设计师,在一个协作研讨会上聚在一起讨论如何制定新的设计原则,我们希望团队中的每个人都参与进来,而不是让一个人来决定 Spotify 的设计原则应该是什么。

我们通过以下三个问题,指导我们制定新的设计原则:

  • 我们为什么要制定这些设计原则?
  • 它们是给谁用的?
  • 它们将如何使用?

经过一番激烈的辩论,我们得到了答案:

  • 设计原则是为了帮助设计创造,并为评估设计成果提供衡量标准。
  • 设计原则的核心对象是我们的设计师。
  • 在设计创作过程中设计可以帮助产品设计师做出设计决策;在评估设计时,提供统一的衡量标准,避免以短暂流行风格进行判断。

然而真正的挑战是应该怎样定义新的设计原则。我们在设计时应该追求什么样的价值观和设计属性?产品应该传递给用户什么感受?

对于这些问题,每一位设计师都有自己的观点。我们让所有人将自己对 spotify 的设计原则进行定义,并将这些想法写在便利贴上。我们将这些想法进行总结分类,为了避免重复性的概念,我们把相似的概念归为同一类别,并且让大家对这些观点进行具体的描述,来帮助大家理解他们想要的设计原则。最后,我们将所有的想法都汇集在一个巨大的矩阵图中,通过设计师们的投票来帮助我们缩小范围,确定大家认为合理的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有便利贴的矩阵图

通过上面的方式,我们提出了新原则的草案。同时我们也通过与用户沟通,进一步了解用户对于 spotify 设计的理解,根据这些反馈,我们进一步在设计原则的概念细节上进行调整后,确定了新的 Spotify 设计原则:相关性、人性化、统一性。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 新设计原则:相关性、人性化、统一性

1. 相关性

把每个用户作为一个独立的个体来看待。

Spotify 是为每一位用户量身定做的,我们希望 Spotify 具有个性化的感觉。为了给用户提供专享的感受,在设计过程中,我们认真思考我们所展示的内容是什么、展示给谁以及在什么背景下呈现。简单来说,我们会在正确的时间提供正确的信息给特定的人,我们不想要 “一刀切” 的体验。

那么我们在具体的实践中,是怎样体现 “相关性” 的设计原则呢?

举个例子,同样是歌曲 “pure seduction” 的封面,欧美国家的用户看到的画面可能是激情热吻,但对于相对内敛的东南亚国家用户,封面的内容就会以更加含蓄柔和的方式呈现。同样的,印度用户大多数更喜欢听印度语的歌曲,我们在一开始就让他们选择自己喜欢的音乐语言,使用户得到与自己具有 “相关性” 的音乐内容。

我们尊重不同的文化和社会环境,我们希望每一个视觉呈现都能够适合当地用户,能够被当地用户所理解。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 播放列表封面和注册页面的示例

2. 人性化

人性化的设计是可以与用户交流的。

Spotify 是依赖于推荐算法的产品,但这种技术也是基于人的喜好的。Spotify 像人类一样,也会有情感,有自己的思考方式。我们希望用户在使用 Spotify 时,可以有一种 “和人交流的感觉”,如果我们把 Spotify 设计得太工具化,就会失去这种感觉了。我们的每周推荐歌单封面,没有选用精致的照片,而是直接使用用户的个人头像,通过这种方式我们告诉用户 “这是只为你一个人准备的歌单”,还有什么比自己的个人形象更加 “人性化” 呢?再举个例子,在 Spotify 的儿童版本中,我们将创建个人资料的行为变成了创建有趣的卡通角色的过程,“人性化” 的虚拟形象使 Spotify 与儿童用户更流畅的交流。

官方译文!Spotify 如何从零开始创建新的设计原则?

Discover Weekly 封面和 Spotify Kids 应用程序的示例

3. 统一性

统一性可以使线下产品和线上产品实现品牌感。

我们的线上和线下产品的设计风格都应该具有统一性,即使没有过多的说明,人们看到一眼也可以知道这是 Spotify 的设计。统一的设计风格,可以让用户对于我们的产品有一定的熟悉感和信任感。正因如此,我们没有完全抛弃 2013 年制定的的设计原则,去创造新的方向,而是根据之前的设计原则进行修改和优化。为了实现品牌的一致性,我们希望我们所制定的原则是可以在不同设计对象和设计场景中复用的。

下图中是一个营销活动的案例,无论是线下的广告牌、宣传海报,还是线上的活动页面,我们的设计风格都保持了统一性,无论你在线下还是线上看到,你都会知道这是 Spotify 的产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 营销活动的示例

推行新的设计原则

提出设计原则是一回事,让每个人都参与进来完全是另一回事。如果我们想让新设计原则持续运行下去,就需要一个执行计划。

在推行设计原则的初期,我们在一个设计团队的工作坊中试运行了新的设计原则。通过观察设计师在实际工作过程中,是否由于运用了新的设计原则更好的完成了设计实践,帮助我们判断这些原则是否是真的发挥作用。之后,我们将这些原则纳入现有的设计活动中 —— 例如,在全员设计会议中,介绍这些原则,并将它们添加到我们的设计手册和新员工的入职流程中。几个月后,我们与 Spotify 的所有设计团队都开展了一系列工作坊。这样,每个设计师都可以学习如何将设计原则应用在工作实践当中。

在工作坊中,我们将设计项目中应用设计原则的案例记录下来,比如,以用户的名字来命名歌单,建立与用户的 “相关性”。我们将这些设计师们在真实的项目中遇到的案例整理到一起,以便其他设计师看到具体案例时,更好的理解新的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

展示如何使用设计原则的卡片

在推行新的设计原则的过程中,我们发现有两点值得注意:

1. 恰当的案例,有助于我们对新设计原则的理解

口头上表达 Spotify 的设计原则是 “人性化” 或是 “相关性” 是很容易的,但是什么样子的设计才是 “人性化” 和 “相关性” 的呢?在推行设计原则时,用例子来说明这些原则的含义非常有用,案例越多越有利于我们对这些抽象设计原则的理解。

2. 周边产品可有助于设计师理解和记忆新的原则

设计原则也可以通过更多的周边产品,如海报、贴纸或其他产品去推广。理解新的设计原则和理念需要很多时间,周边产品可以帮助团队理解和记忆这些原则。为了推行新的设计原则,我们已经开始设计相关的海报、文具等周边产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

设计原则的在线下产品应用的示例(由 deepyellow 和 dribbble 图形组成的样机模板)

在没有 “官方” 的周边产品时,一位设计师把设计原则作为自己的笔记本电脑桌面背景,这也是一个很好的理解设计原则的方法。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有壁纸的笔记本电脑,壁纸上写着设计原则:相关的、人性化的、统一的。

新设计原则的影响

我们推出了这些设计原则后,有什么变化呢?

1. 新的设计原则更容易被大家记住和应用

现在,大多数设计师都意识到了 Spotify 有设计原则。根据我们的设计行动小组最近的一项调查表明,设计师们已经了解了 “相关性、人性化和统一性” 的设计原则,并且在设计过程中,设计师们也会考虑这些原则。这表明新的设计原则与我们之前的六项原则(内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分)相比,更适用且更容易被记住,也更容易在实践中应用。

2. 为设计评审建立了统一的标准

设计师有时在设计评审时会参考这些原则,但在这方面还有有待改进。在评审期间,设计师仍然需要有意识的参考设计原则。随着时间的推移,我们希望这成为设计师的本能反应。

我们开始制定新的设计原则时,目的是帮助设计师提升设计质量。那么我们的新设计原则是否使设计质量有所提升呢?现在说还为时过早。但我们希望 “相关性、人性化和统一性” 可以传达出 Spotify 的产品目标,这些原则能够不断提醒我们做得更好。

总结

设计原则不应该是一成不变的,设计原则需要根据我们的产品目标的不断发展进行优化更新,不断适应新的设计环境和设计对象,以持续保持高质量的设计输出。

好的设计原则应该是更容易被大家记住,并在工作实践中应用的。好的设计原则可以帮助我们在工作中做出正确的设计决策,在设计评审中建立统一的标准。相比设计原则的制定,设计原则的推行也同样重要,合理的推行方式可以使设计师真正的理解设计原则,并能够像本能反应一样在设计实践中应用。

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

文章来源:优设    作者:腾讯设计

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

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

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



如何让你的设计更具有说服力?

ui设计分享达人

对于一家做项目型的公司而言(今天主要讲的是项目性质的设计工作,产品可以绕道哦),时间就是成本这句话体现的淋漓尽致。基本上给到UI设计的时间,是少之又少,那么如何在一个有限的时间里,设计出优秀的作品呢?这是接下来我想跟大家一起讨论的~


我们都知道用户体验五要素(战略层、范围层、结构层、框架层、表现层),这五大点是一个个递进的过程,是一个从初步的想法到最后落地的过程。也就是说我们最后看到的表现层(UI界面)是如何做出来的,都需要靠前面一点点的去研究、细化、分析。所以这么一个强大而繁琐的过程,我们如何要在一个有限的时间内去完成,下面跟大家聊一聊我在实际工作中的例子。


一、沟通


沟通是一切事物的前提和基础,这个沟通一定是要跟客户的直接沟通,不管是远程还是面对面也好。中间人的传达会加上个人思想理解的转化,到你这里就不再是一手消息,也许就不会那么准确。拿到一个项目之后,我们要了解项目,所以需要对项目的背景、目标用户、产品目标、核心竞争力进行分别分析。


项目背景

为什么设计师的背后总是有一群指点江山的人,因为我们的设计没有被体现在产品上,只是表层,每次给别人解释设计理念的时候总是说“我觉得这样好看”、“我认为这块应该用这个颜色”,却没有说出这个项目本身想要表达的是一个什么理念。

本次项目是需要把手机版的内容改版成PC端,原有需求逻辑不变。那么问题来了,现在是一个移动互联网的天下,为什么客户却需要将手机端的内容移到PC上呢?因为这个产品的使用环境之一就是在工作中,试想一下,工作中一直拿着手机刷来刷去,不知道的人还以为你在划水。考虑到用户使用环境的因素,就需要有PC端的设计。


目标用户

产品的核心是用户。所以一切要从用户的角度出发,做用户满意的产品。在用户调研这块,常见的用户分析有:用户画像、一对一访谈、问卷调查、焦点小组、眼动测试、测评以及埋点数据分析,但是项目型工作周期短,时间紧,没有那么多的成本去做大量的分析,所以我们基本上采用三种方式去解决这个问题。1、与我们的客户(甲方)去沟通,他们肯定更了解自己的用户群体;2、通过现在市场上比较知名的网站(艾瑞网)中提供的大数据分析出的结果;3、如果身边有这种用户群体可以对他们进行简单访谈。通过以上三种办法也是可以得到一个较为准确的调研数据的。

在跟客户的沟通中了解到,我们的主要用户是基中层领导,目的为提升领导力。下面会有我对这部分人群的用户画像分析。


项目目标

知己知彼,要了解我们此次设计的主要目的是什么?需要解决什么问题?

因为这已经是一个已经上线一年的产品,我在跟客户的沟通中很明确了目前有两大问题:第一是:如何提高完成率;第二是:国外市场用户使用不习惯。

这两个信息很重要,为后面的设计提供了一个明确的方向。



核心竞争力

这是体现我们产品优势的地方,我们需要尽量的把产品强有力的能力展现出来,从而获得目标用户的信赖。把产品的能力、优势,可以给用户带来的价值,要体现在比价明显一些的地方。

此次是一个本身有强大的体系支撑,有一个成熟的结构,在此基础上开发研制的一套产品,所以产品的目标用户量,获得的成就就可以直接展示在首页上,并且把正在学习人数或者为多少人带来成就都体现出来。让用户感受到有这么多人都在努力,有这么多努力的人已经完成了自己的目标。


二、分析


我首先把手机版的功能都体验了一遍,随时记录了在使用过程中不喜欢的地方并且可以优化的点,这都是点点滴滴的随记,可以为后面设计中提供一些方向或灵感。根据上面了解到的信息。

可以得到此次设计的主要方向,第一:针对目标用户进行用户画像分析,以此来确定如何才能更好的提升完成率;第二:针对国外同类产品分析,对国外市场用户使用不习惯的了解,并且还要结合国内市场优化交互体验。


用户画像分析

在上面一个阶段了解到我们的用户群体是基中层领导者。根据市场数据分析,一般基中层领导者主要以男性居多,年龄大概在28-35岁之间,以需要提升领导力为目的,那么从这几个特征中我们看出,这些人都有哪些特点呢?首先28-35岁的年龄段,基本上是已经结婚的比较多,并且有很大一部分人群也有了孩子,这个年龄段的孩子还比较小,基本也是在2-6岁之间较多。对于这种类型家庭而言,无论是在工作上还是生活上都较为忙碌。并且因为是领导者的原因,时间上也较为分散,一天下来没有办法集中去做一件事情,开会、汇报、沟通需求、分布任务等。由于不像在学校,事情太多也太杂,很多时候没有办法安心去做一件事情,导致规划能力不强,需要借助平台可以有个推力。



国外同类产品分析

其次是针对国外市场用户使用不习惯这个问题,我对国外几个大型的相关网站做了了解。edX、Coursera、Udacity这三个网站是国外市场使用较多,知名度较大的几个网站。分别从内容上和视觉上进行分析,去了解国外市场的设计方式,用户使用习惯等。



从以上的分析中最终得出了以下三个结论:

1、操作习惯:这个与国内的差不多,都是从上到下,从左到右呈Z字形排列布局的方式,视觉的落脚点都会在画面的左上方,所以我们在设计的时候,要把重要或者想要表达的内容放在这个位置,使用户进入页面后就可以很快看到它。

2、采用Complexion Reduction设计语言:将标题放大,制造视觉上的冲击力,拉开页面的层级关系,这种设计方式也是国外较喜欢、较常用的一种设计方式。

3、视觉风格:国外网站的设计整体留白较多,让页面更有呼吸感,页面上几乎没有无用的装饰性元素,非常简洁,颜色使用也比较简单,不会用过多的颜色去扰乱用户,简单的设计对于教育类的行业来说,可以减少视觉疲劳,让眼睛放在有用的事物上去。



通过以上对用户画像和国外同类产品分析,总结出:我们要从多维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。是这次设计的核心思想。

1、从用户的时间分散且忙碌的特点,得到我们需要尽量优化交互逻辑,减少用户学习成本,让用户可以快速找到自己想要的东西;并且要让用户在本身就较为忙碌的情况下尽量轻松的学习,不要再给用户增加压力。

2、通过用户规划能力不够强的特点,得到我们可以给用户定制一个“学习计划”,帮助用户规划自己的学习能力,并且在学习中增加互动性,比如随堂笔记、收藏、标记这种小功能,随时给用户带来互动,让用户更有参与感。

3、从国外同类产品分析中总结出,整体国外市场的喜好是简洁、少装饰、以大面积留白来增加页面的呼吸感,采用尽量简单的卡片式的设计方式来拉开页面的层级关系。




三、设计


现在就到了设计阶段了,上面了解分析了那么多,给我们设计提供了那么多基础材料,这个时候就派上了用场。上面的最后提到说:我们要从维度考虑,以优化交互为目的让页面更有层次感,从而给用户带来轻松的体验感。接下来我就要讲述,如何在设计去运用了。


轻松-这个很重要。

如何让用户在生活和工作那么繁忙的情况下,还要努力的去学习,努力的提升自己呢?所以我们这里就采用插画的形式,插画像是动画片,让我们回到了小时候,并且融入了AI人机对话,沉浸式的体验更是可以让用户在一个轻松的氛围内完成自己的学习。


增加互动性

原有手机端的功能缺少与用户之间的互动,看视频就是看视频,做题就是做题。让用户在使用的时候不能按照自己的意愿去支配,这种感觉不好,一定要让用户有参与感,让用户占到主导性,而不是那么强硬的让用户跟着你走。所以在课程这块的设计上第一采用了全屏的方式,让用户不用返回,在当前就完成本阶段的所有的课程,增加效率。第二在原有的功能上增加“课堂笔记”、“收藏”和“学习计划”等一些小功能,让用户随时按照自己的意愿去学习,实时跟产品进行互动。



层次感的表达

教育类型的网站,页面相对来说比较干净、整洁一些,可以有效减少用户视觉疲劳,避免不必要的干扰元素出现影响用户的体验。

在本次的设计中,学习了国外同类网站的设计风格,采用卡片式的方式,将元素与标题包裹在一起,有效与其他元素进行区分,增加投影设计,让页面更加有层次感和空间感。标题上面采用了Complexion Reduction的设计语言,将标题放大,制造视觉上的冲击力,拉开元素之间的层级关系,丰富页面的设计。这也是国外网站较喜欢的一种设计方式。





四、走查


设计完成之后,切图交到开发手里之后,不能算就完成了,最后走查这一步很重要,要保证实现出来的效果跟设计稿保持一致。不然前面说的再多,设计的再炫都是白搭,实际使用的用户可不知道你前面都做了什么,他只感受他现在感受到的。

我一般的方法是用Word的方式,将有问题的页面截图并标记出来问题点,并且按照菜单进行分类。这样开发对照看起来就特别明确,只用文字不配图的表达都是耍流氓,谁知道你说的是哪个页面的哪个点。用Word进行归类最重要后面追踪也特别容易,可以很明确看到你哪块问题还没有修改,不用再反复提交。



总结一下:

一般我的设计流程就是:了解-分析-设计-走查,因为不是产品性质的,所以最后的迭代或者验证这一步骤就会不那么重要,如果是做产品型的后面的验证也会是非常重要,因为是项目型的所以这里就不多做说明。以上就是我个人在设计中的案例分析,大家有想法的可以多沟通,多交流。

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



文章来源:站酷   作者:酱油不咸

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

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

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



设计模式|合理预设:如何为用户提前设置好默认值

ui设计分享达人



What 是什么

「合理预设」是指系统提供默认选项,这些默认选项不需要用户做任何操作,可以节省用户完成表单的时间和精力。

这些默认选项来的数据源包括: 先前输入的会话数据、来自用户帐户的信息、当前位置、当前数据和时间等等。


案例 钉钉的“代办事项”设置功能,可以自动抓取到语句中的时间信息,自动帮助用户默认填写时间,减少用户的操作时长:

相关模式 :语句填空


Why 为什么

系统通过提供合理的默认信息和答案,分担了用户思考和输入信息的工作,减少时间,提高效率。

而就算预设信息不是用户想要的,也为用户提供了一个示例来说明答案应该是什么样子的。这一点也可以节约用户几秒的思考时间,或者避免输入错误的信息。


另外,合理的默认值还可以帮助用户应对一些“难题”。如果用户跳过了一块字段,那么可能是这个问题没有引起他的注意。用户可能是不理解这个问题、或是默认值的含义。输入答案,选择值,或单击按钮的动作会迫使用户有意识地面对这个问题。


比如疫情期间,大部分公司都需要做健康打卡,下图中有一些选项是直接填了默认值,但是有些就没有填。比如下图的左图中,有关于“请假未到岗”这些问题,因为没有填默认值,用户就会对这个问题有印象。然后比如“今日是否有发热症状”,“是否有咳嗽”这些,因为被系统默认填了,用户很容易就忽略过去了。

所以一些刻意希望被关注的问题,其实最好不要提供预设值,这样可以让用户感知到这个重要信息的存在,进而加深对内容的认知。



When 什么时候使用

当产品要求用户提供类似表单的信息输入(例如文本框或单选按钮),并希望减少用户填写时长时,可以使用提供默认设置。


但是当问题的答案会很敏感或是与政治相关时,最好不要提供默认值,例如密码、性别或公民身份等。最好也不要为用户擅自订阅非必要的内容信息,如“请给我发送广告邮件”等。


使用条件

· 用户需要做类似表单的信息输入操作;

· 系统希望减少用户需要做的工作;

· 系统希望确保用户填写的准确性和一致性;

· 可能用户并不知道或者不关心答案,不需要引起用户的重视;

· 问题的答案不属于敏感信息或是与政治无关。


How 如何使用

设定「合理预设」有两种普遍的用法:

1、使用一个通用的、常识性的、满足大部分用户需求的默认值,预先填写输入框;

2、可以调用用户早些时候提供给系统的信息来动态地设置默认值。例如,某个用户提供了一个中国的邮政编码,系统可以从这个编码推导出用户所在的省,甚至市和区的名称。


除此之外要注意几点应用原则:

· 使用预设的默认值不仅仅是为了防止用户留下空白的输入区域;

· 要充分的了解你的用户,默认值的设定要有绝对合理的理由 —— 否则,系统会给所有人带来额外的工作量。


Example 案例

案例一:唯品会小程序在购买服饰类选择 SKU

用户需求:购买服装时需要选择尺码


唯品会小程序在购买服饰类选择 SKU 时,每个尺码点击后会显示对应的衣服参数,用户不再需要去商品描述中的尺码表格中再找,也可以是设置好自己的身材数据,平台会默认选中适合你的尺码。

案例二:蚂蚁链实人认证表单

用户需求:需要根据表单内容填写和上传文件

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区,帮助用户默认选择概率最大的选项,不需要用户自己操作。

案例三:Photoshop 创建新文件

用户需求:创建新文件,调整画布大小

在 Photoshop CC 中创建新的图像文件时,默认情况下会从操作系统剪切板开始。这里的假设是用户刚刚创建了一个屏幕截图,并且正在编辑该图像。因此,Photoshop 在剪贴板中获取图像的宽度和高度,并使用它们来预先填充创建新文件的尺寸,这是一种节省时间的聪明方法。不用担心图像和画布会有尺寸不匹配的情况。


当用户想要调整画布大小时,原先画布的长宽尺寸会预设出现在新的画布大小里面,方便用户进一步进行尺寸调整。


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



文章来源:站酷    作者:Ant_Design

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

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

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



为什么用户访谈需要关注用户目标

ui设计分享达人

用户目标与用户调研的关系

 

  • 什么是用户目标

设计要以用户目标为导向,那用户目标是什么呢?目标不等于任务或活动。目标是对最终情况的预期,而任务和活动只是达成一个或者一组目标的中间步骤。

 

举例:从家中抵达公司为目标。可以使用任何一种通勤方式:公交车、地铁、打车、徒步、自行车等等,这些通勤方式是活动,使用并完成通勤方式的每一个步骤都是任务。

 



  • 为什么要关注用户目标

关注用户目标方便建立更具差异化的用户画像,对用户画像划分有显著作用。用户在完成目标时会决定通过哪些任务达成目标,完成任务会影响用户行为,最终设计根据用户行为做出优化,达成用户体验的提升。

 

因为用户目标不同,完成的任务也不同,具体的用户行为也会有更大的差别,设计方案也需要不断的进行优化满足不同的用户群体。

 

用户目标如同透镜,设计师必须通过目标来考虑产品的功能。产品的功能和行为必须通过任务来处理目标,通常任务越少越好。必须牢记,任务只是达到结果的手段,目标才是最终的目的。 

 

不关注用户目标,只为实现商业目标的产品或商业服务,都很难满足用户的使用体验。例如便利商店为了用户成为会员从而达成商业目标,在结账环节进行复杂引导设计,这样的设计方案使结账任务增加,因此用户行为增加而又复杂,增加完成目标的困难度,最终失去了用户体验。

 

  • 如何关注用户目标

通常我们无法直接询问一个人的目标是什么,他要么无法清楚地表述出来,要么表述得不准确,或者没有实话实说。人们完全没有回答这种自省式问题的准备。因此,设计者和研究人员需要认真地从观察到的行为、对他问题的回答、非言语暗示,以及诸如书架上的书名等,环境的暗示中重新构造目标。人物模型建模中的最关键任务之一是要找出目标,简明地表述出来: 每个目标表述成一个简单的句子。     

 

  • 用户目标的分类

在用户调研中了解用户目标是非常重要的,但是用户目标也有很多不同,可以大致分为三类:

 

1、体验目标是本能的体验产品,即用户想要从产品或商业服务中感受什么,以此为调研可以帮助我们优化产品的细节功能;

2、最终目标是用户操作产品的行为,即用户想要从产品或商业服务中做什么,以此为调研可以帮助我们优化产品或商业服务的流程体验;

3、人生目标是个人对期待,用户使用产品想要成为什么,以此为调研可以帮助我们优化产品或商业服务的价值体现。

 

下面我将举例说明三种目标如何使用。


用户目标分类

 

用下厨举例用户的体验目标、终极目标、人生目标是怎样的,在进行用户调研时需要注意哪些内容,最终可以对设计方案提供有用的价值。

 

  • 体验目标的调研

用户操作下厨房的本能反应。搜索内容、浏览信息、点击按钮等操作,这些都属于体验目标的行为。在用户调研中需要对用户使用产品的行为细节进行调研,了解每一步操作会得到怎样的反馈,通过调研结果优化产品功能体验,完成用户的体验目标。

 

  • 终极目标的调研

用户参考下厨房菜谱完成烹饪。从浏览菜谱内容、购买食材、清洗切菜、上锅烹饪、承盘食用,用户通过下厨房的菜谱完成每一步任务学习做菜。用户通过操作产品的行为,会达成一个结果。在用户调研中,需要完整的了解用户使用产品的流程,整体流程中完成每一步任务,以及每一步任务下的行为。在设计产品的时需要让用户有完整的流程体验,让用户清楚知道每一步需要做什么,顺利完成每一步任务。

 

  • 人生目标的调研

用户期望使用下厨房学习做菜成为一名厨师。用户每一次使用产品会希望完成预期结果,最终成为想要的样子。在用户调研中需要了解用户长久的预期,方便了解产品是否可以达成用户。在设计产品时,产品价值需要达成用户预期。

 

 图片来源:www.pexels.com

 

下面我将使用另一个案例,如何建立访谈提纲,来完成用户目标的调研。

 

云笔记案例

 

  • 商业背景

某设计资源网站有100万+的注册用户,该网站准备在近期开发一款云笔记软件,用户是面向广大的设计师和创意工作者,希望在6个月内完成V1.0的试测产品上线。

由于云笔记市场上的竞争对手众多,设计资源网希望能够出一款具有创新性设计或功能的云笔记,快速吸引一批用户关注和使用。

该云笔记的商业目标:用户量快速增长,增强用户黏性,并培养一批忠实的付费用户。

 

  • 产品背景

碎片化学习已经成为现代人一种常见的学习模式,如何设计一款适合碎片化学习,灵感和idea记录的云笔记,帮助设计和创意人员进行知识的及时保存,记录和整理。

 

  • 拆解背景得到设计目标

云笔记作为创意工作者的工作助手,在碎片化学习大背景下,创造性的完成创意收集,灵感记录和整理。

 

  • 分析用户目标

根据创意工作者通过使用云笔记,达成碎片化学习的目标,分为三类:

体验目标——云笔记可能的操作,记录、浏览、整理等;

终极目标——通过使用云笔记进行碎片化学习,达成阶段性学习成果;

人生目标——通过每一次阶段性学习,达成长久的预期结果。

通过拆解用户目标分类,了解用户达成目标要完成哪些任务,从而具体了解用户做出了哪些行为,用户行为便于为设计方案作出针对性的指引。

 

  • 用户访谈大纲

根据《用户体验要素》书中提到设计的顺序“战略层、范围层、结构层、框架层、表现层”,所以在用户调研同样需要符合设计顺序进行访谈“人生目标、终极目标、体验目标”。

 

了解个人特征——人生目标

个人身份认同

职业状态变化

 

碎片化学习状态——终极目标

碎片化学习习惯

碎片化学习记录

学习内容回顾

学习内容实践

 

云笔记的使用——体验目标

云笔记记录操作

整理回顾与输出

使用场景

常用功能

 

完整访谈提纲:https://shimo.im/docs/rhXhkKtyxTWgHYYC/ 

 

  • 用户分类

为了关注并区分用户目标,访谈时需要层层剥茧,对用户的学习习惯、学习场景、学习计划,学习过程中使用云笔记的各种行为、需求、偏好等进行详细的提问,由浅入深的访谈后最终了解用户学习的目标。

 

访谈过后根据设计目标选择用户终极目标进行用户群体划分,划分后的用户群体有着很大差异性的用户行为,这些用户行为将在设计方案中做出重要的指引。

 

满足终极目标即可完成初期的产品目标,经过不断的迭代设计,满足更多的终极目标即可满足人生目标,达成产品的商业目标。当然,这些需要良好的体验目标作为基石。

 

  • 设计建议

 

符合用户碎片化学习的目标。碎片化学习到云笔记的使用路径为:学习目标——浏览资料——记录材料,目前的市场流行云笔记产品,只关注浏览与记录的用户过程。云笔记设计方案需要满足两类用户群的不同的行为、偏好、痛点需求,就可以完成不同目标的用户群体,从而满足适合碎片化学习产品价值,最终完成增强用户粘性的商业目标。

 

了解行业对用户访谈的帮助

 

任何行业都有自身的发展史、环境、现状,有时我们不需要自身分类用户目标有哪些,只需根据现有行业材料,即可完成用户访谈的部分工作,达到事半功倍的效果。

 

  • 游戏玩家目标的划分

针对游戏产品与衍生产品的设计,需要对游戏玩家进行访谈了解游戏玩家目标,可以使用现有论文结果,对访谈结果进行整理。

 

在《HEARTS, CLUBS, DIAMONDS, SPADES: PLAYERS WHO SUIT MUDS》论文中,论文对游戏玩家的目标展开了深度的探索,最终将游戏玩家分为四类:杀手型、社交型、探索型、成就型。直接使用论文中的结论可以方便我们快速了解玩家游戏目标,完成用户调研。

 

杀手型玩家目标是制造麻烦。

游戏中的行为会具有十足的攻击性,对其他玩家制造麻烦。例如魔兽世界中做出对立阵营的设定,并且在剧情与游戏中给予对立阵营制造冲突,同时给予奖励,用来完成对杀手型玩家的游戏目标。

 

社交性玩家目标不在游戏本身,而是在于游戏带来的社交体验

具体行为和好朋友一起打游戏,游戏打得好不好无所谓,重要的是和朋友在一起;或者在游戏中任何网友,和网友在一起游戏,度过每一次的游戏时光。例如英雄联盟的“双排、三排、五黑”的游戏玩法。

 

成就型玩家目标是挑战,比如世界第一或通关速度挑战等。

具体行为是获取积分与奖励,从而挑战更难的游戏关卡等。所以在针对成就动机的游戏玩家,需要做出具有挑战性的游戏难度带来的荣誉感。例如游戏成绩榜单,竞赛冠军等设置。

 

探索型玩家目标是体验游戏的所有。

具体的行为会是收集道具,体验不同的游戏玩法,发现设计师留下的彩蛋。跟据这样的游戏目标,我们可以在游戏中做出相应的题样。例如收集道具、成就系统、更多的探索空间等。

 

  • 实际案例

曾经参加游戏社区优化设计比赛,在用户访谈中直接使用论文结果,使用户访谈完成极为高效,用户访谈结果极为丰满。

 

根据游戏玩家目的进行用户群体划分,在设计方案中提供满足用户目标的功能设计——杀手型用户给予游戏快速攻略,社交型玩家给予开黑交友。

 

总结

用户访谈是一种用户探索方法,为了寻求用户需求、动机、痛点等,而不是一组组冰冷的数据,用户访谈可以让设计师真正理解用户,让设计方案有血有肉。

 

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



文章来源:站酷   作者:zhiking

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

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

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



一篇文章带你深入了解“B端C化”的设计理念

ui设计分享达人

中国互联网公司的迅速发展正在推动着整个软件行业的审美革命,在C端产品市场逐渐饱和的情况下,互联网大厂正在将资本逐步转移到B端市场的广阔蓝海中。”B端C端化“的设计理念也应运而生,认为可以用C端的模式和思维来进行B端产品的设计。 


二、背景


除了刚刚有说到的资本慢慢向B端市场的蓝海转移,还有一点就是中国互联网环境的迅速发展,智能手机的大范围普及,工作人群的年轻化,使得人们已经熟练的掌握了各种软件的使用,并且在快速迭代的产品中慢慢变得挑剔、谨慎。 


并且不断优化迭代的互联网软件产品也在无形中为用户完成了底层认知的搭建,一些功能、操作、交互逻辑已经深入人心,用户也已经被教育成了"高玩"。 
所以如今一些新型B端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层 和表现层中与一些C端产品在一定程度保持了一致,这种设计理念其实也很好的解决了传统软件的复杂、门槛高、难用等痛点,很大程度降低了用户的认知成本和学习成本,把高效、简单、易用的工具带到大家的日常工作中。 


三、对B端C化的理解


对这个概念的理解我认为是:"B端产品在使用体验和视觉感受这两个方面和C端产品接近"。这是我们设计师需要特别关注的,传统的思维中,大多数设计师会认为B端是给公司内部人员或者商家使用的,只是一个管理系统,并不需要太过于精细,至于体验也是停留在“能用就行”的程度。但是在我看来不管是C端还是B端,其实它的使用对象都是“人”,应该要遵循人们对于事物的认知和一系列复杂的人体工程学操作习惯。两者都需要关注用户在使用时的体验感受,顺畅的使用流程、清晰的信息展示和高效的行为效率,以及有效的引导都能够快速的帮助用户完成目标任务。无论是C端设计还是B端设计,满足这些条件无疑可以给用户带来更好的体验。 


但是也不能以偏概全的认为C端的设计思维可以完全复用过来。B端产品的场景其实比C端产品还是要复杂的多,应该说是各有各的侧重点,思维和设计模式上不能完全照搬,下面我就先说说它们各自的不同处,再举例带你看看B端产品在哪些方面可以向C端产品借鉴学习。 


四、B端C端的不同


1.使用者不同


B端使用者多是同一个组织集体,以群体为单位进行协同。比如:老板、部门主管、员工或商户。而C端使用者相对比较单一,目标用户群体即是主要使用人群,使用目标、偏好、个性比较明确。 


2.业务不同:


B端业务大多数会存在多重维度、场景,使用场景跟业务紧密相关,同一个系统不同角色使用时的业务处理和所关注的数据信息,侧重点会有很大的不同,需要全局考虑。不同角色使用产品的流程差异大,需要不同业务上更专业的解决方案。而C端业务一般维度比较单一,业务逻辑相对固定,任务路径和展示内容比较单一。 


 3.价值主张不同:


B端注重效率、成本、管控、数据分析等。追求产品的稳定性、业务的增长性,保证产品性能和技术上的安全性。而C端注重用户的体验、使用简单、有乐趣。 


4.产品思维不同:


B端产品多数基于服务思维,工具化思维,更加理性;更多的是帮助B端用户提高效率,完成业务目标。而C端多数为产品化思维,游戏化思维,更感性,更多的是娱乐和情感的满足。 


5.产品形态不同:


B端产品注重业务的梳理,多数会用到图表、表格、模型,多数产品形态偏向更垂直行业或更专业的面板形态。而C端更注重用户的感受,会用到很多夸张的动效,炫彩的颜色。 


五、B端C化在产品中具体的表现


1.结构层 


结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面,并且要考虑他们完成事情之后能够去哪里。 
具体在B端产品的表单交付场景下可以体现出,以前的B端表单往往过于冗长,借鉴C端一些注册场景的设计,把表单拆分成3步内的行为步骤,减少用户的疲惫感提升体验。 

2.框架层


产品的框架层包括:按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的。 
具体在B端产品的列表页可以体现出,列表页中整体的按钮、文本区域的位置、搜索和筛选的布局设计其实与C端产品中的商品详情页是类似的,遵循用户的阅读顺序和视觉焦点来进行设计。 


3.表现层


视觉、听觉、(触觉)的体验设计。多体现在一些情感化的设计也被运用在了B端产品中。 



六、B端C化未来的设计方向



反观现在C端产品的一些设计风格和流行趋势,有哪些可以运用在B端产品的设计中呢? 

1.3D化


B端因为对数据的展示有较强的需求,用户在使用过程中提高效率的判断纬度也包括信息数据的获取效率,而3D的视觉在数据可视化层面有着天然的优势,可以帮助用户更快速的理解数据维度所表达的核心价值。近年来网速等硬件设施的升级也为3D化视觉带来可落地的基础,设计师也尝试在产品设计中融入更多的3D化元素。 


2.情感化


人们对传统B端产品的印象往往是觉得它们比较枯燥、呆板的,如今一些新型的B端产品的设计理念也试图在抛开用户对于产品的这种既定印象,所以很多产品在往一些娱乐化、IP化的方向尝试,并且都达到了一些比较好的效果,未来在这方面的思考和尝试只会越来越多。 


3.个性化


B端产品的同质化严重,所以B端产品也需要从一些产品定位去定制更加富有个性的品牌基因,可以让用户产生对产品的感情,达到从同类产品中能够脱颖而出的目标。 



七、总结:



不管是B端还是C端,目的都是为了解决业务场景中遇到的问题,使用对象都是人,都应该站在“人性”的角度考虑问题,有人说B端产品一般都不注重设计,C端产品的设计更能满足设计师对美的追求,我只能说它们的侧重点不同,C端更注重视觉感受,要做到在视觉表现的感性层面吸引用户,而B端其实更为复杂,需要做到底层的强大数据处理能力,产品的专业性包括交互、视觉的吸引力,这样才能从众多产品中得到用户的认可并脱颖而出。设计师还需要不断打磨细节和优化体验来吸引和留住用户。 
所以说“B端C端化”也只是在某些方面通用,但核心侧重点不同,不能以偏概全、一概而论,但可以借鉴与参考,B端产品也可以做的很精彩。 

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



文章来源:站酷    作者:腾讯ISUX

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

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

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



详解|针对某个功能,如何做竞品分析和设计优化?

seo达人


  • 案例    设计需求是:优化一款 B 端产品的「套餐售卖卡片」的原有设计:

图片

△ 某 B 端产品服务购买卡片设计(优化前)

 

你会觉得这个设计无伤大雅,但也说不上专业。于是设计师参考阿里云和华为云的服务购买卡片:

图片

△ 阿里云服务购买卡片设计

 

图片

△ 华为云服务购买卡片设计

 

经过了对信息层级视觉效果的比较与思考,设计师最终将设计稿优化为下图效果:

图片

△ 某 B 端产品服务购买卡片设计(优化后)

 

这里的 “参考” 并不是简单的照猫画虎,而是站在巨人的肩膀上,学习和精进自己的能力与认知。
今天给大家详细的介绍下,针对某个功能或元素,如何借鉴和分析竞品。有以下几个方法:
  1. 分析几乎完全相同的产品
  2. 分析不完全相同的产品
  3. 分析完全不相同的产品

 

1. 分析几乎完全相同的产品

这个方法很好理解,这类产品与你正在设计的产品在功能需求、产品形态、用户类型等方面都很较大的相似性,也是最容易直接提供解决方案的,比如上文提到的服务卡片设计优化案例。再比如,你在做一款「云盘的登录注册页面」,你可以参考「腾讯云盘」和「华为云盘」等大厂产品的登录注册页面,看看他们的页面是怎么布局的,提供了哪几种方式,增加了哪些入口和元素,如何使用颜色和字号等等。图片

△ 华为云盘登录页面

 

图片

△ 腾讯云盘登录页面

 

2. 分析不完全相同的产品

如果找不到完全相同的竞品,对于不完全相同的产品,也可以分析和借鉴,这就要分几种情况,需要你对手中的设计任务进行拆解:

(1)需求相同,但产品类型不同:比如同样是「云盘的登录注册页面」,如果找不到完全类似的竞品,你可以查找包含 B、C 端用户的其他产品的登录注册页面,取长补短。

图片

△ 雨雀文档登录页面  

 

(2)结构相同,但应用场景不同:接上面的例子,登录和注册页面本质上用户填写表单,产品收集用户信息。因此你也可以找填写手机号、用户名、密码相关的表单的设计,并不一定是登录注册页面的表单,比如你在寄送快递时填写手机号的表单也可以用作参考,也许会提供不一样的设计思路。

图片

△ 淘宝 App 可以调动系统定位,并提供几个最有可能的选项,用选择代替用户输入

 

3. 分析完全不相同的产品

如果是完全不相同的产品,那学习和分析的是这类产品的设计原则和手法。接上面的例子,这次你可能借鉴的设计就是下图中「微信通过好友申请」的页面。

你会发现在这个页面中微信将能设置的好友信息都呈现了出来,让用户先设置之后,再通过申请,这样就避免了很多用户顺手添加了好友而忘记设置信息。相比之下在设计登录注册页面,可能也可以根据产品功能和用户需求,适当将设置项前置图片好的设计,在设计思路和原则上,通常也会具备通用性。对于大多数人来说,在很多工作上都要经历这个过程:抄(指学习) -> 操(指操练) -> 超(指超越) 掌握这几个过程中的精髓,很重要。

 

原文链接:长弓小子公众号)

作者:元尧

转载请注明:学UI网》详解|针对某个功能,如何做竞品分析和设计优化?

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

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

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

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



这6种高级黑配色套路,太绝了!

seo达人



图片

黑色+白色

图片黑色是一个很强大的中性色彩,它有一种极其特殊的色彩语言,它很容易让人着迷,而且受到各领域众多设计师的关注。黑色给人传递的是一种庄重、神秘、稳重、高端、大气等等的一系列视觉感受。因此我们在用黑色作为主色调的时候,需要注意产品性格特征,想传递什么样的感受给用户。图片
图片
在杂志化版式设计中,黑色和白色搭配出现频率也是较高,毕竟黑色本身就有一种高级神秘感。当它与白色搭配,更体现极致简约性格。
图片
图片
图片
图片

图片

黑色+蓝色

图片

蓝黑搭配也是最好看和运用较多的颜色,它们之间组合彰显沉稳大气。黑色本身更沉稳,配上蓝色整体画面感彰显高级时尚。

图片

图片

蓝黑搭配一般在科技类产品较多出现,因为蓝色本身略带一些科技属性,黑色本身会有一些沉闷,且蓝色也不像黄色那样高亮耀眼,因此在选择蓝色上适当提升一些明度。

图片

图片

图片

图片

图片

图片

黑色+橙色

图片

橙色是一种有性格的颜色,当它遇上黑色,在画面彰显活力与生机,与蓝色不同的是,橙色更醒目与热情,更有一丝腔调,内敛和张扬得到有效平衡。

图片

图片

活力橙色作为暖色调,它不像红色那样更霸气刺激,更纯粹的多了些许阳光的温暖,在不同层次明暗橙的对比演绎出柔和的色彩变幻以及熠熠闪光的细微差别。

图片

图片

图片

黑色+绿色

图片

绿色在设计圈可谓说是一直都挺火,绿色与黑色搭配可以中和黑色的沉闷,还有一种清新透亮的感觉,如果是和亮绿搭配,更有一种酷酷的潮流感。

图片

图片

图片

图片

图片

图片

图片

黑色+黄色

图片

黑黄搭配,极视觉冲击力,既能给人活泼奔放的味道,同时又有着一丝内敛与沉稳。很多设计中经常看到黄黑组合,黄色在黑色的存托下,显得格外时尚。

图片

图片

图片

图片

图片

黑色+红色

图片

红色与黑色的配搭,在设计界也是运用较多的经典颜色组合。黑色的神秘而高级,略带一丝沉重,配上热情奔放的红色,缔造了一种无与伦比的时尚,成就了一种永恒的经典。

图片

图片

图片

在使用红黑搭配时,注意红色使用占比,以及饱和度,避免过于高亮的红色。一般在黑红搭配过程中,其实都少不了白色在其中。

图片

图片

原文地址:功夫UX(公众号)
作者:功夫UX
转载请注明:学UI网》这6种高级黑配色套路,太绝了

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

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

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

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


echarts-x轴 y轴配置(字体颜色,线的颜色,分割线,y周单位颜色)

前端达人


  1. //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
  2. var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
  3. var option = {
  4. tooltip: {
  5. trigger: 'axis',
  6. axisPointer: {
  7. type: 'shadow'
  8. }
  9. },
  10. legend: {
  11. data: ['计划劳务资源', "实际劳务资源"],
  12. //align: 'left',
  13. right: 10,
  14. textStyle: {
  15. color: "#fff"
  16. },
  17. itemWidth: 14,
  18. itemHeight: 10,
  19. itemGap: 13,
  20. },
  21. grid: {
  22. left: '3%',
  23. right: '4%',
  24. bottom: '3%',
  25. containLabel: true
  26. },
  27. xAxis: [{
  28. type: 'category',
  29. data: ['1月','2月','3月', '4月'],
  30. axisLine: {/x轴线的颜色以及宽度
  31. show: true,
  32. lineStyle: {
  33. color: "rgba(219,225,255,1)",
  34. width: 0,
  35. type: "solid"
  36. }
  37. },
  38. axisTick: {
  39. show: false,
  40. },
  41. axisLabel: {//x轴文字的配置
  42. show: true,
  43. textStyle: {
  44. color: "rgba(219,225,255,1)",
  45. }
  46. },
  47. splitLine: {//分割线配置
  48. show:false,
  49. lineStyle: {
  50. color: "rgba(219,225,255,1)",
  51. }
  52. }
  53. }],
  54. yAxis: [{
  55. type: 'value',
  56. name:"单位:人",//y轴上方的单位
  57. nameTextStyle:{//y轴上方单位的颜色
  58. color:'#151515'
  59. },
  60. axisLabel: {//y轴文字的配置
  61. textStyle: {
  62. color: "rgba(219,225,255,1)",
  63. margin: 15
  64. },
  65. // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
  66. },
  67. axisTick: {
  68. show: false,
  69. },
  70. axisLine: {//y轴线的颜色以及宽度
  71. show: false,
  72. lineStyle: {
  73. color: "rgba(219,225,255,1)",
  74. width: 1,
  75. type: "solid"
  76. },
  77. },
  78. splitLine: {//分割线配置
  79. show:false,
  80. lineStyle: {
  81. color: "rgba(219,225,255,1)",
  82. }
  83. }
  84. }],
  85. series: [{
  86. name: '计划劳务资源',
  87. type: 'bar',
  88. data: [38,38,42,48],
  89. barWidth: 10, //柱子宽度
  90. barGap: .5, //柱子之间间距
  91. itemStyle: {
  92. normal: {
  93. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  94. offset: 0,
  95. color: 'rgba(0, 153, 239, 0.8)'
  96. }, {
  97. offset: 1,
  98. color: 'rgba(66, 187, 255, 1)'
  99. }]),
  100. opacity: 1,
  101. }
  102. }
  103. }, {
  104. name: '实际劳务资源',
  105. type: 'bar',
  106. data: [40, 30, 42, 50],
  107. barWidth: 10,
  108. barGap: .5,
  109. itemStyle: {
  110. normal: {
  111. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  112. offset: 0,
  113. color: 'rgba(0, 242, 159, 1)'
  114. }, {
  115. offset: 1,
  116. color: 'rgba(76, 240, 254, 1)'
  117. }]),
  118. opacity: 1,
  119. }
  120. }
  121. }]
  122. };
  123. myChart.setOption(option);
  124. window.addEventListener("resize", () => {
  125. myChart.resize();
  126. });

 

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

文章来源:csdn + 博客园

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

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


日历

链接

个人资料

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

存档