首页

延迟增强——视频信息流广告的提转秘诀

ui设计分享达人

伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。


为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。


///

延迟增强是什么?


视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。 


“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。


“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。


它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果



///

时机-延迟增强如何呈现?


转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。


01/ 出现时机:

延迟展现广告意图,可以提升广告卖点的展现机率


互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。

 

所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率



02/ 增强时机:

通过用户行为和视频特征动态决定增强时机,可以有效提升转化


对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。


我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强


但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升


undefined


///

引导-延迟增强如何引导转化行为?


转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。

 

01/ 视觉引导:

适当增加视觉吸引点,可以有效引导点击

 

延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果



02/ 互动引导:

让用户主动选择,可以增加广告曝光,辅助转化决策

 

互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权

 

以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力

 

若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。


undefined


///

前置-延迟增强如何帮助转化达成?

 

转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。


01/ 信息前置:

增加增益信息或前置落地页信息,可以辅助转化决策


购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升


undefined


02/ 转化前置:

缩短转化路径,可以帮助转化行为更便捷的达成


在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。


首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈



除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径

 

这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。



///
结语


在视频信息流领域中,延迟增强仍然可以继续深挖,作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。

 

同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中,去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。

文章来源:站酷   作者:MEUX
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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

探讨交互设计

周周

本文主要探讨交互设计

交互设计之探索GUI和VUI

周周

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

你好,我是《用户体验四维度》

ui设计分享达人

你好,我是《用户体验四维度》,一本关于用户体验的新书,今天正式上市了。


具体内容方面,我选择了聚焦于“人”——主要探讨了人与界面、人与内容、人与人和人与品牌的交互体验——大部分话题既有宏观上的纲领,也有微观上的实现细节。这四类交互体验,下文的提及会使用简称,所以先看下简称及对应的全称。

 

HI X:Human Interface Experience,人与界面的交互体验;

HC X:Human Content Experience,人与内容的交互体验;

HH X:Human Human Experience,人与人的交互体验;

HB X:Human Brand Experience,人与品牌的交互体验。



下面把时间交给作者李潇,由他来做一些分享。

 

你好,我是作者李潇。我主要分享两点,第一点是这本书的来龙去脉,第二点是这本书的主要特点。

 

 

01 《用户体验四维度》的缘起

 

2019 年 7 月 15 日,我在个人公众号上发表了第一篇设计类文章《浅谈 Keep 的 UI 设计》,转到朋友圈后有很多人点赞,也有朋友说写得不错,转到站酷后也有很多设计师留言称赞。算是一个还行的开头,这给了我信心。

 

之所以会写公众号,是因为当时我成立了一个个人的设计工作室,希望借公众号的文章引来一些客流。之所以第一篇文章会写 Keep,一方面是因为 Keep 比较知名,另一方面是因为我比较喜欢 Keep,也是 Keep 比较忠实的用户。

 

当时的计划就是挑一些个人比较喜欢的、具有一定知名度的产品来写,每款产品至少写两篇文章,一篇写 UI 设计,一篇写交互设计,或许还可以就产品功能再写一篇。因为我分别从事过产品经理和 UI 设计的工作,同时也兼任过交互设计的工作,有这些方面的经验。

 

按照计划,第二篇文章很自然地就是关于 Keep 的交互设计,不过名字是《浅谈 Keep 的用户体验》。因为所写内容已经超出了“交互设计”的范畴,而“用户体验”恰好是一个更合适的主题。这篇文章的反响依然还行。另外,有趣的是,根据使用感受,我发现 Keep 这个拥有课程和社区的运动品牌,它的用户体验可以用四个维度来描述,它们分别是:人与界面、人与内容(课程)、人与人(社区)、人与品牌。没错,这就是本书最原始的雏形了。

 

再加上也有读者朋友反馈说“用户体验的四维度”挺不错,有启发。于是第三篇文章就“拐弯”了——没写 Keep 的产品功能,也没写其他产品,而是把“用户体验的四维度”单独写成了一篇文章:《浅谈用户体验的 4 个维度》。

 

某种程度上,第三篇文章的反响好过前两篇,因为当时有 3 个业内比较知名的公众号(分别是 MicroUX、应谋鬼计、UXPA,在此向他们致以谢意)转载了这篇文章,且有一名立志成为产品经理的大学生根据这篇文章的观点写了一篇分析 QQ 和微信用户体验的文章:《从微信与 QQ 的交互比较中谈用户体验》。另外,当时在跟一些朋友聊起我写公众号的近况时,有两位设计师朋友都提了句“可以写书/出书”。

 

不知说者是否有意,但是听者有心,朋友的话更加坚定了我内心逐渐萌发的写书的想法。第三篇文章之后,我就开始认真考虑写书这件事了:首先,“用户体验的四维度”这个概念比较新,或许可以作为书的框架;其次,个人对用户体验非常感兴趣,也就是对这个潜在的书的框架非常感兴趣;第三,发在网上的文章,包括“用户体验的四维度”这个概念,反响都还行;第四,公众号我是全职在写,为了质量写得很慢(平均两周一篇 4000 多字的文章),时间成本已然很高,还不如再增加点时间成本来写书。

 

所以,是不是真的可以把“用户体验的四维度”写成一本书?

 

试试才知道。于是,在参考很多书的大纲以后,2019 年 8 月下旬,我就为“用户体验的四维度”列好了一个初步的大纲。

 

之后发在网上的所有文章,也就是从第四篇开始,就是按照这个大纲来写的。也就是说,我是先把书稿写成了网文,这种网文的更新一直持续到第 2 章 HI X(人与界面的交互体验)的尾声,随后断更。因为那时已和出版社签好合同了,按照约定,书里的内容不再发到网上。对于那些曾在网上追过我文章的读者朋友,在此我要说声抱歉,请见谅。

 

顺便说下书稿和网文的主要区别。历经编辑的指导与建议、作者的反复修改、审校流程的打磨,与网文相比:

一,书稿的逻辑与结构更加严谨、合理,内容和语言也比网文精简;

二,书稿更加体系化,相互之间(如 HI X 部分的根需求、功能架构和信息架构)尽可能做到了“环环相扣”,章节之间的起承转合也更加连贯、自然;

三,书稿在内容层面进行了一定程度的修改和优化,个别章节(第 1 章的四维度,第 2 章的根需求、功能架构等)则是进行了极大程度的修改和优化。

四,书稿在产品案例和生活案例方面也进行了一定程度的调优。

 

以上就是这本书的一个简单缘由,接下来分享下它的主要特点。

 

 

02 《用户体验四维度》的特点

 

这本书主要有四个特点,它们分别是:追求深度、追求卓越、展望未来、兼顾大小。当然,我也很期待你去发现这本书的其他特点,包括它的缺点。



1 追求深度
 
无论是宏观上的大纲(用户体验四维度),还是微观上的具体内容(根需求、功能架构、UI 设计、HH X 等),本书都着力于深挖本质。
 
先以根需求为例。在日常工作中,“需求”是一个高频词汇:大到上线一个大功能,小到改一下字体颜色,都被我们称之为“需求”。面对大大小小、林林总总的“需求”,是不是有必要关注下根需求(本质需求)?因为根需求是一切需求的根本。如果根需求有问题,往往意味着用户的根需求没有完全得到满足,那由此衍生出来的一系列大小需求都会有问题;如果根需求有问题,就意味着这个行业的类似产品,依然有机会,直到用户的根需求完全得到满足为止。所以本书就以几乎人人都会用的资讯产品为例,比较深入地探讨了两类用户(生产型用户和消费型用户)的根需求。
 
再以 UI 设计为例。关于 UI 设计,最近几年出现了一些“商业化设计”“增长设计”的概念,也就是说,UI 设计的肩膀上多了“增长”“商业化”这些担子。这不禁使人担心,未来会不会有新的担子,继续加在 UI 设计的肩膀上?另外,术业有专攻,职能亦有分工,这些担子,UI 设计担负得起吗?我认为未必担负得起。就像于动物的生命而言,心肝肺各有分工、各有贡献,总不能让心脏负责呼吸、肝脏负责跳动、肺负责造血。于心肝肺而言,做好分内的事情就是最大的担当与贡献;于 UI 设计、交互设计、信息架构、产品功能等而言,情况亦然。那 UI 设计的分内事是什么?是它的本质,这便是本书关于 UI 设计的探讨视角。
 
2 追求卓越
 
在本书中,有些话题有尝试深挖本质,有些话题没有。不管有没有深挖本质,最终目的都是落脚于“如何做到更好”,也就是追求卓越。
 
以交互设计为例,在规划它的大纲时,我尝试过不同的切入点:大的设计原则(iOS Human Interface Guidelines, 尼尔森十大交互原则等)、小的交互细节(微交互)、设计哲学(3-4 个要点)、设计目的(人人喜爱)。仔细斟酌之后,我发现要想实现“人人喜爱”这个设计目的,“设计哲学”这个方法的可能性是最大的,而且设计哲学本身是足够“海纳百川”足够“独立成章”的,所以最终果断摒弃了其他切入点,而只保留了“设计哲学”这个切入点。具体而言,这个设计哲学就是:周到,品质,惊喜,善意。想象一下,一个为人周到、能力(品质)卓越、时不时会给身边人带来惊喜、同时又很善良的人,自然会受到身边人的喜爱。类似的交互设计,同样会受到用户的喜爱。

3 展望未来
 
内容“扎根生活”是本书的追求之一。但是当探讨到目前面临困境并存在诸多不足的话题时——比如 UGC 产品(HC X 部分)——本书则会更多地展望一下未来。
 
UGC 产品面临什么困境,存在什么不足?
 
以文章类 UGC 产品为例:各行各业的从业者——比如教师和律师——都有自我充电(如看到本行业高品质的深度文章)的需求,这个需求基本上能在公众号里得到满足;但是,不管一篇深度文章的品质有多高,公众号这个包含各类信息的平台,都是像黑洞一样将其“吞噬”和“湮没”,而不是像书店、图书馆一样将其“陈列”和“流传”下去。再以极其热门的短视频类 UGC 产品为例:得益于简单易用等诸多优势,短视频类 UGC 产品在“信息和知识的大众普惠”(尤其是针对老年人)上做出了重要贡献;但是,短视频类 UGC 产品也存在一定不足,比如容易使人上瘾、沉迷,比如上面的信息和知识一定程度上缺乏质量保障。
 
未来更好,或更受欢迎和尊重的 UGC 产品,会是什么样子?
 
个人观点,首先是简单清晰的分类,也即 UGC 产品需要分成知识型 UGC 和信息型 UGC,前者以知识为主,后者会包含前者。实际上这个分类目前是存在的,比如站酷、人人都是产品经理、CSDN 等社区就属于知识型 UGC,公众号、B 站、抖音等平台则属于信息型 UGC。
 
篇幅所限,这里仅说下信息型 UGC。以短视频类的信息型 UGC 产品为例,虽然大热,但也饱受争议,甚至饱受诟病。什么样的信息型 UGC,在广受欢迎的同时还受人尊重,甚至受人喜爱?据个人观察,有两大类。一类是像公众号这样足够多元的“真实世界”,另一类是像 B 站、Instagram 这样在某些方面比较美好的“理想世界”。“真实世界”和“理想世界”,值得所有信息型 UGC 来学习。

关于信息型 UGC,怎么建立更多“真实世界”和“理想世界”?关于知识型 UGC,未来更好的产品会是什么样子?这些问题,本书都尝试进行了探讨,以供参考。

4 兼顾大小
 
用户体验的四个维度,交互设计的设计哲学,知识型 UGC 和信息型 UGC,都是比较宏观的大话题。本书不光有这些大话题,还有与之对应的关乎“怎么实现”的小细节。
 
还以交互设计为例,周到的、高品质的、给人惊喜的、带有善意的交互设计会受人喜爱,那交互设计如何做到周到、品质、惊喜和善意呢?自然而然地,本书就这四个问题进行了比较深入的探讨。以“惊喜”为例,本书先是将交互设计的“惊喜”分为“小惊喜”和“大惊喜”,简单给出了定义和示例,然后又就“如何做到惊喜”分别给出了针对短期(可以立马实现,更适合“小惊喜”)和长期(需要长期积累,更适合“大惊喜”)的建议。
 
于 UI 设计、信息架构、功能架构、HH X 等话题而言,也是同样的或类似的写作手法。


分享完主要特点,接下来请允许我简单介绍下这本书适合哪些读者,供你参考。
 
5 适宜人群
 
得益于以上几个主要特点,再加上本书涉及的话题既有属于基础的根需求、功能架构、信息架构、交互设计、UI 设计,也有更进一步的 HC X(人与内容的交互体验)、HH X(人与人的交互体验)和 HB X(人与品牌的交互体验),个人观点:
 
本书既适合一线从业者(产品经理、交互设计师、UI 设计师等),也适合相关从业者(技术人员、运营人员、市场人员等);
既适合创业者(“根需求”“功能架构”以及“知识型 UGC”“信息型 UGC”等部分或许会使你发现更多新的机会),也适合学生。
 
希望你能在书中找到自己需要的、或自己感兴趣的内容。
 
以上就是我的分享,接下来把时间交给《用户体验四维度》。
 
 
结语
 
好的,谢谢作者李潇的分享,让我意识到我的出生似乎是个意外;也谢谢李潇把我夸得这么好,但我还是要补充一句,他的夸奖仅供参考,一切以自己的切身感受为准。
 
用户即人,谈用户体验,自然离不开对人的关注。人作为高级动物,自然有其强大和理智的一面;人作为动物本身——置身于高速发展的现代社会,置身于“乱花业已迷人眼”的智能化信息社会,置身于既相互温暖也相互竞争甚至还相互“伤害”的同类中——也有其脆弱和感性的一面。正如李宇春在《软肋》里唱的那样: 


是最坚强的人,是最脆弱的人   
是最理智的人,是最敏感的人   
固若金汤的人,语无伦次的人   
不过,血肉之身   


 
同样作为人的互联网从业者,在打造自家产品时,在兼顾商业化的同时,有没有可能以更美好的方式去对待这一个个用户,一个个血肉之身?
 
我想这是一些产品正在面临的问题,也是所有产品都难以回避的问题(用户利益和企业利益难免会发生矛盾)。互联网行业在中国的蓬勃发展,不过二三十年的历史,所以相信这也是一个布满荆棘、充满希望的问题。《用户体验四维度》从根本上探讨的,也正是这个问题。希望我的探讨,能为你带来一点参考或启发。
 
最后,谢谢你的时间。


- -  The End - -


实拍图:

undefined

文章来源:站酷      作者:SonwDesign

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

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

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



设计师眼中的用户体验

ui设计分享达人

用户体验

首先,我们先来了解什么是用户体验

从字面上来说,用户体验就是用户在使用产品过程中对产品的直观感受以及评价

这种感受非常的主观,但又很容易影响别人对产品的判断。这就是为什么某宝商家一直求好评,而某团骑手会为了好评跟用户“大动干戈”的原因了


名词解释

  • UI——User Interface,本意是“⽤户界面”,但现在这个词已经被拟人化了,即把那些做用户界面的设计师们叫做UI

  • UE——User Experience,本意是“⽤户体验”,现在也变成了一个职业名词,是指那些做用户调研的研究员,比如用户画像、产品分析、竞品分析等。有些公司把“交互设计师”也叫做UE,严格来说UE和交互是两个职位,不过现在很多UE除了做用户调研也会画交互原型,所以混在一起也不奇怪了

  • IxD——InteractionDesigner,本意为“交互设计”,也就是交互设计师,现在也常常用UX(User Experience)来表示交互设计,用来跟UI进行区分。简单来说就是帮产品画原型的,实际上这个职位非常的关键,产品希望表达的逻辑,各个界面的跳转与关联关系,以及产品的可用性与易用性,都体现在交互上

  • UED——User Experience Design,本意为“⽤户体验设计”,现在常常表示用户体验设计团队,基本上大一点的互联网公司都有自己的UED团队,甚至大的部门都有自己的UED团队


UED工作领域

UED团队要做的事情可多了,通常来来说主要坐下面的事情: 

  • 用户研究

  • 产品分析

  • 交互设计

  • 产品设计

  • 视觉设计

  • 品牌设计

  • 插画设计

简而言之,UED是以用户需求为目标而进行的设计的团队,通过团队的经验与设计能力给出设计方案,是帮助公司进行产品策划的主力之一


用户体验五要素

说到用户体验,就不得不提用户体验五要素了

现在我们所谈论的用户体验的概念,其实最早出自一本叫《用户体验要素》的一本书

《用户体验要素》--作者Jesse James Garrett,是美国用户体验咨询公司Adaptive Path的创始人之一


这本书出的其实比较早,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传,非常值得阅读


当设计师在设计或重构产品,却不知从何开始时,这时我们可以参考用户体验五要素


用户体验五要素是一种产品分析与设计的方法论,他向教科书一样指导我们从0到1设计一款产品。同时它涵盖了一个产品从想法到落地的整个流程,这正是我们学习它的重要原因

用户体验五要素由战略层、范围层、结构层、交互层、表现层等5个层级构成,由下而上像个金字塔的结构一样,战略层则是底部最坚定的根基,产品的起源也源自该层


1.战略层

这是五要素的最底层,一般是公司负责人与产品总监、市场总监等高层之间的讨论范围层。这一层主要是确定产品目标以及用户需求。比如:

  • 公司要做什么

  • 面向什么样的用户

  • 什么样的解决方案

  • 公司的产品特色是什么

  • 竞争对手有什么

  • 将来的收益怎么样

 

值得一提的是用户画像需要在这一层定义出来。我们可以招募一些用户进行访谈,然后为用户分组,并结合用户的需求确定我们的产品目标

2.范围层

战略决定范围,这一层主要针对战略层的需求进行更细致的分析,定义需求是什么,提出解决方案,同时要定要好需求的优先级

3.结构层

根据前两层思考产品的信息架构,规划任务流程,简单来说这一层主要是产品PRD的输出

4.框架层

页面的具体功能摆放,信息布局,这一层主要是交互设计,输出低保真原型

5.表现层

页面最终给用户呈现的视觉效果,这一层主要是视觉设计,输出高保真视觉稿

模拟案例

作为设计师的你,接到了一个饼干公司的设计需求,公司希望你能帮他完成从产品到包装一系列的设计,你该怎么去做呢?

我们用用户体验五要素来整理设计思路:

-战略层

  • 先了解这家公司的产品需求和用户需求

  • 产品需求:公司是个小型食品加工厂,主营是面包和饼干,有实体店也有网店,今年准备在圣诞节推出一款圣诞饼干

  • 用户需求:用户画像是20-35岁的女性,喜欢看剧,喜欢网购,对可爱的东西没有抵抗力。今年上映的一部电影叫《饼干侠》(虚拟)票房火爆,用户都想买到剧中同款的饼干

  • 公司目标:希望圣诞前后一个月内盈利50w

-范围层

  • 分析需求:公司是做一款圣诞饼干,了解到《饼干侠》的原型是出自美国卡芙食品的一款饼干,并把它确定为竞品并展开分析

  • 设计方案:列出一系列设计清单,包括品牌logo重新设计,食品包装、网店圣诞装饰、广告宣传图等,给这些设计需求确定好优先级

-结构层

  • 信息架构:进一步细化已列出的设计方案,输出文档或者设计规范,比如《品牌手册》《食品包装标准》等

  • 交互流程:进一步的用户画像与分析,收集市场同类型品牌调性,通过试用的方式整理出饼干的分类属性,如口味、分量、包装材质等

-框架层

  • 从这里可以开始整体的、低保真的设计了,可以出一些比较具体的设计方案,目的是快速跟需求方进行评审,为后续的视觉设计作准备

-表现层

  • 经过前面反复的沟通与评审,开始高保真的视觉设计,从产品包装到广告图到物料,这里就是设计师们展示商品颜值,提升其商业价值的时刻到了

  • 最终产品上市



文章来源:站酷      作者:Pison西歌
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


UI组件要点「狙击」:按钮设计的这些坑别再踩啦!

纯纯

按钮设计


为了设计正确的交互,我们需要回顾一下物理按钮的历史和起源。物理按钮是UI组件的前身,当今的数字产品都还在大量使用它们。按钮很棒,即使用户不了解基本的机制或算法,只用手指触摸就可以让电器、汽车或系统运行/关闭。在《Power Button》中,作者Rachel Plotnick描述了当今按钮文化的起源,并解释了按钮是如何成为数字命令方式的。


“你按下按钮,剩下的我们来做。” ——柯达相机的醒目标语吸引了潜在消费者。


即使在今天,这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏,但物理按钮并不会消失,因为它们让人形成的行为习惯,会影响按钮设计的直观性和易用性,是一种永远存在的实物参考。


01 按钮 vs 链接

按钮向用户传递了操作的可执行性,在整个UI里很常见,例如:对话框、表单和工具栏等。按钮和链接之间的区别,请注意:

-链接是导航到另一个地方时应用的,例如:“查看全部”页面、“ Roger Wright”个人简介等;

-按钮是在执行动作时应用的,例如:“提交”、“合并”、“创建”、“上传”等。



02 让用户直观感受按钮状态

为按钮创建正确的交互和样式,是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下,每个按钮的状态都必须有明确定义,以使其与周围布局区别开来。



正常—表示该组件已启用交互;

突出提示—用户使用键盘,进入编辑状态;

鼠标悬停—当用户将鼠标置于交互式元素上方时;

点击—按下状态表示用户已轻点按钮;

进度/加载—用户操作行为没有立即执行,表示正在完成操作中;

禁用—表示该组件当前处于非交互状态,但将来可以启用。


03 按钮的颜色、形状和大小

常见的是圆角矩形按钮,这些按钮即使在输入框旁,用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化:



04 建立按钮样式等级

样式主要用于区分重要和不重要的动作。创建动作层次结构,该层次结构将指导用户进行多种选择。通常,可以有一个突出的按钮(该样式通常称为“首要”按钮),剩下的按钮则依据重要程度建立不同的样式等级。



05 《Don’t Make Me Think》

这是可用性工程师Steve Krug撰写的书籍标题,其中讲到了一点:对用户而言,界面清晰明了非常重要,不要给用户制造难题。人们周围其实已经被电子产品包围了,多年使用各种设备、软件的经验,一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差,也会给用户造成困惑。



避免对交互式和非交互式元素使用相同的颜色,否则用户不知道该点击哪里。


06 一致性的重要性

“一致性是最强大的可用性原则之一:当事物始终表现相同时,用户不必担心会发生什么。” —雅各布·尼尔森(Jakob Nielsen)


一致性提升了速度性和准确性,有助于避免错误。创建可预测性,帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时,试着找找一致元素,如颜色、形状等。按钮设计不仅要在设计系统内部保持一致,在整体平台也要进行统一。



07 使按钮足够大以实现可靠交互

按下按钮应该是一个简单的操作任务,如果用户无法正常进行,或在过程中错误地按到了相邻元素,不但给用户造成了负面体验又浪费了时间。


对于大多数平台,请考虑被触摸的目标至少为48x48dp。无论屏幕大小,这种尺寸的触摸目标的物理尺寸应为9mm,触摸屏元件的目标尺寸至少是7-10mm。



对于图标按钮来说,请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑,同时也适用于网络上的指示设备,比如鼠标。


08 无障碍设计

所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一,其他的则是字体大小、颜色和对比度,也有很多工具能检查组件的设计性能。



设计师应与开发团队紧密合作,确保按钮与屏幕阅读器协同工作。添加role =“ button”将使一个元素作为按钮控件出现在屏幕阅读器上。


09 手势应用

手势应用,让用户可以通过触摸与应用程序进行交互。使用触摸来完成任务,不仅提供了触觉控制还非常节约时间。某些手势(比如滑动以触发上下文动作、双击或长按来标记喜欢等)每天都被人们广泛使用,但对于普通用户而言,它们仍然不太明显,建议把它们替换给高级用户执行操作。



10 按钮标签信息易于理解

按钮传达的信息与其外观一样重要,错误的信息会让用户感到困惑,甚至是误导用户操作。正确的按钮标签会引导用户完成操作,最好使用动词,并在按钮上标记其实际功能。


就像按钮在问用户——“您要(添加到购物篮中)吗?” 或“您要(确认订单)吗?”,避免使用Yes/No或过于通用的标签,比如Submit。



11 确定/取消,还是取消/确定?

两者都是正确选择,但设计师可能会花几个小时来讨论哪个更合适。

-确定按钮在前,是自然流畅的阅读顺序。Windows把确定按钮放在了前面;

-确定按钮在后,可以帮助改善流程。这种顺序形式,帮助用户再采取行动前,对所有选项评估,有效地帮助人们避免错误。苹果则是把确定按钮放在最后的;

任何一种选择其实都没有错,也不会造成什么可用性灾难。



12 避免使用禁用按钮

每个人都遇到过这种情况:在屏幕上停留了几秒或几分钟,怎么操作都没反应,这才发现原来是禁用按钮使我们无法进行下一步。禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常容易让用户产生负面情绪。



我建议尽量避免禁用按钮,最好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知可。


文章来源:UX辞典(站酷)

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

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

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



从3个方面,总结 Figma 值得借鉴的交互细节!

周周

近一年来,Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用,深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点,总结下工具软件的体验设计的几个原则。

交互深耕-B端设计师要懂的信息架构

纯纯

网上关于信息架构的知识内容参差不齐,在学习与探究的过程中查阅了很多资料,反复修改多次,尽量用直白的语言结合实例来阐述信息架构。目录如下:





1.1 前言

这篇文章的起源,来源于最近看到的话题“B端设计师会被组件库取代吗?”。从表面上看,在组件库越来越完善的时代,很多页面设计依靠组件库就能够快速搭建。


那么在这种情况下,B端设计师存在的意义和价值到底体现在哪里呢?其实B端设计的重点并不在页面的视觉上,视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」,比如以下几个方面:

1.这个设计能否完成对应的商业目标和产品目标;

2.我们的信息呈现是否合理以及能否解决当前需求;

3.用户能否在页面上快速找到想要的信息;

而想要弄清楚并解决上述这些问题,在众多的话题阐述之下,我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知,这能够帮助我们做出正确且出色的设计。


1.2信息架构概念

关于信息架构的概念,在百科上面的定义大部分都比较晦涩难懂,比如维基百科和百度百科的解释:

相信大部分人都很难明白其中描述的意思。在这里换种思路,将信息架构拆分为信息与架构去理解。

信息指的是内容的载体,常见的文字、图像等都是信息;架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来,然后呈现出来。其本质就是研究信息的表达与传递。

通俗点讲,信息架构就是让用户可以更容易的理解我们的产品,让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式,它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。





为什么需要信息架构?我们都知道B端产品设计的核心是「降本提效」,在设计这一侧的可以将其理解为降低认知成本,提升使用效率。

降低认知成本需要我们更好的表达信息,让用户能看明白我们的产品能够做什么,如何用;提升使用效率需要提升信息的传递效率,让用户能够很容易的找到需要的功能;


而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑,那么我们在页面上看到的可能就只有功能的堆叠,让产品陷入难以上手或者不知道怎么用的尴尬境地。

一个强大信息架构是产品质量的保证,是作为设计支撑点的骨架,它会减少可用性问题,提升整体导航行,创造对用户友好的体验。比如举一个工具层面的例子:

PS的工具栏堆叠在界面各个部分,而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好,PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。


可以说良好的信息架构是高效用户体验的基础。视觉元素,功能,交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计,我们就需要参与到信息架构这个过程中来,和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。


如果想要搭建一个好的建筑,我们需要知道其建造的目的,是按照什么样的结构搭建,内部有哪些系统,以及最后呈现的模样。


那么信息架构也同理,我们首先需要知道信息是为了什么目标服务,然后我们通过怎样的结构来组织这些信息,以及过程中会用到的信息元素,最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻,那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。


3.1 信息获取:先理解业务,再谈架构

B端行业对于业务理解的要求是比较高的,只有在理解业务的基础上,将业务需求转化为对应的设计目标,我们才能够输出合理的信息架构方案。

个人认为理解业务的基础,就是能够用一句话讲清楚当前设计的产品。这句话可以描述为:谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」,这就是外卖软件提供的产品服务。


虽然看上去这句话很简单,但其中包括了三个要素:用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。


3.1.1用户:分清购买者与使用者

用户永远是排在第一位的,也是我们首先需要弄清楚的。在B端设计中,本质上可以分为两类角色:客户和用户。比如我们常用的钉钉或企业微信,购买客户是企业,实际用户是员工。

对于企业:「我想要有一款软件可以更好的管理员工」

对于员工:「我想要这款软件能够更好地提高工作效率」

客户决定了我们产品的购买(部分情况下也兼顾使用),而用户则决定了后续产品的复购率。因此在业务理解中,我们需要弄清楚当前产品所处的服务阶段,比如初期为了打开市场肯定更倾向于客户,而中后期为了提高产品的使用体验又会偏向于用户。


因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务,这也就决定了我们在设计信息架构时对应的不同侧重点。


3.1.2场景:需求源于场景

场景是指需求产生的某种条件,这个条件包括但不限于环境、时间、地点、空间等,只有上述条件满足,这个需求才能成立。这里可以把场景理解为产生该问题的原因

比如当用户提出「她需要一件衣服」,那么我们就需要弄清楚用户为什么需要添加衣服,是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。


在平日的工作中我们可以通过以下两种方式来更好的了解业务场景:

1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景,我们可以通过文档进行初步了解。

2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分,我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。

毕竟需求背景是理解业务的重要步骤,我们只有知道需求产生的原因,才能够针对性的给出解决方案。


3.1.3目标:业务目标和设计目标

目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标,而我们要做的就是将业务目标转化为我们此次的设计目标。


A.业务目标

业务目标就是此次业务想要解决的实际问题,它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车,减少等待焦虑。我们一般通过文档或者沟通来了解该目标。


B.设计目标

设计目标是我们基于业务目标而给出的设计策略,是一种更具体的实现方式。比如我们要让用户快速的打到车,那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配,并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有:司机位置、乘客位置、等车时间、补贴金额等元素,并需要思考它们之间的关系和呈现方式。


可以发现从业务目标转化到设计目标这个过程,实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。


3.2信息架构核心:信息组织

从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理,直接堆叠在一起,那么信息含义会比较乱且难以调用。比如下方:

而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类再以某种结构化的形式将它们重新组合排布的过程,直白一点就是先分类,再结构化呈现。我用一张图来表明这个过程:

那么这个过程中「信息组织」和「结构呈现」到底应该怎么做,也就是接下来要讲的组织方式和结构类型。


3.2.1组织方式:模糊分类和精确分类

组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类,比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的:

而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类,比如我们常用的APP商城是按照不同的主题类别来进行区分的。

但在很多时候,产品倾向于将两种组织方式结合起来形成复合型组织方式,从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织,其中既包含了模糊分类(按使用类型等分类),也包含了精确分类(按上传文件时间等)。

其实在大部分B端产品中,大都按照模糊分类来进行处理,比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块,比如创建时间和文件大小等。


归根结底,我们分类方式的选择需要结合我们前面提到的用户、场景和目标,这样才能让我们的分类更具说服力。


3.2.2组织结构:选择合适的结构类型

当信息按照分类维度组织后,我们接下来就是把整体信息进行结构化,这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式:


A.层级结构(最重要的结构)

这是信息架构中最为常见的结构,也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。

层级结构的优势就在于可以承载复杂的多层级内容,通过层级递进的方式将复杂的多层级拆解得更简洁。


但我们需要把控好内容的广度和深度,广度指的是在层级结构中每一层的数目,最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息,增加寻找内容的负担。深度为纵向结构,建议一般3层,最多不超过5层。过深的层级会让用户点击很多次,且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。


B.矩阵结构(多维度结构)

矩阵结构是各个节点都相互连接的一种信息架构方式,通俗来讲就是用户既可以通过多个维度去触达同一信息,也可以从单个维度连接多种信息。

这种结构其实就更类似于我们在做相关功能时:比如当你进入电影全屏时想要退出时,既可以通过点击按钮退出,还可以通过键盘的Esc返回到,通过多点触达同一操作。


又比如我们的联系人功能,我们既可以通过输入数字拨打电话,也可以查找联系人进行拨打,还可以查询电话记录进行回拨。

矩阵结构最重要的意义在于给用户提供多种路径,使用户能够在不同路径中寻找各自想要的东西。


C.自然结构(随机性)

自然结构不遵循任何一致的模式,节点都是被逐一连接起来的。

自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台,你很难猜到刚进入看到的是什么。

但一般自然结构不会单独存在,比如B站在自然结构中也绑定了层级结构来进行层级上的划分。


D.线性结构(单一性)

线性结构是非常单一的一个结构,整体是一层一层向下递进。比较强调先后顺序的一种结构。


这种结构通常用于我们常见的软件安装程序等,也可以用于部分功能结构,比如网站的视频发布,一般都是经过上传-编辑-发布这三个步骤来依次进行。

大家可以发现在进行信息架构时,我们在很多情况下可能会运用多种组织结构方式,我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。


3.2.3注意事项:关注用户心智模型

在信息的组织过程中,我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知,看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯,这都属于用户的心智模型的内容。


因此我们在组织信息时尽可能不要去打破用户常见的心智模型,否则必然会导致用户的不习惯。我们常见的「扫一扫」功能,微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。

这样会导致用户难以发现该功能。因为用户接触新的信息时,会以最初接触的局部信息为依据展开并形成初步认知,用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。


虽然建议在一定程度上遵循用户心智,但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语,我们需要通过灵活有效的提示(比如标记注释等)来引导用户就可以了。比如我们刚才提出的抖音扫一扫,它的应用场景其实是用于抖音官网后台登录,且在后台登录时已经给出了对应提示,那么这样的设计也是合理的。


3.3信息架构支撑:标签、导航和搜索

当经过上面的信息组织,其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外,我们还需要关注以下三点:标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。


3.3.1 标签系统:让信息识别更通用

标签系统,通俗来讲就是要我们对当前整个系统信息节点的命名,从而让信息的呈现更容易识别。拿个最简单的例子来进行说明:

可以看到左侧和右侧关于卫生间的信息标示,可能左边你能一眼区分,右边可能就需要反应半天才能猜出到底代表什么含义了。


这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景,也就是我们标签作用所起的作用。标签可以分为图片和文字标签,都需要考虑用户对该信息命名的认知程度,也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢,这里需要注意2个方面:


A.优先选用被行业广泛接受的词或图标

在进行标签定义的时候,尽量选择已经被用户所熟知的词语,比如「工作台」「通讯录」等已经被运用得非常熟练,对于类似功能就直接以该形式命名,比如我们的设计软件中,很多图标和功能名称都是通用的:

这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业,哪些名词已经达成了共识,就无需再造新名词。


B.不确定的词语可以参考竞品或调研来决策

当某类功能或场景的标签难以确定时,我们就可以尝试去找一下竞品是否有类似功能,或者找该行业的领头羊(比如聊天工具的巨头微信),那么在进行标签定义的时候,可以参考它的命名体系。因为它已经替我们教育了一部分用户,会间接降低学习成本。


如果某些标签在上述过程中还是无法确定,那么我们结合自己经验或者与咨询业务相关人员来进行讨论,在必要时候可以在标签旁边添加注释来进一步说明。


3.3.2 导航系统:让用户不迷路

导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样,导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。

因为网上关于导航系统已经有很多资料的讲解了,在这里阐述下四类导航的含义:

1.全局导航:位于页面最上层的导航,用户几乎在页面的每个地方都可以看见,是最高层级的导航系统;

2.局部导航:位于最高导航的下级子类导航,子类导航并不是必须的导航,根据场景进行取舍;

3.情景式导航:通过点击文字链接进行跳转的导航,比如在个人资料里面植入其它网站的链接地址;

4.辅助导航:这里包括网站地图,网站索引,网站指南等辅助类型的导航。


辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导,是当用户在进行某些功能的操作时及时进行提示,这样不仅达到了为用户引导的效果,还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后,只有当你调用组件功能时,才会及时进行提醒。


3.3.3 搜索系统:让用户轻松找信息

搜索,是我们平日最常用的查找信息的功能,它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要,但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点:

1:内容复杂度:当前页面承载的内容复杂度如果较少,对于简单内容页面往往不需要搜索;

2:内容性质:当前页面的性质是偏向于用户浏览还是查找,根据用户行为来决定是否需要搜索;

3.搜索场景:如果搜索场景很简单,考虑是否只用筛选或分类就能够解决问题;反之如果搜索内容很复杂,我们还可以搜索结合筛选来更好的查找信息;


上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点,比如搜索规则和搜索结果等,在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。


3.4信息架构表达:视觉化你的架构

我们通过上述方法已经知道如何梳理信息架构了,那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。

在学习的过程中,发现部分资料认为信息架构就是单纯的指思维导图,但实际上信息架构并不能单纯只用思维导图就能够完全表示。

因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式,其可以帮助我们在思考阶段梳理整体产品的信息构成。


这里抛出一个很有意思的观点,那就是「功能结构图」和「信息架构图」到底什么关系,这里用两张图示例:

可以看到,功能结构图更多体现的形式是功能阐述,一般形式为名词+动词,比如头像设置;而信息架构图重点呈现的应该都为信息元素,一般为名词,比如头像图片。

但在大多数时候我们看到的产品架构图,其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。


因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制,只要能够帮助你清晰表达产品整体结构就行。《信息架构:超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义,其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式,其表达如下:

可以看到其表达形式包括思维导图和流程图等形式:思维导图的优势是能够总览全局信息,查看信息的深度和广度,而流程图的优势则更能够表达整体的逻辑关系。


因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥,而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果(类似于中间态),我们需要借助它来更好的阐述思路与沟通想法。


3.5信息架构之后:让信息具像化

在输出信息架构之后,其实这里想聊一聊页面的呈现。因为当梳理好大的框架后,剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段,其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点:

A.页面能够让用户看懂

这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息,反思一下是在哪个方面做得不好。是标签系统含义模糊呢,还是信息的组织分类方式不对。从页面呈现倒推信息架构。

综合来说就是设计时的排列要考虑用户的心智模型(比如网页的常规排版和通用名词定义等),对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的,但我们可以尽量减少其学习成本。


B.考虑用户的视觉动线

当我们在进行信息排列时,这时需要思考的就是用户的视觉动线,也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说,采用不同的动线模型能够让用户更好地查找信息。

F模型和Z模型的使用区分其实就是在使用场景上,对于内容页面来说F模型会更为合适(比如文章或者搜索结果),适合文本类的内容。但对于非文本的页面,则更适合用Z模型,Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右,从上到下,能够更好引导用户的视线。


C.掌控好适度的信息层级

B端由于在视觉的发挥空间不多,那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。

不管是原型图还是视觉,整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多,需要考虑是不是因为信息架构设计时纵向层级过深,通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。


当我们做完或者听别人阐述对应的信息架构时,该如何评判呢,到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断:

业务层:

1.设计目标合理:能平衡商业目标和用户的目标,保证客户和用户都有较为良好的体验;

2.核心任务目标:能够让用户顺利完成产品的核心任务,需要通过用户测试来进行验证

结构层:

1.平衡广度和深度:在进行功能使用时不会隐藏的太深而找不到,是否有冗余步骤

2.保证拓展性:当前信息架构在面对未来新增或者删减信息时能够稳定拓展

体验层:

1.保证易读性:用户不经过介绍,通过页面信息呈现能够看懂该产品是用来做什么的

2.保证易查找性:用户在需要某个功能时能否快捷的找到,是否有多种查找方法(比如搜索或筛选)


合理的信息架构需要具备以上条件,我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足,这个时候我们需要根据业务目标的重要性来选择某些点进行满足。


梳理一下整体文章的架构,其实是按照「是什么-为什么-怎么做」的形式来进行拆分的:

这篇文章想要表达的观点,不是让设计师独立去梳理整体信息架构,而是让设计师拥有信息架构意识,了解其是如何进行并产生的。这样你在看到整体架构时,有足够的理论支撑去判断它的好坏,并通过自己的理论认知去理解和改进不好的地方。


当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出「正确的设计」,避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。


注:文章中不可避免会存在不足之处,如果对文章中内容有更好建议,欢迎随时交流。


  参考资料:

《web信息架构》第四版

《信息焦虑》

《用户体验要素》

《信息架构设计》

「从设计前/设计中阶段,了解信息架构知识点」

「互联网产品如何搭建信息架构」

文章来源:进击的M(站酷)
作者:进击的M

转载请注明:交互深耕-B端设计师要懂的信息架构

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

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

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

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

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

数据滞涨,交互如何破局

ui设计分享达人

作为设计师,日常工作中我们经常要思考如何吸引用户转化。如果仅把“界面设计美观”作为设计的发力点,很难形成完整的判断链条,完成预期的商业目标。因此,在交互行为层面尝试“破解”用户行为发生的背后原因,通过科学的方法“设计用户行为”就变得更加重要。

行为设计领域有三个非常重要的模型:福格行为模型,成瘾性模型以及峰终效应。其中福格模型在辅助我们做行为预判的过程中扮演了重要角色。

福格模型是以耶鲁大学教师 Fogg,2009 年发表的一篇论文为中心,阐述了任何一个行为的发生,都需要满足以下三个要素:


任何一个行为的发生,都离不开3要素:动机、能力和触发器。因此在设计时需要考虑:

人们是否有产生行为的动机、发生行为的能力,以及一个合适的触发点。

  • 高动机高能力

这类用户有付费动机且熟悉产品使用流程,属于高价值用户,是产品的真爱粉。在后续设计过程中,我们可以收集用户反馈,并针对问题改善体验就行。

  • 高动机低能力

这类用户需要降低门槛,必要时可以提供帮助和引导。提高操作能力,优化用户体验。例如一些应用为低能力群体设计“专属版”,如针对老年人,推出适老版应用,精简用户操作步骤,突出核心功能,便于这部分用户完成产品主流程操作。

  • 低动机高能力

这类用户需要提高动机,可以结合马斯洛需求层次理论找出用户不同阶段的需求。分析用户需求,挖掘用户痛点,寻找用户动机。例如“分享领取大额优惠券”、“每日签到送积分”、“走路得能量”等,我们可以同过激励来增强用户动机。

  • 低动机低能力

这类用户需要适当放弃,投入产出比较低,不属于我们的目标用户。



本次将以 “为家人购买保险” 的优化过程为例,分享运用福格模型把行为设计和商业场景联系在一起。通过设计引导用户行为进而助力产品转化。


  • 背景:

用户在为自己成功投保“医疗险”后,会为本人再推荐一份其他险种的产品,打造“完善双重保障”的概念。但某年龄段岁下的用户因保费过低,在收入来源中属于ROI较低的群体。

  • 产品目标:

希望该年龄群体在为自己购买完保险后,优先推荐为“家人购买”,因其所获得的商业价值效益更大。预期通过为家人购买保险,拉动这部分用户的整体ROI。

  • 设计目标:

引导用户为“家人购买”一份“医疗险”

用户已经为自己购买过一单保险的情况下。大部分用户具有健康保障需求,其本身也有购买保险的动机。在模型中偏向于“高动机”人群,

本次设计的发力点:强化这部分用户“为家人购买”的动机,降低购买保险的行为成本,同时在适当场景给予用户触发提醒。


我们一般通过两种途径增强用户的行为动机:心理刺激和物质刺激。

心理刺激

1.营造稀缺性:通过限时限量等方式营造稀缺性。

2.强化“家庭健康保障”需求。安全需求是人的基本型需求。通过“父母有保障,我更安心”等文案迎合用户对安全生活的向往。

3.显示社会认同信息。寻求社会认同是更好一层的心理需求。通过标签外露承保公司名称,寻求社会认同,并侧面透传出专业性,建立用户信任感。


物质刺激

“物超所值”,便会促进行动。在顶部向用户宣传为家人买的“产品优势”,增强付费动机



我们可以通过降低用户门槛,来提高用户完成这件事的能力。

1.降低门槛—降低用户成本(金钱)

1元为父母升级,降低用户参与成本。

2.降低门槛-降低操作成本—简化选择(时间)

根据业务目标,指定最优推荐策略。如本次流程最优推荐策略是为父母购买,去掉可能影响用户决策的其他选择项,改为仅显示最优推荐策略下的唯一指定模块。

3.降低门槛-降低认知成本—结合图像(精力)

“ 产品适用群体图片+文字”的表达,在当前情景下可快速传递信息。便于用户快速理解当前流程是在“为谁购买保险”,从而降低以往用户将“家人身份信息填写错误”的情况发生。这样设计减轻了用户的认知成本,提⾼了信息传递的效率。


1.触发器“醒目”

  • 胶囊形状的「提交订单」按钮在“方形卡片”上十分醒目,是触发用户行动的视觉提醒。

  • 简洁按钮文案设计,如“限时升级”,将有助于加速用户的决策,从而促进转化。




在日常工作中,可以借助福格行为模型解决商业目标中的引导、转化、留存等问题。在做设计时,我们首先也需要思考设计目标 : “我们想要用户发生什么行为?”

我们可以通过福格模型从“动机、能力、触发因素”等角度进行设计思考,更加深入的理解用户行为背后发生的原因和影响用户决策的因素,帮助我们更好的完成产品优化和体验升级,最终达到商业目标。


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

文章来源:站酷 作者:YedLab
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


引诱整理的艺术——交互设计助力优质的用户体验

ui设计分享达人

我们生活在一个信息大爆炸的数据化时代,随着网络科技的飞速发展,产品和用户之间的互动也日趋复杂,新功能不断涌现,带来便利的同时也导致用户对功能的认知摩擦日益加剧。在这种情况下,人们对交互设计的需求就越来越大,市场对交互设计师的需求也越来越多。许多公司都注意到交互设计对品牌创建、用户满意度以及回头率等方面的影响。那么,什么是交互?交互设计应该做什么?希望今天这篇文章,能够加强你对交互的理解。




undefined

交互就是与另一个人或者物进行交流互动,比如你说话或按动鼠标,对方给你反馈,这就是交互。对于设计师们来讲,交互多指用户与计算机、手机等产品进行的交互。


undefined



undefined

交互设计是一个页面或者一个界面的内容规划,例如哪里放图片,哪里放按钮,哪里出现文字;或者说是一个庞大网站以及产品的整体逻辑梳理,例如如何安排信息层级,如何让用户更轻松地找到自己想要了解的信息,如何让整个网站或产品更加合理、有效地运转。


一个城市有合理的规划交通才会便利,城市里面的人才会觉得更加舒适,而一个合理的交互设计也直接影响着一个网站、一个产品甚至一个品牌。



undefined

视觉设计是感性的,更注重一切表象的东西,比如颜色、版式、形状、调性等,视觉设计最终的成品是视觉的效果图设计稿。


交互设计相对来说更加理性,交互设计更加注重用户是谁,通过需求分析得出问题、解决问题,交互设计的最终成品是原型图。



undefined

看过了文字解释,再让我们一起来看看生活中无处不在的交互设计。


叠猫猫、盖楼、星秀猫……每年双11,天猫都会创新活动,激发用户对双11购物节的期待,营造蓄势。


今年的双11的主题为喵糖总动员,用户通过组队一起做任务赚喵糖,通过掷骰子的方式获取糖果数,占领格子,击败对手。获取喵糖的过程中,营销或引流设置无处不在。除了做每日签到奖励的简单任务外,最简单的方式就是用15秒的时间去浏览平台推送给你的主会场、各大分会场、各细分品类、各个商家店铺等页面。通过这样的任务设计,可以引导用户浏览会场店铺或各品类商品,最大程度地完成各个淘宝店铺的曝光需求。


undefined undefined

天猫双11-喵糖总动员活动页面


新冠疫情还在持续蔓延,飞猪App贴心的在行程页面,添加了防疫工具引导栏,通过点击按钮,可跳转至支付宝中行程码、核酸预约等界面,为用户出行提供便捷的准备工作。


用户在滑动页面时该导航栏会被隐藏,静态时则显示两个应用,点击展开才能查看更多。设计采用浮层式引导,提供便利的同时,且不会对用户产生干扰。


undefined undefined

飞猪App界面


一切交互设计所要达到的效果就是形成良好的用户体验,让用户在使用界面时更方便找到自己感兴趣的东西。


通过地图及定位,通过气泡及icon的区别,把附近的美食等进行排名,让用户更快知道自己的距离。还设置了点击卡片展示店铺信息同时支持查询路线等功能。


undefined undefined

美团App界面


“优秀的设计是考虑周到且不放过每个细节”。往往在那些不易被察觉的细微之处,倾注了设计师的诸多巧思与心血,哔哩哔哩在设计中做了以下一个有趣的小细节。


在账号登陆页面,当我们输入账号或者手机号的时候,页面插画中的22和33是睁大眼睛的,而当我们输入密码或者验证码的时候,他们则用手捂住了眼睛。这个有趣的设计生动地传递了App对用户隐私的尊重与保护。



undefined undefined

哔哩哔哩App界面


当你使用百度搜索物品,查看图片时,左右滑动即可切换下一张图片,上划即可关闭图片,这样的操作手势,更加方便快捷。


在查看物品图片时,下方还会出现商品推荐购买链接,仿佛“一站式”购物的贴心服务。


undefined undefined

百度App界面


交互设计的核心目的是信息的传递,无论如何设计交互图、如何设计交互流程,我们要思考的核心和准则是如何把想要传递给用户的信息以最简单、最容易的方式让客户接收,反之用户也能用最简单的方式找到自己想要的信息。


这些信息包括内容、按钮、文字、图片等一切信息的载体。我们要明白在进行交互设计时的前提是如何去梳理信息更好地传递。


那么,如何才能让信息更好地进行传递?我们要搞明白信息传递时需要营造什么样的氛围,哪些信息元素需要突出,目标用户是谁,根据这些才能以一个正确的方向有逻辑地进行交互设计,而这一切的最终结果就是实现一个良好的用户体验。

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

文章来源:站酷  作者:全速设计
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

日历

链接

个人资料

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

存档