![中山做网站公司:响应式设计等于响应式技术吗](/uploads/usepic/bf536d69094e1faefbc34cb80cafe176.jpg)
中山做网站公司:响应式设计等于响应式技术吗
响应式网站设计与传统网站设计不同。它只需要考虑一个州。它不是设计草案的交付。它为设计,前端和开发团队之间的协作模型带来了新的挑战。在复杂产品的综合产品响应项目中,与输出的每个阶段进行交互,进行什么交互和视觉合作,以及何时前端涉及什么使后端开发成为更合理的体验。在第一个版本的“播放器”之后,我们得到了一些答案。
响应式设计被称为响应式“设计”而不是响应式“技术”,因为它是设计第一的工作。需要设计一个明确的响应方法然后出来,不能产生一套设计草稿并等待前端将其看成响应式网站设计。因此,整个过程从交互阶段开始,分为六个主要步骤。愿景,前端和发展的角色尽早参与。
步骤1:确定内容策略的信息架构。
基于产品定位和用户分析,交互设计者确定站点信息架构。 (有很多方法可以呈现信息架构,这不是本文的重点,不详细)。
第2步:移动框架
让我谈谈为什么第二步是首先设计移动框架。移动优先级是由Luke Wroblewski首先提出的移动互联网浪潮中产生的概念。移动优先级并不意味着移动性更重要,并且设备在响应式设计理念中同样重要。它指的是首先设计移动终端的经验,原因有三:
移动电话专注于设计,迫使您找出最重要的信息。由于手机的屏幕很小,每个屏幕上显示的内容很小;触摸屏手机采用手指操作代替鼠标等精密设备进行操作,对操作要求较高;手机使用场景更加丰富,很多场景用户都不耐烦,比如当你排队看电影时,你正在手机上寻找电子票。这是一个长时间推迟但你找不到机票的车祸。
手机的许多功能使设计更加强大。手机上的语音输入,地理位置,丰富的手势,越来越多的传感器,手机互动比PC更具可能性。通过手机进行设计,您可以考虑如何更早地使用这些功能。
手机正在快速增长。手机即将超越个人电脑,成为最主流的互联网接入方式。这种趋势是不可逆转的。
回到主题,上一步已对页面进行了分类并确定了每个页面内容的优先级。现在,它分析导航的帧结构和每种类型页面的主要内容,最后绘制一个帧结构表。从播放器框架结构可以看出,全局导航对于所有页面都是通用的。本地导航仅适用于列表类型页面。详细信息页面具有“页面主页”信息,并且相关导航不适用于中山做网站公司每个页面。
然后开始在手机上设计“超薄页面”的框架(因为手机通常是单列布局,页面很薄很长)。此步骤首先将信息结构设计为可在白板或纸张上完成的最广泛的框架。实现的关键目标是将该页面需要呈现的内容放在最重要的位置,以符合手机上的阅读和操作习惯,并充分利用移动设备的特性。 。
![中山做网站公司:响应式设计等于响应式技术吗](/uploads/usepic/8a62dd06b3557957359a38cc55ac2893.jpg)
第3步:响应式框架
在所有页面响应的这个阶段,都有遵循的规则。下一步是继续优化规则并使框架精确到特定大小。具体而言,是开发流体网格系统。流体网格系统是基于百分比的网格布局工具,具体的开发方法将在另一章[知识]中详细描述。
响应性是设计概念与前端技术紧密结合的新兴形式,尽可能早地鼓励跨功能通信和协作。一旦响应式框架和网格系统以交互方式确定,其他角色就可以一起工作。前端开始介入以完成网格和框架构造,从而产生页面基础框架。视觉同步开始探索和定义视觉样式探索,开发可视化框架,并生成样式关键字和产品颜色方案。整个过程需要讨论和确定几个角色。
第4步:模块设计
响应式框架确定页面结构和响应模式。模块设计过程开始改进所有信息布局和交互形式。这是交互设计人员最熟练,最耗时的工作。此过程与传统过程没有太大区别,但我必须提醒自己,此模块不是为此设备设计的。它会在其他设备下引起问题吗?
在交互以确定页面模块的详细信息之后,您可以提取产品使用的控件,组件和公共模块。现在,愿景和前端开始做与传统流程不同的事情。 Vision根据前一时期定义的样式设计控制组件和通用模块的视觉效果,并将它们放入模拟页面,我们称之为样式拼贴。前端实现样式拼贴中的控件组件和通用模块,以维护一组组件规范代码。
传统的方法通常是在页面完成后,设计师开始将视觉规范组织到前端。样式拼贴是为了使这项工作尽早完成,并将其转化为设计协作工具。它的好处是:
2,复杂的产品总是涉及多个设计师和前端并行工作,尽早提取控制组件和公共模块进行统一管理,是保证视觉风格一致性的有效方法。避免不同的设计人员同时设计相同的控制组件或通用模块,减少重复开发造成的浪费。中山做网站公司它还大大降低了更新后和维护页面的成本。例如,当您需要修改“关注”按钮时,您只需要更改一个即可生效。
第五步:响应模块设计
完成PC端页面模块细节和样式拼贴后,剩下的工作是扩展平板电脑和手机的完整设计,前端生成所有响应式页面代码。在设计响应模块时要注意的最重要的事情是使操作符合设备习惯并充分利用设备特性。
此时,一站式全站仪响应产品纷纷问世。许多人认为响应式设计维护成本高的原因是一页必须同时设计多组设计。这种游戏体验告诉我们,在确定了一套设计草图和网格系统之后,我们将扩展其他设备的设计,并且工作量远低于预期。
Step6:测试讨论优化,提交开发
在进行开发之前,需要尽早识别明确的服务器响应(RESS)策略。服务器和客户端的组合是解决响应式页面性能问题的最合理的解决方案。哪些大图片只需要在移动设备下输出小尺寸图片,哪些内容不需要设备开发输出,这可以减少输出数据量和开发团队的响应能力,可以有效地控制页面文件大小,避免页面成为移动设备在设备上刻录用户流量的罪魁祸首。
测试通过后,提交页面进入开发过程。我们在可用性和可访问性方面总结了响应式页面测试清单。测试点包括但不限于此。