三星上一版本界面标题选用细体字，头部区域留白，卡片功能区域小，背景选用写实简约照片，体现文艺感。
圆形的场景卡片与矩形的设备卡片形成对比，场景卡片与文字上下排列，更加凸显场景图片，但文字存在多行、单行显示，这种表现方式会显得凌乱。
设备卡片从上到下依次为图标、设备名、状态。
新版本标题选用粗体字，标题区域更加紧凑，功能区域展示空间变大，背景使用抽线双色渐变，更现代时尚。
功能卡片为统一圆角矩形，场景卡片图文左右排布，底部白色卡片区域可以很好兼容多行、单行文字的情况。
设备卡片从上到下依次为图标、房间名、设备名、状态。
底部新增Tab区域，细分为收藏、设备、生活、自动化、菜单5个模块。
风格布局总结：新版本屏幕利用率更高，粗体字和抽象背景使得内容更凸显，底部的Tab提供了更多模块入口，功能分类更合理。
旧版本只有一个首页，功能都在此被分发，并且功能较为单一。
新版本增加收藏、设备、生活、自动、更多模块，对用户使用场景做了细分。
界面顶部的房屋设置、添加、编辑为全局设计，不过在每个模块中添加的内容不同。
收藏作为用户每次进入App的第一屏，说明是用户常用的重要功能，在收藏模块中，可以添加的内容最多，用户在此页面可以完成大多数常用操作。
设备模块是全屋设备的合集，自动模块是场景、自动化的合集。
生活模块主要提供家庭安全监控信息，还可接入其他服务，例如：智能家电监控、智能烹饪服务。
新版本设备卡片主要由设备图标、房间名、设备名、状态、控制区构成；房间名域为预留区，保证在不同页面下的统一性。
设备在离线状态下，右上角会显示离线图标，代替控制按钮。
只有我们提前罗列出更多的页面显示情况，整合并预留可变区域，才能使页面更统一。
收藏模块分为3大区域，区域1为状态通知区；区域2为收藏的场景区；区域3为收藏的服务或设备。这3个区域展示顺序是固定的，可以选择是否展示，无法改变展示顺序。
因为每个区域的卡片尺寸是不一样的，区域固定的好处是，可以保证显示的统一性。否则大小卡片穿插显示，还可能会空缺几个，很影响美观。并且操控逻辑也是固定的，用户更容易理解。
点击收藏模块右上角添加，可批量选择内容快速添加收藏。
在非收藏页，长按卡片，可单独添加收藏内容。
在设备、场景等新建或编辑界面，可以选择添加至收藏的选项。省去了后续的单独添加动作。
在收藏页，长按卡片，可以进行单独移除操作。
在收藏编辑页面，可以批量快速移除移除。满足了不同的用户需求。
首次进入，展示的是某个房间内的设备，通过左右滑动进行切换房间，三星可能想为用户提供模糊操作来提升效率，在房间少的情况下，这种方式比较好。当房间多了，用户会滑动多次才能到目标房间；当然三星给出了针对精确选择的方式，点击左上角的房间入口，可以选择、编辑房间。
房间多的情况下这2种方式都不是很好的解决方案。
这里要注意的是，三星把“没有房间”也放进房间列表，供用户选择。现实中，有好多设备是不属于任何房间或者用户暂时不想放到某个房间，增加无房间选择可以更灵活的满足实际使用场景。
在房屋编辑页面，可以添加房间，在这里三星已经为用户预设了很多房间类型选项，用户只需要做选择，很方便，即使没有要的，还可以在列表底部选择自定义。
在设备页面，只能添加设备、灯光组、监控组。
用户可以通过关键词搜索、扫码、设备类型筛选、品牌筛选进行设备添加。
很全，几乎涵盖了所有的添加方式。
在添加页面，第一步要先填写组的名称、选择所在房间，第二步选择要合并的灯，添加完成跳转至设备组详情，方便立即调控。
设备控制页面采用了模块化的设计方式，控制区域均为列表形式，不同的设备只需要替换图标和文字及对应的操控列表，降低新设备重新创作新界面的设计成本。
长按设备卡片，选择目标房间，可完成单个设备转移。
选择设备页面右上角的移动方式，可以批量进行设备的转移。
自动模块包含场景、自动化、第三方设备，它们不具备房间属性；
点击右上角的箭头可以展开或收起对应列表，方便查找内容。
第一步，先填写场景名称、选择图标、是否要添加到收藏；
第二步，选择执行的设备，可以根据设备名称、房间名称进行快速定位，并且可以批量选择设备；
第三步，设备添加成功后，根据需要，单独对设备执行状态设置。
新建场景的逻辑是：先批量选择要执行的设备，再单独设置执行内容。
这种方式的好处是，不易打断用户的设置思路，还可以减少操作步长。
新建自动化界面分为触发条件、执行内容两大块；
初始状态会为用户提供使用描述，便于用户操作。
可以通过时间的变化、设备状态变化、位置变化、天气变化、安防变化来触发执行命令。
将设备状态变化作为触发条件时，设置逻辑是，完成一个设备的设置才能设置下一个，不能批量选择。为什么和新建场景的流程不一样？可能是因为在设置执行条件时，用户心智里认为设备和状态联系更紧一些，并且条件种类不会太多。
当添加了一个以上的设备作为触发条件时，界面会显示“同时满足或满足任何一个”的选项。
执行内容可以是控制设备、通知给用户、运行场景、改变安防模式。
可以批量选择设备，并且可以设置执行延迟时间、自动复位，满足用户不同需求。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：土木君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
近日，凭借卓越产品设计能力和社会影响力，百度大字版从数以万计的参赛作品中脱颖而出，接连斩获德国IF、红点、美国Muse Creative Awards 金奖、意大利A’Design 铜奖、中国智造DIA佳作奖以及C-IDEA最佳设计奖共计六项国际设计大奖，设计价值备受权威机构、媒体的肯定。
与此同时，百度大字版的设计、用研、产品相关负责人也收到《设计》的专访邀请，就“用设计弥合数据鸿沟”专题分享了百度APP大字版的适老化设计。
《设计》杂志由中国科学技术协会主管，是中国唯一一本由中国工业设计协会主办的全国性期刊，一直站在国家转变发展方式的政策高度，沟通设计界和产业界的迫切需求，展示全球设计精英和设计教育界的新思维和新作品，促进社会公众设计意识的提升，推广中国设计之国际影响。
当前，我国正面临老龄化问题的严峻挑战。统计表明，中国的老龄化人口已达到2.64亿，且这一数据仍在持续增长，而老年人在生活、情感上都面临诸多问题。
首先，老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化，无法平等地获取信息和服务。其次，年轻人涌向大城市寻找机会，老年人被迫成为空巢者，疫情的发生更使亲人长期两地分离，老人情感孤独缺少陪伴。此外，疫情的爆发也促使线下服务转为线上化，老年人不能很好适应这一转变，遇到很多困难。
百度大字版是一款运用AI技术专为老年人打造的综合型内容与服务App，帮助老年人更平等便捷地获取信息与服务，轻松乐享数字新生活。作为用户体验设计师，更深层地了解用户，并提供满足目标人群的体验是设计师的使命，未来还将继续深耕于适老化设计和差异化创新，不断改善产品体验，提供更满足老年人诉求的产品，使老年人更平等便捷地获取信息与服务。
目前行业内缺失成体系的老年人研究报告，针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业，同时业内也缺少针对老年人系统的设计标准或设计指南，现有无障碍设计标准针对残障人士，且部分标准只适用于PC端，不适用于老年人和移动产品。
因此在进行百度App大字版的适老化设计时，设计研发团队系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料，产出了系统的移动端适老化设计标准体系，同时结合百度App大字版实际场景产出了解决方案。适老化设计包含：易阅读、易收听、易操作、易理解四个方面。
易阅读的手段包括增大字号、使用符合老年人生理、心理特征的颜色、提供有效的反馈提示等；易收听的举措包括：增大音量、降低语速等；易操作的改良包括：增大触控区、降低手指运动距离和操作精准度要求、提供明确的操作反馈、隐性操作显性化及辅助用户输入等；易理解的改善包括：采用通俗易懂的文案、提供清晰明确的图标设计、提升信任感、提供即时的帮助等。
由于很多年轻人去大城市寻找机会，导致产生很多空巢老人，他们情感孤独，缺少陪伴。疫情的爆发，更使老年人在节假日也难以与家人团聚。因此百度App大字版通过语音合成等AI能力，还原儿孙亲友的真实声音，用于全局内容播报朗读，使老年人感受到至亲至爱仿佛陪伴在他们身边，缓解老年人的孤单和思念之情。全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题，同时可以解放双手，使老年人随时随地听朗读。
百度App大字版围绕老年人的实际生活需求，依托百度的内容生态和个性化推荐技术，提供了符合老年人兴趣的图文和音视频内容，一站式满足了老年人的内容消费需求。在设计上，通过AI技术，对视频增加智能字幕，方便老年人获取视频信息；在内容流的操作上，通过统一的容器和流式交互，为老年人提供便捷的操作体验，使他们更方便、平等的获取信息和内容。
百度App大字版还提供了多种实用工具，满足老年人疫情时代和日常的生活诉求。疫情导致线下服务线上化，为了帮助老年人适应这一生活方式的转变，百度App大字版提供了在线政务工具；很多老年人承担了教育孙辈的责任，因此，大字版提供了一些辅助教学工具，帮助他们带孩子。更有疫情地图、垃圾分类等贴合日常生活场景的工具，使智能技术更贴近、融入老年人的生活。
《设计》：在设计前期的调研阶段，发现了哪些用户需求和体验的痛点？数字时代，老年人群有哪些被忽略了的需求？
LU：我们的调研发现，中老年用户朋友在使用移动互联网产品时，最主要的体验痛点是由于生理老化带来的。随着年龄增大，他们在判断力、操控力、表达力、感官力的老化不可避免，这些老化也直接影响他们对智能手机的使用。
首先，随着年龄的增长，中老年朋友的信息筛选和判断力在逐步变弱。相比年轻人，中老年人更容易上当受骗。他们常见的受骗类型包括免费领红包、赠送手机流量、优惠打折团购商品等。因为成长环境的影响，中老年人是更信赖权威的，而老化带来判断力的下降，让他们对权威信息源的依赖度更高。在调研中他们提到，像“官方发布”（比如CCTV、地方电视台发布的官方新闻、人民日报的新闻），以及“疫情辟谣”（比如百度App在2019年疫情爆发初期推出的新冠肺炎辟谣栏目），他们觉得很好、很信赖，能帮助他们判断真伪，甚至会在家族群里向其他人推荐。由此可见，信息流产品应该为中老年人提供更多权威来源、真实可信的信息。
其次，中老年人的操控力在下降。这导致他们接触信息的自主性变弱。在选择手机App上，他们更依赖于通过别人推荐，或者看到别人在社交平台的分享后下载，或者是选择手机自带的App。相比年轻人，他们很少自己主动去应用商店发现一些新的App。
再次，中老年人的语言组织和表达能力下降。在组织的中老年用户座谈会中，设计团队深刻感受到他们的表述能力明显不如年轻用户。这表现在老年人的表达有很多重复的地方，中间也会夹杂大量“嗯”“就是”“呢”“吧”等语气词。他们在使用语音交互类产品时表达力差，加上有些用户还有方言，这些都对语音交互、语音识别产品的准确性带来了更具挑战性的要求。
最后，随着身体机能的老化，中老年人的感官能力也会下降。对手机使用影响最明显的是视力衰老，会导致中老年人看不清小字，对色彩分辨力减弱，出现老花眼等问题，也容易眼疲劳。因此，手机App的文字排版、界面颜色、音视频功能的适老化就显得尤为重要。
《设计》：要做出理想的适老化设计需要综合运用哪些学科的知识？
小军：移动互联网产品适老化设计研究涉及面非常广，要求学科背景包括设计学、工效学、心理学、应用数学、社会学等学科和专业。 百度App大字版工作中研究了大量的跨学科文献和研究成果，有效指导产品具体设计工作包括：设计学：对WCAG国际设计标准研究；标识系统无障碍设计研究；移动端中文阅读舒适性研究；工效学：人体手指移动设备屏幕触控区研究；老年用户连续性操作行为研究；心理学：老年人心理特征中关于颜色研究；移动端产品中反馈设计的情感化研究；认知心理学下的移动端产品研究报告；社会学：老年人言语交际障碍实证研究；老年人听觉审美偏好研究；老年人言语交际障碍实证研究；应用数学：用户研究团队开展基于用户数据分析和基于目标用户已有数据用户特性研究。
雷哥：除了设计专业知识，团队在适老化设计过程中运用了大量用户研究领域的知识，洞察中老年用户的生理老化特点和心理需求，帮助设计师们制定出适合中老年用户需求的适老化设计标准。
在研究中，一方面运用了社会学、心理学领域常用的用户访谈、问卷调查、座谈会等方法，另一方面还引入了人类工效学领域的眼动实验法。通过科学、严谨的实验，评估不同设计方案在不同使用场景对用户主观体验评价指标和客观眼动指标的影响，最终形成了一套完备、成体系的适老化设计规范，可用于指引资讯类/阅读类App的适老化设计改造。规范明确了搜索、浏览、长文阅读、辅助信息（如功能按钮、设计页面）不同手机阅读场景，标题、摘要、正文等不同信息层级下，理想字号、行距和粗细组合，并给出了不同灰度颜色的全局最小可辨识字号。
相关研究成果也已撰写成2篇论文，其中《Improving Smartphone Reading Experience for Middle Aged and Elderly Users : The Effect of Font Size, Line Spacing and Stroke Weight》在第24届国际人机交互大会（HCII2022）发表；《中老年移动端数字阅读最小可辩识字号研究》被中文核心期刊《包装工程》录用，即将发表。另外，团队也与中国老龄产业协会合作，发布了《移动互联网应用程序适老化体验规范》团体标准，共享我们的经验，希望带动移动互联网行业关注中老年用户的需求，帮助其他产品提升中老年用户的阅读体验。
做出理想的适老化设计需要对老年人群体有深入的了解，需要搭建系统的适老化设计理论体系，在前期用户研究阶段需要综合运用生理学、心理学、行为学和社会学等相关的知识，对老年人日常生活和使用移动App所面临的问题有深入系统的分析。在提出解决方案的阶段需要专业的交互设计知识，对人工智能技术有一定的研究，以及对现有业务自身拥有的资源有深入的了解，这样才能提出系统且深入的适老化解决方案，而不只是停留在放大字号和功能精简层面。
《设计》：针对老年人对有尊严的生活的渴望，除了通过无障碍设计适应老年人群体在生理和心理上的变化之外，百度的适老化设计是否有考虑在实践中帮助老年人群体实现在数字时代中“进化”，来一场跨越数字鸿沟的双向奔赴？
小军：百度App大字版体验设计目标解决老年人不能用、不敢用、不会用的问题，百度App大字版完成适老化无障碍设计覆盖，解决了产品不能用的问题。
百度App大字版通过降低操作成本和帮助老年人学习成长，解决不敢用和不会用问题，实现在数字时代中的“进化”，具体措施包括：大字版依托百度领先AI技术，在产品实践中应用语音搜索、图像识别降低输入成本，实现全场景内容朗读降低信息获取成本，通过AI技术应用降低使用成本，解决不敢用的问题。同时计划在产品中增加针对适老功能的分步，直观的教育视频，解决不会用的问题。
《设计》：大数据时代如何实现“茧房”优化？
火韦：这个是很专业的问题，深入到了老年人内容消费的核心体验。我尝试片面地回答。
一般来说，“茧房问题”是指“接收”，就是个性化推荐系统会让人们困在原有的兴趣点上，从而接收不到不同的信息。百度推荐系统一直在解决“茧房问题”。这里重点说百度大字版对中老年用户需求的特别处理，增加用户接收内容的多样化。
一是，鼓励用户主动兴趣表达，通过合理的引导，让老年人主动表达自己的兴趣点、关注点；同时关注用户对推荐偏好的意见反馈，灵活调整内容推荐；二是，搜索和内容推荐的结合，参考用户的搜索意图，补充实时兴趣点到内容推荐策略中，通过搜索拓展用户对搜索相关领域和兴趣的认知边界；三是，通用资讯和兴趣的满足，在个性化的基础上，会增加平台老年人通用的重大新闻事件和垂直领域热门内容的适度推荐；四是，专项策略和体验评估，包括打散同类的、连出的或霸屏的内容，增加多样性，强化兴趣探索，一年多以来，持续进行实验优化，降低茧房用户占比，通过用户调研阶段性收集用户对多样性的体验反馈。
茧房问题还有一层含义是“接受”，就是人们会抗拒接受新信息、甚至是新事实。特别是老年人有一些固有的观念和习惯，很难改变。一是，进行科学辟谣，破除错误的意识，倡导健康的生活方式；
二是，鼓励老年人多使用搜索，主动拓展认知边界；三是，在用户消费图文和视频时，系统会出相关词，用户一键搜索得到新知识。此外，今年还推出了“交朋友”模块，通过互动课堂和社区讨论，让老年朋友更好地接受新信息。
《设计》：老年人使用智能设备进行网络交易时的信息安全和交易安全如何保障？
火韦：老年人在使用智能设备，已经从简单的浏览信息、开始更多地进行电子购物，涉及到相对复杂的网络交易过程。
百度App大字版在早期版本就关注到了这个问题，从以下方面持续优化。
一是，我们会主动打压低俗、低质的内容和商品，并给优质和权威的第三方打上官方标，引导老年人识别来源；
二是，我们也加入了百度保障，并且专门推出了老年人保障官网和专属处理流程，对平台发生的网络交易进行提前保障；
三是，推出“暖阳热线”400专线电话，随时与老年用户进行沟通。
《设计》：在适老设计中，AI技术有哪些独特的功用？
雷哥：在适老化设计中应用AI技术，可以更好地解决老年人在生理和心理上面临的现实问题，满足老年人的信息获取和情感陪伴诉求。例如，在信息获取层面，通过语音识别和图像识别技术，可以改变传统的输入文本的搜索方式，大幅降低老年人的搜索成本，使老年人仅通过说话或拍照的输入方式即可更方便地答疑解惑，获取新知。AI技术在视频场景也可以发挥作用，通过智能放大字幕和智能添加字幕，可以帮助老年人更好地获取视频信息。通过声纹识别和声音合成技术，我们也可以帮助老年人录制合成亲友声音，用于全局内容朗读，让与亲友分隔两地的空巢老人体验如同亲友在耳畔般的朗读，获取跨越时空的情感陪伴；同时，语音朗读能够解决长时间阅读带来的视觉疲劳问题。这些都得益于百度在人工智能领域的技术积累，所以，AI技术不仅可以在无人驾驶等前沿领域发挥作用，也可以通过产品化解决老年人面临的实际问题。
《设计》：适老化设计的研究和开发在MEUX部门处于什么位置？
雷哥：MEUX团队一直很重视适老化设计的研究，很早就启动了相关的专项课题并持续投入。在工信部下发互联网应用适老化及无障碍改造专项相关指示文件之前，我们就已经在进行适老化设计的相关研究和探索，并且研发了公司内的首个适老化产品——百度App大字版，因此我们对国家互联网应用适老化改造的响应是非常积极和及时的。我们的适老化设计研究及产品研发的成功经验，也推广到了公司内部各个产品团队，为公司内移动应用的适老化设计提供了参照标准。在公司外部，我们也与老龄委合作制定了国内首个移动互联网应用适老化设计要求的团体标准，将我们的经验推广到整个行业，形成更加广泛的影响。
小军：百度MEUX部门配备用户研究、视觉、交互、运营完备的各职能深度参与并持续研究适老化设计，支撑产品建设和持续升级，同时，在学术论文发表、行业团体标准建立、国际奖项申请上均有显著的成果产出。
《设计》：融入老年人服务生态，百度与哪些行业展开了怎样的合作形式？
火韦：百度App大字版的目标是：成为中老年生活的必备App，服务于生活的方方面面。为了实现这个目标，与公司内部相关部门、政府部门、行业伙伴进行了广泛合作。
一是，到今天，百度App大字版已经是拥有搜索、AI能力、图文、视频、直播、电台、小说阅读的综合内容消费平台。在公司内部，多达10多个部门的200多位同事参与了百度App大字版的开发和运营，其中包括搜索、语音搜索和语音智能处理、百家号内容平台、信息流策略、小程序和小说等兄弟业务。
二是，我们积极响应政府相关部门的倡议，全面进行适老化改造，并与百度关怀版一起申请并通过了《移动互联网应用适老化设计要求》团队标准。同时与中国老龄协会一起推出了《老年智能科技大赛》。
三是，在服务生态上，与养老行业机构和企业进行深入合作，包括与红松学堂、人人讲合作推出“交朋友”社区，引入百度健康、薄荷营养提供健康功能，引入喜马拉雅和懒人畅听的小说、相声、评书等娱乐内容。
同时，我们也与这些伙伴一起培育养老市场，让更多的人关心老年群体在智能时代的难处。比如我们在父亲节那天全网推出“你先忙，爸没啥事”活动，用八张大图，说出了父亲和孩子打电话时想说但没有说的话。
《设计》：针对老龄化群体，百度在软硬件开发方面还有哪些具体的长短期规划？
火韦：从2021年1月推出以来，百度App大字版一直专注于为老年手机用户提供友好的内容和服务。这是一个复杂的持久过程，还在苦练内功，与用户沟通、了解他们的需求、喜好和习惯，不断推出新的App功能（电台、视频内容、搜索、AI能力、课程等）。这些业务都有向智能硬件、线下业务延伸的可能性。
《设计》：在做适老化设计的过程中，作为设计师、工程师，你们收获了怎样的体验？
LU：怀着同理心和使命感来设计产品。中老年人是我们的长辈，他们年轻时为社会、为国家贡献了很多。当他们年迈，因为身体老化在融入信息社会面临困难时，我们有责任、有义务去帮助他们，让他们能够轻松、愉快、便利地享受信息生活。在此，我们也呼吁更多的移动互联网App、设计师和产品经理参与进来，推进移动互联网产品的适老化升级，帮助中老年人享受信息社会，为中国的信息无障碍建设贡献自己的一份力量。
小军：作为设计师，参与多轮的用户访谈，扫公园接触真实用户收集使用反馈意见。收集政府、竞对、研究机构的情况。这让我们对老年用户有了更深入的认知。产品设计中相比功能上的优化，情感上的关怀也是内在需求。我们的着眼点从无障碍设计，深入到情感化设计中。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
沉浸式体验是让人专注在当前的目标，全身心投入并感到愉悦和满足，从而忽略时间的流逝。应用到界面上则是更强调聚焦内容，减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面，通过精细化的设计，在多样化的手机屏幕中呈现时，能够带给用户更为沉浸的视频观看体验。
视频播放器中视频画面当然是最主要的内容，以此作为突破点进行思考：
· 最大化画面视野：通过改变视频画面本身的大小，减少页面“留白”，让用户更聚焦视频画面，观看视频时更专注。
· 最佳视线观看位置：将不同高度的视频按照页面结构去布局视频画面，通过画面避让状态栏、顶底bar结构的方式，使画面更加整洁，减少
元素混乱带来的干扰，同时整体位置偏上展示，视线落点更加舒适。
· 观看体验连续性：视频浏览过程中，非必要不打断视频浏览，在进行如查看评论、临时退出播放器等行为时，保证视频播放的连贯性，方
便用户多操作。
01.视频画面裁剪
随着时代的发展，为提升消费者对手机的操作体验，智能手机逐渐多元化，手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端，手机屏幕尺寸的多样化影响到产出视频尺寸的多样化，同时用户可通过视频编辑工具任意编辑视频尺寸，最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达22万多种，用户使用机型近300种，在视频尺寸多样性及视频展现媒介多样性的现状下需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。
我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果，并最大化视频画面。减少环境干扰，给用户带来沉浸式感官体验。
视频宽撑满手机屏宽后，将视频尺寸分为四类：
1) 视频高度>手机屏高
视频画面宽度撑满屏幕后，视频整体居中于屏幕，居中裁剪视频多余画面。
注：不允许画面高度撑满屏幕，宽度自适应导致画面左右留黑效果。
2) 视频高度=手机屏高
视频居中于屏幕，刚好填满屏幕，不需要裁剪处理。
3) 1:1<视频高度<手机屏高
此类尺寸较复杂、难处理，于是将限制裁剪面积和展示位置相结合，保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果，反推定义最大裁剪面积，根据显示位置多次判断视频放大后是否符合既定裁剪面积，最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制，并且将裁剪面积云控处理，根据业务内不同时期的诉求限制比例来灵活调整展示效果，双端也可分端定义数值；横向协同及迭代成本极低，便于快速上线验证效果。
4) 横版视频（高宽比≤1:1）
横版视频在手机屏幕中面积占比较小，画面可识别度和饱满度稍有欠缺，轻微扩大画面视野，画面浏览更加清晰有冲击力。以不影响内容理解为前提，根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。
锦上添花，引入文字内容识别
为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题，发挥百度强大的AI技术优势，引入文字识别技术及视觉展现规则，进一步提升视频展现样式的可控性，同时能够通过尽量少损失画面达到画面放大的效果，平衡画面沉浸感和完整性的关系。
左右文字被裁剪情况：文字左右设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方描述的裁剪规则进行退档显示（满屏至不裁剪之间的档位），直至文字不被裁剪。极端情况退档至最后一档，视频画面不裁剪。
横版资源文字左右被裁剪情况：按照固定尺寸退档
上下文字被裁剪情况：文字上下设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示，此情况只会从全屏一档显示退至二档显示。
裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发，灵活配置到不同业务中，保证裁剪规则一致的同时又能针对不同业务进行定制展现，也可快速调整并支持上线实验，来验证适合自己产品的展示效果。
02.智能满屏
通过裁剪方式放大画面视野之外，还通过让用户自主交互操作再次放大画面视野，调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大，满屏方式更加激进极致，画面放大更多。开启方式通过面板功能按钮开启智能满屏外，增加便捷交互开启手势，用户可双指放大快速开启。
由于满屏是用户主动操作放大行为，可以接受文字内容被裁剪，但也需要有节制的放大，避免带来画面裁剪过多视觉体验不佳的问题。为了保证95%以上资源撑满全屏，达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例（根据自身业务视频资源判断），将视频资源细分为3类进行不同效果处理：
1.可继续放大至满屏的视频，则进行满屏展现。
2.不可继续放大的视频，如果继续放大会导致裁剪画面过多影响观看完整度与观看体验，则保持上方提到的裁剪规则，不做另外处理。
3.横版视频统一放大至固定尺寸，可根据自身业务资源进行放大尺寸的定义。
通过布局合理、舒适的画面位置，也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方，于是在设计中我们将视频画面放在屏幕偏上的位置，用户视线落点更加舒适，一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置，能减少下方标题等信息过多对视频画面的遮挡。
为了精细化处理不同比例的视频资源，竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。
竖版视频：高于1:1的视频，按照页面结构布局视频画面，避让状态栏、顶底bar操作，避免与页面结构冲突带来画面凌乱不美观的问题，同时能减少画面参差带来的干扰，增加沉浸浏览感受。
横版视频：等于矮于1:1的视频，画面按照屏幕高度比例展示在偏上的区域，高度比例可云控便于灵活调整。
01.视窗挤压
为了满足用户在视频场景多角度信息获取，在不打断用户视频浏览的基础上建设视窗挤压交互体验，提升观看视频的相对沉浸感。在视频场景观看评论时会弹起半屏面板，遮挡住视频内容，导致用户无法在浏览评论的同时观看视频内容。对短视频重度用户来说，对同时看评论和看视频习惯的用户有挑战。通过视窗上移动挤压功能，在浏览面板内容时不对视频内容打断，弱化面板内容给用户带来的影响。
视窗高度固定，画面宽高比越小画面内容越小，观看体验不友好，所以竖版视频对压缩后的显示尺寸进行干预，定义最小视频画面展示比例，尽量扩大画面视野，保证观看视频的舒适度。
02.悬浮小窗
在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验，旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放，同时也能在屏幕角落观看到缩略图大小的视频播放窗口，可以从任何页面中观看视频，我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感，提升用户使用体验的满意度。
沉浸式体验设计是帮助用户减少画面干扰，让用户专注于当前的视频浏览，忽略时间的流逝进入心流状态。我们通过放大画面视野，增强画面冲击力的方式减少干扰，并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下，保证画面效果的稳定和可控，并且不会受阻于未来手机机型的扩充发展，普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断，进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式，为用户带来更加舒适的观看使用体验。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
● 京东金融 App 首页三大改版
3.x 版本到马上上线的 4.x 版本，公司的战略方向以及产品运营方向都在不断的变化（有接触过京东金融 App 的人都知道视觉变化很大）。作为公司的移动端产品，既要满足用户体验和需求，又要满足内部业务的扩展。所以我们要不断优化各种布局和细节，把用户体验和内部需求做到最好。
3.X 版本是我接首页优化的第一个版本。改版期间我们经历了很多，除了本身业务以外，更重要的是我们发现之前首页有很多问题。其实优化产品最基本的方法就是发现了一些问题，然后去解决这些问题。问题可能是产品问题、业务需求扩展、运营需求满足，最后才是体验和视觉。这些问题能得到解决产品就能得到优化。
以账户为中心是当时产品的主要方向，整体都在强调财富管理。所以之前的界面在账户为主和业务扩展上都存在很大问题，一是业务拓展存在局限性，二是账户感不强。
经过一大堆方案和设计图的轰炸，最终确定了大的方向，突出理财金额和业务和信贷业务。把一些数字突出放大，让用户打开产品既能看到自己想看到的东西。账户感的体现我们把数字和一些文字说明当成首屏最主要的东西，少一些运营，少一些 banner 。就像是在银行打出的纸质账户信息，上面很少会出现广告。
▲ 还是之前的方法，经过上线一段的时间去发现问题。随着业务和功能的增多，原来的布局已支撑不了公司方向的支持这是之一。之前的视觉也有一些缺陷，进入 App 整体看上去没有重点的，纯白色很干净但是也没有能跳出来吸引眼球的东西，也不能把重要业务区别与其他业务。
这次增加了一些产品本身频次的功能，如扫一扫、签到、每天领券等。还有怎么样能突出重点业务的展示，让用户在视觉局部上有所重点。业务的扩展性通过左右横滑来实现。
▲ 怎么样能把多量的业务，重新布局到有限的界面里，而且不能降低用户的使用体验，是我们这一版要解决的问题。就是化繁为简。
这次我们把业务场景划分成「赚钱」「花钱」「借钱」，相对应是「理财」「白条购物」「现金借贷」。使用三个Tab 签和最简单的布局方式来排版。用户理解相对也会变的容易，界面整体看起来也简单明了。
首页的改版看似简单，其实背后有很多的付出。不断的优化讨论、不断的视觉方案，我们不断在寻找新的突破，希望能让各个方面都达到最大效能。
● 理财日历
「理财日历」是整合用户关于所有金融业务的，按照时间线索智能提醒和自动完成的一款产品。
· 产品目标：帮助用户记录金融事件和跟钱相关的事件，例如理财到期、白条还款事件、生活缴费事件等等。一条 时间线可以把用户所有的事件联系起来的。让用户把时间用在更重要的事情上。
· 产品关键性词语：时间、自动记录、提醒、设置自动完成
当我们进入 App 时，需要进行很多不同的操作，进入到不同的业务线页面才能完成我想要做的事情。这时整合业务聚合内容就变的很重要。需要有一个平台把跟用户强相关的金融事项和其他事项整合，这样就不用花费很多时间来处理各种事件。
日历是一个强时间线的用户固有思想形态，我们需要把除了基础的时间、记录事件和日常提醒功能做好外，还要让用户习惯这里面有跟我理财相关的事项。针对使用产品用户的特征，在视觉布局上不能难以接受，日历主要的时间、每天事项、后续事项查询和增加事项都要合理排布。
为了增加日历的整体氛围，除了时间的排布，我们为每一个月和每一个节气增加了插画。每一条信息的分类都用 icon 表示，突出强弱，增加氛围。
日历添加事项和设置页面，以进度的感觉让用户去更好的完成事项的设置。推荐事项也是用户最常用的、最容易跟时间所对应的事项。
日历的分享模块是很重要的一个细节，我们希望它能更好的去传达这是一款有温度的产品。它也是对外发声的一个利器。
怎么样才能激发用户分享的欲望呢，用户打开界面的分享动机是什么？我们知道用户分享有几点：有用的、有趣的、相互比较、用户认同等等。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：程大专 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。
我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。
但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。
我们 APP 中的不一致例子
接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：
1. 在设计方面
和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。
颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。
2. 在技术方面
在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。
在使用这个系统时，团队反复面临同样的问题：
让我们试着找出我们是如何陷入这种境地的？
1）没有明确的颜色使用规范
所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。
然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。
例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助
2）旧品牌的设计包袱
以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。
旧驱动器品牌
在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。
我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。
以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分
致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：
1）制定指导原则
我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。
2）颜色能通过可用性标准
我们如何确保从一开始就设计出易于使用的颜色？
3）易于维护并符合未来趋势
我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）
在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）
我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。
语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？
1）什么是语义颜色？
语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。
例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。
甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……
2）从基于外观的配色方案到基于语义的配色方案
语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习
google： https://material.io/design/color/the-color-system.html#color-theme-creation
Apple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
Shopify： https://polaris.shopify.com/design/colors#navigation
Asana： https://asana.com/brand
显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。
3）深入研究语义颜色
我们的新颜色系统由两部分组成：
基础调色板
我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。
该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。
基础调色板
语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。
请参阅此处的命名法和一些示例：
语义颜色结构和示例
这意味着来自基础调色板的颜色可以用于多种语义颜色：
这就是我们根据这个新原则重新调整颜色命名的方式：
我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。
我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。
1）语义色彩嵌入设计原则
语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。
例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。
2）解锁黑暗模式
语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。
明暗模式下的语义颜色 Primary.Background
3）语义颜色高效灵活
如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。
另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。
如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。
4）颜色组合指南
这个系统似乎很容易使用，但设计师仍然有一些问题：
为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。
我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。
Figma 中内置的语义色彩交互指南
采用这种新的颜色系统产生了一些变化：
1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。
2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。
总结下今天学到的内容：
1）发现并准确描述团队在使用颜色时遇到的问题
2）如何从提出设想，到以新的方式来定义颜色
3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
快速迭代的产品存在着同质化趋向，如何做出差异性？如何将品牌精神向外传达？如何在有限的时间内，满足产品需求的同时带给用户更好的
体验感，进而体现设计的价值呢？静态画面动起来或许是个不错的选择！
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Hi，我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容，用户体验就是建立在坚实的界面设计基础之上的。所以，如果你想要在 UI 设计上提升能力，应该多去思考界面设计背后的原因。
今天会跟大家分享一些被广泛运用的界面设计规则，它们能快速使得你的界面设计更干净、高效。
用更容易让用户理解（说人话）的引导文案，提升使用体验。
（彩云注：下面 2 个案例中，左侧的“购物车”和“库存 2”太过于术语化，右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候，也一定要注意界面中的文案，尤其是说明文字，控件文字等等，这个点经常容易被忽略。）
良好的对齐方式，可以增强内容的可读性，让用户的视线更容易扫描。
（彩云注：左侧的“之”字形视动线比较难阅读，且不够专业；右侧的垂直对齐增强了可读性，也让设计看起来更加统一，能够快速的提升设计细节。）
使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。
（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）
大段的长句会让内容变得难以阅读。为了获得好的体验和 UI，应该注意拆分内容，并使用项目符号突出关键点，利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时，提炼要点有助于提升用户体验，这样也不至于让用户直接忽略。
（彩云注：左侧的大段文字我想应该没多少人会去阅读，右边的至少还能在短时间内快速看看几个关键词。）
进度条帮助用户追踪流程，它也能使查看上下步骤更加容易。线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。
（彩云注：左边的表单 UI 不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）
错误提示一定要明确，易于理解，方便用户进行下一步的操作。如果用户不理解界面上出现的错误，用户就会感到很失望，可能会放弃接下来的流程。在 UI 设计时，在正确的地方用通俗的语言说明问题，以避免歧义，这一点非常重要。
（彩云注：我常常遇到各种出错，但出现的提示太过于术语化，也没有提示在正确的地方让我非常苦恼。）
从菲茨定律（Fitt’s Law）中我们应该知道，目标区域的距离和外观与所采取的行动成正比。因此，为了将注意力集中在转化按钮上，按钮应该准确放置在合理位置上。此外，按钮的大小应该易于点击，避免用户因尝试点击时不方便而流失。
（彩云注：左侧的按钮不在正确的决策位置以及按钮太小，右侧的按钮简洁明了并且符合用户的心理预期，能够让用户更快决策并点击。）
颜色是 UI 中不可缺少的部分，它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。
（彩云注：左侧的蓝色按钮颜色并不符合用户对于删除的心理预期，右侧的红色按钮对用户的心理预期有危险和警告，用红色代表删除能够让用户集中注意力关注这一特殊的操作。）
用单列展示内容，能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时，将所有信息垂直对齐时，能更好的保持用户关注度。
当用户准备登录或注册你平台的时候，把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号，能很好地增加点击率。
在用户做选择的时候，需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。
（彩云注：左侧的问题在于选中状态不清晰且选项的颜色过于丰富，右侧的选中状态清晰且选项颜色只有 2 种，选中和非选中，体验会更好。）
如果想给信息分组，使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素，空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。
保持设计的一致性，能够降低功能复杂度并让用户更快决策，一致性设计让用户更快熟悉操作而不需要太多思考。（彩云注：左侧的选项圆角不一致，会让用户思考为什么这里会有不同，而右侧的一致性选项设计，能让用户忽略内容外的干扰。）
在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。
以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则，这些点虽然基础，但却经常被人忽略。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
编者按：其实网页或者App中的导航（Navigation）这个概念远不止我们熟悉的导航栏，而是一个更加广的交互概念：引导用户和产品进行有效的交互，实现用户的目标。本文将详细地介绍界面的导航设计。
一个网页或App产品要想有很好的可用性（usability），需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面，那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求，让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。
首先，让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中，当我们从一个地方到另一个地方，需要一些引导和指示。英文中Navigation这个词来源于拉丁文，原意就是：操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。
所以回到UX／UI设计上，导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品，作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效，用户体验能得到极大的提升。
在你刚开始设计你的界面时，就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素，比如按钮（buttons），开关（switches），链接（links），标签（tabs），条（bas），菜单（menus），区域（fields），让用户在不同的界面之间进行切换。
我们工作室的设计思路是，在界面设计的早期就全面地思考导航的设计，包括界面的布局，页面间如何切换，导航元素的放置和具体功能。并且通过低保真原型来进行验证，保证用户能清楚地理解所有重要的操作。如果跳过这一步，设计将有巨大的风险，其他事情有可能到头来都白干了。所以无论，对用户还是客户还是设计团队来讲，做好这最基础的部分是非常有好处的。
菜单是我们最熟悉的具备导航功能的元素，它向用户展示了界面的所有重要选项。基本上，它可以是用动词命名的一系列指令，用户可以用它来指示系统做出动作，像保存，删除等；它也可以是一个用名词命名的目录，用来代表不同内容的集合。
在界面设计中菜单可以放在不同的位置（侧边菜单，顶部菜单，底部菜单等），拥有不同的交互和视觉形式（下拉菜单，上拉菜单，滑动菜单等）。要想设计好菜单的位置、交互和视觉形式，设计师需要经过全面的用户调查，包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标，为用户体验打下坚实的基础。
△ 作者：Tubik
这是一个博客APP的界面设计，采用了侧边菜单以及目录的形式，文字直接说明内容，再加上图标来做为辅助的视觉说明。
△ 作者：Ludmila Shevchenko
这个UI概念设计的例子很好的运用了颜色作为标记，这是一种很有效的导航技巧：每个分类的背景色使用了和目录相同的的颜色，这样目录和内容有着非常强的相关性，用户能自然地将他们联系起来。
CTA是用户行为召唤的简称（call to action）。CTA简单来说就是指设计师通过设计，刺激用户去做出一些行动。相应的，CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮，标签或者链接。
不管在什么界面，CTA元素都是高效的交互行为的核心，极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话，用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面，它都必须是最瞩目的元素之一，用来直接地告诉用户怎么用这个产品。
△ 作者：Eugene Cameel
一些CTA元素直接用图标形式而没有任何文字说明，但只适用于大家都熟知其含义的图标，比如听筒图标和信封图标。上图这个例子中，这个听筒图标就是这个界面中一个焦点，是一个典型的CTA元素，引导用户快速地实现他们的目标。不需要任何文字说明，用户也能懂点击这个图标的结果。
但是，如果一个图标的含义不是那么明显或者可能造成误解，最好还是加上文字说明。
△ 作者：Tania Bashkatova
上面这个例子是一个关于制作海鲜的网站的着陆页（Landing page）。页面的标题let’s cook还有食材照片是一个CTA，但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮，用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系，把用户的注意力拉到关键的交互区域中。
条（Bar）指的是界面中一组用户可以点击的元素，用来快速与产品进行互动，或者还能让用户知道事件的进程。
标签条（Bar）
最基本的条是标签条（Tab bars），常出现在APP界面的底部，让用户能在APP的不同模块间快速切换。
△ 作者：Sergey Valiukh
载入条（Loading bar）
载入条是用来告知某个动作的进展，用户可以通过时间、百分比或者其他信息了解整个过程。
△ 作者：Sergey Valiukh
进度条（Progress bar）
给用户提供反馈，让他们了解事件的进度，比如说计划的事情完成了多少。
△ 作者：Valentyn Khenkin
按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令，跟系统进行交互从而实现他们某个目标，比如发送邮件，买一个东西，下载文件，播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好，是因为按钮很好地模仿了人和真实世界里跟物品的交互。
现如今的UI按钮有不计其数的设计样式，能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击，因此需要具有非常高的视觉识别，有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格，同时又能在视觉上跳脱出来。
△ 作者：Ernest Asanov
以下是在APP和网页设计中常用的几种具备附加功能的按钮。
汉堡按钮
汉堡按钮隐藏着一个菜单。当用户点击他们的时候，能把菜单调出来。有这个名字是因为它是由三条水平线组成的，看起来就像是汉堡的形式。它是一个典型的交互元素，也是颇具争议的元素。
大多数用户知道点击这个按钮能展开一个菜单，所以不需要额外的说明。汉堡菜单极大地节省了界面的空间，能让界面看起来更简洁，也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计，通过隐藏菜单让整个设计更统一，界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议，但因为这极大的好处，它目前仍然被广泛的使用。关于这个元素的主要诟病是，对于一些对界面不太熟悉的用户来说，这个比较抽象的设计元素可能会让他们产生困惑。所以，在决定使用汉堡菜单前，应该调查一下目标用户的接受程度和他们的需求。
△ 作者：Ernest Asanov
上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来，从而实现一个简洁的页面布局和视觉效果。
加号按钮（Plus button）
一般通过这个按钮，用户可以实现添加某个内容的动作，比如添加新的联系人，状态，笔记，位置等所有用户在产品里能做的基本动作。有时候，点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容，这取决于是什么产品。
△ 作者：Sergey Valiukh
上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容（图片，视频，文字），在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作，但因为给予了用户选择空间，所以还是对用户很友好的一种设计。
分享按钮（Share Button）
分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下，这个按钮都是用社交平台的Logo作为视觉形象，这样非常易于识别和认知。
同样，这也是一个用户非常好理解的元素，在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计，特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题，从而设计出很好的用户体验。
△ 来源：Tubikstudio
这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然，同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究，可以到来源查看。
也很好理解，就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表，上面是一列数值，比如小时，分钟，日期，度量，币种等等。通过滑动列表，用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。
△ 来源：Tubikstudio
复选框是可以用来同时标记多个特定的内容。同样的，也是借用了我们在现实世界里熟悉的概念。我们在考试的时候，或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样，复选框同样用得很多，主要在设置页面设计里。不过，复选框还有另外一个用得比较多的地方，那就是含有任务管理，待办事项，时间记录等类似功能的App或者网页。
△ 作者：Tubik
上面这个是一个待办事项App的概念设计。用户点击复选框后，表示这个内容已经完成。字体变粗的同时颜色发生了改变，这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。
界面的导航（Navigation）是用户体验设计的核心之一。毫无疑问，如果你看不到路, 你就去不了你的目的地。用户现在正面对着越来越多的网站和APP产品。越来越多的选择会让用户期望这些产品具备符合他们使用习惯的导航设计。
图标可以定义为一个象征着某个概念或物体的视觉形象，有着加强与受众沟通的目的。会和文字结合一起使用，将想要传达给受众的信息表现出来。在界面设计中，图标通常是象形符号或表意文字，对可用性和成功的人机交互有重要意义 。
毫无疑问，图标的其中一个重要作用是可以有效地替代文字描述。因为比起文字，用户对图片的理解速度更快，所以这个特点能极大提升用户体验，增强产品的导航和对用户的引导。但是，需要注意，即使是轻微的歧义或者误解都会导致糟糕的用户体验。所以在设计图标的时候要做必要的测试，根据目标用户平衡好文字和图标的使用。最有效的方式是同时使用图标和文字，这样大部分用户都不会有问题。电商APP或者网站最常使用这样的形式来给用户足够的信息，让他们能轻松快速地浏览。
△ 作者：Tubik
根据图标的功能，我们可以将它们分为一下几类：
交互式图标（interactive icons）
这类图标具备交互功能。他们是可点击的，能回应用户的要求，触发图标代表的动作。这种图标告知用户按钮、控件或者其他界面交互元素的功能或者特点。在大多数情况下，这类图标的意义明确，不需要文字辅助说明。
△ Tab Bar
△ 菜单概念设计
说明性图标（clarifying icons）
起到说明作用的图标，设计师用它来表示某一个特点或者内容的种类。它有时候不属于界面布局的元素或者并不具备直接的交互功能。经常和文字结合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娱乐性和装饰性图标（entertaining and decorative icons）
这类图标注重抓人眼球的视觉效果并非功能，通常用在节日或者特别款的场景。他们能有效地吸引用户的注意力，增强视觉冲击力。
复活节和春天主题的图标：
△ 图片作者：Arthur Avakyan
APP图标（app icons）
在各个平台上可交互的品牌标志，展示品牌和产品的形象。最常见的就是我们手机界面上每一个App的图标，上面通常是品牌和产品的Logo。
△ 作者：Arthur Avakyan
网页图标（favicons）
就是我们经常在网址栏或者书签里看到的URL前面的那个小图标，也是代表着产品或者品牌的形象。能让用户在浏览网页时给他们快速的视觉提示。
搜索区域又常常被称作搜索框（search box）或者搜索条（search bar），代表着用户可以在这个区域内输入想要搜索的内容。它是那些有着很多内容的网站或APP的核心导航元素，像博客，电商，新闻等产品。设计得好的搜索框能让用户轻松地找到想要的信息。因为它能帮助用户省去很多时间和精力，所以它是一个对用户特别友好的界面元素。
它的设计形式有很多种，可以是标签的形态，也可以是引导输入的一条线或者简单的一个搜索图标。大多数情况下搜索框的图标是一个放大镜的样式。基本上所有的用户都懂得这个图标的含义，所以能实现非常直观的导航设计。想要在这个图标上做文章的话，要好好测试一下，因为改得不好的话会严重影响交互和界面的可用性。搜索框还可以加入提供候选项的下拉菜单或者自动填补内容的功能。
△ 作者：Ernest Asanov
另外需要注意的一点是搜索框控件在界面中的位置。在网页设计中，搜索框经常出现在网页的顶部。这是一个很恰当的设计，因为通常网页的顶部区域具有很高的可见性，用户打开网页就看到了，不需要再花时间去找到这个控件。举个反面例子，如果一个电商网站因为搜索框的设计有问题，导致用户没办法快速方便地找到想买的东西，网站销售表现会受到极大的影响。因为现在很多网站都将搜索框放在网页的顶部，所以用户也养成了在那里找到搜索框的习惯。
至于App界面的话，要视具体情况而定，设计师可能面临更多的限制。如果是一个有着大量内容的APP，而且搜索是核心功能之一的话，那么一般放在一个显眼的标签条（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜单里或者只在需要的用到的地方显示或者时刻显示出来。
△ 作者：Sergey Valiukh
标签是一个标有关键词的可交互元素。标签其实是给用户提供快速通道的元数据，用户可以通过它快速导航到与关键词相关的所有内容。除了网页或者App本身带有的标签，在很多情况下用户也可以自己创建标签。
△ 作者：Design4users
标签这个界面元素被广泛地应用在用户原创内容平台（UGC）的界面设计里。当用户上传图片、状态到社交网络的时候，可以加上关键词作为标签。上图就展示博客网站Design4Users运用了标签来加强网站的内容导航。通过点击某个标签，能切换到带着这个标签的所有内容的页面。标签是友好的搜索引擎优化（SEO-friendly）技巧，能提高用户搜索内容的成功率。
△ 作者：Unsplash
再举一个例子，上图是图片素材网站Unsplash的界面。当用户想要下载图片时，可以输入描述图片的关键词作为标签。通过这样的形式帮助用户有效地找到想要的图片。我们还可以注意到，输入框内加入了引导用户进行操作的说明，这样更进一步地提高了产品的可用性。设计的细节真的很重要。总而言之，标签是一种用户可以自行创造的导航元素，拉近了界面和目标用户之间的距离。
全面地设计好整个界面的导航不是一件容易的事，需要一些心理学、交互模式、用户测试的基础知识，还需要在项目的早期思考清楚网站或者App的信息架构。但是做好这一点的话，能够让你的产品很好地帮助用户解决他们的问题，给优秀的用户体验打下坚实的基础，让他们对你的产品产生越来越大的粘性。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
蓝蓝设计的小编 http://www.lanlanwork.com