如何设计一个简结的移动互联网站
2011-08-28 23:33 狼人:-) 阅读(207) 评论(0) 编辑 收藏 举报关于手机网站设计，需要了解两大部分。第一，目前3个主流的手机网站应用，探讨这些应用是如何恰到好处地解决移动Web应用的难题。第二，一个小型电子商务网站的设计。著名Web应用程序和应用软件图片交互心理学的设计专家斯蒂芬·P·安德森曾说过“良好的交互设计关注人们所想，所做以及所感！”
斯蒂芬安德森是一位通过对用户行为的理念设计的思想领袖
安德森的这句话适用于整个交互设计领域，同样这也是手机交互设计的真理。让用户快速地找到他们想要的信息是手机交互设计的必要条件。最重要的一点还是用户可以以最简便的方式找到最重要的东西。由于手机是一个最为私人的设备，所以一定要让用户对自己正在做的事有着非常好的感觉，这样才会让他们越来越多地光临你的网站。
移动Web应用的难题
我在去年购买了N95，现在我在去上班的路上检查和整理邮件，通过手机上YouTube看视频，实时地检查Twitter feed和邮件信息，也查看Facebook好友的信息。主题就是：我往往在走路的时候，用手机登陆这些网站的手机版来检查最新信息。
在一个手机上，这些网站的电脑版就遇到麻烦了。在买N95之前，我的诺基亚和摩托罗拉手机的屏幕更小，手机浏览器还是个新奇玩意。随着屏幕的增大以及浏览器变得更加先进，N95有着足够的屏幕空间，整个网站体验也达到合理的程度，不过所有的这些应用的网站并不是按照电脑浏览器设计的，就算是iPhone，虽然有着优秀的网页缩小和放大功能，但是与iPhone自带的这些网站（Facebook、Twitter、Gmail）相比，完全版的网站用起来要麻烦的多。
随着网站和Web应用变得更为先进，现在迫切需要提供针对手机等移动设备的网站和Web引用。一个有着很好的移动体验的应用往往存在一种难以解释的情感依恋。使用手机版网站的用户感受很好，简版和完整版Twitter都可以通过手机浏览器打开，但是往往简洁手机版更有吸引力，因为上面的每件事物都跟屏幕相符，好像就是针对用户的手机设计的。
接下来，我介绍一些我每天都在用的几个手机应用，以及我的一些思考。
Case 1: GMail
GMail
如我之前所言，我每天都要使用Gmail，我在上班的途中检查邮件。我一般检查3个邮箱，每个都设置书签。一般是查看信息、存档、删除、报告垃圾邮件，如果需要紧急回复一条邮件，就会用到回复和发邮件功能。
手机版Gmail的主屏幕上没有过多的界面功能（如图），主要是重要的邮件浏览和管理功能。我可以浏览、发送、接受、删除和管理邮件。在最重要的部分中，信息被优先安置在界面的顶端，儿其他如存档、报告垃圾邮件和删除等功能在安置在页面的下端。我在使用手机版Gmail时，80%的情况下不使用这些功能，只是检查和阅读邮件。
Gmail手机版的成功之处在于邮件优先，其他界面功能置后。
Case 2: Twitter
Twitter
我第二个要用的就是Twitter，主要是查看我跟随的人的最新信息，以及更新自己的信息。
Twitter的主页可谓单刀直入（如图）：状态更新功能，紧接着是最新状态信息，附带一些简单的界面元素。
Twitter本来就是一个很简洁的应用，就算是电脑版的功能也非常少，手机版的就更少了。Twitter手机应用在基本系统交互功能上做的非常好，界面简洁，有两个最主要的功能：状态更新和feed浏览。与Gmail的使用方式不同点在于，我很多时候使用手机版Twitter是为了更新信息。因此，理所当然地，状态更新应处于主屏幕的顶端，下面是feed。Feed的长度一般都是20条最近更新的信息：这是一个很好的内容处理策略，在手机上，点击去往新页面的成本要比滚动查看的成本高得多。
Twitter的成功点在于：信息更新功能快速简便，还显示朋友的信息内容。
Case 3: Facebook
Facebook
我每天用手机登陆Facebook是为了看看朋友、查看墙上的帖子以及发送接收Facebook邮件。手机版Facebook优先显示的还是一些简单的功能和lists（菜单）。与Twitter类似，Facebook假设大部分手机用户主要是为了更新信息。然后才是3条最新更新的信息、朋友请求和news feed items。再往下，才显示墙上近几天里朋友发布的帖子。
我觉得Facebook在一些关键功能的定位和强调显示上做的很好，一些重要性稍次的功能得到了适当的降级。有趣的是，Facebook是为一个提供导航栏的。在处理众多功能同时又要强调重要的功能时，导航栏确实是一个有用的、整洁的处理方式。
Facebook的成功点在于：选择了用户在“走”的时候最需要的功能，简洁的互动界面提供了其他的次要功能。
小结
上述的三个应用都有一个共同点：界面已经精简到不能再精简了，保留了最重要的应用功能。这3个网站都是使用CSS，看起来都不普通，都在屏幕的顶端挂了彩色的Logo。Gmail有效地使用了颜色等分离信息，用带颜色的links和背景有效地分割了信息内容、邮件标题和界面。Twitter则是简单地用颜色和直线划分信息，同时显示精简信息时间。Facebook采用了Twitter的办法将内容与内容、内容与界面分隔开。
边框
所有这3个网站还提供完整版网站链接，这是我比较喜欢的一点。先进点的手机浏览器完全支持完整版网站，就算有着Javascript和互动行为。有时候，手机版是远远不够的，提供完整版链接是必要的，尽管会感觉多余，但确实值得。
虽然这些都不是必须的，但是确实为用户提供了一个很棒的使用感受。
精简应用，但保留最重要的功能
精简应用
上述三个应用都是值得效仿的，在手机版中这三个应用都没有提供全部功能。
Twitter手机版的一个重要的缺陷就是没有“回复”功能，Twitter最重要的功能之一就是与线上朋友互动交流，如果你不能看到谁回复你，你就无法参与到对话中。在我看来，“回复”功能的省略算是多余了。删除与保留其实都讲究平衡性。Google提出了一大堆个性化设置，“设置”页面在手机界面上完全没有。其实就是思考对于在“走”这一状态的用户，他最需要的最重要的会时时刻刻都用的功能是什么，哪些是偶尔会用的次要功能。就而言，这些次要功能，我在走得时候根本不会用。
最后要讨论的是是否将网站默认设置成自动登录至手机版。Twitter和Facebook都是设置成登录到其电脑版（全版）网站。不过Gmail则是默认登录至手机版，不过提供转至全版网站的选项。问题其实不在于默认设置登录到哪个版本的网站，比如我喜欢自动登录至手机版，但这也仅是我一个人的偏好。正如上面所说的，有些情况下，用户需要更多的界面功能，所以要有一个全班网站的链接是非常有用必要的。
总结1
确定你的服务中最重要的部分。如果是新闻或博客等信息，那就让你的访问者最快地接触到信息，如果是更新信息等行为，那么就让他们快速地达到目的.
如果功能繁多，要尽可能地删减。剔除一些额外的应用，让其集中在重要的应用。如果一个用户需要改变设置或者做大改动，那他们可以有选项去使用电脑版。
不要节省页面中的信息量。手机的屏幕虽然少，但如果信息内容是相关的且连续的，那么滚屏比转至新页面体验要好。
提供转至全版网站的方式。手机版网站不会具备全部的功能设置，虽然重新转至全版网站的用户成本要高，但是这个选项至少要有。
在我看来，成功的手机网站的设计秉持一个简明的原则：让用户快速地得到他们想知道的，最有效率地完成他们的行为，所有设置都能让她们满意。
小型电子商务网站的设计
由于手机设备屏幕尺寸不一，网站要支持每一个屏幕尺寸是不切实际的，这里我使用240X320作为目标屏幕尺寸，因为据Device Atlas Data Explorer的调查显示，240X320在保持实用的同时，还能保证你的网站能够在众多手机设备上显示正常。的确，240X320与桌面电脑屏幕相比真是太小了（参见下图），几乎是其十分之一，这也是值得注意的一点。
手机桌面的尺寸
Step 1: Sketches（草图）
首先，用网站线框图来勾勒出一个页面所需要具备的东西。我要设计出电子商店的3个页面：浏览页面、搜索页面以及物品查看页面。
Sketches
第一个就是浏览页面，这是访问者经常点击的页面之一，通常由主页链接过来，内容通常是与一个主题或类目相关的次要内容。与桌面电脑网站一样，在手机网站上要具有广告标识是最剧本的，不过站的空间不要太多，在页面顶端有一个简单的log就能起到很好的效果。
浏览页面有着众多的作用，比如导航功能，设计点简洁的导航告诉用户所处的位置以及下一个位置是什么。然后是搜索框，之后是一些列单，图片以及其他部分的链接。
Sketches
主导航处于最低端。在手机网站上要把最重要的东西摆在优先的位置，而额外的导航元素则应该处于页面底端。最后，还有一个浏览全版网站的选项，由于并不是每个人都必定使用手机版网站，又或者手机版网站的功能不齐全，所以这个选项还是很有用的。
Sketches
然后就是搜索结果页面的草图。网络商店最常用的一个功能就是搜索，所以这个页面必须能够有效地帮助用户达到他们想找的页面。页面顶端是一些告诉用户现在在哪个位置的简单信息，然后是搜索结果。额外的导航信息仍在最下面。
最终就是物品查看页面。用户在这页面主要是为了重新查看商品的信息并把商品加入购物车。先是物品图片、价格以及关键性的“加入购物车”选项，然后是商品信息全文，这几个元素是最重要的，被优先处理。搜索仍旧是相关有用的，不过被移到页面的底端，因为它不是最重要的。
Step 2: Wireframes（网站线框图）
那么现在就是进一步勾勒出这三个页面的样子了，更加直观准确地展现最终的网站是什么样的。
浏览页面
浏览页面（如上图）：正如Twitter把信息更新功能放在最优先的位置，我们把搜索摆在顶端，因为搜索是用户登录网店用的最多的功能。
搜索页面
搜索页面（如上图）：正如草图所设计的，最重要的内容是搜索结果，所以被放在最高位。设计的主线就是告诉客户他们搜索到什么，有多少搜索结果，根据需要我们对这些内容做了进一步的简化。
物品浏览页面
上图是物品浏览页面，我们对页面元素进行了整理。Ok！网站框线图设计就完成了！
Step 3: Basic HTML
手机网站搭建的好处之一就是不需要学习一些新的技术，因为整个设计原则就是简洁明了。另外就是，市场上许多新的手机设备完全支持CSS，这样使得网站不仅更加友好，而且也能达到美观舒适的目的。
1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
在手机网站搭建中遇到的第一个问题就是Document Type Declaration，，另外mobiforge.com上的Comparison of XHTML Mobile Profile and XHTML Basic的表格也对主要的手机markup DTDs之间的区别做了很好的说明。我选择了version1.2，所以我的页面首部就是这样的:
1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
另外我还是用了Firefox插件HTML Validator，可以检查你的HTML代码。还有一点，你也许需要看看Ruadhan关于mobile DOCTYPE的几点说明。Validation is Your Friend这篇文章也有一些有用的信息。
有一点需要谨记的是：手机上没有很多的横向空间给你发挥，一个横向布局的手机网站并不实用，因为手机屏幕尺寸不一，所以优先选择的是fluid design。在构建页面的时候，我用了h1，h2，h3等来强调一些重要的元素。浏览页面的HTML代码：
1. <div id="products">
2. <h3><a href="view.html">The Secret</a></h3>
3. <span>by <a href="#">Dwayne Johnson</a></span>
4. <span>€8.99</span>
5. <hr/>
6. <h3><a href="view.html">For whom the bell tolls</a></h3>
7. <span>by <a href="#">Kirk Chandlund</a></span>
8. <span>€12.00</span>...
无CSS的浏览页面在手机上的显示效果：
无CSS的浏览页面
搜索页面HTML代码：
1. <h1>BookStore Online</h1>
2. <hr/>
3. <p id="results-summary">Search for "Red Arrow" (11 results)</p>
4. <hr/>
5. <div id="results">
6. <h3><a href="view.html">Red arrow at nightfall</a></h3>
7. <span>by <a href="#">Michael Johnson</a></span>
8. <span>€8.99</span>
9. <hr/>...
无CSS搜索页面在手机上的显示效果：
无CSS搜索页面
物品查看页面的HTML代码：
1. <div id="main">
2. <h2>The Long Tail</h2>
3. <p>by <a href="#">Chris Anderson</a></p>
4. <div>
5. <img src="/files/images/long_tail.jpg" width="60" height="85" alt="The Long Tail">
</img>
6. </div>
7. <div>
8. <p id="price">€16.99 <span id="stock">In stock</span></p>
9. <p><a href="#">Buy now</a></p>
10. </div>
11. <div id="details">
无CSS物品查看页面在手机上的显示效果：
无CSS物品查看页面
当然，仅HTML格式的网站是远远不够的，下面就是添加CSS了，让网站生动起来！
Step 4: CSS
CSS和javascript能让手机网站焕然一新。例如诺基亚N95的CSS-compliant Webkit based browser，些许的CSS就然浏览器焕发光彩。
如果你一直没有调查过手机浏览器，你也可以在不必改变html代码的情况下使用CSS media=“handheld”，例如：
1. <link href="/stylesheets/main.css" media="handheld" rel="stylesheet"
type="text/css" />
虽然未必所有浏览器支持CSS，但是如果遇到支持CSS stylesheet的手机设备，可以显示其效果。CSS主要是为了从视觉上明显隔开页面上的不同元素，让内容更适合于屏幕展现。当然如果你有设计天分，你也可以巧妙地使用CSS来加强网站的视觉效果，使其符合品牌意义，如果能这样做，你的网站自然会脱颖而出。
下面四张图就是嵌入CSS之后的网站效果，通过颜色等对网页元素在视觉上进行分离，而且所有页面都遵守一个风格，网站的外观和视觉感受都比较统一。
Step 5: Javascript
我的观点是可以使用Javascript来打扮手机网站，但必须极度谨慎，因为好多手机并不支持java。使用Java的一个优点就是避免在EDGE和3G网络环境下的page refresh，从而改善你的手机网站的用户体验。
再次强调要谨慎使用java，如果页面loadtime超过10K将会降低用户体验，虽然要给用户带来最好的用户体验，但是前提是你的明确知道用户支持这些技术，如果不知道，最好假设不支持的情况。
下面是物品查看页面的java代码：
1. window.onload = function(){ //load this when the page loads
2. //set up swap variables
3. var summary = document.getElementById('summary')
4. var long_summary = summary.innerHTML + ' <a href="#">...less</a>'
5. var short_summary = summary.innerHTML.substr(0,100) + '...' + '
<a href="#">full details...</a>'
6. var body = document.getElementById('view-page')
7. //do the swap
8. swap_full_summary = function(){
9. if(summary.innerHTML == long_summary)
10. {
11. summary.innerHTML = short_summary
12. }
13. else
14. {
15. summary.innerHTML = long_summary
16. }
17. }
18. summary.innerHTML = short_summary
19. }
最后一步就是通过Ready.mobi来试运行网站，这样可以让你直观了解自己的网站，看看有什么疏漏。
And finally: ship it!大功告成！
最后想说的就是手机网站的设计并不是想象中那么困难，只需要设计使用一些简单的技术，遵守简明的原则，学习Google、Facebook和Twitter的一些成功经验。最后给点建议：
先用草图勾勒网站，注意最重要元素的布局
代码清晰简单，这样才能在手机得到很好的显示
明智且负责任地使用javascript
使用HTML validators和Ready.mobi确保代码和网站无误
