2024年网页栅格系统设计 篇1
你说的页面指网页？用bootstrap框架吧，这就是一个栅格系统框架
2024年网页栅格系统设计 篇2
在我看来没有具体的网格原则，需要根据具体的使用场景来定制网格，比如平面中的30网格系统，摄影当中经常用到的9宫格，网页中的12栅格系统。但是万变不离其宗，他们的目的都是为了画面的秩序和稳定，将一个面平均分成几份，将元素有规律的放在网格当中。只要你喜欢，你可以随心所欲的定制自己的网格，只要它是遵循一定的数学规律，当然你也可以打破它，故意制造不和谐的元素在里面，相信你的能力将进一步提升。
2024年网页栅格系统设计 篇3
保持内容的组织度。在栅格系统下，元素从左到右，从上到下都清晰明了地排布起来，让布局保持一致性。
使得设计更有效率，因为规则化的栅格让各种UI元素的排布都规则化。
让网页不同的页面看起来都保持一致性
让元素和元素之间的间距都一样，让整个设计保持整洁
2024年网页栅格系统设计 篇4
adobe photoshop因为其强大的功能，被许多设计师而喜欢，特别是以编辑或者是平面工作为主的设计师。但是有时候，他的功能还是不够丰富，特别是针对ui设计师还有那些网页设计师。可喜的是，仍然会有一些很多优秀的拓展插件，去弥补ps的不足，可以帮助我们在实际工作中，更有效率的去完成任务。在这篇文章中，我们收集了一些网页设计中必备一些ps插件，你可以免费下载他们去使用。
1. Velositey
Velositey是一个可以快速创建网页栅格模板的插件，它包含超过60个模板，你可以下载去使用。并且与ps的兼容性很好，不会去限制你的工作流程。它还包含预生成兼容bootstrap的1170个网页栅格系统，相信很多设计师 还有开发者都会喜欢这个工具。
2. Retinize It
Retinize It 有三个动作可以使用，1x选择图层/组去切片；1x,2x选择切片（1倍图或是2倍图）；1x,2x,3x去选择切片。相信很多ui设计师在切图的时候都会做适配的工作，这三种选项足以满足工作的需要。3. Random User Generator
这个插件可以帮助你快速生成一个用户信息，包含姓名，性别，email,地址，密码等4. guide guide
非常推荐这个插件，可以快速设置参考线，形成网格系统
5. Renderly
Renderly可以帮你输出PS中的不同模块和元素。更重要的是，还可以轻易地将微调过的元素单独导出。所有你所需要做的，就是将图层按照Renderly的方式来命名。6. Composer
这个插件支持cs5以及更高版本。是一个很好图层管理工具，你只需要去选择你想要调整的图层/组，然后去更新他们的图层样式，位置以及可见性等7. coolorus
一个很经典的配色插件，在插画中经常用到，可以快速生成对比色，邻近色，互补色。
8. Layrs Control
Layrs control 就像名字所示的那样，他可以帮你修改和管理你的图层，这个插件可以重命名，删除未启用的图层样式，找到类似的图层或者组，将图层转变为智能对象；9. Cut&Slice Me
这个也是一个切片工具，可以为不同的设备导出不同的切片资源，在文件夹最后加上「@」，扩展会导出内容为 png 图片，并自动裁切透明像素。
10. Flaticon
这个插件可以帮你快速的找到一些扁平的icon,它提供超过30000+以上种类的icon，并且 格式包括png,svg，psd.
11. psd to svg
ps里面没有导出svg格式的选择，这个动作可以在选中的矢量图层上面，导出为svg格式
12. White Balance / Highlight Recovery
自动调整图像的白平衡
13. CSS3Ps
这个基于云端的插件，可以快速导出图层的css3样式，相信很多前端开发会喜欢上这个工具。14. Mr. Stacks
和css3ps 类似，可以导出图层的css3样式15. Long Shadow Generator
长投影生成工具，扁平化，加上长投影，设计师的另一种选择。
如有需要可以私信我回复“插件”获取软件，回复存在延迟，有问题及时反应
2024年网页栅格系统设计 篇5
5分钟快速了解UI设计规范
每位UI设计师，想必都有一套属于自己的设计规范，今天我就来教大家在5分钟快速建立一套自己的设计规范。
我今天讲苹果版本的（尺寸：750*1334），因为现在很多的设计师就做一套UI图，安卓版本的基本就已经省略掉了，原因很简单，是的没错，就是节约时间哈。底部栏与顶部栏的规范
下面第一张图是底部栏的设计规范，第二张图是加图标展示，底部栏高度为49px，在我以往的设计工作经验中，常见的分为3种情况，3个图标、4个图标的、5个图标的，不管是那种我们应该按照规范来，这样前段在开发时就会比较方便，按照几等分（n/375），底部的图标我习惯用28*28px（尺寸：375*667，最后导两倍的图给前段开发），底部文字都用10px。
底部栏
接下来我们看第三张顶部栏的设计规范图，顶部栏的高度一般为64px，标题文字我喜欢使用18px,不过还是要看自己的设计风格。
顶部栏
字号与字色的规范
字号的大小使用也是非常的重要，之前我的一个客户，希望我能够把字体设计大些，他的原因是字号越大会体现一个企业的大气感，其实这样往往适得其反。
你们一般在进行设计时，会使用几号字体呢？正文我最喜欢用的是14号、16号，我已经把我经常用的字号整理出来了，大家可以看下面的图哦。
字号
字色
两侧间距及模块上下间距的规范
在设计时，我们有必要两侧留间距，常见的有14px、16px、24px，上下间距常用10px,在开始做UI图的时候，最好确定好一个值，在后面设计其他页面的时候，都可以用同一个值，保证自己设计的风格，不会让人误以为随便留的。
两侧间距
模块上下间距
按钮及模块高度
按钮是UI设计中最常用的一个元素，几乎每个项目都会有它的出现，在不同的UI设计中，Button本身会根据主体风格制作，不同大小的按钮样式会有所不同，下面是我画出来的几种常用的按钮大小。
按钮
模块高度
图标及辅助线的规范
在画图标的时候，务必将图标限制在正方形中并创建为组件，这样既方便以后修改也方便开发。图标
16*16:非可单独点击；22*22:最小可单独点击按钮；24*24：表单小图标；28*28:底部标签栏，其他的视情况而定。
辅助线
UI设计中我们看见的辅助线一般分为两种：投影型、画线，我个人认为投影型是非常实用的，看起来不会那么死板，而且有一个好处，可以确定文案的位置，保证了设计的规范性，细节可以让整体看起来更完美。
图片、视频大小的规范
图片常用的比例为1:1、2:1、4:3；视频常为16:9，这里我讲的是我平常经常会用着的尺寸，还有其他的情况就个人而定哦！
总结：我们在平常的设计中只要能够把握这些设计的规范，对你所做的产品足够了解，就能高效的设计好的作品啦，唯有坚持，方能不负所爱，加油！
打字不易，欢迎点赞及评论，说说你们在UI设计中常用的规范是什么？
点击头像关注我，私信回复007，免费获得UI设计相关规范源文件，谢谢支持！