手机界面交互设计:合理的导航方式设计

文章描述:手机界面常用导航设计分析.

所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互。当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了。但当等到信息是海量的、在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里。在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航。

明确了定义,我们就该知道,一个好的导航设计应该让用户明白:

1、现在在哪儿

2、以前去过哪儿

3、将来应该/能够去哪儿

4、怎么去

5、怎么回

判断一个导航方式设计的是否合理,也可以利用这几条一条条比对一下。下面,让我们来看一下手机界面中常用的导航方式。

一、拖动

定义:手指在屏幕上按下,向某方向平移。

适用情景:若要呈现的信息超出一屏所能容纳的范围,则在符合用户心理模型的前提下,可以将内容在一维或者两维德方向上排布,用拖动屏幕内容的方式来浏览所有信息。

例如,很长的文章、电子书、列表(纵向的一维),一年内的详细股价折线图(横向的一维),地图、1:1显示的网页和图片(二维)

讨论:没错,你没有看错,这是触摸屏手机上最简单、最土鳖也最基础的手势。按照对导航的定义,这确实是一种导航方式,用户可以向某个方向拖动屏幕,去浏览当前屏幕以外的信息。用户很容易学会使用这种导航方式,就是把挡在边框外的内容拖进来看嘛。最简单的方式,往往也最有效的。

完美无止境:

虽然这是最土鳖的导航方式,但是为了设计一个符合刚才所列5项基本原则的导航,还是有很多创意可玩的。

KnotGuide在同一页上显示了绳结的示意图和解说。过长的解说文字需要先隐藏一部分,拖动浏览全部。为了让用户知道将来能够去哪里(3),它给文字的底部蒙了一层半透效果,以暗示还有一部分没展示,可以继续往下看。同时,在刚进入该页面时,文字区右侧的scrollbar会短暂显示2~3秒,再消失,这也能起到同样的暗示效果(这可能是Android平台内置的默认效果)。

aCurrency将暂时无法展示的多种汇率横向排布在屏幕外。为了展示将来能够去哪里(3),它将藏起来的部分漏了一点出来,折在当前页的后面。没记错的话,这种设计应该是从Mac的文件和唱片浏览上得到的灵感。

最经典的拖动导航还是应属iPhone的homescreen。在homescreen上,Apple设计了一个位置指示器。这可以帮助用户很容易地理解当前在哪里(1),可以去哪里(3)。同时,在拖动屏幕的时候,Apple也设计了平移的转场动画,这很好的帮助用户理解怎么去(4),怎么回(5)。

当网页内容大于屏幕展示范围时,Android内置的浏览器会在用户拖动网页的时候在屏幕的下侧和右侧展示两个灰色的scrollbar,暗示用户当前所处的位置(1),以及可以往哪里移动(2)。

二、一维条目

定义:将每一项信息列作一条,展示在纵向的条目里。

适用情景:

信息可以梳理为很多项目,项目与项目之间没有概念上的交集,总体数量在15个以内,再多就得考虑多分一级了。

它非常适合展示层次分明的分级结构,一层层地drilldown下去,条理很清晰。

讨论:一维条目是手机界面设计中较为朴素和常见的一种导航方式。每一项都可以在点击之后进入下一级。但是展示的项目不宜过多,在信息的海洋里晃来晃去找不到想要的东西是很让人懊恼的。如果一级上面的项目太多,就可以考虑做一下归类,再分一级下去。

完美无止境:

为了让用户知道应该选择哪一项(3),条目都会用最大的尺寸去展示标题。同时,还会有一些辅助内容帮助用户判断,比如该项包含的内容、该项当前的状态、该项下未读过的子项目、图标。

如果项目过多,又不想再分一级,可以将项目分组,加上名字并在视觉上加以处理。

由于iPhone上没有“back”,它设计了统一的导航规则。表“返回”的按键始终在屏幕上角(5),表“完成”的按键始终在右上角。同时,按键上还会写上“返回至哪里”。

将进过的项目和未进的项目区别开来,用户可以知道去过哪儿(2),还可以去哪儿(3)。

这个钢琴模拟器其实也可以视作纵向一维条目。右侧的这个位置指示器可以视作一个做了个性优化的Scrollbar,可以拖动以改变当前位置(4,5),也可以展示当前的位置 (1)。

将列表项目按某个规则排序,并且将排序标题展示出来可以增加用户对长列表的容忍度,同时也能暗示用户当前的位置(1),以及为找到相应的项目接下来该怎么走(3)。

[1] [2] [3] [4]  下一页

时间: 2024-09-12 07:41:46

手机界面交互设计:合理的导航方式设计的相关文章

网页设计技巧总结:导航栏设计的三大要点

文章描述:在网页中设计导航菜单的三个原则(附案例). 导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航栏也是整体布局的重要组成. 总结一下,导航栏的重要性. 1. 浏览完Logo后,导航栏是用户第一个看到的组件.2. 导航栏的作用是引导用户.3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息. 想让导航栏更加优雅.美丽.响应式么?看看导航栏

手机界面交互设计:app的分类信息的布局方式

文章描述:APP上的分类信息的布局方式. 本文总结了一些app的分类信息的布局方式.以后发现其他样式了会继续更新,欢迎补充. 1,九宫格,如大众点评.人人网.facebook等. 2,每个分类平铺成条,如淘宝,凡客,京东.QQ美食,非常清晰. 3,下拉选择框,如维络城.QQ美食.百度身边,主要在于对信息进行筛选时使用. 4,大图滑动,如凡客.时光网等. 5,图片平铺,如百度身边.淘宝. 6,分类以标签的形式在上方导航条的下面水平铺开,可以滑动.比如网易新闻客户端.每讯客户端.QQandroid版

交互设计实例:手机界面中常用的导航方式

文章描述:手机界面常用导航设计分析. 所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 现在在哪儿 以前去过哪儿 将

手机界面常用导航设计分析

所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google 的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 1.现在在哪儿 2.以前去过哪儿 3.将来应该/能够去哪儿 4.

手机客户端交互设计原则及信息展现方式

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

交互设计研究:手机界面设计提示消息

文章描述:如何为手机界面设计提示消息. BulaBula罗列各种提示方式之前,我觉得有必要先思考一下消息提示之于用户的本质.毕竟知其然只是表面,知其所以然才能融会贯通运用自如.虽然可能让人觉得有点远,但应该会对理清逻辑很有帮助. 故事要从一只狗和一只老鼠的心理学实验讲起.巴普洛夫发现,若长期在喂狗之前摇铃铛,以后只要晃铃铛,狗就流口水.铃声勾起了狗进食的欲望.此称之为"经典条件反射".斯金纳进一步发现,若每次在老鼠碰到箱子里的一根杆后就投放食物,那么以后每当老鼠饿了,它就会去按杆子.此

手机客户端交互适配设计

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户

手机的交互设计方法:手机产品交互设计原则

一.用户体验信息收集 在讨论手机的交互设计方法之前,需要先对手机的用户使用习惯有一些基本的了解,需要对手机的用户体验信息做一些收集整理.收集用户体验信息首先需要确定两个问题:一是确定目标用户群体:二是确定信息收集的方法和途径. 在确定目标用户群体的时候,很显然的是,已有产品有过使用和交互经验,具备该产品或系统的交互体验的用户,相比较于那些没有体验的用户,可以为设计提供更多更有效的信息.因此在收集用户体验信息时,应该首先考虑所需设计的产品的用户或是有过类似产品使用经验的用户.在理想的情况下,当用

手机客户端交互适配设计之我见

简摘:本文从手机平台.机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂.在设计单款.单系列手机时,需要考虑这款手机的软.硬件优势及不足,考虑其特性.其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.说起来,这至多是考虑某个系统.某个屏幕的特性而已,而不同功能的所有设计基础都是一致的. 但是对于客户端,咋一看,好像很简单,就是设计一个应用.实则不然,客户