干货丨这11个网页设计的细节，通常新手都会忽略...

干货丨这11个网页设计的细节，通常新手都会忽略...

　　信息文章来源于UI设计规划师之家 ，作者程龙

　　网页页面是公司企业越来越重视的一点，提升提高页面结构网页设计价值质量是设计规划师的必修课程，把握住细节点是提升提高页面结构网页设计的

　　关键点。

　　那如何把握页面结构网页设计细节点呢？

　　1、 网页页面图标的统一样式风格

　　图标统一性：

　　a、 样式风格统一：线条性、块状图标、手绘图标、扁平图标、拟物图标等（同时线条图标线条粗细一致）

　　b、 色彩上统一：图标可以采用相同颜色配色；如果是不同颜色配色方式在视觉上要做到色调统一。

　　c、 视觉上大小统一

　　2、弱化点缀元素

　　页面结构网页设计中，点缀元素很多都是起到视觉修饰作用，所以在视觉表达时要弱化它们的存在，很多初学者

　　会忽略点缀元素的弱化调节。

　　（未弱化分割线）

　　（弱化分割线）

　　上图可以看出，第一张未弱化分割线的设计规划会让网站页面比较拥挤，也让用户使用者无法第一时间获得重要信息。

　　第二张弱化分割线之后，让网站页面更简洁，也能衬托分类菜单。

　　因此，页面结构网页设计中我们要弱化辅助线条及其他点缀元素。

　　3、让网站页面更简洁

　　网站页面简洁但不单调是我们的目标结果效果，但是很多设计规划师在设计规划师习惯用不必要元素过度修饰。

　　合理点缀修饰让设计规划更活，过多装饰让设计规划更做作，慎用修饰。

　　（增加添加过多修饰网站页面）

　　（未增加添加过多修饰网站页面）

　　简洁的页面设计及制作更快速直接的向用户使用者传达重要信息，不啰嗦不累赘不杂乱。

　　上图可以看出，第一张增加添加过多修饰元素，会让网站页面更花，有画蛇添足感觉，第二张网站页面会更加简洁。

　　4、image图片视觉平衡

　　页面结构网页设计中人物或商品产品图是常用的元素，在使用人物图像时，保持视觉平衡和协调，所以要控制视平线

　　方向的一致。

　　（未统一视觉平衡）

　　（统一视觉平衡）

　　image图片不平衡时用户使用者会花时间去主动寻求平衡，会给用户使用者阅读带来“难点”，平衡设计规划是设计规划师所需要掌

　　握的设计规划点。

　　上图第一张视觉平衡未统一，感觉很生硬，三张image图片搭配不协调。

　　第二张统一视觉平衡让网站页面更统一。

　　5、色彩合理使用

　　一般界面中使用2-3种颜色，更多颜色难以把控，也会让用户使用者眼花缭乱，无法找到重点信息。其中主色

　　选取更为重要。

　　定主色方式方法：公司品牌色（logo颜色）、image图片色、情感色。

　　定辅色方式方法：同色系配色、同色调配色等。

　　6、提升提高image图片价值质量

　　影响image图片价值质量原因有：

　　a、 素材不清楚：可以去高清素材网搜高清图（例如大作网、花瓣网、500px、Pixabay、Pexels等）

　　b、 抠图不干净（有白边或锯齿）：不能懒得只用魔术棒抠图（钢笔通道才是抠图利器）

　　c、 image图片使用变形：很多人为了符合比例就暴力压缩image图片（找合适image图片，也可适当修剪）

　　d、 未适当修饰image图片（如调色、裁剪等）等原因。

　　7、按钮使用的合理性

　　按钮是网页页面重要组成元素，合理设计规划按钮能提升提高用户体验用户评价（如不可访问点击的按钮配置设置成灰色）；其次按钮

　　的统一性（如按钮的圆角度和样式风格）。

　　按钮的几种状态：普通可访问点击状态、不可访问点击状态（配置设置灰色）、访问点击后状态、聚焦状态（访问点击未松

　　手）、划过状态。

　　8、纯文本文字的极差关系处理

　　纯文本文字的极差关系能够直接反应出纯文本文字的层级，突出重点纯文本文字信息内容；并且让整个设计规划不累赘，更有设计规划

　　感。

　　极差关系可以从纯文本文字的大小、字体、颜色、是不是是否加粗、倾斜、大小写、间距、图形结合等手法来解决。

　　9、信息阅读符合用户使用者习惯

　　不同的设计规划方式可能让用户使用者有不同的感受体验感，正确的设计规划方式复合用户使用者习惯，减少用户使用者成本也是网页页面设

　　计主旨主题之一；反之会让用户使用者感觉很别扭，不习惯。

　　例如我们阅读习惯是从上到下，从左到右，从重点到普通的顺序去阅读，所以在做设计规划时你的重点可以

　　从用户使用者阅读习惯开始。例如下图的交互点颜色设计规划。

　　10、控件元素的统一

　　有部分设计规划师，尤其是刚开始从事设计规划的设计规划师，他们在设计规划网页页面控件时都是现用现做，并没有在设计规划

　　网页页面之前统一公共控件元素，这样会让控件元素很难达到统一，尤其是不同网站页面的控件元素。

　　所以为了更好统一，我们在设计规划网站页面之前要做好控件，以便后面的网站页面统一使用。

　　11、同类信息的亲密性

　　当没有明显的区域划分时，间距就是我们判断信息分类的直接依据，此时间距留白就显得格外重要；一

　　般同类模块元素会间距比较小，不同模块元素会增大间距用以区分。

　　总结：这些都是初次接触页面结构网页设计的设计规划师们常常犯的细节点问题，但是页面结构网页设计的细节点实际远不止于

　　此，只要细心做好每一个细节点即使是设计规划小白，也会让你的作品很优秀。

　　喜欢请多多关注易杰智科技！

转载自：干货丨这11个网页设计的细节，通常新手都会忽略...

网站建设服务

悉知科技是一个有着12年经验的网站建设开发公司，品牌建站/外贸网站建设/谷歌营销推广/品牌营销策划，这些我们都能帮您搞定！

在线咨询

网站建设制作方案是什么 ? 报价多少钱 ?

获取建站报价