绝对时间包含：年月日、时刻
绝对时间适用于对时间精确度要求较高的时候，比如说订单创建时间、某项活动开始/结束时间、特定节假日简称等。绝对时间在信息表达上更加精准、正式，给人确定感和安全感；但是内容显示过长，占用的空间较大。
相对时间的展示形式：刚刚、XX分钟前/后、XX小时前/后、X天前、昨天、明天、今天等
相对时间适用于对时间精确度要求不高的时候，比如说消息、通知类功能、Feed流。采用相对时间对用户来说理解成本低，不用去往前推算出发布的具体时间点；但是不够精确、并很难衡量两个时间点的临近性。
目前主流App上，年月日的常见的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ～ 2022-12-30”，那这些日期格式是否都正确呢，日期的连接应该使用什么标点符号？
《中华人民共和国国家标准GB/T15834-2011标点符号用法》中对于连接号、点号、分隔号的使用场景有明确规定。
连接号（短横线“-”、一字线“—”、波浪号“～”）：标示某些相关联成分之间的连接；
点号（.）：作用是点断，主要表示停顿和语气；
分隔号（/）：标号的一种，标示诗行、节拍及某些相关文字的分隔。
基于国标对于连接号、点号、分割号的使用场景说明，用阿拉伯数字表示年月日时应采用短横线“-”。在比较正式的文件、公告中，日期一般不用分隔符连接，而是直接采用中文的年月日连接。
Antdesign规定日期范围需要在日期或时间范围之间显示波浪号 （前后需要空格），这种方式是不符合标点符号的使用规范的。
在标示时间的起止时，应该使用一字线“—”，而非波浪号“～”，波浪号主要用于标示数值范围而非日期的起止。日期带有分隔号横短线“-”时，可以采用“至”作为连接符；日期不带有分隔号横短线“-”时，可以采用一字线“—”作为连接符。注意日期与连接符之间用「空格」隔开。
时间计时方法包含十二小时制、二十四小时制。在设计过程中注意区分十二小时制，上/下午和A/PM的位置区别。
当日期和时间连在一起时，两者之间用「空格」隔开，如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。
涉及到周的时，可以将周放在日期与时刻之间，用「空格」隔开，如：“2022-01-01 周三 16:00:00”、“2022年01月01日 周三 16:00:00”。
涉及到日期和时间范围时，可在表示日期范围的基础上添加时间，如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至 2022-12-30 16:00:00”。
以月、日为标志的事件或节日，用汉字数字表示时，只在一、十一和十二月后用间隔号；当直接用阿拉伯数字表示时，月、日之间均用间隔号。
文章来源：站酷 作者：吴大只
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，我们先来了解什么是用户体验
从字面上来说，用户体验就是用户在使用产品过程中对产品的直观感受以及评价
这种感受非常的主观，但又很容易影响别人对产品的判断。这就是为什么某宝商家一直求好评，而某团骑手会为了好评跟用户“大动干戈”的原因了
UI——User Interface，本意是“⽤户界面”，但现在这个词已经被拟人化了，即把那些做用户界面的设计师们叫做UI
UE——User Experience，本意是“⽤户体验”，现在也变成了一个职业名词，是指那些做用户调研的研究员，比如用户画像、产品分析、竞品分析等。有些公司把“交互设计师”也叫做UE，严格来说UE和交互是两个职位，不过现在很多UE除了做用户调研也会画交互原型，所以混在一起也不奇怪了
IxD——InteractionDesigner，本意为“交互设计”，也就是交互设计师，现在也常常用UX（User Experience）来表示交互设计，用来跟UI进行区分。简单来说就是帮产品画原型的，实际上这个职位非常的关键，产品希望表达的逻辑，各个界面的跳转与关联关系，以及产品的可用性与易用性，都体现在交互上
UED——User Experience Design，本意为“⽤户体验设计”，现在常常表示用户体验设计团队，基本上大一点的互联网公司都有自己的UED团队，甚至大的部门都有自己的UED团队
UED团队要做的事情可多了，通常来来说主要坐下面的事情：
用户研究
产品分析
交互设计
产品设计
视觉设计
品牌设计
插画设计
简而言之，UED是以用户需求为目标而进行的设计的团队，通过团队的经验与设计能力给出设计方案，是帮助公司进行产品策划的主力之一
说到用户体验，就不得不提用户体验五要素了
现在我们所谈论的用户体验的概念，其实最早出自一本叫《用户体验要素》的一本书
《用户体验要素》--作者Jesse James Garrett，是美国用户体验咨询公司Adaptive Path的创始人之一
这本书出的其实比较早，英文版在2001年就出了，国内常见的是2010年出版的中文版第2版，书里的概念在互联网设计界广为流传，非常值得阅读
当设计师在设计或重构产品，却不知从何开始时，这时我们可以参考用户体验五要素
用户体验五要素是一种产品分析与设计的方法论，他向教科书一样指导我们从0到1设计一款产品。同时它涵盖了一个产品从想法到落地的整个流程，这正是我们学习它的重要原因
用户体验五要素由战略层、范围层、结构层、交互层、表现层等5个层级构成，由下而上像个金字塔的结构一样，战略层则是底部最坚定的根基，产品的起源也源自该层
这是五要素的最底层，一般是公司负责人与产品总监、市场总监等高层之间的讨论范围层。这一层主要是确定产品目标以及用户需求。比如：
公司要做什么
面向什么样的用户
什么样的解决方案
公司的产品特色是什么
竞争对手有什么
将来的收益怎么样
值得一提的是用户画像需要在这一层定义出来。我们可以招募一些用户进行访谈，然后为用户分组，并结合用户的需求确定我们的产品目标
战略决定范围，这一层主要针对战略层的需求进行更细致的分析，定义需求是什么，提出解决方案，同时要定要好需求的优先级
根据前两层思考产品的信息架构，规划任务流程，简单来说这一层主要是产品PRD的输出
页面的具体功能摆放，信息布局，这一层主要是交互设计，输出低保真原型
页面最终给用户呈现的视觉效果，这一层主要是视觉设计，输出高保真视觉稿
作为设计师的你，接到了一个饼干公司的设计需求，公司希望你能帮他完成从产品到包装一系列的设计，你该怎么去做呢？
我们用用户体验五要素来整理设计思路：
-战略层
先了解这家公司的产品需求和用户需求
产品需求：公司是个小型食品加工厂，主营是面包和饼干，有实体店也有网店，今年准备在圣诞节推出一款圣诞饼干
用户需求：用户画像是20-35岁的女性，喜欢看剧，喜欢网购，对可爱的东西没有抵抗力。今年上映的一部电影叫《饼干侠》（虚拟）票房火爆，用户都想买到剧中同款的饼干
公司目标：希望圣诞前后一个月内盈利50w
-范围层
分析需求：公司是做一款圣诞饼干，了解到《饼干侠》的原型是出自美国卡芙食品的一款饼干，并把它确定为竞品并展开分析
设计方案：列出一系列设计清单，包括品牌logo重新设计，食品包装、网店圣诞装饰、广告宣传图等，给这些设计需求确定好优先级
-结构层
信息架构：进一步细化已列出的设计方案，输出文档或者设计规范，比如《品牌手册》《食品包装标准》等
交互流程：进一步的用户画像与分析，收集市场同类型品牌调性，通过试用的方式整理出饼干的分类属性，如口味、分量、包装材质等
-框架层
从这里可以开始整体的、低保真的设计了，可以出一些比较具体的设计方案，目的是快速跟需求方进行评审，为后续的视觉设计作准备
-表现层
经过前面反复的沟通与评审，开始高保真的视觉设计，从产品包装到广告图到物料，这里就是设计师们展示商品颜值，提升其商业价值的时刻到了
最终产品上市
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 UI 设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。
想成为更优秀的设计师， 需要了解设计趋势和受众目标的需求。了解UI/UX设计趋势本质上与了解时尚或者消费行业的趋势并无本质差别，都必须倾听人们的需求，关注人们如何使用产品，创造出美观、简单、易用的设计，使产品脱颖而出。
我们收集了一份UX/UI设计趋势的清单，帮助你了解2022年的相关行业变化。
弹窗到底该不该加？怎么加？用什么形态展示？真正的作用是什么？这些真的是产品经理说了算吗？
好的产品通常会在恰当的时间、合适的位置给出合理的反馈，弹窗也是必不可少的反馈方式，不反馈、反馈不及时或反馈不合理都会带来不好的使用体验，甚至误导用户，从而导致用户流失。很多时候，产品经理会从商业角度、公司业务、资源限制等方面考虑问题，但这些未必是用户所需要的，设计师不应该完全按照产品需求做设计，否则就成了只会照搬产品原型的“美工”。需要做的是从用户角度出发，把产品需求转化成设计目标，只有经过反复的推敲、认真分析，最终才能打磨出服务于用户的弹窗设计，所以弹窗该不该加、如何加就成了设计师不可推卸的责任和使命。
本篇文章将围绕着弹窗类型、使用场景、转化率及常见问题为侧重点，将自己对弹窗的理解、设计经验分享给大家，帮助大家对弹窗组件有更清晰的认识，为后续避坑设计出更好的弹窗做准备。
一、弹窗的基本介绍
二、弹窗体系分类
三、弹窗的使用场景
四、如何设计有效的弹窗
五、需关注的问题点
六、总结
当我们与应用产生主动或被动交互时，页面上层会弹出容器，将可承载的文本、按钮、选项、标签或表单等任一内容与之组合，就可以用来传递信息、状态反馈、引导用户等操作，这就是弹窗。
弹窗的目的主要是为回应用户或让用户回应，是用户与产品间对话的一种方式，在线上各种场景中都有可能碰到，相当于产品的线上小助理。不同类型的弹窗其作用不同，但最终都是为了满足跟用户之间的友好交流。
弹窗组件的样式很多，如浮层、对话框、下拉菜单、toast等，且iOS、Android官方平台也都根据自身的规范对组件进行命名，不管如何称呼，其常见的弹窗组件绝大多数都是由以下元素组成：
◇ 容器：作为承载弹窗的文本、图片等内容，容器必不可少，有的弹窗直接以蒙层作为容器，如toast；
◇ 蒙层：为了和底层内容分离，避免信息混淆，通常会在界面上层（容器下层）设置一个不透明度为20%~60%
的纯黑色蒙层。部分小型弹窗不设蒙层，但会为容器设置投影，例如筛选器的展开、下拉菜单等；
◇ 文本：文本是弹窗传达信息主体的必要条件，如标题、按钮等，即便把文本融入图片，也能一目了然；
◇ 图片：用于运营弹窗传达更多信息内容的方式之一，为了对用户产生更强的吸引力，还可设计成动态效果；
◇ 表单：为成功进入下一步做准备，如输入密码（iOS设备下载应用前的必要步骤）。也可以是当前页面流程的分支，例如输入优惠券等；
◇ 选项：条件较少的选项可使用弹窗完成，单选、复选在选项不超过6个的情况下都可使用；
◇ 图标：在弱化次要操作的情况下，通常会将关闭弹窗按钮设计成图标放在右上角或弹窗下方，目的是突出主操作，鼓励用户从弹窗中进入下一步，另外还有单选、复选、提示等按钮；
◇ 按钮：是进入下一步或回到上一步（去掉弹窗）的操作入口，部分应用也可以点击弹窗以外的空白区域让弹窗消失，但同样会提供按钮以方便用户更容易操作。toast等短时间自动消失的弹窗无需设置按钮。
用户在完成任务的过程中，界面会出现弹窗打断用户的操作行为，用户必须通过主动点击才可以进行下一步操作，这即是模态弹窗。
模态弹窗通常能较好的获取用户的视觉焦点，并通过承载的内容、按钮主次层级来引导用户完成他们的需求，这也会根据用户、产品侧重点的不同，弹出样式也有所不同，常见的模态弹窗有对话框、动作栏、浮层...等。
1.1 对话框Dialog/Alert
对话框是很常见的弹窗，主要在打断用户后并提供选项操作，对用户的干扰较大，通常会配备1~3个操作按钮，而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
对话框类型的弹窗主要分为主动、被动两种触发类型，主动弹窗：信息的二次确认、输入内容、前置条件选择、风险警示等；被动弹窗：版本更新、运营宣传、消息通知、系统功能授权等。
1.2 动作栏Actionbar
动作栏是通过用户主动操作后弹出的内容信息，基本都是从底部弹出，屏幕占用比例根据内容量的多少比较随意，从小区域、半屏、再到全屏随处可见。
动作栏相比对话框则能承载更多、更丰富的功能信息，在用户清晰感知当前操作及反馈的情况下，比跳转到新的页面更有安全感。
1.3 浮层Popover/Popup
浮层是指用户操作某个功能/内容后，会在附近出现一个带有视觉引导性质的弹窗，最常见的浮层就是下拉菜单/弹窗等，浮动于顶层窗口并指向触发操作的位置。
例如很多社交娱乐类型的应用右上角有一个“+”入口，里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层，为了与页面信息更好的区分，会给浮层容器加上投影，避免与底部信息混淆。
相比模态弹窗，非模态弹窗属较为轻量，触发后以一种非阻碍的的方式呈现，不会打断用户的当前操作，主要是给予用户即时反馈，让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作，根据反馈信息的重要程度及意愿，可在一定的时间内自动消失，也可等待用户操作后消失，常见的有以下几种：
2.1 提示框Toast/Hud
用于反馈用户操作成功、警告、错误等当前状态信息，可能出现在任何位置（底部/中间/顶部），在呈现样式上，相同等级的模块统一位置、风格即可，无需用户有任何操作，出现2s左右自动消失。
Toast只有纯文字提示，例如格式错误、刷新成功、删除成功等；Hud会使用文字+图标样式，例如添加到购物车、关注成功等。
2.2 提示对话框Snackbar
Snackbar早期只是Android系统的一种弹窗控件，后在iOS、Web前端都会使用到，可以看作是toast的加强版。一般只出现在屏幕底部，存在的时间比toast长，提供0~1个操作入口，可自动消失，也可与用户产生交互后消失或者跳转至其他页面。
Snackbar反馈的重要程度强于toast，例如，某个应用今天有重要提醒，同时又不想影响用户的其他操作，会在用户首次进入时弹出提醒，并提供关闭操作入口，等待用户通过手动关闭（部分自动关闭），加强用户记忆。
2.3 通知Notice
最有代表性的就是消息通知、系统推送，在设备未锁屏的情况下，通常从顶部弹出，停留几秒后自动消失，锁屏后，不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关，具备应用外推送功能的，需在设备系统设置中开启通知权限。
2.4 透明指示层HUD
HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层，实时生效，例如视频类产品中的调整音量、亮度、控制进度条等。
当我们对弹窗体系有了一定了解后，就需要清楚什么场景需要设计弹窗？用什么类型的弹窗？产品最终都是服务于用户，如果仅凭自己的主观意见乱加一通，整的花里胡哨，弹窗就成了干扰元素，很大程度上会影响用户体验。什么样的场景适合什么类型的弹窗，我们可以从以下几点来说明。
风险警示：当用户的某种操作可能存在风险，为避免操作失误，会弹出对话框打断用户，并给予一定的风险提示引起用户的注意，让其有足够的时间确认是否真的需要进行下一步操作，如：删除、放弃福利机会、退出登录等，会弹出对话框提示操作后可能引起的后果。
前置条件：部分任务在流程中设有一定的前置条件，需要满足条件才能进入下一步操作，通常这种情况会根据内容量的多少、重要程度以对话框或动作栏的样式弹出，例如下单时选择优惠券、支付方式。
任务关键节点：用户在满足任务的基本条件后，需要操作一个关键步骤才能成功，则会弹出对话框让用户完成最后一步操作，例如提交订单、表单、输入支付密码等。
这类弹窗主要从产品角度出发，不会过于在乎用户是否需要、会不会反感，都会引导或强制用户操作。
例如产品发布新版本，会强制用户更新，否则将无法使用。还有各大电商APP，在进入首页时会弹出一堆红包、优惠券，刻意将取消/关闭入口弱化，给用户返回造成一定的难度，利用突出的视觉、动态效果突出主题增加吸引力，以达到转化用户的目的。
二次确认也是一种打断用户的操作行为，但跟上面纯粹的打断用户相比其作用更大，主要是在用户已做好选择的情况下再次弹出确认，以免操作结果造成用户认知上的偏差。虽然从用户体验角度出发，用最少的操作、最简单的流程满足用户所需是产品追求的目标之一，但通过权和利弊之后，二次确认的出现实属迫不得已的折中方案，它能够起到给用户多一次思考避免误操作、同样的含义换种方式表达、重要的内容加深二次记忆等作用。
二次确认使用得当，可以避免用户、产品的潜在风险，但若是从主观角度一味的滥用，就成了对用户的恶意干扰、影响使用体验，导致出现因多步骤操作增加任务完成难度、降低转化率、损害产品形象等问题，所以需要从业务（用户侧、产品侧）实际角度出发，两相其害（加-影响使用体验；不加-造成一定损失）取其轻的考虑是否需要增加二次确认弹窗。
当用户的某个操作可能带来不可逆转、错误严重程度较高时，例如：放弃仅有一次机会的较好福利、手机系统还原、应用账号注销等，系统都会给予二次确认，降低用户认知偏差后，以确保用户是经过多次思考才做出的决定，即便后续给用户造成损失也不会过于降罪产品，产品也算是“问心无愧”了。
常见于用户操作之后的状态反馈，即便用户没有注意到，也不会造成较大的损失、或结果已经注定，相对来说成本较低，大部分出现在任务过程中的提示（可重复）和结果反馈，以确保用户知晓当前所处状态。
非模态弹窗toas样式居多，例如加载中、操作成功、刷新结果、清除缓存等，可出现在其他类型的弹窗之后或同时存在。
优秀的弹窗需要从视觉、交互两方面思考，视觉上简洁、易懂，交互上可操作且可控。
视觉层面：首先需要做到的是易懂，这时候就非常注重文案清晰程度及按钮层级关系了，弹出的信息需能直击要害，用户看了能一目了然才是关键；其次，弹窗属于一种干扰信息的存在，设计必须简洁，在弹出时需要考虑是否会过度影响（影响是一定会有的、且看如何降低）用户的其他操作。假想我们正在玩游戏、突然来了电话全屏幕覆盖（传统来电），自己会以最快的速度挂掉电话，回到游戏中后发现自己已领“盒饭”，即便来电是多么的理所当然，但心里必定是非常不痛快的，那么，如果来电以弹窗的形式且占据屏幕很小区域（如今的来电方式）是不是就给了用户足够反应时间及缓冲时间呢？
交互层面：弹出的内容及操作入口需清晰可操作，虽然有时基于业务需求，产品更希望用户能进行下一步操作而并非回到上一步，即便如此，我们也只能通过弱化次要操作以突出主要操作，用户有来去自由的权利，如果弱化至用户看不清、甚至找不到的程度，即便提供了次要操作入口，也会存在反面作用；另外需注意用户对产品的可控性，不管产品如何期望用户进入下一步转化，但不能强制，一定要给用户提供回去的路（强制版本更新除外），否则，任性的用户可能会直接结束应用，甚至因产品过于霸道直接卸载。
首先，设计师应该理解产品需求，分别从用户侧（能给用户带来什么？满足什么样的需求？避免什么损失?...）、产品侧（能给产品带来什么？产品如何期望？是否合理？能得到什么样的结果？...）分析为什么要加弹窗，然后将分析的结果转化为设计目标，以确保弹窗根据不同的需求，在恰当的时间、适合的样式合理的呈现给用户。
其次，在得到设计目标后，同样需要从设计侧、技术侧思考弹窗组件的一致性。从设计角度，团队所有成员需要对该组件有清晰且统一的认知，了解组件的使用场景，以确保不会错用、滥用，如果增加或更换新人设计师，很容易学习和上手，提升效率；站在技术角度，一致性的常用弹窗组件，便于开发做组件封装后续复用，减少不必要的重复工作，大大提高开发效率。
在UI设计中，组件的设计思路基本相通，旨在满足产品的实用性、视觉的统一性，主要围绕着以下几点进行：
◇ 基础定义：利用清晰易懂且简短的文案描述弹窗组件的内容及目的。
◇ 类型及构成：明确弹窗的类型，如模态/非模态，将其拆分并注明每个小元素的具体信息。
◇ 规则用法：弹窗出现的位置、包含的具体内容及信息的展示规则，比如哪些场景可复用。
◇ 交互状态：交互流程逻辑清晰，拟请产品交互前、交互中、交互后如何反馈以及用户随时可能碰到的问题。
设计弹窗时需要注意信息的主次层级关系，优先传达用户想要的或产品想要让用户知道的，以确保重要的信息在第一时间传达给用户。
弹窗需要根据实际的场景合理使用，不能为了简洁而过分删减内容、更不能画蛇添足。例如一些偏向于操作状态、系统报告类的提示可以使用简单的反馈，而可能造成用户损失的提醒就需要刻意打断用户，给予更明确的提示甚至二次确认。
△ 例如删除内容就需要使用模态弹窗明确提醒用户，如果用非模态很可能被用户忽略从而带来不可逆的损失。
因弹窗本身承载内容有一定的局限性，固文案一定要简洁且精确，能用一句话说清楚的就不要过于啰嗦，不仅容器的空间有限且用户的耐性也有限，需要在有限的空间、有效的时间内清晰的表达出核心内容。
针对运营弹窗，如果弹出的时间不对或过于频繁，可能会造成用户反感，所以需要把握好弹出时机及频率。
例如用户有一张未使用的优惠券，如果用户每次进入应用都看到弹出提醒，确实又没有购买商品的意愿，总是被弹窗打断真的就很烦，那么可以将提醒弹窗设置为每日首次进入应用时提示、每累计进入应用5次后提示、即将到期提示或者用户有购买意愿且优惠券支持改品类时提示等，总之，需要控制在大部分用户的可接受范围内。
本篇文章主要系统的分析了弹窗组件分类及使用场景，总结的虽然不是很全面，但能让很多新手设计师清楚认知弹出组件的定义及用法。另外，弹窗不管如何设计，都需要有一个不断优化的过程，要根据产品的实际情况不断思考与打磨，通过脑暴或已知问题作出更好的改善。
能清楚认知、理解、使用弹窗组件是一个成熟UI设计师必备的条件，当然，并不能以此定义设计师是否优秀，在此基础上，还需通过持续的学习探索，挖掘出更多技巧，不断提高自身的专业能力。
文章来源：站酷 作者：大漠飞鹰JYSJ
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
提及“设计的温度”，不得不提我们老生常谈的“情感化设计”，提出这一概念的美国认知心理学家唐纳德·诺曼将设计拆解为三个层次：本能层、行为层、反思层，层层递进。
1/ 本能层的设计，是视觉的直接反馈，是指用户第一眼看到的、感觉到的东西是否会激发用户兴趣；
2/ 行为层的设计，注重的是效用，产品功能是否好用，易用，用户使用产品过程中能否高效解决问题；
3/ 反思层的设计，是情感化设计的最高层次，指用户使用产品后，是否建立情感连接和记忆反馈。
因而，它们是从美学诉求到效率诉求再到情感诉求的一个进阶关系。
如果一款产品在满足基本功能，对于用户有用，同时好看并且易用，使用完之后还能产生愉悦以及满足感的话，那么这将是一款好的情感化设计产品，那必然是一个有“温度”的设计。
如果一个项目本身充满社会使命和责任感，那么“有温度的设计”将可以助推项目的落地链条，让使用平台的用户有“温度”，更让项目背后的人员感受到“温度”。
因为，接下来陈述的项目是一个很有“温度”的项目——用互联网工具去温热社会中的穷苦灰暗，用互联网思维去帮扶社会的乡村孤寡老人和留守儿童，用有温度的设计去践行有温度的项目。
随着我国社会经济的快速发展，农村青壮年劳动力转入城市，人口老龄化趋势加剧和家庭结构的演变，“空心村”越来越多，因此在乡村出现大量的“留守儿童”和“孤寡老人”。据统计，在农村独居和空巢老人超过3000万人，留守儿童也达到了近2000万人
孤寡老人因为独居生活、物质困难、缺乏照料面临着易患疾病、精神压抑等很多问题；而留守儿童因为缺少父母监管和陪伴，极易产生很多身体及心理问题，这两大群体是我国人群结构的重大组成部分，一个是未来的花朵和希望，一个是曾经发过光热的迟暮老人，他们需要关爱和守护，需要有一座“有温度”的桥梁，为留守儿童撑起蓝天、健康成长；为孤寡老人送达温暖、安享晚年。
基于社会现状，践行社会责任，腾讯为村平台联合中国社会福利基金会、腾讯公益慈善基金会，预想搭建一个线上与线下结合的平台，成立“为村暖心小站”，立足于脱贫地区的农村社区，主要服务农村的一老一小以及其他需要帮助的困难群体，解决日间照料、健康护理及心理关怀等诸多问题。
“暖心小站”的整个帮扶路径是以线上+线下相结合的模式，依据产品需求，在线上可以招募志愿者、发布救助需求、触达爱心人群；在线下建设实体服务站，开展具体的帮扶活动。从而形成一个从线上到线下的一个完整帮扶闭环。
那在线上的呈现形态上，主要考虑APP和小程序两种方式，经过对比分析，APP稳定性高、体验好，但是在乡村的受众群体内，互联网基础还是很薄弱的，要让村民朋友下载和适应一个新APP是一个难度非常大的事。而微信在乡村的覆盖面非常广，占有率很高，那么依托于微信的生态、建立小程序，在推广层面会更加便捷和高效。同时，暖心小站本身结构简单，是一个非常轻量化的应用，这种特性也更适合以小程序为载体。
在线上的产品框架上，设立两大专区：关爱老人专区和呵护小孩专区，各自创建知识宣导、在线课堂、爱心募捐等版块内容，同时在线上召集志愿者，在线下成立社区服务站，开展帮扶活动，然后志愿者们在线下实地服务打卡同步展示在线上的暖心小站。
确定框架之后，梳理角色和场景。本项目主要包含线下服务站的站长，工作人员，志愿者以及社会的爱心人士。
站长、工作人员、志愿者主要是通过线上为村暖心小站这个平台发布活动信息、记录服务概况、展示志愿者风采，社会的爱心人士通过线上平台查看对应信息并参与对应活动，最终帮助农村的一老一小解决各种帮扶问题。
经过梳理分析，平台使用人群的年龄跨度较大，30岁到60岁这个群体占到了80%左右，所以在产品的呈现形式上将兼顾青年到老年的年龄跨度，让设计更友好，让产品有温度。
基于前面分析，在农村现实环境中的孤寡老人和留守儿童，他们生活是灰暗的，情感是封闭的，他们需要有更多志愿者以及爱心人士给他们带去阳光和温暖，让孤寡老人可以健康生活，让留守儿童可以健康成长。
所以在设计目标的确定上：让产品形成一个“有温度、有故事、可以连接情感的桥梁”。让贫苦生活渗透阳光、感受温暖、看到希望。
品牌色的推导，是站在线下的实际场景感受来提炼，乡村的孤寡老人和留守儿童的生活是贫苦的、灰暗的，他们需要金灿灿的阳光给生活带来希望，而我们日常所的见的公益组织通常都是以红色系为主，似乎已经形成了作为公益组织的标识色，因为这种大红色传递爱心、带来温暖。
这些颜色都很有代表性，黄色代表阳光，红色代表公益，而暖心小站，将这两种颜色进行叠加融合，形成阳光橙，再以阳光黄纳入辅助色，形成温暖、友爱、活力、阳光的色彩体系。
在设计原则上，考虑到我们的用户群体年龄跨度比较大，一些年长用户互联网基础薄弱，为了让产品更有亲和力，让年长用户都能轻松上手，所以在策略上制定简单、易用、温暖的设计原则，保持框架简单清晰、交互简单易用，让产品有温度，让用户觉得有用、好用、还想用。
在“简单”方面，保持产品的页面框架要简单，结构要清晰，让用户清楚知道自己在哪里，所以在产品形态上只做了内容页的垂直展示，没有过多琐碎的信息入口，让页面信息更集中，浏览体验更聚焦，让年长用户也可以简单使用。
在“易用”方面，简单的框架和结构是易用的基础，在视觉元素的排列上，通过加大的图片、加大的间距、加大的圆角，通透的页面布局可以让内容陈列更集中，获取信息更高效。页面的间距以4px为基数，分为5个跨度，在统一性的基础上让界面更有节奏感，层级更清晰，从而提高产品的易用性。
在“温暖”方面，主要体现在在调性、元素、和内容上：
调性：以“温暖橙”+“阳光黄”为品牌色系贯穿始终，形成温暖、阳光的整体基调；
元素：在常规尺度上进行适当加大，加大的字体，加大的卡片占符，加大的点击区域，让产品更照顾年长用户的操作习惯，让产品更有温度；
内容：在内容及主图的运营展示上，突出“温暖”的调性，增强用户的共鸣，拉近用户与产品之间的距离。
整体以大面积的“温暖橙”为基调进行铺设，营造温暖阳光的质感，顶部展示产品名称和合作logo，增加产品的权威性和信赖度。
自上而下，控制大的间距和留白，分别设置了热门小站、一老一小专区、志愿者风采、活动回顾、学习园地等版块。全方面展示了小站的基础信息、输送了对孤寡老人和留守儿童的健康资讯、汇集了志愿者服务的风采、记录了帮扶活动的结果反馈、以及陈列了关爱老人和小孩的相关线上课程。
一老一小的入口及详情：通过大头图的形式加强专题感知，引导用户点击。详情内展示相关的关爱资讯和助力入口，让用户可以选择性的进行点对点帮扶。
小站详情：分为小站介绍、人员风采、小站活动、和运营概况四个部分，清晰展示线下暖心小站的各项事务，让线上用户对线下小站有更全面的了解。
个人中心：功能简单，布局简洁，根据不同身份类型展示不同入口。作为站长的话，拥有志愿者审核、活动管理的权限，整体表现形式以统一的卡片式陈列，让内容更聚焦。
秉持“简单、易用、温暖”的设计原则，尽可能地让产品陈列简单、操作流程易用、设计满足功能凸显温暖，让用户想用，让产品好用。
经过多次推导与线下团队配合，小站1.0在今年5月初上线，第一批试点小站正在使用中，得到了较多正向良好的反馈，为乡村的一老一小带去了许多暖心的帮扶行动。
产品上线之后，通过在线上发布活动信息召集志愿者。在线上顺利举行了多场暖心活动，比如在重庆马蜂社区的服务站内为当地留守儿童举办了多项课业辅导的活动，在重庆周家寨服务站新建了日间照料室，提升老人的居住生活质量。
今年5月20号，在中国互联网公益峰会上，为村暖心小站进行线上交流展示，获得了很多与会代表的关注和认可。
截止2021年7月，平台上线了两个试点小站，共举办了数10次线上+线下结合的活动，活动参与了520人，受到36000人以上的关注。暖心小站的建立和运营，对乡村的“一老一小”提供了更加有针对性和个性化的服务，同时加强对当地社会组织的培育和孵化，提升了服务对象的生活质量，促进和谐社区建设，助力乡村振兴。
通过这些试点小站的成果和反馈，让设计目标也得到一定程度的印证，让产品体现了“有温度、有故事、可以连接情感”的桥梁。
随着互联网的发展，人们对于产品不再是简单的形式服从功能，而是逐步转向形式服从情感。让设计回归情感，让有温度的设计去创造有温度的产品，可以增进人与产品之间的情感连接，让产品更有生命力。再者，用有“温度”的设计思维，去捕捉和解决社会问题，通过具有社会责任感的设计，推动社会进步，形成坚实有用的“设计力”。
那么，如何提升自己的设计力呢？可以概述三个保持一个向善。
设计需要坚持，而坚持源于热爱，保持热忱之心会发现许多美好的事物，同一个需求会自发性地探索很多不同的解决方案，因此会洞察需求背后最本质的东西，切入要点寻找最优解。
还有一句话：“设计路上，唯有热爱，方能抵御岁月漫长”。
这里的“敏感”指的是设计师要有好奇心，善于发现新事物，善于追踪最新行业动态，是一种职业敏感，是一种自觉行为，表现为热情、兴奋、敏锐，对新事物充满热情，对于新发现充满兴奋，能够特别敏锐的捕捉社会痛点解决设计难题。
生活中常说，有共情的人往往都特别感性、多愁善感，泪点低笑点也低，因为特别有代入感，而且对事物特别专注。
设计上所说的共情力则需要保持感性，同时也需要理性加持，不偏不倚。让设计师自己能切换到项目内的各种角色，不把自己当成局外人，将自己融于产品本身，随时切换为不同用户的视角，更能深入地发现、分析和解决问题，让设计站得住脚、更接地气，让设计有依有据。
设计的最终目的是传递需求、解决问题，这就意味着设计的初衷不同，那么最终的导向也会截然不同。
设计向善，保持“善”的初心，主张设计回归社会、回归到人心最本质的出发点，做有温度的设计、有仁心的设计、可持续的设计。
关注社会问题，保持一颗敏感而善良的心，用“设计向善”解决社会痛点，坚实巩固自己的设计力。
文章来源：站酷 作者：峰HENG
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设
无论是高保真还是低保真原型，设计人员在软件中的展现所有效果，最终目的都是传递给开发人员进行实现。当开发人员开始使用代码还原页面时，设计就不可以再随意修改。
最重要的不是在设计软件中展现的效果，而是实际在用户设备上实现的效果，因此在设计时，要提前考虑代码实现的成本。
盒子模型是一种描述对象尺寸和间距的方法。有四个部分组成：“边框Border”、“边距Margin”、“填充Padding”、“元素本身Element”。
Border：围绕元素外围的边线。
Padding：元素及其子元素之间的间距。
Margin：元素和其相邻对象之间的间距。
点（pt）取决于屏幕物理尺寸大小，是绝对尺寸单位。对应@1x图的1px。
像素（px）取决于实际屏幕显示分辨率，是相对尺寸单位。在@2x图情况下1pt=2px，在@3x图情况下1pt=3px.
建议使用“@ 1x”进行设计，其他尺寸图可以从@1x进行衍生。
如果是以@2x进行设计，那么若要得到@3x则要先缩小50%然后再扩大300%，增加了不必要的工作量，并且很容易出现奇数、小数等不便利数值。
创建的每个UI元素都应该和像素网格对齐，防止出现半像素的“锯齿“效果。
文本由于其图形的特殊性，难免会出现无法对齐像素的情况，这里可以忽略。
文本是页面中最重要的元素之一，但因为其本身的多样性，产生的不同的字体、行高很难和其他元素一起适用网格。因此给文本设置基线网格，将基线网格采用4pt进行等距划分，来和其他元素进行和谐搭配。
使用8的倍数来定义区块和内部元素的尺寸，间距等。
当区块元素为文本（例如按钮）时，将文本设置成其余部分一致（或者平台预先定义好）的大小，然后使用padding来确定区块大小。如果是全宽的元素，使用padding来确定高度，并使用一致的水平边距来确定宽度。
硬网格：将元素放置在以8为增量定义的显示网格中，使用额外的透明背景元素，和前景元素组成一个整体。
软网格：保证元素之间的的间距为8的倍数，以此获得更快的处理速度，从而得到更流畅的体验。
当所有尺寸都遵循相同的规则时，就有了一致的UI。
减少自定义的尺寸规则，得到更快的代码运行速度。
无论设备外形如何，主流的屏幕的屏幕尺寸长宽值至少有一个维度可以被8整除。
有一些屏幕的尺寸无法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，适当调整区块的大小来进行适配。
确保开启了“对其像素网格”选项。
如果根文根大小设置了16px，则可以使用0.5rem的增量在8点网格上构建布局。
如果不喜欢这样做，或者是不喜欢rems的使用方式，可以使用CSS或预处理器间距变量来处理布局，同时保留变量以供后期维护。
大多数软件都可以设置快速“微调”，一般默认为10px，sketch中可将其调整为8px，便于快速的工作。
学习并善用快捷键，提高工作效率。
图标设计通常需要进行视觉修正，因此，在其周边放置透明框架（例如Hard Grid的方式），来保证整体的一致性。
设计时经常会放大预览界面来进行设计，这会导致会略整体；如果以缩小的尺寸会导致看不到细节，因此要经常变焦画面来确保能看到整个画面。
文章来源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com