网页UI设计时4个需要进行的走查内容

 2020-11-05 14:49:52  1162 浏览  0 评论   赞

走查就是查找出网页设计中的问题,从3个方面走查信息的层级;从4个方面走查文字的规范;从4个方面走查图标的设计;从2个方面走查图片的合理性

在网站设计工作中,由于各种各样的原因,开发最终完成的视觉还原可能会离设计稿有一定的差距。毕竟与设计师相比,开发对很多视觉元素与间距没有那么敏感。因此设计走查不但可以快速帮助开发找出与设计稿得差异所在,而且还能给到开发细节与差异的调整方案与建议,完成最终产品的高质量交付。

查信息层级

1. 页面表达的意思

在设计页面时,需要注意页面要传达给用户的重点信息。如下面案例:

查信息层级_网页UI设计时4个需要进行的走查内容

图1369-1:页面首屏

首屏信息是给用户的第一印象,因此用户打开页面时,尽可能展现出更多用户感兴趣的内容。而此次页面需要突出的时优惠信息,次要信息则放在后面。

2. 页面视觉重点

查信息层级_网页UI设计时4个需要进行的走查内容

图1369-2:视觉重点

屏幕尺寸间合理运用黄金比例(斐波那契数列,0.618),可让界面视觉重心更加平稳,视觉更加舒适。同时有助于界面区域分隔,集中视觉焦点,承载更重要的信息,让整个界面布局更加合理。

3. 元素间距符合各层级的关系

页面杂乱无章,其主要原因就是一味地堆砌,导致信息层级分布没有区别。想要页面清晰,有节奏的呼吸感,不妨尝试以下方式:

查信息层级_网页UI设计时4个需要进行的走查内容

图1369-3:间距符合层级

同类的板块不应被混乱的间距区隔开来,它们应该更集中,并且整体与别的板块区别开来。同理,不仅仅是板块,元素与元素之间也是如此,这样用户可以更加快速地看到自己想要的东西。

文字规范走查

文字规范走查_网页UI设计时4个需要进行的走查内容

图1369-4:文字规范

1. 字体种类的控制

界面如果字体种类过多,就显得不统一且混乱。所以字体控制尽量在2-3种以内,中文字体、英文字体以及特殊数字字体。

2. 字号与粗细控制

字号过多会使信息失去重点,基础字号控制在3种以内,这样就能清晰区分信息的层级。

加粗字体往往是整个界面的视觉焦点,重点文本需加粗处理,注意控制字体加粗的使用,以免造成信息层级的混乱。

3. 行距控制

行距太小不便于阅读,太大就会显得松散,所以控制在1.2-1.5倍的范围是较为舒适的范围。

4. 字体颜色

字体颜色深浅有序能让信息层级主次分明,界面应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在界面中反复使用,统一规范输出。

一般来说,信息越重要,字体颜色越深。但选择字体颜色时,我们还需要注意产品的实际使用环境,这不仅要考虑室内使用环境,还需要考虑到特殊的室外强光环境。

通过设计规范走查图标

通过设计规范走查图标_网页UI设计时4个需要进行的走查内容

图1369-5:图标比例

1. 视觉比例

由于图标通常都是成群结队出现,彼此间的统一性显得非常重要,却也是常常容易被忽略,可尝试使用图标盒子来规范尺寸。

2. 图标设计要点

设计图标时可重复使用基础形状进行设计,保持整体识别性,这样既能统一大小又有整体感。

3. 图标尺寸

在APP设计中,功能图标大致分成:可以点击的按钮和不可点击的展示图标。

  • 可以点击的按钮:常用于导航栏、tab栏、操作栏,常用尺寸为:48x48px、64x64px。
  • 不可点击的展示图标:常用于信息展示位置,用尺寸为:24x24px、32x32px。

4. 标签的走查规范

从商业的角度,使用标签是为了凸显产品卖点。常用标签样式有三种表现样式,根据模块功能的重要性去搭配,按照重要到次要的排序是:面性>线面>线性。

图片比例的合理性

为了保证界面的可读性和趣味性,通常都会在页面中运用一些配图,而这些配图通常会影响整个界面的美观度。因此,在设计作品时,应该注意图形与图像的比例。

1. 图片使用规范

首先,让图片的背景保持统一并且做到干净整洁。

其次,图片主体的比例大小跟其他图片保持统一,避免有些图片无法完全展示整体。

2. 图片模块的常用使用比例

UI设计中图片的常用比例:

  • 1 : 1,适用于电商,能让商品图片展示最大化。
  • 16 : 9,适用于视频,符合标准的人体工程比例。
  • 4 : 3,多应用于新闻类APP,应用方便,且无需进行过多比例的裁剪。

很多朋友都会直接跳过设计走查这部分,但要想开发直接保证产品达到非常高的还原度是几乎不存在的,这不仅需要开发有着不错的设计功底和设计敏感度,还要对实现方式和开放过程非常精益求精。所以,任何时候都不应该忽略设计走查这一环节,它是保证最终上线产品高质量的必须工序。

 

转载请注明:网创网 www.netcyw.cn/b1369.html

()
发表评论
  • 昵称
  • 网址
(0) 个小伙伴发表了自己的观点
    暂无评论

Copyright © 2018-2022 小王子工作室 版权所有 滇ICP备14007766号-3 邮箱:yangzy187@126.com