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

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

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

原文地址:https://www.cnblogs.com/Cindy2/p/8882376.html

时间: 2024-10-09 00:26:17

UI文案设计技巧,视觉与内容兼具不再是梦的相关文章

UI实时动态设计技巧

起源于1993年的网络浏览器,时至今日依然保持着请求-响应的交互机制.当用户打算浏览网页的时候,用户输入链接,浏览器便会将用户请求的内容发送到服务器,服务器收到请求,处理它,并响应反馈给浏览器.考虑到互联网的初衷就是用来查看文档,所以请求-响应机制还是令人满意的.可是随着时代的发展,用户对于互联网的需求和期望都已经有所改变. Ajax技术是这种演化的第一步.它完善了网络体验,允许用户在无需刷新页面的情况下加载新的内容,不过它的限制在于加载新内容依然需要用户发出请求才能得到响应.单用户借助这种技术

UI界面中的文案设计有哪些注意事项?

在UI设计中,文字内容的表述也是需要设计师精心推敲,仔细设计的部分.清晰.准确.简洁的 文案 设计能够让界面拥有更好的可用性,同用户建立信任. 文案设计上的技巧很多,应当规避的误区也不少,今天为你总结16个常见的 UI文案设计的误区,帮助大家少走弯路. 1.尽量避免使用俗语和术语 未知的术语和俗语将会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇,使用常用和易于理解的词汇能够帮助用户理解. 下面就是一个典型的反例: 很难说清这种错误提示信息是给系统管理员还是办公室的文员看的. 2

用户界面设计经验分享:界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

值得向iOS学习的15个APP设计技巧

iOS设计规范再阅读 对比Google Material Design的设计规范,iOS有些大道至简的味道,内容很少,但还是从中总(chao ) 结 ( xi ) 了一些设计技 ( tao)巧 ( lu ). 1.如何以内容为中心开发或重新设计一款应用? ?   保证核心功能突出且直接,并强调其相关性 ?   直接使用iOS UIKit,给用户统一视觉感受 ?   保证UI在各种设备与操作间的适配 2.如何提升应用功能体验并关注内容本身? ?   充满整个屏幕 ?   减少视觉修饰与拟物化设计,

界面设计技巧

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

国内外人气UX/UI/PD设计社区推荐,纯干货

对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情.如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求.烦恼找不到设计解决方案.得不到有效的用户反馈,那么你可以看看这里推荐的UX/UI/PD设计社区及论坛,也许可以得到一些启发. 1.Dribbble Dribbble是国外一个很出名的社区以及社交网络平台,它致力于帮助设计师建立团队和品牌.你可以从它的首页捕捉到当下流行的设计作品,但不是任何人都可以发布在线作品的.这里有很多网页设计师.平面达人.

开发人员应该知道5个设计技巧

优秀的编码和优秀的UI设计之间是相辅相成的.不幸的是,视觉设计能力偏弱的人通常会觉得自己缺乏天赋,换句话说,就是人们要么觉得自己具有出众的美学天赋,要么就是这方面的白痴.对这个说法,我可不敢苟同. 如果你在一个小团队里面身兼数职,却又没有多少美学基础.又或者你觉得你们的项目在视觉上还有更多发挥的空间,那么这篇文章就是写给你的.蓝蓝设计将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖) 1.来点留白 大多数的开发者并不在意添加空白的像页边距,填充,行高,或者其他任何增加

UI产品设计流程中的14个要点

http://www.sj33.cn/digital/wyll/201404/38318.html 自从我在 Dribbble 上贴了一幅我的产品设计成果,受到了大家伙热烈的反馈,对此我深受鼓励,我决定写下这篇文章,用来记录我这两年里作为产品设计师,所学到的东西.说起来有点惭愧,这几年我一直都在使用同一套产品设计的流程,但是我觉得这套流程最适合我,对我来说是最理想的,所以就很少去更换.我的这套工作流程我觉得有 4 个地方可以和大家分享一下--前期工作.具体设计.后期工作以及一些提高效率的小细节

UI界面设计流程

UI界面设计流程 UI界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支.具体包括软件启动封面设计,软件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化. 软件UI界面设计的三大原则是:置界面于用户的控制之下.减少用户的记忆负担.保持界面的一致性.一般来讲,软件UI界面设计在工作流程上可分为结构设计.交互设计.视觉设计三个部分. 一.结构设计(Structure Design) 结构设计也称概念设