首页

情感化设计心理学:用户心理定律及优秀案例分析

鹤鹤

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined

最后想说,设计师的价值不仅仅在视觉,好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野,多思多想,掌握钥匙,开启用户不同的心门。

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

文章来源:站酷  作者:唐小葱

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

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

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


交互设计中排行榜设计详解

鹤鹤

“今天吃什么啊?”

“不知道啊,看看大众点评,哪家店比较靠前”

“一会去看什么电影?”

“我看豆瓣上,这部片子评分特别高,我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时,会发现当你面对的选择越多时却越不知道该如何做决定,或者当下做了决定后会一直思考做的这个决定是不是最好的,这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式,帮助用户做决定的同时,引导用户购买目标产品,极大的降低了用户的选择成本,其中排行榜就是平台的常用套路。用户的选择成本是什么?排行榜为什么能够帮助用户降低选择成本?如果排行榜仅仅是用来降低用户的选择成本,为什么所有商家都对排行榜趋之若鹜?下面带你了解为什么人人都爱排行榜,及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配


排行榜的本质是一个没有感情的信息筛选机制,将所有相关的同类事物之间通过比较,从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可,比如我们买衣服会首选淘宝,电子类产品会首选京东,看电影会看豆瓣评分,这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选,由于锚定效应使得用户降低自己的选择成本,可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应,也会对上榜主体产生强烈的品牌认可,为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签,比如:B站的百大up主,各个平台排行榜的销量冠军、朝阳地区必吃榜第一名,那么这一切背后的原理是什么?


一个完整的排行榜是由平台、上榜主体、用户三大组成部分,俗话说屁股决定脑袋,不同的定位决定了排行对三大组成部分不同的作用,当然背后的原理也不尽相同。


1.选择类排行榜-降低用户选择成本

在没有各种应用前,当我们决定购买什么东西或去哪家消费时,前期需要花费大量的人力、物力去搜集相关的信息进行整理集合对比集合信息后才能做出决定,也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后,做出择优决策阶段发生的成本或费用都是用户付出的选择成本(前两个阶段发生的成本是交易费用,而不是选择成本)。在备选集的建立过程中,包含的选择越多,用户选择的难度就越大选择成本就会越高

选择性排行榜在备选集建立完成后,利用沉锚效应在用户心理建立潜意识的目标参照,帮助用户完成择优决策,降低用户的选择成本。(另一方面平台在帮助用户降低选择成本的同时,也影响着用户的最终选择,在接下来的平台侧方面会有详细的分析)。

比如说:当我需要买个耳机时,如果在没有各大应用的前提下,我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解,收集信息建立备选集,但由于京东在电子设备购物方面的权威性,我会优先查看京东的耳机类排行榜,也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立,而用户出于对平台权威性的信任,根据平台给出的维度参照、品牌参照、价格、标签参照等信息,最终快速的完成自己的选择。整个过程就是用户在对锚的寻找,以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中,当个人的生理需求和安全需求被满足时,与他人建立情感联系或关系成为人们最强烈的需求,即社交需求。社交又分为:为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如:QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通沟通的本质则是信息的流通,但当双方都没有可以沟通的信息时则社交不成立,而类似:微博热搜、今日头条、澎湃新闻等信息类排行榜,则给有社交需求的用户提供了可以展开话题相通的谈资

选择类排行榜中,提到的从众心理(又称羊群效应),是指人类由于对信息压力规范压力,会希望融入到群体中寻求安全感的特性,即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感,会热衷于浏览此类排行榜来获取实时信息,融入群体生活。每天早上,在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件,在上班电梯或工作间隙讨论各自掌握的信息,及对事件的见解,甚至在与他人有相同的见解或之后,会对对方产生莫名的亲近感等等,这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜,不知道你有没有参与到其中,并把这些报告的截图分享到自己的朋友圈!在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序,人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外,还需要清楚自身在大数据下的自我确认,通过各种各样自我测试类榜单,判断自身的能力、情绪、价值等等,来达到自我认同,否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台,人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程,我们想要呈现给观众怎样的形象,需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己,为了维持自身的平衡防止崩溃,人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己,让用户更加清楚的认知自己,同时通过分享,满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜,如果有小伙伴想到其他类型欢迎在评论区提出,大家一起参与讨论。

无论哪种排行榜,用户信任的基础都来自对平台的信任,那么用户为什么信任平台?排行榜对平台意味着什么?背后原理是什么?下面我们来讨论排行中平台的影响及背后的原因。


对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性,选择成本是品牌经济学的核心,而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起,我们对世界的认识来自我们的父母或老师,而这些教导我们什么是对、什么是错的长辈或老师,对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家,比如:医生、律师、教授等,认为处于权威地位的人在某一领域相对普通用户的判断更可靠,可以帮助普通用户节省研究这一领域问题的工作,做出更轻松的决定虽然不一定是正确的

搜索我们会第一时间想到百度,需要观看影视、书籍会想到豆瓣,想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性,形成品牌号召力,推动着用户做出需求决策。另一方面排行榜中也会说明数据来源,比如京东会在排行榜页面有明确的榜单说明,豆瓣根据平台数据更新,汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明,减少用户做出决定中的思考、猜测,获得用户的信任,增强平台的权威性。那对于平台来说权威性的建立意味着什么?

2.平台权威性—平台侧

  • 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力,在减轻用户的决策压力的同时,也影响着用户做出平台所需的决策方向

  • 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度,加大平台承载内容的传播范围。比如,每年苹果发布会都会带来范围极大的热度讨论,而app store内的热门推荐自带话题度和讨论热度

  • 输出口优化

排行榜作为内容输出口,在平台权威性的背书下,产品优化自身的价值,而平台也可以通过排行榜优化自身平台价值。

  • 平台盈利

平台权威性下,可以通过多种方式达到盈利,比如苹果app store应用商店内的付费应用,百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后,部分平台开始利用排行榜进行商业变现,比如百度、58的竞价排名等,现在大部分应用会使用明显的方式告知用户,防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”,淘宝、小红书推荐猜你喜欢的“广告”。


上榜主体作为整个排行榜的内容中心,由于排行榜自带的竞争机制、筛选机制,使得上榜用户会很乐于分享出去,比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度,以及各种潜在资源,比如:流量、资源、人脉、某一领域影响力、平台背书等等,这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感,比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户,为平台带来更多的新用户,加强平台权威性,形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量,带走平台用户的情况。比如去年和热闹的“巫师财经推出b站,签约西瓜视频”,各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果,很重要的充分条件就是相同需求好友基数足够大,这样才能构成排行榜设计成功的必要条件。

  • 同系同门资源导流

对于已有成功产品的公司,可以借助平台相互间的导流完成初试资源的搭建,比如:微信初期借助QQ好友流量,带来好友初期的爆发;抖音最初的活跃借助今日头条的流量输入。

  • 自建用户体系

不断推送已关注好友的信息流,当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交,你要先有这个人联系方式才能要求好友,关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等,不断社区建设推送动态信息流和好友卡片推荐。

  • 伪造

当应用建立初期,没有很多的资源和内容时,需要平台自行填充内容,使得排行榜信息量大,增加用户活跃,才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等,或是平台pgc发布推送的内容。


面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化,根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成,其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现,多出现在以UGC或文字信息为核心的产品,以内容信息为主,常见以信息热度为主要功能的资讯、新闻类应用。比如:知乎、今日头条、36氪。

知乎热榜内容完全展开;36氪分为话题榜、人气榜,话题榜仅展示前5条,人气榜展示10条,仅在前5条有名次图标,在36氪热榜的中部还会出现收藏榜,综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”,点击“查看更多”后,展开“头条热榜”及“今日关注”“北京热榜”,整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标,优先级较高,常见自带推荐属性,能够帮助用户快速选择,减少选择成本,比较依赖榜单的应用。比如:豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多,在图标点击开后,在当前页面平铺不同维度榜单类型,用户进行点击跳转;腾讯动漫相对榜单类型较少,在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时,可能会希望能够横向对比同类商品,才能最终决定购买那件商品。常见于电商类应用,比如:京东、拼多多、得物等。点击后进入不同的榜单页面,获取更多产品信息进行筛选。(淘宝的商品详情页没有排行榜,但在首页却存在隐形排行榜,在隐形排行榜模块会有详细说明)。

4.搜索-筛选(无明确搜索目的)

当用户没有明确搜索目的时,搜索框的下方,平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户,比如:微博热搜、淘宝热卖、抖音热榜等。


没有明显排名及规则,但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前,位置越靠前,在用户心目中的默认位置越靠前,比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现,这时候就需要平台人工有目的的推荐一些内容,不同于“猜你喜欢”建立在用户的行为数据下,编辑推荐更多的平台希望用户看到的内容,一方面作为平台内容的输出口引导用户,另一方面内容是平台自己发布内容,也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期,并且存在大量的平台用户使用数据,“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性,各大应用平台适用性强,一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜,这些其实是用户自己确定了解自己,且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓,清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》,那是我最早关于排行榜的印象,里面会有各种最佳动作片总结、最佳男配角总结等等,以香港电影偏多,是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐,这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜,从众多选择中选择出部分答案,给出理由,而用户只需在已被筛选过的内容中进行决定,节省选择成本,比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定,但可以迎合用户对确定性需求的各种盘点性质的排行榜,比如抖音的TOP榜哥就是盘点各种内容,人物。

5.搜索-筛选(有明确搜索目的)

相比其他排行榜,筛选后的内容已经体现了用户的具体需求,高效明确的给用户提供选项,引导用户快速选择。


排行榜一般由必需的榜单头部、上榜主体,及非必需的榜单规则、更新信息构成;而上榜主体由必需的主体信息排序,以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点,引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时,通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出,增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况,为了平台的统一性、降低后期的维护成本,一般会使用可复用的榜单头部,如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配,但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案;马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式,通过更换文案底图达到适用不同主题;京东就相对比较简单,只是更换标题的文案达到多主题适配。


排行榜上榜主体由于不同的场景业务需求,一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式,其中主体信息及排序为排行榜必须信息,而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容(或标题)加排名的形式出现,常见以信息为主的排行榜,比如微博、知乎、今日头条等以信息为主要关注点的应用,或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准,因此会在标题及排位外,增加各种突出热度信息的表现形式,如关注热度人数,或是“热”“新”“爆”等等表示热度的标签,如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化

2.图文结合形式

相对于纯文字形式,图文结合的排行榜因为图片信息的增加,使整个榜单主体占居更多的空间也可以展示更多的产品信息,辅助用户进行选择。

  • 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式,延续了用户阅读新闻类资讯的习惯;而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图,因此沿用至线上使用的也是竖版图片形式;而京东、大众点评、马蜂窝则使用方版的图片形式,大概是因为产品的多样性需要考虑多种图片的适配问题。(视频、游戏类由于使用场景大部分采用横版图片形式;但由于游戏封面、宣传海报也会有竖版的形式,比如:游民星空、小黑盒)。

  • 左文右图VS左图右文

每当设计图文结合的部分,首先要考虑到底是采用左图右文还是左文右图的形式呢?可能很多人会说这两种形式没有什么大的区别啊,有什么可纠结的!或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的,因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式,包括:古腾堡图(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中产品列表页中最常使用的就是F型布局模式,F型布局是雅各布·尼尔森(Jacob Nielsen)在公司进行眼动追踪研究后首次提出的。与其他模式相同的是,眼睛从上/左,水平移动到上/右,然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后,向右扫动的次数会越来越少,并且会随着向下移动,眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面,即自左向右自上而下的阅读模式,越向下信息获取效率会越低

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式,比如:腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台,很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜,平台用户的注意力大部分集中在第一名,而领奖台的形式模仿现实生活中的奖励形式和仪式感,将整个排行榜的关注范围从第一名扩展至3名,另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系,增加了第一名的高度。(目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到)


榜单规则是排行榜规则的描述,是平台权威性的体现。榜单规则有些平台本身具有数据库,会有相关的平台数据支持如京东;而汽车之家则依靠“汽车工业协会”外部的数据支持,增加平台的权威性及榜单的可信度;

信息更新一般存在在榜单头部和上榜主体的中间,有些是固定时间更新,也有类似微博热搜是实时更新的模式,而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。


排行榜的成功看似是人们对于选择困难、信息获取的解决方案,但归根到底因为人们对于不确定性的惧怕,无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式,结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同,排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑,以及用户操作行为背后的思考及心理效应,提出合理的设计,帮助用户了解产品功能,满足用户需求。


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

文章来源:站酷  作者:9号自习室
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



如何选择确定B端后台设计风格及细节优化

鹤鹤

如何选择合适的B端设计风格?

1.B端后台分类:

根据服务对象划分:

一类支持有C端前台,支持前台产品管理各种资源。第二类服务企业,提高企业工作效率和营收。


根据后台功能:

1.监控运营:时效性强,旨在实时反馈异常情况,快速判断下达命令,回复信息、多用于数据控制中心。

2.数据分析:数据结果的对比和分析趋势,时效性要求并不高,了解整体和各部分数据水平,助力决策。

3.记录管理类:主要用于人员、设备、资产等增删改查,文本信息容量大,频繁便捷的操作。

4.系统配置:权限配置、设备功能配置,操作为主。


2.后台深浅两大风格分类:

浅色:适合文本信息多密集的表单列表类后台,浅色更符合人眼白底黑字的阅读习惯,浏览速度更快,信息获取效率更高。


深色:图像信息密集的后台适合图片、数据可视化图表等;深色对彩色的图像信息衬托更强。信息获取速度较慢,长时间可能视疲劳。


3.作者常向产品方提供的风格参考

较常见

  1. 经典商务风(导航深、内容浅)——专业、高效、成熟、可信赖(对照深色西装人物形象)

    优点:市面最常见的风格,普世性高,大多数用户可快速接受,层次分明

    缺点:视觉缺乏记忆点

 2.轻量科技感(导航浅、内容浅)——简洁、明快、轻量、年轻(对照白衬衫打领带男性)

      优点:视觉清新明快更年轻化更轻量,对其他文本及图形展示包容性高,就像A4白纸一样容器存在感弱

      缺点:纯白色导航+页面层次略暧昧。

 3.蓝色科技风(导航中、内容中)

      适合:适合科技属性强的产品界面,图像图形展示

      缺点:对其他色彩信息有干扰,持续性长时间观看易视觉疲劳

 4.暗黑科技风(导航深、内容深)

      优点:对色彩表现力强

      缺点:密集文本信息获取速度会下降,持续性长时间观看易视觉疲劳



4.精准选择风格时可以进一步的考虑:

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。


2.产品想要传达的气质:

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨


3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平,审美水平考量(可能包含多种角色,选取1.2个核心角色为参考)带入目标用户工作场景及爱用物常用物品味,去判断基调。

如主要用户群:40+男性用户,本科以上受教育水平,使用windows电脑进行专业管理操作,审美倾向明确内敛。

如主要用户群:20-40岁,男女比例约6:4;大专;操作水平参差


4.使用场景及高频的操作。

例如:最常使用数据分析管理,需要快速阅览多条数据,对数据进行比对,更适合浅色风格展示表单数据。


5.判断独立的平台是否为独立开发

独立开发的,可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。


5.如何让后台设计更具特色:



  1. 重点色的使用



“731配色比例”70%的面板色,30%的导航面板色,10%的强调色。(这里的用色比例可以根据内容具体再去调节只是大概比例)品牌色或重点色:强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标,值得我们花时间去统一设计打磨,调整圆角粗细疏密,符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的,好的设计在细节处也要动人。

B端工具类图标识别性第一,美观性第二。B端导航图标更多是在基础造型上打磨,不需要加花里胡哨的渐变、投影,导航图标一般在24px-16px大小,太复杂反而看不清。在区分状态的时候可以考虑加点品牌色


3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言,辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度,具有引导性。让乏味的工作出现一些共情小彩蛋,有趣的插图动画可以缓解等待的焦虑。



4.登录注册页

纯色背景卡片式:简单大方更聚焦登录操作

插画背景:场景化展示产品的功能及亮点,让用户更有心理预期

几何图形背景:最后和品牌图形相关,加深用户对产品的品牌印象。

照片背景:相关场景或产品类型,具象图片信息更直观


5.圆角的大小

不同大小的圆角传达产品不同的气质,大圆角亲和、小圆角精致、中等圆角大众中庸。



6.优化信息层级

优化信息层级,区分信息主次可以使阅读更快,操作更快,界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作,强化它!并弱化辅助信息;

判断一个模块里那些是重要信息,强化它!



6.新人需要避免的雷点:

  1. 追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板,满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多,反而干扰信息获取效率。


2.反常规用户习惯的操作。尊重用户习惯,不要为了个性化去尝试改变,不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维,曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。


3.数量多,动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打扰。之前看过一个反面例子后台,在每一步操作后都出现大的场景动效鼓励完成,如果作为一个长期使用的工作者,我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。


4.新人建议多看Antdesign和Element等成熟的组件,创新类组件样式,最好和和开发商量是否能够实现。


5.在确定主要风格及2-5张主要页面后,就应该着手基础规范(色彩字体等,不然后面越做越乱)。


6.一段时间一个审美,同一界面中的元素风格不统一。


7.避免大面积使用高饱和高明度的色彩,及暧昧含糊的临近色彩。长时间使用眼睛会累,产生不耐烦焦躁的负面情绪。

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

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

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

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


研究了上百套图标,总监却告诉我图标要这样画!

seo达人



01.图标是什么 

图片

要做好图标,首先我们要知道图标是什么?在一般认知里,图标可以定义为一种图形化的符号或标识,用于帮助我们理解某些复杂功能或操作,尤其在数字化领域里,可视化的图形符号,更利于高效的展示信息和引导人机操作交互。也有人称之为icon或eikan。

a

1.图标的发展史

图片

图标的历史可以上溯到人类文明发源伊始,最早的象形文字,岩洞壁画等都可以算作图标的一种,为我们后代研究人类文明产生了珍贵的历史意义。但今天我们研究的图标主要以计算机系统发明为分界线,看看这短短几十年间,图标是如何演化的。

图片

 80年代的初期图标还是黑白单色

图片

 90年代慢慢多了些色彩,形状也更丰富

图片

 到2000年后,随着显示技术的发展,图标也越来越形象

图片

 图为iOS1-8图标变化

从最早的Xerox Sta系统到最新的Mac os10,再到现在人手一台的移动智能机,每个阶段都拥有其独特的图标风格,2010年已经到了智能移动时代,拿最知名的iOS系统每个阶段升级,图标的变化来看,也历经了初期的拟物-扁平-微质感的好几个阶段。

图标作为UI必不可少的部分,能够使界面更加精致,今天也分享给大家一些大公司的设计规范,其中包括很多系统的图标规范和定义,帮助大家更好地参考和学习。

图片

w

02.  图标的分类 

图标因其良好的辨识性和无障碍沟通特性,在各种场景下被广泛应用,同样,因使用场景的不同,图标所代表的意义也不一样。

 

1.应用图标

图片

 iOS14桌面应用图标

a

应用图标指的是我们设备界面上的应用入口,通常具有较强的品牌特性,可能与logo一致或与其核心功能一致, 如instagram 就是一个简化的相机正视图,亚马逊则是一个购物车形象,国内也有不少产品直接使用了能够代表产品的文字,需要注意的是,界面图标必须遵循对应系统下的尺寸规范。

图片

 华为EMUI 10应用图标

d

2.功能图标

与应用图标不同的是,它主要作为界面中的功能入口,一般为简洁易辨识的符号,根据不同产品调性,图标风格也可以多种多样,并且不强制必须为标准形状,异形图标能让界面更为生动,整体风格的发挥也有了更多空间。

图片

d

3.辅助图标

辅助性图标通常存在于有较多长文字时,搭配作为辅助说明,在UI中,可能还具备一定情感化的作用,在提升用户接收信息效率的同时安抚用户情绪;所以整体可能需要具备更多细节,作为画面补充的一部分。

图片

 如:缺省图标

s

4.与logo的区别

虽然这两者特性极为相似,都是图形化的符号,但logo是为整体品牌服务的,具备其独一无二的专利特性,甚至可以是IP形象或文字;两者的关系可以理解为父子。

图片

 图中的图标就很好继承了logo的特征和风格

图片

 但有的也只是普通的界面辅助,风格和样式并不一致

a

03. 图标的绘制 

能够绘制出高质量的图标是每个UI设计师必备的能力,本次我们以功能图标为例,为大家展示具体的几个绘制步骤和要点,希望帮大家在细节上避开影响图 标精致度的一些小细节。

d

第一步:建立图标网格

图片

功能图标因形态结构各异,难免存在尺寸不一的情况,必须考虑其整体视觉的协调一致,最好的办法就是建立图标网格,也可以称为图标盒子,当图标形态分别为长、方、圆时,有一个合理的比例限制。

图片

 将常见图标形态约束在图标盒子内

当然,网格不是绝对的,要学会灵活运用,当与个别图标形态无法完匹配时,也不必拘泥,一切以达到视觉和谐为首要。我通常会在图标网格外围预留一个安全区域,可以规避切图出现不完整的情况。

a

第二步:具象功能

有了网格,第二步则需要我们根据功能,找到与之对应的实物形象;如笔记本是记录,电话是通话,时钟代表时间,日历代表日期等等。

图片

这些功能相对比较容易找到现实中的实物,如果是比较抽象的功能呢?就需要我们发散思维,找与之相近含义的事物。如隐私功能,隐私是没有实物的,但是我们可以通过“隐私”这个词延伸:不公开的、隐藏的、锁起来的、被保护的,继续根据这些词延展:就可能是密码、盾、锁、遮眼等等。

图片

时刻记住一点:用大众都能理解的物体形象去表达。如果用户看到某个图标过于复杂,需要反复思考它代表的含义,也无法预测点击后的结果,那这个图标就失去了提效的作用。

d

第三步:简化结构

有了功能的具体形象,下一步就是思考如何让图标变得更简洁易辨识。

图片

 毕加索《公牛》

图片

毕加索创作《公牛》时,从初稿到最终成品历经了11个版本,最后只用寥寥几条线来勾勒,但我们依然能一眼认出牛的形态。绘制图标也一样,需要我们思考如何省略无用细节,化繁为简,提取他们的主要特征。

f

第四步:善用布尔运算

有了简化的图标形象,我们接下去应该思考如何让图标变得更为规范耐看。

图片

 如桃心图标,就是两个简单圆角矩形组合而成

图片

 桃心图标,也可以做的更圆润

图片

 不同组合下的布尔运算,图标形态特征也会不一样

这一步的诀窍就是尽可能使用基础图形去组合拼贴,这样做出来的图标,尤其在适配不同尺寸大小切图时不易拉伸变形。

f

第五步:处理细节

统一性

图片

 风格:线性、面性统一

图片

 断点细节一致:平角、圆角

图片

 图标气质一致:是圆润还是尖锐硬朗

随着功能界面的不断复杂化,大家早已不满足于同一产品或同个界面中单一的使用面性或线性图标,而是搭配使用便于层级划分,故而这里只考虑在同一层级下图标的统一性。

视觉平衡

图片

如图,三角形置于中间位置时,视觉重量会偏向左边,在这个基础上,我们就需要做出适当调整,以达到视觉重量平衡。

一致的视角

图片

当你想让自己的图标变得更加出彩而采用了区别于正视图的结构,那也一定要确保至少在同等层级下,这些图标视角是一致的。

a

第六步:做出差异化

融入品牌DNA

图片

 韩国购物App 11 street,就很好的融合了品牌logo的箭头符号

功能图标因简洁通俗,比较容易出现市场同质化严重的现象,故而很多App选择在图标中融入品牌基因,不仅做出差异性,还能提升品牌调性。

跟随趋势创新

图片

图片

通过对图标风格质感的创新表达,让人眼前一亮。这种方式更多需要你了解当下的流行趋势和技法,根据产品的风格调性,对图标进行量身打造。

图标微动效

图片

随着5G时代来临,微动效也早就出现在了大众视野,基于图标的微动效表达,能让用户更快注意到某个功能并去点击它,如果你的动效还恰好有趣美观,更能让用户感到愉悦。比较常见的loading和tab切换都让我们有了很充足的发挥空间。

d

第七步:完善图标库

通常一个产品的功能图标会多达几十甚至几百个,如何保证这些图标的统一性需要提前去规划。绘制的最后一步,就是在完成一部分图标后,及时排列比对,确保整体视觉效果的统一;有条件的可以生成图标库,便于后续的团队协作。

图片

 Apple发布的SF Symbols中图标,就划分了9种宽度和3个比例尺寸

有了图标库后,协作设计师做到共用功能时可以直接调用;极大提高自己和团队的效率,并保持整体规范的一致。

a

04.最后 

图标绘制看似简单,要做好却并不容易;UI处处充满细节,想要自己的界面更加精致,就不要忽略每一个可以提升的点。希望今天的这篇文章能够帮到你。

最后给大家分享一些大公司的设计规范,其中包括很多系统的图标规范和定义,帮助大家更好地参考和学习,需要的话可以点个“在看”,添加叮当猫回复“图标”领取,已有叮当猫的无需重复添加。

图片



s

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

作者:sky

转载请注明:学UI网》研究了上百套图标,总监却告诉我图标要这样画!

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

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

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

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


作品集这样展示,秒出效果

seo达人

01. 3D素材 

图片

图片

图片

@CANAAN,作品集封面3D素材

 s

02. 样机素材 

图片

图片

图片

@嗡嗡嗡起,高质量的手持设备样机

f

03. 平面素材 

图片

图片

图片

@南风知我意,潮流高级全息海报模板31款

 g

04. 样机素材 

图片

图片

图片

@是莹莹啊,苹果13样机+高端场景样机合集+iPhone13样机

w

05. 3D素材 

图片

图片

图片

@落微,UI素材丨3d丨手势丨psd

w

06. 3D素材 

图片

图片

图片

@阿轩,11个3D图标+png+3个拍摄角度


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

作者:sky

转载请注明:学UI网》作品集这样展示,秒出效果

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

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

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

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



CRM系统:线索的获取和分配

涛涛

CRM代表了企业对客户的管理理念和运营方法,而对客户生命周期的管理也是大家非常关心的话题。本篇文章里,作者分别从客户画像、线索获取以及线索分配三个方面分析了售前的最重要步骤,一起来看看吧。


CRM代表了企业对客户的管理理念和运营方法,所以谈到CRM大家最关心的话题也就是对客户整个生命周期的管理,而在售前部分最重要的就是:线索的获取和分配。

一、客户画像

说到CRM客户画像是绕不过去的一个名词,客户画像是指公司客户的共性关键特征,如下图所示:

CRM系统:线索的获取和分配

vipkid为例,他的主要客户画像就是:一二线城市且孩子年龄为4—12岁区间的家长。

客户画像使用方法:

1)根据客户画像寻找渠道和方法获取销售线索

比如一家做英语培训的机构就可以联合钢琴培训机构联合做公开课,两家公司的客户画像相近,就可以互通客户达到共赢。

2)根据客户画像快速筛选线索,快速定位高质量线索

比如vipkid的电话销售人员了解到家长虽然有意愿让孩子学习英语,但是孩子年龄为2岁,没有达到客户画像的标准,则可以尽早放弃沟通下一个客户。

二、线索的获取

线索的获取不外乎两个部门:销售和市场。

1. 地推团队

一般TO B的公司的获客主要渠道为地推团队例如:

  • 2C流量+2B广告变现模式 如58同城房产业务、安居客
  • 多边平台+佣金抽成模式 如美团团购外卖业务、大众点评团购业务

这种公司会在每个城市设立分公司,培养大量的地推销售人员,并划分区域给到每个销售人员负责,销售人员就是通过扫街的方式获取及维护自己的客户。

2. 客户转介绍

一般TO C的公司的高质量获客渠道为客户转介绍例如:

  • 2C产供销模式 如VIPKID、火花思维、美术宝等在线教育公司
  • 2C免费+增值模式 如游戏软件王者荣耀、交友软件网易花田

这些公司会动用电销人员成单激励、用户转介绍活动激励等方式来促使客户完成转介绍行为如转发朋友圈、拉新注册、拉新购买等来获得转介绍线索。

3. 广告流量

通过投放广告(实体广告牌广告、电视广告、搜索网站关键词投放、大V软文)吸引用户进入到营销活动页或官网进行注册,从而收集到的线索。

4. 自媒体

通过内容产出如:

客户成功案例、系列录播课程、直播课程、行业解决方案、电子书、行业白皮书,发布到抖音、快手、公众号、头条、知乎、微博等平台上,获得客户认可并吸引客户持续关注。

5. 渠道商资源采买

从渠道商获取购买,但数据准确度往往很低,需要搭建数据清洗团队,清洗数据(确认客户信息正确并补全信息、确认客户需求存在)之后才能算线索并提供给到销售。

6. 商业合作&资源互换

通过企业与企业间的客户资源的互换,实现双方的共赢;建议找目标客户群重叠但又没有竞争的企业,以最小成本甚至0成本的方式合作,互补资源,实现双赢。

7. 市场活动

如行业会议、论坛峰会、交流活动、线下公开课、展会、促销活动等。

三、线索分配

线索分配是和销售模式息息相关的,主要的销售模式有三种:电话销售、地面销售、社群销售。

1. 电话销售

电话销售依赖于CRM系统分配leads,所以电销CRM可以从新leads转化到老客户续费等环节,做到对于销售的标准化精细化管理。

1)新分leads

首次分配:

业务增长时期分配策略模型:

这种分配模型是粗放式分配,优质和低值的leads混合随机分配给不同能力的销售,可能会有一些高质量的leads分配给低能力销售导致转化失败,但是也是因为低转化的销售有能接触到高质量leads的机会带来了工作的动力。

策略模型方案:

  • 转介绍leads分原CC
  • 优质leads按标分配CC
  • 一般质量leads均分CC
  • 支持管理者手动搬动leads

业务增速降缓&收缩时期分配模型:

业务增速降缓&收缩时期首要考虑的是降本提效,所以首要的会思考如果用更少的人干更多的事情、或是同样多的线索如何能转化更多,所以使用的策略会更激进一些,可能会导致转化低的销售长时间无法接触到高质量例子,工作积极性降低,从而流失速度增加。

策略模型方案:

  • 建立leads打分模型:按照司龄、转化分层
  • 建立销售能力打分模型:按照转化对各个渠道分层
  • 尝试将好的leads分配给好的销售
  • 全部改为系统自动分配

二次分配 :

  • 二次分配是一种对于销售的惩罚手段,主要出现在以下两种场景:
  • 超过规定时间线索没转化:掉落公海&二次分配
  • 超过规定时间销售没跟进 :二次分配

2)库存leads

激活线索:

库存leads即无法转化的销售线索经过公司多年的积累数量庞大,如果人工再次致电确认用户需求则很低效成功率也很低,方法一是有效识别,库中成交可能性更高的leads,由人工触达转化。

而这种方式就是通过推送(短信、邮件、公众号等渠道)运营活动激活客户,让客户主动再次咨询,系统ke’yi再次分配销售跟进或公海打标签方便销售主动捞取。

周期扫库:

库存leads即无法转化的销售线索经过公司多年的积累数量庞大,如果人工再次致电确认用户需求则很低效成功率也很低,方法二是通过系统功能提高触达效率降低人工售卖成本,周期性的把公海中的leads全部触达一遍,避免遗漏漏网之鱼。但缺点是需要严格制定外呼策略避免骚扰到客户。

1、预测式外呼:

系统代替人工外呼,呼通线路转接给人工沟通,节省人工外呼等待电话接通的时间浪费。

2、智能AI电话:

全部由机器人外呼及沟通,无人工介入,但往往只沟通确认客户购买意愿是否存在。

2. 地面销售

前面提到了一般TO B的公司的获客主要渠道为地推团队。这种公司会在每个城市设立分公司,培养大量的地推销售人员,并划分区域给到每个销售人员负责,这个销售人员就是通过扫街的方式获取及维护自己的客户。

所以会有个弊端,CRM无法成为销售获取线索的主要来源,所以CRM对于地面销售的管控程度比较低尤其在于新客户转化环节,一般销售都是在确定客户购买后才将客户信息录入到CRM中,所以地面销售CRM系统的销售管控环节主要在于客户的维护任务及续费任务的流程及任务管控中。

而监控方式从电销人员的电话沟通情况改到地面销售人员的地点定位打卡签到的方式。

地面销售的线索二次分配,不会像电话销售的那么灵活,一般是整个片区的商户,以片区为维度的重新分配销售。

3. 社群销售

社群销售是在线教育大班课常用的一种销售手段,也是线下奥数教育学而思培优使用过的一种比较成功的获客手段,社群主要是将一群有相似目的或需求的人聚集到一起,在群中沉浸式的接收你的观点,从而形成思维的共振而达到思想的高度统一对公司想传递的价值观的的认可及信任。

上文说到,社群销售主要是教育机构使用的销售手段,所以往往和体验课的班期有关,上同一期的体验课程的学生或者家长会被拉入同一个群中,这个群会有一个专门的销售负责。

所以社群的线索分配是和销售负责的班期排班直接关联的,除非整个班期重新销售排班一般不会更换销售。所以主要依赖于销售对于社群的维护,一般不进行二次分配。


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

文章来源:人人都是产品经理  作者:东悦思考笔记

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

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

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


如何把握好平面设计中的节奏感?

涛涛

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!


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

文章来源:优设  作者:美工美邦
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


JavaScript——异步操作以及Promise 的使用

前端达人

什么是异步?

异步与同步是相反的

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

什么时候用异步编程

在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。

现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。

为了解决类似这种问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。

例如:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>回调</title>
  8. </head>
  9. <body>
  10. <button>点击</button>
  11. <p></p>
  12. <script>
  13. var btn = document.querySelector('button');
  14. function fn1(){
  15. btn.onclick = function(){
  16. document.querySelector('p').innerHTML = '我出现了!'
  17. }
  18. }
  19. setTimeout(fn1,1000)
  20. </script>
  21. </body>
  22. </html>

 

 它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 1 秒,然后执行回调函数 "fn1",在命令行输出 "我出现了!"。

Promise 的使用

语法格式:


  1. new Promise(function (resolve, reject) {
  2. console.log("Run");
  3. });

resolve和reject是参数 

再看这个例子:


  1. new Promise(function (resolve, reject) {
  2. var a = 0;
  3. var b = 1;
  4. if (b == 0) reject("Divide zero");
  5. else resolve(a / b);
  6. }).then(function (value) {
  7. console.log("a / b = " + value);
  8. }).catch(function (err) {
  9. console.log(err);
  10. }).finally(function () {
  11. console.log("End");
  12. });

这段打印结果为:

.then() .catch() 和 .finally() 三个方法

这三个方法的参数都是一个函数,

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,

.catch() 则是设定 Promise 的异常处理序列,

.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:


  1. new Promise(function (resolve, reject) {
  2. console.log(1111);
  3. resolve(2222);
  4. }).then(function (value) {
  5. console.log(value);
  6. return 3333;
  7. }).then(function (value) {
  8. console.log(value);
  9. throw "An error";
  10. }).catch(function (err) {
  11. console.log(err);
  12. });

打印结果为:

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是请注意以下两点:

  • resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列;
  • resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。




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

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

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

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

【举栗说明】JavaScript作用域,一次性给你总结!

前端达人

图片

本文重点

  • 函数案例

  • 函数作为参数使用

  • arguments

  • 作用域:写代码要注意变量的在哪声明和使用的问题

  • 预解析:什么叫预解析, 什么东西发生了什么事

01 作用域:使用范围

全局变量:

  • 声明的变量是使用var声明的,那么这个变量就是全局变量,

  • 全局变量可以在页面的任何位置使用

  • 除了函数以外,其他的任何位置定义的变量都是全局变量

  • 如果页面不关闭,那么就不会释放,就会占空间,消耗内存

  • 全局作用域:全局变量的使用范围

局部变量:

  • 在函数内部定义的变量,是局部变量,外面不能使用

  • 局部作用域:局部变量的使用范围

注意:

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用;

说明:js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量

全局变量是不能被删除的,隐式全局变量是可以被删除的

定义变量使用var是不会被删除的,没有var是可以删除的

function f1() {  number=1000;//是隐式全局变量 }f1();console.log(number);   var num1=10;  num2=20;  delete num1;//把num1删除了  delete num2;//把num2删除了  console.log(typeof num1);  console.log(num1+10);  console.log(typeof num2);  num=100; console.log(num);  function f1() {  var num=100;  num+=10; }f1();//这个函数结束之后 { var num=10;  console.log(num);//10 }console.log(num);  if(true){  var num=10; }console.log(num); for(var i=0;i<5;i++){  var number=20; }console.log(number);   var i=0;  while (i<5){  var num=100;  i++;  } console.log(num);  function f1() {  var num=10; }f1(); console.log(num);  var num=10; console.log(num);//10  

作用域链

 var num=10;  function f1() {  var num=20;  function f2() {  var num=30;  function f3() {  var num=50;  console.log(num);  } f3();  } f2();  } f1(); 

03 函数案例

求2个数中的最大值

 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } console.log(getMax(10,20));  //console.log(getMax);//函数的代码 function getMax(num1, num2) {  return num1 > num2 ? num1 : num2;  } var num1=10;  var num2=20;  //函数外面的num1和函数的形参num1不是同一个变量 var result=getMax(num1,num2);  console.log(result);  console.log(getMax);//函数的代码 

求3个数中的最大值

 function getThreeMax(x, y, z) {  return x > y ? (x > z ? x : z) : (y > z ? y : z);  } console.log(getThreeMax(10,2,24)); 

判断一个数是否是素数(质数),只能被1和自身整除,质数是从2开始

用这个数字和这个数字前面的所有的数字整除一次(没有1的,没有自身的)

 function isPrimeNumber(num) {  for (var i = 2; i < num; i++) {  if (num % i == 0) {  //说明有一个数字整除了,就没有必要向后继续整除了, //此时就已经验证出不是质数 return false;  } } return true;  }//  console.log(isPrimeNumber(7) ? "yyyyyes" : "nnnnnno") var aa = isPrimeNumber(17);  if (aa) {  console.log("yes");  } else {  console.log("no");  }  function isPrimeNumber(num) {  for(var i=2;i<num;i++){  if(num%i==0){  //说明有一个数字整除了,就没有必要向后继续整除了,此时就已经验证出不是质数 return false;  } } return true;  } console.log(isPrimeNumber(8)?"是质数":"不是质数");   var result=isPrimeNumber(2);  if(result){  console.log("这个数字是质数");  }else{  console.log("这个数字不是质数");  }  function aaa(x,y){  return x-y;  } console.log(aaa(99,88)) 

通过函数实现数组反转

 function reverseArray(arr) {  for (var i = 0; i < arr.length / 2; i++) {  var temp = arr[i];  arr[i] = arr[arr.length - 1 - i];  arr[arr.length - 1 - i] = temp;  } return arr;  } console.log(reverseArray([1, 2, 3, 4, 5])); 

通过函数实现冒泡排序

 function sortArray(arr) {  //控制比较的轮数 for (var i = 0; i < arr.length - 1; i++) {  //控制每一轮的比较次数 for (var j = 0; j < arr.length - 1 - i; j++) {  if (arr[j] > arr[j + 1]) {  var temp = arr[j];  arr[j] = arr[j + 1];  arr[j + 1] = temp;  }//end if }//end for }//end for return arr; } console.log(sortArray([0, 19, 34, 10, 100, 2])); 

求一个数字的阶乘

function getJieCheng(num) {  var result = 1;  for (var i = 1; i <= num; i++) {  result *= i;  } return result; }console.log(getJieCheng(5));//1*2*3*4*5 

求斐波那契数列

 function getFib(num){  var num1=1;  var num2=1;  var num3=0;  for(var i=3;i<=nnum;i++){  sum=num1+num2;  num1=num2;  num2=sum;  } return sum;  } console.log(getFib(12))  

02 函数作为参数使用

函数是有数据类型,数据类型:是function类型的

函数可以作为参数使用,如果一个函数作为参数,那么我们说这个参数(函数)可以叫回调函数 只要是看到一个函数作为参数使用了,那就是回调函数

function sayHi(fn) {   console.log("GOOD");  fn();//fn此时应该是一个函数}function suSay() {  console.log("HELLO"); }sayHi(suSay); function f1(x,y) {  console.log(x+y); }f1(10,20); function f2(x,y) {  console.log(x+y); }f2("HLS","MISS"); function f3(x) {  console.log(x); }f3(true);

04 arguments

计算n个数字的和

定义一个函数,如果不确定用户是否传入了参数,或者说不知道用户传了几个参数,没办法计算,但是如果在函数中知道了参数的个数,等于也知道了每个参数的值.

//定义function f1() {  //获取的是函数在调用的时候,传入了几个参数 //console.log(arguments.length);  //使用arguments对象可以获取传入的每个参数的值 console.log(arguments); } f1(10,20,30,40,100,200);//调用 
 function f1({  //arguments----->数组使用------伪数组--- var sum=0;  for(var i=0;i<arguments.length;i++){  sum+=arguments[i];  } return sum;  } console.log(f1(10,20,30)); 

05 预解析:提前解析代码

预解析:就是在解析代码之前,预解析做什么事?

把变量的声明提前了----提前到当前所在的作用域的最上面

函数的声明也会被提前—提前到当前所在的作用域的最上面

函数调用的时候, 把会函数的声明提升到作用域的上面

函数的声明提升到作用域

 f1();//调用  var num=20;//这个变量的声明会提升到变量使用之前  function f1() {  console.log(num);  //var num=10;  } function f1() {  console.log("小苏好猥琐");  } f1();  function f1() {  console.log("小苏没有助教猥琐");  } f1(); 

把变量的声明提前

 var num;  console.log(num);  num=10;  function f1() {  console.log("哈哈,助教好猥琐哦");  }   //f1();//报错 

注意:预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面

  function f1({  console.log(num);//undefined  var num = 10;  } f1();   console.log(num);//报错  

函数中的变量只会提前到函数的作用域中的最前面,不会出去

预解析会分段(多对的script标签中函数重名,预解析的时候不会冲突)

 function f1({  console.log(num);//undefined  var num=10; } f1(); console.log(num);// function f1() { console.log("哈哈"); }

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

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

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

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

体验设计构建品牌价值-打造影响用户心智的价值连接

seo达人


01.前言

总有一些人会让你感觉格外亲近,总有一些事会在不经意间打动你,慢慢的深入人心,是什么让你感觉亲近、愉悦、甚至兴奋?今天这篇文章主要从产品设计的视角分享一下深入人心的产品设计方法。

a

02.事势之流 相激使然

“世事的变化趋势或态势是各种因素、力量相互碰撞、激发的结果”。同样想要让你的产品深入人心,本质是我们的产品要给用户提供独特的价值,而价值的产生可以理解为一个形象在用户心智中的建立,这里的形象类似于品牌VI,但绝不止于视觉层面,其实可以由多个维度构成。通过不同的维度影响用户的使用体验,最终形成产品的品牌价值。

我们可以把品牌价值理解为“人物个性”,美国心理协会(APA)将个性定义为“在各种场合、随时间变化,能够影响多种特征行为模式的个体的独特心理特质。”

产品的个性会影响用户的感受、思考、处理以及最终的结果例如,当用户挑选并投递一个职位时,她希望听你成熟的建议来引导她。将品牌与几种典型的人物个性关联起来,就能创造关联性更强的故事,更容易使用户投入。换言之:人与人更容易亲近。如果你的品牌感觉像“人”,用户就会更亲近。

d

03.找到“人物个性” 明确品牌价值

定义“人物个性”,就是去思考如何面对用户,如何以最好的姿态向用户展示自己,首先要建立有效的价值体系这里我们通过招聘业务的一个项目逐步讲解一下。

我们知道下沉市场的招聘环境十分恶劣,存在各种虚假信息的问题。结合这个背景我们对蓝领用户的求职现状进行了一系列详细的调研,收集了用户不同层级的需求(如下图)。 

图片

我们可以发现用户最基础的需求只是要求职位信息的内容真实,加分需求则是对职位品质提出了期望,在保障职位信息真实的前提下,需要提供更高质量的职位。结合需求的提及率和需求等级,我们输出了产品的价值体系(如下图)。 

图片

如图所示,产品的价值体系分为三个层级,分别是产品价值、用户价值和品牌价值

强调产品价值我们结合用户的基础需求,根据需求内容定义“真实”内容,例如:真实的薪资、真实的工作环境、真实的工作内容等,第二步则是通过产品底层逻辑或用户的评价反馈系统来创建这些“真实”。

提升用户价值用户价值=产品价值-使用成本,例如:用户要购买苹果,A商店的苹果质量较高,但距离较远。B商店的苹果质量一般,但距离很近。则用户价值=苹果质量-商店距离。通过传递“真实”的方法降低用户选择职位的成本,从而提升用户价值。

形成品牌价值品牌价值的形成则是通过多个体验维度的同时影响,以及用户不断的使用产品感受用户价值,长期积累形成的。

f

04.发掘用户感知 拆解用户认知

基于前面建立的产品价值体系,我们来试着思考以下几个问题:

1.我们的品牌要说什么,怎么说?

2.在价值形成的不同阶段,我们的品牌分别对用户说什么?

3.用户希望得到什么,用户却只能感受到什么?

4.用户此刻正需要什么,用户此刻最不擅长什么?

创造价值不是目的,只有将价值有效的传递给用户,用户通过感受价值,从而更好的理解和使用产品。我们通过感知+认知的方式重新构建用户体验。

 

结合用户对直接/间接竞品的场景举例我们可以发现,用户对价值感知可以分为四个维度: 

图片

产品体验“产品”可以理解为我们售卖给用户的商品,例如:京东的电器、招聘业务中的职位或者企业。

功能体验“功能”类似于服务,例如:7天无理由、简历优化。

文案体验:“文案”指的是页面中信息字段的表达方式,是否足够详细、精准、及时等。

界面体验“界面”其实就是页面的UI风格视觉语言。

同时我们发现用户认知的“真实”与以下几个词有很高的相关性 。

图片

接着我们根据价值体系的目标,通过以上四个维度拆解具体的优化内容(如下图) 

图片

 

05.体验战略建立有价值的连接

清楚了价值目标,以及用户的认知和感知方式,我们开始将价值与用户做连接,也就是前面提到的价值传递(传递“真实”)。根据下图中的公式举两个例子。

图片

 

打造产品体验: 

图片

左图是旧版的首页,右图是优化后的页面,我们可以直观的感受到页面两个产品的调性或者说页面的气质截然不同。我们来分析一下两者的区别,优化后的首页,在主视觉的位置,打造了“每日严选”。通过这个模块快速建立用户对产品的初步认知。这个模块的目的是为求职意图强烈但职位选择不明确的用户提供高质量的职位。这类用户在整体用户中的占比最高,同时这类用户的痛点十分明确,他们既希望选择一个高质量的职位,但自身缺乏对职位品质的判断能力。

 

打造服务体验:

为求职者提供了“安心投”服务,在用户投递前、投递中、投递后三个节点分别展示求职相关的保障,降低用户求职顾虑和心理担忧,提高投递率,服务包括:

A.求职保险求职过程中被骗造成的经济损失平台会予以适当赔付

B.隐私保护保护用户的相关信息,并进行加密处理

C.免打扰保护保障用户的私人空间不被打扰

图片

在职位描述(左图)的模块后面我们加入了“安心投”,用户了解工作内容后的第一时间告知他投递后我们会有哪些保障服务,从而减少他在投递时的心理担忧。

其次是在企业规模(右图)的模块中加入了“用户评价”,露出更多真实性相关的信息辅助用户对职位/企业的品质进行判断。

同样在后续的微聊页面我们也加入了“安全投”的提示,并且在用户投递后会再次与他确认我们为他提供了哪些安全保障服务,进一步延伸用户后续的操作流程。

图片

06.总结

图片

其实品牌形象建立的过程就是我们与用户交朋友的过程,在这个过程中我们的个性(价值)被用户逐渐发掘和欣赏,促使我们的关系越走越近。项目初期我们可以通过一些引导、开屏、二楼等方式对品牌进行宣传和曝光,同时我们不断提升自身的产品品质,提高产品价值。中期我们需要进一步优化用户在多个维度的体验感受,提升用户价值(用户价值=产品价值-使用成本),降低用户使用成本,进而提高用户使用频次,以建立长期有效的价值连接。在这个过程中我们断优化体验,与用户共同成长,形成牢不可破的信任价值体系,即成功搭建了一款深入人心的产品。


 

原文地址: 58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》体验设计构建品牌价值-打造影响用户心智的价值连接

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

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

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

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



日历

链接

个人资料

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

存档