响应式网页设计技巧

新闻 2024-9-21编辑：深圳网站建设阅读（）标签： 网页设计 响应

深圳网站建设【shè】公【gōng】司【sī】 帮助企业提升网站形象,彰【zhāng】显公司实【shí】力,PC+手机+微信+小程序【xù】
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您提【tí】供1对1的专【zhuān】属VIP服务

　　没有哪个成功【gōng】的Web项目是【shì】在设计师和开发无法【fǎ】流畅沟【gōu】通的前提下搞定的【de】，协作【zuò】才【cái】是做好项目【mù】的基础。

　　我曾看到经验丰富的【de】设计师和开【kāi】发【fā】者因为沟通不【bú】畅和【hé】误会导致项目失败，也见【jiàn】过新【xīn】手设计师和【hé】开【kāi】发团队一起通过【guò】高效协同，做出【chū】惊【jīng】艳无比【bǐ】的设计项目。在【zài】项【xiàng】目之初【chū】充分的磨合，能【néng】让项目在后续的快速迭代中更为流畅。足够【gòu】和谐的沟通不【bú】仅有利【lì】于工【gōng】作，而且能【néng】让【ràng】整个团队保持情绪的稳定性。

　　而在响【xiǎng】应式网页设计项【xiàng】目【mù】中，设计师和开发【fā】者之间的【de】沟通流畅与否，就显得更为重【chóng】要。

　　设计响应式网站的时候【hòu】，整【zhěng】个团队必须为大量不同【tóng】尺寸【cùn】屏幕的【de】设备充分【fèn】考虑，习惯于“像素精准”的设【shè】计师和开发者需要对流动的界面和大量的不【bú】同【tóng】比【bǐ】例的设【shè】备有充分【fèn】的准备。简而言之【zhī】，响【xiǎng】应【yīng】式设计使得整个【gè】项目交付面临着大量的不确定因【yīn】素【sù】，这【zhè】也是响应【yīng】式网站项目的难点。

　　希望接下来的5个小技巧，能帮各个团队【duì】顺利【lì】搞定【dìng】这【zhè】种【zhǒng】项目【mù】中的沟通【tōng】障碍和技术问【wèn】题。

　　1、优先专注“极端”尺寸

　　当你面对着手机屏幕和【hé】桌【zhuō】面端显【xiǎn】示器这两种极端的屏幕尺寸【cùn】之时，疑问会自然【rán】而然出现。有的设计师打一开始【shǐ】就从动【dòng】态的视角【jiǎo】开始他们的设计，但是【shì】绝大多【duō】数的设【shè】计师仍【réng】然是从静态的页面开【kāi】始着手设计的：选【xuǎn】择一个【gè】固定的高度【dù】和宽度，绘制【zhì】相应的草图或者【zhě】视【shì】觉【jiào】稿。

　　这样一来【lái】，就【jiù】引【yǐn】出了几个问题：你的开发团队【duì】优先考虑什么尺寸?设计团队首先交付的高保真视觉稿是哪个【gè】尺寸的【de】?从技【jì】术限制【zhì】的角【jiǎo】度出【chū】发，你【nǐ】应该优先考虑【lǜ】什【shí】么设备?

　　我始终【zhōng】推荐从用【yòng】户最基本的“极端”尺寸开【kāi】始考虑，推荐当【dāng】前(2015年)常用设备【bèi】中最小和最【zuì】大的情况：

　　320 x 568 px (iPhone 5 ，由【yóu】于它是视网膜屏幕，平【píng】时【shí】我们是按照【zhào】72dpi来设计，但是iPhone 5的显示实际是144px，所以我们给【gěi】出了这样的【de】一【yī】个设计尺寸。作为UI设计师【shī】的你应该【gāi】很【hěn】清楚【chǔ】@2x和@3x的问题【tí】)

　　1600×1000 px (桌面显示器的常见尺寸)

　　当然，你的用户的实际情况可能略有不同，稍加【jiā】调查【chá】，确定【dìng】“极【jí】端情况【kuàng】”。

　　“刚刚开始【shǐ】响【xiǎng】应式网页项目的时【shí】候，从【cóng】用户最常见的【de】最大和最小尺寸设计着手。”

　　当你面对最【zuì】小的【de】屏幕的【de】时候【hòu】，你需【xū】要在小屏幕上呈【chéng】现出最重要的内容【róng】，如何选取是一【yī】件颇为费神的事情。但是【shì】面对大屏幕的时候，你【nǐ】所思【sī】考【kǎo】的【de】事情又【yòu】是截然相【xiàng】反【fǎn】的：怎么【me】展【zhǎn】示内容才算是过多?分【fèn】栏是否因【yīn】太宽降低了易读性?如何选取【qǔ】元素才能避免这样的问【wèn】题?最后，面对两个不同尺寸的界面，你还要考虑它【tā】们所涉及【jí】的输入方式，最小的屏【píng】幕【mù】上【shàng】通常是触摸屏【píng】和虚【xū】拟键盘【pán】，最【zuì】大的【de】屏幕上【shàng】，绝大多数【shù】时候是传统的键盘鼠标。

　　这里【lǐ】最重要的事【shì】情可能【néng】是你需要一次挑选两个界面尺【chǐ】寸来做，而不是传【chuán】统的针对一个屏幕【mù】设计，然后完成剩下的部【bù】分。设计师和开发【fā】者【zhě】在这个问【wèn】题上出现分歧【qí】，对【duì】后【hòu】续【xù】的【de】影响是非常【cháng】大的。

　　2、讨论不同断点之间内容布局

　　在日常【cháng】的网页设计中，大家对于静【jìng】态的线框图【tú】投注了【le】如此之【zhī】多【duō】的关注，但是在做响应【yīng】式设计的时【shí】候，应该始终谨记页面内的布局是【shì】流动的。这也就意味着，你网页的用户绝大多【duō】属【shǔ】时【shí】候【hòu】所体验到的页【yè】面其实是它的【de】“中间态”。所以【yǐ】，你必须考虑随着屏幕尺寸【cùn】大小的转【zhuǎn】变，布局设计的每一个调整和改变【biàn】。比如，当【dāng】屏幕尺寸【cùn】变小的时【shí】候，文【wén】本【běn】内容需【xū】要【yào】收缩，并且【qiě】和混排的图片会与文章【zhāng】缩【suō】到一栏中去。

　　这些适配能与【yǔ】不能、该与不该的问题上，尽量【liàng】不要同你的开发【fā】团队去“假设”或者“推测”。积极主动地【dì】去确【què】定这【zhè】些【xiē】信息，在你负责开【kāi】发的同事还没有做太【tài】多之【zhī】前，和他【tā】们达成共【gòng】识【shí】。对【duì】于复杂的布局【jú】改【gǎi】变，事先绘制先框图或者草【cǎo】图【tú】来单独说明，是非常明智的选【xuǎn】择。对于一些不【bú】那么【me】重要的特性【xìng】，通过【guò】简短的讨论或者电子邮件【jiàn】通知就足够【gòu】了。

　　3、对于图片素材的处理策略早做准备

　　响应式网页中的图片，通常是由一组多个不同尺寸的【de】图片组成【chéng】的。比如我的个【gè】人【rén】网【wǎng】站首页顶部的大图，就【jiù】是由一【yī】组【zǔ】6个【gè】图【tú】片组成的，分辨率和【hé】尺【chǐ】寸【cùn】各不相同，确保不同【tóng】的【de】设备都能匹配上对应的图片【piàn】。

　　图片格式和【hé】尺寸通常会让团队内的设计师和【hé】开发者【zhě】之【zhī】间产生隔阂。你可以用【yòng】PNG，也可以【yǐ】用JPG，图标字【zì】体【tǐ】和SVG也会【huì】在网页上很好的运用。也就是说，并没有一个正确的答案【àn】：用什么更多是取决于【yú】可用的内容【róng】和资源本【běn】身【shēn】。但是重要的地方在于，大家要在使用格式上达成【chéng】共识【shí】，并且坚持使用下去。另【lìng】外，你可能【néng】也想【xiǎng】钻【zuàn】研【yán】出一套通用的图片尺寸体【tǐ】系，运用在不【bú】同的【de】项目中。

　　不过【guò】对于现【xiàn】代【dài】的响【xiǎng】应式网【wǎng】页设计，这仅仅只【zhī】是【shì】一【yī】个起【qǐ】点。现在要做你至少需要两套图片素材，一种是【shì】给普【pǔ】通PPI的【de】屏幕所设计，一种是给【gěi】高PPI的视网膜【mó】屏所准备的。更完【wán】备的响应式网页，对于图集和素材的要求更高【gāo】，细分更多，针对性【xìng】更强。

　　尽量避免将响应式图片格式的筛选决策留到项目后期。

　　最起码，你得【dé】针对不同像素【sù】密度【dù】的【de】屏幕作出基本【běn】的【de】区分。仔细读一【yī】下这篇【piān】关于srcset的【de】文章【zhāng】，或【huò】者使【shǐ】用Picturefill这【zhè】样的工具来【lái】确保跨浏览器支持【chí】。如果你觉得整个方案【àn】不堪重负，那么不妨从小的部分开始做起【qǐ】。逐步调整图片元【yuán】素的srcset属性就是一个【gè】不错的开始【shǐ】，在这个过程【chéng】中，你会【huì】逐步看到网页的响应【yīng】越来越【yuè】靠谱。

　　4、从基础元素开始思考，使用模块化设计

　　我的响应式【shì】网页【yè】设计流程深【shēn】深地【dì】受到了【le】Brad Frost 的Atomic Web Design和Jonathan Snook 的SMACSS的影响。两个框架都依靠小而可复用的基础【chǔ】组件来【lái】实现强大的网络架构。

　　所以，在【zài】与开发者交接【jiē】的过程中【zhōng】，我会优先专注小而可复用【yòng】的组【zǔ】件，因为【wéi】它【tā】们能给不同平台不【bú】同设备带来【lái】相【xiàng】同的用户体验和视【shì】觉效果。这【zhè】种【zhǒng】一致性会更容易为开发【fā】团队所消化吸收。而且，小组件在不【bú】同页【yè】面之间的复用性【xìng】也非常强，所以，如果你设计【jì】出了一套高效的【de】方案，今【jīn】后还会有用武【wǔ】之地。

　　想象【xiàng】一下【xià】，你正在设计一【yī】个带有大标【biāo】题、高清大图【tú】和【hé】表单的注册页面。由于网页是响应【yīng】式的，所以所有这【zhè】些元【yuán】素都会【huì】随着设备和屏幕的转换而变化尺寸【cùn】。那么在【zài】项目研发早【zǎo】期，应该同开发团【tuán】队一起钻【zuàn】研，敲【qiāo】定页面所涉及的各个细节【jiē】。它看【kàn】起来【lái】应该是什么样【yàng】子【zǐ】?用什么【me】样【yàng】的验证机制?如果要输入表单，如【rú】何配合触摸屏和传统的键鼠?

　　5、让开发者给视觉和体验设计做反馈

　　有些设计师在产品设计【jì】会【huì】议、可用性设计环【huán】节和其他的沟通环节【jiē】不【bú】让开发【fā】者参与或提供反馈。这种【zhǒng】放任和【hé】封【fēng】闭是错的。要知【zhī】道，经验【yàn】丰富的开发者在产品【pǐn】、体【tǐ】验和设计领域同样有着极为丰【fēng】富的【de】知识。让他们参【cān】与到这些环【huán】节中【zhōng】，能让产品更加【jiā】成熟。前端和设计【jì】师在技【jì】能上的重【chóng】叠就更多了。

　　越来越【yuè】多的设【shè】计师【shī】开始自己写【xiě】代码了，开发者也【yě】逐渐习惯于制作快速原【yuán】型、先框图【tú】，并且也会在私底下【xià】恶补美学和设计类【lèi】的知识。响应【yīng】式网页【yè】设计的【de】出现【xiàn】，使得两个职业【yè】之间的【de】交叠越【yuè】来【lái】越多，加【jiā】剧了【le】这一趋势。虽然没有设计师的头衔【xián】挂在开发者头【tóu】上，但是他们对于设计往往【wǎng】能说【shuō】出惊人之语，发人深省。

　　当【dāng】然，不【bú】同【tóng】的角色和【hé】职责的【de】划【huá】分依然是【shì】极为重【chóng】要的。但是稍微调整一些【xiē】小步骤，确实【shí】能显著提高【gāo】最终产品。所以，你做下一【yī】轮产品可用性测试的时候，不妨带着【zhe】开发者一起来讨论。

　　结语

　　所有这五个技【jì】巧都需要【yào】实现计划，并且【qiě】不停补【bǔ】充。绝【jué】大【dà】多数团队【duì】都将注【zhù】意【yì】力放在产品的发布和卡Deadline上，这个阶段【duàn】再来考虑这些问题，不利【lì】于【yú】产品，也不适合【hé】此刻团队内的设计师和开发者。

• 上一章：创意网站设计的五个技巧
• 下一章：网站建设如何设计网页的底部，页脚对网...