页面设计四元素之图文框线V1.0
最近突然有一个意识，一个页面或者一个弹框中的元素呈现，归结到底，就是由图、文、框、线这四类元素组合而成。
本文试图从四元素角度来初步梳理考量在页面设计时的一些原则、经验，为原型设计实操时提供帮助指引。注：下列内容不算成熟完善，后续再逐步迭代。
图
定义
图就是图，跟我们日常理解的图没有太大区别，不过多解释。
页面中因为有图的加入，会更加的直观、生动、美观。有句话是字不如表、表不如图。好的图可以让观者一眼明白所要表达的意图。
分类
页面中的图进一步分类，包括照片、插图、图标三类。
原则
对于产品经理，在原型设计时，对图要求一要知道用在哪儿，也就是用好图，二要选用合适的图，也就是选好图。ps：设计好图是UI工程师的职责。
设计
用好图
对照片
用作背景示意，比如banner图，上面加文字。
用作形象展示，比如商品详情页中的图片。
对插图
用作缺省背景
用作解释背景
对图标
用作logo图标
用作功能图标
选好图
图的选用是要相关，不要用与所要表达的主题、意象无关的图。
图的选用重在选择能表达要传达意象的图；比如信用公示首页的banner图，可能是重在选择具有权威性的图示。
文
定义
文即文字，每个页面肯定是需要文字的，文字是表达准确意思的必要且唯一手段。图展示的意象，而文表达的是具象。
分类
文字按用在的地方可分为标题、正文；按展现行数可分为单行文本、多行文本；按展示具体内容可分为数字、文本。
原则
文字的展现重在必要，准确，精炼。
设计
文字的设计重在颜色、字号、粗细三个方面。
关于颜色：需强调的可用不同颜色表达；不重要的可用灰色表达；色彩不可超过三个。
关于大小：大小整体需协调。按层级，各级标题从上至下，文字不应该下级的文字大小比上级的文字还大。比如二级标题字号大于一级标题的字号，看起来很不舒服。
关于粗细：标题、重点可加粗；大多数正文用常规粗细即可。
框
定义
框在页面原型设计时主要用来通过框来对一组对象进行圈定表达。
分类
目前看没啥好分的。
原则
框的使用要协调，不可喧宾夺主。要以突出内容（一般也就是文字内容）为优先。
设计
框的设计使用重点是边框和填充色。可在之前的文章XX中查看边框的使用示例。
边框:
做到与背景相互区分的目的，如果页面背景是灰色，边框可以是白色。如果页面背景是白色，边框可以是灰色。
边框一般可用小半径圆角好看，或者不要圆角。慎用大半径圆角，看起来丑。
填充色:
同边框一样做到与背景区分的目的，一般都是白色填充，能清晰展现边框内的内容。
线
定义
线在原型设计中，主要是用来分隔、标识用。
分类
实线、虚线
原则
线用作边界分割时，尽量少用。
一般情况下，线不易过多。
设计
用作分割时，颜色尽量淡。易用灰色，一般不用纯黑色。
在表格里，线的使用可以颜色丰富一些，以展示重要信息。
其他
关于表，属于文、框、线的组合。
附图：
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
