求职简历模板

首页 » 常识 » 问答 » 怎么从众多的优秀UI设计案例中思考和学习
TUhjnbcbe - 2020/11/12 17:10:00
白癜风专家李从悠 http://m.39.net/pf/a_4305598.html

来自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设计模式中十分独特的实现方式,对于如此简单纯粹的操作方式,笔者在其他应用中鲜有遇见。需要学习软件的同学,大家可以搜索锦子会,去锦子会

1
查看完整版本: 怎么从众多的优秀UI设计案例中思考和学习