用户体验之网页板块设计（6）
作者：Reakin 发布时间：2011-05-14 16:41:00
那么什么是视觉焦点呢？
视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在日常生活中我们运用照相机对准人的脸部，那也是在获取一个焦点。在网页设计中，引导用户集中在你想让他关注的区域，那样会让你的设计有重心和亮点。
视觉焦点的处理方式
人们用视觉获取环境中的信息，对你注意的周围都会是模糊的，你视线集中的中心点是最清晰的。
第一张，视觉上呈现这样的状态是：视线上没有集中，整体模糊，是成方形的视觉框架。
第二张和第三张，图中的两朵花在图形中是最漂亮的亮点，漂亮的东西会引人注意，你会注意到上一朵或则下一朵，注意任何一朵花的时候，眼球集中点会以圆的形状向外逐渐模糊，最中心点就是焦点。
圆形作为设计中的元素的时候，自然更加的适应视觉上的感知。
视觉强弱
美女其实可以独立成为一个视觉焦点，但当我们给美女加了圆形边框后，视觉焦点就转移到圆形边框包括到的美女上，最后将圆形填充，视觉焦点就转移到填充色的圆形的美女上。
点对比图片
图1 整体画面平平，人物排列没有层次，视觉上给人感觉很散。
图2通过添加圆形背景框，会让你想表达的图形首先进入用户眼球。
图3不仅添加圆形背景框，再区分人物大小，主次分明，焦点突出，画面活跃立体。
几何的对比
上图中我们可以看到，方形过度到圆形的变化，圆形是由极其细小的边角组成，在变化当中图形变得越来越有乐趣，比较下来圆形在几何图形中具有平滑流畅的边缘，圆形更让人感觉轻松，愉悦。设计需要增加乐趣的时候，我们可以多运用流畅线条的图形来让页面活跃起来。
实例效果进行比较(圆型设计)
在这个页面上圆形挑起了大梁，支撑整个页面，人物笑脸图片组合的圆形包围着瓶子，映射了这个饮料带给我们的快乐。圆形不仅加强了焦点，更加强了页面的层次感，让页面不会单薄、无力度。
实例效果进行比较(方型设计)
虽然同样用加框的形式来集中物体焦点，同圆形边框相比整体画面呆板，僵硬，缺失了活跃的感觉。
圆形在广告位中的设计
圆形对价格的标注，让用户对这诱惑的价格更加的感兴趣，很好的营造了商品的气氛。
0
投稿猜你喜欢
本文实例为大家分享了python实现名片管理系统源代码，供大家参考，具体内容如下import osdef print_menu(): pri- substr 定义和用法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 语法 stringObject.
- Python提供了一些内建函数用于基本对象类型：cmp（），repr()，str（），type（）和等同于repr()的（'
- 首先感谢比尔、感谢微软、感谢MSDN，是他们让我看到他们富有创意的一面，好了好了不废话了。我们经常把多个CSS或者多个JS并成一个，以节省请
- Django是个好工具，使用的很广泛。 在应用比较小的时候，会觉得它很快，但是随着应用复杂和壮大，就显得没那么高效了。当你了解所用的Web框
- 两种情况：1.带索引 2.不带索引前提介绍：方式：采用命令行的方式来模拟1.mysq由于默认是开启自动提交事务，所以首先得查看自己当前的数据
- 关于本地缓存1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSy
- WindowsError的错误代码详解0操作成功完成。1功能错误。2系统找不到指定的文件。3系统找不到指定的路径。4系统无法打开文件。5拒绝
- 在开发中有些敏感接口，例如用户余额提现接口，需要考虑在并 * 况下接口是否会发生问题。如果用户将自己的多条提现请求同时发送到服务器，代码能否扛
- vue登录页面回车执行事件@keyup.enter.native<el-form ref="loginForm"
- 今天分享的这篇文章，文字不多，代码为主。绝对干货，童叟无欺，主要分享了提升 Python 性能的 20 个技巧，教你如何告别慢Python。
- 本文实例讲述了Python使用迭代器捕获Generator返回值的方法。分享给大家供大家参考，具体如下：用for循环调用generator时
- 代码如下# -*- coding = utf-8 -*-# @time:2020/5/28/028 21:00# Author:cyx# @
- 1.创建表：drop table if exists photo;CREATE TABLE photo (
- 一、通过eval实现 常用内置函数(不用import就可以直接使用) ：help(obj) 在线帮助, obj可是任何类型call
- Asp开发 联通CDMA以下是在开发wap中的随笔，其中一些对于“老鸟”来说，谈不上什么，希望对初学者有所帮助，大家有什么小技巧，欢迎顶上来
- GeoJson的简要介绍GeoJson是用json的语法表达和存储地理数据，可以说是json的子集。GeoJson以键值对的形式保存原有对象
- 记录了mysql 5.7.19 winx64解压缩版安装教程，具体内容如下系统环境：Win7 x64软件准备：MySQL 5.7.19 wi
- --语 句 功 能 --数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --
- 本文实例为大家分享了python策略模式代码，供大家参考，具体内容如下"""策略模式""&
