随着屏幕分辨率跨度的不断增大,网站(WEB)的响应式设计越来越受到每一位前端工程师和网页设计者的重视。响应式设计的优点是一组结构可以在各种分辨率下很好地工作。当然,缺点是它在某些客户机上显得多余。在移动终端方面也有一个劣势,原生的Android AP P还不如iosapp,但如果只是用于内容显示,不需要太多的强大功能,那么响应式布局也是不错的选择。当然,响应式布局有一个缺点,它增加了前端和网页设计的工作量和设计难度。

虽然响应式布局看起来很时尚,但是懒人仍然认为响应式布局只是针对PC终端的多分辨率,而手机这样的移动设备更适合制作手机页面。如果你不愿意在移动终端上投入太多的资金,可以通过web的方式使网页适合移动终端,如果你需要更强大的功能,建议使用原生应用开发。专为移动终端设计网页,避免了从PC机到移动终端的大分辨率跨度,使移动网页更加简洁高效。为什么不?如果你想让电脑对苹果的302x480做出超分辨率的响应,那可真是件麻烦事。

与传统的web页面不同,响应式web页面只需要考虑一种状态,而不需要交付一组设计草稿。团队之间的协同设计给前端带来了新的挑战。在一个具有复杂产品的完全响应的项目中,在交互的每个阶段应该产生什么?互动和愿景如何协同工作?前端何时介入?什么让后端开发更合理?在看过“游戏玩家”之后,我们有了一些答案。

响应式设计之所以被称为响应式“设计”而不是响应式“技术”,是因为它是设计优先的任务。需要设计一个好的响应模式并加以实现。不可能生成一组设计草稿,然后等待前端将其转换为响应web页面。因此,整个过程从互动阶段开始,分为六个主要步骤。愿景、前端和开发的角色应该尽快介入。

Step1:信息架构,确定内容策略。

交互设计者根据产品定位和用户分析,确定网站的信息架构。(表示信息架构的方法有很多种,这不是本文的重点,也不会详细介绍)。

此时,您可以确定产品有多少页,每个页包含多少内容,以及内容优先级是什么。许多产品包含N个多页,响应式设计容易造成混乱和巨大的成本。因此,下一步的重要工作是分析页面类型并对页面进行分类。例如,10多页可以分为三类:列表页、详细页和操作页。

Step2:响应式移动框架

让我们来谈谈为什么在第二步中首先要设计移动框架。移动优先权是在移动互联网浪潮中出现的一个概念,最早由卢克·沃布列夫斯基提出。移动优先级并不意味着移动更重要。在响应式设计的概念中,设备同样重要。它是指优先设计手机的经验,有三个原因:

手机可以让设计聚焦,迫使你思考哪些信息是最重要的。由于手机屏幕小,每个屏幕上的内容较少;触摸屏手机采用手指操作,而不是鼠标等精密设备,对操作有更高的要求;手机使用场景更加丰富,很多场景用户心急如焚。比如,当你排队看电影,用手机找电子票时,会马上等你转了半天,却找不到票,这是多么让人心碎的事情。

手机的许多功能使设计更强大。随着语音输入、地理位置、丰富的手势操作以及手机上越来越多的传感器,移动交互比PC有更多的可能性。从手机开始,你可以更早地思考如何使用这些功能。

移动电话发展迅速。手机即将超越PC,成为最主流的上网方式。这种趋势是不可逆转的。

手机设计对于习惯于PC环境的设计师来说可能是一个挑战,他们的思维方式和工作习惯也被迫改变。但这种习惯是用户必须改变的。

回到主主题,在上一步中,我们已经对页面进行了分类,并确定了每个页面的内容优先级。现在我们将分析每种类型页面的导航和主要内容,***得到一个框架结构表。从player框架结构可以看出,全局导航是所有页面共有的,只有列表页面有本地导航,详细页面有“页面所有者”信息,但并非每个页面都有关联的导航。

然后我开始在手机上设计“超薄页面”的框架(因为手机的布局是单列的,所以页面又细又长)。这一步开始将信息结构设计成最广泛的框架,可以在白板或纸上完成。实现的关键目标是:将本页面需要呈现给用户的内容放在最重要的位置,符合手机上的阅读和操作习惯,充分利用手机设备的特点。

Step3:响应式设计框架

根据手机的结构,开发了平板电脑和PC机的框架。这是实现复杂产品响应式设计的关键步骤,也是使多个页面有序响应的基础。首先要确定响应模式,即从手机到平板电脑再到PC,如何改变导航,页面布局采用哪种响应模式,如何根据内容优先级调整模块顺序等。PC终端播放器的主要布局是三列。左侧列用作本地导航或主机信息区,中间列始终是页面的主要信息。当页面需要与导航关联时,应将其放置在右栏中。

在这个阶段,对所有页面的响应都要遵循一些规则。下一步是继续细化规则,使帧精确到特定大小。具体来说,就是开发一个流体网格系统。流体网格系统是一种基于百分比的网格布局工具。具体的制定方法将在另一章【知识部分】中详细介绍。

响应式设计是设计理念与前端技术紧密结合的一种新形式,鼓励跨职能部门尽快进行沟通与合作。一旦响应框架和网格系统交互确定,其他角色就可以同时工作。前端开始介入完成网格和框架的构建,并输出页面的基本框架。视觉同步开始探索和定义视觉风格探索,开发视觉框架,输出风格关键词,产品配色方案。整个过程需要由几个角色来讨论和决定。

Step4:模块设计

根据用户体验中移动优先的原则,我们应该先设计移动终端的模块细节,但我们选择从PC端设计细节,由于PC端的开发可以充分暴露业务的复杂性,所以项目组在PC环境下拥有成熟的设计、开发和测试工具和流程,因此,我认为移动优先级是决定内容策略时应该遵循的概念。详细的设计和开发过程是否应该移动优先,取决于产品定位和项目团队的情况。

响应框架决定了页面结构和响应模式。模块设计的过程开始改进所有的信息排版和交互形式,这是交互设计者最熟练和最耗时的工作。这个流程和传统流程没有太大区别,只要不断提醒自己,这个模块不仅是为这个设备设计的,在其他设备下会不会有问题?

在交互确定页面模块细节后,可以提取产品使用的控件、组件和公共模块。现在视觉和前端开始做一些不同于传统流程的事情。可视化设计根据前面定义的样式控制控件组件和常用模块的视觉效果,并将其组装成一个模拟页面,我们称之为样式拼贴。前端实现了样式拼贴中的控制组件和通用模块,以维护一组组件规范代码。

传统的方法是在页面定稿后,设计师开始组织视觉规范并将其标记到前端。风格拼贴就是为了让这一点尽早发挥作用,成为一种设计协作工具。其优点是:

1页面的视觉效果实际上是由一堆控件组件和公共模块组成的。用真实的控件组件和公共模块组成的模拟页面可以呈现产品的视觉风格。完成一个产品10多页的视觉草稿非常耗时费力,制作风格拼贴也容易得多。所以它是一个有效的设计工具。

2复杂的产品总是涉及多个设计师和前端并行工作。快速提取控制元件和常用模块,是实现统一管理的有效方法。避免不同设计人员同时设计同一控制元件或共用模块,减少重复开发造成的浪费。它还大大降低了后期更新和维护页面的成本。例如,当您需要修改“follow”按钮时,只需更改一个按钮即可在整个站点中生效。

Step5:响应式模块设计

在完成PC页面模块的细节和风格拼贴后,剩下的工作是开发完整的平板电脑和手机的设计草图,并在前端生成所有响应页面代码。在响应模块的设计中,最重要的是使操作符合设备习惯,充分利用设备特性。

至此,一个完整的网站响应产品页面已经相继出炉。许多人认为响应式设计维护成本高的原因是一个页面需要同时设计多组设计草稿。玩家的经验告诉我们,在确定了一套设计草图和网格系统后,再在其他设备下扩展设计方案,工作量远远低于预期。

Step6:测试、讨论和优化,提交开发

然后是测试页面在实际设备上的效果,项目团队讨论并不断优化用户体验。

在进行开发之前,有必要尽早定义服务端响应(RESS)策略。服务器和客户端的结合是解决页面响应性能问题的最合理的方法。哪些大图片只需要在移动设备上输出小尺寸图片?哪些内容不需要在什么设备下开发和输出?什么可以减少数据输出量?有了开发团队,responsive可以有效地控制页面文件大小,避免页面成为移动设备上消耗用户流量的罪魁祸首。

通过测试后,提交页面进入开发阶段。我们从可用性和可访问性方面总结了一个响应性页面测试清单。测试点包括但不限于以下内容。欢迎添加。