消息通知可以及时地将状态、内容的更新触达到用户，用户则可以根据收到的消息做后续判断。但是如果没有及时将重要消息触达到用户或者滥用消息，则失去了消息通知的初衷。特别是针对涉及复杂任务流程的产品，消息类型繁杂，难以全面盘点消息类型，消息系统的设计就显得尤为重要。
希望通过这篇文章让各位在设计消息通知系统的时候能够更加全面高效。
消息通知需要为产品服务，帮助用户快速获取对应的通知信息。收到一条新回复的提示、工作台展示工作进度、朋友的来电，生活中处处是信息的交换。在 App 和网页应用中最常见的信息交换方式则是消息通知。
消息作为一种信息交换方式，抽象其过程，即为“在达到某一触发条件下，由发送方发送消息给到接收方，接收方可针对此条消息提供反馈”。需要包含以下关键因素：
消息触发时间与条件（何时什么事）：如按周期重复的时间点，或系统状态变更、用户操作结果等；
消息发送方（谁发现的事）：可能是系统、第三方服务商，或者某个用户；
消息接收方（谁需要知道）：即接收方，可能是系统中的全部用户，也可能会根据权限划分推送到某个用户群组，或者是某个特定用户；
消息触达渠道（怎么找到他）：短信、电话、App 内通知等；
消息通知内容（告诉他什么）：短信的文本、电话对话内容、通知消息的文案等消息通知；
消息操作反馈（他可以干嘛）：主要分为只读与操作反馈。只读，即当前消息用户在浏览后不需要做更多的操作，主要以了解为主；操作反馈，即当前消息需要用户浏览，且在浏览后做相应的后续操作。
好的消息系统要满足什么条件：
全面：通知的消息项要完整全面，用户才能放心地通过消息通知系统了解消息更新内容；
及时：消息的触达方式要及时有效，在消息相关事件发生后，用户能在第一时间获取到信息并提供操作反馈给到消息发送方；
高效：能通过合理的消息发送途径，允许用户设置及合并相似信息等方式避免过多消息侵扰用户，让用户能够高效处理消息通知。
设计全面、及时、有效的消息通知系统需要对消息的六个关键因素进行全面盘点，通过分步的方式逐步完成消息通知系统的设计。主要分为以下三步：
① 盘点系统中包含的消息项：包含其触发条件、通知来源及通知对象。需要盘点完整消息项从而保证消息系统的完整性；
② 确定消息触达渠道：包含各消息项的触达渠道。让所有消息都能触达到用户的同时，能够让重要信息更易触达，保证消息通知的及时性；
③ 撰写通知内容与操作反馈：包含各消息项的通知内容与操作反馈。让消息内容能够有效地传达给用户，让用户能快速反馈、操作。
盘点的过程，即对消息通知清单的梳理。与产品、研发等团队成员的沟通也将使用该清单。最终目标即完成下方表格的填写：
当前步骤需要对系统中可能会有的消息项进行完整的盘点。盘点消息项可以通过按消息类型走查方式完成。市场上比较有共识的消息的分类方式主要分为禁止、警告、成功三类。但是在实际设计工作中还需要配合以下的消息分类方式去更完整地盘点消息项：
盘点出的每个消息项
都需要补充以下四个关键因素：
触发条件：结合产品核心场景梳理完整。可通过状态图或泳道图查缺补漏（详见下段内容）;
通知来源：可能是某个内部系统，可能是某个用户组，也可能是某个具体用户。用户组的划分需要提前与产品、研发同事沟通完成；
通知对象：可能是全部用户，也可能是某个用户组或具体用户。由触发条件中的场景决定；
重要性：需要与团队沟通得出，可使用“高”、“中”、“低”的分类方式。
盘点完成的消息项使用下表进行整理，方便产品、设计、研发之间的沟通。
用流程图或泳道图查缺补漏：
对于 ToB 或 ToG 类含有复杂状态转换以及任务流的产品，除了使用分类的方式盘点消息项，还需要对照流程图或泳道图查缺补漏，避免消息类型的遗漏。
如，顾客线上购买商品并收取商品的商品相关状态变化如下图所示，每个状态都可对应着一条消息项：
线上购物过程中的消息流程图示意
当系统内包含多角色，且角色间流程有交互时，则可以使用泳道图的方式进行梳理。在泳道图中的每一条状态变更线，都对应着一个状态变更提醒。其中角色间交互的线，由于需要角色主动处理方可进入下一流程状态，这条消息一般会成为一条待办消息。
什么类型的消息不要纳入消息通知系统：
需要注意的是，虽然通知的完备性很重要，但某些消息在前期梳理时就需要从清单中剔除，包括：
确定要推送给用户的消息类型后，需要给各消息匹配适合的通知方式。不同的通知方式会有不同的适用场景，可对照下表结合第一步整理的重要性配置消息的触达渠道：
消息触达渠道的配置结果到第一步的表格中：
平衡通知量：
一个好的消息系统需要能有效触达的同时不过分侵扰用户。这就要求我们对系统实际运行中可能会出现的通知量进行预估，并适量调整通知方式，让重要的消息能够更有效及时地触达到用户。最终调整后的消息数量与提醒强度的关系最好能形成如下图所示金字塔的模式。
提醒强度与消息数量的金字塔关系
合并重复消息：
对于出现频率较高，且用户不需及时了解每条消息的消息项，可以通过合并消息的方式减少通知的数量。合并主要有两种方式：合并流程过往节点信息和合并同类消息。
两种合并消息方式
智能推送：有条件的系统可根据用户行为分析及用户画像，进行智能推送。如基于用户画像按类型推送运营类消息，基于用户接受消息数量，判断是否合并消息推送等。
渠道间消息项的延续与统一：
出于信息持续性的考虑，触达渠道之间有部分关联关系在制定消息触达渠道时需要注意，如：
通知的内容需要满足简明易懂的同时，还要让用户能够快速处理。根据大量经验总结，通知内容的撰写可使用一个通用撰写公式：
在应用撰写公式写内容时，需注意以下要点：
除了以上通用注意事项，由于渠道本身的特征差异，还需注意以下渠道相关的要点：
电话：需要设定客服话术标准，一般需要在会话开始前先告知用户来电是谁、有什么目的。在讲述完通知内容后，还应告知用户如何处理当前信息，如果想了解详细内容该前往哪个渠道了解。
短信-来源平台：由于通知类短信的发送号码可能会由于服务商设置的问题导致有多个发送号码发送给用户，用户无法根据号码判断发件人身份。故需要在短信最开始说明平台来源，建立品牌认知，避免用户错认为是垃圾短信。如：「腾讯科技」***
短信-操作反馈：由于大部分短信为纯文本短信，相关操作反馈需要通过链接或者路径指引的方式提供。若短信包含详情链接，链接最好能设置为保留根域名的短链，如：点击了解详情：cdc.qq.com/d8djei
邮件：与短信相似会有来源可信度问题，邮件内容需包含品牌元素，同时发件的邮箱地址后缀使用产品官方网站。另外需要注意，某些邮件软件会设置不自动下载图片，邮件重要内容不要使用图片。
push 推送（移动端）：是消息在移动端的特有触达渠道，由手机系统发送。发送的信息格式会受系统要求有所限制。最新的推送要求可参考相关设计规范文档或接口规范。应用的 icon 与名称系统会自动补充，撰写文案时不用包含。
微信公众号（订阅号/服务号）：由于微信对订阅号与服务号的消息推送方式会经常变化，需要确认最新的要求并撰写文案。
在完成通知内容以及操作反馈的梳理后，对消息梳理表格进行更新，补充相关信息：
自此，消息项的盘点已经完成，后续可基于该表格与产品、研发沟通。当业务出现变更时，也需要对表格内容进行同步更新。
消息通知的触达渠道中，电话、短信、push 推送的呈现由系统决定。但是若产品有独立 App，往往需要消息中心去承载全量的消息列表。本章会介绍如何设计消息中心。
不同应用的消息中心处理方式受产品定位、应用框架等因素影响，设计差异化较大。但是可以通过按路径分割去简化设计：消息中心的入口、消息列表的组织方式、消息卡片的样式、消息的设置等几个部分。
1. 消息中心入口
主要有底部 tab、个人中心附近的图标入口、个人中心的菜单项等三种入口形式：
消息中心的三种入口
2. 消息列表
从消息中心入口点击后跳转到消息列表。由于消息的即时性，需要按时间维度排列。但是如果产品的消息类型较多，可通过分组合并或者分 tab 的方式提升用户触达消息的效率。
分组合并消息列表
分 Tab 合并消息列表
对于通知类型复杂的系统，还可使用二级列表的形式对消息进一步分类展示，如微信及支付宝，由于其包含大量第三方服务，消息复杂，均设置了二级消息列表帮助用户分类查找消息。
二级消息列表
消息列表中的卡片有两种样式可选，一般在一级消息列表使用小卡片样式，让用户有更高的浏览效率。大卡片样式则用于二级消息列表，或当前应用的消息数量较少时。
消息卡片应用示意
4. 消息中心设置
一般位于消息中心列表页右上角，若可设置项较多，则提供设置入口在二级页设置。一些常用的消息设置项如下：
全部已读：对于消息数量较多，且未读态会影响 badge 的展示时需要提供该设置项。点击后设置列表消息项全部已读。
发起对话：若系统包含通讯功能，一般会在消息类表页提供发起对话的快捷入口。点击后跳转到通讯录或好友列表。
设置通知提示方式：提供按消息类型设置某些通知项的接受渠道、接收时间段、各渠道之间的已读联动等，如微博；或者让用户选择消息通知的精确度，是否包含具体信息，如微信可接收“您收到了一条信息”的模糊消息。
打开消息推送权限：一些应用有一些状态更新或重要的提醒需要用户在系统设置中打开当前应用的通知权限，会包含提示用户打开通知的功能。这些提示需要在用户进行了如“办理事项”、“上传状态”等发起流程的操作后提示。不建议在用户启动 App 时就弹窗提示打开通知。
本文是对消息通知系统设计的初步介绍，希望能帮助到新手产品、交互、产品体验设计师快速了解消息通知系统的内容盘点与消息中心的设计方法，制定及时、高效、完整的消息通知系统。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：腾讯设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.阻断性原则
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：micu设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
网易新闻
Artand
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：WseSteven
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点，通过分析海外主流产品，带大家掌握底部导航栏（Tab Bar）的基本知识，找到解决问题的方法并开拓创意思维。
在开始之前，请大家先思考下面两个问题～
好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用 Tab Bar，但这并不意味着所有产品都需要它。
很多APP没有Tab Bar，比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用Tab Bar，应该分不同的情况灵活考虑。
答案是为了易于使用，意味着通过 Tab Bar 这种简单的设计可以轻松帮助用户导航到页面。
明白了上面的问题后，接下来就要考虑如何来设计 Tab Bar，能更好的满足用户的需求和体验。
1. 显示最重要的信息
导航栏应该只包含最有用的信息，不能添加过多无用的标签使导航栏混乱。许多 App 在导航栏上添加搜索功能，因为这有助于用户更快地导航和检索内容。
在Spotify底部导航中，主页选项用于播放或收听所有内容，搜索选项用于搜索下一首歌曲和播客，音乐库选项用于播放列表中喜欢和保存的歌曲，单独的会员选项方便用户轻松点击并快速完成购买操作。
2. 扩展导航的功能
主流 App 更喜欢在底部导航栏中使用 4-5 个标签，这样能保持导航栏的整洁，还避免了标签过多导致用户难以精确点击选项的情况。
Pinterest的导航栏上只有四个选项，这有助于用户轻松点击。消息选项会实时更新消息数量，对用户来说这样的提示很直观。另外搜索功能包含在导航栏中，方便轻松地在主页和搜索结果之间来回切换。
3. 容纳多种标签形式
多数 App 底部导航栏会使用「图标+文字」的标签形式，这样能清楚地告知用户点击标签之后的结果。
有时候我们也会看到有些产品的导航栏只有图标没有文字，但这种形式并不会影响我们的操作，因为当导航栏的标签使用了用户特别熟悉的形状和内涵，完全可以省略文字。
宜家App的导航栏使用了大众都很熟悉的图标，所以即使不加文字，我们也能清楚地知道这3个图标分别代表了主页、分类、我的。
相对于宜家，Youtube的导航栏就显得有点复杂，因为Youtube的图标含义用户可能并不是很熟悉，加上文字说明很有必要。
4. 文字标签应该简短
文字标签应该简短而清晰，准确的文字说明能对用户使用正确导航起到关键作用。
TikTok导航所有的文字标签都简短，并且中间的添加图标还隐藏掉了文字，以此来引吸引用户的注意力。
5. 避免隐藏导航栏
Tab Bar 通常包含了最重要的导航信息，应该始终向用户展示，避免在用户滚动页面的情况下被隐藏掉。
Pinterest导航栏的设计是个例。当滚动页面时，底部的导航栏会隐藏，这么设计的原因可能是为了防止导航栏遮挡图像，保证用户看到更多的图像内容。
6. 传达位置
Tab Bar 帮助用户轻松导航，但如果用户不知道自己的位置，将会影响他们浏览和使用产品的体验。
多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。
Headspace在底部导航栏加上了线条装饰，每次切换选项，线条都会跟着一起切换，确保告知用户确切的位置。
7. 从反馈中学习并不断改进
反馈是关键，如果想改善产品的导航栏设计，就要考虑并测试用户最喜欢哪个导航选项，不使用哪个导航，需要四个还是五个选项等等。
Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计，帮助用户更方便地使用产品，这些不断打磨的改进真是产品成功的关键。
8. 在导航栏中显示更新
Tab Bar 不仅仅起到导航的作用，很多时候还能通过状态变化告知用户更多的信息。
在Twitter主页导航中，当有新内容推送时，主页就会出现更新的状态，提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Clip设计夹
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
注册和登录是进入产品的首要操作，毫无疑问好的用户体验能为产品加分，同理好的注册和登录体验会让用户对产品留下更好的印象。
简单的注册和登录流程中也存在着很多交互细节，这里介绍 10 个平常经常用得到的设计细节，一起来看看～
交互设计的基本原则之一是去除杂乱，去除每一次不必要的操作，避免用户长时间的等待或思考。
用户进入注册页面注册账号时，会第一时间填写邮箱，那么我们是不是可以考虑自动对焦邮箱选项，省去用户再次点击的麻烦。
我们在输入注册信息的时候，可能并没有意识到错误，通常会在账号全部输入完毕之后才会出现错误提示，因此我们又要重新再输入一遍冗长的账号信息，过程很繁琐。
对于填写邮箱之类的操作，进行模糊验证是有意义的，避免了用户信息全部填写完整后再验证，而是在系统发现错误后尽快让用户知道。
尽可能让创建的每个带标签的文本输入都有可单击的标签，如密码应该是可点击的，并将焦点放在密码字段上。
输入密码总是让人头疼的一件事，尤其是当密码有大小写、数字、符号等要求时，往往需要输入很多次后才能成功登录。
不应该让用户去猜测密码有什么要求，相反应该在用户开始输入密码时就给出明确的提示要求。
允许用户查看输入的密码，这样方便他们对密码进行二次校验和修改，同时这种方式比再次重新输入密码要简单。
清晰的按钮文案既能吸引用户点击，也可以引导完成他们想要完成的操作。没有用户喜欢模棱两可的文案提示，尤其是在做选择的时候。
每个产品的注册页面都会有这样的服务条款，在情况允许的条件下，尽可能提供默认的选择结果，避免用户再次选择和操作。
如果用户不小心选择了错误的选项，要保证用户能从注册和登录中快速地切换。最常见的形式是在底部添加一个链接。
当用户输入密码并显示密码错误时，需要具体说明密码不符的原因，告诉用户如何修改密码。
如果用户密码输入错误，应该保留账号信息，不必再让用户重复输入账号，只需要输入密码即可。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：Clip设计夹
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当互联网不断的深入到我们的生活中，我们对安全感的需求也延续到了互联网使用中，特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点，用户对于资产安全的掌控感更为关注，产品使用体验欠佳也直接影响客户安全感。
以下将基于自身工作总结和行业经验，聚焦互联网金融产品分享和总结如何向用户营造安全感。
目录：
一、需要什么样的安全感？
二、如何传达出安全感？
三、怎样体现出安全感？
安全感是人类最底层的需求，但不同类用户群体需要的安全感也各有千秋，我们参考第一财经商业数据中心×蚂蚁财富的2019线上理财人群报告，将线上理财的人群分为四类：
分别是初入职场的95后、职场新兴力量的90后、理财中坚力量的80后和经历风雨的70后。其中近一年的新增移动互联网基民中超五层为90后、95后，成为金融移动互联网的中坚力量。
这类型的投资者由于具有碎片化处理事务的习惯和金融知识不足、理财经验不丰富、资金的抗风险能力不高的特点，当市场普遍行情下跌时，更容易产生焦虑的情绪而导致“割韭菜”，进而可能会影响到卸载APP的行为。根据Mob研究院的数据显示，在2021年3月天天基金日均卸载用户规模为前两个月的6倍，而当时对应的市场行情正为基金普遍大跌。
因此从安全感的需求上他们更侧重高效的信息降维、足够的理财产品的风险提示、合理的预期收益宣传以及投后亏损及时的内容陪伴。
而根据腾讯理财通×国家金融与发展实验室出品的2021年互联网理财行为与安全研究报告显示，理财知识更充足，理财经验更丰富的80后、70后在安全感的维护上则更关注理财产品的信息披露风险、信息不透明风险、市场政策风险、个人信息泄露风险此类问题。
安全感是一种感性的心理感受，而人类的情感由本能、行为、反思三个层面共同决定的。
这三个层次作为人类大脑的运作的规律，映射到设计当中，同样是可供遵循、值得探究的。
先于意识和思维，它是外观要素和第一印象形成的基础，着重于产品的外观、触感等。“美观即实用原则”人们会潜意识里认为好看的东西也是好用的，所以在界面设计当中，主要设计对象是视觉设计。
而金融产品中，常用蓝、绿等冷色调的色彩，给人以冷静，稳定的感觉，表现金融产品的科技感和可靠性；常用红、黄、橙等暖色调，代表着热情、温暖与责任。
是人类身体日常行为的运作，行为层的设计与产品使用过程中的愉悦感和效率有关。好的行为层设计对应产品功能传达、易学性与易用性，以及正面的心情感受。在界面设计当中，主要设计对象是交互设计。（将在下文通过投资场景详细分析）
超越了本能层和行为层，存在意识和更高级的感觉、情绪及知觉。对应的是产品的情感温度，主要的设计对象是正向情感的结果反馈以及品牌信任。
良好的企业品牌形象和口碑很大程度上会给用户带来认知上的安全感。用户在初次选择购买金融产品时，往往强大的品牌背书起到了关键作用，即使是同一只基金，用户也会选择在自己信赖的平台里购买。
我们可以通过在页面设计中加入更多的品牌元素，如品牌主题色、LOGO、品牌IP形象、品牌slogan等，来潜移默化地让用户感受企业的价值：
另一种常见于一些平台利用强大的背书以及所获的成就，清晰地向用户展示可以提供的保障权益，责任条款及资质介绍等来传达企业对用户负责的态度，提升用户对产品乃至对企业的信任感：
我们将金融的生命周期分为三个阶段，分别可以概括为：投资前（产品选择）、投资中（产品交易）、投资后（产品管理），不同阶段的关注点不同，而对于安全感需求各不相同：
结合文章一开始对人群的分析，由于投前的行为特点更多聚焦于产品的选择，因此从理财小白的角度对于安全感的缺乏更集中于“买了会不会亏钱？”、“产品买对了吗”、“看不懂规则”、“这个适合我吗”等，尤其存在于一些新形式的理财组合产品和策略智能投产品中。
在这个阶段的安全感维护，除了相关页面的信息降维、必要的投教启蒙以外，还需要考虑用户疑问的快速解答、合理的预期收益宣传等。另外投钱的启蒙教育更可以考虑结合一些运营活动，让小白用户通过更有趣的方法了解产品，了解自己适合的产品。
而对于较有经验的理财“老司机”而言，安全感的缺乏更集中于“过往表现怎么样，如最大回测率等”、“市场行情、政策是否利好”、“基金经理的资历”等，而更需要考虑信息的多维度展示、信息披露、行情资讯的展示、甚至是产品的对比等来表达产品的未来盈收能力可期。
当投资者已经选择好信任的理财产品时，在产品交易的各个界面也需要关注交易流程中安全感的反馈。
其中包括正向反馈和负向反馈。正向反馈是指用户跟产品发生正确的交互时，系统给予用户的正确引导，可以帮助用户打消顾虑，建立信心，让用户感受到一切都在顺利地进行着，这对那些在设备操作方面缺乏信心的用户来说尤为重要，用户不会对自己的操作或对平台产生质疑，如：专属的密码输入键盘、正向反馈如金额输入时的金额提示、特别提出易误解的交易规则等
而反向反馈是指用户在操作过程中出现或疑似出现误操作时，系统向用户展示提示或二次确认以促进错误的纠正或确保此操作无误。它能确保在第一时间告知用户出现了不正确操作，及时更改，使流程顺利进行，尤其是对于一些理财小白而言，合理的容错设计更促进有效投资，提高未来的盈利体验。如撤销操作二次确认、购买超出风险承受能力的产品、输入错误金额时的反馈。
引起思考：
虽然天天基金的撤单确认展示了退回帐户，但是此弹窗的取消按钮引导性过强，首次操作仅通过银行卡的列表的箭头较难联想到是确认撤单的下一步操作（还以为是可选择退的帐户）。
产品交易成功后，投资者的关注会更集中于自己的资产的变化，产品的未来走势等，因此在安全感的提供上，需要向投资者传达准确的交易状态、资产状态、资产的保护等，甚至可以在产品购买的完成页设置快捷加入自选和涨跌提醒等
引起思考：
在支付宝的基金总金额中，存在交易进行中的提示文案为“买入待确认*元”，但不少小白会产生疑问，当前展示的基金总金额是否包含提示的待确认金额，此时是否可将文案改为“含买入待确认*元”（毕竟也有部分直销app并不会将待确认金额包含进产品的总金额中）
另一方面的更需要考虑当基金产品存在亏损时，及时向投资者传达情感陪伴和合理的投资交易，以促进投资者优化持仓或保持中长期持有，避免频繁的短期交易而导致不良的盈利体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。
摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
以前，设计师们都需要去跟开发沟通并手动标注所有文件，现在，有了像 Zeplin 和 Abstract 这样实用的标注工具，设计师几乎不需要花太多的时间在对接上。
但是，还是避免不了很多东西会在对接过程中出现问题。比如，这个按钮是固定大小的还是弹性大小？是保持底部边距固定还是在一个较大的对象内居中？让我们来看下约束布局在对接过程中的使用方法。
约束布局是定义控制应用中内容的规则。这些规则通过使用统一的元素和间距，保持跨平台、跨环境和跨屏幕大小的一致性。通常应用在 iOS 和 Android 中。
彩云注：这里想跟大家科普下相对布局和约束布局的区别。相对布局是通过相对定位的方式让控件出现在布局任意位置，相对布局因为逻辑原因，层级较多；而约束布局能够有效解决布局过多问题，让页面更加扁平化，布局之间相对位置也更好控制。约束布局也是继相对布局后，谷歌官方针对相对布局问题给出的一个更优解决方案，意在将来替代掉相对布局。当然，这里不再过多阐述，感兴趣的可以自行去了解下，可能偏开发方面会更多一些。
如果在 sketch 文件中已经设计布局好了所有元素，就可以开始了！
1. 基础单位
8×8
首先从定义基本单位开始，每个度量值都是其倍数。我建议使用偶数 8 来调整大小和间距，因为这样可以方便且一致地适配各种设备。
在 Sketch 中选择首选项>画布，将“通过 Shift+方向键调整移动对象中的 10px 改成 8px”，这样会解决很多问题！
2. 间隔单位
间隔单位是常用间距的视觉表达。例如，一个“2 间隔单元”是 16 pt/dp，因为 2×8=16。这些符号应该在设计中使用，别名应该被标注成代码，以便在和开发对接时使用相同的语言。
垂直和水平间隔
在项目很赶的时候，你可能没有足够的时间手动做到完美像素对齐。通过使用这些通用单位来标识，而不是标注工具自动生成的标注像素，它可以告诉开发实际间距。数字别名与“Shift +方向键”移动对象的次数相匹配。
响应式按钮：iPhone8、三星 Galaxy S8、iPhoneSE
间隔大小永远不会改变。如果是水平间隔，则垂直高度被锁定，反之亦然。这意味着在不同的手机宽度上，组件的尺寸会发生变化，但用于创建它的边距的间距将保持不变。
有时元素在间隔之间对齐。间隔之间对齐的主要方法是中心对齐和底部对齐。
垂直居、中水平居中和居中对齐
中心对齐是指你想要一个对象或一组对象向中间集中对齐。对象可以水平居中，垂直居中，或者向中间集中对齐。
底部对齐
底部对齐是指希望对象与其中一个对象的底部对齐。当有两种不同的文本大小并且想要在基线处对齐时，底部对齐就是比较常见使用方法。
1. 点击对象
48 x 48
在手机上，最小点击对象尺寸为 48x48dp /pt。这尺寸来自于谷歌设计指南，物理尺寸约等于 12 英寸。(HIG 建议使用 44x44pt，所以我选择更大的)。将元素放在一起时考虑点击对象大小。你也可以使用点击对象符号来表示元素的哪些部分是可点击的。
让我们通过一些组件示例切换来测试所有约束的使用：
组件示例：列表项、按钮和复选框
2. 基本尺寸
组件的基本尺寸，它的最小高度和宽度，应该基于最小点击对象的尺寸。视觉上小于点击对象的组件仍应由相同的最小点击对象大小触发。这意味着，如果用户在复选框之外触摸了一点，也会承认他们点击了复选框。
组件相对于最小点击对象的视觉尺寸：精确、高于和低于。
3. 内边距
使用间隔表示组件内的边距。
长字符串的水平边距
你可以通过设置水平边距来限制元素的水平位置，比如文本框。当文本太长时，你需要指出文本是否应该调整大小、换行和/或截断。换行到两行比截断一行更好！
动态类型的水平和垂直边距
垂直填充最常用于动态适配。尽管组件在当前手机尺寸、当前语言和当前字体大小下看起来可能很好——但所有这些因素都是最坏情况下的变量。当类型增加时，组件将变得比它的基本大小更大，并且你希望确保它仍然有垂直填充。
4. 基线对齐
使用居中和基线标记来示意，如何让那些没有接触到所有边的间隔元素表现出来。这部分主要是方便给开发理解的。
垂直居中的列表项文本、底部对齐的价格和居中的复选框
现在你已经布局好了一个页面，使用与在组件中相同的方式使用间隔、点击目标和对齐符号。
插图来源于 Meg
……瞧!这就是移动端的响应式布局!
提示：为你在界面布局中引用的组件创建单独的 symbol 画板。在组件中，将所有组件规范包含在一个文件夹中，该文件夹可以轻松打开和关闭。没有什么比同时标记组件和界面布局更好了。
即使是一个精心制作的交接文件也不能取代你与开发之间良好的语言交流。这应该与开始、移交和书面文档一起使用。你越让开发了解你的设计，还原的结果就越接近实际发布的产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：彩云译设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
导语：“自选”作为金融类产品的基础功能，迭代至今已经非常成熟了。放眼望去，市面上主流金融产品的自选功能似乎都大同小异，但是体验下来会发现，细分领域下的设计侧重点却有所不同。
如果我们将“自选”转化为熟悉的C端功能，它类似于“收藏夹”、“关注列表”的概念，是用户管理交易对象的重要阵地。除了常见的管理对象（交易概念中称作“标的”）、管理分组外，“自选”还会存在对数据和使用习惯的管理需求。
富途“管理分组”采用的交互方案，初期学习成本是很高的，它虽然充分考虑了效率问题，却低估了用户理解上的困难。（截止本文发布前，富途最新版对现方案做了视觉样式上的更新，看来设计师也意识到了该方案目前存在着一些不够清晰的地方，期待后续交互上的迭代。）
长桥将分组的“新建、排序、删除、重命名”拆的很散，理解上不困难，操作起来较为繁琐。
设计侧重点：管理标的、分组与数据、使用习惯的设置完全分开
一些细节问题：比如“管理本页股票”，在批量操作的场景下，底部栏却存在不能批量操作的选项
小结：对三类产品的竞品调研也验证了我们最初对需求目标的把握，为券商类产品设计“自选功能”，效率和流畅度是最关键的。设计目标明确了，接下来我们看看目前都存在哪些问题，以及对应的解法。
如图所示，现在如果想完成上述任务，需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成，且每次可以将标的同时添加至多个组。
（注：Snackbar虽然源于安卓原生的MD设计系统，在IOS并无此原生控件。但是随着二者在设计上日渐趋同，且控件的应用上也早已互通有无，所以Snackbar在IOS的使用，合理即可，不必纠结于平台差异。）
交互关键点：
关于“冗余路径”应该保留还是去除，一直以来都存在争议。讨论这个争议的前提是：冗余路径虽然不是最优路径，但是满足了特定场景下用户的特定操作习惯。
当“冗余”只是冗余、没有任何增益时，也要敢于做减法；因为同时还需要考虑一点：出发前的选择越多，用户的决策时间越长。
交互关键点：
在业务方提出为同一个功能再添加一条新的路径时，我们必须要弄清楚，这条新路径是为解决什么问题存在的。不解决问题的需求，大部分是对产品的无效堆砌。做好产品的“守门员”，给出专业的判断，是交互设计师的重要职责之一。
1）对功能的整理和归类，是我们为用户留下的使用线索。如果推理时间过长，说明线索的指向性出了问题。
2）如果层级 1 包含层级 1.x，那么层级 1.x 的操作不应放置在层级 1 的认知区域。
3）如果用户设置了一些项目，无法在预期场景看到对应的效果，应提前给与说明。
交互关键点：
注重“效率”是没错的，比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白，也就谈不上“效率”的提升。
场景1：批量管理标的。
文案问题：按钮表意都是“删除”，带来的实际结果是不同的，存在歧义。
场景2：数据项设置。
文案问题：没有进行规范化处理，增加了选项的理解难度。
交互关键点：
很多时候，一套语义清晰、逻辑顺滑的文案，可以等价于某个功能优化的迭代周期。实际功能点不变，只是替换文案，就能让用户用的清爽明白。这样的“好买卖”，却一直被严重低估。
遇到同质化较高的需求重构时，初期应扔掉“套路”思维，从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品，推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从，要经过思考和反复论证，推导出最适合自己所负责产品的交互方案。
当设计深入到细节，出现了可A可B的选择时，回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案，从我们的选择中，也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。
每一份交互输出都应该是有观点的输出，即使最终我们的观点被业务方、协作方的诸多因素所淹没，仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品，都是由一个个鲜明观点铸造而成的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
翻译：Siyang 审校：ArialXu | UXRen翻译组 #376译文
原作者：Denislav Jeliazkov
原标题：《Is Your UI Messy? 7 Common Mistakes to Avoid》
当我们设计高品质产品时，任何微小的细节都是至关重要的。
很多人会争论好的用户体验和好的用户界面哪个更重要，而我则认为两者都非常重要。如果其中一个失败了，你就无法对用户产生影响。然而，很多时候用户并不会考虑用户体验是什么，而是基于外观来评价一款产品。
Ignoring Scope/Bad Planning
那些含有lorem ipsum（模板里填充的默认文本）的产品和库存照片，你多久使用一次? 我想大家都从来没用过。如果你想提升你的技能，设计时请注入真实内容。网页会展示哪些真实的图片，真实的标题可能有多长字符？一旦你美丽的设计被真实的内容填满，它就会面目全非。
具体来说，在开始UI设计之前，你需要知道页面的每个部分将显示什么类型的内容。你还需要知道内容的最小和最大尺寸。这些转折点（turning point）被称为极限情况（edge case），因为它们决定了界面何时以及如何改变。
你还需要提前研究图片的使用限制。如果你的客户没有任何定制照片或不打算购买任何照片，那你就没必要使用来自Unsplash的漂亮但毫无意义的照片。
为什么毫无意义? 因为这些照片都是纯概念性的。用漂亮的东西是不够的。相反，你需要选择那些能够创造故事情节或具有深远意义的图像。
无论你做什么，不要使用那些毫无必要的照片。如今，人们被大量信息淹没。额外一点无用的视觉信息只会激怒他们。
另一种极限情况与重复模块有关。例如，图像+文本、图标+文本、数字+文本…。你应该考虑两行文本和十行文本时这些模块会是什么样子，以及它们是否会一个接一个地出现。
对于描述性功能的小型文本模块，使用三列布局是一个很好的选择。然而，如果你的文本超过五行，并且不能使用省略号（…）来收起文本，你就必须想出另一种视觉解决方案。为什么？因为又窄又长的大段文本只适合原始的报纸阅读，而对网络阅读十分不友好。可能的解决方案包括这两种：水平滑动的轮播模式（Slides）和两列布局。。
了解内容的极限情况有助于更有效地使用屏幕空间，并为界面的各个模块选择正确的界面处理方式。但是要记住，极限情况并不仅仅是你当前已经遇到的情况。优秀的设计师总是会主动思考客户将来扩展UI的可能性。
No difference between primary and secondary actions
设计应用程序时，会涉及到很多需要用户完成的操作。强化主操作（primary actions）的视觉重要性非常重要。所有的导航都是通过按钮完成，所以你必须通过加粗和突出的方式让用户更容易识别主操作，次要操作（Secondary actions）则不要那么突出，但如果用户需要寻找它们，它们是可见的即可。
以下是区分主操作和次要操作的方法：
Frustrating error states
当你在设计用户界面时，不要忘记任何用户界面的核心目标：在用户和服务之间提供尽可能流畅的交互。界面不应存在疑惑、没有答案的问题，亦或是任何的不确定性。
设计师应该向用户提供产品状态的清晰反馈，特别是在产品处于出错状态时。因此，出错时的提醒应满足以下的几个简单规则：
设计师还应该注意那些意外错误情况（如服务器错误、页面未找到）。任何错误都是用户使用流程上的障碍。这就是我们需要帮助用户处理它的原因，提供任何可能的解决方案，并试图消减糟糕的体验，尤其是那些非用户自身原因造成的错误。例如，对于404和500错误（页面未找到），一个可能的好方案是为这些页面设计插图或动画。
在设计错误状态时，尽你的最大努力不要惹恼用户。特别要注意那些所有可能发生的表单校验情况。
举例而言，假设你有一个包含必需字段的表单。这意味着开发人员有一个相应的校验：“所有的必填字段不能为空。”假设用户试图以随机的顺序填写表单，当第1个必填字段失去焦点状态时，它会弹出一个错误提示：“请填写此字段，该选项是必填项!”
看到这个反馈的可怜用户惊叫道：“等一下伙计，我只是在表单项之间切换，还没有点击‘提交’呢!”事情甚至可能变得更糟，例如，假设你有另一个校验设置：在所有必需字段全部填写前，“提交”按钮是禁用状态。
想想看吧！你那些可怜的用户什么也没做，就无法提交表单，但是你已经将好几个错误归咎于他。这肯定会激怒所有人，你最好避免这种情况的出现。
不要听那些开发工程师忽悠：“按你想要的交互方式开发程序，这需要耗费大量精力”。请记住: 如果不能避免这个问题会让你付出代价，“失去用户”的巨大代价！即使它的开发成本很低，没有用户的产品一文不值。
Poor alignment
好吧，我承认，我是个对齐狂魔。但这只是因为一旦你发现了对齐的魔力，你就会意识到它是让任何布局看起来漂亮和和谐的关键。
许多设计师认为使用栅格系统（grid）会限制你的创造力，在某种程度上，这的确是真的。然而，如果你是一名刚入行的UI设计师，我认为你十分有必要在打破这些规则之前，先学会它们。
适当的填充（padding）和间距（spacing）可以让你的版面保持整洁有序，同时也能让读者更容易地阅读和理解信息。
在逻辑块（logical blocks）周围应该设置相同尺寸的间距（例如，在顶部和底部，以及在左边和右边）。如果间距尺寸不一，你的页面看起来会很混乱，导致用户对不同部分投入不均等的注意力。
而填充太小则意味着用户无法将内容分解成更多的逻辑模块。为了防止逻辑模块混杂在一起，你需要把它们分开，并在它们之间插入一个大的间距。
维持视觉层级结构的一个简单方法，是遵循如下的简单规则：不同逻辑模块之间的填充尺寸应该大于每个模块内标题和文本之间的填充尺寸。例如，假设你有一个包含主标题、副标题和段落的超长文本，那么你需要：
这样的设计可以很好的强调重点。主标题是最大号的文本，周围有相对较大的空间，但仍与紧随其后的元素保持相近的距离。
Low Contrast
设计产品和设计一座公共建筑（如图书馆、学校等）有些相似之处，产品需要很高的包容性，能满足不同人的需求，这也包括了盲人、色盲和弱视群体。
你可以问问达美乐披萨是否认同产品包容性的重要价值。达美乐的网站设计一点也不无障碍（accessible），他们被一位无法通过网站订购披萨的盲人告上法庭。请不要学达美乐，做设计一定要考虑无障碍。
我们作为设计师，往往关注如何做好看的设计，而忽视了多元化用户的交互需求。
作为一个成熟的设计师，我已经能够心平气和地对待那些限制我做出“完美设计”的条条框框了，这其中就包括ADA（美国残疾人士法案）的相关条例。
为了让文字和水平空间更协调，而把字号缩小到8px；或是仅仅为了美观而使用浅灰色，这些行为都忽视了弱视访客的使用需求。
为了在Dribbble集赞，设计时我们可以忽略无障碍，但是当我们在为真实的用户设计产品的时候，忽略无障碍显然不是个好主意。
按照网络端内容无障碍设计指南（WCAG）的要求，我们至少需要提供4.5:1的色彩对比度。这份指南还阐述了针对运动、听觉和认知障碍用户的视觉设计指导方针。
为确保符合这些规范要求，你可以下载Stark软件，它可以帮助检查你的设计是否满足了无障碍设计的要求。
我的意思是，如果你把两个完全不同的元素紧挨着排列，用户无法搞清楚哪个元素是“主要”的，哪个是“次要的”。这就是为什么我们会说，强调对比不仅仅是将不同的视觉效果应用到各个元素上，也需要使用留白的艺术。有时候为了使元素形成对比，你需要用留白来分隔它们。
留白很重要，它使内容更便于用户阅读。当然，有时候留白也会使用不当，比如有太多的空白或者在一个小区域内塞进了太多的内容，这都不是正确使用留白的例子。许多充斥各种广告的网站也缺乏足够的留白。
避免把低对比度的文本放置在图像上。文字和背景之间应该有足够的对比。为了使文本突出，可以在图像上放置一个提高对比度的滤镜。黑色很流行，但你也可以使用明亮的色彩，搭配使用。
另一种做法是从一开始就使用高对比度的图像。在这种情况下，你可以把文本放在照片或图像的深色区域。
Poor Iconography
当你需要通过一个小符号来表达意思或简单说明一种含义时，图标非常有用。它们也是现代界面设计的基本组成部分，特别是在移动终端上。
在应用程序中，图标通常相当于按钮。看看Instagram，你只会看到图标和文字。
这就是选择正确的视觉图标来呼应元素含义如此重要的原因。听起来很简单，对吧？其实并不简单。找到正确图标的过程是非常痛苦的。
你需要用大家都能理解的、简单的、常见的图标来表达语义。其次，你还需要将这些图标与整体UI风格相匹配，最后，你需要以SVG格式把图标提供给开发人员。
或许你曾经搜索过免费图标，当你为所有元素找到对应的漂亮图标时，你会很兴奋。你想，它们是多么完美地吻合啊! 它们会被每个人理解！遗憾的是，你所选择的图标库给人的整体印象往往是凌乱的。如何才能避免这种凌乱呢？以下是一个简要策略:
确实，没那么细心的用户可能不会特别注意到线宽或圆角半径的不统一。尽管如此，设计给人的整体印象还是哪里怪怪的，用户能感觉得到。
换句话说，虽然使用免费图标并没有错，但最好还是不要用太多。使用免费图标会让产品看起来很廉价，甚至是不专业的。另外，还有很多免费的图标，人们很容易一下子认出来。为什么? 因为他们早就发现这些图标被到处滥用。
这也是我建议严格筛选免费图标的原因，当然，如果能自己设计图标就更好了。自定义图标总是为用户提供更优越的体验。
Not thinking cross platform
是的，理想情况下，这在当下应该不再是一个问题。
我们都知道，大多数用户通过移动设备访问网络服务。不幸的是，许多设计师仍然会忘记这一事实。(我猜或许是因为客户不愿意花钱去做移动端设计的优化？)
然而，对于专业的设计师来说，不考虑多设备的兼容优化，这种情况不应该发生。在创建UI时，你应该始终牢记“手机端优先”的法则。
请关注一下不同的用户在每个页面上所看到的内容。然后，问自己：“为了展示某个特定的内容，我选用的UI控件是否合适？”
你可能选了一个很好的UI控件，它可以完美地在桌面设备上工作，但对于手机用户来说，它就并不是那么好用了。反之亦然。这就是为什么我们必须时刻牢记现今设计必须考虑多设备终端的原因。
微小的点触目标会让用户感到沮丧，因为它们导致用户难以完成预期的操作。我们都经历过在智能手机上点错按钮，等待错误页面加载时的沮丧感！
所以，在设计可点击元素时，请记住用户的手指大小都是不同的:
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com