App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。
摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
--手机appUI设计--
--bs界面设计--
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
表单作为平台与用户联系最为紧密的一环，良好的表单设计可以带给用户流畅自然的用户体验，保证用户情绪的正向增长，而混乱无序的表单则会引起用户的负面情绪，影响甚至阻碍用户操作的完成，降低用户对品牌好感度和信赖度。对于我们这样的金融产品而言，产品内存在着如开户表单、出金申请表单、调整杠杆申请表单等形形色色的表单，如何将这些表单整理归纳形成一套完整的表单设计体系，带给用户统一、高效且优质的填写体验，是我们这次表单优化的主要的任务。
系列文章中关于表单设计部分我将分为上下两期来向大家分享，体系化表单设计（上期）主要介绍在项目中总结出的表单设计中的方法论，下期则是介绍方法论在我们项目中实际的应用，希望这次的分享能为你今后的表单设计提供思路与参考。
表单在我们工作、生活中的使用由来已久，在还没有互联网的年代，表单就已经是人们收集和存储数据、信息的重要手段，并一直沿用至今。如体检时填写的体检表、入职时填写的入职登记表、银行开户时填写的开户表都是使用的这种印刷的纸质表单。它们身上有很多设计可以作为重要的参考，帮助我们优化 UI 中的表单元素。
表单是 UI 界面中最为常见的元素，它通常是用来搜集和呈现一些数据、信息和特定的字段。表单的应用极为广泛，比如登录应用时填写账号密码、网上购物时完善订单信息、OA系统中提交休假审批、修改个人中心信息时……都是在和表单发生互动。
表单的目的、内容、大小等虽然各有不同，但是表单的基本构成元素是相对固定的，在设计过程中，设计师需要合理组织这些元素，帮助用户在填写表单时，轻松愉快的完成，表单主要组成部分如下图。
1.标签：告诉用户此处相应的输入元素是什么;
2.输入区：可交互的输入区域，根据字段类型使用相应的交互组件;
3.占位符：对当前项进行额外的信息描述;
4.前置图标（可选）：描述文本所需的输入类型和特征;
5.后置图标（可选）：对输入内容进行控制，如：下拉的展开与收起、清空；
6.帮助（可选）：提供表单内容的注释或辅助类容，如：说明、注意事项；
7.反馈（可选）：告知用户当前操作可能或已出现的问题，如：提交成功、错误提示、网络问题；
8.键盘（可选）：在文本编辑时需要使用键盘，如：设备系统键盘、应用内置键盘；
9.操作按钮：操作按钮是在表单的结尾，如：提交、下一步、清空所有信息。
在如今这个互联网时代，我们几乎每天都会接触到形形色色的表单，作为用户与产品链接的枢纽，表单设计的好坏会直接的影响产品的实际数据表现。好的表单结构清晰，交互合理，用户能够高效愉悦的完成表单填写，为用户节省了时间，同时也提高了自身产品的转化。而差的表单往往信息逻辑混乱，填写效率低，且容易让人产生挫败感而中途放弃，在无形中浪费掉了很多潜在商业机会。是什么造成了不同表单之间出现如此大的体验差异，我们又该如何做才能设计出令用户愉悦的表单呢？在实际项目过程中，总结出一套适用于移动端表单设计的路径图-通过做好五个步骤，设计出令人愉悦的表单。
合理的表单框架选择是打造用户友好型表单的基础，在进行表单设计时，我们首先需要依照表单的使用场景和复杂程度，选用最为恰当的表单框架。确定好表单框架，也就决定了后续设计中表单信息如何组织以及呈现。我们将表单框架划分为“录入方式”、“标签布局”和“按钮逻辑”三个部分，在表单设计时通过对这三个部分的选用来确定最终的表单框架形态。
按照表单录入方式的不同我们大体上可以将表单录入方式分为“单步录入”、“分步录入”和“分级录入”三种，在进行表单设计时需要根据实际情况选择与使用场景匹配的录入方式。
单步录入是表单中最为常见的录入方式，在一个页面内呈现所有的录入项，结构简单，快速录入、快速提交，适用于录入项较少的表单。
相对于PC端而言，移动端手机屏幕尺寸较小，一份在PC端1-2屏就能完全展示的表单在移动端往往需要7-8屏。将一个需要7-8屏才能展示完整的表单放在一个页面内让用户填写，用户容易产生抵触情绪会造成表单完成率的降低。
为了提高用户填写效率，减少用户的抵触情绪，我们可以将一个冗长的表单拆分成多个步骤，分步录入。通过拆分成一个个步骤，让表单信息呈现更为清理有条理，并且能引导用户逐步填写完成表单录入。
当表单处于以下4种场景时选择建议选用分步录入模式:
1.表单录入项过多，在一个页面内已经不能合理清晰的组织传递信息。
2.表单内容的录入方式存在较大差异，不适宜在一个页面内进行展示。
3.表单录入项在业务上存在先后顺序，只有先完成上一步字段录入，才能够进入下一步。
4.在业务上很重要的表单，为了让用户能够沉浸、快速的完成表单填写时。
分布录入模式下步4种步骤导航选择：
1.文字导航：当表单为2步录入表单时，我们展示步骤条带给用户的引导意义并不大，通常这种情况下我们会选择省略掉步骤条，只展示当前步骤名称，给予用户提示。
2.步骤条导航：当表单录入步骤为3-4步时，我们可以在页面顶部放置步骤条显示所有步骤内容标题，用户通过步骤条能够对表单有一个清晰的预期。
3.双层步骤导航：当表单录入步骤大于4步时，受限于移动端屏幕尺寸，横向上不够容纳步骤数太多的步骤条，这时我们可以其中某些关联的步骤归纳为一个大步骤，形成双层步骤导航。
4.进度条导航：当表单录入步骤大于4步，又担心双层导航给用户传递出表单极端复杂的印象，劝退用户。这时我们可以使用进度条导航，用百分比进度条来展现表单填写进度。
分级录入大家可能相对较为陌生，分级录入在B端产品中会有相对多见，一般运用于有明显上下级关系的表单，如项目管理工具中新建任务表单，在新建任务的同时还能新建下属子任务。又如客户关系管理软件中，新建订单的同时新建下属的订单明细。我们可以将使用分级录入模式的表单视为两张表单，子表单添加的数据会回显到主表单上。
标签用于提示用户需要输入的是什么信息。合理的标签布局结构，能够提高用户的阅读效率，还能降低信息填写时的错误率。常见的标签布局形式有：左右结构、上下结构和浮动结构。不同的标签布局都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的标签形式。
左右结构是目前最为常见的标签布局形式，左右结构中标签和输入区域在一行内排布，其中标签位于左侧且居左对齐，输入项位于右侧有居左和居右对齐两种对齐方式。
优点：节省纵向页面空间，在移动端有限的页面空间内能展示更多的录入项。
缺点：标签的长度无法确定，视觉上显得参差不齐，表单的信息浏览和填写效率一般，标签横向展示空间有限，对于多语言适配场景不太友好。
上下结构也是我们能够经常在表单中见到的标签布局形式，上下结构中标签位于上方且居左对齐，输入区域位于下方也为居左对齐。
优点：用户的视觉浏览路径相对于左右结构来说较短，拥有较强的信息浏览和填写效率，标签横向展示空间充足，对于多语言适配场景友好。
缺点：占据纵向空间多，一屏内能展示的录入项较少。
Material Design中文本录入的标签形式就是选用的浮动结构，在浮动结构中标签和提示文字合二为一，正常状态下，标签位于输入区域内部原本提示文案的位置，当用户输入时，内部的标签就会上移为文本输入让出空间，完成填写后标签和输入文案上下排列展示。
优点：结构简单，视觉干扰少，信息浏览和填写效率高。
缺点：填写项过多时，表单信息传递不够清晰。
内部结构相对于前面3种结构较为少见，比较长出现在登录场景，在浮动结构中标签和提示文字合二为一，正常状态下，标签位于输入区域内部原本提示文案的位置，当用户输入时，内部的标签就会消失，完成填写后只展示输入文案。
优点：结构简单，视觉干扰少，聚焦于操作。
缺点：只适用于如登录等录入项极少的场景，一旦录入项变多，由于录入后不展示标签，将导致用户后续很难判断输入的信息是否准确。
按钮作为表单的重要组成部分之一，合理的按钮逻辑能够为用户顺畅完成表单填写提供帮助，表单的按钮逻辑主要由按钮的位置和按钮的点亮逻辑两部分组成。
按钮在页面中的位置情况主要有以下3种：
1.顶部按钮：以文字的形式固定在顶部导航栏的右侧，顶部按钮尺寸较小，因为它所占空间有限，因此在操作上相对来说不便于点击。所以这类顶部按钮更适用于「编辑页面」，需要用户谨慎操作。
2.表单底部：按钮跟随表单放置于表单的最下方，根据表单内容纵向空间的大小而上下移动。因为表单内容较多时，容易下沉过多而导致按钮不可见，所以将按钮放置于表单底部更适用于当表单录入项较少不足半屏的场景。
3.设备底部：操作按钮常驻在设备底部展示，适用于表单录入项过多的情况，在表单设计时可以尽量将必填项放置在表单前面，用户填完必填项后就可以点击操作按钮提交或者进入下一步，而不用滑动到表单底部再进行操作。
1.当表单录入项较少时，且有明确预期按钮何时可用，可以先置灰主按钮，完成必填项填写后再点亮主按钮。
2.当表单录入项较多时，且用户不清楚为什么按钮不可以用，此时按钮可以常亮，并在用户点击时给予反馈，告知错误原因。
在确定好表单框架以后，对于表单内容信息的进行有效的组织也尤为重要，特别是对于一些结构复杂、录入项多的表单，如果不对信息进行组织，很容易显得繁杂混乱，容易让用户在一开始就产生抵触的情绪，甚至选择放弃。那么如何合理有层次的组织信息呢？
我们在设计表单时潜意识里都想要从用户那里获取到更多的信息，表单中因此出现很多必要性较低的录入项，表单也因此变得冗长，让人第一眼就生出「好多信息需要填，好麻烦」的沉重感，在填写表单之前就萌生退意。我们在进行表单设计时需要保持克制，聚焦于表单的核心任务，让表单尽量短而美。那么我们要如何为表单减负，可以尝试以下方法。
表单中每多一个录入项需要填写，都有可能会失去一部分用户好感度甚至流失一部分用户。在设计时我们需要判断某个字段信息对于用户来说是否有必要在表单中进行填写，尽可能的删减掉额外的无用字段。例如注册表单，如让用户使用邮箱注册，那么用户的姓名字段是否是注册的必选项？如果不是必选项是否可以在之后的信息完善中进行填写。
在表单中时有一些信息他们本身紧密相关，我们完全可以视情况将其合并为一个录入项，来减少不必要的录入操作，达到简化表单，提升录入效率的目的。合并录入项要结合实际的使用场景以真实的提升表单体验为目的，而不是一味的追求表单的最简化。
根据用户使用数据，适当将使用频次不高、或者提供给专业用户的高级表单项隐藏起来。例如一份表单中有一个填写项，90%的用户都不需要填写，那么默认收起。保持表单的简洁，让绝大多数用户快速完成，避免大量的表单给用户的焦虑，而又满足了小众用户的需求。
根据沉没成本的定义：人们在做决策时，受到了自己过去所投入的时间、金钱、精力等因素的干扰，对于先前付出了投资的事情有更强的忠诚度和继续投资的意愿。进行流程设计时也可以遵循这个原理，将容易完成的表单放在前面，这样做有3个好处：
1.简单的表单更容易激起用户的填写欲望，用户会迫不及待地去完成。相反，用户一开始就看到过于复杂的表单，很容易被吓到，从而放弃整个任务。
2.用户通过完成简单的表单，可以增加自信心，即使后面的表单变复杂了，用户也更有耐心去完成。
3.当用户将前面简单的表单完成后，放弃整个表单的机会成本就变高了，即使后面碰到较难的任务，用户放弃的几率也会降低。
当我们我们设计的表单字段内容较多时，需要合理的对字段信息进行分组，这样整体看起来更加有组织性。接近性（格式塔原理）原则告诉我们： 相互靠近的物体被认为比相互距离较远的物体更有关联性，这样能使设计界面层次有序，视觉清晰，减少视觉噪音。分组时需要注意：
1.内容属性相近或有关联性的放在一组。
2.根据信息的重要性及难易程度排列分组，将选填的表单内容靠后
在表单录入设计阶段，我们需要明确认识到一点，用户在面对一份表单时往往没有我们想象中的那么有耐心，复杂繁琐的录入操作可能会直接劝退用户。我们需要做的就是化繁为简，思考如何给用户减负，让用户简单高效的完成表单录入。表单录入操作提效有一些切实可行的方法，下面请我将一一向分享。
对于用户而言，填写信息永远都不是一件有趣的事情，在对用户足够了解的前提下，我们可以选择为表单中的部分录入项提前设置合理的默认值，节省用户的操作时间。默认值的设置不是一个随性发挥的过程，而是基于用户行为和数据的理性判断，并且也不是每个字段都适合设定默认值。关于如何设置合理的默认值，什么字段适合设定默认值，下面几点可供大家参考：
在一些业务场景，会使用到用户之前在其它表单中已经录入的信息，此时在填写新表单时，可以默认带入之前的数据。
如果用户正在填写的内容有相关的关联数据，可以默认带入。如我们在填写订单时可以默认带入该订单关联的商品基础信息。
基于移动端设备的能力，我们可以在用户开放权限的情况下获取一定的用户信息（位置信息、电话区号、运动数据等），在特定情况下默认填写，如滴滴通过GPS定位自动帮用户填入上车位置。
像电话区号、证件类型、国籍等用户录入结果相对固定的字段，可以根据情况提设置合理的默认值。
相较于PC端而言，移动端设备屏幕尺寸较小，虚拟按键的输入效率远不及实体键盘，在移动端手动输入的成本较高。因此，为了打造便捷优雅的操作体验，移动端表单需要尽量减少用户的手动输入。以下方法可以减少手动输入。
联想输入是给予用户输入字段的自动补全功能，用户少量输入后进行选择。录入方式由原来的输入变成半输入后选择，减少用户的输入成本，提高用户操作效率。
对于表单填写过程中可以固化选择的信息，应让用户进行选择操作以代替手动输入，尽可能地让用户减少输入成本。
一份用户可能会多次填写的表单，我们可以提供用户的历史输入项供其选择，如滴滴的打车页面会将我的常用目的地放置在目的地输入框的旁边供我快速录入。
一些新型的交互组件的使用能够简化信息录入的操作，例如滑块组件等。
在填写表单时如果填写项需要频繁的页面跳转会使得整体的填写效率变低，增加用户的操作成本。在进行表单设计时应尽量规避这种频繁的页面跳转，选用更流畅灵活的交互方式。
在网页端表单设计中，用户在表单填写中需要对选项进行选择时，常用的交互形式是在选择器的下拉列表中进行选项的二次点击。而在移动端设计中，触发选择器后的二次点击会增加用户的填写成本。所以在设计时，当选项少于8时，在表单中直接显示所有可选项，当选项超出过多时则在列表浮层中进行选择。
在表单填写中我们期望用户保持专注，尽量避免产生引导用户离开当前页面的填写交互，这种交互跳转很容易打断用户固有的行为轨迹。因此运用浮层、弹窗等交互来完成辅助信息的采集是我们较为推崇的交互形式。
对于一些标准证件类信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。值得注意的是，如果图片不清晰或存在水印，将大大降低识别准确度。此时应提供修正渠道，让用户可以逐一校对并修改文本内容。
短信验证码升级方案。直连三大运营商，一步校验手机号与当前SIM卡号一致性。优化注册/登录/支付等场景验证流程，有效提升拉新转化率和用户留存率。不做数据加工与号码精准营销，保护用户隐私。
为了避免让用户频繁的跳入跳出相同类型的输入项，首先整合表单的信息字段，将同类型的字段进行合并，同时结合输入控件，设计联动式组件，让用户在表单输入时更加高效。
设计不是简单的元素拼凑，深入下去，有很多细节需要推敲，细节应该是含蓄的，包含在整体之内。好的细节设计不容易被用户的眼睛直接发现，但是会让用户与产品的交互过程变得通顺、舒适，概括来说就是润物细无声。对应到表单设计上，我们需要通过表单设计中的细节把控，让表单录入这件事变得简单、高效。
当表单中同时出现必填项和选填项时我们需要对其做出区分，避免用户不知道哪些字段必须填写、哪些字段可以选择性填写。沿用通用符号习惯，在表单中我们往往使用 * 号来标记必填项。但是当表单中的必填项多于选填项时，大量的 * 号会增加用户的认知负担，面对这种情况，我们可以使用暗提示来标记选填项帮助用户识别。
如电话号码、银行卡号这类有数字组合规律的号码字段，我们可以沿用它们在线下的数字组合规律，通过空格对号码字段进行划分，帮助用户校验和阅读。
出于保护用户账号安全考量，我们在进行密码输入时通常使用隐暗文字的方式来保护用户账户安全，但是暗文字的显示方式会让用户无法确认密码信息。因此我们可以在输入时，让输入字段短暂显示，保持1秒然后再转变为暗文字，这样既可以让用户明确内容，也保证了用户的账户安全。
我们在进行表单设计时，输入区域的长度要符合心理预期，需要预判填写内容长度来确定输入区域的长度。这样不仅在体验上一致，而且在视觉体验上更加愉悦。
用户应该对他们的操作所带来的结果非常自信，使用“提交”、“注册”、“立即支付”、“创造账户”等确定性文案来描述用户将采取的操作。
报错信息应当一目了然，从用色、图标到文本都应当起到高亮的效果，而且报错信息应当靠近输入框，而非表单的底部或者顶部或者按键旁边。
在设计主要由文本输入框构成的表单页面时，要考虑键盘出现可能会遮挡输入框的情况，我们需要把控件放在scrollView上，当键盘会遮挡输入框时,则表单滚动。
对于异常情况不能只是冷冰冰的告知失败，这样容易给用户带来挫败感，且缺少下一步操作指引。错误反馈不应该只着眼于结果，错误反馈的阐述角度应该是引起用户关注、让其快速了解出错情况，并指导如何处理。
经过前面几个步骤，表单整体形态已经确定，最后一步我们需要从整体体验的角度对表单进行完善和调整。包含表单的容错性考量、表单流程闭环的打造、视情况而定的趣味性设计。
即便你的产品90％的时间都运行良好，但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。——《Getting Real》
容错性概念源于计算机领域，容错性是指计算机系统在发生故障的情况下，依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。延伸到互联网产品设计领域，容错性的范畴更为宽泛，包括降低用户操作的出错率、及时提供纠错帮助、提供解决方案等内容。
容错设计与用户体验息息相关，我们在表单页面设计时也需要进行容错性考量，尽量避免用户错误操作的出现。当用户出现错误操作时，帮助用户识别、诊断，及时反馈问题所在，并提出有效的解决方案，帮助用户快速从错误中恢复。让表单填写流程更顺畅，给用户带来更优的用户体验，关于表单容错性设计可以从以下几个方面来进行。
引导和提示要突出表现，从而引起用户关注，确保用户在操作前能注意到引导或提示信息。引导与提示用语要简单且易于理解，当重要或操作不可逆时，要询问用户让其知道这样操作的后果。
如何从设计上避免用户出错，限制是一种非常必要的方式，可以通过限制用户的某些交互操作或者增加某些操作的难度来对用户操作进行限制避免用户出错。
当用户出现填写错误时，及时的反馈错误并提供纠错帮助，出错信息应当用清晰准确且用户易于理解，能够对用户解决当前问题提供建设性帮助。
允许用户犯错，操作者能归够撤销以前的指令，帮助用户在犯错以后能够快速回到正确状态。
表单的终点并不是提交，一个好的表单设计需要兼顾考虑用户填写前的引导、填写时的及时校验与帮助、还有填写后的整体流程体验，为用户提供完整的、形成闭环的表单填写体验。
举个例子，当我们设计的表单需要用户准备如身份证、银行卡这类的证件时，需在表单填写前告知用户，避免用户填写途中才发现证件未准备，导致用户填写流程中断。再如，用户在填写完证券开户表单后，其实还需要通过审批后用户才能进行入金交易等操作，这时我们需要一个结果页来告知用户表单提交的结果状态和下一步的操作指引。
表单设计并不一定需要是严肃且正式的，在表单设计时可以尝试引入一些趣味性的元素，研究表明，更大的文字输入框、适度的留白空间、优雅的动画效果、趣味性界面设计会让人心情愉悦更有填写的欲望。
例如bilibili的登录页面，在用户输入账号时上方的卡通形象是睁眼的，当切换到输入密码或者验证码时卡通人物会有一个捂住双眼的动作十分有趣，这样的趣味性设计能够在一定程度上缓解用户在填写表单时的焦虑情绪，并增加对于bilibili保护账号安全的信赖感。
以上就是我对于移动端表单设计的一些归纳和总结，过往的项目中自己设计大量的表单页面，走了不少弯路犯了不少错误，但也通过项目不断的反思总结，收获不少的关于表单设计的经验。在这里将项目中关于表单的一些思考和经验分享出来，总结出自己的一套关于表单设计的方法论，也是希望能够对正在进行表单设计或者即将进行表单设计的你提供一点点参考与帮助。
表单设计我将分为上下两期来向大家分享，体系化表单设计（上期）主要介绍在项目中总结出的表单设计中的方法论，下期则是介绍方法论在我们项目中实际的应用，也希望你能够持续关注。
文章来源：站酷 作者：Yone杨
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
icon的设计会贯穿全套设计稿，所以在设计的环节中必不可少，优质的icon设计会帮助品牌和企业更好的树立形象，形成自己的设计语言。
接下来为大家分享一些经典案例：
--手机appUI设计--
--icon图标赏析--
更多精彩文章：
“搜索”是产品中一个非常必要的功能模块，搜索就像为用户提供了一条便捷的绿色通道，方便用户快速检索内容。
搜索动作在 App 中依靠搜索框来完成，好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性，但真正好的搜索框会在细节上为用户带来差异化的反馈，带来很暖很贴心的感觉。
从体验层面上看，一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为：
其中使用中会涉及到跳转和输入两种不同的状态，在下面的文章里我会展开来分析。
回想常用 App 的搜索框，好像它们的样式看起来差别并不是很大，但其实每个搜索框的细节都是经过精心设计的，下面总结了几种常见的搜索框类型。
1. 搜索图标
页面上只提供一个放大镜图标，通常需要用户点击图标后才能跳转到搜索页面，例如小红书就将搜索图标放置在页面右上角。
2. 基本搜索框
基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式，文字提示为搜索，简洁清晰。
3. 文字提示类搜索框
和基本搜索框的唯一不同的地方在于，这类搜索框中的文字提示部分不再是搜索两个字，而是根据产品需求支持预置多组文字提示并在搜索框内循环展示。
△ 在大众点评的顶部搜索框中，文字提示部分循环展示了三组不同的内容，引导用户快速检索到好吃的和好玩的。
4. 功能类搜索框
之所以叫做功能类搜索框，是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标，如扫码图标、拍照图标、语音图标等，赋予搜索框更多的功能属性。
△ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标，点击之后可以快速扫描图书条码或二维码，快速识别书的内容，省去检索的麻烦。
△ 淘宝搜索框的组成更复杂，除了支持扫码外还有相机图标，方便用户拍照识别商品。
使用搜索框搜索的过程总体可以分为四部分：搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程，再考虑每个状态对应的交互细节及反馈，这样才能保持逻辑清晰。
位置
大多数搜索框出现在页面顶部，作为一个大的触摸目标更符合用户的认知习惯，更容易被用户发现和使用。
△ 在苹果自带的地图应用中，搜索框放在页面中部偏下的位置，相比于顶部搜索框，这样的位置分布更方便用户单手操作。
样式
搜索前的状态除了前面讲的几种常见的搜索框样式外，有些产品会直接在搜索框增加“搜索”按钮。
△ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮，相比于点击搜索框再点击键盘搜索内容推荐，直接点击按钮简化了搜索流程。
搜索框
点击搜索框后，框内的放大镜图标会消失，出现闪烁的光标引导用户输入，搜索框右侧会出现“取消”按钮。
△ 点击大众点评的搜索框后，搜索页会出现三个选项，点击每一个选项，搜索框内的文字提示都会改变，有效帮助用户提升搜索准确度，虽然是很小的点但做的很用心。
键盘
点击搜索框后会弹起键盘，在不输入内容的情况下，点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。
搜索页
搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块，记录用户的搜索行为，推荐目标商品或服务，提高转化率。
△ 豆瓣将最热门的内容都展现在搜索页中，包括实时更新的热门书影音榜单、热门小组、热门话题等，为用户提供有效的引导。
关于历史搜索我们还可以继续深入分析，思考这些记录怎么排序、最多显示几条记录……
△ 网易云音乐的历史搜索最多可以保留10条，采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录，这会导致排在后面的历史记录不容易被用户快速发现。
△ 淘宝的历史搜索可以容纳更多的数量，当搜索记录超过两行时会有一个小的展开按钮，点击按钮可以查看早期的记录，这样既能节省屏幕空间也能最大化容纳历史记录。
删除/取消
当开始输入内容时，在搜索框的右侧会出现删除图标，方便用户一键删除输入的内容，这里要注意区分删除和取消的区别。
△ 在淘宝中点击“删除”图标，页面会返回到上一级也就是搜索页；
△ 点击“取消”按钮，页面会直接返回到主页也就是搜索前的状态。
搜索提示
在用户输入内容时，产品会根据用户输入的内容提供相对应的搜索推荐，这是搜索框的必备的交互反馈。
通过合理的词条推荐能极大降低用户的思考时间，提高搜索效率，同时省去再次点击搜索按钮的流程，降低用户的操作步骤。
字数限制
目前我所知道的大多数 App 在搜索时都没有字数限制问题。
回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的，尽量不要约束用户的输入内容。无论用户输入多少内容，点击都可以完成基本的搜索操作，这样整个流程才完整。
△ 在百度中输入过多字符时，会提示查询限制在38个汉字以内，多的字符会被忽略，虽然给出了提示但并未打断用户的操作流程，可以让用户继续完成搜索。
符合预期
搜索的理想状态是搜索到的结果符合用户的预期，满足用户的搜索需求，并把最吻合的搜索结果排在前面，为用户带来清晰的结果展示。
智能提示
智能提示是对用户输入内容上的一种提示或纠正，如果用户输入的内容有问题或不够标准，在搜索结果中会能给最贴切的搜索结果。
△ 在淘宝中输入“shouji”或“souji”，淘宝会根据拼音给出“手机”的搜索结果，但仍保留原标签，方便用户再次点击搜索；输入“手ji”时，会直接给出“手机”标签，这种差异化的反馈能更好的为用户服务。
无结果提示
△ 相比于直接显示搜索无结果的状态，拼多多的搜索结果首先会标明相关商品较少，然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。
这里介绍了关于搜索框设计的一些基本体验，学会从整体到局部再到具体细节一步步分析，大家会挖掘到更多更细的设计要点。
文章来源：优设 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
首先我们要知道APP的启动页和闪屏不是一个东西，启动页是用户打开产品第一眼看到的页面，闪屏是启动页之后出现的页面。
启动页是一个APP必不可少的页面，在iOS规范中，上架AppStore必须有启动页，Android系统会有1-2s的白屏，所以两个端都需要启动页。苹果官方给的解释是，为了增加APP启动时的用户体验，确实如此，当打开一个产品时，首页内容都需要一定的时间加载。
启动页的设计角度一般是品牌信息传递，建立用户与产品的认知，一般时常都在2s以内（看网速和手机性能）。启动页的设计一般不做动画效果，因为只要是动画，就会让用户感觉等待时间变长了。
闪屏是启动页后面紧接着出现的页面，当然有很多产品没有闪屏，如微信、淘宝等，因为产品的定位和运营模式不同。闪屏与启动页不同，闪屏是用来运营的，比如投放日常广告、活动运营、节日等等，大多数产品闪屏出现的时间是3s或5s，一般都提供“跳过”按钮。
闪屏的设计为了运营，所以可以适当有动画效果或者视频，目的是能够更加吸引用户，加深印象或是提高点击率。
启动页是写在安装包里面的程序，如果更换就得发版，闪屏的程序设计是从后台配置完成，所以可以满足日常更换。
对用户来讲启动页和闪屏展示的时间越短越好，那时间减少不了，就可以通过设计让用户对时间的感知变少，从而提高体验。看下图，两张图通过平滑过度，给用户的感觉是一张图在变化，这样时间上给用户的感知是变快的。
用户等待感知短
当然对于不同的产品，设计的倾向性是不一样的，比如网易云音乐，启动页是强烈的红色，然后生硬的切换到一个跟启动页没有任何视觉关联的闪屏。这样的设计形式，用户等完一个页面，又等一个页面，那就会给用户在时间上的感知是变长的。
品牌感知传递强
但是，对于一个音乐产品，渲染产品调性传递品牌，要远远大于减少用户等待时间的体验。所以，从这点来看，网易云音乐这样的设计形式，也是非常恰当的，设计应该根据产品的定位，来确定设计的倾向性。
敲黑板，划重点！ 下面的内容才是本文重点！
手机尺寸那么多，闪屏设计尺寸应该如何定义，很多APP的解决方案是使用两张不同比例的闪屏，还有一部分APP是区分系统，iOS适配一张图，Android适配一张图。
下面我以小米商城闪屏的改版为例，分享如何用一张闪屏尺寸适配所有机型，并详细介绍适配的原理。下图是改版前的闪屏，需要上传两张图，一张1080*2070（不带底部logo），另一张是720*1280（带底部logo）。
老版本闪屏需要上传两个尺寸图
两张图，设计人员就需在两个模版上进行排版设计，小米商城闪屏更换频率非常高，这样其实会付出很多时间成本。所以，我们团队尝试使用一张图适配所有机型，这其中的难点就是，找到一个合适的尺寸适配所有手机，并且闪屏内容的呈现在任意手机上都得合适，内容不能被裁剪。
先跟大家普及一下小米公司APP的设计稿尺寸，因为小米手机是Android系统，所以UI设计稿会优先适配安卓的主流手机，即1080*2340，这个尺寸接近iPhone12的比例和尺寸，切图相当于3倍图。
所以，闪屏宽度设定一定是1080px，然后高度分为两部分组成，一个是内容运营区（闪屏内容设计区域），一个是logo位，如下图所示。
蓝色部分为闪屏
logo位部分由开发写到程序中，所以闪屏页面高度要去掉logo位高度。闪屏设计尺寸即是蓝色部分，正常来看应该是主流长屏分辨率手机与现存短屏分辨率手机的平均数即可，但其实并不可取。
因为，短屏分辨率手机毕竟使用人群是少数，设计的宗旨一向都是优先考虑大多数用户。所以，定义闪屏尺寸的原则是让类似小米11、iPhone12等主流比例手机呈现的完美，短屏分辨率手机如iPhone8只要呈现的不出错即可。
以安卓主流分辨率1080*2340为例（这个比例接近iPhone12），如下图，logo位高度设定为270px，把这个图切给开发，让开发等比缩放去适配所有手机即可。
很多安卓手机底部会有一个系统高度，这个位置不可以占用，但开发可以改变颜色，所以这部分颜色可以跟启动页或闪屏颜色调成一致。页面分辨率2340减去270的logo位就是2070，这就是长屏主流手机闪屏大概要呈现的高度，然后需要用这个尺寸去兼顾短屏分辨率手机。
把短屏手机也计算出来，安卓最短的手机比例是16:9（比例等同于iOS的iPhone8），以1080*1920为例，如下图，1920同样是减去logo位的270像素等于1650。
接下来就是最关键的时刻，要用1080*2070和1080*1650两个尺寸设定闪屏的设计模版。先说一下手机的适配原理，如果一个张图片的比例和手机屏幕不一致，开发设定是撑满手机屏幕，这时手机上展示的图片就会出现上下或左右被裁剪的情况。
所以，综合两个不同比例的尺寸，短屏手机裁剪上下，长屏手机裁剪左右，然后把呈现的内容保证在不被裁剪掉的区域。
闪屏模版尺寸设定尝试
最后经过很多次的尝试，最终选用1080*1920作为闪屏的设计尺寸，向上向下适配内容的呈现都非常合适。下图是iOS和安卓手机的适配效果，向下适配16:9的手机（裁剪上下），向上适配20:9的手机（裁剪左右）。
长短屏手机闪屏适配效果
定制闪屏设计模版
模版中页面上方留了较大面积，是为了让标题内容能够呈现在长屏手机更恰当的位置上，长屏手机内容靠上，看上去不会很舒适。底部空间留的较少，因为底部再加上logo位的高度，就会让页面看起来很协调。
最终小米商城的闪屏就是用一个尺寸适配了所有分辨率的手机，思路和适配原理都已经讲清楚，如果自家的产品是优先满足iOS手机，完全可以用上面介绍的方法尝试。
敲黑板！ 下面内容可能会颠覆你对UI设计的认知！
闪屏尺寸说完了，闪屏上面还有一个“跳过”按钮，这个按钮的位置设计非常非常重要，而且大有学问，会牵扯到广告学，按钮合理的设计会让一个产品的收入倍增。
还是以小米商城的闪屏为例，之前的闪屏“跳过”按钮在页面右下角，新版我把“跳过”按钮放到了右上角，为什么？
可以肯定的是，“跳过”按钮，放在右上角，用户体验是不够好的，右下角用户操作起来才会更便捷，改为右上角其实就是为了让用户少点击。用户不去点击“跳过”按钮，那闪屏内容曝光的时间就会更长，这符合小米商城自营平台的定位，自营平台闪屏展示都是自己平台的内容。
有很多产品闪屏的“跳过”按钮，放在右下角，如微博、网易云音乐，优先满足用户体验，是因为广告的性质不同。
“跳过”按钮在右下角的产品
在广告学中有这样几个词：CPS、CPC、CPM、CPT。
了解完常见的几种广告推广方式后，我们再看一下微博和网易云音乐两款产品。他们的广告如果是CPM（曝光量）和CPT（包时间）的推广方式，那“跳过”按钮放到右下角可以提升用户体验，还不会影响推广的收入。
再来看一下脉脉和花瓣两个产品，他们的推广方式大概率是按CPC（点击率）或CPS（转化率）收费的。闪屏的“跳过”按钮放在右上角，内容的设计形式上强调并引导用户去点击广告。
“跳过”按钮在右上角的产品
聊一下脉脉和花瓣的闪屏设计，脉脉把闪屏设计成弹窗的形式，用一种骗的形式，引导用户点击假弹窗的“知道了”或关闭图标。用户的点击行为与心里目标完全不一样，这样的设计虽然能让平台获得更多的广告收入，但也损害了用户对平台的好感。
花瓣闪屏的设计较为友好，实实在在的告诉用户这是广告，你有兴趣就点“去看看”去了解，没兴趣就等一等，或点击“跳过”。花瓣这种设计形式较为适合CPS（转化率）的推广放过，因为点击了解的用户，都是对广告兴趣的精准人群。
最后总结一下文章的内容，启动页和闪屏是两个东西，通过设计可以让用户等待的时间感知更快，从而提高体验。闪屏可以用一张图适配所有大中小手机，闪屏的“跳过”按钮大有学问，合适的设计可以让平台的收入倍增。
设计从来都是用来满足商业目的的，一个小小的按钮设计，都会很大影响到平台的收入，所以UI设计任何时候都需要清楚的了解产品定位以及商业模式，这样才能有效的产出设计。
文章来源：人人都是产品经理 作者：吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com