1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

时间:2020-06-18   分类:交互设计    作者:网络   来源:网络整理   点击:171

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

本文来自九分网络

copyright 9fen.net

日常工作中,经常听到交互和视觉同学有着如下对话: 内容采集来自9fen.net

视觉同学:「这个内容我想换个位置,可以吗?」「我可以用另外一种布局方式嘛?」… 内容采集来自9fen.net

交互同学:「你这里的表达有些歧义,用户容易误解,需要修改。」「这里层级关系不太对,应该更强调XX内容。」… copyright 9fen.net

可以看到,无论交互还是视觉同学的提问,其实都是围绕「信息」表达的逻辑。视觉同学设计过程中,应该如何理解交互稿件,并进一步体现交互的层级逻辑?是否可以对交互稿的布局进行调整发挥?我们通过案例来一起看看。

内容采集来自9fen.net

目前,页面类设计一般分为运营型和平台型。

本文来自九分网络

运营型

关注重点:「活动利益点」「模块内容顺序」「视觉发挥空间大」

www.9fen.net

活动页设计中,信息的层级表达相对简单,一般分为主氛围图-体现活动主题、内容展示区-直接转化、尾部兜底区-相关扩展。这类型需求,重点在理解交互稿中主题的表达、内容区的分类及重点元素体现。视觉设计师在该类型的设计中,发挥度是很大的。

copyright 9fen.net

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技 本文来自九分网络

www.9fen.net

平台型

关注重点:「层级结构」「浏览顺序」「视觉在信息逻辑之上发挥」

九分网络

平台类设计项目,交互设计师通过页面框架、模块设计来表达产品/运营的策划思路,涉及内容及模块更多,且包含着复杂的逻辑关系。一个优秀的平台视觉设计师,应当是通过好的视觉表达,按照交互信息层级关系,将信息内容传递给用户。这里视觉同学要避免两个误区:完全按照交互框架和排布,只是纯粹填色;从「好看」的角度重新布局,忽略交互层级关系。

copyright 9fen.net

案例

下图是美妆频道的一次改版,通过观察交互稿和视觉稿可以看到,这位视觉设计师在交互稿的基础上,采用了更灵活的视觉引导方式。这些改变是否有效传递了交互逻辑?视觉阶段的这些调整是否都合适呢?看完本文,你就能有一个清晰的答案了。 copyright 9fen.net

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技 九分网络

本文来自九分网络

1. 元素位置及表意

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

九分网络

九分网络

浏览顺序 元素表意

九分网络

这是一个新品速递模块的设计方案。交互稿表达的信息是:这个区块是用来介绍新品的,首先希望用户知道模块属性是什么,然后让用户快速了解推荐商品是什么,及为什么值得买。视觉稿较好的传递了交互层级及信息表达,首先突出了栏目名称让用户能一眼看到,其次是商品及商品特性展示;而稿件中的栏目名称位置和样式则在视觉上做了自由的发挥。

本文来自九分网络

小结:模块中各元素的浏览引导(眼睛浏览路径)需要严格按照交互逻辑,元素的表达和位置可以根据逻辑发挥。 www.9fen.net

2. 模块比重及样式

下面这组案例,在信息层级上,视觉稿是否完整传递了交互逻辑?先自己思考一下吧~ 本文来自九分网络

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

九分网络

本文来自九分网络

模块比重 内容布局 www.9fen.net

交互层级来看,整个区域有2个模块「正在进行」和「品牌精选」,每个模块有4个等大的展示单元格。而视觉稿中,「正在进行」模块的单元格变成了两大两小。严格来说,这个调整是不符合交互逻辑的。 九分网络

但是,视觉稿的输出效果明显更灵活,浏览层次更佳!那,能不能这么改呢? www.9fen.net

这需要回到,为什么交互输出时,画成了等大样式。在交互环节,运营侧提出四个专题希望是相同层级,无优先级的差异。

内容采集来自9fen.net

这种情况下,视觉同学如果仍然坚持有层级差异的视觉感官更好,可以先和交互同学一起商量,从用户体验的角度来看,这个改变是否有严重影响,如果团队内部也都认为改动后的效果更佳,可以一起找到对应的运营同学,说明原因,建议他们进行调整;同时去了解这样的调整对业务方的业务表达是否有影响。 www.9fen.net

小结:视觉表达要关注信息模块的比重,视觉侧好的想法也要直接提出和交互及业务方讨论 www.9fen.net

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

www.9fen.net

内容采集来自9fen.net

上面这个案例也是关于模块比重的,最大的差异在于栏目名称及入口的调整。从不强调楼层名称变成楼层名称成为模块的视觉焦点,因涉及到模块比重,类似的改动也建议和交互设计师进行讨论。同样,该案例的改动,丰富了楼层样式,并通过标题模块强调了楼层的调性氛围,同时并未对用户阅读体验造成不好的影响,因此是个视觉提升交互表达的优秀案例。

www.9fen.net

京东团队出品!视觉设计师应该掌握的五类交互逻辑--九分科技

九分网络

九分网络

标签: 交互设计 优设 优设网 视觉设计 交互逻辑

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----