新闻类的网站就是以内容为主的，因此我们要把重点放在文章的内容上。醒目的标题最能引起用户的注意，因此要把新闻标题设置的醒目而且放在最显眼的位置。文章的内容要求精、简，提取新闻的精华简单的提供主要的信息。精简用户阅读的内容的时间，让用户关注网站上更多的其他内容，延长用户停留在网站上的时间。最后我们来看内容的时效性。新闻的时效性尤其重要，大家都喜欢了解最新的新闻动态，因此及时的更新网站，及时的提供最新的新闻，让更多的用户看过来！
同时，文章中恰到好处的添加图文，一方面能够增加文章的趣味性，另一方面能够缓解用户读长篇文字的视觉疲劳。
做好新闻类的网站，体现您独特的魅力
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
政府网站设计不等同于普通的企业网站设计，政府网站是向群众发布政务信息，提供为人民网上办事的窗口，所以政府网站最主要的目的也就是为人民服务，那所有网站在进入之后，首先最吸引我们的也就是网页的界面，网页的界面设计是从侧面反映政府的形象，所以政府网站也不能像普通的网站那样做的绚丽多彩，那一切设计都是有思路的，政府网站也要从网站的风格，色彩等方面着重策划，以人为本，带给用户良好的体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：卡洛设计铺 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1、标签栏是什么？
2、为什么标签栏要放于底部？
3、标签栏的三大规则
4、标签栏的基础规范
5、标签栏的图标样式
6、标签栏的展示样式
7、赋予标签栏更多内容
标签栏也叫Tab Bar，是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部，可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡，则最终的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中显示其他选项卡。
标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。
史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，人们会根据自己的设备，需求和背景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种基本方式：抱着手机的人占36%、两只手使用手机的人占15%，而49％的人依靠一只手在手机上完成事情，除此之外75％的用户仅用一个拇指触摸屏幕。
在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。
这意味着：
将常用的“行为”放在屏幕底部很重要，因为只需一键式的交互即可轻松到达这些“行为”。
底部标签栏设计应当遵循三大原则：结构合理、位置清晰、可预测行为。
为了让标签栏表现清晰，两大平台在规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低，人们在物理上（手指）难以点击或误触，除此之外还会增加应用程序结构的复杂性。
注：如果你因为产品结构非常繁杂，标签数量想要达到更多，那么在 iOS 中就会给你强硬处理，iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签，但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时，最后的一个可见标签将被会被系统强行转换为“更多”选项，需要用户点击“更多”选项之后，系统才将在单独屏幕上的列表中显示其他被隐藏的标签。
“我在哪里？” 是用户成功导航所需要回答的一个基本问题，我们应当采用适当的视觉提示让用户知道目前所处的位置（选中状态）。在APP应用中我们常见的处理方式有4种：改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的，可以同时作用于一个标签。
选取每个底部导航选项都有通向它的目的地，底部导航应当将用户直接引导到相关页面，不应该打开菜单或其他窗口。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如造作新家APP，当用户处于未登录状态时，就不能查看底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登陆界面，这样就能让用户明白不能使用的原因是账号未登陆，从另一层面讲也很好的引导了用户注册与登陆。
注：不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件，如果需要提供控件，请使用工具栏。
在设计标签栏前我们首先要了解它的基础规范，在保证基础规范合理的情况下再去进行设计。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，下面就以常用的24x24为大家举例：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
最后加入图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
标签的数量以及标签的展示形式决定了标签的布局形式，标签的常见布局一共有2种：屏幕等分、图标左右间距相等。
屏幕等分是最常见的标签布局形式，因为不管它存在多少图标，都可以用它进行屏幕划分，计算方法也十分简单，屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有：懂车帝、今日头条。
图标左右距离相等多用在标签数量为3个的情况下，计算方法是先去除中间图标的尺寸，然后再左右平均划分等距。相对于屏幕等分，图标左右间距相等划分更为紧凑。
根据菲兹定律，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。标签栏作为向用户展现产品框架的关键控件，热点区域（可点击区域范围）的设定一定要合理。底部图标尺寸较小，如果将图标作为热点区域，那么可点击区域就偏小，很可能出现用户点击不到的情况，正确的做法是以标签栏的布局作为基础设定，在标签相邻的部分划出一定区域作为不可点击区域，以免用户误操作，参考如下，红色为可热点区域，蓝色为不可点击区域：
在产品设计中，不同样式的图标会给人不同的感受，随着APP风格越来越简洁化，标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀，标签栏图标常见的默认设计样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。
线性图标通过线来塑造轮廓，在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2px、3px、4px，不同的线条粗细所带来的视觉感受也不同，我在“如何让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越活泼、粗旷，线条越细图标性格就越精致、商务，图标使用描边的粗细可以根据产品的气质来决定。
选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差异性并不强，线性图标没有面性图标更具吸引力（引导性），即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点，选中状态下不仅对图标的颜色做了较大变化，还加大了图标及文字的描边粗细，从一定程度上加强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。
选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式，除了把图标底色及文字的颜色加深以外，还加入了品牌色，甚至为了让“会员”标签更加突出，还单独对“会员”标签的颜色进行了修改。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状，即保存了线性也添加了面，加深了选中状态的视觉重量，更加明确的让用户感知自己所处的位置。
轻质感图标层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少，在特殊情况下才会使用，例如盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户加强对品牌形象的认知，而盒马小镇标签的引入则是为了加强图标的引导性。
*图标样式的常用变化（选中与未选中）
在我调研上百种应用程序中，发现主流的APP标签栏样式变化大致分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多，但是使用率最多的是“由线性转面性”标签。
标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受，常见的标签展示形式有四种：图标+文字、纯图标、纯文字、舵式。
图标+文字是最常见的标签展示形式，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。正因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。
例如东家·守艺人APP，专门售卖各种手艺人的亲手制作的各种艺术品，面向的对象是喜欢传统文化的人群，在这样的背景下东家结合宋体的笔画（笔画拆分）把图标设计的更加传统、古朴，创造出具有东方韵味且极具形式感的图标设计。
采用纯图标展示形式的产品比较少见，纯图标样式的最大缺点就是识别性低，没有文字说明会导致用户很难找到自己想要去的位置，也不明确自己所处的状态。所以我们如果要设计纯图标形式，那么必须要考虑到图标的识别性问题，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（识别性的提升我之前写的图标文章中提到过，主要可以从大众认知隐喻与真实世界映射两个方向出发去提升）
使用纯图标样式的产品特征：产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签，用户第一次使用往往也是比较迷茫，需要等用户熟悉后才会得到好转，所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。
对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。
采用纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、具有产品特性的元素到标签中。
采用纯文字展示形式的产品有很多，最熟悉不过的就是抖音，抖音的标签默认状态下采用了纯文字形式，选中状态则把文字高亮显示，并且底部加入了圆角矩形，对于用户群体跨度较大的产品，这样的展现形式再好不过了。（抖音在途中改用过图标+文字格式，不过后面也放弃了，我当时用着图标+文字类型的抖音，的确感觉太奇怪！）
舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。
因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用，经过越来越多的应用采用舵式标签，使用的形式也越来越多样，它现在并不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上，并且为了让图标更加显目，甚至把图标做成了轻质感的形式体现，同时也通过2像素的线性图标减弱其他4个标签的引导性。
标签栏不仅是向用户展现产品框架的关键控件，还可以贯穿整个产品的商业价值的体现，它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富，想要标签内容中含有更多的情感需求、 商业需求、运营需求，那么我们可以重点从这两个层面考虑：视觉层面、交互层面。
在视觉层面上我们可以迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。
装饰性图标仅仅是用来提升整个界面的视觉体验，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极。
整体装饰性图标的出现往往是为了满足情感需求与商业需求，整体装饰图标并不是一直存在的，它的特点是季节性与周期性，并且它并不具备任何功能性。
从情感需求出发设计装饰图标：例如世界杯火热进行时，优酷为了满足用户的情感需求，就把标签栏的图标全部替换为带有世界杯元素的图案，让用户与其产生情感的共鸣。
从商业需求出发设计装饰图标：现在的年货节，之前的双十二、双十一、618等，每到节日促销活动的时候，很多电商应用都会换上装饰性图标，例如一号店，在过年前就把标签栏图标全部改为含带过年气息的元素，提前来预热活动，引导用户消费。
单个装饰性图标的出现大部分都是为了满足运营需求，运营为了推出某个活动或功能，往往会单独装饰某个图标的设计视觉，以便于提高图标的引导性，最直接的例子就是我刚才提到过的拼多多。
我们可以在标签中加入更多的品牌基因，让其与品牌产生联动性，这一形式是大部分应用程序都在做的，我们可以从这6个层面加入品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的LOGO印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO，同时也使用了品牌颜色。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，它并没有把它的品牌LOGO直接放于其中，而是通过大众所熟知的音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备识别性与引导性，必须配合文字一起出现，这样才能让用户理解标签的真正功能，我们不能为了设计而设计。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
现在大部分品牌都会含带吉祥物，我们可以在设计图标时提取吉祥物的外形，把它用于产品的标签中。例如盒马，它就把吉祥物做为了底部标签，不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大，我们就需要对它做风格化的处理，不然看起来就十分突兀。（盒马对吉祥物做了轻质感的风格化处理）
让用户自定义的标签现在越来越常见，而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心，它会根据用户上传的头像或用户的捏脸生成图标。
目前市面上很多APP都把用户上传的头像作为了个人中心标签展示，例如我们常用的百度网盘就采用了此方案，当用户注册未上传用户头像时，会默认显示系统标签，当用户上传完后就会显示用户头像，并且如果你是会员，还会把会员标示显示在标签的右上方，彰显会员用户的尊贵性。
我们可以很明显的发现百度网盘的底部标签默认状态为线性图标，而个人中心不管默认状态还是选择状态都为面性图标，所以如果你想要加强个人中心的引导性，那么可以采取此方案。
捏脸功能作为SOUL的一大特色，捏脸的虚拟形象赋予了真实人格属性，加强了社交的传播性，所以SOUL决定把用户自定义的捏脸放于个人中心标签中。
除了对标签做视觉的提升外，我们还可以对其加入合理的交互效果，一方面可以提升用户在使用产品过程中的乐趣，另一方面还可以为用户提供更多便利，从而增强用户体验。
在不同的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满足不同状态下的用户需求。
SOUL的广场标签（进入选取页+刷新）
SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会刷新整个页面。
有货的发现标签（进入选取页+上传图片）
有货的发现标签也承载了2个功能，在设计上运用的非常巧妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。
淘宝首页标签（进入选取页+刷新+置顶）
淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会刷新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能，并且每种状态下的标签样式也是不同。
爱奇艺首页标签（进入选取页+到达指定位置+置顶）
爱奇艺的首页标签也是同时承载了3个功能，不过它与淘宝有些许不同，爱奇艺并不能刷新页面，而作为替换的功能是直接到达指定位置“猜你喜欢”。
我们做的设计不要仅限于视觉所看到的，还要考虑到所触摸的、所听到的，我们可以利用触觉与听觉去辅助用户确认自己的选择，当然我们一定要合理利用，反之则会让用户感到十分反感。
西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动，给予了用户很好的点击反馈。
SOUL点击星球标签时手机就会发出恋爱铃声，在SOUL的产品报告中，SOUL主要面对女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），并且它的主要需求是满足测试、匹配、交友，所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊，当你在特定场景下使用SOUL时，点击到星球标签周围人也都能听到恋爱铃声，实属尴尬，所以我在特定场景下使用SOUL时都会默默的关掉声音。
精彩的图标动画，对整体的设计具有画龙点睛的作用，降低标签切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单，主要有：缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。
SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。除了弹性动画外，它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足，还强化了选中当前状态，整体标签切换的一致性也较高。
虎牙一直是我比较喜欢的直播平台，它的底部标签动画也是非常值得借鉴，运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感，使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达，赋予了图标更多的性格，对我们的设计进行再升华，从而提高整体设计的质感和趣味。
因为用户群体的不同，汽车之家在标签动画的设计上也相对简单、严谨，它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面，并加入了品牌底色，这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬，在切换过程中采用了透明度与弹性缩放，让其过渡的相对柔和。在细节的处理上也是非常用心，每个图标都带有笑脸的形状，间接的给用户传达“笑脸”信息，在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨，但是在细节上也给予用户传达了更多的情感。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一.什么是选择器
选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。
二.选择器的类别
-单选选择器
-多选选择器
1.单选选择器
单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。
特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。
1-1点击选择器
点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。
-立即触发式：
特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。
建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。
举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。
-再次确认触发式：
特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。（选且只能选择一个选项）
建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。
举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。
1-2滑动选择器
特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。
建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。
举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。
1-3多联动选择器
特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。
建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。
举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。
多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。
在左图选择城市时，我们必须要先选择省份，再选择城市，最后才能选择县；
右图则没有先后顺序，不过当你首先选择颜色时，如果没有相同尺码的衣服，缺货的尺码则不会被选中，先选择尺码也是相同道理。
1-4切换开关选择器
特点：切换开关选择器有且只有两种选项，用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效，常见的使用就是授权。开关的默认状态并不都是关闭的，还要从产品本身的设定上来决策。
建议：如果某开关的功能是用户经常使用的状态，那么可以在默认状态下打开开关，不过需要注意的是在某些特殊的开关按钮需要打开时，必须要提前告知用户。
举例：当我打开UC浏览器的设置时，它的辅助功能就使用了切换开关选择器，切换的开关只需要点击即可。
1-5可搜索选择器
特点：可搜索选择器一般用于选择项较多时，特别是对于电商购物类的APP搜索选择器是必不可少的，搜索选择器会根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
建议：在搜索区域输入文字时，可给予用户更多的文字提示以及以及引导类信息。
举例：小红书在搜索时就会出现数字化的信息提示，这样能够很好的引导用户进入到想要的搜索结果：笔记或者商品页面。
1-6地图选择器
特点：作为最特别的选择器，它的功能是复杂的，它的操作方式也是多样化的，地图选择器的操作可点击、可拖拽、可放大缩小等等，它多用于生活类APP。
建议：可以在选择器中加入更多趣味、互动、可感知的设计，如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。
举例：
打车类APP必用的地图选择器，滴滴出行的用户可以实时看到车辆信息，可以采用点击、拖拽、放大等操作来选取上车地点，选取后还有文字信息提示，让用户确认操作是否正确。
贝壳APP则用地图选择器来让用户选择二手房，同时也采用了联动式的效果，第一步是查看区域，可以明确看到区域的售房套数，点击选择区域后我们可以看到每个路段的房子套数，点击路段后就可以看到每个楼盘的套数以及均价，直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况，有更好的对比性与选择性。
2.多选选择器
当单选选择器不能满足用户需要时，这时我们就可以采用多选选择器，一般常用的多选选择器都是采用点击的方式，当然也有滑动类型的多选选择器。
2-1点击多选选择器
特点：当用户想要选择多个类别的情况下，我们就可以用点击多选选择器来展示提供给用户选择，通过屏幕点击选中或取消选中该选项，它不会立即触发操作，需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量；多选项时触碰区域不能太小，以免造成误操作。
举例：小红书在选择感兴趣的内容时就采用了点击多选选择器，不过在选择兴趣时它就强制用户至少关注4个兴趣，而对于单兴趣或者少兴趣的用户来讲，这无疑会造成用户体验的不佳，被逼再次从中选择次要的兴趣。
2-2滑动多选选择器
特别注明：从用户的角度来看，它可以选择多个区域段的内容，所以我把它分为多选选择器中。
特点：当系统给出的选项不在自己的选择区间时，可以很好的自定义选择区间，把定义权限交在用户手里。同样，它需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：在用户滑动操作期间要有明确的操作提示，让用户时刻感知目前处于的状态；滑动区域尽量不要超过100刻度，如果刻度距离太小，用户在滑动时也很难精准的选择范围。
举例：在汽车之家APP中，当我要选择汽车价格范围时就会出现此选择器，我们可以用手指滑动来选取它的价格区间，相对于上半部分的单选价格拓展性更强，用户可以自行选择上半部分的单选选择器，也可以选择滑动多选选择器，给予用户更多的选择。
三、选择器的十大应用要点
1、简单易懂
标题易懂：
在选择器中标题一定要简单明了，很快的让用户知道他在为什么做选择（如：当你关注某烹饪的APP后，它会让你勾选喜欢的菜谱，你的标题就可以用“选择菜谱”四个字，简单明了）
文字标签易懂：
一般使用短语而不是句子，也并不需要用标点符号来结尾。（如：当选择想要的菜谱时，菜谱后的文字不需要加入标点符号）
选取状态易懂：
用户能够明确感知什么是选中状态，什么是未选中状态，什么是禁用状态。（如：选中状态为高亮显示，未选中为普通显示，禁用状态为灰度显示）
反馈提示易懂：
当你在选择中遇到选项限制或是否需要确认操作时，反馈提示一定要一目了然。（如：当你选择某衣服时，S码不能选择，则会用灰度显示的文字代替，甚至可以用中横线划过文字，明确告诉用户不能选择）
2、基本排序
从逻辑顺序：
逻辑排序能让用户很快很准的找到自己需要的选项，特别是对于选择地址/时间/个数等常规的选项时，可以按照字母/远近/大小来进行排序。例如下面在选择地址时，就是按照A-Z字母排序，这样可以大大节省用户选择的时间。
从产品利益角度排列顺序：
当然为了产品自身的利益也可以自己优化排序方式，选项的顺序可以说服用户进行选择，用户可能因为第一个选项在列表中的位置而选择了第一个选项；可以辅助用户，也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时，产品为了让用户选择更加优质的菜谱，就会把用户评价高的菜谱放在前列；当然商家也会这么做，例如你要去买某款商品，商家会在选项中把热门、优质的产品放在最上方，让你优先选择。
从用户体验排列顺序：
从用户角度来说哪些对用户体验好，那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位，而把用户量最少的轻客放在了最后一位；同样它在汽车品牌选择中，单独列出了热门品牌把它放在前列，让用户进行快速选择。
3、一致性
视觉布局一致：
每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐，这样有利于快速读取选择内容，可以提高用户的浏览效率并减少错误。
图片/插画风格统一：
在图文结合的选择器中，我们一定要保证图片（插画）的优质以及风格的统一。
4、合理运用默认选项
默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。
默认未选中：
这是最常见的一种状态，特别是对于选择年龄、生日这些个人隐私信息，系统也没有办法进行默认选择。
默认选中其中一个选项：
要想默认其中一项，必须考虑两点因素，因素一：你想要潜意识的像用户传达信息，在单选选择器中默认选择一项后，就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向，例如此产品的性别9成都是女性，那么建议默认选项为女性。
默认选中全部：
其实默认选中全部在用户体验上来讲真的不是那么的友好，例如微博这个选择器界面，刚进这个界面时已经全部勾选中，并且当你没注意习惯性的点击下面的按钮时会生立即效，没有返回的余地。（吐槽：有些APP甚至没有一键取消功能，要一个个的点击取消...）这也是为了产品牺牲掉了部分用户体验吧！
5、给用户更多选择
单选选择器的更多选择：
如果用户不想做出选择，那么应该提供一个中立选项，为用户提供一个明确的方向，中立选项比勉强选择要好。例如在选择行业领域时，以上并没有你所处的领域或你不确定你的领域，你就可以选择“不限”或“其他”。
多选选择器的更多选择：
在多选选择器中，如果不能把控到用户的准确选项区间，那么可以考虑滑动多选选择器，让用户有更多的选择区间，不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。
6、控件状态
选择控件在操作过程中必须更改其状态/外观，要明确让用户知道是否能选中，是否被选中。控件状态一般分为三种：未选中、选中、禁用。
未选中
选择器的开始状态，向用户表明，可对该选择控件进行操作。
选中
用户操作选取状态，选择控件处于被选中的状态。
禁用
一般情况会为灰色显示，用户将无法与选项进行交互。
7、操作提示
指的是用户在操作中让用户得到相应的反馈，用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中，操作提示一般用辅助文案提示及非模态弹窗提示。
辅助文案提示（选择前与选择中）：
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明，例如下面是地区选择，我在选择不同层级的区域时，它的上方会出现辅助提示文案，让你明确的知道你上一层级选择的是什么。
同样，当我在选择价格区间时，滑动选择器的左上方一样有文字类的提示：
非模态弹窗提示（选择后）：
非模态弹窗一般出现在用户操作完的跳转页面中，为了让用户感知所选的选项在页面的状态，如下，非模态弹窗告知用户一共有7辆车符合标准。
当然除了非模态弹窗外，还有模态弹窗，但是用户体验极差，目前很少使用，所以就不列出来了。
8、合理使用操作区域
扩大点击区域：
在选取按钮类的操作时，容易出现点击不到或误操作的现象，我们可以通过扩大点击区的交互区域来提高易用性，例如下图，虽然按钮在左边，但是可以把横向区域都列为可点击区域。
当然我们也可以从设计的角度来扩大视觉范围，从而也提高了点击范围，这样的处理不仅提升了视觉层面，还提升了交互体验。（图文结合方式）
注意交互间距：
在元素与元素之间一定要有合理的交互间距，不然很容易出现误选的情况。
合理利用有效区域：
在选项较多的选择器中，我们可以利用好选择主体控件之外的区域，例如在选择城市/品牌时，我们可以做A-Z index式字母交互区，帮助用户快速找到想要的选项。
9、趣味性
让用户选择本来就是一件枯燥乏味的事情，如果让这件事变得有趣那么会极大的提升用户体验。
从文本层面：
例如当用户填写性别信息时，你给予用户的文字信息并不是“男”/“女”，而是“帅气的boy”与“酷酷的girl”，这样会让用户觉得这是一件比较有趣的事情，而不是被动选择。（注：这样的取名一定要符合产品的特性）
从视觉层面：
加入可玩儿性的选项，例如汽车之家的头像切换，可以选择自己喜欢的头像。（头像并不是强制选择的，如果不进行操作则是默认选项）
从交互层面：
让用户去享受选择。例如Soul的星球首页就做的非常棒，在未选择状态他的人物会360度围绕着转动，当然你也可以快速拖拽，或者放大缩小，可玩儿性十足，并且在内部设定了最匹配/新人的高亮显示，协助用户去选择。
10、合理使用选择器
不同的产品在使用选择器时都各有不同，因为每个选择器都有他的利弊，而真正要怎么去选择还要根据产品本身来定。
那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊：
1/多联动选择器（平铺式）
货车帮采用的是多联动平铺式选择器，它最大的特点就是能够一眼就看清楚所有地址，不过地址多时需要花时间去找，只是当你经常使用此功能时便会形成记忆，再此搜索的时候就能形成记忆点击，效率很高，并且在操作外还有路径提示，不仅可以帮助你记住层级选项，还可以实时返回路径进行重新选择。
手势操作：点－点－点
2/多联动选择器（列表跳转式）
闲鱼采用的是多联动列表跳转式选择器，这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容，那么就又要切换到上一级，闲鱼采用它的原因是因为它只有二级联动，不存在遗忘现象，不过这样列表式的选择效率并没有平铺的效率高，人眼习惯扫视横向内容，所以横向的内容获取往往要比纵向的多，在地址选择器上我个人是不太建议采用多联动列表跳转式，因为并不高效也不直观。
手势操作：滑－点－点
3/多联动选择器（列表式）
转转采用的是多联动列表式选择器，它的优点是可以根据右侧字母来找城市，数据偏大也能够很快的查找。不过如果在层级的选项中出现错误，同样就要切换到上一级，并且在操作中没有辅助信息提示。
手势操作：滑/点－滑/点
4/多联动选择器（下滑式）
安居客采用的是多联动下滑式选择器，这种形式的选择器不会遮挡后面的主要内容信息，在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址，并且层级分明，扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。
手势操作：点－滑/点－点
5/地图选择器
美团外卖采用的是地图选择器，这个选择器一般用在需要精准定位的生活类APP中，它的优点就是能够快速精准定位，并且自动录取定位信息，它的缺点也显而易见，不能含带层级并且对范围也有约束。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
新冠疫情后，如“健康宝”这类的小程序逐步成为大家生活中必不可少的应用工具，并且大量线下商业场景如教育培训、百货购物等通过小程序方式快速实现了线上“营业”，使得“小程序”这类商业解决方案，更加被大众认可并获得新一轮快速发展。
而小程序的快速发展离不开其“生态土壤”——“分发平台”的助力。作为分发平台，为了满足C端用户的多元化需求，必然要在供给端市场上争夺优质B端商户。为衡量分发平台对B端商户的吸引力，需要用一套完善的评估机制。
这种评估的衡量主体不再是我们熟悉的C端用户产品，衡量范畴也不应仅局限在功能易用、体验流畅等传统用户产品体验维度上；而是转化到平台与B端的生态视角，分析内容或服务供给者与分发平台之间合作流程、合作意愿，以及分发平台的生态健康度。
那么如何开展面向B端的“生态评估”，如何设定合理且全面的评估指标，如何客观的解读评估结果，本文将从这些方面与大家分享我们在ToB视角下评估中的若干发现。
///
1、『评什么』评估体系建立
| 明确目标：理解B端商户诉求
传统意义上，一款C端产品主要为了满足用户的某项特定需求，诸如搜索、购物、社交或地图导航等，其产品目标往往聚焦在完成一系列特定操作，并注重提升可用、易用、好用等维度的体验感知，从而提升用户活跃、留存等数据结果，及品牌口碑。因此C端产品评估的核心指向是“体验”，体验是产品必须重视且保障的“红线”。
而在小程序生态中，B端商户作为小程序分发平台上服务或内容资源的供给方，最核心的诉求是以其独特的服务或内容资源，在分发平台获取对应的流量，从而产生订单、广告线索等商业利益。体验不再是唯一重要的评价维度，有时甚至会让位于对商业利益的考量。同时分发平台为获取B端商户丰富优质的服务或信息资源，功能布局必然导向满足B端商业利益的实现。因此对B端商户的诉求应该从合作“伙伴”视角去理解，评估的核心指向是“利益”，在利益之下体验成为“可选项”而非“必选项”。
理解了ToC与ToB两种业务的需求差异后，我们将更容易明确ToB指标设定和解读的重点。
| 设定指标：梳理生态产品内在的复杂结构
围绕着ToB业务中商户与平台间的利益共赢的底层逻辑，并通过对行业中多类B端分发生态产品的评估体系进行桌面研究及规律总结，我们认为以下三个链条可以描述B端分发生态产品的复杂结构：
1、流程操作层：“账号入驻-上线&迭代-数据分析-信息互动等”的操作链条，指向商户日常运营操作的CRM系统，建设目标是流程顺畅、操作便捷；
2、规则秩序层：“审核要求-规范建议-等级体系-权益激励”的秩序链条，表现了平台意志及价值观，定义了商户做什么被奖励，做什么被惩罚，构建了以权益为中心的成长激励体系，形成了奖惩规则秩序，建设目标是规则清晰、秩序井然；
3、资源能力层：“分发获客-私域沉淀-运营召回-变现转化”的收益链条，指向服务和内容的分发能力，及触达用户后私域沉淀及运营能力。建设目标是流量资源充沛，运营能力及工具有效，能带给商户实际利益，代表的是生态平台的实际吸引力。
由上，依照上述三个链条，对应的评估体系如下：
///
2、『如何评』评估方案制定
| 划定填答内容：明确“谁”可以“回答什么”
由于评估主体是商户，不像传统C端用户是“决策”与“执行”的统一体，商户内部存在决策层（CEO/小程序负责人）和执行层（商务、产品、运营、研发等）的角色分离，导致不同角色能贡献的信息并不相同。
具体而言，决策层通盘考虑公司的战略目标及布局，关注能带给商户实际利益的“资源能力层”指标，如流量，私域运营效果等。执行层更聚焦在目标实现中的执行效率、体验，可回答“流程操作层”、“规则秩序层”的指标，如流程操作的顺畅性、审核要求和规范建议的适用性等。
如错邀决策层回答执行层面问题，将无法得到细节问题的症结所在；如果错邀执行层回答决策布局问题，也不可能得到准确全面的答案。因此明确“谁”能回答“什么”问题至关重要。
同时，决策层会依据分发平台提供的商业价值，对比所付出的执行成本，确定是否继续投入。因此两者间的信息存在相互验证关系，引入多角色评估有利于得到更全面的视角。
| 做好抽样方案：长尾分布下分群抽样
B端商户作为生态中的供给“群体”，具有内在群体结构，每个商户为生态提供的价值并不均匀，在生态内可获得的资源也不均匀。符合“贫者愈贫，富者愈富”的马太效应。
少数行业头部商户，自身体量规模大、品牌效应强，如家政行业的58到家、快递行业的顺丰等，属于各自行业内寡头玩家，可为生态提供该行业内绝大多数优质甚至独有资源，通常可获取流量扶持。
而大量长尾商户，自身体量规模较小、品牌效应弱，如社区保洁公司、区域性物流公司等，可供给的资源稀薄、质量参差，多数情况下只能自生自灭。虽然长尾商户个体对平台价值贡献很少，但群体数量巨大，种类繁多，可保障平台供给的多样性，满足用户多元长尾的需求，因此也是生态中必不可少的供给者。
因此，考虑到两个群体在生态内价值的差异，评估需分别取样，并对两个亚群各自赋予结构权重，以便将各自评估得分拟合为统一得分。
对于具体结构权重拟定方式，则需依据平台不同发展阶段的目标重点而定，如发展初期依赖行业头部资源保障用户体验，则头部权重更高；而发展成熟期依赖大量长尾商户保障供给的多样性和丰富度，则长尾商户更高。
///
3、『评出啥』评估结果分析
接下来，我们将引入两个例子介绍评估结果的落地应用。
| 分析各板块得分差异
在不同发展阶段，平台生态建设的目标重点也不同。通过横向对比各指标差异，能够判断出现阶段短板问题，确定后续优化方向。
如上图1，有大量体验问题暴露在“流程操作层”，导致该维度得分低，这是一个典型的处于发展初期的平台生态特征：其基础功能尚未完善，商户入驻/上线等流程操作体验不佳；但早期受益于流量扶持等优待政策，外加开发者尚处于平台摸索期，其对规则秩序和资源能力的满意度相对较高。当前阶段，平台应将精力重点投入在基础流程的建设上，优化基础体验问题，以加速生态规模的扩大。
如图2，当基础流程逐步建设成熟后，开发者对于平台的各类分发场景、运营规则有一定的实践经验后，更容易挑战“规则秩序”和“资源功能”等板块的得分，此时说明分发平台已经进入细致打磨分发场景、运营工具、奖惩规则及权益体系阶段，精力重点应该放在深入理解不同类型的行业打法，拓展分发场景并配以适合的运营玩法的奖惩规则及权益体系，以提升开发者的主动运营意愿。
| 关注不同生态群体得分差异
平台发展初期往往需要扶持头部开发者，打造标杆案例吸引更多开发者入驻，因此这一阶段头部得分往往高于腰尾部。而随着生态进一步完善，腰尾部逐渐找到生存方式，逐渐缩小与头部的差距。而如果腰尾部得分持续低迷，则说明平台后续的发展潜力不足。同样，如果头部从始至终都没有腰尾部得分高，说明示范作用没树立起来，优质资源有流失的风险。这两种都是生态健康度不佳的表现，需要业务加强警惕。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com
