字体 趋势 视觉 编者按：蒙纳最近放出了他们对于 2023 字体视觉设计趋势的分析报告， 作为世界上最有影响力的字体设计和服务供应商，蒙纳对于整个字体设计行业有着深入的洞察和细腻的感知，而这份报告和往年的报告类似，对于 2023 年全年的字体设计趋势有感性而具体的预测，同时每个趋势结合具体的案例进行了展示。为了尽可能清晰直接地呈现，我将会对整个报告做一定程度的脱水处理，尽可能直观快速地将 2023 年的字体设计趋势呈现出来。下面是正文。受限于过去几年的疫情影响，大家只能在虚拟背景下进行远程协作，而现在大家可以告别虚拟的海滩背景，真正走出去，灵感和创造力得以蓬勃发展，激情迸发。放开所带来的情绪上的改变，进一步体现在设计领域当中，俏皮和趣味开始在更多的设计作品中呈现，混搭、多样性和包容性也以图形化设计呈现出来，动效和3D也会更为深刻地嵌入字体和视觉设计，设计领域之间的界限会进一步模糊。随着用户周遭屏幕数量的增长，增强现实和虚拟现实这样的产品和场景将会进一步贴近主流市场，这也意味着相关的数字设计的需求会进一步增加。作为设计师，我们深知磨练技艺最佳的方式，始终关乎思考、质疑、挑战、欣赏和持续不断地实战。而这也是这份报告的意义所在，它是一份同时兼顾反思过去和指引未来的作品集，你可以在此稍加停留，但是更重要的是为接下来的一整年做好准备。顶级字体公司蒙纳出品！2022年10大字体设计趋势蒙纳公司最近刚刚发布了 2022 字体设计趋势报告，这份报告对于视觉、LOGO、平面、字体/字库设计师有着相当的参考价值。阅读文章 > 1、创造性混搭这是一个从去年开始一直延续到今天的设计趋势，它趋于成熟，并且一直在发展。这种趋势本身也相当贴合人的经历和生活：及其复杂、多样和丰富。2022 Communication Desing TDC 大奖得主是一个来自澳门的设计项目，出自 Indigo Design 之手，他们围绕着字体采用 Risogragh 来创造半调的质感，但是丰富的色彩和形态上的不同组合，将整套设计拓展 为均衡的设计作品。Figma 2022 的视觉设计和 Stepan Solodkov 的标识设计同样是典型的元素混搭，狂野的外表下隐藏着微妙的平衡。而 Marlon Studio 为 Wild Kombucha 所设计的 LOGO 的混搭方式则更加有意思，棱角分明的笔触和柔和有机感的笔触，无缝衔接在一起。很多类似的设计，甚至会采用动态设计。当然，还有的混搭设计会使用更加微妙的方式，比如 Bielke & Yang 为挪威一家名为 Sommerro 的酒店所进行的设计，两种有着类似特质的字体被巧妙地混合在一个 LOGO 当中，不同但足够和谐。这种不同但是足够俏皮的设计对于字体搭配有着更高的要求，而且很大可能性仅仅只适用于你自己的品牌。2、智能网格字体去年我们注意到「有机模块」这样的趋势，而如今，这种风格有了新的演变，将网格作为一种组织形式，使用四分之一圆作为笔触的过渡，将类似 NASA 的蠕虫式笔触应用到更加广泛的字体设计当中，更加细致精确的切割出现在字体当中，规整而细腻。Wolff Olins 为生物巨头 GSK 所设计的新 LOGO 就使用了这种方式，网格所提供的精确感被自然的曲线所消解，一种强调人和技术融合的理念借此呈现。3、漫画超英风这种略显复古的视觉设计趋势的复兴有点让人猝不及防。这种经常出现在美式漫画封面标题式的字体设计，通常都有着醒目的几何特征，带着阴影和明显的透视，形状和用色都非常的扎眼。这种漫画超英风字体可能是受到当前超英文化的影响，它响亮而充满趣味，毫不避讳地张扬。设计机构 &Walsh 为葡萄酒 Stompy 品牌所设计的 LOGO 字体更加现代，告别了传统葡萄酒品牌那种传统沉重古朴的气质，带着透视和硬阴影，搭配更加鲜亮的色彩。位于布鲁克林的设计机构 Order 为名为 Forward Majority 的机构所进行的品牌设计也采用这样的设计，力量感十足。4、极致冷静风这种将极简和沉静、冷淡结合到一起的设计，可以在很多生活方式类的品牌身上看到，它大概也是一种永远不会消失的潜在设计趋势。它通常采用的是黑白灰为主、简约的、居中的视觉设计特征，营造出一种安静、沉稳冷静的气质，尽量少用文本字体，减少 LOGO 和图标的使用，而它恰恰也是借用这种极致的简单在日趋繁复的品牌设计竞争中脱颖而出。品牌设计机构 Skinn 为家居品牌 Joli 所采用的设计，就充分体现了这种现代性和精确感，沉静而平和，让源自产品材质的视觉吸引力自然流露。5、切割式设计通过切割来呈现零碎感和锐利感也是一种趋势，这种趋势在某些时候看起来会有点像像素，它给人的感觉会具有速度感和科技感。而切割本身会增加字体的速度感，如果角度得当甚至让人觉得动感。比如知名的科技媒体 The Verge 就在去年进行了重设计，新的 LOGO 采用了这种切割效果，有种令人眼花缭乱的动感。科技领域发展迅速，而 The Verge 借用新的字体设计来呈现潮流感。有的切割是从边缘开始，有的则是从中心开始的。陷阱式的切口设计能让字体设计拥有截然不同的趣味感，负空间和正空间一样重要。Valenlim Studio 为 Konnichiwa ZhongShan 这个活动所设计的字体就趣味十足。而名为 Koto 的日本工作室为 Boxy 所做的品牌设计也采用了类似的方式，这个初创企业的业务是将集装箱改造为法国郊区的自动化便利店，他们的名字有像集装箱致敬的意思，设计上，Koto 保留了字体的棱角曲线来降低字体的工业感。6、趣味像素化像素风的游戏是我们对于数字工具热爱的延续，是怀旧情绪的落脚点。有的像素化设计会将特征化的元素置于字体当中作为焦点存在，还有的设计则是将它单纯视作漂亮的装饰。像素风可以营造出复古游戏感，这种趋势是对早期数字化设计的一种致敬。不过这种将基础元素变为小方块的设计方式并不会消解设计的复杂度，就像乐高一样，你同样可以玩出花样。英国 NB Studio 为 Kudo 所打造的新设计就充满了平易近人的感觉：7、动态的肌理任何流动变化的东西都会更加吸引人注意力，无论是动画效果还是可变字体。即使是在静态的图像当中，带有倾向和变化趋势的字体设计，都会有动感。屏幕允许更多动态视觉内容，这也变相影响着用户对于内容「动态」的需求，所以字体设计也最好有流动的肌理。来自底特律的 Hobbes 工作室设计了一种独特的字体 Aerial，这种字体是借助 AR 和 VR 来实现的，字体借由无人机在空中拼合而成。另一个案例则是 UnderConsideration 找品牌设计专家 Sultan Jum 所设计的怪异字体，他使用 Nuform Type 的 Ozik 所创作出来的奇异设计，充满一种动态的怪异感。8、拓展和强调我们之前曾经设想过 3D 建模在字体设计当中的应用，现在就已经发生了。这是因为现在的设计师有着比几十年前更强的算力、更好的工具和更加复杂的技术吧？3D 建模和动效设计是否已经成为如今平面设计当中的标配了？设计的边界变模糊了，字体设计的技术和呈现形式都在拓展。Pentagram 为美国最大的艺术和认为基金会，Mellon Foundation 所设计的 M 字母就反映了当前的现状。整个字母采用了更加中性的色彩和材质感，同时它借助3D 建模和纹理渲染并且在呈现上，加入了动画，在外在形态上，它又能唤起人对于雕塑、舞蹈和写作等艺术形式的想象。如今已经不再是玩具总动员塑料感十足的时代，金属铬、玻璃和木纹才是如今的新标准。Red & Grey 为欧洲建筑师委员会所设计的新 LOGO 则在字体设计上采用了视错觉的技巧，这种跨领域的视觉手法暗含了双重性和对话的重要性。通过膨胀的方式来强调和拓展，也是最近几年呈现出来的明显趋势。品牌指南工具供应商 Brandpad 推出视觉设计就很好的体现出这一特征：而冰激凌品牌 Nuvem 给人的感觉也相当的蓬松：9、液化的形态液化的设计形态能够制造出奇异的体验，而这种设计也最值得关注输出效果的易读性和可读性。这一设计趋势也是去年设计趋势的延续，而且比起去年藏在酸性设计当中，今年的液化字体设计开始无处不在，从汽水到咖啡，无处不在。Swerl Coffee Roasters 是一个 1972 年从面包车后座上开始起步的咖啡品牌，Andreas Pedersen 绘制了一个时髦的液态感十足的字体，让人想起拿铁咖啡表面漂浮的泡沫。巧克力品牌 Dirtbag 同样采用了液态膨胀的字体，粉色的主色调和字体形成了强烈的对比，俏皮而令人心生好感。10、AI 生成设计我们仍然处于人工智能设计工具的初期，但是发展速度也相当惊人了。人工智能工具正在改变艺术和设计领域，我们目前尚且不知道最终的结果会是怎样的。人工智能正在加速原型设计和构思过程，为设计师的深入探索流出足够的空间。使用人工智能生成的字母通常有着拼贴式的外观，接缝的位置有时候会有一些柔和的污渍和处理。有时候 AI 生成出来的字体会非常的奇怪，但是这也可能会促使艺术家和设计师注意到某些未曾设想的道路。工业革命带来了革新，但是更多的利润被企业吞吃，大家依然需要花费大量的时间在工作上。人工智能到来后设计会变的更好吗？设计师的生活和工作会变得的更好吗？本篇来源：优设网原文地址：https://www.uisdc.com/monotype-trends-report-2023
视觉 色彩 春晚 《2023 央视春晚》以温暖人心的精品节目、亮点满满的技术创新、美轮美奂的舞美效果为全球华人送上了一道红红火火的文化大餐。整台晚会吉祥而又典雅的舞美视觉美学成为本届晚会的一大亮点。这些美轮美奂的视觉设计是如何产生的？今天我们请担任本届晚会视觉总监，中央美术学院设计学院教授，某集体 ART+TECH 创意总监费俊，来为我们揭秘视觉设计背后的理念、方法和过程。相关春晚的幕后文章：优设专访数字艺术家Sixone：AI辅助创作的IP形象是如何登上春晚舞台的？大家好，这里是和你们聊设计的花生~春节将近，前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”，它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP，形象乖巧可爱，一经发布就受到了很多网友的称赞和喜爱。阅读文章 > 一、满庭芳华 舞色新春吉庆+典雅，传统+现代的视觉美学理念总导演于蕾和副总导演邹为在晚会策划阶段提出了以宋代词牌名“满庭芳”为核心定位，取意自中国古典文学词牌名，通过舞美、多媒体、节目视觉等各个方面，共同营造祈愿圆“满”的中华大家“庭”尽展“芳”华的主题气象。视觉设计团队秉承这一理念，将中国传统文化中的年俗美学与文人美学相融合，形成“吉庆+典雅”的视觉美学气质；并将传统艺术形式与现代视觉科技相结合，形成“传统+现代”的视觉美学表达。二、传统色彩 创新应用中国传统色彩的视觉美学系统为整体性、系统性地提升整台晚会的美学调性，费俊带领团队建立了一套属于春晚的色彩系统，并设计了一本色彩系统应用手册，这在春晚的历史上尚属首次。这本手册为所有参与创作和制作的团队与个人提供了一套行之有效的配色工具及色彩应用指南，这既大大提高了设计和制作效率，又为形成更加整体性的视觉美学奠定了重要的基础。2023 春晚色彩系统应用手册费俊将色彩系统的建构和应用逻辑概括为“寻色”、“拾色”、“弄色”、“舞色”这四个阶段。整个色彩系统设计的起点来自于对于中国传统色彩的追寻，中国人从自然万物、天地四时中寻觅色彩，这种“寻色”饱含着中国人对自然的敬意、对生活的诗意和对未来的寓意；遵循着这样的理念，团队首先从中国传统色中“拾色”-- 提炼并组合出五个具有吉祥寓意的吉祥五色，并将每个主色延展成 8 种延伸色，形成 40 种可应用色板，以及 10 套配色模版，从而形成了既包含特定色彩搭配指南，又包含较宽色域的应用系统。2023 春晚色彩系统应用手册内容（部分）而色彩系统的应用是一个非常具有挑战的跨学科的系统工程。如何通过各种观看终端的屏幕来完美呈现色彩的表现也是团队着力攻坚的课题之一。艺术的“弄色”需要科技的“校色”方式来支撑，从设计、制作、录制到直播，每个环节都要不断通过设计师和工程师联合的测试、校准和调整，才能实现最佳的色彩呈现。将色彩系统这样的理论体现在设计中，来到观众的面前，则是被称为“舞色”的论题。主创团队依据色彩系统的设定，并结合“满庭芳”的视觉设计理念，设计出了一套被亲切地称为“值班”的春晚主视觉，这些“值班”展现在节目之间主持人串场、零点倒计时以及晚会最后的《难忘今宵》等重要节点上。春晚主视觉（四十多版设计稿）主视觉 - 满庭芳玉棠富贵 （应用于《难忘今宵》）- 主要元素：玉兰、海棠歌曲《难忘今宵》摄影：贾宁旨团队致力于将中国传统色这样的文化遗产活化到春晚舞台，以“色彩系统”为起点，建立起属于春晚的色彩美学体系，让以往缺乏整体风格的舞台视觉变得更加具有美学调性，让大众在色彩的浸染之中感知中国色彩的文化意蕴。“2023 年春晚的色彩观念，依托中国传统色彩体系构建，以正色为经，间色为纬，追求传统文化中柔和雅致、内蕴丰厚的色彩基调，织就春晚色彩体系的传承与创新之美。”（引自：央视新闻）三、传统元素 当代演绎艺术与科技有机结合的视觉美学表达在每个节目的视觉创制方面，视觉团队从中华优秀传统文化中攫取元素，辅之以现代艺术手法和光影技术，使整场晚会节目达到高度艺术性与科技感的融合。VR、AR、XR、360 度自由视角拍摄、AI 人工智能图像生成、大数据、程控灯光装置、动态机械装置等前沿视觉技术的应用，使得整场晚会成为一次艺术与科技的融合成果展示，形成了对于中华优秀传统文化的当代化演绎。歌曲《百鸟归巢》以“南音”古乐融合流行风格，再利用 AR 增强现实技术等科技手段，呈现出一幅百鸟翱翔的吉祥盛景。摄影：贾宁旨在每个节目的视觉创制方面，团队秉持着“思想+艺术+技术”的融合创作理念，从中华优秀传统文化中攫取元素，辅之以现代艺术手法和光影技术，使整场晚会节目达到高度艺术性与科技感的融合。舞蹈《锦绣》摄影：贾宁旨创意节目交互视觉秀《满庭芳·国色》从自然万物、天地四时中追寻中国传统色彩，运用 AR 技术使舞台宛如色彩幻境，同时以现场实时拍摄结合 CG 特效、AI 图像生成等制作技术，将中华传统色彩赋予五位舞者演绎。创意节目《当神兽遇见“神兽”》以《山海经》《抱朴子》《史记》等中国古典典籍中的吉祥神兽为原型，结合 VR 三维影像绘制和 AR 增强现实等技术，让上古神兽“走出”文献古籍，与现代生活中的孩子们奇妙相遇。摄影：贾宁旨武术节目《演武》创意源自 200 年前的古画《武僧演武图》，为少林寺定格了气势磅礴、精彩绝伦的瞬间。节目结 AR 技术带我们穿越入画，梦回千年少林。摄影：贾宁旨四、舞台表演 视觉支撑视觉与表演深度融合的视觉创意方法如何让视觉成为表演的有力支撑，如何与舞台上的各种元素形成协调统一的表达是视觉创意过程中的重要挑战。视觉团队的视觉导演与各个节目主创在内容创作前期就开始深入的视觉创意研究，让视觉内容成为表演者，融入每个节目的原生语汇，而不只是为表演做背景，视觉与表演者成为一体，共同出演；大屏幕上的视觉内容还能成为表演者的支撑要素，而不是变为干扰表演的另外一张皮。 舞蹈《碇步桥》摄影：贾宁旨舞蹈《我们的田野》摄影：贾宁旨中幡杂技《龙跃神舟》摄影：贾宁旨歌曲《跟往事干了好几杯》 摄影：贾宁旨歌曲《花开忘忧》摄影：贾宁旨歌曲《合拍》摄影：贾宁旨歌曲《绿水青山》摄影：贾宁旨有些节目的视觉方案经历了多达数十版的调整，这些调整一方面来自于纯粹的视觉创意的优化；另一方面因为节目内容本身也在经历不断的调整变化，甚至于颠覆。视觉创意及制作团队经历无数个不知疲倦的日夜，不断深化打磨直至最后一刻，为整场晚会视觉品质的提升竭尽所能。创意节目交互视觉秀《满庭芳·国色》《满庭芳·国色》初期节目创意手稿五、光色晕染 灵动优雅演播大厅天顶舞美装置设计今年春晚选择以“花”作为贯穿整台晚会的舞美主题符号，以“满庭芳”作为舞美设计核心理念，这一理念贯穿在演播大厅从空间、舞台到景观等各个方面的设计之中。其中由四瓣花结构演化重构而成的演播厅顶部艺术装置，既是根植于中华文明的美学创造，又是绽放着现代设计理念的创新呈现。创意取材自距今 6000 年至 4800 年前的庙底沟彩陶标志性的“花瓣纹”，著名考古学家苏秉琦先生曾提出：花卉图案彩陶，可能就是华族（即华夏民族）得名的由来。装置设计的巧思之一，是通过“灯光晕染”的方式形成色彩变化，藏于每片结构顶部的灯带作为间接光源，将每层结构之间以柔和的光晕装饰，有如淡彩水墨般节制而淡雅，恰到好处地烘托演播大厅的气氛；同时，通过精密的程序控制，形成灯带整体与局部间丰富的色彩变换，并能实时的根据节目的视觉调性来适配出相协调的色彩动态演绎，这一设计让演播大厅的空间也与舞台上的内容成为了一个可以联动的整体，既提升了舞台的表现张力，也增强了观众的沉浸体验。演播大厅天顶舞美初期设计稿演播大厅舞美设计过程稿六、吉庆团圆 生机勃勃春晚吉祥物设计于春节前夕亮相的春晚吉祥物形象“兔圆圆”，由关山月美术馆馆长陈湘波先生和春晚视觉设计团队历时 4 个月打磨完成。吉祥物“兔圆圆”身上，包含着传统文化中生肖兔的意蕴和美感，也创造性地呈现了中国科学家的科研成就。这是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 ip。整体形象的基础结合了中国白兔的基本特征，同时参考了社交网络大数据分析，形成了“兔圆圆”的基本形态和性格设定。根据中科院骨脊椎动物研究所研究结果表明，“安徽模鼠兔”为世界最早的兔形动物，中国可谓是兔的“第一故乡”。在“兔圆圆”的造型设计中，视觉设计团队与陈湘波先生一同不断打磨和推敲，最后确定的形象，保留了真实中国兔子造型上的特点，同时艺术化的处理使“兔圆圆”兼具人的表情，更能直观展现不同的情态。造型设定上突出兔的灵动、圆融之美，整体线条简洁饱满和圆润。例如，兔耳选择了大小适中、竖直圆润的形态作为常态，但在不同生存状态时兔耳也有不同姿势；兔的眼睛力求在“拟人兔”与“写实兔”之间找到一种造型的平衡。“兔圆圆”设计过程稿 — 比例调整“兔圆圆”设计过程稿 — 造型三视图“兔圆圆”设计过程稿 — 动作示意草图“兔圆圆”还作为整场晚会第一位出场的“演员”，在开场短片中登场。观众们跟随“兔圆圆”，从充满节日气息的街头市井，来到鲜花盛开的田野草地，而后乘着直冲云霄的节日烟火来到外太空，在空间站舷窗外，看到失重环境下纸花在水膜中开放的独特现象，此时礼花在夜空中绽放，形成了演播大厅舞美天顶的形状，也自然地将观众带入晚会现场。开场短片中的“兔圆圆”短片通过将“兔圆圆”形象三维化，经过不断打磨，配合实景拍摄与动画特效，打造出一个与自然融合、寓意吉祥、形态可爱、含义丰富的新春形象。开场短片分镜草图幕后花絮费俊及视觉组与《2023 年春节联欢晚会》总导演于蕾，在现场监视器前审看节目视觉费俊与晚会总导演于蕾、央美建筑学院副院长崔冬晖团队成员就主持人背景舞台装置进行讨论费俊、胡增鸣与视觉组在春晚现场开工作会晚会开播前接到最后一个紧急设计任务，费俊为岳云鹏变魔术的手绢设计刺绣图案构成费俊与总导演于蕾、副总导演邹为、视觉总监胡增鸣及视觉组在节目成功播出后的合影本篇来源：优设网原文地址：https://www.uisdc.com/2023-spring-festival-gala-design
物料 视觉 用户 前言这次节日活动做了节奏性规划，从题材探索、物料提效、数据论证几个方面，跟大家分享设计是如何深度参与活动当中的。更多节日设计复盘：腾讯案例复盘：如何从零开始打造一个动态节日闪屏？项目背景闪屏作为打开 APP 产品时首要展现的部分，品牌的「门面」顷刻尽显，在众多节日闪屏中如何凸显产品特征、体现品牌的文化性是节日闪屏的重要目的。阅读文章 > 一、活动背景“投资攻略”一直是平安银行理财业务打造大型的理财活动，每年的重大节日都会做，今年的元旦和春节为了让全国人民长假资金不闲置，假期有收益，平安银行理财业务在节前精心准备了投资理财攻略的活动。二、项目思考元旦、春节这类理财活动是没有 offer 的，更多靠物料宣传及推广，所以两次重点活动更多精力的是在探索主视觉的设计方向，希望以此来打动用户，并吸引用户进来“串门”。此项目主要分为三大阶段：前期阶段：主视觉概念设定阶段 -- 围绕题材、品牌角色设定做；中期阶段：活动入口物料 -- 提效设计及提高转化研究；项目后期: 数据验证分析 -- 总结问题和优化方向。1. 元旦项目主视觉概念元旦的理财活动周期时间短，物料单一，所以在策略上更多偏向前期的主视觉概念设定，以此保证活动顺利上线。① 题材方向思考元旦作为阳历新年，具有辞旧迎新的意义，所以围绕“跨年”“迎新”作为切入点，通过脑爆发散的方式列举有关的字眼来呼应主题活动，最终筛选出了正向、点题的关键词作为主视觉搭建对象——奔跑的人、红包、传统建筑。② 草图构思通过筛选出的关键词，结合主题，以草稿进行快速构思；草稿一：人物、场景没有节奏感，元素之间相对孤立，不协调需调整；草稿二：调整奔跑去抓红包的节奏感，口袋旺过于靠边缘了，舞狮过于抢镜需要调整；草稿三：主题与视觉紧密联系，表明“大步向钱冲”的意境。③ 配色方案为了让整体画面“跨年、迎新”的氛围感更浓，从配色和细节上做了一些探究，颜色上汲取中国传统配色作为参考。2. 元旦主 KV 产出元旦氛围：衣服的纹路、荷花、孔明灯、这些具有中国传统古典特色的元素进行画面融入，以此让用户感受到元旦的节日氛围；整体构思：“以大步向钱冲”的创作理念，来提醒用户“抓住理财收益”。① 春节的理财活动题材方向思考春节活动时间周期长，流量大，有更多时间去做设计策略和系统性规划，以此希望活动产能达到预期。题材方向思考今年春节是比较特殊的一年，因为疫情的持续影响，很多人只能选择就地过年。对于长时间没能回家的异乡人，自然对今年“春节”有了更多的期盼，所以今年视觉上除了体现理财概念也要更聚焦于“温情”、打造“团圆年”的愿景，希望以此来打动用户，并吸引用户进来“串门。概念提炼如何打造“温情喜庆年”呢？通过思维发散的方式来提炼关键词，最终晒筛选出以“家”为场景元素来搭建，希望借此将温情喜庆的春节氛围传递给每个用户。场景搭建“家”可以是住宅，是文化记忆，也可以是和家人在一起的情感化表达；家更像是温情的具体阐述，通过选用“家，最为我们的主场景搭建对象，灯笼、对联、烟花营造春节氛围。角色设定在人物设计上，主要从亲和力、喜庆为出发点，在着装和人物细节之处着重考虑，比如服装纹理参考和多人物之间的动态组合参考，既贴近真实，又具备温情感。配色规则元旦配色汲取了具有中国传统色系作为主物料的配色；春节配色为了增强喜庆氛围，采用了偏向大红色系作为主色系，更加符合过年热闹的场景。② 春节主 KV 产出③ 春节主视觉延展及应用微海报高效产出满足业务推广需求微海报在这次节日活动中，更新频率高，每天都要进行修改，所以在设计上通过主视觉图形分拆和素材库应用形成系列感，从而达到高效产出，满足物料推广需要。重点流量入口引流设计部分资源位流量较大，为了增加活动入口的点击率，设计上进行阶段性物料区分投放，前期进行节日营销，后期采用了“投资日历”的形式，示意客户做好理财时间规划，再不买就错过的急迫感。部分活动入口活动长图模板展示页三、数据验证1. 总产能数据通过视觉设计策略及表现最终吸引用户访问 PV 达到 560 万,UV41 万，比去年销售额和订单量同比增加 9%，整体订单转化率达 7.8%，优于去年。2. 成交数据发现活跃用户带来的理财销售占比 79%，主要集中于节前节后三天成交TOP 前三的销售产品，主要集中于节前节后成交3. 根据数据发现，后续优化设计策略重点在节前后三天物料进行差异化，强化用户感知，后续可重点突出销售高的产品介绍、募集倒计时、增加节后成交紧迫感。4. 重要流量入口同比数据提升注意到通过重点流量入口前后期不同物料投放，转化也有所提升，比如首页氛围转化率为 7.03%、弹窗转化 4.5%，数据环比元旦提升了 2.5pct 和 1.1pct，其它资源位，基本保持不变。结语本次活动前期的准备较为充足，物料宣传覆盖很广，在没有 offer 的情况下，通过视觉表现上的设计策略一样吸引了较多的用户预览，从而带动了产品复购，这为我们以后的工作留下很好的借鉴。本场活动也有一个经验上的汲取为后续提供优化方向，比如春节活跃用户大多数在节前 3 天，我们可以通过这 3 天与前期物料进行差异化，重点突出产品介绍、募集倒计时来强化用户感知和增加成交的紧迫感，来达到促销目的。欢迎关注作者微信公众号：「OnepinganDesign」本篇来源：优设网原文地址：https://www.uisdc.com/holiday-activity-design
信息 用户 视觉 遇到跨职能同事对界面设计方案发出灵魂拷问，设计师该如何应答？本文从理论和应用层面，对不同种问题总结了万字科普，希望有用~往期干货：UI/UX设计作品集中的推理分析该怎么写？高手实操案例分析！编者按：作品集中的推导分析部分该怎么写，而不是套市面上的流程和模板？阅读文章 > 一、那些年，我遇到的灵魂拷问...我的日常工作嘛，想必和其他从事界面设计相关工作的设计师一样：70%的时间用来构思设计策略和产出设计方案、30%的时间用来和产品团队各种各样的角色打交道：比如需要通过项目展示，让产品决策者买账；或者给开发工程师解释设计细节、跟踪上线后的品控问题。而在这 30%的沟通时间中，与合作小伙伴们的探（撕）讨（逼）设计问题总是不可避免的一个环节。那在这个时候，如何让他们理解问题背景、如何让他们理解你的设计方案、如何让他们“买账”......诸如此类问题是否能高效沟通，显得尤为重要。其实，对于一些比较偏产品向的界面设计问题（比如：为什么支持“批量取消"？为什么有“确认页”？为什么“全屏展示活动图片”？...等流程、功能、信息展示型问题），我们解释起来是比较容易的——我们可以对标着产品经理制定的产品目标，结合数据分析师或用户研究员总结出来的数据或用户事实，即可快速地合理解释自己的设计方案。但是，如果你的小伙伴恰巧是非常严谨认真、刨根问底的人，他们可能会问出一些 非 常 微 妙的问题，让设计师立时无法抓到一个准确的论点或论据展开阐述，往往只能和团队的小伙伴们相顾无言。那这些 非 常 微 妙 的问题具体指的是什么呢？容我举个栗子：类似于以上的问题，想必各位设计师在日常工作中并不罕见。然而我每每回答时，对话会进入一个奇妙的怪圈，be like:“你不觉得这样设计更清晰/工整/美观吗？”“我不觉得啊，我觉得都长得差不多。”“可是这样用户能更快找到交互目标，完成交互任务，有更好的用户体验呀。”“啊？有吗？为啥？所以呢？”“......”所谓“忍一时越想越气，退一步越想越亏”。咱就是说，每次都不知道如何解释、眼睁睁看着设计被“砍”来“砍”去可不行。为了让我自己变成更加“耐撕”的设计师，同时尽可能帮助到遇到类似问题的小伙伴们，我尝试着阅读、思考、总结了一些界面设计的科普知识，并以此来深入浅出地、感同身受地、科学严谨地解释一下设计师那些对于微妙设计细节的坚持，到底是从何而来的。欢迎各位设计师小伙伴给你们身边发出类似灵魂拷问的跨职能同事分享这个科普帖；也欢迎刚出新手村的、从事界面设计相关工作的设计师小伙伴们，把它当作入门级界面设计理（下）论（饭）科普来阅读。1. 呔！灵魂拷问挑战一！对于“界面设计的工作定义”这个问题，我根据自己的理解和体悟，尝试着用更加通俗的方式概括了它的答案：界面设计，不仅仅是埋头把线框图“从无到有、从有到优”地吭哧吭哧画出来就完事儿了，它还包括了解目标用户的特性和需求，了解产品的细节和目标，并根据用户的期望和产品的商业目标，假设出最“两全其美”的方案，并用目标用户能“看得到”“看得懂”“能操作”的界面把这个方案表达出来。对于这个“两全其美”的方案本身，比如有什么功能、流程长什么样子这些问题，相信产品团队的其他角色会贡献一定的想法和决策；而对于让用户能“看得到”“看得懂”“能操作”这个要求，则是界面设计工作中的主要责任和挑战，也是我们花费了大量时间去“纠结”的关键点所在：有人肯定要问：但凡是能用智能电子产品看到你这个界面的人，肯定看得到字、认识字、也知道要点哪儿。为什么说“看得到”“看得懂”“能操作”这三点居然是个“挑战点”呢？——其实，“能做到”不一定意味着“做得好”，实际上人类的知觉和行为能力是十分有限的。关于这个论点，我将用一个例子来让大家深切了解（人类）用户的认知局限性。请仔细阅读下方的视频截图中，黑底白字的字幕给你“布置”的“观察任务”，之后再点击下下方的视频以开始观看：(《The Monkey Business Illusion》 - B 站视频源 点击下方视频直接播放，或复制链接跳转到 B 站观看）： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。默数白衣服的人传了几次球看完这个视频，相信大家对于人认知的局限性已经有了一定感悟。然而，和“有限”的用户认知相反的是，在实际的产品规划中，（由于不断更新的商业目标）产品的功能和信息的增量却是“无限”的。这对矛盾意味着，要做到“看得到”“看得懂”“能操作”这三点，团队中的设计角色必须斟酌如何正确引导用户在海量信息中，按我们预期的方式和顺序去浏览和操作：而这就是，除了“画界面”——即“把产品经理规划的功能落实在界面中”这个要求之外，界面设计的另一个要求。这也导致了设计师在设计界面的工作中，会反复斟酌一些在跨职能同事眼中显得“无足轻重”的细节了。看到这里，各位看官可能会有进一步的疑问：诚然，“引导用户按商业期望并尽量无痛地操作界面”在上述矛盾点的铺垫下，确实显得十分重要。但是，这难道不该跟“界面结构”“文案”这些更直观的要素具有关联性吗？正确的交互引导和设计师纠结来纠结去的界面细节（比如：元素距离、字体大小、图标元素......等），到底有什么因果关系呢？用一个不那么恰当的例子做类比：程序员在模拟环境下跑代码之前，虽然没有那么确切的证据能证明这段代码一定能跑通且无 bug，但是他们往往会参考以往的经验和网上的案例，用最保险的逻辑和语法至少先码出一段能跑的代码，让它先运行起来再纠错。那么相似地，设计师设计的界面在上线之前，谁也不能保证这个设计一定能达成设计目标——商业目标及用户体验目标，但起码我们可以参考行业公认的“共性设计规律”，以及通过用户调研、数据分析得来的更有针对性的“个性设计规律”，用最自信的方式先设计出一个达到开发和上线标准的界面：而上述所说的“行业公认的共性设计规律”，往往就和那些跨职能容易忽略、但设计师却不停纠结的界面设计细节，息息相关。那么，这些“行业公认的设计规律”是什么？决定了怎么样的设计细节？以下我将挑选最基础的一些案例，用跨职能小伙伴们常见的“灵魂拷问”作为开头，结合理论和应用场景，帮助大家更快地感受和理解。2. 呔！灵魂拷问挑战二！我们来抽象和展开这个问题：为什么我们需要对某些界面模块进行“特别的设计”？需要“特别的设计”的情景是什么？为了回答这个问题，我想首先介绍一个界面设计的基础理论给大家：这个理论其实很好理解，无需再深挖背后的心理或生物学原理啥的。不过值得一提的是，这个理论其实不仅运用在界面设计中，在很多其他的艺术或设计创作领域也很常见，我能快速想到的一个（奇怪的）例子就是，喜剧《唐伯虎点秋香》中唐伯虎初遇秋香时，唐伯虎端详了一下秋香的外貌，对身边的祝枝山说“长得也是一般的好看而已嘛”，然后祝枝山意味深长笑了笑、朝着人群大喊：“美女！”，结果所有华府的女佣都转过了头，唐伯虎惊讶地往后一跳，直呼：“哇~秋香果然是国色天香，超凡出尘！”如果把唐伯虎想象成目标用户（？），把秋香姐想象成我们想重点推荐的功能（？？），要想让秋香姐，啊不是，某个功能对用户而言，是引人注目且过目难忘的，我们需要做出强烈的“对比”来凸显——在界面设计中，这个“对比”可能是颜色、尺寸、形状、留白等样式上的各种不一样：让我们再回头看看这个灵魂拷问：诚然，通过“挑选一个合适的展示位置”在现有布局中达到“使模块呈现最好的曝光量、（重复）点击率等表现数据”这个目的是可行的，但是不可否认的是，一个载体界面上最佳的位置是有限的，位置的更改更是对页面其他模块而言会牵一发动全身、对用户而言会产生新的学习成本。一旦我们想尽量维持其他现有功能的布局、或希望除了位置优化之外，穷尽最大所能提升模块的行为表现时，为这些模块做特别的设计优化是必要且合理的。当然，这种“特别的设计优化”中的具体设计细节，也要考虑到此处设计复杂度 v.s.研发周期等“性价比”问题，不能理直气壮一味追求“特别的视觉效果“而掉入“过度设计”的怪圈。3. 呔！灵魂拷问挑战三！让我来进一步抽象这个问题：对于界面中的文字信息，既然可以利用格式（分行、分段）来区分其类别和从属关系，我们为什么还需要进一步给予文字不同的视觉权重呢？在进一步解释其原因之前，让我们先明白另一个关于信息阅读的“规律”：为了更好地理解这句话，让我们将自己代入一个例子来实际体会一下所谓的“通过抓取关键词判断全局内容”是个什么情况，请回答以下问题：回想一下，你在以上例子中收集信息的方式是什么样的？是挨个阅读了第一组和第二组中的所有内容并做出了判断？还是跳跃阅读式提取了和“台灯”更相近的关键字并做出了判断？相信大部分人都更偏向于后者，而后者就是我们所说的“通过抓取关键词判断全局内容”。记得之前在阅读《社会心理学》这本书的时候，我发现在应用层面上，几乎所有的人类行为动机，其背后都有一个较根源的规律：人脑总是倾向于“简化提取信息“和“分散认知压力”。那么，当我们尝试着用这个心理学现象去反观“信息线索”这一规律时，它似乎变得可以推理和解释了：当我们的界面中堆叠了海量信息和视觉元素时，和我们预想的“用户会按顺序依次获取信息并进行脑内加工”不同，用户下意识会为了简化认知过程、分散认知压力，去跳跃式阅读并“采摘”他们认为的关键信息到大脑的“中央处理器”中，进行进一步加工，以便搞清楚“这个页面是什么？”、“我能否找到我需要的东西？”、“我大概能在哪里通过什么后续交互找到它？”...等问题。不知道大家是否曾看过“F 型阅读顺序”这个用户阅读规律，其实它的底层逻辑也同样是“信息线索”。那么让我们回到开头的灵魂拷问：为什么需要给界面上的某些文字进行视觉权重的处理，也就是加黑、加粗、加大、加行距等等？其实答案已经不言而喻了——为了把我们想传递给用户的信息，像喂饭一样“喂”到总是跳跃式阅读、可能会遗漏关键信息的用户的“嘴”中，让他们找到他们想找到的、或者我们想呈现给他们的信息。举两个栗子：4. 呔！灵魂拷问挑战四！用简单的话来复述这个问题，就是：利用额外的动态控件去传递信息，它的必要性是什么？对于这个问题的答案，让我从一张图片开始，为大家展开阐述。如下图所示，请你尝试盯着图片中心的蓝色圆形，并尝试用余光去辨别距离这个圆形由近及远的物体分别是什么：你是否有如下感觉：距离圆形，即我们的视焦点越远的物体，越难以辨别是什么形状？那么请你再尝试盯着下面这张动图的图片中心的圆形，并尝试用余光去辨别最远处那个不停运动的物体是什么：对于这张图片，那个动起来的、距离圆形较远的物体，好像没有静态的时候那么模糊了？以上这两个例子，其实都涉及到一个关于人类视觉的普遍规律：这个规律实际上和我们眼球构造导致的视觉特性有关，如下图所示：人的眼球视觉可分为“主要视觉”和“次要视觉”。其中，“主要视觉”分布在中心区域且范围较小，由“视锥细胞”产生图像，而“视锥细胞”对于光线充足条件下的静态目标的色彩和形状细节都十分敏感，在白昼时是人类主要使用的视觉细胞；“次要视觉”则围绕“主要视觉”分布在其周围且范围较大，由“视杆细胞”产生图像，“视杆细胞”对于亮度和动态十分敏感，是黑夜中在“视锥细胞”失灵时的主要视觉补充方式。其实，不仅是人类，很多其他以捕猎为生的哺乳动物的眼球也有同样的视觉特征。“主要视觉”能帮助捕猎者更好获取在视觉中心的猎物的一举一动，“次要视觉”则能帮助捕猎者快速获取周围环境中潜在的危险或捕猎竞争者的动向变化。这就解释了为什么当你在光线充足的屏幕上，盯着上面那张静态图片中的圆形时，你的“主要视觉”只能支持你看清视觉焦点范围内的很小一圈的事物，比如距离圆形最近的外星人头像；而对于那些距离圆形较远的形状，则因为落在了“次要视觉”中，而随距离变得越来越模糊。那上面这个视觉规律和本环节的灵魂拷问又有着怎样的关系呢？首先我们要明白的一点是，人类只有一双眼睛、一个视觉焦点（动线）。那么，当这唯一的视觉焦点随着我们正在进行的交互，移动到界面中的某个位置时，可能某些比较重要的、距离视觉焦点较远（而坐落在了“次要视觉”区域内）的信息，正在随着交互的进行更新了部分内容，那用户很可能就错过了这个重要信息的更新。那么，设计师能做什么来防止这种情况发生呢？根据上文提到的视觉原理，这里应该有两种思路：1. 把关键信息的静态文案，放置在当前交互（视觉）焦点附近 2. 如果 1.的解决方案在当前界面布局规范中不被允许，那么我们可以利用“视杆细胞对动效敏感“的特性，动态展示关键信息。最后，让我通过总结上文的内容，来快速回答一下本环节的灵魂拷问：当你想强调的信息和当前的交互（视觉）焦点较远的时候，由于视觉的局限性，我们很难感知到其变化。如果这种“不被用户感知”的概率很大、且其造成的体验或商业后果让人难以接受时，将该信息重复强调在焦点附近、或者用动效引起用户的注意，都是必要且合理的设计手段。5. 呔！灵魂拷问挑战五！同样，首先让我尝试转译和展开这个问题：在内容能够完整传递信息的情况下，为什么我们还要增加额外的视觉要素？对于这个问题，和前面的环节相同，让我先引入一个和答案有关的设计规律：单纯看字面的意思或许有些抽象，为了方便大家理解，同样我将用一个实际的例子来让大家亲身感受一下这个规律。如下图，请分别大声朗读出两个组中的所有词汇，朗读时记得尽量快速并保持正确（想挑战更高难度的小伙伴，也可以尝试朗读每个词汇的字体颜色名称）：你是否发现自己在识别和朗读第一组内容的时候，速度是快于第二组的？那原因又是什么呢？如果你仔细研究上面两组词汇，就会发现：第一组词汇的字面意思和字体颜色名称是一致的，比如：“粉红色”三个字的字体颜色也是“粉红色”；而第二组的上述两个要素，却是错位的。其实，在这个例子中，（如果你挑战的是朗读词汇本身）字体颜色就是一种“环境刺激物”，当人们对“环境刺激物”和目标识别物本身的信息认知是一致或者相似的时候（正如第一组所展示），就如本规律所说，人的辨识速度会更加快；反之则减慢。接下来，让我再例举一个和界面设计更贴脸的例子，让大家快速感受一下：如上图所示的三组提示，你阅读时长最短的是哪一组？你能最正确地 get 到弹框信息的又是哪一组？想必大多数人的答案都是第三组，因为其提示中的文字和辅助刺激物（颜色、图标）传递的信息是一致的，因而能使人们更快更正确 get 到信息。其实这个例子也体现了界面设计中，最常见的“环境刺激物”是什么——比如：颜色、图标、插图......这种视觉类刺激物；其他一些不常见的“环境刺激物”包括了：声音、震动这些和其他四感相关的刺激物（写到这里突然想到windows系统里，当警告框莫名其妙连续弹出时，那一连串的“噔噔噔噔噔”，就算现在回想都能吓到炸毛的程度...）：当然了，选择“环境刺激物”时也不一定非要挑选被文化或普遍认知刻进我们 DNA 的那些元素，诸如：红色=警示、感叹号=有问题......，它也可以来自特定产品领域、甚至完全来自你的产品本身：通过在交互中的不断重复和保持一致，将新的“刺激物+含义”组合刻进用户的潜意识中。比如，在填写密码/验证码等口令类输入的情境下，弹出框的震动会让人甚至都不用看错误提示，就意识到“填写错误”这个信息。这是因为某些聊天和金融类 APP 已经通过不断应用该“环境刺激物”在相应的场景，来让我们下意识把“震动”和“填写错误”联系起来：好的，有点扯远了......让我们回到这个问题。已知人在与界面交互时，注意力是线性的+有信息量上限的，当设计师面临：用户正在最重要的任务或者信息流中，且不应该被打断并转移注意力到次要信息线上。但同时，获取该次要信息对于用户后续的操作决策而言，又是必要的；用户正在主信息流中获取某个信息，但 ta 需要花更少的专注力成本在这个信息上，以便于将注意力“花在刀刃上”。在这两个情况下，用视觉权重适当的、含义一致的“环境刺激物”去辅助呈现对应的信息模块，是合理且有必要的设计手段。这是否给你带来了一些颠覆原来认知的、对界面设计的启示？——有的时候，界面设计上的“多设计”，反而是为了用户“少阅读”。6. 呔！灵魂拷问挑战六！同样，让我转译一下这个问题：在分割界面信息模块上，多样的空白行、多余的分割线，他们存在的意义是什么？在回答这个问题前，同样让我们从一些由实验结果总结而来的“规律”作为前情铺垫：这个规律其实很简单直观，大家可以回想一下自己欣赏各种平面艺术作品时，是否都是按照简单几何形去拆解构图的？或者反过来思考，在阅读过的平面设计构图教程中，是否大多数构图法则也都是以简单几何线/形作为基础的，比如：三角形、圆形、正方形、梯形、对角线、放射线等等...从正反两个方向来看，都有事实印证这个规律的正确性。在界面设计中，由于“传递信息”这个关键目的，带来了“布局的复杂度必须较低”的局限，同时也是考虑到技术投入和实现难度等问题，当设计组件或信息模块时，我们通常会采用的形状仅有方形和圆形：其中，圆形常用于偏视觉的元素（比如：图标，图标按钮等），我们暂且不展开。接下来，让我们聚焦在常应用于控件或文字模块的“方形”上。这时候就不得不引入一个在界面设计领域，大家最熟悉的理论之一——“格式塔”理论了。这里为了让解释更加好理解一些，让我直接选取一些和本环节问题最相关的两个“子理论”来为大家展开阐述。第一个“子理论”是“邻近性原则”：上图其实把这个原则体现得淋漓尽致，我就不再为大家举另外的栗子展开解释了。其实，这个原则就回答了“信息间的空白空间”存在的必要性——你是否还记得前文提到的“信息线索”这个规律？既然人们的界面阅读习惯是“快速扫描”、“跳跃获取信息”，那么，和“文字权重的多样性”类似，“空白空间”往往能让人在扫描信息时，下意识推理出信息结构（即信息的从属、分组关系），从而使得这种“跳跃式获取信息”的行为更加快速和准确。比如：当用户看到一整块被空白分割出来的、较独立的部分时，会下意识去扫描第一行——他们往往会认为那一行是标题。通过这种方式，他们可以了解这个信息模块是关于什么的、有没有仔细阅读的必要......等等关键信息。那么，如果“有层次的空白空间”就能在视觉上帮助分割界面的信息层级了，为什么有时候设计师还会应用分割线/框呢？首先需要从另一个“格式塔”的“子理论”——“同域原则”说起：这个规律说明了“分割线”也同样能帮助信息分组。并且，在设计实践中，“分割线”这种更为强烈的视觉元素，其分割信息的视觉强度是大于“空白空间”的——这意味着在以下两个情况下，分割线是有存在必要的：当在界面中的某层平级元素里，有最最需要重点强调的单个信息组时，需要用分割线/框强调之； 当界面中的某类平级元素，因为内含的子元素太多太杂导致“分无可分”时，需要引入视觉上观感更强烈的分割线/框来强化分组。当然，还有其他例外的情况也会使用到分割线/框，它们和视觉分组无关但和交互引导息息相关，比如：“带边框的信息模块”可用于暗示该模块可点击、且点击都指向同一个目的地页面；“一列带框的信息卡片被屏幕边缘隐藏一部分”，能用于暗示该卡片列是可横向滑动的......等等，这些常见的使用场景相信大家都不陌生，就不展开讨论了。所以总结并回答一下本环节的问题：“空白”的多样性，能帮助用户在扫视界面时，更快理解界面中的信息的分组关系、子母集关系，从而提升当用户跳跃式阅读界面时，其找关键字的准确性和速度；而分割线/框，作为“空白”的补充手段，既能在视觉上强调单个信息模块，又能帮助在层级过多、元素过杂的情况下，让信息的分组显得更清晰。因此，在信息较多、层级较复杂的界面中，设计师合理地利用多种数值的空白间距、分割线/框，是一种能帮助用户在阅读信息时“大脑减负”的常见方式。7. 呔！灵魂拷问挑战七！上述问题中提及的，无论是“菜单”还是“筛选”，本质上都是为目标选项池新增属性维度，并按这些维度分别分组，基于此让用户“按组定位”逐渐找到目标选项的一种交互方式。所以，让我们转译一下本环节的问题：和让用户直接阅读选项信息并决策相比，为什么我们需要通过（多层）分组的方式，让用户决策的过程从“一次性选择到目标”到“通过层层筛选、慢慢锁定目标”？它应该被应用在什么情景中？因为这个问题解释起来也有些复杂，因此，同样地，让我从人类“决策行为”的剖析开始阐述。人的决策行为，本质上分为“感知”和“思维”两个步骤：先“感知”一个可选项、理解它的内容、并将以上内容“存储”在自己的“短时记忆”中，然后接着“感知”下一可选项并同样存储在“短时记忆”中......然后通过“思维”快速判断自己对每个可选项的主观喜好、客观利弊，最后做出决策。从上述的“决策行为”方式中，我们可以看到承上启下的关键点是“把选项储存在‘短时记忆‘中”。说的有点悬乎，举个通俗的栗子来讲就是：当你上班摸鱼，思考中午吃啥的时候，你得先在脑内回忆一下今天食堂的菜谱有啥，才能基于这个信息纠结一小下下，最后决定吃什么。那可能有人又会问：这“短时记忆”又是什么？为什么选项会被存储在“短时记忆”、而不是其他什么什么的记忆里呢？好的，那让我们进一步展开这个话题，来探讨一下“短时记忆”这个概念。让我快速用一张图片来给大家科普一下什么是“短时记忆”，以及它的兄弟“长时记忆”：一般，在我们采集到信息中的关键内容后，它会被首先放入“短时记忆”中，只有当我们不断复习（刺激）该信息到某个临界值，它才会被放入“长时记忆”库中，拥有“长时记忆”的特性：一个事实是：大多数的选择决策往往都是一次性的。这就决定了它们只会存在在“短时记忆”中，并拥有“短时记忆”的局限性——留存时间短，最关键的是，可留存的信息量少。那到底这个“少”又是多么地“少”呢？这时候就不得不提到继“格式塔原则”之后另一个界面设计中最常被提及的定律——“米勒定律”了：那么，基于上面提到的两个关键点（即“记住可选项是决策的关键点”、“能记住的可选项的容量十分有限”），我们可以引出一个和用户决策行为相关的界面设计中的规律——“席克定律”：下面我将举一个栗子，让大家感受一下这个规律将如何作用于我们的决策行为中。假设此时你正准备吃中饭，那么请分别在下面 A-C 组的菜谱中决定你想吃的东西。你可以尝试计时，自己从开始阅读菜谱到最后决定吃什么共用了多久：体验完上述的栗子后，请试着回想一下：是否从 A 到 C 组的决策时长有个非常明显的增长趋势（如果你有一丢丢选择恐惧症，那么这种增长会更加明显）？这就是“席客定律”想告诉我们的规律。那么在设计实操中，如果可选项过多（超过 9 个），且这种决策对用户而言是必要的、不可跳过的，我们怎么减少用户在进行该决策时的思考负荷呢？在本环节的开始，我曾提到过，人类的决策过程分为“感知”和“思维”两个步骤，因此我们的优化方案也可以从分别优化这两个环节入手：优化“感知”的处理负荷，即帮助用户剔除非必要的可选项，可用的手段有自动筛选、自动排序，以及手动筛选框、手动排序等功能；优化“思维”的处理负荷，即将决策的关键因素拆解成不同的维度（组），并将信息多层次地分组放置，形成各种样式的“菜单”，手风琴菜单、下拉菜单、侧边菜单...等等。当然，解决措施有意义的前提是想解决的问题是有意义的，因此我们可以逆推，上述 1.和 2.的解决措施的应用场景为：选项库在做决策的当下，只会存在于用户的“短时记忆”中——毕竟正因为如此，才有了决策能力的局限性，才引发了后续问题和解决思路。那么，到底是哪些具体的应用场景符合上述条件呢？我罗列了一下能想到的场景：动态变化的选项库，比如：商品搜索结果列表、活跃用户列表、最热门的歌曲列表等等；非用户定制的、使用频率较低的选项库，比如：工具类软件的某些功能列表，系统设置选项列表等等。而一旦选项库是静态的、使用频率较高的、用户定制的，在这种情况下，选项库大概率已经坐落在了“长时记忆”的区间中，所谓“自动脑补”。在这种情况下，设计师可以不用考虑优化决策体验的问题。这时候，设计师使用“菜单”或者“筛选框”等控件的考量，更多应该是基于用户的心智模型、竞品的常规处理方式、它本身或其他同界面入口的曝光量影响等问题了。二、灵魂的拷问？灵性的应答！虽然，贯穿本文的始终是一个个“规律”和“理论”，但引用这些“规律”“理论”的本意是为了佐证本文中各种观点的合理性（毕竟“理论”和“规律”都是多次实际实验后总结出来的、在当前情景下最可能发生、最普适的现象），而非真的让大家在实际解决问题的时候，去咬文嚼字般地用似是而非的语言营造自己的权威感。让我们开个脑洞换位思考一下：当你在和程序员交流的时候，他们直接甩出代码开始和你讨论数据结构；当你在和数据分析师交流的时候，他们直接把公式和 XX 定理摆在你面前高谈阔论......在这些情况下，你非但不会觉得他们很专业，反而会一头雾水地当场无语，对吧？推己及人，我建议大家在实际的跨职能沟通中，能够更多以这些“理论”“规律”中较表象、容易理解的信息作为起点，结合实际的问题情景、设计方案去解释和沟通：以上就是基于我在实际工作中跨职能小伙伴们常问我的灵魂拷问，深度研究和思考后总结出的一些理论依据和应用方法，希望对你无论是审视自己的设计作品、还是回答跨职能同事的问题，都有参考价值。最后，感谢大家阅读本文，也欢迎各种点赞评论收藏，栓 Q~欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/workplace-response-guide
用户 设计师 视觉 学习任何东西，最好都能重头开始，本文阅读时长大约 5 分钟。内容仅代表个人观点，欢迎各位探讨...我身边有不少的同事或朋友转型交互设计的经历，他们的原职位有些是产品经理、销售或设计师。而我本人也是一名交互设计从业者，在对交互设计的不断探索及日常工作经验的总结中，发现了一些交互设计中常见的误区。写到文章中分享给大家，希望能对即将步入交互设计领域的伙伴们有帮助！更多交互干货：大厂出品！写给UI设计师的交互自学指南编者按：本文从启蒙、基础、强化、进阶4个方面，列举了UI设计师学习交互的路径和方法。阅读文章 > 误区 1-交互设计门槛很高交互设计介于产品经理与 UI 设计师之间。是为了顺应时代发展划分出来的岗位需求，虽然已经出现了很多年，但目前来看，交互设计在一些中小型公司仍然是比较模糊的领域。甚至很多从业者把交互设计交给产品经理或 UI 设计师来实现。这种想法非常浅显，而且容易带来系列的体验问题。很多人在步入新领域的时候，都会寻找对应领域所需要的知识结构、能力模型...我和身边的朋友经常会聊到这些，试图从中总结出一个好的交互设计需要满足哪些特质。沟通能力、人机科学、心理学、认知科学...但很多初学者看到这些就放弃了，它给人一种学习曲线很陡峭的感觉。在我看来，交互设计师的专业程度很大一部分取决于对用户的了解深度，而非是专业知识。所以，对于初学者来说，只需要具备一个必要的入门特质——同理心（empathy），这是一种理解或者感受他人（用户）的能力。在生活中，如果你觉得自己是一个比较能站在对方角度思考的人，那么恭喜你，你已经具备交互设计师的特质了。但是同理心并不是一件很容易的事情，你需要它贯彻交互工作的始终，“以用户为中心进行设计”并不是一句slogan，始终站在用户角度思考问题，这非常重要！！！误区 2-交互设计工作是画原型图原型图和流程图是交互设计师的主要产出文档之一，但是交互设计需要做的不仅仅是产出这些文档，甚至很多时候，交互仅仅需要提供建议。UX 设计指的是设计用户体验的过程。核心的焦点在于设计用户行为，用户行为不仅仅体现在原型图上点击或滑动某个地方，而是尝试引导用户诱发或者推动响应。很多从业者错误的认为交互设计就是画原型图和流程图，这种想法往往会把注意力集中在用户要完成的任务上，而忽略了体验过程中是否有足够的关注。完整的用户行为，应该包括预知、反馈、返回三个阶段，交互之前有预知，交互之中有反馈，交互之后有返回，这三点支撑起交互基本的可用性。1. 交互之前有预知用户在使用产品进行交互前，是否能够清晰感知到需要的信息以及下一步的行为？《About Face 4 : 交互设计精髓》一书中提出，用户对于一件事情的心智是一个圆，我们设计出来的东西越趋于这个圆形，用户对设计就会越满意。所以在进行设计之前，多问自己一些问题。用户来这里的动机是什么？他们点击这个东西的时候会有什么预期？他们是否对未学习过的东西有一定了解?...2. 交互之中有反馈系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解。比如加载页面的设计中，我们会通过进度条或者场景插画的方式预知用户页面的进度，从而打消用户等待过程中的焦虑。3. 交互之后有返回可逆性是交互设计中重要的一环，用户不可能百分百的按照我们设计的路径去使用产品，事实上，用户常常会误触到某些功能，即使在线性的流程中，我们也应该让用户可以方便的退出，始终让用户保持可控的状态。比如微信聊天中的撤回功能，在发送错误信息后，可以通过长按这条消息或者表情，在选择框中操作撤回。举个例子，「饿了么」在选购商品的时候，交互前通过按钮置灰预知用户不可点击，交互中通过动效、Toast 给予用户操作反馈，交互后可通过外卖箱对已选商品进行删减或清空，保证产品可逆性。误区 3-用户的想法都是对的为了贯彻“以用户为中心”的设计原则，很多设计师会选择直接听取用户的设计建议，最终导致产品越做越复杂，最后造成体验上的损失。实际上，UX 是一项技能，而不是一种天赋。这意味着大部分用户是无法帮你进行设计的。而且当你面临未知的挑战时，不能一味听从用户的想法。你可以听取用户的意见，但不要他们说什么你就干什么。听听用户是怎么想的，看看他们是如何尝试完成某项操作的，了解他们是怎样在你的设计中迷失的，以及为什么会这样。然后，去寻找这些问题的解决方案。福特汽车创始人亨利福特说过一句名言：在汽车出现之前，去问顾客想要什么，他们可能会说：一匹更快的马。”如果我们一味的听取用户的想法，那我们只能在解决方案上做加法。如果要找到完美的解决办法，我们必须学会找到问题的本质。误区 4-交互不用考虑视觉这是交互设计师经常忽略的，把线框图当作速成且粗略的草图，或者把它当成设计的第一步，只展示流程如何运作，却忽略了是否能够更好的运作。交互设计师在组织框架时，除了保证逻辑清晰外，视觉也是构成体验的一部分。交互设计师虽然不直接负责视觉效果，但需要通过元素之间的结构关联和强弱对比，将有效的信息传递给下游。在必要的情况下，也可以通过 1-2 种颜色来表达你的想法～具体可以分为视觉重量、视觉关联两个方面：1. 视觉重量用户不可能像机器人一样把页面所呈现的内容都扫描一遍，如果你想要用户着重关注某些内容，你需要调整不同信息的视觉重量，以达到主、次、先、后的顺序。当你不断的使用排版来突出重要文字、用特定的颜色强调按钮，并且给重要内容以更多的视觉重量时，就创造出了视觉层级。用户的眼睛就可以从一个重要的地方跳到另一个重要的地方。交互设计师在传递技术文档时要体现出这一点。2. 视觉关联交互设计师除了注重逻辑关联外，视觉关联也是组织信息框架时重要的一点，在用户没有了解你的页面之前，会下意识的通过眼睛划分哪些信息都有什么关联，在设计中，我们通常将有关系的元素给予更强的亲密度、统一的样式，甚至通过卡片、色块的方式来划分关联。而且位置接近的元素关系越强。我们不需要像视觉设计师一样将原型图绘制的如此精细，但需要通过一定的处理方式体现出视觉的关联性。误区 5-我觉得这样做会更好设计师不用对 KPI 负责，但要直接对体验负责。交互设计师的工作中，自身代表的就是用户，任何时候都要避免一些主观的看法。不要你觉得，而是用户觉得。任何需求都离不开用户这一要素，不同的用户群体决定了设计上的不同策略。如果你想设计出用户满意的 UX，在工作中需要做的第一件事就是了解用户，并且持续这一过程。《用户体验设计-100 堂入门课》这本书中有个很有意思的观点，在了解用户之前，你需要先了解关于自己的两件事认清自己：你想要的东西对用户来说不重要你要知道什么东西对于用户而言不重要很多设计师刚开始能做到这一点，后来慢慢陷入设计自嗨，最终导致体验受损。交互设计师要始终意识到，出色的产品设计始于用户研究，上文说到，交互设计师的专业程度很大一部分取决于对用户的了解深度，如果你不知道如何着手了解，您可以尝试了解一些用户研究方法与工具，并把他用在工作的实践中，比如：桌面调研、用户访谈、焦点小组、用户画像、故事板等。误区 6-弹窗不能跳弹窗弹窗对很多人来说并不陌生，我们经常在各种网站和各种 APP 中看到。弹出式设计被评为“历史上最糟糕的设计体验”。所以”弹窗不能跳弹窗“这句话，如铁训般的规则深入人心。在体验设计的层面上，普遍的说法认为，一定程度上，多个弹窗会加重用户的心理负担。而且会造成用户迷失。那为什么会说弹窗不能跳弹窗是个误区呢？因为随着互联网业务深耕的发展要求，经常会遇到弹窗覆盖弹窗，浮层覆盖浮层的需求，如果我们只是以“弹窗不能跳弹窗”来否定需求，这并不是交互该做的。我们应该了解弹窗的底层体验逻辑，再探讨弹窗体验使用的合理性。1. 弹窗层级弹窗在层级上比操作界面更高一层，会聚焦视觉，所以弹窗覆盖弹窗的时候应该避免带给用户层级过深的感受，以此来降低带来的心理负担。比如弹窗覆盖时出现尺寸差异及较大的视觉差异。2. 弹窗承载弹窗的空间承载比页面要低，我见过不少的产品提出弹窗跳弹窗的需求，目的是为了希望用户在复杂操作后仍然可以留在原页面。实际上这是不对的。对于一些复杂的操作或者过载的信息，页面是比弹窗更加合适的载体，如果我们只是想用户做完这些回到原来的页面。只需要设计一个体验循环的闭环。3. 弹窗操作弹窗会聚焦行为，弹窗跳弹窗的情况只适用于线性的操作流程，线性的操作会使用户心理上有较强的预期，可以避免多个弹窗所带来的迷失感。所以，一切出发点都要围绕体验及感受的合理性，如果我们设计的交互流程呈线性，且满足弹窗的承载能力。那么完全通过一定的设计技巧实现弹窗跳弹窗的交互方式。误区 7-效率至上悖论效率至上，这句话本身没有什么错误，交互设计师应该重点关注效率。但我发现，很多人喜欢通过漏斗或者步骤来衡量一个流程的效率（用户之前用了几步，优化之后用了几步），甚至出现某些“规则”，一个流程尽量不要超过 3 步的说法。很多设计师为了所谓的“效率”而刻意缩短步骤，结果导致用户整体的使用时长增加。这就陷入了“效率至上”的悖论中。如何避免效率至上带来的“诅咒”？建议以下两点：1. 关注目的而非效率效率不是交互设计师唯一要做的事情，设计的本质是解决问题。如果我们的目的是为了设计出 XXX 保险的购买流程，我们应该思考用户在整个购买流程中的心理变化，如果像推销保险一样，上来就设计出一个购买页面，让用户去购买，用户一定会很排斥这种做法。必要的时候我们甚至可以分为 2 步，先着重介绍这个保险的好处，再试图让用户去购买。2. 状态清晰原则始终让用户保持清晰的头脑，席客定律提到过，人在面临选择越多的时候,所要消耗的时间成本越高。假如一个遥控器上面有 100 个按钮，我想使用者在看到时就已经崩溃了，而假设遥控器上只有 10 个按钮，使用者则会很快上手并开始熟练使用它。作为交互设计师，应该始终意识到这一点。无论我们设计的流程需要多少步骤，都应当始终保持状态清晰易懂。以上就是我总结的设计工作中常见的误区，如果你们也在日常工作中遇到各种各样的问题，欢迎大家评论区留言～本篇来源：优设网原文地址：https://www.uisdc.com/7-interactive-design-misunderstanding
视觉 带你 物料 潮流是个圈。那些曾经流行过的设计风格，视觉元素，总会以各种各样的方式重新回来，只是视觉风格的每一次回归，都多少会带有属于当下的设计基因。这种情况在设计领域，尤其是视觉和平面设计领域，特别明显。全世界在疫情反复中煎熬了 3 年，怀旧情绪也在设计领域中开始蔓延也就不足为奇了。有氛围直接拉满、抓人眼球的的 70 和 80 年代风情：还有 90 年代风情的界面和物品：千禧年 Y2K 式的趣味和怪诞：装饰性十足的复古小贴纸里藏着的诗和远方，恰恰是对抗隔离和疫情的倔强：而带有一丝迷幻色彩、又特色十足的角色和视觉元素，又是当下让平面设计作品脱颖而出的不二法宝：那么，这类潮流平面设计作品，都是怎么设计出来，又需要掌握哪些技法呢？从元素的搭配，布局的选择，色彩的勾兑到内容元素的梳理，甚至物料的输出，内容的包装，这里有一站式的解决方案：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com超全内容 + 潮流复古 + 插画加持这是一套带你重新夯实平面设计基础的课程，从高频使用的字体、构成、配色、排版入手，带你打牢平面和视觉设计的基础。结合讲师 AC 炒碗面 的大量实战经验，带你解决日常设计中最常见的问题，增加视觉表现力，提升视觉张力，强化排版丰富度和自由度。同时，这也是一套结合经验带你重塑视觉设计的课程，老师会教你从装饰性小贴纸入手，带你熟悉使用矢量设计软件绘制小元素、贴纸，到绘制贴合主题的角色和灵活机变的小场景，带你彻底提升平面设计的视觉表现力。最后，这还是一个带你自由应对各种类型设计物料的课程，从 Banner 到海报、H5 等常见的设计物料都涵盖在其中，灵活的物料拓展技巧还能帮你丰富作品集。下面的大纲，最能说明问题：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com大厂人气潮流设计师：AC 炒碗面Ac 炒碗面一直都服务于充满活力的企业和平台，无论是在知乎、快手还是在陌陌，她都能让平凡的主题焕发出丰富的色彩，在日常的选题中搭建出有趣的脑洞，用灵动的色彩和灵活的排版来承载内容，借助潮酷插画来呈现丰沛的情感，靠形体和视觉抓住用户和甲方的眼球：活在潮流前线的 Ac 炒碗面 ，不仅有着她自己摸索出来的一套平面设计和插画设计方法论，而且在实战中还总结出一整套应对不同情况、不同设计物料的完整技巧和解决方案，而这也正是这套课程的底气！下面是 Ac 炒碗面 的设计作品：以下为往期学员的作业：如果你也打算将平面设计技能全方位升级一下，顺便掌握一些强化视觉的插画技能，同时强化设计运营能力、提升应聘求职时的竞争力，就不要错过今晚的秒杀：课程原价 499 元，新课特惠价仅需 399 元，直减100元！移动端扫码报名，PC端右戳报名：https://pro.uisdc.com本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-course
视觉 轨迹 视线 我们的作品信息的传递效率高吗？什么样的设计是清晰有效的？想要搞清楚这些问题，首先你得了解视觉动线这个概念。往期回顾：平面设计构图法！6招快速提升版式水平！任何类型的设计都离不开版式构图，但产物的不同构图方式也会有所差异，本文将探讨运营活动设计中的构图方式和技巧~往期干货：阅读文章 > 一、什么是视觉动线1. 动线动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。在商业建筑领域，动线的设计也被频繁的运用。例如店铺的顾客动线设计，通过兴趣区吸引顾客，引导顾客尽量多的浏览店铺的商品，从而提高销售额。商业空间的动线设计讲究的是坪效（每平米的销售额）,动线的设计更侧重迂回。还有比如动物园、游乐场的路线设计，就涉及到游玩顺序的体验，以及缓解拥堵等问题。因此动线设计的目的在于提高效率，在家居和商业空间领域已广泛应用。而在视觉设计领域，也存在动线的概念。2. 视觉动线大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。但是中央凹的面积极小，高清区域有限。人眼只有在 10 度视角范围内才最为敏感，30 度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。在视觉设计中动线的设计尤为重要，例如下图的 banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。二、有哪些动线类型我们以运营设计为例，来讨论一下常见的动线类型。在运营设计中，banner 和活动专题是最为常见的，这类型的设计，画面往往很有感染力，内容丰富。这里介绍的动线，是指某张 banner 或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型：直线型、汇聚型、发散型、扇型、以及 Z 型。1. 直线型直线型动线顾名思义，就是在一条路径上依次展示信息元素。我们以 banner 为例来看看如何应用。在分析动线轨迹的时候，我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题，我们称第一眼看到的焦点为视觉入口点；紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。banner 中只在标题和火焰上使用了色彩，其他背景使用较灰的色系，这使得视觉焦点突出，动线清晰。① 动线角度直线型动线在运用的时候，不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。例如左图这张 banner 就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。② 视觉焦点个数直线型动线中，人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点，但并不是焦点越多越好，一般 2-3 个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。2. 汇聚型汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。例如下面这张 banner，我们的视线会先被左右两侧英雄所吸引，延着他们冲刺的方向视线转移到了中间的标题，这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性，最终目的是让观众的视线聚焦到中心，以突出中心的标题或者主体信息。汇聚型动线的视觉入口点一般在 2 个以上，例如下面这张活动头部，通过两侧的烟雾塑造视觉入口点，引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。3. 发散型汇聚型动线是由四周向中心聚集的动线轨迹，而发散型动线则相反，它是由中心向四周转移的动线轨迹。视觉入口点在中心，并逐步向四周扩散的动线类型。例如下面这个暑假活动页面，就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引，这就是视觉入口点。之后视线逐步地往两侧移动，依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。而下面这个四周年的活动，最醒目的也是标题，它将观众的视线聚焦到了中心，之后逐步向四周发散。按照放射的方向，依次浏览了人物、按钮、奖励、圆球等信息。可以看到发散型动线一般运用在有较多信息元素的画面中，浏览顺序层层递进，比较适合对信息元素进行归类阅读。入口点位置发散型动线一般是由中心往四周发散，视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张 banner，作为视觉入口点的人物位于右下角，通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。4. 扇型扇型动线一般会在中心线上塑造一个视觉入口点，之后保持着至上而下、从左到右的视线轨迹，这种轨迹就好比一把扇子。例如下面这个手机端活动，我们第一眼会被可爱的小狗头部所吸引，之后视线往下，看到主标题和副标题，并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。可以看到扇型的动线轨迹保持了从上到下的结构关系，一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。5. Z 型Z 型动线是最为常见的类型，它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。例如下图的活动页面，我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题，再是副标题，最后是木牌上的信息。这构成了循环的 Z 型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。三、如何制造动线在动线的设计过程中，比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧，如何更有效的来设计动线。1. 阅读顺序第一种就是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。2. 元素指向性第二种是利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。例如下图中的 banner 就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。3. 引导线的设计第三种是引导线的设计，我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。例如下图 1 的 banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线。图 2 除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。4. 层级的设计第四种是通过层级关系的设计来构建动线，也是经常要用到的方法，构建层级关系的方式有很多，这里只做简单介绍，有机会再跟大家交流。例如下面这个活动头部，我们的阅读轨迹是从左到右的关系，先看到左边的人物然后是标题，最后是右边的人物，构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系，我们首先会注意到离我们近的物体，依据远近关系，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。 小结 综上，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会，希望对大家有帮助。本篇来源：优设网原文地址：https://www.uisdc.com/visual-line
画面 视觉 案例 hi，我是鱼先生，不止会设计的 90 后解忧大叔。设计画面平淡无味，是大多数设计师都会遇见的难点之一，那么今天跟着鱼先生一起来学习几个比较实用的版式技巧，希望可以给你带来一些提升。方法就是通过增加画面的维度，从而增加空间感，提高视觉的层次感。更多提高画面冲击力的方法：用超多案例，教你一招搞定海报设计视觉冲击力！强烈的视觉冲击力对于平面设计来说是一个很重要的品质，而关于如何加强画面的视觉冲击力，有一个方法简单又有效，即加强画面的空间感。阅读文章 > OK，开始吧！形式 01：图形类通过处理元素的前后关系，或者元素相互穿插的关系，从而增加画面的视觉层次感。特别是打破大家常有意识形态的时候，效果会更好，比如上图案例中的相框，一般来讲相片不会出现在相框外，那么作为设计师，我们刻意把相框内的人物或元素进行破局处理，这个时候就等于让画面增加了一个视觉维度，原本平淡的画面就会显得更具备层次感。我们继续看一些其他的案例视觉，加深理解：形式 02：文字类在以文字为主题的视觉画面中进行前后穿插，或借助某些元素进行前后关系的建立，让画面从一维到多维的变化，从而提高画面视觉效果。形式 03：虚实结合虚实结合就比较容易理解，利用前实后虚或前虚后实的方式，让画面产生前后延伸的空间感，就像在摄影里面的景深一样，从而刻意塑造出虚实有度的空间层次感。形式 04：制造空间利用文字的透视感，或者某些元素的透视感增加画面的空间感。比如下面前两张案例，左边绿色这张就是利用文字的透视，让整个画面的空间感立马就出来了，再看右边案例中，利用圆环元素从远至近的塑造透视关系，也起到了视觉引导的作用，同时也是他们要走向的方向，其他文字则与圆环元素进行相互结合，也增加了画面的契合度。形式 05：烘托气氛利用光束的点缀烘托，直接的作用就是聚焦主体，产生强调的作用。平面设计是在一个平面上玩出各种花样的视觉艺术，以上的方法其实都是为了让画面在一维视觉上增加维度，从而塑造更好地视觉效果。OK，理论看完了，我们在实战案例中加深理解一下。实战演练案例 01① 我们来做一张画展海报，首先我们先选择了一张图片素材，放置在画面中。② 把图片嵌入椭圆形内。③ 把所需要的文案进行排版。这个时候我们发现，当图片素材完全嵌入椭圆内的时候，整个画面视觉总感觉缺少了一点活跃的效果，发现问题，那我们继续优化。④ 我们就把人物模特的一部分进行处理，造成破局的效果。如下图画面所示：⑤ 最后我们再次放上文案，得到以下案例：这个时候我们仅仅只是调整了头巾的部分，因为头巾露出来之后，形成了圈里圈外的视觉层次感，增加了画面的活跃性。最后我们看一下对比图：案例 02我们再来实践一张画册的案例。常规情况下，设计师都会直接利用图片素材进行板块设计，如下图案例所示：猛一看好像没有什么毛病，版面简洁，但我们仔细去观察的时候，就会感觉画面规规矩矩，缺少一些设计感。没关系，跟着鱼先生继续来尝试调整，这一次我们把汽车进行抠图处理，然后左右两页的颜色进行分别填充，汽车跨越两个颜色之后，看上去就产生了跳跃的视觉性，前后和左右的维度都产生了变化，画面看起来就比原来饱满多了。做到这一步对于大多数设计师来讲已经可以结束了，但是这里呢，我们可以再深入一个层次，因为我们可以明显看出来上面的案例画面还是有些太过于空洞。这个时候我们可以把主体汽车这部分再进行优化，我们加入英文装饰，让整个画面再进行一个层次的加深。完成后如下图所示：这里如果想要继续优化细节，我们同样可以在汽车后面的文字上面下功夫，这里我利用模糊工具把文字局部进行模糊处理，形成了虚实结合的方式，让整个画面看上去更加的饱满。完成后，我们一起看下对比图：写在最后在以上的两个案例中，仅仅通过添加一个维度的技巧，就让画面的视觉完全变得不一样了，是不是既简单又实用的方式呢？设计不是一蹴而就，再小的技巧如果使用得当，都可以起到增加画面效果的作用，大家可以尝试起来了。OK，今天的文章到这里结束了，大家加油！下期见！欢迎关注作者微信公众号：「摆渡鱼生」本篇来源：优设网原文地址：https://www.uisdc.com/graphic-design-dimension
视觉 布局 权益 设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。往期案例：京东APP 9.0 是如何改版设计的？收下这份官方的完整复盘！2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。阅读文章 > 一、前期分析1. 项目背景PLUS未开通会员项目的背景有以下几个关键点：未开通会员频道"首屏"做为开卡转化的核心阵地，80%的流量集中在首屏，却没有很好的发挥首屏价值。PLUS 长期沉淀已有更多卡种，在主频道内没有呈现。未开通频道长时间未做视觉升级，因此需要进行体验设计优化，从而提升开卡效率。2. 业务诉求① 首先明确核心诉求在于提升频道首屏的开卡率② 接下来拆解诉求频道外露多卡种权益组织形式重构交互视觉体验升级优化开卡链路基于以上这几点去促使用户更快决策，助推到业务核心诉求从而提升首屏开卡率。3. 现状分析明确业务诉求后，相应对频道页面的现状进行分析，整合来看有以下 6 点。卡种选择单一且无核心价值传递会员权益形式表达不清晰，撩拨感弱权益露出无权重差异转化链路层级长联名卡视觉样式老旧且框架较高与正式开卡页面视觉风格不统一二、设计预研对自身问题有了拆解后，接下来对淘系、零售、O2O 相关竞品进行调研， 提炼竞品的一些相关优势策略点。正所谓“他山之石可以攻玉”。并且罗列归纳了竞品的几种布局方式因此，基于对自身现状的分析，和对竞品的分析，我们将本次体验设计升级的策略主要锚定在 权益表达、结算链路、结构布局、卡种展示 四个关键点。三、设计推演设计推演拆分为发散和收缩两个部分。1. 飞机稿发散发散阶段围绕 结构布局 和 卡种展示 进行发散.① 结构布局发散了 包裹式布局 和 分段式布局② 针对卡种展示，分别发散了 传统 tab 切换 和 卡片轮播 以及 卡种场景化探索。③ 由于有多种卡种，因此在卡种发散的过程中针对于 不同卡种的用户感知，也进行了相应的探索。比如 强感知 的皮肤颜色切换、卡面图形切换，次强感知 的标签样式区分。强感知 的皮肤颜色切换强感知 的卡面图形切换次强感知 的标签样式区分2. 收缩-策略推演最后的方案收缩落地，我们主要围绕前面提及的四个方向进行策略拆解，首先是权益展示。1）权益展示分为三个点：① 是进行主次权益的权重差异，助力用户决策。② 会员权益显性露出，强化关键信息，以及 sku 的轮播露出，打造强撩拨感。③ 最后组件化输出模块，后台灵活配置上传，节省开发成本。2）结算链路① 摒弃了以往全页面跳转形式，采用浮层收银台的方式，减少用户在页面间跳转带来的迷失感，从而达到简化支付路径的目的。② 其次视觉整体优化。保证视觉一致性传递。3）结构布局① 整体采用分段式布局结构、使模块更聚焦，提升首屏的秩序感② 分层展示便于开发还原。 「前期 UI 评审阶段和开发做好沟通，便于开发判断使用什么实现方式，从而做到又快又好的还原设计稿（皆大欢喜）」4）卡种展示① 多卡种滑动保证卡种外露的同时 引导用户操作。② 卡面微动效，强化 PLUS 的 品牌心智和用户感知。③ 卡面氛围，最终采用 3D 打造的效果，彰显 plus 品牌的尊贵感知，助力用户决策。并且拓充氛围坑位的运营属性，可配置氛围延展 plus 会员卡的情感化表达。④卡面上进行不同卡种 slgan 的透传，进行价值传递，进一步助力决策，比如京典卡：开通享 12 大特权，省钱又省心； 免费试用：开通享 8 大特权，免费试用 30 天；0 元开通：开通享 12 大特权，多用多省少用不亏。⑤ 联名卡整体视觉减负。四、数据验证本次首屏设计体验升级，在组内同学、产品和开发的共同的努力下，最终测试上线，通过测试版本追踪数据，我们也得到了相应正向的反馈（这里就不放数据啦）。大厂实战！京东内容助手从想法到落地的完整设计复盘本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。阅读文章 > 京东 11.11 的视觉体系是如何建立与推动的？来看完整复盘！京东每次集团大促都会有无数的问题等待我们去解决，在此给大家分享一下京东运营设计团队关于双 11 项目的复盘总结，希望共同探讨，一起学习进步视觉定位每次遇到集团大促，我们视觉团队都会倍感压力，不仅仅来自于运营团队业务要求的压力，也来自于年轻群体的购物趋势变化非常快，审美要求也越来越阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-plus-redesign
用户 视觉 玩法 本次升级主要目标是解决百度 APP-小说频道活动调性同质化，缺少创新性和品牌感的问题。往期改版：千万级产品实战！「百度小说」会员全链路设计复盘本文通过强化会员品牌、全链路精细化运营和提升会员服务的设计手段，阐释如何为用户提供更好的服务。阅读文章 > 一、项目概述运营升级主要针对运营活动，探索全新的设计语言，构建用户对小说产品的记忆点。同时收拢活动玩法，沉淀模型，提升用户产品体验和各角色协同效率。图片数据引用《2021 年度中国数字阅读报告》二、运营现状现在小说频道的现状是: 设计风格缺少文学的调性。业务策略也在慢慢调整。需求结构由多线路变成单线的内容分发。设计周期需要 5 天左右的时间，主要是在建模和渲染上。总结出三个痛点：缺少品牌调性，3d 的设计手法，时下较流行，但是同时同质化严重，缺少小说特有的设计调性；传统的运营手法需要大量的时间打磨视觉，现在大部分小说的活动没有复杂的玩法以及内容，迭代的速度也相对比较快，过于精琢的画面不适合这种实效性的运营活动，性价比低；活动路径过长的玩法体验，不适合目前业务的发展需要。三、设计目标基于痛点，围绕三个设计目标解决目前的问题，并提炼三个设计方法。四、洞察分析1. 前期工作：前期调研了行业 top 的品牌以及运营活动，梳理竞品优势:设计轻量简洁、品牌颜色、符号运用统一、产品体验更沉浸。2. 视觉洞察：从行业分析来看自身业务，打造运营体验闭环。从色彩、插画、字体等视觉元素贯穿整个运营体系。落地到活动、物料等，全链路反复强调产品感受，打造深刻记忆点。五、运营升级1. 唤新视觉印记：如何打造小说频道运营体验？我们对运营风格进行了新的尝试，定义产品核心词「书香气」「沉浸感」，诠释和传递品牌精神和视觉感受。通过色彩定义、统一插画风格的设计手法，打造放松、自然的视觉体验。2. 视觉语言推导：① 拓展运营活动配色以书香气为理念，受到中国纸质文学的启发，探索如何将“书”的质感和“看书”的沉浸用视觉语言表达出来。在定义颜色时，基于产品品牌色，尝试以中国传统颜色进行多种配色尝试，并结合小说分类内容拆解色彩体系。② 色彩拆解③ 探索新视觉风格为更加稳固品牌记忆透传，我们探索全新的插画风格。插画风格的一致性有利于建立产品调性，强化品牌形象。好的插图设计能唤起用户的共情，拉近用户关系。结合小说独特的特性“放松”“自然”的阅读感受，探索出轻量、制作成本相对低的微颗粒质感插画风格。总结出来这类风格的特征：简洁统一、有趣味性、明暗对比强烈、主题明确。再结合沉淀的颜色体系、以及书香气的设计理念，搭建一个放松、快乐、随意、自然的看书状态。有周末在家安静看书的样子、有下班后慵懒的状态，在情感上引起用户共情。风格成型④ 插画风格规则：最后总结插画风格特征，输出插画体系规范。减少协同之间的认知和学习成本，提升易用性。⑤ 运营设计案例：运营设计作为传播品牌的手段之一，一定要以产品气质来设计画面，且色彩、图形等都要精准表达内容。适当使用品牌色以及 IP 作为画面点缀，建立用户对品牌的认知。⑥ 插图案例：视觉的一致性能够帮助用户加深对产品的联想，周期性的运营活动，视觉符号，多角度触达用户，逐步完善用户心智的打造。六、玩法模型1. 需求挖掘：小说频道的用户主要集中在 22～44 岁中青年，使用产品主要用于获取内容，在浏览行为上，除了实用性，更注重内容获取方式的体验。所以在运营活动的核心除了视觉表现外，还有内容呈现的方式以及活动玩法流程的体验。2. 自身业务：频道的活动类型大体分为两类，一种是书单推荐模式，没有过多交互行为，第二种是激励型活动，可以赚书豆、书券等虚拟币为内容付费。3. 步骤方法：① 我们的设计策略是根据活动类型划分设计方法书单推荐型：页面信息轻量化，用简洁的设计语言搭建视觉容器，让用户聚焦信息，提升用户浏览体验。激励型：以减少用户行为路径、更简便获取激励为目标，找到适合小说用户的活动玩法，并沉淀模型，提升各侧协作效能。② 页面轻量化为了保持用户想看书的持续兴趣，把书单推荐类的活动页面划分为模块，视觉区、互动区、内容区。结合新的设计风格落地，背景元素的减少，图形的简化，同时不过多装饰互动区，让用户下意识产生交互行为。给用户完美的浏览体验，提升用户粘性。③ 沉淀玩法模型收拢激励型玩法活动：小说的用户来平台都是为了看书的，玩法复杂的活动，会造成用户反感，能够使用户得到及时反馈的活动是第一选择。我们调研了目前所有端上的运营活动。收拢了大转盘活动和答题活动作为频道内基础的活动模型，他有三个特点：流程少、可复用性高、用户粘性大，比较契合小说频道的用户需求。体验更优：玩法简单、行为路径更短有一些激励型活动，比如邀请好友，需要经历诱导、点击邀请、分享、端外、回流等五步，而转盘活动只需要两步就可以完成整个流程。研发也只需要开发一次基础功能，后期只靠视觉换肤就能完成迭代上线。提升效能：提升各角色协同效能之前一个项目从立项开始，整个活动周期大于 15 天，玩法模型的沉淀，我们只需要产品提需到视觉换肤两个角色的合作，就能完成日常活动的迭代。总结目前小说频道的运营升级已经取得了阶段性的成果，沉淀了运营设计资产，为产品打下了视觉基础，在一定程度上也帮助业务解决了现存的问题。当然我们的设计语言、产品体验还在不断打磨、优化，持续将产品痛点和设计目标紧密结合，助力业务发展。本篇来源：优设网原文地址：https://www.uisdc.com/baidu-novel
视觉 产品 用户 C 端的产品更加注重运营策略和展现形式，不仅要考虑视觉侧的氛围与效果，还要顾及商业运营中如何更高效的提升转化率和变现的根本策略；而 B 端产品重点在于提升用户效率的体验目标，因此 B 端产品的设计策略显得更加纯粹。本篇文章通过 B 端和 C 端产品存在交集的案例，分享其中的细节与优势。相关干货：用C端的方法，从3个方面提升B端产品的用户体验！在如今用户为王的时代，用户体验成为一种新的品牌竞争力。阅读文章 > 一、B 端和 C 端的差异化无论是在用户群体、产品定位还是使用场景等方面，B 端和 C 的产品都存在着较多的明显差异，但其实究其本质它们的设计理念是趋同的，目的都是降本增效。不过 C 端的产品更加注重运营策略、更加注重视觉展现形式，所以不仅要考虑视觉侧的氛围与效果，还要顾及商业运营的目标及策略，以及如何更高效的提升转化率和变现的根本目的。而 B 端产品逻辑较强，使用过程需清晰易懂，重点在于提升用户效率，这本身就是体验目标之一，因此 B 端产品的设计策略显得更加纯粹。可以简单理解为 C 端产品：视觉层面 效率体验；而B端产品：效率体验 视觉层面。总结来说两者之间有3点根本差异：内容的差异化、交互形式的差异化、展现形式的差异化。但有的时候 B 端和 C 端产品是存在一定交集的，比如「京象-配送时间同步互通」的整体项目过程就是在 B 端的产品中加入 C 端运营活动，以此作为案例分享，将从项目背景、视觉创意、总结与心得三个方面作为发力点来进行展开叙述。二、项目背景概述1. 背景介绍① 京象是什么京象是一款配送员配送大件快递时使用的 app，在师傅配送过程中扫描运单、联系客户、上门安装等服务。② 用户画像三方司机兼配送员师傅、不属于京东自营小哥，目前京象用户量为 20,000 人左右，随着整体产品体量增大用户量与日俱增。③ 项目背景配送员只配送无法进行安装服务，需厂家安装。整体项目可以理解为在原有“送装一体”的场景基础上，新增“配送时间同步”场景。“送装一体”指的是既配送又安装，配送时间同步的全称为“配送时间同步安装时间”。简单说就是因为根据配送不同的商品决定师傅具备不同安装能力，所以有些安装简单的可以提供安装服务，安装复杂的则无法提供安装服务。比如，配送电视的时候也可以给客户提供安装服务，但配送空调时由于没有安装资质导致无法提供安装服务，所以配送员妥投后会与厂家服务的师傅进行交接，师傅配送的时间与厂商的安装师傅的上门安装时间进行信息同步。④ 存在问题目前物流送货与安装服务两条链路信息并不互通，三方的配送员送装同步率极低，影响用户体验；送装同步率仅 3.8%，送装同日率仅 20.2%⑤ 解决方案现需共同搭建一个信息共享渠道，互通信息，提高送装同步率，提升用户体验。 因此用佣金奖励的形式激励配送员师傅按时填写时间并妥投，如果配送妥投时间和上门安装时间有效同步，则师傅会得到 10%的相应额外佣金提成。2. 核心目标整体流程物流与 3CS（3C Sevice：3C 产品服务管理）打通，对于需要做送装互通的订单在京象打标，支持配送员点击订单，跳转到京工巧匠，配送员在京工巧匠录入预计配送时间，准时妥投的订单，3CS 通过京工巧匠给配送发放佣金，共建“配送时间同步奖励活动”的整体氛围，带给用户全方位的流程与视觉体验，助力整体业务发展，促进产品商业转化。3. 落地方案在目前 B 端的京象 app 产品中增加 C 端运营活动。其中页面部分可以分为两部分：第一部分为进入首页面时，新增配送时间同步的卡片。此单类型可以引导师傅赚取佣金，其中含有首页、运营类浮窗以及 banner 资源位；第二部分为点击资源位的详情后的 H5 指引页面，目的是帮助师傅清晰易懂的了解活动的内容与细则。三、视觉创意1. 创意过程① 方案流程图分为 UI 部分和 H5 部分，通过 H5 的运营活动确定主题氛围，再反推至 UI 设计当中进行视觉的调性统一，最后输出的 UI 界面再回归于 H5 详情说明。② 关键词提取提取出三组关键词，分别为：热情、潮流、激励。热情：活动要充满热情的视觉感受，让人意识到到温暖、热闹的主题。潮流：通过繁华与多彩迸发出强大的视觉感染力。激励：佣金作为奖励机制，以此为利益点促活与转化用户。③ 情绪版分析情绪版制定风格为：三维化、拟物风和缤纷的色彩。2. 设计细节展示① H5 主 kv 细节前期先手绘出草稿，再到整体建模，通过白膜与 HDR 环境加上打光处理，最后渲染出整体效果，最终再进行相应的后期处理。② 视觉氛围细节场景输出-佣金领取：通过视角、色彩、材质、构成四个方面建立整体的视觉氛围。视角：采用 3D 广角展示运营活动主题。色彩：红、橙、金、紫。材质：基础材质为主题，加上少量金属材质提升细节质感，全局 45 度打光并统一 HDR。构成：以储蓄罐为主体，向外散发红包和金币，并加入如同时光机器一样的装饰外围，以此形成主视觉营销元素烘托氛围。③ UI 界面功能细节衍生出 UI 的界面样式，营造出交互流程和视觉的功能性模块。核心功能：引导派送员点击配送时间的填写项，并告知改活动可获取佣金的中心内容。四、总结与心得1. 个人总结本次运营页面使用 blender 建模、ps 后期来提供主 kv 的方案。由于时间的仓促，对于 H5 内容的利益点和文案细则先输出一版 demo 给到产品，最终由产品敲定文案。整体风格偏运营、营造一种参与活动赢的高额佣金的氛围。最终的交互流程和视觉界面设计也针对该项目的具体使用场景进行细分，最终输出一版均高度认可的方案。在该项目中属于 B 端产品，如果视觉不够突出会影响整体活动的点击率；如果视觉过于突出，比如如果从首页到详情的所有入口都营造的非常强烈，也会造成视觉干扰，影响其功能性的操作。所以与刚开始提到的依据 B 端与 C 端的本质化差异，在 B 端产品上加入 C 端运营活动，那么尽可能的让：效率体验视觉层面。这样才能在促活运营的同时，减轻功能操作流程上的负担，权衡当中的用户体验设计。2.个人心得好的设计不能仅凭设计师的直觉，优秀的体验要靠数据说活，所以本次修改点也好、利益点也罢，还是不断的去和产品进行沟通，上线的时候通过数据埋点和用户反馈以及后期调研来判定本次的流程和视觉样式是否合理，是否符合用户体验。最终的目的也是和大家分享项目当中的细节和亮点，希望通过不断沟通、突破自己、进步与成长。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/c-to-b
用户 视觉 的是 我们在面试过程中，总会遇到面试官主观评判我们的设计作品丑，然后我们很慌慌张张在表现层的维度去辩解，导致越讲越乱，面试结束后不断地自我否定，怀疑自己的能力，开始自我 PUA。面试官在不了解产品的背景、业务、目标、用户等各种因素的情况下，贸然给出“你的作品有点儿丑”的结论，这时不要慌张，也不要试图去跟他探讨美与丑的问题。比如去解释用的什么色彩、运用了什么手法/技法，讨论这些没有任何意义，因为面试官不是设计师，无法保证在同一个频道上做到感同身受，设计不应该以主观的美丑来作为评判设计方案好坏的唯一标准。更多面试技巧：有这3个特质的设计师，阅人无数的大厂面试官都跪求你入职！信心满满面试，结果却不尽如人意？阅读文章 > 一、透过表象看本质1. 分析美与丑的本质是什么美与丑是极具个性化的，它本质上是根据每个人的背景、所处环境、认知、喜好，审美会产生较大的差异，所以我们在设计时，重点要聚焦在具体的人身上做用户分析和洞察，做用户喜欢的“东西”。这样在得知美与丑的本质后，就不要试图从表现层去沟通，要降维打击，站在更高的视角，从用户、产品、业务甚至战略等维度去沟通。举例：目标用户分别为：40 岁、30 岁、20 岁的三类人群，且背景各不相同，所以视觉、交互都会有极大的差异化；如果 40 岁的用户，你的视觉炫酷新颖，用户反而不接受，尽管视觉很好。2. 设计只在视觉中自嗨会带来什么问题假设我们的用户是政府背景，人均 45 岁左右，产品的设计风格紧跟当下时势，视觉呈现很炫酷，表面上视觉是很不错，但真的是符合产品定位、用户认知和使用场景吗？根据用户背景和年龄段儿，我们可以判断出他们所处的环境和办事风格是严谨的，用户每天大量时间都在使用一些传统的办公软件，由此判断出用户认知是有限的，他们对于新鲜的设计风格和新颖的交互方式接受程度有限，所以上述酷炫吊炸天的方案并不适合用户；当我们把酷炫吊炸天的方案交付给客户时，很大可能会面临一次次的打回修改，而客户也提不出具体建议，只会提一些“感觉不对”“这里大点儿”“这个移到那边儿试试”这种非常抽象的词语，明明设计的很漂亮，为什么会这样呢？因为我们只是站在设计的角度去做设计，跟用户没有任何关系。最终结果导致从开发到设计整个流程反复修改，不仅身心折磨还影响整体的项目进度。所以我们认为“好”的东西，用户不一定喜欢，因为你并没有做以人为本、以用户为本的设计，只是在自己的世界里自嗨，我们并不是用户，也无法做到真正的同理心。二、拼多多、京东、淘宝举例1. 设计底层逻辑分析你觉得拼多多的设计丑吗，京东、淘宝、拼多多同为电商类的头部产品，而这三款产品的设计风格却截然不同。其中最具代表性的就是拼多多，与其它两家对比简直就是土的掉渣；如果拼多多的设计风格改为像其它两家一样，那它是否还符合产品特征和目标用户呢？显然是不符合的，拼多多面对的是下沉市场，这部分目标用户的认知和心智差异化较为明显，所以设计风格、icon 元素就很接地气，尤其营销的视觉设计更是拿捏用户心理。而京东面向的是具有消费能力的品质用户，所以整体设计方案都对相对简约、克制。2. 小结要追溯设计方案是否满足产品特征，定位是否准确、是否解决了用户诉求、视觉是否符合用户认知和心智；将所有的底层逻辑串联后，在回到表现层进行评判。通过一些举例沟通后，最后在落到我们作品的表现层，为何采用这样的方案，视觉为何这样呈现等等，这样我们的设计才是有理有据的。3. 设计来源于生活比如我们要开一家平价餐馆，明明卖实惠的大碗菜，门头却设计的富丽堂皇，起了一个高贵优雅名字；你的目标用户看到不敢进，非目标用户被门头吸引进来后，发现挂着羊头卖狗肉，走了就再也不来了，最终关门大吉。这个道理和设计显然是一样的逻辑。三、最后1. 设计不应该以主观的美丑来作为评判设计方案好坏的唯一标准设计没有绝对的美丑，只有合不合适，设计开始前应该从战略层向上一层层递进，最后将用户进行关联，找到合适的视觉和交互方案；当我们把设计底层的逻辑向面试官阐述后，最终落到视觉上，这样才会被认可和理解；以后在遇到面试官主观的评判你作品丑的时候，记得怼回去！关于用户体验五要素：如何高级且不露神色把「用户体验五要素」用到你的作品集里？AJAX 之父 Jesse James Garrett 在 2007 年出版了一本名为《用户体验要素》的书，提出了从 5 个要素自下而上的建设用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/interview-skills-3
视觉 原则 内容 B 端产品主要是 Web 端产品，空间大、操作多，内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系，从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。格式塔主要包括 7 个基本原则：用超多案例，帮你学会经典格式塔理论的7个视觉原则格式塔理论为界面设计准则提供的相关的基础理论和原理支撑，一起来了解下吧！阅读文章 > 今天我们就来总结下，格式塔原理在 B 端产品中是如何应用的？接近性原则我们先看 2 张截图，分别是不同分辨率下的界面效果。可以明显的感觉到高分辨率下，菜单列间距离较大，菜单的归属关系很清晰。而低分辨率下，菜单间的距离变小，特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则，距离近的关联亲密，距离远的就各自独立分组。当我们想要传达给用户层级关系时，就需要善于利用接近性原则。例如表格上方的功能按钮，通常我们将高频、核心操作放置在左侧，低频、辅助功能放置在右侧。通过增大元素间的距离，达到功能分区的目的。相似性原则相似性原则是通过颜色、尺寸、图形等方面的共同属性，实现信息的分组或者高可读性。例如在可视化图表中，不同范围值的指标采用不同的背景色。通过背景色的差异，将同一范围内的数据形成视觉关联，提高用户对信息的识别效率。通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页，都采用了双列设计，左侧主要以高频的业务功能信息为主，右侧是辅助运营信息。两列尺寸宽度有明显差异，用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异，并有效地突出业务信息。闭合性原则IBM、苹果的 Logo 设计，无论是“用刀砍过”，还是被“偷咬了一口”，用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。在 UI 设计中，则会通过对齐方式，形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色，内容区借助标题、卡片对齐形成视觉闭合空间，最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。另外闭合性是需要元素之间相互辅助的，单独的元素无法构建出闭合空间。以下图为例，虽然四个小的卡片做了间距分割，但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。连续性原则用户更习惯于从左到右的横扫阅读，因此连续性主要体现在横向空间中。下图中，虽然左侧的标签文字与右侧的内容信息有较为明显的间距，高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体，而是理解为两组信息。在某些场景中，如果信息平均分布，不会产生连续性的视觉感知。例如下图指标监控中，指标都是采用小卡片，间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点，没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时，需要逐个检索，花费的成本更高。简单对称原则通过上述很多图片，我们可以看出页面元素基本都是横平竖直，中规中矩的元素和分割方式。或许有些单调乏味，但是胜在简单，不会带来额外的视觉噪点。特别是 B 端产品，基本看不到异形的存在，甚至全圆角矩形都很少见到。即使有异形，也只是作为视觉表现元素存在于内容中，而不会作为空间的划分边界。主体与背景原则主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性，凸显弹窗信息。当我们需要着重表现内容时，同样适用于主体与背景原则。例如登录界面的设计，会通过差异化的背景、阴影等方式，带给用户清晰的视觉层级，适当凸显输入框的主体地位。而 B 端内容区是核心空间，基本都是采用纯白背景，与页面背景形成对比，从而占据信息的主体地位。共同命运原则共同命运原则听起来有点玄学，指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少，我没有找到合适的案例解释这个原理。在移动端产品中有些应用案例。比如 iOS 系统中，桌面布局编辑态下抖动的图标，可以与静态不可编辑的内容形成隔离效果，视觉引导性更强。同样今日头条频道编辑时，也采用了抖动效果。总结虽然 B 端产品没有 C 端色彩丰富，表现力上没那么炫酷。但是两者对信息传达的要求是一样的，要求和谐、有序、层次分明，辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。格式塔原理不仅限于视觉表现，产品经理或交互设计师在原型设计时，也要重视格式塔原理，辅助设计方案表达，提高团队间的协作效率。今天的分享就到这里了。如果有更好的案例，欢迎评论区留言分享给大家~近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/apply-gestalt-theory-to-product
标题 视觉 都是 最近给一些小伙伴看图，发现很多问题都是出在主标题上，往往我们的问题是出在不知道如何做形式，主标题不丰富，以及做出很多过时的编排等等。今天这篇文章会从如何提高标题丰富度，以及编排标题时经常犯的错误这两大方向切入，希望大家有所收获。标题作为我们文字层级里的第一层级一定要承载起足够的形式，标题要具有三种明显的特性。在常规的商业设计中标题通常是信息中空间占比最大的（或者是最显眼的），字形最复杂的以及形式最丰富的。这是因为一旦标题过于单薄，下面所有的信息都无法深化设计，强行越过标题去强化别的信息是一种喧宾夺主的行为，会大大的混乱视觉秩序。大家肯定对空间占比最大这一点是有疑问的，例如我们经常会看到下面这种设计，他的标题占比就不大而且还挺好看的是为什么呢？我们刚才说除了占比最大还可以怎么样？位置最显眼对吧，这两个条件符合其中的一个就足以在画面中简单的区分出层级，这就像是买房子一样，要么占地方大，要么占地方好。我们开始进入正题，继续来说空间占比最大的话题，这里其实就是解决的信息阅读顺序的问题。正常的信息阅读顺序应该是主标题>副标题>营销点>符号化信息=小标题>阅读性信息>隐藏性信息。那么如何区分层级？大小是最简单的方法，除了大小，找一个显眼的位置这也是非常简单的方法，我们做设计平时就是要避免给自己找麻烦，能用简单的方法解决问题一定不要去绕个弯。例如这份设计，可以看到他的标题的位置是最明显的，明度差是最大的，而且标题的信息组比任何一个信息组都要大的多，这就是区分层级非常好的一份设计。通过结构拆分图我们可以发现，虽然这几个色块大小差不多，但是其中的信息组大小都和主标题差了一个档，一定要记住我们比的是信息的大小而不是色块的大小。这个设计也是一样的道理，通过放大主标题以及颜色区分，让人一眼就看到核心信息，他这里的标题还和主体结合成了一个视觉组，让这份设计的整体性以及视觉性都要比一般的设计好上很多。直接放大或者找个好位置在大部分商业设计中都是相当好的手法，放大不是直接拉大，也是有条件的，他必须具备一定的视觉性，视觉性这个东西要么是自身就有，要么是借助外力。自身就有指的是我们的字形就相对复杂，比如我们要给下图配一个主标题的字体，通过分析我知道要用一个无衬线体，那么对比下面两个字体你会选用哪个更为合适？显然我们会选择 B 选项，因为这个字体的内部结构相对丰富，视觉效果也要比 A 选项更好。这就同样解释了为什么同样的内容，有的使用简体明显没有繁体看起来效果好，这也是因为繁体的字形结构相较于简体更加丰富，但是简体的易读程度要比繁体好上好几个档次。字体设计除了可以优化标题的视觉性以外，同时也是在一定程度让其增加了文字的结构，使其可以支撑放大使用。如果继续增加视觉性继续放大标题，那么标题就可以作为画面的主体进行设计了。就像下面这个设计一样，不仅仅针对字体的形态肌理进行了设计，同时还在主体上组合了很多图形抬高视觉性，这种丰富程度作为主体是完全没有问题的。刚才说了这么多其实也不是绝对的，设计画面的 logo 大部分时候都会比主标题还要丰富，不过 logo 的占比都比较小，复杂也不会抢掉标题的戏。所以我们在说信息复杂度的时候通常不会把 logo 计算进来。给大家贴上这个图大家就明白了，视觉性会随着进度条的提升逐渐呈现出不同的作用，具体要应用到什么程度大家就按需要选择就可以。这里所谓的视觉性和识别度都是相对而言，要根据实际设计的风格，装饰元素以及设计主体来确定我们应该复杂到什么程度。不管如何，如果作为主标题或者主标题以下的内容一定要有识别度。所谓形式最丰富，也就是主标题存在的技巧手法是最多的，最常见的几种有大小、长短、明暗的对比，承载空间的添加，立体效果，变形路径，肌理添加等。下面我会给大家分别举例说明，避免大家平时做标题不知道从何下手。这个是最常用的，但是并不 low。做好基础的层级对比是我们刻画主标题的第一步，这就像玩游戏，主标题自己视觉性不足就要找一些帮手，合并在一起成为标题组提升视觉性。下图就分别使用了大小，长短，还有一小部分粗细的对比手法。它的组合形式也是非常值得我们学习的。在看这种东西的时候一定要看它的空间形态，脑袋里建立关于形态的意识才能做到看作品就吸收。例如这个编排模式，除了放在这样还能放在哪里？显然一些中心构图的设计就很适合。那么为什么呢？就是因为他的形态和重心都压在中心的部分，对齐模式也是更加适合中心构图，平时就要多这么分析。这种就显然更适合左右构图或者是对角构图的编排了。空间承载主要指的是通过内空间的造型承载主标题，用造型的丰富外轮廓来强化标题的视觉性。针对标题内空间也主要是两种表现形态，一种是单独服务于主标题的，一种是串联标题和主体的。下图就是典型的单独服务于标题的，这种内空间的优势是形态灵活多变，可以使用具象元素，同时所受的限制也是很少的。这种就是串联使用的了，最大优点就是能让设计看起来更加统一整体，同时还可以再次强调并且整合核心视觉区。这个也可以算是串联内空间的一种，只不过主要关联形式是指向性的，可能不像第一个那么明显。我们所有平面上看起来立体的效果，都是通过模仿我们人眼常见的光影规律做出的仿三维立体，只不过区别就是精细度的问题。精细度高的一般就是要用到合成技法或者三维渲染，优势是看起来逼真，效果细腻。第二种的优势就是使用门槛较低，表现形式比较多样，可以是平面的层叠式立体，这种方法也比较简单，用 PS 在笔画中间加点阴影就可以看起来很立体。这种块面状的也是可以的，甚至都不需要分出侧面和底面的明暗。还有这种层叠的伪立体，复制然后移动改色就能完成。但是第一层一定要丰富一些，例如他这里就给第一层加了些类似高光的白色，看起来效果就很完整。类似的立体手法还有很多这里没法一一列举，所列举的是我平时比较常用的，还有我个人觉得比较好用的，平时大家多注重积累总结，慢慢都能建立自己的”常用弹药库”。变形这种形式也是技法要求里面比较低的，变形路径大部分都是跟着主体本身的路径或者主体延伸的路径来做的，关于这部分的复杂用法以后会出专门的文章。肌理的添加往往意味着主标题本身已经足够完整，这个东西是一个加强性质，而不能作为拯救性质出现。就像下图，他哪怕不加这个肌理效果也是可以的，添加上肌理只是针对文字内部细节的丰富以及调性的匹配。在运动海报中的效果就更为明显，肌理添加上去后基本就是增加了点无衬线体的内部细节，匹配一下外部风格，整体调性也就没啥了。本期我们学习了标题构成的三大重要要素，也讨论了很多标题刻画的常用手法，大家可以积极尝试。看过文章后大家应该不会再犯关于标题的基础问题了。希望大家有所收获。有任何问题都可以扫下面的二维码加我好友，和我一起讨论交流设计。如果喜欢内容，可以收藏点赞，今天的文章就先到这里，我们下期再见。这么设计标题，客户直夸专业！据统计，标题是海报中阅读率最高的文案，所以标题设计至关重要，一个优秀的标题设计不仅要清晰易读，而且需要与画面和主题的调性保持高度统一。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/main-heading
产品 代码 视觉 前言：在 2020 年，疫情最为严峻的时候，B 端这一领域得到了前所未有的关注，而那时，身为 B 端用户体验设计师的我，也曾总结过，当时 B 端设计的诸多趋势，比如：多端需求：即桌面端、平板端、移动端的设计形式设计中台：拥有更为统一的设计平台，与这两年讨论较多的设计资产相同，都是起到快速协作的作用随着 2022 年的到来，B 端行业又会迎来哪些新的机会？今天我们就从整个的 B 端入手，回顾一下 2021 年的设计形式，展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解，仅供参考，如有异议，以你为准~完整的趋势，我们会分为视觉趋势与产品趋势：视觉趋势：主要围绕设计当中的细节展开，比如图标、色彩、字体、插画等产品趋势：主要是了解不同的 B 端产品当中究竟有哪些发展形式，对于设计师又会产生何种影响？视觉趋势1. 3D 设计风格虽然 3D 化的视觉风格早已到来，但是在 B 端市场上，3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B 端视觉设计师的基本要求。而 3D 风格用在 B 端软件当中，会有两个使用场景：图标因为在 B 端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”，许多抽象词汇很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画这一条路。并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱等页面，因此 3D 图标的出现，它的应用场景也会相比之前要更加的广阔。可视化大屏大屏设计也在不断的“内卷”，因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心， 像 DataV 腾讯云图 ，大家都在朝着 3D 风格，炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求激增，而 3D 建模仿佛就是大势所趋。2. 新拟态虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟，感觉它在 B 端视觉领域（特指的是官网 ），是非常受欢迎的，因为整体的风格，与官网的设计形式趋同。同时作为 B 端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。这里安利一下腾讯云的首页官网，大家就会发现在设计风格上大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。3. 开源的设计系统在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多 B 端设计初学者，有了更加完整仔细的 B 端入门教程。比如 Arco Design 的组件用法 https://arco.design/docs/spec/link清晰的讲解了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是 B 端设计的入门学习。而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统进行对比，或许会有一番收获。产品趋势4. 超级 app这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样在 B 端行业，随着疫情的不断扩散、再加上两年时间的发展，很多 B 端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着 B 端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品，它们在整个导航内容上，已经增加到一级导航 15+ 、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的导航菜单设计方法，有机会咱们重新梳理一下导航菜单的内容，将 B 端设计指南文章进行更新。6000 字干货！B端产品的导航菜单设计5步法导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。阅读文章 > 低代码定制化低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在 20 个月内推出了 60 款应用程序，开发过程加速了两倍；在 2012 年即将推出 Model S 之际，特斯拉放弃了 SAP 的 ERP 产品（可以思考一下为什么），改用低代码开发平台 Mendix，用 25 个人四个月时间自建 ERP 系统。去年，低代码平台，也有很多新产品面世，其中就包含：因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。行业细分随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如 CRM，其实只是一个笼统的称呼，现在 CRM 市场又会分为 SCRM、运营 CRM，等诸多产品。SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。因为 B 端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。因此你会发现，虽然产品形式都会比较相同，但是 B 端市场十分广阔，大家都在去寻找自己产品的差异化。当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。5000 字干货！超全面的B端设计规范总结不知不觉已经深耕在 B 端这个领域 3 年有余，很多人接触过 B 端后会觉得乏味，因为 B 端的设计在视觉上并没有 C 端那么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。阅读文章 > 欢迎关注作者的微信公众号：CE青年交互设计本篇来源：优设网原文地址：https://www.uisdc.com/2022-b-end-design-trends
主体 视觉 手法 今天看见周练群的小伙伴想找一个关于主体刻画强化的文章，正好咱们视研设还没更新过类似内容，本文给大家简单总结几个实用的方法，让大家学了以后可以马上尝试应用在工作练习里。好了话不多说下面开始今天的正文。主体刻画是有条件的，如果你的主视觉本身视觉性就非常好那就不需要特殊的手法再去加强，也就是说我们刻画是针对视觉性/视觉层级不那么丰富的主体而使用的手法。例如下面这个摄影主体，本身的视觉性就很好，就没必要我们再去强化了，只保证它的视觉能完美呈现即可。当然这个说法并不是绝对的，而是这样可以省事，你如果非想要强化可不是不可以。1. 重复重复重复重复重复永远是最简单的方法，但是重复不代表复制，比如可以同一个主体但是不同角度的，如果我们没有建模渲染的条件，可以通过移动，旋转，形变，缩放等等手法，让人看起来的机械复制感弱一些。也可以像这样，展示局部图或者是构成图，重复大家不要理解成一个东西重复出现，而是要理解成一个东西的多种展现。2. 整合统一这个图我们之前分析过，他的主体是点状的，所以特别需要一个色块去给他们链接成一个完整的主体，否则画面没有视觉落点，这是强化点状主体视觉性的一个手法。3. 实物结合手绘实物图结合手绘的手法几乎是一个百搭的手法，通过想象对主体进行二次改造，赋予其与原来完全不同的项目调性，同时还能让主体更加丰富有趣。4. 标题前后叠压非常简单好用常用的一个手法，可以有效的拉开空间感，但是要注意叠压的时候不要影响需要识别的信息，同时可以再适当的时候进行前后的穿插。当然这种小面积的叠压也可以，我个人挺喜欢这个设计的比较精致。这种手法我很推荐，把标题做成一个标题组然后不需要他识别就把它视为一个图形使用。5. 色块强调这种主体后面加个色块的形式更常见也更简单，效果却出奇的好，可以有效起到强调聚焦作用。6. 小破图这个需要判断照片允不允许做，可以让主体的局部伸出图片框，内外建立链接的同时还能让主体看起来更有层次感。7. 创建特征色在主体上的某一部分添加一个特征色，最好是有色和无色的对比像下图一样，然后在标题处也同样添加，这样能建立起他们之间的联系同时还能强化主体的视觉性。8. 路径强化利用主体本身或者靠近主体的留白空间又或者是项目需求进行元素放置，从而达到强化主体轮廓，聚焦主体形态融合等作用。9. 局部遮挡局部遮挡可以有效制造神秘感，同时增加阅读成本让人可以画更多的时间在观看上。这意味着不适合短平快的传播信息，一般用在展厅里或者艺术类比较多。10. 描边与装饰对主体进行描边或者相关的装饰添加可以有效增加主体的视觉层级，这个装饰添加是比较考验设计师的，一定要做到元素应用精准，形态上不干扰主视觉，造型上不干扰调性。今天讲到的主体强化思路仅仅只是一部分后续我也会持续更新更多的相关内容。我一直相信审美的提升靠的不是某个培训班或者什么小技巧，而是每天每时的长期积累，恭喜今天的你又进步了一些~有任何问题都可以扫下面的二维码加我好友，和我一起讨论交流设计。用4个平面小技巧，瞬间让视觉主体更突出！在日常的设计工作中，我们经常会碰到：「因为作品中视觉元素过多，导致整体视觉主体不够突显，使得画面杂乱、缺少主次关系、甚至有些轻浮」。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/10-subject-characterization-technique
图标 风格 视觉 前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别，例如金刚区、分类、标签栏、服务工具等。用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。本期大纲图标的定义常见的图标风格性格与气质设计规范与流程常见问题及注意事项图标资源总结图标的定义1. 什么是图标？图标是一种具有高度概括性的图形化标识，在界面中与文案相互支撑、搭配使用，隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。从概念上来讲，图标可分为广义、狭义两种，广义指的是现实世界中的图形符号、且有明确指向的含义，而狭义的图标指的设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad…等。在 UI 设计中主要具是针对狭义的概念。图标设计是一门学问，在我们的认知中，通常将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。想要将图标设计的更加出色，则需要频繁练习、不断试错、持续探究并尝试新的风格，所以很值得我们花费大量的时间去钻研练习。2. 图标的基本特征一个界面是由文字、图标、几何图形、图片（音频、视频）组成，从 UI 设计师的角度，相对来说，其他三种元素大多运用到的是排版技巧，而图标则是需要绘制、创作的元素，在没有图标的情况下，纯文字也可以代替，可为什么贵还要费力费时的设计图标呢？原因主要有两点：首先，图标作为一种图形符号的存在，跟文字的复杂程度相比，在识别效率上有着先天的优势，因文字需根据语种、长短的不同，所占用的界面空间资源就不同，在文字较多的情况下，大大减低了用户浏览速度及信息传达的效率，固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高，且让界面更加简洁，所以我们常见的图文结合界面，绝大多数都是图标在上、文字在下，或者图标在左、文字在右，这些设计足以说明图标视觉传达的优先级高于文字。其次，不同风格、样式的图标能让界面看起来更美观，提高用户的视觉舒适度。设想一下，如果界面没有任何图标的点缀，即便用户也能使用，但看多来多少都有些枯燥无味，全部用文字来理解内容还容易引起视觉疲劳。常见的图标风格1. 扁平风格扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义，并通过不同的色彩体现出不同的视觉效果，最常见配色有以下几种：单色：简洁、清晰视觉效果，常见于基础功能图标。例如：B端功能入口，移动端个人中心、二/三级页面的工具栏等，也有很多app的金刚区利用底色块衬托反白的图标。双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。渐变：渐变色的图标显得较年轻化，可以是单元素的渐变或多元素的渐变组合，能映射出一种活泼、热烈的氛围。例如：视频、直播等娱乐类型的APP，或车载UI等。不透明度：调整图标中某个元素的不透明度，可在不变换色系的情况下丰富配色细节，还能与底色融合的更加细腻，解决多色渐变视觉跳跃的问题。另外，在 UI 界面中，扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。线性线性图标主要是通过线条描边勾勒出来的图形，在界面中的尺寸普遍偏小，其线条不能过于复杂，否则将会影响辨识度，看似不多的简单线条搭配不同的色彩，则有很大的调整空间。面性面性图标主要通过剪影的形式来制作抽象的形体，相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感，以达到多种视觉表现的效果。线面结合线面结合的图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。2. 拟物化风格拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果，非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感，能让用户快速领会图标所传达出的意图及气质。因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼，在页面中频繁出现会成为干扰其他信息的存在，游戏类应用中使用的非常普遍（不过多赘述）。在其他类型的应用中，大部分出现在营销类型的界面，例如专题页、成就榜、会员中心等。3. 轻质感风格跟拟物化图标相比，轻质感就不会有太多复杂的元素，主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感，整体风格偏年轻化，给人轻盈、简洁及精致的感觉。在设计过程中，请使用干净且和谐的配色，主要使用在界面较大区域的位置。4. 磨砂玻璃风格不仅仅是页面背景有毛玻璃风格，图标的毛玻璃风格也很出彩，主要通过背景模糊、叠加、剪切图层来实现（网上很多教程）。轻量渐变搭配毛玻璃的朦胧感，可以体现出图标的质感与神秘感。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 除上述这几种风格的图标之外，还有例如 2.5D、3D、像素风、新拟态…等，但在 UI 设计中并不常用，就不一一举例说明了。性格与气质1. 性格走向（描边/拐角）力量型：粗线条、直角拐点，给人一种力量、狂野的感觉，常用于体育、健身、机械类型的产品；可爱型：粗线条、圆角设计，看起来活泼可爱，给人舒适、饱满的感觉，在儿童、教育类产品中很常见；严谨型：细线条、直角拐点，看起来工整、严谨，中规中矩，适合政府、法律类型的产品；精致型：细线条、圆润的拐角，柔和、干净、纤细且精致的感觉，很适合极简风格的设计，在艺术、金融、珠宝等奢华类产品中比较常见。2. 动态效果如果想要突出金刚区、工具列表中的某个功能入口，将图标设计成动态效果，既能保持整体图标风格的统一、又能单独突出功能的重要性，起到强调的作用，用来吸引用户的注意力，引导用户操作，提升其点击率。切记动效图标不能过多，当什么都突出了等于什么都没有突出。其次，在年轻化、娱乐类型的产品 Tab 栏中的图标切换时，加入动态效果，可起到画龙点睛的作用，还能通过动效表达出不同的情绪，降低切换时的枯燥感，好的 Tab 动效能传达出整个产品的气质。超全面！大厂都在用的 Tab Bar 图标动效设计类型总结Tab bar 作为整个 APP 的第一触点，给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。阅读文章 > 最后，如果有类似运营或短期内的活动，需要吸引用户注意但又不适合固定在界面中的某个位置，这时可以设计一个动态图标悬浮在设备某个位置（注意用户体验及交互原则），既不过多的占用页面资源，还能同时显示在多个界面，一举多得。动效图标：@墨染 ART 授权设计规范与流程遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。1. 网格尺寸比例为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有 16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。一个图标系统包括网格尺寸和图标元素两部分，设定好网格尺寸后，就需要用 keyline 来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸，而是根据不同的形状占比受制于图标 keyline，最终形成统一的视觉大小。从上图中可以看出，相同尺寸的图标在真实的视觉中相差很大，这就好比一个 100 像素的圆形、跟 100 像素的方形相比，站在逻辑角度，大小是相同的，但在视觉上，一定是方形显得更大。所以我们常说的图标大小相同，并非真实尺寸，而是视觉感受。2. 图标 keyline为保持图标视觉上的一致性和平衡感，需要先绘制 keyline 用来指导、规范图标设计。keyline 由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成，网格的大小需保持 4 的倍数，便于不同尺寸的图标都能适配，可使用 24*24px 的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如 48*48px、72*72px……下图是以 24px 尺寸的网格参考基准示例（出血为 2px）：3. 确定图标风格根据产品属性及目标用户并结合应用场景，找到最符合自身产品性格、气质的图标设计风格，例如健身应用属力量、粗犷类型，圆角、曲线适合女性产品等，在前面的「性格与气质」中有举例说明。4. 图标绘制经过图标风格的确定，图标细节便是接下来绘制过程的核心部分，对线性图标来说，注重的是线条的粗心，而面性图标则注重各小图形之间的距离，所以在绘制时，需要保持线条、间距的统一，方便后期的图标更新迭代。线性描边粗细我们以 iOS@2x 为基准（避免@1x 的 3px 描边变成 1.5px，小数点），可适配最 2px、3px、4px 最常用的描边粗细，4px 视觉较重，用于优先级较高区域的功能性图标，2px 看起来会显得更加精致，在设计中，还需根据产品的行业属性及调性来确定描边的粗细，并统一起来。面性正负形间距面性图标需要确保每个单独的形状之间有足够的间距，以 24px 大小的形状为例，其间距不能小于 1px，以此类推，虽然未规定上限，但间距也不宜太大，否则无法相互组合关联，以实际视觉的舒适度为准。5. 创意提取根据行业类型及风格进行创意设计，如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等，为图标塑造灵魂或传递更多信息而进行的二次创作。如何强化图标设计的品牌基因？我总结了12个方法！随着互联网产品的不断发展，产品设计越来越成熟多样，而同质化的设计也变得越来越严重。阅读文章 > 常见问题及注意事项1. 识别性图标存在的意义，主要是为了快速传递信息，不能让其成了无用的装饰品。随着互联网的普及、时间的积累，人们对一些线上图标信息的隐喻已根深蒂固，早就形成了惯性思维，所以我们设计的图标必须要符合用户的认知，能让用户快速理解，即便出现个别特殊情况，也要用文字清楚的标注说明，否则一旦让用户产生疑惑，图标就起了负面作用，在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期，减少学习成本，提升使用效率。2. 简洁美观图标是将现实世界中的事件/事务用抽象的图形表现出来，如果过于追求完美而设计的太复杂，还不如直接上图片来的快，所以不能过于展现真实物品的细节，最终设计出正确而不失真的图标尤为重要，这样既能用于传递信息，又便于用户快速且清晰感知。3. 视觉对齐为确保视觉平衡，异形元素在使用系统自动对齐后，会有一定的偏差，需手动微调进行视觉对齐。为什么你的图标看着不舒服？如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。阅读文章 > 4. 保持一致针对大型项目，要想整个家族的图标更加和谐，保持相同的样式及设计原则着实不易，尤其是在多人完成设计的情况下，事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量，例如描边粗细、填充模式、繁简程度等属性，需要做的就是控制好这些关键因素，让整体看起来视觉重量相同且能相互关联组合到一起，保持所有图标的一致性。5. 最小间隙单个图标的各元素之间要有呼吸感，需要适当的留白，如果描边过大，整个条看起来感觉像糊成一团或臃肿不堪，如果存在类似问题，可通过减小描边值或降低图标的复杂程度来解决。6. 使用 2 的倍数以偶数为单位的设计便于数据的计算（2 的倍数），例如正负形间距、描边值等，在 iOS@2x 设计下，@1x 也不会出现小数点。在移动端设计中，最小的图标为 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的数值，因此，可灵活的等比缩放。7. 延展性即便做好了前面的一切，图标设计工作也并未完成，需要做的是持续测试图标的可用性，做好后续的完善与优化，没有最好、只有更好，以确保上线后的效果和后续的迭代。图标资源库阿里巴巴矢量图标库： https://www.iconfont.cn/ ，90%以上常见的矢量图标下载；飞书官方图标库： https://iconpark.oceanengine.com/official ，海量资源可在线修改，调整描边、填充、单/双/多色、端点后下载 SVG 格式图标。虽然上述图标资源基本能满足我们的日常设计所需，但仅仅只能是作为参考而已，一味的图方便、投机取巧只会毁了自己的动手、创新能力。结语图标设计是一个非常庞大的版块，且有很多个分支，例如：金刚区、标签栏、应用图标…等，每个分支都有自己的一套设计法则，我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓，但可以在不断沉淀、相互探讨、持续的学习中一起进步。下篇「图片」文章再见。欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/basic-guide-to-icon-design
在路上
飞翔的企鹅
表哥
张大湿
落霞与孤鹜
