从实际案例出发,说说交互文案设计的几个原则

想必大家都见过下图所示的著名的“交互文案”反例吧?如果文案写成这样,无论设计师在文案出现方式、时机等方面再怎么优化,这也不可能成为一个合格的设计。因为“看起来重复、读起来绕口、理解起来更是云里雾里”的文案很难让用户获得良好的阅读体验和使用体验。

从实际案例出发,说说交互文案设计的几个原则

想必大家都见过下图所示的著名的“交互文案”反例吧?

从实际案例出发,说说交互文案设计的几个原则

如果文案写成这样,无论设计师在文案出现方式、时机等方面再怎么优化,这也不可能成为一个合格的设计。因为“看起来重复、读起来绕口、理解起来更是云里雾里”的文案很难让用户获得良好的阅读体验和使用体验。

可见,文案本身是交互设计不可忽视的一部分。而不像许多交互设计部分受产品需求、技术现状等的限制,交互文案是在交互设计师的可控范围内的,只要你愿意,你总是可以写出“趋近完美”的交互文案。

理解需求

交互设计师写文案,好比是翻译家将英语(功能语言)翻译成中文(用户语言)。比如产品经理可能会这么描述一个需求:It rains cats and dogs。要翻译这句话,首先要透过cats and dogs这个俗语(产品经理的描述习惯)去理解这句话的含义,即需要交互设计师理解需求。

从实际案例出发,说说交互文案设计的几个原则

以上图为例,产品经理一开始在PRD中将这个分页标题定为“兴趣”;然而由需求本身可知,这个分页包含的是推荐的优质版块,并不是由用户选择自己“感兴趣”的版块构成的,所以谈不上“兴趣”,经过交互设计后,该分页标题最终定为“频道”。

下面的设计,却是理解需求后的“直译”。

从实际案例出发,说说交互文案设计的几个原则

产品经理要求在编辑直播间推荐页提供“该推荐是否显示到大厅”的设置,优化前完全按照需求的表述来进行设计,不能说有错,但不够明确。

深入了解需求,我们发现,这里的设置其实是对当前推荐类型的选择(选择否时,推荐为一般推荐,不显示至大厅)。优化后,直接将选择“是”和“否”的结果明确写出。

理解了需求,才能知道要“写什么”以及“写成什么意思”,才能把“It rains cats and dogs.”翻译成“天上下了很大的雨。”而不是“天上下起了猫猫狗狗。”

基本原则

用语确切

文案作为被阅读的对象,需要被用户理解。

我在使用网上银行找回用户名的时候,收到这么一个提示:

从实际案例出发,说说交互文案设计的几个原则

主提示句明显是一个病句,就算进行修正我也无法理解,无奈只能大胆猜测我的银行卡是不是没有开通网银。文案撰写时如果没有准确使用词汇、语法来表述其含义,用户就无法理解,甚至容易产生歧义让用户误解。

不过,仅仅“用语”准确还不够。

我曾经设计了这样的分享文案“给大家安利[用户昵称]的直播……”。“安利”一词在网络用语发展过程中,逐步演变为比“推荐”更具情感化的表述。使用“安利”一词在达意上自然没有问题,而且更显诙谐。不料,我却发现有不少用户反馈“是不是写错字了?”“安利什么意思啊?”这时,再拿“安利”对一些用户进行随机调研时,我才发现原来太多知道“土豪”的用户都不知道“安利”。这说明用语还要恰当。

这就要求设计师根据用户特征和习惯来撰写文案,做到“用语确切”,文案才能被用户准确理解。

全局一致

由于汉语博大精深,同一含义的确切表述可能有许多种。为了符合用户的心理预期,同一产品的同一功能、含义的表述必须一致。

下图设计中,“校验码”“验证码”甚至“动态码”等表述都可以用在这里。然而同一功能、同一页面上却用了两种表述,就会让用户迷惑“到底是验证码还是动态码”?

从实际案例出发,说说交互文案设计的几个原则

同一产品中,同一流程或同类功能,如果短语结构、句式等可以一致,那么也应该遵循一致性原则。

从实际案例出发,说说交互文案设计的几个原则

一个流程中的三步文案分别使用了动名、名动、动名形三种短语结构,感觉有些杂乱,不如统一使用“动名”或“动名、动形”的结构来的舒服。

此外,同类或相似功能的文案叙述视角也应该一致。

从实际案例出发,说说交互文案设计的几个原则

同类功能描述差异性的文案,却分别从产品和用户的两个角度去描述,也给人以混乱的感觉。

这需要设计师从实际需求出发,多维度地去考虑一致性,以给用户安全感和舒适感。

情感关怀

满足用语确切、全局一致的文案,达到了文案的基本要求。这样就够了吗?

在“网银文案”一例中,假设我们将文案按我猜测的意思优化为“请使用已开通网银的账户进行操作”,那么某些有且仅有一张未开通网银的银行卡的用户如何使用另一张并不存在的卡呢?某些就想对该账户进行操作的用户又该怎么办呢?文案应该以当前操作为出发点去描述问题,才能帮用户解惑。因此,本案例中优化为“本账户暂未开通网银,请前往柜台开通”更明确合理。

当我点击下图设计中的“确定”时,弹出了“领取失败”的文案,阅读后能够理解当前“失败”的状态,然而失败原因是什么呢?我还能怎么做呢?这些都无法从交互文案中获知,因此用户会产生迷茫。文案应该描述失败原因,比如“今日兑换结束,明天再来试试”“您的淘金币余额不足”等等。

从实际案例出发,说说交互文案设计的几个原则

某次,我在登录某手机银行时,忽然弹出下图中的弹框,我一下子懵了,什么地方出错了?我的账户还安全吗?等我颤抖地关掉弹框时,我发现我输错了验证码……用户小小的失误,却郑重地用弹框和语焉不详外加如此多的感叹号来提示,着实让人受到惊吓。(值得欣慰的是,某行已经优化了这个提示。)文案应该考虑用户情绪,使用合理的语气进行表述。

从实际案例出发,说说交互文案设计的几个原则

在某些场景中,我们还可以考虑使用一些有趣的文案去打动用户,卖卖萌、调调侃,让用户在阅读时不那么枯燥,从而感受到一些趣味性。

总之,设计师需要怀着同理心去思考用户的情感需求,将对用户的情感关怀注入到交互文案中,才能提供更好的用户体验。

其他原则

功能文案控制字数

所谓功能文案,指产品界面上描述功能本身的文案,如导航、分页、按钮、表单、操作等。

对APP来说,由于界面空间限制,功能文案一般简短;对WEB来说,则没有那么严格的字数限制。但对多平台产品来说,由于需要满足一致性,所以WEB上的功能文案一般会向APP文案靠拢。

提示文案进行引导

所谓提示文案,指在特殊场景、状态下,告知用户状态、引导用户操作的文案,如表单缺省文案、状态说明文案等。

表单缺省文案需要告诉用户表单的输入要求、限制等,以引导用户正确输入。

状态说明文案则需要告知用户目前所属状态,根据需要增加建议操作。若是出错、操作失败等状态,则必须告诉用户原因、提供解决方案。但对于复杂原因造成的出错,如果“诚实”地告知用户,反而会让用户迷茫,这时候不如说一个能够为用户所理解的原因,并且提供解决方案。

从实际案例出发,说说交互文案设计的几个原则

反馈文案情感引导

所谓反馈文案,指在用户某些操作、行为后系统反馈的文案,如表单校验文案、操作反馈文案等。

反馈文案需要基于对用户的情感关怀以及产品本身的功能推广等等的考量,鼓励积极、推荐的操作,不鼓励消极的操作;恭喜成功的操作,不打击失败的操作。如“添加好友成功”“已删除该好友”“恭喜您成功充值100元”“啊哦~充值遇到问题”等等。

首行文案注重隐私或便捷

所谓首行文案,特指邮件、短信列表和提醒时预览出现的文案。

这类文案需要根据隐私、便捷性等产品特征考虑文案首行显示的内容。比如记账产品发送用户月度记账财报邮件,由于隐私性考虑,前几行一定不能出现金额等敏感信息。而短信验证码文案,为了方便用户在不切换界面的情况下输入验证码,必须在优先写出产品名称、验证码的信息,以便让用户在收到短信提醒时就可以快速操作。

Don’t make me think

“Don’t make me think”原则除了运用在上述“意译需求”的操作文案中外,最常运用在弹框操作文案中。为了防止误操作,用户在进行某些操作时,通常会让用户二次确认。而为了方便用户进行确认操作,弹框按钮的文案需要直接明确地写出相应操作(此外按钮还会使用彩色-主流程操作;线框-分支流程操作;红色警示色-慎重操作来进行区别)。这样,用户甚至可以不需要仔细阅读和思考,只要轻扫文案就可以快速做出选择。

从实际案例出发,说说交互文案设计的几个原则

重视整体阅读体验

前面举例说了一些示例,除了写好每一例文案外,我们还应该注重界面整体的阅读体验。比如整体界面不应该是重复的、冗余的,“验证文案”一例中,就出现两句差不多的文案,阅读体验就有所下降。

因此交互设计时,还需要综合考虑所有文案,以整体提供良好的阅读体验。

结语

想写好交互文案的方法、原则还有很多,本文仅从我过去看到的案例、获得的收获出发撰写。欢迎大家交流:)

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-24
下一篇 2017-05-24

相关推荐

  • 10种交互设计小技巧抓住用户注意力

    如今,设备的屏幕正变得越来越小。主要的挑战在于在有限的屏幕范围内提供优秀的用户体验。 简单来说2015年的移动设计趋势将是在传递更多信息的同时,尽量保持设计的简单。让我们来看看这些应用是如何抓住用户的注意…

    交互设计 2015-09-02
  • 关于2017年的设计趋势,国外已经有了这13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。“庆祝成功自然无可厚非,但学习并反思失败更加重要。” ——比尔·盖茨“他们是种异常必要的无谓存在,他们因为需要被呵护而带给人恰到好处的慰藉。”“差劲的设计团队提供用户要求的UX。伟大的设计团队提供用户需要的UX。”“对于一个优秀的UX设计师来说,他/她最大的责任就是使用户在使用产品 的时候能产生信任感。”“一件好产品就如一部伟大的电影。”“我们逐渐发现这些智能小助手(AI)之间的合作能力可能并没有想象中那么强大。”“Material Design将会目睹它所倚仗的‘笔’与‘纸’之间的枪战——它会发现它的立身之本在面对未来强大多元的互联网时不堪一击。”——Chase Buckley(独立UX设计师)“与真实的纸不同的是,我们的数字材料可以随意伸缩与变形。纸质材料有物理表面与边界。是那些缝隙与阴影告诉你这一切,赋予了你能触碰到的东西意义。”

    2017-05-18
  • 【腾讯讲堂】交互原型设计公开课推荐

    腾讯讲堂交互原型设计公开课推荐哦,因为小编看到这个课比较适合新手们,关键是免费,哈哈哈~~好魔性的笑声。 废话不多说,点击去学习吧:UI交互原型设计公开课。 课程内容如下:  

    2016-01-20
  • 用户体验设计:你必须知道的的9种状态(下)

    眼看着年纪比我们小却成就比我们高的人来说,我们依旧需要不停的汲取知识来成长。所以这个假期也是撸了两篇文章出来,这是第二篇,希望大家一起来探讨。

    2017-05-18
  • 在设计功能时,怎样的交互才是合理的?

    或许在本文中,你不会得到所谓的干货。但小编相信,一旦你读完了,你的思想认知会更上一层的。具体想了解关于《从这四个点,正确完善地拆解一款 App》的,可以看下这篇文章,要从多角度去看文章去分析。

    2017-05-07
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 从“注意力”的角度谈体验设计如何避免入坑

    作者:挪小辣(用户体验设计师 @UIMax公司)   前段时间UIMAX团队在做“新浪新闻客户端用户画像项目”时,用研人员访谈用户的过程中,发现一个这样的问题:多数用户完全没注意到过页面上的“长按可排序或删除”这段文字…

    交互专题 2023-03-03
  • 皮克斯教给我们的22条改善用户体验的原则

    注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯。1986年,在史蒂夫·乔布斯以1000万入主以后,创作了《玩具总动员》、《海底总动员》、《头脑特工队》等经典3D动 画电影。2006年,皮克斯被迪士尼以74…

    2016-06-12
  • Axure官方教程中文版第5课:动态面板介绍-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(5).MP4 新建文件 1、添加一张图片和按钮 2、转换为动态面板并添加状态 3、为每个状态添加一张图片 4、设置点击“Next”按钮时进行下个状态的切换

    2015-01-26
  • Axure基础

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

    2018-03-15