在考虑运用哪些多用户体验相关技术的时候,它们的美学特征可能是相当值得我们深思的。目前我们所看到的许多网站上所使用的设计理念和技巧,其实也可以很好地投入到 WordPress APP 设计中,只不过细节和样式可能需要稍作调整,以适配更小的、高清的萤幕。对于熟知桌面端网页设计的设计师而言,接下来的 7 个设计要点能帮您快速转向移动端设计,WordPress 网页设计让您看起来像是的移动端 UI/UX 设计师。

  1 、大胆鲜明的排版 

  更简单的字型排版在小萤幕上具有更强的易读性,尤其是在光线较暗或者逆光的情况下,这也是推动非衬线字型在移动端上广泛运用的重要原因之一。

  几年前,随着设计趋势的大幅转变,设计师们更加倾向于选取笔画更加厚重、风格更加大胆的字型型别。此外,字型的尺寸也很重要。越来越多的移动端页设计开始借用尺寸超大、极具表现力的字型,营造出前景和背景的明显对比,打造炫目的效果,以便于多用户浏览、导航。

  这种趋势的优势在于,大家开始更加注重于介面内容的可读性。不过在英文介面中,有一个问题需要注意,就是要尽量克制地使用大写字母。以 The Weather Channel 为例,“SUNNY” 这个词只有 5 个字母也就算了,但是如果去是其他的天气所用字母数量较多,视觉上可能会相当的累赘。在中文的字型设计中也要尽量避免文案过长、过于复杂的问题。

  所以,此处应当注意两件事:

  ·排版和内容应当尽量保持简单

  ·背景和文字的对比度应当尽量明显,保持大可读性

  2 、图层和深度 

  Material Design 作为当前重要的设计趋势而言,已经被反复强调和提及了,这并不是没有道理的。

  先,它是 Google 所推出的设计平台,作为一个实力型巨头推出的产品,无疑会吸引大量的相关从业者跟进,并且目前状况就是这样。 Material Design 本身的设计理念也相当的直观易懂,不论是用来设计还是对于多用户而言,都相当的不错。

  Material design 引人瞩目的地方在于,其中的图层建立对于多用户使用和互动设计都有极大的帮助。今天,Material design 风格的介面已经遍地开花,许多 iOS 平台的应用都开始遵循这一设计规范。

  真正让这些图层发挥作用的技巧非常的微妙。图层之间的区分靠的是曾经 “被大家所嫌弃” 的阴影,它们非常浅但是很自然,同时它们还是视觉和互动的线索。下面的图层是资讯的入口,而顶层的图层则是互动的工具和元素。

  看看 Uber 的设计,地图图层位于整个萤幕的下层,通过移动底部图层来设定上车位置,顶层的按钮则用来下单,不同的层承担着不同的功用,提供不同的互动方式。

  3 、单色配色方案 

  在小萤幕上使用纯粹的黑白配色是吸引多用户注意力的好办法。此外,还可以使用相对少见、大胆的配色,这样也容易脱颖而出。又或者使用新增其他的配色方案让多用户选择他们自己喜欢的配色方案。

  单色配色方案的好处在于更容易营造一致、统一的视觉体验和感觉。正如同 Streeks 这款应用的设计,多用户可以设定目标,然后 WordPress APP 会提醒您完成任务。多用户可以基于任务型别来设定色彩,并且推送简单的资讯来告知您需要完成的事情。

  单色配色、图示和简约的字型在一起形成了令人惊艳的组合,易于阅读也便于互动,这种设计已经足够完备顺滑,吸引多用户在待办事项中新增更多的事情来完成。

  4 、专注于微互动 

  那些足够优秀的 WordPress APP 当中,通常都会包含着许多顺滑无缝的优秀微互动,来沟通不同的介面、动作和互动。微互动通常会很容易被忽略,但是在许多 WordPress APP 当中,他们会作为必须的过渡、互动引导和效果提示而存在,所以相当的重要。

  微互动的存在,主要还是帮助多用户完成一些事情。从文字信息通知、信息推送到微博上点赞的提示,近乎无处不在。它们还有一个主要的功能:取悦多用户。

  微互动的主要功能可以这样总结:

  ·提供资讯反馈,比如在 Instagram 中点赞之后出现的提示特效

  ·呈现动作,比如点赞之后心形会从透明镂空变为红色

  ·帮助多用户操作或者发现某些东西的存在,比如点赞之后,会有推送资讯出现在通知栏,或者弹出框直接告知

  5 、卡片式设计 

  卡片式设计早见于 Pinterest ,随后在 Facebook 、 SoundCloud 等网站上流行开来,成为了真正意义上的主流设计。不过今天的卡片式设计很大程度上受到了 Material Design 的影响。

  不论是对于设计还是对于开发而言,卡片都是大量内容的可靠载体。每个卡片都可以承载不同的元素,作为不同的模组,实现不同的功能。

  所以,您可以让一个卡片播放视讯,紧接着的卡片则连结到另外一个应用,而下方的卡片则直接放置了一段长长的文字。卡片式设计在移动端上的另外一个优势就是非常的易用,尤其是在有 WordPress APP 之内。绝大多数的应用会在一个萤幕内承载两个卡片,就像 SoundCloud 这样,又或者一屏就是一个卡片,这样一来,即使多用户的手指再粗也不会错过任何内容!

  6 、简单的导航 

  隐藏式选单、弹出式导航和大按钮是不容忽视的设计要点。如今 WordPress APP 屏使用的选单数量正在逐步减少,寸土寸金的 WordPress APP 页上不再放置大量的选单按钮,随之而来的是隐藏式选单的流行。

  有趣的是,越来越多的多用户并没有被隐藏式设计惹恼,他们已经熟知汉堡选单中隐藏着更多的选项。当然,使用汉堡选单的技巧在于,其中隐藏的选单应当是非常实用的功能和选项,而选单按钮本身也应当显眼而灵敏。

  Slack 绝对是导航选单设计中的典范,它的选单可以从萤幕的左右两边弹出显示,而主要功能选单是从右侧弹出的,而特定频道的选单则是从左侧弹出。

  7 、用动画来润色 

  有趣而漂亮的动画,是让您的应用令人感觉非同凡响的另一手段。合理的动画能提高应用的易用性,能让多用户更容易注意到重点,甚至能更加直接的给他们带来快乐。

  您无法确知多用户将在何时何地访问您的应用,更无法确知多用户使用的是哪种网络连线,所以使用体积小、轻量级、不依赖于网络的动画是非常有必要的。

  Strava 就是这样一个包含了大量有趣的小动画的应用,其中许多有趣的动画小到您可能会一不小心忽略掉。不同介面之间的切换会有有趣的过渡动效,比如上面的挑战页面就是。载入地图的时候会有一个脉冲特效,当您运动的时候,会看到沿着运动路径变幻的小点。

  WordPress 网站建设结语

  当您打算让您的移动端 WordPress APP 不再停留于构思的时候,不妨先看看当前网页和数字设计都有哪些设计趋势,看看它们当中有哪些可以通过调整可以运用到移动端设计上来。许多意想不到的小点子,可能会成就一个非常了不得的设计趋势。