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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
前端设计师如何提高UI界面中的阅读性
0.0°
2017-11-22 原创文章 经验/观点 举报 1724 4 5 0

阅读体验是ui设计中必不可少的一项,良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义。设计的可读性和排版设计息息相关,这也就跟设计师的设计功底息息相关。下面简单介绍文字影响UI界面阅读性的几种情况。


文字大小

文字的大小无论在ui界面或者网页当中任何一个地方,都起到一定的作用。而文字作为设计的一个组成部分,阅读性就必须得到保证。那么,如何去选择字体的大小能达到比较好的效果呢?


在网页中,我们常见的文字大小一般是14px、16px,最小的字体一般是12px的。标题类的字体大小一般都在18px以上。我一般给客户做网站,正文一般会选择14px的字体,标题类的会采用22px加粗的一个字体。有一些特殊的界面设计上,标题可能要求更大,字体也要细一些的,这些需要单独做变化。网页中字体的大小尽可能的选用偶数,如果是奇数的话,字体显示出来的边缘会有一些毛边,不利于阅读。


在ui界面当中,在字体大小的选择上需要多斟酌一下,正文的自号大小和标题的大小应该有所区分,可以在黄金比例的字号上稍微找寻一个适合阅读的字号比例。在苹果6的界面下,我们常见到的标题大都是34px的,部分的app的界面系统在部分标题下会使用到36px。这里再补充一点,无论什么系统,在UI界面中标题或正文的字体一定要选用偶数,因为在开发界面的时候,字号大小换算是要除以二的。

Image title


对字号的选择如果还拿捏不准的话,还选择一些工具来进行辅助选择,比如Modular Scale(链接打不开看这:http://www.modularscale.com),可以借鉴下里面的字体比例。

Image title



字体的选择

都知道字体有宋体、黑体、楷体、手写体等多种字体形式,不同的字体表达的情感诉求是不一样的,这些外形不一样的字体也会造成阅读性的易难程度。


字体样式对易读性和快速浏览非常重要,所以我们可以先来了解下ui界面下如何选择字体。


1)iOS系统中用的字体是苹果官方字体系列。

苹果官方系列字体以SF和SF Compact 两套字体为主。SF和SF Compact 分别又命名为Text和Display两个子字体系列。Text 系列字体用于小文本显示,而Display 系列字体用于较大的字体显示。

Image title


2)Android的默认字体是Roboto和Noto系列。

Roboto系列字体有6种字样:Thin、Light、Regular、Medium、Bold 和 Black。

Noto系列字体有7种字样:Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。

Image title


知道了这两个系统的字体,我们在设计界面的时候就可以有针对性的对文字做更深入的研究和设计,尽可能的提高界面的阅读性。


文字的字间距

调整文字字间距的情况比较少见,但是特殊情况下是会做相对应调整的。都知道,字和字之间是有间距的,我们打出来的字体都是有默认的固有间距。通常情况下默认的固有间距是不需要我们去调整的,只有在特殊情况下才需要对字间距做相对应的调整。


大标题因为字号比较大,在一些特定的界面上,大标题的字间距会被缩小。这个调整是细微的,可能我们都没察觉。那也侧面说明调整过的字间距还是合适我们眼睛阅读的。


文字的行间距

行间距需要调整的地方就比较多。在整个段落中,每行的字符数对于整体的可读性起着主要作用。如果文字段落非常宽,阅读性则差。文字设计得太密集也不行,会给读者的眼睛带来压力,造成混乱。所以段落的行间距在设计的时候就需要留心。


行间距设置可选择在字体大小的120%到145%之间,这个比例是我个人觉得比较合适舒服的,大家可以试试。

Image title


文字的段间距

段落与段落之间需要有一定的距离,如果段落间距离过小,同样影响视线的移动,过大则容易导致上下文的联系变得松散。段间距比较常见的设置为2.0em。

Image title


文字的颜色和对比度

文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字,就难以阅读了。设计师选择浅色字深色背景,或是深色字浅色背景,都是有原因的。对比使得字符容易阅读。

Image title


总结:

文中提及的关于文字设计来提高UI界面的可读性,说白了其实不过是选择什么字体设定什么参数,但恰恰有可能是你看似一个不重要的数值,而导致整个界面的阅读性丢失。当用户打开阅读性差的界面,可能不过几秒就会关闭,这对产品来说是相当大的损失。所以说到底,前端设计师们在设计这些界面的时候,一样要认真对比,保证界面优美的情况下还能有效的阅读。

Image title


更新:2017-11-22

收藏

4人已收藏

  • 19

    作品

  • 94

    粉丝

  • 0

    关注

  • 超实用!网站导航栏设计形式总结
  • 如何设计一个交互好转化率高的表单
  • 前端设计师必收的5款免费响应式布局测试工具
  • 为设计师写的色彩对比指南,让你真正了解色彩对比
相关标签
ui用户体验UI界面

    猜你喜欢

      2017-11-22 原创文章 经验/观点 举报 1724 4 5 0

      前端设计师如何提高UI界面中的阅读性

      0.0°

      你确定要举报前端设计师如何提高UI界面中的阅读性

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年11月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      4
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录