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

时间：2024-02-16 00:55:02 | 来源：网站运营

时间：2024-02-16 00:55:02 来源：网站运营

电脑网页界面设计有没有像material design这样的规范？：对于刚入行的新人，可能觉得设计规范是一件很高大上又很让人头疼的事情。这篇文章会从新人的角度出发，总结一些设计规范要点，算是一次温故总结的分享。


一、设计规范有什么用？

◆ ◆ ◆


设计规范能为团队解决不少问题，并提升工作效率，主要体现在以下三个方面：


1、解决多人协作时控件混乱问题

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_b.jpg</a>" data-rawwidth="800" data-rawheight="565" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-dfe8dd8f524e5975515b708bfb2166cd_r.jpg</a>"&amp;gt;


一个大型项目的视觉稿，往往会有几十个甚至是上百个页面，因此，在进行多人协作一个项目前，可由主视觉设计师出一份视觉规范，其他一起协作的几个设计师遵循这个规范，才能把控视觉统一性，提高效率，减少返工率。


另外，当新人加入团队的时候，他们对产品的品牌基因可能理解不透，这时设计规范就可以帮他们快速上手，并且保持产品的统一性。


2、解决开发效率、代码冗余问题

&amp;lt;img src="<a href="https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_b.jpg</a>" data-rawwidth="800" data-rawheight="794" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic1.zhimg.com/v2-20a2180f7ea126ff935798dae2ce4ca4_r.jpg</a>"&amp;gt;


如果没有做规范，就拿按钮这个常见的控件来举例，程序员不知道具体的规范，每个程序员用代码写了A页面的按钮样式，然后在开发B页面时又要重新用代码写按钮样式，页面越多程序员的工作量也就越大，影响项目进度，代码也会越来越臃肿。


另外，对于末端界面没有规范到的角落和由规范控件组成的新页面提供了有效参考。


3、解决产品迭代中品牌形象会走样问题

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_b.jpg</a>" data-rawwidth="800" data-rawheight="686" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-53633590f45615a6f9aa0b91a2f977d5_r.jpg</a>"&amp;gt;


产品在迭代过程中，往往是小版本进行几个功能的迭代比较多。有了规范，后续迭代中也能保持设计初衷，遵循定制好的设计规范，维护好品牌形象。就算是后来加入新的设计师，新的设计师也能通过主设计师做好的规范，统一品牌形象。


二、设计规范操作的五大误区

◆ ◆ ◆


设计规范的工作量不小，开始动手之前应了解一下有哪些误区，尽量少走弯路，更科学高效地完成一份有效的规范文档。


错误一：规范建立时机不对

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_b.jpg</a>" data-rawwidth="800" data-rawheight="432" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-efc6174f98e21e35ceb0d7a5c10d54f6_r.jpg</a>"&amp;gt;


规范建立的时机很重要，太早或者太晚都会给后续迭代带来很多麻烦。最佳时机是在完成风格定位后做规范，可以承上启下高效完成工作。


错误二：对非重要界面进行规范设定

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_b.jpg</a>" data-rawwidth="800" data-rawheight="558" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-53183a5d0955126f378f5e267145f70b_r.jpg</a>"&amp;gt;


整理规范时，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。



错误三：规则没弹性

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_b.jpg</a>" data-rawwidth="800" data-rawheight="634" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-a45859d42f3a562c287d94a0fcbd8977_r.jpg</a>"&amp;gt;


采用28原则只能针对产品80%的界面进行规范。这里讲的80%和20%是一个相对的概念，80%代表色彩、按钮、字体、间距等重要内容，这些内容需要进行详细的规范说明。另外的20%是指某些控件是不可复用并且不重要的，这种20%的内容不需要花费精力做进规范里。这个28原则需要设计师根据具体情况具体分析，作出更适合当下的设计。


错误四：规范没有迭代

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_b.jpg</a>" data-rawwidth="800" data-rawheight="575" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-97c3b3d32b479d5217cdcec87d291a2e_r.jpg</a>"&amp;gt;


在完成v1.0版规范后，产品还会一直迭代，产品改版过程中必定会不断优化设计。


在产品迭代过程中需要对旧的规范进行更新优化，不好的、过时的规范需要及时同步归纳，并及时通知到项目相关人员。要不然，陈旧的规范起不到帮助设计工作的开展，反而是一种负面影响。


错误五：规范没有执行力

&amp;lt;img src="<a href="https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_b.jpg</a>" data-rawwidth="800" data-rawheight="638" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic4.zhimg.com/v2-5ce421741daa01bd4a78df8acd49acbf_r.jpg</a>"&amp;gt;


有两种规范是缺乏执行力的：

第一、规范内容不具体，缺少对核心模块的细节说明。


第二、规范太全面死板太臃肿，无从看起，对后续设计有束缚。


三、设计规范怎么做？

◆ ◆ ◆



设计规范的模块分类有很多，会让新人感到无从下手，怎么样梳理才更能科学易用？以下六个维度可以作为参考。


1、信息系统：字体选择、颜色、层级区分

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_b.jpg</a>" data-rawwidth="800" data-rawheight="489" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-3908b33d844df4ca9d393f197eadce2a_r.jpg</a>"&amp;gt;


产品中的字号应该有一个全局的规划，在同一个界面内，尽量少用太多太接近的字号。如果你对全局的字号没把握，不妨参考一下上图的字号分布。

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_b.jpg</a>" data-rawwidth="800" data-rawheight="562" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-38f9ed51edbfeb03b71ad0b112b7ea06_r.jpg</a>"&amp;gt;


如上图所示，「L」和 「XXL」用了两个很相似的颜色#666666和#6e6e6e，这两个颜色肉眼难以区分，在同一层级去做字体颜色区分是没必要的。同一组中的内容属于同一层级，从信息层级来讲应该要用同一种颜色，表示是同一个层级。


产品文字中一般会有一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字等，为了区分层级便于浏览，通常会根据产品需要把字体颜色深浅分成3到5个层级，常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，因此有一定的参考价值。

&amp;lt;img src="<a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_b.jpg</a>" data-rawwidth="800" data-rawheight="576" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic2.zhimg.com/v2-4d4af5be2dff3017dd4d53c6251d108d_r.jpg</a>"&amp;gt;


从技术实现层面来讲，对于字体的选择，产品设计和推广设计有较大的区别。


推广设计的风格多种多样，需要根据需求选择字体来营造氛围，推广设计的字体往往是做在图片上，不需要考虑用户的设备中有没有包含该字体。


产品设计的字体，很少会做在图上，大多数字体由前端工程师来实现，设计师一般会选择用户设备里自带的字体来进行设计。


另外，从视觉层面来讲，文字的层级一般用字号去区分，如果既用字号去区分，又用不同字体去区分信息，会显得凌乱缺乏美感，因此字体的数量应做减法，能用2种就不要用3种，能用1种就不要用2种。


2、控件系统：按钮的样式统一

&amp;lt;img src="<a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_b.jpg</a>" data-rawwidth="800" data-rawheight="530" class="origin_image zh-lightbox-thumb" width="800" data-original="<a href="https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg" data-editable="true" data-title="zhimg.com 的页面">https://pic3.zhimg.com/v2-99f10dc4aff25be681f90e9285510cda_r.jpg</a>"&amp;gt;


在产品中按钮控件的复用度是很高的，同样的一个确定按钮也会根据页面环境不同来设定不同宽高尺寸。


需要注意的是，即使按钮宽高不同，按钮样式也需要统一宽高比例、描边、直角、圆角、色值、文字区域、字体、字间距等，以保证按钮样式的统一。另外，在一般情况下，按钮会有四种鼠标状态。不同颜色的按钮之间，相同的鼠标状态也需统一视觉效果。


还有布局系统、配色系统、品牌系统等完整设计规范要点，可以关注我的微信公众号【EG365可视化】查看全文，完整资料关注公众号后回复“网易”拿到。


http://weixin.qq.com/r/0kQSCsPEL55QrYdp9xHA (二维码自动识别)