当前位置 > 主页 > 万和大讲堂 >


用户体验提升诀窍:设计UI辅助说明文字—南京UI设计培训分享

2016-12-09 14:02

  在UI设计的过程中,除了采用一些视觉效果去引导用户操作以外,我们也时常需要为这些元素增加一些辅助说明文字,以便引导用户在正确的地方执行正确的操作。这并不是一个简单的过程,本文南京万和UI设计培训总结了十二个需要注意的细节及处理方法。当然最关键的事还是,去关心用户了解他们的需求,让他们感受到你是在在为他们考虑的。


  在多年的Web设计及可用性研究的过程中,南京万和UI设计培训归纳出了一些比较典型的方法,接下来将与大家进行分享。希望这些经验可以帮助各位更合理的运用UI说明文案提升网站的可用性。


  1.了解用户群的特征


  我们要了解网站目标用户群的普遍特征,并使用相应的语言风格撰写UI介绍。除非你确切的知道你的用户都是机智的、悟性极好的人,否则,最好假设他们在完成目标的过程中需要准确的引导。


  基于对用户群普遍特征的理解,设身处地的考虑一下多数用户会对我们的文案做出怎样的理解和反应,他们会理解那些非正式的习惯用语吗?一些看似轻松幽默的说法会被目标用户群认同吗?


  这是我们经常见到的一种说法,“证明你是人类”,这些年来似乎成为了验证码说明文字的一种标准。但是准确的说,这种风格更加适用于相对专业和资深的互联网用户;缺乏经验的用户并不了解验证码与真人操作之间有怎样的联系,“为什么执行一个简单的操作还要首先证明我是人类?”,即使接受这种说法,他们也未必会知道应该怎样去证明。对于这种类型的用户群来说,类似“请输入右侧的字符”这样风格的文案会更加适用。


  2.言简意赅


  要注意文案的长度与详实程度之间的平衡。我们固然希望UI说明可以帮助用户了解足够多的细节信息,以指导操作;但过多过细的信息则不利于用户理解和继续操作流程。人们一次只能处理少量的信息。


  介绍文案要言简意赅,我们的目的是让用户以最快的速度获取信息并执行正确的操作。如果可以的话,南京万和UI设计培训建议尽量将长句子拆分为短句。


  3.去掉不相关的信息


  我们可以在初步确定文案之后,再回过头来换个角度审视一遍,特别注意检查一下文案中哪些信息是与主要目标不相关的,将它们删除,使信息更加准确紧凑。



  在上面的示例中可以看到,当前流程的主要目的是引导用户注册;不应该在这里使用如此多的文案去解释Book Wish List这个概念。


  4.使用最精准有效的词语


  这需要我们对那些表达相似含义的词语有精确的辨识力。很多可用性测试都得出了相同的结论--


  人们在浏览页面时,更多采用的是“扫描”的方式,而不是真正的“阅读”。考虑到这个因素,文案的用词必须足够精准,即使用户很迅速的将目光一扫而过,也可以获取最准确的信息。


  这里南京万和UI设计培训举些具体的例子。“点击一个日期”会比“选择一个日期”具有更准确的引导性。还要避免双重否定的句式,譬如“我不想要取消订阅。另外,尽量不要使用行业术语,无论是互联网方面,还是其他相关行业的科技术语;不是所有人都明白它们的意思。


  5.使用主动语态


  主动语态可以清晰明确的告诉用户他们应该怎样去做。


  不要使用被动语态,这种做法会为用户的理解思路添加没有必要的负担。比较下面两种说法:


  主动语态:“点击日志链接查看文章”


  被动语态:“要查看文章,日志链接需要被点击”


  6.将说明文案放在美观且合理的位置


  正像南京万和UI设计培训一开始说到的,UI说明文案对文字能力和设计能力都是挑战。你必须了解说明文案在信息结构上的层级性,并反映到视觉结构上。


  虽然说明文字需要被用户注意到,但它们也不能在视觉上过于突出,毕竟,UI说明文案的作用是对用户行为进行引导,而不是用来阅读的重要内容。


  作为页面元素,说明文案要与周围的元素相协调。我们最好在页面设计初期,就将说明文案考虑进去,在布局等方面做到充分的预估。


  7.控制间距,保持元素之间的对应关系


  要控制好文案与UI元素之间的间距,在视觉上明确它们的对应关系。当文案需要折行的时候,要将行间距调整到合适的大小——即要留有一定的间距,便于阅读,同时也不能过大,避免用户将两行文字理解为独立的两个句子。


  对于步骤说明一类的多行列表形式的文案,每一条之间要有足够的间距,以表示分割;也可以在句首使用列表符号来表示条目之间的分隔关系。


  使用合理的文字风格,保持可读性


  8.将文字作为视觉元素进行处理,这是页面设计中的一个重要思想。


  对于UI说明文案,在文字风格处理上,即要保持与全局内容文字的一致性,又要在局部做到足够突出、便于阅读。字体、字号、字色等方面都是需要仔细推敲的。尽量使用纯文本,而不是文字形式的图片;同时注意避免使用绝对单位定义说明文字的字号;用户很可能需要放大它们进行查看。


  9.在必要的时候使用示意图


  有些情况下,要使用尽量少的文字去描述清楚一个概念是很难的。我们可以使用示意图,搭配少量描述文字;这样可以为用户留下最准确并且深刻的印象。


  10.更加人性化


  我们可以为UI介绍和系统提示信息增加些个性,使用户的体验更加愉悦自然。


  个性化的文字需要我们投入更多的精力去斟酌和测试,很多不恰当的语气会使用户造成误解。


  这个示例中的文案,个性化的很得当。“忘记密码了?没关系,谁没忘记过密码呢。只需填写你的用户名或邮箱地址...” 让用户感觉很轻松释怀,而不会因为自己的失误而产生被贬低或是挫败的感觉。


  11.保证可访问性和可读性


  这其实是网站设计开发的一条普遍原则。不过对于UI说明文字来说,由于它的相对“辅助”的角色,在可访问性和可读性等方面往往会被忽视。


  正如我们一直以来所了解的,那些普通规则也适用于UI说明文字的设计和实现:避免使用文字形式的图片(前面第8点中提到过),为示意图增加alt属性,保证文字与背景之间的对比等等。


  12.测试


  在可用性测试中,加入UI说明文字的环节,观察用户在执行测试任务时对UI说明的辨识和理解情况。记录下那些会使用户造成歧义或不解的地方,反复修改测试。


  南京万和UI设计培训总结


  关于UI说明文案的合理化方式,我们已经了解了不少。当你在实际项目中去执行时,也许会发现做这项工作所需要的时间和精力是超出你想象的;但这项工作是值得付出努力的,它是成功的UI设计的重要组成部分。除了我们在前文提到过的那些在用户体验设计方面带来的提升效果之外,最重要的一点,我们可以让用户感觉到,我们是真正关心他们的。

最近开班 more>
  • 全栈开发
  • 前端基础班
  • 软件测试
  • Java大数据开发工程师
  • 云原生精英班
  • 开发课程基础班第四期
  • 开发课程基础班第三期
  • 开发课程基础班第二期
  • 开发课程基础班第一期
  • Java Web UI Python
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • 脱产班
  • vip班
  • 考试计划
  • 脱产班
  • 脱产班
  • 脱产班
  • 双休班
  • 双休班
  • 双休班
  • 双休班
  • 业余班
  • 业余班
  • 10月16日
  • 9月23日
  • 9月2日
  • 9月30日
  • 8月26日
  • 10月8日
  • 9月23日
  • 9月16日
  • 9月9日
  • 随时开课
  • 9月21日
  • 10月17日
  • 9月18日
  • 9月2日
  • 11月2日
  • 10月26日
  • 9月7日
  • ——
  • 随时开课
  • 9月26日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

  • Java大数据交流群560819979加入
  • Python技术交流群595083299加入
  • Oracle技术交流群595119011加入
  • Web前端技术交流群604697610加入
  • Huawei技术交流群482919361加入
  • Redhat技术交流群587875348加入
  • UI设计技术交流群511649801加入
  • Cisco技术交流群596886705加入
  • IT运维技术交流群605888381加入