本文探讨了Web UI设计师在面对不同电脑分辨率时如何进行响应式UI设计。介绍了栅格化设计系统对网页规范性的提升，以及前端开发中栅格布局的应用。UI设计师需要依据设备分辨率设定断点，利用媒体查询调整样式，确保在不同屏幕尺寸下提供良好用户体验。同时，强调了断点设置的灵活性，根据页面内容和复杂性来确定所需的设计套数。
“ 再做网页设计时候，关于适配，初级设计总是在纠结：“要做几套设计呢？做多大尺寸的设计呢？如何和前端小哥哥对接呢？”等等问题。”
当我们拿到网页设计需求时，首先要确定是不是要单独开发移动版本。因为响应式布局兼顾了手机端适配问题，但是受加载速度、手机浏览器、栅格化系统的限制设计发挥的自由度、等的影响很大。
01
UI设计——栅格化设计栅格化设计：是针对网页设计师。主要是为了提高网页的规范性。
栅格设计系统：(网格设计系统，标准尺寸系统、程序版面设计)是一种屏幕设计的方法和风格，运动固定的格子设计版面布局，其风格工整、整洁。
栅格化布局：针对前端开发人员，指前端攻城狮使用的css框架，来实现页面的响应式布局。
设计师使用纵向的栅格(列)让页面元素垂直方向上对齐，使用横向的栅格(排)让元素水平方向上对齐。设计师结合基准网格(8pt)和纵向栅格(12栏 16pt)进行设计。
02
响应式ui设计前的准备基于设备的逻辑像素进行UI设计——设计开始前UI设计师要根据桌面和平板手机分辨率大小
最低0.47元/天 解锁文章
扫一扫
2951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
