底部弹出框控件，在移动端设备上呈现出来的时候，对于设计师而言，是一个不小的挑战。在小屏幕上设计这类控件，需要做合理的取舍。

底部弹出框是一种部分覆盖式的控件，特别适合移动端设备，它适合呈现临时但是重要的信息。

定义：底部弹出控件，或者说底部弹出框/表单，是固定在屏幕底部边缘的控件，它提供贴合上下文环境的详细信息，或者叠加于页面之上的交互。

底部弹出框是一种渐进式的信息呈现方式，它们通常由用户交互触发，提供额外的详细信息，它们通常会遮盖掉部分屏幕内容，因此不适合显示始终都很重要的信息。

另一方面，它适合用来呈现额外的信息，对上下文环境进行控制，或者兼顾两者。底部弹出框的优点在于，它无需跳转到新的单独页面，让用户停留在当前环境下进行交互，用户不会失去交互和获取信息的语境。

底部弹出框和其他的弹出框控件类似，然而和其他的弹出框相比，他保留了更强的信息可见性，因此用户在和底部弹出框呈现的信息进行交互的时候，可能需要参考背景里的基础信息，而两者的呼应也更加贴合用户当下的需求。

使用底部弹出框的一个常见的理由是，它们提高了移动端设备上用户的交互可触达性（也就是大家常说的，用户更容易点击到屏幕底部的内容和控件）。不幸的是，在实际的测试当中，由于用户握持移动端设备的方式不同（单手、双手以及握持位置上下差异），屏幕底部目前也不一定是最容易触达的区域（屏幕中间一般才是用户最容易点击到的位置）。

模态和非模态底部弹出框
位于底部的弹出框可以是模态的，也可以是非模态的。

和经典的模态控件设计类似，底部弹出框可以迫使用户在采取其他交互之前，强制和底部弹出框交互，点击其中的控件或者关闭它。即使背景的内容可见，弹出框依然会阻止用户与之进行交互。通常，在底部弹出框出现的时候，通常背景内容会被半透明的叠加层盖住，作为背景内容「不可交互」的视觉标识。

高手总结！UI 界面底部弹出框设计指南

网络管理工具 UniFi 的弹出框设计，当用户的手机未能正确连接到网络上的时候，会弹出一个底部表单，背景内容通常显示的是一些可供识别的基本界面细节，以及页面骨架布局。用户需要解决网络问题，才能接入网络显示背景的内容，因此这一交互是合理的。

非模态的底部弹出框则不同，它们位于页面的底部，用户可以和背景内容进行交互，也能和弹出内容交互。这个时候的底部弹出框控件适合呈现此时背景内容相关的详细信息。

高手总结！UI 界面底部弹出框设计指南

在 Google 地图的 APP 当中，非模态的底部弹出框会显示和当前选中地理区域相关的导航操作、图片信息，同时，用户可以和背景中的地图进行交互，详细了解大致的环境信息。

有一些底部弹出框是可以展开的。用户可以通过点击或者上滑弹出框，将其扩展为全屏模式（有时候是接近全屏）。通常，底部弹出框在最小化模式下，开始为非模态，展开后变为模态。

高手总结！UI 界面底部弹出框设计指南

Apple 播客：底部弹出框可以显示当前播放内容的相关信息（左），可以点击或者拖动它至完整全屏尺寸，而点击或者向下滑动顶部的把手控件，则可以将其缩小折叠起来。

底部弹出框的可用性指南
在我们的研究当中，我们观察到用户在使用底部弹出框的时候，遭遇的困难和使用别的弹出框的时候是类似的，这些通常是由以下原因造成的：

缺少明确的关闭底部弹出框的指引
多个底部弹出框界面叠加在一起
底层相关的背景内容被模糊了
下面我们针对性地来解决一下这些问题。

允许使用「返回」按钮来关闭底部弹出框
底部弹出框所存在的一个常见问题，就是它看起来像是一个普通的界面控件，尤其当他们扩展为全屏的时候，一部分用户可能还没意识到他们所处的界面，其实是扩展后的底部弹出框控件，而它通常是不遵循通常的交互逻辑的。用户这个时候可能希望使用「后退」手势或者按钮来进行交互，但是用户这个时候点击可能是不会得到预期中的反馈。

因此，在用户历程当中，当页面当中出现底部弹出框控件的时候，整个流程的交互模式可能会因此被破坏。但是，如果让底部弹出框控件支持「后退」的按钮和手势，则可以规避这一问题，让用户无缝回到上一界面。

在控件中包含「关闭」按钮
尽管绝大多数的底部弹出框可以通过向下滑动，或者点击顶部手柄来关闭，但是这个组件本身就很容易被忽略。此外，还有一部分用户压根就不知道这个功能。而且，垂直滑动关闭本身就具备某种模糊性，在交互过程中，用户可能会关闭面板，也可能不小心打开通知栏，或者打开手机的控制中心等。

Pocket 的底部弹出框控件非常高，需要向下滑动才能关闭，而因为控件的手柄位置在操作的时候很容易打开手机的通知栏或控制中心。即使用户从正确的位置触发关闭控件的手柄，也可能需要多次尝试才能真正关闭这一面板。这种灵活性挑战对于操作精度要求过高，对于多数用户而言都是挑战。

为了确保用户可以快速关闭底部弹出框控件，最好在控件内添加常见的「关闭」按钮，或者「X」按钮。我们建议将这个按钮放置在在底部弹出框的右上方之类的位置，使用这一按钮的另外一个好处是方便有视力障碍的用户，使用屏幕阅读器来关闭它。

高手总结！UI 界面底部弹出框设计指南

苹果的备忘录当中的底部弹出框控件，就使用了「X」按钮来方便用户关闭它。

不要将多个底部弹出框堆叠起来
当 APP 内将多个弹出框堆叠起来的时候，最大的麻烦就出现了。

当多个底部弹出框堆叠在一起的时候，用户不可避免会开始迷惑自己到底处于流程的哪个位置，并且可能还需要了解到底哪个是第一个弹出框，而哪个是最后一个。就像下面的案例。

我们强烈建议不要使用底部弹出框控件来替代用户流程中应有的页面。底部弹出框是一个临时的 UI 控件，它并不是稳定的位置，它的存在旨在打断用户流程，告知用户重要的信息和重要的操作，它本身并不是带来愉悦感的「快乐路径」。

高手总结！UI 界面底部弹出框设计指南

沃尔玛的 APP 当中，产品详情页是用底部弹出框控件来承载的，而非单独的页面，而其中任何一个链接都会触发另外一个底部弹出框，比如用户评价。而用户想要关闭退出则需要一层一层关闭。而顶上的返回和关闭按钮两者也同样可能会让人迷惑，有时候是后退，有时候是直接关闭弹出框，交互过程中可能会超出用户原有的预期。

使用底部弹出框承载简短交互
最后，当用户可能会花费大量的时间查看底部弹出框所承载的信息时，我们建议不要使用底部弹出框来承载这类信息。它本质上是一个瞬间状态下的 UI 控件，快速交互是它存在的意义，而非承载复杂的内容。

高手总结！UI 界面底部弹出框设计指南

这个名为 Soundbrenner 的 APP 会在页面「1」 的 Learn 中打开「2」中的音乐教学列表，选择特定课程时，会以底部弹出框的方式打开详细课程信息，随后，向下滚动「3」的时候，会意外将用户带回主页「4」。这个 APP 的问题和之前沃尔玛的情况类似，存在多个底部弹出框交叠的问题。

总结
底部弹出框控件在 UI 设计当中其实比较常见，它需要在保持上下文环境的情况下，提供额外的关键交互和信息说明，但是它不应该承载复杂的交互和过多的内容。

作者：陈子木
来源：优设

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是弹窗？
弹窗是在保留当前页面状态的情况下，告知用户并承载相关操作。

思考：弹窗里面哪些构成原件可以根据业务属性可以有可以没有呢？
答案：标题区和操作区。

二、弹窗的规范如何定义？

1、定义弹窗的大小规范
弹窗的的大小有两种定义方式。一种是固定大小，一种是自定义大小。需要根据自己的业务场景二选一。

弹窗宽度一般定义为三种。分别为560px，720px，960px，都是8的倍数方便记忆。尺寸并不是定死的，可以根据自身业务场景调节。

弹框固定高度会有一个最小高度200px，一个最大高度560px。在其之间的高度是由内容区的内容决定，超过最大高度560px时出滚动条。

弹窗自定义高度，只定义最大高度，随着页面拉升缩小，弹窗边距不变。

2、定义弹窗内容规范
定义：标题栏操作栏高度，内容区边距。

3、弹窗类型
弹框类型是根据使用场景区分提示弹窗，自定义弹窗两种

弹窗优点：没有跳出父级页面，弹窗任务完成后仍然会留在父页面进行操作，减少用户操作中步骤体感
弹窗缺点：信息承载量少，信息内容过多的时候会出现上下左右滚动条，弹窗会降低用户操作效率

三、弹窗使用规则是什么？

1、不超过两种操作选项
假如承载的操作项比较多，建议新跳转一个落地页。

2、多步骤操作，选择用页面承载

3、尽量避免弹窗叠弹窗
第一个弹窗的内容考虑用页面承载或者第二个弹窗是否可以用气泡或者下拉来承载。
假设一定要叠，二级弹窗的复杂度要低于一级弹窗，满足形式上的平衡，遵循从大到小的逻辑或者是覆盖上级，完成任务后点“返回”返回。

四、什么是抽屉？和弹窗相比优缺点是什么？
抽屉是信息承载量和页面比肩，又兼具弹窗的优点。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

一、什么是表单页

1.1表单页满足的核心场景
1、采集/录入数据信息。2、编辑数据信息。3、特殊的条件设置。后台产品的本质是针对数据的增、删、改、查。而增、改、查都可以用表单完成。

1.2常见的应用场景
OA系统里面的请假申请，报销申请，录入员工，新建会议。教育类的创建课程。HRM系统里面发布职位以及物联网管理系统新建设备等等。

二、表单页设计原则

2.1明确
用户快速定位重要信息和目标选项同时文案和组件能够准确传达相应含义

2.2高效
整体表单排布有合理的交互形式；科学的信息布局和组织形式；尽可能“少操作一步”用户在面对50和表单和500个表单的心理压力是不一样的。

2.3安全
操作前：提示和防错。
操作中：实时反馈与纠错
操作后：合理的保存、清空、取消、撤销机制。

三、表单的构成
表单通常由表单标签、表单域、提示提示、操作按钮四部分构成。

3.1表单标签

左标签
优点：表意明确，节约纵向空间，多用于web端
缺点：不太适用于移动端等狭长空间

顶标签
优点：对齐舒适，节约横向空间，多用于移动端及英文场景下。
缺点：纵向空间利用率不高

行内标签
优点：最节省空间，多用于注册登录
缺点：输入状态标签消失，用户陷入迷茫

左对齐标签
视线从标签移动到表单域时间为500ms，这比右对齐标签所用的时间长的多，所以更适合阅读，用于详情的陈列。
特点：阅读效率高，操作效率较低；

右对齐标签
视觉动线参差不齐，不适合高效阅读，但适合高效操作，更适合表单填写。
特点：阅读效率不高，标签指向明确，操作效率高

3.2表单域

如何定义输入框/选择框大小？
步骤一：根据业务已经有的字段长度定义4-5种宽度规范，建议宽度可以是8或者是40的倍数。

步骤二：根据你要搭建的表单，选用合适的规范，长度与输入预期成正比。有人会说排出来的表单左边没对齐，右边也没对齐，其实这就是B端产品特征那就是是好用大于好看，就要给用户一种心智那就是给你的这个长度那就是要输入一个这么长的内容。

3.3提示信息

避免“正确的废话”：给不到用户任何的帮助还增加了用户的阅读成本。

提示信息用哪种展示方式？

3.4操作按钮
按钮常见位置：一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
按钮阅读顺序：按钮出现页面右上角或右下角时，阅读顺序是从右往左，这符合pc端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时，阅读顺序为从左往右，这符合人的填写顺序从上往下，从左往右。

底部按钮右对齐：一般用在弹框，因为弹框页面比较小，右对齐比较符合操作习惯。
底部按钮居中：一般用在页面中，因为右下角操作距离会有点远，所以表单用页面承载的话按钮建议居中。

3.5字体和间距规范
表单中字体全部统一采用14px。表单上下间距一般有三种，1.内容与内容间距为24px。2.内容与说明文案间距为4px。3.内容与子内容间距以及及子内容之间的间距为8px。

四、表单交互

表单交互方式有四种。1.原位编辑；2.气泡卡片；3.弹窗/抽屉；4.页面跳转。

原位编辑
编辑内容即为展示内容，容量低于5个时使用。

气泡卡片
设置项与看板内容紧密相关时使用气泡卡片，建议设置项低于5个。

弹窗/抽屉
设置项与看板内容可以有关联也不可以没有，大于三个以上的录入项使用。

如果录入项较多，用弹框承载出现翻页的情况下可考虑使用抽屉。

页面跳转如果容量超出了弹框/抽屉的承载量并且录入项与看板没有那么强的关联性可采用页面跳转的方式。
五、页面布局

页面布局方式有四种。1.分组；2.锚点定位；3.标签页；4.分步骤

5.1分组

5.1.1标题分组
设置项超过7个；彼此间的关联性较弱且可以分类去归纳

5.1.2卡片分组有多个设置项，多个分类；彼此之间的关联性更弱，分类明确

5.2锚点定位
有多个分类的情况可通过锚点定位迅速找到相关信息

5.3标签页
彼此之间没有特定的相关性，可以独立设置。每个设置包含了多个录入项且使用了标题分组。

小结当录入项少于7个时使用基础布局；当录入项在7-15个时可采用标题分组，卡片分组、锚点定位布局；当录入项大于15个时需采用标签页布局。
5.4分步骤
利用步骤条将大型，复杂任务拆解为多个部分，并按照相关性分组。

建议3种分组依据1.采用必填项划分，把必填的选项分在一起；2.采用相关性划分；3.以操作成本划分。把好填的简单的表单放在前面，复杂的放在后面。

六、提升表单易用性
提升表单易用性方式有5种。1.信息降噪；2.清晰易读；3.高效智能；4.防错纠错；5.所见即所得

6.1信息降噪
场景一：当表单中大多数都是必填只有极少数非必填时

场景二：表单项非必填项比较多，可将低频的非必填项收起

6.2视觉清晰
场景一：尽量采用单列布局，视觉动线流畅，不容易遗漏信息；按enter键换行。

场景二：如果出于业务方需要，必须在横向添加内容，那最好有一定的分组依据。但这样就不应该出现竖向分组，以免遗漏信息。

6.3高效智能

6.3.1根据上下文信息可以自动获取的，无需用户再次填写。
例如根据手机号带出用户姓名；根据地址带出邮政编码；根据身份信息带出生日。

6.3.2提供合适的“默认项”。
例如根据行业现状提供常规的比例分配；根据定位把地区做默认的填充。

6.3.3提供搜索、联想，自动显示匹配的信息
用户在进行输入等操作时可以提供智能辅助，例如表单填写时对需要录入信息的区域提供辅助提示，通过自动补全或联想词来帮助用户快速录入信息，在保持用户的操作自由度的情况下提效。

6.3.4 OCR识别文件内容
对于一些标准证件信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动填入结果。

6.4防错纠错

6.4.1对于长数字，四位一空格，用来分段
例如输入银行卡号；充值场景下输入手机号等

6.4.2为用户封闭不正确道路
将超出时间选择范围的日期置灰。电话号、身份证录入时只允许输入数字同时设置字数上限。

6.4.3告诉用户哪里错了，而非简单粗暴的错误提示

6.5所见即所得
表单页对填写的物料内容进行映射，展示真实效果预览，降低用户心理的不确定性。适合对移动端、小程序、H5页面的设置。

七、体验衡量指标
体验衡量指标有4种。1.任务完成率；2.任务完成时长；3.必填项目数；4.易用度评分

7.1任务完成率

7.2任务完成时长

7.3必填项目数
结合业务场景给出最适合的必填项设定，提高用户填写效率。

7.4易用度评分（用户完成某项任务的难易程度）
易用度可通过调研问卷和评分量表获取。

作者：鲲sky
来源：站酷

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

作者：大啵少女
链接：https://www.zhihu.com/question/454091157/answer/1850120473
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、了解自己

1.我有什么优势：第一步一定是了解自己的优势，哪怕是一点技能或见识，要把优势变成更优势，一定要突出自己的优势，掩盖劣势。

2.我想要什么：这就是目标，例如3年内我想成为专家，要升到P8，又或者3年内我要成为管理者。把这些都一一记录下来，逐一去做分析怎样才可以达到目的。

3.我要怎么做：接下来就是要规划自己。短可以计划三五天，长则可以一两年，把自己的计划写下来。然后按着 STAR 原则：Situation（情景），Task（任务），Action（行动），Result （结果）去执行。

二、了解行业趋势同样是设计师，一个在短视频行业，一个在传统行业，最简单的来说，收入差距就可想而知了。比如现在很多大厂已经没有纯 UI 岗位了，你这个时候还义无反顾的深耕纯 UI，那最后就会面临失业的风险。

三、打造个人 IP设计师都是独一无二的，如果要问打造个人 IP 最佳开始时间，就是现在。

这个是很重要的，尤其是在高级岗位以后，你要在细分行业有一定的影响力，他是可以给你简历加很多分的。打造 IP 的行动项有很多，比如定期各大设计网站发表作品集、在信息类网站上发表自己的文章等等… 当然了，这个是需要长期坚持的才有明显收益的。你可以给自己制定一些奖励计划，激励自己坚持输出。或者找一些志同道合的设计师一起互相督促，去找那些比你厉害的人，慢慢超过他们。 行业内深耕，不要蜻蜓点水：有的设计师觉得设计不分行业，只要另外一个行业给的薪资足够，就义无反顾的换行业。这样长期下来，你在每个行业都只是蜻蜓点水，做不到足够深入的了解行业相关知识，很难在一个高级职位上立住脚。只有充分具备了某个行业相关的知识背景，才能胜任更高级的职位，而不只是做一个只懂表面的设计师。四、提升自己

1. 交互能力：不必多说，交互能力的重要性大家也都知道了。随着行业的发展，现在很多公司的 UI 岗已经不是单纯的 UI 岗了，更多的是一种多元化的职位，交互能力是必不可缺的一种能力。

2. 眼界：对于设计师来说，眼界决定高度，眼界低是做不出好设计的。想要提升设计能力，首先提高自己的眼界。多看、多看、多看……

3. 审美能力：这个也是设计师的基本功，你要能看出别人作品的好与坏。练习方法就是多看多思考，多去参加一些设计展。

4. 视觉表现力：创意、软件技能：作为设计师，视觉表现力是最基础的，也是最重要的。这里我把它分为两个方面：创意和软件技能。创意：设计重在想法和创意，且要不断的通过学习去给自己的大脑输入灵感。让大脑一直处于活跃状态；软件技能：一切的设计实现都要由软件来实现。在自己时间允许的情况下，多学习一些软件技能，现在软件更新非常之快，前些年还用 PS / AI 来做界面呢，现在你还会用吗？

5. 产品把控力产品：一是对设计方案的设计把控，保证设计效果做到最好；二是对设计进度的把控，按时把控设计方案的上线；三是对实际开发结果的把控，保证上线后的设计还原度最大化。

6. 沟通演讲能力：设计师有一个好的沟通能力可以让团队更好的运作，提升工作效率。好的演讲能力体现在设计评审的讨论时，能够更好的 hold 场面，让整个沟通更加顺畅。

7. 管理能力：对内－设计团队的管理、人员的分工、任务分配、发展部门内学习氛围、与团队人员沟通等等；对外－与其他部门的沟通协作、工作衔接，保证整个业务线的工作有条不紊的进行。

8. 调研能力：调研能力可以考验人的信息搜索、整理、分析的能力。他可以在设计前期找到设计的切入点，在设计中期提供有力的理论观点。同时调研结果也可以作为评判自己产品评分的一个标准。如果没做过设计调研的话，前期可以去看一些大神做的完整的调研报告，分析他们的逻辑、写作手法等，需要多看多分析。

9. 规范意识：近些年大家对规范意识都有了明显的提升，规范可以提升工作效率以及降低沟通成本，同时也可以避免一些低级错误。如果你在团队中没有团队意识的话，工作就会很吃力。

10. 学习能力：毕业后，提升能力有两个方面：从项目中学习和自学。从项目中学习：每次做完项目及时做设计复盘，把从项目中学到的知识再熟悉一遍，做好知识沉淀；走过的坑再温习一遍，避免之后再犯；自学：这部分做的好与不好，几年后的差距是非常之大的，每个人的工作时间基本是差不多的，区别大的就是业余时间。最怕的就是比你厉害的人比你还努力。

11. 知识沉淀：俗话说好记性不如烂笔头。你有没有看到一个好的东西赶紧保存下来的习惯，但是从来也不看？这是大部分人的通病，觉得我保存了就是我学到了。知识沉淀指的是通过自己的整理，不断对项目进行复盘，把自己真正需要的东西保存下来，用的时候可以即时拿出来查阅。找到自己的职业定位，想清楚自己要往哪个方向发展，不断的学习技能点就对了，加油吧，设计人！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

让用户输密码的正确姿势！简化密码设计的三个小秘籍

2023-06-28 15:50北京北京兰亭妙微科技有限公司官方帐号

随着互联网的普及和数字化时代的来临，密码的重要性不言而喻。然而，很多人在设计密码时往往面临记忆难题和安全性问题。为了帮助用户设计更简化且安全的密码，本文将介绍三个小秘籍。

一、使用密码管理工具

密码管理工具是一种方便且安全的方式来管理和存储密码。它们通常提供加密的存储空间，可以储存各种账户的用户名和密码。用户只需记住一个主密码，就能够访问和管理所有其他密码。这样，用户可以选择更复杂、更安全的密码，而不必担心记忆的问题。此外，密码管理工具通常还提供自动生成密码的功能，确保密码的随机性和安全性。一些常见的密码管理工具包括LastPass、1Password和Keepass等。

二、使用短语或句子作为密码

传统的密码通常由字符、数字和特殊符号组成，很难记忆且容易被猜测。相比之下，使用短语或句子作为密码可以更容易记住且更安全。选择一个有意义的短语或句子，并将其转化为密码。例如，"ILoveToTravelTheWorld!"，这个短语可以转化为密码"Ilv2ttw!"。这样的密码不仅容易记忆，而且由于包含了大小写字母、数字和特殊符号，具备了一定的安全性。

三、使用多因素身份验证

多因素身份验证是一种提高账户安全性的重要方式。除了使用密码外，多因素身份验证要求用户提供第二个验证因素，如手机验证码、指纹识别或硬件安全密钥等。这样，即使密码被泄露，黑客也无法轻易访问账户。许多在线服务提供了多因素身份验证选项，用户应该积极开启并使用这个功能。

综上所述，设计简化且安全的密码并不是一件困难的事情。通过使用密码管理工具、使用短语或句子作为密码以及使用多因素身份验证，用户可以更好地保护自己的账户安全。重要的是，用户应该时刻保持警惕，定期更换密码，并避免在多个账户中使用相同的密码，以确保个人信息的安全。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本文将深入探讨如何巧用色彩来打造动人心弦的网页设计，并特别关注如何考虑配色弱的用户。我们将介绍色彩对用户体验的影响，解释配色弱的类型，提供一些适合配色弱用户的配色方案，并分享一些巧妙利用色彩的技巧，以提高网页设计的吸引力和可访问性。

第一部分：色彩与用户体验1.1 色彩在网页设计中的重要性1.2 色彩对用户情感和认知的影响1.3 配色弱用户的挑战与需求

第二部分：了解配色弱类型2.1 红绿色盲2.2 蓝黄色盲2.3 全色盲和其他色觉异常条件

第三部分：配色方案适应配色弱用户3.1 使用对比度来增强可读性3.2 避免过于依赖颜色的传递信息3.3 选择易区分的色调和明亮度3.4 采用色相和亮度对比来强调重要元素

第四部分：巧妙利用色彩的技巧4.1 利用色彩心理学原理引导用户行为4.2 创造温暖或冷静的氛围与情感4.3 使用配色工具和调色板来提高效率4.4 探索大胆与独特的颜色组合

第五部分：实践与测试5.1 设计前期的研究与用户调研5.2 可用性测试和反馈收集5.3 不断优化和改进设计

第六部分：案例研究与实际应用6.1 成功案例分析：色彩对用户体验的影响6.2 实际应用建议：考虑配色弱用户的网页设计实践

第七部分：结论7.1 色彩对网页设计的重要性再强调7.2 巧用色彩打造动人心弦的网页设计的关键要点总结7.3 呼吁更加关注配色弱用户并提高设计的可访问性

本文将详细介绍每个部分的内容，包括配色原则、配色方案、色彩心理学原理和实际案例。通过遵循这些指导和运用巧妙的色彩技巧，你可以打造出动人心弦的网页设计，并确保配色弱用户也能够享受到优质的用户体验。建议读者在实践过程中注重测试和反馈，不断改进和完善设计。通过共同努力，我们可以为所有用户提供更加可访问且令人满意的网页设计体验。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

随着移动设备的普及和移动应用的快速发展，了解移动端尺寸基础知识成为了设计师和开发人员的必备技能。本文将为您提供超全面的移动端尺寸基础知识科普指南，帮助您更好地理解和应用移动端尺寸。

一、移动设备屏幕尺寸概述

移动设备的屏幕尺寸通常以对角线长度来表示，单位为英寸。常见的移动设备屏幕尺寸包括4英寸、4.7英寸、5.5英寸等。屏幕尺寸的大小直接影响到用户在设备上的视觉体验和操作方式。

二、屏幕分辨率和像素密度

屏幕分辨率是指屏幕上的像素数量，通常以水平像素数和垂直像素数来表示，如1920x1080。像素密度是指每英寸上的像素数量，单位为PPI（Pixels Per Inch）。高分辨率和高像素密度的屏幕可以呈现更清晰、更细腻的图像和文本。

三、常见的移动设备屏幕分辨率

不同的移动设备具有不同的屏幕分辨率，设计师和开发人员需要根据目标设备的屏幕分辨率来进行设计和开发。以下是一些常见的移动设备屏幕分辨率：

iPhone系列：

iPhone 4/4S：640x960

iPhone 5/5S/SE：640x1136

iPhone 6/6S/7/8：750x1334

iPhone 6 Plus/6S Plus/7 Plus/8 Plus：1080x1920

iPhone X/XS/11 Pro：1125x2436

iPhone XR/11：828x1792

iPhone XS Max/11 Pro Max：1242x2688

iPad系列：

iPad 2/Mini 1/Mini 2：768x1024

iPad 3/4/Air/Mini 3/Mini 4：1536x2048

iPad Air 2/Air 3/Pro 9.7：1536x2048

iPad Pro 10.5：1668x2224

iPad Pro 11：1668x2388

iPad Pro 12.9：2048x2732

Android手机：

720p：720x1280

1080p：1080x1920

2K：1440x2560

4K：2160x3840

Android平板：

7寸：600x1024

10寸：800x1280

四、适配和响应式设计

移动设备的屏幕尺寸和分辨率各异，为了确保应用在不同设备上的良好显示，设计师和开发人员需要进行适配和响应式设计。适配是指根据目标设备的屏幕尺寸和分辨率进行布局和元素调整，以适应不同屏幕大小。响应式设计是指根据屏幕尺寸和分辨率的变化，动态调整布局和元素大小，以提供更好的用户体验。

五、设计和开发工具

为了更高效地进行移动端设计和开发，设计师和开发人员可以使用一些专业的工具。常见的移动端设计工具包括Adobe XD、Sketch、Figma等，这些工具提供了丰富的设计资源和交互功能。开发人员可以使用Android Studio、Xcode等工具进行应用开发和调试。

六、设计原则和最佳实践

在进行移动端设计时，设计师需要遵循一些设计原则和最佳实践，以提供更好的用户体验。以下是一些常见的设计原则和最佳实践：

简洁明了的界面：精简和清晰的界面设计可以提高用户的易用性和操作效率。

易读的文本和图标：选择合适的字体和字号，确保文本和图标在不同屏幕上都能清晰可读。

合理的交互设计：考虑用户的习惯和操作方式，设计合理的交互和导航方式，提供良好的用户体验。

图片和图形的优化：为了提高应用的加载速度和性能，设计师需要对图片和图形进行优化，包括压缩、裁剪和使用矢量图形等。

色彩和视觉效果的选择：选择合适的色彩和视觉效果，以提升应用的整体美感和吸引力。

七、测试和优化

在设计和开发完成后，测试和优化是确保移动应用质量的重要环节。设计师和开发人员需要进行功能测试、兼容性测试和性能测试，以确保应用在不同设备上的稳定运行和良好性能。根据测试结果，进行相应的优化和调整，以提升应用的用户体验和满意度。

总结：

移动端尺寸基础知识对于设计师和开发人员来说是至关重要的。了解移动设备的屏幕尺寸、分辨率和像素密度，掌握适配和响应式设计的原理，遵循设计原则和最佳实践，以及进行测试和优化，都能够帮助我们设计出更好的移动应用。希望本文提供的超全面的移动端尺寸基础知识科普指南能够对您有所帮助，并在移动应用设计和开发中起到指导作用。

今日分享这篇文章是蓝蓝设计的原创文章，未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

UI设计的概念侧重在“交互”设计。优秀的UI设计界面，不光是各种元素设计技巧的展现，更重要的是能表现出用户角度的完美“体验感”。

1、明确你的用户群

首先要明确一个方向：谁是你的用户群？不同阶层、不同年龄的用户偏重的主题设定和设计元素都不相同，所以UI设计必须是有针对性地设计。

2、界面要清晰

清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它，让用户知道为什么会使用它。当用户使用时，要能够预料到发生什么，并成功的与之交互，只有清晰的界面能够吸引用户不断地重复使用。

3、交互性

界面的存在，促进了用户和我们的世界之间的互动。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

4、保持用户的注意力

在进行界面设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将你应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之后再显示。尊重用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界面，保持用户的注意力是先决条件。

5、让用户掌控界面

人都喜欢对事物完全掌控，而不考虑用户感受的软件往往不会给客户掌控的感觉，迫使用户不得不进入计划外的交互，这会让用户很不舒服。保证界面处在用户的掌控之中，让用户自己决定系统状态，稍加引导，这样会更容易达成目标。

6、每个屏幕需要一个主题

我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便，在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题，整个界面看起来会混乱不堪。正如文章应该有一个单一的主题以及强有力的论点，我们的界面设计也应该如此，这也是界面存在的理由。

7、区分动作主次

每个屏幕包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主！文章的存在是为了让人们去阅读它，所以在设计界面的时候，尽量减弱次要动作的视觉冲击力，或者在主要动作完成之后再显示出来。

8、自然过渡

界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9、符合用户期望

人总是对符合期望的行为最感舒适,这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10、强烈的视觉层次感

如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

11、减轻用户的认知压力

恰当地处理视觉元素能够化繁为简，帮助他人更加快速简单地理解你的表达。用方位和方向上的组织可以自然地表现元素间的关系。恰如其分地组织内容可以减轻用户的认知负担，他们不必再琢磨元素间的关系，因为你已经表现出来了。不要迫使用户做出分辨，而是设计者用组织表现出来。

12、色彩不能决定一切

物体的色彩会随光线改变而改变。艳阳高照与夕阳西沉时，我们看到的景物会有很大反差。换句话说，色彩很容易被环境改变，因此，设计的时候不要将色彩视为决定性因素。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。在长篇阅读或者长时间面对电脑屏幕的情况下，除了要强调的内容，应采用相对暗淡或柔和的背景色。当然，视读者而定，也可采用明亮的背景色。

13、恰当的展现

每个屏幕只展现必需的内容。如果用户需要作出决定，则展现足够的信息供其选择，他们会到在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。这会使你的界面交互更加清晰。

14、“帮助”选项

在理想的用户界面，“帮助”选项是不必要出现的，因为用户界面能够有效地指引用户学习。类似“下一步”实际上就是在上下文情境中内嵌的“帮助”，并且只在用户需要的时候出现在适当的位置，其他时候都是隐藏的。设计者的任务是应该确保用户知道如何使用你提供的界面，让用户在界面中得到指导并学习。

15、引导状态

用户对一个界面的首次体验是非常重要的，而这常常被设计师忽略。为了更好的帮助用户快速适应我们的设计，设计应该处于零状态，也就是什么都没有发生的状态。但这个状态不是一块空白的画布，它应该能够为用户提供方向和指导，以此来帮助用户快速适应设计。在初始状态下的互动过程中会存在一些摩擦，一旦用户了解了各种规则，那将会有很高的机会获得成功。

16、解决看得到的问题

人们总是寻求各种方案去解决已经存在的问题，而不是潜在的或者未来的问题。所以，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。这确实不是件能够让人兴奋的事情，但却是最有价值的事情，因为一旦你的用户界面愈加完善，会有更多的用户愿意使用你的界面。

17、多涉猎设计之外的知识

视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长，要从中获取许多值得学习的东西，以此来提高你的工作能力。

18、实用性

在设计领域，界面设计成功的要素就是有用户使用它。虽然精美但用户不会选择使用的设计作品，也就是失败的作品。因此，界面设计不仅仅是设计一个使用环境，还需要是创造一个值得使用的艺术品，它仅仅能够满足其设计者的虚荣心是不够的，首先它必须要实用！

19、检查错误

要尽可能检查和清除程序中的错误和BUG，即便精心地设计了弹窗来做说明。为了更好的用户体验，不要出现让用户惊讶的结果。Beta测试是消减错误的最好方法。

20、简约设计

简约设计不仅仅是一种流行趋势，从用户体验上看，简约的界面可以去掉很多无关的干扰信息，使UI更具易用性。好的UI设计应该具备强大的功能，但是画面要简约，拥挤的界面，不论功能多么强大，都会给用户带来不适感。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司