当前位置:首页 > 经验学习 > 设计思想

从Web到WAP移植的设计原则

所属栏目:设计思想 时间:2013-12-26 来源: 作者:admin 点击:




从Web端直接移植为WAP2.0形式,突出的矛盾是信息架构不适应小屏幕设备,垂直页面的冗长和WAP2.0表现形式的限制。
提升小屏幕浏览的体验,在设计中应包含以下几个核心任务:
控制信息的维度
信息布局,更好利用首屏的有限资源
采用合理的导航、有明确的方位感知
尽可能减少浏览时的按键做功
界面可视化
控制信息维度
WAP网页可支持的页面信息维度较小。《移动设备交互设计》中介绍1维、1.5维、2维的信息呈现方式[1]。将其归纳为1维垂直平铺和1.5维的页面折叠,2维的缩略索引等相结合来处理页面降维。
例如:手机腾讯网新闻正文页,除去导航部分,主要垂直平铺了新闻正文内容、分享转载、相关新闻推荐、相关搜索、网友热评、热点新闻、精彩推荐等内容模块。减少页面长度,就需要折叠模块信息。除新闻正文内容以外的外延阅读模块只摘选展现3或5条,用户需要通过“查看更多”或点击模块标题进行详细的扩展阅读。



再如:手机QQ空间的好友动态的日志设计,仅展示各条日志展示3行正文内容,其余内容折叠起来。引导用户进入深一维度浏览。



信息布局
首屏的首页对于全站的战略意义重大。它是用户总览全站的内容最重要途径,同时可以建立直观印象,树立品牌形象。《Don’t make me think》非常强调网站的首页尤其是页面头部要清晰地呈现出这个网站是干什么的,用户可以做什么。同时首屏的资源在小屏幕设备上尤为稀缺,所以往往是全站交互设计的重中之重。
小屏幕设备的首页有它特殊规则。QVGA的竖屏模式下,以13号字体显示,一屏仅有13行左右。横屏模式下就展示更少了。所以在可选择的前提下(例如Nokia E71横屏机型,无法竖屏阅读)用户很少会喜欢用横屏模式阅读长页面。首屏默认最上方会是全站的logo和全站的导航。
手机新浪网首页截屏



手机新浪网首页头部导航的设计是采用背景图实现的。UCWeb浏览器不支持背景图片展示,直接导致左右结构的导航变形,视觉效果损失。
手机搜狐网首页截屏



手机搜狐网的logo实现方式是前景图,所以在浏览器(不禁止图片浏览的情况下)中能够展示logo,但是首页头部的机型适配问题依然较为严峻。
手机腾讯网WAP2.0改版,首页首屏的设计






分析:手机腾讯网WAP2.0首页的首屏在不同浏览器上的适配效果得到了较好的控制。导航做了减法,由WAP 1.0阶段的3行精简到2行,只留出重要的产品入口,其他频道入口分散到首屏以下以及新闻中心。对手机腾讯网首页的信息布局做了一次改良。
采用合理的导航
桌面上常见的导航方式主要有页面头部的多行全局导航链接、面包屑、菜单、工具栏等。凡具备告诉用户在哪里,方便用户去往其他地方的标识都算导航。它一般都易于识别,处于页面显赫位置;形式和位置也相对固定,持久;相近作用的导航在页面中具有排他性,即功能相近的导航应根据页面需要做判断和取舍,详见下文“书城”案例。
在WAP页面中,视域相当狭窄,信息维度很小。承载同样多的信息,WAP的页面长度会比Web页面显著增加。很多WAP产品页面头部和页面底部采用导航复现的设计。比如手机新浪网的设计将多行导航链接布置在页头和页尾。开心001以及人人WAP2.0的设计是在页头和页尾复现页卡式导航。
手机腾讯网WAP2.0的导航设计,首要解决的问题是如何让用户快速了解网页的全局内容及功能。在手机腾讯网内每个频道首页的头部位置有用于总览的多行导航链接,让用户对频道内容有基本认知。频道首页的尾部则采用“返回顶部”引导用户回到头部利用多行导航链接进入其他模块。而各频道二级页面在页头和页尾则复用面包屑导航。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: