音乐 素材 影片 Pixabay 是非常热门、知名的免费图库，目前已经拥有超过 260 万个高质量相片和影音素材，透过搜索或分类、关键词等方式进行查找就能找出合适的图片影片下载，非常方便：图库两连发！有三十万可商用图片的Pixabay+图片搜索引擎今天这篇源自之前合集里推荐过的一个图库站，最近实际深入使用后，发现它确实是个极佳的图片素材库，不但提供了大量且可以免费使用的照片、向量图和艺术插图，而且都可以自由下载使用，包含商业用途，无须署名。阅读文章 > 本文要推荐的「Pixabay Music」是 Pixabay 免费音乐 MP3 下载服务，提供用户下载音乐素材，可用于影片制作、网页设计、投影片和应用程序开发，以筛选器依照不同类型、情绪、节奏和主题进行搜索和预览，如同 Pixabay 免费图库每个音乐都有独立的页面，如果喜欢还能关注特定的创作者、将音乐加入收藏或是给予爱心，所有音乐都能免费下载为 MP3 格式并使用于个人和商业用途。Pixabay Music 操作界面很简单，预览时直接从浏览器播放，再点选下载就能取得文件，无需注册或登陆账号，依照 Pixabay 授权说明所有内容皆可使用在实体或数字的商业或非商业用途，不须标示出处来源或加入链接，也能对于下载内容进行编辑修改。之前推荐过的免费下载音效素材网站：免费可商用！提供超多风格音乐/音效素材下载的「Sampld」本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。阅读文章 > 免费可商用！拥有超过 5000 个音乐音效素材的 Filmmusic.io除了免费图库以外还有一个经常被用到的素材是「免费音乐音效」，特别是在制作影片时很容易用到，音乐音效如同图片都有版权规范，不可使用没有授权的素材以免触法（尤其是影片上传后可能会因为版权音乐而遭受部分限制），当然网络上有很多开放免费音乐音效下载的网站，只要符合授权规范就能免费使用。阅读文章 > Mixkit 推出新网站！超多音效素材免费下载可商用！去年曾经推荐过Mixkit免费高画质影片素材网站，在这里可以找到大量的影音素材，无论使用于个人或商业用途皆不受限制，也能复制、编辑或公开始用无需标示出处来源：[link https://www.uisdc.com/video-resources-mixkit]后来Mixkit陆续阅读文章 > Pixabay Music网站链接：https://pixabay.com/zh/music/使用教学开启 Pixabay Music 网站后会看到搜索字段，使用创作者、歌曲、类型或是心情进行搜索，下方还有一排标签快速显示特定音乐，如果要缩小内容范围，先从左上角「持续时间」选择要搜索的音乐长度。左侧筛选器可勾选、展示特定的音乐结果，像是各种类型、情绪、节奏和主题，主题部分有像是影片音乐、YouTube 影片的音乐、Vlog 音乐、背景音乐、播客（Podcast）音乐、电影音乐等等，勾选后在右侧会实时更新并显示相关音乐。点选任何一个音乐前方的「播放」直接在网页收听，每个音乐会有标题、创作者、音轨图、长度，点选最后方的「下载」可将音乐保存为 MP3 格式，完全不用注册登陆账号，值得一提的是当点开音乐下方会展示各种标签，有助于用户依循提示找到更多类似音乐。点选进入音乐页面，还能看到更多信息，包括创作者的上传日期、下载次数、播放次数、被加入爱心或收藏次数，有些页面还会有其他使用者的留言讨论串，同时在下方会有相似的音乐推荐。点选右上角「免费下载」也能将这段音乐下载、保存为 MP3 格式，非常简单。在下载时会跳出提示，Pixabay Music 建议可加入对音乐创作者的姓名标示（署名）和超链接，不过不是必须，即使没有做也没关系，有些音乐也会在 YouTube 注册 Content ID，这是 Google 开发的自动化系统可让版权拥有者找出哪些 YouTube 影片含有他们的内容。如果使用者在注册、登陆后还能下载音乐的授权证明，打开会有授权者的用户名称、音乐标题、文件网址、文件 ID、下载日期等信息。值得一试的三个理由：1. Pixabay Music 提供各种类型音乐 MP3 让用户免费下载2. 适用于影片制作、网页设计、投影片和应用程序开发（商业和非商业用途）3. 不须标示出处来源或加入链接，登陆后可下载音乐的授权证明想给Vlog加音乐？这个网站全是免费高质可商用的音乐素材本文要介绍的「BentenSound」是一个分散式平台，为使用者提供完全免费的音乐库，可运用在影片或任何专案，BentenSound 当前收录的音乐片段不算太多，每一个都带有封面图片、曲名、创作者并能直接在线上预览收听，提供 mp3 格式让使用者免费下载。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/pixabay-music
情绪 关键词 产品 几乎大部分 UI 设计师在作品集里都会放入“情绪板”这个模块，但是这个模块的利弊其实都很明显，大家都想通过展示情绪板来告诉面试官我是如何定义色彩和产品的视觉风格调性的，但是大部分设计其实在做界面之前都没有做过情绪板，而是反套的。也就是做完界面后，看用到了什么舒服的颜色，然后再去找一些图片和关键词，做成“情绪板”。所以大家看到的情绪板几乎都特别的鸡肋，一是关键词太普遍宽泛，几乎所有产品都能够用。二是图片和关键词关联性并不大，只是好看或者带有需要的颜色而已。例如上方我在设计平台截取的一些例子，关键词包括：品质、自然、舒服、简约等等，几乎可以用到每一种产品，图片和关键词也并没有太强的关联，为什么自由是一座雪山？为什么活跃是一些电子产品？为什么简约是一幢高楼？为什么专业是一台黄色的电脑？这样的案例比比皆是。所以很多设计师对情绪板的理解出现了问题，风格定义这件“事”，其实是很难的，需要沉淀非常多的经验，从初学、临摹、原创、大量风格探索尝试后才能逐渐形成风格定义的能力。风格定义也绝对不是找一些图片吸取一些色彩，就搞定了，所以市面上 UI 作品同质化的原因就是大家还没有掌握定义风格的方法。什么是情绪板用白话来说，情绪板反馈的就是产品的相关利益者对产品的感受和期望，并将其具像化的方法和过程。每一个产品利益者对产品的期望都不同，一千个人心里都有一千个哈姆雷特，那么产品呈现出什么样子，我们需要能够将这些感受和想法进行视觉具像化。这些感受和想法包括了产品的定位、用户的需求、管理者的战略规划等等。为什么要做情绪板情绪板的结果并不会直接告诉设计师具体设计的参数，不会告诉设计师应该用什么颜色，应该用什么字体。而是一种视觉导向与感知指引，用来给设计师进行参考，并且设计师要始终如一的贯彻这些引导，这是原因之一。另一个很重要的原因就是在做情绪板的过程中，能够让设计团队、产品管理者对该产品呈现的感知和理念能够达成一致。和情绪板类似的方法还有例如品牌冲刺、人格化块等一系列用于探索产品在视觉感知和产品品牌定位上的方法。情绪板的步骤其实很多人对一些方法比较排斥，我个人也是如此。大家一听到方法、方法论头都炸了，你不如直接讲案例来的更直接一点。好，我们今天会将方法和步骤都给大家讲解一下，保证大家能够看懂。先来将具体的执行步骤，方法流程的简单和复杂还是来自于当下的条件和资源，以及我们的期望。同时情绪板运用的时机也有讲究，它并不适合运用在比较成熟的产品设计中，而适合用在 0-1 或者 1-2 版本的阶段。在这个阶段里产品品牌初具雏形，用户数据和特征也逐渐成型，所以我们有更多的数据来对这些反馈进行准确的描述。如果我们的条件和资源丰富，那么需要邀请用户一起来参与，如果条件不允许，那么至少也要将公司其他部门以及高层管理一起来参与，当然如果这些条件都不具备，那么设计团队和设计个人也可以进行，但是对个人经验要求比较高。那么我们先理想化的来一次讲解。第一步-邀请相关利益者并进行访谈研究我们需要邀请一下人员参与此次情绪板的方法研究：1.用户（注意覆盖多类样本 3 名左右即可）2.设计团队成员（覆盖到其他参与方法的人员人数）3.其他利益相关部门负责人（2-3 人）4.老板（必须邀请）。由牵头设计师进行主持。首先每一位设计师找到其他参与方法的人员，一对一开始进行访谈，主要围绕以下几个问题：1. 产品带给你什么感受2. 您觉得和 xx（竞品）比起来有什么差别3. 如果将我们的产品比作一个人，你觉得他是谁4. 如何向朋友介绍这个产品5. 它和你身边的那种物品有相似的气质……还有更多的问题可以根据不同产品定位进行拓展。为什么要问这些问题呢？这些问题将覆盖到用户对产品的一种主观感受，并将其拟人、拟物化，让用户能描述出和竞品在主观感知上的差异和区别。于是我们会得到一些关于这些问题的关键词。第二步-产出体验关键词并进行三维映射得出的关键词例如我们经常会说的品质、自然这样比较抽象的词，也会得到像父亲、皮带这样具像化的关键词。这里要注意的是当用户描述出他心中的关键词后一定要进行追问，例如为什么您觉得它像父亲而不是母亲呢？这里就要时刻去找到用户关键词背后的真实想法。接下来我们会用到三维映射法，将所有关键词都划分出 3 种类型：1.视觉映射 2.感受映射 3.具象映射，并继续访谈用户：您刚才说产品给您的感觉是时尚的，那么您觉得时尚在你心中是什么颜色的，时尚给您一种什么感觉以及如果让您用一个物品来代替时尚，您会选择什么物品？这样做的好处是能够让抽象的概念具像化，让设计师能够切实理解用户的主观感受。一般如果我们只让用户描述主观感受其实是不准确的。第三步-让参与者创建情绪板当我们把所有提炼出来的关键词都找到对应的三维映射后，我们将针对最后的结果进行可视化图片收集。例如用户觉得香奈儿包包可以用来代替时尚这个关键词，那么我们就需要收集更多有关香奈儿包包的图片。在收集图片过程中要注意这几点：1. 图片必须高清不模糊2. 图片的数量必须大于 6 张3. 图片的色彩尽量覆盖多种4. 图片尽量简洁有主体将所有关键词都收集完图片后，我们让用户在其中进行挑选，让其选出最符合他说出来的那个关键词的图片，每个关键词选择 1-3 张图片。这三个步骤中，老板的建议和感知也是很关键的，因为我们知道用户一般都会做很多利己的选择，所以也只能作为一定的参考。而老板则是产品的创始人，对产品的定位和期望有更深入的想法，同时这也将为我们后续推动工作提供很有价值的参考。那有小伙伴说，老板没有审美，很土怎么办。其实这个不重要，在这几个环节中同时也要避免为了迎合老板而做出的决定，我们只需要听老板的感知然后去分析即可，并不是老板说要什么就一定要去实现，否则就违背了本次方法的初衷。第四步-结合情绪板制定设计风格情绪板最后输出的其实就是关键词+具像化的图片。到最后一个步骤，大家觉得是不是还是很迷茫，那和我们做设计到底有什么关系呢？所以我们在做完这一系列操作之后，需要由资深、专家来牵头完成风格的脑爆和定义。例如我们可以在设计团队内继续进行讨论，围绕形、色、字、构、质五个维度进行脑暴。每个人对这五个维度进行效果制作，可以是 UI 首页、海报、插画，以提炼出来的关键词和图片为准绳进行设计。可能需要几天时间，之后再次进行会议讨论，为什么每个人的设计是这样的，思路是什么。所以其实情绪板最后的效果，很大程度上取决于设计师的设计能力。如果团队都是设计新人，那么也没有必要做这个方法了。案例接下去我说一下之前我们项目中的案例。我们当时根据用户以及产品定位提炼出来这些关键词：沙发、撞色、口红、香奈儿包、潮流、多彩、品质。针对这些关键词我们继续寻找图片。根据这些图片，我们从形色质构质五个维度去寻找设计的灵感，例如在形状方面我们提炼出了棱形作为一个特征符号，可以运用在图标、背景修饰元素以及容积形状等地方。颜色我们提炼出了产品主色以及辅助色，让页面更加活泼、轻量化。在金刚区图标以及 banner 背景的运用上，用到了撞色以及浅色背景突出主题的设计。字体方面主要是运用到一些特殊字体时候的字体设计，例如在今日特卖以及明日预告等一些固定栏目标题的场景。构，运用在了一些氛围大图的结构布局上，采用了大标题结合大主体的对角线构图以及对称构图。还有在 banner 的设计中利用前中后景营造的纵深感。质，运用到的是在图片背景中采用了氛围元素的搭配以及一些微渐变，让模块的视觉丰富更有质感。之前给大家介绍的 NOKNOK 应用，一款像素风格的游戏社区产品。其实设计风格这回事，大家不要过度的追求，能营造出非常独特的风格必须要满足以下几个条件：1. 功能简单。大家觉得淘宝和新浪微博的风格是什么？是不是很难明显的感知有什么独特的风格？因为产品题量大、功能复杂用户多，所以很难设计出满足所有用户且很独特的风格。2. 风格小众。例如像素、极简、摇滚、潮流，这些风格是很容易出效果的，平时我们接触的大部分产品都是满足大部分用户的视觉偏好，突然有一天你看到这些小众风格你就会觉得很特别。但是这些小众的风格是很有局限的，例如你让淘宝去做成极简风，或者大众点评去做成很潮流的风格，人家功能点这么多，没有空间让你去做视觉的发挥，就无法展示出用来表达风格的细节。所以，如果你们不是正在创业或者从零开始设计，那么就不要太追求小众化的设计风格。情绪板这回事听起来很专业，但实际操作起来还是有很多问题的，一味的追求方法不如自己多练习几种不同的设计风格，多看看国内外的优秀作品。希望大家在不久的将来都可以成为独当一面的设计专家。情绪板还能这样做？难怪大厂的设计师那么强Hi，我是彩云。阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/ui-portfolio-mood-board
字体 笔画 用户 前言在平时的工作中，我们是否有考虑过运营设计的商业目标是什么？看到这个问题的我们一定脑袋一片空白。首先我们可以把运营设计分为两派，一派为内容运营，另一派为活动运营，他们的共同目的都是帮助产品获得用户，实现流量最大化，从而形成一个正循环，最终完成商业化目标。当我们面对一个优秀的运营作品时，真的只是被画面吸引么？答案是否定的，我咨询了很多身边朋友，大部分同学给到的反馈是，首先会被文字或标题所吸引，其次是版式和图像，最后是颜色，由此看来图像的本质是吸引眼球，文字才是快速传递信息确保用户长时间停留的关键所在。从古至今，文字在信息传播上都有着举足轻重的地位，随着移动端的兴起我们的表达方式也变得更加多元化，现如今网络上随处可见充斥着各种短视频，图像等信息传播方式，但随着我国人口老龄化加剧，随之而来的就是各种适老化产品的出现，据调研老年人对内容的文字呈现形式信服程度远远高于图像呈现，进而我们在设计中更要注重对字体的设计，而不是直接把文案摆在画面中。事实上字体设计只是平面设计中的一个小小的分支，但文案的呈现样式无疑是运营设计创作中的重要组成部分，也是从事互联网设计的基础要素。了解字体设计1. 字体设计定义简单来说，字体设计可以理解是将我们标准的“无衬线体”和“有衬线体”也是我们俗称的黑体和宋体的基础上根据内容含义发挥创造力对其进行修饰以及解构重组。以下图为例可以简单的区分无衬线字体和衬线字体。看到这一概念一定会有疑问“自己在平时工作中直接使用不同样式的字体也属于字体设计么？2. 字体设计起源通过下图我们可以简单了解到中国汉字的发展历程。迟同斌（开心老头）老师在《字体设计定位与通用字形》中提到汉字的字库设计发展其实就是汉字的发展，从甲骨文的象形文字再到金文、小篆、隶书，再到适合印刷的宋体出现，都是由我们的先人在不断设计才使我们现在有了这么多丰富的汉字字体艺术。难道甲骨文不是被“设计”出来的吗？难道历代大书法家不是字体设计大师吗？字体设计的演变是与其应用环境和文化科技发展息息相关的。宋体的出现主要就是为了印刷制版，便于传播文化，要是用毛笔写宋体你看看得有多费劲，再看看如果用刻刀在木板上刻行书也是很难的。而现代字体设计大多都是在电脑上完成设计，并且很多的应用也都是在出现各种电子媒体上 。随着信息传播的载体不断丰富，各式各样的字库也随之涌现不再局限于功能性需求，现在更注重我们获取信息时的清晰度以及舒适度。这样就给字库设计带来了更多的可能性。但是万变不离其宗，字库设计仍然需要保持可读性，辨识性，统一性以及有由新媒体时代而衍生出来的的推广性，一套优秀字库的设计需要字体设计师熟练掌握字体设计工具的同时对中国汉字的的发展以及书法万分了解，不过最重要的还是需要设计师要耐得住寂寞，为了满足基本场景运用一整套字体算下来一共需要六千七百个字，对于设计师来说一套字体需要消耗半年甚至一年的时间，面市后还需要相当长的一段时间获取各个使用领域的反馈，然后对反馈内容进行后续的修改和完善。3. 字体设计的现状随着走访身边的朋友，并且以调查问卷的形式发现当下字体设计工作中存在一些问题。用户重点关注标题随着信息传播的多样化，我们每天都被迫接收的各种各样五花八门的信息，这也间接导致我们对信息的关注度越来越碎片化，对信息的注意程度也越来越不集中。对于品牌方来说各式各样的活动内容，既要吸引用户注意又要迅速的传达活动信息，这就需要将很大的篇幅给到标题，用户会根据标题是否符合自己的兴趣和需求在选择是否驻足当下页面，进行下一步观看活动内容或者参与其中的操作。品牌风格不统一在产品的运营活动中杂乱字体的运用会致使品牌风格无法统一，品牌感降低，设计效率大打折扣。无法满足不同场景的运营需求的同时更会降低用户对品牌的认可度，从而导致用户的流失。4. 字体设计的类型根据字体设计的现状以及我在工作中遇到的各种状况总结了字体设计中的几种分类，我们就浅谈一下吧！运营标题设计大家工作中有没有遇到过这样的情况，在做运营标题时直接选择字库中看起来挺有设计感字体，结果被甲方投诉到想要哭泣。甲方爸爸必定会让你对字体进行艺术性处理，这时我们必将化身“卑微小王”对字体进行重新设计，让字体在画面中展现独特的魅力来重新获得甲方爸爸的认可。为什么进行标题设计运营设计的标题是建立用户与活动方信息传达最直接的 VIP 通道，如何通过这条通道更直接的给用户传达信息，快速实现活动方的商业目标是我们工作中需要认真思考和复盘的重点。企业里许多设计师在做运营活动时，为了抢占用户更多的时间，很多时候并不需要非常规范化的字体设计，往往只要做到高效率的整理和传达画面情绪并且产出在视觉上可以给用户营造较大冲击力的标题就可以。通过标题快速在用户意识中对全新的认知和内容进行完美质植入，这样不但可以让用户在较短的时间了解活动内容以及活动利益点，而且可以大大降低与用户的信息沟通成本，提高用户对活动的关注度与参与率。品牌字库设计首先我们要了解品牌设计的意义是什么？品牌设计可以简单理解为是将品牌内容传达给用户，帮助用户理解并认同品牌理念，从而将口袋里的钱全部贡献给品牌方。其中设计师将品牌内核融入字体设计中，可更加直观的传达品牌内容和理念，并且在传播上具有以下作用。提升品牌影响力各个公司为了建立自己的品牌形象都在 IP 形象和字体设计上大费周章，文字图像化设计可增强品牌的内在价值，当品牌字体在大街小巷出现时，不仅可以大大增强用户对品牌的认同感，而且可以增强用户对品牌的好感，最终还会出现“人传人”现象促进口碑增长。强化品牌形象虽然图像与文字都可以进行信息传达，但与文字相比图像表达更加抽象，文字传达更能直抒胸臆，所以品牌更多的选择使用字体进行塑造及宣传。增强品牌内涵对于普通用户来说，他们更加倾向于有特点和个性的品牌，而我国汉字大部分为象形文字，本身就是历经千年沉淀的产物，积蓄着无限能量，品牌下的字体设计也正是因为这一特点挖掘文字内涵，进行一系列的设计，使之在汉字框架内塑造品牌独特的个性。5. 字体设计的意义优秀的字体设计从理性角度不仅能让画面结构更出彩，内容更加饱满。在感性角度设计师将自己的理解融入每个字中，带给字体无限的可能性，更能引起用户共鸣，让用户感受到设计师通过文字传达的情感以及作品的趣味性，并且字体的设计也从侧面体现设计师独具匠心的一面。增强视觉传达导向与图像传达信息不同的是，文字传达给用户的信息往往不够印象深刻，所以在工作中需要不断创新增强字体的个性，在文字基础功能上做一个延伸，在不失字体可读性，辨识性的前提下创造具有艺术性并且能让用户融入其中的字体，启发用户按照我们的想法去感受，去思考，最终达到吸引用户眼球的注意，引导用户参与的目的。提升品牌知名度在市场竞争激烈的当下，品牌方需要提升自己产品竞争力必然会将自家产品以各种形式融入用户的生活，其中最为直接有效的方式则是让用户主动参与其中，便有了众多吸引用户眼球的运营标题设计，文字图形化的方式必定会给用户留下深刻的印象。除此之外，品牌方要想和用户产生更紧密的联系，还需要出现在用户每天都听得到看得到的地方，品牌字体在此就具有重大贡献，它不仅能出现在任何用户阅读的地方，而且大大加深了用户对品牌的认知度以及好感度。字体设计原则1. 三要素决定字体性格常言道“字如其人，笔记识心。”人是不是很好看我们一般是从这个人的骨架大小、身材胖瘦以及这个人的衣品决定，我们可以把每一个字体都比做一个人，字体好看与否同样是由三大元素决定，分别为：结构框架、笔画、字体效果，三者相互促进相互影响，是不是听的云里雾里，嘿！不重要！一张图解决你的困扰。文字整体调整汉字的字形结构文字辨识度往往是由文字的内骨骼决定，每个字都有每个字独有的骨架，这也是字体独一无二的信息呈现方式。疑难点 1:中心与重心的区别重心和中心都是借用物理学中的概念。中心，就是把字放在一个圆中，圆心就是中心，他只考虑长短、大小。重心，在物理学层面是被物体形状所影响，可用悬挂法确认物体重心。但在字体层面概念却有所不同，每个字都有自己的重心位置，字体结构不同，重心位置也会不同，但可以简单理解为文字的重心就是文字的视觉中心位置。仔细观察图中的两个“十”字。第 1 个“十”字的横、竖笔画都对准了中心线，它的重心在“绝对中心”；第 2 个”十”字中把重心调高，重心处于“视觉中心”，相比第 1 个”十”字在视觉上重心偏低了，让人觉得头重脚轻，而把中间的那一横调高后，字形发生了明显的变化，看起来更加舒服。通常情况下，人们的视觉中心要比实际的绝对中心偏高一些，就好比日常穿着中，人们通常会把上衣放在裤子里，拉高腰线，使整个人的重心上移，这样看起来身材会呈现三七分完美比例，凸显大长腿。同样，在字体设计中，如果我们适当将重心提高，使字体的上半部分紧凑些，下半部分适当宽松一些，那么呈现出的上紧下松的状态会更符合人们的审美。由此看来重心并非一个绝对位置，以重心画线可将字体均衡地分为上下和左右两个部分。把汉字分割为上下两部分后进行观察，笔画分布靠下则谓之重心低，反之则谓高。其中笔画交叉处或者说是笔画密度尤其能体现重心，重心的高低对字体的视觉感受有很大的影响，从理论上来讲，重心较低的字会给人稳重、信赖且富有亲和力的感觉，而重心偏高则会显得高冷和俊秀。另外，对于多个字的排列和组合，字体重心的统一性也是极其重要的，若重心出现偏差，就会破坏文字的整体性。由此看来，字形结构中各个部分的轻微变化都会使整个字体发生天翻地覆的变化。疑难点 2.何为中宫中宫的概念起源于书法，书法中以“米”字格或九宫格作为参考，用来确定书写时笔画的位置，其中九宫格参考线中最中间的一格即为中宫。由于楷书又作标准字体，楷书的特点是所有的笔画有序的聚拢在字的中心，也即为中宫，所以中国汉字的特点也被称为“中宫收紧”，之后也被应用在设计之中。中宫对字体结构的松紧以及造型有着重要影响，在观察字库中的字体时，你会发现每一种字体的中宫都是一样的。字体笔画紧凑，聚合在中宫框附近，称之为“中宫紧凑”，反之，笔画远离中宫框，则称为“中宫松散”。在这里还要给大家引申字谷和字怀的概念。与中宫相同，这三个词都是由书法中延伸出来的。首先是字谷，它指的是文字中半封闭或全封闭空间，这个概念在西文设计中常常被用到，可以简单理解为字体中封闭的留白区域。再来是字怀，又被称为“字体的内白”，它指的是笔画间的留白区域。笔画越粗，字怀越小，字重越大，字体越稳重。唐代楷书四大家之一的欧阳询《三十六法》中曾提到：“大字难于结密而无间，小字难于宽绰而有余，”字体设计中有些设计师在字怀处理上力求平均，而正确的思路却是让字怀整体有疏密对比变化。疑难点 3.何为字面汉字作为传统的“方块字”当设计字体时，一般会有一个外边框进行大小限制，但将几个字放在同样大小的限制框内，这几个字却还是有大有小，搭在一起总是怪怪的。这里的大小并非是字体的大小。而是字体字面比例的大小。字面就是指字体所占字面框的比例大小。疑难点 4.何为中心线在我们对字体进行改造设计，将字面框的两条垂直边和平行边中点相连，形成的焦点为中心点，两条线为中心线。这个中心线成为字体的第一中心线，它和中心点控制着每一个字的基本形态，他们的位置是固定的。小心机 1.空间留白设计字体的笔画产生空缺处，这就是所谓的留白面积，如何处理留白对于我们来说也是非常重要的。留白空间越大，就会营造出比较透气，舒缓的节奏。反之，留白空间越小营造出的感觉就会越压抑，沉闷，有力度的氛围。《公路之歌》—字体帮小心机 2.重心以及中宫变化通常重心较高中宫比较窄的字体都比较纤细，比较长具有艺术气息，通常用在和女性相关的品牌中，不与世俗同流合污感觉。反之重心较低中宫比较宽的字体都比较扁并且笔画较粗的字体通常给人一种成熟，稳重的感觉，常常用在比较男性或正式场合。《小人物》《战意》—字体帮汉字的间架结构由于中国汉字笔画众多，组成结构空间布局也五花八门，字体间架结构可分为以下类型结构重心统一：多部分组成的字体结构中，要注意每个部分重心位置要一致。留白空间统一：笔画搭配要做到疏密均匀，粗细变化一致。偏旁部首比例协调：多部分组合结构中，偏旁部首的大小，主次关系，比例关系，结构穿插，粗细变化，紧密程度都要相互作用，相互影响。文字的基本笔画字体图形化的决定性因素就是笔画，不同字体呈现的图形间接决定字体给用户传达的含义。中国书法用笔法则又称为“永字八法”，相传为隋代智永或东晋王羲之或唐代张旭所创，因其为书写楷书的基本法则，后人又有将八法引为书法的代称。由于“永”字包含了几乎所有的笔画，所以在字体设计中通过对“永”字的研究了解文字构成，从而设计出结构饱满，笔画美好的字体。小心机 1.笔画粗细变化传统概念中，女生小鸟依人，男生魁梧健壮，在字体的运用中也是这个概念。如果实在想象不出来，可以试着将笔画粗细变化的概念和字体留白放一起理解，笔画越细，留白空间就会越大，字体就会越轻盈。反之，笔画越粗，字体越厚重，分量感越强。《上海滩》—字体帮小心机 2.笔画曲直变化说到笔画曲直不免让我想到《甄嬛传》中甄嬛选手跳惊鸿舞时间翩若惊鸿宛若游龙的形态以及雪融融代言人安陵容选手上演冰戏时柔弱无骨的样子。笔画以弯曲为主的字体会营造温柔，可爱的意境，多用于儿童或女性品牌。反之，笔画形成的转角过多，会产生速度感和力量感。《梦醒时分》—字体帮2. 设计流程在工作流程中我们会经历以下五个步骤：需求评审首先，第一步字体设计分析尤为重要，如果给到的文案小而精炼，那么设计空间会非常的大，如果给到长且语序混乱的文案，则我们的发挥空间将会非常的小。我们需要做的就是：“怼回去，重想文案！”在工作对接中尽量将文案把控在 8 个字之内。前期脑暴，进行需求归纳氛围考究，避免答不对题。明确需求并进行脑暴分析关键词，关键词贵精不贵多，之后对关键词进行权重区分并排序，将关键词与和需求文案性格相匹配做出基础的判断，确定需要传达给用户什么样的字体气质和性格，是比较偏向复古感，还是偏向少儿感，还是一个比较阳刚的场景等等。通过字体性格绘制骨骼草图当我们确定了整体氛围和字体性格后，将性格细分到字体三要素结构，笔画和细节上，这时就完全确定需求方想要字体的样子，是高？是瘦？是矮？是胖？接下来一定要牢记，开始疯狂找参考，参考网站这里就不一一列举了。世上网站千千万，还怕找不到你要的那个么？找不到？就是你太懒！找到合适的一些参考后，对字体的粗细结构，笔画变形和排组合列进行不断探索，可以选择在电脑上绘制草图，方便下一步的设计制作。这时的草图并不需要任何细节，想到就画出来。左佐工作室设计实现针对骨骼草图勾勒出草稿形体，一边进行勾勒一边对笔画的节奏，字体大小以及留白进一步微调。字效添加最后就是勾勒好的字体添加一些列效果之后与画面结合在一起，在这里做的效果的前提是清楚整个画面场景氛围。根据场景添加适当的效果，不要画蛇添足。3. 设计细节解析视觉偏差视觉心理是一门奇妙的语言，在文字中不论整体结构也好还是笔画形态也罢，都会因为字体灰度产生字体组合不平衡的状态，灰度指的是在一个字体中笔画和留白空间的分布比例，设计字体杜绝一个字笔画特别密特别黑或者笔画很细过于白。因此字体设计最后总是需要整体观察，细节调整。笔画粗细导致视觉偏差中国汉字中，笔画多的字体和笔画少的字体相比起来， 为了让字体的灰度统一，笔画多的字体明显会相对细一些。横细竖粗：相同的两条线段，其中垂直的竖线在视觉上会更长一些，一般可缩短垂直线条或者加粗垂直线条，都可以在视觉上看起来两条线条一样长。左长右短：相同的两条线段，进行横向排列时，由于人眼习惯性从左向读取内容，会导致左边线段会比右边线段视觉上略长一些，一般可将中间的间隙向左边少做移动。主粗副细：复杂笔画的文字中，若所有笔画都是一样粗，整体则没有留白空间，视觉上会觉得文字很憋闷，甚至在自身框笔画重合在一起时，出现识别性低的问题。一般我们需要明确笔画的主次后将主笔变粗，附笔缩窄。外粗内细：当遇到全包围的字体，由于内部结构被全部包裹，在视觉上形成一个封闭结构，导致中宫紧缩，这时需要将内部笔画变细，凸显外框，有效的调整视觉平衡。疏粗密细：总结以上所有情况包括笔画交叉等结构，都需要将密集处做变细处理，稀疏处进行适当加粗从视觉上解决字体疏密不均的问题。横竖线条：在我们的尝试中认为横线条服装显胖，竖线条服装显瘦，但字体中正好相反。复古与现代字体通常在笔画上加入细节，笔画细节少，结构越简单，设计出的字体一般更年轻，具有现代感，反之，笔画细节越多结构越复杂就更有年代感和复古感，如果觉得无法想象出具体画面，没关系！我们试想一下宋体字（有衬线字体）和黑体字（无衬线字体）对比，宋体则让我想到老上海日历牌的设计，而黑体字最让我印象深刻的就是苹果官网设计。通用字形由于通用字体看起来比标准字更舒展更大气所以最近几年市面上设计师使用通用字形频次越来越频繁，使用的品牌也越来越多，我们可以来浅探一下其背后玄机。迟同斌老师提出的通用字体其实是将字体中宫放大将笔画外围空间压缩。字面不同导致视觉偏差汉字笔画五花八门，字形也千奇百怪，导致相同大小字体字面大小不一，导致我们看到的字体又大又小，因此需要对字面覆盖字面框的比例做出调整。设计注意点笔画粗细导致视觉偏差多个字体组成的标题中，前后一定要有呼应，一定要使用一种设计方式以及展现形式要统一，让字体组合呈现一个整体，而不能每个字有每个字的个性。在谈到统一时，有些同学会抢答说：将所有笔画粗细变为一致的，虽然这也是一种方法，但这种方法只适合于字体组合中文字笔画都很少的情况下。如果遇到笔画较多的情况，就会在统一字面框内出现笔画粘连，内容黑色区域过多导致单个字体视觉过大。小技巧 1:笔画装饰可将笔画两端或局部增添细节，这样整个字体会看起来更加饱满，末端或局部的小修饰，使字体氛围更加有内涵和内容。《英雄》-刘兵克小技巧 2：图形装饰利用常见的几何图形“圆点，等距矩形，等边三角，波纹等”对文字做出装饰，这种方法是最快提示效果的方法，并且可以让字体视觉上前后呼应，具有统一性。《氧气》-字体帮小技巧 3：笔画替换将字体中某个笔画用一个固定的形式置换，“例如将文字中所有的点都用三角形替换掉”，不但可以创造新的字形，而且可以将字体统一化处理。《告白星球》-字体帮字体设计指导方针我国国民审美的不断提升以及保证用户获取信息时的清晰度和舒适度，我们要摒弃以前做字的一些习惯，去除冗余的装饰部分，减少字体变化，做到看似没有设计但又感觉很舒服的设计，要让我们做的字成为画面的点睛之笔，促使用户驻足而不是成为画面累赘降低产品品质感。字体设计上到线下大型活动，下到字体 icon，标题字体往往最容易让用户记住，而合适的字体形式表达更容易传达内容的情绪，吸引观者共鸣。让人感觉这种字本就该出现在这个画面中，看着感觉舒服，而不是觉得–“怪怪的”。但遇到工期短，项目大的时候，我们如何用最快的时间设计出跳脱的字体。我们由简到难依次递进。1. 字体设计秘籍一款字库的价格大家是否有了解过，每一款价格上基本上都保持在一万左右每年，以下是方正和汉仪字库的授权价格。对于很多公司来说，他们认为没有必要每年花费上万的价格去购买字体，但由于侵权赔付的天价，基本上都再三叮嘱设计师用字时一定要注意。往往工作会遇到很多工期短，任务重的内容，这时我们只要打开神奇的字库用正确的思路方法就可以免费使用正版字库，并且不需要担心字体侵权等问题。2. 文字整体调整将字体比作一个人，首先对骨骼内在进行调整然后对外在形象进行大肆修整，让人看不出原来的样子。接下来是给这个字添加各种装饰品，以及面部修正，让其具有统一性和独特性。字体细节变化笔画设计在笔画上的设计中，不论是省笔还是添笔或者是断笔还是连笔都要保证在不破坏字体识别性的前提下进行。杜绝出现为了设计而设计，要做到言之有理。省笔：在不影响字体识别的前提下，省略掉其中的一些笔画，可在视觉上产生新的留白空间。添笔：可以简单理解为某个笔画或某个部首的大胆添加，很常见的一种添笔则是在不同黑体的“口”字处理上，不仅体现了不同字体的特征，也增加了字体的个性与统一性。断笔：以字面的理解为笔画结构的断开，可以使笔画较少的文字视觉上变得丰富。一般在转折或者笔画交接处产生断开，虽然断裂，但是视觉填补会使字体产生新的节奏感，随之而来的是留白空间和灰色面积变大，字体会有呼吸感。连笔：不仅仅局限于笔画间的连笔，还包括字与字之间的连接。连笔在字体设计中最为常见，因为连笔即能出效果，在执行层面来说难度相对来说比较低。《绅士》《孤勇者》-字体帮字内字外顺势相连：在字体组合可通过这种方式连为一体，在单个字体中，也可将笔画与周围笔画相连， 同时一定会伴随着笔画的断笔与方向或长短的调整，使字体看起来更来连贯，字形更加简约。间接组成一个整体独领风骚，而不是每个字体之间的争奇斗艳。致使视觉冲击力大大提升。字外错位相连：将原本笔画断开后与相邻字的笔画相连接。添加笔画相连：将需要处理的笔画做出结构性的改变，不仅不会更复杂而且会是字体从视觉上看更加饱满。调整字体排版进行连接：通过调整字体位置，促使笔画处在同一水平高度后延长某些笔画进而连接，不仅使字体增加层次感，而且使字体性格更加突出。图形替换：通常是将字体中某个笔画或者是偏旁部首进行图形置换，这里一般使用与场景或词义相关联的图形。不但可以创造新的字形，而且可以更加生动地传达场景含义。笔画修饰-添砖加瓦：可将笔画两端或局部增添细节，这样整个字体会看起来更加饱满，最简单的事例就是中文字体中的黑体与宋体的对比，宋体相对比黑体，它的末端都会出现一些小修饰，使字体氛围更加有内涵和内容。字体来源《字体帮》字谷填充：很多字中的某些结构处于完全封闭的状态，这时可忽略内部笔画，直接将封闭结构用颜色进行填充，切记不要使用深色的颜色进行填充，会使得整个画面显得异常的压抑。字体来源《字体帮》描边反白在设计中描边是经常会用到的功能，它具有很轻的隔离属性，在字体设计中不仅可以通过添加效果完成描边。还可以使用投影形式进行描边，做出伪立体的感觉。说到投影，我们可以将字体的描边不再拘泥于字体边框的描边，而将它变为自定义图形压在字体下方后会出现类似于泛白的效果，使文字更加突出，营造的氛围更随性，不受限制。外形处理字体来源《字体帮》平面透视：设置一个透视消失的方向，将字体的笔画做成三角形一边宽一边窄的效果，所有的走势都会聚合在一个消失点上，这种设计手法通常用于速度，洒脱，欢乐的氛围场景中。除了将笔画进行透视处理外，还可以对某个文字或者文字组合的整体进行透视处理。适当的将设计的透视效果做的夸张一些，这样可以营造出一种冲击感。借用繁体：在进行字体设计的时候，会遇到组合中有一个或几个字形和笔画相对于简单的文字，无论用任何方式都不能将字体变得更挺阔，此时我们可以将简单字体换为其繁体版本，意味着还存在更多的笔画设计方式可以探索，这样不仅解决了以上问题而且还使字体笔画变得丰富。繁体一出，整体感觉立马回归上世纪充满复古感和历史感。一般追求中国风或者老字号的品牌常用。笔画翻转：在设计字体时，打破定向思维，将文字中某些短小的笔画进行反转，虽然这样的设计手法不会给画面带来太多的新意，但是小小的变化，大大的成长，有时甚至可以将其视为神来之笔，会让字体与众不同。错位＋重组错位一般我们将做好的字形做最后的处理升华时会利用错位来实现，可以使用整体的倾斜，旋转，拉伸以及变形，也可以将组合中某一部分进行错位偏移，延长，放大缩小，或者局部消失等操作。错位的方法在破形同时还保持了字体组合的整体性，让字体组合不再呆板，增添一丝小想法，让字体设计添了几分趣味性。重组我们把字体组合当作搭积木，打破固有思维，见缝插针将文案外形排成一个有棱有角的矩形，这样中规中矩的设计形式永远不会失误，并且整体处于一个非常平衡的状态。一般我们除了利用组合形式外还会与错位搭配来使用，错位可以很好的冲击掉组合的呆板添加一份趣味。这时错位带来的留白空间过大时，可利用小的英文字母或者拼音进行补位，切记一定要小一些，要做到既抢不了主题文字 C 位，还起到了装饰的作用。周边装饰图形压低将已设计好的字体直接压在几何形体上，这样可以使字体更具有统一性和整体性，由于几何图形的压底，间接将字体组合的整体的字面扩大，在画面中能更快的吸引用户的注意。《劲舞团》《战意》《寻仙》字体帮图形装饰利用常见的几何图形“圆点，等距矩形，等边三角，波纹等”对文字做出装饰，这种方法是最快且最出效果的方法，但是使用不当或过多的装饰就会让用户感觉设计比较 old school。《过火》《再回首》字体帮字母装饰字母装饰一般使用英文或者拼音，在整体设计中字符不会太大，不能抢了主题文字的戏。常常被用在文字错位时出现的留白区域内。不是我说，小字母一加，那逼格蹭蹭拉满！《发财》字体帮图案装饰顾名思义，是将文字具象化为小图案后加入设计中作为装饰点缀。《让子弹飞》字体帮全局装饰是将字母，写意，图案装饰三位一体，做到整体化，统一化，全局装饰需要更强的逻辑思维以及创新能力，会营造出强冲击力，经常出现在拉新促活的运营页面中。《街头篮球》字体帮借人之手，修饰己身在多个文字组合中，由于每个字的笔画形态都不一样，设计出来难免会出现交叉或其他状况，这是需要在字与字的交叉处进行笔画走势廓形的反白处理，使这个交界处形成端非断的状态。通常这种修饰不会过分影响字体的整体性，反而会视觉补充会让让整个字体更加统一。《纸短情长》《忽然之间》字体帮外形变化现在我国的设计逐渐偏向简单，内敛，大方的方向，外形变化效果也逐渐减弱，最近发现在东南亚运营活动中频频出现。笔画变化描边：普通的描边的效果过于粗糙，平时工作中给描边加一个渐变，让整体看起来层次感更加丰富。节外生枝：可理解为将某一个笔画进行延长后，适当的根据氛围，语义，文字性格将延长部分做弯曲变形，节外生枝的设计手法会将整个字面有一个扩大效果，更偏向于女性，自由等语境进行使用。《不染》字体帮颜色叠加笔画换色：将字体其中的某些笔画颜色改变，这个方法与笔画反转影响类似，打破定向思维，虽然变化很小，但是让文字有了亮点，让字体视觉上变得与众不同。渐变叠加：这是经常在字体设计中使用的技法之一，在笔画间或者笔画内加入渐变，让笔画之间产生叠压感，整体变得更有层次。3D厚度由于我们经常做的都是平面物料，当画面中有一个伪 3D 效果文字的出现，在画面中是非常加分的，能第一时间吸引到用户注意。外形效果反光投影2. 矩形造字对于刚刚开始做设计的同学来说，字体设计虽然很不起眼，但是却非常给画面加分，字体设计也是促进用户进行下一步操作的关键。但字体设计看似简单，但需要漫长的学习过程，在前期不熟练的情况下，利用字库字体骨骼进行矩形造字是最容易上手的，并且做出来字体方方正正的很规矩，不会出太多的错误。① 选择性格、语义、氛围合适的字库字体，将每个文字都单独置于矩形框内。矩形框的高低宽窄的选择也同样依据需求性格、语义、氛围制定。② 将每个文字拉满整个矩形框后确定矩形基本笔画粗细。③ 按照准备好的文字框，骨骼，笔画进行拼凑字体，注意字体重心位置。④ 将拼凑好的字体进行细节修饰和基础排版。⑤ 添加氛围颜色修饰字体。多字移植嫁接如果了解这些基本方式后，还是觉得很复杂，工期时间不够，这个方法一定要收好。① 字体内容进行分析脑暴后对标题的性格有具体了解② 依旧打开神奇的字库，找到和标题性格类似的多个字体，依次排列③ 将多个字体的不同部分拼凑组合成新的字体④ 加一些装饰统一字体样式。字体骨骼填充① 字体内容进行分析脑暴后对标题的性格有具体了解② 打开神奇字库，找到和标题性格的两个样式完全不同的字体③ 将字体 a 的各个笔画拆解出来填充在字体 a 的骨骼中④ 加一些装饰统一字体样式。3. 使用场景分析在平时的运营工作种类繁多，遇到的活动类型也有所不同，大致将所有活动分为以下三类：日常运营维护这一类运营工作是为了让产品内容日常更新不断更，保证用户每天进入产品看到的是不一样的内容，这一块基本上是稳固用户。这一部分在做字体设计中，无需过多的字效，基本字库字体稍稍变形就可以完美适应。常规节日分发基本上是遇到一些小节日做的一些运营活动，稳固老用户的同时希望能够吸引到信用用户的参与。这时的字体设计就要在基本的字形上进行一些字效修改和装饰的添加，一年下来这一阶段的工作内容占大多数。大型拉新促活这一类工作主要负责“内容”与“用户”的关系以及产品的“营销”，即通过好看、有趣的活动手段，使用渠道，触达用户。既要呈现产品的“好用”，还需要产生强转化与留存。这使得字体设计直接用于大标题使用，一定要使字体与主题有一个强绑定的关系，继续吸引用户注意。同时确保用户在首屏可以全部识别到。4. 关于自己的思考现在的运营设计师和之前的平面设计师的工作内容有本质上的区分，首当其冲的探索方向就是优化工作方法，在此基础上不仅需要帮助用户拥有持续不断的的良好体验，还需要让自己不断适应快速变化的流行趋势。高质量的运营设计师工作中不仅仅是将图片做的好看这么简单，更重要的是关注用户反馈，对不同的问题采取不同的信息传达的方式，选择一款优秀且合适的字体也可以完美解决运营设计工作中的一多半问题。除此之外还需要时刻思考如何在保证作品质量的同时可以更好的提高作品点击率与转化率，什么样的方式可以更快地实现商业目标。文献参考1. 《文字造形》- 魏朝宏 著2. 《中国字体设计人：一字一生》- 廖洁连 著3. 《治字百方》- 左佐 著4. 《设计师的自我修养》- 左佐 著5. 《字体设计定位于通用字形》- 迟同斌（笔名：开心老头）著魏泽培,周妍姗.字体设计在平面设计中的重要性探究仍.艺术品鉴,2015(08).6. 《竖屏思维：大幅度提升手机端转化的逻辑和方法》-陈柱子121 李远竹.字体设计在平面设计中的应用探究仍大众文艺,2012(21).3 杨额.字体设计在平面设计中的重要作用四 社科纵横(新理论版)，2008(03).7个技巧让你的字体设计拉满细节感！前不久一个朋友把自己设计的字体发我看，说总感觉差点意思，但又不知道问题出在哪里，就觉得没有网上看到的字体那么专业，我看了一下，发现主要问题是没有细节、缺少变化，所以显得有点粗糙。阅读文章 > 欢迎关注作者微信公众号：「YTY DESIGN」本篇来源：优设网原文地址：https://www.uisdc.com/operation-font-design-2
用户 产品 客服 企业级产品中常见的问题腾讯企点产品线，包括客服、电话营销、商通等 SaaS 产品，产品受众角色多，业务场景复杂，由于角色与场景的复杂性，在产品设计中也遇到了一些问题：腾讯企点往期实战案例复盘：腾讯实战案例！企业产品如何做好用户教育系统设计？toB 产品具有逻辑复杂、使用门槛高、试错成本高、用户角色多样化的特点，通过用户教育设计向用户传递产品价值，提升产品易用性与可学性。阅读文章 > 1. 产品界面信息量大，操作繁琐任务流程复杂；界面信息量大、复杂度高；核心功能操作步骤繁琐2. 产品功能复杂，用户难 get新功能透传不够直观；视频等功能透传效果好的形式制作成本高；3. 品牌形象对外宣传不统一品牌动态对外宣发文章/素材 logo 缺乏统一形象。面对上述问题，除了常规的交互视觉优化外，探索基于动效的方式来解决企点在用户体验、用户教育、品牌传递三个方向的问题，提升用户教育效果，标准化视频制作流程提高视频质量并降低制作成本，建立可持续的动效设计系统，规范动效在产品内外的设计，提高易用性与统一性。基于上述三大方向遇到的问题，我将从以下三个方面来介绍：Part 1 巧用动效，提升产品体验友好度Part 2 动效传递功能亮点，产品特性秒 getPart 3 基于品牌内核，建立动效设计系统Part 1.巧用动效，提升产品易用性任务流程复杂？- 聚焦核心任务、优化信息布局与优先级分层结合场景梳理任务流程，通过动效将界面信息层级与操作优先级结合，聚焦核心任务，从而降低界面信息复杂度。知识库内容展示层级优化在客服工作台中，访客的问题命中了知识库的内容，则会展示知识库的预设内容，辅助客服进行回答，以提高接待的效率。由于每个问题对应的回答内容长度与形式不一，如果直接展示这些信息，有可能会导致寸土寸金的聊天窗被辅助文本占用过大的区域，影响客服操作。因此在设计策略上，需要将信息进行分层，将命中内容拆分为摘要和全部信息，当触发知识库的内容时，先展示摘要，客服可以快速判断是否需要，如果是则进一步展开查看全部信息，确认无误后发送给访客或者编辑后发送给访客。通过动效，将命中内容改为抽屉式的展开与收起，把信心拆分成多级展示，既保证了整体页面区域的信息展示，又能够通过简略信息判断下一步的操作，提高了操作效率。客服工作台信息响应规则优化在工作台左侧最近会话列表不同角色有不同的信息展示：标签是判断客户的重要信息来源，以往的标签存在单个标签字数显示固定 3 个，标签数量显示固定 3 个的问题，导致标签可读性低、容易产生混淆、空间利用率低。因此优化的策略是在有限的空间内展示更多标签，且不降低可读性，这里分两个维度考虑：1.标签展示的数量；2.标签内文字数。其一是影响判断客户的维度，二是单个标签信息展示的可读性。通过动态的响应规则，优先满足可读性的情况下，充分利用空间，客服标签信息快速在列表中判断不同的客户，根据实际需要选择应答，提前做好话术准备，提高接待效率与服务的质量。界面焦点分散？-强化视觉吸引与视觉反馈动效可以吸引用户的焦点，在基于浏览器的中后台界面中，使用者大多是多焦点工作，以提高工作流的效率，对一个工作流中的功能，适当的环节加入动效，可以引导用户按照预设的流程工作，从而提高单点功能的预期效果。提高机器人回答反馈收集率客户与客服沟通过程中，企业会引入客服机器人对客户服务以降低人工成本，初期接入机器人回答的能力后，存在未能解决用户问题的回答，除了通过算法进行调优以外，在功能设计上也需要为用户提供反馈通道，通过点赞或者点踩，可以疏导因机器人回答不准确导致的用户情绪，并帮助机器人优化回答精度，利用 hover、press 等操作方式，引导用户反馈，手型变化趋势亦可降低点错率。功能指引内容外露，提高用户教育效果企点中后台页面中，部分功能比较复杂不好上手，将帮助内容做成视频的形式可以提高用户教育效果，为让帮助内容触手可及，在中后台配置页的右下方集成播放组件，为企业提供更专业的配置指南，每次进入页面时，自动展开具备吸引力的文案，在一段时间后收起。在合适的时机通过展开的动画吸引用户转移焦点，自动收起逻辑避免用户不需要的情况下遮挡页面的内容。操作步骤繁琐？-优化层级减少额外步骤核心路径的工作流中，引入支线的操作往往会打断主线任务的操作，降低主线工作流效率，将支线任务通过同一界面的不同层级进行优化，以降低对主线操作的影响，从而提高主线工作流效率。快捷回复层级简化快捷回复是客服的高频核心功能，在 PC 端我们利用 hover、双击等多种交互方式可实现快捷编辑与发送，但移动端交互方式以触摸为主，如何让移动端也有类似 PC 端的高效操作呢？在页面层级，移动端定义了一套弹层页面规范，弹层的应用场景为临时的操作或展示，在于不打断操作流程，减少页面跳转。快捷回复的内容用弹层来承载，减少页面间的跳转，并利用层级关系做不同层级间的交互，也可长按拖动直接发送，在习惯这种发送方式后，可以更加直观高效的发送快捷回复内容，也减少了操作步骤。Part 2.动效传递功能亮点，产品特性秒 get产品功能总被忽略？- 氛围动效吸引用户驻足经常会遇到新的产品功能使用数据不理想的情况，也许是内容透传的时机和内容本身不够吸引力，从而被用户忽略，将产品的核心能力与具有吸引力的内容结合，往往可以达到更好的透传效果。客户端新手引导氛围渲染新用户首次打开客户端时，需要进行一些简单的设置，用户对于弹框形式的新功能会下意识的点击右上角关闭，阻碍了功能的介绍和初始设置的完成度。客户端的弹框受众和对应的目标为以下三种：新用户首次使用：需进行简单的设置，同时承载核心亮点功能的透传；老用户版本迭代：新版本升级后对于版本一系列的新功能介绍；老产品升级用户：除了新老用户外，企点还存在从老产品迁移至企点的老用户，因此更多是介绍两者的不同，企点的优势等。弹框内的信息比较重要，设计方案上考虑动效的形式，在首屏吸引用户关注，提高点击率。通过轻松自然的客服形象，围绕企点轻快、亲和的品牌元素，周围的聊天气泡代表高效的消息处理，营造出轻松高效的氛围。针对老产品升级用户，动态语义上强调穿越到新世界的感觉，表达了新产品完善的功能：动态引导图上线后，相对于以往的静态引导方案，点击率有约 50%的提升。电子行业商机应用氛围渲染在电子行业商机应用中，商机对于中间商来说意味着成单与获客的机会、销售额的增长，用户首次进入时会有动态商机墙，铺面满眼的商机，在告诉用户使用这个应用可以获得海量的商机，除了吸引用户的效果外，也起到传递产品核心能力的作用。在商机列表页也增加了轮播广播，商机热度等动态，营造出热闹、紧俏的商业交易氛围：宣传视频流程化，提升产出效率与质量做好产品的同时，如何卖出去也同样重要。在销售过程中，传递产品的亮点与能力，最终打动决策者，可以提高销售业绩。企点产品主要通过各级经销商售卖，以往是经销商将产品卖点功能通过录屏，并播放给客户，这种视频主次区分不明显，且视频冗长，往往效果不是很好，影响成交率，进而影响到销售业绩；但更好的效果意味着更多的工作量，如何在不增加工作量的前提下提高视频的效果，为满足于此，建立教育内容素材制作流程，包括视频脚本流程、转场素材、合作规范等；基于标准化的流程，可快速生成高质量内容。当有新的视频需求时，可快速拉通相应负责人，同步视频受众与核心用户场景，提炼串联的核心能力并套入脚本模版，制作过程根据视频内容套入合适的转场素材，并快速输出多设备多渠道的宣传视频，帮助商务讲好故事，帮助销售讲好功能，帮助产品做好宣传。相对于以往制作视频，平均制作时长从 2 周左右一条优化为 4 天左右一条，同时视频的质量与统一性也有比较好的提升。Part 3.基于品牌内核，建立动效设计系统当越来越多的需求与功能我们开始用动效来解决时，也会发现一些问题：1. 协同设计下，如何保证设计的统一性，2. 动画缓动是否有据可循，时长如何定义，3. 协同设计下，动效的认知不同，从理性和感性两个方向来考量，从设计者角度来看，应该更多的理性来思考如何构建一个具备特定调性的动效，从观看者交互来看，更多的理性感受动效所传达的调性。1. 动效基础原则在企点的产品线中，动效也会应用在产品体验、用户教育与品牌传递三个领域，业务的深度和广度都比较大，因此须有指导原则来统一动效的设计，使用户在企点产品中获得一致的体验与感受，从而形成固有印象，加深对于产品认知度。企点体系的产品调性是一致的，动态的语意也需要保持与品牌调性一致，基于企点的品牌内核：轻快、高效、亲和，来指导企点的动效基础原则，再规范企点不同领域的动效设计，从而保证企点整体的调性一致。将品牌内核的关键词映射到动效的主观感受上，得出更加具体的关键词：2. 动效曲线的建立建立动效规范如同建立设计规范一样，是一个复杂且庞大的工程，这里以动效曲线的建立为例，阐述动效规格的建立过程。深入运动的本质“运动太生硬了”、“不够流畅”、“怎么这么拖沓”、“不错哦，看着比较舒服”这些描述大多基于主观感受，难以量化，需要将主观感受抽象成客观可量化的指标。将运动曲线量化为客观的物理世界的规则，连接品牌内核与运动感受。从品牌内核到运动力学力是改变物体运动状态的原因，要量化运动的变化的前提，是量化力的变化。运动过程中两个重要的元素：材质 和 力。不同的材质和力，会产生不同的运动变化曲线。从品牌内核出发，基于动效基础原则，得到 轻质、有力、连续变化 这三个关键词来描述材质和力。轻质 即物体质量较小，可以迅速响应力的变化，以实现轻盈、简短的效果；有力 即施加在物体上的力数值大，以实现流畅与快速响应的效果；连续变化 即力的大小与方向并非固定的数值，会随着时间变化，以实现缓和舒服的效果。反应到实际的运动中，轻质的物体与大数值的力，会在很短的时间内进入最大速度，同时通过连续变化的力，迅速减少力的大小，在中后期进入缓和。在感知范畴，人的感知变化总是比变化晚一些，物体产生变化，到人感知之间有个时间差，且持续变化的冲击，会产生心里压力，如果在适应变化的节点减少冲击，则会感到舒适。基于此得到最终的运动曲线：轻快有力的控制感，延绵流畅的舒适感。同时针对进入与退出场景增加两种曲线：动画时长相同大小的力，作用于不同质量的物体上，达到同一效果的时长不同，质量越大的物体时长越长，因此，越大的元素运动时长越长，同时保持效率为先，适当缩短整体时长，抵消滞留感。时长的规则：轻快高效，退出快于进入，大质量物体时长大于小质量物体时长：回顾曲线建立的流程，以企点品牌关键词为内核，以动效基础原则为基底，以理性规则为表层，最终建立标准化动效曲线，同样适用于其他动效设计系统的建设。3. 建立品牌动效体系所有企点对外宣传文章、视频、展会等都是是曝光企点品牌的机会，动态的品牌元素可以在短暂的与客户交互的机会中，加深对企点品牌的印象。基于企点的品牌内核，同时对企点 logo 设计元素进行拆解，提取空间透视作为 logo 动态演绎的 DNA。强烈的空间感还原了企点 logo 的形成过程，线条辗转向上的动态语义也对应了腾讯企点帮助客户实现业绩向上，实现客户成功的愿景。企点的子产品众多，在各领域的应用须有统一的品牌调性，也要体现子产品的特点，因此子产品图形形态的是基于母品牌动态 logo，并结合了各个子产品的核心功能；比如客服选择气泡沟通元素，动态语意表达出亲和、轻松顺畅的服务沟通；“营销”采用抽象的漏斗三角元素，动态语意凸显倒三角的复购和裂变等。将动态素材化，可以应用到企点内外输出的任何需要动态演绎的地方。小结企业级产品面向的业务场景和角色都比较复杂，除了交互视觉上的设计策略外，探索动效设计系统在 to B 业务的用户体验、用户教育、品牌传递三个方向发挥的作用，为业务带来更大的增益，为产品提供更好的体验。腾讯出品！AE 动效设计必备指南（附超多神器和技巧）动效是用户体验的重要组成部分，也是产品调性的重要体现。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/tencent-company-point
抠图 在线 背景 大家好，我是和你们聊设计的花生~随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。之前向大家推荐了在线 AI 修图神器 Hama，能够轻松抹除图片中不需要的部分，与背景实现完美融合；还有在线 AI 抠图神器「Erase.bg」，能在几秒内快速从任何图片去除背景，并且以提供原始分辨率下载。不限次数！快收藏在线免费抠图神器「Hama」Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要阅读文章 > 又一个抠图神器！在线免费一秒搞定超好用！当今的在线去背工具多半会整合 AI 人工智能技术，以机器学习方式去建构出可准确辨识前景和背景的模型，使用机器自动化去除背景的好处是快速、精确而且无需额外编辑，即使没有专业绘图软件一样可以在浏览器进行，remove.bg 是在线去背服务最早出现、而且最强大的选择，后来也有 FocoClip阅读文章 > 今天要向大家推荐的 ClipDrop Remove Background 也是一款免费的在线 AI 背景扣除神器，它的背景移除功能非常强大，在 Producthunt 社区 5 月 12 日的每日产品榜单中排名第 5。据开发人员介绍，他们研发的算法使 Clipdrop 的背景移除精准度、速度和稳定性都达到了前所未有的高度。ClipDrop Remove Background 的功能特色主要体现在以下 2 点：① 能自动识别图片主体进行抠图，不会将颜色相近的阴影或背景错误保留：② 扣除背景的同时也能保持细节，并做到边缘干净无白边。Clipdrop 对上传的图片没有尺寸和大小的限制，处理时间最长不超过 10s，抠图完成后直接下载原图，支持输出最高 5000*5000px 的图片。我也上传了几张图片测试其抠图效果：首先是人物图片，原图尺寸 3917*5354px，大小 1.45MB，抠图时间为 7 秒，抠图后输出图片尺寸为 3658*5000px，大小为 7.92MB。抠图效果非常不错，头发部分的一些空隙都清除的很干净，衣服边缘也扣得很干净，没有模糊的白边。接着我又试了一张椅子图，原图尺寸为 3569*4461px，大小为 1.56M。抠图时间比人物图片更短一点，输出的图片为 3569*4461px，大小 8.94MB。抠图边缘同样非常干净，而且很精准的只抠出了椅子的主体。个人使用感受非常棒，能为经常需要处理抠图的小伙伴省去不少时间精力，感兴趣的小伙伴可以去官网体验一下： https://clipdrop.co/remove-background最后再为大家总结一下 ClipDrop Remove Background 优点：免费在线 AI 智能抠图，打开即用抠图速度快精度高，自动识别主体，边缘清晰无白边上传图片无限制，输出图片最高支持 5000*5000px以上就是今天的推荐，如果你有关于设计的疑问，欢迎加入优设官方设计交流群和大家一起交流，进群方式见下图本篇来源：优设网原文地址：https://www.uisdc.com/clipdrop-remove-background
插画 画师 画面 大家好，我是和你们聊设计的花生~这期继续给大家推荐5位值得关注学习的插画师。上期回顾这 5 位优秀的贴纸设计艺术家，是我每日学习的源泉！大家好，我是和你们聊设计的花生~上一期为大家推荐了 5 位擅长扁平风插画的艺术家：[link https://www.uisdc.com/5-illustrations-artist]今天要为大家推荐的 5 位艺术家，都非常擅长「贴纸」设计。阅读文章 > Patryk Wojciechowicz「Behance 主页」 https://www.behance.net/wojciechowicz「Dribbble 主页」 https://dribbble.com/PatrykW/shotsPatryk Wojciechowicz 是一位来自波兰的插画师，他的插画以自然景物为主，场景视觉层次分明，色彩绚烂，氛围感极强。Patryk 善于在插画中使用对比色与近似色，主色彩往往只有 2-3 种，通过明度差异制造前中后景的层次差异。在视觉中心使用高明度高饱和度的色彩，与周围的暗色调形成强烈对比，使视觉中心得以凸显。并通过添加噪点表现光的扩散， 使色彩间的过渡自然柔和，使插画光感通透浪漫。相关免费插画教程扁平清新的森林小插画丨 https://uiiiuiii.com/illustrator/1212213732.html如何在绘制矢量插画时实现噪点效果？丨 https://uiiiuiii.com/illustrator/1212113398.htmlPriya Mistry「个人网站」 https://www.priyamistry.co.uk/portfolio/「Behance 主页」 https://www.behance.net/priyamistry「Dribbble 主页」 https://dribbble.com/PriyaMistryPriya Mistry 是一位来自英国伦敦的插画师，他的用色大胆丰富，擅长用画面来讲故事，所以经常与杂志及新闻网站合作社论插画。Priya 喜欢用干净的色块加简单线条来塑造画面形象，无论是人还是物品，都只有 2 个层级的分形，再利用明度差异立体块面塑造，这使他的画面内容清晰明了，处理复杂的画面也不会显得杂乱。Priya 非常喜欢用油漆马克笔在纸上作画，画笔和画纸的纹理让插画的质感更独特。这样偏好也影响到他的板绘创作，Priya 喜欢用带有粗糙质感的画笔，为画面带来更多的手绘质感。相关免费插画教程PS 教程！手绘风格街头小景插画！丨 https://uiiiuiii.com/photoshop/1212372835.htmlPS 教程！4 步原创顶级扁平噪点插画丨 https://uiiiuiii.com/photoshop/1212330347.htmlJorsh Peña「Instagram 主页」 https://www.instagram.com/jorshpena/「Behance 主页」 https://www.behance.net/jorshpena「个人网站」 https://www.jorshpena.com/Jorsh Peña 来自墨西哥，是一位插画师兼艺术导演。他的插画偏扁平线条为，用极简的几何形状拼接出各种元素。画面中的意象奇幻神秘，用色对比强烈，有极强的个人特色。曾被评为墨西哥最佳 150 名插画师之一，与微软、谷歌、Snapchat 等诸多知名品牌都有合作。Jordan 喜欢用等距插画来构建立体事物和空间场景，对事物的抽象方式非常独特，画面中人如同中宗教中的石像，且经常会结合主题进行大胆的分离解构。高饱和度的用色常常铺满整个画面，再在局部用无彩色进行调和，这样即使色彩强烈也不会觉得眼花，具有透气感。相关免费插画教程科技感满满的 2.5D 机器人插画！丨 https://uiiiuiii.com/illustrator/1212353650.html从头学习绘制扁平风购物主题插画丨 https://uiiiuiii.com/illustrator/1212433830.htmlJuan Afanador「Behance 主页」 https://www.behance.net/juanchaco「Instagram 主页」 https://www.instagram.com/juanchaco0825/Juan Afanador 是一位来自哥伦比亚的自由艺术家，他喜欢街头涂鸦，插画也是同样的潮流风格。Juan 创作的潮流插画线条流畅，元素造型饱满。画面以高明度高饱和度的色彩为主，搭配渐变、波点、半调网格丰富效果。长期的创作积累让 Juan 已经形成了鲜明的风格，也有了自己原创的 IP 形象，很多知名品牌的都有与他合作，他的插画也衍生出了很多时尚周边，收到年轻人的喜爱。相关免费插画教程UDT 分享！教你绘制潮流风格商业插画丨 https://uiiiuiii.com/illustrator/121286858.html用 10 分钟教你创作国潮风新春锦鲤插画丨 https://uiiiuiii.com/illustrator/1212359444.htmlAndrew Nye「Behance 主页」 https://www.behance.net/andrewnye「个人网站」 http://www.ajnye.co.uk/Andrew Nye 是一位来自英国的插画师，他专注于矢量插画的绘制，作品构思精巧，画风细腻华丽。Andrew 非常擅长金属玻璃质感的绘制及对细节的深入刻画，这让他的作品有了突破二维画面的立体感和真实感；画面用色多而不花，始终带有如钻石般精致闪耀的质感。除了画风的精致，Andrew 的作品内涵也非常有深度，常能将日常事物的进行不可思议的组合，绘制出展示背后的深层含义与问题的社论插画。相关免费插画教程巨详细的霓虹炫彩插画绘制过程演示丨 https://uiiiuiii.com/illustrator/1212430179.html创意手电筒灯塔插画设计教程丨 https://uiiiuiii.com/illustrator/1212420504.html以上就是今天的分享，更多相关插画资源头像如何画才能简单又传神？资深插画师6大步骤经验全分享！关于我：优设大课堂金牌讲师，高级原画师、插画师。阅读文章 > 我们邀请了3个优秀插画师，总结了这份商务合作流程指南本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/sticker-design-3
测试 用户 可用性 前言这篇文章针对车载行业的可用性测试，我们做一下深入探讨，前面几篇跟下来的读者也都知道我写作的节奏，前面会深入讲解该主题的基础内容，并结合一些我工作中实际案例给予大家去了解，后半部分以实践案例为主，将前面基础知识融入进来，结合案例进行剖析可用性测试，这次文章大纲分为三大内容：可用性基础知识、HMI可用性测试实际工作内容、HMI可用性测试评估维度体系，最后一点是重头戏。往期回顾：万字长文！车载 HMI 语音设计基础知识科普前沿：开头必须来一句，我相信语音一定是未来，我非常确认这篇 HMI 的语言探索以介绍语音交互内容为基础，结合我的实际工作项目经验，输出总结关于语音设计的内容，最后结合案例，在对话设计中会进行深度的探索，并提出个人的想法和思路，因为有的时候深度去思考觉得我们项目还可以有阅读文章 > 万字干货！超全面的HMI 竞品分析手册他来了～ 他来了～ 一个月时间的打磨，不知道熬了多少次通宵了前沿：为了输出这篇竞品分析文章，我也是够拼了，利用周末的休假时间，预约这四家 4S 店进行试驾，并进行对车辆的拍照，和销售对话的录音等获取到一手资料，再去做分析、总结这一次的探索。阅读文章 > 我们在文章前夕先谈谈可用性测试与用户访谈，可能后期也会针对 #HMI 用户访谈# 这块内容会再输出一篇文章。可用性测试和用户访谈的区别 可用性测试更偏向于观察用户的操作行为，而用户访谈是更好的挖掘用户的需求。可用性测试是为了找出产品的问题而测试，通过这种测试找出产品中存在的问题，加以解决，最后目的也是为了让产品用起来体验更加。大家也发现了，关于 HMI 设计类文章很多平台上很少有，还有设计师工作中用到的设计方法论，如何运用到 HMI 车载领域当中，确实都很难找到，并且专业领域的内容车厂也不愿意拿出来分享，我一开始写文章的初衷就是想打破这个格局，虽然一个人力量很小，但我还是坚持做下去了，希望通过我的分享能够让更多的人能进入这个赛道，并且也能输出自己的经验传递下去，成为光，并散发光。进入我们今天的正题吧。可用性基础知识ISO9241 中对“可用性”的定义是：特定用户在特定的使用场景中，为了达到特定目标而使用某产品时，所感受到的有效性、效率和满意度。1. 可用性原则有效性（Effectiveness）：用户完成特定任务的情况。比如：设定一个调节空调风量的任务，让用户操作，记录员在旁边记录用户的一个完成度的情况，成功完成、求助后完成、未完成的状态。效率性（Efficiency）：用户完成特定目标的效率，任务完成时间和完成的一个路径。在记录过程中如果在一个正常时间范围内无需关注，主要还是要记录在某些功能上面花费较多时间完成的任务。在操作路径上也要观察，是否符合我们设定的操作路线，是否存在偏差或者是犹豫不决的地方。满意度（Satisfaction）：用户使用该车机系统主观满意度，当然我们也要提前做好一些标准，比如任务完成的难易度进行评价，任务完成的满意度测评等，总结一下一个好的可用性必须能够满足这三个维度，这三个维度也会有一个重要程度之分，有效性 > 效率 > 满意度。需要最后补充一下：在评估一个任务可用性以外，还要需要注意该功能的价值，尤其是 OTA 升级发布新的功能，功能价值分为两类：用户价值和商业价值，作为设计师的我，觉得用户的体验应该是放在第一位的，有了好的体验才能够更好的去谈商业价值，不然就是在扯蛋。例如 我们在优化负一屏中的体验，将调节音量新增了可以调节四种音量大小，多媒体、电话、导航、语音，旧版本的音量调节，用户经常会吐槽，因为当时功能设定负一屏音量调节是整个的一个系统调节，你在音乐调节很大音量的时候，如果有一个电话接入进来，对方说话声音就很大，会吓到用户，这个在驾驶过程中会很危险的，因此在OTA升级后，我们做了优化。2. 可用性测试类型其实可用性测试方法和类型很多，会在不同情况下使用，选取的方式也是需要看团队设定的目标、在什么阶段、最终的预算能有多少钱，真的，没钱很难办事情。探索性测试：产品在不同阶段，可根据不同的测试类型做可用性测试，在产品初期可使用探索性测试方法，利用产品的原型图展示给用户，探索性的测试目的是，用户是否对这款产品有所了解，如果在某些方面有所疑惑需要记录，根据多组测试，重叠性较高的功能就需要 UX 去优化，在产品初期需要不断的试错。比较性测试我们先说一下比较性测试，我们在做设计时会出几个不同的方案，需要在这个几个方案中做出选择，如果公司非常重视测试数据的话，会将设计方案同时上机进行路测，最终结合数据，让体验专家评判方案之间的优缺点，最终决策出符合用户体验的方案；另外一种比较是选择两种或者更多的产品，去研究他们优缺点，确定哪个设计方案能够提供给用户带来良好的操作体验；这两种方案取决于项目的时间长短，如果像服务形的乙方需要快速的出方案，则更多的采用的是第二种，甲方有着自己设计研究部门可以给到部门有试错的时间成本，那么他们更会倾向于两者相结合的方案，我们只能提供可行性的方案，最终还是需要领导层进行拍板实施。评估性测试当产品进入后半段，在发布版本前后，上机进行测试，HMI 上机测试分为在室内台架上测试，另外一种是装机在道路上测试，不同场景的路测，在这个阶段的可用的测试方法是评估性测试。评估性的可用性测试目的是确保这个产品在发布之前将潜在的问题进行修复；在版本发布之后本公司或者一些测评机构会根据自己的评测标准进行对这款产品进行评估测试，对照自己的评判标准进行打分，方便后续 OTA 升级，版本优化迭代功能。3. 可用性测试方法相信大家对于定性和定量这两个词并不陌生，在可用性测试中承担着重要的组成部分。定性 / 定量研究定性研究是指参与本次车载系统的体验者对于可用性的一个直接评估，从而产生结果，并且发现哪些功能在操纵的时候会出问题，有哪些体验是觉得不错的，哪些功能的体验需要进行优化，听完这些内容是不是觉得和车载系统的专业测评人差不多了吧，当然，在做这个定性测试的时候需要找不同的人群进行测试，需要做到完整性。定量研究也是我们常用到的一个测试方法，定量研究出的数据对于可用性启到了间接评估，通过参与本次车载系统体验的用户，观察他们在操作事先列举好任务上的表现状况，这些状况包含了本次任务完成消耗的时间、完成的成功率、错误点击等；定量研究的结果是一些简单的数据，这些数据需要有一个参考的依据，一个已知的标准，要么就是竞品体验的一个对比数据，还有一个是自己车载系统前后版本的一个对比看看改进多少（专业术语：ROI），一个词需要找到 “参照物” 。例如：在多少秒内操作是一个安全的范围值？单次交互操作动作不能超过 2 秒（1 秒内为最佳）如果一个在行驶过程中需要交互操作的动作 用时 2-3 秒就已经是一个危险状况，所以我们参考这个依据，可以进行对我们车载系统做一个判定。定量的数据是有了，参考标准也有了，有的功能方案是不 OK 的需要去优化，但是这些数据没有告诉我们如何去优化它，需要在设计方案中何如去优化？定量分析研究只是记录了一个过程中得到的数据，也没办法得到用户在什么项目中遇到什么困难，比如车辆设置中的调节 ADAS 的某一个设置选项，用户不知道在哪里寻找，我们只能记录这项任务失败。所以在为了更好的做可用性测试，我们通常会使用定性研究来增加进行补充缺失的部分。如何运用定性和定量研究前面有提到他们之间的区别，那我们在日常的工作中该如何的运用呢？在什么阶段用什么研究？在发布车载系统 1.0 版本和后续迭代版本优化 1.x 版本，可以使用定量、定性、两者组合性来评估，如果这次评估的目的是数据方面，在这个功能点上我们优化多少，提升了多少用户使用了这个功能，那么就需要采用定量分析，因为只有定量研究才能得出每一个版本对比上一个版本到底优化了、提高了多少。需要针对车载系统重新设计内容时候，要通过定性的研究方法去完成，在这个过程中用户的角色是承担为设计提供可行性方案的人，他会觉得在哪方面可以进行优化，到得这些用户数据和意见之后，也便于设计师们做出选择性的优化，创建出一个新的体验感，所以这个阶段使用定性研究方式更为适合。举个例子：用户在体验过程觉得在操作调节音量的交互感觉不好，抓住关键词“调节音量体验不好”，那么就要询问清楚，问到用户：“是在下拉出现的负一屏中 调节体验感觉不好，还是在进入设置项中的去调节音量体验感觉不好呢？因为在做定性的研究的时候不会设定怎么进入，因此会出现通过多种方式去操作系统某一个功能，所以需要针对这个问题询问清楚，才可以正确的优化这个体验流程。后面还需要跟进这个问题，是操作步骤过多，需要优化路径？还是在滑动的体验感需要加强？等这类问题，当然也可以让体验者去叙述他自己的点。如果同样的去发现这类的问题，你去使用定量那么会增加很多工作成本不说，预算成本也会增加。可用性测试实际工作内容由于我们项目的保密性，不能透露过多内容，我将这次案例换成了其余车载系统，这次可用性测试的目的是系统评分数据1. 设计任务前面提到定量研究测试，是请多名用户来参与对我们车载系统的一个体验，我们将原先设定好的任务对用户进行说明，然后我们在车内观察用户使用我们产品的一个状况。可用性的评估是基于任务的，所以接下来我们讲一下任务的五个原则：锁定主要任务、明确任务起点与目标、给任务设置约束条件、任务不应过于简单、避免提供线索和描述操作步骤主要任务用户在使用车载系统目的有很多种类，需要听音乐、电台、看视频、导航到目的地、接/打电话、调节空调/温度等等，可能会有上百个功能点需要去操作，但一场测试不可能全功能进行测试，我们只有挑选出最重要的任务来进行测试，或者是刚上线的车载系统，需要测试一下基础功能评测，如果遇到产品 OTA 升级或者是改动很大的版本点，会改变用户的操作步骤，更或者是新增加的功能，都可以优先测试。再举个例子：任务：调节空调的温度我们需要观察的是，他是如何调节空调温度的（我们设计师自己肯定知道全部的调节方案）第一种方案：可以点击导航栏下方的温度，点击可以进行前后拖动来改变温度第二种方案：按下方按键，呼出语音 “温度调节到 21 度”明确任务起点与目标在可用性测试中最重要的就是用户能否可以完成任务项，所以需要明确目标，如果没有的话，就无法判断用户是否完成任务，我们最初设定一个目标。例如 “在音乐界面中将播放模式调成单曲循环模式”这是我们这个任务的最终目标，只要最终用户在音乐界面中将播放模式改为“单曲循环”即为此项任务成功完成。给任务设置约束条件在设定任务的时候，会出现可以多种方式去完成，上诉案例空调调节温度，就可以使用两种方法去完成，因此如果本次全程操作不允许用语音操作（这是作为一个约束的条件）本次的全部测试项目是关于在中控测试评估的，语音会有他自己的一套测试任务，这些都需要在任务开始前设定好的。任务不应过于简单如果你想测试用户是否找到这个功能，请不要用“找到一个 xxx 暂停按钮”，我们需要给用户提供一个处理现实场景中的任务，而不只是去找这个按钮的位置，例如：“找到音乐暂停按钮” 改为“在酷我音乐界面暂停一首歌曲”这样会有一个明确的场景，这个场景是可以运用到现实驾驶中出现的任务，如果变成“找到音乐暂停按钮”就属于一个不 OK 的任务。避免提供线索和描述操作步骤设计任务的时候应该给出具体的目标，而不是列举好的整个操作步骤去教用户去完成，这个跟说明书没两样。例如：“购买酷我音乐的季度会员”。进入酷我音乐界面、点击酷我音乐中我的、然后点击会员中心、再点击续费、出现弹框选择季度充值、最后扫码付款。用户在接受到这些信息后，就知道先进入音乐应用、找我的、寻找充值入口、最后再进行支付。引导性过强的话会失去任务测试的意义，这样做会错失用户在操作过程中发现的一些问题，观察员也将错失记录的机会，如果没有这提前事先布置好的步骤，可能会出现一些操作让他感觉有异议，不知道自己是否操作成功或者是是不是点错了等等状况。在用户使用产品的时候，我们应该考虑使用的目标，不是考虑具体的操作步骤。我们在设计任务的时候一定要避免提供线索和描述操作步骤给到体验者。总结一下针对用户来看的话，车载系统对他们只是一个工具，达到他们想要的操作目的“比如听音乐、导航”这些功能目的，所以在可用性测试中，我们需要把测试车载系统某个功能目的作为重点。2. 招募人选在招募人选问题之前，需要根据这次测试的目的和需求，确认是定性研究还是定量研究或者是组合性的研究测试方式，这次的目的是对于新系统的一个评分，这次研究方向确定好是做定量研究测试。定量研究可用性测试是基于（30+以上人 体验者），但也有时候定量研究也会少于 30 人，因为预算的问题，或者其他的原因无法请到这么多人，因为招募车载系统的一个体验用户，相对于招募去体验 APP、网页端产品、还是 B 端的产品，都会难很多，因为条件的限制，所处的环境也变化了，因为是有驾驶的一个状态，还需要去操作提前布置的任务，所以在招聘人员的时候确实相对其他平台要难。数据就会存在一些偏差。定量研究通过任务的完成率、完成时间、满意度进行评分。这些总结性的评估数据，通常都是用于车载系统的迭代过程的跟踪，在下一个版本中数据是否得到提高，从而达到优化的目的。另外给大家补充一下定性研究人员选择定性研究用户可以 5 人参加这场测试，就可以发现大多数（85%）的产品可用性问题，随着用户的增加，会发现的问题会逐渐减少，因此最终定性研究分析选定的人数需要我们去考量。在后面的实际案例中，我们采用的是定量研究，会针对整个定量研究全案做一个详细的解说，也会增加一些定性的来作为补充说明。总结一下：我们要根据实际情况来确定我们招募的用户数量，对比每一次的测试结果于后续 OTA 升级后的效果，是否需要增加投入的预算来做可用性测试。3. 准备工作在做可用性测试之前需要规划好准备的工作事宜，先是测试地点和工具的准备，后续是相关资料的准备，后面需要签署保密协议，最后就是整个的可用性测试剧本准备。测试地点和环境HMI 车载系统测试场景相对于其他端的测试场景要多，这些不同测试地点和环境主要目的就是针对影响用户操作的因素来做多方考量。车载系统测试的地点：路测（大马路上，封闭路段、正常道路）、地下车库、路面停车场、隧道等车载系统测试的环境：晴天、雨天、阴天、下雪天、雾霾、沙尘暴等对于硬件的测试还会增加在不同温度/湿度下的测试：极寒地区、干旱地区、常年潮湿雨水多地区等等（这类测试跟设计关系不大，想普及一下）准备的工具 需要在测试车内装机好需要测试的系统；安装眼动仪来记录用户的观看轨迹，便于后续优化界面设计和交互设计；还需要后排记录人员跟拍操作录像资料，便于后期的分析操作细节。相关资料首先就是准备整套测试中的任务卡片，便于用户查看；还有要为自己准备一张表格，记录用户操作中出现状态的数据，如任务是否完成、完成时间等状态；还有一些记录关键事件和测试中观察用户体验的表格，比如设计中可能会出现的问题，方便结束后进行总结，加入到后面迭代版本点中。签署协议在测试期间需要签署保密协议等，因为用户测试的是未上线的产品，为了确保项目安全起见，需要让参与测试的用户签署保密协议。剧本准备HMI 可用性的剧本准备和其他基本类似没有过多的出入，这个过程是：接触用户 开场白 开始测试 事后访谈 给予奖励并送走用户的整个过程，这些相同的剧本准备、还紧跟后面的观察、访谈这些内容，大家都可以自行搜索，因为下面还有更重要的内容需要细讲。最后一步就是分析前面所得的数据，但需要一个标准去评估衡量，下面进入我们本篇文章最核心的部分吧。HMI 可用性测试评估维度体系对于 HMI 车机系统可用性测评有很多的标准，我们对 Thoughtworks 的度量标准进行了分析学习，根据前面的可用性测试原则，最终得出评估的三个维度：视觉行为表现（Visual Behaviors）、HMI 软件任务表现（HMI Task Performance）、主观感受（Subjective Feelings），这测试的体系主要针对的是动态测试下的 HMI 车机系统可用性测试的标准，静态测试（注：静止状态下、车辆未启动状态下的操作）任务还会有另外一套测量体系的标准。1. 视觉行为表现（Visual Behaviors）视觉行为表现的二级维度是视线离开路面的时间，因为这个维度是针对完成任务是否是在安全时间内的一个评估标准，这一项是至关重要的，HMI系统在设计方面一定要遵循安全的设计原则。评估它的指标是用户在车机单次扫视时长，车机总扫视时长，为什么会增加这一个评估指标呢，因为有些任务不是单次扫视就能完成操作的，比如在中控上面调节音量大小，我们项目中有一个定义是在绝大数页面当中，在空白区域左右滑动就可以改变音量的大小，所以这项任务测试数据中交互手势是表现相对较好的。当然还有其他方式第一步：下拉交互手势，将负一屏滑动下来；第二步：找到调节音量大小的滑块进行调整音量大小。这个交互方式和其余的车载系统是基本相似的，所以在整体考量方面，在中控调节音量大小是一个比较危险的操作，因为总时长较长，甚至单次扫视的时间也有过长的一个情况。2. HMI 软件任务表现（HMI Task Performance）HMI 软件任务表现的二级维度是有效性和效率，这方面测试用户的一个任务完成度情况。有效性的评估指标是任务的完成率和人均错误次数 ，这两个数据是指测试的任务是否成功完成了，在操作这个任务的时候用户犯了几次错误最终才完成的任务。设定一个任务：完成“搜索找周围加油站”，操作状态：静止状态下（非驾驶状态），操作限制：中控屏幕内操作。通过这些条件得到不同的数据。类似这种任务，我们可以做多种不做任何限制状况。得出的结论是：语音操控下最优，完成率和人均错误次数较低，错误的就是有些地方的方言无法识别，其余都可以正常完成；在中控屏幕中操作，只有在非驾驶中可以完成任务，在中控屏幕操作中需要很多步骤，1.首先进入导航页面，2.进入导航页面后，有不同的操作路径可以进行搜索加油站，第一个直接在输入框中搜索加油站，第二个就是在下方有加油站的 icon，可以直接查找，在第一次使用我们产品的用户，绝大多数都是进行第一种方案。最后数据比较非驾驶中完成任务率和人均错误次数远低于驾驶状态，因为驾驶状态下完成这类任务时间会增多，并且驾驶中不可能长时间定于屏幕。其实现实场景中，在驾驶中搜索加油站的场景会偏少，所以更推荐用户多运用语言进行搜索完成任务，如果不习惯语言交互，那么请在非驾驶状态下进行操作中控屏幕。效率的评估指标是完成时长 ，通过上面的案例我们也可以直观的看出语音交互搜索加油站完成的时长是最短的，因此他在效率上也是最高的，语音交互也分为驾驶状态和非驾驶状态，效率也是不一样的，非驾驶状态效率要高于驾驶状态，因为驾驶状态下去扫描屏幕信息难度要高于非驾驶状态下的。其次就是静止状态下的操作中控屏幕效率也要高于驾驶状态下操作。排个序不同场景在不同的交互方式，非驾驶状态语音交互 > 驾驶状态语音交互> 非驾驶状态中控操作 > 驾驶状态中控操作。3. 主观感受（Subjective Feelings）主观感受的二级维度是综合感知负荷 ，事物通过感官在人脑中的直接反应，感官这一个词大家也许会感觉还是有些陌生，HMI 车载系统交互中从视觉、听觉、嗅觉、触觉以及味觉等方面的感官交互，也就是通过眼睛、耳朵、鼻子、嘴巴以及皮肤触摸实现，围绕这些感官进行设计的，这些对用户直观的感受都需要记录下来，作为对于后续优化系统作为研究内容。综合感知负荷的评估指标是感知脑力负荷，这个词想必大家也没咋听说过，我简单介绍一下，从任务和个体两方面出发，脑力负荷中的任务和执行任务的个体均相关。在同一任务中，不同的用户所感受到的脑力负荷仍可能不同，用户自身的情绪、动机、策略及个人能力都可能影响到脑力负荷。从信息处理能力的角度出发，将脑力负荷定义为: 用户在执行某项任务时对所应用的“信息处理能力”的大小，可以通过测量其“信息处理能力”来直接度量其脑力负荷的大小。一共有两个因素来决定，一个方面是“时间占有率”，时间占有率是指完成某项车载任务过程中用户的最低处理时间。“时间占有率”越低，则脑力负荷越低，“时间占有率”越高，则脑力负荷越高；另一个方面是“信息处理强度”，信息处理强度是指在单位时间内需要处理的信息量或者处理信息的复杂程度，“信息处理强度”越高，则脑力负荷越高，反之则相反，有点难理解的话还是多看几遍吧。脑力负荷的测评方法主要包括: 主观测评方法、作业绩效测评方法、生理测评方法以及综合测评方法，关于这些维度的后续我们在详细探讨。4. 给大家开一个小灶本想这个留着后面慢慢讲的，但是已经谈到这个专业领域的知识，我又没收住，就简单的给大家提一嘴，后期还会单独针对这一块做深入的探讨。上面谈到脑力负荷，那我们设计 HMI 车载系统的时候，该如何降低脑力负荷呢？从视觉、认知、操作三个角度出发减少脑力负荷视觉：是指 HMI 车载系统的界面信息视觉复杂程度，减少视觉负荷，需要做到信息功能更加精炼、主次分明等要求。根据调查：人对产品的第一印象是在 0.5s 秒形成的，有一点要知道：为了降低视觉负担，不是设计的很简单就完事了，驾车环境和其他产品不一样，对于视觉要求较高，因为用户每盯屏幕多 1s 钟，就会多一分危险，所以在设计的时候不能将其他端的设计照搬硬套，减少用户阅读的信息，简化信息内容等。认知：是指用户对于 HMI 系统界面的理解、思考的脑力消耗，交互设计中有一条原则：不要让用户做过多的思考，不要增加用户的认知负荷。在设计 HMI 车载系统的时候，视觉设计和交互设计要保持全局的一致性，HMI 车载系统的设计和其他端也不一样，APP 端要将这个行业的框架结构要一样，所以大家看到淘宝、京东、网易严选、苏宁易购等购物平台 APP 首页的框架都是一样的，从而降低用户认知成本，这个是行业的一致性。但是大家可以看到车载系统，每家的定义都有差异化、也有相同点。比如小鹏、蔚来、特斯拉都是以导航为首页，理想 ONE、五菱星辰首页的设计方式是以卡片为主，所以在于车载系统中的一致性是在自己本产品中体现，视觉、交互的一致性，不能做过多、过于复杂的交互方式。视觉的一致性就体现在的通用颜色，比如导航模块中的交通拥堵的颜色，深红色为极度拥堵路段、红色代表堵车、黄色代表缓行路段、绿色代表畅通路段，这个只能在一个颜色系列下微调，不能做大幅度改动，但这个还需要按照每一个国家的定义来，有一些国家对于颜色定义有着自己的要求，所以在做海外导航的小伙伴们要时刻注意下。操作：是指用户移动头部、手臂、手指来点击触碰 HMI 车载系统，如何做到减少操作负荷。下面从软件层面和硬件层面来讲讲：针对软件方面的优化：交互内容面积越大越容易操作；交互的内容应该偏向于主驾驶便于操作的区域，距离主驾驶越近越好；与其他交互手势、方向避免冲突；点击的交互方式易用性强于长按和双击，但车载系统有的地方还是需要用到这些其他交互方式，全局做到尽量少用，放大地图之类也需要延续双指交互手势等；单指交互优于多指交互。针对硬件方面的优化：对于硬件操作的优化，沃尔沃汽车将主驾驶屏幕做了倾斜，对于主驾驶是方便操作，唯一的缺点就是不可以挪动，他是完全镶嵌进去的，如果副驾驶需要链接手机蓝牙到车上面，对于副驾驶的观感就不太友好了。这一点新款的特斯拉 S/X 系列做的很到位，他可以将屏幕左右的倾斜，在设置项中可以选择屏幕的调整，针对操作这一点优化相当不错的，我在其他平台看到有的车主在特斯拉 model 3 改装了屏幕，将固定的屏幕改装成左右上下都可以移动的屏幕，动手能力超强，给车主点个赞。总结本篇文章是HMI车载领域的可用性测试，但其他领域的设计师们也可以有学习的内容。本篇来源：优设网原文地址：https://www.uisdc.com/hmi-usability-testing-buff
图片 相片 在线 我很习惯在写文章插入图片前先对屏幕截图进行压缩，让图片容量更小、开启速度更快，更重要的是几乎不会影响画质，以前我都使用 TinyPNG 这个相片压缩工具，只要将图片拖曳到网站就能快速处理，后来就选择以 Imagify 自动从 WordPress 媒体库对图片压缩和优化（免费版每月只能处理 20 MB 相片），如果想要在处理图片后整合 CDN 提高图片加载速度可试试看以下服务：酷站两连发！两个高质量的图片在线压缩工具编者按：今天推荐两款图片压缩神器，两个都可以直接进行在线压缩，压缩率也非常高。阅读文章 > 经典图片压缩神器 TinyPNG 出中文版了！单次免费处理 20 张！曾经有一段时期我很喜欢 TinyPNG 在线图片压缩工具，只要将 PNG 图片拖曳到网站，它会自动远程对图片压缩、优化，将图片档案大幅缩小，但又不会影响画质（也就是无损压缩），后来也推出 TinyJPG 支持 JPG 格式，还有 WordPress 适用的外挂功能「Compress JP阅读文章 > 本文要介绍的「Compress JPEG」是一个免费在线图片压缩工具，单次处理最多 20 张图片，支持图片格式包括 JPG、JPEG、PNG、GIF 和 PDF，只要将图片拖曳到网站就会自动进行压缩，同时显示压缩后节省的百分比，批处理还能压缩成单一文件下载，非常方便。Compress JPEG 可单独调整相片压缩比，比较压缩前后的相片差异，如果你觉得压缩后相片画质改变太多，或是想再让相片容量变得更小（可能会破坏画质），都能在服务里点选相片开启更多编辑选项。Compress JPEG网站链接：https://compressjpeg.com/使用教学开启 Compress JPEG 网站后从上方语言选项可选择「中文」显示。上传字段左上角分别有 JPEG、PNG、GIF 和 PDF 四种格式切换，先切换为要使用的原始图片格式。把需要压缩的图片拖曳到 Compress JPEG 就会开始上传、处理，依照网站说明，这些图片在一小时后会自动从服务器删除，单次最多可选择 20 张图片。压缩后图片会显示节省的容量百分比，如果想要单独调整某张照片，点选图片后可以从下方功能选项进行设定，调整相片压缩质量，同时利用中轴左右拖曳来查看原始图片和压缩图片画质差异。点选相片「下载」按钮单独保存压缩后的相片，如果要下载的相片很多，也可点选底下「合并」按钮将所有压缩后的相片打包为压缩文件一次下载。值得一试的三个理由：1. 免费图片压缩工具，支持 JPEG、PNG、GIF 和 PDF 格式2. 单次可压缩最多 20 张图片，将文件拖曳到网站进行自动化处理3. 手动调整压缩质量，所有处理后的相片可打包一次下载作品图太大？用这个在线图片压缩神器一秒搞定！本文要介绍的「Resizing.app」是一个调整图片尺寸的线上工具，整合常用的三大功能：转档、压缩和调整大小。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/compress-jpeg
用户 选项 菜单 前言下拉菜单是在界面设计中很常用的组件，它以下拉的方式同时展示多个标签并帮助用户缩小选择范围，快速满足用户的选择需求，尤其是一些导航，设计师会很依赖下拉菜单的使用。在 UI 设计中，虽然经常会使用到下拉菜单，但很多设计师对它并不是很了解，如果过度使用或滥用，也会对用户体验产生负面影响，所以，如何正确的使用下拉菜单就显得非常重要，设计师需要对它有一个更为全面的了解。那么，如何区分下拉菜单设计的是否合理？到底有哪些利弊？什么场景下需要使用下拉菜单，笔者将从什么是下拉菜单开始，对下拉菜单的构成、类型、使用场景及注意事项进行一步步梳理总结，希望本篇文章对大家有一定的帮助。往期回顾：5000字干货！从5个方面帮你完整了解标签栏设计前言标签栏是用户进入 APP 的第一触点，绝大多数以固定在设备底部的形式、让用户在应用中的不同模块之间快速切换。阅读文章 > 6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 本期大纲基本介绍及结构梳理使用下拉菜单需满足的条件下拉菜单类型常见问题及避坑指南总结基本介绍及结构梳理1. 什么是下拉菜单？下拉菜单是选项的一种呈现方式，当用户点击某个触发图标/箭头时，会弹出一个项目列表，用户需从中选择一项或多项来满足自己的选择需求。下拉菜单经常用在表单选项、筛选条件、导航等界面模块中，被触发后弹出的内容包括但不仅限于单选列表、多选列表、子选项、搜索等，内容较多时可能需要上下滚动，真实情况视选项的实际数量而定。2. 下拉菜单的构成下拉菜单看起来跟表单中的选项框几乎一致，但在真实的表单页面中，触发表单项后可能是下拉菜单，也可能是弹窗或页面跳转。同理，下拉菜单也会经常用在除表单之外的其他界面模块中，从表面上看跟表单一样，而实际的元素及交互效果则有很大的区别，但本文主要针对表单中的下拉菜单（非导航）作出介绍，有以下十个部分构成：1）标签：告知用户该下拉菜单项需要选择什么内容；2）容器：用于承载选择前的信息提示（占位符）及选择后的内容；3）下拉箭头：提醒用户有可点击的延展项，点击后弹出下拉框，箭头垂直翻转，再次点击箭头或选择内容后复原。另外，部分产品使用到倒三角代替下拉箭头，其作用相同；4）占位符：对标签进行描述或补充，减少用户出错的可能，选择内容后会直接替换占位符；5）下拉框（容器）：用于承载下拉选项的容器，点击下拉箭头后会弹出下拉框；6）选项列表：供用户选择的内容；7）分隔线：当列表中选项较多时，添加分隔线能更好的区分每个单独的选项（视情况而定）；8）已选中：弹出下拉菜单后，通常会用单选/复选框、主体色、加粗等样式提示用户默认选项或已选中的内容；9）滚动条：下拉框的高度会有一个最大值，当选项列表高度超过下拉框的高度时，就会出现滚动条；10）系统反馈：用户未操作必填内容就提交任务时，系统会给予提示。3. 下拉菜单的几种状态不管是出于系统问题还是用户的原因，下拉菜单能否操作或有什么限制，都应该给予用户及时的反馈。虽然存在多种交互状态且在视觉上都比较相似，但在设计时需要明显的区分开来，常见的状态有默认、悬停、聚焦、完成、禁用和错误提示，下面一起来看看设计师如何通过不同的视觉样式反馈给用户。默认状态即初始化状态，操作之前的样式，用户可从标签内容中获取该下拉菜单的主题内容，通过下拉箭头预示该内容的可操作性。对于部分选项较少下拉项，系统会默认选择一个与该用户最匹配的、或在目标用户群体中选择率最高的一项作为默认选项，以此减少用户的操作次数，降低任务流程的操作成本。悬停状态当鼠标经过或停留在一个下拉菜单项时，容器会通过改变填充色、描边色或其他不同于初始化的样式提醒用户该内容的可操作性。悬停状态只出现在电脑端，因触屏设备直接与之产生交互，会直接越过该状态。聚焦状态聚焦状态是指用户正在与之发生交互，点击后，展开选项列表的同时，容器通过投影、边框加粗或主色调来提醒用户当前正处在操作中，下拉箭头会进行垂直翻转（向上）。在很多其他模块组件中，展开/收起也是源于箭头上下方向的提示。完成状态用户完成选择后，容器中填充被选中的选项并替换占位符，对于非必填的下拉菜单项，后面出现一键清除图标“⨂”，其他元素与初始化状态相同。禁用状态对系统禁用或当前未满足操作条件的下拉菜单项，为保持内容的可见性，对部分元素置灰以提醒用户。错误反馈相比输入框，下拉菜单项出错的情况较少，用户出现漏选、或任务流程存在两个互斥的选项时，系统会通过强提醒警示用户，例如将提示文本、容器描边及填充使用红色。使用下拉菜单需满足的条件1. 由选项数量决定（移动端）首先，选项数量不能太少也不能太多。说人话，就是选项数量为 5~9 条是使用下拉菜单的最佳选择。因下拉区域的空间有限，考虑到用户操作的难易程度，大多数情况下，低于 5 条选项使用单选按钮即可满足，超过 9 条就需要更多的展示空间，使用操作栏弹窗或页面跳转则体验更好。当然这并非绝对，只是作为一个参考值而已，使用下拉菜单以 5~9 条为例，可满足工作中的大部设计需求。其次，在选项数量满足的条件下，选项文本的字数也需越短越好，如果文本过长导致折行或省略，用户体验也会大打折扣，还不如弃用下拉菜单、换种方式呈现。2. 由便捷性决定能让用户选择的就不要让用户去输入。比如用户在选择退款原因时，常见的原因就那么几种，使用下拉菜单的样式呈现，比码字的操作效率会高出很多，即便用户有自定义需求，增加一个「其他」选项完全可以满足。另外，需要说明的是，这种方案只能满足大部分设计需求及使用场景，没有绝对好的设计。当输入有可能比选择更快时，那就果断让用户输入，这种情况一般出现在日历控件中，如果用户年龄跨度较大，想象一下，需要在几十甚至上百组数据中找到自己的出生年份也是件很痛苦的事情，还不如输入 4 个数字来的快。3. 后期延展决定如果当前选项较少（低于 5 项），由于内容是管理后台配置、且根据产品需求短时间内有陆续增加的规划，但最终数量可控，这时，即便是只有一两条选项也可选择使用下拉菜单。下拉菜单类型根据用户需求、内容性质的不同、处理各种信息时更加方便，其下拉菜单的视觉样式、交互方式也会有所不同。例如：在导航中使用下拉菜单、表单中使用下拉框，甚至某些特殊场景中，下拉框和下拉菜单还能互换，但为了兼顾不同类型、提升可用性，仍需特别留意这几种类型及变化。1. 导航类型几乎所有的网站都离不开导航类型菜单，分为水平导航和垂直导航两种。水平导航一般出现在网站顶部，例如官网顶部的功能分类、电商网站的商品分类等；而垂直导航绝大多数出现在后台管理系统的左侧，不管是哪种类型，主要目的是通过所提供的导航链接将用户带到新的位置。2. 命令菜单类型命令菜单主要用于计算机桌面软件及应用程序的顶部，点击后会展开很多选项按钮以供用户进行下一步操作，部分较为复杂的功能选项会伴随着二级（子菜单）选项列表，方便用户对软件、应用更好的控制。3. 表单类型众所周知，在条件允许的情况下，用户选择的速度要远远大于码字的速度，且更有利于系统进行数据统计，所以在很多表单中，都会设计一个选项字段，让用户通过下拉菜单选项便捷式选择。表单类型的下拉菜单也有多种类型样式，下面将一一进行介绍：标准样式标准下拉菜单是最原始、操作最简单的类型，没有任何的弯弯绕绕，触发弹出下拉选项后，选中任一内容即完成与当前表单项的交互。关键词匹配这种类型常出现在选项较多的场景中，为了方便用户更快完成选择任务，在标准样式的基础上增加了输入功能。输入的过程中，系统根据输入的关键词在已有的选项中进行匹配、筛选，用户可在筛选结果中快速找出自己需要的选项，无需输入所有文字、也不用在内容超多的列表中来回寻找即可完成任务。搜索框这是一种比较老派的做法，触发下拉菜单后，通常会在选项列表上方增设一个搜索框，用户输入关键词后进行搜索，相比上面提到的关键词匹配就有些落后了，不仅视觉样式变得复杂、也增加了用户的操作成本。部分 PC 端网站的选择地址控件中还有使用，但更多产品直接使用了城市拼音首字母进行分类筛选，显然比这种搜索方式的效率更高。多选/复选即用户在同一表单项中选择多个选项，虽然这种设计方式操作起来比较复杂，但在内容较多、空间资源不是很充足的管理系统、B 端设计中还是很实用的。例如用户权限配置、带有二级/三级联动的机构或地址选择，多选相比平铺更节省空间，且这类用户很多都是经过培训、相对专业的群体。常见问题及避坑指南1. 延展不要超过两级菜单的子层级越多、操作越复杂、用户体验就越差，尽量不要超过两级，如果超过两级，在条件允许的情况下进行二次分析增删、合并分类，以此来减少用户操作负担。当然这并非绝对，只能在相对情况下尽量避免，例如选择地址（省、市、区/县）时就无法删减。2. 默认值的使用默认值主要针对表单类型的下拉菜单，在可预知的场景中、通过行为预判提前为用户选中某个最常用、选择频率最高或当前用户最有可能选择的内容，方便被精准匹配到的用户不用做任何操作即可完成任务，同时也提高效率。但根据笔者在体验的多个产品中、以及看过相关方面的各种资料说明，是否需要提供默认选项则各自参半，成了两相对立的局面，暂且不论默认选项是否合理，但如果出现以下情况请慎用。选填项为选填表单项提供默认值，用户极有可能直接略过该项，最终默认值并非用户的真实需求，这也将变得毫无意义，甚至在后续的数据分析中产生误导，影响产品的走向。另外，即便用户注意到了，不想选择任何内容，还得手动清除，这就需要用户付出更多的时间成本和操作成本，与用户体验相悖。均衡度适中当多个选项的使用率较为均衡，提供默认选项确实会减少这一小部分用户的操作成本，但在大部分的用户群体中，只要不影响其利益或用户认为无关紧要就会默认该选项的可用性，同样会出现上述问题。用户属性模糊这种主要针对千人千面的推荐设定，在一些新注册或行为飘忽不定的用户群体中，推荐默认选项也会将出错的概率大幅度提升。3. 避免滚动失误对于选项较多的下拉菜单，滚动不可避免，但有没有一种可能，我们在明明需要滚动下拉列表、可滚动的却是整个网页，而鼠标离开下拉区域去滚动页面、真正发生滚动交互的则是下拉列表，苦不堪言。解决这个问题需要程序员对滚动交互时的光标位置作出界定，当下拉菜单仅处于聚焦（高亮/主体色/阴影）状态时滚动选项列表，除此之外滚动页面即可。这里需要说明的是，光标离开下拉菜单就可取消聚焦状态，不用非得等用户完成选择任务后再取消，目的是为让下拉菜单与页面的滚动互不干扰且能随时切换。4. 选项数量选项太少表单选项太少能使用下拉菜单吗？答案是“当然能”。但这又是何苦呢，如果只有两个选项，用单选按钮它不香吗，用户只喜欢用最少的操作在最短的时间内完成自身所需，每多操作一次都可能会离开。选项太多下拉选项过多可能会对用户产生负面影响，但有些时候是无法避免的，例如选择国家、地址、区号等，不管怎么做都没法简化。这时，增加前面所讲到的关键词匹配、搜索框功能，就能提高用户的完成效率，也让产品变得更容易使用。5. 如果输入比选择更快在部分特殊场景中，输入明显比选择更快。试想一下，自己的出生年份仅仅四个数字，但却要在几十个选项中滚动查找，真的很费时间，选择信用卡的有效期也是如此，要解决这个问题只需一个数字键盘，让用户自己输入会容易许多。6. 减少操作这里有一个很经典的例子就是日期组件，对于年、月、日的选择，分别使用 3 个下拉菜单看似也能接受，但真的很复杂，且每次前面内容的变化都对后面的数值起着决定性的作用。将三组内容进行合并且让用户自定义，就方便很多，能减少部分多余的操作。7. 精简的选项描述一句话能说清楚的就不要用两句话，文字越多、理解成本就越高。在空间有限的下拉区域，选项要尽可能简短，直击核心内容。8. 选项的优先级下拉菜单中的选项并非随意摆放，要想迎合用户、使其有更好的使用体验，就需要符合一定的规律。将最常用的选项靠前、相关联的组合、时间按照先后、地区按首字母等优先级排序，让用户操作前就能一目了然。9. 不可用选项置灰当某个选项被系统禁用或用户未达到选择条件时，尽量不要将这些选项隐藏，避免用户从一开始就误认为是内容的残缺或系统本身就不具备某些选项，为后续埋下弊端。将已存在但不可选择的内容置灰显示，不仅能保持内容的完整性、提醒用户后续可选，还能在某些特殊场景让用户主动激活可选条件，提升用户对产品的使用深度。另外，如果空间资源足够，在附近提示不可选的原因能确保用户使用更顺畅（鼠标悬停在不可选内容，临时提示就是一种不错的方式）。总结正确的使用下拉菜单既可以保持界面的美观度，还能合理的利用空间资源、提高用户选择效率，但切勿滥用、乱用。关于下拉菜单的使用方法及技巧远不止于此，只要我们在设计前考虑清楚何时用、怎么用、如何更好的使用，再加上后续持续不断的优化、查漏补缺，才能发挥下拉菜单的最大价值。超全面！「下拉菜单」设计指南下拉菜单相关应用在平常的交互设计当中是少不了的一环，也是饱受用户批评的重灾区。阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/dropdown-menu-2
小技巧 用户 编者按 编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Marc Andrew 的文章梳理了 6 个实用性很强的 UI 效果提升小技巧，是系列文章的十三篇，原文最早发布于 marcandrew.me 。在创建实用、可访问性良好且视觉效果颇为出彩的 UI 界面的时候，我们大多只需要进行有限度的微调，即可达到颇为不错的效果。在之前，我已经撰写了很多实用的 UI & UX 优化小贴士（看完文章在文末获取），这篇文章继续增加 6 条实用的建议。如果你对于这个系列感兴趣，上一期的内容也值得看看：第十二波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 下面，一起来看看最新的 6 项设计技巧吧！1、用页内链接让用户尽快获取信息页面内链接，或者页内导航，在过去曾经一度被很多设计师所抵制，但是如果在对的地方使用，实际上对于整个页面的体验是有明显加成的。最典型的，就是在较长页面当中，页面内跳转链接能够帮助用户更好地导航。当用户打开一篇较长的文章的时候，文章通常会被划分为多个不同的部分，不同的章节，这个时候页内链接本质上就是某种意义上的导航，帮助用户快速定位到他们需要的位置，无需进行无休止的滚动，迅速确定自己的兴趣点，点击，精准降落。使用得当，页内链接会大大提高页面内容的可发现性和内容的参与度。2、让按钮文本指向性保持一致清晰按钮上的文案内容是非常重要的。用户打开一个页面，当他面对一个 CTA 按钮的时候，他需要知道当他点击这个按钮之后，会发生什么，去到什么地方，起码他应该知道这个按钮所指向的行为和方向是什么，这也对按钮的标签文案提出了要求。我经常看到网站和 APP 当中的文案使用模糊或者整体的语言风格不够一致。比如有的地方文案是「Lets do this（就这么干吧）」，有的地方则是「Join Now（现在加入）」，类似功能的标签，却使用了截然不同风格的文案，这种情况可能会增加用户的认知负荷，还会让用户对产品产生怀疑。3、自动填写重复表单字段帮用户节省精力有些表格可能会很长，尤其在是在电商和各种涉及专业服务的网站上，需要非常具体而准确地填写各种表单。为用户简化冗余的表单项目是非常有必要的。比如需要用户填写送货地址这种字段，可能需要多次填写，这种字段需要花费较长时间来完成，而且可以确定的是，这几个地方是完全一样的。这个时候，系统应当提供自动填写功能来帮助用户节省精力。不过值得一提的是，在注册表单当中，有时候需要用户重复填写密码，这个环节是出于确认密码正确性而设置的，不应该在这个地方帮用户「偷懒」。4、将字段名称放在较长表单的输入框上方对于较短的表单，我们将每个字段的名称放在填写表格的左侧倒是影响不大，用户在填写的时候视线会使用Z字型来回折返，由于内容量较少，在体验上不会让人感到疲惫。但是在较长的表单当中，情况就不一样了。由于用户需要持续地填写内容，使用Z字型扫读会非常疲惫，这个时候，需要将字段名称移到表格的上方，这样用户可以使用F式的扫读方式，视线基本上是从上到下自然移动，在体验上更加轻松。5、不要让不必要的文案内容扰乱操作即使你所设计的网站和 APP 并不是走极简的风格，在很多的页面当中，都是需要做一些必要的精简，帮助用户更加快速和顺畅地从 A 点出发抵达 B 点。比如在注册页面当中，一个「Register Now（立刻注册）」就足以告知要做的事情，那么副标题「请填写下方的注册表单」其实是没有存在的必要。指引用户方向当然是必要的，但是在本身的文案和功能是不言自明的情况下，再增加额外的说明就属于画蛇添足了。6、不要为了精简而粗暴精简UI控件和上面一条的道理相同，虽然有的 UI 控件在设计上确实存在精简的空间，但是也不要为了精简而精简。最典型的案例，就是加载进度条的设计。从根源上来说，进度条的存在是为了帮助用户了解某项操作的进度，简单的加载控件仅仅只能够给用户以模糊的感知，只有明确的百分比标识才是用户真正想要知道的信息。将百分比的标识去掉，仅保留进度条本体，很难让用户对信息把控，这种精简方式其实是在体验上开倒车。下面是更早的内容：第一波！快速提升 UI 设计效果的 9 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第二波！快速提升 UI 设计效果的 14 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第三波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第四波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第五波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第六波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第七波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第九波！快速提升 UI 设计效果的 7 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十波！快速提升 UI 设计效果的 8 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 第十一波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/improve-ui-designs-faster-13
用户 信息 页面 随着市场竞争的日益激烈，用户除了要求平台提供更多更好的产品以外，还要求以更满意的方式去展示产品，信息呈现形式的不同，对用户的信息接收和解读会产生不同的效果，从而会影响用户的满意度进而对购买决策产生影响。而下单转化率是到家业务的重要指标之一，提高用户购买率是到家业务的核心需求，因此希望优化 58 到家页面设计。页面设计就像商品的造型设计，是想要吸引消费者的重要卖点，一个成功的页面设计不仅需要做到吸引用户点击浏览页面，还需要能够诱导用户身份转变成消费者，从而进行购买行为。页面优化的探索因此，页面设计不仅需要考虑视觉设计因素，还需要考虑用户认知，探索用户购买行为与动机偏好，从而精细化的理解用户的消费特点，了解用户心智。本次调研将会在这一阶段通过深度访谈，了解用户购买渠道、服务购买关注点、以及对服务的认知等，去深入了解不同渠道的核心竞争力、现有或潜在用户的人群画像以及未来线上服务产品的购买趋势；同时，在深入了解用户心智的基础上，我们也需要聚焦到家精选核心产品线下的购买流程，分析体验问题及优化方向。眼动测试的优势在这过程中，需要我们去了解用户在线上购买流程中的关注点，从而去分析其在流程中的体验。但在访谈中，用户“所说”是否即“所想”，“所想”是否即“所做”呢？而且一些下意识的行为，甚至用户自身都难以察觉，更不用说通过言语主动表达，那么这种情况下我们需要专门的技术来测试用户在关注什么。其中眼动测试和其他测量方法相比，具有设备简单、 实验数据直观等优势，能够高效地挖掘用户的无意识行为，并获得更直观的实验数据，适合于视觉界面相关的评估实验。因此在本次研究中，我们同时引入了眼动技术，通过眼动技术揭示在不同类目下，用户在购买过程中对信息的核心关注点以及浏览轨迹，从而作为用户行为数据以支持研究结果，进而提出优化建议。百度也发过类似的实战案例，大家可以一起看下：大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 什么是眼动测试那眼动技术到底是什么呢？眼动技术是确定一个人在注视何处的技术，主要通过眼动仪收集用户的眼动数据，然后用特殊软件对这些数据进行整理、 分析，得出特定的眼动指标和轨迹，进而用来分析用户心理和用户行为。1. 研究类型眼动研究中主要的研究类型有定性洞察和定量测试2. 如何选择由于本次的研究主要目的在于页面优化，需要去发现和解释可用性问题，并为页面优化提供改善建议，因此更适用于形成性研究，通过眼动仪去观察用户行为，探索行为的背后的原因。研究过程1. 研究准备确定研究问题：确定产品需要改进的领域设备：Tobii Pro Glasses 2 眼动仪任务流程：确定任务场景+任务点击+明确结束行为+追问刺激呈现：被试间设计2. 被试选择用户的选择并非随机，需要结合研究目标和方法，选择合适的用户进行实验，首先根据本次需要优化的到家精选具体类目，将人群按常用类目进行划分；根据以往的经验，性别、年龄、婚姻状况等会影响用户的选择和操作，所以对其性别、年龄、婚姻状况按照产品类目人群结构进行配比。此外考虑用户有竞品使用情况，此次调研并不限制其竞品的使用，但是否有本品使用经验对用户的操作和感知会有较大不同，因此限制其中一半用户未曾有使用到家精选经验。基于目前眼动追踪技术的局限性，并不能够校准和追踪所有人的眼睛，因此还需根据用户眼部情况进行筛选。3. 部分结果展示① 眼动轨迹图通过眼动测试后输出的眼动轨迹图，如图 1，可以看到用户在产品首页中， 其眼动轨迹较为复杂，眼跳次数也较多，说明用户在进入首页时，试图寻找目标业务入口时，较为困难。（眼动轨迹图中，以点表示个人注视，以线代表眼跳，在轨迹图中点的大小代表注视时长，点的大小和注视时长成正比，注视序列常以点上的数字表示，通过其注视序列反应环境中元素的吸引力以及视觉搜索轨迹）结合眼动关注情况和测后出声追问，其主要原因在于用户浏览习惯以 L 型为主，在无强烈刺激下，对左上方信息易忽略，且在页面中对头部单品的展示，部分用户因位置与颜色背景原因，误将其看作是广告位，因此出现寻找业务入口较难情况。② 热点图通过眼动测试输出的热点图，如图 2，我们看到用户的注意分布情况，以及用户的关注点及其程度。在不同的区域模块下，用户关注点各有侧重，但并不是指所有热点图用户关注程度越深，代表其越感兴趣，也可能代表用户对当前信息不理解。（眼动热点图其眼动追踪测量值以彩色表示。红色代表浏览和注视最集中的区域，黄色和绿色代表目光注视较少的区域。“热量”与所代表的测量值成正比，常用多个用户获得的数据创建的聚合可视化热点图）结合眼动关注情况和测后出声追问，发现不同性别用户在选择车型时参考依据不一，且在整体页面浏览中用户相比其基础信息，对保障类信息关注度更高，此外在浏览到服务流程中时，用户的关注度较高，测后追问时用户表示在服务流程的排版下信息重点不突出、信息繁杂，需要在众多信息中找自己需要信息，对用户认知负担较重。③ 注视视频通过眼动测试生成的注视视频，我们可以看到一些很难从静态可视化图表上看到的现象，如用户在寻找某一业务的入口，因为存在对其他入口的错误理解，易误点进入其他入口，这种动态的行为，通过注视视频更能够直观表示，并且对业务相关方更有吸引力。（注视视频是个体注视点的动态可视化，由移动的点或十字线表示，并覆盖在刺激的顶部）来个总结定性的眼动追踪分析关注的是人们如何看待事物，并通过查看追踪数据的可视化进行，而定量的眼动追踪分析大多数是关于设计之间、设计和标准之间的比较，对样本的选择、实验的设计、测量指标选择、数据的处理等有更严格的处理，希望未来在产品精细化研究方向上，能够通过眼动测试给予更多的贡献。大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/eye-movement-test
字体 思源 宋体 大家好，我是和你们聊设计的花生~如果让大家推荐一款好用免费可商用的宋体，估计很多小伙伴都说思源宋体，毕竟真的非常好用。其实除了思源宋体，还有很多免费又好看的宋体字哦~今天就为大家梳理一下优优教程网上的一些高质量的宋体字，为大家的设计提供更多地选择，一起来看看吧~往期推荐：5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 狮尾四季春「字体详情及下载链接」https://uiiiuiii.com/software/505219.html狮尾四季春是中国台湾的设计师 Max 受灵感启发，对思源宋体进行一系列修改后得到的字体。狮尾四季春拿掉了思源宋体的三角形衬线，看上去更加简明现代，版面效果清新轻快。和思源宋体一样，狮尾四季春有7个字重，支持简体中文、繁体中文、韩文与日文。飞花宋体「字体详情及下载链接」https://uiiiuiii.com/software/451723.html飞花宋体是基于免费字体「花园明朝」改进得来的。花园明朝体为日本字体，很多字不符合中文书写规范，于是有设计师将其改为适用大陆中文的实用版本，并命名为“飞花宋体”。修改后的飞花宋体收录了大陆简体的 6763 个汉字，字形秀气雅致，设计细节也更加精致。字体圈欣意吉祥宋「字体详情及下载链接」https://uiiiuiii.com/software/350518.html欣意吉祥宋是字体圈推出的第三款免费可商用字体，适合用作大字号的标题。字形的宽高的比例为4：5，笔画的开头结尾处理得柔和圆润，笔画在拐角、收笔和连接处的弯度也非常流畅，视觉上给人纤细柔和之感。近期节日热门字体推荐免费可商用！9 款可爱Q萌的儿童节中文字体（已打包）我整理了 9 款无版权可商用的儿童节字体，超实用！阅读文章 > 一点明体「字体详情及下载链接」https://uiiiuiii.com/software/314600.html一点明体依照《传承字形部件检校表》的推荐字形标准制作，力求遵从字理，展现传承汉字构字的科学系统，字形质量非常高。其特点在于简体字传承了旧字形的特征，给人新奇的陌生感但也不会影响阅读，字体的文艺复古气息大幅提升。在细节的处理上，将笔画末端进行平直的切角处理，在撇和捺笔画上体现得尤为突出，使字体更加利落干净。黄令东齐伋（jí）体「字体详情及下载链接」https://uiiiuiii.com/software/261894.html黄令东齐伋体摘自明代木版印刷书籍《凌閔刻本》，是采用半自动计算机视觉和 OCR 制作而成的一款字体，风格与知名的康熙字典体非常相似。黄令东齐伋体共收容 21236 个字符，无论是简体还是繁体都基本上不会缺字。字体带有古朴的雕版印刷质感，人文气息浓厚，适合传统文化及文艺复古主题。台湾明体（ cwTeXMing ）「字体详情及下载链接」https://uiiiuiii.com/software/368956.html台湾明体是中国台湾地区常用的一款中文字体，设计时一定程度上仿照古籍《康熙字典》的字体，字形构架稳固，庄重而大方。共包含 15790 个字符，部分简体字字符有所缺失，切换到繁体输入即可使用。设计常备字体推荐5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 装甲明朝体「字体详情及下载链接」https://uiiiuiii.com/software/250309.html装甲明朝体是由「思源宋体」改版而来，字体笔画的粗细对比极度夸张，但仍在可识别范围内。横线和点变得超极细，上点变得更加硬朗，具有极大的张力。根据装甲明朝开发者说明，这个字型适合使用于军事或偏向阳刚的设计。但因为是由日本创造制作的一款字体，对于简体会有一些缺字的情况出现。以上就是今天的推荐，更多高质量的免费可商用字体大家可以点击优优教程网的「免费字体」版块进行探索~本篇来源：优设网原文地址：https://www.uisdc.com/7-commercial-song-characters
星球 知识 用户 全文 7400 字，拆解页面 60 个，100 多个产品设计细节，通过对目标用户群的需求分析，对知识星球产品设计进行分析验证，为你提供一份社群工具的产品设计参考。序言1. 适合人群UI/交互设计师通过对一个 APP 产品的用户需求分析、产品拆解和设计策略验证，跳出设计执行层的思维，继而培养设计的全局观，从整体出发去思考一个产品如何设计。产品经理/运营通过全面的用户需求分析、产品拆解和设计策略验证，获取知识社区、社群工具类产品的设计参考；知识创作者通过全面的产品设计分析，了解知识星球的运营模式、产品功能和数据分析工具，从而获取一份社群运营的参考。2. 分析目的通过对知识创作者群体的用户需求分析，拆解知识星球 V4.36.1APP，然后去验证知识星球的产品设计是否解决用户的痛点，最后为知识创作者提供一份智慧社群运营指南，以及为相关的产品设计从业者提供一份产品设计参考。3. 分析步骤第一步：需求分析利用福格模型，对知识创作者群体的动机、痛点和需求进行分析，推导出真实的需求；如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 第二步：产品拆解通过全面的产品设计拆解，了解知识星球完整的产品设计细节；第三步：设计验证结合增长模型，对知识星球的产品设计策略进行验证。第四步：分析总结通过分析总结，输出核心观点，为产品设计师及从业者提供一份设计策略参考。4. 分析模型增长模型由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。福格模型由行为认知学的创始人 B.J.福格提出，通过对用户行为的研究，他认为要促使用户产生行为需要三个元素，分别是动机、能力和触发，主要用于分析用户的动机和需求。用户需求分析1. 知识创作者是谁?要了解知识星球这个产品，我们就需要先了解知识创作者这个群体。通俗点说，凡是能持续输出原创内容的创作者都能称为知识创作者，就像笔者本人，从负责设计执行的产品设计师转型到以定期输出产品分析的自媒体，笔者就可以称为知识创作者。而知识星球的核心用户人群，正是已经在微博、微信、知乎等平台累积了无数粉丝的大 V 和 KOL。这些大 V，拥有极高的知名度和号召力，汇聚了成千上万的粉丝，有极大的潜在需求。2. 知识创作者为什么需要社群工具产品？用户动机2016 年是知识付费的元年，在过去，互联网=免费的印象已经在用户心中根深蒂固，知识是否值得付费，这是一个大问号。但在 2016 年有知识付费意愿的用户暴涨了 3 倍，人数达近 5000 万人，根据艾瑞 2018 年的知识付费行业报告预估，2020 年市场规模将会达到 350 亿，用户数将超过 4 亿人。创作本身不容易，需要持续不断的坚持，还要为粉丝提供多变创意的高质量内容，非常考验创作者的能力和决心。而且面对苟且和远方，如果没有可观的收入，知识创作者很难坚持下去。所以在大环境利好，用户付费习惯逐渐养成的形势下，如何通过专业的数字化工具解决社群管理，实现粉丝变现，健康发展，是一个长期以来困扰知识创作者的难题，他们的动机非常强烈、急迫。痛点分析人之痛——管理难对于知识创作者，他们通过长时间的积累，已经拥有数量庞大的粉丝群。但随着粉丝的不断增长，他们对粉丝的管理也陷入了困难。人越多，越难管理，越难管理，就越难健康发展。比如如何通过精准的数据监控社群的活跃度，如何快速激活用户参与社群活动等等。知识创作者都明白，粉丝是一切的根本，有了粉丝，才能发展。钱之痛——算账难当用户认可一个社群的价值，掏钱加入是很自然的事。但随着越来越多的粉丝加入，财务的统计就成了一件很麻烦的事情。粉丝多久入的群，续费时间是什么时候，要不要给推荐人返佣，续费的时候要不要打折扣，人数越多，只靠一个 Excel 表格就会让知识创作者忙得手忙脚乱，精力大大消耗。物之痛——沉淀难物代表内容和信息，社群之所以能运转，内容是精神食粮，信息是交通工具。微信公众号固然可以沉淀内容，但仅靠一个留言板很难和粉丝建立更高效的互动，一个知识创作者的社群就像一座城市，这座城市如果只有水电这些基础建设，没有其他吃喝玩乐的东西，粉丝即便有了交通工具也不知道去哪里，粉丝的活跃度不会高，就会导致留存率低，最终商业变现难。3. 知识创作者对工具的真实需求时间需求按照福格行为模型，要让用户开始产生行动，能力成本就一定要低。所以能否快速的搭建开通自己的社群，对时间成本有很高的要求，如果是一个庞大复杂的 SAAS 后台，知识创作者很容易放弃。金钱需求知识创作者不排斥收费，毕竟他们主要收入就是来自粉丝，但承受能力也有限，这部分群体更多是以个人在发展，当超出心里预期后，会进行多方对比权衡。脑力需求脑力需求就是学习成本，而且不仅仅是考虑粉丝的学习成本，还要考虑管理团队的学习成本，对产品的操作性、易用性都将会进行全面的调研。功能需求对功能要求不多，但需要能解决社群在日常运营、用户和财务管理方面的痛点，当然如果能有多变丰富的营销工具，就能让知识创作者享受到 Aha-Monment。安全需求随着社群的运营，内容数据如何保障安全？会不会某一天因为服务器故障或其他事件导致社群的内容丢失？对安全的关注会非常高。平台需求当确认使用社群产品以后，也会关注这个平台对社群有什么扶持政策，粉丝、流量还是其他福利。4. 小结通过本节的分析，我们了解到知识创作者这个群体在发展过程中所面临的需求痛点，不致命，但很迫切。知识创作者的社群就像一座城市，他们不仅渴望有水有电，满足温饱，更希望这座城市有娱乐场、有餐厅、有电影院，像一座现代化的智慧城市，让粉丝一辈子都定居在这里，过上幸福快乐的生活。知识星球是谁1. 产品介绍知识星球 APP 主要为活跃在微博、豆瓣、知乎和微信的知识创作者提供专业、数字化的社群工具，链接铁杆粉丝，从而让社群运营更简单，实现知识变现。其次，知识星球也是一个高质量的知识付费社区，不仅仅要帮助知识创作者服务好他们的粉丝，更希望通过星球的优质内容积累，为用户推荐更丰富、更优质的内容。2. 产品生命周期知识星球诞生于 2015 年，至今已经发展 7 年，已经拥有 3000 万知识付费用户，产品已经迈入成熟期，当下的业务焦点除了聚焦于用户活跃度和商业变现。其次也在尝试新的业务突破点，比如从去年开始已经开始尝试星空问答，力图打破星球之间的壁垒，让星主和粉丝一起来打造无壁垒、高质量的知识社区。由于没有任何公开的官方数据，我从易观千帆搜集了一些数据供大家参考。在 2020 年 1 月-6 月期间，平均月活跃人数为 31.54 万，人均单日启动次数为 3.64 次。3. 商业模式知识星球致力于做一个 B2B2C 平台。第一个 B 代表了知识创作者，星主，第二个 B 代表了知识星球，平台方，而 C 代表了粉丝和普通用户。可以看出，知识星球不会满足于只做社群工具，解决社群变现的最后一公里，而是要做一个高质量的知识付费社区，否则就会变成 S2B2C 了。4. 用户画像通过易观千帆的统计，知识星球的用户人群以男性为主，年龄较轻（24-40），消费能力较强，主要分布在一线及新一线城市，其中以上海、广州、杭州、深圳和北京居多。当然，作为 B2B2C 平台，知识星球的用户角色其实分为两类，第一类是知识创作者，第二类是知识创作者的粉丝和普通用户。5. 功能架构通过梳理完整的功能信息架构，进行初步的拆解，我们发现知识星球的功能并不复杂，流程也比较简单，可以说用户体验非常友好，上手非常简单。6. 迭代历程截止到 2022 年 5 月 8 日，从最初无人问津只做私密工作圈的小密圈，到今天汇聚了 3000 万知识付费用户的知识星球，知识星球小步快跑，持续优化，目前已经更新到 V4.36.1 版本。2015 年 11 月 09 日正式发布 V1.1.1 版本，取名小密圈，以安心分享，开心工作的理念，打造私密工作圈；2016 年 12 月 21 日升级到 V2.2.3 版本，对 UI 和交互进行重大升级，为用户打造高品质社群；2017 年 8 月 28 日升级到 V2.11.2 版本，小密圈改名为知识星球，以连接一千位铁杆粉丝为新的价值主张；2018 年 1 月 7 日升级到 V3.0.0 版本，推出了发现功能，从知识工具升级到知识社区；2019 年 4 月 30 日升级到 V4.0.0 版本，用户可相互关注，通过知识号搜索好友；2022 年 4 月 30 日升级到 V4.36.1 版本，发现页新增「星空问答」，探索业务新方向。7. 小结知识星球经过 7 年的发展，已经是一个成熟期的产品，他们的目标用户群非常精准，致力于帮助知识创作者的头部 KOL 解决社群收费管理难和内容不能沉淀的痛点，他们也不满足于只做一个社群工具，而是要做一个高质量的知识社区，为用户推荐更优秀的内容。设计分析验证通过用户需求分析和产品拆解，接下来，我们系统地分析知识星球的产品设计策略，一起来验证他们是否解决用户的痛点。1. 星球管理一个星球就像一个社群，一个贴吧，一个 BBS，用户可免费建立，而星球的建立人被称为「星主」，其次通过 APP 就能实现对星球的日常管理，非常方便。建立星球星球类型创建星球非常简单，只需要进行简单的几个步骤就能建立自己的星球。星球又分为「免费星球」和「付费星球」。免费星球侧重于引流和激活，付费星球则是帮助星主直接变现，用户需要付费才能加入（平台抽取 5%的会员费）。付费星球相比免费星球提供了更多的功能，比如管理工具、营销工具和数据分析工具等。资料设置星球建立后，星主可对星球进行再次编辑，包括星球封面图、星球介绍等，其中在付费星球中有一个「星球亮点」的功能，主要是在向粉丝展示的落地页支持星主进行个性化的设计，提升用户付费率。星球设置系统设置进入星球管理后，星主可以设置成员的加入方式，可随时修改星球的会员费用，还可以对用户浏览、发表权限进行设置，比如新成员是否可以立即发布、评论、匿名提问等。这让星主对星球的管理更加灵活多变。内容保护星主可以设置粉丝禁止复制、下载，可以开启主题背景水印，甚至可以设置新成员阅读限制时间，从而对星球的原创内容创作进行一定的保护。星球团队一个星球，除了星主之外，可以邀请最多 20 个合伙人和 50 个嘉宾进行一起管理。合伙人就像 BBS 社区的版主，可以帮助星主一起运营星球，而嘉宾就像代理商，不仅可以自带资源加盟，还可以为粉丝带来意外的惊喜，从而分担星主的时间投入，建立良好的星球交流学习氛围。小结对知识创作者来说，建立星球的时间成本极低，只需简单的几个步骤就能快速建立自己的星球，快速开始运营。其次团队模式的设计，非常吸引知识创作者，不仅可以降低管理成本，分担个人投入，还可以邀请嘉宾丰富社群的内容，一举两得。2. 运营工具为了更直观地了解，我把运营工具按照增长模型的四个阶段来分类，从而了解知识星球的运营工具是否满足知识创作者的需求。激活作业星主可发布「作业」让用户参与，在作业发布以后，粉丝可根据作业的内容进行创作，星主可对作业进行点评，自动生成作业排行榜。作业不仅可以实现星主和粉丝的互动，帮助粉丝提升技能，更能快速激活用户，培养用户习惯，从而提高用户活跃度和留存率。打卡「打卡」是一个培养用户习惯的常见形式，星主可以发布各种类型打卡挑战活动，以 7 天、14 天、21 天等为一个周期，吸引粉丝参与，从而帮助星球实现用户留存，传播引流。提问「提问」就是粉丝向星主或嘉宾发出提问，这是用户激活的好方式，不仅可以有效丰富星球的内容，更能实现双向创作，形成良好的星球交流氛围，从而提高星球的活跃度。留存排行榜根据粉丝活跃度，星球会自动生成每周成员活跃周榜，根据用户贡献值，会形成每周积分排行榜，而根据粉丝邀请入群的人数，会形成每日、每周、每月的邀请排行榜。排行榜充分利用了用户的攀比心理，提高用户活跃度。动态当用户加入一个星球以后，「动态」就像一个星友圈，会同步更新星球最新的发帖动态，通过高频的外部触发，有效提升用户留存率。传播分享星球支持多种分享方式，可分享给微信好友，可分享到朋友圈，可生成加入链接，可生成二维码海报，其次还可以结合优惠券、体验卡等工具生成更丰富的分享样式。分佣星主可开通「分佣模式」，粉丝每成功介绍一个好友加入，就能获得对应的酬赏，这可以有效帮助星球传播拉新。引流发现「发现」就像一个广场，包含了热门问题、热门星球、精华主题和排行榜，平台会对各个星球创作的精品内容进行遴选，最后推荐到发现板块，这对星主们来说，不仅有更多的曝光机会，还有机会获取更多的粉丝。星空问答「星空问答」和发现一样，星主可以根据自己所擅长的领域进行回答，一方面可以激发自己的创作灵感，还可以通过高品质的回答赢取平台和粉丝的认可，从而为星球引流拉新。小结运营工具作为知识付费者的运营武器库，也是星主们在运营过程中对产品的真实体验，产品到底是否有用，是否能帮助他们解决传统运营过程中的痛点，就决定了他们是否继续使用产品。而通过本节的调研，可以看出，知识星球的管理工具虽然可以解决当下社群所面临的痛点，但还略显单薄，还欠缺一些多变性的设计，比如投票、接龙、问卷、抽奖等这些常见的群功能。3. 管理工具知识星球作为一个平台产品，在 PC 端为星主提供了全面精准的数据分析工具，从而帮助星主实现数字化运营。收入数据「收入数据」就是一个可视化的数据看板，星主可通过收入数据对星球的收入有一个完整的数据概览，可查阅累计收入、本月收入、30 日付费页转化率，以及支持导出数据报表。这有效帮助星主对星球实现可视化管理，提高工作效率。推广拉新推广数据通过推广的数据看板，星主按近 7 天、15 天、近 30 天或自定义事件查看详细的推广收入数据，比如 30 日付费页转化率、新增成员数据、拉新渠道数据、优惠券数据等。另外也支持导出数据报表，从而方便星主标准化管理。新人优惠券星主可设置「新人优惠券」，吸引新用户加入，优惠券可以生成推广海报和链接，方便宣传推广。渠道二维码「渠道二维码」可以理解为星主可以设置不同的代理商或广告渠道，方便代理商帮助传播拉新，其次可以全面统计各渠道的二维码数据，实现对数据的实时监控。付费页优化「付费页」也就是星球分享出去后粉丝访问的落地页，这个落地页的转换率非常重要，所以平台提供了个性化设计的功能，帮助星主提高落地页的转化率。用户活跃成员活跃这是星球用户的数据看板，星主可以查看星球的总用户数，付费加入成员，近 7 日流失率，月活跃成员，以及详细的用户活跃数据，方便星主对星球用户的活跃度进行实时检测，及时调整运营策略，保证星球的活跃度。内容活跃「内容活跃」也即是针对星球内容产出的数据看板，星主可以查看整个星球用户产生的内容，包含当日新增点赞数、评论数、发帖数等等。成员积分榜「成员积分榜」是一个提高用户活跃度的好工具，可以为用户行为设置积分，比如点评、点赞、发布主题，这样有助于粉丝可以通过高频的互动增加积分，而积分不仅可以生成排行榜，也可以结合其他方式对粉丝进行回馈。成员续费续费数据在成员续费板块，星主可以通过数据看板了解粉丝们的续费数据，包括今日续费收入、本月续费收入、可提前续费会员、过期 7 天未续费会员以及续费页转化率等。续费优惠券星主可设置「续费优惠券」，提高粉丝的续费率，优惠券可以生成推广海报和链接，方便宣传推广。续费通知星主可以发布续费通知，然后批量发送给粉丝，提高触达率。续费折扣「续费折扣」和续费优惠券相似，都是为了提高粉丝的续费率，续费折扣可以直接分享给微信好友以及生成朋友圈海报。运营工具创作灵感知识星球同步采集了微博、头条和微信的热搜数据，方便星主可根据最新的互联网热门关键词进行创作。视频号直播知识星球和微信视频号全面打通，当星主进行直播的时候，可以选择仅星球成员可观看，这有助于丰富星球的运营方式。小结从管理工具这一节的分析，我们可以看出，知识星球的管理工具覆盖了一个社群管理的所有生命周期，不管是新用户的激活、老用户的续费、推广渠道的拓展、用户活跃度和流失率的监控，这真正就像知识星球的向知识创作者提出的运营理念——把你的星球，当做一个产品去设计规划。4. 分析总结通过对知识星球的设计分析，我们可以看出，作为一款社群工具，知识星球的三大功能模块足以解决知识创作者的三大痛点，不仅为星主们提供了丰富完善的管理、运营工具，其次知识星球从未满足于只做一款社群工具，通过多年的发展沉淀，他们已经在不断探索更多的业务方向，励志为星主、为用户提供更高质量的知识社区。写在最后的话我在写这篇分析报告的时候，其实遇到了一个困境。因为在知识星球的帮助中心，已经对整个产品的功能做了很全面的介绍，如果我只是去复述一遍，这样没有任何意义，还不如把链接分享给大家。所以你现在读到的这个版本，其实是第二个版本了。我抛开之前的分析结构，先剖析用户的真实需求，然后再对知识星球的设计进行验证，最后再输出自己的观点。没人给我钱，但我就不怕麻烦，只求每一次的产品分析都能获取突破。作为一个刚踏入门槛的知识创作者，我从商业设计转型到知识付费，在未来，我同样会面临如何通过自己的创作变现，养家糊口的难题。直到对知识星球进行了全面的调研分析以后，我才豁然开朗。我真喜欢知识星球的一句话——知识有价，所以真正有价值的星球，你无需焦虑，他们（粉丝）会用金钱和热爱来推动你继续。知识星球创始人吴鲁加曾经在他的创业故事里描述过对知识星球的愿景——知识星球没有自带光环，很弱小，但它就像Eric Raymond 《大教堂和集市》里面一个开放的集市，任何人都可以进来搭个摊子，有些人嗓门大，有些人东西好。我们更相信集市的力量，用集市的方式，让更多人能参与到内容创业、学习、教育里，这件事如果做成了，我们会很满足。如今，知识星球已经走过自己的第一个七年，而下一个七年，他们正在为这些小星球之间建立一条条高速公路，把过去封闭的星球通过知识链接，形成一个开放、包罗万象的大宇宙。也欢迎大家加入优设的知识星球 https://vip.uisdc.com/参考文献：《小群效应》-徐志斌知识星球帮助中心吴鲁加：与创作者、学习者在一起的七年练一练假如你对未来有点不知所措，不妨和我一起静下心拆解学习，通过持续分析优秀产品的设计公式，一定可以解开你设计生涯所遇见的困惑。没有比学习回报更高的投资了。1. 小练习用思维导图工具梳理 1 次知识星球功能信息架构，不要放过任何一个细节；完整体验知识星球的交互流程，不要放过任何一个页面，最好截图保存；用设计工具临摹知识星球界面，可以不用考虑配色、配图，输出高保真即可，可以先尝试 10 个页面；尝试撰写一份知识星球的产品体验报告，把你的体验感受都写出来，别嫌麻烦，勇敢去尝试；假如你在练习过程中有任何疑问都可以找我沟通，我会为你解答。2. 产品资料包本期产品拆解的素材资料包，包含了知识星球功能信息架构图、高保真设计交互源文件、产品分析报告 PDF 版、腾讯文档纯享版，免费分享时间为 5.16-5.20 日，不过如果你完成至少 1 个作业，资料包不限制时间领取。万字干货！微信读书产品设计策略推导全文11250字，拆解页面80个，3大理论设计模型，100多个产品设计细节，通过对【微信读书】的设计策略推导，为你提供一份读书类APP产品解题宝典！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 产品资料包27.3M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/zsxq-operation
图标 页面 用户 大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的设计细节至关重要。之前有分享过关于图标设计的文章：5000+干货！从4个方面掌握图标设计的基础知识Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。阅读文章 > 这次总结一下图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点。在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。风格常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。线形/面性：最基本也是做常用的风格，广泛用在页面设计中。彩色：通常用于反馈用户的操作或者增加用户的注意力。3D/写实：当页面中的某个内容需要引起用户高度注意时使用，一下抓住用户的视线。Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 重量简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。属性构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。描边粗细：手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致，4px 的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。网格图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。视觉校正由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。角度设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。比例图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。清晰图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。细节这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。一致性这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。熟悉感面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义最后以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/11-icon-design-details
插件 字体 这款 最近打开 Figma，点击我的插件，发现我已经安装了这么多插件…我究竟要用哪一个插件？我不知道，每一个插件的是用来做什么的？我不清楚。因为身边的同学不停的给我推荐插件，而我便不停的安装，导致这么很多插件，我都没怎么用。今天为了解决这个问题，花了一下午的时间整理，分享一下我最常用的 7 款 Figma 插件，大家也可以跟着我的思路，一起来整理一下你的 figma 插件。往期回顾：这 9 个效率逆天的 Figma 插件，用完回不去了！第二波插件推荐，都是我用过觉得还不错的，希望你们能喜欢！阅读文章 > 这10个效率逆天的 Figma 插件，用完回不去了！从 9 月中旬开始，陆陆续续更新 Figma 系列到现在已经第十篇了，期间非常非常多的小伙伴因为这个系列获得了帮助、甚至加我好友催更，真的感谢你们所有人的支持。阅读文章 > ContentoContento 是一款内容填充插件，当然，在插件市场上你会发现，类似这样的插件非常多，但是我在使用过一段时间过后我都放弃了。有的是因为 操作过于复杂，比如：Content Reel，他没办法做到本土化的数据，因此不能开箱即用。有的是因为功能简单，比如：Chinese User Data Generator，我没办法做到自定义数据内容：使用 Contento 主要能够满足我三个需求：1. 内容简单：其实在日常的使用当中，我们要填充的无外乎就是常见的 “姓名、地址、电话、邮箱”等内容，在常用功能当中，我们最主要的是想要功能地快速上手，当我打开 Contento 就可以直接进行使用2. 社区强大：如果系统预设的内容不满足你的需求时，你也可以打开社区，在社区里作者会更新一些较为常用的图库和文本，然后你只需要这样点击，即可拥有这个素材内容。3. 自定义：假设系统自带以及社区的内容库还不能够满足你的需求，你还可以利用 Contento 进行系统的自定义，在插件当中点击这里的 “加号”，选择想要添加的 文本、图片 等格式，进而将自己产品独有的内容放到里面，下一次就可以直接使用。Chinese Font PickerFigma 的中文字体选择，真的无力吐槽，Figma 你看看其他同学，像 PS、Sketch、甚至是 PPT、Axure，别人字体选择是怎么做的，再看看你，Figma，长点心吧！因为 Figma 软件本身自带有很多种字体，而这些系统字体也就造成了我们很难从众多字体的字体当中，选择用户想要的字体内容。另一方面，我们没办法快速预览字体，因此只能够通过 猜测这款中文字体的英文名字，来进行寻找。因此被逼无奈，只能够曲线救国，使用字体选择插件来解决这个问题。Chinese Font Picker 插件就能够快速呼出字体选择器，并且这里展示的字体都是经过筛选，会主要展示支持中文的字体通过每一款字体，我们可以预览字体具体的样式，方便我们快速的做出判断，Chinese Font Picker 是我使用频率最高的插件。FigmaEXFigma 当中使用插件也会非常的麻烦（专业一点来说应该是操作路径过长 : ），因为 Figma 本身插件呼出非常低效，再加上很多设计师并不会记住插件的名字，导致寻找插件非常鸡肋。在 Figma 当中，比较难使用的便是如何高效的切换插件。这其实是一个交互问题，恰好 FigmaEX 解决了这个问题。我们都知道电脑屏幕的布局本身就是以宽屏的形式存在，也就意味着，FigmaEX 利用了横向的宽度，在右侧固定一个区域用于展示基础的信息，这样就能够固定快速你想要的 figma 插件，并且这款插件是国人产出的，也更令人骄傲。不过 Figma EX 需要单独安装，不过这类插件确实已经超过 Figma 可以开放权限的范畴，只能够单独安装。NB Charts在我们 B 端需求当中，一定会存在很多图表类的需求，这时候便可以使用 NB Charts 这款软件来快速实现页面，方便与团队明确这样的方案是否能够接受。并且还可以根据图表进行内容的调整，导入对应的数据 JSON 等等…，可谓是非常强大。这位开发者也是中国人，还开发了这两款在线神器：数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps大家好，我是灰色执照。阅读文章 > 可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE大家好，我是灰色执照~ 很开心又和大家见面了。阅读文章 > Measure虽然 figma 软件自带的标注功能就已经非常出色，但是在日常的工作协同当中，我们还是需要对页面当中的内容进行细致的标注，以便让程序员更加清楚的理解我们设计的含义。因此可以使用 Measure 这款软件来对页面的信息进行单独的标注。这款老牌插件，含金量自然不必多说，因为我平时也只是简单用一用标注功能，因此这款插件还是非常不错。Auto follower流程图怎么办？有的时候想要快速连接原型之间的交互，便可以使用它，可以快速连接不同的页面，还可以自定义这条流程线条的颜色、粗细、圆角大小等等。虽然比不了传统的流程图工具，但是解一解燃眉之急还是非常不错的。SkewDat如果想要把一个页面稍稍倾斜一下，你会怎么办？在没使用 这款插件，我需要将这个图片导出、打开 PS、通过 PS 来对图片进行调整，然后导出，再导入到 Figma 里面，整个操作方式可谓是“一气呵成”。SkewDat 恰好能够解决这个问题，同样，它可以斜切：图片、形状、文本 等内容，在使用上可以更加方便，并且这里的倾斜操作是非破坏性的，也就是说我们可以倾斜了过后继续调整字体。当然上面的所有插件都可以在 Figma 社区找到，大家按照名字自行下载即可。欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/7-figma-the-plugin
在路上
张大湿
飞翔的企鹅
落霞与孤鹜
表哥
