365买球网站来人人都是产品经理【起点学院】,bat 实战派产品总监手把手 系统带你学产品、学运营.

　　在这篇文章中,来自 uxpin（一款用户体验设计的应用程序）的 chrisbank 为我们带来了最近在现代互联网和移动应用中出现的一 些优秀的用户界面模式,并将通过实例展示如何将这些出色的 ui 设 计模式应用到其他的网站和应用中.

　　毕加索曾说过（乔布斯也曾引用 过）:“goodartistscopy,greatartistssteal.”（通俗的译文是, 好的艺术家复制别人的作品,而伟大的艺术家偷窃别人的作品.）这 是最令人费解和误用的创造性短语之一,但在当下产品设计和产品发 展趋势已经爆炸的时代,这也是相当重要的一句话.

　　这句引语的争议性来源于它的简要,因此对于它的诠释也具有一 定的开放性.内容中对于复制和内在化,原创性和创新性,模仿和同化 的区别没有讲明.然而,这不是懒惰的借口.当然,应该鼓励学习他人 的作品,站在巨人的肩膀上设计自己的产品为特定的人群解决问题－ 为了那些你终端用户.

　　ui 设计模式－和线框案例,你准备好了吗？ dropbox 和 carousel,以及几乎所有应用中都设有“黏固的”导 航,这已经是一个通用的移动设备用户界面的设计模式.通过这种设 计模式,用户在浏览过程中无需再一路滚动返回到先前主题.例如许

　　多应用程序已允许用户触按移动设备屏幕顶部的区域以实现快速返 回到页面最上端这一功能（因此用户不需要再一阵长翻页来回到页 面顶部）.但与 pinterest 中设专门有“scrolltotop”标签的做法 不同的是,在大多数应用程序中通常对于这一项功能都没有明确的视 觉指示.作为一个网页开发者,没有必要将所有用户所需的相关链接 都放到页面上.现在,许多传统的固定检索已经可以被直接加载到任 何页面或视图中了（以前可能只有导航顶部才有）.如下图中的 dropbox 和 carousel,以及上文中我们已经讨论过的 uxpin 线框图.

　　垂直导航（虽然不是标准模式）是网页和手机应用中常用的视图 方式,如 facebook 和 mailbox.垂直导航这种交互模式除了帮助用户 寻找有关产品、企业的信息和数据外,通过一个流动式的单独页面, 用户可以在应用中自由切换到网页的其他模块.抽屉式就是垂直导航 的案例之一,现已被广泛应用在移动设备的 ui 设计中.

　　和切换（toggling）相类似,抽屉式是一种 ui 设计趋势,考虑到 移动设备屏幕的约束以及用户对于速度的需求.在应用中,每一个滑 出式的抽屉都是一个独立的“层次”,其实并没有太多限制,我们依 旧可以看到很多多样的设计,包括一些可怕的设计.

　　yelp 就是一个试图将所有相关链接都排布在程序页面上的典型 案例.尽管他们 ui 设计模式中的功能很详尽,在电子刊物中似乎想要 用尽所有可能的交互方式,例如滑动,点按,框选,撤销,返回等等.但 事实上,诸如此类包含很多内容的应用程序的模式,如 flipboard,有 时反而会使程序应用更加混乱.下图中,我们用 uxpin 为这种设计模 式制作了一个线框分析.

　　carousel 中不仅有一个可视的滚动操控条,在其底端还有一个很 明显的控制条,这使用户可以很惬意地在百万张照片中自由浏览.随 着由用户自行产生的内容、动态、群组、列表越来越多,更多创新的 ui 设计模式也会超越传统的搜索方式以帮助用户及时找到他们想要 的内容.

　　在 tinder 应用中,内容之间的切换是无缝响应的,用户只需要通 过点击视图界面中的主图就可以切换到该图的详细信息页,再通过点 击图片回到原来的基础页.这种 ui 设计模式为用户创造了极致流畅 的、本能的用户体验流程.同样,在 okcupid 中也用到了这种方式.

　　在 uber 中,仅通过横纵向拖曳的方式,用户就可以很流畅地在四 类汽车接送服务中切换.这种 ui 设计模式还可以让用户看见可选择 的车辆数量,并通过放大和缩小画面来了解选择地区的车辆密度.

　　当用户选定了一种接送服务后,通过敲击按钮可以在预订的同时 还可以查看到相应的预估费用.这是一个非常简单但很重要的设计,

　　因为每当我们在预订接送时,还会做一些其他的事情,这个费用查看 设计可以让我确保 uber 没有随意改动价格.

　　relateiq 用压低主菜单的方式以快速突出副菜单的导 视.relateiq 属于目前市场上最复杂的公司移动应用之一,因此他们 要与现有的、新的应用的 ui 设计相区别,带给用户快速、清新、简 易的体验,同时不以牺牲他们的产品信息为代价.

　　snapchat 中可以发现隐藏的信息－点按 snapshat 页眉－可以看 到已接收信息和未读信息的数量.这难道不是一个很简易的 ui 设计 吗？

　　yelp 应用中,向下拖动页面时,可以从具体的商家信息列表过渡 到一张被掩藏在上端的半透明图示.半透明式和响应式的设计创造了 极好的体验,这种方式也有可能是目前最鲜为人知但又相对高级的 ui 设计模式了.希望有更多设计师可以考虑运用这种方式！

　　在 secret 中,用户需要采取一些行动来发现导航栏－即右端滑屏, 但这种 ui 设计可以最小使用抽屉式和滑出式,下面的链接中有我们 用 uxpin 做的线框案例.

　　linkedin 的 app 中,用户可以在任何时候点按页面左上角的 logo （通常是一个三线“汉堡式”菜单图标）来获取这个辅助导航.这种 ui 设计最初在 facebook 的移动应用中流传,随后又被如 path,fancy

　　和其他类似的公司采用.这是一种将相对次要的信息隐于“侧抽屉” 中的一种简单方式,不必担心移动应用该如何分辨出最重要的信息. 你只需要考虑如何当用户访问时,在这个“侧抽屉”的每一个视图信 息中能让用户抓取到最重要信息.下方也有我们用 uxpin 做的线框案 例.

　　snapchat 是为用户创造沉浸式体验而采用最简化导航群组的案 例之一.在 snapshat 中,四个传统的菜单按钮被更主要的 1-2 个按键 图标取代,这些图示会随着菜单视图的切换而改变.然而在应用中切 换菜单视图也十分简单方便,用户可以通过点按这几个主要的图标, 亦可以通过左右滑动屏幕.这是 ui 设计模式中十分独特的实现方式, 对于如此简单纯粹的操作方式,笔者在其他应用中鲜有遇见.