首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

没有解决这些细节问题你都不能叫网页设计师

更新时间:2023-12-09

无私向斑马

ui

878

网页是公司越来越重视的一点,提高网页设计质量是设计师的必修课程,把握住细节是提高网页设计的关键点。那如何把握网页设计细节呢?

1、 网页图标的统一风格

图标统一性:

a、 风格统一:线条性、块状图标、手绘图标、扁平图标、拟物图标等(同时线条图标线条粗细一致)

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

c、 视觉上大小统一

没有解决这些细节问题你都不能叫网页设计师

2、弱化点缀元素

网页设计中,点缀元素很多都是起到视觉修饰作用,所以在视觉表达时要弱化它们的存在,很多初学者会忽略点缀元素的弱化调节。

没有解决这些细节问题你都不能叫网页设计师

(未弱化分割线)

没有解决这些细节问题你都不能叫网页设计师

(弱化分割线)

上图可以看出,第一张未弱化分割线的设计会让页面比较拥挤,也让用户无法第一时间获取重要信息。第二张弱化分割线之后,让页面更简洁,也能衬托分类菜单。

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

3、让页面更简洁

没有解决这些细节问题你都不能叫网页设计师

页面简洁但不单调是我们的目标效果,但是很多设计师在设计师习惯用不必要元素过度修饰。合理点缀修饰让设计更活,过多装饰让设计更做作,慎用修饰。

没有解决这些细节问题你都不能叫网页设计师

(添加过多修饰页面)

没有解决这些细节问题你都不能叫网页设计师

(未添加过多修饰页面)

简洁的页面设计更快速直接的向用户传达重要信息,不啰嗦不累赘不杂乱。上图可以看出,第一张添加过多修饰元素,会让页面更花,有画蛇添足感觉第二张页面会更加简洁。

4、图片视觉平衡

没有解决这些细节问题你都不能叫网页设计师

网页设计中人物或产品图是常用的元素,在使用人物图像时,保持视觉平衡和协调,所以要控制视平线方向的一致。

没有解决这些细节问题你都不能叫网页设计师

(未统一视觉平衡)

没有解决这些细节问题你都不能叫网页设计师

(统一视觉平衡)

图片不平衡时用户会花时间去主动寻求平衡,会给用户阅读带来“难点”,平衡设计是设计师所需要掌握的设计点。

上图第一张视觉平衡未统一,感觉很生硬,三张图片搭配不协调。第二张统一视觉平衡让页面更统一。

5、色彩合理使用

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

定主色方法:品牌色(logo颜色)、图片色、情感色。

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

没有解决这些细节问题你都不能叫网页设计师

6、提高图片质量

影响图片质量原因有:

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

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

c、 图片使用变形:很多人为了符合比例就暴力压缩图片(找合适图片,也可适当修剪)

d、 未适当修饰图片(如调色、裁剪等)等原因。

没有解决这些细节问题你都不能叫网页设计师

没有解决这些细节问题你都不能叫网页设计师

7、按钮使用的合理性

按钮是网页重要组成元素,合理设计按钮能提高用户体验(如不可点击的按钮设置成灰色);其次按钮的统一性(如按钮的圆角度和风格)。

按钮的几种状态:普通可点击状态、不可点击状态(设置灰色)、点击后状态、聚焦状态(点击未松手)、划过状态。

没有解决这些细节问题你都不能叫网页设计师

8、文字的极差关系处理

文字的极差关系能够直接反应出文字的层级,突出重点文字内容;并且让整个设计不累赘,更有设计感。极差关系可以从文字的大小、字体、颜色、是否加粗、倾斜、大小写、间距、图形结合等手法来解决。

没有解决这些细节问题你都不能叫网页设计师

没有解决这些细节问题你都不能叫网页设计师

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

不同的设计方式可能让用户有不同的体验感,正确的设计方式复合用户习惯,减少用户成本也是网页设计主题之一;反之会让用户感觉很别扭,不习惯。

比如我们阅读习惯是从上到下,从左到右,从重点到普通的顺序去阅读,所以在做设计时你的重点可以从用户阅读习惯开始。例如下图的交互点颜色设计。

没有解决这些细节问题你都不能叫网页设计师

没有解决这些细节问题你都不能叫网页设计师

10、控件元素的统一

有部分设计师,尤其是刚开始从事设计的设计师,他们在设计网页控件时都是现用现做,并没有在设计网页之前统一公共控件元素,这样会让控件元素很难达到统一,尤其是不同页面的控件元素。

没有解决这些细节问题你都不能叫网页设计师

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

11、同类信息的亲密性

当没有明显的区域划分时,间距就是我们判断信息分类的直接依据,此时间距留白就显得格外重要;一般同类模块元素会间距比较小,不同模块元素会增大间距用以区分。

没有解决这些细节问题你都不能叫网页设计师

没有解决这些细节问题你都不能叫网页设计师

总结:这些都是初次接触网页设计的设计师们常常犯的细节问题,但是网页设计的细节实际远不止于此,只要细心做好每一个细节即使是设计小白,也会让你的作品很优秀

版权声明 | 文章配图仅供学习参考,引用图片版权归属原作所有

                如有问题,请及时与我们联系,我们将第一时间做出处理

上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • 全方位系统讲解C4D - 零基础从入门到精通

    全方位系统讲解C4D - 零基础从入门到精通

    1小时17分钟54秒

  • Stable Diffusion - 2024全新AI绘画系统教学

    Stable Diffusion - 2024全新AI绘画系统教学

    1小时40分钟49秒

  • AutoCAD施工图深化课

    AutoCAD施工图深化课

    3小时35分钟15秒

  • C4D模型制作技术

    C4D模型制作技术

    3小时15分钟47秒

  • 运营广告设计课

    运营广告设计课

    3小时27分钟10秒

  • AI+UE5轻松实现科幻电影!

    AI+UE5轻松实现科幻电影!

    32分钟36秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答