一、页面设计规范

1.减掉多余的元素

设计师在制作过程中通过精简网页多余的内容来呈现简洁的风格，但是，不是一味的减掉

而是有针对性的做减法，减掉繁杂冗长的内容，提炼出能够表现网页或是板块所需要的重点内容，这些内容足够表达设计师的想法。

如右图中的导航部分，归纳出重点的六项内容，上方只放置加盟客服电话来填补空白，既

能突出重点，header区也会干净透气！

2.足够的留白空间

在最开始接触网页制作的人常常会范这样的错误，就是不愿浪费任何一块版面，总是把页

面填的满满的，

其实，在网页中留有足够的留白会让网页具有透气性，让视觉中心更突出，使浏览网页的

用户有足够的空间去思考。所以在制作过程中要大胆的留白，用留白引导用户寻找到特定的、重点的内容或是元素。

3.丰富的细节

网页制作中排版并不难，往往最容易忽视的就是细节的处理！

High Biger的极简风格的网页看上去结构清晰，简洁干练，但是却从来不缺少细节，足够

的细节会让你的网页精美、精致！

细节让网页简洁而不简单，更加丰富画面内容！

如图中的新闻标题，只是文字标题则会单调乏味，加入图标做修饰既能丰富画面又能起到

强调标题的作用。

4.二级导航的形式

5.导航点击样式

6.当前位置点击样式

1.面包屑导航

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。

3、提供返回各个层级的快速入口，方便用户操作。

4、减少返回到上一级页面的点击或操作，不用使用浏览器的"返回"按钮或网站的主要导航来返回到上一级页面

二、产品中心设计规范

1、产品列表排版形式

1、水平形式

2、垂直形式

3、瀑布流形式

产品图怎么处理

1.素材准备—专素材网站

花瓣网：http://huaban.com/

视觉中国：https://www.vcg.com/

pexels：https://www.pexels.com/

pixabay：https://pixabay.com/

behance：https://www.behance.net/

2.避免模糊

3.产品图文字排版

4.页码设计

三、产品详情设计

1.实景照片营造场景氛围

在实景照片这个形式上，企业级产品的表现力远不及消费级产品（对比一下Salesforce

和Apple的官网就知道了），因为企业的商务属性决定了他们不能像消费级产品那样大胆地彰显个性。企业产品官网一般会用客户使用产品的场景照来说明产品给他们工作带来的益处，或用一些开阔的风景照来表现公司的价值观和愿景。

2.概念图用隐喻表达产品价值

经过设计处理之后的概念图，比真实照片的表现空间更大，可以通过一些隐喻的手法来传

达产品价值。

3.插画最适合讲故事

近年来一些企业重塑品牌向更年轻更有活力的方向发展。插画的形式有利于塑造轻松时尚

的品牌气质，同时也是最适合用来讲故事的表达形式。

4.产品界面图简单直观

简单直观的运用产品界面图作为首屏大图，让用户对产品使用过程有一种直观的体验，也

是一种对于自己产品的设计很有自信的表现。

5.视频是流行趋势

用视频代替静态图出现在首屏成为近年来流行的一大趋势，比起静态图，动态视频更容易

吸引目光。视频的内容可以是产品功能解说/客户案例讲述/企业文化传播等，视频的触发方式有自动播放/预加载/点击播放等。

四、子页面设计案例

1.新建以文件，尺寸为1920*1080mm，高度不限，分辨率为72。

2.绘制banner，通栏1920px，添加导航，做出面包屑导航显示当前页面。

3.绘制产品信息，添加标题，搭建原型，添加图片。

4.文字做出大小与颜色的区分，做出层次。

5.其他产品列表布局一致。

6.用色块做出区分，添加底部标签，完成。

知识就是力量，学习改变命运；感谢您的关注，点击我的头像，进入头条主页，查看全部内容；我将持续为您分享艺术设计干货。