首页

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

博博


企服盒 2018-04-08 10:52:48

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

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

设计规范中最重要的部分就是组件规范了,制定组件的规范有哪些好处呢?

  1. 简单:熟悉了解组件的用法之后,在做界面设计时,只需要合理运用组件就可以快速搭建web端界面,无差错。由于有成套的组件规范,所以在交互设计和视觉设计过程中无需每次都重复劳动。

  2. 统一用户体验:由于使用了统一的组件规范,所以保证了的视觉和交互设计统一性,保证整体的用户体验性。

  3. 提升设计综合能力:由于减少了做组件重复性劳动,交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务创新。

根据组件的用途,可以分为六大类:Feedback 反馈、from 表单、basic 基础、data 数据 、navigation 导航、other 其他。

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

本篇讲述的是feedback反馈类;反馈就是用户做了某项操作之后,系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

toast

定义:用户产生操作,出现toast提示,一般2-3s消失;通过toast中的提示语告知用户需要了解的信息。让用户的行为在使用过程中得到反馈和帮助。

使用场景:

  1. 可提供成功、警告或错误等反馈信息。

  2. 顶部居中显示并自动消失,是一种不打断用户操作的轻量级提示方式。

例如简书在没有上传专题封面时就点击创建专题按钮,出现toast提示,提示用户要先上传专题封面才能创建专题。

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

toast的消息提示分类一共有三种类型:成功类、失败类、常规类。

组件样式有两种:可以点击操作使其消失、不可点击操作使其消失。

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

alert 警示提示

定义:当用户进行某种操作时,网站会出现对应的警告信息提示用户,该提示信息的状态不会主动消失。

使用场景:

  1. 当某个页面需要向用户显示警告的信息时。

  2. 非浮层的静态展现形式,始终展现,不会自动消失,有的组件用户可以点击关闭。

例如淘宝购物车,删除之后,会出现alert警示提示,淘宝的例子属于alert的变种,用户可以点击“撤销本次删除 ”进行还原之前的毁灭性操作。

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

alert警示提示的消息分类一共有三种类型:成功类、失败类、常规类。当然也可以不含有icon操作,含有icon操作的话警示性会更强。

alert警示组件样式有两种:带有删除操作,不带有删除操作。

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

dialog对话框

定义:用于提示用户当前操作,或是完成某个任务时需要的一些其他额外的信息。对话框可以用确定/取消的简单的应答模式,也可以是自定义复杂的模式,例如表单的填写。

使用场景:

  1. 用户在进行重要操作的时,需要进行二次确认。

  2. 用于重要的反馈提示,让用户知道信息提示。

  3. 承载少量的表单填写类,减少页面的跳转。

windows系统的确定按钮一般在左边,而Mac OS的确定一般在右边。因为这个原因,导致我们平时看到的确定有时候在左边,有时候在右边。

微博和微信公众号后台的的对话框,确定在左边,而淘宝的对话框在右边。微信公众号的对话框是小浮层弹窗,避免了遮罩出现,同时对话框也出现在操作按钮的附近,对用户的干扰性也是最弱的。

dialog对话框,有三种常见的使用场景。其中表单对话框、提示类、轻量级提示类、表单类样式都是基于二次确认类对话框样式的改变而得到不同的样式。

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

Notification通知提醒框

定义:悬浮出现在网页右上角,用于全局的提醒式通知。常见于服务器异常、操作失败等

使用场景:

  1. 较为复杂的通知内容。

  2. 带有交互的通知,给出用户下一步的行动点。

  3. 系统主动推送。

Notification通知提醒框出现在网页右上角,一般4-5s消失,也可以点击叉号进行关闭。

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

tooltip 文字提示

定义:简单轻量的的文字提示。

使用场景:

  1. 鼠标移入则立即显示提示,移出则立即消失,不承载复杂文本和操作。

  2. 常用于解释操作按钮的文字说明。

还有一种tooltip是浏览器自带的,浏览器自带的和本篇的tooltip的区别是:浏览器自带的鼠标移入一般2s才显示,多用于折行打点的文字提示。例如简书,而本篇的tooltip鼠标移入就出现,切组件风格和浏览器自带完全不一样。

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

tooltip组件按照需要解释说明的对象位置不同,可以有以下不同的样式。

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


UI设计的4个角度与14点思考

博博


设计师柠檬 2018-04-26 15:22:57

写在前面的话:文章内容源于网络,由柠檬整理发布,如有侵权请联系设计师柠檬删除

都说UI设计是用户看到产品的第一个门,从进入手机应用商店到下载界面再到产品的首页,设计师不考虑一下真的用交互稿和产品直接做么,从图标在应用商店的吸引展示力和用户的软件留存率,这些哪个不是和UI设计师有关系?

本文重点:1.学着像产品经理的角度思考

2.学着像交互设计师的角度思考

3.学着在用户的角度思考

4.学着在自己的角度思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考

UI设计的4个角度与14点思考


如何利用 “峰终定律” 改善用户体验?

资深UI设计者

一、什么是峰终定律

峰终定律是由诺贝尔奖得主 DanielKahneman 提出的,百度百科上它是属于心理学上的定义。

我把它结合了自己的理解应用在设计学上可以解释为:

用户在使用某个硬件产品,软件产品或者服务系统来完成自己目标的过程中,用户情感地图曲线的波峰(体验最好)、波谷(体验最差)、结束点的体验,决定用户对整个过程的体验评价。

而在过程中体验好与不好体验的比重,好与不好体验的时间长短,对记忆几乎没有影响。

这一定律主要是阐述人对过去体验的记忆由两个因素决定,一个是「高峰」,一个是「结束」。

把用户情感地图曲线和峰终定律结合起来,简单画一张图:

既然用户整体体验与整个过程中好坏综合无关,只跟几个关键点有关,那么可以得到一个公式:

用户整体体验评价(E)=(y1-y2)+y3

y1,y2,y3 可以称为关键时刻 MOT(Moment Of Truth)

二、日常生活中的峰终定律

这两天和包子聊到宜家的峰终定律,突然明白了为什么我们有些课程调研,大家都喜欢去宜家调研了。

虽然它的店员很少,找货物也要自己找椅子搬下来,就算只买一件家具也需要逛完整个商场,但是每次逛完结束的时候都可以吃那个特别好吃的「一元冰淇淋」呀,这就是它的「终」。

而在逛的过程中,就像包子讲的,它的体验模式很棒,把产品作为空间的一部分。曾经有一位宜家的老顾客也说,宜家商品物有所值,展区实用,产品随意试用,大概这就是它的「峰」吧。

扔一个我的学习小伙伴包大佬的分析:

三、互联网产品中的峰终定律

如果说峰终定律怎么影响互联网产品的用户体验的话,可以先举几个体验差的例子。

很多时候,用户在某个平台完成某个任务后,会出现很多引诱用户点击的赞助商的内容。比如问卷星,每次填完,任务结束的时候,它还会打着抽奖的名义接广告……

再举个例子,你有没有过在某些 app 注册账号,登录 or 注册很多次却失败的情况,或者花了很久时间才注册 or 登录成功?原因可能是账号密码错误,可能是注册流程过多跳出率过高,可能是填写信息冗杂……

如果这款产品不是用户刚需的话,最终会导致很多用户卸载它,就算你之后流程的体验再好,用户根本无法体验到最后。

四、利用峰终定律打造「爽点」

一款好的产品不仅能够解决用户的「痛点」,也能刺激用户的「痒点」,更能打造用户的「爽点」。

有一些产品能在用户使用的过程中利用峰终定律打造 「爽点」,提升用户体验。

如果用外卖这个来举例子的话,应该算是一个大的服务系统,它会涉及到很多方,比如消费者,商家,骑手等,而这一整个服务系统的设计,只针对消费者而言,流程也会十分复杂,其中利用峰终定律考虑的就更多了。

那就其中用户(消费者)与饿了么 app 的交互流程来举例的话,用户点外卖这个任务:

从打开 app——选择店——选择美食——付款,用户的任务已经结束了,但是饿了么会在结束的时候,给用户一个分享领取红包的福利,用户会觉得自己获得了很大的优惠,体验会十分好,这也就是利用了峰终定律的「终」。

我发现游戏里面对峰终定律是用得最多的,曾经玩过 lol,王者荣耀,吃鸡手游……

如果问曾经玩 lol 或者王者最爽的时候是什么时候,那大概是:比赛过程中的 First blood,penta kill ,killing spree,legendary,you have slained an enermy 等这些配音和画面的视觉刺激吧。

按照常规的模式是,杀人后系统直接提示「您已经杀灭了一名敌人」,但是它会去强化这种杀人的体验,将杀人的场景分为多种类型,通过视觉上的弹框击杀提示与配音上的激励叠加,把杀人的体验不断深化,做到,另外在推塔和偷掉水晶的时候是不是也是最爽的时候呢?我觉得这里就利用了峰终定律的「峰」。

我记得在游戏结束的时候,比如 lol 里面推掉水晶的时候,游戏画面会停止几秒,然后再出现水晶慢慢破灭,加上大大的「胜利」二字,有的时候回到大厅还需要等几秒的时间。

王者荣耀,吃鸡这类在游戏结束的时候也会给用户很多激励,明明可以在结束后直接回到大厅,但它们会延长这些胜利或者失败的体验,如果胜利,当然是爽,还想再拥有这样的体验,继续打;如果是失败,那再接再厉,想拥有赢的体验,继续打……

总之就是会让用户上瘾。它们会把这些用户体验做到,在游戏结束的时候这些的体验就利用到了峰终定律的「终」。

五、利用峰终定律改善体验步骤

「峰终定律」改善用户体验的步骤:

  • 进行可用性测试;
  • 绘制用户旅程图;
  • 找到「峰」,「终」时刻;
  • 通过用户研究的方法找到用户心中的关键时刻;
  • 将「峰」、「终」,「用户心中关键时刻」的体验优化至。

移动端的导航设计模式

资深UI设计者

在《用户体验的要素》一本书中,Jesse James Garrett 将用户体验分为了五个层级,战略层,范围层,结构层,框架层,表现层。

其中在框架层里面有一个很重要的概念就是导航设计,作者对导航设计的定义是:元素的组合,允许用户在信息架构中穿行。

我觉得可以把导航设计理解为:我们从用户的心智模型出发,结合业务目标,对信息架构的一个梳理,来帮助用户完成目标。

通过自己手机里几十款 app,总结了以下六种导航设计模式,包括:标签导航,宫格导航,侧边导航,列表导航,菜单导航,轮播导航……

简单介绍了它们的优缺点,适用场景,以及一些衍生导航与相关案例……(不过导航设计一定是视产品和情况而定的,并没有确定的依据与理论)

一、标签导航

标签导航分很多种,有底部标签导航,顶部标签导航,底部标签导航又可以衍生出舵式导航,顶部标签导航又可以分为静态或者是动态导航……

底部标签导航是最基本的导航,几乎绝大部分 app 中都在用,tabbar 位于页面最底部,一般3-5个 tabbar,有文字+icon,也有纯 icon 形式,但大部分是文字+icon 的形式,我想是减少用户记忆负担吧,如下:

而关于底部标签导航的优点,缺点以及适用场景也简单整理了:

我发现很多用户发布或者生产内容的 app 会将底部标签导航进行变体,很多人把它称为舵式导航,就像这种:

中间的「+」一般是发布的意思,并且是 app 里面使用最频繁的一个功能,一般都会重点突出。并且,该标签中很多时候会有二级导航,二级导航里可扩展性就比较强,如图:

而顶部标签导航顾名思义就是 tabbar 位于顶部,最早知道它是在 Material Design 里面,因为 Google Pixel 手机底部存在物理导航,所以将标签导航置于顶部不会显得突兀。它很少用作一级导航,一般是二级导航比较多,而且我发现顶部标签导航,几乎都是纯文字的形式,比如:

突然想到今天交互设计课上的时候,老师讲的人机交互里,重要的操作放在大拇指可触达的范围内。

而顶部标签导航,如果是点击标签进行操作的话,用户单手操作就十分不方便,所以我发现体验好的 app 的顶部操作导航都是可以直接通过左右滑动屏幕的交互来切换。

而当标签类目过多的时候,可以通过左滑展现更多标签,比如很多新闻阅读类的 app:

如果是可以滑动查看更多的话,一定要通过一些方式告诉用户可以滑动查看更多,比如最后一个标签隐藏一半的方式等:

关于顶部标签导航的优缺点以及适用场景,如下:

二、宫格导航

宫格导航,也是十分常见的导航形式,除了一些工具类 app 外,大部分是作为二级页面展示出来,并且以 icon+文字的形式居多。

如果将宫格的 icon 换成 picture 的形式的话,可以衍生出一种新的类似于卡片式导航的形式 ,可以通过垂直滑动来切换,比如:

那,如果宫格信息太多,我发现很多 app 会采用分类展示的形式,并且通过水平滑动的方式来切换,比如:

但是上面两种可以垂直或者水平滑动的形式,一定要让用户知道是可以水平或者垂直滑动的,采取的是边界地方信息只展示一半的形式,告诉用户可以继续滑动……

除此之外,宫格导航还可以在电商里面运用,在首页的运营内容块,它可以根据内容的重要性调整模块的大小,比如:

关于宫格导航的优缺点和适用场景,如下:

三、侧边导航

有些书里面会把侧边导航叫做抽屉导航,这类导航其实比较少了,原本也是从 Google Material Design 里面提取出来的概念,一般会在首页呈现一个主要功能,将其他不常用的功能收纳放到侧边导航里,比如:

而关于侧边导航的优缺点以及适用场景,如下:

四、列表导航

列表导航也是十分常见,几乎在每一个 app 里面都会存在,大部分时候是作为二级导航存在,但是也会存在于一级导航的时候,比如邮箱,iOS系统自带的设置等。

一般在列表导航里都会有下一个层级,可以通过箭头来告诉用户是否有下级菜单。

当列表信息比较多的时候,可以对列表进行分类,可以添加小标题或者直接分隔开。比如:

而在有些列表导航里,我们还需要展示给用户一些预览信息,比如 iOS系统里的健康,个人信息里的一些基本数据展示,如下:

关于列表导航的优缺点以及适用场景,如下:

五、菜单导航

其实菜单导航也可以称为下拉导航。这也是今天上交互设计课的时候,老师以微信的「+」为例子介绍的一种导航形式。最初了解这种导航形式也是来源于 Material Design 里面的 Menu。

Menu 是临时的一张纸(paper),由按钮(button)、动作(action)、点(pointer)或者包含至少两个菜单项的其他控件触发。

比如:

当信息层级变多的时候,菜单导航里要展示一层或者两层信息,比如大众点评采取的形式:

关于菜单导航的优缺点以及适用场景,如下:

六、轮播导航

还有一些导航比如轮播导航,完全的沉浸式体验,高度简洁的导航,比如天气,但是这种导航因为轮播点的大小不会很明显,所以用户很难快速感知自己所在位置,并且轮播导航轮播的数量也不宜过多 。

其实导航的类型应该还有很多,并且在一个 app 里面几乎不可能只使用一种导航,哪怕只是一个页面,也会存在多种导航的组合形式,比如:

总结

  • 导航的形式一定是根据你的产品的诸多因素进行选取,并不能完全按照我上文的适用场景为依据;
  • 几乎每一个 app,每一个 app 的每一个页面,都会涉及到多种导航模式,需要结合具体场景进行组合选取;
  • 导航的具体展现可以通过:文字,icon,文字+icon 的形式;
  • 有些导航比如标签导航在设计的时候有多种状态,比如 unselected,selected 等状态;
  • 导航在 iOS 和 android 里面的应用会不一样,比如标签导航适配 iOS系统,侧边导航适配 android 系统;
  • 导航设计必须传达出它的内容和用户当前浏览页面之间的关系;
  • 能够引导用户以很好的体验完成目标的导航设计都是优秀的。

7条产品设计原则:纯干货总结,实用到没朋友

博博


人人都是产品经理 2016-05-16 10:07:04

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

一定有很多朋友在和我思考过一个同样的问题:优秀的产品是怎样定义的?周鸿祎给出答案:第一满足刚需、痛点、高频,第二要有良好的用户体验。第一点很好理解,我们今天主要来聊聊第二点。

7条产品设计原则:纯干货总结,实用到没朋友

参照产品设计原则,可避免产品设计师走弯路,设计出具有良好用户体验的产品。产品设计原则会随着社会的进步而更新迭代,以下是我在学习和工作中对产品设计原则的思考总结,希望可以给你带来参考和启发。

一、减少用户出错

错误对话框是最令人讨厌的交互方式,也是很多产品中滥用最多的。错误对话框一般不会给用户指明正确的道路,仅仅在保护程序不陷入麻烦。而且错误对话框打断了用户的注意流,愚蠢地停止了进度。用户犯错误的时候,不应该受到训斥,这个时候,他需要的是帮助和正确的引导,那么我们要做的就是帮助用户避免错误,告诉用户如何把事情做好。

7条产品设计原则:纯干货总结,实用到没朋友

二、易学性

好的应用像极了蓝颜知已,能看透你的心,在你需要的时候或者合适的的时间,用合适的方式提供暖心的帮助,指引你披荆斩棘,打怪升级。

帮助界面大概分为两种,导览教程和覆盖式教程。

1、导览教程是通过一组有序的图片介绍应用功能,或者指引用户完成一个目标。

新应用或者更新后用户,为了解决用户初始问题,绝大部分应用采用了帮助引导页面,然而真的是必要的么?我觉得未必。可能有的产品经理也觉得没必要,但这是种主流,所以还是选择加上。有的则仅仅为告诉用户产品是做什么的。其实用户可能根本没有那么多耐心去阅读好几页的产品说明,就算有耐心看完,也大多记不准。所以把引导放到使用情景中,在用户使用到此功能时展示给用户,也可把引导收起来,用户需要帮助时呼出。微习惯在引导方面,给用户惊喜。

7条产品设计原则:纯干货总结,实用到没朋友

2、覆盖式教程是另一种介绍方式,很简单的透明薄皮,少许箭头,少许注释,指出关键重点之处。

此方法不错,用户看起来明了易学。免费日程极简的箭头和引导告诉用户功能及使用。

7条产品设计原则:纯干货总结,实用到没朋友

做好后可以自我检测思考,用户学习的成本是不是足够低了?给用户的学习方式是不是最科学合理的?还有没有什么地方需要修改?还有没有更好的方式?用户学过一次后还需不需要重复学习?文案确定通俗易懂?

三、美学一致性、完整性

应用的完整性一致性就是外观和里面不同模块之间都有相似的外观、感觉和气质。产品的完整性一致性会让产品更易学易用。

1、从应用外部看,产品完整性一致性,容易培养用户围绕这点形成强烈的品牌意识,传播产品风格就是在传播品牌,可深入人心。一致不代表僵化,可围绕产品主线进行成长和演化。

2、从应用内部看,一致的用词、风格、色调、图标会给用户建立具有凝聚力的视觉系统,带来在产品上一致的体验。

7条产品设计原则:纯干货总结,实用到没朋友

四、输入方式更简单

移动端产品的使用场景,公车上,行走中,单手操作等,导致用户在使用手机时受到很多环境上的干扰,所以注定会在输入方式上给用户造成很多的不便和出错,为使用户减少使用手写或者键盘输入,减少浪费更多的时间和精力,改变移动端的输入方式就变得尤为关键。

1、减少移动端的文字输入,输入时可采用建议或者事件记忆。聪明的应用会根据用户之前的行为和信息给用户提出建议,根据记忆灵活地为用户当前的行为显示信息,使得用户在效率和满意度方面得到大大的提升。

7条产品设计原则:纯干货总结,实用到没朋友

2、为提供用户完成目标的效率,更为了减少用户出错,转变输入方式,改输入为选择或手势方式。

7条产品设计原则:纯干货总结,实用到没朋友

3、使用手机已有的传感器输入。输入文字搜索关注二维码,改变成长按识别二维码,减少输入麻烦和出错的问题。

五、为停止做准备

当人们全身心的投入到活动场景中,会对周围的干扰视而不见,这种状态被称为“流”,用户在这种状态下会有轻松的、温和的快感,处理任务,完成目标也是会非常的,但是很不幸的是,我们使用的手机,使用移动应用的场景,就是会因为各种事情而打断。想象一下,录下精彩的视频,发送时网络卡住了,不响应了;发微博发到一半手机停电了;网购付款时老板的电话来了,这在我们日常生活中太常见,所以聪明的、体贴的产品,是随时为停止做好准备的。

1、编辑中断、网络中断时,尽可能地保持之前状态,并存储好用户数据。我们总的原则就是让用户付出的劳动不至于付之东流,也减少用户的重复操作。例如美拍上传视频时网络中断,可帮用户存到草稿箱,用户稍后可重新编辑上传。

2、误操作或其他原因跳到错误页时,不要让用户无路可走,最好给用户下一步的选择。产品程序无法使用,那么告诉用户发生错误的原因是什么,给出用户选择,他们还能做点什么,并给出解决方法。百度之前有个很好的体验,在找不到页面的时候,展示帮找失联儿童的页面,页面找不到,可以帮忙找找孩子,很人性化的体验。

六、做好反馈

反馈是用产品的语言告诉用户应用正在做什么,进展怎么样了,接下来的操作会有什么结果。我们使用应用,就像用户与应用的交谈,用户肯定不希望应用是冷冰冰,无回应的。

反馈可以分为过程反馈和结果反馈。

1、过程反馈。用户在操作过程中,界面对操作进行反馈,告诉用户操作的状态变化,用户可根据反馈对任务进行下一步选择操作,一定要做到轻量,不突兀,细腻地反馈。富视觉非模态反馈,是用的比较多的一种反馈方式,通常为动态,视觉上很轻松地显示反馈,不需要用户做其他操作。我们看IOS的下载更新,就是这样。免费日程的发送邀约等待也是一种富视觉非模态反馈。

7条产品设计原则:纯干货总结,实用到没朋友

2、结果反馈。用户在完成操作后,告诉用户操作结果,使得产品看起来很贴心,很有生命力。结果反馈也避免了用户因为不确认而造成重新操作。连贯的动画和声音都可以为用户提供反馈。举个删除的例子,例如mac在删除成功后,会有收走到垃圾桶的动画,伴随着粉碎的声音,这种标志性反馈会给用户留下独特的印象。

七、内容为先

《移动优先》作者Luke,说设计原则为“内容优先,之后才是导航”。这句话是什么意思,这是在产品设计中一个经常容易犯的错误。如何让用户找到内容,所以造成了导航优先,而忽略了用户真正关心的内容。在移动设计中,可能你的产品界面很美观,图标很精致,动画很流畅,设计独到到令人耳目一新,用户可能会对此充满新鲜感,但是新鲜感终究有期限,用户不会为了这个而去一直使用你的产品,没有内容的产品就像一本只有华丽封面却没有内容的书,所以用户内容才是最核心的。

1、突出内容,使界面内容更开阔,使用户完成目标更专注。IOS备忘录中,采用点聚式导航,用户需要时才呼出,没有无关杂乱的内容,给界面一种开阔的感觉。

7条产品设计原则:纯干货总结,实用到没朋友

2、提升屏幕利用率,把焦点放在用户更注重的内容上。对于手机来说,屏幕资源利用率的提升要做到优化提升。知乎是以UGC为主的产品,用户在上划浏览内容时搜索消失,当用户需要时向下滑即可显现。

7条产品设计原则:纯干货总结,实用到没朋友

人人都是产品经理也是以UGC为主的产品,正所谓内容为王,吧啦吧啦,算了不说了,投稿去了。

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

博博


36氪 

今日,登录页面制作初创公司Instapage宣布他们完成了Morgan Stanley Expansion Capital投资的1500万美元的A轮。

Instapage是一家由数据分析引擎驱动的,提供个性化登录页面模板,帮助企业提高数字营销转化率的公司。Instapage目前拥有超过15,000名客户,平均转化率约为22%。

设计登陆页面似乎并不是创业者感兴趣的风口,但Instapage创始人兼首席执行官Tyson Quick表示,这对于营销人员来说却是一个真正的问题。

登陆页面(Landing Page)又被称为引导页,是指在数字营销中,当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。而在网站运营的逻辑里,最重要的三个因素是拉新、转化和留存,那么,作为第一个关卡的登录页面就显得尤为重要。

Quick之前曾在一家名为Jounce的营销产品上工作,他发现,即使有人点击了Jounce广告并最终进入了公司网站,其中只有3%的转化率。

“这有点荒谬,因为他们已经点击了广告,往往具有明确的消费意向。”Quick说。而采用针对核心客户群的个性化登录页面之后,Jounce转化率提高到了20%左右。

2012年,Quick决定将公司业务的重点转移到Instapage,现在Instapage成为了一个更广泛的平台,用于创建和测试针对不同访问者个性化目标网页。

“我们可以成为广告技术与传统营销和销售技术之间的桥梁,”Quick说,“这些技术能够帮助广告投放商锁定核心用户。一旦用户点击广告,自动化营销就会启动,将这些用户纳入企业的CRM系统。这是以往的技术中缺失的转换点。“

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

围绕Quick所谓的“点击广告后就引导转化”,Instapage开发了三个关键组件——可扩展创建,页面优化和个性化。而像Optimizely可能只会解决其中的一些问题,而Instapage将三者结合了起来。

而谈及如何采集用户数据,为企业订制个性化登录页面时,Quick认为公司不需要详细的用户数据:“个性化的标签来自广告本身。我们可以从他们点击的广告中收集到数据。“

之前,Instapage已经获得了200万美元的种子资金。而且目前该公司盈利,Quick说每年的经常性收入为1200万美元,并没有融资需求。但是,他发现Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的业务。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage专注于提高数字营销效率这个细分领域,并且可以在不需要外部或技术资源的情况下进行更精准的广告活动,创造了令人印象深刻的产品。”


UI设计师基础设计规范

蓝蓝设计的小编

UI设计的基本规范,包括网页设计和APP设计的规范罗列

Google设计语言:如何将品牌DNA融入产品

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文转自,头条号的人人都是产品经理,的一个大神。

Google设计语言:如何将品牌DNA融入产品

2018年5月9日凌晨1点,Google开发者大会上对 Material Design做了更新的讲解,其中令我印象深刻的是Google对图形语言单独拿出来做一个模块来解释,如下图我标红的地方。

Google设计语言:如何将品牌DNA融入产品

OLD NEW

对!就是这个SHAPE的单词,为什么我会如此看重,大家应该知道构成设计语言的四大基础原子是:字体/颜色/网格系统/图形。

这里的图形包括图标和一些辅助图形,它有什么不同呢?

大家看之前以往的版本,材质设计语言里面没有单独去说形状这一元素,当然也有做的比较好的产品,比如:韩国的 29cm 和 11街,国内天猫/网易蜗牛读书等等。

图形语言对我们产品影响极其大,之前网上也有这样的文章,比如:提取logo上面视觉基因,然后运用到图标里面。对,这个没错,但是我觉得不够好,不全。

今天和大家一起来分析下Google是如何做的。

我对图形的理解

图形无处不在,人眼对图形的识别能力远远高于字体,图形便于记忆、传播,这就是为何每次做LOGO时候都需要去考虑图形延展呢?

目的为了传播品牌,在用户心中打造产品形象,比如:可口可乐弧线、阿迪达斯、苹果logo这些国际性大牌子的logo都是易于记忆与传播的。

那么在产品设计中如何体现呢?

我们常用在图标里面去展现一些品牌元素,比如:天猫猫头直接和图标融合,这是一个很成功的例子。还有韩国的Genie音乐产品,也是直接logo和图标集合。

那么仅仅只是这些吗?

当然不够,如果我们想传达我们产品的品牌理念,深入到用户心中,只在图标里运用是不够的。

比如:可口可乐每年做产品运营推广,不断大量的重复它logo弧线元素,这样能长期在用户心中形成记忆点。

Google是如何做的?

Google这次让我们打开眼界,下面Google的原话:

形状可以引导注意力,让用户易于识别组件,沟通状态和品牌语言传达。

对次有了一些更深刻的认识,形状其实运用不止我们平常所理解的。我之前写过一篇文章,就是形状对布局的影响,里面就是讲了形状的一些基础作用。

下图是来自材质语言的截图:

Google设计语言:如何将品牌DNA融入产品

图片来自google

Google的想法非常大胆:一个方形的变化,延伸出不同的形状,当然并不是单独一个产品设计里面放这么多形状,而是运用到不同产品,运用不同的图形,传达其特殊品牌调性、大统一,局部战略调整。

Google设计语言:如何将品牌DNA融入产品

比如:上图凹槽图形用在主TAB上,形成视觉焦点,容易吸引用户区关注它,一般核心功能会如此设计。

Google设计语言:如何将品牌DNA融入产品

Google已提到了可以用于区分不同组件,这观点我很赞同,之前我对爱奇艺做了视觉分析,发现它们一级导航和二级导航样式一样,那么这样用户如何区分呢?

Google设计语言:如何将品牌DNA融入产品

图形可以用于表达某一正在交互的状态,比如:选中状态,当然并不是单独去使用。Google特定强调了:需要和其他视觉元素集合起来使用,比如:颜色

其实这一观点以前就有啦!比如:咱们的check box控件,选中前后状态不一样。

不过Google这个是否略显夸张些?

Google设计语言:如何将品牌DNA融入产品

最后重点来啦!比如:可以用于表达品牌语言,那么图形来自哪里?用在哪里?

如:上图是一个Crane的应用,他们logo是中间一个图形加外带椭圆底,这里Google提取了椭圆作为视觉DNA,并沿用到产品的每一个控件。

Google设计语言:如何将品牌DNA融入产品

同一产品多终端统一符号语言。

Google设计语言:如何将品牌DNA融入产品

如下图提取LOGO关键特殊符号:

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

下图Shrine提取菱形棱角图形运用到产品设计细节里面。

Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品Google设计语言:如何将品牌DNA融入产品

看完你想说什么?我只想冷静三分钟!!!

其实说实话,对于品牌DNA的延续早在年初的时候就思考过,如何去把品牌语言在产品设计里面体现?

我当时理解是:首先要了解我们的品牌核心是什么?

我们的品牌理念是啥?品牌solgan,我们要给用户传达一种什么样的情怀?然后如何去巧妙提取产品logo里面的视觉基因,比如:某一图形元素;比如:线条/点/某一特殊图形符号,这图形一定是易于延展,拓展性强的。

然后运用到产品的每一个细节里面,比如:图标、按钮、异常状态、启动页、运营banner、情感化设计等等,如今大佬Google 已经去这样做了,而且做得很系统,包括动效都有引子。

当时也有一些产品已经这样做了,比如:韩国29cm,设计细节非常好,图形运用非常到位。国内天猫猫头运用也是渗透到产品里面去了。

Google这次又给我我们一些大胆的思考,能运用这么广的范围?

Google设计语言:如何将品牌DNA融入产品

需要注意点

Google举了几个反面例子,我们在提取图形或者使用时需要注意的几点,如下:

Google设计语言:如何将品牌DNA融入产品

注意图形的指向性和触摸大小,千万别影响用户正常使用。

Google设计语言:如何将品牌DNA融入产品

同一含义的组建样式必须一致。

Google设计语言:如何将品牌DNA融入产品

别使用形状来暗示其他含义, 这个对话框的形状表明它与它背后的卡片相关。

Google设计语言:如何将品牌DNA融入产品

总结思考

Google的本次材质设计语言的更新,我相信后续会有一些产品为了打造一些品牌调性,也会慢慢去融入更多的品牌符号语言进去。

当然我们一定要克制与统一,这是最难做的一部分,Google虽然此次系统性的解释图形的意义及延伸使用,但是某些地方稍微有些过了,所以我们在设计提取DNA时候需要克制与统一。

那么我们可以从中取学习了解如何才能让我们产品更加差异化?在同质化的今天,你是如何打造个性化与具有调性的产品呢?

如今AI已来临,机器人对设计影响极其大,从Google本次更新迭代中就大量提到了AI对产品的影响,以及如何去学习用户的习惯,然后预测用户的下一步需求。

我们以后产品会越来越智能,越来越了解人性,除了硬件的升级,研发能力加强,我们也要多去思考下:如何打造独具匠心的产品?如何打造一个无缝体验、多平台、跨语言产品视觉统一体验?

这方面跨平台多终端体验,苹果已经做得很不错了,当然还有spotify 音乐产品无缝跨平台,听歌/切歌/选歌体验。相信这只是一个开始,后续会有更多精彩

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

LOGO UI设计7大要点

蓝蓝设计的小编

大部分视觉设计师在工作中都会遇到logo UI设计,每个UI设计师都有自己独特的思路和方法。在设计过程中有理性的方法也有感性的发挥,我接下来讲的理性的部分比较多,因为感性的东西跟个人平时的积累、经验、生活阅历等等相关。不是什么大神,写的都是自己慢慢沉淀下来的方式方法。Logo的意义和重要性,在这不再赘述,我主要讲logo设计的每个阶段个人觉得比较重要的几点。

掌握这5个方面,让你具备真正的交互设计思维!

资深UI设计者

交互思维是什么?网上的搜索结果大多是一些交互设计的方法。但是我这里要讲的,是真正做交互设计所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

交互设计,听上去是“设计”,但是其本质和常见的UI和视觉设计相去甚远。“交互”指的是人类与机器之间的沟通,与美学、界面、按钮什么的,其实没有半毛钱关系。领域细分之前,也许我们考虑的东西越多越好,但是在细分之后的今天甚至未来,交互设计就要有它不一样的价值。

由于目前的大环境对这一细分领域仍旧缺乏了解,所以我希望在这篇文章里,写几个做交互设计所需要的思维方式。

日历

链接

个人资料

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

存档