首页

产品需求管理与设计

分享达人

1. 需求定义

需求是用户对于自己碰到的困难从而提出的问题,是用户对于已有产品的反馈和建议,是老板提出的商业诉求,就是运营人员减少工作麻烦的想法。需求和产品是一种问题导向与目标导向的结合,是用户碰到了什么样的问题,从行业属性、用户群体、业务场景、工作目标、商业利益等方面从而产出的输出物,也就是所谓的产品。

需要:是解决问题或者满足欲望,达到最终的目的。

需求:是需要付出一定成本来满足,主要体现在解决方案中的具体产品和功能。

2. 名词解释

产品需求文档(PRD)是将商业需求文档(BRD)和市场需求文档(MRD)用更加专业的语言进行描述。

3. 面向对象

开发、设计师、测试、老板、项目经理、产品经理、运营、市场、销售、客户、财务等其他角色。

4. 输出物

文档:Word、ppt

交互或者原型稿件:Axure、UI界面

5. 产品需求文档结构

命名和编号

修订记录

背景分析(产品背景、行业背景、国家政策)

需求分析

用户定位

产品目标

总体架构(技术架构、功能架构)

业务流程

功能设计(功能总表、用户角色、功能详情)

产品特色

产品模块清单

产品适配清单(支持的浏览器、数据库、中间件、操作系统)

6. 需求分析原则及方法

6.1. 产品需求的三个层次

基础性需求、期望性需求、兴奋性需求

6.2. 马斯洛需求五个层次

生理需求、安全需求、社交需求、尊重需求、自我实现

6.3. 需求管理的四个环节

采集需求、分析需求、筛选需求、处理需求

6.4. 需求分析四象限

重要并紧急、重要不紧急、不重要但紧急、不重要不紧急

7. 需求分析及产出

WWH法:是什么?为什么?怎么做 ?

需求分析贯穿整个产品全生命周期,包括产品概念期、产品设计开发期、上线后-成长期、成熟运营期、产品衰退期。

 

 

7.1. 明确问题

7.1.1. 需求收集渠道

 

明确需求收集渠道,确定用户群体和需求调研的方法,比如问卷调查、访谈、名义小组会议、头脑风暴法、观察法、亲和图、蒙特卡洛技术、鱼骨图、提示清单等方法。

提出需要解决的问题,明确需求带来的价值。利用目标用户、场景、问题三个思考维度,去定义真正意义上的产品需求,示例如下:

 

通过用户针对不同的场景,明确了主要问题需求,怎么思考产品需求怎么体现到产品设计上面,从而体现产品价值,包括产品设计成型后的市场推广方式至关重要。产品问题产生的产品价值示例如下:

 

7.1.2. 拆解需求

拆解需求指的是把已经明确的问题,从多个维度进行拆解,目的就是为了找到更合适的解决方案。

拆解问题的五个维度分别是积极层面、否定层面、转移层面、拆解、脑洞。

Ø 积极层面:通常可以拆解出怎么做对用户来讲可以产生更积极的情感。

Ø 否定层面:通常可以拆解,即使不做什么,依然可以产生好的结果。

Ø 转移层面:转移指的是不直接单独解决当前用户的问题,通过转移法,用户转移、问题转移等。

Ø 拆解:把当前问题刨根问底的拆,挖掘更多的可能性、找到问题本质。

Ø 脑洞:这个更多的靠灵感、经验等进行头脑风暴,补充其他维度考虑不到的地方。

7.1.3. 需求管理

7.1.3.1. Kano模型

 

Kano模型是对用户需求分类和优先排序的工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。

Kano模型把需求分为五类:基本型需求、期望型需求、 兴奋型需求、无差异性需求、反向型需求。怎么通过模型知道用户的需求类型,示例如下:

 

7.1.3.2. 时间管理四象限法

时间管理四象限法分别按照紧急程度和重要程度分为重要且紧急、紧急不重要、重要但不紧急、不紧急不重要。具体示例如下:

本方法的优势可以评估产品开发的时间优先级,对于一些重要且紧急的功能开发能够做到心中有数。

7.1.3.3. ICE排序法

ICE排序法是一种比较严谨科学的分析需求的方法,通过几个几个维度给需求进行相应的打分,以总分的高低去排序。

I(Impact):影响范围。

C(confidence):对上线效果的自信程度评估。

E(ease):开发难易程度(工作量+技术难易程度)评估。

7.1.4. 需求输出

7.1.4.1. 输出内容

思维导图、业务流程图、原型图、需求说明文档、功能说明文档等

7.1.4.2. 输出角色

业务人员、技术经理、后端技术人员、前端技术人员、UI、UE人员

7.1.4.3. 沟通样例

(一)业务人员

面对业务人员,主要是讲产品功能实现和重点业务流程,主要依靠思维导图或者原型图去讲解产品可带来的价值和解决了什么样的问题。

(二)后端开发人员

面对后端开发人员需要给技术经理协调和沟通,确定的项有数据库怎么写,字段(数据结构)怎么定义,最后生成什么样的表,当用户进行相关业务操作时(增删改查),怎么去设计接口,接口设计对应数据库,先调用什么样的接口,传输什么样的参数,返回什么样的结果。进行前端解析,后台数据图形化,最后呈现给业务用户。

(三)UI、UE人员

面试UI、UE人员从行业特征、用户群体特征、用户习惯等方面来确定产品视觉和交互形式。

(四)前端开发人员

通过评审后的UI设计稿交付给前端人员,进行前端页面的开发。

(五)测试人员

面对测试人员,跟进产品测试情况,提供产品需求文档和原型图及UI设计图,编写测试用例,把控测试时间,协调相关资源,保证产品顺利产出。

8. 产品迭代规划与需求跟进

8.1. 产品全生命周期规划

根据产品规划的全生命周期,确实不同阶段需求的落地情况,根据用户对于需求的满足情况。

8.2. 业务流程分析

根据已开发上线的所涉及的业务流程,先分析完整性,基于本流程从专业角度提出改进方案,不断优化该流程,确定流程的可用性。特别是一些核心业务流程,要做到简洁高效,提高效率。

8.3. 新需求管理

通过产品的不断使用,收集和接收不同的新需求,并定期开展新需求评审,逐步完善到产品里面,以最小调整为基线确定新需求的开发计划,保证产品总规划的稳步实施。

8.4. 里程碑管理

把控整体产品里程碑管理,确保产品迭代重大节点变化能够有理有据,为产品的营销工作,提供支持。总结产品优势和产品亮点,对产品的销售情况负责。

原文地址:站酷
作者:Lyion

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

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

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

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

如何运用情绪板定义视觉风格?

分享达人

前言 

相信每个设计师,平日里都会去关注各种各样的视觉风格、设计趋势,如杂志风格/3D风格/简笔插画/晶白风格/赛博朋克/国潮/新拟态/孟菲斯等等各种各样的视觉风格。但是在了解这么多视觉风格的同时,又不知道什么样的风格适合是自己产品的,做设计时仅仅凭借着直觉跟过往的经验来进行设计,最终导致设计稿禁不起业务方的推敲,并且被贴上设计不专业的标签。 

其实,每一个产品设计都需要设计师花费大量的时间精力去推倒出属于自己产品的视觉风格。而不是仅仅参考当下流行什么设计趋势、设计风格,就开始进行设计。流行的视觉风格大多不会一直流行,只有符合平台调性的视觉风格,才能更好的为产品赋能。 

因此,学会如何定义视觉风格,是每个设计师都需要去学习并且加以运用的。 

什么是情绪板? 

情绪板(英文Mood Board),通常是指一系列图像、文字、样品的拼贴,是设计中最常用的定义设计和视觉方向的设计方法论。 

情绪板的本质在于: 将情绪可视化,将较为抽象的词语转化为可视化的图形等,比如:“安全”这个词可映射出盾牌/锁/警察等等给人们感觉到安全的人事物。 




情绪板的作用?


情绪板能够更加帮助设计师与业务方达成设计共识,并且能够帮助设计师定义视觉风格与找到设计方向,使设计更加合理,为产品赋能。


如何运用情绪板定义视觉风格


情绪板的制作流程


情绪板的制作流程大致分为5步:


1、明确原生关键词


了解项目背景或需求本身的方向,通过内部讨论,用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。


2、挖掘衍生关键词


在原生关键词的基础上让参与者发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。

可通过视觉映射、心境映射、物化映射,得到用户理解的“抽象关键词”所对应的“具象定义”。


3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。


4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。



举个案例说明:


明确原生关键词


讨论原生关键词


了解项目背景或需求本身的方向,通过内部讨论(可叫上产品、运营、老板等进行讨论),用户研究和品牌等方式定出3-5个原生关键词,通常定出的词都比较抽象。



确定原生关键词


从讨论的关键词中提取3-5个最适合的关键词。



2、挖掘衍生关键词


在原生关键词的基础上让参与者通过视觉映射、心境映射、物化映射,发散得到更精准的二级词语,能够更加准确的定位到图形传达方向,最好是一些情绪和视觉表达的形容词。



3、搜索关键词图片


确定完关键词后,可在pinterest、花瓣等设计网站上建立情绪板图库,按照人,事,物,形、色、字、构、质等方向收集大量的对应图片素材来匹配关键词。



4、建立情绪板


对应每个关键词,从情绪板图库中提取高质量能够代表关键词意思的人,事,物,形、色、字、构、质去展示,以此唤醒用户对关键词情绪体验。


5、提取视觉风格准则


根据情绪板图库中的图片提取出视觉风格准则,包含:图形、颜色、质感、构成、字体等视觉风格准则。




总结


情绪板作为一种常用的设计方法论,能够帮助设计师更加合理的总结出合适的视觉风格。设计不仅仅是只是跟随着设计趋势,怎样找到适合产品的视觉风格,是每个设计师更需要去掌握的内容。


以上内容,是学习如何定义视觉风格的其中一种方法,希望对大家有所帮助,如有不同意见,欢迎指正!


图片版权归原作者所有

原文地址:站酷
作者:船长的成长日记

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

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

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

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


提高视觉和交互逼格,UI动效之SVG动画教程

分享达人

最近几年不管是WEB端页面还是APP,使用交互动效越来越多,加了动效的UI页面看上去不再那么枯燥无味,能很好的抓住用户眼球,既提升了用户交互体验同时也更好的展示了产品。通常我们会在哪些场景下使用动画呢?例如菜单图标、载入动画,空白页,产品介绍等都可以使用动画,下面是一些示例:


今天给大家讲解一下如何制作一个svg格式的动画,开始之前先和大家说一下svg是什么,目前web或者app中的动画大多使用svg格式,svg英语全称是Scalable Vector Graphics,它是一种可缩放的矢量图像图形文件格式,这种格式的文件具有边缘清晰、文件体积小、传输方便的特点,因此在网页设计以及APP中比较常用。可以使用Illustrator软件或使用

专业的svg编辑器进行设计输出,svg支持浏览器及任何文字处理工具打开。因此svg格式是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的图形页面。

如果你具有一些代码能力,还可以直接用代码来描绘图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器或编译器来观看。


综合起来SVG优势如下:


  1. 可被非常多的工具读取和修改

  2. 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。

  3. SVG 可随意缩放

  4. SVG 图像可在任何的分辨率下被高质量地打印

  5. SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)

  6. SVG 可以与 JavaScript 技术一起运行

  7. SVG 是开放的标准

  8. SVG 文件是纯粹的 XML

目前制作SVG动画的软件主要使用AE(需要插件加持)或者在线的SVG动画工具,如svgjson.com等,如果使用AE需要安装bodymovie插件,我平时大部分动画都是使用svgjson工具完成的,所以今天给大家分享的svg动画教程主要也是使用在线工具svgjson来完成(完全免费),它支持导出svg或json格式动画,可以满足不同的需求,目前该软件虽然是英文版的,但是上手还是比较容易,为了更好让英语不是特别好的同学快速上手,我下面做了一个关键功能的中英对比说明。



软件地址:https://www.svgjson.com/editor-page/


如制作一个loading动画

制作要点:

  1. 创建2个圆形,一个底色(浅灰色)一个旋转的圆圈(蓝色)

  2. 在Store中设置Stroke Dash Array的圆圈长度,圆圈长度可以从Information中获取

3. 设置Stroke Dash Array后,开始旋转圆圈的长度,我设置了400,大家可以根据自己的需要进行个性化设置

4. 第四步我们来设置动画,先选择蓝色的圆圈,然后在Transform中设置旋转动画,第0秒为0,第10秒为3600
度(记住别忘记按关键帧动画按钮,第一帧设置了动画,后面更改参数会自动生成动画关键帧)

5. 按空格键或者点击时间条上的播放按钮看看效果,如果没有问题选择导出SVG动画,一个loading动画就完成
了。

完成后效果

上面的动画是通过Angle(角度)来实现的旋转动画,接下来我们可以通过Stroke Dash Offset来设置旋转动画


loading动画进阶教程

先看最终效果

由于svgjson的绘制能力相对较弱,所以我在其他软件中先画了如下图这个动画的基本元素(需要保存为svg格式),然后通过svgjson中的导入svg方式导入。

  1. 首先把“按钮左”和“”放在一起拼凑成一个圆,然后把“按钮中间部分”也放在圆中间,并且把它的Scale X值设为0.

  2. 把载入的圆圈放在刚刚的红色圆中,并设置Stroke Dash Array值和Stroke Dash Offset动画(具体参照上面的动画教程)

  3. 把载入成功的勾号放在载入圆圈中,然后设置动画Stroke Dash Array值和Stroke Dash Offset动画

  4. 再设置按钮左和按钮右位移动画,同时也需要“按钮中间部分”的Scale X的动画


通过上面的2个教程,相信大家对svgjson这个软件有了一个基本的使用能力,svgjson中的Stroke属性下的Stroke Dash Array和Stroke Dash Offset功能还是蛮强大的,可以通过这2个参数设置很多丰富的动画效果。

下面的动画主要使用x轴缩放功能实现的交互,当然也可以使用Stroke Dash Offset参数实现动画效果。

这个动画的核心点在设置对象的中心锚点位置,默认对象的中心点在中心,这个教程是把对象中心点移到了左侧

接下来给大家演示如何制作一个变形动画,变形动画也是一个非常常见的交互

这个教程重点是对象的缩放,缩放前需要设置锚点位置,然后就是设置x轴和y轴的偏移值。


总体来说,svgjson网站提供的动画能力还是很强的下面是我制作的项目样例:



原文地址:站酷
作者:Snmendala

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

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

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

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

如何通过实验来验证设计结果?关于B端产品「屏效提升」的实验研究

分享达人

屏幕有效利用率这个话题想必大家并不陌生,在B端产品中,越来越多的产品和用户把目光聚焦到屏效上来。站在体验设计的角度,立足交互和视觉的设计手法,挖掘屏效提升的设计价值,让屏效最大化是提升用户体验的合理方法。





在此文中,对于整个设计(交互、视觉)的手段方法不做过多的详细探讨,我们重点阐述如何利用实验研究的手法验证屏效提升。以某B端项目为例,利用科学的实验研究方法,通过设计实验假设、提炼任务场景、准备实验物料、进行控制变量等完整的实验方法,来验证该项目中屏效提升的设计方法(提高信息密度、缩短操作路径以及信息重组)最终是否提升屏效。



原文地址:站酷
作者:自传一周的鹿

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

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

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

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

设计师应该关注的用户体验设计模式

分享达人

我们在周围的世界中看到了许多熟悉的设计模式。例如,大多数道路用实线或条纹线分隔车道。还有交通灯和道路标志可以帮助您在道路上行驶。如果每个国家/地区使用不同的系统,司机将不得不为他们想要驾车经过的每个国家/地区学习新的驾驶模式——但这不切实际!

UX 设计模式的工作原理类似。它们使用户无需学习新系统即可熟悉浏览数字产品或网页。

什么是用户体验设计模式?

UX 设计模式是用于构建用户界面的常见构建块。设计师使用 UX 设计模式作为可重用组件来解决常见的可用性问题。

例如,我们经常看到的一种设计模式是面包屑。面包屑向用户显示他们所在的页面以及返回主页的路径。

UX 设计模式如何改善用户体验

设计模式为设计人员提供了构建块以更快地创建用户界面,但它们也增强了用户体验。

UX 设计模式通常遵循用户熟悉的通用设计标准,从而减少学习和浏览新产品或网站所需的时间和认知负担。

在《我们如何决定》一书中,作者乔纳·莱勒 (Jonah Lehrer) 写道,识别熟悉的模式会释放出多巴胺——一种与动机、奖励、记忆和注意力有关的化学物质。当用户体验模式按预期工作时,多巴胺命中会增加。

使用有效的UX 设计心理学技术的设计师,例如熟悉的 UI 设计模式,可以增强用户体验并使产品交互更加愉快。

UX 和 UI 模式之间的差异

大多数设计师交替使用UX 模式和UI 模式这两个术语,因为区别很小,有很多重叠,并且可能会引起混淆!

UX 模式:用户流和导航的可重用模式——在社交媒体平台或网站上无限或连续滚动。用户认识到他们可以向下滚动以刷新页面。

UI 模式:用于视觉和交互设计的可重用模式——一个汉堡图标。用户知道汉堡包图标将打开导航。

何时以及如何应用设计模式

知道何时使用设计模式对于产品设计和用户体验至关重要。设计人员必须仅在有明确的可用性原因时才使用设计模式。

以下是识别用户需求和应用设计模式的四步、以问题为中心的方法:

查明问题——您可以通过分析和可用性测试的组合来识别问题。例如,您注意到在获取客户详细信息时,您的产品注册流程有很高的流失率。通过可用性测试,您了解到一个常见的痛点是注册过程耗时太长——您的注册表单要求填写全名、电子邮件、年龄、性别、城市和手机号码(其中许多细节与使用产品无关) 。

通过市场和竞争对手研究找到解决方案——寻找竞争对手和流行的设计库,以找到常见的 UI 模式来解决您的问题。回到我们上面的例子,您会发现竞争对手通常只在注册时询问用户的全名和电子邮件地址。它们还允许用户使用社交媒体帐户进行注册和登录,从而简化注册流程。

自定义设计模式——您必须自定义新的设计模式以匹配您的品牌和现有设计系统。对于我们的用户注册示例,此自定义可能包括调整输入、社交媒体按钮和提交按钮的圆角半径。占位符文本、输入标签和错误/成功消息将使用您的样式指南中的颜色。

测试您的设计模式——最后,您必须始终测试新的设计模式实现,以确保它们满足可用性和品牌要求。

上面的例子展示了可用性测试的重要性——识别和应用用户界面设计模式以测试开始和结束。

不要因为竞争对手有一个设计模式或者你认为这是正确的做法就添加一个设计模式。例如,您的网页设计是否需要面包屑导航?对于电子商务,可能有必要让用户返回到产品类别或知道他们在结账序列中的位置。但是,对于大多数其他网站,它只是添加了额外的数据点供用户处理。

UX 设计模式的常见示例

设计模式分为六大类:

A. 数据输入输出

B. 内容结构

C. 导航

D. 社交媒体和分享

E. 激励

F. 等级制度

数据输入和输出

数据输入和输出是最常见的用户/产品交互之一。用户输入信息,系统返回数据或完成一个动作。

一个很好的例子是许多网站和应用程序使用的日期选择器。尽管它们看起来略有不同,但大多数日期选择器显示类似的布局和功能——标题中的月/年、星期几和日期。

当用户单击一个日期时,它会突出显示以选择。最后,有一个 CTA(有时是一个取消按钮),用户可以在完成并准备继续时单击。

数据输入和输出的其他示例包括:

a) 表单提交

b) 成功/失败消息

c) 应用通知

d) 进度条/步骤

内容结构

你有没有注意到大多数界面使用类似的块布局和图像缩略图?或者,管理界面的左侧导航面板和右侧的内容如何?

使用这些熟悉的内容结构和 UI 模式可以帮助用户快速浏览新的数字产品或网站。目标是最大限度地减少摩擦(例如学习新界面),以获得无缝和愉快的用户体验。

导航

熟悉的 UI 模式可以帮助用户轻松浏览网站或数字产品。桌面和移动界面有不同的导航模式。

例如,主导航位于桌面网站或应用程序的标题中或左侧。在移动应用程序中,主导航栏位于页脚中,只需用拇指触碰即可。

无限或连续滚动是 Instagram 和 Pinterest 使用的典型导航设计模式。当用户滚动时,系统会刷新以显示更多内容。这种设计模式很熟悉并增强了用户体验,因为用户不需要单击下一步按钮或分页来查看更多内容。

社交媒体与分享

设计师可以使用多种社交媒体和共享设计模式,包括:

a) 链接的品牌社交媒体图标

b) 共享图标 - 向右弯曲的箭头或三个点的共享图标

c) 引言——用引号引用此人的姓名和形象

这些熟悉的设计模式可帮助用户找到社会认同,以建立对您的产品和品牌的信任。

这些设计模式利用心理学,鼓励用户执行所需的操作。这里的目标是在用户和产品之间建立联系。

激励

激励 UX 模式利用设计心理学来鼓励用户执行任务和操作,从而创建用户/产品关系。

设计师鼓励使用设计模式通过积极的反馈、认知、游戏化等来吸引用户。

例如,游戏化模式鼓励用户邀请朋友来获得奖励。UI 模式将通过 CTA 向用户显示他们当前的积分,以邀请更多朋友赚取更多。

等级制度

层次结构模式类似于内容结构,因为它们为用户创造了即时的视觉熟悉度,以便快速浏览界面并知道如何完成所需的操作。

博客的两种常见层次结构模式包括标题和目录。用户可以滚动页面以快速找到他们想要的内容或使用目录跳转到特定部分。

面包屑是电子商务网站用来帮助用户浏览产品页面和结账流程的另一种层次结构模式。

总结

UX设计模式是用户体验的重要组成部分,因为它们最大限度地减少了产品的学习曲线和人类认知负担。设计师必须知道何时使用这些 UX 设计模式,而不仅仅是出于习惯或模仿竞争对手而实施它们。

分析和可用性研究可帮助设计人员确定界面中缺少哪些 UX 模式,然后测试他们是否实施了正确的模式。

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

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

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

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


2022年标志设计趋势:标志的未来

分享达人

2021年,标志设计师朝着更大胆、更具创新性的设计迈出了一大步。与平面设计趋势类似,品牌推广大量采用软循环动画和鲜艳的配色方案。它还开辟了实验排版,鼓励创造性思维重新审视标志设计。

2022年的标志设计趋势很可能会延续这一大趋势,我们希望看到上述美学在全球范围内得到重塑。您会看到设计师同样选择极简主义和卡通标志、3D 和平面标志、花卉和文字标志。我们认为2021年是创作自由的一年。然而,看起来在2022年,我们将看到它真正的肆无忌惮。

1) 简单的几何图形和基本形状

2) 高大的标志

3) 饱和颜色和渐变

4) 象征主义和极简主义代替现实主义

5) 涂鸦和草图

6) 粗体字标标志

7) 无衬线标志

8) 花艺和微妙的装饰

9) 黑白标志

10) 3D与平面样式

简单的几何图形和基本形状

在2022年,拥有基于复杂图形的标志几乎会很少见。此类标志通常难以记住,客户可能会很难发现在品牌与其图形表示之间的联系。对于寻求加强存在感和提高品牌知名度的大企业来说,这可能是一个巨大的问题。因此,公司倾向于拒绝此类标志,而倾向于使用一些基本的东西。

基本的几何形状是各种三角形、圆形、正方形、点和线,它们使标志设计成为简单的图像。作为优化,建议设计师使用充满活力或独特的配色方案。或者相反,切换到黑白,将这种极简效果发挥到极致。最后,还有负空间,这是另一种采用简单几何形状并保持视觉趣味的好方法。

高大的标志

虽然2022年的大多数标志设计趋势与我们两年、三年或五年前曾经拥有的一切产生共鸣,但高大的标志就像一口新鲜空气和创造力。反对过度使用的三角形、方形和圆形标志。正如我们从多个Behance项目中看到的那样,它们的美学非常适合寻求领先的时尚公司、精品店、创意工作室和大品牌。

高大的标志部分借鉴了装饰艺术风格,它们特别喜欢优雅的垂直框架。高大的标志同样具有波西米亚风美学和现代几何元素。事实上,这种标志设计趋势的根源并不那么重要。真正重要的是新的形状让设计师想出了新的标志创意,所以在这里我们希望他们以不同的方式处理字体和图形元素。

饱和颜色和渐变

实践表明,标志的颜色工作和色彩的选择是一个非常个人化的故事,通常很难跟踪全球趋势或与特定颜色相关的任何标志趋势。有人更喜欢黑白标志。有人会选择现在特别流行的单色、裸色或大地色。然而,如果我们看看大品牌,我们将能够在标志设计中使用生动、饱和的颜色来定义一个巨大的趋势。

对标志设计中颜色的兴趣已经发展到这样的程度,创作者不仅要增加饱和度,还要选择纯粹、生动的解决方案,同时尽可能地简化标志。太多的细节和颜色会造成混乱的外观,因此选择其中一个至关重要——在极简主义时代,选择很明确。然而,我们不禁强调鲜艳的色彩很难处理——尤其是糖果色。它们可以使品牌标识看起来廉价甚至业余。因此,当您关注这一标志设计趋势时,重要的是要取得平衡——否则您将面临使用可疑标志的风险。

象征主义和极简主义代替现实主义

有多种与简化标志和极简主义相关的标志趋势——这可能是最能说明问题的。我们每个人都将标志创建为一件真正的艺术品。动物、花卉、神话和生物——在标志内,它们展示了精湛的技艺和对细节的迷人关注。诚然,这样的标志确实看起来很引人注目,但从响应式设计的角度来看,它们失去了其他类型的标志。

您可能还记得响应式标志,这个术语是在大约4年前引入的。这些是可以适应不同屏幕尺寸或其他媒体的标志。为此,设计人员可以删除字标、简化或隐藏标志。今天几乎没有人认为响应式标志是一种独立的现象或趋势。相反,响应性是标志的自然特征,象征主义和极简主义的运动正好证明了这一点。

涂鸦和草图

2022年,草图和涂鸦将作为图形设计趋势回归,因此它们作为单独的标志设计趋势出现。其复兴的关键是人们对设计师个人品牌方法的兴趣增加。显然,没有什么比以独特风格绘制的快速草图、卡通人物和形状更好的了。

因此,要为标志设计中的更多涂鸦以及企业品牌中草率的卡通标志和快速绘制的吉祥物做好准备。以快速和朴实的方式制作的手绘标志也受到欢迎,我们已经看到以这种方式书写品牌名称的项目和团队。

粗体字标标志

如果我们考虑2021年的标志设计趋势,粗体字标志将是最好的例子。于2020年底推出的实验排版项目专注于不常见的几何解决方案。难怪品牌和标志设计师不能忽视这种大规模的图形设计创新——在这里,我们在标志设计方面有了一个全新的方向。

许多跨国公司选择字标标志。例如H&M、可口可乐、Zara、谷歌、Visa等品牌。然而,几乎没有人认真考虑使用实验字体进行品牌重塑。这就是为什么此类文字商标标志主要在独立工作室、小型企业、精品店、沙龙和个人创作者中传播。也许,这些大胆标志的特征是其吸引力的另一个关键。您可以将它们视为那些知道要注意什么的鉴赏家的标志——或者那些想要感受品牌美学的人。

无衬线标志

虽然使用大胆的实验排版并不是每个人的趋势,但无衬线字体是每个人都知道和理解的。自从设计师拒绝花哨的脚本和衬线字体而支持无衬线字体以来,已经有一段时间了。但由于存在普遍趋势,我们可以说它仍然是2021年的标志设计趋势——顺便说一下,这得到了我们上面写的极简主义和基本几何形状的流行的支持。

拒绝花哨字体的动机非常简单——使用无衬线字体要容易得多。使它们适应不同的屏幕和画布尺寸并不复杂,因此它们更适合响应式标志。有趣的是,几年前,我们观察到了一个相反的过程:许多公司从无衬线字体切换到衬线字体,因为复古设计非常流行。今天,随着复古狂热慢慢释放出来,健康的实用主义出现了,无衬线字体再次相关。

花艺和微妙的装饰

我已经不知道设计师和产品创造者用极简主义制作了一系列标志多少年了。与此同时,许多小企业继续选择和使用它们,所以这些标志不会退缩——就好像它们刚刚出现在市场上一样。所以请放心,它们将与您共存数个季节,同时还会定期推出新款式,例如2022年风靡一时的Boho。

也许,这种标志设计趋势是最流行的。优雅的线条看起来令人着迷,因此使用它们的诱惑很大。2019年如此,2022年依旧如此。 事实上,这种微妙的视觉风格并不仅仅集中在花艺上。有很多日常用品:从家具到文具和衣服。重要的是这些标志模板是如何制作的!

黑白标志

随着我们继续从各个方面学习了解极简主义,让我们在这个市场中传递2022年的另一个自信趋势:黑白标志。实际上,将黑白色调视为一种趋势是很奇怪的,因为它是一种经典的解决方案,并且它的存在与时间和风格的变化无关。所以,我们需要让您注意到对此类标志的兴趣是日益增加的,其中最重要的例子是GoDaddy的重新设计之一。他们逐渐简化了他们的标志,现在他们似乎到达了最后阶段——带有带有无衬线字体和保留标志的黑白标志。

黑白标志的最佳之处在于它们令人难以置信的风格灵活性,这使得它们在品牌设计师中流行起来。它们完美地适应了品牌的审美,因此可以将它们用于字体、装饰元素和几何形状的各种实验。极简主义、创造性的排版、花卉、象征主义、原始几何——一切都与黑白标志相得益彰。

3D与平面样式

3D是2021年最有前途的图形设计趋势之一。随着技术的发展,这种图形变得如此庞大,以至于我们永远无法预见。甚至可以在直观的在Spline或 Procreate的最新更新中进行高质量3D对象的制作。图像质量也得到了发展。

然而,在标志设计中,情况颇有争议。设计师将平面样式的 logo 转换为3D,反之亦然,力求使 logo 风格更加生动和简洁——后者对于旧版本的3D和假3D尤为典型。出于同样的原因,他们付出了很多努力来探索类似于3D的方向——等距艺术。它允许在视错觉、鲜艳的色彩、渐变、阴影和形状的帮助下获得大量图像。可能它看起来比3D更适用于标志设计——但时间会证明公司和客户会习惯什么。

最后

显然,2022年和2021年的标志设计趋势没有明确的界限。大多数处于巅峰的趋势已经伴随我们很长一段时间了。

但是,我们可以肯定地说,例如之前非常受欢迎的故障风格,不太可能成为本季标志设计的主角。在过去的几年里已经有很多这样的事情。动画标志也是如此,这是2021年最有希望的标志趋势之一。动画本身继续引起人们的兴趣,这是展示品牌的一种成功技术——但不幸的是,它并没有被证明是可行的。

最后,3D的命运也没有确定,我们还不能说3D或扁平风格的标志设计是否会成为一种趋势。我们已经写过,设计师的立场是模棱两可的,一个方向和另一个方向都有品牌重塑。


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

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

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

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

实用的设计原则

分享达人

设计原则是设计师为规范和塑造他们的作品而制定的规则。这些原则强调焦点设计元素,遵循它们有助于帮助设计师与广泛受众产生共鸣。

尽管设计原则听起来可能限制了自由,但它们的创建是为了支持设计师的工作,而不是设置障碍。您可以将它们视为建立一般顺序但不干扰作者创造力的拼写规则。因此,设计工作依赖于设计原则,一旦使用得当,就会开始吸引观众的注意力和兴趣。理解这些原则意味着理解并控制整个项目、创建它的过程以及每个涉及的设计元素。

不同的团队和工作室区分不同数量的设计原则。然而,七项原则被认为是基本原则。它们是平衡、层次、统一、对比、强调、比例和重复/节奏。

1. 平衡

平衡可能是最明显和最容易理解的原则。这也是让视觉内容感觉舒适的一个重要功能。这个想法是设计的每个元素——比如字体、颜色、图形、背景、形状、图案、按钮、文本等——都有它们的视觉重量。较重的元素会迅速吸引观众的注意力,而较轻的元素则不会,主要用于完成整个场景的整体性与和谐性。

有两种类型的平衡,对称和不对称。对称平衡是通过沿中心轴对齐的等重元素实现的。不对称平衡与镜像相反。它使用不同权重的元素并且更常见。这样的构图围绕一个或几个突出的部分排列,因此创作者寻求轻元素和重元素之间的平衡以获得视觉图像。

2. 层次结构

层次结构是网页和应用程序设计中最重要的设计原则之一。它用于对设计元素进行优先级排序,并根据其重要性设置重点。这里有一个简单的规则:如果一切都标记为重要,那么一切都不重要。

层次结构引导用户跨界面从焦点对象到二流对象,并有助于按逻辑顺序了解事物。如果忽略了这一设计原则,构图就会显得杂乱无章,而且很难找到必要的信息。

设计中有两种主要类型的层次结构:视觉和排版。可以通过场景内对象的比例和颜色强调获得视觉层次。排版层次结构是通过不同的字体、大小和字体粗细来实现的。

3. 统一

你可能遇到过这样的网站、印刷品,甚至是室内设计概念:大量的元素很难融合在一起,所以整体形象看起来一团糟。为了解决这种图形的混杂,使用统一的原则,应该创造视觉和心理的和谐。

统一意味着与品牌理念和信息的联系,因此每个制作的设计,无论是网站页面、T恤印刷品还是广告,都应该成为其中的一部分。它与设计系统密切相关,是大多数平面设计公司和项目应该考虑的原则。

4. 对比

虽然统一和平衡创造了易于交互的视觉上可接受的设计,但多样性增加了吸引注意力的细节。如果没有多样性,即使是最平衡、最精心组织的概念也会缺乏对比,变得单调乏味。

这个设计原则为项目添加不同的视觉元素、图案、符号或排版。事实上,这是设计师可以尽情发挥创造力并顺应潮流的地方。

5. 强调

强调是通过在构图中设置焦点元素来创建画面的设计原则。这意味着它们会吸引观众的眼球,但不会超过其他元素,否则平衡就会倾斜。这就像一个好的海报设计:你立刻就能看到正在演奏的乐队,并且找到细节:音乐会的日期和地点、门票价格等。

强调可以通过比例、重量、位置、颜色、形状和样式来实现。创建一个大胆的、色彩鲜艳的元素是不够的,因为一切都应该在一个设计中连贯地显示。

6. 比例

比例是指元素相互之间的大小,是最全面的设计原则。调整比例并根据物体的大小和视觉重量对物体进行分组有助于突出重点并保持构图的统一。

设计组合中比例的主要思想是,越重要的元素越大,不重要的元素越小。就像着陆页、文章或海报一样,对象之间的比例关系与其对读者的重要性相关。

7. 重复/节奏

这两个设计原则相辅相成,相互补充。重复是指在设计中实现相同或相似的元素:如图像、按钮、颜色、字体或形状。它用于创建统一性和一致性。通过使用相同的图标、背景或风格化元素,可以轻松实现重复。如果使用得当,它可以控制浏览者在页面上的移动,因为重复元素可以成为吸引和引导注意力的绝佳方式。

元素重复的方式创造了一种节奏感。当设计中有节奏感时,观者将其视为旋律。有五种类型的视觉节奏:随机、规则、交替、流动和渐进。

随机— 没有特定规则间隔的重复元素。

定期— 重复进行相同的间隔。它通常是通过创建一个网格或一系列垂直线来获得的。

交替— 允许在设计中重复多个元素。

流动— 模仿自然流动并显示遵循各种弯曲和曲线的重复元素。

渐进式— 通过在重复时改变元素的一个特征而获得。

最后

定义要使用的设计原则并不总是有意义的,因为它们可能会在创作过程中参与和拒绝,而设计师的主要目标仍然是传达重要信息,创造和谐构图,设计可用的界面。

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

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

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

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


2022 年顶级网页设计趋势

分享达人

设计趋势可以塑造一切,从设计师的创作方式到用户界面设计,再到从网站到包装设计的未来迭代。

让我们深入探讨2022年的一些顶级网页设计趋势。我们将着眼于 2021年末开始出现的趋势,这些趋势是为来年奠定基础的,以及一些即将流行的趋势设计。

有趣、乐观的设计

时尚的形状、颜色,甚至是面孔都可以带来很多乐趣。设计师正在使用网页设计趋势,为从网站的所有内容提供有趣、乐观的设计。这些设计的共同点是它们为世界注入了一点额外的快乐。

充满乐趣和乐观的图像具有面孔、较轻的字体,以及散发出积极情绪的颜色。为了充分利用这一趋势,请考虑更轻的元素,并避免选择较重的字体或颜色。

黑白配色方案

黑白配色方案是今年最鲜明、最美丽的设计趋势。没有颜色,你可以在限制范围内思考和设计。

大胆和实验性的排版

在2022年,没有错误的排版方式。大粗体字体——甚至衬线字体——无处不在。在玩这种网站设计趋势时,请考虑字体将如何响应以及如何最大限度地对访问者产生影响。

三维设计元素

虽然2020年和2021年有很多设计师网站处理完整的3D 设计,但新兴趋势是将3D元素与更扁平的整体美感结合起来。

具有3D风格的元素可能包括阴影、动画或图层效果,以创建深度和维度。

三维设计也延伸到视觉叙事。考虑如何以突出景深和阴影的方式捕捉您的故事或产品。

近乎野兽派

野蛮主义是人们想要加入的网站设计趋势,但对于大多数项目来说,它过于苛刻和尖锐。

这些设计使用了许多相同的鲜明效果。不是单色字体,更容易看到衬线是常态。即使有一些明显的边界和线条,元素之间也有足够的空间。没有太多的装饰或其他视觉效果,只留下颜色和文字来真正承载这些项目。

滚动文本元素

虽然总是希望文本元素可读,但它们也可以是动态的。滚动文本元素——通常使用超大字体、几个词、在一个位置——可以增加对关键词的强调并激发用户的兴趣。

轮廓字体是一种流行的选择,保持可读性的关键是使用简短、常用的单词或短语。

玻璃态

玻璃态的第一个展示于2020年末和2021年初的新态,并演变成现在流行的更完整的玻璃效应。

正是您可能想的那样:设计元素的外观让人联想到玻璃。可能有透明度、冷淡或光泽的元素。

设计师们一直在Dirbbble上以一种主要方式使用这种风格,并找到了网站设计的方法。

更多渐变

渐变是不断出现的设计趋势。2021年,设计中的大部分渐变出现在背景中。

到 2022 年,渐变将采用两种新形式:

1) 用于文本颜色填充(例如上面的示例)以提供最大的影响和强调

2) 作为用其他线条填充插图或图标以创建纹理深度效果

没有图像的主页

无需图像即可设计,您将在 2022 年紧跟潮流。

使用不同类型的用户界面或设计技巧来充分利用没有图像的主页。在此处的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之间具有叠印效果。超大的排版和手写风格的字体有助于将它们融合在一起。

分屏美学

分屏美学重新奏效。几年前的趋势当时出于可用性和响应的原因而起作用,现在它更像是一种新设计。

这些视觉效果可以包括水平或垂直分割的屏幕,每一切面有不同的功能。

交互式字体

在屏幕上与您一起移动的文本是交互式字体背后的支柱。在大多数情况下,这可以使用悬停状态,尽管您可以尝试一些其他更复杂的效果。

在考虑交互式文本元素时,请考虑可读性和理解力。文本效果只有在其中的文字仍然可读和可理解的情况下才有效。

包容性设计

设计师正在努力打造一个更具包容性的网络,它几乎在所有发布的内容中都有体现。从图像到语言再到替代文本,没有理由不尝试让您的项目更加包容所有人。

包容性延伸到种族、性别中立、文化、可及性和能力。共同的主题是您的网站应该以这样的方式组合在一起,以便任何想要访问内容的人都可以访问内容,并且人们也可以在屏幕上看到他们可以与之相关的其他人。

结论

就网站设计趋势而言,新的一年已经开始以非凡的方式爆发。如何将这些元素合并到现有项目中是作为设计师该考虑的问题。

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

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

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

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


体验设计师的成本思维

分享达人

为什么设计师要有成本思维,以及成本思维在做我们做设计时对我们有什么帮助。



不仅仅在工作中我们需要思考成本,在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩,所以贝克尔在《人类行为的经济学分析》中提到:人的任何行为都是理性选择的结果,无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人,但是大多数人就是如此。



在夜深人静的夜晚你饥肠辘辘想吃夜宵,你可以选择下楼到周边小吃店就餐,也可以选择叫外卖,前者付出的成本是你需要通过身体行动来交换最后的结果,后者则是花费一定的金钱来代替前者的行动。


那么我们通常会如何选择呢?如果这两种成本有很大的差异,比如需要到很遥远的地方那么除了身体行动成本外,时间成本也会计算其中,所以相比后者成本陡然增大,于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵,外卖点餐会特别影响口感,那么你可能会选择前者,这里由于外卖口感和主观意愿影响到了我们理性的选择。‘



1.为什么要关注成本


成本决定了收益的效率、大小和方式,小到你伸手拿一支笔你会选择最近的,大到我们人生的投资。成本与收益之间并非是直接关系,收益的大小的不取决于成本的大小,还有风险因素。例如我们在对UI界面进行优化,可以选择的方式有很多:


1.只调整视觉,替换样式

2.对页面逻辑进行重构

3.整体功能进行重新分类组合

......


我们的目标是让用户获得更好的体验并且提升业务价值。3种方式需要的成本高低不同,我们都希望付出最小的成本达到最好的效果,于是我们就会考虑到风险因素,假如新流程用户不会用怎么办,假如新版本导致的数据下滑怎么办,假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。



你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间,提供更好的环境与服务,让他们产出更多的价值。还有假如你的车坏了,你最直接的方法就是花钱找人帮你修而不是自学自修,因为你将花费太高的成本。


再举一个例子,我们想提升能力,有的人选择自学、白嫖,有的人选择报培训班,这也只是时间和金钱上的成本选择,如果你的自学(白嫖)在短时间收益很大那就毫无疑问帮你省了一大笔钱,但是如果自学很久都毫无效果,那么时间就是你花费的成本,时间和金钱不同的是,时间不可逆。看起来花钱比花时间更好?不是,花钱也有风险,比如课程质量和服务很差,钱没了还学不到,甚至赔上了时间。但如果你选对了,那么收益就远远会大于自学。




2.设计师可以关注哪些成本


1.实现成本


实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗,例如我们希望提升用户下单的转化率,我们可以选择:1.减少整个流程的步骤 2.将按钮设计的更明显 3.给用户发放优惠券 4.给用户营造抢购氛围,在这几个方案中最低成本是2,因为只需要调整样式和简单开发就可以实现,但收益并不是最高的,而其他的方案需要更多的角色花费更多的时间来参与,但是收益也不是显而易见的。所以如果你的产品比较成熟,那么我们一定选择成本更低的方案,反之我们会进行更高成本的尝试。



还有比如我们找工作,新公司福利待遇比现在公司好50%,平台也更大,是否不需要思考直接去呢?当然不是,你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你50%薪资涨幅换来的是996、每天通勤时间3、4个小时,不仅仅是时间精力,还有我们的身体健康的成本,我会觉得远远不值,成本太高。




2.机会成本


我们先来看一下定义:机会成本是指面临多方案抉择时,被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子,比如当前版本我们有1个开发一个设计一个产品,我们面临着两个需求,但是资源和时间只够我们做一个需求,这时候2选1,那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本,相当于我们放弃了那个需求所拥有的价值。


再通俗一点讲,我现在有100万,面临着两个选择:1.银行理财,年收益4%,4000. 2.做生意投资,年收益8%,8000,那么就相当于我花费了这4w的潜在成本获得了8万的收益。



3.边际成本


边际成本的理解很简单,我们可以理解为我们每付出一定的成本收货的收益或者每收获1个单位的收益所付出的成本。用一个通俗一点的例子来讲,比如你一共学习10天,第一天学完你考了30分,第二天学完你考了50分……第8天学完你考了94分,第9天学完你考了98分第10天学完你考了100分,花费的单位天数一样但是每次增加的分数却越来越少,收益也就越来越少。



在做产品设计的时候,我们往往会有一个板块叫为你推荐,比如微信阅读中的这个板块,它一次提供了用户6本书,虽然算法可以算出有许多书,但是这里每次只提供给用户6本,是因为涉及到了边际成本,少量多次提供能够让用户更聚焦,更快的选择好书本进行阅读,每多提供几本书,用户选择阅读的时间成本就会越大。有同学会问:那我只给1本不就好了,用户就能马上读了,何必要推荐6本?



我们如何保证那一本刚好是用户想读的,没有办法做到如此精准,如果每次只推荐一本书,而用户尝试了几次都不喜欢,他们就会放弃,所以这里就会选择一个临界值,比如我们可以选择每次放不同数量的书,根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。




4.体验成本

体验成本也是我们设计师需要时刻关注的,俞军老师在产品方法论中提到,用户价值=新体验-旧体验-替换成本,体验成本可以包含很多信息,最主要的就是认知与交互的成本。


4.1认知成本

如何降低认知成本可以从以下这些点进行优化


4.1.1.文案

文案的设计要求是简单易懂,避免产生歧义,之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析,大家可以再思考一下,是否会产生歧义。还有确定、确认大家是否知道怎么用呢?


文案也需要有情感化,避免生硬、带负面情绪的问题等等


4.1.2.样式

视觉最为直观,一个按钮一个控件的样式是否能满足用户的心智和预期,将会影响用户的认知,例如以下的几个按钮,出现在不同场景用户会出现一系列问题:为什么我点了没用?为什么还不能点?我到底该点哪里?



还有你的品牌是否识别度高,也决定了用户对你的认知,最近小米花了百万请大师做了新的logo,在视觉上更加圆润,在圆logo的基础上做了很多的微调,实际上也是避免了太大的logo变化导致品牌认知成本的提高,认知成本一旦太高,品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。



4.1.3.信息

比如我们希望新用户去关注一些大咖、kol获得更好的推荐,但是如果我们只是将推荐者的头像和昵称给新用户,那么这个策略就是失败的。因为我们没有考虑新用户的认知:1.我为什么要关注她 2.关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。




4.2.行为成本

我们通过利用肢体来和媒介进行交互,目的是完成某项任务。其实只需要你抬手,那么就是产生了成本,只不过某些成本是固定的无法减少的,比如你要去骑车那就需要去解锁,如果没有锁车可能就会被偷走,这是出于安全考虑。


行为成本在具体数字产品中我们可以发现很多,例如你只需要将手机拿起,屏幕就会亮,相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私,所以还需要通过指纹或者人脸进行识别。


例如几种不同的验证方式,利用滑动拼图来解锁和输入相关验证码解锁,前者比后者的学习成本和操作成本都低。


在移动端我总结了几个减少交互成本的方法,不妨来看下:



1.利用滑动代替点击


soul音频处理

日期选择

iPhone底部横条切换窗口




2.利用点击代替输入

游戏昵称随机

股票买入数量



这里也有同学会问,既然都可以代替,那滑动能否代替输入?必须也是可以的,例如iOS自带的计时器中选择时间的控制器,还有闹钟设置,这里要注意的是,滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的,比如房价筛选,房价本身量级很大,用户筛选也不会精确到个位数,在这里用点击和输入会比滑动的成本更低。


反例就是音量、明暗控制,大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入,需要大致的范围选点击,非常模糊的感受选择滑动。



3.在必要时利用语音代替输入

例如我们在开车进行导航的时候,打字输入非常不便,于是加入了语音输入。还有在微信进行账号切换时,我们可以选择利用语音输入数字来验证身份。



4.给予详细的提示

对于新用户操作复杂功能和界面的时候,提供更多提示能够很大程度上减少用户的操作成本。



5.尽量不使用二级手势

在iOS或者安卓的手势控制中,我们会发现又一些常用的手势比如:点击、拖动、轻扫、双击、缩放,这里我们可以定义为一级手势。还有一些不常用的比如:重按、长按、三指滑动、三指缩放等,这些手势的认知成本和行为成本都很高,定义为二级手势,不建议频繁使用。




总结

设计师在日常工作中接到的需求繁多,无论是在做需求之前还是在思考设计方案的时候,成本思维可以帮助我们很好的规避一些问题和风险,我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。

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

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

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

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


中后台加载-被忽略的体验细节

分享达人

先看目录,大家按需取用,当然更建议全文阅读(全文7756字,建议阅读20分钟)

undefined


undefined

大部分设计师应该都遇到过这种场景:在做设计前并没有考虑到加载,但在进行还原度走查或者验收的时候才发现,由于某些页面数据请求较慢,导致在页面中会出现空屏状态。这时才想起需要在这些页面添加动画来承载页面的过渡。

归根结底是因为设计师在设计过程中,更多关注页面本身,而很少去思考页面在呈现过程中何时会出现白屏状态,都是后知后觉去补充完善。加载作为必备的一环,却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划,导致系统的加载体验缺失或者不统一。

因此希望这篇文章能够讲清楚中后台加载出现的场景和规则,对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。


undefined

加载通俗来讲就是用户从触发页面操作,到页面最终呈现的一个等待过程。这个过程始终存在不可避免,只是时间有快有慢。快的加载只需要几百毫秒就结束,但慢的加载就可能会达到几秒甚至十几秒,让人产生焦虑。

而为什么会有如此大的差距,这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址,再到我们看到完整页面的这个过程,网页到底经过了哪些步骤呢。经过资料查询和与前端确认,整体过程可以阐述如下:

从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段:用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。

而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型:静态资源和动态资源。


静态资源:前端的固定页面,这里面包含HTML、CSS、JS、图片等等,不需要查数据库也不需要程序处理,直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快,比如我们看到的展示型官网一般都是前端写好的静态资源。


动态资源:而对于页面上的动态变化的,需要程序处理或者从数据库中读数据,能根据不同的条件在页面显示不同的数据,比如表格数据、统计数据等称为动态资源,这种都需要调用后台接口来进行返回,因此加载速度相比于静态资源就会更慢。

而它们的区分点用下图可以表示:

可以看到静态资源基本是直接返回,而动态资源还需要连接数据库调取资源,尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题,也基本上更多出现在动态资源的获取上。


undefined

当我们清楚加载形成的原因,接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式:「默认处理」和「使用进度指示器」


2.1程序默认处理方式:直接显示

当我们对加载过程不进行任何处理时,程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式:

但是这种做法就会导致我们在页面加载过程中会出现空屏状态,比如上图切换到概览时出现了空屏状态,尤其是当遇到了网络缓慢的情况,会造成在加载时页面停留在当前状态下不动,往往会让用户陷入到「系统故障」的错觉。


2.2通用处理方式:进度指示器

这个名词说起来可能比较陌生,它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障,而是正在读取数据。

通过添加进度指示器来对空屏状态进行承载,能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡

但是在体验过程中很容易发现一个问题,就是在产品的整体加载过程中,某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时,很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖:

想要更全面的把加载动画覆盖到所有页面,我们就需要弄清页面在哪些状态下会出现空屏状态,从而制定统一的加载动画规则。这个问题可以先思考一下,后面解答。


undefined

在制定统一加载规则之前,我们需要明确一个概念,就是加载的模态与非模态。


3.1模态加载

模态加载的含义就是当前加载会中断用户其余操作,用户在这个期间只能等待加载而不能进行其他操作(有的模态会提供取消按钮)。如果你的页面涉及到以下2种情况,可以考虑使用:

1.用户当前的操作本身不能与其他操作同时进行。比如系统更新,或者工具类的导入导出相关操作,我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载,比如protopie的导入操作;

2.当用户进入到一个全新的页面时,这个时候页面什么都没有,我们只能等待页面加载完成才能进行后续的操作,因此在这种情况下也可以采用模态加载,比如我们刚进入Asanan产品页面看到的首屏加载动画:

除了上述2种情况外,你也可以根据你的业务场景来进行模态加载的选择,但建议是尽量少用模态加载,其会对用户的打断和干扰性比较强。


3.2非模态加载

非模态加载的话,这种加载通常只会出现在需要加载的部分,不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。

非模态加载相比于模态加载会更轻量,因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载,比如飞书的左侧栏切换操作:


undefined

接下来我们进入正题,在这里我从加载的角度将网页整体加载过程分为呈现加载规则操作加载规则

我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后,我们就可以开始为我们的产品制定统一的加载规则,以保证后续页面加载的一致性。


4.1 页面的加载过程拆解

在拆解页面的加载过程前,我们进一步阐述之前提到的渲染原则,从前文中提到最后会经过「解码」和「渲染」2个步骤,这也是决定了我们看到的页面的最终呈现顺序:


1.页面渲染顺序

我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式,JavaScript则是负责页面中的交互(当然JS也可以控制样式,这里只描述主要功能)。

页面在「解码」阶段,拿到的HTML文档会被解码为DOM树,同时将CSS文件解析成CSSOM,这两者结合后一起渲染页面,JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染,最后渲染交互。视觉的角度来讲就是先看到元素样式,然后才能进行对应操作。


2.页面呈现的视觉顺序

由于浏览器渲染顺序一般会根据代码的顺序进行渲染,而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的,因此我们看到的页面的视觉呈现顺序也是遵循从上到下,从左到右。

所以几乎所有的产品都是先看到顶栏,然后左侧边栏,然后其他内容。因此我们可以通过这个原则来拆解对应的页面,我们按照页面常规结构可以将其分为三个加载部分:顶栏、左侧导航栏、内容区域。而其加载顺序如图所示:

当知道对应页面的渲染顺序后,我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序:

undefined

我们的加载动画需要承载的就是上述这些白屏的地方,从而将加载细化为三种场景的拆分:全局加载+局部加载+内部加载。如图所示:

undefined

通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。


4.2 全局加载

如上图所示,全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景:

1.通过网址进入到一个新的页面时;

2.通过鼠标右键或网页刷新按钮对该页面刷新时;

3.通过页面操作需要新开页面时。

该全局加载的动画构成为:

1:覆盖整个页面的加载,由纯白色+加载动画构成;

2:加载类型为模态加载,因为用户在这种页面状态下并不能进行其它操作。

undefined

但在这里我们需要注意全局加载的开始和结束时间:

开始时间:当进入页面时立即呈现加载动画;

结束时间:当页面加载出顶栏的时候,此时停止加载。


为何要这么处理结束时间,原因其实图中已经给出了。这里再解释一下原则:只要有页面资源返回,我们的全局加载动画就会结束,随后启用局部加载来承接后续的状态,避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的,所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏,可以以左侧栏来作为结束标准。


4.3 局部加载

局部加载是用在页面整体框架加载的过程中,承接在全局加载后。局部加载的使用场景可以概括如下:

1.顶栏加载结束后,用在剩余框架的加载效果(具体体现为左侧边栏和右侧内容区域);

2.对于涉及到局部页面的切换操作都会进行局部加载(比如左侧边栏的切换);

光看文字可能不是特别清晰,在这里可以举一个动态的例子来帮助理解:


上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的,可以通过程序控制让这种加载动画只在初次加载时出现。


第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间:

但第二次的时候由于有缓存(缓存会加载我们的静态资源,能够让我们的页面框架在第二次时更快显示),这样在读取框架时基本不需要加载,我们就可以通过程序来直接去掉其中的局部加载动画,直接显示框架来进行呈现。

undefined

目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的,而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态,又避免了局部加载动画的频繁出现。


4.4 内部加载

内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束,但某些数据由于接口比较慢,此时还没有返回,这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况:

在进行内部加载的时候,需要注意,内部加载的时候一般标题是存在的,因为标题基本都是固定的,所以能够很快被拉取。比如Zoho的内部加载,加载时标题已经出现了:

通过这三种类型的加载,能够覆盖从用户输入网址,到页面渲染完成这个页面呈现过程中的全部加载场景。


undefined

说完页面的呈现规则,再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态,而且需要考虑到控件影响的其他页面范围。


5.1需要考虑控件本身加载

控件的加载并不是随时都需要,我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下:

undefined

比如图中的按钮的加载状态是必备的,在很多场景下都会用到。但是下拉列表和级联列表,在一般的场景下都不太需要进行加载,当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。


5.2当控件操作会影响到页面其他元素

这种控件比如日期筛选、表格筛选或者保存等操作,当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法:

1.被影响元素不可被操作,且该区域有遮罩+加载动画来覆盖;

2.被影响元素可进行操作,无任何动画,但操作并不会影响之前提交的结果;


这两种方案一种是利用遮罩防止用户无效操作,另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1,我认为被影响的元素是需要有遮罩+动画的,来避免用户在加载期间对其进行无效操作,比如示例中方案2后面修改的名称是没有被系统保存的。

需要注意的是如果在产品中使用方案1,我们的遮罩区域只需要覆盖被影响的元素就可以了(保存这种可以将按钮一起覆盖),比如通过筛选导致图表数据发生变化,这时只需覆盖图表区域,而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时,用户可以通过切换筛选项来打断当前加载。

上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时,则整体遵照页面呈现的规则进行加载。


undefined

上面阐述的加载已经完全能够覆盖我们页面整体的加载,但是还是需要提及一下骨架屏和进度条这两种加载形式。

undefined

先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的(骨架屏的加入使用会让用户感觉网页出现的更快)。那么为什么在大部分的B端业务页面中没被用到呢,主要有2点原因:

1.每种骨架屏都需要进行对应的定制开发,需要与加载后的页面框架保持一致,这会增加了开发成本。

2.中后台的业务界面对来说固定结构的页面会较少,这对于骨架屏的使用机会就相对较少。

个人认为在前期可以以统一加载体验为主,在后期业务相对成熟后,可以针对固定结构,通过骨架屏的使用优化加载体验。


再说进度条。我理解的进度条的使用条件:对于加载时间较长的规定场景可以考虑用进度条来承载,比如我们常见的游戏加载中进度条就用得比较多,因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。

进度条在特定场景下能够缓解用户焦虑,让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度,这也会导致有时候我们看着加载到99%,那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因,很大程度是没有那种加载特别长的场景。


因此这两种加载场景的使用会更加定制化,如果需要使用请根据具体的业务场景来进行选择。


如果把加载动画等比作页面加载的外在,那么缓存和加载策略则是页面加载的内核,合理使用缓存和加载策略可以从根本上提升我们页面的加载速度,让用户更快速地看到页面。


7.1 关于页面的资源缓存

大家肯定听过缓存这个概念,前后端都可以使用缓存。缓存就是数据交换的缓冲区(称作Cache),是存贮数据(使用频繁的数据)的临时地方。在这里主要讲一下浏览器缓存:

undefined

从这张图可以看出,服务器在请求数据时,会进行缓存的判断,如果有缓存则首先读取缓存,如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度,缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存,这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。


但程序其实也可以对动态资源(也就是需要从数据库等拿到的资源)进行缓存的,并且可以设置缓存的过期时间(比如设置过期时间为1小时,那么1小时过后就会重新拉取新资源)。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略,从而提升整体的页面加载体验。


7.2 加载策略的正确使用

现阶段我们常用的主要有下列6种加载策略:

加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间,接下来我们详细看一下每种加载策略的具体使用策略:


7.2.1懒加载

懒加载是当内容落入视窗被用户看到时,才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计,能够让用户更快看到当前屏幕内的内容,减少等待时间。

比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载,这样能够保证用户在进入网页第一时间看到首屏内容,并且用户几乎感知不到这种加载延迟。


7.2.2预加载

预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中,等用户需要使用时,通过缓存直接调用呈现。比如用户在看A页面的时候,就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候,立刻就可以呈现。

比如某些页面在实际中加载比较慢,这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态(图中我将页面网络切换为断开状态),可以看到依旧可以点击全文进行查看和视频的部分预览。


7.2.3分步加载

当页面中有文字和图片时,优先加载占用网络资源小的,比如文字资源,然后再进行占用资源较大的加载,比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。


7.2.4分页加载

分页加载是我们目前很常见的方式,比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载,分页适用于数据量比较大的内容,比如表格数据或者大数据搜索场景可以使用。

分页加载可以理解为当前获取到100条数据,但是将100条数据分别拆成5页每页20条数据提供给用户,这样也可以让用户减少等待时间:

在目前还有一种滚动分页的加载,就是不提供视觉上的分页,而是当用户进行滚动时,自动加载一定数量的内容,这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略,有的也把这种滚动分页的方式称为自动加载。


7.2.5延迟加载

这里讲的延迟加载更多的是一种防护加载机制,一般延迟设置的时间为300ms。这里的延迟加载有2种使用,第一种多用于搜索,通过延迟加载能够让用户更好进行连续输入,避免搜索结果被高频率刷新,同时缓解服务器压力。如下图,可以看到我在输入1后会有个延迟才出现加载列表,并且我在连续输入12306的过程中是没有对结果进行更新的,当我输入完后才更新。

第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时,如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上,防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知:

延迟加载更多用于上述2种场景,对于其他情况的加载,直接加上就可以了,并不需要刻意设置延迟。


7.2.6后台加载

这里想要表达的含义是当用户在操作后,客户端立即反馈操作成功,然后把请求放到后台与服务器交互,这一过程用户不需要了解,不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作,即使你在断网的情况下都能够立刻发布,但实际上这个时候并没有发送成功,还需要上传到服务器后才你的朋友们才能看见。


这样的好处是用户使用起来非常流畅,但是坏处就是,当操作不成功时,用户并不能及时进行感知,仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作,毕竟很多发布的功能会同时影响很多业务线。


这里就拿微信的朋友圈发布来进行举例,下方手机状态都为断网状态,可以看到微信立即发布,而贴吧在这种状态下提示网络错误。

通过这些加载策略的选择性使用,能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识,这样我们不仅知道加载慢的原因,还可以利用加载策略去提升页面性能。



在整体的加载过程中,别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来,这时我们需要考虑对长时间的加载过程进行处理。

通常做法是我们要对加载状态有一个最长时间的限制,一般为加载不超过10s,超过最长时间后就进行异常状态显示(提示语+刷新按钮)。这样用户可以选择重新加载或者离开此页面,而不是一直等待。

在这里还想到一点,就是对于编辑页面,我们应当加入网络连接是否异常的判断,比如当进入到编辑页面后,如果遇到网络断开,需要在页面的顶部加上常驻提示条【当前网络连接断开】,这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。


加载在设计中是非常容易被忽略的模块,因为在大部分情况下网络速度都较快,人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点:

1.我们需要明白加载为什么会出现,这个过程是怎么样的;

2.加载的通用处理手段是怎么样的,非通用处理方式有哪些;

3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。


这样当我们在页面上遇到加载速度慢的问题时,在为其加上动画承载过渡的同时,还应该思考其加载缓慢背后的原因,是因为数据量太大还是加载策略的相关问题,是否可以将其进行懒加载或者分步加载,这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题,才是后续产品设计过程中的长久思路。

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

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档