首页

情绪版设计-助你打开设计创意

ui设计分享达人

1.情绪版的概念

首先我们要明确什么是情绪版?我的理解是:情绪版既不是初稿也不是最终的风格方向,而是设计师在了解了相关的产品背景后,基于自己对于产品的理解给出的一个较为初始的设计建议,并且希望可以通过这个初始的建议与产品侧达成一些相关的设计共识。

 

2.情绪版的大概流程

情绪版的设计流程大概分为前中后三个阶段,前期:分析-收集,中期:筛选-组合,后期:打磨-呈现。

 

前期:分析-收集

主要是分析产品相关背景或需求本身的方向,结合产品背景及需求本身再进一步分析大概的设计方向并收集相关素材内容。

 

中期:筛选-组合

当我们收集完成后需要对现有素材进行二次筛选并组合,基于现有素材组合大概的设计方案结构。

 

后期:打磨-呈现

基础方案组合完成后需要进行二次打磨,细化方案的内容表现,检查整体的一致性及完整度,最后呈现给产品方。

 

3.为什么要做情绪版

可能很多设计师会疑惑为什么要做情绪版,直接设计初稿不就好了吗?如果有这个疑问,可能还没实际了解到情绪版到作用。但我们可以试着从我们在设计过程中遇到的痛点来了解情绪版的作用或者意义。

在设计的过程中你是否会存在下面几个问题:

前期思考不够——设计产出方案少;

设计不惧探索性——设计来源没有考究;

初稿多次修改没能达成共识——设计表达不出对方想要的;

设计中期出现不一致——设计没有贯彻始终。

 

4.情绪版的作用

从这几个问题中,我们可以得到一个比较统一的结论就是:前期设计呈现内容不够,导致沟通不足而产生方向不统一。因此基于这个关键点,我们再来看情绪版的作用

 

(1)辅助构建世界观

在前期,世界观、背景方面的内容大多是以文字的方式呈现,因此设计师可以通过情绪版的方式,来输出对应的世界观设计表现,这样可以更加直观的表现出对应的视觉语言。

 

(2)具象设计想法

在初期与产品侧沟通时,单纯靠语言表达的方式很难让对方达到一种脑补的状态。因此借助情绪版的方式更加直观的呈现设计想法,通过具象的图形或者图形,大大降低双方的沟通成本。

 

(3)明确设计方向

基于第二点的沟通,我们可以明确的了解到产品侧的一些喜好。为后续设计初稿时起到一个清晰的方向作用。

 

(4)提高前期设计的效率

从零到一设计一套完整的方案往往需要耗费较长的时间,借助情绪版设计的方式来快速响应一些想法及创意,这样可以大大提高前期的输出效率。

 

5.情绪版的基本原则

从多次的尝试中,我总结梳理了几个基本原则,了解这些原则可以让我们在做的时候更加严谨,输出更加准确的设计方案。

 

(1)多方向性

情绪版的设计与我们日常设计一样,需要给出不同的方向建议,单一的方案往往难以抉择。多方案输出除了提升抉择空间之外,还可以增加方案碰撞的情况,往往可能是方案A的某部分内容叠加方案B的某部分内容才能产生最初的方向。

 

(2)尝试性

此阶段的所有输出皆属于尝试与探索,因此不必过于考究设计细节,重点在于表达出需要相关的设计概念及思考想法,把更多的时间留作设计思考及方案尝试。

 

(3)效率性

情绪版的输出重点在于前期沟通而达到一个比较好的共识,因此在保证质量的情况下,避免花费过多的时间而影响输出的效率性。尽量做到快与准。在过往中项目组,基本上是以半天(4个小时左右)为一个单位来完成一套方案。

 

(4)试探性

情绪版是一种非常有效试探产品侧想要往那种方向去推动的方式,因为我们在实际的设计过程中,产品侧可能也对整体的设计大调并不少特别有明确的脑补,因此设计师可以借助情绪版的设计来挖掘产品侧想要往哪个方向进行发力。

 

6.情绪版设计的方法

这里总结情绪版的设计方法大概有这几种:1.借助图像/插图、2.结合实际场景引申、3.借鉴摘取同类型设计、4.绘制草稿。

 

(1)借鉴图像/插图

在我们设计一些专题活动或者绘制插图相关的一些设计时,可以考虑使用这种方法来输出你的情绪版设计,可以通过借鉴一些设计网站或插图网站上的现有素材来拼接,并表达自己在这方法的一些设计意图及想法。

 

(2)结合实际场景引申

从更概念化的角度出发,通过引用一些实际场景、物品、图像,来拓展相关的图形、质感、色彩方面的设计,并且输出相关的设计雏形。例如我们在设计LOGO或者图形类的一些设计,使用这种方法就可以帮助我们突破一些现有的认知壁垒。

 

(3)借鉴摘取同类型设计

在设计之初,我们通常会有一个大概的思考雏形,但如果直接开始设计往往效率上并不高。因此可以借助一些设计网站上的设计,通过摘取组合的方式呈现自己的初步想法。我通常会在UI新版或者改版的时候使用这种方式,但只能表达大概的想法且不能代表最终的初稿设计。

 

(4)绘制草稿

当我们想要表达一些沟通或者框架的设计时,我们可以使用草稿绘制的方式来表现,这个方式简单快捷,可以很有效率的对齐大部分的设计共识。

 

7.情绪版设计的注意事项

基于原则及方法,我们可以来简单了解下情绪版设计中需要注意的一些事项,通过这些内容让你在实际操作过程中少踩一些坑。

 

(1)控制方案的数量

设计方案控制在2-3个左右即可,前期大多是属于试探性方案呈现及找方向,太多则容易导致选择困难。

 

(2)避免篇幅过长

篇幅过长往往容易降低别人阅读的耐心,对于情绪版的输出也是如此。结合过往的经验,建议以16:9的画面为一页来呈现一个方案。

 

(3)区分重点次要

在一页内呈现的方案避免过于平均,可以适当突出某些想要重点表达的内容,例如在这个方案中想要重点突出图标、颜色等,那么这里需要突出这部分在画面中的比例,适当缩小其他模块的尺寸。

 

(4)结合世界观

在输出情绪版设计方案时还可以适当考虑结合产品的世界观,通过一些具象化的图形或者插图来表现相关的内容。例如我们之前在游戏中心改版的尝试中,就发散了几个相关的世界观,因此我们在输出方案时,则只需要把对应的世界观作为方案,通过情绪版的方式表现出来即可。

 

(5)保持整体风格一致性

一致性是表现一个设计师是否具有系统化、全局观的思考思维,因此我们在表现情绪版时也需要关注这方面的内容,避免整体的调性不匹配。

 

(6)完整性表达

在呈现方案时,尽量多维度的进行对比,呈现一个完整性、系统性的设计。例如我们在设计UI相关的内容,从图标、颜色、字体等等一系列的内容需要细致的阐述清楚,让人更加能够了解你的意图。

 

8.UI情绪版模版分享

由于我日常以设计UI为主,因此可以给大家重点分享我在UI情绪版设计的经验。希望可以帮助到大家快速上手。

当你在做UI设计情绪版时,需要明确了解UI设计中的结构,更系统性的去思考整体的内容。我们在UI设计中往往需要包含以下这些内容:图形系统(图标+辅助图形)、颜色系统、字体字形系统、质感形态、界面形态、插图风格、动效系统、影像系统,等等这些部分的内容。

 

UI情绪版模版

 

过往实际案例分享

案例一:整体风格比较偏个性一些,页面尝试用深色的背景设计

优点:整体风格比较酷,配色比较未来感符合年轻的人的审美,深色的背景让内容更加聚焦。

缺点:深色的设计接受度是否可以,是否适合平台类APP设计

 

案例二:整体风格3D化的设计,包括页面的一些体验上都可以增加视察的效果来设计

优点:整体设计风格比较新颖,符合现在的设计趋势,整体感觉也比较年轻多彩

缺点:3D的制作成本相对较大。

 

案例三:整体风格比较清爽,白色融入渐变的设计也会显得比较年轻

优点:整体页面清爽,可以满足任何内容的透出,渐变色的图标和按钮的设计补充了细节

缺点:整体氛围感、娱乐感较弱。

 

9.最后总结

很多时候我们会觉得情绪版设计可有可无,或者因为时间的关系不允许我们经过这一步。但,如我一开始提到的点,情绪版可以在前期帮助我们去打通很多思考的壁垒,辅助设计师在前期直观的与产品侧进行方向上的探讨,从而找到大方向上的共识。


文章来源:学UI网   作者:妙妙

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


B2B用户画像的创建与使用

ui设计分享达人

01 什么是用户画像(what)

02 B2B用户画像的特色(what)

03 为什么要构建B2B用户画像(why)

04 如何构建B2B用户画像(how)

05 B2B用户画像的传播与使用(how)

本文尝试通过what-why-how的结构,结合自己的工作做一些实践,和大家分享下B2B用户画像的整体概念框架以及构建方法。出于对我司数据的保密,无法直接分享给大家细粒度且对应的数据,所以分享过程中我会结合业界和其他前辈在网上分享的内容和数据作为案例,如有不足和错误之处,还望大家批评指正。

 

那在讲B2B用户画像之前,我想先来说说用户画像的概念,在看一些文章时发现有些作者混淆了用户画像的两种概念。可能很多人没有注意到,用户画像这个词包含了2种不同的含义,一种是User Persona,一种Use Profile

 

1.1 User Persona

User Persona是对一个用户群体的整体抽象。这一概念最早源于交互设计领域,是Alan Cooper在《About Face:交互设计精髓》一书中提到的研究用户的系统化方法。“赢在用户”这本书将其翻译为“人物角色”,目前业内使用“用户画像”这个术语。表达的意思一样,是真实用户的虚拟代表,是在深刻理解真实数据的基础上得出的一个的虚拟用户。

  • 研究方法:定量+定性研究,更注重的是定性的研究;
  • 画像用途产品&交互&设计使用,是他们了解用户目标和需求、与开发团队及相关人交流、避免设计陷阱的重要工具;
  • 研究方向:更深和细,会更为深入的去挖掘底层用户的动机、原因、动机、欲望、痛点等属性,Persona帮助我们了解why产品的用户为什么会有这个行为。

 

1.2 User Profile

User Profile是对每一个个体的画像,是在产品用户量有一定规模以后进行的。利用用户的行为数据或者填报的资料进行的用户属性标签提取,更多被运营和数据分析师使用,它是各类描述用户数据的变量集合。在大数据时代,企业通过对海量数据信息进行清洗、聚类、分析,将数据抽象成标签,再利用这些标签将用户形象具体化的过程。

  • 研究方法:偏向于定量研究与数据分析
  • 画像用途:主要运营&市场使用,个性化推荐、广告系统、活动营销、内容推荐、兴趣偏好都是基于用户画像的应用,比如说我们通常看到很多网站,千人千面,其实也是User Profile 精细化运营的结果;
  • 研究方向:更广和全,更多的是研究人的基础属性、社会属性和行为习惯,更关注的相关性的数据分析和挖掘。帮助我们了解what产品为谁而设计。

两类画像的对比如下图:

明确了两种画像的区别,那本文我们就重点谈谈User Persona类型的B2B用户画像(后续文中简称“用户画像”)。至于User Profile,比较适合用户体量大的产品,而B端产品除了头部企业,很难达到这个量级,无疑用User Persona更合适,本文就不再赘述。

 

不管是B2B还是B2C产品也好,不论是商业层面上(比如在资源有限情况下聚焦关键用户类型)、或是在产品层面上(更好理解用户想要什么,确定功能的范围和优先级),建立用户画像的本质都是为了辅助一些决策

不同之处在于C端面向的是大量且分散的个人用户,用户画像的主要目的是把用户聚类,更好的了解不同类型用户的特点和偏好。而B端产品,面向的是企业级用户,满足的是企业的管理或经营需求,关注的是成本和效率。画像的目的是针对业务不同环节中、具有类似任务的用户进行更立体、丰富的需求整理和挖掘,往往和角色相关。

其决定了B2B用户画像的几个特点:

 

2.1 受企业生命周期的影响

伊查克·爱迪思(IchakAdizes)提出了企业生命周期理论,企业的发展大致有初创期、成长期、成熟期和衰退期四个阶段。不同阶段的企业,其组织形态、关注点、管理方式等都会有所不同,产品需求侧重点不同,用户画像的方向和调研方式也会有不同。

初创期:产品立项阶段

这个阶段往往指的是公司刚成立,此时产品、企业文化尚未成形,处于客户积累阶段,较为关注引流。需要通过用户画像定位细分市场、产品模式及功能,这个阶段需做定性调研了解目标用户,初步形成用户画像为需求做底层支撑,这个阶段的用户画像颗粒度可以粗些,旨在帮助团队快速就“我们的用户是谁”达成共识。

 

成长期:产品运营中(已有数据积累)

这个时候产品已有demo或已上线迭代,产品处于完善、升级的阶段。可使用“数据挖掘+定量筛选+定性丰富”的方式,结合项目的已有数据,使用定量筛选用户,做大量微观且具体的用户调研,基于后台、第三方平台监控发现问题,定位问题关键及原因分析,优化产品功能及运营模式,再通过调研访谈了解具体的行为细节和态度。该阶段的用户画像可用来验证问题、完善或发现新的机会点

 

成熟期:产品相对稳定

客户资源相对稳定,可能已有一定的规模,内部管理需求增长,市场地位趋于稳定,日常工作也大多以维护为主。且现有增长点已遇上了瓶颈,用户活跃将不可阻逆地缓慢下降,即使你做再多产品优化、烧钱运营都无法改变产品终将走向衰退的命运,时间问题。企业急于寻找突破口和新的增长点,用户画像又将被赋予新的使命:基于用户画像进行“新增长点”的分析,定性挖掘蓝海,再定量进行验证

 

衰退期:产品活跃度快速下降

进入到这个阶段,说明产品没有成功转型。这时候再做用户画像的意义其实不大,如果一定要做,除了提高回流率、挖掘增长点外,可以定性了解原因,调整产品。

 

2.2 产品使用角色多样性

不同于C端产品的的用户单一性,B端产品的用户画像对应的不是一个个体,而是一个组织或机构,同时涵盖组织机构中不同的人员。产品面向的使用对象可能从普通员工到企业高层,覆盖销售、技术、行政人事部分等,基于工作场景不一样,对产品的需求可能也大相径庭。

以一个CRM系统为例,一个复杂的B端产品可能会涉及以下四种角色的用户:决策者、主要使用者、次要使用者、间接使用者。如下图所示:

决策者:下决策购买产品或服务的人,可能是业务线负责人,也可能是公司董事长、CEO,他们常常不是产品的使用者,使用频次低甚至完全不用,他们通常都是从公司的整体利益出发,更关注产品能否给公司业务带来帮助,降本还是提效了。其评价某个功能的好坏,往往与使用者的感受是相悖的,如钉钉的“DING一下”,他们并不太关注使用过程、体验,更关注产品的核心价值,将利益最大化。

满足决策者的需要是做好B端产品的前提,也是制作用户画像所要明确的方向;很多体验做的不好、难看的产品之所以也能在B端市场有一席之地,就是因为满足了企业的需要。比较理想的情况下,团队对目标客群有一定深入的研究,形成趋于标准化的产品,就能打动目标客户群的大部分决策者。

主要使用者:真正频繁使用产品的人,也是产品/设计师想要提升产品体验要瞄准的人群

他们可能更关注产品的具体使用,是不是易用,有没有帮助他们更便捷地完成工作,有没有提高他们的工作效率。主要使用者是最容易识别的,以CRM系统为例,如果没有销售日常在系统中录入客户数据,管理层就无法查看成单量、进度等他们所关注的信息。

次要使用者:使用产品频率相对主要使用者更低,用到的功能也比较少,只在某个中间流程涉及少量操作。如CRM系统中人事、财务会涉及到其中钱或出差的审批对他们而言,主要需求是能快速找到自己的任务并完成就可以了。

间接使用者:不直接使用产品但会被产品影响的人群,产品和设计师在设计过程如果有资源和精力能兼顾他们的需求和体验,那就太贴心了。如审计、政府人员,属于不紧急,非必要需求。

 

2.3 岗位职责决定了用户目标和使用场景

B端用户使用场景多和业务形态密切相关,产品通常要解决的是某类角色工作时发生的问题,所以不同于C端用户画像,从用户视角出发,关注用户个人的场景、诉求、痛点和情绪,核心是满足用户的需求,关注用户的年龄、性别、收入、个性、习惯、消费模式等标签。

但是在B端产品中,我们抛开了用户作为个人存在的标签,我们更关注用户所代表的角色,他的岗位职责是什么,它在工作场景中需要完成哪些任务,这些任务要做什么的,其岗位职责决定了它完成任务的目标、场景、使用什么工具去,需要跟其他角色配合吗等信息。

所以B2B画像更关注角色的分类、工作/使用场景、用户目标、操作链路、角色协同等信息,很难看到类似这个人是不是已婚,小孩多大这些不知道如何应用于产品设计的内容。而在一个C端产品用户画像上很少看到有哪些让他压力山大的KPI等信息。

仍然以CRM系统为例,其主要使用者-销售的目标就是用该系统录入商机、线索等,然后根据数据情况制定客户沟通回访计划等,聚焦的是该系统能否让他很好的履行了其岗位责任。和他这个人在哪个城市、已婚未婚等个人特性是无关的。

 

2.4 由客户画像和角色画像构成

B2B产品面向的是企业用户,满足的是产业链中各企业的经营需求,这时B2B画像应该具备行业、客户属性这一维度;但是最终购买者、使用者都是企业中的某一角色,这决定了B2B画像还有角色这一维度。所以,小编认为,B2B用户画像是企业和多个核心角色共同构成的画像,建立B2B画像,需要客户(企业)画像和角色画像两部分的信息。

 

1)客户画像

客户画像指的是使用B端产品或服务的企业用户,具有行业特征、企业特征及角色特征。其的目标是促成销售,主要用来帮助销售/运营人员他们快速定位目标企业,帮助他们更好的认识我们客户是什么样的人,让他们的工作更有方向。

一个典型的客户色画像会包括:

基本信息:外在的标签,如所处行业、地域、人员规模、收入规模(年营业额)

业务模式:线下的实际业务流程-视行业而定,如商业模式(靠什么赚钱)、业务模式(业务怎么运作)

组织机构:自上而下都有哪些机构,彼此之间的关系。

关键角色:各个机构里有哪些岗位/工种,决策链上有哪些角色、谁才是有价值的关键角色,角色话语权。企业的关键决策人随企业大小而不同,一般中小型企业都是老板、合伙人等。而大型企业采购B端软件都是需要经过内部流程的,最终审核人是老板,但其中影响决策最大的往往是商务经理负责人。

 

2)角色画像

B端产品虽然面向企业,但是最终使用执行的还是人,这些执行层(终端使用者)也是产品的检验者。在企业决定购买产品之前,执行层没有话语权,但是在续费的时候,他们的话语权比重会开始显著提升

因此在我们的产品设计阶段,会更关注执行层的角色画像。当我们讨论产品、需求、场景、用户体验的时候,往往需要将焦点聚集在这类人群上。

一个典型的角色画像会包括:

基本信息:如角色名称、照片、角色/工种、平台偏好、文化水平、办公场地、使用频次,角色名称以及照片是为了更有代入感的个人情况说明,但值得注意的是,这里的情况更多围绕职业情况展开,比如工作年限,工作职责,能力维度等,那些在C端中常见的家庭情况,几个孩子什么的统统不重要。

用户行为驱动:用户的工作目标、工作任务和考核指标,B端角色通常是企业员工,为了薪酬,有一般都会有结合任务而完成的考核指标,了解考核指标可以在设计过程中更明确知道哪些内容是用户最关注的东西;

使用场景:工作的时间、地点及工作内容是什么,使用场景是重要但容易被忽略的一个内容,尤其要搞清楚使用产品的场景有哪些、用户平时的工作流程是如何的、主要使用什么功能。可用一个真实、普遍、易懂的故事勾勒一下

使用期望:日常工作面临的挑战和痛点,期望获得的帮助。

角色画像和客户画像之间没有直接关系。因为目标不同,所以会有不同的用户细分:客户画像的目标是成销售,获取利益;角色画像是为了解决问题和为用户创造价值,进一步为公司创造价值。但是在刻画B2B用户画像时,如果只考虑执行者的话,没有客户画像作为指引、摸清决策者的特征与行为,你的产品功能或者体验设计上可能就会出现严重偏差,甚至方向错误。

3.1 客户画像的价值

产品和服务只是企业将价值传递给客户的一种工具和媒介,无论产品形态如何,其本质都是在解决客户的问题。如果没法满足客户的业务需求,基本上该产品对客户是没有价值的。客户画像作用贯穿产品生命全周期,产品/市场/销售较为关注,它的价值主要体现有三点:

对产品:明确为谁服务,快速的了解客户的需求和状况,确定产品功能设计,学会识别用户的解决方案和用户在场景下的诉求,不断迭代调整产品;

对市场/运营人员:建立对客户尽量全面的了解并基于客户画像确定营销内容、营销策略和渠道选择,使产品的服务对象更聚焦;

对销售人员:帮助销售进行客户筛选,找到有效客户,提高转化率,确定业务方向和销售打法。合理配置团队,完成KPI。

客户画像越早建立越好,但是务必注意控制深度和成本,因为不同阶段的企业其侧重点有所不同。在初创期,产品团队可以通过关注典型客户来积累定性数据,从而低成本搭建客户画像;而到了成长期和成熟期,在拥有大量客户数据的前提下,企业可以逐渐过渡到使用定性&定量相结合的方式来形成更为清晰的客户画像。

 

3.2 角色画像的价值

以前业界有种说法,做B端,能用是第一位,用户体验不重要。所以除了一些成规模的SaaS公司,设计师在B端几乎无用武之地,成了组件化的搬运工、工具人。所以大部分的企业在跑马圈地时期是不注重用户体验的,企业有客户画像,却未必有角色画像。

还说用户体验不重要的人,可以看看有赞CEO白鸦的公开说明。

图片来源于网络

2020年,疫情为企业级SaaS带来流量,在今年2月宣布延期复工后,钉钉搜索量激增数倍,无论中大型企业还是小微企业都纷纷加入了远程办公的行列,协同办公SaaS获得了大量的“试用客户”,加快了市场激活的进程,但接下来,流量转化和用户留存成为后疫情时代的核心关注点。

后疫情时代,对企业来说,改善产品用户体验,了解使用产品的终端用户,构建角色画像愈加重要。而角色画像作为产品和设计师比较关注的画像,有以下三点价值

设计前:帮助确立设计目标、设计策略与准则

设计中:解决架构混乱问题,明确需求功能的合理性和优先级;解决需求争议问题和沟通问题,与团队成员就服务目标达成共识,

设计后:解决可用性测试问题,帮助我们锁定合适的测试用户;

总结一下就是角色画像是产品的根基,客户画像是产品的外延生命力的象征,两者相辅相成

 

对于这个章节。我将以我所负责的一款企业产品为例,来讲述用户画像的创建过程。在这个项目中我们通过定性研究创建了用户画像,当然如果必要,大家也可以在后期再通过定量研究对得到的用户画像进行验证。

用户画像的创建可分为以下几个步骤:

 

Step 1:研究准备与数据收集

B端用研和C端有一点不同,企业用户的使用场景基于业务,背景复杂、角色多样、使用工具特殊(如企业自有后台系统)等,导致无法在可用性实验室中切实地模拟出来,所以我们得接近用户、基于业务场景去了解用户。

小编大致总结了一下,B端用研有以下3大痛点:

信息获取难:B端产品主要针对用户工作和业务开展,一般都是强制使用产品不存在“挑剔”的选择空间,导致用户的反馈就非常少,信息的获取壁垒较高。“深度访谈”是最核心也是获取信息性价比最高的一种方法,但是出于对信息用途的不了解,对商业隐私、生意经验泄露的担忧,B端用户可能不愿意配合调研或不信任你。

业务复杂:缺乏行业经验,难以理解业务,这会让用研对象觉得你不专业,仿佛鸡同鸭讲、对牛谈琴。而且在不理解业务的情况下,设计师在访谈过程中会过于关注基础业务,无法进行更深层次的访谈,采集的信息并非用户的真正需求。

视角不同:设计师视角容易缺乏框架性思考,搞不清每个业务模块/功能的边界以及它们之间的关系,不能站在用户(决策者、使用者)的角度思考问题,以至于被用户牵着鼻子走,用户说什么就是什么,能和用户产生共鸣的部分极少。

俗话说“磨刀不误砍柴工”,针对以上三大痛点,项目伊始有必要进行一轮全面的桌面研究,帮助我们快速建立对行业的全局认知并了解业务,另一方面,也有助于我们更好地和用户进行沟通。

 

研究内容:

  • 1.产品的定位、盈利点及目标客户
  • 2.当前的业务目标是什么,主要解决什么问题
  • 3.整体业务框架,核心业务流程和使用场景
  • 4.不同角色之间如何协同以及每种角色的价值和目标
  • 5.专业术语的理解
  • 6.达成业务目标的关键资源和能力

 

研究途径:

  • 1.公司官网、竞品网站、查阅行业内相关报告、参加行业会议等,形成对行业的整体认知,如艾瑞网、易观、CBDNData等专业网站。(部分报告需开通会员才能查阅)
  • 2.通过搜索引擎查询关键词查询相关文章。
  • 3.最快捷的方式是向产品经理/业务方要相关文档或直接向他们请教。
  • 4.销售‌‌/客服/实施顾问等,一般上线的产品都会有客户反馈群或来收集整理客户实时反馈的需求信息,可以通过他们大概了解到目前产品有哪些问题
  • 5.如果有这方面的专家用户,可以虚心向这些专家用户请教,他们对业务的理解更加深入。

 

Step 2:确定目标与画像维度

此处有2个注意点:

  • 1.如何筛选出目标用户?
  • 2.画像维度有哪些?

针对以上2三点,下文将依次展开说明。

 

1、如何筛选出目标用户?

Cooper指出,不能为超过3个以上的用户画像设计产品,这样容易产生需求冲。当有多个用户画像的时候,需要考虑用户画像的优先级。前面讲B2B画像特点的提到过,由于是企业产品,仅仅产品中一条业务线,角色也是多样的,所以在筛选目标用户时有一点尤其要注意:应识别出关键的用户画像

以我公司的招聘业务为例,为了便于大家在宏观上确定什么样的企业是我们主要的目标用户,我们的做法是按企业类型定义了三个KA客户画像。由产品、市场、以及各组leader一起来完成用户画像的优先级排序工作。确定用户画像优先级时,我们可以主要从以下几个方面来考虑:

  • 使用频率
  • 市场大小
  • 收益的潜力
  • 竞争优势/策略等

然后再找关键的角色画像,即角色画像中的决策者和主要使用者,次要使用者和间接使用者因时间、金钱的关系,现阶段不做考虑。我司产品的客户主要是劳动密集型企业,作用是帮助客户解决蓝领用工问题和发薪合规问题。以招聘业务线为例,想把这个产品卖给某企业,首先要打动该企业的HR总监,再说服CEO/董事长,再让招聘部员工-HR试用

那么这条决策链上的关键人就包括了HR总监、CEO/董事长、HR。那在这个案例中,HR总监是决策链的关键人物,因为只有他认可之后,才会申请购买或在CEO面前夸这个产品。而HR是最终产品的使用者,虽然他们在企业购买产品前没有话语权,但是在续费阶段,他们的话语权最大。对于处于成长期的产品来说,我们现阶段的调研目标也是为了获取HR总监和HR两类角色的用户画像,每个角色访谈4~6人;

 

2、画像维度有哪些?

筛选出了目标用户,那画像维度有哪些呢?。以本案例为例,在本次用户画像的设计中,因我司产品处于优化迭代阶段,做用户画像的目的是了解用户的使用情况,比如各功能的使用频率、使用中遇到的问题,定位问题关键及原因分析,优化产品功能及运营模式,同时也希望通过了解用户的具体行为细节和态度,发现新的机会点。

对于企业,主要了解其企业规模、行业属性、业务流程、组织架构、机构里有哪些岗位/工种。这个信息主要由产品或销售采集,应该前置于角色画像。而我们第一步的业务研究中,很大一部分内容也来自于此。

对于决策者,主要向其了解企业管理、业务等方面的需求信息,对于本产品决策者关注的是营收增长、效率提高还是减少成本等方面的问题。

对于主要使用者,侧重了解用户特征、产品认知、使用场景与痛点,各功能的使用频率、使用中遇到的问题等

根据前面前文提到的的用户画像构成要素和自身业务情况,有选择性的摘取,最终梳理出本案的用户画像维度如下:

 

Step 3:确定调研方法

明确了调研对象后,就可以展开调研了。一般有三种方式:

  • 定性研究,基于小样本的研究,如用户访谈、实地调研、轮岗-理解现象原因;
  • 定量研究,收集更大规模样本的调查数据,如问卷调研、数据分析-发现现象;
  • 定量+定性研究,两者的结合。

定量和定性调研究虽各有优劣,但定量较为昂贵、费时,也需要有精通统计分析的认为协助,在B端调研方式中并不太实用。对大多数团队而言,定性是性价比最高、最合适的。它不仅提供了“用户是谁、他们想要什么”,还是基于数据、经济高效较为快捷的一种方式。

采用何种研究方法,主要根据企业生命周期、研究目的、项目时间和经费等进行综合考量,本案中我们选择深度访谈收集一手资料。

 

Step 4:采集角色资料

在明确目标与方法后,需要对整个研究进行细化,制定具体详实的执行计划并开始招募用户采集资料了。可通过前中后三个阶段性策略的来进行访谈。

 

1. 访谈前:搭建信任基础

在构建用户画像的step 1中,我们已经对业务和要访谈的用户角色有了一定的了解。只需在访谈时间的4-7天前,根据确定的画像维度来设计访谈大纲。设计大纲的目的是避免访谈过程中对话内容发散、混乱而无法收集到足够多的有效信息。

需要注意的是:大纲需要针对访谈的每一条需求,做到详细、缜密,同时要考虑用户对访谈题目的理解,可根据产品使用顺序,由易到难、客观到主观、概括到具体的顺序展开,比如产品功能的使用频率就可以作为一个客观问题放在问题的开始。且要考虑访谈的时间,因为访谈的时间不易过长,所以访谈提纲也不能过于冗长,典型的访谈大纲模板如下图所示:

并提前将访谈目的告知受访者,能让他们看到访谈的直接或间接价值(提高工作效率、降低成本等),也就能更好地建立双方的信任。因此,我们需要提前确认整个访谈的规划,并主动将相关信息告知受访者,包括访谈的时间、地点、方式、目的、流程,还有过程中可能涉及的问题、后续发放的奖品等。

 

2. 访谈中:表现专业特质

开场介绍

跟C端访谈一样,正式访谈开始之前的开场白非常重要!除了再次介绍自己(不管是什么岗位,此刻我就是用户研究员),说明这次访谈的目的,一定还要强调访谈的隐私性和数据安全性,毕竟他们面对的是真金白银的生意。

 

暖场

在正式访谈前,可以先和用户闲聊2~3分钟,通过一定的沟通活跃气氛,让用户更加放松,同时增强用户对我们信任。暖场和开场介绍可穿插进行,没有绝对的先后之分,在访谈者自我介绍完成之后,也可以让被访者进行自我介绍。

 

一般问题

一般问题是指一些比较基础性问题,用户不需要进行太多思考即可回答,比如“你最常用的功能是哪些”、“使用时间多长”。

 

深入问题

深入问题是用户行为和想法更加深入的探索,会更关注用户行为细节和行为背后的动机。一般在问这些问题时,访谈者需要不断地询问用户为什么,直到用户无法继续回答。深入问题是整个访谈的核心,也最容易挖掘到用户需求和痛点。

 

回顾与总结

每部分的访谈结束后可进行简单的小结。访谈者通过回顾访谈过程对用户的行为和态度进行客观阐述,一方便有助于访谈者梳理思路,另一方面让用户对访谈结果再次确认。

 

3. 访谈后:实现长线共赢

最好和访谈对象建立长期联系,尤其是一线业务人员。人和人面对面聊过后,会产生基本的信任感和好感,要借助访谈的机会,拉近和业务人员的距离。如果后续项目中遇到问题,想获取最真实的一线反馈,可以联系之前的访谈对象,寻求帮助。

 

Step 5:分析建模

1)根据角色对访谈对象分组

将用户访谈后得出的重点信息写在便利贴上(或Excel表中打印后切片),设计师需要根据产品用户角色不同,将受访的用户归类分组,如HR和HR总监。

 

2)找出行为变量

分组后,需要识别关键的行为变量,将调研到的用户与行为变量进行一一对应,并识别差异化行为模式。如下图所示

 

3)映射访谈对象与行为变量的关系

再将不同的角色间同类行为模式归纳(合并同类项),进行行为描述。此处需注意以行为变量为依据进行用户对应时,不必追求绝对的精准,只要相对能映射清楚即可。梳理完后,观察可发现某些用户群体聚集在几个行为变量上,它们构成了一个显著的行为模式,由此聚类出某个角色类型。依此类推,可以发现几个不同的行为模式。为保证全面,映射完最好遍历一下,检查是否有用户或变量的遗漏。

 

4)找出共性行为模式

完成映射后,寻找在变量轴上的对象群。梳理完后,如果一组对象聚集在多个不同的变量上,则可以代表一类角色存在显著的共性行为表现(通常每类角色会有2~3个共性行为)。共性行为能帮我们识别标准化产品需要满足的用户需求,而差异化行为可以根据企业需求做定制化服务,一个B端产品是不太可能满足所有用户的需求的。

 

Step 6:画像呈现

一旦我们找到共性行为,就可以创造用户画像了。梳理出每类角色的行为、目标、痛点等维度特征,形成画像的基本框架。最后再完善用户画像,此时我们需要做的事情主要是:

  • 1)结合真实的数据,选择典型特征加入到用户画像中
  • 2)结合使用场景进行故事描述,在描述中体现行为变量等因素,让画像更加丰满、真实。
  • 3)让用户画像容易记忆,比如用照片、名字、年龄、几条简单的关键特征描述,都可以减轻读者的记忆负担

最终客户画像呈现如下图

数据已脱敏,非真实数据

 

最终角色画像呈现如下图 

数据已脱敏,非真实数据

 

用户画像作为一个强大的设计和交流工具,能够让利益相关人目标始终保持一致,它的价值在于传播与使用。举个例子,90年代,库珀将用户画像的描述做成一页纸贴在墙上,一个产品的一个用户画像做一页纸,这样设计团队成员每天走进办公室就能看到。

用户画像制作出来后,与整个项目团队共享定义的用户画像是很重要的,千万不要让他在共享文档里积灰或挂在墙上当摆设。你要做的是让用户画像从纸上跃起,走进你同事的心里,让他在每次讨论、每个决策时,自然、自发地被提起。所以用户画像的使用也是极其重要的,不然前面的工作都是无用之功。

所以,你可能需要:

向团队介绍用户画像。花点时间介绍研究的过程,展示照片给他们看,聊一聊画像的需求,期望,痛点,性格等。最好以故事性的方式进行引导,并长期地在会议里提到并讨论它

 

在你的用户故事中使用用户画像。“如果我是**业务招聘员,我想要快速识别出今天某门店招聘的人数和到岗的人数”。设计时,花点时间想象一下软件会被用户在工作中如何应用。

 

造访不同团队,介绍用户画像,包括它从何来,如何用。教他们怎么招募有代表性的用户进行测验,如何写用户情景来启发设计或作为可用性测试任务

 

总的来说,在你能力范围之类的地方,宣传用户画像的商业价值,提升大家的信任。毕竟用户画像可以帮助产研团队跳出自己的需求,了解真正使用产品的人的需求。当越来越多的团队使用用户画像,那么用户画像就会越来越像一个真实的用户,帮助团队从用户的角度出发去设计产品。

 

值得注意的一点是,用户画像并非一成不变的,很大程度上受环境和周期的影响,所以我们要定期回顾自己的用户画像,对他们进行一些更新,确保和现实一致性。市场变化和策略的变化可能会重新定义你的业务受众,也可能出现其他的细分,这也是重新调整用户画像的好机会,否则它们最终将失去生命力。希望你的用户画像也能始终对业务起到帮助,为体验助力。

文章来源:学UI网   作者:小纽扣

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



前端性能优化指北-关于有些细节和思路

前端达人

目录

1. 比你最强的竞争对手快20%

2. 反应时间为100毫秒,帧数是每秒60帧

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

定义你所需要的环境

4. 选择和安装你的开发环境

5. 渐进增强(progressive enhancement)

6. AMP还是Instant Articles?

7. 选择适合你的CDN

开始优化

8. 直接确定优化顺序

9. 使用符合标准的技术

10. 考虑微优化和渐进启动

12. HTTP的缓存头使用的合理吗?

13. 减少使用第三方库,加载JavaScript异步操作

14. 图片是否被正确优化?

15. 图片的进一步优化

15.1 如何使用webpack将静态素材快速托管到ImageX,并开启http/2

16. 网页字体优化了吗?

17. 快速执行关键部分的CSS

18. 通过tree-shaking和code-splitting减少净负载

19. 提升渲染性能

20. 预热网络连接,加快传输速度

HTTP/2

21. 准备好使用HTTP/2

22. 适当部署HTTP/2

23. 确保服务器安全可靠

快速入门

 

微优化是保持性能最好的办法,但是又不能有太过明确的优化目标,因为过于明确的目标会影响在项目中做的每一个决定。以下是一些不同的模型,请按照自己舒服的顺序阅读

1. 比你最强的竞争对手快20%

根据一个心理学研究,你的网站最少在速度上比别人快20%,才能让用户感觉到你的网站比别人的更快。这个速度说的不是整个页面的加载时间,而是开始加载渲染的时间,首次有效渲染时间(例如页面需要加载主要内容的时间),或者交互时间(指的是页面或者应用中主要的页面加载完成,并主备好与用户进行交互的时间)。

在Moto G(一个中端三星设备)和Nexus 4(比较主流的设备)上衡量开始渲染时间(用WebPagetest)以及首页有效渲染时间(用Lighthouse),最好是在一个开放的实验室中,使用规范的3G,4G和Wi-Fi链接。

 

你可以通过你的分析报告看看你的用户处在哪个阶段,选取其中前90%的用户体验来做测试。接着收集数据,建一个表格,筛去20%的数据并预设一个目标(如:性能预算)。现在你可以将上述两个值进行对比检测。如果你始终维持着你的目标并且通过一点一点改变脚本去加快交互时间,那么上述方法就是合理可行的。

 

如果前端工程师们都在积极的参与项目概念,UX以及视觉设计的决定,这将会给整个项目带来巨大收益。地图设计的决定违背了性能理念,所以他在这份清单内的顺序有待考虑。

2. 反应时间为100毫秒,帧数是每秒60帧

RAIL性能模型会为你提供一个优秀的目标,既尽最大的努力在用户初始操作后的100毫秒内提供反馈。为了达到这个目标,页面需要放弃权限,并将权限在50毫秒内交回给主线程。对于像动画一样的高压点,最好的方法就是什么都不做,因为你永远无法达到最小绝对值。
同理,动画的每一帧都需要在16毫秒内完成,这样才能保证每秒60帧(一秒/60=16.6毫秒),如果可以的话最好能在10毫秒内完成。因为浏览器需要一定的时间去在屏幕上渲染新的帧,而且你的代码需要在16.6毫秒内完成执行。要注意,上述目标应用于衡量项目的运行性能,而非加载性能。

3. 首次有效渲染时间要低于1.25秒,速度指数要低于1000

纵使这个目标实现起来非常困难,你的最终目标也应该是让开始渲染时间低于1秒且速度指数低于1000(在网速快的地方)。对于首次有效渲染时间,上限最好是1250毫秒。对于移动端,3G下移动设备首次渲染时间低于3秒都是可以接受的。稍微高一点也没关系,但千万别高太多。

定义你所需要的环境

4. 选择和安装你的开发环境

不要过多的关注当下最流行的工具,坚持选择适合自己开发环境的工具,例如Grunt、Gulp、Webpack、PostCSS,或者组合起来的工具。只要这个工具运行的速度够快,而且没有给你的维护带来太大问题,这就够了。

5. 渐进增强(progressive enhancement)

在构建前端结构的时候,应始终将渐进增强作为你的指导原则。首先设计并且构建核心体验,随后再完善那些为高性能浏览器设计的高级特性的相关体验,创建弹性体验。如果你的网页可以在使用低速网络、老旧显示器的很慢的电脑上运行飞快,那么在光纤高配电脑上它只会运行的更快。

6. AMP还是Instant Articles?

根据你整体组织结构的优先顺序和策略,你可以考虑使用Google的AMP或Facebook的Instant Articles。要知道没有这些你也可以达到不错的性能,但是AMP可以提供一个性能不错的免费的内容分发网络框架(CDN),Instant Articles可以在Facebook上促进你的性能。你也可以建立progressive web AMP

7. 选择适合你的CDN

根据你的动态数据量,可以将一部分内容外包给静态网站生成工具,将它置于CDN上,从中生成一个静态版本,从而避免那些数据库的请求。也可以选择基于CDN的静态主机平台,通过交互组件丰富你的页面(JAMStack)。注意CDN是否可以很好的处理(或分流)动态内容。没必要单纯的将你的CDN限制为静态。反复检查CDN是否执行了内容的压缩和转化,检查智能HTTP/2传输和缓存服务器(ESI),注意哪些静态或动态的部分处在CDN的边缘(最接近用户的服务器)。

开始优化

8. 直接确定优化顺序

首先应该弄清楚你想解决的问题是什么。检查一遍你所有的文件(JavaScript,图片,字体,第三方script文件以及页面中重要的模块,例如轮播,复杂信息图标和多媒体内容),并将他们分类。
列一个表格。明确浏览器上应该有的基础核心内容,哪些部分属于为高性能浏览器设计的升级体验,哪些是附加内容(那些不必要或者可以被延时加载的部分,例如字体,不必要的样式,轮播组件,播放器,社交网站入口,很大的图片)。

9. 使用符合标准的技术

使用符合标准的技术向过时的浏览器提供核心体验,向老式浏览器提供增强体验, 同时对所加载的内容要有严格的把控。即首要加载核心体验部分,将增强部分放在DomContentLoaded,把额外内容发在load事件中。以前我们可以通过浏览器的版本推断出设备的性能,但现在我们已经无法推测了。因为现在市场上很多廉价的安卓手机都不考虑内存限制和CPU性能,直接使用高版本的Chrome浏览器。一定要注意,在我们没有其他选择的时候,我们选择的技术同时可能成为我们的限制。

10. 考虑微优化和渐进启动

在一些应用中,可以在渲染页面前先初始化应用。最好先显示框架,而不是一个进度条或指示器。使用可以加速初始渲染时间的模块或技术(例如tree-shakingcode-splitting),因为大部分性能问题来自于应用引导程序的初始分析时间。还可以在服务器上提前编译,从而减轻部分客户端的渲染过程,从而快速输出结果。最后,考虑使用Optimize.js来加快初始加载速度,它的原理是包装优先级高的调用函数(虽然现在已经没什么必要了)。

 

到底采用客户端渲染还是服务器端渲染?不论哪种做法,我们的目标都是建立渐进启动:使用服务器端渲染可以得到很短的首次有效渲染时间,这个渲染过程也包括小部分的JavaScript文件,目的是使交互时间尽可能的接近首次有效渲染时间。接下来,尽可能的增加一些应用的非必要功能。不幸的是,正如Paul Lewis所说,框架基本上对开发者是没有优先级的概念的,因此渐进启动在很多库和框架上是很难实施的。如果你有时间的话,还是考虑使用策略去优化你的性能吧。

12. HTTP的缓存头使用的合理吗?

仔细检查一下例如expires,cache-control,max-age以及其他HTTP缓存头是否被正确的使用。一般来说,资源不论在短时间(如果它会被频繁改动)还是不确定的时间内(如果它是静态的)都是可缓存的——你大可在需要的时候在URL中成改版本。如果可能,使用为指纹静态资源设计的Cache-control:immutable,从而避免二次验证(2016年12月,只有FireFox在https://处理中支持)。你可以使用,Heroku的primer on HTTP caching headers,Jake Archibald的 ”Caching Best Practices”,还有IIya Grigorik的HTTP caching primer作为指导。

13. 减少使用第三方库,加载JavaScript异步操作

当用户请求页面时,浏览器会抓取HTML同时生成DOM,然后抓取CSS并建立CSS对象模型,最后通过匹配DOM和CSS对象生成渲染树。在需要处理的JavaScript文件被解决之前,浏览器不会开始对页面进行渲染。作为开发者,我们要明确的告诉浏览器不要等待,直接开始渲染。具体方法是使用HTML中的deferasync两个属性。事实上,defer更好一些(因为对于IE9及以下用户对于IE9及以下用户,很有可能会中断脚本)。同时,减少第三方库和脚本的使用,尤其是社交网站的分享按键和<iframe>嵌入(比如地图)。你可以使用静态的社交网站分享按键(例如SSBG的)和指向交互地图的静态链接去代替他们。

14. 图片是否被正确优化?

尽可能的使用带有srcsetsizes还有<picture>元素的响应式图片。你也可以利用<picture>元素的AVIF、WEBP格式,用JPEG格式作为替补(参见Andreas Bovens的code snippet)或是使用内容协商(使用接受头)。本身可以使用自己的PS或者skecth尝试导出,若不能导出,可以尝试 火山引擎的ImageX图像处理服务(不知道怎么使用可以自行百度搜索 "火山引擎 ImageX")可以支持多种格式输出,比如AVIF、webp格式;

我曾经写过这篇文档可以对照一下:高效率图像压缩处理服务, 参考截图:

 

你也可以使用客户端提示,现在浏览器也可以做到。在用来生成响应图片的源文件过少时,使用响应图片断点生成器。

15. 图片的进一步优化

当你在编写登录界面的时候,发现页面上的图片加载的特别快,这时你需要确认一下图片进一步优化的思路只要有三点:

  • 降低图片的分辨率,如果浏览器中展示区域100*100,此时展示 400*400 就属于资源浪费,这也是显著提高图片响应速度最直接的方法;
  • 降低图片压缩的质量,图片压缩质量,使用有损压缩,比如图片压缩质量90 和75对人眼可见的范围内都可以接受,常见支持有损压缩的图片格式比如,jpeg、wepb、heic、avif等图片格式支持图片有损压缩;
  • 改变图像压缩的压缩方式,改变图片的压缩算法也能更高效的提高图片优化图片提高速度,比如 常见图像压缩率(图像画质等同前提下): HEIF (heic) > AVIF (avif、avis) >webP(awebp) > jpeg > png 等;

正常情况下PNG是原图格式,体积特别大,巧的是业界对PNG 有pngquant 使用Median Cut量化算法的修改版本和其他技术来缓解Median Cut的不足,可以最大效率保留信息的前提下降低png 的体积大小;如果我们把如上的一些优化处理起来,我使用的过程中发现,火山引擎的imagex 已经完美的支持了上面三者的使用方法:下面我举个例子做一下说明:

http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/public/attachments/2021/03/11/GyVrojIWFkQOKSAzYnUmlQxvaESnPaZYxgpu9v1Z.png~tplv-n9b2vwdhz3-12:300:200.webp 这个是 png的原图处理好的结果,在这个url中imagex 给出了一种url语义,"~tplv--模板名称:[模板参数].图像格式"  通过改变300:300 能改改变压缩率,通过参数能够调整压缩质量,通过改变webp-->avif 可以转换成不同的压缩方法;

更巧妙的是在这,就算指定输出png后仍然还可以设置质量参数

 

如果你还觉得不够,那你可以通过多重背景图片技术来提高图片的感知性能。

15.1 如何使用webpack将静态素材快速托管到ImageX,并开启http/2

这里发现一个第三方写的但被官方推荐的开源插件https://github.com/Cmaxd/veimagex-webpack-loader ,通过配置webpack-loader 插件的方式可以将图片上传到ImageX,然后将图片使用不同的图片模板访问就可以满足需求,同一个图片可以使用多个地址,例如avif、webp、jpeg 使用 <picture> 标签进行降级 或者判断浏览器支持降级;

 

16. 网页字体优化了吗?

你用来修饰网页字体的服务很有可能毫无用处,包括字形和额外的特性。如果你在使用开源的字体,尝试用字体库中某一个小的子集或是自己归类一个小的子集从而压缩文件大小(例如通过一些特殊的注音符号引用Latin)。WOFF2 support是个非常不错的选择,如果浏览器不支持,那你可以将WOFF和OTF作为备用。你也可以从Zach Leatherman的“Comprehensive Guide to Font-Loading Strategies”一文中选择一个合适的策略,然后使用服务器来缓存字体。如果想要快速入门,Pixel Ambacht的教程与案例会让你的字体变得尽然有序。如果你用的是第三方服务器主机,没办法自己在服务器上对字体进行操作,一定看看Web Font Loader

17. 快速执行关键部分的CSS

为了确保浏览器尽可能快的渲染你的页面,先收集页面首次可见部分的CSS文件(也叫决定性CSS或上半版CSS)进行渲染,然后将它加入页面的<head>部分,从而避免重复操作。因为慢启动阶段对交换包大小的限制,你关键CSS文件的大小也被限制在14KB左右。如果高于这个值,浏览器需要重复一些步骤来获取更多的样式。关键CSS是允许你这样做的。可能对每个模板都需要这个操作。如果可能,考虑一下用Fiament Group用的条件内敛方法

通过HTTP/2,关键CSS可以单独存为CSS文件,通过服务器传输,而且可以避免HTML膨胀。服务器传输缺乏连续支持,并且存在一些超高速缓存的问题(Hooman Beheshti演示的前144页)。事实上,这样会导致网络缓冲区膨胀。因为TCP的慢启动,服务器传输在稳定的连接下会更有效率。所以你可能需要建立带有缓存的HTTP/2服务器传输机制。但请记住,新的cache-digest规则会否定手动建立的需要缓存的服务器的请求。

18. 通过tree-shaking和code-splitting减少净负载

Tree-shaking是通过保留那些在项目过程中真正需要的代码从而清理你的构建过程的一种方式。你可以用Webpack 2来提出那些没用的住配置文件,用UnCSSHelium从CSS中取出不需要的样式。同理,也可以考虑学习一下如何编写高效的CSS选择器,以及如何避免膨胀和高费的样式

Code-splitting是另一个Webpack特性,它可以根据按需加载的块将你的代码分开。只要你在代码中定义了分离点,Webpack便会处理好相关的输出文件。它基本上能保证你初始下载的内容很小,而且在需求被添加时按需请求代码。

Rollup所展示的结果要比Browserify配置文件所显示的好得多。所以当我们想使用类似工具的时候,或许应该看看Rollupify,它将ECMAScript2015模块变成了一个更大的CommonJS模块——因为小模块没准有出乎意料的高性能成本,这源自于你对打包工具模块系统的选择。

19. 提升渲染性能

使用类似CSS containment的方法对高消耗组建进行隔离,从而限制浏览器样式的范围,可以作用在为无canvas的浏览工作的布局和装饰工作中,或是用在第三方工具上。要确保页面滚动和出现动画效果时没有延迟,别忘了之前提到过的每秒60帧的原则。如果没办法做到,那就尽可能保证每秒帧数的大致范围在15到60帧。使用CSS中的will-change通知浏览器哪些元素和属性发生了变化。也记得要衡量渲染执行中的性能(可以用DevTools)。可以参照Udacity上Paul Lewis的免费课程——浏览器渲染优化,作为入门。还有一篇Sergey Chikuyonok的文章讲了如何正确的用GPU动画

20. 预热网络连接,加快传输速度

使用页面框架,对高消耗组建延迟加载(字体,JS文件,循环播放,视频和内嵌框架)。使用资源提示来节省在dns-prefetch(指的是在后台执行DNS检索),preconnect(指要求浏览器在后台进行握手链接(DNS,TCP,TLS)),prerender(指要求浏览器在后台对特定页面进行渲染),preload(指的是提前取出暂不执行的源文件)。根据你浏览器的支持情况,尽量使用preconnect来代替dns-prefetch,而且在使用prefetchprerender要特别小心——后者(prerender)只有在你非常确信用户下一步操作的情况下再去使用(比如购买流程中)。

HTTP/2

21. 准备好使用HTTP/2

Google开始向着更安全网页的方向努力,并且将所有Chrome上的HTTP网页定义为“不安全”时,你或许应该考虑是继续使用HTTP/1.1,还是将目光转向HTTP/2环境。虽然初期投入比较大,但是使用HTTP/是大趋势,而且在熟练掌握之后,你可以使用service worker和服务器推送技术让行性能再提升一大截。
现在,Google计划把所有HTTP页面标记为不安全,并且将HTTP安全指示器设置为与Chrome用来拦截HTTPS的红色三角相同的图标。

使用HTTP/2的环境的缺点在于你要转移到HTTPS上,并且根据你HTTP/1.1用户的数量(主要指使用过时操作系统和过时浏览器的用户),你需要适应不同的建构过程,才能发送不同的建构。注意:不论是迁移还是新的构建过程都可能非常棘手而且耗时很多。

 

22. 适当部署HTTP/2

重申,使用HTTP/2协议之前,你需要彻底排查目前为止你所使用协议的情况。你需要在打包组建和同时加载很多小组间之间找到平衡。

一方面,你可能想要避免将很多资源链式链接,与其将你全部的界面分割成许多小模块,不如将他们压缩使之成为建构过程的一部分,之后给它们赋予可检索的信息并加载它们。这样的话,对一文件将不再需要重新下载整个样式清单或JavaScript文件。

另一方面,封装是很有必要的,因为一次向浏览器发送太多JavaScript文件会出问题。首先,压缩会造成损坏。得益于dictionary reuse,压缩大文件不会对文件造成损害,压缩小文件则不然。确实有方法可以解决这个问题,但这不是本文讨论的范畴。其次,浏览器还没有优化到可以对类似工作流进行优化。例如,Chrome会引发进程间通信(IPCs),这些通信的数量与资源的数量成正比,而这成百上千个资源将会消耗大量的浏览器的执行时间。
Chrome的Jake Archibald建议,为了用HTTP/2达到最好的效果,考虑一下逐步加载CSS文件

当然你可以考虑逐步加载CSS文件。很显然,你这样做对HTTP/1.1的用户非常不利,所以你可能需要根据不同的浏览器建立多个版本来应对你的调度过程,这样就会使过程略微复杂。你也可以避免HTTP/2连接的合并,同时受益于HTTP/2来使用域名碎片,但是实现起来有些困难。

我们到底应该做什么呢?如果你粗略的用过HTTP/2,似乎成功的发送过10个左右的包(在老是浏览器上运行的也不错)。那你就能着手开始试验并且为你的网站找到平衡点。

23. 确保服务器安全可靠

所有的浏览器都支持HTTP/2并且使用TLS,这是有你可能想要避免安全警告,并删除页面上没用的元素。好好检查你的安全头部是否设置正确排除已知的缺陷检查证书

如果还没有迁移到HTTP, 你那可以先看看HTTPS准则(The HTTPS-Only Standard)。确保所有外部插件和监视脚本都能被HTTPS正确加载,确保没有跨站脚本出现,HTTP脚本传输的安全头内容安全头也都设置正确。

快速入门

这份清单综合性很强,几乎介绍了所有的可用的优化方式。那么,如果你只有一个小时进行优化,你应该干什么呢?让我们从中总结10个最有用的来。别忘了在你开始优化前和结束优化后,记录你的结果,包括开始渲染时间以及在3G,有限连接下的速度。

但没关系,本文只是一个普通大纲(希望能做到综合性强),你应该根据自己的工作环境列一份适合自己的清单。最重要的,在开始优化之前,先对项目中存在的问题有一个明确的了解。


转自:csdn论坛 ,

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

Web前端:CSS最强总结 附详细代码

前端达人

Web前端总结:
Web前端:HTML最强总结 附详细代码
Web前端:CSS最强总结 附详细代码
Web前端:JavaScript最强总结 附详细代码

基本知识

基本概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
层叠:多个样式可以作用在同一个html的元素上,同时生效

  • 样式定义如何显示HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个CSS很像化妆,通过不同的CSS将同样的HTML内容打造为不同的呈现结果。 所以,前端程序员相互表白的时候可以说:you are the CSS to my HTML. 这是不是CSS是对HTML进行美化和布局作用的最好总结?

优点

  1. 功能强大
  2. 将内容展示和样式控制分离
    降低耦合度。解耦
    让分工协作更容易
    提高开发效率

CSS的使用

CSS与html结合使用
根据定义CSS的位置不同,分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;

代码样式:

弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。

内部样式

定义在head标签内,通过style标签,该标签内容就是CSS代码

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部样式</title> <style> div{ color: red; } </style> </head> <body> <div>hello my css</div> </body> </html>

区别

  • 作用域的范围:外部样式表>内部样式表>行内样式表
  • 优先级:外部样式表<内部样式表<行内样式表;
  • 同样的样式作用在同一个标签身上:就近原则。
  • 不同样式作用在同一个标签身上,叠加生效。

CSS语法

基本格式由两个主要的部分构成:

  • 选择器
  • 一条或多条声明

基本选择器

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式,但是不推荐。如果需要同样的样式对多个标签生效, 使用class选择器。

class选择器

选择具有相同的class属性值的元素。

  • class 选择器用于描述一组元素的样式,class 选择器有别于id选择器。
  • class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示

PS:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用

元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};PS:标签名称必须是html提供好的标签。

使用标签选择器:自动使用在所有的同名的标签上


优先级

选择器的优先级

ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效

样式表的优先级

行内样式 > 内部样式 >外部样式

同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突, 样式叠加生效

CSS常用样式

color:字体颜色

跟颜色相关的取值分3种:

  1. 颜色的单词 red blue…
  2. rgb(红,绿,蓝)三色的取值范围是0-255 rgb(255,0,0)
    rgba(红,绿,蓝,透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
  3. #值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如:#FF0000

width height:宽高

PS:只有块状元素可以设置宽高,行级元素设置不生效

取值方式有2种:

  • 数值 绝对数字 单位是像素PX
  • 百分比:占据父元素的比例

背景样式

在这里插入图片描述
在这里插入图片描述

文本样式

在这里插入图片描述

列表样式

在这里插入图片描述

边框样式

在这里插入图片描述

HTML&CSS调试利器

以谷歌浏览器为例说明。
快捷键F12或者工具条中的开发者工具调出以下内容。
在elements中可以看到当前页面的所有标签,在styles中可以看到html元素对应的样式。

交集选择器

条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。

语法:h3.class{ color:red; } 其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,例如div.list。

交集选择器是并且的意思。 即…又…的意思

例如: table.bg 选择的是: 类名为 .bg 的 表格标签,但用的相对来说比较少。

后代选择器

概念
后代选择器又称为包含选择器。

作用
用来选择元素或元素组的子孙后代

其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲爷爷,再写儿子孙子。

格式:父级 子级{属性:属性值;属性:属性值;}
语法:.class h3{color:red;font-size:16px;}

当标签发生嵌套时,内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说,它能选择任何包含在内 的标签。

子元素选择器

作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素。 其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接。
语法:.class>h3{color:red;font-size:14px;}
比如:
.demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3


转自:csdn论坛 ,

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

从零开始画图标系列:超全面的基础知识

周周


在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的方法,是入门 UI设计的必备条件。

网上现存不少关于图标绘制的文章和教学,但不是太笼统,就是太片面。即使看了很多这种碎片化的知识,也很难在我们的认知中对它有比较全面、系统的认识,所以大多数初级的 UI设计师,始终画不好图标。

针对这个问题,我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法,让所有设计新人更快地上手图标设计。

本文共分为5个部分:

  • 图标简介:先对图标有个整体的认识,了解图标总共有哪些类型和应用场景。
  • 工具图标:最常见的工具型图标的相关规范,以及对应的设计案例演示。
  • 装饰图标:近年来使用越来越广泛的视觉型图标设计认识,以及对应的讲解。
  • 启动图标:讲解启动图标的相关规范,如何高效的进行设计。
  • 应用案例:介绍在一个 UI项目中,要应用多少种图标规格,如何设计出正确的图标。

图标的基本认识

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

对于 UI设计师而言,我们主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

在当下最常见的扁平化设计风格中,界面的实际视觉组成只有4种元素,图片、文字、几何图形、图标。

从零开始画图标系列:超全面的基础知识

△ 由图片、文字、几何、图标组成的界面

可以说,图片、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI设计中除了插画元素以外唯一需要我们「绘制」、「创作」的元素,一涉及到这两件事,难度就直线上升了。

本来往界面里丢一些方方圆圆、贴几张图、填一些字,就可以把界面做出来了,比如 Clear APP,不仅工作量少,而且还符合极简原则,为什么还要吃力不讨好的设计图标?

从零开始画图标系列:超全面的基础知识

△ Clear APP 的截图

这就涉及图标作用的探讨了,为了节约篇幅,更快进入大家最想看的重点干货,我就不长篇大论从上古时期人类与图形符号的纠葛开始写了,就谈对于图形界面本身,为什么图标有这么重要的地位,没它不行?

有两个原因,第一文字虽然也是一种图形符号,但相对于图标而言,文字实在太复杂了,在识别效率上有先天的劣势。再者,不同的语言,文字的长度也不同,如果换成阿拉伯语或者俄罗斯语,或许一行还装不下所有文字。图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

从零开始画图标系列:超全面的基础知识

△ 应用文字替换了图标的对比

第二点,就是关于视觉的观赏性。有些页面中,如果把图标去掉了,也丝毫不会影响我们的操作效率,以及对内容的理解。但没有图标,缺少这些点缀,我们就会觉得这个页面看起来太枯燥了,不得劲,最好的例子就是应用的设置页了,见下方案例。

从零开始画图标系列:超全面的基础知识

△ 设置页有图标和没有图标的对比

既然知道了图标的作用和重要性,那么接下来,就要进一步了解在工作中我们要设计哪些图标。

可以先划分成三种大类:

  • 工具图标
  • 装饰图标
  • 启动图标

下面,我们将对它们分别进行介绍,以及展示相关的设计类型,方便读者在开始学习具体设计前,对 UI设计会创作的图标有更全面的认识。

工具图标

首先,我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型,即应用内有明确功能、提示含义的标识。作为最常见的图标类型,我们就不需要做太多的说明了。

从零开始画图标系列:超全面的基础知识

△ 常见的工具图标

虽然理解起来容易,但是它所包含的设计样式却并不少,可以把它们归纳成线性、面性两个大类,再分别进行细分。

1. 风格1:线性风格

线性图标,即图形是通过线条的描边轮廓勾勒出来的。多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓,比如上图案例,线性图标的创作空间看似不多,但实际上有非常多的调整空间。

下面我们把它们罗列出来。

从零开始画图标系列:超全面的基础知识

△ 线性风格的工具图标

2. 风格2:面性风格

面性图标,即使用对内容区域进行色彩填充的图标样式。同样,在这类图标中,也不是只能应用纯色的方式进行填充,还有非常多的视觉表现类型。

从零开始画图标系列:超全面的基础知识

△ 面性风格的工具图标

3. 风格3:混合风格

当然,在设计图标类型的时候,也不一定非线性和面性不可,有一些热衷创造和尝试的设计师,还创作出了混合型的图标,既有线性描边的轮廓,又有色彩填充的区域。常见的样式类型如下:

从零开始画图标系列:超全面的基础知识

△ 混合风格的工具图标

装饰图标

和工具图标比起来,装饰图标的视觉性作用更多。对于一些比较复杂的应用来说,过分的简约并不能弥补信息过多的信噪问题,我们要通过丰富视觉体验的方法来增加内容的观赏性,减少一屏内显示内容的数量。

比如在分类列表里,是可以只使用线框和文字把大量内容浓缩到一屏以内,但实际浏览效率并不会增加,而且并不美观。

从零开始画图标系列:超全面的基础知识

△ 装饰图标在识别性上的作用

还有就是国内的界面设计环境,会根据运营需求设计进行特殊化处理,尤其在电商领域,首屏的图标都会改成首页风格的样式,增加活动氛围。

从零开始画图标系列:超全面的基础知识

△ 节日活动中的装饰图标

装饰性的图标设计,虽然没有明确的规范该怎么做,效果怎么好怎么来,但最常见的类型有四种,下面分别进行介绍。

1. 扁平风格

扁平风格的装饰图标,通常可以理解成是用扁平插画的方式画出来的图标,除了继承扁平的纯色填充特性以外,也比普通图标有更丰富的细节与趣味性。

从零开始画图标系列:超全面的基础知识

△ 扁平风格的装饰图标

2. 拟物风格

拟物风格的图标现在出现的频率越来越高,集中在大型的运营活动中,通常这些活动会通过拟物的方式将头部设计成有故事性的场景,所以自然顶部的相关图标使用拟物的设计形式会更贴合。

从零开始画图标系列:超全面的基础知识

△ 拟物风格的装饰图标

3. 2.5D风格

2.5D是一种偏卡通、像素画风格的扁平设计类型,在一些非必要的设计环境中,使用2.5D会比较容易搭配主流的界面设计风格,有更强的趣味性和层次感。

从零开始画图标系列:超全面的基础知识

△ 2.5D风格的装饰图标

4. 炫彩渐变

这是一个拗口的原创名词,找不到更合适的形容,还是觉得浮夸点符合它的气质。这种图标,就是通过一系列非常激进的渐变和撞色实现,通常还会使用彩色的阴影。

使用这样图标的区域,通常都会呈现出一副五彩斑斓的景象,只有在内容非常丰富且用户偏向年轻化的产品中可以使用,是一种非常难驾驭的设计风格。

从零开始画图标系列:超全面的基础知识

△ 炫彩渐变风格的装饰图标

5. 实物贴图

最后一种,就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的,但想想还是放进来合适。因为这种图标的出现频率非常高,有必要在后面掌握它的做法。

从零开始画图标系列:超全面的基础知识

△ 应用摄影实物的装饰图标

启动图标

最后,就要说说启动图标了。启动图标的设计比前面两种类型的图标说起来更难,因为它实际上就是把「LOGO嵌套进系统图标模版」的图标。

除了掌握必要的规范以外,启动图标的主体物设计就是 LOGO 的设计,已经超出了图标绘制本身的知识点。所以,在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习,这里我们先来了解一下它有哪几种设计形式。

1. 文字形式

使用了文字作为图标主体物的类型,通常是这类应用本身的品牌 LOGO 就使用了文字,所以这里就把字体照搬过来。

从零开始画图标系列:超全面的基础知识

△ 文字类的启动图标

2. 图标形式

对于一些偏工具,适合用简单图形传达应用功能的启动图标,就会采取使用工具图标的方式设计。

从零开始画图标系列:超全面的基础知识

△ 图标类的启动图标

3. 图形图标

图形形式看起来和图标形式很接近,但实际上完全不属于同一类型,之所以它不是图标,是因为这类图标的主体图形是一种经过高度抽象化的标识,传达的是品牌性,而不是图形的含义。

从零开始画图标系列:超全面的基础知识

△ 图形类的启动图标

4. 插画形式

对于一些比较纯粹的应用,如读本、漫画、幼儿类应用,就热衷于采用卡通形象作为图标的主体进行设计。

从零开始画图标系列:超全面的基础知识

△ 插画类的启动图标

5. 拟物形式

虽然现在扁平化的设计占据主导地位,但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说,拟物设计所传递的信息往往更直观和准确。

从零开始画图标系列:超全面的基础知识

△ 拟物类的启动图标

当然,还有其它的数之不尽的启动图标设计方式,比如明星大头照、摄影图、游戏原画等,但理解上面这些类型就够了。

前面介绍的三种图标,就是今后在进入 UI 行业设计的内容。虽然图标看起来简单,但可以玩出的花样不少。除了正确设计出图标以外,高低阶的 UI设计师之间的区别也包含图标设计类型掌握的多寡。

所以,在开始学习前,不要将设计图标的目标局限在最简单的图形绘制上,还有很多有趣的设计形式等待你们去尝试。

学习图标所需的软件

了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了。通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这4款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分。

从零开始画图标系列:超全面的基础知识

1. Sketch / XD

这两款软件是我们设计 UI 界面的主力。但大家一定要记得,它们主要的功能是用来完成 UI 界面元素的排版,而不是创作和绘图。

虽然它们都包含路径、钢笔、布尔运算等功能(Sketch 相对 XD 更完善一点),想要绘制一些非常基础的线性或面性图标时没有问题,但只要涉及到比较复杂的图形,往往就束手无策。

所以,我建议所有学习 UI 的新人,都不要从这两个软件中入手,而是先掌握 PS 和 AI,后面想要快速实现一些简单的图标时,自然懂得如何使用 Sketch 和 XD。

可以说,PS 和 AI 的应用决定了我们图标设计的上限,而 Sketch 和 XD 是下限,所以,把上限拓展得越高越好。

2. Photoshop

从零开始画图标系列:超全面的基础知识

PS 是一款无论什么东西都设计得出来的设计软件,但是,它本质上是一款「位图软件」。后续的文章中会提及,在界面中采用矢量格式的图标是最理想的,而 PS 针对矢量的操作并不便捷,比如将矢量图层复制到其它软件中。

实际项目中,我们会用 PS 设计一些视觉表现相对复杂的图标,例如启动图标、拟物图标、实物图标等等。

绘制图标需要用到的 PS 功能并不太多,需要在前期学习这个软件的过程中加以筛选,重点是以下知识点:

  • 路径创建和调整
  • 钢笔工具和锚点
  • 路径图层
  • 布尔运算
  • 图层属性

虽然 PS 在实际项目中是用来画复杂的图标,但并不妨碍我们使用 PS 从最基础的图标开始画起,因为想要熟练掌握上方的知识点,简易的工具图标是最好的磨刀石,之后再学习 AI 的操作,就可以更快的上手。

3. Illastrator

从零开始画图标系列:超全面的基础知识

AI 也是 UI 设计必学的一款软件,它的功能异常丰富,主要用来设计矢量图形。对比 PS,它有更好的矢量操作支持,对于路径细节的调整上,是最全面最细腻的软件,并且 AI 中的图形还可以直接复制粘贴到其它应用的画布中。

如果掌握了上方提及的 PS 基础,那么学习 AI 也就轻松了不少,其中,AI 设计图标中有三个特殊的功能是需要重点掌握和学习的:

  • 形状生成器
  • 轮廓化描边
  • 路径查找器

花几个晚上,掌握了 PS 和 AI 的相关知识点以后,就为我们后续的学习提供了技术支持,可以进入下一阶段了。

结尾

这是图标系列文章的第一篇,信息量不算少。所以我们在结尾再总结一次,方便大家记忆。

  • 知识点一:在 UI 的界面中,图标的主要作用是用来高效地传递信息,以及起到美化界面的作用。
  • 知识点二:UI 会涉及的图标类型主要有三种,工具图标、装饰图标、应用图标。
  • 知识点三:工具图标,是界面中用来传递信息的图形符号,主要包含线性、面性、混合三种设计风格。
  • 知识点四:装饰图标,是界面中用来提升视觉体验的图形,主要包含扁平、拟物、2.5D、渐变炫彩等设计风格。
  • 知识点五:应用图标,是用来启动应用的图标,主要包含文字、图标、图形、插画、拟物等设计形式。
  • 知识点六:学习绘制图标,优先学习 PS、AI 的路径相关功能,而不是 Sketch 和 XD。




文章来源:优设网     作者:超人的电话亭



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



什么是SEO?SEO为什么对企业营销如此重要?

seo达人

 

    搜索引擎优化(通常称为SEO)是提高网站流量的数量和质量的一种做法。网站SEO使用自然搜索结果来增加品牌知名度和网站流量。这是关于了解人们及其在网上寻找的内容。了解了受众之后,就可以提供他们想要的内容,从而提高参与度。让我们讨论为什么SEO如此重要,并学习一些最重要的技巧,您可以将其应用到您的企业中,以在所有重要的搜索引擎排名中列出更高的排名。

    SEO为什么重要?

    SEO非常重要,因为搜索引擎是在线流量的核心。尽管付费广告和社交媒体仍然有效,但大多数在线流量来自搜索引擎。

    搜索引擎涵盖了更多的数字房地产,并在更多的人面前发现了自己。SEO结果也比付费广告获得更多的点击。大约3%(2.8%)的人点击了付费广告。SEO提供的流量是付费广告的20倍。使用此类统计数据,您根本无法忽略其重要性。如果SEO似乎太复杂而难以掌握,请考虑雇用一家专门从事SEO的公司。

    如果不认识SEO的潜力,就不可能谈论SEO。公司提供的优质SEO是常绿的。内容将始终存在于您的网站上,并持续数周,数月和数年产生流量。付费广告只能持续到赚钱为止。SEO永远不会消失。

    SEO公司将使用几种不同类型的网站SEO。最常见的是内容SEO,图像SEO和异地SEO。内容SEO是经过优化的网站内容,例如文章和博客文章。图片SEO涵盖了网站上图片的元描述和名称。站外SEO是指网站之外可能影响搜索引擎排名的内容,例如高质量的反向链接。所有这些共同创造了更高的排名。

    网站SEO分析

    SEO分析是SEO公司为网站提供SEO提示的多种方式之一。该分析将检查您的站点当前的运行状况,以便公司可以了解从那里到哪里去。搜索引擎使用许多不同的因素来对网站进行分析和排名。SEO公司将使用审核来检查您的网站在这些因素上的表现。它有助于确定需要修复的问题区域,以使您的网站更上一层楼。他们将为您提供在审核后您可以做的所有改进网站SEO的工作清单。

    该分析涵盖诸如现场SEO和超链接,SEO内容的当前状态以及从其他网站获得的反向链接之类的内容。反向链接是SEO策略的重要组成部分,但并非所有链接都是一样的。如果您通过可疑来源链接到网站,则该网站的效果不佳。审核非常有用,因为网站SEO的第一步是了解您的当前状况。

    创建高质量的有益内容

    人们在为网站SEO编写内容时犯的最常见的错误是对人类的关注不足。高质量的内容首先是写给人类的,其次是搜索引擎爬虫。如果您过多地关注关键字,则会导致乱码。而是围绕用户喜欢阅读的有用和高质量内容来制定内容策略。

    确保您将博客文章和文章分为标题和小标题。这些标题会在内容中产生停顿,使人类和机器人都更容易处理。该标题应提供有关以下段落将讨论的内容的一些信息。这些天人们很少阅读整个博客文章。他们倾向于专注于他们认为与他们最相关的事物。标题从其余内容中脱颖而出,引人注目。人们可以浏览该职位的特定标题并阅读该部分。

    有效地使用反向链接

    反向链接是最重要的网站SEO工具之一。反向链接已用于市场营销和SEO多年。您与网站的链接越多,访问量和声誉就越高,更不用说您在搜索引擎结果页上的排名了。

    虽然高质量的反向链接与以往一样有效,但是随着时间的推移,开发这些反向链接的方式已经发生了变化。曾经有一段时间,您只能在任何网站上获得反向链接,并且已经足够。但是,这些天有些麻烦。

    链接不仅应在具有较高权限的网站上生成,而且应与原始网站相关。例如,一家餐馆应该致力于从目录和评论站点中获取链接。即使滑板销售网站是其利基市场中最具权威性的公司,也不适用于将滑板连接到婴儿产品网站的公司。成功的SEO公司会将反向链接策略纳入整体内容营销策略。

    不再有效的另一种常见策略是在博客文章和论坛中发布指向您网站的链接。从技术上来讲,这将创建至您网站的链接,但这是一个质量较弱的链接,搜索引擎会因此而受到惩罚。从高质量来源获取高质量链接。

    使用关键词

    关键字是SEO的命脉。这是每个人都知道的。问题在于并非每个人都知道如何正确使用它们。对于网站所有者而言,最重要的SEO技巧之一就是充分利用正确的关键字。

    读者和搜索引擎都看不起关键字垃圾邮件-尽可能多地使用关键字的行为。人们会告诉您何时尝试发送尽可能多的垃圾邮件,而他们却不喜欢。这对于搜索引擎也不利,因为他们希望看到关键字的正确使用。关键字在文本中应使用几次,关键字密度最多为2-4%。

    尝试着眼于唯一且长尾的关键字,以减少竞争。不要使用与其他人相同的关键字。尝试找到人们正在寻找的东西以找到您。有很多方法可以找到并创建好的长尾关键字。

    优化页面内容

    他们称其为“搜索引擎优化”是有原因的-您需要对所有内容进行优化。优化您的页面意味着找到快速有效地加载网站的方法。分散内容以使其更具可读性,因此人们不容易感到不知所措并单击该站点。

    用户参与度是网站SEO的关键方面,如果未优化体验,他们将迅速离开您的网站。较高的跳出率可能会降低网站在搜索引擎中的排名。

    您可以做很多事情来优化内容。压缩图像,以便更快地加载它们,考虑项目在页面上的放置方式,并在可能的情况下包括现场链接和导航。网页的优化效果越好,它们在捕获潜在客户并将其转化为客户方面越有效。查看图形以查看有关如何有效优化页面的更多信息。完美优化的页面是所有这些元素都一起实现的页面。即使是一个优化不佳的方面也会破坏其他方面的有效性。

    什么是SEO?事实证明,答案比您预期的要复杂。SEO使您的网站快速有效地加载。它正在获得指向您网站的链接,以便人们访问。它正确使用了关键字。归根结底,SEO就是要以一种有效的方式为您的网站生成自然流量.

 

文章来源:云优网

 

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

 

网站做好品牌SEO优化——打造高质量内容引流量

seo达人

 

 

网站做好品牌SEO优化——打造高质量内容引流量

网站建设,需经历页面布局规划-页面设计-程序-内容填充-测试等多个过程,而在这其中,网站内容的好坏,将直接影响用户对企业、品牌或整个网站的整体评价,同时,也对严重影响着网站品牌SEO优化排名。那么,一个新搭建的网站,要如何打造高质量的内容呢?

1、审视自己网站的文章是否有趣、有用?

包含足量有用信息是赢得访客关注的基础;若能施以轻松、明快、流畅的笔调,则会锦上添花。

2、撰写网站文章,需要抓住用户某个痛点

如果文章能够为客户的搜素目的提供一种解答,则这篇文章成功的机会更高。

3、强有吸引力的标题,让你的文章锦上添花

这并不是鼓励以标题骗取点击,而是在概述相关内容的基础上,标题最好能够具备亮点。

4、网站文章是否具有可读性

内容上:撰写内容时,需要考虑目标读者的阅读感受,把握行文风格、用词、节奏等等;形式上:文章的结构要清晰简明,重点突出,层次分明,合理使用小标题、插图等方法远比“一逗到底”的大段纯文字好得多。

5、网站文章是否克服了高“跳出率”?

跳离率通俗来说,就是用户进入网站浏览该页内容,在很短时间内立即离开的比率。如果用户点击进入浏览一篇文章,在该页面停留一段时间获取所需信息,那么这会给搜索引擎发送一种积极信号,表示该页面的内容满足了客户的需求,从而有利于页面显示在相关搜索结果页面的有利位置。

网络推广

6、网站文章是否考虑了SEO优化排名?

撰写文章考虑用户的同时,也需要考虑SEO优化排名,具体来说应该做到两点:在文中使用关键词;并且通过内链等方式通过网站的其他页面对该页面提供支持。

做网站建设的人都知道,网站获取流量的最大入口就是搜索引擎SEO优化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在这些平台中获取流量时要么就是竞争性过大难以获取排名,要么就是需要花费大量的金钱和人力进行维护,甚至某些时候入不敷出。网站建设的难度也就是在于此,建设网站十分容易,获取流量就是一件涉及到品牌SEO优化的任务。

现代化互联网营销除了seo优化排名,还有微博营销、QQ营销、微信营销、论坛营销、短视频营销等方式,这都是借助平台的用户来引流到网站,这种方式不但有效而且效果明显。

1、百度平台。

在中国的互联网,百度我相信中国的网民应该没有不知道,没有没登陆过百度的吧。既然百度有这么多的用户,这么多的流量,那你就要重视起来。百度渠道必须要做的几个平台:百度百科、百度知道、百度帖吧、百度知道、百度百家号。这几个网站在我们上网搜索的时候,权重都是前几位的。高质量的软文加上合适的外链。你的流量肯定会大爆炸的。

2、腾讯平台。

腾讯最珍贵的是什么?不就是他巨大的客户群体吗。现在应该有十亿了吧,中国的网民应该都会有自己的QQ号,我小学2年纪的农村小孩都有了。这么大的用户群体,该如何告诉他们你的存在呢?答案很简单,你的空间和你的QQ群、微信群是主要的阵地,多申请一些账号,每个账号加很多很多的QQ群,那么多的人,你还愁没有人看到你吗?把你的空间布满你的广告信息,只要是进入你空间的人,认识不认识的都会点开看一下的,这个是有统计的。

3、微博、微信平台。

虽说微博影响力已大不如前,但相信,搭建一个认证标志的微博,可以给新用户带来更多信赖感。而微信公众号,相信更不用多说。现如今但凡推广,绝对离不开微信,如何运用好公众号广告、朋友圈广告等渠道,也是十分必要。

4、短视频与直播。

现如今的网络,短视频的影响力不断扩大。此时,运用好秒拍、抖音、快手等短视频、直播平台营销自己则更为重要。但随之而来的难题是,你必须如何将产品、网站等转化为富有噱头的短视频,这就考验了运营人员的点子是否多,是否能瞬间抓住各年龄段用户群体。

网站做好品牌SEO优化——打造高质量内容引流量

网站建设,需经历页面布局规划-页面设计-程序-内容填充-测试等多个过程,而在这其中,网站内容的好坏,将直接影响用户对企业、品牌或整个网站的整体评价,同时,也对严重影响着网站品牌SEO优化排名。那么,一个新搭建的网站,要如何打造高质量的内容呢?

1、审视自己网站的文章是否有趣、有用?

包含足量有用信息是赢得访客关注的基础;若能施以轻松、明快、流畅的笔调,则会锦上添花。

2、撰写网站文章,需要抓住用户某个痛点

如果文章能够为客户的搜素目的提供一种解答,则这篇文章成功的机会更高。

3、强有吸引力的标题,让你的文章锦上添花

这并不是鼓励以标题骗取点击,而是在概述相关内容的基础上,标题最好能够具备亮点。

4、网站文章是否具有可读性

内容上:撰写内容时,需要考虑目标读者的阅读感受,把握行文风格、用词、节奏等等;形式上:文章的结构要清晰简明,重点突出,层次分明,合理使用小标题、插图等方法远比“一逗到底”的大段纯文字好得多。

5、网站文章是否克服了高“跳出率”?

跳离率通俗来说,就是用户进入网站浏览该页内容,在很短时间内立即离开的比率。如果用户点击进入浏览一篇文章,在该页面停留一段时间获取所需信息,那么这会给搜索引擎发送一种积极信号,表示该页面的内容满足了客户的需求,从而有利于页面显示在相关搜索结果页面的有利位置。

网络推广

6、网站文章是否考虑了SEO优化排名?

撰写文章考虑用户的同时,也需要考虑SEO优化排名,具体来说应该做到两点:在文中使用关键词;并且通过内链等方式通过网站的其他页面对该页面提供支持。

做网站建设的人都知道,网站获取流量的最大入口就是搜索引擎SEO优化排名,也就是百度搜索、谷歌搜索、360搜索、雅虎以及搜狗搜索等,然而在这些平台中获取流量时要么就是竞争性过大难以获取排名,要么就是需要花费大量的金钱和人力进行维护,甚至某些时候入不敷出。网站建设的难度也就是在于此,建设网站十分容易,获取流量就是一件涉及到品牌SEO优化的任务。

现代化互联网营销除了seo优化排名,还有微博营销、QQ营销、微信营销、论坛营销、短视频营销等方式,这都是借助平台的用户来引流到网站,这种方式不但有效而且效果明显。

1、百度平台。

在中国的互联网,百度我相信中国的网民应该没有不知道,没有没登陆过百度的吧。既然百度有这么多的用户,这么多的流量,那你就要重视起来。百度渠道必须要做的几个平台:百度百科、百度知道、百度帖吧、百度知道、百度百家号。这几个网站在我们上网搜索的时候,权重都是前几位的。高质量的软文加上合适的外链。你的流量肯定会大爆炸的。

2、腾讯平台。

腾讯最珍贵的是什么?不就是他巨大的客户群体吗。现在应该有十亿了吧,中国的网民应该都会有自己的QQ号,我小学2年纪的农村小孩都有了。这么大的用户群体,该如何告诉他们你的存在呢?答案很简单,你的空间和你的QQ群、微信群是主要的阵地,多申请一些账号,每个账号加很多很多的QQ群,那么多的人,你还愁没有人看到你吗?把你的空间布满你的广告信息,只要是进入你空间的人,认识不认识的都会点开看一下的,这个是有统计的。

3、微博、微信平台。

虽说微博影响力已大不如前,但相信,搭建一个认证标志的微博,可以给新用户带来更多信赖感。而微信公众号,相信更不用多说。现如今但凡推广,绝对离不开微信,如何运用好公众号广告、朋友圈广告等渠道,也是十分必要。

4、短视频与直播。

现如今的网络,短视频的影响力不断扩大。此时,运用好秒拍、抖音、快手等短视频、直播平台营销自己则更为重要。但随之而来的难题是,你必须如何将产品、网站等转化为富有噱头的短视频,这就考验了运营人员的点子是否多,是否能瞬间抓住各年龄段用户群体。

转载请注明:seo-网站优化-网站建设-外链代发

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

 

我们对2021年的用户体验有何期待?

ui设计分享达人

用户体验设计是一个动态领域,每年都会为我们带来新的趋势,最近十二个月也不例外。全球新冠病毒大流行和国家封锁使我们与数字世界和现实世界之间的互动方式发生了突然的变化。人们不仅开始在网上花费更多的时间;他们的思考方式和表现方式也发生了不同。

本文主要阐述2021用户体验的趋势,我们相信这将在新的一年里占据主导地位。查看一下您可以利用哪些趋势超越竞争对手并在人群中脱颖而出吧。


语音介面

我们在2020年UX状态预测中讨论了语音用户界面(VUI)。如今年所示,语音指令仍然是UX设计中最热门的趋势之一。可以肯定地说,明年不应忽略它。

毫无疑问,到2021年,语音聊天机器人和虚拟助手将继续流行。用户在数字体验方面一直在寻求简单性和效率。市场需求,高期望值以及人工智能技术的迅速发展使品牌别无选择,只能在其产品中包含基于语音的功能。

已经有许多企业为广泛的VUI实施奠定了基础。例如,星巴克推出了一种名为My Starbucks Barista的基于AI的聊天机器人。其目标是通过允许用户通过语音命令购买自己喜欢的饮料来改善咖啡订购体验。



简约的UI

极简主义可能是当今视觉设计中最明显的趋势之一。用户正在体验越来越多的网站所有者想要传递的关键消息。Cookie弹出窗口,打折广告和各种通知旨在吸引和转化网站访问者,但它们也吸引了我们的注意力。这就是简约的以用户为中心的设计应运而生的地方。

但是,“极简主义”并不意味着“沉闷”或“原始”。意思是“优雅”和“高效”。尽管必须使用数量有限的颜色,设计元素和明亮的组合,但UX设计人员仍然有很大的发挥空间。此外,元素的功能最为重要,正确突出产品功能并传达正确信息的能力需要大量的创造力。相反,仅具有装饰目的的组件正逐渐失去其重要性。




内容,消息和导航的清晰度是UX设计的简约方法的另一个重要方面。信息过载对于大多数现代用户来说是一个痛苦,这意味着网站所有者应努力使自己的UX文字简洁明了。


负空间

负空间是用户体验设计的一种大趋势,它已经脱离了对简约UI的市场需求。简而言之,负空间是页面布局中对象周围(宏空间)或对象内部(微空间)的空白区域。它已经成为独立的设计元素,在视觉美学和用户体验优化中起着至关重要的作用。谷歌的主页,苹果的官方商店以及一些用Webflow创建的网站就是很好的例子。






留出一定的空间,在设计中添加“寂静的感觉”,必须是始终有意义的。否则,用户可以将其视为缺少信息。负空间的主要功能是整理网页,以吸引用户对关键对象和消息的注意。建立清晰的内容层次结构有助于UX设计人员将用户的注意力吸引到最重要的内容上。




负空间有时也称为“空白区域”或“留白区域”。所有这些术语都是可以互换的。当区域中没有元素时,您还可以在深色模式或任何其他颜色下使用此用户体验趋势。

不完美的元素

在发生COVID-19大流行之后的在线体验将与我们习惯的在线体验不同。UX设计以相关方式反映了缺陷。为了使品牌的数字化形象更具关联性,设计师有意在版面设计中实现了一些“缺陷”。 它可以是任何东西,从手绘对象到构图或页面的不寻常元素。







通常,不完美的设计可以很好地证明品牌的身份并突出其独特性。但是,如果要应用这种UX趋势,则必须记住一个关键规则:必须保持平衡。如果你做得过多,那是行不通的。



同态

中性风格是UI设计中其他两种大规模方法(拟态和平面设计)的组合,它们通常被认为彼此相对。拟态化是关于模仿现实世界中的物体以及我们与物体交互的方式。

几十年前,当需要使用超现实元素来创建直观且用户友好的UI时,它很流行。垃圾桶就是例子之一。另一方面,平面设计是一个更新的,简化的概念,围绕二维元素,极简主义和鲜艳的色彩。

同质性兼顾了两者的优点。它使用图形强度大的元素,阴影和渐变来使按钮和卡片类似于自然界中的对象,而不是精确地重新创建它们。中性风格不会将现实主义推到极致。取而代之的是,它努力实现浅色和微妙对比度的“柔和”外观。



在过去大约一年的时间里,同质化一直是UI / UX专业人员中讨论最多的主题之一。尽管仍然没有很多真正的数字产品的用户界面遵循这种方法,但许多设计人员对该概念感到兴奋。像Behance和Dribbble这样的专业平台已经包含了许多同态的例子。因此,我们有充分的理由相信,这一趋势最终将在2021年出现在我们的手机和笔记本电脑中。



3D元素和视差

视差效果和3D元素并不是UX设计中的全新内容。我们已经看到了如何在许多Web设计解决方案中实现它们。但是,我们仍然观察到这些用户体验趋势正在逐步普及。

首先,它的使用量显着增加。如今,3D元素和视差效果已不再是网络上奇特的事物。它们更为常见,特别是在代表着脱颖而出的时尚和电子商务品牌的网站和应用上。




另一种趋势是尝试在一个界面中结合视差效果和3D图形。使用视差滚动时,网页背景和前景元素以不同的速度移动。仅凭它就能产生深度感。通过为此添加3D对象,您可以创建一种真正的身临其境的体验,并将在用户的记忆中保留很长时间。


 



  

不对称

随着我们设备屏幕的变宽,UI / UX设计中出现了不对称趋势。通常,不对称是野兽派的一种属性,这是艺术和网页设计中与极简主义相反的一种风格。但是,如果与其他残酷的设计元素分开使用,它可以使您的网站看起来有趣,同时使它保持微妙和优雅。


不对称布局的UI / UX趋势通常与其他创造性的Web设计技术一起实现,例如破碎的网格,重叠的元素和分割的屏幕。您也可以将不对称性应用于排版。如果操作正确,它将使您的品牌信息更加引人注目和令人难忘。




但是,请务必记住,非对称设计并不意味着“随机放置的UI元素”。在布局上定位对象的不寻常方式应该引导用户的眼睛朝正确的方向前进,并帮助品牌强调重要信息。

动画制作

今天,当我们在互联网上进入随机网站时,很可能会看到GIF,微型动画,动画插图或其他一些运动设计元素。动画在用户体验设计中仍然很流行,并且使用频率不断增长。

除了具有视觉吸引力之外,移动物体还可以改善用户参与度并简化导航。他们还可以为数字产品或服务注入生命,使它们更具个性。



如果要在用户界面设计中使用这种软件开发趋势,那么明智地执行此操作至关重要。漂浮在屏幕上没有特定目的的对象可能会使访问者感到困惑,从而促使他们甚至比计划的要早离开网页。动画元素也不应使用户界面不必要地复杂。它们始终必须是相关的,有价值的和平稳的。

信息架构

信息体系结构是在页面上组织和构造不同内容的方式。它是以用户为中心的设计(UCD)的基本要素,旨在使用户的数字环境更加舒适。与用户研究和可用性测试一起,构建有效,有用且一致的信息体系结构是UCD流程的必不可少的阶段。



为了创建一个实用的信息体系结构,UX设计人员需要对产品的目标受众,其行为以及使用数字解决方案的原因有深入的了解。用户应该无需花费太多精力就能获得所需的结果。因此,在设计过程的线框阶段始终必须考虑用户的目标,清晰的导航和内容表示(包括盲点监视)。

最后的想法

我们创建此文章是为了让您在当今竞争异常激烈的数字世界中站稳脚跟。这里提到的所有UX趋势绝对可以改善几乎每个软件解决方案或网站的用户体验。即使用户期望很高,它们也可以使您的产品在视觉上对目标受众更具吸引力。


文章来源:站酷   作者:ZZiUP

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


我们对2021年的用户体验有何期待?

ui设计分享达人

用户体验设计是一个动态领域,每年都会为我们带来新的趋势,最近十二个月也不例外。全球新冠病毒大流行和国家封锁使我们与数字世界和现实世界之间的互动方式发生了突然的变化。人们不仅开始在网上花费更多的时间;他们的思考方式和表现方式也发生了不同。

本文主要阐述2021用户体验的趋势,我们相信这将在新的一年里占据主导地位。查看一下您可以利用哪些趋势超越竞争对手并在人群中脱颖而出吧。


语音介面

我们在2020年UX状态预测中讨论了语音用户界面(VUI)。如今年所示,语音指令仍然是UX设计中最热门的趋势之一。可以肯定地说,明年不应忽略它。

毫无疑问,到2021年,语音聊天机器人和虚拟助手将继续流行。用户在数字体验方面一直在寻求简单性和效率。市场需求,高期望值以及人工智能技术的迅速发展使品牌别无选择,只能在其产品中包含基于语音的功能。

已经有许多企业为广泛的VUI实施奠定了基础。例如,星巴克推出了一种名为My Starbucks Barista的基于AI的聊天机器人。其目标是通过允许用户通过语音命令购买自己喜欢的饮料来改善咖啡订购体验。



简约的UI

极简主义可能是当今视觉设计中最明显的趋势之一。用户正在体验越来越多的网站所有者想要传递的关键消息。Cookie弹出窗口,打折广告和各种通知旨在吸引和转化网站访问者,但它们也吸引了我们的注意力。这就是简约的以用户为中心的设计应运而生的地方。

但是,“极简主义”并不意味着“沉闷”或“原始”。意思是“优雅”和“高效”。尽管必须使用数量有限的颜色,设计元素和明亮的组合,但UX设计人员仍然有很大的发挥空间。此外,元素的功能最为重要,正确突出产品功能并传达正确信息的能力需要大量的创造力。相反,仅具有装饰目的的组件正逐渐失去其重要性。




内容,消息和导航的清晰度是UX设计的简约方法的另一个重要方面。信息过载对于大多数现代用户来说是一个痛苦,这意味着网站所有者应努力使自己的UX文字简洁明了。


负空间

负空间是用户体验设计的一种大趋势,它已经脱离了对简约UI的市场需求。简而言之,负空间是页面布局中对象周围(宏空间)或对象内部(微空间)的空白区域。它已经成为独立的设计元素,在视觉美学和用户体验优化中起着至关重要的作用。谷歌的主页,苹果的官方商店以及一些用Webflow创建的网站就是很好的例子。






留出一定的空间,在设计中添加“寂静的感觉”,必须是始终有意义的。否则,用户可以将其视为缺少信息。负空间的主要功能是整理网页,以吸引用户对关键对象和消息的注意。建立清晰的内容层次结构有助于UX设计人员将用户的注意力吸引到最重要的内容上。




负空间有时也称为“空白区域”或“留白区域”。所有这些术语都是可以互换的。当区域中没有元素时,您还可以在深色模式或任何其他颜色下使用此用户体验趋势。

不完美的元素

在发生COVID-19大流行之后的在线体验将与我们习惯的在线体验不同。UX设计以相关方式反映了缺陷。为了使品牌的数字化形象更具关联性,设计师有意在版面设计中实现了一些“缺陷”。 它可以是任何东西,从手绘对象到构图或页面的不寻常元素。







通常,不完美的设计可以很好地证明品牌的身份并突出其独特性。但是,如果要应用这种UX趋势,则必须记住一个关键规则:必须保持平衡。如果你做得过多,那是行不通的。



同态

中性风格是UI设计中其他两种大规模方法(拟态和平面设计)的组合,它们通常被认为彼此相对。拟态化是关于模仿现实世界中的物体以及我们与物体交互的方式。

几十年前,当需要使用超现实元素来创建直观且用户友好的UI时,它很流行。垃圾桶就是例子之一。另一方面,平面设计是一个更新的,简化的概念,围绕二维元素,极简主义和鲜艳的色彩。

同质性兼顾了两者的优点。它使用图形强度大的元素,阴影和渐变来使按钮和卡片类似于自然界中的对象,而不是精确地重新创建它们。中性风格不会将现实主义推到极致。取而代之的是,它努力实现浅色和微妙对比度的“柔和”外观。



在过去大约一年的时间里,同质化一直是UI / UX专业人员中讨论最多的主题之一。尽管仍然没有很多真正的数字产品的用户界面遵循这种方法,但许多设计人员对该概念感到兴奋。像Behance和Dribbble这样的专业平台已经包含了许多同态的例子。因此,我们有充分的理由相信,这一趋势最终将在2021年出现在我们的手机和笔记本电脑中。



3D元素和视差

视差效果和3D元素并不是UX设计中的全新内容。我们已经看到了如何在许多Web设计解决方案中实现它们。但是,我们仍然观察到这些用户体验趋势正在逐步普及。

首先,它的使用量显着增加。如今,3D元素和视差效果已不再是网络上奇特的事物。它们更为常见,特别是在代表着脱颖而出的时尚和电子商务品牌的网站和应用上。




另一种趋势是尝试在一个界面中结合视差效果和3D图形。使用视差滚动时,网页背景和前景元素以不同的速度移动。仅凭它就能产生深度感。通过为此添加3D对象,您可以创建一种真正的身临其境的体验,并将在用户的记忆中保留很长时间。


 



  

不对称

随着我们设备屏幕的变宽,UI / UX设计中出现了不对称趋势。通常,不对称是野兽派的一种属性,这是艺术和网页设计中与极简主义相反的一种风格。但是,如果与其他残酷的设计元素分开使用,它可以使您的网站看起来有趣,同时使它保持微妙和优雅。


不对称布局的UI / UX趋势通常与其他创造性的Web设计技术一起实现,例如破碎的网格,重叠的元素和分割的屏幕。您也可以将不对称性应用于排版。如果操作正确,它将使您的品牌信息更加引人注目和令人难忘。




但是,请务必记住,非对称设计并不意味着“随机放置的UI元素”。在布局上定位对象的不寻常方式应该引导用户的眼睛朝正确的方向前进,并帮助品牌强调重要信息。

动画制作

今天,当我们在互联网上进入随机网站时,很可能会看到GIF,微型动画,动画插图或其他一些运动设计元素。动画在用户体验设计中仍然很流行,并且使用频率不断增长。

除了具有视觉吸引力之外,移动物体还可以改善用户参与度并简化导航。他们还可以为数字产品或服务注入生命,使它们更具个性。



如果要在用户界面设计中使用这种软件开发趋势,那么明智地执行此操作至关重要。漂浮在屏幕上没有特定目的的对象可能会使访问者感到困惑,从而促使他们甚至比计划的要早离开网页。动画元素也不应使用户界面不必要地复杂。它们始终必须是相关的,有价值的和平稳的。

信息架构

信息体系结构是在页面上组织和构造不同内容的方式。它是以用户为中心的设计(UCD)的基本要素,旨在使用户的数字环境更加舒适。与用户研究和可用性测试一起,构建有效,有用且一致的信息体系结构是UCD流程的必不可少的阶段。



为了创建一个实用的信息体系结构,UX设计人员需要对产品的目标受众,其行为以及使用数字解决方案的原因有深入的了解。用户应该无需花费太多精力就能获得所需的结果。因此,在设计过程的线框阶段始终必须考虑用户的目标,清晰的导航和内容表示(包括盲点监视)。

最后的想法

我们创建此文章是为了让您在当今竞争异常激烈的数字世界中站稳脚跟。这里提到的所有UX趋势绝对可以改善几乎每个软件解决方案或网站的用户体验。即使用户期望很高,它们也可以使您的产品在视觉上对目标受众更具吸引力。

文章来源:站酷   作者:ZZiUP

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

你的屏幕「太黑了」!深色模式到底怎么用?

ui设计分享达人

深色模式并不万能 


从移动屏幕到大型电视,深色的UI界面随处可见。深色模式可以表达力量、奢华、精致和优雅,但这种设计模式也会带来很多挑战,应用不当难免会被用户吐槽。所以开始设计前,大家最好深色熟虑下,是否真的需要做深色。


物理学家说,黑色并不是一种真正的颜色,它没有光。艾萨克·牛顿爵士在通过棱镜照耀阳光的实验中,甚至没有将黑色包含在颜色光谱中。


在色彩心理学中,大多数色彩代表不同的人、不同的事物。西方文化里,黑色常与死亡、神秘和邪恶联系在一起;绿色与生长、自然相关;蓝色可以使人平静,因为它让人联想到天空和水,所以,颜色是饱含情感的。其他影响还来自文化,例如紫色仍与奢侈品联系在一起,在许多古代文化中,紫色是昂贵稀有的,只有贵族才能负担得起。


深色界面的数字产品,是未来发展的一大趋势。人们常说,这种模式可以减轻眼睛疲劳,但并没有相关证据表明是真的。在某些情况下,它还代表着节省电池寿命,也是一种美学意义上的选择。



深色模式应用限制

并非所有界面都适合深色主题。设计师应考虑品牌契合度、文化适应性和颜色心理学,在选择搭配时考虑情感影响,虽然这些因素不容易平衡。针对千禧一代的金融类应用程序,可能会用深色模式营造炫酷的效果,但对于以大众作为目标人群的银行网站就不太合适了。当用户想要查看自己的余额与支付账单时,太黑暗、太时髦都会显得华丽不实用。


B2B SaaS应用程序的深色模式很难设计,标准的Web UI组件(例如数据表、窗口小部件、表单和下拉菜单)在深色界面中看起来可能很奇怪。由于许多配色方案不适用于深色界面,对于某些品牌和产品来说,深色模式并不是最优选择。


从未接触过深色模式的设计师,如果想要搭建一个深色界面,不妨参照以下条件,先来判断下是否需要,什么情况下建议使用深色模式?

-当设计版面相对稀疏,极简型的内容比较少时;

-适用于连贯呈现的内容,例如夜间娱乐应用程序;

-想要创造醒目的戏剧性外观时。


以下这些情况下不建议使用深色模式:

-出现大量文本时(在深色背景上阅读相对困难);

-当设计需要多种颜色时。


深色模式下的桌面应用信息中心 by Ramotion 


在深色模式中形成对比

深色模式并不非要设计成黑色的,你可以将它理解为是一种「低光」模式。设计的核心点之一,就是表达出足够的对比度,这样视觉元素就会被分离开,且文本也会变得清晰易读。大多数设计师认为多用黑色,是获得强烈对比度的最佳选择。我的建议是,最好不要将纯黑色(#000000)用于背景或者尽量少用,把它留给其他UI元素,比如较小的图形或边框性质类的图形。


Google的Material Design深色模式,推荐使用深灰色(#121212)作为界面主色,目的是为了表达出更有深度的空间感。在定义配色方案时,往深灰中添加一些微妙的深蓝色,可以让数字产品的界面拥有更好的深色调性。


Brittany Chiang网站将深灰色与蓝色融合,形成了令人愉悦的深色模式


使用灰色的优点在于,它给了设计师更多发挥的空间,去表达更广泛的颜色。灰色调同深蓝色有同样功能,帮助画面更有深度,也更轻松地看到元素阴影。


需要特别注意深色模式中的文本对比,网页内容可访问性指南(WCAG)要求——「文本的视觉呈现对比度,至少应为4.5:1」,大型文本的对比度至少在3:1。设计师需要确保文字内容在黑暗模式下能够清晰可辨认。


另外,测试其他UI元素(例如卡片、按钮、字段和各种显示器上的图标)之间的对比也是一个好办法。如果UI元素之间没有突出的对比,那么设计就需要调整下了,枯燥无味的设计对于用户来说也是一种折磨。


左侧的深色模式中,文本和背景之间的对比明显不足


重点注意一:配色

颜色在深色模式中非常突出,最好使用浅色、饱和度低的配色方案,避免过于刺激视觉。颜色与文本一起使用时,需要参照WCAG的AA标准,至少4.5:1。Google建议颜色数量不必太多,使界面都处于深色中。


Jabra Sound +应用程序只给深色模式配色选择了2-3种颜色


适宜的配色方案能营造出非常好的对比效果。Colorable在线工具,只要输入色号就能看到文本和背景色组合在一起是否合适;Google的Material Design网站上也有一个调色板生成器,设计师可以使用它创建调色板,应用到UI上。


文字和基本元素(例如按钮和图标)在深色背景上显示时应符合易读性标准。如上面的Jabra Sound +应用程序所示,文本和图标可以使用白色以外的颜色进行搭配。


“使用强烈对比色来提高可读性。人们对于颜色的感知会受到许多因素影响,包括字号、字重、颜色亮度、屏幕分辨率和照明条件。” ——Apple人机界面指南


深色模式并不需要大量颜色来堆砌


重点注意二:利用负空间,少即是多

成功的深色模式设计,需要巧妙利用负空间。如果设计不当,会使数字产品显得笨拙与沉重。为了平衡这一点,设计师可以利用极简主义中的负空间,让深色界面更轻巧,也能让用户更容易识别信息内容。


UI元素周围的大量负空间使界面被重新定义,而且元素也不会出现密集与混乱感。如果没有呼吸空间,用户在阅读界面时,可能很快的略过,因为大脑没有快速的识别出重要内容。


充斥着太多元素和文本的界面,是导致深色模式体验差的祸根。设计师需要仔细考虑深色模式中的视觉层次结构,从而提升用户体验。


极简主义的深色模式界面 by Denys Tyrynskyi


重点注意三:版式

深色模式中的每一段文字都需要仔细检查,更需要关注2个方面——可读性和对比性。首先,界面中的文本必须足够大,以确保清晰易读(深色背景上的小文字,阅读起来体验很差);其次,文本和背景之间必须有明显的对比。设计师可以通过增加对比度,为较小的文本调整字体大小、字符间距和行高,去优化可读性问题。


W3C AAA建议常规尺寸的文本(如果不是粗体,则小于18pt)的对比度至少应为7:1。这也适用于其他UI元素——图标、文本图像和文本标签(按钮标签),设计师有责任确保所有人都能正确应用界面。


深色模式中应用优秀字体很有必要,像Google字体和字体库,以及Adobe Typekit都能提供便捷的设计支持。


AirPods Pro页面使用超大字体和强烈的对比,以达到最好的效果


重点注意四:空间深度感

深色模式不应该是平淡的,在正常明亮模式下,元素的高光或是阴影都会让界面产生深度感。而深色界面更具挑战性,建议设计师可以使用类似3-4多个层面,以及相应的配色方案来传达深度感。


为什么要有深度?深度感是与物理世界的一种呼应。我们的视觉有深度感知的能力,因为人们是生活在3D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隐式光源,表面就越亮。一个非常亮的表面,更容易区分组件之间的高度,还有助于查看阴影,使每个表面的边缘线更明显。


表面越亮,越接近隐藏光源 by Material Design


设置每个级别的表面颜色需要小心,建议不要超过4或5个级别,最好在设计系统中将元素的文本颜色指定为纯黑色(#000000),以在浅灰色背景上实现良好的对比度。


深色模式设计启发

基于上述原则,以下是一些优秀的深色模式示例:


The Atom Finance website


Atom Finance利用深色模式打造了精致外观,并将其强调色限制为3种。复杂的金融网站采用了极简设计,而且很好地使用了阴影来表现不同组件的深度感。


电子商务网站 by Daniel Klopper


电子商务网站 by Darion Mitchell


IBM仪表板 by Ruben Fernandez


尽管处理SaaS的深色模式遇到了挑战,但IBM的数据可视化仪表板仍是典范。强调色的数量最少,并且该网站使用细微的阴影显示不同元素的深度。


Wego,Spotify和Apple的深色模式APP(Android和iOS)


使用深色模式固然好,但需要依据实际产品属性来判断,不应出于时髦、流行甚至是与众不同或模仿他人等因素确定。设计者应有充分的选择依据,并考虑其内容、使用环境以及显示设备是否适合来最终敲定。


深色模式适用于一些数字产品,而非所有产品,界面简洁非常关键。对于复杂且数据繁重的B2B平台,以及文本繁多的页面,深色模式都是不适合的。对于从情感和美学角度去探索深色模式的设计师来说,他们开辟了一个新的领域。

文章来源:站酷   作者:UX辞典

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


日历

链接

个人资料

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

存档