江苏龙网

  1. 首页 > 生活 > >

电脑网页界面设计有没有像material design这样的规范( 四 )

电脑网页界面设计有没有像material design这样的规范

产品中的字号应该有一个全局的规划，在同一个界面内，尽量少用太多太接近的字号。如果你对全局的字号没把握，不妨参考一下上图的字号分布。
\u0026amp;amp;lt;img src="https://www.zhihu.com/u0026lt;a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg\u0026lt;/a\u0026gt;" data-rawwidth="800" data-rawclass="origin_image zh-lightbox-thumb" width="800" data-original="\u0026lt;a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg\u0026lt;/a\u0026gt;"\u0026amp;amp;gt;电脑网页界面设计有没有像material design这样的规范

如上图所示，「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e，这两个颜色肉眼难以区分，在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级，从信息层级来讲应该要用同一种颜色，表示是同一个层级。
产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等，为了区分层级便于浏览，通常会根据产品需要把字体颜色深浅分成3到5个层级，常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，因此有一定的参考价值。
\u0026amp;amp;lt;img src="https://www.zhihu.com/u0026lt;a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg\u0026lt;/a\u0026gt;" data-rawwidth="800" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="800" data-original="\u0026lt;a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg\u0026lt;/a\u0026gt;"\u0026amp;amp;gt;电脑网页界面设计有没有像material design这样的规范

从技术实现层面来讲，对于字体的选择，产品设计和推广设计有较大的区别。
推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做在图片上，不需要考虑用户的设备中有没有包含该字体。
产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择用户设备里自带的字体来进行设计。
另外，从视觉层面来讲，文字的层级一般用字号去区分，如果既用字号去区分，又用不同字体去区分信息，会显得凌乱缺乏美感，因此字体的数量应做减法，能用2种就不要用3种，能用1种就不要用2种。
2、控件系统：按钮的样式统一
\u0026amp;amp;lt;img src="https://www.zhihu.com/u0026lt;a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg\u0026lt;/a\u0026gt;" data-rawwidth="800" data-rawclass="origin_image zh-lightbox-thumb" width="800" data-original="\u0026lt;a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg" data-editable="true" data-title="zhimg.com 的页面"\u0026gt;https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg\u0026lt;/a\u0026gt;"\u0026amp;amp;gt;


推荐阅读


上一篇：测试初级

下一篇：中国新能源汽车市场会直接跳过混动车，发展纯电动车吗