苹果电脑怎么锁屏(MacBook怎么锁屏)

编辑导语:表单可以分解成三个基本元素:标签、输入框和按钮。在设计这些的时候，往往会有无数的问题从细节中浮现出来。如何解决它们？作者分析并回答了七个常见问题。让我们看一看。

按钮圆角有多大，标签后面是否用冒号，如何区分可选项和必选项，如何区分线索模式和解释模式...有时候，我会为这些小细节感到非常头疼。我不断催稿，不断纠结这些细节。最后经常是各种方式合作，个别页面修改也不总是一件事。

说到表单，我相信我们往往会用最直观的设计体验，本能地驱使我们去解决一些看似在界面设计中的问题。然而，每一分钟，无数的疑问都会从细节中蹦出来，给我们带来困扰。今天的分享有点冷门，希望能引起大家的注意。

基本形式可以分为三个基本要素:

标签用于提示用户列表项是什么；输入框输入用户信息；该按钮用于用户在完成信息输入后进入下一个流程。

问题1:输入框里有clear 空按钮吗？1.单行文字输入账号和密码后面往往会有一个“清除空按钮。因为密码默认输入的是* * * * *，所以不能直观的看出哪个字符输入错误。重新输入all clear 空非常适合用户场景。想起来了，搜索后面还有一个“清除空按钮，就是常见表单的输入框后面没有“清除空按钮，会有特殊场景。那么如何判断输入框是否放了关闭按钮呢？

各种功能场景的用户，主要是想快。无论是登录还是搜索场景，除了本身的内容，最重要的还是效率。

一个APP进入市场，往往会有注册量、留存等业务指标。，所以设计师会在登录注册的操作过程中，抓住每一个细节来提高效率。这时候输入框的交互效率就至关重要了。一个是和业务指标挂钩，一个是在电商行业效率高，可以在一定程度上提高成交率。

2. 搜索场景

搜索也是如此。用户在使用搜索框的时候是有明确目的的，关键词是用户目前最关心的。如果你写错了或者改了一个关键词，就需要一个一个的删除，没有clear空那么快，尤其是电商行业，用户决定买还是不买需要一两秒的时间。

“删除”在这类场景中的作用是“clear 空”，主要原因是快捷方便，在符合用户预期的目标场景时，可以节省删除的成本。

3. 多行文本

为什么我们会在淘宝上购买商品？当商品不符合预期时，我们往往会编辑一大段来描述不好的特性，甚至用图纸来支持。这个时候后面没有clear 空按钮？

这里有“投入成本”和“修改成本”。这不像搜索和登录几个关键词或一串数字。就是一段文字，需要其他用户去理解，去理解商品的属性。这个时候投入成本高。如果此时按下“清除空”按钮，用户原本是想修改单个单词。如果“Clear 空”延迟，需要重新输入一大段文字。此时输入框中的“Clear 空”疑似诱导操作。

当然，我们有多种操作方式供用户重新输入，比如键盘滑块定位、触摸连续单词等。，这些都比清除空后重新输入的花费少得多，也不需要清除空的便利。

总结一下:当我们需要清除空按钮时，我们的输入成本和修改成本低，从而提高输入的便捷性；当投入成本较高时，clear 空按钮不合适。

问题二：单行文本框长度多长合适？

很多设计师在得到需求的时候会下意识的追求视觉对齐，强行要求表格的宽度统一。这种做法没有深入考虑用户的实际需求，在web端会比在左侧更舒服，更有节奏感。

表单的宽度应该向用户指示所需输入内容的长度，以减轻判断的负担。如下例所示，在可以估算房屋面积时，利用右边输入框的等宽处理，容易误导用户判断输入面积，需要多次确认信息是否正确。

没有规则就要有规则，没有办法做出方圆，也没有办法系统沉淀设计规范来延伸。我们的目标是使表单设计有规律、有条理。这时，我们想到了“网格系统”。可以看前面的文章，写web端网格系统。

每一类的表单输入区域都因其录入存在合理的宽度，输入区域的宽度刚好暗示其填写内容的长度，合理的输入宽度不仅给用户带来心理预期，也提升了整个表单的操控感。每种类型的表单输入区都因其输入而有一个合理的宽度，输入区的宽度正好暗示了其所填充内容的长度。合理的输入宽度不仅能给用户带来心理预期，还能增强整个表单的操控感。

注意：匹配合适的键盘

根据表单内容的不同属性和不同的输入需求，提供不同的键盘类型，以便用户更快捷地使用。常见的键盘有以下几种类型:

设备系统内置的输入法，或者下载符合我们长期使用习惯的输入法APP涉及资产安全方面，提供打乱字母及数字顺序的键盘，可以防止窥窃，提高安全性数字输入，提供纯数字键盘，能够提升用户的完成效率，让输入变的更简单问题3:标签后面有冒号吗？连接的句子往往伴随着冒号，比如看到贤者设计的笔记:B端产品设计概要。这里的冒号就是解释上面的意思，那么我们需要在标签和输入框之间加一个冒号吗？

在中国的APP上很少看到冒号，但这不是没有以下Mac系统设置:

度娘说:冒号一般表示提示后的停顿或者表示下面的提示或者上面的总结。它后面可以是一个例子、一段引语或一个解释。从情感角度是否影响用户体验？其实没什么区别！

所以如果我们设计了一个冒号，请保留它；如果没有冒号，就不需要冒号来保证页面的一致性。

1. 冒号对齐

冒号对齐(右对齐)可以将内容锁定在一定范围内，让用户的眼睛跟随冒号的视觉流向，从而找到所有的填充项，提高填充效率。

2.当最后一级的标签和冒号同时存在时，此时如何对齐？我们最好确定统一的起点，如下左图所示。当然，需要在使用过程中判断用户的使用场景。下图右图为12306修改旅客信息。用户关注的是信息，标题只是起到区分模块的作用。

问题4:为什么优先选择在线验证？当我第一次进入这个行业时，我和我的R&D兄弟就登录页面发生了争论。输入密码后，我需要点击登录按钮来判断密码是否正确。如果我输入密码后直接判断密码错误，就会少一步交互。对于老年用户来说，少走一步就是一大进步。为什么输入密码后不能直接判断密码是否正确？

1. 在线验证

在过去的网页设计中，信息填写正确与否都要等用户点击“提交”按钮，产品会将用户填写的数据提供给服务器，服务器会判断是否正确。这种方式过于依赖网速，不符合用户体验中“及时反馈”的原则。

所以现在在产品设计中，在数据提供给服务器之前，在前端进行一些基本的错误排查，也就是在线验证。

一些基本的规范，比如邮箱是否加了@xxx.com，可以在线验证，不需要上传到服务器对比数据库。

理想情况下，用户填写的所有信息都应该先在线验证。用户填写字段后，如果有任何错误，他应该立即给出反馈，并将错误信息放在用户填写的字段附近。这样错误提示容易引起用户的注意，对于用户来说交互成本也较低。用户不必再次找到并导航到错误的位置。

需要与数据库比对的信息可能无法在线验证，所以最好在用户向数据库提交信息后提示错误。也就是说前端只能进行简单的验证，比如手机号码错误，邮件格式错误等。判断密码是否正确，后端需要对比数据库来判断。这时，你需要点击提交按钮。

左图1:输入账号后，里面的提示不可用，方便用户及时更正；图2中需要输入手机号的验证码，点击提交，然后提示错误信息。从信息反馈来看，所有的输入都提示错误，交互过于繁琐。

前端校验：一般校验显示错误和格式错误：必填项、（邮箱、电话号、地址）格式、密码强度等。快速反馈，直接提醒用户错误内容，让用户及时知晓并更改。后端校验：唯一性验证、验证码、敏感词等，触发校验请求后系统会去数据库查询校验信息，再给予用户相应的反馈。2. 复杂字段设置填写成功指示器

同样，也可以通过在线验证来提示用户按照规定填写内容。牢记防错规则:向用户提供相关建议，将用户的输入值限制在合规范围内，允许输入错误、缩写、不同输入格式的存在，以保证产品的兼容性。

对于复杂的输入(如输入新密码)，即时在线验证(输入字符的瞬间提示)会避免用户多次猜测或检查输入内容是否符合系统设置。在下面的例子中，密码强度指示器将随着用户的输入而改变，并帮助用户确定到目前为止的输入是否符合，或者是否继续改进。

还有，不要太在意这个“进度指标”。一个优秀的进度指示器不应该分散用户填写表单的注意力，只应该在添加这个“进度指示器”帮助用户填写表单的时候使用。

3. 将错误信息一直保留在输入框旁边

通过在线验证，错误信息自然会显示在输入框旁边。有一些基本规律，或者说用户会有大概率出现的问题。即使用户没有填写任何信息，也要在输入框底部以备注的形式标注出来。这是一个非常划算的行为。把错误信息放在输入框旁边，可以尽量减少用户的思考。

4.错误提示输入框应该放在哪个方向？记录这个错误信息的两个最常见的地方是在表单的顶部和输入框之间。那么哪个位置对用户来说更直观呢？

按照上、下、左、右四个位置，按照浏览习惯，列出考虑各种情况的设计图，并进行分析。

1)右侧

网页上的微博注册在输入框右侧显示有错误提示，符合人们从左到右、从上到下的阅读习惯；用户的视觉路径自然流畅，大大减少了用户的视觉工作。

Web输入框长的时候，输入框后面往往是一大段空白，后面是错误提示，也给人一种前后跳跃的视觉感。

但是错误提示不能显示在移动终端屏幕宽度的右侧，所以错误提示经常出现在输入框的下侧。如果网页和移动终端的设计一致，输入框下方会出现错误提示。

2)左侧

左边的错误提示与用户的预期相反，因为输入框的优先级放在了错误提示的左边。但事实上，用户需要专注于纠正他们的输入，所以输入框应该是更重要的元素。

3)顶部

当标签在顶部时，有三个提示:标签、错误提示和输入框中的文本。当用户出错时，视觉在标签、错误提示、输入框中来回切换，分散了用户的注意力，增加了认知负荷。

4)下侧

下面的错误信息表示，虽然不符合从左到右的阅读习惯，但确实符合从上到下的阅读过程。

手机屏幕缺少横条空，把错误提示放在底部是个不错的选择。

输入框中显示的错误信息可以进一步减轻用户的认知负担，无需视觉来回切换就能当场识别错误，减轻记忆负担，在表格的底部和顶部。

5. 错误提示与其它内容视觉上区分

出现错误后，用户需要迅速关注错误消息。大多数警告颜色是红色。红色区域过多往往会给人压抑感，产生畏难情绪，所以尽量减少红色在其他地方的使用。

另外，考虑到色盲用户的需求，我们在给出错误提示时并不仅仅使用颜色标记。比如我们可以添加一个指示错误的图标，当前内容抖动，比如QQ登录抖动提示，苹果电脑锁屏密码错误抖动，或者现在老化语音播报...

上图是新版Petals和国外printerest登录界面的对比。因为主色是红色，所以错误提示也是红色。当用户的光标正聚焦在输入框时，花瓣已经提示错误，整体视觉提示太重，设计上略逊于printerest。

典型案例:下图为追波注册流程。因为三个问题没做好，表单太长用户很可能流失。

输入前用户名没有引导说明输入后未激活用户名和邮件没有实时反馈（前端格式未校验）完全输入后由后端校验，错误太多，用户易产生畏难心理（为了方便看，输入后已激活图三翻译成中文）问题五：用「线索模式」还是「说明模式」好？1. 线索模式

是指用示例输入或说明文本以占位符的形式显示在输入框中，以帮助用户理解需要输入的内容，或给出相关线索的一种设计方式。信息表达轻盈、简单、与业务逻辑关系弱。问题5:用“线索模式”好还是“解释模式”好？是指在输入框中以占位符的形式输入实例或显示说明文字，帮助用户理解需要输入的内容或给出相关线索的一种设计方法。信息轻而简单，与业务逻辑的关系较弱。

时间控件中有“请选择一个日期”，输入框中有“请选择一个日期和日历图标”等提示词。这就是线索设计模式。

如果下图中的脸书输入框中没有文本，用户的期望可能是input或other。因为设计者没有为用户框定搜索边界，线索设计模式可以让界面不言自明。

线索模式特征:

更好的帮助用户理解输入框要求输入的内容文本提示的位置应该和输入值的位置一致配合下拉菜单或者组合输入框使用使用祈使句，以动词短语开头，以描述输入内容的名词结尾，例如“请选择状态”，“请输入您的账号”或“请输入患者姓名”等输入线索的内容位于用户输入的位置，因此用户会注意到这个地方2. 说明模式

它是指在空的白色文本字段旁边或下面放置一个短语或示例，以解释此处需要输入的内容或提供关于此内容的详细要求和信息。

解释模式特征:

使用户无需猜测，同时可以进行上下文提示;使输入框前的字段保持简洁，不要包含太多文本，使用户能够快速明确要输入内容;视觉上将说明模式与线索模式的字段区分开，可以使已经知道要做什么的用户忽略该说明，并将注意力集中在输入操作上;带有引导性的文案处理，会促进用户优化填写方案;操作项一侧或下方，提示需要输入的文本的具体要求和注意事项

典型案例:下面第一种情况，每一项后面都有相应的输入指令和输入线索。比如社交账号之后，简单说明其功能，让用户快速知道填写什么比较合适。

另外，好的引导可以激发用户的填写欲望。比如QQ签名输入线索，展现了我独特的态度，符合年轻人的定位，填写的概率大大增加。同时也吸引了其他好友的关注，让用户之间的互动更加频繁，平台也能更加活跃。

3.应该用线索模式还是解释模式？注意仅用线索提示。当您输入过多信息时，您可能会忘记此提示。它适用于简单的输入框，比如注册和登录界面中的表单。如果不用注明信息长度，需要统一输入框长度。

如下图所示，iconfont很容易忘记输入新密码的要求。输入时，你会想密码应该是字母/数字/符号的组合还是单一组合。

另外，输入错误时，会发现内容和提示与输入前不同，也会造成混乱。我们在设计过程中尽量避免这些。

4.对比:线索模式VS描述模式，线索模式和描述模式都是辅助用户输入的设计模式。这些模式可以帮助用户定义输入信息的内容和形式。那么这两种模式有什么区别呢？

在使用描述模式时，快速浏览界面的用户可能很容易忽略描述信息，因为用户此时的目标是尽快填写完表单，进入下一步。

所以过多的文字描述也会给用户带来很大的视觉压迫，所以描述模式下的文字往往比较简短，容易理解。

Google注册账号页面就是一个典型的“输入指令”和“输入线索”相结合的案例。用“输入线索”告诉用户要填写什么，用“输入描述”补充相应的填写信息意图，让用户清楚地意识到要填写什么，并输入相应的信息。

问题6:非单项选择题和非多项选择题怎么设计？关于单项选择、多项选择、切换三种对比设计，已经有很多文章写了，但是是不是经常会忽略一个场景？单选和多选都是多选的场景。如果只有一个选项是以switch的形式设计的，不合适，这个时候应该怎么设计？可以简单的把这个场景归类为单选还是多选吗？为什么？

如果你选择一些产品用圆，一些产品用方，那么你在什么场景下考虑圆和方？我一直相信，更好的产品中的任何符号都有它的道理。现在，让我们首先假设这两种产品不同是有意义的。

1. 谷歌规范定义

复选框:允许用户从组中选择一个或多个项目。

两个关键点:

单选按钮:单选按钮允许用户从一组选项中选择一个选项。

两个关键点:

2.思考问题。我们看到，电子商务产品，如淘宝JD.COM购物车，无论单选还是多选，都不符合谷歌或iOS规范。我们看到登录时检查策略也有两个设计表单。如果拿这个结论去和产品交互沟通，最后可能会拍着脑袋做决定，这对后续的设计工作非常不利。

无论是国内常见的产品，还是国内竞品的截图，都没有严格按照某个规范的单选或多选设计形式，甚至同一产品的多个业务线的多选形式都不一样。

我们继续深入挖掘以下3点:

是否和系统有问题，查看安卓和iOS系统竞品的应用方式，以及他们是否具有参考性线上相关文档资料支持

针对这三点，我们就有办法证明我们的设计形式是否正确。

Android的使用符合材料规格。IOS使用中没有明确区分单选和多选，可以直接查看。

就是在iOS和Android的不同系统上，单选和多选还是有一些差距的。

由此说明，行业内并没有明确规定单选和多选的设计样式，各个产品都是根据各个产品的规范所得出，只是我们常常看到国内产品政策勾选是「圈+勾」，看得多了就习惯认为是这样，但其实并没有过这样的规则。生活我们往往习惯把某个具象的内容抽象化，把某个具体的问题概念化，这也是我们常常说的归纳法。所以业内并没有明确规定单项选择和多项选择的设计风格，所有产品都是根据每个产品的规格来绘制的。但是我们经常看到国货政策是“圈+勾”的，看多了就习惯认为是这样，而实际上并没有这样的规律。生活中常常习惯于抽象出一个具体的内容，概念化一个具体的问题，这也就是我们常说的归纳。

因为我们的产品是台湾省的地产项目，此时的竞品需要符合台湾省用户的使用习惯。不像台湾省的大陆用户，更多的是受国外互联网的影响。我们搜索了更多台湾省用户使用的网站，勾选了这个框比较方。

所以设计工具/方法论往往起指导作用，但不能作为绝对的或权威的内容来吸收，要辩证看待。很多定制组件之所以在移动端扩展(形式不遵循所谓的市场通用规范)，是服务和功能多样性的结果。所以风格的选择不仅仅是你看到的部分，而不应该被风格的表面所困。内容才是它的决定因素。

比如用户知道只能选择一个闹钟，不会有两个铃声同时响起，所以即使闹钟的收音机形式发生变化，他们都知道是单选的。这是一个函数决定操作形式的例子。例如，如果用户知道设置闹钟的时间，他可以选择周一到周日的同一时间。即使采用单选的设计风格，用户也知道可以多选。

同样的，无论你怎么改变选择风格，是圆形、方框，还是只有一个勾，甚至其他情况，大家都知道是单选。

所以，只要整理出适合自己产品的“单选”风格，形成标准就可以了。如果符合规范中已有的形式，就按照它来；如果你没有，你就不会。

单纯的说什么时候该跟什么时候不该跟，是一个非常概念性的问题，不可能有具体的修辞标准，说什么时候该跟什么时候不该跟。

问题七：必填项用「*」还是「必填、选填」？

标有红色“*”的必选项经常出现在标签的前面，这是一种比较清晰的必选项标注方式，而且也比较节省时间空，还能在一定程度上起到降低视觉噪音，提高可读性和填充率的作用。

标签后面是必需的可选填充，通常与标签文本颜色相同。当移动标签在左边的输入框在右边的时候，不仅增加了标签的长度，也增加了阅读的难度，回查的时候更难察觉。如果输入框中需要可选填充以及提示信息，用户在输入文本时经常忘记它是必需的还是可选的。

使用" * "时，我们需要注意:

「*」对用户来说是否理解必填项总是比选填项要多，红色的星号会让用户更加畏惧，这会增加错误风险并降低表单完成率。 比如我们当必填项较多时， 我们会看到满屏的「*」，这个时候我们内心往往是崩溃的1. 用「必填、选填」场景

有些产品选择“必选，可选”是因为:如果总共有10个表单项，9个表单项是必选的，1个表单项是可选的，那么为了保持界面的整洁，你可以在可选表单项上备注“可选”。相反，假设一个必选项有九个可选项，那么在必选表单项中注明“必选”。当然，这时候也要考虑这些可选项目的必要性、设计目的和作用。

当然，当表格较少时，可以利用用户与界面的交互，告知用户需要填写可选表格。上图中必填项未操作时，提交按钮未激活，无法操作；当所需的项目被操作时，按钮被激活以提交表格。

总而言之:

所有必填可不用区分使用带 * 标记加入标签提示，来告知用户必填字段，选填字段不做标记（使用时考虑用户接受度）必填字段过多时，不用做任何标记，选填字段标签处备注「选填」避免必填和选填字段同时标记或者都没有任何标记这篇总结文章更多的是来自于平时在表单设计工作中遇到的一些小细节，对一些容易被忽视和遗忘的设计点进行了说明。用问题和案例剥离每一个细节，没有对表单构成、交互细节等进行系统的、成本完整的分析。，因为说这种内容的人太多了。

同时也希望这篇文章能给你更多启发，共同探讨进步。

本文由@剑仙设计笔记原创发布。每个人都是产品经理。未经许可，禁止复制。

题目来自Unsplash，基于CC0协议。