【HTML】谈设计

什么是设计

设计，是一种通过创造以及组合建立一种新的机制或实体，进而沟通两种实体的一种方式

设计是创造和组合，设计是沟通方式，设计都是带有目的的。

设计的原则

设计的原则： 可用、简洁、一致。

如何保证可用性？
按照实际场景进行区分，可用包括现在可用和将来快速可用，因此需要考虑维护用户可用对用户将来可用性的平衡。尤其是代码层面，保持简洁可维护是用户将来可用性的保障。

如何保证简洁性？

如何保证一致性？

原生的网页风格

原生的网页风格展示与浏览器、操作系统有关，但基本都以黑白、透明和灰色为主。原生风格的几大缺点：

• 文字展示的可读性较差

一些常用元素的示例

文字

文字的设计风格： 可读、简洁

背景颜色

灰色的背景，一般代表代表不被推荐或平常的含义

红色背景

文字和颜色的组合： 红底+白字 -> 强调 白底+红字 -> 一般按钮

按钮

按钮的最重要的特征就是：饱满和显著。

按钮的表现力最好是丰满的。

圆角的按钮要比矩形的按钮更丰满，因为边角的渐变使得其形状更圆。

长宽比3：1左右， 文字居中，文件边距约等于半个字左右的按钮，比较饱满。

弹框

弹框最重要的特征就是：提请用户注意情况。

输入框

不同类型的输入框设计需求不一样

编辑区域

数据展示

展示数据
对于JSON数据，可进行多种格式的渲染，譬如染色和格式化。

动画

Log

脚注

脚注有助于统一界面的样式。

链接

列表

列表的

表格

查询和展示联动

不同类型PC页面的布局

新闻页

搜索页

信息流

不同类型移动端页面布局