符合视觉规律

1、文字横向编排
   
    由于人眼的视线横向移动比竖向移动快而且不易疲劳,因此将文字尽量横向排布,除非一些有特殊设计要求的版式或书法字体的版式。同时,页面尽量保持横向尺寸固定,竖向尺寸不固定,目的是使人们能连续不间断地浏览页面,需要注意的是,应避免页面左右、上下都能滚动,这会给浏览者带来极大的不便。

    2、重要信息置于“最佳视觉区域”

    为什么很多网页左上角放logo,顶部作为广告区,左侧或上侧安排重要栏目导航链接?在进行网页版式设计中,要考虑将最重要的信息或视觉流程的停留点安排在注目价值高的位置,这就是最佳视觉区域。由于人们习惯于将视线从左到右、从上到下移动,因而视区中的不同位置注目程度不同。

网页版式设计需有合理视觉流程

 在进行网页版式应更多地为使用者考虑,让网页设计更加的人性化,更加科学、理性。所以我们的设计师在进行网页版式设计的时候需要有合理的视觉流程。

    1、方向关系视觉流程

    方向关系的视觉流程强调逻辑,注重版面的清晰脉络,似乎有一条线,一股气贯穿其间,使整个版面的运动趋势有“主旋律”,细节与主体和谐自然。

    1)单向

    单向视觉流程是最简洁、最强烈的视觉效果,指视线在页面中随构成要素二形成的单方向顺序运动,它一般按照由大到小、由主到次的顺序,能直接到达诉求信息的主题内容。其包含3种关系:

用户界面设计之视觉设计原则

视觉设计是在结构设计的基础上,参照目标群体的心理模型和任务达成而进行的。它包括页面、色彩、字体等。视觉设计的最终目的是用户愉悦使用。下面我们就来讲一下视觉设计的原则:
  
       1) 要依赖认知而不是记忆。就像打印图标的记忆、下拉菜单列表中的选择。
  
       2) 减少短期记忆的负担。让计算机帮助记忆,如: Password、User Name、IE进入界面的地址可以让机器记住。
  
       3) 比喻要尽量使用真实世界的。如:电话、打印机的图标设计,尊重用户以往的使用经验。
  
       4) 界面的协调一致。如手机界面按钮排放,右键否定;左键肯定;或按内容摆放。

优化结构对我们视觉的影响

我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。这就是通常所说的视觉感知的格式塔原理。格式原理有:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理以及主体/北背景和共同命运原理等等。下面我们先来介绍一下前两个原理吧!

在20世纪早期,由德国心理学家组成的研究小组,发现人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。这就是通常所说的视觉感知的格式塔原理。

视觉设计的导向——线图框

线图框和注释是明确网页或应用要显示的内容,以及内容的结构、功能的一套方法。当这些文档同网站地图和任务流程结合起来使用时,对明确原型应用场景和验证概念是极为有用的。线框图一般是黑白的,去除图形元素或最后总的内容;转而使用标示来标注内容的位置,为视觉设计提供指导。

那么说了这么多,究竟什么是线图框呢?它基本上是一个低忠实度的网页或应用界面的原型,线图框用来说明将会在页面或屏幕上展示的原素,如:导航、内容区、图像和/或媒体需要、表格元素、操作引导等。

线图框通常采用黑白或灰阶色绘制,图片用占位符表示,不涉及字体的设置(尽管有很多的线图框都会用不同大小的字体把不同的内容区分开来)。线图框的大小规格多样,既可以非常简单,也可以完整到几乎重现整张网页。

建立清楚的视觉层次

让页面在瞬间明白易懂的一个好办法是确保页面上所有内容的外观——所有的可视线索——清楚,而且能准确地表述页面上内容之间的关系,哪些内容相关,哪些内容是其他内容的组成部分,换句话说,每个页面都应该有清楚的视觉层次。

一个视觉层次清楚的页面有三个特点:1、越重要的部分越突出。最重要的标题要么字体更大、更粗,颜色更特别,旁边留有更多空白;要么更接近页面的顶部——或者以上几点的综合。2、逻辑上相关的部分在视觉上也相关。可以把相近的内容分成一组,放在同一个标题之下,采用类似的显示样式,或者把它们全部放在一个定义明确的区域之内。3、逻辑上包含的部分在视觉上进行嵌套。例如,一个分类的标题出现在某本具体书籍书名的上面,在视觉上包括书籍区域,因为该书籍属于这个标题,而且书籍的标题也要横向覆盖这本书的元素。

网站设计中网页的视觉效果如何把握

网站成功是建设网站的目标,每个成功的网站都有其特殊的地方,能让人印象深刻的,不外乎是它所带带的视觉上的独特效果,本文就总结网站视觉设计的几点经验:

1、logo:基本logo特征,吻合logo设计的基础(一般是平面设计所通用)显示器得效果:清晰度,最小尺寸(由显示器分辨率产生的,与线下平面设计的印刷效果等同)

2、文字:内容的等级决定字体形状和字号的大小以及粗细;颜色由状态决定(可默认或按照网站特殊统一)。

3、广告、内容图片:尺寸和样式的合理定位,同一页面要有和谐性,注意图片优化、位置的节奏感和大小对比。

网站设计中网页的视觉效果如何把握

网站成功是建设网站的目标,每个成功的网站都有其特殊的地方,能让人印象深刻的,不外乎是它所带带的视觉上的独特效果,本文就总结网站视觉设计的几点经验:

1、logo:基本logo特征,吻合logo设计的基础(一般是平面设计所通用)显示器得效果:清晰度,最小尺寸(由显示器分辨率产生的,与线下平面设计的印刷效果等同)

2、文字:内容的等级决定字体形状和字号的大小以及粗细;颜色由状态决定(可默认或按照网站特殊统一)。

3、广告、内容图片:尺寸和样式的合理定位,同一页面要有和谐性,注意图片优化、位置的节奏感和大小对比。