首页

表格设计-掌握表格设计方法(表格体验篇)

ui设计分享达人

前言


提起中后台,除了高效、灵活和强大之外,不可忽视的还有它的海量数据。海量数据的筛选与呈现,直接决定决策人员的效率高低。我这边主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之一,表格的设计进行探讨。

首先了解下表格的构成:顶栏、表格主体、底栏



  • 顶栏: 对表格信息进行概括,包含标题、筛选、搜索、操作按钮等功能

  • 表格主体:承载数据内容,由 行 和 列 构成

  • 底栏:主要用于设置当页条数及放置分页器


关于表格的文章有很多,这边我仅仅针对表格内部(即表格主体)与大家探讨需考虑哪些问题才能让表格整体的阅读体验更好!


“优秀的设计需要用心、规划、思考和理解人们的行为方式”


的确,表格作为中后台海量数据呈现的载体,能够【帮助用户快速“阅读数据”,获取有效信息,提高决策效率】,但是实际业务中,很多设计师往往没能够结合产品和业务场景,找到一个合适的方案。所以我结合了自己在实际工作中遇到的表格设计问题,总结出以下几点:


一、表格需自我解释 —【梳理数据关系,明确数据重点】


自我解释的最终目的就是让人看懂你,试想下用户面对一整张表格中数据却不知道表达什么意思,这极容易给用户带来阅读压力最终放弃。因为很多B端产品的数据面向的用户角色及场景都存在差异,所以在设计表格的时,我们首先需要对表格的表头(列)进行合理的排列。


如:管理员与普通用户所展示的数据内容就可能存在差异,所以需要根据阅读重点来定义表格 列的展示顺序(依据信息重要程度从左到右放置),且思考每列间的数据关系,来引导用户。


案例:运用同学常见的拉新数据,其中的数据包含:日期、渠道、新增用户数、活跃用户数、用户启动次数、累计用户数、版本信息等。


首先我们应思考运营同学关注点是什么?作为运营方案的成果数据,他们肯定最想知道是否完成KPI「是否有效获取到用户?这些用户活跃情况?哪几天拉新效果最好等」。如果我们不考虑用运营同学特定的目的,随便排列,就容易导致用户第一时间很难获取到自己想要的有效信息,极大影响阅读效率。但如果抓住了这个主要目的,对指标进行排列,那么我们表格的逻辑性便会更强,更清晰,也更加贴合业务述求。



二、【配置表头类型,提高阅读效率】


表头不仅仅有解释当前数据内容,还可以集成:批量操作、排序筛选、解释说明、分组、固定等查看操作,而这些功能均不是必要元素,需根据用户查看数据的需要(如:用户想快速找到拉新用户数最多的某天等),适当的选配。


2.1、批量操作


在展示信息的同时,可以对表格主体内容中的数据进行删除、下载等操作,帮助用户批量操作,提高效率。如:QQ邮箱我们批量删除邮件。



2.2、排序筛选


排序能让用户可以改变数据的排序,筛选则可以改变数据展示的类型,帮助用户更好的观察数据,发现数据规律。有两种形式,一种是使用上下按钮进行排序(正序与倒序),另一种是使用下拉菜单进行排序(适用于多种排序及筛选)。



2.3、解释说明


  • 表头的字段名称理应简洁明了,但有时精简后的名称用户还是看不懂,这时就需要跟一个释义标识,鼠标悬停时出现该字段的详细解释,同时满足不同用户的需求。


  • 有时候宽度不够,文字会溢出,则需要悬停时出现完整的字段名称。



2.4、分组


适用于多种所属关系的信息展示(如:地址>街道>街区>楼号>门牌号)



2.5、固定


固定不光可以固定 行,也可以固定 列,特殊情况可以同时固定 行 和 列。一般数据较多时,帮助用户在滚动过程中可以实时看到 行 和 列 对应的内容,提高阅读效率。



三、数据展示 —【规范展示方式,营造良好展示效果,提升数据阅读效率】


3.1、对齐方式


合适的对齐方式,能够让用户阅读时更加舒服。由于表格中的数据类型比较多,需根据数据内容选用合适的对齐方式。


  • 数字:右对齐,有小数点的数值需按照小数点对齐,且数值较大时需每隔三位数使用 , 隔开,便于用户阅读与对比数值。


  • 文字:左对齐,符合人们从左到右的阅读习惯。


  • 混合型文本:左对齐(混合型内容包含图片,进度,状态标签,人物头像,链接等)。


  • 多选操作:居中对齐。


!!表头的对齐方式与数据展示的对齐方式必须保持一致,这样能够统一整个表格的表格对齐方式,便于提升阅读与对比的效率。




  • 数字:数值、金额、比率

undefined



  • 文本对齐:纯文本



  • 文本:判断性文本



  • 文本:时间日期



  • 混合型文本:状态标签、进度条



  • 混合型文本:人员(单人、多人样式)



  • 混合型文本:操作



  • 混合型文本:显示/隐藏



  • 混合型文本:评价



  • 可操作:多选



3.2、数据多层级


在复杂的表格中,由于数据量较多,并且数据有层级关系,所以会对数据表格进行分层处理,优先展示第一层级的数据内容,将二三层级的数据隐藏起来,用户点击后再展示(如:教育类产品中题目设置 章节信息编辑 知识点编辑)



3.3、数据修改


支持直接点击内容,出现输入框后进行编辑



3.4、展示统计


方便用户快速了解总数



四、表格分割线 —【建议选用水平线、斑马条纹,阅读舒适度最高】


表格行列的分割方式有:

  • 网格式:类似excel,这样的方式很好的所有 行 和 列 进行分割,但是网格很容易给人造成视觉疲劳。


  • 水平线:仅对 行 进行分割,通过间距与对齐的方式对 列 进行视觉上的分割,这样的方式可以很好的对数据进行划分,便于阅读。


  • 斑马条纹:通过低饱和度的颜色交替的对 行 进行分割,同样很好的对数据进行划分,便于阅读。


  • 留白,不分割:直接留白,通过间距来划分,不建议使用这样的方式,因为数据较多的时候,用户十分容易将行对应错,容易造成混乱。



五、空数据


5.1、表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗或误以为出现了bug?明智的做法,是无数据时用「-」来填充显示,数据为零时与上下数据单位、小数点相同的0来显示。



5.2、表格无内容


  • 没有创建诉求的,数据是系统产生的,不是由用户创建的,直接告之暂无数据。



  • 是用户有创建诉求,数据是由用户或系统产生的则直接示意用户创建数据



写在最后

通过合理的组织架构和呈现方式,使原本枯燥的数据呈现出生命力,这是一件很神奇的事。而用心、规划、思考和理解人们的行为方式,围绕用户目的与实际使用场景,提供易读性高且规范表格更是需要设计师反复思考的事情!

最后感谢您看到最后,希望通过本篇文章的讲述,能对大家有所启示~~~~~~~

文章来源:站酷   作者:小发歌

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

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

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


以用户为中心的设计:它是什么以及如何做

ui设计分享达人

以用户为中心的设计在设计领域取得了许多突破。

它提高了产品和界面的国际标准,扩大了设计中的创意机会,并协助了近代技术的发展。

以用户为中心的设计通过创建兼顾两者的解决方案来帮助消费者和公司设计产品。

可用性是这个设计过程的最前沿。每一步都是为了最大限度地提高设计团队创造令人满意和高效体验的能力。

什么是UCD?

以用户为中心的设计是一种设计过程,旨在通过根据用户的经验和要求创建设计解决方案来最大化可用性。

它是一个迭代设计过程,在很大程度上依赖于有关用户体验的反馈和数据,以创建适用于潜在消费者和企业的解决方案。它在数字产品的生成方法中很常见,在 UX/UI 设计中尤其重要。

例如,需要创建用户友好的网站界面的设计团队将应用 UCD 设计指南,以根据用户的观点、需求和愿望生成和完善解决方案。

原型将通过质量测试,并通过反馈和对其体验和行为的深入分析与用户合作,这将影响有关产品功能的决策。

为什么 UCD 很重要?

用户体验在产品设计、网页和界面设计以及营销方面很有价值。

消费者希望他们的生活变得简单。网站、应用程序或产品的存在是为了满足消费者,因此其成功取决于他们的经验。

以用户为中心的设计方法对公司的好处包括:

1) 不断返回业务的忠实用户

2) 销售额增加

3) 开发精致、高效且易于获取的产品

4) 深入理解问题,创造优秀解决方案

5) 客户和团队之间的协作

6) 避免常见错误

7) 提高竞争力

8) 帮助他们了解他们的市场

UCD 引领产品、软件和设计的发展,使我们更接近轻松、高效。

UCD 流程

交互设计协会强调了从头到尾考虑整个用户体验的必要性,并分4步定义了以用户为中心的设计方法:

1. 了解使用环境——这部分设计阶段至关重要。我们通过深入观察和采访用户来了解他们的行为和需求。这部分过程通常由行为科学专业人士执行,他们进行专家访谈。

2. 明确用户需求——一旦更好地了解用户,设计团队就可以编制一份用户需求和粗略概念列表,以指导他们如何设计成品。

3. 设计一个解决方案——这里的重点是“解决方案”。设计某产品的目的是为问题、需要或愿望提供解决方案。设计理念必须根据研究阶段发现的内容来解决问题。

4. 根据需求进行评估——一旦有了设计原型,就必须经过一个评估过程,在该过程中分析产品对发现的初始需求的满足程度。只要有差距,产品就会经历一个迭代过程,在这个过程中,将重新审视设计以填补这些差距,直到有一个满足所有用户需求的完整设计。通过可用性测试评估设计可以清楚地了解产品与用户需求之间的差异,从而推动流程向前发展。

最大化可用性的技巧

以用户为中心的设计过程旨在最大限度地提高可用性并满足消费者。上面提到的基本四步过程是一个基础。我们可以使用一些最大化可用性的技巧来充实它。

1. 同情和理解

同理心和理解是主要在用户研究阶段使用的关键设计技术,为团队提供关键见解。

同理心意味着理解和分享他人感受的能力。这是设计思维的第一步,因为深入了解各个级别的用户体验的本质有助于设计团队获得第一手的观点并确切知道要解决哪些问题。

移情设计略有不同。它是一种以用户为中心的设计方法,明确关注用户对产品的感受。这对于包含在以用户为中心的开发过程中也很重要。人们对产品的感受在消费者体验中至关重要。

一种产品可能提供了很好的解决方案并且效率很高,但它可能缺乏与消费者的情感联系和建立关系。用户需要感受到启发、关心和共鸣,才能取得成功。这就是视觉设计可以发挥重要作用的地方。

美观且鼓舞人心的界面和品牌大有帮助,并且是通过视觉品味吸引他们并与产品建立情感关系来与合适用户建立联系的门户。

2. 明确为什么

设计是一个高度有意的过程。它需要被规划出来,遵循步骤,最重要的是,以与业务目标一致为指导。

设计师必须知道他们为什么要创造一些东西,以便能够克服在实施阶段会出现的障碍。每个人都需要清楚为什么设计对用户和业务都有益。“为什么”是推动发展的动力。

它需要良好的项目管理和出色的领导能力——这是设计和商业成功的重要组成部分。

3. 使业务需求与用户需求保持一致

归根结底,企业也有必须满足的要求。只关注用户会存在局限性。一旦理解了他们的需求,他们就需要考虑收入、利益相关者和设计范围的业务目标和结果。

使用户需求与业务成功保持一致归结为目标和清晰的路线图。业务需求和目标需要从一开始就非常明确地规定,具有灵活性的空间来满足不可预见的用户需求,同时仍然与业务需求保持一致。这是商业模式将有助于指导设计过程的地方。

通过确保您拥有所需的所有资源、做出并履行承诺、与整体业务保持联系以及拥有高效的项目管理和领导能力,保持业务需求得到满足是从内部的角度为项目取得成功做好准备。

4. 磨练用户反馈循环

反馈是一个基本的设计原则,在任何设计过程中都是必不可少的。

用户反馈是响应用户输入的行为。用户反馈循环在以用户为中心的设计过程中至关重要,因为它向设计团队展示了改进和重新校准的地方。

它在产品或系统的整个存在过程中都得到维护,因此在产品或系统的整个存在过程中都将依赖于用户反馈循环或客户反馈循环。

它可以采用推荐和正面评论的形式,强调产品或系统运行良好的地方,因此可以保持原样或进一步改进该区域以获得更深层次的满意度。

5. 总是迭代

设计过程是一次又一次地尝试,直到它们奏效。

正如你们许多人所知,设计过程是一个迭代过程。这是一个贯穿开发和维护的持续过程,其中产品或系统不断得到改进。生活在如此快节奏的时代,对于必须掌握最新发展和技术的设计团队来说,意味着要做大量的工作。

迭代是任何设计过程和长期客户满意度的关键部分。在此过程中,原型将在重复循环中进行测试、调整和再次测试,直到找到解决方案。

在迭代过程中,原型将经过用户测试和可用性测试。用户将测试设计、被观察并提供反馈。

6. 轻松就是一切

设计中出色可用性的关键是使一切尽可能简单易行。友好的体验是一种愉快、轻松和令人满意的体验。创造简约是一门艺术。这是一个淘汰的过程。它需要深刻的理解。以用户为中心的设计实践通过以下方式带来便利:

1) 减少用户的工作量

2) 使用简单明了的语言

3) 让用户主导并赋予他们权力

4) 简化导航

5) 使信息完全清晰,并在轻松和复杂之间找到平衡。

优秀UCD的例子

以用户为中心的设计实例无处不在,尤其是在我们今天使用的大多数知名数字产品和软件工具中。我们列出了一些品牌的例子,这些品牌通过将用户体验放在他们所做的一切事情的中心,同时与业务需求保持一致而取得成功。

苹果网站

Apple 知道如何提供出色的用户体验。他们的成功归结为可用性。通过强调设计,品牌创造的一切都以简约和美为核心,既吸引用户,满足他们,也让他们的生活变得轻松。

Apple 网站使用户可以轻松访问。它在直观、组织良好的界面上以易于理解的语言提供有关产品的详细规格。

爱彼迎

另一个用户友好的直观设计解决方案的绝佳例子,在线度假租赁市场 Airbnb 通过专注于满足潜在消费者的每一个需求,将一个绝妙的想法提升到一个新的水平,从而取得了成功。

该应用程序是个性化的,易于导航,可以轻松查找和预订住宿,尤其是具有取消和退款等功能。他们还使用视觉设计作为激发用户的一种手段。

总结

你对以用户为中心的设计有更好的理解吗?

这个概念本身很简单。并且,这个过程是有效的,你现在应该可以知道了。它需要跨学科的专家团队、深入的分析和大量的迭代。如果我们不得不将其缩小到三个要点,它们将是:

1) 通过深入研究和同理心了解用户是设计解决方案的核心

2) 简单、轻松和愉快是我们的目标

3) 需要多次迭代才能取得成功

在本文中,我们了解了UCD 的关键原则、为什么它很重要,以及针对主要用户的设计的一些技巧。希望这些内容可以帮助到你的设计。


关于表单中存在编辑表格的情况

ui设计分享达人

需求:供应链系统,销售价目表需要添加价目明细。


问题:思考【添加】【删除】按钮放置位置及交互方式


思考过程

 

方案一:

这是系统已有页面。【添加】【删除】按钮固定于表格右上角。

适用于数据1~10条的情况。


方案二:以【轻流】举例

【添加】【删除】按钮固定于表格左上角。

表格中有勾选框,支持【批量删除】【部分删除】


同时在表格右侧固定【添加】按钮。


当鼠标位于序列号时,出现【弹框填写信息】按钮。


弹框页面支持上下数据切换。




方案三:

【添加】按钮位于表格下方左侧,不固定。【删除】按钮位于表格右侧,固定。

适用于数据10~100条的情况。


优点:相较于【方案一】,缩短了操作路径。

缺点:不适用于表格存在分页的情况。需要每个页面存在【添加】按钮。

          不适用于表格存在横向滚动条的情况。


方案四:以【简道云】举例

【添加】按钮位于表格外下方左侧,固定。


当鼠标位于表头左上角时,出现【切换】按钮,表格会单独在一个页面打开。


当鼠标位于序号时,出现表格【切换】按钮和【更多】按钮。


点击【切换】按钮,出现【弹框填写信息】。


点击【更多】按钮,出现【删除】和【复制到最后一行的】按钮。


总结:对于在表格中编辑的样式,基于业务场景,目前都是弱化删除按钮。我更倾向于选择【轻流】的方案。

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

文章来源:站酷   作者:木丁西dwj

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

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

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



如何从用户角度出发打造产品体验

ui设计分享达人

文章定位:

好的产品能为用户带来高效的解决方案,在迭代升级中实现用户价值。

以下文章主要探讨设计师 如何从用户角度出发打造产品体验,通过设计帮助产品带来高溢价。

 

01、用户思维

用户思维最基本就是 围绕用户 去设计,帮助他们 解决实际问题。

Q:为什么要围绕用户做设计?

A:想将自己产品打造成为好产品,最终留住用户。

Q:什么是好产品?

A:“让产品自然生长,不要去碰用户,不要去打扰他们,让他们自然形成一种互动关系”。不要强塞东西给用户,切切实实的在用户需要的时候能快速给到他们价值,解决某个问题,或满足他们的情感,情绪。

即:帮助用户解决实际问题,并提供解决该问题的优秀设计。

所以设计师产出设计方案前需思考的是:

  1. 解决什么实际问题?

  2. 应该提供怎样的设计?




02、确定用户面临的问题点

解决哪些实际问题是每个案子的核心,在该阶段设计师常容易陷入误区

如:我要做 一个…东西、我要怎么怎么做……下意识的就去研究怎么做,而不是首要思考具体解决什么问题,该误区到后期往往会造成设计偏离。

为了避免该情况,首要需确定问题,并将问题清晰表述出来,表述的越清晰解决起来就越容易。

那我们应该怎么去确定这个问题呢?


– 利用同理性图谱构建用户认知

好的设计需要与用户心智相符合,贴合用户当时情境下的诉求。

为了让优化方案更有依据,在发现问题的时候,需要从用户视角出发,结合当前产品的页面去分析是否符合当前用户的诉求。

——可以采用 同理心图谱 的方式:

从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。


以下以优化案为例:

在实际优化案中,可结合需改版页面按照四个维度走一遍,可让设计师更了解当前页面帮助用户做什么,后续有哪些优化方向。

如:QQ支付页面整体流程优化设计

① 用户需给好友发红包,在输入完红包金额点击支付时,向上滑出了支付面板,用户看到这个面板时候,其心理活动可能是怎样的呢?

② 用户想要更换支付方式,点击更换后看到下方页面,用户对该页面的的感受会是怎样的呢?

③ 用户输入密码后,以为马上就成功了,却发现卡里没钱了,这时候用户更加迫切的是什么呢?

通过以上这样 【移情】的方式,使我们更能了解用户,在没有用户访谈的情况下对他们的 愿望、需求、诉求点 有个概念,当有了这个 共鸣 在后续就可以将这个共鸣变成一个有着明确优化方向的 问题陈述。


– 自问自答式推理逐渐确定问题

在挖掘用户需求点过程中,可以采用不断询问不断回答的方式,将自己脑子里想的直接写出来,通过这样的方式构建自己思考的逻辑。

如:“在下单页转化率太低 > 在下单页用户无法快速验证信息 > 在下单页重点信息不集中,其余信息太显眼 >…..”

在这个过程其实就是刨根问底的过程,在反复的试错过程中也会离真相更近。

类似下面这张Julie Zhuo的自我审视图:


03、问题陈述(POV)


– 什么是问题陈述

通过陈述句将产品当前状态(问题)和期望状态(目标)的差距描述出来。POV有助于我们强调用户痛点,保证自己将重点始终放在用户身上。


– 问题陈述怎么写

那怎么陈述才能更好的将问题及规划表达好呢?以下有两个方式:

  • 基于用户角度来说:我看QQ群里抢红包很热闹,我也想快速参与进去,但是轮到我发的时候,我因为我不是非常熟悉整个流程,导致我反应慢了,这让群里的人以为我故意这么慢才发,影响大家氛围,这让我有点沮丧。

  • 基于用户研究来说(4W):我们的初中生因为特别活跃,喜欢在群里踊跃发言参与活动,所以一旦群里有好玩的消息总是想第一时间参与进去。我们的解决方案应该 为他们 提供快速能够完成红包发送的链路与方式,不扫他们的兴。

以上两种陈述方式都是针对同一个问题,只是表述方式不同。所以只要你足够专注用户,理解他们需要什么以及为什么需要,就可以快速构建你后续的设计方案。


– 问题陈述注意点

① 用户与他们的需求是问题陈述的核心,避免:我们应该怎么做、产品应该…作为开头。

② 保持陈述的宽泛性,不要过早抛出细致的解决方案、技术限制等内容,避免团队发散受限。

③ 专注一点,不要让用户的需求和目标过于宽泛,导致自己很难找到一个合适解决方案。所以不要视图在一个问题陈述中解决太多用户需求,一次解决一个就很好了。


04、如何打磨设计方案

在经过问题陈述我们对要解决的问题了然于胸,在解决方案上,设计师需要考虑 易用性、易理解性、及着力提升用户任务效率,给用户一个更好的体验。面对不同的项目,可考虑以下几点:


– 结构简洁,重点突出

例1:


该例子非常能体现出 诉求 与 解决方案 的契合。

首先工作人员唯一的目的性就是 筛查 有问题的人,所以在众多人中需 快速判断,这个转化到设计上解决方式:

通过大面积的 色块直观反馈

通过实时的 滚动时间+滚动背景反馈真实性

在结合下方核酸与疫苗辅助判断,整体非常贴合实际诉求,重点突出,有节奏感。


例2:

通过体验核心信息,将内容合理布局,重点突出,操作划分明确,有助于信息获取与确定。


– 管理复杂(满足不同诉求)

人的认知资源有限,天生不善于处理复杂信息,所以在面对复杂信息时设计师需将复杂的内容以一定秩序逻辑管理,分而治之,减少用户的选择,让正确的行为变得自然和明显。


例1:

在58二手车页面的改版中,可以看出在面对不同用户诉求的情况下在 模块化结构 与 坪效 找到了平衡:

顶部按钮直接 分流 不同目的用户;

中间模块展示用户 最关心的维度:价格、品牌、车类型;

下方 透出推荐内容 吸引用户往下逛。


– 注重情感化

情感化不一定都是很精美的插画、动效等表现层面上的,有时候 贴心的记录、舒缓的内容、小游戏…… 也可以起到 情绪调节 的作用,提高用户看到复杂信息的 忍耐度


– 场景化设计(预判你的预判)

多考虑用户使用场景,挖掘一些场景是可以通过我们的设计 帮助用户多走一步,帮他们排除障碍,减少负担。


例1:

打车软件在特定时间点自动浮出目的地,以及截图后立刻打开微信聊天窗,图片自动在对话框中浮出的方式都是通过用户的行为预判了用户下一步的行为,


例2:

用户输入密码后下意识认为操作成功,但却被告知失败,对用户而言是一次打击,若这时直接前置化用户后续可能会的操作,将条路径重新接上,可以让整个过程更加高效。


所以在具体设计方案上,设计师需要不断的去思考打磨设计方案,让自己的设计:

① 显而易见的,让用户体验后觉得「没错,就应该是这样」;

② 有价值的,它为用户解决实际的问题;

③ 与用户的心理模型相符,它不意味着更多的设计。



05、验证体系

验证方式有很多,目前市场上有几大比较成熟的体验度量体系,针对不同的关注点进行 定性+定量 检测。

除去性能表现外,主要都是围绕用户行为数据及使用感受来进行度量

在行为数据上,主要关注:访问频率、留存率、页面访问次数…

在用户感受上,主要关注:满意度、用户评价、推荐度…



– 设计师怎么确定自己设计方案的验证指标

对于设计师而言,不需要做的这么全面,我们只需要针对我们 具体优化页面、场景 找到可以直接验证的指标即可。

例:

在上述的发红包支付页面的优化设计中,由于主要优化的方向是为了让用户更聚焦,提升整体支付体验,所以基于这个目的,我们可以以 整体的支付成功率 来验证大致优化效果;

其次,可以从 每个触点的转化漏斗、和 各页面停留时长 上分析具体页面改版效果。


– 面向真实用户验证设计

除去行为数据上的验证,用户真实反馈同样重要,我们可以采用用户调研的方式了解用户对产品体验的反馈,主要可以从下面三个方面执行:

① 可用性测试:可针对核心优化的功能点设定测评任务,来观察用户的完成情况,如:如果你余额不足,你会怎么做?

② 满意度测试:采用界面可用性问卷调研,可以采用SUS问卷收集反馈

③ 推荐度测试:通过NPS量表来衡量,通过将分值划分为:0~6分为贬损者,7~8分为被动者,分值高于8分为推荐者,带入计算公式(NPS值=推荐者% – 贬损者%)算出推荐度数值,数值越高,说明用户满意度越好,用户的推荐意向越高。


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

文章来源:站酷   作者:小发歌

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

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

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


红点奖作品揭秘,带你了解AI时代的可视化设计

ui设计分享达人



引言


随着AI技术在工业、交通、医疗、应急等to B、to G(政府)场景中广泛应用,呈现了今天“行业智能”遍地开花的局面。但在AI技术的应用推广中存在着一个普遍现象:AI技术复杂难以理解,和客户沟通成本高。其根本原因是:通常客户对技术了解有限,使得AI技术与业务场景应用间存在明显的信息鸿沟。

面对这些问题,作为设计师我们能做些什么呢?


对于设计师来说,我们的任务就是把复杂变得清晰简单而且美,所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法,把无形的、复杂的技术,通过有形的、可视化的方式展示出来,让客户更直观、清晰的感受到AI技术能力,看得懂其在业务场景中产生的价值。


下面我们就以“应急管理-森林火灾智能监测解决方案”为例,介绍下我们的设计思路。同时,我们的设计方案也得到行业认可,获得了2020年Red Dot Award国际设计大奖。

(1-2020 Red Dot Award)

(2-《森林火灾智能监测解决方案》)


正文


森林火灾等灾害一直以来严重威胁着人们的生命和财产安全,百度与国家应急管理部成立“人工智能联合创新实验室”,开展应用技术攻关,希望能结合AI技术,以辅助风险评估、应急管理决策等。

 

在森林火灾监测中应用到的技术有 “遥感影像智能解译、现场态势与舆情智慧感知、安全类视频智能分析、边缘计算+AI、5G+人工智能、监管与救援智能装备、区块链、深度学习等”,这些技术名词复杂难懂,怎么让没有技术基础的客户快速理解它们的价值呢?

 

接下来我们将从“转换视角,营造情景,信息可视”三个维度分享设计过程。


一、转换视角,建立共鸣


站在客户视角,聚焦客户关注的核心问题,通过情景把内容有序组织起来,快速与客户建立共鸣,有效降低内容理解难度。


1、离客户再近一些

在任何项目中充分了解目标客户都是首先任务。B/G端客户的需求是非常明确的,他们最看重AI技术对业务的价值。“客户”这个称呼的背后包含了诸多角色,有技术人员、业务人员、决策领导层等,他们对AI技术的了解各不相同,我们需要让各角色都能快速的理解、看得懂真正有价值的内容。


2、玩转业务

森林火灾监测是一个非常复杂的过程,监测诉求从全球到城市,从火灾全貌到火灾局部,监测场景包括火点识别、火情趋势推演、救援指挥等多个场景,影响火灾的地理环境因素包括危险源、居民区、水源、道路等,气候因素包括天气、风力、温度等,救援因素包括设备和物资等。

(3-思路框架)


3、产品架构可以不那么复杂

以业务逻辑为基础,客户需求为核心,聚焦技术可以带来的业务价值。我们搭建了一个覆盖森林火灾智能监测全流程的解决方案。它可以精准识别全球森林火灾并自动报警,全方位监测火灾数据,智能推演火灾蔓延趋势、自动规划救援路线、实时监控救援人员和物资情况,多维度智能辅助救援决策,满足不同机构的监测诉求,让客户从方案中感受到AI技术的强大。


转换视角,有序组织内容,使产品架构符合客户心理,让客户能快速的理解、看得懂。

(4-产品架构)


二、营造情景,构建信任


真实还原场景,营造身临其境的视觉感受,通过场景代入加强客户对技术的信任和深入了解的意愿。


1、身临其境的震撼效果

三维立体场景,不但能满足更多维度的数据呈现,同时给观看者带来身临其境、掌控一切的感受。利用3D建模打造接近于真实地貌特征的虚拟场景空间,在光影效果呈现上,模拟日光的光照效果,使场景更加真实。

(5-全球场景)

(6-国家场景)

(7-火灾局部场景)


利用晨昏线、雪线、绿地的变化,表现季节、昼夜对于火灾的影响。

(8-火灾受季节影响)


2、像电影一样的观看体验

通过鸟瞰、环绕、穿行等镜头把从全球、国家到火灾局部的多个场景串联起来,清晰表达空间关系,带着客户更自然流畅的逐步深入体验。

(9-镜头转换)


3、扣人心弦地氛围营造

通过色彩基调和烟雾等特效的处理,营造森林火灾和救援现场危急、紧迫的气氛,调动观看者的情绪,并留下深刻印象。

(10-颜色设定)

(11-紧迫氛围营造-1)

(12-紧迫氛围营造-2)

(13-紧迫氛围营造-3)


三、信息可视,清晰传达

提炼核心内容,借助图形化手段,让客户以最直观的方式理解信息,大幅度降低内容理解门槛。


1、大胆地隐藏冗余内容

面对庞杂的信息,去粗取精,提炼各场景的核心内容,避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂,还要严格控制文字长度,保证内容可以被快速扫描和理解。

(14-内容设计)


2、给产品一个稳定的布局

遵守人的阅读习惯,强化主、次信息;统计数据浮于场景之上,形成内容上的空间感,又保证较高的扩展性。统一各视图的排版规则,稳定的布局,能避免打断观看者心流。

(15-布局结构-1)

(16-布局结构-2-GUI)


3、场景设计

用可视化的方式,帮助客户解读、分析复杂的技术和功能。如在火灾实况视图中,把火灾地点、蔓延趋势、蔓延速度,植被、危险源、风向等转换为视觉语言直观展示在场景中,并通过扫描线、等高线和光感的设计,突出科技感,强化AI技术为现有业务带来的强大的、智能化改变。

(17-火灾实况-GUI)

(18-火灾实况-GUI)


救援路线一目了然,使救援调度清晰有序。

(19-救援路线)


救援人员、救援物资、救援进度实时呈现,救援指挥更加有理有据。

(20-救援现场)

(21-动态数据)

(22-动态数据2-GIF)

(23-动态数据3-GIF)


最终大屏展示效果。

(24-全球视图)

(25-国家视图)

(26-区域视图)

(27-单个火灾视图)

(28-火灾实况)

(29-路线规划)

(30-救援现场)

(31-多端展示-GIF)

(32-点亮工业智慧,守护百姓安全)


三、结语


AI时代,在to B/G行业的商业化道路上,如何降低AI技术理解门槛,提高企业和客户间的沟通效率是设计师面临的巨大挑战。设计师需要突破设计边界,将设计回归到解决问题的本质上,为业务赋能。在后续的设计实践中,我们将继续探索toB/G业务的设计创新,探索如何通过设计让客户以最直观的方式理解产品,构建企业与客户之间沟通的“架桥人”。

 

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

文章来源:站酷   作者:ROC393

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

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

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







设计师常用沟通秘籍:金字塔原理

ui设计分享达人

如何在很短暂的时间把你的建议和想法清晰的传递出去需要非常强的沟通技巧,那么今天和大家一起交流下我使用最多的一个沟通原则-金字塔原则。


什么是金字塔原理

    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01eecb61302dcd11013f4720911215.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
金字塔原理是由Barbara Minto创建的一种结构化思考方式,也是麦肯锡公司在用的重要工具之一。金字塔原理更多是一种逻辑呈现,很多的公司里面都会用到。也就是表达一个观点时候,根据以下三个步骤: 
1.首先从答案部分开始;
2.分组并总结你的支持论点
3.逻辑性的整理出你的支持性观点。
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        我们一起来看看如何在平时项目和设计中运用这个原理。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <br />
    </p>
    <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
        <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">先从事情答案开始</span> 
    </h1>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01c10a61302df711013f4720ed8c5d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        作为产品设计师,我们要以一种结构化的方式与那些忙碌的主管、领导沟通,就必须首先从高管关心的答案开始,然后列出你的论点,<strong style="outline:0px;margin:0px;padding:0px;">通过这种「自上而下」的方式表达出你的想法。</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        今天我们的很多设计师其实逻辑不太好,在产出你的设计方案和设计提案时,往往先讲很多分析,分析完了讲方案。然后得出结论,这个是大多数人的做法,这样做容易出现一个问题就是:有时候如果逻辑之间没有串联性,很容易牛头不对马嘴。举个例子,很多同学在讲作品集时候,很喜欢放一堆推导的过程,什么用户画像,人群特点,痛点等等一堆的观点,但是最后呈现的视觉方案往往和前面推导的过程相差甚远。推导的方向是ABC,结果设计稿是EFG,这样的结果就会显得你逻辑混乱。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/014a5661302e0411013eaf7036bed4.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <strong style="outline:0px;margin:0px;padding:0px;">按照金字塔原则,我们在表达一个观点时候-先从答案开始</strong>,当你主管提出一个问题时,你的回复应该是「我们应该做某事」,观点非常直接明了,只有这样,在你抛出答案后,我们才能提出对应这样做的理由。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01393661302e1311013f47201a7a5d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        为什么我们要从先答案开始?因为今天你和你主管沟通也好,和产品或者高管沟通也好,你要最大程度上运用好你的时间,这些领导都是大忙人,他们每天的行程非常满,没有办法听你在介绍一个项目从项目背景,人群等等维度去徐徐道来。如果你前面讲一堆他没有关注的内容时候,就会变得尤其不耐烦。所以这也是为什么很多同学在设计提案时候总是让人感觉啰嗦,因为<strong style="outline:0px;margin:0px;padding:0px;">你没有关注到对方想要重点看到的内容,你只是在表达,你觉得好的。</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        所以为了最大限度利用你和一个领导短暂的沟通时间,你首先要做的就是抛出对于这个事情的答案和建议。或许很多时候,<strong style="outline:0px;margin:0px;padding:0px;">领导可能已经心中对于这个事情已经有答案了,如果你们的观点一致,他会快速接受你的建议,继续到下一步,而不需要你从头到尾讲一遍。</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/0112e661302e2211013eaf70e11ab6.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        另一个很大的原因是,<strong style="outline:0px;margin:0px;padding:0px;">很多领导思考问题一般会从大局出发啊,会自上而下去思考,他们会把精力放到更高的点,他们不想太纠结于细节过程,他们在评审一个设计,或者一个产品功能时更多关注答案本身</strong>。然后再逐步了解细节,所以我们一定要学会融入这些主管思维模式。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01f6f061302e3511013eaf70e0c402.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        当你领导问你一个问题该怎么做时候?你直接丢出答案,会更加的有说服力和咨询。而不是开始寻找理由,或者各种犹豫,因为你一上来就回答了别人问你的问题。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <br />
    </p>
    <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
        <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">分类并总结出观点</span> 
    </h1>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01358761302e4811013f47202f397d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        前面我们抛出了我们的答案和观点,那么接下来我们就要分类并且说出能够支持你结论的理由,一般我建议以3个论点去阐述,为什么是3,大家可以看看之前我写的《设计师常用的思考秘籍:三的法则》。阐述的时候,参加会议的人或者领导自然而然的会把你的论点和想法归纳总结,同时也会更容易记住。这样去表述观点,会让你整体的方案更加容易被接受。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/0129f061302e5311013f4720fb9b7d.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        我们来举个例子,你的主管问你,你觉得苹果的设计为什么好?那么你可以先抛出答案:因为苹果的设计很简约,非常易用,让用户感觉很贴心,同时它的设计很好将商业和美完美的结合。具体的表现有三个:
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        第一个简约,苹果的设计非常现代,简单的线条,白雪的设计语言,让苹果系列产品非常具有识别性。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        第二点苹果设计没有过多装饰性设计,每个设计都会让你感觉很贴心,比如根据光线,自动调节屏幕,时钟会随着时间而变化,系统会根据时间调整颜色等等。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        第三点苹果的设计很好的将商业价值最大化。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        那么你从上面几个维度去和领导沟通,就能很有说服力,你上来就给出了答案,同时还分组的阐述了你的论点。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01752861302e6211013eaf70ce9e40.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        再来一个案例,比如可口可乐出了一个新的茶品牌,融合植物、茶淬取物和其他健康成分。所以他品牌设计是个绿色,假如今天你在和领导提案时候,领导问你,为什么要选择绿色作为品牌设计?
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        你是不是可以这样回答他:因为绿色能给人自然,环境,健康的感受,具体表现有以下三个方面:
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        1.从色相情感表中选择绿色也是自然健康的代表,用户会第一时间感知到。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        2.同时绿色也和新鲜环保概念能很好的结合。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        3.我们的配料也是从绿色植物里面提取的。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        当你分组并总结你的论点时候,能更容易把你想法传递出去,并且让人很好的理解,逻辑性的归纳总结你的观点。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01cdd061302e7911013f47202efda1.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        金字塔原理在做设计提案或者作品集时也非常有效,我们会经常去说产品问题有哪些,然后得出我们的设计目标ABC,然后利用金字塔原因,我们根据设计目标A得出设计方案A,根据设计目标B得出设计方案B,根据设计目标C得出设计方案C,这些方案之前有关联关系,有互相映射的关系。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        很多同学容易在这一步出现问题,设计目标是ABC,设计方案却是DEF,完全没有关联性。还记得我之前和大家分享的,<strong style="outline:0px;margin:0px;padding:0px;">今天你在阐述一个观点时候,一般可以基于三个点去表达,第一个点一般是最主要的,根据重要程度,最重要到次要逐步呈现。</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <strong style="outline:0px;margin:0px;padding:0px;"><br style="outline:0px;margin:0px;padding:0px;" />


金字塔原则在生活各处可用

    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/0155af61302e8e11013f4720a158d7.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        比如写作上,很多人问我平时写作有什么方法么,其实很简单就是运用金字塔原理,比如我想写一篇关于鲁班取代设计师文章,那么怎么去写:
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/019a7161302e9a11013eaf7041a5d8.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <strong style="outline:0px;margin:0px;padding:0px;">1.先抛出答案:</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        鲁班不会取代设计师,取代的只是重复性的设计,设计创意和设计理念不会被取代。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <strong style="outline:0px;margin:0px;padding:0px;">2.分组并总结出支持你观点的内容</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        比如观点一,设计理念是机器无法去做的,设计文化,设计历史这些有文化传承的内容,举例说明。观点二,有创意是设计无法取代,比如很多创意广告这些,这些需要大量脑洞等等。观点三,重复性的工作会被去掉,所以设计师要把精力关注到设计创意和设计理念,设计思维层面上。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <strong style="outline:0px;margin:0px;padding:0px;">3.设计总结</strong> 
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        那么根据上面那些观点,得出我今天文章想传递的三个观点:
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        1.鲁班不会取代设计师,反而会减轻设计师压力,帮我们解决重复性设计,我们可以把精力放到更有价值的设计上去。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        2.设计师要把价值放在产品体验上,产品问题,使用不顺畅这些是设计师可以发现,机器无法发掘的,我们需要去洞察用户,做出好的设计驱动业务。
    </p>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        3.重点多花精力在设计理念和设计创意上。
    </p>
    <h1 style="outline:0px;margin:0px;padding:0px;text-align:center;">
        <span style="outline:0px;margin:0px;padding:0px;font-size:24px;">最后</span> 
    </h1>
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;font-size:16px;line-height:32px;text-align:justify;">
        <img src="https://img.zcool.cn/community/01affa61302ea911013f472023a554.png" style="outline:0px;margin:22px auto 0px;padding:0px;max-width:100%;display:inline-block;" /> 
    </p>
了解一个事物的结构,可以帮我们反思并且发现一些问题漏洞。这也是为什么我推荐设计师一定要学会金字塔原则,因为今天 我们在做产品的过程中,首先要建立共识:我们的产品主要解决什么问题?为什么应该如何去解决,怎么判断优先级?我们的解决思路是什么?数据上有什么问题?这些问题都需要我们去提前思考。同时金字塔能够帮你了解更多你不知道的事情,并且得到很多设计验证。 
    <p style="outline:0px;margin-top:0px;margin-bottom:0px;padding:0px;color:#666666;line-height:32px;text-align:justify;">
        <br />
    </p>
    <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:0px;caret-color:#333333;color:#333333;white-space:normal;font-family:-apple-system, BlinkMacSystemFont, &quot;text-align:justify;outline:0px;padding:0px;">
        <span style="box-sizing:border-box;color:#666666;">蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。<br style="box-sizing:border-box;" />


文章来源:站酷   作者:我们的设计日记
    <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:#525252;font-family:&quot;background-color:#FFFFFF;text-align:justify;">
        分享此文一切功德,皆悉回向给文章原作者及众读者.
    </p>
    <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:#525252;font-family:&quot;letter-spacing:0.1px;background-color:#FFFFFF;text-align:justify;">
        免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
    </p>
    <p style="font-size:16px;box-sizing:border-box;margin-top:0px;margin-bottom:1rem;white-space:normal;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;background-color:#FFFFFF;text-align:justify;">
        <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height11111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#0C386E;transition:all 0.5s ease;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">界面设计公司</a>,为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration:none;color:#886353;transition:all 0.5s ease;padding:0px;margin:0px;background-position:0px -60px;">平面设计服务</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
    </p>
    <div style="font-size:16px;">
        <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height11111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />




</div>



交互设计师该如何高效地分析问题

ui设计分享达人

一. 明确和理解问题

明确和理解问题就是要看透这个问题的本质是什么,明确要解决这个问题可以用到的资源都有哪些。

理解问题的重要步骤:1.问题痛点梳理;2.产品功能流程图梳理;3、用户画像分析;4.数据分析(热力分析、留存分析、事件流分析)


二. 拆分问题

拆分问题就是问题痛点的出现核心问题,拆分问题涉及的维度的关联性拓展有哪些。

拆分问题的重要步骤:1.用户的核心行为路径分析;2.功能头脑风暴;3.解决方案的探讨


案例:配送管理的业务组件【打印交互组件重构】

【背景】

配送的打印功能主要服务于行政管理人员,每天对配送模块的订单和司机管理,进行打印操作,打印前会频繁配置不同打印需求

【现有问题】

1、满足功能上,体验上缺乏引导,导致用户学习成本较高;

2、历史包袱,随着功能需求不停迭代,功能层级划分混乱,导致用户操作理解时间成本较高;

【前期准备】

理解问题模块—问题的梳理:

交互上:操作复杂,交互组件错误使用,体验感差,难用

功能上:功能臃肿,层级划分混乱,难理解

【理解问题模块—功能流程图梳理】



【解决问题模块—数据分析(热力分析、留存分析、事件流分析)】


1.热力分析(GIO)

配置的需求基本上30天数据反馈可以看出,没必要进行“配置页”为主路径。


这里可得出:是否存在每次打印设置的需求,为以后的交互迭代提供快捷配置的可能性。


2.拆分问题—用户的核心行为路径分析:

主路径:查看列表——批量打印——打印完毕(80%)



特殊:查看列表——批量打印——设置模版——打印完毕(20%)



3.拆分问题—解决方案的探讨:【核心:以人为中心 解决问题】

交互上:操作复杂,体验感差,难用

功能上:功能臃肿,层级划分混乱,难理解


【功能层:功能梳理重组】

【交互层:信息关联】

1.交互关联性更强,现在是联级反馈,解决点击一级内容不知道二级内容的编辑的可视区域;

2.功能信息更直观,布局界面可看出功能逻辑,勾选后及时反馈,解决经常忘记勾选打印的选项;



【方案输出】

方案一:配置页的构想,假设在设置模块有单独承载打印配置的区块,而当前对话框的勾选内容是便捷选项,如需要更深设置,需跳转到打印配置区块

方案二:列表的打印功能添加,全局设置,与当前对话框选择设置进行协助配置,如:列表全局的打印功能设置“不再弹出窗口”设置,点击当前的对话框,是直接打印操作


【可用性测试】

采用行为观察法。


【迭代成果】


       迭代前                                                                      迭代后




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

文章来源:站酷   作者:麦海欣

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

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

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



从视觉、交互和技术三个方面浅析2021设计趋势

ui设计分享达人

一、社会背景  Social Context


2020年因为疫情,让协作、云端、即时通讯、远程会议、AI智能等等,成为了远程办公的必需品。目前,疫情在国内已经获得了控制,后疫情时代已经到来,许多最初没有的习惯,在发现新的工作模式更加有效率后,也即继续保留了下来,这些保留下来的习惯,也将在2021年会更进一步的发展。



1.大厂的变化

在视觉设计层面,个大设计语言陆续推出了新的设计版本,更为突出个各自设计风格,以建立自己的视觉护城河,谷歌发布了 Android 11,Apple发布了 IOS 14,微软持续宣传他的 Fluent UI 设计理念,在国内的办公领域,腾讯文档推出了类似 Fluent UI 设计理念风格,石墨文档依旧保持独特的东方韵味,飞书发布了飞书文档,继承飞书本身简洁的 UI ,以及活泼的插画风格。


谷歌的 Aandroid 11 

基于 Material Design 设计的 Android 11 ,装饰上运用简洁的几何图形,UI 细节上开始趋向圆角的运用,色彩方面选择了更为协调的配色,对比之前版本纯度有所降低,显得更为高级。视频链接:file:///Users/javascript/Desktop/0bf2miadcaaa7eamerkc6fqfaywdgfraamia.f10003.mp4


苹果的 IOS 14

UI 设计延续原有的风格,清晰的字体,大圆角的运用,加上丰富的动态效果,并且新增了许多贴心的新功能,例如悬浮播放视频、主屏幕的Widget。


微软的 Fluent UI

这是微软为跨平台,而提出的设计解决方案。支撑设计概念的关键词有深度、材质、动画、光线等等,这听起来感觉与 Material Densign 特别相似。不过在最终的视觉呈现上微软会更接近于真实世界。例如,透明的毛玻璃效果,或更为立体的图标等。


2.社区中的热门设计

Behance 和 Dribbble 在2020年出现了许多以 3D 插画为主视觉的设计方案,因为技术的发展,设计师借助 Figma 或 Dimensions 就可以轻松的创作所需的 3D 素材。关键的这不是设计方案中的“花瓶”,因为在Mac的最新系统 Big Sur 中,已经开始运用了 3D 的图标,相信在以后的 3D 的运用场景将会不断的被挖掘出来。


2020年初时在Dribbble流行起来的一个风格叫“新拟态”,这是将投影运用到极致后出现的效果,正如作者所说的:让我们想象一下,如果在移动界面设计中,投影的形式发展的更好的话,那将来的界面将会是什么样子的,这是我的愿景”。新拟态在视觉上表现确实很惊艳,为此Aandroid还制作了一个新拟态的12宣传视频,但是主观感觉这应该很难广泛运用到实际产品当中。



二、UI设计 User Interface


1. 设计服务与内容

设计专注于表现内容,这是从包豪斯到现在一直遵循的规则,而这个理念也将会持续下去。设计目标终将是需要把关键信息传达到用户手中,让用户知道自己为什么在这,这里有什么,并且能到哪里去。


技术的发展,形式也一直在发生变化,提升信息传达效率,这已经不单是平面设计专属。学会运用动效,交互或智能推荐等综合的方法,来达到设计目标,会是将来常用的设计手法。


2.更大的圆角


在以前由于屏幕分辨率太低,窗口四角正常会运用直角,因为圆角会出现锯齿或者模糊,影响界面美观。而现如今移动屏幕质量早已超过纸媒的印刷技术,圆角也开始被广泛的运用。另一方面圆角在之前的认知中,是儿童的专属,是更为亲和力的表现形式。而经过几年的发展,这个偏见正在慢慢改变,因为圆角也可以做的很高大上,也能设计的很潮流。


苹果总是第一个吃螃蟹的公司,Mac 的最新系统 Big Sur 整体变得更加圆润,窗口四角从以前的 10px 增加到 20px ,并且全新的控制中心也沿用了 IOS 14 的设计风格和设计布局。值得在一提的是,微软 Win 10 的概念稿中也开始尝试运用起了圆角。所以这个趋势是蛮值得关注的一点。



3.用有含义的插画提升用户体验


设计师常常会陷入形式主义,而忽略了本该表达的内容,特别是在插画上。也许这个道理每位设计师都懂,但为何还是会前仆后继的扑倒在自我满足的陷阱中呢?也许原因中会有一点是,当内容过于直接表达,或者元素过于普通,就很容易让作品变得毫无趣味,这就是矛盾所在了。


那如果设计师既不想脱离内容,又不想设计出乏味的设计,怎么办?这就需要让插画具有含义,而不是沦为纯粹的形式。优秀的插画多承载的信息量,能够远比文字或界面UI来的丰富。



4. 新材料新拟态


包豪斯有个教学目标,“培养感觉清晰,认知准确的设计师”。因此在包豪斯的基础教学中,会让学员研究各种材料的不同属性。在 UI 设计当中,我们也能制作出各种各样的材料,在拟物化的时代就能证明这一点。但在 2020 年初时,当某位设计师发现了一种新材料,并把这种材料运用到了 UI 设计当中,一时间火爆整个社区,这就是上面提到的“新拟态”。 



这世界是充满可能的,所以我相信在未来还会有更多的材料会被发现,或者被以新的方式使用。例如,在 2020 下半年又有一种风格开始回归“毛玻璃”,其中我们所知道的钉钉,在钉钉 6.0 的设计概念中就融入了毛玻璃的效果。在社区中,毛玻璃也被运用到 UI 的各种场景中卡片、弹窗或图标等。实话实说,毛玻璃的材质的确能增加许多品质感。 



5. 自然的界面和运动效果


这里所说的自然,是能让人感到熟悉和安心,是以人为本的设计。王敏老师说过:“科技求真,艺术为美,设计从善,设计可以作为结点,让真善美实现统一。”链接人与产品之间的纽带是 UI 界面,它需要承载不仅是信息内容,还有用户体验,因此,以人为本的设计终会赢得用户的喜爱。


自然运动效果,不是那种大开大合的炫酷效果,而是让界面过渡更为自然合理。想要让界面体验更为自然,那必然要遵循真实世界的物理规则。例如,重力、摩擦力、向心力、浮力等动态效果。



6. 来自未来的风格


科学技术的快速发展,让我们感觉未来近在咫尺,但又十分迷茫不知何去何从。我相信承载UI的媒介,必然不仅仅是现在我们所使用的各种设备。VR、AR 或全息影像等技术发展,将使得UI设计会有更多的可能性。赛博朋克2077也许真的离我们不远,那种满世界无处不在屏读的社会,怎样的设计才能真正满足需求呢?这是我们需要长期思考的问题。



7. 深色模式


在2020年各大厂都推出了暗色调模式,这已成了如今APP的标配。除了深色模式外,以后还会在可视性、场景和现实成本等因素方面,更近一步的打磨。




三、插画风格  Illustration


1.更具装饰性的平面插画风格


虽然在 2020 年不管是社区,还是实际项目,许多设计师都开始热衷于 3D 插画,就连苹果微软也不例外。但是 Google 却继续坚守自己的设计风格,扁平的装饰性插画,例如 Android 11 就运用简单的几何图形进行装饰,相关的插画也是更多运用的扁平风格,这种坚持必然会有其重要的原因。


装饰性插画在各种屏幕的适配性更广泛,并且在绘制成本和实现成本方面也会更有优势。在屏幕媒介还没发生颠覆性改变前,我认为扁平的装饰性插画在未来将还会大放异彩。 


2.情感化的插画设计


后疫情时代的远程办公,我们需更加考虑如何缓解合作的疏离感。如何拉近人与人之间的协作,打破远程的空间桎梏,让合作更具沉浸感。这时情感化的设计就能充分体现它的价值,例如,这几年开始火的 emoji 头像,或者各种表情包,它们让沟通的双方产生情感共鸣,而不是面对着冷冰冰的屏幕。


3. 插画的组件化与创新


皮克斯运用技术的创新,提升了质量和效率,从而改变了整个动画的历史。对于我们来说,未来的插画需求会越来越多,并且还要求独特的创新性,这就需要有更优的解决方案。


Ant Design 的 HiTu 在 SEE Conf 的时候提出了解放图形化生产力,那就是将插画各部件组件化,这有效的提升插画效率。然而在插画库的维护方面,还需要设计的创新。因为效率的提升,让设计师能有更多时间,专注于更有创造性的工作,然后将新的创意理念融入部件,最终完善整个插画组件库。 





四、交互方式  IInteraction


1. 多屏协同办公


凯文凯利在《必然》里讨论了关于未来的生活方式,他认为我们的未来环境会充满各种屏幕,它将会在各种事物的表面出现,屏读会从我们起床开始到晚上睡觉,一直出现在我们视野中。如今的人们每人都有各种各样设备,因此,多屏协同办公是必然的趋势,不管你是与人合作,还是独立工作。


万物互联已经是很久的话题了。在 2020 年华为的鸿蒙系统,发布了跨设备进行的分布式交互,实现了多屏协同。我感觉,这将是很重要的一步。 



2. 秒验身份认证


身份认证是信息安全最关键的一步。我们通常会用身份 ID 加密码进行登录,并且为了验证你不是机器人,还会加上人工输入验证码,如果再有其他的设置选项,那我们的登录交互就会被拉的很长,有时还会出现登录失败的情况。在如今浮躁的社会,许多用户也许在前几步就已经失去了耐心。 


移动设备拥有有丰富的传感器,并且精度也在逐年的提高。随着指纹、面部、虹膜等等技术成本的降低,这些技术也开始越来越普及化。如今使用新的识别技术,很轻松就能完成各种身份认证。 




3. 单手交互的挑战


当年乔帮主一直坚持的单手操作,而如今,手机屏幕逐渐越来越大,单手操作已是一种奢望。为此,各手机品牌想方设法的改变交互方式,为的就是能实现单手操作,并且为此作为宣传的噱头。iPhone 轻点两下 home 键或向下轻滑虚拟 home 键,就能让整个内容向下移动半屏,从而方便单手操作顶部功能。 


想达到目标的第一步,就是办法让拇指能触及到功能。但我们还需要进一步思考的是,拇指本身的灵活性并不高,并且也只能是单点触控,那怎样的交互形式能满足日益复杂的交互需求呢? 





4. 折叠屏

屏幕可拓展,将会是移动办公的重要转折点。不管是需要长篇编辑的文字,还是画板无限大的表格,或者是需要强大美化功能的演示,这都需要足够大的屏幕才能有更优的体验。折叠屏的出现让手机能代替平板,满足更多使用场景。折叠屏目前由于成本的原因,在大众眼中还属于新事物。但我相信成本在未来不会是问题,更重要的问题是,屏幕形式的变化,对于交互来说将会有哪些影响,并且如何挖掘其中真正的潜力。



五、技术升级  Iechnology


1. 关注隐私保护


自 MIUI12 隐私功能发布后,APP 访问隐私频次大幅下降,这使得应用的行为越来越规范,也因此获得了用户、国家相关机构和媒体的认可。 



在凯文·凯利的《必然》中描述了这样的一个未来景象,我们的各种状态将会被设备所跟踪,大到你的地理位置,小到你的心跳,你所经历的一切都将被上传到网上,设备能通过对过往的分析,给你推荐各种商品或服务。这很美好,但同时也存在许多风险。在《窃听风云》的电影情节中,就是由于先进的窃听技术,造成了各种无法预估的灾难。所以这是一把双刃剑,在技术进步的同时,我们也需要时时刻刻关注隐私的保护。 




2. 智能自动化办公


在 2019 的 Google I/O 大会上,Google Lens 展示的 AR 点菜功能可以智能识别用户扫描的菜单并将美食网站上的相关推荐直接呈现在屏幕上。当识别到小票信息时,可快速提取小票上的金额,且可自动弹起计算器快速帮助用户计算人均消费,节省人工计算的时间成本。 



在办公场景下,如何帮助用户减少无谓的工作,让更多精力专注于内容。把排版规范、素材提取、文件管理、功能查找等琐碎的事情,交给人工智能来完成。在以前工业时期有机器的赋能下,人们的生产效率进行了一次飞跃,而下次的效率提升将会是人工智能。 




3. 脑机

是否希望自己学会“量子阅读法”呢?也许 5 分钟实现十万字快速阅读不是梦。Neuralink 发布了 Link V0.9 版的脑机接口,并且已经在动物上进行实验,他们通过把一块微芯片植入猴子的大脑,然后让其通过意念玩电子游戏。虽然这产品在人类普及的概率几乎为零,但是这也算是人类向前迈出了一大步。 



这只是一个开始,未来的设备将不局限于可穿戴,而会是与人体紧密相连。或许可以想象一下,在未来人们会像在医院预约挂号一样,在科技公司楼下排队更新升级身体里的“机械器官”。 



4. 虚拟现实&增强现实


如果要说接下去哪个技术变革,将对我们生活工作产生重大影响,我认为将会是 VR 和 AR。在沟通方面,体验将会变得更为真实。远程沟通常常效率很低,其中很重要的一点是空间的距离感,而空间的距离会产生双方链接的不稳定性,因为双方无法达成眼神、肢体等信息的交流,有时候一个眼神或者动作就能完成的事情,需要反复的语言交流,甚至会陷入各种尴尬的境地。 



除了沟通之外,在工作、生活、学习等领域,VR 和 AR 也将会有更多可能,媒介的属性不再是二维平面,而是三维空间,这使得它能提供更为沉浸式的交互体验。 



5. 5G 运用


依稀记得上大学时 4G 时代的到来,旁边的人都在说网速多快多快,听歌看视频一点都不卡。 


而如今 5G 开始普及,网速也再次提升,但外界对其的评价褒贬不一,其中最为常见的话题就是“5G 对我们的生活将会有什么改变呢?”,有人觉得它只会提高我们每个月的话费,也有人提出 VR/AR 全景直播、高清远程会议、无人机作业、自动驾驶等技术将会更为成熟。


不管如此,5G 在 2020 年度过各种坎坷,最终普及到我们每个人身上。5G 对许多领域都会有质的影响,特别是依赖网络环境的场景。其中就有办公领域,大文件上云、协同办公或远程会议,5G 将会给这些场景提供更好的体验,也会让更多可能变为现实。 



这篇文章是对当下的思考,也希望能对 2021 年的工作带来些许帮助。在这过程中越是总结,越是对未来的趋势感到迷茫,一篇文章并不能囊括所有内容,不足之处也希望理解。在未来或许会有数不尽的黑天鹅,也可能因为技术爆炸,使得新的潮流突然的兴起,未来是无法预测的,所以,就让我们一起拥抱变化吧~


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

文章来源:站酷   作者:篮子瑶

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

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

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


如何与利益攸关方合作进行医疗设计项目?

ui设计分享达人

一些有用的建议和工具帮助你与患者、医生、医院管理人员和其他医疗保健利益相关者一起进行设计。

近年来,医疗保健组织开始使用“设计师”方法进行创新,以提高患者和护理人员在设计和提供医疗服务的参与度。然而,将设计方法引入医疗部门也是困难重重:思维方式的差异可能导致双方关系紧张,同时我们仍需要提供更多的证据,证明设计实践会给医疗保健部门带来更多的价值。


1.调整所有人的目标


在处理服务设计项目时,无论是参与式还是共创式,我们需要从一开始确保所有利益相关者的目标和期望一致,以促进合作顺利有效,产生有意义的成果。


所以我们可以用到Expectation Map或者the Alignment Canvas这两个工具可以帮助理解人类的愿景和优先排序,从而使团队对项目的理解同步起来。


这两个工具在项目初期调整成员目标,构想用户对服务的期待,建立同理心,全面地呈现了不同的观点。


这个工具包提供的帆布是个简单的表格,帮助确定每个涉众的价值和目标,突出公共点和交叉点,利用不同角色不同价值的可视化卡片填充画布。


建议

-每个利益相关者可以从卡片中选择自己的价值观或添加价值观,讨论相同点和冲突点,制定共同目标。
-如果项目涉及三个以上的利益相关者,可以采用相同的概念模型来反映所有价值观和共同点。


2.了解项目生态系统


医疗服务中有各类行为者,行为者之间以及行为者与用户之间存在特殊的关系。因此,我们必须清楚当前设计服务的影响人,以及影响程度。


使用利益相关者地图反映不同行为者的角色和责任,以便更清楚地了解你正在设计的服务生态系统。


利益相关者地图不仅有助于可视化服务系统和用户体验中的不同利益相关者,还可以可视化相关者与主要用户的互动程度。这个模版将医疗领域的利益相关者分为三类:医疗经营者,辅助人员和大型病人群体。


建议

-将代表主要用户或利益相关者的行为者卡片放在中心位置。
-将行为者卡片按照利益相关者群体进行分类,并将卡片放在画布的相应区域。
-将那些与主要利益相关者互动程度较高的行为者放在内圈;除了医疗系统外,还要考虑的更广阔的生态系统。


3.反应不同的用户类型


研究项目背景,收集服务生态系统中人们的行为、动机和特点等第一手资料。构建角色有助于更好地了解设计医疗服务中的病人和医生(或其他医疗经营者)的需求、习惯和态度。


为了更好地促进这一阶段的分析,工具包中的角色模板记录了病人和医生简历上的一些具体的医疗信息,如疾病类型和医疗知识。


建议

-对于病人角色,首先选择病人和疾病类型。
-对于医生角色,首先选择医生简历,记录痛点。
-利用卡片,选择与角色互动的环境和行为者,喜欢的互动渠道,价值观和经历的情感。


4.分析经历 构想更好的服务流程


我们都清楚,用户旅程是一个强大的工具,能够绘制服务体验,包括现有服务和待设计的服务。


我们也可以与病人或医疗行业的其他利益相关者共同绘制用户旅程,建立对用户体验的理解。


你也可以直接与利益相关者合作,确定具体痛点和在服务中可能造成摩擦的其他因素。


这套工具所建议的医疗旅程图可以用来分析病人和/或医疗操作者的体验并进行可视化,涉及到体验的所有成分:角色,行为,方式以及在接受或执行医疗服务时所经历的感情变化。


建议

-写出用户旅程地图需要的人物简历。

-卡片用为触发材料,促进病人和医疗相关人员分享经验,讲述故事。

-选择每个动作所经历的情绪,并将其垂直投射在相应的动作上。

-患者的用户旅程可以按照整个治疗过程绘制,有助于理解不同医疗步骤之间和相关部门之间的交叉点,以及可能出现的问题,形成一个全面的体验观。


5.通过评估 确定想法的优先性


在建立背景框架,分析了观点和体验之后,我们开始设计解决方案。让不同的利益相关者参与概念生成,方便作出改变或促进相关方接受新服务。


一旦确定了解决方案,接下来就要挑选最有潜力或最合适的解决方案,这项任务也十分困难,尤其是在复杂的环境中,比如与医疗有关的环境中。

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

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

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

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

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


设计沉淀录:如何让你的设计更有价值

ui设计分享达人

前言:如何让你的设计更有价值,设计有价值代表你的方案有价值,你的方案有价值代表你的理论有价值、你的理论有价值代表你的专业能力体现,归根到底,说明了什么人作出什么样的作品的同时会带来相应的价值。站在设计师的角度看,在公司里,属于站在用户体验上的提出的设计建议或者设计方案,基于“以用户为中心”理念和交互设计原则,通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。

目录:

一、设计行业的发展趋势

a)设计与产品的关系

b)找到自身价值的重要性

二、了解设计师的价值分层

a)设计协同

b)推动业务增长

c)设计驱动产品

三、设计师需要具备的哪些思维?

a)双钻模型解决问题

b)“五度”设计成果评估模型

c)培养数据思维,利用数据提升设计的价值


一、设计行业的发展趋势

a)设计与产品的关系

以前,设计师在团队里的位置会比较尴尬,因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临,设计的价值变得显性化,作为与用户关系密切的设计师,善用好数据,可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力,为公司创造更大的价值,不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切,是整个行业发展的必然趋势。


举一个设计以小成提高业务的实例。这是我之前做的分拣软件迭代首页的自定义配置组件。在改动前分拣首页功能多,甚至有时候需要滑动寻找。寻找点击率大概是不到16%,改动后提高到了40%,不消耗任何其他人力、物力成本,就可以用设计让CTR翻倍。

设计目标:减少首页模块寻找的时间,加大成功点击率,考虑延展性发展

现有问题:主次功能混淆、视觉点不够集中、点击按钮不明显

优化方案:1、主次布局调整,主上次下;2、面积放大提高模块命中率;3、色彩区分主次按钮;4、添加“➕”自定义配置首页主功能,加入人性化设计理念。

体验连接:https://www.growingio.com/projects/lPQ7bOj9/product-analytics/heatmap/j9yvlyRy(账户/密码miaomiao/liuge1)


b)找到自身价值的重要性

自身价值顾名思义就是你的工作成果会带来什么价值,按照公司更看重我们的设计能给产品的发展带来多大的价值。虽然职位的性质已经很明确你的价值的体现,但是这里注重成果的价值,设计师的成果更多是设计方案,方案成果的价值的接受度也是需要从易到难的渐进的。


举一个设计价值体现的实例。这是我之前做的新Station组件库——GM Design。设置组件和设计规范不仅保持了产品的统一性,且减少用户在使用过程中的行为认知负担,快速同事达成合作,还可以减少不必要的操作和排查,提高易用性。

设计目标:保持产品的统一性,减少认知负担,降低时间和人力成本,提高易用性

现有问题:同个功能存在组件多样、组件学习成本高、反复修改,

优化方案:1、建立组件库;2、功能类型划分,采用同一个组件的变形处理;3、组件集中化; 

体验连接:https://lanhuapp.com/url/rKmeX 


二、了解设计师的价值分层

设计师的价值可以分为以下三层:设计协同、设计推动业务增长、设计驱动产品。

a)设计协同

一个完美的执行者,能够在拿到需求后高效又完美地实现落地。简单地说就是手上功夫好。

做好这个阶段需要有优秀的专业能力,良好的沟通能力,并参与到产品的探索与构思中来。


举一个设计协调的实例。Q2阶段的B-Shop商城交互迭代。前期输出设计基础和设计规范,有助于开发高效实现,实时跟进UI进度和设计协助。在产品的探索中发现数字键盘组件的问题点,由于自己写的数字组件具有局限性,导致体验上无法满足部分需求,如:输入框的定位在数字键盘之上。基于这个问题点,我们提出A/B方案,A方案是自己写的数字组件,B方案是自己写的数字组件延用原生的逻辑,从用户测试得出,A方案是更符合用户操作习惯。

设计目标:组件高效快捷输入,侧重交互体验提升,视觉优化,提高易用性

现有问题:学习成本高、缺少设计基础、信息分层不明显、体验差

优化方案:1、划分主次信息,阅读更直观;2、建立设计规范;3、组件优化,符合用户操作习惯;4、图文结合,按钮优化,加强页面指导性

体验连接:https://bshop.guanmai.cn/?cms_key=miaotest&timestamp=1561085945884#/product(账户/密码miaomiao/1qaz2wsx)



b)推动业务增长

这个阶段的设计师,会比上一个阶段更能体现设计师的设计价值,并对产品产生一定的影响力。能在以用户为中心的基础上,推动业务的增长,所以这个阶段的设计也被称为UGD(User Growth Design)。


需要设计师具备用户洞见力,数据分析能力,从这两个维度出发,去熟悉业务、分析业务,从而推动业务

举一个推动业务增长的实例。Q2阶段的采购APP的交互迭代。表头的功能布局与标签栏的“➕”添加功能的调整,其实在用户调研阶段的热力图数据和观察法分析得出,工具类移动端侧重点在功能区,需要一目了然知道我的当前任务数是很重要的信息,且是高频操作,所以放置顶部;标签栏的添加功能是为了快速添加采购单据和询价为目的,用户群体特殊性,需要一键新建添加的需求。

设计目标:侧重交互体验提升,提高工作效率,提高易用性

现有问题:学习成本高、缺少设计基础、操作路径长、体验差

优化方案:1、操作路径简化,采用路径集合弹框;2、建立设计规范;3、组件优化,符合用户操作习惯;4、一键新建“➕”的功能,达到快速新建

体验连接:http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login(账户/密码zhangsan0001/ liuge1)



c)设计驱动产品

这个阶段的设计师,在团队中的价值可以说是非常大了。从被动的需求接收方,转化为从战略层,能主动提出需求的一方。也是UXD发展的终极方向。


三、设计师需要具备的哪些思维?

a)双钻模型解决问题

什么是双钻模型?

双钻设计模型由英国设计协会提出,该设计模型的核心是:发现正确的问题、发现正确的解决方案。一般应用在产品开发过程中的需求定义和交互设计阶段。


双钻设计模型把设计过程分成4个阶段:发现问题(挖掘)、定义问题(创意)、构思方案(制作)和交付方案(落地)。



采购APP进行双钻模型思维构建的基础,提供交互迭代的底层设计理论支持,在挖掘需求阶段,属于用户调研阶段;创意阶段,关注点在于问题梳理、实现目的、设计层面;制作阶段,寻找潜在的解决方案;落地阶段,解决方案的分析和验证,输出最适合一个。


b)“五度”设计成果评估模型

用户体验周期(由阿里巴巴UED提出概念)


用户体验周期指的是用户与产品的关系随着时间变化而形成的不同周期阶段。用户体验周期可以分为「当前」和「长远」两个阶段,每个阶段中有不同的细分。

  • 「当前」阶段,分为 3 个过程:

    • 触达:用户来访问网站,包括第一次访问网站的新用户和再一次访问网站的老用户;

    • 行动:用户在网站上进行相关操作;

    • 感知:用户在操作完成后对产品形成的主观感受。


  • 「长远」阶段:分为 2 种表现:

    • 回访:用户自己再次使用该产品;

    • 传播:用户推荐给其他人使用该产品。


如何在具体项目中体现呢?下图,运用一个具体项目举例:

c)培养数据思维,利用数据提升设计的价值

项目与需求上线后,去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较,没有比较就不能进步。

关于数据的用处有很多,举个例子,当两个人对各自的方案争执不休,分别觉得对方不好,但站在各自的逻辑上似乎都能说得通,那怎么办呢?分别做一个A/B测试,数据不会说谎,哪一个方案更有效,一目了然。

那么如何将数据结合到我们的设计中呢?首先在设计前,我们需要先定一个目标,而每一个目标就应有一项对应的数据指标。比如,提高了某一块的CTR(点击通过率),提高CVR(转化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。


拿到了数据之后,还需要分析数据。不管是有没有达到目标,都要去分析原因,进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验—失败了就找失败的原因,方便以后避开同样的错误;成功了就分析成功的原因,并将成功的策略复制运用到今后的工作中,增加以后的成功率。如此,不管有没有成功,都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。


小结:

以上就是今天所要分享的全部内容。再带大家回顾一下,一共分为三部分:第一个是了解设计师的发展趋势,第二个是趋势下的设计师价值分层(设计协同、设计推动增长、设计驱动),第三个就是在价值分层的逐步递升中所需要培养的双钻模型、GSA的策略、数据增长思维等。

文章来源:站酷  作者:麦海欣

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

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

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


分类

日历

链接

个人资料

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

存档