首页 > 代码库 > 响应式页面导航的设计解析

响应式页面导航的设计解析

有人说,2013将是响应式网页设计之年。自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名词,即响应式网页设计,这个概念从Responsive Architecture延伸到web设计领域,让所有的交互设计、视觉、前端开发都开始投入到这个趋势,或者说新的设计解决方案中。

当自己和身边的朋友越来越多的用上了iPhone、iPad、android手机或平板,当越来越多的人都在谈论这个老意识新概念的话题,当我们一直秉承的用户体验第一与网页设计完美结合的时候,我也陆续整理了一些关于响应式的设计理念及方法的东西,今天就以响应式导航的设计抛砖引玉,和大家分享一下。

响应式导航的设计遵循了响应式Web设计理念,页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使得用户在不同的平台上有着独一无二的用户体验。这里要说明的是,悬浮特效、flash是不适用移动设备的。

面我们来看看在具体的设计中我们要遵循哪些原则?

1.在 响应式网页设计中,有时候我们需要对页面内容进行删减,按照优先级显示内容,只显示高优先级内容是原则之一。在屏幕较小的移动设备上应该优先考虑内容并且 去移掉那些小的栏目。在顶部显示高优先级内容,即把最重要的内容放置在顶部。导航是否一定要出现在页头或者重新布局改在页尾都要依网站具体规划去考虑。

2.提供清晰和友好的手指操作链接。尤其在手机设备上,可点击操作的区块不宜过小,引导要清晰强烈,不忽略任何一款设备。

3.调整设计来适应可用空间,使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。这也遵循我们交互设计体验一致的原则。大家可以参考Oliver Russell网站,一个设计非常灵活的网站,在不同的屏幕分辨率下保持相同的视觉和感觉。

4.需考虑大部分用户右手点击操作,左手负责握住设备的习惯,右侧的导航列表既方便右手的点击,又可以避免被握着设备的左手不小心触碰到。

响应式设计之所以变得流行的一大原因是无论在哪,看起来都很棒。2013我们正处在移动互联网快速发展的时代,一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本,响应式设计为移动互联网而生,Web设计也将迎来更多的响应式设计元素。