网页设计层级梳理 第1篇
如果前面的信息都能处理好的话，那么优先级最低的信息就基本没有什么问题了。对于第四象限里的信息，连同页面辅助性内容都统一采用#999的灰度和12px字号，整个页面看起来会更干净清爽 。如下：
bulk price：关于批发价格信息，直接以灰度处理，没有做过多的变化。
店铺地址：在店铺名称后面有一串店铺地址，属非必要且非重要信息，纯粹是需求需要，所以在设计上也是进行了弱化的灰度处理方式。
通过对信息层级的梳理，整个设计过程都非常顺畅。在没做之前，就基本能够预知哪些信息该如何处理，后面在细节上又进行了微调，下面便是与产品经理确认的最终稿。
最终稿与最初做的版本整体上虽差别不大，但细节上却是千差万别，包括在icon、字号、颜色等方面的处理均有所不同。而且从本质上已经发生了实际的变化，最初的版本是在摸索中做的，主要是凭感觉，没有一定的章法和逻辑，比较缺乏底气，而最终稿是有依据的，每一个细节点都经得起推敲。
两个版本其中有一些不同点，我简单标了几个，大家可以对比下：
下面配图中，最初的版本中的圆圈1-7与最终版本是一一对应的，可以对比看下效果。
1 mouse over to zoom in：关于这个信息，起初觉得用户会去看产品细节，所以用了比较深的颜色，经过信息梳理之后，发现它也并不那么重要，一般如果想看产品细节更多会向下滑动看更多的图片，所以放在了第四象限里，在最终版时都采用了统一的灰度处理。
2 bulk price：起初采用的箭头外面是有个小框的，且查看更多的箭头与这个样式还不一样，总得来说有一点点小复杂，所以在最终版时，把箭头的样式全部进行了统一，只是因功能和层级不同，箭头的颜色和方向做不同的处理而已。
3 shipping：起初设计时物流相关的信息与产品的SKU并没有放在一起，后面在梳理信息层级时， 发现它都是用户在购买产品时需要进行操作的项，所以在最终版的设计时把操作类内容都整体放在了一起。
4 add to wish list：关于收藏夹，会感觉是一个比较重要的功能，所以不管是icon还是文案都用了深一点的颜色，虽然层级上也并不明显，但会影响整个页面信息层次的展示，所以在最终版设计时也做了降级的处理。
5 保障信息：这个信息也是凭个人购物的感觉来做，觉得应该是比较重要的内容，所以起初设计时，采用了较大的块面来展示，实际上这个信息确实重要，但却不是我们平台的优势，而这个保障信息也起不了多大作用，所以在最终版也是做了弱化处理。
6 店铺名称：关于这个信息，最初的设计只是用了普通的黑灰色，但从卖家层面来说，从需求出发，是希望产品详情页能够给卖家店铺引一些流量，但又不能过于明显，还是以产品详情信息的展示为主，所以在最终版设计时就稍微强化了一下，采用深蓝的链接色。
网页设计层级梳理 第2篇
第三象限内容非常多，所以分了4个梯队， 每个梯队的视觉表现也分别有些不同，如下：
产品SKU区域：这一块信息除了button，其它都属第1梯队信息，像shipping / size / quantity / add to wish list 等都属用户在购买之前需要操作的内容，所以用了一个灰度的背景把这部分操作类内容整合在一起。另外由于图片类内容天生自带吸引属性，所以像add to wish list 这种有icon的信息，即把文案弱化一些，像total price这种无icon的信息即加强一些。主要以调整字号的大小来达到相对平衡的效果。
店铺星钻 / 评价：店铺星钻评价等相关信息用的是最普通的黑灰色，但希望可以与店铺名称在层级上持平，所以对字号做了加大加粗的处理，以达到不弱于甚至还强于店铺名称的效果。
visit store：进入店铺是一个行动点，在层级上弱于购买操作，但又强于页面中查看更多的操作，所以在设计上做了中和处理，保留button的形式，但采用灰度设计，使之整体上不强但也不至于太弱，与店铺名称等内容达到一个持平的状态。
3 retum policy：第3梯队的信息处理起来就更容易了，包括面包屑、还有店铺相关的detailed seller ratings等信息，都用了最简单处理手法，颜色为黑灰色，字号为12px。
4 chat now：联系方式在线状态时属第3梯队，离线状态时属第4梯队，在设计上没有做过多的变化，直接灰度展示。
网页设计层级梳理 第3篇
具体要增加哪个呢？是老板要求的？或是客户需要？还是什么其它的原因？感觉都不合适！然后又进行大脑回路。尽可能想象需求方看重什么，回忆工作时的场景，特别是与需求方过设计稿的情况，发现经常会听到：
“这个信息并不是很重要,但要展示”
或是“这个虽然不是产品本身必要的信息，但很重要，要强化”
又或是“这个一般，展不展示都行，你设计的时候自己看吧...”
把以上这些说法梳理总结出来，就是除了重要不重要之外，还有一个便是要不要展示，是否必须展示。
想到这里，我便把重要紧急中的“紧急”调整为“必须”，即重要的必须的要展示的内容，依次类推分别是：重要必须的 / 重要不必须的 / 必须不重要的 / 不重要不必须的。同样也是画一个十字，如下图:
网页设计层级梳理 第4篇
例如：
其中src为属性，=等于号后的称为属性值
属性名=属性值
也可以起名字，类名class
默认情况下一个容器占一整行
想加加颜色即描述容器，用css语言，style=“”；分号表示结束
css一个分号结束一条css语句
width宽度 px为像素的意思
所以html和css一定是放在一起学的。
标签大约有120多个左右，常用的也就20多个左右。
每个标签常用的也就有四五个属性，属性就像每个英雄有四五个技能
查资料 搜W3C，有个w3c教程，自己学。
写样式的方法：
1.行间样式
2.嵌入样式：
通过是
.表示时class名 ，即类名
style后的type可加可不加
通过style标签写在head标签中
3.外联样式
彻底分离，写在CSS文件中
优点：
效率高，同时修改替换
新建：最好与html文件对应
通过link标签，加到head文件中，href中的路径不一定是本地的也可以是在线的。
rel为，type可有可无，herf为链接
标签名前不加. class名前要加.， 语言规范
结构在html中写，样式在css中写
span标签
不会独占一行
br标签代表空的一行
注释c+/
div是块级标签，block 特点： 1.可以定义宽度高度（如果不定义宽度，默认占满顶行） 2.不管多大多小，独占一行
显示属性：
属性的特点不一样，用法也不一样
只要能看到的具体大小的就用块级标签，不能用内联-块级标签
因为块级标签是顶格对齐
而内联标签是文字基线对齐
空隙是内联标签换行空格带来的
那块状标签默认是上下排列的，如何让他们横向排列呢？
.方法叫选择器，通过类名选择选择器，
独占一行指独占父级的一整行
原因：网页布局是分层的，分三层
1.最底层：普通文档流
不加float时，默认为普通文档流
普通文档流中是分块级和内联的。
2.中间层：浮动层
元素浮动以后会提升到浮动层
所有浮动层的元素默认横向排列
CSS的注释 /* */
浮动层中不分块级和内联，都可以定义宽高，都是横向排列。
子级浮动，父级清除浮动，父级不清楚的话，内容会发生重叠。
如何清楚浮动？
1.要恢复父级的高度，手动写。缺点：父级的高度定死了。超过的称为内容溢出，溢出是不会把下面的顶下去的。
溢出隐藏的意思。要算溢出的内容的要给定高度，强制计算父级的高度，强制父级格式化。
3.最高层是定位层
上午最重要的两个点： 1.三个显示属性
2.浮动：子级如何设浮动？重叠后如何清父级浮动？
body不需要清浮动
就近原则
浮动会自动折行，如果遇到高度不一致的话，会卡在那里，就像流水一样卡在那里
外边域
在普通文档流中，margin top和buttom和合并，称为塌陷
在浮动层上，是相加的，不会塌陷
如果没有任何空间中阻隔，会出不去
子级溢出父级
用padding，
overflow：hidden
盒子模型，不仅自己本身有大小宽高，而且外面还有
padding 内边距
border 边界
margin外边距
开发者工具：
user agent stylesheet
用户引擎
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
对应上右下左，谷歌的私有写法，1em在这里等价于16像素
网页设计层级梳理 第5篇
意识到问题之后，便想先把信息层级明确下来再设计。但要怎么明确呢？凭感觉是不行了，因为它太不靠谱，此时此景需要的是理性的分析。
而那段时间，刚好听了一个分享，分享中提到美国第34任总统_会把每天要做的事情按照重要紧急的、重要不紧急的、紧急不重要的、不紧急不重要的这四个象限进行分类，然后一天的工作效率就会提高很多。
对这一点印象很深刻，脑海中会时不时地浮现出来。然后心里想着既然工作可以这样分类，那么产品详情页里众多的信息是否也可以按这4个维度进行分类呢？
想到这里立马就进行了尝试，结果却发现语义不通。
因为我们在设计中，关于某个信息只有重要不重要，没有紧急不紧急一说，若只有重要这一个权重，就无法构成四象限，必须再增加一个才行。
网页设计层级梳理 第6篇
说完之后，提问的同学随即就明白了这样设计的原因，转而与产品经理探讨物流信息属于哪个层级的问题。当然最后仍然是属于最低的一级。但这样至少避免了在设计上进行无谓的讨论，因为有时候表面看起来是设计问题，但实际上却是需求的问题。
评审最后，除了一些视觉上的小点要调整之外，整个过程都十分的顺利，大部分都得益于用“十字法”对信息层级做了梳理。
以上便是在做详情页改版时遇到因信息不明确问题的整个过程，当然还有其它的一些问题，这里就不一一详说了。
后面换了新工作后，某天有个同事跟我说页面信息内容太多，不知该如何设计才能更好看？我心里想这又是一个典型的信息层级没有梳理好却希望通过设计手段去解决的问题。于是我就跟他讲了十字法,把所有信息按照这四个象限进行分类，并同他一起梳理，然后发现其实页面中并不需要展示那么多信息，去掉了将近一半内容，设计起来不但清晰，而且也更容易些。
以上便是用十字法构建设计中的信息层级。当你在设计中不能自拔，或是反复调整，或与产品经理意见不同时，可以思考下是否遇到了信息不明确的问题。若是，便可以用上述方法帮助自己来构建信息层级。
【优设网 原创文章 投稿邮箱：yuan@】
================明星栏目推荐================
优优教程网： 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：
网页设计层级梳理 第7篇
涉及到适配器的问题
根据屏幕的宽度，会调整界面的显示，进行宽度的适配，又叫自适应界面，响应式界面
自适应页面（响应式页面）：可以根据用户屏幕宽度做出改变
（当然现在也还有很多使用定宽页面）
一个网页相当于一个房间，一个个内容的摆放，相当于是把内容放进是一个个盒子中，然后摆放盒子，这个盒子叫做容器，盒子与盒子之间可以嵌套，所以容器与容器之间也可以嵌套。
所以网页布局的布局的不是内容，是容器
网页设计本质上探讨的都是空间的问题
网页设计层级梳理 第8篇
下面是我之前做的一个项目电商平台产品详情页改版，如下图:
这是最初做的几个版本中的其中一版，每次过设计稿，产品经理总是让我改改这里调调那里，某个信息一会要加粗加重，一会要高亮，一会又要弱化一下。一开始觉得可能是自己能力不足，没能达到对方的要求，所以就耐着性子改，但心里却是一万只草泥马略过……
最主要的是产品经理自己也讲不出缘由，就是凭感觉让我改！改！改！
而且我自认为算是一个好脾气的设计师，但总是这样反复调整，真的有些不耐烦起来。
网页设计层级梳理 第9篇
罗列出来之后，再按照前面说的十字法，把上述信息全部按照这四个象限进行分类，根据优先级的不同，分别填到相应的象限里，像产品的图片、名称、价格等都属重要且必须的内容，如下图:
△ 这一过程会有些难度，可能会出现反复的情况，我们在做的时候，针对物流即shipping信息讨论了很久，因为物流很重要，但我们平台并没有物流优势，所以最终还是决定放在第三象限里，只要用户需要的时候能找到即可。
网页设计层级梳理 第10篇
下面所使用的配图中灰色圆圈标、等的即代表该象限第1梯队的信息，标、等即代表该象限第2梯队的信息
首先看图中用箭头标的第一象限第1、2梯队的信息，不但占据了页面中的黄金位置，在设计上也进行了加强。下面是摘取其中一些信息进行简单的说明，如下：
产品图片：产品图片中的产品大图，这个无需多做修饰，图片本身以及位置就能说明其重要性。
产品价格：产品价格的处理方式，不但在字号上均大于其它内容，且在颜色上也是比较高亮的暖色。
button：buy now 和 add to cart同属第1梯队的信息，在大小和颜色上与其它元素有着明显的区别，而且button本身就自带突出的属性。
产品名称：产品名称在产品所有内容中属总领性信息，优先级为第2梯队，由于其所在位置的特殊性，在设计上并不需要强化，所以用的是最普通的黑灰色，字号上相较产品价格也要小些。因为本身所在的区域已经非常明显了。