你是想给用户提舒适体验，还是想给他们一个麻烦？
如果您想让他们的体验更快更容易，请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。
与左对齐和右对齐的标签相比，顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。
顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。
顶部对齐标签的唯一缺点是，它们可以使表单变得很长。但是现在用户滚动的频率越来越高，所以这不是问题。
通过减少字段之间的空白，可以减少表单长度。您还可以将表单拆分成多个页面，以使表单更短。
顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上，并使表格更容易填写。虽然他们可以使表单更长，
但用户将从完成表单所需的时间和精力的减少中获益更多。
如果顶部对齐的标签能够给用户提供更好的表单体验，那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。
它可以区别于用户填写表单还是放弃表单。
“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。
根据它们的功能，最好的顺序是什么？“确定”按钮应该出现在“取消”按钮之前还是之后？
许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法，但实际上并非如此。它不能回答哪个位置对用户更好，以及为什么。为了一致性而遵循平台惯例的建议是不够好的，给设计师留下了空手而归的机会。
“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在，遵循设计惯例有什么好处呢？
如果某个设计约定对用户有害呢？设计师应该为了一致性而盲目地遵循吗？糟糕的设计实践是否应该持续下去，因为设计师们希望通过平台设计的一致性来解决每一个问题？
今天，有一些平台设计约定被广泛使用，因为它们是为用户工作的。但这里的要点是，平台设计的一致性永远不应该让设计师满意，因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。
人们可能会说，让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑，但它不是唯一的方面。
只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。
对于设计师来说，最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。
当你通过了平台惯例的争论后，你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。
一些设计师认为，在第二个操作之前将主操作放在左边对用户更好，因为它更接近，因此，点击的时间更少。
这是有意义的，但您不能忽视这样一个事实，即用户在选择要采取的操作之前将查看他们的所有选项。
这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。
他们将首先看到左边的主要动作，然后查看右边的次要动作。然后，他们会把眼睛移回主要的动作，点击它。这将在多个方向上总共创建三个视觉固定。
将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始，然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定，给用户一个更快的视觉流。
用户只关注每个按钮一次，并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达，但是当您从用户的思维过程和视觉固定的角度来看速度时，将主操作放置在对话框的右侧实际上更快。
当用户单击辅助操作按钮时，他们期望应用程序什么也不做，并将它们带回到原来的屏幕。因此，“取消”按钮的功能类似于“后退”按钮。
当用户单击主操作按钮时，他们期望应用程序执行按钮所述的操作，并将其转到下一个屏幕。因此，“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧，主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。
它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧，将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向，其中右是前进的方向，左是后退的方向。
对话框中的“确认”和“取消”按钮应该遵循类似的交互模式，因为它们的功能类似于分页按钮。
不仅如此，在中国用户习惯了左右方向的模式。
将您的主要操作放在右侧，将次要操作放置在左侧，将使您的对话框按钮更容易、更直观地为用户所理解。
将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流，也改善了任务流。
用户在扫描时不会跳过主动作按钮。当他们通过时，他们的眼睛就会盯着它，所以他们可以立刻点击它。
另一个问题是设计师经常想知道他们是应该把按钮放在角落里，还是把它们放在一起。当您将主操作和辅助操作放置在对话框
的角中时，它将很好地映射到左右方向。但是，由于‘取消’和‘确认’按钮不是导航按钮，所以没有必要遵循方向映射。有时它弊大于利。
如果应用程序要执行用户无法撤消的关键操作，那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下，“取消”按钮的功能可能像“先前”按钮，但更重要的是，因为它充当安全按钮，以防止任何更改。
在左下角放置“取消”按钮的危险是，由于两个按钮之间的视觉分隔很大，它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起，可以使用户更容易在一次凝视中查看和比较这两个动作，从而选择最佳的操作和点击。
我们经常卸载软件的时候一不留神就会点错，或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。
菜单栏没有主次之分
当您对菜单项进行全文本或全图标处理时，问题就会出现.当用户扫描他们想要的项目时，他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。
通过将用户的注意力引导到您的主要项目，使您的菜单可扫描。
要实现这一点，我们可以看下面设计形式来强调重点内容
与其在每个菜单项上放置图标，还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。
次要项目上缺少图标，这使得它们能够得到其余的关注。
如果要使所有图标处，请稍微放大需要突出的图标。
稍微的增大会使视觉效果有很大的不同，同时字形更容易辨认，每一行的线高也会增加。让整个看起来更加有空间感一些。
让用户浏览阅读起来也会更加舒畅一些。
甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样，但还不够。
他们仍然会竞争，因为他们的颜色对比度相等。
为了给主按钮更多的注意，削弱轮廓按钮的对比度。与其使用重颜色，不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高，以达到主要的按钮突出性。
设计师的另一个趋势是把第二个按钮变成黑色。他们认为，使用中性的颜色，它是不会竞争的。然而，黑色按钮更为突出，因为它有一个更高的对比度。
不要使用黑色，而要使用重颜色的色调，以使辅助按钮比主按钮更弱。要做到这一点，增加亮度和降低饱和水平。
将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻，则中性辅助按钮将更加突出
要避免这一错误，请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力，但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色，这样第二个按钮就不会引起注意。
在设计当中我们经常会遇到做选择性的勾选，往往很多设计师会犯的一些错误问题和选择障碍问题。
我们设计单选框的时候这不是秘密而是让用户做出选择，复选框是很难点击，因为他们的小击中目标。
设计师通常会让标签点击，但如果它不是直观的，那也于事无补。
通过将复选框转换为复选标记，您可以为用户提供更大的命中目标和更清晰的交互提示。
有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取，并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。
总结以上两点，实际商用应用案例如下所示
卡片内容有几种文本类型，提供不同的信息功能。让我们看看基本内容卡的文本类型。
首先是眉毛，它是一个明确的词或短语，用来描述内容的主题。
还有一个标题，它用一个句子中的几个单词告诉用户内容是关于什么的。
在此之后，就会有一个描述内容的正文。
最后，就是时间与操作的按钮
必须通过确定哪些文本类型对用户更重要，从而为您的卡片新闻建立文本层次结构。
此内容新闻卡片的适当文本层次结构为：
1.眉毛-可以是时间，可以是新闻分类
2.标题-最重要的是，因为它描述的内容最快。
3.正文-包含一个描述性段落，但阅读时间最长。
4.描述内容的正文对内内容的简要描述。
您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点，您需要使用浏览控制对文本类型应用适当的视觉强调。
通过适当的视觉强调，可以控制用户浏览的顺序，并指定反映文本层次结构的浏览模式。
当扫描遵循文本层次结构时，用户会浪费更少的眼球运动，并且可以更快地处理信息。
下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。
其他文本类型具有相同的强调度，这使得它们争夺用户的注意力。
在内容颜色的控制上我们可以为三种，重要的突出的需要用户重点进行关注的就用黑色
例如：#333333 #222222 #454545 等等色值
在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可，
例如：#999999 #787878 #666666 等等色值更加容易记住
其他辅助的内容表达比内容正文更浅
例如：#bbbbbb #A8A8A8 等等色值
说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你，有句话说的好：现在
是内容为王的时代，如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计的思考不仅要注重表象层面，也需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，即做到“好看、好用”。在设计过程中，要站在公司的利益上，懂用户所想，在每一个关键点都要带给用户意想不到的惊喜，这些往往都是通过细节体现出来的。
01.「微信」添加好友-扫描与被扫指尖切换
产品体验：
使用微信扫一扫添加好友时，如果对方打开二维码的速度较慢（网络不好/手机卡顿/操作不熟），为避免自己久等，可通过左下角的二维码入口将自己的个人二维码提供给对方扫描添加。
设计思考：
微信的扫一扫功能简直强大到不敢相信，除了我们日常要用的支付付款、物品查询、各种信息的获取等，还有一个重大的功能就是添加好友。不知道大家有没有碰到过这种情况，需要添加好友时，自己打开扫一扫，过了很久却发现对方还在功能的路径中徘徊，迟迟没有打开二维码页面，这时我们不得不说一声“你扫我吧”，于是自己从扫描页面返回，一顿骚操作，把自己的个人二维码给对方展示了出来。
微信在扫一扫页面左下角提供的个人二维码入口，便于在加好友出现问题时，随时由被动变为主动，指尖切换扫描与被扫的添加方式，节约用户时间成本以及缓解扫描等待的焦虑感。基于用户添加好友时所处的使用环境，考虑周全且人性化，极大方便用户使用。
02.「高德地图」录入车牌号-降低限行违章概率
产品体验：
在高德地图的导航设置中，录入自己的车牌号并开启避开限行提醒，在导航过程中如果途径限行路段，系统会有语音播报提醒并自动避开限行路段重新规划路线。
设计思考：
自北、上、广、深四个一线城市交通部分别出台汽车限行措施后，其他部分城市也相继出了限外政策，外地车牌如果想要在本城市随时出行，需要（部分城市通过摇号）获得本地车牌号方可。不管我们对交通路线有多熟悉、或者经过其他城市的限行路段，因限行导致的违章真是防不胜防，毕竟每个地方的限行政策都是通过固定渠道对外宣布，不会通知到每一个驾驶员，如果不能第一时间获得限行讯息，悔之晚矣。
使用高德地图导航，在登录后录入车牌号并开启“避开限行”，系统就会自动检测导航路线，如果要经过限行/限外路段时会自动重新规划，通过绕行来避让限行的路段，如果无法避开则提示：已无法为你规避限行路段，请合理安排出行。自动规划路线能够有效避免因限行导致的违章，给我们造成经济损失，尤其是驾照，毕竟一周期才12分。就算无法避开，也可以通过语音提前知道限行路段，并合理安排出行时间。
（PS：虽然很多用户感觉无需登录也可以正常使用，但登录之后可以享受更多特权以及更加优质的服务）
03.「支付宝」你想要的收款二维码样式是这样的
产品体验：
在支付宝的收款二维码页面截图时，系统预判用户有使用二维码收款的需求，通过弹窗提示是否需要保存二维码图片，自动去掉无关信息并统一规范样式。
设计思考：
移动支付自上线开始，微信支付和支付宝支付各自占领着半江山，只要涉及线上交易，绝大多数用户每天必定会选择其中一个使用，虽然两大企业的方向截然不同，但支付系统在用户体验方面都是一如既往的持续提升，以此来增加用户的粘性。
支付宝收款二维码页面触发截图，在截取成功的状态下，同时弹出保存二维码图片提示。跟设备截取的图片相比，单独保存的二维码样式更加简洁，且规范统一，信息内容更加聚焦，便于用户直接传送或打印使用。其实进入收款二维码页面，在下方原本就有保存图片入口，基于用户进入此页面的需求明确，对性子较急且耐性较低的用户来说，这个被弱化的保存入口，可能直接忽略（别不信，我见过有人手上拿着手机还在到处找手机）。截图时出现的弹窗提示，相当于上了一道保险，避免使用截图自行裁剪打印的样式不统一，导致付款用户心中原本就已存在的默认收款二维码样式发生变化，形成认知负担。
04.「抖音」暗示用户-好看就要分享
产品体验：
在抖音短视频页面停留一段时间后，分享图标会自动变成最近常分享的某个用户头像，暗示用户好东西要分享。
设计思考：
抖音作为当前最火的短视频（直播）平台，相信很多用户即使不经常玩，但最起码会玩，虽然有部分低俗、劣质的用户在破坏着平台的规则，但整体看来是利大于弊的，其他的交给人心。下载抖音的用户大部分获取来源应该是来自于他人的分享，一传十十传百，最终传到人手必备，所以平台是相当注重分享功能的用户体验。
抖音的分享功能，其实还有一个小细节，当我们停在某个短视频页面一段时间时，原本的分享图标会变成最近分享的用户的头像。用户对分享功能都有常规的认知，当我们在观看某个视频一段时间后，系统自动评判该用户对此视频感兴趣，基于用户看到感兴趣的东西就喜欢炫耀、分享的心理（比如“孙悟空到此一游”），系统将分享图标变成用户头像，意在提醒观者分享，以达到最大化传播可能的目的，以及为平台拉取新用户。
05.「智行火车票」搜索攻略-确保使用的流畅性
产品体验：
首次打开智行火车票的搜索功能，会自动弹出搜索攻略，以指导用户可搜索的范围及使用规范，后续再次打开搜索即恢复常规用法，如果再次了解，点击搜索攻略即可。
设计思考：
对于搜索功能，可谓是熟悉的不能再熟悉了，千篇一律的输入关键字即可，大不了重新再来。搜索是产品中不可或缺的一部分，无论打开哪个App,都能很快找到，但如果搜索功能做的好了，也是用户转化的关键流量入口，比如搜索方式、呈现样式、搜索引导等，用户体验不容忽视。
智行火车票APP的搜索攻略就是在合适的时间、合适的地点准确的传达给用户。首次进入，即自动弹出搜索攻略教育新用户，明确的告知使用搜索功能可以搜什么？怎么搜？避免用户一打开就直接撸字，而造成使用错误的概率提高以及影响搜索结果的准确性，用户一旦碰壁，很有可能转身就离开。自动弹出的搜索攻略由被动变为主动，可以提前告知用户搜索范围及关键词示例，降低出错的几率，让整个搜索流程更加顺畅，为后续的使用提供便利，减少用户的流失。
06.「虾米音乐」评论-一键表达心情
产品体验：
在虾米音乐听歌时，进入评论功能，除了可文字评论外，还能表达听歌时的心情，随时查看有多少同样心情的人在听这首歌，很有代入感。
设计思考：
文字是我们交流常用的元素，但很多时候因使用的方法不当而造成含义上的变化，比如一段话后面加个感叹号，到底是消极还是敌意？声音也是一样，当我们开着车对行人按喇叭，是表示礼貌还是愤怒？而表情则是不同，它表达的是一种类型，比如一个笑脸，可以理解为满意、开心、高兴等。表情除了可以委婉的表达自己内心的情感之外，也是因为表情的无责任性，你会听到人说，请注意你的言行，但没人会说，请注意你的表情包。
虾米音乐APP在歌曲的评论功能，除了有文字评论之外，还可以表达听歌时的心情，即表情评论。进入评论页面，首先看到的是某某等几人使用的什么样的心情评论，并提示共有多少人参与，引导用户接下来该做什么，让用户快速地进入到产品使用中，给予了明确行为操作的指令，触发并提高了用户的参与度。另外使用表情相比文字评论更容易操作，系统预设好可供用户选择的表情包并附带文字提示，用户无需思考便可一键操作，很大程度上降低了完成的难度。事实表明，同样能达到目的的办法，简单的是最实用、也是。
07.「美团」收货地址-二次提醒降低出错的概率
产品体验：
在美团提交订单页面选择好地址后，页面上滑，详细地址会悬浮在导航栏，便于用户二次确认或修改。
设计思考：
线上购物已经成为了我们的家常便饭，外卖行业解决着我们“吃”的问题更不例外。通常我们在选择好商品后，地址作为重量级的信息都会优先展示在订单页面的顶部，首先基本都会提供一个默认地址，如果不需要进入地址修改即可。纵然如此，依然有部分用户因为急于下单，后续发现地址错误，就需要联系商家修改地址或者取消订单重新下单，浪费时间不说，还会影响心情。
美团APP在提交订单页面，针对地址方面相当于加了一道保险。用户在选择完地址上滑页面后，详细地址悬浮在的标题栏上，点击可直接修改收货地址，虽然不一定每个用户都能看到，但长时间悬浮在页面顶部，时刻都在提醒着用户，只要稍一抬头，即可看到醒目的大字（地址），便于用户潜意识的浏览或眼睛的余光扫描，发现有误及时修改，降低下单时地址出错的概率，考虑周全，给予更好的用户体验。
08.「菜鸟」下拉刷新-趣味化的“空投”
产品体验：
菜鸟APP在页面下拉刷新的过程中，会有一个纸箱从空中落下的动画效果，类似空投，仿佛在说“你的补给已送到，请及时查收”，非常贴合平台的属性及特征。
设计思考：
下拉刷新早就不是什么新鲜的东西了，几乎所有的应用里都会有这个功能，通常都是一个持续的动效在告知用户，页面的数据正在加载，请稍等，市场上很多APP的刷新样式都是大同小异。不过一旦做好刷新样式，就不仅仅是告知用户当前页面状态这么回事了，比如下拉刷新前后两种状态借助过渡动效连接到一起，让用户了解界面到底发生了什么改变，以及在刷新的过程中如何留住用户继续等待，避免用户焦躁的情绪......
菜鸟APP在下拉刷新的过程中就使用了趣味性的动画方式，首先通过空中出现的箱子缓缓落到地面，有趣又贴合产品整体的设计概念，用生动形象的情感化设计反馈平台行为，为人机交互增加了趣味性和互动性，而且还可以缓解用户在等待刷新过程中的焦虑感；其次，这种动效可用帮助用户理解屏幕上发生了什么，也会让用户有所期待。
（看到这个动效，有没有似曾相识的感觉“哇，那边有空投，马上要落地了，赶紧上车冲过去”）
09.「美团」匿名差评-降低商家对用户的骚扰
产品体验：
对美团的订单进行评价时，如果选择差评（1~2分），系统将自动开启匿名开关以便于用于匿名评价，商家是无法查询到匿名用户信息的。
设计思考：
评价在商品页面展示给所有用户，对店铺商品起着至关重要的作用。95%的用户购物之前都会参考评价，好评会增加用户购买信心；而差评可能会让用户放弃购买这个商品，甚至认为这不仅仅是劣质商品，更有劣质店铺的潜在想法。其实有很多商家都有通过刷单来提升店铺的销售量和买家秀的质量，作假都尚且如此，何况是真实用户呢？所以商品一旦有了差评，不仅会影响店铺的整体动态评分和好评率，还会降低店铺排名，很大程度上会影响其他用户判断及产品的转化率，所以商家一看到差评就激动得马上打电话和买家沟通改评价，低头认错，尤其是新店或者新品有差评时，不断的联系（骚扰）会给消费者带来一定的困扰。
美团APP的订单评价如果选择差评，系统将自动开启匿名评价，由被动变为主动，避免用户因情绪化或忘记打开匿名，而遭受到商家电话的骚扰，通过补偿被要求修改或删除差评。当然，如果用户不想匿名，关闭开关即可。匿名评价不仅降低用户的困扰，还能提升商品评论的真实性，以协助平台通过大数据对整体店铺进行排名和评分展示，减少对后来消费者的误导。
（杠精思维“这样岂不是让很多键盘侠来恶意给店铺差评”。其实别忘了一个前提，就是必须要通过下单支付并等待订单完结后才可以进行评价，毕竟大部分用户不会刻意这样做，任何产品不就是满足80%以上的用吗？）
10「钉钉」保护信息隐私的密聊
产品体验：
从钉钉好友对话框的右上角进入设置页面，点击进入密聊，即可对聊天信息上一道锁，保护信息隐私安全。
设计思考：
众所周知，我们在聊天的过程中，信息很容易泄露，有很多窥探用户隐私的程序，比如进入某些网页会提示需要获取用户位置、读取通讯录等都属于隐私。尤其是社交类型的应用，会有相关保护交流信息的安全措施。如消息撤回、阅后即焚、动态浏览权限等都有一定效果。
钉钉推出的密聊功能就是聊天信息的一道安全锁。进入密聊后，消息禁止复制和转发、头像名字打码防截屏、不可被录屏、消息通知不显示内容等，很大强度上保护交流信息的隐私，给用户带来安全保障。
（有人会问，用微信的人更多，为什么没有密聊功能呢？从用户群体和性质来分析，微信主打社交，男女老少通吃，基本上都是嗨聊、打发时间或平时的常规交流等；而钉钉主打的移动办公，主流的用户基本趋向于白领类型的群体，一般属于工作交流，很多聊天都涉及到商业信息，包括一些文件和商业机密，谁都清楚商业机密泄露的严重性）
结语：
设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广泛适用的平台级规范。不然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。
Don't make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上角找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来说，他们习惯正确按钮用绿色，错误按钮用红色，如果你非要反过来制造所谓的差异化，用户就会感到困惑，误操作的概率也可能会大量增加。
其实网上很多设计规范，原理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些网站多看看。
这也就是我为什么不写具体规范数值的原因，因为网上的资料实在是太多太详细了，写一些重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学习能力和解决问题的能力。
2）针对自己要做的模块，有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。
我开始做UI的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来了。
比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的高度，列表左侧的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这里面的某几个属性然后结合自己的产品综合运用，减少出错。
发现了吗？一个优秀的界面设计，上面的任何信息其实都可以拿来参考，就看你会不会用了。
文章来源：彩云译设计 作者：彩云
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
结合理论落地项目功能，从逻辑层面思考问题。
节前有一位读者问了一个关于单选与复选框样式选择的问题，大概是：
看到很多单选与多选的设计形式，多种多样，以前看到「圆点+圆圈」就知道是单选，但是为什么现在单选与多选的设计样式五花八门，都没有遵守前面这种规范呢？这些组件的样式到底该如何确定呢？为什么会有一种模糊不清，不知道如何使用的情况？
我发现许多人都有一个习惯，就是喜欢把某个具象的内容抽象化，把某个具体的问题概念化。
比如认为单选就应该是「圆圈+圆点」的形式，但似乎从来也没有任何明文规定单选就必须是这样的形式，只不过大家看得多了，就习惯认为是这样，觉得就是这样规定的，但其实并没有过这样的规则。
要知道，样式常常根据功能在变化。比如功能优化了，样式也需要进行修饰，并不是说这里有一个单选操作，就必须是「圆圈+圆点」的形式给用户选择。无论是在电脑还是手机上，都是一样的道理。
这样去处理问题，常常会把实际的业务问题给处理没了，最后变成控件选择的问题，而不是功能本身的问题。
比如普通的弹框，也是一种单选状态，为什么不也改成下图右边这样的呢？不就是操作路径长，点击起来麻烦，多此一举，而且也不好看么？
即便真的在某个场景下，非得使用上图右边的单选形式，那么把样式改成下图这样，又有何不可呢？
只不过常规的「圆圈+圆点」被使用得多了，大家形成了共识而已，但并不代表它就是一种标准。
如果有一个规则规定说，单选必须是「圆点+圆圈」，那么各位目前所设计的绝大部分组件都将不能使用，包括各类菜单或开关。比如下图这样的 action sheet 就不应该存在，而它的出现也是因为功能属性、设备迁移、操作形式等内容的演化所呈现的结果。
这就是大家在处理设计问题时，习惯做一种概括，希望能复用于绝大多数场景而导致的错误情况，没有落实具体问题具体分析的原则。
包括这位读者的问题，也是希望能够明确单选与复选样式的选择问题，以便往后能够更有条理的使用。但可惜并不是这样，从上述我举的控件例子可以看出，单选形式早就已经变了模样，而多数人并没有注意到，还在认为单选与多选就应该是圆圈与方框的形式。
设计工具/方法论，确实是有部分指导作用，但不能作为绝对性或权威性的内容来吸收，应该辩证地去看。
而之所以在移动端延伸出许多自定义组件（形式并没有遵循所谓的市场常见规范），正是因为业务与功能的多样性导致的结果。
样式的选择不单单是看到的那部分，它还可以任意变化地处理，无论是单选或者是多选，不该被样式套牢了。而它的决定因素应该是内容。
比如，iOS 闹钟的铃声选择，有许多可选项。
但是因为内容的明确性，大家都知道，闹铃只能选择一种，不会同时有 2 个铃声响起来（当然也可以这么做），所以即便闹铃的单选形式再如何变化，大家也都知道它是单选的，这就是功能决定了操作形式的例子。
类似于，再如何变化选择样式，无论是圆圈、方框，或只有勾，甚至是其他情况，大家也都知道它就是单选。
而之所以用勾或圆点表示被选中状态，只不过是人的一种正常认知意识，即使改成三角形，只要能说清楚是被选中状态，那也不是不行，只不过三角形没有勾来得清晰罢了，而并不是因为有什么特殊含义。
所以只要梳理出符合自己产品的「单多选」样式，形成规范即可。一些人会感到模糊不清的原因是它本来就没有所谓的标准，又何来的清晰呢？
写到这，想到之前有读者问：什么时候该遵循设计规范，什么时候不该？
要知道，设计规范本身就是基于某个具体产品内容所构建的一个整合标准，为了规范化存在共性的功能形式。而对于共性的判断也应该是从功能来定义的，比如返回都在左上角类似的，但是一定么？
单拎出来说什么时候该遵循，什么时候不该遵循，是很概念化的一个问题，不可能存在一个具体话术标准，说什么时候应该，什么时候不应该的。
如果我回答，符合规范中已有的形式的，就遵循，不符合的就不遵循。那就是一句典型的废话了。但除此之外，我也就不知道如何解答了，除非你把规范和具体问题发给我，我可以跟你一起讨论讨论。
写这篇文章的时候，看到一位朋友发的信息：
为什么手机刷新都喜欢下拉？因为神经科学研究表明，这个动作，更容易让人产生对不确定性和惊喜的期待，原理和赌场的老虎机类似。
很多人都会习惯性给一些操作或交互形式做类似这样的定义。
但这么定义是不对的，因为这相当于前面说的，把业务给解释没了，成了形式上的讨论。而为什么会使用下拉、以及下拉会有什么情况，包括它所解决的问题，都没有任何的分析。
比如，下拉之所以让人上瘾，并不是因为「刷新」本身。下拉只是一种交互行为，它的出现也只是为了解决早期刷新按钮占据屏幕空间的问题，希望通过下拉进行刷新，以隐藏掉屏幕上的刷新按钮，给屏幕留出更多可用空间。
而采用下拉是因为它更符合人的直觉 —— 往下拉能看到更多新的内容。
但是人之所以会对下拉上瘾，并不是因为下拉这个行为，而是因为下拉能看到更多信息。下拉本身只是解决了屏幕空间的问题，而人其实是对内容上瘾。
比如我在腾讯新闻里看 NBA 的资讯，通常只会直接上滑，看下面的内容，看完了就关了，不会进行下拉刷新。
因为在腾讯新闻里，下拉刷新的新闻并不是的内容，更多是今天或今天之前的信息，不刷新反而是刚刚更新的资讯，那么下拉刷新虽然也是刷新，但是刷新出来的内容是旧的，也并不吸引我，反而成了我要避免的操作，因为只要一下拉，的资讯就会被旧的资讯挤掉，要刷掉进程重新打开 App 才会重新再显示的。
所以就不能简单的定义说「下拉刷新是一个容易让人上瘾的操作」，而是要关注内容，如果刷新的信息都是旧的，或者是用户没兴趣的，那即便刷新了，也不会引起用户的注意，也更不可能让用户上瘾了。
读者：
呆呆，这个图的卡片列表里，标题用省略号合适吗？
（因为原图涉及读者项目隐私，所以重画了个草图。）
又是一个没有业务背景的问题。不过这个问题比较简单，可以展开来说一下。
通常，我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计，譬如上面这图。
于是，许多人在自家产品的设计过程中，遇到此类情况，被开发问到时，也会搪塞一句：文案要是超出就「…」显示吧。
大多数遇到这种情况的，都是因为之前没考虑好，才临时想了这个解决办法。
而很多时候，一些产品之所以用「…」显示，并不是因为单纯地文案溢出，可能是专门设计过的。
所以，如果简单地认为「…」就是解决溢出而使用的方法，那就有问题了。
下面举几个例子。
有些产品，我们几乎看不到列表视图里的标题是有省略号的。
因为这类产品的目的就是让用户读到完整的标题信息，对眼前的内容好做判断，从而考虑是否点进去看详情。
所以在设定的时候，界面中标题字数的规定，与界面样式就已经提前规划好了，可能在后台设置就限定死字数，要求运营人员上新时要统一界面的展示形式。
这种情况下，一般就不会再有省略号的问题，譬如一些知识付费类产品。
比较典型的还有 TED 演讲视频的标题，在《设计体系》这本书里专门提到了这个案例。
对于 TED 来说，演讲标题的信息优先级是最高的，所以他们宁可保留所有标题文案，也不对文案做截断用「…」显示。
因为对标题做截断是很容易的，而难的是把一个演讲主题提炼成一句简短句子，所以他们为了展示更清晰的标题，宁可在界面上保留长标题，甚至为长标题的显示而专门设计相符合的展示形式。
反过来，他们也因为这一点而确定了界面上标题字数的上限，确保文案不会超过界面显示的最大临界值。
包括一些资讯类产品，在标题上也会做限制，以满足最大化呈现且不使用省略号。意思是：假设界面上文案范围定了 30 个字符，那么配置的时候就必须 30 个字符以内把内容表达清楚，且必须完全显示在界面上。
所以经常看到一些 UGC 产品之所以会限制标题字数，原因除了常见的标题不能过长之外，还有一点是为了在列表页就能显示完整。
各位在设计这类产品功能时，也要注意到这一点，而不是随意说一个「字符不能超过 50 吧」。
而有些产品的内容列表，之所以频繁使用省略号，它的目的是为了引导用户点击用的。
这类形式一般出现在营销号发的文章里，多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的，除非是一些内容产品，运营方是企业自己，为了让产品上的内容有更多人点击而这样去设计，当中可能涵盖了广告，以此赚取广告费。
不过这类内容的设计已经让用户开始反感，所以如果不是特殊情况，最好少这样去做。
当然，还有同类型的，一般出现在页面面积小且需要展示更多信息的集合类视图，比如：
这种形式的设计，就是因为页面上想展示的信息太多，以至于通过这类合集来展示某个模块里的内容，营造出一种很丰富的感觉。
也就是利用「…」引导用户点击，表示信息没有展示全，如果要看，就点开详情，进二级页面。
还有一些产品的省略号，纯粹就是大家理解的，溢出就省略号显示。
比如同样是资讯或内容类，以文字为主的产品，虽然标题超出范围用了省略号，但用户基本也已经知道是什么内容（上面那个集合类视图也是一种），且还有摘要引读。
比如下图：
这种标题字符限制在了两行以内，多余字符用「…」展示，基本上已经是一句完整的话，能让人大致了解这条信息的意思。并且还有部分摘要，已经足够用户判断是否对它有兴趣，如果没兴趣，直接刷走也无所谓。
包括一些电商类产品，用户多以商品图片为主要决策因素，商品标题作为辅助信息，优先级不高，所以标题溢出是否省略号显示也无所谓。
这其中有一个特殊情况，就是有些产品的标题即不展示全，同时又没有省略号，比如淘宝的商品搜索结果页面。
因为这类列表实质是一个产品卖点集合的浓缩词，不是完整的一句话，多余字符展示或者不展示，都不会有太大影响，所以也不重要。
当中我比较反感的还要数农药了。
好友邀请的列表视图里，常常看不全昵称，因为好友会有游戏昵称，微信备注会展示在游戏昵称后面，以至于要点到游戏关系里先看全昵称，再到匹配界面邀请好友。
既然已经区分了微信好友与游戏好友，为什么昵称上面不也加以区分呢？
当然，经常玩的好友可能没这个必要，毕竟头像或昵称都可以很快识别出来，但是偶尔一起玩的好友通过这样的识别方式就比较难了。
这里就是简单提一句。
通过上面提到的一些例子，以及不同场景下标题省略号的处理方式，相信大家对这块的理解会比之前更深。
同样，对于开篇读者提到的问题，更符合的情况可能类似于知乎这种，有完整句子，所以标题是否省略号处理也就没太大影响。
但具体的还是要结合业务详情仔细考量。
而标题内容的展示是否要用省略号处理，优先要看这条信息的业务权重，以及是否会影响用户决策。
所以各位在设计这类内容标题是否要用「…」显示时，也要注意判断自己的产品特性符合哪种类型，而不是随意一句话，说「超出就省略号显示好了」。
最近收到两个问题，正好都与输入框有关：一个是怎么判断输入框要不要放置清空按钮；另一个是输入框超过限制后，是禁止用户继续输入，还是允许超出但会警告提示。
在一定程度上，这两个问题的分析逻辑是类似的，所以放到一起聊正合适。
先看第一个问题：怎么判断输入框里要不要放置清空按钮？
原问题是这样的：
呆呆，我最近在优化公司的产品，遇到一个问题，就是 PM 想在聊天输入框里加一个「清除按钮」，可我觉得不太合适，但是说不出原因，只能说没见过在聊天框里加清空按钮的。这个问题要怎么判断呢？
我们一般会在搜索、手机号输入框里看到类似的清空按钮，比如输错了就点一下，清空后再重新输入。但是很少会在聊天框里看到清空按钮，为什么呢？
主要是「时效性」…算了，这种概念词用多了，发现现在人都不会讲话了。说白话就是「要快」。
无论在登录注册还是搜索的场景下，除了内容本身之外，最注重的就是效率。
譬如有个数据大概是说，用户登录注册花的时间超过某个范围，转化率就会对应逐步降低。而率，就是让用户能快速登录注册账号，使用产品功能。所以设计师们会在登录注册的操作流程里抓住可提率的每个细节，输入框使用效率就是其中之一。
搜索也是一样，当用户有明确目的使用搜索框时，关键词就是用户当下最关注的信息，如果输错，再一个个删除，显得麻烦，所以清空按钮能在这里提高用户的操作效率，甚至 iOS 的搜索组件也会自带一个清空按钮。如果是电商产品，率是能间接提高成交率的。
这里的输错，也有两层意思，一个是用户在输入过程中发现错字，比如登录注册时，发现手机号输错了，一个个删除反而没清空重新输入来得快，因为删了之后，号码要重新背一遍，具体到某个数字，然后接着输，特麻烦。
或者搜索内容时，发现有错别字，删除某个字再重新输入，反而没有清空重新输入来得快，毕竟输入法有串联关键词组的功能。
另一个是反馈的结果不符合用户的心理预期。比如输入手机号已被注册，或者搜索结果不满意要重新输入关键词，使用一键清空都是比较的。
而且输入之后，系统需要给用户呈现结果，如果结果不满足用户预期，还会存在短时间内多次输入与清空的情况。那么，无论是错字还是对结果不满意，清空按钮都可以非常便捷地帮助用户一键清除上次输入的字段，让用户更快速地重新输入新字段，从而提高用户的操作效率。
于是，我们会把这类场景下的「清空」说成是「一键清空」，主要是因为方便。而它的作用就是，在出错的场景下，更快捷地给用户重置的操作。
反过来，各位可能要说：那聊天框不满足这个条件么？
我们接着看聊天输入框。
我们知道，聊天输入框的内容不是固定的，它是根据对话内容而变化的，用户甚至需要花时间持续输入并纠正自己的用词，以及话术的准确度。过程中，如果输入的内容多，而且又是即兴的，耗费的时间与精力也是很大的，清空后也难以再恢复。
它不像登录或搜索，固定的输个数字串或关键词，它是一段完整内容。虽然也会有某一句话或者某个词输错的情况，但是一键清空的操作成本太低，对应着聊天框的高输入成本，一键清空的存在与之并不相符。
于是，这里就引出了一个概念，叫做「输入成本」与「修改成本」。
清空按钮对应的，就是低修改成本，因为简单点击一下，就清空了。它所适用的场景就是低输入成本的情况，也就是前面提到的登录注册或搜索 —— 输入的内容相对固定，且可能反复。
对于登录、搜索等指向性比较明确的输入框来说，用户在乎的是输入和反馈的效率高不高。一键清空操作能带来效率上的提升，而且操作后带来的损失成本是很低的。因此，一键清空操作在这个场景下，对用户来说是安全且的。
但是在聊天场景下，一键清空作为低修改成本的作用是不适合的，因为这时候输入成本比较高。
用户在聊天输入框内表达清楚自己的想法是为了让对方理解，达到交流的目的，这样的内容是不确定的。而且在聊天输入出错情况下，我们有多种操作方式让用户重输，比如键盘快滑定位，触摸定位错字等，都比一键清空重新输入的成本低很多，而它所谓的「便捷性」在这里意义也就不大了。
于是乎，在衡量输入框是否需要清空按钮时，我们首先要知道，清空按钮是低修改成本，那么如果输入框的输入成本比较低时，我们就会使用清空按钮，来提高操作效率。而当输入成本比较高时，一键清空的操作就显得配不上这个输入框了。所以，它在聊天框里就没有存在的必要了。
包括其他非固定内容的输入框，也是一样的道理。
接着，延伸出第二个同学的问题：输入框超过限制是禁止用户继续输入，还是允许超出但会警告提示？
相信各位读完上面的，再看这个问题，应该也能分析出原因了吧？逻辑跟上面的也差不多。
也看输入成本，比如是固定内容的手机号，我们正常会禁止多余输入，因为这样用户更容易判断手机号是否正确。
如果是短长文，说明用户可能是手打字超出限制，这时候如果禁止输入，用户不好在输入框里做内容删减或修改，也会打断用户的输入流，毕竟还没写完就限制了，那得先删掉前面的，再来思考后面怎么写，会乱。而且如果是复制的，禁止输入的话，超出部分就被截断了，也要先删减，再继续复制剩余部分，非常麻烦。除非先在别处删减到限制字数内，再复制过来，但这样又增加了用户的操作成本。
如果允许输入但警告提醒，那么用户就可以根据自己已经输入完的内容做删减修改。
所以对于这个问题，我们从这个视角出发，也能了解一二，就是通过适用场景与输入成本来分析。
当然，以上所有内容更偏向于通用性说明，针对具体业务还需要具体分析。
1、从单复选组件反思功能设计问题
2、标题文案溢出使用「…」合理吗？
3、怎么判断输入框里放不放清空按钮？
文章来源：站酷 作者：呆总、
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天分享的题目是从品牌到UI，用设计的思想与这个世界和解；这里的我说的和解比较宽泛，大家可以理解成与客户和解，也可与产品经理和解，也可以是与自己和解；
为什么选这个主题呢，原因是之前在网上听一群人总是说互联网走到了下半场，我和好奇，就去查这个下半场到底是什么，后来总算知道了，互联网行业走到现在，已经从增量时代转为存量时代，这个存量时代就是下半场，人口、流量、资本的红利都逐渐收紧。
在这种情况下我的产品如何从同类产品中脱颖而出，或许增加品牌属性是种方法，希望大家在听完这个分享后，会有一些启发。
在互联网的增量时代，品牌设计与UI设计是两条平行线，几乎没有交集，你做你的画册、slogan、包装，我做我的网站、app、微信小程序，偶尔互相模仿，但也不是主流，毕竟两者载体不同，目的不同，用户也不同；
但是到了存量时代，影响用户选择的一个重要因素是「品牌」，一个产品要想从同类产品中区别出来，需要有个性，UI+品牌成为产品生命周期中重要的一环，下面我们看看如何在用户心中植入产品品牌；
在在品牌植入方便，国外很多产品已经走在了我们前面，我们来看看谷歌，谷歌开发者大会上对 Material（ Design做了更新，我印象特别深刻的是Google对图形语言单独拿出来做一个模块解释它，它提取了圆形作为视觉DNA，并沿用到产品的每一个控件；
当然，如果我们想传达我们产品的品牌理念，只在图标组件里运用是远远不够的。
诞生于1886年的可口可乐，每年都做产品运营推广，不断大量的重复它logo的弧线元素和瓶子的外形；
还有刚刚过去的双11，从2012年11月11日开始的天猫节，现在是全球最大的B2C平台，天猫猫头运用也是渗透到全产品线里面去了，问大家个问题，大家有没有人知道这个猫头品牌是谁创立的？其实就是马云的继任者，现任阿里巴巴集团董事局主席张勇；讲的有点远了，我们再回到我们的主题；
这个图很好的解释了品牌与产品与用户的关系，产品需要品牌牵引、支撑，现在互联网产品越来越趋于同质化，UI 设计师已经不能局限于界面的表现层，更要了解产品背后的逻辑，然后以业务为依据设计品牌，以品牌为基准去设计产品。
第一章意义Significance，这个章节我们讲讲从品牌到UI的意义
第一个意义是对内：可以规范统一，协作
品牌本身就可以作为设计规范的一个重要指导原则，通过对配色、文字、图标、控件等建立设计规范，可以有效减少设计决策时间，传达一致的品牌调性。
第二个意义是对外：可以提高认知，溢价增值
如果一个产品失去了个性，不看 logo，单纯看界面的话，很多时候根本分不清是到底是哪一家公司的产品。如果能够关注设计细节对品牌的影响，肯定能更好地提高用户对产品的认知，当你对一件产品注入了感情，同时也就为产品提供了营销推广的立足点；也可以这么说，设计师创造的情感性价值，直接实现了产品的溢价增值；
第二章感知Perception
有位设计界的前辈讲过，品牌知名度其实就是信任度的体现，他说世界上最成功的品牌就是宗教，这里没有诋毁任何宗教的意思，但是宗教建立的品牌信任度，远远超过了任何商品；
这里我们从用户的角度出发，看下用户是如何从产品感知品牌的；
在设计产品的时候常常会发现我们觉得理所当然的地方，用户往往没按我们想的方式去使用。那是因为设计师通常有整体观，站在金字塔顶端去规划一个产品的设计，而用户则恰恰相反，在金字塔底端往上爬，他们不知道这个金字塔多高，也不知道从哪一面开始最好爬，所以会遇到各种问题。
同样，用户对品牌的感知由低向高的，用户通过各种场景接触到产品，再通过产品的视觉呈现、功能体验、信息内容等感知品牌，最后在心中形成印象，构建品牌信念，从而影响下次产生相应需求时对产品的选择；
可以联想下我们的购物体验，是不是总是从同一个地方shopping，这就是购物APP品牌价值已经使你已经形成了习惯选择；
作为设计师，我们需要充分理解品牌内核，由内向外将抽象的品牌内核转化为具象的视觉符号，再延伸到用户与产品的各个接触点，从而将品牌理念植入用户内心。
第三章融合Integration既然上面我们讲品牌和UI最终要走的一起，这一章我们讲他们如何在工作融合
第一步，明确定位，提取关键词，建立情绪板
当代广告教皇，美国奥美广告创始人大卫.奥格威说，“最重要的决定是如何定位你的产品。”
在大师的指引下，我们发现首先找到品牌定位，定位自己的细分市场和目标用户；
2.围绕品牌定位提取关键词；
3.建立情绪版，将抽象的概念转化为可感知的视觉；
第二步，提取视觉表现元素，并设计融入品牌定位。我们重点从颜色、图形、纹理、字体四个方面讲一下。
有时甚至不需要任何图形，单凭颜色就能产生对某一事物的联想。
现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。
颜色在 UI 中的表现有 logo、导航栏底色、图标、文字、可视化图表、插图、按钮等等。 
现在UI设计流行的极简风，我们发现这些应用采用极简化设计的同时，图标也变得更鲜艳，更引人注目，说明这些产品也在寻求一个平衡，在 UI 设计变得极简趋同的同时，仍然能保留核心的品牌基因。 
图形
我们知道颜色是抽象感知，图形是相对具象的表现方式。
一旦某个特有的图形在用户心中形成烙印，用户见到相似的图形组合都能往该图形联想，从而关系到图形背后所代表的品牌，这也是很多企业做品牌升级的时候 logo 都越来越简洁的原因，因为这样能有效降低用户的认知负担，提高品牌认知。
图形通常从 logo 本身提取，并在 UI 中延伸应用。比如马蜂窝、百度网盘、京东做品牌升级的时候都不约而同地从 logo 中提取了一个代表微笑的弧度，传递友好、温暖的品牌形象。
飞猪提取了 logo 中「猪的发型」用于搜索框，韩国的电商品牌11街也将 logo 延长作为界面中的搜索框。
纹理
在 UI 设计或者运营推广运用中，通过提取品牌图形元素，再运用分形、排列、重复、平铺等设计手法形成品牌纹理。
我们看看京东的启动页用 Joy 的外形旋转做成的纹理背景；
国外著名的聊天应用 Whatsapp，在聊天页的背景用涂鸦插图纹理做背景；
还有腾讯文档的启动页、登录页用了渐变的菱形作为纹理，辅助品牌的视觉表现。
我们还在聊图形复制变形的时候，国外的UI设计已经细化到了十分惊人的程度
例如UBER 在做的品牌升级，设计师出来将每个国家富有代表性的图形提炼， 然后重复运⽤平铺，形成带有地域特色的⼏何纹理，运⽤到闪屏和线上线下的产品当中。
字体
字体是最容易被忽视的设计元素，很多人会认为 UI 中的字体用系统默认的就行。其实字体对于产品气质的体现着很大的作用，很多品牌都把字体设计当成品牌基因中重要一部分。
字体的选择需要契合产品功能特点与品牌调性。
微信读书使用了方正宋三，让人阅读起来有种文字秀丽的浸入感；每日故宫使用了方正清刻悦宋体，字里行间隐含着历史古韵，渗透着文化气息；澎湃新闻使用方正准雅宋体，体现其作为新闻产品「专注时政与思想」的严肃一面。
英文字体也可以使用契合产品气质的英文字体。比如常被用作数字字体的 Din、经典的衬线字体 Playfair Display、⾕歌御用的 Roboto 等。
第三步，融入品牌触点
这里我解释下品牌触点这概念，是指一款产品中品牌信息接触点，是决定用户对产品品牌印象的关键；
我们看几个案例，
启动页：知乎的启动页采用 slogan 加 logo 的方式来体现品牌，这也是绝大多数应用的做法；每日故宫启动的时候伴随着一声钟声，页面会有一个光线流动的动画，极具仪式感，一下子就把用户带入故宫庄严的氛围当中。
图标：东家的每一个图标都融入了印刷式字体的元素，体现其匠人的品牌基因；mono 则直接把产品名称「 M O N O」用于导航栏。
插图：Dropbox 的儿童风格的插画与 B站 的二次元插画都非常契合品牌特征。
品牌触点式多样的，除了上面的启动页、图标、插图之外，还有预加载图、loading、动效、新手引导等等都能体现品牌触点，这些品牌触点，都是讲述品牌故事的关键载体，帮助产品从同行业中脱颖而出，这里由于时间的关系我们就不展开讲了，有兴趣的同学，我们可以单独交流哦
互联网行业已经过了拓荒时代，行业沉淀下了许多有价值的知识，也有许多非常好的 UI 组件和规范文档可以直接使用；
另一方面，很多公司对于 UI 设计在整个产品生命周期中的价值，普遍觉得不是非常重要，UI 设计部门只是一个业务支持部门，起不到主导作用。而如果 UI 设计师做的工作还是停留在把产品的原型文档变漂亮，肯定是不行了。
设计师不仅需要对产品业务和商业有深入了解，更重要的是对于品牌在整个产品链路中的应用与把控。
我们需要走出舒适圈，主动去挖掘更深层次的设计价值，提升自我价值。
诚然改变一个大的设计生存环境是非常漫长的过程。要不停的尝试，就像不停的迭代做新产品一样，不能因为一两次的失败打消掉设计的积极性。
设计的终极最后就是和解 Compromise
开篇我提到了与世界和解，分享下我是怎么和这个世界和解的，我相信三句话，可以跟这个世界和解
再次谢谢大家听我叨叨，如果大家喜欢，下次我们可以叨叨点关于设计的更有意思的事，谢谢
文章来源：tob.design 作者：无名大师29aef85c40
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
无论是从个性化内容还是用户体验上来说，为界面内容选择正确的选择类控件可能比想象的要难，全文10,856字 ，预计阅读20分钟， 建议收藏。
本文主要研究选择控件的设计细节，虽然是很常见的控件设计，但也有非常多需要注意的地方。能提炼总结常见事物的一般规律，这本身就是对自己已有知识理解加深的过程。
对数据进行便捷选择
单选框(Radio button，也叫“单选按钮”)—— 用户从一组选项中必须选择一个选项。
复选框(Checkbox)—— 当有一个或多个独立选项时，用户可以选择任意数量的选项，包括零个、一个或多个。
切换开关(Toggle Switches)—— 两个互斥状态（打开和关闭）之间的可视切换。
选择标签(Choice chips)—— 是按钮选择的一个替代方案。至少两个选项，用户可以选择一个或多个。
列表选择(List Select)——可以单击容器框中随附的项目，以从列表中选择一个或多个。
下拉菜单(drop-down menu，也叫“下拉按钮”)——按钮包括一个单箭头指示符，单击后会显示包含选项列表的菜单。
单选按钮的命名（Radio）来源于旧收音机上用于频率和预设电台之间切换的的实际物理按钮。当一个按钮被按下时，所有其他的按钮都会弹出，使被按下的按钮成为唯一处于“按下”状态的按钮。
后来被用于录音机，盒式录音机和可穿戴音频播放器中，90年代初-用于“播放/暂停/快退/快进”控件。
UI概念是由Xerox PARC的研究首次引入的，Xerox PARC是一家研发公司，几乎涉及到我们现在每天使用的计算机技术，包括：以太网，图形用户界面（GUI），面向对象的编程，计算机鼠标，激光打印等。Xerox Star 8010工作站是第一款在图形用户界面中带有单选按钮的设备。
单选框用于对信息的选择，允许用户从一组选项中必须选择一个，通常以2-5组显示，单选框应互斥。单选框的外观一般是一个空白的圆洞，旁边则通常有文字标签。标签的用途除了描述之外，还可以作为操作区域，当用户选中标签，所应的单选框就会被选上。已选上的单选按钮一般会在圆洞内加上一小圆点。单选框仅显示合理和正确的选项。
单选按钮的状态为打开（实心圆圈）或关闭（空圆圈）。
单选框一旦选上，除了选择另一个选项之外，便没法取消。所以有时会有空白的选择、重置或默认选择。
每个单选按钮的标题应清楚地描述选择它的效果，通常句子结束没有标点符号。此外，考虑使用下拉菜单，会比显示所有选项占用更少空间。
复选框是一种按钮类型，可用于打开或关闭选项。当存在选项对象时，复选框允许用户从一组对象中选择一个或同时选中多个和全部项目。每个复选框都是单独的个体，因此选中一个复选框不会影响其他复选框的取消选中状态，全选除外。
复选框使操作在两个相反的状态，操作或无操作之间进行选择。复选框在屏幕上显示为一个小方框，选中时，它被认为是“开”，选中的复选框包含复选标记，正方形将充满复选标记。；关闭时，则被认为是“关”，它是空的矩形框。复选框一般放置在可选信息左侧(图片、视频以宫格形式表现的页面除外）。
复选框可以用作单个元素，也可以组合成一个列表或嵌套式的层级列表以从中选择多个。如果需要将选择项分成几组，则使用多级复选框。
混合状态，仅在多级复选框时出现。如果使用复选框组，全局启用和禁用多个子复选框，当这些子项并非都处于同一状态时，父复选框应显示为混合状态（用短划线表示）。混合状态常在嵌套层级等对多个对象一同操作时使用，以代表该选项下的子选项没有被全选。当半选的复选框被点击时，它便会变成平常的复选框，而它的子选项亦会跟随全选或取消全选。
如果存在多个复选框时，考虑使用分组标签来进行描述。并将标签的基线与组中的第一个复选框对齐。通常，当复选框垂直列出时，更容易区分它们的状态。通常，复选框应左对齐，当您需要表示层次结构，例如当父复选框的状态控制子复选框的状态时，请使用缩进格式。
开关是两个互斥状态（打开和关闭）之间的可视切换。总有一个默认使用，拨动开关即立即生效。它是在打开时颜色是可见的，关闭时出现无色或灰色。
移动端中切换开关一般有交互动效，PC端没有。
开关与其他选择控件最大的区别是：开关操作后，程序立即执行相关操作。而其他选择控件一般用在表单里，仅反映当前的选择状态，如果要执行操作并生效，需要点击额外的提交按钮。
注意:
不要为切换开关创建层次结构，避免使用开关控制单个细节或次要设置。开关的层级结构这在视觉上更容易分散注意力，而且会造成一种错误的印象，即所有的子选项都是开着/关着的。所以禁止滥用开关按钮。
开关具有比复选框更明显的视觉效果，因此它控制的功能应比复选框更为强大。如，可以使用开关打开或关闭一组复选框设置。因此它控制的功能应比复选框更为强大。如，可以使用开关打开或关闭一组复选框设置。
注意加载状态
如果开关所执行的操作需要考虑加载状态，例如开关切换状态不是瞬间（短时间）完成的话，开关则需要显示加载状态。
另外一种目前比较流行的加载方式是视觉上加载成功，服务器随后加载成功。用户操作开关之后，开关视觉上立即响应改变，然后再向服务器相应改变，中间会存在一定的时间差，这样能带给用户更流畅的体验。
避免在开关内添加说明标签。关于开关的打开或关闭，可以通过视觉样式让用户很明确的感知。额外的提供文本标签描述开关状态是多余的，还会使界面混乱不堪。
单一的 icon 通过颜色或图形的变化来表示开或关的状态。常见的且体验比较好的设计方案是将开关样式设计为当前状态样式。如下图相机界面内HDR与AI功能的关闭与开启状态。
当然也有其它情况。最典型的就是视频的播放暂停开关，他们表示的就是操作后的状态而不是当前状态。
名称变化，名称变化指的是开关按钮依赖于其名称的变化告知用户开关的当前状态和操作，如：关注与取消关注，已关注与已取关。名称变化的开关由于语言的模糊性，仍然造成了部分歧义。我们可以在操作后加入其它提示来消除歧义（如：toast 提示）。
是否统一操作状态倒不是关键，关键是我们是否能够让用户理解按钮相应的意图，不做出混乱的选择便可。
通常用于切换不同的视图，或者在表单中作为单选组件使用。一个分段tab通常会由2-6个单选项，可以是图标和短词，它适合导航形式，被设计成一个水平或竖直的容器进行单选。一组选项卡中的所有内容应该根据较大的分组原则进行分组，每个选项卡的内容与其他选项卡的内容都互相独立。
可以包含下拉列表的选项和使用翻页。
固定的选项卡应该只包含有限数量的选项，并且保持选项的位置不变，有利于用户记忆。可滚动选项卡用于有很多选项或选项数量可变的情况，但不推荐使用。
优点：将所有选项都摆在一行或一列，对空间的利用率能达到最佳，设计样式也可以做到非常直观，漂亮。
缺点：不大适合处理长词，短语，如果要将这些内容放在选项中，就须精简文本。水平空间非常有限，尤其是移动端，即使是少量的选项，有时候你仍然要精简文本。
Tab选择时，不要加载整个页面，只有选项标签及其内容区域应更改。交替切换标签时，用户应该感觉自己在同一位置。不要在选项卡内容中包含支持滑动手势的内容，因为滑动手势是用于在选项之间导航的。例如，避免在选项卡中包含一个可以拖动的地图，或者一个可以滑动删除的列表。
当功能不可用时，显示空状态，加入情感化提示，不要删除选项卡，确保所有选项卡都启用。
空状态：是用户在使用产品时某个界面无法显示的时刻，即没有其他元素。良好的空状态可以让用户知道正在发生的情况，发生的原因以及该怎么做。
这是四种常见的空状态类型：
首次使用——新产品没有内容可以显示时，例如打开新注册的印象笔记时会遇到这种情况。
内容被清除——当用户完成类似清空消息或收件箱等操作后，会出现一个空白的屏幕。
出现错误——产品由于网络问题造成离线时，会出现空状态的使用。
无结果——如果用户进行搜索，但是查询内容为空时会发生这种情况。
具有3个选择项的Tab标签，我们能明显区分选中和未选中状态，应为Tab标签是单选控件。但是，如果只有两个选项，又是矩形按钮的选择项，则很难区分当前选择是哪个，哪个为选中状态？我自己某段时间一直默认颜色填充形按钮是选中状态，但经同事一提，一阵猛惊，那另一个是否为选中状态？在两个选项中存在选择疑惑，我们如何确定状态呢？
因此，我努力在统一风格的提前下，找出固有的特征，增强选中状态。这个大家如果有更好想法，欢迎留言。
标签选择通常用于要从3-10个选项中进行多次选择操作情况，它们最适合用一到两个简短的单词或数字。它们设计的形式一般是一个个按钮，通过背景色来区分“选中”和“未选中”。由于不存在2个选项的情况，所以
面对多选标签时，面对多个选择项的彼此堆叠，需让让用户知道他们可以选择多少个选项。添加辅助说明，既可以明确它是多选，又可以规范的最大选择项；选项过多时进行标签分类。
优点：节省空间，标签堆砌在一起的具体样式是由文本长度决定的。它们给人的印象是轻量的，有趣的。
缺点：这种形式与tab选项形式有一样的弊端，都不能很好的处理长词。不建议对文本进行折行或者调整大小，会不方便用户阅读，同时使用两行以上的标签会使得每个标签非常难以快速扫描。
其他样式：用圆形或其他形状来表示一个个标签选项，比较重要或更受欢迎的选项形状更大，用户选中多个圆形就是选择了多个选项；也可以在常见的按钮中加入图片的元素，这种的话样式新颖，但要注意选中时的文字图片的对比，文字是否具有可见性，适当加上文字选中效果。
Tab标签和多选标签
选项数量是tab控件和标签控件之间最大的区别。一个连续的背景帮助用户理解他们必须要选择一个，而一个分离的背景表明他们可以选择多个。
列表选择控件包含选择按钮，容器框，项目列表和标签。用户可以单击容器框中随附的项目，以从列表中选择一个或多个。列表框可能会滚动，具体取决于它包含的项目数和可见区域，更复杂的列表框允许用户通过将项目从一个列表框移动到另一个列表框来调整容器框的大小，重新排列项目列表以及进行选择。
优点：
交互成本低：列表框不需要用户单击任何内容即可在进行选择之前显示其中的选项（但是，如果有太多项，它们可能需要用户滚动列表）。
增加了可见性：一次查看多个选项的能力可以加快决策速度并提高选择准确性。列表选择为内容提供了更多的空间。它们易于阅读，可以容纳多文字，文本可以换行，还可以增加图片。但是，应避免在多列列表框中进行水平滚动。
用多选双列表框，用户可以控制项目的显示顺序，并获得所选项目的清晰概述，这在列表框包含多个选项时很有用。
缺点：
空间：他们往往很占用空间，不适合用在垂直高度受限的页面中。
陌生：用户可能不知道如何立即与列表框进行交互-特别是，如果多选列表框中未包含复选框，则他们可能不知道如何选择倍数。这就是为什么将复选框包含在多选列表框中非常重要的原因，除非它们将注意力集中在多选功能上或增加不必要的屏幕混乱。
用户可能无法一次看到所有选定的选项：如果在可见区域中看不到更多的可用项目，则用户可能无法同时看到所有选定的项目。为避免此缺点，请在列表框上方将所选项目显示为标记，或在不可滚动的列表中突出显示所选项目。
可以根据选择类型进行分类，这些列表框形式都可以滚动。
用户只能从互斥选项列表中选择一项。最初的单选按钮被用于列表中超过6个选项时，被设计成垂直方向，圆形轮廓，并摆在列表项的开头，这就是列表单选。现一些设计中，选中被设计成在列表选项外加一个描边框形式或带有背景色，用以节省水平空间。
这种类型的列表框包括使多个选择更加明显的复选框，设计样式上，web通常是在列表开头处设计一个正方形描边框（复选框）。
这种类型的列表框由两个列表框组成，两处的列表框内容可以相互拖拽。比如左侧的列表框已选中项目可拖拽至右侧列表框，同时支持表内上下拖拽更换顺序。
点击“ 右箭头”按钮可将左侧的列表框所选项目移动至右侧列表框。多选双列表框实际运用较少。
这是是一种弹出按钮，单击后会显示包含选项列表的菜单。下拉列表以最简单的形式包含四个主要部分：一个容器框，一个朝下的箭头按钮，一个项目列表和一个标签。用户可以单击向下箭头以显示互斥项的列表，从中只能选择一项。标准下拉菜单是针对我们所理解的“下拉”这个动词。在激活状态，当你点击文本输入栏的地方时，它会打开一个菜单。列表项仅在单击向下箭头后出现，选择一个项目或在下拉列表的外部单击将其关闭。
下拉列表的优点：
为用户提供最佳选项的功能，默认情况下处于选中状态。
淡化替代选项和更改：由于下拉列表隐藏了其他可用选项，因此它们很好地淡化了替代选项并过分强调了进行更改的能力。（这在默认值可以满足大多数用户的情况下，并且其他选项可能对非专业用户来说是危险的或令人困惑的情况下是有利的。）
熟悉：下拉列表是大多数用户熟悉的选择机制，因为下拉列表在Web和本机应用程序中得到广泛使用。
缺点是需要点击项目列表中的选项，包括：
列表包含过多的内容，可能会很麻烦地滚动。
当用户习惯于捕获众所周知的值时，它们会使用户放慢速度。例如，当输入生日或信用卡到期日期时，与下拉列表进行交互相比，在直接键入内容通常更快，更容易。
忽视：由于表单内容非常紧凑，因此用户可能会意外忽视表单，网页和应用程序中的下拉列表。
容易消除：不小心将光标从框中移开会关闭下拉菜单，不得不重新开始选择过程。
当长型下拉菜单的设计不是特别理想时，你可以把列表分组，这样搜索起来更加简单。
可编辑的下拉菜单在菜单上方显示当前选择的菜单项，用户可以输入菜单中未列出的值。您可以将用户可以输入的值的类型限制为某些类型。例如，设计软件中输入字体大小时，系统会默认一些数值，同时支持你编辑修改。
为了更方便用户的填入，支持字词搜寻，填写一半时，就会出现带有关键词名称选单。在选项很多的情况下，这个功能变得格外实用。
下拉菜单多选是复选框的延伸：用户可以在同一个输入区域选择多个。这件控件用的比较少。
这种控件我一般在多个对象进行对比时才使用，如选择多个公司比较他们的能耗水平与用电规模，由于公司字段比较长，在查看选中状态时需注意容器能否充分显示选择的字段，在导航菜单中会明显拥挤，在表单中使用相对自由。如果可以的话，筛选中尽量避开这种类型。
将站点，应用程序或系统的所有不同部分合并为一个长列表，该列表进一步细分为子类别，并可以从导航栏中访问，例如下面华为云的下拉列表，大型下拉菜单用于显示大量的选项，分类，数据集或其他类型的相关内容组。
任何偏离你所设计的平台标准的行为都会给用户带来额外的认知负担。
选择控件在操作过程中必须更改其状态/外观，以便用户知道是否能选中，是否被选中。添加这些小的视觉反馈，以使用户正向的理解，但是差异化设计又不能喧宾夺主。
默认就是选择器的开始状态。向用户表明，可对该选择控件进行操作。
选择按钮置灰显示，用户将无法与选项进行交互。除非产品规则指定，否则很少会遇到这种状态。
像按钮一样，选择控件应向用户指示它们是可交互的。通常，通过突出显示鼠标悬停项目区域的背景来突出显示，吸引用户的注意。触摸设备没有悬停状态。
当用户按住鼠标/手指点击，选择控件处于被点击的状态。
列表多选支持批量选择和清除
使用列表多选，一次全选或取消已选择的多个选择项毫不费力。
下拉列表状态
下拉列表在按下状态时会打开选项列表，还有种常见做法是悬停状态时直接打开选项列表。我更喜欢第一种，第二种在我没有明确操作的情况下，下拉列表就自动打开的这点让我比较困惑。
列表选择状态
列表选择控件在管理文件时，只有通过按下选中选项才能进行编辑性操作。
点击按钮进入批量编辑状态，状态未选择时，操作按钮置灰。按下/勾选列表选项后，操作按钮点亮，展示已选项的数量，即对当前勾选操作的反馈。点击操作按钮，进入对应操作编辑流程。
一般都是用户没有进行选择，单击“提交”按钮后收到失败反馈。
在实际的使用过程中，选择控件有默认、禁用、悬停、按下等不同状态，虽然这些状态看起来很多，但是这些状态涉及到实际交互的需求和不同场景，并且是实现可靠交互的基础。
这个针对于单选框控件
如果用户不想做出选择，那么应该提供一个中立选项。为用户提供一个明确的方向，中立选项比错误选择要好。
在单选框的选择时，要充分考虑用户的实际情况，给出的选项要覆盖到所有的情况。例如，要考虑到用户不进行选择的情况，这时需要提供一个“无”的选项；给出的选项有可能都不符合用户的情况，如果所有的选项用户都不会选，就需要提供一个“其它”选项。
单选框所有选项应该满足“互斥”的原则，因此选项之间要避免存在交集，选项覆盖要全面，不能出现遗漏。例如，在一个年龄的选择设置上，如果提供的选项为“20-30岁”和“30-40岁”，那么如果用户刚好30岁该如何选择？
这个针对于单选框，Tab切换，下拉列表
单选框最好有一个默认选项，当单选框把选项默设置为为选中时，一旦选择了一个单选按钮，用户就不可撤销，无法返回默认状态；而默认选中一个则可以防止这类问题，一开始就向用户传递信息必须要在这组单选项之中选择一个。
下拉菜单中默认选项优与请选择，如果根据权限或使用频率能定位到适用于大多数用户的选择项时，就不要默认为“请选择”，而是使用默认选项，这样做可以降低交互成本和节省用户的时间和点击数。
如“国家”和“语言”字段。在这种情况下，根据权限IP，默认选项是合理的，绝大多数用户也不会更改选项，因此继续选择就会很烦人，耽误时间。
带有默认选项的单选按钮组合是给用户的强有力建议——甚至是推荐。默认选项可能会引导用户做出最好的决定，并在接下来增加他们的信心。尤其是默认选项可以辅助用户，并让用户向着产品所希望的方向倾斜。
在用户需做出复杂决定或处在不熟悉领域时特别有帮助。当标题和描述都很陌生的时候，默认选项可以引导用户在各个可能未能理解的选项里做出最好的决定。
在产品上总想说服用户做出对产品有利的动作。默认选项就会引诱用户去走特定的道路。常见的例子就是活动页面，对于忍痛离开按钮低调置灰显示，对于留在页面按钮高亮显示。
当然也有许多时候是不带默认选项的：
不知道用户行为或想要什么
选择是否会冒昧，如性别，称呼等
防错，保证用户能够看到选项并动手做出选择，比起用户会出错并事后给出警示强
如果希望用户只选择一定数量的项目。要强制执行此操作，如果用户单击的次数多于所选数量，则他们最早的选择将会被最近的选择替换。同时注意需要加上辅助说明。
选项排序会影响用户操作，因此需要遵守一定排列原则。
你应该将所有选项按逻辑顺序摆放，比如按被选中可能性由大到小，按操作难易度由简单到复杂，按风险由小到大，将最安全的操作放在前边，列表选择一般按照信息时间排序，由新到旧。
选项的顺序可以说服用户进行选择，就像前面说的默认选择项一样，他们可能只是因为第一个选项在列表中的位置而选择了第一个选项。可以辅助用户，也可以让用户向着产品所希望的方向倾斜。
一般情况下，左侧对齐排列发挥最佳效果，标签选择除外。竖直排列相对于水平排列而言，容易读取和定位，每行一个选项足以，可以提高用户的浏览效率并减少错误。
但是竖直排列会占用较多的垂直空间，如果垂直空间受限，可以考虑水平排列。水平排列的时候，要注意每个选项之间的间距尽量大一点，以清晰的传达选项对应哪个标签。
移动端更多的情况是左侧标签对齐，右侧按钮对齐，二者与页面留出相同的边距。垂直屏幕占比小，常用于呼出选择、开关等有选择操作的表单标签。
交互区域要适当大。单选框的面积较小，用户在点击的时候会比较困难，尤其是在移动设备上，易误操作，可以通过扩大点击区的交互区域来提高易用性。复选框和单选按钮一般都很小，点击或点选会很麻烦，可点击区域中应同时包含按钮和标签，增加操作区域的面积，方便用户操作。
列表选择中可以点击容器框所在行区域来切换行对象的选中和未选中。
每个选项都要配合相应的文字标签来指示该选项含义。
最好在每个区域上提供同类型的标签，这样可以给用户一种视觉稳定性的感觉。同时尽量保证每个文字标签用语的表达的一致性，避免否定词，不要出现有的用名词，有的用动词的情况。
不要在同一组标签中混用文字和图标
一个分段就像是一个按钮，按钮内当然可以使用文字或者图标代表其含义，但是请不要在同一个Segment Controls中混用文字和图标，避免让用户觉得混乱和不一致。
文字标签需要简洁明了，一般使用短语而不是句子，因此不需要以句号来结尾。如果需要解释说明，可以在选项下方使用单独一行文字说明。仅体现每个个体之间的差异，不用重复选项之间相同的部分，将重复部分提出来放在整个选项的上方。
辅助提示很好地补充在消除歧义上的不足，但我们也需要合理使用，进行克制，否则就会造成不必要的视觉噪声。
暗示指的是用户在操作选择前，给予用户的提示，用户根据这些提示可以判断当前状态以及操作后状态。
比如在界面风格模式，主题色，导航模式切换中，用户可以通过当前界面的样式判断当前是是什么模式，以及选中其它选项后会产生什么结果，如下图（来源蚂蚁设计语言）在选择图标中就给予相对应模式的提示。
下图，白天模式与夜间模式，用户可以通过当前界面的样式判断当前是否已经开启了相关模式，从而判断拨动开关后是什么结果。
环境暗示的优势是我们不需要其它设计和反馈告知用户当前状态，可以通过选择对象和当前界面环境给予直观暗示。
由于按下开关控件后立即执行操作，如果操作比较危险，请在危险操作后加入二次弹窗确认，告知用户当前状态以及潜在风险，避免造成严重损失。
当用户操作后，提示框气泡反馈告知用户，让用户知道自己是触发了开启还是关闭。弹窗提示强度大，使用在一些危险、重要的反馈中，提示框则使用在一些轻量的提示中。
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明。下图是手机信号设置和省电设置相关的选择，开关的主体是名称，但是下面的一行辅助文案很清晰地传达了开关开启后的后的状态。
并不是所有提示都需要让用户看见，我们可以给予用户其他感官的信号告知用户当前状态。界面设计与交互中，我们也仍然可以使用听觉和触觉来消除开关的歧义。
在安卓微信聊天列表中，选择一行聊天对象长按，手机会轻微振动一下，表示已点击，给予触觉反馈，同时展开的多个选项可进行选择操作；手机在关闭电源时，手机会卡擦一下，给予听觉反馈，表示已关闭屏幕，而不需要眼睛盯着屏幕关闭。
我们很容易陷入到特定控件的中，所以我最好是从整体上开始思考。然后做出最佳决定，决定使用哪种选择设计最有利于一致性、差异性和层次感，控件的高度，宽度，样式设计和选项数量都是至关重要的因素。我们可以从被选择对象是单选还是多选出发，来确定使用哪种选择控件，可以根据下图情况选择，当然由于使用场景和内容的不同，请选择性参考。
单选按钮认知成本低，它能可见所有选项并让用户容易做出选择。
单选框，用户能够很快看到有几个选项以及每个选项是什么，而不用点击或其他操作再去发现这些信息。让所有选项都可见，使用户可以方便地进行比较，这样可以减少认知负荷，帮助表单更加透明。
涉及到选择项与内容组之间以及在相同层次结构中进行导航时，使用Tab标签。不要将标签用于无关的目的地，也不要加载选项卡的整个页面，只有选项卡及其内容区域进行更改。
如果选项的数量超过6个时，应考虑使用下拉列表中或列表单选，因为单选按钮太多，也会令人不知所措并引起混乱，用户无论如何都无法记住所有的选项。
下拉列表简洁。更多适用于可预测的、类似的或增量的选项(年份选择 )。数量较多且相类似的选项选择用下拉菜单整合。
如果屏幕空间有限，请使用下拉菜单。如果不是，请使用列表框。使用下拉菜单，可以使用默认选项，并淡化其它选择。
选择项标签短小且一致时，使用复选框，可以方便地进行比较，这样可以减少认知负荷，帮助表单也更加透明。
列表多选一般应用于6个以上选择项进行多选的情况，数量更多出现将翻页或滚动情况，需要告知用户已选多少条数据，并在选中选项时出现相关操作。
选择项数量在3-10之间，标签不能过长，考虑使用多选标签。多选标签它们给人的印象是轻量的，有趣的。
切换开关是一种数字开关。任何由切换开关触发的效果应立即生效。如果不是这样，最好用单个复选框替换切换开关。
多选标签不能很好的处理长词。不建议对文本进行折行或者调整大小，因为会不便于用户阅读，使用两行以上的标签会使得每个标签非常难以快速扫描。
你应该防止出现很难看清选择哪个控件的情况（确保按钮和文本标签的间距），可以考虑使用选择标签或拉大间距以此来在视觉上清晰地分隔选项。
本文介绍了多种选择类控件，从用户使用选择类控件的角度阐释了模式定义，涵盖了大多数录入场景。选择类控件本身也需要不断进行迭代、优化和拓展，以适应更多的应用场景。后续我将持续关注，希望本文的能帮助你。
欢迎留言纠正，感谢阅读。
文章来源：tob.design 作者：小龙
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
亚马逊作为一个知名的电商平台，它的成功背后却有一个很难让人理解的设计逻辑：成功的设计不一定是美观的。为什么会这么说呢？本文将从四个维度展开分析，希望对你有帮助
编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。
表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。
设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。
针对互联网表单设计，我倡导的原则如下：
我们先看看表单的结构，表单主要由5部分组成：
标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。
每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。
1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。
顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。
2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。
浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。
左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。
此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。
对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。
与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。
4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。
内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。
另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。
5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。
但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。
此外，输入项一多，还得记忆那个图标所对应的意思。
6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。
但相比其他几种标签样式来说，需要一定的开发成本。
关于标签样式的选择
输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。
选择适合的控件样式，能在一定程度上提高表单填写的效率。
在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？
以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。
1）文本框
文本框包含了单行文本框和多行文本框。
针对单行文本框的设计建议：
a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。
b. 采用字段掩码，自动匹配特定数字的输入格式。
例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。
c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。
d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。
e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。
例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。
f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。
知识扩展：什么是7加减二法则？
早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。
针对多行文本框的设计建议：
使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。
固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。
2）选择框
包括下拉列表、选框、开关、日期选择器等。
对于选择框有如下几个建议：
a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。
为什么？
因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。
但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。
例如：根据定位数据预先选择用户所在的国家/地区。
不过，请谨慎使用。
b. 当选项很多时，提供检索功能。
c. 提示信息要明确，要让用户明确自己选择的是什么。
3）单选框与复选框
a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。
b. 选项应该易于理解，容易区分。
c. 尽可能提供默认选项。
4）关于控件的选择
a. 选择框优于输入框。
任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。
相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。
用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。
b. 单选框与下拉选择框。
单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。
另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。
因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。
下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。
若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。
5）关于必填项
大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。
但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？
它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。
为了避免这种误解，可采用文本框内暗提示。
它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。
提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。
这里主要想讲讲错误提示的设计：
1）关于错误提示的最佳位置
Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。
错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。
它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。
因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。
下面来看一个简单的例子，如下图：
当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。
哪一个位置是最佳位置呢？
答案是：右边。理由如下：
a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。
放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。
但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。
b. 对于上边的错误信息提示，有着更高的认知负荷。
当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。
c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。
手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。
虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。
综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。
当然，如果开发时间有限，都选择放置下边也可以，方便适配。
2）帮助信息
有时候需要帮助性信息，来辅助用户完成表单填写。
当文本简短的时候，可以直接放在改输入框的附近。
当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。
也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。
如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。
在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：
针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。
首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：
方案一：采用4列布局，标签顶对齐。
那为什么标签不采用右对齐呢？
四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。
总体上来看，缩减的长图并不理想。
方案二：三列布局，标签右对齐的方式。
由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。
但字段若出现换行，则页面信息模块是混乱的。
根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。
同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。
综上，最后还是采用单列布局。
面临的问题该如何解决？
我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。
我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。
如果是这样，用户的本质述求就是想要掌控感。
对现有的单列布局做了以下几个处理：
感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。
文章来源：人人都是产品经理 作者：@Nick
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。
这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds：庆祝用户进行了某项操作；欢迎用户使用新的应用程序或体验；确认用户成功使用某款产品。——《谷歌声音设计指南》
声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音，或者每次待办事项标记为完成后就会出现庆祝的提示音。
不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。
触觉可以和声音配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时，触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》
除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。
举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。
产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。
图片来自Material
动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》
动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的，加强用户的满意度。
简言之，动图可以应用于不同的场景，通过过渡和变化的吸引用户。
动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》
在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”
通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。
图片来自Bribble｜制图Elena Petkovska
我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。
你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》
APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。
我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句话：一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。
图片来自Material
用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》
像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。
在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。
举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。
通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。
素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。
图片来自Material
离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》
离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。
如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。
假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。
谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。
我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。
文章来源：人人都是产品经理 作者：Danny Sapio 译者：Michiko
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户行为分析，认识用户满足用户最直接要求为设计中心
用户行为是指用户在使用产品时的行为，针对网站而言，就是用户在进入网站后所有的操作。网站用户行为分析，就是在获得网站王文量基本数据的情况下，对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与产品目标及策略相结合，从中发现目前网站存在的问题，为进一步改善网站，满足用户需求，提升用户体验提供依据。
常见的用户分析内容包含以下几个方面内容：
（1）用户在网站的停留时间、跳出率、回访率、新用户、回访次数、回访相隔天数；
（2）注册用户和非注册用户，分析二者之间的浏览习惯；
（3）用户所使用的搜索引擎、关键词、关联关键词和站内关键词；
（4）用户选择什么样的入口形式（广告或者网站入口链接）更有效；
（5）用户访问网站流程，用来分析页面结构和网页覆盖数据；
（6）用户在页面上的网页热点图分部数据和网页覆盖图数据；
（7）用户在不同时间段的访问量情况等；
（8）用户对于网站的设计及字体配色的喜好程度等。
通过研究发现，80%的用户仅仅使用了软件20%的功能，而那些没用的功能不仅浪费开发时间，也使软件更加难以使用。一个成功的软件应该是简练精干的，可以单独职能化的化解决的单个问题，要以满足用户最直接要求为 i设计中心。
很多网站往往为了满足不同用户的需求而增加功能，增加的功能必然需要再界面中用视觉呈现出来，这就会使网页内容越来越多，很多的功能掺杂在一起，如果不经过过滤，必然会违背原来阅读的初衷，所以每一个功能的增加都要慎重。
用户对于互联网功能需求也和对软件的功能要求一样。既喜欢简单的，也喜欢复杂的。而且用户的体验需求也会随时随地的发生变化。这里的复杂不是指很难用、流程超级复杂、容易出错的用户体验，而是指丰富的功能。
首先如何让用户体验更简单呢？当然将复杂的功能去除是最好的，如果实在无法去除某个复杂的功能，那就应该将其隐藏。因为大多数情况下，不常用的功能要比经常使用的功能占据更多的空间。
真正好的用户体验其实是给用户所需的任何功能，为用户设计一款“复杂”的产品，并将这款产品从表现上简化，让基础功能操作简化，给扩展功能保留使用入口即可。这个设计思路最具代表性的例子就是Microsoft Office和Adobe
系列产品。
用户的需求并不是一层不变的，短期内用户会因为某种强烈的需求要一个产品。随着市场和行业的不断发展，用户对于一个产品的评价也会随之发生变化。例如肯德基刚进入中国市场，被人们认为是一种的象征，小朋友以吃一次肯德基为荣。随着经济条件的发展，人们对于肯德基的体验就完全不一样了，热量过高，不利于健康。这是一个很典型的对一个产品评价的变迁的过程。
用户的期望值会因为因素而发生变化，有的来自外部的环境，有的来自产品自身，有的来自用户成长。这些影响期望值的因素都会相辅相成的影响。有的时候不是我们的体验或者产品变了，而是用户发生了变化，所以用户体验的设计，除了要考虑产品本身以外，还要考虑用户所需要的。
用户通常会根据个人喜好做事，这就是习惯。习惯没有好坏之分，关键要看根本的是什么。从用户体验的角度来说，任何产品都可以分两种：遵循现有用户习惯的产品和颠覆用户习惯的产品。
在设计网站时可以在技术上创新，在业务模式上改变，也要在以下几点上遵循用户的习惯。
生活和文化背景是必须要遵循的习惯。想去颠覆或是磨灭一个群体甚至是民族的习惯，基本上会付出惨重的代价。例如使用红色表现喜庆，白色表现悲伤，是中华民族几千年的一种传统习惯。如果想去改变这个习惯，使用其他颜色肯定起不到好效果。比如：可口可乐官网就是用红色做的主色调，而红色也与“可口可乐”品牌主色调相统一，点缀少量黄色，非常符合中国的传统文化，也更容易使中国人接受。
在设计网站页面时，还要考虑到网站用户群体的基础属性，例如年龄层、身体承受力等。可以将页面中的文字和图片做放大处理，使老年人可以清楚的看到内容。比如一些老年网站，会采用大号字体，强对比色便于阅读，而且在设计的时候也不会使用过多的色彩，虽然整体视觉可能显得简陋不够丰富，但是充分的考虑了老年人人群的特点。
人在评定事情好坏的时候，通常喜欢以自我为中心，所以用户体验设计时，必须满足用户这种需求。使每个用户可以体会到以“自我为中心”的优越感，这样用户就会成为最忠实的客户。例如很多人沉迷于网游就是因为在现实生活中会受到各种各样的限制，而无法实现真正的以自我为中心，而在网游的世界里却可以完全实现。
在设计网站时，设计师通常会根据网站内容把网站划分为不同的区块，然后在分别进行美化。设计师在思维定势中 自我感觉良好，一旦突破了思维定势就会有新的收获。作为用户体验的设计师来说，有下面两个方面可以颠覆。
在设计网站时，有很多页面都具有独特性，例如注册页、登录页和搜索页。这些页面用户只会访问一次或者几次，而且这些网页本身也是在网站发展的同时逐步完善的。所以，在用户体验的设计中，这些习惯就可以颠覆的。设计师可以根据个人的喜好对这些页面进行设计、优化和修改，而不会影响用户的习惯。
在网站设计中需要结合当前的潮流趋势和的技术来表现网站，这样才能给用户带来全新的体验。页面中流畅恶化便捷的交互应用，可以给用户带来良好的体验。
尊重用户秀感可以快速让用户接受网站，同时也会由于尊重了用户的习惯而减少产品对用户的刺激，会使得用户很难成为网站的忠实用户。另一方面，如果不尊重用户习惯，用户可能很难马上接受。所以在用户体验设计时，要根据网站具体情况自我权衡。
最好的办法就是在网站核心用户体验不变的基础上，增加新功能、设计风格逐步变化、进行网站整体融合。
转自：站酷-忻芸
蓝蓝设计的小编 http://www.lanlanwork.com