UI文案设计技巧，视觉与内容兼具不再是梦

Posted 2020-10-31 cindy2

现今，一款Web或移动端应用软件的用户体验愉悦度，不再仅仅依赖软件本身功能，界面布局，加载速度，甚至是界面文案设计，都对应用的用户体验发挥至关重要的作用。这也是为什么现今一些公司设立UX写手（UX writer），专职从事界面文案设计和研究的重要原因。

但是，软件界面文案（尤其是微文案）的设计，究竟有哪些技巧和禁忌？设计师究竟该如何才能设计出简单易懂，又兼具视觉诱惑力的UI文案设计，增强其易用性，提升转化率和用户体验愉悦度呢？

以下就跟着小编的脚步，一步一步学习和了解软件UI文案设计中需要掌握的技巧和禁忌，希望对大家有所帮助：

首先，究竟什么是界面文案或微文案设计？

在开始了解具体文案设计技巧和注意事项之前，我们需要首先了解究竟什么是UI文案或微文案设计。界面文案或微文案（Microcopy）设计, 一般是指大到安全隐私/使用说明以及服务条款之类，小到每个按钮或选项微文本之类，所有界面文本内容以及外观的设计。它是用户了解和掌握一款软件不可或缺的重要导航和桥梁。好的文案或微文案设计，不仅能够为用户解惑，对于增加产品销量，提升用户体验，加深用户对产品，公司以及品牌的印象，作用也是极佳。

 

UI文案或微文案为何如此重要？

软件界面文案，尤其是部分按钮或报错信息的微文案，作为软件与用户之间沟通的重要桥梁，对于提升软件实用性和用户体验愉悦度扮演着非常重要而多样的角色： 

1.解惑者

软件中的使用说明，安全隐私说明以及服务条款等文案设计，对于解决用户产品相关问题和疑惑，作用巨大。所以，对于用户而言，它们是其掌握和使用软件的重要“解惑者”。

2.引导者

软件流程，步骤以及其他引导性文案设计，对于解决用户如何完成某项操作或任务，扮演着极其重要的“引导者”角色。

如图，引导用户完成某项操作。

3.开导者

报错，提示或警示类信息，在现今的大部分软件中必不可少。而这类信息的文案设计，对于消除用户疑虑，缓解其消极或负面情绪，提升用户体验，发挥着重要作用。由此而言，要论软件设计中的“开导者”，也非其莫属。

4.推销者

而一些能够引导，解释甚至诱惑用户点击购买的CTA按钮文案设计，对于加深用户对产品的了解，增加产品销量，作用也是显而易见。因此，从这一方面来将，文案设计也扮演着产品“推销者”的角色。

如图，好的文案的设计，也能激发用户兴趣，促成购买。

总之，无论界面文案或微文案设计在Web或移动端软件设计中扮演者什么样的角色或发挥着怎样的作用，好的文案设计，总是能极大地便捷和简化用户的各项操作，增加软件点击率以及转化率，提升产品曝光度和销售量。当然，用户体验也不会差。所以，一款功能强大的软件应用，如若能够相应搭配一系列简单易用的优质界面文案设计，结果无疑是锦上添花，如虎添翼。

如何设计视觉与内容兼具的界面文案，提升用户体验？

既然UI文案或微文案对于提升一款软件的用户体验度和市场竞争力如此重要，作为用户体验设计师或UX写手，究竟如何才能成功的设计出用户体验极佳的UI文案或微文案呢？

以下小编就结合收集的最新创意文案设计案例，以及小编使用更快，更简单的Mockplus制作的原型案例，为大家解析软件UI文案设计中需要掌握的技巧和禁忌，希望对大家有所帮助:

技巧一：文案设计尽量精简易懂

软件界面的文字是实现人机交流的重要渠道。但这并不意味着添加的文字越多，内容越丰富，对用户的作用就越大。事实上，大部分用户并不会乖乖的阅读所有文字。因此，尽量设计和精简界面文案，增加用户阅读的机率，它所能发挥的作用才会更大。比如可以尝试以下方式精简界面文字：

*微文案本身尽量简洁易读

为了使微文案本身简洁易读，最实用的一个方法就是：首先将所有需要包含的内容写下来。然后根据需要和具体使用场景，适当的进行融合，删减以及替代。最终达到简洁易读，清晰明了的最佳状态。

如图，简洁直观的表情达意，无需过多言辞。

*使用列表或标题，让文本更加直观易懂

当文本内容已无法继续删减时，可以尝试添加列表或概括性简短标题，让文案设计更加直观易懂。

 

如图，相较于左边图1的整段式设计，中间和右上角图2与图3采用的列表和小标题式设计更加直观易懂。

*添加链接，简化文本内容

界面文案设计并不需要在界面内展示出所有内容。事实上，在实际的案例中，可以通过在文字上添加链接的方式（即采用渐进式设计技巧），简化文本内容。用户点击相关文本链接，即可跳转到其他页面了解详情。

如图，界面文本设计中可在部分文字上添加可点击链接，实现文本瘦身的效果。

注意：精简易读，并不等于盲目的减少文案字数

精简易读，并不意味着毫无标准的盲目减少文案字数，而是用最少的文字，表达出最丰富，最完整的内容。所以，文案设计中精简的同时，也要注意文案的达意情况，避免模棱两可甚至不知所云的情况出现。

技巧二：文案设计应结合软件或产品特色

与界面其他部件的设计一样，软件文案或微文案的设计，也需要结合软件或产品特色，增强其独特性的同时，提升产品或品牌知名度。

文案设计中提及软件或产品相关服务，使用软件或产品特色术语，以及结合产品或品牌特色添加趣味的文字风格，配色以及交互等等，提升产品，公司以及品牌曝光度和知名度。

如图，文案设计尽量结合产品特色。

技巧三：文案设计应结合具体使用场景，有所侧重

虽然，界面微文案对于提升整款Web或移动端应用的用户体验，非常重要，但这并不意味着，界面内所有的文案设计的标准都应该是平行不变的。相反，设计师应该根据不同的场景和用户需求，有所侧重的进行设计。

例如，对于CTA按钮的文案设计，除了做到简单易懂，同时还要增加一些交互设计，增强其诱惑力，增加点击率。（点击了解更多CTA按钮设计秘诀）

如图，为按钮添加适当交互，让用户忍不住点击。

而对于一些报错类界面文案设计，简洁委婉的同时，加入感情因素，使用人性化的表达，缓解用户的负面情绪，提升用户体验。（点击了解更多不容错过的404报错设计）

如图，站在用户的角度，添加一些情感因素，实现与用户情感上的共鸣。

而对于需要用户填写相关资料，例如注册，登录页面或用户个人页面（User Profile page), 则需要设计师从用户的角度出发，添加一些更能消除用户疑虑或担心的文字，以鼓励用户放心的填写相关信息。

如图，添加一些解释说明的文案，消除用户的疑虑和担心，更加放心的填写注册信息。

总之，设计师在具体的设计案例中，需要根据实际情况，多做分析，多做总结，有所侧重。 

技巧四：文案设计应独具匠心，与众不同

同一类型的UI文案设计，不应该千篇一律，毫无变化。事实上，软件文案或微文案设计也是彰显设计师个性的重要平台。因此，在具体的设计中，设计师们可以尝试从以下几个方面让你的文案设计独具匠心，与众不同：

*利用想象，让文案设计更具魅力

文案内容设计也可结合设计师想象，讲述一个故事，展示一种企业或产品文化，以及呈现地方或名族特色等等，让文案更具吸引力。

如图，发挥想象，讲述一个故事，也能让界面更具趣味性。

*利用幽默，让文案设计兼具感染力

幽默风趣的言语和表达，吸引用户注意的同时，能够让用户在更加自然和愉悦的氛围中学习，了解以及接受软件或产品相关信息，极具感染力。

如图，使用幽默诙谐的风格，让界面更加有趣。

注意：幽默也要注意场合和场景

幽默并不适合在所有界面场景之中应用。例如，风趣幽默的文案设计，能够让突然的报错场景变得轻松愉快。但同时也能让软件安全或隐私说明，变得毫无说服力。所以，要结合不同场景，谨慎开玩笑。

*结合图片，让文案和图片相互说明，呼应

俗话说：“好的图片胜过千言万语”。文案设计搭配美观恰当的图片，让图片和文案相互解释呼应，更易于用户理解。

如图，实现文本与图片的相互印证和呼应。

而界面设计中文案与图片的结合和呼应，可以尝试使用Mockplus的“文本”和“图片”组件相结合的方式，进行测试和迭代。动态图片，批量图片以及Sketch图片的导入，利用格子实现批量添加文本以及图片组合等等，都不是问题。

*体现设计师风格，让文案设计更具独特性

每位设计师在其设计过程中，都有其个人的设计风格和魅力。在文案设计中，也可适当的展现这类风格，让软件更具特色，留给用户深刻的印象。如下图：

总之，加入设计师创意和用心的文案设计，注定会与众不同，魅力无限。

技巧五：文案设计应兼具视觉诱惑力

文案设计不仅文本本身需要简单易懂，同时也需要注重其视觉诱惑力的提升。例如设计师们可以通过以下的方式提升界面文案的视觉效应：

*设置文本属性，简单直观打造视觉层次，划分文案主次

对于文字字体，字号，颜色，大小写，间距，对齐方式以界面位置等文案属性的设置，调整以及对比，能够轻松划分出软件界面不同文本的层级关系，打造视觉层次的同时，更加简单直观的凸显其主次，易于用户在最短的时间里，了解软件信息。

如图通过简单文本字体，字号，位置，颜色以及排列对齐方式的不同，实现界面内容层次和重要性的划分。

而使用Mockplus的“单行文字”和“多行文字”组件，就可轻松的实现以上文本属性的添加，设置和调整，十分实用。

*添加适当交互

微文案添加适当的交互，对于增强文案的吸引力和趣味性，提升用户体验，效果也非常好。

以Mocplus的交互功能为例，设计师可以简单快捷为其部分文案添加鼠标点击时，悬浮时，长按时，以及载入时之类交互效应。如图：

当然，也可添加更多丰富的交互动画：添加色彩变化，移动，缩放，旋转，文本内容变化，显示或隐藏等交互效应等等。

总之，交互的添加，对于提升文案设计的视觉效果，作用也是极大。

技巧六：文案设计应保持一致性

整款软件应用的界面文案或微文案设计，也应保持前后一致，帮助用户理解和使用。而文案设计的一致性，只要体现在以下几个方面：

*文案设计称谓的一致性

为加深软件与用户之间的自然无障碍的沟通，拉近与用户的距离，文案设计之中采用“你”或“你们”要远远优于将用户看作第三方的“他们”或“她们”之类的称谓。总之，无论使用哪种称谓，尽量在整款软件设计中，保持一致，避免称谓混乱，引起误解。

*文案设计时态的一致性

在具体的文案设计中，将用户视作动作施行者的主动语态，更易于激起用户共鸣。所以，在你的软件文案设计中，也需要尽量做到主动时态的前后一致。

*文案设计用词的一致性

相较于使用全新或模棱两可的表达，复用界面常用，惯用或已经使用过的用词，更易于用户理解，对于保证软件前后用语的一致性，作用也是极大的。

*文案设计主题以及配色的一致性

界面文案主题以及配色的选择，也应结合整款软件的主题和主配色进行考虑，保证软件的一致性。

*文案风格的一致性

幽默风趣也好，严谨谨慎也好，亦或是简洁通俗，无论哪种文风，一旦选择，就需要从始至终的一直延续下去，保证整款设计风格的一致性。

如图，保持界面设计配色，主题以及风格的一致性。

总之，无论是哪一方面的一致性，设计师们都可以试试使用Mockplus的强大组件库和样式库，简单实现软件原型中文本相关组件以及样式（例如文字颜色，字体，字号，对齐方式等样式）的收藏，复用和分享，轻松实现软件文案设计的前后一致性。

技巧七：文案设计应在原型界面中反复测试和改进

同其它界面部件设计一样，文案设计也需要在具体的原型界面中反复测试和改进，才能真正的达到我们所希望的效果。

例如，在具体的软件原型界面中调整文案长度，排列方式，颜色，尺寸，样式以及交互等等，检测其实用性和有效性。

而这一方面，小编就忍不住想要给大家推荐一下Mockplus的8种演示和分享方式，不仅能够及时的测试文案设计在具体的界面中的视觉效果，还能及时的分享给其他设计师和用户，收集反馈的同时，提升和优化文案设计。

总之，优质且极赋创意的界面文案或微文案设计，对于增强软件用户体验愉悦度，提升软件产品竞争力，作用不容小觑。

结语：

尽管Web或移动端软件界面文案设计对于提升用户体验十分重要，但这并不意味着文案能独立于软件本身而存在。事实上，无论文案设计多么简洁吸睛，都要以软件为依托。好的软件需要优质的创意文案设计，才能够得到更深层次的优化和提升。 反之，软件功能欠缺，再好的文案设计也会变得毫无用武之地。所以，文案设计和软件功能设计都需得到必要的重视，才能设计出真正实用，好用的软件。

总之，希望这里分析的文案设计技巧能对你的文案以及软件设计有所启发。