文本设计的注意事项

本文探讨了手机应用设计中如何通过简洁、一致性和适当的语气优化文本内容,以提高用户体验。包括使用最少的文字传达信息、保持文本一致性、正确使用标点符号、保持友好的语气以及引导用户操作。

应用程序中出现的文字统称为文本,根据作用的不同可以分为标题、控件标签、补充说明、错误信息和运营文本等。文字信息是最基础的交互元素,如早期的命令行界面,用户依靠阅读和写字符与计算机交互,大量的字符需要用户记忆,图形界面增加了直观的图形交互,降低了学习成本,但文字本身传递意义最为准确,复杂的信息还是以文字描述为主,所以在界面设计中依旧重要,易于理解的文本可以提供用户的操作效率。

简洁

简洁就是使用最少的文字传达最准确的信息,不重复、不啰嗦,能用三个字表达清楚就不用五个字,比如标题文字“通讯录”比“我的通讯录”简洁,手机是比较私人化的产品,一般不存在多人共用的情景。

比如标题“搜索界面”和“类别界面”,“界面”不是当前界面本身的标题,虽然歧义较小,但是手机界面显示空间有限,应该尽量精简文字。

文字内容太多,虽然说明非常详细,但用户并一定有耐心去仔细阅读,用户希望得到想要的结果,而不是大段的文字解释。在手机界面中不会出现如此多的文字弹出框,但是有必要让用户在最短的时间内获取信息。

参照win7和ios等优秀的操作系统,采用“倒金字塔”结构,比如优先显示最基本的显示,再显示更多的细节,如果弹窗口无法显示完全,可以增加链接让用户查看更为详细的使用帮助。之所以如此设计的缘由是:用户在专心阅读时,是按照正常从左到右和从上到下的顺序阅读。但是在使用应用程序时,特别是手机应用程序,用户的注意力并不一定完全在界面上,对于文字用户可以一扫而过,可能并没用真正理解文字的意义。当用户不耐烦时,可能跳过文本去直接操作控件。假设用户扫视界面,用户一般会按照以下的顺序阅读界面文本:

  1. 中间的交互控件
  2. 提交按钮
  3. 其他地方的交互控件
  4. 主标题说明
  5. 补充解释
  6. 窗口标题
  7. 正文区域的其他静态文本
  8. 脚注

由于控件最为醒目,有理由相信用户阅读手机弹出框界面文本的顺序为:

  1. 控件
  2. 弹出框正文
  3. 弹出框标题

手机弹出框通常没有复杂的解释说明,在设计时应该注意:

一句简短的陈诉语可以不使用标题。

一句疑问语必须完整,比如“删除所有网址?”缺少主语,完整表述为“您确定删除所有网址吗?”。

标题不应该比正文长。

避免过长的正文,尽量控制在1-2行,在弹出框中使用滚动条的体验并不好。

一致性

相近的意思使用同样的词汇表述,比如“返回”、“返回上一级”和“后退”,表达的意思和操作效果一致,应该统一成一个词汇。

如果系统或者其他应用程序都使用“返回”两字,应该遵循用户使用习惯,降低学习成本。

标点符号

标点也是语句中不可缺少的部分,使用标点符号是需要注意:

  • 简短的陈述句不使用句号
  • 问句使用问号。
  • 感叹号任务完成和需要吸引用户注意时使用,比如:恭喜您,注册成功!
  • 省略号可以表示需要或者隐藏额外信息、文本被截断或者任务正在进行。比如:下载中…
  • 引号可以避免文本被混淆,如:网址“新浪”删除成功。

语气

用户阅读文本相当于程序与用户沟通,应该保持礼貌的语气,确保文本清晰、自然和间接,文本不要过于正式,设计文本时可以设想正在与用户面对面的沟通。比如“此文件受到保护,未经特别许可不能删除”比“无法删除新建文本文档:访问被拒绝”要好,传达操作无法执行的原因,同时不会让用户感到被责备。

文本可以稍微口语化,如“按照步骤注册”比“遵循以下步骤注册”更好。

使用鼓励式的语气,表达程序可以让用户做什么,而不是允许用户做什么。比如,使用“您可以删除文件”,而不是“程序允许您删除该文件”。

引导用户

不要让用户感到不安和挫折感,特别是出现错误时,比如“错误”和“警告”。


使用用户可以理解的字词,给用户执行操作提供有效的建议,告诉用户的不只是刚才的操作结果,还应该告诉用户“下一步”该如果做,减少用户的思考时间。


Web界面文本要素设计需要关注以下几个方面的注意事项: ### 可读性 - **字体选择**:应选择简洁、易读的字体,避免使用过于花哨或难以辨认的字体。常见的无衬线字体如 Arial、Helvetica,衬线字体如 Times New Roman 都是不错的选择。同时,要确保在不同设备和浏览器上字体显示正常。 - **字号大小**:根据文本的重要性和用途设置合适的字号。标题字号要足够大以吸引用户注意力,正文内容字号要保证在各种设备上都能清晰阅读,一般不小于 14px。 - **行间距和字间距**:合适的行间距和字间距能提高文本的可读性。行间距通常设置为字号的 1.5 - 2 倍,字间距不宜过大或过小,以保证文字既不拥挤也不过于松散。 ### 排版布局 - **文本对齐**:保持文本对齐方式的一致性。左对齐是最常见且易读的方式,对于大段文本,避免使用两端对齐,因为可能会导致单词间距不均匀。 - **段落划分**:合理划分段落,使文本结构清晰。每个段落表达一个主要观点,段落之间适当留白,增强层次感。 - **标题和正文区分**:通过字号、字体样式(如加粗)、颜色等方式明确区分标题和正文,让用户能够快速识别内容的层次结构。 ### 颜色搭配 - **对比度**:文本颜色与背景颜色要有足够的对比度,以确保在各种环境下都能清晰阅读。一般来说,黑白搭配的对比度最高,但也可以根据设计风格选择其他高对比度的颜色组合。 - **颜色含义**:注意颜色在不同文化和语境中的含义,避免使用可能引起误解或负面联想的颜色。同时,使用颜色来突出重要信息,但不要过度使用,以免造成视觉干扰。 ### 语言表达 - **简洁明了**:使用简洁、易懂的语言,避免使用过于复杂或生僻的词汇和句子结构。确保用户能够快速理解文本的含义。 - **一致性**:在整个界面中保持语言风格的一致性,包括术语、缩写、大小写等。 以下是一个简单的 HTML 和 CSS 示例,展示了如何应用上述部分注意事项: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background-color: #f4f4f4; } h1 { font-size: 24px; color: #007BFF; margin-bottom: 10px; } p { font-size: 16px; margin-bottom: 20px; } </style> </head> <body> <h1>Web界面文本要素设计</h1> <p>Web界面文本要素设计需要关注多个方面,以确保用户能够轻松阅读和理解内容。</p> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值