您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 项目/工程管理 > 响应式设计项目设计规范文档
响应式设计项目设计规范文档1.网页设计中的响应式布局设计在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:布局类型布局实现采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。1.固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;2.可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;3.弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;4.混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。布局响应对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:布局不变,即页面中整体模块布局不发生变化,主要有:*模块中内容:挤压-拉伸;*模块中内容:换行-平铺;*模块中内容:删减-增加;布局改变,即页面中的整体模块布局发生变化,主要有:*模块位置变换;*模块展示方式改变:隐藏-展开;*模块数量改变:删减-增加;很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。2.响应式布局设计在大屏幕上,导航置顶或导航居左是两种典型的设计模式,然而,这两种模式在小屏幕上却遭遇挑战。在响应式设计日渐流行的今天(译者注:其实已经流行了好几年了),我们更有必要重新审视针对小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航,必须既方便用户快速访问,又不能过于突出。以下,我列出了7种常见的响应式导航的设计模式,它们分别是:1.置顶(或“放任自流”)2.页脚锚点3.菜单选择4.开关5.侧滑6.置底7.彻底隐藏上述每种设计模式都各有利弊,大家在选择导航设计方案时,需要根据项目的实际情况作出判断。置顶(或“放任自流”)![置顶(或“放任自流”)的案例][3]将导航置顶或让导航随布局任意流动(放任自流)是一种最简单的导航实现方式。正是由于这种易于实现的方式,它也成为了当下许多响应式网页的“标配”。优点o易于实现:在大屏幕和小屏幕上的实现方式一致o不依赖JavaScript:这样就最大程度上保证了兼容性o无需打破原有CSS样式o无需打乱内容本来的顺序:这种方式保证了它是完完全全的流体布局,无需一丁点的人为干预缺点o占用空间:高度问题在移动端是核心问题。Luke在自己的书中表达的“内容优先,导航其次”是典型的移动端网页体验。我们都期望用户能够以最快的速度获取内容,这久意味着我们需要移除导航以确保用户关注的焦点始终保持在核心信息上。而当导航高度过大,导致屏幕内的核心信息无法展示的时候,就会引起用户的疑惑。如下图,当我们打开一个页面时,整个屏幕都被导航占据,用户无法获取有效信息。![置顶导航在小屏幕上自动折行显示][2]o扩展性差:当你的导航刚好在一行内展示时,若要再添加章节的时候会出现什么情况呢?如果客户突然要求再增加一个名为“产品和服务”的导航类目呢?或者将导航标题翻译成其他语言后导致字符长度的变化呢?这些情况都会破坏原有的设计方案。o粗手指:导航全挤在一起,粗手指心急如焚,怎么点也点不到自己想要访问的导航链,这样就增加了误操作的几率(不适合小屏幕上通过手指进行点击操作)o跨设备的问题:不同设备渲染的方式各异,在iPhone上很棒的页面或许在其它平台上表现得很糟糕。![不同设备上渲染的差异][3]案例*[Yiibu][4]*[TrentWalton][5]*[TimKadlec][6]*[EthanMarcotte][7]*BradFrostWeb相关资料HeightMattersby@andmagDon’tLetYourMenuTakeOverby@StuRobson页脚锚点在页面头部只保留一个去底部的锚点,将导航放在页脚是一种讨巧的做法。它节省了头部宝贵的空间,同时又满足了访问导航的需求。优点:容易实现:页眉锚点,导航置底,没有比这更简单的了!–不依赖JavaScript:这意味着更少的测试和更好的浏览器支持CSS改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了缺点:用户迷惑:快速跳转至页脚这一动作容易让用户迷惑缺乏优雅:这样说很奇怪(译者也有同感),但我(作者)认为类似开关的交互方式更性感一些。这种采用锚点跳转的方式虽然实用,但不优雅,相比那些经过精心设计的移动端应用的交互方式而言太过粗糙。案例GreyGooseContentsMagazineBagcheck(Iknowit’snotresponsive,butit’swherethetechniquewaspopularized)相关资料ASimple,Responsive,MobileFirstNavigationMobileFirstBook菜单选择将导航收纳在一个选择菜单的控件当中是一个不错的方式。它避免了导航置顶所占用的屏幕空间。优点腾出了足够的空间:一个选择菜单无论是在横向或纵向上都特别省空间符合用户习惯:相比置底的方式,用户更习惯导航被放置在页面头部容易辨认:下拉菜单的控件样式十分显眼,及其容易发现支持本地化的交互方式:由于采用标准控件,使得操作十分本地化,这种本地化是指对设备自身属性的支持,比如,在触摸设备上能够通过点击操作,而在轨迹球上支持滚动操作;缺点样式不统一:不同浏览器会呈现不同样式的下拉菜单可能会让用户困惑:大部分用户只在填写表单时才会看见下拉菜单,而将下拉菜单用作导航,担心用户一下子无法理解下拉菜单内容的处理方式比较奇怪:因为在下拉菜单中,子项目会自动缩进,这样虽然可用,但从视觉上看十分混乱;可能会依赖浏览器调用JavaScript案例:TinyNavby@viljamisConvertaMenutoaDropdownforSmallScreensProgressiveandResponsiveNavigationResponsiveMenu相关资料:ViljamiSalminenRetreats4GeeksFiveSimpleStepsPerformanceMarketingAwards开关开关的实现方式类似页脚锚点,但不是点击跳转至页脚,而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。优点易于理解:相较于页脚锚点突然间的跳转,开关这种是位置不变的交互方式更容易让用户接受交互更优雅(相比跳转而言)拓展性强:你唯一要做的就是在PC端隐藏开关,在适当的断点处显示它,这一切的一切都能通过CSS来实现缺点动画可能不够平滑:Android对于动画的支持一直不好,因此,可能得到你想要的效果非常依赖JavaScript:正因为打开开关的动画需要JavaScript来实现,所以它的兼容性不太好(作者的黑莓设备就不支持);案例StarbucksMobileWebBestPracticesTwitterBootstrap相关资源FlexNavAResponsiveDesignApproachforNavigation,Part1by@filamentgroup侧滑导航侧滑是在Facebook的大力推广下流行起来的。之所以叫抽屉源于它的交互动效,当点击菜单按钮后,导航模块会像抽屉一样从页面边缘滑动出现。优点空间充裕:因为从边缘滑出,这些内容被理解为在底层或屏幕外的无限区域内好看:简洁就是美,而且动画效果惊艳缺点小众:与其他简单的设计模式比起来,从侧面滑动展开导航栏的效果需要若干复杂的动画来实现,这样就将一些低端设备挡在门口。因此,如果你的项目是面向大众而设计的,需要谨慎。适配性不好:这种模式仅适合移动设备,在大屏幕上的表现并不好(也没有必要)。可能存在迷惑:当我(作者)第一次看到Facebook采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)案例BarackObama相关资料APleaforProgressiveEnhancement只在页脚放置导航只在页脚放置导航和页脚锚点类似,只是它不在页眉放置锚点。这种模式的理念是内容优先、导航其次。这种方式需要用户将页面滑动至底部才能看见导航优点:容易实现兼容性(无需JavaScript)CSS改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了缺点:难以发现:无论在大屏或小屏上都很难发现页脚会有导航;难以使用:移动端用户需要不断滚动页面至底部,才能使用页脚导航,十分不便相关案例:PearsFray彻底隐藏将导航隐藏,得到最大化的空间这种设计模式遵循了该法则:不要惩罚那些通过移动端访问你网站的用户。移动端用户到底想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的事情,因此,仅针对移动端用户提供某些核心功能是很有必要的。优点:屌爆了(原文Sexyashell求大神信达雅的翻译)完美的利用有限的屏幕空间对于移动端设备有很大优势,只用向下滑动就能查看更多缺点:去掉了针对移动端用户的核心功能或内容将链接或内容隐藏的做法并不好。响应式的鼓吹者认为这种做法会导致移动端页面与桌面端形成内容上的差异,以及体验上的灾难。增加页面额外的开销使用命令display:none仅能在页面上隐藏该元素。页面的代码、图片或别的文件依旧在后台下载,这最终导致了页面访问缓慢。难以维护两个完全分离的导航体系将成为后期维护时的负担可能存在迷惑移动端用户向下滑动页面来刷新列表时,并不会意识到当我(作者)第一次看到Facebook采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)相关案例:AuthenticJobsrourkery.comApreviousversionoftheObamaresponsivesit相关资源:MediaQueryandAssetTests结语移动导航就像你真正的朋友一样:彼此需要,但又给彼此空间;而那些假装跟你很要好的朋友总是在你需要的时候消失(当你需要导航的时候找不到)或者占据你的个人空间而让你抓狂(比如:擦,从我床上滚下去);因此,针对响应式导航进行设计,需要在访问的便携性和空间上做一个平衡。来源:阿里巴巴用户体验设计部博客3.20个响应式网页设计中的“神话”区分虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么。很多时候你看到网上的一些信息也在挑战你对响应式的理解。有时候一些小报告给你建设性的建议,并帮助你的设计朝着正确的方向发展。但有些时候你会很迷茫,而且设计思路会与实际相反。当出现这种情况的时候不要责备任何事情。响应式网页设计的领域还是很新,而且所有的这一切都在产出中。除此之外
本文标题:响应式设计项目设计规范文档
链接地址:https://www.777doc.com/doc-1400909 .html