当前位置: 网站建设 > 网页设计 > 建站经验 >

具有引导性的移动应用界面设计模式 搜索、排序和筛选

时间:2013-03-02 03:54来源:未知 作者:admin 点击:

标签:具有引导性的移动应用界面设计模式 搜索、排序和筛选 排序(2)界面(2)应用(28)引导(4)设计模式(2)移动(4)性的(20)筛(1)具有(5)搜索(14)
, 关闭XPSP2运行本地HTML文件的安全警告 已保存的/最近的搜索条目 排序 Tag:搜索 排序 筛选 界面 引诱 移动 应用 具有 下图右侧的Target应用将四种排序方式整合到了三个切换按钮中,其中的价钱是可以进一步切换成为升序或降序的。 用户可以在搜索表单中使用某些高等搜索选项,例如通过某种方式选定搜索规模等。另外,搜索表单当中通常还会包含一个在视觉呈现方式上很凸起的搜索按钮。 幻想情况下,系统应当跟着用户的输入而立即提供搜索结果,但在实际当中,用来反馈系统工作状态的视觉提示也是必要的。上图右侧
具有引导性的移动应用界面设计模式 搜索、排序和筛选》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233T32013.htm
,关闭XPSP2运行本地HTML文件的安全警告

已保存的/最近的搜索条目

排序

Tag:搜索   排序   筛选   界面   引诱   移动   应用   具有    

下图右侧的Target应用将四种排序方式整合到了三个切换按钮中,其中的"价钱"是可以进一步切换成为升序或降序的。

用户可以在搜索表单中使用某些高等搜索选项,例如通过某种方式选定搜索规模等。另外,搜索表单当中通常还会包含一个在视觉呈现方式上很凸起的搜索按钮。

幻想情况下,系统应当跟着用户的输入而立即提供搜索结果,但在实际当中,用来反馈系统工作状态的视觉提示也是必要的。上图右侧,关于迅雷网站的设计分析,Netflix直接将状态提示做在了症结词输入框内部靠右真个地位;另一种常见的做法是将其放置在搜索结果所要呈现在的位置。

破洛洛文章简介:移动应用界面设计模式 - 搜索、排序、筛选.

包括大批数据的内容列表需要被进一步的筛选,才干更有效的向用户转达信息。惯例的筛选模式包含:

我们将搜索结果本身也看作全部搜索功效中的一个模式。搜索结果可以涌现在与搜索操作雷同的界面中,也可以存在于一个独自的搜索结果界面当中,看需要。搜索结果的呈现方式是多种多样的,包括表格(table)、列表(list)、缩略图等,另外还可以显示在舆图当中。统一款应用可以同时使用几种不同的搜索结果表示形式,具体方式取决于搜索结果的类型及用户的设置,关于解决网站内容复制几点建议

很多应用会在同一个界面中整合运用多种排序及筛选方式,这种方式通常被称作"精炼(refine)",它很复杂,但却能赞助用户得到最准确的搜索结果。在移动应用中,"精炼"的方式大多承载于一个表单界面中,用户需要在里面根据自己的需求做出选择,并提交这些搜索条件。

排序切换

作为最普通和最常见的搜索模式,显性搜索依附显性的动作行为及表现方式来执行搜索任务、展现搜索结果。在这种模式中,搜索按钮会出当初输入框的右侧,或直接嵌入虚构键盘中 (这种情况下可以将"取消"按钮放在搜索栏中)。搜索结果通常会直接呈现在搜索栏下面的区域当中。在设计方案里,可以考虑将线性搜索与自动完成模式搭配使用。

自动完成

动态搜索

搜索结果

显性搜索 自动完成 动态搜索 指定搜索范围 已保存的/最近的搜索条目 搜索表单 搜索结果

与这条可用性准则相关的设计模式还包括Trulia中的基于地舆位置的搜索、Amazon的条码搜索、Google Shopper中的扫描及语音搜索,以及按照搜索日期进行分组的搜索历史记载。

筛选

破洛洛文章简介:移动应用界面设计模式 - 搜索、排序、筛选.

不要对筛选机制进行适度的设计,通常情形下,坚持在当前界面中的筛选切换模式或开展列表模式都可以胜任。假如信息构造较为复杂,必需使用表单模式,那么要严厉遵照系统平台的设计标准及具备广泛意思的最佳实际模式。

 

取舍器模式算得上是切换模式的良好替换品。良多类型的UI控件都可以在这个模式中派上用处,详细的应用方式还要参考不同系统平台所供给的设计规范。例如,在Android应用中,菜单情势比拟常见,而对于iOS来说,挑选器(picker)和动作表单(actionsheet)都是比较适合的控件。

根据产品自身的情况,公道的划分搜索类型,以便用户在执行搜索的时候进行选择。通常三到六个选项就够了,必要的时候可以通过表单来实现高级搜索功能。

如果可选的排序方式不算太多,我们可以使用这种最简略的解决计划。将排序切换按钮放置在搜索结果的顶部或底部(详细位置依据界面中其余相关元素的布局而定),用户无需分开当前视图就可以轻松转变排序方式。

此外,Android中的组合框以及iOS中的弹出笼罩菜单都可以用在这种模式当中。

很多信息类服务站点都是通过火类的方式来组织相关内容信息的,例如交通工具方面的卡车、货车、SUV等;而Greensheet这样的网站则是直接将售卖信息一股脑的堆在一个又一个的页面中,如果我(英文原文作者)想找点儿什么,真的必须挨个看下去。谢了,我还不如直接在手机上用Craigslist应用呢。

在弹出对话窗的模式中,尽量保持选项列表的间断,防止滚动的产生。

CBS News和ACL Festival的应用都使用了横向可转动的筛选栏,让用户可以在不同类型的内容列表之间敏捷切换。

 

 

搜索

决议放假期间先不上iOS Wow休会了;手头这篇译文不做完的话我心不甘。去年年底,我们曾经学习过一篇"具有引导性的移动应用界面设计模式",其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个至公鸡的那本儿。今次这篇则是来自于本书的第四章——搜索、排序和筛选。貌似国内引进版也由XX出版社在做着了,真心不关我事,关于网页标题的视觉设计方法和技巧,自己走起。接下来武断精分,进入原文作者人格。

为搜索结果选择一种最适当的默认排序方式是很主要的,通常,我们可以根据自己产品的实际特征以及用户盼望来对其进行设定。而改变搜索结果排序方式的设计模式大抵有以下三种:

排序切换要有清晰明确的视觉呈现方式来表白"当前"的状态。

要在移动应用中应用各种控件创立庞杂的筛选表单,关于网站评论页面设计的一些指导原则,这不是一件很轻松的事儿,不外看上去Roambi做的不坏:

显性搜索

在使用Craigslist的进程中,我就揣摩着,作为一般用户,我们确切可以很显明的受益于那些在信息的搜索、排序和筛选方面做的很到位的UI设计模式。在本文中,我们将一起懂得一下,有哪些设计模式可以辅助我们按照用户所冀望的方式将数据信息更加有效的组织和浮现出来。

排序表单

在保留搜索结果的模式中,用户通常还须要破费额定的步骤为搜索结果命名,作为未来查看时的索引方式。而"最近的搜索条目"则由系统自行保存及出现。对本人的产品,要考虑哪种方式更加合适。

弹出对话窗拥有模态特点。用户必须选择一个筛选选项,或是撤消筛选动作。TripAdvisor的iOS应用使用了自定义的筛选对话窗,而USPS的Android应用则在对话窗中使用了系统原生的控件。

请在实际产品中优先考虑切换模式或抉择器模式,尽量下降产品复杂度。

首先为各位推举两本这方面的好书,"Search Patterns: Design for Discovery"跟"Designing Search: UX Strategies for eCommerce Success" (前者海内有引进,即《搜索模式》一书)。而后咱们接茬来看挪动运用当中与搜索相干的设计模式。

许多应用都会在搜索结果中使用延迟加载技巧(lazy loading),关于网站维护内容和维护方案的制定,通过这种方式首先加载一部门搜索结果,同时另外一局部持续载入。通常有两种方式可以触发更多内容的加载,一是自动加载,二是由用户手动点击某个按钮或链接来履行。

TripAdvisor提供了一种更为杰出的自动完成模式,他们直接将即时呈现的搜索结果按照热点的旅行目标地、宾馆酒店等类型进行了归类。LinkedIn的做法也有多少分类似,他们会优先显示那些与当前用户有直接联系关联的搜索结果。

排序切换 排序选择器 排序表单

与排序切换模式相似,关于网站日志中的不完整url或莫名其妙的url抓取,筛选切换同样会在搜寻结果界面当中显示,例如在界面顶部或底部。通常只要一次点击,用户就能够对搜索成果进前进一步的筛选过滤。HeyZap利用使用了尺度的切换按钮控件,而Google则应用了纵向tab切换。

--> [网站建设之]存在领导性的移动应用界面设计模式:搜索、排序和筛选

筛选展开列表

优良的移动应用界面设计都会尊敬一条最根本的可用性原则:尊敬用户的付出。在搜索中,已保存的或是最近的搜索结果就是这条原则的良好体现。通过这两种模式,用户可以轻松的选择曾经搜索过的关键词,完整不用从新输入。

筛选切换

 

破洛洛文章简介:移动应用界面设计模式 - 搜索、排序、筛选.

采取类似做法的还有AllRecipes以及Dropbox的应用。在Dropbox中,默认的搜索范围是全体内容,但无论在搜索被执行之前,仍是停止之后,用户都可以进一步选择搜索范围,例如搜文件或是文件夹。

这同样是一种很有效的信息筛选方式。滑动或点击界面底部或侧边的某种"把手",包含筛选选项的列表界面就会展开。在下图中我们可以看到,Audible应用的展开列表中只有一个简单的筛选切换栏,而Sam的展开列表所提供的筛选项目则复杂的多,关于旅行网站的个人看法。不过对于后者,更好的设计方案是去掉"Filter"按钮,让地图可以随着用户的选择而动态更新。

在某些情况下,可以让用户在执行搜索之前对搜索对象的类型和范围进行界定,从而得到更契合需求的搜索结果。Google和Photobucket的应用在指定搜索范围的操作形式上略有不同,但终极目的都是一致的。

比拟于切换模式来说,选择器模式容许更长的文字题目以及更多的选项。上图中,Walmart的Android应用在搜索栏当中放置了一个按钮,用来翻开排序弹出层。而下图中,Kayak的iPhone应用则将用于展开排序选择器的按钮放在了搜索结果的底部。

通过视觉提醒向用户反馈体系当前的工作状况;可以斟酌在搜索结果中对当前已输入的字符进行侧重显示。

排序选择器

筛选表单

不过,不倡议用这种方式作为应用的主导航。

动态搜索模式用来对数据集进行即时的精炼和筛选,例如可以被用在地址簿或个人媒体库等方面的应用当中。但该模式不适于数据范围过于宏大的状态。

这种模式也可以被称为"动态筛选",当用户在搜索栏中输入要害词时,已有的搜索结果会随之进举动态的筛选。看上去,这与前面的"主动实现"模式是差未几的,但实际上它们在交互模型方面有所差别。动态搜索模式的重要作用是对已有的信息列表进行提炼和筛选。

筛选切换 筛选展开列表 筛选对话窗 筛选表单

Freetime在筛选表单中使用了高度自定义化的控件元素。用户首先需要在里面选择一个主要的分类名目,然后在相应的二级筛选栏中做出选择,最后提交这些筛选选项。

筛选选项的案牍必须清楚易懂;被选中之后,要能明白的显示出"当前"状态。

指定搜索范畴

破洛洛文章简介:移动应用界面设计模式 - 搜索、排序、筛选.

可以说,这是随着Web 2.0那波儿大潮所出现出的一种最经典最适用的搜索模式。用户在输入关键词的同时,系统会即时提供一些根据当前已输入文字所猜想出来的搜索结果,如果用户发明其中的某个条目恰是自己想要的,那么直接点击就可以完成搜索,关于大型网站架构必须考虑的问题。当然,在不恰当的候选条目或是用户感到不手动输入完全关键词就活不下去的情况下,这依然是一个可能畸形完成搜索功能的普通模式。

前提筛选是一种绝对高级的筛选机制,我们可以在Wufoo的Web应用中看到这类很标准的筛选模式:

对话窗模式确实可以很好的完成筛选义务,不过前两种模式当中不包含具有模态特征的控件元素,这可以使用户更加自在的在不脱离当前界面高低文环境的情况下尝试各种筛选选项。

尽量把持搜索表单中的交互元素数目,并依照准确的方法使用这些交互元素,关于团购网站转型的思考。在视觉上留神细节的掌握,例如元素的对齐、文字标签的布局及字号等。

我们可以使用延迟加载技术来取代传统的分页阅读模式,特殊是在移动应用的上下文环境中,分页导航方式有悖于天然的交互模型,不合乎用户直觉。另外,最好让用户了解搜索结果的条目总数,并为搜索结果提供合理的默认排序规矩。

搜索表单

在这种模式中,提供显性的搜索按钮,同时还可认为用户提供用来取消当前搜索行动的操作方式。当搜索正在执行时,提供明确的状态反馈。

参考相关系统平台的设计规范,在排序选择器模式中使用最恰当的UI控件。对当前选中的排序方式,要以清晰的、轻易辨识的视觉表现形式来突出显示。

SXSW应用将两层筛选按钮栏合并在一起使用;而Feed a Fever消息浏览器则将两个组合框以十分简约的视觉作风排列在一起,作为一套同一的筛选切换组件。

筛选对话窗

 

与前面提到的排序表单模式类似,我们可以将一些高级的数据筛选和精炼选项整合在一个表单界面中。例如,WorldMate许可用户在筛选表单中按照价格、品牌和星级来筛选某地的酒店信息。Zappos的应用也采用了类似的做法,不过他们使用的基础都是iOS原生的界面控件。


(责任编辑:网站建设)
具有引导性的移动应用界面设计模式 搜索、排序和筛选相关文章
上一篇:关闭XPSP2运行本地HTML文件的安全警告 下一篇:兼容ie、firefox的图片自动缩放的css跟js代码分享
回到顶部