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

文字大小

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

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

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

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

字体的选择

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

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

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

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

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

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

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



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

文字的字间距

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

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

文字的行间距

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

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

文字的段间距

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

文字的颜色和对比度

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

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

前端设计师如何提高UI界面中的阅读性的更多相关文章

  1. Vue-cli UI界面中插件和依赖的区别是什么?

    Vue-cli UI界面中插件和依赖的区别是什么? 先上结论: 插件在命令行中通过 vue add 安装 如: vue add eslint 这个命令将 @vue/eslint 解析为完整的包名 @v ...

  2. 【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师.随着扁平化设计和Materia ...

  3. 浅谈UI设计中妙用无穷的深色系背景

    英文:medium 译者:优设网 - 陈子木 链接:http://www.uisdc.com/ui-benefits-of-dark-background# --------------------- ...

  4. 【转】学会这13个原则写UI界面文案,用户才能秒懂

    原文网址:http://www.niaogebiji.com/article-12011-1.html 摘要: 首先,在写UI文案之前,为了理清思路,要先搞清楚三个问题:我(设计师)想让用户做什么? ...

  5. 单据UI界面设计开发

    1.新建单据界面数据 2.创建数据模型,包括单据.单据行.设置应用缺省特性,每个模型树下只有一个红色项 3.新增动作,系统默认没有弃审支作按钮事件 4. 新增UI Form,选择对应的模型树及表单类别 ...

  6. Qt UI界面改了,但UI界面不更新

    /**************************************************************************** * Qt UI界面改了,但UI界面不更新 * ...

  7. 【鸿蒙应用开发】第三章 “颜控”时代下如何构建UI界面

    为什么是第三章,前面两章呢? 原本是以碎片化的方式将HarmonyOS应用开发快速掌握,但是在准备六大布局组合复杂UI界面Demo时,很多组件之前都没有应用.因此准备将知识体系进行细化,以章节的形式希 ...

  8. 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢?

    明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...

  9. C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形     最近在写WPF界面的时候遇到一个情 ...

随机推荐

  1. ora-01440:要减小精度或标度,则要修改的列必须为空

    --由于业务需求变更,需要对oracle数据库productinfo表的productPrcie结构进行修改.修改表结构,必须是在表空的情况下才可以修改表结构.具体操作步骤: --1.查看produc ...

  2. 【框架学习与探究之消息队列--EasyNetQ(2)】

    声明 本文欢迎转载,系博主原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7654902.html 前言 此文章,是承接上篇:[框架学习与探究之消息队列--Ea ...

  3. scala 读取文件遇到encode问题(Mac -> remote Linux)

    Source.fromFile(fileName)(enc: Encode),如果遇到错误: java.nio.charset.MalformedInputException: Input lengt ...

  4. jfinal拦截器配置

    实现aop @Before(Tx.class) public void index(){ // renderText("hello world!"); render("/ ...

  5. HTML5中表单中新增加元素

    新增input 内属性 1,required:若文本内容为空,阻止表单提交格式,写入单词即可 如:<input type="text" name="username ...

  6. 使用bitset实现毫秒级查询(二)

    在上一篇中我们了解了bitset索引的基本用法,本篇开始学习bitset索引更新及一些复杂查询. 1.bitset索引更新   因为我们的数据是在系统启动时全部加载进内存,所以当数据库数据发生变化时要 ...

  7. ubuntu16.04 配置opensips服务器并编译pjsip测试

    一.版本相关 1) ubuntu版本: 16.04 2) opensips版本:2.1.2 3) pjsip版本 :2.5.5 4) ffmpeg版本:3.3.4 5) sdl版本:2.0 6) vs ...

  8. 基于oracle的sql优化

    [基于oracle的sql优化] 基于oracle的sql优化 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 一.编写初衷描述 在应有系统开发初期,由于数据库 ...

  9. spark的sparkUI如何解读?

    spark的sparkUI如何解读? 以spark2.1.4来做例子 Job - schedule mode 进入之后默认是进入spark job 页面 这个说明有很详细的解释,spark有两种操作算 ...

  10. Ionic3 组件懒加载

    使用懒加载能够减少程序启动时间,减少打包后的体积,而且可以很方便的使用路由的功能. 使用懒加载: 右侧红色区域可以省略掉(引用.声明也删掉) 若使用ionic命令新建page,则无需进行下面的操作,否 ...