首页

用户体验 | 与用户交流,我们是认真的

seo达人

00.【前言】

图片

现在我们在目标导向流程的第一个部分:研究

我是从0开始、系统讲解用户体验设计方法的CC~

上周说完了决定是否购买的客户之后,我们就需要聊一聊,购买了以后真实使用产品的用户——也就是我们常说的【关注点为用户的访谈】

 

01.【用户是谁?】

这个人是亲自使用我们产品的人,也就是【现有用户】。

是更能对我们的产品提出有建设性的优化意见的人。

 

问题

那么问题来了:

如果说我们的产品还没有进行发布,或者说我们还没有明确的使用我们产品的用户,这个时候应该怎么办呢?”

仔细思考一下,在推广一个物品的时候,我们一定会有一个目标的用户也就是说这个产品的潜在用户。

他们现在虽然没有使用这款产品,但是后期他很有可能去使用这款产品。

就比如说线下进行美术教育活动的学生是否也有可能在后期的过程当中接受线上的教育呢?

这肯定是非常有可能的!

就像我们现在的疫情发展,会让很多学生出于安全考虑,去更多的接受线上教育,避免人流繁杂的线下课堂。

在此之前,我们就该认识到,这些孩子就是我线上教育的潜在用户。

 

总结

【现有用户】以及【潜在用户】,这两种用户都是我们可以对产品进行优化访谈的重点人群。

 

02.【用户要什么?】

如果我们卖一款洗发水,那我们就需要去访谈使用这些洗发水的用户的真实感受。

【香味是否好闻?】【去屑能力如何?】【使用感受如何?】等等……

在前期我们首先需要了解的就是我们这款产品对用户生活产生的影响。

访谈用户会在什么时候,什么原因来使用一款产品、用户的期望是什么?

 

需求

如果用户所说的需求是:“在夏天的时候我希望能有一款产品能让我在很热的时候放松和清洁自己,并且达到清爽怡神的目的。”

那我们就需要去考虑针对用户的生活需求来划重点。

 

Q:用户想在什么时候使用?

A:夏天。

Q:什么原因使用?

A:觉得很热想要清洁放松。

Q:用户具体的关键要求是什么?

A:清爽怡神。

 

我们就可以针对用户的这几点需求,围绕着这几点需求去考虑,一款什么样的产品能够带给用户这样的体验呢?

 

解决方案

我们可以采取添加薄荷元素或者是清新的香氛元素来达到放松清爽的感觉等等等。

后续的开发过程就是我们需要提炼用户的关键需求,让它成为一款对用户有用的产品。

这就是一款有针对性的产品。

 

03.【产品的用户针对性】

当然洗发水这个例子是我们生活中非常基本的生活领域的产品。

还有很多在用户领域知识之外的产品,也就是用户完成这个工作必须有需要知道的信息。

要从用户当前的这个领域知识出发。

如果说我们针对的用户是小白级用户,我们就需要将产品尽量做的浅显易懂。

如果说我们的产品是一款专业性很高的领域性产品,我们就需要提供给专业大牛尽可能完善、准确性高、易用性强的产品。

了解用户的任务和活动是我们开发一款产品前提。

 

小思考   

这时候提一个小思考了:【如果用户告诉你的任务和活动并不是他真实的想法,或者压根不愿意告诉你,我们应该怎么做?】

 

下章我们就聊这个吧~

我是cc~下期继续带你系统学习用户体验的基本方法。

 

原文地址:达芬奇的火柴(公众号)

作者:CC本人

转载请注明:学UI网》用户体验 | 与用户交流,我们是认真的

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

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


文章来源:csdn

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

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



你绝对想不到,这波宝藏插画师的博客究竟有多好!

seo达人


#01Willian Santiago  

图片
Willian Santiago是一位巴西插画家,以其作品中典型的俏皮活泼的色彩而闻名。他使用大胆的色彩和热带图案来绘制插图。童话主题、令人惊叹的植物和神奇的动物群是我们深刻感受到异国风情。
图片
图片
图片
图片
图片
图片
博客地址:
behance:https://www.behance.net/williansantiago/
instagram:https://www.instagram.com/willian_santiago/

 

#02Fran Labuschagne

图片
Fran Labuschagne的插图整体调性是可爱、清晰、简约,配上柔和的色彩,让人感受温暖。她所有插图通过几何形状来完成,也没有复杂的质感。
图片
图片
图片
图片
图片
图片
博客地址:
https://franlabuschagne.com/fresh-living

 

#03Abbey_lossing

图片
Abbey Lossing 的插画以色彩鲜明的城市居民角色为特色。她通常以鲜艳的色彩进行绘画创造,偶尔也会有黑白插画设计。她利用各平台不仅分享她的插图和提供艺术灵感,还解决社会和政治问题。 
图片
图片
图片
图片
图片
图片
图片
博客地址:
https://www.instagram.com/abbey_lossing/

 

#04Danielbarretoes

图片
Daniel Barreto是墨西哥的图形艺术家、插画家和动画师。他将充满活力的色彩与超现实主义元素相结合,创造出想象中的风景和与自然互动的流动的、不露面的人物形象,徘徊在抽象与具象的边际之间,让读者有更多的联想。
图片
图片
图片

图片
图片
博客地址:
https://www.instagram.com/danielbarretoes/

 

#05。Levysfriends

图片
来自德国的动物插画师 Levysfriends,她大部分作品都说以宠物为主题创作。通过简约的色彩和轮廓,勾勒出宠物与生俱来萌宠形态。如果你很喜欢养小宠物,也是一个插画师,可千万别错过她哦。
图片
图片
图片
图片
图片
图片
图片
图片
博客地址:
https://www.instagram.com/levysfriends/

 

#06。Laborregaviuda

图片
laborregaviuda,一位年轻的插画家,他巧妙地描绘了墨西哥的美丽和文化。她以温暖、朴实的色调描绘出优雅的女性角色,强调轮廓。Mafer 向我们介绍了日常生活中的墨西哥女性,并向我们展示了她们如何在孤独和忧郁中找到美。
图片
图片
图片
图片
图片
图片
图片
图片
博客地址:
https://www.instagram.com/laborregaviuda/
个人介绍
https://ballpitmag.com/portfolio/laborregaviuda/

 

#07。kazuhisauragami

图片
Kazuhisa Uragami 是来自日本东京的插画家。他的作品从风格手法上就可看出极具日本文化特色,色彩像素化表现,让人印象深刻。
图片
图片
图片
图片
图片
图片
博客地址:
https://www.instagram.com/kazuhisauragami/
最后想说的是:插画能带给我们不一样的情感体验,是我们的内心世界和我们周围的现实之间的纽带。通过插画我们唤起情感连接,表达想法。喜欢插画的小伙伴们,赶紧画起来。
好了,今天文章就到这,下期见~

 

原文地址:功夫UX(公众号)
作者: 功夫UX

转载请注明:学UI网》你绝对想不到,这波宝藏插画师的博客究竟有多好!

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

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


文章来源:csdn

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

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


声临其境 | QQ音视频娱乐社交设计

seo达人



 

01 音视频娱乐新形态

挖掘更好玩的娱乐社交场景,能带给用户更愉悦的体验。疫情期间,线下聚会因此受限,线上娱乐应运而生,在此契机之下,期望借助音视频实时互动、声影重现的特性,开启了新的娱乐形态——QQ一起派对。

观察竞品普遍存在不足之处,即缺乏真实聚会游戏的氛围与互动。因此,解决社交游戏产品缺少真实情境的问题,成为QQ一起派对的创新机会点,有利于在竞品中突围,塑造差异化优势。

 

02 打造真实聚会游戏体验

2.1 回归本质,突围创新

QQ一起派对是基于音视频展开的线上聚会游戏,结合了实时互动与娱乐化内容。为了让游戏过程更贴近真实聚会场景,我们从游戏氛围和自然交互两方面切入,寻找创新突破口。

游戏氛围

构建适用于游戏类型的界面框架,让线上聚会更贴近真实世界,并运用视觉感染力,营造环境氛围,包括场景具象化、增强代入感等方法,实时感知好友的情感变化,从而获得社交临场感,在心理上感到彼此的存在。

自然交互

有别于竞品需通过点击按钮作答,QQ一起派对利用实时语音识别,让用户通过更自然的人机交互方式,在游戏过程中进行语音抢答,彷佛置身于真实世界中与好友互动,成为QQ一起派对的独特卖点(Unique Selling Proposition)。

 

综上所述,QQ一起派对的设计要素包括:、

1. 社交临场感(Social Presence):场景具象化、高度同步实时响应、感知他人情感变化

2. 沉浸感(Immersion):营造氛围、增强代入感、突出内容与主角

3. 可玩性(Playability):游戏界面、游戏机制、游戏互动

4. 凝聚力(Cohesion):将好友聚在一起、吸引更多用户来玩

 

2.2 游戏界面设计

舞台场景化布局

QQ一起派对能让用户创建房间,邀请好友参加线上聚会,促使游戏氛围具象化。游戏类型聚焦于〝你演我猜〞、〝明星问答〞等猜题游戏,为了增强代入感,让用户融入情境之中,我们采用舞台表演的界面隐喻(Interface Metaphor),借由深色背景突出内容与表演者。界面框架选择一个大画面与多个小画面的组合,更贴近轮流上台表演的游戏类型。通过舞台场景化布局,模拟线下互动的真实感。

 

 

多层次感官体验

我们真实还原了线下抢答的互动体验,通过倒计时动效、实时分数标签,以及抢答成功反馈,增添游戏的紧张感与刺激感。

在游戏过程中,除了通过视频画面感知好友的情感变化,用户的语音状态也会实时反馈在头像上,响应抢答题目、好友交谈,以及各种表达情绪的声音,借着声音视觉化的效果,搭配视频与人声的重现,交织出多层次的感官体验。

 

 

邀请消息实况化

发送邀请是召集好友的重要途径,而作为〝邀请函〞的消息,需要传达明确的信息,让用户一眼就能感知房间内的状态,包括准备开始、游戏中、游戏结束等,避免用户点击加入游戏时,却因游戏已开始或结束而无法加入。为此,我们将邀请消息实况化,持续更新当前状态、参与成员等,让用户能实时感知派对房间的变化。

 

 

03 拯救孤独,陌生人玩法登场

3.1 让你随时找到伙伴

排解寂寞心理诉求

QQ一起派对初期聚焦于好友一起玩,但仍不免发生创建了房间,当下找不到好友,或因等待过久而退出房间的状况,使得创建房间到实际参与的转化率受到影响。从用户访谈结果来看,用户存在排解寂寞的心理诉求,但对象不一定得是熟人好友,因此渴望找到游戏伙伴、快速开始游戏,成为QQ一起派对扩展至陌生人玩法的契机。

引入陌生人匹配

针对找不到好友的问题,我们新增了匹配陌生人的能力,用户可从游戏大厅进行随机匹配,倘若创建房间后找不到好友,也能在房间内匹配玩家,降低游戏参与门槛。

此外,进一步优化房间内的界面布局,将游戏卡片缩小平铺排列,让用户一眼就能看到多款游戏,提升对游戏数量的感知与转化率。在游戏类型上,新增了猜歌与知识问答两款游戏,并提升现有题库质量,避免游戏趣味性不足,影响用户留存率。

 

3.2 游戏大厅情感化设计

搭建游戏世界观

为了增强游戏氛围,我们通过情感化设计带领用户进入情景中,让用户更好地理解每个玩法,并从游戏玩法与情感诉求提炼出场景元素,以此搭建游戏世界观,并将故事情节加以推演,增强趣味性与独特性,还能进一步提升记忆度。

 

利用光效聚焦视线

光效有利于吸引和聚焦视线,并以不同的表现形式来影响情绪。我们从光的色彩、动效、光感和造型等层面,创造出五种增强感官体验的光效设计,将其应用在游戏大厅入口,借由不同的光效类型与动画形态,强化用户的世界观感知。

 

会讲故事的界面

带有情感的故事会在记忆中发酵,引领用户进入场景。我们将游戏入口的功能属性,转化为富有故事性的场景设计,当用户被故事所吸引,多感官区域被激活,将会激发用户情绪,有利于记忆与理解游戏入口,对游戏产生共情,进而超出产品的功能价值,与用户建立情感链接。

 

例如匹配陌生人入口,使用QQ的IP形象驾驶UFO,准备召集用户前往神秘的太空之旅,意味着通过陌生人匹配,你将摆脱寂寞,以光速般的速度找到游戏伙伴、快速开始游戏。通过故事剧情激发情感共鸣,并适当结合IP渗透品牌价值,吸引用户参与游戏。

 

 

破格设计能够加强张力、突出游戏主题,我们运用破格效果的3D图标造型,彰显游戏的独特调性,树立鲜明的品牌印象。

 

组件化卡片设计

组件化除了提高设计效率,还能从整体一致性考量差异化。我们将游戏卡片、题库卡片、提示卡片和入口卡片等功能界面,构建一套组件系统,让框架布局贯通全流程,打造体验一致的可玩性,利于后续的扩充与延展。

 

3.3 生存战增添挑战性

激发持续参与动力

根据游戏可玩性研究,提供挑战与磨练技巧的机会,对持续参与游戏的动机有正面影响。有鉴于此,除了提供随机匹配、召集同好共乐,我们还设计了极限生存战玩法,希望借着1v1淘汰赛制增添乐趣与挑战性,激发用户持续参与的动力,特别是年轻人酷爱这种竞技感,击败的对手越多,获得的奖励就越高,有利于勾起用户的胜负欲。

 

 

匹配动效强化氛围

为了营造同场竞技的临场感,我们利用匹配动效强化氛围。随着已加入玩家的数字不断增加,底部会实时展示用户头像,具象化呈现玩家数量,烘托热闹气氛,消除等待时的焦虑感,让用户处于蓄势待发的状态,而红蓝对战布局则进一步强化PK宣战的氛围。过程中若有玩家遭到淘汰,用户也能通过底部头像感知剩馀玩家数量,以此增强游戏临场感与成就感。

 

增强荣誉感与仪式感

每轮击败对手时,答题区域将变为全屏的庆祝画面,搭配撒花特效、头像聚光灯,营造欢愉的胜利氛围。而在游戏结果页,我们同样利用色彩和动效的差异对比,塑造胜败双方的情绪氛围,以此增强荣誉感与仪式感。在生存战登顶挑战成功的用户,将会站上颁奖台授予最高荣誉,在舞台聚光灯的照耀下,迎接光荣胜利。排行榜有助于强化击败众多好手的感知,激发胜利者的分享欲。

 

04 结语

QQ一起派对推出后深受用户喜爱、获得广泛好评,调研结果显示,用户整体评价相当高,也乐于将QQ一起派对推荐给好友。

综而观之,音视频除了广泛应用在通讯场景,正逐渐赋能更多创新场景,而娱乐场景更成为兵家必争之地。QQ一起派对开启了新的娱乐形态,充分发挥音视频声影重现的独特优势,消弭了空间距离,尝试解决社交游戏产品缺少真实情境的问题,让游戏过程更具临场感,就像面对面进行游戏一般。未来将从玩法丰富性、游戏挑战性、题库可玩性三方面持续优化,打造更好玩的音视频体验。

 

立即打开QQ,邀请好友畅玩聚会游戏!

原文地址:ISUX

作者:腾讯ISUX

 

转载请注明:学UI网》声临其境 | QQ音视频娱乐社交设计

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

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


文章来源:csdn

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

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


交互式数据可视化设计思维

ui设计分享达人

      随着大数据时代的快速发展,日常生活中对数据信息的接触场景越来越多,我们在做数据展示设计前首先要梳理数据重点,数据结构关系得到的结论结合用户需求产品需求等进行合理的设计。

      最初的数据展示接近于数据报表的形式,而现今数据展示有两种:静态数据可视化、交互数据可视化。它们的设计基础均基于数据可视化的设计要点进行延展的,而数据可视化要点已有很多优秀的设计师进行总结,因此我重点介绍一下我对交互式数据可视化的理解(仅代表个人观点),希望对大家有所帮助。

      什么是交互式可视化

      静态与交互式数据可视化的区别

      交互式数据可视化中的用户体验

      交互式数据可视化设计思维

      开源数据可视化库



什么是交互式数据可视化

      交互式数据可视化是一种更能够吸引用户的数据信息交流形式,在BI中的应用也变得越来越流行,并且由于其有较强的易用性以及能够为用户体验带来更多附加值而逐渐成为大多数数据分析系统的常见部分。它通过数据动态演示的交互方式,使用户可以直接与信息交互,用以构建自己对信息的理解,交互式可视化必须具有与人机交互方式,如单击按钮,移动滑块,快速响应以显示输入和输出之间的真实关系。

      有效的交互式可视化能够保持展示形式和数据功能之间的平衡关系。简单的图表可能因为太无聊而无法引起用户的注意,复杂数据可视化可能完全无法传达正确的信息。因此数据视觉和交互形式效果需要协同工作。



静态与交互式数据可视化的区别

      静态数据可视化是不包含任何交互功能且不随时间变化的数据可视化,从单一视角关注特定数据故事的信息图。图表中没有可操作的交互功能来调整静态可视化的数据展示结果,更适合不太复杂的数据故事、建立概念之间的关系以及传达预定的视图。其构建成本远低于交互式设计。因此在设计时必须充分考虑如何展示当前显示的数据拟定好数据故事。

      交互式是可视化设计中的绝佳工具,因为它们能够优化信息的显示方式,减少视觉噪音,降低用户对数据阅读的难度。系统中最常见应用之一是数字化仪表板或数字看板,如果直接从枯燥的数据表格获取信息这样的体验是非常原始且视觉干扰过多。而通过梳理数据结构使用适当的交互可视化使看板,能够成为用户快速汲取主要数据信息的理想工具

    设计时决定应用哪种数据可视化形式一方面需通过用户画像分析了解用户偏好如何,另一方面则需要结合数据故事复杂程度采用哪种才能够更全面更准确的传达数据信息,以及在构建项目的过程投入成本最终回报率的高低也起着决定性因素。




交互式数据可视化中的用户体验

      大量数据可用于帮助用户做出更好的业务决策。为了实现这一点,并从数据中获得最大价值,用户必须能够理解它;提出问题、体验模型并识别异常。

      在设计数据可视化面板时,最至关重要的是,需要考虑用户将如何使用这些数据。让更多的用户会使用数据面板而不是让他们去创建面板。强迫用户按照我们设定的规则去破译图表含义不仅不切实际且学习成本高昂。

      用户需要在不受额外功能干扰的情况下看到我们所展示的内容,当我们使用太多的颜色、形状、图案和大量的数据时,容易使用户迷失在数据展示中。我们的工作就是为用户处理数据信息结构降低用户对数据认知的难度。


视觉成像基础

      我们的大脑处理视觉图像要比处理文字内容快 60,000 倍,能够在13 ms内处理一张图像,然而,大脑的处理能力也是有限的。为了展示最优效果,数据可视化必须基于人类认知速度提供信息。需要设计输入来将信息分解成可管理的模块并以用户能够简易处理的方式呈现它。

 

用户分析

      我们在构建任何类型数据可视化时都需以用户为中心,了解用户的目标、动机和需求,经营环境,需要解决什么问题,以及用户语言和特定领域的知识;

在做这方面用户分析不需要耗费大量的时间,只要足以使我们能够进入下一阶段——设计用户路径上即可


用户体验路径

      系统用户的体验建立在两个主要元素上:关键点可视化以及交互路径。而用户路径中每个关键点需设计为对应特定的业务问题。

      可视化工具能够以丰富而复杂的方式与图表交互:筛选、缩放、细分、导出值等。它们都有助于将信息分解为更易于管理的块,因此我们需要考虑多种操作结果,综合起来能够串联出具有多个分支交互路径和图表用户体验路径。




交互式数据可视化设计思维

      可视化中的交互改变了数据的视角,始终致力于简单的可视化而不是复杂的可视化。目标是使其更易于理解和阅读。因此,需要避免使因使用过多的图表引起页面结构混乱,意味着通过过滤某些数据点,选择数据的不同区域,甚至完全改变可视化的类型。重要的一点是:交互式可视化不再是静态的,也不代表数据的单一视图。交互使人们能够根据自己的需要调整可视化并提出不同的问题。


寻找理论依据

      通过了解受众群体是谁,需要展示哪些数据,了解他们将如何使用这些数据。这些都将作为我们设计的理论依据,用以解决设计中哪些图表是可以快速应用到实际场景中,如何为数据结构做简化等问题;在数据的展示形式上通常是使用图表、线条或点、条形图和地图来实现的。万变不离其宗,交互可视化也是同样在此基础上进行扩展发挥作用。


遵循设计原则

      在设计中需要为数据可视化创建各种交互式小部件,但首先需要遵循数据可视化交互设计的三个基本设计原则——可用性、可访问和可操作。

       是否有直观的交互功能和数据可视化?

       用户是否可访问数据,并且能够快速理解其含义?

      是否为用户提供简便易上手的可操作的系统平台?

      当我们有了一个粗略的理论基础模型,就可以搭建数据模型来记录每条数据和相关的元数据,接下来是通过各种交互形式设计用户界面。


清晰的架构

      可视化架构是映射数据故事的形式化基础,在此基础上通过线条、图标和颜色等设计元素的视觉工具进行展示。为了利用这些工具,我们责需要运用对比关系、比重关系、颜色差异、位置信息和象征意义等突出显示信息所呈现的目的及数据间的结构关系。


可视化美学

      设计美学中少即是多的设计理念经久不衰,我们在进行可视化设计时也可按照这一标准在有限的设计空间内为用户提供最多的想法,清晰准确的传达复杂的想法


交互式绘图

     交互不一定发生在页面中明显可点击的事物上,也可融入在图像结构中,用图表中交互的小部件,扩展到其他类型的内容上,通常需要一个或多个UI 元素进行转换提示。

如在做地图中的交互可视化时要探索当前特定点或区域的实时信息,此时需要将图标或交互功能融入在地图上


开源数据可视化库

      简单介绍一下开源的交互可视化数据库,如果对数据没有什么概念在图表设计前可以参考一下数据库中的样式及类型,然后根据自己实际项目的需要进行设计。

D3.js 可能是最流行和最广泛的 Javascript 数据可视化库  专为基于数据操作文档而构建,并使用 HTML、SVG 和 CSS 使数据栩栩如生。

还有很多开源数据库可以查看- 11 个 Javascript 数据可视化库-里面有详细的介绍,这里就不一一说明了,希望在你们的设计中有所帮助。

结论

为了提高交互式数据可视化易用性以及为用户体验带来更多附加值,我们需要基于数据调研,用户分析,场景模拟等方向逐一解决相对应的问题,才可从各项结论中得出设计方向和目标。

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

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



文章来源:站酷    作者:胖Kuan

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

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

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



提升产品易用性的10个知识点

ui设计分享达人

作为设计师,我们希望做出来的产品对于用户而言易于访问、易于浏览、易于理解和可供所有人使用。而我们在做页面的过程还要考虑具有视力障碍、行动不便等残疾类人群

万维网的创始人蒂姆·伯纳斯·李 (Tim Berners Lee) 也重申了这一点,他说:

“网络的力量在于它的普遍性。无论是否残疾,

每个人都可以访问是一个重要方面。”

因此,这里有十种方法可以使你的界面更易于访问和更具包容性,并确保你是为用户设计的产品


文章内容包含以下:

1、颜色对比

2、导航选项

3、不仅仅使用颜色来指示状态变化

4、视觉焦点

5、预先加载

6、设计表达

7、视觉层级

8、合理交互

9、用户测试

10、无障碍设计


1、颜色对比

色彩是设计的主要方面之一。确保背景和元素模块之间有适当的对比,可以使用适当的阴影和颜色对比来

区分,突出重要信息是使你的产品更易于访问的最简单的方法。


这里推荐使用工具WebAIM 颜色对比度检查器来实现平衡的颜色对比度。该工具允许输入特定的十六进制代码或从色轮中进行选择,然后进行增量调整以达到元素之间的 AA(最低对比度)或 AAA(增强对比度)对比度标准。

网址:https://webaim.org/resources/contrastchecker/


2、导航选项

在用户使用时,导航的便利性是最重要的因素之一

(确保产品内跨页面的导航具有一致的命名、样式和定位)

(为用户提供站点搜索或站点地图)

(通过提供方向提示例如面包屑和清晰的标题帮助用户了解他们在网站或页面上的位置)


3、不仅仅使用颜色来指示状态变化

虽然颜色对于传达信息很有用,但它不应该是传达信息的唯一方式。在使用颜色来区分元素时,请确保始终提供不依赖于颜色感知的额外标识,以便于用户易识别


比如在做表单的情况可以通过以下方式去做区分


(除了颜色之外,还使用星号来指示所需的表单字段)

(使用提示标签来区分状态)

(添加说明文字)



4、视觉焦点

一些用户使用手机端产品时很难去聚焦于某个点,作为设计者这时需要去通过手法去制造焦点引导用户进行操作。

以手机屏幕为例,用户阅读的习惯分为两种,一种是“z”习惯型另一种是“F”习惯


比如可以在用户浏览路径上去做视觉焦点,引导告知用户进行点击,下面是列出的有效焦点指标:

(具备清晰的对比度)

(具有与元素互补的形状和大小)

(使用互补但引人注目的配色方案)

(好的动画可以帮助用户跟踪焦点移动)

(元素位置大小等适配各种型号)


5、预先加载

在产品上不管是文字还是图片都需要提前告诉用户当前状态,不同的使用环境下用户的网络相对是有波动情况,在网络不好的情况下用户打开产品如果产品没有做预加载大概率会造成用户直接关闭产品


6、设计表达

“没有用户喜欢点击他不想点的入口”听起来比较绕,你可以这样理解,我们平常看到的按钮是什么样呢如果在页面中我们把一个按钮做成一个灰色上面写着点击进入,作为设计者的我们在遇到这样的一个按钮相信都会犹豫的,灰色传达给用户的信息是禁止不可点击,用户已经被培养出这样一种习惯,但是遇到这种按钮上面还写着《点击进入》就会造成信息传达不准确(不仅仅是按钮)。




(样式符合用户理解范围内)

(交互给用户合理反馈,点击后状态、按压状态、禁止状态)


7、视觉层级

建立视觉层次结构, 元素在你的页面设计中的定位方式,并在这些相应元素之间建立一定的连贯性。


(不要挤满屏幕,否则会提升用户阅读成本)

(视力受损的人可能需要放大屏幕上的元素,因此请使你的内容具有可扩展性)

(将重要信息放在视线水平附近)

(使用空格和邻近度使内容之间的关系更加明显)


8、合理的交互

一个好的交互能够让产品达到一个沉浸式体验,相反一个差的交互会造成用户的反感;什么是合理的交互例如在使用阅读产品时,翻页功能是模仿现实中书本的翻页效果作用到线上就会制造出一个良好的体验

交互不仅仅是操作反馈还包含页面布局、元素展示、场景使用等

(符合用户对现实物体的认知,达到联觉效果)

(内容简洁,具备吸引力)

(出现场景是否合情合理)

(具备反馈能力)


9、用户测试

即使在前期工作做的足够好的情况下,在你觉得整个产品设计易于用户使用之后,使用产品的用户也可能会发现某些地方并不像你希望的那样友好


避免这类问题的最佳和最有效的方法是通过用户测试,在整个产品开发项目中进行非正式评估比在项目结束时进行正式的可用性测试更有效,用户测试有很多好处,至关重要的是你能够了解你的产品还存在哪些不足那些设计不到位,然后针对这些不足进行问题解决



10、无障碍设计

创建无障碍设计最重要的部分之一在于知道它绝不是创新的障碍,但是它可以让你创新你的设计,在做产品的时候要考虑到产品不单单只服务一部分人,所以在设计时应当考虑到具备一定障碍的群体

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

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



文章来源:站酷    作者:爱吃猫的鱼_

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

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

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



弹窗主按钮与菲茨定律的纠葛

ui设计分享达人

问题是这样的:有位设计师和我探讨弹窗主按钮在左侧还是右侧的问题,他说,他觉得应该在右侧,原因是因为菲茨定律(Fitts’ Law):“弹窗主按钮在右侧,次按钮在左侧,是由于菲茨定律,这是因为边角的按钮更容易被点击。”


主按钮在右侧,这个我是能理解的,但在右侧的原因是由于菲兹定律决定的,我是持需考证态度的,毕竟虽然这个说法确实听到过,但我认为还有待进一步梳理,这里需要细究的要点包括:


第一、弹窗主按钮一定要在右侧吗?


第二、如果弹窗主按钮“更适合”在右侧,是不是只有菲茨定律的原因,还有其他原因吗?


第三、菲茨定律到底在解决什么问题,它是否除了上述问题,还解决了其他问题?


带着这三个问题,本文打算从如下几个方面展开:
第一部分:弹窗主按钮位置 
1、PC端弹窗主按钮位置情况 
2、弹窗主按钮位置在哪里更合适 
第二部分:费茨定律 
1、什么是菲茨定律 
2、菲茨定律的启示 
第三部分:总结 

第一部分:弹窗主按钮位置
1、PC端弹窗主按钮位置情况
为了聚焦用户的视觉与心理,激起用户的反馈,弹窗诞生了。由于弹窗可以承载的内容丰富,且交互具备扩展性,弹窗被广泛应用于应用、网页等产品中。在弹窗设计中,标题、关闭的位置基本设计者们基本不会产生争议,而主次按钮的位置是一个永恒的话题。 

1.1、按钮组位置
对于弹窗来说,按钮组的位置位于footer区,此点无可争议。但按钮组应该在footer区的左侧、中间,还是右侧呢?从大量产品设计中我们可以发现,位于左边的比例几乎为0,中间大约5%,而位于右侧的比例达到95%。 

1.2、主次按钮顺序
既然弹窗按钮组在95%的情况下都为右侧,那么我们就来看下,在该种情况下,win和mac系统主次按钮的顺序是怎样的,站在巨人肩膀上,总是能看的更远。 

主按钮是指行动按钮,行动按钮是连接用户与产品的接触点,一个优秀的行动按钮,可以提升用户体验,且帮助用户高效完成任务。主按钮颜色在视觉上通常被醒目突出,而次按钮被弱化表现,这可以降低用户出错的风险,及提高用户完成操作的概率。 

在win系统中:
主按钮在左侧,次按钮在右侧。 

在mac系统中:
主按钮在右侧,次按钮在左侧。 

这里插一句题外话,mac的窗口关闭,最小化、最大化按钮在左上角,而win在右上角,它俩总是做啥都反一反。 

那为什么win和mac会做出不同的选择呢?背后又有哪些设计理念在支撑?翻阅了网上各种说法后,我总结出如下说辞: 

1、mac倾向于把当前场景下推荐用户点击的按钮放在右侧,例如,mac推荐取消,就会把取消放右侧;推荐储存,就会把储存放右侧。且右侧按钮为主按钮,视觉上突出强化。 

2、win倾向于把最安全的按钮(比如取消,关闭)放在右侧。因此,可以说它的主按钮在左侧,只是主按钮没有明确的视觉样式,保持和次按钮一致。 
2、弹窗主按钮位置在哪里更合适
关于主次按钮在左侧还是右侧更合适,两大巨头给出来的设计方案是不同的,网上也有很多同学做了该方面的实验,结果大致是说:不论主按钮在左侧还是右侧,只要系统中统一皆可。就像中国人吃饭用筷子,西方人用刀叉,与其纠结筷子和刀叉哪个更适合吃饭,还不如考虑用户的习惯、使用场景等因素,制定出更合适自身产品的解决方案。 

不过话说回来,目前支持弹窗主按钮在右侧的人数占多数(产品专家、设计专家、用户皆包括),原因不外乎:
1、右手操作原则; 
2、用户在弹窗中的阅读模式为“Z”字模式; 
3、BLABLA(接下来我们看看是不是菲茨定律也要参与进来)。 

第二部分:费茨定律
什么是菲茨定律
1954年保罗.菲茨首先提出菲茨定律,费茨定律是用来预测从任意一点到目标中心位置所需时间的数学模型,其后来在人机交互领域也得到了广泛的应用。它的计算公式为: 
T代表完成移动所需的平均时间; 
a代表光标开始/停止的时间; 
b代表光标移动的速度; 
D代表从起点到目标中心的距离; 
W代表目标的宽度(按移动方向为水平方向计算)。 

首先,完成移动所需的平均时间由两个参数来决定,即起点到目标中心的距离D和目标的大小W。其次,起始点与目标距离远,耗时越长;目标越大,耗时越短。 

这里还涉及用户在使用产品时到达到目标的心理诉求:
1、用户对鼠标指针达到目标并没有时间要求,则用户会缓慢移动鼠标指针,在此过程中逐步调整鼠标指针移动的位置,从而最终达到目标。 

2、用户对鼠标指针达到目标有明确时间要求(例如股票下单场景),此时用户会快速将鼠标指针移动到目标附近,然后在做精细化的调整,从而精确操作目标。 

由上我们可以发现,不论用户是否对鼠标指针达到目标有时间要求, 菲茨定律中的两个关键点为:鼠标指针移动到目标大致区域及精细化微调后精确定位目标中心。且在实际产品设计中,我们必须要考虑如何让用户的鼠标指针以最短的时间到达目标。 

因此,我们可以将菲茨定律中,从起点到目标所需的时间细化为以下四种情况:
1、距离远-目标大
除了鼠标指针需要跨越较大的屏幕范围,相对来说还是比较容易到达目标的,因为目标大。 
2、距离远-目标小
用户需要在鼠标达到目标可触位置前做一些鼠标位移的精细化调整。 
3、距离近-目标大
用户无需做太精细的调整就可以轻易到达目标。 
4、距离近-目标小
在快速到达目标后,鼠标需要做一些精细化的调整。 

以上的距离远近实际上还可以进行细化区分,一个是鼠标指针处于页面任意位置,与目标并无上下文关系;一个是鼠标指针处于下一步操作的上一步位置。 

这里可能会影响到的情况是,当鼠标指针处于页面任意位置时,目标元素的大小需要做通用化考虑(使用业界标准或用户的常规认知)。而当可以非常明确鼠标指针与目标的上下关联时,可以适当调整设计策略,例如鼠标hover一个按钮,出现面板,我们可以发现 ,鼠标指针一定是在按钮上了,才可以去进行下一步操作,这个场景下,鼠标指针的起始位置永远是不变的,变的是目标,即选择了面板中的哪个操作。 

菲茨定律的启示
从上述可知,在产品设计中,我们需要 优先考虑使用“距离近-目标大”的设计方案,再考虑“距离远-目标大”和“距离近-目标小”(但也不能太小,还是要稍微合理化一些),不要去考虑“距离远-目标小”的方法。下面梳理了一些在产品中用到菲茨定律的例子,让大家加深对菲茨定律的感知。 

1、点击区域合理加大,降低操作复杂度。例如表格排序功能,需要扩大点击区域。 
2、可点击属性视觉化。例如tabs的下面会带一条选中的宽度线,由此可推理出鼠标hover到其他tabs上的区域也是如此。 
3、相关内容与操作靠近。例如word中鼠标选中文字,右键可带出相关的操作。 
4、相关按钮互相靠近摆放。例如word文档需要被保存,通常保存和取消靠近,便于用户快速做出选择和操作。 
5、给目标操作安排流程,而不是点状设计功能。例如对单条数据启动编辑后,在原位进行保存。 
6、不希望用户操作的时候,目标设计远一点。例如word文档需要被保存时,mac系统会将“不储存”按钮距离“储存”按钮远一些。 
7、控制风险。在移动端中,如果不想用户误触,会将危险系数较高的按钮放在距离拇指热区远的位置。还有例如睡眠、关机、重启等按钮也不适合放一起(实际上真的放一起了,我无数次误关机)。 

第三部分:总结
说到这里,想必大家对菲茨定律已经有了基本认知吧。在菲茨定律中,有一条为:页面四周的按钮更容易被点击(无限可选中),因为鼠标达到屏幕的边角后,就不可能在超过了,所以mac和win都会将按钮放在屏幕边缘。这个就是那位设计师小伙伴说的,“弹窗主按钮在右侧,次按钮在左侧,是由于菲茨定律,这是因为边角的按钮更容易被点击。” 

实际上我们会发现,假如弹窗的主按钮在右侧,鼠标也并不是达到屏幕的边角,鼠标只是达到了弹窗的边缘(这里会存在一定的心理边缘感知,可能那位设计师就是说的这个吧)。然而,这与菲茨定律中的边角无限可选中概念不是一回事。 

所以说,目前弹窗主按钮大家更赞同在右侧的设计理念是:
1、右手操作原则:右手用鼠标,用户会习惯性把光标放在屏幕右边。 
2、用户在弹窗中的阅读模式为“Z”字模式:先浏览标题,最后视觉落脚点在footer右侧。手眼协调,手会执行视觉落脚点的操作。 
3、mac已经培养了大多数人的用户习惯,这点从很多产品设计中就可以看出,放弃用户习惯就是挑战用户体验,所以,我们为何不去拥抱呢。

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

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


文章来源:站酷    作者:小果1

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

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

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


被刷屏的微软全新3D表情,微软官方分享背后的设计思路

seo达人



图片

移动设备激增,零工经济迅速发展,远程工作开始兴起。在疫情的影响下,几乎每个人都成了远程工作者。

表情符号与我们一道稳步发展,成为鲜活和丰富情感的必要交流工具。肢体语言,微妙幽默,或者环境条件——虽然我们可以亲眼看到并回应这些暗示,但在网络环境中失去它们会极大地影响我们的交流。然而,用表情符号,几个像素就能以有趣、清晰、能引起情感共鸣的方式表达我们的想法和感受。(彩云注:这就是这项艰巨工作的商业价值)

随着世界走向混合工作场景,面对面和远程结合,线上交流的表达形式比以往任何时候都更加重要。微软365里有超过1800个表情符号,我们在过去的一年里一直在努力通过创建一个自然的Fluent(流畅)系统 (彩云注:这是他们更新整套表情系统的理念)来更新它们。

我们选择了3D设计而不是2D设计,并选择了让大多数表情动画化。在接下来的几个月里,你会看到这些产品的推出,我们想和大家分享一下,以纪念世界表情符号日。我们也很激动地推出了五个全新的表情符号,这代表着我们对工作、表达和空间的新视角。

 

拥抱游戏的力量

在疫情改变工作和生活之间的界限之前,交流就已经朝着真实情感和娱乐的方向发展。为了确保我们的新设计反映这一点,设计研究员Meghan Stockdale与我们密切合作,重新思考专业的图形表达。通过主次研究,她专注于游戏概念,将其作为一种催化剂,帮助我们挖掘最好的作品和最诚实的自我。她引用了斯图尔特·布朗(Stuart Brown)的精彩著作Play: How it Shapes the Brain, open the Imagination, and inspiring the Soul (游戏:如何塑造大脑,开拓想象力,激发灵魂),对她的有着特别地影响。

“游戏对于创造性头脑风暴、发展和掌握新技能以及团队建设等活动至关重要,”Meghan说,“但我们通常不愿意在工作或工作工具中给予游戏空间。由于我们工作和成年的关系,玩有时会让一些人感到不舒服——尽管我们生来就是为玩而生的。”

因为对每个人来说,好玩或富有表现力不是件容易的事,表情符号是完美的小帮手。它们绝不是无聊或装饰性的,而是我们人性的延伸,是重要的沟通工具。根据Meghan的研究,它们可以软化或强化我们的语气,为平淡无奇的互动增添乐趣,帮助我们以一种比书面文字更普遍的方式表达自己。

图片

这张图片展示了我们用不完美的圆来做头部的形状。人是不完美的,为什么我们的图形表示要完美的正圆呢?

那么,表情符号或其他好玩的媒体适合在工作中交流吗?游戏鼓励创新,而表情符号则是有趣的交流者。也许文字和表情符号之间的相互作用加强了两者的交流力量。也许表情符号的脆弱和轻松不仅可以激发我们自己的创造力,还可以鼓励我们组织中其他人共同参与。当我们进一步进入混合工作模式世界时尤为重要,在那里我们将首次在网上见到新的团队成员。

我们的一些全新表情符号甚至试图捕捉这个新的混合世界。下面是一些概念草图,我们希望能得到你的想法。

图片

以上是我们正在创建的新表情符号的概念草图,以帮助传达混合工作的现实。从左到右:一心多用,静音,不拍照,一边工作一边照顾孩子,穿着睡衣。

 

自然有趣,天生流利

在整个过程中,信任和清晰是我们的指导原则。我们希望人们相信,我们的新表情符号风格会理解到他们的意图,反映出他们的人性。人是不完美的,我们的创意中有美,这就是为什么我们选择了一个不完美的圆形作为头部的轮廓形状。

我们还密切关注表情符号中眼睛的表情,并倾向于把眉毛特征做的更加明显。对我们来说,在保留情感意图的同时进行设计是至关重要的。最后,因为我们希望人们相信他们并能从设计中找到令人振奋和鼓舞,我们倾向于明亮、高饱和的颜色和大胆的形式! 

通过全面利用特定的眼睛、嘴巴和头部形状,我们创建了一套统一的面部特征,可以缩放,同时保持一致的外观和感觉。

为了保持不同类别的1888个表情的一致性,我们在新风格中使用了简单的几何形状作为每个表情的基础。如果这听起来很熟悉,那是因为我们连接图标系统的工作方式是相同的。螃蟹表情确实突出了这一点;我们用圆形和半圆形来代替解剖的表示法,造型更加简单,从而赋予它更多的个性。

图片

当你注意细节时,平凡也能变得不平凡。图中的螃蟹表情符号通过大胆、美丽的颜色和厚实的图形形状证明了这一点。

整套表情我都喜欢,但我最喜欢的还是这只螃蟹。这只酷炫的小螃蟹体现了我喜欢我们表情符号系统的地方:它让看似普通的表情符号都变得与众不同。无论是螃蟹还是人类,我们的独创性都蕴含着美。(彩云注:这就是作品中的亮点部分阐述,面试的时候讲自己作品的亮点,就可以从类似这样的角度去讲,学到了!)

最后,但并非最不重要的是,我们必须利用这个机会做出一个改变,只有我们才能真正做到——将经典标准的回形针,改了全新的3D形态。

当然,我们现在使用的回形针可能比全盛时期要少,但我们无法抗拒怀旧的吸引力。

图片

为了让自己焕然一新,我们忍不住把扁平的、标准的回形针变成了新造型的回形针。

表情符号正在巩固其作为在线交流不可或缺的工具角色,你将能够在不同平台和设备上使用这些全新的表情符号。我们的一些新表情从今天开始在Flipgrid中上线,其余的将在未来几周推出。在这个假日季,团队和Windows将配备该套件,Yammer、Outlook和更多的产品将在2022年全年实现落地。

除了表情符号,我们还将在微软365中通过更具表现力的主题、插图、背景等,将我们的流畅美学带入生活。但首先,我们想听听你的意见!你最喜欢的表情符号有哪些?如果你能成为一天的表情符号设计师,你会创造出哪些新的表情符号?

 

本文翻译已获得作者的正式授权(授权截图如下)图片 

原文地址:medium

作者:Microsoft Design

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》被刷屏的微软全新3D表情,微软官方分享背后的设计思路

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

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


文章来源:csdn

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

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



没想到学会这套方法论,定义视觉风格能这么快

seo达人



江湖上一直流传着这样一套理论,视觉设计语言五维度即“形、色、字、构、质”,说人话就是图形、色彩、字体、结构、质感。这套理论的来源我寻了很久也没找到,但是这套理论却经常出现在各种方法论里面。下面我来逐一分享一下我对这几个要素的理解。

 

图片

 

1、形 

形就是指图形,界面中的图形就包括图标、卡片、图片,因此,icon的风格、卡片圆角的大小、图片圆角的大小,都会影响界面的风格,所以要进行规范。图片 

2、色

色即是色彩,在界面中色彩不是单一的色调,它是整个色彩规范,什么时候应该用主色,什么时候应该用辅色,主色和辅色的比例,颜色在图标、文字、装饰上的应用,这些会影响人的整体感受,吸引视觉注意力,规范的配色搭配会让界面的视觉更加舒适。

图片

 

3、字

字即是字体,字体的形式、字号大小、文字的间距都影响着界面的信息传递,选择符合产品特性的字体、合适的字号、舒适的间距都能让界面看起来更加精致。

图片

 

4、构

构即是结构,也就是界面的内容布局,排列的方式、分割的方式、留白的多少,都是属于界面结构的范围,结构的定义非常重要,决定着界面是否具有呼吸感、通透感、舒适感。

图片

 

5、质

质就是质感,也就是整体页面的感觉,通过圆角的大小、留白的多少、排版的疏密、投影的大小来决定整个质感是扁平的还是拟物的、高冷的还是活泼的。

图片

知道了这五个维度之后该如何应用呢?我们可以应用在竞品的视觉分析里,项目的视觉改版里,项目初期的定风格阶段里,反正就是应用在一切需要整理汇报的地方,提升你设计的专业度和可信度,如果在你的述职报告或者作品集里面搞一下,档次一下子就上去了。

最近因为季度汇报,我发现有些领导可太爱听这一套大道理了,加了这些方法论之后,他就会觉得这个人有思考、能力强、有自己的方法论,不过是好是坏那就各自评说吧。

 

原文地址:LEO设研所(公众号)

作者:设研_仓仓君

转载请注明:学UI网》没想到学会这套方法论,定义视觉风格能这么快

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

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


文章来源:csdn

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

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

用案例和方法,带你剖析「情感化设计」

seo达人



最近在产品体验中,发现了不少有意思的情感化设计案例,有些让人眼前一亮,有些很好的满足了用户情感需求,所以今天就汇总一下分享给大家。
文章主要内容包括:
1、如何理解情感化设计
2、结合案例分析情感化设计
3、3个情感化设计方向
              

一、情感化设计

什么是产品的“情感化设计”呢?先说2个小故事。
           
故事1
我儿子今年5岁了,周末带他去游乐园,他拿着我的手机看导航。突然说了一句“你的导航真厉害啊,还显示天气呢~”。这些成年人眼中习以为常的内容,却成了孩子惊喜的认知。
            
故事2
某天傍晚,南京地区的微信朋友圈忽然掀起了夕阳美景“摄影大赛”,成为了迅速传播的话题,大家都在晒照片,惊叹转瞬即逝的美景。这里面可能有很多因素,诸如参与感、分享的欲望、跟风等,但是美景才是打动用户的真正原因。
图片
通过这2个小故事,我们可以总结下情感化设计的要点:
  • 对不同用户,情感化设计的感知是有所差异的,需要设计师拥有不同的价值视角,甚至是对一切事物抱有好奇感的童心。
  • 情感化设计需要带给用户美好的感受,也是符合大多数人共同的认知体验。无论是会心一笑,还是形成深刻记忆,都必须能够激发出用户情感。
  • 情感化设计一般只能引起用户短暂的情感变化,当用户形成了认知之后,可能就失去了最初的魅力。

 

二、情感化设计案例分析

诺曼的《情感化设计》指出,人的3个认知层次:“本能层、行为层、反思层“,构成了用户认知事物的过程,每个层次都会产生不同的用户情感。
图片
             
01/本能层
视觉信息激发情感
所谓“爱美之心,人皆有之”,人们对美好事物的追求是一种本能反应。因此可以利用色彩、质感、图形建立场景氛围,激发用户情感。
                           
1、品质感渲染氛围
最近支付宝818理财节界面设计,利用金色很好的营造了节日氛围。而品质感极强的金色卡片,增强了用户的获得感,更好的激励用户参与活动。
图片
                      
2、真实场景再现
在虚拟的互联网中,建立符合真实生活场景的认知体系,是体验设计的一个重要方向。
在正常比例下,高德地图采用蓝色表示水域,例如河流、湖泊等。当地图比例放大到一定程度时,水域会有水纹波动的效果。通过场景仿真再现,带给用户“近大远小”的真实体验。
图片
               
3、关怀体验
相比界面设计传递出的偏主观的感性理解,文字可以带给用户直接而明确的情感体验。
                           
1)语言文字中的情感表达
用户在被邀请加入微信群时,下方信息会提示群中有哪些好友,从而帮助用户做出入群判断。另外提示信息还告知入群后可能产生信息干扰,在一味强调利益点,引导用户行为的商业化设计中,这样的提醒给了用户更多的人文关怀。
图片
                 
因偶感风寒,朋友下单买了感冒灵颗粒,美团外卖小哥在送药时,说了一句“早日康复”,让她对美团的服务惊叹不已,甚至有一丝感动。虽然不确定这是不是美团的标准化服务流程,却提升了她对美团服务体验的满意度。
图片
                         
2)安全感彰显用户关怀
iOS多任务管理页中,支付宝、银行等金融类应用会增加遮罩效果,保护用户隐私,通过差异化的展现形式,增强了用户的信任感。
而用户在支付宝“付款/收钱“界面截屏时,系统会主动给出安全提示,让用户感受到来自支付宝的关怀。
图片
                                     
3)满足用户的内心渴望
粉丝数是公众号运营的重要指标,特别是新的玩家,涨粉的渴望是不言而喻的。
前几天,我突然发现公众号粉丝从1.0K变成了1.1K。当时内心一阵狂喜,立即查看了具体粉丝数,结果并没有超过1.1K。原来粉丝数的显示规则是四舍五入,也就是说当粉丝超过了1050后,都会显示为1.1K。
这比我们常见的1.0K+的形式,数据上做了适当的夸大,但是并会对用户判断产生大的偏差,反而满足了用户的虚荣心。即使看到具体数据时,内心会有小失落,但也不会造成用户反感。
图片
当然本能层的情感设计,通常只能带来的用户情绪上的微小变化,或者短暂的刺激,无法强烈的改变用户对产品的认知,或者触发更多的用户行为。
                     
02/行为层
行为过程强化情感
用户的参与可以带来更强的的情感反馈和认知,并且更容易形成持久的用户记忆,甚至会培养新的用户行为习惯,从而增强产品粘性。
                          
1、动效设计融入情感表达
TIM 聊天列表页面,用户可以拖拽消息数量角标,快速消除未读提示,同时带有灰飞烟灭的动效。
相比较常见的点击消除,或者向左滑动后标记已读,这种交互方式既提高了用户操作效率,又增加了消除提示的畅快感,仿佛帮助用户甩掉了各种烦恼和压力。
图片
                      
即刻APP在用户头像中增加了拖拽反弹动效,除了视觉上爱心碰撞带来的爽感,过程中还增加了震动效果,传递给用户力度回馈。碰撞之后顶部出现的嘴角上扬的笑容,又带给用户无尽的想象空间。
图片
                                
2、创新玩法赋予产品情感体验
最近微信推出的“拍一拍”功能,创造了新的用户沟通方式和使用场景,简单的玩法激活了用户猎奇心理和表达欲望。所以功能刚上线时,借助社交关系迅速传播,并衍生出了各种趣味玩法。
传统广告主要是通过视频播放吸引用户点击,用户更多的是被动接受。而微信朋友圈广告则是播放广告片段,激起用户的好奇心,并结合手势玩法提升了趣味性,吸引用户主动参与其中,从而形成更强的用户认知和记忆。
图片
                                 
03/反思层
价值影响情感认知
前几天很多朋友发现蚂蚁庄园养的小鸡不见了,只留下了一封鸡毛信。
图片
当用户都在猜测支付宝是不是要出现新玩法的时候,支付宝公众号给出了答案。

“我鸡呢???我一把屎一把尿的把它养大,怎么就剩根鸡毛了?” 
“嘿嘿,上支付宝搜「找小鸡」,你就知道了。” 
“都是同事你装鸡毛啊!直接说。”  
“三年来有4.5亿网友在蚂蚁庄园捐出240亿颗“爱心蛋”,90%以上的公益项目都与孩子相关,小鸡去看看这些孩子们。” 
“中午回来吃饭吗?“ 
“12点前就都回来了,能赶上吃饭。” 
“行叭,我刚给它换的衣服,别玩脏了。”、
                                    ——来自支付宝公众号

 

支付宝的创新玩法,引发了用户的猜想,增强了活动的话题性,精彩的文案对白,既宣传了支付宝的公益行为,又收获了用户对品牌认知 。

 

三、情感化设计的方法

情感化设计在用户体验圈早已不再是新鲜话题了,但是如何做出符合用户情感需求的设计呢?我觉得可以从3个方面入手。

 

1、天时——关键时刻激励
抓住用户关键的时间节点,通过设计手法增强用户的情感效应。例如微信设定了生日、春节等关键词触发飘落动效,让苍白的文字信息更加富有场景化情感;
根据用户生命周期,电商平台会推出相应的礼包,促进用户转化的同时,让用户产生被关注的情感体验。
图片

 

2、地利——用户场景引导
根据用户行为流程,在关键的行为节点中增加情感化设计。
花小猪在成功约车后,满屏飘落的花瓣动效,烘托了场景气氛,有利于缓解用户等待焦虑。
特殊天气状况下,高德地图会显示天气情况,为用户出行提供参考。
图片

 

3、人和——挖掘用户内心诉求
利用用户自身的情感诉求,满足用户内心的渴望。
拼多多“多多梦工厂”游戏中,用户在加油之后,快递车会有明显的加速效果,很好的满足了用户急切收到商品的情感诉求,也更好的激励了用户持续加油。
图片

 

写在最后

情感化设计更多的是带给用户瞬间感动,很难形成长期的用户激励。因此情感化设计主要目的是通过情感累加,提升产品品牌形象。
不过情感化设计在落地时,会面临一些困难。
  • 一方面互联网已经发展了这么多年,大家对一些小的趣味细节,很容易视而不见,或者只能会产生一点点情感波动就结束了。
  • 另一方面商业化的设计,更加注重投入产出比和眼前收益,当情感化设计无法确定可以带来直接的经济效益时,很容易被pass掉或者无限延期。
所以设计师也需要不断的去总结和反思,如何坚守心中的那点儿设计情怀~
今天先说到这儿吧,下期再见~
                   
原文地址:子牧UXD(公众号)
作者:子牧先生
 转载请注明:学UI网》用案例和方法,带你剖析「情感化设计」

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

干货|如何通过设计传递「信任感」?

seo达人



众所周知,一个可以让用户充分信任的产品,才能可能与用户建立起良好的关系,在用户信息获取、产品目标实现上成为可能。对金融类、社交类产品而言,安全可信的需求更是用户最核心的诉求。

 

信任感维度梳理

客观技术 + 主观体验

信任感包括两个维度:客观信任感和主观信任感。

客观信任感通常体现在技术层面,依赖于交互设备和网络环境等;

主观信任感则体现在交互体验层面,通过交互流程和视觉效果对用户进行引导。

 

1 、客观|技术系统

通过技术安全和策略,传递给用户稳定的产品功能和策略,主要体现在以下两点:

图片

(1)稳定性

  • 不易出系统问题和 bug
  • 在各种应用设备上可以保证顺利切换
  • 在各种应用环境中可以保证流畅使用

 

(2)安全性

  • 身份验证
  • 隐私保护
  • 账户、密码安全
  • 功能使用过程安全
  • 其他

 

2、主观|交互体验

通过产品的设计和交互流程,传达给用户可靠的产品感受和体验,主要体现在以下四点:

图片

(1)可掌控

  • 给用户更多的操控权限:饿了么的推荐卡片设计,右上角的“…”,点击后会显示“不喜欢”,以此让用户感觉自己有更多的选择和操控权。

图片

 

  • 任务定制化,匹配用户能力:大众点评对于不同等级的用户安排的赚取积分的任务也不同,给初级用户降低难度,好上手;给中、高级用户提升挑战,有效促活。

图片

 

(2)可理解

  • 给用户尽可能提供全面、完整的信息:链家 App 在看房的时候,不仅有 VR 全景功能,还增加了“设计效果”方案。当用户点开“设计效果”后会看到分屏对比的效果,给用户对于房子空间的全面体验。

图片

 

  • 信息条理清晰,有章可循:支付宝相互宝的 “大病医疗” 需要阅读的信息很多,产品设计了目录作为引导,并将重要信息采用不同的背景颜色标记出来。

图片

 

(3)可依赖

  • 帮助用户轻松完成任务:产品了解用户的操作行为,缩短用户路径,例如京东等 App 在收货地址的填写时可以粘贴整段文字(地址,收件人,电话),然后“智能识别”到对应的文字选项中,优化了用户填写资料的体验,让用户完成任务毫不费力。

图片

 

  • 给出有利于用户决策的提示:下雨天美团外卖针对用户所在区域,提前推送天气变化,提醒用户提前下单。

图片

 

  • 给出的信息详实,以用户利益为出发点:使用支付宝理财在买基金时,产品会评估基金的风险和用户的承受能力是否匹配,并给予相应的提示。

图片

 

(4)可挽回

  • 非正常信息、错误内容及时同步:高德打车企业版如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道,尤其是对于对线路不熟的用户。

图片

 

  • 从根源防止用户出错:天猫购买产品添加购物车时,没有货的标签会变成禁用状态,避免用户下单。

图片

技术安全是可信性的保障,但并不是有了技术安全就足够了,还需要通过交互层面引导和优化使用户产生对产品的信任感。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|如何通过设计传递「信任感」?

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


日历

链接

个人资料

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

存档