为未来的网页做设计（为移动设备一致体验做设计）

　　原文designingforthefutureweb：http：www。smashingmagazine。com20110329designingforthefutureweb
　　Introduction
　　灰常好的一篇文章！这里只了提些主干出来，强烈推荐原文，尤其技术方面的很多tips有深入的讲解。
　　本文推崇的是“因为现代人越来越生活net依存状态，ipad，3g等等，各种情况下人时时刻刻都在online状态中。所以如何让任何用户在任何情境下使用任何进入网络的工具（此处指移动设备，cellphone或是平板电脑等）进入任何网络（比如火车上信号弱的情况v。s。家中wifi通畅的情况），都能有一致的用户体验。”〔长到读完快憋死的一句话。。。
　　“一致性”天天挂嘴边，“”也是要“于是共进”〔好老梗的词
　　Why？
　　先看看任何情景任何入网工具
　　（情景一：同时打开两个窗口）用户正在看豪斯医生，但是此刻正好HughLaurie没有在镜头中，所以用户决定趁此时看一下他的mail，他的一个朋友发给他了一个连接，他在侧栏打开这个链接，但打开这种连接，也不影响他是不是“监视”这豪斯医生的屏幕。THouseontheirnewInternetTV。HughLaurie’snotonscreen，sotheuserdecidestochecktheiremail。Afriendhassentalinktoyourwebsite，whichtheuseropensinasidebarandviewssimultaneouslywiththeprogram。
　　（情景二：虽然有良好的展示区域，但是网速比较差）用户在下班回家的远途火车上，使用ipad上3g在上网。Theuserisonatrainbackfromwork，probablydelayedsomewhere，accessingyourwebsitevia3GonaniPad
　　（情景三：展示区域非常小）用户正在尝试使用他的索尼爱立信手机上的miniOpera浏览器看你的客户网站。Theuserisonaclient’swebsite。Theyneedtoaccessyourwebsitetoreadanarticle，buttheyhaveonlyacompanysuppliedSonyEricssonwithOperaMiniinstalled。
　　How？
　　那么，怎么设计一个能让用户在这三种情景下，都是流畅而又一致的体验？
　　首先是存储在大脑中的设计Keyrules：
　　1。网站的宽度必须是用户能多宽，设计就得有多宽；T
　　2。网站的内容必须是无论什么时候看无论拿什么看都是一样的；Thewebsiteshouldcontainthesamecontentwhereveritisviewed，
　　3。网站的结构必须是一样的；Thewebsite’
　　4。无论用户使用什么产品，内容的展示必须符合该产品。Thecontentshouldbedisplayedinamannerthatisappropriatetoitsenvironment。
　　其次是Stepbysteps详解（强烈建议看原文，详解各种technic，tips，科普知识及如何做，完全无能于是无责任硬翻）：
　　一。为移动设备做设计：
　　1。使用HTML5，各种移动设备的浏览器均支持HTML5；
　　2。屏幕既要适合大到40英寸的192011080像素的屏幕也要适合小到320240像素的小屏幕，可以使用CSS的
　　3。如果使用跨平台开发，忘记silverlight和flash吧，因为他们不适合跨平台。
　　4。谨慎使用JavaScript：很不幸的我们必须考虑未知的屏幕尺寸的设计，所以这个时候我们需要更加注意“网站内容结构”而少专注于美观的UI设计。
　　5。测试，测试，再测试！！！请在不同的移动设备上，在任何开发时期，随时随地测试！
　　6。不重视UI设计就是丑小鸭？不是。一个好的设计不仅仅是“美观”，重要的是信息架构，布局导航，层次结构的合理。
　　二。移动设备网页的内容：
　　1。明白什么是用户最主要的任务，当用在一个极小的屏幕上进入首页时，最优化的情况是能将首页一屏展示。另外，图标，导航等需要“简单易懂”的展示出来。
　　youtube网页HP
　　youtubeiphoneHP
　　2。信息架构和信息层级必须稳固且合理。用户容易一着陆你的网站就知道这是做什么的，且很容易的找到他想要的东西。
　　JohnLewis’iphone导航
　　3。保证你呈现的内容都是对用户有用的。移除不必要的文案，不必要的图片，不支持的文件格式（Ex，flash）。
　　三。将各种服务中将你的服务推出来，让用户对你的服务产生粘性。
　　对以下几条多留心，就容易让你的网站被“发现”且“易传播”。
　　1。使你的文章标题格式简洁且易被搜索引擎搜索出来并且排位靠前（这个完全没有研究过，除了付费搜索引擎外的方式，如何让自己的标题更符合“搜索”格式）。
　　2。（这个是个Tips）让你的信息能很好的“外流分享”出去，提供多种“分享”按钮，让用户免费为你做推广。
　　四。那么APP前进方向呢？
　　你开发的app容易被购买，安装，卸载；
　　做一件事，就做到最精。锁定你的品牌和服务，让用户联想到某一项特殊服务的时候，就立刻想到使用你的app（比如“我要搜索，我就要google的APP”）；
　　app不要做信息孤岛，当用户使用app又突然有其他任务需要打开某一链接时，扔允许用户能在你的app当中打开；
　　如果你开发app，最好挂到大品牌下面的页面下面来提高你app的曝光率和可信度；
　　手机用户更偏向浏览器app。
　　Resources
　　HTML5开发环境：
　　CS5HTML5SupportPack（CS511。0。3Updater），tutorial
　　Aptana3beta