首页

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

博博


听云 2016-04-18 10:49:28

早在1995年,尼尔森的十大可用性原则就已问世,虽然当时针对的是web交互设计,但易用性对任何拥有用户界面的东西来说都适用。不管是网站,程序,移动页面或其他,具体的规则可能不同,但总的原则都源自人类上万年进化所形成的思维方式。

1、可见性原则

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。保证页面内容的可见性、状态的可见性、状态变化的可见性。

在用户与应用的交互过程中,系统需要即时的给予用户反馈。如果用户在操作过程中,页面出现一片空白,不清楚应用是否给予了用户反馈,这时候用户就会感到焦虑、恐慌,这些都是不符合可见原则的。看起来非常基础的要求,其实很多产品都做不到或者没做好。

有一部分App,在弱网情况下信息未加载完成时,显示空白页,无法给用户任何信息。

现在来看一款可见性做的比较好的App

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

如上图,关掉WIFI在2.5G的网络情况下首次进入这个App,主页面内容虽然迟迟加载不出内容,但是有一个提示能够告诉用户,当前正在做什么,是怎样的进度。并且“内容炼成中”这句有二次元味道的提示,使App的整体感非常好,而且图片一定程度上分散了注意力,使用户对加载的时间不那么的敏感,为弱网环境下内容的加载争取了时间。

2、场景贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景)。此外,还应该使用易懂和约定俗成的表达。

在做产品设计的时候,主要考虑到的是用户使用场景。产品的功能要贴近目标用户的真实使用环境,这一点非常重要。用两款导航类产品举例:

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

还原一下导航时部分使用场景,比如在一个陌生的城市开车,需要使用导航,输入目的地,大部分的情况下手机不是手持状态,观察的模式也是以眼睛扫描为主。

在这个页面上的设计,大部分的信息对我第一诉求导航并没有直接的帮助,如果要输入一个目的地,需要用寻找的方式去使用它。输入框非常窄,不好找到,使用场景下导航并不贴切。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

相比之下看到锤子驾驶的界面,作为一款导航类的应用,它教科书式的讲解了什么是场景贴切原则。在开车的时候只要用眼睛扫一下手机屏幕就可以知道要导航的功能位置,并且可点击区域巨大,非常容易选中。

选中导航后优先用语音搜索目的地,这样可以减少对驾驶的影响。下方巨大的List也让用户比较容易的去点击最近去过的地方。这样就非常符合用户在驾驶中,或者说非手持状态的使用习惯。

3、可控原则

为了避免用户的误用和误击,网页应提供撤销和重做功能。用户对当前的状况很好地控制了解和掌控,并且有足够的自由。

掌握、可控、自由是人类安全感的重要来源,如果使用一款产品的时候提心吊胆的,生怕点击了某个按钮就发生了错误,很难相信这样的一款App有好的用户体验。有一个用户交互的金句:操作前可预知、操作中可有反馈、操作后可撤销。

像iPhone 的出现,为可控原则做了最好的注解,Home键也是教科书式的可控原则的体现。无论你在哪里,遇到了什么问题,一键回到桌面,一切重新开始。

4、一致性原则:

同一用语、功能、操作保持一致。用户需要在同一个产品中,接受同一套规范、逻辑。

这样做的一个好处是可以让用户对App有一个整体的感知,在相同的背景下做相同的操作会有可预期的结果,这样大大的降低了用户的学习成本。如下图这个出行类App,点击了旅行休闲,结果跳转了一个莫名其妙的页面。内容与旅行没有关系,违背了一致性。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

5、放错原则

通过网页的设计、重组或特别提醒或安排,防止用户出错。

这方面很多成熟的实体产品都比较好。App中这种防错设计随处可见,比如订票软件,已经过去的日期显示为灰色,以防订错机票的错误。

6、协助用户记忆原则

在需要记忆某些信息时,产品功能上要帮助用户记忆。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。

7、灵活的原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活。

移动端的用户大多数不是专家级用户,也不是小白用户。对页面的设计要更侧重于满足对大多数用户的需求,不宜复杂,也不宜过于简单无提示。

8、易扫原则

互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

在时候用一款陌生产品的时候,用户绝大多数是使用扫描的方式而不是阅读的方式来理解内容。如果想让用户快速发现想要的信息,就一定要保证页面足够清晰,简约。如果有较多的信息需要展示,那么一定要分清主次,要求界面足够简单,突出重点,内容易读。

9、容错性

帮助用户从错误中恢复,将损失降到。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

例如各类应用中要恢复出厂设置,是一个比较重大的操作

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

所以在恢复出场设置前需要输入解锁图案。这就是容错性的一个体现。对于用户正在进行的操作有着明显的提示,避免了误按误点操作造成的损失。

10、人性化帮助原则

帮助性提示最好的方式是:1、无需提示2、一次性提示3、常驻提示4、帮助文档。

一个系统或者是产品,如果不需要文档或是提示是最好的,一切都是自然而然发生的。但是在很多情况下,需要对内容做一个提示或者帮助,来便于用户更好的使用App。

帮助和提示在哪里用的比较多呢?设置。在设置页面里,可以看到无线网络、定位服务等是否打开,而中间遇到比较复杂的操作,用户对此一知半解,这时候就需要有相关的帮助提示。

现在几乎所有的移动端交互设计全部基于用户体验,而在定位准、细分市场准,遵守了尼尔森十大原则的情况下,还有一些问题是每个产品研发团队不能避免且无法解决的。

在每个产品的不同生命周期中,侧重点也会不同。初期注重种子用户的培养与新功能的增加。到了成长期会经历版本的频繁发布,系统不够稳定。这时候就需要用到更加专业的第三方工具去帮助应用发布后的性能问题进行管理。

深度解读尼尔森十大可用性原则 | 如何做好移动端用户体验优化

在产品真正上线后可以及时进行崩溃分析、网络请求与错误分析,交互分析等等通过App的总体性能评分与在同行业竞争中所处的位置来不断迭代产品,改进用户体验。

设计规范 | 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点思考


10年经验设计师教你如何寻找高质量素材

博博

UI妹儿 2018-02-22 11:13:02

我们平时做设计的时候,都会遇到挑选素材这个难题。

做UI的同学,会浏览动效网站寻找灵感又或者去挑选适合的图标;做平面的同学,特别是电商广告的同学,就会下载电商banner,还有高质量的图片;另外还有绝大部分的人都会在做报告的时候,下载漂亮的PPT和Word模版。如果刚好那时候你在找工作,还需要找精美的简历模版……

但这些素材到底在什么地方找呢,又在什么地方找到高质量又免费好用的素材呢?

这次,我早已为大家准备好。下面是我花费大量时间精力整理而成的素材网站,全部都是亲身试用后的精选出来的。希望能帮大家在找素材这条路上节省更多的时间,找到更适合自己的那些素材。

懒人福利

如果你觉得这些网站下载太麻烦

可以直接翻到文末

专门为大家整理好的

1000G高质量精选设计素材

免费送!

机会就一次,错过可以不用等下年了

因为活动就这一次

常用素材

一、免费可商用图片

1、https://pixabay.com

10年经验设计师教你如何寻找高质量素材

全网共一百多万张免费图片素材,且质量非常高,种类繁多,适合每一个行业使用。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,质量高

缺点:下载需注册,加载慢

推荐指数:★★★★★ 4.5

2、https://unsplash.com

10年经验设计师教你如何寻找高质量素材

全世界的优秀图片网站,所以图片风格很丰富,而且大部分质量都很高,分分种可以用来做壁纸!

10年经验设计师教你如何寻找高质量素材

优点:质量高且优秀,数量多,风格独特

缺点:加载慢

推荐指数:★★★★ 4

3、https://www.pexels.com

10年经验设计师教你如何寻找高质量素材

每日会更新100张高质量的照片在首页展示,无论风光还是人物,这里应有尽有。

10年经验设计师教你如何寻找高质量素材

优点:种类多,每日更新,不需注册

缺点:加载慢

推荐指数:★★★★ 4

4、http://foter.com

10年经验设计师教你如何寻找高质量素材

网站开始会将素材分为商业、动物和风景三大类,如果你需要寻找其他图片,可以直接在搜索栏直接搜索关键词。

这里的图片给我的感觉就是有趣,独特,有很多图片都很适合做海报。

10年经验设计师教你如何寻找高质量素材

优点:分类明确,质量很高

缺点:加载超慢,种类不多

推荐指数:★★★★ 4

5、https://burst.shopify.com

10年经验设计师教你如何寻找高质量素材

网站最大好处在于帮你分成非常多的类别,尽管数量比不上其他网站那么多,但这里的图片风格都很统一,很有质量,感觉看上去就很年轻化。

10年经验设计师教你如何寻找高质量素材

优点:风格独特,质量高,分类明确

缺点:数量不多

推荐指数:★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

9、http://www.sozai-page.com(日本食物类网站)

10、https://www.foodiesfeed.com(美食)

11、https://www.sitebuilderreport.com(一次性搜索31多家免费可商用图片的网站)

二、字体

1、https://fontsup.com

10年经验设计师教你如何寻找高质量素材

提供大量免费的英文字体,质量很高,也很有特色,每个字体还有一个详情页,非常用心

10年经验设计师教你如何寻找高质量素材

优点:种类多,质量高,免费下载

缺点:加载稍慢,广告有点多

推荐指数:★★★★ 4.5

2、http://www.myfonts.com

10年经验设计师教你如何寻找高质量素材

网站提供的商业字体,质量很高很漂亮,数量也很多。

10年经验设计师教你如何寻找高质量素材

优点:种类多,质量高

缺点:付费

推荐指数:★★★★ 4

3、http://comicneue.com

10年经验设计师教你如何寻找高质量素材

免费手写可爱字体下载

优点:质量高,字体可爱

缺点:数量较少,下载稍麻烦

推荐指数:★★★★ 3.5

4、http://www.zhaozi.cn

10年经验设计师教你如何寻找高质量素材

找字网,种类丰富,基本上可以找到市面上的所有字体。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,方便查阅

缺点:使用时注意商用版权,仅中文字体

推荐指数:★★★★ 4

5、http://www.17ziti.com

10年经验设计师教你如何寻找高质量素材

综合性字体下载网站,里面包括英文字体、中文字体,甚至是手机字体。数量很多,唯一不足就是没有注明版权范围,所以商用的时候要注意。

10年经验设计师教你如何寻找高质量素材

优点:覆盖中英文字体、种类多

缺点:网站广告稍多,没有注明版权范围

推荐指数:★★★★ 4

UI设计素材

一、图标类

1、http://www.iconfont.cn

10年经验设计师教你如何寻找高质量素材

阿里妈妈MUX倾力打造的矢量图标管理、交流平台,内含一百多万个图标!

设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

10年经验设计师教你如何寻找高质量素材

优点:种类丰富,质量超高,免费下载,中文界面,阿里旗下

缺点:不能打包下载、需注册

推荐指数:★★★★★ 4.5(满分5星,下同)

2、https://www.flaticon.com

10年经验设计师教你如何寻找高质量素材

大型图标网站,里面拥有将近50万个图标,一万多个图标集!种类丰富,质量超高,且支持在线编辑。

优点:种类丰富,质量可靠,免费下载

缺点:英文搜索,加载稍慢,打包下载需注册(科学上网)

推荐指数:★★★★★ 4.5

3、http://fontello.com

覆盖绝大部分网上可能应用到的图标,也就是说任何你需要的网站类图标都可以在这里找到。

优点:网站图标齐全,质量高,免费下载

缺点:加载稍慢,仅有黑白图标

推荐指数:★★★★ 4

4、https://thenounproject.com

拥有一百多万个图标的大型图标网站,而且图标都是由全世界各地设计师设计,质量非常高!而且里面有很多有趣的图标,例如下面鸟笼类图标集,非常卡哇伊!

优点:种类丰富,质量超高,免费下载

缺点:英文搜索,加载慢,不能打包下载

推荐指数:★★★★ 4

5、https://icomoon.io

聚合类图标网站,里面集合了不同网站的不同图标,付费免费都有,种类超多。

优点:种类丰富,质量一般,免费下载

缺点:英文搜索,加载超慢,操作复杂

推荐指数:★★★★ 3.5

6、https://useiconic.com/open

7、http://dryicons.com/free-icons

8、http://www.iconarchive.com

9、http://www.entypo.com

10、http://glyphicons.com

二、其他

1、UIKIT.ME

10年经验设计师教你如何寻找高质量素材

各种免费高质量UI资源下载,Sketch、PSD甚至AE素材都有!

这个网站除了提供高质量的素材以外,还提供超人性化的下载方式:(百度云)

10年经验设计师教你如何寻找高质量素材

优点:质量高,免费下载

缺点:种类少,部分素材有重复

推荐指数:★★★★ 4

2、TOSKETCH.COM

10年经验设计师教你如何寻找高质量素材

网站给我的感觉就是干净,高大上!里面提供了工具包,网页,移动,模型和图标等其他素材,而且这些素材都有一个特点,就是质量高且新鲜!所有素材都是上传的,这个有点了不起。

10年经验设计师教你如何寻找高质量素材

优点:质量超高,更新快,中文界面,百度云下载

缺点:只提供Sketch资源

推荐指数:★★★★ 4

3、UI8.NET

10年经验设计师教你如何寻找高质量素材

U18是设计素材圈的网红,提供大量漂亮的超高质量商业设计素材,但并非免费,绝大部分都需要付费。

10年经验设计师教你如何寻找高质量素材

优点:质量超高、数量丰富、界面清爽

缺点:付费(充值是个问题),加载稍慢,下载稍麻烦

推荐指数:★★★★ 4

4、PRINCIPLEREPO.COM

10年经验设计师教你如何寻找高质量素材

高质量Principle原型和动效设计资源的网站,特别是动效,每一个都非常漂亮,很有参考价值。

优点:质量高,数量丰富,免费下载

缺点:加载很慢,只有动效资源

推荐指数:★★★★ 3.5

5、UISHE.CN

10年经验设计师教你如何寻找高质量素材

UI社,网站提供主题包、图标、界面和样机素材等素材,属于综合性的素材下载网站。因为国内的网站,大家不用担心加载慢等问题啦。

优点:种类很多,质量高,下载方便

缺点:付费

推荐指数:★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面设计素材

1、千图网(www.58pic.com)

国内大型素材网站,素材几乎覆盖所有类目、广告设计、电商设计和办公室素材等。逢节假日都有提供主题素材提供下载,且质量很高!

优点:种类超多、质量高、免费下载、主题分类

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

2、包图网(http://ibaotu.com)

包图网,大型素材下载网站。全网站提供原创免费可商用的素材下载,种类齐全且质量超高,每日更新1000张!

10年经验设计师教你如何寻找高质量素材

优点:种类齐全,质量超高,免费下载,全站正版可商用

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

3、千库网(http://588ku.com/)

10年经验设计师教你如何寻找高质量素材

大型素材网站,可能是国内唯一一家专业设计师提供免抠图PNG素材,全站2000万+高质量素材无限下载,推荐!

10年经验设计师教你如何寻找高质量素材

优点:种类多,专业提供免抠PNG源文件

缺点:非会员每日有数量限制

推荐指数:★★★★ 4.5

另外国内还有付费的昵图网和我图网,免费的有站长素材等等素材网站,数量很多这里就不一一举例了。

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为主的产品,正所谓内容为王,吧啦吧啦,算了不说了,投稿去了。

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

博博


我是你们的学霸姐 2018-04-20 14:19:23

在学软件操作的时候,要说什么最繁琐?那当然是软件操作的指令了。

学霸姐姐在网络上搜集许久,终于搜集完整了快捷方式的图解!今天就用图解的方式帮助大家将快捷方式一网打尽!

UI设计需要学习的主体软件:Sketch,PS,AI,AE,每一个软件的快捷方式都用图表总结的方式送给大家,希望大家喜欢。

这么全的快捷方式,还不快快收藏转发?

如果有喜欢UI设计的同学,可以私信学霸姐姐:UI设计,即可领取超过600G的UI设计零基础高清教学视频,学霸姐姐会一一回复的!

快快行动起来,将快捷方式转发给你的同学朋友们吧!

  1. SKETCH

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

2.PS

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

3.AI

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

4.AE

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

用智能化登录页面提升数字营销转化率,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专注于提高数字营销效率这个细分领域,并且可以在不需要外部或技术资源的情况下进行更精准的广告活动,创造了令人印象深刻的产品。”


设计规范|Web端设计组件篇—文本与选择器

博博


人人都是产品经理 2018-04-23 00:00:00

本文作者主要讲解表单中的文本和选择器,enjoy~

设计规范|Web端设计组件篇—文本与选择器

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

设计规范|Web端设计组件篇—文本与选择器

表单在网页中主要负责数据采集功能;用户需要填写输入数据并且提交到数据库,则这种组件就是表单类。

本文主要讲解表单中的文本和选择器,其中文本分为input短文本、InputAutocomplete 短文本联想和InputMultiline 长文本。

input 短文本

定义:用于用户文本输入,并以字符串的方式提交到数据库。

使用场景:

  1. 用户需要输入字符时
  2. 通过鼠标键盘输入内容
  3. 输入的文本通常置于输入框

例如网易考拉优惠券兑换的表单填写,就是短文本输入组件,前面是标题,后面是文本输入框。

设计规范|Web端设计组件篇—文本与选择器

input短文本组件的展示形式可以分为三类。第1类是标题和输入框左右排列;第二类是标题和输入框上下排列;第三列不需要标题的排列。

标题和输入框左右排列时,短文本组件存在的状态有:初始态、激活态、报错态、完成态和禁用态。

设计规范|Web端设计组件篇—文本与选择器

常见的表单类排版都是左右排版,同时表单之间,标题采用左对齐,输入框左对齐的情况比较多。有时候标题名字过长这样话 左右排列就不够好,这时候需要采用上下排列。

设计规范|Web端设计组件篇—文本与选择器

标题和输入框上下排版时,存在状态和左右排列是一致的。

设计规范|Web端设计组件篇—文本与选择器

当没有标题时,存在状态同左右排列的规则和逻辑。

设计规范|Web端设计组件篇—文本与选择器

InputAutocomplete 短文本联想

定义:用户用于文本输入,在输入过程中会联想匹配文本选项,并以字符串的方式提交到数据库。

使用场景:

  1. 需要用户输入文本时。
  2. 提供联想匹配文本,减少用户输入成本。
  3. 在输入过程中根据用户输入的内容,出现匹配选项,提交的数据是文本而非枚举项。

例如百度搜索,在输入框输入关键词时会出现对应的联想匹配文本。

设计规范|Web端设计组件篇—文本与选择器

和input短文本组件相比,InputAutocomplete 短文本联想唯一的不同就是新增了联想匹配选项,并且提交的是文本而非枚举项。

标题和输入框左右排列时,InputAutocomplete 短文本联想组件存在的状态有:初始态、激活态、报错态、完成态和禁用态。

设计规范|Web端设计组件篇—文本与选择器

上下排列的状态和规则逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

不含标题的状态和规则逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

InputMultiline 长文本

定义:用户用于长文本输入,并以文本的方式提交到数据库。

使用场景:

  1. 多段文字输入
  2. 需要换行
  3. 输入的文本通常置于输入框中

例如新浪微博,在输入框发微博时,就是长文本输入,可以换行。

设计规范|Web端设计组件篇—文本与选择器

标题和输入框左右排列时,InputMultiline 长文本存在的状态有:初始态、激活态、报错态、完成态和禁用态。在输入过程中一般有字数统计,超过限制字数,不允许用户输入。

设计规范|Web端设计组件篇—文本与选择器

上下排列逻辑和规则同左右排列。

设计规范|Web端设计组件篇—文本与选择器

不含标题的逻辑同左右排列。

设计规范|Web端设计组件篇—文本与选择器

select 选择器

定义:用户通过选择枚举项,提交到服务器。后端存储为枚举项。

使用场景:

  1. 弹出一个下拉选项给用户选择操作
  2. 当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

例如淘宝卖家后台筛选订单的状态时,点击选择器,出现下拉列表。这就是一个常见的选择器,选择器分为多选和单选两大类。

设计规范|Web端设计组件篇—文本与选择器

下图为选择器基本样式,就是简单的下拉选项,不可进行关键词的搜索。

设计规范|Web端设计组件篇—文本与选择器

下图是可以搜索的选择器,当输入框处于激活态时,浮出下拉列表。在输入过程中,出现匹配枚举项,点击枚举项,则输入的关键词清空,同时下拉选项收起。输入框出现选择的选项。

设计规范|Web端设计组件篇—文本与选择器

有时候存在一个场景。用户对需要填写的选项设为空选项,则需要空值的选项。

设计规范|Web端设计组件篇—文本与选择器

有时候存在一个场景。用户选择了一个选项,但是后面想去掉选择的选项,不进行选择。

设计规范|Web端设计组件篇—文本与选择器

选择器多选组件中需要注意的一点就是:用户在输入关键词中,选择对应下拉选项,则输入的字符串清空,同时出现该选项tag。

设计规范|Web端设计组件篇—文本与选择器

Loading设计思路分享

博博


UI妹儿 2018-05-04 10:44:21

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

Loading设计思路分享

Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?

Loading设计思路分享

Loading种类:

1.状态类(进度条):通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成。

状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。

By Piotr Adam Kwiatkowski

2.无状态类(菊花):通常数据量比较小,客户端无法预知加载量。

Loading设计思路分享

无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。

无状态类的Loaing如有需要可以做的特别一些:https://dribbble.com/search?q=loading

我们的App需要一个无状态的Loading。

我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。

Loading设计思路分享

相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。

Loading设计思路分享

既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:

我尝试去直接模仿抛弃的运动,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。

为此我们搜索了一下现实中的扔球效果:

Loading设计思路分享

经过分析我们得出了第一条小球的运动路经是一个无限的符号。

工作路经确定后,导入C4D中进行单球运动轨迹测

由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动

发现问题:小球在中心焦点位置出现明显卡顿

起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。

Loading设计思路分享

调整节点

通过调整节点后,不难发现,中心焦点处的卡顿明显不见了

为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。

看起来怪怪的。。。。。

为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在

三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。

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

界面欣赏

博博

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

    万聚制作 2018-05-15 13:30:00

素材源自网络

这是我们收集UI / UX交互的一周时间,以增强您的用户界面灵感。我们专注于酷炫的动画,布局设计,用户体验思考等等。我们正在从静态,动态甚至是现场原型混合它,这可能是一个伟大的每周系列书签!本周,我们对交互/转换的关注较少。本周我们一直在挖掘一些动画,但我们发现的主要是静态的。我们有各种各样的组合,恰到好处地为您提供创意提升。

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

用户界面灵感:国外设计大神UI设计作品欣赏,每一张都是壁纸!

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

日历

链接

个人资料

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

存档