容器 鼠标 组件 大概是出于对 Material 3 和 Matias Duarte 的热爱，我昨晚还是熬夜将 Google I/O 大会的 Keynote 跟了一遍，没有等来谷歌的设计高级副总裁，倒是看到了不少有趣的内容。值得关注的硬件AI 系统 LaMDA 2 越发强大了，不过真正让我感到亲切的，是用 PaLM 来命名一个人工智能语言路径模型，这可以说是非常的有情怀了。Pixel 7 系列的硬件直指 iPhone ，工业设计也越发的惊艳和高级了，而新的 Pixel Buds Pro 不仅带有降噪功能，而且续航也超过了有待更新的 AirPods Pro ：最令我想拥有的，还是带有圆形表盘的 Pixel Watch，从直觉上来说，它比 Apple Watch 的圆角矩形的外轮廓更加讨人喜欢，屏幕和表盘整体几乎融为一体的设计也颇为自然，知识 Wear OS 的实际表现还有待观望。而结尾演示的 AR 眼镜，则直接 Call back 了 演示开头的自然语言识别模型，呼应得恰到好处，只是用来演示的眼镜看起来仅仅只是普通的眼镜，不过从使用场景到演示效果，都非常合理和自然。相比于VR，AR 更加值得期待，我在 2016 年的文章《AR 可能是距离我们更近的未来》中就表达过这一点，而 Google 的探索方向也正好印证了这一点。不过整场发布会，最令我意外的东西，是全新的安卓平板，Pixel Tablet。疫情之下的产物和国内的产品策略不同，Google 在很长的一段时间以内，借助兼容了 Android 应用的 ChromeOS 的笔记本和平板类产品，直接拿下了中低端电脑市场和大量的教育硬件的订单。桌面级的浏览器和 Google 强大的云服务，搭配 Android 的软件生态，Chromebook 和 ChromeTablet 在教育市场上所向披靡，很多对电脑要求并不高的用户，在选择入门级电脑的时候，各色 Chromebook 的性价比简直是炸裂，如果你感兴趣，你甚至可以在「海鲜市场」上以极其低廉的价格买到各种 Chromebook 来尝鲜。Pixel Tablet作为平台的搭建者，Google 本身也一直是产品和服务的风向标。Google 自身的 Chromebook 系列的产品线年年更新，从最早的 Chromebook Pixel 2013 开始，一路到最新的 Pixelbook Go 和 PixelSlate，肉眼可见地可以看到 Google 对于 ChromeOS 生态的维护与推崇。Pixel SlatePixelbook Go而大屏 Android 设备，最后一次更新还是 2018 年所发布的 Pixel C，最有意思的是，这个有着独特磁吸式键盘的 Android 平板，其实是 Pixel 的硬件团队来完成的。Pixel C 之后，Google 团队开始放任厂商在平板领域野蛮生长，自由探索，直到……2020 年新冠疫情开始肆掠全球。远程工作和线上课程让平板电脑的需求前所未有的旺盛。国内一线手机厂商也在充分吸取了 iPad Pro 等热销排头产品的工业设计之后，纷纷更新或者推出了自家的平板产品线，用上次旗舰级别的芯片（骁龙870 准确来说），键盘触控板手写笔一次到位全给配上：小米平板 5 系列Oppo Pad Vivo Pad时隔 5 年， Google 决定在 2023 年再度推出 Andorid 系统的 Pixel Tablet 这一「官方指导产品」，毫无疑问是下定决心，收拢残兵，重新出发了。Pixel TabletAndroid 大屏设计我之所以如此之在意 Pixel Tablet 的发布，原因就在于，这是一个关键性的信号，那就是咱们可能要开始关注 Android 平台的大屏设计了。原因其实很简单。全新的 Material You 或者说 Material Design 3 的设计规范比起上一代更加完善，在机器学习和完善的工具的基础上，对于不同尺寸的屏幕和分辨率有了更好的支持，此是其一。Google 官方在去年发布新的设计规范和 Android 12 之后，还公布了单独针对大屏设备的 Android 12L 系统，并且提供模拟器和可供特定设备安装的系统更新，此是其二。折叠屏设备的出现，直接成为了普通智能手机（5-6英寸）和平板类设备（8-11 英寸）之间的桥梁。折叠屏手机交互不仅涉及到 APP 在常规手机尺寸和类 Pad 大尺寸屏幕上的呈现效果，而且还牵涉到不同尺寸屏幕切换以及交互状态改变等因素。在越来越多的折叠屏手机上市之后，这类需求会反向推进传统小屏 APP 做好大屏适配，此是其三。在 Android 折叠屏交互规范出来之前，微软早早地发布了 Surface Duo 的硬件，而且在 Fluent Design 的官方设计指南中，直接加入了双屏设计的规范，具体可以参看我的文章：重磅！柔性屏和双屏来啦，设计师必学跨屏设计规范我们总在期待 Next Big Thing，企盼下一次数字革命。阅读文章 > 5000 字重磅干货！设计师必备跨屏设计规范（交互篇）在上一篇文章《重磅！阅读文章 > 如果微软这个翻车前科过多的企业让你觉得不够有信心，那么来看看 2019 年苹果申请的折叠屏专利吧：iPadOS 和 macOS 在大屏界面上的协调统一，又何尝不是为 Android 的大屏设计提供一个良好的参考呢？微软和苹果在这一领域的探索，对于 Android 大屏界面设计的参考，我认为是第四个影响因素。而 Google 下定决心，放下 ChromeOS 系统的 Pixel Slate 改用 Android 系统的 Pixel Tablet 更像是官方深思熟虑后认定时机成熟。大屏设计要点去年 Google I/O 大会上发布的 Material You 算是第三代 Material Design，现在官方也会称其为 Material Design 3，或者 M3，依然是由著名的设计师 Matias 所主导，在 Google 的整个设计团队协同之下完成落地。最初的 Android 12 本身仅仅只是应用了一部分 M3 的设计功能要要素，比如说其中特别智能的「动态配色」，酸梅干超人的这篇文章当中有相对详细的介绍：零基础 UI 入门六：最新安卓规范入门解析安卓是由谷歌公司开源的，除 iOS 外的另一大手机系统，也是我们要学习规范的对象之一。阅读文章 > 而面向大屏的 Android 12 L 的发布之后，M3 的设计规范中，可访问性设计这一章节当中，也相应地添加了「大屏幕设计」的相关规范。关于这一部分的知识点，我将会梳理出相对重要的部分，更细致的内容可以前往 M3 的官网查看：https://m3.material.io/foundations/adaptive-design/large-screens/overview1、概述整套设计需要考虑到横屏和竖屏两种不同的方向，基于响应式设计的精神，采用多列布局，借助网格系统，让内容和元素可以在不同尺寸的设备上显示，并且符合人体工程学的需求1.1、响应式网格布局1-边距； 2-分栏；3-列间距随着界面尺寸和宽度的变化，网格的数量也会相应的发生变化。1.2、断点和响应式设计一样，断点定义了适合当前页面的 APP 的响应式布局。考虑到 Material Design 在总体视觉上的平衡，绝大多数的元素都尽量和 8dp 网格对齐，较小的元素，比如图标，则和 4dp 网格对齐。2、布局APP 基础布局是交互体验的基础，布局中可以承载较小的元素区域，比如卡片。1-导航栏；2-应用栏；3-内容主体；2.1、导航区域导航栏在展开状态下通常使用 256dp 的统一宽度，折叠状态下为 72dp 。使用竖屏状态下，宽度不足的时候，导航栏可以适当缩窄适配。1-抽屉式可折叠侧边栏；2-主体内容区域2.2、容器将具备关联性的元素打包呈现的方式为容器，容器氛围显式和隐式两种，但是不管哪种容器组件，都记得使用响应式尺寸，确保不同缩放状况下可读。1-隐式容器；2-显式容器隐式容器只是边缘不可见，实际设计和开发的时候都要赋予边界参数的。卡片是最常见的显式容器，通常使用显式容器是为了强化其内元素之间的关联。上面是一个错误的演示。不要在未对整体布局进行调整的前提下，简单地将包含文本的容器进行简单的拉伸。容器需要借助缩放来适应不同的屏幕尺寸。容器之间会出现嵌套的情况。在上方的案例当中，1 为卡片容器，2为列表容器，在内容主体作为父容器的情况下，内部的子容器需要使用统一的左对齐、右对齐或者左右两边对齐，而侧边导航栏中的子容器则可能是固定位置。3、组件组件需要随着屏幕尺寸和方向的变化，在填充方式、大小、对齐等方式上进行适当的变化。左-折叠纵向视图；右-展开的横向视图在缩放组件和布局容器的时候，可以根据实际情况，来考虑它们在不同屏幕上的缩放变化。比如底部导航栏变为侧边导航，原本移动端设备上的卡片容器，在大屏幕上变得更趋近于方形，从而更好呈现图片内容等等，按钮内的图标和文本可以锚定居中，横向放大的时候，也可以维持在对的位置上。3.1、直接呈现最直接的方式，始终是按照一定的比例来将原本移动端 APP 上的控件进行缩放，以适配大屏幕来使用。不过还有更好的方式。3.2、组件交换在不同屏幕尺寸下，不同类型的组件，有着类似的功能。比如之前提到过的移动端 APP 底部的 Tab 导航控件和平板上的侧边栏组件，就是可供互换的功能类似组件。而这种策略，使得 APP 大屏化之后，控件的大范围替换成为可能。又比如，移动端的列表式表单可以和大屏幕上所用的弹出对话框进行互换。两者在功能上几乎完全一样，而且在不同屏幕尺寸之下，显得足够「本地化」。下面是一些常见的可互换的组件对比列表：3.3、响应模式除了上述的缩放和组件交换的方式，还可以使用重新定位组件位置、呈现隐藏组件的方式来实现 UI 的大屏化。在涉及到较大断点和大范围额外空间的时候，可以将原本隐藏的组件直接呈现在大屏幕上。比如在移动端上通常折叠起来的菜单，在大屏幕上直接以侧边栏的形式显示出来。而在移动端上原本简单纵向排列的组件或者容器，可以在大屏幕上重新排版布局，这样更加贴合大屏的使用场景。4、设备在大屏的 Android 设备上可能会涉及到触摸板、鼠标、外置键盘、触摸手势 等多种交互模式。不同的硬件接入 Android 平板所涉及的不同交互能够很大程度提升界面的可访问性。外部输入设备通常是鼠标、触控板和键盘三种，它们所涉及的主要交互要素如下：外部输入设备的常规交互，和交互之下的通常大家所预期的行为：下面针对这些常见的交互进行详细梳理。4.1、鼠标和光标的交互当鼠标或者触控板连接 Android 大屏设备的时候，光标都应该出现在屏幕上。在没有专门针对鼠标进行优化的 Android 设备上，鼠标单击理应和触摸点击的反馈相同。当触发鼠标和触控板的次级按键（右键）的时候，会触发上下文菜单，也就是常说的右键菜单。当光标悬停在可交互的组件上的时候，这些组件应当呈现并告知用户它们是可交互的。当光标悬停于链接和图片上的时候，光标变为手型，用来强调光标下控件的可点击属性。光标悬停于文本内容之上的时候，呈现出 I 型，强调文本内容可以选中。用 I 型光标来强调选中文本的边界。当光标在不可被选中的文本上时，不应该显示为 I 型，以上为错误演示。在使用鼠标、触控板、触控笔选中文本之后，使用单一颜色突出被选中的文本，并且不要在选中区域周围显示触摸交互的控件。如果用户直接用手触摸选中文本，则需要显示触摸控件，即使 Android 设备连接了外部设备，也需要显示。在选中文本上点击右键菜单，能够呼出上下文菜单，即使是在带触摸屏的设备上，也需要如此。4.2、鼠标滚轮和触控板手势鼠标滚轮、触控板手势让大屏交互有更多可能性。当光标位于列表上时，滚轮和触控板两指滑动手势支持上下垂直滚动，注意，只有光标所在的那个列表。在触摸屏上，向上滑动，页面向下滚动。使用鼠标时候，可以通过点击拖动来选择文本和图像。使用鼠标的用户，可以通过鼠标滚动来让横向滚动的组件移动。同理，使用触控板的用户，应该可以通过双指横向滑动来滚动横向滚动的组件。4.3、键盘交互即使 Android 平板连接外置键盘的时候，设备的虚拟键盘都应该是可以被调用的。连接外置键盘之后，虚拟键盘会自动隐藏到一角。移除外置键盘之后，虚拟键盘会自动呼出。用户可以通过物理键盘的回车键（Enter），来发送信息，确认操作。用户可以通过空格（Space）来暂停和播放多媒体内容。写在最后Pixel Tablet 的出现更像是新的转折点，Android 大屏 UI 设计的需求在接下来会随着市场变化越来越多，大家又有新的事儿干了。另外，关于折叠屏设计的规范，可以参考龙爪槐的守望者所翻译的下面的几篇：Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 如何设计折叠屏？来看这份设计指南！最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。阅读文章 > Material Design 折叠屏设计指南：完结篇本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/android-pixel-tablet-design
首页 容器 官网 vivo 官网 APP是什么？vivo 官网 APP（下简称官网）作为 vivo 手机内置的应用，是提供 vivo 产品 / 服务 / 权益 / 资讯 / 社区的线上官方阵地，也是陪伴 vivo 用户「购机」至「换机」周期的重要角色。因此，官网的产品体验和设计品质，很大程度上决定了用户对 vivo 品牌的认知，保证官网设计品质，是保证 vivo 品牌正向认知的关键一环。vivo 官网 APP 首页为什么改版？随着业务的发展迭代，官网开始出现设计不统一、品质下降等问题，在首页表现得尤其明显，因此设计师发起了官网的设计升级，先从首页入手，提升首页界面的统一性和品质。基于用户&业务视角看「品质」优化首页容器是关键官网首页定位「精选」，聚合产品、权益、服务、社区等内容，满足用户需求。从用户视角看，首页存在 2 种场景：1. 头部搜索、金刚区为「明确目的场景」；2. 头部以下内容区为「无目的场景」。前者提供功能入口，满足用户明确的需求；后者展示内容，满足用户闲逛的需求。明确且固定的「功能入口」，经过长期认知培养，转化趋于稳定，优化空间较少；而时常更新的「内容」在呈现上的好坏，影响用户对 vivo 品牌的印象及浏览欲望，决定首页留存和转化。因此优化「容器」，使内容更好地呈现给用户，是本次设计升级的核心。从业务视角看，今年官网首页的内容运营将围绕「人-货-场」概念，通过分析用户（人）特征，将信息（货）推送给相应的用户，「场」是最后呈现信息的地方，即「容器」。业务方希望用更精简的容器规则去满足不同的「人-货」需求，做到「少样式」对「多场景」，构建内容展示标准，用更精简、易理解的样式，让用户聚焦到信息本身。乱，多，不全是首页容器的核心问题走查首页，发现如下 3 个问题：1. 容器样式乱首页容器样式多且乱，无章可循。需结合产品定位及功能诉求，梳理容器设计，定义标准。2. 信息冗余无效信息多，如「独立显示芯片」这种言之无物的信息，又如社区帖子密集的信息，都造成了信息过载。3. 信息展示不全首页经常出现信息不全的状态，对品质影响极大，用户无法获取有效信息。头部品牌的官方商城设计都崇尚「简洁」美学了解自身问题后，我们对各行业头部品牌的官方商城进行分析，以此了解行业设计趋势。1. 简洁的直观印象纵览他们的首页，扑面而来的是「简洁」，这是最直观的印象。2. 简洁从何而来深入分析其设计，可发现简洁背后 3 个核心共性：有限的容器：限制了基础容器样式的数量，最多不超过 3 种。有限的信息：限制内容在首页展示时的信息数量和信息容量。明确的优先级：图片是界面视觉焦点，辅以简洁的标题 / 价格 / 标签等文字信息，多数品牌去掉冗长的卖点。3. 简洁背后的意义「简洁」是美的，但信息精简、色彩素雅等特点也常被定性为「气氛弱」、「吸引力低」，尤其在销售领域。那为何这些品牌会将「简洁」的设计美学引入商城界面设计呢？这背后隐含消费者的认知心理。在追求功能性及性价比的消费领域，商品满足消费者物质层面需求，购买动机是功能、卖点、价格等利益点，因而在传统快消电商界面的设计中，更注重利益点、界面气氛对消费欲望的刺激。而在追求高品牌溢价的消费领域，商品满足精神层面需求，如身份&价值认同，购买动机围绕商品的设计品质、是否符合自己的社会属性等方面，过分强调利益点及界面气氛反而会影响品牌调性，使品牌优势被减弱。这类品牌商品的展示更聚焦在商品本身，「简洁」的设计美学就与品牌目标相得益彰。用「至简」的理念重塑vivo 官网 APP 首页用户认知规律、业务诉求及行业趋势的分析结果，都直指关键词「简洁」，它带来了逻辑严谨、规则明确、标准统一的有序体验，隐于简洁的表象之中，让用户更沉浸地体验内容。这种追求简洁表现、有序体验的理念，我们称之为「至简」，它将指导官网首页改版。1. 容器样式梳理基于「至简」理念，经过梳理和方案尝试，首页的基础容器被优化为 3 类：广告容器即传统意义上的 Banner，本次改版统一了首页所有 Banner 的规格、元素组成、文案排版，包括头部 Banner / 新品 Banner / 穿插 Banner。产品容器即展示产品的容器，新版的产品容器统一了信息架构的逻辑，文案限制在 3 阶之内，提供了「组合型」和「横排型」两种形式，对应不同的场景。组合型容器提供 2 种规格，拥有同样的信息量，根据业务需求自由组合。横排型容器提供 1 种规格，根据业务需求选择「横排」或「横滑」。内容容器即展示品牌、社区内容的容器。该容器统一使用上图下文的信息架构，可随场景进行不同形式的拓展。2. 信息展示优化梳理完容器类型后，对信息展示做进一步优化，解决「信息冗余」和「信息展示不全」的问题。产品信息以热销产品楼层为例：信息布局不合理导致手机型号展示不完整；可配置副标题但文案较多；通过颜色强调价格但价格并无优势。新版的信息做了如下优化：优化信息布局为手机型号腾出更多空间，保证展示完整；精炼副标题的核心卖点，转用限制字数的标签进行强调；不强调价格，引导用户关注产品及卖点。社区、品牌信息以社区楼层为例：首页社区楼层通过精选内容为官网社区引流，其定位是「入口」，旧版首页将社区内容直接平铺，露出了过多的信息，不符合定位的同时，也在首页造成信息冗余的问题。因此新版首页做了大幅度精简，只露出最核心的「标题/来源/互动情况」 信息，在有限的界面里露出更多的社区帖子。3. 视觉规则优化基于容器的优化策略，进一步制定了详细的视觉规则。官网首页由不同大小的容器组成，为了更科学地定义容器规格，引入了栅格。字体上，使用 OriginOS 的定制字体 — 汉仪旗黑，保证可读性及统一性。在设计界面时，在准确体现信息层级的前提下克制使用字号。如容器的文案展示，仅使用了 2 种字号，保持极致的统一和简洁。图形语言同样值得考究。官网的内容信息优先级更高，图形是辅助角色。因此图形设计更关注语义是否明确、元素是否统一、形式是否简洁，而不过分追求差异化。基于 vivo 品牌及产品体现出来的圆润亲近属性，对官网的卡片圆角、图标、标签、按钮等元素做了统一的设定，保证整体的协调一致。色彩体系也从 0 到 1 构建起来。过往迭代中，颜色使用仅凭执行设计师的个人感受，没有标准化。对此，基于 vivo 品牌蓝为官网重新定义标准色卡，包括常规色阶、材质色阶及灰色阶，系统指导颜色使用。基于新的容器规则及整体视觉规则，首页刷新后效果如下图。是结语，但不是结束本次 vivo 官网 APP 的首页改版，从预研、推动、落地到验证花费近半年时间，付出了相当「复杂」的努力。而我们的「复杂」，是为了给用户提供「至简」的设计品质和产品体验。但这并不是结束，首页改版后，将基于全新的设计语言，对全局界面进行翻新，全面提升官网设计品质。赋能 vivo 品牌，我们在路上。用3个国民级应用优化案例，分享我的改版思路以大厂的主流产品为优化实操对象，其实是一个很大的挑战，发现并优化其中存在的问题，对于理解用户体验设计有着巨大的帮助。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/vivo-app-redesign
按钮 容器 控件 虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。按钮几乎是每一个页面不可或缺的元素，对于按钮的认识基本停留在视觉层面，一个圆角矩形搭配一句文案就能拼凑成一个最基础的按钮。视觉是一个观察的切入点，但仅停留在视觉层面还是不够的，比设计表现更重要的往往是背后支持设计的理由。本文中的所有案例均来自线上产品，观点仅是个人粗浅的理解，有疑问的地方欢迎大家讨论指正。按钮的定义1. 按钮的来源数字世界是现实世界的一种映射，许多数字概念，都可以在现实世界中找到原型。按钮就是很生动的一个案例。在视觉表现上贴近现实生活中真实物体的外观，拟合用户心智模型，降低用户的认知和理解成本。2. 按钮的定义如果从视觉形式上看，按钮的组成很简单，一个矩形容器加上文字或图标即可组合成一个常见的按钮，但是仅仅从视觉层面定义按钮是不严谨的。按钮是一种重要的控件类型，而控件是图形用户界面（GUI）的主要构成模块。想要深入理解按钮，就必须要求我们首先理解什么是控件以及控件的分类。3. 控件分类和介绍定义：控件是用户和产品间进行交流的屏幕对象，是图形用户界面（GUI）的主要构成模块。分类：根据用户目标，可将控件分为 4 大类。每一类控件下又有更多具体细分。所有界面中常见的具体控件都可以根据其功能找到所属的类别。4. 按钮的分类在以上各个细分控件中，我将部分控件归入按钮类别：命令控件下的：传统按钮、图标按钮、文字按钮选择控件下的：开关按钮、单选按钮、组合图标按钮、状态切换按钮（开关和复选框样式比较固定，为了方便讨论，姑且不算在按钮范畴之内）因此如果以按钮为主体，以功能属性为分类条件，可将按钮分为：命令型按钮和选择型按钮命令型按钮与选择型按钮的区别不论从功能维度、交互维度、视觉维度上看，这两类按钮各自都有不同的特点。选择型按钮非瞬时状态有：“选中”和“未选中”两种互斥状态。可以把选择型按钮理解为某种状态的确认和展示。命令型按钮的非瞬时状态只有一种：正常状态，当用户点击命令型按钮后，命令即可下达。可以把命令型按钮理解为一个动作，点击按钮代表着立即执行这个动作。常见按钮的拆解介绍完了命令型按钮和选择型按钮在功能、交互、视觉层面的区别点后，我们再来看看实际工作中常见和常用的按钮类型。1. 传统按钮（有容器兜底的按钮）的来源：GUI 中“按钮”的概念来源于真实世界中的按钮。真实的按钮具有一个非常显而易见的特点：拥有一个适合点击按压的受力面，这个受力面就是可点击感的来源。试想一下，假设一个按钮只有针尖般大小，且不说你是否能认出这是按钮，即便你知道这是按钮，你会有按下的欲望吗？真实情况下，摆在人们面前的按钮面积越大，想按压的欲望就越强。因此传统按钮的最显著特点就是拥有一个承载内容的“受力面”，也就是承载文字或者图标的“容器”。受限于早期的显像技术，以及与真实世界的对照，这种“容器”通常一般都是矩形，后期渐渐衍生出更加柔和的圆角。风格发展：在相当长的一段时间里按钮都有三维凸起的特征，进一步巩固了按钮的可点击感。不过进入移动时代后，这种流行趋势发生了改变，按钮的三维印记被不断移除。用户已经建立起了成熟的心智模型，即便按钮在视觉上越来越“平”，也不妨碍点击行为的发生。结合多年的使用经验，用户已经将矩形形状这一特征和按钮牢固地联系了起来。即便现在的按钮大多都是扁平化，用户也能一眼就辨认出按钮属性。2. 传统按钮的拆解：常见按钮一般是由容器和内容组成。容器层面容器形状：移动端比较主流的按钮形状有：矩形、圆角矩形、胶囊形和圆形 4 种。一般，在人们的认知里，圆角越大传递的感觉越圆润亲切。其实形状本身并没有好坏区别，与单纯视觉偏好相比，元素的统一性更加重要。一旦选定了某一种按钮形状，就需要保证所有场景中出现的按钮都尽量看上去整体统一。容器尺寸：视觉上，按钮越大，越吸引用户注意，决定按钮大小的主要依据是按钮在页面中的优先级。而一个产品涉及到页面众多，如果不同的页面元素之间缺乏统一的调度规则，就会出现按钮尺寸过多，没有规律，细节混乱，效率低下的情况。为了既能适应不同的场景，又能保持产品级的控件统一，一般要给按钮尺寸设定几个档位以适配不同页面需求。排除个别特殊页面，一般把按钮设置为 5 个优先级梯度档位就足以满足设计需求。我们可以从优先级从高到低的顺序，将按钮分为：特大、大、正常、小、特小 5 个尺寸档位。下面展示最常使用的三个档位，大、正常、小档位。容器颜色：按钮的大小、形状、颜色三个维度中，人眼是对颜色信息最为敏感的。在一个页面中，突出一个元素的方式有多种，其中最简洁有效的方式就是用颜色进行突出。颜色包含了色相、饱和度和明度三种属性，改变颜色的不同属性，都会对按钮的表意产生影响。同时，不同的颜色代表着不同的含义，配色时需要加以注意。容器样式：容器除了基本的尺寸、形状、颜色之外，还有多种样式。上文介绍的容器是强面性的，此外，容器还有弱面性、线性等样式。容器细节：虽然现阶段的按钮越来越扁平，但在扁平的趋势下，依旧有发挥设计创意的空间。颜色渐变、投影、动效都是常用的设计手法。内容层面聊完了“容器”部分，再来看看容器承载的“内容”又有哪些细节点。3. 图标按钮的介绍并非所有按钮都需要容器，尤其当按钮密度较大时，去掉容器只保留内容，可以更好地提高空间利用率，简约视觉。4. 文字按钮的介绍比图标按钮更轻量的按钮类型是文字按钮，以文字的形式展示，和界面融合度更高，当用户有需要时才会注意到文字按钮的可点击性。5. 传统按钮与图标按钮的组合这种组合形式相当常见，将多个功能整合在一个区域内，如底部工具栏（ToolBar）或者顶部导航栏（Navigation Bar）。不同按钮承载着不同功能，侧重越明显，越利于用户快速识别并决策。特殊按钮类型上面介绍的是常见的按钮形式，除了以上按钮，有一些按钮形式专门适用于某些特殊场景。如悬浮按钮、胶囊按钮等。按钮的优先级一个页面往往有多个按钮，不同按钮承载不同功能，功能之间有相同或者不同的优先级，因此按钮之间也存在这相同或者不同的视觉优先级。我们分两类情况来讨论：相同优先级的按钮和不同优先级的按钮组合。按钮样式小结上文罗列了实际工作中常用到的一些按钮样式，最重要的步骤是分清按钮主次，使用不同的样式进行搭配。优先级强到弱：强面性按钮、弱面性按钮/线性按钮、图标按钮、文字按钮碎碎念：本文中出现的部分名词，比如“弱面性”、“容器”等，只是为了便于交流和统一指向，并没有具体权威出处。文中提及的按钮类型均来源于线上产品，样本有限，适用场景相对固定，还有很多样式没有一一遍历。但掌握了如何选择样式的原理，就可以根据日后具体需求做出合理方案。文中出现的数据都是经验型数据，如按钮按下状态是在正常状态下添加 10%纯黑的遮罩，文字字号大小等，这些都是建议型数据，可以根据具体情况灵活调整。有哪里说得不对的地方，欢迎讨论和指正。本篇来源：优设网原文地址：https://www.uisdc.com/button-application
落霞与孤鹜
飞翔的企鹅
张大湿
