首页

设计师如何高效沟通需求

资深UI设计者

沟通是为了完成设定的目标,把信息、思想和感情,在个人和群体之间传递,并达成协议的过程。沟通目的一般分为:说明事物、表达感情、建立关系、达成目标。


需求沟通是设计师和团队围绕需求目标,信息传递的过程,是设计师展开设计工作的起点,贯穿整个设计过程,沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性,对很多新手设计师来说,在需求沟通过程中,可能会碰到一些共同的沟通问题,比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。


针对这些问题,本文尝试梳理需求沟通过程中几种典型场景和方法,以期帮助新手设计师快速识别需求沟通中的常见问题;提升沟通效率,快速达成共识;掌握沟通窍门,更精准高效的产出需求。


本文主要分成2个部分,第1部分主要聚焦在需求沟通过程中的不同阶段,面对的典型沟通问题和解决方案;第2部分主要介绍沟通中一些常见的技巧和方法。



Chapter 1

——————————

需求沟通的目标和方法


1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分:了解需求->分析需求->探索方案->实现方案。在不同的阶段,设计师要解决的核心问题不同:


了解需求阶段,设计师和产品针对需求目标进行讨论,并和团队就产品目标达成共识;


分析需求阶段,设计师和产品针对产品策略合理性进行讨论,并提出体验诉求;


探索方案阶段,设计师探索设计方案,并和产品就商业目标和体验目标达成平衡;


实现方案阶段,设计师和产品协调优先级,调整方案,确保方案最大程度实现还原;




1.2 如何更好的了解需求,明确目标,达成共识

在了解需求阶段,设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类:一类是需求目标较明确,产品有明确要解决的问题,如提升产品体验、满足某个用户明确需求、完成某个产品目标;一类是需求目标较模糊,比如挖掘用户潜在需求,探索新的业务方向。



对于目标较明确的需求,在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后,即可进入需求分析,策略讨论阶段。


但对于方向探索类需求,如何协助产品探索目标,和团队达成关于目标的共识,是这阶段的沟通重点。以一个创业的项目为例,产品想做一个图片社区,原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下:



在产品的催促和时间压力下,设计并没有围绕产品定位、用户群、产品目标进行充分讨论,也没有和团队成员达成共识。在这种情况下,选择跟随产品的节奏,陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论,方案的输出过程变成了试错的过程。产品方向修改频繁,这种被动的沟通方式,导致整个团队目标感不清晰、理解混乱。



经过反思和问题总结,设计师发起了主动沟通,运用设计方法协助产品明确需求,提升方向说服力,探索如何就目标和团队达成共识。首先,需要和产品明确用户群,并寻找用研协助,或发起快速访谈了解用户其次,组织团队相关成员发起关于产品目标的讨论,围绕产品决策人给出的产品初步方向,团队成员每人写下对产品的期待,提炼总结团队成员的想法,提炼总结产品目标再次,根据用户访谈材料,利用亲和图法,提取关键词,从用户诉求中洞察提炼用户目标。最终,产品目标得以明确,团队也取得了关于目标的共识,同时通过快速demo,来验证优化,项目得以顺利进行。




1.3 如何更好的分析需求,确保产品策略合理性

在了解需求背景、用户群体,明确了需求目标后,进入需求分析阶段,通常产品会给一个商业假设:假如做了xxxx,用户就会xxxxx,产品可以达成xxxx目标。以一个需求为例子:产品想做一个任务体系,通过福利吸引用户做任务,从而拉动产品活跃。


如果设计师完全按产品给的商业假设输出,方案产出过程貌似很顺利,但可能隐藏了很多问题。以本需求为例,产品的商业假设逻辑是:用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求;


但这个假设是正确的吗?设计师的价值就在于,这个时候要能找出产品假设中的问题。通过对用户的了解和洞察,还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题,才能顺利实现产品目标。


通过对用户实际参与过程的分析,用户在看到任务奖励后,实际需要权衡的内容很多,如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大?分析需求过程关键就是找到这些问题的对应策略,强化用户参与的动力,降低参与难度。




1.4方案探索阶段,如何平衡商业和体验诉求

在方案输出阶段,设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标,很多时候希望把达成商业目标的手段做的很强;



当发生围绕商业目标和体验问题,谁都无法说服对方的情境时,设计师该如何沟通呢?


首先,作为设计师要摆正沟通立场,理解商业化是任何产品的根本目标,体验也是实现商业化手段之一,我们反对的不是商业化,而是简单粗暴的商业化方式,商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。


其次,应能够识别对于曝光越多越好,越直接越有效的这种思维方式,通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时,最节省力气的做法就是提升曝光等方式达成目标。


当发生争执时,如果仅仅站在设计立场上,用设计理论说服对方,通常效果有限。尝试找到产品实现商业化目标背后的逻辑,不要用手段代替目的,探索更好的实现商业化方式的可能性,比如尝试在合适的路径上推荐,或探索用户更容易接受的内容形式。




1.5 方案实现阶段,如何协调优先级,推动方案最大程度还原

在方案实现阶段,很多时候由于时间紧张,产品仅完成最核心功能,部分体验相关功能一直无法得到优化。


通常如果方案产品认可,但推进意愿不高时,可能的原因是:1.当前方案不是核心KPI,产品要优先保证对kpi影响最大部分完成;2.投入产出比不划算,方案在产品看来投入的人力/时间/资源过大,并不值得;3.方案改动可能引发数据风险,产品并无法确保改动一定能带来数据的成长;4.资源紧张,产品也很想实现方案,但项目时间/人力/资源真的很紧张。



这种情况下,首先,要和产品够分沟通他们的疑虑和担心,到底是哪类问题;其次,从心态上也不用急于一时,做好长期推动的准备;还有,充分优化方案,消除产品疑虑,寻找合适时机进行推动。在项目逐渐迭代的过程中,对需要推动体验优化点持续关注,尽可能放大方案价值,结合新的需求点,思考能否从价值拓展角度,如提升品牌价值、扩展性等角度提升方案说服力;同时,从缩小成本和打消产品疑虑角度,做足准备,推动方案。



Chapter 2

——————————

沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程,表达者的信息传递到接收者时,因为背景、环境、理解能力、传递完整度等差异,接收者仅能接收部分信息,而接收者在理解消化后,再将自己的信息传递出去,这个过程循环往复,会导致两个最常见的沟通问题:目标偏离以及信息衰减。学习适当的沟通技巧,可以有效减缓目标偏离和信息衰减。


2.1 如何防止沟通目标偏离

要防止沟通目标偏离,首先要理解什么会导致目标偏离?1.目标不清晰,比如本来想找产品聊下某功能体验不合理,但因为产品一直说项目时间紧,被倾诉了一通苦水后,忘记了本来要沟通的问题,转移到了其他话题上,最后不了了之;2.缺乏同理心,比如当发生争执时双方不能互换角度,产品一直在说实现目标手段和现阶段问题难点,设计在说体验问题和设计规范,双方互不妥协,陷入争吵;3.陷入情绪,表达观点时陷入情绪化的争执。


针对这三个会导致沟通目标偏离的问题,可使用以下技巧:


① 设定沟通目标并保持关注:在每次沟通前想清楚自己的目标和底线,尝试用全局视角分析自己设定目标的合理性;在沟通过程中要经常反思当前沟通的问题是否已偏离了目标,对达成目标是否有帮助;发现目标偏离可尝试改变节奏,思考接下来说什么有助于达成目标;


② 换位思考:能够倾听对方的问题和困难,尝试寻找解决问题的办法,而不是一直表达诉求,无助于问题的解决和推进;


③ 控制/倾听情绪:美国心理学家埃利斯创建的ABC情绪理论,拆解了事件发生和情绪之间的关系,指出事件的发生并不是导致情绪的直接原因,我们持有的信念才是。因此在沟通中不要加入太多内心戏,过度解读事件。比如产品让设计反复改稿时,可能会解读为产品在故意刁难,尝试了解反复修改背后的原因,可能对解决问题更有帮助。



2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差,会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达:“设计稿尽快输出”、“页面太结构化了,想要更社交化一点”、“能不能做得更有创意一点,更有趣点”当出现这些类似的沟通语句时,可以尝试通过具体化方式,进行确认。



对于可能会出现理解偏差的问题,重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗?”;重要的沟通后,可梳理沟通记录,企业微信同步周知确认;方案的沟通过程可以快速画草稿确认;尽可能的减少因为理解不一致导致的沟通问题。



总结

在需求沟通过程中,我们要对不同阶段的沟通目标有清晰的认识,围绕目标进行充分准备,运用设计方法了解用户、了解产品核心诉求,做到知己知彼,才能进行有效的沟通。


在沟通过程中保持对目标的关注,始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。


沟通是解决问题,共同协作的重要方式。如果你觉得自己不善于沟通,可能要反思下沟通前是否想清楚自己的沟通目标,对于解决问题的过程、方法是否熟悉,准备是否充分?当我们能做到知己知彼、胸有丘壑时,沟通可能就变得简单起来。

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

文章来源:站酷 作者:腾讯ISUX

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

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

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


揭秘2021红点设计大奖作品KNOWING——通过可视化提高对数据的理解

资深UI设计者

AIOps智能运维平台KNOWING荣获2021年度红点大奖,从它的数据可视化之路可了解如何通过设计提高对数据的理解

微众银行智能化运营团队的软件系统KNOWING荣获2021年度红点大奖,这是团队在多方面获得的奖项之一,也很好的体现了软件系统和团队的综合能力。


关于红点奖

红点大奖是世界上最大的国际设计奖项,是世界知名设计竞赛中最大最有影响的,至今已经举办了大约66年。该组织以“寻找好的设计和创造力”为指导原则,为设计师和公司提供了一个设计作品展示和评估的平台。Red dot由“red dot product design ”产品设计奖,“red dot communication design ”传达设计奖及“red dot design concept ”设计概念奖,三大奖组成red dot设计奖家族。近年红点获奖的数量随着世界工业生产和设计能力的成熟而增加。尽管如此,红点奖和IF奖是世界上仅有的,公认评判好设计的国际机构,而能得到至尊奖 Red Dot:Grand Prix的设计更是行业翘楚。今年,23名国际专家查看、讨论和评估了来自世界49个国家的9178份传达类参赛作品。

有兴趣的话,可以了解一下红点是如何评审和颁奖的
评审——  红点是怎样评选的 The best products in 2020 – The Red Dot Jury selects the award winners_哔哩哔哩_bilibili
颁奖—— 2019红点产品设计大奖 - 红点盛会_哔哩哔哩_bilibili

从设计奖的动态看趋势

德国红点奖机构于2015年在中国设立“中国好设计”奖 (China Good Design)简称CGD,发起针对中国的全新国际化设计奖项。自加入世界贸易组织WTO,中国成为了世界工厂,为世界各国生产基础工业产品。随着中国工业生产能力逐步发展走向成熟,现代工业生产的中心由德国和美国转向了中国。从德国红点奖在中国成立分部的举措,除了看到商业盈利的目的外,还可以看到一个风向标,这就是在信息时代下,更多适应时代的好设计会出现在中国,这也给全球相关专业人士带来了机遇和挑战。蔚来就请德国设计师设计汽车和Logo就是其中一个案例。


得奖项目介绍

项目名称:KNOWING

发布时间: 2019.04

设计师:朱倩蓉

程序员:张若君

项目经理:莫林林

团队:微众银行智能化运营室

地点:中国深圳

奖项类别:2021红点设计大奖-界面与用户体验设计

什么是KNOWING

KNOWING的意思是“having or reflecting knowledge, information, or intelligence”拥有知识、信息,甚至智能。不止于人的专家的知识,KNOWING期望通过挖掘数据和神经网络等IT技术,给监控系统带来更多机器智能,甚至能反哺给人类智能。


  


KNOWING是一个为保证银行IT系统正常运营的监控软件系统。它给IT系统的运维人员提供如智能数据监控、检测IT系统异常及定位和分析异常的服务。通过有效监控和管理,IT系统能实现超越电信系统的可用率。这意味着,IT系统的问题能够被快速察觉和扑灭,不会影响银行的业务,更不会从而导致商业损失,银行用户也因此可享受7*24流畅的线上服务。


设计背景

作为一个数据导向且面向专业人员的软件系统,过往的IT监控系统会展示大量的数据表格,IT运维人员通过表格查询找到所需要的数据,再通过个人经验定位和分析IT系统异常的原因。但是纷繁的数据和庞杂的查找工作,以及对个人经验的依赖需要耗费大量人力,而人的操作是会出现滞后、误判、遗漏、效率低等问题的。KNOWING在原始系统的基础上挖掘了更多的数据关联关系,一方面想用有效的方式展示这些数据关系,另一方面想帮助IT运维人员更快速理解更精准判断数据,从而提高工作效率。

因此,KNOWING的设计就需要与其他的系统不同,尽管并不面向非IT人员,它还是需要用图形化的界面展示密集的数据,通过可视化和交互来体现数据的关联关系,促进对数据逻辑快速理解。


总览

总览页面最上方的时间横轴展示了在一定时间段内检测出的重要IT异常,点击某个异常红点,下面的条状颜色区块是展示这异常分析的5个阶段。接着是异常的影响、评级、分析结论、具体指标等模块,模块的顺序按逻辑分布,从总到分,从粗到细。


根因分析流程可视化

异常分析的最后一个阶段是根因分析(RCA),是异常一个从检测到根因分析的双向流程。通过数据可视化的设计,这个流程可以被非常形象表达和快速理解。左侧是对数据流的3次分类处理,右侧是通过AI,如指纹识别一般找到当次事件与历史记录的共同特征,从而推断当次事件的类型,根据类型推导根因。双向分析最终汇聚成中间的结论。


交易树

KNOWING实时生成交易树,它展示的是一单银行交易所经过的所有IT节点。节点内外和枝干的设计细节表达了该节点的不同状态。IT运维人员可以从交易树中快速得到交易的概览信息。

交易树的生成


子系统知识图谱

IT系统内存在着大量的子系统,KNOWING描绘出了他们复杂的关联关系,这就是子系统知识图谱。图中可以根据部门分簇查看子系统,也可查看全量或单个子系统。若搜索某个子系统,则以此子系统为中心查看所有关联关系。这样,运维人员可以从不同的角度了解子系统并形成全局概览。

3种视图查看:按部门、全量、单个

按部门分类查看

查看全量

查看单个


从以上的例子可以看到,可视化不是单纯的图表方式展示数据,数据可视化是将密集的抽象数据压缩并还原为形象方式展示。由于抽象的信息是人类演化的后期发展出来的,生物性决定了人脑天生擅长处理形象的物体。所以信息越形象,需要经过大脑处理的区域就越少,获取的速度就越快。

https://v.youku.com/v_show/id_XNTgyMDkwODIzMg==.html?firsttime=95


对设计与科技的思考

IT技术逐渐渗透各个领域,行业与行业、技术与技术间逐渐融合。科技,尤其是IT技术和设计未来会如何相互影响?经过多年对后台产品的设计以及经年的学习和深入思考,本人确实看到了一些趋势也沉淀了一些见解。以下是我给红点奖写的一些思考。

科技如何改变设计

科技是人类能力的外化,科技是新工具即新形式。设计的本质就是做内容和形式的适配,所以,新科技的到来意味着形式的改变,而形式的改变会影响内容,这就需要重新做内容和形式的适配工作,也意味着新设计需求涌现。

设计的未来挑战

从设计的角度来讲,过去被设计物的传达是单向静态的,因为工业时代的事物相对简单。我们慢慢在步入智能时代,物体会从静态的变为智能动态的。所以,静态的单向的传达会逐渐变为动态的双向的交互。比如原来的静态的画面通过显示设备传达设计师的意图,如今还需要考虑到智能系统和交互设备所拥有的能力,根据使用者的不同反应给出反馈。因此,新设计需要考虑的元素会更多更复杂。


未来已来。

设计师想要在新的时代迎接挑战,甚至是拔得头筹,一方面,可以参考工业革命时期科技对设计的影响来预判未来的变化;另一方面,在新工具产生的时候,设计师与其挣扎纠结而故步自封,不如快速接受新时代的变化,学习新知识和运用好新工具。

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

文章来源:站酷 作者:Z085740511 

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

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

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


移动端信息超载设计怎么做?

资深UI设计者

移动端由于屏幕尺寸较小,而产品经常需要展示过多的信息,因此对用户浏览行为进行设计,即“页面信息超载设计”。

     从两个大环境下看待这个问题,一个是移动端产品,另一个是PC端产品,这里我们主要讨论移动端产品。

由于移动端页面尺寸较小的特性,常常无法像PC端那样在一个页面中展现出多信息多任务,因此在面对多级的信息架构设计时,最常规且传统的做法是将某一场景/任务下的信息,通过设计页面的跳转/或增加页面的长度来实现。

但是一个现实的问题在于,用户愿不愿意滑动?根据埋点数据显示,在首屏没有做好内容曝光的前提下,多数移动端页面超过首屏的内容点击量会急剧下滑,说明用户很少主动的查看一屏以外的内容。

因此对于移动端产品来说,一些重要的内容必须保证用户在一屏内可以看到,而用户有必要进一步阅读的内容也需要做好用户浏览行为的引导。

从适用场景角度,可将信息超载的设计类型分为「页面展示信息超载」和「页面版块信息超载」,本文将分为上下两节针对此将进行详细的案例分析分享。

页面展示信息超载

根据不同的用户需求以及适用场景,当用户仅限于当页的浏览时,如何保证大量的信息能有节奏、有目的的传达给用户是我们需要考虑的。

在此类型中主要实现手段有隐藏化设计、场景分页、无限加载、向下展开按钮。

隐藏化设计

在探索更多业务场景的同时,APP的迭代不仅仅是优化更需要考虑功能的叠加,强调不同的场景聚焦于不同的核心信息上成为了重中之重,为了向用户营造一种架构全面而使用简单的用户体验,隐藏化设计的概念可以帮助我们拓展更多交互的可能性。

优势:

  1. 满足用户不同场景不同需求

  2. 产品架构更清晰,用户使用更简便

劣势:
没有提示和线索的隐藏则需要做好新手引导,如早期微信小程序的下滑打开方式等。

适用性:
适用于一些多场景的产品,和用户场景具有明显行为特点的产品功能模块中

交互细节:
结合上面的案例展示,主流app的隐藏化设计主要体现于卡片模态面板、屏幕扩展、浮窗。

卡片模态面板

自从19年ios13发布新设计特性,卡片模态面板就陆陆续续被运用到各大产品中。

  1. 使用热区高频于屏幕的中下方,且手势方便快捷,适合单手操作,因此广泛的用于一些出行类的app

  2. 具有可伸缩的特性,可适用于一个页面的不同场景

  3. 处理当前模态面板的任务时,仍然可以看到面板后的界面环境,并不会让用户有太大的抵触感。

  4. 但是使用时需要注意,模态的用途是切换任务状态,不要仅因为喜欢它的样式和动效而使用。

  5. 不适合用于展示沉浸阅读内容,建议设计于复杂度不高的支线任务。

屏幕扩展

如案例展示的系统负一屏、虾米音乐)

当页面的功能属于重要但低频时,可以考虑使用屏幕扩展进行设计。

此类型常见的交互设计方式有两种:一种是常见于各大手机系统主页以及微信的“负一屏”设计;另一种是app首页的“二楼”设计,如上面案例展示的“虾米番你街”,还有淘宝之前推出的“淘宝二楼”。

使用时需要最注意的是:

此形态的设计和产品卖点已经运营思路是紧密相关的,需要综合考虑

浮窗

这个控件的使用可能会和屏幕扩展的使用联系较为紧密,从微信前期浮窗的使用情况来看,不排除是为了解决当使用小程序时无法接受到新消息,但又怕退出后无法找回而产生的焦虑感而诞生的功能。但同样也是为了解决用户不同场景的不同任务需求。

但当浮窗中只有一个待看文章时,需要单击浮窗后再点击热区才能打开内容,两次点击行为可以考虑是否有优化的空间。

除了隐藏化设计,以下传统页面信息过载的处理方式也值得思考:

场景分页

翻页场景常伴随着分页器的使用,通过上下页翻阅来进行信息浏览。

优势:

  1. 快速告知用户信息量

  2. 可自主性选择浏览内容

  3. 便于定位回找

  4. 浏览信息更有节奏感

劣势:
需要点击跳转来获取更多内容,如果设计不符合使用情景,会在一定程度上打断用户的思路,很有可能就会导致用户的流失。

适用性:
移动端中可适用于一些对内容的掌控更强的场景,需要用户更专注,如后台表单等,

但随着移动互联网的发展与移动设备的普及,早期的网页端社区类产品和线下书籍的阅读也开始尝试转战移动端,可受限于功能形式和用户习惯的使用差异,以至于需要在两端之间做好平衡,去考虑用户操作习惯以及两端适配的问题。

因此,较为早期的一类互联网产品和由线下普及到线上的场景,会采用分页的方式来综合用户在两者之间的行为习惯,我们也可以看到像知乎这类普及于移动端的产品都并没有选用分页的方式进行内容的设计,而是直接设计贴合用户移动端行为习惯的交互方式。

交互细节:
在移动端使用分页器,一般常见为滑动条和动作面板这两种控件进行设计。

仔细去体验了这两款产品,发现它们的分页并不是单纯意义上的分页,而是整合了无限加载与分页选择。

类似于无限加载下滑,但是会自动定位到具体页数上,比如我滑了 6 次,页数就到了第 2 页了。

从这里看出,移动端出现内容加载的情况时,还是以无限加载为主要方式,即使有分页,也是辅助作用。

引发思考:

滑动条的选页方式也考虑在滑动滑块的过程中页面展示跟随滑块位置而变化,选定内容位置后点击确认,否则可以点击取消回到选择前原来的位置。

无限加载

即无限滚动加载,通常以 Feed 流/瀑布流的形式出现于产品中,允许用户通过滚动浏览大量内容而不刷到页面最底层的技术。当你向下滚动页面时,这种技术将会持续地刷新页面。

优点:
沉浸式信息浏览,不会被打断,增加用户参与度,促进用户停留更长时间。

比起小热区范围的点击行为,滑动对于用户来说更为简便更友好,尤其在移动端可以快速浏览到感兴趣的内容

缺点:

  1. 无法预知有多少信息,用户容易产生迷失感,却无法回定位内容

  2. 对页面性能要求更高,用户向下滚动页面越多,页面上承载的内容就越多,会导致页面性能越来越慢

  3. 对设备资源要求更高,在含有大量内容的app中,资源有限的设备(如iPad)可能由于其已加载的内容信息过多而开始降速

适用性:
在移动端更方便使用,适用于快速浏览内容和发现内容的场景,如休闲娱乐为主的社交型产品/资讯性产品

交互细节:
对于这类交互形式,最高频的用户需求是回到顶部和资讯内容的刷新以快速寻找感兴趣的内容。


回到顶部

这类需求常规解决问题的方式是点击界面顶部回到顶部(ios用户常用操作),除此之外最常规的操作是在页面右下角的回到顶部悬浮按钮。

还有一种结合用户心理认知的交互行为设计——底部栏首页icon的利用,如上面案例的淘宝和同花顺,点击首页icon可回到初始位置重新加载,淘宝/同花顺过把这一隐藏操作显性化,并且合理利用用户回到顶部的需求,当用户不断下滑页面时icon变成火箭/刷新的样子,点击后立即回到顶部并可进行所有资讯的重新浏览。


寻找感兴趣的内容

无限加载最大的优势就是能帮助用户快速浏览以找到感兴趣的内容,但当页面本身预加载的内容就都不能吸引用户兴趣,就需要考虑如何通过设计帮助用户找到真正感兴趣的内容。

如上面案例的同花顺和知乎,当浏览同花顺时,长时间没有点击进入任何一篇文章时,在浏览中部就会出现刷新提醒;当在知乎的搜索结果页滑动大概3屏后,知乎会分析判断用户没有找到他想要的信息,于是出现“向知友提问”的按钮,引导用户直接提问自己想要的(亮点之处在于对用户行为进行潜意识分析,而不是全程展示这个提问按钮,避免减少用户实际浏览区域,造成干扰)。

向下展开按钮

在pc端的网页中,为了折中分页和加载的利弊,常常会选用“查看更多”的按钮,点击后向下继续进行加载,同时也能给用户更多的停顿和节奏去主动的获取更多的信息。

而对于不停强调活跃度的移动端的产品来说,向下展开的“查看更多”按钮,不仅仅只是折中的思考,还有运营层面的考虑。

(向下展开更多的情况还分为两种,一种是向下展开更多选择,另一种是向下展开看到全部内容,以下讲的更多是后者)

优势:
产品运营层面

1、增加点击促进引流/转化

引导注册、关注、付费等的转化

2、为精准推荐提供更多依据

网站可以通过用户点击“阅读更多”按钮的行为,获取有效点击的用户数,精准收集用户阅读喜好,开发完善用户画像,便于日后精准推送某个作者、某类作者、某类文章给点击的用户以及相似的用户群体,优化智能推荐。

3、判断文章真实质量

通过文章点击的人数、点开率等对创作者进行管理,便于把控平台内容质量,重点支持优质创作者,从而建立更好的内容生态。

用户层面

  1. 增加半遮面的神秘感

  2. 保证稳定快速的阅读体验,提升加载性能

  3. 降低阅读成本

劣势:
若不是为了提升转化率或者增加曝光率,仅是展示型文章,就会牺牲掉部分的用户体验。

适用性:
适用于需要考核的内容创造者、需要收集更多用户数据的产品

总结

移动端由于界面空间有限,具有「一个界面一个任务」的特点,因此当面临产品增加功能时,不能一味在界面中进行功能的堆积排列,而应该更强调于页面场景化的设计,同时页面中的每一个细节设计都应该做到恰到好处,减少用户思考是否需要使用的精力。

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

文章来源:站酷 作者:六月星光

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

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

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


用户体验设计-基本概念,与艺术的区别,工作中的职责,职位上的分类

ui设计分享达人

一、设计和艺术的区别

艺术:

艺术是感性、天马行空、富有创造力的,表达创造者的个人意识

设计:

设计是理性、精密的,为了解决用户的问题

      

(你看得懂吗?你有什么见解?为什么大家见解不一样?这就是艺术的魅力)


二、用户体验及用户体验设计

什么是用户体验?——————使用一个产品时的主观感受

用户体验设计?———————为了提升用户体验而做的设计

 

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。(视觉只是其中一部分,并不是设计的全部)


Eg:充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇,用户会去瞄准上厕所(设计美观且有趣味性)

 

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么,为什么人解决问题,如何解决

 

Eg:钢铁侠u盘死死按住关机键;楼梯是为残疾人设计的吗,我懵了?


(3)不让用户思考

用户感到挫败,会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)


(4)趣味横生

尿液四溅贴提示语效果不好,放一只苍蝇效果很好?

因为:抓住了用户的心理和行为习惯,同时充满趣味,吸引用户

 

Eg:path推出的商店功能,在里面买自己喜欢的贴纸,摇晃手机贴纸也摇晃,感觉很好玩吧~带来好的体验感

 


3.用户体验设计师遇到问题如何思考




三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A:“你用一个网站的时候,有没有出现:某个功能找不到了,点击按钮没有反应,填写的信息不知道哪里错了总是不能提交成功?”

B:我们的工作就是改善这种情况,让你使用网站时有一个好的体验,同时能让用户感到愉悦和不受打扰。

工作中:除了考虑用户还要让公司有利可图


2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑(需求/功能)以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的平衡点)的过程。

即:从公司战略角度考虑问题,在公司需求的基础上让用户觉得好用、易用

 

交互设计师的产出物:不是原型,你不是画图的工具,重要的是解决问题的能力

工作内容:竞品分析文档、用户反馈整理、流程图、设计草图、原型...

 

3.视觉设计师

原画:设计者很强的手绘能力,作品充满艺术表现力

平面:传达思想,较强的感染力

推广运营设计师:突出重点抓眼球

UI:良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究,深入了解用户特征,用户行为习惯,为产品运营推广提供必要的方向

工作内容:市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

 


四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标,企业也会财源滚滚

eg:改变一个按钮的颜色,点击率提高35%;优化操作流程,转化率提高50%...


2、项目价值

跟进各个环节,保证产出物质量

推进统一及标准化,提升设计效率

促使项目流程合理,有规划

 


五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合,了解用户特征与行为;设计结构、流程、界面、动态效果;跟进视觉、前端、开发;及时整理上线问题,准备下次迭代...


2.品牌价值

维护和突出品牌形象,统一的设计理念

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

文章来源:站酷 作者:一团雯子

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

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

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


译文:开启新时代的响应式网页设计

ui设计分享达人


///

它是如何开始的-固定屏幕

在千禧年来临之前,我们首先开始在单一视图屏幕中进行UI设计,这类屏幕在当时最流行的尺寸是640x480。大多数时候,我们甚至没有考虑让屏幕滚动,而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑,当时的大部分网页也是用Flash或HTML创建的,并带有用于布局的表格。那是在智能手机出现之前,随着事物的发展,我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路,CSS已得到长足的发展,“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history


///

它现在怎么样-响应式设计

随着CSS3的发布,我们获得了对“媒体查询”(Media Queries)的访问权限(译者注:随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries,即“媒体查询”),此后不久,Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来,我们一直使用“响应式网页设计” (RWD) 创建网页布局,作为一种网页设计方法,仅需基于一种屏幕尺寸进行设计,“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期,当移动电话还不兼容媒体查询或JavaScript时,“移动优先”和”渐进式增强”的概念就成为了非常流行的方法,当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计,我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时,我们使用“媒体查询”来更改整个页面布局。

 

///

它的未来是什么-组件驱动

很快,使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport(视口)的“媒体查询”获得了许多强大的工具,但我们也缺乏很多适配的可能性,因为“媒体查询”是一个适用于整个页面的通用解决方案,并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力,也缺乏将“响应式”样式注入“组件”本身的能力。


当我们谈到组件时,这里指的是页面上的“元素”,这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容,每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information(全局视口信息)来设置这些组件,但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时,这使得它变得更加困难。

好消息是这个生态系统正在发生变化,而且它正在迅速变化,这需要我们进行一些思维转变:考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展,“响应式”网页设计的新时代即将到来。从目前的情况来看,自从我们第一次引入 “响应式网页设计” (RWD) 以来,仅仅10多年的时间,这个生态系统已经准备好迎接CSS发生一些相当大的改变。


让我们深入研究一下可以期待哪些类型的变化,这会如何改变我们的设计方法,以及我们如何考虑界面设计。

 

///

用户能够设置基于个人偏好的“媒体查询”

简单来说,我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表,但能给你一些想法,这些基于偏好的“媒体查询”可能包括:

这些将帮助我们构建更具活力和个性化的网页体验,专门满足我们用户的专属需求,尤其是那些希望网站易于访问的用户。更进一步说,这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子,当用户的操作系统偏好设定为“减少动效”时,他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好,并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme(配色偏好设定),它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”,它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”(container queries),通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估,尽管今天使用它并不安全,但重要的是要了解其发展方向。

简而言之,“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立,与现代设计系统保持一致,真正成为“即插即用”模块,可以转移到任何页面或布局,而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法,因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要,我们应该研究一下。

 

///

考虑各种形态因素

由于各种“形态因素”(form factors)的变化和扩展,例如新的屏幕类型,可折叠屏,我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中,请记住,这是最具实验性的,并且只是一项正在进行的工作,仍在尝试解决我们可能遇到的任何复杂问题,同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中,原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如,你可以在一个屏幕上放置一个收起的侧边栏(或菜单),并允许内容在另一个屏幕上展开并随页面滚动。

 

///

为什么我们需要它?

我知道你在想什么,我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意,那么为什么要改变呢?如果我们真的以终局视角来看响应式设计,那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页,诸如“容器查询”之类的工具将变得非常有意义。

配图:CSS 将基于各个层级来确定用户的最佳体验

 

考虑到这一点,这意味着我们现在可以使用基于页面的媒体查(包括跨越屏幕的细微差别)来设计宏观布局;使用容器查询的组件设计微观布局;使用基于用户偏好的媒体查询,根据用户独特的偏好和需求定制用户体验。

 

对于新的响应式设计,有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实:即我们的设计不是静态的,不仅在布局上,还有在用户可获得的体验中,我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂,我们需要适应和挑战自己,理解“新响应式”体验的意义。

 

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

文章来源:站酷 作者:百度MEUX

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

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

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

向世界知名的设计师致敬系列之二:乔纳森·伊夫,​马克·纽森

蓝蓝设计的小编

向世界知名的设计师致敬系列之二:乔纳森·伊夫,马克·纽森

向世界知名的设计师致敬系列之一: 雷蒙德·罗维,约恩·伍重,菲利普·斯达克,荣久庵宪司,亚历克斯

蓝蓝设计的小编

向世界知名的设计师致敬系列之一: 雷蒙德·罗维,约恩·伍重,菲利普·斯达克,荣久庵宪司,亚历克斯, 亚历克斯·塞缪尔森

B端设计复盘系列——表单页

ui设计分享达人

01表单概念

表单页作为基础通用组件,也是B端产品中台、后台出现比较频繁的页面之一。看似简单的页面我们在设计时却有很多值得推敲的点,在细节处提升用户易用度,我通过日常的学习和公司项目,在这里总结复盘了自己的经验。

表单的适用场景比较广泛,常见的基础表单比如登录注册页面,这一类往往信息简单,格式比较固定,除此之外就是分步表单、高级表单。常见的场景主要用于新建信息、申请、客户信息、商品信息等等。这类表单可能存在复杂逻辑关系和功能,有时会给我们造成困扰。以下我将以这一类表单为主要案例,一一进行拆解。

登录注册页:表单内容简单,操作简单。

分步表单:具有流程化特点,具有先后逻辑关系,内容较多的业务类型,比如转账,新建商品订单等。分步填写可以减缓用户压力,起到安抚用户情绪的作用。

高级表单:主要用于需要一次性输入、提交 大批量数据的场景。也成为分组表单,和分布表单一样都是为了减轻用户填写压力。

02设计原则

首先我们需要明确表单页的主要功能:表单页承载了系统中绝大多数系统数据的录入、增删、修改、查看,是系统中人机交互最为频繁和典型的数据媒介。表单页通常需要用户录入大量的信息或数据,在设计时我们的核心目标应该是让用户明确当前表单页面要完成什么任务,轻松理解项目含义及生效的结果,思考如何帮助用户高效、准确、轻松的完成任务。

表单设计基本原则:明确、高效、安全

明确:用户可以快速定位重要信息和目标选项,表单文案和组件可以准确传达任务含义

高效:易理解易操作的交互方式,尽量减少交互步骤,减少用户任务路径步长,配合合理的信息布局引导,准确的选择合适的组件传达信息,帮助用户高效的完成任务。

安全感:操作前有效的防错机制,操作中有明确的状态反馈与容错,允许纠正错误。操作后及时的保存,取消机制。

03表单构成

一个完整的表单通常包括表单标题、表单标签、表单域、提示信息、占位符、操作按钮几部分。

标题:起到说明表单模块的作用,是用户快速明确任务和定位页面位置的重要标识。

表单标签:内容项的名称,说明对应填写项含义及说明用户该填入什么信息。

表单域:表单的核心操作区域,用户操作最频繁,最集中的地方,这里的可选择组件样式也会根据内容需要而变化,类型最为丰富多样。需要注意的是同一类型的组件需保持一致性原则。

占位符:一般出现在用户未填写内容时,用于辅助提示用户录入线索。

提示信息:辅助提示用户的作用。分为普通提示和错误提示,也是很好的防错纠错机制体验。

操作按钮:“结束”表单任务的触发器,用于向服务器提交数据或者放弃操作。


表单标签

表单标签样式常见的有4种,左对齐标签、右对齐标签、顶部标签和行内标签,不同的对齐方式各有优势和缺点,适应在不同的场景。

右对齐标签(冒号对齐)

优点:标签指向明确,操作效率高,节约纵向空间

缺点:可读性低,不适用于狭长空间或需要适配多语言的页面

场景:普通表单填写,多用于web端

左对齐标签

优点:阅读性高,节约纵向空间

缺点:不适用于狭长空间或需要多语言适配的页面,操作效率低

场景:详情陈列

顶部标签

优点:视觉对齐舒适,节约横向空间

缺点:纵向空间利用不高

场景:多用于移动端表单填写,多语言适配页面

行内标签

优点:视觉对齐和空间最节约的方式

缺点:当用户输入状态时,标签消失,增加用户记忆负担

场景:多用于登录注册,修改密码等内容极少,不需要记忆的页面


表单域

表单域是一个表单页面的主体部分,其内容丰富多样,从而它可选择形式也最多,不同的内容我们在设计的时候应该选择最合适的组件,以及应该注意同类型内容选择统一的组件进行设计。

定义操作框大小

在实际项目中我们往往会遇到内容长度不能统一的时候,那怎么这种情况该怎么处理呢?

以往我的处理方式是强行拉长对齐,但我们可以发现强行对齐的时候,视觉没有得到很大优化,反而在隐喻传达给用户错误的信息,当用户在操作1功能的时候,可能会错误的认为这个选项可以选择很多,因为我们给的选择框很长,而实际上它只能选一个。这样就会给用户造成不必要的理解成本。

比较好的方式处理方式是我们设计组件库时就设定不同尺寸的操作框,来适应不同场景下不同内容需求。如果不能对齐,那就让它参差不齐。

提示信息

提示信息在表单中起到提示、纠错的作用。形式主要有以下几种:行内占位符提示、操作框下方文字提示、tost提示、气泡提示。

行内占位符:这是一种基础应用,它即可用于占位,也可用于任务说明提示,当我们说明文字很少的时候可选择的一种方式。需要注意的是内容务必简洁易懂,减少阅读成本,不要说“正确的废话”,语句应该是完整的陈述句。

气泡提示:当提示文字很多,主要用于对标签的名字释义时,气泡弹窗是个不错的选择。它的优势在于可以将更多内容折叠,不占用空间,缺点是不直观,增加了用户操作步骤。

Tost提示:Tost提示一般是在出发操作按钮后给出的提示,可以是操作结果提示,也可以是内容填写提示。

操作框下方文字提示:当提示内容很多时,还可以考虑操作框下方提示,多用于对输入内容的辅助说明场景。应用场景包括以下几种:

组件组合后在表现层的设计

提示信息在页面中还是一个辅助性的角色,常规情况下的视觉层级应该是 表单内容>表单标签>提示信息。当用户有错误操作时“错误提示”优先级是最高的,我们一般用带有警示性的颜色给以醒目显示。

为了使用户更好的辨别任务项,需要注意组件与组件、组件与说明文字之间的间距差别。

04交互方式

表单中的交互方式根据其内容选择对应最合适的形式,内容简单而少的可以直接在原位编辑,操作快捷,关联性最强,所见即所得,内容容量低于5个。其次内容较多的,或者针对全局操作的可以选择气泡卡片,比如全局设置等。第三种是弹窗或者抽屉,两者形式是一致的,区别在于对内容的承载量上,弹窗容量较小,内容较多的情况下抽屉式弹窗(侧拉弹窗)是更好的选择。最后,内容承载最大的就是页面跳转,同时这种方式与原页面的关联性最弱。

组件构成表单,实际项目中,我们的表单往往内容会多而复杂,设计时可以考虑在布局上优化去提升使用体验。

常用的方式有几种:信息分组、锚点定位、标签页、分步骤。

在格式塔邻近性原则中提到,人们将彼此接近的事物、元素,倾向于认为它们是相关的。在设计中很早就运用到这种认识倾向。所以我们在信息分组时可以运用设计手法将相关信息从视觉上区分开,提升信息阅读有效率。

分组方式:

1.简单的内容使用标题分组或卡片分组就可以达到目的。

2.而内容很多,组别之间没有关联性时用标签分组

3.页面内容很长需要连续下滑操作时,锚点定位就可以提供便捷的操作体验。

4.在任务有先后逻辑关系时,分步骤是最好的选择。

标签分组与锚点定位在表现形式上类似,区别点在于操作后的结果。标签分组切换标签后页面数据会刷新,一般没有自动保存功能,锚点定位则是每次点击定位页面不刷新数据,始终保持在同一数据页面。


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

文章来源:站酷 作者:将晚秋

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

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

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



C端产品分析方法总结

ui设计分享达人


做一个完整C端项目前,从产品思维得理解、需求分析到场景分析,通过以上分析得出结论,进而制定我们的设计目标,把设计目标落地到解决实际的设计问题,内容较多,大家可以根据上述目录来进行选择性阅读。


1.1产品思维包括


1.1.1 用户思维:深入了解用户的需求和场景


了解用户心理:“心理”主要是指用户的情绪,只有了解用户的心理状态,才能知道他们在接触到或者使用我们的产品时是正面的情绪还是负面的情绪。正面情绪需要我们引导去实现转化,负面情绪需要我们安抚以避免跳出和口碑的损失。


把控用户行为:最终目的还是引导用户行为,让用户按照我们的计划进行产品的交互、操作,从而实现对用户的有效管控和转化。例如:上品店庆推出“购物省钱节”的概念,联合商家推出各种优惠活动,就是抓住用户在购物时想省钱的心理,通过降价、优惠券等方案让用户在选购商品、提交订单和结算阶段都保持高涨的情绪,从而推动用户最终完成付款。


解决用户痛点: 在完成上面的分析后,我们最终需要把调研和分析结论落地为设计方案,前提是要关注用户当前的情绪是负面的还是正面的,如果是负面的情绪,我们可以通过补偿、安抚等方案对用户进行留存。例如:在等待外卖送达时,配送信息页一般都会有预估时间、位置等信息,让用户有一定预期。同时如果迟到时间过长,也会通过准时宝等规则给予用户优惠券补偿,这些都是负面情绪的安慰。



1.1.2 项目思维:主动发现并解决用户体验过程中遇到的问题

项目思维主要指,我们要具备极强的发现问题、输出方案、推动落地的能力。这就是设计师的项目思维和推动力,可以保证自己的想法快速落地、推动设计优化并尽快上线。



1.1.3 商业思维/业务思维:将设计目标与业务目标紧密结合

商业思维是指,拉新:通过产品、运营和营销策略让用户下载产品。留存:让下载的用户保持活跃度,留住用户,便于转化。转化:让用户按照我们的业务规划去注册、分享、下单、付款等动作,一步步带入我们的圈套,完成关键操作。变现:将用户行为变现,内容产品的活跃度可以带来广告营收,电商产品的成交额就是业务收益。



2.1产品思维的重要性


2.1.1 Ui设计师和产品经理的区分界限


相同点:在实际工作中,设计师和产品经理的目标在本质上是一致的,都是解决用户的痛点、满足用户的需求,为用户提供体验更好的产品,并在此基础之上完成用户转化,实现收益。作为一个设计师,我们对产品了解的深度不一定比得过产品经理,但是广度上你应该要求自己和产品经理保持一致。只要掌握产品的架构、流程和业务的模式、原理即可。



不同点:UI设计师更注重通过用户体验来留存用户,产品经理更多地考虑转化用户和变现的途径。



冲突点:这时就会产生一些冲突和矛盾,有时为达到业绩目标,产品经理或其他业务方可能会提出有损用户体验的方案或者策略。


想要解决与产品冲突得问题,就要充分调动自己的产品思维,保持习惯性的产品思维,才能始终保持和业务一致的目标。和业务方站在一起,才能找到设计和业务的共同目标,并将业务目标转化为可执行的设计目标,才能为设计带来更高的价值。


2.1.2 UI/UX设计师的真正价值是什么


这里就绕不开这个话题----产品思维。别人眼里的UI设计师,很多人会认为设计师的工作就是设计流程页面、视觉效果。这些工作看起来只是锦上添花,即使没有专业的设计师来设计,可能只是流程、控件位置不太合理、样式和颜色不太好看而已,并不会影响产品的开发和上线。其实,设计师的价值不仅是艺术价值,更重要的是为业务带来价值。


UI/UX设计师,关键在于对用户场景、对产品细节的敏感度,这也是其他岗位不具备的技能。实际工作中这些细节问题,很容易区分出来专业性的差异,因为UIUX设计师是距离用户最近的人。我们设计页面,用户在页面上操作和获取信息。我们设计流程,用户通过流程完成各自的需求。我们设计的产品流程、页面,是用户直接接触和使用的东西。基于这个原因,设计师对用户的需求、反馈是最了解和最敏感的,我们可以通过用户的反馈、操作数据把控用户的心理状态和行为方向。无论是在方向上还是从细节出发,挖掘和洞察用户需求,设计师有明显的优势。

所以UI设计师真正的价值就是通过自己对细节和场景的思考,自我驱动,找到设计优化、产品迭代、业务提升的机会点。想要找到这些机会点,你需要培养自己的产品思维、项目思维和商业思维。


2.1.3 如何培养自己的产品思维


01、多与需求方、业务方(产品经理、运营、市场等岗位的同事)沟通,在参加需求评审的时候,深入了解业务和产品的特点、原理。


02、了解产品流程:在接手某项业务或产品时,先利用思维导图对产品的架构做一次梳理,通过功能结构图你可以清晰地看到产品应该有的功能。在掌握架构的基础上,对产品的核心流程再进行一次梳理,包括线上、线下所有的流程节点、体验接触点和不同用户端的流程触点。


03、多做竞品分析,从竞品中寻找灵感和产品感。怎么做竞品分析具体可查看我的其他文章,竞品分析维度的确定。


04、持续不断地培养自己的思维能力,深入思考、多做归纳总结和分析。在做设计的时候我们也可以让自己的思维慢下来,多去思考:思考一下为什么做这个需求?对用户有什么价值?对产品有什么价值?对业务有什么价值?设计、产品、运营应该怎么做才能达成这个目标?我们的做法对业务、对产品有什么影响?设计方案能不能很好地平衡业务和体验的关系?



2.1为什么要进行需求分析

01、用户不知道自己真正想要什么。

02、用户难以说出自己的真实需求,用户在阐释自己的需求时,就会不自觉地粉饰和解释自己赤裸裸的本质需求。例如:那些刷视频就能领红包得产品,但为什么它最近不火了,这类产品的人群,本质需求是:通过刷页面领红包,获取更多的钱,这类人根本不关心内容是什么、内容质量怎么样,这就造成了内容的触达效果非常差。


2.2 用户需求分析步骤


2.2.1 筛选出目标用户


01、了解我们产品的目标用户群体和现有产品用户群体,掌握用户基本信息,分析用户特征。(Who)用户是哪些人:性别、年龄、地域分布、学历收入等。(What) 用户有什么共性。(Why)为什么选用我们的产品。(Where/When)在什么场景下使用我们的产品。


02、通过了解用户得到的所有信息,然后创建用户画像,得出结论。那么如何创建用户画像呢?


       001、人物创建:创建一个虚拟的用户群体中的一员,利用我们上面提到的用户相关信息,可以给他/她一个插画风格的照片帮助我们具体化这个用户的人格和形象。然后列出他/她的基本信息,给他/她定一个社会角色,比如:小王,男,28岁,销售经理,我们产品的熟练用户,月收入2万,学历本科。

        

       002、分析动机:这个人物用我们的产品想干什么;这个人物对我们产品某个功能使用较多,需求较强的原因是什么,想达成什么样的个人目标。


2.2.2 提炼核心需求


可以通过用户画像推测用户的心理特征和行为偏好,积累了以上信息,你就比较容易进行需求的分析和挖掘了,提炼出解决用户需求的核心的痛点。例如:解决了用户在特定场景下的某一个核心痛点,满足了用户在当前场景下特定的诉求/需求。例如:共享单车产品就是解决了从车站、地铁站到家、工作单位最后一段距离的出行痛点。例如:地图软件解决的是陌生地区找不到路和易违章的痛点。


2.2.3 找到本质需求

01、了解人性:做设计就是做人性,只有把握好人性的特点才能更好地满足用户心理,进一步引导用户行为。马斯洛需求层次理论,人的需求从低到高可分为 5 个层次:我们就可以试着洞察用户在特定场景下的本质需求到底是什么了。生理需求(呼吸/食物/水):现代社会其实就是对生存条件的追求;安全需求(避免自己受到伤害);

社交需求(爱与被爱/社会关系/地位)对情感的需要;尊重需求(被自己认可/被他人认可和尊重)对稳定社会地位的需要;自我实现需求(道德层面/内心层面的追求和满足)。


所以用户的本质需求无外乎:生存、金钱、情感、名利、心理满足这几个方面。


02、将用户叙述的需求,转化为本质需求:比如:有的用户说,上品商场最近优惠券怎么少了?我都不想去上品买东西了。用户表意是嫌优惠券少,如果我们草率得出:增加优惠券运营力度的结论太过于表面,其实用户的本质是嫌商品太贵了,他们的本质需求是省钱,少花钱且买到想要的东西。而这类用户是对价格极其敏感的用户,增加优惠券只是其中一个策略,是无法满足他们根本需求的。根据他们省钱的本质需求,我们可以给他们更多地推荐低端商家,哪怕没有优惠券,还是能提升一波 GMV。


进而转化成设计目标为,要通过我们的设计能力,给用户营造一个很省钱的氛围,而不是一味地给用户降价或是发优惠券。规划更多的秒杀、每日特价、分享领券等活动专区,在设计页面时增加优惠券、红包等元素,突出省钱、低价等文案,可以有效地吸引此类用户,引导他们下单付款。这就是本质需求的应用方法。


2.2.3 拆解挖掘到的本质需求———KANO模型

工具——KANO 模型问卷调研,主要依据是用户调研,可以通过定性访谈的方式,对部分用户进行了解,大概了解用户对需求的态度;也可以通过定量问卷的方式,通过问卷获取比较有参考价值的数据信息不同类型的需求和用户满意度之间的关系,将影响用户满意度的因素分成五类:


基本型需求:无此功能,用户满意度会显著降低;有此功能,用户满意度不会显著提升。

期望型需求:无此功能,用户满意度会降低;有此功能,用户满意度会提升。

兴奋型需求:无此功能,用户满意度不会降低;有此功能,用户满意度会有显著提升。

无差异需求:有无此功能,用户满意度都不会有太大变化。

反向型需求:无此功能,不会影响满意度;但有此功能用户满意度会下降。


经过需求分析我们会拿到大量用户需求的相关信息,在取舍和决策时我们可以使用三个原则 + 一个工具:01、

围绕本质需求和痛点;关注与业务不相悖的需求;解决影响用户峰值体验的问题;在做分析时可以利用 KANO 模型,重点关注模型定位出的基本型、期望型需求,适当关注兴奋型和反向型需求。



至此,我们掌握了产品分析的第一步,也就是找到设计的方向和基本依据——用户需求;下一模块我们将进入需求分析的第二步——场景分析,来找到设计可以利用的机会点、切入点!


3.1为什么要进行场景分析


3.1.1 场景是产品设计的基础

01、任何产品的诞生都是基于用途,牙刷为了刷牙、菜刀为了切菜、汽车为了出行……生产这些产品是为了满足用户的需求,而生产产品时需要考虑的因素如外观、材质、设计细节等则源于用户场景。

02、互联网产品其实也是一样的道理,产品基于用户的一些需求或者痛点而诞生,基于用户的使用场景做功能和细节体验。


3.1.2 场景分析的核心能力就是同理心

站在用户的立场思考细节:必须首先知道用户需要什么、喜好什么、讨厌什么、不能接受什么,才能进一步改善我们的产品。基于用户的目的、行为偏好等研究用户在场景里的行为、情绪,从而深入场景,做出正确的决策。


避免主管的质疑和批判:有的用户会有各种各样“奇葩”的反馈,所以我们要多理解用户的选择和立场,避免主观的质疑和批判。


学会聆听和关注反馈:在日常工作的沟通、对用户的访谈中,我们可以试着多用心倾听对方的表达。



3.2 怎么做场景分析——三个工具一个方法


3.2.1 用户体验地图(流程分析)


3.2.1.1概念

01、还原用户体验产品的流程(分析的是场景中的线,包括流程线、行为线等。)02、列出用户与产品、与线下场景有联系的所有触点。03、通过这些触点掌握用户的操作轨迹和行为特征。04、分析用户的体验感受。


3.2.1.2 “五步法”梳理体验地图全流程

01、明确分析对象:最重要的是确定一条明确的流程线,分析的产品某个功能或者某个服务/体验流程,并非用户。


02、拆解体验流程:把分析的流程进行拆分,拆成一个个体验节点实际场景设置节点。比如网约车的产品,要根据用户在线下叫出租车的体验场景来拆分,可以拆成走到路边、招手拦车、上车、行程中、支付下车等几个重要节点,然后根据这些节点来考虑和分析是否有优化或者需要颠覆的地方。


03、创建用户画像:主要从用户的基础特征、用户的心理和偏好等信息去做画像,最后可以形成一个稍稍具体的角色。


04、分析阶段:制作表格,把每个节点的信息进行分析推测和记录。例如下面表格:



横向:第二步拆解出来的所有的流程节点。


纵向:用户与产品的触点:就是用户如何操作我们产品,点了哪里、在哪里停留时间较长,这都是通过埋点数据可以看到的。


用户目标:从用户的使用数据和用户访谈中获取相关的用户信息,通过用户的行为和他们表述的信息找到他们的立场、目的和利益点,从而分析他们想要什么。


用户行为:为了这个目标会怎么做。


结果:看我们的产品页面信息、流程及功能能不能满足用户上述的目的和行为即可。


用户情绪:用户的目标和我们触点是否契合,最终的结果是否能满足用户的需求和目的,没有满足的时候情绪低落到什么程度,满足的时候情绪会高涨到什么情况,哪里是最低谷,哪里是最高峰。


05、得出结论重点要看的是用户情绪的起伏。找到最低点,看哪些节点影响了用户的体验,就是产品的痛点,也是我们的设计发力点和机会点。


3.2.2 同理心模型(节点分析)


3.2.2.1概念

同理心模型适合分析我们产品体验流程中的某个节点或细节功能,不适合进行流程化的分析。包含所看、所听、所做、感受、所想。


3.2.2.2同理心分析方法


01、明确我们分析的对象是什么:比如:网约车用户在打车等待接单的环节;比如电商产品确认订单的环节;这些环节这些环节和节点都有共同的特点,就是集中在有限的一到三个页面中,用户的核心操作比较简单。


02、首先把图表画在白板上,用便利贴写出所看、所听、所做、感受、所想,五个维度的想法,


03、然后进行集体讨论,把这些便利贴提炼总结,归纳出重点信息,通过这种方式可以避免一个人闷头思考的局限性,也可以保证思考的全面性。


04、接下来对这个图进行行为总结,找到用户行为的原因,分析用户的偏好和习惯。


05、最后通过用户情绪和感受,分析我们产品体验的问题。



3.2.3 情感化设计(节点分析)


3.2.3.1情感化设计要素

本能层

亲切:通过情感化设计,营造亲切的氛围,拉近与用户的距离。比如:百度地图可以在导航设置里将导航车标设置成自己的汽车品牌,当看到自己车的车标在地图上移动,用户就会感觉非常亲切和熟悉。


安全:让用户感到人身、隐私的安全。比如:哔哩哔哩在登录界面输入密码时的二次元形象会有捂眼睛的动作。


互动:我们的产品流程和功能的实现需要用户的参与。比如:用户刷新网页时,由于网速较慢、需要较多的加载时间,在加载的过程中,有很多网站会提供一些互动小游戏。用户参与进来了,整体等待的时间也就显得没那么漫长,这种互动既可以缓解用户的焦虑情绪,又能有效防止用户跳出。


惊喜:人们对一件事物的判断往往会基于最初的信息。所以如果我们在提供最初的信息时就给予用户更好的结果,一定可以给用户带来惊喜。花小猪在打车时先出现原价,然后弹出优惠券动效,价格数字也哗啦哗啦往下降,这个不断下降的数字就利用了锚定效应,给予用户一定的惊喜。


行为层

关怀:考虑用户的使用场景,在场景下给予用户细节上的功能推荐或操作建议。比如:美团外卖,在天气恶劣时会提前提醒用户:为避免延误用餐时间,请提前下单。比如:滴滴出行,在用户经常通勤的时间段也会自动提示:由常用起点至常用终点的路线派车大概需要XX分钟,点击即可叫车


预期:难以避免需要等待、甚至反复操作的情况,此时为避免用户跳出,你需要在细节上做好预期管理。比如:我们在用支付宝还信用卡时,支付完成后我们能看到已提交——待银行处理等环节的流程提示。比如:我们在填写一个需要补充大量信息才能注册的网站账号时,网站顶部一般会有注册步骤的导航。当然以上只是最基础的预期管理,如果你的文案能更俏皮一点,视觉效果上增加一些 IP 、甚至动画就更好了。


反馈:对用户的操作及时给予回应,尤其是异常场景,需要使用用户更容易接受的方式给予反馈。


反思层

情怀:能给用户带来情感上的力量。


品牌:在产品的配色、排版、控件样式上体现品牌的统一调性。在产品的体验流程中贯穿品牌的价值。比如:在京东自营的店铺购物、使用京东物流的产品会标明“京东物流”,在确认订单页也有“京准达”的功能选项,京东通过这种方式,将自营物流、快速到达的品牌特性一一表达。


价值:实现更大的社会价值,从而提升企业形象。比如:商城的包装箱、腾讯的 404 网页上都能看到一些被拐儿童的寻人启事,因为这些网页和包装材料的传播力极大、传播范围极广,可以带来良好的社会公益效益。


3.2.4 故事版

故事版:体验地图和同理心模型,可以分别从流程到节点对场景进行分析,那么这些场景如何归纳和表达,以供大家决策和评审呢?需要站在用户需求的角度讲故事。故事板这种漫画/故事的形式易于被受众接受,在阐释需求、说明方案时具有更强的亲和力和说服力,


描述过程:创建的虚拟人物;明确关键节点;找到虚拟人物在整个故事中所有行为和目的。



产品思维、需求分析、场景分析这三部分是产品设计三个基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。接下来我们要做的就是明确设计目标。



4.1为什么要明确设计目标

01、一接到需求就马上打开软件开始往上铺图,遇到被卡住的情况,没有办法继续做下去,总在纠结。

02、有时候产品经理对某个需求也提不出很明确的方向,我们设计的时候能搞出几个方向的方案,但是不知道如何决策。

03、我们在着手设计的时候就没有想好我们输出这个设计图的目的是什么,比如需要促进产品什么转化、解决用户什么痛点、解决体验上哪些问题?

04、我们做这些工作的目的是XXX,只有达到这个目标我们做了这么多工作才有意义、有价值。

05、在日常工作中你也会发现,产品设计不等于纯创意设计,产品设计的关键价值在于发现和解决问题,通过对体验流程和页面细节的处理/优化,得到我们期望的用户反馈和业务数据。


4.2 整个项目设计思考的流程

01、设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标;

02、然后是将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标;

03、上线后,及时收集和整理设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标;

04、然后规划下一步的迭代方向。



4.3 怎么设定设计目标“三步法”

01、明确用户目标和产品目标:设计目标的根本是产品目标,产品目标的根本来是业务目标和用户目标,也就是业务的规划和用户的需求、痛点。因此在实际操作中,第一步我们要先明确我们的产品目标是什么,产品目标大多和用户的转化、功能的使用率有关,我们朝着这些方向分析一般不会有较大偏差。


02、通过上面目标找到与之相关的关键用户操作:比如点击加购按钮、比如完成付款验证操作、比如填写全部表单信息。


03、将关键的用户操作转化成可以衡量的数据指标:将这些关键的用户操作转化为可以衡量的数据指标,比如加购 BTN 的点击量、订单提交后的付款成功率、比如表单信息的完整率。因此设计目标必须是可量化的,产品使用数据和业务数据,比如点击量、退出率、取消率、跳出率等,才能在设计方案上线后正确评估我们的方案有没有完成设计目标。



5.1怎样跨越设计难点

01、先去定位设计难点,找到设计重点,再着手设计。完成主流程后再去解决小问题。

02、接着列出流程或需求点,对设计方案有大致框架;

03、然后针对流程中每个节点列举可能会出现的问题把精力放在影响设计目标和用户核心体验的重点问题上。


5.2怎样解决设计难点

精益创业模式里有一个 MVP 的概念,我们现在产品研发中的敏捷模式也是源于这个概念。简单来讲,就是用较小的成本先做出一个产品,然后快速上线,验证业务模式、产品策略和用户体验等问题,然后小版本快速迭代,进行优化。



参考资料:

《用户体验干货笔记》

《用户体验要素》

《腾讯产品法》

《交互设计知识体系》




C端设计前的准备工作,其中重点在于学会需求分析和场景分析。具体掌握需求分析的核心方法步骤,和场景分析中用到的三个工具用户体验地图、同理心模型、情感化设计、和故事版。需求分析、场景分析是产品设计的基本要素,做好这些分析能帮助我们了解产品、业务与用户之间的联系,从而做出体验好、价值高的优秀产品。这些分析都是我们进入设计工作的前期信息和准备依据。


接下来我们要做的就是明确设计目标,设计目标的来源是用户目标、业务目标和产品目标,依据这三个目标,我们将其转化为设计目标,然后将设计方案朝着既定目标实施,在方案的流程和细节里体现/实现我们的设计目标,在产品上线后,及时收集和整理和设计目标、产品目标相关的数据和用户反馈,验证我们的设计方案有无达到目标,然后规划下一步的迭代方向。

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

文章来源:站酷 作者:morning_c

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

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

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


剖析车载界面设计

资深UI设计者

       HMI是Human Machine Interface 的缩写,“人机接口”,也叫人机界面。凡是参与人机信息交流的领域都存在着人机界面。本文将深度剖析车载界面的设计要点及注意规范。

       智慧城市的建设趋势越来越显著,政府对于汽车智能化、信息化发展非常重视,汽车驾驶体验感与个性化的设计也会成为我们对于汽车选购的参考和方向,自从人们对于用户体验的重视,人机交互设计工作内容也成为重要环节。

       对于人机界面,首先我们要明确一些概念。


1、人机界面与人们常说的“触摸屏”有什么区别?

从严格意义上来说,两者是有本质上的区别的。因为“触摸屏”仅是人机界面产品中可能用到的硬件部分,是一种替代鼠标及键盘部分功能,安装在显示屏前端的输入设备;而人机界面产品则是一种包含硬件和软件的人机交互设备。在工业中,人们常把具有触摸输入功能的人机界面产品称为“触摸屏”,但这是不科学的。


2.人机界面产品中是否有操作系统?

任何人机界面产品都有系统软件部分,系统软件运行在HMI的处理器中,支持多任务处理功能,处理器中需有小型的操作系统管理系统软件的运行。基于平板计算机的高性能人机界面产品中,一般使用WinCE,Linux等通用的嵌入式操作系统。

       我们做的交互场景是有车辆行驶的,所以首先是要考虑安全因素,美观其次,因此在特殊环境下操作车载系统,我们无法用传统移动端沉浸式的设计思维来设计车载的界面与功能,需要放下所谓的美学,紧扣实际场景下的交互方式与用户需求来设计,因为在极短时间内导致我们必须对所有可能用到的功能入口一步即达,对信息的布局必须做到一眼即见。



       汽车HMI有自己的设计原则和设计规范以及美学理念。

汽车行业本身是一个有着强烈美学理念和设计规范的行业,其实准确的说应该是汽车HMI中控设计是基于自身传统规范,结合互联网移动端和Web端的基础上,慢慢形成了一种新的设计规范。


       在开始讲解之前,我们首先要了解官方的一些设计规范。

1. 阿里 Alios 开放平台

https://miniapp.alios.cn/index#/document

2. 百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

3. 谷歌驾驶

https://developers.google.com/cars/design/design-foundations

4. 苹果 Apple Car Play

https://www.apple.com.cn/ios/carplay/

5. 华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902

   

       我们还要了解车内屏幕的类型,主驾驶前面的仪表盘、HUD和中控屏幕,副驾驶和后排的娱乐屏幕。

1. 仪表盘

汽车仪表盘是反映车辆各系统工作状况的装置。一般由时速表、转速表、机油压力表、水温表、燃油表以及电子指示灯等组成。汽车仪表是驾驶员与汽车进行信息交流的重要接口。当今纯液晶屏的仪表盘占市场主导地位,纯机械、灯显、段码将退出历史舞台。

2. HUD

平视显示器(Head Up Display),最早是航空器上的飞行辅助仪器,运用在战斗机上,由于战斗机上很多信息需要飞机驾驶员随时查看,避免驾驶员低头看仪表而分心,随后又普及在民航客机上,由于HUD的方便性以及能够提高飞行安全,这项技术后来也发展到汽车行业,汽车搭载的HUD抬头数字显示功能,是利用光学反射的原理,将重要的行驶信息胎压、速度和转速等信息投射到驾驶舱前段玻璃上面,在驾驶过程中不用分心看仪表盘,减轻眼睛的疲劳,给驾驶带来便利和安全。


       此前,HUD前装市场基本被日本精机、德国大陆、日本电装、伟世通等国外巨头垄断,且竞争格局高度集中,前五名企业市场份额超95%。近三年,随着国内智能驾驶技术商业化落地加快,不少自主品牌供应商开始崭露头角,且爆发力十足。HUD的发展会越来越迅猛,原因主要有以下几点。

1、HUD作为ADAS人机交互的窗口,可以呈现驾驶辅助信息,提升驾驶的安全性和舒适性,使驾驶者拥有更佳的应用体验;

2、为提升市场竞争力,车企对自动驾驶和智能座舱重视度提升,尤其是自主品牌车企近年在国家智能网联发展战略的推动和扶持下,转型动作快、力度大,产品创新和应用上也更加大胆和前卫。、

3、HUD技术上取得突破,显示效果大幅改善;

4、随着技术升级,HUD配套价格逐渐下降,性价比逐步提升;

3. 娱乐屏幕

后排娱乐屏更像是一个平板,主要功能点为视频、音乐、游戏等等,帮助后排乘客打发时间,所以后排的娱乐系统就是为娱乐而生,无需考虑安全性。

车载界面的设计原则

1.迅捷性

与人们常常所说的三秒设计原则类似。移动端系统为沉浸式操作,而车载系统不一样,在驾驶过程中,用户95%的精力在于聚焦驾驶上行为上,用户只能抽取仅5%左右的精力与时间来操控车载。因此也就决定了车载系统的功能逻辑,信息布局都必须在极短的时间内以最好的方式呈现。

而如果用户没有在这个时间以内完成操作任务,要么用户选择放弃,重新再来;要么用户花费更多时间和精力,但这样驾驶的危险系数会成倍增长。经笔者多次在不同路段试验,统计下来平均每次操作,即视线与注意力专注在车载上的时间,无法超过三秒,事实上,当进入第三秒时,已不得不需要利用余光开始注意前方路况了。

因此,在三秒以内,无论是用户第一次操作失败,重新注意路况后,再重复操作,还是用户持续操作直到任务完成,都是非常危险的行为,在这里,由于用户试错的成本非常巨大,也因此交互的设计与信息布局的设计都需要做到最极致的状态。


       随着大屏、多屏化的发展趋势,触摸和语音控制应时而生,为了增强操作合理性,以及减少或避免触摸屏的误触功能。从信息输入来看,以触控、语音为主,手势、视觉交互为辅;从反馈输出来看,以视觉、语音、触控交互为主,嗅觉交互为辅。

人机交互定义需要区分车辆是行驶中还是静止状态,车辆在行驶中,对于需要驾驶员操作反馈的交互行为需要遵循3S原则(上面提到的三秒原则),降低安全隐患。甚至有一些交互动作在车辆行驶过程中需要禁用的。

2. 聚合性

得益于计算机算法的强大,汽车功能越来越完善,信息量也越来越大,为了让用户有更好的体验,避免过多信息的干扰,必须做到界面显示轻量化。

这也是为什么飞机驾驶舱内、国际空间站内的各种操控开关拉杆都是星罗密布式的摆放,并非以如今的科技无法做到像科幻片里一样简洁干净的操控台,而是因为考虑到在实际应用场景下,专业素质的人员不需要也没有时间去欣赏美观的界面,学习我们所认为的交互方式。


保障关键信息是醒目的,容易让用户视觉快速捕获,在各种环境场景下具有良好的可见性和易读性,无需驾驶员费力寻找和识别。

3. 及时性

这里所说的及时性指的是反馈信息的及时性,我们要考虑实现全方位的信息提示,着重考虑视觉层面和听觉层面。

在驾驶的过程当中,司机的双手被占用,于是眼睛和耳朵感知要提高,与移动端的视觉显示不同,HMI设计师需要注意除了基础的视觉显示规范外,还需格外注意与安全相关信息的展示、视觉警告、文字易读性和显示眩光等显示问题。

在车辆行驶过程中,对于司机来说,听觉反馈也是很有必要考虑的场景,通过语音反馈司机需要获取的信息,能让司机尽量保持视觉焦点在路况上。多场景的融合考虑信息获取的效率,能减少在开车过程中的安全隐患。

我们不仅要考虑设计层面,还要考虑到交互层面。

交互方式

(1)触控

这里分两种,一种是通过按键控制;一种是通过触屏控制。

都是通过不断的触控功能按钮行程锻炼肌肉记忆,现在的趋势越来越趋向重触屏,轻按钮,这样不仅系统迭代成本小,功能可以动态分布。

但是对于一些精准调节的功能还是按键控制好一些。

微软 的Surface Dial可以给我们很好的启发,智能旋钮可以解决大部分屏幕调节的不精准的痛点,而效率又高。

(2)语音

在汽车人机交互中,语音交互被认为是车内场景下最自然的交互方式,而语音交互需要一个载体来传达多样化的情感。

语音控制的前景主要在于两个因素,一个是可以把除了界面以外的利用起来,一个可以与HMI自由交谈,二是最小化HMI手动操作产生的干扰,增加安全性。

(3)手势

手势交互是对语音交互、触控交互的很好补充,能够让车主通过简单的手势和语音就能完成车内的交互任务,也是能够增加交互趣味性、表达情感、传达情绪的另一个自然交互方式。

常用的手势:单指滑动(上下左右)、双指滑动(左右)、五指抓取等。

HMI的交互手势不同于手机和IPAD,手机和IPAD握在手里,左右手都可以操作,多指组合的可能性也多,而HMI的手势定义,更多的是需要满足驾驶员的使用场景,屏幕是固定在车上的,要规避掉一些不方便的手势。

比如双指往上滑动就很不方便,向上推不灵活,也有阻力。

       所以要想系统整体跳出基础可用性范围,进阶到好用的层次,系统对各种复杂交插的应用场景的处理需要更加智能(如导航中的来电,紧急路况的提示),对车内环境控制(如声音、气温)需要更加敏感。车载系统的设计相比于移动端有着更明显的约束,不论是从空间、时间、行为、心智,都有着明显独特的场景和特点,要做好车载系统设计,我们需要有丰富的同理心以及亲身体验并反复验证设计。

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

文章来源:站酷 作者:弧形线

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

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

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



日历

链接

个人资料

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

存档