首页

2021年中国高精地图产业研究分析

涛涛

编辑导语:2021年,随着高级别自动驾驶技术的快速和智能驾驶汽车量产落地,作为关键环节的高精地图也愈发受到车企的重视。当前,部分车企L3自动驾驶车辆开启量产之路,高精地图渗透率大幅提升,前期获得订单的图商优势将进一步扩张。但是,对于行业各方参与者而言,高精地图需要长期的技术支持和大量的资金投入,中国高精地图市场竞争格局将愈演愈烈。

 

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

文章来源:人人都是产品经经理  作者:易观分析

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

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

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


2021 出镜率最高的 7 种网页 UI 风格

涛涛

虽然说 2021 已经快到 10 月份,但我最近我还是花了点时间,搜罗全网设计,总结出了这 7 种出镜率最高的版式风格,也是今年最流行的设计表现形式之一。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

看完这一波网页 UI 类设计,再也不愁接下来该如何做设计创新了。

图与线叠加

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

这是今年出镜率比较多的一种设计风格,不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

又或者说图形只是作为装饰作用。

纯文字版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

上图是典型的文字图形化,将文字转化成线性设计。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

还可以将文字处理成圆形,与圆形图相呼应。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化版式今年出镜率尤其之高,将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化设计还可以用在背景,作为设计装饰效果。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

使用线条

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

好了,差不多到这里就结束了。7 种风格,希望能给大家带来一些新鲜的设计想法,在工作中将其运用进去。

当然,在做设计提案版式、作品集包装都是可以参考,希望大家不要被局限。

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

文章来源:优设  作者:功夫UX

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

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

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



顶部导航 vs 侧边导航,到底哪种更好用?

涛涛

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题,如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究,结论是在左侧设置导航好处多多。此外还有很多类似的研究,你可以在这里看到很多相关研究的摘要。值得注意的是,这些研究大都是 2017年之前的研究成果,而如今很多设计范式发生了变化。

顶部导航 vs 侧边导航,到底哪种更好用?

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明,用户习惯于使用 F 式的浏览路径,这使得左侧导航在一般情况下有着相对更强的可用性,它不需要用户视线上的查找,因为用户会下意识注意到它们的存在。

顶部导航 vs 侧边导航,到底哪种更好用?

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面,会很容易注意到不同的导航模块对于页面空间的占用比例,左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,因为纵向的侧边栏导航需要考虑到横向的标题占用空间,再加上搜索等功能模块的加入,这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠,这种处理方法也不总是有效的,因为这可能会隐藏相关条目的标签信息,降低了导航的可用性。

顶部导航 vs 侧边导航,到底哪种更好用?

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑,它通常可以显示比顶部导航多一倍的条目内容,如果你的信息架构本身涉及到的一级菜单条目较多的时候,采用左侧边栏导航是明显更合理的选择,而且这种导航非常适合随着时间推移逐渐增加条目的需求。

顶部导航 vs 侧边导航,到底哪种更好用?

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大,但是它也有着更多的空间根据需求来定制各种不同的需求,相比于顶部导航,侧边导航甚至可以直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

顶部导航 vs 侧边导航,到底哪种更好用?

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中,系统默认的用户界面大都采用了灵活的侧边栏导航设计,很多 web 应用也是如此,它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

顶部导航 vs 侧边导航,到底哪种更好用?

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的,但是在侧边栏导航当中,这种设计可能会在一定程度上遮挡住下级菜单,如果使用在旁边展开的方式,可能会占用大量的空间,总而言之,它更贴合顶部导航的交互模式。

顶部导航 vs 侧边导航,到底哪种更好用?

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭,所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式,这种布局也为产品展示和广告留出了足够多的空间。

顶部导航 vs 侧边导航,到底哪种更好用?

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用,那么是否要借助重设计的机会,切换到另外一种模式呢?根据 Jira 的用户测试,95% 的早期用户对于这种情况会感到非常迷惑,即使是再小的导航功能修改都可能直接影响到大量用户的日常使用,因此不管哪种导航模式,一旦选定,尽量不要改变。

顶部导航 vs 侧边导航,到底哪种更好用?

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航,在移动端上依然可以直接在顶部呈现,不过如果太多了就需要使用汉堡菜单来承载,或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,因为导航模式本身是一致的,但是有限的空间内如何呈现大量的导航条目同样存在挑战。

顶部导航 vs 侧边导航,到底哪种更好用?

结论:用哪种导航栏取决于需求

顶部导航:占用空间小,在页面的位置最为显著,涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站,顶部导航还是很好用的,对于层级较少但是二级条目特别多的超级导航,顶部导航也是不二选择。

侧边导航:侧边导航支持一级条目较多且层级较多的导航需求,扩展性良好,对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

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

文章来源:优设  作者:Taras Bakusevych

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

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

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



联动医疗下的用户研究

涛涛



医疗是多个相关方、多种服务协同运作的。打造智慧医疗,要把握各方的利益关系,才能更好地找到服务提供的突破点。作为用户研究,也需要综合考虑多方诉求,为行业的关注者提供更完整面的理解。

医疗是一个专业的领域,为支持医疗活动的正常开展,不仅需要专业医生参与伤病的判断、处理、治疗,还要有政策环境、资源保障和就诊全流程各环节的多方支持。医疗活动的发生不是独立的,而是多个相关方、多种服务协同运作的。

正如《健康中国“2030”规划纲要》所说,医疗健康是国家战略层面的事情,关注健康、促进健康是国家、社会、个人及家庭的共同责任与行动。打造智慧医疗,只在某个点上进行调整是无法影响整个系统的,把握各方的利益关系,才能更好地找到服务提供的突破点。作为用户研究,也需要综合考虑多方诉求,为行业的关注者提供更完整面的理解。

医疗行业为何是多方联动的

公众越来越重视健康,对医疗服务的需求持续增长

改革开放以来,中国在公共卫生领域投入不断加大,医疗、医保、医药事业深入发展,医疗卫生体制改革不断深化。到 2019 年,我国人均期望寿命达到 77 岁,居民主要健康指标总体上优于中高收入国家平均水平。与此同时,中国居民的健康意识也在逐渐上升,《2019 国民健康洞察报告》 发现,93%的公众认为身体健康是“最重要的事”,远超过“拥有财富”和“满意的工作”,这说明“健康”正在得到越来越多的重视。

但与此同时,真正理解并掌握基本健康知识、拥有健康生活方式的公众仍是少数,公众健康素养水平处于低位,需要专业力量帮助。在中国老龄化进程加快和现代生活压力的背景下,亚健康和慢病的危险因素也在增加。艾瑞咨询的《2018 年大数据时代下的健康医疗行业》报告认为,中国整体诊疗人次和人均诊疗次数还将持续上升,这就意味着,我国医疗健康的需求还将持续扩大。

腾讯实战案例!联动医疗下的用户研究

1. 资源稀缺且分配不均,政府调控有重要意义

区域医疗资源分布不均已经成为各界共识。高等级医院集中在东部,意味着其他地区的居民接触到优质医疗资源的机会相对少。其次,医疗资源利用不合理,三级医院人满为患,基层医疗机构供过于求,8%的三甲医院承担了 40%的门诊量。这不仅会降低就医体验,造成优质资源的严重浪费,也会使得基层医院、民营医疗机构的资源得不到有效利用,影响机构的地位、口碑和患者接触广度。

腾讯实战案例!联动医疗下的用户研究

分级诊疗是政府为推进医疗资源的合理分配提出的政策。在分级诊疗的指导下,常见病、多发病、 慢性病到三级医院诊治的比例会逐渐降低,恢复期、稳定期的患者也会转诊到下级医疗机构,继续治疗和恢复。汇集优质资源的三级医院,则重点负责危急重症、疑难杂症的诊治,并为基层医疗卫生机构提供专业、管理、科研等方面的指导。如果分级诊疗能深入贯彻,将在很大程度上缓解看病难的问题。

2. 医疗健康活动的发生需多相关方、多服务的协同支持

聚焦到就诊“这件小事”上,可以更清晰地看到医疗场景下服务对象的复杂性与多样性。长期以来,伤病的判断、处理、治疗,很难脱离专业医生的指导和医疗器械的辅助。从日常的医疗保健行为——“预防疾病→挂号就医→治疗处理→康复管理”来看,我们也许只是和医生、护士产生了接触,但在疾病的确诊、治疗和护理过程中,还需要一系列相关政策、医疗器械、基础服务来提供支撑。也就是说,医疗健康活动的开展是需要多个相关方、多种服务协同运作的。

腾讯实战案例!联动医疗下的用户研究

以慢病预防管理举个例子。患者在慢病预防和持续管理期,会以直接或间接的方式与多个政府部门、行业机构产生互动。

在预防阶段,公众对慢病的了解主要来源于政策层面从上至下的知识科普和疾病筛查;同时,政府也在从生存环境、全生命周期管理等方面,来为预防慢性病风险打基础。

当居民出现慢病症状后,各级医院则承担起健康监测、生活方式指导和疾病诊断的职责,尽可能降低发病率,及早进行治疗处理。

患者确诊慢病后,医保、医药也参与进来,为居民提供就医保障和用药保障。对于部分无法承担治疗花费的患者,政府还会发动慈善机构等开展医疗救助,让国民获得更大范围的健康保障。

除了我们在表面上能看到的医疗保障和服务,相关部门还会通过国民健康数据分析、环境监测、食品安全检测等,追踪国民患慢病的趋势变化,并通过必要的政策制定和医学科研,减轻慢病对国人健康的威胁,提高生活质量。

腾讯实战案例!联动医疗下的用户研究

医疗行业服务对象的需求联动分析

公众存在医疗需求,政府和医院提供相关服务,并通过资源调配、流程建设、服务流转等方式维系医疗系统的正常运转。在这其中,医疗服务起着关键作用。

从对服务的不同需求出发,引申出政府部门、行业机构和社会公众三类人群,分别对应服务监管方、提供方和接收方。这也意味着,在特定某个医疗场景中,不是只有患者、医生或政府的其中一方,而是多方协作共建的。服务一方,常需要调动另一方的资源和能力。

腾讯实战案例!联动医疗下的用户研究

基于以上三类人群,可以画出医疗行业的干系人地图。提供环境、政策保障的是政府部门,负责监管行业机构的质量达标和服务持续提供,行业机构建设服务,并通过拥有专业技能的人完成服务输送,公众则是最终的服务接收方。

腾讯实战案例!联动医疗下的用户研究

围绕不同人群的角色位置和关注点,可以将医疗场景的研究主题分为国民健康、行业发展和个体保健三个层面,这也是一个从宏观到微观、从整体到个体的视角。

  • 政府部门的关注点偏向国民健康主题,重点是如何从整体上感知国民健康现状和提升健康素质。与公共卫生建设、居民健康促进相关的政策就是此类诉求的典型;
  • 行业机构的关注点偏向行业发展主题,重点是如何通过搭建和完善服务,提升行业服务质量和运营效率。提高机构影响力、服务质量、患者满意度就是此类诉求的典型;
  • 社会公众作为相对分散的个人,关注的是个体保健主题,重点是如何满足日常的就医保健需求,提升生活质量。我们熟知的“看病难、看病贵”,就是公众普遍想解决的问题。

腾讯实战案例!联动医疗下的用户研究

不同主题的调研目标和服务方向是有区别的,在分析用户/客户需求时,需要有多维分析的视角,为业务提供多层次的解决方案建议。接下来,笔者会通过国民健康主题的一个案例,来陈述用研是如何思考多方需求联动的。

案例:疾病预防控制与疫苗接种服务

疾病预防控制是提升国民健康水平、保障民生的重要主题。2019 年 6 月 29 日,《中华人民共和国疫苗管理法》通过,将疫苗定义为“预防、控制疾病发生、流行的手段,事关公共卫生和国家安全”,并且对疫苗管理提出“最严格”要求。要求强化对疫苗全生命周期的安全监管,保障疫苗的安全性、有效性和质量可控。同时,也要加强公众科普,让更多人了解疫苗接种,并主动配合参与。在这个背景下,腾讯医疗有机会与疾控合作,打造首个线上智慧疫苗服务小程序,辅助计划免疫政策的实施。

前面讲到,医疗场景是多方协同共建的,那么,在落实政策的过程中,除了疾控,还需要哪些人参与?服务的使用者还有谁?为了将服务对象及其相对关系理清,可以将调研路径做一些调整,把“多角度思考”作为一个重要主题贯穿其中,来帮助我们理清“研究谁,谁需要什么,我们能为谁提供什么”。

腾讯实战案例!联动医疗下的用户研究

1. 圈定研究对象:从案头研究入手

关于“研究谁”这个问题,我们可以从案头研究入手。

前面我们画了一个粗略的医疗行业干系人地图,在实际操作中,可以对地图做一个简化和抽取,作为聚焦调研对象的指导。在案头研究时,可以围绕政府、行业机构、公众三方,通过政策文件、研究报告、学术论文等,来帮助研究员理解特定场景涉及的组织架构、相关角色和关键流程,圈定可能的研究对象。

腾讯实战案例!联动医疗下的用户研究

基于疫苗服务链条的相关方和业务的资源、能力和业务规划,最终,我们确定以疾控、社康和接种人(或家属)为主要服务对象。

腾讯实战案例!联动医疗下的用户研究

2. 需求收集

接下来,我们经过多方调研,了解疫苗接种的流程、相关设备、医护人员和接种人的互动,从各方视角理解疫苗接种这个场景。在这个过程中,使用的方法主要是实地观察和访谈。

腾讯实战案例!联动医疗下的用户研究

3. 需求分析

通过与疾控专家的多次访谈、社康走访和用户调研,我们梳理了疫苗接种场景的相关方及需求。整体来看,疾控主导疫苗接种的整体方向指导,推广疫苗接种,监管疫苗安全。社康负责实施接种,支持疾控的工作。公众更多的是配合方,需按计划及时、高效、安全地完成接种。

腾讯实战案例!联动医疗下的用户研究

预防接种是一类公共预防服务项目,对预防控制传染病、保障公众健康有重要意义,也一直受到政策层面的高度关注。作为开展疾病预防控制、应对突发公卫事件的重要部门,疾病预防控制中心高度关注接种覆盖率和疫苗接种安全。

  • 覆盖率保障,不仅指加强公众教育,让更多人了解预防接种的必要性和效用,重视并主动按计划接种;也要求相关部门做好供应规划,保障各类疫苗库存充足,满足接种人及时接种的需求,降低传染病爆发风险。
  • 安全监管,包括监控疫苗生产、运输、储存和使用全流程的合理性与安全性,以及接种人和疫苗的身份对应管理,避免信息丢失、混乱和重复接种。

根据不同年龄段和疾病场景的需求,我国为公民提供了覆盖全生命周期、应对多种疾病预防需求的疫苗,其中,以 0-6 岁儿童的接种频率最高,强制性最强。

腾讯实战案例!联动医疗下的用户研究

作为实施方,社区卫生服务中心负责接种全流程的工作推进和安全把关。

  • 日常管理中,社康医护需要做好库存管理和规划,向疾控上报资源需求,合理安排预约量,保证区域接种率。
  • 接种过程中,社康医护既是接种动作的实施人,也是接种全链条秩序的维系者,负责问题解答、流程引导、信息核实、副反应追踪等工作。

腾讯实战案例!联动医疗下的用户研究

公众作为配合方,更多的是根据政策要求和自身健康保障,按计划完成接种。

腾讯实战案例!联动医疗下的用户研究

出于认知水平和需求的差异,公众在疫苗接种中有不同的态度和行为。在此,我们提炼了几类典型用户,来表现不同人群对疫苗的差异化需求。

腾讯实战案例!联动医疗下的用户研究

腾讯实战案例!联动医疗下的用户研究

腾讯实战案例!联动医疗下的用户研究

腾讯实战案例!联动医疗下的用户研究

从用户的典型故事中可以看到,疫苗接种在实施的过程中会遇到各种各样的问题。而且,由于信息不对称、资源供需关系不平衡,疾病防控往往会遇到政策传达不到位、资源紧缺等问题。

总的来说,这些问题表现为以下四点:

接种咨询量大。近年来,随着疫苗接种的普及,公众对疫苗的学习意识和了解程度有所增长,接种及时性也有所提升。但由于医疗知识具有较强专业性,公众对疫苗种类、接种禁忌症、接种安排等了解有限,很大程度上依赖专业医护人员给予指导。而这就给疾控和社康带来了巨大工作量。

及时接种难保障。对于公众来说,接种疫苗的第一步是预约。要保障及时接种,就需要有号或有苗。疫苗预约时,有的约的是号,有的约的是苗。对于儿童疫苗,常常无法确定接种人在某个时期要接种的是哪种疫苗,所以只能约一个名额,到了现场,再由医护判断要打哪种疫苗。但成人疫苗种类较少,通常约号就相当于有苗供应。但不管是没号或没苗,都会影响接种的及时性。

社康在进行库存规划时,一般是参考往年同期的疫苗数量做估算。但由于人口流动、气候变化等因素,每年的实际接种情况都会有所差异,疫苗缺货情况时有发生。若资源调配时间较长,就会影响及时接种,进而影响特定时间段和特定区域的接种率。

接种体验差。疫苗接种虽不属于疾病就医,但其流程与常规就医相近,自然也难以避免“等待时间长”的痛点。加上部分社康指引不清晰,增加接种整体耗费时间,从而加重负面情绪,甚至引发投诉,这又会影响社康医护的工作开展。

腾讯实战案例!联动医疗下的用户研究

安全意识欠缺。接种过程中,“安全”是非常重要的主题。社康医护人员须在多环节确认接种人的身体状况是否适合接种,核对接种类别。

腾讯实战案例!联动医疗下的用户研究

尽管“疫苗的安全性”是接种人(或家属)最关注的话题之一,然而,公众对“安全”的认知常局限于“贵的、进口的就安全”。在实际行动上,对接种安全的重视程度非常有限,包括不认可安全确认流程、不重视接种后留观的重要性和未及时上报副反应,这又会对社康的工作开展造成一定阻碍。

“接种人每天的身体状况都不一样的,需要在接种前确认。有的民众就不认可接种前体检,认为自己清楚身体状况,不需要多此一举。” ——社康护士

“有个患者来打 HPV 第二针的时候说,自己打完第一针之后‘差点要死了’。我不知道是多严重,反正她就是这么说。但是她当时没有告诉我们,也没有去医院看是不是过敏引起的,那我们就会建议她不要打第二针,因为不知道会不会再出现类似的情况。她后来就没打了。” ——社康护士

4. 服务方向探讨

收集了用户的需求和痛点后,就是与项目组成员结合业务资源、能力优势、产品规划、商业化需求等,思考服务方向的可能性。最终,我们形成了以下服务框架——通过线上接种服务和宏观辅助决策平台,优化接种流程,辅助接种情况感知,助力宏观调控与政策落实。

腾讯实战案例!联动医疗下的用户研究

其中,线上接种服务承接公众科普、信息查询、预约服务、接种引导和全流程追踪功能,能够根据接种人的年龄段,匹配对应的疫苗知识,对公众进行持续科普。接种前,公众可以在线上平台查询特定疫苗的库存信息、过往的接种记录和当前接种计划,选择接种时间、地点和疫苗种类。从预约开始到接种完成,线上服务提供全流程指引,包括接种前的饮食、作息注意事项、接种当日流程说明和接种后反馈问卷等。以线上接种服务作为中介,连接公众和社康,有助于降低接种的时间成本和沟通成本,建立全流程追踪路径,让公众的接种需求更快传达到社康和疾控。

同时,基于监管政策实施效果和宏观调控的需求,通过接种数据与宏观辅助决策平台的连通,可帮助相关部门快速了解区域接种情况,辅助资源调配和措施干预决策,落实及时接种、安全接种。

腾讯实战案例!联动医疗下的用户研究

宏观辅助决策平台

关于联动的更多思考

医疗场景是多方联动的,这种特殊性会影响用研的思考方式,也决定着设计时需考虑多方需求和协同共建。依托自身的技术、资源和优势,智慧医疗健康可以通过打通数据、拓展场景、共建生态等方式,为政府部门提供辅助,与行业机构共建服务,满足社会公众多样化、多层次的医疗保健诉求,更好地解决问题。

腾讯实战案例!联动医疗下的用户研究

医疗行业的调研经验探讨

用户研究是一个理解用户和学习理解用户的过程,最后,基于调研实践,笔者尝试总结了在医疗场景做调研的一些心得,在这里和大家分享。

1. 学知识,拿到打开专业领域大门的钥匙

医疗是专业且严肃的领域,不了解基础就医环节和业务的相关知识,不仅会影响受访者的初印象,也容易造成沟通障碍。因此,我们可以通过实地观察、政策文件学习、参加行业会议或讲座、专家访谈等方式,来丰富对行业的认知,更好地明确调研对象、调研方向和调研内容。

腾讯实战案例!联动医疗下的用户研究

2. 涉及隐私,需降低用户的戒备心

健康是非常私密的个人信息,当访谈内容涉及健康状况、疾病信息时,用户容易产生抵触心理,影响调研深度和获取资料的真实性。在开展调研时,需要用合理的身份、在合适的场合进入,让受访者降低戒备心,更好地敞开心扉。同时,使用有技巧的话术,适当调整调研材料,也能让交流进行得更轻松。

腾讯实战案例!联动医疗下的用户研究

3. 有同理心,结合情绪理解需求,探索机会点

当处在疾病场景,或论及患病经历时,用户可能出现焦虑、消极等反应,打乱调研节奏。但情绪并不是只会带来负面影响,它也是我们挖掘机会点的重要参考因素。因此,用研人员可以在对话中多表现倾听的态度,鼓励受访者表达情感,诉说对就医流程的感受,获取更细腻的材料。

腾讯实战案例!联动医疗下的用户研究

结语

在医疗这个专业领域里,我们一直在持续学习和探索。“联动医疗”是理解用户需求的指引,也影响着服务方向的思考方式。基于联动性,用户研究会继续将多对象调研贯穿始终,呈现更系统、多维度的需求关系,与业务共同探讨智慧医疗更丰富的可能性。

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

文章来源:优设  作者:腾讯设计

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

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

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




金刚区的交互设计思考

涛涛

金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

不止画图标!5 个金刚区的交互设计思考

图片来源:淘宝首页

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式

数量

金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

不止画图标!5 个金刚区的交互设计思考

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

不止画图标!5 个金刚区的交互设计思考

顺序

人们在看阅读文字时,视线轨迹是之字形:

不止画图标!5 个金刚区的交互设计思考

人们在阅读表格时,视线轨迹是除草机形:

不止画图标!5 个金刚区的交互设计思考

上图来源:这样设计表格,看着真难受!

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

不止画图标!5 个金刚区的交互设计思考

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

不止画图标!5 个金刚区的交互设计思考

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。

颜色

1. 仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

不止画图标!5 个金刚区的交互设计思考

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

2. 数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

不止画图标!5 个金刚区的交互设计思考

3. 数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

不止画图标!5 个金刚区的交互设计思考

4. 数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

不止画图标!5 个金刚区的交互设计思考

样式

1. 底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,乍眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少:

不止画图标!5 个金刚区的交互设计思考

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。

风格

纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

不止画图标!5 个金刚区的交互设计思考

联通手机营业厅

不止画图标!5 个金刚区的交互设计思考

QQ 音乐

不止画图标!5 个金刚区的交互设计思考

京东

不止画图标!5 个金刚区的交互设计思考

美团外卖

不止画图标!5 个金刚区的交互设计思考

每日优鲜

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。

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

文章来源:优设  作者:ZoeYZ

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

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

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



设计师如何设计出合理的方案!

涛涛

相信身为设计师的我们,在工作中肯定遇到过自己加班加点,绞尽脑汁设计出的方案被质疑、挑战,在宣讲自己设计方案时,总会出现以下声音:

起初的无言以对到有理有据的辨析设计方案都体现出对设计方案更加全面的思考。

想要让自己的设计方案更合理,获得大家认同,可以分为 4 个步骤:

1、 树立自己用户思维

2、充分辨析用户需求

3、严谨打磨设计方案

4、精准有趣的文案


 

1、树立自己用户思维


我们常说吃饭不积极,思想有问题。看似玩笑话,但是蕴含的是对于吃饭是本能,是刻在脑子记忆中的。而设计师在做设计时,也需要有这种“本能思维”。

用户思维最基本就是 围绕用户 帮助他们 解决实际问题。如果用三个字来概括的话:人、场、事。

人:目标用户

场:在什么情况下?

事:要干嘛?


例:笔者  因为在家写文章没时间出去吃饭  ,所以需要点外卖  让别人将饭送到家里。

一个合理的设计方案,必然是将人、场、事很顺畅的串联下得出的结果。


2、充分辨析用户需求


用户之所以有需求一定是遇到了问题(需求源于问题),只要找准问题所在就能明确用户需求,那我们的设计便成功大半。辨析用户需求可以从两反面:

2.1、确定问题

2.2、清晰表述问题

2.1、确定问题

除了常见访谈、问卷、测试等调研手段,设计师可以采用【同理心图谱】的方式推导用户需求

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


例:日常支付场景

2.2、清晰表述问题

想要将问题表述清楚,还是回到第一部分我们讲的:人、场、事上,通过陈述句将用户面临问题和期望状态(目标)的差距描述出来。

如:小明在QQ群里抢发红包中,由于当前支付流程冗余导致他支付效率较低,影响了大家氛围。

①、表述始终都是围绕用户

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

②、表述需保持宽泛性

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

③、表述内容一次聚焦一个问题

专注一点不要试图在一个问题陈述中解决太多用户需求,一次解决一个就很好了。


3、严谨打磨设计方案


在打磨解决方案上,设计师需要考虑 易用性、易理解性、及着力提升用户任务效率,给用户一个更好的体验。在打磨设计方案时,我们不必在一个方案上求多表现,一个方案能能够将你所要表达的设计要点表达清楚即可,主要注意:

3.1、结构简洁,重点突出

健康码主要是为了让工作人员快速辨别人员是否安全,但在众多人中需 快速判断,这个转化到设计上解决方式:通过大面积的 色块直观反馈;通过实时的 滚动时间+滚动背景反馈真实性;在结合下方核酸与疫苗辅助判断,整体非常贴合实际诉求,重点突出,有节奏感。

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


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

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

在58二手车页面的改版中,顶部按钮直接 分流 不同目的用户;中间模块展示用户 最关心的维度:价格、品牌、车类型;下方 透出推荐内容 吸引用户往下逛。

如上图百度网盘的分层设计(图片来源:大牙的设计笔记)中,设计师根据不同的会员周期,改变以往的“多人一面”,打造出“多人多面”灵活分层页面布局,将复杂状态很好的根据不同时期进行拆解。


3.3、场景化设计(预判你的预判)

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

打车软件在特定时间点自动浮出目的地,微信聊天窗自动出现截图、验证码直接在键盘上方等都是通过用户的行为预判了用户下一步的行为,极大的提高了效率


3.4、注重情感化

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

----------------------------------------------------------------------------------

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

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

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

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


4、精准、有趣的文案

文案这块本应该属于上一个模块额范畴,之所以单独讲是因为文案对于体验而言太重要了,优秀的文案不仅可以减低用户理解成本,还可以让用户感到兴奋、温暖、愉悦,并感叹:卧槽,牛脾。

 

身为交互设计师,不需要做到像杜蕾斯那样上热搜的文案、solgan,但设计稿中的文案必须要做到:表达精准无歧义、适当趣味化。


4.1、精准文案

我们是通过屏幕与人交流的人,屏幕上的文案触点之一,因此简洁精准的表达出我们要说的内容很重要。这设计中,首先应该避免一些专业术语、“高大上”的词语,应该简单直白,用最简单的词语,去掉那些不需要出现的词。

①、直接告知行动:在微信发语音按钮文案(按住 说话,松开 发送),非常直白的告知用户需要做什么,且文案中的空格这个细节也将先后顺序表达的十分清晰;而QQ在长按时没有进行文案的提示着点体验上就不如微信了。

②、文案尽量简短:成年人 1s 可阅读 7 个字左右,豆瓣的评论引导就非常简短,直接三个字:写评论,明确引导用户点击;而知乎为了营造良好的社区氛围,引导用户言行友善,但文案较长,相比写评论而言显得不够简明扼要,如果改成:友善评论...  是否会更好?

③、避免使用双重否定的句式:在微信撤回的反馈文案中采用了双重否定的句式(是否撤回该条消息)这样的句式容易增加认知负荷;而淘宝删除记录反馈文章中,则直接询问:确认删除?这样的句式更直接,更好理解。这里我尝试将微信撤回反馈改成:撤回该条消息?下方操作文案也直接使用撤回,这样看起来是否更明确了呢?


4.2、根据不同场景适当趣味化文案

结合自身产品定位:上述两个案例续费文案都是展示了自身产品的定位进行设计的,相较于冷冷的会员到期提示,这样的方式更显趣味性。

文案适当拟人化:拟人化的文案可以拉近用户距离,会显得产品更有温度而不是冷彬彬的机器,有时还显得有些小可爱~(#^.^#)

----------------------------------------------------------------------------------

所以在具体交互方案上,设计师对于文案的把控记住以下几条原则:

①、字词简单,用用户看得懂的字;

②、表意准确无歧义;

③、字数简短,陈述语句,避免使用双重否定类句式;

④、必要时可适当拟人化、趣味化。

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

文章来源:站酷  作者:小发的设计笔记

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

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

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


深度解析需求可视化体系搭建 「KANO MODEL」

涛涛

你是否在面试有中被问到,你设计的页面需求是如何获取的? 需求是如何聚焦筛选的?需求是如何做优先级排期的?在互联网产品的全生命周期里都会涉及到很多的需求。企业的CEO、甲方客户,用户调研各方得到的需求时常扎堆,就算是一个小功能也会有很多问题,呈分散式、零星式。


哪个需求对用户来说最重要?用户对我们的新功能是否满意?我们究竟要先做哪些需求?在企业里,大多数时候项目排期内,我们都面临着开发、设计、测试等人力资源有限的境地。用户什么都想要,但是不可能所有功能都一起开发、上线。作为用户体验设计师或者高级UI设计师,我们有充分地理由掌握一个科学系统的方法可视化需求排期。到底有没有一个科学的方法论把需求划分优先级,去说服你的老板、甲方、产品、技术和你自己?


废话不多说 ,我们直接上干货!



1. 什么是KANO模型?


维基百科对KANO模型的定义如下:

The Kano model is a theory for product development and customer satisfaction developed in the 1980s by Professor Noriaki Kano, which classifies customer preferences into five categories.

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。




2. 用户满意度与功能完善程度


“用户满意度”是用来衡量需求实现后,用户的满意程度。具体可以分为以下几个等级。



“功能完善程度”是用来衡量某个功能被实现的程度。具体可以分为以下几个等级。




3. 五种需求类型


通过“用户满意度”以及“功能完善程度”两个维度,我们可以划分五种不同类型的需求:


(M)基本型质量 —— Must-be Quality

(P)期望型质量 ——  Performance Quality

(A)兴奋型质量 —— Attractive Quality

(I)无差异型质量 —— Indifferent Quality

(R)反向型质量 —— Reverse Quality



(1)必要型:产品必须要有的功能,属于用户的基本需求,即用户的痛点。需求满足时,用户不会感到满意;需求不满足时,用户会很不满意;当投入达到一定程度时,不需要再过多的投入。

比如:我们生活中常见的必需品。手机要可以打电话,汽车需要能加速和刹车;微信的聊天功能、抖音的短视频功能、百度的搜索功能等等一系列产品必须的功能。


(2)期望型:(线性增长)用户希望有的功能,用户在其他产品上使用过并养成了一定的用户习惯后,作为期望的标准也希望产品能具备此功能。需求满足时,用户会感到很满意;需求不满足时,用户会很不满意;这类需求与用户的期望契合度极高,需求实现程度越高,用户的满意度也越高。我们要集中投入。

比如:手机的储存容量、续航能力越高,用户的满意度越高。当地服务类生鲜外卖产品,骑手的实时定位以及距离送达时间就属于期望型需求。但也随着整体功能不断完善也在慢慢从期望型需求转化为基本需求。 


(3)兴奋型:超出用户预期的的功能。是产品差异化的亮点,如果没有该功能,用户的满意度不会降低,但是如果有了该功能用户的满意度则会大大提升。能极大的提高用户的满意度,但是同时也要付出大量的研发成本。兴奋型需求一般是目前市面上没有的功能,用户没有接触过,也没有养成用户习惯。

比如最近网易云音乐、QQ音乐等推出的一起听功能,bilibili推出的一起看功能就属于兴奋型需求。早年间里第一次使用微信便捷的语音交流,第一次使用抖音等,会让我们在初次使用时出乎我们的意料。


(4)无差别型:用户不在意的功能,这类需求的有无对用户来说无关痛痒,用户并不关注。

在APP中一般为特定目的而产生的多余设计,如提醒你续费会员页面,属于引导消费。这类需求要避免投入过多,将精力转移到其它类型的需求上面去。


(5)反向型:会引起用户反感的功能,是指用户不希望出现在产品或服务上的功能。出现时,用户的满意度不增反降。比如在进入一款APP时有四五个弹窗活动入口引导充值和诱导消费,需要逐个点击关闭才能进入页面,这类设计越多用户的负面体验就越强。


Tips:比如我们做一款手机,打电话功能是基本型需求。我们需要花费大量的时间去夯实这个功能,把它做的稳定准确。如果一款手机打电话交流都有问题,而去花费大量精力去优化它的拍照,视频等功能。就是失去了一款手机最基本的使用。这与产品设计初期优先考虑产品的可用性与易用性,是否能打中用户痛点同理,先把精力集中做好基本型需求,而不是过度关注在产品设计细节等期望型、兴奋性需求上。



4. Kano品质要素图


根据前面“用户满意度”作为纵坐标,“功能完善程度”作为横坐标得到这张Kano品质要素图



Tips:在图像中可以看到,魅力属性和期望属性是会慢慢发生变化的。魅力属性会随着时间推移、用户习惯的养成、竞品的影响等,慢慢转化为期望属性。一部分的期望属性会随着时间推移、用户习惯的养成、操作流程的影响等,慢慢的转化为基本型属性。



5. 操作过程




Step 01 .明确需求


首先我们选择要进行排序的需求。


在实际的工作场景中,我们往往在一个工作周期内可能同时会接到很多的需求。我们面临项目时间紧,开发、设计人手资源有限的境况。我们首先就需要筛选出适合Kano模型的需求类型,才能更好的进行下面的评估过程。


我们的需求池中往往有着不同类别的需求,有的是需求是关系到最终用户,有的需求是运营、管理层、甲方客户。按照常规的需求类型大致可以分为这几类:


(1)软件问题(技术类):这类问题多为软件BUG,这类问题通常涉及到我们的产品是否为用户提供了良好的可用性(产品功能初期一般优先考虑的是可用性和易用性)体验,一般属于基本型需求,因此属于需要紧急处理的问题。


(2)用户问题 (交互体验类):这类问题多为交互体验问题,例如用户使用产品过程中出现的不知道如何使用某功能(没有做功能引导、不符合用户心智、学习成本高),或者某功能找不到在哪(功能个入口不清晰、信息入口层级过深)等类似问题。


(3)产品建议:这类问题基本上属于期望型需求,例如用户希望增加某某功能或在某个操作流程感到缺少什么功能。


(4)其他问题:Kano模型适合与最终用户可以直接操作、感知、相关的需求。而不是针对于产品的运营人员、管理层、甲方客户等的需求。



Tips:因为KANO模型只从用户满意度及功能完善程度这两个维度出发去分析需求价值,所以并不适用于当价值衡量需考虑其他维度因素,如需要将战略、商业收益纳入考虑等等。



Step 02 .选择用户


选择我们产品的目标用户。


可以在问卷题目中增加条件筛选,在后续问卷收集后进行数据清洗。比如产品的目标用户为18-36岁女性用户,就可以在问卷中增加询问年龄问题,在收集上来的数据结果中筛选掉这一部分非目标用户数据。为我们下一步的问卷设计投放做准备。




Step 03 .问卷设计


针对第一步梳理后的需求集,进行正反向的发散。KANO问卷每一个功能或需求问题是由正向和负向两个子问题构成,分别是用户在具备或不具备某项功能做出的反应。问题选项按照:非常喜欢、理所当然、无所谓、勉强接受、很不喜欢,进行评定。


对此我们问用户3个问题:


(1)正向问题:

如果我们增加【功能1】,你的感受是?


(2)反向问题

如果我们不增加【功能1】,你的感受是?


(3)重要程度

【功能1】对你来说有多重要?



Tips:在实际调研中,产品具有某个功能,大部分人不会表示“不喜欢”或“无可奈何”。“无所谓”一般是态度的下线,即很少会有人会觉得“很不喜欢”或“勉强接受”。所以在问卷设计阶段为了提高用户填表的效率,在选项设定中正反向只设定3个选项。




可以采用定量调研的方式,使用“问卷星”设置好问题发在产品用户交流群中或私域流量群中。



Tips:

  1. 如何向用户提问,如何收集用户的回答将直接影响到需求排序的结果。这一步非常重要。

  2. 提醒用户正反问题之间的区别,注意强调“增加”还是“不增加”,防止用户看错题意。

  3. 在实际题目设置中,当功能数量比较多(大于5个时),有比较接近类似的,建议对用户进行分组,每个用户最多回答5个功能点,且尽量是区分度大的功能点。

  4. 有时需要对功能进行解释,确保用户能够理解。



Step 04 .数据清洗分类


调研后需要对数据进行清洗,处理掉一些用户乱填或错误的数据。比如所有题目都选一样和一些可疑结果的数据。



Step 05 .结果分析


(1)需求类型参照表


基于收集的问卷量化的结果,进行需求分类分析。每组正反向问题的排列组合一共是25种,得到需求类型参照表。这张表格中,将重点关注正向的回答(即 > 0 的部分),这样我们可以帮把注意力放在最重要的正向需求上面。(避免关注到“具备功能时”用户觉得“勉强接受”和“很不喜欢”的需求上)




Tips:Q:代表可疑结果。对于一个功能的提供与否,用户都表现出了很喜欢或者很不喜欢这种自相矛盾的情况。所以,这样的结果在最终统计时,一般都需要排除掉。


(2)需求排序


需求优先级排序为:基本型 > 期望型 > 兴奋型 > 无差别型 > 反向型 



在需求数量不是很多只需确认需求分类时,到这里就可以结束了。只需要基于以上结果进行统计,根据少数服从大多数的逻辑,最多比例的属性作为统计后的结果,即该需求分类。


比如:【功能1】最后收集数据为,基本型42、期望型28、兴奋型0、无差异型7,【功能1】为基本型需求。再根据需求排序确定优先级。



如果涉及到较多需求,或者同类型需求有多个需要优先级排序时,你还需进行下一步。


(3)better-worse系数


我们引入better-worse系数的概念,表示某功能可以增加满意或者消除不喜欢的影响程度。


Better系数=(期望数+兴奋数)/(期望数+兴奋数+基本数+无差异数)

= (P+A)/(P+A+M+I)


Worse系数=  -1 *(期望数+必备数)/(期望数+兴奋数+基本数+无差异数)

= -1 *(P+M)/(P+A+M+I)


Bette系数,可以简单理解为满意系数,代表如果产品提供某种功能,用户满意度会提升。Better值越大/越接近1,则表示用户满意度提升的效果会越强。


Worse系数,可以简单理解为不满意系数,Worse的数值通常为负,代表产品如果不提供某种功能或服务,用户满意度会降低。其绝对值越接近1,则表示对用户不满意度的影响最大。



(4)结果可视化


1. 横坐标为Better系数,纵坐标为Worse系数绝对值。根据实际得到结果将最大值均分依次放入两个坐标轴上。



2. 分别计算Better系数平均值、Worser系数绝对值平均值,将其作为参考警戒线加入图表中。



3. 将各个需求的对应的Better系数值、Worser系数绝对值放入图像内。



4. 我们将根据需求的重要性,来调整上图中点的大小。这时我们引入功能重要程度概念(在前文问卷问题中有提到),这里可以量化功能需求的重要程度,从“不重要”到“非常重要”,1到9分依次可对应需求点的直径大小,比如“非常重要”点为90px直径的圆,可根据具体情况灵活运用。




5. 根据需求优先级排序为:基本型 > 期望型 > 兴奋型 > 无差别型 > 反向型 。同一需求类型再根据重要程度二次排序。


6. 至此各个功能需求优先级排序一目了然。



6. 总结回顾


最后,我以“呱呱生鲜”产品为例子回顾整个Kano模型可视化需求的流程。



Step 01 .明确需求


这次我们有10个需求需要做需求可视化。分别为:


Q1:在点击订单结算后提供优惠换购功能;

Q2:询问上次购买订单是否满意反馈弹窗;

Q3:会员每日可领取免费菜功能;

Q4:进入APP提醒不在常用定位地址功能;

Q5:商品详情页面菜品推荐做法功能;

Q6:有辣味的商品图片提醒辣度指数;

Q7:商品详情页面菜品直播功能;

Q8:商品列表显示菜品榜单排名参数;

Q9:购物车结算提示可以免费领取小葱;

Q10:猜你喜欢你的常购清单功能;


因为KANO模型只从用户满意度及功能完善程度这两个维度出发去分析需求价值,以上10个需求功能均为用户可直接感知。符合Kano模型条件。




Step 02 .选择用户


选择产品的目标用户进行问卷投放。



Step 03 .问卷设计


对此我们问用户3个问题:


(1)正向问题:

如果我们增加【功能1】,你的感受是?


(2)反向问题

如果我们不增加【功能1】,你的感受是?


(3)重要程度

【功能1】对你来说有多重要?



使用“问卷星”设置好问卷问题投放在产品用户交流群中或私域流量中。




Step 04 .数据清洗并分类


对调研后收集上来的数据进行数据清洗,处理掉一些用户乱填或错误的数据。比如所有题目都选一样和一些可疑结果的数据。




Step 05 .结果分析


(1)基于收集的问卷量化结果,对照需求类型参照表,进行需求分类分析。


(2)结合需求优先级排序:基本型 > 期望型 > 兴奋型 > 无差别型 > 反向型 。


(3)计算better-worse系数,计算Better系数平均值、Worser系数绝对值平均值,将其作为参考警戒线加入图表中。


(4)将各个需求的对应的Better系数值、Worser系数绝对值放入图像内。


(5)我们将根据需求的重要性,来调整上图中点的大小。


(6)得到最终的需求可视化排期图,至此各个功能需求优先级排序一目了然。




7. 写在最后


我们设计师需要在自我能力范围内,不断提升为企业团队服务,增加自己对内话语权以及对外影响力。成为自我驱动高级体验设计师。在工作中也需要对需求做一个设计价值和优先级的排序,搭建需求可视化体系。对不同的需求进行品质类型划分,列出属于自己排出的需求列表,在更有价值的需求上花费更多的时间精益求精。

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

文章来源:站酷  作者:JI_Design 

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

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

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



UI设计师如何高效支援Banner设计需求

涛涛


为什么需要高效?


当下互联网进入以内容运营为核心的时代,市场竞争激烈,需要对于市场的热点进行快速反应,持续迭代。不管是大厂还是小厂的UI设计师多多少少需要支援运营需求。U1S1 做简单运营图对于体验设计方向的设计师来说,性价比确实有点低,一般难度较高的运营设计需求都由专业的视觉设计师来做,体验设计师一般接到的都是比较简单或者紧急的需求,这对于设计的能力提升来说是比较有限的,大量的时间被占用在运营设计上,持续被榨干,有些本末倒置,但人生就是这么操蛋,总得想办法解决。



Banner构成拆解


就目前大部分互联产品的Banner而言。

其构成一般由标题文案、主体元素(人物、物品等)、背景(场景、底色等)元素构成。



模板化沉淀


面向设计师:模板化运营设计 + 素材资源同步盘

第一种方法是本文的核心方法,原理很简单,其实就是利用Sketch和或者Figma的组件化(为了统一语义本文统一称为组件,其子集为用例)进行设计。

我们将这些元素分别打包成组件.



把组件的用例调整后放置在预览区所有不同尺寸的画板中。

当出现需要特殊调整的时候可以解绑微调。如果希望给画面添加一些细节的话,再另外添加即可~


这么一波操作,大概1个多钟就可以输出一整套7个图,足以应付一周22套运营图的需求了(悲伤的故事)


当然要达到这种速度还需要一个通用素材库的加持。空闲时间把一些KV的图素拆出来放到Eagle共享盘,这样你和你的小伙伴们就可以高效愉快地拉图了...



面向运营同学:创客贴等第三方设计平台

在创客贴搞个团队模式,然后设计师把常用的一些模板上传上去,运营同学只要自己改改文案,换换人就可以啦



设计规范制定


虽然有了模板化的设计工具,但如果缺少了设计规范的引导,就会宛如脱缰野马,设计出各种偏离业务需求或风格不一致的Banner出来。

设计规范需要与运营同学共同协商制定,比如标题最长长度、排版构图、图素尺寸等等。具体规范需要根据不同的业务需求进行定制化。

下面就以我们团队的制定方式作为范例说明一下。



排版构图

常规的排版构图模式有居中式构图、左右构图。

居中式构图:居中式构图是将主体放置画面的中心进行构图。这种构图方式这种构图方式的最大优点就在于主体突出、明确而且画面容易取得左右平衡的效果

左右式构图:左右构图将文字标题元素和主体物按照比例分割进行位置安排。符合用户阅读习惯:阅读视线要符合用户从左到右或从上到下的浏览习惯。



尺寸

Banner的尺寸需要根据UI界面的需求进行制定。

例如针对我司的产品,一个活动最多有7个运营位的样式,分别在首页、搜索位、文章封面、活动中心、闪屏等。


标题长度限制

由于运营同学有时候对于标题的长度没有经过精简优化,标题特别长长长长长长长长,加上Banner本身就小,在手机屏幕上基本看不清,也就没有意义了。因此需要共同制定好主标题副标题长度限制,超过就直接打回重改。


出血设置

制定出血位的原因是某些尺寸的图素可能出现在多个不同的入口,以及不同尺寸的手机屏幕可能会出现裁剪的现象。



视觉走查


不论是设计师也好,运营同学也好,完成设计之后最好建立一个视觉自查表进行对照,目的是尽量减少一些原则性错误,减少来回改稿的情况。



流程化闭环


为了更完美的提升整个流程效率,不仅需要升级中部流程,前后端的流程都需要进行优化。

首先是最好在需求的前端建立需求排期表进行需求的筛选。

分门别类地将需求的详细信息进行可视化展示,对应的需求文档接入。这里不得不吹一波飞书文档,太**好用了。

针对需求的后端即设计交付环节,最好是在设计稿导出的时候使用工具进行压缩,更小的体积意味着更快的加载速度,这对于提升产品的用户体验是毋庸置疑的。这里推荐2个工具:

1.imageOptim

2.Picdiet https://www.picdiet.com/zh-cn (个人推荐JPG使用这个网站,压缩的质量最高)


总结


最后,如果实在人力不足的情况下,就把项目外包出去吧,毕竟占用UI设计师太多时间产出如果没什么价值的话,其实roi也是很低的,设计师的人力成本也是钱!

“能用钱解决的问题,就用钱解决!”—— 鲁迅

如果运营经常提出很多无理的需求,比如量很大,没有什么依据都是拍脑袋想的,那可以考虑把项目外包出去,一旦外包出去,花的就是真金白银,让运营也知道,这是设计师呕心沥血画的,市场的价格就摆在那,整天搞些有的没的是否真的能对项目带来价值。

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

文章来源:站酷  作者:坡安Chris 

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

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

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


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

涛涛

我们在设计中经常会遇到新版本或改版的设计,从创意想法到设计初稿的过程可能会花费比较长的时间。而作为设计师除了自己思考设计之外,还需要与产品、设计老大沟通我们的一些设计想法。因此,我们需要在不同的阶段输出不同的内容反馈进度并达成一些共识。


在多年的设计过程中,我也经常会去尝试一些情绪版的设计,在这方面也沉淀了一些自己做情绪版设计的方法。因此可以借助这次机会给大家分享下这方面的经验,同时也希望起到抛砖引玉的作用,与大家交流下这方面的内容。




情绪版的概念


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





II 情绪版的大概流程

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




前期:分析-收集

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




中期:筛选-组合

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




后期:打磨-呈现

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





III 为什么要做情绪版


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


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


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

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

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

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




IV 情绪版的作用

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




1/辅助构建世界观

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




2/具象设计想法

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




3/明确设计方向

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





4/提高前期设计的效率


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





情绪版的基本原则


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




1/多方向性

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


2/尝试性

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


3/效率性

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


4/试探性

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




VI 情绪版设计的方法


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


1.借鉴图像/插图

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




2.结合实际场景引申

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




3.借鉴摘取同类型设计

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




4.绘制草稿

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





VII 情绪版设计的注意事项


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




01/控制方案的数量

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


02/避免篇幅过长

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


03/区分重点次要

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


04/结合世界观

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


05/保持整体风格一致性

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


06/完整性表达

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




VIII UI情绪版模版分享


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


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




UI情绪版模版




过往实际案例分享


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


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


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




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


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


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




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


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


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






IX 最后总结


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


以上都是属于我个人总结的一些经验,因此建议大家在日常项目中多去尝试,并在尝试中找到适合自己的方法。

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

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

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

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

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


交互深耕-B端设计师要懂的信息架构

涛涛

信息架构这篇是本人在现阶段觉得较难学习与阐述的知识点,网上关于信息架构的知识内容也是参差不齐。在学习与探究的过程中查阅了很多资料,反复修改多次,尽量用直白的语言结合实例来阐述信息架构。目录如下:

大家可以根据上述目录来进行选择性阅读,当然全文阅读也是极好的~





1.1 前言

这篇文章的起源,来源于最近看到的话题“B端设计师会被组件库取代吗?”。从表面上看,在组件库越来越完善的时代,很多页面设计依靠组件库就能够快速搭建。


那么在这种情况下,B端设计师存在的意义和价值到底体现在哪里呢?其实B端设计的重点并不在页面的视觉上,视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」,比如以下几个方面:

1.这个设计能否完成对应的商业目标和产品目标;

2.我们的信息呈现是否合理以及能否解决当前需求;

3.用户能否在页面上快速找到想要的信息;

而想要弄清楚并解决上述这些问题,在众多的话题阐述之下,我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知,这能够帮助我们做出正确且出色的设计。


1.2信息架构概念

关于信息架构的概念,在百科上面的定义大部分都比较晦涩难懂,比如维基百科和百度百科的解释:

相信大部分人都很难明白其中描述的意思。在这里换种思路,将信息架构拆分为信息与架构去理解。

信息指的是内容的载体,常见的文字、图像等都是信息;架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来,然后呈现出来。其本质就是研究信息的表达与传递。

通俗点讲,信息架构就是让用户可以更容易的理解我们的产品,让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式,它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。





为什么需要信息架构?我们都知道B端产品设计的核心是「降本提效」,在设计这一侧的可以将其理解为降低认知成本,提升使用效率。

降低认知成本需要我们更好的表达信息,让用户能看明白我们的产品能够做什么,如何用;提升使用效率需要提升信息的传递效率,让用户能够很容易的找到需要的功能;


而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑,那么我们在页面上看到的可能就只有功能的堆叠,让产品陷入难以上手或者不知道怎么用的尴尬境地。

一个强大信息架构是产品质量的保证,是作为设计支撑点的骨架,它会减少可用性问题,提升整体导航行,创造对用户友好的体验。比如举一个工具层面的例子:

PS的工具栏堆叠在界面各个部分,而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好,PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。


可以说良好的信息架构是高效用户体验的基础。视觉元素,功能,交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计,我们就需要参与到信息架构这个过程中来,和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。


如果想要搭建一个好的建筑,我们需要知道其建造的目的,是按照什么样的结构搭建,内部有哪些系统,以及最后呈现的模样。


那么信息架构也同理,我们首先需要知道信息是为了什么目标服务,然后我们通过怎样的结构来组织这些信息,以及过程中会用到的信息元素,最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻,那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。


3.1 信息获取:先理解业务,再谈架构

B端行业对于业务理解的要求是比较高的,只有在理解业务的基础上,将业务需求转化为对应的设计目标,我们才能够输出合理的信息架构方案。

个人认为理解业务的基础,就是能够用一句话讲清楚当前设计的产品。这句话可以描述为:谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」,这就是外卖软件提供的产品服务。


虽然看上去这句话很简单,但其中包括了三个要素:用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。


3.1.1用户:分清购买者与使用者

用户永远是排在第一位的,也是我们首先需要弄清楚的。在B端设计中,本质上可以分为两类角色:客户和用户。比如我们常用的钉钉或企业微信,购买客户是企业,实际用户是员工。

对于企业:「我想要有一款软件可以更好的管理员工」

对于员工:「我想要这款软件能够更好地提高工作效率」

客户决定了我们产品的购买(部分情况下也兼顾使用),而用户则决定了后续产品的复购率。因此在业务理解中,我们需要弄清楚当前产品所处的服务阶段,比如初期为了打开市场肯定更倾向于客户,而中后期为了提高产品的使用体验又会偏向于用户。


因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务,这也就决定了我们在设计信息架构时对应的不同侧重点。


3.1.2场景:需求源于场景

场景是指需求产生的某种条件,这个条件包括但不限于环境、时间、地点、空间等,只有上述条件满足,这个需求才能成立。这里可以把场景理解为产生该问题的原因

比如当用户提出「她需要一件衣服」,那么我们就需要弄清楚用户为什么需要添加衣服,是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。


在平日的工作中我们可以通过以下两种方式来更好的了解业务场景:

1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景,我们可以通过文档进行初步了解。

2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分,我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。

毕竟需求背景是理解业务的重要步骤,我们只有知道需求产生的原因,才能够针对性的给出解决方案。


3.1.3目标:业务目标和设计目标

目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标,而我们要做的就是将业务目标转化为我们此次的设计目标。


A.业务目标

业务目标就是此次业务想要解决的实际问题,它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车,减少等待焦虑。我们一般通过文档或者沟通来了解该目标。


B.设计目标

设计目标是我们基于业务目标而给出的设计策略,是一种更具体的实现方式。比如我们要让用户快速的打到车,那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配,并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有:司机位置、乘客位置、等车时间、补贴金额等元素,并需要思考它们之间的关系和呈现方式。


可以发现从业务目标转化到设计目标这个过程,实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。


3.2信息架构核心:信息组织

从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理,直接堆叠在一起,那么信息含义会比较乱且难以调用。比如下方:

而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类再以某种结构化的形式将它们重新组合排布的过程,直白一点就是先分类,再结构化呈现。我用一张图来表明这个过程:

那么这个过程中「信息组织」和「结构呈现」到底应该怎么做,也就是接下来要讲的组织方式和结构类型。


3.2.1组织方式:模糊分类和精确分类

组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类,比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的:

而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类,比如我们常用的APP商城是按照不同的主题类别来进行区分的。

但在很多时候,产品倾向于将两种组织方式结合起来形成复合型组织方式,从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织,其中既包含了模糊分类(按使用类型等分类),也包含了精确分类(按上传文件时间等)。

其实在大部分B端产品中,大都按照模糊分类来进行处理,比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块,比如创建时间和文件大小等。


归根结底,我们分类方式的选择需要结合我们前面提到的用户、场景和目标,这样才能让我们的分类更具说服力。


3.2.2组织结构:选择合适的结构类型

当信息按照分类维度组织后,我们接下来就是把整体信息进行结构化,这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式:


A.层级结构(最重要的结构)

这是信息架构中最为常见的结构,也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。

层级结构的优势就在于可以承载复杂的多层级内容,通过层级递进的方式将复杂的多层级拆解得更简洁。


但我们需要把控好内容的广度和深度,广度指的是在层级结构中每一层的数目,最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息,增加寻找内容的负担。深度为纵向结构,建议一般3层,最多不超过5层。过深的层级会让用户点击很多次,且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。


B.矩阵结构(多维度结构)

矩阵结构是各个节点都相互连接的一种信息架构方式,通俗来讲就是用户既可以通过多个维度去触达同一信息,也可以从单个维度连接多种信息。

这种结构其实就更类似于我们在做相关功能时:比如当你进入电影全屏时想要退出时,既可以通过点击按钮退出,还可以通过键盘的Esc返回到,通过多点触达同一操作。


又比如我们的联系人功能,我们既可以通过输入数字拨打电话,也可以查找联系人进行拨打,还可以查询电话记录进行回拨。

矩阵结构最重要的意义在于给用户提供多种路径,使用户能够在不同路径中寻找各自想要的东西。


C.自然结构(随机性)

自然结构不遵循任何一致的模式,节点都是被逐一连接起来的。

自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台,你很难猜到刚进入看到的是什么。

但一般自然结构不会单独存在,比如B站在自然结构中也绑定了层级结构来进行层级上的划分。


D.线性结构(单一性)

线性结构是非常单一的一个结构,整体是一层一层向下递进。比较强调先后顺序的一种结构。


这种结构通常用于我们常见的软件安装程序等,也可以用于部分功能结构,比如网站的视频发布,一般都是经过上传-编辑-发布这三个步骤来依次进行。

大家可以发现在进行信息架构时,我们在很多情况下可能会运用多种组织结构方式,我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。


3.2.3注意事项:关注用户心智模型

在信息的组织过程中,我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知,看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯,这都属于用户的心智模型的内容。


因此我们在组织信息时尽可能不要去打破用户常见的心智模型,否则必然会导致用户的不习惯。我们常见的「扫一扫」功能,微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。

这样会导致用户难以发现该功能。因为用户接触新的信息时,会以最初接触的局部信息为依据展开并形成初步认知,用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。


虽然建议在一定程度上遵循用户心智,但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语,我们需要通过灵活有效的提示(比如标记注释等)来引导用户就可以了。比如我们刚才提出的抖音扫一扫,它的应用场景其实是用于抖音官网后台登录,且在后台登录时已经给出了对应提示,那么这样的设计也是合理的。


3.3信息架构支撑:标签、导航和搜索

当经过上面的信息组织,其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外,我们还需要关注以下三点:标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。


3.3.1 标签系统:让信息识别更通用

标签系统,通俗来讲就是要我们对当前整个系统信息节点的命名,从而让信息的呈现更容易识别。拿个最简单的例子来进行说明:

可以看到左侧和右侧关于卫生间的信息标示,可能左边你能一眼区分,右边可能就需要反应半天才能猜出到底代表什么含义了。


这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景,也就是我们标签作用所起的作用。标签可以分为图片和文字标签,都需要考虑用户对该信息命名的认知程度,也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢,这里需要注意2个方面:


A.优先选用被行业广泛接受的词或图标

在进行标签定义的时候,尽量选择已经被用户所熟知的词语,比如「工作台」「通讯录」等已经被运用得非常熟练,对于类似功能就直接以该形式命名,比如我们的设计软件中,很多图标和功能名称都是通用的:

这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业,哪些名词已经达成了共识,就无需再造新名词。


B.不确定的词语可以参考竞品或调研来决策

当某类功能或场景的标签难以确定时,我们就可以尝试去找一下竞品是否有类似功能,或者找该行业的领头羊(比如聊天工具的巨头微信),那么在进行标签定义的时候,可以参考它的命名体系。因为它已经替我们教育了一部分用户,会间接降低学习成本。


如果某些标签在上述过程中还是无法确定,那么我们结合自己经验或者与咨询业务相关人员来进行讨论,在必要时候可以在标签旁边添加注释来进一步说明。


3.3.2 导航系统:让用户不迷路

导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样,导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。

因为网上关于导航系统已经有很多资料的讲解了,在这里阐述下四类导航的含义:

1.全局导航:位于页面最上层的导航,用户几乎在页面的每个地方都可以看见,是最高层级的导航系统;

2.局部导航:位于最高导航的下级子类导航,子类导航并不是必须的导航,根据场景进行取舍;

3.情景式导航:通过点击文字链接进行跳转的导航,比如在个人资料里面植入其它网站的链接地址;

4.辅助导航:这里包括网站地图,网站索引,网站指南等辅助类型的导航。


辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导,是当用户在进行某些功能的操作时及时进行提示,这样不仅达到了为用户引导的效果,还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后,只有当你调用组件功能时,才会及时进行提醒。


3.3.3 搜索系统:让用户轻松找信息

搜索,是我们平日最常用的查找信息的功能,它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要,但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点:

1:内容复杂度:当前页面承载的内容复杂度如果较少,对于简单内容页面往往不需要搜索;

2:内容性质:当前页面的性质是偏向于用户浏览还是查找,根据用户行为来决定是否需要搜索;

3.搜索场景:如果搜索场景很简单,考虑是否只用筛选或分类就能够解决问题;反之如果搜索内容很复杂,我们还可以搜索结合筛选来更好的查找信息;


上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点,比如搜索规则和搜索结果等,在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。


3.4信息架构表达:视觉化你的架构

我们通过上述方法已经知道如何梳理信息架构了,那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。

在学习的过程中,发现部分资料认为信息架构就是单纯的指思维导图,但实际上信息架构并不能单纯只用思维导图就能够完全表示。

因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式,其可以帮助我们在思考阶段梳理整体产品的信息构成。


这里抛出一个很有意思的观点,那就是「功能结构图」和「信息架构图」到底什么关系,这里用两张图示例:

可以看到,功能结构图更多体现的形式是功能阐述,一般形式为名词+动词,比如头像设置;而信息架构图重点呈现的应该都为信息元素,一般为名词,比如头像图片。

但在大多数时候我们看到的产品架构图,其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。


因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制,只要能够帮助你清晰表达产品整体结构就行。《信息架构:超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义,其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式,其表达如下:

可以看到其表达形式包括思维导图和流程图等形式:思维导图的优势是能够总览全局信息,查看信息的深度和广度,而流程图的优势则更能够表达整体的逻辑关系。


因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥,而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果(类似于中间态),我们需要借助它来更好的阐述思路与沟通想法。


3.5信息架构之后:让信息具像化

在输出信息架构之后,其实这里想聊一聊页面的呈现。因为当梳理好大的框架后,剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段,其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点:

A.页面能够让用户看懂

这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息,反思一下是在哪个方面做得不好。是标签系统含义模糊呢,还是信息的组织分类方式不对。从页面呈现倒推信息架构。

综合来说就是设计时的排列要考虑用户的心智模型(比如网页的常规排版和通用名词定义等),对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的,但我们可以尽量减少其学习成本。


B.考虑用户的视觉动线

当我们在进行信息排列时,这时需要思考的就是用户的视觉动线,也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说,采用不同的动线模型能够让用户更好地查找信息。

F模型和Z模型的使用区分其实就是在使用场景上,对于内容页面来说F模型会更为合适(比如文章或者搜索结果),适合文本类的内容。但对于非文本的页面,则更适合用Z模型,Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右,从上到下,能够更好引导用户的视线。


C.掌控好适度的信息层级

B端由于在视觉的发挥空间不多,那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。

不管是原型图还是视觉,整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多,需要考虑是不是因为信息架构设计时纵向层级过深,通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。


当我们做完或者听别人阐述对应的信息架构时,该如何评判呢,到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断:

业务层:

1.设计目标合理:能平衡商业目标和用户的目标,保证客户和用户都有较为良好的体验;

2.核心任务目标:能够让用户顺利完成产品的核心任务,需要通过用户测试来进行验证

结构层:

1.平衡广度和深度:在进行功能使用时不会隐藏的太深而找不到,是否有冗余步骤

2.保证拓展性:当前信息架构在面对未来新增或者删减信息时能够稳定拓展

体验层:

1.保证易读性:用户不经过介绍,通过页面信息呈现能够看懂该产品是用来做什么的

2.保证易查找性:用户在需要某个功能时能否快捷的找到,是否有多种查找方法(比如搜索或筛选)


合理的信息架构需要具备以上条件,我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足,这个时候我们需要根据业务目标的重要性来选择某些点进行满足。


梳理一下整体文章的架构,其实是按照「是什么-为什么-怎么做」的形式来进行拆分的:

这篇文章想要表达的观点,不是让设计师独立去梳理整体信息架构,而是让设计师拥有信息架构意识,了解其是如何进行并产生的。这样你在看到整体架构时,有足够的理论支撑去判断它的好坏,并通过自己的理论认知去理解和改进不好的地方。


当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出「正确的设计」,避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。


注:文章中不可避免会存在不足之处,如果对文章中内容有更好建议,欢迎随时交流。


  参考资料:

《web信息架构》第四版

《信息焦虑》

《用户体验要素》

《信息架构设计》

「从设计前/设计中阶段,了解信息架构知识点」

「互联网产品如何搭建信息架构」

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

文章来源:站酷  作者:进击的M

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

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

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

日历

链接

个人资料

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

存档