视觉型网页设计 第1篇
视线开端在页面中部，使中间的元素冲击感最强，信息传达最明确，再形成由中部发散出去的视觉运动。
比如很多汽车网站，中间的主图最能体现信息的核心，通过主图再发散到上方的导航或下方的其他服务入口。
以上介绍的四种视觉流类型是比较典型的，但不代表全部，我们也可以设计出更富创意的视觉流，无论是那种路径，用户浏览是否顺畅，信息是否按照主次传递到位，是我们要一直坚守的目标。
1.项目前期我们需要了解页面营造的氛围，内容定位；和交互一起分析信息的优先级，用户的核心行为；前期的准备能帮助视觉设计过程不偏离方向
2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级
3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。
我们有意识的分析用户关注的信息优先级，并通过视觉表现出来，是视觉设计师这个岗位很重要的职责，希望梳理的这些方法能帮助我们将这份职责做的更好，我也乐在其中，与大家共勉！
================关于优设网================_优设网_是一个分享网页设计、无线端设计以及PS教程的干货网站。【特色推荐】PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。设计微博：拥有粉丝量63万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。设计导航：全球顶尖设计网站推荐，设计师必备导航：———————————————————–想在手机上、被窝里获取设计教程、经验分享和各种意想不到的_福利_吗？添加 优秀网页设计 微信号：【youshege】优设哥的全拼您也可以通过扫描下方二维码快速添加：
视觉型网页设计 第2篇
想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：
模糊元素：
图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰
降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离
增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。
视觉型网页设计 第3篇
除了图片，一些符号本身带有顺序和方向性，也能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序、箭头等。
下图的排行榜前三名，虽然用户更习惯从左到右阅读，但由于数字的引导，视线也会被影响而按照1>2>3的顺序阅读，如果希望这样的顺序更加明显，可以再通过放大1的图片大小，拉开差距，结合多种视觉方法达到效果。
时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去浏览信息，甚至会打破常规的如从左到右的浏览习惯，如下图虽然2的位置更容易引导用户优先浏览，但时间轴对信息的影响更明显，一般用户会优先查看模块1，再根据时间先后从右向左关注模块2。
色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：
视觉型网页设计 第4篇
横向视觉流引导用户视线从左到右或从右到左视觉流动，是最符合用户视觉习惯的浏览方式，给人稳定可信之感。
如首页，整体页面和单个模块都是典型的横向视觉流，用户从左到右浏览到边界后，视线回扫到下一行继续从左到右阅读；这里会有一个横向浏览最佳区域的数值，如digg选用的页面宽度为1000px左右，每行展示3个item，用户屏幕的分辨率变大后，这两个数值是否应该继续增加，增加到什么程度，是人眼获取信息效率最高的？这个疑问我还没有找到相应的理论或实验支撑，后续再查找资料。
纵向视觉流引导用户视线从上到下浏览，由于眼睛纵向的运动方式需要瞳孔不断对焦，当纵向扫视页面模块时效率和横向浏览相差不大，但阅读细节时效率会变低，如纵向排列的文字，更适用于需要逐字阅读的古诗古文；
下图是将原来横向视觉流的digg首页的排版调整后，变成了纵向视觉流，除了大图，用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。
网页界面的纵向高度限制比横向小，因为用户习惯上下滚动来浏览更多信息，当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息；如下图facebook日历界面，时间轴横向排列时，由于宽度受限，需要横向切换或滚动条来查看更多日期：
将时间轴方向调整为纵向，使得用户能通过上下滚动更高效查看当月所有日期。
斜线视觉流能营造运动感和速度感，但由于角度倾斜使文字认知上会有一定困难，大量文字信息排列不适合这种视觉流，常用于设计中的点缀或本身信息量比较少的界面，如下图的健身俱乐部海报；
还有网页界面上小范围的斜线视觉流，来体现运动感。
曲线视觉流，用户视线会形成个性化的曲线，具有律动和活泼感，这种类型由于眼动幅度较大，长时间大量的运用会产生视觉疲劳，所以不适合大段文字使用，一般会结合图形做曲线视觉流，让用户的视线在图像区域稍作停留；
如下图在曲线视觉流中配上图片，让视线在图片这个节点上稍作停留并浏览这个节点的内容，然后继续延曲线浏览。
视觉型网页设计 第5篇
色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;
从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。
视觉型网页设计 第6篇
如下图所示，导向性视觉流会设计一个诱导元素吸引用户注意，再通过诱导元素注意到目标信息；常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系，纯诱导元素不宜太强，否则会削弱目标信息的传播力度；如果能在诱导元素中包含部分目标信息，可以增加信息传达的有效性。
如下图管子里的红色液体是运动的，吸引用户沿着它运动的方向到达目标消息
前面讲到的内容形式，从图片或符号引导到下一个视觉焦点，从视觉流角度也是导向性类型，下面这两个例子就是在页面局部使用了导向性视觉流
视觉型网页设计 第7篇
不同类型用户会在不同阶段产生行为，我们要判断这些行为最终导向是什么？
比如商品详情页面，有些用户在决定购买之前，会查看用户评价、历史交易等内容，但这些查看的行为，最终是帮助用户判断是否购买这个商品，所以核心行为是最终导向的购买。
有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，如下图：
视觉在进行细节设计前，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交互和业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。
视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：
位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：
视觉型网页设计 第8篇
除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关，如图中的猫头鹰，和它生活的环境相关，毛色都进化成类似的色彩，以起到隐藏保护的作用；相反，颜色反差大就特别容易引起注视，如下黄色郁金香中独特的红色。
前面讲到的大小、远近都是体现能反差的视觉手段，色彩上的反差主要通过以下方法达到效果：
色相反差，下图中主色调为蓝色，蓝色行动点和整体颜色一致，层级相对较弱，而绿色行动点和蓝色在色相上的反差使得层级变高
但颜色有很多种，如何确定反差的大小？我们可以通过色相环来查看，如下图所示，色相反差强弱取决于色相环上的距离，距离越大对比越强，反之则越弱。
饱和度反差和明度反差比较容易理解，而且他们有数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然，看看具体的实例：如以下导航图，当前的人物icon明度较高，和低明度黑色背景形成高反差而容易先被注视
以下环状饼图，已完成的百分比饱和度高，和总体低饱和度形成对比，相同色相通过饱和度进行对比不仅能拉开差距形成视觉层级，同时视觉效果具有整体性
总结一下上面讲到的视觉表现手法，形成表格方便大家记忆如下：
运用视觉表现手法建立信息层级后，需要设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…，包括页面大模块和模块内的浏览，这些浏览顺序会在页面上形成视觉流；
审视页面视觉流能帮助我们判断用户浏览页面是否顺畅，浏览的顺序是否有规律可循；如果我们的设计不能有效引导用户的视线，用户的浏览更趋向于随机性，就难以将希望表达的信息快速传到到位。
下面的内容主要是介绍比较典型的视觉流及每种类型的特征，包括：
视觉型网页设计 第9篇
图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。
下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。
下图WHAT WE DO位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏览起来会不太顺畅
经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。