一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。
当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。
如何定义一个后台是好的？领导说好，用户说好，你自己也觉得好，那应该就是好的。大部分情况下产品已经定制好了每个功能模块，UI上只需要对着原型加以美化，如果你是这样做的，那么做出的东西一定会让人觉得有问题但是又不知道问题在哪里，总是想让你改。
跟产品经理好好沟通，他们只是把功能模块设计出来而已，并没有设计这些模块如何呈现，如何操作，如何结合，如何分类等等。交互上在后台设计很重要，如果有专业的交互设计师，这些可以交给他们，毕竟，交互设计的收入比UI要高。然而在很多中小企业，产品原型直接给到设计是很常见的。当缺少专业的交互设计时，不要让产品觉得我们只是按照他们的原型做美化，那跟美工有什么区别，不是看不起美工，美工的全程是美术设计工程师，很高大上的职称，但是大家还是不太愿意这样被称呼吧，可能觉得头衔套太大压力会很大吧。事实上，UI本来就应该具备基本的交互技能。
风格选定是很客观的，需要经过产品经理/领导确认，如果他们很相信你的实力，你得说出足够充分的理由，为什么要选择这种风格，而并不只是看起来更高大上或只是个人喜欢。
本人对后台网页设计的风格理解，大致可以分为三类：纯白背景风，轻淡背景风，深色背景风。在后台开始设计之前，你最好先选定其中一种风格，因为后面的所有元件的设计，都得基于这个风格来设计。刚刚好，在早些时间就已经发布了一个后台的三种风格界面设计的作品，大家可以看出每个模块的搭配和区分：
纯白背景风：线框/轻淡色（灰）背景（文字一般采用黑色）
轻淡背景风：纯白色块背景（文字一般采用黑色）
深色背景风：带有透明度的纯色背景（文字一般采用白色）
设计过程是很主观的，所有设计参数都取决于设计师，但是要严格按照设计规范，并且让所有设计看起来和用起来都是合适的。
全屏响应式+轻淡色背景风是目前很主流的设计，也是很保守和安全的设计。对于轻淡色的HSB色值，可参考：H:0-360；S:0-5；B:90-97，当然没有绝对大部分情况用的浅灰是最多的，如H0;S0;B93-95。
以下将依据这个设计风格做例子展示。
一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，我把这些称为元件。这里主要分享的是构成后台中的模块和元件设计中的细节。下面重点跟大家分享表格和表单的设计。
为了避免在设计后台时一个人在YY，请保持左跟产品沟通，右跟前端沟通，这点非常重要。或许很多朋友在接到项目的时候不知道从何做起，会在网上寻找一些相关素材，然后会看到很多很炫的风格样式，像是各种各样的数据/图形展示，各种各样的统计曲线图，还有各种各样的展示动效，真想拖到自己要设计的后台。
如果合适当然可以，然而，很多情况下，统计分析一类的图表设计，产品已经有很多现成套用的模板，你可以做的很炫，但前端不一定会按照UI效果图来制作。从技术上来说，没有前端实现不了的效果，你真的不必怀疑前端的实力。所以，保持设计跟前端的良好沟通，更能提高工作的质量和效率，并且，很多时候口头/文字描述如何展示，是淡入淡出，还是弹出等等，前端是能理解的。通常地，做动效只是产品的一种展示，而并不是产品的本身，就当自己练手做动画吧。
一个典型的表格(table)包含标题（表头单元格th），内容（标准单元格td），通常都是一行行(tr)展示。设计时，应该将标题和内容区分，比如标题文字加粗/颜色加深/字号加大，或标题背景加深。因选择淡灰背景风，一般用白色块区分的原则，表格设计也尽量不使用线框，然而一行行的标准单元格如果都是白色的就不便于预览，因此可以隔一行给背景设置比主背景更淡的背景。标题和内容一般有两种对齐方式，居中对齐，居左对齐，整个站的列表只选择一种对齐方式保持一致性。为了更简洁显示，我们还可以把每一列的间隔线去掉，但并不意味着间隔不存在。每一列的文字都不要贴边，给前端标记间距（内间距padding）值，告诉前端鼠标点击表头单元格的空白地方仍然可以拖动该列的宽度，拖动宽度时保持每一列的最小宽度并且标题仍然完全展示。
我们都遇到过这样头痛的问题，当列表字段太多，一屏无法完全展示，这时应该怎么做？给表格设计一个左右滑动的滚动条？如果内容真的太多并且已经确定，这也未尝不是一种办法，但是，重新设计过表格的字段或许会更好，这个时候应该跟产品好好沟通了。有以下方法：
因为每个列表的宽度是可以拖动的，我们不能决定其固定的宽度，但每一行的高度可以设置一个值，建议所有元件的高度、宽度、间距的数值参数都设置为偶数。
如果列表的数据很多，一般都会设计page控件，但是也有一些列表会设计点击加载更多，或者直接滑动滚动条加载更多。另外一种情况更常见，即设计固定高度的列表，一页最多展示5/10/20…条数据，不管多少条，它的高度都是相对固定的。然而有时候数据太少只有一两条，这个时候仍然要固定默认最多展示条数的高度，如图：
那么问题来了，在响应式设计当中，可没有什么参数是固定的值，一般都是用百分比来设置。因为默认显示的数据条数在任何宽度的情况下仍然保持不变，因此当列表宽度缩小时，内容出现换行会增加高度而拉高整个列表的高度。值得注意的是，当其中一条数据的内容有出现换行而又有其他数据没有出现换行的时候，每一行的高度都应该按出现换行的且最高的高度保持一致，并且内容仍然保持垂直居中显示。另外，当前端做成这种响应式的列表时，一般不再让鼠标拖动列的宽度了。
当宽度拖到第三种情况，按钮也出现了换行，那每一行的高度都应该按照这个高度保持一致，即使有一些数据只有一个按钮/地址并没有出现换行，如图：
当然，如果你不想让内容出现换行，就可以用上面说的那三种方法来实现了。
不要再说为什么别人做的表格那么高大上，明明自己做的效果图还挺好看，为什么实现出来却那么丑，当你了解这里面的各种参数和逻辑，并且很好的跟前端沟通，参照以上规则，不管再复杂的列表都可以做的得心应手并且得以实现。
在后台设计中，表单出现的频率并不低于表格，甚至可以说几乎所有类型的网页都会出现。比如登录注册、信息录入、搜索、选择器等等。常见的表单有输入框、普通按钮、开关按钮、单选框、复选框、下拉菜单。
一个输入框，通常有标签名称label、提示信息placeholder（输入信息后提示文字消失）、初始值value（需手动删除）。如果是必填表单，在适当位置（标签的前后，输入框后）加上红色*号（或其他符号）。
一些有字数规定的输入框，可以增加一个剩余字段提示
事实上，在设计表单之前，我们就要先对表单的标签进行优化，标签字段尽可能的简约。每个组的表单，标签都必须是对齐的，输入框/选择框也应是对齐的。当这个组的表单的标签字数较少并且较对应时，可以采用左对齐的方式，并且最长标签的名称离输入框有margin值。
另一种情况，也是更经常遇到的情况，当一组表单的标签很多时，某些标签字段不能更好的简化，标签的字段都不对应，这个时候可以采用右对齐的方式，这种方式更灵活。
当一组表单的标签太多时，请跟产品沟通并对其进行分类。
有些表单是有逻辑/顺序的，比如地区的选择、出生年月与生肖/星座的对应等等。例如，在选择省份之前，市区是不可操作的，在UI上做灰度显示不可操作。除了灰度代表不可操作，透明度也可以起到同样作用，这种方式也可以运用在按钮上。
带有识别功能的输入框：
当输入有误时，尽量避免弹出框提示，可以直接对输入框设计不同的状态显示默认状态、选中状态、错误状态、成功状态。
通过以上方式设计的一组信息录入型的表单设计，如图：
表单的设计可以单独出一篇更详细的文章，还有筛选/选择器一类的表单，这里就不一一描述了。
弹窗在后台的出现频率非常高，其强度一般分为三种，弱弹窗、强弹窗、重弹窗。字面上已经很好理解，轻弹窗，一般鼠标经过的时候即可出现而不用点击，比如提示说明，显示更多信息，鼠标移过后立即消失，它不会影响下一层（当前页面内容）页面的视觉效果和操作，因此这个弹窗通常会设计一个浮动带有阴影效果的框。
而强弹窗则是一个对话框，它暗示你必须对这个对话框进行操作后才可以离开，如确认信息、错误提示信息。而重弹窗更像是一个新的页面，比如弹出的列表，详情，表单等。这两种弹窗通常是点击某一个按钮/经过某一个操作触发的。这两种弹窗一般会对下一层页面的视觉做蒙版处理，比如加上一定透明的黑色/白色，给下一层页面的内容做模糊滤镜等等。
当然，这三种弹窗式可以结合的，针对不同场景使用不同的弹窗设计这点非常重要，这直接关系到用户体验效果。你是否可曾遇到过使用一款产品时，动不动就弹窗，并且需要去点某一个按钮才可以关闭。
任何一种场景在设计上都可以得以解决，什么情况下使用什么弹窗设计，或者有时候必须使用强弹窗，但是又不想让用户操作关闭，我们可以设计几秒后自动关闭，或者点击弹窗以外的区域直接关闭。
弹窗还有两种主要的表现形式，一种是顶部有关闭按钮，另外一种是直接点击确认按钮或者读秒关闭。在保持规范性的同时，尽量避免按钮功能的重复，比如一个提示信息必须让用户点击确认按钮才可以关闭，那么就使用没有顶部关闭按钮的设计。对于重弹窗，一般都会采用顶部有关闭按钮的设计。
弹窗并不是后台的专利，它在移动端更高频率的出现，例如活动页面的弹窗，趣味性就显得更重要了。
这篇文章主要跟大家分享的是，当开始网页后台项目设计的时候，保持跟产品和前端的良好沟通。确定风格后开始设计，并分享了3个主要的点：
后台还有其他元件设计，欢迎大家共同探讨。
文章来源：优设网 推荐：程远
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020年可以说是一个风险年，但更是一个机会年，全球各类资产都出现了大行情机会，市场的投资热情再次被点燃。借着这股东风，在2020年年尾，我们开始了对公司金融产品的优化改造工作，希望通过改造提升产品的用户体验，配合来年的运营活动，提升产品的用户数和活跃度。改造工作主要为优化开户流程、提升社区氛围、完善交易功能三个部分。后续我将通过系列文章对这次优化设计过程中的思考进行分享。
表单作为平台与用户联系最为紧密的一环，良好的表单设计可以带给用户流畅自然的用户体验，保证用户情绪的正向增长，而混乱无序的表单则会引起用户的负面情绪，影响甚至阻碍用户操作的完成，降低用户对品牌好感度和信赖度。对于我们这样的金融产品而言，产品内存在着如开户表单、出金申请表单、调整杠杆申请表单等形形色色的表单，如何将这些表单整理归纳形成一套完整的表单设计体系，带给用户统一、高效且优质的填写体验，是我们这次表单优化的主要的任务。
系列文章中关于表单设计部分我将分为上下两期来向大家分享，体系化表单设计（上期）主要介绍在项目中总结出的表单设计中的方法论，下期则是介绍方法论在我们项目中实际的应用，希望这次的分享能为你今后的表单设计提供思路与参考。
表单在我们工作、生活中的使用由来已久，在还没有互联网的年代，表单就已经是人们收集和存储数据、信息的重要手段，并一直沿用至今。如体检时填写的体检表、入职时填写的入职登记表、银行开户时填写的开户表都是使用的这种印刷的纸质表单。它们身上有很多设计可以作为重要的参考，帮助我们优化 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近一直在恶补关于结构化思维的知识，作为一名视觉设计师的我，经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒出很多点子和想法，但很难将它们组织成一个清晰完整的解决方案，随着工作时间越长，发现这种思维能力会让自己在工作中经常遇到这些困惑：
如果你也有同感，建议要开始学习结构化思维，其实结构化思维是一个职场人非常基础的能力，掌握这项能力能让我们在职场上少走很多弯路，但是这种能力不容易学会，是需要在平时刻意训练才能渐渐掌握。
设计师随着年龄的增长，除了保持硬核的专业技术能力之外，更重要的是不断提升自己的思维能力，接下来我结合自己的这段时间的思考和实践给大家做些分享：
本篇文章大纲如下：
先来做一个小游戏，大家试下用 3 秒钟时间速记下图，然后说出图上有多少种颜色。
是不是觉得有点记不住？如果图片换成这样呢？答案是不是一目了然？
图二将颜色进行整理分类成暖色系和冷色系，并且颜色按照从深到浅的规律排序，更容易让人理解和记忆，因为它更加符合我们人类大脑思维的 3 条基本规律：
结构化思维定义
结构化思维是当我们面对问题的时候，通过某种结构，从多个侧面进行思考，拆成一个个能解决的部分，并且采取恰当的手段系统性地解决问题，是一种从无序到有序的思考过程；也是从整体到局部，并且层级分明的思考模式。
结构化思维可以真正的帮助我们去思考和表达，作为设计师的我们在日常工作中非常忙碌，被很多琐碎的项目搞得自己手忙脚乱，因此学会用结构化思维有以下四大价值：
1. 理清大脑思路
更系统化的全局思考，让自己的设计思路经得起推敲
2. 高效解决问题
更有效率和节奏的解决手上问题，减少让自己重复劳动
3. 清晰表达沟通
与项目成员的沟通更顺畅，让他人更准确理解自己所表达的内容
4. 构建知识体系
通过碎片化知识进行结构化整理，逐渐建立自己的知识体系
讲了这么多，那应该怎么掌握这种思维能力呢，其实我们很早就接触到结构化思维了，比如学习写作文时的“总分总”结构，解答数学题时先求什么再求什么，都属于结构化思维的范畴。
结构化思维分为两种框架，第一种是自上而下的拆解法，适用于日常思考问题和表达沟通上；第二种是自下而上的归纳法，适用于归纳总结，输出文章。
自上而下的结构原理来自金字塔结构，有 4 个特点：结论先行、以上统下、归类分组和逻辑递进，下面用一副简单的图来表示结构。
如何应用
1.结构化思考问题
举个例子大家会更明白些，比如最近接到一个设计需求是进行官网的改版，那我们利用结构树进行自上而下思考，从了解现状-深入分析-解决方案进行结构化思考。
了解现状是先思考改版的背景以及目标，深入分析是要清晰目前官网的问题是什么？竞品是怎么做的？解决方案拆解为交互体验层面和视觉表达层面应该怎么做？
通过前期这三步的结构化思考，让自己大脑捋顺思路，就更清楚该怎么进行下一步了！
2. 结构化表达沟通
比如我们平时输出了多个设计方案时，需要跟产品阐述设计方案 A 更好，那应该怎么清晰的表达呢？
同样利用结构树，第一步先表达自己的结论，再给出更合适的理由，然后逐步阐述支持理由的每一个事实依据。用结构化的方法表达出来，让同事也更清楚自己的想法和设计思路！
当手上有一堆信息却毫无头绪时，而且不清楚该用什么框架的时候，通过下面四个步骤可以把信息进行结构化整理。
从收集信息-归类分组-提炼结构-完善框架四步组成，像刚才开始玩的小游戏就是用这四步进行总结和完善，我概括抽象成以下这四步方法：
可以看到从一开始各自洒落零散的信息到逐渐清晰的结构化信息，这就是自下而上归纳法的神妙之处。当然我举例的是比较概括性的模型，具体可以通过自己工作中的真实案例进行不断的练习。
结构化思维是每一个设计师都必备的，今天的小分享更多是一个抛砖引玉，剩下的需要大家真正实际应用到工作和生活中，大家平时跟产品沟通交流，项目汇报，撰写文章都逐渐用结构化思考的方法，久而久之你会发现处理更复杂的事情都游刃有余，事半功倍！
文章来源：优设 作者：PSERIC
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行 B 端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于 B 端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
1. 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在 1.2:1 时，人眼较难看到元素；当对比度在 2.0:1 时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在 1.6:1 左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
2. 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
3. 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
4. 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版是指各元素在图表中的尺寸及布局等，对于 B 端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对 B 端后台类产品的排版规则，力求保证用户图表的使用体验。
1. 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。
“迷你图”尺寸最小，舍弃了 Y 轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每 4 像素 1 个数据点，Y 轴坐标刻度不超过 5 个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
2. 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能解决。
第二个常见问题是刻度的说明文字过长。
如果是 X 轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜 45°~90°的办法(如文字全部为中文，可用竖排代替倾斜 90°)，缓解信息过密看不清的情况。
如果是 Y 轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的 Echarts 图表、D3 图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是 AntV 等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
3. 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的 B 端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对 B 端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
1. 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，即深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
2. 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在 50%-70%，把饱和度限制在 75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
3. 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的 HCL 色彩模式来衡量色彩。其中 H 表示色相、C 表示饱和度、L 表示明度。HCL 区别于传统的 RGB 或 HSB 模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL 模式在诞生距今不到 20 年间，已被一些先锋设计师用于数据可视化的呈现中。
但是 HCL 作为小众色彩模式，目前设计软件鲜有支持，造成了 HCL 色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及 HCL 实用小工具附在文末，帮助大家直观的查看和使用 HCL 模式颜色。
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让 B 端不再有难懂的数据。
附：色板及 HCL 工具
文章来源：优设网 作者：百度MEUX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
注：服务器为CentOS 7.3.1611，使用Xshell6 + Xftp6工具完成服务器远程操作
通过Xshell连接服务器成功之后就可以开始以下工作
yum remove nodejs npm -y
然后手动进入以下目录删除相关文件
进入 /usr/local/lib 删除所有 node 和 node_modules文件夹
进入 /usr/local/include 删除所有 node 和 node_modules 文件夹
进入 /usr/local/bin 删除 node 的可执行文件
https://nodejs.org/en/download/
cd /usr/local/
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz
xz -d node-v10.16.0-linux-x64.tar.xz
tar -xvf node-v10.16.0-linux-x64.tar
mv node-v10.16.0-linux-x64 nodejs
cd nodejs
ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
如果不小心输错了路径，重新创建会提示：‘ln: 无法创建符号链接"/usr/local/bin/npm": 文件已存在’，输入rm /usr/local/bin/npm命令清除后可以重新创建
node -v
npm -v
npm install -g cnpm
ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm
cd /var/www/
注：如果没有www目录就在var目录下输入命令mkdir www手动创建一个，并进入到www目录
mkdir demo
cd demo
npm init -y
注：这里的-y意思是省略创建过程中一直输yes的步骤
cnpm i express -D
mkdir app.js
const fs = require('fs'); //文件模块 const path = require('path'); //路径模块 const express = require('express'); //express框架模块 const app = express(); const hostName = '11.22.33.44'; //ip const port = 9999; //端口 app.use(express.static(path.resolve(__dirname, './dist'))); // 设置静态项目访问路径(此处的dist为webpack打包生成的项目文件夹名称) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8'); // 设置所有访问服务请求默认返回index.html文件 res.send(html); }); app.listen(port, hostName, function() { console.log(`服务器运行在http://${hostName}:${port}`); });
npm run build
生成的dist文件夹就是我们需要部署到服务器上的项目
node app.js
如果能正常访问项目地址表示已经搭建成功。
请求后端接口跨域方案请见：
跨域代理方案1：Nginx使用教程
跨域代理方案2：Nodejs 中使用http-proxy-middleware实现代理跨域
在xshell里用node默认的启动方式有一个缺点，xshell退出后nodejs项目便会停止
使用pm2这个托管工具可以很好的解决这个问题，而且当代码有更改时会自动重启服务更新
1.首先多按两次ctrl +c结束之前的运行程序，接着输入下面的命令安装pm2并创建软链接
cnpm install pm2 -g
ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/pm2
2.然后输入下面的命令启动托管任务，abc为托管项目定义的名称
pm2 start app.js --name abc
以下为pm2常用命令说明
| 命令 | 功能 |
|---|---|
| pm2 start app.js --name abc | 启动(--name为定义任务名称的指令，abc为任务名称值) |
| pm2 start app.js --watch | 启动( --watch为监听应用目录的变化的指令) |
| pm2 restart app.js | 重启任务 |
| pm2 stop abc | 结束(abc为任务名称或id) |
| pm2 list | 查看所有任务列表 |
pm2基本功能命令
| 功能 | 命令 |
|---|---|
| 启动进程/应用 | pm2 start bin/abc 或 pm2 start app.js |
| 重命名进程/应用 | pm2 start app.js --name abc |
| 添加进程/应用 | pm2 start bin/abc --watch |
| 结束进程/应用 | pm2 stop abc |
| 结束所有进程/应用 | pm2 stop all |
| 删除进程/应用 | pm2 delete abc |
| 删除所有进程/应用 | pm2 delete all |
| 列出所有进程/应用 | pm2 list |
| 查看进程/应用详情 | pm2 show abc 或 pm2 describe abc |
| 查看进程/应用资源消耗 | pm2 monit |
| 查看进程/应用日志 | pm2 logs abc |
| 查看所有进程/应用日志 | pm2 logs |
| 重新启动进程/应用 | pm2 restart abc |
| 重新启动所有进程/应用 | pm2 restart all |
pm2使用教程参考链接：
https://www.cnblogs.com/chyingp/p/pm2-documentation.html
https://www.jb51.net/article/113398.htm
转自：csdn。作者：lihefei_coder
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文由小芭乐发表
首先举一个例子：
模拟在输入框输入后做ajax查询请求，没有加入防抖和节流的效果，这里附上完整可执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } let inputNormal = document.getElementById('normal'); inputNormal.addEventListener('keyup', function (e) { ajax(e.target.value) }) } </script> </head> <body> <div> 1.没有防抖的输入： <input type="text" name="normal" id="normal"> </div> </body> </html> 效果：在输入框里输入一个，就会触发一次“ajax请求”（此处是console）。
没有防抖和节流
缺点：浪费请求资源，可以加入防抖和节流来优化一下。
本文会分别介绍什么是防抖和节流，它们的应用场景，和实现方式。防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。但二者应对的业务需求不一样，所以实现的原理也不一样，下面具体来看看吧。
在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。
(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；
(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；
还是上述列子，这里加入防抖来优化一下，完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { //获取函数的作用域和变量 let that = this let _args = args //每次事件被触发，都会清除当前的timeer，然后重写设置超时调用 clearTimeout(fun.id) fun.id = setTimeout(function () { fun.call(that, _args) }, delay) } } let inputDebounce = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputDebounce.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) } </script> </head> <body> <div> 2.加入防抖后的输入： <input type="text" name="debounce" id="debounce"> </div> </body> </html> 代码说明：
1.每一次事件被触发，都会清除当前的 timer 然后重新设置超时调用，即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用，导致事件处理程序不能被触发；
2.只有当高频事件停止，最后一次事件触发的超时调用才能在delay时间后执行；
效果：
加入防抖后，当持续在输入框里输入时，并不会发送请求，只有当在指定时间间隔内没有再输入时，才会发送请求。如果先停止输入，但是在指定间隔内又输入，会重新触发计时。
加入防抖
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
(1)鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
(2)在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
(3)监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
还是上述列子，这里加入节流来优化一下，完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入节流</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模拟ajax请求 function ajax(content) { console.log('ajax request ' + content) } function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this; let _args = arguments; let now = +new Date(); if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fun.apply(that, _args); }, delay) } else { last = now; fun.apply(that, _args); } } } let throttleAjax = throttle(ajax, 1000) let inputThrottle = document.getElementById('throttle') inputThrottle.addEventListener('keyup', function (e) { throttleAjax(e.target.value) }) } </script> </head> <body> <div> 3.加入节流后的输入： <input type="text" name="throttle" id="throttle"> </div> </body> </html> 效果：实验可发现在持续输入时，会安装代码中的设定，每1秒执行一次ajax请求
加入节流
总结下防抖和节流的区别：
-- 效果：
函数防抖是某一段时间内只执行一次；而函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
-- 原理：
防抖是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
如有问题，欢迎指正。
转自知乎 原文链接：https://zhuanlan.zhihu.com/p/51608574
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在新业务启航准备出海乘风破浪时，业务方和产研同学就开始思考一个问题：产品体验做得足够好吗？
为了回答这个问题，用研同学在研发阶段就开始进行 demo 测试，试点运营时期进行反馈追踪，上线初期进行可用性测试……可以说，不是在验证体验，就是在准备验证的路上。但这些回答都是片段性的，只能发现散落的关键点。
等到业务成熟运转且稳定后，各方负责人可能会发出灵魂一问：如何全面评价业务体验？此时，用研工程师意识到：建立长效全面的体验监测系统非常重要和必要。
麦肯锡给出的定义是：一个持续运转的观察系统。①能发现足够详细的旅程、触点、渠道方面的客户体验信息 ②能长期追踪客户体验变化和衡量改善措施的效果 ③能够为企业带来统一的审视客户体验的视角 ④能提供完整准确的体验数据，让组织基于数据而非主观直觉做出决策。通过这份定义，可以得出体验监测系统的几个特征：
1. 认可度高的体验监测模型
定义和特征有了，那么成型的体验监测系统是什么样的？我们整理了目前认可度较高的体验模型：
谷歌 HEART 模型（C 端体验模型）。该模型由 5 个指标构成，分别是：
阿里 PTECH 模型（B 端模型），由 5 个指标构成：
LIFT 模型（C 端模型），由 widerfunnel 公司开发，旨在提升转化率，主要有六大法则：
2. 模型应用问题
这些模型有衡量 C 端体验的，有针对 B 端产品的，在度量线上系统的用户体验方面表现优异，但存在 3 个问题导致他们并不适合贝壳这种极端复杂、线上线下交融的业务场景：
因此，我们在贝壳探索了一条差异化的建立 B 端体验监测体系之路。
监测系统的三大核心——测量指标、测量范围、测量用户，在搭建前需要按顺序逐一确定。
1. 确定测量指标
测量指标，指用于评价系统好坏的量化数据。在 B 端，可分为五类指标：
由于不同 B 端系统的功能、应用场景、用户等差异很大，因此可根据实际情况组合上述指标，形成更贴合业务的测量体系。
2. 确定测量范围
B 端业务一般有较长的使用链路和较复杂的功能，在搭建系统前，需要确定：
测量范围越大，越能发现“隐匿的冰山”，触达业务核心问题。但随之带来的问题是：①测量成本增大 ②发现的问题类别复杂，权责难以落实到部门，落地困难。
3. 确定测量用户
B 端业务的用户角色一般多于 C 端，以新房系统为例，按使用频率可分为主使用者、次使用者等，按参与角色又可分为信息录入角色、审核角色、维护角色等。在确定测量指标和测量范围后，根据不同用户角色对业务的贡献度、参与度，考虑将哪些角色纳入监测系统。
指标、范围、用户都确定后，B 端监测体系也就自然的建立起来。
接下来，我们简单介绍下贝壳的 B 端体验监测系统的构建思路。
在贝壳，B 端体验监测系统经历了三个重要阶段：
第一阶段
从功能点出发建立产品满意度系统，如下图所示（部分业务流程由于保密原因，做了修改或隐匿）。
△ 图 1 早期二手满意度架构（仅包含部分内容）
特点是：①架构清晰，基本按照功能架构 ②次序明确，一级影响因素（大产品功能）与二级影响因素（大功能下的小功能、细节设计等）层层递进。
之所以采用这样的架构和内容，是因为：①早期建立监测体系时，产品同学往往参与意愿更强烈，提供的资料和需求更多 ②只有产品问题能确定落地，其他问题总会被推诿 ③产品槽点多，只专注这个区域就挖不完宝。
这样的体系好处是：①问题明确，低满意度产品模块可快速找到对接人，容易落地 ②结构简单，背景知识少，设计满意度系统认知和时间成本低，可以先跑起来 ③合作部门少，只需要和重点模块产品打交道，项目推动更省力 ④可计算出每个模块对整体产品满意度的贡献值，帮助产品同学发现优先改进点。
劣势是：①只能发现单个模块的问题，陷入谷仓效应 ②以产品功能为骨架，可能漏掉其他用户关注的业务、运营问题 ③产品框架不符合用户关注习惯，部分打分可能与实际情况有出入 ④题量较大，完成难度大。
第二阶段
考虑到产品满意度系统的问题，我们在此基础上进行了监测系统的优化：从服务设计理论出发，建立场景式满意度系统，如下图所示（部分业务流程由于保密原因，做了修改或隐匿）。
△ 图 2 早期新房满意度架构（仅包含部分内容）
这样的监测系统特点是：
这样的体系好处是：①可以发现整个业务流程的单点问题与衔接问题 ②从用户角度出发设计问题，用户回答顺畅准确 ③指标更符合业务需求 ④能发现不同角色的分工问题，是否存在某个角色工作负荷过高。
劣势是：①结构复杂，需要对业务非常熟悉，前期准备工作非常耗费人力与时间成本 ②发现的问题难以归类，解法需多方协同（如运管人员审核压力过大，需要同时优化产品逻辑和增加数据对接准确性）③合作部门多，项目推动难度大 ④调研对象多、覆盖范围广，后期数据分析、结论产出耗费精力多。
第三阶段
由于二代系统耗费精力过多，贝壳 er 们在此基础上又进行了改良，建立自动化触点式体验监测系统，以数据看板+人工分析形式运转。
这样的监测系统特点是：
贝壳 B 端体验监测系统的这三个阶段，代表了三种思想的转变：从先跑起来，到精细测量，再到自动化分发，越来越全面，越来越省力。
1. 新房 B 端满意度系统
新房是一个多角色参与的复杂系统，参与的角色包括：购房客户、新房经纪人、客发经理（负责宣传楼盘、与开发商谈判拿盘、系统内录入楼盘资料等）、驻场（在楼盘现场处理经纪人带看事宜、录入各项数据、同步销控信息等）、运管（负责审核成交数据、解决流程问题等）、财务（负责回款跟踪等）、法务（负责确认合同条款、合作归档等）……
整体流程也非常复杂，从接待客户到完成回款，一共有 20 多个环节，每个环节都要耗费 1~3 个角色的大量精力。如何测量这个系统的用户体验，就是个非常头痛的问题。
面对这个硬核满意度任务，我们给出的解决方案是：
最终产出了一个包含 4 种最重要角色（经纪人、案场等）、22 个流程节点、3 类指标（满意度、NPS、费力度）的新房体验监测系统，如下图所示（部分业务流程与业务数据由于保密原因，作了修改或隐匿）。
△ 图 3 新房体验监测系统示意
其中 NPS 与全体满意度作为整体指标，描述新房系统各角色的总体感知和体验情况；费力度与流程满意度作为单节点指标，描述不同节点的业务感知和体验情况。未来，在业务持续发展过程中、业务方遇到整合问题以及项目有了全局落地的能力后，我们也会增加针对整体业务和针对单个节点的业务指标（如回款安全性、流程可跟踪性），将体验监测与商业价值挂钩，进一步提升 B 端体验的势能。
通过贝壳的例子，可以发现 B 端体验监测系统往往比 C 端更复杂，对创建者的业务理解程度有更苛刻的要求。无论搭建还是落地，都需要较高人力和时间成本，因此建议大家在设计 B 端体验监测系统前做到：
B 端监测体验系统的建立与运行，是复杂的长期性工作，也是对用研团队专业性和业务理解程度的挑战，愿大家勉力前行。
文章来源：优设 作者：贝壳KEDC
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着技术的发展，可穿戴设备正在从实验室走向市场，从独立使用到多平台联动，从注重基于硬件的产品功能到注重基于用户数据的应用与服务。Apple Watch 搭载的 watchOS 则是可穿戴设备用操作系统中的翘楚。相较于 iOS、Android 及网页，watchOS 对于大多数设计师来说都是一个相对陌生的领域。在这篇文章中，我们将为大家分享设计 watchOS app 中的要点。
本期提纲：
watchOS 有 3 项设计原则：
碎片化的使用时间、较小的屏幕空间，这些客观条件要求 watchOS 上的设计要足够「短平快」。
「短」常体现于精简的信息量及大尺寸的文本。如在「体能训练」app 中，对关键运动情况的说明不仅言简意赅，还用了最大的 large title 这一文本样式。仅需一瞥，心中就有数了。
「平」体现在扁平的信息架构。相对于其他平台，watchOS 上的 app 一般仅使用以下 2 种相对简单的信息架构类型：
层级型（Hierarchical Navigation）
分页型（Pagebased navigation）
在实际运用场景中，这两个类型还可以混用。如「体能训练」app 就用了混合的信息架构类型，但仍保证了仅有 2 层深度的扁平要求。
「快」则在于被拆解为小块的微任务，如 iOS 中的「音乐」，在 watchOS 中被拆解为「音乐」「广播」「播放中」3 个 app，其对应着浏览音乐库、浏览广播、控制音频播放这 3 个微任务。这一思路与「桌面应用的移动化」非常相似。
承载 watchOS 的 Apple Watch 有着极高水准的工业设计，而与 UI 最为相关的则是其屏幕及 Bezel。其中，Bezel 指的是 Apple Watch 屏幕四周环绕的黑色边框，经特殊工艺处理，其边缘如水滴般饱满。在强光照射下，更能呈现出其精致质感。这很难让人不想到 Apple 经典的 Aqua 风格。
为了能将其设计美学在 UI 中得到继承，我们建议采取以下设计策略：
纯黑背景
Apple Watch 采用的是 OLED 材质的屏幕，这种材质的屏幕在展示纯黑（#000000）时不会发光，也更省电。若在设计中使用纯黑的背景，背景就会与 Bezel 融为一体、UI 元素直接「镶嵌」于表盘，可谓浑然天成。
平滑圆角
无论是 Bezel 还是屏幕，均有着圆润的设计语言。因此，在 UI 中使用与物理环境相匹配的圆角样式，可使软硬件更加契合。watchOS 中的圆角使用可以比 iOS 中更大胆。如在 iOS 中，按钮的常规圆角值为 8pt，watchOS 中则增大为 9pt。同时，watchOS 还有大量全圆角的样式，就连应用图标都是正圆。
在微信 Apple Watch 版中，聊天页面的 3 个回复按钮更是使用了正圆样式，不仅减少了被屏幕圆角裁切的可能，更为应用赋予了浓郁的 watchOS 平台特色。
全宽元素
因 Bezel 的存在，当前的 Apple Watch 还不能称为真正的全面屏。如果可能，将按钮、列表项等元素横向撑满屏幕，不仅能从视觉感知上尽可能增加无框感（frameless），还能充分利用原本就比较紧缺的屏幕空间。
Apple Watch 是非常个人化的设备，我们需要为用户的隐私做足够缜密的考量。如 Apple Watch Series 5 及更新机型的屏幕有着常亮显示（AlwaysOn）功能，当用户抓着地铁扶手或伏案工作时，屏幕上常亮显示的信息就可能被旁人看到。因此，我们要为常量状态页面中的个人信息进行脱敏处理。
但同时，作为基本随时贴身的设备，减少对用户无谓的打扰也是设计师需要注意的基本要求。关于这方面的设计，大家可参阅本公众号关于宁静科技（Calm Technology）的文章。
总的来看，watchOS 的设计原则可简要总结为：在物理性质上，强调「软硬件一体」；在交互表达上，规避信息过载、注重信息安全。
watchOS 支持以下手势：
受限于较小的屏幕，多点触控是不被支持的。如 iOS 中常用的双指捏合（Pinch）及双指旋转（Rotate）。
在小而圆滑的 Apple Watch 的屏幕上，边缘滑动是更加便捷的。其中，上、下、左侧的边缘滑动已被系统定义，分别为打开通知中心、打开控制中心、返回。而右侧的边缘滑动则尚未被系统占用，这给了设计师一个自由发挥的空间。
数码表冠（Digital Crown）
数码表冠是非常适合在手腕上与智能设备交互的实体。通过旋转数码表冠，用户可以实现页面、列表的滚动，滚动速率收放自如。
我们还可以将滚动数码表冠所产生的交互效果进行灵活的设计。如：
侧边按钮
目前，侧边按钮相关的交互属系统级，不可自定义：按下侧边按钮，可以调出程序坞；双击侧边按钮，可使用快捷交通卡。
Force Touch 是较旧版本的 watchOS 中的特殊手势，一般情况下可呼出上下文菜单（Context Menu），可以简单理解为 iOS 中的 3D Touch。但因 Force Touch 这一手势的可发现性较弱，目前已用长按（Long Press）来代替之。
不过，目前又有了在 watchOS 中用双击（Double Tap）来替代长按的趋势，这是因为双击这一手势会更加轻巧一些。如在信息中，双击或长按消息气泡均可呼出点回选项。
伴随着设备数量的增长，用户的注意力变得越来越稀缺。秉承 Calm Tech 的思想，设计师需要选用合适的反馈形式，来帮助用户将注意力进行有的放矢的合理分配。运用触觉这一边缘感知通道，是一个非常好的降噪思路。
得益于 Taptic Engine 的硬件支持，watchOS 的触觉反馈（Haptics）效果非常理想。虽然目前 watchOS 暂不支持自定义触觉反馈（在 iOS 中可通过 UIFeedbackGenerator 来自定义(fn)），但 watchOS 于系统层级提供了一组触觉反馈模版。我们需要对振动模式有着充分的理解，才能为关键的交互添加触动人心的触觉反馈。
1. 隐喻
触觉反馈与听觉反馈可以进行有机对应，因为从物理学的角度上来看，他们都是由物体振动产生的。所以，在设计触觉反馈时，我们可以借助声音设计的经验来辅助思考。
想象这样一支交响曲，悠扬的长笛声缓缓地奏响（Ascending），拉开了风和日丽的一天。提琴、单簧管也徐徐加入（Flat），正如柳树的嫩芽在春风中飘扬。长笛独奏加快了节拍，曲调变得活泼起来（Steady），原来是草坪里的小兔子探出了脑袋……最后，伴随着音乐的渐弱，美好的一天结束了（Descending）。
在音乐作品中，作曲家通过不同的节拍、旋律、音色，来构建出不同的听感。如：
转译到触觉中，我们也可以通过不同参数的调节，来构建承载不同信息内容的触觉反馈。
2. 参数
Apple 官方给到了如下 2 个设计参数：
我们对官方的参数进行进一步的解构，并参考作曲家的做法，给到了如下 3 个参数来描述触觉反馈：
其中，质感指的是振动脉冲的锐度。锐度越高，每个振动脉冲就能感知得越清晰。
3. 展望
相信在未来的系统版本中，无法自定义触觉反馈的限制将被逐步解除。现市面上已经出现了诸如 Lofelt 一类面向触觉反馈的专业设计用程序，设计师们可以前往小试牛刀。
Apple 的产品拥有着得天独厚的生态优势，watchOS 也不例外。类似于 macOS 及 iOS，watchOS 也支持「接力」功能（Handoff）。如：在 watchOS 中使用「邮件」app 回复电子邮件时，可以通过「接力」切换至 iOS 中以使用更大的屏幕进行输入。
同时，「接力」不仅能在 app 间生效，也能在网站和 app 间生效。如在 macOS 中使用 Safari 浏览你的网站的用户在离开 Mac 设备后，Apple Watch 会提示用户是否继续在 watchOS 中使用你的 watchOS app。这给我们的设计带来了更多的可能。
巧妙运用 watchOS 的「接力」能力，我们能构建跨设备交互的无缝体验。
市面上的 Apple Watch 有着 4 种不同的屏幕规格：30mm、40mm、42mm 及 44mm。其中，40mm、44mm 是较新设备的屏幕规格，也是设计过程中应重点关注的对象。下面，我们以最大的 44mm 的屏幕规格来进行设计解析。
1. Display Corners
指的是屏幕四角无法展示内容的区域，契合于 Apple Watch 的屏幕物理边界。设计时，需避免在这些部位放置内容。
2. Clear Space Under Status Bar
指起始状态下，界面内元素与位于屏幕顶部 status bar 的间距。另外，在 watchOS 中，status bar 是常驻的。
3. Copy Safe Area
文本的安全展示范围。纵向来看，上距 status bar 5pt 的 clear space，下接 display corners。
4. Fullwidth1 Element Safe Area
指除文本外其他元素的安全展示范围，横向撑满了整个屏幕，纵向避开了 display corners。这里对应了上文推荐大家使用的「全宽元素」策略。
40mm 的页面布局与 44mm 的类似，只是数值有所不同。对于 38mm、40mm 的页面布局，因没有 display corners 的引入，布局方式非常简单，这里便不展开叙述了。
1. 西文环境
在西文环境中，watchOS 默认使用 SF Compact，也可以选用 SF Compact Rounded（SF Compact 的衍生字体）。值得注意的是，SF Compact 这一字体需视文本的大小来选用具体类别：
在实际开发过程中，配合使用 Dynamic Type 技术，UI 中的文本可以随用户的设置动态调节：无论是字重、字号、字间距还是行高，均会有一一对应的调整。
2. 中文环境
在中文环境中，watchOS 默认使用苹方字体。西文环境中 SF Compact Text 和 SF Compact Display 使用的细致判定，在中文环境中暂无。
3. 字体适配
Apple 官方在不同的屏幕尺寸下使用了不同的字体阶梯：
不过，我们推荐在实际设计过程中选用一个字体阶梯即可。
为论证仅使用一个字体阶梯的合理性，我们需要引入「弧分」的概念。弧分是一种用来描述相对尺寸的单位，而弧分值指的是观测者眼睛与被观测物的夹角。由于使用了角度来计数，在定义字体尺寸时就可以忽略物体的距离。但无论用户使用哪种屏幕大小的 watchOS 设备，其舒适的抬臂姿势是相对固定的，即用户眼睛距离 watchOS 设备的距离是相对固定的。因此，只有相同尺寸的大小的字体才能保证相同的弧分。
选用一个字体阶梯的另一个好处体现在多屏幕尺寸适配中。若严格遵循 Apple 官方的处理方法，设计师需要输出 4 套视觉标注才能完成设计；若使用一个字体阶梯，我们仅需在设计中标注好自适应规则即可。倘若未来出现了更多的屏幕尺寸，我们的方法会显得更加自如。
4. 推导方法
为了不重复造轮子，我们推荐使用你已有的 iOS app 设计中的字体体系为基础，来推导出 watchOS app 的字体体系。具体过程如下：
我们按照上述方法，推导出了微信 Apple Watch 版的字体体系：
目前，iOS 及 macOS 共用一套色彩体系。watchOS 及 tvOS 因使用场景、硬件性质及美学理念的差异，其色彩体系需要进行差异化推导。
watchOS 色彩体系分为以下 2 个部分：
1. Global Tint Colors
基本等同于 iOS 中浅色模式（Light Mode）的颜色。在实际设计过程中可以直接迁移。
2. Additional Colors
它是 Global Tint Colors 的延伸，一般用于可交互元素的底版，如「体能训练」中的按钮。通过为 Global Tint Colors 添加不透明度即可生成一套相对应的 Additional Colors。不透明度数值的范围推荐在 14%～17% 之间，并遵循「亮度（Brightness）越高，不透明度越低」的原则。
3. Semantic Colors
语义化颜色指的是根据用途来描述颜色，而不是直接描述色值。虽然在 watchOS 中没有深浅色模式的区分，但色彩的语义化仍能帮助我们科学而谨慎地用色。
为了方便在设计过程中使用语义化颜色，我们推荐在 Sketch 中使用颜色变量（Color Variable）进行底层色彩体系构建。如下图所示，是微信 Apple Watch 版中非常常用的三个颜色变量：
watchOS 中的 UI 元素与 iOS 差别不大，设计师在拿到 UI Kit 后应该都能快速上手。这里仅提出 4 个比较特殊的组件进行简述。
1. Lists and Tables
Lists 和 Tables 都是纵向排列以展示内容的元素。简单来说，Lists 能承载更多的样式及交互行为，如：
2. 按钮
在 watchOS 中，常见的按钮样式有：
如何判定该使用哪种样式呢？这取决于按钮所在页面是否需要滚动才能展现所有内容：
以上判定方式的原理是，只有通过标准圆角矩形按钮，才会在屏幕中呈现出「按钮的一部分被盖住」的视觉效果，进而暗示用户下面还有内容。这一判定实为巧妙，但在实际开发实现的过程中却很难做判定。因此，我们推荐默认使用标准圆角矩形按钮。
在 watchOS 中，通知被分为 3 类：
1. Short Look
Short Look 指的是收到通知的那一刻立即弹出的模态页面，其的持续时间很短，是为「轻轻一瞥」的行为设计的。所以，我们要保证 Short Look 中的内容足够简短。
同时，在配有常亮显示的机型中，Short Look 会在尚未解锁的情况下展示。因此，我们应避免在 Short Look 中展示敏感信息。
2. Long Look
可以将 Long Look 理解为 Short Look 的详情。它由以下部分组成：
其中，内容区不仅仅可用于展示信息，我们还可以在内容区放置一些简单的交互元素，如在座位预订 watchOS app 推送的内容区中，就可以放置选择就餐人数的 Sequence Picker。
3. 应用内通知
这部分留给我们的发挥空间较大，恕不展开阐述。
无论你是否会真正地开展面向 watchOS 的设计，了解 watchOS 中的设计方法及其背后的推导过程都是非常有价值的。可以看到，无论是设计原则，还是字体、色彩体系的推导，都始终贯穿着普适的设计思维。我们相信你能从中获得一些启发。同时，微信 Apple Watch 版已于近期更新，欢迎大家下载体验。
文章来源：优设 作者：We-Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
空状态是APP内必然存在的一个状态，现在在很多产品里空状态是不太受到重视的，给人的感觉是比较临时性，可有可无的，但是这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。适宜的空状态设计可以提升用户体验，实现用户留存。
因此针对美柚APP内的空状态进行一次全新的升级探索，前期也进行大量研究分析，对后续的探索方案有所方向指导。
空状态是APP内必然存在的一个状态，现在在很多产品里空状态是不太受到重视的，给人的感觉是比较临时性，可有可无的，但是这个状态在引导性、愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用。适宜的空状态设计可以提升用户体验，实现用户留存。
因此针对美柚APP内的空状态进行一次全新的升级探索，前期也进行大量研究分析，对后续的探索方案有所方向指导。
文章来源：站酷 作者：huangzhijianwusD
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。
摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
蓝蓝设计的小编 http://www.lanlanwork.com