路径 效果 文字 大家好，这里是和你们聊设计的花生。今天继续为大家带来 5 个实用的 AI 操作小技巧~上期回顾：学会这5个Ai小技巧，帮你快速提升操作效率！大家好，这里是和你们聊设计的花生~之前和大家分享了 4 期提升 Ai 文本排版效率的小技巧，很多小伙伴都说非常实用。阅读文章 > 一、批量修改同属性元素在 Ai 中我们有时需要批量修改某种的元素，那么如何快速选中在不同位置但具有相同属性的元素呢？非常简单，选择众多相同元素中的一个，点击顶部菜单栏的「选择-相同」，会有十几个选项可供选择，选择其中符合要求（比如“填色和描边”），就能将所有填色与描边与目标选项相同的选项同时选中，然后修改即可。这种方法也可以用来选择文本和符号等内容。二、快速重复变换在 Ai 中按住 Alt 键移动可以快速复制出同一个图形，此时如果按 Ctrl+D 键，可以快速重复这一操作，且复制出来的图形都是等距的。我们可以用这一方式快速制作重复图形或文字条。三、保留路径查找的可编辑性“路径查找器”是我们在 Ai 中常用的一项功能，觉得执行效果不好需要撤销重做。其实有一个方法可以让对象在执行路径查找后仍然保持可编辑性：在选中对象后，按住 Alt 键后再去点击路径查找器中的选项，这样选中的元素之间的位置仍然可以调整。点击“路径查找器”面板中的“拓展”结束这种可编辑状态。四、清除模糊效果的边框在 Ai 里给对象添加模糊效果时，会发现模糊效果像是被一个隐形的方框截断了，非常突兀。出现这种问题的解决办法为，在添加模糊效果之前，选择顶部菜单栏的「效果-文档栅格效果设置」，在弹出的窗口内将“选项”里的环绕对象数值适当调大一些（不能过大，可按实际情况调整），之后再添加模糊效果时，原本的方框就会消失了。五、路径文字的多重效果使用“路径文字”工具可以让文字按照特定的形状进行排列，而除了默认的文字效果外，我们还可以选中编辑好的路径文字，点击顶部菜单栏中“文字-路径文字”，选择倾斜、3D 带状、阶梯扥更多文字效果。好啦以上就是为大家推荐的 5 个冷门但实用的 Ai 小技巧，大家看完后有没有 Get 新技能呢？ 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：掌握这5个Ai小技巧，帮你快速提升文字排版效率（二）大家好我是和你们聊设计的花生。阅读文章 > 这5款工具，让设计师工作效率提升 200%！（十一）大家好，这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具，分享给大家，本期推荐的 5 个神器分别是： 打开即用！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-ai-tips-6
用户 图标 品牌 前言对于金融类 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本篇来源：优设网原文地址：https://www.uisdc.com/financial-app-design-elements
业务 用户 站在 对于体验设计师来说，最常见的棘手问题之一就是：如何平衡「用户体验」和「商业化需求」之间的关系。一位同学就问过我这样的问题：“我所在的公司产品为了冲刺营收，搞了很多营销手段，导致用户体验相关的数据下降了很多。产品经理也不重视用户体验，认为 ‘没有用户来投诉’ 就行。我作为产品的体验设计师，感觉很难去做点什么了。产品的营收确实重要，但这样为了短期目标而忽视用户体验的做法是不是不太好？作为设计师应该怎么办呢？”其实这样的情况，我这几年在大厂的工作中也没少遇到过。设计师在这时提出的体验问题大多会石沉大海，不被采纳。这就会导致很多设计师对工作渐渐丧失“工匠精神”，感到心灰意冷。那么此时应该怎么做呢？ 我有三条建议：站在业务视角：明确目标站在用户视角：尽量补救站在产品视角：做好记录相关话题的探讨：究竟是什么决定用户体验的走向？我总结了6个方面！随着 4G、5G 的普及，移动互联网进入成熟时期。阅读文章 > 一、站在业务视角：明确目标很多业务在某些特定的时期，目标并不是“好的体验”，有时“快”比“好”更重要，“能用”比“好用”更有价值。有时设计不是万能的，也不是必须的。虽然优质的产品和极致的体验是我们一直在努力追求的目标，但是对于很多产品、业务甚至是公司来说，“好体验”并不能支撑它们活下去。如果条件允许，相信没有业务方会抗拒好产品和好设计。他们也并非看不到体验问题，只是这些并不是当前的主要矛盾和首要目标。在不以设计为核心的公司和业务中，配合业务完成目标是设计师最基础的本职工作。 此时的体验设计师就需要：1. 了解业务需求的目标与业务方做深入沟通，站在业务视角，透过现象看本质：一定要搞清楚业务每个需求背后的目标和方向。短期业务目标有时可能会因为某些限制而与用户体验相悖，但长期发展的大方向一定并不矛盾。2. 理解业务行动的依据就像作为设计师的你有不能减损用户体验的理由一样，业务营销的行为也有其背后的依据和逻辑。也许是这种营销行为在此时此刻更符合用户心理预期；也许是以往经验证明这样的营销手段并不会影响用户与产品的长期关系等等。理解业务的显性需求和隐性需求，才会拼凑出完整的需求，你的设计决策也可以以此为据。当你手里拿着锤子，看哪里好像都是钉子。设计师是和用户打交道的人，最容易做的就是放大用户体验的价值。因此只有真正理解业务行动的目标和依据之后，才会杜绝偏见，也才能够在业务目标的指引下做出更加恰当的设计决策。二、站在用户视角：尽量补救“考虑用户体验”不是业务方的必修课，而体验设计师作为用户和产品之间的桥梁，就应站在用户视角，尽可能地对方案做补救和优化。设计在这个时候就要起到“托底”的作用。如果你想要保住产品的体验质量，不能只做批判和喊口号，还要拿出解决方案和落实方法。在这种业务相对强势的时刻，就更需要你：发挥主动沟通和协作的能力；洞察用户和业务两方的目的和需求；提供充足有力的设计依据；评估和利用有限的资源和成本；统一协调相关方推进进度；预估可能会遇到的风险和卡点。设计师的专业能力和价值不是只在大型项目优化中才得以展现，这种紧要节点同样也是你锻炼的机会。在有限的条件为用户体验质量做托底，我们不应该把自己定义为“受压迫者”，而是要做解决棘手问题的“设计军师”。很多时候，我们都会感到自己受困于当下的环境中，力不从心，独木难支。但其实不是你没有机会，而是你能看到这个机会背后的层层阻碍，因此下意识的退缩不前或转嫁责任。但如果你想要进步，就要把阻碍当成是升级的挑战，迎难而上。最重要的是，要克服自己内心深处的惰性，把抱怨“我不能”转变成思考“我怎样才能”。思考如何突破当下的业务困境，本身就是一种专业能力的历练，也是一种设计经验的积累。作为用户体验的一道最主要防线，该说的我们一定要去说，该做的我们也要去做。虽然很多时候结果并不是我们能够控制的，但过程往往比结果更有意义。三、站在产品视角：做好记录对于一些成本比较高，在短期内难以优化和迭代的点，如果你有想法和思考，就找个地方记录下来，静待优化落实的机会。未来如果产品有更新迭代，也许就能派上大用场。即使最后没有机会优化或落实你的方案，在这个过程中的思考和探索，同样是对你设计能力的培养和锻炼。生活中有很多事情并不会给你即时反馈，大多是看不到短期成效和意义的。但是几年之后当你回过头来，就会发现未来的你正是由现在的自己一步步塑造而成。你的每一步路，都不会白走。以上，共勉。欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/balance-experiences-and-needs
内容 京东 助手 本文主要讲述了作者作为京东内容助手 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」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-content-authoring-assistant
建模 效果 材质 一、序言3D 设计风格已经在越来越多的设计领域被广泛应用，其视觉表现和设计技法，也随着行业发展在不断进化演变着。我们可以发现，今天的 3D 设计已不仅是“立体感”和“真实性”的代名词，三维设计作品，已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对设计师具有很高的要求，也需要花费很大的精力时间去调试。如果你不是一个专业三维设计师，但却很想涉及这个领域，通常会被各种 3D 软件、渲染器、以及超高的硬件配置等较高门槛而劝退，或是花费很长时间去学习。但是，灵感与创意，本不应该被技术限制所束缚。本文将为大家介绍一款基于 iPad 场景而生的三维数字雕刻软件「Nomad Sculpt」。以上作品效果，都可以使用 Noamd 轻松制作出来。让你的 iPad 从此告别“买前生产力，买后爱奇艺”的秘诀，只需一个 iPad + iPencil，结合其轻量、低门槛且易于上手的特性，就能让你的从电脑前的久坐中解放出来，随时随地施展创意，体验“躺平式”建模的快乐。那么，快来跟我一起了解 Nomad，轻松打开三维设计的大门吧。更多3D设计神器：免费用上手快！快来试试这款 3D 设计神器 MagicaCSG3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 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 快速让你的模型走近现实 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。2. UV 贴图绘制与 Procreate 无缝结合制作 UV 贴图：https://www.youtube.com/watch?v=Ym0FBH2vFoI3. 日常运营需求高效输出除了角色设计之外，由于 Nomad 超轻量和实时渲染的特点，也可以用来快速支持一些轻量的日常运营 3D 需求，无需渲染等待，快速出图，并且这一切都可以在沙发上躺着完成。《QQ 看点年度盘点》使用 Nomad 快速输出 H5 运营活动的多个主线场景《腾讯看点-星探计划》主 IP 角色“星探”使用 Nomad 设计五、结语以上就是本次为大家分享 Nomad 的一些制作三维设计的思路。虽然没有 C4D、Blender 等主流 3D 软件的功能强大完备，但流畅的实时渲染、强大的数字雕刻、随时随地建模、以及在创作过程中可以产生许多随机性和实验性的视觉效果，都让人欲罢不能。在这个效率至上的时代，如何降低设计成本，减少软件复杂的逻辑理解和设备硬件影响，让设计师更专注创意本身，也是我们需要思考和探索的新命题。如果你心动了，就快来解锁“躺平式”建模的新姿势 ，探索 3D 时代的设计乐趣吧！欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/nomad-sculpt
用户界面 高科技 实体 原文引自 Jonathan Kendler 的文章《The forgotten benefits of “low tech” user interfaces》。该译文并非完整原文，内容已做删减和调整。更新、更快、更强，设计师往往对新科技趋之若鹜。但有了新科技，用户体验就一定会更好吗？有时候，看似过时的技术也可以成为改善用户体验的关键。更多关于用户体验的走向讨论：究竟是什么决定用户体验的走向？我总结了6个方面！随着 4G、5G 的普及，移动互联网进入成熟时期。阅读文章 > 回望 20 年前，那时的用户界面大多都是相对「低科技」的：通过 LED 灯和点阵式显示器（dot-matrix display）、七段数码管显示器（seven-segment display）等简单的显示器来传递信息，并通过实体按钮（push buttons）、按键弹片（snap domes）、薄膜开关（membrane switches）等实体控制装置（physical controls）来实现用户交互。点阵式显示器、七段数码管显示器、薄膜开关、实体按钮。如今，使用更精密装置（很大程度上可以说是更高分辨率的显示器）的用户界面变得越来越普遍。这种「高科技用户界面」已普遍到让许多设计师、工程师都认为：运用「高科技」开发新产品是理所应当的，「高科技」可以带来「好体验」。其实，「低科技用户界面」可以在某些情况下比「高技术用户界面」更占优。一、「低科技用户界面」的优势1. 触觉反馈（Tactile Feedback）无处不在的触摸屏对于许多人来说既熟悉又直观。但对于另一部份人群（特别是老年人、对高科技产品不熟悉的人）的来说，触摸屏似乎令人生畏，反倒是实体控制装置更好使。这主要是因为实体控制装置能提供触觉反馈。搭配不会熄屏、随时可见的实体控制装置，设备的功能通常都能一目了然。根据实体控制装置的装配方式、规格差异、形状分别，用户还可以在不看用户界面的情况下识别并使用它们。当用户操作实体控制装置时，通常会收到已成功操作的真实物理反馈（如按钮被按下或发出「哒」的声响）。由此可见，这样的设备非常适合夜间及用户注意力未集中于设备本身的场景。持续气道正压通气机（continuous positive airway pressure）的用户可能需要在夜间进行启动、停止、调整等操作。由此，设备上的实体控制装置能帮助用户做到这一点，但触摸屏却可能不行。在提供触觉反馈的触摸屏变得更普遍前，真实的物理反馈仍是个上乘之选。2. 成本和价格更低「低科技用户界面」的开发成本通常比「高科技用户界面」低。看似只会出于「降本」之财务动机而采用的「低科技用户界面」，实际上对用户也颇有裨益。因为成本往往与价格呈正相关。而更低的价格又能让更多的用户从中受益。3. 软件开发的成本更低为新产品制定研发预算时，许多制造商更关注实体控制装置所需的资金（如仔细考量到底是用分辨率较高的彩色触摸屏还是分辨率较低的 LCD 屏）。但是，这些实体控制装置实际上还将影响到用户界面开发的成本。总的来说，「高科技用户界面」的开发成本更高。至少，为嵌入式设备开发「高科技用户界面」需要更多的用户界面框架（user interface frameworks）费用、更多的面向多种屏幕规格的设计工作、更多的多语种本地化工作、更多的质量控制工作。相比之下，「低科技用户界面」所需的开发工作往往更简易，甚至可以不需要软件开发。因为，用户与实体控制装置的交互逻辑往往不言自明，在 LED 或其他基础显示屏上展示信息也能轻松做到。4. 可靠性（Reliability）更高触摸屏和高分辨率屏诚然有过人之处，但其缺点大家可能也不陌生：碎屏、花屏（Defective pixel）、耗电等等。对于医疗设备、工业设备等「安全责任为天」的设备，这些都可能是非常严重的缺陷。花屏可能会导致用户界面中的重要信息无法被看到，或者是直接使得屏幕无法使用。另一方面，这么多年来，许多实体控制装置已经历了制造商彻底的压力测试。同时，装配了这些实体控制装置的设备也已被使用了诸多时日。真可谓是「千锤百炼」。所以，这些实体控制装置的故障模式会比「高科技用户界面」更明确。诚然，实体控制装置可能更容易被磨损，但它们仍比「高科技用户界面」更可靠。5. 限制更多尽管「低技术用户界面」的科技含量相对较低，但它的用户界面其实很难设计。让「低技术用户界面」直观、高效、不易出错是一项挑战，可能需要大量的尝试、迭代，还要榨取设计师的灵光。高分辨率触摸屏为设计师提供了挥洒创意的无限画布，添加页面、图标变得随心所欲。与之相对应的，「低科技用户界面」提供的反倒是设计师无法操纵的各类限制因素（如设备的尺寸限制、分配给用户界面的预算等）。这貌似是劣势，但这些限制实际上却能帮助设计师专注于用户体验至关重要的地方。诸如此类的限制促使设计师要「雕刻而不是绘制」，也就是说，优化用户界面需要通过消除元素而不是添加元素来达成。倘若设计师能接受这些限制，反而有可能会得出比最初设想更为简洁的解决方案。下图所示的，是一个搭配着「低科技用户界面」的为尿失禁患者提供治疗的设备。用户可以使用它进行开机、调整刺激水平、启动/暂停/停止治疗等操作。这听起来很简单，但在 2 x 1/2 英寸的单色分段液晶（monochrome segmented LCD display）中显示所有相关信息确实有难度。但这却促使负责此设备的设计团队提供了一套直截了当、干脆利落的方案。左：一款为尿失禁患者提供治疗的设备；右：设计团队为该设备提供的部分用户界面方案。二、「低科技用户界面」的潜在缺陷「低科技用户界面」并不是万能的。在部分情况下，「高科技用户界面」可能更为卓有成效。1. 缺乏适应性（Adaptability）许多产品会随着时间流逝而演变。根据对用户需求和偏好的跟进洞察，我们我们可以通过软件更新以改善用户体验。当预料到产品会在未来需要被更新时，仍使用「低技术用户界面」可能会带来麻烦。例如，想要添加图标来表达系统状态时，却发现简单的分段液晶屏已经没有空间了。2. 难于国际化、本地化「高科技用户界面」比「低科技用户界面」更易达成国际化、本地化的诉求。若用户界面只需要图标来传达信息，那「低科技用户界面」能很好地胜任工作。但是，当需要添加多语种以迎合更多国家的市场时，会发现在「低科技用户界面」中往往无计可施。3. 不讨喜营销团队常常是「高科技用户界面」的最大簇拥，因为他们担心已经习惯了高分辨率触摸屏的用户会把装配「低科技用户界面」的产品视为过气产物。许多消费者的确会根据外观来判断产品优劣。如果想要将产品定位为旗舰产品，那拥抱「高科技用户界面」可能是个明智的商业策略。话虽如此，「低科技用户界面」也可以看上去不那么过时。工业设计师可以探索创造性的方式来包装「低科技用户界面」，使其既摩登又迷人。例如，超广视野 LCD 屏（ultra wide view LCDs）就是一种更新的「低科技用户界面」装置，它比高端 OLED 屏更为清晰。惠而浦（Whirlpool）、松下（Panasonic）等制造商已将「低技术用户界面」变得颇具美学吸引力。三、试试「低科技用户界面」吧「低科技用户界面」不是万金油，但我们仍鼓励你在开发新产品时试试看。就算没有实际的项目可以落实，也可以尝试去思考：如何将基于「高科技用户界面」的设计转化为只使用图标、LED、最基础的显示器的「低科技用户界面」？如何用最简单的 UI 元达成同样直观且引人入胜的用户体验？如果能尝试做这一番思考，你可能会对你的创意新边界感到惊喜。欢迎关注作者微信公众号：「We-Design」本篇来源：优设网原文地址：https://www.uisdc.com/low-tech-user-interfaces
明度 颜色 色相 前言这一次的北农商银行的项目，是在企业版手机银行 App 上加入企业 OA 的功能。所以在继承现有的设计规范的基础上，行方也希望产品能有一个品牌升级，提升用户体验。我们将从构建一套科学有效的颜色规范入手，本着北农商银行“人本、创新”的核心价值观，在设计中我们想要寻找新活力、新体验，所以在原有品牌色的基础上，引入了更多灵动鲜活的辅助色彩，体现北农商品牌“聚焦、友好、多元”的个性。我们希望北农商银行企业手机银行可以为更多的企业和行业赋能，探索视觉上与各行各业适配的无限可能，带来更多个性化新体验。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 一、颜色规范的原则1. 理性我们在选色时，尽可能避免个人设计偏好，减少配色的主观性，理性地有逻辑地选色2. 可扩展确定下来的基础色，可以拓展生成更多的颜色，以符合不同场景的使用需求3. 和谐颜色规范中的颜色互相搭配使用，是和谐的，整体的二、制定产品颜色规范的流程1. 以前制定产品颜色规范的流程是什么样的呢？“归纳产品特性，结合行业属性和公司的品牌文化-提取关键词-建立情绪版-选择色相-制定色系”。这样的制定流程的优势在于不脱离品牌特性，也符合用户的基本认知，但是缺少一点理论支撑和数据验证。所以，我细细研究了几家大厂的设计体系，他们对于色彩体系的建立都存在一定的共性，下面我将这套理论在此次北农商银行项目上实践一下，看看是否可以得到一套更符合用户审美爱好、更符合产品特性、更规范、更高效的色彩体系。2. 旧的设计规范我们先来大概浏览下旧的颜色规范：三、本次制定颜色规范的流程品牌色基础上确定主色-结合色环确定辅助色-采用 HSB 色彩模型调整辅助色-颜色校正确保感官明度一致-WCAG 标准验证颜色-调色板-设计落地1. 品牌标准色进化确定主色主色是产品使用频率最高、最核心的颜色，常用于主要按钮和文字、重点操作状态、高亮提醒、图形化等场景。一般产品的主色，首选是品牌色，可以更好地传达品牌价值；其次，可以通过产品的行业属性来确定主色，比如科技用蓝色、电商用红色、橙色、健康用绿色等。这里给大家分享一个非常棒的网站： http://brandcolors.net/ （包含全世界 500 强产品的品牌色，可以从这个网站寻找与我们产品业务相似的品牌色，获取灵感）北农商银行的品牌色是带有首都鲜明地域特色的红色，流露出浓郁的文化底蕴。首先，采用 HSB 色彩模型进行设计，该模型是通过直观地描述颜色的色相 H（Hue）、饱和度 S（Saturation）和明度 B（Brightness）的方式来表示颜色，更便于设计师在调整色彩时对于颜色有明确的心里预期。我们保持色相 H: 358 不变，降低了 S，从 89->75，提升了 B，从 78->90，让原先过于严肃的红色轻量化、轻盈一些，蕴含更多的活力和想象力，承载着北农商银行对未来新挑战新发展的态度。2. 结合色环配色理论，确定辅助色在一个科学有效的颜色规范里，往往包含至少两种色彩：主色+辅助色。辅助色是辅助主色来丰富产品的界面，以及作为一些操作结果，状态的反馈。功能色的使用需要符合用户的认知习惯，比如正常或成功用绿色，失败或错误用红色、等待或警告用橙色，失效用灰色、链接用蓝色等。用户不需要阅读文字信息，就能直观地了解设计的状态。本次颜色规范体系将制定一套丰富多元的辅助色，将用到色环工具。我们将以北农商银行主色红色（#E6393E）（H358，S75，B90）为起始点，饱和度 S 和明度 B 保持不变，色相 H 以 358 为起点，以 15 度为增量或减量标准，生成 24 色色环。在色环中，标记好主色红色，然后在红色的相近色（15 度）、类似色（30 度）、邻近色（60 度）、中差色（90 度）、对比色（120 度）和互补色（180 度）选取下面几个颜色。下面将根据实际界面使用情况，对上面色环得到的颜色进行删减，确定辅助色。为了保持北农商银行的基础品牌调性，选择了冷暖一致的类似色橙色，以保证整体色调统一和谐，感情特性一致，一定程度上也增加了色彩层次。并利用了中差色蓝紫色和对比色蓝色、绿色这些丰富多元的色相，使视觉冲击力强，活泼有趣，增加了色彩的平衡，并且满足各种场景下对色彩的需求。大家在确定色值的时候可以这样操作：在主色红色的色相 358 的基础上，分别增加或减少 120，得到两个对比色（蓝色和绿色）3. 确保辅助色和主色一致的明度和饱和度确定好辅助色之后，要对辅助色进行下一步的调整，这步非常简单，就是保证辅助色和主色拥有一致的明度和饱和度。4. 颜色校正，确保感官明度一致，对颜色进行微调在 HSB 模式中，即使饱和度和明度一样，但是不同色相的颜色的感官明度是不一样的，黄色、青色、洋红实际看起来比较浅，所以为了让整个色板看起来更和谐，画面不跳跃，我们要动手调整，校正辅助色。校准方式：在颜色上面叠加纯黑色图层，图层模式选择色相，通过无彩色系下的明度色值进行对比，就可以直观地看到无彩色视觉感官明度。细调过程中，相差大的颜色可以以“5”为差值调整饱和度或明度，最后在根据效果进行微调（校正原则：色相保持同类色即可。对颜色不满意，可以稍微调整色相，以实际效果为准）5. WCAG 标准验证颜色为了保证视障用户的使用，保证足够的对比度，我们的用色需要遵守 WCAG 用色标准。WCAG 用色标准中普通文本与背景对比度不低于 4.5:1，所以一般颜色规范中的中性色（#33333）等都需要满足于这个标准。那么对于产品主色，是不是也要达到这个标准呢？对主流 App 以及主色为红色的竞品 App 进行测试，发现范围在 3.2-4.2 的居多，所以这是个比较合适的对比值范围。下图是北农商银行 App 主色（#E6393E）的色彩对比度检测。更多WCAG 的知识：从3个方面，帮你从零开始掌握WCAG色彩对比度最近在学习大厂设计系统时，发现了 WCAG 标准。阅读文章 > 6. 调色板① 如何得到同色系配色？第一种方法是无色相变化的同色系，就是通过调节明度的方法，得到一系列同色系配色方案。将颜色从白到黑排列成黑白色卡，黑白色卡可以划分 10 级灰度，然后把纯色放入调好的 10 级灰度的黑白色卡中，得到一些同色系配色方案。第二种方法是有色相变化的同色系。浅色系中，色相往感官明度高的色相依次差值 2，饱和度依次减少 15，明度依次增加 5；深色系中，色相往感官明度低的色相依次差值 2，明度依次减少 15，饱和度依次增加 5。两种方法，我会更推荐第二种有色相变化的同色系，也称微色相变化，在色环上夹角小于 30 度的颜色变化，色相的跨度很小，所以配色上比较容易控制，可以很好地平衡画面的层次感和规律感 。7. 落地落地分为两个方面：设计方面和开发方面。① 设计方面此次项目实施中，发现了颜色在界面的实际应用中也应该注意一些问题。比如：主色为红色，如果将品牌色赋予按钮的时候，它会和界面中涉及破坏性操作的按钮发生冲突。因为一般情况下，红色在按钮上含有警告和禁止的含义。带有删除数据、取消操作、涉及破坏性的操作，都会用红色标识出来。所以将主色红色应用于按钮颜色，要考虑好异常情况，如果是双按钮形式（确定+取消）应该怎么定义按钮的颜色，才能让用户更好的区分。② 开发方面为了配合开发，我们定义了 Design Token。这样在以后的换肤中，只需要在底层对变量的值进行改变即可实现全局的更改，提高效率和拓展性。对于 UI 原子的命名规则为：大类字母(名称)/小类数字(样式编号)/样式说明_样式状态例如：a/1/主色_nor：#E6393Ea/2/1/辅助红_nor：#FF4E3A对于开发原子的命名可以根据各平台特性去定义，保持基础编号能快速识别对应即可（仅供参考）例如：sscolor_a_1_nor：#E6393Esscolor_a_2_1_nor：#FF4E3A四、设计规范·组件库搭建五、页面效果六、推荐工具Ant Design 色板工具地址： https://ant.design/docs/spec/colorsAcrodesign 色板工具地址： https://arco.design/palette/listarco.design*ColorPalette 色彩对比度检测： https://arco.design/palette/wcag结语在这次的颜色规范重新定义中，重新审视过去的设计，我们为了赶项目进度，为了自身便利，时常依靠主观情感和偏好去选择颜色，这将不利于产品的迭代和发展。将设计理论应用到项目中，让色彩体系科学化，真正让色彩去服务设计，让设计更高效，希望本文对您也有所帮助。如何构建科学有效的色彩系统？来看腾讯文档的实战案例！“色彩是我们感知世界的重要媒介，对于信息传达有着重要的作用，能使人们能够更有效的感知设计的意图和内涵，使传达更高效。阅读文章 > 腾讯实战！如何构建科学有效的色彩系统（应用篇）在《腾讯文档-构建科学有效的色彩系统》这篇文章中，我们阐述了腾讯文档如何升级了新的品牌色，为腾讯文档塑造更加有未来科技感及智慧感的视觉感受和品牌认知，以及如何构建一个科学有效的调色板。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/product-color-specification
图案 网站 背景 大家好，这里是和你们聊设计的花生~之前为大家推荐过5个纹理材质网站和5个科技感背景网站，今天继续为大家推荐9个高质量几何背景图案素材网站，它们包含了上千种丰富的图案样式，可以用作海报、网页、包装、PPT、壁纸设计等多个方面，下载便捷且都是免费可商用，一起来看看吧~PPT设计必备！5个高质量科技感背景生成器大家好，这里是和你们聊设计的花生~科技风一直都是 PPT 设计中比较热门的风格，而想做好科技感，除了合适的配色，自然也少不了各种具有形式美的抽象几何图案。阅读文章 > 1）more.graphics网站直达：https://more.graphicsmore.graphics 是一个免费可商用的图案生成器网站，集合了表情符号、六边形图案、渐变、几何、蒙德里安、包豪斯、带状等7种功能，图案样式累积有100多种。每种图案的尺寸、图案模式和配色方案都可以修改，因此也可以得到更加丰富多变的样式。其中平铺图案都是可以无缝拼接的，提供PNG/SVG/JPG 3种文件下载格式。2）VISIWIG网站直达：https://www.visiwig.com/（搭梯子速度更快）一个由个人设计师开发的几何背景图案生成网站，包含图标、图案和纹理三种类型，都是免费可商用的。其中图案包含了30多种基础几何图形样式，简洁大方，每一种都可以调节图案的大小、方向、密度、颜色等，可复制CSS代码和下载SVG格式文件，方便图案的再次编辑。3）Superdesigner网站直达：https://superdesigner.co/toolsSuperdesigner也是一个图案生成工具合集，包含SVG背景、3D元素生成器、渐变、几何背景、CSS背景等10种功能。其中背景图案样式达到了200多种，精致可爱，可以调整其配色和透明度，每个图案都可进行无缝拼接。图案的使用方法是直接复制SVG格式文件，导入Ai中即可编辑使用。4）Looneypatterns网站直达：https://looneypatterns.com/Looneypatterns 是一个黑白手绘线条风格的图案网站，目前包含45中图案样式，风格清新简洁，可免费下载并进行商用。下载方式为点击缩略图进入大图页面，然后右键保存PNG文件即可。5）Pattern Monster网站直达：https://pattern.monster/Pattern monster 是一个在线的免费矢量背景素材库，目前拥有248多种图案样式，除了常见的几何图形还有一些适合圣诞节、万圣节、生日等节日的装饰图案。每种图案的尺寸、大小、颜色、方向都可以进行调整，提供CSS代码、SVG和PNG三种下载格式，对后期调整来说也非常方便。6）Tylify网站直达：https://tylify.app/Tylify 是一个以 Emoji 表情符号为基础元素的趣味平铺图案生成器，有着无数种可能的组合方式。我们可以通过增删表情符号、调整大小、颜色、角度来组合成一个基础的“瓷片”单元，在此基础上网页自动拼合形成无缝的背景图案，此外也支持自己上传元素图片进行图案组合。支持SVG和PNG两种下载格式，此外还有Figma的插件可供下载。关于 emoji，你必须知道这个全能网站Hello Everyone~ 我是花生。阅读文章 > 7）Subtle patterns网站直达：https://www.toptal.com/designers/subtlepatterns/一个公益性质的纹理图案网站，站内素材都是由专业设计师创作并上传的，包含布料织物、几何图案、瓷砖纹样、植物等多种类型。网站提供400*400px的PNG格式文件下载，可无缝拼接。8）wowpatterns网站直达：https://www.wowpatterns.com/free-vector-artWowPatterns是一个专注图案设计的专业网站，目前收录超过 3000 多种纯手工的创意图案，华丽多彩，包含民族、季节、几何、抽象图形等多个类型。可下载JPG格式和可编辑的EPS格式，图案完全免费用于商业和个人用途。9）bg-patterns网站直达：https://bg-patterns.com/一个日本的背景图案素材网站，包含几何条纹、植物、日式传统纹样等多种类型，总样式近2000种，都是免费可商用的。每种图案有5种不同的配色方案、7种图案大小和 PNG/SVG/PNG/Ai/EPS 5种文件格式可供选择，非常全面。以上就是今天为大家推荐的9个免费可商用的背景图案素材网站，喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的相关疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：要质感叠纹理！5个设计师必备的免费高清纹理素材网站大家好呀，我是和你们聊设计的花生~在海报设计、字效设计、插画中，叠加纹理是提升设计质感、营造主题氛围的有效手段。阅读文章 > 看电影学审美！8位值得关注的宝藏电影拉片UP主大家好，这里是和你们聊设计的花生~想必很多学设计或插画的小伙伴听过可以通过看电影来提升审美，学习构图、配色、造型等方面的知识，并获得相应的创作灵感。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/pattern-background-resources
设计师 工作 工具 编者按：相比于其他的具体的趋势报告，来自 UXdesign.cc 的这篇报告更像是一篇针对 2022 年的反思和总结。编辑部从 1000 多篇设计文章当中洞察到 2022 年的变化，针对企业、设计师技能、执行力、社交媒体、web3 、人工智能等关键因素和热门主题，进行了犀利的总结，毫不客气地指出问题。2023 年，UX 行业的整体氛围即将改变。在设计领域当中，有时占据主导地位的某种趋势可能会突然过时。经过了长达3年的疫情洗礼，设计、技术、用户行为和社会风向一直在酝酿着变化。作为设计师，与其从一个趋势跟风追逐下一个趋势，不如批判性地审视一下这个行业，重新思考要走的路。这篇文章是 UX Collection 发布的第九篇《用户体验现状》报告，基于 2022 年的 1000 多篇文章，对用户体验行业进行的批判性反思。先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 1、UX：全世界上最热门的烂摊子在许多设计团队连续几年不切实际地快速「增长」之后，裁员如同幽灵一样困住了所有人。没有一个企业是安全的。我们在 2022 年看到了大大小小的公司都在裁员，包括 Facebook、Better.com 、Coinbase 和 Twitter （特别复杂）。上市公司在 2022 年遭受重创，而私营企业同样受到了严重波及。企业估值下降，相应的设计职位也不像之前那么稳定。在组织内部，企业业务战略的频繁变化，也会导致团队裁员。随着不确定的增加，设计师的工作也开始变得琐碎而难以界定。在团队内部，经理和负责人们发现团队内部的疏离情绪开始增长（这是一种被称为「安静退出」的趋势），并且他们自身也会类似的感受。在这种情绪氛围下，产品本身也会变得更加商品化，而设计师也会越来越怀念当初为了创意和好设计殚精竭虑的历史阶段。虽然很多人对于经济复苏充满乐观情绪，但是更多的人开始正在为最坏的情况未雨绸缪，努力学习，为应对经济衰退而做准备。2、企业：相比拯救世界，拯救自己更重要当预算紧张的时候，投资设计的理由就更加不充分了。在 2022 年年初，企业还在不遗余力地留住人才。但是随着时间推移，这些企业开始调整福利政策——取消津贴，调整远程工作政策，削减预算，然后是裁员。企业开始以最不受欢迎的方式来提高生产力、降低成本。最重要的是，一些公司干脆禁止员工在工作场所讨论政治议题，并且撤回多元化人才计划。在设计领域，「增长设计师」成为了新崛起的角色——专注于获取新客户并带来即时收入的设计师——这表明企业和公司对于投资回报率更加务实。许多被设置为以用户为中心的 UX 职位，也在工作中，被公司要求不惜一切代价提升利润。坐在冷板凳上多年的设计师，如今开始被要求「分摊成本」了。3、设计能力：企业需要通才设计师员工数量的减少，意味着公司需要更多的通才设计师，同时也要求领导者亲历亲为。随着许多公司决定减少招聘甚至裁员，企业的招聘负责人更倾向于考虑能身兼多职的应聘者，而不是仅仅只专精一项的人。虽然空缺的职位正在减少，但是新人的数量却是逐年增加的——这意味着入门级的设计师之间，有着更加激烈的竞争，这也使得新人更难找到第一份工作。设计院校所教授的内容和实际设计工作之间的差距，比以往任何时候都要大。想要获得工作职位的设计师需要更加快速完成更多的工作，并且不会有太多犯错的余地。企业高层，则期望更多管理者回到务实的职位上，这一趋势完全没有放缓的迹象。公司无法承受能言善辩但是无法交付的团队领导。由于明年的经济形势不明朗，团队可能仍然处于分散状态，公司领导者需要持续关注团队内的倦怠问题，并且跟踪内部有辞职倾向的员工。4、执行力：比讨论更重要的是行动太多的循环对话和决策不足，正在破坏设计的正常运行。是时候重新考虑合作的方式了——专注于让项目推进，让事情发生。一个会议紧接着另外一个会议，每个人都有意见，但是没人有真正的决策权。从技术上来讲，会议开完，待办事项上的条目可以划掉了，但是依然充满了不安感——因为团队仅仅只是在按时完成任务，而不是真正向着愿景前进。如果我们尽量少关注彼此的状态更新，而将注意力集中在工作内容本身呢？现在是时候降低对于「执行」的偏见了。如果你不同意团队的决策，那么请提出替代方案。如果团队决策卡住了，那么重新创建一个决策框架。有时候你是缝缝补补的修理工，有的时候，需要你来掌舵开车。我们时常会害怕因为跳过某些步骤出现问题，认为这样会破坏整体的设计价值，但是如果不将项目往前推进，会更加糟糕。一旦我们开始交付，项目的会变的逐渐清晰，每天交付一些内容，确保协作不仅仅是分享意见和想法，而是真正开始创建一些东西。5、社交媒体：算法驱动的影响力社交媒体上的意见领袖正在影响设计师们的想法。现在是社交媒体算法驱动设计的时代。很多设计师如今都都倾向于通过在社交媒体上分享知识和想法，借此来建立影响力，但是越来越多拥有影响力的人享受到甜头，不再追求更好的设计和更优的技艺。在社交媒体发展的早期，我们能够选择关注谁不关注谁。但是现在则不同，算法会掌控我们看到的内容，我们无论是在 TikTok、Twitter 还是 Instagram 、 LinkedIn 上看到的内容均是如此。当用户无法找到他们真正感兴趣的帐号的时候，平台会优先推送给他们最两极分化的内容和用户、最简短和最规范的帖子。可是，当某个内容足够简单、用户参与度足够高的时候，我们很容易忘记它背后真正的起源、历史和背景，留下的仅仅只有情绪和结论；新手设计师更有可能从 Instagram 推荐的 UX 领域头部帐号那里听来 UX 法则，而很少通过实际的案例和研究来获取知识。算法推荐的帖子和内容都是被精挑细选过的，但是这些缺乏细节的内容，又破坏了获得真正知识的契机。UX 作为一门以「为什么」为核心、需要充分了解用户背景而闻名的学科，我们想要学好它，如今要非常谨慎地关注我们获得信息的来源。6、web3 ：寻找可供栖居的未来web2 试图让技术感觉起来更加人性化，但是 web3 试图让技术看起来更加……技术化。如果说 web2 的公司在信息传播的时候，始终是围绕着以人为本（以客户为中心、不要作恶等）的视觉叙事，那么 web3 公司则代表了一个全新的转变。在这些公司企业的网站，没有女性角色站在草地上吃着沙拉大笑的场景，也没有扁平风格的角色插画，web3 相关的网站上不再展示产品如何帮助我们适应生活，而是将视角聚焦于令人兴奋的、有待探索的新宇宙。许多 web3 项目都有着漂亮的霓虹色、抽象的形状和科幻风的视觉特效，它们在向过去色调不饱和的单调设计宣战，并且宣告一个有待探索的未来正在前方。视觉叙事风格的转变大概 10 年一个周期，因此设计领域正在快速远离 web2 的企业风扁平化设计，就不足为奇了。web3 的全新抽象式设计并没有提醒我们当前世界的问题，也无从解决当下的这些问题，但是展现出了一个可供逃离的抽象世界，让我们从当前的危机中分心出来。web3 更像是在强调「逃离当下的世界比起修复它更容易」。7、人工智能：无法回避的客观现实人工智能正在以一种比我们接受能力更快的速度进入我们的工作流程。在过去几十年当中，自动化的机器人减少了制造业对于体力劳动者的依赖，提高了整个行业的效率。在如今的第四次工业革命当中，人工智能也可能会降低设计领域对于创造工作者的依赖（人工智能生成的图片甚至赢得了设计比赛）。创意产业正处于技术革新的边缘。人工智能已经可以越来越好地替代我们完成日常的工作，尽管设计师在接纳人工智能和阻止人工智能两者间存在分歧。起码对于 AI 辅助文案而言，UX 设计师是既兴奋又害怕，同时他们也在寻找对 AI 系统建立信任的办法。我们还能看到，已经有人开始将 Unsplash 的图库替换成了 Dall-E 、 Midjouney 以及 Stable Diffusion 的 AI 生成图库。此外，设计师还在测试基于 AI 的协作模型，并且创建了 Figma 插件来协助用户更快完成各种日常工作。当我们面对新兴的事物时候，我们最好保持开放的心态：我们希望自己擅长已知的技能，但是我们可能同样擅长处理某些未知的事物。2022年的AI绘画神器回顾 https://www.uisdc.com/zt/ai-draw8、设计工具：让工具服务于设计更重要设计工具正在不断发展和前进，让我们花费更少时间探索功能，这样我们拥有更多的时间和对的人一起协作。Figma 基于浏览器来开发，以协作为中心的设计理念，彻底颠覆了整个设计行业。他们投资建立的设计社区，让设计师受众建立了有效的联系。设计师们对于 2000 美元的设计会议入场券不感兴趣（Adobe Max），免费在线的简短分享更加吸引他们的关注（Figma 社区），Adobe 用 200 亿美元收购 Figma 恰恰印证了这一点。Figma 这样的设计工具被移交到大型企业的同时，它也为其他的设计工具指明了前进的道路。今天，越来越多的设计师正在遵循开源协议，来提供更加自由开放的设计，改进开发和设计流程，并且增强 AI 在设计领域当中的应用。Adobe 收购 Figma 给我们最大的教训是，设计工具不仅仅是绘图工具。当工具让开道路的时候，真正的设计才会发生，设计师们需要在交流、评论中完善，需要实时看到彼此，共同创造。2022 年的这次收购已经证明设计工具应该也是对话工具。9、个人努力：停下来思考一下再前进把自己逼得太紧，对自己的伤害会更大。如果我们想要更长久地待在设计领域，那么我们是时候重新调整我们的工作和事业的优先级了。很多设计师总会不断推着自己的前进，我们中的许多人都将空余时间花在创建业余项目、接私单、在初创公司兼职、在线分享内容以及向他人证明自己。在工作场合，又会不断推进自己的职业生涯、争取晋升机会、赢得领导青睐、在谈判桌上争取所有利益。设计师总会将雇主的增长和我们自身的增长混为一谈。我们总是忘记时间，燃尽了自己。为了解决这个问题，我们应当适时和工作脱钩，重新思考我们对于工作的真正期望。我们需要时间、空间和能量，来帮助我们按照自己期望的方式成长。我们需要从创造的冲动中，捋出帮助我们进步的想法，将自我维护视作为同等重要的事情，或者说比工作更重要。我们需要找到工作的意义，同样也需要在工作以外找到意义。从长远来看，人生和自我的一致性要更重要。无论今天的情况如何，我们明天都需要为自己而活。喝水，善待自己，忠于自己所珍视的事物。努力工作，但是在此之前，先留给自己一分钟来审视前进的道路。10、不确定性：这是唯一确定的事情2022 整年跌宕起伏的变化给我们上了生动的一课。这一年年头以 web3 （以及 NFT、DAO、DEX、DeFi 等）的疯狂承诺开局，最后以充满不确定性的市场收缩和裁员收尾。大众对于加密货币的信心正在萎缩，元宇宙如今更像是一个昂贵的笑话，而 web3 初创公司正试图将难以想象的「产品」强塞给用户。我们希望在进入 2023 年的时候，大家都已经做好准备迎接挑战。挑战出现在我们身周的事物（各种炒作、奇怪的流行语、不断膨胀的兴奋情绪等），同时也挑战我们自身。我们应该质疑我们的工作方式、质疑我们之前所看重的事物，以及我们曾经所认为的「正确的设计方式」。在不断变化的、动荡的时代，不确定性是唯一确定的东西。氛围正在发生变化，随之而来的是被重塑的现实——更重要的是，这是我们重塑自身的机会。更多趋势报告：高手在用什么软件做设计？收下这份2022年UX设计工具报告编者按：UXtools 每年都会针对流行的设计工具进行统计，从而了解设计师是如何使用设计工具，以及哪些设计工具在过去的一年里又占据主流了，以此从侧面了解目前UX设计行业的现状。阅读文章 > 2023 包装设计十大关键趋势！顶尖平台Pentawards重磅出品！大家好，这里是和你们聊设计的花生~近日，世界顶尖包装设计平台及设计大赛 Pentawards 发布了 2022-2023 趋势报告。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/uxdesign-trends-2023
产品 组件 系统 前言本文总结了在工作过程中可能面临的疑惑与问题，并结合自身经历输出相关设计经验，希望能够帮助新人设计师快速上手 B 端设计。首先，作为一名新人，在接触 B 端设计的时候应该怎么样才能快速上手呢。我们可以从：了解 B 端的基础知识、了解组件的用法、体验优秀产品这三个方面去快速了解 B 端设计知识。一、了解 B 端基础知识1. 什么是 B 端产品B 端产品的使用对象是企业，组织；目的是帮助企业，组织解决某一类经营管理相关的问题，进而帮助企业提高收入，提升效率，降低成本，控制风险。B 端产品更讲究严谨的流程设计、贴近现实的场景面积、低风险、高效率、数据精准；B 端产品的用户无法决定自己使用的软件，决策权在为软件付费的人手中（例如：公司高层，老板等等）。2. B 端产品的价值B 端产品的价值在于：集中管理（举个例子：公司通过要求销售人员将客户信息录入后台系统，避免因为销售人员的离职导致客户的流失），降本增效（可以规范化，集中化管理销售人员的行为）3. B 端产品的分类我们常见的产品有：SaaS，PasS，IaaS，SCRM，ERP，OA 等等，但我们可以根据产品针对的服务对象去进行分类，我们可以分为四个方向：专业领域产品，行业解决方案，办公协同系统，运营管理平台专业领域产品：是针对企业的某类工作场景所使用的 B 端产品，常说的 SCRM（销售自动化平台）、ERP、HRM（人力资源管理）都是专业领域产品的范畴。一家公司可以拥有多个专业领域产品，例如公司拥有一个 OA 系统的同时，销售的同事还可以拥有 SCRM 系统。行业解决方案：围绕某一个行业进行的，针对行业所需要的功能进行拓展，能满足行业的使用需求即可。办公协同系统（OA 系统）：针对公司内部协同办公使用，例如我们常见的钉钉，飞书，企业微信都属于办公协同系统（OA 系统）运营管理平台：针对客户端运营活动或者具体内容展示，对推送目标人群进行管理。例如火山引擎，极光推送等等同时，我们可以根据产品交付方式进行分类，可分为：Saas，Paas，Iaas，定制化产品；引用 IBM 架构师 Barron 用披萨作为比喻来具象化这些交付方式的形式：定制化产品：服务于大型企业功能定制设计；需要什么特殊口味/形状的披萨都可以找餐厅定制。标准化产品（SaaS）：把开发、管理、部署都交给第三方，客户选择功能的权力较低；他人直接制作好完整的披萨，不需要你的参与，你只需要把他卖出去，最多在包装一下印上自己的 logo 就好。配置化产品（PaaS）：开发者只需要关心业务逻辑，不需要关注底层，客户选择功能的权力较高；除了基础设施，他人还提供披萨饼皮，你只需要把自己的配料放上然后让他去帮你烤熟即可，也就是说你只需要设计好披萨的味道（海鲜口味或者意式披萨），他人提供平台服务帮你把设计完成。基础服务产品（IaaS）：是云服务的最底层，主要提供一些基础资源，用户需要自己控制底层去完成业务逻辑；他人提供厨房炉子这些基础设施，让你来烤这些披萨。除了去了解关于 B 端的一些基础知识以外，如果想要更高效的去完成工作，设计师们通常都会去深入了解通用组件的使用方法。二、了解组件用法花时间去了解组件的使用是非常有必要的。组件作为我们设计当中的基础单位，等于说我们了解了组件的使用，就知道 B 端设计的基础原理。目前市面上已经有很多开源并且很成熟的组件，并且每一个设计系统里面都有对应的设计资源的分享、设计组件的解析、以及设计原则的确定，可以通过参考这些深入学习。1. Ant DesignAnt Design 是蚂蚁集团的设计语言，目的是为了提供完善的设计指引、最佳实践、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。2. Element UIElement UI 是 一套基于 VUE2.0 的桌面端组件库，Element UI 提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。3. Arco DesignArco Design 是字节跳动出品的企业级设计系统，对于新手入门有一定的参考价值。字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 通过了解成熟的组件，我们可以比较局部的去了解 B 端设计控件的使用方式。所有的产品在控件与控件、控件与页面、页面与页面之间都会存在一定的联系，所以设计师们为了提升自己，经常会去体验市面上比较优秀的产品。三、体验优秀产品B 端和 C 端一样都可以通过临摹去了解现有的设计模式，参照市面上优秀产品做设计对于新手入门而言是快速提升的途径之一。通过临摹，你能够确定阅读的具体宽度与内容，让你对整个产品的页面布局有了初步的认知。关于临摹哪些页面，本人有一些小的建议。通用的典型页面可以临摹 Ant design pro 和 Arco design pro 里的页面作为参考进行设计；涉及到行业领域进行设计的话，可以参照一些优秀的竞品进行设计，例如运营管理平台，可以参照 神策智能运营 进行设计；更多竞品查找方法：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 写在最后以上几种方式只是新手快速上手的小窍门，在工作中 B 端的设计也不仅仅是套组件和抄界面；移动端和电脑端的交互方式还是有所不同的，所以如果想要得到提升还是需要通过阅读相关书籍，主动了解基础的设计模式，了解业务场景、角色使用场景等等，从而优化用户操作路径，让 B 端系统的体验得到真正的提升。欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/beginners-guide
需求 用户 流程 经常在设计群潜水的时候，都会碰到有小伙伴问相同的问题：换了一家公司，如何融入团队开展工作？刚好最近自己也是换了一个平台搬砖，所以想结合这段时间自身的经历，来跟大家聊聊，作为交互设计师，我是如何快速进入业务状态开展工作的。相关干货：B端设计师如何体系化了解业务？4个步骤快速搞定！前言接触 B 端设计的小伙伴会发现，很多业务具有角色多，业务场景复杂，功能链路长等特点，所以在工作中会经常遇到以下几个问题： 突然被调配到新业务，拿到一个不熟悉的业务或者新产品，不知如何开展工作？阅读文章 > 为什么强调“快速”，是因为对于一个职场老鸟来说，公司招你的目的不是花时间培养你，而是来救火的。如果不能快速进入业务状态，就会招来周围同事的质疑，尤其是对于像交互这种“可有可无”的职位而言。所以，如何在新的环境中快速融入，快速产出就显得尤其重要了。一、了解团队当前协作流程与痛点由于公司之前没有交互设计师的岗位，所以当我进入到团队中时，首先主动了解的是在没有这个角色之前，团队是如何运转的，以及遇到了哪些阻力。这样我才能找到当前团队协作的问题，并通过这个岗位的优势去解决，从而凸显自身的价值。在通过与产品、技术、设计等部门同事的简单沟通后，归纳出如下两个问题：1. 产品交互流程靠口述，理解偏差较大在跟旁边的技术同事沟通得知，由于之前没有清晰的交互流程产出，只有产品出的简单的线框图，导致大部分交互流程靠开发想象，再加上产品的线框图是通过生成 axure 云端链接的形式存放，经常会出现打不开、找不到的情况。产品就通过口述的方式进行流程的宣讲，从而导致的结果就是开发出来的与产品的预期偏差太大。而针对这些现状，结合之前的工作经验提出了两点优化建议与方向。① 统一团队协作工具与项目文件当前技术同事在开发的时候，需要不断切换链接去看对应的产品需求、交互流程、设计稿，不仅繁琐，经常也会出现由于项目文件命名不同对应不上的情况。所以在我的建议下，开始使用同一个软件来承载这些文档，同时将相同项目的文件采用统一的命名规则，从而提升技术同事查找相关文档的效率。② 规范交互文档的内容输出之前交互流程的产出由产品兼任，由于没有那么多时间考虑页面细节，就会导致部分页面流程的缺失。所以在我加入以后，针对当前团队的特点，优化了之前的交互文档的结构，同时与产品协同产出，将业务规则与交互说明落到对应的页面上来，进一步提升技术同事的开发效率与准确度。2. 需求经常变更，设计与开发返工率高需求变更往往是导致项目不能按时交付的主要因素，在与产品经理沟通中得知，导致这个问题的主要因素是开发出的页面流程与前期需求沟通的时候不一致，所以如何确保需求准确的传达给技术跟设计同事，对此我将整个链路拆解出了四个阶段，即：需求评审、交互评审、页面与流程宣讲、实现跟进。① 需求评审需求评审是之前团队已有的流程，但是之前评审需求时，每个角色都有自己的想法，由于没有将需求做页面化的呈现，导致直接将不确定的需求给到设计以后，设计开发出的需求不符合前期规划的预期效果，就会带来返工。而在我加入以后，在进行需求评审的同时，我会主动去归纳此次需求范围层的内容，并快速生成可视化的效果，展现产品与功能雏形。这样做的目的是能让各个角色根据当前的信息架构来判断是否是大家达成一致的效果与流程，减少因需求不明确而带来的返工。② 交互评审交互评审，是我加入以后主动去推动的流程。一般是在产出整个功能所有页面的信息架构跟流程后进行，主要目的是拉齐需求方看看整个功能用户的操作链路是否满足前期讨论的需求。而且在这个阶段也可以避免一些因交互形式的改动而带来的开发工作量的增加，从而导致项目延期的风险。③ 页面与流程宣讲页面与流程宣讲，是在我补充整个页面与流程的交互文档后进行，主要目的是面向负责此次项目的设计与开发同事，通过同步此次方案的背景、迭代的内容、用户交互的页面流程与规则、需要获得哪些数据、设计注意事项等内容，来减少开发设计过程中因前期功能不熟悉而带来的理解偏差。④ 实现跟进实现跟进，主要跟进设计阶段与开发阶段。设计中，要时刻看看设计进度以及是否很好的表达出了原型中的信息层级，而开发阶段主要是对于一些极端情况做出解释与定义，防止模凌两可的状态导致流程的不通畅，同时在测试结束后还要做一轮验收，主要查看功能是否完善，极端情况是否考虑周全等。二、主动熟悉业务，框定后续工作方向当我加入到团队后，就立马接手了需求,其实这么迅速的投入到工实际项目中是不太利于方案的产出的，因为在不了解业务背景的情况下，很容易陷入“我以为”的状态。所以在做这个紧急任务的同时，我也在利用有限的时间去完成如下三件事情，帮助自己更好的开展后续的工作。① 了解产品商业模式交互设计师不是一味的站在用户的角度去考虑问题的。产品体验设计的再好，如果不能带来公司效益的增长，也会无济于事的。所以主动了解公司的产品商业模式，不仅能很好的在产出方案的时候平衡商业与体验，同时也能在主动推进产品体验优化的时候更好的选择合适的方向。② 体验产品流程体验产品流程是一种很好的方式，来帮助自己快速熟悉产品。通过对每个模块，每个流程的拆解，不仅能知道该功能设计的目的，同时也能知道当前的流程存在哪些问题以及可优化的方向，为自己建立整个产品的功能架构图提供了很好的帮助。③ 获取产品节奏产品在不同的阶段，需要解决的问题都有所不同，获取产品的节奏能更好的明确后续的工作重心与方向。举个例子：当我加入到团队以后，在跟上一级的沟通中了解到了现在产品的商业模式，于是我就开始针对产品几个能影响到用户增长与订单转化的流程着重体验，找出优化的方向，比如注册登录流程。因为不同于常规 C 端的注册登录，当前产品需要用户注册后开通会员才能正常查看内容，该链路的体验好坏决定了产品的付费用户数量，所以我觉得对于产品是至关重要的。但是在我进一步跟上一级的沟通中得知，产品当前的存量用户还可以，而且大部分的新用户并非通过 app 主动注册的形式产生，所以产品的注册登录流程并不是现在最主要的，而是在于结合产品运营，如何让现在的存量用户活跃起来。所以在获得了产品的节奏后，我重新调整了对产品的体验优化的方向。三、切换视角，站在目标用户的角度做设计切换视角对于交互设计师而言尤为重要，因为这个岗位的价值就是为用户设计合适的操作路径，从而达到“降本增效”的目的。在产出方案的过程中，越多的站在用户的视角，意味着产出的交互流程越接近用户的使用预期。在我加入团队没多久，就接到了一个内部 OA 系统的交互需求，该需求产品经理已经在前期做了简单的功能设计，但是由于没有设计用户的操作路径，所以需要我这边来进行补充与协助。我就以这个为例，来拆解一下在做交互需求时，我是如何站在用户的角度去思考与设计的。公司的OA 系统主要是用来维护核心用户，根据用户的属性不同做分层运营。新需求是需要增加一个“记需求”的功能，用来记录用户的诉求，从而方便后续的跟进。已有的线框图如下：接到这个需求后，我并没有急于去做后面的交互流程补充，而是通过跟目标用户的交流，了解了他们使用这个功能的场景，再切换自己的视角，试图站在用户的角度，来重新审视现在的交互行为的合理性。第一个交互行为是用户查看记录好的需求。当前的设计是放在用户列表的顶部，并以卡片切换的形式查看。此交互形式虽然能提高需求的重要层级，方便用户查看，但是对于需求的数量有要求，如果相同重要层级的需求过多，采用这种形式展示就会增加用户的操作成本，那该如何优化呢？通过对用户使用场景的调研，明确该操作是目标用户的常用操作，且需求量会很多。针对常用操作，要做的就是减少用户的操作路径，方便用户触达。所以选择了跟客户列表用 tab 切换的形式展示；而针对数量多的特性，信息列表无疑是很好的选择，能承载更多的内容，同时也能让 tab 切换后的页面形式保持一致。接着我们就需要根据当前的交互形式，对场景跟目标用户的需求做进一步的拆解。信息列表虽然能承载更多的信息，但是内容一多，查找起来就会很困难，如何让用户找到一个或者一类需求呢？我就继续补充了该信息列表的搜索跟筛选功能，通过搜索能定位到具体的需求，同时为了提升搜索效率，增加了关键词联想的交互规则；而筛选是将同一特质的需求摘取出来，那如何定义需求有哪些特质呢？我通过功能的目的进行拆解，该功能是记录需求方便后续的跟进，根据跟进的目的以及用户的使用场景，定了需求的筛选维度：时间、重要程度 。然后为了让整个操作形成闭环，在用户记录需求的时候也增加了自动获取时间以及让用户定义重要程度的功能。第二个交互行为在于用户记录需求，原始的线框图是以选择项的形式让用户操作，但是为了能尽量覆盖大部分客户的需求，设置了不同维度不同层级的选择项，这就会导致一个问题，增加了用户记录需求的时间，那该如何进行优化呢？在与目标用户的沟通中发现，他们一般记需求是发生在打电话跟客户沟通的时候，而需求的内容往往不固定，之前的方式是采用手写的方式记录。结合使用场景与用户习惯，将之前选择的交互改成文本输入，同时为了进一步提升用户记录需求的效率，在用户进入记需求的面板时，直接唤起键盘，方便用户直接输入。四、敢于发声设计师往往自我定义为“执行者”，尤其是刚进入新的团队，在人生地不熟的时候更不敢发声，但是衡量一个设计师的专业性，不仅仅体现在他的产出物，还要看看他对于过程的思考与论证，而这些都是要表达出来的。在我加入新的团队产出交互方案后，就主动推进交互评审的进度，拉齐其他部门进行整个方案的宣讲，指出之前流程可能成为用户操作阻力的地方，以及自己整个的改版方向与目的，为什么最终选择了这个交互方案，最后还对自己的方案定义了考察的指标，方便后续对于方案效果的跟进。也正是敢于将这些内容说出来，才得以迅速的在团队建立良好的口碑。五、总结以上，就是笔者根据最近的经历，分享的一篇关于如何快速进入业务状态的文章。后续也会继续分享自己在实际工作中，关于产品交互的心得与感想。经验有限，欢迎大家批评指正与交流。本篇来源：优设网原文地址：https://www.uisdc.com/quickly-enter-the-service-state
作品集 泡面 小伙伴 上次有观众老爷反馈这种对话的分享形式比较有趣，于是我掏出了盖泡面的手绘板子（8 年前买的，居然还能用）好，我就直接更新一版漫画升级版的设计分享，希望你给我点赞 ，不要不识好歹｀Д´本篇适用于设计新人，找工作中的小伙伴，最重要就是正在摸鱼的你。往期回顾：金三银四求职季，收下这篇5000字的上分秘籍（附简历和作品集模板）考虑马上又要到新的一年为了让更多小伙伴能准备出更加惊艳作品集，这里我提供了一套简历和作品集的设计思路以及对应的模板，希望对大家有帮助~我们提供器与具，推崇创作思路发散，不鼓励照搬、抄袭、挪用。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/portfolio-design-4
画面 视觉 案例 hi，我是鱼先生，不止会设计的 90 后解忧大叔。设计画面平淡无味，是大多数设计师都会遇见的难点之一，那么今天跟着鱼先生一起来学习几个比较实用的版式技巧，希望可以给你带来一些提升。方法就是通过增加画面的维度，从而增加空间感，提高视觉的层次感。更多提高画面冲击力的方法：用超多案例，教你一招搞定海报设计视觉冲击力！强烈的视觉冲击力对于平面设计来说是一个很重要的品质，而关于如何加强画面的视觉冲击力，有一个方法简单又有效，即加强画面的空间感。阅读文章 > OK，开始吧！形式 01：图形类通过处理元素的前后关系，或者元素相互穿插的关系，从而增加画面的视觉层次感。特别是打破大家常有意识形态的时候，效果会更好，比如上图案例中的相框，一般来讲相片不会出现在相框外，那么作为设计师，我们刻意把相框内的人物或元素进行破局处理，这个时候就等于让画面增加了一个视觉维度，原本平淡的画面就会显得更具备层次感。我们继续看一些其他的案例视觉，加深理解：形式 02：文字类在以文字为主题的视觉画面中进行前后穿插，或借助某些元素进行前后关系的建立，让画面从一维到多维的变化，从而提高画面视觉效果。形式 03：虚实结合虚实结合就比较容易理解，利用前实后虚或前虚后实的方式，让画面产生前后延伸的空间感，就像在摄影里面的景深一样，从而刻意塑造出虚实有度的空间层次感。形式 04：制造空间利用文字的透视感，或者某些元素的透视感增加画面的空间感。比如下面前两张案例，左边绿色这张就是利用文字的透视，让整个画面的空间感立马就出来了，再看右边案例中，利用圆环元素从远至近的塑造透视关系，也起到了视觉引导的作用，同时也是他们要走向的方向，其他文字则与圆环元素进行相互结合，也增加了画面的契合度。形式 05：烘托气氛利用光束的点缀烘托，直接的作用就是聚焦主体，产生强调的作用。平面设计是在一个平面上玩出各种花样的视觉艺术，以上的方法其实都是为了让画面在一维视觉上增加维度，从而塑造更好地视觉效果。OK，理论看完了，我们在实战案例中加深理解一下。实战演练案例 01① 我们来做一张画展海报，首先我们先选择了一张图片素材，放置在画面中。② 把图片嵌入椭圆形内。③ 把所需要的文案进行排版。这个时候我们发现，当图片素材完全嵌入椭圆内的时候，整个画面视觉总感觉缺少了一点活跃的效果，发现问题，那我们继续优化。④ 我们就把人物模特的一部分进行处理，造成破局的效果。如下图画面所示：⑤ 最后我们再次放上文案，得到以下案例：这个时候我们仅仅只是调整了头巾的部分，因为头巾露出来之后，形成了圈里圈外的视觉层次感，增加了画面的活跃性。最后我们看一下对比图：案例 02我们再来实践一张画册的案例。常规情况下，设计师都会直接利用图片素材进行板块设计，如下图案例所示：猛一看好像没有什么毛病，版面简洁，但我们仔细去观察的时候，就会感觉画面规规矩矩，缺少一些设计感。没关系，跟着鱼先生继续来尝试调整，这一次我们把汽车进行抠图处理，然后左右两页的颜色进行分别填充，汽车跨越两个颜色之后，看上去就产生了跳跃的视觉性，前后和左右的维度都产生了变化，画面看起来就比原来饱满多了。做到这一步对于大多数设计师来讲已经可以结束了，但是这里呢，我们可以再深入一个层次，因为我们可以明显看出来上面的案例画面还是有些太过于空洞。这个时候我们可以把主体汽车这部分再进行优化，我们加入英文装饰，让整个画面再进行一个层次的加深。完成后如下图所示：这里如果想要继续优化细节，我们同样可以在汽车后面的文字上面下功夫，这里我利用模糊工具把文字局部进行模糊处理，形成了虚实结合的方式，让整个画面看上去更加的饱满。完成后，我们一起看下对比图：写在最后在以上的两个案例中，仅仅通过添加一个维度的技巧，就让画面的视觉完全变得不一样了，是不是既简单又实用的方式呢？设计不是一蹴而就，再小的技巧如果使用得当，都可以起到增加画面效果的作用，大家可以尝试起来了。OK，今天的文章到这里结束了，大家加油！下期见！欢迎关注作者微信公众号：「摆渡鱼生」本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-dimension
插画 组件 用户 在互联网企业日常的项目需求中，插画经常会大量的运用在各类产品设计、产品运营、产品宣传中，但是传统的插画方式主要存在以下几个问题：不同岗位不同的设计师产出的插画风格不一致，质量参差不齐每次的设计插画需求都是从头开始绘制，插画的产出效率太低插画的风格不一致很难形成一致的品牌印象，品牌感太弱于是我们可以看到一些互联网团队已经走在了前面，通过构建系统的插画组件库来解决以上 3 个问题，对于设计师来说，插画组件库虽然已经不是什么特别新鲜的话题了，但是实际的执行过程中大部分设计师可能会遇到很多难题。那么，今天的飞凡指南就通过 3 个方面来深度解读下插画组件库的这个设计话题。更多插画组件库干货：保姆级教程！手把手教你做超实用的插画组件库（附组件库下载）今天给大家带来的是如何建立设计师个人的插画组件库，因内容过长并知识点过多，请泡杯枸杞观看。阅读文章 > 一、插画组件库的价值1. 设计提效当我们通过传统的流程去设计一个运营页面的时候，往往需要 2~3 天的时间，但是有了插画组件库，设计产出的效率基本上可以提升 1 倍以上，而节省出来的时间，设计师可以去考虑更有价值的事情2. 统一风格整套的插画组件库，在构建的时候，对风格、色彩、人物、元素、背景都有着统一的规范，在面对不同设计能力设计师的时候，都能够较大程度上保证风格统一和插画的产出质量3. 提升品牌感插画组件库在构建之初就要考虑和产品调性、品牌调性的一致性，这样在传播的过程中才更能在用户心中形成一致的品牌形象，提升品牌感二、插画组件库需要考虑 4 个方面的问题当我们在构建插画库的时候，以下 4 个问题是我们需要重点考虑的：如何凸显产品属性；如何体现品牌调性；如何满足用户场景；如何打造差异化的风格凸显产品属性：插画的最终目的是辅助文字去传递产品信息，我们需要直观的向我们的用户告诉我们是干什么的，而避免用户做过多的思考；如何体现品牌调性：和消费品一样，品牌是用户考虑的一个非常重要的因素，插画是传递信息和塑造品牌调性一个非常重要的渠道，所以插画库应该考虑如何能够对我们的品牌调性或产品调性进行补充如何满足用户场景：在考虑插画的元素构成的时候，我们也需要把用户考虑进来，他们使用产品的时候是哪些场景，再基于用户的场景去设计我们的插画组件元素，这样在实际应用插画库的时候才能够尽可能涵盖传播的场景如何打造差异化的风格：我们可以看到各大互联网产品的插画风格都基本上非常雷同，很难有明显的插画风格特征，这样的结果就是用户很难记住你，所以对于插画差异性的考虑也是一个很重要的点三、插画组件库构建的 3 个步骤对于设计师来说，最重要的还是如何将插画组件库落地了，总结下来可以分为 3 个步骤：插画风格推导、插画组件库搭建、插画组件库应用1. 插画风格推导插画风格我们主要可以从 3 个方面去推导：品牌、用户、产品① 品牌我们需要了解的是品牌的调性、色彩、辅助图形、logo 特征、品牌资产...，这些都是我们构建品牌插画库的基础参照。比如下面这张图是梳理的出来的 fashion data 的品牌相关元素：② 用户&产品了解我们的用户和产品，我们可以用以下这个电梯宣言的方法去梳理：关于用户：为了满足「目标用户」，他们的「什么痛点或需求」关于产品：我们的「产品名称」，是一个「怎么样的产品类型」；它可以「关键优点，通过什么样的功能，为用户带来什么样的价值」；而不像「市场上某竞品及其特点」；我们的产品是一个「主要独特价值点」比如，下面这张图是对 fashion data 的用户和产品进行的梳理，去快速的了解用户的需求痛点、产品定位、产品价值...了解完品牌、产品、用户之后就要推导出插画库的风格方向了。在讨论 fashion data 的插画风格选定的时候，其他几组插画在风格上差异性和个性表达上虽然会比较强，但是和 B 端产品的定位差异比较大，最后还是选定了普通的矢量风格插画风格，它能比较好的像用户传递出 B 端产品的高效、专业、严谨的品牌形象，后期差异化主要是通过融入品牌元素和塑造插画角色这 2 个手段来体现。2. 插画组件库搭建插画组件库的搭建，可复用性是我们考虑的重点，要达到这个目标，我们构建分子的时候就应该尽可能的把插画拆分成比较细的分子，比如头部我们可以拆分成不同角度的基础头型、发型、表情...① 角色组件定义角色基础的形体比例、肢体细节形体比例、肢体细节基本上就能够确定我们的角色是何种特点，比如，我们常见的互联网扁平插画风格就和我们的正常人物比例、肢体细节比较接近一些，但是一些欧美的插画风格经常会用很夸张的比例造型来塑造个性的角色，比如头特别小，肢体特别大。还有不同人物的比例也会有所不一样，比如男性女性的黄金比例是 9a（九头身），小孩的比例大大约是 4a，但这不是固定不变的，还要看具体的插画风格。为角色搭建灵活的骨骼系统构建组件库，我们自然是希望我们的插画能够和人的骨骼一样，能够灵活的做出各种动作，这就要借助于灵活的骨骼系统了，通常情况下我们可以将我们的人体骨骼拆分成以下的组织。在组织的连接处，我们尽量都能够采用正圆形，这样在变换动作的时候才能够更好的衔接上，大家可以看看传统的皮影人偶也是采用的这种连接方式，才能在舞台上作出灵活的动作。建立不同角度下的表情、动作、服饰等组件人物的应用场景不仅仅只有正面的角度，还有其他的角度，我们一般只需要设计正面、半侧、正侧这 3 个角度即可，在这 3 个角度我们需要构建不同的表情、动作、服饰...尽可能满足角色在不同场景的使用需求。② 通用组件通用组件我们一般基于用户场景来制定。比如下面的这个案例，fashion data 是一个高效的跨境电商数据管理平台，主要针对店铺运营人员，为他们提供快速管理店铺商品、直观查看店铺经营数据等服务，所以用户的场景主要办公场景和业务场景，办公场景的元素有比如：书桌、电脑、办公用品...；业务场景的元素有，比如：仓储、物流、数据、商品... ，最后我们再基于这些元素去制定通用的组件。③ 背景组件背景组件一共可以分为 2 种类型，场景背景和纹理背景。场景背景一般是基于某个特定的场景来制定的，用来交代画面所处的环境，比如室内背景、白天、黑夜、晴天...纹理背景一般是用来装饰和丰富背景，比如下面的插画，加了背景纹理插画明显层次和画面更加丰富了。3. 插画组件库应用搭建完组件库之后，就可以在产品运营、线下物料、产品界面使用它们来提升设计的效率了。当然随着业务不断的变化和用户场景的变化，我们的插画组件库也应该及时的扩容和优化。写在最后需要提醒的是，插画组件库的目标是帮助那些重复、且设计质量要求不高的设计需求提效，而设计难度较高的设计需求还是需要设计师来处理，而这才是设计师能够真正体现价值的地方，同时，把时间节省出来，设计师才有精力去思考更多更有价值的事情。本篇来源：优设网原文地址：https://www.uisdc.com/illustration-component-library-design-guide
用户 权限 系统 导语不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但数据表明用户在面临授权请求时会非常谨慎地判断。那作为设计师，我们如何通过用户体验设计影响用户的 App 授权行为，以提高用户的授权可能性呢？授权相关设计细节分析：简单的微信授权登录，没想到设计细节如此惊艳！现在很多网站产品和 APP 产品都不再固执地建立自己的用户账户体系，而是使用了微信授权登录的方式来降低获取新用户的门槛，这一方式对产品方和用户来说都有很多好处，例如让注册时操作成本更低，用户也不需要记录各个平台的不同账号等等，但是这种登录方式也带来了一些隐私方面的问题。阅读文章 > 一、背景介绍相信大家都遇到过这个令人头疼的场景，当我们下载一个新的 App 并尝试使用时，扑面而来的是接二连三的授权弹窗，请求我们给 App 授予各种权限。若我们不授予权限，很多功能都无法正常使用。这是因为不论是 iOS 系统还是 Android 系统，手机系统厂商都设计了一套授权机制。手机系统厂商之所以设计授权机制，是出于两方面的考虑：一方面是为了符合隐私法规的要求，保护用户的信息及隐私。例如我国于 2021 年 11 月 1 日起正式施行的《个人信息保护法》中规定“App 不应以非正当合理的方式强迫捆绑和收集用户个人信息，如因用户不同意收集非必要个人信息或打开非必要权限，App 拒绝提供业务功能“。另一方面是出于用户体验的考量，例如 iOS10 以后的系统都会在用户使用 App 前询问用户 “是否允许使用移动数据”，这一定程度上避免了用户的数据流量被无端消耗。但是 App 想要顺利地拿到用户权限并没有那么容易。根据 2020 年国家网络安全宣传周组委会回收的 32 万份“App 安全意识保护公众调查问卷“结果显示，88.5%的受访者对于 App 申请手机权限会进行理性分析，谨慎授予权限。当 App 无法顺利地拿到用户的权限，则可能无法给用户提供优质的使用体验；用户使用体验的不佳最终会导致用户的流失。但是 App 的授权设计被很多产品开发及设计师忽略，很多 App 在用户首次使用时就连续弹出 n 个授权弹窗，这很有可能让用户在 3s 内放弃这个 App。因此如何通过用户体验设计提高用户对 app 进行授权的可能性，对于一款 App 来说，是极其重要的。不同的手机系统有不同的授权流程，本文的研究范围将集中在市场占有率最高的 iOS 系统和 Android 系统上。下文会先介绍 App 授权的基本信息，然后再介绍如何为一款 App 设计优秀的授权体验，提高用户的授权可能性。二、App 授权基本信息1. 权限列表在 iOS 系统和 Android 系统中，需要用户授予的权限是具有一定差异性的，详细的权限列表见图 1。iOS 系统将权限分为用户隐私权限和系统权限，这两类权限都需要用户授权。两者的区别体现在授权弹窗上：用户隐私权限允许 App 开发者在弹窗中添加简短的自定义提示语；而系统权限不允许 App 开发者添加自定义提示语，只能使用系统固定的提示语。常见的用户隐私权限主要包括定位服务、通讯录、日历、照片、蓝牙共享、麦克风、语音识别、相机等，而系统权限主要包括无线网络与蜂窝、通知、VPN、键盘。Android 系统将权限分为危险权限和普通权限，其中危险权限需要用户授权，而普通权限不需要用户授权。常见的危险权限包括：定位服务、通讯录、日历、麦克风、相机、存储。在 iOS 系统中经常需要用户授权的无线网络与蜂窝、通知、照片权限在 Android 系统中属于普通权限，不需要用户授权。2. 授权流程&授权弹窗那 iOS 系统和 Android 系统的这些权限都是如何让用户进行授权的呢？两个系统分别设计了一套授权流程让用户进行授权操作，用户只需要在用于授权的模态弹窗上点击一下就可以选择是否授权，这样简化了用户的授权步骤。若用户同意授权，则可以正常使用相关功能；若用户拒绝授权，则无法正常使用相关功能。下图呈现了 iOS 和 Android 系统授权弹窗的基本样式，主要包含授权标题、授权提示语、和授权操作按钮。两个系统的授权弹窗差异主要体现在授权弹窗提示语和授权弹窗弹出次数两个方面：在授权弹窗提示语方面，iOS 用户隐私权限的授权弹窗是允许 App 开发者在弹窗中添加简短的自定义提示语，但是 iOS 的系统权限授权弹窗和 Android 的授权弹窗都不可以自定义提示语。授权弹窗弹出次数与用户拒绝授权后的流程相关。iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则用户只能在系统设置模块自行打开权限开关。而 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，则下一次进入该场景时，App 依然会弹出系统授权弹窗请求用户授权。3. 预授权（pre-permission）正如上文提及的，由于 iOS 系统的授权弹窗只会出现一次，若用户第一次没有同意授权，则下次只能在系统设置界面自行打开权限开关。尽管从 iOS 8 开始，App 已经可以在界面中将用户直接引导到系统设置界面进行授权，但操作成本依然很高。此外，由于 iOS 系统的用户隐私授权弹窗只能添加简短的提示语，iOS 的系统权限的授权弹窗和 Android 的授权弹窗不可以自定义提示语，有些用户很难理解为什么需要授权。为了解决拒绝后再次授权操作成本高和用户理解成本高这两个问题，出现了预授权（pre-permission）的概念。预授权是先弹出自定义的授权界面，让用户做出选择。如果用户同意，则弹出系统授权弹窗；如果用户不同意，则不弹出系统授权弹窗。虽然对于用户来说，在体验路径上多了一个步骤，但是给用户多保留了一次通过系统授权弹窗进行授权的机会，相当于降低了用户的试错成本。关于哪些权限适合设计预授权，下文会进行分析阐述。三、App 授权设计那在了解了 App 授权基本信息后，我们该如何为一款 App 设计好的授权体验，提高用户的授权可能性呢？在这里可以运用 material design 授权模型和 CREATE 行为漏斗模型进行授权设计。1. 第一步：确定 App 在 IOS 和 Android 系统上分别需要哪些权限首先，产品经理和技术人员需要罗列出 App 在 iOS 系统和 Android 系统中哪些权限需要用户授予。在这一步要遵循的原则是：不要向用户获取非必要的权限。2. 第二步：利用 Material Design 的授权模型对权限进行分类，设定授权时机并判断是否需要预授权在明确了要向用户获取什么权限后，设计师可以利用 material design 中的授权模型对权限进行分类，设定每个权限请求的时机，并判断是否需要预授权教育。谷歌的 material design 设计规范是从两个维度考虑授权设计：权限重要性和权限明确度，基于这两个维度将授权场景分为了四类。虽然这是 Android 系统的授权模型，但同样适用于 IOS 系统。① 预先请求授权（Ask up-front）重要性高且容易理解的权限可以在用户第一次打开 App 时就请求授权，因为如果用户能轻松理解该权限的使用目的和重要性，那么预先通过系统授权弹窗上进行授权对用户而言是最快捷的授权方式。例如 iOS 的无线网络和蜂窝数据权限就属于该类别，因为用户知道若不授予权限，无法正常使用很多功能。定位权限在打车 App 中也属于该类别，因为打车前定位是用户的共识，所以打车 App 可以预先请求用户授予定位权限。但是对于有些权限而言，在用户第一次打开 App 时就请求授权是很容易被拒绝的，如：通知权限。因为用户对应用的信任感在一开始是最低的，而且在一开始缺乏使用场景，用户并不清楚权限的使用目的。② 在使用场景中请求授权（Ask in context）用户容易理解但重要程度不是非常高的权限适合在使用场景中直接向用户请求授权，如通讯录、麦克风、相机权限。因为在使用场景中请求授权时，用户对权限的使用目的有预期，同意授权的可能性更高。例如：在需要上传图片的场景中，请求用户的相册权限，用户一般都愿意授予。③ 预先教育后请求授权（Educate up-front）重要但不容易理解的权限可以在用户第一次打开 App 时，对用户进行教育后再请求授权，如：通知权限和通讯录权限，它们都属于用户敏感权限。如果通知权限和通讯录权限对一款 App 而言非常重要，建议设计师可以设计预授权页面对用户进行教育，再请求用户进行授权。④ 在使用场景中先教育再请求授权（Educate in context）重要程度不算高而且用户不容易理解的权限适合在在使用场景中先教育用户再请求，例如：非通讯软件的通知权限，因为用户开启通知权限时会顾虑有消息干扰。那需要教育的这两类权限该用什么方式教育呢？由于系统授权弹窗的自定义提示语有字数限制，所以可以使用预授权的方式进行教育。使用预授权方式进行教育的权限主要有以下特征：用户觉得可能会被打扰的权限，如：通知权限；用户觉得很涉及隐私的权限，如：通讯录权限、定位权限；若设计师希望对某些权限进行详细的说明，也开始采用预授权的方式进行教育，例如：相机、麦克风等权限。总的来说，授权时机可以分为两类：第一次打开 App 时授权、在使用场景中授权。从是否需要教育的维度来看，分为直接通过系统授权框授权、通过预授权的方式先教育再授权。但是同一个权限在不同的 App 中可能会属于不同的区间，所以设计师在分类时，需要根据 App 的功能特点具体考虑。3. 第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗那在确定了合适的授权时机和是否需要预授权之后，设计师要把注意力放在单个权限的授权弹窗设计上。想要成功地说服用户授权，那设计师应着眼于人们产生授权行为的心理动机，从用户心理出发进行设计，让设计影响用户的行为。这里可以运用到一个模型----CREATE 行为漏斗模型，用来挖掘用户同意授权的整个心路历程。① 什么是 CREATE 行为漏斗模型（CREATE Action Funnel）CREATE 行为漏斗模型是 Stephen Wendel 博士在《Designing for Behavior Change: Applying Psychology and Behavioral Economics》一书提出的概念。这个模型展示的是人们决定做出某种行为所经历的路径，从接收提醒（Cue）到第一反应（Reaction）到分析评估（Evaluation）到检查能力（Ability Check）到判断时间压力（Time Pressure），最终决定是否采取行动（Experience）。② 运用 CREATE 行为漏斗模型设计CREATE 行为漏斗模型在用户授权行为上的运用如下：Cue：屏幕上弹出授权弹窗，用户接收到授权提醒Reaction：用户会凭直觉做出反应，在瞬间决定是否授予权限Evaluation：用户会有意识地评估授予权限的利弊Ability Check：用户会评估自己是否有能力完成授权操作Time Pressure：用户会判断授权是否紧急，是该立即授权还是可以稍后授权如果我们想通过设计达到说服用户授权的目的，那我们需要减少用户在行为漏斗的每个阶段所遇到的阻碍，在每个阶段推动用户授权。下文会从预授权弹窗的设计和系统授权弹窗的设计两个方面分别阐述。预授权界面的设计阶段一：用户接收提醒（Cue）首先，在用户接收到授权提醒时，要让用户明确地感知到 App 在请求用户授权，这样才会开始后续的思考。那如何设计预授权弹窗才能让用户有强烈的感知呢？强化提示的力度，并移除容易让用户分心的元素：（1）在视觉上采用容易吸引用户注意力的色彩、字体、插图等；（2）全屏形式会比半屏或弹窗形式的提醒更明显，同时可以降低多余元素带来的信息噪音，让用户聚焦授权提醒上；用清晰的文字提示用户 App 想要请求授权。阶段二：用户做出第一反应（Reaction）当用户看见授权提醒的瞬间，直觉会告诉用户想不想授权。而用户的直觉取决于该任务是否让用户感到愉快或让用户觉得重要。设计的界面要引发用户正向的感受，让用户觉得授予权限是正确的选择。提示语要措辞清晰且语气诚恳，避免用户的习惯性拒绝。阶段三：用户分析评估（Evaluation）在用户在做出直觉判断后，会有意识地分析授权的利弊。那在该阶段，授权弹窗要让用户明白同意授权更有利。例如，若用户得知授予通讯录权限后才可以添加通讯录的朋友，他们同意授权的可能性较大。那设计如何该影响该阶段呢？通过提示语强调同意授权的好处，说明拒绝授权的后果，例如提示语中可以说明“App 要获取这个权限的目的是什么，如果拒绝授权的后果是什么”。通过提示语打消用户的顾虑。例如关于通知的预授权弹窗中可以明确说明：开启通知后不会打扰用户。提示语可以通过社会认可强化用户的信任度，例如表示很多人都同意授权。在界面上限制操作选项的数量，避免提供过多的选项干扰用户的分析。阶段四：用户检查能力（Ability Check）如果用户评估后发现同意授权更有利后，他们会想了解如何操作才能授权，要克服多少阻碍。那此时该如何设计呢？授权界面需要明确地告知用户该如何授权，例如通过清晰的提示语、插画，或播放一小段简单的动画，展示如何授权。授权界面上要降低授权操作的难度，例如将同意授权的按钮设置为默认按钮，放在用户容易触达的位置。尽量让授权操作与系统授权弹窗的操作一致，例如系统授权弹窗上的“同意”一般居右，预授权界面上也可以采用一致的按钮设计。阶段五：判断时间压力（Time Pressure）在用户明确了授权对自己有利而且自己有授权的能力后，用户会判断授权任务是否紧迫。那在设计上，我们可以利用人们的损失规避心理。通过提示语告知用户选择稍后授权需要付出更多的精力，操作会更繁琐。通过提示语告知用户立即授权的好处更多。预授权界面的设计原则总结：1. 采用全屏的设计形式会比半屏或弹窗形式的提醒更明显，降低多余元素带来的信息噪音，让用户聚焦于授权提醒2. 在视觉上采用容易吸引用户注意力的色彩、字号、插图等强化提示力度3. 请求授权的提示语文案需要清晰、语气诚恳，结构可以如下：（1）App 要获取这个权限的目的是什么；（2）拒绝授权的后果是什么，如：无法使用功能；（3）打消用户顾虑，如：请求通讯录权限时说明不会侵犯隐私，用户可以随时关闭；请求通知权限时说明我们不会打扰用户；（4）强调立即授权比稍后授权更有好处，例如：稍后授权会付出更多精力4. 降低授权操作的难度：（1）在界面上限制操作按钮的数量（2）尽量让授权操作与系统授权弹窗的操作一致，例如：将同意授权的按钮设置为默认按钮，放在用户容易触达的位置，如左右布局的右侧，或者上下布局的上方。5. 利用插画、动画、或简单文字明确告知用户授权的操作方式6. 利用插画、文字等强化用户的信任度，表示很多人都同意授权系统授权弹窗的设计IOS 和 Android 的系统授权弹窗并不允许用户进行过多的设计，只有 IOS 用户隐私权限的授权弹窗允许在弹窗中添加简短的自定义提示语，弹窗的样式并不能做太多设计。设计师能影响的主要是 CREATE 行为漏斗的分析评估阶段（Evaluation）。考虑到提示语的字数限制，系统弹窗的提示语结构可以设计为：说明授权好处或者说明拒绝授权的后果，例如：如果不授予权限，您将不能使用什么功能。涉及到有些用户比较敏感的权限（如定位权限、通讯录权限），可以在授权弹窗中说明权限的使用目的后，再添加打消用户顾虑的语句，如下图中写的“App 彻底关闭时不会收集您的位置信息”。4. 第四步: 设计授权被拒绝后的交互流程即便设计师按照上述方式进行了授权设计，提高了用户的授权可能性，但依然会出现用户拒绝授权的情况。那我们如何设计用户拒绝授权后的交互流程，以改善用户稍后授权的交互体验呢？① 预授权被拒若用户在预授权界面拒绝授权，并不会触发系统授权弹窗的流程。当用户再次进入使用场景时，可以重新出现预授权界面，让用户决定是否授权。或者在权限的相关使用场景中设计文字提醒，提示用户进行授权。② 系统授权弹窗被拒iOS 系统的系统授权弹窗被拒如果用户在 iOS 系统授权弹窗中拒绝授权，系统授权弹窗不会再次出现。但设计师可以在用户点击“拒绝授权”后设计明显的“未开启授权”的提示，提示用户若想使用相关功能就得打开该权限，并给用户提供一个设置权限的按钮。用户点击该按钮后，可以快速跳转到设置模块的授权页面，减少用户的操作步骤。未授权提示的样式可以设计为弹窗，也可以设计为全屏。若权限重要性高，那可以将提示设计为全屏，强化用户的感知。下图展示了腾讯视频的案例：当用户拒绝网络权限后，下次进入 App 时，会弹出未授权网络权限的弹窗，并在弹窗中提供了快速跳转设置权限的按钮。Android 系统的系统授权弹窗被拒由于 Android 系统的授权弹窗只要用户未勾选“不再询问”就可以反复出现，若用户第一次没有同意授权，只需要在用户拒绝授权后，弹出一个轻量级弹窗提示用户未开启授权即可。用户下一次进入该场景时，App 依然会弹出授权弹窗请求用户授权。总结总的来说，不论是对 iOS 还是 Android 系统的 App 而言，获取用户权限都是极其重要的，但是数据表明用户在面临授权请求时会非常谨慎地判断。因此，通过提高用户体验设计提高用户的 App 授权可能性是非常有必要研究的方向。虽然 iOS 系统和 Android 系统的权限列表具有差异性，授权流程和授权弹窗的设计上也有差异性。但是对于设计师而言，为 iOS 和 Android 系统的 App 设计优秀的授权体验的方式是大同小异的。设计流程总结如下：第一步：确定 App 在 iOS 系统和 Android 系统上分别需要哪些权限第二步：从整体考虑，利用 material design 中的授权模型对权限进行分类，设定授权时机，并判断是否需要预授权第三步：着眼于单个权限，基于 CREATE 行为漏斗模型设计预授权弹窗和系统授权弹窗第四步：设计授权被拒绝后的交互流程授权设计过程中所遵循的设计原则总结如下：绝对不获取没必要的权限强化授权提示从利他角度设计授权弹窗的提示语，打消用户顾虑，提高用户信任度降低授权操作的难度，包括为用户拒绝授权后的再次授权提供快速跳转欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/app-authorized-design
工具 图像 人工智能 2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。正好年底，我重新翻了一遍自己的AI收藏夹，从中整理出20款免费且实用的AI工具推荐给大家，无论是做设计还是日常学习工作都能用得到。2023年已经开始，就让这些AI工具给我们的生产效率来一次新升级！1）AI聊天机器人如果要说一个2022年底最受关注的AI工具，无疑就是OpenAI公司推出的聊天机器人chatGPT。它通过模拟人类对话的方式与用户进行互动，用文字回答各种用户提出的问题，甚至可以帮用户写工作报告、写小说、写游戏大纲甚至写代码，连马斯克用过之后都直呼“可怕”。AI聊天机器人筛选、组织及整合信息的能力给我们的信息获取方式带来革命性的改变，甚至可以充当智能个人助理，协助我们处理生活中各方面的问题。了解chatGPT的详细信息：地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。阅读文章 > ChatGPT虽然强大但也局限性，比较明显的一点就是它没有联网，所用的数据集都是2021年之前的。不过在ChatGPT发布之后，不少类似的产品纷纷涌现，其中比较出色的有Youchat。Youchat网址直达：https://you.com/（需要搭梯子）与ChatGPT相比，Youchat在形式上更像一个搜索引擎，没有繁杂的注册流程，搭上梯子就可以使用，而且是联网状态，这意味着它可以实时从互联网获取信息并反馈给用户。Youchat与用户聊天的界面它不仅能像ChatGPT一样与人对话交流，也能像Google一样呈现与问题相关的资料——这些资料是经过智能筛选的、与问题最直接相关的资讯、图片和视频等，能极大程度的提升我们或许信息的速度和效率。但目前Youchat与ChatGPT一样也存在同样致命的问题：不能保证答案是100%正确，并且可能编造看似正确的答案，所以大家使用时仍要保持警惕。经过Youchat筛选后呈现的内容2）AI翻译工具Deepl：https://www.deepl.com/translator（搭梯子速度更快）腾讯交互翻译Transmart：https://transmart.qq.com/zh-CN/index翻译软件是我们在生活和学习中不可缺少的工具，如果要向大家推荐一款我觉得最好的翻译软件，无疑就是Deepl了，它依托神经网络和最前沿的人工智能创新技术的支持，能轻松翻译出逻辑通畅、语句自然的结果，甚至能用上俗语和专业术语，翻译文本越长效果越好。腾讯也出了一款交互翻译软件Tencent Transmart，融合了腾讯人工智能实验室自研的交互式机器翻译、神经网络机器翻译、 统计机器翻译、语义理解、信息检索等技术，可以参照原文上下文和机器翻译知识，实现精准组词，加快人工翻译过程中的输入效率。Tencent Transmart还有一个好处就是支持大型文件的免费翻译，如docx、PDF和PPT都可以直接上传，最大支持300页和40MB的文件。3）AI文案工具WantQuotes 据意查句：https://wantquotes.net/WantWords 反向词典：https://wantwords.net/详细介绍：https://www.uisdc.com/wantquotes这2款是清华大学研究团队出品的文案处理工具，利用最前沿的人工智能（AI）和自然语言处理（NLP）技术，帮助人们更方便快捷地处理阅读、写作、查找信息等流程。WantQuotes（据意查句）可以按照我们想要的意思快速查找出相关的名言、诗句、俗语等 ；WantWord（反向词典）可以帮助我们轻松找到与给出词语相似且更高级的词汇，还支持中英双语同译和互译。4）AI录音工具网页直达：https://podcast.adobe.com/enhance?utm_source=FutureTools.io（需登录账号后使用）Adobe新出一款人工智能录音处理工具，如果你在录制好音频后发现有很多环境杂音，使用这个工具可以快速清除背景杂音，并增强人声的清晰度，呈现出犹如在专业录音棚里录制出的效果。网站免费使用，仅支持MP3 和 WAV 文件，单次可处理时长在1小时以内小于1GB的文件。5）AI配色工具网站直达：https://huemint.com/brand-intersection/详细介绍：https://www.uisdc.com/huemintHuemint是一个内置了AI色彩模型的配色网站，里面的「creativity」调节滑块可以控制配色方案的对比度。默认为 1.3，数值越大，配色就越活跃，对比也越明显，反之生成的色彩会越趋于相似和平缓。它其特点包括：支持生成等阶色、渐变色和 2~11 颜色的配色方案，无需注册，在线免费使用。使用 AI 模型智能生成和谐的配色，且可以人为控制配色倾向和色彩对比度。配色效果可视化，实时呈现在 UI、VI、文图排版、插画等模板上，直观明了。6）AI图片处理工具2022年为大家推荐最多的就是各种AI图片处理工具，人工智能技术的发展让原本繁琐的抠图、修图变得轻松，甚至能帮我们实现照片打光、黑白图片上色和无损放大。身为设计师，利用好这些工具可以让我们的工作是事半功倍~① 智能抠图Pixian：https://pixian.ai/?ref=theresanaiforthatEXPERTE：https://www.experte.com/background-removerToolkit：https://toolkit.boolv.tech/background-remover以上3款都是免费的在线抠图工具，打开即用无需注册，从上传到抠图完成只需几秒。扣图的质量非常高，处理头发这样复杂的对象也有不错的效果，上传下载图片不会出现压缩的情况，可以放心使用。Toolkit的抠图效果② 智能修图Hama：https://www.hama.app/Magic eraser：https://magicstudio.com/magiceraser（下载有限制）以上2款是在线免费修图工具，借助AI将图片不需要的某些元素完美消除，并通过算法自动修补残缺的部分，达到毫无修补痕迹的效果。第二个工具Magic eraser的修补效果非常惊人，但是不开通会员的话智能下载600*600px的低分辨率效果图，大家可以按自己的需要使用。③ 无损放大Bigjgp：https://bigjpg.com/waifu2x：https://waifu2x.udp.jp/index.zh-CN.htmlImgupscaler：https://imgupscaler.com/#上面的这三款工具都是效果非常棒的图片无损放大工具，利用人工智能技术可以将图片清晰度提升为原来的2倍甚至4倍，并实现降噪，无论是对摄影照片还是二次元绘画都有很好的效果。④ 智能打光网址直达：https://clipdrop.co/relight详细介绍：https://www.uisdc.com/relightRelight 是一个在线智能打光网站，使用它可以对照片添加光源，当光源移动的时候，人物身体上的亮部及投影也随之发生改变，仿佛是真实灯光照在立体模型。而除了照亮图片主体，Relight 还能实现改变图片整体布光、添加多个光源、修改灯光的颜色等效果。⑤ 黑白图片上色网址直达： https://palette.fm/详细介绍：https://www.uisdc.com/palette-fmPalette.fm 是一个利用 AI 模型为黑白图像上色的在线图片处理网站，无需登录注册。将一张照片上传后，只要 10 秒左右的时间，网站就能提供一个基本的着色版本。除此之外，Palette.fm 还有另外 19 种不同的色彩滤镜，每一种都会生成不同的上色效果。7）AI图像生成工具2022年是AI图像生成工具的爆发之年，从Disco Diffusion、Dall·E 2、Midjourney再到Stable Diffusion，AI图像生成工具的技术进步及发展速度惊人，但随之而来的人类艺术家与AI工具之间的冲突也日益尖锐。特别是前段时间Artstation上艺术家们集体掀起了一次首页刷屏活动，旨在反对AI模型未经允许盗用艺术家作品进行数据集训练的行为。在Artstation首页刷屏的反AI图标现在大家对AI图像生成工具的态度也很割裂，一方面是认为它将为艺术创作和创意生成带来变革性的进步，而且也已经有人将AI图像生成工具加入工作流；另一方面则认为它会极大侵犯人类艺术家的生存空间，并对未来的版权问题及带来毁灭性打击。但无论如何，大家都无法否认未来AI图像生成工具肯定会持续发展，并进一步参与人类的艺术创意活动汇中。对普通的设计师或插画师来说这种影响或许还不太明显，但对这一无法阻止的新技术趋势有基本的了解还是非常有必要的：① 设计师必须了解几款AI图像生成工具：Disco Diffusion、 Dall·E 2、Midjourney、Stable Diffusion的介绍及其使用方法：人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > ② 适合入门尝试的2款AI图像生成工具：Dream Stuidio和 Dreamlike-Art免费开放！人人都能轻松上手的AI绘画工具DreamStudio大家好，我是和你们聊设计的花生~之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce阅读文章 > 效果惊人！内置5种模型的AI图像生成神器「Dreamlike.art」大家好，这里是和你们聊设计的花生~之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。阅读文章 > 以上就是为今天大家推荐的 20个实用的人工智能工具，希望在新的一年里能给各位设计师的工作和生活带来帮助。 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~本篇来源：优设网原文地址：https://www.uisdc.com/20-ai-tools
设计师 用户 需求方 如今的互联网岗位不断精细化，设计岗位也是如此，设计团队内的视觉设计师通常分为产品体验设计师和运营视觉设计师。产品体验设计师主要负责产品功能及体验设计，并为用户提供良好的使用体验。运营视觉设计师主要负责运营活动设计，通过设计引导用户关注参与活动，达成拉新、促活、成交等运营目标，有时兼顾产品功能和品牌推广的作用。更多运营设计干货：运营设计师如何快速上手主会场设计？来看京东的规范流程总结！文章主要讲述的是新手运营设计师在经验不足的情况下，如何快速上手主会场设计，以及通过流程的详细理解与归纳，巧妙避免由于不熟练而导致工作效率低下的问题。阅读文章 > 一、运营设计都干啥运营设计的工作范畴相对繁杂，不仅更换频率高，种类也比较多。从工作内容上可以细分为产品线上、新媒体平台、线下和其他辅助内容 4 大块。1. 产品线上包括专题、活动页面和入口设计；专题页：是指有主题的活动页面，我这里列举的是非营销主题的落地页，一般用来展示主题信息，以信息呈现为主要目的。运营活动：是以营销（拉新、促活等）为目的的落地页或系列页面。按照项目重要性，可分成 S 级、A 级和 B 级不同等级。AB 级一般指热点或日常运营活动，S 级指业务年度大促活动，往往兼顾多种目的并增加游戏玩法，设计时要通过合适的视觉效果来引起用户的兴趣并引导转化。这里需要提一下运营玩法，根据业务的目标策略常见的有增长类活动，比如助力领红包，砍价，团购等形式，以分裂拉新为主要目的。还有一类独立完成的小游戏，红包雨、抽奖等，以增加日活为目的或搭配综合活动。入口设计：包括各类 Banner、弹窗、浮窗和开屏页等广告位，是设计师日常接触最多的内容。虽然体量较小，但是运营活动转化重要的一环，直接影响活动效果。以 2021 房产春运为例，活动兼顾拉新、促活和品牌功能推广目的，主会场展示各类产品功能，并设有游戏专题页用来展示活动任务和奖品，小游戏简单好上手可以增加用户粘性，游戏任务深入到直播看房和在线付定金功能中，为业务倒流，形成了良性循环。2. 新媒体平台各大社交和短视频平台是当前产品运营的重要途径，包括微信生态中的小程序、公众号、视频号和社群，抖音和小红书等短视频及内容平台。而为电商店铺服务的运营设计师是更加专职的运营设计师，负责设计产品店铺日常及促销活动时的首页，详情页等。3. 线下设计线下设计接近传统平面设计，需要设计线下宣传制品，包括手册折页、易拉宝展板、海报等其他印刷制品，根据业务属性可能还有店面装饰以及装备设计等。4. 辅助设计这里把其他会涉及到的设计内容统称辅助设计，其实并不严谨，因为单独拿出任何一项都是可以细说的专业领域，比如字体设计，品牌策划、IP 设计，VI 手册，规范设计等。这里就不展开细致阐述了。二、干就完了，还要分阶段？按照工作流程顺序，我们可以把运营设计分成三个阶段——设计前、设计中及设计后。每个阶段根据合作对象和目的的不同，工作方法也有区别。1. 设计前——沟通① 理解项目和体验设计师一样，在开始设计工作之前，我们要先充分理解需求的目标、背景和用户。项目目标常见的运营项目目标有拉新、促活、回流和转化，即获取新的用户、活跃老用户、让流失的用户重新回流，以及实现商业转化创造价值。其次是产品目标，即巩固产品策略、建立品牌形象、提高品牌美誉度、实现品牌价值。最后还有行业目标，即提高设计影响力与行业影响力，这个目标相对是比较长期持续的。项目背景项目背景是目标的动机，此项目是基于哪个产品功能设计的，有没有之前的项目需要延续或比较，是否基于节日或其他热点展开等，总之要充分理解立项的动机。目标用户依照活动上线的不同平台，可以把用户分为共域和私域用户，私域用户更加精准，可以通过专业的用户分析得到他们的普世特征，思想和情感需求等，洞悉目标人群的特征才能实现精准的设计触达。② 沟通技巧既然是和需求方沟通，那沟通方法和技巧是设计前的工作核心，如何有效沟通是很多年轻设计师需要学习和掌握的。以设计师的角度主动参与。需求方的设计能力参差不同，有可能就是设计小白，不能明确表达期望的效果和风格，作为设计师尽量主动提供参考，以达到可视化的沟通和讨论，并在沟通过程中确定方向，作为开展设计工作的依据。预判风险。首先要和需求方沟通排期，给自己留出充足的创作时间；还要和技术团队沟通实现性，规避不能完成的效果，保证项目的顺利进行。此外还要保持专业度，也就是保持理性，沟通时从项目本身出发，不带有情绪和偏见。2. 设计中——合理在设计过程中设计师会通过一些创意方法，运用一些表现手法，最终落地设计输出，呈现完整的作品。创意方法比如联想，夸张、幽默等；表现手法包括插画，合成，三维，动态等，这里也不做具体讲解了。我们来聊聊设计工作中的合理性，合理性包括设计呈现的合理性和工作流程的合理性。① 设计合理传统的平面设计又称视觉传达，其概念是以视觉媒介为载体，利用视觉符号表现并传达信息，所构成的主要要素是文字，插图和标志。运营设计的基础即为视觉传达的，要向用户快速有效的传达信息，所以信息展示的合理性至关重要。怎样才叫合理呢？要看设计的目的是什么？结果导向反推设计的合理性。视觉内容越直观越好，现在是碎片化信息时代，用户大多是没有耐心和时间的，所以我们要通过设计把要传递的信息进行整合排序，提炼信息的主次关系，可以把利益点和有效信息重点突出，快速抓住用户眼球。之后再用设计将产品与用户建立起良好的关系，渗透产品功能甚至品牌价值。举个小例子：人眼习惯最先阅读文字，其次是颜色，插画等，所以文字需要清晰明了，阅读感需要流畅。调整后的弹窗阅读感流畅了，信息的主次关系也更明显。② 流程合理细化流程可以让工作流程更加合理，可以最大限度的规避返工风险。确定视觉风格和初稿阶段，根据需求目标和主题选择适合的设计风格，并和需求方确定后再开始初稿的搭建，草图可以在设计小组内部审核后再深入设计，避免过早陷入细节，造成返工。二稿阶段，围绕关键词进行视觉创意，表达创意内容，展示设计手法，并完整的展示需求方所要体现的所有信息，让对方能够理解创意和信息布局的合理性。运用专业能力完成设计图，在调性，氛围和细节把控上做到高级感。3. 设计后——体/验设计图完成后并不意味着工作的结束，需要在设计还原上跟进。“体”意为体现，跟进技术实现的效果，通过走查保证和设计图的同步；线下制作需要通过打烊保证成品的效果和质量。“验”意味验证，需要和需求方一起关注数据，线上项目可以通过后台数据反馈活动效果，还可通过问卷、访谈等方式得到用户真实的反馈，从而优化设计策略和方向。一个验证的例子，下图是 58 到家 APP 首页的一个弹窗，目的是为微信社群倒流。由左侧的样式更换成右侧更为简洁的红包样式后，点击率有了明显的提升，设计样式的变化直接影响了数据的变化。通过这样的数据验证，设计师可以和需求方一起探索更优的视觉呈现，为业务赋能。此外，项目结束后的总结和复盘，可以把项目过程中遇到的问题及时列出，通过数据整理分析，沉淀方法和经验。三、最后唠叨几句设计是服务于产品和用户之间的工具，作为设计师具备专业的思维能力是有必要的，如商业思维 (从宏观到微观考虑问题)，产品思维 (以用户为中心，思考产品的价值)，营销思维 (让别人认识你)等，作为运营设计师可以加强营销思维的建立为业务服务。此外，文案能力和交互能力在工作中也应用甚广，有时一些文案和交互问题在具体设计中才会暴露，需要和需求方和交互设计师一起共创。最后的最后，要与时俱进，不光是审美和表现技法上要与时俱进，运营设计师往往要做些内容相关的需求，对时事热点和话题也需要具有一定的敏感度，眼界上也要与时俱进，才能迸发出更多的创意和灵感。字体设计保姆级全方位教学！万字干货前言在平时的工作中，我们是否有考虑过运营设计的商业目标是什么？阅读文章 > 互联网下半场，运营设计师的生存之道宜信BXD 运营设计组 - 梅晓晓：2018年是人工智能重点发力的一年，关于「人工智能会完全取代设计师」的话语层出不穷，很多从业者倍感危机。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/introduction-to-operation-design
文案 用户 产品 相比美观的视觉设计，清晰的文案在界面呈现中同为重要，好的文案不止赋予产品更好的体验，也能够拉近用户与产品的距离，优化文案也常作为可用性测试后改良产品用户体验的落脚点。如果说信息架构、逻辑流程是产品交互的筋骨，那文案无疑就是血肉。有时产品经理给设计的需求和客户提供内容会有错字，语句不通顺，若设计师能够快速发现就可以体现出自己的专业，一般懂文案的设计师沟通和表达能力都不会太差，写好文案对于设计师来讲无疑是一件锦上添花的事情。设计是文案的视觉化呈现，文案是设计的思维表达，两者相辅相成，好的设计一定是懂文案的。「文案」这个词看起来好像很简单，且主观感觉优先级略低，但并不意味着它容易表述。一个好的文案说明是需要从多个角度出发考虑的，表述不清晰就会对用户造成误导。那么设计师如何写出好的文案呢？掌握这些小技巧，可以输出更容易让用户理解的文案。更多UX文案教程：如何写出优秀的UX文案？来看高手的总结！如何写出优秀的 UX 文案？阅读文章 > 一、清晰（突出重点 弱化次要）通过可用性测试可以了解文案的哪些部分是清晰的，哪些是迷惑用户的。对不清晰部分的文案进行细微的调整，能够产生巨大的改变。文案超过两行就需要用户更集中精力阅读，用户从而难免产生排斥心理，如果文字信息真的很多，可以把一段话整理分类依次竖向排列，同样可以给用户清晰及高效的阅读感受。例如平安云的隐私政策更新提示弹窗界面，设计师通过行间距将文本内容进行了分组，并且对标题文字进行了加粗和加大字号的处理，用户读起来会比较轻松。要对文案做好内容的平衡，若一次性显示太多不必要的信息，会扰乱界面给用户带来不必要的阅读与操作压力，需要谨记只有在用户有需要的前提下才展示这样的文案说明。对于辅助的说明文字可以稍做隐藏，用户需要的时候支持查看；提示文字不是只能设计成平铺直叙的只读文字，花了心思便可做得恰到好处。如下图，平安云账号中心的实名认证界面，关于对单位证件号的提示说明文字内容被隐藏，需要 hover 在问号 icon 上才会弹出提示，提示的内容以表格的形式呈现，并对各账号进行了举例说明，更便于用户理解，从而无障碍地进行表格的填写。尽量使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。间接、暧昧模糊的说法，生僻和过于“文雅”的用词，会增加用户的认知成本，所以应当尽量避免使用这类无法识别的词汇。二、一致（规范字数 结构一致 全局一致）一致性的文案设计可以帮助用户建立产品工作方式的心理模型，从而获得更好的用户体验。如果在产品中对同一事物使用不同的术语，比如用户点击页面 A 去到的是页面 B，用户就会感到困惑，在编写文案时保持一致性很重要。一些具体准则可以帮助我们达到这一目的。1. 规范字数：不同组件平均应该有多少个词？每个按钮一个、两个或多个词。尽量控制描述文字的字数，保持一致，使页面整齐美观。按钮的文字也尽量保持字数一致，可保证页面的稳定性。我们有时候看到很多文字有长有短，排除一些异常情况，确实是有很多情况我们可以对文案进行优化的，不是吗？2. 结构一致：确定文案的结构，是否仅包括一个动词或是动词与名词的组合（例如“动词”+“名词” 或 “动词” +a+ “名词” ）卷又卷不动，躺又躺不平，摆又摆不烂，死又死不了…哦吼，这是很多人的现状。瞧瞧这吐槽的段子都对称着，有些还压上韵了，我们写产品文案的时候就照着这个标准卷吧！3. 全局一致，同一个名词在产品中要保持一致，行动点名称尽量与跳转页面标题一致。如果你的新增按钮文案为新增 XXXX，那尽量所有的新增按钮文案都这样描述，不要有的是新增 xxx,有的是添加 XXX。例如：对内容的增删改查，在很多 B 端产品的页面表格操作下，通常会见到查看按钮，点击可看详情，这边建议尽量把查看改成详情呢，点详情不管接下来看到的是弹窗还是进入下一级页面，其标题叫详情或者 xxxx 详情，就做到了行动点名称与跳转页面标题一致有没有，这只是一个例子，我知道你可以做到举一反三。三、简洁（言简意赅 通俗易通）1. 使用熟悉的单词和短语也有助于减轻用户的认知负担。编写对话内容时应尽量避免使用“行业术语”“科技术语”、“专业词汇”、“方言用语”等（如 404、505、错误码 XXX 之类的描述），避免写出不具普遍性的对话内容，避免表述一件事情时绕来绕去，如使用双重否定表示肯定等让用户不易懂的文案，减少用户在操作前总是要去思考和陷入不知所措的情况。让用户明确的知道当前发生了什么，进而正确决定其接下来的行为。一个事情说了半天人家没明白你说的啥，那就说人话吧……特殊情况除外，例如你在疯狂星期四转发给朋友让他给你买KFC铺垫了很多很多巴拉巴拉的段子，朋友觉得你好有趣，一感动就跟你买了。当然这种情况你也可以直接说“我想吃KFC，给我买”，可能你朋友也会说“好的，买买买……”谁会拒绝一个打直球的吃货小可爱呐。建议对你的朋友足够了解后。再选择合适的措辞。正如我们在设计的时候是需要对用户足够了解才能写出更合适的文案。2、如果必须使用生僻的词汇，需要增加注释说明。发票金额是明白的，可开发票金额，哪些可以开，哪些不可以开，不表述清楚用户就不确定，需要通过注释去表述，腾讯云的设计还运用了公式去说明，相比文字描述“可开发票金额等于腾讯云可开票金额加云市场可开票金额”这样去进行文字说明要直观的多呐。3. 有效的文案应该是对话式的。告诉用户接下来的操作会导致的下一步的结果，就像与人在对话一样，这其实是一件比较难实现的事情，因为我们对所设计的产品以及每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试，看 他们是否懂我们使用的语言。四、尊重（尊重用户 提示友好）1. 永远站在用户的角度考虑，当出错的时候不要责怪用户或使用命令或强迫的语气，多给予用户理解包容与支持鼓励，专注于解决问题，让其感受到产品足够多友好，感受到被尊重。2. 即使是需要用户承担相应的责任，文案也要克制，使用相对的语气将问题出现的原因或可能出现的结果反馈给用户。腾讯云的账号中心-安全设置界面：安全设置肯定是用户非常关心的，对于每种操作的解释说明，都平铺展示，用户可以一眼就 get 到自己需要的设置在哪操作，怎么操作。心里有数，不慌不忙。在新的设备上去登录微信，之前的设备会退出登录，微信使用的文案描述规则是：先摆出事实告诉用户现状，再说如果进行接下来的操作会导致的后果。这段文字在这里被标红，着重强调的样式更容易让用户知晓。当微信在其他设备登录时，需要常用设备进去确认。使用“平淡的语气”提到了如果设备不在身边或不是本人登录可以会导致的严重后果，让用户谨慎操作。3. 尽可能提供补救措施，降低用户的损失，利用文案对用户情绪进行安抚。辛辛苦苦 P 的“照骗”忘记保存了，好心碎，下次打开的时候，美图秀秀提醒“你之前有尚未保存的图片，是否继续编辑？”惊不惊喜？好开心，赶紧保存下来，发个朋友圈。五、严谨（无错别字 专业科学 形成闭环）充分了解用户背景才能用词专业、精准，采用专业适当、精炼准确的词语高效的传达信息，帮助用户理解。基本用语要规范，避免使用错别字，词句需要表达完整；专业用语需要精准，并且是所属行业认可的通用语言，不使用对目标用户来说难以理解的词语；时间的表述也必须要明确。六、利他（用户为主 提示友好）文案的表述应该让用户感受到我们是为了他在思考，功能的描述也可以以对用户有益处的方式去表达。腾讯云-费用中心-用量明细下载页面：对于页面数据的展示说明清晰描述了只展示付费后的产品，关于时间线也只支持近 6 个月的下载，但如果用户想要更多就可以去哪里下载。这些友好清晰的提示都是设计师花了心思设计呀！页面内容如果加载时间长，提前告诉用户，数据加载可能耗时较长，如果用户有其他的事情先去忙，稍后再返回页面查看数据结果。这么清楚的描述，简直爱了。七、语气（语调统一 凸显品牌）语言风格，要基于自身的业务，符合产品的调性。作为以技术为支撑的产品，在表达过程中要体现严谨、专业的风格，避免使用太口语化的语言，尤其是俗语和网络用语。在合适的场景下，用更富有人情味的语气与用户沟通，反馈信息，会提升使用感受，现在的产品设计不仅仅是人机交互，更是人与人之间的交互，要给用户更人性化的反馈。如下苹果官网的一些文字提示写的有非常通俗易懂。八、标点符号正确使用标点符号以及字母的大小写这些都属于交互设计的细节范畴，使用它们时也需要做到切合时宜，它代表着产品的规范与科学性，连符号都用错了，你的交互设计怎么可能让用户信任？另外符号在语言规范中也有增强语气，加深语言力度的作用，所以说符号的使用在交互文案设计中也是非常重要的。1. 中英文大小写产品名称缩写需要全部大写，如：ESC、SLB；但是特殊的产品品牌，例如：XFlush，需特殊处理。全英文的标题、标签、菜单项等等都要遵循英文句式中首字母大写的规范，正确使用专有名词的大小写规范。遵从行业规范，符合用户的认知，不会逼死强迫症，也凸显了产品专业。2. 阿拉伯数字统计数据使用阿拉伯数字，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效；3. 标点符号可以省略不必要的断句点，帮助用户更加高效的扫视文本内容。元素单独出现时可以省略标点（例：标题、标签、输入框下的提示、悬停文本中的提示、表格中的句子）元素单独出现时也有需要加上标点（例：多句或多段的文案和列表内容、任何文字链前的句子）谨慎使用感叹号，感叹号用于表达强烈的情感，让文案显得过于感情化，容易让气氛变得过于激动和紧张，故尽量避免使用。九、文案不是万能的文案说明不可能解决所有的可用性问题，它并不能引导用户去操作一个拙劣的产品，若是产品设计有问题，应该优化的是产品本身，而不是完全通过文案来告诉用户如何去操作。如果不能简单的去解释行为， 就不能设计出好的产品。十、小结本文列举了一些简单的案例，这些案例可能只是一句话或者几个字的差异，就能带给产品不一样的感受；对业务逻辑和用户场景理解得足够深刻，我们方能用准确简洁的文案去解释。产品文案的优化需要产品设计流程中各个环节各个角色的共同努力，多思考批判，多梳理检查。学习是一个持之以恒的过程，需要有耐心，在深刻理解这些文案技巧的基础上再灵活运用，那么相信你的设计一定会更上一层楼。希望本文有帮助到各位，大家一起加油吧！写文案没灵感？这8款文案网站免费用！编者按：本文为大家收集了 8 款好用的文案网站神器，包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网，让你写文案手到擒来。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/9-writter-tips
页面 用户 内容 一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。2022 年，Notion 的用户规模目前已经达到 3000 万，付费用户达到 400 万。国外用户常用一个公式形容 Notion 是怎么 all-in-one 的：Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同时，Notion 的产品风格也是走极简主义，有着“合而为一”的野心。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Notion 的产品体验设计拆解。通过对 Notion 的体验设计拆解，为你提供一份文档类产品的解题宝典！更多产品拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 事先声明强烈建议使用电脑查看，用户体验更佳；为了让设计细节更容易被看到，用 Gif 来呈现展示；Gif 体积较大，请耐心查看。适合人群第一类，UI/UX 设计师，可以跳出执行层，去思考 Notion 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。二、日常使用场景1. 工作区和基础概念左侧侧边栏。Notion 的侧边栏是导航系统，创建的所有页面和数据库都会出现在这里。可以将各个页面嵌套在一起，实现无限的组织层次。右侧编辑器。这是创建的所有内容的所在地，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。Workspace 工作区。在团队中，侧边栏的 **Workspace**标题下的任何页面都可以被看到，并且很可能被工作区的所有成员编辑（除非另有权限配置）。Teamspace 团队空间。团队空间可以配置开放式的还是封闭式的，有对应的不同权限的管理配置。Private 私人的。个人工作空间默认为保持页面的私密性，除非它们被明确地共享。Page 页面。Notion 的页面是无限层级的，一个页面能够添加多个页面，页面中的页面也可以继续添加页面。Block 区块。Notion 中的基本对象为 Block（区块），它可以是任何形式：表格、文本、网页、代码块、图片、视频、文件或者直接是一个 Page（页面）。2. Notion 由 Block 组成上图标出了不同类型的 Block（区块）。Notion 以 Block 为基本单位，围绕笔记文档、知识库、任务、轻量的数据库等方面来组织内容。在这张白纸上，包括文字、表格、视频、音频、网页、数据库等等，各种类型内容都可以看作「区块」。操作也非常简单，点击「+」或是输入“/”即可调用，随意将内容组织，并支持 Markdown 语法。Page（页面）上的任何内容，不管是文字、图片还是表格，都是一个 Block（区块）。每个页面都是各种 Block（区块）的排列组合。3. 新建工作区工作区的新建频率相对页面来讲是比较低的，因此新建工作区的入口相对较深，打开位于 Notion 窗口左上方的工作区切换器，会提供新建工作区的入口。尝试新建一个 Workspace，选择团队使用，会直接在根节点创建好几个对应的页面模板可以快捷使用。点击之后，又回批量生成很多模板页面，帮助用户快速上手，帮助用户轻松愉快的度过试用产品的 Day One。4. 新建页面点击侧边栏底部的**+ New Page 按钮来创建一个新的页面，这里新建的页面会默认出现在 Private 下。或者当你把鼠标悬停在侧边栏上的任意节点时，点击任何一个+**按钮，就会在对应的节点下新建页面。新建页面后，会默认出现一些快捷的操作，例如使用模板、导入、数据库等等，帮助用户快速地使用 Notion 强大的页面能力。如果自己尝试输入了一些文本，所有的模板提示和顶部的一些设置就会自动消失，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。5. 页面模板在产品体验中，对于初次上手的用户而言，模板是最好的选择。完全空白的 Notion 并不能解决用户的需求，得先搭建出各种工具，用户直接在工具里进行内容填充，才能满足用户的需求。所以，有了模板后，用户价值的探索路径缩短，减去了需要熟悉功能、自己动手搭建的负担，让用户能够迅速使用起来，并在持续使用的过程中不断熟悉产品各个功能，从而创建出属于自己的模板。在空白页面中点击「模板」，就会进入使用模板的流程。最近 Notion 也对使用模板的界面做了升级优化，记得之前选择模板的弹窗，侧边栏是在右边，左侧预览页面，这次把侧边栏放到了左边，在右边预览页面，「使用模板」的按钮位置也发生了变化。总的来讲会和用户在日常使用 Notion 得行为方式非常一致，都是在左边切换，右边看页面内容，减少用户的认知成本。使用模板的流程也非常短，在侧边栏切换模板的同时，就能在右边同步预览模板的内容，点击「使用模板」便能立刻将将模板内容应用到刚刚新建的页面中，使用上的体验也非常丝滑。所以，正是因为模板在产品策略与市场策略中的重要性：既能促进用户活跃，也能促进用户留存，Notion 才会将模板视作一个单独的模块，不断迭代更新。6. Database 数据表数据表帮助你在 Notion 中以各种方式组织信息--让你组织、分类、标记、过滤、搜索、查看和利用它来完成工作。下面是一个关于 Notion 数据表几种视图和常见的使用场景的介绍。Table 表格。表格形式，类似于 Airtable 表格，便于做数据统计。每一行都可以单独打开变成一个 Page，添加更多的内容。Board 看板。看板形式，类似于 Trello 看板，便于任务分配、分类。卡片中的选项可以完全由自己定义，看板的分组也可以用选项来改变。Timeline 时间轴。时间轴形式，时间轴视图，适合项目排期和计划.Calendar 日历。日历形式，便于查看时间相关的信息，可以在日历上按时间顺序查看任务。List 列表。列表形式，便于查看一部分关键性的信息，比如只显示名称和进度，来明确任务的进度。Gallery 画廊。便于查看多张卡片中的开头部分，可以在卡片开头添加一些概要内容。7. 工具栏大部分同学应该习惯了 Word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。而 Notion 的工具栏默认是隐藏的，在没有开始第一个字输入之前，页面顶部还会有少量的功能外露，当开始输入文本时，所有的多余功能都消失了，页面就是一片白色，功能区全部隐藏，需要点击或选中一些内容才能出现，看似更麻烦，但实则更高效。8. 浮动工具栏这种工具栏可以称为「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是围绕内容服务的。你可以先书写内容，再使用浮动工具栏中的菜单设置格式。让设置就在你的光标旁边，移动距离更短，日积月累能省下不少时间。当然，直接记住 Markdown 快捷键是更好的选择。当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。可以针对选中的文本内容进行常规操作。例如加粗、斜体、删除线，或是将普通的正文文本转化为一二级标题，也可以针对选中的文本内容进行评论。9. 编辑工具① 「+」图标只要你把鼠标悬停在一个新的行上，左边的空白处就会出现「+」图标。点击它可以打开一个下拉面板，你可以从中选择想要使用的功能添加到页面中。② 「⋮⋮」图标每当你将鼠标悬停在一个新的行或内容块上时，「拖拽」图标就会出现在左边的空白处。点击它可以打开一个菜单，让你对该 Block 进行操作，例如删除、创建副本、转化成其他 Block 等。③ 「/」命令/ 命令是最简单的方法是向你的页面添加内容或应用上述的操作。输入/后跟任何类型的块来添加它。如/bullet 或/heading。一旦你输入/，就会弹出一个菜单，你基本上可以实时搜索你想要的东西，只要按 enter 就可以选择并使用它。10. 分享页面在分享页面的设置中，可以对不同的成员域做不同的权限配置。对于这些配置项，在鼠标悬停的时候会在弹出相应的图示截图和文字说明，告知用户进行了这项设置后会发生的变化，给予了用户清晰的配置界面。当用户准备点击右下方的「复制链接」时，还会再次出现 Tooltips 提示用户当前配置的分享权限说明，避免权限误操作引发的不符合用户预期的后果。三、体验亮点1. 左侧导航交互日常中常见的 B 端产品的导航栏一般都是要么展开，要么收起两种固定的交互模式，而 Notion 左侧导航非常灵活，尤其是导航栏收起状态时候，鼠标只要悬停到左侧区域，都可以将导航栏呼出，这时候通过导航栏切换到目标页面后，将鼠标移到页面内编辑内容时，悬浮的导航栏又回自动消失。在导航切换效率和页面内容浏览的沉浸感上有了非常好的权衡。2. 抽屉预览在数据表类型下打开页面，默认会通过侧边抽屉的方式打开，侧边打开方式可以自定义拖拽侧边抽屉的宽度。当抽屉拖动到一定宽度时，会自定将左侧的导航栏收起，再减小抽屉宽度时，侧边导航又回自动呼出。同时，侧边抽屉的交互方式并不是传统意义上的直接覆盖在当前页面的上方，在内容层级上会将下放的内容进行推拉，例如我们能够始终看到「新建」按钮，让用户在查看抽屉内容时，也能够灵活地操作后面的内容。3. 视图配置切换数据表有 6 种视图类型可以灵活切换，点击「新建视图」，切换的面板覆盖在内容上方，默认聚焦到「视图名称」的输入框中，在选择不同的视图类型时，能够直接预览到切换后的效果，并且能够设置不同的视图下，打开下一级页面默认的打开页面方式，整个使用体验上非常顺畅。4. 页面图标支持自定义给页面设置表情或图标。给予国际化和本地化的考虑，会有不同肤色的 emoji 配置，让不同肤色的用户能够用对应肤色的 emoji。对于一些只想加一个表情装饰，却有选择困难症的用户来说，还提供了一个「随机」的配置。更加智能的是，设置好的表情或图标也会在页面树中呈现，当用户的页面书中有较多内容时，可以高效地帮助用户对页面进行识别。5. 全局搜索点击「搜索」后，提前判断用户大概率要输入内容，会自动帮用户聚焦到搜索框当中。同时给出了几个非常高效的筛选项，能够帮助用户更精确地查找内容。底部提供了快捷键引导，这一点也是非常人性化，帮助不了解快捷键的用户能够迅速获取快捷键的用法，提高操作效率和体验。更令人惊喜的一点体验是当搜索的关键词没有匹配到时，会引导用户搜索已删除的页面，点击后会将搜索的关键词自动带入到垃圾箱中进行检索，提高了搜索能力的可用性。6. Block 工具栏悬停预览Block 工具栏中，鼠标悬停某个工具时，右边会出现对应工具的效果图和简单说明，能达到更好的引导目的，用户能够直接了解到这个 Block 是不是自己想要使用的，而不需要每次都一个一个插入试一下之后才知道，能够帮助用户更全面高效的了解 Notion 支持的能力，提高 Block 的使用效率。7. 即时修改和创建属性在使用数据库属性设置的时候，可以即时地对属性进行修改，使用检索可以快速使用属性，当检索的内容不在已经设定好的选项中时，会智能地提示用户可以创建一个新的属性。把属性配置的能力轻量化地外露出来，不再需要像传统的软件也痒属性配置有一个单独的属性配置面板。8. 图片尺寸调整图片支持宽高等比拉伸调整，常见的拉伸点实在图片的四个角，会容易引发的问题是当用户拖拽右上方拉伸点缩小图片时，因为图片在编辑器中的定位是固定的，会导致图片的缩放和鼠标指针没有跟随。Notion 的处理很好的解决了这个问题，拉伸点位于图片的左右两侧。同时图片的拉伸也会根据所处的 Block 来自动适应，例如图片位于折叠列表中时，由于图片约束了只能左对齐，所以只在右边有拉伸的手柄；而当图片位于普通的 Block 时，左右都能进行拉伸。9. 分栏交互Notion 中的分栏交互也非常智能，只需要点击并拖动你想放进另一列的文本或是其他类型的 Block (左边空白处的 **⋮⋮**符号是你的拖放手柄)⋮⋮，把它放到你想要的地方，就能够智能地变为分栏。想要改变分栏的宽度也非常灵活，只需要拖拽两栏中的竖线就可以智能的改变分栏的宽度。10. 弹出下拉面板时禁用页面滚动在很多中后台的系统中，经常容易发现的一个看似 BUG 的场景，就是打开了一个选择器 or 下拉菜单时，再往下滚动屏幕，下拉菜单的面板没有跟随滚动，看起来会有点像是 BUG。这个难题在 Notion 中有了一个非常巧妙的解法，在弹出下拉面板的时候，禁用页面的滚动能力。看似简单实则非常巧妙的解决了设计师在日常设计中经常遇到的难题。11. 折叠块正常情况下，Toggle list 下有内容时，箭头是深色的。当 Toggle list 的内容为空时箭头是灰色的。通过一个非常小的细节给予用户提醒，恰到好处。12. 页面为空时，图标是空心的页面内可以嵌入页面，如果嵌入的页面是有内容的，图标内也是会有几根横线；如果嵌入的页面没有内容，图标内部就是空的。通过一个小小的图标直接向用户传递是否有内容的关键信息，省去了用户需要去点进去页面才知道是否有内容的步骤。13. 拖拽小技巧框选文本 Block 可以直接拖拽到数据表中，并且会自动根据所框选的文本的 Block 的构成去自动转化为数据表中不同的行数据。批量变更 Block 类型时，非常高效。14. Block 链接文档中的每个 Block 都有一个专属的链接，复制这个链接发给其他人时，打开后会直接定位到对应的 Block，避免需要在一整篇文档中去找想要的关键词，非常灵活高效。15. @now 会实时更新Notion 还不容错过的一个实用小功能是利用「@」快速输入具体的时间戳，你可以把它用在日记里，或者是工作日志等。具体来说，假设今天是 17 号，当你在模板里用了「@Today」，无论你在多久之后利用这个模板创建新页面的时候，它只会显示「17 号」。而新的「@Today」则会动态更新，假设今天是 28 号，你用同个模板创建新页面的时候，会发现它变成了「28 号」，而非之前的「17 号」了。16. 任意空行都会快捷输入提示在所有的空段落前，都会有一个 Placeholder 提示用户输入「/」能够快速插入 Block，潜移默化的引导用户使用快捷键，起到了教育用户的作用，提高用户使用效率的同时也增强了用户对产品的粘性。17. Notion AI2022 年 11 月 16 日晚，Notion 发布了 Notion AI 测试版写作助手，来帮助用户写作、初稿整理以及记录创意点子，标志着 AIGC 发展进入一个新的阶段。申请了一下内测，已经排队到 16w 人了。四、体验槽点1. 没有固定位置的页面目录原生能力不支持页面目录，虽然支持目录 Block，但是插入的目录 Block，只能跟随页面内容显示，当页面内容往上滚动的时候，目录就会消失。这里右边还是通过第三方插件才实现了目录的能力。2. 没有原生的思维导图Notion 目前还不支持原生的思维导图，国内参考的竞品 Wolai、FlowUS 都已经能够支持思维导图了。目前仅能是通过一些第三方插件置入思维导图，整体的灵活性远不如原生的 Block 那样强大。3. 原生不支持中文目前对中文还不太友好，中文搜索不全面。12 月 14 日的时候，Notion 在 Twitter 上有发布了德语版本的支持，好奇的在下面留言啥时候支持中文，网友有趣的回答道 100 years。不过目前有一些第三方的汉化插件可以使用，这里分享给大家： https://zhuanlan.zhihu.com/p/397634631五、总结Notion 团队非常重视设计，创始人伊万说：“设计意味着这里的一切，Notion 的感觉对他们来说具有重要价值”。不仅如此，你在他们的网站会发现，好像全部都是用 Notion 创建的一样，有很强的认同感。从少数派到哔哩哔哩，从知乎到小红书，有大量的 Notion 用户每天都在分享自己的 Notion 使用经验。这导致关于 Notion 的文章和视频每天都在快速增长。PLG 的发展模式，要面对大量的 C 端用户，所以 Notion 必须要有非常好的产品体验。通过极致的产品体验，减少用户使用中的阻碍与疑惑，使整个产品在使用上更为顺畅，从而提高产品的易用性，减少在面向 C 端用户过程中的运营咨询，便于团队将咨询交付的精力集中 B 端用户的服务上，从而创造更大的商业价值。由于时间和篇幅有限，关于 Notion 的体验设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 参考链接Notion 官网： https://www.notion.so/Notion 帮助文档： https://www.notion.so/helphttps://36kr.com/p/2025046266178056注：部分图示取自 Notion 官网感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注和交流～本篇来源：优设网原文地址：https://www.uisdc.com/notion-design
效果 风格 水彩 大家好，这里是和你们聊设计的花生~今天为大家推荐一款可以将数码照片转为铅笔素描、水彩、油画、黑白线稿等多种插画效果的设计神器 FotoSketcher，它可以帮助我们快速将照片转换为更具有特色的风格化插图，让设计效果更出色 ~更多图片特效神器：27种特效一键生成！故障风生成神器Photomosh大家好，这里是和大家一起进步的南清音~亲爱的小伙伴们，你们在日常的设计中有没有需要用到故障艺术风格的素材呀？阅读文章 > FotoSketcher官网直达： https://fotosketcher.com/官方推特： https://twitter.com/fotosketcher （需搭梯子）使用教程： http://fotosketcher.com/fotosketcher-help/FotoSketcher 是一款 100%免费的图片特效处理软件，它可以在几秒钟内将摄影照片转化为各种绘画风格，包括铅笔素描、水彩、油画、钢笔画、抽象画、卡通等，共计 20 多种。FotoSketcher 官网展示的转换效果图官网的艺术画廊中展示每种风格应用后呈现的效果，我看了一下质量非常高。首先就是不同风格的特色都凸显出来了，比如油画的笔触、水彩的通透感和晕染效果、素描的排线等，然后就是照片内容转换后仍然是比较清晰精致的状态，画面元素清晰可识别，不会糊成一团。油画风格转换效果：水彩风格转换效果：素描/黑白线稿效果：FotoSketcher 并非在线工具，想要使用的话需要下载安装包，但软件大小只有 10M（macOS 版本的有 39M），用起来非常方便，而且作用真的非常强大。大家可以通过官网下载，本文末尾也有链接可以直接下载。官方下载链接： http://fotosketcher.blogspot.com/2022/09/fotosketcher-400-alpha-1-available-for.html （本文末尾有打包好的安装包，可以直接下载）软件的操作界面简单易懂，主要的功能为“绘图参数”，标志是一个调色盘。点击后会弹出一个参数修改窗口。可以修改内容包括风格、线条与笔触的样式、笔刷样式、色彩、对比度，精细度等，还可以添加纹理效果和文字。选择“风格”时，每个选项旁边会有一个小预览图，方便我们了解这种风格的效果。所有的调整会实时呈现在右下角的预览图框内，当你觉得效果比较合适后，点击“绘制”可以将效果以应用到大图内，点击顶部工具栏第二个“保存”可以将生成效果保存到本地。调整的参数可以保存，方便下次加工图片时直接调用。为了帮助用户调出更好的风格化效果，软件还内置有“图片裁剪”和“原图调整”功能。“原图调整”可以修改图片的亮度、对比度、饱和度，或对原图进行锐化及简化。比如我们要将照片处理成黑白线稿模式，将原图的对比度和锐度调高后生成效果肯定会更好。以上就是为大家推荐的设计神器 FotoSketcher，可以一键帮我们将数码照片转换为油画、水彩、素描、黑白线稿等多种风格化插画，并且是免费使用的。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：平面设计实战！如何分析运用图片素材？如果说设计师有一项技能是必须要学会的，那么对于图像的处理一定是一个离不开的话题。阅读文章 > 超全整理！9个设计师必备的高质量图案背景素材网站大家好，这里是和你们聊设计的花生~之前为大家推荐过5个纹理材质网站和5个科技感背景网站，今天继续为大家推荐9个高质量几何背景图案素材网站，它们包含了上千种丰富的图案样式，可以用作海报、网页、包装、PPT、壁纸设计等多个方面，下载便捷且都是免费可商用，一起来看看吧~1）more.阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 otosketcher安装包87.41MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/fotosketcher
飞翔的企鹅
张大湿
在路上
表哥
落霞与孤鹜
