设计闲谈——浅析设计中的理性与感性

在开始分享前,先讲个小插曲。///

当产品需求下来时,我有时候会常常反问产品一句话,为什么要这么做,为什么要改?也许我这个做法看起来像是在抬杠或是找茬?  其实并不是,我只是想听听产品这样做依据,结合我自己对这儿的理解,我们互相讨论,最终得出一个能说服双方的方案。这也是对产品的一种负责的表现吧。///

那么你的设计有依据吗?

引言:

设计中感性与理性

设计是感性的,有很多主观情绪在里面,设计又是理性的,美的东西不会无缘无故的美,而丑的东西也不会没有理由的丑。

哲学中的感性是指有感觉的,可以看到,摸到,闻到的,而理性是指精神上对感性的进一步的认识。

感性认识是理性认识的基础,当认知从感性层面到理性层面时,设计做得有理可寻时,是一次质的飞跃。

通俗的去解释,在做设计时,对于自己的作品某一个版块感觉非常舒服,而不知为何,只停留在感官上的舒适,这就是感性。如果对于自己的作品可以有理有据的去说明,某个元素导致了视觉上的平衡舒适,那么这就是理性。

这次分享会的目的就是想让大家对用户体验的设计从感性层面到理性层面的一个转变,让自己的设计真正的有依据所在,而不是没有理由的纯凭感觉去设计,美丑不是评判设计的唯一标准。///

一个设计者的成熟与青涩或许就在于感性到理性的转变,下面我们来看两个设计作品。

这两个作品看上去大相径庭,没什么区别,但一个设计者成熟和青涩也许就从中体现

成熟的设计者喜欢用大面积的留白来衬托主体物,让主体物更直观,从而页面更具有层次。而青涩的设计者则喜欢用大面积留白来满足感性上的逼格,除此再无其他。///

当然,理性的设计者并不是被规则捆绑的设计师,比如他们知道大红色代表喜庆,所以在一些传统节目的闪屏页面时,他们会选择大红色而不是深灰色,而闪屏中具体有什么元素,各个元素要表达什么意义,就要感性的去思考。///


------   下面呢我会从以下几个案例来阐述为什么设计师为什么需要更理性的去做设计,或者说是真正做到感性与理性的结合,并且充满依据。


在讲案例前

首先我们还是讲一下 什么是体验设计(理论)

体验设计是将消费者(我们口中的用户)参与融入设计中,在设计中把服务作为“舞台”,产品作为“道具”,环境作为“布景”,力图使用户在商业活动过程中感受到美好的体验过程

体验设计的目的是在设计的产品或服务中融入更多人性化的东西,让用户能更方便的使用,更加的符合用户的操作习惯。(来自百度)

那么换成今天的主题来讲就是:做合理的设计,合理的做设计。也是在引言中提到的让设计有理可寻。


体验设计分成三个板块(表现层、交互层、心理层)

在用户体验设计中,这三个层级是随时要考虑的,三者是相辅相成的,就好比,设计者做到美化界面是最基础的要求,而美观的界面本来就会让用户心理产生可靠与信赖,只是设计师需要不断的调和美观与易用之间的关系比例,关于美感是很主观感性的,所以下面的例子主要是围绕着交互层和心理层去讲解。///


案例一

同样的内容,选择不同的UI组件,会使得产品完全不同

我们先来看着两张图:

不管是产品经理还是UI这是两个很常见tag做法,这两个UI模块摆在大家面前,我们能清晰的感受到,左边是一个segment控制下面内容的UI,而右边是一个所有内容列表的集合页,只不过通过tab聚类了而已。

当我们看看到这两种UI组件时我们能想到的是如果需要采用右边的排版形式就必须要控制tag的字数,然后右边的tag占据了推荐贴的位置,导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的,右图的优势在于,由于竖向排列的tag可以让一个屏幕展示更多的选项,可以让用户更方便的定位内容,///

比如外卖产品选择用右边的这种形式是因为力求一屏展示更多的菜,而且外卖产品的左侧tag一般是一家店铺的菜的品类,用户下滑菜品配合点击品类,点完即走。(类似京东淘宝电商类平台也类似),更方便用户垂直快速的找到自己想要的。///

但比如头条,虎扑,新浪这种新闻类或者无限信息流的客户端大多采用左边这种形式,因为这类客户端是需要用户长时间沉浸的,比如用户选中一个“推荐”的tag之后一般要沉浸的看很久,当用户沉浸在这个tag的内容中时,我们就应该突出内容,那么这个时候显然用右边这种设计方式让tag常驻屏幕右侧是不合适的。

所以我们的中央天气预报和楼下万年历的无限信息流的设计也是采用左边的形式。///


案例二

根据产品内容不断优化UI组件


这里用快手和全面K歌来做对比

大家会发现,其实这个页面,快手和K歌承载的内容都是消费转化,都希望用户点击进去消费内容,但是两款产品做了截然不同的UI风格,原因是什么?

快手在这个页面,其实承载的关键任务是:“迅速让用户找到感兴趣的点”,它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身,比如第一张图是一群小姐姐在唱歌,右边是一个工人,然后第二排左边是手机操作功能演示,右边是一个手机推荐,大家可以很方便的通过图片识别里面的内容,用户更沉浸更聚焦的去选自己喜欢的点击进入消费就可以了。但是K歌的视频截图其实是不能识别里面内容的,大家可以看到,第一张图是一个妹子,第二场图是一个妹子,第三张图还是一个妹子,那用户点击进去的动力在哪儿了?除了这个照片长相之外,更多的其实是文字决定的,是这个人唱的这首歌的歌曲名是不是我喜欢的,或者是这个演唱者的的歌手等级。

所以基于这种跟深层次的逻辑,k歌和快手两款产品的这个页面都是为了促进消费转化,但是UI长相上完全不同。///

同理,我们的卡点视频即将上线,和K歌一样,满屏的妹子并不能让用户及时的找到自己想要的目标内容,所以在优化首页UI时,我们将文字从视频分离出来,加重文字权重,让用户在使用工具型app时更能及时的找到他想要的消费内容。

这里也是一波广告,欢迎大家扫码下载。

上面两个案例都是围绕着交互层来讲的,下面这个案例将围绕着用户心理层去做剖析///

案例三

警示框、toast与对象内嵌给用户心理暗示和区别

首先我们来看看同一个产品微信在ios端与And端的“反馈提示”区别

首先,在微信客户端中,用户选择,发送图片是一个高频次操作,并且也是朋友圈,对话的主要功能之一

微信IOS版,当用户选择了9张时,再次选择第10张,用警示框做强阻断提示,用户需要点击警示框中的按钮操作。这个过程加强了用户的记忆和操作成本,有了之前的强提示,用户下次选择超过9张有印象,避免用户再次犯错,从而提高用户的使用效率。

微信Android版,当用户选择了9张时,再次选择第10张,给出较轻量级的Toast,这个过程是在降低用户犯错的成本,方便用户继续操作。相较于IOS版本,没有给用户强提示,用户犯错成本低,不能加深用户记忆,无强烈感知,不能避免下次犯错

从整个平台特性,生态圈来讲,IOS用户相较于Android用户来说,质量更高。所以对IOS用户进行足够强烈的用户教育,可以降低用户犯错次数与概率,提高用户使用效率。而Android用户相较IOS用户,用户质量参差不齐,如果采用相同的强提示,可能会适得其反,引发用户的抗拒与不理解。

所以说,高频次,主要功能的交互操作行为,在用户操作错误的情况下,给予用户的反馈可以是阻断式,强烈提示,目的是加深用户记忆,避免用户再次犯错,从而提高用户使用效率,加强用户产品粘性

这种方法要区分用户属性,并不适应于全部用户(主体用户群体年龄,文化水平等),对一部分用户来说这强烈警示的系统反馈会提高用户的犯错成本,学习使用成本///


下面我用登录账号密码不匹配为例,来浅析背后的用户心理逻辑

用户使用App进行登录时,当账号密码不匹配,会出现错误提示。目前市面上的提示有三种。分别为警示框、toast和对象内嵌

首先说下使用场景,登录账号属于超低频的操作。现在app都将退出账号的路径做的比较深,以此减少用户退出账号。这样的好处是可以让用户更方便的体验产品,增加产品的使用时长和使用深度

· 警示框

警示框为阻断式操作,属于强提示。告知用户账号密码不匹配,用户需要点击警示框上的按钮才能重新输入账号或密码


微信、QQ、Instagram在登录账号密码不匹配时,使用的都是警示框。需要用户点击警示框按钮才可以再次输入,强制性操作

微信、QQ、Instagram没有第三方登录,且都为社交软件,在同一个设备多个账户频繁切换登录的用户较少,大部分用户只有或常用一个账号,所以账号密码安全非常重要,QQ和微信也做了大量的安全措施去帮助用户进行账号密码管理,所以在账号密码不匹配时用警示框强烈提示用户是很有必要的

· Toast

Toast为短暂的提示性组件,当用户点击登录时,提交给系统,系统发现账号密码不匹配,通过Toast提示告知用户,一般停留1-2s,之后消失。属于轻量级提示

京东、UC浏览器、虾米均存在多个登录选项或第三方登录,用户账号切换,多个账号的可能性相较更多,使用Toast在提示用户错误反馈的同时也方便用户去其他操作

· 对象内嵌

当用户点击登录时,提交给系统,发现账号密码不匹配,系统通过在界面中内嵌文字提示告知用户,此提示一般提示为带警惕性颜色(红色)的醒目文字。属于更轻量级提示。

Chrome浏览器、百度网盘在登录账号密码不匹配时,使用的都是对象内嵌的方式。通过界面中的文字反馈让用户知道登录失败的原因。用户可以继续在输入框里填写。

对象内嵌强烈程度更低,对用户的干扰更弱同时拓展性更好,可以在界面内添加大量的信息。

对象内嵌适用于信息小布局简单的界面。例如Chrome浏览器、百度网盘的登录界面为信息小布局,较为简单。信息量大的布局复杂的界面不适合使用对象内嵌,如果使用对象内嵌的话,提示更弱化,不利于用户发现反而使原本界面变得更复杂了。///


以上三个提示类型强烈程度分别为:警示框 > toast > 对象内嵌

如果整个产品考虑更深的是产品逻辑与防错,可以选择强制性的警示框。

有的设计者/产品经理觉得警示框太强制了。为什么还要用户去点击一下,才能再输入呢。就喜欢采取toast而导致整个产品很多都是toast,过多的toast,用户习惯之后很容易忽略掉toast的提示语,未起到真正的防错和提示,有时候适度显得更重要。

而对象内嵌,则更为轻量。而且扩展性强,可以承载更多的信息。对于需要考虑拓展性和免打扰用户来说是不错的设计选择。///


最后总结一下

这次分享主要是通过几个案例来剖析了用户体验设计中的一些基础规律。

设计师都会经历一个感性到理性的转变,在理性的基础上发挥自己感性的创意,让设计有据可循,文章中没有过多的专业术语,把复杂的东西写简单,就像做设计把简单的东西做到有道理。

其实设计中或许没有标准正确的方案,而是你是否有了自我的设计观,然后根据你的设计观去定义设计。///


最后的最后给个彩蛋吧,分享一首缓解氛围的歌。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容