本系列文章旨在总结展现层的元素，分为三部分进行叙述，基本元素、表单、控件。
首先要清楚展现层是什么，按照软件开发的三层架构，展现层是直接暴露给用户，用于数据的输入与输出，换句话说，就是用户界面。
三层架构
那么，展现层是由什么组成的呢？总的而言，展现层可分为输出和输入两部分，其组成元素为：
1、输出页面：文字、图片、音频、动画、视频。
2、输入页面：表单。
以下介绍输出页面元素的概念与关注点。
一、文字
文字是最最基础的元素了，文字占据产品展现层大部分区域，它的重要性不可言喻。因此，对于文字的关注是必不可少。
1、编码
为什么要把编码放在第一位呢，因为在计算机中，数据以01保存，编码则是将这些01数据翻译成文字，因为存在多种编码，所以用错编码会导致中文文字乱码。乱码问题一般是由开发处理的，常用的编码为UTF-8。
2、字体
字体要关注两个点，首先确保使用的字体不侵权，其次字体在保证易辨认的前提下符合产品场景。字体的核心关注人为UI。
2、颜色
如何使用合适的文字颜色呢，一是保证文字可见，例如灰色背景使用黑色字体明显不合适。二是重点凸出，例如重点内容使用更醒目的颜色来显示，必要时可加粗。
3、字号
字号要注意文字自适应，有一个固定分辨率的固定字号，在不同分辨率的屏幕下会等比例绽放。同时应注意不同字号能引起的关注度不同，一般而言，越要展现的内容字号应越大。
4、链接
即文字加上链接，链接要注意内链和外链的区别，链接应加下划线或特殊背景色。
5、标题、下划、加粗、删除线
二、图片
1、尺寸
图片有大有小，大图片使用场景为banner、列表、欢迎引导页、商品主图等。而小图片使用特别广泛，logo、icon、甚至特殊的文字等。
2、自适应
由于目标终端分辨率不统一，因此使用的图片要考虑到自适应的问题，这是前端的责任。
三、动画
动画是什么呢，它是由用户或系统发起，引起展现层内容发生变化的过程。例如点击一个按钮令部分文字跳转，页面切换动画效果等等。关于动画的内容非常多，但总体关注点可为分两部分，页面内动画和页面跳转动画。
1、页面内动画
前几年推出的HTML5给网页带来非常多的酷炫效果，让页面动画更上一个台阶。但其本质是用户操作的衔接过渡效果，能起到提交上一步操作、通知用户准备下一步操作的作用。但并不是动画越多越好，简单的动画红袖添香，繁杂的动画多此一举。所以什么时候应用动画效果是一个关键，若是低频\重要\核心的操作，可适当添加过渡动画，但若是高频操作就尽量不要动画。
2、页面跳转动画
说到页面跳转动画，关于页面跳转使用问题，手机行业有一个经典的例子。在目前全面屏的时代，苹果和安卓的返回操作有非常本质的区别。安卓返回上一页是没有任何动画效果，而苹果有一个非常顺滑从左到右的效果，在效果上面苹果完胜。但在操作方面上，安卓支持左右侧边划动，但苹果由于动画效果的存在，只能从左侧划动，对于右手操作的人非常不方便，可以说，在操作体验上安卓完胜。所以说，页面跳转动画要配合用户操作进行，若无合适的方案，尽量不要加跳转动画。
四、音频
在页面中嵌入音频的操作还是非常少见的，常见于音乐和聊天产品，但某些特殊领域也会有音频存在，例如在线学习、在线礼拜等。音频的使用要注意音频的生产者、下载问题。
1、音频生产者
顾名思义，就是这段音频的提供者，有两种，一种是管理员提供，一个是用户提供。若是管理员提供，约束可放宽，例如允许提供不大于100M的音频文件。若是用户提供，要考虑音频大小，一般不大于10M，同时对格式要有严格的限制，必要时上传时要转码。
2、下载
产品有时会提供音频下载，但很多场景会对下载进行约束，不允许进行下载操作，例如微信浏览器、苹果safari浏览器。安卓可引导用户在浏览器中打开下载，苹果若有APP可引导用户下载APP，若没有则下载功能可屏蔽掉。
五、视频
视频元素有两种，长视频的短视频，其中长视频常见于各种视频产品，例如爱奇艺、腾讯视频、网易云课堂等，但短视频应用场景主要应用于，产品介绍、操作说明等一些较特殊的领域。它和音频一样，都属于常规产品低频内容。此处就不作分析。
网友评论