首页

如何搭建 B 端设计规范

雪涛

在B端产品设计中,有效的设计规范有利于降低团队沟通成本,提高开发效率,并在一定程度上保证产品应用的一致性,最终推动产品设计的优化。本篇文章里,作者总结了从0开始搭建B端设计规范的注意事项与策略方法,一起来看一下。


前言

哈哈哈哈,最近事情太多了,已经快三个月没更新了,现在也忙的差不多了,咱们更新继续~~

今天给大家分享的是关于如何从零开始搭建 B 端设计规范

时间转眼即逝,掐指一算,我接触 B 端已有 4 年之久了,当年刚接触的时候,B 端的从业人员比例还是很少的。近两年 B 端越来越火热,无论从设计风格还是产品数量上,都有了很大的提升。

随着 B 端的产品越来越完善,要求设计师的专业性也要越来越强。设计规范作为基础中的基础,是大家都要熟练掌握的技能,我们不仅要会运用各种规范,还要会撰写适合产品的规范。

分享开始,敲黑板~~

一、设计规范的目标

在搭建设计系统之前,我们要想清楚设计规范的目标是什么?使用者是谁?

  • 目标:保持产品风格统一性提高设计输出效率减少无效沟通
  • 使用人群:UI交互前端测试。

如何搭建 B 端设计规范

二、设计原则

设计规范要符合基本的设计原则,否则你的规范会杂乱无章。这里我总结了 6 条原则供大家参考。

如何搭建 B 端设计规范

  1. Unity(统一性):页面风格、色彩、布局等要保持全局统一,不可为了某一功能的美观而去破坏整体性。
  2. Accessibility(易用性):易用是首要考虑的因素,能一步解决的事情绝不两步。
  3. Proximity(亲密性):如果信息的关联性强,则他们的距离就要相应的缩短,让他们看起来是一个视觉单元;反之,则距离要加大。要让用户对信息的区域划分一目了然。
  4. Alignment(对齐原则):在界面中,将元素进行对齐,即符合用户的认知,也可以引导视觉流向,让用户更加流畅地阅读信息。
  5. Contrast(对比原则):对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。
  6. Repetition(重复原则):相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。

三、框架布局

这里一般采用栅格布局。说到栅格,有好多小伙伴又要再回顾一下知识点了。我今天再把栅格知识帮大家复习一遍,如果之前不是很了解栅格的,拿个小本本记下来,要考~~

栅格布局能够适应各种屏幕尺寸及分辨率,确保整体布局的一致性。

栅格建议使用 1、2、3、4、6 切分布局,可以进行多种布局组合,并在整个设计中保持布局的结构的一致性。

如何搭建 B 端设计规范

页面中一般采用 24 列自适应网格,你可以使用它为各种屏幕尺寸创建灵活的布局。

如何搭建 B 端设计规范

边距 Margins、列 Columns、间隔 Gutters 分别是什么?

如何搭建 B 端设计规范

边距 Margins:边距是内容与左右边缘之间的空间。

控制台内容区的边距选用 8 的倍数为设定值,一般采用 16/24px 的居多。

如何搭建 B 端设计规范

需要注意的是:

  • 减去 margin 后,列在页面区域均分,保证每列的宽度是一致的;
  • 在区域有 margin 的情况下,划分列的区域不能包含 margin。

如何搭建 B 端设计规范

列 Columns:在电脑端列的数量是个常量(24列),每一列宽度的尺寸随屏幕大小进行自适应调整。

如何搭建 B 端设计规范

间隔 Gutters:间隔是列与列之间的空隙,控制台产品 gutter 使用固定值也要是 8 的倍数,一般采用 16/24px。

如何搭建 B 端设计规范

需要注意的是:

  • 布局的左右两边的分界线 gutter 可以为 0;
  • 必须保证 column 的宽度是一致的。

如何搭建 B 端设计规范

边距 Padding:padding 指一个元素的内容和其边界之间的空间,padding 最小值是 4px,然后其余均为 8px 的倍数,建议值为 8/16/24px。

如何搭建 B 端设计规范

内容区定宽:此场景常用于用户欢迎页、结果页等需要将内容区宽度设置为固定值的页面。此时 column 和 gutter 保持不变,根据页面宽度改变 margin 的值。

如何搭建 B 端设计规范

四、设计风格

1. Color(颜色)

色彩内容主要包含基础色(如品牌色、黑色、白色)和功能色(如链接色、提醒色等)。图表配色为单独的配色体系。

在前期制定颜色规范的时候,精益求精的设定颜色,切忌颜色过多。

颜色的状态色尽量用原色进行转换,设置一个合理的变色公式,让所有颜色的状态色都根据这个公式进行转换。例:

  • Hover:H不变 S加10 B减5
  • Click:H不变 S加20 B减10
  • Disable:HSB均不变,不透明度 30%

在设计规范中,尽量把颜色的色值和 rgba 值都写出来(这里是强迫症患者要标的,因为有时候色值完全一样,但 rgba 数值略有不同,虽然效果一样,但是对于强迫症的你来说,舒服吗)。

状态色有 4 状态色:Normal、Hover、Click、Disable

在设定图表颜色的时候,要考虑不同的使用样式(柱状图、环形图、饼图等……),同时也要考虑它的延展性,比如你设定 12 个 chart 色值,在使用的时候按着顺序来使用,当超过 12 个后可以为同一个颜色。

2. Font(文字)

设定统一的字体规范,使用非衬线字体在各个操作系统下都有最佳展示效果。

首先,要设置一个字体家族,保证产品界面的最优展示。

例如(仅作为展示,不是建议):font-family: “Chinese Quote”, -apple-system,BlinkMacSystemFont,“Segoe UI”,“PingFang SC”,“Hiragino Sans GB”,“Microsoft YaHei”,“Helvetica Neue”,Helvetica,Arial,sans-serif,“Apple Color Emoji”,“Segoe UI Emoji”,“Segoe UI Symbol”。

1)字号

现在主流的产品中,主体字为 12px / 14px 的居多,可根据自身的产品定位以及用户的习惯进行设定。字号不要出现奇数,否则在一些显示器上会有对不齐像素的状况发生。

2)行高

行高常规的有两种规范:

  • 字号+8px;
  • 1.5倍 / 2倍 * 字号。

如何搭建 B 端设计规范

我喜欢用第一种,就是字号大小 + 8px 作为行高的规范。行高是不可被忽略的重要细节之一,因为在算间距的时候,行高是要被算进去的。

3)字重

字重有很多,但是在真正的产品使用中,字重尽量不要太多种,2~3 种即可。

4)字体颜色

字体颜色数量建议在 3~4 个,不宜过多,但是每个层级之间区分要大一些。

文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰;最佳对比度为 7:1。

测试对比度的网站:https://contrast-ratio.com

WCAG 2.0 中将颜色对比等级分为 3 种,A级、AA级、AAA级,等级越高意味着颜色的对比度越高,呈现出来的视觉压力越大。

  • A级:对比度 3:1,是普通观察者可接受的最低对比;
  • AA级:对比度 4.5:1,是普通视力损失的人可接受的最低对比度;
  • AAA级:对比度 7:1,是严重视力损失的人可接受的最低对比度。

3. icon(图标)

设定统一的图标使用规范,让视觉效果更和谐。

1)icon 大小

icon 的常用尺寸有很多,需要注意的是 icon 的大小中,相邻的两个尺寸至少相差 4px,否则你会在后期用的时候会有选择困难症。

同时功能 icon 尽量贴边或尽量贴边绘制,保证展现的视觉统一性(操作 icon 除外)。

单独 icon 使用的时候,尽量不要太小,最小值建议为 12px。

2)icon 热区

icon 的热区经常被设计师和开发所忽略,本身 icon 的尺寸一般就很小,再加上如果没有设置热区的话,操作体验极差。

所以一定一定要设置 icon 的热区,设置的值我建议为 icon 大小的 2倍。例:icon 大小为 14 * 14px,则热区大小为 28 * 28px。

如何搭建 B 端设计规范

4. size(尺寸)

页面内布局间、模块间、模块内的各部件距离。

尺寸大部分规范中都用的是 8 的倍数,不用纠结,直接用就行。我这里有个公式:Sn = 8px * n,n为正整数。

特殊:最小支持4px。

如何搭建 B 端设计规范

五、交互

交互我分为两个方面:交互方式交互状态

1. 交互方式

交互方式指的是对某一个操作所进行的具体行为,比如刷新方式有下拉上滑按压点击等方式,这就是所谓的交互方式。交互方式有很多种,没有最优,只有最适合。

交互方式要保持产品的统一性,同类别的交互不可有不同的操作感受。同时交互方式要符合大众的认知习惯,可创新但不可违背潜意识。

随着时代的发展,交互方式也在不断的更新。比如最开始的手机是按键式的,随着大众对屏幕大小的需求不断提升,到了现在的全面屏手机,如果这个时候你再去做当年火爆的按键手机,那你就只能跟市场说拜拜。

总结交互方式的几个关键点:创新统一紧跟趋势

2. 交互状态

一个完整的产品生态是不会遗漏每一个交互状态的。

同样是做售票的软件,为什么高铁管家就比 12306 做的好呢?是因为高铁管家把很多交互状态友好地做了展现反馈,而不是冰冷的数据吞吐。

同类产品中,每个都有自己独特的交互状态,可能你一直用某个软件的原因只是有个功能的交互状态打动了你,从此你就深深爱上了它。

现在工作中,我们都在讲人效,拼命地去更新迭代,去研发新功能,开拓新产品,往往会忽略交互状态这个点,因为很多时候付出收获比是很低的,但是真正好的产品,这部分是不可或缺的。

交互真的太大了,单独写一篇文章都写不完,这篇我只能抛砖引玉,勾起你的思维,如果有任何要探讨的,欢迎来叨扰。

六、引导

引导分为 5 种:Newbie guide(新手引导)Steps guide(步骤引导)Help / Operation guide(帮助/操作引导)New function guide(新功能引导)Blank guide(空白页引导)

1. Newbie guide(新手引导)

新手引导是针对新用户的,首次进入产品的时候,我们要着重地把自己产品的亮点以及操作快速的介绍给新用户,让他用最短的时候上手我们的产品。

新手引导要言简意赅,并且如果非必要的话,尽量给用户一个可以直接关闭的按钮,让用户有选择权。我就非常讨厌有一些产品的新手引导,必须走完全部流程后才能关闭,恶心得不行。

如何搭建 B 端设计规范

2. Steps guide(步骤引导)

步骤引导一般用在有固定操作步骤的场景下,指引用户一步一步地完成想要的结果。常规的步骤引导建议在 3~5 步之间为合理。

如何搭建 B 端设计规范

3. Help/Operation guide(帮助/操作引导)

帮助/操作引导的展现方式是比较丰富多彩的,可以是提示语、辅助性文本、tooltips 等等,它的作用就是辅助用户去了解并且知道如何操作这个功能。

这个也是在产品中使用频率最高的,运用好它,可以让你的产品事半功倍。

4. New function guide(新功能引导)

它就是常用在新功能上线后,用户第一次登陆相关页面后做的一些引导,目的是为了告诉用户我们做了新东西,你快来试试吧。

如何搭建 B 端设计规范

5. Blank guide(空白页引导)

空白页引导一般用在在缺省页,对用户进行一些操作指引,让无信息的页面变得更有价值。

比如百度在一些缺省页上就放了一些关于失踪儿童的信息,就因为做了这个引导,帮助了千万个家庭找到了失散的孩子。

如何搭建 B 端设计规范

七、组件

组件是设计系统里面最为庞大的东西。组件可以分为了 5 类:

  1. Navigation(导航);
  2. Data Entry(数据录入);
  3. Data Display(数据显示);
  4. Feedback(反馈);
  5. Other(其它)。

基本上这几类已经覆盖了多数的组件,下面我把我自己整理的这几类分别都包含哪些组件、以及组件的简单介绍给列出来,快来保存吧。

1. Navigation(导航)

  • Affix(固钉):将页面元素钉在可视范围。
  • Breadcrumb(面包屑):显示当前页面在系统层级结构中的位置,并能向上返回。
  • Menu(导航菜单):为页面和功能提供导航的菜单列表。
  • Pagination(分页):采用分页的形式分隔长列表,每次只加载一个页面。
  • Steps(步骤条):引导用户按照流程完成任务的导航条。

2. Data Entry(数据录入)

  • Checkbox(多选框):可选择多个。
  • Radio(单选框):只可选择一个。
  • Switch(开关):开关选择器。
  • Form(表单):具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
  • Input(输入框):通过鼠标或键盘输入内容,是最基础的表单域的包装。
  • Select(选择器):下拉选择器。
  • Skeleton(加载占位图):在需要等待加载内容的位置提供一个占位图。
  • Time selectors and sliders(日期时间选择过滤器):当用户需要输入一个时间或日期,可以点击标准输入框,弹出时间面板进行选择。
  • Transfer(穿梭框):双栏穿梭选择框。
  • Upload(上传):文件选择上传和拖拽上传控件。

3. Data Display(数据显示)

  • Badge(微标):图标右上角的圆形徽标数字。
  • Card(卡片):通用卡片容器。
  • Collapse(折叠面板):可以折叠/展开的内容区域。
  • Popover(气泡卡片):点击/鼠标移入元素,弹出气泡式的卡片浮层(可操作)。
  • Tabs(标签页):选项卡切换组件。
  • Table(表格):展示行列数据。
  • Tag(标签):进行标记和分类的小标签。
  • Timeline(时间轴):垂直展示的时间流信息。
  • Tooltip(文字提示):简单的文字提示气泡框。
  • Tree(树形控件):文件夹、组织架构、生物分类、国家地区等等,世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系,并具有展开收起选择等交互功能。

4. Feedback(反馈)

  • Alert(警告提示):警告提示,展现需要关注的信息。
  • Notification(通知提示框):全局展示通知提醒信息。
  • Drawer(抽屉):抽屉从父窗体边缘滑入,覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务,操作完成后,可以平滑地回到到原任务。
  • Modal(对话框):模态对话框和非模态对话框。
  • Progress(进度):展示操作的当前进度。
  • Spin(加载):用于页面和区块的加载中状态。

5. Other(其它)

  • Button(按钮):按钮用于开始一个即时操作。
  • chart(图表):图标数据显示。
  • Copyright(版权):版权信息。
  • Divider(分割线):区隔内容的分割线。
  • logo(标志):logo 的使用。
  • LocaleProvider(国际化):为组件内建文案提供统一的国际化支持。
  • Text link(文字链):点击有链接跳转的文字。
  • Scrollbar(滚动条):在特定界面区域内进行内容的更多展示。

以上组件可根据自己的产品进行增删,把组件规范设计完成后,整个设计规范就完成了 90% 以上,可以算一个比较完整的设计规范了。

八、总结

每一个设计规范都是有灵魂的,规范是为了更好地做设计,而不是限制设计师双手的枷锁。

设计规范也不是一成不变的,它在落地使用的时候多少都会有问题,需要慢慢地去反复检验规范的合理性,发现不合理的及时更正。


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

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


文章来源:人人都是产品经理   作者:友设青年

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

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



想打好品牌年轻化的战,就要让年轻群体先看到你

雪涛

在当下市场,年轻人是消费的主力人群。抓住年轻人就等于抓住了市场,不少品牌们也纷纷开始“年轻化”。要想打好品牌年轻化的战,我们应该怎么做呢?


现在我们很多“老”品牌企业为了能够抓住年轻人的胃口,都在争先恐后的讨好着年轻消费者。在移动互联网的冲击下,通信路径、通信方式和文化环境都发生了重大变化。

市场不再欢迎我们习以为常的老办法。面对新时期的消费者和新市场的消费环境,品牌也面临着年轻化的问题。重复的市场,让品牌必须处理的手段,就是所谓的八仙过海,各显神通。

校果在与大部分中小企业品牌的前期沟通过程中可以发现,很多品牌都想通过自己不断地年轻化迭代,保持一个品牌活力,不被“新”时代的消费者抛弃。

传统品牌洗心革面,不遗余力地争夺年轻人的市场,但总是做不到自己想做的事情。品牌年轻化固然重要,但许多品牌往往误解了这件事的实质和核心,因为选用品牌年轻化存在一些误区。

01 让年轻用户看到,所以品牌需要年轻化

品牌通常是年轻人看到、俘获年轻消费者的年轻化推广,听起来合情合理,但其实并不是所有品牌、所有行业都需要品牌年轻化。

品牌年轻化并不是最终的目的,品牌的年轻化需要甄选行业。对于品牌而言,品牌年轻化的首要条件就是,确认品牌到底有没有年轻化的必要,年轻化所需要的解决的是什么商业课题,TO B企业就不一定会适合做年轻化,因为对于TO B企业来说给客户带来的关键词是安全感、信任感、专业度,所以这类品牌做年轻化的意义并不大。

而对于一些快消品来说,品牌的年轻化就格外的重要了,因为年轻化能够帮TOC端的品牌获得用户感知、流量获取、产品销售等一系列的问题。

所以说,品牌的年轻化其实是一个伪命题。品牌年轻化只是一个品牌的表面策略而已,核心技术仍然是企业品牌在新的内部控制外部市场环境下的商业述求。

在年轻消费者购买力越来越强,资讯信息接收更广的背景下,品牌不论是社交平台的亲民互动,营销活动的事件热点,潮流风向的跟进,情感与态度的表达等等这一整套的传播动作背后所要解决的商业课题是:如何让品牌的产品提升新增且值得的溢价。

02 品牌年轻化就是传播现代化

对于普通用户而言,能感知到的品牌年轻化动作通常在传播层面上,但对于整个品牌而言,传播的年轻化可能是最表面的一个维度。卫诗媒体认为,消费者对品牌复兴的感知有三个维度:

1. 第一个维度便是传播维度,我们今天所认识的“双微一抖”的内容输出

社交网络平台上品牌人格化的定位等等,都是一个基于信息传播层面上的东西。

传播层面也是品牌首先调整的层面,在互联网信息大爆炸的时代,年轻消费者每天接触的信息往往一扫而过,这就要求着品牌在传播和营销策略上有着高质量+高频+有态度的输出,这样用户才会去主动的关注你传播的内容。

2. 第二个维度是视觉维度,也就是产品的吸引力

这个维度可以让消费者感觉更直观,比如产品包装,各种视觉表达效果等。在营销中,内容的情感表达是到位的,他们看到产品的那一瞬间是不能被打乱的,所以前面所有的辛苦营销都是白做的。

年轻的包装可以给消费者带来不同的感官体验,如果你的品牌包装或十多年的美学包装,年轻的消费者可以直接感受到品牌的变化…当然,如果能像椰汁一样可以坚持发展自我,独树一帜形成具有强烈的品牌设计风格那更好。

所以,传统文化品牌在视觉上的焕然一新并不是一个追求一种视觉上的颠覆,品牌企业一方面我们需要进行更新自己产品的视觉体验,同时教师也要保留品牌曾有的独特性,更需要的是在品牌价值属性上做视觉审美的升级,而不是全盘否定过去社会形态。

3. 第三个维度是产品维度,也就是真正决定年轻消费者买不买账的关键

品牌的年轻化发展不仅可以仅是企业营销、包装的文章,而是让你的产品进行更加的符合学生新用户群体的需求。比如食品行业,年轻人将需要更多的绿色、环保、健康的食品,品牌年轻化是为人们提供当前生活方式和价格的关键。

其实,品牌年轻化也会涉及到企业的管理、过程,因为对于品牌的年轻化而言,问题不仅仅是指传播或者审美变革。

甚至会考虑,品牌产品进行年轻化发展改革,品牌管理公司员工年轻化的变革等等的细枝末节,真正的年轻化往往会选择需要伤筋动骨。但只要狠得下心,往往会涅槃重生。

正因为如此,当我们帮助品牌走向年轻化的时候,通常从三个方面帮助消费者:

  1. 从品牌战略和营销战略进行调整和改革;
  2. 有助于品牌年轻化的设计,同时保留品牌的独特性;
  3. 从传播层面进行传播策划,搭建与年轻人交流的平台。这样才能找到自己的公司进行全方位的转型升级。

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

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


文章来源:人人都是产品经理   作者:校果研究院

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

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



产品反馈:构建以客户为中心的产品的指南

分享达人

与客户的对话和反馈是产品成功的关键要素。然而,研究表明,42% 的公司不调查其客户或收集反馈。

伟大的产品不是凭空打造的——您需要一个持续的过程来从用户那里获取反馈,以指导您的产品路线图、调整消息传递并保持满意度水平的脉搏。

什么是产品反馈?

产品反馈是您的用户分享的有关他们对产品的体验和满意度的任何信息。您可以通过各种研究方法收集产品反馈,例如用户访谈、客户调查、评估客户支持票等。

产品反馈的 3个主要好处

虽然积极收集和分析产品反馈有很多好处,但可以总结为三个主要好处:

A. 改善客户体验和满意度

B. 优先考虑产品路线图并验证新想法

C. 打造成功的产品

让我们更详细地看看它们。

1. 提升客户体验和满意度

为用户提供出色的客户体验不再是一种独特的优势——这是意料之中的。产品发布后,收集产品反馈可帮助您识别任何问题,收集有关要添加或改进的新功能的信息,并找到帮助用户充分利用其体验的方法。

支持票通常擅长揭示需要尽快解决的重复问题。如果一个问题多次出现,那么您就会知道它困扰着您的大部分客户群。此外,净推荐值 (NPS)或客户满意度得分 (CSAT) 等调查是产品反馈的重要来源,可以帮助您了解如何改善客户体验。

2. 优先考虑产品路线图并验证想法

收集用户的反馈有助于产品经理确定产品路线图的优先级,并根据实际用户需求做出明智的决策。

您可以收集关于功能想法的反馈并量化数据以了解哪些是最需要的。

3. 打造成功的产品

如今,最好的产品是基于与日复一日使用您产品的人(您的客户)的持续互动和用户体验而构建的。客户期望的上升意味着企业必须不断收集和识别客户需求,以构建能够解决实际存在的问题的产品。

产品反馈是一种很好的机制,通过它可以从用户那里获取见解,并将其纳入您的决策过程。无论是通过征求还是主动提供的反馈,倾听用户的意见将确保您能够始终如一地交付价值。

产品反馈:类型和方法

您可以使用多种产品反馈方法来设置产品反馈循环并让您的客户与您取得联系。

通常,产品反馈可以是征求的,也可以是主动提出的:

A. 征求反馈是指您要求用户提供反馈。这可能是向您的客户群发送调查或与用户进行访谈。

B. 不请自来的反馈是用户在没有被要求的情况下分享的任何类型的反馈。例如,他们可能会在网上发表评论或在社交媒体上分享评论。

当用户在您的产品中遇到问题、要求新功能或需要帮助完成某事时,通常会出现不请自来的反馈。

另一方面,通过征求反馈,您需要为用户提供背景信息并提出正确的研究问题。根据您的团队需要反馈的内容,以下是您可以用来收集征求的产品反馈的方法的概要:

1) 调查

2) 客户访谈

3) 产品分析

4) 专门小组

5) 客户支持对话

6) 销售和客户沟通电话

让我们更详细地看一下前三个。

1. 调查

调查是一种有效的研究工具,可为您提供针对各种用例的特定产品反馈:分析新发布的性能、在开始构建过程之前验证想法和新概念、测试产品消息传递等。

大多数反馈调查使用开放式和封闭式问题的组合。在创建和发送调查时要记住几个最佳实践,即:

A. 避免引导性问题,例如“您有多喜欢使用该产品?” 相反,请让您的用户提供有关他们体验的详细信息,而不要引导他们做出肯定或否定的回答。

B. 保持简短:注意受访者提供反馈的时间和意愿。在调查中包含的问题不超过五到七个,以使其相对简短,并且仍然可以获得可操作的反馈。

C. 使用开放式和封闭式问题的组合。太多的开放式问题将导致调查时间过长,因为参与者必须为每个问题输入答案。另一方面,仅由封闭式问题(如是/否问题)组成的调查只会为您提供定量数据,而不会揭示参与者给出这些答案的原因。将这两种类型的问题结合起来可以创建有效的调查。

2. 客户访谈

客户访谈是一种通用的研究方法,可以在整个产品开发过程中获得有见地的反馈。从进行最初的设计研究到获得发布后的反馈——与用户交谈总能产生新的见解。

对于产品营销人员来说,访谈是一种有用的方式来获取有关新产品或功能的消息传递的信息。

3. 产品分析

产品分析是了解产品性能和改进方式的绝佳来源。产品分析对产品经理和营销人员都很有用,可以帮助您了解用户在做什么与他们所说的相比,这可能并不总是相同的。

如果您在发布之前进行了定性测试,产品分析可以帮助您验证您的初始假设。

此外,产品分析是识别产品中严重问题的良好来源。例如,衡量留存率之类的分析可以让您随着时间的推移跟踪它或将比率与行业标准进行比较。当任何异常发生时,数据是进行更多研究以了解问题所在的起点。

创建产品反馈循环的重要性

您可以使用多种方法来收集产品反馈,从我们上面看到的三种方法到社交媒体监控、客户支持票、销售电话、客户沟通电话等其他方法。更重要的是创建一个流程,通过该流程,反馈始终如一地到达您的组织并被采取行动,从而征求更多用户反馈。这也称为产品反馈循环。

反馈循环是一个迭代过程,其中从客户反馈中收集的见解被实施到产品开发过程中,并用于在一致的基础上为产品决策提供信息。随着新的反馈影响新的产品策略,这个过程会无限重复,而变化会促使客户提供额外的反馈。

这种持续不断的客户反馈将帮助您把握客户满意度的脉搏,并在您和您的客户之间建立一个开放的渠道。

如何收集好的反馈

并非所有反馈都是平等的,或者就此而言——有用。就像进行任何其他研究方法一样,收集很好的反馈需要理解并遵循关键的最佳实践。这是你应该知道的。

建立明确的目标

在您开始收集反馈之前,第一步是定义您的目标并建立明确的衡量方法。

一个好的起点是查看您负责的 KPI。对于产品团队来说,这可能意味着激活或用户保留。对于产品营销人员,这也可能是合格的注册和使用指标。

此外,您建立的目标还将帮助您选择正确的方法来收集反馈。例如,客户访谈非常适合在进行初步发现研究时获得定性反馈。另一方面,原型测试最适合在开发前与用户一起验证设计。确立目标是获得做出明智决策所需的反馈的第一步。

提出正确的问题

其次,提出正确的研究问题是获得有效、可靠反馈的关键步骤。确定目标后,下一步是制定您需要发送给用户的调查或为客户访谈准备研究计划。

在制定研究问题时,需要牢记一些重要的指导方针。其中一些是:

A. 避免引导参与者寻找答案

B. 避免封闭式问题,尤其是在客户访谈中

C. 参考特定时刻,例如使用功能或新产品

总结

产品反馈是洞察客户行为和痛点的重要来源,可帮助您在整个产品开发过程中做出明智的决策。

今天在产品和营销领域工作的每个人都将从与客户交谈和倾听他们的意见中受益。随着产品的成熟和客户需求的变化,这些对话不应该是一次性的,而是构建伟大产品的关键部分。

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

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



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

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

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



页面设计中的信息组织策略探索-言之有序

分享达人

人们是如何组织信息的?

在 Ant Design 的界面设计中,会包含大量的信息组织和编排工作,我们常常会遇到这样的问题:

  • 一个详情页面里应该包含哪些信息?

  • 什么样的信息应该放在卡片里,什么样的信息应该平铺显示?

  • 一个页面内的信息该怎么让用户快速找到重点?

  • ···


信息组织是我们在日常生活中经常会遇到的问题,商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等,各式各样的信息是如何被组织编排到一起,又是以何种方式把信息呈现给用户呢?


在解答这些关于页面设计的问题之前,我想先给大家讲一个生活中的小案例:


动线设计

逛过宜家的人,应该会注意到宜家类似迷宫的动线设计,这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时,就会被一条隐形“向导”默默地引导着向前走:一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域,直到一个不落地走完才抵达出口。但在这个主线之外,为了确保一些消费者在购物中,能够快速离开或快速去往感兴趣的区域,每个主区域间都有一些较隐蔽的捷径作为辅动线。


这种动线设计一方面能够把所有商品按照路径有效的串联起来,另一方面又能让消费者不知不觉的沿着这个路径去了解商品。


商品布局

动线布局是宜家的隐形骨架,而真正让宜家卖场丰富起来的,还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样,它不会把同类型产品进行大集合,而是根据人们的正常生活场景来分类,不同类型的产品在同一区域组合陈设,构成生活中的一个小场景,一方面能达到对各个商品功能的完美诠释,另一方面,一个产品尽量不会重复出现,尽可能减少商品展示的复杂性。


在整体商品布局上,有两个很有意思的地方:第一,在居家体验中心,样板间的陈列顺序完全是按照消费者回家后的场景而布置:客厅、餐厅、厨房、书房、卧室、卫生间......,第二,在家居用品中心,则会根据消费者在家的日常起居行为进行摆放:做饭、休息、读书、收纳......


现实生活中的这些例子,对我们的界面信息组织有什么启发呢?


关于动线和布局的思考

在宜家的案例中,关于动线,映射到人的行为上,有一个比较专业的概念叫做“流”(flow)。 Mihaly Csikszentmihalyi 的著作《心流:最优体验心理学》中对“流”的定义:当人们全身心投入到某个活动中时,会对周边干扰视而不见,这种状态被称为“流”。宜家的动线设计很好的营造了这种状态,让消费者完全沉浸于商品浏览,并且尽量不去打断这种行为流。


经过研究发现,构成“流”的行为动作,其前后必然存在某种连续性或者关联性,例如回家的行为动线,日常起居的行为关联等。这个概念在界面设计中依然适用,很多界面设计都在有意无意的去创造“流”的状态,带给你用户沉浸式体验,例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容,让用户沉浸其中无法自拔。


关于商品布局,映射到信息组织上,《韦氏大词典》 中提到一个词“编配”(orchestration),对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义,宜家的商品和谐的组织构成一个场景,它向消费者传递的不仅仅是商品本身的功用性,更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上,表单页的和谐组织能够帮助用户快速完成信息录入,详情页的和谐组织能够帮助用户快速理解一个描述对象......


各种各样的信息总能以某种关系组织到一起,而如何根据这种流为用户去组织和呈现信息呢?


“流”的本质其实是一系列具有关联性的行为动作串联,而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后,我们可以做一个初步假定:所有的信息是否都可以通过关联性和复杂度来进行组织编排?针对着这两个维度,我们又进行了更深层次的研究和验证,并得到基本定义:

  • 信息复杂度:信息量的大小,包括种类、数量等。

  • 信息关联性:信息之间的潜在关联或者相互影响。


我们设想,这两个维度能否运用到界面设计上的信息组织呢?


页面信息的组织方式

信息关联性

界面信息之间的潜在关联或者相互影响,通常体现在「逻辑关联」和「视觉关联」两个层面。


逻辑关联

顾名思义是指一个事件中的所有信息之间的关系,在界面设计中,无论什么样的信息,总能以某种方式进行分类和编排在一起,例如手机通讯录中的人名,可以按照字母顺序从 a 到 z 进行排列,电商网站的商品导航会根据类别进行分组,待办事项可以根据时间进行排序等。


如何找出信息之间的逻辑关联性呢?

被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括:

  • 地点(Location)

  • 字母(Alphabet)

  • 时间(Time)

  • 类别(Category)

  • 层级(Hierarchy)

简称LATCH。这五种方式基本可以涵盖所有的信息组织策略,信息是无限的,但是信息组织方式却是有限的。



视觉关联

任何一个界面呈现给用户的时候,用户都会下意识的去判断界面上什么信息是最重要的,接着会去关注这些信息都有什么关联,因此,除了按照逻辑去组织信息之外,还应该合理的去呈现信息的视觉层级关系。


视觉层级关系有几种常见的区分方式:

  • 强调:使用基本视觉元素(颜色、形状、大小等)区分层级

  • 亲密性:位置接近的元素通常是有关系的,而且位置越近,关系越强

  • 图胜于言:视觉符号和对象关联,例如:齿轮或扳手=设置,垃圾桶=删除

  • 浏览顺序:根据浏览顺序,从左到右(部分地区)或从上到下信息重要程度依次减弱

  • ···


如何验证界面元素的视觉关联性是否合理呢?


眯眼测试

《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试,为了确保界面视觉信息有效的拉开层次关系,图形设计师经常会用到一个方法“眯眼测试”(squint test)。闭上一只眼睛,眯着另外一只眼睛看屏幕,看看哪些元素突出,哪些元素模糊,哪些元素看上去成组,哪些元素看上去零散。从多个角度去观察,总能够发现之前没有注意到的布局和构成问题。


信息复杂度

通常以信息量的大小或样式多少来衡量,这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息,但是信息量较大(超过三屏),则认为这个页面的复杂度较高,或者一个详情页面内同时包括文本、表格、代码展示、图表等元素,也会认为这个页面的复杂度较高。

信息的复杂度和关联性并不是两个完全独立的维度,根据关联性去组织信息,本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究,可以帮助我们如何选择合适的方式把信息呈现给用户。


页面信息组织实践 - 详情页设计

具体到界面设计层面,信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例,详情页内的信息该如何合理的组织信息并有效的传达给用户呢?


根据关联性和复杂度的概念,我们抽象出一个简单的「复杂度模型」,用来判断信息复杂程度和关联性对页面结构的影响。


横坐标表示页面信息之间的关联性,纵坐标表示信息的复杂程度,两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块,代表复杂程度低且关联性强的内容,例如一段纯文本的产品描述信息;远离原点颜色最深的色块,代表复杂程度高且相互独立的信息,例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。


与之对应的,我们对信息展示方式也进行了维度划分,用来解决在复杂的企业级产品界面设计中,何时使用卡片区分,何时拆分为 tab 等布局问题。


根据承载信息复杂程度的不同,我们对容器组件也进行复杂度划分,用来解决在不同页面布局中,不同类型的信息用何种方式呈现的问题。


这个模型可以帮助设计者在决策布局组件时,有章可循。最终让用户感知,当用户来到一个页面时,即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地:


关于以上的模型在实际设计中该如何操作,这里提供一个推荐步骤可以参考:

  • 「复杂度判断」明确设计对象信息量的大小

  • 「关联性判断」判断各个信息之间的关联性,并合理分组

  • 「组件选择」选择合适的容器组件来呈现信息

  • 「模板选择」选择合适的页面模板,组织编排信息

  • 「眯眼测试」检查整体布局是否合理(仅参考)



结语

大到一个系统,小到一个按钮,背后的每一条规则既要从人的角度去思考设计的易用性,同时也要从信息本身去推敲组织的合理性。作为设计规范的制定者,不能凭感觉简单了事,而是需要找到一套通用的模式,帮助用户快速找到并理解信息帮助用户提效,同时提升用户的浏览体验,是我们一直在探索的课题。

虚拟界面的信息组织和现实世界一样,既需要符合人们对事物的认知,也需要遵循人们的行为习惯,这些认知和行为习惯,构成了自然交互的基础,这也是我们一直在探索方向。当然,信息组织除了以上这种思路,还有更多的思路和方向等待挖掘,期待大家的反馈和建议,帮助我们一起完善。


优秀网站设计赏析

前端达人

很多网站仍然在使用老旧的页面设计,比如国内一些企业官网,万年不变的相类似的模板,外国的则是hero页面,带CTA按钮,三栏式的布局。这些设计不能说是不好的设计,很实用,用户能够预测展示的内容,也容易找到需要的内容。但是正因为可预测,用户没有新鲜感,没有期待,所以我们找了一些不仅打破常规,也依然有良好用户体验的网页设计。

接下来是精彩的UI设计赏析

WechatIMG2092.jpegWechatIMG2093.jpegWechatIMG2094.jpegWechatIMG2095.jpegWechatIMG2096.jpegWechatIMG2097.jpegWechatIMG2100.jpegWechatIMG2099.jpegWechatIMG2098.jpeg


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

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

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



  更多精彩文章:

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计,打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

       超赞的网站设计赏析



table td的宽度详解

前端达人

前言:一直总觉得td的宽度好难驾驭,但万事万物总是有规律的。就像亮剑说的:不用因为怕八路就敬而远之,应该靠上去,熟悉他们,了解他们。

正文:

  • Table只有Table的宽度是可以设置的,并且各个浏览器理解一致

  • 1.原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值
    Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度

    <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 200px;">我是200px</td> <td style="width: 200px;">我也是200px</td> </tr> </table>  
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    运行结果:两个td都是300px;

  • 2.Table的宽度为600px,前两个td的宽度已经为600px,那么第三个td的宽度没有指定,这样的话第三个td的宽度是根据内容出现宽度的,然后前两个再按照比列计算、
    前两个td小于table宽度,那么最后一个td就起到补全的作用

     <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 300px;">我是200px</td> <td style="width: 300px;">我也是200px</td> <td >我是根据内容的</td> </tr> </table>  
            
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 3.Table中的td内,如果放置块状元素超过td的宽度,并且table的table-layout: fixed;(fixed表示td的宽度是定长的,不随td内容变化而变化)。
    这样尽量不要再td里写overflow: auto; 因为这样在IE6,7不会出现滚动条的,最好的办法是套一个div,宽度设置成100%

    <table style="width: 600px;border-collapse: collapse;table-layout: fixed;" > <tr> <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td> <td >我是自由宽度</td> </tr> </table>
            

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

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


    转自:csdn 

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

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

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

小数据里的大秘密

雪涛

本次活动中,嘉宾通过众多丰富、有趣的案例介绍了数据可视化的概念、作用和设计方法,信息量满满。

分享框架:

嘉宾首先分享了2个数据可视化案例:

  1. 设计师把阅读困难症患者普遍能看到的东西进行实体化、视觉化,让别人能进入他们的世界。
  2. Aaron Koblin的作品《Flight Patterns》,让人眼突破视域的界限,以“鸟瞰视角”来看北美居民的迁徙过程。

 

活动笔记:

1. 什么是数据视觉化?

其实它就是把不可见的数据转化为可间接被观察数据的过程。它不提供回答,只是提供一种观察的新方式。

举例一个来自小数据观察的自我探索项目:太极。

将太极拳的动作进行数据采集完成了第一张数字国画,有人质疑说好看但无用,嘉宾解释由于好看吸引了人群,从人群的行为进行观察可能会有意想不到的发现。

数据视觉化的初衷并不是为了解决问题,而是为了探索。

前田约翰(John Maeda)曾经说过:“好艺术的使命是唤起思考,好设计则是让事物变得清晰,并能解决实际的问题!”

 

2. 数据视觉化有什么用?

介绍两张数据视觉化历史上教科书级别的神图:

  1. 《拿破仑东征》诞生于1861年,由法国工程师查理·米兰德绘制,描述了1812年拿破仑东征俄罗斯的失败战役。图中透过2个维度呈现了6类资料:拿破仑军的人数、距离、温度、经纬度、移动方向,让人在一个静态的平面上同时观察多种数据变成可能。
  2. 另一位南丁格尔女士,是一名护士。作为军医,她清楚地知道大部分士兵都不是战死沙场,而是死在医疗环境极差的军营里,她自己懂,可是怎样才能影响国会呢?她发明了玫瑰图,用以表达军医院季节性的死亡率,对象是那些不太能理解传统统计报表的公务人员。她的方法打动了当时的军官统领和维多利亚女王本人,于是医事改良的提案才得到大力支持。为了纪念她的贡献,后来她的头像被印在了英镑上。

数据可视化研究的不仅仅是“数据如何能被看清”,还有“数据如何能被看懂”。

 

2.1 数据如何被看清?

可以通过颜色,大小,方向去提高数据的差异性。最简单的例子就是报表中的标红。

  1. 有效标红的第一步:去颜色干扰,第二步:去分隔线干扰;
  2. 去掉没有用的东西,例如框框、加粗;
  3. 对齐很重要:数据右对齐、信息左对齐,注意表头对齐;
  4. 间隔和行距也很重要;
  5. 单位很重要,尽量减少数字本身的长度,不超过4位;
  6. 去重非常重要(尽可能减少画面里的重复信息,可以让重要的信息更突出);
  7. 字体修正(看个人喜好)。

 

2.2 数据如何被看懂?

嘉宾介绍了4个项目:

项目1:国内外艺术院校的数据可视化展示。

由于经常会有同学问各大美院或艺术类院校之间的区别。嘉宾抓取了17所国内国外院校的数据来做展示,蓝色是代表“设计类”,白色代表“纯艺术类”。从中也可以看到院校的结构是否扁平。

 

项目2:嘉宾基于wikidata数据库编写的小工具。

最初只是用来快速查找艺术家的基础信息,后来加入视觉化功能,把所有查询到的人排列到一根时间轴上,横向观察她所关注的艺术家的生活年代及寿命。

通过可视化的展示,她发现自己关注的都是集中在某一个时期的艺术家,除了看到自己的喜好之余还很有效地发现自己的知识盲区(只有看到了自己知道什么,才能知道自己还不知道些什么)

我们可以发现在人类历史上,很多人物在时间即便在空间上没有交集,却在时间上相遇了。

比如Jackson Pollock,艺术史上动态艺术里面用身体的律动去做油画的一个非常重要的艺术家,他和计算机之父图灵原来都是同一年出生的,酒鬼Jackson Pollock居然比图灵还多活了两年。

我们还能八卦一些爱情故事,原来摇滚界的神话列侬跟小野洋子是姐弟恋,而且列侬只陪伴了洋子生命的一小段时间。

我们可以清楚地看到“看得见”的魅力。

很多信息的缺失并不是不存在,而是无法被看见,被观察。

因为看不见,很多信息甚至是完全错误的。在测试代码的过程中作者更意外地发现爱迪生的生日被错写为2016。

 

项目3:纽约大都会艺术博物馆做的Unfinished项目。

Unfinished是大都会艺术博物馆别馆在首次开幕时的处女展,Unfinished讨论的是“艺术很重要”的话题:在艺术的世界里,什么是未完成,展期为半年。嘉宾认为这个线下展展期太短非常可惜,希望可以通过技术的手段延长展期,更希望能降低门槛,让更多世界各地无法前来观展的人可以有机会参与讨论。

于是嘉宾将Unfinished展做成了Google的插件,安装插件之后,当新打开空白页的时候,空白页会自动被Unfinished的作品填满,把一个简单的空白窗口变成艺术之窗,同时让人不需要任何搜索便进入展览。

此外嘉宾赋予了这次改造更多的交互空间,让人可以实现在传统线下博物馆没有的体验,让他们自由地在“未完成”的作品上进行创作并分享,延长了作品的寿命,让艺术品重回人们的生活中,赋予其新的价值和灵魂。

 

项目4:通过整理全国美展的数据总结的一些获奖规律

得到的3个有趣的结论是:

  1. 高亮的红色、黄色很受欢迎
  2. 1999年,30多、40多的艺术家容易获奖
  3. 画一张少数民族在沙发上抱着一头牛的作品在数据上是很可能获奖的

 

3. 数据如何被视觉化?

在实际工作里,大部分人会接触到的数据视觉化实际上是信息图表,关于信息图表的一些规范和小技巧嘉宾也有提及到:

在做图表时,动机往往比较重要。

下图是为了说明布什总统下台的话,居民税收会增长多少,其实只有不足5%的区别,但对图表做了去零线处理,使得看起来差异很大。

作图的时候要先说明结论。

比如下面的表格是员工为了向老板说明自从少了两位员工之后,单子处理不过来了,意思就是说老板你得给我加人。

千万不要出现彩虹柱状图,折线图在多周数据对比的时候会非常实用。

 

最后是一些推荐的网站和资源:

最后释疑:

五步提升你的版面精致度

雪涛


首先,我们怎么去理解在作品集版面中的“精致度”。我觉得可以将其转化为“质感”,“细节”,“细腻”这样的词汇。其实“精致度”不足这个问题大部分同学也是能有所感知的,只是不知道哪里出了问题,也就无从下手。当然还有一小部分同学,可能并不觉得自己有什么问题,也无法体会修改前后的差别,这样的同学,我建议你平时应该多看一些优秀的设计作品,多沉淀一下,这样的方式对你帮助更大。


很多同学经常把“精致度”理解为形式感不够,或者是不够酷炫,这么理解是不准确的。这就好像一个产品,它的精致和它的外观设计并没有什么直接联系,而是更多的取决于这个产品的做工和材质。做工体现在接缝的处理,边角的打磨等等,而材质决定了其质感的好坏。那么同理,版面的“精致度”实际上和你的设计感也是没有直接联系。那么从哪些方面体现版面中的“精致度”呢?我结合自己的经验总结了以下几个方面:

1.舒适的间距。一个合适的,让人舒适的间距特别重要。无论是文字与的,或者说认为不重要的事情。混乱的,不统一的,不舒适的间距会让版面变的排布变的无章,这就好像一个产品各个部件的拼接接缝大小不一,会导致“精致度”下降。

2.大小比例。版面中所有元素的互相之间,以及相对于整个版面的大小比例问题。这个也是非常重要的一个体现“精致度”的地方。所有内容都过于傻大粗,无疑会让版面看起来非常粗糙。

3.层次感。层次感实际上是一个非常好的提升质感从而体现出“精致感”的手段。缺乏层次感的版面会显得非常的寡淡,以及在内容较多时可能会在视觉上造成较乱的感觉。那么如何提升层次感,主要是靠对比的强弱。比如:深与浅,粗与细,大与小,疏与密等等。

4.字体。选择一个精致好看的字体,对版面的精致度有一定的提升,不过还是要注意,字体的与版面之间的大小比例要注意。


5.配图。配图的质量也一定程度上影响了版面的精致度。无论是你自己做的图,比如分析图,效果图等,还是你网上找的图,如参考图等,都很大程度上决定了你这一页的精致度。


通过以上几点的提升,我相信你的版面“精致度”一定会有较为显著的提升,而版面效果也会看上去更为高级。不过这里还是要再次提醒,精致度和设计感是两回事儿,如果只有精致度,而设计感较差,那也是不行的。希望本期的内容对你的版面有所帮助。


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

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


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

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

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


2021年设计师们最值得做的练习TOP3

seo达人


日常的设计需求需要设计师们准确、快速的解决问题,这也代表着我们很难在日常的工作中尝试新鲜或更具挑战的设计风格,所以设计练习就成为了设计师们提高自己技能水平的重要途径!新的软件、风格或者配色,总让人跃跃欲,今天我们就一起看一下,2021年全世界最受设计师们欢迎的练习方式TOP3

 

01.3D自画像

自古以来,自画像始终深受各种艺术家的喜爱。从油画、雕塑,到现在的数字插画,设计师们也用五花八门的方式展示着自己独特的性格和审美。这两年最火爆的形式毫无疑问是3D风格,3D自画像也成了越来越多设计师们表达自我、提升能力的重要途径!如果你想做些3D练习,自画像一定是很不错的选择。

图片

图片

图片

图片

图片

图片

 

02.抽象几何

方、圆、三角…这些基本的形状也是整个设计殿堂根基的重要组成部分。过去的一年中,越来越多的设计师用这些基本的几何形状,来挑战排版设计。大道至简,简单的色彩和图形更加考验设计师们对元素的控制能力,看似随意摆放的图形,其实都由设计师们精心布局和修饰!

图片

图片

图片

图片

图片

图片

 

03.暗色设计

黑色场景虽然较少,但是不可或缺。随着暗色模式的普及,设计师们随时会面对黑色场景的设计需求,在练习中熟悉其设计规范就变得尤为重要。如何进行色彩搭配,如何整理层级关系,如何兼顾亮暗双模式,这些问题对设计师来说都是不小的挑战,提前练习自己对暗色设计的熟练度吧,在黑暗中也能散发光芒!

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2021年设计师们最值得做的练习TOP3

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

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



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

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

产品细节剖析,提升用户体验就差这一点!

seo达人



在体验优秀的作品时,我们需要站在用户的角度去发现好设计细节及交互解决方案,思考能给企业或用户带来价值并记录下来,久而久之,就能提高自己的语言组织以及总结能力,再通过不断的练习,以达到质变效果。

 

151.「keep」设置身高/体重-模拟现实生活中的固有认知

152.「网易蜗牛读书」找人共读-坚持读书的动力

153.「keep」隐私模式-一键隐藏跑步轨迹

154.「京东」删除搜索记录-决策思考

155.「哔哩哔哩」动效IP结合操作特性-提升品牌曝光度

156.「高德地图」返回-贴心的交互手势反馈

157.「腾讯视频」只看TA-满足“追星”用户沉浸式体验

158.「京东读书」你用过横屏时分栏阅读吗?

159.「ETC车宝」如何在较少的空间展示更多的内容?

160.「盒马」金刚区-引导用户直达目标、快速转化

161.「美团」酒店住宿-评价功能的重要性

162.「今日头条」内容与评论区-高速直达

163.「MONO」TAB栏图标-植入品牌记忆

164.「高德地图」屏幕常亮-减少不必要的操作

165.「哔哩哔哩」生日-通过闪屏给自己一个暖心的祝福

 

151.「keep」设置身高/体重-模拟现实生活中的固有认知

产品体验:

在keep设置身高/体重时,页面效果采用了现实生活中的尺子/称的刻度,通过左右滑动,跟随刻度变化调整出准确的身高/体重数值。

 

设计思考:

早期的互联网产品界面,很多都通过拟物化的设计来描绘现实世界中的产品,其便于用户对功能进行感知,模拟物理世界中的交互,帮助轻松掌握界面的使用方式,最大程度的降低用户学习成本。虽然后来逐渐过渡到扁平设计风格,但很多方面,依然保留了拟物的特征。拟物化风格会不会再次来临也不得而知,但从设计趋势的不但变化可以看出,如2020年火爆的新拟态设计(基本扑街)、C4D、2.5D设计等表现手法,都是在朝着贴近现实世界的认知方向延展。

在keep设置身高/体重时,通过模拟现实世界用户对生活中事物的认知,将页面设计成尺子/称的刻度样式,左右滑动即可设置完成,很符合用户的直觉。模拟现实的设计可以帮助用户轻松掌握界面的使用方式,更快的跟产品之间建立连接,根据模仿学习的基础,有利于初次接触的用户,降低学习成本、提高效率以及出错概率。

 

152.「网易蜗牛读书」找人共读-坚持读书的动力

产品体验:

进入网易蜗牛读书的介绍页面,通过“找人共读”邀请喜欢读书的伙伴加入,为坚持下去提供动力。

 

设计思考:

说起线上读书,一开始必定给自己定下各种计划,还会下定决心,从明天开始就……。可计划很丰满、现实很骨感,当你不想再看书时,可以找到上百个说法来掩盖自己坚持不下去的理由,且听上去合情合理。很多内/外因素的存在,当正在看书时收到朋友的吃烧烤邀请、网友的开黑4缺一、前男/女朋友的微信等都是放弃计划的开始,即便可以抵挡这些诱惑,但面对看到的精彩无处表达喜悦、疑惑之处无地诉说等,无法交流的痛可能是压倒你坚持的最后一根稻草。

网易蜗牛读书可以邀请喜欢看书的网友一起学习,通过交流互动、相互鼓励提升学习氛围,虽然在虚拟的网络世界,但相比一个人读书更有看书的仪式感,精彩之处相互分享、不懂之处相互交流,摆脱一个人的孤独,为坚持读书提供源源不断的动力。另外,第一次共读的用户,还可以免费得书,且后面能获得翻倍的蜗牛壳用于换书,正所谓免费东西不要白不要,以此增加用户的使用粘性,提升用户在此平台读书的频率,为后面的转化提供条件。

(一个人在电影院就算看着喜剧也可能睡着,但一群人在场很可能让你笑的岔气;一个人静悄悄的在手机追剧跟开着弹幕相比,也是两种不同的心情)

 

153.「keep」隐私模式-一键隐藏跑步轨迹

产品体验:

在keep跑步完成后,进入跑步记录页面,开启隐私模式,系统会屏蔽跑步轨迹地图上的部分文字信息,避免用户在分享后暴露自己的位置隐私。

 

设计思考:

跑步是受大家喜欢的运动之一,没有健身房里的复杂训练和费用成本,且时间灵活自由,经常跑步可以减肥、改善视力、改善失眠状况、释放压力/舒缓情绪等诸多好处。坚持跑步需要极强的自制力,如果光靠自律来让自己坚持,很少人能做到,其外在条件不可或缺,比如多人约定一起跑,相互鼓励;给自己制造必须跑步的条件和理由;打卡朋友圈,获得他人认可和鼓励等。打卡朋友圈是很多人使用的一种方法,一方面碍于面子心理,通过营造努力的人设,在他人那里博得面子和形象,给自己带来心理上的满足感;另一方面,可以通过其他人的点赞、评论获得对自己的肯定,增强自己对跑步的兴趣,以提供坚持下去的动力。

keep为了让用户更安心分享自己的跑步记录,在跑步轨迹地图设置了隐私模式,点击“小眼睛”开启后,轨迹地图上去掉了位置及信息标记,只能看到大概的轮廓。隐私模式能有效避免用户的位置信息泄露,以最安全的方式使用产品带来的服务,给用户更容易掌控的感觉,带去安全保障的同事,还能提升用户对产品的信任度。

 

154.「京东」删除搜索记录-决策思考

产品体验:

在京东搜索页面删除历史记录时,会自动展开所有搜索记录,不打断用户浏览的情况下再次提醒是否全部删除。

 

设计思考:

应用将用户的搜索行为记录下来,其主要目的是方便用户下次使用时再次展现,可直接点击快速找到自己所需的商品。虽然保存搜索记录是在给用户提供方便,但也可能将用户较为私密的关键词暴露给其他人,如果被自己的朋友或亲人看到,就有些尴尬了,删除历史搜索记录无疑是最有效的方法。在用户删除历史记录的过程中,其不同的交互方式给用户不一样的体验,且还能提醒用户思考、是否需要放弃这一操作行为。

在京东APP删除搜索记录的过程中,系统将所有记录展开供用户浏览,且右上角出现“全部删除”的弱提示。通过展示的历史记录给用户足够的时间,以延长用户下一步操作决策的思考,降低删除成功的可能。众所周知,用户在操作删除时,其主行动目标就是删除成功,虽然在中途不太可能改变用户的想法,但每给用户多一份思考(所有历史记录),用户改变想法的可能性就会增加;每增加一定的难度(弱化删除操作,降低视觉传播速度),用户放弃下一步操作的可能性也会增加,而且应用需要通过用户多次重复的搜索记录来计算,确定是否增加该关键词对应产品的曝光频率,以达到更多的转化,用户的历史记录一旦删除成功,就会增大二次搜索关键变化的范围及不稳定性,不利于系统更精确的定向推荐产品及服务内容。

常见删除历史搜索记录的交互方式无非三种,虽然不敢说哪一种最好,但可以根据应用的实际需求酌情利用:

①、无提示:操作删除即删除成功,路径最短、效率最高,但极容易造成不可挽回的误操作(如:美团);

②、弱提示:操作删除,再次提示是否删除,弱化主操作,不影响页面浏览,给予足够的思考空间,但容易混淆原本的想法并通过信息错觉给用户“洗脑”,促使用户放弃下一步操作或引导其误操作(如:京东);

③、强提示:操作删除,通过弹窗提示用户快速做出决策,效率较高,但用户无法浏览页面内容,没有太大的思考空间,只停留在“是/否”的层面上(如:淘宝、饿了么)。

 

155.「哔哩哔哩」动效IP结合操作特性-提升品牌曝光度

产品体验:

在哔哩哔哩视频下方点赞时,或出现IP竖起大拇指的动效,生动有趣,点赞成功的同时,还传播了品牌形象。

 

设计思考:

大拇指点赞是出现过最多的一种图形表现方式,其诞生于2000年后,逐渐在全球各种应用中出现并被人们接受且成为一种潜在的点赞认知,通过自己对产品/内容的态度和认知倾向,用支持、赞同、偏爱等表达主观情绪感受。知名产品对点赞的视觉表现、交互效果都非常严格,因为它会影响所有用户的使用体验及品牌价值。

哔哩哔哩的点赞除了常规的大拇指图标交替出现外,还融入了动效品牌基因及激励性质的文案。点赞成功时,图标上方会出现一个竖起大拇指的动效IP形象,2秒后消失,利用点赞的特性结合IP强化品牌,为用户在操作过程中增强记忆,提高品牌的曝光度,且动效IP样式更具产品灵魂和趣味性。

 

156.「高德地图」返回-贴心的交互手势反馈

产品体验:

在高德地图页面返回时,使用右滑交互手势,所接触的位置会出现水滴状的返回图标,对用户做出交互反馈。

 

设计思考:

针对移动端界面的返回,第一印象是左上角的返回图标,但在全面屏手机普及后,大屏幕尺寸也又开始占据市场,屏幕大意味着内容可以更大限度地得到展示,但也会增加单手操作的难度,尤其是顶部,几乎成为单手操作的盲区,于是,很多应用开始将重要的功能往下方移动以及增加了很多隐藏的交互手势,如上/下/左/右滑动、双击、长按、多指并行等一系列便捷的操作。

其实很多交互手势,用户已经见怪不怪,基本都有接触,但是在地图类型的应用中,80%以上的用户操作各方向滑动时,思维还停留在移动地图的认知上,很少有右滑返回的概念。高德地图增加了右滑返的交互,且在人机交互的接触位置出现水滴状的返回图标,给予用户明确的反馈,便于用户快速区分对应的下一步变化是返回还是滑动地图,极大方便用户使用,简单的设计细节十分友好贴心,不知道的童鞋赶紧试试吧!

 

157.「腾讯视频」只看TA-满足“追星”用户沉浸式体验

产品体验:

在腾讯视频横屏观看影片时,点击“只看TA”,选择只想看到的明星片段,后续在看片过程中,系统会自动屏蔽与该明星无关的片段。

 

设计思考:

所谓“萝卜青菜、各有所爱”,针对喜欢追剧/看片的人群,其目的是各不相同,比如喜欢历史的,所关注的是故事的情节、改编程度及连贯性;喜欢科幻的,关注的是动感和特效。但说起青春偶像剧,喜欢看的,大部分用户都是片中某些明星铁粉,因“鲜肉”云集,打开弹幕就不难看出,铺天盖地的都是“好帅啊”“老公”“摸了女孩的手、我好伤心……爱死了”等一系列的花痴语录,什么演技、剧情都不重要,重要的是“TA”别消失,不然的话就算是通过快进、跳集也要找到(抱歉、曝光了那一类人看剧的“猫病”)。

腾讯视频APP的“只看TA”功能,解决了看片专为偶像而来用户的需求,选中“只看xxx片段”,后续会自动屏蔽与该明星无关的内容。因为感性的成分较多,“只看TA”功能对于单纯追星的用户来说,再也不用通过快进、跳集的方式去寻找相关片段,可无需任何操作沉浸式看片,给用户带来较强愉悦感和满足感。

 

158.「京东读书」你用过横屏时分栏阅读吗?

产品体验:

在京东读书的高级设置中,打开“横屏时双页”开关,在横屏阅读时会变成左右双页的样式,给用户多一个选择。

 

设计思考:

在报纸、刊物、出版物中,我们经常看到将大量的文字进行了分栏展示,其目的主要是便于快速阅读。人们在阅读大量的文字时基本都是不断地从左到右-返回-从左到右……如此循环下去,当一行文字较长时,头部和视线需要跟随文字大幅度的移动,看完一行后,再用相反的动作返回下一行的开头,费时费力费精神。而较小的行宽能让一行文字在大部分情况下始终保持在目光范围内,保证阅读的完整性,提升阅读速度。

使用京东阅读APP,在高级设置中开启横屏时双页(分栏),其实在用户看书时并没有多大作用,但根据少数用户的视觉浏览喜好多提供了一种选择。针对习惯、感触各异的互联网用户,在不影响功能、视觉体验的情况下,让他们去选择最适合自己方式,是满足用户需求的最佳之举。

 

159.「ETC车宝」如何在较少的空间展示更多的内容?

产品体验:

进入ETC车宝“我的”页面,会员版块会出现抖动的效果,下滑可展开会员权益,上滑即再次隐藏还原。

 

设计思考:

用户开通会员/购买增值服务是企业盈利非常重要的一大版块,其固定入口大部分在“我的”页面,为了引导用户转化的需要,也会合适的穿插在其他页面、状态、功能之中。因“我的”页面需要给用户提供常用的跟个人相关的功能,固会员版块展示区域,基本上不能超出自己的那“一亩三分地”,也间接导致了因展示内容较少、吸引力不够、转换率较低的情况。

ETC车宝的会员版块展示区域同样较小,但却合理利用不同的交互方式在不占用太多页面资源的情况下,展示了更多会员权益。进入“我的”页面,会员版块会出现抖动的动画效果,其最主要作用在于动态比静态更加吸引眼球,增加视觉关注度,利用轻交互动效来吸引用户视觉焦点,增加点击欲望。

一般来说,除非用户在目标非常明确的情况下,才会主动进入会员页面,因为这关系着用户的经济成本。ETC车宝“我的”的下滑可展开会员权益,上滑即隐藏,既做到了不占用页面空间,又额外给用户展示了比较有诱惑力的会员权益,吸引用户参与,勾起开通会员的欲望,同时也能在减少用户操作的情况下,了解更多会员内容,最终达到增加转化率的目的。

 

160.「盒马」金刚区-引导用户直达目标、快速转化

产品体验:

盒马APP将金刚区的入口直接做成了产品一级分类,用户进入首页,即可根据对应的需求快速到达指定位置,少了各种常规功能的弯弯绕绕。

 

设计思考:

常见的电商应用,大部分都是直接在底部标签栏设计一个分类入口,而金刚区是一个页面中头部的重要位置,也是核心功能区域,其聚合了各类子板块的入口,为各个子版块分发内容引导流量,所以其重要性不言而喻。

盒马APP直接将金刚区设计成产品类型入口,其最主要的目的是引导用户在最短的时间内找到目标,快速解决用户需求,少了常规的套路和弯弯绕绕,多了一份效率。相比tab上的分类入口,更能促进用户快速决策,避免用户被其他内容吸引而产生新的想法,影响转化。

 

161.「美团」酒店住宿-评价功能的重要性

产品体验:

美团酒店住宿详情页主图的右下角,会特别突出该酒店的综合评分和其中一条好评,点击后可进入评论页面,依然突出酒店评分,以及大数据下的住客偏好。

 

设计思考:

评价的目的更多是为了表达个人对于某问题或现象的看法以及思考,也会作为后来者是否购买该产品的重要依据,直接关系着店铺的综合评分。不难看出,用户在购买某个产品时,除了价格之外,买家秀就是决定用户是否转化的关键因素(不是唯一),商家也会使用各种方法来提高好评率,其中就包括收到快递后好评返现券、商家电话提示等。纵然如此,评论功能也都只是提供一个的简单入口或介绍完产品后象征性的展示最近两条最新评论,还没有上升到超级重要的程度。

美团APP酒店住宿版块则把评论(综合评分)的重要程度提升了一个等级,将综合评分和其中一条好评显示在详情页主图的右下角,用户进入即可被快速吸引。住客都是以自身位置为中心,因距离的因素限制了诸多选择条件,相比其他电商产品,评价似乎成了除价格之外的唯一决策条件,提高评价功能的等级,也是为了将对应的信息快速传达给用户,减少其思考时间,提升决策效率。

 

162.「今日头条」内容与评论区-高速直达

产品体验:

在今日头条的新闻详情页,点击小气泡图标,页面会自动跳到底部评论区,以供随时查看、参与评论,再次点击图标,可回到之前未看的位置。

 

设计思考:

在拥挤的公交/地铁上、忙里偷闲的上班时间里,我们偶尔会打开新闻APP来了解一些社会热点资讯,增加知识视野及“吹水”能力,偶尔还会跟随大流调侃一番。当被新闻中某个有趣的点刺激着自己的脑细胞时,会不自觉的进入评论区表达自己的想法或看看别人见解,很简单,点一下底部(大部分底部悬浮)的气泡图标就能直达。一番操作之后,要再次回到页面刚才没有看的位置就难搞了,因大部分新闻内容较长,靠下拉去查找基本不现实,且查找的时间越长,记忆力就会逐渐减弱,浪费更多的时间成本。

今日头条APP的新闻详情页面,在点击图标去到底部后,若想回到文中原来的位置,只需再次点击图标即可,避免通过调取大脑记忆滑动页面查找而浪费大量的时间,还能防止用时过长而“断片”,为用户提供了便捷的路径,减少不必要的误操作,增加产品的易用性。

 

163.「MONO」TAB栏图标-植入品牌记忆

产品体验:

MONO(猫弄)APP,底部tab栏图标直接用名称中的四个字母替代,以达到最大化品牌传播的目的。

 

设计思考:

一个应用是否好用,其视觉(交互效果/任务流程/操作方式)占据很大的作用。tab栏作为整个应用结构的入口,也不例外,不管是精致的图标、趣味的动效还是优秀的交互方式,其目的都是为了通过美观的视觉,将产品想表达的内容清晰发反馈给用户。

MONO打破了以往其他应用tab栏的常规表现方式,将名称拆解,即M、O、N、O以图标的方式至于tab栏,用最直接的方式进行品牌传播,让用户记住的并非APP里的某个功能,而是品牌记忆。虽然跟用户所需要的美观、亲和力、趣味性等,似乎是反其道而行,但存在即为合理,通过品牌基因的融入,能让产品带有灵魂, 延伸品牌价值观以及突出图标特征来提高品牌曝光度,让用户看到产品的第一印象,就知道当前使用的是什么,当品牌元素在产品的各个层面合理复用时,也能增强用户记忆,变相提升用户粘性。

 

164.「高德地图」屏幕常亮-减少不必要的操作

产品体验:

在高德的地图设置中,开启“开启屏幕常亮”功能,即可在导航过程中保持设备屏幕常亮,避免猝不及防的息屏带来安全不必要的麻烦和安全隐患。

 

设计思考:

平时我们在导航的过程中,如果长时间没有触碰手机会出现自动锁屏的情况,因事发突然,若行驶在交通复杂且不熟悉的道路口,慌忙之中选择解锁手机查看、刹车减速靠边或随便驶入其中一个路口,不管何种选择,都可能来不必要的麻烦及安全隐患。

使用高德导航时,在设置中开启屏幕常亮后,导航过程中能有效防止设备自动变暗或锁屏,避免用户在驾驶过程中手动调整设备或考虑突发事件造成大脑“开小差”,影响驾驶安全。屏幕常亮可以帮助用户将更多的注意力放在安全驾驶方面,不会因出现息屏受到影响,从而提升安全系数。

 

165.「哔哩哔哩」生日-通过闪屏给自己一个暖心的祝福

产品体验:

在生日当天进入哔哩哔哩,启动页之后会出现一个暖心生日祝福+温馨的闪屏,利用情感化的表现方式让用户在进入应用之前就能感受到友好的祝福,几秒钟后,自动进入首页。

 

设计思考:

“生”是来到这个美好世界的一种方式,“日”是纪念降临人间的日子。很多人都想在自己生日这天得到好友的祝福,只有在这一天才感觉到自己是真正的主角,听到一声“生日快乐”是对自己最好的期盼,被习惯性地祝福,即使这一天自己天犯了什么错,也会被不同程度地原谅,因为我们知道,还有人记着、爱着自己。

在智能设备普及的今天,我们身边少了很多的朋友,但却多了一个铁友-智能手机,最初给我印象最深的就是在生日这一天,从早上开始,QQ的生日祝福消息就没有断过,虽然都是虚拟的礼物,但至少是自己的朋友(Q友)亲手送出,还是无比的开心。而如今的微信、抖音、视频等平台成了手机必备,履行着我们可以没有朋友,但不能没有手机的原则。表面上看,我们似乎在和冷冰冰的机器交流,实则应用早已通过亲和、情感、趣味化的方式成为了自己最忠实的朋友。

在生日当天进入B站,系统会通过闪屏的方式给我们送上最真挚的祝福,温馨的画面+暖心的祝福语,再结合产品的特性融入情感化的设计,为用户打造了一个有归属感且温暖的“家”,为产品设计增添了人情味,并通过祝福的方式拉近用户与产品间的距离感。如果自己的生日被所有人遗忘,多少会有些失落感,而B站用温暖的方式传递爱与力量,也能抚慰每一个被情绪伤害过的灵魂,这也是巩固用户粘性与忠诚度十分巧妙的方式,一个小小的细节,就能感受到产品的温度与团队的用心,很大程度上提升了用户对产品的好感度。

 

结语:

设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来,加强自己的记忆,不仅能提升自己的语言组织和总结能力,也为日后输出优秀的作品当铺垫,对自己的能力提升以及未来的职业发展带来便利。

本期产品设计细节分享结束,我们下期再见。

 

原文地址:能量眼球

作者:大漠飞鹰CYSJ

转载请注明:学UI网》产品细节剖析,提升用户体验就差这一点!

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

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



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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档