2018年第3期 信息通信2018(总第 183 期）INFORMATION & COMMUNICATIONS(Sum . N o 183)组件化在应用界面设计中的优势和表现胡超(江南大学设计学院，江苏无锡214122)摘要：组件化是应用编程开发中早有的概念，随着移动应用的发展，逐渐在界面设计中起到重要作用。
文章以近年来移动应用U I 的升级发展为研究对象，以满足用户需求为目标，从心理学、视觉解构、色彩构成等角度进行思考，为组件化的 设计方式提供一些新思路，同时更多的关注应用界面与人的互动关系，从而使个性化服务得以更好的传达。
关键词:组件化;应用界面；个性化服务中图分类号:TP 311.52文献标识码:A文章编号：1673-1131(2018)03-0284-03随着大量手机应用软件及关联业务冲击市场，在极大丰 富用户需求的同时，对于应用界面设计提出了新的挑战。
为 了满足庞大的开发需求，同时更好的关联每一个业务线并保 证优质的用户体验，互联网企业开始转向组件化架构。
由于 组件化使得开发人员、用户、应用组件和信息资源能够互相转化，因此应用程序不再是单一而独立的个体，信息开始在不同 的节点间汇聚交流。
近年来许多企业如阿里巴巴、滴滴等都 对其开发设计进行了组件化的运用，原有的架构不再能够满 足业务需求。
例如，在14年阿里就将手机淘宝进行组件化架 构升级,这都反映了组件化设计的重要性。
1组件化设计的概述与发展模式(1)组件化的概述。
组件化设计信奉独立、完整、自由组合——即尽可能把设计与开发中的元素独立化，使它具备完整的局部功能，并通过自由组合来构成整个产品[1]。
虽然组件化将设计迭代业务而言，用户对语音业务的敏感性更高，随着用户的大量增加,网络用户投诉会越来越多目前投诉处理主要面临的困难如下：(1) 信令不完善:无线侧没有用户IM S I 信息，从无线日志中无法获取问题用户的日志信息；(2) 场景描述不清楚:需要向用户详细了解投诉的信息，容 易引发用户的不满，同时，用户反映的情况不一定准确；需要 到达现场进行问题复现，消耗大量的人力物力，即便如此，问题不一定能够完全复现；(3) 处理速度慢:需要对设备告警、无线环境等逐一排查， 处理速度慢；技能要求高:需要分析前后台信令，需要专家做技术支撑。
3.2 V O L T E 端到端分析方法的研究利用信令平台可以迅速的提取用户话单和信令流进行初 步定界，再结合空口 MR /CHR 测量技术，可以实现快速准确定 位。
经过大量的投诉问题分析总结，形成了一套基于SEQ + MR /C H R 联合分析V O LTE 投诉问题的方法。
3_2_1关键技术SEQ 信令平台与无线侧话单通过M M E UE S 1A P ID 、站点名称、和时间进行关联;在SEQ 信令平台和无线侧话单中均 记录了用户话单的M M E U E S 1A P ID 、站点名称、和时间信息, 通过这三个信息可以将SEQ 信令中的用户投诉单据和无线侧 话单关联起来，进行联合问题定界定位。
关联到无线侧话单之后，进行无线侧问题的定界和定位;用 户无线侧话单中，记录了呼叫过程中的详细空口信息，包括异常发生时的空口的RSRP \RSRQ \ULSINR \BLER 和最后30条L 3信落实到每个人，但各组件之间其实又有一定联系=因此，它 的视觉上能够相互延伸与影响，并做到各业务之间即有区 分又相互关联，同时打通了职能壁垒，对于公司来说则更为 系统。
(2)组件化设计的发展模式。
在组件化的发展模式中，最初强调整合统一，所有业务按 照标准输出，这样也方便业务用现有组件立刻完成目标。
其 缺点为效率低下、感知混乱、成本浪费等。
在之后的发展中各 业务形态趋于稳定，改为以业务发展为先，转变势能，建立影 响力。
通过将“业务前台、设计中台、开发后台”整合为一个完 整闭环,做到真正以用户需求推动产品开发，从而实现更为个 性化的视觉界面。
例如滴滴组件化构架——它们将视觉界面拆分，通过轻量化的模式，与不同业务板块做配适。
同时，对 “首页、搜索、交易、消息、收藏”等单位元素进行分类标注，统 一调整优化，从而做到优质的用户体验。
（图1)令消息，基于这些消息行投诉用户的无线侧问题详细根因定位。
3.2.2操作流程在SEQ 信令平台上获取投诉用户的信令流程之后，查询投诉用户的M M E UE S 1A P ID 、异常发生的站点信息、以及大 概投诉时间范围；采集到对应站点的配置、内部用户呼叫日志、M R 数据； 使用工具直接浏览空口的RSRP \RSRQ \ULSINR \BLER 和最后30条L 3信令消息,分析异常信令，以及与覆盖无线小区的关系; 基于工具算法，直接给出详细根因定位；使用小区级分析功能，分析全网小区级专题，判断是否为 小区共性问题。
4总结与建议V O LT E 相对于2G 语音透视明显，未来必将取代2G 语音，成为语音业务的主流承载方式。
但V O LTE 投诉处理需要 更多的平台支撑，投诉处理人员需要深厚的通信技术能力，在未来V O LT E 的发展中不断发现问题，解决问题，降低用户的 投诉量，提升用户感知。
参考文献：[1] 刘建华，陈俊，刘磊.v o l t e 无线关键技术研究m .移动通信,2014,40(4):36-42.[2]陈宇，王月珍.电信级Q oS 保障下V o l t e 的优势分析[J ].移动通信,2014,(5):46-51.[3] 党宾.研究V O LTE 业务性能及优化措施[J ].通讯世界,2016,(1)：13-14,284信息通信图1滴滴地图查看界面的组件化设计(G TM C大会石浩言.滴滴出行的组件化思维)再进一步，由于业务拓展，应用内部结构复杂庞大，企业 必须对各组件进行轻量化提升整合。
支付宝就提供了新的可 调整模式，解决了业务与用户关联度分离的问题。
它将应用 内部因业务不同而分离的模块，通过类似手机桌面整理的方 式，将选择权交还给用户，满足用户自身需求。
当然，这样的 调整必须建立在可控范围内，需要有选择的搭建规范。
由于用户需求多种多样，单纯通过一个或多个组件化架 构来解决问题是徒劳的，最终呈现给用户的应用界面需要提 供大量基础模块。
人工智能技术提供了实现可能性：通过人 工数据标注，对界面设计的源文件图层做分类，对色彩造型结 构做标注，提炼出设计手法和风格，且通过深度序列学习的算 法模型，用数据告诉机器这些元素为什么可以放在一起，最终 通过人工控制图像质量及后续上线气这样在现有组件化结构 中加入人工智能的辅助，便可以减轻庞大基础工作的复杂性。
2组件化在应用界面中的设计原则(1) 组件版式严谨。
为了能够方便用户在众多业务中更迅速找到目标，操作 更舒适，组件化必须信息层次清晰、风格统一。
在搭建一个组 件化架构的时候，需要运用格式塔原理（如接近性原理、连续 性原理)，充分考量每个组件在页面的关系，从而进行合理的 分组。
作为一个反例:“在内容上，虾米音乐A PP独占优势，但 是在各种模块的堆积下，用户很难找到相适应的功能,甚至某 些需求被淹没在众多推荐当中。
这就说明软件的功能模块并 没有按照用户需求,调适到最符合用户个体的视觉位置，从而 产生了混乱感。
”(2) 保持操作惯性、培养用户习惯。
企业各类业务的产品形式有所不同，在设计上会有相应 变化。
为了降低用户识别难度，组件化设计必须保持用户操 作惯性，重要操作和获取信息的位置需要聚焦在固定的点。
比如在微博的发现和主界面上，各组件样式是统一的交互方式, 在整个产品中视觉的中心点没有发生偏移，并只有一种存在 形式，这就是组件的操作惯性。
如果出现好几个不同的选择 形式，或者所处位置不断变化，不在视觉焦点处，这样的设计 是绝对不能上线的。
同时，为了做到每一款软件对于用户来 说更为友好，切合实际需求，组件化设计需在拆分服务流程后，有针对性的进行修改调整。
根据消费者偏好——用户模型、行程中评价内容、产品需求等，进行个性化投放，培养用户习 惯。
(3) 降低设计劳损。
以企业为主导的业务上新,是建立在“需求调查——整理 分析上线提供”的基础上，但这会导致边际成本不断累积，使设计与需求的调适产生劳损。
组件化设计的新业务框架是“独立的用户需求——匹配相关业务内容一对应惯性组件”，这样就只需在原有框架上统一转换，并且智能匹配到各个用 户。
阿里的鲁班系统在基于模块化的多协作体系下，将大型 项目进行分解，在固定模块里进行自动化处理。
比如针对banner模块的设计，通过图像切割算法，自动处理海量的商品抠 图，大大减少了设计的耗时。
同时将无法自动完成的模块通 过合理的人员项目配比,形成高效的设计成长体系。
3组件化在界面设计中的应用与表现(1)组件化设计应具有良好的适应性与独特性。
对于提升应用界面的体验而言，组件化可以快速响应业 务需求,规范交互方式，规模化的提升视觉效果。
同时组件化 需要适应各种极端情况、不同机型尺寸和附带的交互效果，要 与整体界面形成良好的交互组合模式。
成功的组件化不仅要 考虑好界面布局，还要为接下来的开发做好铺垫，以便开发部 门能够有框架的去搭建开发组件。
不同的A P P和业务会有不同的组件化架构，其中阿里的 组件化设计思维是基于复用为目的，使其具备独立的完整解 决方案，通过标准的规范组合方式来构建整个设计方案，从而 提升设计效能[3]。
不同的是，滴滴的组件化思维是搭建有序的 交互框架，交错对比业务内容来提升体验，探索出深层的视觉 表现。
因此，组件化设计在不同的企业中需要根据业务需求 进行调整框架，多种业务组合时要考虑到相互的联系与独特 性，使受众用较少的时间成本完成对A P P的使用。
微信作为 社交产品的核心是熟人聊天，企业为了支撑并强化这一主要 特色，针对聊天组件打造了轻量化的交互体验。
类似于扫一 扫、搜索、设置、个人资料这样的功能，则建立一个个公共的小 组件，便于交叉使用和搭建流畅的视觉架构。
____________胡超:组件化在应用界面设计中的优势和表现JM...^W•000•+图2微信公共小组件基础样式库(2)组件化设计的智能转化。
“优秀的语言(比如Go)、方便的工具服务(比如GitHub)，帮助我们成为更好的程序员。
接下来，人工智能会进一步提 高开发效率，解放我们的生产力”[4]。
随着智能化和数据化时 代的到来，组件化设计趋于智能,首先是设计的庞大重复劳动 将被人工智能逐步取代，比如各类购物banner的设计等。
其 次对于设计的最终效果，可以通过服务数据的及时反馈进行 调整，快速有效的回应需求。
谷歌M aterialD esignU I是CSS? 框架和一组实现设计规范的?React?组件，它首先打散流程，再 利用了分层系统,将空间、尺度、色彩、图像、排版等组件组成 多层次架构，并且进行合理的留白和层次排版(图3)。