网页设计三屏 第1篇
视线开端在页面中部，使中间的元素冲击感最强，信息传达最明确，再形成由中部发散出去的视觉运动。
比如很多汽车网站，中间的主图最能体现信息的核心，通过主图再发散到上方的导航或下方的其他服务入口。
以上介绍的四种视觉流类型是比较典型的，但不代表全部，我们也可以设计出更富创意的视觉流，无论是那种路径，用户浏览是否顺畅，信息是否按照主次传递到位，是我们要一直坚守的目标。
1.项目前期我们需要了解页面营造的氛围，内容定位；和交互一起分析信息的优先级，用户的核心行为；前期的准备能帮助视觉设计过程不偏离方向
2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级
3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。
我们有意识的分析用户关注的信息优先级，并通过视觉表现出来，是视觉设计师这个岗位很重要的职责，希望梳理的这些方法能帮助我们将这份职责做的更好，我也乐在其中，与大家共勉！
================关于优设网================_优设网_是一个分享网页设计、无线端设计以及PS教程的干货网站。【特色推荐】PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。设计微博：拥有粉丝量63万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。设计导航：全球顶尖设计网站推荐，设计师必备导航：———————————————————–想在手机上、被窝里获取设计教程、经验分享和各种意想不到的_福利_吗？添加 优秀网页设计 微信号：【youshege】优设哥的全拼您也可以通过扫描下方二维码快速添加：
网页设计三屏 第2篇
不同类型用户会在不同阶段产生行为，我们要判断这些行为最终导向是什么？
比如商品详情页面，有些用户在决定购买之前，会查看用户评价、历史交易等内容，但这些查看的行为，最终是帮助用户判断是否购买这个商品，所以核心行为是最终导向的购买。
有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，如下图：
视觉在进行细节设计前，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交互和业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。
视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：
位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：
网页设计三屏 第3篇
想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：
模糊元素：
图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰
降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离
增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。
网页设计三屏 第4篇
色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;
从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。
网页设计三屏 第5篇
如下图所示，导向性视觉流会设计一个诱导元素吸引用户注意，再通过诱导元素注意到目标信息；常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系，纯诱导元素不宜太强，否则会削弱目标信息的传播力度；如果能在诱导元素中包含部分目标信息，可以增加信息传达的有效性。
如下图管子里的红色液体是运动的，吸引用户沿着它运动的方向到达目标消息
前面讲到的内容形式，从图片或符号引导到下一个视觉焦点，从视觉流角度也是导向性类型，下面这两个例子就是在页面局部使用了导向性视觉流
网页设计三屏 第6篇
图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。
下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。
下图WHAT WE DO位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏览起来会不太顺畅
经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。