网格 系统 定义 过去，我们一直在使用 8 点网格系统，它帮助我们在 UI 界面中，或者一致性上做了有力的贡献。但是今天我想说 8 点网格系统其实并非最完美的，我们可以选择 4 点网格系统，他灵活性更强，今天文章和大家一起来分享下 4 点网格系统的未来。关于8点网格：如何用「8点网格」来规范你的设计？看这篇好文！8点网格流行有一段时间了，我最早知道这种设计方式是在看了谷歌的Material Design设计规范之后开始认识的。阅读文章 > 一、为什么是 4 点网格系统在谷歌的 Materials Design 设计系统中，就一直在倡导 8 点网格系统，使用 8 网格可以更好的帮助 UI 设计师完成界面设计，同时在一致性与多平台适配的效果会更好。Materials Design 8PX 网格Google 同时也使用了 4 点网格系统，这就会导致很多人分不清到底使用 4 还是 8 去定义 UI 界面的网格系统？Materials Design 4PX 网格目前我看到很多设计师，绝大部分都是单独基于 8 去定义，而较少将其合并使用，这就会导致很多场景下，我们定义出来的间距、组件等使用时候要么有些场景间距过大，最终呈现结果也不是很理想。所以，如果都要去使用，那就需要设计师分清楚 4 和 8 如何去定义及使用场景，这就会有些麻烦。IBM 2PX 网格如今，我们可以完全抛弃 8 点网格系统，而直接使用 4 点网格。因为 IBM 已经提前给我们铺好路了，IBM 使用 2 点网格系统覆盖他们软件 UI 界面的一致性，最终呈现结果依然不输 8 网格，毕竟他们都是 8 的倍数，但是设计细节会更容易满足。二、4 点网格的优势首先要说明一点，8 点网格和 4 点网格系统都没有对错，如今推荐大家使用 4 点网格系统，是有一定道理的，下面我们先看看这张图。基于 8 去定义网格系统数字 8、16、24、32、40、48、56、64；基于 4 去定义网格系统数字 4、8、12、16、20、24、32、40、48从上面可以看出，基于 8 定义的网格系统，其实存在一些细节的间距是没有的，这样我们在定义一些较小的组件时候是很难满足的。比如下面这个案例：左边按钮使用 8px 网格系统定义的间距 24，右边使用 4px 网格系统定义的 20，相对来说，间距节奏感会更好。可能有人会说，两个看起来差不多，但如果是追求极致的细节感，两个间距相差 4px 已经是非常大了。所以如果使用 4px 网格他的面会更广，也能覆盖 8px 网格的数值。三、4 点网格系统的应用使用“4 的增量”来定义页面上元素的大小和间距，简称为 4 点网格系统。任何定义的高度或宽度都应能被 4 整除，包括布局间距、组件与元素间距、组件大小等。4 点网格系统相较之前 8 网格系统的优势大很多，比如以前只能在 8 和 16 选择，那么如果使用 4 网格可以选择 12px 的间距。当然如果能被 8 整除的也可以被 4 整除，相对来说 4 的空间与灵活性会更大。如果没有使用网格系统去定义 UI 界面中的板式，就会导致各个设计师之间各自去定义，最终界面呈现出很糟糕的效果。如何定义 4px 网格系统？这个很简单，他和定义 8px 网格系统思路一样，比如 4 网格系统，我们可以基于 4 的增量去定义。下面看这张图。4px 网格系统写到最后，4px 网格系统的灵活与兼容性大于 8px 网格系统，在未来的 UI 界面设计中，大家可以使用起来吧。欢迎关注作者的微信公众号：功夫体验设计本篇来源：优设网原文地址：https://www.uisdc.com/4-point-grid-system
内容 瀑布 网格 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。往期组件科普：UI组件应用指南！标题栏设计方式详解编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。阅读文章 > 一、组件介绍瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。所以我们可以总结出瀑布流的两个最核心的时间特征：无限加载内容等宽不等高二、使用场景瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。三、设计要点1. 列宽的制定逻辑对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。这也正是两列网格通用的适配逻辑。2. 内容的布局瀑布流有三种内容布局形式。① 图片等高在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。② 根据图片比例自由变化这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。③ 根据有限图片比例变化这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。3. 内容的类型瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。具体来说，内容类型分成两个大类，主内容和运营内容。主内容主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。运营内容针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。这些都是很不错的根据自身需要改造瀑布流的实践。三、样式拓展1. 站酷站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。2. 马蜂窝马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。3. 其他瀑布流样式结尾瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/waterfall-layout
网站 工具 网格 大家好，我是和你们聊设计的花生~上一期为大家分享的神器都用起来的了吗？今天继续为大家带来 5 款能有效提升设计师工作效率的工具，它们分别是：任意截图悬浮！轻量隐形的截图软件 Snipaste一秒一张！网格渐变生成神器 Color Morph海量素材！2.5D 插画在线编辑生成网站 IcongramsUI 设计师必备！便捷免费制图网站 Customer Journey Map告别生硬翻译！长文本翻译神器 Deepl错过往期的小伙伴看这里哦这 5 款工具，让设计师工作效率提升 200%！（二）大家好我是花生~之前向大家推荐了可以有效提高设计师办公效率的神器，收到很多小伙伴反馈说非常有帮助。阅读文章 > 这 4 款工具，让设计师工作效率提升 200%！大家好，我是和你们聊设计的花生~作为一个每天都在全网疯狂搜集各种设计神器并推荐给大家的人，我经常会遇到这样一些工具——作为设计师的我们不会经常用到，但是要急用的时候又不太好找。阅读文章 > Snipaste「软件官网」 https://www.snipaste.com/「使用小技巧」 https://docs.snipaste.com/getting-started日常设计的时候，我们经常需要同时查看很多灵感作为参考。那么如何做到多张图片同时呈现的屏幕上呢？截图软件 Snipaste 可以轻易帮我们实现这个功能。只需要按下 F1 键，就能在电脑上快速调出 Snipaste 进行截图，支持多张截图同时悬浮固定在桌面。复制、保存、标记、文字、马赛克等截图常用功能也都具备。Snipaste 支持 Windows 和 Mac，无广告，不用注册登录。程序只有 3.8M，简洁轻便的仿佛一款系统原生工具。安装后可设置开机自启，软件会自动以小标签的形式显示在工具栏，需要的时候一键唤出。以后不用打开聊天软件可以方便的进行截图啦~Color Morph「网址」 https://www.color-morph.com/Color Morph 是一个快速生成网格渐变背景的网站，免费使用无需注册。网站非常简简洁，我们只需要选择一种颜色，网站就会自动生成以目标颜色为主的多颜色网格渐变背景图，质量非常高。可以一键切换不同网格渐变效果，支持自定义颜色的数量。完成后可以导出为 SVG 格式，也可以直接复制 CSS 代码使用。关于网格渐变生成网站，之前还向大家代价推荐过 MESH·Y。它是可以一键生成酷炫渐变背景的免费网站，有 1000 种网格模型，支持导出 3000x3000px 的 PNG 格式。1000种渐变模板！快收下这款免费网格渐变神器 MESH·Y之前已经和大家分享过很多做渐变的网站，可以非常方便的提取好看的渐变配色。阅读文章 > Icongrams「网站地址」 https://icograms.com/designerIcongrams 是一个在线编辑拼合 2.5D 场景插画的网站。网站内有非常多 2.5D 场景模型和各种类型的小元素，我们可以利用这些元素组合出自己想要的场景。小元素还可以修改修改颜色和大小，可以快速出图一个简单的小场景。做好之后可以直接免费导出，支持 PNG 和 JPG 格式。Customer Journey Map「网站地址」 https://wireframepro.mockflow.com/buildcustomerjourney/Customer Journey Map（CJM），即用户旅程地图，即用可视化的方式，展示用户在使用产品或者服务时整个过程的体验和感受。通过这种方式，设计师能清晰的了解到用户在产品使用场景中的行为、需求以及产品痛点，从而有针对性的给出解决方案或者进行方案调整。Customer Journey Map 这个网站就是专门制作用户旅程地图的，网站提供常见的 CJM 模板，也可以自己从空白开始建立。制作 CJM 所需的个人信息、时间线、场景、情绪、所需设备、交互方式等模块网站内都有，模块可以删减数量、修改大小和内容。制作完成后可以免费导出 PNG 格式，对于做交互的设计师来说是非常好用的辅助分析工具。Deepl「网站地址」 https://www.deepl.com/translator还在为英译中时翻译结果生硬不通畅而苦恼吗？那就快试试 Deepl 吧。Deepl 是一款基于机器深度学习的多语种翻译工具。它最大的亮点就是翻译出的内容逻辑通畅，语句衔接在自然，堪比人工翻译，不会出现生硬的“翻译单词”情况，所以非常适合长文本翻译。作为一款国际化的翻译工具，Deepl 不仅擅长英译中，还非常擅长德语、法语、意大利语等其他语种的翻译，能做到翻译出本土化特色的效果。Deepl 有网页版和应用程序，网页版一次性可以翻译 5000 字的内容，同时支持导入文档和 PDF 进行翻译，都可以免费使用的。以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~我是夏花生，我们下期见。本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software
网格 结构 标题 写在前面网格系统有很多小伙伴都问过，我也考虑想详细讲解一下这个东西，但是说起来难度真的不算特别小。毕竟《平面设计中的网格系统》用了将近二百页的图文才说清楚的事情靠我一篇文章的简单总结肯定是不到位的。其实我也很怕大家学出偏差，感觉会才是最大的错误，因为这样就不会再去深入学习了。所以我根据自己的理解出这样一个压缩版的网格系统，肯定不如原版严谨，但是绝对好用，而且能加深你对于结构思维的理解，好啦闲话不多说，下面开始今天的内容。结构思维海报设计结构思维是非常重要的，我们这个丐版的网格系统就是基于结构思维的使用。下面列出的就是结构思维的步骤图。光看文字肯定不知道说的是啥，下面给大家找作品反推一下。首先划分网格，这个网格划分的越多整体设计就越精细，因为可分的模块就越多，没有什么具体的数值，是 3*3 的 4*6 的等等都无所谓。如果有小伙伴不知道参考线怎么建立可以看这个步骤图，已经给大家罗列好了。然后下一步我们就要进行分析了，乍一看你觉得它是几乘几的？左右差不多显然就是 1:1 的比例，整体就是一个 2*6 的简单划分。那么重点来了，我们基于这个网格结构先做大块的结构划分，上下先分开，上面两个块面并在一起，然后下面再左右分开进行细分，图文分离，最下面放一些合作商。最后一步就是在细分后再次细分，可以看到就是不断割开网格的过程。那么再来一个找找感觉。这个显然左右就是 1:2，所以网格的划分基本就是 3*4 左右，这个数值其实也不是那么精确，所以大家一定要明确一点，丐版的网格系统不是为了解决精确的设计位置，而是解决大致的位置和培养结构思维。这个就是他的结构流程图，可能它原本不是这么想的，但是这个结构思维可以帮助我们理解~这个是咱们简易版网格系统的使用要点，这个图我建议保存一下。案例实操运动行业的设计选择暗色调聚焦感会更好，设计整体不宜太稳定应该尽可能灵活的综合设计元素，可以考虑使用对角构图。信息分组做好，按照标题组，功能组还有阅读组划分。基础调整画面细化我们选主体的时候一定要注意，要选用具有明显动势的图片。修改背景色为暗色调，我个人建议不要使用纯黑色。解决右上角的结构框，把标题摆放上去，大致给空间占上就可以。组合一下标题，压缩标题左侧的结构框，这里要提到一个关于网格的点，就是区域内的结构划分越多越复杂，整体也就越丰富，难度也就更大一些。把主体和其他信息摆放在画面里。移动块面摆放信息。把信息符号化占据结构的空间，经常有小伙伴问我如何做信息符号化，除了大量的参考就是要知道你的空间需要你把信息做到什么方向去。刚才内文被挤得没位置了，直接改变排放趋势变成竖排放在主体的左侧。添加信息把标题左侧的小空间解决。设计做到这一步就需要分析问题，蓝色区域显然是形式感不足因为它是标题，标题没刻画起来而让其他的信息形式丰富，会造成其他信息“抢镜”的情况。红色区域就是空间问题了。给标题添加一些形式，这里大家思考一下我这么设计的理由是什么。主要就是为了让标题和主体有一个能建立起一个除了前后叠压以外的关联关系。首先是人物的手臂处做了一个红色的环境受光处理，人物的上衣修改为红色与标题建立色彩的关联，这就是强化标题时候的思路。后面有很多小的碎的空间，其实就不如用一个完整的大块叠压解决。把弄好的强化形式放进主体里，可以看出画面一下就完整了很多。人物的腿部加上我们的标语，后面的强化形式可以直接延长调整图层顺序到主体的一条腿前面，这样能让背景和主体建立连接还能承载信息增加空间感。稍微强化一下背景的光感，增加层次。用撕纸的素材来解决这些细碎的空间。整体添加一些做旧的肌理，可以让画面看起来更有质感。最后加上一个样机，就完成了~写在后面本篇文章我们学习了如何处理一张人物海报，知道了很多画面设计时候的细节以及信息符号化的方法。有任何问题都可以扫下面的二维码加我好友，和我一起讨论交流设计。如果喜欢视研设的内容，可以点赞非常感谢。今天的文章就先到这里，我们下期再见。新手如何做好海报设计？试试网格这个神器！大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/simple-grid-system
网格 海报 海报设计 大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。网格系统是现在排版时常用到的一种设计工具，特别在画册、书籍领域，网格系统是不可或缺的。在海报设计中使用网格，能使版面看起来更加清晰有条理，易于阅读；并且横平竖直的参考线让排版有规律可循的，让我们可以避免无用的排版试错，提升设计效率。针对网格设置的这些问题，我特意请教了优设设计总监兼金牌讲师@全蛋老师，将全蛋老师的回答总结成2个疑问解答和1个解决方法，帮助大家更好地理解网格对海报设计的意义，一起来看看吧~对网格系统还没有概念的朋友可以看这里提炼14本书的精华，写下这份超全面的网格基础手册网格系统是针对于平面的，而不是网页设计和移动端的设计。阅读文章 > 网格系统只是一个有效的辅助工具首先我们需要明白网格系统只是众多辅助海报设计的工具之一，而非必不可缺的部分，毕竟海报不是有网格系统之后才有的。以往的设计师在实践中发现使用网格能更好更快地进行排版，所以提倡使用，但没有网格我们也有其他办法设计出好看的海报，完全不使用网格进行排版的优秀海报也是非常多的。没有遵循网格的海报设计海报设计中最重要的是正确清晰的信息层级海报设计最终为了清晰准确地传达信息，对海报的信息层级进行正确排序是第一位的。做好这一步，我们才能确定每个层级在海报中的版面占比大小，再结合网格系统进行的排版，自然事半功倍。如果你连海报中信息的重要程度都没有分清就到网格中进行排版，最终效果是不会理想的。版式设计中的文字层级怎么学？来看高手的实例演练！编者按：看似简单的版式设计，细节其实非常多。阅读文章 > 如下图，两版海报虽然都是用了网格，但是由于左边的海报信息层级排序错误且区分不明显，导致最终的排版效果并不好。还需要注意的是，海报设计中的网格系统没有书籍排版中要求那么严格，不用苛求排版要完全按照网格来。在利用网格进行海报排版时，如果感觉元素大小调整到了视觉合适，但是没有契合网格，那也没有关系，只要保证信息层级是对的就可以了。如果你不确定一个元素的位置和具体尺寸，那就按照网格来，整体完成后再进行微调。这就是网格辅助设计的意义。使用斐波那契数列设置网格了解以上两点之后再来看网格的设置，你是不是觉得这个问题也没有那么复杂了？页边距留多宽、网格设置成多少行多少列、间距设置多宽并不是定死的，而是以你的海报内容或者你自己的习惯为主。如果你用心分析过一些优秀的海报，就会发现它们的网格设置非常灵活多样。关于网格具体设置成多少才合适这个问题，全蛋老师表示并没有标准答案，而是要以自己的需求为准。如果刚刚接触海报设计没有把握的话，可以使用斐波那契数列作为参考。斐波那契数列又称黄金分割数列，数字排序为 0、1、1、2、3、5、8、13、21、34……由之前的两个数相加得出第三个数，以此类推。我们在设置网格的时候，行数和列数就可以用其中相邻的2个数字为准。如3行5列、5行8列，或者5行3列、8行5列等。但这也只是仅供参考的网格设置方法，在设计中还是要以你自己的实际需要为准。所以海报设计中的网格并不复杂高深，它是一个有效的辅助工具，需要我们在理清正确的海报信息层级后再使用，网格的行列数及间距宽度设置都以海报内容和个人习惯为主，可以灵活调整。弄清楚了这些，网格系统不仅可以帮你提升海报设计的效率，还是成为你分析学习优秀海报的设计原理的利器。如何在PS/AI中快速设置网格思路和方法都讲完了，再顺带提一下如何在设计软件中快速设置网格，帮助还没有接触过网格系统的朋友更好地学习。【PS】按需求新建一个文档，点击【视图-新建参考线版面】，然后设置行、列、页边距，间距。快捷键Ctrl+; 可以显示或关闭参考线。【AI】先用矩形确定好版心，然后点击【对象-路径-分割为网格】，勾选【预览】按需求设置自己的行列数和间距。Ctrl+5将网格转为参考线，快捷键Ctrl+;可以显示或关闭参考线。总结海报设计中的网格并不复杂高深，它是一个有效的辅助工具，需要我们在理清正确的海报信息层级后再使用，网格的行列数及间距宽度设置都以海报内容和个人习惯为主，可以灵活调整。弄清楚了这些，再用网格就会觉得轻松顺手很多。以上就是今天的内容分享，希望对喜欢海报设计的你有所帮助。如果你还有关于网格和海报设计的问题，欢迎加入优设官方设计交流群，我们一起探讨，入群二维码见下图；当然也可以直接在评论里说出你的看法，还有机会收到优设送出的精品设计书籍哦~更多海报设计知识新手如何做好海报配色？我总结了这5个即学即会的方法！配色是海报设计的重点之一。阅读文章 > 如何让画面更精致？注意这6个版式细节这篇文章我们来讲讲在设计手机详情页时，会经常用到的一些排版小细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/grid-settings
网格 布局 页面 网格的历史说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。页面布局页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。网格的作用及概念要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。接下来通过几个图例来详细解释下。列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。8pt 网格介绍有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px为什么一定要用 8pt？使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。文本如何设置？基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。例如：small = 8pxmedium = 16pxlarge = 24pxx-large = 32px……页面布局类型普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。最后用图例展示下如何利用网格系统在网页设计上进行页面布局。在 figma 上的设置如图：我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。https://www.figma.com/community/file/1076073453929437640/8pt-web-grid最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。参考文献：The Comprehensive 8pt Grid Guide：https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179UI/UX Design: Setting Up Grids：https://uxplanet.org/ui-ux-design-setting-up-grids-d8b3fd9271fbmaterial design：https://material.io/designHistory of grids: from the printing press to modern web design：https://webflow.com/blog/history-of-gridsHistory of the design grid：https://99designs.hk/blog/tips/history-of-the-grid-part-2/网格系统真是太好用了，6个方面帮你早点学会！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「iU梦工厂」 文件名 如何下载使用 文件大小 提取码 下载来源 栅格 表格插件神器1.05MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-grid-system
网格 工具 颜色 之前已经和大家分享过很多做渐变的网站，可以非常方便的提取好看的渐变配色。但是想做出一张亮眼的渐变背景，只有双色渐变肯定还不够。今天就向大家推荐一款在线生成酷炫网格渐变的神器——MESH·Y 。它操作简单但效果极佳，一键就能生成一张质感十足的网格效果渐变背景，一起来看看吧！基础操作MESH·Y 的操作界面简单明了，主要分为 4 个部分：1. 颜色修改可选 4 种颜色。如果只需要 3 种颜色，把其中 2 项设置成同一种颜色就可以了；2. 网格模型随机切换颜色选好之后点击黑色的「Randomize」，可以随机切换网格模型，得到不同的渐变效果；3. Mesh Id即网格编号，如#757。MESH·Y 一共有 1000 种网格模型，每一种都有对应的编号。如果你在随意切换网格效果的时候，发现有一款自己特别喜欢的网格，就可以记下它的编号，下次想用这个网格时，设置好颜色后直接在「Mesh Id」处输入对应的编号就可以了；4. Save 保存MESH·Y 支持导出 PNG 格式的图片，而且导出时可以自行设定图片尺寸，最大支持 3000*3000px，非常灵活。另外界面右侧有 6 款渐变模板，如果觉得其中有喜欢的可直接选用，修改一下颜色就可以了。使用技巧下面结合我们之前提到的一款选色神器 Picular 为大家展示如何快速做一张好看的渐变 Banner。色彩界的 Google！给关键词就能帮你找配色的Picular一般配色工具大多提供很多调色盘，让使用者从中找到适合自己需求的色彩，毕竟色彩有时候不容易描述。阅读文章 > 1. 确定主题和配色近来天气渐渐变暖，春天的脚步越来越近，就做一张有春天气息的 Banner 吧。提到春天，最先想到的就是生机，万物萌发，百花盛放。可以在 Picular 输入关键词「flower」，提取一组有关春天的配色。2. 制作渐变背景将配色方案运用到 MESH·Y 中，选择喜欢的渐变配色结果。（这里我用截图工具悬浮在 Picular 做好的配色方案，然后直接用 MESH·Y 吸色工具复制颜色)选几张喜欢的保存下来3. 构思排版将背景放进 AI，发现中间那张有些像青山的形象，可以延展做一个春日野营的宣传 Banner。将背景确定好，加入一些花朵蝴蝶的意象元素，确定好文案进行排版就可以了。总结网格渐变做出的渐变丰富有变化，非常适合直接拿来做背景。但是在 AI 中用网格调出好看的渐变需要一定的时间，而且对配色没有把握的小伙伴来说，调出好看的渐变配色也是一项有难度的工作。MESH·Y 中有 1000 种网格模型，可以极大的解决上面的问题，省时省力。结合快速选色工具 Picular，让渐变背景的效果更符合我们的主题，对喜欢用渐变的小伙伴来说是绝佳的设计工具。附上官方网址：「MESH·Y 官网」 https://meshgradient.in/「Picular 官网」 https://picular.co/感兴趣的朋友赶快收藏，下次设计的时候试一试吧！筛选了100个配色工具后，我挑出了这25个！UI 设计中，颜色几乎是最先被感知到的设计元素，好的色彩感知是成为一个优秀的设计师的基础，配色工具层出不穷，辞典酱在筛选了100多种配色工具后，精选了这25个，相信必然帮到你！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/mesh-y
人物 网格 画出 前言：人物的画法向来在插画界中都是风格各异的，今天我们创作的这个人物相对会倾向正常比例，找准她的身体比例结构表达到位即可，利用网格构图来组合画面，将会让扁平风格看起来更具有结构感。在整个流程中，我们会同时用到AI和PS两个工具，这两个工具共同属于Adobe的软件，应用上彼此更容易沟通。我们会用AI起形，用PS来描绘光影，相比以往全部采用AI来绘制矢量插画略有不同。准备工具：Photoshop (2019)Adobe illustrator (2019)数位板草图构思无论是设计也好还是插画也好，都总是少不了从草图起步，这是idea的来源。实际的画面可以不一定依据草图，它只是给出一个大方向。绘制人物头部STEP 01绘制基础形从AI开始，我们打开AI，新建一个文档为1600*1600px，然后再进入到【编辑>首选项>参考线和网格】，在面板中设置如下参数：STEP 02我们开始要学会用网格来辅助造型，首先显示出网格，这里要进入【视图】，然后单击【显示网格】，并且勾选【对齐网格】。有了网格的辅助，我们的画面就会看上去有种内在的稳定感。STEP 03接下我们来开画，人物的侧脸，把草图拿来看了，然后扔掉。警告：不要完全去勾草图，否则你会错过一次练习造型的机会。人物侧脸的左侧是最终呈现的线条，所以注意这条边要对齐网格，并且注意它的轮廓表现。而这个形状的右边那条边由于最终会被头发等形状所遮挡，因此随意画出即可。色彩可以填充为肉粉色，作为皮肤的色调。STEP 04接下我们要继续画出头盔，头盔的步骤如下图所示：STEP 05把头盔放到人物的脸部上方，将它略调整为与网格对齐，人物的头部完成了一大半。STEP 06接下绘制人物的头发，头发的部分我们打算用矩形来生成。下面是用矩形做头发的思路：利用矩形来拼成头发的形状，矩形本身是直角，但是经过圆角拉伸后就变成了圆角矩形，这时就很容易做出头发的飘逸的效果，又不失扁平人物的风格表达。过程如下图：STEP 07把上一步做好的头发，连接到头部。这里需要补充一个色块，并且做好圆角的处理。要做到自然而然，不要接得太生硬。该调整的地方继续调整。到这一步，头部就完成啦~再检查看看头部的视觉是否正常。画出人物身体身体的部分要画出来，首先要明确人物的头身比。当然我们不是再现真实的人物，所以允许头身比可以有部分出入，但是基本上还是按照6-8头身的比例。这个比例具体是指什么意思呢？就是我们的身体高度刚好是头部高度的6-8倍。下图为7.5头身比例图：STEP 08我们画身体也是从直线开始，利用钢笔工具画直线，用直线来勾勒造型，注意对齐已有的网格线。STEP 09然后把部分的直角转为圆角。STEP 10再画出右边的手臂，注意比例和对齐网格。然后再把部分尖锐的角转为圆角。STEP 11手部的画法很简单，也是从矩形开始。然后把部分直角转为圆角。STEP 12最后把头发的部分拉大一点，然后把所有的细节都整理一遍。STEP 13画出女生的小裙子，也是从直线起步，最后把裙子边缘转为圆弧。STEP 14两条腿的画法依然是利用钢笔工具，注意小腿肚可以给个弧形来表现。STEP 15画出鞋子的部分，并且增加鞋子的滑轮。STEP 16把人物的膝盖的部分的细节再进行细化，如下图到这一步，整个人物的基础大型就完成了。继续丰富装饰细节STEP 17在目前的基础上给人物增加小细节，这些小细节可以增加人物的生动感。比如我在这里给人物添加了头盔、腰带、鞋底以及长筒袜的细节。这部分纯靠想象，大家可以稍微放飞自我。利用AI的形状生成器工具就能生成不同的形状。STEP 18长筒袜的图案可以画出来，让画面更丰富。首先我们要画出一条线，这条线的描边为80px，然后进入【效果>扭曲和变换>波纹效果】，面板参数如下所示。STEP 19将上一步所做的形状进行扩展外观，变为封闭的路径形状，然后应用到长筒袜的白色形状上。多余的部分用形状生成器工具删掉。人物的塑造到这一步就完成了画阴影提质感——一切交给PS我在扁平插画课里给学员们所介绍的增加光影的方法一般来说是用AI完成的，但是其实增加光影，PS也能做到。所以，我们这次就用PS来增加光影表达。STEP 20可以打开PS，新建一个1920*1200px的文档，然后将AI所画的对象复制粘贴过去。粘贴时选择“智能对象”，并且增加一个纯色背景，背景色为暖粉色。STEP 21这时利用数位板/手绘板，开始对人的皮肤的部分增加阴影，用普通的画笔即可。新建一个新的图层，然后设置为下面那个图层的剪贴蒙板。在新图层上添加阴影色块。利用【选择>色彩范围】，首先选中皮肤的颜色，这时记得要选中人物的图层。然后在新图层上开始绘制阴影区域，颜色稍微比皮肤的颜色略深。由于有蚂蚁线选区的控制，开始涂阴影的时候就不会溢到其他部分。除了阴影，还可以增加高光的部分，让画面看起来更立体。画笔选择“硬边圆”就好。STEP 22利用以上所介绍的步骤，开始对其他的部分都分别画上阴影和高光。因为画的过程是非常自由的，只需要掌握基本的原则即可。这里不再详述每一步，下面是需要注意的要点。可以利用画笔画出部分细节。STEP 23最后把长筒袜的部分也做出阴影表现，这里的处理手法和上面略有不同。因为这里涉及的颜色较多，所以我们不能用单色的处理手法来提供选区。此时需要再新建一个剪贴蒙板，利用钢笔工具来生成长筒袜的形状，然后用棕色涂出阴影部分，再降低整个图层的透明度。STEP 24追加颗粒感的纹理，再新建一个图层，创建剪贴蒙板，继续自由发挥。这时可以选择【特殊效果画笔】里的“喷溅笔刷”，或者选用其他你自己私藏的颗粒感笔刷，这里不是那么绝对。STEP 25增加了颗粒的效果，可以让边缘变得也具有这种生动的手绘感，因此这时可以再新建一个图层，利用边缘比较有机的画笔来表现，这里的图层不需要创建剪贴蒙版。其实插画不一定要加颗粒，增加颗粒是为了提升趣味感。大家可以对比一下，增加颗粒前后。STEP 26最后通过色彩平衡等调色工具来对整体的色彩进行调整，并为人物增加文字背景，将文字也画出阴影的效果，冲淡背景的单调。并且为整个插画增加点状图案。最终效果如下：写在后面：后面为插画增加文字和图案的部分，由于是即兴发挥，所以不再多累述。你可以增加图案，也可以保持原状。这部分可以发挥你的原创来绘制。原文链接：ifeiwu
矩形 网格 字母 这种标志简约又能突出主题，2.5D效果显得比较有科技感，是多数新手设计师做标志设计的备选方案，今天我们就使用用AI制作2.5D风格的LOGO图标，希望大家可以喜欢。先看看效果图:那么下面就来讲讲一讲这种2.5D的标志该如何制作吧首先我们使用AI新建一个1280*720的画板双击“矩形网格工具”进入工具参数设置做如图设置在画板上按住“Shift”键拖动出一个正方形的网格按住“Shift+Alt”键向左拖动这个网格以复制它按“Ctrl+D”重复一次这个操作这样我们就获得了三个一样的网格选中这三个网格按键盘上的“Ctrl+5”就能快捷把他们变为参考线我们先来绘制第一个字母使用“矩形工具”沿着参考线绘制这样的矩形这里我们绘制的是一个字母C选中刚刚绘制的所有矩形在“路径查找器”中将他们“联集”然后为得到的字母C替换一个填色下面我们要制作B这个字母来到第二个网格先绘制一个这样的矩形接着在上方绘制一个这样的矩形使用“路径查找器”中的“减去顶层”这样就扣去了中间的部分这里我们切换成“直接选择工具”选中上下两个角点将这两个圆点向内拖动变为一个圆角
落霞与孤鹜
飞翔的企鹅
表哥
张大湿
在路上
