移动版本的电子商务网站:首页和导航设计(2)
业界宣称到2010年，移动电子商务的的市场份额将会以爆炸般的速度暴涨到2亿美元？你在跟我开玩笑吗？
是的，这其中很大份额是数字产品下载，包括铃声和桌面壁纸，但有不少潜在的移动购物网站蠢蠢欲动，即使是在微型屏幕体验上饱受折磨。
有不少零售商已经意识到并付诸行动于移动网站的开发。相对没有针对移动设备进行任何优化的网站版本，它们中的一些干的不错，另一些做的非常棒。以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com（每个网站都直接链接到它们的移动版本）后的一些关于移动设备网站可用性的建议。
这是总共4篇关于移动商务网站设计和可用性的系列文章：
第1部分：网站主页和导航
第2部分：搜索和目录页面
第3部分：产品页面和购物车
第4部分：表单和结帐
注意：在我的研究后，Moosejaw在一个新的平台重新发布了它的移动网站。因此，我在这个系列中同时使用了老的和新的两种界面。
搜索引擎
选择URL
相比在web上，移动设备的输入通常相对更困难一些（相对我个人而言，这在用长指甲使用iPhone时尤其突出），而长链接通常对输入者来说是梦魇。虽然并没有要求移动网站一定要用哪种形式的URL，但通常m.site.com是相对容易被用户记住的地址（容易记且输入的字符更少）。Sears是唯一一个我见过的有自己独立域名的网站，Sears2Go.com，这也是一个相当易于传播的名字。
如果可能，尝试注册m.yourdomain.com，yourdomain.mobi和mobile.yourdomain.com，然后让它们指向同一个移动版本。这会对用户在猜测你的移动网站URL时有所帮助。
Meta描述
这是在搜索引擎结果中出现的几个网站meta描述的截图。将移动网站的功能特点用简短的文字概况在meta信息中是个非常有帮助的举措。
searchexamples
想了解更多关于搜索引擎和移动网站的信息，请参看你需要一个移动版本的电子商务网站吗？
主页设计
布局
传统的网站经常是充斥着图片、广告展示区域、Flash广告、AJAX效果、多层导航菜单和许多按钮。如果用智能手机访问传统网站，通常需要像使用小孔查看地图那样的放大缩小页面。也需要很长的时间来读取这些大容量的内容。看一下Sephora和Target的传统主页在iPhone上的表现：
sephorahome
target-home
现在看一下Tickets.com和Barnes and Noble的Web主页和经过优化过的移动站点主页：
ticketscom1
bnmobi3
为了在小屏幕上提高可用性，你将会注意到大多数移动网站主页都限制图片的使用，不包含传统的导航菜单。Best Buy就避免使用完整的导航，仅显示一个搜索框、门店选择和客服电话：
bbmo
Barnes和Noble的移动主页也配置了搜索功能和门店位置选择功能，但并没有提供商品的目录导航，取而代之的是客户服务选项和Top 10销售列表。对于移动端来说，合乎情理的是“人们通常是搜索而非浏览”，而搜索者更倾向于使用搜索框。这是一个合理的假设，特别是当输入很困难时和产品的名称或作者名很长时。
另外一个使用“瘦”导航菜单的方式是像Moosejaw的老网站和 Sephora的网站那样：
oldjaw
msophora
很少情况你会看到在移动网站主页上会有产品推销。但Amazon和Moosejaw的新站就是这么做的，但总体来说图片很小，布局也很简单：
moamazon
momoose
Moosejaw原来的主页相当温和且实用，不符合Moosejaw它狂野的风格。新的主页设计的更加个性化，增加了更多的娱乐内容而不仅仅呈现出产品目录。就像他们一贯的口号传达的“假如你很无趣”，这也是Moosejaw主要的消费群高中生和大学生所崇尚的特征。
boredjaw
其实并没有捷径能指导你做出完美的移动网站主页（仅提供搜索和必要的客服链接，仅提供简单菜单和精简推销广告），但必须确保它有清晰的信息架构和仅提供必须的信息和工具来帮助进行搜索、产品选择和客户服务。这些对于你的移动战略至关重要。
字体/字形
许多移动设备屏幕的颜色对比很弱，并不能在白天、夜晚、车里或其他光线不足的地方提供足够清晰的视觉体验。所以要小心处理这些低对比度色彩的屏幕，避免使用暗色的背景上使用很淡颜色的字体，尤其是白色带下划线的文本。
无论是否是衬体字形，链接和其他文本如果都是大写的将很难阅读。
移动设备的浏览器通过不同的方式控制样式表。它们可能或可能不会缓存外部的样式表，也可能支持某些样式元素或不支持样式表。如果你有某些针对移动设备的特殊样式表，并没有办法来保证所有的设备都能正常显示它。所以，最好的方式是给所有的非文本方式的元素以一个文字描述，就像在为关闭图片显示功能的email客户端设计一文所提到的。