|
小编：随着移动端的日益发达，越来越多的人成为移动端的UI 设计。紧跟现阶段的 UI 流行趋势，了解当前的设计趋势是个不可或缺的必要技能，更新自己的知识，并应用于实际的工作当中是十分重要的。那么下面的这篇文章可以帮助你更快的了解其趋势。来好好了解吸收一下吧！ 感谢 @翻译社 - 丹丹的翻译。 
点击加载图片
2015 年 5 月，Googleblog 发布了 Google 移动端搜索数超过 PC 端的新闻。近来，我们在大量使用移动端搜索。伴随着这个趋势，目前大多数的企业都希望拥有一个最合适的移动端网站。 我们这些网页制作者在这个趋势的初期，以 PC 端网页制作的技术为基础，探索着移动端的制作方法，这几年间也积累了一定的经验。 然而随着移动端设备的日趋多样化，移动端网页的 UI 做法也在日渐发生着变化。对于我们这些网页制作者来说，不能固守于反复使用一定的技术，要时常关注流行趋势，更新自己的知识，并应用于实际的工作当中是十分重要的。 所以闲话少叙，这次以时下流行的移动端网页的UI 规则、手法、共同点等为重点，以设计的视点，重新调查了各个行业的移动端网页（包括 16 个行业 45 种 150 个网站）。调查对象皆选择了行业当中历史悠久知名度高的企业。 
点击加载图片
调查过程中制作的表格 · 1、全域导航 · 2、区域导航 · 3、面包屑导航 · 4、移动导航 · 5、按钮的固定 · 6、滑动导航 · 7、下拉式菜单 · 8、表单 · 9、标签 · 10、细节的注重 01 ) 全域导航栏 1-1）各要素的比例 首先将调查结果总结成图表。63% 的网站使用 ' 汉堡菜单 '。可以说在各个行业的多数移动端网站都使用从汉堡 icon 打开菜单的方式。虽然对于有无标签和 icon 的样式的探讨时有发生，但在此次调查中发现没有标签的三条线 icon 使用最多。和预想的一样，为了考虑不明白只有三条线的图标是什么意思的用户，在 icon 上加入 ' 菜单 ' 两个字的情况是第二多的。位置在右上角的占了一半。展开方法则是下拉和 XX 各占一半。 
点击加载图片
1-2）右上角为优先要素的放置位置 ' 汉堡菜单 ' 半数以上都会放置在右上角，反过来放在左上角的情况，可想而知是因为右上角放置了比全域导航栏更重要的内容。根据网站的不同，优先要素也有着很大的区别，有登录、搜索、购物车、语言选择、服务网站的链接、节目表等。 
点击加载图片
1-3）跳板式菜单 有些网站是没有 ' 汉堡菜单 ' 的，这样的网站中，将利用频率高的菜单用跳板的形式展现出来。节省了点击菜单按钮的时间，提升了使用的便利性。 
点击加载图片
1-4）可折叠式组合提升检索效率 抽屉式和下拉式展开的菜单中，更多的是和风琴式开合菜单搭配使用。这大大提高了不用跳转页面就能够找到想去页面的入口的便利性。 
点击加载图片
1-5）其他 作为表现的变化，将三条线的 icon 加入企业 logo 的精髓的创意，更新的内容加入易于发现的标志的创意都是经常看见的。 
点击加载图片
02）区域导航 不同于全域导航有固定的位置的区域导航，布置的方式大概有以下四种。有必要根据使用的情况决定表现形式，调查中只有 SUNTORI 使用的是横向滑动的样式。别的模块在后面讲解，横向滑动很容易让人感觉不到可以滑动，因此在使用的时候需要十分注意。 
点击加载图片
03）面包屑导航 调查显示 61% 的移动端网站都没有面包屑导航。和 PC 端不同，在这么小的屏幕上，与现在的位置相比，其他的要素更加重要。 
点击加载图片
在 PC 端一般式从左到右按层次横向排列，而在移动端网页通常将要素纵向排列，或者使其可以滑动，这样很好地调和了面积小的问题。 
点击加载图片
04）移动导航 和 PC 相比较，手机的屏幕小，一屏能展示的要素有限，因此多采用辅助目标内容的移动导航。 
点击加载图片
返回顶部按钮在最下方设置的网站占 42%。有在右下角采用半透明的方式，我推测是因为，当返回顶部不是重要的功能时，会挡住重要内容而暂时隐藏。
点击加载图片
05 ) 按钮的固定 我们可以看到很多网站为了方便用户随时点击，固定显示了各种各样的按钮。在很多信息中有目的筛选的网站会固定显示一个搜索按钮。
点击加载图片
并且在详情页面为了唤起购买和咨询的动作，经常把 CTA 按钮固定显示。
点击加载图片
此外还有各种各样的网站，在浏览当前页面的时候就考虑好接下来的动作，将与之相应的按钮固定显示。
点击加载图片
06）滑动导航 6-1）扩大使用范围的滑动导航 滑动导航能在狭小的区域内将多个项目的目录很好的显示出来，本来将包含图片等图形化元素的目录进行滑动处理的趋势就很明显，最近这种表现手法的使用范围正在进一步扩大。首先看一下表现滑动范围的方法和补充搜索的多个关键词的例子。
点击加载图片
而且，像雅虎新闻评论和展示 google 搜索结果的 AMP 一样，将文本做为目录主题进行滑动处理的例子也越来越多。
点击加载图片
6-2）滑动导航使用时要注意什么 最然滑动导航能节省空间地将众多目录方便的表现出来，但在使用过程中也有必须注意的地方。那就是横向滑动的时候是否能够一下子看出可以滑动。举个例子，2015 年开始苹果音乐的移动端网站采用了滑动导航，2016 年就改版为风琴式菜单了。应该就是因为菜单的横向滑动不容易被用户察觉。
点击加载图片
下面两个网站边缘部分的位置让人能够意识到这是可以滑动的。对于重要的选项，很有必要为了让用户意识到这种滑动的交互方式而下功夫。相反的情况，对于网站目的达成并没有那么强的关系的时候，也最好能够体现出来。
点击加载图片
07）下拉式菜单 下拉菜单可以将众多选项高效地容纳在一小块区域内，当选择项目没有点击菜单后弹出选择器时那么多的时候，经常使用下拉式菜单。可以说在选项比较少的时候是很便利的方法。
点击加载图片
08）表单 本来在智能手机的检索中，将想要搜索的文字全部输入之前，就会出现建议结果从而节省输入时间的趋势已经很强烈。立足于这一特征，可以看到很多具备建议功能的站内检索表单。并且像邮政编码和电话号码等需要先限定数字的情况，需要考虑数字专用的关键词。可以说表单是立足于智能手机的特性，一种重要的输入辅助手段。
点击加载图片
09）标签 在小屏幕中，尤其是必须表现出来的承载众多信息的标签，其表达方法是 UI 令人头疼的一件事。表示方法有同移动端网页一起再次排版的，也有使用滚动条或者提示 ' 请放大确认 ' 的情况。
点击加载图片
10）细节的注重 为了达到舒适的操作和阅览体验，追求细节的高质量网站越来越多。表示需要等待的时候会设置加载，为了使操作方法更易理解采用小动效，为了 APP 能够有更好的用户体验，追求各种细节的表现。
点击加载图片
总结 多看多积累，随时了解流行趋势，对于 UI 设计相关的工作者来说是非常必要的。不是只看网站，要培养能看出来变化的视点，就能在实际工作中灵活使用这些知识了。 本来是为了公司内部学习会准备的这次记录，经过整理进行了公开，希望能够对大家有一些参考价值。 译者：学 UI 网翻译社 - 丹丹 原作者：荒砂智之 |
|
|
