近几年来,随着移动因特网的迅速发展,移动用户的数量也不断超过PC用户。这就意味着,除了智能手机,使用平板电脑和电视机上网的用户也在不断增长。如何使我们的网站在这种情况下尽可能地兼容各种设备,并确保良好的用户体验,将变得越来越重要。那么通过响应式的设计开发方式,就可以使网站页面根据不同的浏览设备而自行响应,动态调整布局结构,元素规格样式,将相同内容以不同格式呈现给不同设备的用户。接下来就分享一下html5网页制作的超实用流程。
了解目标用户的设备类型和屏幕尺寸;
对目标用户使用设备的基本情况进行分析和统计,明确设备的类型和屏幕大小,例如,移动设备手机端以及平板端,在设计和实现时要注意增加收集功能,至于屏幕的尺寸,在设计时要注意手机的横向、纵向以及平板端的尺寸,而电脑端则要注意普屏和宽屏屏幕。
装置类型:包括移动装置(手机,平板电脑)和电脑。对移动设备来说,在设计和实现时要注意增加手势功能。屏面大小:包括各种手机屏幕(横屏和竖屏),各种平板的尺寸(横屏和竖屏),普通电脑和宽屏。要考虑的问题:当页面用于响应式设计时,它适用于哪种尺寸?比如,某搜索网站的搜索结果页,页面跨度可以从手机到宽屏,而首页,由于结构过于复杂,想直接移植到手机,也不太现实,不如直接设计一个手机首页。将用户需求与实现成本相结合,确定适用尺寸。如有些功能操作页面,用户一般不需要在移动端进行操作,无需响应式设计。
二、制作线框原型。
html5网页制作过程。对于确定下来的几个尺寸分别制作不同的线框原型,需要考虑清楚不同尺寸下的页面布局是如何变化的,内容尺寸是如何调整的,功能,内容的删减,甚至特殊环境的特殊设计等等,这一过程需要设计师和前端开发人员保持密切的沟通。
必须强调的是,响应式设计的目的在于,针对不同设备的屏幕规格区间,对功能和内容的输出格式进行预设,因此在网站制作中,只需选择一些典型的设备,而不必考虑所有已知的规格类型,我们制作线框原型的主要目的是规划出样式背后的逻辑。
三、测试线框原型。
把照片导入相应的设备中进行一些简单的测试,可以帮助我们尽早发现易访问性、可读性等方面的问题。
四、视觉设计
在html5网页制作过程中注意到,移动设备的屏幕像素密度不同于传统的计算机屏幕,在设计时需要保证内容文本的可读性,控制可点击区域的面积等等。
(1)尽可能保持小屏幕规格样式简洁明了。关于UI元素的风格,可以多和前端开发人员沟通,尽量采用CSS3可以实现的常规风格,减少背景图片的使用。
要保证内容的字体字号在所有设备上都是可读的,特别是在手机上。
与传统的Web设计开发类似,最终生成的页面必然会与视觉效果不一致,特别是对响应式网站而言,由于在布局结构和细节样式等方面都需要有能力进行更改,因此在开发过程中产生设计还原度问题的可能性更大。
五、前端实施。
响应式设计的页面相对于传统的web开发而言,由于页面布局、内容大小的改变,所以最终的输出更可能与设计稿不一致,这需要前端开发人员和设计师进行多方面的沟通。