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

传统网站都是以显示器屏幕为基准设计,然而随着手机互联网的普及,越来越多传统网站开始向手机屏幕迁移,本文将讨论三种这个过程实现步骤

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

  • 拍扁式
  • 手风琴式
  • 棋盘式

一. 第一种 拍扁式

这种形式最简单,也是目前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

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

  • 拍扁式
  • 手风琴式
  • 棋盘式

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

时间: 2024-09-19 08:15:41

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

Android 截取手机屏幕两种实现方法

Android 截取手机屏幕两种实现方法 最近在开发的过程中,遇到了一个需要截取屏幕保存为图片的需求,具体为截取webview的视图保存图片. 方法1:首先想到的思路是利用SDK提供的View.getDrawingCache()方法: public void printScreen(View view) { String imgPath = "/sdcard/test.png"; view.setDrawingCacheEnabled(true); view.buildDrawingC

关于诺基亚N9手机第三种交互方式的思考和再设计

N9公布后,让我对http://www.aliyun.com/zixun/aggregation/11210.html">Nokia的系统有了不小的改观,花了几天时间琢磨了一下N9的设计,感觉这一次Nokia在UI和交互上花了很多心思,屏幕外框感应区给传统的手机UI带来了新的交互方式,比起Android不大不小的改进,这一次Meego是真的走在iOS前面了. N9的Homescreen分为三个部分:信息流/通知,应用程序启动器/列表和任务管理器,左右滑动可以在这三屏之间切换(如图1),用户

解析Android截取手机屏幕两种实现方案

最近在开发的过程中,遇到了一个需要截取屏幕保存为图片的需求,具体为截取webview的视图保存图片. 方法1:首先想到的思路是利用SDK提供的View.getDrawingCache()方法: public void printScreen(View view) { String imgPath = "/sdcard/test.png"; view.setDrawingCacheEnabled(true); view.buildDrawingCache(); Bitmap bitmap

网站优化新时期下seoer必须具备的三种能力

众所周知,网站运维优化是一个循序渐进的过程也是一个不断的从策略到执行到验证再到新策略的调整这样一个循环往复的过程作为一个有思想的优化人员,笔者认为不仅仅要具备娴熟的优化经验和操作技能,其次扎实的网站技术能力和超强的自我管理约束能力更是作为一个优秀seoer必不可少的素质,好了闲话短续笔者将在下面几个层面和大家一一进行分析. 第一,扎实的网站优化实战操作能力.作为一个网站优化人员实战操作肯定是必须的,笔者认为无论你是新手还是老手一定要有自己在某个领域或者行业内能拿得出手的优化实战案例,这个是核心,

10个有用的网站界面设计技术和最佳做法

最近越来越多的软件应用迁移到Web .因为没有平台的限制或安装的要求,在web上以软件作为服务的模式看起来非常有吸引力. Web应用程序界面设计的核心是网页设计,但它的重点主要是功能. 与桌面应用相比, Web应用程序必须提供让他们的用户以更少的精力和时间来做事情的更加简单.直观和敏感的用户界面 . 在过去,我们并不关心Web应用程序的方式,现在我们应该.而且是时候去仔细看看一些有用的技术和设计解决方案,让网络应用更加方便用户和更加美丽. 本文介绍的是在现代Web应用程序中我们广泛使用的设计模式

网站界面设计可访问性(Accessibility)

常见到网上博文有错误理论,包括身边很多朋友都曾认同"可访问性(Accessibility)是为残障人士准备"的观点.其实在互联网技术领域远不止这么简单,总结起来有三个方面: 应付极端环境下的正常浏览需求: 结构.表现.行为跨平台兼容支撑. 保障残障人士无障碍信息获取: web1.0网站以内容为主:web2.0网站以功能为主,有"纯内容.内容+功能.纯功能"三类互联网产品界面形态,格局基本已定型.虽然以内容为主的网站更突出Accessibility,以功能为主的网站更

《社交网站界面设计(原书第2版)》——1.6 模式:用作原型的模型或者原型

1.6 模式:用作原型的模型或者原型 刚开始使用交互设计模式时,我们是这么定义模式的: 在特定环境下,某个已知问题通用的且成功的交互设计组件和设计方案. 模式就像建筑中的砖块,是用户体验和描述交互过程最基本的组成部分.我们可以将它们与其他模式或其他界面组件和内容结合起来,共同创建一个交互式用户体验.它们在技术和视觉上并不固定,也就是说,我们不能规定某一模式的具体技术方案和视觉设计效果.用户体验设计模式为设计师如何解决某一特定情况下的具体问题提供了指南,因为从某种程度上讲,这一处理方式经实践多次证

改善网站界面设计 让用户不再产生审美疲劳

现在互联网要建造一个网站已经不是一件难事,只要找到一个开源程序,然后寻找一些模板网站套进去就完事了.也正是如此的风气,造成了现在的网站界面设计看起来都是大同小异的,这对我们运营网站的站长们影响不大,但是用户却是已经产生了深深的厌恶感和审美疲劳. 相信每一位站长都希望用户能够青睐自己的网站,但是大同小异的网站界面设计,又怎么能让用户有耐心浏览下去呢?因此,我们要有改善网站界面设计的意识,并且付诸实践,用心去打造一个让人耳目一新的网站. 第一:选择独特而又不失优雅的网站色调 笔者曾经是一名网站建设的

PS教程:使用960栅格系统设计网站界面

本教程我们将学习如何使用960栅格系统设计网站界面.该栅格系统会优化网站设计流程.最终效果预览 [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11]  下一页