12bet,的读书笔记

设计

简洁的设计

排版样式

12bet,正文部分的文字按照比例来讲要远大于菜单部分的文字。12bet,合理地使用字号来暗示浏览者哪些区域重要,哪些不重要

图标

图标是一类简化的符号,12bet,用来表示某件物品或者某类概念,或者用来以抽象的图形化概念替代一段较长的文字描述

图标仅仅起到标号的作用,而不至于喧宾夺主地吸引或让浏览者转移视线

分界线

适当的使用线条能够在页面中定义区域的边界,给页面增加额外的维度,12博体育,但不要过度使用

外边距

适当的左右外边距会让作品的正文部分不至于显得太局促。

12博体育,文本需要一些呼吸的空间


统一和象征手法

一致性

作品中用到的元素可能各不相同,但作品整体达到统一的已经却是最重要的

借喻

借喻(用简单的设计元素表示复杂的图像或概念)是一种强大的设计方法,可以为为作品添加一些微妙的气氛并增加作品的深度

光与影

确定光源的位置

保留阴影

  • 阴影可以为页面增加丰富的视觉效果
  • 投射出的阴影能让浏览者感觉到页面以及页面中的元素存在层次感
  • 绘图软件中,阴影很容易实现

需要注意

  • 注意阴影的深浅,深色的阴影代表物体与背景较近,而浅色的阴影表示物体与背景较远,更靠近观察者
  • 注意阴影的长宽,较为细小的阴影让人感觉物体与背景较近,宽大的阴影让物体看起来离背景较远
  • 确保光源的真实性,阴影的方向要保持统一以体现光源的一致性

形状

圆弧

与女性、阴柔关联,表示温暖、舒适、暧昧、爱情等

三角形

让人联想到男性、阳刚,表达诸如强壮、攻击以及运动感等含义。

浏览者的目光通常会被吸引至处于支配地位的棱角所指方向。指向上方体现向上的趋势和攻击性,指向下方通常暗示出消极的意味

方形

暗示力量和根基,看上去足够坚实稳重。给浏览者带来有序、逻辑、严密以及安全的感觉


空间

适当的空间可以将浏览者的目光引导至页面中的关键位置。空间还能够对文本和图像的过密产生一定的缓冲,让眼睛有休息的余地。大大提高内容的可读性,并给读者足够的思考内容的时间

心理和社会意义

  • 间隔空间和经济形势息息相关
  • 使用间隔空间并不意味着这个位置什么都没有
  • 间隔空间与特定地区的文化也有关系

正空间和负空间

正空间是指组成作品的对象所占据的空间,负空间则是指非作品对象部分(即背景)占据的空间。负空间起到定义正空间边界的作用


色彩

清楚地表达信息

优秀的实际是了解如何恰当地使用色彩来进行交流,表达设计意图,加深浏览者印象。色彩和主题息息相关

色彩和人类心理

  • 红色: 力量、活力、爱、激情、进攻、危险
  • 蓝色: 信任、保守、安全、清洁、悲伤、有序
  • 绿色: 大自然、健康、嫉妒、复苏
  • 橙色: 愉快、幸福
  • 黄色: 乐观、希望、冷静、懦弱
  • 紫色: 神秘
  • 褐色: 可靠、舒适、忍耐、大地
  • 灰色/银色: 智慧、未来、谦虚、悲哀、腐朽、高雅
  • 黑色: 力量、性、完善、神秘、恐惧、忧愁、死亡
  • 白色: 纯洁、干净、精确、清白、中性、不毛、死亡

色彩、文化和性别

文化背景和性别差异都会扩展并复杂化颜色引发的心里联想

CSS中的颜色

系统颜色是在CSS 2.1中引入的一系列关键词,允许设计师是用浏览器计算机上的系统颜色配置如:

color: WindowText

很多人仍然坚持使用“Web安全”的调色板。但目前主流的计算机都能够显示数百万种颜色,所以已经没有必要再受限于这个规定了


图案和材质

图案是指重复填充到指定区域内的某一种(也可能多于一种)小块视觉元素

材质并不一定必须要通过触觉才能感受,视觉也能够体现材质感

图案是体现材质感所必不可少的。通常情况下,图案都能够模拟出材质的效果。很多材质的元素都自然地由图案的自有重复而体现出来。


对比度

对比度差别可以用来区分不同的元素。若对比度太低,则元素会失去彼此的界限并混合在一起,文字也变得难以辨认。若对比度高,则将给浏览者压迫感,同样不会觉得舒适

高对比度

高对比度让作品显得过于拥挤,有过度设计之嫌。

一般来讲,白底黑字原则在计算机屏幕上同样是达到最佳对比度的不二之选

黑暗房间中一个明亮的LCD屏幕将显得极为刺眼,在这种环境下,阅读任何纯白北京上的文字无疑都是对视力的巨大挑战

若将两种互补色,例如橙色和蓝色、红色和绿色相邻防止,那么将显出明显的边界以及强烈的对比效果。进而引发人不愉快的视觉上的紧张感

在更加暗淡的颜色背景村脱下偏暗的颜色也会变得明亮起来

低对比度

若作品的对比度过低,往往会给人带来压抑的感觉

若是降低线条与其背景之间的对比度,则能让其看上去变得更细一些

对比度低时,对于视力不好的浏览者来说,看清屏幕上的文字将会更加困难,从而降低可读性

视觉障碍

对于任何依赖颜色传递的信息,我们都应该提供如下方式中的至少一种来告知用户:蓝色且带有下划线的超链接、包含图标或文本的绿色按钮、带有实现边框的红色警告信息


引导视线

一个良好的作品应该能够引导读者的实现,让读者以合理的逻辑顺序逐一阅读内容中的重点,但同时又不会让读者觉察出来

大多数人会在左边或上边寻找导航条,所以把导航条放那吧

在页面中添加足够、适当的旁白能够为读者的眼镜提供一些休息的空间


CSS技巧

减少使用table布局

  • 表格布局会添加大量的标记(没必要的标记)
  • 间隔图像(table布局中的常见技巧,通常是1*1大小的透明gif图,用来撑大表格等辅助布局),不必要地增加了页面的文件大小
  • 图片通过img加入到页面中,增加了页面文件的大小,导致页面加载时间更长
  • 各个页面必须统一的使用table布局,没给个页面都要包含类似的table和img,每次加载需要重绘,代价很大
  • 降低可访问性,很多为障碍人士准备的屏幕浏览器无法正确理解table布局的页面

需要留意CSS布局呈现时的FOUC(无样式内容瞬间),通过把CSS放在文档前来解决(不要使用@import)

图像

若图像属于“内容”,而不是“样式”的一部分,应该使用img标签,否则应该使用background。通过将内容至于背景图像创建样式,能够:

  • 减少页面文件的大小
  • CSS会被缓存,大多数样式标记放在CSS中,浏览器不必每次都去服务器端获取页面样式,加快加载速度
  • 可访问性增强
  • 网站易于管理

使用图片时,使用png可以免去很多不必要的麻烦,它带有256级透明度能够完美的显示阴影效果

外边距重叠

外边距重叠是指,若两个上下毗邻且都定义了不为0的外边距值,同时有没有任何内边距、边框等设定,那么两个元素之间的距离将小于二者外边距的和。为元素添加1px的垂直内边距,就不会形成外边距重叠了(BFC也可)