![网页配色与实战(艺术设计与实践)](https://wfqqreader-1252317822.image.myqcloud.com/cover/277/27111277/b_27111277.jpg)
2.1 网页界面的小装饰
网页设计中会用到形形色色的小装饰,比如说一个图形、一个花边,就像我们穿衣打扮总喜欢用些首饰来装点一下。虽然这些装饰看起来可有可无,但是如果使用得当,可以更好地衬托出主体页面的个性与独特性。下面简单介绍几个界面中常用的小装饰。
2.1.1 小图标
图标是具有功能的图形,在网页界面中图标分为抽象图标与具象图标(如图2-1~图2-3所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00054.jpg?sign=1739581539-tAMikKIxEL2bqtBCdYEBU0z4x55mhKl1-0-2c7a9e6659141456e39b6e84b43bcf03)
图2-1 简单的手绘图形
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00055.jpg?sign=1739581539-ZL258iJbuAgzk1VvtUuGgZ4WaWbZgR94-0-c0c33e9f8f80e49fb3922ffe9437b5eb)
图2-2 装饰框的使用
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00056.jpg?sign=1739581539-NYh7BRCDlYwysYPyPCFA4O7HhJK6FYts-0-3f5f2a6fe4df555dbca31447846c07b4)
图2-3 具象图标的网页设计
1.抽象图标
这些通常称之为ICO,是图标文件格式。系统包括PC、手机与电脑等系统。这类图标通常是对功能的一种概括表达,表达的形式较为抽象。但还是具有一定的可识别性与可读性,加上现在已经广泛地使用这类图标,所以用户还是可以快速掌握与识别。
2.具象图标
具象图标是指将一些物品的具体模样转化为图形,风格的表现会多样化,但相对于抽象图标来说更容易识别。
3.图标的好处
在界面中图标可以更加快速直接地传达出信息,同时便于用户快速浏览。图标的使用可以简化文字说明,在排版上会更加随意自由,不会因为文字太多而产生压迫感,还可以增强板块节奏感与舒适感,图文搭配的画面会显得更大方简洁(如图2-4和图2-5所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00057.jpg?sign=1739581539-xp1AGUjtpluZ0gR2NwA4ZLSECyU5T8bj-0-5c475f9870e3b4aad7064d1584fb8d27)
图2-4 企业宣传界面
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00058.jpg?sign=1739581539-tDZbmnFgZZp39BUuX9WMtdcWA2v34oum-0-f64d34ad2304d03f953399a495ad375b)
图2-5 酒店宣传网页设计
2.1.2 序号
序号是指顺序的编码,就是我们常见的“1.2.3.4.5.6……”,或者是大写的“一、二、三……”,由于字体和功能的特殊性,无论序号在哪个位置,都可以增强版面的节奏感。加上它具有的独特功能性,在界面设计中不仅仅是文字,也可以当作一个小图标来看待。序号的表现形式也是多种多样的,它的使用不仅可以为整体增添设计感,同时也可以给界面带来趣味性。序号的作用在页面中是不可小觑的(如图2-6和图2-7所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00059.jpg?sign=1739581539-ZLUlwcbBHpiMo0y7HyWSqUXrZYQFDZpJ-0-65ee8b7712834c8915a96238baa25b73)
图2-6 利用序号的创意网页设计
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00060.jpg?sign=1739581539-jI7CmP1wsUChqfPx7ecV4i2o7LVTYQwR-0-fc9ab2e1a0aad73a6c4f42c9f3164326)
图2-7 利用序号与图形的网页设计
1.引导视觉流程
序列号具有引导视觉流程的作用,当我们看到数字“1”自然会联想到数字“2”,在它的牵引下,会下意识地在界面中寻找下一个数字。另外,它的使用在版面中具有一定的灵活性,在不同的环境中,可以理顺文字的先后顺序(如图2-8~图2-11所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00061.jpg?sign=1739581539-SHgq4MJPEPVMyV76ONCzizsEsoV3oe9v-0-288b2a050d8a827bae6e99861ebe3b1f)
图2-8 以数字为主的网页设计
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00062.jpg?sign=1739581539-7jxBgeGzcaSxBNwsJ6nvdxYSf4VQDJw7-0-13241274bb9e076f38ada7951473debf)
图2-9 序号引导视觉流程
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00063.jpg?sign=1739581539-z3faqnqhI2aRJwXOsXmU40uFZHUxFmmo-0-cb11c66da7cebf2ff8d6fa31e8acdd06)
图2-10 序号可以使人快速阅读
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00064.jpg?sign=1739581539-NoJsa34oqAXygQdzAAWXitWVTk6zw1o4-0-1cf7e456627857656088bb26778a501c)
图2-11 序号可以增强界面节奏感
无规律的排版可以为界面增添视觉上的美感,当然保证其功能性是不可或缺的,所以序列号可以为此起到引导视觉阅读和段落标记的作用。在这样顺序不明确的排版上,如果没有序列号的使用,我们在阅读上会很费力。添加上序号便可以很清楚地知道从哪开始、从哪结束。
2.快速阅读
序列号的使用可以帮助人们快速阅读,提高阅读效率。“1.2.3……”如同地图上的坐标一样,能够很轻松地让人们确定内容所在的位置。在阅读中,用户可以在大量文字和信息浏览的过程中稍有停顿,增强用户的记忆力。另外在面对很多文字带来的压抑感时,数字可以减弱阅读信息的恐惧感。序列号能够让读者有条理地选择重点进行阅读。
3.增强界面节奏感
序列号本身就可以起到一种装饰作用,在对它进行美化与放大时,会增强人们的视觉感。序列号可以与正文有明显的大小对比,这样可以为页面增强节奏感。
4.可做装饰图片
我们可以逐个对序列号进行图片处理,根据不同的主题对其进行不同的设计,以不同的设计形式展现给用户,从而为界面带来装饰效果,同时还可以让页面内容变得精致、有条理。
2.1.3 手绘
手绘图形可以为刻板的网页界面带来亲切感,可以拉近用户与界面的距离,让用户觉着更亲近、更信赖。手绘的形式和题材有很多,可以是温馨的、帅气的、酷酷的、可爱的等,都是可以描绘出来的,可以通过界面中的一些文字、人物和图形来表现。
1.文字手绘
手绘的文字会更加生动有趣,给人的感觉很活泼、随意,有亲切感(如图2-12~图2-15所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00065.jpg?sign=1739581539-9ishuBWf7jXCIZkDMzjBjNSn3WH6mjor-0-f07a486b107436931fe870e8bc9807e9)
图2-12 手绘网页界面设计
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00066.jpg?sign=1739581539-mJSZjIclHA00h3EgeIlEIsvNFnmrWYJt-0-97e4485675b044a0057d07c34fe1c4e3)
图2-13 手绘对话框网页界面
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00067.jpg?sign=1739581539-FjGoidSor1KlVxrcSakFyXcNYZb54Tp3-0-b6e881da3d371a3edffc804f7c8400bc)
图2-14 手绘图片为主的网页界面设计
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00068.jpg?sign=1739581539-Uz5I42lzJ1nhnpjePkRq6eHrr0fapdDi-0-54f741bb5a7e9964381fcf4dbaee672d)
图2-15 手绘主题的网页界面
2.人物手绘
人物的表现可以是幽默的、夸张的、可爱的,根据网页界面的需要而定。绘制人物时可以适当地添加一些表情,让人觉得有寓意或故事在里面,增加用户对界面的好奇心。
3.手绘对话框
装饰对话框起到了提示内容的作用,一般页面中有小提示或额外补充内容会用到装饰框。手绘装饰框可以为界面增添几分趣味性,让网页界面的整体画面活跃起来(如图2-16所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00069.jpg?sign=1739581539-GwRPz6HQ3xMo42HbaVtQfiXsOgQHdg6W-0-f5a04c4d9601d0dcb31f5c558977001a)
图2-16 奶茶宣传网页设计
4.内容标识手绘
内容标识可以起到标注作用,对一些需要着重强调的文字进行标注,例如使用圈注、下划线、勾选、箭头及五角星等小涂鸦,可以让网页界面充满小情趣(如图2-17所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00070.jpg?sign=1739581539-nOq66eJseQ0b2Z0w9wxDl5YlhXeY1TQh-0-017cba9bdfa9b03f4d4421bcc50059f1)
图2-17 带有内容小标识的网页设计
2.1.4 小号字体
小号字体的存在是为了点缀界面,与大号字体之间产生节奏感,在界面上具有装饰和修补界面整体美感的作用。在功能上,小字也是文意上的补充,文字可以是英文也可以是中文,可以是一小段话,也可以是一两个词汇(如图2-18~图2-21所示)。
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00071.jpg?sign=1739581539-KMfnXTK91qN0Hvb9RasGQMkeTDdvLeAX-0-65080552c1bb1c3cc685c2a016c2cd18)
图2-18 小号字体的色彩区别
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00072.jpg?sign=1739581539-1gp4ZV0TBq3XKul8YdzeMBEW3wbMff8V-0-b3271dffe2385e7437ded299e447b73e)
图2-19 小号字体与大号字体对比
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00073.jpg?sign=1739581539-QV8HJDwvgQ0ApKLrb6Omq2pxiWJITj08-0-db98202269c08ddb5c4eb05d4e603def)
图2-20 小号字体组合给人的块面感
![](https://epubservercos.yuewen.com/2C9004/15477650405611506/epubprivate/OEBPS/Images/00074.jpg?sign=1739581539-sm2I0dF28TTdC83oHZ5jfjjkx0dxl2KN-0-0e3811cb43965fe772a67224db0e8281)
图2-21 小号字体段落有别
好处:小字与大字的结合使用,粗细不同的笔画让文字在界面排版设计中具有很强的节奏感;填补空缺位置,小字可以在太过空白的位置上进行装点,避免整个页面感觉不工整或者空旷;小字也可以对文字内容进一步进行补充,起到辅助说明的作用。
技巧:小号中文字使用要注意它的识别性,虽然有些小号字体用于装饰效果,但也不要太小,要在用户的可识别范围内。
在使用英文字母时,要注意字母的拼写,如果不能确定文字的准确性,可以将文字缩小到不易识别的程度,只作为装饰来使用。这种装饰适合整篇的英文,装饰效果会增强。