首页

B端设计|数据展示控件应用

ui设计分享达人

将数据查询的条件、逻辑、方式,整理清楚后,那么下一步的内容就是如何将查询后的数据更好的展示给使用者看。到这一步设计师或是产品应该思考的是如何将众多分散的信息,有序的、直观的展示出来,并且辅助使用者解决问题,为产品提效。 

数据展示主要以表格为主,由业务需要对表格进行扩展,结合其他组件使用;其次是列表,列表与卡片样式结合的较多。 

设计原则
依然要牢记的一些设计原则,即:简洁清晰、灵活高效 
简洁清晰:剔除不必要的装饰元素,避免过度; 
灵活高效:在现有的规范指导下,根据不同业务的不同需求,快速组合多种样式的表格,提升设计效率,也要兼顾减少开发代码冗余; 

一、表格 

基础表格包括几点基本要素:表名、列名、数据、翻页,这些构成了表格的主体框架,而在真实场景里使用的表格都是升级版本,补充了更多功能作为辅助,比如排序、筛选、操作、导入导出...... 

数据筛选:不同于查询模块的筛选方式,直接在表头标签操作,一般会以“倒三角形”图标展示,通常应用在这一条数据处在哪种状态,例如:进行中、未开始、已完成、已取消、审核中; 


排序:现在比较少的应用,因为排序大多是对时间上的排序,而一般一个新的数据也是按照时间倒序展示,在第一行展示; 

操作:对某一条数据的操作,或查看或编辑或删除; 

导入导出:对超过一定量的数据,会进行导入数据,导出数据,当然会有遵循一定的规则,才能和线上表格数据类型一一对应上; 

实际工作中,我们都是根据产品需求和业务需要对表格进行补充辅助功能的,在设计表格的时候,总结下来通常会遇到下列几类问题: 


  • 有层级关系的数据该怎么展示?

  • 一条数据有父子关系,该如何展示?

  • 一条数据类型太多,表格容不下怎么展示?

  • 一些数据其中的一类型字段较长,其他类型字段段,甚至只有几个字,该怎么展示?

  • 一组数据,数据不全,类型不全,部分数据是共同的主体,该怎么展示?




除此之外还有树表结合的、表格套娃 

对于这些常见的问题,在设计时会充分考虑这一领域的专业操作者,特别是从事医疗行业的专业人士,严谨的数据要求会比较高。 

1、数据的层级关系 

在相关医疗数据的管理系统里,因为医疗数据的复杂和严谨性,常见的表格展示不能满足层级关系的表达,所以在视觉呈现上增加结构化层级关系。 

2、数据本身的父子集关系 
另外就是同属一条数据之下,还会进行细分多个子数据,并对应的归类列项; 

3、并不好看的数据 
上边两种说的是工作里典型数据结构的层级关系,并且数据容量相对美观,不多不少。而实际的数据没有那么美好,数据长短是参差不齐的,所以在考虑上述两个设计原则的基础上还需满足,可阅读和最大化兼容; 

在一组数据中,单条数据中某一个类型的字段很长,管理系统里表格的容量是有限的,所以在可行性的前提下,对这部分数据缩短,可以按照需要但不重要的要求,隐藏部分,将主要信息显示出来,并给予查看全部信息的入口。 

4、残缺不齐的数据 
上述的说的数据还是比较好看的,而真实数据是残缺不全的,甚至部分数据是“丢失”的,而且列项类型很多,表格横向宽度是不够的。 
那么此时通过两种方式优化这块内容:一种是固定左右边际列项,中部滑动;另一个种将空数据的列项隐藏,并给予条件选择,按需展示数据的哪些列项; 
当然在患者端也会有患者头像,那么在管理系统里的患者表格相对应的头像,另外也存在患者上传的文件(图片),也会以缩略图的形式展示在表格中。一般会将所有涉及到的图片(头像、文件)规范统一的大小尺寸。 

二、列表

另一个常用的列表了,常和表格组合使用的,另外在某一条数据详情里也比较常见。在视觉表现上与表格并无多大的差异,较明显的就是列表没有列名名称,实质上的区别是在前端编写代码上的区别。(希望这个图能帮到在座的各位设计师朋友们,和前端叫法意见不同时,可以了解下,毕竟你在看视觉时,他/她在想用什么代码写出来) 
列表一般几个场景下会出现: 
会根据数据“长”的怎么样,然后采用不同的形式去展示数据,让它“好看”些,且更容易被阅读和理解。 

查询筛选类 

1、也会遇到查询条件较多的,那么以多组列表形式出现,两组或是三组。多重的查询条件,就不叙述场景了,查询是最基本的常用方式。 

2、遇到多组筛选条件,考虑电商网页版的筛选和布局方式,因为它主要是表达对数据的筛选不同类型的多组联合后,能够符合产品需求预期的结果。 

段落数据类 

1、卡片列表,针对的是单条结果信息内容较多,一条信息占据一行,把重点区别于其他信息展示给管理者查看,便于识别。基本信息、现病史,省去二次点击详情查看操作。 
除了上述所说的段落形式的内容,也有内容是分点和分类型的展示,主要是满足直观可见,提升效率为主。 

2、九宫格列表,同样,对于上述的分点类型的卡片列表,在数据容量的允许下,可以采用视觉上的九空格,将一级重要信息突出,作为识别来源,二级信息附着。为什么这么做呢,因为信息更突出呐~ 

详情类 
对于详情内容,即一条数据的完整展示,如无必要,别起新页,痛苦操作给大家的忠告~~~可用模态弹窗,将信息展示出来,条理清晰,又明朗是不是 
三、总结
还是以一贯的方式来呈现视觉,需求先行、数据先行,再考虑后边的视觉展示,理解了业务需求,才能让视觉表现能够更好的符合需求,并且兼顾对后期的数据变化考虑可扩展的空间。 

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

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

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

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



B端产品设计分析方法总结

ui设计分享达人

做一个完整B端系统项目前,从交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,深度理解B端主流组件库的视觉规范,进而为B端产品设计做充分的准备工作,以下内容较多,大家可以根据上述目录来进行选择性阅读。

1.1 B端组件库的概念及作用


概念:组件库的底层逻辑就是原子理论,类似于我们在拼乐高积木的时候,根据说明书一个模块一个模块来拼凑,先找零件,再拼成部件,然后是成品,这个过程和UI中的组件化是一模一样的,组件化就是原子理论集中得表现,原子(图标、按钮、字体样式等)——分子(标签栏、导航栏、搜索框等)——有机体(图文列表、内容卡片、布局模块、瀑布流图等)——模板(原子、分子组合排列组成了模板,也就是原型图)——界面(最后根据原型图形成视觉设计稿)


作用:一致性:比如在不同得界面中,如果用样的按钮,他的按钮的展现形式,要保持一致性。

高效性:比如所有的按钮不用单独去设计了,从组件库里调用就可以,这样对于设计师来说就是高效的。对用户来说,也会让用户的使用效率提升,比如当用户看到蓝色的按钮就是可以提交的按钮,看到白色得按钮就是次要得按钮,看到不带边框的按钮就是一个危险按钮等等。

组合性:通过调用不同的组件来进行组合可以形成不同的页面。


1.2 如何正确使用组件库


1.2.1 组件库的使用前提

一些主流的组件库,比如AntDesign、Element Design、ZanDesign组件库等,这些框架机构本质都差不太多, 但他们有自己的特点,具体用哪个组件库,通常由公司的架构师来进行架构选型,比如VUE(Element Design)和REACT(Ant Design),这是两种不同的技术选型,(VUE和REACT是一种前端框架的技术架构版本,可帮助前端工程师快速进行开发的前端框架)。从技术角度讲,大部分公司会首选AntDesign(React),因为有很多案例提供,VUE和有赞也可以但用的少。从设计角度,Ant Design得设计组件形式案例很完善。Element Design做起来视觉单一得样式白白得感觉,没有设计层次化,Ant Design更好看一点。所以先选择底层的前端框架,再根据这个选择前端的机构布局。

1.2.2 组件库的使用过程

设计师和前端最终目标是一样的,都是快完成保证设计质量的,原生组件不能达到要求的时候,设计师可以根据原生组件库修改样式来表达到自己的想法。但对前端来说最好什么都别改,就用原生组件库前端工程师直接复制就行,这也是因为我们设计师的要求和前端的要求是不一样的。但修改后样式的组件,底层逻辑还是原来的组件。从Antdesign等组件库里复制出来,经过figma里的各种功能操作后,比如分离组件、改变组件得形状、替换内容等,但这个组件仍然是Antdesign里的组件,组件是否改变取决于,这个图形,这个组件是不是已经代码化,我们设计师设计的组件,只是样式,需要经过前端来形成代码,只有代码化的组件,才是组件,如果没有代码化,那只是一个样式而已。所以,我们用Antdesign里是已经实现代码化了得组件,组件库里有的组件前端一定是可以代码实现的。


1.3 如何设计组件库


1.3.1 每个项目都会分这四个周期


项目初期:在一个B端项目得初期,大家都会有疑问,B端组件库应该什么时候开始建立?是不是先建组件库再开始设计?答案是,如果不是从0开始的项目,组件库在设计之初就应该建立起来,如果项目是从0开始,由于没有业务的案例,组件库组件库也无法建立,但可以建立一些最小元素:原子。比如字体(应该用什么样的字体,在正标题,副标题,大标题,正常情况下应该怎么样使用字体的得明度)、色彩(色彩规范是什么,比如医疗行业,航空行业,交通行业应该用什么色彩,决定主色不是好不好看,而是由企业来决定得,首先了解企业的VI色,通过结合VI色和产品分析出的用户画像特征,来确定主色,辅主色,确定主色后,相应的背景色、深色背景、浅色背景、灰度背景、卡片背景等,也就都可以做出来了)、按钮(通常状态,点击状态,当前焦点状态,不可点状态)、基本控件、布局栅格、图表(图标icon、文本标签、按钮、图表)、图标;通过建立原子组件,完成一些基本典型的页面设计。

项目中期:继续完善基本组件库,应用案例的完善,迭代组件库、样例库、最佳实践案例。然后再次迭代进入基本组件库。


项目后期:形成最终组件库与设计系统的规范建立,根据项目不一样详细程度也可以不一样。


延展期:为项目2.0升级准备根据使用反馈、迭代之前得组件库与规范,预计未来版本中出现的典型案例,并针对性的设计应用组件。通常很少有公司进行到这一步。


1.3.2 组件库的开发流程


1.3.3 B端组件库存在的价值


B端组件库的存在是不是意味着不需要设计师了?其实并不是,组件库可以帮助设计师增进设计效率和沟通效率,和前端沟通告知按照对应的选型组件库规范使用就可以了,同时组件库得一致性、准确性、协同性它的质量有保证。但设计师做完组件库后,继续需要关注的点是:

01、根据业务场景来优化设计组件库:因为组件库是一定会去更新的,如有必要再去更新,那一定会是很复杂得业务场景下去做更新的,这个业务场景是程序员或者以前的组件不能实现的,需要很强的设计技能去做迭代,所以需要设计师继续去做一些结合业务场景的组件来放到组件库里。

02、需要设计师把更多时间精力投入更多设计体验中,而非搬砖:组件库的建立同时解放了设计师的精力,设计师可以把时间投入到设计体验中去,而不是做一些搬砖得工作,比如按钮怎么画,用圆角还是用什么颜色,这些没有技术含量的工作,这样一来,可以投入更多时间来赋能业务更好体验设计工作。


1.3.4 B端主流组件库有哪些

2.1 B端产品的设计过程


2.1.1 用户体验五要素


战略层(属于产品愿景,满足用户的需求,产品的愿景和目标


由于用户有不同的需求进而产生了不同的产品,战略层决定了用户用干什么样的产品,比如,用户需有很多销售客户的线索需要进行管理,用户需要管理客户,那就做一个CRM系统。比如,用户想写日报,想要一个打卡的OA系统,那么产品目标就是要做一个OA系统。比如,电商里面很多商品,牵扯到很多进销存,那就做一个ERP系统。这部分跟设计师相关度没有那么高。


范围层(指功能规划,功能的规格、包括内容的需求)

功能规划:比如要做一个OA系统,其中就包含了打卡、日报、项目管理、报销、人事流转等等都是跟办公相关联的,需要把规格和功能画出来,画成简单的表格并且将它们分类,这里所有的功能都不是详细的,就是简单的分类,将功能简单描述一下,同时做一个简单的用户画像。这部分设计师只需要阅读产品经理给到得PRD需求文档即可,整体看还是偏愿景,没有形成具体的产出。比如OA系统中就总结出重点做一个审批得功能,并不知道什么样的界面,只知道一个大概的范围。


结构层(指原型设计)

这部分,设计师通常就需要参与进来,如果设计师只按产品给的设计好的原型来设计,就显得很被动,这样只能叫做视觉美化,被称之为美工,设计师应该从没有形成原型的时候,可能只是一个简单的PRD需求文档或者草图,设计师就应该参与进去。


设计师对原型进行优化设计,优化的不是业务,因为很多业务内容肯定没有产品经理了解得深刻入,这时,设计师需要优化的其实是它的交互逻辑、交互内容,一旦原型里里产生点击,一旦产生多种状态,那就要去了解它,每种状态产生不一样的界面结果,其实对标的就是设计师设计的界面将产生什么样的变化,换句话说,如果有界面的变化,内容得变化,设计师就需要参与到其中。目前来看,很少公司有专门的交互设计师,要么这部分工作由UI设计师来完成,要么由产品经理来完成,很多企业已经把设计进行前置化,由UI设计师来完成交互的工作。


其中交互设计+信息架构设计是设计原型图的关键,这两个是密不可分的,如何制作原型图,如何在原型图里设置一些交互事件,给大家推荐《信息架构设计》这本书里有专门讲到。再了解原型设计之前,不得不提到一个通用知识点,交互设计的七大定律。(后文有介绍)


框架层(指界面设计、组件设计)

框架层这部分有一些争议,有的设计师认为就直接做界面设计了,其实框架层还不能把它理解成是界面设计,它仅仅是做了一些业务的模块儿的框架而已,更多的其实是将它组件化: 将原型组件化、模块儿化,类似我们直接从Antdesign组件库复制来内容简单改改之类得操作,完成的是组件和界面的设计,这些界面并不是最终完整的交付样式。


表现层(可视化呈现,UI视觉呈现)

这部分和设计师关联度最大的一部分,就是界面中的配色、配色、图标、样式、结构、布局、排版等设计,但是我们设计师需要从范围层了解业务熟悉最初PRD产品需求文档去一点点做起,其中设计师在战略层参与度可能只有2%左右,范围层参与度5%左右,从结构层开始逐步往上参与度越来越高,至少结构层,框架层和表现层的参与度是很深得。



2.1.2 B端产品的设计过程是什么

所以,通过梳理用户体验五要素,不难看出B端UI设计师的工作流程就是,01. 接到项目后,设计师主要阅读产品经理给到的PRD需求文档,同时去参与原型设计,根据最初版PRD输出一份低保真原型图,和其他部门进行初次评审;02. 经过初次评审讨论过后,完善后的功能和页面文案,产品经理补全和输出完善后的产品PRD需求文档,由设计师根据完善后得PRD需求文档经过规范设计输出高保真原型图 ,与其他部门带着初次评审讨论后的问题,进行二次评审。03. 最终再由设计师经过组件化形成视觉图。04. 同时设计师提供切图,与前端紧密沟通,上线前制作设计走查表,进行设计走查。05、最后上线后根据数据、用户反馈等提出交互和视觉可优化得方案建议,进行版本迭代。


2.2 交互设计七大定律


01. 菲茨定律:当设计师需要让用户重点去看到页面中某一个突出点,点击到一个区域时,设计师就需要做到适合的大小,适合的区域,适合的位置,适合的形状,适合的颜色。也就是你想让用户点击的时候就突出重点想显示的,不想让用户点击退出的,就把它设计的的足够小。比如按钮得退出和付款,实心付款按钮为主要按钮,虚线置灰退出按钮为次要按钮,比如常说的海报中字要大,logo要大,这些都属于菲茨定律。


02. 席克定律:用户面对的刺激(或选择)越多,他们做出决定的时间就越长,由于用户的时间很宝贵 ,用户没有义务花更多留在我们的网站上,所以我们需要有选择的地方对选择进行分类。


03. 7土2法则(米勒定律):比如圆周率3.1415926,一般都能记住,而如果再往后加几个数字,大家往往很难记住,原因就是经过大量测试,人脑容易记忆7位数字前后得数字,比如设计银行输入密码的时候就用到了7土2 法则,设置密码过多人脑不易记忆。


04. 接近法则:格式塔接近定律指出“彼此靠近的物体或形状似乎形成了组”。


05. 防错原则:当用户在使用产品中,预判用户本身或产品一定会出错时候,可以告诉用户怎么可以不犯错,或者将风险降低。比如电脑的关闭电源键,就允许电脑司机时允许系统犯错,让用户使用关闭电脑电源键进行重启。比如银行取出钱后,银行卡有忘拔现象,银行完全可以做到像光大银行那样去再取钱流程中改成先拔卡再出钞得交互流程,就可以避免忘记拔卡,但其他银行都没有这么改进,仍然是先出钞后拔卡得原因是允许用户犯错。


06. 奥卡姆剃刀原理:化繁为简,如无必要,勿增实体。比如小米电视遥控器的设计,由原来传统的很多遥控器按键只优化成了保留上下左右为数不多的几个重要按键,原来的遥控器数字按钮如果真正要输入数字的时候通过功能性,调出数字来,这样在遥控器得设计中基本只保留20%主要功能按键。这就是交互上的优化。比如在UI界面中,也会用到这个问题,简化文字,把文字用图标替换,还有各种流程得优化等等。


07. 雅克布定律:以用户习惯的使用模式去设计产品,降低用户学习成本,遵从用户使用习惯。 利用现有的思维模型,用户习惯,我们可以创建出色的用户体验,使用户可以专注于自己的任务而不是学习新的模型习惯。



2.3 B端产品用户画像


2.3.1用户画像概念

用户画像又称用户角色,作为一种勾画目标用户、联系用户诉求与设计方向的有效工具,用户画像在各领域得到了广泛应用。用户画像分为两种,不论C端和B端都会做这样的用户画像。总共可分为两部分,基本信息数据和行为数据。


基本信息数据:当我们去了解用户的基本信息的一些数据时,职业,收入,年龄等等,这些和功能有很多的关联度,比如唯品会用户画像关键词是:女性、折扣、白领 ,唯品会产品定位聚焦女性,这些基础信息数据,就能给产品带来很好的结果,当我们要做一个女性的购物平台的时候,可以先把男性用户抛除掉去考虑设计方向,再比如收入就知道了,大概产品面向的收入群体将是什么收入群体的人,那么我卖货的价格区间、包括设计的风格就是一个什么样群体的设计风格。那些卖奢侈品的不是黑色就是灰色,要不就是棕色,但未必是适合唯品会产品的风格,需要找出这些基本信息去和产品进行关联度,把基本信息放到设计结果中去考虑。


行为数据:指用户的爱好,这部分群体有哪些爱好,是喜欢购物,还是喜欢运动,他/她的消费情况是什么,喜欢旅游还是美食,他/她经常用哪些APP,他常用的设备,是苹果手机呢还是安卓,小米还是华为,等等得到这些数据,也能得到一些用户喜欢什么样的竞品,这些数据就能侧面的在我们的产品中得到反馈,得到功能和设计上的指导和其他产品的区别。这些行为数据,不管我们做C端还是B端,都要获取到,但C端和B端获取到这些行为数据的结论是不一样的。因为C端用户研究方法不一定适用在B端用户研究方法。C端最终抽象成一个人,给他带来的很多属性,这些等等都会成为他的用户画像。

进而找到这个人,将他的社会属性,从抽象的角度慢慢变得具象,C端是他/她的社会属性,把他做成一个普通的人,这个人有他的社会属性,有他的社会价值,有他的社会行为。比如一个女性,一定喜欢美食,一定会买化妆品。


2.3.2 B端用户画像本质

比如做一个和电影相关的管理系统,电影行业包括很多人员管理,设备管理等,这里不能把用户画像抽象成一个男性或者女性了,而应该把它抽象成一个职业,比如抽象成一个导演,导演需要去管理什么东西,它需要哪些资源去整合。导演就又叫做行业属性坐标。B端不以社会属性去做用户画像,一定以行业坐标去做用户画像,我们在整理作品集的时候需注意不要与C端画像整理混淆。


我们要做一个行业可以不用管他/她是谁,也可以不用管他/她有什么样的社会属性,比如做CRM最重要的在里面起到作用的是,客户关系管理和销售等; 比如做OA系统,就是一般的员工,等级,职能等等,可以看出行业属性(职业属性)决定了他的用户画像的精准度,一定把这个人拉到行业里去研究,研究社会属性没有价值。这是C端和B端做用户研究最大的区别。


2.4 B端产品用户调研


2.4.1用户调研的作用/目的/重要性


01. 了解产品业务需求定位:可以帮助了解目标用户的信息,从用户的角度:未来使用你产品的用户,他理不理解你的产品想要表达什么,你的产品讲了哪些功能。因为很多好的产品我们打开它第一眼就知道要干什么,是给我们做什么的。同时站在设计者的角度:怎么可以把这个产品设计清楚,比如做一个CRM客户关系管理系统,具体管理什么我们是不清晰的,想要清晰就需要通过用户调研这个过程给它展开。


02.解决功能信息架构问题:可以帮助设计师更明确需求功能得合理性和优先级,比如页面标题的使用、标题的层级、需要在信息层级清晰得情况下体现出来,而明确信息层级同样需要通过用户研究体现出来。


03.让可用性测试更加准确:可以帮助锁定合适的测试用户,来测试我们的产品使用程度,使用体验是不是好,这时需要要找目标用户去测试,比如小米有品针对群体是米粉,唯品会针对的群体是职场女性,而不像C端找所有的人去测试。


04.解决团队协作沟通问题:确定用研目标可以有理有据的把设计目标和产品经理的意见达成共识,因为未来一定会多次和产品进行PK,像诸如设计师组件化没用好这些理由也不会是pk点,确定用研护镖可以更好的深度去理解原型图,可以把团队协作沟通的问题解决好。


2.4.2 用户调研的方法


01. 确定研究对象:首先拿到一个产品,拿到一个需求的时候,这个需求通常很模糊,比如只告诉做一款CRM客户关系管理系统,但汽车行业,服装电商行业,保险行业,银行金融等等,都有CRM客户管理系统,不同行业的CRM肯定是不一样的,这时候,比如要做金融的CRM,那研究方向就已经确定了,金融CRM就可以确定去研究金融行业的业务链,业务流程,具体找哪些用户群体,可以根据以往的惊经验和产品的目标去确认。


02. 找研究方法 : 研究方法分主动和被动,我们通常用的方法是被动方法,比如自我报告法:当这个产品产生了一些数据,我们从后台可以拉取这些数据的时候,通过这些数据去分析,这是被动的方法,这个被动的方法所有项目都可以用。而主动的方法,就是观察和采访,主动去找用户去找关联度。


03. 获取到数据 : B端和C端区别之一是提高效率,它要产生的结果只有一个结果,就是减少成本,任何B端的系统都是为了实现这个目标,提高效率和减少成本。所以获取数据,研究数据的方向不能偏离搞错,用户研究的方向不要搞错。比如我们以用户为中心来设计,就会认为用户的操作体验感是第一位的,其实不对,放在第一位去考虑的应该是以系统的最优化,提升效率为第一位,而用户也可以为这件事情做一些改变而找到平衡点,数据导向得提高效率,减少成本有时会大于用户的操作体验。


04. 用研行为: 刚才前面提到的这些注意事项,到底应该找什么方法去得到这些数据呢?第一我们可以通过后台数据比如通过百度统计等系统来获得;第二通过问卷法发出一些问卷,用户可能散落在全国不同位置;第三可以通过用户定性访谈来获得;第四可以通过用户旅程图来决定用研行为。


05. 分析调研结果: 研究结果不是为了放到我们的B端作品集里的,而研究结果一定是为了去定性、定量、让数据回归到产品功能本身。同时经常问自己这些问题,去根据研究结果和问题进行匹配思考,比如研究了那么多,用到了用户画像得出的结论了么,用到了哪里?在项目中能举个例子吗?采用什么样的视觉去实现了用户体验要素?


2.4.3 B端用户访谈模板


2.4.3.1 用户访谈概念:


01.确定访谈目标:了解目标用户群体,通过访谈信息来进一步构建所需要的用户画像,从而确定设计方案与功能优先级。02. 定性/定量访谈目标:将这些目标定量、定性,选择不同的访问对象,构建不同的角色画像。比如问销售的用户画像,要找不同的访问对象,销售总监,普通实习生等等,三到四个角色,样本越多,用户画像越准确。03. 访谈过程:提前把问题写出来,拿着问题去聊,用录音设备,记录表格,一个提问,一个记录,分开后记录比较准确。04.访谈结束:要做信息汇总,要做分析建模。分析建模就是将信息最终变得有意义。


B端用户访谈模板有30个问题,这30个问题决定了我们的用户画像的精准度和产品的用户画像的价值。用户访谈会问些什么问题呢?当我们调研的时候把问题写出来的时候,就已经解决了一半的问题了。


2.4.3.2 B端用户访谈30问


01、基础特征


岗位:你是从事什么岗位的?是总监还是普通职员?目的是为了知道不同的权限的使用者,进而就可以在系统中设置这些权限。

职责:需要获取到用户不同的需求,因为每一个岗位有不同的职责,他们的需求点也是不一样的。根据这些不同的需求,我们在界面中得动态仪表盘部分,就可以根据不同职责来显示不同的内容。

姓名:可以让访谈记录得到更加真实的体现,目的是可以获得产品的一些真实的基础字段。

年龄:是用户认知和经验度的体现,用户的年龄可以代表他们对行业的认知,和整个企业流程的认知程度,一般性理解,用户的年龄越大,那么他的经验越丰富。

教育:指用户是什么学历,目的是为了了解用户的经历与熟练程度,通常认为,用户的教育越高的人,他们往往使用软件操作的熟练度会越好。

位置:指用户在什么地方来使用,目的是知道了场景与优先级,用户是在写字楼里还是精英场所来使用我们的产品。因此得出基础特征是要得出这些结论,得出这些结论进而反馈到产品中去。


02、行为接触点


使用频次:不同的岗位用户使用功能的优先级是不一样的,用户使用频次越高的功能,这个功能的优先级就越高。了解之后,那在下次迭代的时候就需要把重要级别的功能放在易操作的区域去体现。比如这个重要功能就是一个icon,那么把它放一个快捷入口。

使用时长:也能代表功能的优先级,用户使用时间最长的功能,代表可这个功能优先级很高。

时间段:用户在什么时间段使用的是最多的,我们就知道了这个功能的活跃度,这个数据指标,主要和技术有关,我们可以从后台数据去获得。

使用设备:用户使用设备兼容的优先级,平时用户用什么设备,再访谈过程中,需要问具体使用电脑的分辨率,屏幕的尺寸,屏幕的比例,都可以去实际的调研一下。在我们做B端界面选择屏幕尺寸的时候,可以采用结合实际情况用户使用的屏幕分辨率尺寸来设计界面。

相关软件:用户平时的操作习惯和流程是什么,还会使用其他软件吗?比如他们还用什么其他的竞品,可以继续问用户其他的竞品哪里比较好,哪里是亮点,那最终得到的目标就是用户的操作习惯和流程,这些也可都可以反馈在我们产品中。


03. 使用环境


碎片化时间:主要解决用户场景的问题,比如汽车4S店销售,当你去买车时,销售人员会问,你会买什么样的车,会记录你的年龄,用车习惯,用车时间,姓名,预算,都会记录,销售通常会用一些碎片化的时间去记录。此时就可以得出两个结论:1.我们在设计的时候是否可以考虑让销售充分利用碎片化来进行这些信息的录入,而且方便他的录入,比如他本来只有电脑端,电脑端是一个完整版的功能,我们能不能给他设计出一个移动端来,让销售不用回到电脑屏幕中就可以去记录这些内容。2. 记录时也有两种记录方式,是客户讲话的时候销售去记录还是这些事情做完之后销售再去记录。通过这样的行为会得到这样不同的设计结果,比如有人问你们公司为什么要做B端的移动端设计?以上就可以有理有据去解决销售的场景问题。


用户的操作环境是什么:主要解决视觉体验问题,用户是白天操作还是晚上操作,是在强光环境操作还是弱光环境操作。这些都应该是考的点。比如B端使用的ATM机,应该设计成白色还是深色模式,我们知道一般都是深色模式,是因为通常是室内,它和光线有关系,如果是室外的取款机,四周又没有遮挡,如果还设计成深色,肯定是看不清楚的。比如HMI车载系统,白天模式开了深色,一定会看不清楚。所以要提前判断使用深色模式还是浅色模式,也需要考虑在设计的时候使用什么样的色彩和色调,在室外使用还是室内使用,如果对色彩不怎么挑,那也可以使用VI色,这样一来视觉的保障色就确定了。还可以确定在使用周期时间,要多长时间完成一个操作,应该使用什么样的方法可以尽快完成一个操作。通过用户的操作环境可以得到以上信息。


是否有平行事件:用户在做这件事情的同时,他是不是需要做其他的事情,要得出至少两种平行事件,得到的结论是,我们的界面是不是需要把某些功能整合在一起,因为用户经常是需要同时做这两种事情,同时去打开这两个功能,通过这样的反馈可以把同时使用的这两个功能结合到一起,通过访谈可以得到这样的依据,来进行功能的整合。


04. 主动询问用户观点


用户的驱动力: 去了解激励因素,就知道了什么功能应该做完善,什么功能并没有那么重要。比如汽车销售为什么要录入信息,因为可以增加汽车的销量,录入越准确的用户信息,他的销售量越高。也就是用户做这件事情,他的原因是什么。


用户遇到最难事件: 在工作中或者用户使用过程中遇见了什么样难的事情,这件难的事情,就是产品的痛点,就明白了当前产品迫切需要什么样的功能去帮我们设计师来解决当前产品痛点的问题。


用户遇到最飒事件:他在使用过程中最满意的是什么事情,就是爽点是什么事情,那些产品中解决了用户很好的问题的部分,去把产品更好的放大,让用户继续使用。也就是通过访谈我们知道了产品的爽点是什么。


用户担心事件:在他们使用过程中担心的是什么,我们也要要了解这些隐藏的问题.


用户期望事件: 用户希望得到什么样的改善,最终的目标是想解决什么样的问题,到这一步其实所有问题目前都没有答案,我们可以继续访问,先做记录,不做最终的答案.


问用户目前状态: 我们可以了解待解决的问题,通过产品想解决什么问题,进行收集需求;用户对于产品升级有什么小期待,进行收集需求;通过用户的反馈目前产品的哪些问题,收集到目前反馈的问题;以往问题是否有效解决;进行收集反馈。觉得不错的同类型产品有哪些,通过了解竞品情报,我们可以竞量多问一些 觉得不错的竞品有哪些;目前产品有哪些地方很好,很好的地方要保持,有的产品升级后,以前特别好的功能突然消失了,改了没必要,好的功能保持就可以;前产品有哪些地方不好,我们去优化不好的地方;以往问题是否有效解决,当有问题需要解决的时候,用户的问题是否是通畅的。通过看用户如何反馈,我们可以了解功能倾向,了解整个流程是否通畅


05. 聊生活

发觉人性闪光点,提升产品差异竞争力,1、问目前的生活状态,婚姻状态,有没有孩子,接送孩子的时间,平时有什么爱好?什么爱好不错?发觉人人性的闪光点,好的不好的产品都有共性,B端产品中视觉的倾向是什么?比如有插画,温馨的语言提示,通过什么样的情感设计可以照顾到每个人的生活。


2.4.4 B端用户访谈得出结论


如何判断功能在用户那里好还是不好?前面所有的都只是在记录,现在才是在做判断,判断的第一件事,是做定量的整理,所有的问题都收集到了,也记录到了,至少需要有两个样本,去做定量整理。

2.4.4.1定量整理:行为


第一步是行为的总结,量级的总结,把记录的问题点、功能点和关键词放到表格里面,经常出现,迫切需要解决的是什么问题,较少的问题是什么,偶尔的行为问题是什么,因此偶尔的优先级就不高了,主要关注经常遇到的问题点、功能点和关键词。


2.4.4.2 定量整理:特征


把每个角色按照以下表格里的的特征进行定量的描述,这时候仍然不能找出它的共性点,但已经把用户的特征进行分类整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


这个角色名称是一个具体的名字,比如王某某。以下这张表:可以看到在我们的系统中有哪些的权限,有哪些的角色,他们的需求是怎么样的,这是一个完整的用户画像。用户画像是一个结果,是通过用户访谈的形式完成了用户画像,并不是被动的接受数据信息得出的,所以通过用户访谈的形式进行定量定性分析得到的结果是最准确的。


3.1 建立情绪版


3.1.1 情绪版的概念及作用

本质是将情绪视觉化,情绪版并不是玄学的东西,它确实可以通过图片找到对应的图形元素,因为图形(照片)是可以表达情绪的,比如看到一张照片会感受什么什么情绪:热、冷、饿、干渴、安静、压抑、神秘、恐怖、失落、沮丧、速度、力量这些都是情绪相关的关键词。


情绪版是一个特别快速能和产品,我们的团队包括设计团队进行沟通的一种方式,比如要设计一个界面,需要几天才能设计出来,但我想提前知道一下未来界面设计成什么样子,那就先做一个情绪版,让大家知道,找的方向是什么,这样适合与大家及时的沟通,大家也会明白产品将会做成什么样子,达成产品的最终设计定调。


3.1.2 怎么建立情绪版


01. 提炼关键词:获取本次产品设计中所要实现的产品3-5个必要的关键字词组,其中包括交互或视觉目标,通常由一些比较抽象的形容词组成。比如:在做的产品是医疗行业,那么医疗相关关键字词组是:生命/健康/安全等。


02.关键词发散:通过获取到的关键词的基础上,发散出来一些新的词语,这种发散词汇,不是简单头脑风暴产生的,而是要有目的性的进行提取,要更加的具体。比如刚才举例医疗行业,生命可以继续发散出血液、器官等衍生关键词。


03. 搜索图形: 对之前总结出的几个关键词在图库中进行查找,也可以在直接在behance里找别人收藏好的情绪版图片直接用,效率可能更高一点。


04. 制作情绪版: 搜索大量图片后,挑出我们需要的进行整理,采用一种拼贴方式进行设计排版,拼贴出来需要得到需要得到的色彩,构图,质感和字体。


05. 得出结论: 在图形、色彩、字体、质感、构图,以上五点,得到合适的设计方案,快速与团队进行沟通,直观表达产品清徐,达成产品的设计定调。产品调性(企业调性)其实就是用企业的方式把故事讲述出来,是一种通过情绪版方法来讲故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法为什么逐渐替代情绪版


品牌三元法是通过品牌三板斧模型得出的一个确定设计主风格的一种新得方法,品牌三板斧模型可以总概为用户调研关键的三个维度,一目标用户是谁?二产品服务是什么?三对于目标用户来说,你的产品服务有什么核心价值。当在回答完这三个问题以后,我们其实就已经清楚我们的品牌定位是什么了,因为它的核心优势是比较明显的,这样我们就知道我们将来会面对什么样的人群,去怎样去宣传它的卖点,同时做出产品的差异化。


通过这几年得工作案例设计实践,在确定设计主风格时,情绪版方法逐渐有被品牌三元法替代得趋势,因为情绪版这种把抽象的词不太好表现的词,翻译成图片的方式,比如刚才提到医疗行业的关键词是生命,健康,安全的,设计师找到很多这种相关的图片,挑出来后从这些图片里面找到一个共同的规律,最后去设计。这里面就有两个问题,一个原因是关键词非常的平,生面,安全,健康,很难更准确的表达衍生关键词。另外一个问题是它非常局限设计师的创意,因为它是从一些现有的图片里面然后去挑,所以很多设计师就反馈现有的方法不是很好用,比如当我们想到安全这个词,可能所有人想到都是特别绿的感觉,或者干净这个词,就会统一联想到白色这个画面,大家从一开始想法就差不多,所以它很难体现出创意。所以由于情绪版严重限制了自己的想象力,没办法把产品核心的气质表现出来,虽然情绪版正确但是是一个平庸的结果,大家没办法记住的结果。


3.2.2 如何应用品牌三元法


01. 理性层面(业务层面),传递产品理念:获取本次产品设计中体现业务层面,可以传达产品理念得5-10个关键词,对应的放在左边。


02. 感性层面(人文层面),营造产品氛围:主要体现这个产品给用户带来什么好处,宣传的角度是什么。获取本次产品设计中体现人文层面,可以传达产品氛围的5-10个关键词,对应的放在右边。


03. 个性层面(气质灵魂),创造独特风格:结合理性的业务层面和感性的人文层面,来创作出什么样的画面,和独特风格的感觉。同样总结出5个左右的关键词,放在下边。


04. 结合以上三个维度,提炼主视觉画面:当出现这三部分词的时候,经过思考或者大家一起头脑风暴,可能一开始想到的比较浅,但最终一定能想到一个最终关键词或者特别符合我们这个产品气质的画面,因为以上三部分得出关键词也都是经过品牌三板斧模型推演出有关联的关键词,想到一个符合产品气质的画面并不难,再得出这个主视觉画面后,这就是最终产品调性的主视觉,既符合产品定位,又具有独特的差异性。


05. 传达产品,用视觉语言讲故事:接下来,当这个主题、主视觉确定了以后,在看怎么样用具体的视觉设计技能,去传达我们的产品,也就是用视觉语言来讲故事,具体注意三个方面,一是表像,元素要符合这个视觉主题,二是关联,元素之间要具有关联。三是隐喻,用视觉的手段含蓄的表达产品的一些特性。比如云计算的一些产品,做得比较复杂每一个图标上都有一些曲线切割的画面,这样做的原因其实不是为了炫技,它是为了表达云计算弹性可扩展的特性,好比拍电影,中国人讲究隐晦。


4.1 色彩规范


4.1.1 选色

在系统色彩中,以Antdedign为例,系统色彩里包含了很多不同的色调,但不可能用到这么多颜色,这时要应用选择几个颜色,选几个我们应用的颜色。第一步要做的就是选色,选出应用色彩,这个应用色彩也就是我们建立得视觉规范中的基础色板,在选色时候需注意,要有有明确的心理预期,比如医疗行业中常用蓝色和绿色,就是符合预期的颜色。在基础色板里选择调色,应选择两个相同级别的蓝色和绿色;基础色板里选不同颜色时不要超过三个级别的跳跃;当选择一个确定的颜色时,可以选择草绿或者青绿色来作为辅助色;在基础色板里,最顶部的颜色最适合做背景色,中间的颜色适合做按钮色,底部的颜色适合做状态色,或者小面积文字的填充色,其余就是搭配过度的作用。再比如零售、比如金融行业的产品,会选择不同的颜色,那这些颜色代表了什么,是不是会和企业的VI色是有相符之处,这些都是我们去要考虑的。


4.1.2 注意色彩的两个特性


01. 注意品牌性:体现特性和传播理念、价值观:比如宜家,我们立刻会想到的是黄色和蓝色。比如京东,我们会想到红色。如果是饿了么,我们会想到蓝色。这些都是标识性的色彩,体现和传递的就是品牌理念和价值观。这些颜色一定不是随便选的,比如,宜家的黄色和蓝色,其实是瑞典的国旗的颜色,代表着宜家的来源地来源于瑞典,因为瑞典是一个很强调简约设计的国家,贯穿始终是在强调它的的价值观。一些关键行动点:比如选中的状态,按钮的颜色,在很重要的地方用主色表达,这就是在体现B端的产品的色彩价值观和企业价值观的地方


02. 注意色彩的功能性:色彩需要体现功能有明确的信息以及状态含义,色彩代表它独特的含义,比如成功色,通常会选择绿色,再系统色板里,青绿草绿都可以选。比如出错/删除/失败用红色,表示警告警示。比如链接要用蓝色。


4.2 图标规范

画图标要注意图标的识别性、统一性和独特性。图标首先要一眼看出来表达的含义,其次是图标设计图标的大小,线宽粗细,圆角大小,图标风格等这些都需要统一,最后最好可以体现出图标的独特性,独特性就是差异化,这也是品牌三远法得核心,塑造产品的差异化,具体分析方法也可应用在图表设计当中,比如根据品牌基因进行延展,也可根据主风格主视觉设计定调,设计出独特风格且符合产品定位得图标应用在产品当中。


4.3 文字规范


4.3.1 字体家族

在B端页面中字体的显示顺序,有固定的一套代码模式,可以理解为,比如有的用户电脑没有平方字体,所以会显示出冬青黑体,来替代平方字体的设计稿,如果没有冬青黑体,就用微软雅黑替代显示,字体家族中,从左到右代表了字体显示的有限顺序,平方、冬青黑体、微软雅黑、黑体、宋体,中英文都是。


4.3.2 主字体

在系统中有中文常用PingFangSC、微软雅黑、思源黑体;英文常用San FranciscoUI(SF字体)、Helvetica Neue、Arial


4.3.3 大小与行高


方法一:在Antdesign中规定的,比如字体大小是14px,行高就是22px。规范里最小字体是14px,但可能有注释字体,字号最小是12px。表格里的内容是按照表格里的行高来约定的,与字体行高无关,这个前提是,不在表格里内。当没有出现文本字体,表格里的字体的时候就需要去设置字体的行高,Figma里默认行高是140%,比如14px字体,行高就设置成22。这是Antdesign里的规范,但不是唯一的规范。需要注意的是,如果使用一个标准就全部使用一个标准,这个需要把选中文字段落进行调整行高。


方法二:是当按倍率去算的行高规范,方法步骤是先调整好行高,去改变字体大小,比如无行高时,1/100%/1倍行高,注意加上%号;紧凑行高,1.3行高/130%;常规行高1.5行高/150%;宽松行高,1.7行高/170%。


4.3.4 文字的层级关系

辅助文字12px、正文(小)13px、正文(常规)14px、小标题(16px,小标题是相对于14号字出现的)、标题18px、主标题20px


4.3.5 字重

比如常用的苹方有6个字重,但在平时的设计中根本用不上。中文环境6个字重在实际显示并没那么好,常用两个字体,萍方常规体400(常规),苹方中黑体500(粗体)。而英文可以用粗体600。


4.3.6 字体颜色

在深色背景下、和浅色背景下不同内容的色彩透明度不同,具体透明度用百分比显示。在彩色背景下或者在不同颜色之下,字体应该使用白色还是黑色,应该按着规范严格使用,难点在颜色相近的时候选择白色还是黑色,也需按照规范执行。


4.3.7 文字对齐关系


文案类对齐:页面的字段、段落较短标题、需正文左对齐


表单类对齐:保证整齐适合阅读,冒号对齐法找到中间的冒号,(左右对齐),如果全部使用左对齐或者右对齐会更乱。左边一般最长字段六个字。前提是中文环境,不是国际化。冒号左右要留多少像素:8px的倍数相关值,4(窄点)、8(正常)、12、16(宽一点)都可以。


数字类对齐:日期,居中对齐;年龄,居中对齐/左对齐;非固定的数字:价格,采用右对齐,因为右对齐很容易看到价格的多少,哪个超出的更多,就越贵的,更容易区分数字的多少。


4.4 层级规范


层级规范得核心是对信息的间隔和区分,信息的区分间隔要用偶数8的倍数。具体可分为同层级的区分,用色块(比如气泡)、边框(栏目之间抖索狂等)、线段来进行区分。错层区分,用弹窗(背景变暗)、边框阴影(阴影的出现是拟物化的出现,当物体离它的光源越近,比如高度越高,它的阴影就越大越宽。离它的底部越近,阴影就越小,比如下拉框、搜索框、日历控件、弹出窗口来区分)。


这里需注意,关于投影,再前端角度考虑尽量不要用太多的特效滤镜来设计,因为在B端网页中,浏览器的兼容性不好,比如用ie浏览器就根本看不到这样的效果,如果用谷歌浏览器能看到,用safri浏览器能看到,但在火狐下等又会看不到,想要都看到就需要兼容很多代码,需要前端加很多代码实现兼容性的效果,很增加前端的工作量,所以在B端很少用非标准型的滤镜代码使用,虽然可以实现,但一般不太用,一般就是变灰、变深、变透明度最简单的方法实现。不同于移动端,因为IOS用的是原生的开发,所以不存在这个问题。


从接触B端设计两年以来,第一次详细梳理B端设计的系统知识点,从B端产品设计的工作流程,到B端设计前的准备工作,交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,进而深度理解B端主流组件库的视觉规范,为B端产品设计做出了充分的指导作用,对比我之前零散的知识记忆,这次B端设计前的准备工作梳理,也更加深刻的由点及面的形成了系统的框架,也重新认识了B端产品的分析方法,区别于之前一直从事的C端设计工作,也真正对B端和C端在设计思维上有了本质的区分,同时也锻炼了我的归纳能力和演绎思维和系统思维能力,期间参考资料有《B端设计研修》、《用户体验要素》、《信息架构设计》,谢谢阅读,希望对大家也有帮助~thanks


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

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

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

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


「克莱因蓝」是如何产生的?聊聊背后的极限艺术

资深UI设计者

本次跟大家聊一个比较纯粹的艺术风格,英文原名叫“Minimal Art”,为什么一开始就上英文呢,因为这个风格特别多不同的翻译名,如果只看中文资料有时候你不知道原来不同书籍中谈的是同一回事。

我列举几个常见的名称,分别有“减少主义“、”极少主义“、”质朴艺术“、”ABC 艺术“跟”极限艺术“等,因为”Minimal“是极少的意思,所以不同的研究者根据理解作了不同翻译。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术雕塑作品

这个艺术的特征是用极少的形式,极简单的色彩,通过绘画或者雕塑来表达一种周密的理念。

“ABC 艺术“这个名称要特别说明一下,因为 ABC 是拉丁字母表开始的字母,有简单初步的意思,而且顺口,所以在运动初期就有人以这个名字来称呼。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术绘画作品

在我们的讲述内容中,统一以“极限艺术“来称呼。

大家对这个艺术相信比较陌生,因为确实是比较“脱离群众“,史太浓可以列举一个历史作品拉近这种距离,那就是 1957 年在米兰画展上诞生的《纯蓝》,作者是法国艺术家伊夫·克莱因(Yves Klein)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

克莱因作品《纯蓝》

这个作品就是一张图上铺满一片由克莱因自己混合的蓝色,其它什么都没有,但是这个蓝色纯净得直击心灵,蓝得很理想,很绝对,展出后马上引发轰动,克莱因跟他的蓝色都一炮而红,这个蓝色就是后来大名鼎鼎的“国际克莱因蓝”(International Klein Blue,简称 IKB)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

伊夫·克莱因

说到这里肯定还有朋友不甚了解,不过没关系,这个“克莱因蓝”诞生后曾经火遍过时尚圈,迪奥(Dior)、纪梵希(Givenchy)等大品牌都曾经推出过“克莱因蓝”色的服装设计。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

迪奥曾经推出的“克莱因蓝“包包

而在 2021 年时候,这个蓝色又再复兴,被不少设计师用于商业设计,比如知名设计师潘虎老师不久之前为植物医生设计的产品包装就采用了这个“克莱因蓝”,效果非常惊艳。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

植物医生的产品包装设计

克莱因当时的这个叫《纯蓝》的作品,就属于一种极限艺术的一种。

为什么产生极限艺术


今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

“至上主义”绘画作品

第二个端点就是在 1960 年代的美国,我们先从这里讲会比较好理解,因为这个运动其实主要就发生在美国,在欧洲的影响都不算太大。

如果一直有看史太浓「风格列传」的朋友就清楚,1950-60 年代的美国曾经有过“抽象表现主义”(Abstractexpressionism)跟“波普艺术”两个重要艺术运动,而极限艺术的诞生跟两者密切相关。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

抽象表现主义风格作品

此处顺便多说一句「风格列传」的正确“打开方式”,就是每一个篇章的内容虽然各自独立,但应该顺着时间线顺序来看,这样会更加清楚很多艺术风格的承接关系。

因为极限艺术可以说就是针对抽象表现主义与波普艺术而发起的。

极限艺术阵营中的成员认为,抽象表现主义仅仅是表达艺术家一种瞬间的感觉,太不严肃,而波普艺术更是刻意要打破艺术中的高低雅俗,是反艺术的行为,这两种运动对于艺术发展而言都有着高度危害性。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

60 年代的波普风格作品

当然,这是极限艺术阵营的看法,所以它的诞生就是要明确的反对前两者,并消灭他们。

极限艺术主张艺术创作必须通过精心设计,有周密计划,而且作品必须是通过高度专业训练形成的结果,类似抽象表现主义那种随意性及波普艺术中的平庸商业感都是“垃圾“。

有了战略目标随之就是战术考虑,于是极限艺术的成员们就从 1910 年代时候马列维奇创作的《白上白》这个作品中找到形式的灵感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇作品《白上白》

马列维奇曾经说过:艺术不为政府与宗教服务,不描述行为历史,仅仅表达客观对象,表明简单的客观对象可以存在,不依赖于任何东西。

这种理念被极限艺术者们十分推崇,听上去也确实非常高端。

因此至上主义这样极其简洁的表现形式就成为极限艺术的首选,由此可见极限艺术在反对“抽象表现主义”的时候,其实也是从他们的源头“抽象主义”那里分割出来。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇作品《黑色正方形》

这种关系真心不好理解,我举个宗教发展的例子,比如天主教中曾经分裂出东正教,随后又再分裂出新教,但三者的主张不相同,而且新教是因为反对前两者而诞生的,大致这样,也许还不够贴切。

极限艺术源自抽象主义还有两个佐证,就是他们的思想根源除了靠拢马列维奇,跟“风格派”(详见「风格列传」-风格派篇)中蒙德里安(Piet Cornelies Mondrian)的艺术思想也十分一致,蒙德里安认为艺术品被创作出来以前,必须在艺术家的头脑中完全成熟。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

蒙德里安的风格派作品

蒙德里安的绘画艺术曾经被我们收录进抽象主义的范围进行讲述,这里要补充一句,就是关于艺术流派之间的关系难以理清,通常每个研究者都只能是无限接近,或者说各自有一套归纳方法。

另一个佐证就是很多极限艺术家之前就是搞抽象表现主义的,我们后面会介绍一下,这种情况太常见了,比如很多后现代主义设计师是从国际主义阵营中转变的,超现实主义艺术家很多从达达主义中产生。

我们在谈抽象表现主义的时候讲过一个分支,就是色域绘画,其实跟极限艺术在形式上已经非常相似。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

抽象表现主义中的色域绘画

当然,极限艺术家们指责抽象表现主义与波普艺术的作品没有思考是有些过分与不厚道的,等于说人家混饭吃,也等于一些甲方苛责设计师设计出品不上心一样,这些其实都无法证明,只能是主观感受或者是刻意发难。

那么,极限艺术在抨击他人的时候,自身的表现形式有什么特点呢,我们接下来看看。

表现形式与奠基人

其实马列维奇的至上主义具有很理性的本质,简洁图形的背后都有严谨的数学与几何思维,这一点就属于极限艺术的理论基础。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

马列维奇

他跟马列维奇是老乡,构成主义跟至上主义有着师承关系,意思是构成主义的一些思路源自至上主义,两种风格基本上是并行发展的,而构成主义更偏向设计这个端口多一些。

塔特林当时提出过一个艺术理念,就是:真实的空间感与真实的质感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

工作中的塔特林

这种理念跟至上主义一样,都尊崇严谨的理性主义及数学思维,再形成审美品味,而且是一种比较曲高和寡的高度审美化。

塔特林的这个理念后来主要体现在极限艺术的雕塑作品中。

这里我想到了古龙小说中的小李飞刀李寻欢,他的武功特点就是不管对方怎么厉害,他都是一刀解决,所谓“小李飞刀,例不虚发”,没有任何花哨的招式,一招致命。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

《小李飞刀》又名《多情剑客无情剑》

确实是种深不可测的武功,这个时候我们再回看克莱因的《纯蓝》也许就是这种味道。

但如果你让我说清楚《纯蓝》到底表达了什么,坦白说不可能,我不认为除了作者之外有人有资格谈作品的创作概念,如果谈都是扯淡居多,赏析没问题,可以谈感受,或者揣摩作者想法。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

克莱因作品《纯蓝》

但有一点可以肯定,克莱因调出这个颜色花的功夫费的心思不亚于爱迪生研究他的电灯泡。

极限艺术正式的开始被定义在 1959 年,当时美国纽约的现代艺术博物馆举办了一个画展,一名 23 岁名叫法兰克·史提拉(Frank Stella)的青年艺术家展出一张名为《16 个美国人》的作品。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉作品《16 个美国人》

作品画面空空如也,只是黑色画面上有简单白色直线条,非常耐人寻味,但产生很大影响,极限艺术第一枪就这样打响,或者说浮出水面,开始逐渐形成流派与理论。

这个风格另外还有两位重要奠基人,分别是巴涅特·纽曼(Barnett Newman)及阿德·莱因哈特(Ad Reinhardt),两人最初也是活跃于抽象表现主义阵营,后来投身到极限艺术的探索。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

纽曼与莱因哈特

先说一下纽曼,他在美国属于波兰的移民,生于 1905 年,1922 年开始学习绘画与艺术,1930 年代之后逐渐全职从事艺术创作。

1948 年时候,43 岁的他创作了一张名为《温曼一号》(Onement 1)的绘画,画面就是黑红的底色上画了一条橙黄色条纹,非常简单,属于极限艺术的潜伏期作品。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

《温曼一号》

纽曼从这个作品开始就一直以这种风格进行创作,他的作品尺寸非常大,而且几乎都是一个底色上画些横线或者画些竖线,然后就没有然后了。

所以当他在 1950 年开始搞个展的时候引发艺术评论界的批判,因为也有混饭吃的嫌疑,直到 1960 年代极限艺术理论体系逐步完善,而且有走红迹象的时候评论界才改变对他的态度,转而将他奉为极限艺术的大师。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

纽曼的极限艺术绘画作品

所以有时候,成也媒体败也媒体,评论界有一部分评论家对艺术的评价常常见风使舵,针对自身利益出发,比如希望吸引大家注意力,就像如今很多吃“人血馒头”的自媒体。

不管如何,60 年代的纽曼成名了,然后他的作品影响另一位艺术家,那就是前面谈到的另一位奠基人阿德·莱因哈特。

莱因哈特比纽曼年轻 8 岁,生于 1913 年,早年从学习设计转而进修艺术,1937 年到 1947 年期间都是抽象表现主义流派的成员。

他的早期作品色彩鲜艳明亮,有着硬边几何的形式风格,有点像立体主义,也像风格派。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莱因哈特早期作品

1950 年代开始他就将自己的创作形式变得越来越简单,比如将作品限制在单色范围,而到了 1960 年代,因为纽曼的影响,他坚决投身于极限艺术的创作中。

他的作品开始表现变得更加极致,大部分都是采用不同明暗程度的黑色长方形进行重叠,非常单纯,如果用前些年比较流行的网络语句来形容看他的画,就是“看了个寂寞”。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莱因哈特极限艺术绘画作品

莱因哈特除了创作之外,热心于通过写作及演讲来推广极限艺术,产生不错的效果,所以大家将其视为极限艺术的奠基人之一。

极限艺术与雕塑

极限艺术除了在绘画中表现,还有一个重要载体是雕塑。

有些从事极限艺术的艺术家本身横跨绘画与雕塑两个领域,其中最突出的就是法兰克·史提拉(Frank Stella)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

法兰克·史提拉

他被誉为美国最知名的极限艺术大师,原因在于他的作品有强烈个人特色,早期主要进行绘画创作,随之转向雕塑与装置,正是雕塑作品让他成了大名。

史提拉成大名的原因在于他反其道而行,不是采用“少即是多”(Less is more)的原则,而是“多即是少”(More is less),将作品做得非常繁杂。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

这里很多朋友就奇怪了,那不是跟极限艺术中的“极少”产生矛盾吗?所以史提拉是将极限艺术拔高到哲学高度,让人产生深刻的思辨。

情况如同硬币的两面,如果在一张白色画纸上只画上一笔黑色,大家的注意力就只集中黑色,但当黑色的笔画不停增加,直到最后只剩下一小片白色底色时,大家则变成关注白色,所以“以少见多”变成了“以多见少”。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

再比如一个人最开始只拥有一个专业身份的时候,他感觉很少,但其实因为这种少形成的专注让他拥有更多,分别是专业领域深度上的多跟时间自由上的多,因为专业上的极致能让回报更大,越到后面越轻松自如,能腾出更多时间放在生活。

而当身份越来越多自以为拥有更多时,因为散焦反而让收获更少,疲于奔命失去生活。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的绘画作品

举个更现实的例子,当你买多一部车或者买多一套房子的时候,确实物质的拥有多了,但会相应产生一系列更多的问题,比如忙于车的停放、保养、改装,俱乐部活动。

拥有多一套房子就要多思考新的装修,摆设,还不得不做更多工作还贷,所以这时候“多”与“少”让人迷惑,根本无法分辨清楚到底是多还是少。

史提拉在这方面最著名的雕塑作品是 1990 年创作的《梅杜莎之筏·之一》(法国浪漫主义画家席里柯有同名作品《梅杜莎之筏》)。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉作品《梅杜莎之筏·之一》

这个作品使用一个坚固的金属支架,横向支撑出一大堆支离破碎,缠绕在一起的金属片、金属线与金属构件,看上去就是一团乱糟糟。

史提拉对这个作品没有作任何解释,他说作品没有象征意义,没有隐喻,所有内容与思想都在作品本身,大家只需要观察,这一点倒是很符合前面谈到的塔特林艺术理念,就是:真实的空间感与真实的质感。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

史提拉的其它雕塑作品

其他极限艺术的雕塑作品则跟主流的极限艺术绘画差不多,都是用最少最简单的形式进行创作。

比如卡尔·安德勒(CarlAndre)在 1969 年创作的《镁和镁》(Magnesium-Magnesiumplain),其实就是用 30 厘米见方的镁金属以 6*6 的数量(有一个版本是 12*12)铺在地上,简单到不得了。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

安德勒作品《镁和镁》

展览过程中也没设阻挡,所以经常有观众很自然的从上面走过,以为是金属地板。

安德勒的创作特点就是喜欢采用现成品以数学的韵律进行不同方式的组合、排列、堆砌形成简单的雕塑,大部分是金属片材、砖头、木块等。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

安德勒与他的雕塑作品

还有一位知名的极限艺术雕塑家名为罗伯特·莫里斯(Robert Morris)。

他在 1988 年时候创作名为《艾尔斯》(The Ells)的雕塑作品,其实就是三个 L 字形状的铁笼用非对称的方法进行摆设。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莫里斯作品《艾尔斯》

莫里斯有时候也很喜欢采用圆形进行创作,这种几何中最基本的形式被很多极限艺术家喜爱,因为圆形统一又简单,同时具有饱满的形式特点,他的作品常有这种元素。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

莫里斯极限艺术雕塑作品

极限艺术的雕塑情况大致如此,余不一一。

结案陈词

极限艺术其实发展到如今都仍然存在,但声势明显变得比较弱,因为他主力反对的抽象表现主义及波普艺术都衰退了,等于也失去发展的着力点。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

现代家居中的极限艺术装饰画

情况就如同商业市场,百事可乐需要可口可乐的存在,麦当劳需要肯德基的存在,所谓遇强越强,对手变弱甚至消失,也会让自己也不再进步甚至消亡。

我们如今还经常会听到设计中的 “极简主义”,其实并非完全一回事, “极简主义”更多是种延展的设计概念,还是属于基于功能问题为基础的形式考虑,而极限艺术不需要考虑任何功能。

今年最火的「克莱因蓝」是如何产生的?聊聊背后的极限艺术

极限艺术海报《皮尔斯怪兽公司》

在一些概念海报,装饰画或者公众装置艺术中极限艺术仍然适用,至于怎么才能真正用好,这期分享相信一定对你有所帮助。

文章来源:优设   作者:设计史太浓VS远麦刘斌


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

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

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



从原子设计理论角度解密AI智能设计-神秘的AI智能设计到底怎么实现的?

资深UI设计者


文章来源:站酷 作者:SPECHEN 

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

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

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

如何定义用户体验研究方法

ui设计分享达人

用户体验研究可帮助企业了解目标受众的需求和行为,证明或反驳潜在假设,使他们不会根据虚假信息继续前进,并根据数据战略性地发展他们的产品。最终,它帮助他们创建和维护能够吸引和留住客户的产品,从而使企业取得成功。但是,您实际上如何确定用户体验研究项目的最佳方法?

本文分享了四步框架的概述:(1) 确定您想学习的内容;(2) 确定您要针对的对象;(3) 考虑时间表、预算和团队;(4)选择方法。

1. 确定你想学什么

让我们从第一步开始——确定你想学习什么。此时有3个问题:

您是在尝试探索想法还是评估想法?

探索性研究,也称为生成性研究,通常发生在产品设计和开发过程的开始阶段。它提供了对客户问题、需求和动机的深入洞察,帮助您确定构建什么、如何构建以及目标对象。

评估研究通常发生在产品设计和开发已经开始或产品发布之后。它评估产品的功效和可用性,帮助您确定痛点和改进机会。

您是在收集与新产品还是现有产品相关的数据?

如果您正在尝试产生想法并弄清楚如何塑造新产品,那么探索性研究将是最合适的。

如果您正在尝试确定如何改进和改进现有产品,则评估研究将是最佳选择。

这是一项独立的研究工作还是更大项目的一部分?

探索性研究通常是在推进产品创意之前自行进行的。

评估研究活动往往是在正在进行的设计和/或开发工作的背景下进行的。

2. 确定您的目标对象

现在让我们进入第二步——确定你想要定位的对象。这是该过程的关键部分。只有与合适的人一起进行研究,您的研究见解才会有价值,因此您需要注意寻找能够提供您所需观点的参与者。此时有3个问题:

谁是目标受众?

定义你想要接触的人的特征。例如,您的目标受众可能是向消费者销售产品或服务且每月在数字广告上花费不到 1,000元的小型企业的所有者。

您是否已经可以访问此受众群体?

如果您正在对现有产品进行研究,您可以利用现有的客户群。

如果您正在研究新产品或尝试接触新的客户群,则需要探索其他选择来接触目标受众。

如果没有,你怎么能接触到有代表性的受众?

您可能会考虑使用自助招聘工具,如用户面试或与招聘机构合作。

3. 考虑时间表、预算和团队

现在让我们进入第三步——考虑时间表、预算和团队。所有项目——不仅仅是研究项目——都有限制,重要的是在考虑这些限制的情况下定义你的研究方法。不过,约束不一定要受到限制。它们实际上是一个有用的工具,可帮助您专注于如何利用可用资源来产生最大影响并提供最大价值。

时间线

对于您的时间表,您想确定您是否在特定的截止日期前工作,例如即将举行的董事会会议或产品发布。

预算

对于预算,您需要确定哪些资源可用并且可以分配给该项目。当您考虑预算时,不仅要考虑人员成本,还要考虑任何补充研究成本,如招聘费用、参与者薪酬和工具,这一点很重要。

团队

对于任何团队限制,确定您是否具有研究能力以及这些能力是什么。您需要考虑您的团队中是否有可以进行研究的人员,或者您是否需要引入外部支持。即使你有一些内部能力,这些人也可能没有能力在截止日期前完成工作。

4. 选择方法

现在是该过程的最后一步 - 选择用于收集数据的方法。在这里,您可以真正深入研究并弄清楚自己要做什么。有两个组成部分会影响您的决策——范围和数据。

范围

对于范围,您首先需要确定是要使用单个方法还是多个方法。利用多种方法可以收集更广泛、更细致的数据集,但也更昂贵和耗时。您还需要确定是要进行长期研究还是需要立即获得反馈。

长期研究将是最适合的探索性研究,你需要建立的观众基础的了解,然后才能继续前进。

即时反馈 最适合评估性研究,在这种研究中,您希望在继续之前获得投入的正在进行的工作。

数据

对于数据,您首先要考虑哪种方法最适合目标和受众。

如果您正在探索新产品的想法,您可以从采访开始。如果您正在收集有关原型的反馈,并且需要尽快从受众那里获得反馈,您可以利用简短的未经审核的可用性测试会议。

您还需要考虑是要捕获定性数据、定量数据还是两者兼而有之。如果我们回到前面,定性数据可以帮助我们理解原因,而定量数据可以帮助我们理解什么。

您使用的方法将取决于您尝试获取的信息类型,以及与您合作的时间表、预算和团队。

每个研究项目都是独一无二的。但是定义方法的过程在不同项目中是相似的。如果您对进行研究感兴趣,我鼓励您利用上面概述的四步框架来帮助您找出最佳的前进道路。一旦您有了基本的构建块,您就可以继续制定更精细的研究计划,其中概述了具体的假设以及您将如何执行工作。

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

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

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

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

多级菜单设计最佳实践

ui设计分享达人

导航和可查找性是用户体验设计的核心方面。如果用户无法找到他们需要的东西,他们就会感到沮丧并可能决定去别处寻找。在信息架构特别复杂的网站上,多级菜单是提高导航和可查找性的有效方式,从而提供有效的网络体验,促进产品信任和促进转化。

由于产品和使用它们的设备千差万别,因此没有一刀切的解决方案。但是,有一些经验法则可以帮助您构建多级菜单,从而增强在不同屏幕尺寸上的导航和可查找性。

不同尺寸屏幕的设计技巧

一个好的多级菜单应该通过以清晰、直观的方式呈现信息,让用户快速找到他们需要的信息。在我们进入特定于尺寸的指南之前,让我们看看一些适用于所有菜单的做法。

使用不超过两级的子菜单。任何多于两级的子菜单都可能使用户感到困惑。保持导航相对平坦可以提高用户的可查找性,并减少记住他们所在位置所需的认知负担。如果站点的页面结构很深,请考虑在密切相关的页面顶部添加本地导航菜单。例如,设计复杂业务支持产品的 Zoho 在每个产品页面的顶部放置了一个特定于产品的本地菜单,就在主菜单的下方。虽然顶部的主菜单列举了 Zoho 的核心产品,但本地菜单提供了对包含更详细信息的页面的访问,例如用例和定价。

用图标标记子菜单。通过始终明确何时有可用的子菜单来管理用户的期望。熟悉的选项包括一个小的下角图标或三角形图标。此外,请考虑在子菜单打开时翻转指针图标。

直观地组织信息。确保信息的层次结构与用户的心智模型一致。例如,在电子商务网站上,考虑购物者是否更有可能期望按品牌或商品类型组织商品。如果用户单击“鞋子”类别,他们是否希望子菜单显示运动鞋、凉鞋和靴子的选项?或者他们是否希望看到一个子菜单列出商店出售的每个品牌的鞋子?

确保用户始终知道他们在哪里。始终突出显示主菜单上与用户所在页面相对应的链接。如果当前页面在子菜单中,则在主菜单上也突出显示子菜单链接。

保持简单。菜单不是进行巧妙文字游戏的地方;确保链接标签具有强烈的信息气息。这意味着保持标签名称简单明了和描述性,以便用户在点击时立即知道他们会找到什么。文案越清晰,用户就越快找到他们需要的东西。

优先考虑可读性。使用简单的无衬线字体并确保项目周围有足够的间距以避免混乱。确保背景足够不透明以遮挡菜单后面的任何内容。但不要忽视网站的整体品牌。虽然可读性是第一位的,但要确保菜单的样式与网站的其他外观和感觉相得益彰。

使点击变得可访问。为了让有精细运动控制障碍的用户可以访问菜单,请遵循 Google 的Material Design指南,并将可点击元素的大小设置为至少 48 x 48 像素。

网站菜单设计技巧

即使移动趋势日益增长,客户可能需要功能齐全的网站的原因仍然很多。例如,他们可能需要在网上提供比移动网站可行的更多信息。或者他们的研究可能表明他们的用户只是更多地依赖台式机。

网站菜单应该易于浏览,提供清晰的交互,当然还有响应性。它还应尽可能与移动网站保持一致,以便为回访者提供直观的体验。

菜单应该在点击时打开,而不是悬停。您需要做出的最基本的决定之一是用户将如何访问站点的菜单。将指针悬停在菜单上是否足以触发菜单的外观,还是用户需要单击它?

悬停方法很流行,但点击打开是确保菜单在所有设备上可靠、直观地工作的最佳方式。单击方法使网站能够在传统的计算机显示器和类似的触摸屏上更一致地工作,并避免悬停方法出现的许多问题,包括:

a) 狭窄的悬停空间。悬停空间是鼠标在保持菜单打开的同时进行导航的路径。如果它太窄,菜单可能会在用户到达他们想要的链接之前消失。

b) 意外打开。如果用户在前往页面上的另一个位置的途中尝试浏览悬停菜单,则很容易无意中打开悬停菜单。设置一个短暂的延迟可以解决这个问题,但当用户确实想要打开菜单时可能会导致不适。

c) 触摸屏上的用户体验不一致。悬停菜单在触摸屏上不起作用。他们需要一个代码来检测触摸屏并切换到点击打开;随着笔记本电脑和平板电脑之间的界限越来越模糊,这些变通办法可能会过时。

d) 关于什么是可点击的问题。使用悬停菜单,用户在尝试单击之前并不总是知道父链接是否可单击。这与直觉相反。

e) 可访问性。悬停菜单可能会给使用屏幕阅读器或通过键盘导航的用户带来问题。

选择正确的布局:下拉菜单与超级菜单。如果网站使用传统的菜单布局(位于页面顶部的水平菜单栏),您可以考虑两种类型的子菜单:标准的单栏下拉菜单或多栏超级菜单。

如果父类别包含的链接少于八个,请考虑使用下拉菜单。如果下拉菜单足够长,需要垂直滚动,您应该考虑以不同的方式组织信息——也许作为一个大菜单或通过细化父类别。

超级菜单是一种嵌套菜单,通常使用可以扩展浏览器宽度的宽布局。如果子菜单包含许多可以按列分组的不同链接,您应该使用这种类型的菜单。通常,您会在大型电子商务网站上看到这样的菜单。

设计大型菜单时,请考虑以下事项:

a) 添加图像或图标,使信息更易于浏览。

b) 添加标题以对相关页面进行分组。

c) 如果类别名称不言自明,请添加说明。

大型菜单在移动设备上可能难以阅读和导航,但有时在更大屏幕上用户体验的改进使得为移动设备重新配置信息而做额外的工作是值得的。

添加清晰的悬停状态。使用点击打开菜单,包括所有可点击元素的清晰悬停状态,会使户确信链接处于活动状态。您可以使可点击区域的背景稍微变暗以指示悬停状态。只要确保悬停区域与可点击区域匹配。如果测试表明用户需要更多指导或上下文,请考虑添加更多描述性标签名称或工具提示,只要它不会阻止任何重要的内容。

单击以关闭子菜单。当用户点击别处或打开另一个子菜单时,通过关闭菜单来保持直观。这就是下拉输入字段在表单中的工作方式,因此大多数用户会觉得这很熟悉。

在桌面上启用键盘导航。并非每个人都使用鼠标进行导航,因此菜单应允许用户使用键盘进行导航。这意味着所有链接都应该具有不同的焦点状态,以便用户可以一目了然地看到它们的位置。通常,深色框可以很好地指示聚焦状态。

移动屏幕的设计技巧

如果您尚未设计移动优先,则需要优化手持设备的菜单。传统的菜单布局在非常小的屏幕上很少能很好地操作——如果你只是缩小桌面菜单栏,没有人能够阅读它。

简化主菜单。由于智能手机屏幕很小,您在桌面菜单中找到的大部分信息最初都必须隐藏。主菜单栏必须非常简单,但最好显示最重要的链接以提高可查找性。您可以将菜单栏固定在屏幕底部或顶部。

添加菜单触发器。由于移动菜单的全部或部分可能被隐藏,用户需要一种方法来找到它。在菜单栏或易于触及的浮动按钮中添加汉堡图标是一种流行的解决方案,许多用户都会认可。然而,汉堡菜单并不是唯一的选择。例如,如果您正在为年长的用户设计,则最好使用带有“菜单”一词的框。或者,如果您想让网站的功能更加突出,您可能希望将它们显示在顶部或底部的选项卡式菜单中。

将菜单放在侧边栏中。您可以通过多种不同的方式设计移动菜单。您可以使用全宽布局,适用于任何情况;底部抽屉,最好只有几个链接;或圆形菜单。一个不错的选择是使用带有深色半透明背景的侧边栏来遮挡页面内容,从而消除干扰,并允许用户轻松点击它以将其关闭。还可以考虑使用从左滑动的动画来避免不和谐的体验。对于侧边栏和底部抽屉菜单,请确保菜单可垂直滚动,以便在较小的屏幕或横向模式下不会有任何内容被遮挡。

允许用户轻松关闭菜单。用户可以直观地点击菜单来关闭它,但也可以考虑添加一个关闭按钮。您可以将汉堡图标变成 X 或在菜单的右上角添加一个。

对单个子菜单使用扩展部分。如果菜单只有一级子菜单,请考虑使用扩展部分。您可以将它们展开到父项下方,并使用不同的背景颜色来清晰显示。您还可以允许用户同时展开多个子菜单。考虑使用父项右侧的下角或三角形图标来指示子菜单可用。

用重叠菜单替换大型菜单和多个子菜单。如果您需要展开多个子菜单或重新配置大型菜单,请选择重叠方法:不要在父菜单下方或旁边展开子菜单,而是让子菜单替换父菜单。使用这种方法,您必须在除第一级之外的所有面板上都包含一个“返回”链接。对于顶级菜单,请考虑为父项使用直角图标或右箭头。

预打开子菜单。在小屏幕上,如果用户点击打开主菜单并且他们当前所在的页面在子菜单中,请考虑自动打开子菜单,以便用户了解它们相对于其余菜单项的位置。

总结

导航是客户体验的重要组成部分。用户不想进行寻宝游戏,也不想花更多的时间浏览菜单。如果他们无法轻松找到他们需要的东西,他们可能会放弃网站或界面,将他们的注意点转移到其他地方。

精心设计的多级菜单是具有复杂信息架构网站的关键组成部分。希望这些方法在各种用例中为您提供良好的帮助。

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

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

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

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


7个用户深访秘诀

资深UI设计者

当你需要为你的叔叔购买一份圣诞礼物却不知道该买什么的时候,你还熟悉那种感觉吗?与往年一样,你可以购买任何一种为男士所准备的圣诞小礼物,并把它牢牢粘在圣诞袜里面。

但你有没有想过,若是留心你叔叔的日常生活,并问问他会给自己买什么,也许就会有一些新的发现。很可能一个全新的鱼饵包就会给你叔叔带来一个全新的夏季体验。

作为一名设计师,在为我不太了解的用户设计产品时,我也遇到了类似的问题。在线调查(Online surveys)、用户评论网站(user review sites)和焦点小组( focus groups)是收集用户洞察的利器。除了这些,深度访谈 (in-depth interview,缩写为IDI)是一个常常被忽视的好方法,毕竟,这就像是问询那样简单。

用户访谈对收集产品需求很有帮助。但不幸的是,如果访谈执行不佳,反而会带来误导。

作为一名高级产品设计师,在我的职业生涯中,花了很多时间准备和开展用户研究工作。我阅读了大量资深设计师撰写的相关文章,然而这些文章依然忽视了在实际访谈中可能会发生的很多细节问题。因此我写下了这篇文章,和大家分享这些年做用户访谈的经验与心得。

 

1. 找准目标

在去想“我要问什么问题”前,先专注于具体的研究目标。试着反问自己以下这些问题,可以帮助你轻松确定研究目标:

  1. 这次访谈的具体目的是什么?
  2. 我为什么要进行这项研究?
  3. 我要从这项研究中学到什么?
  4. 我想要了解哪些信息?
  5. 谁会需要这些信息,他们会用这些信息做什么?

把答案一一写下来,先笼统后具体。“你需要知道的”和“你想知道的”之间仅仅隔了一层纸,问偏了方向很可能对研究产生误导。忘记你的假设,确保研究目标与企业需求一致,进而制定合适的业务目标,不要掺杂个人观点。

 

2. 问合适的问题

了解研究目标将决定深度访谈中会问到的具体问题。访谈成功的关键是问出能反映“受访者正在想什么”的问题,而不是你认为他们正在想什么。要做到这一点,请遵循以下规则:

  1. 问“开放式”问题:
    避免问那些会暗示某个答案会比另一个更好的问题,也避免那些简单到可以用“是”或“否”来回答的问题。一个好的开放性问题是:“你早上一般会做些什么?” 而不是:“你早上喜欢喝咖啡吗?”
  2. 缩小范围:
    在澄清用户回答时,可以用封闭式问题来缩小问题范围。例如,如果你问“请告诉我关于你移动设备的使用情况。”,而用户回答又不够具体时,你可以通过问“你一天会使用移动设备多长时间(小时)?”来缩小范围。
  3. 不要直接问“为什么”:
    受访者可能认为它带着质疑的口吻,所以最好重新表述。例如,与其问:“你为什么需要这款应用软件?” 不如问:“你最喜欢这款应用软件的哪些优点?
  4. 问简单的问题:
    尽量避免问需要双重回答或包含双重否定的问题。让提问便于理解。
  5. 问用户的经历:
    为了给人留下良好的第一印象,人们倾向于展现出自己更好的一面,而非真实的一面。用户常常为了迎合访谈员,会说出一些与自己的真实想法没有半毛钱关系的观点,这就是为什么需要让用户回忆自己的个人经历或特定事件,以获得具体详细的答案,这样问是非常明智的。
  6. 让用户举例,而非你提供例子:
    为受访者提供一个可以追加阐述的空间,你可以用他们:“还有其他的吗?”、“这对你来说意味着什么……?”、“请帮忙再说明一下……以便我详细了解?”等

 

3. 高效招募

如果我每次被问到“深度访谈到底需要访谈多少名用户?“时我都能赚1美元,那我早就成为百万富翁了。以下三条简单的规则将帮你确定受访者的数量:

  1. 受访者的数量取决于问题规模和目标用户规模。
    如果你想从“餐馆老板”那里收集反馈,10名受访者就足够了。而你需要访谈“观看电视足球比赛的观众”时,则需要大约50名不同人口学背景的受访者。
  2. 相比访谈大量“单一人口学背景”的用户,你可以只访谈少数几个“背景各不相同”的用户。
    当然,目标群体应该有一些共性,但是在年龄、收入、兴趣等方面背景多样,这样你就可以对这个研究课题有更广泛的看法/视角。
  3. 通过预算来确定具体的访谈人数。
    请记住,一场访谈需要大约1小时,但分析一场的访谈数据则需要3小时。如果你的预算很少,最好改成简短的非正式访谈,而不是放弃访谈。

过度精细的定性研究是对资源的浪费。 最好的结果来自于“不超过5名”的用户,并在你的预算内开展尽可能多的小规模测试。
——雅各布·尼尔森(Jakob Nielsen)

 

4. 构建强大场景

每次访谈都需要周全的准备。从一开始就列出能满足你所需信息的所有问题。同时写下能想到的所有问题,别在乎对错。仔细思考你的访谈目的以及想了解的具体信息。列完问题后,请遵循以下规则:

  1. 确保问题从“宽泛”到“具体”。
    这样可以帮助受访者进入使用场景、确认主题并准备好提供更深思熟虑的回答。尤其是在访谈开始时问一些宽泛的问题,可以帮助受访者放松下来,敞开心扉,进而展开更详细的对话。
  2. 关注用户。
    关注他们的主要目标、动机、习惯和痛点。尽量避免与研究目标无关的话题。
  3. 尽量减少引导性问题。
    好的问题是“你使用外卖软件吗?”, 而不是“你多久使用一次Uber Eats?”
  4. 避免在访谈中加入你的观点。
    访谈结果不应取决于访谈员的技巧或行为,也不应取决于其他外部环境因素。

 

5.不要慌,保持变通

尽管你很可能为用户访谈制定了一个完美的计划,但你依然无法预见一切。对访谈中的细微变化保持开放心态,不要害怕在访谈中提出新问题。在适当的时候引入新的主题是非常受欢迎的,你也可以随时调整问题的顺序。

请确保你能控制整个访谈节奏,并保持逻辑性,不要在话题间随意跳转。为此,请遵循以下规则:

  1. 做好准备。
    在访谈前准备好你已经列出的问题清单,确保能够更好收集你想获取的信息。
  2. 牢记计划。
    有经验的访谈员会对访谈流程烂熟于心,这样就可以在访谈的任何阶段进行问题的灵活切换,且不会丢掉研究目标。
  3. 不要执拗于当前的访谈场景。
    如果谈话偏离了主题,礼貌地重新聚焦,必要时甚至可以换个话题。关键是保持灵活性。

 

6. 尽可能客观

用户访谈法的短板在于很难完全客观,因为人们倾向于用自己的观点取悦其他人,这会对访谈结果产生负面影响。我们很难判断受访者是否在说真话,或者他们是否能够明确说出他们想要什么。

看他们做了什么,而不是听他们说了什么,绝对不要相信人们预测自己未来可能会做的事情。

——雅各布·尼尔森(Jakob Nielsen)

为了应对这种风险,试试这样做:

  • 减少研究中的人为因素。
    由于每个问题都会使受访者承受被他人评判的压力,受访者的回答或多或少都会受到访谈员的影响。因此可以借助第三方工具来收集反馈,例如UserTesting 或 Lookback(用户在线测试工具),使流程自动化以便减少人为干预。
  • 找不熟悉的人来参加访谈。
    如果找来熟人,他们更有可能以你理想的方式帮助你完成用户研究。理想情况下,建议由不了解项目目标和肯定不知道潜在设计问题的人员来参加访谈。
  • 人们所说的与他们所做的往往是两回事。
    尝试将访谈与行为观察(或简单的可用性测试)结合起来,以便有机会看到用户的真实操作,进而验证用户所说的是否在实际操作中真的发生了。

 

7. 多听少说

在追问具体细节之前,允许受访者用他们自己的方式自由发言,即使你对答案不满意也不要轻易打断他们。不要急于发问,耐心倾听他们的意见,根据需要随时调整问题或温和地提醒他们回到本次访谈的主题上。

优秀的访谈员都懂:倾听比提问更重要。

虽然向受访者提供访谈相关信息很重要,但是如果整场访谈主要是你(访谈员)在说话,那么你很有可能无法真正了解受访者的想法。

 

我的想法和评论(最后)

我认为自己是一个完美的访谈员吗?不!访谈需要练习,就像生活中的其他事情一样。

随着你的访谈经验越来越多,你犯的错误就会越来越少。所以,在你直接开展访谈前,先观察身边更有经验的同事是怎么做的。或者你可以试着找一位导师来帮助你。

以上经验帮助我一次又一次地避免了代价高昂的错误,还让我的访谈过程更加高效。希望你也会发现它很有用。 好运!








文章来源:UXRen 作者:Karolina Olejniczak

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

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

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

7个用户深访秘诀

资深UI设计者

当你需要为你的叔叔购买一份圣诞礼物却不知道该买什么的时候,你还熟悉那种感觉吗?与往年一样,你可以购买任何一种为男士所准备的圣诞小礼物,并把它牢牢粘在圣诞袜里面。

但你有没有想过,若是留心你叔叔的日常生活,并问问他会给自己买什么,也许就会有一些新的发现。很可能一个全新的鱼饵包就会给你叔叔带来一个全新的夏季体验。

作为一名设计师,在为我不太了解的用户设计产品时,我也遇到了类似的问题。在线调查(Online surveys)、用户评论网站(user review sites)和焦点小组( focus groups)是收集用户洞察的利器。除了这些,深度访谈 (in-depth interview,缩写为IDI)是一个常常被忽视的好方法,毕竟,这就像是问询那样简单。

用户访谈对收集产品需求很有帮助。但不幸的是,如果访谈执行不佳,反而会带来误导。

作为一名高级产品设计师,在我的职业生涯中,花了很多时间准备和开展用户研究工作。我阅读了大量资深设计师撰写的相关文章,然而这些文章依然忽视了在实际访谈中可能会发生的很多细节问题。因此我写下了这篇文章,和大家分享这些年做用户访谈的经验与心得。

 

1. 找准目标

在去想“我要问什么问题”前,先专注于具体的研究目标。试着反问自己以下这些问题,可以帮助你轻松确定研究目标:

  1. 这次访谈的具体目的是什么?
  2. 我为什么要进行这项研究?
  3. 我要从这项研究中学到什么?
  4. 我想要了解哪些信息?
  5. 谁会需要这些信息,他们会用这些信息做什么?

把答案一一写下来,先笼统后具体。“你需要知道的”和“你想知道的”之间仅仅隔了一层纸,问偏了方向很可能对研究产生误导。忘记你的假设,确保研究目标与企业需求一致,进而制定合适的业务目标,不要掺杂个人观点。

 

2. 问合适的问题

了解研究目标将决定深度访谈中会问到的具体问题。访谈成功的关键是问出能反映“受访者正在想什么”的问题,而不是你认为他们正在想什么。要做到这一点,请遵循以下规则:

  1. 问“开放式”问题:
    避免问那些会暗示某个答案会比另一个更好的问题,也避免那些简单到可以用“是”或“否”来回答的问题。一个好的开放性问题是:“你早上一般会做些什么?” 而不是:“你早上喜欢喝咖啡吗?”
  2. 缩小范围:
    在澄清用户回答时,可以用封闭式问题来缩小问题范围。例如,如果你问“请告诉我关于你移动设备的使用情况。”,而用户回答又不够具体时,你可以通过问“你一天会使用移动设备多长时间(小时)?”来缩小范围。
  3. 不要直接问“为什么”:
    受访者可能认为它带着质疑的口吻,所以最好重新表述。例如,与其问:“你为什么需要这款应用软件?” 不如问:“你最喜欢这款应用软件的哪些优点?
  4. 问简单的问题:
    尽量避免问需要双重回答或包含双重否定的问题。让提问便于理解。
  5. 问用户的经历:
    为了给人留下良好的第一印象,人们倾向于展现出自己更好的一面,而非真实的一面。用户常常为了迎合访谈员,会说出一些与自己的真实想法没有半毛钱关系的观点,这就是为什么需要让用户回忆自己的个人经历或特定事件,以获得具体详细的答案,这样问是非常明智的。
  6. 让用户举例,而非你提供例子:
    为受访者提供一个可以追加阐述的空间,你可以用他们:“还有其他的吗?”、“这对你来说意味着什么……?”、“请帮忙再说明一下……以便我详细了解?”等

 

3. 高效招募

如果我每次被问到“深度访谈到底需要访谈多少名用户?“时我都能赚1美元,那我早就成为百万富翁了。以下三条简单的规则将帮你确定受访者的数量:

  1. 受访者的数量取决于问题规模和目标用户规模。
    如果你想从“餐馆老板”那里收集反馈,10名受访者就足够了。而你需要访谈“观看电视足球比赛的观众”时,则需要大约50名不同人口学背景的受访者。
  2. 相比访谈大量“单一人口学背景”的用户,你可以只访谈少数几个“背景各不相同”的用户。
    当然,目标群体应该有一些共性,但是在年龄、收入、兴趣等方面背景多样,这样你就可以对这个研究课题有更广泛的看法/视角。
  3. 通过预算来确定具体的访谈人数。
    请记住,一场访谈需要大约1小时,但分析一场的访谈数据则需要3小时。如果你的预算很少,最好改成简短的非正式访谈,而不是放弃访谈。

过度精细的定性研究是对资源的浪费。 最好的结果来自于“不超过5名”的用户,并在你的预算内开展尽可能多的小规模测试。
——雅各布·尼尔森(Jakob Nielsen)

 

4. 构建强大场景

每次访谈都需要周全的准备。从一开始就列出能满足你所需信息的所有问题。同时写下能想到的所有问题,别在乎对错。仔细思考你的访谈目的以及想了解的具体信息。列完问题后,请遵循以下规则:

  1. 确保问题从“宽泛”到“具体”。
    这样可以帮助受访者进入使用场景、确认主题并准备好提供更深思熟虑的回答。尤其是在访谈开始时问一些宽泛的问题,可以帮助受访者放松下来,敞开心扉,进而展开更详细的对话。
  2. 关注用户。
    关注他们的主要目标、动机、习惯和痛点。尽量避免与研究目标无关的话题。
  3. 尽量减少引导性问题。
    好的问题是“你使用外卖软件吗?”, 而不是“你多久使用一次Uber Eats?”
  4. 避免在访谈中加入你的观点。
    访谈结果不应取决于访谈员的技巧或行为,也不应取决于其他外部环境因素。

 

5.不要慌,保持变通

尽管你很可能为用户访谈制定了一个完美的计划,但你依然无法预见一切。对访谈中的细微变化保持开放心态,不要害怕在访谈中提出新问题。在适当的时候引入新的主题是非常受欢迎的,你也可以随时调整问题的顺序。

请确保你能控制整个访谈节奏,并保持逻辑性,不要在话题间随意跳转。为此,请遵循以下规则:

  1. 做好准备。
    在访谈前准备好你已经列出的问题清单,确保能够更好收集你想获取的信息。
  2. 牢记计划。
    有经验的访谈员会对访谈流程烂熟于心,这样就可以在访谈的任何阶段进行问题的灵活切换,且不会丢掉研究目标。
  3. 不要执拗于当前的访谈场景。
    如果谈话偏离了主题,礼貌地重新聚焦,必要时甚至可以换个话题。关键是保持灵活性。

 

6. 尽可能客观

用户访谈法的短板在于很难完全客观,因为人们倾向于用自己的观点取悦其他人,这会对访谈结果产生负面影响。我们很难判断受访者是否在说真话,或者他们是否能够明确说出他们想要什么。

看他们做了什么,而不是听他们说了什么,绝对不要相信人们预测自己未来可能会做的事情。

——雅各布·尼尔森(Jakob Nielsen)

为了应对这种风险,试试这样做:

  • 减少研究中的人为因素。
    由于每个问题都会使受访者承受被他人评判的压力,受访者的回答或多或少都会受到访谈员的影响。因此可以借助第三方工具来收集反馈,例如UserTesting 或 Lookback(用户在线测试工具),使流程自动化以便减少人为干预。
  • 找不熟悉的人来参加访谈。
    如果找来熟人,他们更有可能以你理想的方式帮助你完成用户研究。理想情况下,建议由不了解项目目标和肯定不知道潜在设计问题的人员来参加访谈。
  • 人们所说的与他们所做的往往是两回事。
    尝试将访谈与行为观察(或简单的可用性测试)结合起来,以便有机会看到用户的真实操作,进而验证用户所说的是否在实际操作中真的发生了。

 

7. 多听少说

在追问具体细节之前,允许受访者用他们自己的方式自由发言,即使你对答案不满意也不要轻易打断他们。不要急于发问,耐心倾听他们的意见,根据需要随时调整问题或温和地提醒他们回到本次访谈的主题上。

优秀的访谈员都懂:倾听比提问更重要。

虽然向受访者提供访谈相关信息很重要,但是如果整场访谈主要是你(访谈员)在说话,那么你很有可能无法真正了解受访者的想法。

 

我的想法和评论(最后)

我认为自己是一个完美的访谈员吗?不!访谈需要练习,就像生活中的其他事情一样。

随着你的访谈经验越来越多,你犯的错误就会越来越少。所以,在你直接开展访谈前,先观察身边更有经验的同事是怎么做的。或者你可以试着找一位导师来帮助你。

以上经验帮助我一次又一次地避免了代价高昂的错误,还让我的访谈过程更加高效。希望你也会发现它很有用。 好运!








文章来源:UXRen 作者:Karolina Olejniczak

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

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

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

3E法:让用户表达最真实的体验与情感

资深UI设计者

随着智能系统能够随时随地为用户提供应用程序和服务,普适计算 (Ubiquitous computing) 已经成为了未来的技术趋势。同时,为了提升终端用户的接受度和体验的愉悦感,智能系统还应当察言观色,而这就意味着要对用户的情绪敏感性进行调研和设计。

3E的全称是Expressing Experiences and Emotions,翻译过来就是:表达体验和情感。

  • 3E法是一种在用户使用产品或服务时,从用户情绪及相关情境中收集有价值信息的情绪评估方法。
  • 3E法是一种自我报告法, 图形和文字形式皆可。
  • 3E法常常会与另外两种情绪评估方法 (SAM情绪量表和Emocards测量法) 比对使用来进行初步验证。
  • 通常我们还会对3E法分析的结果进行信度评估。

基于上述原因,想从复杂的用户体验中获得洞见,3E法是一种很有前景的方法,它还可以作为其他常规方法的补充。

 

3E法是什么?

3E法是一种自我报告法,评估过程中,会为用户提供一个人形轮廓的图片模板 (如图所示),用来表达他/她的情绪和体验。

参与评估的用户需要在这个人像上画一张脸,将自己的情绪投射到人像上。后续的版本中,人像还包含两个气泡 (类似于漫画中的那样),气泡用于表达内心的想法 (画出面部表情或写下文字信息),方形气泡一般用来承载语言表达。

3E法提供了一种用书面方式 (如图画) 来表达情绪和体验的方式。我们假定这种方法能够帮助不同的人表达他们的感受,因为他们可以选择自己喜欢的表达方式。

此外,作为一种投射测试,3E法还能够帮助用户表达负面情绪。投射测试的基本理念是向用户提供中性刺激,并要求他们分别进行回应,比如解释刺激、填空或者进行联想。这个方法可以帮助用户没有顾虑地表达在其他评估方法 (如访谈法) 中难以表达的负面情绪。

 

优势

3E情绪评估法能够在不给用户带来太多负担的情况下,收集用户感受和所处情境 (包括精神上、身体上,甚至可能是社会背景) 上有价值的数据。

  • 除了纸笔之外,这种方法不需要更多的工具。但在使用这种方法时,有些用户会担心自己的绘画能力。
  • 向用户说明“3E法并不要求任何特殊的绘画技巧”是很重要的。简洁、粗略的图像和专业的手绘都是一样有效的。
  • 3E法还允许用户口头(或书面)作出回应。

另一方面,3E法提供了丰富的素材,这是该方法的宝贵之处,同时也是薄弱之处。对研究者来说,分析这些材料是一个耗时且费力的过程。此外,如何解释这些绘画也完全取决于研究人员的理解。在之前的一项研究中,三名研究者独立分析的结果只具有中等程度的相似性。但如果将3E法作为其他研究方法 (日志或表格填写) 的补充,3E法分析的结果便可以与主要研究方法获得的信息进行比对和验证。

此外,在随后的访谈中还可以与参与者一起回顾3E模板中的图像,明确这些内容背后的含义。同时,用户所画的图像也会帮助他们在访谈中更轻易地回想起评估过程中体验过的情绪。不过,如果还能够建立一种评分体系来协助分析,将会更有帮助。

3E法已经应用在不同移动端应用的评估中,而这种方法也适用于发生在真实场景且无研究者在场的智能系统上。比如,我们给手机安装了能够感知情景的「传感器」,那么这个定制手机上的app使用也可以采用3E法来进行情绪评估。这些App基于射频识别标签 (RFID tags),通过手机读取物理标签来获得时间、地点、交互内容等情景(上下文)信息。被测试的用户可以在实际场景中多次使用这个系统完成不同目标之后,完成3E情绪评估。



文章来源:UXRen 作者:Juan Fernando Pacheco

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

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

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


2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

seo达人


1.图标

对于UI设计师,最早被我们发现的场景应该就是图标了,比如像这种:

图片

也有一些产品有落地使用,比如喜马拉雅:

图片

当然,我觉得结合效果最好的还是韩国这款app——naver的底部图标:

图片

效果非常棒!

图标结合毛玻璃效果是ok的,但是玻璃如果太透明,很容易导致识别度产生问题,所以这也是我们需要特别注意的点。

 

2.卡片

最近逛了很多be上的ui作品,发现有一个界面元素经常结合毛玻璃效果使用,而且还挺好看,这个元素就是卡片,比如什么银行卡啊、会员卡之类的,我们看看效果:

图片

图片

这里需要注意一点,毛玻璃的卡片还是需要和色块去配合使用的,比如后面还有一张普通卡片,或者后面有一些色块,这样效果才会比较理想。

 

3.壁纸

以前我做过手机os,经常需要制作壁纸,做壁纸是最需要时刻关注流行趋势的,而且壁纸可发挥空间非常大,没有太多规则和限制,只需要把好看的效果制作出来就可以了,比如像小米的壁纸就很好的把毛玻璃效果给融进去了:

图片

效果还是非常不错的。

 

4.启动图

因为是流行趋势,所以现在有一些产品的启动图也结合了毛玻璃效果,比如像钉钉啊:

图片

腾讯文档啊:

图片

等等吧,这也是一个非常棒的视觉触点,尤其是在和数字结合使用的时候,简单又出效果,有机会大家可以尝试一下。

 

5.活动图

当然,什么风格那都少不了活动图啊,那效果也是杠杠滴,看下往上的一些优秀组品:

图片

一般都是用在屏幕啊、板子啊等等地方,上面再加点信息,显得画面材质丰富,耐看度也会比较高一些。

视频

除此之外,视频多媒体领域夜也经常使用毛玻璃风格,其中最早还是应该在微软的Fluent Design System兴起的:

图片

图片

现在已经在很多产品宣传视频上都有用到多了。

 

总结

除了以上这些地方,我们平时做一些排版包装,比如封面图啥的:

图片

图片

咔咔一结合,那也是很出效果滴。

特殊材质一会还会流行很长一段时间,大家可以多多尝试,做出自己理想的效果,震惊自己!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺
转载请注明:学UI网》2021年都过去一大半了,我才知道这个流行趋势,可以这样用!

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

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

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

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


日历

链接

个人资料

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

存档