1. 网站设计应该注意哪些视觉效果
企业网站建设是一个庞大的系统工程，网页则是其基本元素。设计具有视觉审美的网页，进行网页视觉创意，是现代企业网站视觉设计的必然要求。
1．技艺融合
技是技术，艺是指艺术。二者要紧密结合，互相扶持。可以说，企业网站的视觉设计是否新颖决定了网民看到网站时所驻足的时间，在这个基础上网站的内容才能进一步吸引网民。因此，企业应当首先认识到网站界面设计与创意是企业网站建设的重要组成部分。同时，技术是实现网页视觉效果的基础。设计者应主动掌握现有的各种网络技术规律，注重技术和艺术的紧密结合，穷尽技术之长，实现艺术想象，达到理想的视觉效果。
2．完善版面设计
网页视觉设计特别讲究编排和布局，国外有设计者认为网站界面设计的95％是排版。优秀的版面设计通过文字图形的空间组合，表达出和谐与美，能够优化阅读，准确传递信息，使网站具有亲和力。我们可以将平面构成中的形式美法则，如平衡、对比、调和、节奏等原则灵活应用于网站的版面设计中，使纷杂的页面更具美感、重点突出，更加有条理。
3．色彩的和谐运用
色彩是艺术表现的视觉要素之一。浏览者在浏览网页时，第一印象就是页面的色彩，页面色彩直接影响浏览者的阅读兴趣。在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配。在企业网站的色彩设计中，我们可以根据企业CI（企业形象识别系统）中VI（企业视觉识别系统）进行标准色的选取运用，使企业整体化统一。如麦当劳的设计中，我们常可以看到标准的红、黄色一直贯穿到企业的整体设计中。
一般而言，我们应当先确立一种主色调，以利于网站主题的表现与气氛的烘托。然后确定和主色调类似色的辅助色，这样有利于界面风格的统一。最后还可以选择小面积的对比色，从而实现“大面积协调’／小面积对比”。这样，网站在统一协调的基础上会显得更加活泼、生动。网站界面色彩主色调太多会显得花哨，只有同类色而没有对比色，网站界面色彩则显得单调。总之，应当将色彩构成、色彩情感等知识灵活应用于网站界面设计之中。
4．媒体综合
视觉设计者应综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息的要求，这也是未来网页艺术设计的发展方向。当然我们应尽量避免使用过多过大的图片、动画等，减少过度的装饰。
5．视觉设计的统一
视觉设计的最终目的不是单纯追求视觉感染力而是更好地表现网 页的主题因此各方面的统一非常重要。首先，视觉设计要与主题相统一，视觉设计必须服务于网页主题的表达。其次，内容与形式要统一，即整体视觉印象和内容意境的统一。视觉设计中应利用各组成部分在内 容上的内在联系和表现形式上相呼应，并注意整体设计风格的一致性，实现视觉上和心理上的连贯。
总之，网页的视觉设计决不是只凭感觉，必须遵循其内在的规律和基本原则。一个成功的网页视觉设计必须做到艺术与技术的完美统一，它涉及到视听元素的处理及网页整体布局的规划设计等多项内容。它以主题思想和诉求鲜明突出、形式与内容相统一、强调网站中各相关页面的整体统一和谐为审美原则。
2. 如何让页面有层次感
1.设计内容有主次之分
网页上的各项元素都有自己的作用意义，我们在做网页层次时首先考虑画面中各元素作用，根据网页元素的不同角色确定优先级，有空间感和距离感以及有虚实之分并且光影层次清晰，然后进行视觉层次的构建。简单举例，以淘宝图片为主，首先图片展示出来的是商品，然后背景会搭配使用场景或者突出重点的背景图片，其他还会增加文章说明等，在设计时要有重点分主次。
2.网页画面的远近关系
网页图片设置上由近及远，让画面用空间感，有深度，用背景图片等衬托出层次感，然后在图片基础上突出重点，可以使页面看起来更透气，也能够通过场景来传递出很强的代入感，但注意画面搭配。
3.注意色彩的适用
网页设计时注意色彩搭配，色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。背景色对于网页整体风格基调也有明显作用。例如，淡蓝色，一般代表平静祥和，适合一些日常事物管理类软件选择。色彩模块的适用及应用，在网页设计界面元素的逻辑关系中发挥着举足轻重的作用。
4.善用对比增加页面层次
UI设计师在页面设计时利用内容中的差异、对立等方面结合比较，带入画面做出比较，形成强烈的视觉冲击。用对比给用户增加画面层次感，同样用对比给内容做出更明显的比较。设计元素上可以用色彩、明暗、间距、尺寸等做出差异感将页面整体提升层次感。
5.注意网站功能
UI设计师初期常常出现的错误就是忽略了网站功能，为了设计出更优秀的画面却忽略了网站的自身左右。UI设计师在设计网页过程中首先要了解的就是功能，整体画面突出功能来展现出层次感也是网页设计中突出层次感的重要方法之一，设计与功能相结合，功能融入到设计当中然后突出整体重点层次感自然展现出来。
注意事项
以上列举了几点网页设计如何突出层次感，应用过程中一定要结合自身网站内容去选择方法，不要都用上也不要乱用找适合网站的方法突出自己的设计即可。
3. 如何设计网站——对Web设计的一点总结
在最近的工作中，遇到了导航的问题，无意中发现了找出了收藏已久的《别让我思考》，花了一周时间读了两遍，才清楚的理解导航对于一个产品的重要作用。也更加印证了产品圈中将用户当做小白的理论，其实并不是在产品设计中将一切都为用户标注出来，而是让用户能够通过自己的方式更加轻松的使用产品，这样的产品对于用户来说必定是不言而喻的，也就是主题“别让我思考”。下面是这次读书的笔记，虽然这本书给我很大的启发，但是一切需要归于实践，在实践中验证这个理论。
一、指导原则
第一章：别让我思考---可用性第一定律
web设计的终极法则：别让我思考，即看到一个界面应该是不言而喻，一目了然，自我解释。
强迫我们思考的地方：（1）酷炫的名字或技术名词。（2）看起来不太明显的按钮和链接
当思考时，需要权衡，权衡应该更倾向于“显而易见”，而不行hi需要额外的思考
每个需要思考的地方会加重用户的认知负担，把用户的注意力从要完成的任务上拉开
访问网站时不需要思考的事都有什么？
我在什么位置？
该从哪里开始？
他们把xx放在什么地方？
这个项目上最重要的是什么？
为什么他们给它取这个名字？
如果做不到让一个页面不言而喻，那么至少应该让它自我解释
当浏览网站遇到问题时，用户会认为是自己的错误，而不会责怪网站
如果要让网页有效，它们必须在用户第一眼看到时将自己展示出来，而要做到这一点，最好的方法是创建不言而喻的网页，或者至少是自我解释。
第二章：我们实际上是如何使用Web的---扫描，满意即可，勉强应付
事实1--我们不是阅读，而是扫描，寻找能吸引用户注意力的文字或词语（除新闻故事，报告，产品描述界面）
为什么扫描？
（1）我们总是处于忙碌之中---使用web是想节约时间
（2）我们知道自己不必阅读所有内容---寻找感兴趣或手头的任务相关的内容
（3）我们善于扫描---生活习惯，找感兴趣的内容
用户在网页上看到什么却决于想看到什么，通常为页面的一小部分内容
吸引注意力的文字和短语是什么？
（1）与手头任务有关的
（2）我们当前或接下来的个人兴趣
事实2---我们不作最佳选择，而是满意即可
用户大多数时间不会选择最佳选项，而是选择第一个合理的选项---满意策略
为什么不寻找最佳选择？
（1）我们总是处于忙碌之中---最佳策略时间久，满意策略效率高
（2）如果猜错了，也不会产生什么严重的后果
（3）对选择进行权衡并不会改善我们的机会
（4）猜测更有意思---猜测不会像权衡那么累，猜对了，可能看到意外的内容
事实3---我们不是追根究底，而是勉强应付
勉强应付不仅限于初学者，技术专家也会在理解事物的工作原理上有着惊人的误会
原因是什么？
（1）这对我们来说并不重要---明白事物工作机制并不重要
（2）如果发现某个事物能用，我们会一直使用它---如果遇到更好的方法，会用好的方法，但是很少主动寻找更好的方法
如果用户明白网站，而不是勉强应付的作用
（1）用户更容易找到自己需要的东西，对用户和网站都好
（2）用户更容易理解你的网站有哪些服务---不仅仅是用户偶然看到的
（3）引导用户看到你希望他们看到的内容（网站上）
（4）在你的网站上，用户会感到掌控全局，并逐渐成为老用户
第三章：广告牌设计101法则---为扫描设计，不为阅读设计
吸引用户的5个重要方面（为下方2-6部分内容）
在每个页面上建立清楚的视觉层次
尽量利用习惯用法
把页面划分成明确定义的区域
明显标识可以点击的地方
最大限度降低干扰
建立清楚的视觉层次
视觉层次清楚的页面的特点
（1）越重要的部分越突出
（2）逻辑上相关的部分在视觉上也相关
（3）逻辑上包含的部分在视觉上进行嵌套
一个页面没有清楚的视觉层次，用户会降低扫描页面的速度，会寻找关键的文字和短语，然后拼凑出感觉重要的内容和内容的组织方式，这样会增加工作量
习惯用法是你的好帮手
web的习惯用法
（1）它们非常有用---适当使用习惯用法，让用户访问更容易，减少额外学习工作原理ide成本
（2）设计师通常不愿意利用它们
如果不打算使用习惯用法，需要的做法：
a.必须确定你在使用一种同样清楚、同样不言而喻，没有学习曲线的方法
b.带来很大的价值
把页面划分成明确定义的区域
明显标识可以点击的地方
降低视觉噪声
噪声的分类
（1）眼花缭乱---所有的信息都想吸引用户的目光，没有突出点
（2）背景噪声---页面没有一个地方会造成过分干扰，但是这些很小的噪声太多会惹人厌烦
第四章：动物、植物、无机物---为什么用户喜欢无需思考的选择
真正的问题不是到达目标之前要点击的次数，而是每次点击有多难，需要多少思考，多大的不确定性来判断自己是否在进行正确的选择
关键：如果用户需要一直在网络上进行选择，那么让这些选择变得无需思考是让一个网站容易使用的原因
第五章：省略不必要的文字---不要在Web上写作的艺术
有力的文字都很简练。句子里不应该有多余的文字，段落中不应该有多余的句子
去掉没人看的文字的优点有哪些？
可以降低页面的噪声
让有用的内容更加突出
让页面简洁，让用户在每个页面上以言就能看见更多的内容，而不必滚动屏幕
需要去掉的文字是欢迎词和指示说明
二、必须正确处理的几个方面
第六章：街头指示牌和面包屑---设计导航
如果在网站上找不到方向、人们不会使用你的网站
网络导航101法则
你通常是为了寻找某个目标
你会决定先询问还是先浏览
如果选择刘兰兰，你将通过标志的引导再层次结构中穿行
最后，如果找不到想要的东西，你会离开
web与生活从空间角度来看的不同点
感觉不到大小
感觉不到方向
感觉不到位置
用户使用Web导航是因为需要得知自己当前的位置
导航的用途---显而易见的用途
帮助我们找到想要的任何东西
告诉我们现在身处何处
导航给了用户一些固定的感觉，让用户感到脚踏实地
导航的其他用途---被忽视的用途
导航告诉我们当前的位置---告诉网站有些什么，导航表现了内容，导航站点比告诉我们位置更重要
导航告诉我们如何使用网站---从哪里开始，如何进行选择
导航给了用户对网站建造者信心
Web导航的习惯用法
网站ID
栏目
实用工具
指示器（指明用户当前位置）
下一级栏目
页面名称
页面导航（当前这一层的内容）
小字体版的底端导航
持久导航（或全局导航）：来描述出现在网站每个页面的一组导航元素
持久导航应在在整个网站保持一致，使用户只需要了解一次就够了，减少学习成本
持久导航的五个元素
站点ID
回首页的方式（Home）
搜索的方式
栏目
实用工具
主页和表单不需要使用持久导航
主页：承担一些不同的任务，遵守一些不同的承诺，所以不需要使用持久导航
表单：在填写表单的页面，持久导航会产生干扰
如何设计Web导航各元素（表格下方为示例-亚马逊）
导航元素名称
细节点
站点ID
1.在Web上需要在每个页面都能看到网站的名称---页面ID，通常在左上或靠近左上
2.网站ID代表整个网站，也就是说在当前站点结构中层次最高
3.站点ID如何出现在页面可视层次的首要位置
（1）让网站站点成为本页最显眼的内容
（2）让网站ID涵盖页面所有其他元素
4.站点ID需看起来像一个站点ID---例如logo
栏目
1.栏目（或称主导航条）是到达站点主要栏目的链接，结构的最顶层
2.大部分情况，持久导航也包括二级导航（当前栏目的下一级栏目清单）的显示位置
实用工具
实用工具是到达网站中不属于内容层次的重要元素的链接
返回主页Home
1.返回主页（Home）的按钮需要始终可见，给用户一种随时可以从新开始的感觉
2.Home的用法
（1）在栏目或使用工具清单中包含一个回到主页的链接
（2）在主页之外的站点ID上小心地加上Home的字样，让用户知道点击它
搜索
1.避免混淆的方法
（1）花哨的用字
（2）指示说明
（3）选项---将选项写下来
2.需要对低层次导航给予足够的重视（三级导航）
页面名称
1.页面名称的注意事项
（1）每个页面都需要一个名称
（2）页面名称要出现在合适的位置
（3）名称引人注目
（4）名称要和点击的链接一致
指示器
1.如何标记当前位置
（1）在旁边放置一个指示器
（2）改变文字的颜色
（3）使用粗体
（4）按钮反白
（5）改变按钮的颜色
2.告诉用户你所在的站点层级结构的前后关系（在网页中的位置）
层级菜单
1.告诉用户从主页到当前位置的路径（如何到达）
2.层级导航的最佳实践方式
（1）将它们放在最顶端
（2）使用“>”对层级进行分隔
（3）使用小字体（表明是一种补充机制）
（4）使用了文字“你在这里”
（5）将最后一个元素加粗
（6）不需要把它们用作页面名称
标签
1.为什么标签做导航是一个上佳的选择
（1）它们不言而喻
（2）它们很难错过（视觉上与众不同）
（3）它们灵活
（4）它们暗示了一个物理的空间
2.注意事项
（1）正确绘制---激活的标签页在其他标签页之前
（2）颜色编码---提高关注度
示例
如何评判一个网站设计的好
这是什么网站？（站点ID）
我在哪个网页上？（网页名称）
这个网站的主要栏目有哪些？（栏目清单）
在这个层上我有哪些选择？（本页导航）
我在导航系统的什么位置？（“你在这里”的指示器）
我怎么搜索？（搜索栏）
第七章：首先要承认，主页不由你控制---设计主页
主页主要完成的任务
站点的标识和使命---告诉用户这是什么网站，做什么的
站点层次---提供服务的概貌，包括内容，功能，服务是如何组织
搜索
导读---需要有内容推介，功能推介
友情链接---预留空间放置广告，交叉推广，品牌合作
快捷方式---最常访问的内容片段值得在网页上放置链接
注册
主页需要满足的抽象目标
让用户看到自己在寻找东西---让用于想要的任何东西显而易见
......还有我没有寻找的---让用户看到一些精彩的内容，就算这些内容用户没有寻找
告诉用户从哪开始
建立可信度和信任感
主页的常见约束有哪些
每个人都想占一席之地---推介内容过多
想要参与的人太多
一个尺寸要适合所有的人---普遍适用于大众
主页需要传达整体形象，让用户一眼就能清楚你的网站是说什么的
如何向用户传达网页的整体形象
口号---靠近站点ID的地方，整个网站的描述
欢迎广告---网站的简要描述，在主页的首要位置，不需要滚动屏幕就能看到
传达信息的原则
需要多大空间就使用多大空间
但也不要使用过多的空间---保持简短
不要把实名陈述当做欢迎广告
最后的是进行测试
口号的注意事项
好的口号
不好的口号
清楚、言之有物
含混不清
长度适中，易让用户领会表达思想
太笼统
表达出网站特点和显而易见的好处
把口号（传达某种价值主张）和宗旨（表达某种指导原则，某个目标或某个理想）混淆起来
有个性、生动、有时候很俏皮
由于主页独特的职责，通常不必使用持久导航，它们之间的差异
栏目描述---主页需要尽可能多的表现网页内容，其他页面不需要
不同的方向---主页和其他页面布局不同，主页通常用
用于表示的空间更多---主页上站点ID比较大，口号留有空间也较大
让栏目的名称保持不变，同样的顺序、同样的文字和同样的分组，尽可能多地保持视觉提示，同样的字体，颜色和大小写
下拉框存在的问题
用户必须将它们找出来---必须找到下拉框，才能看到下拉列表
它们难以扫描
不好控制---下拉列表收缩速度难以控制
下拉框对于组织按照字母顺序排列的项目比较有效
下拉框的优点是节约空间
任何共享的资源（共有区域）都会因为过度使用而遭到破坏---在主页上增加更多的项目所得到的的和付出的并不一致，虽然给推荐栏目巨大的访问量，但是让主页变得混乱，所遭受的损失将由所有栏目承担
三、确定你没有做错的几件事
第八章：农场主和牧羊人应该是朋友---为什么Web设计团队讨论可用性是在浪费时间，如何避免这种情况
由于各自的职位不同，Web团队成员对于好的网站设计的看法不同
通过测试将讨论对错转移到什么有效、什么无效上，测试会让我们看到用户的动机、理解和反应的不同，从而不再让我们坚持用户和我们的想法相同
第九章：一天10美分的可用性测试---让测试简单，这样你能进行充分的测试
焦点小组并不是可用行测试，焦点小组是在项目早期阶段，用来收集用户的意见和感觉
可用性测试主要是希望得到用户是否知道该网站是做什么的，并且能用它完成一项典型任务
测试的作用是什么
如果想建立一个优秀的网站，一定要测试
测试一个用户比不做测试好一倍
在项目中，在点测试一位用户好过最后测试50位用户
人们对招募用户代表的重要性评估过高
测试的关键不是要证明什么或者反驳什么，而是了解你的判断力
测试是一个迭代的过程
没有什么比现场用户的反应更重要
寻找能够反应目标群体的测试用户，但别裹足不前
寻找的测试用户可以和目标群体有差别的理由是什么
差别的原因
例外
实际上，我们都是初学者
如果你的网站几乎只由某一类用户使用，且招募并不难，那就去招募
设计出的网站只有你的目标群体能使用，这通常并不是一个好主意
如果你的目标群体分为几个明显阵营，且各阵营有着完全不同的需求，那你至少要从每个阵营选择用户进行一次测试
专家通常不会介意对初学者来说很清楚的界面
如果使用你的网站需要专业的领域知识，那么你需要在该领域中招募有专业知识的用户
进行招募，需要注意的问题是什么
提供合理的激励
邀请要简单
避免对网站（或网站背后的组织结构）进行预先讨论
别不好意思请朋友帮忙
测试中遇到的问题
用户不清楚概念
用户找不到自己想要的字眼---网站用来组织内容的分类不符合用户习惯；分类符合习惯但是没有使用他们期望的名字
内容太多---减少页面上的干扰；将需要看到的内容涉及的更加醒目
一些关于问题分类指南
问题
行为（用户/主持）说明
正确解决方式
忽略Kayak（皮划艇）问题
1.出现问题的人马上发现自己偏离了原来的主题
2.用户尽量回到原来的方向而不需要帮助
3.这种情况并没有扰乱用户的活动
可以忽略
抵制添加的冲动
增加一些内容，注释，指导说明
去除某个让人混淆的内容
不要太看重用户对新功能的要求
抓住能够的着的果子
1.恍然大悟型
2.便宜型
尽量实现变更
进行变更
只要你进行改变，就要仔细思考它将会影响哪些内容，当你把某些部分调整的更为突出时，想想是不是把其他内容的重要性降低了
四、大的方面和外界影响
第十章：可用性是基本礼貌---为什么你的网站应该让人尊敬
降低好感度的方式
隐藏我想要的信息
因为没有按照你们的方式行事而惩罚我
向我询问不必要的信息
敷衍我，欺骗我
给我设置障碍
你的网站看上去不专业
提高好感度的方式
知道用户在你的网站上想做什么，并让网站明白简易
告诉用户，他们想知道的
尽量减少步骤
花点心思
（1）保证网站准确有用
（2）产生解决我的问题所需要的信息
（3）网站用清楚的方式表达
（4）组织良好，用户可以轻松找到解决方案
知道用户有哪些疑问，并给予解答
为用户提供协助
容易从错误中恢复
如果不确定，记得道歉
总结
这本书主要讲了Web设计的一些核心的原则，以及用户在使用Web时的心理，并且基于用户的信息，来设计Web的导航和主页。并且结合实践，在项目中需要不断的进行可行性测试迭代，从而使Web可行。这样的网站才是一个成功的网站，在符合用户的习惯的基础上，让用户能够自行的解决问题，从而达到网站和用户的目的。
资源类：
大家都知道，学习本身是一个特别耗费时间和财力的事情，但是为了自身发展，却不得不学习，而且现在对于职业教育的课程特别贵，并且专业书籍也是非常贵的。虽然说是投资自己，但是对于生活来说还是较大的开销，因此算是众筹了，毕竟一个课程可能动则几千块，但是我并不贪心，所以分享的课程的价格很低，不会超过5块钱吧，毕竟大家都是为了生活，只希望弥补一点生活压力吧，各位加油吧
链接：在线教育视频课（产品设计）
https://pan..com/s/1CqvJixlcarLewUcFYCcJWwpan..com
提取码：afvs
俞军产品方法论：
链接：
https://pan..com/s/1ws7N0ZrcuiY_GRZ8710zVQ
提取码：lizk
梁宁产品思维30讲：
链接：
https://pan..com/s/1KtdGjzV_cAWN8xlrMX7ENg
提取码：tr7i
增长黑客：
链接：
https://pan..com/s/1T5lIjrpCu7oc5hYF1hpmag
提取码：dpm3
4. 设计干货～视觉表现建立信息层级【深度好文】
长文预警，建议先收藏后看！
作为视觉设计师，我们的作用除了最基本的满足用户审美需求，还会有品牌传达，信息传达，功能传达等，其中想要信息有效的传达给用户，需要我们建立信息层级，而不是一股脑的丢给用户自己理解，要做到这点有哪些视觉方法，这些方法的背后是否有理论依据，是本文的主题。
首先看下面两张图，左图为相机拍摄的效果，右图为人眼不移动时看到的效果，可以发现人眼对信息的获取并不是一次性完成的，它不能同时产生多个焦点从而把视线停留在更多的地方，设计师需要考虑的是让用户通过眼球移动，按照一定的顺序获取信息，帮助获取和理解的过程高效自然。
这个设计方法希望解决的主要是两个问题：
1、用户获取和理解信息的效率
建立良好的信息层级，能让用户在有限的时间里，快速获取和理解有用、感兴趣的信息，并产生下一步行为；
2、设计师的专业性
设计师有意识的分析信息优先级，了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据，不仅仅凭感觉做设计。
一、前期了解&分析
在开始设计前，除了对项目本身的背景目标有所了解外，视觉设计师针对具体的页面也需要了解一些内容以帮助后面的设计有指导方向，包括页面定位、氛围营造、信息优先级和用户核心行为。
1.1、页面定位是帮助分析页面信息优先级、核心行为的前提
通常有：
· 用户是谁
· 用户来自哪里，即从什么渠道来到该页面
· 页面内容定位，提供什么、不提供什么
· 页面作用
举个例子：
我们在设计采购直达市场新首页时，交互通过对页面的用户对服务的熟知度进行分析，确定首页的最核心目标用户是新买家；页面内容定位是展示市场的价值点，用户产生的数据让新买家对采购直达形成品牌的认知；
1.2、了解页面需要营造的氛围，能帮助我们判断哪些元素能帮助达到目标，氛围可以是内容本身，也可以通过视觉元素设计来营造，但必须注意氛围营造不应强过用户关注的内容本身
氛围可能有：
· 新年主题大促
· 低折扣
· 信息鲜活
· 用户活跃等等
以下是大促活动正式页面，左图延续了预热期嘉年华的氛围，但到活动开始阶段氛围已经不是重点，用户更关心商品及折扣本身，右图为调整后将氛围的营造和类目图片相结合，很好的解决了氛围和内容的关系问题。
1.3、分析信息优先级
1） 一级信息吸引用户 ：假设用户只会在这个页面停留3-5秒，最能够吸引用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示
2） 二级信息帮助理解 ：有了一级信息的吸引，用户进一步了解内容而可能停留3-5分钟，这时展示二级信息即提炼的精华内容，帮助用户在尽量短时间内理解信息
3） 三级信息详细了解 ：前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息量会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转
1.4、分析用户核心行为
不同类型用户会在不同阶段产生行为，我们要判断这些行为最终导向是什么？
比如商品详情页面，有些用户在决定购买之前，会查看用户评价、历史交易等内容，但这些查看的行为，最终是帮助用户判断是否购买这个商品，所以核心行为是最终导向的购买。
有了这些分析，交互产出物文档中会给予大模块的信息优先级和用户行为优先级，如下图
视觉在进行细节设计前，需要对每个模块内的具体内容进行优先级的分析并产出如下示意图并和交互和业务方确认，这些都是帮助视觉设计过程不偏离方向的重要产出物。
二、建立信息层级的视觉方法
视觉表现手法主要有以下几种元素，实际设计中为了让效果拉开主次，可能会同时使用多种方法以达到更好的效果：
· 位置
· 大小
· 距离
· 内容形式
· 色彩
2.1、位置
位置是在设计开始就会考虑的元素，人眼观看事物时，总会遵循一些特定的规律，设计上遵循这些规律，能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关：
1）当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。例如，网站logo、商品名、主题等重要信息，一般放在最佳视域内。当然，这种划分也受文化因素的影响，比如阿拉伯文字是从右向左书写的，这时最佳视域就是右上部。下图是摘自摘自张帆 罗琦 宫晓东的《网页界面设计艺术教程》对一个屏幕划分后，用户对不同位置不同的关注度差别：
2）第二条规律是眼睛沿水平方向运动比沿垂直方向运动快而且不易疲劳，一般先看到水平方向的物体，后看到垂直方向的物体。如下图所示，左右的关注度差别要小于上下关注度差别，如想要体现并列的关系，左右排列会更合适；而如果要拉开差距，仅通过位置来实现，上下排列更容易达到目标。
举个例子：如下图时代周刊网站首页，左侧大图是当天的焦点新闻，在信息层级上为一级信息，视觉表现上不仅面积大、内容形式用大图，位置也放在优势区域，可能98%的用户会先关注到这个区域；
假如对设计稿的位置做调整如下，如果焦点新闻图片是第一优先级的信息，虽然它是大图的形式，占的面积也够大，但由于位置不在最佳视域，会被“Latest Headlines”分散一部分视线，可能只有60%的用户先看到右侧了；如果信息有主次，就要让视觉表现上拉开差距，而不是一个接近均等的局面。
3）用户优先关注上部，在网页设计中有首屏的概念，首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高
由于用户使用的屏幕分辨率不同造成首屏的高度会有差别，根据我们网站的数据，目前分辨率高度为768占多数，所以设计时会以768高度为基准，去掉浏览器本身的菜单等占用的高度，实际展示给用户的第一屏平均为600px，这个数据会根据以后目标用户的分辨率变化做相应的调整，我们在设计时可用这个数值作为首屏的参考线。
2.2、大小
在确定了模块的位置后，我们会考虑给这模块多大的地盘，大小会很直观反映信息的重要等级。
有个体育海报设计的案例，涉及到四种球类运动包括足球、高尔夫球、棒球、篮球，如果按照实际大小设计会让篮球和足球显得更重要，为了体现体育的平等性，设计上将球的大小做了调整。
Giles Colborne的《简约至上》书中的结论可以指导我们通过大小拉开差距：
1）重要的元素要大一些，即使比例失调也可以考虑
2）要想办法表现出差距；如果一个元素的重要性是2，那就把它的大小做成4
还是以时代周刊首页为例，目前的设计左侧的焦点新闻图占的面积和中间新闻图对比拉开了差距，使得用户容易先关注到一级信息而且不容易被周边干扰；
我们对两个新闻图片的面积进行对比可以看到差距有4倍左右；
假如对界面调整如下：焦点新闻图缩小两倍后，可以看出视觉层级的区分就不明显了。
除了元素本身所占的面积会影响视觉层级，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用；
下图是一个模特公司的网站，首页上随机出现模特的照片包括面部和半身照片，放大脸部特征后的照片保证了用户能理解这是一个模特的形象，使得用户会优先关注细节放大的照片。
2.3、距离
前面讲到的将元素的细节放大，眼睛会感受离它更近而被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了大小，还有其他视觉手法如下：
1）拉远三维距离
想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：
· 模糊元素，下图背景的人物被模糊后，使它和两个行动点以及右侧的图标不在一个平面上，离眼睛更远，用户在进行行动点和文字识别时也不会被模糊的背景所干扰
· 降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离
· 增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离，如下图希望突出TV购时，其他四个模块降低透明度后由于本身色彩比较丰富而没有明显拉开差距，通过加上灰色的半透明图层后，TV购以外的模块自然的退到视线后面了。
2）拉近三维距离
· 增加投影是最常用到的让元素看起来和其他内容不在同一平面的视觉手法，通常像弹出框、鼠标移上后出现的浮层等由于要压在其他信息之上，增加投影能帮助用户聚焦在带投影的模块而不受下面信息的干扰
3）除了三维，二维距离对视觉层级也有影响，根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体；人眼对距离临近的信息更容易先去关注，在视觉手法应用上，元素距离上一个焦点近的，视觉层级高。如下图，第一层级的新闻焦点图和右侧的小图片比较临近，视线容易往右上角运动；
对距离做了调整后，虽然中间的小图片本身比文字更吸引人，但由于焦点图下方的标题距离更近而形成整体，视线容易先往下运动。
2.4、内容形式
确定了模块的位置、大小和距离关系后，我们会继续考虑内容的形式包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字；相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆，从视觉层级上，人眼一般会先关注图后关注文字。但仅仅这点还不够，通过图片抓取用户眼球后引导视线到下一个关注点，是设计上更多会考虑的点，概括有以下表现手法：
1）方向性引导
图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动方向、光照方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。
下图假设中间的人物首先吸引了人的视线，为第一层级的信息，由于人眼注视方向为右侧，使得用户关注的下一个目标会转向“coder”文字，为第二层级的信息。
下图WHAT WE DO位置在左上角容易先被关注，同时右侧的人物形象占的篇幅较大也会抢视线，但由于人物运动的方向下没有其他信息，图片没有充分发挥引导的作用，用户浏览起来会不太顺畅
经过调整后的效果，虽然“WHAT WE DO”位置上并不在优势区域，但通过图片方向的引导很自然的让人眼落在文字信息上。
2）符号引导
除了图片，一些符号本身带有顺序和方向性，也能有效引导视线根据符号来浏览，包括阿拉伯数字、字母顺序、时间顺序、箭头等。
下图的排行榜前三名，虽然用户更习惯从左到右阅读，但由于数字的引导，视线也会被影响而按照1>2>3的顺序阅读，如果希望这样的顺序更加明显，可以再通过放大1的图片大小，拉开差距，结合多种视觉方法达到效果。
时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去浏览信息，甚至会打破常规的如从左到右的浏览习惯，如下图虽然2的位置更容易引导用户优先浏览，但时间轴对信息的影响更明显，一般用户会优先查看模块1，再根据时间先后从右向左关注模块2。
2.5、色彩
色彩是影响用户对界面第一印象的重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：
1）先暖色后冷色
色彩的不同色相，对人眼的刺激及产生的反映目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的，如下图，人眼一般会优先看到左侧的图片，这和我们人眼对不同波长的反映有一定关系;
从生理学上讲，人眼晶状体的调节，对于距离的变化是非常精密和灵敏的，我们能判断出物体离我们的远近，但是它有一定的限度，对于波长微小的差异就无法正确调节。眼睛在同一距离观察不同波长的色彩时，波长长的暖色如红、橙等色，在视网膜上形成内侧映像；波长短的冷色如蓝、紫色等，则在视网膜上形成外侧映像。因此，暖色好象在前进，冷色好象在后退。
美国数字营销公司Hubspot曾经做过一场A/B Test，用于测试不同颜色对于用户点击转化造成的差异。 在图中，左右两个测试页面在内容上完全一致，唯一不同的是按钮的颜色，在超过2000人次的样本测试中，最终红色方案的点击率超过绿色方案的点击率足足21%。而在测试之前，大部分的研究员都猜测绿色方案会获得更高的点击，因为就直觉而言，绿色代表着通行、准许通过的意思，而红色则更倾向于警告、阻止意味。
这个测试从一定程度上反映了暖色对用户关注度和行动力的影响，当然并不是说为了提高点击率就要用暖色，具体的色彩风格还是要根据产品定位来设计。
2）先高反差后低反差
除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关，如图中的猫头鹰，和它生活的环境相关，毛色都进化成类似的色彩，以起到隐藏保护的作用；相反，颜色反差大就特别容易引起注视，如下黄色郁金香中独特的红色
前面讲到的大小、远近都是体现能反差的视觉手段，色彩上的反差主要通过以下方法达到效果：
· 色相反差，下图中主色调为蓝色，蓝色行动点和整体颜色一致，层级相对较弱，而绿色行动点和蓝色在色相上的反差使得层级变高
但颜色有很多种，如何确定反差的大小？我们可以通过色相环来查看，如下图所示，色相反差强弱取决于色相环上的距离，距离越大对比越强，反之则越弱。
· 饱和度反差和明度反差比较容易理解，而且他们有数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然，看看具体的实例：如以下导航图，当前的人物icon明度较高，和低明度黑色背景形成高反差而容易先被注视
以下环状饼图，已完成的百分比饱和度高，和总体低饱和度形成对比，相同色相通过饱和度进行对比不仅能拉开差距形成视觉层级，同时视觉效果具有整体性
总结一下上面讲到的视觉表现手法，形成表格方便大家记忆如下：
三、审视页面视觉流
运用视觉表现手法建立信息层级后，需要设计师不断审视用户的浏览顺序是否真如我们期望的层级1到2到3…，包括页面大模块和模块内的浏览，这些浏览顺序会在页面上形成视觉流；
审视页面视觉流能帮助我们判断用户浏览页面是否顺畅，浏览的顺序是否有规律可循；如果我们的设计不能有效引导用户的视线，用户的浏览更趋向于随机性，就难以将希望表达的信息快速传到到位。
下面的内容主要是介绍比较典型的视觉流及每种类型的特征，包括：
· 线性视觉流
· 导向性视觉流
· 跳动性视觉流
· 放射性视觉流
1）线性视觉流
· 横向视觉流引导用户视线从左到右或从右到左视觉流动，是最符合用户视觉习惯的浏览方式，给人稳定可信之感。
如digg.com首页，整体页面和单个模块都是典型的横向视觉流，用户从左到右浏览到边界后，视线回扫到下一行继续从左到右阅读；这里会有一个横向浏览最佳区域的数值，如digg选用的页面宽度为1000px左右，每行展示3个item，用户屏幕的分辨率变大后，这两个数值是否应该继续增加，增加到什么程度，是人眼获取信息效率最高的？这个疑问我还没有找到相应的理论或实验支撑，后续再查找资料。
· 纵向视觉流引导用户视线从上到下浏览，由于眼睛纵向的运动方式需要瞳孔不断对焦，当纵向扫视页面模块时效率和横向浏览相差不大，但阅读细节时效率会变低，如纵向排列的文字，更适用于需要逐字阅读的古诗古文；
下图是将原来横向视觉流的digg首页的排版调整后，变成了纵向视觉流，除了大图，用户会选择三栏的其中一列纵向浏览直到找到某一目标信息后，横向浏览细节。
网页界面的纵向高度限制比横向小，因为用户习惯上下滚动来浏览更多信息，当用户还处于确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息；如下图facebook日历界面，时间轴横向排列时，由于宽度受限，需要横向切换或滚动条来查看更多日期：
将时间轴方向调整为纵向，使得用户能通过上下滚动更高效查看当月所有日期。
· 斜线视觉流能营造运动感和速度感，但由于角度倾斜使文字认知上会有一定困难，大量文字信息排列不适合这种视觉流，常用于设计中的点缀或本身信息量比较少的界面，如下图的健身俱乐部海报；
还有网页界面上小范围的斜线视觉流，来体现运动感。
· 曲线视觉流，用户视线会形成个性化的曲线，具有律动和活泼感，这种类型由于眼动幅度较大，长时间大量的运用会产生视觉疲劳，所以不适合大段文字使用，一般会结合图形做曲线视觉流，让用户的视线在图像区域稍作停留；
如下图在曲线视觉流中配上图片，让视线在图片这个节点上稍作停留并浏览这个节点的内容，然后继续延曲线浏览。
2）导向性视觉流
如下图所示，导向性视觉流会设计一个诱导元素吸引用户注意，再通过诱导元素注意到目标信息；常见的诱导元素可以分为线条、形象包括人物或物品、指示符号如箭头字母等。这种视觉流要把握好诱导元素与目标信息的主次关系，纯诱导元素不宜太强，否则会削弱目标信息的传播力度；如果能在诱导元素中包含部分目标信息，可以增加信息传达的有效性。
如下图管子里的红色液体是运动的，吸引用户沿着它运动的方向到达目标消息
前面讲到的内容形式，从图片或符号引导到下一个视觉焦点，从视觉流角度也是导向性类型，下面这两个例子就是在页面局部使用了导向性视觉流
3）跳动性视觉流
在性质相同或相似的信息中，选择突出或感兴趣的信息之间跳动浏览, 给人一种自主选择的权利，但设计上也可以通过调整元素的强弱，不露痕迹的传递主次。
如前面提过的模特公司网站界面，模特的照片都是同等性质的信息，用户浏览具有一定的随机性，但通过放大和缩小人像同样也传递了主次。
4）放射性视觉流
视线开端在页面中部，使中间的元素冲击感最强，信息传达最明确，再形成由中部发散出去的视觉运动。
比如很多汽车网站，中间的主图最能体现信息的核心，通过主图再发散到上方的导航或下方的其他服务入口。
以上介绍的四种视觉流类型是比较典型的，但不代表全部，我们也可以设计出更富创意的视觉流，无论是那种路径，用户浏览是否顺畅，信息是否按照主次传递到位，是我们要一直坚守的目标。
最后再总结一下：
1.项目前期我们需要了解页面营造的氛围，内容定位；和交互一起分析信息的优先级，用户的核心行为；前期的准备能帮助视觉设计过程不偏离方向
2. 通过位置、大小、距离、内容形式、色彩这些视觉表现方法来建立信息层级
3. 设计过程和结束都要不断审视页面视觉流，看看用户浏览是否顺畅。
我们有意识的分析用户关注的信息优先级，并通过视觉表现出来，是视觉设计师这个岗位很重要的职责，希望梳理的这些方法能帮助我们将这份职责做的更好，我也乐在其中，与大家共勉！
我和朋友做了一款小程序理论坞 · 打造属于你自己的理论库 ；有很多关于交互的术语、心理学、管理学的定律和理论， 微信扫描 下面小程序码快速体验！
5. 优秀的电商网站如何建设
1、站点地图
设计网站地图主要目标是为可以给用户提供良好的浏览使用体验，用户必须始终知道他们所在站点的位置，如果站点太大，理想的是插入一个地图，以便用户更容易找到他们正在寻找的内容。
2、首页简约整洁
网站的主页应立即传达核心信息。毕竟，很少阅读网站上的文字。相反我们快速浏览页面，挑选关键词，句子和图像。
3、价值信息
当用户访问网站时，他们正在寻找他们感兴趣的或有价值的信息。因此，我们必须考虑质量，数量并不是很重要。
4、要标新立异与众不同
就是有一个简单性和独特性，才可以更快地被识别和传达。要避免和其他标志风格相似才会更令人难忘。
5、要有视觉层次感
设计时要考虑视觉层次结构是设计的重要原则，有助于以清晰有效的方式显示您的内容。通过正确使用层次结构，您可以从最重要的部分开始按优先展示给网站访问者。
6、易于阅读
可读性是人们识别词语，句子和短语的难易程度。当您网站的可读性很高时，用户将可以轻松地对其扫描或浏览。
6. 怎么设计官网才能让网站看起来比较有档次
访问者打开网站首先看到的是什么？内容，内容至关重要，每个设计师都希望以最有用，最直观的方式在其网站上展示内容。因此，为你的内容选择布局是尤为重要的。
许多人认为，他网站的Web布局应该是独一无二的，才能满足需要，事实并非如此。
如果你有访问现在流行的网站，你会发现其中有许多网站都使用相似的布局。这不是巧合，也不是出于懒惰，这是因为这些布局具有以下优点：
1.单列
单列布局在一个垂直列中显示主要内容。此类布局可能是该列表中最简单的布局，并且对于用户来说是最容易导航的。访客只需向下滚动即可查看更多内容。
尽管简单，但单列布局在许多网站中还是很受欢迎。手机也对这种布局的普及产生了影响-单列布局非常适合手机。
2.分屏
拆分屏幕（或一个屏幕一分为二）的Web布局非常适合具有两个相同重要性的主要内容的页面。
3.不对称布局
不对称是布局两侧之间缺乏平等性。不对称性是艺术界长期以来最喜欢的技术，最近在创建网站布局时在设计师中变得很流行。
许多人将不对称与不平衡混为一谈，但实际上，不对称的目标是在不可能或不希望对两个部分使用相等的权重时创建一个平衡。使用不对称性可以产生张力和动力，并且不对称性可以通过将用户的注意力集中在单个对象（焦点）上来突出这一点，通过更改每个不对称内容的宽度，比例和颜色，设计人员促使网站保持视觉吸引力。
4.纸牌网格
卡片是存放可点击模块的好布局-它们使设计人员能够以可消化的方式展示大量信息。咬合大小的预览（通常是图像和简短说明）可帮助访问者找到自己喜欢的内容，并通过单击或点击卡片来深入了解细节。
纸牌网格最重要的一点是几乎可以无限操作。网格的大小，间距和列数可以变化，并且卡的样式可以根据屏幕大小而变化（可以重新排列卡以适合任何屏幕）。这就是为什么卡片网格在响应式设计中表现如此出色的原因。
5.盒子
此布局具有一个较大的页眉宽度框和一些较小的框，每个框占据较大框的屏幕空间的一部分。较小的盒子数可以从2到5不等。每个框都可以是一个链接，可链接到更大，更复杂的页面。
6.特色图片
网站布局基于以下想法：在设计中使用图像是销售产品最快的方法。精选图片营造出与访客之间的情感联系-大而粗体的照片或物体插图表达出鲜明的印象，并给人留下深刻的第一印象。
结论
设计网站时，请务必记住内容永远是最重要的。该网站的主要目的仍然是发布易于消化的内容。无论你选择使用哪种网站布局，都必须选择一种能使你的内容脱颖而出的网站。
7. 网站建设如何优化视觉效果来提高用户转化
一、网站的布局要分清主次
在网站建设时我们首先要注意网站的布局，这对于用户体验来说非常重要。主次分明的布局对于帮助用户更加便捷的浏览网站非常有效，用户可以在最短的时间内获取最关键的信息。这样可以收获有效的流量，获取更多的用户线索。
二、注意页面内容相似性
页面的相似性就是在页面设计时，尽量将功能相近的内容放在一起，或是在页面中加入相关的推荐，也可以有效提升用户的使用体验。
这一点已经受到了广泛的运用，在传统的页面设计中，当我们看到一篇高质量的文章时，往往可以在底部发现相关推荐的功能，这一类功能可以吸引用户的注意力，向用户推荐相关的文章，来提升转化率。
三、分层以及配色
让网站充满层次感。一个好的网页要根据网页中不同的元素做好分层，通过色彩以及大小的转变都会让网站充满层次感。在色彩方面可以通过色调的冷暖来进行分层。在大小方面，可以吧重要信息加大加粗字体或是图片尺寸的改变来营造层次分明的感觉。
一个层次感强的网页可以更容易被用户认可，有效提高用户访问量。
四、页面排版
页面排版对于整个网页来说尤为重要，他是将页面中的各种元素通过统一的架构来进行表现。如果网页的排版杂乱无章，就会给用户的浏览带来很大的麻烦。要想给用户带来好的浏览体验，排版必须清晰且突出重点。
8. 如何有效建立视觉层级
为页面，尤其是企业网站落地页，建立清晰的视觉层级可以确保用户在正确的时机看到正确的信息，并且不会因无关或次要的内容而分心。
1. 在正确的时机回答正确的问题
通常来说，用户在查看落地页时会下意识地提出一系列问题。这些问题依次为：
这个页面提供了什么？（价值主张）
对我有什么帮助？（优势）
产品如何运作？（特点）
为什么我要信任此页面？（社会认同）
接下来我该怎么办？（行为召唤）
紧凑的页面布局
F式布局
这个元素是否可以删除？
如果这个元素非常有价值无法删除，我可以隐藏这个元素吗？
是否可以将元素减弱，放在子页面、标签下或者折叠面板中？
因此，页面的视觉层级在一定程度上能够映射用户提出这些问题的顺序是至关重要的。页面内容以正确的结构顺序展示只完成了有效视觉层级的一半，另一个挑战是确保用户看到最关键的屏幕元素。我们可以用多种方式来吸引用户的注意力，单从视觉上来讲包括但不限于：颜色、布局及交互等。
Tips：
（1）颜色——清晰的色彩体系
品牌色：延续品牌视觉感受，固化品牌形象；
转化色：尽量选择与品牌相对的对比色，明显区别于品牌色，常见的转化色为红色、橙色等，这些色彩能够刺激用户进行点击，进行有效的行为召唤。
（2）布局
紧凑的布局更能够牢牢抓住用户视线，有效区域宽度推荐：1180px。
F式布局是一种科学的布局方法，基本原理依据了大量的眼动研究。据此，我们习惯性的把重要元素（诸如品牌logo、导航栏、行为召唤控件）放在左边，而右边一般放置一些关联信息。
（3）交互——友好的体验
Akob Nielsen（雅各布·尼尔森）的十大交互设计原则是广泛的经验法则，而不是特定的可用性指导原则。因此，我们不能把它上升为一种标准，而是应该当做一种经验来学习，然后跟现实中的设计结合来使用。
常用的交互原则为：状态可见、环境贴切、一致性原则、防错及人性化帮助。
2. 简化界面
建议通过三个问题系统地检查落地页上的每个元素。
如果删除，后果是什么？是否会比其他元素造成的认知负担更具破坏性？如果不会，最好删除。
3. 测试你的视觉层级
有一种便捷的方法可以测试用户是否看到了必要的屏幕元素，这种方法叫“五秒测试”，测试过程是向用户展示你的设计，五秒钟后让用户回忆他们记住了什么元素。