8.12~8.21 学习记录

8.12周四

DW软件的学习——来源：虎课网

DW全称“AdobeDreamWeaver”，中文名称“梦想编织者”，是一个集网页制作和管理网站于一身的网页编辑器，利用它可以轻而易取地制作出跨越平台限制和跨越浏览器限制的网页。 特点：可视化的操作；最佳的制作效率； 实践：下载软件，并进行界面工具的应用。 目标：尝试用DW做网页设计。

8.13周五

互联网工作岗位的了解与学习

特点： 一、经常加班，不是固定的工作时间； 二、开放式办公会，扁平化管理； 三、较少出现办公室政治问题；薪资落差大； 四、工作中倾向于凭员工贡献度来晋升，而不是年限； 目标：了解更多软件技能，掌握一技之长，了解更多的职位要求，提高办公软件的应用技能。

8.14周六

近年来网页设计的趋势

相比于以往，网页设计所面对的要求，越来越高，不仅要细致到位，要功能全面，要能够贴合趋势，还要能兼顾桌面和移动端。 趋势： 卡通插画。卡通插画灵活，装饰性强，在题材和风格足够切合的情况下，能够更快和用户构成情绪上的纽带。 3D 和景深效果。景深和 3D 元素所构建出来的沉浸感使得整个网页充满了吸引力，结合色彩，阴影、高光，在高清晰度的屏幕上，其真实感与丰富感吸引用户。 失真和故障效果。视觉噪音，随机的元素，缺陷，故障，模糊，低保真的元素，粗野主义式的设计，这些在这个以精致细腻为上的时代，制造出了一种反主流的声音。但是这样的视觉风格确实更容易在成堆的精致细腻设计当中脱颖而出，奇怪的配色，反直觉的排版，明显的错位，看起来怪诞但是有趣的设计，特立独行，标新立异，以创新吸引用户。 90年代复古风。90年代是腾飞的阶段，从界面到游戏，在拟物化走到极致之前，那种介乎精致和复古之间的微妙感觉，是非常有趣的。对于新世纪才出生的 Z 世代而言，90年代是陌生的，但是这个时代又是很容易被追溯到的，这也是使得 90 年代的数字风情有着能够打通不同年龄段用户的奇妙气场。 微交互和微动效。微交互和微动效通常不会做得特别的显著，但是它们会深入到 UI 界面的各个地方，按钮，小图标，行为召唤式的文本，翻页按钮，光标，产品图，弹出框等。微动效会更加强调趣味性和交互性。 实验性配色。在以往追求协调配色的时代，和谐的搭配是最主要诉求。不过现如今，用户、品牌乃至于设计师都在寻求一些更加新鲜独特的东西，因此实验性的配色应运而生。实验性的配色通常会带有一些渐变的特质，一些反习惯和反逻辑的搭配方式，饱和度较高的蓝色、紫色和红色的融合，一些更为黯淡或者更为刺眼的搭配方式，强烈的视觉实验试探用户的接受底线。 超粗字体样式。更为大胆的排版和更为粗壮的字体笔触，设计的足够炫酷、炸裂或者优雅，本身是具备相当的视觉美感和愉悦性的。 手作的质感和风格。带着手工制作的“不够精确”的元素，对于越来越多的用户而言，似乎是更好、更加易于亲近的东西，这样看起来更加个性，似乎给网页赋予了某种真实质感，可以脑补出这些手写、手绘、手撕的视觉元素背后，站着一个有血有肉真实存在的人，这是手作感真正让人开始沉迷的原因。

网页设计作品可以借鉴： 一、卡通插画增加画面的丰富度； 二、融入失真感与复古风的创新元素； 三、超粗字体突出重点，体现字体艺术； 四、引入3D元素和动画； 五、极简主义风格。

8.15周日

上下构图的排版技巧

构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，不同构图能使画面产生不同的视觉变化，进而给观者带来不同的心理感受。 上下构图：上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。 最典型的上下构图由“上图下字”或者“上字下图”两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。

8.16周一

运营策略的多样化

新的营销思维就是以用户为中心，同时以大数据、云计算、人工智能技术作为营销运营底层基础，重视对全周期用户价值的深入挖掘，从内到外赋能营销运营全流程。 一、故事化内容体验。通过戏剧性的情节安排、充满刺激的悬念设定、融合流行梗的幽默元素，可极大刺激受众的浏览兴趣与好奇心，加深用户对产品的记忆点，达到用户自主传播推广的效果。 二、数据化/个性化体验。 三、营销战略：网络营销；节日活动营销；俱乐部营销；广告营销。 目标：了解营销的方法，探索客户心理，创新营销方式，网页布局寻找用户的关注点。

8.17周二

视觉流行设计元素概括

一、Emoji表情符号已经突破了“传统”的聊天领域，开始广泛地运用到平面、视觉甚至 UI 当中。它开始充当一种介乎文字和视觉之间的新型语言，还能传递出情绪。 二、自然有机设计元素。自然的线条，柔和的光线，泥土和树叶的色调，贴合自然特征的渐变，又开始流行起来。 三、视差错觉设计。当大脑看到的视觉信号和通常认知不一样的时候，大脑会下意识注意到它，会让眼睛多看看，这就是视差错觉元素在设计当中的独特价值。 四、3D字体设计。逼真的3D字体，和现实的元素交错，制造出独特的视觉效果。 五、黄金元素。带有带有金属的光泽、粗粝质感，光影的变换，或者类似风格的视觉设计，都是这种视觉元素标志性的特征。 六、像素艺术。乐高是让像素艺术复兴的重要推手，更加成熟的 3D 技术让三维立体的像素效果得到了大规模的普及。

网页设计作品学习与借鉴： 一、单色调和双色调设计，让形体更加突出，让视觉更加明确、和谐，用户体验更加平静、舒适； 二、几何图形设计，用最简单的几何元素创造出繁复、有趣、富有想象力的设计； 三、错落繁复的版式设计，增添版型的丰富度，灵动性； 四、无色彩设计，去掉色彩的设计，会显得更加简约，对比明确。经典的黑白色调柔和而迷人，它的魅力是独特的，无论是阴影、动画、液态效果还是有机元素，它都会更加显得形体化和轮廓化；

8.18周三

视觉间隔方法使得视觉层次更加清晰

视觉间隔是一种布局元素，它有助于将内容分隔成为清晰的分组、选项和部分。它可以让设计师更好地组织内容的视觉体验，处理信息的层级，也有助于用户理解内容，明白内容之间的关系。 视觉间隔分为外观和功能。 外观上，视觉间隔有5种基本的类型： 线条，色彩，负空间，阴影和体积，图片 从功能的角度上来划分视觉间隔，可以根据它所处的层次来进行划分。 全出血间隔。使用线条作为全出血间隔是最为常见的，它会横跨整个屏幕布局来作为信息层级的划分。 嵌入式间隔。嵌入式间隔的功能是将相关性较高的内容分割开，通常是进行某个大区块内不同组件的分隔，或者将多个同类的元素分隔开。 中间分隔。通常会置于布局的中间某处，同样是分隔相关的内容，但是通常它们在属性上不一定是一致的，但是层级近似。 注意：保持使用视觉间隔的微妙，以及中等频率，才会使画面更加协调一致。

学习与借鉴： 负空间即留白元素的使用，合理地运用负空间，还能强化页面的呼吸感； 高对比度的色彩，能够增强网站的信息和内容的表现力，分割区块，营造氛围，不同的色彩会有效地分离不同的选项、条目和区域，这意味着它作为视觉分隔的作用非常强； 阴影和体积，通过营造在高度上的视觉差异，从而达到分层的效果，有利于保持整个设计的平衡和易读性，另一方面，它又能保持足够的微妙和自然； 图片的使用。无论是照片、插画、3D图形，它们作为图片都可以很好的平衡文本内容，提高内容的识别度和可读性，有效地划分层级，并且提高情感吸引力。

8.19周四

学习配色

紫色：当紫色作为主色时，选择亮色作为点睛色比选择暗色要好。 黄色与绿色的温暖明亮，与紫色相搭配就会比较舒服。纯度的均衡非常重要。二者中一种纯度较高的话，另一种要降低纯度，这样才能实现生动和多样化的配色。

橙色：如果要用橙色作为点睛色，那么就要避免使用比橙色更抢眼的色彩。灰色常常用于与橙色进行搭配。 下图中大量运用了橙色和红色，因此有蓝色作为冷色进行平衡。 绿色系、蓝色系、紫色系是相对偏冷的色彩，在与橙色搭配的时候会使橙色更为显眼。比起橙色作为主色的选择，以冷色调作为主色、橙色作为点睛色的选择可以使橙色更抢眼，画面更有活力。 橙色作为点睛色的同时，也会有黄色和蓝色也作为点睛色的运用，而整个画面在冷暖两种点睛色之间确实非常平衡的关系。 红色：红色是所有颜色中最早被使用的色彩，历史非常久远，受瞩目的程度也最高。 灰色和红色强烈跳跃的特质非常协调，因此灰色也常被用作红色的辅助色。除了完全的无彩色以外，泛蓝的灰色、泛黄的灰色、泛绿的灰色等都可以只通过色温的差异改变作品的氛围。 在中和泛紫的红色和泛蓝的粉红色中所带有的冷感时，使用黄色和橙色也都会取得较佳的效果。 红色和蓝色的搭配比较常用，给人印象干净利落。使两者搭配协调的最简单的办法，就是使红色和蓝色的明度差异更突出。比如暗红色和亮蓝色、亮红色（如粉红色）和深蓝色的搭配效果都比较好。

8.20周五

导航栏怎么设计

左侧导航更容易浏览。用户习惯于使用 F 式的浏览路径，这使得左侧导航在一般情况下有着相对更强的可用性。 顶部导航更加节省空间。左侧导航所占用的页面控件通常是顶部导航的占用空间的3倍。 侧边导航更容易缩放和收纳。如果信息架构本身涉及到的一级菜单条目较多的时候，采用左侧边栏导航是更合理的选择，而且这种导航非常适合随着时间推移逐渐增加条目的需求。 侧边导航支持定制化导航结构。相比于顶部导航，侧边导航可以直接将分层的二级菜单直接展现出来。 侧边栏更和桌面端系统更一致。系统默认的用户界面大都采用了灵活的侧边栏导航设计，它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。 悬停激活下级菜单在顶部导航中更好用。 顶部导航栏适合做超级菜单。顶部导航因为和悬停出发下级菜单的功能很搭，所以很多网站使用它来呈现条目众多的超级菜单。这种布局也为产品展示和广告留出了足够多的空间。 避免重设计时改变导航模式。导航功能修改都可能直接影响到大量用户的日常使用。 响应式导航栏设计。在有限的空间内呈现大量的导航条目。

8.21周六

五种经典的网页布局设计

顶部大图Banner+简单的栅格。这种布局都能够为用户展示充足的内容，供用户浏览和探索。 这样布局设计干净清爽，有足够强的视觉表现力，并且常常采用的响应式设计，断点也很好控制。顶部大面积的轮播图或者Banner 也有许多插件或者应用。 2、单页设计，单栏布局。非常适宜于展现极简的内容，或者专注呈现一个主题。当网站的主题集中，内容也比较固定的时候，无需复杂的布局来呈现，单页单列式的布局足以应付一切。

单页式设计适合于小网站或者小型项目的展示，它可以用来制造一个简单的介绍页面，让简单的内容显得不那么单调，强化内容的形式感和重量感。 3、自定义栅格。 栅格的优势在于它的组织性，对于用户而言，它具有规律性和可预期性。一个漂亮的栅格系统能够让用户更快找到需要的内容，在视觉上也更加协调自然。 4、经典的F式布局。 5、极简分层。开放式的空间让用户感觉更加轻松，也使得其中展现的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层，可以让信息更有层次，也使得极简的页面拥有了细节。 极简化的页面中加入简单的几个分层，让页面有了视觉焦点，尤其是当设计者想要引导用户关注到某个关键的内容的时候，这种页面布局很很容易实现这一点。