移动终端中的视觉引导

工兵黄|2011-04-28|视觉设计

 

 

 

    在传统网站设计和平面设计中,大量信息的整理规划需要设计者用合理的排版,将信息顺畅的传达给用户,连贯的不间断的视线移动阅读会给人舒适的感觉,反之,视线被引导的满屏幕跳来跳去的,会让用户不知所措,给人乱无章法的感觉,无法更好的接收信息。 


 

    在阅读信息的时候,常常受到周围文字和图像的干扰,并不是那么顺畅,根据人眼视觉心理,会有几种容易引导或者说干扰到视觉移动方向的特点。



 

     在上左图中,第一眼看到的是不是红色的色块?右图中,是不是感觉红色的色块向前突出,而灰色的色块向后退?这就是视觉心理造成的,波长长的色彩比波长短的色彩更容易被人眼识别,也就是暖色的、鲜艳的比冷色、暗淡的颜色更“跳”一些,当一个页面中,“更跳一些”的元素无章的排列的话,人眼的视线就会跟这这些吸引人的小元素也跳来跳去了,感觉“页面花”就有这个原因,合理的运用这个规则,就可以达到增强信息顺畅的传达的目的。 

 


    人物图片可以锁住用户的目光,牵引用户的视线路径,合理的使用可以烘托气氛,提高访问者的兴趣,留下深刻印象。

 

     一般人都会有这样的体验,当看到1的时候就想找2在那里,视觉有的数字敏感性,很多设计在需要视线牵引的时候,用数字当标头,使视线在即使色彩丰富的页面中也会合理的跳跃。

 

移动终端中的视觉路径

     移动终端具有轻便,屏幕小,单屏内容少等特点,表现的空间比WEB 少了很多,但是视觉规则都是相通的,很多在平面,WEB中适用的规则在移动终端中也照常适用。

 

    左图为IPHONE平台QQ2010界面,视觉通过鲜明彩色的头像图片牵引视线顺势向下。
    右图为IPHONE平台 TIME MOBILE 界面,鲜明红色的title条显示新闻的种类,视线路径在红色标题间快速跳跃,帮助用户更快找到所需要的新闻类型。

    在这个界面上第一眼看上去,你会发现视线快速的被橙色文字扑获,然后不自觉的在橙色的文字间跳跃,仔细看这几段文字确是并不十分重要的新闻日期信息…..  相对主要信息新闻标题被忽略了,用户会迟疑一下重新找到白色被忽略的新闻标题,造成了视线路径的混乱和信息传达的不顺畅。

 

 

 

    大块的清爽颜色作标题条,吸引用户视线,带来亲和的感觉,主内容区用小区域色块或者有色文字去牵引视线,极其珍惜谨慎的使用icon和有色文字,达到用户一眼从头看到底, 飞流直下三千尺的顺畅感觉,得到没有多余干扰的舒适体验。

    在设计过程中,产品经理提出“XX链接很重要需要强调,能不能加粗变红?”“颜色单调,要丰富的颜色搭配”等意见, 经过沟通后否定了这些意见,在设计排版中信息的顺畅传达才是最重要和最基本的要求,再丰富再漂亮的图片处理排版布局干扰信息的顺畅传达也是不可取的,特别是在终端小屏幕的情况,相比PC大屏幕,每一个元素和文字的处理都会很大影响整屏给人的大的感觉,影响视线的正常移动。

 

 

 

    举几个例子关于在移动终端设计中所注意的视线移动问题,移动终端设计跟PC端设计有很多相通的地方,特别是在高端机型和大屏幕机型上, 希望这些在WEB、 平面设计中的经验能够大量用在移动终端设备上,指导我们做出更多更好用户体验的产品。

分享到QQ空间

查看[29,969]|评论[49]

相关标签

  1. medns 说道:

    表达的比较乱……这个字体颜色和大小看起来挺不舒服的

  2. jasperzhao 说道:

    文章不错,顶一个~

  3. 小说排行榜 说道:

    博客写的很不错 支持

  4. 玄幻小说完本 说道:

    文章不错 谢谢分享

  5. 包子 说道:

    好文章,转载到互联网的一些事(yixieshi.com)

  6. xunzhiyou 说道:

    嗯,视觉引导确实是门学问,无论是在网页上的,还是在现实的平面设计中。话说,互联网的一些事,UCDChina +1 ? 额,网站不错,也拜访过~

  7. lee_raul 说道:

    文章很实用,我想知道文章配图是用什么软件做的,谢谢。 :cy:

  8. 太平洋直购网 说道:

    完全就是以Iphone 为设计理念

  9. 初刻网 说道:

    太炫了,我觉得未来就应该这样 :cy:

  10. 采铜学心录 说道:

    最后腾讯微博的例子没看懂,滚动到下一屏的时候,对下一屏的内容难道不是仍旧从上往下读的吗,那么不是仍旧免不了先要把视线从下面要移到上面?

  11. bandit 说道:

    神奇的猥琐帝

  12. 这样写文章 看着真舒服 学习了

  13. 小刚 说道:

    移动上有很大局限,分析的很棒!!!学习。

  14. 不错的网站 支持一下

  15. 最弱博客 说道:

    我很喜欢你 的主题啊

  16. 小说排行榜 说道:

    文章很给力 谢谢您的分享

  17. 笑花的信誉 说道:

    Iphone 确实比同行含的技术量高很多

  18. 玄幻小说完本 说道:

    博客很不错 会一直关注

  19. 人生格言 说道:

    为什么身边那么多人说IPhone不好用呢,似乎也有国别的使用习惯问题

    • 晃悠的小鱼 说道:

      你身边的都什么人呢? 这个很重要。我身边,我身边的身边没几个会说iphone难用的。所以你歇着吧。

  20. lisa 说道:

    给人很酷的感觉!!

  21. 上下沙生活网 说道:

    博客很不错 会一直关注

  22. ADOB 说道:

    天天看WSD,加油

  23. adobe 说道:

    Iphone 确实比同行含的技术量高很多

  24. 西湖龙井 说道:

    再怎么设计 用户体验才是最重要的~!

  25. 前列舒乐胶囊 说道:

    不错的解释,有助于提高用户体验

  26. 淘宝返现网 说道:

    :qiang: 不错,很详细,顶一个

  27. AL_nick 说道:

    :qiang: 收藏了 不错

  28. 创意狐 说道:

    :wx: 很强大的设计 很给力···

  29. Stosion 说道:

    :wx: 好文章

  30. 疼讯的团队啊 ?呵呵。不错哦!~

  31. 心理咨询 说道:

    不错,有参考价值

  32. 现在的腾讯我觉得可以上市一些电子产品

  33. 支持支持支持

  34. 我要包邮 说道:

    不错,很有价值的文章

  35. 看客中国 说道:

    :gz: 写的看后有些感觉. :cy:

  36. 很幽默哦, 说道:

    很强大的设计 (www.fmdiy.net/)

  37. 静静 说道:

    不错哦,很有价值~

  38. luosha蛋糕 说道:

    :se: 顶一个

  39. tuboshu 说道:

    :qiang: 好贴!

  40. 兔宝宝 说道:

    很给力很有价值! :se:

  41. 眼霜排行榜 说道:

    支持腾讯,很强大、、、、、、、

  42. 淘宝返现网 说道:

    很给力很有价值!

  43. GoingGao 说道:

    值得学习,转载至个站(udesign.im),谢谢

  44. 一灰 说道:

    :fd: 看来要着手APP的开发了~

  45. 一直关注这个博客 很不错的分享哦 :cy:

  46. 吴晗 说道:

    感觉不知所云,表达的很肤浅。看起来也不舒服。

  47. abc 说道:

    反着说也可以的得出一套对立的结论。
    这东西,永远都是有人喜欢有人不喜欢,

发表你的评论

 微笑 色 发呆 得意 流泪 害羞 大哭 调皮 呲牙 惊讶 白眼 流汗 疑问 擦汗 抠鼻 鼓掌 可怜 强 胜利