响应式网站设计的一般流程是怎样的?
2021/09/26
响应式网站设计不同于传统的网站设计,只需要考虑一种状态,而不是交付一套设计稿,这给设计、前端、开发团队之间的合作模式带来了新的挑战 在复杂产品的综合响应项目中,交互的各个阶段应该产生什么?交互和视觉如何协同工作?前端什么时候涉及?是什么让后端开发更合理?在经历了《花花公子》第一版之后,我们得到了一些答案 响应性设计之所以被称为响应性“设计”而不是响应性“技术”,是因为它是先于设计的工作 在实现之前,需要定义响应模式。不可能产生一个设计草案,等待前端看到情况,把它变成一个响应性的网站设计 因此,整个过程从互动阶段开始,分为六个主要步骤。视情况尽快涉及视觉、前端和开发的角色 步骤1:信息架构,确定内容策略 【/h/】交互设计师根据产品定位和用户分析,确定站点信息架构 (信息架构的呈现方式有很多种,这不是本文的重点,不再详细描述。) 这个时候就可以明确这个产品有多少页,每页包含多少内容,内容的优先级是多少 很多产品包含N页,每一页都一一考虑响应式设计,容易造成混乱,成本高 因此,下一个重要任务是分析页面类型并对页面进行分类 以游戏玩家为例,10多个页面可以分为三类:列表页面、详细页面和操作页面 第二步:移动框架 我们来说说为什么要在第二步先设计移动框架 卢克·乌鲁布莱夫斯基首先提出的移动优先是在移动互联网的浪潮下产生的 移动优先并不意味着移动更重要,在响应性设计的概念中,设备同样重要 指的是优先设计手机的体验。原因有三: 手机让设计聚焦,迫使你想清楚什么信息最重要 因为手机屏幕小,每个屏幕呈现的内容少;触摸屏手机用手指操作代替鼠标等精密设备操作,对操作要求更高;手机使用场景更加丰富,很多场景的用户都不耐烦了。比如你排队看电影,在手机上找电子票的时候,时间长了找不到票,很沮丧。 手机的很多特性让设计更加强大 语音输入,地理位置,丰富的手势操作,手机上越来越多的传感器,比PC更有可能 从手机设计开始,让你早点思考如何发挥这些功能 手机发展迅速 手机即将超越PC,成为最主流的上网方式。这种趋势是不可逆转的 【/h/】对于习惯PC环境的设计师来说,从手机开始设计可能是一个挑战,他们的思维方式和工作习惯也被迫改变 但是这种改变必须适应,因为用户习惯正在改变 回到主题,上一步已经对页面进行了分类,确定了每个页面的内容优先级。现在,对每种页面的导航和主要内容进行分析,最终得到一个框架结构表 从播放器框架结构可以看出,全局导航是所有页面共有的,局部导航只对列表页面可用,详细页面有“页面所有者”信息,而关联导航并不是对每个页面都可用 然后我们开始在手机上设计“超长页面”的框架(因为手机一般是单列布局,页面细而长) 这一步开始将信息结构设计成最广泛的框架,可以在白板或纸上完成 要实现的关键目标是将最需要呈现给用户的内容放在最重要的位置,符合手机上的阅读和操作习惯,并充分利用手机设备的特性 步骤3:响应框架 平板和PC框架根据手机框架进行扩展 这是实现复杂产品响应设计的关键一步,也是很多页面有序响应的基础 首先要确定响应模式,也就是从手机到平板到PC,如何改变导航,页面布局使用哪种响应模式,如何根据内容优先级调整模块顺序等等 玩家主要在PC端使用三栏式布局,左边一栏作为本地导航或者主控信息区,中间一栏始终是页面的主要信息。当页面需要关联导航时,它被统一放置在右列 在这个阶段,所有页面的响应都有规则可循。下一步是继续细化规则,使框架精确到特定的大小 具体来说,就是开发一个流体网格系统 流体网格系统是基于百分比的网格布局工具,具体的制定方法将在另一章【知识篇】中详细介绍 【/h/】响应式是一种将设计理念与前端技术紧密结合的新形式,鼓励跨职能的沟通和尽快协作 在交互确定响应框架和网格系统后,其他角色可以同步工作 前端开始介入完成网格和框架的构建,产生了页面的基本框架 视觉同步开始探索和定义视觉风格探索,制定视觉框架,产生风格关键词和产品配色方案 整个过程需要几个角色不断的讨论和决定 第四步:模块设计 按照移动优先的原则,首先要在移动端设计模块细节,但是我们选择了从PC端设计细节 因为PC端开发可以充分暴露业务的复杂性,所以项目团队的设计、开发和测试在PC环境下有成熟的工具和流程,开发过程从PC开始更加顺畅 所以我个人认为移动优先是确定内容策略时应该遵循的理念。详细的设计和开发过程是否应该移动优先取决于产品定位和项目团队情况 响应框架决定页面结构和响应模式。模块设计的过程开始完善所有的信息排版和交互形式,这是交互设计师最熟练、最耗时的工作 这个过程和传统过程没有太大区别,只是提醒自己这个模块不仅仅是为这个设备设计的,在其他设备下会不会出错? 交互确定页面模块的详细信息后,可以提取产品使用的控件、组件和公共模块。现在,愿景和前端开始做一些不同于传统流程的事情 Vision根据前期定义的样式设计控件组件和公共模块的视觉效果,并组装成模拟页面,我们称之为样式拼贴 前端实现风格拼贴中的控制组件和公共模块,统一维护一套组件规范代码 【/h/】传统的做法是,页面视觉定型后,设计师开始整理视觉规范,标注到前端 风格拼贴是为了尽可能地推进这项工作,把它变成一个设计协作工具 它的优点是: 1。一个页面的视觉效果其实是由一堆控件组件和公共模块组成的。平铺了真实控制组件和公共模块的仿真页面已经可以呈现产品的视觉风格 完成一个产品10页以上的所有视觉草稿是非常费时费力的,而且制作一个风格拼贴要容易得多 所以它是一个有效的设计工具 2。复杂产品总是并行涉及多个设计师和前端工作。尽快提取控件组件和公共模块,统一管理,是保证视觉风格一致性的有效途径 避免不同的设计人员同时设计同一个控制组件或公共模块,减少重复开发造成的浪费 也大大降低了后期更新维护页面的成本。例如,当您需要修改“跟随”按钮时,您只需要更改一个按钮就可以在整个电台中生效 第五步:响应式模块设计 PC页面模块的细节和风格拼贴完成后,剩下的工作就是展开平板和手机的完整设计稿,前端产生所有的响应式页面代码。 设计响应模块时要注意的最重要的一点是使操作符合设备习惯,充分利用设备特性 此时,一个全站响应产品的页面一个接一个的出来 许多人认为响应性设计维护成本高的原因是多套设计草案应该同时在一页上设计 玩家的经历告诉我们,确定了一套设计草图和网格系统,然后在其他设备下扩展设计方案后,工作量远低于想象 第六步:测试&讨论&优化,提交开发 这仍然是你完成之前的最后一步。在真实设备下测试页面效果,项目组会讨论并不断优化 在提交发展计划之前,有必要尽快确定RESS战略 服务器和客户端的结合是目前解决响应页面性能问题最合理的解决方案 哪些大图片只需要在移动设备上输出小尺寸图片?什么内容不需要在什么设备下开发输出?什么可以减少数据输出量?与开发团队的积极合作可以有效控制页面文件大小,防止页面成为移动设备上燃烧用户流量的罪魁祸首 通过测试后,提交页面进入开发阶段 我们从可用性和可访问性两个方面总结了一个响应页面测试清单。测试点包括但不限于内容
我们的优势
上门服务

支持POS机刷卡

最快1小时上门交接资料

专业服务

具有10年以上财务工作经验

严格按照新三板财务标准做账

价格透明

拒绝隐形消费

价格全称透明合理

支付随心

支付宝扫码支付、POS机刷卡

微信扫码支付、现金收款