首页

Ant Design 4.0:创造快乐工作

资深UI设计者


第一趴:Ant Design 的基本假定


在我开始所有话题之前,我有问题想问大家,大家工作快乐吗?


我听到了特别积极的反应,说非常的快乐。希望大家说快乐,不是因为今天是周五。


但是呢,其实,工作并没有我们想象中那么快乐,是所有的活动当中快乐指数的,跟躺着带来的快乐差不多的,有些人躺着什么也不干,也比工作快乐。



什么原因导致了工作的不快乐?


第一类,关乎目标。大部分人认为工作是为老板服务,所以很难受。另一类,是因为反馈,很多工作的结果依靠于外界,依靠于老板,所以你跟直属上司的关系,决定了工作的体验。第三类,是我们认为挑战和技能的不匹配,导致了我们工作的不快乐。当挑战大于技能的时候,你就会焦虑,当技能大于挑战的时候,你就会觉得无聊,你的工作就会在焦虑和无聊之间来回地徘徊,这是我们理解的世界。


这个问题,在数字世界中会变得更加的明显。70 年前,第一台计算机出来之后能解决的问题非常的简单,但是 70 几年过去了,数字世界得到了非常大的发展,我身边任何一个小设备都远远大于 70 年的。而现在的我们和 70 年前的前辈们没有本质的区别,我们有 7+2 的记忆法则,最多只能记住 9 个数字,这就导致了在数字世界当中,我们所面临的挑战远远大于人类所掌握的技能。



数字世界往往给我们带来了挑战大于技能,所以你的体验是负能的。如果你的工作更加有趣,挑战能够匹配技能的时候,工作就会变得很好玩。工作就像打游戏一样,你通过了一关,技能得到了提升,工作就会变得持续好玩,所以我们在无聊和焦虑中间寻找平衡,这个平衡就是快乐的通道。


说起工作,大家多多少少会有快乐的体验,但是和躺在沙滩上睡觉的体验完全不一样。某一个下午或者晚上,需要处理一件稍微有难度的事情时,你需要集中所有的注意力,专注于你和你的事情,一抬头两个小时过去了,这是一种极度饱满、极度被满足之后的快乐,它是一种成长的快乐,也是一种挑战和技能匹配的快乐,也是全情投入的快乐,所以我们所说的快乐工作指的是全情投入的工作。


基于这样的思考,我们将每个人都追求快乐工作,作为Ant Design 的基本假定。

第一个原因是,我们认为人或多或少都有这样的快乐体验;第二个很重要的原因在于,对于大多数人而言,我们醒着的绝大部分时间都要工作,如果你无法在工作中体验到快乐,人生将会在焦虑和无聊中度过。

基于这样的思考,我们找到了 Ant Design 的基本假定。就像光速不变基于相对论一样,我们想基于这样的假定,表达 Ant Design 的体系。



Ant Design的设计价值观

这就是 Ant Design 的基本假定,每个人都追求快乐工作,Ant Design 中每个人是谁?我们分成两种不同类型的用户:第一类是用户,第二类叫做设计者。所谓的设计者是创造这些应用性能的人,也就是在座的大多数。


我们将快乐拆成两部分,一部分是快感,一部分是乐趣,基于此,我们衍生出了 Ant Design 四个价值观,设计首先是自然的,其次是确定的,第三,设计是要有意义的,第四,设计是能让用户和产品不断成长的,它是具有生长性的。




第二趴:确定性


所以接下来的分享当中,因为时间的关系,我会重点分享其中的两块。


第一块叫做确定性。分享一个小案例,我刚入行的时候,就碰到了社会的毒打,我想找到我的合作伙伴进行验收发布的环节,因为设计师对细节有非常强的管控情系,我用略微虔诚的态度说:“亲,能稍微调整一下列宽吗?”,他可能没理解我的意思,说“我觉得挺好”,我说“都换行了,哪里好?”,我以为会引起他的注意,结果他回了我一句:“这不重要,你行你上。”


我一开始并不明白,为什么这个世界是这样的?我认为我们都应该有同样的认知,直到有一天我看到他的竞争升级 PPT 的时候,我就明白了,原来他不是针对我,他不换行不仅在产品上,PPT 里也不换行。不同的人有不同的想法,不同的工种也有不同的想法,而我们的工作是需要这样一群人一起合作,就会导致一个问题,当不同的人有不同的、不确定性的想法,会导致研发过程的不确定性。


ETCG 2.0:Ant Design设计的方法论


我们总说,一个人可以走得很快,一群人才能走得很远。我们要想办法怎么让这群人可以步调一致地走得快,又走得远,我们把这套体系、方法论叫做 ETCG 2.0。



这是原有 ETCG 的基础上,进行升级的过程。我们希望面对同样的问题,各个角色都能推理出同样的方案。就像你在春天种下一颗苹果树的种子,你一定在秋天可以得到一颗苹果树,而不是一颗梨树。



ETCG 2.0几个字母分别代表不同的意义,第一个是功能范例,第二个是模板,模板是我们基于业务的抽象,目的是帮助新手或者帮助不同设计师保持设计的一致性,指引页面如何设计,比如这是典型的列表页,由高级搜索和表格组成。今年在模板的基础之上又做了一层更大的精进,我们做了抽象和规范衍生出了模板组件。一行模板组件,当无法满足你的需求时,只要一行代码,就可以得到一个完整的序列。



除了列表页,还有表格页,还有图表、表单,以及布局,构成了我们对系统的抽象,叫做「四表一局」,它大概覆盖了中后台系统、或者企业级产品 80% 以上的业务诉求,同时本着非常开源、开放和普惠的心理,整个「四表一局」正式对外开放,大家可以访问 Ant Design 的仓库下载和使用。


ETCG 中的 C 是组件,是 Ant Design 最早和大家见面的内容,五年的时间里面,我们有了很多数量上和质量上的精进,同时创造了非常多的社会价值。这五年前,非常令我们自豪的是,有接近 1000 名贡献者参与到 Ant Design 的建设中,同时 TOP 50 当中,60% 来源于社区,他们为 2 万家企业提升了 3-5 倍的研发效能,同时我们正式于去年年底成为全球开源第一的组件库。五年前,蚂蚁集团发起了 Ant Design 这个项目,但是它今天所取得的成就是来源于社区和我们的共同努力,这里的荣誉和掌声应该献给所有为Ant Design 贡献过代码的同学,谢谢你们的支持。



ETCG 的 G 有两个。第一个 G,是对组件样式的抽象,我们用了变量化的方式进行了约束和管控,它可以做什么?特别简单,你的老板今天不喜欢蓝色,想要橙色,你只要一行编码,就让组件库发生了焕然一新的变化。



ETCG 的第二个 G,是我们今年重点建设的部分,也是全新的一部分,叫做 Guides,指的是人和机如何进行互动交互的过程。


比如说这里是应该放一个数值输入框,还是放一个输入框?以及如何进行放置?我们将琐碎的交互规则进行抽象和封装,让机器学习这些规则,让机器帮助我们进行这些规则。你只要导入原数据,几乎不用做任何的配置和更改,可以得到可进入生产环境、可研发的表单页面,设计得可能比初级的设计师产生的效果更好,你想要的一切都应该放在合适的地方。


这就是我们对 Ant Design 确定性的理解,不需要设计师参与的设计产品,提升了设计和研发的体验,当然商业化还需要很长的时间。当下如何解决现在碰到的问题?仰望星空,也要脚踏实地。作为设计师,我在想怎么解决五年前的问题,我很想说我行我上。


我们怎么使用?使用 Kitchen 进行编辑化的能力,把 13% 甩给我的合作伙伴。如果你觉得还不够,想做更多的管理和管控,甚至可以用「四表一局」的能力进行服务的搭建,搭建可进入生产环境的服务产品,让设计师变成设计工程师的角色。



第三趴:如何让设计变得更自然?


在今天分享的最后一趴,我和大家聊聊这个场次经常听到的词,那就是“自然”,学术界和产业界对自然有非常多的理解。我们把它定义成了形容词,我们认为这个行为很自然,大家经常在各个场合听到的一句话,设计是关乎如何运作的问题,Ant Design 在这个基础上,要聊的是 how it worksnaturally。



同样分享一个小案例,在我们有一天的用户群里,我们的用户反馈了一个非常有意思的问题。他说语雀可以插入图片吗?语雀的负责人当时在现场,就回到:“当然可以,最基本的能力”。我们的用户问出第二个特别具有代表性的问题:“可是我们找不到在哪里”。语雀是阿里内外都很喜欢的一款文档类文件。编辑页的第一页,我们的工程师特意做成了绿色的,你点进第一个的第一行就是图片上传的功能。但是大家有没有想过?我们仅仅隐藏了一级,就让用户记不起来有这个功能,我们仅仅隐藏了一级,就让用户找不到这个功能。这不是语雀产品特有的特征和问题,而是这个时代大部分问题具有的特征和问题,因为大部分的产品处于 1973 年的基础上。



WIMP 是什么?Window、lcon、Menu、PointDevice,当我们的功能只有 20 几个的时候,这是非常好的设计,总比代码行好太多,今天我们说了数字世界当中,我们的设备、计算机、网络成千上亿倍的发展,用户怎么记得住 8000 个功能?用户怎么定位到 8000 个功能在哪里?所以 WIMP 界面碰到了人机交互的瓶颈阶段。


为什么碰到瓶颈会越来越不自然?第一个角度从人机互动的环节,当用户记不住的时候,就没办法从哪个入口出发。所以 WIMP 界面第一个不自然的原因在于,所有动作的发起都依托于用户。用户一旦记不住,一旦找不到,人机交互就没办法走通,这是 WIMP 界面的第一个问题。



第二个问题,要回到人身上。人的行为分为有意识、无意识的两层,能量消耗比较大的就是有意识层面。WIMP 在于所有的行为依托于用户有意识地触发,这本身就是一个非常消耗脑力的一件事情。在我们面对这么多功能的环境下,这两个问题导致了我们在数字世界当中碰到的巨大问题。因为我们知道系统的功能每天在增加,数字世界不需要遵循物理制造的极限,它可以进入无限备功能的叠加,所以在这个世界当中碰到的挑战远远大于我们所掌握的技能,所以 WIMP 界面碰到了诞生以来最大的问题。



我们如何解决这个问题呢?首先一定要清晰地认识到,人是有意识和无意识两种思维的结构和意识形态的。同时系统也可以分为两部分,一部分是主动功能,第二部分是被动功能,我们要尝试的守正出奇。守正延续了 WIMP 界面常规的功能,让人有意识寻找功能,触发系统的能力。但是出奇要多做一步,除了让用户找功能之外,我们要增加很多的主动式的交互,让功能找到用户。


接下来分享几个案例,在我们的常规设备当中,都已经有这样一些主动式的服务来寻找到你。


第一类是相逢不相识,名字很好听,解释也特别好玩。在语雀当中有一个小功能是我特别喜欢的功能,当我编辑一篇文档,编辑了大于 30%、50% 的文本量,这个钩会自然地帮我钩上,因为它有一个基础的设定:如果这篇文章发生了比较大规模的修改,你的订阅者很自然的想知道你这篇文章做了什么。


第二个相逢不相识的地方,大家可以聚焦一下支付宝。有兴趣可以打开支付宝首页,在你的收款码应用里,解决什么样的问题?解决面对面交易的问题,所以当你输入一个金额完成以后,自然旋转屏幕的时候,这个屏幕会进行自然的翻转,这样对面扫你钱的人,可以看到信息的正面,这非常自然。



第二个主动式交互的类型,叫做可用不可见。和相逢不相识的区别在哪里?就是默默地为你提供了服务,但你可能永远不会知道它的存在。在苹果第一代出来的时候,做了一个非常牛逼的设计,因为大家都知道虚拟键盘,没有物理触感,所以误触率很高。虚拟键盘怎么解决?苹果基于非常有趣的思考,在苹果的全键盘里面,只要输入了 Desig 的时候,通过语义词的分析,N 点击的范围远远大于旁边的 B 或者 M,以及上面的 G 部分,这是帮助你做主动选择的服务,只是我们从来不知道有这样一件事情。所以我们将这些自然的人机互动方式进行整理,包括融入到更多的案例以后,发现人机主动式交互有九种不同类型的分类,除了输入法,更多是通过用户使用情景的上下文进行优化的过程。



我们有了这张人机自然的交互,怎么解决语雀的问题?我和在座的语雀设计师有过这样的讨论,用户说图片上传找不到,我们大部分人的第一反映是把图片上传显示单独放出来。这可能会解决刚才的问题,但是如果明天财务说表格找不到了,我是不是还要把表格拿出来?有人说附件找不到了,还要把附件拿出来吗?我们需要从主动式交互的角度畅想怎么优化人机互动的过程。



回到这张自然交互的工具,提供了一种简易的思维框架。


我们去判断哪些是可以去做的,第一件事特别简单,我们判断用户使用的上下文是什么,我们发现很多产品的通用习惯,直接把图片拖进去,做成小的服务,用户根本不需要知道功能的存在就可以使用。


第二个从原数据角度来理解,图片是一种特殊结构的数据,它是 jpg、png。用户在外部复制了之后,进入编辑页可以主动推送他一个服务,询问他是否要粘贴,本质上并不复杂,但是它确实在 WIMP 界面传统意义的基础上,又提供了初级的部分,又额外做了一部分。


我们所定义的自然里面,是需要我们做更多的主动式的服务,让我们这个海量的功能能够在合适的场景下,去找到用户,从而节约人的脑力和体力。因为对于人来说,我们和 70 年前的爷爷辈们没有本质的区别,我们需要被善待。有感兴趣的同学可以看支付宝的访问码,也期待和大家做更多的互动。


结语

分享的最后一趴,我简单总结一下今天做了哪些事情和分享了哪些内容。第一趴,我们提出了 Ant Design 的基本假定,我们认为每个人都缺少快乐工作,这种快乐工作是和我们平时闲散完全不同的问题。同时大多数人都不可避免的来工作,我们怎么扭转工作对我们的体验,这是人生中非常大的问题。第二趴,我们衍生出新的价值观,这四个价值观中,因为时间篇幅的原因,重点和大家讲了确定性和自然的价值观,这是历史最悠久,也是最有代表性的两块。基于这两个价值观,我们衍生出了不同的组建库也好、可视化资产也好,相关的设计资产以及设计策略,以及配套的设计工具,当然蓝色部分是我们今天介绍的重点。最后这张图特别适合拍照,这是我们系统提供给大家的主动式服务。




文章来源:站酷  作者:Ant_Design 

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


提升UI设计的高级感

ui设计分享达人

完美,不是因为没有什么可以增加,而是没有什么可以减少。


创建美观、可用和的UI界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。 


1、视觉元素

在互联网产品日趋成熟的今天,你会发现所有的App越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个App设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节,一起来学习。


1.1 使用颜色深浅构建层次结构

在对UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。



每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:

  • 主要内容使用深灰色(诸如标题,但是不要用纯黑)
  • 次要内容使用灰色(比如商品介绍)
  • 辅助性内容采用浅灰色(比如发布日期)


类似的,在UI设计的时候,通常两种不同的字重足以营造出优秀的层次感:

  • 大多数的文本采用正常的字重(400到500,具体取决于字体)
  • 对于需要强调的文字采用较重的字重(600到700,具体取决于字体)

▲主标题字重为600,其他标绿点的文字字重都为400


应当尽量不要让正文部分字重低于400,因为这一部分字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。


灰色文字在无彩/彩色背景下要分开处理


不要在有色背景上使用灰色的文本,在白色背景下,将黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不错的淡化其视觉效果的做法。


但是在彩色背景下,想要降低和背景色之间的对比,通常有两种方法:

一是降低白色文本的不透明度;二是让文本逐步接近背景色,而不是改为灰色。

▲左图设计师职位信息为白色文字降低不透明度,右图为和背景同色相高明度的颜色


其次当涉及长篇内容时,大面积的深色粗体字会给人一种沉重感,而且很跳跃。通过选择类似深灰色(#4F4F4F)这样的颜色可以很容易地解决这个问题,使文字更容易被识别。



1.2 统一色调

选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。


1.3 干净的阴影

阴影是UI设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。


这种轻柔的阴影呈现出的干净,增加了画面的精致。如果阴影的范围太小或颜色太深,位置也没有偏移,而是聚集在元素的四周,就会让画面更加扁平,让视觉变得厚重,呈现出不精致的画面感。

还有一种扩算阴影是模拟元素本身的颜色投射在背景上,由于阴影与元素的色调一致,因此呈现出十分融洽的画面感。在UI设计中,这种手法不宜过多使用,否则呈现出的各种色彩搭配会让人眼花缭乱。


1.4 个性的图标设计

合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

标签栏作为一个App的全局导航起着至关重要的作用,它的设计影响着整个产品的视觉风格。通常,大多数App都是使用iOS规范的设计样式(默认灰色,选中填充品牌色),这样的设计太普通,太常见了。要想让标签栏图标设计精致和富有个性,可以丰富每一个选中态图标的视觉表现,例如给图标加上背景和表情,即显得生动有趣,又增加了用户的好感,给人留下深刻的印象。


3D立体图标设计是近几年来的流行趋势,看上去十分精致、华丽,但是看久了会让人产生轻微的视觉疲劳,同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。


1.5 Tab的设计感

Tab是App设计中最常见的控件之一,它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计,而原本属于iOS规范当中的分段选择器变得不那么常见了。

在视觉表现形式上,Tab和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的Tabs就被创造出来了。

我们还可以从品牌基因中获取灵感,品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条,这样就建立起视觉上的联系,让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上,既让界面视觉,又进一步强化了用户对品牌形象的认知。


1.6 无框设计 去繁从简

在UI设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:


使用阴影

阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力。


使用不同的背景色来区分

通常,相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以,你所需要做的就是在不同的区块采用不同的背景色,并且尝试删除分割线,因为你根本不需要它。


增加额外的留白

创建元素之间的分离效果,并不一定要通过线框来表现,只要增加留白,让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。



1.7 统一设计元素

在App中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。


1.8 符合产品气质的字体

选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。


1.9 第三方图标风格统一

大多数App都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的App不应漏过任何的细节,我们可以以自家App的图标风格为依据,对第三方图标进行优化设计。


1.10 图片中寻找色彩

App中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经常看到文字叠加在图片背景上的设计样式,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。



1.11 提高图片质量

图片的质量影响着整个App的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。


1.12 卡片式设计

现在的UI界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。


2、情感化设计

心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。


2.1 提示性文字

语言是情感化设计最直接的利器,拟人化的对白相比冰冷的话语更能获得用户的好感,赋予产品的新的生命力。例如App那些push推送通知,因为用户每天收到的PUSH实在是太多了,早已心如止水!这个时候,你就需要一条成本低、效率高的PUSH文案,去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣,让人看到会心一笑。



2.2 下拉刷新

下拉刷新是用户在App使用中经常进行的操作,常见的下拉刷新设计是图标加文字的形式,这种设计简单、直观,但毫无设计感,不能引发用户任何的情绪。

下拉刷新是一种临时状态,丰富它的设计细节不会造成与产品界面的格格不入,相反,一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿,暗示正在快马加鞭的加载新内容,小鹿形象延续了品牌logo。作为资讯类产品,内容更新速度至关重要,奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感,瞬间就让下拉刷新变得生动有趣。



2.3 头像设计

个人中心页与用户信息密切相关,用户的虚拟形象在这里得以展现,常见的设计是一个用户头像加登陆文字的形式,这种默认的头像设计无法得到用户的认同感。


现在很多的产品已经放弃了死板的默认头像,给用户更多的选择。赋予产品一些人格魅力,可以让产品富有生命力,消除人机界面的冰冷交互,帮助用户和产品建立友好的联系。例如美团外卖和躺平,它们各自的身份都代表了产品的气质和用户的属性,让用户产生一种身份的认同感。


2.4 缺省页化解负面情绪

通常状态是,当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式,这种简陋的设计会给用户心理造成很大的落差,陷入负面情绪中。情感化设计在此时就可发挥巨大的作用,它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大,根据产品属性和品牌延展图形,结合动效或插画等情感化设计,可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景,让用户会心一笑,使产品充满了趣味性。



2.5 标签栏微动效

情感化设计变得越来越丰富,图标设计上升至可以展示动画效果。通过动效的使用,标签栏切换变得不再死板。用户在频繁切换页面时,不再觉得单调。精心设计的动态效果,能够缓解用户等待时焦躁的心情,从心理上缩短用户等待时长,让品牌更加深入人心。



2.6 模拟用户行为

如果一个产品可以模拟用户的行为,将用户代入真实的情境中,用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化,播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。


情感化设计可以拉近用户与产品之间的距离,在更深的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动。洞悉用户的行为,换位思考去满足用户的需求,情感交流就产生了。例如当你截屏了一张图片,打开微信对话框时就会自动显示这张图片,提前预知了你发截图的需求。


再例如很多观众都习惯了在电影结尾等彩蛋的习惯,因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时,你会发现影片详情页会有彩蛋提醒,告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息,就不必再为了不确定的彩蛋期待浪费时间啦。


2.7 有趣的细节设计

俗话说:有趣的灵魂万里挑一,可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中,有些有趣的设计是隐形的,需要用户自己去发现,当用户找到这颗彩蛋时,就会获得一份喜悦和乐趣,增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右,你会打开鬼畜区的新世界(⊙o⊙)(友情提示:记得戴上耳机或调小音量)其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母,发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕!



有些有趣的设计又是显性的,目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员,不仅可以尊享丰富的影视资源,还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕,让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性,一方面也丰富了弹幕区的多样化,可谓一举两得了。


文章来源:UI中国  作者:漂浮柠檬核Fyin印迹

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

禁用按钮应该怎么用?

资深UI设计者

在做设计的时候,经常会遇到一个问题,就是一个按钮,在同一页面的不同情况下,有时可用,有时不可用,我们到底是显示不可用时的禁用状态呢?还是直接隐藏这个按钮呢?

大家还是喜欢提这种通用性问题,希望有一个说法,可以概括所有情况。但我多次说过,不存在这样的好事,一定是具体问题具体分析的。

尤其是这个问题,想要聊透彻,得用不少例子来举证说明,不过也可以通过总结的方式长话短说了。

禁用按钮的使用,可以从两个维度来分析,分别是:「无效的禁用状态」和「有效的禁用状态」。

无效的禁用状态

有一种情况是,在一个页面里,一个按钮,可能会有几种不同的情况存在。那人要问了,既然是一个页面,为什么会有多种状态同时存在的情况呢?

比如,在出行场景中,普通乘客发起订单,司机接单后是可以发送消息的(左图)。但是从第三方渠道来的乘客,司机是无法发送站内消息的,只能通过电话联系乘客(右图)。

禁用按钮应该怎么用?来看高手的分析!

不同渠道来的用户,司机端的页面会呈现不同的按钮状态。相同的页面,第三方渠道来的乘客,在司机端就不需要露出消息按钮了,这样可以减少无效信息对司机的干扰,还可以避免司机习惯性操作带来的无效反馈,比如点击消息,显示「无法发送消息」。或者显示禁用,也会影响司机的操作判断。

从这个案例中我们可以看出,当一个按钮在某种情况下始终无法被触发时,就会选择让它直接消失,而不是呈现禁用状态。

很多人在这类设计里会给按钮提供一个禁用状态,以免按钮消失而打乱页面布局。但是要知道,在某种情况下,按钮无用时,无意义的展示反而会产生干扰信息,就像上面说到的那样。

所以这里有一个结论是:禁用按钮需要可触发的时机,如果没有这个时机,禁用状态就没有存在的必要。如果存在,那它也是一个无效的状态。

既然是无效的,最好就不要出现了。

有效的禁用状态

在上面的例子里,有一个前提不可忽略,那就是司机是否可以理解我们不显示的原因。当然,司机会接受相关培训,产品中也会有渠道标识,所以司机能够明白页面中存在的差异。

但在其他产品中,当状态不同,按钮变化无法自洽的时候,又怎么去处理呢?我们就需要通过合理的解释来消除用户潜在的困惑。

对于这点,比较典型的案例是在线上购物时,一件商品会有多个类型供消费者选择,比如不同的尺寸、型号等,当其中一种类型被抢光时,这个商品依然是可见的,只是无法选择,展示出了禁用状态。

在这种场景中,我们不能一下子把其他无法购买的类型隐藏,因为用户需要知道我们所有的商品类别,了解商品的全部属性,尽管当下无法购买,但有上新的可能,用户依然可以选择等待,并将其加入收藏,还是会有机会促成这笔交易。而且当可选类型变多的时候,只是禁用没有库存的类型,可以使其他可选项保持固定的位置,有利于我们二次搜索和加购。这种场景的禁用也是暂时的,直到商品下架或者上新。

但就像我以前说过的,常常我们见多了的东西,就认为是正常的,但它并不一定好的。禁用也是这种情况。

虽然我们现在还是会在各个地方看到禁用操作,但是禁用的原由始终没有给到用户合理的解释,以至于许多人见到类似的操作都是一头雾水。所以在设计过程中,尤其要谨慎对待,尽可能的避免出现无法解释的禁用操作。

好比淘宝的商品选择页面,如今也将原来的商品纯禁用按钮,替换成了「缺货」。选择缺货的商品之后,按钮会变成「提醒掌柜补货」。

禁用按钮应该怎么用?来看高手的分析!

从原来的用户单方面接收无法点击的按钮,到现在直观显示缺货,点击后同时提醒到商家,这样的操作从功能角度来说是一个升级。

这就是我说的,有效与无效的禁用按钮之间的区别。禁用不该是真的禁止使用,而是告知用户,它如何可被使用。

小结

如果一个按钮在不同的阶段有禁用和可用的状态显示,那么意图是很明显的。比如一些活动页面,某个按钮的禁用状态是倒计时,就像电影的前期宣传,为电影的上线制造话题和热度,来鼓励更多人的观看一样。

对于按钮来说,显示禁用则代表它在满足一定条件后即可拥有可点击性,让我们明确地了解它就在这里,未来是可操作的。按钮也有很多的设计空间来为未来的使用做好铺垫,特别是营销类的活动,像是「明日 8 点可抢」、「提醒商家补货」的按钮文案,无一不在传达「可用性」的信息,引导用户持续性的关注。

但是还有一类禁用状态只是静默地提示,多出现在表单中,当用户没有完成输入的时候则无法点击,因为看的多了,我们就以为这是正常的。但我们都知道它仍可优化,比如,在它以禁用状态出现时,用更为友好的方式去提醒用户应如何激活,而不是漆黑一片,且完全不知道它所存在的意图。

我们要知道的是,禁用按钮本身不是一个特殊的对象,只是禁用状态在页面中是一个特殊的存在,它是产品设计中的一种规则。为什么按钮不可用,或者说一定场景下为什么功能不可用,当无法依靠用户直觉理解的时候,是需要作出解释的,也就是怎么禁的问题。

但是最开始设计时就应该去想的是,禁用状态对用户和产品的意义在哪里,这和我们设计方案时脑海中涌出的无数目标一样,是一个基础的出发点。而后,一切迎刃而解。

文章来源:优设  作者:呆呆有理

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


采购平台界面设计

前端达人



转自:站酷

作者:社田


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

小猫宠物

前端达人

小猫宠物是一款面向大众化的手机宠物app,这里有来自天南地北的爱宠人士的动态分享,也有专业的医疗人员在线解答各式难题,更有超多实惠的宠物用品等你来抢

收藏
收藏
收藏
收藏
收藏



转自:站酷

作者:憨宝鸭


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

国外ui设计赏析

前端达人

国外ui设计鉴赏



转自:站酷

作者:是穗啊


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

爱航信息app平台的优势有哪些?

前端达人

生意越来越不好做,是大家目前的普遍状况,大多数做生意的手里都有一批货,急着处理回笼资金却又卖不出去

生意越来越不好做,是大家目前的普遍状况,大多数做生意的手里都有一批货,急着处理回笼资金却又卖不出去,所以我们的爱航信息平台应运而生。

 

如果你告诉企业或者商家出售他的产品或服务需要支付一部分现金,他肯定会皱眉,或者选择放弃。但是,如果你告诉他,他可以使用一些自己的产品或者服务来置换广告位,而不需要花钱,他肯定会欣然接受。“实际上,仔细考虑这件事的原因可能是许多人在观念中往往都坚持“现金为王”的心理。

 

所谓易货广告,就是在企业或者商家无法以资金支付广告位的时候,可以采用以商品或者服务来置换广告服务,广告交易可以不通过资金的形式,该种广告置换的方式可在多个企业或者商家中进行,易货广告,是企业或者商家在不用现金的情况下进行置换广告服务的有效方式。

 

互联网是提供货物与广告置换交易的绝佳平台,可以大大提升以物易物的可行性。以物易物这种远古时代的交易方法让其出现在互联网上,其共同点和成功之处就在于,商户或企业总能寻找到自己需要的,而当交易物品的价值相差不是太远时,商户或企业总会选择自己需要的。

 

此外,通过提供易货广告服务的平台,还可帮助企业或商家有效解决销售不畅、资金短缺、产能过剩和库存积压的难题。现代易货广告之所以快速发展,除了电子商务的催化作用,还有一个重要推动力就是现代企业经营思想的转变,“爱航信息不仅是一种广告模式,更会是一种经营思想”。



转自:站酷

作者:爱航信息


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

产品功能如何定义?

资深UI设计者

编辑导读:产品经理在进行产品功能规划时,会遇到来自各方的需求。这些需求有大有小,有迫在眉睫的也有无关紧要的,应该如何规划产品功能呢?本文将从四个方面展开分析,希望对你有帮助。

产品功能如何定义?

一款产品一般会具备一定的盈利点(商业变现能力)、其独特的使用价值,偶尔还会掺杂个人创作时的产品情怀(初心),像锤子科技入场手机行业的时候,是定位于年轻小众的用户群体,为他们提供个性观感的用户体验,虽说后来败北了,但也曾收获了一批用户的喜爱,也有因为这个领域始终存在着它的壁垒,所以不是简单的情怀就能做成一款好的产品。

当然,如果不是创始人,创作的情怀可能会体现的没那么深刻,但是产品早期的定位在一定程度上已经确定了基础的业务方向和发展的基调。

很多企业可以靠一款核心产品,进而延伸到其他的产品创造,基础产品实现了赚钱能力后,从而支撑其他的产品的试水,即使失败,也不至于“关门大吉”。

而当产品经理切入产品设计时,一般有我们常用的两种产品类型,一种是基于基础核心业务延伸的从0到1的项目设计,一种是处于生命周期-成长期中从1到N的产品迭代。

而这2种规划产品的功能的方式也是不一样的。

01 从需求出发

不管是哪类产品,立足点都是基于需求,而需求池也分2种,一种是源源不断的需求池,一种是寥寥无几的需求收集;前者更为切合从1到N的产品,上线后的需求或反馈都是来自真实用户的声音,包括主动的从现有的产品进行回访、用户调研以及通过用户的反馈和建议收集有效需求。

有了需求,那是最直观的,对应的产品功能可以根据此展开进行规划。

而第2需求类型,常常是因为局限于没有经验,不熟悉不了解所以需求的声音很少,这时候,产品经理就需要主动的去对比竞品,去分析竞品,解析出产品的核心需求,并且去了解这个产品的一个市场背景、规模和场景范围了。

当然,竞品分析不是让你全部照搬抄写别人的产品,这是没有灵魂的,作为一个产品人,是需要有自己的想法的。B端产品的分析,更加倾向于功能模块及逻辑设计,而非用户体验或界面的细致优化。

从0到1的产品功能规划时,要明白企业是属于某个行业的,而行业的范围比较广泛,比如做教育的,器材可以属于教育装备的一种,教务管理系统也可以属于教育装备的一种。另外,书籍、校服、桌椅等面对的对象是学校的,他们也可以说自己业务涵盖了教育领域。

所以,我们设定或规划一种产品时,往往都是有关联性的,而不是完全切入一个新兴的领域,撸起袖子就干。

当然,有能力的并且有钱的企业是可以这么做的,但是对于门槛较高或需要积淀的领域,他们也不会贸然动手,起码会先观望一下,然后找一找这个领域内的老玩家,通过合作的方式获得了经验值再自己独立做,但是做肯定是不会做相同的事情,老的市场被吃透了,这时候只有把新的东西注入,才能获得一些收益,比如把自己独特的优势、互联网观念或用户个性化体感的设计再应用到传统的制造业中,摸清了其壁垒及门道,才能走出自己的道路。

02 定义场景

场景是功能使用的具象化,主场景作为该功能的一个核心定位。如做一款访客产品,定位于通用性产品,你将考虑到其面对的对象,包括:

  • 购买者:政府单位、企事业单位、写字楼物业、小区物业、学校等(看重外观、整体系统的业务流程及效率、来访者的用户体验)安全需求较高的场景
  • 使用者:公司前台、门卫保安(看重产品易用性,且门卫保安等存在学历较低、年龄较高等普遍情况)
  • 受访者类型:集团大厦管理、公司部门、物业园区、政府机关、信访单位,政府机关、部队、学校、住宅小区、写字楼、会议展会

用户群体则可以细分:

  • 访客:商务洽谈、应聘者、办理业务、长期驻场员工、后勤(物料配送、维修)、参观、临时出差人员、外卖/快递配送
  • 受访者:企业高管、接待员/招聘者、业务办理人员、后勤管理人员
  • 未知人员:广告人员/推销、系统故障、人工登记后等遗漏登记的人员

03 思维导图罗列大体功能

调研竞品后,也分析了产品的使用对象及场景,这时候可以提炼和列举出核心且必要的功能,分析并讨论,这个时候一般是产品经理之间的相互讨论及推敲,可以先个人提出自己的方案进行比对,再去重择优,一个个将一级和二级的功能模块确认下来(也可以是3级,视具体情况而定),将整一个产品框架定下来。

思维导图的使用和场景使用也是相辅相成的,此类场景是基于主场景下的细化。如,对于访客来说,他去拜访用户,是否需要提前预约,如果没有提前预约,现场登记的方式和提前预约的方式有什么不一样,这样就可以确定下来,两种方式:预约和现场登记。那预约又可以包括访客H5扫码主动登记或者企业邀约申请等等。

04 整理流程

功能模块确定后不要急于去画原型图,因为更重要的一步还是整理整个产品功能之间的关联性,即产品数据的来龙去脉。

流程可包括业务流程、限制流程、前后端交互流程图等。以下图进行例举:

1. 业务流程图

为业务模块核心的工作流程,数据流向及基础判断,及业务的几种模式都可归属为业务流程,涉及的模块和功能一般是自己的模块属内。

2. 限制流程图

如在增删改查的过程中,对数据的一些限制和参数判断后的不同流向,往往是由多个模块之间的规则限定的,涉及到不同模块之间的关联性较强的说明。

3. 数据流程图

数据传输的起点和终点。一般软件包括前端和后台服务器,后台主控数据的管理和分析,通过后台对前端应用进行管理,常见的为数据的上传下发和命令的顺序的判断。此流程图着重对数据前后端的交互及整体流程的绘制。

基于以上都整理清楚之后,就可以开始进行原型设计了,原型的布局和风格可以根据现有软件或UI专业的建议进行设定,对于B端产品来说,布局和排版对功能影响不是很大,即使从0到1,也可参照市场常见的布局或根据公司规定的统一。而风格和产品定位尽量贴合,假如你做一款小清新的APP,就不要使用暗黑风格的调调了。

这就是今天篇文章讲的,之后会分享一些关于功能规划时的一些细节点。


文章来源:人人都是产品经理  作者:漂浮柠檬核

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


日历

链接

个人资料

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

存档