恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
产品UI设计中的空间
0.0°
2019-04-09 自译外文 经验/观点 原作者: Brendan Sharman 举报 2813 3 16 0


空间是具体事物的组成部分,是具体事物具有的一般规定。


眼睛可以看到、手可以触到的具体事物,都是处在一定空间位置中的具体事物,都具有空间的具体规定,没有空间规定的具体事物是根本不存在的,因此它确实存在,并时刻影响着设计师在设计过程中执行的每个环节。


因此,本文将详细阐述空间在产品UI设计中的使用方式以及对界面设计的影响作用。

Image title


1.周围空间


在UI设计中,我们通过考虑板块与板块的间距,元素与元素之间的放置,来引入空间这一概念。


当元素放在一起时,他们可以视为一个单一元素或者一个群体元素,那么元素之间的距离在某种意义上来说直接影响界面整体的美观度,整齐度,一个合理的空间安排,将会增加可用性并减少产品的认知负担。在移动端产品设计中,我们也可称其微空间。


元素间距过于松散会导致用户视觉混乱,缺乏清晰结构。收紧相关元素之间的间距可以提高连贯性并减少混乱。


Image title

使用邻近组元素和间距来创建订单


空间的存在,使设计中产生留白,这是主要板块或元素之间的负空间,决定设计中的整体美感,不但可以提升视觉美观程度,而且可以很好的指引用户在整个页面的关注程度,元素周围有充足的空间会引起用户视线的停留。


在设计中,我们可以改变板块之间的距离来更清晰的呈现界面的层次结构,有所突出主要内容,提高连贯性,减少混乱,并通过扩展页面上单独元素的数量来引导用户的注意力。


2.占用空间


与负空间相反的空间我们称之为正面空间或占用空间,在设计中,我们不仅要考虑元素之间的空间,而且要考虑元素本身的大小,通过改变元素的大小可以合理控制页面视觉布局,让其产生层次结构。


无对比,不设计。元素大小的对比是创造有趣设计的一种方式,它往往会让页面提升设计感,也是影响设计好坏平庸差异的因由之一。


Image title

不同文字的粗细大小使页面产生对比


布局中有太多不同的视觉可能会让整体杂乱无章,一个有规则设计,是在大约3-4个不同元素或者模块来组成,可能是大标题,段落文本,图像和一组按钮或者链接。


3.内部空间


元素内的空间包含容器的填充(比如:按钮的填充)和文本的间距(比如:字符间距和文本段落),这种空间我们称其为内部空间,主要控制设计的可见性,但是同样也是创造视觉感受的一种方式。


a.字符间距产生的空间


字间距是文本之间的空白,对于可读性而言,太紧或太松都会影响字体之间的空间,注意这里字符间距是字符之间的整体空间(不要与字距混淆),在文字空间排版中,分享一个小技巧:正文文字大小设置为文本大小的150%,可满足于用户的可访问性。(之前有详细介绍字体排版的设计参考,所以我不会在这里详细介绍,但如果你想了解更多,我建议阅读这篇文章http://www.ui.cn/detail/367559.html


b.按钮填充和描边产生的空间


填充元素和描边元素之间产生的空间,在UI设计中依然很重要,我们可以给按钮填充颜色,可以给主要元素填充颜色,如果在设计中,我们遇到要很多按钮或者元素要展示,通常按钮填充的宽松比较安全,而过于紧密的填充则会使界面显得杂乱无章,难以区分各个元素。


Image title

板块之间的填充间距产生的空间


4.总结


设计师可以通过空间的改变来提升界面设计感,间距影响界面的美观程度,希望每一位设计师在UI设计中都可以根据自己的产品来判断要如何控制界面的空间体验,如果这篇文章对你有帮助,那就点个赞,么么踹。


原文地址:https://medium.com/@bsharman/space-in-ui-design-129eab618bc8

原作者:Brendan Sharman

译者:栗子

自媒体:栗子的产品笔记




更新:2019-04-09

收藏

3人已收藏

爱笑的李小晗

产品经理 | UX设计师 | 百万时尚博主

  • 8

    作品

  • 33

    粉丝

  • 96

    关注

  • 国医乾坤品牌视觉设计方案
  • 妙优车V2.0 产品设计
  • 今天,简单聊聊视觉层次吧?
  • 日常工作,我是这样做竞品分析!
相关标签

    猜你喜欢

      2019-04-09 自译外文 经验/观点 原作者: Brendan Sharman 举报 2813 3 16 0

      产品UI设计中的空间

      0.0°

      你确定要举报产品UI设计中的空间

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录