Photoshop移动UI设计从入门到精通
上QQ阅读APP看书,第一时间看更新

3.2 挖掘内涵:提升UI的文字设计

文字是人类文化的重要组成部分。在UI设计中,文字和图片是其两大构成要素。文字排列组合的好坏直接影响APP界面的视觉传达效果。因此,文字设计是提高UI的诉求力,赋予UI审美价值的一种重要构成技术。

3.2.1 内容设计简化

在APP UI图案设计的过程中,每一个界面不要放置过多的内容,否则会让用户难以理解,操作也会显得更加烦琐。

例如,可以使用一些半透明效果的图案来作为播放器的控制栏,使用户在操作时也可以看到视频播放的画面,如图3-6所示。

图3-6 半透明效果的控制栏

3.2.2 字体设计合理

在设计APP UI中的文字时,要谨记文字不但是设计者传达信息的载体,也是UI设计中的重要元素,必须保证文字的可读性,以严谨的设计态度实现新的突破。通常,经过艺术设计的字体可以使APP UI中的信息更形象、更具有美感。

随着智能手机APP的崛起,人们在智能手机上、阅读与浏览信息的时间越来越长,也促使用户的阅读体验变得越来越重要。在APP UI中,文字是影响用户阅读体验的关键元素,因此,设计者必须让界面中的文字可以准确地被用户识别。

如图3-7所示阿拉伯数0改为小写的字母o的效果。

图3-7 阿拉伯数字0改为小写的字母o

还要注意避免使用不常见的字体,这些缺乏识别度的字体可能会让用户难以理解其中的文字信息,如图3-8所示。

图3-8 避免使用不常见的字体

另外,移动UI中的文字应尽量使用熟悉的词汇搭配,这样可以方便用户对移动UI进行理解与操作,如图3-9所示。

图3-9 尽量使用熟悉的词汇搭配

专家指点

在进行APP UI的文字编排时,应该多使用一些用户比较熟悉的词汇进行搭配,这样不仅可以避免用户耗费额外时间去思考其含义,还可以防止用户对文字产生歧义,从而让用户更加轻松地对界面进行操作。

3.2.3 突出文字层次

在设计以英文为主的移动UI时,设计者可以巧用字母的大小写变化,这样不但可以使界面中的文字更加具有层次,而且可以使文字信息在造型上富有情趣,同时给用户带来一定的视觉舒适感,并可以使用户更加快捷地接受界面中的文字信息。

如图3-10所示,通过3例移动UI的对比可以发现,当界面中的文字全部为大写或小写字母时,整体上显得十分呆板,给用户带来的阅读体验十分不理想;而采用传统首字母大写的文字组合穿插方式,可以让移动UI中的文字信息显得更加灵活,重点突出,更便于用户阅读。

图3-10 不同大小写字母搭配的界面文字

3.2.4 信息表达清晰

在设计移动UI中的文字效果时,除了要注意英文字母的大小写外,字体及字体大小的设置也是影响效果表达的一个重要因素。

专家指点

“信息传递”是指人们通过声音、文字、图像或者动作相互沟通消息。信息传递研究的是什么人,向谁说什么,用什么方式说,通过什么途径说,达到什么目的。

通过对比可以发现,不同字体大小的文字组合在一起,可以更清晰地表达文字信息,更有助于用户快速抓住文字的重点,进而达到更吸引眼球的目的,不同字体大小的文字表示如图3-11所示。

图3-11 不同字体大小的文字表示

如图3-12所示,经过对比可以发现,右图中的文字阅读起来更加方便,这是因为该界面中文字的字体大小能为用户带来更舒适的阅读体验。

图3-12 不同字体大小的文字表示

当然,对于一般阅读类APP界面中文字的字体大小,根据APP的定制特性,用户都可以通过相关设置或者手势进行调整,然后再进行阅读,通过手势调整文字的字体大小如图3-13所示。

图3-13 通过手势调整文字的字体大小

3.2.5 掌握文字间距

在人们阅读移动UI中的文字时,不同的文字间距会带来不同的阅读感受。例如,过于紧密的文字间距可能会带给用户更多的紧迫感,而过于稀疏的文字间距则会使文字显得断断续续,缺少连贯性。

如图3-14所示,左图中的界面正文显得十分拥挤,用户在阅读这些文字时容易产生疲劳感,因此,需要对行距和字符间距进行适当的调整;另外,可以在文字区域中设计上下滑动的手势触控效果,以方便用户翻页浏览。

图3-14 不同间距的文字效果和手势触控效果

在进行APP UI的文字设计时,一定要把握好文字之间的间距,这样才能给用户带来流畅的阅读体验。

3.2.6 文字颜色设计

过去的移动UI设计大大低估了色彩的作用。色彩其实是一个了不起的工具,应该被充分利用,尤其是文字的颜色。

适当地设计APP界面中的文字颜色,可以提高文字的可读性。通常的手法是,使文字内容穿插不同的颜色或者增强文字与背景之间的颜色对比,使界面中的文字有更强的表达能力,帮助用户更快地理解文字信息,同时也方便用户对其进行浏览和操作,如图3-15所示。

图3-15 文字颜色的应用效果

如图3-16左图所示,图中的文字虽然有字体大小和间距的区别,但颜色比较单一,用户无法快速地获取其中的重点信息,此时可以尝试转换文字的色彩,如图3-16右图所示。

图3-16 不同颜色的文字效果

从图3-16中可以发现,通过改变不同区域的文字颜色,可以使该不同区域的文字的区别更加显著。其中,可以明显发现红色部分的文字比黑色部分的文字更加醒目,设计者可以利用此方法去突出移动UI中的重点信息。

另外,还可以通过调整文字颜色与背景颜色的对比关系来改善用户的阅读体验。适当的颜色对比,能够清晰地呈现文字,使其适于长时间阅读,使用户体验更加流畅与舒适,如图3-17所示。

图3-17 不同文字颜色与背景颜色的对比关系所产生的文字效果

3.2.7 画面美感设计

在设计移动UI时,美观是设计工作的首要要求,设计者可以通过适当的图形组合与色彩搭配来修饰界面元素,增加移动UI的观赏性,为用户带来更好的视觉感受,如图3-18所示。

图3-18 增加移动UI的观赏性

3.2.8 实用性能优化

除了用美观吸引用户外,移动UI还必须具备一定的实用性,否则就成为一个“花架子”,用户也许会下载它,但下载后发现并不实用就很可能会立即卸载掉。

实用性主要体现在以下三个方面。

● 是否能为用户带来较好的操作和控制体验。

● 重要的信息在界面中是否能得到直观的展示。

● APP的功能设定是否简单明了。

在设计移动UI的过程中,设计者一定要把握好实用性的要点,避免出现虚有其表的情况,那样是很难留住用户的,如图3-19所示。

图3-19 把握好实用性的要点