• 【Axure 教程】随机乱序数字键盘,让数字飞一会儿

    设计动态 2022-12-29
    随着移动支付遍地开花,产品经理们在支付的各个环节可谓是下足了功夫,今天分享的是目前移动支付中比较流行的一种设计——随机乱序数字键盘。这种键盘一般用于输入验证码或密码,因为键盘每次出现数字都是随机且无序,所以可以最大程度避免别人通过你在输入密码时按键的位置而推测

    目前的移动支付中有一种比较流行的设计——随机乱序数字键盘,它可以最大程度避免别人通过你在输入密码时的按键位置而推测出你的密码。本文作者分享了用Axure制作随机乱序数字键盘的教程,一起来学习一下吧。

    随着移动支付遍地开花,产品经理们在支付的各个环节可谓是下足了功夫,今天分享的是目前移动支付中比较流行的一种设计——随机乱序数字键盘。这种键盘一般用于输入验证码或密码,因为键盘每次出现数字都是随机且无序,所以可以最大程度避免别人通过你在输入密码时按键的位置而推测出你的密码。

    我曾经做过这个键盘的设计,这是当时的效果图:

    你可以看得出来我是多么地不务正业,竟然想到给一个键盘加 loading 效果,但是没有办法,你现在所看到的这个效果图的加载时间已经算很短了,有时候加载的时间相当长,而且还不能保证每次生成的9个数字一定不会重复。

    就在最近两三天,我在与病毒抗争的某个晚上,突然因为想到了另外一种实现方式而高兴得做起来,新的实现方法不仅做起来更简单,生成速度也更快,而且目前测试还未出现重复的情况,正所谓,垂死病中惊坐起,不务正业的产品经理,竟是我自己。好了,先来看看整改后的效果吧( 传送门>> ):

    接下来分享教程。

    一、绘制键盘 首先拖进来一个表格,按照上图改成3*4的键盘形式,再拖进来9个动态面板,然后每个单元格和动态面板分别进行命名,方便待会找到对应元件:

    然后添加10个变量,用量存储生成的10个数字:

    二、生成第1个数字 生成键盘的逻辑是:

    每个单元格随机生成0-9的数字 每个数字只能出现一次,如果当前生成的数字已经存在,则需要重新生成 生成当前单元格数字后,生成下一个单元格的数字 这里之所以把第1个数字单独讲,是因为它是第一个生成的数字,所以它无论是哪个数字,都是可以了,第一个单元格的事件如下:

    注意 random() 生成的数字不包含尾数,比如生成0-1,是不包含1的,所以生成0-9,应该是乘以10。

    三、生成其他数字 其他数字的生成则是通过动态面板的循环来控制,动态面板不是同时启动的,而是按顺序轮流启动。首先是数字2的生成,当动态面板2载入时,自身开始循环,循环时,分3种场景:

    数字2为空,随机生成数字2 数字2不为空且不等于数字1,把数字2显示出来,动态面板2停止循环,开始动态面板3循环 其他情况表示数字重复了,把数字2清空,让循环进入第一个场景,重新生成数字2

    其他就简单了,由于我们已经在数字2生成成功的时候启动了动态面板3,所以动态面板3直接按3种场景判断即可,所以后面的所有动态面板都可以直接复制前面动态面的【状态改变时】的事件进行修改即可,将其中的变量和显示文字的单元格更换一下就行。

    但有一点需要注意的是,每个动态面的第2种场景,在判断是否重复的时候,总是比前面多一个条件,比如:数字2只需判断是否与数字1重复,数字3则需要判断是否与数字1和数字2重复,以此类推,到了数字0,需要判断是否与前面的9个数字重复:

    按以上的配置一直来到数字0,这里只需要做一点点小调整,由于数字0是最后一个数字,已经不需要再继续生成,也就是不用再启动任何动态面板,所以这里生成后,比其他的数字少了一个启动下一个动态面板的动作:

    希望以上教程对你有帮助,如果喜欢我的教程,请帮忙点个“收藏”和“喜欢”,感谢阅读!

    本文由 @产品锦李 原创发布于人人都是产品经理,未经许可,禁止转载。

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

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

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

    {{{path> 赞赏

  • 接到有损用户体验的设计需求怎么办?高手总结了3个方法!

    UI交互 2022-12-29
    对于体验设计师来说,最常见的棘手问题之一就是:如何平衡「用户体验」和「商业化需求」之间的关系。一位同学就问过我这样的问题:“我所在的公司产品为了冲刺营收,搞了很多营销手段,导致用户体验相关的数据下降了很多。产品经理也不重视用户体验,认为 \'没有用户来投诉’ 就行。

    对于体验设计师来说,最常见的棘手问题之一就是:如何平衡「用户体验」和「商业化需求」之间的关系。一位同学就问过我这样的问题:

    “我所在的公司产品为了冲刺营收,搞了很多营销手段,导致用户体验相关的数据下降了很多。产品经理也不重视用户体验,认为 '没有用户来投诉’ 就行。

    我作为产品的体验设计师,感觉很难去做点什么了。产品的营收确实重要,但这样为了短期目标而忽视 用户体验 的做法是不是不太好?作为设计师应该怎么办呢?”

    其实这样的情况,我这几年在大厂的工作中也没少遇到过。设计师在这时提出的体验问题大多会石沉大海,不被采纳。这就会导致很多 设计师 对工作渐渐丧失“工匠精神”,感到心灰意冷。那么此时应该怎么做呢? 我有三条建议:

    站在业务视角:明确目标 站在用户视角:尽量补救 站在产品视角:做好记录 相关话题的探讨:

    究竟是什么决定用户体验的走向?我总结了6个方面! 随着 4G、5G 的普及,移动互联网进入成熟时期。

    阅读文章 >

    一、站在业务视角:明确目标 很多业务在某些特定的时期,目标并不是“好的体验”,有时“快”比“好”更重要,“能用”比“好用”更有价值。

    有时设计不是万能的,也不是必须的。虽然优质的产品和极致的体验是我们一直在努力追求的目标,但是对于很多产品、业务甚至是公司来说,“好体验”并不能支撑它们活下去。

    如果条件允许,相信没有业务方会抗拒好产品和好设计。他们也并非看不到体验问题,只是这些并不是当前的主要矛盾和首要目标。

    在不以设计为核心的公司和业务中,配合业务完成目标是设计师最基础的本职工作。 此时的体验设计师就需要:

    1. 了解业务需求的目标

    与业务方做深入沟通,站在业务视角,透过现象看本质:一定要搞清楚业务每个需求背后的目标和方向。短期业务目标有时可能会因为某些限制而与用户体验相悖,但长期发展的大方向一定并不矛盾。

    2. 理解业务行动的依据

    就像作为设计师的你有不能减损用户体验的理由一样,业务营销的行为也有其背后的依据和逻辑。也许是这种营销行为在此时此刻更符合用户心理预期;也许是以往经验证明这样的营销手段并不会影响用户与产品的长期关系等等。

    理解业务的显性需求和隐性需求,才会拼凑出完整的需求,你的设计决策也可以以此为据。

    当你手里拿着锤子,看哪里好像都是钉子。设计师是和用户打交道的人,最容易做的就是放大用户体验的价值。因此只有真正理解业务行动的目标和依据之后,才会杜绝偏见,也才能够在业务目标的指引下做出更加恰当的设计决策。

    二、站在用户视角:尽量补救 “考虑用户体验”不是业务方的必修课,而体验设计师作为用户和产品之间的桥梁,就应站在用户视角,尽可能地对方案做补救和优化。设计在这个时候就要起到“托底”的作用。

    如果你想要保住产品的体验质量,不能只做批判和喊口号,还要拿出解决方案和落实方法。在这种业务相对强势的时刻,就更需要你:

    发挥主动沟通和协作的能力; 洞察用户和业务两方的目的和需求; 提供充足有力的设计依据; 评估和利用有限的资源和成本; 统一协调相关方推进进度; 预估可能会遇到的风险和卡点。 设计师的专业能力和价值不是只在大型项目优化中才得以展现,这种紧要节点同样也是你锻炼的机会。在有限的条件为用户体验质量做托底,我们不应该把自己定义为“受压迫者”,而是要做解决棘手问题的“设计军师”。

    很多时候,我们都会感到自己受困于当下的环境中,力不从心,独木难支。但其实不是你没有机会,而是你能看到这个机会背后的层层阻碍,因此下意识的退缩不前或转嫁责任。

    但如果你想要进步,就要把阻碍当成是升级的挑战,迎难而上。最重要的是,要克服自己内心深处的惰性,把抱怨“我不能”转变成思考“我怎样才能”。

    思考如何突破当下的业务困境,本身就是一种专业能力的历练,也是一种设计经验的积累。

    作为用户体验的一道最主要防线,该说的我们一定要去说,该做的我们也要去做。虽然很多时候结果并不是我们能够控制的,但过程往往比结果更有意义。

    三、站在产品视角:做好记录 对于一些成本比较高,在短期内难以优化和迭代的点,如果你有想法和思考,就找个地方记录下来,静待优化落实的机会。未来如果产品有更新迭代,也许就能派上大用场。

    即使最后没有机会优化或落实你的方案,在这个过程中的思考和探索,同样是对你设计能力的培养和锻炼。

    生活中有很多事情并不会给你即时反馈,大多是看不到短期成效和意义的。但是几年之后当你回过头来,就会发现未来的你正是由现在的自己一步步塑造而成。你的每一步路,都不会白走。

    以上,共勉。

    欢迎关注作者微信公众号:「长弓小子」

  • 如何做好金融类APP设计?我梳理了9个要素!

    UI交互 2022-12-29
    前言对于金融类 App,设计流行趋势是什么?如何在设计中更好地体现银行的企业理念和品牌特色?如何提高金融类产品的用户体验?

    前言

    对于金融类 App,设计流行趋势是什么?如何在设计中更好地体现银行的企业理念和品牌特色?如何提高金融类产品的用户体验?本文总结了九大设计要素,帮助你理解金融类 App 的 UI 设计。

    更多金融类产品的总结:

    15000字深度解析!银行金融APP的适老化设计指南 引言 任月月:据调查,中国人口老龄化程度在全球已处于中上水平。

    阅读文章 >

    一、色彩 在色彩心理学中,蓝色、绿色等冷色调,给人以冷静、稳定的感觉,体现了金融产品的科技感和可靠性。而红色、橙色、黄色,代表活力热情,也会像五星红旗带给我们的民族自豪感,可以用于金融产品要传达给用户的情感色彩。

    1. 品牌色

    一般 app 的整体色调,都会根据品牌色来设计,像下图的「招行企业银行」的首页,品牌色很好地应用在图标、按钮、文字链接、卡片背景、banner 这些地方。在界面设计中通过加入更多的品牌元素,可以潜移默化地让用户感受企业的价值,传达企业对用户负责的态度,提升用户对产品乃至企业的信任感。

    2. 弥散渐变色

    其次,也可以采用近两年流行的弥散渐变风格。弥散渐变是一种轻量舒缓的设计色彩。如果想要强化顶部导航栏或者个人中心页面顶部的视觉感,利用品牌色作为背景颜色,会显得顶部视觉厚重;如果利用白色或者浅灰色做背景色,而显得单薄。

    我们来看下图,用弥散渐变处理的方式做页面背景色或者在白色卡片的边缘位置强化色彩,不仅可以丰富视觉表现力,还可以和卡片内容相呼应。所以不妨试下这种十分干净清爽的新设计方式。

    更多渐变形式:

    用80张案例,帮你掌握20种渐变色表现形式! hi,我是鱼先生,终身学习践行者。

    阅读文章 >

    二、文字 界面中另一个重要的构成元素是文字,文字向用户传达信息,合理的使用文字样式非常重要。在金融界面中,我们常常用粗细体、字体大小、文字颜色深浅等来拉开文字层级,增强内容的可识别度。像 iOS15 设计风格,大标题导航也是这个道理。

    另外,定制字体的使用,也十分流行。这几年越来越多的公司,开始定制字体,根据自己的品牌特质去做一些特殊的字体。比如下图的「支付宝」,这些金融数据的数字,采用特殊字体的方式来设计,视觉效果更佳。

    三、图标 图标作为功能入口、用户的操作载体,图标的设计也可以为界面添彩。目前市面上,金融类 App 的图标设计风格,主要分为以下三大类:

    1. 线性图标

    轻质简约,大多数 App 都采用这类风格。如下图的「宁波银行」的金刚区图标设计,外部深色线框加内部彩色线条(品牌色橙色+对比色蓝色+邻近色黄色)点缀。

    2. 面性图标

    颜色搭配丰富,视觉冲击力强,页面效果更加生动,常用于重要功能图标的设计。下图「京东云企业管家」首页的功能图标设计,面性图标+毛玻璃质感,图标更有质感和层次感。

    3. 线面结合

    新型的图标流行趋势,线高度概括图标的含义,面装饰点缀,风格独特出彩。下图是「涨乐财富通」的图标设计,黑色线性边框+红色内部线条+渐变红色圆形点缀。

    四、布局 1. 留白

    对于布局,除了基础的信息功能框架,留白是关键。我们在工作中可以发现,很多高级感的设计通常都具有大片的留白。太过紧密的间距、没有明显的区分隔断、复杂的背景,都会大大降低用户的使用感。留白设计能使整个页面不至于太过抢眼,可以给予设计呼吸的空间,让用户快速找到所需要的信息。

    2. 圆角卡片

    此外,圆角卡片的使用,也是布局流行趋势之一,圆角会更突显矩形内的内容,有助于用户将视线聚焦于内容本身。大圆角有轻松活泼的感觉,小圆角、直角更像是一种强调,表现得严肃庄重,给人一种信任感。对于金融类 app 来讲,该使用多大的圆角,是根据整个 app 的调性来定的。

    比如「招行企业银行」,因为是 B 端产品,整体的调性是专业、安全,加上其 logo 的内置图形是招商银行的品牌 logo“M”图形,有棱有角的。所以在整个 App 的界面设计中,采用的是小圆角卡片,小圆角图标等等。

    五、插画 无论在界面设计,还是在品牌营销中,很多场景都需要插画来塑造产品的气质和氛围。插画有助于将我们的品牌故事讲给用户听。这两年流行的插画风格多种多样,那什么风格会更适合应用在金融类 App 的设计中呢?

    1. 几何插画

    一般几何图形多为产品界面和宣传内容的抽象,线条和几何色块的结合,搭建出用户实际使用场景,更加简洁、清晰。下图为「中信银行」首页,banner 就是采用几何图形插画设计风格,绘制了一幅居家悠闲的画面,挺符合中信银行的定位:“有温度的银行”“信守温度”。

    2. 轻拟物插画

    在一些快速入口图标,或者重要的卡片中,会采用轻拟物插画设计来重点突出要素。下图为「广发银行」发现精彩 app 的头条页面,就嵌入了轻拟物插画,强化了这个卡片内容的色彩感和层次感。

    3. 2.5d 插画

    2.5d 立体的造型,本身更有真实感,在界面设计中可以吸引用户更细致的欣赏。下图为「京东云企业管家」的首页,新人福利模块就采用了 2.5d 插画风格。

    六、品牌 IP 疫情第 3 年,隔离使得人们对于图片所呈现出的故事和情感,有着更为强烈的情绪反应。在 App 界面设计中,越来越多的应用了情感化设计,来赋予产品一种拟人化的情感,与用户互动,让用户感受产品的温度。那相比于品牌或者 Slogan,品牌 IP 更具备这种实力。

    比如广发银行的“小发羊”。「广发银行」是一家广州起源的银行,小发羊融入了广州本地人的性格属性(慢性子、爱吃、精打细算、很师奶),同时也匹配了银行业务本身的需求。在 app 的界面设计中,小发羊应用在了启动页的设计、广告设计以及养成类社交游戏和 IP 周边品牌馆,让用户从业务和日常生活都离不开。

    七、微交互动效 UI 设计中通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪、取悦用户,让用户的认知过程更为自然,用户体验更加精致到位。是一个很好塑造品牌个性的机会。

    比如「平安数字口袋」app,上图中的金融页面的金融小工具模块和顶部的投资 icon,作为重点功能入口采用了动态图标微交互设计,吸引用户眼球,辅助用户理解。

    八、数据可视化 大数据时代,数据的展示是必不可少的,所以在金融、理财、账户管理等页面上,借助图形化手段,更加清晰有效的传达信息。

    上方左图是中国农业银行基金经理信息的页面,右图是招商银行的。左图只能粗略感知到这个基金经理的盈利能力,右图中可以对基金经理的投资风格一定了解。大片文字和图文结合两种方式相对比,数据可视化的优势一目了然。

    九、组件化、模块化 组件化是利用原子系统从原子、分子、组织、模版、页面来快速搭建页面,让设计语言标准化体系化。

    模块化是在组件化的基础上,将产品分成几个模块,通过模块的组合配置,就可以创建不用需求的产品,满足客户的定制需求。

    下图是我们兆日的设计体系部分截图,我们的设计团队构建了全面的设计组件库,同时对接开发,一一对应实现 UI 控件。这样设计更新迭代中可以非常高效通过更新组件库去整体更新所有页面样式,方便协同办公提升效能的同时,保证全渠道体验一致性。

    写在最后 近两年来接触了大大小小几个银行项目,无论是 0 到 1 设计,还是改版设计都有一定的收获和感悟。希望本次对金融类 App 设计的复盘能给大家提供一点思路,让产品越来越好。同时也欢迎各位小伙伴来共同探讨与指正~

    欢迎关注团队微信公众号:兆日 UCD

  • 大厂实战!京东内容助手从想法到落地的完整设计复盘

    UI交互 2022-12-29
    本文主要讲述了作者作为京东内容助手 APP 产品一号位以来,从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考,为读者朋友们提供参考和建议。往期京东案例回顾:大厂案例实战!京东微信购物2022年改版深度解读今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行...

    本文主要讲述了作者作为京东内容助手 APP 产品一号位以来,从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考,为读者朋友们提供参考和建议。

    往期京东案例回顾:

    大厂案例实战!京东微信购物2022年改版深度解读 今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。

    阅读文章 >

    一、为啥要写这个文章 在正式开始叙事内容助手产品故事之前,作者想先讲讲自己在京东内容做产品的故事,我是从 2019 年 5 月加入京东的,2019 年 10 月开始做京东直播产品,期间历经前台频道、直播间、M 页、小程序和部分后台,然后横向转做京东视频、话题产品,基本上大半个京东内容的产品线我都当过产品,经历多,做的产品需求就多,期间遇到的问题和踩过的坑也就多,工作中的精彩案例和经典天坑,也许我写出来后能给大家带来些启发:

    每一个庞大完整的系统都是一步步成长起来的,里面每一个看似奇怪的设计或功能,背后可能都是一个让你忍不住骂出声的教训。 有些前人犯过的错误,后面依然重复出现,不断有新人掉入同样的坑。 基于此,我想把内容助手从想法到落地实现的故事都写出来。

    二、为什么是内容助手 其实一开始,我们并没有想做一个完整的移动端内容创作平台,仅仅设想对标淘宝主播 APP,在手机端拥有一款京东内容自己掌握的、可以开播的 APP 就行。当时,新版主播操控台日趋成熟,移动端缺乏主播开播工具,而淘宝方面在移动端深耕已久。于是,产品同学们一合计,决定落地这么一个产品,取名叫“京东直播”APP。

    对外调研时,我们发现淘宝主播 APP 其实只有主播端能力,是个工具 APP 的定位,同时其又有专注做 C 端的淘宝直播 APP,大家想着可以将两类功能做在一个 APP 上,根据账号类型进行功能区分,这样就能实现一个 APP 既有 C 端又有 B 端的功能。

    移动端、可开播、看直播、能下单,这就是内容助手前身的定位雏形。基于京东一贯高效落地的传统,我们着手推进。就好比你打算修一栋房子,预算、工期、图纸、施工团队等都得挨个聊好。这里我们继续秉着“不重复造轮子”的原则,不断寻求合作方支持共建,比如登录注册、黄金流程、消息通知、客诉系统等。强调一下,第一次独立 0-1 做 APP,有一个靠谱的版本经理很重要,他能将 APP 从写 PRD 到最终应用市场上线的每个环节的注意事项跟你梳理清楚,避免不必要的坑。

    预期总是美好的,就像你在追女神时总是把结果想的很美好一样,你在追一个你想象中的人,而不是真实的她本身。做 APP 也一样,千万不要以为所有佐料都备好,就等着一锅烩了。变化总是随时出现,不变的是变化本身,要学会拥抱变化。高层得知我们在做一个类似于淘宝主播+淘宝直播的 APP 后,认为我们应该将注意力更多地放在 B 端生态建设上,C 端功能集中在京东 APP 其实足够了。于是乎,京东直播 APP 迎来了第一次定位大调整,也迎来了它的重命名—— 京东内容助手 应运而生,专注做 B 端直播、视频、图文内容生产,是它的第二次定位。

    三、从登录说起­­:不要想当然 “这是哪个傻 X 产品做的登录功能”,第一版 APP 上线不到两星期,作者就在客诉后台看到了用户的负面吐槽。内容助手 1.0.0 版本,我们直接接入了京东登录团队大而全的登录功能,包括:手机号一键登录、微信登录、手机验证码登录、账号密码登录、京东 APP 联合登录。这里有一个细节一定要说一下,登录功能我们整体复制照搬的京东 APP,我们想当然地认为给用户最快最省事的登录方式,就是最好的,结果招来谩骂。作者后来仔细了解了用户的登录场景,很多主播或达人都习惯在 PC 端使用达人账号密码来进行登录,并且使用的账号都不是跟自己常用手机号绑定的,或者说主播/达人有多个手机号,当在内容助手 APP 用手机号一键登录的时候,就会登录成它自有手机号的达人账号,影响其使用。

    作者记得当时还和我们另一位产品同事讨论过登录问题,其实当时我很坚持让视觉把登录做成默认的传统账号密码输入框的形式,并提供其他登录方式的切换选择,理由是 PC 端用户习惯了。当时那位产品同事给的意见是“现在市面上都是一键登录搞定,为什么还要做那么复杂的输入功能,对用户也不友好,一键登录多省事”,有些后悔当时自己没有坚持自己的选择。所以,有时候立场坚定一点也不是坏事。

    当初作者作为内容助手的产品一号位主导了整体的框架设计,不同的产品同学分别负责直播、视频、单品三大内容素材创作端的产品工作,各自在 产品设计 上积累不少经验教训。

    四、直播:要在 PC 基础上做减法,但不要强制替用户做决定 内容助手在做主播端功能的时候,一贯秉持的原则就是:在满足需求的同时尽可能地把功能做到最简洁。与其他需求都是从 PC 主播操控台简化搬运到内容助手不同的是,创建直播间时支持一键复制直播间是在移动端的首创,极大方便了那些想要快速建好直播间而又不想每次去下载直播封面图,重新编辑文字的主播。负责主播端的产品同学在研究创建直播间的行为中发现,大部分主播都是日常使用同一张直播封面图,因为重新制图成本很高,直播间标题和简介也都是复用,基本就是把原直播间的开播时间修改下就创建了,这个时候要是能有一个像行云平台一键复制需求的功能来一键创建直播间,就完美了,因此该功能应运而生,上线后主播反馈效果不错,甚至可以夸张一点地说,尤其是那些想多开播作弊的主播用得更是勤快。

    相比于一键复制创建直播间,主播在内容助手开播时,摄像头的镜像问题算是一个槽点。当时负责直播创作的同事在观察了许多主播的直播视频后,发现他们在介绍商品时,镜头都会给比较多的商品特写,为保证他们在用内容助手开播时,商品能清晰正向地展示在观众面前,产品同学默认将特写画面进行了镜像翻转,保证商品特写画面始终正向展示在观众面前。虽然产品同学的出发点是好的,但是该功能上线后却遭到了非常多投诉,主播们认为强制给直播画面进行镜像对称,严重干扰了他们的直播,造成了直播质量的下降。后来,产品同学将是否镜像对称的选择权交还了主播。我们不能替用户做决定,更不能强制替他们做决定。

    五、视频:素材审核状态是一个大需求,产品应深入审核逻辑的制定 视频创作上线一年之后,我们在客诉中发现,较多客诉一直在反映内容助手发布视频素材的审核状态和 PC 端不一致,具体表现为找不到之前的草稿,PC 端发布的草稿类视频,移动端找不到,为解决此问题,作者进行了视频审核状态的全流程梳理,结果发现历史积弊挺严重。一个素材的审核状态由两个字段决定,公域审核和私域审核两个字段共同决定该素材给用户展示成什么状态,另外,由于移动端发布视频交互流程和 PC 的不同,省去了草稿展示一步,导致了上文所说的很多用户投诉看不到 PC 端发布草稿的问题。作者经过对审核状态的对照梳理,并对照 PC 端的展示状态进行了对齐,同时,补充了投稿到公域的视频,但公域被拒审,仅私域通过的优化建议提示,解决了客诉问题。

    除此以外,一些在外人们看来不知道怎么定的指标,其实也是产品和研发同学们通过实验最终反复敲定的。如视频上传时长限制为 60s,是为了兼顾视频发布效率和用户体验,一方面尽可能地支持创作者能发布长一点的视频,另一方面又不想创作者在视频发布时等待太久,因此,结合京东发布的视频素材真实时长和实际发布体验,作者将内容助手视频素材的上传时长限制为 60s。

    六、单品:不要为了做而做 产品同学自我批评,犯了主观主义的错误,当初考虑到内容助手已有直播和视频两类素材的创作能力,想着图文在移动端也得有,也没细致调研,大致问了下图文业务,自己想了想:“长图文相对依赖 PC 端的文本编辑,发布数量也少,单品类素材文字少,创作门槛低,日均生产量也不少,就把单品创作加到移动端上吧。”作者依葫芦画瓢给加上了,结果上线后日均生产几十篇,惨不忍睹,着实有些难堪。经过复盘,作者总结出失败原因:单品素材对商品图片的品质要求非常高,图片全部要抠成多张精致的白底图,做图是移动端最高的成本,达人在 PC 用 Photoshop 简单抠图就能制作完成发出去,无需先 PC 做图,再手机发布,多此一举。后续如想提高移动端单品发布数量,需要继续完善手机端一键抠白底图的功能,只有突破此瓶颈,单品创作才有救。因此,主观主义害死人,做事情还是要提前做好周密而细致的调研,没有调研就没有发言权。

    七、选品工具:APP 设计要扔下历史包袱 电商环境下,不管是直播、视频还是单品素材,至少在京东这个内容生态体系下,创作者在创作前都绕不开商品选择这个过程。为了让创作者能在手机端高效完成选品,作者决定将选品工具从 PC 端搬运到内容助手。当作者踌躇满志地拿出设计好的方案进行评审时:官方推荐菜单去掉一级商品池,直接展示二级商品池及其商品,商品排行增加更多筛选项,商品搜索框支持全局搜索。研发同学直接一盆冷水浇过来“这个功能和 PC 端是保持一致的,接口都是同一套服务,如果拆开来做的话,时间会很久”,为了首先解决有无的问题,作者在和研发一番唇枪舌剑后选择暂时妥协,利用现有底层能力把选品工具的皮先搭起来,满足能用。不过,这个妥协的用户体验代价有些高,尤其是官方选品池的一二级商品池部分,很多账号登进去都会发现空的商品池,体验属实糟糕。为了能稍微好看下,作者将默认定位的顶部 Tab,改为了商品排行,不至于让用户一进来就看到空的选品池。这个问题只有等后续和内容开放平台一同将选品工具进行整体重构后解决。

    除了上述底层逻辑的改不动而外,不同内容素材在创作前使用选品工具的出发点和方式都是略有区别的,比如:直播更多是提前谈好了合作的商品清单,商家直接给 Excel,主播将表格上传操控台即可完成选品,而视频和单品类素材就需要一个个去筛选,哪些商品是新品,哪些佣金高,哪些相关的素材还比较少的等,因此选品工具在符合通用标准的情况下,还需要有针对性地照顾不同素材的选品场景。

    八、隐私合规:一个经常闪现但又不得不做的事情

    每逢重大时间节点或年中年底,工信部或网信办一般会有 APP 隐私整改的通知下发,并且总会在需求非常繁多的时间给出一个截止日期,要求在此之前完成全部合规整改。一般包含以下几项:

    1. 内容助手隐私政策文本修订

    每一次整改一般都要求对《京东内容助手隐私政策》文本进行调整,主要集中在:

    (1)APP 的核心功能及实现核心功能所需要采集的信息描述,如:当您注册、登录京东内容助手时,您需要像我们提供您准备使用的京东账号名、密码、您本人的手机号码,收集这些信息是为了帮助您完成注册。

    (2)APP 集成的第三方 SDK 清单的修订:新采集了哪些个人信息的字段,新增加了哪些 SDK,什么场景下采集用户的哪些个人信息,采集信息的频次是多少。需要根据研发排查的实际情况,对文本进行更新。

    (3)APP 请求用户的系统权限的整理:APP 在使用什么功能时需要用到用户手机的哪些权限,都需要列举清楚,不能存在“等”模糊字样,如:为了给用户提供创作视频的能力,用户在使用内容助手拍摄视频时,APP 需要请求用户手机的摄像头和麦克风权限。

    (4)隐私问题投诉渠道的创建和维护:需要创建一个供用户投诉隐私问题的邮箱、电话、收信地址。

    2. 用户个人信息收集情况的排查和整改

    (1)用户同意隐私协议之前,APP 不能存在任何采集用户“个人信息”的行为:这一条是隐私整改的红线,一旦发现必须立即整改,否则轻则被应用市场下架,重则被工信部或网信办通报批评,影响公司声誉。

    (2)APP 不能出现频繁自启动的行为。

    (3)有没有频繁请求手机权限,比如:麦克风、摄像头、地理位置权限等;APP 是否在用户拒绝开启权限后,频繁提示用户开启;APP 是否在用户不开启某些权限后,拒绝提供正常服务的情况。

    (4)用户不同意隐私协议后,按相关部门要求,仍然需要能使用 APP 的基础服务,不能直接退出 APP。

    (5)APP 需要有直接注销账号的渠道,且注销后不能影响该账号在京东其他 APP 的使用。

    九、发版工作:一个产品经理是如何既当产品又当项目的 1. 版本节奏

    作者作为内容助手产品一号位,在 APP 正式上线运营后,兼顾起了版本经理的角色,工作上不仅需要规划 APP 未来的功能方向,还需要制定出具体的版本节奏,由于第一年上线以来,直播、视频等基础功能的建设需要经常发版,我们与研发、测试商议后确定每三周发一版,每次集成后,2-3 天线上回归时间,回归报告输出后分别提审 IOS 和安卓应用市场。这里有个小插曲,安卓端除了各大知名手机品牌的应用商店以外,属腾讯的应用宝算比较大的了,由于京东在 360 主体下没有全部完备的证件,腾讯又不承认公司签署的关联证明,因此京东内容助手在安卓端的发布只能放弃应用宝这块阵地,仅仅发到了百度、小米、华为、OPPO 四个应用商店。

    2. 提审资质

    应用市场提审必备的证件说明,这一段算是应用发版的干活,一个新的 APP 要想成功上架到手机应用市场,必须要遵循应用市场的证照要求,一般苹果应用商店是自己独立的一份要求,安卓各个应用商店之间要求比较趋同。这里我就以安卓小米应用商店为例:(1)应用商店注册账号公司主体营业执照(加盖公章);(2)APP 主体公司营业执照(加盖公章):(3)应用商店注册账号公司主体与 APP 主体公司的关联证明(加盖双方公司公章);(4)ICP 备案截图(加盖公章);(5)计算机软件著作等级证书。如果发布的 APP 还存在特殊的行业背景,需要按照要求补充对应资质,如 APP 涉及医疗经营资质的,需要补充其公司主体的证照。除公司主体层面的证照以外,部分安卓应用市场要求 APP 具备计算机软件著作登记证书,也就是 APP 在第一次发版之前,需要具备电子版的知识产权,这个联系我司的法律合规与知识产权部-知识产权组的对接同事按照要求完成申请即可,重点需要让客户端研发把全部源代码进行整理并形成文档,作为原材料提交审核。

    3. 上线公告

    每一次重大功能的更新,都需要广而告之,尤其是我们的使用方。因此,让视觉同学输出一份精美的公告图片必不可少,产品同学一方面需要发布公告邮件告知运营和事业部同学,另一方面需要督促对接运营一号位同学在微信公众号发布上线通知,广泛触达内容达人们。另外,每次 APP 发版后,需要及时配置 APP 内的更新弹窗,引导老用户们更新、尝鲜新的功能。

    结语 前面说了很多内容助手的产品,最后,作者也来说说自己吧。相较于其他平台,在电商做产品,我们受不同业务影响的因素可能会更多,尤其是京东 APP 前台的一些强运营属性的模块。与之相比,京东内容助手算是一块产品同学可以较多自主规划和发挥的自留地了,产品同学可以自主规划并落地很多功能。做了一年多的内容助手主产品,作者自己总结了一些针对个人工作和成长的想法,也在这里给大家分享一下:

    要想向大目标走去,就得从小目标开始。没有十全十美的产品,都是从小处着手,一步步迭代出来,甚至是被用户边骂边改出来的。 一万年太久,只争朝夕。产品同学要盯紧竞品,时刻关注用户需求,发现问题要快速定位原因,并高效落地,其实很多想法大家都能想到,关键看谁能快速行动起来。想到了,说出来,做下去。 坚持自己的想法,别让各种信息扰乱你的思路。当我们有严密的论证和数据来支撑我们的想法时,一定要坚持,不要让外人的各种说辞干扰你的判断,在众说纷纭或者褒贬不一的场景下作出自己的决定,不是一件很酷和有成就感的事情吗,要相信自己。 特别鸣谢

    内容产品部 肖楠、刘璞、吴姣灿、于洋

    平台营销设计部 安道旭 田诗琪

    欢迎关注「JellyDesign」的小程序:

  • 接到有损用户体验的设计需求怎么办?高手总结了3个方法!

    UI交互 2022-12-29
    对于体验设计师来说,最常见的棘手问题之一就是:如何平衡「用户体验」和「商业化需求」之间的关系。一位同学就问过我这样的问题:“我所在的公司产品为了冲刺营收,搞了很多营销手段,导致用户体验相关的数据下降了很多。产品经理也不重视用户体验,认为 \'没有用户来投诉’ 就行。

    对于体验设计师来说,最常见的棘手问题之一就是:如何平衡「用户体验」和「商业化需求」之间的关系。一位同学就问过我这样的问题:

    “我所在的公司产品为了冲刺营收,搞了很多营销手段,导致用户体验相关的数据下降了很多。产品经理也不重视用户体验,认为 '没有用户来投诉’ 就行。

    我作为产品的体验设计师,感觉很难去做点什么了。产品的营收确实重要,但这样为了短期目标而忽视 用户体验 的做法是不是不太好?作为设计师应该怎么办呢?”

    其实这样的情况,我这几年在大厂的工作中也没少遇到过。设计师在这时提出的体验问题大多会石沉大海,不被采纳。这就会导致很多 设计师 对工作渐渐丧失“工匠精神”,感到心灰意冷。那么此时应该怎么做呢? 我有三条建议:

    站在业务视角:明确目标 站在用户视角:尽量补救 站在产品视角:做好记录 相关话题的探讨:

    究竟是什么决定用户体验的走向?我总结了6个方面! 随着 4G、5G 的普及,移动互联网进入成熟时期。

    阅读文章 >

    一、站在业务视角:明确目标 很多业务在某些特定的时期,目标并不是“好的体验”,有时“快”比“好”更重要,“能用”比“好用”更有价值。

    有时设计不是万能的,也不是必须的。虽然优质的产品和极致的体验是我们一直在努力追求的目标,但是对于很多产品、业务甚至是公司来说,“好体验”并不能支撑它们活下去。

    如果条件允许,相信没有业务方会抗拒好产品和好设计。他们也并非看不到体验问题,只是这些并不是当前的主要矛盾和首要目标。

    在不以设计为核心的公司和业务中,配合业务完成目标是设计师最基础的本职工作。 此时的体验设计师就需要:

    1. 了解业务需求的目标

    与业务方做深入沟通,站在业务视角,透过现象看本质:一定要搞清楚业务每个需求背后的目标和方向。短期业务目标有时可能会因为某些限制而与用户体验相悖,但长期发展的大方向一定并不矛盾。

    2. 理解业务行动的依据

    就像作为设计师的你有不能减损用户体验的理由一样,业务营销的行为也有其背后的依据和逻辑。也许是这种营销行为在此时此刻更符合用户心理预期;也许是以往经验证明这样的营销手段并不会影响用户与产品的长期关系等等。

    理解业务的显性需求和隐性需求,才会拼凑出完整的需求,你的设计决策也可以以此为据。

    当你手里拿着锤子,看哪里好像都是钉子。设计师是和用户打交道的人,最容易做的就是放大用户体验的价值。因此只有真正理解业务行动的目标和依据之后,才会杜绝偏见,也才能够在业务目标的指引下做出更加恰当的设计决策。

    二、站在用户视角:尽量补救 “考虑用户体验”不是业务方的必修课,而体验设计师作为用户和产品之间的桥梁,就应站在用户视角,尽可能地对方案做补救和优化。设计在这个时候就要起到“托底”的作用。

    如果你想要保住产品的体验质量,不能只做批判和喊口号,还要拿出解决方案和落实方法。在这种业务相对强势的时刻,就更需要你:

    发挥主动沟通和协作的能力; 洞察用户和业务两方的目的和需求; 提供充足有力的设计依据; 评估和利用有限的资源和成本; 统一协调相关方推进进度; 预估可能会遇到的风险和卡点。 设计师的专业能力和价值不是只在大型项目优化中才得以展现,这种紧要节点同样也是你锻炼的机会。在有限的条件为用户体验质量做托底,我们不应该把自己定义为“受压迫者”,而是要做解决棘手问题的“设计军师”。

    很多时候,我们都会感到自己受困于当下的环境中,力不从心,独木难支。但其实不是你没有机会,而是你能看到这个机会背后的层层阻碍,因此下意识的退缩不前或转嫁责任。

    但如果你想要进步,就要把阻碍当成是升级的挑战,迎难而上。最重要的是,要克服自己内心深处的惰性,把抱怨“我不能”转变成思考“我怎样才能”。

    思考如何突破当下的业务困境,本身就是一种专业能力的历练,也是一种设计经验的积累。

    作为用户体验的一道最主要防线,该说的我们一定要去说,该做的我们也要去做。虽然很多时候结果并不是我们能够控制的,但过程往往比结果更有意义。

    三、站在产品视角:做好记录 对于一些成本比较高,在短期内难以优化和迭代的点,如果你有想法和思考,就找个地方记录下来,静待优化落实的机会。未来如果产品有更新迭代,也许就能派上大用场。

    即使最后没有机会优化或落实你的方案,在这个过程中的思考和探索,同样是对你设计能力的培养和锻炼。

    生活中有很多事情并不会给你即时反馈,大多是看不到短期成效和意义的。但是几年之后当你回过头来,就会发现未来的你正是由现在的自己一步步塑造而成。你的每一步路,都不会白走。

    以上,共勉。

    欢迎关注作者微信公众号:「长弓小子」

  • 腾讯出品!移动端3D设计神器Nomad Sculpt入门指南

    UI交互 2022-12-29
    一、序言3D 设计风格已经在越来越多的设计领域被广泛应用,其视觉表现和设计技法,也随着行业发展在不断进化演变着。我们可以发现,今天的 3D 设计已不仅是“立体感”和“真实性”的代名词,三维设计作品,已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对...

    一、序言 3D 设计风格已经在越来越多的设计领域被广泛应用,其视觉表现和设计技法,也随着行业发展在不断进化演变着。我们可以发现,今天的 3D 设计已不仅是“立体感”和“真实性”的代名词,三维设计作品,已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对设计师具有很高的要求,也需要花费很大的精力时间去调试。如果你不是一个专业三维 设计师 ,但却很想涉及这个领域,通常会被各种 3D 软件、渲染器、以及超高的硬件配置等较高门槛而劝退,或是花费很长时间去学习。但是,灵感与创意,本不应该被技术限制所束缚。

    本文将为大家介绍一款基于 iPad 场景而生的三维数字雕刻软件「Nomad Sculpt」。以上作品效果,都可以使用 Noamd 轻松制作出来。让你的 iPad 从此告别“买前生产力,买后爱奇艺”的秘诀,只需一个 iPad + iPencil,结合其轻量、低门槛且易于上手的特性,就能让你的从电脑前的久坐中解放出来,随时随地施展创意,体验“躺平式”建模的快乐。那么,快来跟我一起了解 Nomad,轻松打开三维设计的大门吧。

    更多3D设计神器:

    免费用上手快!快来试试这款 3D 设计神器 MagicaCSG 3D 元素在设计中的应用广泛,之前向大家推荐了很多免费的 3D 素材下载网站,但是实际应用起来还是有局限的。

    阅读文章 >

    二、使用 Nomad Sculpt 制作 3D 设计的优势

    传统 3D 工作流与 Nomad 对比

    传统 3D 工作流对初学者而言是一件成本较高的事情,完成一套完整的作品,需要多个工具串联集合使用。

    而 Nomad 即可以解决一些轻量 3D 诉求,又能确保设计被完美呈现。软件集成硬表面建模、高模精雕、材质及顶点绘制、PBR 实时渲染、后期处理五大核心 3D 工作流于一身,只需一个 App,即可完成一件非常完美的 3D 艺术作品。

    同时,这也是一款对新手非常友好的 App,软件全中文,交互体验十分友好易懂。如果你具备一些 3D 基础,花费 30 分钟熟悉下界面基本就可以开始尝试设计了。随着 iPad 端设计生态丰富,Nomad 很有可能成为未来设计工具的新趋势。

    非常值得一提的是 Nomad 出色的实时渲染,让设计所见即所得,这极大提升了 3D 作品艺术效果调试产出的效率,并且在创作过程也会出现许多随机偶得的惊艳效果。

    三、设计思路:为未来种下一颗“种子” 3D 角色类型的作品,因其非常吸眼球的视觉表现、灵活的设计空间、以及非常适合在其他虚拟场景中跨界联动等优势,而受到设计师和用户的欢迎,正在被虚拟人、IP 形象、手办、游戏等领域广泛应用起来。下面将结合一个三维形象设计案例,分享 Nomad 使用心得。

    从创意诞生到设计执行,一般角色设计流程主要由以下四个步骤组成:主题概念设定、基础角色设计、角色衍生设计、成品预览导出。

    3D 形象设计流程

    STEP 1:主题概念设定

    好 IP 的基础是拥有一个好的世界观。在这个 Case 中,故事由一颗种子展开。借用植物作为核心概念对现实世界进行视觉投射,为未来种下一颗充满幻想的“种子”。植物和我们人类一样,离不开光合作用,离不开水与氧气。成为一颗种子,在春日诞生,在夏日绽放,在秋天成熟,在冬季闪亮。

    根据以上概念,选定 IP 形象是一颗可以随着时间的变化长大的种子,也是对“充满幻想的未来”的隐喻。设定了形象的设计关键词: 软萌/治愈/可进化体

    STEP 2:基础角色设计

    基础形态的设计是后续的讲好故事的基础,角色需要有一定辨识度,“蒜头”作为核心标识元素贯穿始终,所以重点做细节纹理的刻画。模型其他结构尽可能简约处理,可以为后续拓展留出足够空间。基础角色设定是一颗生长在春天的种子,寓意诞生。

    「 诞生」基本形态设计

    通常形象设计一般都需要先手绘 2D 草图再到 3D 软件中建模,但如果你使用 Nomad,其实完全可以跳过手绘草图的步骤,用 iPencil 直接快速在软件中绘制 3D 草图,并且可以使用雕刻工具组用画笔快速自由的调节模型比例细节,手感丝滑,和手绘基本一致的操作方式,体验非常丝滑,且易于调整预览效果。

    ① 黏土式建模和高模精雕

    Nomad 使用“黏土建模”原理,类似一个低门槛版本的 Z-brush,捏泥巴的感觉能让建模的过程令人心生愉悦,使用雕刻工具组配合 iPencil 压感辅助绘制雕刻细节,非常适合对模型进行细节刻画,让 3D 模型有近似游戏感的真实质感和艺术效果,非常适合制作形象类的模型。

    ② Nomad 建模面板

    内置 9 种基本几何体,以及车削、圆管等超好用辅助建模工具。尤其推荐大家体验一下车削和圆管工具,结合 iPencil 可以创造出许多艺术性的效果。

    车削:可以用来制作角色身体和头部等旋转对称形态模型,类似于 C4D 中的旋转工具。点击车削工具后,屏幕中心会出现一根对称线,此时只需用 iPencil 从中心点边缘开始画线,勾勒出角色身体轮廓横截面,软件自动生成立体效果,再基于轮廓调整线条的角度和曲线,就能轻松绘制出角色的身体。

    车削工具制作“角色身体”

    圆管:快速制作犄角/藤蔓/耳朵等管道线类型部件,类似于 C4D 中的放样功能,但操作比 C4D 快捷自然许多。选中工具后,用笔在空白处画出想要的样条造型,然后可以针对每个顶点调整附近点的半径大小,最后可以使用平滑工具对边缘进行打磨,让模型更精致自然。

    圆管工具制作“犄角”

    ③ 支持 OBJ/GLB/STL 等主流 3D 格式导入

    除了黏土建模之外,Nomad 也支持硬表面类型的低面建模需求。但由于软件目前暂不支持针对点线面进行细节调整,所以实测体验下来感受并没有电脑端的 3D 软件那样精准。但软件支持 OBJ/GLB/STL 等主流 3D 格式导入,可以无缝与其他电脑端主流 3D 软件兼容。

    在项目面板中选择导入新文件,可以从外部导入模型再进行编辑

    如果你还是更习惯在 C4D 上建模,或者想对已有的模型进行修改调整,也可以在电脑端建模完毕后,另存为 Nomad 所支持的格式,导入至 Nomad 中进行细节刻画、材质渲染和后期效果的处理。

    ④ 随心所欲的材质上色:基础材质

    Nomad 基础材质编辑非常简单。与其说是材质,更像是在挑选画笔对模型上色。常见的漫射、玻璃、金属、发光等基础材质,都可以通过简单的滑块设置调节,配合 HDR 和的灯光,可以产生不同效果质感,并且可以实时预览颜色效果。

    ⑤ 自由的画笔绘制:3D 手绘

    画笔工具是我认为 Nomad 中最好用的特色功能,设置好基础材质后,只要使用绘画工具,就可以直接把“材质”当做“笔刷”对模型任意表面进行 插画 一样的涂画,支持笔刷导入达到不同的笔触效果,也支持类似 PS 中的图层绘画,所以不用担心画错或者多种样式并行的问题,只需要隐藏和打开图层,就能呈现出材质叠加的惊艳效果。

    绘画工具绘制头部粉色且具有金属材质的呆毛犄角,再用平滑工具打磨可对衔接处自然过渡

    ⑥ 后期处理:

    无需再导入 PS 调色了!Nomad 自带强大的后期处理系统,例如屏幕反射、景深、光效、色调、曲线、晕影、噪点、锐化...这些常用的后期处理功能,都可以用滑块轻松调节,让角色更具真实感。

    Nomad 内置了 Factor、Spacing 等滤镜功能,打开开关后,可以一键把 3D 图像变成像素块风格或者赛博朋克风的扫描线滤镜效果,这些有趣的小功能也印证 Nomad 开发团队也是有意在尝试让软件变得更加未来感。

    到此,基础模型的设计就完成了,预览一下最终效果吧。

    基础角色 360°预览

    STEP 3:角色衍生设计

    我们可以根据角色的性格设计符合其人设的场景丰满角色的世界观。在这里,四季的更替最能体现植物主题的生长状态,基于植物生长的周期,设定四季主题装扮,分别对应 春日诞生、夏季绽放、秋日成熟、冬日恋歌 四个季节更替,由此便生成 4 个装扮,变幻出不同的质感、色彩、状态。

    「 四季系列」同一角色不同装扮质感呈现

    ① PBR 实时渲染:实现独一无二的艺术效果

    我们也可以开始运用 Nomad 中强大的 HDRI 实时渲染来快速生成其他风格的艺术效果了。这是一个奇妙的调试过程,收集 配色 丰富的图片作为 HDRI,赋予模型不同感觉的环境光效,而当下非常流行的奇幻流光玻璃效果,或许就藏在这些 HDRI 中~

    实时预览生成不同的场景氛围感

    *材质捕捉:也可以运用 Nomad 材质捕捉渲染模式,导入不同材质纹理贴图,Nomad 会自动捕捉贴图上的材质赋予模型,结合不同质感的材质球生成更多伪 2D、 卡通渲染、玉石、国风等酷炫效果,只要耐心多尝试搭配,会生成许多意想不到的奇妙艺术效果。

    「 材质捕捉」导入纹理材质贴图一键生成意想不到的艺术效果

    STEP4:360°动画预览导出

    Nomad 目前暂不支持动画设计,但这里也有一个小窍门,我们可以利用软件的旋转展示功能结合 iPad 屏幕录制,导出动态视频模拟 360°旋转动画的效果,同时软件支持调整旋转速率。

    四、其他延伸使用场景 除了上文所述,Nomad 在其他领域也有许多拓展使用场景。感兴趣的同学可以拓展阅读。

    1. AR 虚拟现实联动

    Nomad × Kivicube 快速让你的模型走近现实

    当视频无法加载时请刷新页面, 或前往PC获得最佳体验。

    2. UV 贴图绘制

    与 Procreate 无缝结合制作 UV 贴图: https://www.youtube.com/watch?v=Ym0FBH2vFoI

    3. 日常运营需求高效输出

    除了角色设计之外,由于 Nomad 超轻量和实时渲染的特点,也可以用来快速支持一些轻量的日常运营 3D 需求,无需渲染等待,快速出图,并且这一切都可以在沙发上躺着完成。

    《QQ 看点年度盘点》使用 Nomad 快速输出 H5 运营活动的多个主线场景

    《腾讯看点-星探计划》主 IP 角色“星探”使用 Nomad 设计

    五、结语 以上就是本次为大家分享 Nomad 的一些制作三维设计的思路。虽然没有 C4D、Blender 等主流 3D 软件的功能强大完备,但流畅的实时渲染、强大的数字雕刻、随时随地建模、以及在创作过程中可以产生许多随机性和实验性的视觉效果,都让人欲罢不能。

    在这个效率至上的时代,如何降低设计成本,减少软件复杂的逻辑理解和设备硬件影响,让设计师更专注创意本身,也是我们需要思考和探索的新命题。如果你心动了,就快来解锁“躺平式”建模的新姿势 ,探索 3D 时代的设计乐趣吧!

    欢迎关注作者微信公众号:「腾讯ISUX」

  • 腾讯出品!移动端3D设计神器Nomad Sculpt入门指南

    UI交互 2022-12-29
    一、序言3D 设计风格已经在越来越多的设计领域被广泛应用,其视觉表现和设计技法,也随着行业发展在不断进化演变着。我们可以发现,今天的 3D 设计已不仅是“立体感”和“真实性”的代名词,三维设计作品,已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对...

    一、序言 3D 设计风格已经在越来越多的设计领域被广泛应用,其视觉表现和设计技法,也随着行业发展在不断进化演变着。我们可以发现,今天的 3D 设计已不仅是“立体感”和“真实性”的代名词,三维设计作品,已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对设计师具有很高的要求,也需要花费很大的精力时间去调试。如果你不是一个专业三维 设计师 ,但却很想涉及这个领域,通常会被各种 3D 软件、渲染器、以及超高的硬件配置等较高门槛而劝退,或是花费很长时间去学习。但是,灵感与创意,本不应该被技术限制所束缚。

    本文将为大家介绍一款基于 iPad 场景而生的三维数字雕刻软件「Nomad Sculpt」。以上作品效果,都可以使用 Noamd 轻松制作出来。让你的 iPad 从此告别“买前生产力,买后爱奇艺”的秘诀,只需一个 iPad + iPencil,结合其轻量、低门槛且易于上手的特性,就能让你的从电脑前的久坐中解放出来,随时随地施展创意,体验“躺平式”建模的快乐。那么,快来跟我一起了解 Nomad,轻松打开三维设计的大门吧。

    更多3D设计神器:

    免费用上手快!快来试试这款 3D 设计神器 MagicaCSG 3D 元素在设计中的应用广泛,之前向大家推荐了很多免费的 3D 素材下载网站,但是实际应用起来还是有局限的。

    阅读文章 >

    二、使用 Nomad Sculpt 制作 3D 设计的优势

    传统 3D 工作流与 Nomad 对比

    传统 3D 工作流对初学者而言是一件成本较高的事情,完成一套完整的作品,需要多个工具串联集合使用。

    而 Nomad 即可以解决一些轻量 3D 诉求,又能确保设计被完美呈现。软件集成硬表面建模、高模精雕、材质及顶点绘制、PBR 实时渲染、后期处理五大核心 3D 工作流于一身,只需一个 App,即可完成一件非常完美的 3D 艺术作品。

    同时,这也是一款对新手非常友好的 App,软件全中文,交互体验十分友好易懂。如果你具备一些 3D 基础,花费 30 分钟熟悉下界面基本就可以开始尝试设计了。随着 iPad 端设计生态丰富,Nomad 很有可能成为未来设计工具的新趋势。

    非常值得一提的是 Nomad 出色的实时渲染,让设计所见即所得,这极大提升了 3D 作品艺术效果调试产出的效率,并且在创作过程也会出现许多随机偶得的惊艳效果。

    三、设计思路:为未来种下一颗“种子” 3D 角色类型的作品,因其非常吸眼球的视觉表现、灵活的设计空间、以及非常适合在其他虚拟场景中跨界联动等优势,而受到设计师和用户的欢迎,正在被虚拟人、IP 形象、手办、游戏等领域广泛应用起来。下面将结合一个三维形象设计案例,分享 Nomad 使用心得。

    从创意诞生到设计执行,一般角色设计流程主要由以下四个步骤组成:主题概念设定、基础角色设计、角色衍生设计、成品预览导出。

    3D 形象设计流程

    STEP 1:主题概念设定

    好 IP 的基础是拥有一个好的世界观。在这个 Case 中,故事由一颗种子展开。借用植物作为核心概念对现实世界进行视觉投射,为未来种下一颗充满幻想的“种子”。植物和我们人类一样,离不开光合作用,离不开水与氧气。成为一颗种子,在春日诞生,在夏日绽放,在秋天成熟,在冬季闪亮。

    根据以上概念,选定 IP 形象是一颗可以随着时间的变化长大的种子,也是对“充满幻想的未来”的隐喻。设定了形象的设计关键词: 软萌/治愈/可进化体

    STEP 2:基础角色设计

    基础形态的设计是后续的讲好故事的基础,角色需要有一定辨识度,“蒜头”作为核心标识元素贯穿始终,所以重点做细节纹理的刻画。模型其他结构尽可能简约处理,可以为后续拓展留出足够空间。基础角色设定是一颗生长在春天的种子,寓意诞生。

    「 诞生」基本形态设计

    通常形象设计一般都需要先手绘 2D 草图再到 3D 软件中建模,但如果你使用 Nomad,其实完全可以跳过手绘草图的步骤,用 iPencil 直接快速在软件中绘制 3D 草图,并且可以使用雕刻工具组用画笔快速自由的调节模型比例细节,手感丝滑,和手绘基本一致的操作方式,体验非常丝滑,且易于调整预览效果。

    ① 黏土式建模和高模精雕

    Nomad 使用“黏土建模”原理,类似一个低门槛版本的 Z-brush,捏泥巴的感觉能让建模的过程令人心生愉悦,使用雕刻工具组配合 iPencil 压感辅助绘制雕刻细节,非常适合对模型进行细节刻画,让 3D 模型有近似游戏感的真实质感和艺术效果,非常适合制作形象类的模型。

    ② Nomad 建模面板

    内置 9 种基本几何体,以及车削、圆管等超好用辅助建模工具。尤其推荐大家体验一下车削和圆管工具,结合 iPencil 可以创造出许多艺术性的效果。

    车削:可以用来制作角色身体和头部等旋转对称形态模型,类似于 C4D 中的旋转工具。点击车削工具后,屏幕中心会出现一根对称线,此时只需用 iPencil 从中心点边缘开始画线,勾勒出角色身体轮廓横截面,软件自动生成立体效果,再基于轮廓调整线条的角度和曲线,就能轻松绘制出角色的身体。

    车削工具制作“角色身体”

    圆管:快速制作犄角/藤蔓/耳朵等管道线类型部件,类似于 C4D 中的放样功能,但操作比 C4D 快捷自然许多。选中工具后,用笔在空白处画出想要的样条造型,然后可以针对每个顶点调整附近点的半径大小,最后可以使用平滑工具对边缘进行打磨,让模型更精致自然。

    圆管工具制作“犄角”

    ③ 支持 OBJ/GLB/STL 等主流 3D 格式导入

    除了黏土建模之外,Nomad 也支持硬表面类型的低面建模需求。但由于软件目前暂不支持针对点线面进行细节调整,所以实测体验下来感受并没有电脑端的 3D 软件那样精准。但软件支持 OBJ/GLB/STL 等主流 3D 格式导入,可以无缝与其他电脑端主流 3D 软件兼容。

    在项目面板中选择导入新文件,可以从外部导入模型再进行编辑

    如果你还是更习惯在 C4D 上建模,或者想对已有的模型进行修改调整,也可以在电脑端建模完毕后,另存为 Nomad 所支持的格式,导入至 Nomad 中进行细节刻画、材质渲染和后期效果的处理。

    ④ 随心所欲的材质上色:基础材质

    Nomad 基础材质编辑非常简单。与其说是材质,更像是在挑选画笔对模型上色。常见的漫射、玻璃、金属、发光等基础材质,都可以通过简单的滑块设置调节,配合 HDR 和的灯光,可以产生不同效果质感,并且可以实时预览颜色效果。

    ⑤ 自由的画笔绘制:3D 手绘

    画笔工具是我认为 Nomad 中最好用的特色功能,设置好基础材质后,只要使用绘画工具,就可以直接把“材质”当做“笔刷”对模型任意表面进行 插画 一样的涂画,支持笔刷导入达到不同的笔触效果,也支持类似 PS 中的图层绘画,所以不用担心画错或者多种样式并行的问题,只需要隐藏和打开图层,就能呈现出材质叠加的惊艳效果。

    绘画工具绘制头部粉色且具有金属材质的呆毛犄角,再用平滑工具打磨可对衔接处自然过渡

    ⑥ 后期处理:

    无需再导入 PS 调色了!Nomad 自带强大的后期处理系统,例如屏幕反射、景深、光效、色调、曲线、晕影、噪点、锐化...这些常用的后期处理功能,都可以用滑块轻松调节,让角色更具真实感。

    Nomad 内置了 Factor、Spacing 等滤镜功能,打开开关后,可以一键把 3D 图像变成像素块风格或者赛博朋克风的扫描线滤镜效果,这些有趣的小功能也印证 Nomad 开发团队也是有意在尝试让软件变得更加未来感。

    到此,基础模型的设计就完成了,预览一下最终效果吧。

    基础角色 360°预览

    STEP 3:角色衍生设计

    我们可以根据角色的性格设计符合其人设的场景丰满角色的世界观。在这里,四季的更替最能体现植物主题的生长状态,基于植物生长的周期,设定四季主题装扮,分别对应 春日诞生、夏季绽放、秋日成熟、冬日恋歌 四个季节更替,由此便生成 4 个装扮,变幻出不同的质感、色彩、状态。

    「 四季系列」同一角色不同装扮质感呈现

    ① PBR 实时渲染:实现独一无二的艺术效果

    我们也可以开始运用 Nomad 中强大的 HDRI 实时渲染来快速生成其他风格的艺术效果了。这是一个奇妙的调试过程,收集 配色 丰富的图片作为 HDRI,赋予模型不同感觉的环境光效,而当下非常流行的奇幻流光玻璃效果,或许就藏在这些 HDRI 中~

    实时预览生成不同的场景氛围感

    *材质捕捉:也可以运用 Nomad 材质捕捉渲染模式,导入不同材质纹理贴图,Nomad 会自动捕捉贴图上的材质赋予模型,结合不同质感的材质球生成更多伪 2D、 卡通渲染、玉石、国风等酷炫效果,只要耐心多尝试搭配,会生成许多意想不到的奇妙艺术效果。

    「 材质捕捉」导入纹理材质贴图一键生成意想不到的艺术效果

    STEP4:360°动画预览导出

    Nomad 目前暂不支持动画设计,但这里也有一个小窍门,我们可以利用软件的旋转展示功能结合 iPad 屏幕录制,导出动态视频模拟 360°旋转动画的效果,同时软件支持调整旋转速率。

    四、其他延伸使用场景 除了上文所述,Nomad 在其他领域也有许多拓展使用场景。感兴趣的同学可以拓展阅读。

    1. AR 虚拟现实联动

    Nomad × Kivicube 快速让你的模型走近现实

    当视频无法加载时请刷新页面, 或前往PC获得最佳体验。

    2. UV 贴图绘制

    与 Procreate 无缝结合制作 UV 贴图: https://www.youtube.com/watch?v=Ym0FBH2vFoI

    3. 日常运营需求高效输出

    除了角色设计之外,由于 Nomad 超轻量和实时渲染的特点,也可以用来快速支持一些轻量的日常运营 3D 需求,无需渲染等待,快速出图,并且这一切都可以在沙发上躺着完成。

    《QQ 看点年度盘点》使用 Nomad 快速输出 H5 运营活动的多个主线场景

    《腾讯看点-星探计划》主 IP 角色“星探”使用 Nomad 设计

    五、结语 以上就是本次为大家分享 Nomad 的一些制作三维设计的思路。虽然没有 C4D、Blender 等主流 3D 软件的功能强大完备,但流畅的实时渲染、强大的数字雕刻、随时随地建模、以及在创作过程中可以产生许多随机性和实验性的视觉效果,都让人欲罢不能。

    在这个效率至上的时代,如何降低设计成本,减少软件复杂的逻辑理解和设备硬件影响,让设计师更专注创意本身,也是我们需要思考和探索的新命题。如果你心动了,就快来解锁“躺平式”建模的新姿势 ,探索 3D 时代的设计乐趣吧!

    欢迎关注作者微信公众号:「腾讯ISUX」

  • 如何做好金融类APP设计?我梳理了9个要素!

    UI交互 2022-12-29
    前言对于金融类 App,设计流行趋势是什么?如何在设计中更好地体现银行的企业理念和品牌特色?如何提高金融类产品的用户体验?

    前言

    对于金融类 App,设计流行趋势是什么?如何在设计中更好地体现银行的企业理念和品牌特色?如何提高金融类产品的用户体验?本文总结了九大设计要素,帮助你理解金融类 App 的 UI 设计。

    更多金融类产品的总结:

    15000字深度解析!银行金融APP的适老化设计指南 引言 任月月:据调查,中国人口老龄化程度在全球已处于中上水平。

    阅读文章 >

    一、色彩 在色彩心理学中,蓝色、绿色等冷色调,给人以冷静、稳定的感觉,体现了金融产品的科技感和可靠性。而红色、橙色、黄色,代表活力热情,也会像五星红旗带给我们的民族自豪感,可以用于金融产品要传达给用户的情感色彩。

    1. 品牌色

    一般 app 的整体色调,都会根据品牌色来设计,像下图的「招行企业银行」的首页,品牌色很好地应用在图标、按钮、文字链接、卡片背景、banner 这些地方。在界面设计中通过加入更多的品牌元素,可以潜移默化地让用户感受企业的价值,传达企业对用户负责的态度,提升用户对产品乃至企业的信任感。

    2. 弥散渐变色

    其次,也可以采用近两年流行的弥散渐变风格。弥散渐变是一种轻量舒缓的设计色彩。如果想要强化顶部导航栏或者个人中心页面顶部的视觉感,利用品牌色作为背景颜色,会显得顶部视觉厚重;如果利用白色或者浅灰色做背景色,而显得单薄。

    我们来看下图,用弥散渐变处理的方式做页面背景色或者在白色卡片的边缘位置强化色彩,不仅可以丰富视觉表现力,还可以和卡片内容相呼应。所以不妨试下这种十分干净清爽的新设计方式。

    更多渐变形式:

    用80张案例,帮你掌握20种渐变色表现形式! hi,我是鱼先生,终身学习践行者。

    阅读文章 >

    二、文字 界面中另一个重要的构成元素是文字,文字向用户传达信息,合理的使用文字样式非常重要。在金融界面中,我们常常用粗细体、字体大小、文字颜色深浅等来拉开文字层级,增强内容的可识别度。像 iOS15 设计风格,大标题导航也是这个道理。

    另外,定制字体的使用,也十分流行。这几年越来越多的公司,开始定制字体,根据自己的品牌特质去做一些特殊的字体。比如下图的「支付宝」,这些金融数据的数字,采用特殊字体的方式来设计,视觉效果更佳。

    三、图标 图标作为功能入口、用户的操作载体,图标的设计也可以为界面添彩。目前市面上,金融类 App 的图标设计风格,主要分为以下三大类:

    1. 线性图标

    轻质简约,大多数 App 都采用这类风格。如下图的「宁波银行」的金刚区图标设计,外部深色线框加内部彩色线条(品牌色橙色+对比色蓝色+邻近色黄色)点缀。

    2. 面性图标

    颜色搭配丰富,视觉冲击力强,页面效果更加生动,常用于重要功能图标的设计。下图「京东云企业管家」首页的功能图标设计,面性图标+毛玻璃质感,图标更有质感和层次感。

    3. 线面结合

    新型的图标流行趋势,线高度概括图标的含义,面装饰点缀,风格独特出彩。下图是「涨乐财富通」的图标设计,黑色线性边框+红色内部线条+渐变红色圆形点缀。

    四、布局 1. 留白

    对于布局,除了基础的信息功能框架,留白是关键。我们在工作中可以发现,很多高级感的设计通常都具有大片的留白。太过紧密的间距、没有明显的区分隔断、复杂的背景,都会大大降低用户的使用感。留白设计能使整个页面不至于太过抢眼,可以给予设计呼吸的空间,让用户快速找到所需要的信息。

    2. 圆角卡片

    此外,圆角卡片的使用,也是布局流行趋势之一,圆角会更突显矩形内的内容,有助于用户将视线聚焦于内容本身。大圆角有轻松活泼的感觉,小圆角、直角更像是一种强调,表现得严肃庄重,给人一种信任感。对于金融类 app 来讲,该使用多大的圆角,是根据整个 app 的调性来定的。

    比如「招行企业银行」,因为是 B 端产品,整体的调性是专业、安全,加上其 logo 的内置图形是招商银行的品牌 logo“M”图形,有棱有角的。所以在整个 App 的界面设计中,采用的是小圆角卡片,小圆角图标等等。

    五、插画 无论在界面设计,还是在品牌营销中,很多场景都需要插画来塑造产品的气质和氛围。插画有助于将我们的品牌故事讲给用户听。这两年流行的插画风格多种多样,那什么风格会更适合应用在金融类 App 的设计中呢?

    1. 几何插画

    一般几何图形多为产品界面和宣传内容的抽象,线条和几何色块的结合,搭建出用户实际使用场景,更加简洁、清晰。下图为「中信银行」首页,banner 就是采用几何图形插画设计风格,绘制了一幅居家悠闲的画面,挺符合中信银行的定位:“有温度的银行”“信守温度”。

    2. 轻拟物插画

    在一些快速入口图标,或者重要的卡片中,会采用轻拟物插画设计来重点突出要素。下图为「广发银行」发现精彩 app 的头条页面,就嵌入了轻拟物插画,强化了这个卡片内容的色彩感和层次感。

    3. 2.5d 插画

    2.5d 立体的造型,本身更有真实感,在界面设计中可以吸引用户更细致的欣赏。下图为「京东云企业管家」的首页,新人福利模块就采用了 2.5d 插画风格。

    六、品牌 IP 疫情第 3 年,隔离使得人们对于图片所呈现出的故事和情感,有着更为强烈的情绪反应。在 App 界面设计中,越来越多的应用了情感化设计,来赋予产品一种拟人化的情感,与用户互动,让用户感受产品的温度。那相比于品牌或者 Slogan,品牌 IP 更具备这种实力。

    比如广发银行的“小发羊”。「广发银行」是一家广州起源的银行,小发羊融入了广州本地人的性格属性(慢性子、爱吃、精打细算、很师奶),同时也匹配了银行业务本身的需求。在 app 的界面设计中,小发羊应用在了启动页的设计、广告设计以及养成类社交游戏和 IP 周边品牌馆,让用户从业务和日常生活都离不开。

    七、微交互动效 UI 设计中通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪、取悦用户,让用户的认知过程更为自然,用户体验更加精致到位。是一个很好塑造品牌个性的机会。

    比如「平安数字口袋」app,上图中的金融页面的金融小工具模块和顶部的投资 icon,作为重点功能入口采用了动态图标微交互设计,吸引用户眼球,辅助用户理解。

    八、数据可视化 大数据时代,数据的展示是必不可少的,所以在金融、理财、账户管理等页面上,借助图形化手段,更加清晰有效的传达信息。

    上方左图是中国农业银行基金经理信息的页面,右图是招商银行的。左图只能粗略感知到这个基金经理的盈利能力,右图中可以对基金经理的投资风格一定了解。大片文字和图文结合两种方式相对比,数据可视化的优势一目了然。

    九、组件化、模块化 组件化是利用原子系统从原子、分子、组织、模版、页面来快速搭建页面,让设计语言标准化体系化。

    模块化是在组件化的基础上,将产品分成几个模块,通过模块的组合配置,就可以创建不用需求的产品,满足客户的定制需求。

    下图是我们兆日的设计体系部分截图,我们的设计团队构建了全面的设计组件库,同时对接开发,一一对应实现 UI 控件。这样设计更新迭代中可以非常高效通过更新组件库去整体更新所有页面样式,方便协同办公提升效能的同时,保证全渠道体验一致性。

    写在最后 近两年来接触了大大小小几个银行项目,无论是 0 到 1 设计,还是改版设计都有一定的收获和感悟。希望本次对金融类 App 设计的复盘能给大家提供一点思路,让产品越来越好。同时也欢迎各位小伙伴来共同探讨与指正~

    欢迎关注团队微信公众号:兆日 UCD

  • 大厂实战!京东内容助手从想法到落地的完整设计复盘

    UI交互 2022-12-29
    本文主要讲述了作者作为京东内容助手 APP 产品一号位以来,从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考,为读者朋友们提供参考和建议。往期京东案例回顾:大厂案例实战!京东微信购物2022年改版深度解读今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行...

    本文主要讲述了作者作为京东内容助手 APP 产品一号位以来,从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考,为读者朋友们提供参考和建议。

    往期京东案例回顾:

    大厂案例实战!京东微信购物2022年改版深度解读 今年以来,京东购物小程序围绕“一键发现 万物好店”的产品心智,从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。

    阅读文章 >

    一、为啥要写这个文章 在正式开始叙事内容助手产品故事之前,作者想先讲讲自己在京东内容做产品的故事,我是从 2019 年 5 月加入京东的,2019 年 10 月开始做京东直播产品,期间历经前台频道、直播间、M 页、小程序和部分后台,然后横向转做京东视频、话题产品,基本上大半个京东内容的产品线我都当过产品,经历多,做的产品需求就多,期间遇到的问题和踩过的坑也就多,工作中的精彩案例和经典天坑,也许我写出来后能给大家带来些启发:

    每一个庞大完整的系统都是一步步成长起来的,里面每一个看似奇怪的设计或功能,背后可能都是一个让你忍不住骂出声的教训。 有些前人犯过的错误,后面依然重复出现,不断有新人掉入同样的坑。 基于此,我想把内容助手从想法到落地实现的故事都写出来。

    二、为什么是内容助手 其实一开始,我们并没有想做一个完整的移动端内容创作平台,仅仅设想对标淘宝主播 APP,在手机端拥有一款京东内容自己掌握的、可以开播的 APP 就行。当时,新版主播操控台日趋成熟,移动端缺乏主播开播工具,而淘宝方面在移动端深耕已久。于是,产品同学们一合计,决定落地这么一个产品,取名叫“京东直播”APP。

    对外调研时,我们发现淘宝主播 APP 其实只有主播端能力,是个工具 APP 的定位,同时其又有专注做 C 端的淘宝直播 APP,大家想着可以将两类功能做在一个 APP 上,根据账号类型进行功能区分,这样就能实现一个 APP 既有 C 端又有 B 端的功能。

    移动端、可开播、看直播、能下单,这就是内容助手前身的定位雏形。基于京东一贯高效落地的传统,我们着手推进。就好比你打算修一栋房子,预算、工期、图纸、施工团队等都得挨个聊好。这里我们继续秉着“不重复造轮子”的原则,不断寻求合作方支持共建,比如登录注册、黄金流程、消息通知、客诉系统等。强调一下,第一次独立 0-1 做 APP,有一个靠谱的版本经理很重要,他能将 APP 从写 PRD 到最终应用市场上线的每个环节的注意事项跟你梳理清楚,避免不必要的坑。

    预期总是美好的,就像你在追女神时总是把结果想的很美好一样,你在追一个你想象中的人,而不是真实的她本身。做 APP 也一样,千万不要以为所有佐料都备好,就等着一锅烩了。变化总是随时出现,不变的是变化本身,要学会拥抱变化。高层得知我们在做一个类似于淘宝主播+淘宝直播的 APP 后,认为我们应该将注意力更多地放在 B 端生态建设上,C 端功能集中在京东 APP 其实足够了。于是乎,京东直播 APP 迎来了第一次定位大调整,也迎来了它的重命名—— 京东内容助手 应运而生,专注做 B 端直播、视频、图文内容生产,是它的第二次定位。

    三、从登录说起­­:不要想当然 “这是哪个傻 X 产品做的登录功能”,第一版 APP 上线不到两星期,作者就在客诉后台看到了用户的负面吐槽。内容助手 1.0.0 版本,我们直接接入了京东登录团队大而全的登录功能,包括:手机号一键登录、微信登录、手机验证码登录、账号密码登录、京东 APP 联合登录。这里有一个细节一定要说一下,登录功能我们整体复制照搬的京东 APP,我们想当然地认为给用户最快最省事的登录方式,就是最好的,结果招来谩骂。作者后来仔细了解了用户的登录场景,很多主播或达人都习惯在 PC 端使用达人账号密码来进行登录,并且使用的账号都不是跟自己常用手机号绑定的,或者说主播/达人有多个手机号,当在内容助手 APP 用手机号一键登录的时候,就会登录成它自有手机号的达人账号,影响其使用。

    作者记得当时还和我们另一位产品同事讨论过登录问题,其实当时我很坚持让视觉把登录做成默认的传统账号密码输入框的形式,并提供其他登录方式的切换选择,理由是 PC 端用户习惯了。当时那位产品同事给的意见是“现在市面上都是一键登录搞定,为什么还要做那么复杂的输入功能,对用户也不友好,一键登录多省事”,有些后悔当时自己没有坚持自己的选择。所以,有时候立场坚定一点也不是坏事。

    当初作者作为内容助手的产品一号位主导了整体的框架设计,不同的产品同学分别负责直播、视频、单品三大内容素材创作端的产品工作,各自在 产品设计 上积累不少经验教训。

    四、直播:要在 PC 基础上做减法,但不要强制替用户做决定 内容助手在做主播端功能的时候,一贯秉持的原则就是:在满足需求的同时尽可能地把功能做到最简洁。与其他需求都是从 PC 主播操控台简化搬运到内容助手不同的是,创建直播间时支持一键复制直播间是在移动端的首创,极大方便了那些想要快速建好直播间而又不想每次去下载直播封面图,重新编辑文字的主播。负责主播端的产品同学在研究创建直播间的行为中发现,大部分主播都是日常使用同一张直播封面图,因为重新制图成本很高,直播间标题和简介也都是复用,基本就是把原直播间的开播时间修改下就创建了,这个时候要是能有一个像行云平台一键复制需求的功能来一键创建直播间,就完美了,因此该功能应运而生,上线后主播反馈效果不错,甚至可以夸张一点地说,尤其是那些想多开播作弊的主播用得更是勤快。

    相比于一键复制创建直播间,主播在内容助手开播时,摄像头的镜像问题算是一个槽点。当时负责直播创作的同事在观察了许多主播的直播视频后,发现他们在介绍商品时,镜头都会给比较多的商品特写,为保证他们在用内容助手开播时,商品能清晰正向地展示在观众面前,产品同学默认将特写画面进行了镜像翻转,保证商品特写画面始终正向展示在观众面前。虽然产品同学的出发点是好的,但是该功能上线后却遭到了非常多投诉,主播们认为强制给直播画面进行镜像对称,严重干扰了他们的直播,造成了直播质量的下降。后来,产品同学将是否镜像对称的选择权交还了主播。我们不能替用户做决定,更不能强制替他们做决定。

    五、视频:素材审核状态是一个大需求,产品应深入审核逻辑的制定 视频创作上线一年之后,我们在客诉中发现,较多客诉一直在反映内容助手发布视频素材的审核状态和 PC 端不一致,具体表现为找不到之前的草稿,PC 端发布的草稿类视频,移动端找不到,为解决此问题,作者进行了视频审核状态的全流程梳理,结果发现历史积弊挺严重。一个素材的审核状态由两个字段决定,公域审核和私域审核两个字段共同决定该素材给用户展示成什么状态,另外,由于移动端发布视频交互流程和 PC 的不同,省去了草稿展示一步,导致了上文所说的很多用户投诉看不到 PC 端发布草稿的问题。作者经过对审核状态的对照梳理,并对照 PC 端的展示状态进行了对齐,同时,补充了投稿到公域的视频,但公域被拒审,仅私域通过的优化建议提示,解决了客诉问题。

    除此以外,一些在外人们看来不知道怎么定的指标,其实也是产品和研发同学们通过实验最终反复敲定的。如视频上传时长限制为 60s,是为了兼顾视频发布效率和用户体验,一方面尽可能地支持创作者能发布长一点的视频,另一方面又不想创作者在视频发布时等待太久,因此,结合京东发布的视频素材真实时长和实际发布体验,作者将内容助手视频素材的上传时长限制为 60s。

    六、单品:不要为了做而做 产品同学自我批评,犯了主观主义的错误,当初考虑到内容助手已有直播和视频两类素材的创作能力,想着图文在移动端也得有,也没细致调研,大致问了下图文业务,自己想了想:“长图文相对依赖 PC 端的文本编辑,发布数量也少,单品类素材文字少,创作门槛低,日均生产量也不少,就把单品创作加到移动端上吧。”作者依葫芦画瓢给加上了,结果上线后日均生产几十篇,惨不忍睹,着实有些难堪。经过复盘,作者总结出失败原因:单品素材对商品图片的品质要求非常高,图片全部要抠成多张精致的白底图,做图是移动端最高的成本,达人在 PC 用 Photoshop 简单抠图就能制作完成发出去,无需先 PC 做图,再手机发布,多此一举。后续如想提高移动端单品发布数量,需要继续完善手机端一键抠白底图的功能,只有突破此瓶颈,单品创作才有救。因此,主观主义害死人,做事情还是要提前做好周密而细致的调研,没有调研就没有发言权。

    七、选品工具:APP 设计要扔下历史包袱 电商环境下,不管是直播、视频还是单品素材,至少在京东这个内容生态体系下,创作者在创作前都绕不开商品选择这个过程。为了让创作者能在手机端高效完成选品,作者决定将选品工具从 PC 端搬运到内容助手。当作者踌躇满志地拿出设计好的方案进行评审时:官方推荐菜单去掉一级商品池,直接展示二级商品池及其商品,商品排行增加更多筛选项,商品搜索框支持全局搜索。研发同学直接一盆冷水浇过来“这个功能和 PC 端是保持一致的,接口都是同一套服务,如果拆开来做的话,时间会很久”,为了首先解决有无的问题,作者在和研发一番唇枪舌剑后选择暂时妥协,利用现有底层能力把选品工具的皮先搭起来,满足能用。不过,这个妥协的用户体验代价有些高,尤其是官方选品池的一二级商品池部分,很多账号登进去都会发现空的商品池,体验属实糟糕。为了能稍微好看下,作者将默认定位的顶部 Tab,改为了商品排行,不至于让用户一进来就看到空的选品池。这个问题只有等后续和内容开放平台一同将选品工具进行整体重构后解决。

    除了上述底层逻辑的改不动而外,不同内容素材在创作前使用选品工具的出发点和方式都是略有区别的,比如:直播更多是提前谈好了合作的商品清单,商家直接给 Excel,主播将表格上传操控台即可完成选品,而视频和单品类素材就需要一个个去筛选,哪些商品是新品,哪些佣金高,哪些相关的素材还比较少的等,因此选品工具在符合通用标准的情况下,还需要有针对性地照顾不同素材的选品场景。

    八、隐私合规:一个经常闪现但又不得不做的事情

    每逢重大时间节点或年中年底,工信部或网信办一般会有 APP 隐私整改的通知下发,并且总会在需求非常繁多的时间给出一个截止日期,要求在此之前完成全部合规整改。一般包含以下几项:

    1. 内容助手隐私政策文本修订

    每一次整改一般都要求对《京东内容助手隐私政策》文本进行调整,主要集中在:

    (1)APP 的核心功能及实现核心功能所需要采集的信息描述,如:当您注册、登录京东内容助手时,您需要像我们提供您准备使用的京东账号名、密码、您本人的手机号码,收集这些信息是为了帮助您完成注册。

    (2)APP 集成的第三方 SDK 清单的修订:新采集了哪些个人信息的字段,新增加了哪些 SDK,什么场景下采集用户的哪些个人信息,采集信息的频次是多少。需要根据研发排查的实际情况,对文本进行更新。

    (3)APP 请求用户的系统权限的整理:APP 在使用什么功能时需要用到用户手机的哪些权限,都需要列举清楚,不能存在“等”模糊字样,如:为了给用户提供创作视频的能力,用户在使用内容助手拍摄视频时,APP 需要请求用户手机的摄像头和麦克风权限。

    (4)隐私问题投诉渠道的创建和维护:需要创建一个供用户投诉隐私问题的邮箱、电话、收信地址。

    2. 用户个人信息收集情况的排查和整改

    (1)用户同意隐私协议之前,APP 不能存在任何采集用户“个人信息”的行为:这一条是隐私整改的红线,一旦发现必须立即整改,否则轻则被应用市场下架,重则被工信部或网信办通报批评,影响公司声誉。

    (2)APP 不能出现频繁自启动的行为。

    (3)有没有频繁请求手机权限,比如:麦克风、摄像头、地理位置权限等;APP 是否在用户拒绝开启权限后,频繁提示用户开启;APP 是否在用户不开启某些权限后,拒绝提供正常服务的情况。

    (4)用户不同意隐私协议后,按相关部门要求,仍然需要能使用 APP 的基础服务,不能直接退出 APP。

    (5)APP 需要有直接注销账号的渠道,且注销后不能影响该账号在京东其他 APP 的使用。

    九、发版工作:一个产品经理是如何既当产品又当项目的 1. 版本节奏

    作者作为内容助手产品一号位,在 APP 正式上线运营后,兼顾起了版本经理的角色,工作上不仅需要规划 APP 未来的功能方向,还需要制定出具体的版本节奏,由于第一年上线以来,直播、视频等基础功能的建设需要经常发版,我们与研发、测试商议后确定每三周发一版,每次集成后,2-3 天线上回归时间,回归报告输出后分别提审 IOS 和安卓应用市场。这里有个小插曲,安卓端除了各大知名手机品牌的应用商店以外,属腾讯的应用宝算比较大的了,由于京东在 360 主体下没有全部完备的证件,腾讯又不承认公司签署的关联证明,因此京东内容助手在安卓端的发布只能放弃应用宝这块阵地,仅仅发到了百度、小米、华为、OPPO 四个应用商店。

    2. 提审资质

    应用市场提审必备的证件说明,这一段算是应用发版的干活,一个新的 APP 要想成功上架到手机应用市场,必须要遵循应用市场的证照要求,一般苹果应用商店是自己独立的一份要求,安卓各个应用商店之间要求比较趋同。这里我就以安卓小米应用商店为例:(1)应用商店注册账号公司主体营业执照(加盖公章);(2)APP 主体公司营业执照(加盖公章):(3)应用商店注册账号公司主体与 APP 主体公司的关联证明(加盖双方公司公章);(4)ICP 备案截图(加盖公章);(5)计算机软件著作等级证书。如果发布的 APP 还存在特殊的行业背景,需要按照要求补充对应资质,如 APP 涉及医疗经营资质的,需要补充其公司主体的证照。除公司主体层面的证照以外,部分安卓应用市场要求 APP 具备计算机软件著作登记证书,也就是 APP 在第一次发版之前,需要具备电子版的知识产权,这个联系我司的法律合规与知识产权部-知识产权组的对接同事按照要求完成申请即可,重点需要让客户端研发把全部源代码进行整理并形成文档,作为原材料提交审核。

    3. 上线公告

    每一次重大功能的更新,都需要广而告之,尤其是我们的使用方。因此,让视觉同学输出一份精美的公告图片必不可少,产品同学一方面需要发布公告邮件告知运营和事业部同学,另一方面需要督促对接运营一号位同学在微信公众号发布上线通知,广泛触达内容达人们。另外,每次 APP 发版后,需要及时配置 APP 内的更新弹窗,引导老用户们更新、尝鲜新的功能。

    结语 前面说了很多内容助手的产品,最后,作者也来说说自己吧。相较于其他平台,在电商做产品,我们受不同业务影响的因素可能会更多,尤其是京东 APP 前台的一些强运营属性的模块。与之相比,京东内容助手算是一块产品同学可以较多自主规划和发挥的自留地了,产品同学可以自主规划并落地很多功能。做了一年多的内容助手主产品,作者自己总结了一些针对个人工作和成长的想法,也在这里给大家分享一下:

    要想向大目标走去,就得从小目标开始。没有十全十美的产品,都是从小处着手,一步步迭代出来,甚至是被用户边骂边改出来的。 一万年太久,只争朝夕。产品同学要盯紧竞品,时刻关注用户需求,发现问题要快速定位原因,并高效落地,其实很多想法大家都能想到,关键看谁能快速行动起来。想到了,说出来,做下去。 坚持自己的想法,别让各种信息扰乱你的思路。当我们有严密的论证和数据来支撑我们的想法时,一定要坚持,不要让外人的各种说辞干扰你的判断,在众说纷纭或者褒贬不一的场景下作出自己的决定,不是一件很酷和有成就感的事情吗,要相信自己。 特别鸣谢

    内容产品部 肖楠、刘璞、吴姣灿、于洋

    平台营销设计部 安道旭 田诗琪

    欢迎关注「JellyDesign」的小程序:


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