Bsport体育

　　业内确实有一些设计规范，遵循规范能够规避掉设计中的许多误区。先回答题主的问题，是否可以用“刷新icon”取决于这个icon样式是否与其他功能有冲突，比如说网络不好时的刷新操作和重新定位是两个功能，就不可以用同一个icon，应该使用“重新定位”特有的icon。题主提出这个问题说明已经对UI设计的细节进行了思考，再继续学习下去，就可以掌握深层的技能。下面是整理的工作中常用的UI设计规范，为了便于查阅，建议大家收藏，遇到问题可以对照这篇文章进行调整。

　　由于手机屏幕的ppi值不断在增加，所以为了用同一个尺寸的设计稿适应不用的屏幕，我们可以用1倍、2倍、3倍这样的关系把所有的屏幕尺寸对应起来。

　　将画面分成网格的形式，各个元素排列在网格线上，这种方式可以页面元素更整齐，让页面更加有一致性。

　　由于我们的拇指有一定的大小，所以图标的大小必须要让拇指有效点击，最小尺寸不能小于：48dp*48dp（Android规范推荐）。实际上，44dp-48pd之间的点击大小都是可以接受的。

　　主色和辅色，应该以一个颜色为基础，延伸出一系列的变化色，以适应界面中不同的用色情况。

　　文字的不同形态可以体现出内容的优先级，比如强调的内容我们会用粗体，以下给出IOS提供的苹果系统默认的英文字体尺寸和字重，设计的过程中可以参考。

　　为了适应文字在界面中不同的界面使用情况，我们应该设定不同的字号、字重、状态、颜色。

　　Android与iOS的组件设计有异曲同工之处，为便于理解，这里综合两个终端的特点对组件整体做出介绍。

　　①持续性：顶栏应该在每个页面当中出现，当页面向上滚动时，顶栏可消失；向下滚动时再次出现。

　　很多工具栏出现在应用屏幕底部出现，包含了执行当前视图或包含内容相关操作的按钮。

　　③底栏不能有导航类的操作，因为如果页面有临时Bsport体育的底部弹出页面，就会把返回按钮挡住。

　　②线型按钮：由文字标签、容器、图标（可选）组成，在表达[比文字按钮更重要的动作]时使用。

　　③面型按钮：由文字标签、容器、图标（可选）组成，在表达[最需要强调的动作]时使用。

　　①逻辑：列表需要通过⼀定的逻辑顺序做排列Bsport体育，让内容容易被浏览。例如：字⺟表、数字、时间顺序、⽤户偏好。

　　现在处于规划期或迷茫期的同学，推荐个训练营，是@马力在知群老师举办的产品设计训练营，

　　专门帮助零基础想进入互联网行业的同学。里边有很多内容是他原本为清华、北邮、阿里、华为、创新工场等多家知名高校和企业讲的课程。

　　如果你想转行成为产品经理、UX 交互设计师、UI（全链路设计师）、运营，这个训练营专门为零基础入门、跨专业转行、野路子提升的同学开设，可以通过这个训练营全面了解产品思维 、大厂用人要求、学习路径。

　　这个训练营已经举办过100多期，帮助几十万人了解互联网行业和找到职业方向ｕｉ设计。认真学习可以获得包含上百个知识点的高清能力地图电子版，还有机会拿到实体版。

　　设计最有趣的地方在于它的通用性，不论是音乐、建筑还是工业，设计的规则大同小异。

　　转载一纽约妹子Melissa做的分享：总结了从建筑到产品UI的四个设计的基本原则。

　　轴在UI设计中是最基本、最常见的概念，也是用来组织界面结构的重要核心。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来。

　　轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes 程序中的专辑列表的设计Bsport体育，所有的专辑列表在界面的左侧保持对齐，围绕虚线、强化

　　虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈。

　　从产品设计的角度上来看，Twitter 的时间线设计就是一个很好的案例，左侧的头像和右侧的推文共同塑造出缝隙中轴线、运动

　　当我们碰到某先线条的时候，视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动。两个端点决定了线，界定了开始和结束的地方，线，或者说轴线的存在会引导和提示运动的方向。

　　如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动，直到你找到感兴趣的东西，或者感到厌倦并关闭应用。在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去，但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法。

　　当元素被均匀地放置在轴线的两侧之时，他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称。

　　对称令整个设计更加平衡。当元素与控件在轴线两侧处于相同位置之时，会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候，如果左右两侧都是5间大小一致的房子，当你走在街上的时候这种平衡的设计会令人非常舒适，这是平衡给人的感受。

　　如果轴线两侧的控件布置不再是一一对应尺寸相近，那就是不对称的设计。不对称的设计会给人明显的失衡感，可能会令人不舒服，但是也能造就残缺美，当然这要看你具体怎么做。

　　虽然Pinteret 的APP设计在整体上是沿着中轴线对称的（宽度一致），但是两边的界面控件并非是对称的，它们的高度并不一致，位置也是错落的。稍微一点的落差都会被眼睛捕捉到，而这样的差异让用户无法准确地左右顺序阅读。不对称设计打破了设计的平衡性和舒适性，但是也可以缓解了规律性设计带来的视觉疲劳。

　　如果一个控件在形状和形态上同其他的不一样，也可以让它独立出一个层级。不规则的设计同样会令人侧目。建筑物的正面拥有五个相同的窗户和一闪大门，你会立刻注意到门的独特之处。

　　位置的存在同样能彰显层级的不一样ｕｉ设计。在圆圈之内，中心位置的东西比边缘部分的看起来更重要。位于轴线顶端的控件会显得比其他部分的优先级更高。

　　理解韵律最直接的方式就是听歌。音乐拥有节奏感，绝大多数的音乐遵循着相同的节拍，节拍就是音乐模式的一部分。

　　当节奏被间隔打断的时候，会形成不同的层级。听歌的时候，均匀的节奏被其他的音乐元素打断的时候，你会意识到这是比较特别的部分。

　　全文共 6,000 多字，大约需要 20 分钟阅读。大家可以先保存，有空的时候再仔细看。 关于本期内容大家有任何观点、意见欢迎到我的知识星球、微信群或小红书中参与讨论。

　　2018 年的 10 月，我在专栏里发布了第一篇关于设计系统的文章。那是我在阿里建立的设计中台部门的第一个季度，作为部门三大重要方向之一，我们已经用 Fusion Design 支持了集团内（除蚂蚁）几乎所有的 B 端产品。

　　2019 年的夏天，我在 Alibaba Ucan（现更名 U Design Week）做了一次设计系统的工作坊，和来自不同公司的设计师朋友们一起聊了 3 个多小时。那个时候已经有不少的小伙伴开始思考如何借助设计系统的体系化思维来进行设计交付。

　　那时大家大多都还处在理论和实践摸索阶段，更多的还是站在体验一致性的角度。而当年专栏的差不多二十篇文章也更多是从工具书的视角，再带上一些公司里实践的经验给大家介绍设计系统。

　　时间一晃快 4 年，环境在发生变化，我们对于设计的理解也在发生变化。前段时间在读者群里做了一次调研，你会发现很多公司对于设计系统的关注和投入都在明显的增加。

　　10. 设计系统启动之前有多的想法和思路，但在构建过程中出入又很多，有哪些道与术可以借鉴？

　　你会发现大家不再是盯着规范如何制定、文档怎么写等相对具象的问题，而是更多的站在设计工程、业务价值、跨团队协作等更深入的角度进行思考。而这些，也是近几年我在集团内各业务做实施中感受最深的地方。

　　所以，这次重启设计系统的专栏我会先花一些篇幅和大家聊聊在阿里集团做设计系统的故事，聊聊背后的一些思考和决策逻辑。大家先在“基础土壤”上做到信息对齐，那么我们后面的讨论也会更加顺畅。

　　在开始聊Why之前，我想还是先和大家一起回顾一下当下在互联网产品设计领域设计系统的现状。首先我还是会和那次 Ucan 的工作坊一样，将设计系统定义为

　　系统级：顾名思义，就是操作系统级别的设计系统，我们日常会涉及到的也就是 Apple、Google 和 Microsoft 三家。

　　其实我们可以将它“简化”一下，当做支付宝或微信的小程序就更容易理解了。支付宝和微信经过多年的运作累积了海量的用户和流量，于是很多的企业（或开发者）希望能够进驻到平台，为用户提供服务并获取响应的收益。

　　为了给用户带来一致、优质的服务和使用体验，支付宝和微信向企业（或开发者）提供一整套设计指导原则和开发框架，也借此来帮助提升小程序的开发效率，降低实现成本。而企业（或开发者）也会尽可能的去遵守它们的规则，以获得更好的合作、扶持。

　　也正是因为系统级的定位，它们所需要服务的产品类型会有着非常大的跨度。所以这些设计系统会更加的“底层”，会更注重对设计世界观的定义。这也是为什么它们会更多的去模拟、还原真实的世界。

　　注：这里顺便简单说一下对设计系统的定义。如上述，我们不能将它简单理解为一套设计规范或是设计语言，而是一整套面向业务生产（产品开发）的设计 + 工程的整体解决方案。以后我们会详细聊，这里先不展开。

　　以上是「设计有得聊」付费专栏的部分节选内容，加入会员您将获取本期专栏文章的剩余部分：

　　为什么要做设计系统的 5 大核心观点最新国策背景下设计系统有哪些机遇设计系统相关人才需求现状

　　小鹿整理汇总了设计师常用的一些 UI 尺寸规范和方法大全以及 UI 设计语言和原则，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。

　　当然，这并不代表了解这些就能做出优秀的设计方案了，你仍然要去学习具体的规范文档，英文水平比较好的同学建议直接读原文，当然网上也有很多译版方便大家阅读。

　　首先，Android 平台、iOS 平台的设计规范并非 UI 设计设计规范的全部，它是一个更广的概念范畴。一个公司，甚至一个团队都可以制定自己的设计规范。

　　获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。促进多人协作，解决视觉不统⼀现象。

　　塑造形象以及应用的规范。主要包含了标识的标准制图，配色字体等。以及常用的搭配方式。⼀个企业或者⼀个产品，都有相应的品牌视觉识别系统（VIS）。品牌视觉识别系统是视觉设计最好的参考基础，既然是⼀种指导体系或者说是参考，那么也相应地会有品牌的规范。

　　平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范，主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。

　　：侧重在产品设计和实现层，内容清晰并且实用，标注详尽，方便设计师们使用。更注重个性化的部分。

　　Material Design 规范在于统一 Google 多种平台下的一致性，代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。

　　谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。

　　Material 有自身固定不变的外在特征和内在行为逻辑 ，理解这些固有的属性有助于实际的设计项目。

　　投影提供了元素深度和运动方向的重要视觉线索；在运动中，投影提供了元素移动方向及高度变化。2. iOS 平台设计规范

　　在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互，而不会对用户的操作产生干扰。 内容全屏显示时，半透明或者模糊处理的方式可以提示用户更多的内容。 减少使用边框，渐变及阴影可以使界面轻 量化，突出显示内容（内容优先）。

　　不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容，赋予了界面活力，使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感，用户在操作功能时不至于在迷失。 当用户在浏览内容时，流畅的转场效果提供了一种纵深感。

　　⼀般来说，为了节省设计师和开发的⼯作量，会直接选⽤ iOS 的 1 倍尺⼨（Sketch）来进行设计。在输出切图时，需要和开发商沟通确认需要输出⼏倍图，iPhone ⼀般是 2x、3x ，Android 则尺⼨较多。

　　iOS 系统会自动切割圆角，所以在设计图标时，我们只需根据 App 图标的尺寸输出直角的图片即可。>

　　：由于我们的拇指有一定的大小，所以图标的大小必须要让拇指有效点击，最小尺寸不能小于：48dp*48dp（Android规范推荐）。实际上，44dp-48pd 之间的点击大小都是可以接受的。

　　：为了不误触图标旁边的元素，图标与周围应保持一定的距离，间距为：8dp。

　　在一些极端情况，允许可点击范围小于 48*48dp，例如： 文章中的链接、日期选择器。

　　一套界面中，任何“可点击的元素”尺寸不能小于 44*44dp；一套界面中，任何可点击的图标与周围的距离不能小于 8dp。

　　由于 iOS 和 Android 的栏位有不一样的叫法，所以在这里先做一个对比，大家可以看看他们各自的特征和名称。

　　对于 App 来说，贯穿整个产品的导航设计都应该是直观和可预期的。借助导航，新老用户都可以平滑顺畅地跳转到 App 的任意位置。但是受制于有限的屏幕空间和不同的内容优先级，设计一个可见性和易用性都不错的导航并不是一件容易的事。

　　简单：导航设计就像⼀只无形的手，引导用户使用产品，最重要的方式就是根据你的用户目标来设置用户任务。

　　：导航应该是清晰的，任何时候都让用户明Bsport体育白他在哪，他可以去哪，不必让用户过多的思考一致：导航应该在任何界面都保持⼀致，而不是有很多样式的变换、用词的不同。

　　卡片设计在 Android 的设计里是重点，卡片是用来显示由不同元素组成的内容的便捷方式。它们也适合用来展示拥有不同尺寸和操作的元素。

　　：是一组需要用户完成的任务，例如需要创建一个日历，就需要输入标题、日期、地址和时间。

　　：列表需要通过一定的逻辑顺序做排列，让内容容易被浏览。例如：字母表、数字、时间顺序、用户偏好。

　　：带图标和元图标的双行列表，带缩略图和无文字的双行列表，单双行列表混合的列表。

　　：带头像的三行列表，带文字、缩略图和无文字的三行列表，双行、三行混合的列表。

　　以上，设计规范并非是一成不变的，作为设计师，更不应该仅仅拘泥于设计规范，但又不能过于追随感觉。总之，时代一直在更迭，互联网行业作为弄潮儿，更是日新月异，因此设计师的挑战也很大。保持持续学习的状态十分重要。

　　如果你还是刚刚入行的新人，或者零基础想要转行，希望对互联网行业的设计师的工作有更深入的了解，可以加入

　　5 天 22 节课，带你看清互联网行业趋势，深入全面地了解 UI 设计师、交互设计师的前景，以及大厂用人要求，你可以结合自身情况，更早知道自己是否适合做互联网产品设计。

　　在创业公司做着一位独立设计师，说好听点是独立设计师，难听点，就是唯一的设计师。创业型公司，UI UE你要全包。但是我还是很有追求的在每个版本改版之后，更新设计规范。我的设计规范没有大公司那么高大上，只包含了字体选用，配色运用，ui kit这些东西。

　　1、要设计的界面太多了，而且产品迭代很快，来不及一个个界面标注重复性的东西，于是我就出一个字体运用规范，让开发看一个文档就好了。有个设计文档和UI设计规范，可以减少很多设计与开发之间的沟通。

　　后来给开发团队引进了zeplin，安卓小伙伴持续用着，ios开发，一直看着我的sketch源文件，在我教会开发sketch后，我连字体规范都少写了很多。2、把这些东西一个版本的整理迭代好了，哪天来一场说走就走的旅行，没有交接成本，即使公司找不到设计师，开发哥哥直接用这个规范，就可以分分钟上岗党设计师了。直接甩这个规范的sketch源文件就可以了。

　　弹窗、提示框 图片尺寸（banner、模块图片、头像图片）等元素进行规范整理。也就是每一位APP设计师都会经历的一个过程。也是APP设计师学习和进步的过程。

　　文末福利：体验Mockplus团队新产品——摹客设计系统，人人都有奖，iPad Pro等你来拿！！