首页

如何进行表单体验优化-中台系统

周周

本篇文章将分享Web端表单体验优化等相关内容,分析设计师在设计B端类产品时如何让用户愉悦并的填写表单。

表单作为基础通用组件,也是在各个企业级中台中出现频率最高的元素之一。在用户界面中表单无处不在,比如:用户注册登陆页、支付页、用户反馈、共享信息数据录入等不同类型的表单。当我们使用/设计表单页面时看似是按钮、输入框等表单组件进行组合搭配使用,看似简单,但是在实际业务使用中却有着无数可推敲的细节冒出来,常常给设计师造成较多的困扰。

那么在实际工作中哪些内容会给设计造成困扰呢?举几个例子:在实际的业务中很多产品因为业务导向需要入海(非中国区方向),所以就存在表单标签对齐方式问题,如果右对齐可能在中文的情况下表单标签预设宽度正好合适,但是当用户切换到多语言时因为语言差异会导致折行严重等一些列问题,相当影响体验;设计师常常疑惑表单标签是顶部对齐、右对齐还是左对齐,他们的差异点在哪呢?必填与非必填项以什么形式告诉用户会更加合理呢?表单按钮放在页面哪个位置体验会更佳呢?

所以我们不能忽视这些设计细节,往往一些好的设计细节提升总会给用户带来不一样的用户体验。针对以上这些举重若轻的问题我们一一明确、抛出并与大家一起来进行由浅至深的探讨「如何提升表单体验」

重点概览

一、表单分析

二、体验与优化
三、排列与布局
四、写在最后 

表单分析

1.1 表单的重要性

在上面的前言中也提到了表单作为基础通用组件,也是在各个企业级中台中出现频率最高的元素之一。并且在《Web Form Design》一书中 Luke Wroblewsk 也提到了“表单决定了最关键的界面中交互的成败”,当用户使用网站时会有一个特定目标,如果设计得好,网站将实现有效性。效率、用户主观满意度以及特定用户在特定使用环境下所达到的特定目标,也是设计师想要达成的最终目标。表单往往是目标用户和整个产品的一所桥梁。因为,尽管人机交互的发展进步,表单仍然是用户在网络中进行交互的主要方式。所以表单是被认为完成目标的最终,也是最重要的阶段。

我们以淘宝来举个典型的例子,淘宝属于国民电商平台也是亚洲较大的网上交易平台,提供各类优质商品。从平台的特性来讲,它以用户下单并成交作为最终目标。其中支付表单起着一个关键的作用,用户从购买到支付完成以分步形式进行,第一步填写基本信息并提交订单,第二步选择商品并选择支付货款至第三方,第三步买方确认收货并自动打款给商家,第四步完成订单并评价。在填写表单时中间没任何阻断,用户能很顺利的按步骤完成订单。淘宝支付表单属于比较典型的分步表单。

1.2 拆分表单

我们简单提一下表单组成(网上有很多详细的相关文章),一个完整较复杂的表单是由7个基本组成部分,表单类别、表单标签、表单基本组件、占位提示、帮助信息、按钮、校验。表单可以包含以上组成部分,但不是一定都要有,比如:移动端填写验证码时为了减少用户操作,当用户填写完成之后直接提交表单验证。

表单类别:第一时间告诉用户此段落的表单大致内容,减少用户理解并承担着概括内容的作用;

表单组件:包含了输入框、下拉框、日期选择器、时间选择器、开关、上传等十几种类型,是形成表单的核心内容;

表单标签:表单标签承担着对输入项或设置项的解释作用,所以表单标签需要合理设置,核心点是帮助用户快速理解每一项字段的作用;

占位提示:使用通用的认知提示并且以较弱的方式呈现给用户,用户填完信息即消失。注意:占位提示不能替代标签,因为消失的占位提示会拉长用户的短期记忆,如果没有表单标签用户将无法在提交表单前检查他们填写的所有信息。文章下面会详细分析。

帮助信息:当表单标签不足以对输入项准确说明时,这时候需要使用文本提示用户。它不仅能让用户提前感知输入后的样式,还能够有效的告诉用户该如何输入以及表单提交后达到的目的。

按钮:当用户完成信息录入时,按钮能够对表单内容进行校验或提交。

校验:对用户信息录入内容进行校验并给出对应的错误提示。如:内容是否为空、类型格式是否正确、是否符合业务逻辑等等。校验时有两种规则,分别是使用即时校验(失焦即校验)和点击提交按钮以后的最终校验。状态分别为错误、警示、成功。

1.3 表单类型

基础表单

较为简单的一类表单,把所有表单字段平铺在页面中,字段内容较少。当用户输入少量信息即可完成一个简单快速的任务。例如:此类型表单常常用在简单的登录注册中。

分步表单

较为复杂的一类表单,把一个相对复杂的表单字段拆解为多个步骤进行。根据业务属性进行步骤分组利用步骤条告诉用户所完成的流程和进度,当用户每次填写都意味着一次节点完成,整个流程结束给予明确的结果反馈,并以提交成功为最终。分布表单有利于减轻用户由于表单大而复杂的造成的填写负担,并且能减少用户表单填写出错率。

分组表单
 将一个复杂表单拆解归类分组。分组表单与分布表单特点较为相似,都可以减轻用户因为表单大而复杂的造成填写的负担,并且能减少用户表单填写出错率

体验与优化

1.1 必填项or可选项

在设计表单时大多数设计师都习惯性的使用星号表示必填字段。但那么问题来了,针对必填项和可选项用那种形式才是最科学的呢?我们简单分析一下。


当表单中的必填信息多于非必填信息时,如果使用红色星号表示必填项,那么大量红色星号导致增加用户的认知负担,使得用户无法快速识别哪些是必须填写的,哪些是不必须填写。并且使用红色星号会带给用户一些恐惧感,它增加了出错的风险并降低了表单填写率。因此在表单设计中,当必填项多于非必填项时,隐藏红色星号标记,通过暗提示标记可选项的形式来帮助用户识别。

红色星号对于不同用户也会存在不同的认知差异。对比较有经验的用户可能表意较为明显,但不代表所有用户都能理解,比如一些非中国区用户使用国际化产品时存在不同认知,因为每个国家本地化差异较大导致认知差异。

还有一点是表单中视觉噪声越少可读性越强,因此当必填项多于非必填用非必填字段提示用户会更好。

1.2 单列布局or多列布局

多列表单字段会导致用户视觉路径变长,因为如果表单中有水平相邻的字段,则用户必须以Z样式进行视线扫描,整体的效率和工作量都更大,使清晰的路径变得模糊并加长用户阅读时间。多列表单可能会存在用户跳过他们实际要输入的必填字段,将数据输入到错误字段中。而最终校验信息时用户得反复检查错误项导致用户放弃填写。

如果表单使用单列,则完成的路径是页面垂直向下的一条直线,单列布局能够给用户呈现一条清晰的视觉路。因此,表单较为简单时尽量避免将表单分成多列,在业务场景允许的情况尽量使用单列(部分业务诉求和一些特定场景要求,多列布局会更节省垂直空间,但是多列布局需要考虑字段之间的关联性,这里不强求一定只能使用单列布局)。

1.3 将复杂的表单分为几个简单的步骤

在设计师设计表单时可能业务场景复杂、字段较多,即使设计师把很多不必要的字段都删除也解决不了根本问题。所以,这时候设计师需要将大型任务分解为一系列较小的任务,使得表单更加的简洁。这种方式的好处是能将步骤以视觉的方式传达给用户数量、名称、说明等信息,更加提高用户满意度并且能激励继续填写。

但是设计师需要注意的是不要太过于细化步骤以及在小型弹出窗出现过多的步骤,过多的步骤不利与用户填写和记忆,反而增加用户负担。

1.4 按钮的位置

按钮放在页面左下角比较好还是放右下角比较好?这是设计师在设计表单时常常纠结的一个问题。其实在14世纪西方活字印刷术的发明人约翰·古腾堡提出一个概念古腾堡法则(Gutenberg Diagram),又称对角线平衡法则。它指出用户在浏览页面或一些布局时,视线往往趋向于从左上角到右下角进行扫描。左上角是第一视觉落点区(主视区),而右下角是最终视觉落点区(终点区)。与之相对,右上角和左下角则是视觉盲点。用户的视觉移动端规则是从上到下,从左到右。

所以,界面中的左上和右下是用户视觉最为重点关注的位置。遵循古腾堡法则,设计师应该把界面的关键元素放在主视区,终点区可以放按钮、强提示,盲点区可以用来放一些相对次要的内容,如辅助图形、文字信息。

同理,表单中会出现组合按钮,比如:取消与确认、提现与充值。根据古腾堡法则,用户使用界面时从第一视觉落点区是主视觉区(Primary Optical Area),最终停留在结尾的终点区(Terminal Area)。

如下图是一个弹窗类型的表单,如果根据业务诉求确认操作重要程度强于取消操作,那么确认按钮应该放在取消按钮的右边。因为确认按钮放在右侧(终点区) 用户关注度会更强。

1.5 占位提示避免代替表单标签

常规的占位提示作用是使用通用的认知提示并且以较弱的方式呈现给用户,当在字段中填入内容这些提示通常会消失。


设计师常常遇到表单字段较多并且页面空间有限的情况,为了减少横向节省空间设计师常常的做法是将表单标签删除,使用占位提示文本作为信息提示。但是设计师必须有意识知道到这种方式适合使用在较为简单的表单中,比如:表格中点击修改名称操作,弹出气泡并且气泡中只存在一个字段。或者是在用户非常熟知的登录注册等较为简单的表单填写时使用。但是当用户需要填写大量字段信息时不建议使用占位提示代替表单标签的方式。原因有两点:1. 当用户选中文本框填写时,占位内容即消失,这时候用户无法检查并确认其所写的内容是否符合预期。2. 当用户看到文本框中已经回填内容了,误认为占位提示是默认回显内容,造成内容已经填完不需要再操作的错觉。

针对上面问题也不是没有解决方案,在Material Design中有提供针对上面的问题的解决方案,我们这边暂时称其为“浮动标签”,默认情况下输入框内显示占位文本,当用户输入内容以后占位文本浮动到内容上方与内容左对齐。 

1.6 校验反馈及时并准确

设计师通常认为用户在填写表单时能够很顺利的完成表单录入,但事实相反。在实际的使用场景中,特别是在一些业务较为复杂的表单中用户极易发生错误,这时候需要需要明确的校验信息、准确的校验时机、输入的限制提示。

错误提示校验

错误校验提示一般存在于错误率较高情况下出现,如:在登录注册时,要求用户填写手机号,如果用户输入的手机号码不符合特定的输入格式,那么这时候需要明确标记错误原因,准确的帮助用户找到问题并解决,避免错误提示描述模糊不清误导用户。错误提示一般会采用“双重视觉强调”来显示错误,除了输入框突出显示外,同时需要在输入框下方加入红色指导文字。如下图所示为西瓜视频登录注册场景下的截图:

限制与格式提示

在表单中如果出现特定格式时务必要提前告知用户。可以在输入框中显示概括回答的方式引导用户,如:请输入日期,eg:mm/dd/yy。这样便于帮助用户提前感知,减少表单填写错误率。

校验时机

为了避免用户在提交时表单时出现大面积的报错问题,设计师可以使用实时校验的交互形式。如:在用户输入完成之后鼠标失焦后进行信息校验,但是需要注意的是在实时校验时避免用户还没有输入完成即出现校验误导用户,所以需要准确判断鼠标是否失焦。如下图所示为西瓜视频登录注册场景下的截图:

1.7 字段长度与输入预期成正比

在实际业务中,设计师常常习惯把每个表单字段都设置成相同的宽度,在视觉效果上看感觉会比较统一,但是这种做法实际上体验欠佳。字段的宽度应该向用户暗示所需输入内容的长度从而减轻判断负担。在Ant Design 4.0 系列分享的文章《整齐划一?不如错落有致》中分析到错落有致的排版表现似乎比整齐划一的左图更舒适,因为在视觉上我们更容易将右图的空间和内容视为一个和谐的整体。但左图过度的对齐导致暗示隐性的截断,我们惯性视觉会产生表单字段右侧空间缺了一大块的错觉。

文章总结到“表单宽度的处理方式核心旨在解决两个问题:1. 暗示填写内容长度;2. 表单项布局排列效果,我们通过设置合理的默认宽度尺寸和描述关系,就可以让设计师们跳过部分繁琐磨人的细节思考,快速搭建表单宽度合理且舒适的页面。”如下图所示:

排列与布局

1.1 定宽or自适应?

表单做定宽还是做自适应?哪个“更好”的这个问题时常困恼着我们。其中Button、Radio、CheckBox等本身是定宽组件还好,它根据内容自适应即可,但是当遇到Select、DataPicker、Cascader等类型时就会开始纠结这个问题。在实际的业务中不论是做理想中的定宽还是自适应,很多情况下浏览器窗口大小不一可能导致在一些极限情况下都会产生不尽人意的情况。脑补一下,比如:在笔记本的小屏幕下左对齐并定宽效果还不错,但是当你把页面呈现在较大显示器下,这时候页面右侧又会呈现出大面积的空白。参考AntDesign提供的典型页面以下三种样式是都会造成不同的反面效果。


所以在实际业务场景中如果没有明确自适应和特定自定义宽度的需求时可以通过以下几种方式处理。

将关联性强的字段分组
如果页面横向宽度足够大时,可以将一个区域中字段较多、并具有关联性字段进行分组,这样不仅有利于空间布局上的利用,还可以通过字段之间关联性暗提示帮助用户更好理解。格式塔心理学中有多种分组原则,可以使字段之间具有相关性:接近度,相似度,连续性,闭合性和连通性。将非结构化字段分组为几个机构化的集合提高表单的可用性。

设置字段宽度梯度

可以给字段设置几档宽度梯度的尺寸,我们可以站在AntDesign这个巨人的肩膀汲取一些相关经验,其中4.0系列分享的文章中总结到其经过对十几个业务线梳理,将组件宽度定义了5中高频的空间尺寸,分别是: XS(80~160px)、S (160~280)、M(280~360px)、L (360px~480px)、XL (480~560px)。根据原理,我们可以假设原子宽度XS为100,那么通过尺寸的倍数+间距的方式来计算其他的四种尺寸(间距暂定8px情况下得到:S=208px、M=316px、L=424px、XL=532px),通过此计算方式也是用来解决视觉对齐规则,如下图所示:

1.2 表单标签顶部对齐or右对齐or左对齐

在设计表单时到底是左对齐、右对齐还是顶部对齐呢?这个问题也是在实际业务中设计师发问频率较高的一个棘手问题。其实,不论是哪种方式都有相对的利弊,需要根据实际业务场景提供不同的解决方案。在Matteo Penzo《Label Placement in Forms》文章中有分享过关于表单标签放置的研究,下图是Matteo Penzo研究总结得到的浏览时间表:

表单字段顶部对齐

将表单标签放置在其对应输入字段的正上方,并垂直左对齐排列,用户只需依次向下浏览即可看到标签与输入字段两个元素。其优势是横向屏幕空间足够,能够比较友好的适配多语言适合非中国区业务表单使用。并且根据上面Matteo Penzo的时间表上看,顶部对齐的浏览和填写的效率也是3种常规的对齐方式中较高的一种。不足点是会占用较多的纵向垂直屏幕空间,此外应当注意每组表单标签和输入字段与其他字段组的间距,以免层级区分度不够的问题。

表单字段右对齐

将表单标签放置在其对应的输入字段的左边,标签右对齐。其优点减少了占用屏幕的高度,并且表单标签与输入字段关系较近,所以用户在填写表单时效率较高。不足点是由于表单标签的字数不可控(特别是针对非中国区业务时,多语言切换可能会出现超长的文案,甚至出现折行的情况),可能会造成左侧参差不齐的问题,导致可读性不高用户在查看表单时比较费劲,并且不太适合非中国区业务。 

表单字段左对齐
将表单标签放置在其对应的输入字段的左边,标签左对齐。表单标签和输入字段距离较远,用户从左至右浏览时间变长,并且根据上面Matteo Penzo的时间表上看,左对齐的浏览和填写的效率是3种常规的对齐方式中最慢的一种。但是,如果业务需要用户对表单放慢速度并谨慎填写(复杂表单或者表单中含有大量高级设置的陌生数据时),左对齐的方式会减少部分用户的出错率。但不太适合非中国区业务。

1.3 表单布局类型 

常规布局(简单)

 在实际业务中当表单字段较为简单时可使用,表单字段至上而下单列排列布局,用户只需纵向阅读填写,填写完成率较高。

多列布局(较复杂)
垂直空间有限并且表单含有较多填写字段的复杂表单时,可将具有相关联字段放在一个卡片区域中进行归类,将多个字段组合在一行,形成多列排布的暗提示帮助用户更好理解。

区域分组布局(复杂)
表单含有较多填写字段的复杂表单,可将具有相关联字段进行分类并以标题区分的形式进行字段分组,并且表单字段都在一个卡片区域内。

卡片分组布局(高复杂)
卡片分组布局一般用来处理高复杂类型表单。当业务中希望页面承载众多表单字段时,可将信息相关性弱的字段拆分为多个部分,并通过多个卡片分组承载不同类型字段,每个卡片都需有个卡片类别标题。 

 

写在最后

本篇文章从分析表单在产品中为何如此的重要,总结了在日常工作中设计师常常遇到的表单类型和布局,设计师可通过文章中的建议和案例进而合理的选择并灵活应用。以及在实际的业务应用场景中设计师如何规避和注意一些设计细节进而提升表单的体验。文章通过一些案例进行分析,希望大家能够通过此篇文章更多的是受到启发(而不是限制),能够在日常工作中灵活应用并举一反三。这里需要强调的是作为产品设计师不论是表单设计还是全局的页面设计,都需要有理解业务本质的能力和全局的业务思考能力,不然常常会被称之为“喂,那个画图的设计”。

文章来源:tob.design

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

组件化设计思维

周周

组件化设计思维,能够提升设计团队的生产力,让设计师专注于设计上的创意,同时让设计师完成更多产品需求和提升团队的沟通效率
 


 

 

写在前面 


组件化设计的流程,经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:

 

1. 明确组件化设计的内容。

2. 场景设计走查。

3. 组件化设计验证效果。

 


 


一. 组件化设计的案例(界面展示篇)


  

  


 


 


 小结:

组件化设计,需要设计师要有一个整体性的设计思维,要有很强的设计能力和良好的沟通协作能力,同时设计师要深入理解业务,这样组件化设计才能很好的在团队内落地推行。

组件化设计的优点有很多,能够提升设计师的输出效率,让设计师更专注于设计上的创意思考,提升沟通效率。

二. 原子设计方法论

 

 

 

原子设计方法论是由国外设计师 Brad Frost 提出的,他从化学元素周期表中得到启发,发现原子结合在一起,可以形成分子,然后形成组织。

 

Brad 把原子设计的方法论应用到界面设计中,用心观察会发现,界面是由一些基本的元素组成,颜色、文字、图标等都是一个个原子。

 

原子设计方法论,是由原子、分子、组织、模版和页面共同协作,可以帮助我们创造出一套符合公司产品的设计系统。

 

 


 

 

原子设计方法论是为了帮助我们去建立设计系统,目前逐渐被国内外的一些大公司,应用于创建统一的公司产品设计系统。

 

接下来,我们以金融产品为例 ,对原子设计方法论进行拆解,深入思考原子、分子、组件、模块和页面在界面设计中的定义是什么,以及对应的元素是什么,元素之间又是如何组合的。

 

 

原子

 

用户界面设计中的原子,是构成界面的基本元素。是一个单独的元素,如图标、标题、色彩等以及原子之间组合形成的新的元素组合。

 


 

 

我们开展一个项目时,为了保证各个页面保持统一的设计风格,我们会制定一套视觉规范,定义的内容包括:字体、颜色、栅格和图标,这些就是界面中最基础的原子。在关键的设计元素上,保证各个设计师达成一致,这样就能很大程度的保证不同页面的设计风格统一,并在这个基础上去探索更有价值和创意的设计方案。

 

 

 

 

分子

 

两个原子即可组成一个分子,以按钮为例:包含了文字、色块、栅格。

文字传达含义,颜色定义了按钮的特性,栅格为按钮定义了一个尺寸和规范。

 

 


 

 

把单独的元素做一个简单的组合,是我们做界面设计的一种方法,组合的方式简单且可复用性很好,作为开发者可以根据规则进行编写代码,提升产品的迭代效率和产品的一致性。

 

 

界面设计中的表单为例,表单是一个非常常见的设计元素,一个表单分子由分割线、文案、Icon和分割线等原子组成。原子组合之后,可以得到是一个可以应用在功能模块的组合。

 


 

 

 

组织

 

我们把分子和原子做组合,就可以创建复杂的、可扩展性的模块,然后变成一个组织。

 

 

组件在提升设计师设计效率方面有着很重要的意义,设计师可以把界面中常用的组件模块进行分类整理,比如:图片、卡片、输入框等,可以解决设计师日常的设计需求。

 

 

以金融产品为例,基本分为 3 类 :内容、表单、卡片化的设计。

每个卡片化的内容设计尽量保持统一性,这样方便负责不同模块内容的设计师复用同一个组件,就可以完成不同页面的设计,提升项目的设计效率。

 


 

 

 

模板

 

模版一般应用在设计系统的交互阶段,保证原型阶段的多方案的展示;模版内容,后面可以优化,这样可以降低设计的成本。模版的价值可以让设计师,更专注于页面的结构化设计排版和对页面布局的思考。

 


那模版的原理是什么呢?

就是产品的原型图,就是组织和分子的组合,会先形成一个完整的页面框架,作为一个初步的设计方案,作为团队项目的前期沟通所用。

 


以教育和金融界面为例,如下图:

 


 

 

 


 

界面

 

界面设计是把占位符内容替换成产品设计需要的文案,在模板的组合上进行完善,会形成界面的设计方案。

 


界面设计是模板的具体的展示设计,是真实内容的设计方案。

 


通过图标和文字的组合,清晰的展示用户所需要的场景,加上内容,就会变成一套完整的界面设计方案。

 


如下图所示:

 


 

 

 

以金融产品的场景设计为例,有了实际的内容后,我们可以发现通过组合组件,就能很好的呈现界面内容。

 


如下图所示:

 


 

 


小结:

原子设计方法论为界面元素提供了应用规则和组织整理,原子设计方法论在建立设计系统、团队协作、产品迭代优化等方面,都有很好的价值和意义。

 

 

 

 

三. 组件化设计的流程 ?

 


 

 

设计规范和 Ui kit 是我们管理一个或多个App统一性和设计效率的工具,同时探索如何更有效的提升设计效率。像 滴滴等Ant Design 设计系统,他们的产品体验非常好,用户使用产品时能够有效的满足其需求,良好的用户体验背后都有着一套好的产品设计系统在运作。

 


如下图,国外的金融产品运用组件规范化后的界面设计展示 :

 


 

 

系统性的组件化设计思维的好处是 :

 

1. 产品设计迭代优化时,版本和版本之间的差异性就可以得到很好的解决。

2. 界面设计之间的设计风格和设计样式就会统一。

3. 界面设计的效率和质量会稳定输出。

 


在我们所经常使用的 App 产品中,如 苹果、Airbnb、自如、Ant Design 等,用户体验都非常好,用户使用产品时能够快速的解决需求,优质的用户体验背后都有着一套强大的专业设计系统所帮助。

 

 

 

 

思考:我们为什么需要组件化设计 ?

 


一. 统一产品设计体验

 

1. 以京东金融为例,在京东金融最近更新的版本中,我们看到财富界面和生活界面,同样的模块可以复用,对于复用性高的内容,应该提炼为通用组件,提高设计效率。

 


 

 

2. 如上图所示,对于会员专区或者热门活动是金融类产品中最为常见的产品形式,在京东金融的首页出现,布局往往是左右结构,或者上下结构;因为这类产品具有较强的引导属性,所以会把右侧的运营的插画设计相对突出,以吸引用户的注意力。会员专区的卡片化设计,具有较强的复用性,可以列为通用组件,这样就可以保证两个产品界面的卡片化的设计风格和样式上的一致性原则。

 

 

 

二. 提高团队协作效率

 

1. 面对相同的设计需求时,可直接调用相关组件,节省重复性的设计工作,提升沟通效率。

2. 借助组件化设计,可以快速开展工作,达到复用的价值。

3. 通过设计语言可以完成一个界面设计,在下面案例中,主要的元素由文字、栅格线、Icon 等组成界面结构,确定好排版布局和图标的设计风格后,完成产品的界面设计。

 


 

 

三. 降低开发成本

1. 在实际工作中,如果每次制作一个新页面都设计不同的组件,开发就要写新代码,增加开发时间成本。

2. 如果我们常用的模块作成组件库,开发遇到相同的组件时,可直接调用组件,复用相关代码,这样可以降低开发成本。


 


  

组件化设计流程,

经过实际工作的锻炼和思考,具体可以拆分为 3 个方面:


一. 明确组件化设计的内容

我们需要整体思考,明确可以复用的的内容、组件,以热销理财场景为例,金融产品都会需要用户进行选择理财产品,可定义为理财产品的卡片化设计组件,适合组件化设计的模块。产品已有组件的优化,设计师要具体分析,分析组件体验现状,发现问题然后针对性解决问题。


使用产品的场景设计、交互体验、设计风格三方面都要思考,推出更好的产品设计的解决方案。以京东金融的财富和首页的界面设计为例,应用的都是卡片化设计的理财模块。在开发新项目的时候,同样可以调用同一个理财产品的模块化组件,不仅能保证产品上体验的一致性,也能降低团队的设计成本。如下图所示:

 

 

二. 场景设计走查

 1. 全面体验走查线上的移动端产品设计,对用户的交互行为链路有一个清晰的理解,思考当前线上的产品体验。

2. 线上产品功能的迭代一般业务方都会有一个周期性安排,因此在走查时要及时和业务方沟通,在这个基础上再进行组件化的方案设计。

设计师使用金融产品,在设计的时候要考虑到每一个环节。

我们先来看下京东金融的案例,这两个闪屏运营弹窗除了场景不一样以外,其他元素都是高度统一的,组件化设计的优势在于,只需要改变组件的部分元素就能适配各种场景。如下图所示:

 


 

三. 组件化设计验证效果(如下图)

 


 

 

组件化的设计方案完成对接开发上线后,我们需要从两个方面来验证组件优化后的效果:

1. 组件化设计是否可以满足各业务方的需求和场景化的设计。

2. 通过定性数据追踪功能是否能促进业务的关键的设计指标的提升,这些数据可以是转化率等数据指标,用户的反馈也是一个很好的辅助验证方法。

 

四 如何建立组件化设计系统 ?

 


 

 

每个团队的体量和业务诉求不一样,个性化的组件化设计系统包含有设计原则、设计语言和组件库,这是一个争议的概念。

建立设计系统的原因:

1. 建立设计系统,可以方便团队协作,保证体验上的一致性。

2. 设计过程中,发现每个业务的形态,以产品的不同场景为出发点,使用一套设计系统,会提升用户体验。

3. 帮助产品的迭代和优化,同时提升产品和用户的体验好感度。

 

 


 1 设计原则(设计理念、品牌指导)


设计的本质是解决问题,制定设计原则时要建立在这个设计中心思想上。

 


苹果的设计系统:

 

把审美作为第一要素存在于设计原则中。

1. 创意审美的重要性。 

2. 隐喻的价值。 

3. 易用性原则。 

4. 及时的反馈。

  

安卓的设计系统: 

1. 跨平台的设计适配原则。 

2. 材料的设计价值思考。 

3. 图形、强调、大胆的设计语言。

4. 动效的服务设计价值。

 

 

 

2 设计语言(色彩、字体、栅格、图标)

色彩的视觉语言规范,我们需要定义产品的基础色板和中性色板,基本色板包含了产品的主题色和辅助色,生成每个颜色的亮色和暗色的衍生色。中性色板包含黑白灰,这类颜色在界面设计中使用,能让页面内容具有良好的层次关系,提升阅读的效率和用户体验。

 

字体规范是界面设计中的构成之一,用户通过文字来理解和达成目标,完整的字体系统能有效的提高用户的体验和理解效率。字体的规范定义需要从三个方面出发:字重、灰度色、字阶。


界面设计的排版布局一般使用的 8 栅格法,它能适配不同尺寸的屏幕分辨率,界面元素大小和间距都是8 倍数为基准。

图标设计,隐喻,保持图标之间一致的设计风格和表现形式。系统图标为例子:以1@x图为例子,常见的尺寸有: 16px、24px、32px、48px等。

 


 

 

 

 

3 阿里系团队,制作的 Kitchen 组件化设计系统 很好 :(如下图)

 

 

 


 

 


 


 



 


 


 


 


 


 

 

 

 

五.  Banner 组件化设计、B 端组件化设计等平面组件化设计的案例如下:

 

 

 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

 


 

总结 :

佐藤写过一本书[佐藤可士和的超整理术],里面讲述了他自己是如何通过整理自己的思路、对话、工作室、随身物品等设计来让工作变得并且最终对自我更加深入的了解 。


生活和工作离不开“整理术”,优秀的设计应该要从“ 整理和总结 ”开始,比如:组件化的设计思维,可以看做是一种 “设计的整理术” 。

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



10分钟带你看懂支付宝的交互设计(首页篇)

周周

支付宝作为一个“简单、安全、快速”的支付工具,其交互设计与其他产品有何不同呢?不同的原因为何?

这篇文章是《10分钟带你看懂支付宝的交互设计》的(一)首页篇,后面还会继续更新。

下面进入正文:

一、了解支付宝的产品定位

体验操作系统:手机iPhone6s;

支付宝版本号:10.1.58;

在开始产品分析前,我们先来看看支付宝的产品定位。

所谓产品定位,包括以下三方面:使用人群、主要功能、产品特色。如图1所示:

图1  产品定位

从百度上支付宝的网页介绍(图2)和百度百科(图3)的介绍中,可以看出支付宝的产品定位为:致力于为广大用户提供“简单、安全、快速”的支付解决方案。

那么支付宝的产品定位可分解为:

  • 使用人群:广大用户;

  • 主要功能:支付;

  • 产品特色:简单、安全、快捷。

图2  支付宝网页介绍

图3  百度百科介绍

二、整体分析

当用户打开支付宝,看到的第一个界面,就是支付宝的欢迎界面,支付宝的欢迎界面很有特点——停留时间很短(因为时间太短,导致我无法成功截屏,所以这里就不放图了)。为什么支付宝的欢迎界面从来不像其它APP(如抖音等)一样会有一个广告呢(如图4)?

这与我们之前提到的支付宝的产品定位有关,支付宝作为一个“简单、安全、快速”的支付工具。当用户打开它时,多数场景下,都是用于支付,作为一个以“快速”为特色的工具类产品,就限制了它不能在欢迎界面做太长的停留,也不能做广告(尽管这种广告的收入很大),因为这样会造成用户极大的不舒适。

举个例子,当你早上急急忙忙的起了床赶去教室上课,在食堂买早餐时,打开支付宝付款,(原本你的内心就很着急)却还要像其它APP一样看一段广告!我想你此时一定会默默的骂马云,并且心里会慢慢开始对支付宝产生一种厌恶的情绪。

如果你有一天看见支付宝欢迎界面都开始做广告的时候,请相信我,支付宝一定活不到102岁那一天!

图4  抖音欢迎界面的广告

任何一个成功的APP,用户进去见到的第一个界面,一定是该产品最想让你看到的界面,也是存放产品主要功能的界面。在支付宝中,它的首页就是最主要的界面。

从整个支付宝APP的布局来看,底部采用五个Tab导航,分别是首页、财富、口碑、朋友、我的,当处于相应界面时,底部导航会变成支付宝的品牌“蓝”(图5所示),这个设计有三个作用:

①在视觉上与其它导航相区别,表示用户当前所处页面;

②利用品牌的颜色加强用户对品牌的认知;

③增强APP的界面一致性。

图5  支付宝底部导航

在首页这一界面,从整体看,总共被划分为了六个板块,从上至下分别是核心功能区、扩展功能区、信息通知区、活动展示区、其它产品区、导航栏(如图6)。

整个页面布局清晰,因为是以块状来划分层次,可扩展性也比较强(可以根据需要划分页面层次,同时界面改变也不会太大,不会影响用户的正常使用)。

在未来,如果支付宝需要发展其它重量级产品,就可以很方便的加入首页。(这里教大家一个方法——如何看出一个界面的模块划分,只需要把眼睛眯起来,不去关注内容,而是关注框架,就可以轻易的看见该界面的层次结构了。)

图6  支付宝首页层次划分

三、核心功能区

我们按照从上到下的顺序来分析支付宝的首页。

核心功能区位于页面顶端,是视觉焦点,又有一个支付宝的品牌“蓝”作为底色,一下就成为了视觉重心,很显然这个位置应该存放支付宝的主要功能,也就是支付功能。

支付宝的支付功能包括哪些呢?限于技术,目前支付宝主要通过识别二维码进行支付,所以扫一扫自然就是最常用的功能,所以放在第一个,付钱、收钱随后,敢预言,不管以后支付宝的版本怎么改,他的支付功能始终位于首页,而且是首页的视觉焦点。为什么此处卡包也置于页面最显眼的位置呢?

与支付宝的很多活动有关,因为很多商业活动都靠赠送各类卡卷来实现(也就是所谓的商业需求)。将搜索框置于顶层,看似抢了核心功能的风头,其实不然,设计师巧妙的在这里进行了处理,首先将搜索框的大小变小(但是不影响用户的正常点击),然后将扫一扫那一栏的图标变大,将字号也变大,视觉重心依然回到了扫一扫那一栏。但是为什么会将搜索框置于如此明显的位置呢?

首先随着支付宝的功能越来越多,由于页面的第一层级装不下,就会根据优先级进行排序,将优先级靠后的功能放入后一层级,因此很多功能的层级就会比较深。有了搜索框之后,用户就可以通过首页的搜索,快速进入用户需要的功能(用户需求),另外一方面,又可以在搜索框进行商业推广(商业需求)。

将通讯录也置于显眼位置,是支付宝对于社交功能的探索,从此处可以看出,支付宝对于社交功能的渴望。加号打开是扫一扫、收钱、乘车码、智能管理,将扫一扫置于该层级,可能是为了方便单手操作的用户,这样不管哪只手操作,都能方便的进行使用。

四、扩展功能区

扩展功能区,也就是支付宝扩展业务或第三方合作方入口,4*3的设计,与上方扫一扫、付钱、收钱、卡包对齐,增加了整个页面的整齐度,该区域的图标、字号,都相应的减弱,避免喧宾夺主。

大家注意看(图7),最后一个图标是更多,扩展性极强,只要有第三方想和支付宝合作,马云只需要增加一个广告位,然后笑着用自己的支付宝收钱就好了(我猜后期版本,支付宝会把“更多”这个按钮做的比其它按钮更抢眼一点,因为这是一个很大的流量入口,能够满足很多商业需求)。同时,该区域还有一个很好的交互方式,当用户进行长按图标,就可以进行调节,给了用户自主权。

图7  首页—更多

五、信息通知区

在信息通知这一栏,当有新的信息时,左边的蚂蚁会拿着一个信封微微摆动,不注意根本看不见,但是当你观察到了,你就会觉得好可爱,支付宝好用心啊,心里默默就会给支付宝一个好评,这就是情感化体验,给用户一个小惊喜。同时右边有一个小红点,会诱惑你去点击,去阅读信息,当你阅读了信息之后,就只有蚂蚁的触须在动,信封就消失了(见图8)。

图8  信息通知区

六、活动展示区

在活动展示栏(图9),虽然这个条目已经处于视觉中心以外,但是,聪明的设计师绝不会浪费任何一个可以利用的界面,于是设计师就利用轮播的图片来吸引你的眼球,轮播的好处在于,一方面可以播放多个广告(扩展性也比较好),另外一方面运动的物体可以吸引用户的眼球(这个原理源于在古代我们的祖先为了安全,总是会关注到运动的物体,这也就是为什么大多数网页中的广告都采用动画的形式,就是为了吸引你的眼球,去点击它。

图9  活动展示栏

七、其它产品区

其它产品区,就是一些活动和商业推广的入口(这就纯属于商业需求,为别的产品引流)。

说一下这里的设计吧,这里的“惠支付”字号比上面都还要大,是不是会抢了风头,答案是——不会,因为这已经是页面底端了,如果再不通过这种方式来强调这个版块,可能用户根本就看不见了。

同时,设计师利用亲密性原理——在视觉上挨得近的我们会认为是一组,而没有采用实线来分割,使整个界面简约了不少(图10)。

图10  “惠支付”

在首页,为了让用户知道下面还有内容,故意漏出一半的内容,告诉用户下面还有内容,同时,当整个页面下拉时,扫一扫、付钱、收钱、搜索,加号的图标就会置于页面上方,验证了我之前分析的一些结论(核心功能始终置顶显示、始终放在用户一眼就能看见的地方),当滑到低端时,一句文案“我是有底线的”,让人感觉这个APP还有一点人性、俏皮可爱,同时明确的告诉用户该页面已经结束了。

可能是因为支付宝是块状的结构,为了避免发生误触,所以进行页面切换时,并不支持左右滑动切,只能通过下方Tab导航进行切换。

八、总结

从对支付宝的首页界面进行分析,可以看出,在进行交互设计时,不仅要重视用户体验,同时要兼顾商业需求(当然还有技术,但是这里我不做表述),在两者发生冲突时,要考虑两者的优先级和重要性,综合考虑,寻求一个最佳点。

比如欢迎界面的广告,支付宝就永远不能做,因为这样做下来用户体验会很差,可能会流失一大批用户,但是支付宝可以在APP内接入广告来实现商业需求,这就是考虑用户体验、商业需求之后做出的决定,从而设计的界面,是一个很好的案例。

很多时候,交互设计更像是做减法,知道哪些该减去,而不应该做加法,把所有功能胡乱叠加,导致用户体验极差。用户体验差的产品,商业价值一定是无法实现的。

当然,除了像12306这种强势的APP……

文章来源:人人都是产品经理     作者:交互设计汪

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

Web导航设计

周周

一、导航的定义

牛津词典上有对Navigation一词在互联网领域的解释:

the way that you move around a website or the Internet when you are looking for information

翻译为:你在浏览网页时四处移动寻找信息的方式

也就是说用户看到的,影响其寻找信息的因素都可视为导航。


二、为什么需要导航

交互上:

用户在使用传统方式阅读时,所处的空间是单向的,只能向前或向后翻页;

而在网页领域,所有的内容都存放在各自的URL里,信息在多维度多空间里相互交错,各有联系,可跳跃的阅读方式让用户很容易失去位置感。

试想一下我们在大型商场里晕头转向的场景,会常常抱怨其导视系统的糟糕,网站有过之而无不及。

业务上:

从潜在用户想要了解某个产品时,导航就开始起作用了

影响点击量网站排名高低,搜索带来的点击量

影响转化网站的易用性,访问者转化为潜在客户和客户的概率

设计者创造易用的表单,展示有用的信息,建立流畅的交互,这些都要靠导航来引导用户达到。


三、从信息构建模式给导航分类

1.内容

内容涉及到的东西很多,内容之间的相互关系也不确定,因此不同内容导航需要不同的导航模式

1)种类

不同行业,不同业务重点对内容的分类方式不同

种类可以是符合大众认知,具有并列关系的信息,

也可以是按照设计者的意图创造出的种类,并区分其优先级

种类导航的出现无形中建立了用户心中对某类产品的预期信息架构,使其在浏览信息时更有方向性,例如在浏览一家服装店铺时,用户在进入导航列表前就对种类有了预期,诸如男士上装,男士下装,女士上装、女士下装、配饰,包袋等。


2)字母

以字母顺序排列信息。适用于信息量超大,且不存在主次、重要级关系的内容。常见于联系人列表,地区导航,介绍人名,合作伙伴等场景。


3)自然属性

以时间,地理位置等属性组织信息架构。

时间:展示在一段时间内发生的事情,以时间为导航可以直观地感受到信息的变迁,立体感更强。例如一个企业的发展历史

地理位置:展示在不同地理位置的事件信息,空间感更强


2.层级

也叫做结构导航,根据信息的上下级关系、主体信息架构等因素将信息有序排列。分为全局导航和局部导航。

全局导航往往指页眉和页脚,存在于网站的大部分页面,便于用户随时跳转。 

页眉:用户进入网站关注到的点,将网站进行功能分类后,将导航文字放置在页眉上

页脚:此空间是为隐私和法律链接保留的,还会加上联系方式,也有许多内容繁重的网站会把站点地图放置在页脚。

雅各布·尼尔森把全局导航在网站中的作用形象地比喻为机舱座位下的救生衣 ,你只要知道它哪 ,而不必时时关注它,需要时立即找到穿上即可。


局部导航是是更深层级的导航,不作用于全局,存在于特定的功能区,可分布在页面各部分。


3.功能

业务上必要的一些功能入口,通常贯穿全局,例如很多网站的个人信息,用户需要在大部分时刻都可直接接触到该功能。根据用户的心理模型,这类功能会存在于页面的右上角。


4.搜索

用户使用较多,也是最重要的导航方式之一。当带有明确的目的性或无法通过内容,层级导航找到想要的信息时,用户会在搜索框内尝试输入一些信息。

而让用户主动搜索会出现下面的情况:用户无法清晰表达或错误地表达其想要搜索的内容,导致系统无法匹配上对应的信息,

为了让搜索导航更有效地发挥其作用,出现了自动填充,模糊搜索,推荐搜索,搜索历史,搜索纠正等一系列导航功能,这些功能都是为了想办法将用户引导到他可能需要的页面上。


5.网站地图

以类似地图的样式来展示网站页面之间的层级关系,并提供相应的链接。可视性强,便于用户找到想要的信息。


四、导航的常见样式

1.文字与图标

考虑到排版布局,样式美观,除了用文字本身的含义用作导航外,图标也经常被用作导航,分为纯图标导航和文字+图标导航,这里图标的风格会很大程度上影响这个页面的视觉效果


2.横向导航

将导航文字横向有序地排列,独立性强,占用空间较少,可放置的导航条目有限,但这个局限性也可以成为优点,它要求设计师创造出简短,易于理解,且满足业务需求的标题。

当内容过多时会选择在单个导航下放置下拉显示二级导航,下拉显示的二级导航可以很长或采用滚动显示的方式,这种临时的模态导航可以最大限度地利用到屏幕空间。

很多网页的横向页眉导航会保持滑动时固定的样式,便于用户时时找到主页面的入口。


3.竖向导航

占用空间较多,通常放置在页面左边位置,用不同的底色或分割线将其与主内容分开,内容文字一般采用左对齐,便于阅读,导航层级过多时会采用点击展开的样式,上下滚动的常用交互也让竖向导航容纳的内容更多。

部分竖向导航是可隐藏或收缩的


4.混合导航

在拥有复杂信息的网页中,会将横向导航,竖向导航等其他样式混合使用,


5.面包屑

面包屑导航是位于页面顶部或底部的一行内部链接,在不同层级的链接之间用“>”分隔,可让访问者快速返回上一版块或根网页。许多面包屑导航都将内容最宽泛的页面(通常为根网页)设置为最左边的首个链接,并在右侧列出更具体的部分。

占用很少的空间并提供主导航实现不了的深层次定位功能。

面包屑的使用让网站的结构更加清晰,强化用户的心理层级模型,并实现跨层级跳跃

6.分页与无限滚动

分页显示的内容数量固定,有时用户可自定义内容数量,此外页面上通常有当前页,任意页,上一页,下一页,首页,末页的链接。具有定位性,当用户需要回到之前浏览过的某个位置时,可采用分页的形式


无限滚动希望用户只注意当前页的内容且不能快速到达页面的底部,适用于无法预测用户何时能够找到需要的信息的情况。在一些图片展示,内容推送的网站上设计者不知道用户想要的内容,同时也要展现网站内容丰富,资源库深不见底的特质会采用交互上更简单的无限滚动模式。

7.突出的版式

一些设计者想要用户优先注意到的内容,会采用突出的版面设计,通过改变文字图形的大小,颜色等与其他一般性内容形成对比或使用海报,弹窗等形式试图引导用户行为。


五、导航设计的建议

根据上面第三和第四点,分别从信息层和表现层给出导航设计的建议

信息层

1.信息结构尽可能扁平

多花一些时间去考虑信息体系结构,可根据首页规划全局的导航,首页是用户在网站中导航的起点,考虑如何让用户尽可能方便地从网站上的宽泛内容(首页)转到他们所需的更加具体的内容。


2.重视导航的顺序

当同一级别的导航数量很多时,顺序变的更加重要。根据用户的认知习惯,开头和结尾作为关注度(看到的)和保留度最高(刚刚发生的)的地方,其内容更加突出。


3.SEO优化

良好的网站导航结构可以帮助搜索引擎了解哪些是网站站长认为重要的内容,尽量用一些具体的描述词语而非大而宽泛的词汇,例如“产品”,“服务”。虽然搜索引擎的搜索结果是在页面级别提供的,但它也希望了解页面在网站这个更大层面上的角色。导航中关键词的使用会影响其在搜索引擎中被搜到的质量。


4.创建网站地图

用于显示网站结构的一个简单页面,通常包含网站页面的分层列表。如果在网站上查找页面时遇到问题,用户可能会访问此页面。此外搜索引擎也会访问此页面,以便使抓取范围尽量覆盖网站的全部页面。


表现层

1.一致性

同一类型导航的视觉表现与交互操作在整个网站页面中要保持一致,清晰一致的导航可以让用户预见每一步操作的结果。


2.清晰性

颜色与大小:文字颜色与背景颜色的对比,标题与内容的字号大小,这些最基本的元素直接影响导航的清晰度

留白与装饰:与平面设计中原理一样,留白让网站页面布局平衡,张弛有度;装饰与留白相结合,让导航表现得更精美,也有助于视觉分割

强调与弱化:有些导航起引导作用需要突出,有些起辅助作用需要弱化,强弱对比结合丰富了视觉层次,并让导航起到它该起的作用


3.凸显超链接

将可点击的超链接文本与常规文字在样式和交互上进行区分,常见做法有下划线,文字颜色,加粗,鼠标悬浮变色。


4.在常规位置放置导航

网页发展的几十年让用户对网页产生了一些常识性认识,例如用户会在进入一个网站时去页眉或侧边栏寻找主导航,尽量遵循这些常规用法。


5.导航数量不宜过多

无论是全局或局部导航,数目越多用户处理和记住信息的难度越大,可以通过分组分层来提高信息浏览效率


6.侧边栏

侧边栏导航会占据一部分的屏幕空间,将其与主内容部分进行分割有助于用户,例如用反差较大的背景色形成导航区与内容区

加入导航收缩功能,以便更好地利用屏幕空间,特别是在一些小尺寸屏幕上。


六、导航设计审查:

在做完网页设计后可以根据浏览网页的一般习惯,通过以下几个方面对导航设计进行简单审查

问自己以及团队其他成员以下几个问题

1.这是什么网站

2.网站有哪些主要内容

3.导航看上去是否像是导航,可点击的

4.导航的名称是否会引起歧义

5.现在处在网站的哪个层级

6.如何进退

7.具体的功能是否会在预想的地方出现

8.怎么进行内容搜索

借助工具

9.使用Google Analytics对网站的访问情况进行回顾并进行一些评估

例如一些页面的浏览量极低于预期或相较于同类页面浏览差距过大,就要考虑是否是指向该页面的导航出现了问题。


总结

导航的最终目的是简化获取信息的过程,具体以何种方式表达还需要取决于业务内容,但总体上要以用户易接受的方式呈现。用户若是能在获取信息的过程中按照设计者所想的方式前进并感受到畅通无阻的快感,导航便是成功的。


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


聚合者:数字时代的主导

资深UI设计者

互联网技术的快速发展,数字化的时代也在悄悄来临。数字化时代,谁才是真正的领导者?互联网时代和数字时代的不同在哪里?本文作者对这些问题提出了自己的一点思考,与你分享。每一个时代的来临总是会有一些迹象来印证它,来诠释它。

互联网时代如此,数字化时代同样如此。

当数字化的浪潮在零售、金融等行业里翻涌,一个以数字化为主要标签的全新时代正在一步步走向我们。

接棒互联网的现实,注定了数字化本身就生而不凡。

同样地,数字化可以以互联网为镜,审视自身的成败得失。

同互联网时代仅仅只是对传统行业的上下游进行去中间化的处理不同,数字化时代更加关注的是对于传统行业的底层改造以及基于这种改造衍生而来的重构与再造。

这一逻辑决定了数字时代与互联网时代的最大不同,就是传统行业的构成元素将发生深入而又彻底的根本性变革,由此带来的是行业本身更加颠覆性的改变。

在数字时代,联通人们生产和生活的“毛细血管”将不再仅仅只是简单意义上的互联网,而是更加本质和更加彻底的数字

在互联网时代,建构于互联网技术之上的联通是基于互联网平台的中介和撮合来达成的,虽然效率得到了一定程度的提升,但是,这种提升的幅度与效率都是不可持续的。

等到流量红利见顶,平台的中介和撮合作用难以发挥,行业的运行效率又将陷入到新一轮的困境之中。

数字化便是在这种大背景下诞生的。

同互联网技术不同,数字时代的效率提升首先做的是行业底层元素的深度改造,改造完成之后,再对新的元素进行重新建构,并且产生新的行业形态,从而达成通过深度改造行业来提升效率的目的。

虽然在这个过程当中,大型的数字技术提供者们依然扮演着相当重要的作用,他们可以凭借原始的技术积累占得先机,但是,数字时代的效率提升已经不再是简单意义上的撮合和中介,而是变成一种由内而外的自我进化。

效率提升同样是由内而外产生的。

此刻,仅仅只是简单地去中间化必然无法达成这一目标,必然需要更深层次的变革才能获得发展。

由此,我们几乎可以确定的是数字时代的产业变革要比互联网时代的产业变革更加彻底和全面。

我们都知道,在互联网时代,出现了以阿里、腾讯、京东、美团为代表的大型互联网平台,人们生活的方方面面几乎都集中到了这些大型的互联网平台上面。

可以说,这些大型的互联网平台引领并且推动着互联网时代的发展。

当数字化时代的号角吹响,新战役即将打响。

那么,在数字时代,谁才是真正的主导者呢?

正如上文所讲,互联网时代是以撮合和中介为主打的发展模式。这种发展模式决定了互联网时代的发展必然是建立了强大的流量基础上。

于是,坐拥海量流量的互联网平台理所当然地成为这个时代的引领者和推动者。

当数字时代来临,它的发展模式是建立在对于传统行业的内在元素和流程进行深度调整和重构的基础上的。

因此,只有那些真正能够改造传统行业的内在元素,并且可以再造传统行业的运行流程的玩家,才是数字时代的引领者。

改造传统行业的内在元素并不是一件容易的事情,它需要的是从传统行业的流程和环节着手,通过新技术的应用让传统行业的内在元素发生根本性的改变。

然而,这种现象仅仅只是在数字时代的早期阶段出现。

在数字时代的早期阶段,只有那些真正能够不断赋能传统行业,对传统行业进行数字化改造的赋能者,才是真正意义上的引领者。

这就是我们现在所看到的产业互联网时代。

当产业互联网时代完成了对于传统行业的流程和环节的数字化改造之后,传统行业那种烟囱林立的封闭状态开始被改变,信息孤岛开始被联通。

此刻,数字时代开始进入到一个全新的发展新时代。

这个阶段,才是真正意义上的数字化时代。

如果我们再去一味地对传统行业进行深度赋能,对传统行业的内在流程和环节进行数字化的改造,而不关注改造后的成果,必然会面临新的困境和难题。

于是,数字时代开始进入到全新发展阶段。

这个阶段,真正考验玩家们的不再是赋能的能力,而是如何将业已被数字化的流程和环节进行重塑和再造的能力。

值得注意的是,在这个阶段,不同流程、不同行业之间的壁垒业已得到了上的消弭,信息自由流动,数据高度共享。

如何将这些行业内部的不同流程,甚至是不同行业的数字元素进行再度整合,并且发挥出最大的作用,甚至衍生出新的行业物种,才是考验玩家们的地方。

在这个阶段,真正的引领者将不再是单纯意义上的赋能者,而是变成了聚合者。

这里的聚合者,就是把那些业已被数字化的行业内部的流程和环节,业已被数字化的不同行业真正能够重新拼接和组合的玩家。

同赋能者仅仅只是做简单的赋能不同,聚合者必须对不同的流程、不同的行业有深度且全面的把控,并且有能力对流程和行业进行再造和整理。

当聚合者们完成了对于传统行业的深度改造和重新整合之后,新的产业才能出现,数字化才算是真正完成,数字化时代才算是真正来临。

如果我们仅仅只是把数字时代停留在早期的赋能阶段,缺少了对于传统行业的重整,那么,这样的数字化只能算是完成了互联网时代并未完成的工作,却没有做好真正自己要做的工作,仅仅只是半拉子工程。

只有完成了行业内部流程和元素的数字化改造,并且衍生出来了新的行业物种,数字时代才算是真正来临。

当越来越多的迹象出现,一个以数字化为代表的全新时代正在来临。

正如互联网时代出现了以大型互联网平台为代表的引领者一样,数字化时代同样会有其推动者和引领者。

在数字化时代的早期阶段,那些真正能够对传统行业进行深度赋能的玩家——赋能者——才是这个阶段的引领者。

当数字化完成,特别是当数字化时代的发展进入到行业的重塑与再造的阶段之后,那些真正能够将业已改变的行业进行再造的玩家——聚合者——才是数字化时代真正意义上的引领者。

文章来源:人人都是产品经理    作者:孟永辉



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

用超多产品,解构今日头条设计背后的逻辑

资深UI设计者

今日头条的出现颠覆了传统新闻产品(如网易、新浪和搜狐新闻)。

传统新闻依靠着编辑人员的推荐,将新闻触达给用户,而今日头条则依靠着新闻算法,抛弃传统人工分发的思路,使分发效率数以万计的提升,其迅速崛起,成为头部新闻资讯产品。

今日头条作为新闻信息流的头部产品,里面的设计细节和设计逻辑值得我们思考和分析。

信息流样式

什么是信息流?信息流有两部分组成,信息流=信息+流。

信息指的是内容,这些内容可以是新闻、视频、图片等,所呈现的样式多为列表或卡片。

流指的是瀑布流,可以无限滑动浏览。

所以信息流就是可以无限滑动浏览内容信息。

信息流的样式的好坏,会直接影响到信息的展现效率和点击率,从而影响到用户获取信息的效率和整体阅读时长。

下图为今日头条首页推荐频道的信息流:

用超多产品,解构今日头条设计背后的逻辑

将信息流样式进行简单分类,使用最多的四种样式为纯文、左文右图、短内容、大图视频。如下图所示:

用超多产品,解构今日头条设计背后的逻辑

纯文样式用于新闻中没有图片的情况,当文章中没有图片时,这时候采用改样式。列表含有:标题、来源、评论数、发布时间。

对于含有图片时候,采用左文右图样式。目前新闻对于含有图片的列表样式,一般有3种分别为:左文右图、左图右文和三图。

左图右文的样式,强化图片,弱化标题。对于新闻资讯来说,图片无法准确的表达其新闻资讯的内容,所以这种样式目前没什么产品使用。

目前市面上绝大部分产品都采用左文右图,例如今日头条、网易新闻、腾讯新闻、新浪新闻等。只有是搜狐新闻采用左图右文。

用超多产品,解构今日头条设计背后的逻辑

三图则通过图片吸引用户点击查看,更加通过图片引导用户点击,好处是可以提升点击率,但是整个信息流显得乱,影响用户阅读。

用超多产品,解构今日头条设计背后的逻辑

和网易相比,头条信息流阅读起来更加舒服,视觉压力减少,这是基于今日头条三图样式占比很少,如下图所示,网易新闻信息流插入三图样式导致整个信息流杂乱。

用超多产品,解构今日头条设计背后的逻辑

对比下网易新闻和今日头条信息流样式,如下图所示:

纯文,今日头条的标题颜色更深,网易的相对而言淡一些。头条的列表高度比网易的高,这意味着,头条的屏幕展示条数比网易新闻的少,但是整体的空间感和留白呼吸感更舒服。同时今日头条含有发布时间,使得用户观看新闻资讯时,能够感知新闻的实时性。

用超多产品,解构今日头条设计背后的逻辑

左文右图,头条的列表比网易的要高一些,对比来看,头条的标题更加明显,图片含有圆角半径,使得头条整体看上去更舒服。

用超多产品,解构今日头条设计背后的逻辑

大图视频,两者的区别不大,依然是标题文字颜色、封面圆角和发布时间的差异性。

用超多产品,解构今日头条设计背后的逻辑

小结:

头条流整体的空间感、留白,标题颜色对比做的比较好。

留白相对于网易更多一些,相同的屏幕空间,展示的内容信息会少一点,屏幕展示效率会低一些。但用户在阅读过程中舒适度更强,同样的情况下用户的阅读时长会变长。

信息流分发

什么是信息流分发?通过一定的设计策略,将用户的流量合理的分配到其他各个地方,从而达到产品的设计目标,促进流量利用最大化。提升流量最大限度的转化,获得更大的商业化价值。

今日头条的信息流主要包含5个模块:置顶模块、资讯列表、广告模块、短内容、其他功能模块的卡片入口。如下图所示:

用超多产品,解构今日头条设计背后的逻辑

推荐流顶部的置顶内容,最多置顶两条,这里是因为相关政策原因。

在正常信息流第一条之后,插入广告,为平台做商业化营收。之后就会根据用户的阅读习惯,给用户推荐信息内容,并时不时的插入广告等。

今日头条没有编辑运营,所以几乎所有的新闻都来自于机器算法。少了编辑人员的人工运营,使得今日头条有巨量的内容按照不同用户的阅读习惯推荐用户不同的内容。

搜索栏

在新闻信息流产品里,搜索栏所承接的使用场景主要有两个。一个是提供搜索新闻功能,通过关键词对当前或过去的新闻进行搜索。

另一个是在搜索模块提供热搜新闻,提供用户阅读。

那么如何提升搜索栏的点击次数。今日头条将热搜新闻以提示语的形式展示在搜索栏滚动,吸引用户。同时为了更大限度的展示新闻条数,采用一排两个的设计,保证的提升点击率。

用超多产品,解构今日头条设计背后的逻辑

用户点击搜索框之后,搜索框里面内置第一条热搜关键词。用户可通过键盘上的搜索,进行搜索。也可以点击搜索栏下方的两个热搜新闻进行搜索查看。

短视频

视频标题内置于播放器中,这样的好处可以减少卡片高度,让视频曝光量提升,缺点是用户如果想看视频标题介绍时,则需要点击下播放器,标题才能再次出现。

用超多产品,解构今日头条设计背后的逻辑

标题置于播放器里面,头条可以展示2.5条,而好看视频将标题置于外面只能展示2条,如下图所示:

用超多产品,解构今日头条设计背后的逻辑

对于广告业务来说,收入的一个重要指标则是广告曝光量,为了提升广告的收入,则必须降低视频高度,使得广告曝光效率得到提升,以此提升收入,所以头条将标题放置于播放器里面符合商业目标,但是不符合用户目标。

小视频

小视频的布局设计大致有两种,一种是抖音式布局,采用头像和操作项位于右侧。这样的好处是,视频的互动量很明显的展示出来,可引导用户互动。但对视频的内容有一定遮挡影响。

另一种是好看视频式布局,将头像昵称、操作项放在底部,弱化视频的互动数据。让用户专注于视频内容。

用超多产品,解构今日头条设计背后的逻辑

今日头条的小视频采用和抖音一样的布局。头像和操作项放于右侧。但是为了引导用户评论,在界面底部加入了输入框,引导用户评论,为了让用户更加方便的看评论。上滑手势变成了调起起评论。

用超多产品,解构今日头条设计背后的逻辑

短内容流

推荐流里面的短内容(微头条),点击进入短内容feed流。而非短内容详情页。用户如果想看详情,那么需要用户再次点击。

用超多产品,解构今日头条设计背后的逻辑

这种设计明显体验不好,估计产品为其他短内容导流。这样的交互设计,可以使得整体的短内容流的曝光量提升好几倍。

这种做法牺牲了体验,用户如果需要看详情,则需要连续点击两次。这是为了业务指标作出牺牲的设计。

文章来源:优设    作者:Echo的设计笔记 


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

设计师必看的个人中心设计指南

周周

个人中心作为app类的重要页面,无论是交互设计师还是视觉设计师,都需要对个人中心的设计过程做到胸中有数,本文就“个人中心”版块进行分析与总结,一起进步。




文章来源:站酷

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

抖音关闭所有电商外链,剑指京东、淘宝?

资深UI设计者

编辑导读:疫情之下,短视频直播带货意外创造出了流量+电商这种新型合作模式,更是给抖音直播电商的发展添了把火。8月26日,抖音宣布:10月9日后,抖音直播间只支持小店商品,第三方来源的商品将不再支持进入直播间。至此,抖音想要打造电商闭环的野心终于显露,本文作者对此展开了分析讨论,与大家分享。

8月26日,抖音正式官宣将在10月9日起关闭直播间的电商外链,第三方来源的商品将不再支持进入直播间购物车。也就是说像淘宝、京东等其它平台的的商品将无法在抖音直播间内实现直接跳转购买。

而对于抖音这一举措,其实我们并不难看出字节跳动想要在电商业务上与阿里、京东等电商平台“扳一扳手腕”的决心。

今年六月,字节跳动便成立了以“电商”明确命名的以及业务部门,结合其目前所拥有的产品矩阵,开始全面进军电商业务,以解决字节跳动在信息流广告与直播营收达到天花板之后的下一步商业化难题。

这便与2020年最红的风口——“直播电商”不期而遇,因此字节跳动火速开展抖音直播电商方面的布局,力求新的商业化出口。

  • 8月6日,抖音发布美妆品类直播带货新规,非抖音小店的其它电商平台,例如淘宝、京东、蘑菇街等渠道的美妆类产品只能通过巨量星图,发送任务单才能上架购物车,而抖音小店则不会受影响。
  • 8月17日,巨量星图发布公告,自8月20日起,对于第三方平台上架销售的商品,平台将会抽取20%的服务费用,抖音小店则仅收取5%。
  • 9月6日,不仅仅是美妆,全品类商品都需要通过巨量星图发送任务单才能上架购物车。
  • 并且自10月9日起,第三方来源的商品将不再支持进入直播间购物车,也就意味着自10月9日之后,非抖音小店上架的第三方平台商品将无法在抖音上进行直播带货。

从之前发布的章程中我们可以看到,抖音从2019年下半年方才进行电商业务布局,迄今为止才运营了不到一年时间。那为何字节跳动就敢凭借“直播电商”开始与运营了数十年之久的淘宝和其它电商平台进行“正面对决”?直播电商真的有这么大的“魅力”吗?

一、直播电商的魅力

1. “直播电商”——2020年最大的风口

2020年初,一场突如其来的疫情牵动着全国上下乃至全世界的目光,全中国进入封闭阶段,而直播电商也迎来了其飞速发展的契机。受2020年疫情爆发和超长假期的叠加影响,线下购物渠道近乎完全关闭,然而在物流恢复后,线上电商获得了良好的发展时机。

同时直播和短视频用户数和使用时长激增,企业神速转型,品牌线上渗透率提升,直播电商作为快速提升流量转化效率成为品牌宣传销售新阵地,也成为各大平台竞相角逐的热点赛道。

根据艾媒数据显示,截止至2020年3月,中国网络直播用户规模达5.6亿,其中直播电商用户规模约2.7亿,占比48.2%,而受疫情影响,有近7成的用户经常观看带货直播。

根据数据显示,经过前几年直播带货所带来的市场教育,特别是受此次疫情影响,用户对于直播电商的接受程度明显提高,成为了用户生活、娱乐、购物的重要组成之一。

直播电商所带来的影响力,已成为2020年最受关注的营销活动。

2. 直播电商如何带动用户进行消费?

还处于线下购物时代时,我们常常会看到销售员在某个门店或是某款商品前大声吆喝,又或是树立起打折促销的立牌等各种促销活动。当顾客被吸引过去时,销售员往往会通过他们精湛的话术来诱导顾客进行购买。顾客则是被撬动了理性,成为了“冲动消费者”。

如果说电子商务是重构了人-货-场的概念,将销售渠道由线下改为线上的话,直播电商则是将这种线下的营销模式与购物体验搬到了线上。

传统的电商模式是由消费者浏览商品信息去进行商品的挑选,它将商品提供给消费者的模式转变成为由消费者选择产品的模式,而其中主要是人与物的对话;而直播电商不同,影响的是消费者进行选择的过程,实现的是人与人之间的对话。

而为什么人与人的对话会实现更好的营销效果?

结合我们之前所提到的线下营销方式能够刺激消费者的购买欲望来看,直播电商则是进一步强化了撬动消费者理性的方式。得益于直播所带来的沉浸感与互动感,使得消费者对于商品的信任程度在不断的上升,更容易去实现销售活动。

《乌合之众:大众心理研究》中曾提到“从智慧的层面上看,群体总是要比被孤立的个人水平低,更容易受到群体感受的驱使”,表明一个人或个体进入到群体当中后,就会被群体带动,去做一些原本个体不会去做的行为。

而直播带货也是如此,用户通过弹幕、评论、刷礼物等方式组成一个无实型的整体,再由主播作为关键意见领袖进行领导,并给予相应的优惠作为动力驱动,使得用户受到“群体”的驱动,实现“冲动消费”。

直播电商通过更强的互动方式来提升用户再进行购物时的信任感,以此减少用户在进行商品消费时的思考空间,提升情感驱动的价值,从而促进消费者实现冲动消费行为,也因此取得了比传统电商促销更好的销售业绩,成为了近两年最受关注和欢迎的营销方式之一。

二、抖音在直播电商中的布局

抖音其实早在2017年便开始进行电商业务的布局,知道搭乘2020年电商直播的“快车”,便正式开始着手扶植电商业务的发展。

4月1日愚人节当晚,中国最后一个初代网红“老罗”伴随着节日“欢快的气息”,开启了自己在抖音的首场带货直播。世人皆笑谈老罗迫于生计开始“下海”,殊不知挣钱嘛,生意,不寒碜。

根据抖音官方数据显示,这场直播累计观看人数超4800万,订单量50.8万,单场销售额1.1亿元,音浪收入335万元。虽然相较于李佳琦双十一单场直播破10亿的“奇迹”仍有一段差距,但若是排除双十一等直接因素,老罗这次直播热度也可排进直播电商前三的位置。

而之后伴随着“罗永浩直播带货”首秀所带来的热度,抖音开始全面布局直播电商业务。

在功能端:

  • 5月7日,抖音小店开放个人身份入驻,可入驻服装、鞋靴、运动户外、厨具四大行业,不需要营业执照即可申请,只需缴纳500元保证金;
  • 5月15日,巨量星图上线直播业务,提供达人精准推荐,在线下单等功能;
  • 5月15日,DOU+上线“直接加热直播间”功能;
  • 5月26日,抖音直播间新增点赞功能;
  • 5月29日,巨量星图上线“投稿任务”,强化达人变现;
  • 6月初,抖音上线「抖店」APP,有消息显示,小店商家数量已近百万。

同时,抖音通过各类推广活动进行造势,持续获取热度与大众关注。

  • 5月15日-17日,抖音启动“515王牌直播间”主播排位赛,陈赫、王祖蓝、罗永浩分别排位前三;
  • 5月22-6月25日,抖音正式上线“元气学院”;
  • 5月23日,抖音直播“百万开麦”主播扶植计划再升级,除了提供千万曝光支持外,还能帮助优秀的内容生产达人快速实现涨粉、变现;
  • 6月5日,抖音联合4大经纪公司发起“练习生请开播!抖音星主播共培计划”;
  • 6月9日,抖音与混沌大学共建“知识创造营”,陆奇、李善友等名人直播演讲

并且,在6月18日,字节跳动正式成立了以“电商”明确命名的以及业务部门,这也就意味着电商已经明确成为了字节跳动的战略级业务,开始持续跟进业务流程与创新。

三、抖音的直播电商,未来路在何方?

从以上关键节点我们可以感受到抖音当前的直播带货战略,多以签约、培育和挖掘头部主播等来的获取到热度,从而打破淘宝薇娅、李佳琦,快手辛巴等其它平台头部主播对于直播带货行业的“垄断级”影响力。

而数据表明抖音在直播带货元年的建设确有成效,收割了大批流量和资本的关注,为平台带来了持续的热度。但随着时间的沉淀,明星带来的流量除了忠诚的粉丝以外,沉淀下来的粉丝数量相较于总数而言并非十分乐观。

虽然得益于抖音销售额+音浪的方式,帮助实现销量和流量的双丰收,从而带来足够的利润意外,抖音在自身电商平台上的建设仍然是捉襟见肘,与淘宝京东等成熟的电商平台相比,相差甚远。

因此抖音围绕着“打造电商产业闭环”这一战略任务出发,开始切断非平台上架的外链商品,从而促使商家开始入驻抖音平台,打造成熟的商业闭环。

从当下来看,抖音这一手操作,并未能取得多少的利益,甚至还会有损个人商家的销售额。但是字节跳动的目光向来都是比较长远的,他们想来不是为了蹭一波“直播电商”的热度,赚一遍快钱便迅速离场,而是下足了决心要持续深耕平台的电商业务建设。

在这里提一个问题:对于商家和消费者而言,一个良好的电商平台应该是怎样的?是有统一的平台供应链管理、实时的用户数据反馈从而为商家带来良好的销售数字;是有的物流、优质的商品、实惠的价格、亲切的服务所带来的良好购物体验。显然抖音当前的电商平台建设并没有做到这一点。

而通过对商家入驻抖音小店之后进行统一的管理,抖音能够在功能层面为商家提供供应链建设的帮助,提供实时有效的数据反馈从而帮助商家实现灵活的营销推广。对于消费者也是如此,通过平台统一的有效管理,能够以低成本的方式实现更好地产品建设,从而为商家和消费者带来更加优质的购物体验。

从内容出身的抖音,讲究百花齐放、百家争鸣,通过优质的算法能力来尽可能地满足不同用户的不同需求;而电商业务不尽相同,通过关闭第三方外链的方式,来加强对于平台的监管与建设,方能为用户带来更好的购物体验。

抖音凭借着优质的内容不断提升用户感受刺激的阈值,撬动着用户的消费理性。但随着用户热情不断冷却,消费逐渐趋于理性的阶段,抖音是时候开始完善平台电商业务的功能涉及,通过感性来刺激消费欲望,通过理性来维持消费行为。

文章来源:人人都是产品经理    作者:zbb


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

iOS14 做了哪些体验升级

资深UI设计者

iOS14 你升级了吗?是否值得升级呢?来看看给大家准备的体验总结,不足之处往留言补全。

在大家的期盼与猜测中,苹果2020年秋季发布会如约而至。关于发布会的内容本文就不做解读啦!相信各位互联网设计师都是早早的就通宵补上啦!今年并没有发布新版的 iPhone 手机,但是新的 iOS 系统却没有迟到。带着作为设计师的敏感度,我依然升级了新版的 iOS14,今天便为大家整理一些个人觉得不错的体验感想,一起共勉。

 

刚升级完成就简单的把玩了一下,升级后的设计还是带来了很多惊喜和变化,体验度也更加流畅。接下来我们就一起看看升级后的系统带给我们哪些更好的体验,以下仅展示个人用过的部分,欢迎大家补充完善。

 

 

01、新增 App 资源库,实现自动排序

iOS14 更新之后带来了很多新变化,首先提到的就是主屏幕最后一页新增了 App 资源库,自动帮你整理安装的所有 App,还可以根据你的使用习惯进行自动排序。也可以通过搜索进入资源库搜索列表,以字母排序便于查看,关键词搜索快速的找到指定的 App,方便用户更好的管理与查看安装的 App。


 


 

02、隐藏主屏幕页面,手机桌面更简化

往期版本长按主屏幕是没有任何交互动作的,除非是长按应用图标。更新后的 iOS14 版本长按主屏幕可以激活桌面应用图标的管理和删除,点击底部切换的小圆点可以把所有主屏幕缩略图展示。通过勾选可以隐藏某个页面来简化主屏幕,方便用户可以便捷的进行应用管理。


 

 


03、桌面小组件带给你更多惊喜

iOS14 新增了可自定义的桌面小组件,重新设计的小组件更为精美,并且支持添加到主屏幕。长按主屏幕点击左上角“加号”即可添加小组件,有多种尺寸可供选择,方便用户根据自身情况选择,一目了然。


 

 


04、来电弹窗不再遮挡屏幕

当你的 iPhone 来电时,之前都是整屏显示,更新后的来电以弹窗的形式出现,界面不再遮挡屏幕,向上清扫即可拒接。清扫之后以震动的电话小图标显示在左上角,单击即可激活来电界面,操作更加便捷。


 

 


05、视频画中画带给你不一样的视听体验

在很多的影视类 App 中都已经实现视频画中画,但是在手机主屏幕上体现是 iOS14 更新后的一个新增。

 

当用户在观看视频时打开画中画,可以将视频浮动在屏幕上。双指交互可以放大、缩小视频窗口,拖动到屏幕外可以实现隐藏操作。视频画中画让用户在观看视频时可以进行叠加操作,带给用户更好的操作体验。


 

 


06、轻点背面让快捷达到了

iOS14 新增了轻点背面操作功能,可以在触控里面激活轻点背面功能。可以设置轻点两下或者三下执行指定的操作,例如截屏、App 切换、音量调节等,让快捷操作发挥到了。


 

 


07、重新设计的 Siri 更智能

Siri 的唤起界面进行了重新设计,采用屏幕底部弹出的形式,更为精简好用。Siri 唤起后的动态展示也显得更为智能和科技感,体验上面变得更为智能。


 


 

08、默认浏览器可设置 Safari 之外的第三方

iOS14 新增了一个特性,用户可以将默认浏览器设置为 Safari 之外的第三方浏览器。例如你更习惯使用 Chrome 浏览器浏览网页,便可将此设置为默认浏览器,点击链接时将会默认以 Chrome 打开网站。这个新增的小特性方便用户可以根据自身使用习惯进行选择,更加人性化。


 

 


09、短信删除提示优化

之前版本删除短信的提示占据界面宽度三分之一左右,更新后的提示采用通栏显示,提示更为明显。


 

 


10、通讯录卡片式设计

iOS14 优化了一些界面风格,以卡片式设计为主,比如通讯录、短信等界面。进入个人通讯录详情界面,卡片化的界面使得信息布局更加清晰明了,功能更为突出。


 

 


11、拟我表情新增与优化

没有照片设置头像也没关系,为好友和自己设置拟我表情作为头像也是不错的选择。iOS14 不仅新增了拟我表情贴纸,还新增了十几款新发型和新头饰,提供用户更多选择性。


 

 


12、表情搜索更便捷

在对好友设置头像时,除了拟我表情以外也可以选择更多表情,带给用户更多选择。设置表情头像时,也可以输入对应的关键词,比如:“可爱”、“调皮”等关键词。通过关键词更能精准的体现用户需要的情绪表达,不会看着表情过于纠结。


 


 

13、相簿优化预览照片更便捷

iOS14 优化后的相簿在顶部设置了选择和更多操作,更多里面可以对照片预览进行放大、缩小、宽高比网格和正方形照片网格等操作。优化后的呈现方式更能满足用户习惯,可以根据自身喜好进行照片预览展示。


 

 


14、为每一张照片添加说明

iOS14 更新后支持为每一张照片添加说明,让你在查看以往拍摄的照片时能更好的进行回忆。也对隐藏相簿进行了显示设置,可以在设置中不显示隐藏相簿,避免尴尬的情况出现。


 

 


15、相机优化,性能更佳

短视频越来越受到追捧,优化后的相机按住快门可录制快速视频,向左拖移快门可拍摄连拍快照。据说升级后的拍照性能得到优化,还能设置镜像前置镜头,大家可以体验感受一下。


 


 

16、备忘录变得更加强大

没有好记性,就要善于备忘录。iOS14 更新后的备忘录功能更强大,绘制常用形状时稍作停留,图形就会变成标准形状,是不是有点像 Procreate 绘画软件。还有更为强大的扫描功能,再也不用跑打印店扫描文件啦!


 

 


17、自带翻译软件,让交谈变得更简单

iOS14 新增了翻译 App,内置支持十多种语言之间的离线互译,支持文本和语音的实时翻译。翻译速度不仅快,还非常准确,而且还能自动识别语言进行翻译,不需要频繁的进行手动切换语言,让交流变得更为简单。


 

 


18、信息置顶对话,更有动画提示

iOS14 可以将自己常用的信息对话在列表中进行置顶,有信息时不仅可以在顶部优先显示,方便第一时间阅读,还伴随着动画提示。


 

 


19、语音备忘录更好用

更新后的语音备忘录支持添加文件夹,方便对语音进行管理。并且语音可以添加到个人收藏,方便更好的取用,录音音效得到优化,录制的声音更好听哦!


 

 


20、好玩的声音识别

iOS14 更新后的辅助功能中新增了声音识别功能,激活之后可以展开选择声音类别,比如:猫叫声、汽车喇叭声、门铃声、婴儿啼哭等等。设置完成之后,当出现类似声音之后便会发送信息提示用户。


 

 


21、强大又好玩的快捷指令

对于一些资深玩家来说喜欢研究快捷指令,这个相对比较复杂一些,不过可以实现很多意想不到的效果。比如可以通过创建个人自动化实现充电时出现息屏时钟,这个需要提前下载好极简时钟,然后可以根据下面截图流程实现,大家可以去体验一下。


 


 

小结

iOS14 更新变化较大的就是 App 资源库、桌面小组件、轻点背面快捷操作、设计卡片化、新增翻译 App 和一些局部体验升级等,整体来说体验上面流畅度更好,设计上面更加灵活可控,依然还是值得升级体验的。

 

今天的体验总结仅为抛砖引玉,还有更多优化升级的内容待大家亲自体验,希望这次 iOS14 的升级可以带给你更多惊喜。


文章来源:站酷    作者:黑马青年 


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



设计的行动思维

资深UI设计者

你不会想要在紧急的状态中去完成一件事情或一个设计作品,又或是做出一项决策。但如果你有系统的方法,则会让你走出困境。

反复训练,你的大脑就会习惯这样的思维方式,当你处在紧急状态或者处于危机时,你的大脑便会像受过训练一样,帮助你快速决策或走出困境。

本文讲述《设计的行动思维》,它是一种优秀的思维方式,我用这样的思维方式来指导我的设计行动;我以微信、淘宝、星巴克设计案例为你演示,帮助你更好地了解这一理论;它可以运用在你的设计执行和设计管理中,亦可以运用于你所在的任何领域。





观察
Observation


你需要反复观察事物和自己认知之间的差异,这些差异往往存在在细小的事物中,不被察觉,需要不断磨练我们的心智,让大脑保持时刻锻炼。

你会发现,你会观察到常人无法观察到的一切,它是事物本身,或者一种现象,或是一处极为细小的变化,让你的大脑时刻接受这样的训练,不止是你熟悉的事物或是领域,你将会触类旁通。

我们每天都在频繁地操作淘宝、微信,你会发现品牌颜色的变化吗?当事物的变化和认知之间形成差异,大脑就会自动做出判断,并观察到这一细微的差异,这是我们不断观察和训练大脑所带来的结果,我把这种行为称为 ‘大脑的高度警觉’。这样的警觉,并不是刻意获取,而是大脑主动传递的。


CASE 1 /  TAOBAO


undefined


这是Taobao APP 商详购买页面底部Button。一般情况下,品牌刷新或VI色调整,都会体现在界面的核心功能区域,例如Button或者Icon上。从‘立即购买’Button的色彩变化,便可以判断Taobao经历了3次重要的VI色调整。


下面颜色是我记忆里的淘宝VI色(大致色值),淘宝VI色的调整也是相应了互联网设计的主流色彩表现趋势:


undefined





CASE 2 /  WeChat


undefined



这是微信公众号后台写作界面底部区域的三个Button。和Taobao的case一致,核心区域的VI设计都会同步更新。我在撰写文章的时候高频操作的是‘保存’Button,自然就察觉到了色彩的变化。


undefined



大脑受训练的程度决定观察结果的细微程度。对颜色的判断能力,我称这种能力为 ‘色彩认知’

又例如公众号默认文章字体颜色并不是纯黑色,而是深灰色(#333)。因为深灰色的文字在白色背景上阅读起来眼部更为舒适。当我第一次书写文章的时候,就发现默认字体的颜色正是我所需要的。



undefined



CASE 3 /  Starbucks

‘色彩认知’由我们不断观察的结果累积而来。就像您无需动手设计,‘色彩认知’便会告诉你墨绿色界面搭配金色作为辅色,能给界面带来尊贵的气质,这样的设计会让星巴克显得更为高贵。



undefined

[ 星巴克官网首屏截图 ]


常人看到这样的界面并不会有任何意见。用‘色彩认知’来讲讲我的观察。星巴克的主色是墨绿色,在官网大面积使用,则带来‘视觉压抑’的感觉,我想通过简单地改变,来提升星巴克的品牌气质。


我用Photoshop吸管工具从官网首页上的一张照片中提取颜色:香槟色(Champagne),这样的颜色在墨绿色底色上有较好的辨识度和品质感,适用于标题性文字颜色。


undefined

[ 从照片中提取颜色 ]


在前期的训练中,也可将图片马赛克,这会辅助我们挑选颜色,当你足够熟练后,即可直接用吸管在照片上选择更丰富的色彩。


undefined

[ 从马赛克照片中提取颜色 ]


香槟灰(Champagne gray),可用作常规阅读段落文字颜色,在墨绿色上面会显得柔和、舒适。


我重新设计了首页的文字与版式:


undefined

undefined

[ 优化后的效果 ]


下面是之前的效果。对比看看:


undefinedundefined

[ 官网截图 ]


这是最简单的用户感官上的提升。而更重要的是‘用户心理’上的提升,这将在用户阅读文字内容时发生。我们先看看文字内容(翻译如下):


标题 | 事情在变,但我们仍然在这里为您服务。


正文 | 我们已暂时关闭店内咖啡厅,但部分杂货店和直通车位仍然开放。某些市场还提供星巴克提供的Uber Eats服务。请访问我们的商店查找器以获取的商店营业时间和营业地点。


按钮 | 寻找门店


这段文字是星巴克官方在疫情期间所写,并不是一段激动人心的品牌宣传文案,所以我们在设计的时候应使用常规的文字颜色,为避免白色在墨绿色下带来的刺眼,我选择白灰色(#e3e3e3)的字体颜色。标题想表达的潜意识文字是:‘虽然我们碰到了困难,但是我们依然坚持为您服务’。我改为香槟色,来体现星巴克积极的态度与服务的品质,会显得更有力度。


在页面中使用这样的颜色,同样可以提升设计的活跃度,为品牌带来更好的品质。例如,将颜色应用到星巴克官网中小图标设计和文字上面,来提升品质感与活跃度:


undefined

[ 优化后的设计 ]


undefined

[ 官网截图 ]



超乎常人的细微观察意味着敏锐的市场嗅觉,意味着更前瞻性的设计思维,为身处品品牌的设计师带来巨大的商业价值和用户共鸣。



定向
Orientation


当我们观察事物的时候,旁人和你一样,也在观察你所观察的事物,同是一件设计作品,在于你是否能更快速地发现观察对象的弱点,这些弱点就隐藏在事物之中,往往和某一处细节有所关联。

找到弱点,利于我们定向事物的问题,从而帮助我们快速找到解决方案;快速地观察并发现事物的弱点,取决于大脑前期观察训练的累积。

当身处紧张、有限的时间,我们无法获得更多的思考与验证,则需要我们在这之前做出更多的观察训练。训练越多,你的大脑则能更快速地发现事物的弱点,便于你更好地定向问题。



决策
Decision


正确的决策依赖于你对问题的定向。有效地判断事物的弱点,则能更准确地做出决策。我相信认知与观察都是可以训练的,在我们的日常生活中,颜色的排列与组合,在我们眼前频繁地出现,我们可以从任意的事物中来观察,将观察与获取结合在一起,并付诸于你的行动。


undefined



就像我们生活中所观察到的水果的颜色,你可以从中获取到这些色彩搭配,并将它们存储在你的记忆中。当设计中需要表现活力、清爽的设计元素时,你自然会想到这些绿色和黄色的搭配。



行动
Action


行动之前,无需刻意地去完成流程化(观察、定向、决策)的过程,大脑的速度与行动指令在一瞬间完成,这依赖于大脑在这之前的观察训练。当你看到事物,大脑便会条件性地做出反应并支配你的行动,你可以理解为‘条件反射’,这极大程度依赖于我们前期的大脑训练与积累。


undefined



‘ OODA’ 是职业军人:博伊德创立的战略理念,这一理念对美国以及西方企业界和管理学界有着巨大的影响。 《设计的行动思维》是我在‘OODA’的基础上加以我的理解,并将它转化为设计的新思维,我称它为‘设计的行动思维’,并将它运用在我的设计执行与管理中。

观察、定向、决策、行动,最重要的是‘观察’。观察是一个日积月累的过程,并非一日之功。在我的设计工作中,我能快速地发现产品问题并提供解决方案,这来自于我对观察的日积月累与学习,使我能快速定向问题,作出决策,并付诸于我的行动。在行动中,我会再次循环,直至不会出现任何的设计问题。

福布斯、哈佛商业评论都介绍过博伊德的战略理念,数十本专业管理著作都提到过他。美国管理学界对海军陆战队产生了深厚的兴趣,向商业企业界大力推荐‘海军陆战队方式’,而这个方式的灵魂就是‘OODA’,这是博伊德作战思想的结晶。

对我来说,OODA是一种行动思维,它可以改变您在设计工作中的思维方式。可以运用在您的设计执行和管理中,乃至您所在的任何领域、包括您所担任的任何角色。

文章来源:优设    作者:Riixiong 


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


日历

链接

个人资料

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

存档