首页

论用户有多懒!

ui设计分享达人

满足用户的懒是用户体验的本质,利用用户的懒是探索人性的设计!





用户有多懒?


从我生活中的一个例子说起,我成功让公司洗手间的纸变得够用了。 

事情是这样的,公司每个楼层的洗手间每天只提供一卷纸,每次中午之后大多就是缺纸状态,这让人很不爽! 

洗手间装有两个抽纸盒,一个靠里,一个靠外,每次保洁阿姨,都把卷纸装在离洗手池较近靠外的抽纸盒中,这就满足了人们洗手后很方便的拿到纸来擦手。 

有一次在洗手间门口遇到保洁阿姨,我跟她说“大姐以后把纸装在里面的抽纸盒,这样用的时间长”,她笑了笑(当然我先说的是,两个都装上)。卷纸装在里面之后,结果有时我晚上加班还有。 






人有多懒,洗手后一多半人不再选择多走几步去拿纸擦手。所以在产品中和生活中,有时当你觉得有些设计不合理时,有可能是设计者的故意为之。 


人有七宗罪,其中就有懒惰,懒是人的天性,是刻在骨子里的基因。


现在互联网产品几乎都是在满足人的懒,买菜不用去超市、饿了可以叫外卖、不想看书读给你听、不想打字有语言功能等等,互联网的发展把人惯得越来越懒,也正因如此,才成就了许许多多的产品。




 产品中如何满足用户的懒  


很多产品的商业属性是满足人的懒,其实产品中好的交互设计,通常也是以满足用户的懒,而让用户感受到好的体验。 


1、简单简洁

电影《教父》中一句台词给我印象深刻, “能用半分钟看清楚事物本质的人,注定和用半辈子看透的人,有不同的命运”,这句话在产品设计中,反过来看就是, 能用一句话说清楚的事情,为什么要长篇大论,复杂不会给带用户带来价值,而是消费了他们的认知,因为用户很懒。 

下图是产品中很常见的通知设置,天猫读书的提示文案太啰嗦,用户根本不会逐字的阅读,用户看提示文案就是一扫而过,这是因为用户懒而养成的行为习惯。 



2、为用户多想一步

满足用户的懒,就是给用户制造“爽点”,在产品的交互设计中为用户多想一步,用户就会觉得用的很爽,觉得产品懂他。 

当手机截图后,在一定的时间内打开微信对话框点击加号图标,截图会自动预备发送,因为用户的操作行为大概率就是要发截图。 

iPhone手机长按微信应用图标,会弹出一些即时性强的功能入口,这大大提高了产品的使用效率,用户一旦使用一次就会爱上。 

在此之前,如果面对面互加好友,需要好多步才能打开二维码,主要还不好找到,对于陌生的朋友等待时间长了,难免会有一些尴尬的气氛。 



为用户多想一步,就是思考用户的行为目的是什么,然后在设计上为用户提供快捷的操作方式,这样就能提高产品的使用体验。


设计产品时不能总以自己惯有的思维方式去设计,要能把自己变成当下产品的用户,站在用户的角度去寻找答案解决问题。




3、的交互方式

用简单的方式,让用户轻松完成任务。一般来说,用户完成一项任务花费的时间越少,在易用性、性的体验上也就越好。 

这点在手机解锁的交互演变上能体现出来,以前手机都是密码解锁,然后有了滑动解锁,又有了指纹解锁,再到现在的面目解锁,每次的演变都是在减少用户的操作,提高了使用效率。 

手机解锁的演变过程 

与手机解锁相同的还有APP的登录演变,从繁琐的输入用户名密码登录到如今与电信运营商合作识别手机号一键登录,你会发现每一次的变化,同样是在减少操作提率。 


另外要强调的是,产品设计者要善于结合自己的产品思考问题,不能看别人有什么就加什么。 

别人家产品有第三方登录快捷方便,你也加,但其实如果不结合自己产品去思考,为什么要加,要满足什么,目的是什么,加上可能就是多此一举,制作麻烦,比如有些B端对内的产品根本不适合第三方登录。 


4、保持探索创新精神

有位产品大佬曾经说过,“用户习惯的操作路径,不要试图去改变,改变就会影响用户体验”,这观点听着似乎没毛病,但其实有问题,至少我是不认同的。 

试想一下,每次微信大改版的时候,是不是有很多人都会抱怨,“改的什么呀,用的好不习惯”,究其原因就是用户的懒惰所致,对于改变熟悉的事物,普通用户本能上就是会有排斥心理,因为他(她)懒的去适应。 

然而随着时间的推移,用户会慢慢发现原来这样的设计好像是比以前好用了。 

用户再次适应有两个原因:一是因为用户又习惯了,二是确实是产品的创新设计提高了体验。 

所以,改变操作路径,只要经过团队验证测试后,对体验和效率是可以提升的、有利的,就可以去尝试转变用户原有的操作习惯,如果是好的改版,用户很快就能适应并感受到变化后的价值。 


5、产品中用户懒的做的事

产品设计者们有必要知道的事,用户使用产品是懒惰的,用户在没有硬性需求的情况下, 很少有人更改产品的默认设置,也很少有用户看系统消息和群发的短信,所以用这两种方式推广活动,转化率极低。 

对于推送消息,不要那么频繁,除非你是新闻类产品,推送频率高用户会直接关闭推送。另外,有很大一部分用户,对于绝大多数的产品不会开推送,因为他(她)不希望被推送所打扰。 

有些功能从产品的角度希望用户使用,但如果设计上不能吸引用户,那用户肯定是懒得摸索使用,所以改变用户的懒,就得让无聊的设计变得有趣、有激励,从而吸引用户,这样才能改变用户的懒的状态。 

产品的体验设计,其实就是满足用户的懒,但其实能把懒用户通过设计手段调动起来一定是探索人性后的设计。 


 最后 


其实,因为人性中的懒,才成就了如今的互联网盛世;因为人性中的懒,人们才为省力气发明了轮子、嫌沟通麻烦才发明了电话等等,从某种程度上看,是因为人性中的懒才推动了社会的进步。 

我们从更高一个层面去思考这个问题,是哪些人创造了互联网盛世,又是哪些人推动了社会进步,绝对不是懒的学习、懒的改变自己的人,而是那些善于思考想要改变“懒”的人。


文章来源:站酷-吴星辰

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




交互设计心理学之 古腾堡原则

ui设计分享达人

写在前面


在平时的设计过程当中,你可能会有这样的疑惑,为什么在大部分APP中,当单个按钮和多个按钮同时存在时,最重要的按钮一般都会放置在页面的右侧呢?如果最重要的按钮放在左侧又有什么问题呢?按钮放在右侧的原因是什么呢?它又有什么理论依据呢?接下来带着这些疑问,开始我们今天所要介绍的内容:交互心理学之古腾堡原则



古腾堡原则的起源


古腾堡原则是由14世纪西方活字印刷术的发明人约翰·古腾堡提出,早在20世纪50年代,他在设计报纸的过程中,提出了一项原则,认为人的阅读方式应该是遵循某种习惯进行的,就像读书一样,由左到右,从上到下。这其中蕴含着什么信息呢?经过研究最终得出被后人所熟知的结论:古腾堡原则,并附上了一张图,名为「古腾堡图」。古腾堡图将画面所呈现的内容分成四个象限:


1、第一视觉区(POA):左上方,用户首先注意到的地方

2、强休息区(SFA):右上方,较少被注意到

3、弱休息区(WFA):左下方,最少被注意到

4、终端视觉区(TA):右下方,视觉流终点




从图中可以看出,用户视线很自然的会从第一视觉区开始,逐渐移动到终端休息区。整个阅读过程视线都会沿着一条方向轴开始从左到右浏览。用户会更容易关注到页面的开始与结束区域,而中间的段落则很少被关注到。古腾堡揭示了一个实用的视觉轨迹规律:阅读引力是从上到下,从左到右。


遵循古腾堡原则把关键信息放在左上角、中间和右下角,能够更好的体现元素的重要性。例如:我们平时所看到的页面弹窗、各种证明文件和合同文件等等。



古腾堡图通过对设计元素的重量与元素布局和组成方式进行调和,指导眼睛的运动轨迹。让用户迅速获取有价值的信息,同时用户对信息的熟悉程度也是影响眼睛运动轨迹的因素之一。


而随着互联网的兴起,古腾堡原则也逐渐被应用到APP设计和网页设计当中。接下来让我们来看看他在界面中的实际应用。




在设计中的应用


1.1 底部单个按钮


这种形式在引导用户操作的页面中最为常见,为了能够保证用户对内容进行阅读,所以将按钮摆放在页面底部,内容放在顶部,这样的摆放即符合用户由上到下的阅读习惯又达到了产品预期的目标。





1.2 底部垂直双按钮


上面我们提到了单个按钮的摆放思路,接下来看一下垂直双按钮的摆放思路是怎么样的。如果一个界面上同时存在两个优先级不同的按钮,并且产品希望用户对每一个按钮都有足够的关注度,那么垂直摆放是最佳选择,虽然垂直双按钮在样式上做了区分,但用户同样会停留一段时间将按钮的内容进行对比思考。


那么,按照古腾堡原则,重要的按钮应该放在页面最底部,原则上它应该是这样的:



仔细观察上图,有没有发现浅色按钮很容易被忽略掉,这样就违背了产品要保证每一个按钮都要有足够关注度的初衷,所以我们要违背古腾堡原则来满足业务需求,正如我们所看到的微信授权页面一样,




为了保证「同意」与「拒绝」这两个独立的按钮能够被用户足够的重视,并且其中的任意一个按钮不会被轻易的忽略掉,这里将「同意」按钮颜色加重,并且放在「拒绝」按钮之上,让眼睛原本垂直向下的运动轨迹产生回流的变化。



小结

原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系。




2、顶部按钮分析


由于顶部导航栏空间有限,导致按钮相对较小,并且不便于点击操作,所以这类顶部按钮适用于修改内容的编辑页面,即可以避免误触,又可以让用户关注内容本身。关键按钮至于顶部,还可以缩短用户眼睛的运动路径,让用户更容易注意到其状态的变化状态。




小结

顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容。




3、水平按钮分析


除了上面提到的顶部按钮和底部按钮,还有水平摆放的按钮,比如淘宝详情页、京东详情页、网易严选详情页的「加入购物车」和「立即购买」按钮,界面中的「立即购买」按钮都放在了右下角,结合古腾堡原则的视觉终点说明,右下角为视觉终端区域,即视觉最终停留的位置,所以他们都将与转化率密切相关的「立即购买」按钮放在了界面的右下角,让用户更容易关注到。




再比如比较常见的「取消」和「确认」弹窗样式,通常是在需要让用户确认某种操作行为时出现,有可能是提交表单、协议授权、获取用户信息等等,为了防止用户误操作,这也是提升产品体验的小细节。


平常我们所看到的弹窗,推荐按钮都是在右侧,那么将推荐按钮放在左侧会怎么样?如下图所示:






不难看出推荐按钮放在右侧后,视觉在水平方向轴上产生了回流。


弹窗的目的是想让用户点击「确认」按钮,如果将「确认」放在左侧,根据古腾堡原则,用户的视线会不由自主的向右侧移动,也就是「取消」按钮的位置,想要回到左侧「确认」按钮位置就需要移动视线,并且眼睛的运动轨迹会在水平方向轴上来回的往复运动,无形中增加了用户选择时长。如果将「确认」放在右侧,「取消」放在左侧则可以为用户提高操作效率。


在实际产品中的应用案例:




小结

当产品想要让用户进行某种操作时,主要按钮放在右边




总结


1、古腾堡图第一视觉区,强休息区,弱休息区,终端视觉区

2、原则是设计的基础,并非一成不变,要合理权衡设计原则与产品目标之间的关系

3、顶部按钮更关注可编辑的内容区域,并非按钮。而底部按钮则更关注按钮本身。并非内容

4、当产品想要让用户进行某种操作时,主要按钮放在右边

文章来源:UI中国       作者:Coldrain1

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

抓住关键点,提升App搜索设计的体验!

ui设计分享达人

可能很多人认为搜索设计很简单:在主页顶部设计一个搜索框或者搜索图标,就可以完成操作。但搜索前、中、后的体验大家有没有仔细考虑过呢?

在搜索过程中需要展示什么?如何帮助用户尽快找到他们想要的?搜索的体验如何与其他体验相联系?这是很多设计师思维模糊的地方。

在本文中,将介绍搜索设计需要了解的内容,以及在不同App和案例中的搜索体验。 

一、搜索前的体验

搜索是产品中不可或缺的一部分,无论打开哪个App, 我们都能很快找到搜索功能。搜索作为一个功能入口,简单的呈现方式对用户来说很重要。

搜索设计常见的形式有3种:

  • 顶部搜索框

  • 图标(放大镜)搜索

  • 底部搜索导航

从视觉和优先程度来看,底部导航>搜索框>图标。那么每种形式的优缺点是什么,又分别在什么时候使用呢? 

1、顶部搜索框

搜索框通常位于App主页的顶部,作为一个大的触摸目标,更容易被用户发现和使用。搜索框的组成一般包括容器、预设文字、操作按钮。

容器通常填充为白色或灰色,里面带有预设好的产品文案。但是容器什么时候用白色,什么时候用浅灰色呢?这取决于App主页的背景色。

设计准则是始终将容器的颜色与页面背景色相对比。拿谷歌地图和微信读书相比较,灰色背景下用白色的搜索框,反之亦然。

当然也有例外,Airbnb在白色背景上就有一个白色的搜索框。为什么这样设计呢?因为它的搜索框带有阴影,能和背景作出区分,也是一种可行的设计方法。

预设文字的作用是提示用户要搜索的内容或搜索方向,告诉用户可以从搜索中得到什么。在App Store中,预设文字告诉用户可以搜索“游戏、应用、故事等”,Messenger中的预设文字只有“搜索”,为用户提供功能入口。

预设文字在内容浏览类App中很常见——不仅可以展示拥有的内容类别,还能结合搜索趋势来积极地推广热门内容。比如微信读书的搜索框使用最近流行的书作为预设文字,以此提高内容的曝光率,吸引用户阅读。

操作按钮虽然与搜索相关,但摆放的位置不固定。可能在搜索框内部,也可能在搜索框两侧。哪些图标/文本按钮对搜索有帮助呢?最常见的是搜索框中的语音输入功能和二维码图标

另外一个好的搜索体验的关键是能从视觉上区分与搜索相关的图标。

2、搜索图标

如果一款产品希望用户专注于浏览内容,或者不需要频繁使用搜索,可以采用图标的样式将搜索入口放在页面顶部。例如,在Medium上用户通常是漫无目的地浏览内容,而不是搜索特定的主题;Facebook上的用户通常只想浏览朋友的帖子,很少搜索内容。 

3、底部搜索导航

与前两种形式相比,底部搜索导航离用户距离最近,更容易作为接触目标也被赋予更多的特性。

UberEats通过主页的排序和过滤,帮助用户分类感兴趣的餐厅,并将搜索作为底部导航的第二个标签,这样用户就能够不断看到和探索新餐厅。

Tiktok也将搜索入口放在第二导航中,完整的首页有利于为浏览视频的用户提供沉浸式的体验。

二、搜索页内容展示

当用户想搜索某个内容,点击搜索框之后该做什么呢?App应该如何帮助用户搜索?

用户点击搜索框时会弹出一个页面,我们将其定义为“搜索页”。搜索页的目的是让用户做好搜索的准备,对要寻找的内容进行提示,拓宽用户对要搜索的内容的看法。

弹出的搜索页帮助产品完成两个主要任务:

  • 利用视觉和交互告诉用户已经做好搜索的准备;

  • 通过页面上的内容提醒用户他们正在寻找的东西,或者为他们提供可能感兴趣的东西。 

1、视觉和交互——做好搜索的准备

当我们有一个特定的搜索目标时,我们的注意力就会完全放在搜索框(或搜索图标)上,如果突然被引导到一个新的页面,可能会带来零碎的体验。

所以要把“搜索前”到“搜索页”的转换做得更自然,让用户感觉仍然在同一个页面上操作一样。点击Facebook的搜索图标,图标通过平滑的动效扩展成一个搜索框。

无论搜索在什么位置,显示搜索框的不同状态很重要,告诉用户“已经准备好进行搜索”。以领英为例,分析一下从搜索前到搜索页面发生了哪些变化:

  • 从搜索中返回的方法:取消。这对所有的搜索体验都是必要的,可以使用取消或者返回图标。

  • 搜索框改变了填充色。搜索框从灰色变为白色,反映当前搜索操作处于焦点状态。

  • 只留下必要的图标。二维码能帮助搜索所以仍然保留,而左边的个人资料图标和搜索图标都会消失。

  • 弹出光标来鼓励用户输入文字。

在某些App中,搜索框在“搜索前”和“搜索页”中的位置可能不相同,这样做的目的是在两种体验之间进行平滑的过渡。Google的搜索框向上滑动来展示搜索内容,保证过渡动效的流畅性。

有些搜索体验不可能让用户停留在同一页面上。Airbnb的搜索需要一系列的引导将用户转移到一个全屏的流程中。

关键的地方在于,搜索页面在屏幕中间弹出,键盘向上滑动,用户可以通过无缝的交互从“搜索前”平滑过渡到“搜索中”。 

2、内容——提示搜索的信息

历史记录可以帮助用户进行有针对性的搜索,因为过去的兴趣是当前兴趣的有力指标。但是只显示历史搜索记录会将用户的注意力集中到过去的搜索上,而不是保持搜索的状态。所以除了显示搜索记录外,显示推荐内容能拓宽用户对潜在事物的兴趣。

关键点1:“没有内容可推荐”

当一款产品的功能主要是为了让用户完成某个特定的任务或达到某个目标,那么它可能就没有动机去推广任何内容。这类产品只会显示最近的搜索记录,比如Notion是一个笔记应用,只负责存储用户的笔记,因此只显示过去的搜索记录来帮助用户进行搜索。

关键点2:“在搜索前推广内容”

有的产品通过将各种内容提供给用户查看和探索,为用户实现某个目标。谷歌地图的搜索框下面有热门的标签,用户很可能会从标签中找到他们感兴趣的类别。用户点击搜索框后,谷歌就会假设用户有特定的去处,只专注于帮助他们到达想去的地方。

关键点3:“平衡内容推荐和历史搜索”

主页上的推荐内容可能很容易被忽略(因为它可能与用户的操作无关),但是搜索页上的热门推荐很少会被忽视。因为用户是带着目标主动进入搜索页,所以不会省略页面上的任何信息。

热门类别

通过在最近搜索页上将各种美食放在首位,UberEats和Doordash这类送餐App就可以引导用户尝试更多的餐厅。

热门话题

展示热门话题能为用户创造一种社区感,会让用户觉得他们与更大的社会保持联系。Quora是很大的问答平台,它不仅显示推荐的话题,还显示了关注者的数量。看到这一点,用户会想:“如果一个话题有13万追随者,那一定很好!我也想成为其中的一员。”

热门新闻

新闻类搜索具有很强的时效性,用户很清楚明天的内容将不同于今天的内容。所以有些App会对新闻或热搜进行实时排名,向用户展示最热门的资讯。

Reddit展示了当前的趋势,让用户了解的内容,Robinhood每小时都会更新华尔街关于股市的文章,这样用户就可以做出及时和明智的财务选择。

搜索推荐

通过算法,很多App都能从用户过去的兴趣中推断用户的喜好,然后不断推送相似的内容,比如淘宝的相似商品推荐。

同样的策略也可以应用于搜索页。小红书作为一款流行App,搜索页显示根据用户口味定制的推荐;Twitter的“For you”标签根据过去的搜索展示的相关内容。显示更多与用户相关的内容可以拉近与产品的距离,用户也会花更多的时间使用产品。

搜索细分

Medium的搜索做得很聪明,它将搜索页面细分为两个步骤:先点击搜索框来浏览不同的主题,再次点击会显示光标和搜索记录。通过这种分解体验,用户在搜索时获得了更多的信息量和更简洁的体验。

总结

以上是关于搜索前和搜索页的体验设计。产品的搜索体验受到多方面的影响:自身目的、内容种类、受众类型。希望这篇文章能够让你了解搜索体验的可能性,为搜索设计带来更清晰的方向。


文章来源:站酷      作者:Clippp

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

B端-表格设计

ui设计分享达人

在B端产品中,数据主要通过表格的形式展现。本文是我从实际工作出发,结合项目和过去经验对于复杂业务类的表格设计的一次总结。



1、表格的介绍


1.1表格的定义


表格(Table),又称为表,是用来收集、整理、组织、分析数据的二维矩阵。它既是一种可视化交流模式,又是一种组织整理数据的手段。


1.2表格的构成元素


通常表格的组成元素以及相关元素会有多个部分,笔者根据自己设计表格的工作经验将表格概括为容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分,其各个部分包含的相关元素如图所示。



容器:包含表格的所有内容。

筛选区:包括搜索和条件筛选方便用户快速查询定位数据,一般位于表格上方。

功能性按钮:比如常见的[新增]按钮和各种批量操作按钮。

表头:说明数据的内容,可以包含筛选、排序等功能。

表体:包含行和列数据,按列可以分为多选列、数据列、操作列。(多选列=多选框;数据列=呈现业务展现需要的信息;操作列=针对单行数据的操作按钮,比如管理、编辑信息等。)

底栏:包含数据量、单页条目、总条目、分页等,底栏数据也可以放置在表格顶部。


1.3表格的样式


1)几种常见的风格样式


a.网格型:表格有均匀而明显的分割线,边框单元格比较明显。

b.水平线型:仅显示水平线可减少整个网格的视觉噪声。

c.斑马条纹型:隔行交替使用不同底色来区分数据。

d.自由形式:移除所有分割线,通过尽可能减少视觉噪声来创建极简外观。



2)关于样式的选取技巧


网格型:对于数据之间的关系紧密(列信息较多而没有足够空间用留白来分割信息)且有对比关系的。


水平线型:它能显著减轻表格在垂直方向的视觉重量,提升用户进行大量数据对比时的速度。因此对于所有数据集大小,此样式都是最常见的


斑马条纹型:每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法。对于较大的数据集,建议使用此样式,在较大的数据集中,交替模式将很清晰,并且不会引起特定行突出显示的混乱。


自由形式:对于小型数据集,如果用户在阅读时不需要帮助就可以保持位置,则建议使用此样式。


信息内容的有效传达是表格设计的本质,就表格本身而言应该是隐型的,应该让用户注意力聚焦在核心内容上。所以,边框的颜色应非常淡,不能妨碍快速浏览。


2、表格的设计技巧


表格是为可读性而生的,一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。因此,设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。


下面我将以公司财务中台的表格改版为例,逐步说明表格中每个结构的设计。


这是改版前后样式对比图:



2.1筛选区设计


筛选区可以看作表格的导航,由搜索和筛选这两部分组成。一般搜索和筛选会同时出现,但是两者一般很少同时使用来对数据进行定位。搜索更多的是对单一或者包含某个字段的的数据来进行定位;筛选则是用来查询一类数据

根据MECE分析法,筛选区可以有以下的表现形式:


  • 常用搜索少用筛选,若筛选项多,可以选择隐藏筛选项,筛选少可以展示出来;

  • 搜索和筛选都常用,可以将搜索和筛选都展示出来;

  • 常用筛选少用搜索,筛选和搜索同时展示;

  • 筛选和搜索都不常用,展示搜索隐藏筛选。


1)搜索


在样式上,搜索可以分为简单搜索、标签搜索、高级搜索等三类。


  • 简单搜索:由一个搜索框和一个按钮组成。可以输入一个或多个条件进行搜索。

  • 标签搜索:在简单搜索的基础上加上标签,即先选标签,在输入搜索内容。

  • 高级搜索:即点击更多展开其他搜索条件,减少了更多条件对用户的干扰,但降低了易发现性。



2)筛选


根据筛选的位置,可以分为标签筛选、表头筛选两类。



3)案例小讲堂


对于数据集较大的B端系统来说,往往筛选条件比较多,都将其展示出来会导致空间占比过大,影响了用户对表格信息的获取。下面以我公司的财务中台为例,讲讲如何优化筛选区,希望对大家有所启示。


3.2.3 版本中筛选区样式



筛选条件全部展开,目的是让用户对信息进行快速的查询、过滤,以快速准确完成目标任务。但业务复杂,数据集过多少,筛选条件也相应增加(空间占比大),看起来非常冗余,不利于快速定位目标。为了平衡扫描、查询、过滤、分析等这些操作,复杂业务的表格区筛选需要进行一定的优化处理,这样才能满足满足业务需求同时,又符合用户心智模型。


方案A  整齐划一


整合筛选项,采用表头筛选+标签筛选的样式,缩减筛选区的页面空间占比。



讨论结果:虽然这个方案使筛选区的空间占比缩小,整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端:


a.数据集往往很庞大,表格不能展示所有字段,往往采用列固定的形式来呈现数据的完整性。以财务中台为例,高频筛选功能已被遮挡(如上图),筛选前需先对表格进行横向滚动,无端增加操作;


b.应无法展示全部字段,用户无法清晰的感知到筛选了哪些内容,增加认知学习成本;


c.表头中的属性并不是都可以进行筛选,用户不可感知哪些可以筛选,需要滑动表格检索。


方案B 强调主次关系


采用展开式的标签筛选样式,对不常用的筛选项做隐藏处理。但因业务场景的复杂度,高频筛选功能还是很多,没有解决本质的问题,如下图:



方案C 分状态展示(逐渐呈现)


在方案B的基础上进行了优化。提炼与流程相关的状态,按步骤显示,每一步只显示当前需要关注的内容,如图:



状态的提炼过程


1)整理每个单据的状态,理清关系



结合业务流程可以很明显的注意到,单据只有通过了审核才能收款,只有收款才能进行核销。状态是一种递进关系(审核 ➡️ 收款 ➡️ 核销)。


2)结合财务人员的工作流提炼出单据的以下几种状态,之前存在到问题(表格中单行数据的操作不一致),也得到了完美的解决。如图:



2.2功能区按钮设计


1)按钮的表现形式


建议在复杂系统设计中使用圆角矩形的按钮样式。


理由如下:

a.人眼处理圆角更容易(认知负荷说)


Jürg Nänni(Visual Perception的作者)表示,视网膜中区处理正圆形的时候是最快速的,而处理边边角角的时候则比较费力,大脑处理的速度也较慢。于是,长得圆润的圆角矩形相较于一般矩形,对于使用者来说就容易接纳许多。


Barrow Neurological Institute (巴罗神经病学研究)的研究也显示,一个物体的显著度与边角的角度呈线性变化,锐角相较于钝角要显得更明显突出。换句话说,角度越尖锐,物体就看起来越明亮;而越明亮的物体就越难以直视



如上图所示角度越尖锐,看起来越显眼,在视觉上也比较令人感到明亮,不适,大脑的认知符合也越高。


b.使相似的内容更容易被区别


举个例子,如下图所示,即便间距相同,B 排的圆角矩形辨识度还是明显比A 排的矩形高。



这是为什么呢?

首先,第一眼看过去的时候,A 排的矩形整体是连在一起的,中间找不到断点。而B 排矩形,因为有圆角的关系,所以断点很明显。



其次,两种矩形的视觉聚焦:A 排由于直角的关系,视觉聚焦向外推,整体的效果比较发散。这会使得第一眼看过去的时候,容易分不清楚哪一条边框属于哪一块矩形。反之B 排因为圆角收拢的关系,视觉聚焦向中心推,区块就比较容易区别开来。



综上所示,圆角矩形是非常有效率的容器,在复杂场景业务中(存在很多种功能型按钮),按钮采用圆角矩形样式最提效。


这里要注意,圆角不是越大越好


在相同面积中,按钮的可操作区域随着圆角的增大而递减,因此在同等尺寸下的按钮中,小圆角的按钮明显比大圆角的按钮更容易操作。


同时在实际业务中,按钮常常被当作原子与下拉框联动组成下拉菜单控件。如若使用半圆按钮则无疑增加了下拉框的设计难度并且匹配起来也会略显突兀。



2)批量操作按钮的位置思考


来看个举个例子(针对财务中台批量操作的优化方案)


现存问题




方案A  信息前置


批量操作按钮全部展开不做折叠处理,信息前置来降低认知成本,方便用户记忆。



讨论结果:对于复杂业务来说,会有很多批量操作功能,按钮很多,造成页面拥挤,进而影响用户操作体验;一个位置出现2个主按钮样式,不推荐。


方案B 沉浸式操作体验


对于一开始不可用的批量操作按钮进行隐藏,勾选激活状态,显示在筛选区。



讨论结果:方案B的阻断性强 — 无法兼顾批量操作和数据筛选功能,无法满足复杂系统的场景操作。


方案C 上内容下操作,前2个方案的优化 


不做隐藏,类灰布置于底部。勾选触发操作条件,未做勾选时,用户点击时给出引导操作提示



为什么选择方案C?理由如下:


首先,根据古腾堡原则,用户的在做表格操作的时候,视觉流是左做到右,从上到下,方案A和方案B的视觉落脚点在表格的上方,显然是不符合眼动规律的。



其次,批量操作的功能属于财务中台的核心功能点,隐藏不是第一选择,而是类置灰的特除处理(在按钮旁给提示信息)


2.3表头设计


表头在能够概括的情况下,尽量简练、准确,一般可根据上下文关系来进行减短简化,以达到节省表格头部空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。如果精简后的生僻字段难以自我解释,可以跟一个释义标识,鼠标悬停时出现该字段的详细解释,同时满足新手用户、普通用户以及专家用户的需求。



2.4表体设计


1)数据对齐方式


在数据的对齐方式上,有以下3个建议:

a.文本左对齐

b.数字右对齐

c.表头与信息内容对齐方式一致


文本左对齐,符合正常的心智模型(阅读习惯从左到右);表头与内容对齐一致,则是为了简化和降低视觉噪音,以便更好的获取数据信息。数字右对齐,有利于数据间的对比。


要注意的一个细节,例如,当列数=2的时候,由于列与列直接的间距过大,导致两者的关联性较弱,如图:



这时又该如何处理?

为了增强列与列之间的相关性,当鼠标hover在行的时候,产生高亮。这种方式可能不是最优的,但目前只能想到这种方法,如果读者有更好的想法欢迎留言。



2)数字的字体选择


建议选用:Helvetica Neue、Helvetica、Arial、sans-serif.


苹方在数字字符上,不同数字宽度不一致,导致千位分隔符不在一条线上。而Helvetica Neue数字等宽,千位分隔符有序的排列在一条线上。所以,选择Helvetica Neue作为数字字体的首选字体。数值上下对比的时候,相同位置的数字在同一条竖线上,更加容易对比。



3)对操作项进行“解耦”处理


在财务中台系统中,常常由于权限的不同或者单据状态不同这两种原因,使得每行的数据拥有不同的操作项,如下图所示:



存在的问题:


  • 当信息过载,操作项这个list非常长的话,页面将会非常拥挤;

  • 文字按钮因为视觉特征比较明显,造成了不必要的分散注意力

  • 误操作率相对较高,同样因为表格空间有限,当操作区非常靠近,很容易一不小心就点错了。


针对这个问题所出的解决方案,如下:


方案A 下拉框样式



讨论结果:下拉框中可能存在不同操作,同样避免不了误操作这个问题


方案B 错位显示




讨论结果:首先,这样的设计浪费大量的屏幕空间;其次,浪费开发工作量!因为在列表中实现一系列权限判断和操作,在详情界面中往往还需要再开发一次相同的权限判断和操作;再次,不同单据可能存在操作顺序不一样,上下移动鼠标会存在不同操作,用户代价非常高。


方案C  以不变应万变


回归『一个界面一个用户任务』的原则,列表中的单行数据只保留[查看]或[管理]操作,所有其它的单独操作都去往该单据的详情界面完成。





讨论结果:从开发的角度上看,此方案界面高度解耦,功能迭代方便,节约开发工作量;从认知成本上看,列表界面操作高度一致性,利于养成用户习惯;从操作效率上看,在详情页用户会明显确认目标单据,几乎不会误操作; 同时此方案节约了大量屏幕空间,更有利于用户对信息的获取;


4)关于表格中套表格的解决方案


场景:在财务中台中,有这样一种用户,需要对表格内的数据进行对比并编辑。

来看看之前的页面:



这样处理的不足点:


  • 1.在查看和编辑信息时,无效的信息太多。降低了获取信息的效率;

  • 2.切换单条数据时,页面出现跳动,无法快速检索到相对应的信息;


对此,在3.3.2版本中,我们对其做了相应的优化。运用侧视图(快速视图)的方式来呈现信息。一旦选择一个单据,它就会从侧面弹出的。



这个方案,它可以保持上下文,易于使用,即使是在垂直滚动视图中显示大量字段的情况下也效果良好。同时信息呈现的地方是固定的,利于检索,查找。


5)行高的制定方法


开始之前首先明确一下开发是怎么实现行高的。



从上图可以看出,开发在实现设计稿时,通常是按照行高来写的。


因此,表格行高=文字行高+上下间距。其中,文字行高可以设定为字号的1.2~1.8倍,上下间距可以设定为字号的1~1.5倍。


行高影响每行信息的易读性。除了上述的做法外,还有以下2种做法,来保证各场景下获取信息的效率与易读性。


做法1:不同分辨率使用不同行高


设计两套不同的行高,在大分辨率下显示较高的行高,给数据间提供更多呼吸的空间;在小分辨率下显示较小的行高,使一屏内可以看到更多的行高。Gmail就是这样设计的,如下图所示:



做法2:自定义行高


自定义行高为兴奋需求,可以提高用户的用户体验。所以我们可以视表格的具体情况来设计设置行高的形式,可以放置在设置按钮里,也可以在外部按钮较少的情况下展示出来。



2.5底栏设计


最后是表格的底栏,底栏也是不可缺少的一部分,承载的作用主要是告诉用户数据条数以及当前位置。分页的设计是根据不同的场景进行选择最优的设计方案。在不需要定点跳转的场景,建议建议删除跳页,删除多于的功能,使页面简洁、清爽。

                          

3、其他设计细节


3.1 空白单元格的处理


表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗?明智的做法,是无数据时用「-」来填充显示,数据为零时与上下数据单位、小数点相同的0来显示。

 

3.2减少图形元素的使用


尽量减少视觉符号的使用,因为视觉符号可能会使你的用户界面复杂,产生难以理解的内容。去除不必要的视觉干扰,例如不必要的图标、无规律的色彩等。



3.3省略 (气泡展示位置)


当列表中数据过长时,我们需要根据屏幕宽度调整列表展示方式,超过列表默认宽度的内容可以省略,通常用...表示,鼠标移入后出现气泡展示全部内容。


位置:建议展示在上方,因为我们的阅读顺序是从上到下,鼠标向下移动时不会被上面的气泡遮挡住。气泡面积不宜过大,根据屏幕尺寸控制在一定比例,一版不超过内容区的四分之一,展示不下的内容可以在气泡中增加滚动条。




4、后记


感谢阅读!本文结合了实际项目经验对表格设计做了一次总结,在具体项目中,你可能需要根据产品特性和用户需求进行调整。如果你还有什么好的想法和建议,可以在评论里留言讨论。

文章来源:站酷     作者:Hi_Nick 

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

2020-2021 设计趋势ISUX报告 · 用户体验篇

ui设计分享达人

It is ultra experience



ISUX Design Trend Report

前言

——————————

身为用户体验设计师,无时无刻不被世界上的新事物冲刷着认知——互联网红利下降带来变化莫测的商业动向、循着摩尔定律野蛮生长日新月异的新技术、各类亚文化群体催生出多元复杂的圈层文化、脑洞口味越来越独特的年轻人,甚至眼下席卷全球的黑天鹅事件......


任何一个新事物的悄悄冒头,都有可能在未知的将来影响着用户体验设计师。我们能做的是,在起初感受到微微震幅时,便沿着震感逐步寻找源头,并思考未来的发展走向。赶在变化降临前先拥抱变化。


本文通过研究近一两年科技、社会文化以及自身用户体验领域的变化,从用户体验领域关键的用户、媒介(设备与应用)、交互行为、信息与场景的五个角度出发,探索用户体验设计未来的趋势,希望能带来启发。


随着人工时代到来,过去机械的单向交互方式逐渐被打破,机器渐渐演化成了会主动“观察”真实场景,“感受”用户情感,预判用户意图并自动完成任务的贴心小棉袄。机器如何为人们提供更智能便捷的服务,未来还有非常大的想象空间。 





随着人工时代到来,过去机械的单向交互方式逐渐被打破,机器渐渐演化成了会主动“观察”真实场景,“感受”用户情感,预判用户意图并自动完成任务的贴心小棉袄。机器如何为人们提供更智能便捷的服务,未来还有非常大的想象空间。



1-1

——————————

基于真实场景推理用户意图

随着AI技术的发展,智能设备可以越来越无缝地将数字世界和物理世界嫁接起来,主动感知用户所处情境并智能提供相应服务。


在2019的 Google I/O 大会上,Google Lens 展示的AR点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。


当用 Google Lens 识别到小票信息时,可快速提取小票上的金额,且可自动弹起计算器快速帮助用户计算人均消费,节省人工计算的时间成本。


随着信息入口从数字空间延伸到周围的物理空间中,未来万物皆可为用户体验的媒介,设计师未来在设计的时候需要注意:


寻找适合的打通真实世界的切入点:在陌生语言、信息复杂或者难以处理等苛刻的环境下,充分发挥智能设备对信息智能读取、批量识别与翻译等强大能力,帮助用户完成任务;


将用户旅程的上下游串联:根据生活常识和经验预判用户行为目的,前置推荐服务;


更加系统细心地考量干扰因素:真实场景是动态变化的,需要更全方位考虑光线的强弱、多源的噪音、实体的可视性、人员和事件的打断等因素。



1-2

——————————

任务自动化,简化用户旅程


为了完成一项任务,用户往往需要借助多个应用来回切换配合,使用起来琐碎麻烦。如今应用越做越强大也越复杂,过去仅仅解决单一场景的解决方案不再适应于用户对于完成任务的诉求。


Google Assistant 的新能力 Duplex on the web 可以通过自动跨应用任务处理来简化用户旅程。只需要用户发出语音指令“预定一辆去某地的车”,助手便可自动跨邮件、日历、付款等应用调取信息、自动根据使用习惯做选择,并自动填写信息,而用户全程需要的只是在关键节点轻敲“确认”即可。


2019年随着 iOS 13 的更新,“快捷指令”推出了“自动化”能力,用户通过“if...then...”语法便可为自己的App设计一套程序,实现如:“当我回到公司时提醒我打卡”、“每天早上10点给我的女朋友发送一条表白短信”等能力,将不相关的场景动作串联字一起自动化执行,大大节省人工操作成本。


提升使用效率是用户体验设计孜孜不倦努力的方向之一。在利用新技术进一步简化用户旅程时,设计师可以充分利用以下因素:


借助语音输入:比起界面触控操作,语音交互的直达性可以“穿透”复杂界面,让设备第一时间明确用户目标;


基于用户行为形成习惯记忆:对用户长期重复的行为做分析处理,构建用户习惯模型并主动提供服务;


适当考虑专家级用户:随着部分用户的智能设备使用水平越来越高,可以考虑为专家用户提供自定义操作脚本,满足其自身的独特需求。



1-3

——————————

基于情感感知,主动理解用户需求


随着人脸识别、表情识别、肢体跟踪等技术的提升,机器逐渐学会感性语言,主动感知用户内在情感和心理需求。


2019年1月的CES展上起亚亮相的互动式“情感驾驶空间”技术,可通过传感器读取用户的面部表情、心率等反应,调整驾驶空间内的灯光、影片类型、音乐风格等,舒缓舱内乘客心情,由此提供更人性化的出行体验。

用户总是会期待更贴心的服务,设计师未来对同理心的情感嗅觉更加敏锐:


利用感性线索定位用户情绪:需要通过面部表情、特殊时间节点或者识别到的关键词,对用户情绪进行理解和定位,判断用户情感理解用户内心诉求是自由探索、趣味娱乐、或者静谧修行并提供符合用户当下心境的服务。


综合使用感性元素进行设计:通过使用线条、色彩、声音和动作等传达并唤起相对应的情感,提供更加人性化的体验。


小结

更智能的服务提供方式会让人们生活拥有更多可能性,但一旦火候把握不得当,可能就会造成对人们生活的野蛮入侵。关于如何让科技更好造福于人们,早在上个世纪,施乐帕克研究中心提出了宁静技术(Calm Technology)的愿景,认为影响最深远的技术应该是隐匿不见的,它们如纤维般融入日常生活,丝丝入扣,直至不可分辨。


随着科技的发展,设计师对新技术不应是不加克制地应用,而应该润物细无声般地提供服务,帮助人们从繁杂喧嚣的数字世界中解脱出来,将宝贵的注意力资源投放在让生活更美好的事物上。



回顾人类和机器的交流语言,从命令行界面、图形用户界面到自然用户界面,人机交互方式越来越贴合人与人之间更自然的交流方式,其背后是心智模型与实现模型的高度拟合的趋势。


在自然用户界面中,为满足新形态智能硬件对新接口的需求,以及人们对更丰富强大的交互方式的自然诉求,越来越多的自然用户界面被开发出来。语音交互和隔空手势交互便是近几年迅速发展并落地的两种交互方式。



2-1

——————————

隔空手势交互:更自由、更灵动


为了让机器更好地读懂用户的身体语言,能够感知深度信息的摄像头走进了日常手机。2019年国内外手机厂商的发布大会上,LG 手机 G8 ThinQ 以及华为发布 Mate 30 系列推出的隔空手势,可实现一些简单的诸如滑动、切歌、截屏等效果。



除此以外,隔空手势支持更加细微的手势,如旋转、揉搓等,可以更直观、更灵活的方式操控界面,让用户获得一种像魔术师用意念控制事物运作的快感。



对于隔空手势操作网上的言论褒贬不一,其中争议性最大的就是隔空手势宛如“杀鸡用牛刀”,明明可以用更加精准的手势触控,为什么还要用看似很酷炫其实精准度更低的隔空手势操作?


隔空手势并不是要替代触控手势成为主流的人机交互方式,更多是对情境式障碍场景的补充。在某些场景下,用户使用设备的条件可能是充满干扰的。想想看当你边看手机食谱边炒菜的时候、边煲剧边剥小龙虾的时候、疫情期间出门佩戴橡胶手套无法正常触控手机屏幕时.....隔空手势是不是特别好用?


每个人在特殊的场景下都有可能面临感官障碍,未来的设计也应该更多地考虑情境式障碍的场景,让用户无论身处何时何地依旧能一如既往无障碍地使用设备。




2-2

——————————

语音交互:更精准、更好玩

语音交互作为更趋近于人与人之间最自然的交流方式,近些年有许多发展的突破点。


在发展主线上,语音交互趋向更自然、更人性化、更个性化。过去反人类的一些沟通方式慢慢被“调教”。此外,多人会话场景下的技术方案日渐增多。


2019的 Google I/O 大会展示了一个视频片段,视频中的两位嘉宾相继吐槽,经常出现针锋相对难以听清的时候,这时用户可以调节音源音量选择性增强自己关注的人物声音,让另一个人“静音”。


  滑动选择音源


此外,语音交互除了在智能音箱领域广泛应用以外,也逐渐应用在广告等更多的传播媒介中,刷新人们日常使用体验。2020年2月索尼提交了一项广告播放新专利。当用户在观看电视节目时,如果出现广告,只要站起来大喊广告中对应品牌的名字,便可直接跳过这个广告。


设计师在语音交互场景下,需要留意以下几个比较容易被忽视的因素:


用户语音交互习惯培养:如今还处于培养用户语音交互使用习惯阶段,设计师需要更多地考虑应用的语音交互规则如何才能更趋近于人们日常的沟通习惯,并进一步为人们的社会习俗所接纳。


真实场景下的多人音源:在现实情境中, 在多人对话场景下将面临音源不清、穿插停顿、噪音过多等影响体验的情况,由于计算机听觉分析能力开始从单人音源拓宽到了多人音源,多人对话解决方案上还有很大想象空间。


改变传统的视听体验:在使用场景上,语音交互接口也将逐渐运用到更多的媒介上,更全面地刷新用户体验。



小结

人类拥有双手、眼睛、耳朵和发声的嘴巴,但是并不总是在每个使用场景下都能自如地使用:在安静的自习室下声音收到限制,在驾驶场景下注意力受到限制,在双手拎着东西场景下双手受到限制......但目前许多产品设计都建立在用户能完整使用感官功能这一理想化的基础上。


未来的发展趋势倾向于将视、听、触、嗅等多通道信息完美整合起来,综合使用多种输入通道和输出通道,根据用户使用场景用最恰当的方式传递服务,满足用户多方位的需求。




尽管乔布斯曾断言3.5英寸是手机的黄金尺寸,但作为人们日常内容消费与娱乐的窗口,手机屏幕毫无疑问地变得越来越大,甚至超出传统物理限制。人们对大屏享受的追求与设备携带便捷性之间的矛盾由来已久,硬件形态的变化对旧有的用户体验设计思路带来的新的挑战。


3-1

——————————

大屏幕:单手持握新挑战

屏幕横纵比越来越大,而人类的手部具有先天限制,曾经惯用的界面布局方式在高横纵比的屏幕上可能无法被大拇指无障碍全覆盖,使得越来越多的设计更加重视利用移动屏幕下半部分。


操作与信息进一步下移


高德地图、苹果地图的搜索框下移,方便单手操作用户快速激活输入框;


影视资讯平台IMDB强化底部标签栏功能,双击“搜索”tab即可激活输入框,无须艰难地触摸顶部。


即时战斗类手游皇室战争的说明卡片主要展示在下半部分,方便用户进行卡片上的相关操作。



底部导航被赋予更多能力

Pocket的底部标签栏现在兼任汉堡菜单功能,在激活状态下再次点击主页icon可选择主页上须展示的内容。


利用下滑手势代替点击

Snapchat的许多表示前后进退关系的页面都不是”返回“按钮,而是向下箭头,用户可下滑退出当前页面。







3-2

——————————

折叠屏:新形态的交互方式

为了解决设备形态和人类手部先天限制之间的矛盾,折叠屏诞生浏览并颠覆旧有的界面设计方式。


更灵活的信息布局


过去在单屏设计下,考虑到用户注意力由上到下纵向衰减,因此信息布局更多是按照优先级从上往下排序。而折叠屏中,屏幕展开后便可以开辟出更大的可利用空间,将次级页面或者较为重要的内容曝光在第二屏,对信息的布局将带来全新的变化。设计师为保证大小屏下顺畅的阅读体验,需要对信息模块在不同空间布局下的流动性有更强的把控能力。


更便捷的多任务操作


在过去的单屏体验中,用户只能将注意力完全集中在当前的界面中,一次只做一件事。但在实际生活中,用户面临的情景往往是主线任务和支线任务的频繁交错,并且根据会任务不同的性质自由调动自己的注意力重心,如边看视频边聊天、边看直播边逛街等等。在折叠屏中,设计师可以探索更多主线和支线交错进行的场景,利用折叠屏带来的更大的屏幕空间,可以让用户在不离开主线场景的基础上进行支线任务的处理,大大节约了在不同App上来回切换的操作成本。



更直观的拖拽交互


此外,随着多任务处理越来越广泛使用,拖拽交互将成为重要的交互模式之一。文本、表情包、图片、视频等交互对象,不再需要经过复杂的分享转发流程才能在不同App中流转,通过拖拽的方式可以更直观地进行交互。




双面屏互动玩法


外折叠屏在折叠状态下可转为双面屏,等于是给用户增加多一个观看视角。例如华为 Mate X 的镜像拍摄可以让被拍摄者即时获知自己的镜头影像是否满意,这一拍女友神器有望成为直男拍摄终结者。在未来更多的多人观看和互动玩法将被开拓出来。


 华为Mate X 的镜像拍摄


未来随着5G通讯技术的成长,越来越多的设备可以同时加入物联网,人们的生活将被各种智能设备围绕,设计师需要参与更多屏幕外的设计,让不同设备串联在一起协同合作,让用户能更加自在地享受科技的便利。



席卷全球的新冠疫情让数十亿用户乖乖待在家里。过去需要花费大量精力去教育的用户使用习惯因为疫情纷纷转变。云购物、云蹦迪、云赏樱、云监工......人们足不出户便可还原许多线下场景。随着用户线上和线下生活的界限进一步模糊,用户对于应用的效率和情感诉求也发生了变化。



4-1

——————————

更关注效率导向

疫情让远程办公学习需求剧增,多人协作场景越来越频繁,许多企业随之升级了电话、视频会议、文档制作等多人协作效率软件。过去仅仅考虑少人场景协作的方式不适用,设计师需要比以往更多地考虑多人协作场景下,如何对海量密集的信息进行分析处理和展示。


在学习方式上,由于线下学习转移至线上,学生群体对于娱乐向软件也有了效率诉求。为了顺应用户诉求变化,2020年5月QQ推出学习模式,屏蔽娱乐性的内容推送,让学生更专注在学习上。



4-2

————————————

更注重缓解社交疏离感


除了效率诉求急剧提升以外,随着长时间的线上学习与办公所产生社交疏离感和缺失感,人们对于线上学习工作的情感化诉求也进一步增强。


2020年推出的plagi远程办公软件支持设置每个人的avartar形象,让大家在远程办公时依旧能时刻感受到彼此的存在。在完成任务时还可以放鞭炮庆祝,让员工能感受到亲密无间的线上办公体验。


设计师需要更加关注如何让线上生活进一步与现实生活圈和时间线接轨,通过拓展真实社交下的更多伴生行为让线上也能还原线下的真实场景细节和互动体验,以弥补用户对真实社交的缺失感。



4-3

——————————

加速人和信息的强连接


疫情的发生加速了人与信息之间的连接。人们越来越习惯将自身的身体资料、心情状态等信息沉淀在智能设备上。


为了做好广大市民群众的健康监测服务,辅助疫情防控工作,微信和支付宝在2020年年初都上线了健康码服务,不同颜色的健康码代表人们不同的健康情况,市民出入特定场所都需初始健康码。



随着人的数据化越来越深入,个人身份信息的线上化在各平台上将成为更加通用的能力。设计师需要考虑如何更自然更低成本地将线下动态变化的资料信息线上化,更有效地对用户信息进行加工处理,以及记忆用户的使用习惯和行为,以便帮助用户更地完成任务。


疫情的出现加速了线下生活线上化,短短时间内我们看到日常习以为常的应用为响应疫情下的特殊需求纷纷出现改造,钉钉、QQ群被改造成上网课、批改作业的地方,医疗卫生公众号开辟了实时疫情播报与辟谣通道,无接触设计和服务需求异常突出......这也启发了设计师需要保持对突发事件的敏感力以及应急能力,在日常生活中留心思考,为日后突发事件提供充足的场景支撑。




在汹涌的资本语境下,互联网设计师裹挟在商业驱动的结果导向中狂奔,对设计的伦理和责任鲜有发声,但伴随着互联网红利退潮,发展放缓,狂奔之下的人本问题也逐渐浮出水面。在大趋势下,UX设计师需要培养自身设计对伦理和责任的敏感度,在满足商业目的外,重拾节操,为多群体,为大社会设计,更加注重“以人为本”。




5-1

——————————

更包容性的设计

包容性设计师指在做设计产品的时候,考虑到各类用户的诉求,输出具有包容性的设计方案。包容性设计依旧是2020年设计主题之一,伴随着互联网产品全球化,在通用性和包容性上也提出了新的要求。




为身障人士设计


三星在2019年针对东南亚市场推出了一款让聋盲人士和健全人实时交流的app:Good Vibes,盲聋人轻击屏幕输入摩斯电码,预先连线好的另一台手机就会显示从盲聋人发来的短信。健全人用普通的文字输入回复,在盲聋人这一端就会翻译成摩斯电码、以手机振动的方式读出短信内容。

   GOOD VIBES宣传视频


饿了么:在饿了么送货骑手中,约8%受色盲色弱的困扰(全国男性群体中红绿色盲色弱占比达8%-9%,饿了么骑手男性占比90%),为此饿了么设计团队在2019年对app的进行了重新设计,包括使用WCAG无障碍色彩对比度,以及无障碍色盘,以及调整字阶,使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。


饿了么UED:《为骑士创造平等 — 配送 App 的包容性设计》



跨年龄段设计


谷歌助手礼貌功能 ( Google Pretty Please ) :开启谷歌助手礼貌功能后,如果使用者在下达指令的语句中包括“Please”,谷歌助手会对礼貌的请求表示感谢,以此培养孩子的礼貌言行。

Google Pretty Please功能宣传



Swift Playground:当10后小学生VITA君的编程课被“可敬的发量”刷满弹幕时,Swift playgrounds功不可没,这款为儿童新手学习编程的软件,用趣味的游戏方式为4岁以上低龄用户提供了一个学习编程的低门槛平台。



为性别平等而设计


苹果emoji回看历年苹果emoji的更新,从肤色平等,到性别、性向平等,再到为残疾人设计,2020年再为跨性别者增加新表情,性别平等依旧是包容性设计中重要一环。



Airbnb插画:爱彼迎在插画系统中,也为不同肤色,不同职业,不同性别,以及身障人士进行了人物的绘制。






5-2

——————————

关注用户隐私

2019是互联网科技隐私问题沉浮的一年,国外有Facebook因泄露隐私收到史上最大罚单,国内则打响了“人脸识别第一案”。笼罩在隐私信任危机下,个人信息和数据立法突飞猛进,美国推动《加州消费者隐私法案》,国内也将在2020年出台《个人信息保护法》和《数据安全法》。


MIUI12推出隐匿面具功能


Android开放生态导致的权限隐私问题一直被用户所诟病,某些APP存在用户不授权就无法使用情况,针对这一情况,MIUI12推出了隐匿面具功能。当用户在开启某些APP要求授权权限时,可以选择空白通行证进行授权,从而保护用户真实信息。


   在MIUI12的更新中,还推出了照明弹、拦截网两项隐私保护功能


iOS 14剪贴板提醒


在iOS 14的更新中,保护用户隐私方面进一步升级。

其中剪贴板提醒设计很贴心,当用户打开应用,如果该应用读取了你剪贴板的内容,会在系统顶部弹出提示,用户能在第一时间意识到剪贴板内容被读取,帮助用户更好的保护自己的隐私内容。




5-3

——————————

健康的数码生活方式


科技的发展是一把双刃剑,互联网产品的发展给用户带来便捷和沉浸体验的同时,也使得用户沉溺于科技所带来的惰性和投食之下,逐渐丧失了对真实生活的把控权,被科技绑架。


数字福祉(digital wellbeing)近年被频频提起,指科技产品需要权衡好数码产品和真实生活之间的平衡,防止数码产品过渡分散用户的注意力而影响生活质量。


Android Q 专注模式  Google Android Q Focus Mode


Android Q的更新加入了专注模式,用户在专注模式下,可以在系统层面快捷地关闭使你分心的应用,让你聚焦于更重要的事情。



防沉迷系统升级


推荐技术的进步,产品体验的升级,给用户带来了更合胃口的菜式和沉浸体验,但同时也被冠上了“电子海洛因”的称号。游戏或者内容产品的防沉迷系统依旧会是数字福祉下不可避免的趋势。


王者荣耀在2020年升级防沉迷系统,对青少年的娱乐时间和点券充值的限制进行了进一步升级。承接话。B站在2019年推出青少年模式,在该模式下,使用时长和内容推荐等做了定制化处理。






2020年的UI设计趋势,一方面是对往年风格的衍变和细化,另一方面,在扁平克制的界面风格盛行后,设计师们向往更自由、更突破的视觉表达。



6-1

——————————

深色模式


2019年iOS 13深色模式姗姗来迟,紧接着大厂APP相继推出此功能。在2020年,深色模式会继续普及外,也会在可视性和实现成本方面有更多细节打磨和研究。





6-2

——————————

新拟态

设计趋势的发展是螺旋式上升的,在扁平化设计流行之后,对物体的拟真再一次回归设计圈,新拟态以一种对旧拟物风格的再创新,重新流行起来。


新拟物风格(Neumorphism)缘起于设计师Alexander Plyuto发布在dribbble的一组作品,以投影重新对扁平界面进行了塑造,模仿出类似浮雕的视觉效果,感受耳目一新,引起大量设计师相尽模仿。


新拟态的实用性和可落地性有待商榷,但是作为一种新的风格受到设计师拥趸,也不失为下一波风潮到来前的灵感缪斯。



WWDC2020对mac OS的更新也重新定义了新拟态设计语言,在mac OS新系统Big Sur中,图标的设计增添了轻微的渐变、投影、高光,以此来营造图标内元素之间的纵深关系。




6-3

——————————

多彩配色


在扁平简洁UI风格盛行之后,丰富的色彩依旧是设计趋势之一,大面积色块,碰撞配色,带来更具冲击感的视觉体验。





6-4

——————————

字体装饰化


UI界面逐渐扁平,色块图标弱化,为突出页面重心和内容,iOS 11在界面标题上使用更大的字号,更粗的字重。近年在大标题的风格衍变下,文字在传达信息外,也开始有了装饰性作用,采用超大字体,成为页面排版美化的一部分。





6-5

————————

更大圆角

大圆角的风格会继续延续,相较以往,卡片的处理圆角会更大,随之带来的是多的留白处理,结合大字号,带来更透气通透的视觉感受。



Mac OS Big Sur的界面相对旧版本采用了更大的圆角;系统图标的设计统一成圆角矩形。





6-6

——————————

更丰富的插图


UI插图的丰富体现在样式和内容上,样式上开始3D化,内容上更注重插图叙事的表达。


3D插图


3D图形往年更多运用在动态影像或运营类设计中,随着3D的普及运用,UI插图也会迎来3D化,给用户带来更立体,更新鲜的视觉感受。




讲求叙事表意


相较于往年追求形式的UI插图,新趋势下的插图更讲求功能性,每一副插图都承载一定的作用——传达功能信息或透传品牌情感;同时插图更讲求画面表意和情节,给用户叙事性的视觉体验,增进用户和产品之间的情感联系。




插图组件化


插画的流行,随之而来的是成本的水涨船高——一套系列插图为保持风格统一,往往由唯一设计师绘制,同时为兼容各类场景,设计师往往要绘制多张。


为解决插图的成本和效率,插图开始以组件化的方式进行绘制——插图设计师将插画进行拆分绘制——不同人物,不同场景,不同物件等,再通过组件化的拼接合成,使用组件的设计师可以根据需求场景自由组合,也避免了风格不统一问题。


设计师Pablo Stanley将日常绘制的插画制成一套矢量插图组件库,将人物分为:半身、全身和坐姿3大类。通过不同表情、发型和服装可自由搭配出近60万种组合。


Pablo Stanley人物插画系统




6-7

————————

多维度动画表现


新趋势下,动画一方面回溯复古线描手绘风格,另一方面追求更三维的体验,同时帧率进一步提升,追求更流畅的视觉感受。


手绘动画


手绘插图是往年的热门,其随性自然的笔触,能给用户带来亲切的感受,在新的趋势下,动画的加入赋予手绘插图一份灵性和趣味。


3D运动


Google Material Design通过卡片投影层级和二维动画规律,赋予扁平界面Z轴的纵深感。随着3D的普及流行,新趋势下的界面,界面的运动从二维走向三维,表现出3D场景下透视感。



高帧率动画


高帧率影视从线下电影院移步到线上流媒体,手机高帧率屏幕从90Hz到120Hz逐步升级,用户对画面流畅的定义一再刷新,UI动画的帧率升级也会是新的一轮趋势。


Telegram的表情采用了高帧率动画,给用户更流畅的视觉感受。








体验的持续升级,产品的高速迭代,对UX设计师的设计师效率提出了更高的要求。的设计方式是一个永恒的趋势。




7-1

——————————

从本地文件到云端协作


传统的文件交接方式效率低下,导致设计师之间信息不对称,最终影响产品的一致性体验。近些年在线设计协同工具发展迅速,从UI设计、 设计交付以及组件协同等环节上给设计师提供更加实时的协作体验,获得大量UX设计师的簇拥。在2019 uxtool的设计工具调研中,在线设计协同工具佼佼者figma以其协作和性能优势,大有追赶sketch之势。


随着团队对设计效率要求的提高,设计文档从本地走向云端协作是不可逆趋势。不过设计工具的迭代是需要成本的,尤其在大型设计团队,设计工具需要渡过阵痛期来完成迭代,进而提升设计效率和体验一致性。



7-2

——————————

科学有效的设计系统


UX的发展,从早期的静态规范到当下的动态设计系统,是为解决产品迭代增速后带来的设计效率和产品体验问题。商业驱动下的产品迭代速度有增无减,设计系统依旧会是未来几年的设计趋势之一。


这里说的设计系统不是广义上的设计系统,而是在互联网设计的发展中,对组件化设计逐步迭代升华的一套设计协作方法:


“设计系统(Design systems)是一组为了共同目标而服务的内在相互联系的设计模式和多人协同执行的方法。”(引自《Design systems》,Alla Kholmatova,C7210翻译)。


设计系统历程衍变


组件化的发展历经规范文档到UI组件,再到设计系统,形态从最初对设计一致性的指导规范,到对产品研发流程的规范,以及产品设计价值观的输出,当下的设计系统以集大成者形式影响整个产品的设计形态。


设计系统的结构见下图:



设计系统的求同存异


设计系统并非一成不变的,他是一个动态进化的系统,会根据团队性质、产品特性在内容上有所区分——比如大团队更应该大而全,小团队更倾向小而精;成熟产品的设计系统更倾向于打造完整闭环的合作流程机制,新产品的设计系统应该以小为始,快速迭代……


随着产品的垂直化,细分化,设计系统的趋势会是在趋势大同之下找到适合产品和团队自身的形态和节奏。


Material Design是一个包含了指导规范、组件,以及设计开发工具的自适应性设计系统。


它作为平台型性设计系统,更为大而全的规范了整个生态系统的设计风格,以及提供工具让研发者能快速产出符合规范的产品。


  Google生态庞大繁杂,Material Design更为全面


Ant Design作为一个为to B产品提供解决方案的平台,更多从设计可用性和完整性考虑设计系统的搭建。


Ant Design通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验


QQ作为一款面向95后的2C社交产品,其设计系统Q语言从风格调性上对设计进行规范,同时给予设计师一定的自由度;也考虑到QQ内兼顾多个产品,以及界面主题样式,对基础组件的使用场景和代码进行了规范,方便设计和开发敏捷开发。


Q语言,给予产品的自由调性之外,也针对主题和基础组件进行了规范


每个产品和团队都有自身的特征,设计系统的建设也应该有的放矢,没有可照搬的标准答案,在大方向下找到适合自身的解决方案才是的可行之道,将效率最大化。


科学有效的优化迭代


组件是设计系统中的重要组成部分,但是以往静态的、孤立的协作方式使得组件的更新迭代滞后和阻塞。随着设计系统的发展,设计师组件化思维的普及,组件的更新需要更科学的方式进行管理。


Figma在2019年推出的Design System Analytics功能,组件设计师可以借此查看组件的使用情况,包括引用次数,解组次数等,并可以生成组件使用情况的曲线趋势图,以数据的形式,科学地推动组件的优化迭代。


 1.选择分析的时间段;2.组件使用的次数曲线图;3.团队使用情况;4.所有组件使用情况



后记

未来的用户体验会出现什么新趋势?人工智能等算法的发展、5G技术普及、新的智能设备形态、新的信息处理技术、新一代用户的喜好和口味......这些往后或将影响用户体验发展的走向。未来用户对体验的要求只会越来越高。


用户体验设计师需要了解更多的技术动向,但安身立命之本还是让用户真正受益:立足于用户真实使用场景,在理性价值层面上,打造可用、易用、的设计;在感性需求层上赋予情感上的愉悦性,在反思层面赋予意义价值。




文章来源:站酷    作者:百度MEUX

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



UX TRENDS | 注重隐私的用户体验设计

ui设计分享达人

用户隐私安全在产品设计中是很重要的一个环节,本文从用户体验角度切入,从匿名模式、减少永久性和减少公开性三个方面展开分析。



我们先看⼀组来⾃⽪优的2019年6⽉的调研数据:70%的美国⼈认为,与5年前相⽐个⼈信息变得更不安全。尤其是⾼学历⾼收⼊群体。由此可⻅⽤户对个⼈信息数据的隐私担忧⽐以往更甚。



⽤户隐私安全很重要,涉及的范围和⻆度也很多。本次的分析从⽤户体验⻆度切⼊,涉及如下三个⽅⾯:

  1. Incognito Mode匿名模式;

  2. Reducing Permanence减少永久性;

  3. Reducing Publicity减少公开性。



01 匿名模式


下图是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切换,从交互体验上来说有如下⼏个特点:

  1. 统⼀在右上⻆;

  2. 可以便捷切换⾄匿名模式,反过来也很容易切回登陆状态;

  3. 匿名模式的状态提示,例如YouTube 在匿名模式下在界⾯底部有⼩字提示“您 当前处于匿名模式”。


匿名模式不是最近才流⾏的功能,最早提供隐匿模式的是苹果safari浏览器,早在 2005年就⽀持了匿名模式。Chrome浏览器在2008年就开始⽀持此模式。虽然由来已久,为什么到了2020年,匿名模式依然是国外互联⽹⼀⼤趋势呢?


我们看⼀组数据:

这是来⾃DuckDuckGo 2019年9⽉的调研(DuckDuckGo是美国的⼀款不记录⽤户⾏为保护⽤户隐私的搜索引擎)。样本来⾃美国、英国、德国和澳⼤利亚的成年⼈⽤户,共计3,411⼈的调研得出。各国⽤户对使⽤搜索引擎的个⼈隐私安全⾮常在意(是否搜集个⼈的数据和记录搜索⾏为)。

2020年5⽉DuckDuckGo⽇均搜索次数为6200万。对⽐看2019年11⽉底⽇均搜索次数4900万,2018年10⽉是2900万。

最近⼏年的持续活跃度⾼幅增⻓证明了不记录个⼈隐私的搜素引擎越来越受到⽤户的⻘睐。

国内,头条、UC浏览器在搜索框输⼊状态也提供了“⽆痕浏览”⼊⼝。

不仅是搜索引擎领域,保护⽤户隐私也成为Facebook最重要的战略⽅向之⼀。Facebook CEO Mark Zuckerberg在2019年 F8开发者⼤会上喊出“THE FUTURE IS PRIVATE”。2019年3⽉Mark Zuckerberg发⽂,主题就是《聚焦于保护隐私的社交⽹络》。



02 减少永久性


我们先看国外社交媒体Stories(⼩故事)产品形态的流⾏。

⼈们总是对于所分享的内容永远记录在⽹上感到担忧。Stories24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享。

Stories由Snapchat⾸创,由 Facebook发扬光⼤。早在2019年4⽉,Facebook+Messenger Stories, Instagram Stories⽇活⽤户数就突破5亿。 2020年2-3⽉LinkedIn,Twitter也先后宣布将上线类似功能。



03 减少公开性


来⾃⽪优的调研报告:41%的美国⼈经历过⽹络骚扰,最常⻅的就是在社交媒体上。23%的⽤户最近经历的⽹络骚扰来⾃评论区的评论内容。27%的⽤户经历⽹络骚扰后决定不再发布任何内容。

我们以限定评论互动的公开性为例:

2020年5⽉Twitter上线了新的评论功能,可以限定谁可以回复帖⼦的功能,提供了三种选项:谁都可以评论,只有被关注者可以评论,只有被提及者可以评论三种公开度的限定。

Instagram也在测试“评论限制”新功能,批量屏蔽/限制评论。⽬前已经上线的⼀个例⼦:⽤户(评论发布者)如果发布的评论含有攻击性敏感词,发布前伴有提示,提醒评论含有攻击性敏感词是否真的要发布。


注重隐私提供仅好友可⻅/仅⾃⼰可⻅/仅作者可⻅/等多重维度的隐私设定有助于⽤户更安⼼地参与互动。

另外⼀个例⼦是付费频道会员:付费频道会员-限定频道的公开性让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员、会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。

我们主要看YouTube的频道会员案例:

YouTube有两种会员模式。⼀种是YouTube整个平台的付费会员,去⼴告,看原创美剧影视,消费⾳乐,可下载内容的模式。第⼆种模式是Youtuber个⼈频道付费会员,吸引忠实粉丝加⼊。我想说的就是第⼆种。


为什么⼤V⽹红有意愿开通频道会员?


除了获得忠实粉丝收⼊变现的商业价值以及付费频道会员可以为忠实粉丝提供各种专属功能,背后也和⽹红⼤V对个⼈隐私顾虑有关。

⽹红⼤V在完全公开的社交⽹络上需要始终保持⾜够克制谨慎,避免引起争议。但在忠实粉丝付费频道专属会员群中,⽹红⼤V会减轻隐私顾虑,更加回归⾃我。

⽐如在频道会员中发布更多与个⼈⽣活相关的内容,表达更多不便在完全公开的社交⽹络中的想法和感受等,因为忠实粉丝通常更具包容度,更不容易引起争议。


YouTube频道会员费⽤可以从三种会费(按⽉)区间选择,⽀持多选:

  1. 低阶 Low Levels $0.99~3.99;

  2. 中阶 Medium Levels $4.99~14.99;

  3. ⾼阶 High Levels $19.99~49.99;

频道会员功能在2018年开始测试,⾯向粉丝数过10万的YouTuber开放。



以上综述,我们可以说:


1.匿名模式:

虽然匿名模式由来已久,但仍然是当前的⼀⼤基本⽤户体验设计趋势,尤其是匿名模式的切换便捷性⾮常重要。


2.减少永久性:

Stories⼩故事24⼩时消失缓解了⼈们的隐私顾虑,这让⽤户更安⼼地⾃然分享,已经成为国外社交媒体平台的必备功能,Facebook, Instagram平台的最主要、最具影响⼒的功能之⼀。


3.减少公开性:

⽤户总是对在社交媒体平台发表评论有所顾忌,限定评论的公开性能够有助于促进⽤户发帖表达,其他⽤户也可以更安⼼地参与互动。


付费频道会员可以限定频道的公开性,让内容创作者减轻隐私顾虑不仅能获得⼴告收⼊,也能得到来⾃会员会费的收⼊,形成“忠实粉丝”社区,有助于内容⽣态的社区化建设。


从UE⻆度,我们可以为频道会员提供专属身份设计例如专属徽章,专属表情等。

THE FUTURE IS PRIVATE, 注重⽤户隐私的体验设计越来越重要!

文章来源:站酷    作者:百度MEUX

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



2020年的8种UI/UX设计趋势

ui设计分享达人

世界和技术正在飞速发展,每年都会影响设计趋势的走向。作为设计师,我们需要了解现有和即将到来的设计趋势,不断学习,改进和扩大我们的知识储备,以便与时俱进。

根据研究、经验和观察,我们非常仔细地选择了2020年应该注意的8种UI / UX设计趋势。那就让我们开始吧~


简介:2020年8种UI / UX设计趋势


1. 动画插图

通过对插图,或者让插图进行运动,可以使我们的设计脱颖而出,并使其栩栩如生-增加额外的细节和个性。


2. 微交互

微交互完美证明了:着重于细节和发扬这些细节可能会大大改善你的APP的用户体验,并将使之更高能/更。


3. Web和移动界面中的3D图形

新的Web浏览器功能为3D图形打开了大门,作为设计师可以在现代Web和移动界面中创造和实现惊人的3D图形。


4. 虚拟现实(VR)

游戏行业常将创新、和新技术带入产品设计中。


5. AR技术

在AR空间中,有无数令人兴奋的体验机会。AR的UI设计将成为2020年的主要趋势之一,因此,作为设计师,我们应该做好准备,并主动在创建AR体验时学习新的工具和原理。


6. 新拟物

VR / AR技术的增长,以及最流行的设计平台上显示的那些优秀的设计告诉我们:设计趋势可能会使拟物设计在2020年卷土重来,但这一次,它会加入更多现代时尚。


7. 不对称布局

非对称布局有很大的创造空间,不过创建优秀的非对称布局需要我们有一定的经验和时间去处理它。


8. 讲故事

讲故事就是以最佳的信息和创意方式将数据传输给用户。讲故事也是一种出色而有效的营销工具,可以极大地提高你的产品/服务的销售额。




1. 动画插图

插画在产品设计中已经存在了很长时间。最近几年的发展更是令人瞩目。插画作为非常流行的设计元素,为我们产品的整体UX添加了「自然的感觉」和「人性化的感觉」。插画也是吸引注意力的焦点:通过对这些插画进行动效的展示,可以使我们的产品栩栩如生,并使它们脱颖而出-增加更多的细节和个性。

欢迎来到我们的商店!



入职动画



动效展示的另一个好处是可以吸引用户的注意力并使用户与您的产品互动。动画也是讲述您的品牌、产品或服务故事的最有效方法之一。




2. 微交互

微交互几乎存在于每个APP或网站中。每次打开喜欢的APP时,你都会看到它们。例如,Facebook有大量不同的微交互,其中「赞」功能就是一个很好的例子。虽然有时我们甚至不会特意感知到它的存在,因为它非常明显的、自然的「融合」到用户界面中去了。但是如果你从界面中删除它们,你将很快意识到,某些重要的功能丢失了。

菜单切换关闭动画



标签栏活动动画



一般来说,在UI / UX设计中,有时即使很小的更改也可能产生巨大的影响。微交互完美证明了细节和发扬它们可能会大大改善你的APP的整体用户体验,并将其置于更高能/更的层次。在每一年,每种新设备都会带来新的创造全新的微交互的机会,当然,2020年也不例外。


















3. Web和移动界面中的3D图形

3D图形几乎无处不在-在电影,视频游戏,街头广告中。3D图形是几十年前才被引入到产品设计中的,从那时起,它已经得到了极大到改善,并得到了高速的发展。移动和网络技术也在快速增长。新的Web浏览器功能为3D图形打开了大门,我们作为设计师可以在现代Web和移动界面中创建和实现炫目的3D图形。

3D翻转菜单



汽车健康报告用户界面



创建3D图形并将其实现到Web和移动界面中需要一些特定的技能和大量的工作,但是通常结果是非常有意义的。

Apple AirPods Pro登陆页面



3D图形以一种更具交互性和吸引力的方式来展示产品或服务:例如,可以以360度演示方式查看3D图形,从而改善了产品的用户体验。

在2020年,更多的品牌将使用3D模型来展示产品或服务,打通线上线下,以模拟现实世界(店内)的购物体验。



4. 虚拟现实(VR)

2019年对于VR来说,是重要的一年。在过去的几年,我们见证了VR技术的发展和其不可思议的效果,其中大部分是在游戏行业。游戏行业通常会首先在产品设计中引入创新和新技术。研究证明VR也不例外,2019年Oculus Quest推出后,其他行业也尝试了很多可能性。Facebook首席执行官马克·扎克伯格(Mark Zuckerberg)已经测试了令人兴奋的手部交互功能,并于2020年初正式宣布了Quest的手部跟踪更新!

Oculus Quest-手互动功能



PlayStation虚拟现实网站设计



索尼和微软将在2020年发布其新一代游戏机。这些将为虚拟现实技术带来很多机遇和增长空间。




5. AR技术

过去几年中,我们看到了AR的许多发展和改进。世界领先的科技公司在AR开发方面投入了数百万美元,我们应该期望在2020年行业会扩展和发展此项技术。甚至苹果公司也推出了自己的AR工具包ARKIT 3,以帮助设计人员和开发人员构建基于AR的产品。


ARKit 3 苹果


公共交通应用



Nathan Riley的植物之家AR概念



在AR空间中,有无数令人兴奋的体验机会。AR的UI设计将成为2020年的主要趋势之一,因此,作为设计师,我们应该做好准备,并主动在创建AR体验时学习新的工具和原理。




6. 新拟物

一般来说,拟物设计是指以逼真的样式/方式创建的设计元素,以匹配现实生活中的对象。VR / AR技术的增长和最流行的设计平台(Dribbble,Behance等)上显示的设计趋势显示:拟物设计可能会在2020年卷土重来,但这一次,它会加入更多现代时尚。同时有了一个略作修改的名称:“新拟物” (也称为Neumorphism)。

Skeuomorph手机银行的黑暗模式



音乐播放器



睡眠周期应用程序



我们可能已经注意到:「新拟物设计」代表非常详细和的设计风格。高光,阴影,发光都被运用在设计中去。他们对细节的关注令人非常印象深刻。这已经启发了来自世界各地的许多设计师,并且很有可能成为2020年最大的UI设计趋势。




7. 不对称布局

在过去的几年中,我们注意到产品设计中大量使用不对称布局。基于  传统/模板 的布局渐渐消失。2020年将依旧如此,因为这一趋势将继续保持。正确使用非对称布局会为我们的设计增加很多特征、动态和个性,或许它们将不再拘泥于模板。


Limnia高级珠宝首饰网格



卡琳时装商店



创建非对称布局时、有很大的创造空间。尽管创建成功的非对称布局需要一定的经验和时间、将元素随机放置在网格上当然是不行的)  此外,应谨慎使用和实现它们-因为我们要始终牢记用户的需求:我们不希望用户使用我们产品的时候感到困惑。



8. 讲故事

故事在产品设计中的用户体验中扮演着非常重要的角色。可能会在登录页面上经常看到它们,作为对品牌,产品或新功能的介绍。讲故事就是以最佳的信息和创意方式将数据传输给用户。这可以通过「版权(品牌)保护」与「强大而平衡的视觉等级」(印刷术,插图,高质量照片,大胆的色彩,动画和交互式元素)混合来实现。

讲故事就是以最佳的信息和创意方式将数据传输给用户。 



「本周青年实验室」页面故事动画


讲故事确实有助于在品牌和用户之间建立积极的情感和关系。讲故事还可以使您的品牌更令人难忘,并使用户觉得他们是我们产品或服务的一部分,因此他们希望与他们建立联系。话虽如此,讲故事还是一种出色而有效的营销工具,可能会大大提高您的产品/服务的销售额。作为非常成功的工具,讲故事将在2020年继续并扩大。

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

文章来源:站酷  作者:一个辛普森



超全面!「无障碍设计」指南

ui设计分享达人

你知道吗?视力,听力和行动能力完全健康的人,可以轻松地读写,可以有效执行多任务,并且始终可以正常工作的人约占总人口的50%?其余的人都是戴着眼镜或有色盲,手腕或耳朵受伤,生活在嘈杂的环境中或网络信号质量差,忙碌或忙碌中,阅读障碍或有注意力障碍等。


这意味着大约一半的用户可能很难使用我们的产品或浏览我们的网站。因此,我们可能错过了提高用户满意度并扩大受众范围的机会。

不过在设计阶段实施一些简单的原则就可以改善交互和整体用户体验,极限设计可以为所有人带来价值,我们称之为“包容性设计”。


什么是包容性设计?包容性设计考虑了尽可能多的人的需求和能力,而不仅仅是针对残疾人。它认识到我们的需求会随着时间和环境的变化而变化,因此它会预测错误,挣扎和不同的交互方式。它的目的是在问题发生之前解决问题,提高标准并改变良好产品设计的标准。


包容的用户界面是善解人意,有意识且可访问的。年龄,性别,教育程度,财富和能力等不同特征,在不同环境中生活或工作,获得技术水平不同的不同人群可以舒适地使用它。


我们将使用POUR作为在用户与界面之间创建简单,轻松,快速交互的参考。


POUR代表

  • 可以理解:数字内容可以轻松地以不同方式进行解释或处理吗?

  • 可操作:数字产品能否轻松自如地进行功能和控制?

  • 可以理解:用户可以理解界面的功能和内部信息吗?

  • 健壮性:数字产品是否与不同的辅助技术和设备兼容?


设计师如何提供帮助

作为设计师,我们当然不能控制以上所有要求都能做到。但是我们应该承认,人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。因此,设计师有很多机会可以有所作为。仅通过做出更明智的设计决策,我们就可以影响(改进或协助)四种经验。


  • 视觉体验:这包括形状,颜色,对比,文本样式-产品界面的所有图形元素。

  • 听觉体验:这是指与产品互动时产生的声音,音量和清晰度。

  • 认知经验:这描述了用户花费在解释界面上的时间,以及使用界面需要多少注意力和精力。

  • 运动体验:这包括执行任务或与产品交互所需的所有动作和动作。


通常,可访问性被认为是对创造力的挑战;但是,如果我们认为这是一个创造性的挑战,那么我们会开辟全新的可能性领域。真正好的可访问性的诀窍不是在功能或功能上进行折衷,也不是在美学上取舍,而是使功能和创意体验也可以访问。


改善视觉体验


1.颜色

对比度对比度是亮度或颜色的差异,使物体从周围环境中脱颖而出,并可能对清晰度产生显着影响。高对比度使视觉元素从背景中脱颖而出,更加引人注目。

专家提示:纯粹的#000000黑白色会给眼睛带来强烈的对比度,甚至会影响阅读障碍者。这就是为什么我们倾向于避免使用它,而是选择深灰色的原因。


亮度

亮度描述从光源发出的照明水平或从表面反射的光量。明亮的颜色反射更多的光线,并会干扰我们阅读和处理信息的能力。


避免在背景或较大表面上使用鲜艳的颜色。请勿在文本上或文本附近使用鲜艳的颜色,以免干扰文本。如果品牌要求特定的高亮度颜色,请尝试建议使用饱和或较深的颜色。如果你绝对必须使用明亮的颜色,则应将其用于突出显示动作的方法最小化,并将其与较深的色相搭配以达到平衡和高对比度。


专家提示:任何含有超过50%黄色的颜色都会自然反射更多的光。这意味着黄色,橙色,绿色和蓝绿色是高风险颜色,应谨慎使用。


色盲

色盲是无法区分特定颜色(通常是红色和绿色,偶尔是蓝色)的一种,它比你想象的要常见。

专家提示:不要仅仅依靠颜色;颜色不应该是传达重要信息的唯一方法。您可以执行以下操作:

  • 使用下划线表示链接和斜体,或使用粗体突出显示文本

  • 将图标与文本一起使用可传达成功或失败的信息

  • 使用纹理或图案作为图表

  • 为按钮或明显的通知使用清晰的视觉样式,针对焦点或活动状态使用不同的字体样式


2.版式

字体选择

通信是每个数字产品的首要目标,可以借助印刷术及其正确应用来实现。内容应清晰易读,这意味着易于识别和解释,轻松阅读和处理。

简洁明了对于快速阅读和解释至关重要,请避免使用复杂的字体,因为它们只会增加视觉干扰。选择正确的字体家族,针对那些具有清晰定义和独特形状的字符,因为视力障碍或阅读障碍的人可能会因某些字符或其组合而感到困惑。


字体样式

字体样式还会影响弱视或阅读障碍者的阅读性能。我们应该注意并谨慎使用字体样式(如斜体,下划线和大写)的频率和位置。

根据“英国阅读障碍协会”的规定,应避免使用斜体,特别是对于较大的副本块或较小的字体。这是因为它们使字母倾斜,显得更加尖锐,因此更难以阅读。


正文也应避免使用带下划线的字体样式。给长的段落加下划线会增加视觉噪音,从而降低阅读性能,而给短的句子或单词加下划线会与活动链接相关联,并可能引起混乱。粗体是添加对比度和强调的更好选择。


尽管没有确凿的研究,但有一些证据支持也应避免主要针对正文使用大写字母。似乎所有大写字母的统一外观会降低单词形状的对比度,从而使扫描变得不那么容易。此外,大写看起来有点紧张,可能感觉好像有人在向您大喊大叫。

专家提示:平衡是关键。谨慎使用每个样式并赋予其含义甚至可以提高可读性。


字体大小

您知道绝大多数人戴眼镜或隐形眼镜吗?实际上,十分之六以上!此外,约有62%的人通过手机访问互联网,这还不包括应用程序的使用情况。当视力不佳的人在旅途中在小屏幕上使用技术时,可能会出什么问题?

使用较大的字体。通常,16px被认为是最具有包容性的,但是请注意,字体可以以不同的比例站立,并且字体的大小可以相差很大。切勿低于14px,事实上,大多数现代网站的正文都使用18px字体,而标签,标题或工具提示仅使用14px或16px。

专家提示:此外,避免使用薄而轻的字体,因为对于较小的字体或在明亮的光线下可能难以阅读。


段落格式

帮助人们轻松浏览内容应该是我们的首要目标,因为只有20%的人可以阅读内容,其中55%的人可以快速浏览内容。我们的工作是通过使用舒适的段落格式来尽可能地支持人们。


研究表明,用于支持可读性的平均在线行长(包括空格)约为70个字符。标题,字幕和项目符号点将有助于扫描,而左段对齐将使文本更易于阅读。


较长的文字墙使人们参与的机会大大减少。成功的段落长度不超过5到6个句子。

空格将帮助患有认知和注意力障碍的人,保持阅读重点。对于其余的内容,它只会使阅读更加愉快和流畅。根据WCAG,最佳做法是将行高(行之间的间距)设置为相对于该类型大小的1.5相对值。段落之间的间距也至少应比行间距大1.5倍,因此必须明确定义。


提示:行距不应超过2.0,因为它可能产生相反的效果并分散读者注意力。


复制版面

作为设计师,我们经常陷入过度设计布局的陷阱,以使它们看起来引人注目或独特,从而将可用性放在一边。这就是为什么我们看到诸如文本的一部分之类的趋势在彩色或带纹理的背景上重叠图像或文本的趋势。只要我们知道如何以及何时使用它们,我们仍然可以享受其中的一些趋势。

当在彩色或带纹理的背景上使用文本时,我们需要确保它们之间的色彩对比度足够高,同时在整个重叠区域都保持一致-意味着在副本下没有较浅和较暗的区域,也没有过多的细节干扰。较大的字体大小和较重的字体粗细也会提高对比度。


专家提示:一如既往地“了解您的用户”。时髦的布局并不适合所有人。


改善听觉体验


您可能在想,视觉设计如何影响听觉体验?因此,想象一下您正在与一个俱乐部的朋友交谈。我敢打赌,您只能听见她说的话的一半,但是您可以通过看着她的嘴唇移动,肢体语言和面部表情来保持对话的进行。由于视觉效果的支持增强了模棱两可的声音,因此您最终可以理解它们。


在用户界面中,声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失,因此最好以视觉提示来支持它们。

我们的目标应该是提供听觉和视觉提示的反馈,支持错误,通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间,以使人们能够看到和阅读,同时又不隐藏任何重要的内容。


一个好的做法-不限于支持声音辅助技术,是在UI元素中添加描述性标签,并在图像中添加标题,以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法,对非母语人士也有帮助。


最后,我们不应该忽略声音是问题的情况,这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感,或者处于声音可能引起干扰的情况下。然后,这是一个好习惯,让人们可以选择关闭声音而不必调低扬声器音量,从而使此功能清晰可见。


专家提示:避免使用不必要的自动播放声音和音乐,因为它们会打扰甚至惊吓别人。


改善认知体验


1.知觉

视觉清晰度

清晰度是用户界面中的第一个也是最重要的属性。成功的用户界面使用户能够识别和解释他们所看到的内容,了解产品的价值和所要采取的行动,预测使用产品时会发生什么以及与产品成功交互。

  • 形式跟随功能是一项原则,指出对象应反映其预期的功能或目的。为了在用户界面中实现此目的,我们使用了附加功能,附加到UI的视觉提示/属性,以显示用户与其交互的可能方式。

    支付能力取决于用户的身体能力,目标,过去的经验,当然还取决于他们认为可能的情况。按钮应该看起来像按钮,就像链接,菜单标签,表单等一样。使用清晰的符号/功能可以帮助用户识别或解释界面,并轻松进行交互。


  • 在用户界面中使用熟悉的和已建立的设计解决方案将帮助用户预测结果并自信地采取行动。因此,使用设计模式来解决常见问题是一个好习惯,该设计模式是经过测试,优化和可重用的解决方案。

    设计模式建立在过去的经验和可能性的基础上,并附加到特定的目标上。为避免眼前的问题,选择正确的设计模式应该是我们避免混淆或压力大的交互的第一要务。


  • 建立一致的视觉语言是获得更全面界面的关键。具有相同功能和/或重要性的重复交互式UI组件应始终以相同的方式外观和操作。因此,导航,按钮,链接,标签,错误等元素应在整个产品中具有一致的样式,颜色和动画。
    值得注意的是,一致的视觉语言不仅可以通过附加含义和减少视觉噪音来帮助互动,而且还可以增强产品的个性,提升品牌知名度,建立情感联系和信任。


层次结构

视觉层次结构是指图形元素的视觉重量及其排列方式,使用户可以轻松地探索和发现内容。通过为页面元素分配不同的视觉权重,我们可以对内容进行分组并影响人们感知信息和浏览产品的顺序。

  • 颜色是第一大关注焦点。彩色元素将脱颖而出,因此在层次结构中位于较高位置。明亮的颜色会更加突出,因此,考虑到这一点,我们应该仔细安排和分配颜色,以将眼睛引导至正确的位置。

  • 视觉元素的大小(例如印刷,按钮,图标和图像)在确定重要性方面几乎与颜色一样强大。较大的图形吸引了用户的注意,并且显得很重要。对于排版,明显不同的尺寸缩放比例可以帮助建立内容层次结构,并使内容扫描变得轻松而轻松。

  • 辅助视觉层次结构的另一种方法是通过设计一致性和例外。一致对齐,外观相似,重复或相邻的元素给人的印象是它们是相关且同等重要的,而偏离元素以及不寻常的形状和有趣的纹理或样式将更加显着。太多的设计例外会引起人们的关注,并会增加复杂性,因此,谨慎使用它们是一个好习惯。


专家提示:研究格式塔原理及其在UI设计中的应用将有助于我们理解视觉感知和分组以改善视觉层次。


色彩应用

颜色不应该是传达信息或增加意义的唯一方法,但它仍然有用且很有影响力,因此不应将其视为装饰性元素。颜色具有含义,尽管没有硬性规定,但是太多的颜色会导致信息疲劳,并且不一致地使用颜色会导致混乱。

  • 避免使用太多颜色。通常,三种颜色足以描述页面的所有重要视觉元素。60–30–10规则可以帮助我们建立完美的和谐。其中60%的彩色项目由原色组成,以创建统一的产品主题,具有30%的辅助颜色增强含义和/或创建引人注目的效果,以及10%的强调色,以补充和辅助主颜色和辅助颜色。

  • 此外,我们需要确保为消息使用正确的色调。除了美学,颜色还可以创造情感和无意识的联系。特定阴影的含义会因我们所处的文化和环境而异,并且颜色通常具有不同的含义-在西方世界,错误是红色,成功是绿色,信息是蓝色等。


专家提示:可以将我们自己的含义分配给颜色,只要它们不与既定规范重叠,并且我们在整个产品中使它们保持一致。


符号学

符号学是对符号/图标及其含义的研究。它着重于人们如何形成和解释这些含义,这取决于人们所看到的上下文。在用户界面中,图标是可视语言的一部分,用于表示功能,功能或内容。符号学可以帮助我们设计立即被识别和理解的图像。

  • 尽管这些年来,我们已经开发出具有大多数人接受和理解的含义的图标。用户还习惯于使用特定于平台的图标,并且可以轻松地进行解释。在可能的情况下,最好遵循这些既定的解决方案,以获得熟悉和流畅的体验。

  • 当然,在某些情况下,我们需要设计具有特定功能的自定义产品特定图标。这些图标必须尽可能简单明了,以确保清晰度。它们还应该具有一致的视觉样式,以传达其功能或与其他非功能性元素区分开。

  • 最后,我们不应该仅仅依靠视觉隐喻来传达含义,因为某些关联可能并不那么明显。如果图标需要标题来描述其含义,则可能不合适。如果不确定,请与实际用户一起测试我们的设计会有所帮助。


专家提示:图标不仅易于解释,而且还可以具有多种含义。因此,将标记与功能图标结合使用是一种很好的做法。


2.互动

记忆

许多心理学实验表明,健康个体的处理能力非常有限。在我们的短期记忆中,我们大多数人平均可以保留7项,具体取决于个人。我们的大脑并未针对数字产品所需的抽象思维和数据记忆进行优化,因此良好的设计会有所作为。


  • 减少页面上可用选项和信息的数量,以及使用清晰的标题,面包屑和“后退”选项来访问以前的内容,将帮助用户记住或提醒自己他们在哪里,打算做什么或要做什么。是必需的。

  • 交互元素上或附近的清晰可见副本将帮助用户在整个交互过程中保持知情和自信。例如,表单标签应始终可见,动作不应隐藏在悬停后面,按钮应提供目标位置的上下文,并且各节的标题应明确。


专家提示:通过称为“块”的过程可以增加我们的短期记忆和处理能力。这是我们在视觉上将项目分组以形成更容易记住的较大项目的地方。


改善运动体验


菲茨法

菲茨法则为人类的运动和互动提供了一个模型。它指出,将指针(光标或手指)快速移动到目标区域所需的时间是其距目标的距离除以目标大小的函数。意味着较小的目标会增加互动时间。

 

根据Fitts法则,我们旨在减小用户与目标之间的距离,同时增加其尺寸。该法律主要适用于导航和按钮。菜单和子菜单元素应在附近,而按钮,链接和分页应在较大区域上单击,以实现更快更准确的交互。


专家提示:根据可用性最佳实践,按钮/链接的最小尺寸为42x42像素(重击尺寸)。


奖励:提高绩效

到目前为止,我们已经建立了包容性设计,旨在让尽可能多的人访问并实现他们的目标或解决他们的问题,尽管他们有自己的情况。我们可能很幸运,可以使用进的设备或超高速互联网,但是当我们的信号不太好时,我们会感到挣扎。对于大多数人来说,老式设备和糟糕的互联网已成为常态,因此,为获得最佳性能而设计是一件大事。

  • 极简主义是关键。如果我们打算创造一种可以被尽可能多的人使用的产品,那么我们就应该摆脱不必要的一切。图形,图像或动画是有价值的,还是增加了视觉噪音和加载时间?如果是的话,那就必须走了。

  • 图像优化是帮助提高数字产品性能的另一个标准。通过将图像调整为合适的大小,然后通过诸如ImageOptim和TinyPNG之类的工具运行它们,可以节省宝贵的千字节和实际的加载时间。

  • 开发人员通常使用的一种提高性能的技术是“延迟加载”模式,其中图像的加载是异步的,并延迟到需要时才加载。例如,如果您快速滚动到页面底部,则在网站完全加载之前,您可能会看到类似网站线框的内容。“渐进图像加载”的一种替代方法是“渐进图像加载”,其中我们显示一个空的占位符框<div>,然后用小的低质量模糊图像填充它,最后用所需的高质量图像替换它。

在每个数字产品中都遵循上述最佳实践,这是高可访问性标准的良好起点。但是总会有改进的余地,并且更好地了解我们的用户可以揭示提高无障碍标准的新方法。因此,有必要花费一些时间和金钱来更多地了解我们的不同类型的用户,因为他们可以教会我们很多有关使包容性体验成为现实的知识。


了解我们的用户将帮助我们练习同理心。“赋权”不是偶然的设计思维过程的第一步。在移情阶段,我们的目标是加深对我们正在设计的人员及其独特视角的了解,因此我们可以在进行任何设计决策时与他们认同并代表他们。

zhuanz

5G将开启全新的出行方式

ui设计分享达人

5G以其更快的速度、连接和云访问,将大数据引进车内





在MWC上,华为、小米、三星等通讯企业纷纷发布了5G手机,而吉利也在2月26日的MWC上,宣布了与高通和高新兴合作发布吉利全球首批支持5G和C-V2X的量产车型计划。可见5G时代对于各大车企来说有着巨大的影响,尤其是车联网产业。那么,在5G环境下,汽车行业究竟有什么变化呢?



5G是一代的移动网络,凭借高带宽和低延迟,提供了更快的速度、连接和云访问。5G的最大速度可达到每秒20GB,比4G要快100倍。它可以应用于手机、无人驾驶、VR、电影、充电桩、医疗、农业等多个领域。而基于5G通讯技术推出的C-V2X,是实现无人驾驶和车内技术的重要前提。



万物互联


万物互联是自动驾驶汽车发展的关键,基于5G通讯技术推出的C-V2X能让联网车辆与交通基础设施进行通信。通过5G可以实现自动驾驶汽车彼此之间所有数据的沟通与互联。并与交通灯、道路、传感器、停车场等基础设施之间的信息互联,最终实现车路协同、万物互联。



车车互联提升驾驶辅助


在5G环境下的汽车,可以通过云计算来计算车与车之间的距离、车辆的下一步动作、隐藏车辆可视化、零误差高清导航等信息。同时,也可以与其他车辆实现共享数据,提升ADAS和AEB等驾驶辅助功能,来避免车辆之间发生碰撞。



智慧交通引领场景化设计


5G环境下,大量的数据将被引入车内,来提供更准确的数据信息。如,高速收费、红绿灯、RTTI、实时车位情况、消费支付、行人检测等情况。众多的交互有助于车辆更好的了解环境信息,并作出反馈,从而提供更好的场景化设计。如,自动超车、协作式避让、自动播报前方道路拥挤程度并重新规划路线功能等场景化设计。



再比如,哈曼正在研发的交通信号灯速度优化建议技术,帮助司机根据红绿灯信息调整时速;西亚特测试了在交通信号灯中安装热像仪,以检测行人的动作并将数据反馈给汽车。



车、商业、家居互联改善驾驶体验


当车辆与酒店、商场、影院、餐厅、健身房、加油站、家居、充电桩等场所相连接,就需要以5g结合C-V2X技术的部署为基准。从而根据车主的需求,更快地预定房间、订餐、定电影票、充电桩、商场优惠等活动,实现终端之间更的通信。



比如,我们要去看电影,那么车辆会根据实时路况(是否拥堵、有几个红绿灯、是否有车祸)为您选择最佳的路线方案,并通知停车场到达时间,以方便确定是否有符合您时间的停车位,从而得到及时的反馈。




车载娱乐


可以说,如今我们所说的无人驾驶、车载触屏、全息投影、AR(增强现实)、VR游戏、AR-HUD、实时电影、车辆之间影片共享、移动办公、多模态交互等车载信息娱乐,都是需要在5G环境下来完成的。在未来,你可以在车内利用几秒的时间下载一部电影,也可以在车内与其他车辆之间建立网络游戏通信,实现虚拟内容与车辆运动的实时对接。



奔驰与哈曼合作开发的MBUX信息娱乐平台也引入了增强现实(AR)的车载导航系统。


MBUX信息AR车载导航系统

BMW Vision Next 100 AR-HUD


奥迪发布的“沉浸式车内娱乐系统”,让乘客在车内佩戴VR眼镜,然后车辆会根据行驶路线路况,实时匹配逼真的电竞类影片。


奥迪发布的“沉浸式车内娱乐系统”

手势交互

车载机器人

全息投影

移动办公


安全驾驶


未来的汽车将变得更加安全和,因为5G凭借其更高的带宽、最小的延迟和零误差高清导航,能够预防事故和观察到车身周围的各个角落。再结合C-V2X技术将极大地促进车辆之间、车辆与行人、道路基础设施之间的信息流动和监控车辆异常情况。从而做到提前预知危险,并迅速作出响应来提高道路安全性。另外,5G对于阻止黑客攻击和数据拦截能够得到更快响应,从而保障通讯安全。



想象一下,如果你的车可以在1毫秒内做出反应并将反馈传达给数百人,那么,危险系数就会降低很多。5G时代,端到端的时长为1毫秒,同时1平方公里内可同时连接100万个网络,足以满足智能交通和自动驾驶的要求。



无人驾驶


5G是实现无人驾驶最为关键的因素,如今,5G的成功研发有助于车辆之间大量的数据传输和存储,实现车联网的同时,也保障了车辆行驶的安全性;另一方面,5G可实现数据更快速的云访问,从而更有效地减少传感器技术的成本,最终实现无人驾驶。


总结


5G以其更快的速度、连接和云访问,将大数据引进车内。从而,在提升驾驶体验的同时,实现了汽车与万物的互联,保障了汽车驾驶中的安全性,从而为无人驾驶汽车提供了技术支撑和更便捷和的信息娱乐系统。


  • 5G将成为未来十年全球主导的移动通信标准;

  • 基于5G的C-V2X技术,会加快无人驾驶技术的落地;

  • 5G环境下的车载信息娱乐系统将改善用户驾驶体验,同时催生大量的市场新机会;

  • 共享平台下,5G将根据实时路况作出更准确的判断,从而减少时间成本和停车成本;

  • 5G远不止应用于汽车、手机,它将应用于医疗、机器人、农作业、航空等更多方面;

  • 5G技术为无人驾驶的实现提供了技术支撑和安全保障,同时也降低了安装传感器技术的成本;

  • 5G实现了车与车、道路、家居、商业之间真正意义上的“车联网”,为交通提供更准确的交通信息和通信信息;

  • 5G将会提供更多的场景,从而加快市场社会变革和新的商机,但需要大量的资金投入,能否将技术化为盈利是一大问题;

  • 5G以毫秒的速度,提供更精细的地图数据和更高级的驾驶辅助,并作出快速的反馈,提高了驾驶的安全性,对于减少交通拥堵,提高交通效率和道路安全有着积极的作用。



转自-站酷

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




B端系统,筛选控件总结

ui设计分享达人

写在前面


首先我们先从筛选本身讲起吧~

 

筛选可以说是我使用比较频繁的一种交互形式,比如我点外卖,会选择满减优惠力度大,同时我也可以选择在哪一个价格区间内的产品,这就会用到筛选,而到了B端产品上来,一个CRM系统当中,筛选的逻辑也会比移动端的复杂,伴随着:且关系、或关系、大于、小于等等这样复杂的逻辑,也为设计本身增加了很多难度。因此,今天我们就来讨论讨论筛选控件

 


1、筛选存在的意义


筛选存在的对于整个表单来说是非常重要的,它可以帮助用户,在表单茫茫多的数据当中进行快速的定位;可以对表单进行快速划分,缩短用户对于数据的寻找时间;能够满足用户在工作中,实际业务场景的筛选。

对于实际B端场景来说,筛选是日常数据分类的一个重要途径,我们先来看看实际场景到底有哪些?

 

用几个我们CRM用户日常使用的场景来说:

 

比如今天作为一个电话销售人员,想要联系最近注册的用户时,通常会通过筛选来选出最近几天注册过,同时又没有销售更进的客户,进行一个优先级的排布;

 

再比如说,在销售周报当中,销售主管可以通过筛选得到每个人这周完成的状态,也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等,这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用



筛选和搜索、导航的区别?

 

筛选可以通过多个筛选条件进行多维度的寻找,而导航、搜索只能通过单一条件进行指定筛选。

虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索,但本质上区别不大

所以在B端项目当中,如果你有表单,那你就需要筛选



2、筛选的类型


我们将筛选分为基础筛选和高级筛选两种,两种筛选会根据业务场景不同,在不同的页面去使用

 

2.1、基础筛选


基础筛选一般为系统预设好的筛选字段,具有很强的业务和场景的需求。基础筛选一般分为四个部分:


筛选条件:是指用户可以筛选的范围

筛选项:是指用户可以选择的筛选项目

已选项:是指用户已经选中的筛选项

备选项:是指用户还没有选择的筛选选项



基础筛选更多作为用户快捷筛选的一种方式,因为一般使用场景当中用户几个筛选逻辑为“且”

同时筛选的逻辑也为简单筛选,所以在使用场景上只适合在对筛选要求不高的场景下使用。


2.2、高级筛选


高级筛选一般为筛选中含有运算符,同时筛选当中包含条件关系,比如且关系或者否关系。一般高级筛选包含以下几类关键词

 

筛选关系:是指几个筛选条件之间的关系,一般为 且、或关系,即 且 关系为几个条件之间的并集;或 关系为几个条件之间的联集

筛选字段:是指在筛选当中,所要的筛选项,一般为表单当中的所有可筛选的字段

筛选操作:是指筛选字段和筛选值之间的关系,常见的筛选操作有:大于、小于、是、否、包含、不包含、为空、不为空等等。

筛选值:你所需要筛选的数值



高级筛选一般满足更多的用户场景,为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。




3、筛选的布局


3.1、上下布局


当在筛选器条件少于5个的情况下,最常使用的就是上下布局,这样筛选能与网站保持统一的情况下,上下布局也更方便用户进行阅读

 

当筛选器过多的情况下(一般在5-15个之间),筛选器过多,需要滚屏才能看到筛选结果,用户使用起来会很别扭。所以在5-15个的情况下,一般会将筛选项进行收折,这样保证筛选整体面积不会太大,同时将用户常用的筛选放在前面,可以满足用户基本的业务需求和使用场景



3.2、左右布局


左右布局在PC端一般是以字段选择进行筛选,通俗来讲就是将用户可以筛选的所有字段全部罗列出来,然后通过勾选选,择出你需要筛选的字段,进行筛选器的使用

 

左右布局的好处是能够将筛选的所有条件都直接的展示出来,可以适应很多场景,在筛选器用15个以上时。通过左右布局的方式,能够让筛选条件进行滚动,在最大限度保持用户使用体验




4、筛选的形式


在日常的B端产品中,筛选的形式有哪些?筛选到底应该怎么设计?接下来为大家总结梳理一些在 B端产品 中的筛选玩法,希望为你开启新大陆。


4.1、平铺型



平铺型一般为用户搜索结果数据量过大,使用户搜索出来的结果与其预期差距过大,用户然后可以通过筛选对数据的再一次分类,使用户能够精准寻找其想要的结果。

平铺型一般为筛选条件少于6个,这样能够通过1行或者2行去展示筛选项的结果

 

多用于信息量大的产品,比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式,将所有的筛选条件列出来。

 

平铺型的好处是将筛选项的结果全部或者部分放出,能够帮助用户快速理解筛选项以及快读找到自己想要的结果。

缺点也是很明显,平铺型的控件占比大,需要占据大量面积展示平铺出的筛选结果。

 

比如淘宝PC端,搜索一个产品后花去40%的面积去展示所有的筛选条件,其实就是想引导用户,淘宝搜索过后spu的数量仍然过大,想通过进一步的筛选,让用户明确自己对想要东西。同时因为面积占比大,通常平铺型都是以收折的状态,只有在搜索触发后才会完全展开


4.2、收折型



收折型筛选是一种简单直接的筛选形式,将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框,这种形式看上去很简单,但是在B端场景中,下拉框对于用户来说认知成本低,操作性也较强,同时在用户重度使用时,又能给用户很好的使用体验的一种方式

 

优点:

用户可以直接对其常用的字段筛选进行一步操作,并且没有复杂的筛选关系,全部都是“且”的筛选逻辑,能够保证用户进行快速的筛选选择

 

缺点:

将所有信息全部平铺展开,信息量过于冗杂繁多,同时在做通用性产品时,这种方式很难做到通用性


 

4.3、单侧筛选



单侧筛选是一种更通用的筛选形式,通过对于你想筛选的字段进行勾选,勾选完成后就会出现筛选条件,然后选择筛选字段、筛选操作、筛选值,一般选择完成所有筛选后,还需要点击查询,筛选操作才算完成。

 

整个单侧筛选,大量的筛选条件可以放置在表单的左侧或者右侧,通过表单纵向空间,去承载大量筛选条件。

 

优点:

节省空间、通用性强。因为在很多Saas系统、Paas系统当中,无法针对每一个客户进行设计,就要考虑到系统通用型高,做一些大而全的功能。在每个表单也所需要定制化修改的地方很少,同时能容纳的信息量可以很大。

 

缺点:

就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中,要通过不断寻找,来满足我的筛选需求,操作麻烦。

 

 

我们产品在某一次改版就将筛选由收折式修改为单侧式,因为我们用户使用筛选的场景非常的多,用户每次筛选都要多进行2、3步操作,导致用户进行了大量的吐槽,后来进行修改,将筛选顺序支持手动调整顺序,用户吐槽的次数才慢慢减少。



4.4、表头筛选

 


表头筛选是一种复杂筛选的形式,其最开始是来源于Excel的筛选形式。点击表单的筛选按钮,可以将表头的筛选字段直接带入,方便用户。之后在后台产品的发展中,得以借鉴过来。

 

优点:

可以通过表头的点击,使用户更快捷进入到自己的筛选条件,在通常情况下,在表单越左的数据显然是越重要的,也是使用筛选去筛频率最高的,因此高频的筛选场景基本还是得到满足。


缺点:

用户第一次进入系统很难理解这种交互形式,且在每个表头都会有一个icon,影响用户对于表头的识别。

 

 

4.5、弹窗式



通过点击筛选按钮,展现出筛选弹窗,进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd,在其中筛选不是很强的一个功能,同时也是系统中十分有必要的。

 

优点:

是能够在节省面积的情况下,可以进行很复杂的筛选,同时可以支持复杂情况下的筛选

 

缺点:

弹窗会遮挡一部分表单数据,会影响筛选人的判断,其次筛选条件的添加也相对更加繁琐。

 

 


5、选择更合适的筛选

在我们一系列筛选的调整过后,我们团队也总结了对于我们来说更重要的条件和形式,来和大家分享探讨一下。

 

5.1、使用频率

我们认为影响筛选控件最重要的是用户的使用频率,因为用户的使用频率和使用方式,直接影响到我们筛选是用普通筛选or高级筛选,也会影响到筛选的形式。

 

5.2、满足实际业务所需

筛选功能的做法,取决于我们产品未来是想往哪一个方向发展,如果想把功能做的强大,就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。

 

5.3、用户认知成本

在B端系统当中,最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点,但是用户对于这个点的认知成本实在过低,也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后,要适当引导用户,解释这个功能的使用场景才不会让你设计的功能被淹没。

 

 


其实在B端产品中,易用本身就是难且长的过程,在每一个功能的设计都需要你去思考很多方面:用户易用、信息层级、未来扩展,你都要做出取舍,而对于每个模块都需要你思考、结合用户场景,B端web的设计一直都是摸黑前进,我也只是将自己的一段时间的工作进行总结,说的不正确,欢迎大家指正。

 转自:站酷-Cengg 


日历

链接

个人资料

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

存档