服务器 程序 数据 有了解和学习 B 端的同学必然都听说过 SAAS 这个词，这在 B 端行业是个非常重要的产品形式和分支。虽然它重要，但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问，Saas 应该怎么设计？适用哪些设计风格？……所以我从最底层的技术层面，来解析 Sass 到底是什么，在未来你再也不用担心对这个词汇一知半解，无法正常参与业务讨论了。讲解什么是 Saas，或者刚刚图例出现的 Paas、laas 是什么，首先要认识一个问题，一个需要联网的软件，是如何落地的，需要哪些前提条件。通常，我们可以把一个普通的联网产品要正式上线并使用，需要满足 9 个层级的条件，我们简称 “9 层塔”，分别是：下面，我们根据每个大层级来解释一下，它们分别都是什么。1. 基础设施层基础设施层是一切网络服务的根基，由现实世界的硬件组成，是所有技术、代码、数据的运行基础。层 1：网络（Networking）即基础的互联网电信宽带服务，通过电信运营商在各地搭建联网用的设备，并使用线缆相互连接，满足数据的物理传输可能。比如你想要在家上网冲浪（非移动上网），最基础的条件是就是购买和开通宽带服务，通过接入光纤的形式，实现从家中连接到互联网世界的可能。层 2：服务器（Serves）服务器，本质上也是一台电脑。有了联网的条件，我们就要把网络接入到这台 “电脑” 上，让它来完成各种数据的处理和存储。但不管它能做什么，要做什么，首先你得先有这台设备，不然后续的工作都无从谈起，所以服务器指的就是用来完成后续工作的电脑设备。层 3：存储（Storage）存储就是硬盘，你想要运行的任何程序、代码，还是想要收集的数据，都需要容纳的地方，那就是硬盘空间。存储就是关联到服务器的硬盘，是数据存储的物理环境。之所以硬盘被独立出出来，而没有把 CPU 内存这些拿出来，是因为数据的存储和安全（物理上）是网络服务的重中之重。CPU、内存、电源坏了，替换就可以，硬盘损坏导致数据的丢失是无论如何不可能接受的。所以，工程师们开发了非常多特殊的技术来保障存储的稳定和安全。2. 技术应用层技术应用层，就是具备了网络、服务器、硬盘以后，让这些基础设施充分发挥作用和能效的相关技术。层 4：虚拟化（Virtualization）虚拟化是个比较抽象的概念，它是一种资源利用的技术，让服务器最大化的利用和分配自己的资源。比如一台服务器，有 8 核心、8G 内存、8G 存储，如果卖个一个客户运行一个程序，那么很可能这个这个程序日常只使用一个核心的算力，1GB 内存，1G 不到的存储，剩下的算力资源不就浪费了嘛？于是，虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序，并根据它们各自使用的消耗灵活分配 CPU 和内存资源。所以，今天如果你想要搭建一个网站，云服务商出售的 “虚拟主机”，就是在实体服务器主机上切割出来的一部分。这样客户省钱了，商家利润率也更高了！层 5：操作系统（OS）每台电脑都有自己的操作系统，我们熟知的 Windows、Mac OS 等等。如果硬件没有搭载操作系统，那它们就只是一堆工艺精密的废铁。对于服务器来说也是，任何服务器想要正常运行，都必须搭载相关的服务器操作系统，有了基本的系统，我们才能创建程序，让服务器去运行我们想要的功能。前面提到的虚拟机，就允许同一台服务器通过虚拟技术运行多个系统。层 6：中间件中间件也是个比较复杂的技术概念，它是个独立系统软件服务程序，是软件的直接面向对象（而不是服务器），是一种支撑软件。举个不太严谨的例子，我们常规的逻辑是一个程序对应一台服务器（或虚拟机），但真实情况往往是一个程序会关联好几个服务器和不同的系统，来完成不同的网络服务。正常情况下，你需要对每个服务器和系统进行适配。而中间件的作用就是帮助你省掉这个麻烦的步骤，让你只需要对接唯一的翻译和话事人，他会帮你向不同的任务对象传达你的要求。层 7：程序环境（Runtime）程序环境，就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言，都需要安装一个对应的运行环境。许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面，那就证明这个游戏中运用到了 Java 的代码，如果你没有 Java 的运行环境，那么它们就无法生效。3. 产品表现层层 8：应用（Application）在这个系统下，应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序，不管是后端程序还是前端程序。它们需要使用某些特定的程序语言来编写，并运行在上面所说的对应环境中。我们所说的后端开发，通常就是开发服务器所运行的程序的程序员。层 9：数据（Data）这个词放在这里可能有比较大的歧义，数据实际上就是使用这个程序所产生出来的数据，而不是单指数据库（数据库也是环境的一部分）。比如你打开一个网站注册了账号，上传了头像，那么这些信息就是使用程序所额外产生的数据，它是项目正常运作的必然产品。4. SaaS 到底是什么理解上面的 9 个层级的内容是什么，我们就可以看下面这张图表了。SaaS 全程 Software-as-a-Service，翻译叫 “软件即服务”，讲人话就是 “卖联网软件” 的。前面提的 9 个层级，除了最后一层数据是我们普通人可以负责的，其它每个层级都需要对应的开发和工程师来负责对吧，那么我们普通人还是企业就不能使用网络软件服务了嘛？这肯定是不符合事物发展规律的。SaaS 的存在，就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意，直接让你在浏览器或本地客户端上直接使用这款联网软件，并创建对应的数据信息。换句话讲，只要这个软件是联网的，且软件本身的功能就是服务的核心（划重点：社区电商类软件的服务显然不是软件功能本身），它就是 SaaS。SaaS 既可以免费，也可以是通过批量出售软件功能的使用权来赚取收益。免费情景：微软：如果你使用了基于 Web 的电子邮件服务（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已经使用一种形式的 SaaS。https://azure.microsoft.com/zh-cn/overview/what-is-saas/付费情景：在 B 端的语境下，SaaS 通常就是指制作一个面向商业用户的联网软件，然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……所以明白了嘛，SaaS 只是一个商业形式或技术形式的统称，它根本没有具体的设计规范或者学习方法，完全根据业务的实际需求和场景决定。最后，再问你们一个问题，你们现在负责的项目是 SaaS 嘛？结尾这一篇我们完成对 SaaS 的基本介绍，下一篇，我会在这基础进一步展开，讲解 PaaS、laaS 和云服务的相关概念。希望大家不要再在这种基础概念中犯迷糊了……我们下篇再贱～万字干货！写给设计新人的B端产品入门指南本文受有赞设计师@美芳的指导，约12941字。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/saas
系列 课程 角色 前段时间冰墩墩的爆火，让本就火热的潮玩手办市场，再次成为瞩目焦点。前两年天猫的《95 后玩家剁手力榜单》也显示，潮玩手办的烧钱指数位列第一，增幅巨大：与此同时，盲盒公司泡泡玛特的估值也突破千亿，优衣库和 KAWS 的联名 T 恤被抢购一空，衣服炒出天价，各类 IP 联名款产品也如雨后春笋般喷涌而出。当潮玩和品牌 IP 化正在国内疯狂扩张的同时，海外的 NFT 市场则远远走在国内数字藏品市场前头，已经进入到白刃见红的阶段了。顶级 2D 动漫风 NFT Azuki 的素质是肉眼可见的高：大量顶级的 3D 和视觉设计师都加入这场面向未来的狂欢，比如超火的 NFT CloneX 如今已被耐克收购：曾遭遇过口碑危机的 Mekaverse 最近还为持有者投喂了新系列 Mekabots：而这个系列背后则是在设计师则是 Dribbble 大神 Mattey：它们的成功正引领着国内的数字藏品和品牌 IP 的走向。发现没有？无论是潮玩、品牌 IP 化还是 NFT，这股掘金热的背后，都有 IP 设计的身影。如果你有留意，就会发现这两年，越来越多的企业都开始注重 IP 打造了。阿里动物园、冬奥会冰墩墩，大家都意识到，一个可爱的 IP 形象是出圈利器，比起广告投放效果好太多了，而且 IP 形象的吸金能力更让很多人跃跃欲试，无论是手办还是 NFT 都是当下的大热领域。掌握 IP 形象设计的设计师，变现机会太多了，可以接私单，为企业单独定制形象，也可以创造独立 IP，再授权给手办公司，实现躺赚的小目标。亦或是转让整个 IP 版权，赚一笔大的。对设计师而言，这是一个绝佳的变现机会海外 Instagram 即将接入 NFT 市场，腾讯阿里的数字藏品也在积极推进，你真的不打算在接下来的狂欢中分一杯羹吗？在这个楼下便利店都有 IP 形象的时代，咱们有必要开始学习 3D 角色和 IP 设计了！课程原价 599 元，新课直减100元！特惠价 499 元，之后立刻恢复原价移动端微信扫码报名，网页端右戳报名 注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放张小哈老师的全新系列课程！上过咱们 3D & 轻拟物设计的同学，对于张小哈老师的设计功底应该非常了解她的功底！无论是 2D 角色的刻画还是 3D 角色设计都相当成熟，比如著名的 Living in Space 系列就有着 2D 和 3D 两个版本：2D 版风格复古可爱，3D 版光影细腻角色俏皮！从单独的 IP 到场景化的构建都相当成熟。更不用说她对于系列化设计的深入理解，所有的这一切都确保了这套 3D 角色设计 IP 实战训练营从知识体系到经验传授都相当成熟。这次，小哈老师携带着全新的 「兔莉莉」系列和「汉堡猫」两个新系列，精心打磨了这套全新的 3D 角色设计 IP 实战训练营！课程原价 599 元，新课直减100元！特惠价 499 元，之后立刻恢复原价移动端微信扫码报名，网页端右戳报名 注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放为 IP 角色设计量身打造的系统课程这次张小哈老师的课程将会从基础的 2D 角色的基础规划、设计入手，教你正确地做好前期准备工作，随后深入到 3D 的角色建模：并教你如何进行角色的拓展和丰富化：课程用来演示的汉堡猫系列则会带你走得更加深入，不仅涵盖了统一世界观下多角色的构建：而且还包含了实用性极强的场景和表情包设计：这次为期一个月的课程，在软件层面上将会涉及到 PS、C4D 和 Zbrush，课程内容也会循序渐进：需要强调的是，这次课程的价值不仅仅包含直播内容，还会免费赠送价值 200 元的 25 节 C4D 基础课和一整套 Zbrush 录播课。下面是小哈老师的系列作品兔莉莉系列：汉堡猫系列：Living in Space 系列：I love it when you 系列：未来之家 系列：那么……你还在犹豫什么？课程原价 599 元，新课直减100元！特惠价 499 元，之后立刻恢复原价移动端微信扫码报名，网页端右戳报名 注：报名后请添加客服微信进课程群；错过直播课也别担心，直播录屏永久可回放本篇来源：优设网原文地址：https://www.uisdc.com/ip-design-course
业务 阶段 需求 “一入 B 端深似海”…就这一句来开始话题吧，希望跟大家分享一篇小心得：「在 B 端产品设计中踩过的坑+趟过的泪之如何快速融入业务」，希望对想要往 B 端发展的同学有所帮助，毕竟你越了解业务，业务越需要你。阶段一：把握好入职前期的业务熟悉阶段（大概 2 周时间）刚入职的前 1-2 周，是很好的业务熟悉阶段，在这个阶段不会有迭代项目的设计压力，也不会有产品/开发/测试同学来沟通 UI 问题…但我狠狠的错过了这个好时机，所以挥泪总结如下：1. 一定要拥有一个最全的测试账号（测试环境+线上环境）B 端产品用户往往是兼具多种身份角色的，「员工 A」、「管理员 A」、「管理员 B」、「管理员 C」等等身份，这些身份权限既可能交差，也可能毫不触及。所以拥有一个兼顾所有功能模块的测试账号，是了解业务的第一步。2. 带着角色身份，有目的性地操作前期在使用系统的时候，千万别站在一个旁观者的角度，去审视这款产品。既没有把自己当做「员工」去体验整个实施过程，也没有作为「管理员」去创建管理项目，在业务前期迭代设计中只起到了美化原型图的作用。当然这种「没目的性的操作」还会带来另一个非常不好的点就是：对功能的记忆点很模糊，一顿猛操作后自我感觉良好，认为已经搞懂了业务逻辑…却没有去思考为什么当时要这样设计（是只为了满足业务的被动需求还是设计方案的局限，又或是基础技术方案的限制，站在不同的角色场景中，体验是否顺畅合理，是否还有其他更优化的设计方案）。这些「思考点」其实都可以简单的记录下来，到项目迭代中有涉及到这些点的时候，可以再去深挖。阶段二：拿到产品需求后的准备工作（立项-概设阶段）这个阶段需要输出设计方案的思考点，立足用户场景，满足业务需求，与产品经理密切沟通需求与设计方案。1. 本次迭代涉及到了哪些模块，是否在前期都有线上的实操体验？如果前期没有操作体验过，那咱就在了解「需求」想要解决的用户场景后，带入角色的去体验模块。2. 是全新功能设计还是既有优化？这可以初步的判断一下时间排期，设计的优先顺序，是否需要用到「体验画布」去拟定方案，是否需要参考「竞品分析」等各种辅助设计工具（这些都是需要花时间的，紧张的迭代周期不可能满足所有需求都应用到这些）3. 沟通（产品经理、测试、其他业务线的设计同学）在需求分析阶段最需要紧密联系的人就是产品经理，了解他们在业务设计阶段的方案，去参考其他竞品是否有利于我们的产品设计。但产品经理站的角度往往仅是满足被动的业务需求（功能层面上）。在满足功能的同时是否有更好更顺畅的体验设计（体验角色是偏「学员」身份多一些，还是满足「管理员」身份多一些），这是我们需要跟产品经理沟通–梳理–拟定方案的。充分「利用」好测试同学，因为他们其实才是最了解功能模块的人，每天不计其数的操作，让他们甚至比产品经理更加熟悉模块。产品需求是否设计合理，测试其实更有主动权。如果你所在的公司拥有多业务线，其实在一些共性的功能模块上，还可以多多与其他业务线的设计同学们联系，视觉+交互上是可以借鉴，既能满足公司品牌调性一致，也能多一项设计参考，共同进步嘛…4. 形成自己的需求清单我之前用的方法是直接把产品的需求文档打印出来，在上面做笔记，但后来发现这种方式不仅费纸，效率也不高。现在直接在 sketch 文档里专门建立一页，把「业务背景」、「目标」、「产品解决方案」、「设计方案思路」「…」都罗列出来，随时都可以跟踪记录下每一次讨论的结果。在后续的画图中，是否画着画着就偏离了「目标」，也可以随时检查。阶段三：设计实施阶段（不要局限于同类竞品设计参考）阶段四：走查阶段你是不是也会遇到视觉走查不完整的情况，有些模块细节点会被遗漏。因为走查阶段是在开发功能都提测以后，但最充裕的时间可能都没有 2 周（中途还有开发调整修改的时间、有些功能点还需要反复去看）所以时间很紧。如何才能保障至少走查两轮呢。之前一直都是在现有的测试项目上根据迭代的功能测试，走查的界面特别零散，很容易遗漏。但如果一开始我们就创建了「专属账号」，在熟悉整个流程的情况下，对新迭代的需求进行复核，操作就会是连贯的，步骤是紧密的，就会把很多细碎的点串联起来了。写在最后希望大家别只顾着卷，被工作节奏打乱了自己的脚步…文章写得有点幼稚，但希望能对小白菜们带来些帮助启发，大家一起进步。学会「交互设计五要素」，帮你更快Get到设计关键点！B端浪潮下设计师的「尴尬」供应链资源整合是企业发展态势。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-business
字体 打字机 油墨 大家好我是和你们聊设计的花生~之前给大家推荐了 10 款纤细优雅的英文手写字体，这种字体可以作为在海报设计中作装饰元素，起到平衡版式、丰富画面层次和烘托氛围的作用。海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 今天为大家带来另一种类型的 5 款高质量免费可商用的英文字体——打字机字体（Typewriter Font）。 这种字体具有油墨打印的粗糙质感，适合复古和文艺质朴的主题。打字机字体（Typewriter Font）打字机字体（Typewriter Font）源于 19 世纪，那个年代打字机正流行。相对人手书写誊抄，机械打字机极大地提高了文字输出效率，且机械打印出来的文字比手写更加工整正式，因此被广泛运用，二者也成为了那个时代的标志物。虽然打字机已经在 2012 年正式退出了历史舞台，但通过其打印出来的各种字体却被保留了下来并流传至今。很多设计师都选择将自己喜欢的打字机字体扫描出来，修补设计一番后做成一套字体，这样的字体很好的保留了油墨打印带有的粗糙质感，成为一种特有的风格。打字机及其打印出的字体打字机字体（Typewriter Font）虽然是工业产品的衍生物，但是油墨打印产生的粗糙线条、墨迹扩散晕染、油墨部分缺失的质感却赋予了这种字体深厚的复古气质，给人文艺清雅的感觉，比很多现代字体更具有亲和力。现如今，打字机字体在产品包装、书籍装帧、名片菜单、网站设计等领域都有广泛运用。5 款免费可商用的打字机字体Fzm-Old Typewriter一位国外的设计师偶然发现的一封旧信件，并且非常喜欢上面的字体，于是就将其扫描出来进行了修补设计，形成了一套字体。那位设计师是 Fuzzimo，字体名叫 Fzm-Old Typewriter。这款没有明显的油墨扩散，笔画斑驳磨损感较明显，字体非常干净有秩序，很适合文艺清新的主题。X TypewriterX Typewriter 是全大写的等宽字体，给人的感觉更加正式规整。有 regular 和 bold 两种字型。Radio NewsmanRadio Newsman 是一款非常纯正的打印机字体，具有明显的油墨扩散效果，所以不太适合小字号长文本排版，更适合大字号展示。My Underwood Font这套字体是设计师根据自己的 Underwood 便携式打字机的字体设计的。笔画连接处的油墨晕染比较明显，但整体的效果还是非常不错，非常自然。Special EliteSpecial Elite 模仿的是 Smith Corona Special Elite Type No NR6 和 Remington Noiseless 打字机型号。Special Elite 字体的墨迹扩散效果比较轻微，笔画清晰规整，可读性极佳，适合长文本排版。以上就是今天为大家推荐的 5 款带有复古气息的打字机字体，字体安装包见文章开头和文末的下载链接。如果你需要其他风格的字体，也可以在评论区提出，说不定下一期就会分享相关的资源。评论还有机会获得主编送出的书籍，赶快试试吧~ 文件名 如何下载使用 文件大小 提取码 下载来源 5款复古打印机字体安装包406 KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-typewriter-font
文案 产品 用户 一、被忽视的 UX 文案在很多体验设计师的认知中，产品界面上的文案是设计中最细枝末节的事，往往会被忽视。大部分时候，能让用户理解的文案就是合格的。而什么是好的文案，没有一致的评价标准，在复杂的业务场景中也很难做出判断。文案看似小到微不足道，但在某些设计领域却完全不是这样。比如在品牌设计中，好的文案可谓“一字千金”，为企业带来了不可估量的商业价值：比如说耐克的「JUST DO IT」和 苹果的「Think Different」，向消费者传达了品牌的独特价值。这些文案与品牌 Logo 一样，是极具识别性的品牌资产。作为品牌的识别物，它的价值是长效的。从消费者接触文案到产生购买行为，中间的过程可以很长，文案在长时间不断的曝光中巩固了大众对它的认知，最终促成购买行为。因此，品牌文案要有较强的记忆点和传播力。产品界面上的文案（UX 文案）与营销场景的文案很不一样，它带有很强的短期功能性，目的是帮助用户或产品后的企业达成短期目标，每段文案起作用的时间短则几秒，长不过几分钟。例如这个确认对话框，用户做出判断只需要几秒钟，之后它就消失了，可能很久都不再出现，几乎不会给用户留下印象。正是因为这种特性，UX 文案不像营销型文案一样受到关注。在一个产品中，可能只有像活动页标题、主要行动点这样与流量和转化直接相关的文案被仔细打磨过。剩下那些具备短期功能性的 UX 文案，成为体验中被忽视的小小一环。二、用户与产品间的对话UX 文案本身不重要吗？这样想很容易踏入误区，也无法解释近些年来 “UX Writer” 岗位的出现（除微软、谷歌等国外巨头外，最近国内也出现了这个岗位）。在产品使用过程中，UX 文案的效用并不亚于交互逻辑、视觉表现等要素。那些 “合格的” UX 文案的确不会给用户留下印象，但不合格的文案却会以一己之力摧毁整个体验。想象一下，在工作场景下，当用户因为误解一段文案而执行了不可挽回的操作，文案撰写者显然要为此承担责任。体验设计师是用户界面的把关者，负责合理传递和接收交互过程中的信息，而文案则是信息中最直接的一种。理解 UX 文案、写出“好的”而不仅限于 “合格的” 文案，是 UX 设计师需要掌握的能力。但是设计师如何界定什么是好的文案呢？许多成熟设计体系中都对它做了一些定义，比如统一的格式、合理的语法、一致的用词等。这些定义最终具象为一条条规范，在应用时成为判断正确与否的标尺。而这些规范有一个源头，即人物性格与语气 （Voice and Tone)。理解这个概念需从 UX 文案的本质说起。UX 文案本质上是发生在用户和产品之间的对话。在人类信息传递的历史上，对话的出现比图形要早得多，但设计师往往富有对图形的观察力和想象力，却忽视对话的作用。想象一下，用户与产品的交互，就是对话发生的过程。此时产品不再是一个冷冰的机器媒介，而是一个人，他/她的存在是为了帮助用户实现目标，而他/她的行为意志则基于产品身后企业的目标。既然是对话，便有双向性：为了让用户能够实现目标，产品会在合适的场合说特定的话（指导、激励、安慰、帮助…），而用户也需要把自身的需求告诉产品，只是这些需求已经被提前预判，成为选项提供给他们——这样的对话是可以持续下去直到用户和企业都达成目标。而那些不能够进行下去的对话，可能是产品没有说话、说话的时机不对、说话的内容不对，也有可能是产品提供给用户的预判并不是他们真正想说的话。一次用户与产品间的对话没有通过预判给用户选项，对话无法持续要让这样的对话更具象，直到能够转化为界面上的文案，我们需要有对话双方更真实的人物形象和场景进行支撑。从使用者这一方看，设计师可以通过访谈、问卷、可用性测试、行为数据分析等方法接触用户，形成“用户画像”和“用户故事”。但从产品这一方看，则需要为无生命的代码创造一个虚拟人物形象，赋予他/她特定的性格，以及这个性格在不同场景下的表现形式。回到上文所说，大部分 UX 文案只有短期功能性，完成了它的功能就消失，不会给用户留下什么印象。但是，如果产品背后有一个强大而统一的人物形象，那么在用户日复一日的使用中，他们能感受到这种特质，它像品牌一样能延续、有价值、有影响力，这个特质就是产品的人格特性。就像一个长久没联系的老友，我们无法复述当年一起说了什么话，但这个朋友带给我们什么感受，一下子就能想起来。我们遇到一些事时，他/她会如何说如何做，我们也能想到。好的 UX 文案让用户与产品之间的关系就像这样。人格特性带来的持久感受三、什么是人物性格与语气1. 人物性格 (Voice)产品的「人物性格 (Voice)」是指用户在与产品交互的过程中，从产品文案中感受到的产品背后的人格特性。这种特性是持续且鲜明的，使用户感受到自己与产品出现某种情感联结，让这款产品的体验在其他竞品面前是可辨认的。稳定的人物性格决定了产品文案的调性，它与产品的视觉调性是契合的。[1]下图中，在类似情境（评论留言区为空时）下，Adobe Acrobat 和 Zeplin 的文案表现出截然不同的人物性格：Adobe Acrobat 冷静干练，Zeplin 则活泼幽默。Adobe 和 Zeplin 对文案的处理一款产品的视觉调性一般由 UI 设计师负责，而产品的人物性格（文案调性）则由体验设计师或 UX Writer 负责（微软、谷歌、Adobe 等许多公司聘有专职 UX Writer 负责文案撰写，有些还聘用语言学家进行指导）。人物性格至关重要，需要组织中的各角色达成共识，然后作为设计体系 (Design System) 中的基础。Confluence 和 Jira 背后的公司 Atlassian 有一套非常注重文案的设计体系[2]，他们定义的人物性格是：勇敢、乐观、实用（且有趣），并且始终如一地为我们的用户提供一致、友好、有用的指导。Atlassian 的设计师在分享时提到，在一开始定义人物性格时，设计师团队与市场团队之间出现明显的分歧，经过长时间的沟通后才最终达成一致。尽管过程不容易，但结果价值巨大，因为 Atlassian 是一家以收购外部产品为战略的公司，能否高效地将外部产品整合到已有生态中、打造一致的体验，极大地决定了收购能否产生预期的价值。2. 语气 (Tone)人是根据场合来调整语言的，例如同一个人在家与父母唠家常时的语气与在工作时和同事开会的语气显然是不一样的。如果说人物性格是文案中的常量，使语言风格始终一致且可辨认，那么「语气 (Tone)」就是其中的变量，根据场合和受众相应变化。根据场景（报错、庆贺成功、提供通知…）和对象（不同类型的用户）定义相应的说话方式和表现，能让产品文案更加灵活变通，使其在特定情境中发挥更大的作用。举个例子，Mailchimp 是一个提供电子邮件营销服务的平台，以黑猩猩 Freddie 作为其代言人。Freddie 的性格定位是：直言不讳（plainspoken)、真诚 (genuine)、翻译者 (translator)、幽默 (humor)。 [3]Freddie 会根据情况强调或弱化性格的某一方面，比如庆贺活动邮件发送成功时，他会幽默地想要与你击个掌；而遇到错误时他则会很真诚地向你道歉并提供帮助。Mailchimp 在不同场景下的文案体现语气差异我们可以用一条从“消极”到“积极”的轴线代表语气的变化，将每一段文案放在轴线的特定位置，上面 Mailchimp 的例子中，左边的文案会在积极侧，右边的文案在消极侧（这两种出现的概率都不会很高，大量文案会处于轴线的中间地带）。在轴线的基础上，Adobe 的设计体系[4]中对语气做了更细致的划分：激励的(Motivational)、帮助的(Helpful)、指导的(Instructive)、安慰的(Reassuring)、支持的(Suppotive)。不同语气出现的频率不一样，其目的和态度也不同。比如基于 Adobe 定义的人物性格（理性、人性、专注）， “帮助型” 语气对应的文案需要精简干练，以使用户快速达成目的，而 “安慰型” 语气对应的文案需要增加专业性和可信赖度，以解除用户的焦虑感。不过一段文案的语气也可能更加复杂，或许是某 2 种、甚至 3 种情感的结合，也或许位于两种语气的中间地带，需要写文案者对用户和场景有更敏锐的觉察。四、人物性格与语气的价值人物性格与语气为文案优劣的评判提供了场景化且有趣的标准，相比其他繁琐的细节规范，它更易于记忆、传播和沟通。为产品制定人物性格与语气，是规范文案表达的开始，也是后续所有文案规范的基础。人物性格与语气对企业的价值可以归纳为以下三点：增强产品亲和力：人物性格与语气的良好应用，能够让建立用户与产品之间的情感联结，让用户体验变得可辨认，以提高品牌忠诚度；增强体验一致性：帮助不同部门、不同职能的团队成员撰写风格一致的、符合产品特点和视觉调性的产品文案，增强体验一致性；降低学习和沟通成本：完整的文案规范对设计、产品、运营新人来说学习成本大，但人物性格与语气直观、易上手，能够显著降低学习成本和跨部门沟通成本。下一篇开始，我们将会以酷家乐云设计工具为例，展示从 0 开始创建人物性格与语气的过程，敬请期待。参考资料：[ 1 ] Lies, E. (2020). Strategic Writing for UX: Drive Engagement, Conversion, and Retention With Every Word: Torrey Podmajersky [Book Review]. IEEE Transactions on Professional Communication, 63(4), 404-405.[ 2 ] Atlassian voice and tone principles: https://atlassian.design/content/voice-and-tone-principle[ 3 ] Mailchimp voice and tone: https://styleguide.mailchimp.com/voice-and-tone/[ 4 ] Adobe Spectrum voice and tone: https://spectrum.adobe.com/page/voice-and-tone/文中的数据均已做模糊处理, 非真实数据, 仅作为演示用途, 对数据呈现不负相应责任。UX文案怎么写？来看看谷歌的方法总结写作是很容易的，你要做的就是删掉那些错误词句。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/ux-copywriting
标签 用户 内容 Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。本文从标签页的「基本原则」和「使用避免」两个维度，总结 10 个我们所要注意的一些规则和方法，如果遵循这些原则，它不仅能够快速、高效帮助用户完成任务，也会让我们设计的体验更好。由于 Tabs 标签页涉及到的端设备及内容较多，本文只讨论 Web 端内标签页的使用情况，不讨论浏览器级别的标签和导航标签设计等。基本原则1. 标签的文案应当是简短且高效的标签的文案应当简短，做到让用户快速识别标签的文案需要尽可能使用简短的、概括性强的关键词，如果使用较长的文案，那么对于用户阅读和区分这些信息都是一个不小的挑战。标签文案需要有明显的区分，避免用户产生歧义；在词语上优先使用名词而不是动词，因为动词让用户误以为这是可以行动的按钮。标签的文案应当做到高效展示标签的信息展示传达应当高效，比如不要让标签文案分开展示，如下图的标签页的状态和数量两组信息较为割裂，用户会做短暂思考关联下方内容的是状态还是数量。如果设计的样式与常规标准差异较大，用户就会产生疑惑，所以对于用户已形成的行为习惯，尽可能避免改变。2. 已选中的标签应当是唯一的且足够突出已选中的标签应当是唯一的标签页之间是相互独立且互斥的，一次只显示一个标签的内容信息，不会出现点击一个标签页，出现两个甚至更多标签的详细信息。一般默认选项为第一个标签页，而如果没有给到用户预选择的情况，也会让用户感觉困惑。同时关联的详细内容区域宽度应该是等同的，切换不同的标签，不要改变其内容宽度的大小。已选中的标签应当是足够突出确保已选中的标签页足够突出，让用户一眼就知道了当前选中了哪个选项卡，特别是当只有两个标签页的时候。可以通过字体大小、颜色、粗体等在增加已选中的视觉权重。3. 标签页版面延伸到内容区域，可加强标签与内容的关联性如果将选中卡片式标签页背景颜色和内容面板背景保持一致，就能够做到增强选项卡与内容之间的联系感。4. 标签页的位置和排序，应当基于人的阅读习惯位置：强调或需要引起用户的注意，请把它放至顶部因为人的阅读习惯是从左至右、从上到下的顺序浏览，所以相较于底部或左侧的标签页，顶部的标签页具有更强的视觉引导并引起用户的注意。相反如果用户不太关心，甚至很少切换这些标签页，可以考虑将它们放至底部。排序：重要的、使用频率高的标签应当放至前面如上所说，人的阅读视线从左到右，所以应当将重要的、使用频率高的或者按照逻辑顺序往前排，通常默认选项（一般为左侧第一个）是用户进入页面看到的第一个标签页，因此它的信息应当是最重要的、或者应当是用户使用频率最高的。以下是以京东关于商品详情的一个排序，用户看到的第一个标签页是关于商品的介绍，第二个标签页是商品的规格包装，第三个是该商品提供了哪些售后保障等等。使用避免1. 避免使用图标作为标签页文案在一些场景下，图标有时反而会让用户误解标签的信息，如果要用请全部添加，不要只针对部分标签选择使用图标。使用时仍需注意，将图标放至 tab 标签的左侧。2. 避免截断标签文案，并且让它们有足够的点击面积避免截断标签左侧的文案，减少的文本会阻碍用户对于信息的识别和理解完整的标签信息，可以帮助用户快速识别当前的位置。如图左侧标签内容的减少，会妨碍用户对于信息的理解，反而会降低标签的可识别度和操作切换的决策成本。标签页应当有足够的面积，避免让它们进入紧凑模式每个标签页都有层级引导的作用，需有一定面积来展示标签信息。比如像浏览器的标签页特别多时，会给用户使用带来两个问题，一是可点击区域非常小，精准点击较为困难；二是标签获取到的可用信息非常少，甚至有时只是一个图标，当然对于浏览器，我们完全可以重新打开一个新窗口，来解决这个问题。3. 避免数据为空，就不显示这个标签页一般情况下，如果将标签页作为数据信息分类展示时，即使该标签下没有数据，该标签也是需要显示的，否则用户就永远不会知道有这个标签页的存在。4. 避免标签页，在内容较少或者作为比较时使用避免将标签页用于很少的内容分类，因为会降低信息的展示效率标签页本就是为过多内容信息而采用的一种分类方式，如果一个 tab 下只有几段文字或者几组录入数据信息，可以考虑在一个页面内展示这些内容，不仅可以提高屏效，还可以减少操作上的切换成本。如下图，简单的三组数据信息，我们就可以将它们放在一个页面中，通过卡片来区分它们。避免将标签页用于比较不同类别的信息，因为它会增加用户的记忆负担因为用户通过切换标签页去比较这些信息时，短暂记住这些内容是一件非常困难的事情。所以对比不同类别之间的内容，可以考虑在一个页面展示，如下图就是苹果官网在一个页面显示的 Mac 机型比较，可以同时对比三款机型的信息。5. 避免嵌套标签页，如果使用请加大他们的层级关系避免在 web 页面中嵌套标签页，因为嵌套后层级较为复杂，可能会造成信息的混乱，用户记不住已访问过哪些标签页。如果有嵌套 tab，请在视觉上加大他们的层级关系，并且尽可能减少一级 tab 的数量。6. 避免复杂内容标签页，用户直接删除在表单中，如果删除该标签页后，会给用户造成工作负担，甚至会丢失一些数据，这时的删除操作需要给用户反馈提醒，给到用户二次确认是否删除；如果删除该页签后，对于用户几乎没有任何负担，或者再次输入的成本较小时，不建议使用二次确认，因为这时给用户带来的操作干扰远大于误操作成本。比如下图 Microsoft Excel，当标签页签有内容输入时，删除会需要用户二次确认，而当页面内容为空时删除不会给用户任何提醒。在具体的业务场景中，我们需要结合用户的删除频率、误操作成本以及删除组件的干扰三者之间找到一个相对平衡点。总结以上就是标签页在设计中我们所注意的一些事项，如果遵循这些用法，不但解决信息的堆积问题，也能够大幅提升页面的清晰和可用性。而如果我们发现用户很少去点击这些标签页、或者使用经常出错，就需要考虑这些标签页是否使用得当，或者违反了上述所说的一些基本用法。以上举例覆盖的场景不一定全面，不过我们最终的目的还是通过标签页这个组件，去引导用户将视觉聚焦于页面内容。参考文献：张亮《细节决定交互设计的成败》尼尔森诺曼，《Nielsen Norman Group》从3个方面，分析总结标签设计的体验细节！在移动端产品中，标签不是核心内容，甚至有点不起眼，但是谁都无法忽略它的存在。阅读文章 > 欢迎关注作者微信公众号：「小高杂谈」本篇来源：优设网原文地址：https://www.uisdc.com/how-to-use-tabs
形象 故宫 故事 即使你没有听过川沙妲己，那你也一定听说过玲娜贝儿，之所以称她为川沙妲己，是因为迪士尼在上海浦东新区川沙镇，而玲娜贝尔是一只可爱又迷人的粉色小狐狸。粉嫩的毛发、滴溜圆的眼睛、宽阔柔软的耳朵，加上一条标志性的毛茸茸大尾巴，玲娜贝儿的预告片出来的第一天，就凭借人畜无害的外表吸粉无数。作为迪士尼家族的新成员，玲娜贝儿一出道就直接包圆了娱乐圈的热搜，热度完全不亚于当红女明星，横扫 B 站、抖音短视频平台，玲娜贝儿的玩偶被黄牛哄抢，价格抬升 6 倍之高达到上千元，再一次拯救了迪士尼的营业额。为什么人们会这样热衷于一个虚拟的 IP 人物形象？作为 IP 人物形象玲娜贝儿是怎么设计出来的？接下来带着这样的问题我们一起来看下 IP 人物形象的设计都有哪些门道。在讨论 IP 形象之前，我们先来看下 IP 是什么。IP 是 Intellectual Property 的简写，翻译过来是知识产权的意思，在互联网语境下已经延伸出多种含义，可以说一千个人就有一千种关于 IP 的说法。广义上的“IP”依托于内容存在于各个领域，包括概念 IP、小说 IP、形象 IP 和电影 IP 等任意一种文化创意形态。在有内容支撑并可被持续创作的情况下，一个价值观、一个人格都可以形成一个 IP。IP 的终极目标是追求价值和文化的认同，可以跨形态、跨时代、跨行业。IP 本身其实是特别庞大且难被完全概括的一个存在，至今也还存在争议（尤其在法律层面）。但再庞大的概念，也总能被分类。大概收集了下资料，目前 IP 可以大致地分为形象化、文旅符号化、故事、世界观这四个类型。第一个类型形象化也就是我们所说的 IP 形象。形象是将产品拟人化，并加入一些故事线，且能快速的让消费者记住的特点。IP 形象作为更为具象化的产物，能够帮助企业共建良好的品牌形象，扩展企业的盈利空间。当 IP 形象能够做到足够惹人喜爱时，它自身就会有超越品牌的个性魅力，可以反过来为品牌吸引新用户，这是一种营销玩法的升级。比如比较经典和著名的 IP 就有小黄人、MM 巧克力豆小人、米其林、哆啦 A 梦，以及漫威、迪士尼家族等。而品牌中常见的就有京东 JOY 小狗、腾讯企鹅、美团袋鼠等等。那对企业和品牌来说，打造 IP 需要从 IP 形象的设计开始。打造的结果，就是塑造一个大众喜爱的，且拥有长期生命力和商业价值的 IP 形象。对 IP 形象有一定了解的人都会知道熊本熊，他作为熊本县的吉祥物，以其高度拟人化的形象加之熊本县营业部兼幸福部长的头衔，制造出各种有趣的故事，带动当地人民与之互动。一个吉祥物熊本熊的创意设计 IP，短短两年便为该地带来 12 亿美元的经济效益以及相当于 9000 万美元的广告和宣传效应，该县也从一个籍籍无名的农业城市，一举成名成为日本乃至世界著名的旅游大县。文旅符号就例如是，我们中国的长城、故宫，美国的自由女神，巴黎埃菲尔铁塔等，它们都可以作为 IP 文化符号来运营，从而产生商业价值。就拿故宫来说，作为中国明清宫廷文化符号的故宫紫禁城，故宫是一个拥有 600 年历史的文化符号。故宫拥有众多的皇宫建筑群、文物、古迹，也是中国传统文化最典型的象征，这也是如今故宫能成为文化领域超级 IP 的重要基础，故宫文创也随之“出圈”。故宫文创深度挖掘丰富的明清皇家文化元素，将有五千年历史故宫的建筑、故宫的文物以及背后的故事，融合现代人喜欢的时尚表达理念，最终打造出深受消费者喜爱的故宫元素文创产品。故事类 IP 就包括哈利波特、指环王、黑客帝国等内容作品，当然还有樱桃小丸子、蜡笔小新、奥特曼等等知名 IP。故事 IP 往往也能够跨界、形成综合产业、并且在人们的内心形成一种“超级文化符号”，而迪士尼本质就是一个童话故事乐园，为了让消费者买单，其就一定要进行各种故事的创作。任何一个 IP 人物的诞生，都需要故事在其背后呈现。所以，如果仅仅凭空去创作一个 IP 人物，却没有其故事，那么是无效的。任何 IP 的创作都需要一个故事在其中附加。当然，这个故事中，就必然会包含人物的性格特点、爱好等等相关联的因素。世界观 IP 就例如像星球大战，权利的游戏，流浪地球，以及玩具总动员、疯狂动物城、寻梦环游记等等。世界观 IP 也有人设和故事，但内容会更关注世界观本身，IP 内容的世界观构建占比较高。比如流浪地球就是从一个高概念的、极具脑洞的科幻设定出发：“如果太阳急速衰老膨胀，人类能否带着地球一起逃亡，去外星系寻找新的家园？”由此创建出一个独特的未来世界，一切事情、人物、场景皆因此而生。那么在了解完 IP 的概念以及分类后，一个完整的 IP 形象设计的诞生需要经过怎样的流程呢？IP 形象的创作流程不是线性的，而是环形，是一个不断探索和进化的过程。主要为策划、设计、应用、进化 4 大步骤。第一部分 IP 策划包含 IP 背景调研、性格特征、世界观、个人故事。那首先通过大量用户调研、公司、市场多个角度的信息收集，就可以确定出 IP 形象所传递的价值和受众，以及 IP 所要传达的核心理念同时也会综合考虑品牌调性和营销策略，决定 IP 的形象定位以及人设。性格特征是将 IP 人性化的重要方法，人性化能够使 IP 具有独立人格和魅力，能够形成 IP 形象的名字、身份、性格、标签和口头禅等等。例如大家可能熟悉的三只松鼠 IP，三只松鼠建立了一个萌宠的品牌形象和亲切的主人文化。他们是“松鼠小贱、松鼠小美、松鼠小酷”三个可爱形象，他们有不同的星座、爱好以及个性等特征，这样的品牌设定具有趣味性，能够快速吸引目标用户关注。此外，三只松鼠以主人和宠物之间的关系，替代传统商家和用户之间关系，客服以松鼠口吻与用户交流：亲切称呼用户为主人。这样的沟通方式提升了用户的消费体验，打造超预期服务，增强用户粘性，品牌由此具备了立体形象，被赋予人格属性。世界观的设定则依托于一个文化母体，比如《哪吒之魔童降世》同时有封神和哪吒的经典神话，以及现代二次元新潮人类文化。又比如在漫威宇宙里，同时有神话、新科技、外星、当代传奇等多种文化母体存在，雷神是北欧神话的，钢铁侠和绿巨人是新科技的，银河护卫队是外星的，而美国队长则来源于二战，还有奇异博士有藏传佛教，等等。有了人性化和世界观，就能够产生故事，通过故事则能够体现出 TA 何种价值取向、人生态度和处世方式。我们都知道，人类这个群体实际上是需要故事才能生存下来的，人类社会其实是一个想象的共同体。那么任何故事的创造就自然会吸引人们去阅读，不论这个故事是真是假，故事本身就是意义。那么这个时候，一个好的故事塑造就可以打动人，唤醒人的心智。我们来看下玲娜贝儿的人设是什么样的。在迪士尼讲述的故事里，达菲在森林里迷路后，是玲娜贝儿通过达菲身上的痕迹为线索，最终帮达菲找到了回家的路，在这个设定里，玲娜贝儿是个小小冒险家，她热爱大自然，日常拿着放大镜在森林里东看西看，又有着大大咧咧的个性，非常喜欢交朋友。第二部分则是开始进行 IP 形象设计，但设计不仅是简单的方向探索与草图绘制，在进行 IP 设计时，需要充分考虑形象的外观，适当的甚至艺术化的夸张抽象，让形象的性格特点立住人设。首先，我们根据策划时确定的形象关键词做一些研究和构思来确定风格方向，然后通过协调的身体比例决定详细的造型人物设计。所有正常的形象都由一个基础的头身比例得来，这是在画人体中最常用的「头身比」法则。一般来说，我们平时常见的成年人是 7-9 头身，青少年是 6-7 头身，孩童是 3-5 头身，Q 版一般是 2-3 头身，头身比越大，越成熟，越写实，反之亦然。日本形象创作的总结图，基本的 2 头身，展现不同的身体画法，分别对应不同的特点。第一种是偏写实的风格，第二种是略微夸张的表现，第三种是在第二种的基础上更加夸张。在身体比例的设计上大概有这样一个规律：没有脖子更可爱憨厚、重心低比重心高更低龄、手脚简化比手脚复杂更低龄。同样的身体配上不同的面部，给人的感受也不一样，性格表现也会不一样。例如熊本熊的脸就是从一千多个面部组合中选出来的。同样的面部配上不同的身体，给人的感受也会不一样。不过身体比例的审美一直在变化，尤其是近两年盲盒大爆发。随着审美的变化，我们不再追求骨骼上的可爱，如今的很多潮玩重心都靠上，大长腿。可爱还是依旧的可爱。按照重心原则，手脚协调，脸部和身体的个性配搭来做形象，似乎不会有太大风险，但打破常规设计，制造一些有趣的特点，也往往会利于形象的传播，更容易被人们所接受。由日本漫画家田中克己推出的缘子小姐，一个看似正常的白领美少女，做出匪夷所思的动作，灵感就来自上班族的白领小姐。试想当你伏案工作的很长时间后，忽然抬头发现可爱的缘子小姐的话，想必非常的治愈吧。再比如盲盒届的初代萌神，molly，吸引大家不停买买买的是不停变化的任务装饰和小部件，非常精致。再比如 KAWS 的联名千千万，别说服饰变化，就连整个造型都会改变，唯一不变的就是它标志性的 xx 眼睛。当下，IP 形象已经成为品牌视觉资产的重要组成部分，因此需要根据品牌特性将 IP 进行符号化设计，抽象出 IP 形象的外形特征，来应用于不同物料的延展和品牌的视觉符号。例如我们看到一大两小三个圆组成的图像就很容易联想到米奇，这就是米奇非常核心的识别造型。便于记忆的同时也能很方便的运用在各个场景中。而一个成功的角色塑造，外形上需要有让人记忆深刻的视觉锤，反复地以一种简单却概括、符号化的标志敲打人们的视觉记忆点，这种强符号化的标志通常人们眼睛移开 10 秒，再回想一下也能记住一个大概。颜色对 IP 形象的重要性也不言而喻，传统的 IP 形象色彩搭配通常不会超过三种。这是因为如果在 IP 形象的颜色过于复杂，是不便于用户记忆的。随着 IP 的设计推进，IP 形象延展以及运营的设计规范也是 IP 形象的重要设计工作，IP 素材延展则是根据故事和世界观为形象设计匹配的动作和场景等等。最终目的就是丰富形象，使角色形象能够立体起来。如果说外观是 IP 角色吸引用户的第一个要素，那么真正能让用户为之动容的，则是角色背后妙趣横生的背景故事。例如 LINE FRIENDS IP 讲述了布朗熊和可妮兔的爱情故事。IP 形象也不再局限于插画或者动画的表达，IP 形象也将应用在品牌传播、商业合作等各个方面，因此在物料设计上也可以进一步推进 IP 和 VI 二合一视觉体系。如果大家对国内外一些 IP 运营公司有了解的话，应该会知道他们在日常运营中会涉及到一个重要的设计工作，那就是 IP 图库开发以及授权规范。其中以迪士尼角色图库为代表，针对米奇这一形象就开发了数不胜数的图库。IP 图库同样是为了规范、保证品牌方在使用 IP 时能够产出统一标准的视觉，使得 IP 不会因为二次创作模糊掉。以上提到的 IP 设计流程，只是成功 IP 形象的基本，IP 形象想要深入人心还需要核心的精神元素。当我们回望历史上一些知名 IP 时，我们会发现他们的成功都是顺应时代发展的，例如日本动漫经典之作 EVA，将美少女元素和机器人科幻元素连结在一起固然是新颖的视觉元素，但其内核还是深深依附于时代背景的思考，诞生于日本的泡沫经济阶段，年轻人对社会充满失望。于是 EVA 把世界观植入未来，表达一种鼓励和憧憬，希望人们在即将到来的新世纪，可以战胜自己心中的恐惧。腾讯实战案例！如何打造有温度的二次元 IP 形象？项目背景随着 80、90、00 后陆续成为互联网社交的主力群体，泛二次元文化从以前的小众圈层，逐渐发展壮大，与主流文化接轨。阅读文章 > 欢迎关注作者微信公众号：「UX实验室」本篇来源：优设网原文地址：https://www.uisdc.com/linabell-ip
插画 画师 作品 大家好，我是优设花生~ 今天继续带大家看看世界上顶尖的插画师。现在提起插画，大家可能会想到现在非常流行的类型，比如风格鲜明的欧美系插画、华丽精致的国潮插画、酷炫的潮流涂鸦插画，或者清新可爱的线条风插画等。那你对社论类插画了解多少呢？Davide Bonazzi 插画作品社论插画是结合时事热点，从一特定角度揭露社会问题伙现象的插画。相比于摄影照片，插画可以主观地塑造画面中的元素，通过夸张幻想或者打破时空限制等具有视觉冲击力的方式，诠释特定问题或现象，以启发读者其进行不同角度、更深层次的思考。Davide Bonazzi 插画作品Davide Bonazzi 就是一位擅长创造巧妙的视觉解决方案来代表复杂的主题的插画师，他画风沉稳温和，视角诙谐独特，作品总能用别具一格的方式引起人们的思考。Davide Bonazzi 来自意大利博洛尼亚，在博洛尼亚大学获得文学学位后，出于对兴趣，他相继在米兰欧洲设计学院和博洛尼亚美术学院学习插画。他 自 2010 年起担任自由插画师，合作过的客户有《华尔街日报》、《华盛顿邮报》、《美国企业家》、《科学美国人》、《经济学人》、《时代周刊》等，作品也多次荣获纽约插画家协会、传播艺术、美国插画、33 杂志和 Lürzer 档案馆的奖项。为美国《企业家》杂志创作的插画，表明新冠疫情带来的困难重重孕育下一代企业家精神的繁荣之所以如此受到知名杂志网站的青睐，是因为 Davide Bonazzi 的插画总能用精炼的元素巧妙地揭示出特定主题的复杂深厚内涵，并兼具美感。超现实的表现手法Davide Bonazzi 非常喜欢用超现实的表现手法，将现实中不可能出现的意象联系在一起。他认为这样可以打破图像的平面格局，创造更多层次，从而给人带来视觉的新鲜感和冲击力，以引导观者从不同的角度对进行思考。比如插画作品《暴力的遗产》，是为一篇讲述南非自由斗争中的暴力遗产的文章而创作的。Davide Bonazzi 的这幅作品从 3689 幅插画中脱颖而出，成为知名大型插画比赛 Communicationarts 年度最佳作品之一。《暴力的遗产》《暴力的遗产》画面中，最显眼的是一朵朵殷红的罂粟，密密麻麻看不到边际；视线向下，会发现这一朵朵罂粟竟都是从长枪的枪口长出来的，笔直刚硬的枪口与纤细柔嫩的植物茎干形成鲜明的对比，给人强烈的视觉冲击。画面上方是橘色的天空，似是夕阳的余照，远处一个人独自站在这红色的花海中，背对画面，仿佛在对着欲沉的夕阳沉思。《暴力的遗产》画面构成并不复杂，只有天空、人的剪影、花朵、枪杆四个主元素。但是“枪杆中长出的罂粟”这个超现实的意象却引发我们的思考：暴力争取自由后，预想的和平并没有到来，枪放下后危害性更严重的罂粟花却成片的冒出来了。画面整体的红黑对比色调营造出沉重的氛围，上窄下宽的构图形式很好地体现人被罂粟问题威胁的概念。通过插图，我们很容易就能领悟到文章的主旨。还有多次获奖的系列插画《城市野生动物》：系列插画《城市野生动物》触手变成四通八达立交桥的章鱼，如摩天大楼矗立的金枪鱼和在城市里垂钓的老者，城市海滩边的孔雀摩天轮，沉默趴俯在楼顶犹如装饰圆顶的海龟，这种在钢筋水泥丛林寻中求自然野生力量的挣扎让人觉得诡谲压抑，又莫名合理，让人惊叹于 Davide Bonazzi 敏锐的观察力和丰富的联想能力。展现人文关怀的质感纹理Davide Bonazzi 的插画都是通过数字软件创作的，因为这样能更快的根据客户的需求修改画面，同时也能让 Davide Bonazzi 更随心大胆的尝试各种风格效果。数字软件创作出来的图像非常精致干净，但是也非常冰冷，让观者与画面产生疏离感。为了避免这样的问题，Davide Bonazzi 在创作中使用了噪点笔刷和纹理图片，为画面增添的丰富的质感，让人感觉温暖亲和。从 2010 年至今，Davide Bonazzi 已经在社论插画领域持续创作了 10 余年，作品的创意与深度却从未减退。新冠疫情后，Davide Bonazzi 也创作了很多相关主题的插画，揭示新冠疫情对社会各方面带来的影响。Davide Bonazzi 的作品无论是艺术性还是深度都非常支持我们去探寻品味，喜欢的小伙伴可以去 Davide Bonazzi 的个人官网欣赏更多精彩作品。「Davide Bonazzi -个人网站」 https://www.davidebonazzi.com/「Davide Bonazzi -Instagram」 https://www.instagram.com/davidebonazzi24/?hl=en「Davide Bonazzi -Facebook」 https://www.facebook.com/DavideBonazziIllustrator/更多优秀插画师推荐：与宝马合作、为女性发声的艺术家：Kelly Anna宝马等大牌纷纷与她合作，只因这位插画师笔下的女性实在迷人。阅读文章 > 这5个顶尖插画师的线稿作品，是我每日学习的源泉！关注优秀插画师，学习借鉴其绘画技巧是插画进阶必不可少的过程。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/davide-bonazzi
界面 需求 原型 之前接到一个需求，在客户跟进系统中，销售根据客户手机号码生成的串码，复制到企业微信添加好友后，可以将 useID 自动关联绑定客户编号。有位设计师直接就对着原型把界面做了出来。对于做好这个界面，他也非常努力，比如让元素更好看，信息排列更整齐。我遇到过几位设计师都是这么做需求，但是最终出来的界面不尽人意。因为他们把目光都聚焦在局部，缺乏对整体的思考。今天用这个界面来说一下思路吧。这张是产品的原型，为了体现真实情况，文档说明基本是原话（已对信息进行脱敏）。原型的意思是在客户的主页点击「生成串码」就会来到这个页面，默认将客户的置顶手机号码显示在第一位，复制这个号码生成的串码，去企业微信添加好友就会自动关联绑定。就像以前要分享淘宝的商品给微信用户时，需要点击分享，将出现的那串文字复制到微信发给朋友一样。利用路径拆分原则，分析这个用户在当前页面要通过什么方式才能达到目的，可以分为以下两种情况：复制置顶号码即可满足需求；需要将其它号码生成串码才能满足需求。通过这张图，结合原型，我们可以发现这两点：1、这个页面的目的非常明确，是复制串码；2、置顶号码默认生成串码，其它号码需要点击生成才会有串码，因此重新获取这个按钮，在两种号码卡片上出现的节点不一样。理清思路之后再来看原型，会发现原型的低保真图与说明是两种意思，也就是低保真图没有体现应有的状态和正确的意思。如果拿着这张低保真图直接对着做，将「重新获取」作为页面的主按钮样式，这个界面的可用性就很低了，用户会认为点击「重新获取」是对应所有的号码。根据正确的思路，做界面之前我们应该做一张低保真设计稿。下图是对于原型进行优化后的低保真设计稿。我们还可以用墨刀制作一个小型 demo，找相关用户或同事进行测试。这样做可以提前验证界面是否达到用户的预期。小型 demo 如果验证不成功，用户依然有困惑，可以继续调整，直至验证成功后，才进行界面高保真设计。这个概念也叫 MVP，即最小可行性方案设计。方法有很多，简单的纸面原型、线框图都可以实现，视情况使用。通过验证后做出来的界面，返工率会更低，因此不要忽视这一步。接下来才是找参考界面，不用局限在相同类型的界面中，可以泛浏览界面，从中找到灵感。（所以平时收集界面很重要）成图如下经过这个事例，我们可以大致描绘归纳出步骤：识别需求-重塑需求-梳理流程-设计界面1. 识别需求识别需求不是读原型说明文字，而是要基于了解用户和产品的前提下：在什么场景，用户需要通过什么方式，解决什么问题。不然原型文字就只是文字规则，没有发挥最大作用。其次，需求是否合理，是否能真正解决用户问题。2. 重塑需求理解产品的意思后，利用路径拆分原则进行需求的重塑，了解用户通过什么方式到达目的地。需求拆分方法的原则可以看乔梁的《持续交付 2.0》，其中 INVEST 原则、需求拆分的五大技法能够帮助我们设计时以产品角度进行思考。3. 梳理流程梳理流程，查缺补漏后，进行界面的低保真设计。在这过程中用到 INVEST 原则中的 Testable（即可验证原则），不断验证直至成功再进行界面设计，可以让我们的返工率降低。4. 设计界面经过前面一系列的思考和验证，再去进行界面设计的时候，我们才是带着正确的任务：哪个才是当前的任务重点、什么元素应该强调或弱化、在设计规范的范围内怎么让界面更舒适好用…等。总结这个思路框架可以帮助我们快速而准确地完成界面设计，特别在小型需求上。别小看小的需求，每个界面都有其任务，可以推动流程的完成。面对大型的需求时，则需要拆分得更细致，用更全面的方法去做。老板说界面不好用怎么改？从这5个方面入手！有次接到个需求：“我们系统不太好用，视觉升级的时候也麻烦帮着改改。阅读文章 > 欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/interface-design
语言 字体 信息 导语 | 本文主要面向设计师们，文章从界面设计的角度介绍了在出海产品中，多语言设计的相关原则及要点，希望可以帮助刚接触或正在做出海产品的设计同学，建立起对多语言设计的初步认识。背景介绍1. 国际化与本地化在认识出海产品时，我们常常会听到“国际化”和“本地化”两个概念。在信息技术领域的官方定义下，对产品进行国际化（i18n）与本地化（L10n）处理的含义是，通过修改软件，使之能适应目标市场的语言、地区差异以及技术需要。两者概念区别有些微妙，我们或许可以用更简单的说法来解释——“国际化”意味着兼容，即用一套产品方案，来面对不同地区的用户，这叫实现产品的“国际化”。而“本地化”意味着定制，需要根据不同地区特性，进行分别处理，这叫“本地化”处理。两者的共同实现，才能更好地服务拥有不同文化背景的用户们。产品实现国际化与本地化的基本范围包括但不限于以下内容：2. 为什么要做多语言设计由上述背景可知，一个出海产品想要达成良好的国际化与本地化效果，需要整个产品研发团队从内容、设计、技术多个层面进行全面考量。对于设计环节而言，多语言设计是最需要关注的重点之一。做好多语言设计，能让产品拥有最基本的、适应不同地区的潜力——也为本地化内容的翻译呈现，提供良好的环境。国内设计师更常接触单一中文产品，但用中文产品设计的习惯来做出海产品，很容易“踩坑”。这与出海产品和国内产品的研发流程不同有关。我们团队在实际的项目经历中，发现具有一定规模的平台型产品，不太可能在设计初期拿到各语种的真实文案。因此在出海产品的实现过程中，会在中间阶段多出翻译、内容校验等阶段。因此，对于设计同学而言，如何做好多语言设计，以预知落地问题并提前规避，是一项重要挑战。认识语言差异全球文化多元各异，最直观的体现便是在语言和文字上。如何用一套设计方案来兼容存在各种各样差异的多国语言呢？这正是多语言设计的难点所在。首先，我们需要认识各类语言间存在哪些主要差异。1. 字符形态的差异字符是语句的基本构成单位。不同的文化发展背景下诞生出了形态各异的字符样式。而部分语言会共用一套字符体系。常见的字符体系有如下几种类型。从图形的角度分析这些字符的形态，不难发现，像拉丁字母以及西里尔字母，字符笔划构成相对简单，且笔划多为平直线条或是规整的弧线。而像阿拉伯字母、泰文等字符，组成相对复杂，笔划线条特殊的曲度较多。这是非常关键的字符形态差异，它将会影响后续我们对字体的选择。2. 内容长度的差异在不同语言下，同样含义的内容进行翻译后，得到的文本长度可能会有较大的差异。如何通过设计兼容这些信息，正是做多语言产品最大的难点所在。因此，在多语言设计阶段，非常建议基于英语进行设计(善用谷歌翻译)，以便于更直观地对信息兼容进行处理和判断。这里需要提醒的是，不建议大家用最习惯的中文进行占位，因为中文可以精炼文字，信息本身较短，很容易产生多语言适配的“盲区”。如果设计想要预知信息翻译后的长度，以便制定布局策略，可以用 google 文档自带的翻译函数 fx=GOOGLETRANSLATE(文本，“源语言”，“目标语言”) ，以及字符统计函数 fx=LEN(文本) ，快速实现多种语言的批量翻译和字符数计算，为设计提供初步参考。*资料 1: 我个人使用 google 文档创建的简易小工具，供参考（梯子访问）： https://docs.google.com/spreadsheets*资料 2: 全球语言简码表： https://www.zhudc.com/browser/201623. 词汇分界的差异语言还分为带有词汇分界、和不带有词汇分界两种情况。带有词汇分界的语言有英语、俄语等，分界意味着他们的语句以单词为最小单位。而中文、泰语等语言是没有分界的，一个语句中除了标点符号分隔，字符都是相连的。这也是影响段落布局的一个重要因素。4. 阅读顺序的差异阅读顺序分为 LTR (Left to Right)和 RTL (Right to Left)两种。我们常见的绝大部分语言都是从左到右的阅读顺序，而使用特殊右至左顺序的，则以阿拉伯语为代表。不同的阅读顺序，决定了布局时信息对齐、元素排布、甚至图标图示，都可能存在不同的规则。综上，在正式启动设计以前，建议设计同学向业务方了解清楚，平台会支持哪些语言。明确语言类型，了解以上差异后，才能更好地制定设计方案。核心原则：可读性与包容性根据对于不同语言差异的认识，以及我们团队在项目实施过程中的经验，我们可以将多语言设计的核心原则总结为可读性与包容性两大原则。可读性包含(1)字符可读性 (2)内容可读性；包容性包含(1)布局包容性 (2)认知包容性。1. 可读性原则字符可读性字符可读性，主要针对的是在应用风格化字体时，需考虑到在不同语言下的显示效果。部分产品因为品牌调性或美术风格的需要，会引用带有特殊风格个性的字体。而我们发现，市面上大部分风格化字体都是基于拉丁字母设计的。而那些形态特殊的字符，可能会比较难找到同种风格的风格化字体。即便有，它们的可读性受字体影响的风险会更高，因此检验字符可读性尤为必要。例：在一次运营活动中，我们将英语版本转为印地语版本时，两种语言都使用了名为 Teko 的风格化字体。当地合作的印度伙伴看到落地页面后，向我们反馈，这种字体导致他们的语言可读性下降许多。所以当产品覆盖的语言类型特别多时，如果要一一对应特殊语言去找风格化字体，无论是设计成本、或是页面加载成本都会特别高。这种情况下，可以适当考虑放弃部分语言的风格化字体效果，转用基础字体，优先保证字符的可读性。内容可读性内容可读性，指页面容纳信息时，是否给用户传递出了足够多的内容，让用户能达到最基本的信息理解，而不是靠猜。因此我们要针对多语言内容的长度特性，留有一定信息空间——尤其是信息使用了缩略处理时，需谨慎地确认露出的部分是否足以被用户理解。2. 包容性原则布局包容性布局包容性，即需要设计同学在元素、组件、模块等设计中，要进行弹性的设计考量，通过合理的布局设置，更好地兼容极多或极少内容的情况。布局的包容性对于平台型产品尤为重要。如果是一次性产出的、纯展示型产品，细致地根据实际内容检查调整适配效果并不需要太大功夫。但如果是需要长期维护、内容持续变更的平台型产品，一个高度包容性的布局，才能帮助产品用有限的成本达成较好的落地效果。例：商品货架卡片是一种典型的弹性空间，没有固定信息，因此信息布局以竖排为主，保证横向空间足够，不增加换行难度。输出时也要兼顾不同信息丰富度下的规则。字体的选择同样会影响布局包容性。当你选择了一个默认字符尺寸太超乎寻常的字体（过扁、过宽）时，在产品存在多语言多字体的情况下，会发现即便是同样的文本参数，单个字符宽度却相差很大。这会使得文本展示空间变得更不可控，导致适配风险增大。认知包容性认知包容性，是指设计时需要考虑到不同文化背景下用户，对于某些元素、符号的认知是否相通。例如，当产品出现需要单独使用图标来指代信息的情况时，需尽量保证选用的图标具有全球性的大众共识，并且不能产生歧义。当然，若非极端情况（如文字信息实在是兼容不下），大部分场景下还是建议尽量将图标配合文字使用，帮助不同语言、不同互联网认知水平的用户更好地理解并使用产品。设计实施要点接下来，我们将从基础样式、通用布局、组件使用和图标设计四个维度，介绍多语言设计时需要关注的问题要点，以及相关的处理建议。1. 基础样式字阶在同样的文字参数下，不同语言字符的体积视觉感受确实会略有不同。但遇到体量较为复杂庞大的产品，建议使用同一套字阶应对，尽可能降低设计成本和维护成本。可以基于本平台用户群体量级最大的语言为准来制定。行高为了让文本能更弹性的适应场景需要，建议文字默认带有行高，不按区分单行/多行情况，也便于字体样式的统一管理。2. 通用布局关注文本空间预留文本空间普遍情况下，多语言场景下文本长度会大于中文场景的文本长度，因此需要考虑预留更多文本空间，以保证信息露出的有效性。过小的露出空间（如只能露出一个单词）会让用户无法理解内容，产生困惑。选择排列方式在多语言设计中，排列方式的选择，需要视功能的实际场景确定。两类信息在同一水平下横排，就必然会需要分割有限的宽度空间，这种情况下如果文本超长需要换行时，信息可能会显得略微杂乱；但它的好处在于节约纵向空间，在信息不长或者横行空间较大的情况下仍可以使用。如果使用上下排列的方式，文本容纳的空间也将会更大，换行时的显示效果会相对更为可控。当图标与文本内容组合出现时，同样也需要考虑合适的排列方式。竖排更强调图标，可以应用在强调状态的场景下，如结果页；而横排时图标与文本同级，图标做辅助的说明作用，更适用于轻提示、列表等场景。但值得注意的是，在多个图标及文字并存的场景下，多语言设计布局会更常用横排的方式来兼容信息，例如快捷操作，或是一些入口场景。横排更能保证文字说明的露出效率，以及提升样式布局的规整度，并且也更方便内容条目的拓展。关注段落空间注意最小段落宽度当页面的横行分割较多时，单个段落宽度就会变得较小。此时在某些语言场景下容易出现单个单词换行，甚至宽度都容纳不下一个极长的单词情况。因此，在多语言场景下，需要保证段落有一定的宽度容纳信息。移动端小屏幕建议谨慎使用一行三个的布局方式。“加大”有限宽度排版时也可以通过改变排列方式加大段落宽度，只是这样会导致同样高度下可展示的卡片数量变少，信息密度降低，因此需要根据实际情况取舍；如果实在改变不了段落宽度，还可以通过缩小字号或字间距，变相加大宽度，尽可能容纳多一些信息。关注信息对齐常用左对齐如前文所说，不同语言在书面上的最小单位不同，为了更好的兼容各种情况，建议多用左对齐。因为像英语这种按单词分界的语言，很难保证每行内容宽度一致，并且中文常用的两端对齐的效果也并不能适用。多语言场景段落的左对齐相比居中对齐，更能带给用户较好的阅读体验。同类信息水平对齐当一个卡片模块中有多类信息并存时，需要关注重要信息的水平对齐，确保阅读动线的流畅，便于用户获取信息。限定高度内使用下对齐下对齐的使用，能帮助设计师在不改变限定空间尺寸的情况下兼容延展更多信息。例如大图卡片空间内的文本。下对齐之所以优于上对齐，是因为它能避免信息不足时，可能会浮在空中的情况。特殊的“右对齐”——阿语规则阿拉伯语界面需要根据一定的规则来满足这个地区用户从右至左阅读的需求，但其中也存在一些并不需要用 RTL 做处理的信息。设计阶段如果想要快速产出 RTL 界面，也可以应用设计软件中一些现有的插件资源来实现。协作中也可以将阿语规则与开发同学优先对齐，由开发实现后，最后再进行细节的检查。3. 组件使用标签组件在中文场景下，标签通常精简为 2-4 字。而在英语这类带有分界的语言下，通常建议标签内最多不超过两个单词，或是使用数字和符号代替，如 20%off 或 -20% 代替 20 percent off。如果一些辅助描述信息，必须展示 3 个及以上单词才能说清楚，建议以文本形式放到界面中，而不是使用标签组件，以保证信息的可拓展性。例：亚马逊的标签一般情况下只会承载促销说明用的短词组。而对商品的更多信息补充，如配送范围、官方认证等，会直接用文本的形式补充在商品列表中。按钮组件竖排的按钮组合相比横排按钮，能兼容更多信息，因此在多语言产品下的使用会更为广泛。非均等场景的按钮组合，需要限制图标下文字长度；如果为可能分界的语言，建议使用单个单词，否则建议更换成其他按钮组合样式。通知栏组件在移动端的多语言产品中，通知栏组件一行容纳不下全部文案的情况非常常见。在文本超出通知栏宽度的情况下，需要灵活使用信息横向滚动、或是带操作的方式，允许用户进入下一级或配合气泡、弹窗，确保用户有办法能获知完整内容。选项卡组件当选项卡选项大于等于三个时，建议使用等间距的选项设计，而不是均分宽度的选项设计，以避免文案溢出，同时显示信息更均匀紧凑。4. 图标设计要点选用有大众共识的图形图形需要满足认知包容性原则，可以多去观察成熟的全球性产品，何时会使用到纯图标的场景，又使用了什么样的图标。基础图形如代表播放的三角形、代表喜欢的爱心型，都是比较具有大众共识的。另外一些本身模拟了常见物品的图标，也不容易出错，如代表录制的摄像机、代表收藏的标签等。避免出现特定指代元素在图标设计中，可能会使用到一些特定的信息作为装饰，如文字或者是符号。如果这些符号带有特定区域，如美元的货币符号、或是赞的汉字，在全球性多地区的产品图标中必须谨慎使用。建议用更通用的元素代替，避免产生歧义。RTL 场景图标规则RTL 场景中，并非所有图标都需要镜像。例如暗示真实物体时，图标可以保持一致。需要镜像的常为带有方向含义的图标。有个比较特殊的场景值得说明：在内容播放场景中，播放按钮以及进度指示反应的是播放的方向，因此保持从左至右即可；而音量值的大小控制，是需要镜像的。更详细的镜像规则可参考： https://material.io/design/usability/bidirectionality.html落地还原在完成设计输出后，如何与开发同学配合落地，尽量在真实文案上线前打好适配基础，也是设计师需要投入精力关注的。1. 设定规则设定适配规则在设计方案交付到开发时，需要预先明确一些规则与开发同学对齐。例如在非通栏的容器中，需要向开发同学示意信息的极限宽度和内边距，并且明确超出该范围的情况下，应直接省略、滚动显示、还是换行处理。如省略处理，需要检查省略号前展示的内容是否可被用户理解；如滚动显示处理，需要评估是否会过于吸引视线，打扰到用户；如换行处理，需要进一步明确极限行数，保证容器高度可控。在交付设计稿前，设计师应有意识地在设计稿中尽可能展示极限情况，再配合沟通，更能提升双方协作效率。设定字体应用规则为了呈现效果等合理性，字体选择也必须进行更详尽的适配考量。以下内容主要介绍在网页产品中，可以如何制定字体选择和应用的规则。我们在项目设计的过程中进行过一次对游戏类网站中字体应用的研究，总结出一些规律：即多数网页产品通常会定义风格化字体和基础字体两种。风格化字体以凸显品牌调性/美术个性为目标，常应用于标题；而基础字体则应用于所有正文或控件当中。基础字体的选择一般从网页默认可引用的字体库中选择即可。常用的系统字体有 Arial 或者 Helvetica 等。如果在字体声明中没有特别列举某些语言的字体，浏览器在识别时会自动转为提供对应语言的常用系统默认字体，如 Thonburi（泰语）、Geeza Pro（阿语），因此不需要针对所有语言逐一做字体声明。2. 验收效果走查适配效果在走查还原效果时，建议多运用代码走查，在 html 结构中增加文本或是增加模块，检验开发同学是否有进行响应适配情况的处理，处理效果是否符合预期。检查字体显示情况着重检查 font-family 的规则，是否符合不同语言下的效果预期。其中需要注意，如果需要特别声明中文字体，务必把英文基础字体最前置，以防中文字体包中的字母样式覆盖英语场景。另外也需要检查你选择的网页系统字体，在不同语言下实际应用中的效果是否符合预期。在阿拉伯语的网页下，tohoma 覆盖后文字会看起来特别粗，暂不能特别明确是否是字体问题，但因为存在风险，我们将不会选择 tahoma 为第一基础字体，也不会列进字体声明里。结语文字是一个产品触达用户的桥梁，而出海产品的多语言适配，需要产品、设计、开发、翻译同学多方通力配合，才能尽可能达成较好的效果，呈现给各地区用户使用。本文主要以设计师视角介绍了多语言适配设计过程中需关注的要点和建议，希望可以帮助设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。但多语言适配涉及到的细节之多，在某些场景下并非只有唯一解，需要整个团队一起，具体问题具体分析，才能打磨出更友好的出海产品。如对本文有任何问题建议，欢迎指正、补充或讨论~产品出海如何做好设计？来看这篇近6000字的总结国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。阅读文章 > 欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/multi-language-design-guide
英文 纤细 海报 大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。我们先来看一组海报：不难发现，这些海报中都有一个共同点，就是使用了纤细优雅的手写英文字体作为装饰元素，这其实是海报设计中一个简单却非常好用的手法，可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。今天我们就一起探索一下用纤细的手写英文字体作为装饰的优点，以及使用这种元素作为装饰时需要注意的地方，最还会向大家分享 10 款能够免费商用的纤细款手写英文字体。为什么用纤细的手写英文字体作为装饰？1）手写字体的起伏变化能打破横平竖直排版带来的沉闷感，丰富层次，甚至成为画面中的点睛之笔；2）手写字体灵活的特性可以很自然地平衡版式，纤细的线条很适合填补画面的空白部分但又不会显得突兀：3）纤细的手写字体天然带有的人文质感，起伏飘逸的线条显得自由随性，很适合烘托文艺、清新、典雅的氛围，这也是为什么很多文艺青春或者时尚个性类的海报都会选择它作为海报中的装饰元素：应用的技巧通过上面的分析我们已经了解到用纤细的手写英文体作为装饰可以烘托画面氛围、平衡版式，并打破画满的呆板沉闷，使海报层次丰富有亮点。如果想自己在海报设计的时候运用纤细的手写英文字体，我们一定要想清楚用它的原因，并通过一些技巧让手写体更好的发挥它的作用。适合的主题在上面的分析中我们已经提到过，这种装饰元素合适文艺、青春、典雅的风格，比如文艺清新的音乐、电影、杂志、综艺节目等；也适合有关女性的主题比如婚庆、美妆、女性服饰等，我们可以在日常收集灵感时多多探索。涉及到比较正式严肃的主题，或者想体现有力量、可信任的感觉时，这种纤细的手写体就不太适合了。颜色的选择简单来说，纤细的手写英文体作为装饰时颜色的选择可以概括为 2 种：一是高明度高饱和度的颜色，比如明黄色，极光绿、亮粉色等。这种适合整体比较暗沉或者单调的画面，用鲜艳的颜色可以调动画面氛围，如果颜色与整体色调形成对比，就更能形成视觉亮点。二是白色或者降低了透明度的白色。这时候海报的主体都比较完整，添加符合主题调性的装饰可以丰富画面层次，避免画面过于空洞。10 款高质量免费可商用英文手写字体下面为大家推荐 10 款高质量的英文手写字体，都是免费可商用的，下载链接见附件哦~the monseDattebayoVia VallenJacelinTomato SoupCervanttisSophia Christie ScriptSummer PiecesEnglandReading以上就是今天的分享，如果觉得对你设计有帮助的话记得点赞收藏~之后我会为大家带来更多相关的设计干货~更多海报设计干货知识：新手如何做好海报配色？我总结了这5个即学即会的方法！配色是海报设计的重点之一。阅读文章 > 新手如何做好海报设计？试试网格这个神器！大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 10款纤细优雅的英文手写字体652KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/thin-cursive
操作 按钮 内容 上期我们小聊了一下弹窗的定义与使用的常见场景，本期我们来聊点实际的：弹窗的内容布局，本来本期想把常见的两种弹窗问题：弹窗的从属关系（弹窗叠弹窗）、弹窗的流程关系（连续弹窗）都讲一遍，但写完基本布局以后发现字数超了，所以弹窗这个话题从 2 期变成 3 期了。用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 弹窗的基本布局以车为例，假如我们把“车”这种物体身上的零部件分成两种：一种叫基本零件、另一种叫附件。基本零件（比如发动机）是所有车都必须要有的、没有它车就开不起来，甚至就不能叫车。而附件（比如座椅、天窗），这些东西可有可无，每一样车的配置可能都不太一样。比如车装上铲子就是铲车，装上车箱就是货车。在做规范时，做控件的逻辑和组装车是很类似的：控件的内容布局也有基本零件和附件。基本零件的差异决定了不同弹窗类型（这种差异是比较大的、场景性的差异）；而附件的差异则决定了同类型弹窗的扩展性（也就是你定义的这类型弹窗，极限状态下最多能支撑什么样的场景）。按上一篇文章从交互的角度讲讲弹窗（上）来讲，触达、信息展示、操作弹窗各自的基本零件可以画成这样：用超多案例，从3个方面帮你掌握PC端弹窗设计（上）不知道大家对交互设计中的控件持一个什么样的态度，反正我自己入行的时候其实是挺“怕”这玩意的。阅读文章 > 也没多难画成这样了以后我们可以发现，就算是支持复杂场景的大弹窗，其实骨架结构也是简单的。以 JIRA 这个操作弹窗为例：真的很爱大弹窗接下来我们就按照弹窗的基本框架布局来一项项地拆解弹窗的基本零件与常见附件，复杂问题展开讲，简单问题就简单过：相对简单的：容器、标题、关闭方式比较复杂的：内容区、主操作按钮附件：渐进展示弹窗的容器容器也就是弹窗尺寸，虽然在做规范的时候弹窗尺寸一般是 UI 去定义的，但作为交互我们也需要思考一些事情：弹窗的尺寸需要和内容适配。正常情况下，弹窗应该是不需要纵向滚动的（当然横向滚动就更应该避免了）。假如你的弹窗尺寸需要滚动一下才能展示全信息，应该先考虑它是不是过小。大弹窗和全页面、不同尺寸弹窗之间，应该有明确的界限。交互需要去界定什么样的信息量是弹窗容纳的极限，超过这个“极限”那么弹窗这种控件就无法承载、需要使用其他的展示形式。弹窗的标题弹窗必有标题，能不能写清楚弹窗标题，算是区分合格交互设计师与还差点意思的交互设计师的试金石。其实这事情说复杂也不复杂，只有 2 个事情需要注意：（1）假如这个弹窗是由用户主动触发的，那么弹窗标题应该与用户触发弹窗的操作按钮同名，或者至少有相同的关键字。此时弹窗是用户操作后的反馈，用户需要通过弹窗的标题来确认自己是否进入了正确的模块、进行了正确的操作。（2）弹窗标题与内容区说明文字要各有分工。一般来讲，弹窗标题简单陈述问题、询问行为或者作出行为建议。内容区的说明文字展开来解释出现问题的原因，以及操作后的后果。当然文案，或者更时髦的说法：UX writing，是一门很大的学问，甚至可以支撑起一个职位。所以这里讲的两条规则只是最为基础的原则，不能涵盖所有的文案要求（比如你要是做国际化，那么标题和正文的首字母大小写、加句号不加句号都需要考虑）。另外，B 端的文案规范有时候也无法推广向 C 端营销类设计，因此本篇暂时不做更多讨论。这篇15万人阅读的文章可以帮你了解B端文案：阿里设计师出品！B端产品文案指南说明： 本文主要面向 B 类业务、简体中文语境，提供实操性指南； 行业内约定俗成的常用语建议沿用，可以不依照这里的建议； 本文所指的文案不包含营销推广类文案。阅读文章 > 弹窗的关闭方式作为一个非常底层的控件，弹窗（或者说窗体）应该兼顾大部分用户的不同习惯，来保持整个系统有比较好的可用性。因此，建议在右上角添加“x”作为关闭操作性弹窗的最短路径，并且佐以键控、点击遮罩等多种关闭方式；除非要求用户明确表态（比如要求同意协议）。当然，更便捷的关闭方式代表着更多的误触，如何平衡可用性和误触，就要根据具体场景具体分析了。内容区与主操作按钮这两个东西不能分开来讲，它们是弹窗设计里最复杂、最经常出体验问题的部分。理解了内容区与主操作的关系，才能真正理解弹窗的设计。1. 内容区与操作的层级关系做 B 端产品时，设计系统的稳定是非常重要的一件事。构成设计系统稳定的重要因素之一，就是控件的操作模式的稳定和一致性。这个部分属于设计中比较难以量化验证的地方，就算做得很好，也可能并不能从业务数据上找到特别正向的反馈；但要是做得不好，整个设计系统（至少是交互系统）的逻辑会很快地被复杂的业务摧毁崩溃。设计系统一旦不能自圆其说，那就没有系统可言了。因此为了避免这种情况，做交互还是需要定义一下控件的基本层级关系和逻辑。弹窗的底栏层级高于内容区：底部操作栏上的主操作按钮承载着全局操作，它的行为对弹窗整体生效、可能会导致弹窗关闭；而内容区的操作只对内容区生效，并不会导致弹窗关闭。这意味着做交互的时候，需要在样式上为全局按钮、内容区按钮作出区分，以免用户产生困惑。比如说假如我们是一个中学老师，现在正在新增一个班级列表，班级列表里有所有同学的名字：到此为止内容区与操作的关系都还是清晰的，但一旦我们为弹窗加入导航控件——tab，那有些人可能就搞不清楚了。首先我们在做弹窗的时候，要尽量降低弹窗的层级结构和内容复杂度，尽量把用户完成任务的关键信息一开始就展示出来，避免用户在弹窗里四处探索。但假如说因为任务的因素非得在弹窗上加 tab 的话，还是需要记住：属于弹窗内容区的 tab 的层级低于弹窗操作区。在 windows/mac 的应用程序中，这个问题可以被官方规范提供的 group box 组件解决——可以理解为把内容区从弹窗上“框”了起来，在视觉上创造出内容区和操作按钮之间的层级差异。但是由于当前互联网整体的设计趋势倾向于减少层级、扁平化，所以在日常做设计时往往不再能使用这种视觉上的处理方式，只能做交互的人自己心里清楚。还是以新增班级为例，假如存在一个按钮让我们按一下就能上传班级列表的 excel，但是 excel 里有些名字可以读取出来，有些名字包含特殊符号（比如，、…），需要人为修改一下，那么这个弹窗也许就会这么做：这个时候跳转到到“读取失败”tab，底部栏的主按钮仍然存在——即使你可以给表单设置一些提交限制，要求读取失败的项目没有被手动修改的时候，不允许点击“新增”按钮。反过来说，正因为弹窗的操作区层级比内容区高，并且 tab 是一个导航控件而非选择控件，因此 tab+弹窗的潜台词是“点击操作按钮后，所有 tab 中的内容都会被提交，即使有些内容当前没有展示出来”，而不是“只有选中的 tab 会生效”。因此，假如你需要让用户在弹窗上作出选择，就不要使用 tab 等导航控件，而可以选择单选框/多选框这种典型的选择控件（或者苹果的 segemented control 这样有点像导航的选择器）。比如说我们在新增班级弹窗上给用户提供了两个功能：手动新增或批量新增两者的内容区样式不一样，那么画出来则是：值得注意的是，这个层级关系只能应用在弹窗上，在网页全页面上往往存在层级高于操作按钮的全局导航。2. 内容区与操作的映射关系有的时候，弹窗会提供多种操作选项，并且每种操作选项都会有大段的说明文字。还是拿学校老师新增班级做例子：校园网新上线了一个功能叫“智能新增班级”，这个选项可以根据你的身份，自动检测你带的学生并填充到表格里，你只需要把他们对应的班级标注出来就好了，不需要一个个手动填写学生姓名，非常方便，所以推荐老师使用。但由于系统还不是很完善，因此只能检测到高中部和小学部的学生，带初中部学生的老师，还是需要手动新增班级。假如非要用弹窗来做新建方式的选择入口，并且还按照我们之前的弹窗基本结构来处理，那么有些人可能会做成：这个案例和诺曼《设计心理学》里那个炉灶与旋钮的案例不谋而合。这样设计的劣势是，用户从读完内容区的文字，到去操作区进行行为，需要在心里先做一个判断——我是高中小学部还是初中部的老师？然后再做一个映射——高中/小学部点这个“智能新增”、初中部点这个“手动新增”。一来一去反应时间就变长了、出错概率也更高。因此，我们可以在这个案例上增强文案与选择器的亲密性，让用户做出判断的瞬间就可以完成操作，无需再做一次映射：甚至，假如这个任务以效率为第一标准并且规范定义的比较宽松，我们还可以省略“下一步”按钮，直接将点击生效的热区放置在内容区上：同理，优化操作按钮的文案也能帮助用户消化内容区与操作按钮之间的映射关系。比如说这种再确认弹窗：习惯上来讲我们会将一个弹窗的积极操作（确认、提交、更改…）修改为与弹窗标题或内容区联系性更强、更符合场景的说法，比如说打印机的“打印”弹窗，操作按钮写作“打印”而不写作“确认”。这样做的好处也是帮助用户减少反应的时间。但另一方面，弹窗的消极操作（一般是取消或退出，注意消极/退出操作不等于破坏性操作，比如删除）的文案是不会修改的。这样做是为了让用户无论在什么场景下，都能感知到“取消”是一个无害的、不会造成严重后果的安全退出方式（和弹窗右上角的 x 一样）。3. 操作按钮与附件理想状态下操作按钮只有 2 个，但实际情况是多种多样的，所以有时候操作区也可能有超过 2 个按钮。我个人把 3 个操作按钮作为弹窗操作区的上限，假如超过 3 个按钮，那么就应该思考是不是去掉操作区，直接把按钮放在内容区里，以便帮助用户合理地判断自己应该按哪个按钮。当存在 3 个按钮时，按钮的摆放规则可以根据自己平台的特性决定，并没有通行的规则（但一般会将破坏性按钮放在主操作按钮的对侧）。假如弄不清楚用户的主要诉求，不用在多个按钮中非要选一个推荐操作。最常见的弹窗附件是“不再提示”按钮，选中后提交弹窗，则这个弹窗就在用户或者设备维度不再出现了。这个操作常规上用 checkbox 实现，并且放在弹窗内容区/操作区都可以接受。需要额外注意的有这么几点：（1）对于触达弹窗来说，点击“知道了”“立即开通”都能算是对弹窗的一种表态，因此选中“不再提示”以后，点击任何一个主要操作弹窗都应该不再展示。而相比之下，选中“不再提示”后又点击“x”就意味比较含糊了，考虑到一般“不再提示”选框都不做默认选中，因此这里选中很有可能是用户有强意愿，所以点“x”弹窗也不展示也说得过去。但对于操作弹窗来说，“取消”是全局性的消极操作。在任何情况下，用户点击“取消”的含义都是“放弃弹窗上的一切已完成操作并且退出弹窗”，所以这里只要用户点击了“取消”，无论是否选中“不再提示”，都应该视作选择未生效。虽然这样做在具体场景内有违背用户预期的可能，但为了全局交互规则的一致性，这样是更合理的。（2）有些人比较倾向于把“不再提示”做成操作按钮。我个人其实不太理解这种做法。假如这个弹窗具有用户价值，那么就持续弹好了，没必要设置“只弹一次”的限制；假如这个弹窗纯粹是商业化行为，那按钮文案写成“我知道了”，直接修改按钮的弹出逻辑即可，也没必要告诉用户错过这次机会以后就不提示了。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/popup-design-2
用户 位置 信息 我们比较喜欢做新的功能（或产品），因为可以在较短的时间内看到效果，更具挑战性，仿佛也更能体现一个人的能力。尤其在现在这个人人提倡敏捷开发的时代，大家都在拼命的往前赶，生怕自己落后于竞争对手，被竞争对手新的功能优先抢占了市场，所以经常忽略了现有功能的用户体验。如果开发完一个功能，就把它丢在一边，浪费了人力、财力不说，还有可能因为不好的用户体验，不仅没能吸引更多的新用户，还会造成存量用户的流失，那真是得不偿失啊。既然提升现有功能的体验那么重要，我们又该怎么优化现有功能、提升用户体验呢？我总结了一个方法，提升用户体验三步曲，方法仅供大家参考，如果不合理之处，请大家予以指正。该三步曲的内容为：我现在在哪？即现有功能存在哪些问题？我要去哪？即针对存在的问题设定目标，也就是我们想要达到怎样的效果？怎么去？即解决方案是什么？下面，我将通过一个实际案例来简单介绍下，优化现有功能、提升用户体验的三步曲。我现在在哪？为什么要先明确我现在在哪，明确产品当前存在的问题呢？这就好比医生给病人看病，只有明确了病人的症结所在，才能对症下药。我们一起来看下下面这个案例。现在的 app 一般都需要获取用户的位置权限，通过用户的定位进行个性化的推荐，提供精准的服务，给用户带来了良好的体验。我自己也习惯在使用 app 的时候，默认允许 app 获取我手机的位置权限，这样就可以根据自己的位置筛选需要的信息了，非常之高效。可是，这么实用的一个定位功能，如果做的不好，很可能会遭到用户的吐槽、投诉，甚至是用户的流失。现在有一个线上预约洗车的功能，用户可以先在线选择洗车地点、洗车时间，填写其他必要的信息，完成预约操作。预约成功后，就可以在预约时间至该洗车店洗车，这样可以大大节省用户到店等待的时间。既然需要线上选择洗车店，那么就需要有个“附近洗车店”的查看功能，该功能可以根据用户的定位由近到远展示附近的洗车店（这里主要介绍定位问题，暂不考虑用户手动搜索洗车店等情况），所以需要先获取用户的当前定位，才能准确的显示附近的洗车店信息。可是，用户虽然开启了 app 获取手机定位的权限，却未开启手机的 GPS 定位，此时，该页面因为获取不到用户的位置信息，一直处于 Loading 状态，直到 1 分钟后，才弹出“获取位置失败，请检查您的获取位置权限是否开启”的提示信息。这个功能存在的问题，主要有以下 3 点：响应慢，在获取不到用户的位置信息时，在 Loading 状态停留了 1 分钟，这个时间也太长了。有研究表明，在=1s 的时间显示反馈结果，用户会明显地感受到延时；若是>10s 以上，用户极有可能直接转身离开了。而在移动端，时间的标准还会更短，通常的说法是“3s 等待”，即在移动端，若超过 3s，用户就会转身离开了。提示信息不明确，该提示说让用户检查获取位置权限是否开启，可是用户明明已经开启了 app 获取手机定位的权限。操作路径较长，没有提供用户直达开启位置信息的入口，用户需要先离开 app，再去打开位置信息开关，最后再返回到 app 进行操作。我要去哪？明确了存在的问题，那么我们的目标也就清晰了。针对上述 3 个问题，我们设定的目标是：快速响应，响应时间
用户 首页 差异 我最近看了很多大厂/名企的改版复盘后，我发现一个很常用也很好用的设计思路，那就是：用户分层国内大厂的产品大多综合性越来越强，例如卖菜的打车 APP、做直播的音乐 APP、做家政的外卖 APP……为了满足用户需求的较大差异，页面设计不得不变得越来越臃肿。如果设计得好，产品看起来就会像便利店一样，感觉便利快捷。如果设计不好，产品看起来就会像杂货铺一样，整个乱七八糟；由于用户需求差异过大，如果只用一套界面作为首页，难度极高，也很可能导致所有用户都不满意。为了确保几类主流用户的体验，很多产品都会在设计上进行用户分层。简单来说，就是给不同的用户展示不同的页面。这个概念一点也不新，甚至对于信息型产品来说，给用户推荐不同的内容是最基本的。例如同样是视频网站用户，喜欢游戏的和喜欢追星的，看到的内容差异就很大。但是这种内容差异化，属于用户分层运营，并不需要多套设计方案，只要往一个页面塞不同内容就行了。今天我们要讲的，是用户分层设计，必须提供多套设计方案才行。用户分层设计不同于用户分层运营如果只是内容需求不同，用户分层运营就可以了，并不需要设计多套页面。但如果是用户习惯和常用功能上的差异，那就很难用同一套页面框架来应对了。举个例子，喜马拉雅会员购买页，已购和未购状态的就有差异。对于未购用户来说，这个页面主要是展示运营活动，吸引用户下单。而对于已购用户来说，这个页面主要是展示会员服务，并提醒用户续约。这两种状态，如果做简单点也可以合并成一套框架，把文案、按钮之类的换一换也行。如果做复杂了，有时会感觉比较难合并，合并后维护成本反而更高，得出两套设计方案。不同类型的产品对于用户分层设计，有不同的处理方式，大致可以分成以下三类：整体分层局部分层自主选择接下来我就用具体的案例，给大家讲一讲这三种用户分层设计方式：整体分层58 这个产品，有人说是找工作的，有人说是找房子的，还有人说是找家政维修的……以上这种差异，其实也还是可以通过用户分层运营来解决。但是 58 真正的复杂性在于，用户使用习惯的差异：预装型用户是被动地发现自己手机上有这么一个 APP，并不了解功能，需要首页能够快速展示其功能价值，并吸引留住用户。服务型用户把这个 APP 当功能型产品使用，打开时通常有明确的目的，例如找家政服务的。内容型用户把这个 APP 当信息型产品用，打开时目的不是特别明确，大部分时间在浏览查看，例如求职看岗位。58 自己的设计团队也意识到了用户差异的问题，于是设计了三套首页。虽然三套首页都用一些通用组件，底部也都是瀑布流，但是布局和模块都有差异。仔细看看，你会发现预装型首页模块更加丰富，能够更多地展示功能价值，吸引用户尝试使用。服务型首页功能模块更加精简，重点更突出，使用起来更加快捷方便。内容型首页强调信息的展示和社群入口，功能入口反而是露出最少的。局部分层作为投资理财类产品，蛋卷基金对于用户分层做得更细致。购买基金的用户之间，最大的差异是未购买过的用户和已购买过的用户，前者更需要学习引导，后者更需要了解行情。虽然这两大类里面，也还是有很多小类别，但这些是有办法用页面内的模块设计解决的。所以最终蛋卷基金只在信息展示区块进行用户分层设计，并没有做整体差异化。改版上线效果，也是很不错。自主选择前面说的案例，都可以根据渠道来源和使用记录来进行对用户进行自动归类，并进行差异化设计。但有些时候，用户的区别很难自动判断，这时就需要让用户自己选择了。例如智联招聘 APP，进去后就会让你选择身份，进去后的流程和界面完全不同。起点阅读 APP 也允许用户自主切换页面样式，提供了图墙和列表两种形式来展示信息。他们之所以不提供一个统一的方式，就是因为数据发现，这两种模式的数据表现一半一半。既然用户各有喜好难以找到好的统一方式，就干脆都放出来，让大家自主选择。总结大部分情况下，我们都是希望方案越少越好，所以会尽量在首页上满足各类人群的需求。但是对于一些用户群明显较为复杂的产品，进行用户分层设计，反而比统一方案更简单。如果真的遇到反复讨论都举棋不定的情况，那就可以考虑考虑使用用户分层设计了。想成为高薪的增长设计师，先学会用户分层！用户分层是用户运营中常见的一个概念，简单理解就是指将用户分为不同类型，并根据不同用户提供差异化的内容和服务。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/user-stratification-design
蝙蝠 超人 这辆 相比于诺兰前传三部曲的「写实感」，扎克·施耐德的这3部 DC 电影似乎排名并没有那么靠前，甚至口碑也没有那么的神，但是在美术风格、视觉设计上，口碑是无可撼动的。在扎导的这三部曲当中，仅蝙蝠侠的载具设计而言，从素质到数量上，并不逊色于诺兰三部曲。《蝙蝠侠》电影设计美学的源头，竟然都始于蝙蝠战车！你也许看过很多蝙蝠侠的故事，漫画，剧集，电影，在所有的故事当中，蝙蝠侠这个角色的出现，都会从那个小巷开始：一次莽撞的抢劫，手枪枪响，珍珠项链散落满地，死亡，尖叫，惊恐，失神，然后一个名为蝙蝠侠的角色由此诞生。阅读文章 > 在上一篇当中，我以目前有限的资料梳理了一下《新蝙蝠侠》中的蝙蝠车的诞生历程，这一篇则梳理一下扎导的这辆蝙蝠车的设计过程。角色应有的厚度和诺兰蝙蝠侠系列不同，扎克施耐德的这个系列的起点并非是蝙蝠侠，而是超人。对于拥有接近一个世纪故事积淀、多次重启、反复演绎过的角色，通常是复杂的，也理应有厚度的，超人如此，蝙蝠侠也是如此。扎克施耐德在最初筹备《超人：钢铁之躯》的时候，曾经花费了大量的时间来琢磨和细化整个氪星文明的特质，从文化、历史、礼仪，一直细化到语言、文字和具体的语法。他邀请英属哥伦比亚大学的语言学教授 Christine Schreyer ，创造出了这个全新的兼顾视觉美感和可用性的语言，而这个版本的语言的完成度之高令人惊叹。这门语言在整部电影当中很难被注意到，但是它既是超人的魂，也是超人的骨。从视觉上来说，它和这版超人的母星氪星的整个视觉语言是极为贴合的：这种被称为「氪星毁灭主义」的风格呈现出一种带有骨骼有机质和死亡气息的独特风格，金属和骨骼质的元素融合为一，这种特质和这种氪星文简直是天作之合：在超人胸口的S型 LOGO 上，扎克施耐德 用氪星语的暗纹锈上一句源自于《千面英雄》的话：「在本以为发现可憎之物的地方，我们看到了神；在我们以为会杀死他人的地方，我们杀死了自己；当我们去远方旅行时，我们回归了自己存在的内核；当我们觉得孤身一人时，我们与整个世界同在。——《千面英雄》」关于《千面英雄》这本书的意义，以及这段话和超人这个角色、经历之间的映射关系，在这里就不作分析，但是这种远超「人物小传」的细致设计和构建，是扎克施耐德一直以来构建角色底色的重要工作，而这些「底色」最终以种种方式赋予了角色以厚度。所以，在第二部电影，也就是《蝙蝠侠大战超人：正义黎明》（为方便，后面这部电影就简称 BvS 了）中，这种细致的设计方式策略延续了下来。恐惧所塑造的载具如果说，「氪星毁灭主义」是扎导版超人的底色，那么蝙蝠车就是他手底下蝙蝠侠外化的形体。「（在开始筹备电影的时候）我说我们先得需要一辆蝙蝠车，对吧？即使你再傻，先给蝙蝠侠准备一辆蝙蝠车也是有必要的，对吧？这似乎是你应该做的第一件事。」在TBS 的采访中，扎克施耐德被问及蝙蝠车时，下意识说出了这句话。在扎导的 DCEU 中，大本所饰演的蝙蝠侠已经显而易见地进入中年，韦恩集团也已然是被他完全掌控的庞大企业，从时间阶段上来说，这明显比起诺兰蝙蝠侠系列的时间要晚得多。这种人生阶段上的差异，体现在很多方面，比如气质上更加沉稳老到，他可以极为坦然地面对小闪的疑问说出类似「我的超能力就是超有钱」这样的金句。相比于《新蝙蝠侠》中的新手蝙蝠侠，大本所饰演的这个角色已经在哥谭和各种普通的、有超能力的罪犯周旋了数十年，这使得他的蝙蝠车在逻辑上，要比诺兰版那个基于军用车辆改造而来的 Tumbler 更为成熟。诺兰版蝙蝠车 Tumbler从角色困境上来说，扎导版的蝙蝠侠和诺兰版蝙蝠侠有着根本的不同，后者面对的是哥谭的「普通罪犯」，前者在 BvS 中，假想敌是「人间之神」超人，蝙蝠侠显然不会将自身的命运交由一个「准量产」的载具（Tumbler），而砸钱使用最顶尖的科技来打造一辆出力强劲、足以应对「人间之神」的机械怪物是符合情况、设定以及他性格的合理选择。有意思的地方在于，蝙蝠侠面对强敌的「焦虑感」和「恐惧感」，在 BvS 中以梦境的方式呈现出来，而这暗合《不义联盟》的故事线，使得角色冲突进一步得到了强化。那种梦魇般的绝望废土气息最后也反映到这辆如同坦克般的蝙蝠车上，它没有有机的线条，也没有试图变得「帅气高级」，而是在连绵的恐惧折磨下，显得颓废、狰狞而暴力，厚重的装甲上顶着固定炮台，它多了以往所有的蝙蝠车都缺乏的厚重感，和掩盖不住的「输出」的欲望。作为制片人的扎导妻子黛博拉·施耐德，在接受 Business Insider 的采访时说：「我们不希望它看起来干净整洁，这是一辆无关美学、追求实用的坦克，它看起来更加军事化，也饱经风霜。」源自角色和故事线的设定，最终反馈到了设计上。回溯经典的构思终于要说到设计师了。法国设计师 Patrick Tatopoulos 在扎克施耐德的这部电影制作过程中，举足轻重。他不仅要兼顾设计，还需要监督落地制作相关的部分。当扎导第一次和 Patrick 探讨蝙蝠车的设计的时候，他反复强调的是「当超人遭遇蝙蝠侠」这种情形，15 分钟之后，俩人走进咖啡馆，而有着概念设计师和生物设计师背景 Patrick 也开始拿起笔开始绘制他构想中的蝙蝠车——风格更加哥特，造型更加经典，甚至具有生物般的升降结构。同时，诺兰版 Tumbler 所采用的高悬挂系统这一优秀设计，也被 Patrick 所吸收了过来。但是为了区别于前者的「现代感」，Patrick 找来了概念设计师 Ed Natibidad ，在更加古早的蝙蝠侠漫画当中，汲取设计元素，开始将粗糙的概念落地实施为更为细致的设计图。不同的概念和参考来源，最终在 Ed Natividad 的笔下逐渐源源不断地延展出细节多样风格丰富的概念图：其中也包含了 Patrick 所喜爱的带有升降机构的版本：在长达半年多时间的概念设计过程中，蝙蝠车的设计构思不断地迭代、筛选，慢慢成型。它的身上既有前辈 Tumbler 的高悬挂系统，也有更为军事化的武器系统，极具攻击力的炮塔在 Patrick 的要求下被直接置于车体的最前端。在打磨概念设计的过程中，其实还有武器系统更加丧心病狂的版本：于是，从早年的电影、漫画汲取灵感并打磨修改后的蝙蝠车的造型就这么出来的：「洗不干净」的坐驾造型确定了，紧接着就是要把这辆车给造出来。这辆车最终被「制造」出来，花了超过5个月时间，主要是靠设计师 Patrick Tatopoulos 和来自洛杉矶 Vehicle FX 的 Dennis McCarthy 来完成的。只是，考虑到实际拍摄过程中不同的需求，这辆车其实是由三辆车「组成」的，第一辆车有着「完整版的内饰」，适合进行车内的静态拍摄，尤其是处理特写：这些内部结构的构思，其实也是基于设计师 Ed Natividad 的概念设计：另一辆车则更像是精简版的道奇 Ram Duallys，这辆车在片场卯足了劲跑好无问题，不过造型需要通过后期进行重建，电影中很多运动中的场景都是靠这辆「替身蝙蝠车」来完成的。第三辆车则是三者中「最有价值的蝙蝠车」，它是真正意义上1：1 的蝙蝠车，是真正意义上能开的车，同时在造型细节上也抵达了「传奇级」道具的水准：「……你能在他身上感知到时间的流逝……而这也是Zack最为天才的地方，他希望让这辆车看起来足够沧桑——看起来不像是花一个周末能洗出来的样子。」Patrick 在接受采访的时候，是这么描述这辆车的「做旧」效果。「在片场（面对这辆车）我唯一被允许做的操作就是让它停靠在一边……我想开着它来完成各种撞击和发射武器的操作（但是从未被允许过），这辆车太贵了。」饰演蝙蝠侠的大本在片场的记录中，哀怨十足地写着这么一行字。在上面这个经典场景当中，超人需要站在蝙蝠车上与蝙蝠侠对峙，而实际上，当亨利卡维尔所饰演的超人想要站上去的时候，扎导在片场下意识喊道：「停！没有人可以站到那个上面！」此时，亨利卡维尔已经抬腿，周围所有所有的工作人员都开始伸手制止，直到他们使用泡沫等材料重新做了填充和覆盖之后，才允许亨利·卡维尔站上去。但是这辆车不止停留在实体化，它还延伸到了 UI 界面当中，这是数字化世代的蝙蝠侠所独享的福利。数字化的躯体BvS 中涉及到大量数字 UI 界面，无论是蝙蝠侠自己的个人电脑所用到的 Bat UI，还是拥有企业的 Lex Luthor 的 Lex OS，也都需要「拥有」足以反映角色气质的设计。而负责这一部分工作的，是曾参与过大量漫威系电影的 Perception 工作室，他们曾经在这些电影里设计出科幻感十足的 UI 和视觉效果，BvS 中这些 UI 界面全是他们搞定的。「这种设计的挑战也在于，如何让界面和他们的身份一致。」在 Perception 工作室的页面上，能够看到他们的设计出发点。「……由于蝙蝠侠在这个世界观之下，一直是技术最先进的一方，所以我们研究过军用航空电子设备，战斗机的 HUD 等系统的特征，并且以此为基础来构建蝙蝠侠自己蝙蝠车的系统界面。」这些科幻感十足、高度数据化和图形化的界面，将蝙蝠车另外的精致的一面重新呈现了出来，成为了爆炸场面之外，重要的补充，让蝙蝠车这个「角色」更为立体。接下来是 Tumbler其实 Patrick Tatopoulos 连同 Ed Natividad 一道，在后续的正义联盟电影中，还设计了更多的载具，比如 Batwing ：比如KnightCrawler：这些设计更有意思，不过超出了这次的话题范畴。接下来，是诺兰的蝙蝠侠前传中的 Tumbler。参考来源：https://www.ednatividad.com/http://kryptonian.info/news-feed.html/2013/07/22/interview-with-man-of-steel-linguist-christine-schreyer/https://www.experienceperception.com/batman-v-superman.htmlhttps://screenrant.com/batman-v-superman-snyder-batmobile-design/https://www.businessinsider.com/batman-v-superman-how-batmobile-was-built-2016-3https://www.techtimes.com/articles/146307/20160401/designer-patrick-tatopoulos-talks-bringing-the-batman-v-superman-batmobile-to-life.htmhttps://www.autoevolution.com/news/heres-how-patrick-tatopoulos-designed-the-batmobile-for-batman-v-superman-dawn-of-justice-98312.html本篇来源：优设网原文地址：https://www.uisdc.com/create-batmobile-2
神器 工具 栅格 大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器，收到很多小伙伴反馈说非常有帮助。既然是小伙伴们都喜欢的东西，自然是要有第二期的啦，今天就再为大家 5 款设计师必备的效率工具，它们分别是：尺寸高宽比换算神器！让黄金比例手到擒来电脑端专属，批量图片处理及漂白神器 PictureCleaner网页排版必备的栅格自动计算工具轻简方便的 Windows 录屏软件 Gif123接到单不会报价？快用这个私单报价神器废话不多说，一起来看看这些效率工具有哪些特点吧~上期回顾：这 4 款工具，让设计师工作效率提升 200%！大家好，我是和你们聊设计的花生~作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人，我经常会遇到这样一些工具——作为设计师的我们不会经常用到，但是要急用的时候又不太好找。阅读文章 > 尺寸高宽比换算神器网站地址： https://www.pslkzs.com/nav/wh.php我们在做设计时经常会处理不同的尺寸，4:3 或者 16:9 这样的比例换算起来还比较方便，但是如果是想做成黄金比例 1.618:1 或者白银比例 1.414：1，可能就比较麻烦了。有了这个换算网站就方便很多啦，上面预设了 16：9、4：3、黄金比例等常用的尺寸比例，输入长度就能自动得出宽度。网站还支持自定义比例，你可以按需求设定自己想要的比例然后进行换算。网站界面简洁明了，免费使用无需注册，经常需要换算尺寸的小伙伴可以收藏起来了~批量图片处理及漂白神器 PictureCleaner应用详情及下载网址： https://www.cnblogs.com/Charltsing/p/PictureCleaner.html无论是在工作中还是生活中，我们经常需要用手机拍摄备份一些文件图片，比如书本资料、表单、试卷等，但是拍照出来的图片效果并不好，经常会有一些阴影、黑点，对再次打印使用有很大的影响。如果是在手机上，向扫描全能王这些软件可以解决，但文件量很大而且都是在电脑上的怎么办呢？这个时候你就需要 PictureCleaner。PictureCleaner 是一款国产的免费图片软件，适用于 windows 系统，它的功能类似于手机上的扫描全能王，可以将拍摄的图片转为类似扫描的清晰图片，支持批量处理和保留色彩效果：软还可以自动四角检测，可以对拍歪的图片自动进行图像校正，并支持 A4、A5 的规格化输出：软件的安装包我帮大家下载了，链接在开头和文末都有，安装包里的有个「重要说明」的文档，大家可以仔细看一下，很多重要功能在里面都有说明。栅格自动计算工具网站地址： https://www.pslkzs.com/nav/column.phpUI 设计师都知道，在做 PC 端和移动端的界面设计时，运用栅格来规范设计是非常重要。栅格可以让界面设计更高效，避免对内容元素进行无序排版导致浪费时间；也可以让整体界面更加美观有逻辑，特别是对响应式布局的界面，使用栅格能让界面在不同设备上的呈现具有统一性。今天给大家推荐的这个网站可以计算栅格数值，输入总宽度后，调整槽宽、边距、列数就能自动得出单个列宽，并且结果会以可视化的方式呈现出来，感受会更加直观。如果一个界面要分成比较多列，使用这个工具可以大大节省设计师的时间。轻量录屏软件 Gif123软件详情及下载地址： https://gif123.aardio.com/对于设计师来说，Gif 是一个远比截图更有效的问题解决工具，毕竟很多操作步骤只有详细录下来了才能很好地说明情况或者解答别人的疑问。Gif123 是一款适用于 Windows 系统的录屏工具, 它的应用程序才 780KB，但是功能非常全面。界面简单操作便捷，录制完成后自动压缩优化 Gif 的体积，支持一键复制到微信/QQ/文章编辑器等界面，且兼容性非常好，不用担心会动图变静态图。相比其他的 Gif 软件，Gif123 可以省去人为压缩、导出、上传等步骤，且智能压缩后 Gif 的色彩及质量仍然比较理想。软件安装也已经下载好了，链接在开头和文末，需要的话可以自己下载~私单报价神器网站地址： https://www.pslkzs.com/price/index.php很多设计师都会选择在业余时间接一些私单，既是一个增加收入的途径，也能累积设计经验。对于刚刚开始接私单的设计师来说，如何报价是一个不小的考验，报高了怕接不到单，报低了又觉得对不起自己的付出。如果你也有这样的疑问，那今天这个网站就能给你很大的帮助：它能按照你的收入水平和项目所需的时间算出合理的报价，非常方便。网站的算法是根据 「预计工作时间」 「你当前的工作的日薪 」 1.5~2 倍这个公式来的，也是公认的比较合理的一个计算报价的方法。网站还附带一个全面的设计报价参考清单，如果你没有自己的报价经验，这份清单还有很有参考价值的，等做熟了有了经验就可以根据自己的实际情况来处理了。以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~我是花生，我们下期见。更多免费资源：担心被封号？试试这5款常用软件的免费平替！大家好我是花生。阅读文章 > 又一个抠图神器！完全免费无需注册超好用！当前图片去背工具都设计得相当简单易用，只要将图片上传，就能以机器自动辨识主体和背景范围，快速将背景移除，转为透明背景或是套用特定颜色，像是之前介绍过的 FocoClipping、Designify、BackgroundCut、AI Background Remover 等等去背服务都有类阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 PictureCleaner 和 Gif123 下载安装包21.45MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-softwar
栅格 系统 尺寸 前言随着硬件技术和互联网的不断发展，市面上出现了更多的设备尺寸，这就要求我们设计的产品要适配到更多尺寸，而通过栅格系统可以跨屏幕的适配到不同的设备，极大提升设计效率。主流的企业级系统中都应用了栅格系统，但只重应用轻解释，很多时候在直接面对结论和各家不同的名词时，一时不知道如何下手。本文旨在通过查漏补缺的形式讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。什么是栅格系统1. 栅格系统的由来栅格系统 “grid systems” 也称之为网格系统，是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。2. 栅格系统的定义网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。栅格系统的好处1. 加强设计一致从页面美观的角度，栅格可以有效地保证设计的一致性、让页面富有节奏和韵律。2. 增加决策效率对于较大的团队，在日常工作中常常需要多个设计师协作完成，这时候就需要一套统一的标准来对设计师进行约束和高效协同，通过栅格系统不仅可以提高设计师的决策效率，亦可以规范设计质量。3. 降低解释成本和前端伙伴进行协作的过程中，我们发现通过一致的有迹可循的设计规律，比如有规律的间距和布局可以极大的提高前端伙伴的开发效率。通过栅格系统可以加强协作效率，降低解释成本。如何在 B 端产品中创建栅格1. 选择画布尺寸目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的设备尺寸为 1920X1080，但并不意味着我们要以此为设计尺寸。我们认为，如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。作为 B 端设计师，我们的受众相对比较固定，比如企业内部员工会统一派发笔记本；学校等事业单位也会统一采买设备。通常我们可以对内部设备进行调研，选择现有用户使用较多的设备进行设计。这样可以更加接近用户真实的使用场景。对于 SaaS 类产品而言，其用户设备比较广泛，我们也可以选择 Ant Design 推荐的设计尺寸 1440X900（近些年来随着屏幕尺寸的增加，Ant Design 也将设计尺寸改为 1440X900，同时主字号调整为 14PX ）。我们根据公司内部的调研选择了 1280X720 为基础设计尺寸，同时选择 12PX 的字体 ，最接近用户的真实使用场景。2. 确定栅格区域我们将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。3. 网格设置我们发现现在主流的网格单元的尺寸为 8 PX， 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4PX 作为最小的网格单位。4. 栅格计算PC 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。12 栅格将页面分为 12 份，在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。24 栅格将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。columncolumn（小列）以 24 栅格为例就有 24 个 column，它可以随着屏幕尺寸的不同，在一定的范围内进行动态变化。guttergutter（水渠）以 24 栅格为例就有 23 个 gutter，水渠的大小我们设置为固定数值 16PX，这里需要注意 gutter 值可以根据项目需要的视觉节奏而定。栅格大小栅格大小为 24 个 column + 23 个 gutter，以 1280X720 PX 的设计尺寸为例，左侧的导航固定尺寸为 208PX，我们减去 2 个页边距 2 X( 16X2 ）PX，减去 23 个 gutter （23X16) PX，再除以 24，最后我们得到了一个 column 的宽度为 26PX。小困惑：这个时候你可能会发现这个数字除不尽，个人建议这块有两个解决方案，1. 建议这边用刚才算出来的数字取一个整数去倒推我们的唯一变量左边导航的大小。2. 栅格的目的是为了让我们的设计更加合理便于和前端合作，直接取整数个人来说是可以接受的。注意事项1. 尽量保证偶数思维尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。2. 字段元素的起始点必须落在 column 上字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。3. 可以让父级容器对齐栅格，子元素可以不落在栅格上很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。栅格的应用关于栅格的适配和应用是通过对栅格制定不同的响应策略，来更好的支持和适配业务场景。通常有三种适配策略：固定栅格、动态栅格和混合栅格。1. 固定栅格固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。以内容区域展示卡片为例，首先我们会根据主流屏幕尺寸和业务呈现需求，确定设置几个断点值，随着设备尺寸的变化，展示卡片数量也随之变化，但卡片的尺寸是固定不变的。固定栅格很明确的缺点是它在未到达断点的临界值时，页面会出现空白，视觉呈现上，可能会显得不协调。比较常见的应用是对于筛选模块的响应，以拼多多商户后台为例，将输入框设定为固定大小，然后设置 1612px 为断点值，当小于设备屏幕宽度小于 1612px 时则显示 3 列输入框，当屏幕宽度大于 1612px 时则显示 4 列输入框。（因为业务需求拼多多屏幕设置最小值，即小于固定尺寸出现横线滚动条，所以我们能看到拼多多的筛选模块有 3 – 4 列输入框）。拼多多固定栅格的适配展示2. 流动栅格流动栅格和固定栅格的区别是它的元素大小会发生变化。以内容区域展示卡片为例，随着设备屏幕的大小变化，展示卡片数量也随之变化，但在未到达下一个断点之前，卡片会通过百分比缩放填充屏幕。流动栅格的优势在于它可以在屏幕上填充屏幕，拥有较好的显示效果，适用于仪表盘、视频列表和以卡片形式展示的图片、文字等。以 YouTube 的展示为例，视频列数会随着屏幕尺寸的变化而变化，当未到达断点值时，视频卡片的大小会发生变化并始终填充满屏幕。YouTube 流动栅格的适配展示3. 混合栅格混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。总结1. 有理可依了解基础的栅格知识可以帮助我们更加规范的展开设计工作，让设计更加有理有据。2. 充分沟通栅格系统需要和前端伙伴协作，在开展新的设计工作时可以和前端伙伴进行沟通，如果是一个已有的系统，可能已经有比较成熟的栅格解决方案，就不必耗费资源去重新设置。如果是一个全新的系统，可以根据业务场景制定栅格规则，通过和前端沟通可以了解当前的技术资源情况，选择合适的解决方案。对于商业设计而言，不应该一味的追求美，也不应该一味的追求商业，应该懂得平衡两者之间的关系。在做设计执行的时候，需要思考企业利益和设计体验的关系。注意活学活用最重要的是解决实际问题，同时也要把实现成本、技术资源等考虑进去。感谢你的阅读。参考：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://arco.design/docs/spec/gridB端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 欢迎关注作者微信公众号：「求职帮er」本篇来源：优设网原文地址：https://www.uisdc.com/build-b-end-grid-system
用户 原则 尼尔森 尼尔森设计原则是人机交互学博士 Jakob Nielsen 于 1995 年发表的“十大可用性原则”。尼尔森博士分析了两百多个可用性问题而提炼出的十项通用型原则，它是产品设计与用户体验设计的重要参考标准，值得每个交互设计师理解与思考。今天把尼尔森设计原则结合一些产品案例进行总结：用超多App 案例，帮你掌握尼尔森十大原则谈到我们生活中的那些产品和服务，它们常伴于我们左右，影响着我们的生活，与我们处处相关联，同样的这些产品也会影响我们的感受，我们常常在使用时会感到喜悦，也偶尔会在使用另一些产品时会感到不舒服，这些感受都是由产品和服务的体验直接决定的。阅读文章 > 原则一：状态可见性原则系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，一般的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。沟通是所有关系的基础，无论人还是设备。产品应该通过在合理时间内的适当反馈，向用户通知正在发生的事情或者当前的状态。用户知道系统在做什么用户知道自己在什么位置用户知道下一步操作应该去往哪里产品名称：抖音体验说明：图一是抖音用户双击点赞后的反馈图，图二是抖音收藏成功后的提示图解释说明：利用提示语、icon 图标等方式告知用户自己的操作“成功”；图三，手机信号出现问题加载失败的时候也会告知状态。告知的方式有很多，除了图中的图标、文字等，还有声音、震动、动效等方式。原则二：环境贴切原则软件系统应该使用用户熟悉的语言、文字、语句，或者其他用户熟悉的概念，而非系统语言。软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。产品名称：豆瓣 FM解释说明：音乐唱片切换播放的交互行为虚拟现实场景中翻唱片。利用现实生活中的一些行为作为设计元素进行隐喻，很大程度上降低用户学习成本同时激发用户的使用兴趣。设计师在设计的过程中不要轻易自主创作手势交互，表现形式也最好借鉴现实生活的图形符号，以免增加用户认知和学习成本。原则三：用户可控原则用户常常会误触到某些功能，我们应该让用户可以方便的退出。这种情况下，我们应该把“紧急出口”按钮做的明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能。产品名称：微信解释说明：用户可控性原则需要用户在操作过程可以自由的导航和退出、对于不可逆转的操作可以有提示，需要用户二次确认。如图一用户可以自由导航，进入内页后返回按钮或者右滑手势可以返回；同时图二，点击“看看”按钮，再次点击可以进行取消收藏；图三中，对于用户的误操作或者说是不可逆转的行为，有弹出框提示。原则四：一致性原则对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同 一用语、功能、操作保持一致。产品名称：微信阅读解释说明：一致性原则在视觉、结构、行为交互、反馈层面都有所体现，微信阅读的交互行为在期刊和书籍阅读上做了区分。所有的书籍采用左右滑动翻页；期刊才有上下滚动方式翻页。同时视觉上统一品牌色，文章的字体排版也一致，便于用户识别。这就是为什么 UED 部门都要有自己的交互规范与视觉规范要遵守的原因。原则五：防错原则比一个优秀错误提醒弹窗更好的设计方式，是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况，或在用户提交之前给他一个确认的选项。在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。产品名称：微信在进行危险操作或者不可逆转操作的时候有提示，如上图第一张的弹出框提示；错误预防的另外一个方法是利用一些视觉元素引起用户注意 ，提供警示作用，如上图的右图。原则六：识别好过记忆通过把组件、按钮及选项可见化，来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的，且在合适的时候可以再次查看。产品名称：夸克解释说明：识别好过记忆是指让用户减少识别记忆时间。图中夸克中的按钮采用可视化的表现形式，加以文字来辅助，让用户对信息一目了然。图标的形象比较扁平，虚拟现实生活的物品，或者其他 APP 的 icon 变形。PART2，展示用户常用或最近的历史记录，帮助用户记忆。原则七：灵活高效原则灵活高效原则旨在使用户更快捷的使用产品，让用户在最短的路径下最快实现目标。这需要对用户的使用场景、使用流程进行深度挖掘。汽车油门—新手用户常常看不见，而且对于高手来说可以通过它快速与汽车互动。这样的系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。产品：腾讯会议点开腾讯会议 APP，首页展示如下图所示。根据用户参会的场景进行分类，常用的会议场景包括：加入提前预定好的会议、即时性快速开始会议、个人提前预定会议，以及在线下会议室并且需要马上进行无线投屏。四个场景分别对应：加入会议、快速会议、预定会议、无线投屏四个功能。四个功能分类，全面覆盖用户开会最常用的几个场景。同时，直接把几个场景功能进行区分，方便用户快速选择自己适合的功能，灵活高效，节约不必要的交互流程。原则八：优美且简约原则对话中的内容应该去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察觉。产品名称：多抓鱼解释说明：多抓鱼是 C2B2C 的电商平台，链接买卖双方，但是多抓鱼的框架、布局、视觉等各方面都很简洁。框架层：首页（浏览二手书）、卖书（一键扫码免费上门取书）、购物车、个人中心。简单明了，突出核心功能。同时多抓鱼的买书界面（图 2），图文形式简单的介绍卖书流程，一个按钮可以扫码卖书；个人中心中悬浮按钮可以直接写书评。界面布局与视觉干净简洁，减少视觉干扰项。首页的书籍列表，仅仅展示折扣、书名、豆瓣评分、价格几个关键字段，点进内页才有更多评价和介绍。总体来说多抓鱼的设计在各个方面都做的很简洁、清新，也符合文艺小青年的目标人群原则九：容错原则错误信息应该使用简洁的文字（不要用代码），指出错误是什么，并给出解决建议。也就是在用户出错时如何为出错的用户提供及时正确的帮助呢？即要帮助用户识别出错误，分析出错误的原因再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复，也要尽量为用户提供帮助让用户损失降到最低。产品名称：百度浏览器解释说明：在进行信息填写等一些操作行为的时候，需要使用到这个原则。如图一在用户填报信息前会有提示性信息防止用户填写失误、在用户填写的信息不符合要求的时候会有提示性信息描写哪里有问题。这个原则在一些填报银行卡等安全行为的时候也常用到，系统自动把需要注意的事项给用户，使用户防止出错。原则十：人性化帮助原则即使系统不适用帮助文档是最好的，但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。产品名称：KEEP解释说明：如上图中，用户初次使用 KEEP 课程的时候，会有相关提示进行行为引导；下图的添加设备的流程，每页的步骤引导用户进行选择，找到自己想添加的设备进行添加，引导用户将行为串行。并且最后一个 KEEP 链接小米设备的步骤，给用户进行提示。从而总结最常用的帮助与引导原则的方式有：采用一次性的提示信息、常驻的提示性信息、流程引导、帮助信息等若有收获，就点个赞吧！用超多案例，帮你掌握尼尔森十大设计原则（上）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 用超多案例，帮你掌握尼尔森十大设计原则（下）对于尼尔森原则，很多人应该并不陌生，但是并没有系统的了解过。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/nielsen-design-principles-4
按钮 用户 文案 怎样设计 CTA 按钮，能够增加点击率和转化率呢？目录定义：什么是 CTA 按钮作用：CTA 按钮在界面中的作用设计：CTA 按钮需要注意些什么，通过什么方法增强 CTA 的点击总结定义CTA 是英文 “call-to-action”的简写，又名行为召唤按钮。是 Web 和移动软件应用中最常用的交互元素，其主要作用就是引导人们做出某些特定操作，从而提高产品的转化率。作用简而言之，就是设计师通过设计手法，视觉上突出按钮，让用户自然而然的产生点击按钮的行为，例如留下联系方式或者产生购买行为，都算是行为召唤。 行为召唤这一 UX 设计手段的主要目的就是催生交互、行为，提升转化，达成业务目标。 目前的主流电商 APP 在促销模块的购买按钮都在往大的面积，高饱和度，高层级的方向做。主要也是为了引导用户点击按钮并产生之后的一系列购买可能。怎样设计 CTA 按钮，能够增加点击率和转化率样式上1）按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，提高可辨识度，降低用户的学习认知成本 。纯文本按钮会让用户迟疑到底是按钮还是内容，从而造成混淆，这种不确定性可能会导致他们直接跳过这些按钮。如上图，在按钮在这个页面层级比较低，而且并不重要的时候可以是直接使用链接文字这样的按钮形式，一般的按钮根据在页面是视觉层级可以选择后面 2 种，无论是点击区域还是样式上更加容易吸引用户点击。2）使用渐变、阴影、圆角让按钮样式看上去更加的逼真，引导用户点击 。这些样式的应用会让按钮看起来更加立体，模拟现实生活中的按钮样式，比如，开关灯、键盘按钮等。用户在现实生活也需要对这些按钮进行点击和交互，如此用户看到这些按钮时，就直接知道如何去操作。3）正确的设计按钮的大小， 按钮的大小要符合拇指原则（44pt），同时按钮上下左右有足够的留白空间。需要一个页面相同位置的按钮组，必须有明确的层级区分，引导用户进行正确的操作，降低用户思考和选择的时间。例如上图的虾米、京东、网易云音乐 app 的登录页面，除了最重要的登录按钮最大，最突出外；其他的第三方登录以及账号密码登录等按钮都根据不同的层级重要性进行了样式区分。让用户可以直接进行正确（或者是你希望）的操作行为，降低用户的选择时间。文案上1）行为召唤按钮 ，顾名思义按钮对于用户的行为有一定召唤，指示作用。所以按钮上的文案可以使用紧迫感和即时性的文字提示。比如：立即、马上、开抢等。这些文字会给用户营造一种紧张、兴奋、刺激的感觉，刺激用户进行点击和消费。2）按钮文案应该表述明确，告知用户按钮的代表的意思，以及点击交互后会发生什么。通过清晰的文案给予用户操作预知，降低用户的使用成本和防备心态。同时文案也可以是利益点，促进用户点击，并产生消费。图 1 是苏宁易购购物车左划时效果，3 个按钮文案分别是表述清楚了不同的操作以及给予用户相应的操作预期。同时不同的按钮背景颜色表述了不同的操作层级，删除按钮是不可逆的操作，所以红色示警。图 2 是芒果台 tv 充值会员页面，按钮文案明确的说明：确认支付¥9，以及副文案开通会员后用户可以得到的利益点。用户可以很清楚的从按钮中的文案知道点击操作后，需要支付的¥9 元金额，以及可以得到的好处，排除了用户的疑惑，告知了用户好处，更有利于提高点击。交互上按钮在操作后需要及时给出用户不同状态的反馈，告知用户你的操作生效了，做到所见即所得，给用户安全感。例如：网页上的按钮鼠标悬停时，按钮会变色，提示并吸引用户点击。最起码按钮上的光标会变成小手；一些小游戏界面中需要引导用户点击按钮时，也会做各种动效，或是指引手势。总结CTA 是英文 “call-to-action”的简写，又名行为召唤按钮按钮在样式是必须看起像是按钮，符合用户对以往按钮的认知，大小要符合拇指原则（44pt）按钮文案上要清晰简洁，可以使用带有紧迫感、即时性、利益点的文案页面中按钮过多时，需要根据层级作出明确区分，减少用户决策时间按钮在操作后需要及时给出用户不同状态的反馈为吸引用户而存在：界面中CTA按钮的设计有何讲究APP和网站这样的数字产品中所包含的有效的交互系统，通常是由包含不同任务和功能的小元素组合到一起的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/cta-button-ctr
作业 学员 品牌 原本金三银四的求职黄金季，今年突然迎来了寒潮：股市跌跌不休，大厂大幅裁员、缩减甚至停止社招，互联网人心惶惶。而随着大厂市值跳水，很多设计师手里的股权价值也一落千丈，资产的降低，让越来越多设计师选择工作之余接私单补贴家用。如果你是 UI 设计师/交互设计师，除非小有名气，不然私单市场供大于求，普通设计师很难有赚钱机会。与此相反，LOGO 设计几乎是私单市场的蓝海了。越来越多人意识到品牌的重要性，小米 200 万元的品牌设计费用也许有千斤买骨的意思，但是毫无疑问，更多的甲方真正开始意识到品牌的重要性了，以往 50 元一个的 LOGO 不再是主流，取而代之的，是 8000 元的 LOGO 私单：截图来自 LOGO 特训营学员「奇峰」这门课的老师贰喜哥作为前大厂视觉总监，深耕品牌设计领域多年，仅靠品牌设计作品，就收获了站酷 374 万人气。为了研发这门课，贰喜哥也是把多年来总结的、亲自验证过的 LOGO 设计方法分享出来，不仅帮学员接到了私单，更是找到了月薪过万的工作：即使职场遭遇寒冬，只要你的核心竞争力不断加强，压根不用担心找不到好工作。截图来自 LOGO 特训营学员（按要求打码）现在第九期终于要开班了！如果你想要多接点私单，或者提高自己的作品集，这一期就别错过啦！LOGO 设计实战直播课总计 22 天，课程原价 499 元，新课上新价399元，直减100元！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail这门课如何让私单收入提高 30%？能决定私单价格和工作 Offer 的，除了技法高低，最后的作品包装也非常重要。在这门课里，我们不仅要帮你接到 8000 元的 LOGO 私单，还要让你的作品看起来就值 30000 元。相信我，不止是甲方，就算是大厂的面试官，看到一份极为专业的品牌提案也会对你刮目相看。我们专门用一节课，从品牌 LOGO 设计版式规范标准化、使用场景及应用都提供了完整的方法论和案例。除此以外，超过 20 个品牌 LOGO 设计的核心技法，老师也全部倾囊相授，从品牌字体 LOGO、关键字 LOGO、图形 LOGO、日式 LOGO 到辅助图形设计等，几乎囊括了 90% 的设计需求。不止于此！课程还囊括了 6 组实战项目，通过从零到一的品牌 LOGO 设计项目全演示，沉浸式学习，帮你更加深刻掌握设计方法。而实战特训营的正反馈学习机制：「项目演示亲身练习作业修正作品输出」更能让你不断修正错误，逐步进阶。话不多说，直接看课程大纲最实在！LOGO 设计实战直播课总计 22 天，课程原价 499 元，新课上新价399元，直减100元！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail说出来你可能不信，这一门课，有至少 10 多人二刷了…来听听二刷学员的感受：截图来自学员「Freckles」对了，上图这位学员后来接到私单，成功赚回了学费，还给老师报喜。如果你是第一次学习品牌 LOGO 设计，基础很差也不用担心，贰喜哥的耐心和细心是出了名的：截图分别来自学员「yusea、daniel 的毒唯、就这样吧、姈兮、雀雀_」所以这期课程还没上架，就有不少老学员在咨询了。不过为了保证课程质量，我们这期依然会限制报名人数。熟悉私房课的同学应该都知道，上周的速涂课特别受欢迎，以至于限时活动还没结束，我们就停止招生，所以这期 LOGO 课想报名的同学就抓紧啦。能让这么多学员喜欢，贰喜哥自有他的独特魅力，是时候认识一下了：独立品牌设计师贰喜哥可以看到，贰喜哥每组作品都拿了 3 个火苗，人气也高达 374W，正是靠这些品牌设计作品，成为站酷百万人气设计师的。老师作品贰喜哥的字体设计也相当有风格：如果你想知道学完整个课程是什么效果，看看上期学员作品就知道了。学员作品第一课作业：叁谷空间主题第二课作业：酱珍面坊第三课作业主题：雀喜第四课作业主题：云印第五课作业主题：猴购第六课作业：完整品牌提案还有很多作业，篇幅有限就不一一展示出来了。LOGO 设计实战直播课总计 22 天，课程原价 499 元，新课上新价399元，直减100元！移动端扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/本篇来源：优设网原文地址：https://www.uisdc.com/logo-design-class
在路上
张大湿
表哥
落霞与孤鹜
飞翔的企鹅
