定义：
1.同一页面内不同模块描述
文章来源：站酷 作者：体验为王UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
去年大家看到更多的设计和文章都在围绕“新拟物化”展开行动，随着各种硬件的提升，代码的优化，更多的风格和效果一一出现在我们的生活中，而今天呢，我们一起探索一下生活中最常见的，你可能没有注意到的设计风格——“玻璃拟物化”风格，英文“Glassmorphism”，这也可能会成为新的设计趋势。
在生活中的摄影，通过玻璃的层次感，给人以朦胧的美感，那什么是玻璃拟物化呢？
油管一管主Malewicz 小哥对于这种风格特征归结为4点：
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
通过玻璃透明，加周围颜色环境的烘托，页面的层次能更容易的呈现出来。
你在哪，从哪里来，玻璃拟物化就很明白的告诉你了。通过透明的玻璃材质，能告诉你所覆盖的层级。
苹果的合计将玻璃拟物化的风格运用的惟妙惟肖，无论是mac，iPhone还是iPad，设计风格都保持着相对一致的玻璃拟物化风格。
首先：我们打开sketch，建立一个画板，随便找张图片作为背景，画一个白色矩形
接下来：调整矩形的属性，再填充色中设置透明度为50%，边框可以吸取一个30%透明的白色，2px，再添加一个环境色的10%阴影，做出层次感，最后就是调整玻璃模糊的效果了，玻璃拟物的关键就在于sketch自带的背景模糊功能，我们常常以为这里只有一个高斯模糊，但却忽略隐藏在里面的其他模糊效果。设置背景模糊值为10%，不用太大，太大的话模糊效果就没有那么真实了，具体调整还是要看效果。我们看效果：
单层的效果不是很明显，我们复制两个调好的玻璃效果，调整他们的透明度，底部的透明度为70%、中间的为50%，最上层的为30%，看效果：
在界面设计中，就可以通过不同层级，调整对应的参数，达到更好的层级效果。
我们以这个照片的图标为例来拆解分析，通过运用刚才绘制的玻璃面的方法，与图标色块组合起来，在组合的时候，调整好层级，一个轻巧且富有玻璃质感的图标就绘制出来了，很简单、很容易上手对不对？一起来快来试试吧
透明：使用带有模糊磨砂质感背景的透明效果
悬浮：带有明显悬浮感的多个层级
鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
微妙：使用轻薄微妙的边框来强化物理质感
前人早已总结了让动画生动的技巧，早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则，该法则也是受用至今。法则虽是针对传统动画而制定，但对于我们日常需求中所接触的动效/动画需求也同样受用。
1）动画原则介绍
2）结合案例应用原则
3）流程方法论沉淀
4）结语
挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动，在运动过程中让皮球体积产生一定拉伸来表现它的速度感，皮球落地后则因力的作用产生挤压变形。
挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性，但对于物体挤压拉伸的体积尽可能保持视觉统一，避免较大的体积误差导致运动的突兀。
预期动作可告知观者物体运动即将发生，增强观者的场景代入感，使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。
预期动作可对观者视线进行引导，设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众，当用户预期与画面不符时也可增加动画舞台的趣味性。
每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧，传递贴合角色/元素气质的动态感知。
在现今动画工作流程中，考虑到流程效率及技巧利弊，我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式（类似AE）。在动画设计前进行基本运动的关键动作提炼，再进行细化，一层层的递进。底层的关键运动越完善，在后续添加细节时才不会耗费大量时间调整。而对于持续动作（逐帧动画）的技巧，我们可以利用它处理一些复杂效果例如（涉及到运动空间的变化、形状上的灵动变化等）。
逐帧动画。
优点：自由且流畅的动态。
缺点：难以把控时间长短、体积大小。
关键帧动画。
优点：清晰、可靠、规范。
缺点：修改成本略高。
跟随动作指的是元素运动结束后不会立刻停止，会因为质量、惯性等因素，元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生，主体与附属部分的运动会因质感、外力等因素产生不同的速率。
当一个人跳跃的时候，自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感，利用好跟随与重叠动作，可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候，跟随与重叠的物体运动幅度大，反之则运动幅度小。
真实世界的运动遵循着缓动运动的规律，而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容，可以看看过往的文章-《动效的质感》。
仔细观察可发现自然界中的运动多为弧形运动的组合，而匀速运动只存在于机械运动中。
在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时，通过弧度的变化映射人物的情感，是充满好奇心的还是沮丧的。
在交互动效中，弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。
当主体在运动时，设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时，捏紧拳头的敲（代表生气）与翘起兰花指敲的（代表精致）区别。
在上篇文章其实我们有提到影响动效质感的原因之一就是时间，控制好物体的运动时间也是表现良好动画节奏感的关键。
使用「时间偏差」的技巧，可以让你的动画更加生动。因为受力、质感等因素影响，主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时，首先是从嘴巴发力，再扩散至五官眉毛。
为保持动效的连续性以及营造自然流畅的交互体验，适当的使用时间偏差，可避免动效元素变化过程出现空档期，提升信息传递效率减少认知负荷。
通过夸张手法增添动画表现张力，加强运动元素的吸引力令动画更有代入感和戏剧性。
动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果，提升画面表现力。
一部好的动画作品一定会有令人吸引的人事物，比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外，如何讲好一个故事，通过趣味幽默的故事表达手法也可以增添动画的吸引力。
通过对十二大基本原则的学习，我将技巧分为以下两大类：设计技巧和表演技巧。
设计技巧：动画设计的技法，增添动画细节令动画表现更生动自然。
表演技巧：舞台表演的技巧，提升动画舞台全局的表现力。
接下来我们结合上述所提及的动画原则，根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时，我们需要思考哪些点？才能使我们的动效表现力更上一层楼。
假设在项目中我们需要对设计元素（猪猪存钱罐）添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性，采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。
将脚本确定后，我们在脑海里已经有大概的运动画面。但在进入动效设计前，还需要明确在动画中使用哪些动画原则来提升动画生动性。
在添加动画细节前，我分享下在项目中经常用到的两个技巧。
实现挤压与伸展的方式有很多种，最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素，利用xxx可实现图层的弯曲扭曲等变形效果。
质地坚硬的物体受外力的影响较小，质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作（抖动）。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。
当我们去除这些动画原则后，再去作对比明显的感知差异就出来了。
根据过往项目经验，我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定，层层递进。前期的目标和框架确定后，之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧，将自身动画的表现力提升一个档次。
随着动画/动效的落地方式愈来愈完善，像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单，如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧，帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外，近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中，下期文章我将分享关于角色动画的知识沉淀内容。
文章来源：站酷 作者：Fiasc1
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
图标风格汇总
图标设计流程
案例讲解
图标资源输出
线性
面型
线面
单色
双色
渐变
不透明度
一笔成形
断点
该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。
单色
双色
不透明度
晶白
磨砂玻璃
等轴侧（2.5d）
渐变
新拟态
轻质感
明暗质感
写实
抽象
卡通插画
像素风格
面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。
晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。
又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。
也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。
这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。
新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。
通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。
通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。
这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。
通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。
这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。
这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。
线面
描边插画
粗线
细线
圆角
直角
力量感、稳重、男性等感受
安全、亲和、年轻
由于图标风格繁多，所以以上列举并不包含所有图标风格。
明确语义
关键词详解发散
确定风格
提取造型
创意输出
图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。
在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说，目前在做一款网站搭建工具，后台常会需要设计组件及对应的图标，比如：滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标，在一定程度上会比较难精准传达文案。
这一步有点类似情绪版使用，但不同的是：我们需要将确定的词（A)进行详细解释，再将解释文案中关键的词语进行发散，得出一系列相关联的词（A1、A2、A3…）。有时间还可以根据这些词找到对应的图片，再看在这些相关联的图片中，有哪些细节可以传递最开始我们确定的那个词（A）的意思。
我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。
前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面，其中还有很多细分，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。
经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。
图标设计规范
图标设计注意点
常见图标尺寸
图标盒子使用
在界面图标设计中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
图标盒子即图标约束网格，来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。
简洁美观
易于识别
细节统一
像素对齐
视觉大小一致
饱满透气
融入品牌基因
图标是否美观，会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中，通常会尽量减少不必要的细节，降低图标复杂度，来帮助用户快速识别。当然图标也有丰富细节的做法，常见在一些重要运营入口上。
识别度的问题，在最前面明确语义中就有提到过，这里就不赘述。
在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。
在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。
由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。
图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。
以如下途牛_我的页面_功能区图标为例：
图中标红图标就存在饱满度不足，及内部较拥挤的情况，第一感受是看起来不舒适，品质感比较低。除此外，还存在如下问题：
图标大小很明显不一致
设计语言不统一，有圆角有直角
图标风格不一致，有透明度+分割形式（我的保单）、有纯透明度形式（专属顾问、我的收藏）、还有其余单色实心形式
在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：
颜色
设计语言
以我之前的豆果美食项目为例，提取到如下细节：
根据提取到的基因，最终得到如下两套风格不同，但语言相同且都具备品牌感的图标。
Logo轮廓：在图标中融入品牌logo外轮廓（Google Play），或根据logo轮廓结合应用特性进行延展（Microsoft）。
根据文案进行详细翻译，帮助我们充分理解文案。
释义：有专门的知识或经验，受聘为机关团体或单独个人提供专门咨询的人。
提取释义中关键信息，生成关键词：专业、专人，再根据关键形容词发散一系列具象名词。
根据产品调性和模块视觉层级以及考虑延展性，初步确定如下风格组合起来是比较适合：
在实际查看中，发现Tab的风格为单色+不透明度+断点风格。
为了和Tab拉开差异，最终确定以如下风格进行组合表现比较符合产品调性：
线性：双色
面性：单色、双色、不透明度、轻质感、明暗质感
线面：线面
通过手绘或大脑想象进行造型构思，这里我就不展示手绘过程（行吧，我承认就是画的太丑了不敢放）。
由于不同风格对图标造型构思有所影响，且图标类型很多，不同特点组合起来样式更多。案例精力有限，所以只以线性双色风格做演示，希望大家灵活使用。
这一步就是将手绘图形矢量化，在矢量化创意过程中，我们可能会对手绘的图形进一步简化细节或新增造型，这都很正常。只需注意在整个绘制过程中遵循图标设计规范，以及注意图标设计注意事项即可。
图标盒子使用
创意输出
Tips：
1or2？
最后对专属客服进行多风格尝试，最终效果如下：
附上部分绘制过程中的淘汰稿：
SVG：缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态，减少重复上传。
PNG：支持透明格式
JPG：兼容性强，适合大尺寸高饱和度图像
GIF：动态图标使用，缺点是透明情况下边缘容易出现锯齿。
这里主要介绍静态图标中，svg格式在工作中如何输出给前端同学使用（借助iconfont）。
1、图标资源优化
在iconfont官方绘制指南中有描述，在导出前需要按如下规则优化图标资源：
2、选中图标导出svg格式
以Figma为例，优化图标资源后，选中图标将输出格式选择为导出svg。
3、上传iconfont
在资源管理下，选择需要上传的位置。
去除颜色并提交：适合单色图标，去除颜色提交可以方便前端使用代码修改参数，减少不同状态图标重复上传。
保存颜色并提交：适合多色图标（注意：在单色情况下，选择保留颜色提交，前端则无法通过代码修改图标颜色）。
最后当我们把图标都上传好后，就可以将前端同学拉入团队项目中开心进行玩耍。
文章来源：站酷 作者：幺零三
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们今天主要来讲4个主题：
1.颜色使用的误区-红色的警示含义
2.功能即按钮？-两者的区别与设计思路
3.设计中的样式-情理之中，意料之外
4.产品体验案例收集-宁缺毋滥
5.减少步骤就能提高转化？-少即是多，多即是少
所以，这篇文章还挺有意思的，大伙读读看
最近有多个小伙伴来问问题，老师， 我的产品色是红色，那我用红色的按钮会不会给人传达很强烈的警告？还有我们的产品色是冷色，如果不用暖色按钮会不会没有强烈的引导感，我好纠结啊！
大家瞅瞅，他像一个好人还是坏人？
呐，颜色情绪表达不在于本身，而是其使用场景。大家都知道颜色都有其两面性，比如这样，同样是黑色系，但是左边看上去是潮流、硬朗的感觉而右边则有一些忧郁、沉重的感觉。
所以颜色怎么使用要看用在什么场景，特别是主色的使用，如果本身是红色或者暖色的主色，那么可以在以下地方使用：
1.希望引起用户强烈注意的地方（正向/警示）
2.核心转化按钮（几个不同层级）
3.正在激活的板块（标签、分段）
但是暖色为主色的产品核心转化按钮一定不会是冷色调
所以不用在意主色是红色而带来的正负向情绪，因为到了不同场景它的含义自然会变化，如果本身主色为冷色调，那么主色和辅助暖色都可以用在核心转化的按钮上或者用其主色，我见过冷色为主色但是核心转化按钮是辅助色的情况，我总结了一下，大家可以看以下两个产品的截图，如果本身产品的辅助色使用场景和频率很多，那么在核心转化和重要按钮上我们要使用品牌主色，但是如果在工具类型的产品中，辅助色的场景和出现频率很少，那么核心按钮和一些关键引导信息可以用辅助色。
如果让你在原有的界面中设计某个功能，你会如何设计？可能我们第一反应就是先给他设计一个按钮。
按钮很好理解，我们先看看功能在释义上怎么说：事物或方法所发挥的有力作用，
阿哟，这一听，简直太抽象了！这就好比让媒婆描述你的相亲对象长的怎么样：小伙子看起来挺老实的，抽象但又很清晰！大家看下面两个例子：
第一个-刷新，无论是图标还是文字，我们的预期是点击之后就会实现在当前状态/页面的数据重新获取
第二个-支付。支付也是一个功能，相比较刷新而言是一个复杂的系统的功能，但是它无法通过一个按钮来实现功能的全部作用。
很多同学在做信息架构的时候就很懵逼，那我要梳理的是按钮呢还是这样的功能呢？我好乱啊。当然，信息架构肯定不是功能的树状图堆砌那么简单啦，那个顶多叫做功能分类，信息架构需要包含更多的业务逻辑和状态逻辑。
所以在这里就有三个结论：
有简单有复杂，但他们都需要通过外部的、具象的元素来实现其作用。
还有滑动、长按、甚至神经控制等等，如果大家玩过赛博朋克2077这个游戏就知道，义体的控制很多来自于大脑和神经，那么这些功能肯定不需要点击这样的操作行为啦，所以也不存在按钮。
我们在做设计的同时要思考，一个功能可以以什么样的形式存在，要满足高效、简约、符合心智模型等约束条件，比如做一个翻页，没有人会在app界面中设计一个下一页的按钮，抖音切换视频也不会出现一个按钮用来切换到下一个视频，再比如公众号文章收起需要通过滑动到指定位置，而非设置一个按钮。
以后再让你设计一个功能就不要直接做出一个按钮喔
想把设计做的出彩一定要满足两个条件：1.符合常规认知 2.超出常规认知
听起来有点玄乎啊，第一眼看心知肚明，第二眼看我x，这个牛逼啊。
那其实我们在做UI设计的同时也可以多些创意和想法，不要被惯性思维和熟悉的手法所困扰。有时候你想做一些创意设计但总是被“不统一”这样的理由所驳回，麻烦把这篇文章转发给驳回你的人，很多有意思的设计都被淹没在这些“风险”提示里了。
比如网易云音乐这里的tab，大家都知道tab的样式和其交互方式，还有和segment的区别，那么如果既不想用segment样式又不想让用户进行所有滑动怎么办？
没错，他们在这个地方用了竖线隔开了，重新感受一下，是不是可滑动的感觉变弱了呢？
还有卡片设计中如何添加标签可以更顺滑，如何让一个按钮自然的融合到另一个模块里。
排版是否可以用异形设计，例如个人中心
我看到很多同学正在体验各种各样的产品，然后把一些不错的案例摘录下来进行分析，我觉得这是一件很好的事，我在2年前就鼓励大家这么做，因为这个也是作为一个UI设计师的基本功，除了视觉创意的积累以外也要有交互案例的积累。
但是我发现很多同学有点南辕北辙了，我们需要收录的是一些优秀的案例，何谓优秀呢，指的就是令人惊喜的功能，而非本该具有的或者无差别的功能（可以了解一下kano模型，这里不细说）。另外就是需要有分析的能力，不是什么案例都是优秀的，有些可能存在着不好的体验。俞军在其产品方法论中提到：用户价值=新体验-旧体验-切换成本，所以价值大不大取决于新体验是不是足够好。
现在看到的就是可能这个产品把字加粗了，也能写出一大堆分析这个加粗的好处，或者一个卡片设计就能写出非常有亲和力，信息更聚焦这样空洞的词汇，这对于我们积累案例没有任何的帮助。
例如以下的案例，在编辑状态返回系统会提示，从而滑出Actionsheet。如果不做用户体验会很差，但是做了，用户并没有很惊喜，这就是一个必备的功能而已，所以对于一个案例到底是否优秀我们需要尽量客观的看待。
所以很多交互案例并不是不好，而是还没有达到能够被我们收藏的地步，如果没有撩到你的心，那我觉得咱们就矜持一些。
那什么是一个比较好的交互案例呢？好的交互案例一定是更近一步解决问题和深入场景的，比如我们在场景分析过程中对于预判这个概念的理解，例如行动按钮前置、替换、引导等等，例如像电影app在近电影放映前弹出取票码一样，这个功能如果不做，用户体验不会很差，因为依然可以找到这个二维码，只是用户想不到居然还可以这样做，但是一旦研发出来，用户会觉得非常惊喜，这种就是优秀的体验设计。
再比如有些你可能觉得体验好的案例其实还没分析到位，就像高德地图在到达目的地时会给你很多场景的补全和选择，你肯定认为这很人性化啊，但是我在有一次使用“原路返回”功能的时候犹豫了。高德确实在帮助用户解决问题，但是在这里显然细节有待商榷。
很多用过这个功能的同学会发现“原路返回”的文案是有歧义的，功能是好功能，正不正紧就看文案了。来，我们解析一下场景：用户a通过高德地图导航到地点x，路上非常拥堵，好不容易到达目的地后需要返回起始地，这时高德提供了一个“原路返回”的按钮，他要不要点？
为什么说这里有歧义呢？
1.如果用户开始的行驶过程很拥堵，你告诉他原路返回，他的潜意识会觉得原路返回是不是也很拥堵。
2.原路返回到底是不是最佳路线，因为有时候来回路线的最优解并不是同一条马路的左右两侧。
所以，人是好人，正不正紧俺们也不知道。总之，这个文案让我不得不重新导航。
小结一下，优秀与否需要亲自深入的体验，并且结合上下文、用户、业务多角度的考虑，并非自己没见过的就是优秀的设计，咱们宁缺毋滥，提高自己的标准。
很多人一听到转化率就会把它和操作步骤关联起来，只要能减少用户的操作步骤和缩短任务路径就可以提升转化率。这个想法不能说全错，但也不能直接运用减法去当作提高转化的手段。
不用管这人是谁，大家可以理解为能量守恒定律，也就是说在所有内容（功能、信息、元素）不变的情况下，步骤越少，单个步骤所承载的内容也就越多。比如你有100个球，给你5个盒子，平均每个盒子放20个球，但是如果拿走一个盒子，平均每个盒子就要放25个。
表面上盒子少了，但是每个盒子多出了5个球，这就意味着原来简洁的界面包含了更多的信息内容需要用户去理解、操作、判断。那我们可以说减少步骤就是提高转化率吗？显然不行。
比如我们看到马蜂窝和12306在购买车票流程中的表现：
马蜂窝
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情
5.选择座位类型、添加乘客信息、选择座位
6.确认订单
7.支付
12306
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情、选择座位类型、添加乘客信息、选择座位
5.确认订单
6.支付
大家可以看到马蜂窝比12306多了一个界面，他们把查看车次详情单独用一个界面设计了，而12306则是座位类型、详情、乘客信息、座位选择都放在了一个界面，表面上看好像步骤确实少了，但我们能看到像第三方的购票软件还有其他购票的选项，例如极速订座、车票+酒店等，所以在这个场景中需要展开展示给用户，那么如果把这些都放在12306的确认订单界面就会非常拥挤，而且选中状态也很不直观。所以最好的解决方法就是拆成两步。
再来看个例子，在某个产品的1级界面中，有一个添加训练计划的功能。左边是在1级界面中露出直接添加的按钮，并且添加成功后在1级界面直接展示。右侧则是进入二级界面进行添加。在步骤上来说显然左侧案例的步骤更短，那我们可以说左侧的用户体验、任务效率就更高吗？
对吗？大家可以思考一下。
显然不能直接说正确与否，因为我们缺少评判的标准和案例的背景对吧。首先左侧案例在添加任务流程中确实占优，但是对于需要频繁增删改查的用户而言就很不方便了，而且一直添加就会使首页下方内容推到很底部大大降低了曝光。而右侧的案例则更适合用户进行批量操作。
所以路径的长短并不能直接表示转化率的高低，那么有哪些情况可以缩短路径达到提高任务完成效率的目标呢？
1.减少步骤后不影响用户对界面和内容的理解
2.减少步骤后内容信息依然符合场景，不冲突
3.需要实时检查任务结果
4.有足够的版面可以进行内容合并
5.合并后对任务目标不会造成歧义
比如下面这个案例，一个书籍分类搜索原本的2个步骤是可以合并的，因为在原来的版本中，用户如果想切换更高级别的分类需要退出再选择，而一个界面其实就可以实现3级联动的效果，当然仅限于这个案例，根据业务不同我们需要对这些多层级、多类目的分类做更多的考量。
再来看一个案例，下面是一个预定篮球场地的流程，在这个流程中有几个关键的节点：场地类型、日期和时间，因为篮球场地和老板需求的特殊性，所以我们不横向去比较，我们可以来看看下面这个小程序的流程，预定步骤一共5步
1.时间和场地的选择
2.查看场地详情和说明
3.选择具体时间
4.确认订单详情
5.支付
我们先不讨论里面信息字段是否合理（最后确认订单还要填写性别和名字是什么鬼，打个球还要查家底吗），我们先来看这5个步骤是否可以简化。
一定是可以的，首先，日期和时间是属于同一纬度同一场景的信息，我在几月几号几点预约一个场地，这和看电影就完全不同了，每个电影院排期不同所以不能先把日期和时间都选了，但这里是可以一起选择完成的。那么第三个步骤完全没有必要，直接和第一个界面结合即可。
另外，不要被先入为主的样式给蒙蔽了，场地一定要做成列表吗？除非特殊场地，每一个半场其实都是一样的，可能在光线和设施上有些区别，但是对于经常打球和第一次预约的用户来说其实没有实质的区别，所以这里可以用宫格形式替代。
然后查看详情和说明个人觉得也比较多余，经常预约打球的用户已经非常熟悉场地了，对于新用户来说也只是看一下场地的环境，所以这个页面本身内容就不多，所以可以直接和确认订单详情结合，将确认订单页的内容做减法。这样是不是整个流程减少了两步，大大的提升了任务完成的效率呢？
每个人都有自己的惯性思维和刻板印象，有时候能帮助我们更高效的完成任务，但有时候这些潜意识的反应也会让我们深陷泥潭而不自知。只有当我们深入剖析一个问题时，才能发现其本质，适当让自己保持批判性思维是有帮助的。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近在社群里有人问，有什么总结和复盘的经验吗？感觉自己表达能力很差啊。今天，彩云就跟大家分享一些我的经验，希望能帮到有类似问题的朋友。
以上类似的问题，相信不少朋友都遇到过：
1）明明自己做的设计不差，但不懂得怎么去跟其他人推进自己的方案
2）明明自己已经很努力，设计能力也不差，但总是被其他能说的同事占了主导
3）项目做完了，不知道怎么复盘和包装，跟面试官介绍项目的时候感觉讲不出亮点
复盘表达能力在职场中的作用不用多说，大家都懂，那如何提升呢？我给你支几招，绝对好用：
1）善于记录，把想法转化成文字
2）做事多想想附加价值
3）多跟别人分享，输出倒逼输入
4）学会模仿，掌握说话的节奏
5）复盘的具体操作
复盘和表达其实是2个能力维度的事，一个是文字总结提炼能力，一个是语言组织表达能力。所以，我在平时会有针对性的去做下面这些练习，分享给大家。
脑子中的想法和口中说的话，往往是比较零碎不系统的，而文字则让你有更多时间思考和梳理。不管是从逻辑性还是简练程度上，文案能力都会更加能锻炼一个人的总结能力。
可能从一开始让你写大段的文章对很多人来说，是很困难的一件事，但你可以从小事开始。比如每天写总结，记录自己的想法，这些想法可以来自于学到的知识、突然的灵感或者对某件事的看法等等。
关于记录，我一般先快速写下当时的想法，几个关键字，句子不通顺都没关系。但一定不能拖延，要不然过了那个时刻，你可能就觉得好像没啥值得记录的或者干脆就忘记了。等写的差不多了，再回头来调整语句，调整逻辑问题，就跟设计做改稿一样，当时记录的是初稿，然后再不断优化就好了。切忌完美主义者，动手记录更加重要。
我自己是从毕业以来一直保持着记录的习惯，而且随着写的量越来越多，写的速度也是越来越快。比如这段文字，就是在班车上20多分钟内写下来的。
高质量的记录内容来自哪里？除了完成需求外，多想想这件事做完之后，还能给自己带来什么其他的价值没有？比如产品让你做一个设计需求，做完它并过稿是最基本的要求，因为这部分是交换工资的价值。那还需要去思考，如何通过这个需求去放大价值。比如，这个需求能不能成为自己作品集中的一个作品？能不能把这个需求总结成一篇文章？能不能把这个需求做出亮点然后成为自己出去分享的案例等等。
如果答案是肯定的，有时间的话，一定要去达成后面的这些增值的部分。如果是有这些目标的话，你可能就会很自然的去记录过程中遇到的问题，思考需求的前因后果，记录最终的数据等等，因为你可能将来某一天要出去跟别人讲的嘛。
通过这样的动作，就能加深对需求本身的理解，也就是所谓的深入。有了这些记录和思考，让你再去写一篇总结也就是水到渠成的事了。
把自己的想法讲出来给别人，其实是一个非常考验人的事。不知道大家有没有这样的感觉，明明这个项目是自己从头到尾跟进的，但让你完整的跟别人讲出来却发现很有难度。
要跟别人讲明白一个道理，就必须自己真正理解透彻才可以。这就会倒逼你，真正梳理好自己的所学。而当你真正跟别人讲过一次之后，关于这个知识点或者项目的细节，你会印象深刻。
我习惯在学到一个新的知识点后，兴奋的找同事朋友们去分享我的收获，一方面是能加深自己对知识的理解，进一步巩固所学，另一方面也想锻炼自己的表达能力。
演讲也是需要练习的，没有谁天生就擅长，讲的多了，应变能力、总结能力都能提上来。
表达能力怎样提升？模仿是一个很好的方法。我自己经常会去看一些大佬的演讲，像俞敏洪的演讲我是非常喜欢的。然后还有TED的演讲，佩服他们能在短短5-10分钟内，把一个内容很好的讲完，并且听众还容易理解。
学习大佬们在什么情况下会停顿，如何与观众进行互动，甚至包括演讲时的姿态，表情，手势都可以模仿和研究。听的时候，带着目的去观察，相信能学到很多平时不注意的细节。
注意说话时的停顿和语速，可以理解为设计中的留白和行距。好的留白间距，能使得读者获得更好的阅读体验，演讲也是如此。但说的容易，做起来难，如果缺少练习，在实际的汇报、述职或公开演讲中由于紧张或者其他状况，很难让你从容应对。
这部分也是需要对应的学习和练习的。
针对实际项目，一般可以从以下6个方面来进行复盘：
1）定位目标
从前面说的记录中，或者可以咨询产品、运营，某个具体的需求目标是什么，从产品维度，运营维度，设计维度等多角度进行目标回顾。
2）应对过程
简单说，就是自己遇到这个需求后是怎么去解决这个问题的。仔细思考自己的应对过程，并分析过程中有没有可以改进的点。
3）评估结果
最终的结果，有没有达到预期？是好的还是不好的，把一些数据和用户评价拉出来，作为结果。
4）分析原因
不论结果如何，都应该分析其成功或者失败的原因，从过程中的每一个环节去思考，这些经验都是最宝贵的。
5）发现规律
从原因中找到规律，这个规律也就是所谓的方法论，这些方法论是否具有普适性，也就是你得到的这套经验能不能复用到其他项目中，或者没有做过此类项目的设计师拿到你的方法论，能不能很好的复用你的经验把项目做到你这样的结果或者是能做的更好。
6）沉淀文档
最终，把这些方法论、设计规范、经验教训等等，以文档的形式记录下来，就完成了一个真正的完整项目沉淀。这些也是设计师做需求时的一种价值放大，很多优秀的资深设计师都擅长做这件事。
在面试或演讲时，也应该按照这样的逻辑顺序去讲你的项目，心里有谱，讲话才靠谱。
复盘和演讲，在职场中都是非常重要的能力，但那些能说会道的人，PPT写的很厉害的人，也并非天生就如此。他们也都是后天在工作中不断的练习得到提升的。
像解决所有困难的事情一样，学会拆解，总结能力也是如此。
文章来源：站酷 作者：彩云Sky
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验设计是一个动态领域，每年都会为我们带来新的趋势，最近十二个月也不例外。全球新冠病毒大流行和国家封锁使我们与数字世界和现实世界之间的互动方式发生了突然的变化。人们不仅开始在网上花费更多的时间；他们的思考方式和表现方式也发生了不同。
本文主要阐述2021用户体验的趋势，我们相信这将在新的一年里占据主导地位。查看一下您可以利用哪些趋势超越竞争对手并在人群中脱颖而出吧。
我们在2020年UX状态预测中讨论了语音用户界面（VUI）。如今年所示，语音指令仍然是UX设计中最热门的趋势之一。可以肯定地说，明年不应忽略它。
毫无疑问，到2021年，语音聊天机器人和虚拟助手将继续流行。用户在数字体验方面一直在寻求简单性和效率。市场需求，高期望值以及人工智能技术的迅速发展使品牌别无选择，只能在其产品中包含基于语音的功能。
已经有许多企业为广泛的VUI实施奠定了基础。例如，星巴克推出了一种名为My Starbucks Barista的基于AI的聊天机器人。其目标是通过允许用户通过语音命令购买自己喜欢的饮料来改善咖啡订购体验。
极简主义可能是当今视觉设计中最明显的趋势之一。用户正在体验越来越多的网站所有者想要传递的关键消息。Cookie弹出窗口，打折广告和各种通知旨在吸引和转化网站访问者，但它们也吸引了我们的注意力。这就是简约的以用户为中心的设计应运而生的地方。
但是，“极简主义”并不意味着“沉闷”或“原始”。意思是“优雅”和“高效”。尽管必须使用数量有限的颜色，设计元素和明亮的组合，但UX设计人员仍然有很大的发挥空间。此外，元素的功能最为重要，正确突出产品功能并传达正确信息的能力需要大量的创造力。相反，仅具有装饰目的的组件正逐渐失去其重要性。
内容，消息和导航的清晰度是UX设计的简约方法的另一个重要方面。信息过载对于大多数现代用户来说是一个痛苦，这意味着网站所有者应努力使自己的UX文字简洁明了。
负空间是用户体验设计的一种大趋势，它已经脱离了对简约UI的市场需求。简而言之，负空间是页面布局中对象周围（宏空间）或对象内部（微空间）的空白区域。它已经成为独立的设计元素，在视觉美学和用户体验优化中起着至关重要的作用。谷歌的主页，苹果的官方商店以及一些用Webflow创建的网站就是很好的例子。
留出一定的空间，在设计中添加“寂静的感觉”，必须是始终有意义的。否则，用户可以将其视为缺少信息。负空间的主要功能是整理网页，以吸引用户对关键对象和消息的注意。建立清晰的内容层次结构有助于UX设计人员将用户的注意力吸引到最重要的内容上。
负空间有时也称为“空白区域”或“留白区域”。所有这些术语都是可以互换的。当区域中没有元素时，您还可以在深色模式或任何其他颜色下使用此用户体验趋势。
在发生COVID-19大流行之后的在线体验将与我们习惯的在线体验不同。UX设计以相关方式反映了缺陷。为了使品牌的数字化形象更具关联性，设计师有意在版面设计中实现了一些“缺陷”。 它可以是任何东西，从手绘对象到构图或页面的不寻常元素。
通常，不完美的设计可以很好地证明品牌的身份并突出其独特性。但是，如果要应用这种UX趋势，则必须记住一个关键规则：必须保持平衡。如果你做得过多，那是行不通的。
中性风格是UI设计中其他两种大规模方法（拟态和平面设计）的组合，它们通常被认为彼此相对。拟态化是关于模仿现实世界中的物体以及我们与物体交互的方式。
几十年前，当需要使用超现实元素来创建直观且用户友好的UI时，它很流行。垃圾桶就是例子之一。另一方面，平面设计是一个更新的，简化的概念，围绕二维元素，极简主义和鲜艳的色彩。
同质性兼顾了两者的优点。它使用图形强度大的元素，阴影和渐变来使按钮和卡片类似于自然界中的对象，而不是精确地重新创建它们。中性风格不会将现实主义推到极致。取而代之的是，它努力实现浅色和微妙对比度的“柔和”外观。
在过去大约一年的时间里，同质化一直是UI / UX专业人员中讨论最多的主题之一。尽管仍然没有很多真正的数字产品的用户界面遵循这种方法，但许多设计人员对该概念感到兴奋。像Behance和Dribbble这样的专业平台已经包含了许多同态的例子。因此，我们有充分的理由相信，这一趋势最终将在2021年出现在我们的手机和笔记本电脑中。
视差效果和3D元素并不是UX设计中的全新内容。我们已经看到了如何在许多Web设计解决方案中实现它们。但是，我们仍然观察到这些用户体验趋势正在逐步普及。
首先，它的使用量显着增加。如今，3D元素和视差效果已不再是网络上奇特的事物。它们更为常见，特别是在代表着脱颖而出的时尚和电子商务品牌的网站和应用上。
另一种趋势是尝试在一个界面中结合视差效果和3D图形。使用视差滚动时，网页背景和前景元素以不同的速度移动。仅凭它就能产生深度感。通过为此添加3D对象，您可以创建一种真正的身临其境的体验，并将在用户的记忆中保留很长时间。
随着我们设备屏幕的变宽，UI / UX设计中出现了不对称趋势。通常，不对称是野兽派的一种属性，这是艺术和网页设计中与极简主义相反的一种风格。但是，如果与其他残酷的设计元素分开使用，它可以使您的网站看起来有趣，同时使它保持微妙和优雅。
不对称布局的UI / UX趋势通常与其他创造性的Web设计技术一起实现，例如破碎的网格，重叠的元素和分割的屏幕。您也可以将不对称性应用于排版。如果操作正确，它将使您的品牌信息更加引人注目和令人难忘。
但是，请务必记住，非对称设计并不意味着“随机放置的UI元素”。在布局上定位对象的不寻常方式应该引导用户的眼睛朝正确的方向前进，并帮助品牌强调重要信息。
今天，当我们在互联网上进入随机网站时，很可能会看到GIF，微型动画，动画插图或其他一些运动设计元素。动画在用户体验设计中仍然很流行，并且使用频率不断增长。
除了具有视觉吸引力之外，移动物体还可以改善用户参与度并简化导航。他们还可以为数字产品或服务注入生命，使它们更具个性。
如果要在用户界面设计中使用这种软件开发趋势，那么明智地执行此操作至关重要。漂浮在屏幕上没有特定目的的对象可能会使访问者感到困惑，从而促使他们甚至比计划的要早离开网页。动画元素也不应使用户界面不必要地复杂。它们始终必须是相关的，有价值的和平稳的。
信息体系结构是在页面上组织和构造不同内容的方式。它是以用户为中心的设计（UCD）的基本要素，旨在使用户的数字环境更加舒适。与用户研究和可用性测试一起，构建有效，有用且一致的信息体系结构是UCD流程的必不可少的阶段。
为了创建一个实用的信息体系结构，UX设计人员需要对产品的目标受众，其行为以及使用数字解决方案的原因有深入的了解。用户应该无需花费太多精力就能获得所需的结果。因此，在设计过程的线框阶段始终必须考虑用户的目标，清晰的导航和内容表示（包括盲点监视）。
我们创建此文章是为了让您在当今竞争异常激烈的数字世界中站稳脚跟。这里提到的所有UX趋势绝对可以改善几乎每个软件解决方案或网站的用户体验。即使用户期望很高，它们也可以使您的产品在视觉上对目标受众更具吸引力。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
交互成本是用户在与网站交互中必须执行以达到其目标所需的精力（无论是精神上还是物理上）。
理想情况下，我们希望用户访问网站并在他们眼前找到他们正在寻找的答案。这将意味着零交互成本，并且是检验可用性的里程碑。
不幸的是，由于大多数站点和应用程序都提供了用户可能想要做的许多事情，因此很少能达到零交互成本。大多数时候，用户必须四处浏览，阅读，可能滚动，找到有希望的链接，单击它，等待页面加载，然后重新进行整个过程。有时，一个新窗口可能会在现有窗口的顶部弹出，在这种情况下，用户必须将注意力转移到新窗口上，也许还需要回头看旧窗口以将信息集成到两个窗口中。在其他情况下，用户可能需要记住一页上的信息，然后将其应用于另一页。所有这些动作都需要认知努力并弥补了交互成本。
可用站点将实现各种用户目标所需的交互成本降至最低。也就是说，它们最小化：
阅读
滚动
环顾四周以查找相关信息
理解提供的信息
单击或触摸（不会出错）
打字
页面加载和等待时间
注意开关
内存负载-用户必须记住的信息才能完成其任务
这些用户动作对总交互成本的贡献不同。它们的相对重要性可能取决于用户-例如，阅读障碍的用户阅读时间可能比点击周围的时间困难，而操作障碍的用户可能会觉得点击困难。它们还取决于设备-连接到高速网络的台式机上的页面加载可能微不足道，但是如果蜂窝网络覆盖较慢，则移动设备上的页面加载可能会花费很长时间。
许多可用性准则都解决了使交互成本的各个组成部分最小化的问题。例如，网络写作规则通过推荐要点和简短的要点句子和段落来降低阅读成本。
让我们举一个简单的例子。假设我们要查找“仪式”一词的来源。我们将使用Dictionary iPhone应用程序执行此任务。我们将忽略在手机上查找应用程序所涉及的成本，并且在启动Dictionary应用程序后立即开始分析。
启动应用程序后出现的第一件事是启动屏幕。
在这一点上，交互成本包括等待几秒钟，以使启动屏幕消失并为应用程序的第一个可操作屏幕腾出空间：
在此页面上，互动成本来自定位搜索框。幸运的是，搜索框非常显眼地位于页面顶部，因此我们可以放心地认为，用户只需很少的精力就可以找到它。找到后，用户需要触摸搜索框以将输入焦点移到搜索字段中。搜索框是一个相当大且易于触摸的目标，因此交互成本也可能会降至最低。
接下来，用户必须编辑搜索查询。
当输入焦点在搜索字段中移动时，自动建议的词将自动显示。
用户必须查看自动建议并确定它们不相关，然后清除当前查询。他们可以通过按右侧的灰色x按钮（如果他们熟悉iOS规则）来执行此操作，也可以通过按触摸屏上的Delete键来逐个清除字符。
删除后，用户将开始输入目标词“仪式”。当他们开始输入内容时，关联词会显示在下方。用户可以检查关联词并决定是否要继续键入或停止并选择关联词。
选择（或键入）单词“ ceremony”后，用户必须按Search进入结果页面。他们需要等待片刻才能显示新页面：
用户必须推断Origin可能包含有关单词来源的信息。（对于大多数用户而言，这是一个简单的推论，因此认知成本很低；但是，如果改用“词源”一词，则某些用户可能会在阅读和理解其含义时遇到更多麻烦；因此，“来源”是更好的选择，因为它降低了交互成本。）
让我们总结一下交互成本的各个组成部分，以找到“仪式”一词的由来：
等待启动页面
搜索
输入几个字符
扫描自动提示列表，以查看所需单词是否在其中
如果否，请输入更多字符并在上一步中重复
如果是，请通过点击选择所需的单词
找到搜索框，然后点击将输入焦点移至该搜索框
阅读搜索框中显示的查询和自动建议
决定查询不相关
删除搜索框中显示的查询
键入或选择自动建议
点击搜索
等待结果页面
在结果页面上找到相关的词源信息
向下滚动页面并扫描内容以查找词源信息
找到标签并阅读
请注意，右侧还有更多隐藏的标签
推断词源可能是隐藏的标签之一
注意到滑动会向右暴露内容
向右滑动
阅读Origin并将该单词与目标联系起来，以找到单词的来源
点击词源
了解“仪式”一词的来源
如您所见，一个相当简单而轻松的过程需要很多步骤和子步骤；他们每个人都会产生互动费用。对于某些人而言，交互成本微不足道-例如，记住人们向右滑动即可显示更多内容，因此交互成本非常低，因为人们在移动设备或Web上已经多次遇到水平滚动。可以优化其他步骤以最小化交互成本；因此，在搜索框中使用灰色的小x按钮可以大大降低删除显示在搜索框中的查询的成本。同样，将按钮调大可以帮助点击目标。选项卡的位置和外观设计会影响人们找到选项卡的速度。（当然，选项卡本身的选择与使用其他方式来构造内容的方式也会影响用于在结果页上查找相关信息的位置的交互成本。）
请注意，对于前面各节中的某些步骤，用户可以有多种选择。例如，他们可以按灰色的x按钮删除当前字符串，也可以多次使用Delete键。或者，他们可以从自动建议列表中选择建议，也可以在最后输入字符串。
人们如何决定采取哪种行动？答案在于预期效用的概念：
预期效用=预期收益–预期交互成本
用户尝试最大化一项操作的预期效用：换句话说，他们权衡了每个操作的收益和成本，然后选择收益与成本之间最佳平衡的方案。
当有几种方法可以实现具有相似利益的相同目标时，用户通常倾向于选择使估计的交互成本最小的操作。
例如，许多人可能不会在自动提示列表中向下滚动以找到“仪式”一词，而是可能会再键入一个（或几个）字符，直到可见“仪式”一词为止，因为向下滚动小列表和扫描列表中的正确单词比击中一个甚至几个字符的成本更高。
这种类型的想法也普遍适用于站点级别。如果看起来真的很难在任何给定站点上实现其目标，则除非与初始站点进行交互的收益确实很高，否则大多数用户只会以较低的估计交互成本转移到另一个站点。举个例子，如果用户真的想购买Apple电脑，他们可能会坚持使用Apple的网站，因为他们不太可能在其他地方购买。在这种情况下，用户的动机确实很高，因此他们可能愿意忍受很高的交互成本。但是，如果用户要购买烧烤架，则可能不在乎是否从Home Depot或Lowe's或其他站点购买，并且会离开互动成本高的站点。
营销和品牌推广通常会增加与特定网站或品牌互动的用户动机和预期收益；可用性可以降低交互成本。两种方法最终都解决了增加使用站点或软件的预期效用的问题。
交互成本是可用性的直接度量。实际上，该概念早在人机交互时就被引入，以评估软件系统的可用性。所有的可用性启发将用户的交互成本降至最低。
从长远来看，快速评估设计的交互成本可以节省大量资金，因为它可以很好地衡量用户界面的难易程度。它也可以用作设计备选方案之间的比较工具：通常，将交互成本最小化的方案具有更大的成功机会。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从6月分的全球开发者大会至今，大部分苹果用户都更新至iOS 14正式版系统。Widget成为新版本系统中讨论度最高的部分，知乎、小红书、公众号各个平台都能会看到关于桌面小组件的讨论以及各种关于小组件排版设计攻略。本文带你了解Widget的「前世今生」，除了很Android外，Widget这次为什么会成为这次iOS 14更新的重中之重，各大应用抢先适配iOS 14，抢占流量的新入口。
小部件最初来源于苹果电脑工程师Rose的一个插件工具—Konfabulator，用来更换桌面运行工具的皮肤和外观。2003年的Konfabulator是运行在苹果操作系统之上的，而其中的主运行文件叫做Widget。就像现在很多的新型产品一样，当年的Konfabulator一经发布，在美国引起众多人的关注，两位开发者也最终决定将这款工具命名为Widget。
一直到2004年11月Widget1.8版本正式对外发布，此时的Widget不再局限于某一平台，而是一款跨平台的产品。Windows和Mac用户可以根据自己的喜好开发或使用Widget工具，这只是这款工具的开始。
时间来到2008，当时的苹果已经推出了iOS 2。而Google联合多家厂商开发了安卓系统，当时Android的最大特色就是开放，开发者可以根据自己的喜好随意的修改底层文件，我们当时印象中多变的Android桌面使用的就是Widget程序。我们熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的随意设计导致后来的Android设计语言碎片化严重、交互感受相互割裂。一直持续到Google将物理设计体验带入屏幕的设计语言Material Design，利用具象化的设计语言规范各家的开发，遵守统一的设计语言和交互感受，由于篇幅限制就不详细展开去说。
Widget的定位其实相当于应用程序的扩展程序，使用的关键点在于用户可以在不打开应用、无需加载等待的情况下，在屏幕上快速获取信息甚至进行简单的操作。
Widget按应用可分为三种：Desktop Widget、WEB Widget以及Mobile Widget，目前讨论最多的iOS14更新的Widget其实是运行在移动设备上的Desktop Widget，又称为Mobile Widget。
注：Widget在刚进入中国的时候，没有通用的译名，由当时的中搜命名为“微件”。直到这次iOS 14才使用“小组件“的命名。
苹果多次强调Widget不是进入应用的另一种快捷方式，Widget是一种的信息展现方式，用来快速提供展示某些用户关心的应用程序数据。
Widget按照用户使用场景的不同，可以分为：信息小组件、集合小组件、控件小组件及混合小组件。而iOS 一直将主屏幕的控制放置于控制中心中进行交互，因此小组件类型的主要是信息小组件及集合小组件。
在人们的日常生活中有一类应用，无需进行操作，但应用需要经常性的更新信息。比如：天气、时钟等等。信息小部件将应用的关键性信息展示在小部件上，同时跟踪相关信息的变化。根据小部件的大小选择性的展示信息的密度。
将同一类型的众多元素展示在小部件内，常见的比如：新闻报道、系列图片或电子邮件等等。这类小部件有两个特点：1.信息集合；2.点击集合元素中的某一个元素可快速进入详情页进行浏览。集合小部件可进行垂直滚动，但在iPhone端由于交互限制，并不能进行此项操作。例如：微博、知乎。
控件小组件子除了显示常用的功能状态外，用户可直接在主屏幕进行简单的触发操作，不需要打开相关应用，类似相关应用的外部遥控器。例如：音乐类小部件，用户可以在当前小部件上进行简单的暂停、切换曲目等操作。而iOS系统传统的“控制中心”包括大部分的手机操作部分，因此iOS 14的小组件还是以展示信息为主。
实际上更多的小部件是同时具备以上两个到三个特性的混合小部件。比如：音乐类小部件，不仅可以进行简单的交互，同时也展示了当前播放音乐的基本数据。
苹果作为全球化的顶级手机制作商，一直追求通用的设计语言。设计规范包括：完整性、一致性、直接操作、反馈、隐喻，用户控制等几个设计原则。苹果有别于其他手机系统的封闭式系统，作为一个习惯于为用户做决定的父系公司，虽然这次Widget的跟新被看做是苹果对于之前控制的减少，但在iOS 14关于Widget的官方设计指南中，也有明确的关于Widget尺寸的限制、卡片式的圆角半径的限制、展示内容形式限制、设计交互的限制。
iOS桌面小组件的内容虽然可以通过开发定制，但在手机桌面仍然保留规范的视觉规则。
Android小部件之前虽然也有限制minHeight和minWidth的大小属性，但却可以通过左右上下拉伸大小，调整小部件信息展示内容的多少，因此大小其实是不受控制的。
在iOS 14这次更新的小部件，同一应用限制只提供3种尺寸2x2、2x4、4x4。
小组件的核心功能是让用户无需进入app便可获得信息，即少量但即时、有用且高度相关的信息。因此针对不同作用的应用需要先进行展示信息的梳理整合，明确小部件的核心目标。
2x2小尺寸的小部件类似动态图标，仅显示当前当地的天气，并可以打开应用。
2x4中等尺寸以及4x4大尺寸的小部件，则可以在2x2的基础上额外展示更丰富的信息，并且可以与用户进行交互。
同时为了确保所有小部件的圆角看起来都是一样的，要求所有小部件采用SwiftUI容器应用正确的角半径。相关开发文档ContainerRelativeShape
Android手机桌面的widget可以随意的放置在任何位置。而iOS的小部件和之前的所有图标一样，仍然要紧贴其他应用吸附在屏幕的顶端，不能居住只能靠边放置。
当在同一区域希望有多个小组件进行展示时，可以使用智能堆栈功能。根据不同的使用场景，通过上下滑动进行切换。Siri会根据时间的变化，显示不同的小组件内容。
苹果从iOS7开始借鉴了微软以及谷歌的设计语言，减少视觉装饰、抛弃了拟物化的设计风格，尽量以内容为核心，在这次的iOS小部件也对内容展示进行了限制。
聚焦内容目标点。小部件的关键点在让用户易于浏览，所以需要前期进行设计目标的梳理，仅展示少量的信息，专注于程序的某一部分内容。
显示内容与大小的关联性。创建不同尺寸的小部件时，不应该只是简单的扩大小部件的大小，而应该是在大尺寸时考虑展示更多内容，更详细的可视化效果，围绕基本信息的基础上修改表现形式，进行优化和调整。
提供真正有用的信息。小部件的意义在可以在主屏幕立即为用户提供有意思的内容，而不是像桌面图标一样成为另一种快捷打开方式。
保持展示内容的更新。小组件的展示数据需要不断的更新，否则无法吸引用户的注意。
寻找应用的特殊性。例如日历小组件，可以针对特定的时间和事件进行独特的视觉处理。
合理的设置选项。长按小组件会出现“编辑小组件”的选项，可以对组件的展示内容做分层或重要程度展示。例如：天气、时间切换城市的定位。网易云音乐“定制我的云音乐小组件”切换“每日音乐推荐、我喜欢的音乐、私人FM、歌单推荐、私人雷达”的顺序。
避免在小组件中加入过多的交互元素。避免过多的目标，以至于用户无法点击所需的目标。根据内容小尺寸，设置一个点击元素便可，中大尺寸的小组件，可设置多个点击元素。如中等尺寸的微博，可以通过点击任意一条热点，查看热点内容。
仅支持点击，不具备垂直滑动。在Android的集合类小部件除了基础的点击交互外，支持部件内信息的垂直滑动，但在iOS系统中的小部件不具备垂直滑动的操作方式，应该是苹果考虑到小部件在左划的homescreen，可以无限堆叠小部件，容易引起交互操作的冲突。唯一的交互方式就是点击打开应用。
可以看到iOS 14的widget没有其他交互方式，只能通过点击唤醒应用或某条资讯的详情页。苹果在保证一贯简单明了的用户体验外，不建议应用商设计过于复杂的样式来呈现内容，尽可能的减少用户电池、网络方面的消耗。
weight设计系统内容常见布局形式，可以作为设计小组件时的参考。
由于苹果本身自带的话题属性，在2020年6月22日第一次线上开发者大会—WWDC20发布的widget，到iOS14正式版上线期间，国内外热度一直高居不下，首先各家应用厂商、个人设计开发师都推出自己对widget适配的产品；小红书、知乎、微博等公众流量平台的个大私欲流量博主基于产品的适配推出各种风格主屏幕的应用攻略，widget迅速成为巨大的流量入口。
从6月分的开发者大会到正式版上线，苹果在自家的应用App store的Today专题、iOS 14精选App对widget进行了针对性的推荐，当搜索“小组件”等关键词时还会出现“超实用的小组件”专题推荐。
基于苹果用户的巨大市场，App能够获得苹果的推荐意味着大量有效曝光以及话题热度，此时很大一部分应用，根据产品特点，抢先适配小组件功能，获得苹果推荐，抢占一波流量。
从9月份开始，color Widgets、倒数日、Widgetsmith、我的天气等多款以时钟、计时、日历、天气功能的小组件应用多次轮番登上App Store应用免费榜第一。（数据来自七麦数据）
并且直到现在依然维持相对稳定排名的高度，及高下载量。
这些数据一方面不仅因为用户在知乎、小红书、抖音对于如于如何使用小组件的功能、如何更定制化的设计布局自己桌面的讨论，还在于各大社交平台应势对于小组件话题的推送，使苹果的小组件获的了更多的关注度，与用户关注度。
而有些设计师看到这其中的巨大流量赚的盆满钵满。9月20日设计师@Traf在自己的社交媒体账号发布了自己设计的iOS 14主屏幕，立刻获得大量用户的喜欢。Traf转手将自己的这套图标以28美元的价格出售，开始就获得了3626人的支持（有兴趣的小伙伴可以点击https://icons.tr.af/ 购买），六天就赚了10 万美元，有人要去画图标了吗？
苹果对widget的特性定义为：简单明了（Glanceable）、恰当展示（Relevant）、个性化定制（Personalized）。阿里和京东于9月中旬基于对iOS新特性widget的理解与限制，分别对自家产品手淘和京东进行了适配设计。
京东根据iOS 14 widget提炼出的关键词：简洁、高效、内容化。整合自己出自己品牌的设计三大原则：个性、信息、情景。在设计原则的基础上，结合京东的业务指标和用户场景，制定出了京东widget的四个方向：物流（工具）、直播（互动）、店铺（私域）、秒杀（营销）。
物流——提升获取信息的效率。及时查看物流通知，跟踪物流进度，提升用户获取信息的效率
店铺——建立用户与产品间的连接。利用widget的展示功能，在桌面推出店铺的新品，方便用户随时随地关注不同店铺的新品。
秒杀——聚焦首页获取核心信息。为用户实时提供秒杀商品，红包，配合京东的签到形式，承载京东营销矩阵的业务背景。
直播——用户互动。推荐热门、感兴趣的直播，预告明星直播，增加用户与用户、用户与主播间的互动。
手淘根据数据得出：用户虽然平均每天进入屏幕的次数超过90次，但停留的总时长不过几分钟。结合一闪而过的快速切换应用的主屏幕里，设计交互复杂的应用界面并不能契合用户的需求。得出设计要素：一目了然、高相关性、个性化。
所见即所得的物流——将查看物流信息之前需要“打开手淘、点击我的、进入订单、查看物流”4步操作，简化至前台widget透出，用户轻松掌握包裹的一举一动。
强大的订单管理——基于手淘人群60%的目标在订单模式，快速启动功能。以及对一些必要widget做了深色模式的颜色适配。
便捷的互动权益提醒——针对淘宝人生、淘金币、芭芭农场等互动专区，可在widget组件上时效了解自己互动权益的完成状态。
千人千面内容定制——基于商品、社区、直播、店铺等手淘的广泛产品，通过多元的方法将前台的展示权利交给用户。例如：关注的店铺，关注的直播内容，爱豆的时装秀。
京东立足于自身的业务指标和用户场景制定京东widget的四个方向，手淘根据数据导向一目了然的用户需求。但由于京东与手淘都是购物应用，结合widget信息展示的特点，最终的聚焦点都是在于信息的获取效率及提醒。使用户在不打开应用的前提下，满足不同的场景需求。但淘宝常年的游戏营销，淘宝人生、淘金币、芭芭农场的互动场景使他的业务场景化比京东更游戏化，在视觉方面也更丰富。
推荐阅读：
下面推荐几款我自己觉得非常不错的小组件。
开发者David Smith发布的一款用户可以自己创建定制天气、日期、天文等widget的应用。该应用采用了直观的图形界面话，精确调整每个widget包括字体、颜色、背景色等的显示信息和样式。支持大、中、小三个尺寸，与iOS 14的Widget 大小是完整匹配。
与其他小组件不同的是，Widgetsmith可以根据时间自动变换小组件，在编辑小组件时选择“Add a Timed Widget”，然后在表盘上划分时间，并添加对应的小组件。放置在桌面的小组件就会随着时间变化成相对的画面。
这款应用与其他天气类应用不同的地方在于，它提供了9种的widget样式，17个主题，满足用户各种风格的需求。除了常规的天气预报外，还有实时天气，空气质量、世界天气、生活指数可供选择这款应用与其他天气类应用不同的地方在于，它提供了9种的widget样式，17个主题，满足用户各种风格的需求。除了常规的天气预报外，还有实时天气，空气质量、世界天气、生活指数可供选择。
我的天气同一家开发团队的另一款小组件倒数日，是一款可以直接在屏幕上看到不同主题倒数天数的小组件，能根据自己心情更换背景。此外还可以设置日历小组件和时钟小组件。
西窗炷采用白底黑字简约的界面风格，每天推送一首诗词，点击便可阅读全文。也可以通过编辑小组件选择自己想看朝代、体裁和显示字体。
没有买过豆瓣日历的举手，买完心心念念觉得自己会每天看一部电影，em……然而并没有。豆瓣的小部件除了两种电影日历的样式外，实时热门书影音排行的界面也能让用户不用打开应用，便可获得及时的影音信息，点击进入详情页面。
当然也有网友做出了史上最强小组件，以及其他有趣的组件
目前每个手机用户主屏幕上都会有越来越多的app，我们的衣食住行娱乐都需要各种app的协助完成，但随着app的增长，用户会将各种app按照种类、类型进行划分，靠线索记忆或肌肉记忆，熟悉app的位置，但随着时间的推移，我们可能又会有各种新的应用需要下载使用。重复分类、查找、点击进入的行为，其实是很浪费时间的步骤。
首先我将之前的主屏幕全部隐藏，只留一个主屏幕页面。数据显示日常对手机的操作交互中，有50%左右的通过左手/右手单手握持操作，而我本人习惯左手单手握持操作。操作热区如下图中所示的从左到右从下到上。
其中顶部区域及右边区域放置，豆瓣、西窗烛、我的天气等展示类小组件；Todoist、Thing3、倒数日等任务管理类小组件；知乎、微博、头条等咨询类小组件则可以放置于画面中间，不妨碍点击某条信息。也可以使用智能堆放功能，将多种小组件放置同一区域，通过上下滑动进行切换。最后放置自己平时使用频繁的应用图标即可，使用频率也是按从左向右的顺序。大小方面
苹果的app资源库会默认经常使用应用可以直接点击进入，在使用其他app不常用的app时，可以通过上方的查找区域进行搜索。
目前已经使用1个月左右，之前也试过各种好看的小部件，最后还是以效率为出发点，将大部分的app放置在app资源库中。
在我们的认知中，手机桌面更像是一个应用程序的目录。我们不会过多的在主屏幕停留，需要借助启动图标点击进入应用进行操作，用户打开某个桌面应用，在应用内进行操作；另一方面在当前app应用越来越多的现在，高频应用与低频应用混合，常常在使用时，陷入查找应用中，降低了信息获取的效率。小部件的使用，使得用户虽然还是不能在主屏幕界面进行数据处理，但小部件作为应用程序的扩展程序，用户却可以在不打开应用、无需加载等待的情况下，在主屏幕上快速获取信息甚至进行简单的操作，不得不说是在改变用户长久以来的使用习惯。
无论是Google从碎片的Android系统转向物理设计体验的Material Design设计语言来规范各家的开发。还是最早提出“One productfamily，One platform，One store”希望将手指与手机触摸交互与鼠标指针交互的打通，保证多设备的一致性，但最后却被自己各种花样作死的微软磁铁设计。各家都在尝试统一设计语言，以及交互感受。而这次iOS 14的，我们已经看到了苹果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的联动与融合，而小部件就是最重要的一步。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“今天吃什么啊？”
“不知道啊，看看大众点评，哪家店比较靠前”
“一会去看什么电影？”
“我看豆瓣上，这部片子评分特别高，我们去看这个吧”
当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，面对的选择越多却越不知道如何做决定，或者当下做了决定觉会一直思考做的这个决定是不是最好的，选择困难变成了大众病。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？排行榜仅仅是用来降低用户的选择成本，为什么商家对排行榜也趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能都不知道，我们的生活正在被各种排行榜所支配！
排行榜的本质是一个没有感情的信息筛选机制，某一相关的同类事物之间通过比较，反映同类事物客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应降低用户自己的选择成本，准备快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量和平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名。那这一切背后的原理是什么？
一个完整的排行榜需要平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。
在没有各种应用前，当我们决定购买什么东西或去哪家消费，前期需要花费大量的人力、物力，搜集相关的信息进行整理集合后，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。
选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助降低选择成本的同时，也会影响这用户的最终选择，在接下来的平台侧方面会有详细的分析）
比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要找到我身边的耳机发烧友或数码电子方面方面的内行人，收集信息建立备选集，但由于京东在电子设备方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东完成了前期的信息搜集及备选集建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。
在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。
无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了相通的谈资。
在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感，满足自己的社交需求。
过年期间各家app纷纷推出自己的用户年度报告总结榜，不知道你有没有参与到其中，并分享到自己的朋友圈。在我们的平常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要了解自身在大数据下的自我确认，通过各种各样的榜单，判断自身的能力、情绪、价值等，来达到自我认同，否则就会感到焦虑不安。
加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。
我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，一起参与讨论。
无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？
对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下。
从我们记事起，我们对世界的认识来自自己的父母或老师，而这些教导我们什么是对、错，对当时的我们来说是权威的化身。长大后我们对于权威的认可更倾向于某一领域的专家，比如：医生、律师、教授等。认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究问题的工作，做出更轻松的决定，虽然不一定是正确的。
搜索我们会第一时间想到百度，影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？
平台权威性意味着说服力和影响力，在减轻用户的决策压力的同时，影响用户做出平台所需的决策方向；
每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度
排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值
平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。
在平台完成建立权威性开始利用排行榜进行商业变现时，比如百度、58的竞价排名，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。
上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。
由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。
而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。
排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。
对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。
不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。
当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。
面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。
在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。
在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。
知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。
而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。
首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。
其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。
用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）
当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。
没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。
在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。
平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。
朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。
不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。
相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。
排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。
好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。
当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。
有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。
得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。
排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。
纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。
相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。
上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）
每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。
人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。
因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。
说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播全站榜中有看到）
榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；
信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。
排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com