从大屏幕到小屏幕迁移的三种设计方案

由于手机终端纷繁复杂,各种分辨率的屏幕,各种适配不同机型的特殊规则,都对">手机网站的设计提出了更多的要求。大屏幕上已有的网站向小屏幕的设备上迁移,是需要经过一些调整的,今天就来探讨三种可用的迁移方式。

拍扁式手风琴式棋盘式

一.第一种:拍扁式

这种形式最简单,也是目前web迁移到wap采用的最多的一种形式,就是把主流的1:2:1三栏布局的web网页拍扁成一个线性的一维的wap页面,比如看这张图1-1

图1-1

这是elya自己的网站,如何将它转化为一种线性的形式呢?

一种有效的方法,就是将主要的导航栏移至页面的顶部,然后在下方,按照区块的重要程度依次排列起来,文章以标题显示,导航可以反复出现,让用户可以在页面的任何位置都能方便的调整,页面太长也可以在页尾设置一个返回顶端的按钮。比如我们按照图1-2的形式

图1-2

按照1、2、3、4、5的重要层级把web网站纵向排列成一个竖条,就成了wap网站,如图1-3:

图1-3

有很多浏览器是能够自动做出这种转换的,比如Oprea浏览器,它能自动的将web内容呈现形式转化为线性的。然而这种自适应远不能替代你的设计工作。

二. 第二种 手风琴式

线性视图是能够解决一个信息排列的问题,但是无法解决大量的信息堆积在一个小屏幕上,用户怎样才能获得网站的全貌这个问题。为了减少冗余的信息,我们需要学会利用归纳或隐藏内容的技术,或者说是利用摘要。用户首先看到的仅仅是一个简单的摘要,但是可以随着层层展开,可以看到更多更详细的信息。最理想的状态是,当用户将内容展开以后,展开的内容可以沿着垂直轴收缩。

正如传说中的“手风琴摘要(accondion summarization)”的浏览方法,就像手风琴一样,它可以让内容展开或者收缩以便看到更详细或更摘要的内容。

如果你想通过摘要的形式,把web网站转换成wap,可以采用很多种方法,比如Mobile Interaction Design中提到的:

递增的——一开始只显示文本的第一行,随后显示前三行,最后显示整个文本关键词——首先自动显示从文本中提取的关键词,然后显示前三行,最后显示整个文档概要——一开始显示最重要的句子,在第二次点击后会显示出全文内容关键词/概要——综合了关键词和概要的方法,先显示出关键词,然后是关键句子,再点击一次会显示全文内容

举个简单的例子,如图2-1,就是把图1-3的elyaaa.com的wap网页做了缩略处理。

图2-1

三. 第三种 棋盘式

第三种方法则比较艺术,我们都知道,用户的空间记忆能力远比文字记忆能力强的多得多,也就是说网站的大概布局,那部分是什么内容,用户基本上是知道呢,那么如果想让用户在进入页面后仍然保存着对全局的感知,同时能缩放局部达到浏览细节的效果,岂不是很好呢?

这里有两种方法,第一种是局部点击缩放法:

比如我们仍然用elyaaa.com的页面举例,见图3-1:

图3-1

这个方法是加载了页面全局之后,点击局部放大成右侧的详细内容。当然这对没有使用过web而直接使用wap的人来说可能会造成一定的负担,因为小屏幕确实无法看清详细的文字。

第二种是九宫格法:

具体的例子不详述了,可以借鉴Facebook客户端和Opera浏览器的样式和思想,不多说,见图3-2:

图3-2

以上是最近的一些收获和思考,还没有具体实践到操作层面,总结如下,小屏幕到大屏幕的迁移方法主要有如下三个:

拍扁式手风琴式棋盘式

如果有不符合实践层面的地方,还请大家批评指正,希望积累更多实战经验,分享更多设计心得体会。

elya原创,转载声明:http://elyaaa.com/product/536.html

时间: 2024-10-03 20:31:51

从大屏幕到小屏幕迁移的三种设计方案的相关文章

大数据促进中小企业快递航运战略三种方法

如今,消费者提高了快递航运期望,这意味着从事快递航运业务的中小企业必须提高他们的战略水平,以应对更加激烈的竞争.大数据被认为是大公司通常采用的技术,而这被中小企业作为一种资源以满足客户的需求,并与行业巨头竞争. 进行大数据分析可以显示规律和趋势,特别是涉及到一个企业的行为时.大多数公司已经在他们的电脑中有大数据,例如Excel表格中的记录,谷歌分析,以及存储在云计算中的数据.但直到最近,许多企业还没有自动化的算法和解决方案来分析和解释这些数据集,进行预测,并作出商业决策.   虽然大数据经常与大

网站界面从传统显示屏转到手机屏幕三种可用的迁移方式

传统网站都是以显示器屏幕为基准设计,然而随着手机互联网的普及,越来越多传统网站开始向手机屏幕迁移,本文将讨论三种这个过程实现步骤 由于手机终端纷繁复杂,各种分辨率的屏幕,各种适配不同机型的特殊规则,都对手机网站的设计提出了更多的要求.大屏幕上已有的网站向小屏幕的设备上迁移,是需要经过一些调整的,今天就来探讨三种可用的迁移方式. 拍扁式 手风琴式 棋盘式 一. 第一种 拍扁式 这种形式最简单,也是目前web迁移到wap采用的最多的一种形式,就是把主流的1:2:1三栏布局的web网页拍扁成一个线性的

使Win8屏幕上的文本变大或变小

  无需更改显示器或便携式计算机屏幕的屏幕分辨率即可使文本(及其他类似图标的项目)变大. 这样,你既可以使文本易于查看,又可以让显示器或便携式计算机设置为最佳分辨率. 整理互联网和微软官方文档发布. 通过以下方式打开"屏幕分辨率":从屏幕的右边缘向中间轻扫,点击"搜索"(如果使用鼠标,则指向屏幕的右上角,然后将指针向下移动,再单击"搜索"),在搜索框中输入"显示",然后依次点击或单击"设置"和"显

小屏幕实现大数据 大众点评的分享

当手机端为大众点评带来的流量已经超过网页端,手机端优惠券的使用数占比已达到75%,网页端下降到25%时,这家公司对于移动端产品的规划一直都在悄无声息地进行着. 在专访大众点评副总裁姜跃平时,他透露,大众点评一直在内部做一些新应用的开发和测试.至于会不会把团购单独做成一个应用,把网站端的一些内容,比如榜单和攻略移植到移动端做成信息类应用,这些都在大众点评的考虑中.姜跃平2010年加入大众点评网,当前主管产品和运营. "是否做独立App是经常面临的一个挑战,主要考量的因素是能否满足主流用户的刚性需求

小屏幕 大境界

小屏幕 大境界 --中小尺寸平板显示市场发展综述 概况 "只闻其声,不见其人",从古以来就是一大遗憾,盖"耳听为虚,眼见为实","百闻不如一见"也.据报道,人类接受外界信息,85%靠的是"视觉",因而以传输和处理信息为已任的电子信息产业,显示器件无乃是至关重要的基础之一.业界人士有云:未来显示器市场将超过半导体.当然,这还要待以时日,据统计2004年世界显示器市场(CRT+FPD)大约为700亿美元,2007年可望接近千亿美元

小屏幕移动设备界面设计WAP页设计注意事项

网页制作Webjx文章简介:小屏幕移动设备网页设计注意事项. 在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站.原因是这类网页起源于一个叫WAP的无线协议.WAP能够运行于各种无线网络之上,如GSM.GPRS.CDMA等.WML是无线注标语言(Wireless Makeup language)的英文缩写.支持WAP技术的手机能浏览由WML描述的Internet内容. 而如今的小屏幕移动设备,比如手机,都已经具备访问WWW的能力.其内置的浏览器,或是第三方浏览器大多是WebKit引擎.

小屏幕改变了哪些邮件设计规则?

小屏幕改变了哪些邮件设计规则? 时间:2014-11-13 14:01 来源:快鲤鱼 作者:快鲤鱼 电子邮件营销的未来在于适应周围环境的能力.全球超过一半的电子邮件在移动设备上被打开,而根据全球领先的多渠道智能化营销服务商webpower的邮件客户数据分析,中国地区电子邮件移动设备打开率也增速迅猛,达到30%以上,而这一比例 预计在未来几年将继续增长.同时,不容 忽视的是,至少50%的移动用户将关闭或者删除没有优化阅读的电子邮件. 对于邮件发送者来说,解决移动小屏幕的邮件用户体验的一个最方便的解

小屏幕移动设备网页设计注意事项

在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站.原因是这类网页起源于一个叫WAP的无线协议.WAP能够运行于各种无线网络之上,如GSM.GPRS.CDMA等.WML是无线注标语言(http://www.aliyun.com/zixun/aggregation/6155.html">Wireless-Makeup-language)的英文缩写.支持WAP技术的手机能浏览由WML描述的Internet内容. 而如今的小屏幕移动设备,比如手机,都已经 具备访问WWW的能力.其内置的

手机小屏幕界面设计原则

1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志. 2014年,还是这个春天,移动设备的普及成为当下http://www.aliyun.com/zixun/aggregation/6298.html">互联网发展的又一次变革,我们在各种小屏幕上画着一个又一个的圈,如今,用户的移动体验无意正在变得更好,因为越来越多的网站已经开始为移动设备做了设计,设计师们也明白什么更适合小屏幕.然而,在手机上执行任务操作仍然存在着许多障碍. 亲爱的设基师朋友们