首页

如何提升B端界面的精致度

纯纯

于B端,我想刚开始很多同学就直接拿Ant Design套套界面,因为公司要求并不高,随后字节Arco Design也推出了对应的模版和规范,能让我们快速作出一个不出错的方案。

但是随着公司对B端越来越重视,这些模版显然就太烂大街了。公司、市场的要求显然不止于此,我们的设计追求也不止于此。 

那么我们如何才能摆脱套模版,提高界面的精致度,提升界面的交互体验呢?

其实很简单,王阳明先生告诉我们知行合一,知是行之始行是知之成。我们如何才能提升B端界面端精致度?

第一,需要知道什么是好的设计;

第二,需要不断的去实践去练习,缺一不可。

本文先和大家谈谈知的层面,提高我们的眼界,下面就和大家分享一些不错的B端产品,大家有时间可以去慢慢体验。 

PS:作为B端设计师,一定要去多拆解竞品,多研究好的产品,别面试的时候,面试官问你研究的B端产品是什么,你只知道阿里云、腾讯云、百度云哦! 


1、Hubspot

做B端的同学,尤其是做CRM的同学应该都知道Salesforce,他是全球最大的 CRM(客户关系管理) 工具公司。 

Hubspot同样是提供客户管理相关的应用,虽然成立相对Salesforce晚,但是在市场上也占有一席之地。

从设计的角度来看,他的界面风格更加简洁舒适,从体验上来看和国内的CRM系统完全不同,其体验更加自然和舒适。 

这种风格大家看了有没有觉得很熟悉呢?

大家在去看看 GoDoddy , Airbnb ,Zillow,是不是发现风格有一点类似,大家可以对比国内产品去拆解下他们的交互细节有什么不同,完成同样的任务他们采用的方案有何不同,相信你会有很多的收获。 

国外的界面看着总让人觉得很舒适,仅仅是因为克制的设计、中性灰使用得好吗?当然不是,是因为英文本身就是图形化的文字。

如果翻译成中文,你会发现好像不是特别理想。 

这个样子拿给领导过稿,怕是分分钟被拍死,因此我们还是需要多看看国内优秀的产品。


2、神策

神策的设计,我想B端的朋友不陌生吧,国内产品中他的设计一直是我们的参考对象。

不同于其他产品,他的体验门槛比较低,注册后就可以去体验他的demo,也没有试用期限,参考对象从可视化报表,到界面交互均能找到参考。

不过当你参考一次后发现,做出来的界面怎么还是少了一些灵魂,虽然界面风格上了一个台阶,但为什么用户还是觉得产品难用。

 

3、项目管理类

这里不得不和大家推荐项目管理类产品了,这类产品是专门给互联网公司的开发团队使用,他们都是专业用户,同时这些都是提高他们工作效率的工具,因此这些产品投入的成本更高,优化得更好,拆解他们的产品,就是直接观看高手的成长之路。

Jira

Jira是Atlassian公司出品的一款事务管理软件,JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。

同时他也是国内项目管理类产品的学习研究对象,因此大家可以通过文章、B站、界面截图,自己申请体验等方式全面的进行体验。

同时也可借助群的力量,调研下有使用Jira的小伙伴,看看他们在使用中有什么问题,下面是我收集Jira网页版和本地配置版的问题截图,这些都来自不同角色的真实体验,会更有分析的价值。(这部分截图涉及到公司的数据,同时数量多不太方便打码,就不分享给大家了。)

当然国内的项目管理类产品也得去看,我们要对比哪里做得好,哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition,这些产品不管从视觉还是体验都非常不错,大家一定要去体验。


5、文档管理类产品

通过不断对竞品进行拆解,你已经不是当初那个小白了,你的行业认知,方案设计能力应该赶超了一大波人。

成长的同时,又发现你设计的界面,不太精致,少了些温度,这时候推荐你看文档管理类产品。

WPS

第一个和大家推荐的是WPS,界面简洁,配色舒适。 


飞书

在管理类的软件中,不得不提飞书的管理界面,从设计到使用体验,他给我的感觉终于不是那么千遍一律,用组件库搭建起来的感觉。

他开始有了温度,开始注重品牌感的打造,用户的引导,符合品牌调性的插画。 

 

对一些体验的细节进行优化,比如传统的编辑都是放在页面顶部,它采用了离光标更近的位置。 

根据菲兹定律,光标当前的位置和目标位置的距离D越短,所用的时间越短,具体好不好用,欢迎大家在评论区留言哦。 


6、概念稿

到这时候如果你觉得线上的产品太禁锢思维,那么推荐你看看dribbble、behance,搜索data、web、dashboard等关键词,去看看有没有新的灵感。

我的花瓣收集了一部分,如果不嫌弃,可以去看看,顺藤摸瓜应该可以找到很多不错的设计。

图片标题

 

7、画重点

如何提升B端界面的精致度?

第一,要知道什么是好的设计,多拆解国内外优化的B端产品。

第二,多在工作中时间,有时间多做ABC方案,锻炼自己的方案设计能力,多踩一些坑,时刻保持学习能力,慢慢就成长了。

文章来源:UI中国   作者:风筝KK
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


UI界面设计基础

博博

互联网设计的一些基础知识,写给刚入门或想入门的童鞋们,希望有所帮助


    • 文章来源:站酷   作者:凌坤_Maxidea

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

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

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

圆形元素在界面设计中的运用

博博

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。

圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状。圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到。也正因为如此,在使用圆形元素设计界面时会有一些注意事项。


一、圆形头像


放眼望去,圆形头像已然占领了我们的手机。不妨看看下面举的这些例子,如下图所示。

43e456a455da32f875520f6db95d.jpg

从左到右依次是搜狗地图、QQ、Instagram。当然,还有很多其它的例子,就不一一列举啦。此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图。d1df56a455f56ac7256cb095c8b4.jpg

方与圆之间,孰对孰错,请继续看下文分解。


1.用户使用头像的目的

不管是圆形头像,还是方形头像,其归根结底都是头像。用户使用头像的目的,主要是作为个人身份的象征。区别于其他用户的特征有很多,例如用户名、用户ID、用户头像。在这些备选项中,头像最便于快速识别和记忆,尤其是帅哥美女。


除此之外,还有一部分通过头像来彰显自己的个性,例如美女通常会使用自己的性感自拍作为头像来表现自己的魅力,又或是使用卡通人物或形象作为头像来表现自己的艺术气息,再或是使用萌宠作为头像来表现自己的爱心或是呆萌。


2.用户使用什么照片作为头像

随着智能手机的越来越普及,人们拍摄照片的门槛也变得越来越低,越来越多的用户使用自拍的照片作为头像。照片的内容五花八门,例如人物、风景、花草、宠物。即使是正常的人物照片,背景中也会掺杂着很多其它的元素,例如下图所示。

5cf056a456106ac7256cb020a2c8.jpg

第一张照片中人物背景虽然虚化了,但背景仍然很凌乱,一些微弱的对比色很容易就抢夺了用户的视线。第二张照片中人物是配角,豪车才是真正的主角,这类型的自拍照不再少数。第三张照片人物拍摄的光线阴影错乱,故意露出一线背景内容,其用意如何昭然若揭。此外,用户手机的好坏、拍照水平也不一致,拍摄出的照片质量也参差不齐。


使用这些照片作为头像时,人物不但不被突出,反而被弱化了。虽然智能手机屏幕越来越大,但是当头像集体在界面中展示的的时候,每个头像依然较小。


3.方形头像和圆形头像的区别

方形头像和圆形头像的区别可以用两张对比图来说明,如下图所示。

5d5c56a456266ac7256cb013db0c.jpg

左图是方形头像,右图是圆形头像。通过对比,可以发现以下几点:


a、圆形头像能够更好地帮助用户聚焦到人脸。虽然左图能够完整地呈现人物特征,但是干扰信息较多,例如背景中的灯光、门柱、屏风。对比之下,右图更为清晰地展示了人物的脸部特征,例如锥子脸、美瞳、假睫毛。在前面的分析中也提到,手机拍摄的照片质量参差不齐。在这种现实情况下,圆形头像更有利于忽略照片的背景,提高头像的识别效率。


b、严格意义上讲左图并不能称之为头像,而更应该称之为照片。原因很简单,头像嘛,自然应该以展示“头”为主,而左图中头像只占画面四分之一不到的区域。从这个角度来说,显然右图更为合适。在选择照片作为头像时,如果是圆形,用户更愿意选择脸部的照片作为头像;如果是方形,用户则相对更随意,通常是全身或是半身照。不信,你可以打开自己的微信,看看自己的好友头像,或者往前滑滑看看前面的配图。


c、日常生活中,我们看到的大多数相框都是方形的,圆形的相框较少,这是因为大多数照片都是方形的。因此,使用圆形的轮廓来表现头像,能够快速地和照片区分开来,更加突出。

当然,使用圆形的轮廓作为头像,还有一些其它的原因,例如技术上的进步。

早期由于CSS等技术的不成熟,圆形、圆角图形的处理非常麻烦,现在变得容易很多。


二、圆形的icon


在APP的UI设计中,我们会经常看到一排排圆形的icon,例如下图所示。


fc6956a4564232f875520ff01b89.jpg

上图中,前面两个分别是美团和淘宝。在设计上,都有两行横排的圆形图标。最后一张图是搜狗地图的服务tab页,可以发现也有纵向排列的一溜圆形图标。

在这里,要回答两个问题:

1.为什么要用圆形?

2.为什么要用圆形而非矩形?


第1个问题很方便回答。每个功能入口的图标都不相同,如果去掉圆形轮廓,势必会显得十分凌乱。大家都知道圆形是一个封闭的形体,加上圆形之后就能够弱化图标的差异性,让其变得更加规整,看起来也更加清爽,整齐划一。同时,在功能上也表明各个图标之间的平等地位,不会因为某个图标形状特殊而有所偏袒。


在回答第2个问题之前,首先回归圆形和方形的基本特征,

圆形:动,曲线,运动,灵动,流动

方形:静,直线,规则,严肃,理性

圆形和方形比起来,显得要灵动很多,不至于那么呆板、严肃。如此,不难理解为什么用圆形而非矩形。


其次,圆形能够使图标在方形页面中脱颖而出——不觉得这几个圆形图标在页面中非常突出抢眼么?原因嘛,很简单。我们的手机屏幕大多是方形的,界面中的大多数元素也是方形的,这时候用一点少量的圆形,自然在界面中形成焦点,这一点在后面的分析中还会见到。


除了这种形式之外,还有一些单个的圆形图标浮于页面底部,通常执行的是返回至顶部的操作。


三、圆形和方形的结合


圆与方就像太极中的阴与阳,相生相克,而又生生不息。巧妙地将圆形与方形进行结合,能够让页面变得生动活泼的同时,也能够更好实现功能上的引导,如下图所示的几个案例。

ebb456a4567032f875520fafc8f5.jpg

第一幅图是谷歌手机地图,地点右上角的出行方式图标刚好被方形的临时层一分为二。从功能上来讲,出行方式是下一步的行为,不属于临时层里的内容,因此置于右上角的位置是比较合适的。从UI角度来说,圆形与方形结合,使的圆形变得更加突出显眼;同时圆形置于右上角,页面也不那么死板,反而让页面变得生动、活泼起来。


第二幅图是宜人贷,微微鼓起的弧度让这个理财项目变得十分突出,同时也打破了页面沉闷的布局。


第三幅图是kitchen stories,整个页面保持左右居中,作者的头像居中现实,对页面进行了分割的同时起到了承上启下的作用。


在页面设计中,圆形元素通常不是独立存在的,而是和其他元素相生相息,相互包容。寻求好的视觉效果的同时,也要弄清楚页面元素之间的相互关系,这样产出的设计才是真的好设计。


四、圆形的轮廓


结合现实物体,借用圆形轮廓,打造页面点睛之笔。还是举几个栗子给大家看看吧,如下图所示。

a29156a4568e6ac7256cb0899d80.jpg

第一幅图所示的是网易云音乐的播放界面。圆形轮廓与唱片保持一致,虽然占据了页面的主要空间,但是使的整个页面变得文艺简洁。


第二幅图所示的是搜易贷的账户页面。可用余额采用瓶装水的设计,余额较多则水涨的越高,同时会有晃动的效果,栩栩如生的同时让页面变得灵动起来。


第三幅图所示的是乐动力的首页。步数越多,则描边进度条越多,暗色变得越暖。与现实生活中的仪表盘相对应,渐变色搭配圆形,使的页面变得主次分明,极富视觉冲击力。


可以发现,在使用圆形元素时要注意页面的平衡,例如左右和上下的对齐居中。为了保证页面的均衡和清爽,通常会在圆形元素周围保留较多的空白。这些都是在使用圆形元素时需要注意的事项。


    • 文章来源:站酷   作者:Sim_H

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

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

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

7个基础的用户体验设计细节

seo达人


1、专注于20%

maggelato

你可曾听说过80/20法则?简而言之,80%的用户通常只会使用你网站内容和功能的20%,绝大多数的用户只是在扫视网站内容,并且只会挑选真正感兴趣的浏览。

同时这也意味着,剩余的20%就相当重要了。大多数的点击将源自于这一区域,它也是近乎完美的内容和互动区域。

你可以借助数据分析来决定哪个部分是整个网站最被关注的那20%。对于刚刚上线的网站,这个数据搜集的过程可能长达好几周,随后再进行调整。

当然,你也可以通过引导将用户引流到你希望用户去的那20%的区域。借助视觉引导和行动召唤设计来引流,用有趣和有意思的设计来营造令人有兴趣的区域,让他们乐于点击,从而达到目的。

2、架构式的思维

goldhill

设计一个网站和搭建一所房子其实差不多。首先,它需要一个坚实的基础,然后是能够承载所有内容的框架,做好后要好好装饰一下。同样的思维模式可以套用在网站的设计上。

更重要的是,你并不需要为此创造出过去从未在框架中出现过的东西,换言之,框架内的素材、组件和我们常见的并无二致。就像导航设计模式一样,现在的设计都趋于一致,因为这样的导航好用。

当网站的整体结构搭建起来之后,可以将相同的思路套用到内容体系的构建上来。主要的正文内容是整个网站内容的基础,辅以吸引人的标题、图片,配合上其他的次要元素,整个内容体系可以很快搭建起来。

3、不要要求太多

assos

现如今的世界可以说是由数据所驱动,越来越多的应用开始要求用户注册,要用户提供更多的权限,更多的信息,以期为用户提供更加个性化的体验。但是从体验的角度上来看,要尽量规避这一点。

站在用户的角度稍加思考你就明白了。找到一个令你感兴趣的炫酷网站,如果要深入了解更多内容,就需要内容,而如果要注册的话,网站却需要你提供下面10个类型的信息:姓名、邮件、国家、地区、城市、电话、Twitter权限、个人网站、工作职位、以及如何发现这个网站的。

那么接下来,你会怎么做?绝大多数的用户会直接转身离开,这个注册信息填写起来太费劲,体验太差了。

那么,如果你当你点击注册的时候,只需要一键从Facebook或者twitter授权即可,那么你会不会立刻点击呢?至少从目前已有的数据来看,绝大多数的用户会这么选择。

4、令人愉悦的微交互

evernote-1

可能很多时候你都没注意到,你和各种微交互进行的互动一直都存在。

·谷歌日历弹出框提示你每周例会要开始了
·短信提醒
·午睡的闹钟
·微博上的新粉丝和转发提醒

这样的例子我们可以连续不断地说上一个小时。这些带有微交互的提醒和动作会推动用户进行下一步操作,带来愉悦的体验,它们不能设计得非常醒目,但是又需要适当地吸引用户注意。

这些有趣的微交互的加入让用户从中获得好处。而你需要思考的是,有哪些东西是你的网站或者APP当中,用户想要立刻知道和获得、想被提醒的?

5、甚至幼儿都能轻松使用

statusshop

如果要给小孩子设计产品,那么它应该是什么样子?你可能会更专注于色彩的使用,让每一个区块都可以轻松点击,明显的标签,加上拼图式的连接方式。

所以,当我们在设计网站或者APP的时候,我们会说这个产品要足够易用,那么怎么才算得上“足够”呢?让小孩子都可以轻松使用,这就叫足够易用。换句话说,即使是不经常使用网站和APP的成人,也不会存在明显的使用障碍。

超大的设计元素和标签是设计的关键因素。这些视觉线索是帮助用户引导用户的核心,是整体体验设计中最重要的部分。大胆的色彩选择,会鼓励用户点击和探索。

如果它足够易用,用户会继续尝试使用和探索。而难于理解操作不便的导航自然会被用户所嫌弃。如果网站包含太过复杂的媒体和内容,那么不妨从一个设计简单的首页开始,几个简单的导航点击将用户引导到对应的位置。在深入到更复杂的页面之前,用梳理清晰、简单明了的分页让用户感到舒适,这是带来好的浏览体验的不错解决方案。

6、轻拍(Tap)还是点击(Click)?

espns

这一点要说的并不是设计问题,而是一个常见的开发代码的问题。虽然Tap和Click两者都能在点击的时候触发,但是在移动端网页上使用Click事件 的时候,会有200ms 到300ms 的延迟,所以在移动端上最好替换为Tap事件。在进行响应式网页设计的时候,一个事件从头用到尾的错误出现得很普遍,但是有太多的移动端网页在这样的设计下会有明显延迟,更恶劣的情况是无法识别,这样会直接损害到整个页面的易用性和功能本身。

此外,移动端上使用 Tap事件的时候,它所对应的按钮应当相对更大一些,便于小屏上进行交互。

7、像用户一样思考

justact

我们一直在说:“像用户一样思考”。但是实际的情况往往是,我们很难走出设计者和开发者的思维方式,因为我们的思维方式压根就和用户不同,面对每一个交互、每一个元素的下意识反应是不一样的。

所以,还是同设计圈、开发圈和产品圈以外的人去聊聊吧,看看他们对于网站和APP的真实反应到底是怎样的。你可能会在观察中发现,他们对于产品、对于交互、对于界面的反应和你的预期完全不同。将用户的真实反馈记录下来,反馈给项目组,这样可以帮你打造更好的用户体验,创造更优秀的产品。

原文地址:designshack

译文地址:优设

作者:Carrie Cousins

优设译者:@陈子木

转载请注明:学UI网》7个基础的用户体验设计细节

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



你的设计有依据吗?详解用户体验设计中的规律与逻辑

seo达人


shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

原文地址:站酷

作者:孔雅轩LineVision

 

转载请注明:学UI网》你的设计有依据吗?详解用户体验设计中的规律与逻辑

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



在不同屏幕和设备上创建用户体验设计的8个步骤

seo达人


1. 确定核心用户体验

每个产品都有核心的用户体验,这基本上是它存在的原因。它解决了人们所面临的问题,而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验,就要问自己一个问题:“客户需要完成哪些最常见和最重要的任务?”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如,Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何,此功能都能在每个设备上正常工作实现这一目的。

Image title

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源: Techcrunch

 

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备,但绝对不能定位各个设备,可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是:

移动手机

平板电脑

台式电脑

智能电视

智能手表

Image title

不同的设备组在不同的上下文中提供不同的服务:用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如,手机主要用于微任务,并且具有较短的用户会话。平板电脑主要用于内容消费,目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

 

3. 适应每个上下文使用的体验

确定产品的核心用户体验后,选择一组你希望支持的设备组,你需要调整每个组的体验(对于每个上下文的使用)。上下文的设计在不同设备组设计时尤为重要。

第一,并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景,并设计适合每个场景的体验。例如,通常移动用户比电脑用户想要的不同于产品。以 Evernote为例,可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化:

Image title

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

 

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的:

Image title

Evernote了解移动环境:它利用设备功能,并提供快速保存想法的方式(添加文本笔记,捕获照片或设置提醒)。

 

第二,不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入(移动手机和智能手机)的设备时,设计师会犯的几个常见错误包括:

小的点击目标。点击目标(如CTA按钮)必须具有足够大的尺寸。通常至少7毫米是足够的,但最好使用10mm触摸目标尺寸。

Image title

                                      图片来源:UXMag

 

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距,因为间距有助于分离控件,并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

Image title

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上,没有“悬停”。

 

4. 最小屏幕设计

历史上,设计师一直从事大屏幕到小屏幕的设计工作,这意味着第一个也是主要设计是为了完整的电脑桌面视图(它具有最多的功能)。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时,我们通常面临“厨房水槽”问题:许多功能被添加到产品中,特别是当涉及多个利益相关者时。这并不奇怪,,当你有很多不动产时,添加功能是比较容易。实践经验清楚地表明,最好使用移动方法进行设计,并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时,它会强制你决定最重要的。一段时间后,你将采用同样的方法仔细选择产品的其他版本,无论是电脑桌面设备,平板电脑还是电视。

Image title

在大多数情况下,手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要,那么你将需要考虑具有更小分辨率的微型屏幕。

 

5. 不要忘记大屏幕

想想大屏幕以及小屏幕,给大屏幕和小屏幕提供同样的注意力:

不只是缩小设计,使其适合那些大屏幕。充分利用你可以使用的额外空间。

Image title

                                                                                           图片来源:Wikipedia

 

确保图像不会因为屏幕尺寸的放大而失去质量。

Image title

                                                左:低质量图像。右:正确的分辨率。

 

考虑大屏幕细节。每个设备组都有自己的不同。例如,电视屏幕的设计被称为“设计10英尺体验”,因为从沙发的距离来看,与电脑桌面屏幕相比,屏幕上元素的明显尺寸明显更小。

Image title

                                                                 电视的用户界面元素应大于电脑桌面。图片来源:Samsung

 

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何,一致的用户体验是成功的全通道用户体验的关键组成部分之一:

对未来与产品的交互设定期望,并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面,而不是将设计定制到越来越多的屏幕和设备中。例如,Google搜索应用在所有设备上提供相同的搜索体验。

Image title

                                                 当设计和功能一致时,用户可以在他们选择的设备上更快更有效地完成任务。

 

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动,完成任务,或当他们从设备转移到另一设备时,他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备,环境的变化或上下文的变化,并且可以依赖于设备良好的功能性和独立于设备的易用性。

Image title

                  大多数人如何走过他们的一天,他们访问的主要屏幕。图片来源:Intercom

 

根据使用情况,你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例:你可以在Mac上设置播放列表,并在iPhone上即时播放,也可以开始听iPhone上的歌曲,当你转到电脑桌面时,你将被拍摄回到你在iPhone上。

Image title

                                                                  Apple Music可以很好地处理多个设备的同步。

 

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试,你可以在发布之前发现用户体验的问题并解决它。

 

结论

在设计多个屏幕和设备时,最好的策略是保持最终的用户体验。作为用户体验设计师,你必须评估产品的使用时间,位置和方式,以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕,用户都希望在各种设备之间获得流畅的体验。

 

原文地址:ADOBE BLOG

译文地址:UI中国

作者:Nick Babich

译者:SKYUI

 

转载请注明:学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



动效赋能 助力用户体验设计

seo达人


起源发展

动画发展大致经过了三大阶段,分别是从传统动画(纸笔)>>CG动画(离线渲染)>>互动动画(实时渲染)。随着时代变迁、设备以及技术升级,新的动画形式以及呈现载体不断的被创造出来。
动画发展的三大阶段

 

传统动画注重理论基础以及扎扎实实的基本功,并且是艺术学院必修课,宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品,所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。

CG动画是随着电影行业与游戏行业一并发展起来的,由于电影的工业化程度太高,技术积累也越来越深厚,所有游戏使用的工具与技术偏向电影那一套,但不同的是电影是离线渲染的,一部短片渲染几千个小时都算很正常。而游戏与电影不同,实时渲染必须保证帧速率,所以游戏行业最重要的技术核心就是改进游戏引擎。
互动动画想必大家更加熟悉,也就是游戏、web/app、VR/AR/AI、新媒体这些领域的动画,这篇文章我们主要讲的就是Web/App动画。
初期苹果Mac桌面文件夹的打开与关闭

 

从初期的MAC电脑到现在的iPhone X 不过短短的几十年,产品设计中动效的运用已经获得了巨大的进步。动效其实对于用户体验这个大专业来讲是一种新的学科,随着我们的设备的硬件条件越来越好,动效才被支持的越来越好,可实现的难度也才越来越低。
交互动画里有一部分依然是归为传统动画的,比如说Loading/插画动画/载入动画等等。这些可以动画需要多关注迪士尼12大动画原则(节奏&时间、运动曲线、预备动作、夸张、挤压&拉伸、次要动作、惯性、关键帧动画&连贯动画、动作表现力、感染力、角色个性),但是另外一部分则是扎根于产品设计的“交互”中。
CG动画与交互动画的区别

 

CG动画更加注重片子所表达的故事的完整性以及趣味性,大部分运用的都是超现实的手法,时长一般都5s以上,只需要开动脑洞只要软件技术能实现都可以发挥出来。
而交互动画更注重的是动效的合理性和可用性,动力学需符合真实的物理世界,还要注重整个产品内的动效的统一与协调。一般持续时间都很短在1s内,大部分动画在200-500ms内完成。整体来说动效都相对简单,不会太复杂因为要考虑技术可实现性。

 

 应用场景

这里我们只针对我们互联网产品设计讲一下交互动效的应用场景,我总结了以下七大应用场景,分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。

 

图标动效

一般来说图标动效适用于App或者web产品中,单个持续时间在100ms左右,根据图标的复杂程度以及实际使用的场景最长时间也不超过400-500ms。图标动效更注重微弱的变化带来的趣味性以及流畅性,常用于状态反馈以及导航引导,通过小小的变化可以为产品体验增色不少,优秀的还可以给用户留下深刻的印象。

 

界面交互 

一方面界面交互动效可以让人对产品产生深刻的印象,甚至是带来惊喜,另一方面表达了界面之间的交互过程,吸引用户的注意力。通过减少预判误差、增加连贯性、强调叙述、清晰关系四个方面来增加产品的可用性。

 

汽车系统 

汽车系统的用户界面以及动效一般都来说比较有科技感,动画会更加的酷炫。本质上来说汽车系统其实跟我们日常用的产品是一样的,由于行业定位的不同以及用户使用场景的不同造成了这些差异。

 

插画动效 

适用于App的引导页、运营活动、空状态页面、错误页面,展示型网站等等。在产品设计中插画动效一般有2种实现形式,一种是视频或者动态图片直接加载即可,另外一种就是开发同学通过技术手段来实现,SVGA、lottile、apng等等。

 

品牌宣传

http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
这是韩国一家咨询公司Plus X做的一个App的宣传动画,这里说的品牌宣传更像是一个产品的解析以及意义的传达,更轻量化、片长更短、制作技法也相对简单一些。

 

HUD 

HUD可能很多同学都不知道是什么,给大家科普一下。HUD(Head Up Display)又叫平视显示器,最开始呢是运用在航空器上的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。因为HUD的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装。后面延伸到像大家在科幻电影里面看到的那种智慧大屏,以及政府机关等等我看看到的那种蓝色动态LED大屏都属于HUD。

 

项目包装 

https://v.qq.com/x/page/r0824uenul0.html
上面的视频是腾讯的ISUX部门2018项目包装的视频,当时这个视频上线后,各大公司的UED部门竞相模仿,这个项目包装里面有很多项目都用到动效设计,包括礼物动效,表情动效、插画动效、logo演绎等等,这说明动效设计在互联网产品设计中的应用已经相当的广泛了,作品本身的效果加上简单的动画包装就可以做成一个动态的作品集,对于宣传团队是一个很不错的点,个人作品集也可以按照这个思路来做,肯定也会有很不错的效果。

 

设计语言

设计语言是指导统一产品设计的大脑,所以了解设计语言对于我们无论是做界面还是做交互设计以及动效设计等等都有很大的指导性作用。
上图中的6个是国内外比较知名的设计语言系统,大家应该或多或少了解一点,推荐大家有兴趣可以去看看他们的设计系统,相信会对你们有很大的帮助,对帮助构建你的个人设计体系也有很大的参考作用。
这里我们以Material Design为例进行讲解,给大家介绍一下这套设计语言以及设计语言内的动画模块在我们的工作中是如何运用的。
Material Design,是由Google在I/O 2014大会上推出的全新的设计语言,其灵感来自与真实物理世界及其纹理,包括真实物理世界如何反射光线和投射阴影,通过材料来重新构想纸张和墨水的一种介质。

 

其主要目标是:
创建:创建一种视觉语言,将经典的优秀设计原则与技术和科学的创新和可能性相结合。
统一:开发单一的底层系统,统一跨平台,设备和输入方法的用户体验。
定制:扩展Material的视觉语言,为创新和品牌表达提供灵活的基础。

 

基本设计原则:
大胆,图形,有意:Material Design以印刷设计方法为基本指导:排版、网格、空间、比例、颜色和图像。即创造层次、意义和焦点,让观众沉浸在体验中。
动效有意义:通过微妙的反馈和连贯的过渡,集中注意力并保持连续性。当元素出现在屏幕上时,它们会转换和重新组织环境,交互产生新的转换。
基础灵活:Material Design系统旨在实现品牌表达。它与自定义代码库集成,允许无缝实现组件,插件和设计元素。
跨平台:Material Design使用跨Android,iOS,Flutter和Web的共享组件跨平台维护相同的UI。
Material Design的要解决的问题以及设计原则大家应该都了解了,我们针对设计语言内的动效有意义做一下延伸,让大家对动画有一个再深入一些的了解。

 

那么Material Design动效的用途主要有以下四点:
层级关系:通过动效反映父级元素(收件箱)与子级元素(收件箱邮件)之间的层次结构关系。
状态与反馈:动效提供及时的反馈和用户操作状态。
用户引导:动效为用户如何执行操作提供有用的建议。
个性化:动效为产品设计提供可更多的趣味性、个性以及吸引力,对品牌的提升和认知有很大的促进作用。

 

了解了设计语言的动效模块,相信大家应该有一个系统的认识,在方寸之间进行动画设计,考虑的就是毫秒之内,而在毫秒之内最应该考虑的就是速度,研究发现,在界面设计中最合适的动画时间为200-500ms之间,时间太短,用户难以感知,时间太长,用户又会觉得整个过程太缓慢不够流畅。
当然了根据设备的不同动画内容的不同,动画持续的时间自然也是不相同的。动画时间的长短与动画路径的远近是成正比的一般。另外平台的不同,动画持续的时间也是不相同的,在pc端内的动画要比移动端的动画持续时间普遍少50%左右,这是因为平台的属性所造成的。但是要是单纯的做装饰动画是可以单纯发挥的,不用遵守上面的几个原则,所以进行动画设计的时候都需要考虑到具体的场景以及具体的需求,灵活运用。
说完了时间,我们来说说跟时间息息相关的动画曲线,我们都知道在几百ms内表现出动画的特点是有点难度的,所以精细的运动曲线对我们就显得格外重要,这里我总结一下Material Design内提到的几个常用的动画运动曲线,大家有兴趣可以去Material Design的官方文档内详细查看:
上述的几个运动类型以及动画曲线我们在产品设计内经常会用到,希望大家打好基础,灵活运用。
我们知道任何一件事情都有存在的价值和必要,动画也不例外,如果动画没有体现出他应该有的价值,那么做的再好看也只是仅仅局限在了好看这一个层面,下面我们就看看动画到底能在产品设计中带来什么样的价值。

 

动画价值

有时候现代科技产物使用起来非常复杂,但是其实“复杂”本身没有好坏之分:不好是因为没有处理好这个复杂所以产生了“混乱”,所以应该被批评的不是复杂而是因复杂所产生的混乱。——唐纳德·诺曼

优秀的动效可以帮我们解决产品设计中的很多问题,可以从用户体验的五大要素来进行价值的拆解:

 

战略层

战略层本质上来说大部分设计师其实是接触不到的,当然接触不到战略并不能代表我们不需要了解,作为设计师我们必须了解公司对产品的战略定位以及期望,也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层,所以单纯来讲,动画在这一层面上可以发挥的余地是是不多的,因为更多的这一层更加关注意识形态的战略思考。

 

范围层

范围层是通过战略思考来思考明确产品的大概功能和内容,有很多产品的功能复杂,交互繁重,内容很多,在这种情况下动效就派上了用场,我们可以尝试通过动效来解决内容过载,优化交互模块,扩展产品内容功能范围。

 

结构层

这一层主要确定产品的功能结构以及层级,主要设计用户如何快速,准确的触达某个界面完成某个任务,要考虑用户体验地图,用户整个的任务路径,简单来说就是用户要做什么事情,如何做,做完之后应该干什么,如果能对动效巧妙的运用,就可以做到引导用户,练习上下流程的作用,降低用户理解成本,提搞产品的操作效率,提高产品的可用性和易用性。

 

框架层

从这一层开始,UI设计师接触的内容逐渐多了起来,大家也会更加熟悉工作的内容以及范围,这一层主要体现在优化页面布局,确定元素摆放位置,涉及到具体的信息、界面、导航设计等等。通过利用格式塔,栅格,设计语言等方法确定产品功能具体页面内容布局,我们可以通过动效来进行辅助设计,例如强化元素的位置、颜色、大小,优化页面的切换、跳转的流畅度以及自然度等等。

 

表现层

表现层具体涉及到视觉、听觉、触觉的体验设计,也是做为视觉设计师、UI设计师发挥最多的一层,在表现层动效的展现形式会多种多样,这里不展开讲解,大家应该都明白。在表现层加入适当的动画能够提升产品趣味性,加强用户与产品的情感链接,增加用户对产品的友好度。

 

未来发展

5G

5G时代已经到来,5G的普世将会为科技发展带来更多的可能性,众所周知5G的速度是4G的百倍,那么意味着我们的设计的动画会加载的更快,动画文件的大小限制将会被打破,另外也可以在某些领域的产品内设计更复杂更酷炫的动画。

 

人工智能(AI)

它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内,我们能参与到的动画设计必然会更多样,形式也会更丰富,挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来,让我们拭目以待。

 

虚拟现实(VR)

是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体,其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展,各行各业对VR技术的需求日益旺盛,VR技术也取得了巨大进步,并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计,并且我相信未来会逐渐的变成主流。

 

参考资料

material.io/design/motion
https://www.zcool.com.cn/article/ZODIzMzky.html
https://zhuanlan.zhihu.com/p/27114894

 

原文地址: 小凯的设计笔记(公众号)
作者:小凯君
转载请注明:学UI网》动效赋能 助力用户体验设计


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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



你想要的,用户体验设计中的心理学

seo达人


变色龙效应/镜像效应

图片

俗话说,“有样学样(Monkey see, monkey do)”,包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验,我们进行的互动具有亲密性和即时性。

你有没有试过听了朋友说的话之后又说给对方听?这是变色龙效应的完美例子。

 

启动效应(Priming)

图片

指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后,跟看喜剧相比,屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。

启动效应会塑造我们对环境的行为和反应,而且往往是有效的捷径,让我们可以迅速做出决定。这也是一种有效的说服工具,已经广泛应用到产业的营销和广告领域。

 

冯·雷斯托夫(Von Restorff)效应

图片

德国精神病学家和儿科医生海德维希·冯·雷斯托夫(Hedwig von Restorff)在1933年提出的理论。冯·雷斯托夫有一次实验,涉及到让受试者观看一系列相似的物品。结果他发现,如果其中某个很特别的话,那么相比其他物品,受试者就更容易回忆起这件物品。

冯·雷斯托夫效应又叫做隔离效应(isolation effect),或者新奇效应(novelty effect),其预测是当存在多个相似的对象时,跟其他有所不同的那个最有可能被记住。

 

序列位置效应

图片

该理论由赫尔曼·艾宾浩斯(Herman Ebbinghaus,著名的艾宾浩斯遗忘曲线也是他的发现)提出。它描述了序列中项目的位置是如何影响回忆的准确性的。

这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应;系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。

用户往往最容易记住系列中的第一项和最后一项。

把最重要的信息放到开始和结尾。把最不重要的信息放在中间,这是吸引用户注意力的高效方法。

 

格式塔原理

图片

在格式塔原理之下,派生出了很多的其他原理。我们会在下面进行简要讨论:

 

负空间:

图片

在设计周围留白,从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说,格式塔理论是基于这样一种思想,即人脑会下意识地把各个部分组织成一个系统,从而创造出一个整体而不是一系列的离散元素,通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式,从而更好的理解我们生活的环境而构造出来的。

 

相似:

图片

在格式塔里面,相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。

 

连续性:

图片

不管实际画出来的线条如何,人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时,这种连续性会是很有价值的工具。

 

闭合:

图片

这条原理反映的是人会把设计或图像缺失的部分自行脑补,创建出一个整体来。或者说得简单点,在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。

 

相邻性:

图片

这条原理是指元素之间的距离如何。在UX设计当中,运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起,用户就会感觉它们是相关的。

 

图形与背景关系:

图片

跟闭合原理类似,这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时,用这条这真的很方便。

 

共同命运律:

图片

这条原理是指,沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行,我们就会把它们组合在一起,并将它们看作是单个刺激物。

 

认知负荷

指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。

认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。

 

希克定律

以英国心理学家威廉·埃德蒙·希克(William Edmund Hick)命名,其理论指出当选项增加时,下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此,如果选择的数量增加,则做出决定的时间将对数增加。

决策所需的时间随着选项的数量和复杂性增加而增加。

图片

 

菲茨定律(Fitt’s Law)

图片

这条定律规定,任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。

获得目标所需的时间取决于到目标的距离以及目标的大小。

可以利用这条定律来影响互动按钮的转化率,尤其是用手指操作的移动设备上的设计,可以把希望互动的按钮设计得更大一点,把不希望用户点击的按钮设计得小一点,更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。

 

美即适用效应

图片

这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。

用户往往会把美观的设计看作是更实用的设计。

对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。

 

双重编码理论

这一理论是由心理学家佩维奥(Paivio)提出来的,他强调在信息的贮存、加工与提取中,语言与非语言的信息加工过程是同样重要的。佩维奥(1986)指出:“人的认知是独特的,它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。

我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”,我们的大脑就会自动想到球的形象,运动员的形象。通过将文字跟图像配对,可以更容易记住东西。

 

直觉检查

我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具,用它就可以确定你的设计是不是一看就明白。

所谓5秒测试,就是让受试者观看网站或应用5秒钟,然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样,那就说明设计没有达到原先的目的,需要继续改进。

 

说服心理学

图片

这条原理来自罗伯特·西奥迪尼(Robert Cialdini)的著名著作《影响力:说服心理学》(Influence: The Psychology of Persuasion),里面列举了类似互惠、一致性、社会认同,权威以及稀缺性等原理。

这些原理往往决定了我们在社会当中的行为方式,我们可以用它们来识别人类行为。

互惠:这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话,他们应该会觉得有责任给予一定程度的回报。提供免费的电子书,博客文章,播客或其他免费内容,然后换取用户提供的电子邮件地址,这就是现实生活当中互惠的好例子。

权威:权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以,我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从,因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及,好建立一定程度的尊重和可信性。

一致性:这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究,他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。

第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访,请求房主在他们前面的草坪放一块很小的标志牌,“做一位安全的驾驶员。”

结果第二组的成功率高出450%。这就是(承诺与)一致的一个例子,因为房主会觉得自己有义务在这种情况下保持一致性。

社会认同:大家未必总能知道自己为什么会这么做。大家是不是都在跳舞?如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗?是的话会更多人会点击它。是不是每个人都在买你的产品吗?是的话,你想拦都拦不住。在电子商务的实践当中,我们使用的网站会社会认同(比方说点评、评论和推荐)来吸引其他用户,并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示,希望强化你跟商品的关联性,让用户认为“如果别人需要它的话,那我也需要它”。

稀缺性:在塑造行为的原理方面,这是我的最爱之一。稀缺性原理是说,如果东西有限的话,大家就会更想得到它。能得到的人越少,吸引的人就越多。

为什么有的商店会推出限量版服装?这就是原因,这样可以吸引更多的顾客。

变化盲视(Change Blindness):指观察者不能探测物体或情景所发生变化的现象。

 

记忆限制

图片

记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。

我们的工作记忆能力大概就只有10到15秒,一次只能记住3到4个东西。

研究表明,大家往往会制造出错误的记忆,要么会记住了没有发生过的事情,要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性,所以根据大脑的习惯或心智模式来进行设计就非常重要,因为这样会更容易记住。

尽可能为用户提供帮助和反馈,并提供撤销选项,以减少用户犯错时的沮丧情绪。让体验个性化,好迎合我们用户的喜好。

 

单纯呈现效应(Mere Exposure Effect)

图片

单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前,就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上,我们在不连续的时间段内见到某人的次数越多,我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。

了解单纯呈现效应及其机制,会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感,进而带来舒适感,从而让转化率优化整体上得到显著改进。

 

色彩心理学

图片

色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳,女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。

所以,作为设计师我们应选择能够传递含义与正确信息的色彩。

红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受,比如爱、自信、热情、愤怒等的象征。

橙色。充满活力的暖色,给人以兴奋的感觉。

黄色。幸福的色彩。象征着阳光、喜悦和温暖。

绿色。大自然的色彩。给人以来平静和新生的感觉。另外,也可能用来表示经验不足。

蓝色。一般用来表示企业形象。往往表现出冷静的感觉,但是作为一种冷色,也跟距离与悲伤有关。

紫色。由于很多国王都穿紫色的衣服,所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。

黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的,也可以是现代的。一切都取决于怎么用,以及跟哪些颜色一起用。

白色。意味着纯洁和纯真,以及完整性和清晰度。

 

本能反应

我们一般是从大脑负责本能的部分得到这种反应,本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中,所以很容易预测。

作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看,以及为什么他们是我们的目标受众,他们的需求是什么,这些都不难猜测。

用户体验设计的概念根植于认知和行为心理学,那是人类与机器交互的蓝图。当然,本文仍还没有涵盖到所有的设计心理学原理。但是,作为设计师,我们还需要观察和理解最终用户,并且加深对用户的理解与共鸣。在产品开发过程中,了解用户的互动、行为和情感可以增加更多的价值。

 

原文地址:追波范儿(公众号)

作者:terechen

转载请注明:学UI网》你想要的,用户体验设计中的心理学

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




掌握这20条用户体验设计原则,助力设计成长!

seo达人

1.以用户为中心 

这是最常被提及的用户体验设计基础,当涉及到产品设计决策时,提醒我们要学会使用同理心,而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的,用户的意见、痛点、愿望、偏好和需求对产品来说至关重要,所以在项目初始阶段需要投入大量的时间和精力去了解用户。

图片

用户体验研究重点是了解用户,为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求,区分了设计任何人都可以使用的产品和为目标用户设计的产品。

一款特定的产品需要面对不同的目标群体,前期研究中需要了解目标人群需要什么并在产品中反映出来,这是针对性很强的设计研究。

 

2.了解信息架构

可能很多人对信息架构的定义很模糊,这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中,如果把所有内容都堆到一个列表或页面中,可能我们将无法使用这款产品,所以我们看到大多数的App和网站都包含很多的导航和页面结构,按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么,并帮助他们找到需要寻找的内容。

图片

信息架构在制作线框图或原型之前完成,因为它是产品的基础,有助于设计师考虑什么功能是最重要的,哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关,有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。

信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容,点击任何元素都没有反应,会给用户带来很糟糕的使用体验。

 

3.考虑使用场景

没有场景,任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。

图片

这条原则有助于设计师考虑还有哪些因素会影响用户和产品,很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。

例如在设计表单时,会尽可能的添加输入提示,最大程度地减少用户出错的机会。

 

4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受,因为用户不需要再次学习如何操作,他们会回忆起之前的操作习惯并将其作为指导,这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件,并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时,所以按钮的状态应该是一致的。

图片

从逻辑上讲,产品越大,这种一致性会变得越来越有挑战性,这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡,放弃的用户就会越多,在市场营销中,这通常被称为销售漏斗中的漏洞。

 

5.给予用户适当的控制权

这条原则意味着用户希望能控制产品,无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权,例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等。

图片

需要注意的是,当提供太多选项或用户太依赖于自己的选择时,用户可能会不知所措,造成所谓的选择悖论。所以在设计时要了解用户乐于掌控的余地,不能让用户感到使用压力。

 

6.把可用性放在首位

在整体上看,建立高标准的可用性是为用户做的最好的事情,有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。

图片

可用性的重要之处在于要理解可用性的灵活性和重要性。

 

7.了解用户测试

结合可用性的概念,我们还要进行用户测试,这是设计师对工作进行测试的方式,对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时,设计师要观察真实的用户是如何与之交互的,可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。

图片

测试通常分几轮进行,团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现,设计也随之发生了变化。

如果发生更改,将会进行新一轮的测试,通过这个过程,设计团队可以改进他们的工作,直到达到可用性标准。

 

8.少即是多

在创造力和创造独特事物的渴望中,很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击,但也会给用户带来负面体验,在设计时要学会克制并优先考虑真正关键的部分。

另外手机端的屏幕空间非常小,创建一个有效的布局,想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。

 

9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动,并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连,帮助用户消化所接触到的信息。

图片

创建层次结构从概念的草图开始,一直持续到完成设计。例如发送按钮通常会用绿色而是不红色,而次要按钮会显示为灰色或与背景混合,并显示“撤消”或“返回”。

 

10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式,是帮助设计师从用户的角度看待问题的工具。

图片

做到准确就是直观的产品,用户不需要投入精力就可以使用它,而错误的思维模型会导致一些问题,例如界面混乱、高昂的交互成本。

为了匹配用户的心智模型,可以采用多种不同类型的研究方法,常见的方法包括卡片分类、决策树、对用户行为的密切观察,或者使用大量的数据来建立关键用户的心理模型。

 

11.设计中的讲故事

讲故事的方式更加直观,利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感,给用户留下持久的印象。

图片

想出一种可视化的方式来传达复杂的内容具有挑战性,但同时也是有益的,可以更好地接近用户并将其作为提高产品可学习性的方法。

 

12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标,但是直接使用原型软件不断添加各种页面细节是错误的操作。

图片

避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下,一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。

 

13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品,还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。

图片

事实上,残疾人和其他用户一样需要数字产品,但很多产品在设计时并没有考虑到这些群体,但这也提供了一个机会,为所有用户提供一个可以依赖的好产品。

 

14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线,同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如,大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮),这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

图片

使用用户已经熟悉的东西并不一定会让产品的独特性消失,有经验的设计师会利用这种熟悉性来来创造一些独特的设计,同时也是直观的,不需要太多努力就可以使用。

设计一个完全不依赖熟悉度的产品可能是具有风险的行为,因为它很容易让那些不熟悉产品的用户超负荷,形成巨大的学习曲线,增加用户负担。

 

15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容,包括用户画像、心智模型、用户旅程以及线框图和原型等,是一种有形和具体的表现。

可交付成果是用户体验设计原则,可以帮助设计团队和其他利益相关者理解和交流概念。

图片

▲ 用户画像可以捕捉理想用户,并提供可以相关联的真实面孔,是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤,有助于确保这些步骤确实可以轻松执行,并且整个过程很流畅。

这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。

 

16.专业的原型设计工具

用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。

图片

从逻辑上讲,设计团队的具体需求会因团队而异,但一些关键功能例如团队协作、需求管理、交互设计和开发移交等,对于大多数团队来说是必要的。

 

17.精心管理产品需求

一切都从收集需求开始,然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易,但随着项目的进展,要保持列表的条理性确实是一个挑战。

图片

除了创建需求和检查需求之外,还有一个问题就是调整需求,需要从设计、技术和业务各个方面来处理各种需求,还要确保这些需求之间没有相互矛盾。

 

18.了解移动和网页产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸,这意味着所有的视觉层次结构和信息架构都将从Web到App发生变化。

图片

移动端产品会有更多影响设计决策的因素,例如设备的操作系统、使用产品的环境等。了解移动端产品在导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。

 

19.利用UX设计模式

几乎所有的产品都专注于设计模式,它们可靠、易于查找并通过减少设计时间来为项目增加实用性。

图片

▲ 当用户在谷歌搜索中输入的内容有问题时,谷歌会提供一个相关的搜索提示,辅助用户进行精确地搜索,解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。

 

20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性,如果线框和原型分散在多个渠道中,这种内容的集合就会变得很难达成。

图片

通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题,防止产品细节没有表现出来或者被忽略。

 

最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里,不过我们可以确定,无论它带给我们什么,肯定都会很有趣

 

内容参考:justinmind.com/ux-design/principles

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》掌握这20条用户体验设计原则,助力设计成长!

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



交互设计:如何做到善意?

鹤鹤


这一篇,我们来探讨下交互设计的善意。


善良常常被用来形容人,偶尔被用来形容产品,很少被用来形容交互设计。


就像人们会说,iPhone 有人文关怀,而很少会说,iPhone 的交互设计有人文关怀。在笔者看来,原因之一,是交互设计很难将人文关怀囊括完,而产品本身则基本可以。


类似的道理,本文探讨的善意,始于交互设计,但不局限于交互设计,还包括产品和企业的善意。


一家之言,欢迎交流探讨。



01 为什么选择善意?


一个 3 岁小孩流落街头,无家可归,会让无数人起恻隐之心。我们普通人的微小善意,有时可能是一种本能反应,或者说是一种感性反应。


“他内心是有时邪恶,还是对人们始终良善”,这是李宇春《年轻气盛》里的一句歌词。


恶是否为本能,笔者不知道。科学家的解释是,有些基因中会带有恶。可以肯定的是,善恶皆为人性,共存于人类当中。


感性和理性是会此消彼长的,林黛玉和薛宝钗就是两个极致的例子。同理,人类体内的善恶,也会此消彼长。


一款产品,在做决策时,很大程度上是基于理性。


这种理性决策,很多时候是无意为善,也无意为恶。但遗憾的是,那个非善非恶的中间地带不会一直存在,有些无意为善和无意为恶,最终会成为非善即恶,比如开屏页是否放广告这件小事(下文有详述)。


既然善恶会此消彼长,而且产品的有些理性决策会导致非善即恶,那么不可避免的,有时候,善恶会变成一道二选一的选择题。


接下来,我们就从理性的角度探讨下,为什么选择善意。



1 长期主义


最近几年,互联网从业者有个共识:创业是件九死一生的事儿。因为据数据统计,90% 的创业公司活不过三年。


这是一个值得深思的社会现象,背后的原因究竟是什么?直接原因,往往是资金断裂。深层原因,会有很多,比如产品不够好、方向不够准,等等。


那么,核心原因呢?笔者认为,和创始人的执念有关。


有两类执念可以避免此类悲剧。第一类是做出优秀产品;第二类是长期主义。



做出优秀产品这块,有很多例子,最典型之一是特斯拉。特斯拉曾面临多次危机(资金、产能等),但都挺过来了,这肯定和产品深受车主喜爱有关。


笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心,都很重视 UI、交互、用户体验这些基础的东西,而且把 UI 做的比较优秀,交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展,另一家连产品带团队被大厂收购了。


长期主义这块,典型例子之一是巴菲特。巴菲特信仰并践行价值投资,价值投资依赖长期主义。最近几年,长期主义在国内也被越来越多的提及。


个人的理解,长期主义至少包含两个要点,分别是:积累、多赢。因为,没有积累就不会有成就,没有多赢成就就不会长久。



中国女排,世界冠军。排球界有个说法,叫三年成型,五年成才,八年成器。互联网行业,也大致如此。这是积累。


用户,员工,投资人,三方利益都兼顾好,才是多赢。


俗话说,顾客是上帝,大家都知道对用户好;投资人作为强势一方,利益也往往有保障;员工的利益是否有保障,往往取决于创始人,所以存在很大变数。


回到主题,长期主义和善意,有什么关系?


通常而言,多赢能否实现,关键在于员工的利益能否得到保障。


笔者在网上看过一个有意思的评论,说当下的年轻人,如果收入、成就感、高兴这三点有两点达不到,就会辞职。


所以,员工利益得到保障的标准,可以简单定义为“三中二“,即收入、成就感和愉悦这三点满足两点。



再来分析一下现状:相比员工,公司是强势一方;人们仍受最大程度剥削剩余价值、官僚思想等观念影响;恶性加班等风气存在;僧多粥少的就业行情。


在这样的大环境下,如果公司对员工没有爱和善意,员工的利益是很难得到保障的。


最后,总结一下:公司有善意,员工利益就有保障,就能实现多赢,从而有望实现长期主义。


2 美好生活


前段时间,因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售,一些网友被胖东来这个商超刷屏了。


胖东来来自河南许昌,一个三四线城市,也是笔者的家乡。目前仅在许昌和新乡有店。


在一些关于胖东来文章的评论区,很多网友在喊胖东来去自己的城市开店。


为什么有这么多呼声?简单分享几个例子。


顾客方面,胖东来有 6 类购物车,包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子,可供休息,同时还配有放大镜。


员工方面,有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有:每周二闭店,春节闭店 5 天,工龄满 1 年即有 30 天带薪年假,一天最多工作 7 个小时。


从网上的报道、评论以及公布于网上的企业文化来看,胖东来一方面主张工作和生活(爱情、家庭、休假等)的平衡,一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。



看新闻的时候,笔者注意到,老板于东来经常会提到“美好”这个词儿。实际上,在笔者看来,胖东来本身就代表了一种美好生活,一种物质和精神双丰盛的美好生活。


对于这样的美好生活,用户和员工自然喜欢。可这对企业有什么好处?


胖东来曾经意欲退出新乡市场,新乡合作商家和市民纷纷请愿,政府也多次出面挽留,最终胖东来留下来了。可见,胖东来在新乡已经深入人心,顾客自然会大力支持它的发展。


胖东来有一句 slogon,能够很好的解释这一切,那就是:爱在胖东来。


同样,既提供体面的收入,又关注员工和用户的精神需求,给他们带去美好生活,当然需要更大更多的善意。


在当下中国,能提供高薪的互联网公司已经很多了,但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。


对于所有企业而言,这又何尝不是一种机会?



02 交互设计里,有哪些善意?


现实中,像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲,还是有很多产品对用户展现了很多微小善意,值得我们学习。


这种微小善意主要有三类,分别是:不打扰,护尊严,人为先



1 不打扰


我们生活在一个信息爆炸的时代,不被手机上的信息过度打扰,是一个刚需。有三类信息,如果把握不好度,就会对用户形成打扰。它们分别是:广告、推送、推荐



广告这块,主要有两类会形成打扰,分别是:时机不佳的广告,过长的广告。


这方面,微信是个榜样,值得学习。比如开屏页广告,就是时机不佳的广告,因为大家不想在这里看到广告,微信就没有放。朋友圈里也有较长的视频广告,微信的常见做法有两类,要么先展示一张图片,要么先是无声播放。是否看完整的视频广告,选择权在用户手里。


推送这块,常见的有手机系统的通知和 App 内的红点消息。


系统通知,目前也有被滥用的趋势。根据使用情况和感受,个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能,比如微信推送新消息,搜狐新闻推送新闻;第 2 类可保留一定的弹性,核心原则是对用户有价值,比如偶尔的活动通知。


目前有两种情况会对用户形成打扰和困扰,第一种是过于频繁的活动通知;第二种是推送和核心功能相差甚远的信息,比如金融类产品推送新闻。


红点消息,有一类会对用户形成打扰,那就是来自官方的过于频繁的各类活动、促销等信息。


推荐这块,主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。


一种是过多,比如网易云音乐的首页,就有 9 个专题;一种是位置不佳,比如 Keep 的“探索”频道就包含了课程的推荐,但是在“运动”频道还有两个专题来推荐课程。


2 护尊严


护尊严,就是尽最大可能,维护用户的形象和尊严。


最近几年,常有产品花巨资撒红包给用户抢。产品的初衷自然是好的,而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度,也就无法增加用户对它的喜爱和忠诚程度。


为什么会这样?


让用户抢自己撒的红包,这件事能维护用户的形象和尊严吗?非但不能,可能还会对此造成伤害。因为可能会显得用户爱占小便宜,也可能会使用户处于被施舍的一方。总之这种事对用户来说,并不酷。


一款产品,要想赢得用户更多的喜欢、尊敬乃至忠诚,就最好不做哪怕仅是微弱伤害用户形象和尊严的事情,同时多做一些相反的事情。


3 人为先


人为先,是当用户利益和企业利益发生尖锐矛盾时,去追求一种用户利益在先的双赢局面。


大家都知道,吸烟是有害健康的,但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装,就尽他们最大的可能诠释了“吸烟有害健康”,是真正的用户为本,让人心生敬意。



泰国香烟的这种做法,值得一些极易让人上瘾的游戏厂商借鉴和学习。



03 交互设计:如何做到善意?


上一大段,是善意的三类表现。这一大段,再探讨下做到善意的一个原则。


以社区型内容型产品为例,这个原则就是:先服务后管理


这里的服务,是指以服务者的心态做好用户体验,并不局限于交互设计。这里的管理,指的是一些必要的管理,一般是用户的行为规范和用户违规时的处理,比如评论里骂脏话、发布侵权文章等。


所有用户都是需要被服务的,只有少数行为不当的用户才是需要被管理的,所以我们要先服务后管理,以免误伤了不需要被管理的用户。


服务本身就是一种善意,笔者把它分成了两个阶段,分别是:体验的初始阶段,体验的完整过程


初始阶段对应的是:初始服务;完整过程对应两类服务,分别是:家常服务,极致服务



1 初始服务


初始服务,是当用户刚开始用这款产品时,能给他们留下良好印象的服务。


如何做到?不出现任何轻微恶意和管理倾向即可,再提供一些便利和帮助则更好。


下面分享一个反面例子。


在个别城镇的卫生死角,有时会看到这样的标语,“此处禁止倒垃圾!违者罚款 200!“。结果那个地方往往有很多垃圾。


为什么会这样?


这个标语,有两层意思:第一,你很可能会在这里倒垃圾;第二,禁止你这么做,做了要罚钱。


也就是说,某种程度上,这个标语在用恶意揣度别人,同时也在很严的管理别人。


看到这个标语的人很可能会这样想:既然认为我会在这倒垃圾,那我索性就倒了;禁止我?凭什么?还罚我钱,吓唬谁呢,况且你有证据吗?


下面再分享一个很好的正面例子。


笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家,宜家没有检查里面的零配件(很多螺丝之类的),直接退了。这样宽松的退货条件,宜家可能会蒙受一定损失,比如小概率的零件丢失,但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的,对宜家就多了几分好感。


2 家常服务


家常服务,是指一种稀松平常,但又让用户感到舒服自在的服务。


举个例子,你去好朋友家里玩,朋友给你倒了一杯水,并端出一盘削好切好的苹果,你们一边吃一边聊。你和朋友是平等的关系,他这种简单的招待并不会使你感动,但却使你有一种接近在自己家的那种舒服自在。


笔者在用微信公众号(后台)时会有这种感受。在星巴克和肯德基时也会有类似感受。


家常服务,如何实现?第一,要有良好的初始服务,这是基础;第二,要有周到且较高品质的交互设计,这是关键。


以微信公众号为例,和微信一样,它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。


面向大众的资讯平台大多都有一个发文规范,多是关于禁止的行为,通常都会用一个单独网页来展示,有 1-2 页纸那么多。


通常情况下,多数作者是不会违反发文规范的。对于这部分作者,当他们首次看到 1-2 页密密麻麻的发文规范时,可能会产生抵触心理,即便自己不会违规。就好像高中开学第一天,班主任二话没说,直接就立了 20 条班规,同学们会是什么心情。


微信公众号的做法就很巧妙,它把这些规范分割成了三部分。


第一部分是严禁的红线行为,以高度概括的一行文字呈现,所有人都能看到,但是得仔细留意才能注意到。这是规范性质。



第二部分和竞品一样,也是链接出来的一个单独网页。链接入口也和竞品一样,在关联性最强的发文页面右上角。不同的是,这一页展示的是规则,主要以问答的形式呈现,给人感觉是有帮助的信息。这是服务性质。



而竞品的这个页面,通常都是禁三禁四的规范,给人的感觉可能是紧张、压抑甚至抵触。


第三部分是次于红线的禁止行为,比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样,还有很多一般的通知,所以这个公告列表也不会像竞品的那一页规范一样,给人紧张、压抑的感觉。性质上是中性。


另外,这部分的入口在后台首页右上角,和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容,也就看不到。




微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”,同时还让他们看到了“班主任”的“常见问题回答”。


这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节,就是检测疑似错别字的功能,很贴心,虽然目前还不是很准。


3 极致服务


极致服务,是指让用户感动的服务,比如海底捞和胖东来的服务。


这种服务,一般是由许多细节积累而来,是一种做加法的服务,而且背后往往依赖人力。


好的交互设计,一般都是在做减法,而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。


不过,一款互联网产品,除了交互设计,还有其它方面的内容。


B 站就是一个例子,它以不走寻常路的方式,在两个方面做到了较为极致的服务。那就是:视频无广告,比较积极、欢乐的弹幕氛围。



结语


以用户利益为先,不打扰用户,维护用户的尊严,这是交互设计里的三种善意,值得我们学习。


先服务后管理。服务作为一种善意,也能够引来用户的善意,最终形成良性循环。


杜绝任何轻微恶意和管理倾向,再提供一些便利和帮助,便能做到良好的初始服务;


在初始服务的基础上,提供周到、高品质的交互设计,就能做到良好的家常服务;


交互设计难以做到极致服务,但是其它方面有机会。


最后,用刘备的一句话来结束本文。


勿以善小而不为。

文章来源:站酷   作者:SnowDesign

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


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

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



日历

链接

个人资料

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

存档