经验观点 2022年06月17日
0 收藏 238 点赞 2,450 浏览 538 个字
摘要 :

设计尺寸一直都是设计师最热衷讨论的问题 间距Space 那么我们今天讨论到一下设计中间距的设计,间距设计背后的逻辑以及设计尺寸如何去定义。耐心看完,你一定有所收获~ ……

设计尺寸一直都是设计师最热衷讨论的问题

间距Space

那么我们今天讨论到一下设计中间距的设计,间距设计背后的逻辑以及设计尺寸如何去定义。耐心看完,你一定有所收获~

设置界面元素中的间距与尺寸提供指导,减少决策成本。同时也方便开发工程师理解。该指南包含容器间距、横向(水平)间距以及纵向(垂直)间距,适用于元素、组件以及页面布局的设计Web端大多数应用场景下间距的值为偶数(4的倍数),尽量避免出现奇数值。

设计原则


  • 通过间距差异,准确表达信息与信息之间的关系:内容越相关,间距越小。
  • 通过间距差异,准确体现信息间的主次关系,同时传递给用户既符合逻辑又舒适的信息读取节奏感


间距尺度表

间距尺度的定义,跟设计系统中文本紧密关联,也就是 text-based-size。同字体规范,间距同样以 16 px作为基准参考,以 4 px 作为起点及最小增长单位。

容器间距

容器间距以盒子模型为基础,基本类型:等宽、矩形。

等宽

矩形

间距规范不适用的场景

间距规范在某些特定场景下不适用,此时不需要严格按照间距规则来设计,根据实际规则设计间距即可。

栅格:优先考虑栅格规范,再考虑间距规范。

  • 居中:间距往往由容器实际大小决定,因此不完全受间距规范限制。

  • 自适应:可能会按比例缩放间距。


Powered by Froala Editor

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.jizhisheji.com/140292.html

相关推荐
精选
互动投影的应用所表现出的四大特点
互动投影是集合了商业价值与娱乐特质的人机交互形式,其因绚丽的展示效果而深受到大众喜爱,它的实现主要依靠捕捉设备对目标影像进行实时的动作捕捉,…
日期:2022-06-26 点赞:196 阅读:2,748
精品
提高UI界面高级感的排版实用技巧
UI 界面中,排版设计同样重要。如何将至关重要的信息,有效地传递给用户,这是界面本身的职责,而在绝大多数时候,这通常是靠文本来完成。 这就是…
日期:2022-06-26 点赞:177 阅读:3,980
最新
汽车二手车租车小程序定制开源源码开发制作模板的UI功能设计
汽车二手车租车小程序APP定制开源源码开发制作模板需要哪些功能?——龙兵科技 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐…
日期:2022-06-26 点赞:160 阅读:3,853
最新
房产报备新房二手房租房等小程序源码制作UI功能如何设计功能?
 龙兵科技,自主研发,源码交付,专注软件研发10年,各行业源码齐全网络销售公司该如何推销出去一个产品?是不是要针对客户的需求去讲解…
日期:2022-06-26 点赞:282 阅读:1,598
必看
机器人情感化设计
前段时间接到了一个企鹅岛的机器人项目,项目目标是要传递“机器人友好”的概念。那我们要如何从设计的角度去传递这个概念呢?友好其实是人对事物的一…
日期:2022-06-26 点赞:90 阅读:4,768
推荐
企业展厅设计用多媒体的方式实现有何帮助
  企业展厅是企业对外宣传的一种重要形式,其通过数字沙盘、弧幕影院、多点触控、全息投影等多媒体互动技术,让用户更好地参与其中,给用户带来沉浸…
日期:2022-06-26 点赞:280 阅读:4,664
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站