首页

数据可视化大屏设计经验分享

涛涛

数据可视化设计的一些技巧



一、什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了“可视”,还可有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。



二、什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论、决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。



三、大屏数据可视化设计原则


设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。


那什么是业务需求呢?

业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。



先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。



四、大屏可视化设计流程


1. 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。


2. 确立指标分析维度

同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。


我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。


我们可以从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。

1.联系:数据之间的相关性

2.分布:指标里的数据主要集中在什么范围、表现出怎样的规律

3.比较:数据之间存在何种差异、差异主要体现在哪些方面

4.构成:指标里的数据都由哪几部分组成、每部分占比如何


3. 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里,筛选出最能体现我们设计意图的那个就好了。选定图表注意事项:易理解、可实现。


易理解:

就是可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。


可实现:

(1)我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现。

(2)我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难。同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难。


所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计!一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放。


4. 制作图表

当确定了要使用哪些图表做图后,开始进入制作流程,影响最终图表展现效果的元素一般分为两个层面:


非数据层:

不受数据影响样式的元素,比如说背景、网格线、外边框等等。这类元素起到的是辅助阅读作用,但如果不加处理全部放出,视觉上会显得杂乱和不够简洁,干扰到你真正想展示的信息。对于这类元素,应该尽量隐藏和弱化。

隐藏

·去除不必要的背景填充

·去掉无意义的颜色变化

·去掉不必要的外框

弱化

·坐标轴淡色或隐藏

·网格线淡色或隐藏


数据层:

受数据影响样式的元素,比如说柱状图的柱条长度,柱条颜色,柱条展示个数,气泡图气泡大小等等,这类元素的展示效果和图表本身的数据息息相关,一旦图表本身的数据比较极端,有可能会使得最终视觉展现不尽如人意,我们无法改变具体的数据,是否就完全无法操控这些元素了呢?


精简数据项

在做数据报告时,不管有多少数据项,为了完整和精确性,所有的内容都会显示出来,但在大屏中,如此满的数据展示,不但忽略了视觉体验,还会让用户抓不住重点,对于饼图来说,建议扇区个数不要超过5个,例如保留占比前5的扇区,剩下的非重点数据全部归到“其他”。


保留前五或后五

如果柱状图的数据项过多,展示时会过于密集,建议先把数据项按照数值大小排序,只保留前五或后五的数据项。


5. 页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

6.可视化设计

根据选定的图表类型进行合理的可视化设计。目前来讲大屏可视化主要有:指标类信息点和地理类信息点两大可视化数据。


指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通的。

地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。


数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而弱化了数据的展示。



7.样图沟通确认

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个“低保真”原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。


因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

1.之前确立的布局在放入设计内容后是否依然合适;

2.确立的图表类型带入数据后是否仍然客观准确;

3.根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受;

4.已有的样式、数据内容、动效等在开发实现方面是否存在问题;

5.大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。


大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现。所以这一步在样图沟通确认环节非常重要,有时候需要开发出demo,反复测试多次。


8.页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。


一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。


9.整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。


视觉方面的测试:关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。


性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在奔溃、卡死等情况;后台控制系统能否正常切换前端页面显示。



五、大屏设计的注意事项


1. 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

如果页面是云端部署,需要嵌入字体包时,我们可以使用FontCreator这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。

一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字


2. 颜色搭配

(1)色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色


3. 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各小的显示单元,并尽量避免关键数据被拼缝分割。



六、问题


设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。

因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现。如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。



文章来源:优设  作者:Captain相 

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




设计师如何管理并落地项目

涛涛

一些日常工作心得 总结




随着工作年限的增加,项目经验的丰富,在能力提高的同时,设计师更应该注重团队管理能力上的提升,互联网公司不论规模大小,但基本的开发流程是大致相同的,基础配备岗位如下:产品经理、UI设计、前后端开发工程师。测试人员配置不一定有,所以这边就不列入了。以上是最基本的人员配置,该有的流程并不可少,今天我拿目前所在公司的日常工作流程聊聊心得,有时间你就慢慢往下看。


各岗位的工作流程如下:






根据流程图我们很清楚,哪些任务是优先可以发起的,哪些任务是上一个做完才能开始的。今天重点介绍在设计环节,作为一个设计leader,是如何开展并推进的任务的。


一:需求原型理解阶段


设计环节前期,设计师会收到来自产品经理的原型图,以及需求文档,这时候作为leader的你,首先应该了解整个产品的架构与逻辑,并且通过口头交流、书面记录的方式,把你的疑虑与产品沟通进而了解最终目标。只有你自己搞清楚整个产品逻辑与目标,后期才能对其他协同设计的人员遇到难题时,进行一些思路梳理。



二:交付原型于协同人员


通过第一阶段,你已经明白了整个产品逻辑和目标,这时候你就可以将原型图派发给其他协同人员,让他们先浏览理解,并在必要时给出相应疑虑讲解,帮助其理清思路。


三:出主视觉风格设定稿


第三阶段,你通过对需求的分析,对竞品风格的探索,出具2种主页面风格定向,并提交上级领导审定。这里注意的是,并不是越多种风格越好,一定是你经过一系列思索后,给出2版你认为最有说服力的即可。


四:启动设计


风格落定后,你应制定一套视觉规范,对于大多数小伙伴来说很疑惑,我也疑惑过。你还没设计,怎么知道你真正想要的是什么颜色什么字号?这里我建议是,部分设计稿出来再做规范,然后慢慢的完善。但是起初一些基本的样式,包含颜色、字体、栅格系统等基础规范,是可以先落定的。并根据原型统计页面,进行任务分配,并沟通完成时间。


其次对于一些内置组件,比如展示型图标、底部tab切换,尽可能让同一个人来负责,便于风格走向统一。至于一些内部动效,可根据团队成员擅长领域进行分配,例如我对交互动效比较擅长,我就可以负责这块。


注意事项:为确保设计规范统一规范,统一蓝湖协作工作流(每个公司协作平台不同),参与设计协作人员,设计过程中新增组件样式应及时告知协同人员(以免出现你新增了,对方不知道,造成多种样式情况)

五:任务排期表


通过使用甘特图进行排期,不仅对于你可以了解整个设计进程,同时也让领导清楚项目进度。


六:UI前端配合调试阶段


页面都设计好了,好记性不如烂笔头,以每个模快为单位,记录下你的整改意见给到开发,记得给他捶捶背,真的很幸苦也很烦心的一件事情。其实对于页面还原度问题,心里要有个数,95%还原,就很棒了,我有时候也不会死磕太细小且不重点的地方,尤其在项目紧急时候,把重心放在测试bug上更为重要(忽略我的字迹,字丑人还好)


七:总结


人物结束,进行一个复盘,哪里环节不够顺畅,是沟通问题,还是效率问题,都可以记录下来,下次改进。



文章来源:优设  作者:我是黄烁啊

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





Web产品的适配设计选型

涛涛

产品设计的初期,为了让产品覆盖到更多终端,需要对网页设计进行响应式和自适应设计,制定界面适配规则时,你是否也有过如下疑问


开篇


  • 宽度单位我是用百分比还是px?还是rem?区别是什么?

  • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、css像素?浏览器窗口大小和设备大小和分辨率大小区是什么区别?

  • 什么是响应式网站,自适应又是什么?两者有何区别和联系?

  • 百分比宽度布局和流式布局和前者的关系是什么?

  • 既然响应式这么流行,为何淘宝、京东等没有去做,而是单独开发了一个移动端版?这里面有那些坑需要避开?



历史长廊


在早期,硬件设备落后,网页使用的是绝对静态布局为主,绝对固定宽度的布局被称为是静态布局(StaticLayout),也有叫固定布局(Fixed Layout)。


后随时代变迁,技术发展。因浏览器的增多,开发者们忙于兼容各种浏览器。在这个期间,实际已经有了针对各设备适配的解决方案,只是未成为主流,这种新布局方式叫自适应布局(Adaptive Web Design,简称AWD)。

在当时,大多指的就是宽度自适应布局。在这种新思想下,又出现了两派的具体解决方案:百分比宽度布局和流体式布局(Fluid Layout)。


在当时,大家都还没有响应式布局的概念,但此时出现了一个新的词--渐进增强。渐进增强出现后,另一个词优雅降级也随之出现了。这里只是举个典型的例子:gmail和qqmail。这两个都是百分比宽度布局,都属于自适应布局,但有区别。


qqmail就是css hack的完美体现,你用任何一个浏览器,几乎可以看到同一个样子的邮箱,为的是用户体验统一。gmail则使用了渐进增强,你的浏览器越新越强,你看到的效果就越好,为的是用户体验增强。再后来,Google发布了Android,移动互联网爆发,html5标准发布。


互联网大战从PC打到了手机。手机虽然屏幕变小了,但是却提供了更丰富的功能,用户要求不断提高,网站更加看重的是用户体验了,所以,谷歌式的渐进增强被广泛认可,结合自适应的思想,出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。


描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备。



现如今,为何需要考虑多设备的兼顾呢,依然是因为时代发展与生活方式的变迁:

  • 即便是PC或Mac用户,有查显示只有一半的人会将浏览器全屏显示,而剩下的一般人使用多大的浏览器,很难预知;

  • 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加,“主流设备”的概念正在消失;

  • 屏幕分辨率正飞速发展,同一张图片在不同设备上看起来,大小可能天差地别。

    结合自身产品用户访问浏览器分辨率

  • 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下,选择适合自身产品的布局实现方式。


布局方式对比


静态式、自适应、流体式、响应式布局,A+R混合布局的特点对比如下


静态式布局:

窗口缩小后内容被遮挡时,拖动滚动条显示布局。不管在哪种设备,哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。



自适应布局:

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。


分别为不同的屏幕分辨率设备设计不同的样式布局,相当于多个静态布局组成的一个系列合集,每个静态布局对应一个屏幕分辨率范围,页面通过百分比自动适配设备屏幕分辨率和可视窗口大小,当可视窗口改变时,不会出现横向滚动条,UI,图片,文字会自动缩放,元素内容、布局、交互方式基本不变。



弹性布局:

以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果。



流体式布局:

属于自适应的一个子集,也是通过百分比自动适配设备屏幕分辨率和可视窗口大小,不同于百分比自适应的是随着窗口大小的改变,页面的布局会发生小的变化,可以进行适配调整,这个正好与自适应相补。



响应式布局:

如果从广义上讲,响应式布局实际上就是更好、更机智、更灵活的去实现自适应,他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性(如宽高)的变化。


页面的设计和开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和删格、布局、图片、css media query的使用等。


狭义上讲,响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。



A+R混合模型布局

R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。


他们之间主要的区别是DOM结构,当采用响应式思维开发时,HTML代码在各种情况下都会一样(除非你用JS移除某些DOM节点),而在自适应开发中我们可能会有不一样的代码结构和体验。


R采用流体+断点,在断点之间,页面依然会随窗口大小自动缩放(通过fluid grid),直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始(通常采用mobile first策略),所以旧的网站要做RWD很可能要完全重建。


A只在针对几种分辨率(如320,480,760,960,1200,1600px)进行优化,在断点之间的自动过渡比较少。而A则采用保留现有桌面网站(desktop version)而对于更小的分辨率做针对性的优化(适应),减小重构的成本。



两种设计思维都是有效的,需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计,例如通过自适应开发来构建定制化体验。


两种方法各有利弊,但是如果同时使用它们到底会得到什么呢?A+R模型结合了基于单个主要临界点的自适应和响应式方法。


混合式布局就是为不同终端设备的屏幕分辨率定义布局(适配各种尺寸的PC、手机、穿戴设备等等),在每个布局中,页面元素随着窗口调整而自动适配,混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。



自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。


很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能是保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点,后面内容会讲到)保持统一逻辑。


否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式,非等分的多栏结构布局则需要采用混合布局的实现方式。


选型

如何考虑实践过程中的判断呢。一是看应用场景,二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。


但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上,识别UA,渲染不同版本的模板,组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时,维护成本很可能会大到无法接受。即便分开做,架构上也要调整,后端服务化,应用层app化。


根据不同公司的技术特点,调整的成本也难讲是否可行。对于大型站,分开做更清晰,同时用响应式组件解决复用、功能同步的问题。总之,根据场景响应式可以从各种层面,各种粒度上做。这是现代web开发的特点。


建议开发一套响应式电脑网站(过渡到平板端,不过渡到手机端)和开发一套响应式手机端网站(过渡到平板端以下的尺寸,不过渡到平板端)响应式布局有可能造成冗余的代码较多,对研发的要求也更高,比如如何更好地让图片,适配,UI动画自适应各种布局。


大站还是要考虑数据计算和承载的问题,会对桌面和移动端输出不同数据,减轻压力。



实践与技巧

首先,我们需要了解几种分辨率的差别。


ps:原生应用可查询横纵两个方向的像素密度,通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率


以一个SaaS类后台产品为例,对于基本流量来自Web端网页的产品而言,需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况,数据来源百度统计,如图所示:



如上所述,选择适配方式时,设计目标为:区分web与pad端可共享的设计布局大于手机端,且产品规划上web端为主流量来源,pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡,于是判断需要选择A+R模式来完成产品的跨端设计。


自适应(A)方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点,根据全局统计信息定义,我们会得到一些相似处:

  • 左侧的可视区代表整个屏幕小于960px时的具体布局和内容

  • 右侧的可视区代表整个屏幕大于等于960px时的另一种布局



在使用响应式(R)技术时,我们可以利用主要临界点创建两个互不相同的体验情景,每种体验里,我们都可以在可用空间内定义二级临界点去调整布局。



通过结合自适应和响应的方法,我们得到A+R模型。利用自适应技术,我们将致力于体验和功能,作出两种不同的情景设计。使用响应式组件,我们可以处理上下文内的UI组件和布局。



这种设计方法要求设计师真正了解他们想要提供的体验,以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的,你的产品将具有很强的灵活性,但同时也很复杂。


因为你要处理不同的代码库和环境(非强制性),Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站,则可以根据移动用户的期望来检验它们是如何改变的用户体验的。


其他辅助手段


删格

栅格系统可以帮助我们设计,但却不能保证我们的设计。它有多种可能的用途,并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言,这是一项十分有效的辅助手段。


1. 列和槽(Columns and Gutters)列(Column)用于对齐内容。其中的槽(Gutter)是指相邻列之间的空间,把控页面留白,有助于分隔内容。



2. 页面边距(Side Margins)页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值,这些值决定了每个屏幕尺寸的最小呼吸空间。



3,用于组成栅格的列数称为列结构。8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分,将内容排列在4-4-4或3-3-3-3大小的文本框中,也有部分设计系统采用来24列的形式,如Ant-D

4,断点是指屏幕尺寸的特定范围,列结构、列宽、槽宽和边距都取决于断点。在这个范围内,布局会根据可用的屏幕尺寸重新调整,以获得最佳的布局视图。


如果较小的屏幕有足够的可用空间容纳内容,则列将按比例缩小。如果一列的内容无法在较小屏幕上显示,该列将垂直放置图文内容。

5,网格规则,列跟槽的宽度是以网格作为基本单位来做增减,所以应该先定义好栅格的原子单位,“网红款”8点网格指的是设计页面时,也应该遵循8点规律。值得注意的是,列跟槽的值尽量取8的倍数,但不是非得是8的倍数。


产品中各类元素应该遵循这个倍数原则(图标、组件大小等),不同的设计系统根据自身需求,设定这个规则。例如在Material Design中使用的是2X网格。

6.流体栅格与混合删格

流体栅格有不同宽度的列,固定的槽和固定的边距。流体栅格有灵活的内容宽度,根据屏幕大小变化在流体栅格中,列可以增长或收缩以适应可用空间。


混合栅格既有不同的宽度,也有固定宽度。在现代布局中,一些元素超出了网格边缘,与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。


如果内容宽度大于可用的屏幕尺寸,那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格,以充分适应内容。

结语


设计需在技术方案前介入,根据你的产品特点,进行设计方案评估,可借助的手段有删格,网格规则等,设计断点规则时,需关注设备的常见系统分辨率。


移动和桌面设计的差别远不止是布局问题。只要有足够的编程量,这些差别是可以通过响应式设计来解决的。事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。


但是,如果确实想要处理好平台间的所有差异,我们就回到了原点:进行两种不同的设计或者使用A+R的模型,在寻求合适的过程中,关注技术的革新。


A与B不是硬币的正反面,它们为了解决同一个问题而生,是同一种思想的延伸。



文章来源:站酷  作者:酷家乐UED

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



设计方向和优化方向寻找方法

涛涛

做设计、做交互、做产品前都离不开一个目的就是——拆解问题,达到XX预期,从而能提升自己的专业性,让方案更加具有说服力。那么,设计师应该如何找到符合自己的设计方向和优化方向呢?

为什么要去拆解问题?

案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化;
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。

如果不去拆解问题,你知道后续的该怎么做吗?

想要找到设计方向和优化方向的,收下这篇方法论!

设计拆解:想要找到设计方向和优化方向的,请你一定要看!

想要找到设计方向和优化方向的,收下这篇方法论!

我们知道了最直观的感受信息度和社交能力弱,但是这 2 点并不能作为优化目标和设计策略。

从该截图来看,满足了:

  • 个人属性:照片、语音、标签、星座、ID、性别等等;
  • 商业属性:下单、突出异性优势等等;
  • 社交属性:关注、提示关注、聊天、小游戏场景(右下角人物)、分享等等。

1. 信息是不是很满?

那么如果不去拆解问题,是不是就不知道如何补充信息了,那么也有社交感。用户在主动状态下:漂亮、萌妹、声优也就有社交了,那么用户在被动状态下是什么?

2. 是不是越想越乱,找不到方向了?

这就需要去拆解问题了,可以让你的思路更加清晰,保持在一条线上,形成大纲,可以挖掘更多的价值。

拆解问题的好处是什么?

还是同样的案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化。
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率,那么我们开始拆解问题:(前提是背景已经确认好的情况下)。

想要找到设计方向和优化方向的,收下这篇方法论!

那么背景交代的是需要强化社交关系提升信息丰富度和社交感。经过再一轮的拆解,是不是能感觉到,自己思考的方向也多了?

想要找到设计方向和优化方向的,收下这篇方法论!

我拆解问题后,获得的好处有:

1. 思维的扩展性

举个例子:信息丰富度为什么会让我觉得缺少一点灵活性?信息的展示,会不会又分为外在和内在信息?那么什么是外在信息?与同平台上的大神之间建立的关系转化为信息?

2. 逻辑的严谨性

  • 有逻辑线索可依,从而更容易找到问题所在;
  • 方案和过程都可以假设,但是假设是必须要建立在真实的场景下。

3. 产出结果的可视化

可以根据拆解,将问题变得更加清晰,从而找准发力点。

如何去拆解问题?

前面铺垫了那么久,现在回归正题拆解问题主要分为 2 种(对应着初级和中级水平,可视情况任选一种):

1. 以问题树进行拆解,将问题细化到一个点

还是以这个案例:

  • 背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化。
  • 目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。

想要找到设计方向和优化方向的,收下这篇方法论!

△ 这是提升信息度的模块,问题树太长,就只展示部分了

想要找到设计方向和优化方向的,收下这篇方法论!

△ 这是提升社交感的模块,问题树太长,就展示部分了

挖掘到以下功能(列举功能并记录,进行权重分析):

  • 关注模块需要重设计
  • 设计车队模式
  • 匹配度设计
  • 话题引流设计
  • 群设计(包含营销活动设计,展示打赏排名)等等

这是一个很浅的影响因素分析,到了这一步,很多厉害的小伙伴,甚至会更加详细。也就是说我们要将方向点,统统转化为机会点和业务新方向(那些一直抱怨没有发言权的小伙伴可以参考一下)。

想要找到设计方向和优化方向的,收下这篇方法论!

(全局问题树展示-举例就不做详细展开了,理解意思就行)

整合内容进行归类

拆分和定位分为:

  • 开发侧:标记为 K-1 +颜色,比如群内人数限制,开发能不能帮助解决,如果不能,转换至交互侧产品侧:标记为 C-1 +颜色。比如:车队设置,以及后续的商业演化;
  • 运营侧:标记为 Y-1 +颜色。比如:群内,该提供怎么样的营销策略;
  • 设计侧:标记为 S-1 +颜色。比如:交互处理,开发不能满足群内人数的扩张,该怎么做;
  • UI 该处理:如何让页面变得更加“温暖”,根据用户群来进行页面设计;
  • 题外话:交互在我看来,其实承担着衔接与沟通和分析的角色,整合内容看到问题其实对于经验要求很高(比如能看到商业机会),请尽量带着组内专业的人进行归类分析。

整合成一个表单:

想要找到设计方向和优化方向的,收下这篇方法论!

重复确认问题我们找到上级确认:是否与上级规划的方向保持一致,不合适也能及时作出修改。

  • 证明你的专业性
  • 让领导知道你们接下来做的事情是什么,产生了什么数据价值,将有价值的内容规划,融入产品层的大纲中
  • 暗示领导给资源,有些拆解出的目标问题,是不能单方面来解决的

资源规划根据权重比,进行资源规划。适用场景对于刚上手的小伙伴,请耐心的一步步做完,老鸟的话请直接一步到位。

2. 以用户的接触点进行设计

这一块的内容需用到用研部分知识,以数据为主用研为辅的情况下去进行拆解问题。相对来说,流程会更加的长,但是获得的结果更为准确一些或者说更加偏向用户想要什么。

流程漏斗数据图

还是以这个案例:(背景需要改动一些)

背景:某 APP 作为游戏类兴趣社交 APP,个人主页作为了解他人、建立社交关系的核心一环,目前信息丰富度和社交感偏弱,故需要进行优化 。(改为:导致流失率偏高,下单转化极低)

目标:页面改版核心以社交为驱动,丰富页面信息,提升用户建立社交概率。(添加:提升用户建立社交概率,从而能提升用户粘性降低流失率)

第一步:拉取数据(某一时间段,瞎编的基础点击事件埋点数据,看个意思就好)

想要找到设计方向和优化方向的,收下这篇方法论!

△ 假的有点过分了,嘿嘿

第二步:进行梳理

先进行大纲梳理(以业务流程为主,梳理出主要问题)

想要找到设计方向和优化方向的,收下这篇方法论!

△ 以用户直接进入个人主页举例

想要找到设计方向和优化方向的,收下这篇方法论!

第三步:假设驱动即解决复杂问题时尽可能的先找到一个合理的假设。比如:刚进页面就流失,甚至停留时间都很短,那么你立马给出的结论是:

TA 真丑,不符合我的审美,严重 P 图。

想要找到设计方向和优化方向的,收下这篇方法论!

第四步:找到用户做这类测试的时候,当然一定要去找玩游戏的用户且接触过陪玩的。用户找到-约时间-去用户能放松的地方-开始浏览该软件-进行定性测试。

第五步:汇总结果定性的方式有很多种:这里我举例一个「think aloud」:

使用 think aloud 的流程:

  • 提前告知被测用户你需要边操作边思考并且说出来
  • 记录被测用户的说话记录
  • 分析文本,归纳问题分类
  • 将分类嵌套至说话的文本中
  • 计算统计结果
  • 建议使用中位数测量

最后在经过数据分析得出问题的优化重点或改版方向。

补充一句,如果条件允许,使用卡片分类法,让用户自主的搭配,个人主页中功能位置。

小结:熟练分析话术,圈重点,找到核心的发力点。也能让思考过程更加结构化、可视化。不同的话术下,找到不同的方式,帮助快速解决问题,找准切入点和挖掘机会点和后续的跟进(要玩的流畅就取决于你的树结构的清晰程度了)。

拆解后的策略是什么?

策略其实在你分析的时候就已经产生了。

想要找到设计方向和优化方向的,收下这篇方法论!

当然啦,我们是一个 team,当你产生策略的时候,需要和团队内共同讨论方案的可实行性。

如何去验证拆解结果?

1. A/B testing

进行原版和改版数据对比,重点/想改进的数据有没有提升/下降就好了。

AB 测试就是指把少部分用户分成平均的两组,其中一组用户体验网站改版的 A 版本,另外一组用户体验网站改版的 B 版本,分别记录清楚相关的所有用户操作数据以后再进行精确的比对,最后分析得出哪一个版本是用户最喜爱的。

2. 灰度

灰度发布则是指在新的功能上线以及没有上线之间能够保证新的版本可以稳定过渡的一种发布方法,可以在灰度发布的过程当中解决一些问题或者对新版本做出一些可以提高用户体验的调整,这是保证网站可以平稳更新到新版本的有效过程。

拆解流程如何优化?

  • 没有捷径可走,只有通过不断的练习,你才能优化步骤流程;
  • 如果全文看下来,对于词汇和方法没有问题的,你已经具备了优化,差的是熟练度;
  • 这些都只是思路,并不存在百分百正确,在什么样的情况下,就选择什么样的方式。了解理论不代表知道如何实际运用,理论是基石,基石决定上层建筑。

文章来源:优设  作者:七月Xavier 

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



声音设计的魅力是你想象不到的

鹤鹤

声音记忆是一种非常普遍存在的现象。声音是基于人类本能的记忆方式,虽然并不代表它是最强的一种记忆形态,但它是最直接、原始的,因为它包含了结构化的图像、符码等特征,所以声音发出时本身就隐藏着巨大的想象力,既有直观又有想象,而且往往是被动接收的。尤其是当我们听到一段熟悉的音乐或是文字、音效,自然而然地就会想到某些事情。我一直认为音乐是记忆的载体,当然声音本身更是如此。


Ototo是一个可以让你使用任何导电物体来演奏音乐的电子套件。主控板上有对应一个八度内的所有黑白键的孔位,通过鳄鱼夹把任何的导电物件(水、水果、植物、金属餐具等等)与这些孔位相连,就能把这些导电物体变成按键。它的核心在于PCB合成器,实际上它是一块袖珍电路板,12个黑点和数个白点组成“琴键”,再加上一个外置的扬声器,只要与可导电的物体相连,摩擦就能发出声音。即便你是不懂乐理知识的人,即便没有专业的设备,也能拿起手边的日常小物创作一段美妙音乐。它还可以外接四种传感器的连接方式来改变声音模式。

Bareconductive的板子我之前在另外一篇文章中介绍过了《聊一聊音乐套件Bare Conductive Touch Board》,它比OTOTO的优势在于它有两种基础连接方式,鳄鱼夹和导电墨水。相对于鳄鱼夹,导电墨水体积更小,更方便。

下面再给大家介绍几个音乐装置项目:

  • + Looks Like Music +

Looks Like Music是Yuri Suzuki在2013年为卢森堡的Mudam艺术博物馆的暑期公共项目创作的互动式音乐装置。Yuri Suzuki设计了一系列几何造型的小型机器,它们可以沿着用马克笔画出的黑色线路前进,参与者可以在黑色线路边上涂色,这些小型机器会在经过这些颜色时把它们“翻译”成为声音。通过试验不同的涂色以及颜色之间的间距,参与者就可以创作出基本的曲调。

下面这个装置是个公共音乐装置,6个高度连小朋友也能够到的声音装置站立在博物馆外的广场上,它们能吞咽、扭曲声音和回声,组成一个音速游乐场。在任意一个喇叭面前,你都可以发出声音,说一句话,唱一句词,声音会通过弯弯曲曲的管道流淌,至于这条声音将从哪一端的喇叭里流出,就要靠你自己去探索了。

  • Synth Play

推动不同充气体的不同位置,随机产生的音乐就会响起。几个朋友共同配合,在推一推的解压氛围中便能创作出一支专属于你们的曲子。这样的创作方式将诞生出无数种组合,每一点微小的变化,都会带来微妙的听觉享受。有点呆萌的白色方块用来设定节拍,两个白色的充气体是创作音乐的主力,黑色充气体则用来控制和调节音效。

  • Face the Music

在名为 ‘ 面对音乐 ‘(Face the Music)的互动性平台上,你可以通过面部识别系统演奏电子音乐:抬抬眉毛敲敲鼓,张大嘴巴调音调,晃晃脑袋调整音长。还有歌剧、科幻小说、蓝调和电子舞曲等四种风格供你自由选择。

声音设计是很大的一个领域,现在还很少有学生专门做一个音乐装置放在作品集中,同学们如果感兴趣,想尝试的话,可以构思构思,为自己的作品集多增加一些色彩。


文章作者:程雅秋
英国皇家艺术学院产品设计硕士
擅长产品服务系统设计、用户体验设计和硬件Arduino交互

文章来源:站酷  作者:马克笔设计留学

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


聊天机器人的用户体验

鹤鹤

今天的聊天机器人远非“智能”,它们引导用户通过简单的线性流程,我们的用户研究表明,每当用户偏离这些流程时,它们都会遇到困难。

聊天机器人是智能助手的可怜“亲戚”。


定义:聊天机器人是一种特定于基于文本的对话界面,支持用户完成有限的任务。


在其他地方,我们讨论了智能助手的6个特性:语音输入、自然语言处理、语音输出、智能解释、代理和前面所有特性的集成。聊天机器人只需要具备这两种属性:自然语言处理和智能解释。换句话说,聊天机器人应该能够以自然语言接收查询,并正确地理解和解释它们(然后执行它们)。


在当今世界,至少有三个不同的因素推动着聊天机器人的发展和普及。首先,人们希望通过用机器人取代人工代理人来降低客户服务成本。其次,像微信这样的基于对话的系统的成功,提出了聊天机器人作为企业和服务的交互渠道的想法,旨在补充现有的渠道,如移动网络和移动应用程序。最后,Alexa和Google Home等语音智能助手的流行,促使许多企业在较小规模上效仿它们。


这些因素映射到今天可用的两种不同类型的聊天机器人:

在企业与客户之间的聊天交互中,客服机器人会接管部分人工负载。这类机器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互机器人的目的是提供与业务交互的额外通道,而不是用于客户服务。例如,Domino的批萨机器人允许用户订购批萨;来自Progressive公司的Flo可以提供一份汽车保险报价。这种交互机器人可以在各种平台上使用,其中最著名的是Facebook Messenger。(其他平台包括Twitter和Slack。)然而,它们也可以存在于应用程序(美国银行的Erica)中,或者通过短信(Capital One的Eno)提供服务。

UPS.com网站使用聊天机器人来回答客服问题。

Kiehl ‘s Messenger聊天机器人:用户可以通过在“发送消息”文本框中输入文本或选择屏幕上显示的选项之一(发送位置或邮政编码;文本输入框下面的主菜单选项)。


虽然客服机器人通常是纯文本的,但交互机器人将文本与可视化UI元素结合起来作为交互方法。


研究


为了了解聊天机器人的可用性,我们招募了8名美国参与者,让他们在移动设备(5名参与者)和桌面设备(3名参与者)上执行一组与聊天相关的任务。其中一些任务涉及为客户服务而与人或机器人聊天,另一些任务则针对Facebook Messenger或基于短信的聊天机器人。


对机器人的态度


一般来说,人们对机器人的态度从中立到略微积极。互动机器人是一个相当模糊的渠道:在我们的美国研究中,大多数参与者之前从未与此类机器人互动,他们也不知道它的存在。相比之下,微信公众号页面通常是这些机器人的复杂版本,我们的中国参与者对它们很熟悉。我们的一些参与者惊喜地发现了这个互动渠道,其他人则认为与其他传统渠道如网络或移动应用相比,它并没有带来足够的价值。


人们普遍认为客服机器人不如人类代表有帮助,但我们的参与者也认为它们有一些优势。最重要的优势是速度:与人类聊天通常需要很长的等待时间(要么在队列中,要么在对话开始之前,要么在人类为客户的问题寻找解决方案时),而机器人可以是即时的。另一方面,人们觉得与真人接触表明公司关心客户:“真人真的很好。他们卖给你一件昂贵的物品,所以他们必须在代理人身上花更多的钱。”另一个人说:“如果你有一个人(负责客户服务),那意味着你足够关心;如果你有一个机器人,那么·你应该有一个真正好的机器人。”


交互机器人通常很容易被识别为机器人,但客户服务机器人很难识别。有些企业并不总是提前向客户透露他们正在与机器人进行交互。我们认为这是一个错误。我们的研究参与者很高兴看到企业使用机器人是透明的,因为他们可以调整自己的期望和语言。例如,当用户意识到他们是在和机器人说话时,他们往往会更直接,使用基于关键字的语言,并避免礼貌标记。这种类型的语言通常比通常在正常对话中使用的复杂、间接的语言更成功。


用于交互聊天机器人UI


交互样式
文本和链接/按钮都可以用于向交互聊天机器人输入信息。它们的目的略有不同:

  • 预先确定的链接和按钮避免了用户输入。这些通常显示在一个轮播列表中,可以包括图像。人们喜欢有这些选项,甚至希望它们成为常用输入。

  • 文本允许用户在选择他们想问的问题类型方面有一定的灵活性,并允许他们偏离聊天机器人(通常过于严格)的脚本。


这两种输入机制都很重要,应该同时存在。


当机器人不允许用户选择选项,而是要求用户输入时,用户会抱怨。例如,一个参与者被Booking.com的机器人惹恼了,因为它不允许他选择日期,他必须输入日期。在输入“感恩节”之后,他说:“应该有一些明显的东西来预先填充它。选项应该预先填充——手动输入很乏味。我应该可以点击按钮才对。”

人们更喜欢选择一个选项(左边是Domino的聊天机器人),而不是输入冗长的文本(右边是Booking.com)。考虑为最常见的输入创建按钮。


一些机器人完全取消了输入文本的选项,迫使用户选择屏幕上显示的选项之一。这种类型的设计使机器人类似于一个网站,并限制了用户可以在系统内探索的路径。

Car Dealer聊天机器人不允许用户在选择库存选项后输入自由文本。


当链接和按钮被清晰地标记时,它们的效果最好,人们希望能够点击交互机器人显示的几乎所有非文本元素。例如,当eero Messenger机器人展示一组图片来说明eero的行为时,我们的大多数研究参与者都会点击这些图片,希望获得更多信息。

Eero for Messenger(左):为了告诉我更多信息,该机器人显示了一个轮播,上面有几张图片和一组可能的延续(文本在圆形框中)。用户希望能够点击轮播项,但这些并不是链接。Kielh’s for Messenger (右):轮播上的大图片是不可点击的,但是下面的链接是可点击的。


除了常规的按钮和链接,一些交互聊天机器人还有一个菜单元素,当被选中时,它会显示一组可能的任务。菜单有时显示在输入文本框下面,有时显示为旁边的一个小汉堡包图标。

金州勇士队在输入框下面有一个主菜单链接。选择此链接将显示一组可用的任务。当用户开始在输入框中输入时,菜单图标就显示在它旁边。主菜单链接和汉堡包图标做了同样的事情。


其他链接有时显示在消息框下面。这些链接是相当容易发现的:我们的几个用户与它们交互;然而,靠近输入框的图标不太可能被使用。

CNN bot:信息区下面的链接显示了聊天机器人的一些主要任务(头条新闻、主题、设置)。


线性流


交互聊天机器人似乎最像Alexa的技能:它们被设计用来指导用户完成少量任务。机器人支持的任务最好被概念化为具有有限数量分支的线性流,这些分支依赖于可接受的用户答案。机器人提出一个问题,其答案将推动机器人前进到流的右边分支。

一个线性流程的例子,机器人可能通过它来完成一个任务


当用户遵循流程并提供符合系统期望的“合法”答案,而没有跳跃步骤或使用未知的单词时,用户会感到成功和顺利。例如,一些参与者能够成功地与Domino ‘s Pizza、Wingstop、Progressive等公司的聊天机器人进行交互。然而,一旦用户偏离了规定的脚本,问题就出现了。


例如,当Domino ‘s Pizza机器人询问她的位置是公寓还是房子时,一名参与者输入townhome,机器人回答“我很抱歉。我好像听不懂。”另一位寻找巴宝莉腰带的用户在消息框中输入了“腰带”,但是收到了订单取消的信息。当她把它转换成“女式腰带”时,她被告知要从一个链接列表中选择,没有一个链接与她要找的匹配。

巴宝莉的聊天机器人很难理解用户想要完成的任务,并在机器人的指令表中列出了若干任务。


机器人也很难从问题或意外输入中恢复,有时会迫使用户从树的顶部重新开始,并做更多不必要的工作来获得答案。例如,我们的一个用户想知道起亚是否有四轮驱动的电动车型。为了找到匹配的任务,她不得不遍历整个决策树,回答诸如汽车需要容纳的人数和MPG等问题。当她对车辆类型偏好回答“不”而不是选择一个显示选项时,机器人就会停止并强迫她重新开始。


然而,有些机器人更加灵活,能够理解偏离脚本的请求。例如,一个参与者知道Domino ‘s Pizza正在进行促销活动,他可以让机器人将其加到自己的购物车中。在订餐流程的晚期,他还能够改变其中一个比萨饼的外壳。

Domino ‘s Pizza聊天机器人能够对不属于预订披萨的主要线性流的请求做出满意的响应。左图:用户可以在订购前将订单加到他的购物车中。右图:用户更改了正在订购的两个比萨饼中的一个的外壳。


一些机器人很难做出假设并建立查询的上下文。例如,我们的一名参与者试图与Capital one的基于文本消息的机器人Eno进行交互。他碰巧有两张来自Capital One的信用卡,每次他问一个问题,机器人就会强迫他澄清查询涉及的是哪个账户,而不会将上下文从一个交互传递到下一个交互。


当启动新任务时,机器人通常也不能利用之前输入的信息。例如,我们的一名参与者首先决定叫披萨外卖;她输入了自己的地址,但她被告知Domino ‘s不送货上门。她又开始一遍,这次的目标是去商店取货而不是送货。机器人第二次问她的地址,显然完全忘记了她已经输入了地址。

Capital One的机器人Eno要求用户在回答完每个问题后澄清他询问的是哪个账户。左:Eno只识别用户查询中的关键字“transaction”(尽管拼错了),无法回答用户的特定问题;相反,它给出了其指令库中一个匹配任务的答案。右:Eno重复了之前问的问题。


文章来源:站酷  作者:马克笔设计留学

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



五步法帮你深度分析一个APP产品

鹤鹤

不知道你是经常会遇到这样的情况:

拿到一个APP产品不知道如何去分析他的好坏,又或者总是分析的很片面,要么仅仅是交互,要么仅仅是视觉

那么有什么好方法能够帮助我们更全面更系统的分析一个APP产品的好坏呢?


首先

我们需要明白的一点是,我们在分析产品时,应该从山顶逐渐往下看,才能够看到山的全貌,站在山脚下只能看到自己视野几百米的范围。

接下来

我们去分析一个APP产品的时候,就可以通过一个万能的公式更全面更系统的去层层剖析:

1、战略存在层(它为什么存在)

产品的核心驱动力是什么?

这个产品带给用户的价值是什么?

这个产品带给企业的价值是什么?


2、能力范围层(我们自身能力)

能做什么,不能做什么?

现在的能力储备是否能够支持?

做到这个需要什么样的能力储备?


3、资源结构层(内外部资源有哪些)

产品的利益相关者有哪些?

内外部有哪些资源?

竞争对手是哪些,相对于他们优势和劣势在哪里?


4、角色框架层(产品各个角色)

体:产品构建的矩阵如何,这个产品处于什么位置?

面:各个板块的使用场景、目的是什么?

线: 页面的布局如何?

点: 这个功能的目的是什么?用户如何交互?使用流程是否合理?...


5、感知层(如何感知产品的不同)

感知层很多时候设计师都会纠结在细节里面,总会分析色彩、图标、间距等。而感知层最重要的是要分析这个产品的调性如何?和其他同类的差异在哪里?界面设计是否能够吸引用户?


最后

我们通过这个五个步骤去分析下今日头条APP

1、战略存在层

核心驱动力:算法推荐+优质内容

用户价值:今日头条带给用户的价值是通过了解用户的喜好,精准推荐给用户最感兴趣的内容,提升用户的阅读效率

产品价值:以今日头条作为基础的流量池为其他产品相互导流

 

2、能力范围层

2019以前今日头条的slogan是“你关心的,才是头条”定义今日头条的核心是推荐算法

而2019年之后今日头条的slogan是“信息创造价值”定义今日头条的核心是打造优质的内容,让信息创造价值

今日头条从技术到内容的转变,靠的是今日头条的长久以来的能力储备,所以我们会看到今日头条推出的一系列对内容创作者的扶持计划。

3、资源结构层

今日头条的利益相关者:消费信息的用户、产生内容的创作者、广告商

竞争对手: 腾讯新闻(腾讯)、网易新闻(网易)、搜狐新闻(搜狐)、微博...

优势:今日头条通过推荐算法构建了早期产品的核心竞争力,吸引了大批大V和信息消费者,具有先发优势,之后又通过内容产品矩阵构建自己的护城河

劣势: 竞争压力大,都在竞相进入内容领域

 

4、角色框架层

体: 今日头条经过几年的发展,逐渐构建起一个内容聚合平台(图文、短视频、长视频...),作为基础的流量池,为其他的产品相互导流

面: 

首页模块你可能感兴趣的,和你感兴趣的内容

西瓜视频,你可能感兴趣的短视频

放映厅,你可能感兴趣的长视频

所以,我们从导航栏就能够可以看到今日头条产品所构建起来的面:

核心是千人千面定制化推荐,核心之外是图文、短视频、长视频

接下去,就是线和面的分析,这就到了布局和功能层级了,这是交互方面的内容,我就不再一一细说了

线: 页面的布局如何?

点: 加这个功能的目的是什么?用户如何交互?使用流程是否合理?


5、感知层

人去感知一个物体通常常是通过5种感觉:视觉、听觉、味觉、嗅觉、触觉。互联网的产品不像线下体验店5感都能够体现,而我们感知互联网产品主要通过视觉和听觉这2种感觉。

  • 我们听到的是今日头条的报道、今日头条的视频广告

  • 看到的是是今日头条的产品、广告图。而的核心是今日头条的"信息创造价值",围绕这个最基本的核心,给用户的感知才是一致的,才是和其他产品塑造差异化的核心要点。



 

基于这些我们再去分析里面的细节就游刃有余了

比如,同为新闻自媒体平台,今日头条把内容创作者放置在列表页明显的位置,而网易新闻、腾讯新闻在内容列表创作者的名字却被弱化了,原因就在于今日头条定位的是自媒体新闻平台,重点在于内容创作者,而网易新闻、腾讯新闻定位的是新闻媒体平台,重点在于内容。

文章来源:站酷  作者:馒头UX

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

有效的竞品分析方法

鹤鹤

互联网因为技术的快速发展,用户的普遍性决定了互联网所必备的特点就是:创新、用户体验、快速迭代。而竞品分析应该贯彻应用的不同阶段。

 

我们在做竞品分析时,首先确定竞品分析的颗粒度,竞品分析可以做得更细,但是必须根据分析的动机、需求出发,清晰自己的目标,来判定做怎样详细的一个竞品分析文档(根据项目大小、时间限制等,选择适当的竞品分析程度)



01 竞品分析四大流程

1.确定竞品分析的目的:明确分析目的,和控制分析产出一样重要,分析是为了有价值的情报收集,而不是无意义的跟踪复盘。

2.筛选出目标产品:从行业出发去选择对标的竞争对手和潜在的竞争对象。

3.收集竞品资料:从分析的纬度来确定,不同职能区分,侧重点会不同(但各纬度是有机联系的,不可以孤立对待)。

战略定位、盈利模式、用户群体、产品功能、产品界面(交互方式、视觉表现)


4.分析、输出竞品分析报告:可采用【总-分-总】的结构


[ 总 ]

首先说明分析目的,然后拿出各模块的结论,这是第一个;

分 ]

围绕这些结论,展开你的分析过程,所有的过程分模块展示、最好要有数据支撑;如果没有,就要有逻辑表达,这是中间的部分;

总 ]

最后得出你在这次分析之后的感受,认为产品应该遵循什么、借鉴什么、避免什么,这是最后一个。

注:分析要追求的是客观性,不要为了分析而分析,不要为了结论而拼凑论据,分析结论的可用性并不应影响分析的初衷。



02 具体分析从哪些点入手

1.市场分析:市场规模、市场趋势、月活跃人数等

2.用户分析:用户地域分析、用户使用时段分析、用户年龄段、用户性别比例等

3.目标用户需求:A、B、C

4.产品信息:产品基本信息(最新情况、产品口号、产品定位、特点、市场规模)

5.产品迭代信息:版本更新频率、优化程度

6.核心竞争力分析

7.功能结构及其分析

8.基本功能对比

9.功能差异化分析

10.界面分析:主要界面、操作流程

11.盈利模式分析

12.其他方面:根据产品特性和类别区别对待



03 竞品分析的相关方法

1.用户体验五要素法:从抽象概念 —— 具体表象


战略层:

这个层面分析, 大多数情况下得出不了什么实质性的结果(也会有厉害的PM能分析出战略上的建议点,不过这都是属于专门去分析战略层的竞品分析)一般战略层面公司的领导或者创始人起初就会想的很明确。如果这个层面都没思考清楚,项目做的意义也不存在了。

产品目标、用户需求


范围层: 

一般是对明确的几个竞品进行功能清单收集,分析一些差异化的功能,然后分析功能背后的原因。别人这么做,有什么意义?能带来什么样的结果?能衍生出什么?

定义需求(内容清单、功能规格说明)、需求优先级排序


结构层:

针对竞品在这个层面需要下功夫,需要去分析梳理竞品的产品流程。比如:注册流程、支付流程等等。去分析现在竞品大多采用什么样的结构设计,比如:什么Tab结构、抽屉式结构等等。

交互设计、信息架构


框架层:

这个层面需要去收集的是竞品的信息是怎么设计的?收集一些竞品的相关细节设计。

界面设计(页面布局和界面各类控件)、导航设计(全部、局部、辅助导航等)


表现层:

一般不用做过多的分析,可留给设计师发挥,留给设计师专门做这个表现层的竞品分析。

感官设计(实现了以上四个维度需要满足用户的感官感受)


2.YES/NO法

主要适用于功能层面,简单来说就是将功能点全盘罗列出,具有该功能点的产品A便标记为“Yes”,没有该功能点的B产品标记为“No”,通过比对可以清晰地了解功能点上产品间的异同。



3.评分法

这个方法在用户研究工作中常会用到,通常适用于定量研究的问卷调研中,即给出1~5分的区间,根据产品中的某一方面或某点进行打分。


4.分析描述法

指将不同产品特性以比较的形式描述出来。



5.SWOT法

针对所要分析的竞品,从“优势、劣势、机会、威胁”四个维度进行比较和梳理。



并且可以进行两两组合分析:

1)SO战略就是依靠内部优势去抓住外部机会战略;

2)WO战略是利用外部机会来克服内部劣势的战略;

3)ST战略就是利用企业优势去避免或减轻外部威胁的战略;

4)WT战略就是直接减少内部劣势和避免外部威胁的战略。



6.Base+Solution分析法

Base:目标用户是什么?目标用户的核心需求是什么?通过什么解决方案能够满足?同其他产品相比,解决方案有什么差异化和卖点?如何推广营销?市场效果如何?

Solution:解决方案如何实现?还有多少空间?陌生用户进来如何使用?信息组织、交互如何?为什么要这么做?是否符合用户预期?配色、UI是否符合用户审美?用户会在哪里困惑?用户打开产品的频率如何?用户是否会向他人推荐产品?


7.Kano模型(卡诺模型)

是对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

在卡诺模型中,将产品和服务的质量特性分为四种类型:

1)必备属性;2)期望属性;3)魅力属性;4)无差异属性。5)反向属性不是用户需求,提供反而影响产品体验。


具体请查看专题文章:产品分析方法之:KANO模型


注:在描述分析的过程,尽量的可视化你的分析过程,这样别人在看的时候清晰易懂!



04 竞品分析的辅助内容

1.数据的引用

分析报告中针对用户体验方面的要素很容易夹杂过多的主观因素,譬如我们容易下这种结论:这种设计不合理!”这类主观的评断。在一份竞品分析报告中,如果为了说明某一条,那量化的数据必然是重要参考依据之一。所以,数据变得比较富有说服力。

数据从何而来?月活排名可以来自Appannie、Usage Intelligence,网站排名来自Alexa。其他数据包括百度指数、淘宝指数、易观智库、CNNIC、艾瑞咨询、新浪微博、微信、上市公司财报等都是比较主流的平台和渠道可以作为数据来源。


2.对比时有截图作参照

这方便读者了解,也在一定程度上有利于保证整份报告保证清晰可读、重点凸显、结论突出。


3.必要时可加任务或案例

任务和案例起到的作用一是佐证,二是便于读者清晰地能够在相应的场景下理解。比如当比较A产品的某项功能或业务逻辑上的问题时,如果引入一个贴切的典型案例或一个模拟的任务会让读者更加有代入感,更便于说明。

另外,在这里也可以适当的引入真实的用户评论。



05 得出结论/建议

1.首先我们也是按照从大到小去写,从框架—功能—流程这个维度去书写总结!

 2.对于结构:我们应该采用……

3.对于功能:我们应该把功能A、功能B加入到版本V1.0内,把功能C滞后、不做功能D…….

4.对于流程:我们可以借鉴竞品A的某某流程、竞品B的某某流程……

5.对于色彩:我们可以以某某颜色为主、某某颜色为辅……

文章来源:站酷  作者:体验为王UX

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



bs界面赏析分享 -- 北京蓝蓝设计

前端达人

jhk-1617329495749.jpgjhk-1617329712960.jpgjhk-1617329746696.jpgjhk-1619342875081.jpgjhk-1619343080605.jpgjhk-1619343085673.jpgjhk-1619343095622.jpgjhk-1619343164521.jpgjhk-1619343150526.jpgjhk-1619343131411.jpgjhk-1619343119804.jpgjhk-1619343108913.jpgjhk-1619343106553.jpgjhk-1619343096660.jpg


--手机appUI设计--

--bs界面设计--

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

谈谈Banner应用&交互设计

涛涛



编辑导语:UI设计师在日常工作中经常会进行Banner的设计,Banner代指任何投放于线上的各种尺寸的广告图,在设计Banner图时,需要考虑到多种因素,内容、受众、效果等等;本文作者分享了关于Banner应用和交互设计,我们一起来了解一下。

Banner是每个UI设计师家常便饭的项目,聊聊banner的那些事。

banner翻译成中文是横幅或旗帜,为了体现产品的中心意旨,利用鲜明的内容去表达最主要的情感思想或宣传中心,从而给整个产品起到宣传的效果。

在互联网时代,banner被广泛应用在pc网页、app设计等互联网平台间,作为设计师做一张banner乃家常便饭,如何才能设计一张高质量的banner呢?

一、设计风格

创意新颖、风格贴切的banner能第一时间吸引用户眼球,有利于banner的触达,带来高效率的点击,创造更高的价值。

1. 素雅文艺型

关键词:文艺、气质、素雅、安静、格调。

画面大量的留白;色彩以高级灰为主,饱和度和纯度低,明度高;字体多采用衬线体,标题文案突出,辅助文案偏小,整体突出高级感;画面点缀多采用精细的线条。

2. 时尚高冷型

关键词:高冷、时尚、大气、品质。

色彩多以黑白灰;文字清晰简洁内容少;焦点主图很大,突出表现细节;画面精简,无点缀物。

3. 传统国风型

关键词:传统、中国风、意境、韵律。

画面采用对称式构图,文字排版有采用竖排;色彩上采用中国传统颜色,采用物体的固有色,避免艳丽刺激的色彩;字体多采用书法字体,书法主要分为篆、隶、楷、行、草五种书体;图形活用中国风元素,剪纸、灯笼、折扇、祥云、梅花、水墨等作为辅助元素。

4. 青春活力型

关键词:青春、活力、年轻、动感、时尚。

色彩饱和度和纯度高;排版多样性,视觉冲击力强;运用几何图形装饰在产品、背景、氛围装饰上。

5. 可爱甜美型

关键词:可爱、甜美、卡哇伊、Q、呆萌。

色彩鲜亮透明,营造软萌可爱的感觉;字体采用少年字体、手写字体、卡通字体;点缀元素多使用卡通小元素。

6. 促销活动型

关键词:促销、活动、节日、热闹。

画面整体氛围热闹,内容饱满,很少留白;色彩丰富,红色、黄色、橙色、紫色偏多;主标题文字偏大,字体刚硬,视觉冲击力强,点缀元素有光效、舞台、五彩的渐变、冲击性的线条或多边形等。

7. 未来科技型

关键词:未来、科技。

科技类banner,文字和背景图非常具有科技感,画面具有空间感;色彩以冷色调为主,常见有蓝色、紫色、黑色;点缀元素有光效、金属、线条、光点。

8. 手绘风格

关键词:场景、趣味、手绘感、扁平。

画面具有故事性和趣味性;色彩扁平的配色,上色没有高光和阴影;字体偏向年轻化,圆润、无衬线体字体;点缀元素以涂鸦的小装饰为主。

二、设计流程

1. 创意监控

1)创意监控

产品在用户心中需要良好的正面形象,banner传播对内容需要进行严格控制,把握好政治导向关、价值取向关和格调品味关。广告内容需真实准确,不引起歧义。

2)情景约束

用户体验产品需要有愉悦感,banner需呈现积极阳光的正面情景,素材图片传达正向的情绪和氛围。

3)版权约束

避免法律纠纷,图片素材、文字等内容应该要有版权,banner中不使用来源不明的字体、图片、视频等素材。

2. 前期沟通

1)确定文案

文案尽量简洁明了,用词准确、文案通顺、语言生动。用词准确是最基本要求,活动、权益、业务表述文字内容符合业务方需求,无错别字。文案通顺、表述清晰,适合产品目标群体阅读与理解。语言生动、精简、有吸引力,集中核心诉求点,亮点突出。

3. 设计执行

1)板式

排版结构:

banner由多元素组成,banner内在包含:色彩、构图、风格等,外在包括文案、产品配图、背景、点缀这几个部分组成,设计过程通过拆分一步步执行,思路清晰且效率高。

构图方式:

对齐构图

画面中相关内容遵循对齐原则,便于用户视线快速浏览,接受重要信息。常见的对齐方式左对齐、右对齐、居中对齐,建议banner中只使用一种对齐方式,多种对齐方式用户阅读视线分散,增加用户认知成本。

聚拢构图

画面内容拆分为文字区、图片区、氛围区,相关内容聚集在一个区域,其次聚焦一个视觉重点,弱化其他元素,视觉出现层级。

留白构图

根据产品页面留出适当的安全边距,保证banner在适配过程中不会出现重要信息看不全的情况。排版时,元素之间需要留出空隙,画面看起来有透气感,减少用户认知信息的负担。

降噪构图

色彩、文字的种类不宜过多,点缀图形运用不合理,会分散读者注意力,成为用户阅读的“噪音”。

重复构图

排版注意整体设计的一致性和连贯性,避免出现不同类型的视觉元素,使画面出现跳跃。

对比构图

banner中重点信息加大与周围元素间的视觉差异,通过颜色对比、字体的大小字重对比、构成的面积对比等方式,以便于用户快速获取重点信息,丰富banner的视觉层级,吸引用户。

构图样式:

对称构图

通过对画面的平均分割保证画面的平衡,对称构图给人有力、稳固的视觉感受。

居中构图

居中构图很好的突出主题,画面中规中矩,活跃感较弱;用户视觉焦点会聚集中心位置,视觉焦点需要重点刻画,周围元素弱化处理。

左右构图

左右构图分为2种,左文右图、左图右文。2种构图样式,区别在于用户的浏览过程中是先看文字还是先看图片。

当配图示意不明确时,建议使用左文右图的排版。

配图主要是根据文案内容绘制的辅助图形,用户只看图无法明确活动内容,建议采用左文右图的板式。根据“F形”阅读模式,浏览习惯往往从左向右从上往下,将文字信息放在左边有助于用户快速浏览,获取重点信息。

当配图示意明确,图比文字更加重要时,建议使用左图右文的排版。

用户根据图片即可明白活动内容,运营或业务方希望有吸引力的活动图片获取用户的注意力。

衍生构图

基于banner受限尺寸和高度,会衍生出一些构图方式,例如放射性构图、倾斜构图等。不规则的构图,设计上具有层次感,丰富的视觉呈现给人眼前一亮,更容易吸引用户眼球。

构成比例

banner大多为左右排版,图文比例4:6,接近黄金分割比例0.618,文案标题比例约2:1。画面中文案占比一定要大于配图,用户更关注是是内容本身。

2)配色

色彩体系:

暖色系

暖色系主要由红、黄、橙等构成的色调。容哟联想到阳光、火焰、热血等场景,给用户积极、活泼、温暖的感觉。暖色系色彩的饱和度越高,温暖属性越突出,用于电商活动,渲染气氛。

冷色系

冷色系主要由青、蓝等构成的色调。容易联想到海洋、冰雪等场景,给用户寒冷等感觉,适宜表现恬静、低沉、严肃、理性的内容,比如科技类产品。

同色系

同色系又称单色,这种色系的搭配在产品本身颜色比较统一的情况下,提取产品邻近色,作为画面的搭配色,让整体画面变得统一和谐。

类似色系

类似色相比同色系,它具有丰富性和可变化性,基于banner整体的主色调以后通过添加与主色相近的辅助色,是整个画面变得丰富活跃起来,同时这些配色方式也相对容易。

对比色系

对比色系,色相环上相距120度-180度之间的2种颜色(180度则为互补色),对比色之间的搭配能够给画面带来华丽、跳跃、浓郁的视觉美感,高纯度、高明度、等面积的搭配,会产生强烈的刺激感,干扰用户视觉体验。画面中往往会考虑补色之间的面积比例、纯度比例、明度比例、空间间隔的比例,平衡画面之间的视觉感。

创新配色

除了基本的色系配色系外,还可以尝试更多的配色风格。画面中有目的地运用色彩元素,丰富画面的色调。

色彩比例:

banner色彩需要考虑页面统一性;banner尺寸较小,信息色彩不宜过多,2-3种即可。画面主要由主色、辅色、点缀色组成,色彩的黄金法则60:30:10的法则,60%左右的主色、30%左右的辅助色、10%左右的点缀色。

3)字体

字体类型:

无衬线体

粗的黑体,具有官方严肃气质,自带有力量感,视觉冲击强烈,与速度线条、碎片、划痕等设计手法十分搭配。细的黑体,具有年轻、简约、细致的感觉。无衬线体易读性较强,常用于科技类banner中。

衬线体

衬线体装饰性较强,给人带来活泼、轻松的感觉。比较适用于文化、文艺、美食、女性、时尚等行业。

圆体/卡通字体

具有趣味性和活泼感,适用于儿童、宠物类、休闲食品、家居等行业。

书法体

有韵味和艺术感,视觉张力丰富,适用于中国风、艺术感等画面。硬笔书法字体:优雅、有亲切感,适合传统、文化等画面。

字体样式:

考虑字体大小、字重、颜色。文案有主文案和副文案之分,需要有对比性。字体的颜色选择需要考虑与背景色的搭配效果、banner主题间的关联,选择合适的颜色能凸显文案。

4)辅助图形

几何图形:

几何图形是banner设计中常见的辅助元素,它的多样性和简约性设计师十分着迷。几何图形可以创作无线的可能,用户对其有意无意地进行自我诠释。

圆形

圆形象征着圆满、融合、自然、和谐、无穷,在设计中具有非常强的包容性,由于其自身的可拓展性,将圆形进行拉伸、叠加、重复可获取丰富的图形。

三角形

三角形具有方向感、变化感,它的锐利给以垂直、刚强、庄严、向上的感觉,其长度有穿透感,象征崇高和无限。

方形

方形具有对称、有序、平静、专业属性,给人稳定安全统一感。

多边形

多边形的形状会给人带来稳重感,通过多边形凸显产品的尊贵感。

不规则图形

不规则的图形营造画面的氛围,突出主体元素,激发用户点击欲望。

流畅的线条:

流畅的线条给画面带来韵律感。

立体几何图:

立体几何载体让整体画面格调显得品质高。

5)动效

展现商品质感和工艺或者展示同商品不同状态时,动态banner比静态banner点击率高。呈现商品多样性和系列感需要静态广告。

4. 审核

1)传达

呈现出来的画面鲜明地表达活动主旨,文案内容,可用性。

2)美感

板式设计、配色、字体设计、风格、插图、点缀图案以及动效这些运用是否合理。

3)效率

整体复杂程度,后期banner修改和加工工作难度,可不可重复利用。

4)创意

画面主题是否突出,具有吸引力,刺激用户点击。

三、设计应用

1. 轮播banner

现实中多是单张banner图,而互联网产品中大多采用多张轮播banner。有限的屏幕内采用多张轮播提高空间的利用率,其次用户长时间盯单一广告会疲惫,轮播banner有利于吸引用户注意,激发用户探索欲望。

2. 胶囊banner

电商产品用得比较多,全圆角矩形或不规则矩形,此类banner运用在促销活动中,实效性特别强。

3. 白底banner

运营强度较弱,banner在页面权重较低的专题活动会用到白底模版化banner。排版左文右图,内容由主标题、副标题和小插图组成,例如支付宝首页中间位置banner。

4. 悬浮banner

需要吸引用户来参与运营活动,可以采用悬浮图标的形式,吸引用户的注意力,对页面布局不产生影响。

5. 广告组合

用于产品中同一个功能模块,多个不同入口,或者不同服务类型的商品入口。商城或者热门板块使用。包括:两个入口、三个入口、四个入口、五个入口、六个入口。

四、交互设计

1. 交互需求

1)功能

banner在页面中所承担的责任是什么,活动运营、功能区入口、系统公告、还是第三方广告。

2)数量

banner位置所承载内容数量是多少,同时存在几个内容。

3)频率

banner采用的是静态banner还是轮播的方式。固定banner多久更换一次,轮播形式的banner,几个banner轮播,轮播的速率是多少。

4)层级

banner在页面中与其他功能区相比,banner位所属的信息层级是什么样。

2. 交互思考

1)静态/动态

静态banner。如果内容中有一个非常重量级的,其他的都是差不多的不怎么重要的,可以考虑只将重量级内容放在显眼位置的Banner上,且静态不轮播,其余内容放在别的运营位里。

动态轮播。轮播banner图注意帧数不宜过多,加上轮播指示器,提示用户banner的个数以及banner可以左右滑动。

2)尺寸

屏幕占比大的banner有更强的营销感和氛围感,常见电商平台的顶部banner。

屏幕占比小的banner会低调些,不会干扰用户阅读浏览页面,例如金融类平台。

3. 设计输出

1)图片大小

保证产品启动加载时间和操作流畅,上传广告图的大小建议在300kb以内。

2)图片格式

输出的格式:JPG、PNG、JPEG、BMP、GIF。


文章来源:人人都是产品经理  作者:
界白

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




日历

链接

个人资料

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

存档