为未来的网页做设计

本文推崇的是“因为现代人越来越生活net依存状态,ipad,3g等等,各种情况下人时时刻刻都在online状态中。所以如何让任何用户在任何情境下使用任何进入网络的工具(此处指移动设备,cellphone或是平板电脑等)进入任何网络(比如火车上信号弱的情况v.s.家中wifi通畅的情况),都能有一致的用户体验。

Why?

先看看任何情景+任何入网工具

(情景一:同时打开两个窗口)用户正在看豪斯医生,但是此刻正好Hugh Laurie没有在镜头中,所以用户决定趁此时看一下他的mail,他的一个朋友发给他了一个连接,他在侧栏打开这个链接,但打开这种连接,也不影响他是不是“监视”这豪斯医生的屏幕。The user is watching House on their new Internet TV. Hugh Laurie’s not on screen, so the user decides to check their email. A friend has sent a link to your website, which the user opens in a sidebar and views simultaneously with the program.

(情景二:虽然有良好的展示区域,但是网速比较差)用户在下班回家的远途火车上,使用ipad上3g在上网。The user is on a train back from work, probably delayed somewhere, accessing your website via 3G on an iPad

(情景三:展示区域非常小)用户正在尝试使用他的索尼爱立信手机上的mini Opera浏览器看你的客户网站。The user is on a client’s website. They need to access your website to read an article, but they have only a company-supplied Sony Ericsson with Opera Mini installed. How?

How?

那么,怎么设计一个能让用户在这三种情景下,都是流畅而又一致的体验?

首先是存储在大脑中的设计Key rules:

1. 网站的宽度必须是用户能多宽,设计就得有多宽;The website should be available to as wide an audience as possible;

2. 网站的内容必须是无论什么时候看无论拿什么看都是一样的;The website should contain the same content wherever it is viewed, where feasible;

3. 网站的结构必须是一样的;The website’s structure should be the same wherever it is viewed;

4. 无论用户使用什么产品,内容的展示必须符合该产品。The content should be displayed in a manner that is appropriate to its environment.

其次是Step by steps详解(强烈建议看原文,详解各种technic,tips,科普知识及如何做,完全无能于是无责任硬翻||||||):

一. 为移动设备做设计:

1.使用HTML5,各种移动设备的浏览器均支持HTML5;

2.屏幕既要适合大到40英寸的1920×11080像素的屏幕也要适合小到320×240像素的小屏幕,可以使用CSS的@media;

3.如果使用跨平台开发,忘记silverlight和flash吧,因为他们不适合跨平台。

4.谨慎使用JavaScript:很不幸的我们必须考虑未知的屏幕尺寸的设计,所以这个时候我们需要更加注意“网站内容结构”而少专注于美观的UI设计。

5.测试,测试,再测试!!!请在不同的移动设备上,在任何开发时期,随时随地测试!

6.不重视UI设计就是丑小鸭?不是。一个好的设计不仅仅是“美观”,重要的是信息架构,布局导航,层次结构的合理。

二. 移动设备网页的内容:

1.明白什么是用户最主要的任务,当用在一个极小的屏幕上进入首页时,最优化的情况是能将首页一屏展示。另外,图标,导航等需要“简单易懂”的展示出来。

youtube网页HP

youtube iphone HP

2.信息架构和信息层级必须稳固且合理。用户容易一着陆你的网站就知道这是做什么的,且很容易的找到他想要的东西。

John Lewis’ iphone导航

3.保证你呈现的内容都是对用户有用的。移除不必要的文案,不必要的图片,不支持的文件格式(Ex,flash)。

三.将各种服务中将你的服务推出来,让用户对你的服务产生粘性。

对以下几条多留心,就容易让你的网站被“发现”且“易传播”。

1.使你的文章标题格式简洁且易被搜索引擎搜索出来并且排位靠前(这个完全没有研究过,除了付费搜索引擎外的方式,如何让自己的标题更符合“搜索”格式)。

2.(这个是个Tips)让你的信息能很好的“外流分享”出去,提供多种“分享”按钮,让用户免费为你做推广。

四.那么APP前进方向呢?

你开发的app容易被购买,安装,卸载;

做一件事,就做到最精。锁定你的品牌和服务,让用户联想到某一项特殊服务的时候,就立刻想到使用你的app(比如“我要搜索,我就要google的APP”);

app不要做信息孤岛,当用户使用app又突然有其他任务需要打开某一链接时,扔允许用户能在你的app当中打开;

如果你开发app,最好挂到大品牌下面的页面下面来提高你app的曝光率和可信度;

手机用户更偏向浏览器app。

Resources

时间: 2024-07-31 11:52:06

为未来的网页做设计的相关文章

 实用10大原则:网页UI设计全适用!

本文和大家分享的主要是网页ui设计中的10大原则,一起来看看吧,希望对大家设计中有所帮助和启发. 1.纠结的时候,让自然为你做决定! 遵循自然规律的设计总是因为贴近万物本源而受到更多人的宠爱,因此,当你举棋不定的时候,你可以选择将设计代入大自然定律中,让自然为你做出最好的决定.比如,现实和自然告诉我们,光源来自天空,在人们也已经习惯了这种由上至下光线来源的时候,设计师需要做的应该是能顺应用户视线的光线设计. 2.脱离色彩诱惑,能真正看清布局设计 色彩对人类视觉的冲击力能产生最大的效果:一个网页的

网页版面设计步骤和布局技巧

版面设计也可以理解为布局设计,就是我们在浏览器上说看的一个完整的页面.设计师们如何将所有要体现的内容有机的整合和分布,达到某种视觉效果,这就叫做版面布局.我们将如何做好网站的版面设计呢? 本文将介绍网页版面设计的步骤和布局技巧 网页版面设计步骤 首先我认为是“过程注定了结果”,重视你所做的每一步并把它尽量的做到最好,相信结果也不会偏离轨道.下面先让我们来了解一些版面设计的步骤: 1.构思(结构的搭建) 当然在构思之前我们总需要了解很多,如:客户的需求.网站的定位.受众群等很多方面的事情,也就是说

网站设计之网页界面设计和装饰要素

网站设计之网页界面设计和装饰要素, 通常,网站设计是在规则与反规则.技术与反技术的矛盾中追求新异.网站的网页界面设计的规则与印刷品的设计的规则一样,存在于信息要素.装饰要素.维思要素等不同关系之中. 网站的网页界面设计是将丰富的意义和多样化的形式组织在一个统一的结构中,所有细节不仅各得其所,而且各有分工.这样的网页作品就会成为受欢迎的网页. 网站中,文字.图片.符号的相互作用能够建立起一种整体的信息,构成网页的信息要素,为了方便访问者的浏览,郑州网站优化设计者必须将信息按主次分类,通过秩序化.条

看Facebook如何做设计

[译者:耿人杰 原文:Design at Facebook 作者:Luke Wroblewski] 今天在Palo Alto的总部,Facebook的设计团队分享了他们的设计理念,以及他们是如何为2.5亿用户设计产品的.特别的是,他们强调了以下几点: 要勤写代码(get your hands dirty) 尽早且频繁地分享设计(share early & often) 设计过程要从项目开始延续到结束(be there from start to finish) 不要爱上你的设计(don't fa

android为每个屏幕尺寸和分辨率做设计(一)

一.分辨率无关 1.使用dp(dpi) Android使用密度无关的像素(dp)来指定屏幕尺寸,它允许在具有不同像素密度而屏幕大小相同的设备上通过缩放达到相同的效果.(还没解决不同屏幕尺寸的问题?) 2.像素密度的资源限定符 当使用不能很好地动态缩放的Drawable资源时,应该创建和包含针对每种像素密度类别进行优化的图像资源. 就是drawable-hdpi.m.l 感觉这个也好麻烦....哎,我都是只用一个hdpi偷懒,不过这样小屏幕也加载了大图片... 二.为不同的屏幕大小提供支持和优化

才决定学JS小鱼又被拉去做设计了

才决定学JS,注册了博客,小鱼又被拉去做设计了,又要大半个月没时间碰这些了,愁死我了 才决定学JS小鱼又被拉去做设计了,布布扣,bubuko.com

Adobe Fireworks CS6是一款集网页图片设计、制作与编辑为一体的专业软件

Adobe Fireworks CS6是一款集网页图片设计.制作与编辑为一体的专业软件,它不仅可以轻松制作出各种动感的Gif.动态按钮.动态翻转等网络图片,还可以轻松实现大图切割,让网页加载的图片显示速度变得更快,也可为用户在瞬间制作出精美的矢量和点阵图.模型.3D 图形和交互式内容提供平台,软件最大的好处在于无需编码,可直接应用于网页和移动应用程序.Fireworks CS6充分利用高效的jQuery,使其支持移动主题的制作,包括从设计组件中添加 CSS Sprite 图像的功能,内置适用于W

产品经理如何为小屏幕做设计

1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志. 2014年,还是这个春天,移动设备的普及成为当下互联网发展的又一次变革,我们在各种小屏幕上画着一个又一个的圈,如今,用户的移动体验无意正在变得更好,因为越来越多的网站已经开始为移动设备做了设计,设计师们也明白什么更适合小屏幕.然而,在手机上执行任务操作仍然存在着许多障碍. 亲爱的设基师朋友们如果你正在为此困扰,请关注如下招式: 首先即使是4G下载时间问题依然存在,其次用户讨厌需要大量下载网站因为他

未来的网页网页设计趋势

在之前很火的扁平设计一直延续到现在,还将会继续一段时间,至于多久,不知道! 在未来一年里.网页设计将会有以下些趋势. 幽灵按钮 按钮更多使用的是幽灵按钮.关于幽灵按钮的解释有 就是在设计网页中的按钮之时,不再设计复杂色彩.样式和纹理,而是外仅以线框示意轮廓,内只用文字示意功能,背景透出,与整个页面/背景合而为一的设计方式. 高度模糊化叠于底层,衬托出左侧的文字和幽灵按钮,使得图片和文字特别突出!达到表现重点的效果 一张色调较暗的图片,明亮的字体冲击视觉,加上三个霓虹灯效果的幽灵按钮.使得页面略显