视觉传达设计视角下手机端Web App的研究与实现

来源 :电脑知识与技术 | 被引量 : 0次 | 上传用户:fei5301821
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘要:手机端Web App是在智能手机上显示的联网软件,手机端Web App方便人们使用智能移动设备获取更多的信息和资讯,突破时间与空间的限制,给生活带来更大的便利。在视觉传达设计视角下,针对手机端Web App中字体、版面、颜色、动画等元素进行布局,向受众传达版面内涵,提升受众浏览兴趣。将PC端Web运用到手机端Web App中研究,使移动终端上正常浏览PC端的网页资源,实现PC端Web应用到手机端Web App的转换。方便用户使用手机访问互联网Web网页快速准确的捕捉到有用信息,弥补响应式技术面临多终端调用CSS样式出错,导致页面访问不协调的问题。
  关键词: PC端Web;手机端 Web App;转换
  中图分类号:TP311      文献标识码:A
  文章编号:1009-3044(2021)30-0092-03
  开放科学(资源服务)标识码(OSID):
  A Study and Realization of Mobile Phone End Web App Based on Visual Communication Design
  LI Wan-ru, YU Yang-kui
  (The Open University of Guangdong,Zhanjiang 524003, China)
  Abstract:The mobile phone Web App is the networking software displayed on the smartphone. The mobile phone Web App which is convenient for people to use smart mobile devices to obtain more information and information, can break through the limitation of time and space, and bring greater convenience to life. From the perspective of visual communication design, the layout of font, layout, color and animation in the Web App of mobile phone is carried out to convey the connotation of layout to the audience and enhance the audience's interest in browsing. The PC end Web is applied to the mobile phone end Web App to make the mobile terminal browse the web resources of the PC end normally, and realize the application of the PC end to the mobile phone end Web App conversion. It is easy to  facilitate users to use mobile phones to access the Internet Web web pages quickly and accurately capture useful information, to make up for the response technology faced with multi-terminal calls CSS style errors, resulting in page access problems.
  Key words:PC end Web; mobile Web App; conversion
  科技發展日新月异,国家为了适应时代发展的要求,不断地提升软硬件实力,借助网络技术和信息技术的优势,开发新的智能产品,满足不同用户在不同场合的需求。无论是国内还是国外,人们对手机端Web App的接受度在不断增加,支付宝、微信钱包、手机QQ钱包、视频软件和阅读软件等在人们的生活中得到了广泛的应用,手机端Web App改变了人们的生活方式和生活空间,对各行各业都产生了深远的影响。为了更好地实现手机端Web App的使用性能,吸引受众的注意力,通过视觉来向人们传达手机端Web App的各种信息,视觉传达设计应该紧跟科技发展的步伐,体现设计者别出心裁的内涵,通过视觉传达设计来展现手机端Web App的设计版面,设计者根据现有的Web网页资源特点,实现网页转码,使传统PC浏览网页在移动终端中更好地显示出来。
  1 PC端Web、手机端Web App之间的区别
  手机端Web App与PC端Web的区别在于:手机端Web App是在手机上使用的,PC端Web是在电脑上使用。
  移动互联网可以随时随地的为人们提供信息服务,PC端也称电脑端,人们使用电脑联网获取信息,通过Web同步数据。手机端Web App是人们使用移动设备上网浏览信息,在功能上两者没有什么不同,不过手机端Web App使用较为便捷。手机端的操作方式多为滑动,PS端则是点击。手机端Web App在使用时可能会因流量产生费用问题,而且对页面内容也有要求,手机端Web App的页面内容应该尽可能精简。手机端Web App受到浏览器性能资源的限制,最好不使用复杂的渲染动画,PC端Web这个问题不明显。PC端和手机端在界面布局上存在差异,PC端的屏幕较为宽大,布局更加灵活,手机端屏幕比较窄小,通常是单列,最多是双列+响应式。手机端Web App很接近手机端原生的App行为模式和外观,手机端开发的供给是专用的,不用于PC端;同样的,PC端的一些工具在手机端中也不好用[1]。   随着手机网民的数量不断增多,移动设备打开了移动互联网的市场,手机营销是未来必然的趋势,App作为手机营销的主要工具,有两个发展的方向:一是原生App,二是手机端Web App。原生App可以直接安装到移动设备中,原生App具有一定的针对性,是专门针对某一类移动设备产生的,原生App的每种平台都需要使用独立的开发语言,如Java(Android)[2],移动操作系统中要有独立的开发项目,然后使用各自的软件开发包;手机端Web App通常是利用设备上的浏览器来运行的,不需要下载安装,只需要开发一个项目就可以,这种应用使用HTML5、CSS3、Java Script和服务器端语言完成,可以任意地选择一些跨平台的开发工具。原生App可以实现移动硬件设备的底层功能,例如摄像头、个人信息和重力加速度等等;手机端Web App只能使用有限的移动硬件设备功能。
  2 手机端Web App性能的影响因素
  手机端Web App被用户点击触发后展现在用户眼前的是一个可交互的状态,通过DNS域名解析将URL转换为IP地址,再将IP地址连接到Web服务器上,在浏览器与服务器之间建立TCP连接,连接成功后浏览器向Web服务器发送HTTP请求,获取各种资源,如图片、CSS、JavaScript文件、HTML文档等内容。手机端Web App的响应时间主要取决于页面的渲染时间和资源的加载时间。页面的渲染速度与设备硬件性能有关,不过,在相同的硬件设备使用中,CSS的使用规范性也会影响到渲染的速度。各种资源的加载时间受到打开页面和窗口数量的影响,通常手机端Web App最多只能同时发起4个网络请求,超出的请求太多会增加页面的加载时间,所以在使用中需要控制手机端Web App的网络请求数[3]。HTML5技术的快速发展与移动设备的大幅普及,促进了手机端Web App的发展。手机端Web App的稳定性随着手机性能的优化得到了不断提升,HTML5技术为手机端Web App的开发与应用提供了源源不断的动力,设备的性能越好,手机端Web App的用户体验度就越高。手机端Web App 将成为改变移动互联网生态格局的关键。
  3手机端Web App开发的核心要点
  3.1语义化与结构化
  手机端Web App的页面生成最初以切图为导向,然后转变成以语义化导向,页面的结构与层次变得更加的清晰。结构化的页面有利于手机端Web App多浏览器兼容和多分辨率适配。手机的屏幕实际显示像素比电脑屏幕小,有些内容无法在一个屏幕中显示出来,结构化的页面可以使DOM显示与隐藏交互,便于管理。手机端Web App可以适配不同的分辨率,分辨率的变化可能会导致页面DOM显示/隐藏的交互。语义化、结构化的页面是手机端Web App最好的选择[4]。
  3.2 移动设备的特性
  移动设备的特性通常分为影响视觉的、影响触觉的,HTML5技术和CSS3技术可以实现响应式网页。影响视觉主要包括屏幕分辨率和设备像素比,视觉设计会影响手机端Web App的设计稿和移动设备产出的图片;影响触觉有触摸屏(用手指操作)、传感器(陀螺仪、GPS等)、软键盘等几部分组成,触觉部分对人机交互的输入接口有影响,Touch手势、滑动、语音识别、GPS、方位感应等属于输入,对应的HTML5、CSS3技术实现可以查阅W3C的相关文档。
  3.3浏览器(WebView)兼容
  移动浏览器兼容中的BUG有很多是浏览器运行中产生的问题,无法用理论解释清楚,可以使用改进技术实现,但是没有完美的技术解决方案,除非更改需求交互。在开发和设计产品的时候,将这些技术性的问题考虑到位,防止在测试阶段出现问题重新改进,会增加开发成本。
  3.4手机端调试
  手机端Web App的开发有95%的调试都是在 Chrome DevTools 移动设备模拟器下进行的,剩余的5%则使用特殊调试技巧。
  3.5关于测试
  开发调试与测试不同,测试是由专门的QA部门操作的,测试的方法主要是手工,测试需要在限定的运行环境下进行,QA部门对移动设备的机型、系统、浏览器(WebView)进行测试。如果运行的手机端Web App只在微信、QQ、微博等社交App中运行,就可以只测试微信、QQ、微博WebView。如果不限制运行环境,可能会因测试压力太大,出现一些系统BUG。
  4 PC端Web应用到手机端WebApp 转换的实现
  4.1网页转换
  随着互联网的快速普及,为移动通信终端打开了市场。移动互联网结合了互联网的可扩展性和移动通信的便利性,成了通信业和互联网业融合发展的交叉领域。移动终端设备具有便携性和即时性的特点,但是移动终端设备的型号不同,屏幕分辨率的大小也不等,适配开发的成本较大,而且移动终端设备的CPU处理性能低,内存小,有些传统的PC网页不能在移动终端上正常显示,还需要进行二次开发,增加了网页的建设和维护成本[5]。针对这一问题,相关人员研究出了两个网站改进方案,一是利用响应式Web设计模式开发新的手机客户端网页,在开发的时候将手机型号、屏幕尺寸考虑在内,让内容的宽度随着手机端自动调整;二是根据PC端网站的页面,手动调整手机端显示的页面,在调整过程中考虑到手机尺寸、浏览器兼容等问题,将PC端Web 的网页转换成手机端Web App网页。将PC端Web 的网页转换成手机端Web App网页的方法是在原网址的内容、保持原有界面外观的前提下对其进行开发和设计,这种方式极大地降低了开发成本和维护成本,省时省力。
  将PC端Web 的网页转换成手机端Web App网页需要完成以下步骤:1)分析网页的结构,设计人员通过Web应用对传统的PC网页进行配置,将配置信息存入数据库中。在这一步骤内,可以借助第三方工具分析传统PC网页的DOM结构,将网页汇总的内容划分到手机端展示的模块中,使每一模块的内容都适用于Web应用中的任一模板。2)天河适配 Java Script引擎,天河适配 Java Script引擎中的文件会被浏览器加载,能够根据相关的数据实现特定的功能[6]。天河适配 Java Script引擎的部署方式可以是静态部署、动态部署和代理部署中的任意一种。使用静态部署方式可以根據数据库中第一个步骤得到了配置信息,将JavaScript文件引入到原网页中,当手机用户端访问PC网页时,JavaScript文件里的天河适配引擎会根据用户访问的URL、原网页的内容和移动设备的参数将传统PC网页适配成移动版网页。3)页面适配,使用天河适配 Java Script引擎根据数据库中的配置信息、访问页面的URL、原网页的内容和移动设备的参数,将传统PC网页适配成手机端网页。自动调整标签之间的距离和标签的大小,重新设定页面内容的显示位置。   4.2 响应式Web设计
  PC端Web应用到手机端Web App中,需要实现页面内容的自适应和浏览器的兼容性,基于响应式Web设计的模式能够自动切换分辨率、改变图片的尺寸,满足联网设备多样性的特点[7]。为了能够随时随地获取信息人们选择使用手机、平板等移动设备进行联网。在移动设备多元化的背景下,需要在不同设备上呈现给用户同样的Web网页。响应式Web设计是一种全新的Web设计思想,它能够自动适应用户的终端设备,让网页根据用户的浏览需求和设备环境作出相应的响应和调整。实现PC端Web向手机端Web App的转换,使一次编写的网页在不同分辨率的终端下友好显示。响应式Web设计能够在根本上解决网页在不同屏幕大小的移动设备的显示问题。
  5 PC端Web应用转换到手机端Web App的优势
  5.1个性化
  受众可以通过响应式技术对版面进行调整,选择自己喜欢的版面风格,调整自己喜闻乐见感兴趣的栏目进行关注。移动终端浏览普通web页面,只能被动接受同样的资源信息,从而凸显出转换后的手机端Web App的个性化特征。
  5.2交互性
  手機端Web App封装后,与PC端Web应用共享同一个信息数据库,在反馈信息交互方面提供了一个更加便捷的渠道。受众在一定程度上摆脱了对PC端的依赖,可以随时随地作为信息的发布者和传递者,由此可见,转换后的手机端Web App有更强的交互性。
  5.3多样性
  PC端Web应用转换到手机端Web App后,能提供更多信息,选择性更强。音频、视频、文字、图片都可以作为转换后的手机Web App的信息载体,甚至可以将所有元素集合在一起,形成图文并茂的信息进行传递,体现了多样性的特点。
  5.4及时性
  转换后的手机端Web App打破仅依赖PC端在时间和空间等方面的局限性,受众可以利用Web App随时随地接收和发布信息。在大数据和云计算的推动下,能更准确、更及时推送信息给需要的客户群体。体现了Web App及时性的特点。
  6 结束语
  视觉传达设计是创新所向,创新是设计的目标,视觉传达设计视角下对手机端Web App的设计是吸引受众的手段,让受众更加方便快捷地浏览到互联网信息。现在的手机分辨率千奇百怪,一次开发,多种适应的响应式布局已经成为主流。设计者在手机端Web App中运用响应式Web设计模式,提高手机端的应用性能,保证页面具有适配性,页面内容能够兼容。手机端的电量和内存的资源有限,在手机端业务需求越来越复杂的情况下,优化手机端Web App的性能有着很大的意义。将PC端Web应用到手机端Web App转换,用户可以直接通过安装在手机端的Web App进行访问,满足用户的浏览需求。
  参考文献:
  [1] 李玥.PC端Web应用到手机端Web App转换的研究与实现[D].北京:北京邮电大学,2015.
  [2] 沙季湲.基于IBM Domino的移动入口系统的设计与实现[D].成都:电子科技大学,2014.
  [3] 刘向明.基于Internet的嵌入式远程监控网络技术的研究与实现[D].上海:东华大学,2012.
  [4] 刘兵.利用Web Service实现嵌入式设备与PC端的无线通信[J].单片机与嵌入式系统应用,2016,16(3):30-33.
  [5] 北京天河石科技有限责任公司.一种PC端WEB网页转换为移动端WEB网页的方法:CN201510399492.0[P].2015-12-09.
  [6] 朱珍元,王鹤琴,郭标.基于HTML5和SSM的移动Web App开发[J].电脑知识与技术,2017,13(21):73-75.
  [7] 郑舟,周芸韬.移动WebApp与原生App的深入比较[C]//2013’全国报社新闻技术工作会议暨中国报业技术年会论文集,云南师范大学,2013:53-56.
  【通联编辑:唐一东】
其他文献
摘要:伴随着大数据时代的到来,物联网和人工智能的快速发展,全国多个地区的党校积极进行智慧校园建设,加快推进智慧党校信息化进程。智慧党校是党校信息化建设的高级阶段,可以推动干部教育培训和大数据的融合发展,实现干部教育的现代化。文章浅述了大数据环境下智慧党校信息化建设的意义,分析了当前我国智慧党校信息化建设的现状及存在的问题,并根据我国智慧党校的整体框架及党校实际办学情况,提出智慧党校信息化建设的对策
摘要:随着互联网+教育的不断发展,我校“计算机网络原理”课程借助中国大学MOOC网实现了线上教学,而课程评估是高校内部质量保障体系的重要组成部分,线上课程评估体系有自己的特点,有必要针对计算机网络原理慕课进行评估系统研究,将OBE的先进理念贯穿其中,为课程改进提供重要的方向和目标,以适应新形势下我校培养应用型人才的办学理念。  关键词:成果导向教育;计算机网络;慕课;评估体系  中图分类号:G64
摘要:计算机网络安全技术的不断发展,为社会大众生活和工作带来诸多便利,使大众足不出户便可接收所需资讯信息,当前我国已经初步实现了共享化、网络化与信息化发展。大数据时代的来临,使得计算机网络安全及防范的研究更具理论意义和实践意义。对此,本文首先对大数据与计算机网络安全进行论述,以此为基础分析了大数据时代计算机网络安全问题,最后提出了大数据时代下计算机网络安全防范策略。  关键词:大数据;计算机网络安
摘要:针对目前关键基因预测不准确和预测算法缺乏等问题,本文提出一种基于控制理论的关键基因预测算法。首先,从TCGA数据库收集结直肠癌数据,使用计算机工具预处理数据,并利用结直肠癌数据和LncMAP数据库数据构建lncRNA-TF-gene调控网络。然后,设计一种新的筛选方法,基于控制理论中的最小驱动节点集思想和可控性动态分类理论,筛选得到关键节点基因集;将突变得分和网络拓扑分析方法得分融合分析,得
摘要:Bellman-ford和Spfa是解决最短路问题的基本算法,是信息学奥赛教学的基本内容。由于算法抽象性和逻辑性强,教学过程中学生对其基本原理、实现过程理解困难,导致无法灵活运用解决问题。该文旨在用具体实例结合图表对算法执行过程进行详细解析,深刻剖析了算法的优化原理,有效解决了学生理解和应用困难的问题。  关键词:Bellman-ford;Spfa;算法解析  中图分类号:TP312 文
摘要:随着互联网技术的迅猛发展,网络安全成为国家安全的战略思考。以计算机网络为载体的开放大学时刻关注并高度重视网络安全成为其内涵发展、高质量发展的必然选择。基于此,开放大学必须正视网络安全的客观现实,积极探寻行之有效的网络安全建设之路。  关键词:开放大学;网络;安全;现状;路径  中图分类号:TP393 文献标识码:A  文章编号:1009-3044(2021)30-0070-02  开放
摘要:智慧校园是高校信息化发展阶段中的一个智慧产物,学校依托光网建设、大数据、人工智能等前沿信息技术,同时不断改善软硬件设施,从而营造一个智能化的教育环境。高校一站式服务平台的建设可将学校科研、教学、行政管理和校园生活等进行智能化融合。该文对智慧校园背景下高校一站式服务平台的建设需求、建设思路、建设价值进行了分析研究。  关键词:智慧校园;一站式服务;个性化  中图分类号:TP311 文献标
摘要:结构化查询语言(SQL)在软件程序开发中处于重要的地位和作用。近年来,信息系统项目的规格越来越大,复杂性越来越高,由数据查询和数据管理上的失误给我们造成的教训也越来越深刻,使我们不得不重视结构化查询语言(SQL)的使用管理问题。特别是在程序开发的生命周期中,提供结构化、有序化的数据使用方法是开发项目管理很重要的基础工作。结构化查询语言(SQL)外置管理是通过技术及行政手段对软件产品中SQL或
摘要:设计采用React框架和Node.js进行前后端分离开发,用Ant Design组件库进行组件化开发,数据库技术使用MySQL,设计开发基于React的在线教学系统,实现课堂讲堂、我的任务、讨论互动等八个主要功能模块,使得教学行为不再受空间物理特性的约束,实现教学手段科学化,发挥学生在学习过程中的主体性以及调动学生的学习积极性和主动性。  关键词:在线教学平台;React;主体性  中图分类
针对盲人的出行需求,设计并开发了一款盲道导航软件,引导盲人在盲道上行走,帮助盲人感知道路,保障盲人安全出行。该文首先介绍了该软件的功能设计和数据组织方式。其次,就系统开发使用的关键技术,即Socket通信技术与基于Dijkstra算法的最短路径规划进行介绍。最后,使用该软件在徐州选定的街区进行实地测试,探究软件的可行性。