细胞 晶状体 波长 近期，所负责项目正在进行适老化的设计，分析过程中找到一些产品相关的研究和对比，但是看的过程，一直有个困惑：老年人看到的世界到底是什么样子？基于这个困惑，通过相关论文与材料，进行了一些关于老年人视角光、色的基础性研究与分析。老年人视角下面两张图，左侧是我们看到的正常效果，右侧是根据我研究的相关论文大致模拟六十岁以上老年人视角下所看到的图像，试想当我们六七十岁以后，看到的世界是这个样子，现在会有何感想（当然，右图的视觉效果不是到了年龄就突然转变的，而是在很长一段时间内逐渐衰退）。接下来我会通过相关分析，讲述下导致问题出现的原因。人眼结构在此之前我们需要先了解下人眼的基本结构，我们看到的光与色通过眼球的晶状体、瞳孔到达中央凹后，在视杆细胞、视锥细胞进行光与色的信号转换，传递到我们的大脑之中。在方便识别的前提下，对不必要信息做了删减光a. 影响光的变量——晶状体随着年龄增长瞳孔晶状体就像太阳下晒久了的有机玻璃一样，晶状体会随着时间而逐渐变黄。其结果就是，红光和绿光还能比较顺利地通过晶状体到达视网膜，一部分蓝光就要被黄化的晶状体所吸收。此外，步入老年后，眼部疾病也随之而来，常见的有白内障、青光眼等疾病困扰，晶状体逐渐浑浊，不再清澈。b. 影响光的变量——瞳孔作为设计师，我们熟知镜头的进光量是随着光圈叶片收缩孔洞大小进行调节，其仿照源头就是人眼的瞳孔结构，此外在镜片上诸如各家镜片的材料各有差异，本质都是为了增加透光率，保证画面的清透。人眼的瞳孔是由瞳孔括约肌来进行直径大小的调节，随着年龄衰老，瞳孔括约肌也不可避免的衰退，最终在 60 岁左右趋于稳定。通过对比，六十岁左右老年人的的瞳孔直径明显比年轻人的小了不少，这也会导致进光量明显降低。因此在老年人的眼中，相同场景看起来比年轻人眼中不仅要偏黄，还要更暗。通过相关论文结论，眼睛在进入老年阶段后，进光量下降约 28-43%，下降明显的相当于我们日常所戴墨镜效果，戴上墨镜感受下吧。色a. 颜色的接收——黄斑区人眼之所以能接收成像，在于眼球内部的黄斑区（类比相机传感器）负责接收光与色，物理角度来说，光、色属于电磁波，黄斑区中央凹的视锥、视杆细胞类似于两种天线接收器，收到电磁波后分别对其进行处理，视杆细胞负责明暗感知，视锥细胞负责色彩感知。在人眼中视杆细胞有一亿三千万个，而负责感知颜色的视锥细胞只有七百万个，仅占到总感光细胞数量的 5%b. 影响色彩的变量——视锥细胞波长前文所说，由于光、色属于电磁波，人眼的视锥细胞分为三个频道区间接收器，分别是 S 类短波长细胞、M 类中波长细胞、L 类长波细胞，这三种细胞分别对应的是蓝色感应、绿色感应、红色感应，总的区间在 400nm-800nm 范围（实际 780nm 之后色彩倾向基本为黑），人眼最舒适的波长在 550nm，也就是绿色。但在自然界并不是所有的动物都有三个区间的视锥细胞，像牛就是因为只有长波视锥细胞（红色感应区间），所以它的眼里就只有红色。由于高频短波具有辐射性，这也就是我们常说的蓝光损伤视力通过上文描述是不是想到了我们设计师日常接触最多的 RGB 模式，没错！我们常用的屏幕色彩显示模式就是来自人眼的色彩呈现基本原理。其基本原理也等同视锥细胞（明暗变化由视杆细胞负责）此外，我们在 RGB 色谱上能看到 RGB 模式是没有明暗变化，只有色彩变化，不同于我们做设计常用的另一种 HSB 模式，它的明暗变化是由颜色交叠覆盖产生。C. 影响色彩的变量——视锥类型数量视锥细胞的长、中、短三种分布并不是均分的，绿色感应中波视锥细胞数量最多，红色感应长波视锥细胞其次，蓝色短波视锥细胞数量最少，这也导致了我们看红、蓝、绿三种颜色的感受也是不同的，典型的案例是色弱、色盲，其病因是三种视锥细胞数量、质量、有无出了问题导致的。要说最经典的问题莫过于——红绿灯为什么不是红蓝灯，除了红、绿色在社会约定俗成的一些认知外，眼球的S类短波视锥细胞（蓝色感应）占比数量最少是主要原因（当然还有明度，早期科技条件下蓝光是没有的）。但这又带来了另一个疑问——汽车尾灯为什么是红色。但上文不是说了绿色占比最多，那又为什么不用绿色？？？这其实是“衍射效应”导致的，高中物理学过光波（电磁波）是有绕过空气中障碍物（非连续介质）可持续往前传播的能力，波长越长，其绕过的障碍物的线度就越大，尤其是在大雾、雾霾，空气能见度差的天气环境，相比绿灯（中波短）更易被人眼接收。为什么在这里提到衍射效应？因为老年人常见的一种眼部疾病叫做“白内障”，症状表现是晶状体内浑浊，导致视力识别能力下降，所以在重要和警示性的内容使用红色会更有效。作为设计师颜色使用上该注意哪些首先将我们前文所讲的人眼基础原理和老年后出现的状况进行下整理。基于上述五个问题，结论如下：a. 颜色饱和度使用b. 单色使用上蓝色上，使用 400nm——460nm波长较长区间的蓝色 ，HSB模式下H范围值211-189（通过内部开发的RGB波长转换器得出）绿色上可直接使用 550nm——#A3FF00即可，HSB模式下H范围值82周边使用（人眼最佳舒适度波长）红色上使用上，720nm 之后的颜色偏深，不大建议使用。但需注意老年人晶状体发黄问题导致的朱红偏桔红问题。c. 色彩组合使用为何蓝色视锥少，还建议使用？因为满屏黄、红确实影响心情d. 护眼模式以上内容是根据人眼生理结构和光色的物理角度做了简单分析，希望大家能够在未来做适老化设计的过程中，减少对色彩的使用困惑，能够从基础原理答复项目成员的疑问和挑战。结语在老年人群体，像白内障这种疾病，60 岁以上老人发病率高达 80%，更不用说其它问题的影响。或许我们使用颜色时，更多考虑的是视觉表现，但对于视障患者、老年人来说，颜色的使用是会切切实实影响到他们生活的方方面面。作为设计师，我们不仅通过明暗、色彩去表达我们的认知、观点，也可以通过色彩表达我们对这个世界不同群体的关爱。近6000字干货！5个方面帮你完全掌握适老化设计（送大厂PPT）前不久看了阿里巴巴的设计周，其中有一个话题引起我注意“适老化”设计，今天就来聊一聊适老化设计的注意点。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/the-elderly-eyes
时间 内容 用户 背景“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。“时间”元素的分类按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：A. 事件的关键构成要素时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。B. 行为的时间标记指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。C. 内容的附属信息用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。“时间”的呈现方式和运用技巧在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；2）两个时间点之间则表示时间段。所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。1. 绝对时间戳绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。时间颗粒度的选择依情况而定，一般场景总结如下：2. 相对时间戳相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。总结在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。当时间作为“A.事件的关键构成要素”时一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。当时间作为“B.行为的时间标记”时该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。当时间作为“C.内容的附属信息”时如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。如何设计「时间显示」更专业？来看大厂总结的方法！背景“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/time-display-design
旗舰店 年货 官方 年货节来了~对于电商设计师来说，年货节的上线意味着终于可以给一整年的工作，画上圆满的句号了。作为一年中最后一个压轴活动，用心程度不亚于 618、双 11。下面一起来看看今年的年货节，各大品牌店铺都是怎么玩的？卡贝锁具旗舰店 | 够霸气~李子柒旗舰店 | 一如既往的优秀极米科技旗舰店 | 好家伙！质感和细节拉满~还有个动画视频小龙坎旗舰店 | 小老虎有点喜感宝贝第一旗舰店 | 很干净杞利元旗舰店 | 是心动的感觉看看动画效果：金典旗舰店 | 不错不错~谷小酒官方旗舰店 | 很长的卷轴~洽洽食品官方旗舰店 | 今年过节不收礼，收礼只收洽洽还有个动画视频：初巧旗舰店 | 标准式微笑蒙牛旗舰店 | 勇敢牛牛，不怕困难珀莱雅官方旗舰店 | 有点意思~翠宏旗舰店 | 字体设计不错啊！罗技官方旗舰店 | 回家喽大益茶叶旗舰店 | 来点逆光的感觉可能会更好rio 锐澳旗舰店 | 画面很温馨~看看动画效果：shvyog 舒友阁旗舰店 | 一如既往的风格华元宠物用品专营店 | 快看，飞虎~飞鹤官方旗舰店 | 稍微有点挤了有个动画效果：尔沫旗舰店 | 故宫吗？桂发祥十八街旗舰店 | 画的不错，下次别画了玖伍叁壹电器专营店 | 大气舒服水密码旗舰店 | 元宇宙来了看看动画效果：太力家居旗舰店 | 这个创意形式最近见过很多次了刺猬阿甘旗舰店 | 有年味~宝岛眼镜官方旗舰店 | 文字标题有个眼镜的标志，够细节三只松鼠旗舰店 | 被萌到了~浪旗舰店 | 虎年浪势起享之美家居旗舰店 | 他家很钟爱使用手势画约旗舰店 | 简单的动效也出效果铜师傅旗舰店 | 震撼~盘古大观旗舰店 | 光效的使用提升了整体的氛围感msekko 旗舰店 | 一只会飞的鱼富光旗舰店 | 年年有余久年旗舰店 | 宫廷范，贵气TOZ 旗舰店 | 表情细节亮了碧生源药品旗舰店 | 对比色用的不错言覃家居旗舰店 | 整体光感营造的很好老金磨方旗舰店 | 曲折蜿蜒的竟然是个“虎”字尚巧厨旗舰店 | 好开心~九阳官方旗舰店 | 场景化的画面，很有带入感乐乐猫宠物用品旗舰店 | 是虎还是猫？可糖隐形眼镜旗舰店 | 虎怕虎？三顿半旗舰店 | 有趣啊~蜀九香旗舰店 | 日历的创意每次年货节都会有皇上皇旗舰店 | 仰视对颈椎好蔓斯菲尔旗舰店 | 前 888 名半价，利益点够吸引人鱼跃官方旗舰店 | 过个科技年！云南白药旗舰店 | 细节有点多啊~周大生旗舰店 | Q 弹~醉鹅娘葡萄酒京东自营旗舰店 | 对企鹅没有抵抗力~花西子旗舰店 | YYDS不得不说，今年的年货节页面设计整体质量很高啊。设计师们，大家辛苦了！年货节上线后，大家应该有时间休息了吧？忙碌了一整年，可以适当的让自己放松放松了，然后收拾好心情，准备回家过春节！大厂出品！ 天猫双十一品牌设计全案揭秘「 罗马不是一天建成的！阅读文章 > 欢迎关注作者的微信公众号：「美工美邦」本篇来源：优设网原文地址：https://www.uisdc.com/new-years-shopping-festival-poster
国际主义 现代主义 伊利诺伊 国际主义（InternationalStyle）在当代是非常重要的风格，它属于商业设计中的“万金油”，放之四海而皆准，世界各国人民似乎都可以接受它，未必最好，但挺合适。这种风格诞生在二战之后，前身是以德国包豪斯为首的现代主义，国际主义风格覆盖了建筑、产品设计、平面设计等领域。国际主义风格建筑国际主义的纲领是“少即是多”，这种设计哲学来自德国设计师密斯凡德罗（Ludwig Mies Van der Rohe），他曾经担任包豪斯第三任校长，活跃于建筑领域，也设计过不少经典家具产品。（相关故事详见下文）“少即是多”是我说的：顶尖设计师密斯凡德罗如果要问设计师一句最适合装逼的话，相信大部分人都会说「少即是多（Less is More）」，甚至有一次我听一名企业主说了出来，可见这句话的影响力。阅读文章 > 国际主义大宗师密斯凡德罗在现代社会我们放眼望去，很多事物都是典型的国际主义风格，比如充斥大城市的玻璃幕墙建筑，手中不同牌子的智能手机，家用电器与各种办公产品，相关的画册说明书等等。国际主义就像音乐中的流行曲，不算高雅，但是属于大众文化无法割舍的一部分，可以取悦大部分人。当代大都市几乎都是国际主义建筑国际主义如何诞生，有什么特征，对我们的工作有什么帮助呢？本次我们一起来了解。为商业而生国际主义跟艺术关系不大，没有所谓的国际主义风格艺术，这完全是一个设计领域中的风格，我们讲述之前先将此界定。国际主义风格家具组合关于国际主义的诞生说起来不复杂，就是随着战后商业活动的全球化发展，大家都需要一种共同的设计语言，无论是平面设计、建筑、还是产品，这样除了有利于沟通交流，也有利于产品贸易。平面设计中的国际主义其实就是“瑞士平面设计风格”（Swiss Design），这方面的内容已经详细收录在史太浓的「平面设计史」系列中，所以本文不会谈及太多。想让作品更高端？先了解「国际主义平面风格」发展史上回我们讲述了第二次世界大战期间的平面设计状况，属于一个多元发展的时期，现代主义也是经过这个过程逐渐变为全球主流设计风格。阅读文章 > 国际主义跟包豪斯的现代主义在形式感上的特征几乎一致，主要是三点：简约反装饰功能与理性讲究几何秩序原因在于两种风格的创作主力军几乎是同一批人，或者说同一个宗派的传人，我们可以理解为同一种风格换了名字，好比同样产品升级了包装换了品牌名。包豪斯现代主义风格平面设计瑞士平面设计风格这两者最大的区别是意识形态，现代主义主张设计的民主化，就是希望通过设计为大众提供良好的居所及产品，而功能、理性、简约、秩序等特点都是基于这个需求形成的。因为重视功能讲究理性才会实用，过去那些重视装饰的设计是为皇亲贵族服务的，而理性、简约、秩序则方便批量化生产，完全符合“功能决定形式”这样的现代设计核心思想。讲究实用性的包豪斯家具而国际主义则是全面采用这些形式来服务市场商业活动，如何让设计在商业活动中产生最大化价值才是国际主义核心考虑的问题。话说二战前后欧洲大批优秀的现代主义设计师移民美国，当时美国开始城市化热潮，需要建设大量住宅与写字楼，而且逐渐增多的跨国企业需要进行国际交流，以及企业产品希望通过设计包装卖到世界各地，现代主义的风格特点都恰好契合这些需求。二战后美国城市大建设所以这一批现代主义设计师得以在各个商业领域大展拳脚，这种实用风格落地开花，成为最主流风格，获名“国际主义”。1950-1980 年代国际主义全球称霸，随后跟一系列后现代主义风格并存直到如今。伊利诺伊理工学院建筑群国际主义这个名词最开始是形容建筑的，其在建筑上的影响力也是最大的，如今大部分国家的大都市逐渐趋同，几乎都是玻璃幕墙的摩天大楼，比如中国的北上广深，城市中心建筑风格都差不多，都属于国际主义的深刻影响。既然从建筑开始，我们就先谈一下国际主义建筑，代表人物首当其冲是前面谈及的密斯凡德罗，因为史太浓在「设计大师启示录」已经谈过他的生平，在此主要谈他其中一个作品来认识国际主义，那就是“伊利诺伊理工学院建筑群”（Illinois Institute of Technology）。德国包豪斯在 1933 年被纳粹关闭之后，密斯在 1937 年移民到美国，当时他已经因为 1929 年的世界博览会设计出“巴塞罗那德国馆“成了大名，得知他到了美国，很多主要建筑学院都纷纷向他抛出橄榄枝。巴塞罗那德国馆最后密斯在 1938 年选择到了芝加哥伊利诺伊理工学院担任建筑系主任，一呆就是 20 年，一边教学一边接受学院委托做伊利诺伊理工学院的总体规划设计，历时也是 20 年。除了规划，还包括教学大楼、设备大楼及图书馆等一系列具体建筑的设计，如此一来，恰好让密斯得以将自己的国际主义设计探索付诸实践。伊利诺伊理工学院建筑群前面我们已经谈过国际主义的一些形式特征，而具体每一位设计师在表现上还会有自己的特点，作为“代言人”，密斯的大部分建筑作品都是非常方正的“盒子”组合，几乎只采用直线，有极限主义的倾向。但是大家不得不佩服的一点是，看他的作品确实可以去到“多一笔则多，少一笔不够”的境界。伊利诺伊理工学院局部其实国际主义跟现代主义还有一个技术上的区别，就是国际主义更加重视数学方法的引用，我们谈平面设计的时候提过“网格系统”，其实在建筑中同样存在。密斯在规划伊利诺伊理工学院的相关设计时就采用了“网格模数”的方式，以 7.3 米*7.3 米为一个单位，这个 7.3 米其实恰好是学院建筑室内高度的两倍。伊利诺伊理工学院设计素描他以这个基本单位来推算全部建筑的长宽高，门与窗户大小，还有过道距离等，于是产生出一种高度秩序化的效果，在学院游览感觉像置身于一个精密的机器之中，工整舒服。这种设计方式后来被乌尔姆学院广泛推广，乌尔姆学院（Hochschule für Gestaltung，Ulm）的首任校长马克斯比尔（Max Bill）就曾经是包豪斯的学生，而且是瑞士平面设计风格的创始人之一。乌尔姆设计学院密斯为了方便师生上课，将伊利诺伊理工学院大部分建筑设计为二到三层（美国有非常充足的土地），而且都是钢筋混泥土预制件结构及玻璃幕墙，建筑效率高，而且室内采光良好，达到美观与实用的平衡。伊利诺伊理工学院大楼内部建筑群中最具有代表性的是“克朗楼“（The Crown Hall），这个建筑就是密斯最典型的“玻璃盒子”设计，这是一个具有开放性用途的大楼。大楼面积约 2500 平方米，室内高 5.5 米，但居然只有 4 根柱子支撑，其实就是用于将顶部撑起来而已，外部再用黑色钢铁构架与古铜色玻璃幕墙包裹，除了简洁，给人一种现代而庄严的感觉。克朗楼开放性用途是因为建筑宽敞的内部空间完全没有分隔，可以根据需要自由分割为展览场、学生模型工作室或者大型演讲会场，能满足 300 名师生进行活动，这样的做法跟当时的巴塞罗那展馆异曲同工。克朗楼内部这种可以自由调节内部空间结构的做法也被视为国际主义建筑的一种特色，我们如今看大部分酒店大厅或者房间都有类似的设置。当然真正被视为密斯国际主义巅峰之作的是 1954 年他跟美国设计师菲利普·约翰逊（Philip Johnson）一起合作在纽约设计的西格拉姆公司大楼（Seagram Building）。西格拉姆公司大楼最有意思的是约翰逊其实就是“国际主义”的命名者，他的故事也收录在「大师列传」。建筑界奥斯卡「普利兹克奖」第一人：菲利普·约翰逊建筑界的“奥斯卡奖”就是 1979 年成立的普利兹克奖，而这个奖项第一届得主就是本篇章的主人公——菲利普约翰逊（Philip Johnson）。阅读文章 > 国际主义风格接班人除了密斯之外，其实格罗皮乌斯（Walter Gropius）、勒·柯布西耶（Le Corbusier）、弗兰克·赖特（Frank Lloyd Wright）、阿尔瓦·阿尔托（Alvar Aalto）这几位现代主义的第一代大师都在国际主义中有不同程度的建树。因为这些人的故事都曾经在「大师列传」谈过，再谈显得啰嗦。用一篇超全面文章，帮你了解包豪斯创始人的前世今生适逢今年是包豪斯诞生100周年，我们来谈谈包豪斯背后那个男人，就是创始人——瓦尔特·格罗皮乌斯先生（Walter Gropius）。阅读文章 > 他设计出 300 万人的城市：顶尖设计师勒 · 柯布西耶现代建筑当中最著名的大师有 4 位，俗称「建筑界 F4」，四位大师之所以能并驾齐驱并非因为什么共同之处，反而是因为各自的贡献独当一面并旗鼓相当，好比香港流行四大天王，能具体说谁最厉害吗？阅读文章 > 被誉为“20世纪米开朗基罗”的设计师，为何让甲方闻风丧胆？在史太浓的《设计师长寿榜》上，排名第六的弗兰克·劳埃德·赖特（FrankLloyd Wright）是一个大人物。阅读文章 > 宜家风格背后的男人：顶尖设计师阿尔托你有没有房子不重要，宜家家居也是值得逛的，本期故事将与宜家风格密切相关。阅读文章 > 所以接下来我们谈一下被视为第二代人物的一些代表者，大家此时可能会被“现代主义“及”国际主义“这样的概括搞得很混乱，所以这里史太浓给出一个界定的方法，就是时间。不管现代主义风格的任何设计人物，是否同一个人，在二战之前的作品一般视为现代主义风格，而在二战之后则可以视为国际主义风格，这样的切分是比较合理的，因为二战后这种设计风格在商业应用上的比重是最高的。而不同的研究者对于这方面的界定会有区别，甚至人物属于第几代也有不同见解，这些都很正常，我们不是纯学术研究所以不纠结这些，而且告诉大家一个重要概念，就是：有历史，是因为有写历史的人。所以不同的人在历史研究中都有自己的心得，谁都无法回到过去证实一些争议，历史没有真相，没有绝对客观史料，更重要的研究历史的目的是什么。接下来要谈的一位重要人物是查理德·纽特拉（Richard J Neutra），他生于 1892 年，奥地利人，曾经在维也纳从事现代主义风格的建筑设计，1923 年之后移民到美国。查理德·纽特拉美国土地辽阔，而且一战之后持续很长时间建筑工程都非常兴旺，所以被大部分欧洲建筑师视为设计试验的天堂，事实也证明当初包豪斯一切对于现代建筑的设想几乎都是在美国才实现的。纽特拉到美国之后有着长达十多年将现代主义转化为国际主义的探索，意思就是将现代主义设计方法论应用于商业性质的建筑设计中。他对于建筑的看法是要让人的生活品质因为建筑空间而获得提升，所以他不但重视物理层面的功能主义，还考虑到“心理功能“的需求。纽特拉建筑作品比如人在建筑中居住或者办公是否感到舒畅，举一个简单例子，室内照明再好，都不及一个能洒进来阳光的阳台让人感到振奋与充满希望。他的国际主义风格代表性作品诞生于二战之后，名为“考夫曼沙漠住宅“（The Kaufmann Desert House）。考夫曼沙漠住宅考夫曼就是那一位请赖特设计了著名的“流水别墅“（Fallingwater）的匹兹堡百货公司老板，看来他很喜欢在各种大自然中做度假的房子，话说回来有见识的甲方也是造就经典设计作品的一个关键因素。流水别墅纽特拉为他设计的这所位于洛杉矶东部沙漠城镇的别墅充分考虑了沙漠地区的特殊环境，比如有游泳池这样符合当地气候的设施，有采用敞开模式，有遮阳顶棚的宽大阳台等。而且为了让居住者可以欣赏辽阔的沙漠景观，大部分墙面是开放式或者采用落地玻璃门。考夫曼沙漠住宅设计图这个住宅房子外形简洁，是以直线为主的钢筋混泥土几何造型结构，围墙内的外墙以纯白为主，外围墙则考虑跟周围环境结合是土黄色粗糙的贴面，同时在散热，取暖（沙漠地区昼夜温差大）的具体配置上考虑周全。考夫曼沙漠住宅这所住宅被视为美国西部最杰出的国际主义建筑之一，而在完成这个住宅的第二年，纽特拉又设计了另一个代表作—特里曼住宅（The Tremaine House） 。这所建筑跟考夫曼住宅一样看上去都很简练，但其实是一种深思熟虑之后的高度提炼，隐藏很多细节，比如特里曼住宅设有一个收藏艺术品的地下画廊，可以直接跟花园贯通，所以国际主义往往有着一种高度审美的精致感。特里曼住宅这也是密斯另一个经典国际主义设计哲学的体现，就是“上帝在细节中“（God is in the details）。当国际主义建筑发展到一定程度时其实也产生了不少分支，其中主要有四种，分别是：新现代主义，代表人物为贝聿铭（Ieoh Ming Pei）典雅主义，代表人物为山崎实（Minoru Yamasaki）有机功能主义，代表人物为埃罗·沙里宁（EeroSaarinen）粗野主义，代表人物为路易斯康（LouisI.Kahn）现代主义最后的设计大师：华人之光贝聿铭（上）随着史太浓「大师列传」的发表，蛮多朋友私信给我们提出自己希望看到的大师，其中有一位频率特别高，而他恰好也在我们的讲述计划内，就是今天的主人公，被我们称为华人之光老爷子的贝聿铭先生。阅读文章 > 现代主义最后的设计大师：华人之光贝聿铭（下）贝聿铭曾是包豪斯创始人格罗比乌斯的学生，也是唯一作为华人跻身于现代设计大师行列的，而且被誉为「现代主义的最后一位大师」。阅读文章 > 这些分支各自在继承国际主义建筑的基础上有了自身发展，具体情况不是一篇文章可以讲述完的，所以后面有机会再跟大家展开来谈，本次主要的目的是希望大家清楚国际主义的来龙去脉与基本特征。结案陈词国际主义风格在建筑与平面设计中的表现是比较具体与典型的，所以也更加方便归纳，但如果放在产品上而言，情况相对复杂。首先是产品这个概念本身范围太大，从交通工具到家用电器，从数码电子到锅碗瓢盆，从男女老少到人体工程等，考虑的因素更加综合，所以一般而言很少在产品设计中谈论国际主义。有国际主义风格特征的电器设计但不谈论不代表不存在，比如家具中就有典型的国际主义，不少国际主义建筑师本身也做家具方面的设计，密斯的“巴塞罗那椅“（也属于现代主义代表）、沙里宁的”马铃薯片椅“都是例子，因为这些家具直到如今都在生产，都在国际社会中适用。巴塞罗那椅 vs 马铃薯片椅不管如何，国际主义风格仍旧是设计师必须了解掌握的，这也许会是一直存在的设计风格。今天的故事讲到这里，感谢各位，下期再会！欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/internationalstyle
用户 香味 信息 谈到访谈，社恐人士就会有些犯怵，照着提纲问问题访谈过程无比干涩，信息分析的时候总觉得获得的信息不够。而社牛人士觉得不就是聊天问问题嘛，但光聊天能拿到我们想要的信息吗？怎么保证我们通过访谈获得的信息是有效的呢？以下有几点小技巧，帮助我们在访谈过程中能拿到更完整、真实的信息。而且不只是用在用户访谈，沟通需求的时候用起来也能达到奇效哦。怎么在访谈中拿到更完整的信息1. 适当沉默当我们日常生活中沟通聊天时，最怕突然的沉默。这种沉默往往会成为压力迫使大家尽快找到话题打破安静。但是在访谈中却不尽然。当你抛出一个问题，用户回答之后你可以先不着急继续问问题。因为用户也不知道自己应该回答到什么程度，所以有的时候他只是做了简单的回答试探下你。如果用户停顿后你很快接话用户认为对你来说刚刚的信息已经足够了，他可能还有更多的信息就不用说了。但是如果你还在沉默，用户会理解为你还在等他更多的回答，想了解更多，也会再继续表达。即使他刚刚说完了，也会进一步表达会重新阐述自己的意思。当然这个技巧在一次访谈中不能过多使用，不然会给用户造成整个过程很不舒服的感受。2. 同一个问题，多次追问同样的，因为用户不知道需要回答多少内容，可能只是简单的给出一部分回答。在一些非常很重要的问题上，用户如果给出了一些回答之后，为了保证我们获取的信息是完整的，我们可以再追问是否还有其它的，可以多追问几次。问：您喜欢这个产品的哪些地方？答：独立包装不错。以前的我都需要重新拿袋子装好怕染色问：还有吗？答：它的样子包装也比其它的好看一些。3. 了解事件，而非片段当我们在于用户沟通的时候，尽量让用户还原事件的完整经过，了解了事情的来龙去脉前因后果后才能够完整串联用户的行为、知道发生了什么事情导致用户会有这样的行为，后续又导致了什么，再从中我们能挖掘出用户的需求和痛点答：我养了猫，之前铲猫屎会比较臭，但是用了那个产品之后我觉得还行。它可能能掩盖一定气味。问：你家猫砂盆是放到厕所里的嘛 ？能给我完整讲讲您是怎么铲猫砂，怎么使用这个产品的吗？答：我家的猫砂是放到外面。但是我每天会铲，拿到厕所铲，直接冲到马桶里然后冲下去。之前会有点味道，但是用了这个产品之后味道会好一点。但是因为是直接倒进去的，所以多多少少会沾到，需要多冲几次才会把所有的猫砂下去。4. 关键词语，明确含义访谈过程中用户提到的一些核心概念，比如名词、形容词一定要有定义。因为经常会发生用户用的名词和我们想的是不一致的，不要想当然的以为用户表达的就是你心里想的。重要的名词、形容词要和用户进一步确认用户表达的是什么意思。这个技巧在工作聊需求的时候也可以用哦。答：这个味道像香皂，这个像洗衣液，这个就有点像果冻问：你说果冻是什么意思呢答：就是闻起来有点甜腻，感觉这种味道就不是给你很干净的感觉。香皂啊、洗衣液啊这种就给你很干净的感觉。5. 借助对比，引导更多有的时候一些问题直接抛给用户用户很难回答，比如问用户 XX 产品哪里好。这个时候我们可以通过对比的方式，让用户判断对其它类似产品的态度想法，能帮助获得对用户而言哪些是关键的，哪些是不重要的。问：我这边准备了几款类似的产品，想看看你对这些产品的态度。第一种是针管式的，用针管打进去，手不用贴那么近。答：这我觉得长度会稍微好一点，但是我还是我觉得这种东西不能一次性用完，那个东西我还要放在那里，其实有点诡异。问：这个是消臭元（你滴一滴可以除臭的），这个是悬挂球，这个是固体清新剂，这几个产品你会比较喜欢哪个啊答：我会比较喜欢消臭元，使用起来很方便，不会觉得很脏。悬挂球也不行，也是离马桶很近。怎么在访谈中拿到更真实的信息1. 交叉验证，横向对比用户有时候讲出来的观点也不一定是经过深思熟虑的，这就需要访谈员的一些辅助，帮助用户整理思路，找到最核心最重要的信息。比如用户讲了一个观点，我们可以反向询问用户有没有例外，是不是所有的情况下都是这样的。如果存在例外或者反例，我们就可以深入挖掘为什么会存在这个反例。和原先的观点是否冲突，还是一种补充。问：那在香味方面你会有追求嘛？答：香味我个人觉得很香的东西只是把气味盖住，而不是清除。所以我个人对香味没有追求。而且太浓我会觉得很不舒服问：那你有因为香味购买过一些厕所清洁产品嘛？当时是什么一个情形？答：还真的有过，之前被小红书上的一个生活博主种草了一个消臭元，主要是因为当时他说味道不浓，闻起来是很自然的味道。2. 前后矛盾，温柔提出疑问有的时候，你会发现用户的前后观点、行为有矛盾的。有的书说，不要挑战用户，但是在实战中我发现是可以点出来的。但是，一定要注意你的措辞，不要让用户觉得自己被挑战。而是虚心请教、疑惑的语气。问：我有个比较好奇的地方啊，你刚才说对香味其实是没有追求的。但是在刚才几款产品中你最喜欢的还是消臭元，这个地方是不是有点矛盾呢？答：我主要还是从使用角度来考虑的，操作起来比较方便，其它几个离马桶都太近的问：那固体清新剂呢答：因为我可能不需要长期的这种香味吧，如果有需要的时候可以滴一滴，比如我铲猫砂的时候。平时没有问题也不需要香味3. 现场总结和向用户求证在一个很重要的问题访谈完之后，可以将用户前面表达的内容和观点进行总结和向用户求证是不是正确，是不是完整。问：所以听下来您家里马桶清洁最主要的还是让它保持干净就好了，因为无论是清洁剂还是清洁块你最关注的都是这个。答：对的问：那在香味方面你会有追求嘛？答：香味我个人觉得很香的东西只是把气味盖住，而不是清除。所以我个人对香味没有追求。而且太浓我会觉得很不舒服。以上几点小技巧无论是在访谈中，还是在工作聊需求的过程中都可以使用，大家可以试起来。更多访谈技巧：从多次实战中，总结了用户访谈的 8 个小技巧去年被调到了新的专业产品线，为了更快的熟悉新产品，了解用户的目标和使用场景，做出更好的设计。阅读文章 > 从3个方面，帮你做一份更好的用户访谈在这篇文章中，我将带你一步一步地学习如何准备、执行和分享成功的用户访谈：如何列出访谈必要问题？阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/8-user-interview-techniques
点击率 模块 策略 策略-设计-验证-调整策略-再设计… 产品设计的过程总是以此循环，关注设计落地后的数据反馈，正不断为我们下一次的设计优化划重点。前段时间，我们为京东 APP「逛」频道做了设计改版，并分享了如何在提案阶段，让我们的设计更快过稿：设计前多做这一步，让你的方案更快过稿设计师的必经之路——改稿+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1+1相信不少设计师都经历过，与客户来回 battle，最终还是逃不过反复改稿的召唤。阅读文章 > 如今这个改版方案已经上线了一段时间，并与旧版设计做了 AB 测试、获得一些数据反馈来帮助我们验证设计策略。以下，基于这些数据的反馈，我们将分享 5 个可有效提升点击率的设计策略。用拇指热区降低操作门槛在这次改版中，我们将创作入口从顶部下移至屏幕拇指热区作为悬停按钮。经测试发现，下移至屏幕拇指热区后，创作按钮点击率比旧版提升了 62.5%。根据屏幕拇指原则，屏幕下方 2/3 区域为易操作区，当按钮所在区域越往上则越难被点击到。创作按钮下移至屏幕中下部的易操作区时，操作门槛的下降让点击率有了明显提升。该研究来自@Josh Clark可能有人会发现，相比旧版创作按钮，新版按钮除了位置下移之外，面积也放大了。那么，“放大”是否是一个有效的设计策略呢？放大虽最直接，但不是最有效这次改版中，其实许多模块都有所放大。不过经测试后发现，“放大”虽然是一种最简单直接的方式，但其转化效果不会很明显。就如上图中看到的 tab 区、用户头像、feeds 卡片，这些只经过“放大”举措的模块，点击率的提升平均只能维持在 7%左右。如果想获得更好的转化效果，光靠“放大”其实很难达到。如果想强调某个模块，还需要结合提升层级、增加动效等方式，结合场景选择合适的策略来达到更好的转化效果。从另一个角度看，如果界面中的每个元素都放大，其实到最后也等于没变化（想象一下老人机）。沉浸式让用户看的更久，但更少这次改版将关注页中的 feeds 卡片，从时间流调整为沉浸流的样式。经测试后发现，采用沉浸流设计的页面，卡片点击率提升了 7.65%，用户停留时长提升了 33.1%，但用户内容消费数下降 2.9%。这说明，沉浸式让用户看的时间更久，时间流让用户看的内容更多。两种样式各有优缺点，这让我们更需要结合自身产品特性和具体场景来选择，使用“时间流“还是”沉浸流“设计：比如在关注页这种半开放域内容场景下，我们更希望用户能对自己已关注的内容，有更深度的互动来促成下单，则使用沉浸流设计更适合；再比如，在推荐页这种以系统推荐为主的全开放域内容场景，我们更希望用户看更多的内容，来达成引流增加曝光量，则更适合用时间流设计。层级是比位置更关键的影响因素这次改版我们将详情页中的热爱榜模块，从页面的头部下移至底部，作为一个吸底浮层。经测试后发现，改为吸底浮层的热爱榜模块，点击率提升了 96.9%。其实，模块不出现在界面中心、甚至放在底部并不等于其优先级低。模块的层级反而是比位置更关键的影响因素：是否为屏幕绝对位置、是否有投影强化点击感、是否有清晰边界与背景拉开..这些才是让模块更显眼的设计策略。为了让大家更明显的感受层级设计对模块的影响，下图展示了热爱榜模块在相同位置、相同内容的情况，大家觉得哪边的设计更显眼呢？图文分离更利于点击针对这次改版中的话题模块，我们用以下 3 种不同的布局，来测试其带来的转化差异。最后发现，这种图文分离的布局点击率最高：值得一提的是，上图中最左边的大图布局，即使其图片面积最大，但点击率还是不如面积较小的、图文分离布局的点击率高。同样的例子还有，这次改版中的一个列表页设计。做了图文分离的设计后，新版列表即使面积变小，其点击率仍比旧版提升了 37.5%。从产品角度看，选择图文分离的小图布局，不仅点击率更佳、屏效也更高。策略-设计-验证-调整策略-再设计…产品设计的过程总是以此循环，关注设计落地后的数据反馈，正不断为我们下一次的设计优化划重点。如何有效提升点击率？这里我总结了4个方向UI 设计师在做需求的时候，经常会接到以提升点击率为目标的需求。阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/5-design-strategy
按下 手势 单击 点击类手势的描述维度与位移类手势类似，点击类手势也存在着自己的描述维度，它们分别是触发时机、点击次数和时间限制，三者的变化同样会产生不同的变种。我们首先了解一下这三个维度。万字干货！交互手势全解析（一）：位移类手势前言一年前更新了文章《交互手势的容错性和逻辑性》之后，有很多读者朋友询问是否能够做一个详细的讲解交互手势的系列文章，讲解每个手势的不同之处、应用场景以及在工作中如何使用。阅读文章 > 1. 点击次数第一个维度是点击次数。常见的点击类手势只需要单击即可触发操作。但是有时为了在有限的界面空间中拓展更多的功能，会增加一个多次点击（后续简称为“多击”）才可触发的功能。例如抖音的单击触发暂停短视频播放，双击触发点赞。点击次数超过 2 次的功能非常少见，因为点击次数越多，相应的教育用户的成本越高。落点是一个会影响系统区分单击和多击的因素，它指的是手指进行点击操作时在屏幕按下的位置。进行第一次点击后，落点周围会生成一个范围，第二次点击的落点需要处于前一个落点周围生成的范围内，只有这样才能形成一次有效的双击，否则就会形成两次单击。多击的判断规则以此类推。生成的范围可以调用直接系统提供的默认值，一般不需要设计师提供。2. 触发时机点击类手势可以在两个时机触发操作，分别是手指按下时和释放时。按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是对于撤销成本低的操作可以使用它提高效率。释放时触发能够通过将手指移出热区进行反悔回退，掌控感强。在 Smartisan OS（锤子科技基于 Android 深度定制的手机系统）的电话 App 中点击数字进行拨号时，触发时机就是「按下时」，但选中一个数字后无法通过将手指移出热区进行撤销。释放时触发过于常见，就不举例赘述了。绝大多数点击操作都是释放时触发，反而是按下时触发的案例非常罕见。前文提到“按下时触发由于不能通过将手指移出热区进行反悔回退，从而缺乏掌控感”。实际上当满足一些特殊条件时，按下时触发也是能够通过将手指移出热区进行反悔回退的。这些特殊条件包括：①点击操作对页面造成的变化较小；②操作结果的撤销成本较小；③同一热区不存在滑动操作。如何理解这些条件呢？下面我们逐一分析。①点击操作对页面造成的变化较小如果点击操作对页面造成的变化较大，就可能会导致原热区消失或被遮挡（如下图），很难让用户建立移出热区进行返回回退的认知。②操作结果的撤销成本较小按下后触发会导致手指一旦按下到按钮后操作立刻生效，如果是支付类，就会面临极高的撤销成本，所以使用按下时触发时，允许通过手指移出热区进行反悔回退的功能必须是轻量的、撤销成本低的。③同一热区不存在滑动操作这个很好理解，如果同一热区存在滑动操作，就会导致为了撤销进行的滑动和其他滑动操作产生冲突。iOS 的锁屏页面输入密码操作虽然是按下时触发（如下图），但是能够通过将手指移出热区进行反悔回退，它是同时满足上述的三个条件的。按下时触发很少被应用，且绝大多数情况可以使用释放后触发替代，因此大家对这部分知识仅做了解即可，日常设计时默认仍然选择释放时触发。3. 时间限制时间限制一般出现在多击和长按两种情况。当手势为多击时，为了与单击进行区分，系统会设置一个时长阈值。如果下一次单击距离上一次单击的时长超过了这个阈值，多击就会被判定为多次单击。如下图的微信中对头像的点击案例所示，在第一次单击后在时长阈值内如果没有检测到第二次单击，那么系统就会将本次手势的操作结果判定为跳转到更多操作页。如果在第一次单击后在时长阈值内检测到第二次单击，那么系统就会将本次手势的操作结果判定为拍一拍。当单击和多击可以作用于同一个热区实现两个不同功能时，系统会延迟对单击的反馈来检测可能存在的下一次单击，从而导致用户在使用单击所触发的功能时会感觉到反馈的拖沓感和延迟感，例如上图微信的单击头像进入更多操作页和双击拍一拍的同时存在，导致单击进入更多操作页时反馈有一个很明显的 0.5s 的延迟。大部分用户对这个延迟可能并不会留意，但是对少部分追求效率的部分用户来说还是影响了体验。当面向特定的用户群时，这个延迟的数字可以做相应的调整。例如面向年轻用户群体的 App 可以将延迟调整为较短的 0.3s 从而提高反馈速度，面向老年人群体或者全年龄的 App 就要趋于保守，使用较长的 0.5s 保证基础体验。因为老年人的反应和操作速度较慢，延迟设置过短会让多击难以触发。当手势为长按时，为了与单击进行区分，系统也会设置一个时长阈值。为方便理解，我们把一次单击拆分为三个状态：抬起状态按下状态抬起状态。在一次单击过程中，如果手指在按下状态的时间达到了这个阈值，那么系统就会将本次手势判定为长按而不是单击了，但如果按下状态持续的时间没有达到这个阈值，那么系统仍然会将本次手势判定为单击。如下图案例所示，在iOS端的照片App中单击打开照片时，按下状态持续达到0.3s就会被判定为长按并触发情景菜单，不超过0.3秒会被判定为单击打开图片。将时间限制的用法进一步延展，可以在单个热区触发超过 2 种功能，在一定的时间限制内触发一种功能，超过了时间限制则触发另一种功能。例如在 iOS 端桌面按下应用图标，当按下的持续时长不超过 0.3s 时，被判定为单击打开 App。当大于或等于 0.3s 且小于 2s 时，会触发更多菜单，当大于或等于 2s 时，会触发编辑主屏幕。不过，当单个热区通过区分按下时长来触发的功能越多，用户就越难感知到时间限制的边界，操作成本因此更高。另外补充一点，如果单击与长按共用了热区，那么单击的按下状态的持续时间必须小于相应的时间阈值。为了进行区分，我们将这种被限制在时间阈值内完成的单击称作做“快击”。常见点击类手势解析1. 单击定义使用单指在热区位置按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态」。特点单击是在移动端使用最普遍的手势。相较于其他手势，单击是最容易让用户感知到的。上文讲解「触发时机」时提到过，单击时可以通过在按下状态时移出热区，在热区外抬起从而取消本次操作，因此给予了用户反悔的机会。案例AppStore 每日推荐中，单击某个推荐卡片可以进入推荐的详情页。iOS 的设置中，单击开关按钮可以切换飞行模式的开关状态。2. 按下定义使用单指在热区位置按下，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态」。特点与“单击”相比，“按下”由于从“抬起状态”到“按下状态”即可触发操作，导致不能通过将手指移出热区进行反悔回退，从而缺乏掌控感，但是在撤销成本低的操作可以使用它提高效率。按下手势极少用于可产生明确结果的操作，一般仅用于用户按下按钮后的视觉反馈。案例在 Smartisan OS 的电话 App 中拨号时，按下数字按钮不需要抬起即可成功输入。得到 App 调节文字的字号时，按下相应的大小级别就立即生效。这两个案例中的“按下”替换为“单击”也是可行的。3. 抬起定义在单指已经在热区位置处于按下状态时，抬起手指从而触发相应的功能。整个变化过程为「按下状态抬起状态」。特点“抬起”的触发前提是手指已经处于按下状态。某个应用场景中，“抬起”会改变或取消“按下状态”产生的效果。例如在 iOS 相机的照片模式中，按下拍摄按钮并保持按下状态，就会开始录制视频，此时“抬起”就会取消录制视频。案例在手机游戏《愤怒的小鸟》中，拖动小鸟并不松手使弹弓进入蓄力状态，此时“抬起”就会将弹弓的蓄力状态变为释放状态，从而将小鸟发射出去。4. 快击定义使用单指在热区位置按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态」，其中“按下状态”不能超过限定的时间。特点快击与单击只有一个不同点，快击的“按下状态”会被限制在特定时间内完成，而单击则不然。快击之所以存在，是因为单击与长按共用了热区。如果单击时的“按下状态”持续时间过长，就会触发长按，因此单击就必须将“按下状态”的持续时长必须限制在特定时间内。我们将这种被限制在特定时长内完成的单指点击操作称作做“快击”，从而和“单击”进行区分。更多细节可以查看前文的「点击手势的描述维度-时间限制」。案例观看抖音视频时，点击视频可以暂停，此处的点击手势就是“快击”。若按下状态保持的时间过长，则会触发更多操作的浮层。5. 长按定义使用单指在热区位置按下，并保持按下状态特定的时间，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态」，其中“按下状态”会被要求达到某个时长。特点与上述的几个手势相比，长按是一个比较隐蔽的手势。除一些教育成熟的使用场景外，如果不加引导，用户很难感知到。其次，长按由于需要一定时间才能够触发，操作效率与单击相比较低。综合以上两点，长按不适合用于高频或主要功能的唯一触发方式，而可以作为次要功能的主要触发方式或高频或主要功能的额外触发方式。网易云音乐长按黑胶查看封面大图、长按文字复制等，长按是这些次要功能的唯一触发方式。哔哩哔哩站的长按点赞可同时触发点赞、投币、收藏（简称一键三连），长按抖音视频分享好友，长按是这些高频或主要功能的额外触发方式。当一个功能仅支持长按不支持点击时，需要在用户点击时进行引导，告知用户正确的手势。举一个反例，哔哩哔哩播放视频页的 GIF 录制功能需要长按才能录制，但是当单击时却没有任何反馈告知用户需要长按进行。更好的做法是在用户单击时进行轻量提示，例如下图中用网易云音乐一起听时，对讲机需要长按才能对讲，如果用户单击，就会通过一个 toast 提示来引导用户。案例哔哩哔哩长按点赞按钮可以同时触发点赞、投币、收藏功能。6. 双按定义使用单指在热区位置按下后抬起，然后再次按下，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态按下状态」。特点双按是一个在移动端非常罕见的手势，并且非常隐蔽。双按很少用于触发一个特定的功能，在移动端它常见于触发一个模式。例如当在一个界面中，上下左右四个方向都已经存在位移类手势了，但是仍然有功能需要新增额外的位移类手势。此时可以将双按看做是一个模式启动方式，双按后可以立即使用上下左右四个方向的手势触发额外的功能。案例在地图类 App 中，通常上下左右的滑动手势会用来拖动地图，双击放大地图，双指张开和捏合用来放大和缩小地图，但是在出行场景中单手操作的情况很多，如何使用单手就可以对地图进行放大缩小呢？通常都会使用双按来作为模式的启动。双按后不松开手指的情况下通过上滑来放大地图，通过下滑来缩小地图，从而解决了单手操作时难以放大缩小地图的痛点。不足之处在于，这个手势的教育成本较高，只有少部分用户能够发现并持续使用。7. 双击定义使用单指在热区位置按下后抬起，然后再次按下后抬起，从而触发相应的功能。整个状态变化过程为「抬起状态按下状态抬起状态按下状态抬起状态」。特点双击虽然也是一个隐蔽的手势，但是在部分场景中由于应用广泛从而降低了教育成本，例如双击点赞、喜欢。当一个热区同时存在单击和双击手势时，会导致单击手势的反馈延迟，具体内容在上文「点击类手势的描述维度-时间限制」已详细讲解，在此不做赘述。案例双击 iOS 的地图的地图界面，会放大地图。特殊描述维度上述介绍的手势通过「触发时机」、 「按下屏幕次数」、 「时间限制」三个描述维度构成了不同的点击类手势，除了这三者之外，有两个比较特殊的维度也带给点击类手势不同的可能性，即「按压力度」和「接触面积」。1. 按压力度通过手指按压力度的不同来触发不同功能的设计首次应用于 Apple Watch 上采用的 Force Touch，之后开始在 iPhone 6s 以及后续部分机型上应用，被命名为 3D Touch。 （由于比较普及的使用按压力度作为变量的功能现在仅有 3D Touch，因此接下来的介绍也主要围绕 3D Touch 进行）3D Touch 从诞生之日起就面临着许多的争议，是划时代的设计还是食之无味的鸡肋？不同的用户有不同的看法。下面我就简单讲一下它的优缺点。首先谈谈优点：①与3D Touch的使用场景最接近的手势是长按，3D Touch与长按相比的优势在于，它可以更快速地触发操作，而不需要长按所要等待的时间，显得更加干脆、流畅。如下图案例，可观察长按和3D Touch唤起快捷操作菜单的速度对比。②与单击、长按相比，3D Touch有更好的防误触效果。例如在支持3D Touch的iPhone机型上，锁屏界面的手电筒只能通过3D Touch触发，点击和长按都无法触发，个人认为目的也是为了防止手机放在口袋时误触。③在特定场景下，3D Touch有着其他手势难以替代的优势。例如在移动端的三维射击游戏中，按键操作一直是个难题，右手很难在屏幕上滑动调整视角的同时开枪射击。3D Touch 的独特属性能够解决这个问题，通过按压力度控制开枪，滑动屏幕调整视角，能够实现边瞄准边开枪的效果。在绘画 App 中，通过 3D Touch 可以用手指按压力度来模拟颜色的深浅和笔触的粗细，从而实现更好的画面效果。上述两个案例遇到的需求都是在单指保持滑动过程中需要另外一个维度的控制，如果遇到相同的需求也可以思考如何通过 3D Touch 来实现更好的体验。其次是缺点：①由于3D Touch并不支持所有的设备，因此App厂商在进行手势适配时就不能把3D Touch当做某个功能唯一的触发方式，而是只能将其作为一个辅助性的手势，而长按作为一个支持所有设备的手势，虽然触发速度没有3D Touch迅速，但是基本也可以替代3D Touch。因此造成了大部分情况下3D Touch是一个可有可无的鸡肋手势。②3D Touch是一个很难被用户察觉到的手势，没有引导的情况下我们很难注意到它的存在，从而降低了使用率。③为了支持3D Touch而产生的硬件成本是一个不能忽略的因素，而且电池的空间因此进一步被压缩，影响设备的续航。综上所述，3D Touch 对于用户和手机厂商来说，性价比偏低，因此苹果公司在后续的机型上砍掉了 3D Touch 功能，使用按压力度来触发功能的设计可能从此也会退出历史的舞台。2. 接触面积接触面积维度支持根据手指在屏幕的接触面积的不同从而触发不同功能。案例比较少见，我认为其中 Smartisan OS 的大爆炸功能将这个维度运用地最为出色。大爆炸是一个系统级的手势，通过它可以快速提取所有 App 里的文字信息进行编辑和更多操作。为了不与各种 App 里已有的手势冲突，大爆炸只能另辟蹊径，找到一个独有的手势来完成操作，下面的操作示例是大爆炸的宣传视频。使用接触面积的判定来触发是一个很合理的解决方案，解决方向有些类似于前面讲到的 3D Touch，但是避开了 3D Touch 所需要的硬件成本。同样运用了接触面积维度的功能还有华为手机的指关节截屏，通过识别包括接触面积等多个参数判断是否是指关节。以上就是关于点击类手势的思考总结，后续暂定的更新计划如下。有兴趣的朋友可以持续关注哦~欢迎关注作者微信公众号：「设成于思」本篇来源：优设网原文地址：https://www.uisdc.com/tap-gesture-recognizer
插画 贴纸 潮流 有没有注意到，最近 2 年，各大品牌厂商的视觉、营销物料当中，潮流插画的比例还在增加？因为只有足够炸、炫、酷、潮的插画和视觉设计物料，才能更好地抓住用户的注意力！不仅插画师在追求这一点，视觉设计师、运营设计师、设计团队、品牌、厂商同样对此非常青睐！但是！即使搞定了插画设计，还存在一个非常实际的「最后一公里」的问题——如何让最后输出的 Banner 、H5 、海报 和插画有机自然地融合到一起？如果你也经常觉得视觉表现力不足，时常被客户或者同事吐槽设计不够丰富、有趣，不够饱满、缺少潮流感、缺乏装饰性，那么你想不想掌握潮流插画，还拥有超强的内容物料输出能力？当然可以，这门课程就是用来解决这两大痛点的！课程亮点当下流行的「手绘肌理+描边填色」2 大插画风格囊括「装饰贴纸、Banner、H5、海报」4 大应用场景插画绘制 + 应用实战 + 作品包装，从学习到求职的完整教学直播授课+一对一作品批改+课后答疑+录屏永久可回放课程原价 499 元，新课价 399 元移动端打开微信扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61dd794ae4b07fb4b4cf80c8/6不到一个月时间，搞定 2 大顽疾！正如开头所说，要解决画风+落地两大问题，这次 Ac 炒碗面 小姐姐将会这样带你学习：1. 先让插画潮起来！这门私房课将会来帮你告诉你，让插画「潮」起来的方法！超容易上手的描边潮流插画！质感十足的人物肌理插画！同时，课程会循序渐进地从最为轻松的「潮流贴纸」设计开始，循序渐进掌握 3 大插画主题内容：百搭好用的潮流贴纸和装饰元素绘制！风格多变、张力丰沛的人物角色插画！整体感良好、视觉力超强的场景插画！学会以上的内容其实是有明确目标的！因为它们合理的搭配组合，就能解决下一个问题！2. 让插画用好用对地方！对，没错！怎么以人物/场景为主体，结合装饰性的贴纸和元素，将标题、辅助信息、有效统合到一个画风之下，也是老师将会详细教授给你的！静物、贴纸、装饰元素的使用场景在 Banner、封面等物料中，人物和场景的使用技巧在 H5 和 页面当中，场景人物和贴纸的混搭方法以上这么多商业案例，都出自这门课的老师：大厂人气潮流插画师：AC 炒碗面Ac 炒碗面一直都服务于充满活力的企业和平台，无论是在知乎、快手还是在陌陌，她都能让平凡的主题焕发出丰富的色彩，在日常的选题中搭建出有趣的脑洞，用插画来呈现丰沛的情感，靠形体和视觉抓住用户和甲方的眼球！活在潮流前线的潮流插画师 Ac 炒碗面 有着她自己摸索出来的一套插画实战方法论，而这也正是这套课程的底气！下面，就是你最关心的课程时间安排和大纲了。这次私房课依然和以往类似，提供的是 22 天的学习周期！课程原价 499 元，新课价 399 元移动端打开微信扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61dd794ae4b07fb4b4cf80c8/6以下就是 Ac 炒碗面老师的插画和设计作品：学生作业：更强的插画，更好地表达，如果你也想像 Ac 炒碗面 一样成为插画高手、实战达人，那么就加入进来吧：课程原价 499 元，新课价 399 元移动端打开微信扫描下方二维码报名，网页端右戳报名 https://pro.uisdc.com/detail/p_61dd794ae4b07fb4b4cf80c8/6本篇来源：优设网原文地址：https://www.uisdc.com/bibo-course-2
用户 文案 产品 当我们想要设计一个用户体验良好的页面时，文案是我们不容忽视的重要元素。它是连接用户和产品之间的重要桥梁，可以帮助用户理解产品，和产品沟通、交互，并指导他们做出重要抉择，完成任务。而微文案可能是设计当中最不起眼的文本元素，但是它们对于用户和产品而言有着巨大的影响。什么是微文案？微文案（Microcopy），是指在用户界面中，引导并帮助用户与界面发生交互行为的单词或短语。除了产品属性相关的内容（如标题等），其他在页面中出现的文案都可以属于微文案设计的一部分（如提示文案，按钮文案，弹窗文案等），大多数的微文案都将直接影响用户的行为：激发用户完成某一行为引导用户完成某一行为给予用户行为之后的反馈优秀的微文案，能够帮助用户更好理解产品服务，与用户产生共鸣。为什么我们需要微文案设计？当我们说到人与人之间的交流时，语言是重要的媒介，而用户与产品之间同样如此。斯坦福大学的克利福德教授在人机交互研究中发现：人们习惯于用人类社会的社交准则来和计算机进行交互。这是因为当人或者物使用语言和我们沟通时，我们的大脑会立即以人类的身份给予回应。所以，语言是使产品更加人性化的主要因素。产品的文案则充当了语言的角色，它可以使用户参与其中，影响他们的情绪，并把这种人机的功能性关系转化成人类的个人情感体验。而这种用户的情感体验才能够真正的彰显品牌个性，从而与其他产品区分开来。微文案设计的另一个优势在于提高了产品的可用性：它可以帮助用户预防问题的发生，并鼓励和指导他们进行操作，减少体验上的阻力。在 2017 年的谷歌 I/O 会议上，谷歌的资深界面文案设计师 Maggie Stanphill 解释了界面文案设计在团队中的商业价值。在他们将「预订房间」改成「检查是否有空房」之后，预订率增加了 17%。如何设计微文案？1. 精简语句。简洁高效地传达内容省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。尽量提供简短、易于快速获取的内容。2. 使用用户熟悉的语言使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。简洁、暧昧模糊的说法，生僻和过于「文雅」的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。3. 表述一致描述同一个事物的词汇要保持统一上下文的语法、语种、语序要保持统一操作的名称和目标页面标题的名称保持一致4. 完整、直接地阐述信息当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。报错是设计中常见的功能，它同样是用户体验中不可小视的组成部分。报错会让用户情绪感到非常低落，所以好的报错微文案对于用户来说至关重要。当用户填写的内容出错的时候，你的报错信息应该符合用户的认知，用易于理解的方式表述出来。尽可能清楚准确地描述报错的原因为用户提供解决问题的建议，如果当前问题不能解决，告诉用户下一步可以做些什么在报错中加入情感5. 拉近彼此的距离直接使用「你」、「我」来和用户对话，与用户建立亲密感。避免使用「您」，让用户感觉太过疏远。6. 友好、尊重用户多给用户支持与鼓励，不要命令和强迫用户。如果你想留住你的用户，当出错的时候就不要责怪用户。专注于解决问题，而不是指责。其他微文案设计小点拾遗1. 按钮文案关注“我能得到什么”而不是“我如何能得到”，比如“下载”或“搜索”之类的通用词并不能让用户做出决定。结合场景，将会有更明确的行为指导。2. 成功提示，表扬用户任何提示或弹窗都是与用户之间的沟通交流，在任务完成后，赞扬一下用户将给予用户继续下去的信心。3. 确认文案不仅仅只有“好的”“我知道了”“确认”4. 注意文案的标点符号为了帮助用户更加高效地扫视文本内容，可以省略不必要的断句点。以下元素单独出现时可以省略标点：标签标题输入框下的提示悬停文本中的提示表格中的句子以下元素单独出现时需要加上标点：多句或多段的文案和列表内容任何文字链前的句子微文案虽然细节，但是在关键环节对体验可以产生很大的影响。日常中我们应多对细节推敲、斟酌、打磨，让产品和用户真正的实现“对话”。历时两月，总结出字数10000+的微文案设计指南本文撰写历时 2 个月，总结了以往的交互经验，翻阅了大量案例，所以本期文章看起来更像是一次分析报告，甚至会有些晦涩和无趣，建议和矿泉水一起服用。阅读文章 > 欢迎关注作者微信公众号：「微交互Lab」本篇来源：优设网原文地址：https://www.uisdc.com/microcopy-design
颜色 板块 色彩 一套的好的配色是设计的重要组成部分之一。对于在座学设计的同学们，尤其一些理工科背景的学生，没有系统的学过配色，对颜色的感觉也比较薄弱，所以在配色环节往往感觉很绝望，所以今天给大家带来一个王炸配色网站，也是 Adobe 的亲儿子：Adobe colors。也许很多人都知道这个网站，但是不知道它里面到底包含什么功能，今天就为大家简单解析一下。https://color.adobe.com/第一大板块：配色模式Adobe colors 具有超级强大的配色模式，一共包含 9 种智能调色模式可以选择，你需要用什么方式去调试颜色点击左方即可操作，色彩模式也支持 4 种，分别为：RGB、CMYK、HSB、LAB。例如你要用单色去做颜色，那么就可以直接选择单色按钮进行调整，调整时他会自动协调你的色值，如下：第二大板块：拾取主题功能你可以直接上传你电脑中的图片进行颜色提取，上传后你还可以选择需要的色彩情境：彩色、两色、柔和、深色、暗色，可以说是相当的贴心了！第三大板块：渐变色你可以拾取上传图片的渐变色，提取的渐变色彩看起来也是非常高级，对于不会做渐变色的小伙伴来说是一个很大的福音，毕竟很多设计师做渐变色都会有点“脏”。在左侧的按钮中我们还可以选取 2-15 种渐变点，简直美滋滋。第四大板块：协助工具可以合理的帮你检查 2 个颜色的对比，预览中可以告诉你在什么样的情况下可以这样用色，当然在右侧也会给你颜色的建议，你也可以自己设定对比率去调整颜色，这样使用你的颜色再也不会显得又脏又 low 了！对比率建议：MD 规范里说文本应该保持至少 4.5:1 (基于亮度值计算)的对比度以保持文本清晰；最佳对比度为 7:1。第五大板块：探索与趋势点击探索，可以浏览一些优质的图片，同时可以提取其中的色卡；点击趋势，甚至可以浏览 behance 中不同设计领域的设计作品使用的配色方案，跟着牛 x 的大神配色总不会错，实时跟进潮流配色，简直爽歪歪！！！当然我们还可以进行搜索，更快的找到自己想要的图片以及颜色，本人非常喜欢用它去寻找情绪版， 不仅颜色一目了然，图片也是非常的优质！总体而言，这个网站不仅从各个维度解决了我们的配色需求，同时也解决了我很多找图需求，简直一举双得。网站链接：https://color.adobe.com/zh/create/color-wheel文章彩蛋！Color Uisdc 配色导航最后，在附上一枚配色神器，来自优设超人气的配色导航，一共7个实用模块，从绚丽多姿的色彩方案到大开眼界的色彩命名，代码也可以直接复制使用，一定会是你设计配色路上好帮手！https://color.uisdc.com让高手帮你配色！超好用的在线配色网站TOP 5编者按：想象一下，在部门会议上，Boss对你美工同事设计的配色不太满意，你却始终笑而不语，当问到你的意见时，你呵气如兰，轻声说出：“就用绀桔梗色搭配枇杷茶色吧，再加少许苏芳香。阅读文章 > 欢迎关注作者微信公众号：「黑狮力」本篇来源：优设网原文地址：https://www.uisdc.com/adobe-colors
插画 儿童 拼图 插画的类型很多，要说一直流行的，儿童插画必须占有一席之地。除了我们熟悉的儿童节专题和商品包装，课本、杂志、绘本也常见儿童插画的身影。通过插画给孩子们讲故事。童趣可爱的插画，总能让用户感受到纯美的童真，开心一笑。在提升他们的愉悦感的同时，还能让产品个性鲜明。资深插画师斯丹就非常擅长儿童插画，她参与的儿童绘本，非常受小朋友的喜爱，销量一路走高，多家出版社与她达成长期合作。儿童插画图书封面 传统故事拼图插画和北京邦臣合作的儿童动物《寻找拼图》插画童话拼图插画2022年1月20日周四晚8:30，我们邀请了斯丹来分享她的独家创作心得。直播示范案例：喜欢儿童插画的你通过这次直播能收获：了解儿童插画的风格特点掌握儿童插画风格的创作技巧帮助你了解自己的能力并针对性的给予提升如何报名：扫下图微信二维码联系管理员@招财，获免费听课机会：本篇来源：优设网原文地址：https://www.uisdc.com/2022-sdc-107
音乐 环境 电台 如果在工作、念书或休息时想要来点背景音乐，但又觉得听流行音乐很容易使人分心或焦躁，那么可以试试看选择「Lo-Fi」风格的音乐，相对于高保真（Hi-Fi）来说 Lo-Fi 音乐显得不太细腻，或是很单调无趣，不断循环的节拍反而听起来很平静，不容易因为华丽的配乐或人声而难以专心，之前介绍过几个适合在工作或读书时使用的 Lo-Fi 音乐网站：想放松休息？试下这个有16种解压音乐的免费网站！如果有在听音乐的话，一定有听过「Hi-Fi」（High Fidelity）这个专业术语，简单来说高保真就是与原有声音高度相似的重放声音，可以打造出有如亲临现场般的的完美聆听感受，因此有不少音响设备会强调 Hi-Fi。阅读文章 > 酷站两连发！矢量雪花图免费生成器+在线解压网站今天为大家带来两个动听、美丽又实用的网站。阅读文章 > 本文要推荐「Lofly」是一个结合环境背景音和 Lo-Fi 音乐的免费服务，提供各种环境声音像是雨声、打雷、下雪、营火、森林、鸟叫声、划船、风声、叶子、咖啡店、农场、键盘、海洋、图书馆、夜晚、道路、电风扇、风铃、电车、体育场、脚步声、时钟和办公室，搭配上 Lo-Fi 音乐电台打造适合各种情境的背景音乐。Lofly 收录 18 种 Lo-Fi 音乐电台，依照音乐类型、适合情境（例如工作、睡觉、读书）、国家地区或是心情分类，选择音乐、开启不同模式的环境背景音让空间变得不过度安静，也能保持专注，特别适合搭配耳机使用。iOS 15 也有内建「背景声音」功能，透过不同的大自然声音降低干扰保持专注。Lofly网站链接：https://www.lofly.site/使用教学开启 Lofly 从左侧选择要使用的环境背景音效，点选就能开启、调整音量或是静音关闭，有像是雨声、打雷、下雪、营火等等环境音可用。如果不确定要怎么搭配组合，Lofly 在上方有生产力、专注或放松模式，选择后会开启对应的环境背景音效，或是点选随机来产生特定组合也很有趣。点选左下角「Click to Change」切换收听的音乐电台，有各种类型、适合情境或心情分类，点选就能马上加入播放器播放，不喜欢就重复此步骤重新选择其他电台。每个环境音都能单独调整音量大小，或设定为静音不播放音效。比较有趣的是 Lofly 也有聊天室和西红柿钟（Pomodoro）功能，从上方选单开启，预设情况就是 25 分钟的专心时间和 5 分钟休息，对于要将 Lofly 拿来做为专心工作或读书来说会很有帮助。将环境背景音效和电台频道选好，Lofly 就是非常称职的音乐播放器啰！搭配上耳机的话确实有一种身临其境的感觉，适合需要专心、来点音乐但又不想因此而受到干扰的朋友使用。值得一试的三个理由：Lofly 结合环境背景音和 Lo-Fi 音乐，提高用户的生产力提供雨声、打雷、下雪、营火、森林、鸟叫声各种环境音可调大小声18 种 Lo-Fi 音乐电台，亦有西红柿钟和聊天室功能本篇来源：优设网原文地址：https://www.uisdc.com/lofly
目标 用户 模型 我们为什么要使用 GSM 模型常规工作中，需求往往由 PM 发起，UE 团队到底如何跟 PM、FE 等团队成员协同，达成目标共识，是我们值得讨论的。因此建立一套科学的模型，通过对目标的设定来倒推过程，结合定性和定量研究，与项目组就目标可以达成共识，并且更加准确的反应出产品目标中的用户体验质量，这套模型就是 GSM 模型。GSM 模型的简介与定义“GSM”是 Google 提出的一种自上而下度量用户行为的方法，通常用于衡量产品/项目目标的实现程度。通过对目标的设定来倒推过程，精准设定指标体系的一种量化研究方法。适用于产品设计中的各个角色。目标：需要解决的问题，通过对产品（项目）目标拆解推导出用户体验目标，体验目标辅助产品目标达成；信号：设计目标实现后所产生出的现象，设计目标是信号的必要条件；指标：是对用户现象的量化，也就是信号所得出的可衡量的数据化现象。GSM 模型的使用场景GSM 模型可适用于产品设计中的各个角色，对交互设计师尤为重要，交互设计师作为连接产品、用户、设计的中间一环，不断在业务和体验之间博弈，寻找平衡点。通过 GSM 模型对产品目标进行分析，结合业务目标与用户需求，找到改进机会点，在设计中帮我们斧正设计思路，对方案不断优化，上线后进行方案效果回收。GSM 模型带来的价值综上所述，GSM 模型基于项目目标，找出设计目标。并且可以辨别设计的优良。GSM 模型的具体实施步骤通过对目标的设定来倒推过程，并精准设定指标体系。step 1 识别并明确目标（Goal）业务目标、用户目标、设计目标是什么？用户要完成什么任务？我们希望他们按照什么路线走？希望他们执行什么操作？这里以手机百度 APP 智能小程序业务端——创建小程序表单项目改版为例，提高表单审核通过率是整个项目目标，通过拆分项目，设计目标为表单填写更快速和表单填写更准确。通过确定设计目标继续推到用户表现。step 2 推导目标对应的表现（Signal）什么用户行为/态度指示了目标达成？什么样的感受与目标失败/成功相关？从目标——信号可以是一对多的关系，根据用 户行为在不同的行为阶段会有不同的信号表现，以用户不同阶段观测用户的不同行为表现。进入 —— 通过各种途径进入页面发现 —— 在该页面中浏览、查找自己所需要的信息辨别 —— 然后通过图片、标题等内容以及设计形式来识别有效信息行动 —— 找到后用户想了解详情，点击链接进入这里还以手机百度 APP 智能小程序业务端——创建小程序表单项目改版为例，将设计目标转化为用户行为。step 3 找出关键的数据指标（Metric）依照用户的行为表现，观测对应的数据指标，通过这些可量化、可衡量的数据指标进行数据分析并指导下一步的优化迭代。1. 进入 —— 作为用户进入的页面，在这一步经常发生的问题是退出，往往会产生两个对应的指标a. 作为用户在网站或 APP 的着陆页，用户离开为跳出b. 非网站或 APP 的着陆页，用户离开为退出往往，在这一行为中“跳出”指标可以衡量页面内容传达与用户目的匹配程度，是否符合用户的心理模型，这也是绝大多数网站首页最重要的数据指标之一。2. 发现 —— 用户来到页面中都要先浏览的过程在这一步，设计师关注的问题是页面中的用户视觉流，关键信息能否被用户快速锁定。3. 辨别 —— 当用户发现关键信息后，需要通过识别文字或样式来判断当前的信息是否与自己的目的符合，并决定是否要继续采取后面的点击行动。这里设计师关注的是信息的易识别性，来快速帮助用户做出决策。关于识别性的指标，归纳出 3 点来进行衡量：a.鼠标悬停时间b.后台报错率c.人均点击次数（适用特殊控件，如筛选器等）4. 行动 —— 用户在站内内容的点击“点击”数据是用户行为中最重要的一点。不仅仅是单个页面，用户在站内行为路径分析中，点击是作为路径中一个节点的结束，下个节点的开始。所以我们主要针对图中的“站内分流”进行分析。在首页的分流数据中，作为设计师主要关注两个指标：a.不同内容的点击占比b.其后续路径中的目标转化质量再次回到我们的工作案例中，根据用户行为表现拆分成数据指标。综上所示，通过表单可视化、精准引导、组件升级的方式，完成项目与设计目标，最终改版成功。结语GSM 模型是一种综合数据验证模型，在使用过程中可以结合头脑风暴、市场调研、可行性测试等方式共同使用。更多设计模型：腾讯出品！7 种人机交互设计模型科普众所周知，人机交互是一门集调研，构思，设计和测试为一体的学科。阅读文章 > 欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/gsm-design-model
按钮 用户 操作 前言说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。从我们有记忆认知开始，按钮就时刻在和我们打交道，墙上的电灯开关、电视机的调节按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下 UI 按钮组件的前身，且不会消失，依然会有很多非数字化的产品及机器设备在持续延用，不管如何演变，基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求，按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。在 UI 设计中，如何完美的避开问题、把按钮设计的更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。分享目录按钮的作用按钮的类型按钮的状态按钮的大小及风格常见误区及避坑指南总结按钮的作用1. 什么是按钮在 UI 设计中，按钮是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（部分场景可用手势交互）来完成。在视觉层面，按钮的组成看起来很简单，由一个底色块/线框加上一组文案即可组成，但真正要将按钮设计好，仅停留在视觉层面并不严谨，其大小、位置、色值、文案…等每一个细节的处理都关系着用户的操作体验，下面的这几种情况大家肯定有碰到过：2. 按钮有什么用通常，我们在设计按钮之前，需要详细理解按钮所存在的意义，哪里该加、哪里不该加、为什么要加，主要从以下几点来体现按钮的作用：功能性操作这种按钮很常见，比如展开、收起、下拉、加减等，按钮视觉较弱，重点强调该页面的功能，突出主体信息，在操作之后会发生一些交互变化，这类按钮主要起到功能形态的作用。明确引导下一步操作当用户完成一个页面的内容填充或信息确认，就会失去视觉焦点，而下一步按钮就会聚焦视觉重心，通过文案告知用户下一步该怎么做，常见的有保存、下一步、支付、确定…等。另外，用户需要完成某个任务，但同一个任务流程的信息、种类较多，这时就会通过分步骤、分页的方式，并在每个步骤的末尾增加一个能起到上下衔接作用的按钮，明确引导用户进入下一步操作，以此来提升用户完成整个任务的成功率。培养行为习惯如果在操作某个按钮之后得到了一定的利益，且能持续为用户带来价值，那么不妨将这个按钮设计的更醒目，并在同等级但不同的地方保持视觉的统一，持续培养用户点击习惯，当用户下次再看到类似这种按钮时，惯性思维就会引导点击。3. 按钮的组成在大部分的认知中，最常见的按钮就是一个底色块加上一句文案就完成了，殊不知一个好的按钮需要经过很多细节的把控，才能发挥出按钮的最大作用。例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分…等，下面我们来看看一个按钮到底是由哪些属性、元素组成。圆角：传达出按钮的气质，决定用户的视觉感受，最常见的为小圆角，也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角。图标：用于按钮含义的图形化抽象表达，例如加载中、编辑；容器：整个按钮的载体，容纳文案、图标等元素；边框：确定按钮的边界，常用于次级按钮描边；文案：用文字表达按钮的含义，精简文案；背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。想让按钮设计更精致？收下这20条超实用的技巧按钮在产品界面中是非常重要的元件之一，按钮作为用户引流和行动触发来说都是至关重要的。阅读文章 > 按钮的类型1. 功能类型按照功能属性分类，可将按钮类型分为流程控制和功能选项操作。流程控制：常见的传统按钮，如支付、下一步、确定、保存等，容器承载着图标、图标+文案、文案。功能选项：开关/加减控件、标签栏/分类、状态切换等，操作之后只针对当前页面做出属性的调整，不涉及流程的变化。2. 视觉样式（横向）视觉样式有所区别，在不同的页面可能存在同等级的权重。常规按钮：最常见的按钮，当同一个页面出现多个常规按钮时，会有主次之分；虚线按钮：常用于添加、上传等操作；文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式突出。3. 层级分类（纵向）高权重：带有填充色的主操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮；中权重：带边框轮廓的概述按钮，同一页面可存在多个中权重的按钮；低权重：纯文本按钮，以及浅色填充+浅色文字的按钮，同一页面可存在多个低权重按钮。按钮的状态在设计按钮时，为了体现按钮不同的具体含义，以及后续设计、开发的统一性，明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素、布局区分开来，以确保按钮的可供性。常见的状态主要有以下几种：待激活状态：需要完成一定的操作、或有一个以上必要的前置条件后才允许交互；正常状态：按钮的正常显示状态，可进行交互操作；点击状态：触碰效果，表示按钮正在进行交互且未结束，会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成；禁用状态：系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。按钮的大小及风格1. 按钮的尺寸在 PC 端设计按钮时，因为鼠标的精准点击，我们通常会将按钮设计的小一些，同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px 范围内的按钮是比较常见的。但移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作时需占用的实际范围。iOS 的设计规范中，将按钮的最小点击区域规定为 44pt，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。在实际的 iOS 界面中，很多应用在设计按钮时并未严格遵循最小 44pt 的这个标准，例如很多一、二级界面的次级功能入口，有些连 30pt 都不到，也并未对用户造成多大的影响，可能是对应的功能权重、用户点击频率都非常低的原因，还有一部分文字按钮，其本身永远都不可能达到最小的触控标准（触控热区加大即可），所以关于按钮的尺寸大小并非规定的很死板。费茨定律告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以，在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小。不难理解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 我们以 8 像素栅格系统、iOS 的 2 倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。2. 按钮的风格在 UI 设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）…扁平化按钮通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B 端应用等。微质感按钮相比扁平化，填充渐变色再加上浅浅的投影，不仅能保持信息内容的简洁、让用户产生更强的操作欲望，还能让页面具有品质感，更加耐看。例如：年轻化应用、娱乐类应用、儿童应用等。拟物化按钮大多设计的很立体，3D 质感、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5 专题、运营 banner 等。新拟态按钮2021 年风靡一时，几乎无人不知，但要想落地却不太现实，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，逐渐销声匿迹，不知哪天会不会经改良后再次面世（当初扁平化问世，也是几经波折，经多年改良才逐渐被大众所接受）。目前只有少数工具类应用使用了新拟态，例如：计算器、AI 设备控制、有道云笔记等。常见误区及避坑指南1. 主/次操作层级分明当同一个页面出现多个按钮时，只允许存在一个主操作按钮，其他不做特别设定。当然，如果次要操作较多，也不宜过多的出现次级按钮，可根据权重降级处理，以小图标或文字按钮的方式呈现。2. 统一样式主/次操作按钮要统一样式，用户需操作时，尽可能的减少其思考及选择时间，按钮应该迎合用户固有认知及惯性思维，节省时间成本，提高操作效率。3. 圆角值在大多数界面设计中，我们通常所见到按钮还是小圆角和全圆角居多，也有部分按钮完全直角，需要根据产品的行业属性与气质来选择最合适的圆角类型。不管如何，尽量避免大圆角（卡片除外）按钮，不方不圆、不伦不类的，显得不够成熟也不好看。小圆角小圆角按钮的圆角值通常控制在高度的 1/5、1/6，儿童类型的应用也有 1/4（较大）的，并非绝对值。如果习惯使用 8 像素网格，根据按钮的尺寸大小，直接将圆角值固定在 8px、16px、24px（较大）这几个数值，能减少设计组件的数量，也利于开发做组件封装后续调用。全圆角全圆角按钮的圆角值固定为高度的 1/2，或者在软件的圆角设置中直接将数值拉到极限。直角不设圆角值，在 PC 端较为常见，也有部分较为严谨的移动端应用使用直角按钮。4. 按钮中的文字按钮中的文字要便于用户理解，不能过于陌生或绕口，用户碰到不易理解的信息会产生困惑，甚至误导用户导致操作失误从而造成损失。除此之外，文字还需要精简，不能过多或折行且能合理的引导用户完成操作。上图的文案歧义就很明显，自以为聪明的设计师想要挽留用户，刻意将主次按钮样式对换，希望用户操作不成功，那么用户在需要取消订单时就疑惑了，到底是点击「确定」还是主操作按钮「取消」才能取消成功呢？或许稍加思考，用户也能反应过来，但无疑增加了选择难度、思考时间及操作成本。5. 文字与按钮比例按钮中的文字太大或太小都会影响用户对信息接收的效率，大小比例需要适中。文字太大会感觉很拥挤（跟大家衣服买小了感觉一样），没有呼吸感，要给文字四周留下足够的空间，同时文字太小会显得小气，看起来也会比较吃力，不利于信息接收。6. 按钮与其他组件的区分设计好按钮组件之后，页面中的其他组件或元素要与按钮有很明显的区别，避免让用户产生不必要的误解。7. 弹窗主/次按钮的位置在弹窗中，主按钮是在左？还是在右？这是一个争论不休的问题，那么不争了，在移动端的弹窗设计中，主按钮靠右就行了，不一定绝对正确，但绝对不是错的。根据调查数据显示，单手使用右手操作手机的用户比左手操作手机的用户量高，且用户也有一定的意识，左侧为上一步、右侧为下一步，顶部左侧为返回，右侧为保存或确定。8. 无障碍设计可访问性是按钮设计最重要目标之一，不仅要样式统一，还应符合用户的认知，让用户能快速知晓这个元素能否点击？点击之后会发生什么？甚至有种似曾相识的感觉。如果将按钮样式设计的与用户认知有较大的偏差，不易于用户理解。9. 减少使用禁用按钮在表单设计中，大部分都需要用户完成一定任务之后才能正常操作下一步按钮，在完成之前，需少用禁用按钮，在前面有讲到「待激活状态」，即在按钮中填充浅浅的主体色等待用户完成任务激活。通常系统默认不允许操作或存在时间限制会用到填充为灰色的禁用按钮，即便如此，也要尽量让系统将其隐藏，万不得已的情况下需要在按钮附近说明情况，以免使用不当引起用户的负面情绪。10. 投影的使用在给按钮添加投影时，选择灰色或纯黑色加调整不同明度即可满足基本效果，但如果想要更好的视觉体验，可以基于按钮本身的色值来调整，让投影效果看起来更舒适，跟页面更搭。另外，切勿过度使用投影，宁缺毋滥，若按钮的投影太深，看起来粗糙脏乱，还不如不用，颜色较浅的按钮尽量不使用投影，否则可能会影响按钮的识别度，让这个页面看起来不够清爽。总结对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考，如论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验。一篇文章不足以道出按钮设计的精髓，还需要我们一起进行更多的挖掘，希望本篇文章能带给小伙伴们一些启发，下篇「图标」文章再见。从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/detail-and-application-of-buttons
可用性 测试 用户 什么是用户研究?用户研究听起来是个非常大的学科和话题，没有具象的描述和切实的研究方法就显得虚无缥缈，让人有种雾里看花的感觉。用户研究和用户体验一样，在国外市场得到验证、认可并被不同行业的企业所接受，而国内市场处于萌芽阶段，只有部分行业的头部企业对其有较为清晰的认知和应用。那么怎么定义用户研究？首先，用户研究的目的是了解用户，对用户有更清晰、具象的画像，是一系列研究方法的概括型的名称。聚焦互联网行业，什么岗位的同学最需要关注和学习用户研究方法？与用户、数据打交道的岗位需要对相关用研方法和分析方法有不同程度了解和应用能力，例如，用户研究员、市场研究员、数据分析师、产品经理、体验设计师、交互设计师等等。作为体验设计师或交互设计师，可以通过研究方法对用户目标、需求和能力的系统研究，用于指导设计、产品结构或者工具的优化，提升用户工作和生活体验。怎么做用户研究?研究中包含的用研方法有很多，可以根据实际场景和资源选择适合的方法，目前常用的实用性、可操作性比较强的四大方法：可用性测试、网站访客（埋点数据）、用户调查、A/B Test。在设计过程中的每个阶段，用户研究是都需要做的工作，但很多时候由于工期较短，deadline 在前，设计师在产品设计初期没有办法做到较为完善的用户研究，那么这部分工作就会被延后，在验证阶段研究任务就会变得比较重，后期的优化对此依赖性也比较强。可用性测试是设计师在验证阶段相对比较能贴近用户的用研方式，在测试过程中通过观察用户行为，从即时的反馈中更容易获得贴近真实的定性数据，用对话沟通的方式深度挖掘用户遇到的问题，从而锁定优化重点。超强干货！这里有7个腾讯最常用的用户研究方法编者按：问卷法、可用性测试、眼动测试、用户访谈、焦点小组和用户画像等等，都是现在腾讯内部最常见的用户研究方法。阅读文章 > 了解可用性测试1. 可用性测试的优势可用性测试是确定用户是否完成目标的核心方式，它与其他用户研究方法有许多相同的测试指标，并且能够得出较多可用的定性数据，可以收集的数据类型也比较多，例如，完成率、出错数、任务时间、任务水平的满意度、测试水平的满意度、寻求帮助的次数和可用性问题清单，这些数据极大的便利了后续的分析工作，帮助多维度的判断产品的状态、用户的满意度、体验问题等等。2. 可用性测试的类型可用性测试可以分为两种测试类型：形成性测试（Formative Test）和总结性测试（Summative Test）形成性测试：主要作用于查找与修复可用性问题，提供及时反馈便于改进，是设计师重点参与的测试类型通常以小样本量的定性调查数据以问题描述和设计建议形成输出采用频率和严重性为指标量化问题，追踪那些用户用到什么样的问题，衡量完成任务时长，并判定他们是否成功的完成任务等总结性测试：用指标度量可用性，用来评估效果，其中又分为基准测试和比较测试3. 可采集的数据样本量：通常大于 30，当数据量小于 10 可通过统计学方法计算得到有效统计分析结论代表性：样本能够代表预期要描述的用户群，若存在不同用户群组中有重要差异因素的使用分层抽样（Stratified Sampling）的方式随机性：考虑所有重要变量，设计理想样本，合理合并用户群组测试数据：现场/远程测试，观察记录用户行为，与用户互动深入挖掘问题完成率：即成功率，完成=1、失败=0，完成率=完成任务用户数/用户总数可用性问题：根据问题出现的频率和影响程度评估严重性、优先级任务时间：任务完成时间、直到用户失败所用的时间、任务总时间出错数：尝试任务产生的无意识的出错数量，诊断失败原因，预判可能出现的场景满意度评分：使用标准化可用性问卷，回收数据计算得出复合分数：复合型总结可为用户体验提供更好的总体描述可用性测试问卷经过长期的研究和市场验证，目前已沉淀出很多标准化的可用性问卷，不同的问卷的评估针对性不一样，可以满足大部分用研需求。使用标准化的问卷是因为这些问卷是经过大量的使用后验证校准后产生的，是被认可具有通识性的衡量标准，这些问卷都具备客观性、重复性、量化、经济、沟通、科学的普适性的优质属性。1. 标准化的可用性测试问卷问卷类型主要可以分为以下两大类：列表中的问卷大部分是需要缴纳一定的费用后才能使用，但其中系统可用性整体评估问卷、软件可用性问卷、场景后问卷是标准可用性问卷中可以免费使用的。应用广泛且被专家推荐的测试问卷是：软件可用性问卷主要针对系统或功能进行整体评估，问题设计精炼清晰，使用快捷方便；单项难易度问题追求的是心理测试的简单和适用性，有 5 分和 7 分制，7 分制的可靠性更高；主观脑力负荷问题是在线测试，灵敏性更好。综合评估下，软件可用性问卷（Software Usability Scale，SUS）是设计日常中最合适最经济实用的测试问卷。2. 软件可用性问卷（SUS）软件可用性问卷是可用性测试结束时的主观性评估问卷，应用广泛，测试后该问卷使用占比约 43%。整个问卷共 10 题，每题为 5 分制，奇数项为正面描述，偶数项为反面描述，可以通过修改问题文案聚焦测试范围；如有需要可以将偶数项的问题调整为正面描述，但数据验证调整为正面描述的问卷结果与包含负面描述的问卷差异不大，不影响问卷的测试结论。在完成测试任务后，用户需快速完成各个题目，不进行过多思考，若用户因某些原因无法完成其中某个题目，则视为选择中间值。3. 可用性、易用性抽取问卷整体可以抽取部分题目作为子测量表来作为单独的问卷有针对性的进行可用性和易学性测量，可用性由问卷中 1-3、5-9 题构成，易学性由问卷中 4、10 题构成。研究表明使用子测量表对量表的可信度的减低可忽略不计（0.92 0.91），并且使用子测量表可减少答题时间。4. 分值计算得分计算：范围在 0-4，每题进行转化分值；奇数题（正面）：原始分减去 1，（x-1）；偶数题（负面）：5 减去原始分，（5-x）SUS 总分= 所有转化过的分值相加 * 2.5, 多样本算 SUS 总分均值可用性总分=所有转化过的可用性分数相加*3.125易用性总分=所有转化过的易用性分数相加*12.5统计学描述方法可用性测试因为耗费时间较长，能够参与测试的用户资源稀缺，回收样本量小能够收集到的样本量一般会比较小。样本量小的情况下这个样本量所能概括的整体是范围比较大的，会存在较大误差，那么在较为严谨的报告中，可能需要对所得分数和除测试样本外的分值预期进行描述，这时候会涉及到统计学中常用的描述方式，即通过置信度及置信区间来描述，根据置信区间的下边界看软件是否低于行业标准。1. 相关概念置信区间是指在一定概率下包含样本位置总体参数的这部分数值区间，通过计算置信区间来描述测试结果的概率。置信区间宽度和样本量之间是一个逆平方根的关系， 样本量越小，误差越大，未知样本数据可能所在的区间更大。置信度就是说，你测得的均值，和总体真实情况的差距小于这个给定的值的概率，应该是 1-α；换句话描述，即我们有1-α的信心认为，你测得的这个均值和总体的实际期望很接近了（测得的均值就是总体期望是很草率的，但是说，我有95%的把握认为我测得的均值，非常接近总体的期望了）。研究员可以选择0%-100%之间的任意数值的置信度，通常设为90%或95%（最常用）。临界值是在原假设下，检验统计量在分布图上的点，这些点定义一组要求否定原假设的值。2. 置信区间计算置信区间= （样本平均值-误差幅度）～（样本平均值+误差幅度）=（x -（x- μ））～（x +（x- μ））x = 样本平均值误差幅度=临界值*（样本标准差/样本量的平方根），即：（x – μ） = α* （s / sqrt（n））α=临界值（Excel函数=TINV（1-置信度，样本量-1））μ=被检验的基准值（行业标准）s=样本的标准差（Excel 函数=STDEVP（N1，N2，..））n=样本量tips：临界值可以通过所设置信度和样本量在 t 分布表中查找相应的值3. 可用性测试策划应用在做可用性测试前，需要进行很多准备，过程中也需要记录很多相关的信息，初步尝试的设计师可以参照以下步骤完成可用性测试的整个流程：Step1: 确定调研目标（目的、用户、时间、环境）Step2: 确定测试任务（任务内容、测试方案、SUS 问卷地址），任务内容可以通过抽取用户体验地图（User Journey Map）流程中的触点设计，保证流程的完整性和任务的关联性Step3: 引导测试用户完成可用性测试，过程中记录测试时间、用户遇到的问题、发生的频率等等，记录类型可以根据测试测中点进行记录Step4: 用户填写 SUS 问卷，回收问卷分数进行计算，得出 SUS 分数、可用性分数、易用性分数的均值作为本次测试的结论Step5: 作为补充，可以计算 SUS 样本分数的置信区间，预期未被测到的目标用户对产品的评分可能落在的区间，区间下限可横向对比，看是否低于行业标准。可以描述为“样本分数标准误差约=5.34，置信区间为 63.78～69.12；有 95%的把握认为测得的均值接近总体期望，未测样本分值将落在 63.78～69.12 之间，符合行业标准预期”。Step6: 通过测试过程中观察用户行为，探讨用户提出或下意识忽略的问题，并进行问题的记录和分类Step7: 用户访谈记录问题进行解析，对问题的严重程度进行评级，选出问题较多的部分并提供可能的解决办法进行优化Step8: 根据以上结论对测试进行总结性分析Reference数据：文中数据为样例，非真实数据，仅作为演示用途资料：《用户体验度量：量化用户体验的统计学方法》 — Jeff Sauro, Jame R Lewis图片：https://www.jianshu.com/p/d9346e4dd1b0https://www.pianshen.com/article/4953599654/密歇根大学官方课程：10分钟学会进行可用性测试！大家好，这里是 TCC 翻译情报局，我是李泽慧。阅读文章 > 欢迎关注公众号「酷家乐用户体验设计」本篇来源：优设网原文地址：https://www.uisdc.com/use-usability-testing
纹理 平铺 图片 今天向大家推荐一个非常实用的在线图片处理网站 —— 无缝纹理生成器。无缝纹理生成器是一个在线工具网站，开发者是 Thomas Deliot，Eric Heitz 和 Fabrice Neyret。在大家进行图片处理的时候，它能够将一张图片的纹理平铺延伸，操作起来快捷简便，高效产生图片，让我们可以创造更多精美的图片！本网站来自于 @Simon_阿文 的推荐。原微博链接：https://weibo.com/1757693565/L9RxGbpsy无缝纹理生成器的功能网站链接：unity-grenoble.github.io它的操作原理是对图片边缘进行处理，将现有的不可平铺纹理转换为可平铺纹理，从而改变图片的像素大小，将图片的自然纹理延伸平铺，使图片整体结构生动自然。1. 将图片的自然纹理延伸当我们有一张纹理细致好看的图片需要处理，但图片像素不够时，我们就可以使用该生成器，将图片纹理进行平铺。原图:将图片进行无缝纹理平铺后:效果是显著的，可以看到将纹理进行平铺延伸之后的图片，过渡生动自然，画面不会有违和感或者有明显的处理痕迹。2. 通过平铺使图片中单一的纹理变得丰富如果一张图片中的纹理过于单一，那么它所呈现出来的画面就会缺乏构图美感。通过将图片中的纹理进行平铺，对原图进行优化。原图:将图片进行无缝纹理平铺后:处理之后的图片更加美观厚实，中心与边缘融合自然，画面结构更加丰富。3. 对 3D 图片进行无缝纹理平铺对于 3D 纹理图片，也同样可以将其进行无缝纹理平铺，使图片的元素更加饱满。原图：将图片进行无缝纹理平铺后:原图:将图片进行无缝纹理平铺后:纹理衔接自然且顺畅。4. 将图片纹理平铺后，通过多种随机方案的替换对图片进行加工当我们使用该工具进行生成，对纹理平铺后的图片结果不太满意时，还可以选择多种随机方案对图片进行再次处理，从而达到我们想要的效果。例如，我们对一张普通的水面图片进行平铺：这是平铺后的效果：可以看到生成的图片，相比原图，水面的波澜更多，更有画面感和真实感。我们选择不同的方案对其进行处理：水面上纹理的不同，图片所展现出来的氛围便不一样，由此我们可以根据不同的需求选择合适的随机方案对图片进行处理。我们对一张森林图片进行平铺：平铺后：原图的主色调是黄绿色，进行纹理平铺后的图片同样是黄绿色的色调，但带给我们的视觉冲击更大，图片视野更宽广了，从一幅“森林图”变成一幅“密林图”，而后者相对前者画面结构更为复杂，纹理通畅而自然。我们将处理后的图片，进行随机方案的替换：可以看到，通过随机方案替换后的图片，画面整体色调为绿色，黄色色彩部分减少了，图片所呈现出来的效果也就不一样了。如何使用该生成器进行纹理平铺使用无缝纹理生成器对图片进行操作的方式比较简单，根据以下步骤进行，就能生成我们想要的图片。1. 选择我们所需要的图片，调整适合的混合边框宽度，这决定了对图片边缘无缝混合后，纹理平铺展开的效果：注意:如果选择的图片太大的话，可能会导致网站崩溃！2. 选择随机种子（Random Seed），我们知道，随机数是通过一些复杂的数学算法得到的，而随机种子就是这些随机数的初始值。一般计算机里面产生的随机数都是伪随机数（伪随机数就是指一直不变的数）。改变随机种子，点击“计算”选项进行图片输出：3.进行计算之后，点击“显示 2×2 切片预览”，就能看到图片的无缝纹理平铺效果，点击“显示原创”，便可以看到边缘混合纹理平铺延伸前的效果，将处理前后的图片进行对比：4.如果我们对纹理平铺后的图片结果不太满意，可点击“更改种子和计算“，通过多种随机方案对图片纹理进行处理，实现不同的平铺纹理图案，选择我们需要的：5.另外，当我们对图片进行纹理平铺延伸后，对图片像素不满意时，还可以重复以上步骤再进行一次纹理平铺，从而生成像素更复杂的纹理图片。可以看到，通过无缝纹理生成工具，一张普通的图片将能延伸出更多可能！对于自然纹理图片，通常像森林、苔藓、水面、岩石、沙土、肌理等等，包括一些 3D 纹理图片，进行纹理平铺之后都可以看到明显的效果！好了，以上就是对在线工具网站——无缝纹理生成器的相关介绍了，它的功能不仅实用，而且快捷方便，易上手。网站链接：unity-grenoble.github.io大家可以进入网站去体验和探索，有什么想法或感受欢迎在评论区讨论！酷站两连发！专注无缝纹理素材站+多边形背景生成器编者按：来两个超赞的背景素材网站！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/unity-grenoble
用户 产品 数据 一文读懂设计师应该懂的数据指标和数据分析模型。设计师为什么要懂数据？市场现状不容乐观，伴随着红利（人口、流量）消退，资本寒冬，产品同质化严重，市场对设计师提出了更高的要求。除了审美层面的设计执行还远远不够，设计师需要具备数据眼光，从体验侧和商业侧入手，以数据为目标导向，精益设计，实现增长。同时随着数据方法论的广泛传播，设计师有必要将科学的数据模型应用到实际工作中。常见数据指标1. 什么是数据指标不是所有的数据都叫指标，指标必须对业务有参考价值。数据指标是针对业务需求，使用收集手段，直接获得或者间接计算出来的一系列统计数据。数据指标贯穿整个设计流程，解释用户行为和业务变化，为设计提供依据，对结果加以验证。2. 常见的数据指标数据指标繁多，本文加以归类，便于理解。我们将常见的数据指标分为 3 大类：综合性指标：反映产品的整体情况流程性指标：反映用户的使用行为业务性指标：反映具体业务情况活跃用户：在特定的统计周期内，成功启动或操作过产品核心功能的用户（按照设备去重）。根据统>计周期不同，可以分为日活跃（DAU）、周活跃（WAU）、月活跃（MAU）。直接反映了产品的用户规模，是极为重要的指标。不同产品对应不同的使用频率，社交产品、资讯产品，如微信、今日头条等，其 KPI 考核指标一般都有日活跃用户数这项。但对于某些低频需求和临时性需求的 APP，如旅行、工具产品，则更加关注月活跃数。新增用户：安装应用后，首次成功启动产品的用户。按照统计周期不同分为日新增（DNU）、周新增（WNU）、月新增（MNU）。新增用户按照设备维度进行去重统计，如果该设备卸载了应用，一段时间后又重新安装了该应用，且设备未进行重置，再次打开应用，则不被计算为一个新增用户。新增用户数代表公司潜力，在公司起步阶段尤其重要。新增用户量指标主要是衡量营销推广渠道效果的最基础指标。留存率：用户在某段时间使用产品，过了一段时间后，仍旧继续使用，这样的用户被称为留存用户。留存率 = 仍旧使用的用户/ 当初的总用户量。用户来了之后，是否能留得住，反映了用户对产品的满意度。通常重点关注次日、3 日、7 日、30 日即可，并观察留存率的衰减程度。次日留存率：新增用户在第二天再次成功启动应用的比例。7 日（周）留存率：新增用户在第 7 天再次成功启动该应用的比例。这个时间段内，用户通常会经历一个完整的产品体验周期，如果这个阶段用户能够留下来继续使用产品，则很有可能成为产品的忠实用户；30 日（月）留存率>：新增用户在第 30 天再次成功启动该应用的比例。通常移动端产品的迭代周期为 2~4 周一个版本，所以月留存率能够反映出一个版本的用户留存情况。一个版本的更新，或多或少会影响部分用户的体验，所以通过对比月留存率能判断出每个版本的更新对用户的影响面积，从而定位到类似问题进行优化。根据 Facebook 公司提出的 4：2：1 理论，次日留存能达到 40%，7 日留存达 20%，30 日留存达 10%，就是相当不错的留存指标。在今天的互联网行业，留存是比新增和活跃更重要的指标，因为移动端人口红利没有了，获客成本越来越高，竞争也越来越激烈，如何留住用户比获得用户更重要。人均使用时长:在特定统计时间段内，浏览一个页面或使用整个产品时，用户所停留的总时间除以该页面或整个产品的访问人数。该数据是分析用户粘性的重要指标之一，也可以侧面反映出网站的用户体验。平均访问时长越短，说>明产品对用户的吸引力越差。例如，抖音的成功离不开强大的用户黏性，用户总会不知不觉就消耗了很多时间。这里的商业逻辑是，用户停留的时间越长，商业转化的可能性就越大。当然，对于即用即走的工具型产品不适用，相反，用户单页面停留时间长，很有可能是页面功能模糊，表意不清，用户花了很长时间去理解怎么用，证明信息传递效率低下。GMV (Gross Merchandise Volume)：总成交金额，指的是拍下订单金额， 包含已付款、未付款、取消订单、退货的部分，即一旦生成订单号，就算在 GMV 内。实际订单可能全部支付，所以 GMV 肯定大于实际销售额，因此经常看到报道都是用 GMV 来展示平台规模。人均客单价>（ARPU）：每个用户平均收入。ARPU=总收入 GMV/支付 UV。用户数可以是总平均在线用户数、付费用户数或是活跃用户数，不同产品标准可能存在差异。ARPU 可以再一步细分，当普通用户占比太多，往往会取付费用户数作为分母，来计算 ARPU。ARPU 的高低没有绝对的好坏之分，分析的时候需要有一定的标准。高客单价行业，如>一些奢侈品行业，就非常关心这个指标，付费用户数虽然不多，但是个体消费能力极强。PV（页面浏览量）：用户每一次对页>面访问均被记录 1 次，多次访问，访问量累计。理论上 PV 与来访者数量成正比，但是它不能精准指向页面的真实访问数，比如同一个 IP 地址通过不断的刷新页面，就可以制造出非常高的 PV。UV（独立访客人数）：访问网站的一个 IP 地址为一个访客。固定时段内，相同的客户端只被计算一次。使用独立用户数作为统>计量，可以更加精准地了解某时间段内，实际上有多少个访问者来到了相应的页面。转化率：在一个统计周期内，完成转化行为的次数占总点击/曝光次数的比率。转化率=(转化次数/点击量)100%。以用户登录行为举例，如果每 100 次访问中，有 10 个登录网站，那么此网站的登录转化率就为 10%，而最后有 2 个用户关注了商品，则关注转化率为 2%，有一个用户产生订单并付费，则支付转化率为 1%。转化率是产品盈利的重要指标之一，它直接反映了产品的盈利能力。不同行业的转化率，关注点也不同，比如电商产品就要关注销售转化，看看参与活动的用户当中有多少是在活动后产生支付的，有需要的还可以根据数据分析出人均购买次数和购买金额。再比如我们监测注册量，就要关注注册转化率，看看这个活动给产品带来了多少新增用户。所以转化率可以针对性分析产品在哪些方面做的不足，可以快速定位到问题点。解决方法看这里：设计转化率越来越低？教你用数据推理出体验问题！随着互联网人口&流量红利的退场，“精益数据分析”“数据驱动”已经成为当下主流趋势。阅读文章 > 流失率：曾经使用过产品，由于各种原因不再>使用产品的用户。可以理解为留存率的反面，流失率高即留存率低。次日、7 日、30 日的流失率也是需要关注的。对于流失用户的界定依照产品类型的不同而不同，对于使用频率高的产品，如社交类产品，用户应该每天都会多次打开，此类产品的用户未登录超过 1 个月，我们就可以认为用户可能已经流失了。极端案例，如婚庆类产品，用户的打开频率相当低，所以不是每个产品都有固定的流失期限，而是根据产品属性判断。设计师和产品经理需要找到流失的异常数据，定位流失用户的原因，并在下个版本中修复产品中存在的问题。甚至还可以定位到流失的具体用户 ID，通过当时用户注册的个人信息进行跟进。跳出率 BR (Bounce Bate)：用户来到落地页后，没有进>行操作就直接离开的比例。是评估落地页对用户是否有吸引力的关键指标。跳出率高，原因可能是产品/活动本身不够吸引，也可能是此类用户本身就不是产品的目标群体。退出率 ER（Exit Rate）：指该页面是会话中“最后一页”的浏览量占该网站浏览量的百分比。退出率=当页退出次数/会话总访问量*100%退出率反映了网站对用户的吸引力，如果退出百分比很高，说明用户仅浏览了少量的页面便离开了，因此需要改善网站的内容来吸引用户，解决用户的内容诉求。访问深度顾名思义，用户对产品的访问深度（产品流程的完成程度）功能使用率除了关注活跃用户，也应该关注产品上的重要功能。如收藏，点赞，评论等，这些功能关系产品的发展以及用户使用深度。功能使用率也是一个很宽泛的概念，譬如用户浏览了一篇文章，那么浏览中有多少用户评论了，有多少用户点赞了，便能用点赞率和评论率这两个指标表达。又譬如视频网站，核心的功能使用率就是视频播放量和视频播放时长。启动次数即统计时间段内，用户打开应用的次数。重点关注人均启动次数，结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过 30s，再返回或打开应用时，则统计为>两次启动，启动次数主要看待频数分布情况。使用时长统计时间段内，某个设备从启动应用到结束使用的总计时长。一般按照人均使用时长、次均使用时长、单次使用时长进行分析，衡量用户产品着陆的粘性，也是衡量活跃度，产品质量的参考依据。使用间隔用户上次使用应用的时间与再次使用时间的时间差。使用频数分布，观察应用对于用户的粘性，以及运营内容的深度。虽然是使用间隔，但是通过计算同一设备，先后两次启动的时间差，来完成使用间隔统计，充分考虑应用周期性和碎片化使用的特征。付费率愿意付费用户在所有用户中的占比。视频行业、电商行业等用户付费意愿较强，而一些工具>类的 APP 就比较尴尬，苦于找不到收费模式，或者现有的收费模式用户不买账，自然付费率就很低，如墨迹天气和万能钥匙等。复购率若把复购率说成营收届的留存率，你就会知道它有多重要了。和新增用户一样，获得一个新付费用户的成本已经高于维护熟客的成本。在不少分析场景中，会将首单用户单独拎出来作为一个标签，将两次消费以上的用户作为老客。用户第一次消费，可能是为了体验产品，可能因为是优惠推动促成了首次付费。而第二次付费难度会大大提高，第二次付费的成交率也会有断崖式下跌（相比于次日留存）。非首单付费意味着用户对产品产生真实认可和强大信任。退货率退货率是一个风险指标，越低的退货率一定越>好，它不仅直接反应财务水平的好坏，也关系用户体验和用户关系的维护。数据的获取方式数据主要有 3 种获取方式：二手资料数据：别人的调研结果问卷调研数据：收集用户“说的话”应用埋点数据：看到用户“做的事”1. 二手资料数据：目标资讯：行业数据、竞品数据。包括：商业交易数据、用户群的态度和意愿、用户舆论指数、竞品的用户规模和盈利状况等。市场数据，立项期对产品方向有一定指导意义、了解市场、差异化定位。获取手段：百度指数、企鹅智酷、艾瑞、尼尔森、各大科技资讯平台2. 问卷调研数据：收集用户“说的话”定义：向目标用户发放问卷并收集，进行数据整理和分析信息重点：用户自述的历史行为、主观态度或评价举例：>用户满意度查询、流失用户原因调查等本质：建立假设-使用抽样调查的统计方式-得到用户自述的答案常用指标：NPS（Net Promoter Score）推荐净值。以一个简单问题，衡量顾客对企业品牌/商品的忠诚度。“0-10 分，你会有多大意愿推荐我们的产品或服务给你的亲朋好友？”，0-6 分叫贬损者，7-8 分叫中立者，9-10 分叫推荐者，推荐者的比例减去你的诋毁者比例，就是一家企业的 NPS。从这个数值可以看出企业的客户当中推荐者和批评者哪一方比较多，分数为正表示愿意持续购买、加购或是做口碑的客户占多数，也就是所谓的忠诚客，那么企业会有正向成长，反之亦然。3. 应用埋点数据：看到用户“做的事”定义：在产品中植入代码，设定触发条件，当满足条件时，记录日志，获得用户行为数据。实际操作中，触发条件的设定至关重要，需要定义数据指标，跟开发提前沟通。分类：曝光埋点：>捕捉页面被展示的次数，可以针对整个页面，或者页面中的某个区域。如，常说的 PV、UV。操作埋点：用户对页面的某个区域进行手势操作时，打点记录。对应，也称之为某个操作的 PV、UV。时长埋点：标记以上两类埋点并计算时间差获得。如计算页面停留时长可以通过，离开页面的时间 t1-进入页面的时间 t2 获得。离开的定义：点击页面左上角返回或点击页面具体模块跳转到次级页面。基于以上 3 种原始数据，可以计算出：点击率、功能渗透率、人均点击次数、人均使用时长等具有对比价值的数据。相比二手资料和问卷调研，卖点数据更加贴合用户真实的表现，灵敏度高、可挖掘性强、客观衡量指标帮助迭代。数据分析方法1. 行为事件分析：研究某行为事件的发生对企业的影响以及影响程度。企业借此来追踪或记录的用户行为或业务过程，如用户注册、浏览产品详情页、成功投资、提现等，通过研究与事件发生关联的所有因素来挖掘用户行为事件背后的原因、交互影响等。根据实际工作情况而关注不同的事件指标。2. 漏斗分析：是一套流程分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较，能够直观地发现和说明问题所在，从而找到优化方向。价值：监控用户在各个层级的转化情况，全流程中最有效转化路径；同时找到可优化的短板，提升用户体验；多维度切分与呈现用户转化情况，成单瓶颈无处遁形；不同属性的用户群体漏斗比较，从差异角度窥视优化思路。注意点：步骤间的流失不可避免，步骤越多，流失越多。缩减步数，在漏斗>分析层面有利于减少流失率。但是根据复杂度守恒原则，每步的复杂度上升，会带来用户体验的下降。因此，路径的步数和页面复杂度之间需要找到一个平衡。用最终转化率（完成率）来衡量效果。3. 留存分析：是一种用来分析用户参与情况/活跃程度的分析模型，考察进行初始行为的用户中，有多少人会进行后续行为。这是用来衡量产品>对用户价值高低的重要方法。可以反映产品的整体留存或某个功能模块的留存。4. 对比分析：注意控制变量，如果一段时间内产品的日活突然大幅提升，原因可能有很多：改版、热点事件相关、运营推广等等，只有在其他条件都一致的情况下，才能衡量某一具体条件对结果产生的影响。数据分析模型HEART 模型：参与度，指的是被动形式的用户行为，包括用户活跃度和曝光 UV、PV 等。反应了对使用产品的意愿。接受度，侧重主动形式的用户行为，如对某功能的使用。留存度，一段时间内，连续活跃的用户，可以视为留存用户或忠实用户，这些用户是促成产品盈利的关键因素。任务完成度，核心功能环节的完成情况。愉悦度，用户在使用产品时的主观情感之和。常体现在用户评价中。更多关于这个模型的分析：产品体验度量设计指南（一）：谷歌HEART模型随着互联网流量红利的消失，互联网进入了以产业互联网为代表的下半场，各大企业的关注点聚焦到了如何获取企业及行业利润上来。阅读文章 > AARRR 模型：拉新，了解并定位目标用户人群，尽可能将其引流吸收至自家产品。落地页是设计关键点，需要明确传达产品的核心价值，短时间内吸引用户。激活，吸收新用户之后，需要在一段时间内引导用户再次使用产品。活跃度对应的两个关键指标是平均使用时长和平均每日启动次数。提高留存率，产品是否能真实地留住用户，反应了用户对产品的粘性。变现，通过一些手段从用户身上取得营收。传播，通过提升用户体验或者裂变奖励等手法，激励用户将产品分享给朋友。提升活跃与留存 4 种方式：1.有效触达，唤醒用户：指的是通过手机 PUSH、短信和微信公众号等能够触达到用户，唤醒沉睡用>户启动 APP 的方式，是提升留存的非常有效的方法之一。如游戏老用户短信召回，电商老用户召回，召回肯定是有成本的，所以要根据用户以往行为，进行分析定为，找到召回率最高的那部分用户，（如 RFM 模型定为核心用户）2. 搭建激励体系，留存用户：好的激励体系，可以让平台健康持续发展，让用户对平台产生粘性，对提升留存非常有效。>通常使用的激励方式有成长值会员体系、签到体系、积分任务体系。3.丰富内容，增加用户在线时长：这点游戏产品做的非常好，各种玩法活动本身就吸引用户投入时间成本，游戏又不断强化社交属性，更增加用户粘度与成本投入。4.数据反推，找到你的关键点：比如知乎，评论超过 3 次，用户就会留存下来，很难流失。比如有些游戏产品>，一旦玩家跨过某个等级就就很难流失。这些都是你需要通过数据分析才能找到的关键节点。用一篇文章，让你掌握能让用户快速增长的AARRR 模型AARRR模型因其掠夺式的增长方式也被称为海盗模型，是Dave McClure 2007提出的，核心就是AARRR漏斗模型，对应客户生命周期帮助大家更好地理解获客和维护客户的原理。阅读文章 > RARRA 模型：与 AARRR 模型侧重不同，RARRA 模型更加侧重产品本身，不着急获客，先把产品做好，营造好口碑，确保用户有好的使用体验，让用户自愿传播产品。部>分产品通过邀请码的形式，来打造圈层感。相比于侧重拉新的 AARRR 模式来说，RARRA 模式更加稳健保守，在运营侧投入较少。RARRA 模型强调用户运营，以精细化运营带动二次购买、交叉销售和拉新获客。小结数据的作用监控产品，发现问题：通过数据埋点监测，实时监测产品状况，为改版提供方向和参考。验证设计：通过定性、定量手段，衡量改版效果。发掘机会点，助力增长：发现新的商业机会和产品爆发点，着力用户、数据增长。成为一名解决产品问题的设计师随着行业发展，设计师需要具备的素养越来越高。单纯设计执行已经不能满足日常工作需要，越来越多的岗位需要设计师具备数据思维。设计师除了保证审美在线之外，更要理解设计的来源与验证，让设计更加理性。感谢阅读。本篇来源：优设网原文地址：https://www.uisdc.com/the-data-analysis
干货 场景 合集 大家好，2022 年第3波设计干货合集来了！这一波的设计干货算是比较有意思的，可以直接在 Figma 当中编辑生成 3D 场景插画的工具，潮流范十足的角色构建工具，让色彩系统更容易编辑和运用的神器，还有特别好玩的极简主义插画编辑工具，具体的，请往下看：1、在 Figma 当中直接生成3D场景https://drawkit.com/3d-builder使用这个名为 Drawkit 3D builder 的工具， 你可以在 Figma 当中快速匹配并构建 3D 场景。这个插件当中包含 6 个不同类型的元素，400 多个不同的场景图像，并且每个场景和元素都可以进行编辑，你可以通过这种多样的排列组合，来实现完全符合你的需求的独特的 3D 场景。2、功能超多的 mac 截图和修图工具Shottrhttps://shottr.cc/这是一个 macOS 上的截图工具，Shottr 可以说是一个进阶的截图工具，除了进行像素级的截图控制之外，它还能够将截图中特定的部分去掉，多种多样的标记方式，内置像素标尺，还能放大部分元素，可以说是非常全能了。值得一提的是，Shottr 还专门针对 M1芯片版本的 Mac 进行了优化，可以安心安装！3、潮流风 3D 场景角色构建工具https://homies.craftwork.design/这是 3D 角色场景插画构建工具，其中内置 78 个物品，10个独特角色，10个矢量背景和15个场景模板，你需要做的是从这些当中选取角色，修改场景，自由地组合成你想要的样子。这项插画场景构建工具是付费的，不过有免费版，免费版包含1个角色、5 个物品 和一个背景，但是你可以使用这些基础的元素构建出一整个故事场景！具体可以戳进去看看。4、风格独特制作精细的图标合集https://flat-icons.com/bundle/Flat Icons Lifetime Bundle 2.0 是一套包含接近3万个图标的大合集，这套图标合集是收费的——但是有免费版本供你下载。这项图标服务有意思的地方在于，它内置了 23 种不同的风格样式，非常精美，有专门的 Web 应用，也有 Figma 和 XD 插件，付费之后，还会享受后续的持续更新。5、超方便的 Figma 色彩模式编辑插件https://www.token-master.com/当你在 Figma 当中编辑色彩模式的时候，工作量可能会很大，而这个名为 Token Master 的插件可以帮你更快编辑设计系统中的 Design Token，快速创建色彩模式，一键生成深色模式，等等，让你的色彩编辑和管理更加轻松。6、极具视觉张力的弥散渐变生成器https://meshy.uxie.io/和之前推荐过的各种渐变生成工具不一样，这个弥散渐变工具生成的渐变效果是带有漂亮的弥散效果的，你可以选取其中包含的色彩，套用不同的渐变模板，最后可以导出 PNG 格式的高清图片。7、极简主义涂鸦图形编辑器https://minimator.app/这可是一个少见但是足够有趣的图形编辑器了，绝对够极简——你在 Minimator 当中只能绘制互相垂直的直线以及四分之一圆弧，你能使用这3种元素绘制出什么样的图形和插画？这个编辑器直接在浏览器中就能打开，最好使用平板来绘画，想必会非常好玩。8、免费化妆品和包的展示样机这是一套包含 6 个 PSD 文件和图片的样机，主要是用来展示化妆品和奢侈品包这类产品的设计的样机，这个样机素材是完全免费可商用的，具体可以在文章开头和结尾的百度云链接中获取。9、拥有漂亮衬线的优雅字体Austen Aesthetic Serif Font 是一款有着优雅衬线和笔触的英文字体，字体本身的笔触变化就非常的独特，而连笔的笔触则将这种优雅提升到了一个更高的程度。这款免费的字体仅供个人使用，可以在文章开头和结尾的百度云链接中获取。往期干货推荐：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 1月干货第三波100m8yxm 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-1-design-resources-vol3
用户 品牌 效果 随着媒体发展，品牌广告演变出众多创新十足、彰显品牌调性的创意。广告创意日益精进的同时用户体验阈值也不断提升，如何实现创意突破、触动用户心弦、实现用户体验与商业价值的双赢是品牌广告面临的挑战。百度品牌广告为寻求自我突破，塑造对用户有价值、对客户强权益的新型广告形态，从全局进行思考，打破现有样式的局限，进行创新形态重构。我们将结合卡间联动的创新实践分享品牌广告的创意探索。卡间联动是什么？超级品专是品牌广告的重要产品形态，通过品牌广告结合自然搜索结果，逐步帮助客户构建在百度搜索生态的品牌运营阵地，同时给用户带来更完整的品牌信息获取满足（下图左）。在实际运用中发现，超级品专在样式上希望进一步做突破：1）沉浸感：提升下方白色组卡品牌调性。2）触达率：提升下方组卡的触达及感知。基于以上分析，我们进行了系统性的样式创新，推出卡间联动创新形态，该形态的本质在于通过彩卡形态提升沉浸感，通过互动化的炫动浮层动效引导用户下滑浏览探索，从而提升品宣和数据效果，达到品效双赢的终极目标。卡间联动如何设计？1. 整体视觉升级，沉浸式彩卡，突显品牌调性界面背景上做了多种设计尝试，将白卡区升级为彩卡，提取头卡物料进行智能取色，使头卡和下方组卡更融合，强化整体性，提升沉浸感，将整体区域打造成“品牌运营阵地”。2. 首屏强动效吸引，提升视觉冲击力，增强品牌认知首屏以动效形式展现品牌主推信息，加强用户感知，使用户快速理解品牌亮点，获取品牌信息。此外，我们针对不同行业、不同营销目标，以差异化的动效形式作为品牌服务的延伸，增强视觉冲击力，突显产品亮点，强化品牌认知。3.下滑展现动画，强化品牌卖点，激发用户探索兴趣组卡区结合品牌信息，根据用户搜索品牌的诉求和目标，强化品牌的 2-3 个卖点，通过用户下滑操作触发一段动画，引导视觉动线持续向下，玩法上增加了惊喜感，激发了用户的探索兴趣，吸引用户关注到价值信息后形成点击转化。4. 控制展现时长与展现频次，减少对用户的干扰，注重用户体验前续通过动效传递品牌信息价值，同时我们还以不干扰用户操作为目标，控制动效展现时长及展现频率，让用户更专注并沉浸于内容本身，体验更加友好。品效双赢效果揭秘那么卡间联动设计创新是否真正实现品效双赢？实现商业价值与用户体验的共赢？我们通过线上数据分析和用户体验调研，来揭秘卡间联动效果。1. 数据分析显示：有效提升转化效果和停留时长首发客户来自汽车行业，通过该客户投放超级品专和卡间联动样式的实验对比，后者数据显著提升，点击率平均提升 11%，停留时长提升 20.2%。2. 定性调研显示：有效激发用户兴趣，增强品牌认知和记忆在调研方法的选择上，考虑到卡间联动的设计创新效果与用户视觉注视息息相关，因此，我们引入眼动追踪技术，通过记录用户的视觉注视过程，获取客观数据，同时结合问卷评分和深度访谈，从主客观全面了解用户的真实体验感受。在调研用户的选择上，为了找到最具代表性的目标用户，我们根据行业用户画像设定年龄和性别配比，同时结合百度 App 使用习惯进行筛选。评估维度的选择，重点参考了广告效果评估理论模型（AIDMA 模型），该模型阐述了用户对品牌从“注意”到“行为”转变的心理过程，基于该心理机制，结合品牌广告关注品牌吸引和印象增强的特点，从中提炼了注意兴趣、情感偏好、记忆效果三个维度来衡量品牌宣传效果。关于这个模型的详细介绍：想用设计提升转化率？先学会这个超好用的漏斗模型！漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。阅读文章 > 在实验设计上，我们对比了超级品专和卡间联动样式。调研结果如下：1. 注意兴趣：卡间联动吸引用户关注，引起用户兴趣，可提升品牌宣传效果卡间联动能有效提升用户注意兴趣，整卡的注视时长提升 37.5%。用户在浏览整页过程中，分配更多的时间在卡间联动样式区域，注视时间占比从 46.6%提升至 55.8%，增幅 19.7%，注意吸引提升效果明显。进一步细分数据发现，卡间联动首屏和下方组卡注视时长均有所提升，其中首屏动效最先吸引用户，提升效果更明显。2. 情感偏好：卡间联动用户主观偏好更高，增强用户对品牌的印象整体上，用户对卡间联动表现出更高的情感偏好，其中，卡间联动广告设计感和惊喜感提升效果最好，评分提升高于 50%。结合来自用户的主观反馈可以看到，卡间联动提升用户情感偏好的原因主要为动效生动形象，互动性强，能更好的突出品牌特征，传达品牌调性。3. 记忆效果：卡间联动视觉冲击力强，有互动感，用户印象更深刻，品牌记忆效果更好卡间联动通过动效突出品牌卖点，用户可回忆起更多的品牌细节，相较于超级品专，用户记忆印象更深刻。结语综上，卡间联动设计样式，在效果数据和品牌宣传上均有不错的表现，是品牌广告“品效双赢”的一次成功尝试。我们不仅考虑样式的精品化，更注重行业的通用性和规模化，目前卡间联动样式已覆盖了汽车、旅游、食品饮料、奢侈品等行业客户的通用诉求，满足新品宣发、卖点展示等多维度营销诉求。同时最大程度降低物料制作难度，赋能客户低成本实现创意表达，如汽车行业客户仅需提供汽车前视图、侧视图、顶视图三张图片，即可生成炫酷的动效效果，快速投放。在品牌广告自我突破和创新发展的道路上，我们也将继续探索、持续优化，始终不变的初心是，用设计创新的力量，提升用户体验，创造价值。这5个思路，能让你的线上广告更加吸引人现如今的设计师大都是多面手，虽然各有擅长，但是通常会涉足不同的设计领域。阅读文章 > 欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/linkage-between-card
张大湿
在路上
飞翔的企鹅
表哥
落霞与孤鹜
