UXD讲义 · Alibaba Design 自新闻媒体核心成员
一、序言
随著智能化电子设备的急速产业发展，笔记本电脑、液晶电视智能化手机、智能化手机、卷曲屏智能化手机、P3100液晶电视等大体积电子设备产业发展十分迅速，在音频影视娱乐成形且多消费市场竞争的金融行业大大背景下，土豆网多终端商品的结构设计是他们挥之不去的研究课题。不论是从产研资金投入的视角却是销售业务产业发展保护上，积极响应式结构设计，是两套极为成形的潜能。为的是更高效率且提高效率率的服务项目他们的商品与使用者，更快跟得上消费市场的消费市场竞争变动，他们须要制订两套适应环境多终端商品的积极响应式结构设计思路。二、认知积极响应式结构设计
在往后的天数里，他们更多的借助自适应环境产业布局的形式来化解多终端商品网络连接的难题，而积极响应式与自适应环境经常被混为一谈，为更明晰的认知这三种同时实现形式的差别，他们来归纳呵呵它间的差别：二、积极响应式结构设计优势
四、结构设计目标与思路
参考网页商品积极响应式网络连接思路，让客户端商品内的页面框架、抽屉组件、坑位产业布局、样式元素等，在既定的结构设计语言和风格的指引下，随屏幕体积调整展示效果，同时实现两套代码网络连接所有体积变动及结构设计语言规范化、商品化和工具化，提升产研效能。他们通过代码统一，借助结构设计标准化管理体系升级，同时实现两套代码多终端商品展示的潜能，更好的在多终端商品进行精细化控制，同时实现产研资金投入的人效降本与使用者体验提升的双赢。结构设计思路与方法
积极响应式在多终端商品的网络连接上，不能只是粗暴的1比1迁移，他们除了要保障体验的一致性外，核心须要让使用者的浏览体验是舒适的，不同大小屏幕比例上的内容展示合理的。如何在不同体积与分辨率的屏幕下，有效的做展示？这就须要结构设计侧通盘考虑所有体积的屏幕，拉通不同宽高比例的结构设计规则，动态调整可见元素的产业布局（包括元素的列数以及体积等），在不同体积的电子设备上都能达到最佳的显示效果，保障使用者的消费体验。结构设计标准化
结构设计标记是结构设计系统的视觉结构设计原子，具体来说，它是存储视觉结构设计属性的命名实体。他们使用它来代替硬编码的值（例如颜色的十六进制值或间距的像素值），以便为UI开发保护可伸缩和一致的视觉系统。结构设计标准化是他们管理结构设计系统性的核心潜能之一，他们透过抽离出框架层上影响视觉风格的原子，包括颜色、字号、间距、圆角、栅格、体积等使其工程化可控制。结构设计团队与开发团队协作，通过统一的协作语言对视觉原子进行描述定义，视觉属性与框架产业布局分离并与开发的工程逻辑能相互对应，通过SDK的形式统一管理，一处替换全端生效，可以更高效率的控制、定义商品风格。以前，结构设计师在针对视觉属性调整时，涉及到要修改的场景众多，点对点修改成本高；现在，通过结构设计标准化，他们把视觉样式进行工程化统一管理，同时实现的是⼀整套结构设计体系化的调整。从1到n的升级
在结构设计标准化1.0时，他们针对统一化的视觉原子抽离做全局的控制，统一且高效率。但随著销售业务的脚步跑的越快，他们也发现了应用上的受限与不足。例如多终端商品积极响应式上，终端商品电子设备的不同、使用场景的不同，都会带来较大的差别。为保障使用者的易读与易操作的良好体验，在不同终端商品电子设备下，界面展示的物理视觉因屏幕分辨率或使用距离的不同须要进行差别化处理，才能更好的保障使用者的商品体验。五、积极响应式结构设计系统
良好同时实现积极响应式的前提有两点：一是页面产业布局具有规律性，建立灵活的栅格产业布局基础；二是摆脱像素，容器按比例同时实现，不固定宽高；这两点本身也是栅格系统自身的特点，他们透过栅格化产业布局的结构设计系统为积极响应式网络连接打下良好的基础。结构设计网络连接基本原则
定义积极响应式的结构设计规则时，他们除了遵循一些基础的产业布局原则外，还须要因应销售业务的属性去做结合，以下是土豆网积极响应式核心覆盖的几个通用网络连接方法：拉伸产业布局：内容在屏幕显示区域内进行相对拉伸，以达到产业布局完整。这种同时实现形式成本低，在积极响应式中大量的被运用。多终端商品积极响应式网络连接差别
基于基本的网络连接原则，他们可以网络连接覆盖70%-80%的使用场景，但为的是满足各终端商品使用者的使用习惯，呈现更人性化的使用者体验，则须要他们更进一步的探究各终端商品的使用者画像及电子设备特性，思考各终端商品的差别化赋能和机会点。他们抽象化多终端商品的差别性，可归纳成电子设备特性差别与使用场景差别两方面：电子设备差别：包含屏幕大小、分辨率高低、系统潜能等。
场景差别：
包含使用距离的远近、使用形式与情景等。
以智能化手机端为例：智能化手机为他们基准端，当它映射到智能化手机端时，屏幕大小的差别特别明显，这时他们须要考虑如何合理的借助屏幕；智能化手机端拥有液晶电视幕体积的优势，还有多任务的差别化模式，他们须要针对同电子设备上屏幕比例切换做积极响应式网络连接，自动调整相对应的页面产业布局与元素。 fill=%23FFFFFF%3E%3Crect x=249 y=126 width=1 height=1%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E "阿里设计：讲透响应式布局设计策略 (目前看过最有威力的一篇)14")
智能化手机端产业布局大部分是单、双列产业布局，但通过积极响应式网络连接映射，他们能根据不同的终端商品同时实现不同的页面变动产业布局
，更好的借助了液晶电视电子设备的优势。
以P3100端为例：不同P3100的屏幕体积多种多样，现阶段主流的屏幕分为横向屏幕比例、竖向屏幕比例两大类，所以P3100应用须要兼顾横向、竖向三种屏幕产业布局，页面能够动态调整内容的显示，以满足不同体积电子设备的网络连接需求。基于对使用者观察模型的研究分析得出，使用者使用智能化手机距离约为30公分，但驾驶舱对P3100屏幕的使用距离约为70公分，这时他们面对的不仅仅是屏幕大小、分辨率的差别，还有使用者使用距离的差别。他们在P3100的网络连接映射上除了对功能的简化外，还针对展示上做了放大处理，界面元素大小须要达到智能化手机基准端的2倍，才能更好的保障使用者的易读与易操作的良好体验。
订制到通用化
尽管有许多网络连接方法，但仍然有部分场景是无法透过上述形式达到良好的网络连接效果，这时他们须要针对这些特殊场景去定义合适的方案或做映射、过滤；例如运营活动相关场景，整体页面经过一次结构设计包装，没有办法做重组的情况下他们须要做特殊处理，保证展示效果。当他们决定采用积极响应式作为他们主流结构设计系统时，他们的工作流程也会发生改变，产研团队在同时实现新的功能或模块时须要考虑在多终端商品的同时实现。在面对销售业务需求时，他们首先要与销售业务达成一致，根据需求类型的不同去支持多终端商品积极响应式的透出，并且全盘考虑如何做展示网络连接，从单端订制思路转变为多终端商品通用化思路。六、最后
通过积极响应式结构设计思路的应用化解了成本与体验的难点，也是至今它仍然受到欢迎的原因。但他们都知道多终端商品的不同、场景的差别性其实不是单纯的积极响应式结构设计能化解的。随著技术急速更迭，未来一定会有新的多终端商品结构设计与技术的化解方案出现，更完善商品在不同电子设备上快速积极响应的同时并保障使用者的体验。积极响应式结构设计项目由土豆网产研团队齐心协作推进，现阶段已经在多终端商品包含智能化手机、智能化手机、笔记本电脑、P3100上落地应用，在此感谢他们土豆网值得骄傲的产研伙伴。他们的求职&招聘群已经开到7群了，这些群纯粹是为的是帮助读者朋友们链接合适的招聘方，无广告、不付费。有新的招聘信息会第一天数同步到群里，同时会不定期分享求职相关的资料，也有大厂的朋友在里面帮助大家内推。欢迎求职者和内推官进群，，备注“求职”或“招聘”即可拉你进群。
与42466位读者一起成长
⭕️⭕️领取粉丝专属资源：大家点个“在看”，然后在【UXD讲义“交互文档”——领取完整交互结构设计文档模板，含Axure和Sketch源文件；“大厂组件”——领取主流的移动端和PC端结构设计组件库源文件；⭐️“大礼包”——领取使用者体验结构设计资源套装，含大厂组件库、交互文档、B端交互资源等。
早上准时收到他们的精选文章，麻烦大家多给他们的文章点呵呵“在看”和“赞”，并在，这样就不会错过每一则精彩的推送了❤️
谢谢大家，希望对你有所帮助
