首页

用户体验|我研究的三招,应对用户的回避小心思

seo达人



00.【前言】

图片

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

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

 

01.【为什么会得到错误的反馈】

用户做出错误反馈的原因:

大概会分为这几类情况。

从心理学角度举几个例子来分析一下:

 

举例一:

当别人穿着新买的衣服,兴高采烈的询问你,“你觉得我这身衣服好看吗?”

通常出于作为一个自认为情商还可以的社交人类而言,哪怕这件衣服在自己看来并不是很喜欢,我们依然会表达出赞赏。

不论是出于礼貌,还是为了促进关系良好的发展,我想很少有人会直接坦荡的说,你这件衣服真丑吧。

有些非常的善良的用户,在调研过程当中,也会出于考虑到我们产品开发者的面子而忽视自己真实的想法。

 

举例二:

我们在学生时代,老师提出一个问题,“大家都理解了吗?”有些人明明似懂非懂,但依然会逞强的说出“我理解了”这四个字,也是为了掩饰自己的想法,维护自己的面子工程。

用户也一样,他们有可能为了维护自己的形象或不好意思表达自己的想法,说出违心的结论。

 

举例三:

参加过教师资格证的小伙伴应该都知道,在教师面试的时候,有一个试讲的环节。需要当场对抽到的考题进行备课和试讲。

通常我们在家里准备考题的时候都可以非常流利的进行演练,但到了考试当天,进到考场当中我们又总会紧张到不知道该说什么。

【在陌生环境下,我们经常会觉得不知所措。】

同时面对陌生的人,很多人也很难真实的表达自己的想法。

我们的用户也一样。

 

02.【我们应该怎么做?】

我自己总结了三种应对问题的方法。

 

方法一:关系培养法

善良的用户是最好沟通的。

想象一下,对我们的真心朋友,在他真心想得到我们认真的反馈的时候,我们是否可以说出逆耳的忠言?

尝试把用户当作我们的朋友,以一个向好友真心询问意见的语气和用户交流,整个过程不用很正式,告诉他我们只是单纯的朋友间的闲聊和吐槽,真诚的去访谈。

善良的用户更能说出发自内心的想法。

 

方法二:路人观察法

对于不愿意谈论他们难以理解产品行为的用户,我们不必过分强调访谈的重要性。

通常急切的追问对这类用户而言,更容易产生逆反心理。

我们可以采用路人观察的方法,在公开场合不着痕迹的观察这类用户的具体行为。

有人会疑惑,这说的很轻松,怎么才能不着痕迹的观察呢?

提供一个小的思路,我们可以收集用户页面停留的时间,点击的次数,甚至眼动的频率,又或者观察用户的微表情,来分析用户对于当下产品的理解情况。

当然这是B端产品,如果是适合公共场合使用的产品,可以直接将自己作为一个周边的普通用户,轻松的观察身边其他用户的行为。

 

方法三:情景营造法

选择用户熟悉的场景,最好是每天办公的办公场所,让周围充斥着熟悉的日常用品,在自己把控范围内的环境来进行访谈,更能够让用户有把握感,主动的表达出想法。

就像我们在自己家里接待客人,远比去别人家做客感觉来的轻松。

如果用户工作场地有限制,必须选在陌生的环境,那我们也注意不要选择看起来就很严谨,很正式的实验室场所,容易增加用户的焦虑感。

 

小思考  提一个小思考:【你知道怎么样准确的定位自己的访谈目标吗?】下节我们聊这个。

 

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

作者:CC本人

转载请注明:学UI网》用户体验|我研究的三招,应对用户的回避小心思

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

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

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

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



为你解密设计中的节奏感!

资深UI设计者


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

文章来源:站酷   作者:美工美邦

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

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

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

如何做好数据可视化

资深UI设计者

在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。

1、选择正确的图表类型

不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

2、根据数据的正负值选择正确的绘图方向

当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

3、始终从0处开始绘制条形图

和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

4、折线图应该清晰呈现Y轴上的趋势变化

对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

5、使用折线图的时候注意时间

折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

6、不要使用平滑的折线图

平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

7、避免让双折线互相交叉

通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

8、限制饼图中的扇形的数量

饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:

不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

9、在饼状图中直接标注对应的数据

没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

10、不要在扇面上做标注

不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

11、控制饼图中扇面的排序让其方便阅读

对于饼状图的切分方式,有2种常见的顺序:

将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

12、避免随机排列

同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

13、不要牺牲信息图的可读性

饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

14、视觉效果不要影响数据的呈现

不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

15、选择和数据属性匹配的配色

配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:

使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

16、使用无障碍的配色

根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

17、关注内容的易读性

在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:

选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

18、使用水平条形图来优化倾斜标签

这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

19、事先选好你的图表库

如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

20 、不只停留在在数据静态呈现上

信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

想把数据可视化做好?这 20 个超实用的经验总结一定要先看过!

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

文章来源:优设   作者:Taras Bakusevych

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

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

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




vue-cli@3添加sass(vue项目模板封装系列)

前端达人

前言

上一期分享了如何在vue-cli3的框架中,封装mixinsmodule 。本期将分享如何在vue项目中添加sass
在这里插入图片描述

GitHub项目地址:https://github.com/jiangjiaheng/web-template

关于sass

本文默认你对sass有一定的了解,并且阅读过相关的官方文档,因此本文就不在赘述关于sass的基础知识。

在这里插入图片描述
sass官方文档:https://www.sass.hk/

添加方式

1. 创建项目时选择预处理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 
  • 1
  • 2
  • 3
  • 4

移动上下键选择Manually select features:手动选择创建项目的特性。

显示如下:

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

移动上下键在CSS Pre-processors,按提示点击空格键选择CSS-processors

显示如下:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 
  • 1
  • 2
  • 3
  • 4

选择第一个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们安装sass-loader node-sass

2. 手动安装sass-loader

如果在创建项目没有选择CSS预处理器,我们也可以手动安装sass-loader node-sass来集成scss

npm install -D sass-loader node-sass 
  • 1

使用

完成添加后,我们只需要在style指定langscss即可,无须多余操作:

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>




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

文章来源:csdn

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

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

Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案

前端达人

错误提示:


  1. ERROR Failed to compile with 1 errors 下午6:51:57
  2. error in ./src/views/Login.vue
  3. Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
  4. at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
  5. at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
  6. @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
  7. Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
  8. 13:3-17:5 14:22-397
  9. @ ./src/views/Login.vue
  10. @ ./src/router/index.js
  11. @ ./src/main.js
  12. @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 解决方案:

找到问题所在:Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

这个问题是因为Sass的版本过高导致,所以根据提示将版本改为对应的版本就可以了,我这里是改为4.0.0版本。

下面是怎么改版本:

1.首先在IDE中找的package.json文件:

2. 然后打开该文件找到“sass-loader”,后面跟着的便是你现在的版本,根据提示将其改为对应版本即可 :

3.在Terminal(终端)中输入:cnpm install(注意用cnpm 淘宝的镜像,用npm可能会下载不成功)

 4.运行成功:npm run dev


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

文章来源:博客园

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

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

2021-2022设计趋势ISUX报告·社交APP篇

seo达人



互联网社交发展方向

先来看看技术发展和现阶段人口结构的变化对线上社交有什么影响。

技术上:

2G时代的社交实现了跨地域聊天,用户可以在QQ里和天南地北的人聊天,强调在线状态。QQ号是用户社交虚拟身份的id,是用户自我创造的线上人设。2G时代的社交寻求更为方便的沟通方式。

3G进入了移动社交,著名风投公司合伙人约翰·杜尔提出SoLoMo概念(社交化、本地化、移动化)。用户可以基于位置进行交友,比如附近的人;基于行为匹配,比如微信摇一摇。没有在线状态,可以随时随地的联系,随时在朋友圈获取对方线下的生活状态。

4G时代,手机硬件、大数据和AI的发展,大大提升了匹配的效率,高效地建立潜在社交关系。不论是看脸社交还是灵魂匹配,都能在很短时间内找到合适的人聊天。信息传输越来越快,沟通互动的方式不断革新,用户从文字、图片聊天进而习惯于实时语音和视频。

随着5G到来,高带宽互联网、云、AR/VR/MR的高速发展,视频作为主要的信息和沟通载体变得日益普及,疫情让在线沟通和协作越来越方便,更多的线下社交场景转移到线上,线上社交的频次大大增加的同时,副作用也开始呈现,社交隔离让人们感到更孤独,对云社交的需求愈发强烈。

 

人口结构变化:

独生子女群体在80年代出现,但由于父母辈基本是有数量较多的亲兄弟姐妹,因此第一代独生子女的同辈中有较多的表兄弟姐妹或堂兄弟姐妹互为玩伴。而由第一代独生子女繁衍出的第二代独生子女,也就是现在的大部分00后,家庭规模越来越小,亲属同辈越来越少,加上人口流动频繁,少有的亲属同辈也较为疏远。

00后这一阶段的出生率跌至了最低点,平时家庭、学校二点一线的生活,繁重的课业负担,原本在亲属同辈圈的社交就少,在学校的熟人同辈圈的社交也越来越少。

 

 

2018年发布的《00后来袭-腾讯00后研究报告》中说到,“75%的00后渴求有更多的时间跟同伴在一起”。00后在现实生活中缺失的同辈圈社交,更有强烈的诉求去互联网上寻找。他们有着更为复杂的社交需求,通过与同辈圈的互动,建立同辈伙伴关系,从中获得陪伴感、归属感和自我认同,形成自我认知。

回顾这几年社交的变化,技术让社交体验从“线上线下割裂”向“虚拟空间映射真实世界”发展,00后的线上社交需求更加强烈,我们如何解读用户、解读人群,寻找他们的需求痛点。接下来,本文从自我展示、匹配连接、沟通互动的社交体验路径来探讨社交的设计趋势和特点。

 

最初的互联网社交身份是简单的虚拟身份ID:虚拟头像、昵称、个性签名、QQ秀,当时的社交体验线上和线下完全割裂,用户的自我展示强调纯线上人设打造。随着硬件设备和图像技术发展,用户慢慢丰富社交资产,用真实身份交友,高清美颜自拍、沙雕表情包和声音名片,线上的自我展示与线下生活紧密联系。而现在,更多人用虚拟形象代表自己,技术的进步让虚拟形象的展示更完美、更逼真。

 

1-1 真实身份展示从单一趋向于全面

用户在展示自我的时候往往需要填写大量文字信息和传输多张精修过的照片,导致编辑成本高、浏览效率低。视频化的普及让用户随时随地记录自己,在这种沉浸式的自我展示中,身份信息传达更加有效和真实,也进一步放大用户的自我炫耀感。

Feels的个人资料由全屏照片、视频、问答组成,用story的交互方式进行浏览。

 

1-2 从声音名片到声音形象,更加赋予了情感和灵魂

语音的优点在于比文字传输效率高,一篇完整的文字自我介绍用语音三言两语就说完了。而语音的缺点是无法在嘈杂的公共环境中使用,所以老年人最爱用语音,因为他们私人空间较多。疫情让人们大大减少了旅游和外出娱乐,享受个人空间的时间变多了,从而缩小了语音使用环境受限的缺点,放大了传输效率的优点。在今年,出现大量语音房社交,语音从“萝莉音”“正太音”的声音社交名片变成展示个人形象的方式。

Clubhouse带来语音社交热潮,Facebook、Twitter也相继上线语音房hotline和Spaces,用户可以找到一个感兴趣的主题房进行聊天或围观,那些通过短短几分钟发言就吸粉的高质量用户,通过声音赋予了个人的情感和有趣的灵魂。

Reddit Talk 

 

1-3 从“我是谁”到“我们的关系”

展示自我除了从展示者的角度来设计“如何更好的展示社交资产”外,也要从看的人的角度考虑“如何更好地了解他”。

ios15从spotlight输入联系人的名字,对方个人信息会智能拉取你们相关联的信息,包括最近的聊天、共享的位置和照片。

 

Snapchat能根据生日、出生时间、地点生成个人星座运势和个性,还能和好友进行星座合盘。通过个人资料之间的交互,强化双方身份的情谊特点。

 

1-4 虚拟和真实之间,越来越强调“真实”

虚拟形象的概念不新鲜了,2003年QQ秀是虚拟形象的雏形,Y世代网民根据自己的喜好拼出属于自己的QQ秀形象,用于QQ聊天时的自我形象炫耀和情感表达。Z世代逐渐成为互联网的主力军时,他们的个性习惯和独特的表达方式让虚拟形象在社交中的使用需求愈发强烈。《Z世代圈层消费大报告》提出z世代五大典型兴趣圈层为:电竞、国风、二次元、模玩手办、硬核科技。Z世代已经从他们的兴趣中建立了对虚拟形象的情感,兴趣成为他们建立自我人设的重要手段,他们跳出固定人设,在不同兴趣圈层展示多样个性,使用特定冲浪语,以此获得归属感和认同感。

高新技术的发展让虚拟形象变得越来越高质量。苹果的Memoji、Snapchat的Bitmoji和Facebook的avatars让虚拟形象成为自己的化身,用于个人资料展示以及聊天表情包、合照、视频互动等场景。Snapchat最新的资料设计中展示了3DBitmoji。

 

依靠面部捕捉、表情捕捉、动作捕捉的技术,实现了真人与虚拟形象的动态同步,降低了真人化虚拟形象的设置成本。在SXSW2021音乐节上,展示了Facebook新avatar系统推出的VR社交应用Horizon。人与人能通过虚拟形象进行实时互动,除了有自己逼真的形象外,还具备真实的眼神表情和肢体动作,还会根据肢体动作变化不同情绪。

 

大数据和人工智能时代,融合了AI技术的虚拟形象也在近几年层出不穷。与真人虚拟形象不同的是,它不受对方在线的限制,能随时进行实时互动,来满足用户对陪伴和娱乐的需求。麦当劳推出一位唱跳型爱豆的虚拟形象,她可以和小朋友进行沟通互动,一起跳舞,跟小朋友讲故事,增加与消费者之间玩伴、陪伴关系。

 

麦当劳虚拟偶像“开心姐姐”

用户在社交网站分享动态,维系自己的人设,获得群体的存在感和认同感。在未来,这些记录和创作的内容是否会形成自己的虚拟空间?每一个人不同的故事动态与空间产生联系,形成自己独有的虚拟空间社交资产。

 

1-5社交人格从「完美人设」到「透明人设」

随着好友列表数量增多,很多人开始逃离朋友圈,人们在朋友圈的人设经营也越来越谨小慎微,开始疲于“完美”人设的表达,社交产品开始减压。正如越来越多的年轻服装品牌进行的「透明商品运动」,他们在品牌宣传时,将商品从生产到制作的全过程透明化公开给消费者。「透明人设」是反对当今社交信息流充斥着的完美人设,鼓励自我展示更加真实和未经编辑。

Dispo复古相机拍摄后需要24小时才出片,并且没有任何美图的编辑工具。传达现实生活中不完美的时刻也是值得捕捉和分享的。

 

Poparazzi能连续拍照变成GIF进行分享,同样也传达未经过编辑的更真实的自我展示。用户用emoji进行互动,仅展示动态收到的emoji表态数量。

 

你是否会因为动态无人互动而焦虑?是否会因为很久不更新动态而失去展示的动力,慢慢社恐?instagram和Facebook允许用户隐藏帖子的赞数,来减轻用户的压力和焦虑。

 

 

2-1 匹配趋向于多元化

调查发现,现实中两位互不相识的陌生人要花50小时,才可以在路上叫出对方名字,再投入40小时,才能蜕变为真正的友情。互联网帮助用户高效匹配,缩短认识的时间,降低认识的成本。

近几年,用户的喜好正在极速分裂和细化。《00后来袭-腾讯00后研究报告》表明73%的00后会主动地获取资源来发展自己感兴趣的领域。由于现实中同辈社交圈狭窄,他们需要在互联网的社交阵地上寻找更垂类的兴趣伙伴,比如云学习伙伴、游戏玩伴、coscp等,线上社交在不断垂直细分以便更快捷的连接同辈伙伴。

随着传输速度的发展,匹配连接的体验具有更实时的交互和面对面的互动体验。Distance Disco是一款云蹦迪平台,疫情期间,大家在各自房间里通过在线视频就能开启一场线上舞会,结识一起蹦迪的朋友。界面上的视觉元素和色块会随着音乐节奏变化,增强迪斯科的互动氛围。

Honk匹配陌生人聊天的动画,传达了穿越了人山人海,遇见了你的感觉。头像出现时,出现招手动画,像是刚刚见面的人招手打招呼。、

 

 

2-2 匹配提升安全感和隐私保护

现实生活中我们都有意识地保护自己的隐私,而到了互联网,却容易放下戒心将自己的信息分享给他人,线上社交会放大陌生人有趣、友善的一面,却也隐藏了人性的缺点。社交产品的在帮助用户建立社交关系的同时,也要提升用户隐私保护和社交安全的体验。

Instagram帐户注册时,未满16岁的未成年人默认使用私人帐户,仅粉丝才能查看其发布的信息,在平台内容分发和互动上与成年人帐户进行隔离。当用户更改成公共帐户时,会给到提示强调私人帐户的好处。

 

Snapchat推出“好友检查”,用户可以快捷私密地删除不联系的人,确保好友列表里仍是真正的朋友。

 

Tinder的一项调查显示,40%的人在Tinder中发现了前任,24%的人遇到了家人。为了保障用户隐私,用户可以上传他们的联系人名单以选择不想在app中遇到哪些人,屏蔽所选的联系人。

 

在社交产品中,聊天是关键的一环,匹配到合适的用户后,如何加强双方情感连接和信任的纽带让用户为关系而留?从书信到电报到电话到视频通话,都是通过技术的发展获得了更高效真实的沟通体验,线上沟通的用户体验一直不断还原线下的真实体验,疫情加速了多人在线视频通话的发展,既让人在沟通时保持社交距离,又让人感觉对方近在迟尺。

 

3-1 更临场

相较于面对面沟通交流,线上的交流在听觉、视觉、触觉、情绪传递的体验上,决定了用户社交临场感的强弱。

Honk用文字交流时,能看到对方一个字一个字实时的输出,模拟真实的说话方式。

 

2021年Google I/O大会的3D视频聊天设备Project Starline,利用多个高分辨率摄像机和深度传感器在不同角度捕捉用户,以3D的效果进行人物呈现,营造对方真的就在对面的裸眼3D感。

 

2021年F8大会上,Facebook提出用于AR视频通话的MultipeerAPI,更方便创作者制作AR特效,用于多用户、多屏幕的共享AR体验。用户在多人视频通话时,视频中会出现太空或篝火的AR特效,让视频者感受到大家都在同一个共享空间。还支持轻量级游戏,多位玩家屏幕由一根曲线贯穿,玩家用脸引导甜甜圈共同完成接力游戏。

 

2021年IOS15的更新,Facetime使用的空间音频让通话的听感更加自然、逼真,仿佛在同一房间面对面聊天。

 

面对疫情人们在生活中的社交礼仪都以非身体接触式动作替代,线上社交的频次和密度大大增加,视频通话在视、听处理上越来越自然和逼真,在触觉上也向着《头号玩家》的男主角在虚拟空间中感受到的虚拟触觉传递到现实中那样在进化。美国西北大学的研究中,一位妈妈与孩子视频通话时,通过抚摸屏幕,能把来自妈妈的抚摸传递到孩子身上的“AR皮肤”上。未来在虚拟社交中也能获得真实的触碰,加强情感的连接。

 

3-2 更个性

个人展示是单向的,沟通交流是双向的,双方在不断交换彼此之间的状态和感受,从中获得被了解和认可。个性聊天气泡、表情包、自定义聊天背景,帮用户在沟通交流时展现自己独一无二的个性。线上社交的用户语言设计要打造个性化的社交氛围,让用户的个性在沟通中被挖掘和展现。

MUZE在聊天中可以自由摆放文字、贴图、涂鸦,让交流更个性化和自由。

 

Google I/O大会推出的全新设计语言Material You中,系统会基于用户选择的壁纸进行自由取色,并应用到UI中。是否聊天的UI也能随着聊天中的图片,或是聊天发送的表情文字提取心情语义,进行UI的变化,加强情绪的传达。

 

3-3 场景化

人和人的社交通常依附于不同的场景,群聊或好友分组就是将特定的社交关系进行场景设定。比如“火锅突击队”“老废物乐园”“吃瓜小分队”依附社交场景来进行互动,帮助用户带入社交氛围。

咖啡馆社交,通过构建咖啡馆场景,传达和陌生人进行一场闲聊的慢社交体验。

 

Facebook的视频通话,用烟花和礼帽的AR特效来构建派对的社交场景。

 

2021年WWDC大会上,现场用不同的Memoji营造了线上观众参与会议的场景。

 

3-4 感官刺激

2021年Google的一份统计数据表明,用户平均注意力时长从12s下降到9s,而00后的平均注意力仅8s。面对这样的用户,需要让他们在短时间内获得极大的感官刺激来延长注意力,以及在沟通交流时有更极致的情绪表达。

Honk可以同时发送大量的emoji表情。

 

QQ团队运用Lottie技术推出每秒60帧超高帧率、动效更细腻的小黄脸表情包。

 

微信的表情包不仅带来视觉上逼真的3D动画效果,屏幕上其他内容也会随之震动,还有触感上的冲击。

网络表情包 

 

3-5 轻娱乐、游戏社交

《社交媒体趋势报告》提到“和朋友保持联系”一直被列为是使用社交媒体首要原因,但在16-24岁的用户中,主要驱动力变为“寻找搞笑和有趣的内容”。青少年通过线上社交弥补线下社交缺口,获得同辈认同,排解孤独和学习压力。“组队开黑”“一起微光”“找长期固聊固玩”,00后们的社交需求更多放在娱乐、游戏化社交上。社交体验也从物理空间的连接转变到精神空间的连接。

用户在Housparty进行视频聊天时,如果感到无聊,可以玩一场轻松的游戏,游戏过程中可以通过视频看到对方的状态。

 

Snapchat正推出一种叫Connected Lenses的新型增强现实镜头,它可以让不在同一个物理空间的用户一起进行AR游戏,比如共同组建乐高模型。

 

IOS15中Facetime加入Shareplay功能,可以与朋友共享屏幕,一起线上追剧、听音乐、玩游戏。

 

Tinder在今年推出第二季Swipe Night活动,用户通过观看每周一集的互动故事,向左或向右滑为故事中的角色做决定,每一集结束后会匹配到在故事中做出类似选择的用户,并可以继续相关话题的聊天。

 

结尾

科技重塑了我们的生活。线上社交让我们日常沟通更为方便,也让我们轻松维系现实中的社交关系,越来越多的人依靠它构建新的虚拟关系,互联网带来沟通便利的同时,也减少了人与人面对面交流的机会。

美国传播学家艾伯特·梅拉比曾给出一个公式:信息沟通传递=55%视觉+38%声音+7%语义。大意是人们在现实生活中进行面对面沟通交流时,7%是语言上的内容,剩下的是面部表情、肢体动作、目光接触、语速语调等非语言内容的交流。随着技术的进步,社交不断在补充非语言内容交流的缺失。在自我展示中,无论是视频化、声音形象、富有表情和肢体动作的虚拟形象,还是沟通场景中越来越临场的体验和充满感官刺激的表情符号,线上社交的趋势都在不断映射线下社交的体验。

最后,你还想看ISUX什么趋势的文章? 欢迎在评论区留言呀~

感谢阅读,以上文章由腾讯ISUX团队创作,版权归腾讯ISUX所有,转载请注明出处,违者必究,谢谢您的合作。 

 

原文地址:ISUX

作者:腾讯ISUX

 

转载请注明:学UI网》2021-2022设计趋势ISUX报告·社交APP篇

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

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

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

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



设计师必备的Chrome插件,超好用!!!

seo达人



01.Go Full Page

设计师在网上冲浪时,看到一些排版精美、设计优秀的界面总想要保存下来,以便日后寻找灵感。

不知道大家都是怎样保存整个网页的。

我之前的笨办法是这样的:先是一屏一屏地截图,然后再拼接起来,特别是拼连接处时需要小心翼翼地对齐,简直是太麻烦了。

现在的高效方法就是使用Go Full Page,它是整个网页的截图工具,可以轻松松松地保存整个页面。

轻轻动一下手指

图片

便生成了一个长图

图片

 

02.WhatFont

如果我们想查看网页中的字体,这就是神器WhatFont。仅仅通过鼠标停留在字体上就可以查看Web字体,简单又优雅。

图片

 

03.ColorPick EyeDropper

我经常有一种苦恼,比如同样是蓝色,为什么别人家的颜色这么干净清透,令人愉快?这时候就不得不舔屏了……

ColorPick EyeDropper就是一款吸色工具,能够直接从网页中选取颜色值。

图片

 

04.Window Resizer

当想对各屏幕的尺寸测试设计稿时,可以使用Window Resizer快速调节,了解设计稿在不同屏幕上的兼容性。

图片

 

05.CSS Peeper

如果想更加全面的获得网站上的一些信息,比如图标、svg、图片、字体样式、元素间距等等,CSS Peeper便是一个完美工具。

可以查看字体样式,可以查看元素之间的间距

图片

可以查看网页中使用的颜色

图片

可以查看网页中出现的图片或图标

图片

 

Chrome拓展程序的安装也是超简单,在拓展程序中搜索,然后点击应用就可以啦。

拓展程序地址:https://chrome.google.com/webstore/category/extensions

 

原文地址:栗子设计喵 (公众号)

作者:栗子

转载请注明:学UI网》设计师必备的Chrome插件,超好用!!!

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

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

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

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



适老化设计研究实践

资深UI设计者

编辑导语:现今以至遥远的将来,我们将面对一个残酷的现实问题:人口老龄化。未来将有很多人群去关注这个群体,但是在市场上,对老年人的产品还是很少的,还存在很多问题。本文应对这个问题,展示不同适应老年人的产品设计细节,我们一起来看看。

当前,我们正面临老龄化问题的严峻挑战。

统计表明,中国的老龄化人口已达到2.64亿,且这一数据仍在持续增长,而老年人在生活、情感上都面临诸多问题。

  • 首先,老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化,无法平等地获取信息和服务;
  • 其次,年轻人涌向大城市寻找机会,老年人被迫成为空巢者,疫情的发生更使亲人长期两地分离,老人情感孤独缺少陪伴;
  • 另外,疫情的爆发也促使线下服务转为线上化,老年人不能很好适应这一转变,遇到很多困难。

但是研究发现,市场上目前没有产品很好解决了上述问题。

当下移动APP产品缺少对老年人体验的深层次关注与设计,只通过单一加大字号与简化功能等解决基础体验,缺乏通过新技术应用和更全面的适老化设计服务老年群体,老年人的需求依旧未得到关注和满足。

因此,百度基于自身雄厚的AI技术和精细、系统的适老化设计适时推出百度大字版,使老年人更平等地获取信息和服务、获得情感陪伴。

百度大字版精细系统的适老化设计研究实践

百度大字版精细系统的适老化设计研究实践

一、精细系统的适老化设计:易阅读、易收听、易操作、易理解

目前行业内缺失成体系的老年人研究报告,针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业,同时业内也缺少针对老年人系统的设计标准或设计指南。

现有无障碍设计标准针对残障人士,且部分标准只适用于PC端,不适用于老年人和移动产品。

因此在进行百度大字版的适老化设计时,我们系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料,产出了系统的移动端适老化设计标准体系,同时结合百度大字版实际场景产出了解决方案。

适老化设计包含:易阅读、易收听、易操作、易理解四个方面,后续将详细阐述。

百度大字版精细系统的适老化设计研究实践

1. 易阅读

随着年龄增长,老年人会出现视力下降、色彩感知弱、动态视觉减弱的问题。

老花眼、眼睛进光量减少等问题会导致视力下降。

眼睛晶体浑浊,晶体变黄的现象会导致色彩感知弱。视力减退,注意力降低,导致眼睛失去快速对焦的能力,动态视觉减弱。

因此为了使老年人更易获得视觉信息,我们对界面元素做了一系列的改造,使内容更易阅读。

1)增大字号

增大字号是适老化设计最有效的手段。

PC端WCAG无障碍设计标准建议字号可以放大到200%。

按不同的阅读媒介与人眼距离进行推导,移动端字号大小建议在60px-81px之间,标题、正文、辅助信息等不同信息层级采用不同的字号标准。

此字号标准经过眼动实验和用户访谈进行了双向论证,形成完整覆盖各信息层级的字号大小标准,已经在百度大字版落地。

百度大字版精细系统的适老化设计研究实践

字号与眼睛距离对照图

百度大字版精细系统的适老化设计研究实践

字号标准体系

百度大字版精细系统的适老化设计研究实践

字号应用场景

2)使用符合老年人生理、心理特征的颜色

老年人眼睛晶体变浑浊、变黄,导致对色彩的感知减弱,且研究表明老年人更喜爱温暖明亮的颜色,更希望感受到活力而不是苍老。

因此在颜色的设计上,我们通过增加色彩对比度到不小于3:1、大量使用暖色调、减少紫色和青色的使用3个手段,来进行界面色彩的设计。

百度大字版精细系统的适老化设计研究实践

颜色的选取和使用

3)提供有效的反馈提示

老年人的动态视觉减弱,对动态内容的捕捉和感知速度明显下降。

因此,对界面中短暂出现的提示性信息,我们在现有提示时长的基础上延长了一档。

例如现有提示的停留时间小于3秒时,百度大字版延长到3秒,现有提示的停留时间在3-5秒之间时,百度大字版延长到5秒。

现有提示的停留时间在5-7秒时,百度大字版延长到7秒。超出以上时间则提供适当的关闭机制,避免打扰。

百度大字版精细系统的适老化设计研究实践

提示时长适当延长

2.易收听

随着年龄增长,老年人也会逐步出现听力下降的问题,听力损失程度受地域、受教育程度、疾病等多重因素影响,且高频和低频听力损失程度更深。

因此我们通过增加音量、适当降低语速等方式帮助用户更好的获取听觉信息。

1)增大音量

针对老年人听力下降这一现象,我们适当增大了音/视频的音量。

研究表明,老年人听觉平均感知音量在67.5~75.3分贝之间,因此在视频开始播放时,我们对低于设定值的音量适当增加到约44%。

百度大字版精细系统的适老化设计研究实践

iOS系统音量分布

2)降低语速

为了保证老年人有效的接收到声音信息并进行理解,音/视频的播放速度也需要适当下降。

因此,我们减少了高档位语速,并提供了高、中、低3档语速,使老年人选择适合自己的速度,更有效的获取声音信息。

百度大字版精细系统的适老化设计研究实践

速度档位选择

3.易操作

移动应用需要通过手势交互来完成任务,但老年人的肢体运动能力也会逐渐下降。

动作精准度下降使老年人无法准确的完成手势操作,对动作的精细控制程度降低。

同时老年人相较年轻人运动更加迟缓,逐渐出现操作迟疑、犹豫或暂停,运动幅度或速度也会下降。

因此为了保证老年人可以准确的完成操作,我们采用了增大触控区、降低手指运动距离和精准度要求、提供有效的反馈提示、操作功能显性化等方式。

3)增大触控区

增大触控区是使移动应用易操作的最简单有效的方式,同时视觉设计上也需要让老年人感知到触控区增大。

我们通过对iPhone XS Max三倍屏的分辨率和物理尺寸换算,结合人拇指和食指的点击区域大小,推导出移动应用上,触控区应大于等于112px×120px。

百度大字版精细系统的适老化设计研究实践

触控区域示意

2)降低手指运动距离和操作精准度要求

老年人的肢体运动能力下降,难以完成长距离、长时间、连续、高级的操作。

因此我们集中界面的主要操作在屏幕下半部分,保证用户在使用时手指移动的距离更短,同时减少使用具有明确方向性、精准度要求的高级手势,如双击、旋转图片到正向等。

百度大字版精细系统的适老化设计研究实践

降低手势操作的精准度要求

3)提供明确的操作反馈

为了提醒老年人注意、告知其已完成操作、增强操控感,我们在特定场景增加了振动反馈,如临界值、出错、滑块、警告场景。

百度大字版精细系统的适老化设计研究实践

振动反馈

4)隐性操作显性化

为了减轻用户的学习难度,我们将所有隐性功能或需要手势操作触发的功能进行了显性化设计,如点击底bar刷新,功能隐性不易发现,百度大字版采用动态刷新图标的形式,增强底bar可点击刷新的感知。

百度大字版精细系统的适老化设计研究实践

隐性操作显性化

5)辅助用户输入

现实生活中,很多老年人不会使用输入法,而且肢体运动能力的退化也为输入带来了不便,移动设备的输入法操作区域小难以精准操作。

因此我们依托百度的AI技术,提供了语音搜索和图像搜索能力,使老年人可以方便的通过语音和图像搜索主动探索获取新知,答疑解惑,跟上时代进步。

百度大字版精细系统的适老化设计研究实践

依托百度AI技术提供语音和图像搜索能力

4.易理解

随着年龄的增长,人的认知能力也会逐步下降,老年人会出现反应慢、学习力下降、判断力下降的情况。

他们很难一遍学会新内容,也难以判断信息的真伪。因此我们通过简单直白的文案话术、清晰明确的图标设计、可信的来源设计来使内容易理解,安全可信。

1)采用通俗易懂的文案

由于老年人触网时间短、受教育程度不同,难以理解专业的互联网术语,为了帮助他们更好的使用产品,我们对专业术语都进行了简化,采用了通俗易理解的文案。

百度大字版精细系统的适老化设计研究实践

文案适配前后对比

2)提供清晰明确的图标设计

为了帮助老年人更好的理解和使用产品,百度大字版的图标设计都采用了简单易理解的图形,同时功能入口大部分采用图形和文字结合的方式,通过双重手段帮助老年人理解产品功能。

百度大字版精细系统的适老化设计研究实践

图形对比示意

3)提升信任感

在内容信息来源中或涉及经济交易的环节,百度大字版通过增加官方标签、提供官方平台保障的方式来提升产品整体的可信度,增强老年人对产品的信任感。

百度大字版精细系统的适老化设计研究实践

官方标识和保障示意

4)提供即时的帮助

为了随时解决老年人遇到的问题,百度大字版提供了暖阳热线,使老年人可以随时打电话获取专业人员的帮助和解答。

二、AI赋能,情感陪伴

由于很多年轻人去大城市寻找机会,导致产生很多空巢老人,他们情感孤独,缺少陪伴。

疫情的爆发,更使老年人在节假日也难以与家人团聚。

因此百度大字版通过语音合成等AI能力,还原儿孙亲友的真实声音,用于全局内容播报朗读,使老年人感受到至亲至爱仿佛陪伴在他们身边,缓解老年人的孤单和思念之情。

全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题,同时可以解放双手,使老年人随时随地听朗读。

百度大字版精细系统的适老化设计研究实践

语音合成

百度大字版精细系统的适老化设计研究实践

全局内容朗读场景

三、丰富内容,充盈生活

百度大字版围绕老年人的实际生活需求,依托百度的内容生态和个性化推荐技术,提供了符合老年人兴趣的图文和音视频内容,一站式满足了老年人的内容消费需求。

  • 在设计上,我们通过AI技术,对视频增加智能字幕,方便老年人获取视频信息;
  • 在内容流的操作上,通过统一的容器和流式交互,为老年人提供便捷的操作体验,使他们更方便、平等的获取信息和内容。

百度大字版精细系统的适老化设计研究实践

智能字幕

四、生活助手,便捷服务

百度大字版还提供了多种实用工具,满足老年人疫情时代和日常的生活诉求。

疫情导致线下服务线上化,因此为了帮助老年人适应这一生活方式的转变,百度大字版提供了在线政务工具。

很多老年人承担了教育孙辈的责任,因此我们提供了一些辅助教学工具,帮助他们带孩子。

更有疫情地图、垃圾分类等贴合日常生活场景的工具,使智能技术更贴近、融入老年人的生活。

百度大字版精细系统的适老化设计研究实践

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

文章来源:人人都是产品经理   作者:百度MEUX

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

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

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

B端体验细节:列表构建器的设计模式

资深UI设计者

什么是列表构建器

在了解“列表构建器”之前,我们先来了解下什么是“列表”和“构建器”。

列表是一种数据项构成的有限序列,即按照一定的线性顺序,排列而成的数据项的集合。常见的列表有新闻流、表格、事件列表、好友列表等。

在 java 中,构建器主要用于把复杂对象的构建过程抽象出来,使得复杂对象的构建可以分部件分别创建,从而根据需要构建出来非常复杂的对象。由此我们可以推演出日常中大家口口相传的图表构建器、地图构建器等实际是在阐述图表、地图等依据某种规范或规则生成此类对象的过程。

因此,我们今天要聊的“列表构建器”就是通过某种途径,达到用户所需的列表对象的过程。

在 B 端界面中,穿梭框就是列表构建器的一种展现形式,用户从较大的数据集合中挑选出符合自己所需的较小的数据集合。通常大数据集合在左边(待选区),称之为源数据区;小数据集合在右边(已选区),称之为目标数据区。

为什么需要列表构建器

B 端界面上为何会需要列表构建器这种组件呢?从实践经验来看,无外乎以下 2 点:

1. 所见即所得

源列表和目标列表在同一个页面,用户无需通过跳转页面来回查看源和目标数据,不仅提升了用户操作效率,也提升了用户操作的愉悦性。

2. 数据展示量大

列表构建器可展示的源数据空间和目标数据空间都比 select 组件大的多,这非常方便用户在界面上自由与直观地操作。对于 B 端产品来说,数据量大是不争的事实,在展示、操作、呈现上也是急需解决的问题。列表构建器的出现在一定程度上解决了某些场景下的问题。

什么时候使用列表构建器

使用列表构建器设计模式的情景为:

  1. 源数据量大,且目标数据量也大的情况下,适合使用;
  2. 不想通过滚动、跳转等方式查看源和目标数据时,适合使用。

6 种常见的列表构建器

根据不同场景下的不同需求,衍生出了列表构建器的多种形态,下面分享一下 B 端常见的列表构建器场景设计模式。

1. 基础列表构建器

What 是什么

基础列表构建器是列表构建器的基础用法,展示了数据量不大的源数据,用户通过选择后确定目标数据。

When 使用场景

当源数据量小于大约 50 条时,且选择的目标数据要直接可见时,可以考虑使用。

How 如何使用

用户直接通过滚轮查看源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

2. 可搜索列表构建器

What 是什么

展示了数据量较大的源数据,且有搜索功能,用户通过选择后确定目标数据。

When 使用场景

当源数据量较大,用户已经无法通过在有限容器中滚动鼠标快速查阅和定位数据时,可以考虑使用。

How 如何使用

用户通过搜索确定目标数据,勾选后再通过穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

3. 可排序列表构建器

What 是什么

该列表构建器可对数据进行排序,让用户将自身关心的数据前置。

When 使用场景

当目标数据量较大,用户需要将自身所关心靠前展示,进行查看、对比、分析等操作时,可以考虑使用。

How 如何使用

用户通过搜索确定源数据中的目标数据,勾选后再通过穿梭按钮将已选择的数据转入已选区;再在已选区中将某些数据进行置顶展示或前置展示。

B端体验细节(四):列表构建器的设计模式

4. 可自动穿梭列表构建器

What 是什么

该列表构建器可直接将源数据穿梭到目标数据区。

When 使用场景

当勾选的源数据无需反复确认时,可以考虑使用,这大大加快了用户的操作速度。

How 如何使用

用户点击待选区数据的添加按钮,直接可将数据添加到已选区;点击已选区数据的删除按钮,也可将数据回归到待选区。

B端体验细节(四):列表构建器的设计模式

5. 表格式列表构建器

What 是什么

顾名思义,表格式列表构建器以表格的形式展现,方便用户多维度确认数据范围。

When 使用场景

当用户选取的结果数据需要数据本身的多维度属性来确定时,可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

6. 标题式列表构建器

What 是什么

标题式列表构建器除了展现普通的数据,还有图片等信息。

When 使用场景

当源数据的展现需要更加丰富时,可以考虑使用。

How 如何使用

用户通过滚轮查看或搜索源数据中的目标数据,然后选中它们。当确认后,点击穿梭按钮将已选择的数据转入已选区。

B端体验细节(四):列表构建器的设计模式

除了以上常用场景的列表构建器设计模式,根据业务的需求大家可以在此基础上继续拓展和衍生,丰富 B 端界面的表现力,及满足业务日益丰富的场景需求。

列表构建器以及衍生案例

基于基础的常用列表构建器,不同产品根据自身的实际需求衍生出了多类构建器,我们一起来感受下吧。

1. sketch 常用功能构建器

在 sketch 界面中,工具栏被设计成只显示用户认为常用的功能。用户只需通过拖拽添加的方式从工具集合中将常用的功能添加到工具栏上。

B端体验细节(四):列表构建器的设计模式

2. sketch 常用色彩构建器

sketch 提供了常用色彩构建功能,对于设计师常用的颜色可以自行添加出来,形成一份常用色彩库。

B端体验细节(四):列表构建器的设计模式

3. 应用参数关联构建器

应用需要在关联参数后才可运行。右边为参数集合,左边为应用与待关联参数列表,用户只需要从参数集合里面选择目标参数拖拽到对应的应用容器中,即可完成应用与参数的绑定。

B端体验细节(四):列表构建器的设计模式

4. 表格列显示字段构建器

当表格列非常多时,用户可以选择列显示字段构建器来将常用列字段选取出来。如此表格会变得轻盈,且数据加载变快。

B端体验细节(四):列表构建器的设计模式

5. word 底部栏元素构建器

鼠标右键点击 word 底部栏,会出现底部栏上可展现的所有元素。用户点击勾选后,元素被展现到了底部栏上。

B端体验细节(四):列表构建器的设计模式

6. 自定义模块构建器

富途牛牛允许用户自定义界面模块,方便用户按自身的习惯查看行情和操作等。用户只需从富途牛牛提供的组件库中挑选出自己需要的,配置成自己想要的模块界面即可。

B端体验细节(四):列表构建器的设计模式

7. 选成员构建器

很多 B 端产品的成员管理模块都需要涉及到添加成员,这时候会用到选成员构建器,将成员从一个池子添加到另一个池子。

B端体验细节(四):列表构建器的设计模式

总结

列表构建器在 B 端必不可少,产品经理和设计师根据产品本身的业务诉求,基于基础的列表构建器衍生出了很多种玩法,以不断提升 B 端的用户体验

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

文章来源:优设   作者:小果

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

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

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


用户界面设计中的对比类型

ui设计分享达人

了解对比如何在设计中发挥作用,在用户界面中可以找到哪些类型的对比,以及为什么它对积极的用户体验很重要。

一般而言,“对比”一词用于描述彼此截然不同的对象。谈到视觉感知,对比度基本上与颜色或光线的差异有关,可以使物体清晰可辨。

为什么对比度很重要?因为人眼自然会捕捉到对比度。图像的最高可能对比度称为对比度或动态范围。更重要的是,对于色盲等视力不佳的人来说,对比度成为他们看到的物体的核心特征,并让他们能够区分它们。

在学术艺术中,对比处理对立元素和效果的排列,例如明暗颜色、大小形状、粗糙或光滑的纹理。在这种情况下,对比不仅可以用来吸引注意力,还可以设置情绪和氛围,在艺术品中创造多样性、视觉趣味和戏剧性。

在设计中,对比度是影响效果的关键因素之一。 可扫描性网页或移动屏幕的视觉层次结构。它使设计师能够以一种方式呈现布局,告知用户哪些交互点是重要的,哪些是次要的。对比度可以有效地吸引用户的注意力并将其吸引到特定元素上,因此它在支持数字产品的直观导航和可用性方面发挥着重要作用。

Pass-On 应用程序登录页面的设计展示了有效的颜色和尺寸对比示例,为页面构建了坚实的视觉层次结构。

UI设计中的对比类型

对比可以基于 UI 元素的不同特性,包括:

A. 颜色:这种类型是人眼最自然和最明显的对比之一;它适用于颜色明显不同的情况,例如,通过互补、分裂互补或三元方案组合,这种类型的对比最广泛地用于制作按钮和其他关键导航元素。在网页布局或应用程序屏幕中立即看到,支持清晰直观的导航。

B. 大小:这种类型的对比是基于首先引起注意的元素明显大于其他元素。

C. 形状:通过使一个元素的形状与其他元素不同来吸引用户的眼球。

D. 位置:在这种类型中,设计师以这种方式更改一个元素的位置,使其看起来不同,例如,文本片段的新段落以缩进开头。

E. 纹理:这里的差异是由于使用彼此明显区分的纹理而建立的。

F. 方向:改变元素的物理位置,使其在其他方向,这样以不寻常的方式吸引用户的注意力。

经常想到的关于对比度的第一个想法是黑白的东西。在没有阴影和多种颜色的情况下,单色图像使用对比度作为表现潜力的主要助推器。这在用户界面中的工作方式相同。更重要的是,与艺术品或摄影作品相比,对比度不仅会影响美感,而且对布局的可用性也有重大影响。因此,深思熟虑的对比度使用是使网站和应用程序用户友好且易于使用的强大方法。

排版对比

另一种特定类型的对比是排版对比,它基于设计作品文本部分所用字体的区别特征的差异。

加拿大字体设计师卡尔·戴尔定义了 7 种核心类型的排版对比:

A. 尺寸对比:它是关于由表格创建的基本图案的物理放大和用于文本的类型的重量。这里最常见的情况是使标题或标题明显大于文本。

B. 重量对比:粗体在同款较轻的对比中突出。它有助于将注意力吸引到文本的特定部分,并让用户了解它们的重要性。

C. 形式对比:这里的形式是指大写字母和小写字母之间的区别,或者罗马字母和它的斜体变体,压缩和扩展版本,与标准类型协调的脚本类型——所有提到的都可以用于戏剧性的形式的改变。

D. 结构对比:结构意味着不同类型字体的不同字母形式,例如单线无衬线与高对比度现代,或斜体与黑体。

E. 纹理对比:这是关于字体的线条如何看起来像一个整体,这部分取决于字体本身,部分取决于它们的排列方式。

F. 颜色对比:第二种颜色通常不如基本的白底黑字(或黑底白字)强调,因此必须仔细考虑需要强调的元素并注意色调值使用的颜色。

G. 方向对比:这种类型是关于垂直和水平之间的对立以及它们之间的角度。出文本块也有它们的垂直或水平方面,将宽的长线块与高的短线列混合可以产生对比。

另外,还有一些不太流行的对比,比如所谓的孤立对比,就是把一个词或词组放在远离其他元素的地方,这样就可以从人群中脱颖而出,以及对比按节奏(空间间隔)——破碎的部分形成对比并吸引注意力。

对比辅助功能

阅读上面提到的所有内容,很容易假设这里的经验法则是对比度越高,设计越好。然而,事实并非如此:以及任何其他设计方面太多并不意味着更好。虽然低对比度会使内容难以感知和阅读,但过高的对比度会引起眼睛疲劳,使交互更加困难。

根据网页内容无障碍指南 2.0,文字的视觉呈现和文字的图像应该坚持至少 7:1的对比度,以下情况除外:

大文本:大文本和大文本图像的对比度至少为 4.5:1;

装饰:作为界面组件的一部分的文本或文本图像,作为装饰没有对比度要求。

标识:作为徽标或品牌名称一部分的文本没有最低对比度要求。

注意留白

空白是留空的布局区域,不仅在对象周围,还包括对象之间和内部。空白是页面或屏幕上所有对象的一种呼吸空间,因此它极大地影响了 UI 中应用的不同类型对比度的有效性。

总结

生活充满了对比,无论你会采取什么方面。对于所有的生命,我们必须学会如何接受这一点,并尝试享受如此多样化和不可预测的生活。与现实相呼应,设计也充满对比,并尽可能多地借鉴。

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

文章来源:站酷   作者:对啊设计君

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

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

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

日历

链接

个人资料

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

存档