首页

让设计更有价值——设计流程指南

seo达人


随着设计团队规模扩大,人数快速增多,但每个人都带着自己以往工作经验和习惯,一些典型问题也相应显现:上手就干、主观设计、缺少方法、忽视跟进等等。所以我们撰写了「UI标准设计流程」,希望能为UI设计师提供对于设计支撑思路的共识,让设计更有价值。

 

图片

从接到需求到上线后跟踪,我们把流程拆分为五个节点:需求分析-交互设计-视觉设计-视觉规范-方案验证。

当然,在设计流程中我们只表达不同流程中的行为目的及标准,相关方法论我们会配套一份「设计师成长指南」,不久之后再与大家分享。

 

1.需求分析

我们在接到一个设计需求后,要做的第一步是进行分析并确定设计目标。

我们需要:了解背景、用户和竞品,能准确理解产品定位和需求目标,评估需求的合理性和准确性,并提供相应策略;甚至洞见机会点,通过设计对业务产生正向价值。

图片

 

背景分析

目的:背景分析是为了让我们在刚接触产品的时候,去洞察表面背后的东西。通过背景分析,能帮助我们快速切入产品,并根据已有信息去制定准确并具有说服力的设计策略。

行为:我们需要了解:产品的定位及价值是什么,它的现状如何,是否有既往的数据沉淀或经验总结。

 

用户分析

目的:对UI设计师而言,用户分析是为了让我们更好地了解产品,并拥有对整个产品的宏观思路。通过用户分析,能为我们的视觉设计提供方向,并为我们做出决策提供实际落点。

行为:我们通常需要了解:用户画像、用户需求、用户行为、用户路径等。

 

竞品分析

目的:竞品分析能够让我们获得行业内的优秀经验,减少我们的思维盲区,同时还为我们提供了一份可被量化的标准,使我们可以基于竞品去反推现有产品。

行为:UI设计师可以从竞品定位、主要功能、迭代动向、产品结构、页面布局、交互动效、视觉设计、优劣势对比这几个维度去进行竞品分析。

 

需求评估

目的:在了解以上的通用信息后,我们要对需求进行评估,去决定采用哪种方式、制定什么样的策略。

行为:我们接到的需求,通常可以分为三种:全新产品类、产品改版类、功能新增或优化类。

对不同类型的需求,我们都可以用5个问题去评估:

  1. 是否可被证伪?
  2. 目标是否明确?
  3. 投产比如何?
  4. 是否有更优解法?
  5. 是否有可预见风险?

基于以上问题,我们可以去协同交互、产品做相应调整和策略制定,甚至发现新的机会点并进行推动。

 

目标对齐

目的:设计为目标服务,所以我们要在设计开始前与需求方对齐目标,这也能为设计价值的佐证提供标准。

行为:设计目标通常有3种,我们可以从中去对需求目标转译:提升数据型、解决问题型、体验优化型、创新项目型。针对不同目标我们可以去制定不同的设计策略,并对策略的落地进行数据监测与分析,进行方案校正。

 

2.交互设计

在产品流程中,交互设计的作用在于,通过信息架构的组织去产出体验流畅的界面原型。

我们需要:充分理解整体流程与交互原型,基于设计原则去发现可优化的部分;同时能平衡产品、设计与开发的效益最大化,并驱动产品的体验提升。

图片

 

设计原则

目的:设计原则能为我们提供一个行之有效的设计向导或提示。熟知各类设计原则,能使我们在设计支撑时,拥有更丰厚的专业度和更敏锐的洞察力。

行为:我们需要去了解市面常见的Guildline如iOS、Material、UWP等,以及一些常用原则如菲兹定律、格式塔理论等等。

 

流程梳理

目的:流程的再梳理,可以帮助我们在视觉设计前,快速地理解和诊断流程逻辑。

行为:在流程再梳理的过程中,我们需要注意以下4个问题:

  1. 功能是否完整?
  2. 链路是否流畅?
  3. 步骤是否冗余?
  4. 是否易于理解?

基于以上问题,我们可以用自身的专业储备去推动流程的优化。

 

原型优化

目的:交互原型是需求内容的外在表现,通过原型优化,可以最大程度地避免视觉评审后的设计返工。

行为:在对交互原型优化的过程中,我们要重点注意以下4个问题:

  1. 架构是否符合目标
  2. 层级是否足够精简
  3. 信息是否传达准确
  4. 状态是否有所缺失

在视觉设计时,我们基于以上四点可以去同步优化原型,并根据经验去寻求体验和成本的最佳平衡。

 

3.视觉设计

视觉设计是产品与用户直接连接的媒介,优质而恰当的视觉设计,可以极大地提升产品吸引力。

我们需要:基于分析确定视觉方向、定义设计语言,输出完整且高质量的视觉页面。

图片

 

设计情绪板

目的:设计情绪板可以为设计语言的构建提供可视化参考,也有助于我们前期快速与各方达成共识。

行为:我们通常基于分析,去确定设计关键词,并基于关键词去衍生映射物、建立图形情绪板,最终分析和确定设计方向。

 

设计语言

目的:设计语言是情绪板的具象表达,它将构建起用户对产品的视觉感知。

行为:在明确设计方向后,我们就要基于情绪版去定义设计语言,主要包括主视觉、色彩、字体、图标、图形、动效等。

 

典型页面

目的:典型页面是设计语言在场景中直观体现,这有助于我们制定设计规范,并为其他页面的设计提供参考。

行为:我们通常需要设计首页、频道页或其他具有示例作用的典型页面,在设计的过程中我们还需要同步去规范间距、卡片、视觉变量、图形应用等,以此为视觉规范夯实基础。

 

4.设计系统

在设计典型页面的同时,其背后其实已经对应了一套设计规范和组件,而我们基于此去整理并沉淀出设计系统,能极大地提升统一性和迭代效率。

我们需要:制定完整、清晰的基础规范,沉淀图标库、组件库等,并持续优化和更新,形成可持续沿用的产品设计系统。

图片

 

基础规范

目的:基础规范是设计语言的沉淀,也是视觉变量的基本粒子。它可以保证页面的基本统一,同时我们可以基于不同业务快速地拓展其他主题。

行为:在我司,一份基础规范的构成包括:色彩、字体、间距、布局、断点、层级、圆角、透明度、阴影。

 

图标库

目的:图标规范可以帮助其他成员快速、准确地进行图标拓展,而沉淀的图标库也可以极大地提升产出效率。

行为:基于具体需要,我们可以设定多套图标风格,规范其栅格、笔画、圆角等,并将已有的图标资产进行沉淀。同时我们也会去规范一些常见图形并沉淀,如空态插画、悬浮入口、徽章、商品等。

 

组件库 

目的:组件库是对常用控件进行设计规范、开发、封装的可被复用的集合,组件分而治之,可被自由组合,能保证设计品质、统一用户体验、提升产研效率。

行为:在我司,一套组件库通常包括:通用、布局、导航、数据录入、数据展示、反馈、其它。除通用原子组件外,我们也会对常用模块进行梳理,沉淀业务组件库。

 

5.落地跟踪

在设计完成之后,我们需要对设计方案进行评审、验收及数据跟踪,以保证设计方案的落地并跟进调整。

我们需要:运用合理策略以保证设计方案的高质量落地,对方案上线后的用户反馈进行有效跟进,运用多种方式验证目标,迭代产品。

图片

 

设计评审

目的:设计评审通常包含了交互与视觉,其目的在于审查设计方案中的可用性问题。

行为:在我司,视觉评审即终评,我们需要在视觉稿中标注出所有交互逻辑,并对潜在问题有预判,能与各方确认目标、分桶与数据埋点;同时我们要对开发实现有预判,能与研发确认实现细节。

 

设计验收

目的:设计验收是为了确保需求满足、体验流畅,并且设计细节能高质量落地。

行为:视觉设计师主要验收视觉细节的还原度,并且要在一定程度上对开发的适配、样式解法有预知,减少二次验收。同时需要保证验收有沉淀,利于后续跟进。

 

数据验证 

目的:数据验证除了分析分桶之外,也可以分析产品上线后的一些问题、并在迭代中修改。同时我们也可以总结设计经验、提升未来设计的准确率。

行为:我们通常基于设计策略,去对数据进行筛选与分析,以此衡量设计对于目标达成的增益度。对于有问题的,能反思并且修改;对于结果好的,能总结并且沉淀。

 

设计复盘 

目的:设计复盘以结果为导向,我们可以通过复盘对设计策略的价值进行总结验证,并去发现、优化流程中的不足之处。

行为:我们需要陈述设计目标和策略,对设计价值进行验证,并能总结过程中的亮点与不足,制定后续计划、沉淀相关经验。

 

以上是酷家乐UED「UI标准设计流程」的所有内容,虽然它主要针对UI设计师而设,但相信它也能帮助到交互、体验设计师们去拨开乱麻,更好地为业务目标服务。

后续我们会与大家继续分享与之配套的「设计师成长指南」,它将基于Design Thinking为大家带来更全面的专业知识帮助。

同时我们也会沉淀基于该流程的几个典型案例,包括C端、B端、以及工具端,会在未来陆续与大家分享。

 

原文链接:酷家乐用户体验设计(公众号)(公众号)

作者:不戳

转载请注明:学UI网》让设计更有价值——设计流程指南

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小

助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

                                                            微信图片_20210513163802.png

 

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

 

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

这样做设计,可太香了~

seo达人



今天我将告诉大家一个更加简单高效的技巧去定义一个色板。在星球里还有很多这样的文章,无论是现有的500+精华文章,还是每天100+设计干货,我们坚信相信水滴石穿的力量。请看今天的分享,Enjoy it。

图片

a

一套界面需要哪些颜色?

图片

说到色板,我们得首先弄清楚一套APP需要哪几种色彩,我们从airbnb的色板中,以及很多很多产品中大概可以得出一个公式:品牌色 + 提醒类型颜色(成功,错误,警告)+ 中性黑白灰颜色(各种字体,背景,分割线颜色等)

图片

在定义了上述大的色彩原理下,我们需要对界面中使用场景进行梳理得出下列大概色彩类型。

图片

a

如何去做呢?

重点来了,那我们如何去做呢?首先,我们先创建3个方块,这些方块后面会成为基础颜色!这里我设置的是被3整除的高度和宽度,我创建了一个300X300的正方形:

图片

接着我们填充3个颜色,红,绿,蓝,为什么是红,蓝绿,因为在色彩体系里面,这三种颜色属于色光三原色(色光三原色为:红、绿、蓝。光线会越加越亮)

红,绿,蓝怎么定义,大家可以从自己品牌色里面去定一个,然后可以根据HSB的方法去得出同色温下面的绿和蓝!

图片

h值(色相)以15,S和B不变,递增得到基于品牌色的24个色带,有人可能会问为什么是24个?因为24X15=360刚好围绕色环盘一圈。

图片

所以我们得到一圈基于品牌色,明度和饱和度一致性的颜色!

图片

你也可以依据https://coolors.co/去生成一套蓝色或者绿色

第二步

第二步,将这三个方块横向等分,因为每个方块300X300,所以除以3就是100PX

图片

图片

图片

将一个矩形与画板顶部对齐,然后填充微白色,将第二个矩形与画板底部对齐,填充微黑色,然后将顶部的白色,和黑色透明度调整微20,这样我们就过得到,三种不同的红色,绿色,和蓝色。

第三步

第三步,我们需要定义垂直等分的区间,我们需要画2个矩形,这2个矩形的宽度刚好是300X300的三分之一也就是100X100,将他们和正方形的右侧对齐。

图片

现在到了这篇文章的核心,就是我们需要将这个颜色改为黄色,很多人可能会好奇,为什么是黄色,因为黄色是色彩的三原色之一(可以参考上面我们通过HSB得出黄色)

图片

图片

调整黄色的模式改为叠加,将其中一个透明度降低为40%,另外一个降低为80%,然后将他们复制到绿色和蓝色的画布上,借助叠加模式,我们得到了明亮和鲜艳的颜色。

第四步

这样我们就快速的得出了一套色彩体系,然后根据我们的需求选取一部分颜色成为这个色盘体系:

图片

图片

然后添加到我们的整个色盘里面去,同理我们可以得出黑白灰色颜色,比如我们的颜色最黑是#333333

图片

顶部20%白色,底部80%黑色得出

图片

图片

纵向叠加40%白色,80%白色得出

图片

得出文字3个梯度颜色

生成最终色板

图片

通过上面的步骤就可以得出整个色板

注意

色彩感觉不好的同学,如果没有品牌色,或者品牌色搭配出来不太和谐,强烈推荐大家使用这个网站进行配色。

图片

他是基于设计师人工智能匹配出来的颜色,都比较和谐,使用起来的,我们随便试试。

图片

在这个网站上输入一个红色,锁定,然后按空格随机生成颜色,最终确定,蓝色,绿色黄色,制作出色盘。

图片

得出色盘

关于色彩系统构建的方法就是这样,不知道大家掌握没有,希望大家在做设计时候,色彩运用更加科学,一定要自己动手试试!

 

原文地址:我们的设计日记(公众号)

作者:sky


 

转载请注明:学UI网》这样做设计,可太香了~

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

                                                            微信图片_20210513163802.png

 

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

 

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

设计心理学系列(03)——雅各布定律与心智模型

seo达人



在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。今天我们继续设计心理学第3篇——雅各布定律。

本文主要内容包括:
  • 雅克布定律与心智模型
  • 心智模型对设计的影响

 

01雅各布定律与心智模型

雅各布定律指的是如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。
这个定律揭示了用户认知事物的过程和特点——用户是“懒”的,会通过已有的经验去认知新的事物。当经验无法匹配时,用户会产生各种不适应,极端情况下用户会放弃使用产品。
比较典型的就是长期使用Windows的用户,最开始使用Mac时会表现出各种不习惯。最根本的原因就是用户在Windows系统中建立的使用心智,无法适用于Mac系统,为此有人在MacBook 中安装了Windows 系统。
图片
Don Norman 将心智模型定义为:“存在于用户头脑中的关于一个产品应该具有的概念和行为的知识,这种知识可能来源于用户以前使用类似产品的经验,或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。”

因此我认为雅各布定律其实是用户心智模型的外在表现。

 

02心智模型对设计的影响

设计师如何去应用心智模型呢?主要有以下3个方面。

图片

1、匹配用户心智

匹配用户心智模型来改善体验是设计师的首要任务。当设计方案与用户心智模型一致,用户可以轻松地将已有经验从一个产品转移到另一个产品上,无需额外的理解和学习成本。

 

最常见的就是与真实环境相匹配。例如手机系统中开关样式、日历风格,都是与现实生活中相匹配的,用户的认知成本很低。同样在电商平台中,很多弹窗套用类似于微信红包样式,希望可以提高活动对用户吸引力带来更多点击和转化。

图片

之前曾经碰到一个案例。在某一数据监控系统中,数据正增长时采用红色表示,负增长采用绿色表示,理由是与股市的涨跌配色保持一致,但是系统跟股市并没有任何关系。该系统中红色又代表了告警色,绿色代表了健康色,同一系统中采用了两套设计形式,结果造成了用户困扰。

 

因此匹配用户心智需要综合考虑用户场景、应用目的等多种因素。

 

例如常见的地图,在不同的场景中表现方式也是有所差异的。在高德地图中,用户需要查询地点、导航出行等等,所以地图与我们常见的实物地图更加匹配。而在滴滴打车中,地图更多是为了确定用户地理位置、上车地点、周边车辆数量等等,所以地图更多的是作为背景进行了简单化的处理。

图片

 

2、建立新的心智

我们在设计工作中会遇到各种新的场景、新的功能,无法完全匹配用户已有的认知,因此需要借助一定的设计手段建立用户新的心智,主要包括以下3种设计形式。

图片

 

1)产品心智植入

最开始我对slogan之类的品牌心智是无感的,感觉这种口号太虚了,用户不会care,或者很难引起用户共鸣。但是今日头条改变了我的认知,短视频逐渐占领了我的碎片时间,通过短视频让我看到了别人不一样的生活,跟着别人的镜头也让我“看见了更大的世界”。

拼多多月卡为了建立用户的省钱心智,在页面中突出了产品slogan,并且将“4张5元无门槛券”打造成标志性权益,降低用户的决策成本,并且形成权益记忆点,方便营销传播。

图片

 

2)心智引导

当产品设计无法与用户心智相匹配,或者改变了用户已有心智时,需要通过引导方式让用户快速建立新的心智。例如常见新手引导、功能入口提示、功能调整说明等。

图片

 

3)行为培养心智

为了培养用户习惯,签到类产品都会采用“定时玩法”打造用户心智。例如淘系的各种游戏化产品,都采用了每天早上7点定时收获游戏奖励的玩法,通过日复一日的行为刺激固化用户心智模型。

图片

对于会期比较长的年卡付费会员,用户对权益感知比较散碎,同样需要周期性权益激发用户与产品之间的互动,不断的增强用户的省钱感知。因此不少付费产品增加了月度权益。例如京东每月100元优惠券,淘宝88VIP每月兑换优惠券,1号会员店每月领鸡蛋,考拉海购黑卡月度专享购物券权益等。

 

这些月度权益在用户生命周期中形成了一个个记忆点,逐渐增强用户对产品的“省钱”心智,并且可以持续的激活用户,为续费活动做好衔接。

图片

 

3)利用心智

设计师既要为用户服务,又要考虑商业价值实现。所以某些场景下,设计师需要利用已有的心智为产品服务。

例如弹窗可以更好地吸引用户注意力,并且用户对于弹窗主要有两种操作,要么关闭要么点击。基于这样的心智,某些App开机广告就采用弹窗样式吸引用户点击。

图片

 

另外广告作为互联网平台重要的收入来源,需要考虑投放效果,因此广告大都采用软植入的方式,在形式上尽可能的与实际内容保持一致,从而借助已有的心智引导用户浏览和点击。

图片

写在最后
我个人认为心智模型其实包括交互和品牌两个层面。

在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


 

转载请注明:学UI网》设计心理学系列(03)——雅各布定律与心智模型



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

                                                            微信图片_20210513163802.png

 

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

 

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


今天咱就讲一个实用小案例,看看能不能讲的透彻一点!

seo达人


今天我们就讲一个星友的案例,好好讲讲这里面的原理,让大家吸收一波!本文案例强调重点画面主体突出,包括大小和颜色、考虑画面的深度、元素和背景颜色前后关系;仔细把元素的精致度做好。这样就能大大提升画面质感。

下面这个是星友参考的原作:

图片

然后下面这个是他练习的一个作品:

图片

我们来分析下二者差在那里。
我认为有以下4点:
1. 主体物与背景的色系反差
2. 主体物与辅助元素的大小对比
3. 辅助颜色的前后关系
4. 元素的精致度

 

1. 主体物与背景的色系反差

从色系来看,我们看原作:

图片

背景是冷色,周围元素也是冷色,只有最突出的主体物是暖色,这样的好处就是让主体十分突出。
我们做设计都知道,画面里尽量保证只有一个主要物体突出,如果所有元素都很抢,那整体看起来就会有点乱,就像下面这个练习:

图片

背景是暖色,元素的颜色有蓝色、绿色,都属于冷色,而且元素的色相都是和背景差异比较大的色相,这样就会导致整体有点凌乱。

 

2. 主体元素与辅助元素的大小对比

这点很容易理解,我们看原作的主体物是不是要比辅助元素大很多:

图片

而练习的这个主体就不够大,没有拉开对比:

图片

主次不分明,也是画面不精致的原因之一。

 

3.辅助颜色的前后关系

我们在观察画面的时候一定要注意,不要只关注二维平面的关系,还要看三维的前后关系,什么意思呢?
我们看原作的颜色:

图片

他是有很明显的前后关系的,辅助元素有蓝色:

图片

蓝色和背景的蓝比较相近,颜色就会比较靠后。
除此之外,还有灰白色,和卡片的颜色相近:

图片

颜色也会比较靠后,这样就形成了颜色的前后关系。
在使用多色时,一定要想办法融入一些无彩色,黑白灰,这样会让湖面没那么腻。
我们再来看下练习的作品,四个元素的颜色和背景都是剥离开的,没有一个是靠向背景的:

图片

这就会让画面的深度不够,没有前后关系。

 

4. 元素精致度

这个点以前经常说,元素尽量饱满一些会比较精致,我们看原作的元素,我们还是老办法,加个矩形框:

图片

每一个元素都是满的,可以撑的起来,但是练习的元素有一个就稍显单薄:

图片

如果单体不够饱满,当夜也会影响整体的精致度,所以大家一定要多注意。

 

总结

以上就是这个小案例的分析,总结一下就是:
画面主体要突出,不轮是大小还是颜色;
要考虑好画面的深度、也就是元素、颜色的前后关系;
再有就是元素的精致度要做好。
希望今天的小分析可以给大家一点启发,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》今天咱就讲一个实用小案例,看看能不能讲的透彻一点!

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

                                                            微信图片_20210513163802.png

 

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

 

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


后台界面设计的7条原则(附常用图表组件库下载)

seo达人

B端界面设计越来越受到重视,但设计师单从界面设计总感觉没有太多值得发挥的地方,其实对于B端界面设计来说,视觉在其中的作用真的很有限,需要设计师有更多的深度思考。今天这篇文章就从更加深入的角度去反思B端界面的底层逻辑,一起来学习吧!

文末会分享给大家一组非常实用的常用后台图表组件库,欢迎大家下载!

 

一个看起来很酷的仪表盘可能有很多功能、小工具和好的视觉效果。但实际上,它往往被设计成只是一个好看的玩具,而不是一个有用的工具。类似于一个多臂机器人,它能把数据整理成整齐的一堆,然后用明亮的数据让人眼花缭乱。

摆弄这个机器人可能很有趣,但最终会让用它的人感到失望。

为什么会发生这种情况?创造一种工具而不是一种可以很快被丢弃的玩具的诀窍是什么?

图片

Illustration: Outcrowd

 

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员,每个组件设计都需要他们的合作产出,所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞,然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段,再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话,它会问“我为什么出生?谁需要我?“。

试问你能回答吗?因此你需要明确:

  • 仪表盘将如何助力公司目标?
  • 什么结构,功能和视觉效果将帮助仪表盘服务好用户?
  • 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

图片

Perls

 

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题,而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段,设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则,仪表盘将永远不会做的更好。

图片

Clover

 

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里,当用户需要它们时如何处理,以及应该如何可视化。

设计师需要理解数据的目的。显然,这将帮助他们选择合适的组件,但还有更多的工作要做。例如,用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间,但你可以做的是突出最重要的元素,并在视觉上“弱化”次要的东西。然而,要做到这一点,你必须知道数据的优先级。

图片

Bidding Car

 

最重要的指标是哪些数据能帮助达成目标。例如:

  • 显示实际成功率;
  • 影响产品的感知方式;
  • 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标,他们认为什么样的可视化表现最容易理解?

人们喜欢看到与他们的目标相符的数字。

图片

Panch

 

3. 仪表盘结构:骨架

想象进入一个酒店房间,看到一张床,一张桌子和椅子,一面镜子和一个壁橱。甚至不用打开壁橱,你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的,整洁的,可预测的。你马上就能看到所有的要点,凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

 

1) 层次结构

首先,你得整理思绪。在开始设计之前,一定要对所有数据进行排序,将其分类,了解什么是最先发生的,什么是最后发生的,接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读,关键信息必须放在左上角,最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息,并创建逻辑场景。

把信息面板看作是一个故事,而不是一系列数据点。

 

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

图片

 

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的,餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地,必须提前考虑模块划分。

模块帮助显示内容层次结构,根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

图片

图片

 

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊,这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息,那么布局上应该保证数据的连续性。这一点必须提前考虑,这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

图片

Illustration: Outcrowd

 

所有相关信息都应按重要到不重要的顺序进行分组,并就近放置。

 

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开,你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

图片

Wingle

 

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动,人类只需要两条腿,狗需要四条腿,蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样,这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑,并吓走他们,因为它看起来太复杂了。个性化总是比标准化好。

图片

Band

 

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件,人们就很难理解内容。因此,我们的工作是让相关数据易读,但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

  • 表格
  • 图表
  • 示意图
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 筛选器
  • 列表
  • 选择树

图片

Activity

 

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

  • 哪个组件能最好地显示一个特定的KPI?
  • 用户可以立即看到什么?
  • 哪个组件是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

图片

想想主要的“目标”来吸引用户的注意力。例如,如果你的优先级是绩效目标,你应该使用数字;如果你需要比较值,用直线或柱状图会很好;为了激励团队,可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

图片

最好的小组件设计是极简和易于阅读的。例如,一个3D图表可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

 

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现,但仍有一些新的需要注意的细节。

 

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具,没有干扰。

图片

MEMO

 

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大,就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

图片

首先要选择底色,然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素,另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如,在这个例子中,红色看起来像是代表坏的和不受欢迎的东西:

图片

如果仪表盘提供了可定制的颜色,确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

 

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素,你可以使用颜色(对比度,亮度),形状,大小,负空间等。

 

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局,视觉层次,重点突出,对比元素,适当的字体,这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入,然后把较长的数字尾巴去掉。

 

7. 适应性

在实践中,当用户优先考虑桌面版本时,在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本,那么你可以先从移动设备着手构建仪表盘,然后再开发桌面版本。

图片

Snap

 

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展,因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时,请不断地问自己:是否一切都已就绪?有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗?它有用吗?

正如你所看到的,视觉设计实际上是设计师最不应该担心的事情。

最后,彩云再分享一组常用的后台图表界面组件库,相信会对大家的日常设计工作有帮助,

图片

图片

图片

获取方式:关注公众号 ,后台回复关键词  后台组件 ,即可获得!

 

本文翻译已获得作者的正式授权。

 

原文地址:medium

作者:Erik Messaki

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》后台界面设计的7条原则(附常用图表组件库下载


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

                                                            微信图片_20210513163802.png

 

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

 

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

如何建立产品设计中的“安全感”

seo达人



根据马斯洛需求层次理论,安全需求位于第二层,属于低层次需求,反映了人们对稳定、安全、受到保护、有秩序、免除恐惧和焦虑的需求。所以在产品设计中需要保护用户的隐私信息,让用户时刻掌握系统状态,从而减少用户焦虑,提升产品体验。今天我们就聊一聊如何在产品设计中建立用户“安全感”。

 

文章主要分为3部分:

  1. 用户为什么会产生不安全感
  2. 安全感的设计方法
  3. “不安全感”的应用

 

01 用户为什么会产生“不安全感”

马斯洛指出:心理的安全感(psychological security)指的是“一种从恐惧和焦虑中脱离出来的信心、安全和自由的感觉,特别是满足一个人现在(和将来)各种需要的感觉”。也就是说,缺乏安全感是因为用户陷入恐惧和焦虑中。

 

1、不安全的层级

我个人将缺乏安全感分为了3个层次:

图片

1)精神层面——焦虑无助

现实生活中,当我们遇到紧急问题又无法解决时,通常会感觉到焦虑无助。使用信息产品时,如果缺乏有效的指引和出口,我们同样会感到焦虑。例如公司内部通讯产品,密码必须要在内网OA系统中才能重置。如果重装App又忘记了登录密码,而上班进出园区和考勤又必须使用该产品,造成了死循环,用户必然要“出离愤怒”了。

2)信息层面——个人空间

微信已经成为了社交必备产品,很多人都会在朋友圈中秀出生活的日常信息。但有些“好友”关系是临时性的,并非生活中的真实好友,用户并不希望将个人信息曝光展示给他们,所以微信增加了好友关系分级功能,增加用户的安全感。

同样浏览记录、购买记录、搜索记录等都属于用户的个人行为数据,需要赋予用户删除权限,防止隐私信息泄漏。

图片

3)物理层面——生命财产

手机号码、身份证、银行卡等都是非常重要的个人信息,这些信息泄露之后可能会给我们带来财产损失,因此产品在获取这些信息时需要征得用户同意,同时也要为用户保护好隐私信息。

图片

 

2、不安全感的原因

1)信息未知

恐惧和焦虑更多的是因为对信息的“未知”,尤其是涉及金钱、健康的场景下,当用户对信息不理解或者不熟悉时,就很难产生信任感,更不会有安全感。

例如用户对于长串数字的量级识别效率会降低,当进行大额转账时,为了防止出错,我们会反复确认数字。于是很多支付工具增加了汉字来展示金额量级,帮助用户快速识别输入的量级,从而增加用户的安全感、提高操作效率。

图片

虽然电商平台带来了购物的便捷,但是用户无法亲身感受商品质量,担心购买后发生扯皮和退货难等问题。于是就有了运费险和7天无理由退货等保障措施,消除用户担忧,从而提高用户的购买意愿。

2)认知偏见

正如我们对美女总是抱有莫名的好感,我们对于不美观或者丑陋的事物也存在认知偏见。如果产品视觉效果粗制滥造,用户更容易产生不信任感。

 

02  安全感的设计方法

用户交互过程大致可以分为“认知-行动-反馈”3个阶段,在不同的阶段都需要带给用户“安全感”。

图片

 

认知阶段

1、消除未知

1)更熟悉的信息

人们在熟悉的环境中会更有安全感,本质上是因为对信息的了解和掌控。所以对于用户不熟悉或不易理解的功能,需要进行一定的包装,便于用户理解。

例如支付宝股票中将大盘的涨跌,通过天气晴雨表的形式来展现,让普通用户轻松理解大盘的状态。淘宝搜索列表中,专门将用户“曾经买过的店”展示出来,可以唤起用户的购物记忆,增强用户对商品的信心。

图片

2)更真实的信息

高德地图利用AR技术直接将导航与实景相结合,用户看到的不再是系统处理过的地图,而是真实环境的直观体验,从而更好的提升用户使用过程中的安全感。

图片

3)更充分的信息

让用户获得更多的信息可以增强用户的掌控感,从而建立用户安全感。

高德地图导航在可选择的条件下,默认提供3条可选路线。有些路线明明又远又耗时间,为什么还要呈现给用户呢?一方面更多的信息方便用户选择,带来掌控感。更重要的是如果只显示一条路线,用户可能会产生疑问和不信任感,不确定系统给出的路线是不是最好的选择。

图片

 

2、增加未来的预期

除了让用户熟悉当下信息,还需要通过足够的信息让用户建立对未来的信心。

1)信用背书

拼多多为了增加“百亿补贴”的可信度,减少用户对商品“假货”、“非正品”的担忧。专门引入了中国人保保险为活动承保。1号会员店作为京东的子产品,则借用更有品牌影响力的“京东”为其代言。

图片

2)达人带货

网红直播带货已经成为了重要的营销方式,一方面网红产生的超高流量,同时用户对他们更加信任,认为他们的推荐更有保障。

另外熟人关系也会带来更强的信任感,所以拼多多建立了拼小圈,淘宝建立了淘友圈,通过好友关系相互影响,带给用户更强的购买信心。

3)承诺保障

正如上文所说,七天无理由退货、假一赔四逐步成为了电商的标配。而为了减少用户对付费会员能否“省回会费”的担忧,电商平台增加了“不回本退差价”的玩法。除此之外,双11等大促活动电商平台还会着重强调“价保”、“全年最低价”等信息,消除用户的后顾之忧。

图片

 

3、视觉带来的情感

1)产品IP形象

IP形象实际上是产品拟物化的表现,可以增加亲和力,拉近用户和产品之间的距离。例如天猫猫头设计已经成为了一种符号和载体,在双11期间既传递了商品品牌,又让平台更加深入人心。

图片

2)视觉效果

视觉表现力已经成为了产品改版迭代重点发力方向,希望通过高品质的界面效果和视觉品牌形象,增强用户对产品的信心。旧版的建行App简直就是灾难,我第一次打开的时候真的想立马删掉,但是迫于转账需要只好硬着头皮使用。好在新的版本总算是进步了。

图片

 

行为中

1、掌控感

在高德地图中提供了丰富的信息,例如经常拥堵的时间点,拥堵状态,拥堵距离和市场等,甚至包括了未来不同时间点的行车时长等等,帮助用户合理的安排出行计划。

图片

 

2、行为过程中的信息反馈

开车时最怕遇到堵车,一旦堵车用户就会想“有没有更好的路线呢”。高德地图除了提醒拥堵信息之外,还附加了“虽然前方拥堵,但您依然在最优路线上”话术,让用户安心驾驶,不需要二次确认路线。

此外防错、容错等基础设计原则都可以帮助用户建立很好的安全感。

 

行为后

1、信息可跟踪

用户在使用支付宝转账后,会展示转账的节点信息,用户可以随时跟踪转账的进程,特别是大额转账时间较长时,可以更好地减少用户等待的焦虑。

图片

 

2、稳定性

如果用户在使用产品时经常遇到bug,用户很容易对产品产生怀疑。而对于付费会员类产品,同样需要保持权益的稳定性,反复的权益变更也会造成用户的不信任。

 

03 “不安全感”的应用

安全感是用户需要的,但是有时候“不安全感”是商家需要的,因为可以产生一定的激励作用。

 

1、不确定性

很多活动都是打着“数量有限,先到先得”的玩法,不明确告知数量,不展示进度,增加了购买的不确定性,对有需求的用户可以产生一定的压力,让其尽快下单。或者采用预约玩法,通过预约人数的曝光给用户带来一定的压力。

图片

 

2、损失玩法

很多游戏化产品都加入了互偷玩法,为避免能量损失,用户不得不定时收取能量或者设置保护罩。

往年的618、双十一、双十二期间,天猫养猫游戏都会推出团队PK玩法,将“不安全感”发挥到了极致。为了保住胜利果实,用户每天在对战结束前都不敢丝毫松懈。

所幸今年天猫官方已经宣布618期间,养猫不再设定PK玩法了,大家可以“佛系养猫”了。

图片

 

以上就是我总结的体验设计中“安全感”的设计方法。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


转载请注明:学UI网》如何建立产品设计中的“安全感”


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

                                                            微信图片_20210513163802.png

 

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

 

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



设计系统指南——搭建你的专属色彩系统

seo达人


想要搭建一套完整的设计系统,颜色是你需要最优先考虑的,我浏览了大量设计系统相关外文也下载了各类搭建完毕的设计系统文件,颜色永远是排名第一的考虑项。至于原因,就要提到颜色(后面会统称为色卡系统)在设计系统中所担任的角色及其意义。

另外,我基于figma搭建了个人博客,以期以更灵活的方式展示和分享内容,后续文章、设计系统资源都会在上面进行发布,大家可以收藏一波。

博客链接 点击此处

 

原文地址:UI中国

作者:南山可

 

转载请注明:学UI网》设计系统指南——搭建你的专属色彩系统


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

                                                            微信图片_20210513163802.png

 

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

 

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


B端设计:智能销售平台界面优化方案

seo达人


“知识内容视频化、主旋律电影娱乐化,所有的事物正在以大众更能接受的方式进行变化,B端C化是未来「TO B」产品的新方向。B端产品普遍存在的问题是信息密度高和模块化封装度低。当C端的用户体验越来越好时,相比之下的B端体验就显得更糟糕。”为了解决这个问题,我们发起了这次改版,希望能提高销售顾问的效率。

界面中旧版的页面是设计稿和测试环境,不涉及公司隐私,相关部分已进行涂抹处理。

图片较大,需要加载一会会~强烈建议电脑观看。

 

原文地址:站酷
作者:牙线y2x

转载请注明:学UI网》B端设计:智能销售平台界面优化方案


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

                                                            微信图片_20210513163802.png

 

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

 

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

做好新手指引,把握黄金半分钟

seo达人

有很多心理学研究表明,一个人形成对别人的第一印象,只需要几秒钟而已。
最常见的说法是 7 秒,但也实验证明是 3 秒、5秒,甚至 27 秒的,这是因为对于第一印象的标准和人群、场合等因素的差异。

但无论具体数字,用户对产品形成第一印象的时间都很短,通常都会半分钟内做出主观判断并得出结论。
很多产品,尤其是手机 APP,打开后第一眼看到的是广告闪屏,第二眼看到的是新手指引,再加上无可避免的加载延迟,这「黄金半分钟」很快就消耗掉了。
图片
所以,我建议至少第一次开启 APP 时不要展示广告闪屏(真的不差这点广告费)。
其次,如果真的需要新手指引,那么一定要好好设计,因为这将成为用户判断自己是否要继续使用下去的关键。

 

新手指引有很多形式

最容易陷入俗套的,就是:

 

图文滑页

图片
掌上生活
因为很多产品做这种新手指引,只是为了好看并不是为了真正帮到用户,可就是有很多领导/甲方喜欢这种(也许主要因为显得有档次)。
如果做得不好,容易像套模板一样,会放一些不是很有意义的功能和更新说明,看起来更像广告或者说明书,只会让人想要快点翻完跳过。
但如果做得好,也能美观而且让用户知道使用产品的要点。
手机 APP 的新手指引里,现在越来越流行的,是更加简单的:

 

操作示意

抖音
其实产品的功能特色,通常用户应该在下载之前就知道了,或者至少也在应用市场/AppStore 看过,不然也不会稀里糊涂就下载。
而手机 APP 应该设计得简单且符合用户习惯,根本不需要很长的图文说明。
所以经常只需要把用户可以立即使用主要操作,重点示意一下就好了,免得用户不小心被卡在第一步。
不过这种形式通常也就是对简单的 APP 有效,如果是复杂的 APP 或者是 PC 端工具类产品,需要一定学习成本的,可能就要用到:

 

步骤指引

图片
Salesforce
这类型新手指引,通常会把一个重要功能拆分成好几步操作,一步一步地引导用户走一遍。
这对于功能比较复杂的产品来说很有用,但是如果出现的时机不对,也容易让用户失去耐心想要跳过。
这种新手指引走一遍都要花费好几分钟,所以最好是能够提供跳出按钮,因为可能步骤走到一半,用户认为已经学会或者不想跟着做了。
很多产品其实根本不适合这种新手指引,因为功能太多很难一一试用,例如 UI设计工具 Figma,总不可能先带领用户把编辑功能都试一遍吧。
这时与其浪费时间让用户跟着操作,还不如选择更加高效的:

 

视频介绍

Figma
把重要功能集合成一个视频(或者动图),让用户快速浏览一遍,比把步骤拆分出来让用户跟着做要高效多了。
尤其如果在功能数量很多,却难度不高的情况下。
就算有的功能用户看过一遍也未必会用,也可以在需要的时候自己去搜索寻找方法。
而这视频还能用作宣传,可以一举多得了。
但还是有些产品不适合这种新手指引,因为用户的需求或者熟练程度相差太大了,做一个视频很容易顾此失彼。
例如 PS 这类工具,小白用户和高手用户的需求根本无法用一个视频覆盖,更好的方法是使用灵活性更强的:

 

学习课程

图片
Photoshop
当产品太复杂新用户必须学习,而用户需求差异太大无法统一成单一的新手指引时,那还不如先让他们自己选择想学什么。
可以做成一套从小白到高手,按照功能拆分整理的系统课程,无论用户处于什么阶段都能快速找到自己需要的。
这样,新手指引就和操作说明没有什么很大区别了,还可以顺手搞一个学习社区。

 

新手指引的注意事项

尽量整合避免重复

以上几种新手指引,建议如非必要只选一种,否则用着用着可能突然冒出一个新手指引,想想都烦。
真有那么多需要指引的,可以考虑弄一个新手指引的常驻入口,用户需要的话可以随时找到。

 

允许跳过

虽然前面提过了,但这里还是再次强调一下:任何新手指引都不能强制,因为:
新用户≠新手
也就是说,其实产品本身根本无法得知一个用户是不是新手,只能判断是新手的概率是不是够大。
如果凡是新用户都要展示新手指引,会让很多非新手的新用户反感。

 

在设计初就考虑到

何况新手指引如果有,很可能会占据用户对产品形成第一印象的「黄金半分钟」,可以说是非常关键了。
所以新手指引最好被当成产品的一部分,在考虑用户旅程或者体验流程时,一并加入。
而不应该是设计完产品后,发现太复杂用户不懂,再思考要不要加上。

 

专注需求而非功能

一个产品的功能通常很多,如果你在设计新手指引时,总想着要介绍什么功能给用户,那么你会发现想「塞给」用户的内容太多了。
新手指引的内容太多,结果只会让人想要跳过。
所以建议在考虑新手指引的内容时,只考虑用户当时最迫切需要的是什么,否则再重要的功能,也没有必要加上。

 

思考总结

说来惭愧,过去我自己也经常到最后才考虑新手指引这个问题。
不过主要原因不是我觉得不重要,而是 C 端产品一开始想要尽量把产品做得简单好用,不需要新手指引。
但如果是 B 端/工具类产品,就真的不该抱着这样侥幸的心理了。
因为仔细想想,我自己每次试用新产品时,也大概率在新手指引的阶段,决定要不要退出卸载的,不知道大家是不是和我一样?

 

原文地址:体验进阶(公众号)
作者:设计师ZoeYZ

转载请注明:学UI网》做好新手指引,把我黄金半分钟



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

                                                            微信图片_20210513163802.png

 

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

 

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


总监说:你做的啥设计?方向全错了!!!

seo达人

同学有这样的困扰,一个设计师分享他的设计,没想到被这个总监直接喷了说完全不专业,那么怎么做才专业?今天聊下下部分。

 

1.符合情感的色彩 

图片

如果你在设计中使用颜色,一定要考虑色彩的整体和谐性以及色调。色彩明度不同,色调不同,带来的视觉感受是完全不一样的,比如红色,有的红色很个性化,有的红色很现代,有的红色比较性感。我们需要掌握不同颜色的性格特征。

这里推荐一个工具就是-色彩意象尺,它能帮你了解不同颜色的色彩情感。一般在做品牌的过程中用的比较多。

图片

色彩意向尺,能告诉你不通过颜色的情感是什么样的。在确定一个品牌色,或者配色时候都可以用到。给大家看一个定义品牌色的案例。

举例说明

比如要做一款全球的社交产品,主要用户是00后的,整体的品牌个性是时尚,年轻的方向。那么可以从这个尺度表里面去挑选色彩位置,再进行配色调试。

图片

第一步就从整个色彩尺度表空间里面,找到了这个色彩的位置。找到了一个基础颜色,红色,黄色。

看看竞品的色彩方向

图片

比如发现竞品其实都趋向于红色方向,那么也可以从策略上,我们避开红色方向,最终来定出一个黄色作为整体品牌色。

根据人群喜好调整配色

图片

图片

确定品牌色方向:黄色

在确定方向后,就要思考,我们的用户比例,是男性多还是女性多,加入我们的用户是男性多,可以根据上图男女喜好去做色彩倾向。比如男性喜好色彩大胆一些配色,那么基于黄色去做一些黄色的调整。

图片

调整黄色的明度和饱和度,让整体更大胆一些,最后定下来一个偏糖果玉米的黄色。

以上就是一个大概如何定义品牌色过程,那这中间其实有很多知识点,可能是同学们第一次听说,比如:品牌个性维度,色彩情感,以及色相意向尺,不过没关系,今天大家只要通过这篇文章,了解的这些理论。然后在你的项目和工作中,不断反复运用,相信我,你有一天也可以从0到1去定义一些很经典的配色。

图片

上图就是一个使用色彩意向尺的范案例,通过产品定位优雅高级,从色彩意向尺里面选择中性色去运用的一个案例。

图片

分享给大家一个网站,这个网站汇聚了全球所有大公司的品牌色。你在做品牌色时候,都可以去参考学习。

 

2.有品质的图片 

图片

片来源:设计日记私塾班学员-小冉子

图片是做设计非常重要的工具,没有一个工具比图片简单强大。图片是最被设计师忽略的一个工具。如果你会使用图片,能很好帮你做设计提案,帮助你很好的把产品气质和调性传递出去。

图片

片来源:设计日记私塾班学员-小冉子

比如今天我们设计想表达安全,那么怎么去体现,怎么去和同事领导表达安全的概念。图片就是一个很好的方式。比如安全的人,警察,保镖。安全的事情手机锁屏解锁,戴口罩等等。安全的物体有保险箱,指纹锁等等。也能通过图片找到一些视觉表达方式,比如块面感像保险箱一样,比如稳重的字体,对称的构成形式等等。

图片除了用在情绪板去表达你的设计意图,在设计中好的图片能帮你传递出清晰的概念,能帮你视觉加分,在视觉上提升品质。

图片

如上图就是一个摄影照片,那么运用到设计中,和设计很巧妙结合,效果就会非常好。

图片

合成后的效果图非常好,汽车和风景的结合也比较融洽。

图片

特别在电商设计中,图片选的好,符合产品气质。整体的销量还有设计效果都会提升。

图片

设计师合理的运用图片,通过图片去表达设计概念。通过图片的选择帮助产品提升品质,最终达到设计目标是每个设计师都需要具备的能力。

 

3.带隐喻且合理的图标 

图片

在页面中合理运用图形很重要,现在图标不仅仅是表达含义,更多时候也是设计图形的象征,图标也是有情感的。不同图形的圆角大小,质感不一样,传递的气质也会完全不一样。

图片

断口和叠加色彩的图标,给人感觉轻松活泼,传递出亲和力。

图片

这种就是比较硬朗的图形,一般在视觉上给人稳定,品质的感受,适合于金融产品,偏硬朗一些的产品设计。

图片

另外在图形的设计上,要遵循用户平时的习惯,图形要和他日常生活中的事情能联系起来,也就是常说的隐喻,图形要有合理的隐喻。

 a

4.明确按钮规则 

图片

按钮是产品设计中出现频率最多的,按钮主要是行动点,所以我们有必要明确每个按钮的含义和动作。

图片

按钮的视觉样式也很多,有填充的,线框的,色块描边的,还有文字按钮。在产品设计中,需要明确每个按钮的使用场景和含义,比如一般的主行动按钮一般用品牌色填充,比如去购买,下一步等等。一般辅助操作用白色快描边的方式处理,这样更轻量化。警告类的操作一般运用红色按钮,无效按钮一般用灰色等等。

图片

如果没有很明确的按钮指引规范,就会出现设计不合理,功能不合理。

 a

5.视觉对齐准则 

在设计时候,有时候需要设计的很精准,比如间距规则,图形大小都要遵循数学原则,也就是像素眼对齐。但是有些场景,可能需要进行视觉矫正。纯粹的数学对齐往往看起来不和谐。

图片

NAVER闪屏,字体是偏上一点设计,看起来更加和谐。如果两边都是一比一会有些压抑。

图片

上图两个图标,左边的是数字对齐,但是看起来图片有点偏左了,右边是进行视觉对齐调整后看起来和谐很多。

图片

上图左边正方形和圆形的大小相同,圆形看起来就特别的小,所以在这种情况下。圆形要比正方形更大一些。

图片

经常会用到字体,有时候粗体和细体会一起使用。如果同样字号的粗体和细体放在一起就会感觉粗体更大。这个时候其实就需要将细体微调整1px或者2px的大小,让其看起来更合理。

图片

同样的在中文和英文数字组合时候,中文会比数字看起来大很多,会有些不均衡。这个时候可以把数字稍微加大一点,这样看起来就会均衡很多。

 

最后 

以上就是我总结的一些视觉标准准则,也是一个设计合格的基础,当然设计远远没有完美的,没有100分的设计,只有不断优化的设计,希望这两篇关于如何从哪几个维度做好设计,能让你更好的了解设计,并在工作中运用。

 

原文地址:我们的设计日记(公众号)

作者:sky




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

                                                            微信图片_20210513163802.png

 

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

 

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档