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

相关推荐

  • 如何运用扁平化设计创造极致的用户体验?

    扁平化设计算是秉承了极简主义理念的至亲了——因为它将简洁的思想融入至所有元素的设计。然而,要达成简洁的扁平化设计依旧困难——即需要我们以相同的设计理念为目的,并创造出一套连贯的视觉与功能体验。让我们来了解下,你能够通过扁平化设计为用户做些什么呢?

    2017-05-08
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 当交互设计遇到用户体验

    【交互设计原则】 *符合用户使用需求 *基于用户的心理模型设计 *一致性 *及时有效的反馈和解释 *形式追随功能 *单一任务、渐次呈现 1.符合用户使用需求 设计一个产品,最基础的原则就是要符合用户的使用需求。确定…

    2015-09-20
  • 设计方法论:一种统一图标大小的方法

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下。需要注意的是,方法有很多,这只是提供一种可行的方法,可供参考,有什么问题可以留言讨论。

    2017-05-18
  • 华润创业、建信融通、便利蜂等4家名企春招

    求职奶爸华南最活跃的大学生求职平台旗下公号求职奶爸、校园宣讲会V、名企校招实习,50W+粉丝企业合作请加 QQ 3527488757 或微信 naibabd01(添加请备注公司名称)学生求职请加创始人微信 qiuzhinaiba101全国 | 华润创业全国 | 建信融通全国 | 便利蜂广州 | 卡宾服饰华润创业/ 公司介绍 /华润(集团)有限公司是一家在香港注册和运营的多元化控股企业集团,其前身是 1938 年于香港成立的联和行,194...

    2018-04-08
  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 一个视觉交互设计失败的案例

    本文由PMCAFF 原创作者 臻龙 原创发布于pmcaff.com最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。好看的设计未必好用我负责的是一款秀场类产品,近…

    2017-08-02
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • 交互设计不是你以为的那样,思考过这些才能入门

    作者:UI中国会员 呆呆丶, 交互设计师转载请务必注明。原文链接:http://www.ui.cn/detail/138186.html封面题图 by 设计师 Ken Lo1  新手对交互设计的几个误区  交互设计是做动效的(如果你是这么认为的…

    2017-07-31
  • 学而思网校UED部门招聘

    简介INTRODUCTION学而思网校,纽交所上市公司好未来集团旗下品牌,专为3-18岁孩子提供小初高全学科课外教学。UED负责K12在线教育全业务体验闭环的设计工作,我们的团队活力创新、勇往无前,真诚期待你的加入~UI设计师UI DESIGNERS岗位职责负责网校全平台产品体验设计工作;可以主导设计风格,参与设计规范和流程的制定。岗位要求3-5年视觉设计经验,美术、设计、艺术学等专业,本科及以上学历;有移动客户端设计经验更佳;熟悉用户...

    2018-02-16