首页

微交互:设计师的超能力

前端达人

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

大概几周前,在他的朋友和孩子们的大力劝说下,我并不那么精通互联网的爷爷加入了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




转自:站酷

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

以用户体验之名,谈谈企业协作平台的产品设计

前端达人

从雇佣关系看企业级协作产品的设计理念和原则

今年的新冠疫情突发,让企业级协作产品的赛道热闹了起来。前有钉钉,企业微信,后有飞书带刀入场,其他厂商看了眼红,赶紧行动起来,所以在这片一眼望不到头的草原上,你还能看到百度的如流,美团的大象,网易的popo等等。

如今疫情控制的结果也算喜人,经过大半年的时间的市场锤炼,现在这些个企业协作平台也需要被怀揣着审视的目光来看看接下来要走的路。

按照公司的要求,我在工作中频繁的使用到“钉钉”这款产品,接触的这4年多时间大概也就是企业协作平台的发展史了,我试着总结了一下:

起初产品设计的初心也许仅仅是为了员工之间的交流,依托公司的组织架构,不需要在添加好友/通过验证之类的繁琐流程直接沟通,有事说事贼方便。特别是消息回执(就是被万人唾骂的“已读未读”)更看出来了钉钉对沟通“效率”的重视。

坦诚的讲,钉钉这点我很认同,我自己也是一名用户体验设计师,过去做企业级应用的核心就是围绕 “效率”去做的,始终把用户路径的长短作为我个人无形的KPI,面试跟人吹牛X的时候也是举例说的这些。

但B端的设计就仅仅是所谓的“效率”么?唯效率的设计就一定好么?


01 效率的背后也许是姿态的倾斜


你有没有不想打开钉钉(甚至某一时间想卸载掉)的冲动?阿里巴巴当初推出钉钉这个在线办公协同产品,出发点是为了方便企业内的办公协作,沟通记录、文件资料、流程审批、员工名录等都能有效得到管理,防止丢失并随用随取。


后来味道变了,以“钉一下”为例,发起者可以无限次的对接收者发送信息并以“增强提醒”语音的方式提示。看的出来,这种交互设计本着触达无障碍去做的,但却忘记了设计使用门槛,从而造成了“谁有事谁牛X的局面”,如果沉下心来研究,会发现在这过程里情绪的变化是及其明显的:

企业管理学里有一条著名的学说“峰终定律”(后被广泛应用到用户体验领域里),大概是意思是:“在一段体验的高峰和结尾,体验是愉悦的,那么对整个体验的感受就是愉悦的”。

那么钉钉的这些个机制可能就是峰终定律的反面教材了。每一个企业级协作平台企业都在标榜自己的创新和功能的全面,殊不知这就是典型的通过产品功能机制进行的微观管理,间接加剧雇佣关系的僵持。甚至一定程度上变成了控制…员工和企业的关系我不好说,但这些企业协作平台真真实实的在彼此关系上扫满了盐。


02 固化的设计理念


翻看了众多大厂的B端设计原则和设计理念,无一例外,所有的被沉淀下来的“原则”几乎都是“效率”,甚至一提到跟B端相关的设计就永远是“效率!效率!!效率!!!”:

以效率为核心的设计帮助任务流更的完成,就这点无可厚非,我自己也是一名用户体验设计师,过去做企业级应用的核心就是围绕“效率”去做的,始终把用户路径的长短作为我个人无形的KPI,面试跟人吹牛X的时候也是举例说的这些。


然而不同于C,企业协作平台是企业要求员工统一使用的协作产品,为了方便信息集中管控,绝企业员工被迫通过一次学习后逐渐转为不用动脑子的肌肉记忆。B端员工只想要“干完活”,C端的“图新鲜”是发自内心的去找乐子。所以当被强迫完成任务的情况下,大部分情况下是一个伪命题。


03 设计原则要讲究“真人性”


通过审视的目光去看当下的设计原则,企业级协作平台经历了起始期的“沟通刚需”和发展期的“功能堆叠”后,未来应该多考虑“员工与组织”/“员工与企业”的大命题,希望是以“桥梁”的姿态出现,以帮助双方更好的完成工作为目标去设计:

这其中有两点需要着重注意:

1. 效率从人性出发

先说个题外话,过去,我们在求职时期的路径大概率是到某几个招聘网站上挨个填写个人信息/工作经历/获奖情况,但伴随着 OCR技术成熟,一个word/pdf上传,自动识别了所有信息,帮助企业和候选人大幅的解放了劳动力。与之类似的是:日报周报月报,除了工作总结偏脑力劳动需要人工产出之外,工作内容这种条目的列举完全可以帮员工包办了,毕竟钉钉上记录了大量的工作文件和日志。单靠一个周报模版丝毫解决不了问题。

2. 情感化设计不能只停留在表象上

之前跟钉钉的设计师有过情感化设计的交流,对方对情感化的理解更多体现在人文关怀上,特别是在打卡这个功能上,超过几点下班打卡后会有一句暖心的话激励员工。对此我还是保留意见,理智支撑我不许叫这个设计为情感化设计,因为美好的文字和漂亮的图形都只是表象而已,并没有帮助用户解决问题,所以顶多就是图形设计,说的好听点是graphic design。

我理解的情感化,从始至终要以解决用户问题出发,与其有时间画画漂亮的图形,不如去做业务的横向打通,帮助在深夜快点打车回家来的更实在。


总结一下


总的来说就目前国内像这种B端企业级应用真的还就是处在功能打通的阶段,未来去balance雇佣关系的大局面市场还是很大的,从这个角度来看这个赛道还有的一拼,期待更多的大厂入场来改善僵持的雇佣关系。



转自:站酷

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


UI界面设计常见的布局构图

前端达人



构图是指作品中艺术形象的节后配置方法。是造型艺术表达作品思想内容,并获得艺术感染力。在视觉艺术中常用的技巧和术语,特别是绘画、平面设计与摄影中。在UI设计中,构图的主要作用是:构建和谐稳定的页面布局。



1.1 最平衡的构图对称构图1:1 

左右对称上下对称的构图,一般不会有太大问题,因为人类对世间万物的观察来看,因为在生活中绝大多数的事物都是对称的。


对称平衡的形态在视觉上有自然、均匀、协调、整齐、稳重的美感,复合用户的视觉习惯。



“对称构图”是将版面分割为两部分,通过设计元素的布局让画面整体呈现出对称的结构,具有很强的秩序感,给人安静、严谨和正式的感受,呈现出整齐、平稳、经典的气质。在得物(毒)中应用体现平台的核心正品与品质。



1.2 设计中不平衡原因

视觉错觉是指人们对外界事物的不正确的感觉或知觉。最常见的是视觉方面的错觉。产生错觉的原因,除来自客观刺激本身特点的影响外,还有观察者生理上和心理上的原因。其机制现在尚未完全弄清。



(1)缪勒—莱尔(Maller-Lyer Illusion)错觉:1989年由缪勒一莱尔(F.Muller-lyer)设计,末端加上向外的两条斜线的线段比末端加上向内的两条斜线的线段看起来长一些,其实两条线段等长。

(2)艾宾浩斯错觉(Ebbinghause Illusion):看起来左边中间的圆比右边中间的圆大—些,但实际上这两个圆的大小相同。

(3)庞佐错觉(Ponzo Illusion):中间的四边形是矩形,而不是顶边比底边宽的四角形。

(4)厄任斯坦错觉(Ebrenstein Illusion):中间矩形的四条边看起来是弯曲的。

(5)黑灵错觉(Hering Illusion):中间两条线是平行的,但看起来是弯的。

(6)菲克错觉(Fick Illusion):垂直线段与水平线段等长,但看起来垂直线段比水平线段长。

(7)冯特错觉(Wundt Illusion):中间两条线是平行的,但看起来是弯的。

(8)波根多夫错觉(Poggendoff Illusion):被两条平行线切断的同一条直线,看上去不在一条直线上。


1.3 不平衡中的平衡构图

在整体的页面平衡的情况下,同样还需要考虑视觉上的平衡。


任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一个元素有某总视觉联系,而这个视觉联系往往是看不到却可以感受到平衡感,在平面海报中的平衡原则得到了最大的应用。



如上图所示,三少爷的剑这个海报设计,将整个海报布局进行几何化分析,地面为一个倾斜的平面,人物为一个垂直于地面的一个个体,人物上方为主体文案。几何化后如同一个倾斜的斜面放置了一个倾斜的天平,最后一个“剑”字、与下方英文如在右倾斜天平上面的一个稳定的砝码。然而整体还是不够平衡,设计师通过燕十三的视觉视线、以及围绕他的杀手用剑指向他的方向为力的方向将整个页面进行平衡。通过用剑多少占比、字体大小等等的细节使得整个页面达到最微妙的平衡点。这样的设计之后达到一种平衡而有不平衡的微妙感觉,不平衡感体现整个页面的“ 动 ”武侠之感油然而生;而平衡感表达了整个页面的“ 静 ”冷冷的肃杀感、高手的寂寞感油然而生。



让设计中的视觉要素在画面中页面平衡。可以通过字重、颜色、形状、线条、图片占比等等,这样可以增加整体页面的平衡感。通过小米中的构图可以看出上方所有图片文字偏左,通过右方一个高亮的按钮进行平衡感的设计;下方文字左边文字较少用重的深色的字体,而右边文字较多用轻且浅的文字这样的设计达到整个页面的平衡感。



2.1 黄金分割设计法 

黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618。这个比例被公认为是最能引起美感的比例,因此被称为黄金分割。



设一条线段AB的长度为a,C点在靠近B点的黄金分割点上,且AC为b,则b与a的比叫作黄金比,黄金分割具有严格的比例性、艺术性、和谐性,蕴藏着丰富的美学价值,这一比值能够引起人们的美感,被认为是建筑和艺术中最理想的比例。 

画家们发现,按0.618:1来设计的比例,画出的画最优美,在达·芬奇的作品《维特鲁威人》、《蒙娜丽莎》、还有《最后的晚餐》中都运用了黄金分割。



UI页面设计中的黄金分割比的应用有很多如上图所示,页面整体功能摆放位置,遵循黄金分割比的分配表达出来整体页面更加的和谐聚焦。


2.2  九宫格设计法


九宫格构图有的也称井字构图,实际上属于黄金分割法的一种形式。就是在画面上横、竖各画两条与边平行、等分的直线,将画面分成9个相等的方块,在中心块上四个角的点,用任意一点的位置来安排主体位置,就是九宫格构图。



实际上这四个点都符合“黄金分割定律”,是表现画面美感和张力的绝佳位置。当然在实际运用中还应考虑平衡、对比等因素这种的构图原则在海报以及摄影中有着极大的使用。



3.1 UI页面布局的格式塔原理 

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。



创始人提出的5项基本原则:简单、接近、相似、连续、封闭。


3.2 简单几何构图法

简单原则就是具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体。



简单阅历暗合构图法则,例如常见的三角形构图,均衡构图,对阵构图,向心式构图,对角线、x型构图等,其目的都是为了在复杂的信息环境中,构建更易懂的整体。


3.3相似构图法

相似原则指的是在某一方面相似的各部分趋于组成整体,强调内容。而接近强调位置。人们通常把那些明显具有共同特性(如形状、运动、方向、颜色等)的事物组合在一起。



由上图可见,当用户看到这个这个页面的时候,会自觉的把上面5个icon看作一个整体,因为他们的颜色形状都是相同的;文字颜色与字体大小相同会被自然的看作成为一个相同的功能,如同样的红色都是价格,同样的黑色都是商品名称;相同的汽车图片直接清洗的都可以归类为同列表商品。


3.4接近构图法

单个视觉元素之间无限接近,视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体,而单个视觉元素的个性会减弱;



相关元素会尽量接近,不相关的尽量远离。这种构图它强调化繁为简,去除一切与内容无关的装饰性元素,突出内容本身,好让重要的信息及功能更容易被关注,让用户增加更清晰和直观地进行浏览。在这种排版设计中,您几乎看不到区分内容的分割线,他通过大间距完成了视觉层次的划分,留白是它们最大的武器。



彼此相关的项,归组在一起。如果多个项相互之间存在很紧的亲密性,他们就会成为一个视觉单位,而不是多个孤立的元素。这样有助于组织信息,减少混乱,为读者提供清晰的结构。






转自:站酷

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

2021年10个LOGO设计趋势

前端达人

在经历了一个不太理想的新十年开局后,年轻人们迫切需要重塑品牌。幸运的是,以下2021年的标志设计趋势完全可以胜任这项任务。

观察来自世界各地的logo设计作品,他们的预测代表了设计环境的变化。虽然去年的趋势集中在通过新技术进行革新,但2021年标志趋势中的一个共同主题似乎是限制条件下的创新。过去的一年可能在很多方面限制了世界,但是2021年的标志设计师们还都在继续努力着。



  • 彩色玻璃

  • 透视图

  • 简单几何

  • 发散字母

  • 真实写真

  • 原始对称

  • 古怪的人物

  • 现代象征主义

  • 静态运动

  • 类似配色方案


 

标志设计作为一项相对现代的发明,往往在过去的技术和局限中寻求灵感。在2021年,许多标志设计师在过去时代的彩色玻璃窗中找到了启发。


undefined

   

当应用到现代设计中时,将图像分割成纯色碎片,给普通概念增添了一点抽象感。彩色玻璃也与神圣联系在一起,因为它起源于中世纪教堂。这可能不是巧合,这种标志趋势经常与美丽的自然景观结合使用。在一年的大部分时间被困在室内之后,我们可以期待我们脆弱的生态系统将在2021年的彩色玻璃标志设计中得到尊重。


  


正如标志设计师林登·莱德(Lindon Leader)曾经说过的那样,伟大的设计源自简洁和清晰。这两个优点使标志设计能够有效地向观众传达品牌的复杂身份。这就是为什么许多过去的标志潮流都集中在极简主义和平面设计上。




虽然2021年的logo设计师们决不会放弃这种方法,但他们正寻找在过度简化中失去的一些魔力。一个流行的标志设计趋势是融入微妙的视角。使用基本的绘画技巧,如线性透视,曲率或缩短,设计师能够创造深度的错觉,而不会使设计复杂化。



其效果是,标志给人的感觉很突出,品牌从页面上一跃而下,而半平面的设计技术,一直以来都是为设计师服务的,但至今仍然完好无损。

  

形状是构成意象的基石。但是,尽管三角形、正方形和圆形等原始形状一旦打下基础,往往就会被淘汰,但它们纯粹的简单却有力量。



2021年的设计师们正利用这种力量,用简单的线条和形状制作出标志。这种对形状极简主义的严格遵守给了这些标志一种刻意克制的气氛,允许他们在其他地方自由发挥,比如在丰富的颜色饱和度上。


undefined


这种方法的另一个特点是,简单的分层可以产生一种结构和深度的错觉,这符合我们前面提到的透视图趋势。通过纯粹的造型语言,设计师能够创造出易于解析、令人难忘、色彩鲜艳的logo。


  

基于字体的文字标记标识有着直截了当的名声,无论好坏。虽然他们使品牌名称成为整个标志的焦点,因此更令人难忘,但他们没有留下太多的空间,为创意铺路。但是2021年的标志设计师们正在一个字母一个字母地改变这种印象。

undefined

undefined


具体来说,我们看到越来越多的单词标记中的一个字母被夸大了。这可以是一个颜色突出的小写的“i”,或作为一个突出的筷子形成一个大写的“H”。这个不同的字母不仅创造了一个吸引眼球的兴趣点,它给予品牌最好的选择:一个传统的,基于类型的标志,也不怕打破规则。



  

人们凭直觉寻找其他面孔,这是一个有据可查的事实,这就是为什么肖像画有助于在设计中建立情感联系。这些面孔越真实,越容易辨认,联系就越深。

undefined


因此,2021年更多的标志设计师开始转向反映不同种族、文化、性别、年龄段等的肖像画。与媒体过于拥挤的同质表现不同,这种方式创造了真实的印象,有助于人们在瞬间与品牌建立联系。这些标志可以从简单的,平面的人物肖像到详细的说明性技术。


归根结底,设计师们厌倦了那些让人感觉不亲切的形象。归根结底,无论一个标志是在讲述品牌背后的人还是品牌服务的人的故事,人都是关键。


undefined

undefined


 
  

平衡是标志设计的基本原则之一,而对称也许是其最极端的表现。对称的标志从中间分开时,两边是相同的。


虽然相同性和可预测性似乎是冗余的同义词,但对称设计完全是关于强度的。它们让我们想起了建筑,无论多么高大复杂,它们的设计都是为了站稳脚跟,它们通过完美的对称平衡来实现这一点。


undefined

undefined


这种原始的对称性允许标志包含线条艺术,感觉既不可能复杂又完美有序。但即使对称在几何设计中很常见,我们也看到这种趋势在手绘徽标中找到了归宿。无论是设计师追求的完美还是实力,有一点是肯定的:2021年的标志建筑是为了经得起时间的考验而建造的。


undefined

undefined


 
  

虽然logo设计师在真实人物的表现上处于领先地位,但2021年的其他许多人则通过漫画和夸张的幽默来对比这一点。我们正在看到越来越多的以插图为主要内容的logo呈现出诙谐,甚至古怪的概念,从玩老鼠的医生到华丽的甜甜圈花花公子。


undefined

undefined


从事舒适或娱乐的企业希望能让他们的观众放松,而设计师们则用散发着博爱气息的logo来回应。最终,这些异想天开的设计让顾客觉得他们找到了朋友而不是品牌。


  

逻各斯的根源一直是古老的象征,从升起的凤凰到不朽的女神,再到无所不能的眼睛。就像古代的象形文字一样,它也是一个标志的目的,通过简化的图形来传达信息。


undefined

undefined


通常,logo寻求创造他们自己独特的符号语言,但在2021年,设计师们正在疏导古代符号的力量。其效果是将人们普遍理解的、经典的美德与奋斗品牌的愿景联系起来。开始一个新的企业是一个信仰的飞跃,这些象征性的标志承载着一个启示的承诺。


undefined

undefined


 
  

 

undefined

undefined


这意味着运动跟踪器、流体形状、飞溅粒子和动作线的增加。对于那些希望创新的企业,比如科技品牌,这是一个标志潮流,肯定会引起轰动。它提醒顾客品牌不仅仅是一种产品或服务:它是一种活的东西。


undefined

undefined


 
  

随着每年的标志设计潮流,我们常常期望找到令人眼花缭乱、革命性和颠覆性的技术。另一方面,相似的配色方案是学生设计师在第一年的色彩理论学习的内容。这基本上意味着在色轮上对彼此相邻的颜色进行配对,其结果是创造和谐的科学方法(代替对立颜色的对比)。


undefined

undefined

虽然类似的配色方案并不一定是新的,但它们在标志设计中日益流行可能表明了对对比度的排斥。色彩是设计师用来影响观众情绪的最重要的工具之一。


undefined

undefined

undefined

2021年的标志设计趋势是重塑这个新的十年的一个机会。从透视技法到简单造型再到对称性,从极简主义到古典主义的复兴,我们未来的理性似乎在追求一种纯粹。


转自:站酷

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

交互设计方法论

前端达人

通过对产品用户界面的分析与设计方法论相关联,梳理了在UI UE日常设计中使用的一些定律和原则;相信大家在工作过程中都遇到过这类灵魂拷问“你这么设计的依据是什么? 为什么这么设计”,熟悉了这些定律、原则 我们就能自如的去应对这些拷问,也能够非常快的去熟悉市面上的一些主流设计规范。



转自:站酷

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

UI/UE设计师的产品体验日记

前端达人

指尖滑动屏幕的时候,多停留几秒,捕捉一些用心的设计,记录并反思应用到自己的设计中去。用心设计,让我们的生活更加美好!

01、广告植入


关键词

#运营  #广告


产品体验

微信:刷朋友圈的时候,无形中就刷到了广告,以朋友圈的图文展示。也可以进行点赞,留言互动。

微博:在关注列表中也会有一些广告推送。用户可以自己关闭。

爱奇艺:打开视频观看前,会有一小段广告时间播放,如果没有购买会员是需要强制观看完广告才能看视频正片。


设计思考

微信:隐形植入广告,以“朋友”的身份跟你安利一个物品,角色扮演,用另外一种方式介绍产品。

微博:无形中插播一个广告推文,广告的标签跟关闭的按钮做的小,不明显,增减关闭难度。

爱奇艺:提供付费权利,可关闭广告。


02、短视频互动功能


关键词

#交互  #点赞  #评论


产品体验

微博:全屏短视频体验。关注,点赞等功能图标悬浮在右侧,方便用户点击,交互都关联性也强。

美图:右侧一排操作按钮,分享按钮却在头部,距离有点远,很难被注意到。图标采用半透明叠加更有设计感。跟美图这个产品很契合。

QQ微视:上中下的布局,中间是视频主区域。关注按钮在顶部,评论交互都在底部,比较传统的布局体验。


设计思考

微博:视频内容全屏展示,沉浸式用户观看体验。把一些按钮设计的离用户可触碰区域近一点,在用户手指操作的热点区域,加大他们的点击欲望。

美图:视频内容全屏展示,关注直接用文字加色块高亮显示,直接刺激用户,引导他点击。底部设置美化图片产品本身设置了快捷入口。有点弱化分享操作。

QQ微视:视频上方没有其他干扰元素,采用比较中规中矩的布局。


03、关注用户按钮


关键词

#加关注 #弹窗


产品体验

美图:首页的短视频,点击用户进去可以看到他的创作,当页面下拉的时候,关注按钮会一直停留在页面顶部,高亮显示。

小红书:点击个人用户进去看笔记,下拉过程中“加关注”会一直在右上角显示,继续往下拉,底部会出现一个弹窗,提醒你可以关注一下,二次引导。


设计思考

美图:主要是一个提高修图的工具,并提供给用户去分享美图的平台,没有做过多的引导用户操作。

小红书:主打个人社交平台,流量,关注度是主要的数据。发作品的目的性较强,所以给用户做了二次引导关注。帮助创作者博得更多的关注度。


04、视频进度条


关键词

#进度  #视频  #品牌宣传


产品体验

哔哩哔哩:进度条直接了当,当前位置的标记会结合视频的宣传属性来用一些特殊图标来加深用户观感。

爱奇艺:

1、视频有标记记忆点,帮助用户快速定位到想要了解的内容;

2、当前位置采用该视频品牌logo;

3、视频上方有观看热度的面积图,感觉有点被打扰,对用户来说重要性不是很高。


设计思考

哔哩哔哩:

1、视频进度条颜色是品牌颜色;

2、当前位置不再是单一的基本图形,会用一些有趣的图形替换,同时视频属性。

爱奇艺:

1、进度条颜色不在是单一采用品牌色,可以个性化不同场景搭配使用;

2、当前位置的状态用视频的品牌植入logo,起到二次宣传的作用;

3、效果视频记忆点,根据后台剪辑标记用户可能感兴趣,帮助用户快速定位;

4、进度条上方有观看热度的曲线。感觉这个设计有点多余,手机观看尽量减少视觉干扰。


05、轨迹与预计到达时间结合


关键词

#轨迹 #地图 #预估时间 #定位 #场景


产品体验

杭州公交:等公交等时候,标记你所在位置的站点,通过图标大小、颜色标记其他公交车到站情况,很直观。可以给自己等车时间做心里准备。

淘宝:物流运行轨迹在地图上显示,结合发出点到签收地,预计的时间跟签收状态。


设计思考

场景化思维设计,让用户身临其境感受。

杭州公交:聚焦与单条公交线路线,去除复杂的地图背景,直接用图标标记与你所在站点的位置关系,同时上方卡片会显示即将到找的三个公交车预计时间,给用户准备候车预留足够的时间准备。

淘宝:物流在全国范围内跑,使用轨迹结合地图会更加直观。能看到当前所在的位置,预计还有多少时间送达等等信息用场景来表达。


06、图像拍照识别


关键词

#拍照,智能识别


产品体验

百度:拍照识别的时候,全屏且屏幕中会标记小白点高光,一闪闪,bringbring 。

有道云:拍照上传识别的时候,会出现锚点可以拖拽自己想选择的图片区域,直接裁剪。


设计思考

百度:识别照片环境的时候,有小光斑互动,带有智能科技感,让体验更加有趣。

有道云:拍照过程加入裁剪功能,对图片预处理,提高笔记效率。


07、文档信息编辑


关键词

#编辑  #弹窗


产品体验

石墨:编辑本条笔记时,底部弹窗,一行显示一个操作,“删除”标红。

有道云笔记:有11个操作动作,采用分类的方式布局,配合图标一目了然。


设计思考

石墨:追求极简体验,沉浸式设计。

有道云笔记:功能较多,底部弹窗最好不要超过屏幕2/3,影响体验,结合图标更加直观。


08、搜索框内提示文案


关键词

#搜索提示语


产品体验

微博:不知道看什么时,会提示你看别人都在搜什么内容,引起你的兴趣。搜索下方也有热门搜索,也是可以买的“热搜”广告位,增加曝光率。

淘宝:根据你之前搜过的产品,程序自动给你推送一些对应产品的关键词搜索。


设计思考

微博:热搜的一些运营,业务层面考虑。

淘宝:电商类,记录你的搜索喜好,给你推送符合你的产品,千人千面。


09、金刚区下面的公告栏板块


关键词

#公告  #内容信息


产品体验

喜马拉雅:电台模块,可以私人定制自己感兴趣的电台。

支付宝:一些公告,消费通知,结合IP形象,触角还会动两下,感觉是在跟你互动对话。


设计思考

喜马拉雅:本身是个声音类产品,用电台的形式订阅自己喜欢的内容推送。

支付宝:用支付宝自己的蚂蚁iP形象,加深品牌影响,同时也起到提示作用。


10、下拉加载


关键词

#缓冲  #加载


产品体验

美团外卖:下拉加载时,用美团袋鼠IP在跑的小动效来缓解用户焦虑。

安居客:页面拖动下拉的时候,在头部有个楼盘建筑2.5d插画,感觉有另一个空间的感觉。

淘宝:淘宝详情下拉对时候,有一个历史足迹,再你逛了很多商品之后,反复对比,想回去之前的店再逛逛,同时也减少了用户页面跳出率。

微信读书:页面下拉的时候,可以添加书签,对当前页做记录,下次可以快速找到改页面内容。


设计思考

美团外卖:植入IP形象做动效,加深品牌印象。

安居客:创造二次空间感,让加载的过程中,没那么焦虑,反而让用户觉得惊喜。

淘宝:模拟用户使用场景,在购买商品过程中会对产品反复对比,加入一个历史足迹,同时提高页面转化率。

微信读书:下拉的过程中给用户制造惊喜。


11、配图多张排版


关键词

#配图多张排版  #图片


产品体验

淘宝:有视频,又有多张图片的情况下,视频权重比图片大,左一右二展示,其余收起来,点击查看全部。

拼多多:图片跟视频同时存在,平铺展示,视频默认放第一个位置,一行三个,大小统一。

今日头条:头条文章内有多张图,列表流只取三张显示。


设计思考  

淘宝:商品评论较多,控制每个评论列表高度统一性,一屏用户可见更多买家秀,同时刺激点开视频的行为。

拼多多:弱化视频跟照片的比重。

今日头条:图片更直观表达,也是用户第一时间注意的信息。首页列表需要能贴合文章内容,刺激用户点击,可后台手动配置列表展示配图。


12、优酷视频青少年权限


关键词

#用户权限


产品体验

个人中心头像上方有个“成长守护:可以设置青少年模式,主要是为家长用户对小孩上网观看视频的一个管理。


设计思考

概念包装:现在网络视频内容层次不齐,不同年龄层都能接触各类信息,鉴于对青少年的保护,对视频推送权限设置,用“成长守护”包装权限设置,让产品更有温度。


13、评论页留言列表


关键词

#评论列表


产品体验

知乎:评论列表整屏弹窗,用户回复用户,名称之间用一个小箭头指向,很有特点。作者身份跟在用户昵称后面。

爱奇艺:留言回复没有展示用户头像,只有昵称。对同一留言回复用色块区分。

小红书:评论列表2/3弹窗,同一留言内容最多显示一条,多余的折叠。


设计思考

知乎:用户名称比内容层级较高,并结合头像使用,用小尖头图标直观表达回复对象的动作。

爱奇艺:视频为主,评论为辅;对同一留言评论用灰色底,使用亲密性原则,对其他评论人的头像隐藏,注重评论内容。

小红书:从下网上的弹窗形式,一屏展示内容区域较少,同一留言多条评论就收起展示。


14、视频类个人中心页面


关键词

#我的个人中心

 

产品体验

爱奇艺:开通会员提醒醒目,右滑展示不同类别的会员。

腾讯:开通会员提醒明显,下面是观看历史,常用功能分类。

优酷:顶部有关注、粉丝、作品等数字信息展示,其次是开通会员提醒。


设计思考

爱奇艺:视频平台合作,会员权限开通付费为主要业务。

腾讯:以平台为主,个人创作视频转型中。常用功能归类,节省首屏利用率。

优酷:注重社交属性,鼓励个人创作视频上传。


15、视频类引导开通会员


关键词

#会员服务,运营


产品体验

视频页面都设置了两个开通会员入口

1、打开视频默认播放广告,视频右上角开通会员可关闭广告;

2、视频正下方有个大的提示开通会员入口

爱奇艺:结合用户心理,用文字优惠刺激用户开通。

腾讯:会根据活动给予免费体验会员的服务。

优酷:直接把会员所享受的服务内容展示出来。


设计思考

爱奇艺:没有多余的描述,直接提示新客优惠。

腾讯:正下方的开通会员文案会根据不同的视频运营有不用的文案,比如超前点播,活动免费领取等等。

优酷:首屏占的比重大,无论视频上方关闭广告 还是正下方,按钮都设计的很大。


转自:站酷

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

UI界面设计常见的布局构图

前端达人

今年算是写的第四篇文章,UI系列写的第二篇文章了,2020还有10天过去了,祝大家在新的一年里愈来越好。


构图是指作品中艺术形象的节后配置方法。是造型艺术表达作品思想内容,并获得艺术感染力。在视觉艺术中常用的技巧和术语,特别是绘画、平面设计与摄影中。在UI设计中,构图的主要作用是:构建和谐稳定的页面布局。



1.1 最平衡的构图对称构图1:1 

左右对称上下对称的构图,一般不会有太大问题,因为人类对世间万物的观察来看,因为在生活中绝大多数的事物都是对称的。


对称平衡的形态在视觉上有自然、均匀、协调、整齐、稳重的美感,复合用户的视觉习惯。



“对称构图”是将版面分割为两部分,通过设计元素的布局让画面整体呈现出对称的结构,具有很强的秩序感,给人安静、严谨和正式的感受,呈现出整齐、平稳、经典的气质。在得物(毒)中应用体现平台的核心正品与品质。



1.2 设计中不平衡原因

视觉错觉是指人们对外界事物的不正确的感觉或知觉。最常见的是视觉方面的错觉。产生错觉的原因,除来自客观刺激本身特点的影响外,还有观察者生理上和心理上的原因。其机制现在尚未完全弄清。



(1)缪勒—莱尔(Maller-Lyer Illusion)错觉:1989年由缪勒一莱尔(F.Muller-lyer)设计,末端加上向外的两条斜线的线段比末端加上向内的两条斜线的线段看起来长一些,其实两条线段等长。

(2)艾宾浩斯错觉(Ebbinghause Illusion):看起来左边中间的圆比右边中间的圆大—些,但实际上这两个圆的大小相同。

(3)庞佐错觉(Ponzo Illusion):中间的四边形是矩形,而不是顶边比底边宽的四角形。

(4)厄任斯坦错觉(Ebrenstein Illusion):中间矩形的四条边看起来是弯曲的。

(5)黑灵错觉(Hering Illusion):中间两条线是平行的,但看起来是弯的。

(6)菲克错觉(Fick Illusion):垂直线段与水平线段等长,但看起来垂直线段比水平线段长。

(7)冯特错觉(Wundt Illusion):中间两条线是平行的,但看起来是弯的。

(8)波根多夫错觉(Poggendoff Illusion):被两条平行线切断的同一条直线,看上去不在一条直线上。


1.3 不平衡中的平衡构图

在整体的页面平衡的情况下,同样还需要考虑视觉上的平衡。


任何东西都不能在页面上随意安放。每个元素都应该与页面上的另一个元素有某总视觉联系,而这个视觉联系往往是看不到却可以感受到平衡感,在平面海报中的平衡原则得到了最大的应用。



如上图所示,三少爷的剑这个海报设计,将整个海报布局进行几何化分析,地面为一个倾斜的平面,人物为一个垂直于地面的一个个体,人物上方为主体文案。几何化后如同一个倾斜的斜面放置了一个倾斜的天平,最后一个“剑”字、与下方英文如在右倾斜天平上面的一个稳定的砝码。然而整体还是不够平衡,设计师通过燕十三的视觉视线、以及围绕他的杀手用剑指向他的方向为力的方向将整个页面进行平衡。通过用剑多少占比、字体大小等等的细节使得整个页面达到最微妙的平衡点。这样的设计之后达到一种平衡而有不平衡的微妙感觉,不平衡感体现整个页面的“ 动 ”武侠之感油然而生;而平衡感表达了整个页面的“ 静 ”冷冷的肃杀感、高手的寂寞感油然而生。



让设计中的视觉要素在画面中页面平衡。可以通过字重、颜色、形状、线条、图片占比等等,这样可以增加整体页面的平衡感。通过小米中的构图可以看出上方所有图片文字偏左,通过右方一个高亮的按钮进行平衡感的设计;下方文字左边文字较少用重的深色的字体,而右边文字较多用轻且浅的文字这样的设计达到整个页面的平衡感。



2.1 黄金分割设计法 

黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618。这个比例被公认为是最能引起美感的比例,因此被称为黄金分割。



设一条线段AB的长度为a,C点在靠近B点的黄金分割点上,且AC为b,则b与a的比叫作黄金比,黄金分割具有严格的比例性、艺术性、和谐性,蕴藏着丰富的美学价值,这一比值能够引起人们的美感,被认为是建筑和艺术中最理想的比例。 

画家们发现,按0.618:1来设计的比例,画出的画最优美,在达·芬奇的作品《维特鲁威人》、《蒙娜丽莎》、还有《最后的晚餐》中都运用了黄金分割。



UI页面设计中的黄金分割比的应用有很多如上图所示,页面整体功能摆放位置,遵循黄金分割比的分配表达出来整体页面更加的和谐聚焦。


2.2  九宫格设计法


九宫格构图有的也称井字构图,实际上属于黄金分割法的一种形式。就是在画面上横、竖各画两条与边平行、等分的直线,将画面分成9个相等的方块,在中心块上四个角的点,用任意一点的位置来安排主体位置,就是九宫格构图。



实际上这四个点都符合“黄金分割定律”,是表现画面美感和张力的绝佳位置。当然在实际运用中还应考虑平衡、对比等因素这种的构图原则在海报以及摄影中有着极大的使用。



3.1 UI页面布局的格式塔原理 

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。



创始人提出的5项基本原则:简单、接近、相似、连续、封闭。


3.2 简单几何构图法

简单原则就是具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。我们的眼睛在观看时,眼脑并不是在一开始就区分一个形象的各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体。



简单阅历暗合构图法则,例如常见的三角形构图,均衡构图,对阵构图,向心式构图,对角线、x型构图等,其目的都是为了在复杂的信息环境中,构建更易懂的整体。


3.3相似构图法

相似原则指的是在某一方面相似的各部分趋于组成整体,强调内容。而接近强调位置。人们通常把那些明显具有共同特性(如形状、运动、方向、颜色等)的事物组合在一起。



由上图可见,当用户看到这个这个页面的时候,会自觉的把上面5个icon看作一个整体,因为他们的颜色形状都是相同的;文字颜色与字体大小相同会被自然的看作成为一个相同的功能,如同样的红色都是价格,同样的黑色都是商品名称;相同的汽车图片直接清洗的都可以归类为同列表商品。


3.4接近构图法

单个视觉元素之间无限接近,视觉上会形成一个较大的整体。距离近的单个视觉元素会溶为一个整体,而单个视觉元素的个性会减弱;



相关元素会尽量接近,不相关的尽量远离。这种构图它强调化繁为简,去除一切与内容无关的装饰性元素,突出内容本身,好让重要的信息及功能更容易被关注,让用户增加更清晰和直观地进行浏览。在这种排版设计中,您几乎看不到区分内容的分割线,他通过大间距完成了视觉层次的划分,留白是它们最大的武器。



彼此相关的项,归组在一起。如果多个项相互之间存在很紧的亲密性,他们就会成为一个视觉单位,而不是多个孤立的元素。这样有助于组织信息,减少混乱,为读者提供清晰的结构。





转自:站酷

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


【交互设计】B端产品中后台列表页设计方法总结

前端达人

接触b端产品设计差不多半年多了,每天面对的都是各种控制台,本次自己试着总结了下工作中遇到的各种列表设计的小tips。


转自:站酷

蓝蓝设计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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

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

存档