浅谈web app的优势和设计的几个重点

2017-04-14陕西理工大学机械工程院周宗昊丁介然

电子世界 2017年21期

关键词：下拉菜单用户界面理工大学

陕西理工大学机械工程院周宗昊丁介然

陕西理工大学数学与计算机科学学院院胡昊郭家成

浅谈web app的优势和设计的几个重点

陕西理工大学机械工程院周宗昊丁介然

陕西理工大学数学与计算机科学学院院胡昊郭家成

据App Annie发布的报告显示,2016年全球手机应用下载量接近490亿次.中国作为全球最大的应用市场,手机应用收入高达768亿人民币,占全球应用总收入的1/3.Web app的发展速度可谓惊人,由于其跨平台、无更新等优势,让Web app在近几年的总体app设计中,爆发出十分强力的势头,甚至有人预测在未来,Web app的产量会超过其他任何种类的app产量.本文首先针对Web app,通过分析、比较其和其它类型的app的特点,最终列出Web app相比较现有其它类型app的优势和特色;最后本文借鉴几个设计大师的设计理论和一些成功的作品,列出了几个Web app设计时需要重点关注的重点问题和针对此问题的解决方案.

Web app;app;发展趋势;重点问题

1 Web app的优势

现如今,电脑平台上的用户所投入的时间越来越少,观察身边的人们可以很明显看出,人们下班回家几乎不怎么开电脑,手机、平板电脑和电视可以包办人们回家的所有娱乐时间.由此可见,webapp的开发前景相比网页开发乐观很多.

相比较native app和hybird app,Web app作为一种为移动平台而优化的网页[1],由于在表现形式上于原生态应用一致,故相比原生态应用,Web app拥有很大的优势,这包括:

①由于没有移动端app作为载体,所以根本不用通过安装后才能使用,故避免了

频繁更新所带来的麻烦;

②开发成本,Web app可以用非常简单的方式做出相当专业的应用;

③Web app具有很强的跨平台兼容性,这是因为其所寄生的浏览器是唯一在手机

安装运行的工作环境,和其他任何私有环境无关.

2 web app的设计

2.1 Web app设计原则

HTML5的技术处于尚不完善阶段,仅仅处在刚开始被行业所认可阶段,Web app作为HTML5的核心产物,自然也处在不断的进步和探索中.此外,由于Web app对浏览器依赖性太强,Web app的所有功能的实现需要具有良好兼容性的浏览器,所以Web app的设计,要符合现如今浏览器的实际情况去进行.浏览器的更新换代又具有着一定的不明确性和不可预测性,所以说在目前这个大环境里,Web app难以找到一个明确的、合理的设计原则.

因此在具体设计时,只能结合一些权威级大师的作品,例如建筑设计大师盖里、埃森曼、特斯楚米等大师的经典作品,或者从已经上线的优秀产品中寻找借鉴的地方[2].

2.2 Web app设计的几个重点

由于Web app是依托浏览器进行设计,也就是说Web app是一种特殊的网页,关键还是网页的设计,不过与传统的网页相比,Web app侧重点不一样,更加注重功能和实用性.Web app在设计时,需要注意以下几个重点:

(1)对窗口的修饰

对于弹出式菜单窗口的修饰必不可少,例如对弹出窗口阴影的设定,弹出窗口阴影,不仅仅视觉上看起来十分美观,此外,阴影还能屏蔽背景,将弹出窗口和背景区分开,这样便有了立体效果,给人一种"悬浮"的感觉,拉近了与人互交的距离.

设计窗口阴影时,往往需要制作透明的PNG格式的阴影作为背景图片,阴影区域透明度为70%-85%之间效果最佳,再将此背景图片对应到指定位置中[3].除此以外,也可以通过JavaScript、Lightboxes等软件中的Drop Shadows命令实现.

(2)灵活的用户界面

用户界面应按照需求进行设计,并不是将繁杂而大量的内容都展示出来,往往越简洁的界面更受用户的欢迎和青睐.为了设计出既简洁又不乏内容的用户界面,就必须需要一个灵活的、随需求可变化的模块化的界面设计.

以一个有下拉菜单的搜索模块为例,有了下拉菜单可以帮助用户更加具体的搜索到用户想要的内容,因为下拉菜单的存在也使得搜索块显得简单又实用;还比如将高级菜单适时的隐藏起来,也是一种简洁用户界面的途径,隐藏时需搞清楚用户常使用的功能有哪些,针对这一块还能做到用户div界面设定,可以将简洁与针对不同用户实用的界面设定做到极致.

(3)对Button状态的积极反馈

对于拥有自定义式按钮的Web app,若将链接做成Button样式,便拥有了Button的表现行驶,例如,点击Button时,拥有了"点击"的形态.这样又能显得十分美观,而且还能给用户传递一个操作十分灵敏、自如的信号,更加方便于用户的体验和操作.

(4)对关键性内容的把握

在Web app设计中,如果把握相对重要的几个关键元素,那整个Web app的设计也不会差.

例如在创建一个新的内容或条目时,弹出是否创建菜单,会有"是"和"否"两个button,很明显,这里的"是"button从使用频率来看更加重要些,虽然这两个button出现在相同的位置(并排而放置),但是若给予同样的重视程度反而会让用户不适应.我们可以使"是"的button效果和"否"的区分,让"是"的button更加突出一些,这样更能吸引用户的眼光.

(5)多媒体的嵌套

虽然Web app重在功能的呈现,但多媒体一向受客户们的青睐,如图片、Flsh、视频更容易吸引客户的眼球,如果条件允许,可以嵌入更多的多媒体元素.

例如Web app在介绍一款功能的使用时,若纯粹的文本书写,用户可能会产生不耐烦或难理解的抵触情绪.若嵌入一段视频教程,用户便可以很直观的进行学习.

(6)上下文情景

站在用户的角度出发,考虑用户想要看到什么、听到什么内容是十分必要的.这便需要结合上下文情景导航的设定.结合上下文导航,最成功的莫过于office 07,在office 07的word中可以看到[4],默认工具栏的集合变成了带状控制的形式,其中每一项tab控制这一项相关功能,而每一项都可以让用户自行按其所需设定.