首页

UI设计体验如何提升?|北京蓝蓝UI设计公司

分享达人

SaaS 产品体验要求越来越高,用户体验已经成为产品竞争力的重要组成部分,怎样在多业务线的产品环境中做好体验设计,本文从贴合业务线的设计规范、敏捷易用的前端组件库、产品研发协作流程保障、UI体验文化打造、UI设计质量品控5个方面阐述项目快速、规模化提升多产品线整体体验过程中方法论和实践经验。

商业设计如何赋能?沟通工具升级实战案例!|北京蓝蓝UI设计公司

分享达人

一、什么促成了变革?

1、爱番番沟通工具是什么?

爱番番沟通工具是连接访客和商家客服的在线咨询工具,是一款智能客服产品,为企业提供“从流量到成交”全链路解决方案。客户只需在网站增加一行代码,就拥有了访客从“进站、浏览、沟通、成单、分析、建议”一站式的智能营销解决方案。目前客服侧有Windows端、Mac端、Web端、APP端。

2、如何找准变革时机?

  • 从社会层面上来说,服务线上化越来越成熟,随着AI、5G等新兴技术的普及,以及新冠疫情的爆发,线上咨询渐多,智能客服潜力逐渐显现,越来越多的企业顺应消费新需求,加速布局智能客服赛道,提高企业数智化水平;
  • 从行业趋势上来说,据《2021年中国智能客服行业研究报告》显示,2020年中国智能客服行业市场达到30.1亿元,同比增长88.1%,预计2025年中国智能客服服务行业的市场规模将超过百亿,市场规模呈现快速增长趋势;
  • 从业务层面上来说,互联网高速发展带动了客户需求的快速拉升,积极关注客户需求,及时与时代共振才是业务长效经营的抓手。

数据来源:《2021年中国智能客服行业研究报告》

3、如何抓住核心痛点?

通过深入了解客服工作环境、操作行为习惯、协作流程, 结合线上全流程体验问题分析及客户满意度调研,定位了旧版核心问题,主要表现为:

  • 易用性差:信息获取使用门槛较高,在信息查找、操作便捷等方向不能满足需求;
  • 效率低:重复性咨询多,沟通任务重,在提高沟通效率方面有强诉求;客服角色流动大、难以24小时值守,易错失商机。

同时客服角色日常工作强度大、压力大,易出现情绪不稳定,探索全场景的贴心陪伴将成为产品设计情感化的切入口。

围绕以上核心问题,通过降门槛、提效率、探索情感化等设计策略,最终提升产品满意度,打造智能高效的流量转化工具。

二、重构设计策略

1、降门槛 · 框架重构简化信息复杂度

01. 会话场景重构

如何让信息有条理地组织、清晰易读,是本次体验升级优先要考虑的因素。我们首先针对核心会话场景进行了信息重构。

  • 列表区,旧版融合了客服多种角色、访客多种状态,理解成本较高;按照客服角色将信息拆解为会话、访客与他人接待(质检)三个导航模块,会话模块保留与当前会话强相关的会话、排队、最近沟通三种,为核心会话场景降噪;
  • 会话区,将访客关键信息区、操作区进行整合,凸显当前访客的地域、关键词、搜索词等关键信息,强化高频转接操作,收敛结束沟通/屏蔽访客/修改名片等低频操作,信息更加聚焦;
  • 辅助区,将高频-常用语区域放大、整合访客轨迹/名片/历史记录至访客信息、强化线索信息,同时最右侧增加辅助拓展功能区,拓展更多空间。

综上,从而形成了新版的会话场景结构。

02. 导航结构重组

清晰的信息展示可有效降低操作难度及决策成本,旧版产品的导航结构交叠复杂,将整体导航功能的一级、二级目录,按照功能分类拆解重组,删减冗余功能,同时结合客服场景的强诉求增加客服管理、服务模块,从而形成新端结构;

我们采用侧边导航栏形式,将上下布局改为左右布局,拥有更好的拓展性,为二级内容提供更好的展示空间,同时导航、标题和内容的对应关系也更加明确。

03. 升级统一的视觉感知

  • 色彩升级:新版色彩应用HSB色彩系统,主色继承爱番番品牌红色,辅助色H色相以225°为起点,以2°递增或递减,S饱和度以5°为阶梯,生成更多色阶,同时确保视力障碍人士友好度,系统中的色彩使用需符合WCAG(Web 内容可访问性指南 ),同时结合典型界面、多种设备、不同角色投票等方式验证下,得出辅助功能色蓝色。

同时运用色环建立辅助色彩,以15°递增或递减,选取类似色和邻近色作为家族色彩主体,调和互补色与对比色,校正辅助色的HSB,达到色彩感官上一致。

  • 图标升级:主功能和次要功能增加图标加强示意,主要功能采用面型图标,次要功能采用线型图标,文件类型采用彩色图标,层级更加清晰明确,风格统一,中性简洁,同时规范化图标的设计规则,赋予界面更好的视觉体验。
  • 形状:页面采用模块化、卡片化的设计方式,更加包容,信息查找效率更加高效。
  • 字号:通过拉大对比字号,扩大信息层级,凸显关键决策信息;灰阶的字色也在保证清晰度对比度的情况下加入了轻微蓝色色相,让整体的信息看起来更加清爽,舒适度更高。

通过升级统一的视觉感知,将整体界面进行了焕新。

04. 构建灵活统一的布局

爱番番沟通工具是一款跨多端的智能客服产品,我们需要打通一个适用多设备、认知统一的设计框架,帮助用户在多设备多环境中无缝衔接。采用响应式布局,应用4倍原则分别适配PC多端,让信息呈现更具秩序感,更好的保证跨设备、多屏幕尺寸下的显示效果;只需要开发一套代码,小成本维护不同设备站点,保证跨终端设备下的体验一致性,降低操作门槛。

05. 打磨体验细节

我们希望在产品细节也能带给用户良好的体验,以会话区缩略图体验为例:从定义、目的拆解,到用户核心诉求:

内容:多以企业产品/活动介绍为主;

层级:由上至下或由左至右展示;

屏效:透传产品标题/活动主体、兼顾最新消息;

速度:越快越好, 如文件过大,希望能明确预期。

结合缩略图本身特性研究,如样式、尺寸、比例、大小、格式、状态、操作及图片选择器等维度以及机型适配,最终定义默认缩略图最大宽度和高度,一屏内展示主体信息,内容由上至下或由左至右的方式剪裁,超出则裁剪展示并明确【长图】标识、明确文件量大小,拓展图片查看器功能及体验,同时沉淀设计规范,提升产品体验。

2、提效率 · 沟通前中后全链路提效

通过用户访谈、问卷调查的形式,梳理记录用户在产品当中关键的路径体验问题,从沟通前中后全链路出发制定设计策略为客服提效降本。

01. 沟通前强化关键信息促决策

访客列表强化关键信息,助力客服更有针对性的接待,提升沟通质量;系统提供预置高频、精细行业问答内容,减少客服输入步长,提升接待效率;强化访客预输入动向,助力客服提前准备沟通策略

02. 沟通中提升输入效率&缩减留资步长

简化客服输入,强化智能回复话术推荐;优化常用语快捷搜索操作,提升信息查找效率;简化步长,访客留资后系统自动识别联系方式有效性,并填充至线索信息,有效为客服减负。

03. 沟通后强化关键信息促转化

强化【熟客】【线索】标识,助力客服更具有针对性的接待;线索详情强化线索跟进阶段,提升客服或销售人员线索跟进效率。

数字化时代,技术的革新也为智能客服赛道带来了新的可能,通过运用实体图谱分析、知识图谱推荐、自主学习等多种AI核心技术,自动优化沟通流程模型,打造AI智能问答助理,7*24小时在线,可在人工客服繁忙或非工作时间提供即时且准确的回复,并通过需求联想提供因人而异的智能化推荐,有效降低客服沟通成本。

3、探索情感化 · 全场景贴心陪伴

客服角色存在工作强度大、每日应对重复性咨询、工作效率低、离职率高、情绪不稳定等问题,我们希望全新的爱番番沟通工具不仅好用,还能给客服繁重的工作带来一些温暖陪伴感知,基于日常使用场景,探索天气提醒、时间提醒、生日祝福、节日祝福等情感关怀,提供更温馨友好的服务,成为客服的贴心伙伴。

三、验证结果

经过10个月的产品打磨及20次产品迭代,客户满意度及线索转化率均显著提升;围绕客户体验,获得3项创新设计专利;2022年荣获德国红点品牌与传达设计奖(类别-数字化解决方案)、美国缪斯创意奖-银奖。

四、写在最后

综上,设计赋能商业,不是用设计来改变商业策略,而是站在用户和业务的视角,运用专业的设计方法去挖掘产品和设计的机会点,助力业务持续健康向上发展,此次我们将爱番番沟通工具体验升级为例,分享设计如何为老牌产品革新延续价值,希望能给大家带来一些参考和启发。

我们正处于数字化快速变革的时代,爱番番沟通工具的升级才迈出了第一步,我们将持续打磨爱番番沟通工具体验,也在往更加智能化、人格化的方向学习和奋力迈进,在满足人们日常沟通需求的同时,致力于让沟通更加简单、温暖、智能和安全。


 

作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

 

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


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

深度拆解腾讯视频app的细节设计

博博

1.内容结构作为视频内容平台,通过对腾讯视频APP的结构梳理,发现产品内大部分的内容都是围绕视频来进行拓展,整体框架分为:首页、短视频、VIP会员、热议、我的这几个模块。本次我们主要针对于首页与播放器这两个场景进行重点分析

2.首页首页作为腾讯视频的首个场景,主要以视频内容推广为主,主要内容有如下:顶部操作区、内容推荐区、各分区推荐页等

2.1顶部操作区
顶部操作区一般集合着大量的操作入口,主要功能如下:加追与预约:其中包含用户添加的追剧列表、热门预约、历史观看记录等功能搜索:点击进入搜索结果页,其中包含热门榜单、历史记录,用户也可以快速搜索自己需要查找的视频内容游戏中心:游戏中心主要是推广腾讯自家的游戏内容,通过游戏中心对游戏进行引流与拉新周边商城:周边商城里面为视频的周边产品,用户可以在周边商城中进行商品购买

2.1.1产品亮点:加追与预约功能在首页左上角增加最近再追功能,此功能让用户在首页就可以更快速的找到自己在追的内容,而且在页面中还包含新片预约和历史浏览记录功能,让用户在了解更多预约内容与历史记录。此功能放在首页很好的降低用户操作成本,提升产品体验。

2.1.2设计误区:加追功能关闭交互加追功能在关闭时有一个缩放交互,此交互场景可以很好的让用户感知当前是从哪里进行跳转,出发点是好的,但由于在点开时没有缩放动画与缩放的样式不太理想反而导致此交互效果并不好,所以可以适当优化下。

2.1.3设计亮点:滑动屏幕顶导隐藏与出现交互当用户滑动屏幕时,顶部操作区会跟随手势进行向上隐藏,这样可以在用户向上滑动浏览信息时给界面带来更多的展示空间,当用户向下滑动一定距离时顶导出现,方便用户对顶导进行相关操作。这里的交互细节很舒适,大家可以多多学习。

2.1.4设计亮点:顶部背景跟随banner颜色进行变化顶部背景跟随banner进行变化,当用户滑动banner时顶部背景会跟随banner的颜色进行变化,这样可以让界面的配色看起来更加和谐,提升界面视觉一致性。同时赋予用户体验惊喜感。

2.1.5设计亮点:下拉刷新新玩法大多数产品下拉都为刷新界面操作,但腾讯视频对下拉进行两部交互操作,用户下拉到第一个阶段会出现提示"下拉发现更多好玩"当前这时用户松手可以进行常规刷新操作, 但用户看到这样的提示会更想知道在向下拉到会带来怎么的内容,当用户再次下拉后会出现对应的内容推荐,类似于游戏推广与热播剧推广,赋予用户惊喜感的同时还能增加广告收入。

2.2内容推荐区内容推荐区主要以推荐视频内容为主,主要功能分为:Banner:banner主要推荐站内的热门内容与广告,支持滑动切换与自动切换展示双瀑布流推荐位与大卡片推荐:卡片形式采用“封面/视频+标题+标签”的形式,推荐一些站内的热门内容与广告内容定制内容页:热门的视频会定制内容页,为视频定制界面样式与布局

2.2.1设计亮点:Banner切换的创新交互方式腾讯视频的Banner 切换动画是十分有特点的,整体是logo的剪影效果,并且在右下角的数量指示点也是logo的形状,很好的突出品牌形象,设计创新的同时强化品牌在用户心中的位置。

2.2.2产品亮点:双瀑布流推荐机制banner下方共6个双瀑布流推荐位,这种排列方式可以在一屏中展示更多的信息,但不足就是如果界面全部都是这种排列方式会导致用户浏览成本提高,降低用户的浏览欲望,所以腾讯视频把内容控制在6个,不会给用户增加浏览负担,其次在推荐机制上对前两个卡片进行“最近在看”标签,和视频预览,相比其他静态卡片可以让用户更加快速的发现自己想看的内容。

2.2.3产品亮点:视频大卡片推荐这种样式的推荐形式虽然同屏下相比双瀑布流的可推荐内容少,但可以让用户更注重内容视频本身,推荐的视频内容都为该作品的热门片段,小编经常看着看着就安利了一个新剧,很适合作为长视频推荐列表使用

2.2.4设计亮点:不一样的定制化分区内容页腾讯视频会根据站内的热门内容进行定制化分区内容页,虽然这种形式在各个视频平台都有设计,但腾讯视频的似乎更加与众不同,它相比其他竞品不仅增加了开屏动画,加强界面氛围感,同时在功能上增加了一级标题,如在长相思专题中的“独家花絮、有声书、看微综、相思榜”等入口,可以让用户在页面中发现更多剧情本身以外的衍生内容,一级标题的形式也可以让用户直达视频播放页,快速了解想要看到的视频内容。

2.2.5设计误区:分区中的入口icon设计电视剧作为腾讯视频的高频点击分区,在头部的icon确实有失大厂风范,图标过大、视觉比例不一致、风格不统一等问题,很影响界面的视觉美感,但入口的点击转化是否有影响未知。

3.播放器相关播放器作为视频产品的核心使用场景,其中的功能非常庞大,腾讯视频的播放器内容主要分为:竖屏播放页与横屏播放器

3.1竖屏播放页竖屏播放页为用户点击进入视频的第一个场景,主要功能为:顶部播放器:顶部为视频播放区域详情:详情中包含视频标题、选集、讨论、周边、视频推荐等功能底部快捷操作区:包含再追、下载、投屏、一起看、分享等功能

3.1.1设计亮点:定制化的视频播放器对于热门的内容,腾讯视频依然会定制化页面,给予专属的配色与标题,给用户提供更加沉浸的氛围感

3.1.2产品亮点:底部操作区功能相比其他产品,腾讯视频在进入竖屏播放页后不会再顶部的视频中默认展示操作内容,给用户带来更好的观看体验,并且把视频相关的操作内容放置底部做成一个底部操作区,用户可以在底部快速的对视频进行操作如:下载、投屏、一起看、分享等。而不是把功能分散在界面中,这样不仅可以降低用户的寻找这些高频操作的成本,同时提升视频的观看体验。

3.2横屏播放器横屏播放器是大家在使用产品中最高频的操作,这里腾讯视频也是下了很大的成本,也有不少的细节,界面的主要功能有:顶部操作区:标题、一起看、臻彩视听、投屏等功能左右侧操作区:锁屏、讨论、拍照、录像等功能底部操作区:进度条、暂停、弹幕、倍速、发电、选集等功能其他场景:弹幕播放、特效、音量控制、快进等功能

3.2.1设计亮点:定制化进度条与标记糖点对应热门视频内容,腾讯视频会定制化进度条样式与进度点样式,(如《长相思》中定制红色木槿花)让用户更加沉浸的观看体验,同时在进度条上方有标记样式,用户点击会触发标记动效与糖点,所有标记的糖点数据也会以波动图的形式显示在进度条上方,提高互动玩法。

3.2.2产品亮点:发电功能为自己支持的CP上分在底部操作区增加发电功能,用户可以点击为自己支持的cp送出礼物,不仅可以满足用户的“嗑CP”心理,同时对直播场景中的核心送礼功能很好的结合到视频产品中,给视频内容提供了商业价值,提高产品收入。

作者:不是作家
来源:站酷

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

奥卡姆剃刀 | 设计师需要知道的设计原则!

博博

有这么一句话:“复杂的事情简单做,你就是专家;简单的事情重复做,你就是行家;重复的事情用心做,你就是赢家”。前言

设计师是一个工作类型较为多元化的岗位,如UI除界面视觉外,还要会点插画、动效、品牌、交互等,而UE除交互体验之外,还得懂视觉、运营、业务以及前/后端知识...。这就逐渐让设计师们形成了一种习惯,涉及的方面越多、经验越丰富,就越容易过度思考,把事情也想的、做的复杂,虽说是为了提升设计价值而想尽办法,但最终臃肿复杂的解决方案不断分散、混淆用户的意志力,让用户体验变得非常糟糕。有这么一句话:“复杂的事情简单做,你就是专家;简单的事情重复做,你就是行家;重复的事情用心做,你就是赢家”。没错,要解决那些臃肿且复杂的设计,首先要做的就是化繁为简,我们可以采用一个非常经典的设计理论「奥卡姆剃刀原则」。奥卡姆剃刀是经过很多前辈反复实践验证过的设计法则,特别在方案的设计与评估阶段非常有效,今天笔者就和大家一起来看看,如何利用奥卡姆剃刀给设计做减法。
分享目录
一、认识奥卡姆剃刀原则二、优秀的设计案例(iPhone)三、奥卡姆剃刀与设计的结合四、不能“剃”的过猛五、结语
一、认识奥卡姆剃刀原则

1.奥卡姆剃刀背景
奥卡姆剃刀原则是由英国学者、逻辑学家、圣方济各会修士奥卡姆威廉(William of Ockham)于中世纪提出,也被称为「奥康的剃刀」、「简单有效原理」。他在《箴言书注》中指出:“切勿浪费较多的东西去做用较少的东西同样可以做好的事情”。奥卡姆剃刀原则意味着当现有的几个理论都能对现象进行解释时,应该使用假设最少的那个。我们不能人为的将事情复杂化、为自己制造的麻烦而烦恼,需要保持事情的简单性才能抓住根本、解决实质性的问题,如果将该原则简化为八个字,即为“如无必要,勿增实体”。

2.各行业中的应用
投资领域:应该用奥卡姆剃刀来应对复杂的投资市场,对于需要消耗大量时间、金钱及精力的事情加以区分并将其简单化,重新定义自己的投资策略,方能那些那些困境;科学领域:不管有几个存在竞争地位的理论,如果最终得出的结论相同,那么就选择最简单的那个;企业管理领域:在制定管理决策时,应该抓住主要矛盾、剔除干扰,尽量将复杂的事情简单化才能解决企业最根本问题,保持正确的发展方向。奥卡姆剃刀原则还广泛应用于政治、社会、经济、设计等领域。不仅如此,很多名人都有过类似该原则的描述:

爱因斯坦:万事万物应该都应尽可能简洁,但不能过于简单。
罗伯特-格罗斯泰斯特:在其他条件相同的情况下,要求得越少的那个就越好,越有价值。
亚里土多德:自然界选择最短的道路。
艾萨克·牛顿:每件东西都应该越简单越好,不能只是稍微简单一点儿。
奥卡姆的威廉:如无必要,切勿假定繁多。
......

3.设计领域中的应用
“剃刀”的意思是将多余的内容削去,删除不必要的步骤、简化冗余信息、减少多余的消耗、呈现最直观的样子、寻找解决问题的最短路径等,都是奥卡姆剃刀原则最直观的体现。奥卡姆剃刀出自心理学和物理学,虽然不是为设计而生,但很多设计师已经将其运用在提升信息传达效率以及用户体验之上。将复杂的设计需求简单化,去除无关内容对视觉的干扰,让设计更严谨、纯粹,确保核心元素能在第一时间被用户察觉并理解对设计师来说至关重要。当然,奥卡姆剃刀也要视情况而定,当内容简化到不能再简化时,就需要设计师通过一些视觉表现手段去吸引、引导用户获取信息,让内容更好的呈现。说的直白点就是在不影响功能、视觉的前提下去除多余元素,同时已保留的内容需要用更简单、清晰的方式呈现给用户。

二、优秀的设计案例(iPhone)

苹果的产品在设计领域无论哪一方面都能作为业界领袖、数一数二的存在,纵观 iPhone 的发展史,无论是硬件外观、还是系统界面,都在一刀一刀的不断去除繁琐、无必要的东西,那把奥卡姆剃刀从来都没放下过。

1.iPhone 硬件外观
2007年,当大家还拿着大部分空间位置都被按键占用(屏幕占小部分)的传统手机时,苹果推出了第一代 iPhone,它直接将机械化按键变成了界面触控,你用它就在那里,不用就自动隐藏了,释放了大部分界面空间资源,显示更多内容,整个手机正面减的就剩下一个 Home 按键。另外,滑动解锁、两指变焦、重力感应等功能更是减少了大量的操作步骤,让操作变的更简单、更容易。2010年的 iPhone 4 是乔布斯时代最经典的杰作,更是为 2012年的 iPhone 5s 创下巅峰打下了良好的基础,机身从弧形设计变成方形和棱角分明的外观设计,到后来的充电接口和插孔的变窄、Home 键去掉中间小方块、机身的变薄、以及再后面充电插口与耳机插口的合并,无一不是在彰显着减法的魅力。直到 2017年 iPhone X 全面屏的问世,将手机正面唯一的 Home 给减掉了,虽然“刘海”的存在一度被吐槽,且全面屏的概念是由小米率先提出的,但如果说是 iPhone 在引领潮流一点都不为过,熄屏后的 iPhone X 就像一块完整的玻璃,即便是刘海也不应效果它简洁且独特的美感。

2.iOS 系统界面
当2007年 iPhone Runs OS X(iOS 1 系统)出现时,应用界面和操作上跟现在的系统很像,里面也有了邮件、日历、照片、时钟、文本、Safari、便笺等应用。流畅的动画、多点触控的交互方式、简洁的UI足以颠覆人们对于传统意义上手机界面的认识。随后,iOS 系统每次新版本的出现,都有一些变化,但与iOS 7 相比,就是小巫见大巫了。2013年,iOS 7 的发布,是迄今为止 iOS 系统史上设计风格的最大一次升级,UI设计由之前的拟物化转向扁平化,整个系统外观看起来十分简洁,新增的指纹解锁、控制中心设置快速切换、中国人喜爱的九宫格输入法,以及简化的图标、交互的过渡动画等,基本上每一各元素都在根据用户的操作及行为习惯发生变化。毫不夸张的说,iOS 7 系统改变了近十年的设计风格,设计趋势也正式从拟物化(复杂)时代走向扁平化(简约)时代。iOS 12 在设计上虽然没有太大变化,但系统的流畅度相对提升了很多,例如相机启动速度提升70%、App启动速度提升40%,新增勿扰模式、密码自动填充等,包括后面 iOS 13 更加省电、面部解锁速度提升、安装包/更新包内层变小等,无一不是在将事情变的更简单、更容易。

三、奥卡姆剃刀与设计的结合

1.简单直接的话术
用户的每一次操作及信息的接收都是与产品的一次交流,在对话方面,不应该使用多重否定、较长的定语或含糊其辞的描述,以免用户出现认知偏差导致理解上的错误,减少用户出错率最直接的方法就是用通俗易懂的极简话术与其交流。

2.N次能解决就不要用N+1
用户在进行一个任务时,提升任务完成率最好的办法就是避免复杂,任何一个流程,能用N次操作解决的事情,就不要用N+1次操作来完成,让用户以最少的点击次数就能完成任务,以提升用户对产品的满意度与忠诚度。下图是用户登录未勾选「用户服务协议」,图1、图2分别给出了不同的交互流程,显然,图2的操作次数更少,让登录变的更容易完成。在设计一个功能时,如果存在多种交互方案,那么最简单那个肯定是最好的。▽图1:四步操作完成登录

▽图2:两步操作完成登录

3.只放置必要的功能
在设计一个页面之前,需尽可能简化内容和操作步骤,但这并非不让产品给用户提供更多信息,可以将「更多信息」用其他方式呈现。例如,某个产品有A、B、C三个功能,A和B是主功能,C是辅助,很多用户更喜欢C,但C的存在会使很多用户离开主功能,这是就需要用到奥卡姆剃刀“削去”辅助功能,让主功能不在受到干扰。这个例子从表面上看似舍弃了优秀的辅助功能,却很大程度的提高了主功能的完成率。“削去”并不意味着删除,如果某些功能不重要但需要存在,可通过削弱视觉权重来做减法,例如将其放在不显眼的位置或提供入口/链接也是很常见的一种设计手段。

4.尽可能的减少选项
这一点与「希克定律」的表达是一致的,做过多的决定对用户来说也是一种麻烦,产品所提供的内容不能让用户有过多的思维负担,尽可能的减少选项,避免用户因选择性困难导致迷茫,如果选项过多,将不常用的隐藏起来。关于这一点,先不多做赘述,后续笔者会输出一篇介绍「希克定律」的文章,会有更详细的描述。

5.克制颜色的使用数量
在同一个产品中,应使用一个主题色贯穿整个设计,作为强调重点的存在,然后再选择1~2个辅助色作为点缀使用。不要添加太多花里胡哨的颜色,增加额外的视觉噪音,尤其是在B端设计中,克制颜色的使用能让整体看起来更加简洁有层次感。

6.已知方案“A”,勿增方案“B”
如果已经有一个非常不错且成熟的设计方案,那么我们应该将其设定为统一的标准,在后续的同类设计中应该与这个方案保持一致,不要固步自封去搞“创新”,因为新的方案很可能存在漏洞、或与之前的法案发生冲突。当然,如果你能承受失败带来的损失,也可大胆尝试。

四、不能“剃”的过猛

将复杂的设计简单化,剔除大部分多余元素是奥卡姆剃刀在设计中的核心理念,但它并不是一味的强调简单的就是好的、复杂的就是差的,应确定好这两种形式的边界在哪里、目的是什么。回归设计本身,剔除的目的不在于追求至简,而是通过合情合理的减法让用户更好的接收信息以及完成目标,一旦“剔”的过猛就会伤筋动骨。2007年,巨头企业微软推出的 Metro UI 就是一个很好的例子,全面去除光影、色彩变化以及质感等细节,直接以简单的色块+icon组合展示,让其变的毫无层次感,多用一点时间就会发现这种简洁过于单调,很容易让人产生审美疲劳。虽说微软设计师的这套扁平设计理念新颖且超前,但用户并没有买账,极度的扁平直接导致极度的冷淡。Metro UI 的失败让后面的 Windows 10 直接放弃了这套设计语言,重新引入了丰富的细节,让设计从纯粹的扁平中得以解脱。超前一代是天才,超前两代就是疯子,很显然,Metro UI 超前过头了,这一反面案例应该值得所有设计师深思。当然,这么说有点“马后炮”的味道,但前辈们已踩过的坑就是我们最好的避坑经验。

作者:大漠飞鹰CYSJ
来源:站酷

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

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

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

从用户场景拔高信息浏览体验的交互设计策略

分享达人

详情页不会仅仅承载房源基础信息,也将是越来越多元化信息的承载体

众所周知,链家在二手房业务中深耕多年,无论是线下服务体系和线上产品工具都处于行业内头部水平。但相较于二手业务,新房业务的整体发展还存在较大差距,部分业务流程仍处于线上化建设中。



聚焦到经纪人的作业工具来看,二手和新房的产品使用体验差异也很大,其中房源模块的问题尤为突出。如果二手房源产品体验是80分,那新房可能只有20分。而房源是新房经纪人最重要的作业模块,在产品满意度贡献权重最高。但满意度偏低,因此其体验问题亟待解决。


图1 节选自《2021H1新房经纪人满意度调研报告》





一、为什么改版


1.改版契机:

新房信息质量正稳步提升


很长一段时间以来,新房房源详情页是被“弃用”的,大多数经纪人使用第三方工具获取房源信息。最底层原因是内部工具上房源信息质量差(不全不准)。而质量差则是由于之前在新房基础建设人力不足、产品迭代慢,不能满足城市业务发展需求

城市为保证各自发展,使用了更灵活的第三方工具进行新房信息传递。2021年上半年随着项目「新房基础信息建设」的进行,新房信息质量正稳步提升,且城市也在使用第三方工具中发现诸多问题,这正是新房房源详情页重振旗鼓的最好契机。


2.产品价值:

促进新房信息线上化正循环


作为新房信息线上化的其中一环,新房房源详情页起着信息呈现的作用。好的呈现方式能够帮助经纪人更好地消费信息,让经纪人认可平台产品和服务,同时经纪人的正向反馈也能激励生产新房信息的驻场们更有动力去维护信息,从而促进新房信息线上化的正循环。


图2 新房信息线上化流程




3.现状问题:

欠缺规划,信息可读性差


改版前,新房详情页继承着二手房详情页的页面结构,但由于业务场景不同,当前信息组织方式并不适合新房经纪人的作业场景。另外近一年内,详情页在没有统筹规划下,陆续接入了“各自为战”的新内容模块

新房详情页逐渐出现信息冗余和混乱的问题,直接影响了信息的呈现效率和可读性。比如在新房业务中房源图片一般是效果图,不能像二手房一样通过图片识别房源,经纪人表示不会优先关注图片,但却占据了首屏1/4的空间。


图3 详情⻚头图占据高优空间却无实际作用




诸如此类的问题还有很多,但散点式的解决问题可能会引发新的问题,因此设计应该重新    回归起点,从用户    使用场景出发。



二、新房经纪人

真实的看房流程


通过访谈经纪人和观察他们的实际作业操作,我们发现经纪人需要查看房源内容的场景可以分为两种——    熟悉楼盘和    回答客户问询,两种场景下的行为目标和对房源信息的关注顺序有所不同。


图4 经纪人看房的真实过程





看房场景1:熟悉楼盘


在「熟悉楼盘」的场景下,  经纪人是在自己准备功课,无客户时识别一些好楼盘来找客户,这一场景下,经纪人会经历以下四个步骤:

识别(楼盘是什么)  

吸引(楼盘亮点)  

深入(了解房源细节)  

匹配(房与客)  

需要按照经纪人的判断逻辑展示房源信息,逐渐引导其做成合理判断。


看房场景2:回答客户问询


与二手房经纪人驻扎在小区附近不同的是,新房经纪人的客户多来自线上商机咨询,即客户在  贝壳APP上看到某个感兴趣的楼盘后向经纪人发起咨询。经纪人  需要在短时间内的交流给客户留下好印象,让客户信任自己,才能进一步产生线下看房行为促进成交。

       而信任的第一来源便是经纪人对于客户问题的快速又专业的解答。这一场景下,经纪人通常经历3个步骤:

识别(楼盘是不是客户感兴趣的)    

定位(查找客户问题的答案)    

回复(解答客户问题)  

对楼盘熟悉度高的经纪人,能够将大部分楼盘信息背诵下来,直接回复客户。但对于大多数经纪人来说,  需要先查找到相关楼盘的信息。尤其是目前多数新房经纪人的司龄都时长较短,快速查找到信息则对他们来说十分关键。



三、快速聚焦的


信息阅读体验



基于以上两种看房场景,我们可以发现,经纪人查看房源信息是一个有规律的渐进式的判断过程,而经纪人在其中的心路历程正是对详情页改版设计最根本的依据。而且我们也发现,目前经纪人所使用的第三方工具内容的组织方式也基本符合上述场景。


综合前期调研的所有结论,包括对经纪人使用反馈的收集、第三方工具内容的分析和经纪人看房流程的梳理,最终确定了本次改版的设计目标和设计策略,如下图所示:



图5 改版目标及策略





1.页面结构重建,

符合经纪人看房流程


新房房源详情页的作用就是帮助经纪人在两种场景下能够轻松完成任务,那么就需要沿着经纪人的心路历程对详情页内容进行更加合理的信息结构设计。

改版方案中,综合两种场景的看房流程,将详情页整体内容进行梳理归类。在删除冗余信息后,按照“识别→吸引→深入→匹配”的顺序排列,保证经纪人在自然向下浏览时毫不费力地获取房源信息。

这一顺序下,“识别→定位→回复”也能同时得到满足。


图6 新版详情页结构





2.整合强关联信息,

减少阅读跳点


在前期调研中发现一个痛点:明明是关系紧密需要一起阅读的信息却分散在多处位置,造成经纪人阅读时出现跳点和断点。比如在了解户型信息时,经纪人通常需要一起看户型格局图、户型样板间,贝壳也提供了静态图、视频讲解和VR三种形式。

但在旧版详情页中,户型模块只能看到户型图,样板间信息需在页面头图中查看。当经纪人想完整地看几个户型的格局和样板间时,不得不在两个位置来回跳动,不仅操作麻烦,也在不停中断阅读进程。因此改版时,我们将户型相关的信息都集中在户型模块,经纪人可一次性完整地获取户型信息。


图7 户型信息模块优化前后对比



在经纪人深入了解楼盘信息时,会涉及到户型、楼栋、小区概况、区位配套和开发商/物业共五个维度的信息。在旧版详情页中,小区概况信息放在了二级页面且入口在页面头部位置,而户型等其他信息则位于页面中下部。这种结构给经纪人带来一定困扰,有的经纪人以为压根没有小区概况信息,知道入口的经纪人则需要在中途切换位置。

因此改版方案中,我们按照真实物理空间中从小到大的顺序,将户型、楼栋、小区概况、区位配套依次排列,即便经纪人只关注某几个模块信息,也不会迷失于找入口。


图8 楼盘详细信息优化前后对比




3.缩短路径,

实现信息快速触达


在完成结构和单个模块的内容阅读体验优化后,我们发现了另一问题:新房房源的信息体量很大,为了让经纪人在一级页面能够获得核心完整的信息,页面高度已经达到5屏。而在「回答客户问询」场景下,经纪人则需要快速查找到某个位置靠后的模块信息,那么如何解决这个问题呢?

旧版中有常规的模块定位导航,但问题是该导航无法在首屏暴露,经纪人需要上滑页面再左滑Tab导航找到对应模块内容。在需要即刻回复客户时,这种方式肯定是不够快速的。

        于是,我们便增加了快捷导航,它固定在可见屏幕的右侧,经纪人可一键定位至模块位置。目前快捷导航呈现的4个入口也是调研经纪人后挑选出的高频使用模块,同时这4个定位点也基本能够均分整体页面,即便想看其他模块,也能辅助快速定位。


图9 详情⻚导航优化前后对比




除了在整体结构上缩短触达路径,在单个模块的内容查看上也做了细节交互调整。比如作业规则模块细分了6个子分类,旧版方案是需要横滑查看的Tab导航,经纪人反馈不知道可以横滑甚至有人不知道可以点击切换分类。新版方案则优化成了标签导航并将分类全部展示,足够直接。


图10 客户规则分类优化前后对比





四、能够快速捕捉的

"显著线索"


盘源详情页作为B端新房信息承载最重要的页面,体量大且繁杂,当海量内容如决堤般袭来时,信息被割裂的更加碎片化,经纪人往往会感到失焦,从而引起心理抵触。

        而详情页面向90%为司龄时长较短的经纪人,处在业务熟悉阶段居多,会停留较长时间查找信息,导致讲盘或熟盘的过程体验感降低。因此,如何在短时间内引导经纪人快速触达到有用的“线索”,降低经纪人的信息理解成本,找到记忆打点的形式则显得尤为重要。

详情页改版的核心目的在于打造快速聚焦的阅读体验,提升新房信息线上化的服务体验。根据产品定位及改版目标,我们对盘源工具中高价值信息进行强化感知,凸显视觉重点,弱化次要信息,在吸引经纪人快速定位的同时,尽可能降低页面其余元素的干扰。因此提炼了以下“显著线索”:


1.视觉聚焦线索


这里我们以莱斯托夫效应为设计的切入点-什么是来莱斯托夫效应?意指在同质类材料中具有差异化表现,视觉突出便于记忆,实际上说明了材料的特独性对大脑处理信息时起到一定作用。

        例如详情页是一座山,我们可以通过“峰顶”和“谷底”的对比来抓取眼球,同等于用夸张或强化的形式去吸引注意力,直观的帮助经纪人明确焦点信息是什么,从而降低其脑力资源的消耗。

如何聚焦信息?首先需要对盘源关键信息进行有效的聚类整合,其次无限贴合业务场景,获取不同阶段下经纪人的关注点及诉求,再以合适的差异化表现形式配合信息节奏,优化整体信息的透传路径。

(1)拆解功能,聚类整合
人的大脑擅长处理具有区块感的内容,块状信息能够快速抓住用户焦点,我们可以把盘源详情页拆解成颗粒度不一的各类模块,再进行归纳收拢。

对比旧版详情页中的盘源基础信息结构散乱,对经纪人的阅读及认知造成一定负担,所以在设计中,我们把页面拆解成楼盘卖点、基础信息以及作业内容三大结构,在头部信息处理上,将盘源卖点与基础信息利用Z轴空间关系划分了层级,重色块与白卡片互相衬托,形成强烈对比,在保证卖点凸显的同时也能强化卡片信息;


图11 详细⻚头部优化前后对比




旧版页面的户型模块与样板间信息呈现位置不同,导致经纪人的阅读割裂感很强,因此在新版设计中,对户型信息做了功能比重的协调处理。基于熟盘或讲盘特点,经纪人及客户对于户型图的需求较高,因此在视觉上扩大其占比,强调一眼定位户型模块,同时集合三种功能,使卡片结构更加紧密,让经纪人在有限的空间内能够快速找到对应功能,提升整体的阅读及操作效率。


图12 户型功能优化前后对比




(2)色彩定位,视觉抓取
由于人们的视觉更容易受到更大面积的影响,所以利用色彩差异化,对经纪人最为关注的卖点及激励信息进行了色彩辅助突出,通过放大视觉对比,减轻经纪人的阅读压力、从而达到有效快速聚焦的目的。

首先楼盘卖点是辅助新手经纪人作业的核心信息,在特定场景下需要第一时间帮助决策和沟通,因此头部以大面积蓝色背景做衬托,在视觉上辅助经纪人快速定位,并与基础信息进行了区域分割,在视觉上更聚焦于核心话术,便于更快找到且即时表达。

其次新房经纪人赋予激励和规则的了解诉求比较大,需要实时关注政策及佣金激励等变化情况,此类信息也是最能刺激经纪人后期的作业效果,所以在设计上做了较为夸张的处理。卡片采用对视觉抢眼的红色背景,辅助“喇叭”插画形式衬托内容,加深经纪人对于公告信息的认知和记忆。


图13 色彩辅助效果图




整体从屏效层面来说,头部利用了色彩差异划分了信息组,能够保证在首屏快速聚焦到详情⻚最核心的三块信息,比旧版⻚面大大提升了信息触达的效率。


2.认知理解线索


此次改版出发点是让经纪人们能够做到“傻瓜式阅读”,尽可能降低其认知理解成本。我们可排列文本逻辑顺序,明确引导路径,从而形成有效焦点的内容组,让用户轻负担地找到有用信息。


图14 “傻瓜式”阅读策略




(1)贴近用户,弥补断层
若想让用户感到好用,设计的核心还是要了解用户当下目标,并去不断贴近其工作路径及阅读习惯,站在对方视角去感知页面呈现的效果是否达到目的,拉齐心智弥补认知断层,防止以自身视角做判断。

(2)给予规律,优化结构
根据线性浏览习惯,盘源基础信息的呈现需要保证服务者的讲盘顺序及阅读逻辑,在新版设计中,对有逻辑关系的信息产生联系,给予规律性,保证经纪人的理解转化。

我们基于理解顺序及习惯,可对应表达价格、盘源属性及标签的亲疏关系,通过紧密度让用户感知到信息组的规律。例如,盘源基础卡片是要引导经纪人先关注盘源的相关价格,因此价格关联的信息间距更紧密,其次是用途、面积、位置等属性相关,最后利用标签概括总结楼盘特性,再次强调整体盘源特点,从而由浅至深的强化用户认知和记忆。

此次改版的视觉侧重点是将信息差异放大,打造一定的记忆点,使得经纪人在进入详情页时,可不仔细查看信息,即可大致定位模块内容,从而进行快速浏览,提升整体的信息阅读效率。在这个过程中,不仅需要对业务场景下经纪人的作业逻辑进行把控,合理的梳理信息关系以及具有良好的表达形式,同时更多的是需要平衡自身感知与用户感知,明确目标用户的感知颗粒度大小,以对方视角有侧重性的强化信息,这样才能提升服务体验。

文章来源:优设 作者:姜佳欣


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

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

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




如何提升界面交互中的「信息识别」体验

博博

在产品界面中信息交互过程中,信息最为常见的四种载体:图形、文字、音频、视频(全景图、gif图、动效图在大类暂时可算图形,不作细分),而图、文占据了绝对的比重,所以需要重点关注图、文信息的识别体验。

根据美国哈佛商学院有关研究人员的分析资料表明,人的大脑每天通过五种感官接受外部信息的比例分别为:视觉83%、听觉11%、嗅觉3.5%、触觉1.5%、味觉1%(数据暂不涉及短视频直播领域)在群核体系下的产品,图和文分别是有哪些?

在界面中以图形化的形式表达动作、品牌、说明等信息,让用户能直观的感知到信息的含义,图形的类型有:动作执行类操作、品牌示意、辅助说明、图例展示4大类型;
在界面中以文字的形式表达信息,主要文案的类型有:动作命令、解释说明、专业名词、标点符号。

如何提升以上几个类型的信息识别体验:直观的图形提升信息识别的准度和效率、规范的文案提升信息表达的精准度。

直观的图形提升信息识别的准度和效率
以下几个案例是项小组试点探索验证信息表达优化如何对业务有效的验证,可以直观理解图形的准度和效率对业务指标有哪些影响。
案例1:工具入口的图形化表达用户从工作台进入到设计工具,纯文本的表达用户很容易产生疑惑,在不改变业务逻辑的情况下,进行图形化表达。

用户进入到下一步的成功率相比原版提升了10.2%,因此可以说明图形化信息表达更有助于用户识别并进行下一步决策。案例2:模型专题
群核下的设计工具,以专题化的形式聚类商家、平台推荐的模型是基本的运营动作,如下图,原本以真实效果图的方式展示模型专题,用户难以感知是方案还是模型。通过封面图形的优化:将核心的模型类型展示出来,用户能够预见里面的内容。

仅改版封面后,UV环比提升120.4%,此案例可以说明更精准的信息识别体验能够助力业务指标的增长。
案例3:对象菜单鼠标偏好设置在设计工具中,选择对象唤出菜单,在酷家乐工具中可以设置为鼠标左键点击即唤出菜单(仅展示图标),也可以鼠标右键唤出菜单(图标文字结合)。

用户可以自定义偏好,但上线很长时间很多还是不知道如何修改,在对提示进行图形化调整后,发现切换点击数据提升了300%,因此可以说明更精准直观的信息能直接影响用户的行动决策。
案例4:产出图纸的操作
在酷家乐工具中定制用户用户完成设计后,可以直接自动产出图纸,但由于之前操作入口的信息过于相似,用户难以决策点哪个是自己需要的,或很容易产生误操作,经过调研发现用户很容易混淆图纸类型从而生成对自己无用的图纸。

在新版优化中图形化的表达了图纸类型的差异,即便增加了流程步骤数,最终用户点击图纸的UV提升了15%,此案例可以说明,更精准有效的对象表达能吸引更多用户来使用此功能,对业务产生直接效果。
案例5:户型命令图例
户型绘制和调整是酷家乐工具的必经之路,由于对象间用2D图形图例表达比较难辨识出来准确意思,因此设计做了图形信息的优化,让命令更为直观,更高效的拾取命令操作。

上线后通过问卷调研用户满意度相比旧版提升了21.66%,因此可以证明,更精准的图形辅助用户更高效的使用工具操作。

规范的文案提升信息表达的精准度
在界面交互中,文案作为信息传递的载体,占据的比重是最大的,在群核的产品中,我们规范了文案的表达提升信息表达的精准度,之前有针对工具文案做了梳理。
结合人设和语气确定,以及酷家乐定义“善解人意、理想、直率”的文案原则,在工具操作中我们梳理了以下几类比较容易出现问题的场景,试图通过文案来提升信息表达的精准度,从而让用户更流畅的进行界面交互。
动作命令:结合直率的文案原则,简洁高效的描述命令动作

解释说明:结合理性、直率的原则,精炼的去解释内容

专业名词:结合善解人意和直率原则,避免让用户产生多重疑惑,专业名称平民化、通用化

作者:酷家乐UED
来源:站酷

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

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

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

交互设计之组件认识与解析

博博

组件是设计师常用且基础的知识点,随着软件设计和开发越来越成熟,已经延伸出很多的类型,能否正确合理的使用也是衡量交互设计水平的一个标准。文章里理论知识比较少,我想说点比较实用的东西,给大家解惑。所以关于基本的控件/组件类型的基础知识不做过多说明,理论和实践相辅相成,理论知识大家可以去优秀平台学习并吸收,但实践需要带入更多的思考。

分清控件和组件

控件可以理解为平台系统定义的某种形式,严格意义上来说,控件的专业叫法为“原生控件”,不过大家都习惯性的顺口说“控件”,这样会更简单点。

组件从字面理解就是组装而成,在技术层面,代码是需要封装的,那被封装在一起,就可以形成组件,能自定义内容,名称等。

原生控件相比较组件,颗粒感更细,一个组件可以包含多个控件,单个控件也可以作为组件。可以使用一个简单的例子来阐述他们的关系,控件就好比是药材,那么药方就可以理解成是一个组件。如果还不能理解,那可以用更具体的案例来说明下;

如下图是用户登陆流程中的一个交互组件,该组件由两种原生控件来组成,输入框和按钮,这样结合就构成“账号输入”的组件;

再如下图,单独的输入框控件也可以成为一个独立的“账号输入”组件;

以上两个例子,说明了组件可以由单一或多个的控件类型进行组成,如何去定义组件的构成,其实还需要结合具体的设计需求,上面第一个组件给账号修改增加一个按钮的控件,让用户可以通过按钮清除所有的字段,让用户直接重新输入,通过手动和按钮操作的两种方式去进行账号修改,第二个组件仅支持手动键入进行修改。通过增加了清除的交互方式,组件的构成就会有不一样的设计方式。

再深入聊下组件

各平台基本都有自己独立的设计体系,有自己定义的组件和组件库,学习组件要了解它分为基础组件和业务/高级组件两种类型。基础组件是一种底层组件,例如输入框、按钮、单选框;其特点是比较独立单一,通用性很强,适应各种业务场景;业务组件是一个基础组件集合而成的大组件,也可以叫高级组件,是复合型的区块组件,主要是针对解决业务问题;如下截图是flomo笔记用用的网页版本,以它的首页为例;页面按照左右结构类型区分,可以定义为两个大的业务组件,由浅入深,可以再细分,得到再定义更多的业务组件,这里,我以“发布笔记”的组件具体说明下,它是怎么组成来解决业务问题的;首先我们拆解下组成部分:文本内容,工具按钮(添加标签和图片、文本编辑、快速引用等三种类型),发布按钮。用户发布笔记的行为主要为文字输入-内容编辑-发布完成;结合用户行为和组件设计,解决了用户输入文本内容,给笔记归纳,增加图片,修改文本样式,快速引用,最终进行发布的问题。产品在迭代过程中,我们会发现更多的需求,业务组件就要通过再优化帮用户解决实际问题。

学做组件管理

结合自己的学习和设计经验,我把组件相关的内容和知识整理定义为组件管理,包括组件的样式定义,组件和组件库设计,搭建,沉淀优化应该都算是它的组成部分。组件和组件库作用,和基本概念我就不做过多描述了,毕竟市面上关于这些内容已经有很多了,我想从小的点去做深度思考,讲点有用的东西,呈现给大家;组件和组件库首先一定是遵循和围绕着设计的原则、理念、目标去构思,如苹果的《人机交互指南》里面提到的系统设计三大主旨(清晰、遵从、层次)和六大原则(完整性、一致性、直接性,反馈感、隐喻性、控制感),安卓系统《材料设计1,2》中提到的三大原则(材料就是隐喻、大胆,生动,有意、运动提供意义)。还有国内b端最权威的蚂蚁设计体系Ant design,从设计价值观延伸设计原则,从而思考设计模式。

这里可以总结,平台在创造设计标准时,思考的方向都会不一样,所以系统遵循什么,没有统一的模式,况且这些名词本身就很抽象,这需要设计师们去思考应该把平台系统设计成什么样。这确实很依赖和考验设计师各方面的综合能力。所以组件设计和搭建,它并不是某一个人的事,而是整个团队的任务。

组件和组件库的设计和搭建过程中,需要了解系统平台,是苹果端还是安卓,web端,不同的系统设计的差异性很大,对应系统的控件类型我们也要很熟练的掌握。例如安卓一直保留的原生的底部导航栏的操作控件(返回、主页、菜单),反观苹果最早出现在底部的HOME键,随着硬件设计的升级,物理按钮的作用已经完全被交互手势操作替代,根据设计准则,可以先设计出确定的初版组件样式,然后设计师们要熟悉项目业务,深挖每个功能中的不同业务场景,并设计出对应的业务组件;这样设计师最终对于当前组件进行整合分类,做出版本的组件库;组件和组件库是设计和开发相结合的,设计师呈现页面上的模块是直观的,但都是技术人员进行底层代码拼接的再封装而成的,有规模的公司一般都会做成开源的组件库。去提升项目人员之间的协作效率,复用率高,节省成本。如下图是Ant design里面的部分按钮组件的样式和代码演示,作为国内独一档的免费学习的设计体系网站。如果大家能够从头到尾研究一遍,相信对你构建组件和组件库有十分大的帮助。

最后组件和组件库的优化迭代是贯穿整个产品设计的生命周期的,从搜集组件需求、思考组件优化、设计组件优化方案、验收更新组件和组件库;

搜集组件需求

项目角度:设计师开发过程中遗漏的、新的业务场景中发现的组件问题,设计和开发者评审讨论出来的包括影响协作效率的,不合理的问题;用户体验:产品中的用户反馈的功能体验不好,使用时体验差的模块;外部借鉴:团队人员从优秀的组建案例中发现的可借鉴的需求;

思考组件优化

思考方向1:设计师可以查阅资料,研究优秀的组件平台,从成熟的产品中查看同类的组件设计案例;或者和开发者、设计师进行深度交流,得到有用的建议;

思考方向2:结合业务场景,最好能够将应用场景穷举梳理出来,具体到某个的功能,考虑该功能里存在的每一个场景中,组件需要有什么样的状态和变化;

设计组件优化方案

设计师根据以上步骤完成组件优化的分析之后,可以相对应的设计组件优化方案,组织开发人员一起多次的评审,大家一起去讨论完善,最终技术人员再进行组件代码的开发和封装;组件设计优化,设计师要注意在既定的设计原则下合理优化,要保留分析材料和思考过程,进行有理有据的评审论证;

验收更新组件和组件库

当开发人员将组件样式通过代码落地之后,优化中的组件方案需要带入到实际功能场景中进行测试检查,验证组建优化的是否符合预期,在优化过程中,可以用一张《组建优化表》进行记录,可以方便项目人员追踪和查看。

组件设计的应用和思考

组件的设计本质上也是为了解决某种特定场景的问题。例如提示弹窗,为了让用户在操作过程中有反馈提示,提示中又可以通过解决某种场景问题,选择让用户进行操作或者不操作,所以平台设计出这种弹窗组件,即模态和非模态弹窗类型。下面通过两个例子,结合功能和场景具体分析产品应该如何做组件设计;

案例1:支付宝“商家转账功能”组件设计

我们去商店购买东西使用支付宝支付的过程中,可以通过扫描商家二维码,进行转账交易,转账支付的流程主要包括输入数额,选择支付方式,确认支付;因为每个流程中的组件都十分复杂,我们仅拿其中一个流程,对用户操作过程中涉及的组件进行拆解说明;输入金额和添加备注流程:页面的组件主要是用户信息文本,输入框、备注组件、键盘控件,弹框组件;这个流程包括2个行为事件,4个大的业务场景;

行为事件一:用户在商店通过扫码商家二维码,分别两次给商家转账20000和100000元的金额,

业务场景1:用户没有输入任何金额

业务场景2:用户转账输入的金额没有超过限制

业务场景3:用户转账输入的金额超过最大限制

业务场景123主要应用金额输入框组件,输入框组件根据用户操作行为,会有不一样的设计,用户没有任何操作,输入框内有默认文案提示“输入付款金额”,用户输入金额后,计算单位超过‘百’,数字金额上方会有单位提示,同时显示删除按钮,支持删除,重新输入,业务场景2中根据金额输入范围定义了产品业务规则,再细分出三种场景,不同范围内的金额,可以对应的组件设计方案解决确认转账确认问题;

(1)当输入金额范围在1-50000,进入新页面,通过点击按钮组件,进行转账确认

(2)当输入金额范围在50000-99999,在当前页面使用模态弹框组件,进行转账确认
(3)当输入金额范围在100000-999999,进入新页面,重新输入框内输入转账金额,进行确认,若两次金额不一致,出现弹窗提示用户操作。

当输入的金额超过限制后,弹框组件配合进行超限的toast提示。

通过拆解行为事件1,我们细分出了3个业务场景,通过运用输入框、键盘、和toast弹窗,它们相互关联解决了输入金额产生的各种问题;

无金额输入时,输入框能给予用户提示,这是比较常见的输入框组件设计,预置提示文本;

输入金额未超出限制,输入框中会带入计量单位,这就是组件设计的细微之处,转账金额是一个关联自己财产的行为操作,应当是需要谨慎的,所以计量单位也是在用户输入过程中出现,给用户一个提示,没有任何打断操作的意思,出现的时机很适合,再加上输入的文本数字已经足够醒目,能够提示用户输入有足够的准确度,如果没有加入这个字段,确实也不影响用户操作,但这种双重衡量的方式,潜意识里会让自己输入的更放心,不怕自己有误差;这就是组件设计给用户带来的惊喜感。

金额超出限制后,通过组件toast提示“付款金额超限”,第一提示框组件很好的限制键盘的数字输入,避免用户无效输入,第二toast提示框的触发时机设计,这里的方案是当输入金额超百万,按数字键盘的时候就会给予提示,而不是等用户输入完之后,再去按确认键的时候,弹出来提示金额超限。

行为事件二:用户点击备注按钮,添加转账信息。

业务场景4:确认完成输入金额后,给商户添加备注信息,20个字以内;

输入转账金额后,文字键盘上方出现备注按钮,点击弹出备注信息弹窗,在弹窗的输入框中写备注信息,其实添加备注,可以在页面中使用文本框,可为何去使用弹窗中增加输入框,确认之后再展示到页面中呢?输入金额和添加备注的行为的优先级来看,备注信息应该是比较低的,信息的展示的重要性也比较低。首先如果使用文本框,和输入框的组件层级在同一级,用户的关注点会被干扰,所以使用不突出的文字按钮组件进行区别,另外备注文字按钮出现的触发条件也是因为有输入金额这个动作,所以备注的信息展示在产品设计中就是很弱。另外在弹窗输入框中也提示了备注信息20个字以内,有这样的信息规则,弹窗组件比文本框更适合短文本的信息录入,这样和金额输入框组件能够被区分。

作者:Q什伍
来源:站酷

转账是涉及财产安全的业务,所以组件的设计除了解决不同场景下用户体验问题(及时反馈、合理提示、增加惊喜、操作方便),还要处理核心的业务问题(保证用户的财产问题)
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~希望得到建议咨询、商务合作,也请与我们联系01063334945

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

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

设计策略|源源不断的创新思路

分享达人

前言

创新在产品设计和驱动商业中有着不可或缺重要性。作为设计师,如何抓住乍现的灵光时刻并不断复制思路,生产源源不断的创意活水?《设计策略|源源不断的创新思路》分为渐进篇和激进篇,旨在从创意的启动、过程和决策三个阶段出发,提供创意策略,通过具体的案例或思维过程帮助大家在工作中打造自己的灵感永动机。

了解创新类型:渐进式 & 激进式

创新前需要首先定义设计命题是哪种程度的创新,之后再选择合适的方法进行发散。创新可按照程度分为渐进式创新(Incremental Innovation)和激进式创新(Radical Innovation)。

渐进式创新是较为常见的微创新,是对现有概念、产品或服务的渐进设计和持续改进,通常不依赖新的技术。一些软件或服务的周期性迭代、在微创新中让新版本比旧版本更好、满足更多用户需求,便是典型的渐进式创新。

激进式创新是相对罕见的,它同时依赖革命性的技术和创新的商业模式来解决问题,像人工智能(AI)、区块链技术等是当下较为熟知的、在不断探索市场和落地产品的激进式创新设计。



以我们熟悉的手机产品为例,2007年iphone横空出世,是第一款支持手指触摸操作的电容屏手机,颠覆了以往手机必须使用键盘或触控笔的操作时代,奠定了至今十多年的智能手机操作体验,是非常经典的激进式创新。而近几年手机在更少遮挡屏幕内容上的屏幕探索,如去掉Home键,使用刘海屏、水滴屏、全面屏等操作,则是在体验和外观上的渐进式创新。

了解设计内容的创新类型可以帮助我们有机地考虑用户、技术和市场,进而选择合适的创意策略、综合思考值得发散的角度与深度。如果在时间限制和技术成本控制下,设计师接到需要作出渐进式的创新命题,却未对创新类型加以判断、在发散时让创新点依赖尚未完善的技术或聚焦短期无法落地的场景。那么创新不但对于当下的问题无法起到作用意义,还可能造成团队时间和精力的耗费。



本篇讲述:渐进式创新



《设计策略|源源不断的创新思路》分为渐进篇和激进篇讲述各自场景下可使用的方法,本篇将优先展开针对渐进式创新的设计策略,通过创新启动、创新过程、创新决策三部分分享策略和案例,讲述如何在产品中打造令用户喜爱的体验和细节。

Darin在《The Business Warrior’s Dojo》中提到:“大多数创新都涉及将我们每天所做的事情做得更好一点,而不是创造一些全新的和不同的东西。” 激进式创新的发生往往依赖技术的革新,所以渐进式创新比激进式创新更常见、更贴近我们的生活。微创新并不是旁枝末节,在互联网产品设计中,很多日常的迭代创新都是渐进式创新。一个有效的微创新所能提升的体验是不容小觑的,让用户心动的产品其实就是每一个微创新的叠加总和。

一、渐进创新启动 /策略2则



启动是理解创新命题和需求背景的步骤。

渐进式创新通常是为了解决某个具体问题,有相对明确的命题和需求。理想的渐进命题是清晰、明确、可发散的。但现实往往在沟通和传达上遇到阻力:盘根错节、过于具体、语义笼统、抽象空泛.....以下两个方法针对渐进启动帮助大家聚焦命题。

策略1. 清晰审题 + SMART原则对齐

你是否遇到过多方发起、多轮传达的融和式需求命题?这类需求的发起流程盘根错节,可能是源于高层的方向意见,经过了自上而下的层层传达;也可能是多个部门共同策划讨论,再揉和了与会者个人理解传达...

这样的沟通就像传话“马什么梅?”。当这个命题传递到你的手里的时候,可能已经埋下了诸多过程中交流不畅、理解不一致的坑。此时一定要确认题目、审题清晰。 



■ 清晰审题,可从四个步骤执行:

(1)沟通理解需求,让相关方加入同步和讨论。

(2)设计师复述理解的内容,确认你们在同个频道。

(3)可视沟通,使用草图或相关案例图片沟通,规避理解偏差的风险。

(4)达成一致的内容记录下来,以便后期对照启动。

■ 确认具体需求目标内容,SMART原则:

S(Specific):具体⽽明确的需求目标。

M(Measurable):项⽬⽬标可度量。提供具体的数据目标作为依据,如具体的点击率和转化率。

A(Attainable):目标可实现。确认需求条件。具体的需求时间、资源、人力和实现技术等。

R(Relevant):⽬标的相关⼯作需要和⽬标紧密相关的。

T(Time-bound):所有的⽬标都是有时限性的,不是⽆限久的。

例:这个需求的目标是提高用户在某一流程的转换率至70%,增加更多用户对该功能的使用,并提升用户购买意愿。流程设计共涉及5个步骤。该需求将有一个星期时间,无运营资金,可投入一个产品、一个交互、一个视觉人力,三个开发人力,基于平台现有技术。


策略2. 命题聚焦,具体形容替换抽象描述

你是否遇到话术华丽但语义笼统的需求,并且感到难以“猜中命题”?重新审视你拿到的项目命题,去掉它的话术包装,把抽象词语具体化。如果需求仍然模糊,便继续深入和需求发起人确认…大胆假设,小心求证,将要解决的问题具体化。



■ 命题聚焦

使用具象的形容、描述,替换原本笼统、中性的表达,把命题聚焦、目标具体化。举例、提问的方式有助于更好地确认,例:

“更好的用户体验” -> “更高效” “更趣味”…

“用户更喜欢的产品” -> 想让用户喜欢的是什么?感官刺激?流程体验?…

“五彩斑斓的黑” -> 可以给个参考图吗:)? 如果想要的黑色是底色,“五彩斑斓”追求的是否是一种光泽感?…

二、渐进创新过程 / 策略4则



当我们有了清晰聚焦的起点,现在就到了放肆发散创意的阶段,在过程中无论个人思考、或团队脑暴一定要遵循三个原则:

(1)没有差点子。许多最初看来难以实现甚至天真的想法,经过碰撞或思虑后可以成为很精彩的创意,所以要将所有想法都记录下来。

(2)数量优于质量。在创意发散的过程中可能会遇到瓶颈和困难,继续保持发散,不要在已有的点子上停下。

(3)不批评不扼杀。在想法发散阶段绝不扼杀任何可能性,让团队或个人均能具有安全感地发散非常重要。

下面提供策略四则在渐进式创新时高效的发散方法,帮助设计师找到着手点发散。

策略1. 人物角色画布 + 同理心地图

我们创新和设计的受众通常不是自己,而是某具体人群。

在受众人群中找到核心用户,或由核心用户的特质组合成一个或多个最核心的用户,TA是目标用户们的代表或

希望成为的人。包抄观察TA的生活,思考设计TA想要拥有的产品,对比TA当前产品和解决方案,研究你的创新对于TA的意义,找到亮点突破。人物角色画布和同理心地图这两个工具在“包抄”用户的过程中可以有效分析用户行为和用户心理。


■ 人物角色画布,“包抄”用户

人物角色画布PERSONA帮助建立关键用户的个人特点和在场景中的期待目标。我们以为旅游出行产品为例思考核心用户,进行信息和价值的串联:

(1)把TA想象成真人,完善基础信息。年龄,性别,居住的国家和区域,职业,婚恋状态,爱好,休闲时间,生活经历,思维方式等等。

● TA旅行地偏好也许更向往和自己传统居住环境不同的地点;

● TA的年龄身份不同,出游时段和同游人群可能不同:未成年更可能在寒暑假和家人结伴出行,工作白领也许会在节假日、淡季请假和恋人或好友出游...

(2)剖析兴趣、影响力、目标,深入发掘的洞见都建立在上述基础信息之上。

● TA的兴趣可能决定产品的路线创新,如果TA喜欢音乐也许希望去当地Livehouse,如果喜欢历史也许想去古迹走走...

● TA的影响力可能帮助攻略种草,也许很多朋友或粉丝在社交网络上等待TA的旅程分享...

● TA的目标是什么,这次旅程也许想要和朋友放松散心,慢节奏地游玩体验;也许想要打卡著名景点,希望安排地满满当当...

(3)发掘TA的需求和期待,激励点,痛点/痒点。

● TA也许期待一个整合出行方式和住宿的产品,统一规划和高效便捷能够激励到他,让他不需要付出太多精力安排...

● TA也许期待一个能让TA说走就走的产品,随时带给TA附近可以探索的小众基地,让TA和友人可以自由而浪漫地探索,拍摄很多心仪的照片回忆和分享...

在上述举例中,我们可以看出只要将用户的点滴罗列出来,我们即可拼接出一个生动的用户形象,在产品创新中抓住一两个核心用户的痛点、未满足点,就能进行对用户有意义的渐进式创新。



■ 同理心地图,帮助“共情”

代入用户的视角去了解发生的事件,体会他在当下场景里的行为、想法和感受。站在用户的角度,TA是谁,TA的目标是什么,他需要看/听/说/做什么,想什么,有哪些痛点和收获。从用户的视角去思考和验证设计师的猜想。

同理心地图帮助我们不断建立假设,共情体会,找到痛点和价值。以一位上班族女性通勤的场景来举例:

(1)谁:用户是一位忙碌的上班族女士,在清晨通勤的时光中,她通过乘坐拥挤的地铁经过10站路去上班,地铁前后各需十多分钟的步行,而现在是炎热的夏天。

(2)目标:她也许想抓紧通勤的时间,查看手机上的早间新闻,听有兴趣的视频课程,或者看短视频放松一会儿...她也许完全不想看手机,只想擦擦汗水,补一个妆;也许抢到座位定个闹钟补一会儿睡眠;也许只看看地铁里的电视发发呆...

(3)看 & 听 & 说 & 做: 在拥挤的车厢里,她会抢到座位吗,站在晃动的车厢会触碰到别人吗,会和身边乘客有交流吗,在嘈杂的车厢会佩戴耳机吗...

(4)痛点 & 收获:车厢里信号好吗?她想看的视频会不会变成低清或卡顿?在车厢站立时,能握紧扶手、拎着手袋,同时单手操作手机吗?朋友发的消息能及时回复吗?可以听清耳机里的声音吗,可以听见站点的播报吗... 她在地铁上是放松休整了一番;或是汲取了信息,高效打开一天?

深入、包抄、假设和代入,会帮助我们从用户视角体会、审视,针对每一个用户没有被解决的难题痛点和潜在的爽点,都可以成为创新的机会点,在产品上作出渐进式创新的升级。



我们可以从两个基于用户洞察的真实案例,来看包抄理解用户后的微创新设计:

例a. Airbnb最近更新的海外产品体验中,许多创新都是基于对用户预定房源的体验洞察获得的。

过去,用户即使有相对灵活的时间,也必须按照具体的某天到某天来查找房源,导致用户需要不断尝试日期组合来减少错失房源的可能。灵活日期功能就围绕这个洞察设计,让时间相对自由的用户,可以按模糊日期(如:7月)+出行时长(如:一周)来挑选住宿,让用户根据挑选到的房源合理安排出行。

用户常常希望在出行中可以有特别的住宿体验,如住在能看到北极光的房子,特别造型的树屋,沙漠中的房子...传统的时间地点筛查很难迅速识别这些特别的房屋。Airbnb为此打造出灵活匹配功能,用机器学习将平台房源划分成了奇景、露营、滑雪等56个标签类别让用户根据特别偏好快速筛选体验。



例b. 使用外卖小程序在微信点餐支持直接分账单,也是基于用户的痛点的创新设计。

过去,当几个好友想一同点外卖时,他们通常各自在自己手机上查看菜单,再在同一部手机上下单,是一大痛点。几人一起点外卖通常可以减少运费还可以有相对大力的折扣优惠,但是用户需要自己进行计算和分账,考虑每个商品单独、整体的折扣和运费,计算的时间成本高,这是痛点二。如果好友没有及时想起付款,用户可能还需要提醒催促好友进行付款,在情绪上也有痒点。

于是外卖软件美团、饿了么通过在微信小程序提供了多个用户一同点餐、自动分账的功能。过程中只需要一个用户将外卖链接分享到微信群,整个群里的朋友即可各自选择想购买的商品,一同进行下单。分账流程也可以直接由系统发起,一人付款后全员分账,不需要自行付费。在链路上直接解决了多用户点外卖的流程痛点和痒点。



策略2. 模块化 + SCAMPER奔驰法

■ 模块化 Modularization

需要创新的内容常包含许多元素和内容,我们可以尝试将要设计的内容拆分、模块化,之后进行重组创新。不论是流程上每一步骤,界面上每组元素,产品上每块结构,都可以作为被拆分出的模块。拆分模块后,可以使用奔驰法进行发散创意,就可能创造出的场景和效果。

■ 奔驰法 SCAMPER

拆分模块后,用奔驰法进行发散创意,可能创造出特别的场景和效果。奔驰法是建立在发散思维基础上的创意工具。七个字母分别代表了七种创意思路,替代(Substitute)、结合(Combine)、适应(Adapt)、修改(Modify)、用作他用(Put to other uses)、去除(Eliminate)、重组(Rearrange)。



例:以IOS系统的一些功能为例,我们可以倒推奔驰法的模块重组运用。

● 替代(Substitute):

智能手机的大屏需求增多,导致了手机的整体尺寸逐年增长。在Iphone手机的发展过程中,将上下的非屏显区替换,用界面操作「替代」了硬件Home键区域,用上滑手势和界面Home Key满足需求,在不放大手机整体的高度、重量的状态下拥有更大屏显。



● 结合(Combine):

系统中每个APP独立操作无法完全满足用户需求。如,用户希望在看电影的同时和其他好友聊天,在拍照或录音后可以直接将相关内容在笔记中添加等等。

IOS系统运用「结合」的思路,通过系统支持分屏,浮窗等交互框架,让多个APP可以同时使用或相互结合使用。就能把原本支持的APP能力赋能开拓出更多使用场景。



● 适应(Adapt):

OCR照片转文字功能已经有了较长的时间,但在原本的拍照需求中它的用途并不多。适应的思路把OCR技术作为一个能力模块去「适应」更多场景,让这项技术寻找到更多新场景,价值放大。

用户阅读实体书时,可以将内容拍照识别摘录到笔记中;用户看到广告上想拨打的号码,不必照着输入,只要拿出相机就能识别号码并且呼叫;异国旅途中的招牌、商品信息、菜单等也只需要拍张照就可以翻译...



● 修改(Modify):

原本手机电脑的屏幕只支持调节亮度,但随着科研和调查发现睡前、暗环境下屏幕蓝光的照射可能导致兴奋和伤眼,亮度调节不能完全覆盖面对这些细分需求。通过将界面的颜色、模式进行「修改」,增加暗黑模式、护眼模式等让屏幕色显满足用户在不同时段的偏好需求。



● 用作他用(Put to other uses):

手机内地图等应用有定位功能,手机丢了,可以用其他电子设备找回手机。可是,如果是其他非电子物件丢了,应该如何找回呢?苹果将定位功能「用作它用」独立出Airtag配件,可以轻便地为其他不带定位的产品提供该能力,让这些产品可以被手机找到。满足用户更多的寻找物品/宠物/定位的需求。



● 去除(Eliminate):

原本在手机、电脑等各种设备间想要传输图片、音乐、视频、文件等内容,都需要数据线或第三方软件传输,非常不便。为了让流程变得优化方便,iOS系统用「去除」的思路减少中间媒介,Airdrop功能只要开启蓝牙就可以在设备间快速传输文件。

以前离开电脑、希望在手机上继续阅读刚才查看的网页,需要将链接单独复制黏贴到三方软件进行传输,现在这些麻烦也由「去除」的思路解决,用Handsoff功能打开浏览器即可直接继续打开网页阅读。



● 重组(Rearrange):

用户可能希望每天一打开手机就有很多可以直观查看的信息。天气,时间,新闻,热搜榜,邮件,备忘,单词,股票等等。

原本这些信息都需要在每一个单独的app中单独查看,现在用户只需要在桌面上扫一眼就可以快速获取的他们想要的信息重点。这就是在桌面上进行了信息和功能重组,用Widget的形式满足更多信息和功能展示。



策略3. 逆向思考:原理 / 功能 / 结构逆向

逆向思维缔造了许多打破常规的创意。遵循着顺向的设计思路没有头绪的话,把问题或解题思路反转,往往带来出其不意的惊喜。这里介绍3类在渐进式创新中常见的逆向思路和具体案例,发散时可以将它作为思考清单逐条尝试打开思路。



■ 原理逆向 | 事物原理的反方向进行发散。

例a. 手触碰内容->内容触碰手

很多手机操作随着屏幕变大无法用单手完成。如何让用户触碰到手机屏幕上较远的地方就成了一个难题。与其让用户用手去够屏幕按键和内容,不如让内容来够着手,让手机界面整体下降半屏/页面整体缩进,就能在需要的场景下让用户快速触发满足用户的单手操作。



例b. 下载软件使用 ->上云使用软件

很多用户排斥在电脑、手机中安装大量的软件。如何让用户更轻量的使用软件,减少电脑的内存负担。云服务让软件上云,帮助用户摆脱安装包,网页上登录使用。微信的小程序也用同样的思路为用户减负,对于偶尔使用却长期占据内存的APP,让用户直接上到小程序页面即用即走。不但降低了软件开发商的成本,还让用户间的分享传播变得十分容易。



■ 功能逆向 | 从功能的反面设想解决问题的新途径或找到新场景、功能。

例a. 阻隔外界 -> 放大外界

耳机的设计通常都更为关注隔音,让用户在嘈杂环境下依然听清楚耳机内的声音,但是用户也会遇到需要同时聆听内外部声音的时刻。Airpods将耳机分为降噪、关闭和通透模式,在通透模式下,耳机可以像助听器一样帮助用户放大外部声音,同时播放设备内容。让用户无需摘下耳机对外交流,切换模式就可边听边沟通。 



例b. 视频会议分享内容 -> 视频会议不说不听 -> 营造专注氛围

疫情期间,很多学生在家独自学习没有了课堂和自习教室的氛围后很难集中注意力专注的进行学习。通常视频会议是将大家聚集在一起分享聆听相同主题的内容,而QQ自习室则用视频会议的形式将学生聚集到一起,大家打开视频既不交流也不关注彼此,单纯用视频营造学习氛围,学生看到彼此认真学习仿佛置身于自习课堂,利于自我监督。



■ 结构逆向 |从事物的逆向结构去设想解决问题的新途径。一般可从结构位置、结构材料以及结构类型等方面入手。

例a. 笔记本电脑摄像头只朝向用户 -> 改变摄像头结构支持翻转

后置摄像头暴露在外易损坏,笔记本通常只有面对用户的前置摄像头,但用户有很多需要后置摄像头的场景,如参与会议时希望录制主持人的内容,听课时学生可能希望用笔记本记录内容同时拍摄黑板PPT内容等... 华硕笔记本让前摄镜头可以240度旋转,自然状态下镜头面向用户,当用户需要时转向后方对外拍摄。这样的设计让镜头的角度和笔记本屏幕的角度分离,满足内外向拍摄和携带保护。



例b. 文档作为文件和其他类型内容收录到网盘 -> 文档作为文件夹收录各类型内容

文档通常被认为是文件类型,只能和图片,视频等一起被放置到一个文件夹或者网盘中进行保存分享。腾讯文档把文档的结构作为一个文件夹,支持用户把其他文档、PDF、图片、视频等内容都拖动收录到一个文档中保存、查看。



策略4. 触类旁通,借鉴其他领域的解题思路

■ 触类旁通(Comprehend by analogy)

Tom Freston,MTV 的联合创始人曾说过:“创新是将现有的两件东西以一种新的方式组合在一起。“触类旁通在渐进式创新时非常好用的思路启发,很容易产生1+1>1的效果。找一个其他领域里带有某种共性的的解题思路,“强行”运用在现在要解决的问题上,找到“异曲同工之妙”。这些思路可以是日常收集的灵感库、素材库、产品案例库,在遇到需要创新突破的启迪时,从自己的灵感库中触类旁通。



例a. 像看视频弹幕一样看短视频评论

在长视频的观看中,用户已经习惯并且享受在观看视频时打开弹幕,和其他用户一起边评边看,这样会非常有气氛感。QQ小世界抓住这一体验在短视频中也加入了弹幕形式的评论,让用户的评论可以在短视频中直接呈现播放,不但增加观看氛围,同时增强了有共同兴趣话题的用户的互动性。



例b. 用“刷”的思路切换音乐和相关视频

聆听音乐时,用户经常会有兴趣了解更多该音乐的视觉信息,如观看该歌曲的MV、演唱会Live片段、使用该音乐的影视和综艺...近年短视频的流行让用户熟悉了用“刷”的手势展开更多内容,QQ音乐运用该思路乘载音乐和相关视频的切换入口。当用户享受音乐时,向上“刷”就会进入MV等更强烈的视觉内容,并且可持续“刷”观看更多相关视频。该设计不但帮助用户从纯听觉过渡到强烈的沉浸氛围,也让歌曲相关的视频、影视作品得到更多曝光和关注,利于音乐创作生态的发展。 



例c. 像剪切杂志一般记录生活中的真实物件

我们小时候应该都做过剪贴报。而在生活中我们也想把真实世界中的物品剪切放置到文件或情绪板内。ClipDrop支持在手机端拍摄实物,自动扣除背景将物件提取出来,当用户把手机移动到电脑端前,真实世界中的物品就会迅速“复制粘贴”到面板上。



三、渐进创新决策 /策略3则



“一个想法的价值在于使用它。” ——托马斯·爱迪生。创新是服务于我们的目标的,是手段而不是目的。所以当我们发散出许多想法且看起来都充满潜力时,选择困难时刻便来临了,面对有限的资源和时间,下面的三则方法可以帮助在大量想法间进行筛选,推动目标成就和创意落地。

策略1. 结构化和筛选想法 + 优先级矩阵考虑成本

■ 结构化和筛选想法

面对大量创意想法,可以将想法以下图中的两种图示进行结构化和筛选梳理,了解他们是否足够匹配现在的机会和状态,之后再进行方案改进和补充。结构化的过程是收敛思维和筛选的过程。

例a. 渐进 vs 激进

下图方法可以快速区分出匹配和创新程度。在创意过程中,我们发散的想法可能会超越最初定下的渐进范畴,此时可以重新审视发散的想法是属于渐变式创新还是激进式创新,先匹配当下需求,其他范围之外的考虑之后投入更多资源实施。



例b. 顾客分类vs产品/服务

下图方法将创新的对象加入了筛选过程,因为创新对于产品本身和市场顾客来说是不同的,这种筛选方式有效地结合了这一需求。



■ 优先级矩阵工具,考虑想法的成本、价值

可帮助团队考虑每个功能带来的价值与交付它所需的工作量,为创意制定优先级。优先级矩阵的四个象限分别是重要且紧急,重要不紧急,紧急不重要,不重要也不紧急。当我们把想法放入这个举证,当我们把所有想法放入这个矩阵,就可以看出最重要而紧急的想法可以优先考虑实施和计划,其次去考虑那些重要不紧急和紧急不重要的想法,而不重要也不紧急的想法即使实施回报率也不会很高,就可以将它忽略。通常来说,高投资回报率(ROI)和高优先级的创意更值得被首先考虑。



策略2. 制作原型,敏捷迭代

创意发散的过程可能是非常混乱的,只有在删减和迭代的过程中逐渐变得清晰。推进创意的过程中,一定会经过许多错误,就像导演伍迪艾伦曾经说过 “如果你没有时不时地失败,这表明你没有做任何非常创新的事情。” 用最小的成本试错是发现问题,解决问题和规避问题的良策。

■ 制作原型,敏捷迭代(Agile Iterating)

使用原型工作坊的形式,快速尝试,快速失败,快速迭代。用最小的成本测试来实现效率的最大化。许多会被放弃的尝试,都不需要等到最终设计结果才能决定,在草图和原型阶段就可以进行迭代删减。



交互上可以用一些原型沟通和演示,视觉上可以使用一些草图或色卡来理解感受, 泡沫板粘贴的实体产品原型也可以满足沟通。在原型测试阶段重复发散、收敛的过程,最终让好的创意落地,整体可以分作三个阶段:

(1)功能原型(Functional Prototype)

针对关键功能的体验测试关键变量,制作最小可行产品(Minimum Viable Product),然后对潜在用户进行密集测试。

(2)成品原型(Finished Prototype)

这一阶段主要整合分散的功能原型,让用户可以体验整体交互进行反馈。

(3)最终原型(Final Prototype)

这一阶段的原型时收集了之前的反馈和调整,并进一步完善的过程,通常会有较高的投入和实现度。

在MVP原型测试过程中,特别值得关注的是不应该将完整成品拆分出零碎的模块,需要保证MVP是最小的可以被运行的单位。



策略3. 最先进但可以接受,让用户逐步接受

■ 最先进但可以接受,让用户逐步接受(Most advanced yet acceptable)

在选择创新和改变的过程中如果遇到了阻力,不要急着否定创意本身,可以尝试是否还有更少摩擦的方式去推动创新。用户养成的使用习惯和既有认知很难在短时间内快速改变,所以产品越成熟,改进往往越温和。以免在改变时遇到反弹。即使是非常正确的决定或者看似简单的调整有时也需要耐心,通过逐步改变的方式让用户接受慢慢接受。

例. 美国购物网站Ebay的界面改革故事就是很好的例证。

早期他们的官网使用黄色作为文字的底色,阅读起来并不够友好。他们在品牌升级时将文字底色改为白色,却没想到这个在现在几乎是共识的决定遭到了成千上万的邮件质问原因,并要求网页改回黄色。很显然,用户没有准备好改变,于是Ebay选择将网站改回了黄色,并用一年中每天将黄色调低一级,直到一年后完全白色时,已没有任何用户抱怨。所以,在设计和改变时不用追求一蹴而就,尊重用户的节奏调整更容易让创新被接纳。



结语

希望本文的渐进式创新的设计策略可以为设计师们带来一些启迪。持续改进的渐进式创新,会让用户感受到产品的热情和成长,带来的用户参与度也是最高的,因为产品迭代的可见性利于用户提出反馈和建议,进一步促进产品设计更极致的体验。

下一篇章我们将讲述激进式创新的设计策略,激进式创新更依赖科技、商业模式等综合背景,相比渐进式创新可以带来更多突破,而设计师在创新过程中承接着技术、商业场景和用户体验,是重要的链路角色,希望下一篇章帮助设计师们在渐进创新的基础上为产品带来更大的突破。


原文地址:站酷

作者:腾讯ISUX

转载请注明:学UI网》科幻机甲风格海报怎么做?

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

截屏2021-05-13 上午11.41.03.png

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




如何有效提升产研效率和质量

分享达人

前言
互联网瞬息万变,在产品不断更迭的过程中,我们经常说要保证产品设计的一致性和质量,提升产研链路的效率。但现实情况是:产研团队长期面对的是产品越来越复杂,体量越来越大,一个个复杂的产品下包含N个业务线,N个业务团队,甚至还有外部合作的业务,每个迭代都要面对数以百计的功能上线,经常容易出现各种相同但不一致的功能,上线质量参差不齐,执行者也容易陷入日复一日的需求海洋而没有更多精力去挖掘更有价值的事情。
所以如何解决团队效率和产品质量问题?我们的解法是抽象体系化的解决方案:设计模式化和代码化,设计从原子到全局进行统一和优化,并形成系统化的设计指导,由开发进行模式代码化,提供灵活可配置的规则。以此,设计有更系统化的设计原则,整体的统一性和体验有保障,设计和开发周期也可以缩减,甚至大部分日常需求可直接由产品对接开发直接上线。

关于产品「趣味性设计」的一次深度探索

分享达人

你一定也发现了,在这个时代下只要处在同一赛道的产品,大多数免不了日趋同质化,不论是功能还是形式、内容还是算法。就拿内容型产品来举例:去掉颜色,以下四个产品的首页,你能分得清谁是谁吗?



虽然可以做品牌差异化,但很多产品在招牌打响前,也会经历相当漫长的一段成长期。而在大家都卷的分不清谁是谁的时候,通过趣味性来建立情感链接倒是一个独辟蹊径的狠招。

之前在团队有幸负责过一次产品趣味性的探索,虽未全部落地,但沉淀了不少经验。今天,我将这些经验以文章的方式分享给你,希望对你有所启发。


为什么产品需要趣味性


1.符合本能需求

马斯洛的“需求层次理论”(Hierarchy of Needs)你一定听过。这个理论提出人类的需求状态是持续不断的,一段时间内,个人的动机或许可以获得暂时性的满足。但从人的成长角度来看,人类的需求永远不会止步于一个阶段。类似的还有亚伦·瓦尔特基于此提出的需求层次理论——有用的、可靠的、可用的、愉悦的。在满足了温饱阶段后,自然会需要情感的满足。

尤其现在这个相对严峻、内卷成风的时代下,大家都渴望在上了一天班之后,自己用的产品可以给自己解压,而不只是个单纯的冷血工具。



2.影响用户行为

产品传达趣味性的信息,那么这些信息便更容易被用户接受、甚至激发兴趣。正如用户关系和精准化运营的先驱——史蒂文·贝莱格姆的那句话:“趣味是设计产品中最人类化,最直接,最能引起人们兴趣的因素。”

根据艾达模型这个经典理论,一旦用户对某件事产生兴趣后,则更容易促成他的决策、乃至最后行为的发生。毕竟我们绝大多数的决策并非源自理性。



另外,《疯传》这本书提及过一个重要的概念:情绪唤醒。当情绪唤醒度较高时,往往会更容易激发用户的分享行为(比如愉悦、惊喜这样的正面情绪,当然也会包括愤怒、恐惧这样的负面情绪)。而产品所呈现的趣味性,很大程度上更容易引发用户的高唤醒情绪,从而主动采取一些产品希望他实施的行为。

3.缓解负面情绪

使用一款产品的过程中,必然会出现不够正向的反馈,比如404、断网、填写格式错误、输入隐私信息等等。一旦超出了用户的容忍能力,很容易造成行为中断甚至流失。

但此时如果通过一种趣味性的方式呈现,很大程度上可以缓解用户的负面情绪。

比如readme的登录页面,当你输入密码时,猫头鹰捂住双眼,很好得缓解了用户的不安全感。再比如饿了么,恶劣天气下会实时记录当前的天气状态,通过同理心的触发也可以缓解用户等待时产生的焦虑。



4.实现情感链接

对应诺曼在《情感化设计》中的「反思层」,通过品牌差异、独有内涵等方式来唤起用户深层的记忆和情感,产生情感共鸣,从而形成认知,建立起深厚的情感链接,以让用户越来越忠实于产品。此时产品作用更多的是作为一个承担情感的载体。

我们旅游时经常会购买一些貌似没什么实用性的纪念品,明信片、木雕、徽章等等,可能最多只能放在房间当装饰。但是纪念品的关键意义,在于承载着旅游时的记忆。类似的还有单机游戏发售时,除了标准版外,往往会同步发售包含手办、美术设定集等物品的豪华版,同样用来承载玩家的情怀。

最典型的例子,就是Google的Doodle设计,在不同的节日、纪念日、或者缅怀一些先驱、艺术家时,会投入很高的成本起设计各种趣味性的插画logo,丰富有趣,而且很多时候可以支持互动游戏。比如18年的万圣节,就做了一个有趣的多人对战的小游戏。



Doodle不仅是Google文化、价值观的象征,也通过这种趣味性的创意让用户实现更深层次的情感交流,建立情感纽带并增加粘性,不会轻易得流失到其他替代品中。


趣味性是什么

关于这个概念,有三条相对客观专业的说法。

德国古典哲学创始人康德《实用人类学》中,指出趣味性是人类由于受到外部环境的影响而对客观事物产生的直接的感性反应,不具有普遍性和必然性。通俗来讲是人们对身边的事物感到新奇、有趣、有意思,从而心理产生愉悦的变化。

另外,康德在《判断力批判》也指出,趣味是指主体以积极主动的姿态,在超功利的层次上对某一对象表现出喜爱和愉悦的情绪状态。

《汉语词典》将趣味释义为:使人感到愉快,能引起兴趣的特性。

看似各不相同,但根据这三个概念提炼下,可以发现他们都是在融入一种正向的情绪加以解释。

那么,趣味性背后的情绪到底是什么?


趣味性背后的情绪


情绪这东西千变万化,为了避免主观臆断的不准确,我搜罗了关于情绪的研究资料,目前相对权威的有三个:plutchik情绪轮、日本感性工学、诺曼的三层理论。

后两者未对情绪进行指标的定义,所以这里只聚焦在情绪轮上。

情绪轮由罗伯特·普洛特契克开创,这个理论指出人类的基本情绪一共由8种,生气、厌恶、恐惧、悲伤、期待、愉悦、意外和信任。撇去那些负面情绪,能够符合趣味性带来的情绪基本就三种:愉悦、期待和意外。



为了为产品所用,就需要提炼出更具象的特征。下面,我通过脑暴的方式对每类情绪进行发散联想。

关于愉悦感

联想了大量可以引发愉悦情绪的事物,比如可爱的猫猫、各类好玩的表情包、毛绒玩具、影视作品里那些会突然说话的动物、解压神器等等。

我发现这些事物,一般具备了以下特征:

1.会给予我们即时反馈;

2.拟人化,比如带有人类才有的表情,或者是人类的动作语言;

3.柔软的、毛茸茸的、圆润的、有温度的;

4.会动的、解压的



关于期待感

联想了大量可以引发期待情绪的事物,比如被买爆的泡泡玛特盲盒,商家售卖的福袋,各种诸如掷骰子、老虎机的随机性游戏,各类抽奖活动,一些游戏开局roll属性点的环节(比如金2、河洛等游戏,当年玩的时候我惊讶得发现我居然能roll上一整天)

这些事物大致会带有这些特征:

1.未知的、神秘的;

2.满足人类的好奇心的;

3.对结果能满怀希望的;

4.随机的正向奖赏;

5.只需要一步简单到发指的操作(打开容器、拉动拉杆、点击按钮等等),不需要任何的行动门槛,也没有等待时间



关于惊喜感

比如《设计中的设计》这本书中提到的出入境的印章案例、一兰拉面碗底的细节、电影或者游戏中突然出现的彩蛋、iPhone第一代的发布现场、突然发现的世外桃源、突袭的生日惊喜等等。

这些事物大致会带有这些特征:

1.超出原有预期的;

2.未提前告知的;

3.正向结果的;

4.产生共鸣的



那么,这些特征又该如何更具象得落地成策略,产品中又是如何利用这些策略,引导用户产生这些情绪的呢?

下面,我将基于这三类维度,并结合大量的大厂案例来为一步步你抽丝剥茧。


如何制造愉悦感

1.关于拟人化

基于上面的挖掘,我发现能引发愉悦感的一个明显特征,就是拟人化,这个非常有意思。

克利福德·纳斯在《the man who lied to his laptop》这本书中提出过一个观点:人们对待电脑的方式,与我们在与他人交流时使用的社会规范是一致的。我们对电脑的反应,就好像它们是人类一样。



也正因此,很多原本没有生命体征的物体,一旦被赋予了拟人形象,就容易被大家所接纳、引发愉悦。

做一下细分的话,拟人化基本涵盖了三个方面:语言、形象和表情。



1.1拟人化的语言

人对于具体的拟人形象更容易产生情感,其中便包含拟人化的口吻。使用这种口吻与用户交流,而非冷冰冰的设备语言,就可以提升产品温度,引导用户对产品产生正向情感,关于这块我总结了两方面。

一方面,文案尽量得接地气、轻松。

拿京东这款产品举例,文案从口吻上都会采用一种很轻松、接地气的拟人语气,来拉近和用户间的距离。比如在引导词后加入“哦~”“~”这种轻松的语气词。

另外,「京东问答」版块的引导词:传统产品是“添加问答”,是不是平平无奇。但京东使用了“我来助你一臂之力~”



QQ浏览器的评论暗提示,也不是传统的“写评论”“输入评论”,而是像日常聊天那样“我来说两句”,非常接地气、生活化。知乎直接套用了流行语,诙谐的同时引导用户注意言论。



另一方面,人类富有情绪变化,所以一旦用户触发了某个正面/负面行为,就可以给与情绪反馈。

在用户完成商品评价后,京东不仅仅是很传统得反馈“评价成功”,而是又加入了“感谢您!”的感谢词。看似加了三个字,但行动过后的正向感激反馈,和我们日常生活中受到正向反馈一样,被唤起正向的愉悦情绪。并愿意继续这个行为。

知乎的圈子业务,在用户完成签到后,反馈完成的基础上,使用了正向的情感反馈“ 我就知道你会再来看我”,仿佛是一位关系不错的老朋友,来唤起用户正向情绪。

另外,知乎在改版后,回答收到赞也不仅仅是“点赞成功”这类冷冰冰的机器语言,而是“已收到你的喜欢,谢谢!”并且配以作者头像,非常形象得传出对对方对我们的感谢反馈。这种正向反馈,相比”点赞成功“更有效得唤起正向情绪,形成正向激励。



当然,用户的消极行为也可以产生情绪反馈。

比如现在很多产品的取关反馈,不是传统的“确认”“取消”,而是用“残忍取关”和“给个机会”这种融入情感的文案来做挽留,就好像真的有个活生生的人,在被你否定后反馈给你的情绪,请求你再给个机会。有趣的同时一定程度上也可以唤醒用户的同情。(虽然这种做法过于业务导向,且有绑架用户的嫌疑)





1.2拟人化的形象

人对于具体的拟人形象更容易产生情感。因此,树立一个拟人化的品牌形象(也就是我们常说的IP),可以使用户对产品快速建立情感联系,也可以强化品牌感知。比如优酷的猴子、高德地图的老鹰、钉钉的燕子、linefriends等等。



世界杯的吉祥物也是同理,每一届的吉祥物必定会融入拟人化的特征,凭着亲切、可爱的形象和全世界的观众一起热情互动。



说到产品,以京东的这只狗子为例,兜底页、缺省页、启动页,都做了狗这个拟人形象的贯穿。



如果你记得没错的话,形象改版之前这只狗还是四脚坐地上的,但改版后就两脚着地了。这同样是通过更拟人的形象来赋予「人格」,以此提升愉悦感,拉近距离。



再比如夸克,它甚至单独新增了底tab入口,通过3d品牌形象,实现与用户的智能交流。另外,卡片和语音搜索都做了形象贯穿,后者还使用了形象的眼睛,来通过眼睛的变化进行情感交流。



1.3拟人化的表情

一段文字在加入了表情后,我们就能迅速了解到对方的情绪(比如我们日常的聊天)。因此表情这一招,也可以用以加深用户与产品的情感交流。

它可以和语音、形象灵活结合使用。通过全面的拟人化,来大幅提升用户对产品的形象感知,促进用户情感的产生、加深用户和产品的情感链接。

比如用语言输入,当系统未识别清楚时,传统的方案可能是一个错误图标加上「未识别声音,请再试一遍」的文案,但夸克中则使用了品牌形象的双眼来传达失落的表情,并结合了拟人化的语言。

同样做法的还有百度的未开麦提示、段子头图,快速传达产品的情绪,和用户情感交流。



另外,闲鱼设置昵称时,正在输入时、以及超出了限定字数,右侧的形象表情也会发生变化。



除了拟人化能引发愉悦外,还有一个很容易被忽略的要素同样能起到作用——动画反馈。


2.动画反馈

提起动画的作用,我们更多人首先想到的可能是强引导、注意力吸引,但动画同样能触发用户愉悦。比如当动画更加贴近现实,或者结合拟人化的特征时。

2.1贴近现实

最典型的例子,就是苹果appstore从卡片到详情页的转场过渡,点按的预备动作、卡片的放大展开、缓出的曲线、转场完成的惯性等等,都很贴近现实物理世界的运动规律。而这种自然的丝滑也更能引发用户的愉悦。



2.2结合拟人化

比如知乎的加载动画,结合了拟人化的特征,让这个过程变得格外有趣。刘看山奋笔疾书的动作也很符合知乎这款产品的定位。




如何制造期待感

随机给与内容

根据我们对期待感的脑暴,发现能触发这种情绪最典型的特征,就是随机性。

在产品中,则可以通过随机给予用户有价值的内容来引发用户的关注。结果的不确定使过程充满神秘,这种状态让用户兴奋和满怀期待,不会轻易离开。

比如网易新闻在进行新闻加载的操作时,会在加载动画上加入一个随机的小贴士。内容大致有三类:黄历、名言和一句话新闻。而且这些内容完全是随机出现,这种刷新过程好像在开盲盒,你无法预知会给你什么内容,非常有趣。而且它们入口深,不干扰;内容对用户也具有价值。



同样的还有丁香医生。在首页每次下来刷新后,都会出现不一样的健康类的小贴士。随机性很强,富有趣味。而且可以很好得满足求知欲。



雪球的个人页上,上划时也会随机给一条关于投资、市场的名言和网友的热门观点。



随机性游戏

把现实生活中的游戏搬到了手机,同样能激发用户的好奇和期待。比如微信读书的翻牌子、摇一摇、老虎机。还有天猫的翻牌子。




如何制造惊喜感

格雷戈里·伯恩斯曾做个关于脑部区域的研究,发现大脑不仅探寻未知,而且实际上还渴望未知。相比那些已知的日常惯例,新鲜新颖的事物更容易引人注意。所以提供一些以往没有过的、出乎意料的事物或互动,不但能引起注意力,而且也会带来惊喜感。



产品中的惊喜感设计,可以说是使用瞬间能够触达我们内心的一种短暂性愉悦,一个体验的峰值。

根据对惊喜感的挖掘,一个典型的特征就是超出预期,并且未提前预料。

比如Figma使用过程中,团队成员和你同时长按鼠标,并且靠在一起后,就可与触发击掌的动画彩蛋,非常有意思。



比如京东在五星好评后,会放烟花庆祝。



比如很多内容型产品,在详情页长按点赞按钮后,会触发全屏的「爆赞」动画。



再比如用户生日当天,通过启动页、弹窗等场景送上生日祝福等等。



这些能够超出用户预期的细节,即便多么细枝末节、出现频率多低,但只要能够被触发,都可能因为惊喜感而生成情绪峰值,加深用户和产品的情感链接。


最后

以上,便是趣味性背后的情绪挖掘和案例讲解。

作为设计师,我们在工作中总是强调以用户为中心,通过不断的调研、跟访、可用性测试来了解、分类用户,但更多的结果可能只是让产品不断得贴合用户的心智、符合预期。但如何增加粘度、建立深层链接,就需要通过趣味性这种情感化表达方式,来为用户制造愉悦、期待甚至惊喜。

正像诺曼在「情感与设计」中说的那样,每个产品都需要令人更放松、更愉悦的设计,以此来增强产品的适用性。

希望这篇文章能对你有所启发。


作者:设计师Andrew
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档