首页

微交互:设计师的超能力

资深UI设计者

微交互在用户体验中占据越来越重要的位置,来看看微交互该如何应用吧~


大概几周前,在他的朋友和孩子们的大力劝说下,我并不那么精通互联网的爷爷加入了Facebook。最后。在我教他设置个人资料,创建帖子和后续页面时,他遇到了一个有趣的事,在尝试摸索页面中不知何故偶然发现了著名的LIKE按钮。他将鼠标悬停在“赞”按钮上,弹出了6个表情符号,然后单击“ HAHA”笑脸,这使他对这个小动画感到敬畏。这就是微交互对产品或应用程序的强大功能。


资料来源:Giphy


我们作为用户,每天都能看到和应用这些微交互,有些甚至没有意识到。“喜欢”按钮是最简单的示例之一。其他几个是:

  • 滚动鼠标时出现的简单滚动条

  • 向左滑动即可清除iPhone主屏幕上的通知

  • 能够看到其他人在消息传递应用程序上“打字”

  • 一个进度条显示下载百分比

  • 拉动以刷新,以在应用程序屏幕上重新加载内容

  • 交互式错误页面,例如Google Chrome和为文章点赞是一些最常见的微交互。那么,为什么这些非常有效?为什么每个应用程序都有它们?


资料来源:Dribbble

一.什么是微互动?

微交互就像与设备的任何其他交互一样,用于将有意义的反馈传达给用户,因为用户必须不断知道执行某项操作时会发生什么。这是一种人们期望发生某些事情的趋势。例如:单击按钮,滚动页面,将商品添加到购物车,向左滑动卡片。

资料来源:Dribbble

这通常是通过提供系统状态(尼尔森的启发式方法)或帮助用户避免常见错误来实现的。当您未填写必填字段时,带有错误消息的红色边框就是微交互。


例如看下面的互动

竖起大拇指— Facebook Messenger


该动画是微交互的一个很好的例子,因为它实现了三个重要功能:

  • 沟通状态并提供反馈

  • 增强直接操纵感

  • 帮助人们看到自己行动的结果


二.微交互的构成

分解

微观互动包括四个部分:

  • 触发器启动微交互。触发器可以由用户启动或由系统启动。

  • 在用户启动的触发器中,用户必须启动一个动作。

  • 在系统启动的触发器中,软件检测到满足某些资格并启动操作。

  • 规则确定了触发微交互后会发生什么。

  • 反馈使人们知道发生了什么事。发生微交互时,用户看到,听到或感觉到的任何东西都是反馈。

  • 循环和模式决定了微交互的元规则。当条件改变时,微相互作用会发生什么?


三.微交互的作用


如果微交互仅仅是微小的设计元素,为什么还要关心它们呢?

很多Web开发人员和设计人员还在问这样一个问题。注重细节是一个优秀网站与普通网站的根本区别。 这些就是使用微交互的原因:

  • 他们改善了网站导航

  • 它们使用户更轻松地与您的网站进行交互

  • 他们向用户提供有关已完成操作的即时和相关反馈

  • 他们给您的用户提示

  • 他们交流有关某些元素的信息,例如是否互动

  • 它们使用户体验更有意义

  • 他们鼓励分享,喜欢和评论您的内容

  • 他们引起用户的注意

  • 最后,它们只是使您的网站更具情感性


精心设计的微交互是用户关心的明显标志。这就是为什么他们如此重视。用户可以做什么,以及他们的行为是否正确并得到系统的批准-应用程序或网站可提供即时的视觉反馈,并教会用户使用系统。

正确进行微互动后,它们往往会给您的品牌带来积极的感觉并影响用户的行为,而人们甚至根本没有意识到为什么这样做。如果您喜欢或不喜欢产品的某个方面,则通常对产品有正面或负面的倾向。这种所谓的“哈洛效果”既可以支持您也可以对您不利。在明智的情况下,这些知识可以帮助改善用户对您网站的反馈-通过适当注意细节,可以使用户满意。


四.什么时候使用微交互

在UX / UI世界中,尽管微交互非常微小,但与用户进行交流时却是强大的动力。以下是最常见的微交互及其对用户体验的影响:


轻滑

“轻滑”动作消除了轻击,并且更具交互性和流畅性。它可以帮助用户在选项卡之间快速切换并获取有关产品的更多信息。此外,轻滑是一种非常常见的手势,可以在不引起用户思考的情况下潜意识地引导用户。就像我们一直在读“不要让您的用户思考”一样,既有趣又令人上瘾。


数据输入

我们所有人都知道设置密码或创建帐户的麻烦。这个动作很容易引起用户反感。关于密码强度和用法的前瞻性建议可以使用户轻松前进,而在输入数据时进行一些交互也可以使用户参与该过程并有助于实现目标。


动画

动画可以简单地启用并改善微交互。他们的存在可能不会被注意到,但是缺席给每个人造成了损失。它们就像胶水一样,可以帮助设计师使最简单的过程变得有趣和令人上瘾。但是要非常小心,因为它们意在吸引用户,而不会使他们分心或沮丧。延迟处理或在网站中引入新样式可能会引起混乱。


当前系统状态

必须使用户了解网站或应用程序上当前发生的状态,这一点很重要。如果不通知用户,他们将很生气并关闭网站或应用程序。微交互使用户可以准确地知道发生了什么,完成该过程需要多长时间等。即使失败消息也很幽默,但有效地保持了用户的信任。


使教程变得有趣

每个人都在不断寻求信息。借助微交互功能的教程通过简化和突出显示基本功能和重要控件以方便用户理解,从而指导用户进行应用程序的工作。


号召性用语

微交互实质上是在推动用户与应用程序或网站进行交互。号召性用语给用户带来了成就感,也给用户行为灌输了同理心,使用户与CTA互动的最佳方法是使CTA吸引用户的兴趣。


动画按钮

通过让用户知道他们通过您的应用程序或网站的方式,它们起到了信息管理器的作用。我们需要注意颜色、形状、特殊效果、动画、位置和纹理,以使用户体验自然而顺畅。


滑动手势

通过使用手势隐藏一些动作项,这些类型的交互可用于节省移动设备上的空间。例如,您可以看到向左滑动将删除电子邮件,向右滑动将存档电子邮件。同样,在锁定屏幕上取消/清除通知。

快速操作

一个简单的快速动作示例就是,当您点击并按住应用程序图标时,在Apple设备上进行3D触摸,它将为您提供用户最常使用的上下文动作项。这样可以节省点击次数和时间。例如,Instagram会呈现诸如相机、新帖、活动等动作。


交流信息

这些类型的交互会分解复杂的信息,并使用视觉,动画将信息轻松传达给消费者。一个完美的例子是解释信用卡上的利息费用。这是一个敏感的话题,Apple Card通过使用圆形互动动画来告知用户和最高费用,再次赢得了客户。


互动参与

有时,您希望用户通过使他们感到惊奇的方式来与界面进行交互。这种令人惊讶的结合动作会更加产生更强大的影响。Robinhood App最近发布了一张借记卡,其候补名单超过一百万。要在候补名单中上移您的位置,用户可以转到其应用并点击该卡(最多60次)。这是使用户与应用程序交互的一种有趣方式。

提供反馈

在用户触发某些内容或输入某些内容之后,Motion可以有效地用于向用户发送反馈。错误状态和成功状态就是这些示例,下面是移动应用程序正确和不正确密码输入的示例。

向用户介绍界面

每当启动具有精美功能的新产品或应用程序时,如果用户发现它太难理解,它终将失败。因此,在此类情况下,应用程序可以利用微交互来向用户介绍功能。例如,N26 Fintech App使用动画来演示用户如何将钱从一个储蓄桶转移到另一个。


引起用户的注意

当移动屏幕上的大部分空间都充满信息时,很难突出显示我们希望用户注意到的特定功能。通过使用动画和过渡效果,微交互可以在为用户带来愉悦感方面发挥至关重要的作用。例如,在Slack上,在您开始键入之前,发送按钮变灰,一旦开始键入,它将变为蓝色,向用户指示这是号召性用语按钮。


使加载屏幕有趣

大多数加载屏幕都很无聊,但是微交互和动画可以将它们变成非常有趣的东西。每当加载或设置过程中有等待时间时,Google都会利用此空间为其用户创造出色的直观体验。这是一个例子:


我们人类一直在努力寻求即时满足。在更大的事物方案中,忽略微交互是一种普遍的趋势,但不可否认微交互对于保持用户对产品的兴趣和好奇非常重要。每个人都说细节就是魔鬼。小小的体验和设计功能(例如在屏幕之间切换或突出显示功能或弹出新通知)可以在增强用户体验方面产生巨大差异。


五.如何设计微互动?

进行微交互对于设计师来说是令人兴奋的,因为可以尝试新的设计解决方案并寻找使用户感到惊讶的新方法。但是为此,您必须牢记以下几点:

  • 把自己放在用户的角度考度,并使用所有您要弄清楚他们如何使用您的应用程序。

  • 创建功能动画。不仅具有美学效果而且能够增强用户体验的动画。

  • 让用户保持愉悦。用户使用该应用程序时的感受是其不断使用该应用程序的原因。如果用户喜欢并感到愉快,他将再次使用产品。

  • 不要打扰到用户。过多的动画会对用户产生相反的影响。令人讨厌的用户使他们远离您的应用程序。

  • 使用人类语言和非技术性语言。有趣的文案可能会让用户暂时忘却应用程序中空白页面的沮丧。


六.设计微互动的工具

那么,设计人员应该熟悉哪些原型制作工具?那里有很多工具,但并不是每个人都知道哪种工具最适合特定的微交互任务。根据我个人设计这些元素的经验,以下是我的建议。

如果你熟悉编码:

  • 手机:Xcode,Android Studio

  • 手机或网页:Framer

  • 网页:CSS动画

如果要创建更详细的交互:

  • Principle,Adobe CC,origami Studio和Protopie

如果要创建详细的交互+动画:

  • After Effects


文章来源:站酷   作者:ZZiUP


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





十年知乎,一体两面

资深UI设计者

作为一个知名的问答社区,知乎已经走过了十年。面对十年间不断变化的用户习惯和互联网环境,知乎都做出了哪些改变?未来,知乎会朝着什么样的方向发展?本文作者从用户构成、内容形态和商业模式各个方面,对知乎进行分析,希望对你有帮助。

一转眼,知乎已经十年了。

2010 年,新浪、腾讯、网易、搜狐都在搞微博,展开抢人大战。当时微博客的形式已经被国外老师 Twitter 证明了成功,而问答类网站的原型 Quora 和 Formspring 才刚蹒跚起步,前途未卜。

很快,新浪微博就带着“围观改变中国”的光环出了圈,但人们真正认识到知乎的威力,还要等上几年。现在,知乎积累了近 4400 万个问题和 2.4 亿个回答,成为中文互联网最大的原创内容策源地之一。

十年间,中国从 PC 互联网迈入移动互联网时代,内容产业蓬勃兴起,网络前所未见地深刻影响中国社会。知乎积累的海量内容,加上每天源源不断生成的新内容,深度参与塑造了中国网民的眼界和思想。

2011 年 4 月 7 日,开站不到 5 个月,社长成为知乎第 6332 位用户。作为一个知乎深度老用户,社长愿意用“两个知乎”来形容自己观察到的知乎十年。

从用户构成、内容形态和商业模式各个方面,我们都能看到相对着存在的“两个知乎”。它们互为表里,共同构成了知乎精彩纷呈的景象。

01 知乎的用户

1.“精英用户”vs 普通读者

2013 年,社长写过一篇《知乎:为“精英用户”服务》,这是航通社最早对知乎的观察文章。知乎符合所谓“二八定律”,创作者只是极少数,绝大部分人都是看客。

根据知乎官方数据,在冷启动的 40 天里,知乎 200 位原始用户创造了 8000 个问题和 2 万个回答,早期邀请注册的用户都有很高的分享欲望和出品质量。所以,为当时还不多的创作者做“私人定制”的服务,成为知乎催化优质内容的选择。

当知乎开放注册之后,原来的“精英用户”可能感觉到知乎的变化,并且不一定适应。有一些人退出,但更多的人进入。

如今的知乎给每个用户都提供了开放易用的创作辅助和数据统计工具,通过想法、专栏、视频等多样形态降低分享门槛,让任何有志耕耘内容,或只想简单分享的人,都能够找到其中的乐趣。算法的进化,也让人们收到的信息流总体上日趋精准。

2. 规则破坏者 vs 秩序维护者

在知乎,有些人出言不逊,大肆骚扰,降低了他人的浏览体验;另一些人从事虚假营销、诈骗等活动,有的已经构成违法犯罪。在其它平台,总有人盗用知乎站内原创内容,转换为视频等其它形式,造成盗版比原版还火,也让创作者们深受困扰。

近年来,知乎不断加大用算法和人工混合处理违规的力度。在中文互联网当中,知乎是最早实现对所谓“阴阳怪气”的不友善言论识别的平台之一,其他平台的互动信息审核很难到如此细的颗粒度。热烈且长尾的评论互动是知乎的重要特色,激励了很多创作者将知乎作为原发平台。

同时,知乎也加大了版权保护的力度,如起诉微博营销号“知乎大神”胜诉等;并主动切入视频领域,让图文作者可以更主动地分享短视频红利。

3. 付费会员 vs 免费用户

知乎对直接付费购买内容的商业模式一直寄予厚望,前后走过付费咨询,音频内容,卖课程等几条路线。经过一阵探索,小说、图书、文字专辑售卖等最终脱颖而出。综合了纸书电子版、纯网络出版、私家课等资源的全包式“盐选会员”,已经成为创作者获取回报的一个重要来源。

2019 年起,知乎将站内优秀网文作品放上会员平台。知乎网文作者出现了月收入超 10 万、单本收入超 60 万的销售记录,那些“刚编的故事”再也不能被等闲视之。

为了推广优质的付费内容,知乎在众多问题下将可能切题的付费内容,以“故事档案局”等官方账号推送,嵌入到回答流当中。在评论区下面,不乏“我就是为看这个而开了会员”的声音。除此之外,原先免费的内容都没有被付费墙挡住,包括原有的海量长尾答案,免费用户的体验也得到了尊重。

02 知乎的内容

1. 非虚构严肃内容 vs “如何评价”和故事

知乎早期的邀请注册制,令它以专业人士的独到分析、独家资源和亲身经历而著称。“认真你就赢了”是当时知乎的流行语。

但在开放注册之后,新用户可能会“水”回答,“抖机灵”也同样获得读者欢迎。一些曾经坚持的编辑规范如“直角引号”,也逐渐变得不那么严格要求,纯粹写作虚构内容的人也在知乎上活跃起来。

知乎决定让喜欢每种不同内容的人,都通过算法推荐而各得其所。针对虚构内容,知乎推出了作者声明功能,同时通过会员付费实现优秀故事的产业化发展。对于仍然愿意坚持“认真”的人,知乎提供“亲自答”标签、学历及工作经验认证,由资深用户发放“专业”标签等方式,且同样辅以内容商业化的激励。

2. 长尾、长保质期内容 vs 即时热搜内容

人们惊叹于知乎居然已经十周年了,也同样对知乎上的“神预言”问答惊叹不已。

2011 年十大热议问题中,足球、晚睡习惯、金庸小说等问题,直到现在依然吸引着大量读者前来“瞻仰”。在 2011 年底一个推荐购买比特币的回答,累积至今获得 4.2 万个赞同。像这样的“预言家”在知乎上还有很多。他们就当时当地的情况写下的内容,可能在几年、十几年甚至更长时间,都始终具有借鉴和参考意义。

随着越来越多的人注意到知乎,每次有热点事件发生时,很容易在知乎找到事件亲历者、行业内人士、专家学者提供多方位的视角和解读,这些信息“养活”了包括航通社在内的不少“自媒体”。知乎热榜成为百度搜索指数、微博热搜、微信指数等等之外,又一个衡量中国舆论场的风向标。

跟保质期长的沉淀内容相比,即时热搜并非“速朽”,而是对“新闻是历史的底稿”这句话的最佳诠释。

3. 专业 UPGC 视频 vs 自动生成视频

知乎切入视频的决心不可谓不大,方式也多种多样,从单独的视频制作工具,到首页为视频开辟独立版块,再到问题页将视频回答单独列出。可以说,有视频创造力的人士将会获得越来越多的展示机会。

知乎也推出了一系列以视频为载体的 PGC 节目,如《职人介绍所》,也有郎朗钢琴课等付费视频课程。不过近期最值得一提的,还是知乎推出的将文字答案一键转视频的功能。这方便了非常多的文字创作者。

任何一种内容形态,恐怕都是最适合该形态的创作者才能玩转。在社长的印象中,很多文字创作者(含本人)是比较内向的,需要长时间的沉淀才能将思路组织出来。而视频更需要外向开朗和具备亲和力的面孔,甚至可以说是对年轻人更友好的。

此外,对长期习惯于文字创作的人来说,视频制作也有一定难度。随着知乎的自动化工具上线,视频的产能将会提升,也可以打击一些将优秀文字内容掐头去尾,再搬运到其他视频平台上的人。

03 知乎的商业模式

1. 谨慎看待商业化 vs 商业化顺势而为

早期的知乎以专业回答著称,读者对于回答与商业内容相结合很难接受,会说这样的答主是“恰饭”。当时,答主只能通过“赞赏”等有限的渠道获得微不足道的收入。这使得知乎虽然拥有日益显著的流量,商业变现能力却长期被外界质疑。

不能找到合适的盈利模式的话,一家商业公司是无法持续经营下去的。好在,随着知乎的用户基数扩大,更多人有机会摆脱单纯读者的身份,自己也成为创作者,体会到答案被人认同的快乐。此时,更多的人学会了换位思考。

近一两年来,特别是 2019 年知乎完成 4.5 亿美元 F 轮融资之后,人们对知乎阔步走向商业化已经习惯,而知乎的探索也终于有了收获,开始找到适合自己的商业路线。

2. 软性植入 vs 好物推荐

很多人信赖知乎一些领域的专业答主,当他们在回答推荐自己信得过的商品时,也会带来跟随购买的效应。不过,由于早期知乎风气使然,如果答主获得品牌赞助进行推荐时,哪怕真的有推荐的充分理由,也不得不小心翼翼,避免被人发现。

2020 年 1 月,知乎“好物推荐”功能全量开放,这同时解决了两个问题:一是在知乎回答看到商品后,不能及时跳转到购买链接,导致决策链条断开;二是答主推荐商品后往往需要读者自行搜索,其中可能弄错关键字或被相近的冒牌误导。更重要的是,它给部分专业答主带来的收益是清晰可见的。

2020 年双 11 期间,知乎“好物推荐”带货内容阅读量突破 8 亿;GMV 相比 618 翻倍,订单量提升 113%。“蓝大仙人”是最经常被提到的“好物推荐”受益者,他专攻的智能电视领域有着得天独厚的优势——有专业门槛,客单价高,销量及咨询需求长期稳定。他的一篇测评文章 GMV 超过 5000 万。

3. 大 V 自发接单 vs 品牌、平台、创作者联动

知乎商业化逐步走向正轨还带来另一个原本未曾设想的改变,就是品牌在知乎有了更多的露出、更真诚的声音和总体上更正面的形象。

知乎首先为品牌方提供了机构认证、品牌提问等能力,让品牌在知乎保持“人格化”运营,提升亲和力,与用户建立互信。而品牌也可以通过平台邀约相关领域优秀回答者,推荐产品,讲述原理或历史故事,以及做出客观评价。

此前,品牌如有此需求,只能绕过平台联系头部资源或 MCN,效率低下也很容易“翻车”。2020 年,知乎将对企业的内容服务打包成“知+”方案,由平台牵头,精准对接热度话题与优秀创作者,盘活存量 UGC 内容,全面激活创作能力。

目前,社长就可以在知乎的创作中心开启“知+自选”内容创作,挑选品牌任务当中自己觉得能写好的,比较切题的来写作。这种“人找品牌”加上以前就有的“品牌找人”,实现了比以往“盲人摸象”式配对更为精准的供需匹配。

需要指出的是,任何形式的品牌赞助内容,在写作时依然要严格遵守知乎社区规范,也要经历读者的考验与事实核查,关乎作者苦心经营的公信力。

04 结论

十年来,知乎的形象和角色不断变化,从一个小众又带点“曲高和寡”的讨论社区,过渡为繁荣而包罗万象的虚拟城邦,以及为人们提供实际帮助的解忧杂货铺。现在,知乎保持着中文互联网最大的原创内容策源地之一的地位,是中国舆论场的重要组成部分。

过去十年,有很多的殊途同归。移动互联网和 PC 互联网逐渐融合,网络与现实社会的鸿沟被填平,科技企业从创新颠覆的光环中走出,向商业的本质逻辑回归。在知乎,作者与读者、知识与故事、内容与商业本是一体两面。十年之后蓦然回首,“两个知乎”合二为一。

正所谓“内容即商业,商业即内容”。知乎十年积累的长尾内容是它最宝贵的资源,最终知乎的商业化道路,也从外围探索收敛回归到内容本身。海量的内容、良性的互动和进入正循环的商业模式,正在为知乎开启下一个十年。

文章来源:人人都是产品经理   作者:航通社

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


接好了!这是你要的6个小众但特别好用Ai技法

周周

软件熟练度属于“器”的范畴,对主要靠作品集吃饭的设计师来说很难对外体现。但是我们不能说它不重要,软件的熟练度依然是设计是否能够产出的重要因素之一!!

今天结合我自己之前的经验,来谈谈AI中的一些相对比较冷门的小干货(很多是我最近才get到的- -),但愿这些快捷操作能帮助你进行产出~~

大纲:

  • 快速调节参数
  • 平行四边形圆角
  • 快速平滑缩放
  • 手柄波浪线
  • 路径快速消除
  • 填充快速消除

快速调节参数

AI中存在很多参数需要我们自己去调节。比如一个形状的宽高圆角,对形状进行变换的旋转、扭曲等参数等等。可能很多朋友跟我一样,要么一个个手动输入要么通过拖动滑块进行调节。

这么做造成的问题有两个,一个是交互的繁琐,一个是参数调节颗粒度过细,在进行往返调试时需要耗费大量的重复工作量。对于我们时间宝贵的设计师来说这种方法简直太弱了好嘛!!

不过这些完全可以通过一个方法来解决——快捷键调节即可!结合shift、cmd(即win系统的ctrl)以及上下方向键完完全全地提升效率。具体的方法如下:

  • 上下方向键:1px为增量进行调节
  • shift+上下方向键:以10px为增量调节
  • cmd+上下方向键:以0.1px为增量进行调节

比如对形状的变换,我们就可以使用上下方向键1px微调,结合shift以10px数调。键入位置通过tab切换。

接好了!这是你要的6个小众但特别好用Ai技法

再比如变换效果的参数,同样可以使用这种方法快速地调试,全程只需要快捷键操作即可。而且这种一边敲击键盘一边实时预览的赶脚也让人心情莫名得顺畅!

这种方法也可以迅速地让水平和垂直数值保持一致,比我以前的滑块拖动、数值输入的操作好太多了。

接好了!这是你要的6个小众但特别好用Ai技法

顺带一提,sketch参数数值调节也支持这种快捷操作哦。

平行四边形圆角

我们在调节形状的圆角时,一般情况有两种方法,要么在菜单栏or变换工具中数值调整,要么直接在角落的圆角点上拖动。

接好了!这是你要的6个小众但特别好用Ai技法

但是对于平行四边形这种四个顶角度数不一样的形状,即使四个圆角大小是一致的,由于锐角和钝角的存在导致圆角看起来并不一样。

接好了!这是你要的6个小众但特别好用Ai技法

这时候,外观效果就派上用场了。

接好了!这是你要的6个小众但特别好用Ai技法

我们在效果-风格化中找到圆角选项,为平行四边形添加一个圆角外观效果。

风格中找到圆角选项就可以自己设置。这里给一个和刚刚一样的圆角10px。

接好了!这是你要的6个小众但特别好用Ai技法

最后(右图)得出的四个圆角看上去明显比之前的方案更加一致。

接好了!这是你要的6个小众但特别好用Ai技法

另外,这种外观的好处就是,后期随时可以在外观中编辑!

快速平滑缩放

我们更多时候缩放是滚轮缩放,但是这样的缩放的颗粒度太大,尤其在小屏电脑上想要定在某个合适的窗口大小比较麻烦。

这时候我们可以利用快捷键Z激活缩放功能,然后通过左、右拖曳的手势进行快速而平滑的缩放操作。我们可以轻易定格在我们想要的窗口大小。一开始可能很多朋友和我一样习惯上下缩放,但是ai里的缩放并不是上下,而是左右。

接好了!这是你要的6个小众但特别好用Ai技法

手柄波浪线

一般我们画波浪线是通过扭曲与变换中的波纹效果来变换。

但是我们也可以使用钢笔来直接画。

向一个方向拖拽生成手柄(不知道有没有朋友和我一样用钢笔工具都有点一下去绘制形状的毛病),然后在合适的位置再拖拽一次即可绘制出波浪线。在对精准度要求不高的情况下完全可以采用这种办法,方便快速。

接好了!这是你要的6个小众但特别好用Ai技法

路径快速消除

在以往,我在进行路径消除操作(比如绘制一些断线icon时),通过这样的步骤,添加锚点工具在路径上添加两个锚点,然后直接选择工具选中锚点间的路径删除。拜托,都2120年了,别用这么古老的方式了好嘛!!(好想乘时光机回去拯救年少迷茫的自己)

接好了!这是你要的6个小众但特别好用Ai技法

但其实压根不需要这么麻烦,一个工具就可以迅速解决,而且可以连续消除!

这个工具就是路径橡皮擦工具,说实话知道这个工具后我再也回不去了。

接好了!这是你要的6个小众但特别好用Ai技法

只需要激活它,你就可以在任意的路径中像使用橡皮擦那样,迅速地消除你想消除的地方。另外,我提前给这个工具设置了E这个快捷键,以便我能迅速调用它进行路径消除工作。

接好了!这是你要的6个小众但特别好用Ai技法

填充快速消除

路径橡皮擦用在填充的色块中同样只能消除路径,但我们想要消除色块时,则可以用到另外一个工具——橡皮擦工具。

shift+E直接调用到它,按住shift即可直接在填充色块中进行切割。而且最后被切割出的图形都是互相独立的闭合形状。

接好了!这是你要的6个小众但特别好用Ai技法

当我们按住alt后,就可以随意地绘制出不同宽度的矩形进行切割,相比形状生成器或布尔运算更加方便点。

接好了!这是你要的6个小众但特别好用Ai技法

最后

一点点平时积累的ai小干货,但愿能帮到你!!


文章来源:优设网     作者:转行人的设计笔记



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

深度分析动效设计原理,提升产品可用性!

ui设计分享达人


动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰,它能够提升产品的参与度并扩展交流的范围。

本文追根溯源,先从动效的起源讲起,一步步推进与产品、体验之间的关系,最后通过案例分析动效设计的原理和应用。一起来看看吧~

一、动效设计的起源

动效与用户体验的结合相对较新,其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演,但不能充分满足现代UI界面的交互需求。

为了弥合这个差距,动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。

在围绕界面元素建立用户体验时,重新定位动效原理的关键在于:

  • 将动效设计与UI动画区分开;
  • 阐明动效如何帮助可用性;
  • 解开核心动效的内部工作机制。


二、动效设计与用户体验

在讨论动效设计的原理之前,重要的是要强调动效不仅仅是装饰,而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型:实时和非实时。

 实时 

当用户在屏幕上点击UI元素时,实时交互提供即时反馈,会对用户的操作做出即时响应。

 非实时 

非实时交互发生在用户操作后,这意味着用户需要经过短暂的转场才能看到结果,然后再继续。

另外动效设计通过四种不同的方式来提升产品的可用性:

1.期望:当用户与界面交互时,他们期望看到哪些行为?动效是否符合预期或引起混乱?

2.连续性:交互在整个体验中是否发生一致的运动行为?

3.叙述:触发的动作是否与满足用户意图的事件的逻辑进程相关联?

4.关系:UI界面的空间、美学和层级结构如何相互关联并影响用户的决策?动效如何影响各种元素的关系?

三、产品动效设计原理

这里提供12种动效设计原理的解析,每一种对应不同的案例,从更直观的角度来解读抽象的原理。

1、缓动(Easing)

缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快,但由于缓动效果它们可以平稳地受到控制。

2、偏移和延迟(Offset & Delay)

当多个UI元素同时快速移动时,用户倾向于将它们组合在一起,而忽略了每个元素自身的功能性。

偏移和延迟会在移动的UI元素之间创建层级结构,并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的,而是交错排列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭时,偏移和延迟表明存在多个交互选项。

3、父子关系(Parenting)

父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时,子元素的链接属性也会更改,同时所有元素的属性都可以相互链接。

在下图中,将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时,子元素的发光效果的范围和光照强度的数值会发生变化。

父子关系在元素间创建关系并建立层级结构,允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。

4、转换(Transformation)

当一种UI元素变成另一种形式时就会发生转换。例如,转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条,进度条转换为完成图标。

从UX角度看,转换效果告知用户元素的状态发生了变化并将信息传递给用户,提高了用户的认知度。

5、数值变化(Value Change)

数值的变化(数字、文本或图形)在数字界面中非常丰富,从银行APP到日历到电商网站的各种产品中都会出现。

在某种程度上,数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入,向用户显示他们有能力影响数据,提升了参与活动的意愿。

6、遮罩(Masking)

遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例,在改变元素效果的同时允许元素本身保持可识别性。因此,照片和插图等视觉形式是理想的选择。

从可用性的角度来看,设计师可以通过遮罩向用户展示产品正在进行一系列的交互。

7、覆盖(Overlay)

二维空间中没有深度,元素只能沿X或Y轴移动,叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度,覆盖可以根据用户的需要隐藏和显示元素。

在使用覆盖时,信息层级结构是重要的考虑因素。例如,用户在笔记应用中首先应该看到的是笔记列表,然后使用覆盖来显示每个笔记的辅助选项,如删除或归档。

8、克隆(Cloning)

克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。

通过克隆将元素与界面相链接,如果元素只是突然出现或消失没有关联性,那么用户将缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃门,虽然看不清门后的东西但是我们能察觉到门后事物的存在。

模糊的工作原理是一样的。它为用户提供提示,让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。

10、视差(Parallax)

当两个(或更多)元素同时以不同的速度移动时会构成视差效果。

视差的主要目的是划分层级结构:

  • 可交互的元素移动速度更快,出现在前景中;
  • 非交互式元素移动速度较慢,退到背景中。

视差引导用户点击可交互的元素,同时允许非交互的元素保留在屏幕上并保持设计的统一性。

11、维度(Dimensionality)

维度使界面元素具备具多个方向的交互,这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。

作为一种叙述性工具,维度意味着元素的不同侧面是相互联系的,并且可以实现无缝的屏幕过渡。

12、平移与缩放(Dolly & Zoom)

平移与缩放通过视角的变化能产生更多空间上的体验,逐级递进显示更高级别的细节。

平移:点击元素后发生距离远近的平移,用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)

缩放:用户的视角与图像的距离保持不变,但图像在屏幕中的比例会增加。(这个人站在原地不动,只利用相机的变焦功能使花显得更大)

四、总结——动效即交流

互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理,即使最基本的界面元素也能成为交流的复杂媒介。

动效设计与产品用户体验之间的关系正在迅速成熟,而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。



文章来源:UI中国   作者:Clip设计夹


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


实用的组件库详细制作逻辑和注意点

ui设计分享达人

成长到一定阶段是方法论的比拼。

   17年开始进行视觉组件库的搭建,也出过一个B/G端设计分析方法的文章总结,里面从大的方面介绍了组件。后来看到很多关于组件库的文章,但是大都是从“分子原则”等很宽泛的方法来讲,很少去细讲实际搭建过程中会遇到的问题,甚至有些方法深究或者实际做下去是有问题。这里会全面的写下sketch搭建组件库(或者说是视觉规范)的逻辑,以及容易混淆思路的点。

      

    为了让大家容易看完,先简短说下制作组件库的目的,再分三点讲搭建方法。


    一 为什么制作组件库

 

    Q1:很多人认为table、tabs等通用组件不需要再搭建,很多大厂已经出来规范,可以复用,为什么还要单独制作自己的

    A1:这些通用组件都是由基础的样式粒子:填充色值、描边大小与色值、圆角大小、文字大小与色值等组成,就拿form表单来讲,不同的描边、行高、圆角、文字样式营造的感觉也完全不同。


    Q2:搭建后能发挥什么作用呢

    A2:统一性:避免多人多风格的现象,保证所有产品都呈现一致的设计语言,新成员加入,也可快速接手工作; 性:改一个组件,可以使用该组件的全部设计图更改;在现有组件库的基础上,也可通过修改,生成不同项目的组件库。

 

    Q3:搭建后如何确保大家都能正确使用?

    A3:需要大家了解自身项目组件库的搭建逻辑,统一讲解远程组件库使用方法,并有专人定期维护更新远程组件库。


    二 组件库具体搭建方法

 

    分三方面说明:(一)、内容架构;(二)、注意点;(三)、远程协作。

 

    (一)内容架构


    内容架构要考虑的是两方面:一个是文档的逻辑,二是组件的逻辑。三哪些制成组件,哪些制作成样式。

 

 

 

    文档的逻辑

 

 

    如上:点击创建组件按钮后,所有的组件都会出现在“图层/组件”界面,默认的排序方式是软件自定的,不好分类和查看,除非每次创建后再进行挪动。第二个“组件》”这个位置是不能直接切换看到组件的,只能在左侧看到所有的组件名称。再加上制作之前,也需要绘制出内容,所以我们需要在图层处建立界面,绘制我们的内容。样式也是如此,只能在“组件》”看到所有的样式名称。

所以我们整理出:“样式”page——所有需要创建样式的内容在此处整理分类绘制;“components组件”page——所有组件在此处分类绘制,再进行创建;“layout 布局”page——说明系统的布局和响应方案;“examples场景模块”典型场景模块,“更新日志”page——标明每次变动,当然sketch是自动导出“组件”page。另外根据系统特性,比如数据统计类界面多的情况,可以增加“data visualization数据分析”page

 

    组件的逻辑

 

    很多组件库向左图一那样,直接把所有组件摆了出来,非常凌乱不便使用。再对比element和antdesign,后者的分类整合地更干净整齐,涵盖的全面,整合后的大类别少,分类相对清晰,可以借鉴,后续有自己系统常用模块需要制作成组件,可以单独增加一个分类模块。当然也可以按着自己的逻辑重新整理。

 

    哪些制成组件,哪些制作成样式


 

    先说样式吧:1 文字(也有些会选择直接做成组件,但我一般会制成样式,感觉更轻量化些);2颜色——背景色、线条色(分割线、描边)、主色调、图标配色、功能色;3 容器(需制作全不同状态的容器,内容卡片、输入框、标签等都会用到);4投影。指的注意的是,这里的样式基本涵盖了所有的基础样式,后续大部分的基础样式都要尽量在在此处引用。

 

    哪些制成组件:本质上讲就是两大类,1是icon;2是其它无法用简单样式的常出现内容(也就是上面按“组件逻辑”整理出来的内容”

    何时需要制成复合组件:1需要通过很多基础样式切换才能改变状态时候。而且通过多个样式切换不同状态,麻烦的地方在于覆盖层的优先级比较高,即使切换成了同类其他组件,也还是被覆盖,必须更新

如下:

 

    我们可以在创建symbol后,在右侧取消内部相应的样式覆盖,然后建立所需的多个状态的平行组件,通过直接切换不同组件来切换状态。

 

    2如果该组件有上一级组件,并且要用到该组件的不同状态,就要把该组件的不同状态改为组件,不然一层一层改很麻烦。

 

    (二)、注意点

 

    制作组件的过程中虽然按着大的架构走,还是很容易混乱或者卡住。以下注意点,可以帮助我们理清关系。这部分其实也是我重点想说明的内容。

    命名


 

 

    1无论是组件还是样式的名称,最后一级相平行的,最好是可以相互切换的状态。这样就可以在右侧属性中直接切换。

    2 组件只能切组件,样式只能切样式。—— 也就是说定好一个基本元素是样式,那么与它平行的切换内容也需要是样式。

    3 如何修改已制好的组件或样式名称


 

    截图1(图层》组件page)和2处,选中进入后,均可找到对应的修改。修改后其他页面已放置好的组件名不被修改,反过来,在图层处其他位置修改,亦不能修改好组件的命名。

    4 sketch里默认的分组是通过命名时的“/”,要修改组件或样式加载时的分组,需在切换到此处,进行拖拽。修改后,组件的名称也会被修改。

 



 

    5 要将一个元素的组件命名到一处去,理清楚如上的关系。如果遇到无法用到的基本元素搭建,需要新的元素,可放到该组的element里(如上图)

 

    样式或组件的修改

 

 

    样式变化后,更新按钮变为可点击,点击此处可以更改样式,重设样式可以还原

    组件编辑覆盖层后在右侧更新,如果想修改组件,通过编辑母版

 

    响应

 

    要考虑好响应方式,每个组件在此处做好设定

 

    (三)、远程协作

 

    远程原因


 

    如上,只要复制过来的新内容中有组件,就会再下面自己建立出组件,很不方便组件管理,团队人多时,容易使组件发生变化,用远程组件能够做到完全统一。

 

    远程方案


    1 蓝湖



 

    无论样式还是组件添加后,还得自己分组重新整理,组件使用方法,在“蓝湖设计规范云”中找到相应的,自己拖过去用,很麻烦。

 

    2 语雀

    可以通过语雀的sketch插件上传或者下载,加载后便是类似远程组件的使用方法。

 

    3 sketch clould
|

 



    单独通过线下传library文件加载使用,比较不容易统一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帐户云能力创建的 Sketch的云端设计库,使用前需要对其进行设置。使用时,打开 Sketch 左上角第一个菜单的 Preference,选择 Libraries 卡片,将本地 iCloud Drive 中的规范文件拖拽进这个区域,然后关闭该窗口。

 

    综上所述,我们常选sketch cloud或者 语雀的kitchen插件来进行远程使用。另外会线下发送整个文件,方便整体复用一些组件和example里的页面。

    

文章来源:站酷   作者:youngLion0610


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

产品怎样做出刷屏级传播?这5种思路可以试一试

资深UI设计者

从“秋天的第一杯奶茶”到“打工人”,从老乡鸡的土味发布会到哔哩哔哩的《后浪》,刷爆屏幕的传播一浪接一浪,成为我们这个时代永不落幕的风景。产品怎样做出刷屏级传播呢?本文作者总结了五种思路,与你分享。

互联网刷屏现象层出不穷,其关联因素纷繁复杂,其发生和走势看起了很难把控,但通过对很多案例进行复盘,拆解其中机理,还是可以发现很多共同的规律。

鑫爷认为,那些刷屏的传播,大多数逃不了以下五种路径。

01 涟漪式:同频传导,无限裂变

涟漪式传播模型

涟漪式传播,通俗讲就是病毒式传播、社交式传播,信息通过社交媒体上人与人之间的链条,不停地向外无限的传导、裂变,直至达到引爆点。就像水中的涟漪,波纹从起始点扩散,通过水波引起的震动,一步步将能量传递到更大的范围。

涟漪式传播是一种去中心化的传播,消息可以从任何一个人那里发出,经由社交媒介的转发、点赞、互动,形成指数级的裂变,一生二,而生三,三生无限。这是互联网世界最基本、也是最重要的传播途径。

比如说,当年火爆世界的“冰桶挑战”活动,引来名流纷纷@对方并参与,带来了一场全球公益的狂欢;今年老乡鸡的土味战略发布会,只用几百元预算做的视频,竟然在社交媒体上获得10w+的播放量和3.3w+的在看,成为疫情期间最大的广告赢家。

涟漪式传播的发生机制,主要是口碑效应。人们出于人际交流、展现自我形象、获得社会认同的目的,将有意思的东西内容给朋友,从而实现人际间的自传播。

那么,什么样的内容最有口碑价值呢?《疯传》一书认为,满足以下六种因素的内容,最容易引起口碑传播:

  • 社交货币:可以作为茶余饭后谈资的东西,比如说名人八卦、网红打卡地等。
  • 诱因:在特殊情景、场合的刺激因素,比如疫情期间的共享员工用工。
  • 公共性:切中大众关注的敏感话题,比如住房、食品安全、疫情期间经济问题。
  • 情绪:比如愤怒、焦虑、恐惧、励志等情绪,比如幼儿园虐童事件、各种鸡汤等。
  • 实用性:跟受众切身利益有关、对其有用处,比如本地民生政策、健康指南等。
  • 故事姓:一波三折,情节有趣:比如最近一在反转的美国大选。

除了内容以外,涟漪式传播要达到理想效果,还需要传播渠道上进行最优设计,将正式传播(如官方发布)与人际传播(民间爆料)、中心式传播(如明星、KOL)与非中心式传播(素人转发)结合起来,形成立体式的传播链路。

比如说,如果你要在微博引爆一个事件,你可以先由素人小号爆料,再由明星转发,官方回应等,大V观点跟进等,一步步铺陈直至引爆;也可以先由官方发布消息,其他明星、大V转发评论,无数的素人小号配合造势;也可以先发布到电视或纸媒广告,然后微博、微信等社交媒体跟进,做进一步的讨论、延伸。

当然,具体操作上,要需要结合传播内容和整体广告策略来决定。

02 破圈式:夯实地盘,破壁出圈

在过去的电视时代,人们的聚集是集中化的、“广场式”的,全国人民同时看一个电视台;而如今在互联网时代,人们的聚集更多的是分散的、“圈层式”的。尤其是95、00后的Z世代用户,他们更多而基于兴趣、亚文化聚在一起,形成一个一个的圈子,比如当今各种兽圈、饭圈、谷圈等等,不一而足。

Z世代圈子解析

在圈层式的受众结构中,当某种信息在圈子内部的影响力越来越大,就可能突破原有的圈层堡垒,进入主流的大众人群,让更多的人知道,这种传播就可以叫“破圈式传播”。

图:破圈式传播模型

比如说,B站原来的用户群体主要是二次元的人群,具有典型的圈层化特征。这几年来,B站力图将用户拓展到更多的年轻人群,而今年推出的演讲版的《后浪》视频,有效的吸引了很过二次元圈外的年轻人乃至中老年人,无疑是典型的破圈式传播。

同样的,这几年在抖音、快手等流行的汉服风、JK制服、手办等,也有了出圈的态势。

具体而言,传播破圈又分为三种类型:

  • 一是从专业向大众破圈。比如咖啡文化的传播,就是先从专业级的手冲咖啡圈,再破圈进入资深咖啡爱好者圈,最后破圈进入普通喝咖啡人群。
  • 二是从特定阶层向普通阶层破圈。比如说,在古代,像翡翠、红木家具这些品,都是皇室贵胄、高门大户才能拥有的,如今已经破圈进入更多的阶层。还有牛仔裤,最初是美国西部矿工、牛仔人群穿的,后来经过改良,成为大众流行服饰,风靡全世界。
  • 三是由亚文化群向主流人群破圈。比如二次元文化、街头文化、COSPLAY、古风等这些亚文化,都已经融入了中国的大众流行之中,被越来越多人人喜爱。

破圈式营销的发生机制,是“参照群体”效应。人们为了融合到社会中,或是凸显个性,会找到一个参考的人群,并模仿他们的行为。比如说,中产阶层会模仿上层阶级人群,购买更有体味、更能体现社会地位的品;年轻人会模仿那些有个性同龄人的兴趣爱好,以便让自己显得与众不同。

要做好破圈式营销,一定要把握好传播的节奏。在《创新的扩散》一书中,提出了一个很经典的传播模型:新事物需要先让那些喜欢尝新的早期使用者(也就是种子用户),培养和激励这批铁杆人群,让他们影响早期大众人群,最后扩展到晚期大众人群,借以实现破圈。

创新的扩散模型

比如说,当初小米手机起家之前,是通过第一批骨灰级用户,这些用户多为手机论坛的资深用户,小米邀请他们参与MIUI的设计、研发、反馈等,建立了很好的忠诚度和口碑。

借助这些种子用户,小米实现了“冷启动”,同时通过线下论坛交流、“小米同城会”等建立参与感,吸引了更多的“米粉”,进而破壁出圈,扩散到更庞大的发烧友人群。

03 共创式:全民参与,一起狂欢

共创式传播,就是通过“发动人民群众”,号召受众一同参与进来,大家一起玩嗨,一起创造传播内容,传播者和用户共同成就了整个传播,乃至共同拥有产品和品牌。

共创式传播模型

我认为最善于做共创式传播的机构,莫过于新世相。他们发起的“地铁丢书大战”,号召大家在地铁、车站等留下一本书,给其他人阅读,引起了全网的讨论;还有“4小时逃离北上广”事件,号召一线城市想逃离的白领们,即时赶到机场,可以报销机票,一时间引起朋友圈刷屏和讨论。

另外,像网易云将用户的走心评论当做地铁广告素材,“认养一头牛”鼓励消费者认养牛奶并邀请参观牧场,抖音上发起的全民模仿“哪吒头”,中国银联“银行POS机”一元购买留守儿童诗歌作品,都是共创式营销的典范案例。

共创式营销的传播机制,在于提供“参与感”。受众感觉自己能够被尊重、被看见,并且获得参与其中的快乐体验,很容易形成自发的分享,并且容易与传播者形成一种深度的互动关系,从而建立起持久的忠诚度。

要建立广受拥戴的参与感,需要满足以下条件:

  • 一是简单易操作。比如天与空联合安利发起的“头顶食物”公益活动,抖音上的“一键变漫画”视频应用,都是非常简单的,这样才能最大限度地降低参与门槛,让全民一起嗨起来。
  • 二是让人有分享动机。共创式传播,不光要吸引参与,更重要的是要吸引他转发,那些具有身份代入感、能够增进自我形象、感觉自己能够以小行动助益社会的活动,才会更容易引起分享。

比如说人民日报发起的“传照片生成自己的军装照”H5,就很有代入感;还有像奈雪之茶这些高颜值茶饮产品,消费者自愿拍照分享,则是为了凸显自己的品味和形象;参与关爱自闭症儿童的“今天不说话”活动,则是满足了助力社会的自我实现心理。

04 蒲公英式:星火燎原,所向披靡

所谓蒲公英模式,是让传播渠道或者传播事件不断复制,派生出很多次级传播单元,在各个角落落地生根,从而形成全覆盖的浩瀚态势,从而达到“星火燎原”的引爆效果。

(图:蒲公英式传播模型 )

有一些IP式的活动,有共同的主题和形式,然后在不同城市不断进行复制,最终达到落地生根、全面开花的效果。

比如当年优步刚进入中国时,就是靠“一键呼叫”系列事件,在各大城市引爆关注狂潮的。北京的一键呼叫人力车、上海一键呼叫直升机、成都的一键呼叫摇橹船、青岛的一键呼叫游艇,每个城市都复制了活动的基本形式,但又结合本地文化进行了调整,最终汇聚成席卷神州的强大声量。

蒲公英模式的另外一种形式,是传播渠道上,在核心渠道以外配合很多的分子渠道,从而形成多阵列的全覆盖效果。

比如公众号“吃货小分队”,除了“吃货小分队”这公众号,还有多伦多吃货小分队、湾区吃货小分队、洛杉矶吃货小分队、温哥华吃货小分队、波士顿吃货小分队等十三个子公众号,在微信平台颇有影响力,获得了全美120万以上的粉丝青睐。

再比如樊登读书会,他们除了官方APP,还会把官方的视频素材剪辑成小片段,打包给到全国各城市代理商。众多的代理商被允许在抖音、快手等社交媒体开设账号,发布这些资料。于是,网上铺天盖地都是樊登读书会的视频内容,形成无处不在的曝光效果。

蒲公英式传播的发生机制,是矩阵协同作用。众多的传播单元,形成密集的阵列,相互支撑、相互补充、相互呼应,可以起到1+1大于2的放大作用。这跟7-11便利店的密集开店的渠道拓展模式,以及一些品牌“全国万店联合促销”的玩法,有着异曲同工之妙。

05 喇叭式:集中引爆,一举成名

喇叭式传播,就是集中广告资源,借助大媒介、大明星、大投入,让传播信息进行密集曝光,从而快速引爆事件。

喇叭式传播模型

喇叭式传播,是一种中心化的传播模式,在传统的电视、纸媒时代,很多品牌都不惜砸重金竞标央视黄金时间,或者在短期内在各大卫视同时打广告,进行形成全国性的曝光。直到今天,像瓜子二手车、大卫拖把这些品牌,也是通过密集的电梯广告进行轰炸式的宣传,这也算是喇叭式传播。

到了互联网时代,喇叭式的传播其实并没有消失,只是相比过去的单向输出,多了实时的反向互动和分享,这样就有了二次传播的可能。

比如说与明星联名做推广,找李佳琦、薇娅这样的头部KOL种草,或者像完美日记那样,集中火力在小红书投放了大量种草日记,都是属于喇叭式传播,其效果可以即时获得受众反馈。

喇叭式传播的发生机制,是从众心理。当我们在短时间内,看到小红书、抖音、微信、微博乃至整个网络,都在使用某个产品或者讨论某个品牌,就会觉得这个品牌实力很强,他的产品大家都在买,从而跟风拔草。

不过,喇叭式传播也有其局限性,就是需要足够的预算做支持。尽管喇叭式传播的重点是拼媒介、拼覆盖面,但是在具体执行中,也要想办法让传播内容尽可能有些梗、有些料,以便刺激受众二次传播,广告效果会更好一些。

让广告公关化,在广告中融入可讨论的话题,不失为提升喇叭式传播效果的一种可行思路。

比如,早几年世界杯期间刷屏的“法国队夺冠,华帝退全款”事件,还有今年疫情期间网易严选的“劝你别看广告了”路牌广告,以及最近网易严选“退出双11”的操作,都是在传播中融入了公关的要素,掀起了极高的话题讨论度。

06 小结

从传统时代到移动互联网时代,传播环境不断变化,刷屏玩法层出不穷。这种情况下,我们不光要学习借鉴的传播案例,还要把握传播的原理和模式,才能以不变应万变。

5种互联网传播模式总结

以上5种基本模式,各有优缺点以及使用范围,我们需要结合传播的目的和策略,匹配最合适的方案。最后,祝大家天天10万+,刷屏刷到手抽筋。

文章来源:人人都是产品经理   作者:品牌鑫观点

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



设计师必备的12个APP,你有几个?

资深UI设计者

大家平时手机APP中有多少是跟提升和学习有关的?自己碎片化的时间都用来做什么呢?是否在微博、微信、淘宝、抖音之间游走?在这些APP里获得即时的快乐后,又很空虚?

别急,今天我就给大家推荐几款我亲测好用的APP,让大家能轻松的利用碎片化的时间去提升自己。

设计师必备的12个APP,你有几个?

身为设计师,提升审美是非常重要的,可以说,审美是决定一个设计师发展的关键性因素。但是,审美的提升不是一朝一夕能实现的,是一个长期积累的过程,要多去看好的作品,多去分析,多去记忆。接下来给大家推荐几个可以看作品的APP:

设计师必备的12个APP,你有几个?

之前我们经常告诉大家,提升审美的一个快速的方式就是多去看好的摄影照片。国家地理大家都比较熟悉了,是风光、人文、纪实类摄影机构,这里有很多世界顶尖摄影师拍摄的照片,并且可以下载高清图片,欣赏的同时还可以作为自己的灵感库。每天这个app都会推荐5-10张照片,不断刷新你的图库。

设计师必备的12个APP,你有几个?

给大家看看我近期下载的图片

设计师必备的12个APP,你有几个?

△ 《冰山的纹理》photograph by Nancy Leigh 图片来自:国家地理APP

这是南极洲的天堂湾( Paradise Cove),有许多彷佛经过精雕细琢的冰山。这座冰山表面有着令人惊叹的美丽纹理,就像高尔夫球杆挥过草皮留下的痕迹,还有一道道的条纹。它以迷人的姿态,欢迎着我们来到这个有着湛蓝海水、冰河与诡异天色的海湾。2013年摄于南极洲的天堂湾。

设计师必备的12个APP,你有几个?

△ 《雨骤来》photograph by 林晓敏 图片来自:国家地理APP

大雨骤来,巷中食肆排档的食客不慌不忙,以雨景伴晚饭,慢活是一种生活态度。

可能很多同学纳闷,我看摄影图片到底看什么呢?

可以看构图、光影、色彩、色调等等,这些在你设计时都会潜移默化影响你,比如,上面两张图片,最吸引我的是它们的色彩,第一张整体是蓝色调的,我可以用它的颜色作为我画面的配色。第二张图片,色彩的冷暖对比很大,给我一种赛博朋克的感觉,设计非常酷的画面时,就可以用到这样的配色。

tips:

「国家地理」APP,安卓和苹果系统都可以下载,安卓系统是免费的,苹果系统要收1元的费用。

设计师必备的12个APP,你有几个?

看展绝对是可以提升审美的好方法,「iMuseum」是一款可以定位搜索你附近的美术馆画廊的APP,覆盖全球,包含了几乎所有地区的展览消息。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

「VART」这个可以说是「iMuseum」的升级版,它的功能很强大,「iMuseum」有的功能,它也有,除了定位全球查找展览信息和看其他人看展动态之外,还有很多功能,比如:

  • 它可以线上购票,APP上能看到近期开始的和即将结束的展览,看到感兴趣的即可在线购票,拿着电子票据就能去线下看展了。
  • 它可以通过场馆寻找展览,当你定位好后,直接选择场馆模式,就会出现这个城市的所有展馆,非常方便我们查找。
  • 它包含了很多国内外艺术家/作者的生平简介和作品介绍,以及相关的展览信息(简直不要太棒了!)还可以关注艺术家,以便下次接着观看。
  • 它可以全景线上看展,其实对于一二线城市之外的设计师来说,想看展是比较麻烦的事,一个是距离,一个时间,并且在这一年疫情期间,更是难上加难,但是,有了这个APP,就可以线上看展了。

大家千万别错过这里的展览海报设计,有一些还是很值得学习的,看到好的记得保存到手机里,充实自己的灵感库。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

看名字应该就明白这个app的主打内容了——杂志,这里全是日本杂志,这里大多数杂志的编排都是非常好的,提升审美的同时,还能让我们设计的时候有所借鉴。

在线浏览不方便,你也可以下载到手机里,只不过需要交28元的费用,在我看来还是挺划算的。当然,如果你只是看好了某一页,点击下方的保存,就会存到手机相册内。

设计师必备的12个APP,你有几个?

tips:这个app可能你在安卓的商店内搜不到,需要直接用网页搜索「杂志迷」,同样可以下载。

设计师必备的12个APP,你有几个?

「Behance」是一款Adobe旗下用于展示并发现创意作品的在线平台。这个APP很多人都比较熟悉了,是全球非常知名的分享平台,各行各业的设计师或爱好者在上面分享自己的作品,让你能看到除了平面设计外更广阔的领域。

设计师必备的12个APP,你有几个?

「ins」是Facebook公司的一款免费提供在线图片及视频分享的社区应用软件。

这个平台有明星,有素人,也有很多知名的设计师,它像一个大的朋友圈,每个人在平台上分享自己的生活照片或者设计作品,下面分享一些,我在上面关注的账号,这里有插画、海报、时尚、艺术、杂志、海报等等,看这些作品同样可以提升审美。

设计师必备的12个APP,你有几个?

设计师必备的12个APP,你有几个?

设计师绝不能局限于眼前的设计稿,要多去增长见识,多去开阔眼界,当你的知识面拓宽了,就会给你提供源源不断的设计灵感,所以,多去看和设计“无关”的东西,也是对于设计师大有裨益的,比如说历史、电影、时尚、摄影等等。

下面就给大家推荐几个能增长见识的APP

设计师必备的12个APP,你有几个?

这个APP原来的名字叫“全历史”,现在叫「全世界」,一看格局就是变大了,它还有网页端,功能基本是一样的。

这款APP我本人真的是强烈推荐!因为在这里你可以按照时间轴、关系图谱、时间地图查看各国,各个历史时代的历史相关内容。

根据导航你还能看到全画作、全古籍、全人物、全战争等内容。这些内容里面还藏了很多细小的分支,让你从头把历史捋顺了。

网上对于这款APP的评价:这是一个时光机历史地图 + 文学艺术编年史 + 典籍名著中英对照 + 全球博物馆在线阅览。惊喜的是,它还在不断更新它的数据库,所以,你还在等什么?快去下载吧!!

设计师必备的12个APP,你有几个?

「开眼」是一个全球精品短视频平台,汇集了动画、广告、影视、运动、创意、游戏、旅行等领域的优质短视频以及这些领域的创意人群。

和我们平时刷的短视频不一样,开眼APP上的视频都是精挑细选的高清视频,覆盖范围也很广泛,包含了旅行、运动、创意、广告、生活、科普等18个热门分类,界面设计的也不错,每日推送3-5条视频。

开眼,简直就是短视频界的一股清流,可以从这里看到很多优质的视频内容,比如下面这个二维世界的图形实验。

设计师必备的12个APP,你有几个?

「TOPYS」app是由中国成立最早、的创意垂直网站,TOPYS推出的移动端应用,是一个面向创意人、创意领域爱好者开放的创意学习平台。

这里包含了文案、视频、名人访谈、设计项目等等,汲取每日新鲜灵感,了解创意圈热门动态,满足审美体验。

设计师必备的12个APP,你有几个?

除了提升审美和增长见识外,我们还需要提高工作的效率,这就需要用到工具了。当然,网页端也有很多不错的设计利器,以后我再给大家分享,今天分享一些在手机上就能实现的小工具!

设计师必备的12个APP,你有几个?

「PantoneConnect」这款APP,我只在苹果商店里找到了,安卓的没有找到。

这个就是最近频上热搜的潘通公司所开发的APP,主要是帮助设计师简化他们的色彩选择和设计流程,提升工作效率。

它这里有很多色彩库,让你根据不同的印刷需要进行选择,还可以根据你上传的图片进行分析,提取出相应的合理的配色,比如我们在「国家地理」中下载的摄影照片。

它还有很多功能,就等大家自己去挖掘了。

设计师必备的12个APP,你有几个?

如果你无法下载「PantoneConnect」APP,你可以试试下载「色采」,功能一样很强大。

1. 相机实时配色

通过相机,捕捉下眼前的美景和心仪的色彩,将眼前的美景收录为你的专属色卡。

2. 灵感探索配色

从中西经典艺术作品、自然风光、电影动画等提取的600多种原创配色。

3. 照片智能配色

更精准的颜色识别算法,从自己的相片中发现配色灵感。

设计师必备的12个APP,你有几个?

现在吸引大家注意力的事物太多了,而且大多数会给你即时的快乐,让你欲罢不能,不知不觉间,时间就消失了,导致没有办法集中注意力去做事情,这个布谷番茄,就是一个管理时间的效率工具。

番茄时钟可以帮你追踪花在每项事务上的时间。还可以根据实际情况灵活地选择每个番茄时间段的具体长度。

设计师必备的12个APP,你有几个?

布谷番茄将你工作和生活中的待办任务与目标技能关联起来,让你做过的事务都成为累积技能成长的一部分。通过在“做事”和“成长”之间建立清晰的联系,让刻意练习变得简单,让你成为时间管理的高手。

设计师必备的12个APP,你有几个?

这里可以最多添加4个任务,如果想要添加更多的任务,需要充值12元钱,如果你确实在时间管理方面存在很多问题,那这12元钱花的还是很值得的。

今天分享了12款APP给大家

设计师必备的12个APP,你有几个?

互联网的发展,让我们学习更加便利,与此同时五花八门的各种APP吸引着我们的注意力,“杀掉”我们的时间。身为设计师,如果无法保持一个学习力,那就很难有好的发展,工作之余,我们完全可以利用通勤、如厕、睡前、午休等等碎片化的时间翻看这些APP,给自己一个提升的机会。

文章来源:优设   作者:研习设

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



设计交互-用户体验之心得篇

前端达人

1.为什么用户使用对齐标签填写表单的速度更快


想象一下,一个用户已经准备好注册您的站点了。他们会进入你的表格并输入他们的信息。字段标签对齐的方式会影响用户填写表单的速度。


你是想给用户提舒适体验,还是想给他们一个麻烦?

如果您想让他们的体验更快更容易,请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。


与左对齐和右对齐的标签相比,顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。

顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。


顶部对齐标签的唯一缺点是,它们可以使表单变得很长。但是现在用户滚动的频率越来越高,所以这不是问题。

通过减少字段之间的空白,可以减少表单长度。您还可以将表单拆分成多个页面,以使表单更短。


顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上,并使表格更容易填写。虽然他们可以使表单更长,

但用户将从完成表单所需的时间和精力的减少中获益更多。


如果顶部对齐的标签能够给用户提供更好的表单体验,那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。

它可以区别于用户填写表单还是放弃表单。


2.为什么对话框中的“确认”按钮在右边工作得最好


有很多设计经常会问我一些关于按钮上的问题那我今天也来献丑讲以下我对按钮的一些理解,这段时间针对这些东西研究了很久,在对话框中放置“确认”和“取消”按钮的位置。“确认”按钮是完成任务的主要操作。


“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。

根据它们的功能,最好的顺序是什么?“确定”按钮应该出现在“取消”按钮之前还是之后?


许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法,但实际上并非如此。它不能回答哪个位置对用户更好,以及为什么。为了一致性而遵循平台惯例的建议是不够好的,给设计师留下了空手而归的机会。


“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在,遵循设计惯例有什么好处呢?


如果某个设计约定对用户有害呢?设计师应该为了一致性而盲目地遵循吗?糟糕的设计实践是否应该持续下去,因为设计师们希望通过平台设计的一致性来解决每一个问题?


今天,有一些平台设计约定被广泛使用,因为它们是为用户工作的。但这里的要点是,平台设计的一致性永远不应该让设计师满意,因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。


按钮放置事项


人们可能会说,让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑,但它不是唯一的方面。


只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。

对于设计师来说,最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。


为什么‘确认’按钮在右边工作得最好?


当你通过了平台惯例的争论后,你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。


减少视觉固定


一些设计师认为,在第二个操作之前将主操作放在左边对用户更好,因为它更接近,因此,点击的时间更少。


这是有意义的,但您不能忽视这样一个事实,即用户在选择要采取的操作之前将查看他们的所有选项。

这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。


他们将首先看到左边的主要动作,然后查看右边的次要动作。然后,他们会把眼睛移回主要的动作,点击它。这将在多个方向上总共创建三个视觉固定。


将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始,然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定,给用户一个更快的视觉流。


用户只关注每个按钮一次,并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达,但是当您从用户的思维过程和视觉固定的角度来看速度时,将主操作放置在对话框的右侧实际上更快。



用户点击或操作按钮的心里状态


当用户单击辅助操作按钮时,他们期望应用程序什么也不做,并将它们带回到原来的屏幕。因此,“取消”按钮的功能类似于“后退”按钮。


当用户单击主操作按钮时,他们期望应用程序执行按钮所述的操作,并将其转到下一个屏幕。因此,“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧,主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。


它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧,将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向,其中右是前进的方向,左是后退的方向。


对话框中的“确认”和“取消”按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮。

不仅如此,在中国用户习惯了左右方向的模式。

将您的主要操作放在右侧,将次要操作放置在左侧,将使您的对话框按钮更容易、更直观地为用户所理解。


为用户提供更有效的视觉流畅度


将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流,也改善了任务流。

用户在扫描时不会跳过主动作按钮。当他们通过时,他们的眼睛就会盯着它,所以他们可以立刻点击它。


按钮放置在中间还是放置在左右两边?


另一个问题是设计师经常想知道他们是应该把按钮放在角落里,还是把它们放在一起。当您将主操作和辅助操作放置在对话框

的角中时,它将很好地映射到左右方向。但是,由于‘取消’和‘确认’按钮不是导航按钮,所以没有必要遵循方向映射。有时它弊大于利。

如果应用程序要执行用户无法撤消的关键操作,那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下,“取消”按钮的功能可能像“先前”按钮,但更重要的是,因为它充当安全按钮,以防止任何更改。


在左下角放置“取消”按钮的危险是,由于两个按钮之间的视觉分隔很大,它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起,可以使用户更容易在一次凝视中查看和比较这两个动作,从而选择最佳的操作和点击。

我们经常卸载软件的时候一不留神就会点错,或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。


3.下拉菜单加图标和不加图标的区分在哪里!


大的侧边栏菜单甚至会让用户看起来很不双我们应当如何解决这一个问题。

其原因是设计人师在做显示菜单项的时候会出现的问题。

当它们都有相同的视觉处理时,菜单项很难进行识别与区分。

如果不修复这个问题,会导致用户放慢他的浏览速度从而导致用户的流失在大的层面来讲,小的层面来讲阅读不爽导致关闭页面。


菜单栏没有主次之分

当您对菜单项进行全文本或全图标处理时,问题就会出现.当用户扫描他们想要的项目时,他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。


通过将用户的注意力引导到您的主要项目,使您的菜单可扫描。

要实现这一点,我们可以看下面设计形式来强调重点内容


主项图标


与其在每个菜单项上放置图标,还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。

次要项目上缺少图标,这使得它们能够得到其余的关注。


略大一点的图标


如果要使所有图标处,请稍微放大需要突出的图标。

稍微的增大会使视觉效果有很大的不同,同时字形更容易辨认,每一行的线高也会增加。让整个看起来更加有空间感一些。

让用户浏览阅读起来也会更加舒畅一些。

4.在按钮上避免颜色对比度错误


想象一下,当用户在您的界面上遇到一对按钮时,他们犹豫不决。

用户向左看,然后向右看,比较它们。经过一番思考,他们做出了选择。

他们的选择按钮做出决定,而且不确定,因为你的按钮没有层次结构。


不要使用相同的颜色轮廓按钮


甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样,但还不够。

他们仍然会竞争,因为他们的颜色对比度相等。

为了给主按钮更多的注意,削弱轮廓按钮的对比度。与其使用重颜色,不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高,以达到主要的按钮突出性。


不要使用黑色辅助按钮


设计师的另一个趋势是把第二个按钮变成黑色。他们认为,使用中性的颜色,它是不会竞争的。然而,黑色按钮更为突出,因为它有一个更高的对比度。



不要使用黑色,而要使用重颜色的色调,以使辅助按钮比主按钮更弱。要做到这一点,增加亮度和降低饱和水平。



不要在主色调上使用浅色


将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻,则中性辅助按钮将更加突出


要避免这一错误,请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力,但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色,这样第二个按钮就不会引起注意。




5.复选框的设计与使用方式哪种更好


在界面上使用复选框之前,您必须先问自己几个问题。复选框是否是在此上下文中使用的正确组件?如果是的话,最有用的显示方式是什么?


许多设计师没有问这些问题,自动使用复选框,没有太多的事先考虑。

因此,它们通过在错误的上下文中使用它们而产生可用性问题。


不仅如此,许多设计人员都很懒惰,期望前端写成默认选框完成这项工作,而不是

自定义复选框设计。但问题是,前端默认的复选框不能完成这项工作,因为它们的

可用性很差。


大多数设计人员在复选框上会犯的几个可用性错误,这些错误会破坏用户体验。



单选与重复的选择


在设计当中我们经常会遇到做选择性的勾选,往往很多设计师会犯的一些错误问题和选择障碍问题。

通过更大的目标来明确与用户进行选择更为明确

我们设计单选框的时候这不是秘密而是让用户做出选择,复选框是很难点击,因为他们的小击中目标。


设计师通常会让标签点击,但如果它不是直观的,那也于事无补。


通过将复选框转换为复选标记,您可以为用户提供更大的命中目标和更清晰的交互提示。



重复物品的重量及数量选择


有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取,并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。


undefined


总结以上两点,实际商用应用案例如下所示


6.在设计当中我们该如何控制内容的突出性与阅读性


新闻卡片的设计怎么才能突出信息内容


卡片内容有几种文本类型,提供不同的信息功能。让我们看看基本内容卡的文本类型。

首先是眉毛,它是一个明确的词或短语,用来描述内容的主题。

还有一个标题,它用一个句子中的几个单词告诉用户内容是关于什么的。

在此之后,就会有一个描述内容的正文。

最后,就是时间与操作的按钮

必须通过确定哪些文本类型对用户更重要,从而为您的卡片新闻建立文本层次结构。

此内容新闻卡片的适当文本层次结构为:

1.眉毛-可以是时间,可以是新闻分类

2.标题-最重要的是,因为它描述的内容最快。

3.正文-包含一个描述性段落,但阅读时间最长。

4.描述内容的正文对内内容的简要描述。

您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点,您需要使用浏览控制对文本类型应用适当的视觉强调。


控制用户的浏览顺序


通过适当的视觉强调,可以控制用户浏览的顺序,并指定反映文本层次结构的浏览模式。

当扫描遵循文本层次结构时,用户会浪费更少的眼球运动,并且可以更快地处理信息。


下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。

其他文本类型具有相同的强调度,这使得它们争夺用户的注意力。

其他设计形式及浏览方式


在内容颜色的控制上我们可以为三种,重要的突出的需要用户重点进行关注的就用黑色

例如:#333333      #222222   #454545     等等色值

在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可,

例如:#999999      #787878   #666666     等等色值更加容易记住

其他辅助的内容表达比内容正文更浅

例如:#bbbbbb      #A8A8A8    等等色值

说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你,有句话说的好:现在

是内容为王的时代,如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。


转自:站酷

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


UI/UE | 产品体验日记

前端达人


设计的思考不仅要注重表象层面,也需要围绕信息传达这一设计的本质功能,以充满自省的精神深化和反思自己的设计意识,即做到“好看、好用”。在设计过程中,要站在公司的利益上,懂用户所想,在每一个关键点都要带给用户意想不到的惊喜,这些往往都是通过细节体现出来的。





01.「微信」添加好友-扫描与被扫指尖切换


产品体验:

使用微信扫一扫添加好友时,如果对方打开二维码的速度较慢(网络不好/手机卡顿/操作不熟),为避免自己久等,可通过左下角的二维码入口将自己的个人二维码提供给对方扫描添加。

设计思考:

微信的扫一扫功能简直强大到不敢相信,除了我们日常要用的支付付款、物品查询、各种信息的获取等,还有一个重大的功能就是添加好友。不知道大家有没有碰到过这种情况,需要添加好友时,自己打开扫一扫,过了很久却发现对方还在功能的路径中徘徊,迟迟没有打开二维码页面,这时我们不得不说一声“你扫我吧”,于是自己从扫描页面返回,一顿骚操作,把自己的个人二维码给对方展示了出来。

微信在扫一扫页面左下角提供的个人二维码入口,便于在加好友出现问题时,随时由被动变为主动,指尖切换扫描与被扫的添加方式,节约用户时间成本以及缓解扫描等待的焦虑感。基于用户添加好友时所处的使用环境,考虑周全且人性化,极大方便用户使用。





02.「高德地图」录入车牌号-降低限行违章概率


产品体验:

在高德地图的导航设置中,录入自己的车牌号并开启避开限行提醒,在导航过程中如果途径限行路段,系统会有语音播报提醒并自动避开限行路段重新规划路线。

设计思考:

自北、上、广、深四个一线城市交通部分别出台汽车限行措施后,其他部分城市也相继出了限外政策,外地车牌如果想要在本城市随时出行,需要(部分城市通过摇号)获得本地车牌号方可。不管我们对交通路线有多熟悉、或者经过其他城市的限行路段,因限行导致的违章真是防不胜防,毕竟每个地方的限行政策都是通过固定渠道对外宣布,不会通知到每一个驾驶员,如果不能第一时间获得限行讯息,悔之晚矣。

使用高德地图导航,在登录后录入车牌号并开启“避开限行”,系统就会自动检测导航路线,如果要经过限行/限外路段时会自动重新规划,通过绕行来避让限行的路段,如果无法避开则提示:已无法为你规避限行路段,请合理安排出行。自动规划路线能够有效避免因限行导致的违章,给我们造成经济损失,尤其是驾照,毕竟一周期才12分。就算无法避开,也可以通过语音提前知道限行路段,并合理安排出行时间。

(PS:虽然很多用户感觉无需登录也可以正常使用,但登录之后可以享受更多特权以及更加优质的服务)





03.「支付宝」你想要的收款二维码样式是这样的


产品体验:

在支付宝的收款二维码页面截图时,系统预判用户有使用二维码收款的需求,通过弹窗提示是否需要保存二维码图片,自动去掉无关信息并统一规范样式。

设计思考:

移动支付自上线开始,微信支付和支付宝支付各自占领着半江山,只要涉及线上交易,绝大多数用户每天必定会选择其中一个使用,虽然两大企业的方向截然不同,但支付系统在用户体验方面都是一如既往的持续提升,以此来增加用户的粘性。

支付宝收款二维码页面触发截图,在截取成功的状态下,同时弹出保存二维码图片提示。跟设备截取的图片相比,单独保存的二维码样式更加简洁,且规范统一,信息内容更加聚焦,便于用户直接传送或打印使用。其实进入收款二维码页面,在下方原本就有保存图片入口,基于用户进入此页面的需求明确,对性子较急且耐性较低的用户来说,这个被弱化的保存入口,可能直接忽略(别不信,我见过有人手上拿着手机还在到处找手机)。截图时出现的弹窗提示,相当于上了一道保险,避免使用截图自行裁剪打印的样式不统一,导致付款用户心中原本就已存在的默认收款二维码样式发生变化,形成认知负担。





04.「抖音」暗示用户-好看就要分享


产品体验:

在抖音短视频页面停留一段时间后,分享图标会自动变成最近常分享的某个用户头像,暗示用户好东西要分享。

设计思考:

抖音作为当前最火的短视频(直播)平台,相信很多用户即使不经常玩,但最起码会玩,虽然有部分低俗、劣质的用户在破坏着平台的规则,但整体看来是利大于弊的,其他的交给人心。下载抖音的用户大部分获取来源应该是来自于他人的分享,一传十十传百,最终传到人手必备,所以平台是相当注重分享功能的用户体验。

抖音的分享功能,其实还有一个小细节,当我们停在某个短视频页面一段时间时,原本的分享图标会变成最近分享的用户的头像。用户对分享功能都有常规的认知,当我们在观看某个视频一段时间后,系统自动评判该用户对此视频感兴趣,基于用户看到感兴趣的东西就喜欢炫耀、分享的心理(比如“孙悟空到此一游”),系统将分享图标变成用户头像,意在提醒观者分享,以达到最大化传播可能的目的,以及为平台拉取新用户。





05.「智行火车票」搜索攻略-确保使用的流畅性


产品体验:

首次打开智行火车票的搜索功能,会自动弹出搜索攻略,以指导用户可搜索的范围及使用规范,后续再次打开搜索即恢复常规用法,如果再次了解,点击搜索攻略即可。

设计思考:

对于搜索功能,可谓是熟悉的不能再熟悉了,千篇一律的输入关键字即可,大不了重新再来。搜索是产品中不可或缺的一部分,无论打开哪个App,都能很快找到,但如果搜索功能做的好了,也是用户转化的关键流量入口,比如搜索方式、呈现样式、搜索引导等,用户体验不容忽视。

智行火车票APP的搜索攻略就是在合适的时间、合适的地点准确的传达给用户。首次进入,即自动弹出搜索攻略教育新用户,明确的告知使用搜索功能可以搜什么?怎么搜?避免用户一打开就直接撸字,而造成使用错误的概率提高以及影响搜索结果的准确性,用户一旦碰壁,很有可能转身就离开。自动弹出的搜索攻略由被动变为主动,可以提前告知用户搜索范围及关键词示例,降低出错的几率,让整个搜索流程更加顺畅,为后续的使用提供便利,减少用户的流失。





06.「虾米音乐」评论-一键表达心情



产品体验:

在虾米音乐听歌时,进入评论功能,除了可文字评论外,还能表达听歌时的心情,随时查看有多少同样心情的人在听这首歌,很有代入感。

设计思考:

文字是我们交流常用的元素,但很多时候因使用的方法不当而造成含义上的变化,比如一段话后面加个感叹号,到底是消极还是敌意?声音也是一样,当我们开着车对行人按喇叭,是表示礼貌还是愤怒?而表情则是不同,它表达的是一种类型,比如一个笑脸,可以理解为满意、开心、高兴等。表情除了可以委婉的表达自己内心的情感之外,也是因为表情的无责任性,你会听到人说,请注意你的言行,但没人会说,请注意你的表情包。

虾米音乐APP在歌曲的评论功能,除了有文字评论之外,还可以表达听歌时的心情,即表情评论。进入评论页面,首先看到的是某某等几人使用的什么样的心情评论,并提示共有多少人参与,引导用户接下来该做什么,让用户快速地进入到产品使用中,给予了明确行为操作的指令,触发并提高了用户的参与度。另外使用表情相比文字评论更容易操作,系统预设好可供用户选择的表情包并附带文字提示,用户无需思考便可一键操作,很大程度上降低了完成的难度。事实表明,同样能达到目的的办法,简单的是最实用、也是。





07.「美团」收货地址-二次提醒降低出错的概率


产品体验:

在美团提交订单页面选择好地址后,页面上滑,详细地址会悬浮在导航栏,便于用户二次确认或修改。


设计思考:

线上购物已经成为了我们的家常便饭,外卖行业解决着我们“吃”的问题更不例外。通常我们在选择好商品后,地址作为重量级的信息都会优先展示在订单页面的顶部,首先基本都会提供一个默认地址,如果不需要进入地址修改即可。纵然如此,依然有部分用户因为急于下单,后续发现地址错误,就需要联系商家修改地址或者取消订单重新下单,浪费时间不说,还会影响心情。

美团APP在提交订单页面,针对地址方面相当于加了一道保险。用户在选择完地址上滑页面后,详细地址悬浮在的标题栏上,点击可直接修改收货地址,虽然不一定每个用户都能看到,但长时间悬浮在页面顶部,时刻都在提醒着用户,只要稍一抬头,即可看到醒目的大字(地址),便于用户潜意识的浏览或眼睛的余光扫描,发现有误及时修改,降低下单时地址出错的概率,考虑周全,给予更好的用户体验。





08.「菜鸟」下拉刷新-趣味化的“空投”


产品体验:

菜鸟APP在页面下拉刷新的过程中,会有一个纸箱从空中落下的动画效果,类似空投,仿佛在说“你的补给已送到,请及时查收”,非常贴合平台的属性及特征。

设计思考:

下拉刷新早就不是什么新鲜的东西了,几乎所有的应用里都会有这个功能,通常都是一个持续的动效在告知用户,页面的数据正在加载,请稍等,市场上很多APP的刷新样式都是大同小异。不过一旦做好刷新样式,就不仅仅是告知用户当前页面状态这么回事了,比如下拉刷新前后两种状态借助过渡动效连接到一起,让用户了解界面到底发生了什么改变,以及在刷新的过程中如何留住用户继续等待,避免用户焦躁的情绪......

菜鸟APP在下拉刷新的过程中就使用了趣味性的动画方式,首先通过空中出现的箱子缓缓落到地面,有趣又贴合产品整体的设计概念,用生动形象的情感化设计反馈平台行为,为人机交互增加了趣味性和互动性,而且还可以缓解用户在等待刷新过程中的焦虑感;其次,这种动效可用帮助用户理解屏幕上发生了什么,也会让用户有所期待。

(看到这个动效,有没有似曾相识的感觉“哇,那边有空投,马上要落地了,赶紧上车冲过去”)





09.「美团」匿名差评-降低商家对用户的骚扰


产品体验:

对美团的订单进行评价时,如果选择差评(1~2分),系统将自动开启匿名开关以便于用于匿名评价,商家是无法查询到匿名用户信息的。

设计思考:

评价在商品页面展示给所有用户,对店铺商品起着至关重要的作用。95%的用户购物之前都会参考评价,好评会增加用户购买信心;而差评可能会让用户放弃购买这个商品,甚至认为这不仅仅是劣质商品,更有劣质店铺的潜在想法。其实有很多商家都有通过刷单来提升店铺的销售量和买家秀的质量,作假都尚且如此,何况是真实用户呢?所以商品一旦有了差评,不仅会影响店铺的整体动态评分和好评率,还会降低店铺排名,很大程度上会影响其他用户判断及产品的转化率,所以商家一看到差评就激动得马上打电话和买家沟通改评价,低头认错,尤其是新店或者新品有差评时,不断的联系(骚扰)会给消费者带来一定的困扰。

美团APP的订单评价如果选择差评,系统将自动开启匿名评价,由被动变为主动,避免用户因情绪化或忘记打开匿名,而遭受到商家电话的骚扰,通过补偿被要求修改或删除差评。当然,如果用户不想匿名,关闭开关即可。匿名评价不仅降低用户的困扰,还能提升商品评论的真实性,以协助平台通过大数据对整体店铺进行排名和评分展示,减少对后来消费者的误导。

(杠精思维“这样岂不是让很多键盘侠来恶意给店铺差评”。其实别忘了一个前提,就是必须要通过下单支付并等待订单完结后才可以进行评价,毕竟大部分用户不会刻意这样做,任何产品不就是满足80%以上的用吗?)





10「钉钉」保护信息隐私的密聊


产品体验:

从钉钉好友对话框的右上角进入设置页面,点击进入密聊,即可对聊天信息上一道锁,保护信息隐私安全。

设计思考:

众所周知,我们在聊天的过程中,信息很容易泄露,有很多窥探用户隐私的程序,比如进入某些网页会提示需要获取用户位置、读取通讯录等都属于隐私。尤其是社交类型的应用,会有相关保护交流信息的安全措施。如消息撤回、阅后即焚、动态浏览权限等都有一定效果。

钉钉推出的密聊功能就是聊天信息的一道安全锁。进入密聊后,消息禁止复制和转发、头像名字打码防截屏、不可被录屏、消息通知不显示内容等,很大强度上保护交流信息的隐私,给用户带来安全保障。

(有人会问,用微信的人更多,为什么没有密聊功能呢?从用户群体和性质来分析,微信主打社交,男女老少通吃,基本上都是嗨聊、打发时间或平时的常规交流等;而钉钉主打的移动办公,主流的用户基本趋向于白领类型的群体,一般属于工作交流,很多聊天都涉及到商业信息,包括一些文件和商业机密,谁都清楚商业机密泄露的严重性)




结语:


设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。



转自:站酷

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



面向客户的设计:理论篇

资深UI设计者

导语:在面向客户的设计系列文章中,主要分为两部分。此文为第一部分,讲述什么是根据客户意愿进行设计的理论;而在第二部分,作者将会深入地介绍在电子商务网站重新设计项目中,使用该方法的一个实际示例。

作为UX设计师,我们喜欢采用“以人为本”的方法,即在解决问题过程的所有步骤中引入人的视角。无论我们是在与客户交谈,还是与用户共同创造解决方案,这种思维方式都允许我们推出满足人类需求和目标的产品和服务。

问题是,两个人在几分钟内就能相互理解信息在数字产品中很难复制。不管人工智能专家怎么说,当今存在的任何商业技术都无法替代与另一个人的对话。

而且,不管我们如何以人为中心,我们仍然在为比特和像素设计,数字产品仍然是数字化的。

然而,作为用户体验设计师,我们的目标是设计这些数字场所,以满足人类的需求、目标和动机。我们经常问自己的问题是,我们能让我们设计的数字世界更人性化吗?

我们得出的答案是,受限于媒体的一些限制,我们需要设计一种体验,在这种体验中,随着数字场所的变化,尽其所能(在没有聊天机器人的情况下)让用户获得近似于一次面对面的对话。

所以问题是:我们能在多大程度上让我们设计的网站、产品和服务与用户进行更多的“真实对话”?

一、定义用户和企业之间的真实对话

在数字/网络在线环境中,用户和企业之间的“真实对话”是什么?

最初,企业按部门或业务线组织网站导航。如:企业有这5个部门,所以这5个部门将在我们的主页顶部。我们的假设是——而且通常仍然是——网站的业务和最终用户在需求上100%一致。

起初,这是因为客户在学习如何使用互联网时期望值很低。没有太多的竞争性的东西吸引他们的注意力,也没有一个公共平台来记录他们的抱怨。

多年来,人们的上网的习惯已经发生了变化。一定程度上,是因为我们工作做的好,客户开始期望企业表现得更“人性化”。

换句话说,客户希望在网站上找到自己所需的任何东西,就像询问店内客服代表一样容易。并且他们希望能够从网站/应用程序上的任何地方满足他们的需求,而不仅仅在菜单或顶部的主导航栏。

在数字资产应该以更“人性化”的方式表现的预期背景下,我们将“有机对话”定义为客户和品牌之间的自然流动,不论他们遇到了什么数字媒体。

我们还认为,通过设计为基于意图的导航(我们称为“为客户意图设计”)我们可以创建出一种“有机对话”。

只有当我们了解,记录和设计客户与数字媒体交互时打算做什么,而不是针对企业仓库中的内容进行设计时,才能实现这一点。

换句话说,我们问一个问题:“当客户访问网站或使用产品或服务时,打他们的目标是完成什么任务?” 然后,我们设计导航以填写答案。

二、导航作为有机对话的起点

在详细介绍如何围绕客户意图设计导航结构之前,让我们先暂停一下,考虑一下导航本身。

导航是数字财产里非常重要但被低估的结构。现在的导航结构通常是顶部导航(即,“首页”顶部或菜单中的那些链接)和一些带有相关内容的页面导航的组合。

但是,无处不在的概念往往会随着时间的推移而过时,导航需要改进的地方还有很多。

如果我们退后一步想想,把导航看作是数字资产和用户之间的有机对话,那么导航将成为促进人类交流的桥梁。在这个角色中,导航在设计中具有新的意义。它成为了数字资产与其用户进行“有机对话”的一种方式。

三、主要思想

考虑到所有这些因素,我们不仅要把导航视为层次结构(即每个部门/业务线),并且要采取进一步的措施。结合全面的层次结构,创建横向的、基于意图的导航结构,以促进品牌与客户之间的“有机对话”。

我们基于目的的导航想法源于普遍的信息架构和 Dan Willis’ Intent Paths 的目的路径图。

此图形表示人们可以用来浏览软件应用程序或网站的路径。六边形代表数字属性(例如网页)上的个位置。位于六边形中间的人可以使用几种路径(即网页上的链接)来到达下一个位置。

在左边,我们看到了一个客户路径的例子,它通常定义在软件项目中。如果你以前从事过软件项目,那么你会认为这是一条基本路径。

基本路径是假设用户有一个单一的任务,一旦他们开始执行某个任务,用户就会完全专注于他或她的任务。在此过程中,用户没有分心、问题或想法。

太多的导航是以这种非常线性的方式构建的,以确保客户被迫走在基本路径。不幸的是,这种方法在现实生活中没有起到作用,而且它肯定不能促进自然的对话。

对于用户或客户来说,将路径选择限制为=再非常线性的、基本路径上,感觉更像是业务告诉他们应该去哪里,而不像业务支持他们去他们想去的地方。

因此,强制的线性导航会降低用户的内在动机(定义为做一些没有任何明显的外部奖励的事情),减少:

  1. 能力,或者是控制和掌握你所处的网络环境及其结果的愿望;
  2. 自主性,或行使自由意志的愿望。

现在,让我们看看右边的六角图形,更真实的路径。

在这个例子中,用户通过快乐路径门,然后决定向右走。很快,他们的环境发生了改变,以支持实现他们的意图。

通过获得权限,用户为系统提供了有关其访问意图的线索。使用更真实的路径,不管他们是否停留在快乐的路径上,导航路径都会变形并根据其动作进行自定义,因此不会有导航“错误”要恢复。

考虑到用户在选择和培育数字接口时所考虑的因素,数字生态系统的想法增加了能力和自主性,从而增加了内在动力。生态系统变形的能力取决于根据满足客户意图建模的声音信息结构。

四、围绕客户意图设计导航

如果我们设计的数字导航结构能够支持“真实之路”,那么我们将创造人与人之间的绿色对话,并使客户能够实现其对数字财产的计划。

反过来,这将增加客户的内在动力,使他们更加快乐和忠诚,并最终使企业盈利。

此外,横向的、基于意图的导航支持:

  • 客户体验:一个人对品牌的感知是决定客户盈利和留住客户的关键因素,它是资产负债表上的无形价值,这是他们的善意。
  • 可查找性:当客户能够根据他们的需要,而不是根据业务项目的路径去找一个站点或产品时,查找信息的方便性得到了提高。
  • 喜悦:“他们怎么知道我在找它?”这种意想不到的魔力,这是大多数企业所缺乏的认知,它是今天能否赢得市场中竞争的关键因素。当你知道某人的意图并设计信息结构来满足这些意图时,创造这种愉悦感比你想象的要容易得多。
  • 客户忠诚度:随着时间的推移,有了足够的重复、有机、愉快的互动,客户忠诚度——也被称为“圣杯”——得到了极大的提升,使得SWOT分析中的T失去了它的重要性。当公司的价值观符合顾客的价值观时,竞争就不再是竞争。

重要的是要记住:导航不仅仅是关于“导航栏”或者“汉堡包菜单”,它也与公司部门、业务线或公司政治无关。坦率地说,这甚至与产品和服务无关。

导航是指服务于客户想要在网站或产品上做的事情,或者称为客户意向。

通过设计你的信息结构来满足客户的意图,你正在设计一个有机流程,您正在帮助客户满足基于他们的想法、他们的需求和他们打算做什么的信息,而不是基于您的业务结构。

你也没有强迫用户去寻找你的层次结构,而是帮助他们根据他们的需要探索。这允许有机对话的出现。



文章来源:人人都是产品经理   作者:喵吉斯蒂

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




日历

链接

个人资料

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

存档