UI中的文字设计总结与分析

对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。


对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。

UI中的文字设计总结与分析

文字是UI设计中一个重要的组成元素,文字使用的好坏会极大影响产品的用户体验。想象一下用户打开你的app,发现界面中的文字都是同一个字体,同样大的字号,连颜色都是一样的。这样的文字搭配用户读起来会很累,费时费力。用不了多久他们就可能会卸载你的产品,转而使用另一个界面设计更加友好,文字搭配更加合理的产app。文字对界面设计的重要性可见一斑,但是文字经常会被我们忽视,这篇文章中我对UI设计中文字的使用做了一个简单的分析和总结。

建立视觉层级

设计师的一个主要职责就是将页面中的元素整合起来,以一种清晰可见的形式呈现给用户。当然我们都知道一个页面中不同元素的重要性是不一样的,有优先级之分。文字也是一样,有些文字比较重要,我们更希望用户看到,有些文字比较鸡肋我们不希望用户看到。为了达到这个目的,我们给界面的文字建立视觉层级,将文字大致分为三类:主标题,次标题和正文

主标题

主标题是对于整个页面内容的一个总结,合格的主标题用户看了一眼就应该知道这个页面的大致内容。主标题是用户进入一个页面第一眼就应该看到的文字。主标题应该用字号要足够的大,要加粗,这样才可以更好的吸引用户的注意力。此外,为了更好的节约用户时间,主标题应该简练。根据Jacob Nielsen的一项研究表明,主标题5-6个单词(英文状态下)最合适,最长不要达到一句话的长度。

UI中的文字设计总结与分析

我们强调要突出主标题来吸引用户注意力,但是不要过度突出。因为用户对于具象元素(插画,icon,图像或摄影图等)的感知能力远比文字要强得多。如果我们想宣传一款产品,那么最好的方案就是直接给用户展示产品图片。文字和图片搭配使用的时候,文字起到的只是辅助说明的作用。我们不能过度放大主标题的尺寸造成对图片的遮盖,这样是本末倒置的。

次标题

将所有的信息都塞进主标题是不太现实的,这也是我们需要次标题的原因。次标题的要求和主标题类似,都要求文字简洁干练,概括性强。和主标题一样,次标题也要进行加粗处理,当然为了和主标题区分,字号要稍微小点。

UI中的文字设计总结与分析

正文

正文是提供详细说明和解释的文字,从页面层级的角度来说重要性要低于主标题和次标题。正文文字长度没有定论,有人认为长的文案可以给用户提供更为详细的信息,而且看起来更加正规严谨。但是也有人认为用户不喜欢阅读过长的文字。两种观点都有自己的道理,对于使用长文案还是短文案我做了以下总结:

设备

短文案适用于移动端。移动端相对来说空间有限,文字太多会显得比较拥挤,影响页面美观程度的同时也会降低用户的阅读体验。

UI中的文字设计总结与分析

长文字更适用于PC端,PC有足够的空间来展示特定内容的详细信息或者用户不太熟悉的内容(需要用户仔细阅读)。

UI中的文字设计总结与分析

这是一个家禽百科全书网站,这里面虽然包含了大量的文字,但是设计师将文字在逻辑上分为了许多简短而集中的文字块。这些文字块配以突出的标题和引人入胜的插图就变得具有活力。这种设计模式打破了传统教育类网站沉闷的页面布局,更能吸引用户特别是青少年的注意力。

产品定位

产品的定位对于正文文案的选用是具有决定性意义的。例如,你要设计一个读书,旅行这类偏文艺小众的界面,正文文案要足够的短,页面中要有大量的留白,这样的页面会给用户一种透气、从容、开放、平静、自由的感觉,而这些感觉都是与产品的风格相契合的。相反,如果这类页面中元素都挤在一起,就会导致视觉压力,引发用户紧张。当然并不是所有拥挤的页面设计都会引发紧张情绪,如果文字和页面中其他元素之间的空间处理的合适,行间距留的足够大,那么也可以做到做保持内容的可读性的同时保留了页面的“呼吸感”。

UI中的文字设计总结与分析

PS:正文因为字体尺寸比较小,所以我建议使用无衬线字体。因为设备显示器的像素不足以表现小字体上细小的衬线,会出现锯齿效果,对易读性影响很大。所以我建议正文使用无衬线字体,如果非要使用衬线字体,需要在不同的设备上测试字体的实现效果。

UI中的文字设计总结与分析

行为召唤元素

想让自己设计出来的界面不那么死板,具有可交互性,我们就要学会使用行为召唤元素。当然一些行为召唤元素不需要文字也可以完成,比如我们的接电话按钮或者短信提示,都是使用图标来完成。但是在一些特点情况下,内容过于抽象无法用图标来诠释的时候,我们应该使用文字。

UI中的文字设计总结与分析

行为召唤元素对于文字长度的要求极其严苛,最好是一个单词或者2-4个单词组成的短语(英文状态下)。

轻型文字的趋势

从2016年开始,源于对干净精致界面的追求,轻型文字越来越受到设计师的欢迎。归根结底,轻型文字是简约设计趋势的产物,字体越来越细长。但是我们要记住,这种过于狭长字体在节省页面空间的同时,牺牲的是文字的易读性,这是我们在权衡是否使用轻型文字时需要考虑的问题。

UI中的文字设计总结与分析

不过iOS10的Apple Music界面中开始对字体加粗,所以未来字体是变得越来越粗还是越来越细,我们拭目以待。

UI中的文字设计总结与分析

总结

总而言之,对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。

#专栏作家#

王M争,人人都是经理专栏作家,资深互联网人。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/20682/

(0)
CatherineCatherine
上一篇 2017-08-04 05:41
下一篇 2017-08-04 06:29

相关推荐

  • 交互设计--需求分析的20条法则

    来源:UI新动态对商业用户来说,他们后面是成百上千个供货商,前面是成千上万个消费顾客。怎样利用软件管理错综复杂的供货商和消费顾客,如何做好精细到一个小小调料包的进、销、调、存的商品流通工作,这些都是商…

    2017-08-02
  • 菲茨定律与未来交互方式

    未来已来,随着科技的不断发展,交互的方式也发生巨大的变化,它正一步步颠覆着我们的生活习惯。

    2017-04-27
  • 简约而不简单,谈一谈移动开发中的那些极简设计

    设计是一件用户驱动很强的工作。随着用户越来越偏好更简洁的交互界面,如何剔除多余的元素,保留最基础最重要的元素是极简设计的关键。极简设计形式和功能完美结合。它最大的优点是极简的表现形式,简洁的线条,大方的留白,简约的图形化元素,就算是很复杂的内容,在这样的设计下也会显得很简洁和干练。当然,如果能有效的利用这些元素。

    2017-05-20
  • Axure基础

    目录(使用微信自带页面搜索功能)第一章 使用元件基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基础11. 设置文本框输入为密码基础12. 设置打开选择文件窗口基础13. 限制文本框输入字符位数基础14. ...

    2018-03-15
  • 儿童键盘输入交互方式探讨:为熊孩子设计的输入法

    想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程中该注意的一些交互细节点。

    2017-04-27
  • 译文 | 交互设计中对于“可控性”的理解

     “今天,你可以自由的调节你的屏幕的亮度,关掉应用的通知,自主决定是否连接手机的无线网络等等,虽然这些只能将你的手机电量多延长了几分钟,但却让你满足于一种成就感:你可以完全掌控你的手机,你可以调整所有的设置!(其实你无法控制你手机的电池寿命!) ”

    2017-05-31
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 设计案例|在做方案时,“更明显点”这句话怎么破

    在做方案的时候,时常会听到这样的话,“这个地方应该更明显一点”。今天,阁主将拿出自己设计的一个徽章注释来进行说明。

    2017-04-29
  • 值得你深入了解的交互设计五大支柱

    1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是 基于产品研究和用户定位来设定的,用作后续设计过程中所面对的“理想用户”,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。
    2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。
    3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次 按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。
    4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投 入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定 动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫”所指”,而语言实际传达出来的东西叫”能指”。

    2017-06-04
  • 当售电开始谈“用户体验”

    [图片]   现在,很多售电公司打着“增值服务”的噱头来签客户,承诺给客户绝对满意的用电服务,但现在很多用户却反映:售电公司并没有兑现签合同时所承诺的很多增值服务,用户蒙受损失。即使仅仅只是部分售电公司的原因,但是这样下去,增值服务这手好牌迟早会被打烂,增值服务的说服力会也来越低

    微信热点 2018-02-14