• 大厂元宇宙,又菜又爱玩

    设计动态 2023-01-28
    当下所有大厂推出的元宇宙产品,所能带来的沉浸式体验并不多,好在国内外科技巨头在bug方面都处在同一水平线。 以Meta为例,由于VR头显设备无法追踪用户腿部动作,用户在早前的版本中,虚拟形象曾出现下半身缺失的情况。 国内方面,淘宝未来城里的卡顿,以及跳转视频时

    在元宇宙这一概念出现在人们的视线之后,大厂们纷纷抢滩这一领域,不过目前来看,国内外大厂推出的元宇宙产品,并不能很好地达成用户目标预期,大厂在元宇宙场景的构建和实际应用上,依旧存在很大的提升空间。

    当下所有大厂推出的元宇宙产品,所能带来的沉浸式体验并不多,好在国内外科技巨头在bug方面都处在同一水平线。

    以Meta为例,由于VR头显设备无法追踪用户腿部动作,用户在早前的版本中,虚拟形象曾出现下半身缺失的情况。

    国内方面,淘宝未来城里的卡顿,以及跳转视频时的优化问题至今没有解决。最近百度元宇宙平台“希壤”中,也是随处可见的穿模、卡顿。

    左上为Meta“上半身”飘逸bug;左下为百度希壤的“穿模”;右侧为淘宝未来城跳转bug

    “但凡找些个靠谱的供应商也不至于翻车成这个样子。”一位资深游戏设计师认为,当前各大厂商元宇宙产品之所以问题百出,归根结底还是带着to B的逻辑做to C的产品,在赶鸭子上架的流水线作业中匆忙上线。

    “大厂为什么拿不出好的元宇宙产品?”光子星球从多位业内人士处了解到,问题主要集中在产品设计思路不明确、缺乏游戏开发经验,以及过于生硬的商业植入。

    在游戏开发、数字营销,以及一些元宇宙供应商看来,大厂的元宇宙场景,眼下几乎招招都是败笔。

    一、元宇宙平替信息流与短视频? 元宇宙+电商的背后首先是一场营销升级。

    元宇宙产品大多建立在3D立体空间中,以场景化植入营销内容,内生逻辑更接近于兴趣电商的范畴。从效果上看,元宇宙将短视频直播电商与游戏电商整合到了一起。电商游戏供应商杭州智娱创始人陈星将元宇宙视为短视频与直播的升级。

    另一种观点则认为是对传统信息流广告的升级。木臣是头部品牌数字化管理公司若羽臣的信息化中心负责人,他表示“虽然现在元宇宙问题很多,但我认为至少会逐渐替代信息流广告,带来营销方式的改变。”

    从目前情况来看,元宇宙的确在三个层次,改变着营销方式。一种是作为服务工具,第二种是作为产品表达,第三种是制造新的线上场景。

    作为服务工具,虚实融合技术已经在美妆领域有了现成案例。沙宣与若羽臣此前围绕一款新品,在应用中上线了拍图搜索;用户拍下自己头发,将照片反馈给品牌方,AI会基于照片中头发的各个维度,匹配对应产品,并告知护理方式。

    受限于电商平台接口的开放程度,上述方案很难直接产生经济价值,品牌方们大多持观望态度。

    相较服务工具,作为产品表达的元宇宙产品更为外界熟知。例如得物中的3D照片替代了原来以图文或者视频为主的详情页面,线上房地产租售平台上线的3D详情页,包括携程推出的“云旅游”等等,各类号称“元宇宙”的产品,其实只是为了寻求更好的产品表达方式。

    过去一年3C与汽车品牌对于元宇宙有着最为强烈的诉求。

    木臣之前曾为某笔记本品牌提供过元宇宙解决方案,用3D模型呈现笔记本的全貌,然后用渲染等动态方式呈现商品参数——在过去,只能通过图片与参数列表的堆砌实现。

    陈星的游戏公司过去一年也接触到不少汽车厂商,“我们前阵子帮大众做了一款元宇宙4S店的产品,我把链接发您,打开后可能有一点卡”。

    品牌方小打小闹,倒是电商平台雄心勃勃。过去一年,猫狗两强都推出了元宇宙产品,还都得到了高层背书。

    京东集团高级副总裁、京东探索研究院院长陶大成相信三五年后元宇宙会质变。而前阿里巴巴集团CTO程立在去年双11期间提到,未来整个系统数字世界会和这个现实世界深度融合,通过深度的实时的融合才能够形成一种真正同频共振的方式去共同创造确定性。

    图为“天猫2023理想生活空间”中,易烊千玺与3D场景融合

    无论淘宝未来城、天猫2023理想生活空间,还是京东在双11上线的垂直品类虚拟直播,包括百度“希壤”,大厂们更倾向于推出“大而全”的元宇宙场景。然而,从用户体验和实际效果来看,未免有些托大。

    上述产品都存在营销插入过于生硬的情况,无法激发用户购买欲望。以“淘宝未来城”为例,无非是在3D场景中“强行”插入了品牌直播入口,营造氛围,为用户建立虚拟化身。

    “一堆外形一模一样的虚拟人在屏幕中乱跑,却没有交互功能,而且获得虚拟币没有震动等强提醒,更没有植入引导,告诉用户这到底是什么。”陈星认为,游戏厂商提供营销解决方案必须站在用户体验角度考虑问题,而电商引入游戏营销工具则是希望把产品卖出去。

    这种截然不同的理解,是造成目前大厂元宇宙产品频频翻车的一个原因之一。

    “元宇宙产品必须考虑两个问题,要么你用社交和内容杀时间,要么设置付费解锁内容杀金钱。”在上述人士看来,电商元宇宙场景的实际效果可能还比不上一款消消乐。何况上线一个换皮的消消乐,真的不贵。

    二、压在元宇宙上的几座拦路虎 投入、技术、立场,种种问题都阻碍着大厂推出体验良好的元宇宙产品。

    实时互动技术厂商即构科技的行业运营专家Lily日前告诉光子星球,从周期上讲,哪怕即构自己推出了类似SaaS化的元宇宙解决方案,在没有定制化的前提下,上线至少需要一个月的时间。

    “一切建立在人力的堆砌上,比如堆的素材比较多,需要迅速响应美术模型的制作等等。像现在我们做一套衣服去,包括适配到所有动作与表情的场景、发型、衣着、配饰,都会拉长时间,光一套衣服走完整个流程可能就得三五天。”

    长周期之下,还需要不菲的开发成本。“如果做一款标品类似于我们那款DEMO产品(ZEGO Land),倒还好,可一旦涉及到局部定制化,成本很难降下来。”

    确切地说,成本与体验成正比,据业内人士介绍,一套标准化的虚拟直播解决方案只要几万元,但效果并不如人意。如果追求定制化,那么成本将无限趋近于开发网游,不具备性价比优势。

    成本是挡在面前最大的拦路虎。

    木臣告诉光子星球,去年双11前,各品牌都紧缩开支,希望“加量不加价”,而且不少完全没有接触过元宇宙产品的老板,根本提不起兴趣。“几十万做个标品,没有效果,几百万做个定制化的产品,客户又不愿意掏钱。”

    技术与优化问题也在阻碍元宇宙产品。

    2022年大厂推出的所有元宇宙产品,都出现了卡顿,甚至系统崩溃的情况。问题可能来源于过度追求UI导致硬件或者网络无法承载,缺乏针对手机机型的优化能力,以及没有解决同时多人在线的问题。

    “淘宝未来城”系统崩溃截图

    据了解,目前无论大厂、小厂的元宇宙产品,大多只能做到万人同时在线的情况,例如日前网易与央视网合作的网络春晚为万人实时互动;即构所提供的多人实时元宇宙交互解决方案也在万人规模。

    例如Lily使用空间视野裁剪优化产品的思路,其实来自游戏行业,在远距离视角使用低模,降低硬件与网络负载;近距离使用高模,提供更好的用户体验。此外,针对不同机型,不少元宇宙解决方案服务商都会针对SDK进行优化,甚至还会适配到三年以前的千元机型。

    可即便如此,短时间用户大量涌入依然会造成卡顿,何况还有高并发问题,要想进一步确保产品体验,只能砸钱扩容。

    元宇宙现有的商业模式让供应商们不大可能像游戏领域一样大手笔投入。

    主流的产品,如SaaS平台大多会按年计费,但是对于那些只有几天、一个月活动规划的公司来说,按年授权不太划算。于是即构这些厂商也在尝试提供按项目计费的方式,去提供更高性价比的方案。只不过,由于素材复用,又难以兼顾定制化需求。

    目前大部分元宇宙产品大多会找有3D制作能力的第三方,例如陈星的公司,然而其外包属性往往缺乏创意能力。另一部分厂商会专门找设计公司设计形象,再拿着形象找外包工作室制作成品,这些公司要么深谙营销,如若羽臣,要么初步形成平台能力,如即构科技。

    “元宇宙是一个多行业综合写作的东西,在实际合作过程中,最大的问题是各团队相互甩锅。”陈星的团队经历多次合作后,发现了这条年轻产业链普遍存在的老问题。

    三、巨头无法独自“元”起来 淘宝/天猫与京东都有独立团队在开发元宇宙产品。

    显而易见的是,游戏产业链将可能被复刻到元宇宙产业之中。陈星表示,自己的团队有可能会涉及到元宇宙项目,毕竟透过另一家游戏化营销方案平台,间接与淘宝有过合作,要外包也会优先考虑已经入库的合作伙伴。

    因此,像图标与素材、开发与设计、运营与维护等游戏产业链未来都会深度介入到元宇宙的构建之中。不过都会面临一个营收与成本的悖论——当元宇宙的开发过程越来越接近于网游时,实际应用场景能否带来接近网游的收入,至少目前各方的回答都还是否定答案。

    正如前文提到,不少品牌主即便看到元宇宙提供了全新的营销场景与营销方式,但受累于成本和自身惯性思维,尚处于试水阶段。

    “虚拟人直播与真人直播数据的差距还是蛮大的,特别是黄金时间,品牌方还是愿意用成本更高的真人直播。”木臣认为,品牌方更关注实际运营指标,虚拟人乃至元宇宙都只能混迹于半夜、凌晨这类边缘时间,暖场可以,唱主角不行。

    从现有营销市场落地案例来看,不同行业对于元宇宙的需求存在巨大差异,客观上阻滞了产业链发展——没有标准化产品,根本不可能降本。

    一些本地服务或者旅游业,如连锁快餐、连锁饮品、消费品牌主要通过数字人或者元宇宙场景进行品牌植入。理想状态下,元宇宙之于它们,相当于《海尔兄弟》之于海尔。

    对于美妆、服饰、3C以及房地产租售等行业而言,元宇宙为之提供了全新的场景体验,从而解决眼下必须到店试用的痛点。用陈星的话说,“前提是你模型先要做得足够真实”。在虚拟世界重构现实,面临着技术、合规性以及成本的考验,尤其是涉及到用户。

    至于当下如过江之鲫,抢滩元宇宙的互联网巨头们,闭门造车的产品都难言成功。

    就拿场景沉浸感来说,大厂的元宇宙,就连音效都做不好,而在一些服务商看来,这早已不是问题;凌乱的3D场景与缺乏社交功能,早在多年以前就被游戏厂商解决。

    “真空环境绝不可能成就伟大的商业创新”,这句话同样也适用于元宇宙这类新事物。

    作者:吴先之;编辑:王潘

    来源公众号:光子星球(ID:TMTweb),细微之处,看见未来!

    本文由人人都是产品经理合作媒体 @光子星球 授权发布,未经许可,禁止转载。

    题图来自Unsplash,基于 CC0 协议

    该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

    给作者打赏,鼓励TA抓紧创作!

    {{{path> 赞赏

  • 万字拆解!12306产品设计全方位深度解析

    UI交互 2023-01-28
    有人说它是全世界最牛逼的 APP,因为它的算法难度和春运期间访问量几乎是全球之最;但有人说它是全世界最垃圾的 APP,因为在使用这个产品的过程中,遇见很多奇葩、愤怒的体验。关于这两种说法,众说纷纭,本期设计大侦探,就来全面拆解铁路 12306APP,一起来看看这个产品到底是如何设计的,用户体验如何。往期拆解:上线...

    有人说它是全世界最牛逼的 APP,因为它的算法难度和春运期间访问量几乎是全球之最;但有人说它是全世界最垃圾的 APP,因为在使用这个产品的过程中,遇见很多奇葩、愤怒的体验。关于这两种说法,众说纷纭,本期设计大侦探,就来全面拆解铁路 12306 APP,一起来看看这个产品到底是如何设计的,用户体验如何。

    往期拆解:

    上线即爆火!3600字完整拆解微信键盘的产品设计 微信键盘发布啦!

    阅读文章 >

    一、导读 1. 内容结构

    全文 9700 字,分为六个部分,分别是导读、产品画像、出行服务、内容服务、思考总结和后记,你可以通过下面的思维导图对本文内容快速的了解。

    2. 适合人群

    第一类,UI/交互 设计师 ,可以跳出执行层,全方位体验 12306 的产品设计,多维度去思考和总结如何规避类似的陷阱;第二类,产品经理/运营,通过全面的产品设计拆解、体验反馈,获取产品设计参考;第三类,旅游及出行相关行业从业者,通过对 12306 的全面拆解,获取竞品设计参考。

    3. 分析模型

    第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的 5 个重要环节,主要用于拆分和分析产品的功能价值。

    第二个,尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则,任何产品的设计,都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则,通过这十大原则,可以对 12306 的产品设计体验进行全面的校验和侦查。

    用超多案例,帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

    阅读文章 >

    第三个,设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2 效应、席克定律等常见设计基础理论。

    万字干货!15个著名的设计心理学原理和应用深度解析! “除非有更好的选择,否则就遵从标准” 你是否有在听别人说某某原理法则时一脸懵 B 的时候?

    阅读文章 >

    二、产品画像 1. 产品介绍

    铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件,主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务,首个版本发布于 2012 年 10 月 16 日,根据易观千帆数据,截止到 2022 年 10 月,12306 月活跃用户人数 6,923.78 万。

    2. 用户画像

    铁路 12306 的用户群体主要以男性用户居多,占比 65.04%,女性占比 34.96%;从年龄分布看,以 24-30 岁的用户群体最多,占比 36.52%,31 到 35 岁的用户占比 24.23%,36 到 40 岁占比 20.27%,41 岁以及以上占比 10.30%;从用户消费能力看,中高消费者占比 33.48%,中等消费者占比 30.43%,高消费者占比 14.70%;从地域分布看,新一线城市用户最多,占比 27.93%,一线城市占比 19.93%,二线城市占比 19.00%,其中广州用户最多,其次为深圳、杭州和北京。

    3. 信息结构

    铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买,其次还提供各种快捷功能入口和酒店预订等服务;「出行服务」主要为用户提供约车、酒店、订单等服务;「订单」是可查询和管理在 12306 的各种订单;「铁路会员」是 12306 的会员版块,提供车票兑换、会员活动等内容;用户中心提供个人资料管理、出行向导和常用功能等内容。

    4. 重要迭代记录

    根据七麦数据统计,铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日,截止到 2023 年 1 月 12 日,APP 版本已经更新至 V5.6.3 版本,近一年版本更新次数为 5 次。

    版本重要迭代记录

    2021 年 9 月,发布 V5.4.0 版本,新增无障碍功能、老人及障碍人士购票更便捷,即爱心版;

    5. 产品生命周期

    作为中国铁路客户服务中心的官方购票平台,铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察,截止到 2022 年 10 月,12306 月活跃用户人数 6,923.78 万,日均活跃人数 811.65 万。由于是国有企业运营,而且是垄断业务,12306 没有任何商业变现的压力,从产品发布时间和活跃用户人数看,目前处于产品生命周期的成熟期。

    6. 竞争图谱

    截止到 2022 年 10 月,易观千帆数据显示,铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位,旅游类排名第一,汽车火车船票预定类第一,月活跃用户人数几乎是其他 APP 的总和。

    三、出行服务 作为 12306 最核心、最重要以及实现商业变现的服务,出行服务主要为用户提供火车票、飞机票的销售,其次还链接了众多第三方合作伙伴,为用户在出行的各种场景提供了便捷的服务。

    1. 票务 「票务」是 12306 最核心的服务,主要为用户提供火车票、飞机票和汽车票的查询以及销售,其次 12306 还对三种产品进行了组合,推出了空铁联运、铁水联运这样的服务。

    ① 火车票

    「火车票」就是为用户提供火车和动车的票务销售,用户输入出发站、终点站和时间以后,就可以进行查询,其次还支持对已购买的车票进行变更到站、改签和退票。

    1)售票

    售票页

    当用户输入目标站点以后,就进入了售票页。在这个页面,可以看到当天列车的所有车次,包括直达、中转、出发时间和剩余票数。在底部,有一个菜单栏,包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能,这主要是帮助用户快速寻找符合自己需求的车次,比如出发车站、出发时间等。

    体验陷阱

    这个页面的操作体验不太友好,底部的菜单栏不仅没有实现全屏手机设备的兼容,而且几乎和背景的元素贴合在一起,不够醒目,如果用户不注意,根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。

    订单页

    在用户选择好车次以后,就进入订单页。用户需要选择座位的系别,包括硬座、软座、二等座、一等座、特等座等。

    用户需要选择乘车人。添加乘车人的步骤比较简单,在输入用户的真实姓名、身份证号码和手机号码以后,即可添加成功。首次使用12306的用户需要进行身份核验,用户需要通过验证系统发送的核验信息才能添加成功。

    细节侦查

    「姓名」这里有一个非常友好的设计体验,那就是针对无法输入的生僻字、名字超过 30 个字符,以及外籍用户的极端情况都给出了详细的指导,针对用户可能出现的极端的情况给与及时的提示,这就是尼尔森十大原则中的容错原则,帮助用户从错误中恢复,将损失降到最低。

    在「选择乘车人」的右边,还有一个「选择受让人」的功能。这个功能有很高的学习成本,会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能,它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户,积分又可以抵消火车票款,从而实现抵扣。

    选择好乘车人以后,用户可以进行选座,就进入了提交订单、支付费用的环节。

    支付页

    订单生成后,用户需要在付款限定时间内支付火车票费用,否则订单将会取消。其次在支付页,也向用户推荐相关的保险服务,比如铁路乘意险,又分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险。

    「购买返程」其实一个非常便捷的功能,但12306设计的层级太深了,而且没有加上一键返回首页或订单页的按钮,用户如果想退回到订单页或首页,需要不断点击返回,操作路径实在太长。

    体验陷阱

    底部菜单设计了三个按钮,违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用,但是菜单栏的三个按钮权重设计得一样高,取消订单和购买返程这两个按钮,严重干扰了用户的选择,降低了操作效率。

    支付成功页

    当用户支付成功以后,「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务,非常便捷。不过内容的规划比较乱,体验稍差。

    候补下单

    「候补下单」是一个非常方便的功能,这个功能主要解决在当前车次没票的情况帮助乘客自动排队,如果有其他乘客退票,就自动抢票,非常贴心。这个功能也被誉为黄牛的终结者,帮助乘客自主排队。

    2)变更到站

    「变更到站」是指乘客可以更改目标站点,进入订单详情页后,点击「变更到站」按钮,点击底部的「立即变更到站」就可进入变更页面。在变更页面,乘客可以重新输入目标站点,然后再次进入车票售票页,选中需要变更的车次以后,进入订单页提交订单,变更成功。需要注意的是,变更到站只能办理一次。

    体验陷阱

    当用户点击「变更到站」的时候,如果不注意观察页面,根本感受不出原来需要在底部菜单栏进行操作,会让乘客陷入焦躁,不知道下一步从哪里进入。其次在变更到站页面,下半部分设计了很多快捷入口,比如车站大屏、约车、餐饮特产等,把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律,大大降低了用户的操作效率。

    3)改签

    「改签」是指用户可以更改出行的时间,改签的流程和「变更到站」相似,进入售票页后,选中需要变更的车次,进入订单页提交订单,改签成功。需要注意的是,车票改签只能办理一次,开车前 48 小时以上,退票费为票价 5%,24 小时至 48 小时之间为 10%,不足 24 小时为 20%。退票费最少 2 元起步。

    4)退票

    「退票」是指用户可以退掉已经购买的车票,退票流程比较简单,点击退票后,进入退票确认页,点击确认退票成功。需要注意是,距离开车前 8 天以上的不收退票费,其他的时段将会根据列车开车前的时间收取手续费,最高 20%。

    迭代建议

    在用户点击退票的时候,应该出现弹窗,再次提醒用户是否确认退票,这样能避免用户误操作。这就是尼尔森十大原则的容错原则,帮助用户从错误中恢复,将损失降到最低。

    5)购票后

    当乘客购买车票后,12306 的首页会加入一个行程的版块,向用户展示最近的行程详情,其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好,直观醒目地告诉乘客最近的行程信息,通过外部触发避免乘客忘记行程。

    行程页

    这个页面从上至下包含四个部分,头部是乘客详细的车次信息,比如出发时间、经停站、天气等;中间是车票信息,包含检票口、座位号、车次和乘车二维码等信息;接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务,比如餐饮预定、酒店预定等服务;底部是关于出发站、到达站的天气预报信息和优惠服务等信息。

    细节侦查

    行程页把乘客的出行拆分为 3 个场景,出行前服务(提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定)、车站/列车服务(提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航)和到达服务(遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航),这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。

    ② 飞机票

    「飞机票」就是为用户提供飞机的票务销售,用户需要输入出发站、终点站和出发时间,如果携带孩子或者婴儿,还需要单独勾选。飞机票同样支持改签和退票。

    1)售票页

    售票页的内容非常简单,在头部,用户可以左右滑动选择时间,页面内容以 Feed 流向用户展示详细的航班信息,其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏,用户可以进行筛选设置,还可以根据价格高低和出发时间排序。

    2)选择舱位

    选中航班班次以后,进入到「选择舱位页」,在这个页面可以查看到航班的详细信息,比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级,比如经济舱、商务舱和头等舱,选中后,即可进入预订流程。

    拓展阅读

    为什么同一架飞机同一个经济舱飞机票价格不一样?这是因为一个飞机的不同舱位实际上是不同的产品,所以座位有不同的等级,故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。

    3)订单页

    在订单页,可以查看到订单的详细信息,包括收费说明、退改说明等,在用户添加乘客以后,就可以提交订单。这里需要注意一下,如果乘客携带孩子或婴儿,需要添加儿童出行人。

    体验陷阱

    当乘客勾选了「携带儿童或婴儿」的选项以后,在订单页准备支付的时候,系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加,或直接给出对应的功能跳转链接,这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则,不仅在用户犯错之前没有给出提示,犯错了还不给与指导,真的非常糟糕。

    ③ 汽车票

    「汽车票」为用户提供客车的票务销售,用户输入出发站、终点站和时间以后,就可进入售票页。汽车票的订单流程非常简单,在选中客车车次以后,添加乘客支付费用后,订单即可生成。

    体验陷阱

    用户在选择「达到地」搜索框输入地名时候,应该提供模糊搜索,比如输入湖南的地名,应该为用户提示相关联的车站。

    ④ 空铁联运

    空铁联运,顾名思义就是把飞机和高铁这两个产品组合在一起销售,支持用户一站式购买“飞机+高铁”的联运行程,只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下,为用户提供飞机+高铁的转运方案。这个功能对于乘客来说,支持一站式购买“飞机+高铁”车票,可以节省购票时间,非常友好。

    ⑤ 铁水联运

    和空铁联运一样,这也是一个组合产品的销售,支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样,我们就不必重复。

    ⑥ 雪具快运

    12306 还推出了一个雪具快运的服务,为广大旅客提供多种个性化雪具寄送产品服务,还支持随车办理或上门办理寄送服务,目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单,采用预约制,选中服务后,填写用户详细信息,支付成功后,订单生成。

    ⑦ 小结

    作为 12306 最重要、最核心、最复杂的功能,从这个版块的内容拆解和实操体验来看,可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑(笔者通过实操测试,几乎都能买到票),特别是在春运这种会出现超过上亿用户抢票场景,真可谓非常不容易。不过从用户体验来看,非常一般,甚至有很多不合理的设计。

    2. 出行 出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务,有结合车站商家的在线点餐,有结合当地地域特色的旅游服务,还有约车、保险、酒店等服务。这些服务,多数由第三方合作方提供。

    ① 餐厅特产

    「餐厅特产」是一个为乘客提供在线点餐的服务,在乘客输入列车车次以后,就可以进行点餐,支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好,不仅解决乘客在乘车前的就餐问题,为车站的商家引流,还可以增加平台的变现方式。

    ② 铁路游

    「铁路游」是 12306 结合旅游出行的场景,为乘客推出的一项旅游服务,包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好,但是版块目前设计得比较简单,内容也比较少。

    ③ 约车

    「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求,用户在出行的前后都有用车服务。为乘客提供约车服务,不仅能增加变现方式,还能方便乘客出行。通过实操体验,约车主要由第三方合作方提供服务,比如曹操出行、T3 出行等公司,为乘客提供出租车、品质专车和商务车等车型。

    ④ 保险

    保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险,在乘客购买铁路的订单页就会向乘客推荐,乘意险价格低,保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供,主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。

    ⑤  酒店

    酒店这个版块的内容相对夯实,不仅有新客大礼包这样的用户权益,还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP,包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员,相对其他版块而言,这个版块花了比较多的心思。

    ⑥ 铁路商城

    铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城,包含了帮扶专区、优选好物、兑换专区、今日特卖等内容,其次还支持企业集采,批量购买。

    ⑦ 小结

    从这个版块,可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务,有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差,事实上可以参考像顺丰速运、智联招聘这些 APP,通过内置小程序的形式来设计,完全可以把这些版块让第三方单独设计和维护,同时还能为用户带来更好的体验。

    3. 会员 铁路畅行会员是中国铁路统一对外会员服务品牌,开通畅行会员不需要花钱,畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等,主要包含积分权益,兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋,也没有太多价值的内容,可以看出 12306 在用户运营方面比较欠缺。

    4. 订单 12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单,从这些订单类型可以看出 12306 的服务特别多。

    体验陷阱

    这个设计实在太糟糕,严重违反了 7±2 效应。琳琅满目,花枝招展,让用户在这个页面几乎迷失。更糟糕的是,当你有一个非常重要的待支付订单,这个页面竟然没有角标提醒,最终你会因为这个糟糕的设计打乱自己的行程计划。

    四、内容服务 内容服务是帮助产品实现用户留存和运营的版块,不过从 12306 的内容设计来看,整个产品的运营手段比较少,所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。

    1. 便捷功能 以下这七个功能,对用户而言,是非常便捷、友好的功能,可以帮助用户在出行的旅途中获取很多帮助。

    ① 车站大屏

    「车站大屏」是一个非常贴心的功能,通过这个功能,可以为用户提供车站的实时列车信息,非常方便。大屏详情页可以拆分为三块内容,左上角可以切换全国各地的火车站,头部还有搜索框,为用户提供车次的查询,主体内容是当前车站向西的车次信息,包含发车时间、候车室、检票口和候车状态等。

    1)车次详情页

    进入列车的「车次详情页」,可以查看当前车次的完整信息,比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面,还提供了「关注列车」的功能(关注后并无关注数据,显得很鸡肋),以及直接预订当前车次的入口。

    2)车站详情页

    「车站详情页」就像一个站点的主页,为用户提供完整的车站信息查询。这个页面可以拆分为四块,头部可以切换其他站点,并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口,包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间,底部是车站附近周边的酒店精选。

    迭代建议

    这个页面把车站当做一个主体,聚合了一个车站完整的功能,其实挺有创意,但页面隐藏得很深,如果不去拆解,几乎很难发现,很是可惜。我认为完全可以提高权重,升级为一级栏目,代替会员,或者和出行栏目进行整合升级。

    ② 站内导航

    「站内导航」提供目标车站的 LBS 导航,对于乘客来说,到达一个陌生的站点,需要清晰的指引,这是一个非常便捷、温馨的功能,能帮乘客解决很多问题。不过这里有一个莫名其妙的设计,那就是进入这个功能之前,系统提示请摇“8”字校准手机,事实上这里是一个加载动画,但是画面和内容却误导了用户,我甚至每次进入都傻乎乎的摇动手机。

    ③ 临时身份证

    临时身份证是一个非常重要的功能,12306 现在支持 APP 在线申请,极大方便了乘客的出行。申请流程也比较简单,填写个人信息,验证审核通过后,就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。

    ④ 遗失物品

    这是一个非常贴心的功能,如果你在乘车的过程中不小心丢失物品,可以通过这个功能登记,输入你的详细信息就能登记成功。

    ⑤ 重点旅客

    这也是一个非常贴心的功能,主要为老年人、残疾人服务,通过填入你的信息,列车会根据你的情况提供优先进站、协助乘降等服务。

    ⑥ 爱心版

    爱心版就是长辈版,专门为中老年用户设计的版本,在用户中心切换后就可进入爱心版。整个版本设计得非常简洁,操作步骤也比较简单,对中老年用户比较友好。

    ⑦ 英文版

    英文版在用户中心的设置点击语言即可切换,整体的版本设计得直接简洁,用户体验不错。

    ⑧ 小结

    从这个版块可以看出,一个产品如果以用户为中心去设计,是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能,过往我们只能提前出发去车站排队办理,但如今 12306 已经把这样的痛点解决,为用户节省了大量的时间。

    2. 向导功能 以下 8 个功能,虽然属于出行向导,不过体验下来,感觉用户体验比较差,很多功能完全无法弄懂它的设计目的是什么,显得非常鸡肋。

    ① 快捷退票

    「快捷退票」这个功能的设计,让人摸不着头脑。从操作流程看,首先需要输入用户的详细信息,包括姓名、身份证号码和手机,其次需要进行人脸核验,到了第三步还需要选择车票的日期车次,在最后的退票操作页面,用户点击退款后,没有和用户再次确认就直接退票。整个流程体验下来,非常糟糕。

    体验陷阱

    这个功能和订单页的退票感受不出来有何区别?如果用户要退款,不如直接去订单页进行退票,操作步骤简单,一目了然。其次不支持自动导入用户的购票信息实在太不方便,需要通过选择车票购买日期和车次,这个设计实在让人生气和愤怒(我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来,又再次重复前面两个步骤才到这个步骤)。

    ② 联系方式

    这也是一个看不懂的功能,进入页面后,需要用户输入乘客的详细信息,但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同?更糟糕的是,当你把自己的电话号码、身份证信息填入后,系统会显示核验成功,然而当你再一次进入,页面内容还是和之前并无区别,你不知道自己是不是还要重新输一次?

    ③ 时刻表

    「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息,但这个功能「车站大屏」几乎已经包含了,这个功能显得意义不大。

    ④ 查票价

    这个功能非常鸡肋,因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息,相反在这个页面,根本无法看到价格,因为价格的字体大小只有 20px,乘客几乎很难注意到。

    ⑤ 查代售点

    这个功能主要为用户提供全国各地火车票代售点的查询,不过在互联网技术发展到今天,火车票代售点越来越少了。从 12306 采集的信息来看,部分代售点缺少电话等关键信息,对用户来说,比较鸡肋。

    ⑥ 起售时间

    这个功能为用户提供各车站每日的起售时间,属于一个低频功能,可以解决乘客某些极端场景的需求。不过在我体验下来,比如通过此功能查询 1 月 29 日的车票,显示北京站起售时间为 10:00,但是在火车售票版块,我也可以直接购买 1 月 29 日的车票,这让我比较疑惑这个功能的价值在哪里。

    ⑦ 正晚点

    「正晚点」同样是一个鸡肋功能,而且还需要输入准确的车次才能进行查询,车站大屏已经完美可以取代这个功能。

    ⑧ 列车状态

    「列车状态」比正晚点都还鸡肋,让人愤怒,因为你需要输入正确的出发地、到达地和出发时间,对了,还有正确的车次才能进行查询,这样的操作成本比下载 12360APP 都还麻烦。

    ⑨ 小结

    从这个部分的内容拆解和操作体验来看,12360 的产品设计得不够细致和贴心,很多功能就像是硬生生塞进去一样,滥竽充数。其次从他们的产品迭代记录次数可以看出,近 1 年更新时间只有 5 次,也许每一次都是在做加法,没有想过做减法,所以导致这部分的功能显得鸡肋而且有很大缺陷。

    五、思考总结 通过对铁路 12306 的全面拆解,接下来我将从内容层、功能层、体验层和视觉层进行总结。

    1. 内容层

    12306 整个产品的内容设计,用一句话总结,可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务,比如酒店、约车、点餐、商城等,甚至还有空铁联运、铁水联运这种多场景的组合售票方式,不过在实际的版块内容打造中,则显得比较空洞,体验一般。这个产品,可以说几乎没有创新点,这主要也是由于它是由国有企业设计运营,背景极其复杂,设计目标也飘忽不定。

    2. 功能层

    在 2015 年之前,铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作,那时候一票难求,春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后,目前 12360 的购票效率非常高,经过笔者多次的测试和调研,目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能,帮助用户解决买票痛点,可谓非常贴心、友好。

    3. 体验层

    铁路 12306 的用户体验,非常一般,我在这次的 产品拆解 中至少侦查出了 20 条体验陷阱,这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页,这完全就是把用户当成傻子一样看待,其次还有一堆数不清的鸡肋功能,对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦,更能减少我的焦虑。

    4. 视觉层

    作为一个 UI 设计师,在拆解 12306 的产品过程中,我对整个产品的设计感到绝望。首先,没有做到统一性,整个产品毫无设计规范,比如卡片的圆角、品牌色、版块间距根本不统一,这样的视觉体验一眼望去就非常糟糕;其次,图标、活动图、橱窗图以及详情页的设计毫无美感,满满的山寨 APP 风格,特别是订单页的 ICON,花花绿绿、琳琅满目,连最基础的统一都没有做到。

    六、后记 作为一款国民级用户 APP,铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友,每年春运开启之前就为了回家的火车票犯愁,不仅要去遥远的火车站排队,很多时候还可能空手而回,那便是最初对 12306 的记忆。

    如今十年过去了,12306 解决了亿万人的出行抢票需求,让我们在春运的路上,可以轻松购买一张回家的票。但下一个十年,我更希望 12360 的产品团队,可以重视用户体验设计,让我们不再掉入那些体验陷阱。

    参考文献:

    易观千帆-铁路 12360APP 数据分析 七麦数据-铁路 12360APP 数据分析 中国铁路 12306 官网 尼尔森十大原则 《设计的陷阱:用户体验设计案例透析》- 乔纳森·沙利亚特 欢迎关注作者微信公众号:「设计大侦探」

  • 腾讯7000字干货!超详细的全局交互规范制定指南

    UI交互 2023-01-28
    更多设计规范的相关教程:案例实操!从零开始教你构建产品颜色规范前言 这一次的北农商银行的项目,是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:产品设计:保障...

    更多 设计规范 的相关教程:

    案例实操!从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目,是在企业版手机银行 App 上加入企业 OA 的功能。

    阅读文章 >

    一、如何「理解」交互规范 说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:

    产品设计:保障产品内不同模块的设计一致性,同时提高不同 设计师 间的设计、协作效率

    研发开发:通过定义的标准规范,提高流程、组件的复用率,提高整体开发效率

    用户使用:让用户能够在产品全局感受到统一且完整的体验,降低使用成本和学习难度

    而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成,在全局原则的指导下,侧重不同的维度和内容分别展开规范的定义,最后再合到一起形成一份完整的设计规范。

    从用户体验要素来看,视觉主要是在「表现层」「框架层」进行规范的统一,主要包括:形、色、字、构、质、动 六个层面。

    而交互角度相对抽象,主要针对于产品的「结构层」「框架层」入手,定义统一的交互规范,指导页面、流程搭建和组件使用规则。包括:全局原则、页面布局、通用流程、标准组件、文案规范。

    整体维度呈“从抽象到具体的总分关系”,不仅对产品的各个维度都有具体的交互指导,而且不仅能保证长期使用,避免重复返工;同时也便于囊括后续的迭代内容。而这些内容,就是我们通常定义的交互规范,也是交互参与定义设计规范的发力点。

    有了对于基本认识和搭建框架之后,我们来详细聊聊如何定义交互规范具体内容。

    二、不同阶段应该定义哪些交互规范? 产品有不同发展阶段,设计规范同样也有,不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多,保证投入产出比最大化;同时也要构建一个合理的规范迭代思路。

    产品探索初期:

    该阶段的产品核心目标是「验证产品或商业模型」,业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态,存在着“先满足功能,再优化体验”的情况,导致该阶段的产品体验往往不太过关。

    搭建目的:通过定义原则,梳理关键页面和流程,搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断;从页面到流程,又能对应设计参照标准;同时业务可以在规定的框架下发展,不仅让产品体验的根基牢固,而且不会限制功能设计自由。

    搭建范围:「全局原则」「页面布局」「通用流程」

    产品稳定发展期:

    该阶段的产品基本形态已稳定,也形成了初步的模型结构。后续迭代是在现有结构的基础上,进行增加或优化功能。虽然探索期定义了产品原则、布局和流程,但探索期产品的自由生长,会导致不少设计细节不一致,从而影响了产品整体的体验和效率。

    搭建目的:通过回溯整理过往设计,沉淀优化成完整的交互规范。再根据规范统一产品体验,进一步优化流程和效率, 让整个产品体验达到相对稳定的状态。

    搭建范围:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」

    三、如何「定义」交互规范 1. 定义交互规范的原则

    与行业通用的设计规范(如 TDesign、AntDesign)“大而全”“通用”的特质不同,一般团队内构建的设计规范都是源于某一个产品或业务,主要的特点是“专精”。专注于「业务」本身,主要是「团队内成员使用」,追求的是投入产出比最大化。

    基于此背景,当我们在定义「交互规范」时,有三点原则:

    原则一:保持规范的业务性。设计规范既要贴合业务场景归纳完整,同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划,尽量富有前瞻性,这样定义的规范不仅能覆盖当前需要,同时后续也能更好地迭代。

    原则二:保持规范的专注性。有的放矢,明确内容优先级,避免盲目追求大而全和形式主义。对于优先级高(覆盖面广、复用率高)的关键内容重点描述;优先级低(逻辑简单、认知一致)的内容可简要描述,避免事无巨细降低效率。

    原则三:保持规范的生长性。设计规范不是一成不变,而是跟随业务发展不断迭代完善的,所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方,及时修订同步团队,避免墨守成规,固步自封。

    最后,还有一点建议:在定义规范时,可以站在前人肩膀,适度参考行业设计规范,能复用用的直接参考,具有业务特性的再集合业务综合考虑,使整个规范制定效率更高,科学性、指导性更强。

    在找到自己当前所属的产品阶段、明确要建立哪些设计规范后,具体应该如何进行落地执行呢?建议从以下 4 个步骤入手。

    2. 第一步:定义规范分类

    如上文中提到,一个完整的交互规范分为:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度,但每个维度具体含有哪些内容,都是不一样的。仍然需要根据实际业务需要去定义,这样才能尽量保证没有遗漏,也更好为下一环节评估工作量。

    通用的做法有两种:

    方式一:整理业务场景下不同的页面、流程等,并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向,可以采用此方式。

    以「页面布局」为例,就需要将关键页面按统一颗粒度收集(按层级或按场景等)。

    方式二:参考行业通用规范的定义,先罗列完整,再根据产品实际业务需要进行增删改。

    「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀,可以采用此方式,例如下图组件的梳理。

    最后可产出如下图的规范分类和具体内容。(可以列的不是很全,后续补充具体部分内容时持续维护这张表。)

    3. 第二步:确定分工排期

    有了具体内容作为依据,便可以根据此进行排期分工。

    分工原则:推荐按规范分类进行分工,一个大的分类由一人负责,保证专注性。同时团队交互最好都能参与,保证后续对规范更好的沿用。

    排期原则:「定义规范」和「输出需求」两者经常要并行处理,此时提高效率,控制投入产出比就很重要了,我们需要明确优先级,先做什么后做什么。有 3 个思路可以综合参考:

    并行的思路:在定义完「全局原则」后,剩下的页面、流程、组件、文案都可考虑并行定义,彼此之间没有明确的依赖项。 迭代的思路:近期有迭代的版本,如:即将改版的模块、反馈较多体验较差的模块,其中涉及到的页面框架、组件可优先定义。 复用的思路:某些典型页面、典型流程、典型组件涉及面广,许多需求的设计都将借鉴参考,亦可优先抽象定义。

    4. 第三步:统一撰写原则

    设计规范是由不同的设计师一起合作完成,所以我们尽量在一开始,就需要统一规范的撰写和展现形式。以此提高后续合并的效率,同时又能保证其阅读体验,让其它使用者能够更好遵循。对此,我们定义了几个关键原则:

    目录完整:高效检索,快速让使用者找到需要的内容。

    原则清晰:抽象的内容往往含有许多概念和原则,需要让使用者先理解再参考,才能保证后续使用正确、举一反三

    多图少字:没有人喜欢看字,图片更容易吸收

    搭配案例:让使用者更好的代入场景,理解和使用规范。

    5. 第四步:定义具体规范 ★

    前面铺垫了许多流程性的内容,就像我们日常输出设计需求一样,大家或多或少在工作中都有遇到过。接下来,将重点聊聊,我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。

    ① 全局原则

    目标:明确影响整站各个模块、各个页面设计的原则和规范,指导我们后续各种规范的定义和设计。

    而全局原则也分两种,设计原则和业务原则两种。

    设计原则:每个完整的设计规范都需要包含的内容,如:设计价值观、设计准则。看似相对务虚的东西,实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考:

    你为什么需要设计原则? https://zhuanlan.zhihu.com/p/246430795

    业务原则:源自实际业务本身产生的问题,行业内没有标准定义。需要具体问题具体分析,推导出具体目标,最后再统一制定规范解决业务问题。

    举一个实际的例子便于理解:全局 Z 轴定义

    明确问题: 整站层级高度没有统一定义,导致不同控件间相互遮挡,没有统一规则。需要定义全局 Z 轴规范,统一不同场景、页面、组件的高度。

    梳理借鉴: 统一梳理相关场景、页面、组件,明确需要定义的范围。再查找行业规范,有无参考借鉴。(如 Z 轴定义,可参考 Material Design)

    定义规范: 最后通过最具代表性的场景进行展示

    全局原则没有维度高低之分,例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要,能够覆盖整站各个部分,都可以纳为全局原则。

    ② 页面框架

    目标:梳理整站所有关键页面,整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。

    页面框架的搭建一般由四个步骤组成:

    第一步,收集页面:根据早期定义的规范分类,收集展示所有相同层级的页面。这些在定义规范分类时,应该已收集完成。

    第二步,框架布局:提取共性,搭建框架和布局,明确页面大的区域划分和结构。(TDesign 布局详细指南)

    第三步,功能分区:基于框架布局,细化区域内具体的业务功能属性,如:导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容,同时也是最难定义的。主要原因如下:

    定义太细,担心缺乏前瞻性限制后续设计: 定义越细灵活度就低,后续改动和限制性就越高。为避免这种问题,推荐在定义关键页面时,按输出设计稿的思路:整理「信息架构」→定义「功能分区」,这样后续拓展性和前瞻性更高

    定义太粗,无法定义出明确的功能分区,担心缺乏实际指导意义: 同一区域有些页面展示操作,有些展示导航。从规范角度好像不应该,但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时,建议就不定义具体的“功能分区”,避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式,将该布局下可承载的内容均展示出来,既可以起到参考意义,又能供后续沿用达到统一的效果。

    第四步,加入案例:将刚刚定义的布局框架与功能分区,与实际案例完整结合,便于后续理解和沿用。

    ③ 通用流程

    目标:梳理整站所有流程,对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。

    “可复用的流程”是指:在多个场景下,不改变其原有业务逻辑的情况下能够“既插既用”。例如:登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中,不同的步骤亦可以打散,重新拼装成不同的流程,以适配具体的场景使用。

    下面就举一个具体的例子:注册流程。一般完整的注册流程如下,通过不同的入口触发后进入,通过一定步骤后注册成功。

    当业务有了进一步需求,需要通过插件快捷登录时,步骤便可以重新组合,再适配具体的场景。

    对于设计师要做的,就是识别具体的通用流程有哪些,并将其给「步骤化」串联起来。当有新的需求来的时候,判断能直接复用,还是需要重新组装,亦或是新增步骤。

    而这样拼装的思维,恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时,再以搭积木的方式进行拼装。

    而具体的搭建步骤也是由两个步骤组成:1.第一步,收集流程;2.第二步,抽象步骤。具体方式上面已提到,就不过多赘述。

    ④ 标准组件

    目标:将产品内使用过的组件整理成“标准组件”,统一定义规则,让后续设计和研发时能直接调取组件,提高设计和研发效率。

    其实行业中已经有很多通用组件,可以快速调用。但由于不同业务的复杂度不一样,也会生成自己独特的业务定制组件。同时,产品持续在迭代,也很难能抽出时间单独定义组件。故基于这个背景,结合“需求设计流程”和“组件整理流程”,有两种高效定义标准组件的方式。

    方式一:调用行业通用组件

    第一步,业务设计确定基本逻辑。

    第二步,挑选行业通用组件,增加业务规则。(一般开发在搭建产品初期时,便会选择一家行业组件进行使用,而组件也仅能在这家提供的组件中挑选)

    第三步,视觉根据全局视觉原则,设计新的样式。

    第四步,将交互规则、视觉样式合并,统一成标准组件。基础规则直接引用行业组件已定义的内容,场景规则按需补充。

    方式二:业务定制组件

    第一步,进行正常的业务设计。交互根据需求搭建原型,视觉设计具体样式。

    第二步,判断组件是否通用,是否可复用到其它场景。例如:分享对话框,不同的内容分享都能够用得到,像这种就是可抽象成标准组件的典型案例。

    第三步,定义标准组件规范。简单的组件展示具体样式即可,团队内设计师基本认知一致,无需重新学习。而复杂的组件为保证后续的正确复用,建议包括以下内容:

    1)更新日志:因为组件是变动最多的规范,需要明确具体的版本和改动点

    2)组件定义:简要介绍用途和使用规则,如对话框定义:必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

    3)组件结构:介绍组件构成、功能分区、分区定义,详细展示不同分区内具体信息和对应规则。

    4)使用场景:详细区分多种场景下不同的使用方式,明确给予使用指导

    5)设计方案:备选,如果比较复杂的组件且涉及到流程中的关键环节,建议可以考虑复制一个完整的设计方案嵌入其中,便于团队成员理解沿用。

    第四步,跟研发沟通,封装成标准组件。这一步是非常关键也是重要的一步,这将大大提高我们后续的组件复用率,降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序,上传「组件库」后能够按目录自动生成规范文档,同时将自动标注和切图,大大提高研发开发标准组件的效率。

    ⑤ 文案规范

    目标:将产品内各个场景内文案进行整理,帮助业务更准确表达意图,让设计师更好沿用,同时让用户感受到一致的产品风格。

    文案就像“产品对用户说的话”,不同的人说话方式可能并不一样,没有绝对的对错。但清晰明了的语言表述,让用户更容易理解;符合产品气质的语气,能拉近产品与用户的距离;统一的文案描述,又能让用户在整站一致的语境下体验产品。

    需要定义的内容,包括但不限于以下 3 个部分:

    语言: 语言是指我们通过什么样的规则来组合文字,让它形成一种惯用的表达方式。例如语句简洁明了,不过度修饰,避免重复描述,使用简洁清晰的语序,帮助用户快速理解;例如用词精准易懂,使用简单、易于用户理解的词汇,避免使用专业术语,或过于口语化的表述。单纯说规则可能太虚了,在实际定义规范时,还要如下图所示,加上实际案例示意避免误解。

    语气: 语气是可以体现产品气质和风格,定义时要结合全局原则内的设计价值观,明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时:

    俏皮的文案可能是:网络开小差,请稍等一下 而正经的文案可能是:网络异常,稍后重试。

    书写规则: 主要包括常用词汇的书写方式,例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意,例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的,也是接地气的部分。

    具体使用指南: 以上「语言」「语气」「书写规则」3 个部分,是构成全局文案的基础规范。如果有充足时间的团队,可以考虑再结合实际业务,分别定义不同场景和组件下具体的使用指南。如下图:

    最后再附上各个行业内定义文案规范例子,供大家参考:

    B 端产品文案指南: https://www.yuque.com/linyecx/dragon AntDesign 文案规范: https://ant.design/docs/spec/copywriting-cn Clarity Design 文案规范: https://design.teambition.com/doc/introduction 国家标点符号用法: http://www.moe.gov.cn/ewebeditor 四、如何「推进」交互规范 定义完交互规范,后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。

    1. 团队评审,达成一致

    规范的定义不是一个人的事情,而是一个团队事情,它将关系到每个后续每个人的设计产出。所以在制定规范期间,应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程,更是让团队达成一致、大家更深入了解如何使用规范的过程。

    注意,参与评审的人不止是设计师,当然也包括具体的业务开发,很多时候我们会得到新的思路和启发。

    2. 善用工具,沉淀规范

    规范搭建的过程中,有很多痛点:组件库需要多人参与维护和创建,容易造成冲突内容丢失;同时沉淀规范文档时,需要图片逐一复制、粘贴到文档内,更新时又要重复一遍这样的操作。而这些问题,使用 CoDesign 设计规范功能,就可以有效的解决提高效率。

    首先组件库支持多人同时维护,差量更新;其次组件库上传后,可以自动生成/更新规范文档,避免反复编写文档,整体提效;最后当组件库有新版本时,会自动提醒团队内其他成员进行更新,保障团队设计一致性。

    3. 运用规范,指导设计

    搭建规范的过程其实也是整体设计走查的过程,我们会发现有些设计可能有体验问题,或不符合规范。每当这个时候,我们就需要对这些设计进行标记。在规范定义完成之后,迭代排期优化线上的设计。

    而在实际设计使用过程中,可能又会发现规范无法满足的地方,此时又可以展开新一轮的提炼和总结,再反哺规范,形成正向循环促使设计和规范不断完善。

    五、写在最后 在前言的时候就有提到「交互规范」只是整体规范中的一部分,最终是需要与视觉合并成一份统一的设计规范,指导后续具体的设计。具体的合并方式,在定义的章节内已有提到,就不再赘述。

    最后,我一直认为好的设计规范是提高设计效率,引导设计方向,而不是因为设计规范而局限了具体业务的设计,如果这样,还不如不去定义。

    欢迎关注作者「腾讯CDC体验设计」的微信公众号:

  • 腾讯7000字干货!超详细的全局交互规范制定指南

    UI交互 2023-01-28
    更多设计规范的相关教程:案例实操!从零开始教你构建产品颜色规范前言 这一次的北农商银行的项目,是在企业版手机银行 App 上加入企业 OA 的功能。阅读文章 > 一、如何「理解」交互规范说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:产品设计:保障...

    更多 设计规范 的相关教程:

    案例实操!从零开始教你构建产品颜色规范 前言 这一次的北农商银行的项目,是在企业版手机银行 App 上加入企业 OA 的功能。

    阅读文章 >

    一、如何「理解」交互规范 说起设计规范,大家应该都不陌生,一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用:

    产品设计:保障产品内不同模块的设计一致性,同时提高不同 设计师 间的设计、协作效率

    研发开发:通过定义的标准规范,提高流程、组件的复用率,提高整体开发效率

    用户使用:让用户能够在产品全局感受到统一且完整的体验,降低使用成本和学习难度

    而一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成,在全局原则的指导下,侧重不同的维度和内容分别展开规范的定义,最后再合到一起形成一份完整的设计规范。

    从用户体验要素来看,视觉主要是在「表现层」「框架层」进行规范的统一,主要包括:形、色、字、构、质、动 六个层面。

    而交互角度相对抽象,主要针对于产品的「结构层」「框架层」入手,定义统一的交互规范,指导页面、流程搭建和组件使用规则。包括:全局原则、页面布局、通用流程、标准组件、文案规范。

    整体维度呈“从抽象到具体的总分关系”,不仅对产品的各个维度都有具体的交互指导,而且不仅能保证长期使用,避免重复返工;同时也便于囊括后续的迭代内容。而这些内容,就是我们通常定义的交互规范,也是交互参与定义设计规范的发力点。

    有了对于基本认识和搭建框架之后,我们来详细聊聊如何定义交互规范具体内容。

    二、不同阶段应该定义哪些交互规范? 产品有不同发展阶段,设计规范同样也有,不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多,保证投入产出比最大化;同时也要构建一个合理的规范迭代思路。

    产品探索初期:

    该阶段的产品核心目标是「验证产品或商业模型」,业务需求都是小步快跑、频繁迭代。产品处于从 0 到 1 的野蛮生长状态,存在着“先满足功能,再优化体验”的情况,导致该阶段的产品体验往往不太过关。

    搭建目的:通过定义原则,梳理关键页面和流程,搭建基本的规范框架。既让团队对产品有统一的设计价值观和认知判断;从页面到流程,又能对应设计参照标准;同时业务可以在规定的框架下发展,不仅让产品体验的根基牢固,而且不会限制功能设计自由。

    搭建范围:「全局原则」「页面布局」「通用流程」

    产品稳定发展期:

    该阶段的产品基本形态已稳定,也形成了初步的模型结构。后续迭代是在现有结构的基础上,进行增加或优化功能。虽然探索期定义了产品原则、布局和流程,但探索期产品的自由生长,会导致不少设计细节不一致,从而影响了产品整体的体验和效率。

    搭建目的:通过回溯整理过往设计,沉淀优化成完整的交互规范。再根据规范统一产品体验,进一步优化流程和效率, 让整个产品体验达到相对稳定的状态。

    搭建范围:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」

    三、如何「定义」交互规范 1. 定义交互规范的原则

    与行业通用的设计规范(如 TDesign、AntDesign)“大而全”“通用”的特质不同,一般团队内构建的设计规范都是源于某一个产品或业务,主要的特点是“专精”。专注于「业务」本身,主要是「团队内成员使用」,追求的是投入产出比最大化。

    基于此背景,当我们在定义「交互规范」时,有三点原则:

    原则一:保持规范的业务性。设计规范既要贴合业务场景归纳完整,同时又要避免凭空定义脱离实际。故我们定义时要代入业务规划,尽量富有前瞻性,这样定义的规范不仅能覆盖当前需要,同时后续也能更好地迭代。

    原则二:保持规范的专注性。有的放矢,明确内容优先级,避免盲目追求大而全和形式主义。对于优先级高(覆盖面广、复用率高)的关键内容重点描述;优先级低(逻辑简单、认知一致)的内容可简要描述,避免事无巨细降低效率。

    原则三:保持规范的生长性。设计规范不是一成不变,而是跟随业务发展不断迭代完善的,所以需要阶段性的回顾规范。遇到规范未能覆盖或无法指导设计的地方,及时修订同步团队,避免墨守成规,固步自封。

    最后,还有一点建议:在定义规范时,可以站在前人肩膀,适度参考行业设计规范,能复用用的直接参考,具有业务特性的再集合业务综合考虑,使整个规范制定效率更高,科学性、指导性更强。

    在找到自己当前所属的产品阶段、明确要建立哪些设计规范后,具体应该如何进行落地执行呢?建议从以下 4 个步骤入手。

    2. 第一步:定义规范分类

    如上文中提到,一个完整的交互规范分为:「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度,但每个维度具体含有哪些内容,都是不一样的。仍然需要根据实际业务需要去定义,这样才能尽量保证没有遗漏,也更好为下一环节评估工作量。

    通用的做法有两种:

    方式一:整理业务场景下不同的页面、流程等,并进行抽象合并。「全局原则」「页面框架」和「通用流程」具有强业务导向,可以采用此方式。

    以「页面布局」为例,就需要将关键页面按统一颗粒度收集(按层级或按场景等)。

    方式二:参考行业通用规范的定义,先罗列完整,再根据产品实际业务需要进行增删改。

    「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀,可以采用此方式,例如下图组件的梳理。

    最后可产出如下图的规范分类和具体内容。(可以列的不是很全,后续补充具体部分内容时持续维护这张表。)

    3. 第二步:确定分工排期

    有了具体内容作为依据,便可以根据此进行排期分工。

    分工原则:推荐按规范分类进行分工,一个大的分类由一人负责,保证专注性。同时团队交互最好都能参与,保证后续对规范更好的沿用。

    排期原则:「定义规范」和「输出需求」两者经常要并行处理,此时提高效率,控制投入产出比就很重要了,我们需要明确优先级,先做什么后做什么。有 3 个思路可以综合参考:

    并行的思路:在定义完「全局原则」后,剩下的页面、流程、组件、文案都可考虑并行定义,彼此之间没有明确的依赖项。 迭代的思路:近期有迭代的版本,如:即将改版的模块、反馈较多体验较差的模块,其中涉及到的页面框架、组件可优先定义。 复用的思路:某些典型页面、典型流程、典型组件涉及面广,许多需求的设计都将借鉴参考,亦可优先抽象定义。

    4. 第三步:统一撰写原则

    设计规范是由不同的设计师一起合作完成,所以我们尽量在一开始,就需要统一规范的撰写和展现形式。以此提高后续合并的效率,同时又能保证其阅读体验,让其它使用者能够更好遵循。对此,我们定义了几个关键原则:

    目录完整:高效检索,快速让使用者找到需要的内容。

    原则清晰:抽象的内容往往含有许多概念和原则,需要让使用者先理解再参考,才能保证后续使用正确、举一反三

    多图少字:没有人喜欢看字,图片更容易吸收

    搭配案例:让使用者更好的代入场景,理解和使用规范。

    5. 第四步:定义具体规范 ★

    前面铺垫了许多流程性的内容,就像我们日常输出设计需求一样,大家或多或少在工作中都有遇到过。接下来,将重点聊聊,我们具体的内容应该如何定义。依然分成 5 个环节一一讲解。

    ① 全局原则

    目标:明确影响整站各个模块、各个页面设计的原则和规范,指导我们后续各种规范的定义和设计。

    而全局原则也分两种,设计原则和业务原则两种。

    设计原则:每个完整的设计规范都需要包含的内容,如:设计价值观、设计准则。看似相对务虚的东西,实则影响后续整个设计方向。这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼。具体定义方式可参考:

    你为什么需要设计原则? https://zhuanlan.zhihu.com/p/246430795

    业务原则:源自实际业务本身产生的问题,行业内没有标准定义。需要具体问题具体分析,推导出具体目标,最后再统一制定规范解决业务问题。

    举一个实际的例子便于理解:全局 Z 轴定义

    明确问题: 整站层级高度没有统一定义,导致不同控件间相互遮挡,没有统一规则。需要定义全局 Z 轴规范,统一不同场景、页面、组件的高度。

    梳理借鉴: 统一梳理相关场景、页面、组件,明确需要定义的范围。再查找行业规范,有无参考借鉴。(如 Z 轴定义,可参考 Material Design)

    定义规范: 最后通过最具代表性的场景进行展示

    全局原则没有维度高低之分,例如可能全局涉及到的「右键菜单」也能被定义成全局原则。不必盲从行业交互规范内庞大且抽象的原则。只要能够实际解决你业务的需要,能够覆盖整站各个部分,都可以纳为全局原则。

    ② 页面框架

    目标:梳理整站所有关键页面,整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考。

    页面框架的搭建一般由四个步骤组成:

    第一步,收集页面:根据早期定义的规范分类,收集展示所有相同层级的页面。这些在定义规范分类时,应该已收集完成。

    第二步,框架布局:提取共性,搭建框架和布局,明确页面大的区域划分和结构。(TDesign 布局详细指南)

    第三步,功能分区:基于框架布局,细化区域内具体的业务功能属性,如:导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容,同时也是最难定义的。主要原因如下:

    定义太细,担心缺乏前瞻性限制后续设计: 定义越细灵活度就低,后续改动和限制性就越高。为避免这种问题,推荐在定义关键页面时,按输出设计稿的思路:整理「信息架构」→定义「功能分区」,这样后续拓展性和前瞻性更高

    定义太粗,无法定义出明确的功能分区,担心缺乏实际指导意义: 同一区域有些页面展示操作,有些展示导航。从规范角度好像不应该,但实际套在各个业务内却又合理。当遇到这种无法达成一致的情况时,建议就不定义具体的“功能分区”,避免因为盲目追求统一而限制实际设计。而可以采用“穷举举例”的方式,将该布局下可承载的内容均展示出来,既可以起到参考意义,又能供后续沿用达到统一的效果。

    第四步,加入案例:将刚刚定义的布局框架与功能分区,与实际案例完整结合,便于后续理解和沿用。

    ③ 通用流程

    目标:梳理整站所有流程,对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用。

    “可复用的流程”是指:在多个场景下,不改变其原有业务逻辑的情况下能够“既插既用”。例如:登录注册流程、扫码关注流程、分享流程等等。往往一个通用流程中,不同的步骤亦可以打散,重新拼装成不同的流程,以适配具体的场景使用。

    下面就举一个具体的例子:注册流程。一般完整的注册流程如下,通过不同的入口触发后进入,通过一定步骤后注册成功。

    当业务有了进一步需求,需要通过插件快捷登录时,步骤便可以重新组合,再适配具体的场景。

    对于设计师要做的,就是识别具体的通用流程有哪些,并将其给「步骤化」串联起来。当有新的需求来的时候,判断能直接复用,还是需要重新组装,亦或是新增步骤。

    而这样拼装的思维,恰好对应了研发搭建流程时的思路。通用流程对于他们就是将不同的步骤进行组合起来。当遇到不同场景时,再以搭积木的方式进行拼装。

    而具体的搭建步骤也是由两个步骤组成:1.第一步,收集流程;2.第二步,抽象步骤。具体方式上面已提到,就不过多赘述。

    ④ 标准组件

    目标:将产品内使用过的组件整理成“标准组件”,统一定义规则,让后续设计和研发时能直接调取组件,提高设计和研发效率。

    其实行业中已经有很多通用组件,可以快速调用。但由于不同业务的复杂度不一样,也会生成自己独特的业务定制组件。同时,产品持续在迭代,也很难能抽出时间单独定义组件。故基于这个背景,结合“需求设计流程”和“组件整理流程”,有两种高效定义标准组件的方式。

    方式一:调用行业通用组件

    第一步,业务设计确定基本逻辑。

    第二步,挑选行业通用组件,增加业务规则。(一般开发在搭建产品初期时,便会选择一家行业组件进行使用,而组件也仅能在这家提供的组件中挑选)

    第三步,视觉根据全局视觉原则,设计新的样式。

    第四步,将交互规则、视觉样式合并,统一成标准组件。基础规则直接引用行业组件已定义的内容,场景规则按需补充。

    方式二:业务定制组件

    第一步,进行正常的业务设计。交互根据需求搭建原型,视觉设计具体样式。

    第二步,判断组件是否通用,是否可复用到其它场景。例如:分享对话框,不同的内容分享都能够用得到,像这种就是可抽象成标准组件的典型案例。

    第三步,定义标准组件规范。简单的组件展示具体样式即可,团队内设计师基本认知一致,无需重新学习。而复杂的组件为保证后续的正确复用,建议包括以下内容:

    1)更新日志:因为组件是变动最多的规范,需要明确具体的版本和改动点

    2)组件定义:简要介绍用途和使用规则,如对话框定义:必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。

    3)组件结构:介绍组件构成、功能分区、分区定义,详细展示不同分区内具体信息和对应规则。

    4)使用场景:详细区分多种场景下不同的使用方式,明确给予使用指导

    5)设计方案:备选,如果比较复杂的组件且涉及到流程中的关键环节,建议可以考虑复制一个完整的设计方案嵌入其中,便于团队成员理解沿用。

    第四步,跟研发沟通,封装成标准组件。这一步是非常关键也是重要的一步,这将大大提高我们后续的组件复用率,降低重复性走查的耗时。推荐使用 CoDesign-设计规范功能点击体验 CoDesign 小程序,上传「组件库」后能够按目录自动生成规范文档,同时将自动标注和切图,大大提高研发开发标准组件的效率。

    ⑤ 文案规范

    目标:将产品内各个场景内文案进行整理,帮助业务更准确表达意图,让设计师更好沿用,同时让用户感受到一致的产品风格。

    文案就像“产品对用户说的话”,不同的人说话方式可能并不一样,没有绝对的对错。但清晰明了的语言表述,让用户更容易理解;符合产品气质的语气,能拉近产品与用户的距离;统一的文案描述,又能让用户在整站一致的语境下体验产品。

    需要定义的内容,包括但不限于以下 3 个部分:

    语言: 语言是指我们通过什么样的规则来组合文字,让它形成一种惯用的表达方式。例如语句简洁明了,不过度修饰,避免重复描述,使用简洁清晰的语序,帮助用户快速理解;例如用词精准易懂,使用简单、易于用户理解的词汇,避免使用专业术语,或过于口语化的表述。单纯说规则可能太虚了,在实际定义规范时,还要如下图所示,加上实际案例示意避免误解。

    语气: 语气是可以体现产品气质和风格,定义时要结合全局原则内的设计价值观,明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时:

    俏皮的文案可能是:网络开小差,请稍等一下 而正经的文案可能是:网络异常,稍后重试。

    书写规则: 主要包括常用词汇的书写方式,例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意,例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的,也是接地气的部分。

    具体使用指南: 以上「语言」「语气」「书写规则」3 个部分,是构成全局文案的基础规范。如果有充足时间的团队,可以考虑再结合实际业务,分别定义不同场景和组件下具体的使用指南。如下图:

    最后再附上各个行业内定义文案规范例子,供大家参考:

    B 端产品文案指南: https://www.yuque.com/linyecx/dragon AntDesign 文案规范: https://ant.design/docs/spec/copywriting-cn Clarity Design 文案规范: https://design.teambition.com/doc/introduction 国家标点符号用法: http://www.moe.gov.cn/ewebeditor 四、如何「推进」交互规范 定义完交互规范,后续将考虑如何将其顺利的推进落地。本文罗列几个推进时重点需要注意的事项。

    1. 团队评审,达成一致

    规范的定义不是一个人的事情,而是一个团队事情,它将关系到每个后续每个人的设计产出。所以在制定规范期间,应该定期在团队中进行设计评审。这不仅是评审设计好坏的过程,更是让团队达成一致、大家更深入了解如何使用规范的过程。

    注意,参与评审的人不止是设计师,当然也包括具体的业务开发,很多时候我们会得到新的思路和启发。

    2. 善用工具,沉淀规范

    规范搭建的过程中,有很多痛点:组件库需要多人参与维护和创建,容易造成冲突内容丢失;同时沉淀规范文档时,需要图片逐一复制、粘贴到文档内,更新时又要重复一遍这样的操作。而这些问题,使用 CoDesign 设计规范功能,就可以有效的解决提高效率。

    首先组件库支持多人同时维护,差量更新;其次组件库上传后,可以自动生成/更新规范文档,避免反复编写文档,整体提效;最后当组件库有新版本时,会自动提醒团队内其他成员进行更新,保障团队设计一致性。

    3. 运用规范,指导设计

    搭建规范的过程其实也是整体设计走查的过程,我们会发现有些设计可能有体验问题,或不符合规范。每当这个时候,我们就需要对这些设计进行标记。在规范定义完成之后,迭代排期优化线上的设计。

    而在实际设计使用过程中,可能又会发现规范无法满足的地方,此时又可以展开新一轮的提炼和总结,再反哺规范,形成正向循环促使设计和规范不断完善。

    五、写在最后 在前言的时候就有提到「交互规范」只是整体规范中的一部分,最终是需要与视觉合并成一份统一的设计规范,指导后续具体的设计。具体的合并方式,在定义的章节内已有提到,就不再赘述。

    最后,我一直认为好的设计规范是提高设计效率,引导设计方向,而不是因为设计规范而局限了具体业务的设计,如果这样,还不如不去定义。

    欢迎关注作者「腾讯CDC体验设计」的微信公众号:

  • 万字拆解!12306产品设计全方位深度解析

    UI交互 2023-01-28
    有人说它是全世界最牛逼的 APP,因为它的算法难度和春运期间访问量几乎是全球之最;但有人说它是全世界最垃圾的 APP,因为在使用这个产品的过程中,遇见很多奇葩、愤怒的体验。关于这两种说法,众说纷纭,本期设计大侦探,就来全面拆解铁路 12306APP,一起来看看这个产品到底是如何设计的,用户体验如何。往期拆解:上线...

    有人说它是全世界最牛逼的 APP,因为它的算法难度和春运期间访问量几乎是全球之最;但有人说它是全世界最垃圾的 APP,因为在使用这个产品的过程中,遇见很多奇葩、愤怒的体验。关于这两种说法,众说纷纭,本期设计大侦探,就来全面拆解铁路 12306 APP,一起来看看这个产品到底是如何设计的,用户体验如何。

    往期拆解:

    上线即爆火!3600字完整拆解微信键盘的产品设计 微信键盘发布啦!

    阅读文章 >

    一、导读 1. 内容结构

    全文 9700 字,分为六个部分,分别是导读、产品画像、出行服务、内容服务、思考总结和后记,你可以通过下面的思维导图对本文内容快速的了解。

    2. 适合人群

    第一类,UI/交互 设计师 ,可以跳出执行层,全方位体验 12306 的产品设计,多维度去思考和总结如何规避类似的陷阱;第二类,产品经理/运营,通过全面的产品设计拆解、体验反馈,获取产品设计参考;第三类,旅游及出行相关行业从业者,通过对 12306 的全面拆解,获取竞品设计参考。

    3. 分析模型

    第一个,增长模型。由戴夫·麦克卢尔提出,包含用户获取、用户激活、用户留存、获取收入、用户推荐,分别对应用户生命周期中的 5 个重要环节,主要用于拆分和分析产品的功能价值。

    第二个,尼尔森十大可用性原则。尼尔森十大可用性原则是界面设计中最基础、最重要的设计原则,任何产品的设计,都可以通过这十个原则进行指导设计。尼尔森十大原则包括即系统可见性原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫原则、容错原则、人性化帮助原则,通过这十大原则,可以对 12306 的产品设计体验进行全面的校验和侦查。

    用超多案例,帮你掌握尼尔森十大可用性原则 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。

    阅读文章 >

    第三个,设计心理学。包括常见的格式塔原理、费茨定律、巴甫洛夫反应、7±2 效应、席克定律等常见设计基础理论。

    万字干货!15个著名的设计心理学原理和应用深度解析! “除非有更好的选择,否则就遵从标准” 你是否有在听别人说某某原理法则时一脸懵 B 的时候?

    阅读文章 >

    二、产品画像 1. 产品介绍

    铁路 12306 是中国铁路客户服务中心推出的官方手机购票应用软件,主要为全国各地的乘客提供火车票预定、机票预订、汽车票预订等购票业务,首个版本发布于 2012 年 10 月 16 日,根据易观千帆数据,截止到 2022 年 10 月,12306 月活跃用户人数 6,923.78 万。

    2. 用户画像

    铁路 12306 的用户群体主要以男性用户居多,占比 65.04%,女性占比 34.96%;从年龄分布看,以 24-30 岁的用户群体最多,占比 36.52%,31 到 35 岁的用户占比 24.23%,36 到 40 岁占比 20.27%,41 岁以及以上占比 10.30%;从用户消费能力看,中高消费者占比 33.48%,中等消费者占比 30.43%,高消费者占比 14.70%;从地域分布看,新一线城市用户最多,占比 27.93%,一线城市占比 19.93%,二线城市占比 19.00%,其中广州用户最多,其次为深圳、杭州和北京。

    3. 信息结构

    铁路 12306 的一级菜单包含首页、出行服务、订单、铁路会员和用户中心。「首页」主要为用户提供火车票、飞机票和汽车票的购买,其次还提供各种快捷功能入口和酒店预订等服务;「出行服务」主要为用户提供约车、酒店、订单等服务;「订单」是可查询和管理在 12306 的各种订单;「铁路会员」是 12306 的会员版块,提供车票兑换、会员活动等内容;用户中心提供个人资料管理、出行向导和常用功能等内容。

    4. 重要迭代记录

    根据七麦数据统计,铁路 12306 的 APP 首个版本发布于 2012 年 10 月 16 日,截止到 2023 年 1 月 12 日,APP 版本已经更新至 V5.6.3 版本,近一年版本更新次数为 5 次。

    版本重要迭代记录

    2021 年 9 月,发布 V5.4.0 版本,新增无障碍功能、老人及障碍人士购票更便捷,即爱心版;

    5. 产品生命周期

    作为中国铁路客户服务中心的官方购票平台,铁路 12306 距离首个版本发布时间已经过去 10 年。从易观千帆数据观察,截止到 2022 年 10 月,12306 月活跃用户人数 6,923.78 万,日均活跃人数 811.65 万。由于是国有企业运营,而且是垄断业务,12306 没有任何商业变现的压力,从产品发布时间和活跃用户人数看,目前处于产品生命周期的成熟期。

    6. 竞争图谱

    截止到 2022 年 10 月,易观千帆数据显示,铁路 12306APP 在苹果的 APP Store 应用市场 APP 总排名 71 位,旅游类排名第一,汽车火车船票预定类第一,月活跃用户人数几乎是其他 APP 的总和。

    三、出行服务 作为 12306 最核心、最重要以及实现商业变现的服务,出行服务主要为用户提供火车票、飞机票的销售,其次还链接了众多第三方合作伙伴,为用户在出行的各种场景提供了便捷的服务。

    1. 票务 「票务」是 12306 最核心的服务,主要为用户提供火车票、飞机票和汽车票的查询以及销售,其次 12306 还对三种产品进行了组合,推出了空铁联运、铁水联运这样的服务。

    ① 火车票

    「火车票」就是为用户提供火车和动车的票务销售,用户输入出发站、终点站和时间以后,就可以进行查询,其次还支持对已购买的车票进行变更到站、改签和退票。

    1)售票

    售票页

    当用户输入目标站点以后,就进入了售票页。在这个页面,可以看到当天列车的所有车次,包括直达、中转、出发时间和剩余票数。在底部,有一个菜单栏,包含了筛选、耗时最短、发时最早、显示票价和候补下单五个功能,这主要是帮助用户快速寻找符合自己需求的车次,比如出发车站、出发时间等。

    体验陷阱

    这个页面的操作体验不太友好,底部的菜单栏不仅没有实现全屏手机设备的兼容,而且几乎和背景的元素贴合在一起,不够醒目,如果用户不注意,根本无法发现底部竟然还有一排菜单栏帮助用户进行高效的检索。

    订单页

    在用户选择好车次以后,就进入订单页。用户需要选择座位的系别,包括硬座、软座、二等座、一等座、特等座等。

    用户需要选择乘车人。添加乘车人的步骤比较简单,在输入用户的真实姓名、身份证号码和手机号码以后,即可添加成功。首次使用12306的用户需要进行身份核验,用户需要通过验证系统发送的核验信息才能添加成功。

    细节侦查

    「姓名」这里有一个非常友好的设计体验,那就是针对无法输入的生僻字、名字超过 30 个字符,以及外籍用户的极端情况都给出了详细的指导,针对用户可能出现的极端的情况给与及时的提示,这就是尼尔森十大原则中的容错原则,帮助用户从错误中恢复,将损失降到最低。

    在「选择乘车人」的右边,还有一个「选择受让人」的功能。这个功能有很高的学习成本,会让用户摸不着头脑。我也是通过百度查询才了解到这是一个用户权益功能,它主要是指用户可以把平时购买火车票获得的积分转让给指定的用户,积分又可以抵消火车票款,从而实现抵扣。

    选择好乘车人以后,用户可以进行选座,就进入了提交订单、支付费用的环节。

    支付页

    订单生成后,用户需要在付款限定时间内支付火车票费用,否则订单将会取消。其次在支付页,也向用户推荐相关的保险服务,比如铁路乘意险,又分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险。

    「购买返程」其实一个非常便捷的功能,但12306设计的层级太深了,而且没有加上一键返回首页或订单页的按钮,用户如果想退回到订单页或首页,需要不断点击返回,操作路径实在太长。

    体验陷阱

    底部菜单设计了三个按钮,违反了费茨定律的设计原则。用户在这个支付页的主要目标是支付费用,但是菜单栏的三个按钮权重设计得一样高,取消订单和购买返程这两个按钮,严重干扰了用户的选择,降低了操作效率。

    支付成功页

    当用户支付成功以后,「支付成功页」为用户提供餐饮预订、出行保险、酒店入住、网络约车等服务,非常便捷。不过内容的规划比较乱,体验稍差。

    候补下单

    「候补下单」是一个非常方便的功能,这个功能主要解决在当前车次没票的情况帮助乘客自动排队,如果有其他乘客退票,就自动抢票,非常贴心。这个功能也被誉为黄牛的终结者,帮助乘客自主排队。

    2)变更到站

    「变更到站」是指乘客可以更改目标站点,进入订单详情页后,点击「变更到站」按钮,点击底部的「立即变更到站」就可进入变更页面。在变更页面,乘客可以重新输入目标站点,然后再次进入车票售票页,选中需要变更的车次以后,进入订单页提交订单,变更成功。需要注意的是,变更到站只能办理一次。

    体验陷阱

    当用户点击「变更到站」的时候,如果不注意观察页面,根本感受不出原来需要在底部菜单栏进行操作,会让乘客陷入焦躁,不知道下一步从哪里进入。其次在变更到站页面,下半部分设计了很多快捷入口,比如车站大屏、约车、餐饮特产等,把用户的注意力分散了。这两个设计都严重了违反了费茨定律和席克定律,大大降低了用户的操作效率。

    3)改签

    「改签」是指用户可以更改出行的时间,改签的流程和「变更到站」相似,进入售票页后,选中需要变更的车次,进入订单页提交订单,改签成功。需要注意的是,车票改签只能办理一次,开车前 48 小时以上,退票费为票价 5%,24 小时至 48 小时之间为 10%,不足 24 小时为 20%。退票费最少 2 元起步。

    4)退票

    「退票」是指用户可以退掉已经购买的车票,退票流程比较简单,点击退票后,进入退票确认页,点击确认退票成功。需要注意是,距离开车前 8 天以上的不收退票费,其他的时段将会根据列车开车前的时间收取手续费,最高 20%。

    迭代建议

    在用户点击退票的时候,应该出现弹窗,再次提醒用户是否确认退票,这样能避免用户误操作。这就是尼尔森十大原则的容错原则,帮助用户从错误中恢复,将损失降到最低。

    5)购票后

    当乘客购买车票后,12306 的首页会加入一个行程的版块,向用户展示最近的行程详情,其次一级菜单栏「出行服务」内容也会同步更新。这个设计非常友好,直观醒目地告诉乘客最近的行程信息,通过外部触发避免乘客忘记行程。

    行程页

    这个页面从上至下包含四个部分,头部是乘客详细的车次信息,比如出发时间、经停站、天气等;中间是车票信息,包含检票口、座位号、车次和乘车二维码等信息;接下来按乘客出行前服务、车站/列车服务和到达服务三个场景为乘客推荐其他服务,比如餐饮预定、酒店预定等服务;底部是关于出发站、到达站的天气预报信息和优惠服务等信息。

    细节侦查

    行程页把乘客的出行拆分为 3 个场景,出行前服务(提供重点客户预约、我要选酒店、我要去车站、我要订餐饮和禁带物品规定)、车站/列车服务(提供临时身份证证明、遗失物品查找、我要订餐饮和站内导航)和到达服务(遗失物品查找、我要订酒店、接站约车、旅游景点预定、投诉建议和站内导航),这就是以场景为中心的设计——将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成什么任务”。

    ② 飞机票

    「飞机票」就是为用户提供飞机的票务销售,用户需要输入出发站、终点站和出发时间,如果携带孩子或者婴儿,还需要单独勾选。飞机票同样支持改签和退票。

    1)售票页

    售票页的内容非常简单,在头部,用户可以左右滑动选择时间,页面内容以 Feed 流向用户展示详细的航班信息,其次还为用户提供了其他出行方案参考。底部设计了一个菜单栏,用户可以进行筛选设置,还可以根据价格高低和出发时间排序。

    2)选择舱位

    选中航班班次以后,进入到「选择舱位页」,在这个页面可以查看到航班的详细信息,比如航空公司、起飞时间、值机柜台等。用户需要选择舱位等级,比如经济舱、商务舱和头等舱,选中后,即可进入预订流程。

    拓展阅读

    为什么同一架飞机同一个经济舱飞机票价格不一样?这是因为一个飞机的不同舱位实际上是不同的产品,所以座位有不同的等级,故而价格有了出入。其次他们主要的区别包括但不限于退票改签的灵活程度、出票期限和目的地停留期限等等。

    3)订单页

    在订单页,可以查看到订单的详细信息,包括收费说明、退改说明等,在用户添加乘客以后,就可以提交订单。这里需要注意一下,如果乘客携带孩子或婴儿,需要添加儿童出行人。

    体验陷阱

    当乘客勾选了「携带儿童或婴儿」的选项以后,在订单页准备支付的时候,系统提示乘客需要返回添加儿童出行人信息。但却并没有告诉乘客如何添加,或直接给出对应的功能跳转链接,这让用户点击「返回添加」后却找不到功能入口。这就违反了尼尔森十大原则的防错原则,不仅在用户犯错之前没有给出提示,犯错了还不给与指导,真的非常糟糕。

    ③ 汽车票

    「汽车票」为用户提供客车的票务销售,用户输入出发站、终点站和时间以后,就可进入售票页。汽车票的订单流程非常简单,在选中客车车次以后,添加乘客支付费用后,订单即可生成。

    体验陷阱

    用户在选择「达到地」搜索框输入地名时候,应该提供模糊搜索,比如输入湖南的地名,应该为用户提示相关联的车站。

    ④ 空铁联运

    空铁联运,顾名思义就是把飞机和高铁这两个产品组合在一起销售,支持用户一站式购买“飞机+高铁”的联运行程,只需一次购票、一次支付。这个功能的使用场景主要是针对出发地和目的地没有直飞的航班情况下,为用户提供飞机+高铁的转运方案。这个功能对于乘客来说,支持一站式购买“飞机+高铁”车票,可以节省购票时间,非常友好。

    ⑤ 铁水联运

    和空铁联运一样,这也是一个组合产品的销售,支持用户一站式购买“高铁+水运”的联运行程。使用场景、功能价值以及操作流程和空铁联运一样,我们就不必重复。

    ⑥ 雪具快运

    12306 还推出了一个雪具快运的服务,为广大旅客提供多种个性化雪具寄送产品服务,还支持随车办理或上门办理寄送服务,目的是为用户打造滑雪的新体验。「雪具快运」的操作流程也比较简单,采用预约制,选中服务后,填写用户详细信息,支付成功后,订单生成。

    ⑦ 小结

    作为 12306 最重要、最核心、最复杂的功能,从这个版块的内容拆解和实操体验来看,可以看出 12306 确实已经解决被誉为全世界最复杂的抢票算法逻辑(笔者通过实操测试,几乎都能买到票),特别是在春运这种会出现超过上亿用户抢票场景,真可谓非常不容易。不过从用户体验来看,非常一般,甚至有很多不合理的设计。

    2. 出行 出行是 12360 结合了乘客在出行的场景中潜在产生的需求设计的服务,有结合车站商家的在线点餐,有结合当地地域特色的旅游服务,还有约车、保险、酒店等服务。这些服务,多数由第三方合作方提供。

    ① 餐厅特产

    「餐厅特产」是一个为乘客提供在线点餐的服务,在乘客输入列车车次以后,就可以进行点餐,支持外卖配送至列车和到店自取两种形式。这个功能设计得很友好,不仅解决乘客在乘车前的就餐问题,为车站的商家引流,还可以增加平台的变现方式。

    ② 铁路游

    「铁路游」是 12306 结合旅游出行的场景,为乘客推出的一项旅游服务,包含旅游专列、跟团游、周末游和自由行等。这个场景的链接其实非常好,但是版块目前设计得比较简单,内容也比较少。

    ③ 约车

    「约车」是为乘客提供接送站、接送机、打车和租车的服务。这是一个强刚需的需求,用户在出行的前后都有用车服务。为乘客提供约车服务,不仅能增加变现方式,还能方便乘客出行。通过实操体验,约车主要由第三方合作方提供服务,比如曹操出行、T3 出行等公司,为乘客提供出租车、品质专车和商务车等车型。

    ④ 保险

    保险分为乘意险和出行保险。铁路乘意险分为平安险、行运险和顺意险,主要为乘客提供意外伤害疾病身故等保险,在乘客购买铁路的订单页就会向乘客推荐,乘意险价格低,保障项目包含意外身故、伤残、医疗费用、住院津贴等。出行保险由第三方公司中国太平洋保险提供,主要为乘客提供出行安心保、空铁联运险和旅程预定取消险。

    ⑤  酒店

    酒店这个版块的内容相对夯实,不仅有新客大礼包这样的用户权益,还有商旅专区、今夜甩卖、高端酒店这样的内容。甚至还设计了专门的酒店会员 VIP,包含普通会员、银卡会员、金卡会员、白金卡会员和黑金卡会员,相对其他版块而言,这个版块花了比较多的心思。

    ⑥ 铁路商城

    铁路商城是 12360 以乡村振兴·帮扶推介为主题打造的一个商城,包含了帮扶专区、优选好物、兑换专区、今日特卖等内容,其次还支持企业集采,批量购买。

    ⑦ 小结

    从这个版块,可以看出 12360 其实结合了用户吃穿住行的刚需场景设计了对应的服务,有自主运营也有完全依靠第三方提供。不过整体的用户体验比较差,事实上可以参考像顺丰速运、智联招聘这些 APP,通过内置小程序的形式来设计,完全可以把这些版块让第三方单独设计和维护,同时还能为用户带来更好的体验。

    3. 会员 铁路畅行会员是中国铁路统一对外会员服务品牌,开通畅行会员不需要花钱,畅行会员主要是用于会员用户积累乘车积分、用积分兑换车票等,主要包含积分权益,兑换车票、无票候补和会员活动四大会员权益。这个页面设计得比较简陋,也没有太多价值的内容,可以看出 12306 在用户运营方面比较欠缺。

    4. 订单 12306 的订单包含了火车票订单、餐饮订单、保险订单、酒店订单、空铁联运订单、计次定期票订单、约车订单、出站引导服务订单、铁路商城订单、汽车票订单、旅游订单和铁水联运订单多达 12 种订单,从这些订单类型可以看出 12306 的服务特别多。

    体验陷阱

    这个设计实在太糟糕,严重违反了 7±2 效应。琳琅满目,花枝招展,让用户在这个页面几乎迷失。更糟糕的是,当你有一个非常重要的待支付订单,这个页面竟然没有角标提醒,最终你会因为这个糟糕的设计打乱自己的行程计划。

    四、内容服务 内容服务是帮助产品实现用户留存和运营的版块,不过从 12306 的内容设计来看,整个产品的运营手段比较少,所以我把 12306 现有设计的功能拆分为便捷功能和向导功能。

    1. 便捷功能 以下这七个功能,对用户而言,是非常便捷、友好的功能,可以帮助用户在出行的旅途中获取很多帮助。

    ① 车站大屏

    「车站大屏」是一个非常贴心的功能,通过这个功能,可以为用户提供车站的实时列车信息,非常方便。大屏详情页可以拆分为三块内容,左上角可以切换全国各地的火车站,头部还有搜索框,为用户提供车次的查询,主体内容是当前车站向西的车次信息,包含发车时间、候车室、检票口和候车状态等。

    1)车次详情页

    进入列车的「车次详情页」,可以查看当前车次的完整信息,比如检票状态、候车室、检票口和全程停靠站、停留信息。在这个页面,还提供了「关注列车」的功能(关注后并无关注数据,显得很鸡肋),以及直接预订当前车次的入口。

    2)车站详情页

    「车站详情页」就像一个站点的主页,为用户提供完整的车站信息查询。这个页面可以拆分为四块,头部可以切换其他站点,并提供当前车站的天气情况以及车站基础信息。金刚区位 8 个功能入口,包含车站车次、站内导航、重点旅游、餐饮服务、周边酒店等。中间是当前车站的起售时间和换乘时间,底部是车站附近周边的酒店精选。

    迭代建议

    这个页面把车站当做一个主体,聚合了一个车站完整的功能,其实挺有创意,但页面隐藏得很深,如果不去拆解,几乎很难发现,很是可惜。我认为完全可以提高权重,升级为一级栏目,代替会员,或者和出行栏目进行整合升级。

    ② 站内导航

    「站内导航」提供目标车站的 LBS 导航,对于乘客来说,到达一个陌生的站点,需要清晰的指引,这是一个非常便捷、温馨的功能,能帮乘客解决很多问题。不过这里有一个莫名其妙的设计,那就是进入这个功能之前,系统提示请摇“8”字校准手机,事实上这里是一个加载动画,但是画面和内容却误导了用户,我甚至每次进入都傻乎乎的摇动手机。

    ③ 临时身份证

    临时身份证是一个非常重要的功能,12306 现在支持 APP 在线申请,极大方便了乘客的出行。申请流程也比较简单,填写个人信息,验证审核通过后,就可以生成电子证照使用。每个人每个月有 3 次申请临时乘车身份证机会。

    ④ 遗失物品

    这是一个非常贴心的功能,如果你在乘车的过程中不小心丢失物品,可以通过这个功能登记,输入你的详细信息就能登记成功。

    ⑤ 重点旅客

    这也是一个非常贴心的功能,主要为老年人、残疾人服务,通过填入你的信息,列车会根据你的情况提供优先进站、协助乘降等服务。

    ⑥ 爱心版

    爱心版就是长辈版,专门为中老年用户设计的版本,在用户中心切换后就可进入爱心版。整个版本设计得非常简洁,操作步骤也比较简单,对中老年用户比较友好。

    ⑦ 英文版

    英文版在用户中心的设置点击语言即可切换,整体的版本设计得直接简洁,用户体验不错。

    ⑧ 小结

    从这个版块可以看出,一个产品如果以用户为中心去设计,是可以为用户带来很大的便捷和愉悦体验。比如像临时身份证这样的功能,过往我们只能提前出发去车站排队办理,但如今 12306 已经把这样的痛点解决,为用户节省了大量的时间。

    2. 向导功能 以下 8 个功能,虽然属于出行向导,不过体验下来,感觉用户体验比较差,很多功能完全无法弄懂它的设计目的是什么,显得非常鸡肋。

    ① 快捷退票

    「快捷退票」这个功能的设计,让人摸不着头脑。从操作流程看,首先需要输入用户的详细信息,包括姓名、身份证号码和手机,其次需要进行人脸核验,到了第三步还需要选择车票的日期车次,在最后的退票操作页面,用户点击退款后,没有和用户再次确认就直接退票。整个流程体验下来,非常糟糕。

    体验陷阱

    这个功能和订单页的退票感受不出来有何区别?如果用户要退款,不如直接去订单页进行退票,操作步骤简单,一目了然。其次不支持自动导入用户的购票信息实在太不方便,需要通过选择车票购买日期和车次,这个设计实在让人生气和愤怒(我在体验的过程中到了第三步只能退回到订单页把购票日期和车次截图下来,又再次重复前面两个步骤才到这个步骤)。

    ② 联系方式

    这也是一个看不懂的功能,进入页面后,需要用户输入乘客的详细信息,但是这个乘客信息和用户在购买车票时候需要添加到乘客信息有什么不同?更糟糕的是,当你把自己的电话号码、身份证信息填入后,系统会显示核验成功,然而当你再一次进入,页面内容还是和之前并无区别,你不知道自己是不是还要重新输一次?

    ③ 时刻表

    「时刻表」主要为乘客提供查询列班车次的出发时间和到站信息,但这个功能「车站大屏」几乎已经包含了,这个功能显得意义不大。

    ④ 查票价

    这个功能非常鸡肋,因为在火车票的售票详情页就可以清晰直观地查询到列车票价信息,相反在这个页面,根本无法看到价格,因为价格的字体大小只有 20px,乘客几乎很难注意到。

    ⑤ 查代售点

    这个功能主要为用户提供全国各地火车票代售点的查询,不过在互联网技术发展到今天,火车票代售点越来越少了。从 12306 采集的信息来看,部分代售点缺少电话等关键信息,对用户来说,比较鸡肋。

    ⑥ 起售时间

    这个功能为用户提供各车站每日的起售时间,属于一个低频功能,可以解决乘客某些极端场景的需求。不过在我体验下来,比如通过此功能查询 1 月 29 日的车票,显示北京站起售时间为 10:00,但是在火车售票版块,我也可以直接购买 1 月 29 日的车票,这让我比较疑惑这个功能的价值在哪里。

    ⑦ 正晚点

    「正晚点」同样是一个鸡肋功能,而且还需要输入准确的车次才能进行查询,车站大屏已经完美可以取代这个功能。

    ⑧ 列车状态

    「列车状态」比正晚点都还鸡肋,让人愤怒,因为你需要输入正确的出发地、到达地和出发时间,对了,还有正确的车次才能进行查询,这样的操作成本比下载 12360APP 都还麻烦。

    ⑨ 小结

    从这个部分的内容拆解和操作体验来看,12360 的产品设计得不够细致和贴心,很多功能就像是硬生生塞进去一样,滥竽充数。其次从他们的产品迭代记录次数可以看出,近 1 年更新时间只有 5 次,也许每一次都是在做加法,没有想过做减法,所以导致这部分的功能显得鸡肋而且有很大缺陷。

    五、思考总结 通过对铁路 12306 的全面拆解,接下来我将从内容层、功能层、体验层和视觉层进行总结。

    1. 内容层

    12306 整个产品的内容设计,用一句话总结,可以归纳为——心有余力而不足。可以看到12306围绕乘客购票、出行的潜在需求场景都设计了对应的服务,比如酒店、约车、点餐、商城等,甚至还有空铁联运、铁水联运这种多场景的组合售票方式,不过在实际的版块内容打造中,则显得比较空洞,体验一般。这个产品,可以说几乎没有创新点,这主要也是由于它是由国有企业设计运营,背景极其复杂,设计目标也飘忽不定。

    2. 功能层

    在 2015 年之前,铁路 12360 承担了被誉为历史上人口迁移最大的春运的抢票工作,那时候一票难求,春运去 12360 就像是一场噩梦。不过在经过多年的升级和优化以后,目前 12360 的购票效率非常高,经过笔者多次的测试和调研,目前通过 12360 购票已经不再是难事。而且还设计了候补抢票这样的功能,帮助用户解决买票痛点,可谓非常贴心、友好。

    3. 体验层

    铁路 12306 的用户体验,非常一般,我在这次的 产品拆解 中至少侦查出了 20 条体验陷阱,这些陷阱都会给用户带来极其糟糕和愤怒的体验。比如让我像个傻瓜摇动手机的站内导航载入页,这完全就是把用户当成傻子一样看待,其次还有一堆数不清的鸡肋功能,对用户的操作体验造成了严重的干扰。我甚至认为爱心版和英文版比标准版使用起来更愉悦,更能减少我的焦虑。

    4. 视觉层

    作为一个 UI 设计师,在拆解 12306 的产品过程中,我对整个产品的设计感到绝望。首先,没有做到统一性,整个产品毫无设计规范,比如卡片的圆角、品牌色、版块间距根本不统一,这样的视觉体验一眼望去就非常糟糕;其次,图标、活动图、橱窗图以及详情页的设计毫无美感,满满的山寨 APP 风格,特别是订单页的 ICON,花花绿绿、琳琅满目,连最基础的统一都没有做到。

    六、后记 作为一款国民级用户 APP,铁路 12306 仿佛陪伴了 80、90 后的青春。还记得 10 年前老家是黑龙江和河北的大学室友,每年春运开启之前就为了回家的火车票犯愁,不仅要去遥远的火车站排队,很多时候还可能空手而回,那便是最初对 12306 的记忆。

    如今十年过去了,12306 解决了亿万人的出行抢票需求,让我们在春运的路上,可以轻松购买一张回家的票。但下一个十年,我更希望 12360 的产品团队,可以重视用户体验设计,让我们不再掉入那些体验陷阱。

    参考文献:

    易观千帆-铁路 12360APP 数据分析 七麦数据-铁路 12360APP 数据分析 中国铁路 12306 官网 尼尔森十大原则 《设计的陷阱:用户体验设计案例透析》- 乔纳森·沙利亚特 欢迎关注作者微信公众号:「设计大侦探」

  • 红包缩水至60亿,大厂不再迷恋春晚?

    设计动态 2023-01-28
    伴随着一首《难忘今宵》,2023年春晚正式落幕。 热闹的春晚依旧捧红了不少爆款,在网友的火眼金睛下:小岳岳的春晚造型被扒出是“奶奶同款”,穿起来像双开门冰箱的精准吐槽,让戏里戏外的互动喜剧感拉满;黄渤节目中的跑步机+连体衣,让人一下子梦回2014年,只不过这次

    兔年春节联欢晚会已经落下帷幕,而和以往的春晚有些不同,观众所熟悉的“抢红包”环节并没有出现,大厂们也没有选择在春晚红包上做出太多动作。而这背后,体现的是互联网公司经营阵地和策略的转换。具体如何解读?不如来看看作者的拆解。

    伴随着一首《难忘今宵》,2023年春晚正式落幕。

    热闹的春晚依旧捧红了不少爆款,在网友的火眼金睛下:小岳岳的春晚造型被扒出是“奶奶同款”,穿起来像双开门冰箱的精准吐槽,让戏里戏外的互动喜剧感拉满;黄渤节目中的跑步机+连体衣,让人一下子梦回2014年,只不过这次不再是爱马仕,“淘宝同款售价6060元,比上一次已经亲民很多了!但依旧是买家秀和卖家秀的区别”;女孩子们则将杨紫的风衣和内搭加入购物车,各个社交平台上,有声音不断传出:“速速给我来个链接get春晚同款”。

    看春晚、扒同款,历来是中国人民过节的保留项目。但另一边,同样是观众熟悉的固定项目“抢红包”今年却不见了踪影——继2015年微信支付通过春晚红包一炮而红以来,互联网大厂们用8年时间,培育起观众“上春晚、摇一摇、抢红包”的过年习惯,这是第一次,主持人不再播报抢红包口令,伸长脖子等着红包的观众度过了一个没有“摇一摇”的春节。

    在微博上,网友们到处询问:“今年摇一摇红包在哪?今年没有赞助商了吗?”直到大年三十当晚,节目进行到了一半,才终于有人陆续开始反应过来:“只听到了五粮液和央视频,今年应该抢不着红包了”“我妈因为今年春晚没有摇一摇,(九点半)已经躺床上看手机去了”;也有网友发出直白的感叹:“春晚都没摇红包环节啦?看来各大公司真没钱了。”

    过去三年,行业环境瞬息万变,各大互联网公司都开始重新衡量业务的核心指标。当线上渗透率不断增长,竞争之势也从攻转守,从“拉新”转到“促活”,从要增长转到要价值,春晚正是其中变化的一个缩影。《电商在线》留意到,今年的兔年春节,策略正在改变,但依然有共性:

    1)经营阵地变了,从春晚回归到App站内。大厂不再发春晚红包了,但淘宝、京东、拼多多、抖音、快手、百度等曾经的春晚常客,都在自己的App内开展相应的春节活动。

    2)玩家范围变广了,中等规模的互联网公司开始参与春节营销战。大厂要“守”,中厂要“攻”。小红书、B站都先后开启了春节活动,其中B站是第一次加入这场战局。

    3)玩法上越发“整花活”了,力求让用户多停留。网易开启元宇宙会场、抖音开始线上放烟花、快手官方开启了24小时直播、百度则推出了AI写春联、定制兔兔头像等活动。

    4)品牌方介入更深了,平台发红包、品牌方来助阵。微信视频号竖屏看春晚首次引入独家冠名金典、安慕希,抖音、快手等春节活动也能看到品牌方借平台场地发红包的影子。

    当流量时代切换到“留”量时代,春晚红包大战,也终将成为历史的一部分。

    一、红包缩水的春晚 今年的春晚,商业气质淡了。除了主持人口播的五粮液、梦之蓝,以及背景上印着的红旗新能源,和“兔”沾边的极兔算是植入广告最深的品牌的互联网公司,一场小品《马上到》不仅诉说了快递小哥的故事,如“你的风火轮让梅西踢跑了?”的抛梗,还无形中cue了一把极兔代言人。只是,往年每隔xx分钟发一轮红包的环节没有了,主持人不再播报红包口令,而是告诉观众上央视频可以进行实物抽奖,奖品包括价值近3000元的五粮液、兔团团玩偶抱枕等。

    不过,尽管春晚红包没有了,但对于互联网公司而言,春节,依然是不能缺席的场合。只是发红包的阵地,从春晚转移到自己的App——去年的红包大战率先从App图标掀起:抖音20亿元、快手21亿元、百度22亿元,硝烟味从各家将红包金额搬上App图标就能看出来。相较而言,今年,除了快手依然将分20亿搬上图标,抖音、百度都低调了不少。

    1. 快手分20亿元 发放金额最高的快手是最积极的。1月4日,快手在App端上线20亿元春节红包活动。

    只是活动玩法较为复杂,实际分发的20亿元也分散在各个活动中。比如兔兔大合成,用户需要在供财神、拍新年、游园会、云上庙会、新春锦鲤中获得“兔兔币”,用“兔兔币”升级兔兔到 10 级(类似此前爆火的合成大西瓜改版,成了合成兔兔),才能拿到瓜分“20亿”的资格——然而,并不是直接平分,从金额上看,公布的明确金额在6亿元左右。

    其余金额基本都藏在后半场。大年三十当天,快手官方直播间开启了24小时不间断直播,在直播间中,每60秒可以抢一次红包,包含现金红包、福利商品、优惠券等;而除了猜题、红包雨等直播间互动以外,快手还安排了直播抽百万的活动,一轮抽取20个号码牌平分100万元,用户通过邀请好友助力等方式可以获得更多号码牌,借此来提升中奖概率。

    2. 抖音分7亿元、百度分8亿元、支付宝5亿元 和快手一样,抖音发红包也分了“两段式”。1月10日,字节跳动旗下抖音、今日头条和西瓜视频等多个平台联合上线集卡分2亿元红包的玩法;同时,抖音单独推出了4亿元的找红包活动,用户参与放烟花、猜灯谜等年俗游戏即可获得。不过,或许是受限于金额,活动周期较短,以抖音放烟花分1亿元为例,大年初一,相应的抖音活动界面就已经下线。

    百度和字节跳动的策略相似,也是矩阵玩法,融合了旗下各个业务。传统的集卡活动分3亿元,邀请好友助力的“团圆红包”3亿元,除夕夜当天派发红包雨2亿元。而支付宝的“集五福”活动则延续过往,金额依然保持在5亿元,但新增了生肖卡、直播间集卡等方式。

    3. 京东分20亿元、淘宝拼多多强调“不打烊” 横向来看,“猫狗拼”今年是最低调的,京东和往年一样,“砸年兽”、“击鼓传花”活动各分10亿元,但几乎没有宣传,App图标强调的是“春节送货”,淘宝、拼多多也将重点放在了“春节不打烊”,其中淘宝直播表示主播红包将从大年初二发到大年初七,但金额并不明确。和2021年全网红包总金额122亿元、2022年80亿元的规模相比,2023年各大公司的红包总金额继续缩水,大约在60亿元左右,距离巅峰期的金额,已经跌去了一半。

    二、互联网大厂为何不再“爱”春晚 过去数年,春晚一直被视为最具价值的流量洼地之一,从1994年央视第一次公开春晚广告招标开始,酒企、钟表、药品、家电乃至后来互联网公司的加入,20多年来,品牌和公司在春晚大舞台上的“明争暗斗”从未休止,也因此诞生了不少颇具节点性的热梗。

    2015年,微信“珍珠港偷袭”成功,让互联网“爱”上了春晚。在当时,春晚“流量”实在太具诱惑力了。一个小细节足以说明当时春晚的热度:2018年,为推广得到App,罗振宇曾拜访央视广告部,但广告部的领导却直白地对他说:”互联网公司要想上央视春晚,有一个小门槛——互联网产品日活用户得过一个亿。要不然,广告出来的那一瞬间,你的服务器就会崩掉。”随后罗振宇才发出那句经典的感叹:”我们真的对春晚的力量一无所知。”

    但是时移世易,过去8年,无论是媒介传播方式还是互联网行业环境,都发生了改变。

    首先是春晚的热度有所衰退,2001—2019年,春晚的收视率都保持在30%左右。但是2020年以来,黑天鹅来袭,传统年味削弱,“过年越来越没氛围了”成为了社交热门话题,伴随着春晚收视率一路下跌,2022年春晚收视率已经下降到20%左右;其次,在高速增长阶段,互联网公司上春晚的主要目标是“拉新”,但拉新之后如果无法留存,效果大打折扣。

    百度曾想借春晚打开支付等业务的局面,但最终结果不佳。QuestMobile发布的2019春节大报告中称,在2月4日除夕当晚,百度App的DAU冲到了2.4亿,涨幅达67.3%。但根据国金研究创新中心监测的2019年2月4日24:00前7天内各App新增用户的留存情况,以手机百度为例,虽然收获上亿新增用户,但是到了2月9日,留存率仅剩2%;今日头条和抖音,留存率也不过30%。当年百度交出了上市以来第一份亏损季报,财报数据显示亏损超过3亿元,当时百度CFO余正钧表示,央视除夕晚会营销活动影响了利润表现。

    上不上春晚,实际上是一本账,全看互联网公司觉得“值不值”。

    对于大厂而言,春晚所能带来的价值已经被稀释了。数据显示,中国人口14.1亿,而我国网民已经超过11亿,头部互联网公司已经从高速增长阶段,进入到平稳发展阶段,互联网的高渗透率,让“拉新”不再成为核心指标,以淘宝为例,近两年以来,其平台侧传递的声音已经转移到做深“用户价值”、做长“用户生命周期”;此外,互联网行业反垄断、降本增效的整体背景下,每一分钱都要发挥出其应有的价值,控成本早已是行业关键词。

    大厂的春节营销策略,从攻转守,已经更近似于一种刷存在感而非核心业务提升的思路。这也就不难理解为何今年春节营销战中,中等规模的互联网公司,反而开始活跃起来。对于中厂而言,增长曲线依然是重要指标,要尽力让这条曲线更陡峭。第一次参与春节营销的B站、玩起了虚拟人养成的小红书,其体量规模有增长的空间,业务层面也有破圈发展的诉求。对于它们而言,一味地压缩成本价值不大,平台破圈和业务成长,依然需要持续的投入。

    三、从金额到PK创意,品牌方造势元宇宙过年 从另一个层面来看,互联网公司不再迷恋春晚,同样也有用户层面的原因。

    8年春晚,年年“摇一摇”,用户的兴奋阈值越来越高,用户早已经厌倦“一顿操作猛如虎,最后到手2块5”的套路——从产品本身形态来看,春晚摇一摇已经略显单一。

    过去几年,除了摇一摇红包以外,真正出圈的春节营销产品实际上也只有红包封面。红包封面甚至成了一门划算的生意,按照其定价规则,微信会收取1元1个的设计费,大部分奢侈品牌每日投放量为10万个;而个人创作者定制的红包封面,还衍生出一条代理产业链。《电商在线》采访微信红包封面代理商,对方曾透露,节日是红包封面流量最大的时候,去年年底,两百多款原创红包封面,从圣诞节到一月初,仅十天左右,营业额就超过了10万元。

    今年以来,当春节营销阵地又回归到各个App本身,有两个明显的变化:一是各大品牌方、平台方都开始“整花活”了,创新各种小游戏,以求让用户在平台停留更长时间,其中元宇宙式玩法最为吃香;二是品牌方和平台方捆绑更紧密,比如微信竖屏看春晚今年首次引入了金典、安慕希独家冠名,君乐宝冠名了抖音红包,飞鹤奶粉则冠名了快手红包。

    当平台和品牌方,开始将目光回归到创新产品形态,寻找新的用户链接路径,春节活动PK的不再是红包金额高低,而是更好玩、更有趣、更出圈、更具传播力和影响力。

    比如,虚拟人、元宇宙成了新体验,各种网络春晚花式刷屏。今年小年夜,网易联合央视网打造了一出元宇宙春晚,观众获得数字门票、定制虚拟形象后,就能以自己的虚拟形象进入会场。在一个占地3000万平方米的“赛博国风”元宇宙分会场内,央视小C、翎_Ling和阿喜Angie三位虚拟人与一众明星登台献唱,最终跨媒体总触达人次达到9.65亿次。

    营销方式不再局限于“摇一摇发红包”,玩法就越发多样。今年小红书发红包的方式,同样与众不同,用户拆福袋抽取形象装扮和道具,进而升级虚拟人、参与瓜分红包;而品牌方也紧跟潮流步伐。春节期间,麦当劳宣布与Karen X Cheng达成合作,将在元宇宙庆祝中国新年,通过虚拟现实、增强现实和3D动画,用户可以在麦当劳元宇宙中打麻将、下围棋。

    从争相上春晚,到转战元宇宙,互联网不爱春晚了吗?或许,春晚只是回归到了其最开始的样子——从一个营销圣地,重新回归到了一出汇聚全国视线的文艺晚会,仅此而已。而流量的风口,总是风水轮流转,谁也无法永远凝聚所有人的目光。转向,或许才更符合历史发展规律。

    作者:王亚琪;编辑:斯问

    微信公众号:电商在线(ID:dianshangmj),见锐度、见洞察,聚焦互联网和新商业的创新媒体。

    本文由人人都是产品经理合作媒体 @电商在线 授权发布,未经许可,禁止转载。

    题图来自 Unsplash,基于 CC0 协议。

    该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

    给作者打赏,鼓励TA抓紧创作!

    {{{path> 赞赏

  • 视觉设计师来收!免费商用字体推荐:卡通体篇(13款已打包)

    UI交互 2023-01-28
    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。往期回顾:视觉设计师来收!免费商用字体推荐:圆体篇(12款已打包)圆体给予人圆润亲切的感觉,显得温润柔和、新颖活泼。

    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。

    往期回顾:

    视觉设计师来收!免费商用字体推荐:圆体篇(12款已打包) 圆体给予人圆润亲切的感觉,显得温润柔和、新颖活泼。

    阅读文章 >

    整个字形向上倾斜,给人一种积极向上的感觉,而且横折和竖折的笔画都有弧线,没那么死板,无论是笔画结构,还是笔画粗细,都是灵活的,是一例轻松快乐风格的字体。

    字形笔画去除了折笔的弧形,换之以平直的笔画,竖弯钩转为竖折,同时弱化了钩笔画,省去了许多笔画末尾的小尾巴,显得更加直白可爱。整体形态采用了镂空的制作技巧,增强了字体的立体感。

    字体设计灵感来源于千图网 IP 千小兔的形象,将可爱的千小兔融入 字体设计 中,尽显年轻、活力与俏皮。适用于各类可爱、少女风的海报和店招场景。

    笔画粗细对比强烈,字形活泼,以拙为巧,趣味十足,充满童趣,让人觉得轻松愉悦。

    所有笔画以“圆润”为主,保留少量飞白,具有手写的韵味。

    在字形上淡化了棱角,笔画中间呈弧形外拓,将转弯的折角用平滑的曲线代替,部分笔画有规律的加粗,再结合圆润平滑的笔画,显得可爱个性,憨态可掬,轻松惬意。

    字体组合结构松散,重心不稳,字形偏长,起笔收笔锋利且粗细对比明显,笔画笨拙微带曲线感,具有诙谐幽默的效果。图片

    小可奶酪体字体笔画比较简单,都是中间宽两头窄的固定样式,笔画比较圆润,在转折处一笔形成的弧度,突出了手写感和趣味性。

    横竖笔画略带波浪,不完全平直,尽显俏皮可爱。字体笔画粗细排布均一合理,小字可读性较高。

    字体线条粗细适中,笔画随性,结构肆意洒脱,具有很好的识别性。

    猫啃什锦黑是一款可爱的马克笔手绘风格字体,其笔画活泼有趣萌萌哒,特别适合做可爱类、母婴类等海报的标题字体。

    仓耳非白是一款粗细对比明显、风格强烈、拥有 5 个字重的家族字体,结构方整,笔形简洁、利落,带有明显区别于其他字体的风格。

    Tips:如果安装后在 PS 或 AI 中找不到字体的话,请搜索「TsangerFeiBai」即可。

    字形结构灵活,选用粗细对比夸张的笔画,使字体更具视觉冲击力,搞怪的字型结构和出乎意料的空间调整让字体多了几分调皮可爱之气。笔画错落有致,打破了许多固有的排列模式,营造出天真烂漫的感受。

    欢迎关注作者的微信公众号:「艺海拾贝Design」

  • 作品集有很多虚拟项目,为什么还是求职失败?

    UI交互 2023-01-28
    最近不少同学在筹备作品集,而很多缺乏项目经验的毕业生,不知道怎么选择虚拟项目。我看了这么多份作品集,发现很多设计新人的虚拟项目容易出现的三种问题。如果你也要做虚拟项目,那么可以借这篇文章反思一下,自己有没有相关问题。

    最近不少同学在筹备作品集,而很多缺乏项目经验的毕业生,不知道怎么选择虚拟项目。

    我看了这么多份作品集,发现很多设计新人的虚拟项目容易出现的三种问题。

    如果你也要做虚拟项目,那么可以借这篇文章反思一下,自己有没有相关问题。

    更多虚拟项目干货:

    作品集没案例?看高手如何在3天内搞定一个虚拟项目! 现在找实习越来越难,很多设计新人都苦于没有项目案例放作品集。

    阅读文章 >

    一、天马行空,不接地气 尤其是直接把学校的课题搬到作品集上时,很容易出现这样的项目:

    AR 互动游戏 节水公益 APP 图书馆服务设计 这三个项目,你可能觉得挺好的呀,看起来不但有创意,还很有价值。

    可问题是,咱们是为了找工作而做的作品集,你确定自己能找到 AR 游戏、公益 APP、服务设计的工作吗?

    如果真的能力很强,这些项目做得特别好,那倒也不是问题。

    但是对于大部分人来说,设计能力一般般,又要挑战这种高难度项目的话……

    我只能劝一句:请接点底气吧!

    AR 这个领域确实是未来趋势,但目前产业并不成熟,能赚到钱的公司很少,能提供的岗位就更少了。

    这种岗位有限的热门领域,很多设计师会有兴趣尝试,竞争就更激烈了。

    你想试试不是不行,但得掂量一下自己的水平够不够得着。

    公益产品就更小众了,不赚钱的东西,基本只有政府或大厂会玩一玩。

    大厂是什么门槛,这个不用多说。

    再看政府这边,项目会外包给什么公司?公司会分给 设计师 多少钱?你自己思考一下……

    最后那个服务设计,虽然网上喊的声音很大,但是你去招聘网站搜一下关键词就知道行情了。

    二、不懂业务,用爱发电 很多人在构思 C 端虚拟项目时,就简单的往自己想要的产品去想,完全不考虑业务和可实现性,最后弄出一个根本不合时宜的项目。

    例如做一个宠物 app,上来就把社区、商城……宏大版图加上去。

    但凡对行业和竞品了解一点,都知道现在做社交和电商有多难。毕竟已经有那么多成熟的产品了,为什么用户要来你这里?

    连这种基本问题都没有任何想法,还设计什么产品?

    如果你觉得,设计师只要考虑设计问题,不需要理解业务,那就大错特错了。

    如果你是纯 UI/视觉,确实只要把图画好就行。

    但如果是想做 UX/交互,就不可以对业务一无所知,因为你的方案,确实是能影响到业务的指标的。

    如果虚拟项目的业务模式完全不切实际,那么就没办法做出合理的设计方案,即便设计能力再强,最终的结果也会很糟糕。

    所以,如果你想做 C 端的虚拟项目,一定要把行业情况弄清楚,把市场上的竞品当作真正的竞争对手,这样才可能做出合理的方案。

    如果是 B 端项目,这方面的问题就小很多,但是还是难免下面的这种问题。

    三、闭门造车,自以为是 有些虚拟项目方向选得不错,但是不认真做调研,导致后面越设计越偏,方案看起来问题一大堆。

    不要以为虚拟项目就不用做调研分析了,虚拟项目比真实项目更需要做调研分析!

    为啥?因为真实项目通常是领导、同事们已经调研分析过很多遍了的,交到你手上时,很多信息已经有了,你该做什么已经很清楚了。

    但是虚拟项目没人帮你,自己什么信息都没有,还不做调研不做分析,这跟闭门造车有什么区别?

    例如我之前看到有好几个学生的虚拟项目是校园二手货平台,这个确实是刚需,算是合理的项目方向。

    但还是很容易出现这样的问题:

    照着闲鱼抄,也不管校园内的二手货交易有何特点。这样能体现出什么能力呢?招聘方会觉得你只会抄作业,一点设计想法都没有。 首页做得完全不像是二手货交易平台,还以为是学术交流网站。这个问题显然是闭门造车又思路不清晰造成的结果,不管是做竞品分析、用户访谈还是用户测试,都有希望尽早发现并解决。 把线下集市、二手货交易柜、上门收货都计划好了,盘子铺得特别大。但凡是研究过行业和竞品,都应该想得到为什么别家很少有这么做的。 所以,千万别以为虚拟项目就是自己想怎么做就怎么做,正是因为项目是虚拟的,所以反而更需要小心求证。

    总结一下 建议先做职业规划,再选择虚拟项目。讲直白一点,就是根据招聘岗位来准备作品集,免得好不容易做完一个项目,发现根本找不到相关岗位的招聘。

    即便是虚拟项目,也要把产品的定位和业务模式想清楚,要符合当下的市场环境,不能光凭喜好选项目。

    最后,虚拟项目更需要做调研,因为自己本来就对行业不了解,如果还不积极收集信息,那么很容易偏离十万八千里。

    欢迎关注作者的微信公众号:「体验进阶」

  • 视觉设计师来收!免费商用字体推荐:卡通体篇(13款已打包)

    UI交互 2023-01-28
    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。往期回顾:视觉设计师来收!免费商用字体推荐:圆体篇(12款已打包)圆体给予人圆润亲切的感觉,显得温润柔和、新颖活泼。

    本期推荐的是免费商用的卡通体,此类字体非常适合运用在可爱活泼、轻松休闲的设计中,会有不俗的表现力,常常能达到“画龙点睛”的效果。

    往期回顾:

    视觉设计师来收!免费商用字体推荐:圆体篇(12款已打包) 圆体给予人圆润亲切的感觉,显得温润柔和、新颖活泼。

    阅读文章 >

    整个字形向上倾斜,给人一种积极向上的感觉,而且横折和竖折的笔画都有弧线,没那么死板,无论是笔画结构,还是笔画粗细,都是灵活的,是一例轻松快乐风格的字体。

    字形笔画去除了折笔的弧形,换之以平直的笔画,竖弯钩转为竖折,同时弱化了钩笔画,省去了许多笔画末尾的小尾巴,显得更加直白可爱。整体形态采用了镂空的制作技巧,增强了字体的立体感。

    字体设计灵感来源于千图网 IP 千小兔的形象,将可爱的千小兔融入 字体设计 中,尽显年轻、活力与俏皮。适用于各类可爱、少女风的海报和店招场景。

    笔画粗细对比强烈,字形活泼,以拙为巧,趣味十足,充满童趣,让人觉得轻松愉悦。

    所有笔画以“圆润”为主,保留少量飞白,具有手写的韵味。

    在字形上淡化了棱角,笔画中间呈弧形外拓,将转弯的折角用平滑的曲线代替,部分笔画有规律的加粗,再结合圆润平滑的笔画,显得可爱个性,憨态可掬,轻松惬意。

    字体组合结构松散,重心不稳,字形偏长,起笔收笔锋利且粗细对比明显,笔画笨拙微带曲线感,具有诙谐幽默的效果。图片

    小可奶酪体字体笔画比较简单,都是中间宽两头窄的固定样式,笔画比较圆润,在转折处一笔形成的弧度,突出了手写感和趣味性。

    横竖笔画略带波浪,不完全平直,尽显俏皮可爱。字体笔画粗细排布均一合理,小字可读性较高。

    字体线条粗细适中,笔画随性,结构肆意洒脱,具有很好的识别性。

    猫啃什锦黑是一款可爱的马克笔手绘风格字体,其笔画活泼有趣萌萌哒,特别适合做可爱类、母婴类等海报的标题字体。

    仓耳非白是一款粗细对比明显、风格强烈、拥有 5 个字重的家族字体,结构方整,笔形简洁、利落,带有明显区别于其他字体的风格。

    Tips:如果安装后在 PS 或 AI 中找不到字体的话,请搜索「TsangerFeiBai」即可。

    字形结构灵活,选用粗细对比夸张的笔画,使字体更具视觉冲击力,搞怪的字型结构和出乎意料的空间调整让字体多了几分调皮可爱之气。笔画错落有致,打破了许多固有的排列模式,营造出天真烂漫的感受。

    欢迎关注作者的微信公众号:「艺海拾贝Design」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通