整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
台回复 进阶 查看《各行业产品设计方案》
界面中的组件设计有很多通用的交互设计模式。
产品导航做为界面上最常见的组件同样也有多种被大家熟知的设计模式，模式化的组件为产品经理快速、有效的创建产品界面、构建信息架构提供的方便的应用。
接下来，我们就看一看在网页端、移动端常见的导航设计模式有哪些：
WEB界面不同区域的导航模式
1.顶部区域导航
界面的header称之为页首区域或顶部区域。
顶部区域的导航对一个产品的用户体验至关重要，根据用户的浏览习惯：从左到右，从上到下的浏览顺序，他们进入产品后顶部导航是他们首先看到的内容。
顶部水平栏导航是顶部区域导航的主要模式。常做为产品主导航，放在产品所有界面顶部区域。
有些产品经理认为顶部内容没什么可设计的，无非是logo和一些文字链接组合起来。但事实并不是这样。
首先，我们来看一下顶部区域常包含的内容有哪些：
l品牌logo
l菜单
l搜索框
l提示消息
l登录／注册
l联系方式
l语言切换
l其他产品或者移动端app的下载链接
l行为召唤链接（我要投稿，我要发博）
这些都是顶部区域中常见元素，设计时根据产品自身实际情况取舍。
在这些内容中，以导航形式存在的菜单尤为重要，常见的导航设计模式分为两种：
模式一：汉堡导航
顶部区域很小，导航中的内容很多，怎么办？当然要通过内容的取舍完成导航设计。
取舍意味着保留和舍弃，在交互设计中舍弃不代表不要某些内容，而是隐藏一些内容，在用户发起交互后再显示。这样的隐藏，体现了按需查看的原则，当用户需要时再展现在用户面前。
汉堡导航就是这种典型思路的导航模式。
常见的汉堡导航由三条水平线条构成，像两层面包一层肉的汉堡包，所以我们形象的称之为汉堡导航。
汉堡导航通过将一些次要的信息隐藏来节约界面的使用空间，使顶部区域更加清爽简洁，用户注意力可以更好的集中在重要的信息上。
汉堡导航在web界面导航设计中使用频繁，用户很熟悉这种导航模式，不会额外增加用户的学习成本。
汉堡导航设计时需要注意的是汉堡按钮很容易被用户忽视，所以在设计的时候要通过按钮形式的设计来适当的引导用户。也就是说，汉堡按钮设计要做到清晰展示，又不占据太大空间。
=============
模式二：水平栏导航
顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。
顶部水平栏导航一般特征
导航项是文字链接，按钮形状，或者选项卡形状
水平栏导航通常直接放在邻近网站logo的地方
它通常位于折叠之上
顶部水平栏导航的缺点
顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，这并不是一个完美的主导航菜单选择。
何时使用顶部水平栏导航
顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。
2.侧边栏/竖直导航
模式一：侧边竖直导航
侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前——根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。
侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接。
它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。
侧边栏导航的一般特征
文字链接作为导航项很普遍(包含或不包含图标)
很少使用选项卡(除了堆叠标签导航模式)
竖直导航菜单经常含有很多链接
竖直/侧边栏导航缺点
因为可以处理很多链接，当竖直菜单太长时有时可能将用户淹没。尝试限制你引入的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。
何时使用竖直/侧边栏导航
竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。
3.页脚区导航
模式一：页脚次导航
页脚导航通常用于次要导航，并且可能包含了主导航中没有的链接，或是包含简化的网站地图链接。
访客通常在主导航找不到他们要找的东西时会去查看页脚导航。
页脚导航的一般特征
页脚导航通常用于放置其它地方都没有的导航项
通常使用文字链接，偶尔带有图标
通常链接指向不是那么关键的页面
页脚导航的缺点
如果你的页面很长，没有人愿意仅仅为了导航而滚动到页面底部。对于较长的页面，页脚导航最好作为重复链接和简要的网站地图的地方。它不适合作为主导般形式。
何时使用页脚导航
绝大多数网站都有这样那样的页脚导航，即使它只是重复其它地方的链接。考虑什么放在那有用，以及你的访客可能最想找什么。
WEB端&移动端常见导航模式
1.Web端常见导航模式
模式一：选项卡导航
选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。
选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。
选项卡导航的一般特征
样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样)
一般是水平方向的但也有时是竖直的(堆叠标签)
选项卡导航的缺点
选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列(即使这样，如果太多的话它们还是看起来很不合适)。
何时使用选项卡导航
选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的选项。
模式二：面包屑导航
面包屑的名字来源于Hansel和Gretel的故事，他们在沿途播撒面包屑以用来找到加家的路，这可以告诉你在网站的当前位置。这是二级导航的一种形式，辅助网站的主导航系统。
面包屑对于多级别具有层次结构的网站特别有用。它们可以帮助访客了解到当前自己在整站中所处的位置。如果访客希望返回到某一级，它们只需要点击相应的面包屑导航项。
面包屑的一般特征
一般格式是水平文字链接列表，通常在两项中间伴随着左箭头以指示层及关系
从不用于主导航
面包屑导航的缺点
面包屑不适于浅导航网站。当网站没有清晰的层次和分类的时候，使用它也可能产生混乱。何时使用面包屑导航。面包屑导航最适用于具有清晰章节和多层次分类内容的网站。没有明显的章节，使用面包屑是得不偿失。
模式三：标签导航
标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列(通常用不同大小的链接来表示这个标签下有多少内容)，或者按流行程度排列。
标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。
标签导航的一般特征
标签是以内容为中心的网(博客和新闻站)站的一般特性
仅有文字链接
当处于标签云中时，链接通常大小各异以标识流行度
经常被包含在文章的元信息中
标签导航的缺点
人们通常把标签和博客和新闻网站联系在一起(有时候也可能是电子商务网站)，所以如果你的网站与这些网站有本质的不同，它可能对你就没有帮助。标签也会给内容创作者带来一定量的工作量，因为为了使标签系统有效，每篇文章都需要打上准确的标签。
何时使用标签
如果你拥有很多主题，为内容打上关键词标记是很有利的。如果你仅有几个页面(可能你的网站是一个公司网站)，可能就不需要给内容打标签了。是否结合标签云或只是将标签包含在元信息中得取决于你的设计。
模式四：出式菜单和下拉菜单导航
出式菜单(与竖直/侧边栏导航一起使用)和下拉菜单(一般与顶部水平栏导航一起使用)是构建健壮的导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问。
他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。
出式菜单和下拉菜单导航的一般特征
用于多级信息结构
使用JavaScript和CSS来隐藏和显示菜单
显示在菜单中的链接是主菜单项的子项
菜单通常在鼠标悬停在上面时被激活，而有时候也可能是鼠标点击时激活
出式菜单和下拉菜单导航缺点
除非你在主导航链接边上放置一些标识(通常是箭头图标)，不然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的移动样式表处理了这种情况。
何时使用出式菜单和下拉菜单导航
如果你想在视觉上隐藏很大的或很复杂的导航层次，出式菜单和下拉是很好的选择，因为它让用户决定他们想看见什么，以及什么时候可以看见它们。它们可以用来在不弄乱网页的情况下按需显示很大数量的链接。它们还可以用来显示子页面和局部导航，并且不需要用户首先点击打开新的页面。
模式五：双层菜单
双层菜单的样式在近来的顶部栏设计中也愈发受到设计师的青睐。因为随着产品功能的不断增加与完善，渐渐出现了一些单层菜单无法解决的情况，那就是顶部栏需要展示的内容过多，而且某些特定功能不属于同一层级。为了更好的应对这类情况，设计师们创造性的使用双层菜单这种样式。
以上面的网站为例，上层的菜单有社交网络的链接（Facebook,Instagram和Twitter），企业logo，搜索框，购物车和汉堡按钮。下层的菜单有产品种类，营业网点地址，新闻，关于我们和联系我们。
在这种情况下，如果将这些信息以传统的单行菜单展示，势必会放不下，造成顶部栏的过度拥挤。
双层菜单设计要点
大部分用户不会一个字一个字去读页面中的信息，他们是“扫描”式阅读。所以顶部栏上的文字设计首要考虑的是可读性，要让用户在短时间内就可以获取这些信息。所以我们的文字要做到能够从背景中凸显出来，必要的时候可以加粗字体样式。
模式六：：固定型顶部导航
固定顶部栏代表着另一种设计思路：无论用户进行何种操作，顶部栏对用户来说都是可见的。这类的顶部栏适用于页面内容比较多，需要用户不断下拉滑动的网站。
这种交互模式可以很好的提升顶部栏的易用性，但是这是建立在牺牲一部分页面空间的基础上换来的，所以我们在使用的时候一定要谨慎。
在上面我一直强调顶部栏设计要简洁明了，要让用户一眼就能看明白。因为顶部栏属于导航体系的一部分，是为了避免用户迷路，帮助他们更好的使用产品。归根结底用户使用你的产品是为了你提供的内容或服务，而不是来看狂拽酷炫的顶部栏。所以我们不能本末倒置，将顶部栏做的过于花哨，进而分散用户的注意力。
此外极简风格很适合响应式设计，可以在多设备上追求一致的用户体验。
简约设计的另一大优点就是，设计师会经常遇到临时的迭代需求，领导突然让你在这里加一个按钮那里加一个文字标签，简约设计为这种突然的迭代需求提供了操作空间。
2.移动端常见导航模式
模式一：Tab/分段控件导航栏
Tab左右切换顶部导航栏与分段控件顶部导航栏，都是顶部有多个标题切换的导航栏样式，分为选中标题与未选中标题，如下图：
分段控件顶部导航栏一般有2~5个可选项，且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项)，并且可以左右滑动切换，选中样式也比较丰富，常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题)，如下图：
模式二：通栏导航栏
通栏导航的背景层一般与下方的模块打通了，在视觉上看起来更为统一，还能一定程度上节约界面空间。如下图：
通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中（多伴随着背景处理），有些也会放在顶部通栏Banner上，节省空间的同时减少割裂感。
通栏导航栏的背景处理方式一般有三种:
1.特殊背景处理：与下方模块整体风格保持一致，多采用与下方一致的图片背景；
2.颜色、渐变背景：采用纯色或是渐变背景，常见于卡片风格的界面；
3.黑色透明渐变蒙层：采用一层渐变蒙层，常见于图片Banner上，保证导航栏文字的可识别性。
模式三：小程序导航栏
微信的小程序导航栏，在顶部右上方有一个不可去除也无法编辑的Titlebar按钮，微信配置了一深一浅两种风格。
从APP转换到小程序时，要注意调整APP的顶部导航栏的位置以及搜索框的大小，避免被Titlebar遮挡，如下图：
上图中，豌豆公主的顶部导航栏整体下移，并且减小了搜索框的高度，提高屏幕的利用率。
关于导航设计的若干思考
1.为市场部做推广的导航栏怎么做？
百度通过层层导航来抓取网站数据。关于导航栏重要的一点是，网站导航通常出现在网站的顶部，所以如果导航栏被网络推广，流量权重可以传递到目录页。
一个清晰的导航系统是网站设计的一个重要目标，它对网站信息架构和用户体验有着重要的影响。在设计导航栏时，网络推广也越来越成为一个需要考虑的因素。
从SEO的角度来看，在网站导航栏中应该注意以下几点?
l网站导航包含关键词
一般来说，网站导航一般包括核心关键词和长尾关键词。为了使页面看起来简洁美观，通常只选择一个关键词代替，用标题标签来表达完整的关键词。当然，在这里需要提醒的是，为了增加某个关键词的密度，一些企业网站在网站导航中加入了关键词，并删除了超链接。虽然这是一种策略，但还是有轻微的作弊嫌疑。
l网站导航中合理使用H2-H3标签
除了特殊的SEO单页优化，多个H1标签将出现。一般来说，正规网站的每个独立页面基本上只包含一个独立的H1。因此，在设计导航栏时，需要合理地分配标记H2-H3。给出相应的列来增加重要性。
l避免内容页面与网站导航关键词之间的冲突
网站的锚文本是由每个网络推广人员设置的，但在这里我们经常忽略一个小细节。一般来说，搜索引擎只记录某个链接在该国出现的锚文本关键词。基于搜索引擎的爬行顺序，从上到下，从左到右，如果关键字出现在导航栏中，尽量不要在内容页面上使用它们。给这个链接相同的锚文本，就可以使用语义相关的单词。
2.从用户角度，导航设计要解决什么问题?
l问题一：我在哪里?
用户可以从任何内部页面进入网站，有时也可以从主页进入，点击多个链接后，用户已经忘记了如何到达当前页面。导航系统需要清楚地告诉用户现在是网站整体结构的哪一部分。页面设计风格的统一，面包屑导航的使用，以及主导航系统当前类别的突出显示，都可以帮助用户判断他们现在所处的位置。
l问题二：接下来想去哪里?
有时用户知道他想要做什么，页面的导航设计告诉用户点击哪里来完成他的目标。有时候用户不知道自己应该做什么，网站导航需要给用户一个全国性的建议，引导用户到达网站目标完成页面。合理的导航和品类名称，文字中的相关链接，引导用户将产品放入购物车的按钮，相关产品推荐，网站地图，网站搜索框等都有助于用户点击进入下一步。
时候前端实现的页面跟设计稿的差别会比较大？而致使这种情况的原因是什么呢？前端实现效果好不好，真的是碰运气么？
记得很久之前与我同住的室友经常加班到半夜三更才回家，我很是不解。后来闲聊才得知她们公司的设计师待前端开发完毕之后需要一点点的对稿走查，非常浪费时间。而且设计这边不但需要标注好给开发，然而开发照着做完依然存在诸多问题。
我也曾对接过几个前端却都没有出现过这种前端与设计稿相差很大的问题，不需要标注也无需怎么走查，即便发现问题也是非常稀少。以至于我一度以为仅仅是开发与开发之间水平差异的问题，也非常庆幸自己没有遇到过那种实现效果差的开发。
然而好景不长，就在前段时间我对接了一位前端开发，落地效果非常不理想。让我比较困惑的是前端实现效果好不好，真的是碰运气么？
那我们来探讨一下有什么方式能够在面对不同的前端开发来规避这些问题，首先我们需要了解为什么前端实现的页面跟设计稿的差别那么大呢？
H5相对于APP在设计上的区别：
设计师相较于前端来讲是最接近产品用户体验的人，但是毕竟APP原生系统界面设计跟H5页面设计还是存在很多差异性的。所以很多不太熟悉H5技术限制的设计师还是很容易犯一些错误的。
为了更直观的对比APP与H5的页面设计差异，下面我们来举个栗子：
天猫APP与H5的页面对比
（1）功能的简化
我们通过对比发现天猫H5的首页功能比APP的首页功能减少了很多，例如：扫一扫的和消息功能以及底部导航都没有了。同类的banner广告布局也没有这么复杂，只是简单粗暴的大banner下方放几个功能入口。
（2）突出基本功能
例如天猫的App端商品类别放置在第二屏，而H5的商品分类在首页顶部原扫一扫图标的位置，点开就是一个抽屉式弹窗，更简洁直观的功能更有利于增强H5的操作体验。
（3）顶部navigationBar不可更改
H5的顶部navigationBar是不可更改的，不管任何软件打开H5，其顶部显示的始终是原打开此H5页面app的navigationBar。所以一般如果需要设计顶部导航的时候，我们是基于navigationBar的下方再放置一个navigationBar的。这里也就是如上图右侧所示显示了双层navigationBar的效果。
（4）常使用顶部返回按钮
h5页面较长的情况下经常会使用顶部返回按钮，这个类似与pc网页端的交互形式。目前多数h5已然淘汰了此交互功能，以顶端自带的返回按钮来替代。目前天猫也仅在首页使用，因为如果没有这个按钮的话点返回会退出天猫。所以，具体使用与否还需视情况而定。
（5）加载进度条
每进入一个新的h5页面顶部都会显示加载进度条，如果是原生系统内嵌的H5页面注意这里是可以自定义进度条样式的。
那么基本上了解了以上H5与APP设计上的基本差异，我们在查看某些前端开发后期实现效果的时候，还是需要花费大量的时间校对。有些问题甚至能改个2，3遍还是不太满意。
（1）设计师的苦恼
那么我们先来看下我们身边普遍存在的真实情况，以下为某公司设计与产品的对话：
我曾经询问过身边的几个设计朋友，她们都坦言工作中经常会花费不少时间与前端校对落地稿。有的设计师朋友甚至说：
（2）H5算法不同，真的没办法特别精确么？
那么H5相较与IOS和安卓真的就这么特殊么？到底是哪里出现了问题呢？
那么接下来我们先来看看目前市面上web app屏幕适配的不同方法。
百分比布局，也叫流式布局，因为宽度是百分比，但是高度是按px来写的。可以简单的理解为高度固定，宽度不固定。
使用流式布局的产品在市面上还是较为常见的，我们这里就以亚马逊为例。如上图所示750和640的 尺寸下不同模块的高度都是一致的，且字体大小和图标尺寸也是相同的。只有横向间距发生了变化。我们可以观察到在750尺寸下顶部亚马逊的LOGO和登录按钮以及购物车，都不处于页面的上下居中位置，也就是说他们均发生了偏移。
这是为什么呢？
因为流式布局都是通过百分比来定义宽度的，但是高度往往是固定不变的PX参数，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调。有的个别元素还会产生偏移。这就是流式布局的最致命的缺点。
往往只有几个尺寸的手机下看到的效果是令人满意的，很多设计师是无法接受这样的显示结果。
况且流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制。因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在不少局限性。
还有一种是固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白。我们可以理解为我们在做PC网页端的时候，采用的是这种固定宽度的方面。这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。
但是这种解决方案也是存在一些问题，例如：在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但后来弃用了才方法，采用了rem。
响应式设计在布局的宽度达到某些阙值时，改变其布局结构，适应不同终端，当然不仅限于移动端。相信大家对响应式设计并不模式，这里我就不进行过多阐述，可以看下图这个例子会比较直观。
响应式设计的优点就是能够适用于多平台，多种不同的终端。但是在国内却很少有大型企业的复杂性的网站在移动端用这种方法去做，其主要原因是工作大，维护性难，所以一般都是中小型的门户网站或者个人博客会采用此方法。这样反而可以节约成本，不用再专门为自己的网站做一个web app的版本。
上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案，接下来讲下rem是如何工作的。
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，也就是说rem是通过根元素进行适配的。网页中的根元素指的是，html我们通过设置html的字体大小就可以控制rem的大小。
举个例子：
左图的字体大小为20px,此时的按钮边框大小为120px*60px，当我们改变字体大小为40px的时候，那么按钮边框的大小则变为240px*120px。我们可以看到图二的宽高比图一的宽高大了2倍，其实我们只改变了字体的大小。
我们可以看下天猫750尺寸和640尺寸下不同显示效果，图三是750等比缩小到640的尺寸，基本上跟640手机上显示的没多大差别。那么以此类推不管在任何分辨率下，采用rem的页面排版都是按照等比例进行切换，并且布局并不会产生错乱。
那么我们接下来来了解一下rem与px之间是如何换算的。首先浏览器默认为16px，如果前端开发在写代码之前没有设定一个默认值方便计算的话那么当前默认值就为16px，即1rem=16px。
当然多数开发是会把默认值设定为普遍较为通用的14px的，即1rem=14px
那么此时当字体大小为12px的时候，若设计稿为320*580即1倍大小，则换算方法为：12/14=0.86rem
如果不能被整除，则小数点保留到后2位，四舍五入。
那么问题来了当我们知道如何换算之后，如何确定我们的前端开发采用的默认值是多少呢？
当时开发在我反复询问时说他设置的默认大小为14px，然后我就建议他按照我给的字体大小通过上述计算方式换算，然而开发一直说这样算的话字体还是很大。然后又抱怨说之前的代码太乱了，自己也不晓得怎么算了。这个时候千万不要被开发的话迷惑，而放弃求解。
下一步我们需要要求开发将某个字的字体大小改为1rem,然后在手机上截图，再挪到软件上测量显示的实际px大小是多少。当时我测量的1rem的字体大小为100px，也就可以断定我们的前端开发将默认值设置为了100px, 即1rem=100px。
有的设计可能还会遇到这种情况，把设计稿做成了2倍大小的，那这个时候我们并不需要重新出1倍大小的图，而是将原有的参数都除以2进行换算。还是以1rem=100px为例，当字体大小为12px时的换算公式为：12px/2/100=0.06rem。
另外：rem常用于字号和边距，边先无需用rem，都统一要求前端改为1px即可。
我们在设计验收的时候还需要看下安卓跟IOS的不同显示效果差异，通常IOS的显示效果会比安卓显示的效果好很多，所以这个时候我们还需要重点对安卓手机进行设计验收。
掌握了以上换算方式，安卓的验收就不难了，还需要设计师们更加耐心。
当前端采用的是px单位的时候，这个时候我们还是会发现开发稿与设计稿存在较大差异，这个是为什么呢？
我们这里主要针对设计师在进行H5页面验收的时候，存在的种种问题进行了深入剖析。
首先从了解前端实现与设计稿差异背后的问题入手，到分析目前市面上采用的几种适配方式，并针对主流的适配方式进行了讲解，给出相应的应对方案帮助设计师能够更有效的进行前端验收工作。
那么其实在实际工作过程中，当我们遇到实现效果不佳的前端开发，我们要学会分辨到底哪些是真的不好改，还是其实好多能改，只是他们懒得改就会骗设计不好实现。
好了唠叨了这么多希望本文对你有帮助，这些可都是设计师和前端之间不能说的小九九哦！
参考链接：
作者：角马X 口袋理财UED设计经理 公众号：海盐社
本文由 @角马X 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
着秋天的脚步越来越近，气温逐渐下降，你是否已经开始为家中的温暖做准备？想象一下，在冰冷的冬夜里，一条温暖舒适的毛毯带来的温馨感觉，就像阳光洒在身上，瞬间驱散寒冷。
今天小编给大家推荐最值得买的秋冬保暖毛毯品牌，让大家快速选购到喜欢的毛毯，不纠结。
1. 罗莱家纺 毛毯保暖双人毯子盖毯加厚毯子 双层法兰绒-黄色 150*200cm
链接：https://item.jd.com/10061190445632.html
双层法兰绒
简约格子款式
凭借着较强的生产实力与过硬的产品品质，罗莱家纺的市场占有率常年位居国内家纺行业之首。
罗莱家纺注重对面料的改良，这款毛毯选用双面法兰绒，盖在身上暖感满分。同时，面料中增加导电丝一定程度上减少了毛毯的秋冬季易生静电困扰。毛毯在设计上属黄色格子基础款，简约又百搭。
2. 源生活 牛奶绒毛毯 办公室午休毛绒四季通用毯子 披肩四季款 150*200cm
链接：https://item.jd.com/100026192545.html#crumb-wrap
亲肤牛奶绒
经典纯色简约款
源生活，一个始终坚持以客户为中心，致力于提供高品质、高性价比产品的品牌。坚持与时俱进，贴合不断变化的消费需求，用自己的实力拥有着一大批忠实客户。
这款牛奶绒毛毯选用优质牛奶绒面料，细腻柔软，亲和肌肤。高品质牛奶绒加上细密的做工，让整个毛毯拥有着非常出色的保暖效果。除了在床上使用，这款牛奶绒毛毯还可以在沙发上、办公室等场景使用。无论你是在家中休息、在办公室工作，还是在户外聚会，它都能为你提供温暖舒适的体验。同时，这款毛毯还非常容易清洗和保养，只需几步就能轻松清洗干净，十分方便。
3. 水星家纺 加厚毛毯被子 双层盖毯加大加厚拉舍尔毛毯秋冬季单双人保暖毯子 墨涧花拉舍尔毯 200×230cm
链接：https://item.jd.com/71139704808.html
拉舍尔毛毯
双层加厚，绒毛细腻
水星家纺对产品品质的坚持，是其发展20余年依然能在家纺市场中屹立不倒的重要原因。相比其他品牌为数不多的选择，水星家纺的毛毯款式众多，颜色鲜亮，可满足不同的消费需求。
这款毛毯为目前市面上较受欢迎的拉舍尔毯，细密植绒使得毯面质感细腻，不易掉毛，结合双层加厚设计，毛毯厚实感强，保暖性能较好，比较适合在秋冬季节使用。值得夸赞的还有细节处的做工，包边绗缝工整，走线均匀，耐用度较高。环保的印染工艺下，毯面色彩亮丽，色牢度高，对肌肤也不易产生刺激。
4.富安娜家纺毯子 法兰绒毯毛毯午睡毯空调毯四季毯子 左岸花开1.8*2m
链接：https://item.jd.com/10034535843991.html
法兰绒毛毯
独特花型，美观耐用
1994年成立的富安娜市场占有率常年位居家纺行业前三，是国内有着较高关注度的一线家纺品牌。这款毛毯绒毛紧密，绒面丰盈，触感柔软，有着不错的保暖性。毛毯通过缩绒、拉毛工艺处理，毯面纤维紧密，降低了水洗掉毛率，配合细致圆角包边，美观耐用。
花型设计是富安娜的一大特点，该款毛毯图案多以植物花卉为主，辅以飞鸟等写意元素，是传统与现代的融合设计，格调高尚典雅。但从规格上看，毯面尺寸为双人规格，更推荐家用，且质地较轻，盖身没有压迫感
*请认真填写需求信息，我们会在24小时内与您取得联系。
