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

相关推荐

  • 《用户体验可视化指南》视频讲书(5)

    《用户体验可视化指南》书中第2章"绘制基础"的第1部分。服务体验中,避免负面切换波动。从可视化的角度,阐述体验的特点。点击视频观看(大约10分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这是本章节的开篇,蓉姐在视频中提了2个重点:切换波动。对应到用户企业的互动上,就是各触点上的体验波动。我自己用App最常发生体验波动的地方就是电商App的活动页,本来选东西选的正爽,结果一不小心进到活动页就会蒙圈,完全想不起来刚才发生了什么,...

    2018-04-09
  • 大势APP的用户体验究竟“火”在哪儿?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:大势APP的用户体验究竟“火”在哪儿?周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目本期主讲老师▼用户体验设计UX是交互设计中非常重要的一点,每个APP根据适用人群和功能设计的不一样,都会有不同的用户体验,下面来说一说在众多...

    2018-04-07
  • 超全面!聊天机器人的界面交互设计实战经验总结

    最近在做智投App的机器人Neo的原型设计,是一个chatbot 聊天机器人 ,整理了一下关于 聊天机器人 设计的一些心得。一. 背景:这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息…

    2017-08-02
  • 院士谭铁牛:人工智能的10件大事和10大趋势

    8月26日至27日,2016中国人工智能大会(CCAI 2016)在北京召开,在26日的主题报告环节,中国科学院副院长、中国科学院院士、中国人工智能学会副理事长谭铁牛先生做了题为《关于人工智能发展的思考》的主题演讲。

    2016-08-31
  • IxD-IxDSchool百科

    IxD Interaction design  交互设计 很多人在问:IxD是什么意思?,IxD中文意思是交互设计 国外一般称之UX或IaD,国内一般称为交互/交互设计 标签:IxD是什么意思  

    交互设计 2015-01-05
  • 12家公司2018春招开启,内推进行中!20W高薪岗位面向18/19届!

    春招现已全面开启cherry整理了春招开启以来还可以内推的公司请大家仔细浏览遇到心仪公司把握住机会不要错过拿到offer才是要紧事注:以下所有公司均可通过互联派内推,后台回复【内推】即可获得内推方式!可内推公司公司:今日头条面向人群:2018届&2019届工作地点:北京、上海、深圳、武汉职位分类:研发类产品类运营类市场类职能类网申时间:2月12日起网申地址:https://job.toutiao.com/2018/公司:蚂蚁金服面向人群...

    2018-03-03
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 需求频次的高低,如何影响产品设计?

    最近看过了很多千篇一律的文章,一直在给我解释一个事情,为什么那么多O2O死了,外卖和打车还活着。

    2017-05-30
  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • H5三个设计方向的自我定位

    如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

    2017-05-27