1

1

尽量是偶数

1

了解了

推荐颜色使用模式

尽量左对齐

字重使用规范建议

常用字号

主流字体

当前公司系统使用的混合导航

常规设置，配合例外

网页的响应式认识

网页视图认知3

网页视图认知2

网页视图认知1

这个网站打不开？

百家号后台以及公众号后台应该也属于CMS·内容管理平台？

图书馆管理系统属于哪一类B端呢

这是哪个公司，是阿里的吗

字重

重点

SaaS的定义

B端产品

概念

可用视口分辨率 (Viewport Resolution): 这是图片中讨论的核心。它指的是在一个屏幕上，网页内容真正可以被看到的区域的大小。这个区域不包括操作系统和浏览器本身占据的空间。 第一步：确定一个“安全”的基础屏幕分辨率 文章作者建议，为了兼容那些屏幕较小的设备（尤其是大量13英寸左右的笔记本电脑），我们不应该直接按主流的 1920x1080 来设计，而应该选择一个更保守、更安全的尺寸。他给出的建议是 1280x720。 宽度 (Width): 1280px 高度 (Height): 720px 第二步：减去被占用的垂直空间 当用户使用电脑浏览器打开网页时，屏幕的显示区域并不会100%用来展示网页内容。操作系统和浏览器本身会占用一部分高度。 被占用的部分通常包括： 操作系统任务栏： Windows底部的任务栏或 macOS顶部的菜单栏。 浏览器顶部UI： 标题栏、标签页栏。 浏览器功能区： 地址栏、书签栏、扩展程序等。 这些UI元素加起来，通常会占用 80到120像素 的垂直高度。图片中取了一个中间值，建议减去 80-100 像素。 第三步：得出最终的可用高度 现在我们来做这个减法： 起始高度 (屏幕分辨率高度): 720px 减去被占用的高度: ~80px (我们取80px作为例子) 计算: 720px - 80px = 640px

核心心法：转变设计思维（通用） 在深入工具之前，请先建立三个核心思维： 1. 万物皆为矩形 (Everything is a Box): 养成习惯，将你看到的任何一个界面元素（按钮、头像、输入框、整张卡片）都看作一个矩形盒子。 2. 从内到外构建 (Build from Inside Out): 设计一个元素时，思考顺序应遵循盒模型： 先确定内容 (Content) 是什么（文字、图标）。 再设定内边距 (Padding)，即内容到边框的呼吸空间。 然后定义描边 (Border) 的有无、粗细和颜色。 最后考虑它与其它元素的外间距 (Margin)。 3. 嵌套与组合 (Nesting & Grouping): 复杂的布局，无非是小盒子装进大盒子里。要有意识地创建“容器”图层来包裹和组织其它元素。

1

1

注意