首页

干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

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

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

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

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

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

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

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



案例锦囊|交互设计中「情感化」设计优秀案例(二)

seo达人



1.  本能层 —— 感官刺激

对于本能层,设计师需要在符合功能需求的前提下,尽可能的给用户带来听觉、视觉、触觉的感官刺激,极力去促成用户与产品的 “一见钟情”。

 

案例 1  App Store 的卡片推荐做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名为:熊帮手。

图片

 

案例 2  微博长按点赞按钮,可以选择不同的点赞状态。图标还是动态的,很有趣。

图片

 

案例 3  淘宝双十一预热,首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样,烘托氛围又打了广告。

图片

 

案例 4  微信拨打语音的界面,在等待好友接听的过程中,可以看到好友朋友圈的图片,缓解用户等待时的无聊,也为即将进行的语音聊天提供了话题。

图片

 

2. 行为层 —— 细节引导

对于行为层,设计师需对用户的行为进行预判和引导,利用细节处理打动用户,让用户对产品产生信任感和依赖感。

 

案例 1  :当苹果公司发现用户最近在官方渠道购买了新的 iPhone ,老 iPhone 的设置页面就会给出提示,让用户为新的 iPhone 做好数据迁移准备。

图片

 

案例 2  iOS 系统后台在看缩略效果时,会将用户的敏感、私密的信息的 App 页面进行模糊处理,保护用户的隐私安全。

图片

 

案例 3  :在屏幕很暗的情况下,打开微信支付二维码,屏幕会瞬间亮起,便于商家扫码付款。

图片

 

案例 4  货拉拉在展示搬家车辆详细信息时,使用了剖面图,并模拟了不同搬家场景下的家具内容,让用户更好估算车辆空间。

图片

 

3. 反思层 —— 认知共鸣

对于反思层,设计师要调动用户最深层的记忆和感知,将视觉效果、产品功能和用户认知紧密结合,形成用户对于产品和品牌的深刻认知。

 

案例 1  FigJam 是一款来自 Figma 的多人协作在线白板工具,可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能,比如:当两个人同时长按 “H” 键时,就会出现 highfive(击掌的动效),非常适合当设计师达成共识时使用:

图片

 

案例 2  小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉,所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐,让人会心一笑。

图片

 

案例 3  饿了么在异常天气下通过在界面上增加天气的元素,让用户看到外卖小哥的辛苦,使用视觉和内容共情,唤起用户的同理心,降低用户因外卖迟到而做的投诉和差评。

图片

 

案例 4  QQ音乐上线了宠物功能,一共有五个品种的宠物让用户可以选择领取,多听歌能喂饱宠物,然后送它出去参加演唱会或者和好友进行互动。

图片

 

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

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「情感化」设计优秀案例(二)

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

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

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

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

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



10个最新优秀手机应用界面设计实例

seo达人


1). YONO.MP3 mobile app – 音乐软件

*设计师:Anton Shmatko, Green Shark Studio, Pavel Khenkin

*软件介绍:YONO.MP3是一款即可欣赏音乐, 也可收听广播节目, 了解最新时讯和趣事的手机端音乐软件。它会是你闲暇时搜索和分享歌曲,歌手和专辑的理想工具。

*亮点:该款软件采用了一个极具特色的配色方案 — 所有界面整体使用黑红两种颜色的对比, 经典而不失大气。 而局部渐变色的使用, 也让其功能和按钮更加突出,极具层次感。而且, 软件图片, 按钮和图标的层级叠加, 也使整个界面更加的时尚柔和。总之,软件界面设计整体简洁漂亮而不失易用性。

 

2). Watering Tracker App – 生活类软件

*设计师:Tubik

*软件介绍:Watering Tracker app, 顾名思义,就是一款可以追踪盆栽或植物的水分情况,及时提醒用户浇水的生活类手机应用。

*亮点:首先,这种能够监测植物水分情况,通知用户浇水的创意,新颖且有趣。其次,界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适,带给用户好心情。 当然,作为植物监测的工具,同时也设置了显示各株植物水分,湿度,光照之类细节信息的功能区,即点即可了解到植物的具体生长情况,简单易操作。而且,配色方面,黑色背景搭配白色和绿色图片及按钮,符合整个植物主题的同时,也更易于用户接受和使用。

 

3). Listen – 音乐软件

*设计师:CD UXT

*软件介绍:Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰,用户可以简单的通过不同频道(例如最新歌曲,电台,主体和专辑等)和不同场景(例如驾车,运动,工作和约会等)快速的搜寻到最喜爱的歌曲。而且,软件还特别为用户提供了根据不同心情播放不同音乐列表的功能,更具个性。总之,喜欢闲暇时沉浸在自己的音乐世界的你,它会是你最佳的选择。

*亮点:软件整体采用经典的蓝色背景搭配白色字体和同色系图片,更加柔和舒适。一系列插画风格 的场景和频道对应图片,也使整个界面设计更加美观有趣。结合明亮阴影的图标和按钮让软件对应功能更加凸显的同时, 更能易于用户识别使用。 针对不同部件添加的灵活交互,也能够使用户具有更加流畅且愉悦的体验。总之,它是一款以用户愉悦体验为基础而设计的软件原型,值得尝试。(点击这里查看原型详情

 

4). NightOwl Coffee – 咖啡预定软件

*设计师:Queble Solutions

*软件介绍:NightOwl Coffee是一款能够帮助用户根据自己的需要快速订购各式咖啡的手机应用软件。

*亮点:软件整体采用了独具特设的插画风:主页添加的由明亮颜色和各种几何元素呈现的卡通咖啡机,可爱且切合主题。纯色的背景搭配上灰色插画以及黄色图标和按钮,使整个软件界面更加干净整洁,易于用户使用。

 

5). Roomframes app – 管理型软件

*设计师:Adrain Rudzik

*软件介绍:Roomframe app是一款适用于iOS手机端的应用软件,能够帮助用户记录并珍藏他们所旅行过的地方的相关记忆,尤其是他们旅行中所居住过的房间的珍贵记忆。所以,从这方面来讲,它是一款生活管理型手机应用。

*亮点:软件多处使用了框架设计,方便用户根据不同的旅店,工作区和相关新增地点,添加对应的日期,图片和描述。其简单的白色背景,使用户信息更加明显,也易于用户随时回顾或与家人朋友分享这些难忘的回忆。

 

6). iOS App Slide Car – 生活类软件

*设计师:Melany Roa

*软件介绍:iOS App Slider Car是一款专门针对iOS手机研发的应用软件,能够帮助用户分类搜索各式汽车信息,并实现在线交易的一种手机端应用。同时,它也是一款能够帮助用户结交不同汽车爱好者的社交工具。

*亮点:简单纯色的背景,使用户专注于汽车图片,价格,描述和所有者等信息。搜索界面添加各种搜索参数,用户简单点击即可实现汽车信息搜索。总之,整个界面简单,整洁而实用。

 

7). Karoline – 购物软件

*设计师:Varduhi Adami

*软件介绍:Karoline是一款手机端服装购物软件,提供了各类服装的详细信息和购买渠道。

*亮点:软件整体的粉色系配色,柔和甜美,对女性购买者极具吸引力。所有界面以服装图片为主,更易于用户根据喜好挑选。而且,添加的简单且易识别的图标和按钮,方便用户搜索和查询相关服装细节。软件界面丰富,例如主页,我的账号,我的订单,我的购物车,要请朋友,设置,购买等,能够满足用户购买时各方面的需求。所以,如果你有通过手机在线购买服装的打算,它会是不是错的尝试。

 

8).Space – 管理类软件

*设计师:Doeun Shin

*软件介绍:Space是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务:早上,自动结合用户的日常习惯,提供有用的日程管理信息和建议,例如交通和天气情况等; 晚上,通过自动分析用户语音日记,提供符合用户心情的主体和提示音等等。

*亮点:该软件以插画风为基础,添加了各式动画按钮及图片,直观生动。蓝色主题,漂亮舒适,无论早上还是晚上使用,用户都不会反感。而且,软件本身添加多样的功能性界面,例如语音日记,心情日历,日常服务,节日简介等等,简单全面。总之是一款极具吸引力的管理软件。

 

9).QuickBee – 广告类软件

*设计师:Monish Mohanan

*软件介绍:QuickBee是一款广告分类管理软件,提供了生活中各个方面的信息,例如汽车,房地产,求职和教育等风方面面信息。使用者只需创建账号,即可搜寻所需生活信息,了解流行趋势,浏览各类特色广告。

*亮点:软件设计简洁,颜色搭配极佳。彩色按钮呈现多样的生活分类,整洁美观。各式框架呈现流行趋势和特色广告,简洁有序。矢量图标简单易识别。添加多种界面,满足用户各方面的需求。

 

10).Wallet – 理财类软件

*设计师: uixNinja

*软件介绍:Wallet一款能够帮助使用者理财的移动端软件。

*亮点:软件使用黑色,红色和紫色三种颜色的对比和渐变,极具特色,漂亮时尚。简易图标和多色几何图形,是软件界面更加简洁使用,令人印象深刻。

 

结语

这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。 希望他们不仅能给你新的设计带来灵感,同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。

 

原文地址:Mockplus

作者:jongde

 

转载请注明:学UI网》10个最新优秀手机应用界面设计实例

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

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

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

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

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



15个优质加载动画设计,让等待成为一种享受

seo达人


1.Orb animation WIP

设计师:Aleksey Tsvetkov

亮点:神秘的烟雾特效

这一款设计利用了加载动画中惯用的旋转圆环,再加上烟雾特效,让整个loading动画神秘而吸睛。而且,黑白的色彩搭配,更是强化了烟雾的效果,让用户不知不觉被动画而吸引,从而忘却等待的时间。所以,用户体验也是极佳的。

因此,在你的Web或app加载动画设计中,也可添加类似的烟雾效果,让简单常见的圆环,柱状或条形动画,也能脱颖而出。

 

2.Loading Micro Animation

设计师:Nick Buturishvili

亮点:结合网页产品特色

作为一款专为酒类网站设计的加载动画,设计师结合产品特色,将其酒类产品制作流程以动画的形式展示出来,减缓用户可能产生的负面情绪的同时,又能让用户更加生动直观地了解公司或产品。

所以,在你的动画设计之中,也可结合产品,公司甚至品牌特色,添加产品制作流程,动态产品展示以及公司文化展示等等,留住用户的同时,加深他们对产品,公司甚至品牌的印象,提升产品知名度。一举三得,何乐而不为呢?

 

3.Avanti e indietro loader

设计师:Vitaly Silkin

亮点:图形的前后位置变换,加之渐变色彩的精彩应用

这款加载动画,集中采用了图形交替变换位置实现动态变化,简洁直观。渐变色彩的使用也使整款设计,更加的美观舒适。对于丰富用户枯燥乏味的等待时间,也是不错的尝试。

所以,在你的设计中,也可利用类似图形左右,前后,上下等等位置依次变换的方式,同时结合发光,流体以及背景色彩对比之类效果,让整个动画兼具视觉效果和趣味性。

 

4.Loading Screen Animation – Hourglass

设计师:Makito Ninomiya

亮点:形象的动态沙漏计时,以及文本与动画的结合

这款加载动画,除了采用了更加形象贴切的动态插画沙漏,拉近与客户的距离。还选择了动画与文字的结合方式,安抚用户的同时,也能尽量获取用户理解,实现与用户的情感层面的交流。

所以,在你的设计中,也可适当的采用一些微文本设计,获取用户共鸣的同时,也能提升用户体验。

 

5.“bouncy” – B&W loading animation 9

设计师:Lilian Tedone

亮点:简单的形状,跳跃以及旋转的完美结合

整款设计简洁清爽,舒适而不失趣味。简单形状,跳跃以及旋转的完美结合,让整个动画设计更加灵动而富有感染力。对于减缓用户等待时的枯燥乏味之感,效果也是立竿见影的。

所以,在你的设计中,也可效仿这款设计,利用有限的简单图形,添加旋转和跳跃等动效,配合颜色和阴影的变化,让整个动画设计简单灵动,丰富多变,视觉效果也是绚丽吸睛。用户体验当然也不会差。

 

6.Melting loader

设计师:Vitaly Silkin

亮点:巧妙的流体融化特效和发光特效

这款加载动画,采用了如水流动般的流体特效,给人以如冰融化般的视觉效果。同时,黑色背景与蓝色的搭配,也使整个动态曲线具有了黑夜发光般的效果。着实有趣而极富特色。此外,曲线的无限延伸,对于平复用户情绪,打发等待时间,也是不错的策略。

所以,在你的网页或软件加载动画中也可采用类似的流体或水滴特效,利用背景与形状的色彩的对比,制作出发光的效果等等,让你的设计更加与众不同。

7.Loader of things

设计师:UI8

亮点:多层圆环嵌套以及3D立体效果的应用

此款设计,采用了多层圆环嵌套,简单而流畅。3D立体效果的应用,也使整个动画更加直观大气。非常值得效仿。

所以,在你的设计中,为增加加载动画的吸引力,也可采用类似图形嵌套的方式。当然,采用3D立体呈现,对于增强整框设计的视觉效果,提升用户体验,效果也是非常显著的。

 

8.Preloadeer Animation

设计师:Rodetyo Prast

亮点:可爱的插画风以及与节日特色的有趣结合

此款加载动画不仅采用了美观独特的插画风,而且还结合圣诞节主题,添加了极具圣诞特色的驯鹿作为其主体,可爱而富有童趣。 非常适合一些以儿童为对象的在线课程(尤其是绘画),在线儿童购物以及类似儿童网站或软件,制作一些圣诞专栏时,使用的加载动画。

所以,在你的设计中,也可适当结合各种节日元素,习俗,故事甚至经典人物,让设计更加丰富多变的同时,也能使其极具趣味性和地方特色。

当然,添加一些产品特色,也能让设计更具独特性。总之,这些些设计切入点的使用在转移用户用户注意力,减缓其因等待而产生的焦虑情绪,提升用户体验,效果也是极佳的。

 

9.Loader Animation

设计师:Burhan Khawaja

亮点:多屏展示与色彩变化,以及旋转动效的极佳结合

此款加载动画,不同于一般设计师惯用单屏展示各类动画,以吸引用户驻足的方式,而是采用不同比例多屏展示的方式,结合动态渐变色彩的应用,以及正反旋转动效的对比嵌套,使整个动画设计,华丽炫酷,优质吸睛。

所以,在你的加载动画中,也可采用多屏展示方式,结合色彩,旋转以及形状之类的动态变化,让整个设计更加华丽而吸睛。

 

10.Loading screen visual for app

设计师:Nguyen Tran

亮点:美观而炫酷的科幻视觉效果

此款专为iOS或Android手机软件或网页设计的加载动画,采用黑色背景搭配浅蓝色旋转地球和进度条的设计,创造出荧光效果的同时,美观时尚,又带有科幻色彩。极具视觉效果。

所在你的设计中,也可采用类似色彩的对比,动态进度条的添加等等,制造出科幻炫酷的iOS或Android加载动画。

 

11.Loading animation

设计师:Alex Sailer

亮点:快速旋转与数值的变化设计,极大地提升了用户体验

页面加载时,用户等待最不希望遇到的情况就是,加载页面毫无变化,用户在一片茫然中等待。而此款设计,正好抓住用户这样的心理,添加快速旋转的色条和数值的变化设计,让用户直观的感受到网站或软件后台正在飞速的运转,处理相关问题。而且也易于用户评估可能需要的加载时间,从而极大的提升了用户体验度。让用户有计划,有目地等待。

所以,在你的设计中,也可适当的效仿此类应用数值的变化,尤其是进度条与数值变化的组合,留住用户,提升用户体验。

 

12.U3D loading animation

设计师:Alex Sailer

亮点:动态展示正在加载地内容,配合背景颜色的变换,可爱,有趣且吸睛

此款加载动画,采用直接动态展示正在加载的网页或软件内容的方式,利用可爱有趣的sticker吸引用户,而且根据不同sticker的主题色,相应变换背景色,也让整个动画更加多变而吸睛。非常有特点。

所以,在你的设计中也可通过,直接展示加载内容的方式,激起用户继续阅读或浏览的兴趣,让动画更加的实用,而且视觉效果也会更佳。

例如,在制作个人在线作品集网站的时候,加载动画,就可直接介绍作者相关情况,动态展示一些作品的截图或一些设计师个人的生活或工作照片展示等等,让用户获得更多的信息,从而忘却等待的乏味和无趣。

 

13.Spinning Spiral Geometry

设计师:Danny Perry

亮点:色彩条的旋转变换

多色的色彩条旋转本就十分炫酷吸睛,再结合多样的旋转方式,整个动画设计就会更具变化,从而提升吸引力。

所以,在你的设计中也可采用这种色彩条与旋转的结合方式进行设计。让你的设计更具特色。

 

14.Loading animation icons

设计师:Zach Roszczewski

亮点:各类图标的组合变换

此款加载动画,则采用简单图标的组合和变化,简洁而不失趣味。

所以,在你的设计之中,当没有特别的设计点子时,直接选用软件或页面中的高频使用的图标,结合旋转,色彩以及位置的变化,也可创作出极具特色的加载动画。

 

15.Glowing loading cube

设计师:Graig Mederios

亮点:采用产品或公司logo以及发光的效果,引起用户共鸣

此款设计,直接采用逐步构建产品或公司3D logo的过程,非常直观而炫酷,对于加深用户印象,提升产品或公司知名度,作用显著。而且,直接使用其logo, 对于激起用户共鸣,效果也是不错的。此外,制作的发光效果,对于吸引用户注意力也是非常有用的。

所以,在你的设计中,也可结合产品或公司logo进行设计。

总之,无论你是需要创建和设计,网页,Android或iOS软件加载动画,希望这里罗列和分析的15款最新的Web和软件加载动画设计能对你有所启发。

 

Mockplus助你轻松快捷地创建,检测和评估各类网页和软件加载动画

无论一款加载动画如何炫酷吸睛,其终究只是Web或软件界面设计的一部分,只有将其回归到网页或软件之中,才能真正的检测和评估其可行性和有效性。所以,作为设计师的你,急需一款即能够帮助你尽快制作出Web或软件原型,同时又能够简单快捷的将你的动画GIF嵌入这些原型,并轻松快速地检测和评估其实用性和有效性?Mockplus, 作为一款集设计和协作为一身的原型工具,不仅能够助你快速的制作原型,更能助你更好的检测,分享和评估各类网页和软件加载动画:

 

Mockplus助你简单快速地制作加载动画软件和网页原型

1.利用MP封装的强大项目和页面示例,快速制作出能够嵌入加载动画的原型

尽管,加载动画需要嵌回到对应的软件或网页才能更加直观准确的评估其功能,但并不意味着必须从头一步一步重新制作相应的原型用以测试。事实上,Mockplus封装了强大而丰富的项目和页面示例,能够帮助你简单下载导入,即可根据需要改进所需项目原型,从而尽快的开始加载动画功能的检测和提升工作。

 

2.利用MP强大的组件库和图标库,轻松快捷地手动制作所需web/app原型

当然,作为专业而严谨的设计师,希望能够手动制作更加贴切优质的web/app原型,以求更加精准地检测加载动画的有效性和可行性?不用担心!Mockplus提供的强大组件库和图标库,快速灵敏的交互设计以及多样的弹出窗口/页面设置等等,都能助你轻松快捷地手动制作所需原型。此外,Mockplus许多新增功能,对于简化设计过程,也是非常有效的。

 

3.利用GIF组件直接嵌入加载动画

完成所需Web或软件原型之后,你可以简单的拖拽Mockplus的GIF组件,直接将需要的加载GIF文件添加到任何希望的原型界面或位置,简单方便。

 

Mockplus助你简单便捷地测试和评估加载动画的可行性和有效性

1.8种测试和分享方式,方便尽快获得设计师和用户对于动画的反馈

Mockplus提供了8种多样的测试和分享方式,方便设计师根据需要及时的测试和分享制作好的原型和加载动画,从而更加快速的获取设计师或用户的反馈。

 

2.团队协作功能,对于设计师协作编辑和改进加载动画效果也是极佳的

希望通过团队协作,获得更多的设计灵感和建议?Mockplus提供团队协作功能,方便设计师根据需要共同编辑和改进加载动画。而且,其一键创建,同步和分享,通知审阅以及评论功能,对于设计师快速地实现原型加载动画有效性和可行性的检测和评估,作用也是极佳的。

总之,无论你是需要尽快制作出Web/app原型,还是希望在原型中检测和评估加载动画的可行性和有效性,Mockplus都能满足你的需求。

 

结语

加载动画,作为设计师用于留住用户的重要平台之一,无论是一个小小的加载进度条,文案,按钮,背景图片,动效甚至色彩的选择和搭配,都对增强web和软件趣味性和独特性,提升用户体验发挥着至关重要的作用。所以,在具体的设计中,设计师不仅需要将其看作与软件功能和界面一样重要的部件进行设计,同时也可结合网站,软件产品特色,创建一个能供用户暂时放松,娱乐甚至开怀一笑的场所或模块。

总之,无论设计师设计的初衷是什么,为设计和创建最优质的加载动画,最好选择一款最佳的原型工具(例如以上介绍的简单快捷的Mockplus),以便将设计的所有细节快速地转化成直观可视的交互原型,切实地测试和评估,这款加载动画设计能否达到你所期望的,甚至更好的效果。

总之,希望这里介绍的15款最新优质加载动画设计能对你有所帮助。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》15个优质加载动画设计,让等待成为一种享受

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

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

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

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

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



帮你掌握网页端交互创意 99% 的玩法!

纯纯

放眼过去大量同质化或跟风的网站风格,空有一副美观的皮囊,却少了些什么,为何不交互创新一下呢?具有创意的交互必然能使一副黑白的画面瞬间点亮色彩。

你可能想有创意的交互能为网页带来什么?

挺多的,我举例:一个连微动效都没有的静态网页你进去后也就看见的这样,那么如果这个网页进去时,内容会有入场动效,你是不是马上能感觉到这个网站有点儿东西,要抄起鼠标探索一番?换言之,好的交互创意甚至能让你产生心流模式,你通过鼠标到处点击,页面上不断的给出动画效果,然后你收获惊喜,最终促使你进行更多的尝试。

好了,说多了,就是希望为更多设计师提供设计思路或执行概念,帮助大家找到更多的创意灵感。

首先了解 Web 端交互支持

Web 端交互围绕计算机为中心。主要涉及键盘鼠标两类设备的交互,个别网站的产品可能会涉及麦克风声音采集或摄像头应用。

万字长文!帮你掌握网页端交互创意 99% 的玩法!

1. 鼠标允许的交互

现在的鼠标可以支持更多功能,但是通常来讲需要严格的考虑兼容问题,所以仅以鼠标左右键滚轮滚动以及光标映射选取为主;

  • 光标选中/hover
  • 左键单击
  • 左键双击
  • 左键连击
  • 左键长按
  • 左键按住拖拽
  • 右键单击
  • 右键双击
  • 右键连击
  • 右键长按
  • 右键按住拖拽
  • 滚轮滑动

以上所有交互都可以根据实际场景进行设定,不过鉴于用户习惯,一般不会用到快速的连击交互以及右键的双击、长按或拖拽,这不符合交互手势的舒适度或简化易用的初衷。

2. 键盘交互支持

键盘支持大量的按键交互,除去一些全局的功能按键和组合快捷键,在网页交互应用中常见的还可以分为以下几种情况;

  • 数值、字母、符号输入
  • 某个指定按键单击/双击/连击/长按
  • 用某个指定的或组合按键代表网页上的功能
  • tab 键切换网页选项
  • 用空格切换下一屏
  • 方位键切换选项或移动窗口视角
  • ESC 退出视频或全屏查看

在应用键盘按键功能的时候,除去那些作用明确大众悉知的按键功能,其他的按键操作应该保证界面上有指引有提示。

常见的交互动作组合

组合的交互动作常配合不能简单直接完成的任务,这里的组合指有两个及以上交互动作完成的类型,复杂的交互动作尽量少用,且尽可能的为用户提供操作指引,若非必要,费力不讨好;

  • 鼠标左键长按横向拖拽
  • 鼠标左键长按上下拖拽
  • 鼠标左键长按任意拖拽
  • 鼠标左键长按绕中心拖拽
  • 键盘方位键与鼠标点击
  • 键盘指定按键加鼠标点击
  • 多个按键组合使用
  • 指定按键配合鼠标长按
  • 指定按键配合鼠标长按拖拽

组合动作主要分为以上 9 类,鼠标拖拽的组合动作通常会细分来应对界面场景的应用,例如通过横向拖拽将一个竖放的圆柱物体旋转起来,那么垂直的拖拽必然是没办法转动起来的,而且左右还会决定拖拽的方向。

交互影响的元素

简单来讲,无非就是看得见的元素、听得见的元素。听得见的元素无非就一个声音,讲深一点,也就涉及一些音效的交互控制。而看得见的元素则会相对丰富很多,如果再次细分的话还可以归为以下几种情况;

  • 颜色(例如内容被选取时的颜色变化)
  • 文字(所有文字相关的样式及状态)
  • 图形(所有静态可见图形的样式变化)
  • 动画(所有的动态内容或交互动效)
  • 按钮(所有可操作的按钮及多状态呈现)
  • 控件(页面中用于交互的控件元素)
  • 模型(所有可交互的三维内容)

万字长文!帮你掌握网页端交互创意 99% 的玩法!

1. 常见变化形式

位置变化、透明度变化、角度变化、大小变化、形状变化、颜色变化、翻转效果、特效变化

万字长文!帮你掌握网页端交互创意 99% 的玩法!

网页交互的概念

web 端的交互概念即触发到呈现的过程。用户可以使用交互设备进行事件触发或变量,页面则将内容进行对应的呈现。其中交互过程主要影响的事件由“可交互的元素“、“功能交互“、“转场切换“构成。

页面内容呈现通常分为“默认时“、“选择时“、“运行时”三个时态(鼠标短暂的点击时属于“选择时”,若长按有内容影响则属于“运行时”),因此在网页交互的过程中,我们需要考虑好这三种完整的状态时呈现形式,另外在考虑补充合适的动效进行过滤或信息反馈。归根到底网页的交互概念就是控制内容呈现罢了,这是网页价值的本质。

万字长文!帮你掌握网页端交互创意 99% 的玩法!

Web 端内容呈现结构

web 端内容呈现的结构应该算是页面交互的范畴吧,其实上网页的页面并不只是长页面的形式,实际上会有更多种结构可用。因为电脑显示器更大的缘故,web 端结构上比移动端更加灵活,同时根据产品的性质也有需要考虑移动端响应式的需求,一般来讲这些页面结构可以分为以下六类:

  1. 上下长屏滚动结构:通过长页面布局内容,页面滚动查看信息
  2. 全屏上下切换结构:每次定焦一屏的范围显示内容,通过滚轮或按钮上下切屏
  3. 全屏左右切换结构:同样是定焦一屏显示内容,但采取左右切换结构
  4. 全屏页面覆盖结构:基于全屏定焦显示,页面通过覆盖式切换或跳转,甚至鼠标滚轮深入或浅出页面。
  5. 自适应平铺结构:适用于页面模块小而简单的时候,直接将模块在屏幕内一个个展开即可,一屏放不下时可以换行或继续平铺并定焦
  6. 三维场景结构:将内容场景 3D 化,通常导航或部分 UI 控件会在屏幕上固定,然后可以采取定向镜头伸缩查看,也可以是环绕中心与自由移动查看内容信息

万字长文!帮你掌握网页端交互创意 99% 的玩法!

网页的组成区块通常分为五大类型,即导航、面包屑、背景、内容呈现、弹出框。菜单导航栏通常分为顶部导航、侧边导航、底部导航、组合导航四大类,也有个别是通过点击弹出的导航。内容布局则更是五花八门了,是板式与技巧的呈现了。

万字长文!帮你掌握网页端交互创意 99% 的玩法!

14 种视觉层创意形式

个别产品本身也是创意的一部分,有一些可能界面交互平平,但是却有着魔性或引人关注的产品内容。而这里整理了些比较典型的视觉展现形式和交互创意形式的案例,这些方式通常可以根据产品的定位与特色进行组合设计和开发呈现,让你的网站更富有创意和较好的视觉体验;

1. 几何色块搭配文案

色块搭配标题文案,简约大气有视觉冲击力,再也不用担心没有图片或插画素材了

万字长文!帮你掌握网页端交互创意 99% 的玩法!

2. 精美大图背景搭配内容

采用精美大图背景搭配文案或交互控件,精美的图片本身就很抢眼,再搭配标题大字,瞬间就使得页面有冲击感有层次,常见于游戏官网或活动专题

万字长文!帮你掌握网页端交互创意 99% 的玩法!

3. 关联插画或图标搭配文案

采用小范围的插画或图标来表达服务或产品优势,搭配文案说明,风格统一精致耐看。常见于服务描述或产品说明模块应用

万字长文!帮你掌握网页端交互创意 99% 的玩法!

4. 留白大图搭配文案

将某个产品或其他元素放大显示再结合极简的排版说明,有较好的视觉冲击力和产品凸显效果,同时留白保证呼吸感和减少视觉噪点,使得用户能够更加专注产品图

万字长文!帮你掌握网页端交互创意 99% 的玩法!

5. 动态的背景或微动效装饰

应用动态背景或微动效的元素装饰,有较好的内容吸引力或氛围渲染力,可以展现更多的产品细节或丰富画面层次感,不过也比较考验视频本身或动效装饰自身质量

万字长文!帮你掌握网页端交互创意 99% 的玩法!

万字长文!帮你掌握网页端交互创意 99% 的玩法!

6. 点线面装饰与文案排版

应用简单点线面元素去装饰界面,再结合有对比有版式的文案排版。页面简洁美观,适合简约干净少图的页面模块

万字长文!帮你掌握网页端交互创意 99% 的玩法!

7. 栅格化应用与板式跳跃率

应用栅格化与版式跳跃率,使界面整体充满平面艺术,富有节奏感且不显凌乱。在日本的网页设计上有大量应用

万字长文!帮你掌握网页端交互创意 99% 的玩法!

9. 充满个性的视觉装扮

采用卡通化、科技感、故障效果、毛玻璃效果、赛博朋克风、手绘插画等视觉风格,来打造符合产品的特殊视觉效果,为网页印象加分,提升品牌感染力

万字长文!帮你掌握网页端交互创意 99% 的玩法!

10. 引用 3D 视觉装饰

运用 3D 视觉搭建页面场景,常见的有 3D 图标、3D 动效或 3D 产品大图等,有较强画面立体感和表达能力,视觉新颖让人眼前一亮,也是当前的一种视觉趋势效果

万字长文!帮你掌握网页端交互创意 99% 的玩法!

11. 产品元素或其他元素来填充背景

将品牌元素进行弱化处理后作为背景墙,凸显个性和丰富画面,结合微动效可以有进一步的效果增强

12. 矩形陈列或卡片陈列

将内容模块用矩形陈列显示或卡片陈列,Win10 菜单或 WP 系统的手机桌面有较好体现,特点是干净利落模块分明,适合同类模块较多的场景进行排列显示

万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

13. 极致的简约

采用极简的方式呈现内容核心,可以是一张图一段字、一段文案排版等,总之就这么简单的搞定了

万字长文!帮你掌握网页端交互创意 99% 的玩法!

14. 魔幻或神秘感界面呈现

如示例网址一样,魔幻且神秘,有着迷之吸引力和趣味性,不过需要慎用,比较恶搞。而适当给出一些神秘感,可以使得页面内容更有吸引力,用户更愿意去点击尝试。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

24 种交互层创意形式

主要是关于页面内容元素交互时的创意形式讲解,这里不对交互动效或特效细节进行过多说明,因为怎么去动又或者用什么样的特效去呈现实在数不清说不完,如果有兴趣可以参考一下文中的精选案例视频整理和提供的一些体验合集地址。

1. 光标跟随动画

会使页面上的元素根据光标的位置或移动产生相应变换,增加页面的互动性与趣味,适用于装饰或加强背景层次感,在特定的场景也可以使整套控制 UI 往鼠标移动的方向微微靠近,结合菲兹定律公式,距离的不断缩减也能够加快选中的效率)


万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

2. 鼠标悬浮动画

简单易用的鼠标悬浮动画,用于聚焦显示或 Tooltip 说明,常用与内容选中状态区分或元素细节展示,加上一组好的动效创意非常能够凸显个性,使用户感到惊喜为体验加分


如果是一个完整动画缓慢播放完会更有叙述性

万字长文!帮你掌握网页端交互创意 99% 的玩法!

3. 鼠标点击特效

由鼠标点击进行触发,基本样式即点击状态显示,触发后的特效可以是图标动画、光效、音效、界面动画等,游戏场景中较为常见,点击后不仅有光效反馈还有音效附和,这是一种触发反馈效果。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

4. 鼠标长按特效

当鼠标长按某个按钮时持续出现的特殊效果,一般是持续鼠标点击的特效或维持某个元素的变化效果,通常对数值持续增减动作较为常见,可以代替连续的点击,交互更轻松。也或者是需要一定的加载时间所以用长按配合

通过长按持续增加细菌圆点

万字长文!帮你掌握网页端交互创意 99% 的玩法!

5. 鼠标拖拽特效

通过鼠标点击长按某个元素进行移动的组合交互,一般用于拖拽移动、内容绘制、元素连接等。应用场景广,互动性较高,能为用户带来更多的参与感和趣味性,甚至制造小惊喜

示例内容:阿里内测的 Real 3D

万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

6. 鼠标滚轮巧妙的联动效果

主要用于页面某个值的控制或页面滚动,在页面滚动的时候可以配合控制元素变化来实现更具创意的展现效果,通常元素透明度、位置、大小、序列图都可以控制


国内官网

万字长文!帮你掌握网页端交互创意 99% 的玩法!万字长文!帮你掌握网页端交互创意 99% 的玩法!

7. 鼠标选中自动展开

鼠标经过选项时自动展开选项并聚焦,可以省去鼠标点开的动作,但不适用于选项内容较多且内容密集的场景


万字长文!帮你掌握网页端交互创意 99% 的玩法!

8. 按键与鼠标配合触发

通过指定按键和鼠标配合交互进行触发,适用于同界面的复杂交互场景,且存在某些变量需要鼠标控制。如果你的网页内交互丰富且包含变量元素,不妨试试看


万字长文!帮你掌握网页端交互创意 99% 的玩法!

9. 模块或分页加载动效

在页面滑动或分页信息加载时,界面构成元素有序的缓入进场。采用流畅的动效演示数据加载的过程,缓解数据加载渲染压力的同时,使得用户可以更加从容不迫地浏览信息,让界面呈现更加精致优雅


万字长文!帮你掌握网页端交互创意 99% 的玩法!

10. 趣味转场或加载等候

应用转场效果与 Loading 动画,运用某个元素变大覆盖或页面移动交替转场,而非生硬的直接替换,使得页面切换更有趣味和层级关系体现。再对加载较慢的内容补充 Loading 动画,缓解用户焦虑的同时还能延展品牌信息


万字长文!帮你掌握网页端交互创意 99% 的玩法!

11. 大图或多图轮播应用

精美的图片总是想要放大看,看了还想看。运用超大的轮播图展示与沉浸式功能布局,满足用户操作与大图赏析


万字长文!帮你掌握网页端交互创意 99% 的玩法!

12. 内容穿插滚动

运用特殊的图层顺序结构,在页面滚动查看时,形成奇妙的元素穿梭视感。通常会穿梭替换背景或让元素接力,这样相比静态写实的页面滚动时会更有层次感


万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

13. 内容自动生成

输入关键内容后,页面自动生成结果进行呈现,整个过程可以是缓慢有序的,适用于降压或画面创意生成的产品,可以让用户感受整个过程与细节变化


万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

14. 游戏互动模式

将产品内容以游戏的形式或交互呈现,让内容充满趣味和互动性,使得用户在参与游戏互动的过程中打破了常规的阅读体验

万字长文!帮你掌握网页端交互创意 99% 的玩法!

15. 三维或全景空间

建立一个三维或者全景空间进行查看或操作,再赋予操作按钮或说明,实现 3D 场景的交互与视觉效果,常用与地图全景查看或 3D 游戏应用,可以巧妙的结合产品 3D 模型,打造非凡的互动体验


万字长文!帮你掌握网页端交互创意 99% 的玩法!


万字长文!帮你掌握网页端交互创意 99% 的玩法!

16. 一镜到底的视角呈现

打造一个非平面的视觉场景。用鼠标点击或滚轮联动交互利用分层的元素变化,营造出由近到远或由上至下的一镜到底的视角穿梭体验。界面场景切换更加自然,还有超强的空间感与趣味性,让人难以忘怀如临其境。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

17. 按键交互效果

将某些功能或任务引用按键进行交互或触发。常使用字母、数字、空格、方位键,界面需要有提示对用户进行指导。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

18. 个性的模块展现方式

常见的有弹窗、抽屉、卡片展开、转盘等,通过个性轻松的显示结构与交互方式也能让人眼前一亮。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

万字长文!帮你掌握网页端交互创意 99% 的玩法!

19. 可交互的颜色或图形

对一些颜色或形状元素提供切换或 DIY 的空间,允许用户进行意料之外的交互或配置能力,提升网页趣味性或用户个性化需求满足。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

20. 音视频媒体控制

围绕产品介绍的媒体内容,常见有视频或音频且支持基本交互控制,结合场景需求可以丰富交互的形式或更多媒体控制功能,例如长按快进、倒退、剪辑、混音等,常用于娱乐互动场景或音视频类产品。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

21. 内容或窗口抖动

通过抖动进行报错或反馈,常见为密码输入错误时或游戏中受到伤害的场景,可伴随音效提示一起。使用场景不广泛,但是也可以进行创意应用,例如抖掉灰尘小游戏,长按元素抖动干净为止。

万字长文!帮你掌握网页端交互创意 99% 的玩法!

22. 打造仪式感

结合现实场景中的交互方式,打造相似的线上场景帮助用户共情带入,再配合交互和动效完成类似的动作,为用户带来仪式感和共情效果。

万字长文!帮你掌握网页端交互创意 99% 的玩法!

23. 有声交互

通过麦克风采集声音来影响交互,是一种声音的交互,如果网站支持,甚至可以语音交互,是一种少见的网页交互形式,并非传统的音视频控制而已。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

24. 镜头交互

通过摄像头授权获取镜头画面进行交互,通常是一些镜头滤镜效果或者增强现实技术结合做交互创意,网页上少见新颖。


万字长文!帮你掌握网页端交互创意 99% 的玩法!

网页创新设计的方法

找对方法去创新很重要!在实际工作中,我们不仅要衡量界面设计与交互效果,同时还要兼顾开发资源、实现难度以及产品架构本身考虑。对此我们也需要了解一下开发实现的概念,之后再研究如何进行创新设计。

1. 开发者的痛点与解决方案

在进行创意设计时不考虑开发,那不是自嗨就是对开发耍流氓。静态界面开发或简易的切换效果并不难。而代码层的图形变化效果、仿物理效果(例如反弹、律动、重力等效果)、3D 交互效果相对会复杂许多。大多的动效不能依赖 GIF 或 Lottie 进行解决,这对交互控制或性能优化都是挑战,而代码能够更好的保障这俩点,所以大量的交互动效还是需要开发者支持,而代码实现显然会比设计师产出复杂。

那么如何解决呢?

CSS 进行实现,部分动画元素可以由设计师通过第三方软件或在线生成 CSS、Svga、lottie 文件(相对下 lottie 更消耗性能,在线生成 icon 动画代码: https://loading.io/ ,在线 Lottie 模版搭配使用: https://design.alipay.com/emotion ,自主绘制导出 lottie: http://airbnb.io/lottie/ ,Svga 在线创造: https://www.svgator.com/ ,2D 动画制作: http://zh.esotericsoftware.com/ )。而大部分的特殊物理效果或特殊动效,其实会有可用的第三方库或代码资源来解决,首先就是保证你所设计出来的动效是可行的,过于逆天可能还是有难度,剩下的便是提供动效关键词方便开发查找相关资源,或者你给出参考来源。常见的代码动效素材网有: https://hakim.se/https://www.17sucai.com/pins/33749.htmlhttp://www.sucai58.com/tag/2408.html 等(欢迎补充哈,别藏着掖着)。对于 3D 效果的前端开发呢,暂推荐新开源的 Oasis 引擎或 Three js 这些来实现,当然其他引擎也没问题。2. 网页创新设计的策略考虑

考虑到创新开发的背景情况不一致,这里我提供了一些创新研发的策略提供参考:

传统改版:

万字长文!帮你掌握网页端交互创意 99% 的玩法!

1.明确改版目的,挖掘价值点

会议说明,清楚改版需求的背景与痛点,挖掘价值找到设计发力点

制定改版目标,明确分工计划,同步项目情况

2. 构建原型框架,评审优化

设计新版架构,确认范围层细节(功能型:功能规格支持。信息型:内容需求),完善流程与信息框架,然后拉拢项目相关人员进行评审优化,直到新版框架大体定型后,再进行视觉层输出

3. 明确产品定位,建立设计语言

要保障产品气质与视觉风格的契合,即一个资讯网站肯定不适合采用电商视觉进行输出。然后根据内容占比,考虑呈现的布局方式,即不同模块中的视频、图片、文字比例情况。然后你可以结合上文的视觉层创意形式进行套用,当主要的静态视觉设计完成后即可进入评审阶段

4. 高保真评审,挖掘交互创新点

对网页高保真进行评审,确认页面信息框架或界面设计可行。然后对交互创新方案探讨,结合网页的板式设计,提出交互创新的细节,与开发者同步,确保实现的可行性与项目工时可控,同时披露交互细节帮助开发者进行调研或准备

5. 交互创新对齐开发,进入研发阶段

准备提供交互的细节 Demo 或参考内容,在基础内容开发完成后或开发者认为适合介入的时机,进行交互创新内容的对齐,使创新方案在最小可行的基础上进行开发实现。之后建议设计同学耐心的陪同开发小哥进行还原,确保效果

6. 测试验收,预发上线

最后进行成果验收,确保基本的内容是否符合标准,再根据工时情况或上线计划等,考虑交互创新部分的细节还原调试,适公司实际情况可以考虑再迭代一版。之后根据产品情况自行考虑是否 A/B 测试、灰度上线等,上线后就是线上数据跟进或用户调研了,希望你的新版本收获一片叫好 哈哈

敏捷开发:

对于想要敏捷实现目标的话,可以采用谷歌冲刺法(Google Sprint),当前基本分为六个阶段进行,分析理解阶段、定义阶段、发散思考阶段、决策阶段、原型产出阶段、测试验收阶段。这里我结合交互创新的方法,对多个阶段进行了补充,内容如下:

万字长文!帮你掌握网页端交互创意 99% 的玩法!

1. Understand 理解

明确建站目的、需求背景、梳理业务或用户需求。通过用户研究或竞品分析等手段,更好的理解产品、行业现状以及痛点机会,也为后面阶段提供可靠的依据或支撑

2. Define 定义

基于对此次建站需求与背景深度理解,定义产品设计目标,挖掘价值点

3. Diverge 发散

让参与者们集思广益,发散思考,将不同的点子记录下来,最好图文并茂的画一下,然后形成自己的方案。在这个过程中不必共处一室,独立进行即可,这样可以避免被带偏或扰乱

4. Decide 决策

方案决策环节,产品经理、设计师、开发小哥等将各自的方案进行展示说明,这个过程中不要急着评价对方,只要投票选出最佳方案即可,这是一个方案的根基,之后再进行优化和细节完善

5. Prototype 原型

建议先将方案框架进行原型绘制或 demo 产出,然后经过一轮初步测试评审后可以再次优化复盘。在原型绘制的过程中,主要是确认流程与信息框架,不必着急视觉层的问题。若准备进入视觉设计,则可以带入这几个问题进行思考;

  • 了解框架结构,采取合适的布局方式(参考上文)
  • 明确产品定位,挖掘符合产品气质的设计方案(制定初步的视觉规范)
  • 根据产品属性,页面内容类型选取合适的视觉创意形式(可参考上文)
  • 静态页面基本确认的情况,添加交互创意画龙点睛(网页内容呈现是核心,所以交互创意放在后面考虑,确保项目最小可行性优先)

6.Validate 验证

首先通过内部自测优化,再根据产品类型考虑是否找利益相关者进行可用性测试验证,或者找专家做顾问。之后再进行下一步的优化完善即可

网页框架如何搭配创意形式

也许讲了这么多,你还是不知道前面诸多的创意方式怎么用,没关系,这里我进行了简单的整理对标,希望你看完还有救!

1. 明确产品定位

网站本身即视为一个产品,一个产品的风格定向一定是由产品本身属性或用户属性影响,了解产品定位或目标用户也是重要的环节,这些环节可以制定更符合产品或用户的信息框架或视觉表现。通常我们可以将网站类型分为企业官网、品牌官网、营销官网、门户网站、论坛相关、综合网站六大类,这里简单讲一下这些网站定位与视觉特征;

  1.  企业官网风格较为庄重正式,个性化体现少且相对板正些;
  2. 品牌官网内容是多元化的,视觉与交互都更具个性化,没有太多表现限制,传递品牌优势或能力为主;
  3. 营销网站更加体现产品或业务能力,并且都有相关咨询或消费入口,图片插画应用不会少;
  4. 门户网站是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统,内容多紧凑型;
  5. 论坛相关又称 BBS,是聚集用户进行资讯、情感、娱乐等领域的电子公告系统,导航多,偏资讯;
  6. 综合网站,内容结构更丰富,如企业营销品牌一体化,通常是产品营销做核心,图文搭配干活不累;
2. 信息框架决定板式细节

通常一个网页怎么设计版式、如何调整布局结构、调整基础交互,都是需要参考原型的信息框架。信息框架中的元素情况会直接影响视觉输入和基本交互。如信息框架中有很多图,那么设计时就需要考虑是平铺直叙还是轮播显示。

信息框架设计学习:《Web 信息框架》

万字长文!帮你掌握网页端交互创意 99% 的玩法!

那么关于不同的信息架构有什么好的布局方法吗?这一点通过内容的搭配形式,整理了几种方式供参考:

文の处理:

通常一个纯文本的界面是很难设计的,因为过于单调,对此可采用

  • 几何色块进行搭配,配合字号对比形成冲击力
  • 点线面装饰,标点符号箭头等都可以合理运用
  • 利用板式跳跃率排版,有大有小有节奏有对比
  • 补充插画搭配文案,采用小范围插画弥补单调
  • ……

万字长文!帮你掌握网页端交互创意 99% 的玩法!

图の处理:

纯图片的形式不多见,但是不能否定,一般可能是图本身有一定的信息传达,或者是图片浏览类型的服务

  1. Banner 走马灯的形式进行大图轮播
  2. 大图展示加预览切换控件
  3. 非全屏图片展示,配合 hover 状态提示切换,或屏幕上显示切换按钮,适合全屏布局
  4. 图片响应式陈列排放,鼠标悬浮选中时进行聚焦放大
  5. 环绕显示,通过鼠标拖拽或按钮切换聚焦对象
  6. 多张图可陈列摆放或通过大小对比叠加摆放,也以栅格化错位摆放,再适当的配合切换控件

万字长文!帮你掌握网页端交互创意 99% 的玩法!

图文の处理:

少量图文配套是比较好处理的,手法也比较多,根据配套数量情况还可以调换位置形成错位区分模块

  1. 大图背景铺满加遮罩文案,控件与内容少可采用全屏切换的页面交互
  2. 图片抠图加文案左右排版,注意留白。多组可左右调换位置往下排布,或者使用不同的背景色分割
  3. 图片陈列分割或多个横向排布,文字可以在图上下方摆放或图内加遮照显示,也可以鼠标悬浮聚焦时显示
  4. 小图片配合加大文案叠加显示,突出文字,图片为辅

万字长文!帮你掌握网页端交互创意 99% 的玩法!

视频の处理:

视频的处理分为自动跟手动控制,自动即作为背景自动播放,可进行简单的切换,手动则要注意相关按钮布局和显示遮挡问题

  1. 视频封面配合播放按钮做入口,不用直接播放,入口可以更小数量更多,点击后画中画或全屏播放都行
  2. 设定好视频播放的大小或位置,给予封面以及播放按钮提示,或者鼠标移入范围显示播放按钮
  3. 单个模块的多视频交互最好给予切换按钮,或者加以带缩略封面的切换栏进行处理,以减少视频模块的占比
  4. 在能够保证内容播放清晰的情况下可以多个陈列摆放,鼠标移入目标时可以直接播放达到视频预览效果

万字长文!帮你掌握网页端交互创意 99% 的玩法!

图文视频の混合:

通常图文视频混合的情况很少见,视觉焦点不好控制,其中视频做背景是最好处理的,但内容信息不易过多

  1. 视频做背景,少量图文或按钮搭建页面框架,确保视频内容不被过分遮挡,也能较好兼容这些元素
  2. 在视频未播放前,也可以叠加遮罩与相关图文信息或按钮控件,点击播放按钮后,收起即可
  3. 通过鼠标悬浮选中目标后,Tips 浮框显示额外的图文视频信息或按钮控件即可
  4. 小范围播放视频支持全屏,使得图片文字视频能够在有限的范围显示更多有效内容
  5. 半沉浸式全屏视频交互,采用幽灵式风格将图文按钮控件等往屏幕边缘分布,留出核心区域交互视频或观看

万字长文!帮你掌握网页端交互创意 99% 的玩法!

三维の处理:

因为是三维的场景,所以需要考虑到三维场景下的视角形式与操作方式

  1. 固定视角,有一个固定的场景和视角,可以通过交互使场景的内容发生变化,内容和操作可以轻量化
  2. 穿梭视角,通过交互场景中的图或模型,形成向前后穿梭的效果,适合多层内容逐步查看或过程演变
  3. 自由视角,控制元素或视角在场景中自由移动,或者围绕某个元素全景查看,适合细节展示或空间体验
  4. 固定操作,指固定的操作按钮布局或通过键盘控制场景变化,适合场景中效果简易有规律的产品
  5. 三维操作,在三维场景中含有鼠标可以选取操作的元素,适合带有场景元素互动、交互丰富的产品

万字长文!帮你掌握网页端交互创意 99% 的玩法!

按钮の处理:

按钮是网页中最常见的交互控件,是页面扭转或功能启用的基础

  1. 色块按钮,色块式的按钮,有视觉明显易触达的优点
  2. 线性按钮,用于弱化显示或透出背景内容时较为常见的按钮样式
  3. 鼠标悬浮按钮,不直接显示而通过鼠标经过相关模块时显示对应按钮
  4. 元素按钮事件,对图文内容加上点击事件,通按钮使用,例如超链接

万字长文!帮你掌握网页端交互创意 99% 的玩法!

控件の处理:

控件组适用于复杂场景的任务交互,通常由多个按钮或控件单元组成,特点就是控件单元多模块占比大

  1. 覆盖式卡片,通过卡片承载控件,控件多了就用更大的卡片呗
  2. 幽灵式控件,线性样式展示控件来兼容背景,并结合鼠标悬浮加强选择样式
  3. 为控件留白,留出控件交互的区域,通常采用留白或纯色背景来陈列控件组
  4. 鼠标悬浮展开,结合图标或直接隐藏,在鼠标悬浮选中时显示相关控件详情
  5. 展开收起式控件组,小面积显示核心控件,配合展开收起按钮隐藏更多
  6. 折叠按钮与跳转,通过按钮入口触发新的弹框,或者打开新的页面来陈列控件组完成任务

万字长文!帮你掌握网页端交互创意 99% 的玩法!

3. 交互创意如何下手

结合信息框架对不同元素类型进行视觉设计调整后,再对页面内容的基本交互进行考虑,例如轮播、切换、弹出、展开收起、转场等。之后才是更加细腻的交互创意思考。

基本交互发力点

鼠标经过反馈:常见且重要的交互方式,通过鼠标经过时反馈选中状态或提示相关信息

按钮点击反馈:在鼠标点击后,按钮或控件的颜色形状变换效果,用于反馈点击成功,实现眼手体验一致

按钮长按效果:长按状态的动效示意,通过对长按目标加动画响应进度或持续的状态,而非单纯的变色或样式切换

完善 Loading 动画:如点击上传下载更新等,出现对应进度条或 loading 动画帮助用户完善体感

内容入出场动效:页面切换加载或滑动页面后,内容采取动效有序的进入场景定格,而非生硬的静态切换

多内容轮播应用:对 Banner 或其他多个内容展现,进行轮播交互完善和时间细节控制

锦上添花交互发力点

按钮切换动画:通过 icon 的路径动画表达按钮切换,而非直接的图标对换,更具个性和视觉观赏性

鼠标跟踪动画:可以适当的做一些鼠标跟踪事件,让一些背景或界面元素跟随鼠标律动起来,增强互动

特殊滚轮联动效果:通过鼠标滚动联动其他元素进行交互变化,来呈现更有创意的场景切换或内容展示

内容穿插滚动:将内容分层控制,页面滚动时将元素固定或交替显示,产生穿梭感提升界面层次

响应式展开收起:主要用于二级或下级内容的自动展开,由鼠标经过自动展开并聚焦,减少用户操作

结合音视频媒体控制:在页面中植入音视频内容通过按键或鼠标进行交互或切换,打造互动性更高的媒体传达

趣味转场或页面加载:对页面转场或加载深度优化。采取更有创意的方式或动画来过渡,让视觉体验提升亿点点

内容或窗口抖动报错:合理采用抖动效果进行报错反馈或特殊场景应用,使呆板提示更灵动

可 DIY 的颜色或图形:提供主题或模块的 DIY 空间,满足用户编辑符合自己喜好的视觉效果

结合产品的场景创意

打造个性的模块呈现方式:结合产品的应用场景打造有个性的呈现方式

打造游戏互动的呈现:将有剧情有故事的产品或内容游戏化,可以让用户趣味互动更加深刻

打造一镜到底的转场:结合鼠标滚轮联动做镜头创意,突出产品细节或内容呈现

打造三维或全景场景:根据产品属性考虑用三维的场景来增强互动与突出产品

打造仪式感交互:利用视觉和交互变化来制作符合产品的应用效果,实现仪式感线上体验

有声交互:比较少见,视产品情况应用,可以使声音产生互动或视觉影响

镜头交互:适合有镜头针对性应用的产品采用,需要授权,要做好隐私说明

补充按钮交互触发:在场景更为复杂交互需求更多后,进行的常规解决方法

补充按键与鼠标配合交互:适合按键触发且需要鼠标控制变量的复杂交互



文章来源:优设   作者:泡泡bing

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


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

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


2022年你需要抓住的 8 个UI/UX设计趋势

纯纯

2022 年的 UI/UX 设计趋势是什么呢?在本文中,我们将发现:

  1. 3D 视觉设计师的内卷将会越来越严重
  2. 数据可视化的工作将变得越来越重要
  3. 服务的移动化还需要做出更多努力
  4. scrollytelling 技术会越来越流行

滚动已死,滚动叙事兴起

旧的滚动是无聊的。如果你想吸引注意力,你就需要实现滚动叙事(scrollytelling)。(彩云注:这个技术的核心在于边滚动页面边讲故事)

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

《纽约时报》是第一批在他们的文章《雪花飘落》中使用滚动叙事手法的机构之一。

它是一种叙事形式,可以在网页和 APP 上呈现。想象一下,在一个网站中每个插图、文本和其他元素都开始变得生动起来。自然地,你会想看到这个故事的结局。它就像一个游戏,带你穿越迷宫。虽然你不能影响它的进程,但却让你感觉自己能参与其中。

2022 年,Scrollytelling 将会出现在你看到的每一个流行网站上。

另一方面,scrolllytelling 让用户真正去阅读内容。你可以用动态文本让他们产生兴趣,比如谷歌的网站。他们的团队知道如何让信息看起来更好:

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Scrollytelling 在用户向下滚动时被激活,因此得名。没有点击,没有选择的麻烦,没有弹出窗口。你似乎停留在一个地方,但通过滚动,把屏幕上的故事慢慢展开。这不仅要求设计师创造出酷炫的视觉效果,还需要认真思考一个你想要讲述的故事情节。

所以,最好的网站不可能在 2 天内建成,需要更多的时间去打磨。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

IAmBinadam 令人惊艳的叙述设计

滚动叙事的项目通常需要大量的时间和精力。不过,这样做的结果是值得的。页面变成“活的”,每一秒都有新的事情发生,所以在阅读时很难感到无聊。

那么移动端 APP 呢? Pure 是一款约会应用(彩云注,这个应用在 app store 可以搜到,推荐大家安装一个体验一下,非广告),它创造了一种我称之为“tappytelling”的故事(当你第一次点击并打开应用时,它就会被激活):

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Scrollytelling 是为用户而创建的,用户很喜欢它,不需要到其他页面去阅读整个故事。相反,网页设计的整个故事都是事先考虑好的,并尽可能以最有趣的方式设计出来。

用户喜欢看数据,数据可视化越来越被重视

如何在 2022 年做出一个还不错的企业网站?你不会想告诉用户你是“XX 领域公认的领导者,该领域最好的之一”。这种标准的广告表达并不传达任何有价值的信息。

最好不要用形容词,而是用事实来说明:你有多少分支机构,在哪些城市,谁是你的客户,以及你是如何帮助他们的。抽象信息是不可靠的。但如果你有很多想要分享的数据,你需要让它不仅简单,而且有趣。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

数据可视化有助于以一种吸引人的方式传达正确的信息。它也可以与滚动叙事(Scrollytelling)紧密结合。以下是 IAmBinadam 展示数据的方式:

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

通过去除数据集的复杂性,使信息更容易让读者感知。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

不同级别的数据具有不同的大小,这样用户知道应该先从哪里查看

读者可以很快注意到作者试图通过图片引出的结论。考虑到如今人们消费的数据量巨大,那些干净整洁的数字带来的正面影响更大。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

有些图表乍一看甚至不像图表,这使得它们更加能被注意到

还有一种现象叫做“新冠后遗症”。这是 Covid 对公司及其员工的长期影响。根据英国国家统计局的数据,2018 年,压力和焦虑的平均得分约为 2.7/10。自新冠疫情发生以来,得分已升至 4.0/10,很少低于这一水平。同样因为大流行,在过去两年里工作量增加了 4 个小时。

人们压力太大,卷的太辛苦,以至于不愿去看复杂的数据。

设计师做好数据可视化,以保持人们的注意力。记住,复杂的信息通常被忽略,因为读者试图节省他们的时间,更有可能使用滚动按钮。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Illustration by Mona Chalabi

以下是我们推荐的一些表示数据的方式

  1. 图表和曲线图
  2. 插图
  3. 静态信息图
  4. 互动信息图

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Illustration by Ink Factory

如何让信息图表看起来更好?

一个好的图表,或者任何其他形式的数据可视化,都应该具有在 Edward Tufte 的“定量信息的可视化显示”中描述的特征。在他的书中,Tufte 通过图表解释了好图表的 3 个原则:

1)展示数据的图形元素与数值总数的比值应趋向于 1。简单地说,应该删除一切不必要的元素,保持整洁。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Graph by Hootsuite

2)充分利用好画面空间。也就是说,需要将数据编排的更紧密。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Graph by Hootsuite

3)客观地描述数据。不要使用夸张的图表,可视化数据可以看起来很酷,但真实永远是更重要的。

2022 年还有必要做 APP 吗?

根据 We Are Social 的数据,2021 年有 52.2 亿人使用手机,约占世界人口的 66%。自 2020 年 1 月以来,手机用户数量增长了 1.8%(9300 万),而手机联网总数量增长了 7200 万(0.9%),到 2021 年初达到 80.2 亿。

过去一年,社交媒体用户的数量增长了 13%以上。到 2021 年初,社交网络上已有近 5 亿新用户注册。根据 App Annie 的数据,Android 用户每天花在手机上的时间超过 4 小时。2020 年,安卓用户上网时长超过 3.5 万亿小时。

令人印象深刻的数字,是吗?似乎到 2022 年,为产品做一个 APP 将成为必须拥有的东西。如何知道你的公司是否真的需要一款应用?有以下几点可供评估:

1)用户主要通过移动设备访问你的网站

这是你应该了解的重要数据。客户和你在一起的时间越长,你就有越多的机会去吸引他们,了解他们的习惯,并给他们想要的东西。(彩云注:这就是为什么各大厂之间都在拼命抢占用户的在线时长。)

2)帮助内部业务流程更加有效

如果你想要提高员工的工作效率、改进工作流程或增加利润,那么就制作一个可以帮助管理业务流程的移动应用。

如今,像这样的手机应用使企业能够执行越来越复杂和多样化的任务,加快日常重复操作和文档管理。

3)实现一些网站上没有的新功能

如果你认为 APP 能为用户打开新的触点,并让用户体验更加友好,那么它就值得考虑开发。问问自己的 APP 能提供什么新的商业机会?例如,随着疫情的蔓延,许多人开始用上健身 APP 在家里锻炼。

4)竞争对手的情况

要了解竞争对手在做什么,他们是否有 APP,能做什么,以及他们是否真的对用户有用。

查看 App Store 和谷歌 Play 的统计数据。下载和评论的数量可以告诉你用户是如何使用竞争对手的应用的。如果他们的服务真的很方便而且很有必要,那么你就容易被甩在后面。

5)复购率

一个应用可以帮助你留住那些习惯从你那里购买的人。如果想为老客户开展促销活动了,给他们发送一个通知就能完成,成本更低。

在正确的时间提供的报价越有吸引力,人们购买的可能性就越大。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

出租车服务公司有回头客,他们肯定需要一个应用

6)促销工具

有了应用,你就不需要花钱设计和制作实体卡,客户也不需要随身带卡。将促销计划整合到 APP,并分享有用的促销信息。

做原生 APP 还是移动端网站?

开发手机网站比开发手机应用需要更少的工作量,这反过来可以降低整体推广成本。

这部分是由于响应式设计的出现,它允许你根据打开网站的设备屏幕来调整网站。至于 APP,它们必须为许多移动平台单独编写:Android、iOS、Windows 等。

一些设计师认为“前端驱动的网络体验”会是 2022 年的一个好机会,我非常同意!
(彩云注:在国内,现在开发小程序的肯定越来越多了。)

3D 设计具备更强竞争力

我们一开始并没有将其放在首位,因为这并不是一个新的趋势,在很久以前设计师们就已经设计了很多 3D 图像和动画了。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Cardi B rhymes with 3D

3D 技术已经在过去流行了很多年,但它不会很快消失。此外,我们预测 3D 图形将变得更加多样化和包容。

在过去的几年里,3D 艺术和动画已经出现在各种 UI 设计趋势评论中。这意味着越来越多的设计师将它们整合到页面中。

3D 当然应该成为 2022 年最热门的趋势和预测之一,因为与经典动画相比,逼真的 3D 形状结合动画总是引人注目的。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

“从技术上讲,通过 3D 更容易传达更多内容,因为它比平面图片更接近我们的感知。3D 插图更有深度,信息量更大,也更具互动性。”

许多设计师将 3D 对象无缝地“安置”在 2D 空间中。它允许创建更有趣的组合,也作为一个优秀的工作方法蕴藏着巨大的潜力。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

乌克兰政府网站用 3D 手模拟了黑客帝国

注意一点:在整合 3D 图形等重量级内容之前,确保你的应用性能是 OK 的,能够快速加载所有元素。

元宇宙风潮

Meta 的 logo 既不是 2D 也不是 3D。或者两者兼而有之?这就是即将到来的 2022 年的莫比乌斯带和薛定谔的猫。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

Meta logo 的变化

(彩云注:这个概念在去年简直不要太火,未来几年肯定还会是一个大的趋势,设计师也需要保持关注。跟着趋势走,易于放大自身价值。)

混合动画

越来越多的公司在网站和移动应用中使用动画,以提高用户的沉浸感和体验,使内容更有趣。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

动画是 2022 年重要的网页设计趋势。2022 年,如果没有它,你的产品很可能会看起来就像个半成品。混合风格的动画越来越受欢迎:定格动画和 3D 动画的结合,2D 动画和 3D 动画的结合。设计师这样做是为了获得不同寻常的风格解决方案,以及提高最终产品的质量。

2022 年,动画设计将是品牌市场定位的重要组成部分,想想一个公司新的视觉形象——动画形象。随着这个领域的专业设计师数量的增长,实现新想法的机会也在增加。

2022 年如何使用网页动画?

1)讲故事

动画可以通过在界面和用户之间建立情感联系来传达信息。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

加载动画 Yoichi Kobayashi

2)更有趣的加载

用户不愿意等待,除非载入画面很有趣。带有百分比的动画不仅可以分散用户的注意力,还可以告知他们加载页面需要多少时间。使用进度条或者任何你能想到的可以显示时间流逝的东西。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

3)光标效果

用户可以精确地观察光标所在的位置。通过添加智能互动动画,对这个光标作出反应来探索网站。这种效果在 21 世纪初非常流行。如你所知,流行趋势往往每 20 年就会重演一次。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

4)动态排版

你有没有想过让字母跳舞?

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

添加角色的动画插图

据 Statista 统计,2020 年全球动画市场达到了 2700 亿美元。趋势是视频,而不是静态信息。全球品牌在社交网络上使用动画制作广告。毫无疑问,动画插图的优势是它们非常灵活和多样化。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

宝马历史动画

这样的作品通常用于两种情况:

1)用于解释视频

2)电商广告

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

动画解说的趋势出现在几年前,解说视频清楚地显示点击的位置或公司的项目是关于什么的。

在招聘或商业视频中,用户更喜欢看画出来的人物,而不是抽象的形状或物品。画出来的人物可以唤起情感共鸣,就像活着的人一样。

微交互,大影响

微交互是帮助用户浏览网站或应用的小界面变化。通常这些是作为提示用户的视觉或声音效果:它们显示发生了什么,将导致什么操作,下一步需要做什么。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

图片来源 awwards

动画交互将为你的设计注入活力,并有助于保持用户粘性。关注每一个细节是设计师工作的关键,因为设计中的所有元素都可以带来积极的用户体验。

重要的是要达到元素的和谐,而不是把注意力分散到界面的各个方面。微交互作用的一个重要部分是颜色,它们为界面元素增强价值。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

CTA animated

微交互有助于页面导航,解释它们的功能。最重要的方面之一是加快和简化以前冗长的功能,以实现特定的行为。

动态 logo,加深品牌印记

2022 年,在线品牌面临着新的挑战,需寻求新的解决方案,其中之一就是动画 logo 设计。

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

图片来源 Toridori

动画 logo 主要有以下几点营销优势:

  1. 吸引注意力。这意味着它们有助于提高品牌知名度。
  2. 有助于提高 SEO。谷歌更倾向于动态内容,带有动态图形的页面更容易吸引用户。
  3. 在移动端看起来更好。丝滑的动画看起来比静态的 logo 更有趣。
  4. 最重要的是展示了历史。静态 logo 背后的想法正在动画中发展。由于这一点,在几秒钟内,你可以展示品牌的使命,甚至它的价值!

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

一家洗衣机[公司]的标志

现在有很多设计模板,可以很容易地用字体制作一个动画 logo:

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

国外专业机构出品!2022年你需要抓住的 8 个UI/UX设计趋势

来源 Shabello, Bobby Voeten

最后的话

设计趋势总是在变化的,但是设计的意义不会变。如果你不能深刻理解这一点,那么任何设计趋势的文章不能帮你做好设计。

文章来源:优设   作者:彩云Sky

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


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

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


探讨交互设计

周周

本文主要探讨交互设计

交互设计之探索GUI和VUI

周周

本文主要探讨GUI和VUI的交互设计 。

交互体验设计的核心概念之:示能与意符

鹤鹤

很多没有接触过交互体验的设计师小伙伴们,总有会面临一个坎,那就是看别人做交互和体验的方案总是特别简单,一个流程或原型别人做出来之后,我们心里总会想,那不就是这样嘛?换我也能做,但是只要自己一上手就不行了。


为什么?因为我们总是看着别人的结果下结论,而忽略了中间的思考过程。

就好像是吃着别人做的番茄炒蛋,你会觉得不就是番茄和鸡蛋一起炒一下,然后放点盐和糖就好了嘛,我们只看到了结果,而忽略了对食材的选择、处理、顺序、结合。




1.示能


当我们看到一个控件,你觉得它不就应该在那里嘛,但轮到自己开始做,就压根想不到要去用那个控件,甚至是信息布局、流程节点、整体结构都规划不出来。不知道大家有没有看上一篇原创文章结尾那个作业,如果做过的小伙伴可以发我交流一下。传送门--》


所以很多UI设计师觉得做纯执行的工作很没有意思没有价值。因为方案是别人做好的,思考过程也是别人的,而商业设计师的核心是解决问题,解决业务和用户的问题,既然解决问题的角色都是UI的上游,那么UI设计如何体现价值呢?当然就是把交互体验的核心底层概念搞懂,和交互设计一样从设计侧去思考问题,赋能业务。


OK,那么来我们先来讲:示能



1.1示能


心理学家吉普森将示能描述为:“关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。



用很直白的话来讲,意思就是:事物通过自己外在的形态,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打开的门,告诉人们可以进出、通过。一张椅子,人可以坐、可以靠。


假如,你面前有一扇门,门上有一个把手,这扇门告诉我可以利用这个把手与我进行互动,你可以用手、可以用脚,也可以用舌头,但手是最方便的。如果只是单扇门,那么我们可以利用推或者拉的动作打开,但如果是两扇门并排,两个把手在中央靠近,那么这时候门展示出来的意思就是两扇门都可以推或拉。但如果门把手在门的靠外两侧,那么意思就变了,变成了将门侧滑后才可以通过。


那门为什么要设计成不同样式来展示不同示能呢?这个留给大家思考,这三种门设计的初衷是什么。



在我们数字产品中可以有什么体现呢?例如一个开关控件(switch),开关本身具有两种互斥的属性和功能:开/关、启动/禁用,看到开关控件的外在样式,我们可以判断当前开关所属模块以及意符指示内容的状态是属于打开还是关闭。


开关在现实生活中的表现样式有很多,例如一侧翘起的开关、可以拨动的开关、具有段落的按压开关、分型控制的开关、旋钮开关等



大家别看开关看起来简单,但是在设计起来会遇到不少的问题,因为状态和意符形态在我们日常中过中很难成为一个标准,例如最常见的一侧翘起的开关,如果不加意符,我们不知道让哪边翘起才是开/关。如果你的房间就一盏灯,那么很简单,我闭着眼睛去按就行了,灯灭着那肯定就是关,再按一下那就是开。但如果在客厅中有多个并联的开关怎么办,一个灯可能收到2处甚至3处开关的控制,而每处开关的数量会在3-5个,这个时候不用意符去标识,就很麻烦了。



回到数字产品上,开关的示能就简单多了,有颜色的状态表示开,灰色状态表示关,但是开关控件在刚用在数字产品上的时候,很多人经常误以为是滑动交互来控制开关,虽然滑动也可以,但本身依靠更简单的点击触碰就可以了。但如果控件做的很长,那么滑动的示能就会更明显。



开关比较让人产生歧义的地方来自于意符,因为很多新人将一些控件的属性认为是有重叠关系,可以混用的,那就大错特错了,等会讲。



1.2.反示能


和示能相反,指的是任何物体之间不能进行怎样的互动。


例如我们经常做的人体工学椅,你可以靠坐在椅子上,并把手放在扶手上,但你无法在椅子上蹦跳,因为椅子无法支撑剧烈晃动。你也不可能用椅子打游戏,它本身不具备这样的功能。再比如我们裤子的口袋,设计师通过设计他的形状、大小、材质,帮助我们去盛放一些小物件,例如钥匙、手机、卡片,但是笔记本电脑你塞不进去,一头猪更塞不进去。


数字产品中也会遇到一些有很明显反示能的控件,例如segment Controls(分段控件/分段选择器/分段选择控件),它是iOS的原生控件之一,该控件的反示能就是无法通过左右滑动界面切换不同标签的视图,和tab不同。



并且在该控件的描述中,seg通常数量只能在5个以内,并且5个标签分别属于同类型的数据分割,只支持点击切换。它不能展开、不能滑动、不能移动、不能悬浮、不能进入二级页面也不能翻转。


那有没有一种可能,或者一个场景需要这两种控件同时具备一些属性呢?是有的,例如这样



在标签下是列表,而列表也支持轻扫的交互进行删除,如果使用tab则会产生冲突,而使用seg则在视觉上太重了,和产品调性不符。那么我们可以在示能上做一些调整,让这个控件看上去不能左右滑动,又不至于太繁琐。


所以反示能将告诉我们,事物有哪些不具备的功能。同时反示能也是相对的,遇到多样化的场景和业务需求时,我们依然要学会变通。



1.3.不同场景中示能的变化


一张桌子放在教室中,我们知道它是用来学习的,桌面上可以放书本、笔等,如果一个桌子放在户外,并且靠着墙壁,墙壁上有个洞,那么这个桌子当前示能表示为什么呢?一个肌肉发达的男人在健身房秀肌肉大家纷纷羡慕,但是如果不穿上衣走在马路上估计很多人会骂他变态。


下方图标+文字形式的一个按钮,放在卡片的左侧和右侧大家感知一下,表现出来的示能有所区别。



左侧更像是这个模块的标题,而放在右边才能让人觉得可点击交互。如果觉得不够明显我们再用三个点举例,放在不同位置的3个点小图标,所表达的示能相差巨大。再例如红色在弹窗中显示给人警示,但在活动页和价格数字上显示则给人感觉热闹的氛围和强烈的指引。



这就是不同场景中同样事物表现出来的示能区别。所以设计师在设计方案的时候除了要将方案本身属性表达正确以外,也要考虑到场景的影响。



1.4.相同示能的不同表现方式与含义


这里有一个概念叫做同构异型,说的是结构相同,形式不同。例如我们经常用到的tab与其视图的呈现,tab的本质就是利用多个标签来切换标签下的视图,所以标签除了用tab的形式,还可以用下拉展开成为菜单的形式,只不过一个是平铺,一个是点开后再列表选择。



再举个例子,例如筛选控件,如果我们需要一个实时筛选的功能,那么我们一般会这么做,在b端web设计中,会将一系列筛选条件横向摆放,每一个筛选条件都可以下拉展开进行筛选,但如果迁移到移动端中,因为横向距离受阻,就会纵向标签展开式的筛选模式,从结构上来说,这俩方案其实是一样的,都是在多个筛选条件中分别筛选出不同的标签。



再例如一个父子集共生的内容卡片



同构异形在设计样式上会有很多种,例如列表,例如上文说到的单控开关,虽然样式很多,但原理上单控开关都是一样的。


对于初学者来说,不同控件理解的比较片面,所以就会导致一些控件的使用错误。


说到同构异形那就不得不提到同形异构,例如一块素牛肉,外观和红烧牛肉一样,但是它是豆制品。我们再来看下面两个模块,根据整体来判断,两边的加号都是反映出可以点击添加的示能,但如果我们继续考虑交互之后的逻辑和流程就会发现问题所在了。前者添加的是标签,添加完后会显示在相关的区域,添加按钮不变。



这里可以用一个比较形象的比喻,我有4张椅子,其中3张坐了人,第四张椅子的示能为:只要这张椅子坐了人,边上就会出现新的椅子,最多不超过8张,如果没有人坐则只显示一张椅子。


但第二个模块中的添加按钮结合整体来看是和其他内容毫无相关的添加入口,就好像是第四张椅子上面坐的不是人而是套了一个大箱子,椅子不见了,原本应该和其他内容保持一致的外观也不见了,出现了一个新的东西,出现了新的示能。所以如果我们要按照第一种规则玩,那么这里就不能套箱子,如果要放箱子,就需要放在其他的地方。


所以,初学者要警惕同型带来的使用误区,有时候长的很像的两个人,可能完全没有血缘关系。 


小结

示能的概念大家已经了解了,对于我们设计师来说,尽量去搞懂更多事物在不同场景中的示能和反示能,需要解决问题的时候可以针对性的运用各种方案。



2.意符


咱们上一篇讲到了第一个概念:示能,如果忘了或者没看的同学可以再去看一下。


我是传送门


今天我们要来讲意符,意符在外面日常与事物的交互过程中,非常重要。


以下文字比较干,部分需要大家仔细阅读动脑,觉得难懂的小伙伴可以联系我交流


2.1意符的类型与表现形式


示能决定可能进行哪些操作,意符则点明操作的位置以及如何操作。


设计师往往会说,我设计了一个很好的方案,它将告诉你产品的用途,但是用户却不知所措,虽然知道产品就在那里,但无法下手,因为意符不明确例如我们最常用的人体工学椅,可以调节高低和后仰角度,调节的控制器是两个把柄。如果没有意符加入,我们经常会记不清哪一个控制器控制的是后仰角度,哪一个控制的是座椅高度,需要去做更多的尝试。



所以意符告诉我们对事物正确操作方式以及任何可感知的标识说白了就是一个能够表达事物具体操作的符号。


大家还记得上一篇文章举的一个门的例子吗?在日常生活中,双开门通常在商场、大型会议场馆内看见,因为考虑到人流量比较多,于是在门上就会出现推/拉两个文字意符,避免两侧的人同时推或者拉,引导人们正确通行。我们可以使用推/拉,但不可以用“按”,因为我们无法通过“按”的交互来操控门的开关。


如何判断一个设计是否优秀,那么我们会观察其本身的示能和意符传达是否自然,如果意符表现的太过刻意或者画蛇添足那就是很糟糕的设计,例如在两扇透明的玻璃门上再添加推/拉的标识,就显得有点多余了。再例如切换短视频和翻页电子小说,我们不会用一个翻页按钮而是通过滑动来手势切换。当我们将内容设计全屏的时候就要考虑到当下示能的含义,所以就不要画蛇添足。


OK,它的表意大家已经清楚了,那么在数字产品中,意符有哪些类型和作用呢?它们又可以帮助用户解决什么问题,我们来看一看。



意符的类型


1.文字


文字意符是最常见的一种类型,利用文字描述来说明如何进行交互操作,但是中文文字博大精深,不同的描述给人的理解和感受完全不同。


案例1:开关


开关控件单独拎出来不具备完整的含义,必须在相应的场景中。例如我们在通知、设置的场景中经常会用到开关,并且需要相应的文字描述来解释开关控制的内容是什么。



这里的文字就是意符,用来解释开关的作用。


开关本身具备的含义中是有这样两条原则:

1.需要让用户感知操作后立即生效 

2.开关所属文本必须简单清晰无歧义


所以咱们可以看下方的案例。当我们将文本描述为“不打开(关闭)则不再进行消息数字提醒”和“不接受推荐”后,会显得开关操作含义不明不直观。正确方式应该是正向且简单的描述,不要用双重否定等描述方式。默认描述为打开后的状态描述。



再来拓展一下,我们会发现其实依然还有产品中的开关文字意符用了非正向描述,那按照你的说法不就错了吗?我们来看看小红书和微信的权限开关,这里分别是隐私设置和权限设置。



这里理解起来会有点绕,大家看看能不能理解。首先“只允许我关注的人评论我”这是一个正向描述,没有问题,如果换成反向描述就会变成“不关注我的人不能评论我”,结合右侧的开关,逻辑层面就要多加一个双重否定的理解,所以这里的用正向没有问题。


接下来看下面的关系设置:不把我推荐给可能认识的人,诶这里用了反向描述,大家来分析一下,这里是否合理呢?


首先小红书在新下载应用打开时会向用户进行授权,为了帮助用户发现更多渠道的好友,所以默认在协议中就会去微博、通讯录里拉取好友的信息从而在浏览内容的时候进行更多好友的曝光和推荐,同时也会将我的信息推荐给认识的人,这样产品的活跃度、用户的曝光会提升。


那么大家再来品一品这两句话:1.“不把我推荐给....” 2.“把我推荐给....”前者比较含蓄,后者则更主动,中国人的关系总体来说就是比较含蓄的,就好像是你可以给我推荐,但我不会主动要求,更何况像小红书这样的社交平台,“可能认识的人”对我来说价值并不是很大。所以我个人也觉得默认不推荐比较好。


不知道这样的说法大家是否可以接受。再来看微信:不让他看和不看他。微信这个平台想必我不用多说,既然是熟人社交更多,那么默认肯定是全部开放,而有特殊需求才需要进行隐私设置,所以默认状态为不让他看-开关关闭,意思是我没有打开这项非友好的选项。


那为什么会出现有的开关默认打开,有的开关默认关闭,还可以使用反向描述呢?我总结了下,如果涉及到一些隐私和权限的内容,一般我们默认为开关关闭。但如果是为了用户体验和效率考虑的内容我们可以默认为打开,例如视频播放结束自动播放下一个视频这样的设置。


开关文字意符的描述方式还有几种不同的方式:


1.内容标题+开关切换后状态与内容变化的描述

第一种类型也就是上方说的案例,但是要注意的是,在描述状态变化的时候,文本要正向、简单的描述,例如开启后,接收xxx消息,而不要写成关闭后,不接受xxx消息。


2.功能直接描述

不添加说明文本,直接展示功能标题,例如微信听筒模式、消息设置、提醒等,直接用开关控制这些功能的打开和关闭,属于功能设置。还有一种是授权,例如允许他人查看我的收藏,对他人行为的约束,但不能描述为不允许他人查看我的收藏,因为刚才我们总结了,如果对于一些隐私权限的设置默认需要关闭,那么加上正向描述就不能使用“不允许“。


3.批量整体描述

对于同一种类型的功能设置,可以利用批量的形式做整体描述。



再来看一个例子,示能在不够清晰的情况下,文本意符用来辅助对当前内容/状态的解释



例如b站在浏览内容的时候会出现“刚刚看到这里,点击刷新”,或者当我们在浏览信息到一个页面底部时发现无法继续滑动,会出现一行文案:我是有底线的,说明内容全部展示完毕。



文字意符很直观,但也要避免歧义。



2.图形/图标


图标在某种程度上当作意符使用的频率会更高,虽然某些图标表意不明,但是因为简约、美观、生动、普适性强的原因,所以很多地方倾向于用图标,例如公共卫生间、商场的扶梯、通道,通常会用图标来代替文本,或者强图标+弱文本的形式。


既然咱们要说图标意符,而且要突出图标意符的作用,那就必须有个前提,那就是抛开其他的变量、因素的影响,图标意符究竟有什么神奇的魔力。



例如我们常用到的列表,很熟悉吧,接下来我将用图标来让这个列表的示能产生变化


我们发现,只有文本的列表,示能不明显,而加上图标之后就很明确了,甚至加上不同的图标,示能也随之变化了呢?刷新、跳转、展开、移动、选中、删除、步进、开关、屏蔽、更多。但你不能用撑开、向上展开、旋转、翻转、折叠、回退等等。


这些其实是很简单和基础的概念,但是很多工作多年的UI设计转交互体验的小伙伴就经常遇到这些问题,大家总是在问UI和交互的区别是什么,其实本质上它俩都是一个界面设计师必备的能力,不能拆开来谈。


我们再来看一个例子,播放/暂停的图标,用来控制音频/视频的播放与暂停,


在实体播放器上,我们能看到播放和暂停往往集成在一个按钮上,例如天猫精灵、电视遥控器等。而在数字产品中播放与暂停并不会同时放在一个按钮上,因为数字产品的图标是可以变化的,当前状态和切换状态可以有两个不同的意符表示,那实体播放器做成两个按钮就太多余了。



还没完,当我们在观看视频的时候,界面中会显示暂停按钮,意思是点击后播放中的视频/音频会暂停播放。也就是暂停图标展示的是点击后的状态,而不是当前状态。但其他图标表示的意思却又和开关相反,例如横竖屏切换、收藏、点赞,显示的就是当前状态,而非点击后状态。


为什么不一样呢?因为暂停/播放相当于一个按钮,用来控制视频播放,这里存在着一个控制和映射的关系,然而这里的暂停和播放按钮的示能是相反的。

暂停图标的示能表示当前正在播放,而播放图标的示能表示当前已暂停。所以它和开关也不同,开就是开,关就是关,点赞图标的原理就如同开关。


还有例如打开和关闭声音,看起来声音播放/静音有点像视频的暂停和播放。



例如腾讯视频这里的视频声音控制,当前静音为声音关闭图标,而不是打开后播放声音的图标,我们再看iOS系统的里声音控的样式表现,说明当前声音为开启则显示的是开启声音的图标,经过交互控制后才会变成静音的图标。所以声音播放的控制和视频播放的控制在图标意符的使用规则上并不统一。


那为什么会不一样呢?其实我也看到过一些声音图标和这个案例是反着来的。


两个原因:


1.因为视频的打开和关闭只有两个状态,但是声音不同,声音在打开的时候还可以调节音量啊!如果和视频播放一样,在播放的状态下显示的是静音的图标,那么音量调节就会变成这样:




是不是就很奇怪了,明明是正在播放的状态,显示的居然是静音的图标


2.暂停和播放的本质并不是开和关,而是中断和继续,在本质上和开关还是不一样的。而静音和播放的本质就是对声音的打开和关闭,如果我在声音边上加一个开关是不是就能弄清楚,为什么声音控制器的图标意符就是当前状态而不是交互后的状态。而视频的播放和暂停并不是开关。这下大家搞懂了吗?


图标意符可以单独使用也可以结合文字使用,图标虽然有优点,但也有缺点,如果单独使用也需要注意使用的场景,比如举个例子,同样是放在导航栏的两个图标,但是在不同的界面中,大家可以感知到该图标的含义吗?它的示能和意符相结合成为了一个图标,但不够明确,在不同场景中如果没有文字意符的辅助就会不够明确。



图形可以辅助表意,也可以用来指示区域,例如我们经常开车,会知道马路上会划分实线、虚线、虚实线、潮汐车道线,示意车辆可以在哪些区域行驶、以及形式的规则。



我们在医院拍胸片的时候,胸片机器下方也会指示人应该站在什么位置,用一个方形的框框起来,或者会显示两个脚印的图形。在数字产品中图形的指示区域也非常重要,例如我们设计一个按钮,只有文字样式的按钮和具有图形背景的按钮在用户的点击感知上是不同的,后者的点击信心会更大,有了区域的划分就有了明确的操作界限。




3.颜色


颜色意符很好理解,通过色彩来表达如何与事物进行交互以及辅助表达。


无论是实体产品或者数字产品中,警示的颜色大部分会用红色或者橙色来表示,例如在进行信息检查时,错误信息会被用红色样式标注出来,既告知用户出了什么问题,又提示用户在哪里出现问题。


而需要热闹、活泼的氛围也会采用红色等暖色来衬托,因为暖色更加的醒目。有时颜色也是物体示能的一部分,例如紧急逃生出口、公交车上的安全锤、灭火器都是用红色的外观,表示在紧急情况下可以使用,但不要轻易使用。


绿色表示安全、自然,但也有一些特殊场景下的不同感知,例如金融行业不太喜欢绿色,男士不太喜欢帽子使用这个颜色,除非你是比克大魔王。灰色则表示禁止、不可用、待激活等等。


在数字产品中,色彩除了表示一些特殊的含义,也可以用来作为信息区分,在选择观影位置的时候,可以利用色彩显示不同区域位置的观影体验和价格的区别。更多的色彩心理学和色彩的使用这里就不展开了。





4.声音

声音意符就更有意思了,人们通过听声音来辨别发生方位、响度、发声物体以及声音的音色、质感。各种物体通过声音来传信息的方式也非常多样,而我举个例子,就能把大家带回到童年。


你们还记得以前在学校电脑教室里一个企鹅图标开始闪烁吗?一个咳嗽声表示有人申请加你好友,一个敲击木头的声音表示有人上线了,一个滴滴滴的声音表示有新消息。还有在短视频里经常会用到的一种中断音效:滴————。你们会发现我怎么能打出有声音的文字,仿佛你们已经在听了。


声音为什么很重要,因为人类的五感是在共同作用的,我们除了可以通过声音来判断事物本身,还可以用声音来感知当前行为的状态,例如打开手机的键盘输入音,这样的打字反馈更真实更有质感。


还有在游戏领域我们经常会提到的打击感,当人物的武器打击在怪物身上,但声音并没有及时反馈,而是延迟1秒,这时候你就会觉得没有什么打击感,除了声音反馈,打击感的意符还有很多,例如受击物体的表现动作、击打区域、击打特效、动效、伤害显示、控制器反馈等等。



5.动效

动效也可以成为意符吗?它能表示什么含义呢?动效也是意符中非常重要的一种类型,他在我们日常生活中也用到的非常多。



例如我们看到理发店门口正在旋转的彩色灯。


这里也顺便给大家讲个小历史,理发店彩灯的由来:在中世纪欧洲,人们认为放血疗法对人的健康又很大的帮助,但是一般都由宗教仪式中的神职人员操作,到了亚历山大三世,他把这项工作交给了医生,但是当时的医生不愿意做这种下等人做的事情,便委托理发师来做,于是理发师就成立了理发师外科医师联合会,三色柱就是活动的标志,红色代表动脉、蓝色代表静脉、白色代表纱布。还有一种说法是在法国大革命时期,一家理发店是革命党人根据地,一次危险的活动中领导人在理发师的掩护下逃脱,最后为了表彰,允许他们用红、白、蓝三色的国旗作为标注,最后演化成了旋转灯,各国效仿。


好了,题外话说完,我们再回到动效。如果你看到三色灯正在旋转,说明这家理发店正在营业,如果静止则说明停业,或者坏了。是不是很简单?这就好像一个出轨的女人告诉情夫如果家里有人则阳台上放一盆菊花,家里没人则放一盆绿萝是一个道理。


那么在数字产品中,动效意符还有哪些作用呢?我们一一来盘点一下:


1.降低用户认知成本

我们通过设计界面的转场、控件的唤出动效,告诉用户你将从什么地方去往什么地方,和你有关的控件是从哪里来,你可以怎么控制他。当你进行过交互行为后哪些内容变化了,它们是怎么变化的。这就好像你等的45路公交车从远方朝你慢慢行驶过来,停在你的面前并打开了车门,你选择了上车然后看到阿姨捧着电饭锅,拉动气门,接着爆炸。而不是当你站在原地直接爆炸。被红姨的支配还宛如昨日。


所以一个好的动效能让你清楚事物的发展过程,以便于你更好的去理解。再例如我们在使用饿了么、美团等应用时,添加菜品会有掉入外卖箱的动效,这是一个非常好的动效应用。微信公众号策划将文章收起到浮窗也会有一个浮窗去向的引导,告诉你虽然文章在收入交互动作的结束是在右下角,但如果你想查看所有文章需要返回首页,在页面的左上角才能找到。




2.引导/提示/强化

对于一些新人须知或者内容隐藏的部分,产品通常可以通过一个小动效来引导用户这里有新内容,例如淘宝二楼、印象笔记功能图标的切换、活动入口等等


3.氛围、强化视觉

电商、直播界面中,有非常多的元素都是利用动效来刻画氛围和效果,刺激人们的感官。



4.表示状态

当你在手机解锁的状态下输错密码或者在氪金时输错密码,输入框都会进行左右晃动来示意,老铁,这真的不对。





5.更多意符

意符不局限于我列出的一些类型,我再举个例子,在一个不起眼的转角处,那里空无一物,就是很普通的一块空地,但如果那里被丢了一袋垃圾,那么这里就会出现越来越多的垃圾,因为第一袋垃圾就是一个意符,告诉别人这里可以丢垃圾,于是很多人就会把垃圾丢在这个角落里。


很多人会觉得示能和意符好难区分,示能不是也包含意符吗,其实我们可以这样理解,在整个交互过程中有物体和操作者这样两个对象,物体本身表达的是示能,但它不具备沟通能力,而意符才是链接操作者和物体两者的桥梁,虽然我们平时往往看到的都是示能+意符的状态,但是我们也要区分本体的示能和用来沟通的意符两者的区别。



小结


意符和示能不可分割,设计师们在学习基础概念的时候要尽可能的一起去了解并学习。意符的种类繁多,所以我们在学习意符正确的时候方式时,首先要了解意符本身的“示能”,从而将意符更巧妙的结合在事物中发挥其正确的表意作用。


设计师在设计意符的时候也要尽可能的多了解产品使用者(用户)的背景,意符的表达也有很大一部分效果来自于用户的经验和心智。即便我们认为该意符已经很清晰了,但是使用者并未接触过、不理解,说明该意符依然不合适。

文章来源:站酷      作者:应骏

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

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

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



日期与时间的一点点设计细节

鹤鹤

绝对时间与相对时间


绝对时间

绝对时间包含:年月日、时刻

绝对时间适用于对时间精确度要求较高的时候,比如说订单创建时间、某项活动开始/结束时间、特定节假日简称等。绝对时间在信息表达上更加精准、正式,给人确定感和安全感;但是内容显示过长,占用的空间较大。


相对时间

相对时间的展示形式:刚刚、XX分钟前/后、XX小时前/后、X天前、昨天、明天、今天等

相对时间适用于对时间精确度要求不高的时候,比如说消息、通知类功能、Feed流。采用相对时间对用户来说理解成本低,不用去往前推算出发布的具体时间点;但是不够精确、并很难衡量两个时间点的临近性。



日期与标点符号


目前主流App上,年月日的常见的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ~ 2022-12-30”,那这些日期格式是否都正确呢,日期的连接应该使用什么标点符号?


《中华人民共和国国家标准GB/T15834-2011标点符号用法》中对于连接号、点号、分隔号的使用场景有明确规定。

连接号(短横线“-”、一字线“—”、波浪号“~”):标示某些相关联成分之间的连接;

点号(.):作用是点断,主要表示停顿和语气;

分隔号(/):标号的一种,标示诗行、节拍及某些相关文字的分隔。


表示具体日期

基于国标对于连接号、点号、分割号的使用场景说明,用阿拉伯数字表示年月日时应采用短横线“-”。在比较正式的文件、公告中,日期一般不用分隔符连接,而是直接采用中文的年月日连接。


表示日期范围

Antdesign规定日期范围需要在日期或时间范围之间显示波浪号 (前后需要空格),这种方式是不符合标点符号的使用规范的。



在标示时间的起止时,应该使用一字线“”,而非波浪号“~”,波浪号主要用于标示数值范围而非日期的起止。日期带有分隔号横短线“-”时,可以采用“至”作为连接符;日期不带有分隔号横短线“-”时,可以采用一字线“—”作为连接符。注意日期与连接符之间用「空格」隔开。



时间

时间计时方法包含十二小时制、二十四小时制。在设计过程中注意区分十二小时制,上/下午和A/PM的位置区别。


日期与时间组合使用

当日期和时间连在一起时,两者之间用「空格」隔开,如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。


涉及到周的时,可以将周放在日期与时刻之间,用「空格」隔开,如:“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。


涉及到日期和时间范围时,可在表示日期范围的基础上添加时间,如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。



专有名词


以月、日为标志的事件或节日,用汉字数字表示时,只在一、十一和十二月后用间隔号;当直接用阿拉伯数字表示时,月、日之间均用间隔号。



文章来源:站酷      作者:吴大只

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

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

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


日历

链接

个人资料

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

存档