有爱,有技术,有你^_^)y
╱人◕‿‿◕人╲订下契约(注册新用户)

合作站点账号登陆

QQ登录

只需一步,快速开始

快捷导航
查看: 1347|回复: 18
收起左侧

[失效] 剖析网页设计中的几何圆

 关闭 [复制链接]

该用户从未签到

92

主题

118

好友

2万

积分

第一章

积分
22227
发表于 2012-3-10 14:24:07 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有账号?╱人◕‿‿◕人╲订下契约(注册新用户)

x

                               
登录/注册后可看大图
夜王大人 发表于 2011-10-25 12:24:32 |显示全部楼层



        你的设计为什么平平无奇,为什么吸引不到别人的眼球,这里先来说说什么是焦点(也可以称兴趣中心或者视觉中心),我认为用焦点更能简单准确的阐述。有人用通俗的方法来诠释焦点,在设计的页面上最吸引人注意的地方,视线上集中交汇的地方,这个位置就叫焦点,在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在你想让他关注的画面上,那样会让你的设计有重心和亮点。
        视觉焦点的处理方式
        人们用视觉获取环境中的信息,对你注意的周围都会是模糊的,你视线集中的中心点是最清晰的。第一张,视觉上呈现这样的状态是,视线上没有集中,整体模糊,是成方形的视觉框架。第二张和第三张,图中的两朵花在图形中是最漂亮的亮点,漂亮的东西会引人注意,你会注意到上一朵或则下一朵,注意任何一朵花的时候,眼球集中点会以圆的形状向外逐渐模糊,最中心点就是焦点。圆形作为设计中的元素的时候,自然更加的适应视觉上的感知。
        视觉强弱
                                 
        美女其实可以独立成为一个视觉焦点,但当我们给美女加了圆形边框后,视觉焦点就转移到圆形边框包括到的美女上,最后将圆形填充,视觉焦点就转移到填充色的圆形的美女上。
        下面本人做了点对比图片
                                 
        图1 整体画面平平,人物排列没有层次,视觉上给人感觉很散。
        图2通过添加圆形背景框,会让你想表达的图形首先进入用户眼球。
        图3不仅添加圆形背景框,再区分人物大小,主次分明,焦点突出,画面活跃立体。
        几何的对比
        上图中我们可以看到,方形过度到圆形的变化,圆形是由极其细小的边角组成,在变化当中图形变得越来越有乐趣,比较下来圆形在几何图形中具有平滑流畅的边缘,圆形更让人感觉轻松,愉悦。设计需要增加乐趣的时候,我们可以多运用流畅线条的图形来让页面活跃起来。
        实例效果进行比较
         在这个页面上圆形挑起了大梁,支撑整个页面,人物笑脸图片组合的圆形包围着瓶子,映射了这个饮料带给我们的快乐。圆形不仅加强了焦点,更加强了页面的层次感,让页面不会单薄,无力度。
                                   
        虽然同样用加框的形式来集中物体焦点,同圆形边框相比整体画面呆板,僵硬,缺失了活跃的感觉。
                                   
        富有节奏的设计,连贯的圆形元素组合,网站的主体富有节奏的形状,营造了网站活泼的气氛。方形的组合结构使得网站变得严谨许多。
                                   
         圆形对价格的标注,让用户对这诱惑的价格更加的感兴趣,很好的营造了商品的气氛。
         圆形元素和其它几何图形比较,具有圆滑的特点,让人感觉轻松,愉悦,合理的运用会提高页面的层次,让焦点更加突出,增强视觉感的同时也能够营造活跃的氛围。我们都在不断尝试如何让页面变的美观而生动,创造富有活力的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,运用有趣的圆形来设计页面是设计中很有效的方法。
本文由 站酷网 - Lander 翻译,转载请保留此信息,多谢合作。





评分

参与人数 1宅币 +30 贡献 +4 收起 理由
苏南0 + 30 + 4 →_→手滑

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~
回复

使用道具 举报

该用户从未签到

54

主题

289

好友

12万

积分

最终章

路西法

积分
120819
发表于 2012-6-24 12:18:16 | 显示全部楼层
继续补档
海天龙战血玄幻,披发长歌览大荒。
回复 支持 反对

使用道具 举报

该用户从未签到

3

主题

16

好友

1814

积分

Continue

积分
1814
发表于 2012-9-5 10:57:33 | 显示全部楼层
学习,长姿势
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

5

好友

5153

积分

序章

积分
5153
发表于 2012-9-5 11:14:06 | 显示全部楼层
学习中!!!!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

10

好友

1908

积分

Continue

积分
1908
发表于 2012-9-23 15:15:46 | 显示全部楼层
站酷,昵图,都是我长去的网站呢
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

7

主题

20

好友

8460

积分

序章

积分
8460
发表于 2012-12-10 21:12:27 | 显示全部楼层
学习中!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

22

主题

57

好友

1万

积分

第一章

积分
15075
发表于 2012-12-14 15:27:11 | 显示全部楼层
马克来学习一下
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

14

主题

15

好友

4170

积分

序章

积分
4170
发表于 2012-12-24 02:21:53 | 显示全部楼层
学习一下,最近老师也在说这个
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

15

主题

45

好友

1万

积分

第一章

积分
17804
发表于 2013-1-3 14:04:02 | 显示全部楼层
长姿势了!!!
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

5

主题

17

好友

3370

积分

序章

积分
3370
发表于 2013-2-26 10:48:56 | 显示全部楼层
学习中。。
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

6

主题

45

好友

2万

积分

万事屋

泉眼 | 高猛酸假 | 刷新强迫症

积分
20911
发表于 2013-2-28 11:55:58 | 显示全部楼层
这个有点厉害,算的上视觉艺术分析
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

56

主题

11

好友

3108

积分

序章

积分
3108
发表于 2013-3-4 18:01:39 | 显示全部楼层
...感觉很有用啊...
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

21

好友

4682

积分

序章

积分
4682
发表于 2013-3-21 00:54:56 | 显示全部楼层
合理运用圆形及方形...学习了...
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

21

好友

9075

积分

序章

积分
9075
发表于 2013-3-21 18:49:58 | 显示全部楼层
学习中,高人啊
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

2

主题

22

好友

6380

积分

序章

积分
6380
发表于 2013-4-2 14:32:24 | 显示全部楼层
飘过~~~~~~~~
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对

使用道具 举报

本版积分规则

小黑屋|技术宅(基宅) ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-5-16 06:18 , Processed in 0.345486 second(s), 50 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表