书名：《形式感-网页视觉设计创意拓展与快速表现》
作者：晋小彦
出版社：清华大学出版社
一、抄现实
抄现实是我们在设计中最直接也是常用的一种方法,它顾名思义就是抄袭现实中存在的事物。因为其结果直接与主题相关联,所以抄现实的方法可以让视觉显得更整体,主题更突出。它将抽像的主题通过实体表达出来,并以之做为内容信息的载体,从而在第一视觉上直观地体现了核心内容并突出主题。
说说，就是抄袭现实中的物体，通过现实生活中具象的物体，提炼出直观直接的元素作为创作基调，或者激发灵感的起点。
想想，抄现实的三步骤：减法、分块、加法。
减法就是参考素材的高度提炼，使用户既能辨别抄袭物体又能有自由的空间从事设计（提炼特征、审查删除重复描述）；
分块就是内容与板块的结合和排版（对信息进行消化，吃透信息，分层主次）
加法就是完善信息内容，使画面达到一种最优表达。（具体内容填充，气氛和视觉补充，特征还原和细节补充）
做做，实际操作中要为主题选择合适的“抄现实”目标，进行特征提炼，把握内容排版与抄袭目标的关系，并会注意细节搭配，让整体更加生动。
1、需求分析
a、主题——b、排版预想——c、现有素材——d、总结平衡
2、设计分解
a、减法——b、分块——c、加法。
3、页面展示
二、圆、方、三角
儿时玩的七巧板，我们曾利用它简单地拼出想象中的各种动物花鸟，更有天马行空的奇异组合。最基础的几何形体也是网页造型结构元素的归纳，再丰富的万物也可以用几何形体去组成。现在我们利于这些基础几何图案进行网页的框架打造。
说说，圆、方、三角作为自然界最基础的三种形状，它们分别由直线、折线、弧线组成。
我们要先熟悉它们的特质：
圆，外形光滑圆润饱满，可爱灵动、亲和力。
方，横平竖直，规规矩矩，整洁好处理，庄重、严肃、情感内敛的主题，但有时也会呆板生硬。
三角，稳定性强、强烈的情感刺激和反差，倾斜的角度会给人带来速度感。运动的、时尚的、尖锐的、速度感、暴力、刺激等主题中。
圆、方、三角设计方法的优点
1、打破习惯性思路
2、理性把握主线情感
3、变幻灵活
想想，设计是一个 理性+运气+联想 的过程。
做做，圆、方、三角的思路是一个从无到有的尝试过程，在虚无的尝试过程中，我们唯一可以把握的是它们的形态情感，让这种形态情感牵引这我们，首先主形的选择很重要，其次三种形态的配合，第三是形态的主题联想与造型实现。在这个过程中我们必须兼顾信息的体量和形式，使其达到平衡美。
1、需求分析
a、主题——b、关键词联想——c、圆、方、三角的主形选择——d、排版预想
2、设计分解
a、感性三步：迷茫和坚持——渐入佳境——情投意合
b、理性三步：打大框架——为内容进行布局调整——摆文字和图片
3、页面展示
设计是一个理性+运气+联想的过程，感性三步、理性三步。太多感性则可能会使受众面狭窄或者偏离主题；太过理性则显得呆板俗套。圆、方、三角不仅需要三个元素的形态主次结合，也需要感性和理性的双向互动配合。
三、断臂之美
因为残缺，它有了与众不同的故事和特点，它的主题性和目标性比起完美的东西显得更加强烈，有时候，我甚至相信：只有残缺的东西才是美丽的。
想想， 去掉局部、选取局部、替换局部。因为残缺，他有了与众不同的故事和特点，他的主题性和目标性比起完美的东西显得更强烈。人们会相信残缺的东西才是最美的。
去掉局部：去掉局部是在原先完整的整体上,为了更好地突出、说明事物的特征和主题而删去了其中某一部分,它为主题的表现排除了视觉干扰,使中心更加明确。去掉局部和选取局部在某些情况下是相对而言的,但两者都可以做为一种独立的思路而存在。
选取局部：选取局部通常因为选取的这个部分是特征的集中表现,它的独立存在能代表并放大整体的中心思想使主题更加明确情感更加集中,起到以少见多、以小见大的功效。
替换局部：替换局部是使用更能表现主题的事物来替代特定的局部,从而使主题突岀。局部的替换一方面可以打破观者的习惯性视觉,另一方面替换事物的独立风格与原有整体结合后,特征更加明显,引发更多的延伸思考。去掉局部、选取局部、替换局部都是通过不同途径和手法来放大特征的方法,为人们排除干扰、选择重点或替换来强化表现。电影镜头和海报中也时常用到这样的断臂局部描写,当我们习惯了处在某种环境之下,因为它的习惯性使我们的行为不会经过大脑的思考只凭借潜意识进行,但如果我们换了一个视角,变换了处境,我们的思维又会再一次活跃起来,这也是断臂手术的功效之所在。
四、欲擒故纵
需求人和设计人之间的矛盾是设计的永恒话题,如果处理不好通常会把双方推向无休止的互钻牛角尖的争论,在许多需求方的眼中通常没有最重点,只有更重点。不过近两年中国的设计环境似乎稍有改善。
设计过程中,我们的周围经常会充斥着这样的声音这个部分再放大一些,这个颜色再明亮一些,我们需要更炫的效果…通常在这样的声音充斥下我们很容易简单地使用加法,进行放大加粗提亮,导致整个画面充满了重点,充满了重点也就意味着再次失去重点。
说说，面对需求的逆向思维设计方法
它是对设计需求的逆向理解思维,特别是针对变换和修改过程中的需求，它通过反向的思维打破和弥补习惯性的思路,井通过这一思路创造出不同一般的页面布局。
需求人和设计人之间的矛盾是设计的永恒话题，需求人与设计人之间的修改比拼,不仅是智商的比拼,还是情商的比拼,如果处理不好通常会把双方推向无休止的互钻牛角尖的争论。欲擒故纵不论在沟通还是设计修改中都是一个可以选择的办法。
网页设计中的“擒”与“纵”，突出与减弱我们应该如何应对。
想想、突出也可以通过减弱来获得。突出,我们该如何应对,习惯性的加强法可能使排版越来越拥挤,本章推荐的是适当的使用减法,也同样能达到突出的目的。
突出可以理解成是一个相对的词语——相对的突出。这种情况下我们除了加强本体而产生突出的效果,也可以通过削弱其他个体从而产生本体的突出效果,所以,我们来做个小实验。
加强法是基于重点7号球本体展开,我们在色彩和结构上进行加强法操作。
色彩加强法包括加强明度、饱合度等使其更明亮、更显眼。
结构加强法包括:变大、变形、增加标识等。
减弱法是在重点7号球以外的球体进行操作,我们在色彩和结构上对其进行减弱处理。色彩减弱法包括降低其他物体的明度、饱合度.透明度等,使主体更加突出。
结构减弱法包括:减小其他物体的大小来使主体更大、更突出。
加法
加法是在原有设计基础上,增加、突出、放大、强化某个特定部分使其得到突出。加法本身井没有问题,它是一种比较直接的思路,不论是需求方还是设计人都会下意识地使用这种办法,但是物极必反,过于频繁地单一使用加法往往会把自己通上绝路。
减法
欲璃故纵里的减法是通过减少、缩小、弱化其他部分使某个特定部分得到突出这是一种逆向思维。配合加法一起使用，可以避免画面过说拥挤、刺眼。
满
满“的目的本身是希望用户能够看到井吸收更多信息,但呈现井不表示会被看到,而看到也井不代表会被记住。如何更好地梳理阅读,让用户保持愉快的阅读心态,让信息在合适的时候出现才能真正达到满的目的。
空
空在语义上似乎处于“满的对立面。但它对内容的吸收率往往可能比“满更高。留白可以带给信息更好的阅读性也为设计带来更高的品质感。如果在拥挤的路上走得疲惫不堪的我们,不如反其道而行,欲擒故纵,下面我们就将法码移向右面,来看看“空境的别样风景。
五、乾坤大挪移
时间短、没点子、没创意,又要快速捕捉眼球,怎么办?
对页面整体进行旋转和平移是快速改变视觉的快速有效方法它打破了正常的网页视觉习惯,吸引了观众的注意力。
说说：旋转和平移
打破正常的视觉习惯,不对称和斜线条的视觉也可以造成设计上的速度感的冲击力。这是一个相对通用的办法,在没有更好的点子和创意的情况下,不妨尝试使用。
想想：旋转可能会给我们带来的问题
(1)信息量的限制
由于旋转的构图，斜线与面边、面框最终会有一个交界点，可能导致信息不能无限制的延续。
(2)排版的限制
由于旋转的形式需要整体的配合，而有部分素材无法配合旋转就会比较费时间去归纳处理。
(3)浏览舒适性问题
由于角度倾斜打破了习惯性视觉，在提神的同时也会给浏览造成一定的困难和不舒适。
旋转可以分为以下几种：
(1)整体旋转：背景和内容一起旋转,需要注意两条边缘线，一是要保持旋转的边缘线整齐，另外也要注意旋转后的内容不能超出1000像素宽度。为了兼顾信息的可阅读性，背景和内容同时旋转的角度尽量不要超过15度。
(2)背景旋转：背景旋转，信息内容保持不变。这种旋转既可以产生旋转的视觉形式感，又可以保证文字信息的阅读性，是推荐和常用的方式。但信息排版同样也受到斜线的1000像素宽度的限制，在具体操作中需要进行细节的调整。
(3)综合旋转：根据内容结构进行有选择的部分旋转。通常选择内容文字较少的 SLOGAN跟随背景一同旋转共同达到旋转的形式感。信息量较多的正文保持水平不变，以方便阅读。这种方式也经常被使用。
六、杂志版式
经验是把双刃剑，既能高效完成设计任务，同时也会束缚我们的思维，网页设计也是随着软硬件的发展，网页展示情况逐渐丰富，我们可以尝试进入其他设计体系，让不一样的环境刺激我们的灵感。像杂志版式学习，是我们尝试迈出思维局限的第一步，
说说：消除平面设计边界，像杂志版式学习
为什么可以向杂志学习？
1、纸媒先于媒体平面设计，设计经验丰富版式沉淀更专业；
2、互联网技术发展使得表现束缚越来越少，网页设计可以有更多样的空间；
3、网页设计和纸媒杂志有许多共通性。
想想：质感超轻薄、版式强节奏、图片大视觉
一、质感轻薄，杂志版式主要通过色块、点、线、面的配合形成形式美感。轻质感减少了许多具体质感和细节的繁琐束缚，让设计师容易面岁画面进行控制也加快了设计时间。
二、版式强节奏，在画面中强调和突出重点信息，并有明确的引导指示。不同于平铺式的交互方式，更强调信息层级关系，和视觉流程。
强节奏表现方法：1、大和小的节奏配合；2、多和少的节奏配合；3、粗和细的配合。
三、图片大视觉，读图时代，长篇文字让人厌倦，图片是直接有效的触动我们麻木神经的好方法。大视觉的表现手法：1、背景大图；2、信息图像化；3、文字配图
七、全屏大视野
随着显示器的更新，网页尺寸不再停留在800-1000像素，全屏画幅和自适应成为设计的关键。
说说：解决两个问题，一个是解决全背景显示产生的干扰问题；另一个是面对不同尺寸的显示器如何解决自适应的问题。
想想：
1、大图平铺
2、中心定位两侧自适应
3、单侧定位，中心延伸
4、小切糕全屏响应
看看：硬件已迈入视觉无限制支持了，从720到1080，从标准高清到4K，从4K到8K......
八、文字衣橱
文字太多往往会影响设计美感，文字也是可以有秩序的进行设计的，如果没有章法简单的把文案堆积，那就是失败的设计，给文字整理一个衣橱，建立一套智慧的文字系统一定会让设计更优秀。
说说：文字也要有个家，思路清晰的文字排布会让你的设计清新脱俗。
想想：大关系、分要点、小字眼
文字衣橱的元素：
主标题：主标题是指一篇文章的大标题,用来提出文章中心或主旨,文字体量相对较少,在网页表现中通常为粗磅大字号在整体的排版节奏中占据着较强的节奏。
副标题：副标题是指用来解释主标题的说明文字，跟在主标题后，文字数量相对主标题更多一点，设计表现为字号中等、磅数中等。
小标题：小标题通常指的是在具体内容中，对详细内容进行分类组织，使行文条理清晰，在长篇文字中我们也可以对它进行分类和逻辑梳理，在设计上，也可以通过特殊的形式表现进行定位。小标题的表现通常弱于主副标题。
序号：有顺序的号码，如数字序号1、2、3、4…包括大写汉字，如一、二、三、四。
在设计中，由于序号有着归类指引的特殊功能，所以在设计中通常是一个小亮点，它的装饰作用如同一个小图标对整体的文字信息可以起到分类、定位、装饰的作用。如果放大序号的字号，还可以加强排版的节奏感。
内容说明：内容说明指的是通常所说的正文，它包含了下面要说的这些元素，但如果将整体文字信息进行解剖的话，也就没有所谓的正文的概念，正文是不同信息分类的综合。所以这里将暂时无法归类的、文字体量较多的信息叫内容说明，它的字号通常较小，字体设计简洁。
提示说明：这个是在正文之外的对某个事件或名词的解释补充，在设计中通常的位置是在说明文字边上或依附于说明的事件或名词。有的还备有图文手绘等进行装饰，或者是一些虽然没有功能性却让整个页面都生动起来的小补充，这也是设计表现中的一个小亮点。
关键词：关键词通常是指正文中出现的重要数据、时间、地点、事件、物件等,设计中会通过标红、放大、图示等方式进行强化。如果某些关键词的重要性高，而且在毎个分类选项中都会岀现，也会对其进行特殊的图形化定位表现。
图示分为两种：一种是对整体内容的概括，叫图标也叫Co；一种是对单个物件名词的图形化表示，我们称它为图片高品质的图示对整体设计会起到比较大的帮助。另外浏览者通常会对带有图标、图片的信息特别关注。
按钮：按钮有几种作用一是触发行动，如“立刻购买"；二是跳转到其他相关信息，如“热点推荐”三是对当前内容的补充说眀页面，如”点击查看详情“、“更多“之类的按钮。我们可以根据不同的按钮功能设计其摆放的位置、颜色、大小等属性。按钮的设置也可以让当前信息呈现较重要的部分,让信息呈现更好地收纳。
大关系：大关系可以理解为对文章的大意进行第一步分段，它是为了缓解大篇幅文字对阅读造成的恐惧，从三个步骤对比来看，大关系是对第一层大逻辑的梳理。它不涉及标题、内容或关键词等细分，它的任务主要是理清段落之间的关系，比如它们是属于并列关系还是流程关系，每段文字之间是否有相同的结构或相似的数据信息等等。
分要点：在分清大关系之后，我们第一次通过图形来进一步标识每个段落里的结构，提取毎个信息段落里的主要元素，包括标题、副标题、小标题、内容说明等。这样的提取可以帮助用户快速提炼段落大意在分要点的梳理过程中，我们要注意分清不同要点的层次关系，从大的主标题到小的内容说明，由重到轻，注意图形和色彩的应用，把握节奏，不能混淆关系。
小字眼：小字眼，也可以叫做关键要点，主要是由少量文字组成的一些相对重要的信息，比如数字、时间、地点、奖励等等。在这个环节我们通过图形化标识将这些信息进一步突出。这些小字眼有些是关键信息，有些是数据对比类信息，通常我们会对其标红或安置在特殊的位置供用户进行类比预览。有些关键信息我们会为它进行配图或增加有互动行为的按钮提示，从而使用户可以更快注意并获得这些重要的资讯。
九、你看起来很好吃
你看起来很好吃？在这资讯爆炸的时代，如果说资讯是我们必须喂给用户的食物，那用户往往会是一群偏食厌食的宝宝，如何让他们乐意吞下这送到嘴边的食物呢？好吃！好吃当然受人喜欢，但真的好不好吃、有没有营养做为设计师的我们还真决定不了，不过“看起来很好吃“那便是我们的活儿了！
说说：信息的图形化设计 —— 这是一种对信息更深入理解的设计方法，较之前提到的关于信息黄金排版、信息文字收纳等在逻辑上更进一步，是通过设计师对信息的进一步消化的图形化输出，也称数据图形化。近两年在各类的数据报告表现中曰趋走翘。而我们也可以将其利用在日常的网页中，使信息阅读更加快捷有趣,看起来更好吃。
想想：并列型、对比型、流程型 —— 先前我们提到了对信息的收纳，是对信息进行归类整理，在这一章里，我们来进一步对它的逻辑进行重组和图形化。重点在于剖析几个事物之间的关系，并将这种关系用图形的方式表现出来，在这里，我们简单将逻辑中最常见的三个类型进行分析，它们是并列组合型、数据对比型、步骤流程型。
并列型：并列组合型,它可以是有共同逻辑关系的不同事物,也可以是同一事物的不同方面,在设计表现上,它们之间是种平等、均衡的状态,而在这些内容的表现形式和结构上也是相对一致的。
对比型：对比关系是指两个或两个以上的事物之间的比较,或者是一个事物的几个方面的比较。它是在并列关系基础上强化特征,并通过数据或图形进行可视化的比对。它是并列关系的升级和特征强化。对比关系区别于并列关系的特征在于,它的对比表现高于它的并列表现,通常是需要经过对比得出某结论而存在。从简单的二者对比到多个元素之间的对比,从并列的单一数字呈现到数据化的图表,从横轴的图表到环形的图表,对比型的样式因为其不同的特征而拥有许多丰富的表现形态。
对比型可细分为：
1、两个数据对比
2、多个同类数据对比
3、标明参数的同类数据对比
4、同类数据的多层属性的对比
5、非同类数据的对比
6、单个数据的轴线图
7、两个数据的轴线图
8、多个数据的轴线图
9、环形对比数据图表
10、环形组合对比数据图表
流程型：流程也是在并列基础上的升级，它是指处于并列关系的两个或两以上的单位，它们之间具有前后的任务关系，共同拥有一个目标和方向并共同完一个完整行为，这种关系称之为流程关系。流程关系在商业运作、操作指导或是任务说明中也是很常见。
流程型可细分为：
1、两个任务的流程关系
2、多个任务的流程关系
3、多个支线流程
4、循环流程
十、钉钉铆铆
你是否曾面对着苦等到手的淘宝衣衣欲哭无泪？上身效果不佳，不是我们身材不好，脸蛋不美而是我们少了它们！就是这些小小的装饰将这件衣衣称托出自己的韵味。好花还需绿叶衬，即使是钉钉铆铆也是同样重要！
说说：网页中的小装饰 —— 钉钉铆铆指的是网页设计中的小装饰,它并非主体的形式感或者大的UI，而是网页设计中非主体的装饰,比如一个小图标、或者一些小修饰,正如服饰搭配中的一整套行头,钉钉铆铆则是这套行头中的小手饰、小链子等,这些看起来可有可无的小装饰实实在在地衬托岀了主体的服饰的个性与味道。
想想：小图标、小序号、小字、小手绘 —— 我们将网页中的这些常用小装饰整理成四个类别小图标、小序号、小字、小手绘,也许当我们浏览一个页面时很难关注到它们,但这些小的装饰点却在视觉潜意识里为整体页面的易用性、舒适性、节奏感和亲切度默默加分。
附录A：一个商业设计师的职业世界观 —— 关于商业视觉设计师的自我定位
一、自我定位
1、我是谁？
第一阶段艺术设计者；第二阶段翻译者；第三传达者
2、他是谁？
产品营销角度可划分为：产品和市场两个方向，产品经理负责产品内容的更新和推广，市场经理则从市场角度树立产品的品牌形象，增加产品市场曝光率和产品的美誉度。
从服务和技术支持的角度出发可分为：决策层、策划层、实现层。
3、我要做什么？
核心定位
a、产品风格设定
b、竟品市场差异化设定
c、产品logo设计
d、产品概念站设计
产品运维
a、官网制作
b、活动专题
c、资源包
d、广告平面海报设计
e、各平台媒体推广视觉规范设定
市场推广
a、媒体平台网站建设
b、合作活动专题
c、展会场馆的主KV设计
d、周边设计
二、产品相关
1、产品特点及类别
2、用户画像
3、产品周期：预热期、测试期、运营期
4、网络整合营销流程图
