这3个适用性极强的网页设计趋势,在4月非常流行

1. 斑点和气泡元素不少设计师开始利用诸如斑点和小气泡这样的装饰性元素,分散在网页的各个角落。这些装饰性的元素大多以小圆点的形式呈现,它们的形态多种多样,但是总体上有着吸引视线、丰富视觉的功能。即使是基于相同的设计概念,不同的气泡和斑点,让每个设计项目都有着不同的性格。这些元素可以是任何色彩,而微妙的渐变和高饱和度的色调是目前设计师的最爱。斑点和气泡本身在形态上也有着柔和流畅的特点,让整个氛围显得圆润顺滑。设计师借助气泡在整个画布上进行构图,通过衬托来营造深度,借助动效营造动静对比,所有的这些设计可以以不高的成本创造出时髦有趣的设计感。而所有的这些大都是为了一个目的:创造出用户偏好的视觉入口。总的来说,斑点和气泡是一种吸引用户注意力的有效设计元素。如果你用的好,它们不仅可以作为装饰而存在,还可以作为视觉引导,控制整个页面的动线,给用户以视觉上的自然指引,创造出富有流动性的页面布局。△ Andyhttp://www.andypatrickdesign.com/△ Wedzehttp://goggles.wedze.com/winter-2017-2018/en/△ Sretkshttps://sretks.com/2. 「悬浮的」矩形元素 这是网页设计当中,另外一种流行广泛但是尚未有正式定名的一种设计趋势。带有「悬浮」效果的矩形元素开始出现在各式各样的网页当中,从产品展示型的网站到各种品牌的网站页面,几乎无处不在。也许是因为悬浮的矩形元素让图层以一种有趣的方式呈现出来,这种设计技巧和视差滚动、动画可以很好地结合到一起。现在这种设计趋势已经表现的非常明显了。通过带有悬浮效果的图层,各种元素可以独立的按照自己的方式运行。这个概念和 Material Design 中「纸」的意象很接近。不过,悬浮的矩形在概念上没有 Material Design 中那么结构化,设计师可以发挥的空间也更大。充满流动性的设计,在视觉上是非常吸引人的,这样的设计更容易鼓励用户互动,因为在这样的设计当中,用户会随着设计的引导而好奇接下来会有什么。从目前的实战案例中可以看到,许多设计中都有悬浮的矩形元素,它们在整个布局中作为信息的载体,可以打开和关闭,充满了神秘感,也承载着关键性的交互。悬浮的矩形元素的优势是,它几乎可以和任何元素匹配起来,可以很简单也可以很复杂,可以简单的几个区块搭配起来,也可以是由很多矩形来构成信息流。这一设计趋势的优势在于灵活自由,以及强大的可定制性。不过从独特性上来说,相对于其他的要弱一些。△ Badsamhttps://badsam.ch/#/△ Hugo-vannhttp://hugovann.com/△ Copper-hearthttps://copperheartcreative.com/%20/3. 图片和视频填充文字 最后的这个设计趋势也不算太新鲜的东西,之前就有不少设计师这样玩过,不过现在作为一种流行趋势开始大规模地普及:将图片填充到相对较粗的文本字体当中。虽然这个想法不算新颖,但是在视觉上有着强大的张力。在下面的三个案例当中,都充分地运用了这一技巧。Valnet 在它的首页左侧,有一个巨大加粗的字母 V,在背景中嵌入动态的视频,字母所形成的新的框架,让视频的体验更加独特有趣。Greatest Stories Retold 这个网页中采用了相同的概念,字母背后有视频在播放,这种形式留给用户更多想象力。视频中的信息其实传递出来的并不多,更多的是色彩和明显的运动感,它们真正的功能是诱使用户点击并查看更多的网页内容。Belly Q 这个网页则使用了图片的缩放来创造更为微妙的动效。前景是一个黑色的覆盖层,而用户能够透过中间镂空的字母 Q 看到背景的视频。分层效果并不复杂,但是这种方法非常有效地创造出了视觉焦点。动画和图片填充文字,这种设计技巧本身就能够创造出神秘感,这种设计会让用户有兴趣点击其中内容,查看更多。绝大多数的用户对于高度可视化的内容是感兴趣的,而这种恰到好处的神秘感的营造,会促进用户的交互。只要确保他们能够获得所需的信息,给他们以答案,那么这个设计就是有效的。△ Bellyqhttp://www.bellyqchicago.com/%20/△ Storieshttps://retold.withyoutube.com/△ Valnethttps://valnetinc.com/结语 这个月所流行的这三种设计元素或者说设计趋势,有着极大的灵活性,你可以将他们运用在主页当中,也能放在着陆页里,甚至可以贯穿整个设计项目。

2018-04-17LOAD MORE>

设计规范 | Web端设计组件篇-反馈类

设计规范中最重要的部分就是组件规范了,制定组件的规范有哪些好处呢? 1.高效简单:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建web端界面,高效无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。 2.统一用户体验:由于使用了统一的组件规范,所以保证了的视觉和交互设计统一性,保证整体的用户体验性。 3.提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。 根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。 本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。 toast 定义:用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。 使用场景: 1.可提供成功、警告或错误等反馈信息。 2.顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。 例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。 toast的消息提示分类一共有三种类型:成功类、失败类、常规类。 组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。 alert警示提示 定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。 使用场景: 1.当某个页面需要向用户显示警告的信息时。 2.非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。 例如淘宝购物车,删除之后,会出现alert警示提示,淘宝的例子属于alert的变种,用户可以点击“撤销本次删除 ”进行还原之前的毁灭性操作。 alert警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有icon操作,含有icon操作的话警示性会更强。 alert警示组件样式有两种:带有删除操作,不带有删除操作。 dialog对话框 定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。 使用场景: 1.用户在进行重要操作的时,需要进行二次确认。 2.用于重要的反馈提示,让用户知道信息提示。 3.承载少量的表单填写类,减少页面的跳转。 windows系统的确定按钮一般在左边,而Mac OS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。 微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。 dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。 Notification通知提醒框 定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等 使用场景: 1.较为复杂的通知内容。 2.带有交互的通知,给出用户下一步的行动点。 3.系统主动推送。 Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。 tooltip文字提示 定义:简单轻量的的文字提示。 使用场景: 1.鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。 2.常用于解释操作按钮的文字说明。 还有一种tooltip是浏览器自带的,浏览器自带的和本篇的tooltip的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的tooltip鼠标移入就出现,切组件风格和浏览器自带完全不一样。 tooltip组件按照需要解释说明的对象位置不同,可以有以下不同的样式。

2018-04-17LOAD MORE>

设计出优秀的网站着陆页,这10个技巧能帮到你

网站的着陆页承载了太多的东西。当用户打开着陆页的时候,你得让他们感知到你的品牌调性,通过行为召唤元素促使用户执行特定的操作,通过视觉化的手法,给用户留下深刻的印象等等。想要做好,真的很难。今天的文章将会和你分享10个提升着陆页设计效果的小技巧。正如同你所知道的,着陆页的设计并不简单。单纯的将你的LOGO替换到着陆页模板上,并不能够带来足够优秀的设计效果,导航是否好使,可读性是否优秀,整体的设计是否一致,都会影响着着陆页的效果,而这些都需要你进行贴切而细致的设计,才能做好。而这也使得这些提升页面效果的技巧非常有用。1. 为页面设置一个明确的目标着陆页通常不是大而全的,它需要有足够的针对性:你希望用户在进入着陆页之后执行什么操作?达成什么目标?点击一个特定的链接查看视频玩一个小游戏填写表单购买产品分享内容到社交媒体阅读,或者和内容进行互动你在着落页上所放置的内容,都应该尽量让用户尽可能接近实际的目标。BarkBox 的着陆页上,设计师的目标是让用户购买狗玩具,或者提交邮箱订阅信息。上面是他们的情人节促销页面,主题贴切,目标明确。(注意页面的核心是CTA按钮“Get Start”)2. 为访客而设计着陆页的设计,一定是要考虑到网站的访客,你的用户。这听起来挺理所当然,但是实际上很少有网站能够真正做到。整个页面中,所运用到的图片和元素应该和用户相关,文本和文案也应该以贴合用户甚至让用户喜爱和欣赏的方式来呈现。你可以深入分析你的关键性的受众。他们是男人还是女人?他们年轻还是年长?他们是否分布在特定的区域?创建吸引用户的设计,能够提升参与度和用户转化率。3. 使用风格强烈视觉有力的图片风格强烈,视觉上有力,又或者是足够有趣的图片,往往会给用户留下深刻的第一印象,并且能够让用户参与进来。Coulee Creative 的页面采用了一种有趣的设计策略。页面的整体设计确实没有改变,但是标题文案和图片中的男人表情会逐步变化。这样的设计很有趣,很走心,也很让人期待。4. 设计层次清晰的文本绝大多数的网站中都会包含不同层级的文本内容,而每个层级的文本内容的重要性、功能都会有差异,有的需要抓人眼球,有的则需要用户专注地仔细阅读。所以,你的设计需要围绕着文本的功能来设计。标题:使用精炼而吸引人的文本让用户注意到。正文:主要的信息,简洁,直接,清晰。行为召唤文本:通常以按钮和链接的形式存在,告诉用户要做什么,下一步执行什么,如何抵达目标等等。提供明确的、可操作的指引。页脚:提供相关的链接和信息,诸如品牌、联系方式和社交媒体链接等,建立信任,提供周边信息。5. 导航和关键词的结合着陆页上的导航元素有助于告诉用户网站的内容,将导航元素视为整个网站的关键词系统的一个组成部分是非常有意义的。Baublebar 在 Puppy Bowl 的着陆页上就做的很好,网站主要销售女性珠宝,设计师在网站的导航栏上标识出关键词“Baubles”,也让用户明白这个页面是针对宠物的。6. 清晰的行为召唤每个用户都应该知道他们所打开的网站是做什么的,清晰的行为召唤指引是至关重要的。不要以为用户是你肚子中的蛔虫,你往往需要通过指引来引导他们做你希望他们做的事情。比较常见的行为召唤方式是按钮,填写表单,引导说明(比如“滚动以查看更多”),甚至动画。Jonathan Patterson 的着陆页中,每个明亮的色块都会在光标悬停的时候变暗,并且予以说明,引导用户去点击获取更多信息。7. 尽可能定制内容着陆页本身就是为了特定功能而存在的,而且这个目标和功能通常是比较单一的,而这样的页面自然也需要足够的自定义设计来尽量达成目标。Trulia 这个网站的首页/着陆页就是尽量引导用户并且让用户提供他们的地理位置信息。通过自定义设计,用户才有可能深度地参与到交互当中来。8. 清晰而高关联性的品牌设计着陆页最常见的问题就是容易让人感到厌倦,或者和主站的信息、设计上有所割裂。在品牌设计上,着陆页和首页以及品牌本身应该有清晰的关联,确保用户不会有跳出感,让他们能够自然的参与到内容当中来。Nike 的运动鞋定制页面就做的非常好。它和整个网站的品牌化设计保持着高度的一致,从LOGO到图标,从字体到图片风格,用户知道这个页面的特殊性,同时也能够轻松明白它和整个网站之间的关系。用户永远不会怀疑这一点。9. 符合用户预期当用户在其他的网站上点击链接跳转到这个着陆页上来的时候,他们会对这个页面或者网站有所期待,换句话来说,着陆页的设计应该具备特定的功能,迎合特定的需求,并且要贴合跳转的来源用户的预期。Bills.com 这个网站的着陆页采用了相对简单的设计,它可以帮助用户管理财务。从网站的名称到功能,用户能够形成一个相对明晰的概念和预期,而完成整个流程之前,用户不会看到其他的无关内容。这样的设计和网站的跳转来源(比如社交网络)有着紧密的关联,用户知道接下来会发生什么。10. 构建层次结构和流程设计良好的着陆页有着良好的可用性,这也意味着它有着清晰的层次结构。用户应该先看什么再看什么?他们将会在页面上执行什么任务,实现什么目标?合理的层次结构和贴合用户模式的流程很大程度上能够让用户和页面进行正确的互动,帮助用户达成目标。在上面的 LS Productions 网站中,设计师让网站在视觉上呈现出清晰的行动流程,超大的视频背景,分别置于顶端两边的 LOGO 和菜单,以及向下滚动的 CTA 引导说明「Scroll for more」。用户可以在几秒钟内快速获取这些信息,并且开始操作。结语着陆页和首页其实是两个东西,两者在功能上有差异。有的网站可能是两者合而为一的,但是很多网站不是。着陆页是用户最常访问的页面,但并不一定是首页。顶级的着陆页设计通常是需要营销人员参与进来,并且尽可能充分利用着陆页的流量。了解用户,有针对性的设计,是着陆页设计的关键。

2018-04-02LOAD MORE>

9个小技巧,让你的作品也能上Behance设计站点的热门…

@RunyuXia :每次完成了一个项目,将自己的作品上传到各个平台或个人网站的时候,心里总会期待这么一幅愿景,作品获得了很多点击量,吸引了大量粉丝,成为热门作品,甚至被推上了首页……而往往理想是丰满的,现实是骨感的。如何才能让这些美好的愿望成真呢?首先要给自己的作品好好包装一番,展示作品就像推销产品一样,吸睛又耐看的包装极其关键。运用长图这种形式来包装作品在视觉上显得连贯、富有叙事性,让观众更容易迅速地理解作品内容。如果正好你手里有不少完成的作品,何不把它们包装一下,更上一层楼呢?事不宜迟,赶快来试试这9个技巧吧!原则一:吸引观众技巧1:魅力头图 头图就好比故事的开始,好的开场可以吸引观众的注意力,提起观众的兴趣,让他们对故事接下来的走向产生好奇心,从而留住观众。头图虽然不一定要惊世骇俗,但怎么也得有几分高大上的意思。可以放一张全屏的高清大图作为背景体现整个作品的氛围和基调。当然大图要进行一些处理,为的是不让它太抢眼但又有一定的存在感。△ http://t.cn/RnHzfHC△ http://t.cn/Rn1AuJx技巧2:亦静亦动 在合适的地方嵌入 gif 或自动播放的循环视频,其好处是能让展现方式变得更自然,不是郑重其事地把一个视频端在那让观众去看;更简洁,让观众不需要点击即可观看到视频;也更生动,若长图中的内容较多,观众容易倦怠,而 gif 或视频可以充分优化阅读体验,提高观赏性。△ http://t.cn/RnHzIk5△ http://t.cn/R9Z13dw原则二:丰富多样技巧3:打破格局 用相应配色的平行四边形、三角形、圆形或有机形状作为大色块放在背景中能够有效地打破横平竖直的单调格局。△ http://sina.lt/fvXA△ http://sina.lt/fvXC技巧4:视觉引导 文字内容的位置能起到一个视觉引导的作用,内容不一定要始终对齐在同一侧,通过错开内容对齐的方向,让观众的视线不再是一条直线,而是呈现一个「蛇形」,从而丰富构图、保持阅读的趣味性,也让观众在一个画面中驻足停留,不错过你精心布置的「设计美景」。△ http://t.cn/Rn1y4jI技巧5:冲破边界 很多设计在排版的时候会把内容放在不同的边框或色块里展示,虽然这么做会显得条理清晰,但看久了难免会有点死板和不连贯。怎么办?很简单,只要让内容冲破边界的范围即可,这一点点改动,会让排版显得生动许多。△ http://t.cn/Rn1yqKi△ http://t.cn/Rn1ytBe技巧6:加强层次 通过将主体内容分离,就像 PS 中的图层一样,调整它们之间的遮挡关系或添加相关元素来加强层次感,使画面显得更加丰富。△ http://t.cn/RnIyR92原则三:细致入微技巧7:镜头景深 使主体内容保持清晰,让离镜头较近和较远的物体适当的模糊一些,以此来制造景深,可以给观众一种真实的代入感,让他们觉得他们不只是在一个网页上观看你的作品,而是在享受你的作品带来的阅读体验。△ http://t.cn/Rn1yJ8x技巧8:虚化投影 虚化投影可以让内容在画面里的空间感更强,投影越虚化,物体就显得离背景越远。同时还能为整体设计增添不少淡雅气质。△ http://t.cn/Rn1ya4d技巧9:添加厚度 如果主体是网页设计或 UI,想让设计不显得那么单薄的话,记得给页面添加厚度或页数。即使画面中只有一个页面也会显得有一叠,给观众一种好像设计了很多内容的错觉。△ http://t.cn/Rn1ytBe△ http://t.cn/Rn1yqKi总结通过合理地运用这些技巧对作品进行排版和包装,用一种赏心悦目的方式来展示作品,能够有效将作品的优点最大化并让作品质量提升至一个新的高度。希望这些技巧对大家有帮助,欢迎留言与交流。

2018-04-02LOAD MORE>

帮我做个banner,尺寸我忘了,你看截图自己把握……

大家在做UI设计时,是否遇到过图片不知道如何设定比例的情况?我在做的时候就遇到过这个问题。 之后我去网上找了很多资料,同时通过体验一些主流的APP,我归纳了一些常见的图片比例,主要有3: 2、4 : 3、1 : 1、16 : 9这四种,那么在设计时图片比例又是如何设定的呢?下面我具体为大家分析下。那么在设计时图片比例又是如何设定的呢?下面针对这四种比例具体为大家分析下。3 : 2这个尺寸其实源于135胶卷的比例,采用这一比例并不是因为它是黄金比例,而是由相机的像场大小决定的。在早期徕卡镜头的成像圈大约为44mm,而胶卷的宽是24mm,因此如果在44mm的圆上截取一块宽为24mm的长方形,那么边长正好为36mm,也就是3比2的比例,同时由于徕卡几乎是行业内一家独大的公司,因此其他品牌相机也纷纷效仿这一比例。但是随着移动设备的发展,手机很大程度上替代单反成为主流拍照设备,4 : 3和16 : 9的图片数量占比追上了传统摄影的3 : 2,半分天下。不过目前国外很多的APP还是用这一比例。爱彼迎的热门目的地和出游去处模块,典型采用了3 : 2的比例,大家可能想问为什么图片尺寸有单数,其实这里是根据屏幕的(宽度-间距)/图片数=图片宽度,因此这个图片不是固定的而是等比例缩放的,高度根据比例在进行计算,有时候计算出来的数可能并不是一个整数,因此需要我们自己去选择一个整数来运用。其他的尺寸比例也是一样的。4 比3是随着摄影的发展,小型相机(例如微单)的出现而诞生的。这是由于小型化低成本镜头上,大家最大的问题是像场不够用了;而且由于当时传感器技术有限,无法把CCD的长度做到很长,因此人们需要尽可能得在小体积上实现更高像素,怎么办?最好的办法就是把比例做的更方!大家知道,所有几何图形中,对角线距离相同,图形越接近圆形,图片占比面积也就越大。在具体图片设定中,图片是选择3 : 2还是4 : 3,在做设计时很容易混淆,这里我有一个简单的方法让你快速做决定,那就是看产品的目标定位。也就是看他是以内容为主,还是以图片主导的APP。下面我分别从横图和竖图的情况进行对比分析。横图 看上图我们知道,同屏的情况下4 : 3图片占比更大,因此在同屏显示中这一比例相对于3 : 2展示的内容就较少。因此在设计中,我们也可以从产品目的定位来判断,是以内容为主还是以图片为主,例如in大多为女性用户,是以图片为主的APP因此他采用了4 : 3的比例。而Nice虽然和in类似,不过其产品目的定位是以内容为主,因此他选择可展示更多内容的3 : 2的比例。竖图 这里我用Nice和厨房故事来比较,Nice我们知道以展示内容为主,因此他的图片大多采用3 : 2的方式,其优势就是在同样的横屏大小中,这一比例可露出更多的图片信息。而厨房故事主要是以美食类的图片为主,因此为了图片更好的展示,因此他的图片大多采用4 : 3的比例。1 : 1是传统的120胶片画幅,也叫大画副,因为相机结构和其他一些原因,导致了胶片是方形的,一般为6×6厘米。利用此比例更容易将构图归整得简单,突出主被摄体的存在感。因此这一比例多用于需要突出主体的图片,比如电商类以图片促进销售的APP,以及一些产品图片,头像等。天猫也就是电商类的APP由于图片直接决定用户的点击量,因此往往会采用1 : 1的这种可将图片展示最大化的方式。闲鱼的产品图由于多为用户上传,图片的比例或者质量都不统一,因此也多采用1 : 1比例进行设计,另外头像往往也是以1:1的比例设计。16 : 9根据人体工程学的研究,发现人两只眼睛的视野范围是一个长宽比例为16 : 9的长方形,所以电视、显示器行业根据这个的黄金比例尺寸设计产品。在设计时,图片的尺寸设定和这些拍摄器材有很大的关系,因此在视频类的APP中大多用16 : 9的比例。腾讯视频他的视频播放页面,以及封面都是采用统一的16:9的比例,基本上目前我们看到的视频均是采用这种尺寸,因此这个目前在比例的设定上还没有出现过问题。3 : 2由于他是由专业的相机拍摄而成,对设计的要求也相对较高,因此一般用于相对较专业的APP中,同时在产品定位上以内容为主的APP,图片相对占比较小,可承载更多的内容。4 : 3是由小型相机拍摄而成,这类相机用户群体较大,因此目前还是有很多APP在使用,同时其图片占比较3:2大,因此这一比例主要是产品以图片为主的APP。1:1 利用此比例更容易将构图归整得简单,突出主被摄体的存在感。因此多用于电商类,需要用图片引导用户购买等情况,以及产品图和头像的设计。16 : 9随着移动设备的发展,16:9越来越普及,目前多运用在视频的比例设计上。

2018-04-02LOAD MORE>

信息架构设计大杀器-卡片分类法的实施细则

主题:卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构。 一个网站是否好用,判断标准之一就是信息组织的是否有条理,用户能否方便地找到他们需要的东西。但一个非常常见的现象就是,网站上的内容是以公司的角度来设计的,而非以用户为中心(在近期我们针对43个网站的研究中,这个可用性问题排在第一位)。找出最符合用户心理模型的信息架构方案的方法之一,就是使用卡片分类法。 定义:卡片分类是一种用户体验研究方法,研究参与者根据对他们自身有意义的标准,将写着主题名称的卡片进行分组。这种方法可以让我们了解到用户会以什么样的方式理解各种内容,了解他们的思维模型,最终帮助我们设计符合用户预期的产品信息架构。 假设我们正在设计一个租车网站,你的公司提供了60种用户可选的车型。你会如何对车型分组,帮助用户快速找到理想车型呢?公司领导可能会使用技术术语,如家庭用车、高管用车和全尺寸豪华汽车。但用户有可能对这些术语不了解,不清楚他们之间有什么区别。这种情况下,卡片分类法就有了用武之地:让用户按照自己的理解对车型分组,然后观察他们给出的结果,找出规律。 Hertz.com:在最近的用户测试中发现,该电商网站的用户在打开租车类型分类列表的时候,并不明白什么是“梦幻车型”、“名贵车系”。还好网站除了分类名字之外,还提供了照片和简单的说明,但如果想在多种类型间对比选择,用户还是需要下很多功夫。卡片分类可以揭示用户希望在汽车租赁网站上找到哪种汽车。 01卡片分类法实施过程通常步骤如下 第一步:选择一系列主题。其中应包含40~80个网站的主要内容,然后把他们分别写在单独的卡片上。 提示:避免有相似的名字的主题,这样参与者会倾向于将他们归类在一起。 第二步:让用户将主题分类。把写好主题名字的卡片打乱交给参与者,要求他们每次拿出一张卡,把它归类到某一组里。在归类的过程中,可能有些组有很多卡片,有的组卡片很少。如果参与者不太确定卡片上的意思,可以先把它放在一边,当然如果有一组专门用来放“不确定”或者“不明白”的卡片就更好了。 注意事项: 分组数量并不是固定的,有些用户会分出许多小类别,有些用户只会分出几个大类,这完全取决于用户自己的心理模型是什么样的。 我们应该在用户进行分组的时候提醒他们可以做各种调整,比如把某张卡片挪到另一组里去、合并两个组、将某组拆分成等等。因为卡片分类是一种自下而上整理的过程,错误是不可避免的。 第三步:由用户对各个组命名。当用户已经将所有的卡片都分好组后,给他一张空白卡片让他给各个组起名字。这时,用户如何分组的心理模型就初见端倪了。从用户给各个组起的名字中,你就可以找到很多分类的灵感了。但不要直接在设计方案中使用这些分类名,毕竟用户不是专业人士。 提示:给小组命名这一步非常重要,这样用户就不会固执已有的分类,而是随时修改各组的内容。 第四步:与用户交流其思考过程(这步不是必须的,但非常推荐)。询问用户为什么要这样分组,每个组之间的联系是什么。更多可以问的问题: 有没有哪张卡片很容易或很难归类? 有哪张卡片可以归入两个或多个类别中吗? 你对未分类的卡片有什么想法吗(如果有的话)? 你也可以要求用户在分类的时候把自己的想法说出来,这样可以收集更多的信息,但也要花一定时间来分析他们。比如说你听到用户说“我觉得应该把番茄放到蔬菜组里。哦不对,番茄实际应该是水果,不能放到蔬菜里,还是放到水果里更合适。”这句话就可以说明用户的确认为虽然水果更合适,但番茄也可以归类到蔬菜。这个信息可以帮助你把蔬菜和水果类联系在一起,甚至如果有其他原因支持,将这两类分组合并在一起也是可以尝试的方向。 要让用户所分的各个组处于一个合理的数量和大小。在用户进行初步分类的时候(1~3步),你不应该把自己的意愿和偏好强加给他们,但一旦用户完成了初步分组,你可以要求他将数目比较大的组再细分一下,或者把过于零散的几个组整合成一个大类。 第五步:以同样的步骤对15-20位用户进行测试。我们需要足够数量的用户才能发现他们思维模型中的规律,建议数量是15人,多于这个数字我们的新发现会越来越少,少于这个数字则可能忽略某些潜藏的用户思维规律。 第六步:分析数据。收集到全部数据后,筛选出大部分用户共有的分组、经常出现的分类名称以及那些总被分在一起的卡片。如果你发现有一些卡片总是被丢到一边,那就要确定是因为名字起得不准确,还是因为的确很难和其他卡片组成一组。结合你与用户聊天时所发现的一些定性结论,你可以整合各类规律,最终找到适合用户的系统结构。(关于如何分析卡片分类结果的内容还有很多,会在另一篇文章中详细讲解。) 02卡片分类法的变化形式 卡片分类法可能存在一些变化,比如用户是否可以自己写分类名称,主持人如何组织整个流程,使用的工具是纸还是电子软件等等。每种方式都有自己的优缺点,下面我们就简单的说明一下。 第一种:开放式 VS 非开放式卡片分类法: 开放式分类法:也就是上文所介绍的步骤,是最常见的卡片分类法。通常来说,我们所说的卡片分类法就指的是开放式,用户可以任意给分组起名字。 非开放式分类法:是工作人员会预先设定好分类的名字,然后再让用户将卡片分到这些定好的组里去。非开放式的方法并不能揭示用户的分类思维模式,而是用来衡量现有的分类结构是否能被用户所接受。有种说法说非开放式的卡片分类法更像是一种考验用户“投篮“能力的方法,看用户是不是能将卡片投到正确的分组里去。它不能反映出用户自然的浏览状态,因为用户会先看分类名称,然后以已有的组为基础去分类卡片。如果想以其他方式替代非开放式卡片分类法,我们建议使用树形测试(也被称为反向卡片分类),这个方法可以用来评估现有的分类方案是否合理。 第二种:有主持 VS 自由型的卡片分类法: 有主持人的卡片分类法:包含第四步,也就是与用户交流其思考过程。这个过程是非常有价值,可以发现用户分组的真正逻辑是什么样的。你可以问问题来进行更深层理解,如果需要的话也可以也可以针对某张卡片细细询问。具体的方案取决于时间计划和预算,但我们推荐最好采用有主持的方式。 在自由型的方式中:用户通常和组织者没有直接接触,使用线上工具自己对卡片进行分组。因为不需要组织者和每个用户交流,所以这种方式更快,需要的经费也少。自由型方法可以作为有主持式方法的补充,比如说一项研究中需要三类不同的用户参与,每类20人,一共要60个参与者。这种情况下,如果60个用户都做深入详细交流,那话费的成本就太高了。这时团队可能只对5~10个用户深入交谈(有主持式),其他用户使用自由型方法,完全由用户自主行动,只看结果。 第三种:纸质卡片vs.电子卡片工具 : 纸质卡片:是卡片分类的传统工具。把所有主题写在纸上,用户可以在很大的操作空间里移动、分类。使用纸的最大好处就是参与者几乎没有学习成本,他们只要把卡片分类成几小堆就行了。而且这是一个很灵活的过程,用户能快速更改自己的想法,或者直接推倒重来。如果有大量卡片的话,相比于在电脑上拖动电子卡片在桌子上整理纸质卡片也更容易一些,因为电脑上可能没法显示数量太多的内容。使用纸的缺点是研究人员必须手动整理用户的分组结果,人工地分析这些数据。 使用电子卡片通常是某种在线工具,用户可以在线拖动分组等等。这种方法通常来说对于研究人员是最简单的,因为软件大多可以自动分析用户的分类结果,并把最常见的分组方式整理出来,还能告诉你哪些分组名是用户自己想出来的,哪两种卡片经常被分到一起。电子大片的缺点是技术问题可能影响最终的测试结果,用户可能因为某些软件问题操作不畅,甚至有时会影响他们的关键操作,比如自定义一个新的分组等等。 卡片分类法是梳理信息系结构行之有效的方法。如果我们用的是纸质卡片的话,实际上我们现在使用的流程和23年前几乎没有什么变化。卡片法有很多种变化形式,上述的各种类型也名不能囊括所有的方式,但他们大都大同小异,你要根据自身的目标和资源选择不同的方法。 03结论 卡片分类法在信息架构领域是一项非常有用的方法,它可以帮助你了解用户对于产品中提供的内容是如何理解的。通过卡片分类法,设计师可以将产品内容更好地组织起来,更符合用户的思维模型,而非仅从公司的视角出发。在设计分组的策略时,也可以把其他研究方法配合卡片分类法一同使用。

2018-04-02LOAD MORE>

互联网正在走向计划经济

和朋友聊天,发现身边投身伟大的区块链创业事业的人越来越多了,不亚于双创最火的时候下海创业的勇士们。至于一直炒币的朋友,更是数不胜数了。据说加入链圈或币圈的人,首先是基于某种信仰;没有信仰的,也会临时下载信仰。这种信仰叫去中心化。说得再直白点,中心化意味着权力的集中,去中心化意味着分权、平权。王侯将相,宁有种乎?互联网圈从来不缺信仰,2004年,长尾理论诞生在大洋彼岸;2005年,威客一词伴随Web2.0走红中国互联网创业群体;2006年,捧红过长尾理论的美国《Wired》杂志又推出了众包理论。碰巧的是,这几套理论的产生,都有去中心化的背景:互联网垄断尚未产生,大、小互联网公司都处于原始积累的阶段,流量和入口还未产生马太效应,UGC备受待见,流量还没有成为韭菜。现在想想,那三年其实正是互联网去中心化最凶猛的年代:中国的互联网三巨头还没有形成,美国的互联网巨头还可以在中国为所欲为。那个年代不仅互联网去中心化,而且是真正的互联网全球化。互联网生产要素(技术、模式、流量)的流动,几乎没有边界,否则也不会有Copy to China模式。今天很多二线互联网小巨头,其实都是2005年创立的,360、YY、58(赶集)、汽车之家、土豆、去哪儿……这些公司又都是在2010年之后上市的。也就是说,中间经历了至少5、6年的时间进行野蛮生长。那么,这5、6年发生了什么呢?BAT开始形成,并在这个过程中,与美国互联网巨头进行死磕:腾讯跟微软(MSN)在社交战场斗、百度跟谷歌在搜索战场斗、阿里跟eBay和亚马逊在电商战场斗。就像八年抗战一样,如今的天下,是BAT们从“帝国主义”手里抢来的。更有意思的是,那些年也是BAT之间斗得最直接、最惨烈的年代,仅仅腾讯,就猛攻过电商和搜索两大赛道。马云有一次跟雷军说,腾讯攻我电商,我就攻它游戏。雷军说游戏不好做,马云说我拿100亿做!后来都说马云不碰游戏,其实是没磕到底。内战也好,外战也罢,充分竞争的市场经济法则从来没有消停过。2010年,“3Q大战”的爆发把中国互联网无政府主义的状态推向最高潮,这个时候大家才发现,充分竞争的终极结果就是丛林法则、你死我活。按照市场经济的解释,这是追求垄断的必然结果,但其实也是巨头中心化过程中的揭幕战。很多人把3Q大战的原因归结为周鸿祎的好斗,但今天来看,当时即使不是周鸿祎,也会有李鸿祎、张鸿祎跳出来。大战爆发前几个月,一篇《狗日的腾讯》刷遍互联网,文章直指腾讯无处不在、到处乱摸的手。刚刚创立美团的王兴激愤地说:有什么业务是腾讯不做的吗?按照经济学理论,衡量一个体制是计划经济还是市场经济,关键看是大政府还是小政府。中国过去40年的变革动力,本制上都来源于大政府和小政府之间的博弈。这里面的复杂性在于,你很难把今天的局面(成绩)简单地归结于“大”还是“小”。互联网最早在中国属于财富创造的“蛮夷之地”。记得2005年互联网创业又一次达到高潮的时候,我问一些创业者(既包括精英,也包括草根),为什么选择互联网这个行当?很多人的回答很一致:因为在中国,互联网是一个充分竞争的领域,很少被管来管去。呵呵。而且某种程度上,中国互联网能走到今天,还要拜计划经济所赐。2000年互联网泡沫破裂之时,中国诞生了一家新央企——从中国电信分离出来的中国移动。这家一把手需要中组部任命的新公司,当年通过短信增值服务帮助腾讯、网易等中国第一代互联网公司度过了生死劫。前一段时间联通混改,腾讯、阿里、百度、京东等互联网巨头手握近800亿人民币入股,并占据董事会半壁江山。当年腾讯每月200万的收入几乎全部来自中移动,今天,腾讯、阿里的市值已是中国移动的近三倍;2000年运营商救了中国互联网,十八年后中国互联网报恩运营商。这是市场经济的威力,还是计划经济的福分?谁是儿子?谁是爸爸?在互联网江湖,今天的腾讯、阿里就是昨天的中国移动、中国联通。以中国移动为例,当年成立就是为了应对中国加入WTO,说白了这是中国对外开放的一次政策落地,是计划经济送给市场经济的见面礼。后来无论是短信增值服务的开通,还是移动梦网的推出,都在计划之内、安排之中。几乎所有的国企、体制内机构都是“业务服务于政策”。而早期的互联网创业公司,是没有政策(战略)的,只有业务(产品)。QQ是马化腾误打误撞出来的;在淘宝之前,马云先是趟了B2B的坑;在百度搜索上线之前,李彦宏就是一外包公司的小老板……先找到一个市场需求点,然后集中火力,抢下山头,最后才竖起旗帜、告诉世人自己是奉天承运,而不是流窜打劫。过去20年,互联网创业最重要的圣经就是“单点突破”。但不得不说,这个“铁律”在巨头尚未形成绝对垄断的年代,是行得通的,但到了AT无处不在的时代,其价值与合理性需要重新评估了。首先,互联网各个细分领域的创新、创业,已经很难逃离巨头的魔掌了。如果说QQ是在没有巨头的年代诞生的一株野蛮生长的绿萝,微信就是巨头垄断时代通过“人工受孕”而催生的一朵仿真玫瑰。要知道,算上张小龙团队,当时腾讯内部至少有三个项目小组在做微信的事情。眼界和资源强如雷军,也仅仅做了一个米聊,还被微信干掉了。其次,互联网创业已经从单点突破过渡到布局的时代了。很多人不喜欢“布局“二字(比如雷军),还很迷恋寻找用户痛点的时代。但你能说小米生态链不是布局?小米的新零售不是布局?布局需要更好的人才、更强的资源、更多的资本,很多事情甚至连国企、央企都不敢想、不敢做,一将功成万骨枯。事先不把话说大,一直都是中国人闷声发大财的处世哲学。本质上,单点突破是一种后发制人的跟随策略,而布局是先发制人的主导战略。当资源、人才、资本越来越向巨头(AT)集中的时候,单点突破更像消遣时光的下午茶;抢占赛道、拿下风口才是光宗耀祖的饕餮盛宴。“二马“不惜斥巨资狂攻线下零售渠道,一环套一环,这绝不是单点突破。2016年-2020年是中国的第十三个五年规划。现在的新零售之战、AI之战,就是巨头们的“五年计划”,需要举全公司、全江湖之力。再靠几个人的项目小组做出一个微信级产品,这是不可能再发生的事情了。一个有意思的现象,中国最近一两年上市的互联网公司,市值都不高,即使刚开始很高,也慢慢跌出了原形。反倒是没上市的超级独角兽估值越来越高。Why?因为这些独角兽所处的赛道足够宽、足够长,是巨头们的必争之地。没人抢的地盘都是单点突破,蜂拥而至的赛道都是布局。单点突破是对当下机会的选择,布局思维是对未来机会的All in。现在连互联网第二梯队都在对未来布局,因为当下的机会已经被瓜分殆尽了,没有单点可以突破了。共享单车刚开始是单点突破,但随着巨头的入场,已经变成了一个局中局。就像当年的深圳,改革开放之前就是个小渔村,一旦被纳入国家的“百年大计”,角色和地位彻底变了。阿里投完ofo,又投资哈罗单车;滴滴投完ofo,又搞自己的共享单车。没错,在市场经济里,这叫充分竞争,但在计划经济里,这叫重复建设。市场经济讲究金钱至上,计划经济推崇死磕到底,不见棺材不落泪。谁管背后洪水滔天。腾讯和阿里目前的市值之和约为1万亿美金,同时2012到2017年的五年时间里,腾讯对外投资总额为625亿美金,阿里是419亿美金,这意味AT能撬动的资本市值要大得多,而2008年一个天朝大国的救市资金是4万亿人民币(约合7000亿美金)……从目前AT分配资本、调动资源的能力来看,它们就是中国民间的“发改委”。而且这种能力正在力求打通线上和线下,有点东部扶持西部、先富帮后富的意思。20年前,所有人都认为互联网会是一个自有、开放、平等的去中心化的世界,那里面没有管制、自由竞争、让屌丝逆袭不再是奇迹。20年后我们发现,这个世界就是分久必合、合久必分。区块链的出现被认为是又一个去中心化、去AT化的历史性机遇,而且是一“去”不复返,大有把世界推倒重来之势。过去一百年,最厉害的去中心化就是全球化,主权在手、自由贸易、文化多元……但是So what?中美两国GDP之和已经占到世界GDP之和的40%,十年前、二十年前,Top 2的比例远远没有这个比例高。所以,无论全球化还是互联网,早期都是打着去中心化的旗帜,最后却都沦落成了中心化、寡头化。全球化并没有让世界变得更加平等、和谐,而是更加不平等、更加不和谐。欧盟是一场社会试验,目的是追求天下大同、去中心化,结果弄得大家都不舒服。英国在走回头路、美国在走回头路……其他国家就不说了。全球化是顶层(权贵)设计的方案,互联网是底层(草根)推动的运动;从上至下,都没有改变世界日益中心化的趋势。此时希冀区块链别开天地、另创一派,实在很难。区块链不是上帝,只要政府这种权力组织存在,去中心化的世界就可能遥遥无期。技术的进步,并不一定带来权力的分散,而可能是更加集中。力挺川普的投资大佬彼得?蒂尔最近要把办公室从硅谷搬走,理由是“那里已经变成了一党制国家”。谁掌握权力不重要,重要的是权力越来越集中。更可悲的是,目前区块链在中国,不是被当做改变世界的技术,而是圈钱的工具。很多人都在抢占舆论的制高点,以区块链之名,行炒币之实,玩的还是个人流量生意。所以说,在自己被割之前把别人割了,应该是目前币圈从业人士最现实的选择了。至于打着拯救世界的旗号忽悠新韭菜进场的那些人,不是坐庄的大佬,就是跟着喝汤的打手。他们手里,就差一本红宝书了。

2018-03-21LOAD MORE>

合作意向申请

如果您的企业需要制作网站,请留下您的联系方式,我们会为您提供良好的服务!

联系方式

021-50110509

18621585859(同微信号)

lewebsite@leadin.cn

上海陆家嘴“左岸88创意园”B402室 (北张家浜路88号)

WEB商学院

网站百科

专家百科

公众微信号

上海领意文化传播有限公司版权所有 © 2006-2018 LEADIN MEDIA 沪ICP备10205459号-6

@领意微品牌 网站设计服务顾问