随着移动互联网的发展与普及，人们的生活方式发生了巨大的变化。当我们足不出户便可以享受到香喷喷的美食、相隔千里也能有面对面的交流体验时，大多数老年人却被关在了数字世界的大门之外：不会线上挂号、打不到网约车、因不会操作健康码而被公交车拒载……这样的事件屡见不鲜，本应同样享受互联网便利的群体，近几年来却处处受阻。
数据显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，数量不可小觑。如何打破互联网产品的使用壁垒，让老年人也能自如地参与到互联网生活中，是我们设计师应当肩负的社会责任。
贝壳经纪人作为社区的贴心服务者，经常为社区内的老年人提供帮助，解决手机使用问题。
△ 图 1 经纪人志愿者在社区帮助老人学习使用手机
我们通过观察老年人使用手机的过程，并与具有丰富帮助经验的经纪人深入沟通，发现老年人使用互联网产品存在的主要障碍如下：
△ 图 2 老年人使用互联网产品的主要障碍
1. 手势操作困难
由于骨骼肌老化，老年人动作幅度减小、操作的精细程度降低，他们在使用手机等小巧的设备时难以精准完成手势操作，很容易出现误触现象。
皮肤老化同样影响了老年人对手机的使用，细胞水分减少，皮肤褶皱加深，表皮干燥以及指纹的磨损，使得在使用触屏时灵敏度下降，即便手势正确，也难以顺利完成操作目标。
2. 信息接收受阻
老年人的感官能力明显下降。40 岁以后人的眼部开始老化，对光的敏感度以及对色彩的分辨能力下降，更容易炫光，难以识别蓝紫色为代表的冷色调颜色；听觉的灵敏度可能会减少 50%之多，难以分辨不同的声音。我们认为毫无阅读压力的界面，在老年人眼中可能是模糊一片；我们听起来特色鲜明的提示音，甚至都没有传入到老年人的耳朵里；让我们感到新奇的震动触感，老年人可能毫无感觉。
3. 界面理解障碍
老年人很难理解互联网产品中的层级关系，以及元素间的关联关系，这导致他们经常不知道自己在操作哪一步骤，更难以预期到下一步会发生什么。另一方面，老年人很难通过归纳概括信息的特点来区分不同元素的功能和属性，比如，对调整铃声、连接网络等“设置”属性的功能没有统一的概念，想要调整时不知道去哪里操作。
4. 容易情绪挫败
由于神经系统退化，老年人对情绪的控制能力减弱，容易情绪低落。在使用手机受挫时，他们常会感到无助和沮丧，持续的负向反馈易降低老年人使用手机的意愿。加之屡次出现的互联网诈骗案件，老年人对手机安全问题更加顾虑，难以分辨真假信息，便不愿尝试不熟悉的功能。
洞察到以上问题及原因，我们分别从设计、功能、公益 3 个角度出发进行探索和实践，为帮助老年人更顺畅地使用互联网产品添一把力。
设计应当顺应老年人的生理和心理特点，并给予更多的人文关怀与鼓励。为此，我们提出了以下设计策略：
△ 图 3 适老化设计策略
研究表明，老年人更习惯单指操作，点击、上下滑动、放大缩小是老年人可以清晰理解并熟练操作的手势，交互中应尽量以这些手势为主，需避免四指滑动、长按等复杂手势。对于老年人来说，动作的简单易学性、高效性是最重要的因素，远高于隐喻性、趣味性等。
△ 图 4 老年人常用手势
颜色：
参考《Web 内容无障碍指南》中提供的指导意见，应使用 AA 级或 AAA 级的对比度标准：对比度（AA 级），文本的视觉呈现以及文案图像对比度至少要有 4.5:1，大文本至少有 3:1 的对比度；对比度（AAA 级），文本的视觉呈现以及文案图像对比度至少要有 7:1，大文本至少有 4.5:1 的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标，如 Contrast Ratio 在线检测工具：https://contrast-ratio.com/
△ 图 5 Contrast Ratio 在线检测工具页面
界面中，组件与文本对比度的标准是不同的，文本比组件需要更高的对比度。
避免使用蓝色、紫色等冷色调。随着年龄增长，人类的晶状体会变黄变浑浊，导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果，从而降低元素在界面中的对比度。
颜色不应该用作传达信息、指示操作或区分元素的唯一视觉手段，需要用额外的文字提示，如：
△ 图 6 颜色传达示例说明
字体：
使用字体时，最小采用16像素，需要对主要信息进行加粗处理，并支持用户可自由调节字体大小的能力，我们建议使用屏幕可读性好的无衬线字体。
图形：
首先需注意增加图标和按钮的尺寸大小。其次，应尽量采用拟物化、通用化的设计，图标语义尽可能具有老年人的生活时代特征，符合他们的知识经验。最后，建议搭配文字描述，方便老年人更清晰、快速理解。
△ 图 7 图形示例说明
引入更多维度的信息通道，能够帮助老年人高效地接收信息。听觉通道是仅次于视觉的最常使用的感觉通道，在设计时可考虑：
还可以通过点击时产生的按压触觉来增强感知，更多的触觉设计能够帮助老年人获得更加明显的反馈。
界面的扁平化可分为 2 个方向：一是视觉层级的扁平化，弱化视觉效果，突出功能主义，以要表达的内容或引导的操作为核心，尽可能减少干扰信息；二是信息层次的扁平化，建议页面层级最多不要超过 2 级，缩短用户与目标信息之间的触达路径。
在流程设计时，可将复杂任务拆分为目标清晰的子步骤，每一步骤中只让用户完成 1 项核心操作，并提供清晰的反馈，来提醒用户要实现的最终目标。如滴滴的关怀版中对打车流程的精简设计，很值得参考。
△ 图 8 滴滴适老化设计
我们在做产品设计时，还要尽可能的坚持正念，尤其是面向老年群体时，需透明化个人信息的使用方式、强化危险告知，杜绝引诱式的广告、提示等，减少干扰，避免利用老年人的弱点谋取利益，帮助他们在纷繁复杂的互联网世界中不轻易受伤害。另一方面，建议使用鼓励式的反馈设计，操作过程中给老年人更正向的情感激励，提升使用信心。
基于以上设计策略，我们试着在贝壳找房首页、房源详情页这 2 个核心页面进行了适老化设计改造，其中老年版首页已上线，欢迎大家在个人中心的设置里切换体验。
1. 精简功能，强化视觉元素：
老年关怀版的首页中，我们只保留了买卖租赁最常使用的功能，同时放大入口的点击区域，确保老年人也可以很快的发现目标功能并且顺畅的点击。
△ 图 9 首页球区设计
2. 多通道信息传达与交互：
房源详情页承载了非常多的重要信息，尤其是头部。我们着重突出视频讲房功能，让老年人可以更加直观地接收房源信息，避免阅读大量文字，降低理解负荷。同时，大面积的分段视频按钮，可点击快速切换到感兴趣的内容模块，增强老年人的操作掌控感。
△ 图 10 房源详情页头部设计
房源详情页底部增加语音提问按钮，吸底展示，方便老年人使用语音直接表达自己的诉求，信息以对话的形式直接地传递给用户，更符合老年人的交流习惯。
△ 图 11 房源详情页底部设计
3. 信息适老化：
结合老年人在房产交易中的特点，我们精简了详情页中的信息，突出房源的养老宜居特点、与子女住所距离等老年人重点关注的内容。
△ 图 12 房源详情页信息设计
适老化设计后的房源详情页整体效果如下（此版仅由设计探索产出，若上线使用还需深入打磨）：
△ 图 13 老年版房源详情页设计
在调研过程中我们发现，老年群体正在给火热的二手房市场添柴加火，上海链家中，单 60 岁以上的购房者成交占比就达到 6.7%，53-62 岁成为置换客群的第二大年龄高峰。
△ 图 14 2020 年上海市老年人购房情况
老年人的改善需求强烈，在选房时主要考虑与子女居所的距离、房屋本身的优质程度，重点关注：低楼层住宅、电梯房、小区环境、周围医院、小区的适老设施以及是否配备老年活动中心等信息。老年群体通常委托子女处理相关事务，但又有参与选房、表达意见的诉求，有部分的老年人会通过贝壳、链家 App 来了解房源信息。
因此，我们思考：如何通过更好的功能设计来满足老年人这类特征明显、诉求明确的客户群体？比如，通过增加老年选房专题或调优房源展示策略，优选出近医院、有电梯、便老设施齐全的房源和小区，方便老年人快速找到心仪的房源；再比如，增加设置子女小区功能，以此为基准向老年用户推送相关房源；又比如，优化家庭选房功能，针对性设计分享房源给父母的环节……在功能设计方面，我们还会继续深入探索，给老年客户一个更加贴心满意的购房旅程。
当我们在享受互联网带来的便捷生活时，有一个数量不断增长的群体成为了“边缘人”。
设计应当是民主的，是包容的，是具有人文关怀精神的。我们在日常产品设计中，需要有意识的考虑到老年人对于信息的接受、理解、记忆和行为的能力差异，在设计表现和产品功能上更加包容这个群体的特征，让老年人同样可以感受科技为生活带来的美好变化。
虽然我们在尽力践行着适老化研究，但依然还不够。老去，是所有人都要面对的问题，我们终将会成为这个群体。适老化设计，应该是适合所有人的设计，也应当引起所有设计师的关注。
心存善念，尽力而为。
文章来源：优设 作者：贝壳KEDC
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
写在前面的话
从互联网行业崛起至今，广告视觉设计风格经历了多次“更新换代”，技法愈发讲究，视觉愈发酷炫。但无论视觉表现如何进化，终究没有脱离互联网行业广告设计的常规套路。
“让用户能最快识别广告内容”是互联网广告设计的核心原则，因此我们纵观市面上的各大平台广告设计，清一色是变着花样堆砌商品与利益点的内容形式，唯独不见传统广告所青睐的——创意。
的确，传统的4A广告创意内涵较为隐晦，往往需要观者沉浸体验、深入思考才能理解当中的精髓，这并不符合互联网广告的设计原则，但这不代表【创意】无法融入互联网广告之中。
乐信设计团队利用将近1年的时间不断探索、输出与验证，证实了创意也可以融入互联网广告，创意能为互联网广告产生更大的价值。
在分期乐平台，创意广告比普通广告的点击率平均提升了3倍以上！
互联网创意广告设计方法论
我们团队是怎么样做互联网广告创意的？
我们团队基于互联网广告设计的核心原则上，开发出一套适用于在互联网广告领域融入创意的设计方法论，我们称之为 【3S原则】。
何为【3S原则】？
【3S原则】分为三个部分，即 “Simple简单”，“Story故事”，以及“Surprise出人意料”。
SIMPLE：简单直接，易于理解。
由于互联网广告的性质决定了用户只会匆匆扫视而过，所以内容上必须尽可能的直接明了，降低用户的识别成本，毕竟我们不是真的在做4A广告，用户不会静下心来细品某一张图。
STORY：具有故事性，能引起情感共鸣。
能快速有效地引起用户共鸣的方式之一是，通过情景还原来击中用户的痛点，情景其实就是一个故事，因此一个好的创意需要一个好的故事作为载体。
SURPRISE：情理之中，意料之外。
一个出人意料的戏剧化结果可以有效地激起用户的兴趣，从而吸引用户的关注。比如在突出相机远摄变焦功能时，“在高楼中抓拍到蜘蛛侠”是否要比单纯的焦距倍数对比图要有趣得多？
创意方案
我们来看看具体案例。
① 美妆类创意方向
· 保湿补水
首先是一套关于护肤品的案例，主打保湿补水的功能。在业内常见的做法可能是在产品上浇点水，甚至直接放到水里面去，用的是非常简单粗暴的手法，那我们要怎么样围绕它来做创意呢？
根据【3S原则】，首先我们需要一个故事背景，其实就是讲清楚我们产品的卖点的是什么。
在这套广告里我们的“故事”其实就是表达产品补水效果的强大，且故事的结果必然是出人意料的，就是要让用户看到之后会惊呼：“诶，居然还能这样”。
于是我们想到了一个词——起死回生，用了这款产品能让你的肌肤起死回生；最后则是用最简单易懂的手法把我们的故事展现出来。
· 创意解读
把一个果干还原成它原本鲜嫩多汁的样子，并且利用1+1=2这种最简单的数学公式把果干（也就是使用前的状态）、产品、以及水果（使用后的样子）串联起来，让人一目了然。
② 手机类创意方向
做手机类的创意跟其他产品不太一样，因为手机是属于具有多种功能的产品类型，所以我们得考虑哪些功能会是用户更关注的。
在过程中我们挖掘了很多方向，比如有屏幕色彩、续航能力、摄影摄像、游戏性能等等，而我们选择的是各大手机厂商旗舰机型最着重的功能——摄影。
但摄影里面也有很多细分，有广角、远摄、微距、人像等等，因此我们会根据厂商机型本身的卖点来进行创意发散。
但摄影里面也有很多细分，有广角、远摄、微距、人像等等，因此我们会根据厂商机型本身的卖点来进行创意发散。
当中我们挑选了两款远摄变焦功能特别强大的机型，分别是OPPO Reno 10倍变焦版以及VIVO X30pro。另外还有一款具备超级微距功能的OPPO Find X2。
A. 长焦距远摄创意
我们先来看一下远摄的案例。
一般来说官方的做法是直接把焦距放大的倍数效果图放出来，比如原图是怎样、放大10倍是怎样、20倍又是怎样。这样做虽然是非常直接有效的，但同时也会略显无趣，而我们要如何做这个创意？
这里我们采用了两种方案，第一种是“捕捉不可能”，意思是通过长焦我能抓拍到正常情况根本拍不到的东西，还记得【3S原则】里提到的意外结果的比喻吗？在高楼里抓拍到蜘蛛侠就是这种。
· 创意解读
而我们的方案是，我们的手机变焦的强大甚至能够抓拍到河对岸森林里的野人。那这是其中一种。
另外还有第二种方向，当然因为卖点同样是主打“超长变焦”，其实原理是一样的，但这种方向除了捕捉不可能以外，还结合环境联动的效果，看起来会更加有趣味性。我们一起来看看。
从方案里我们能看到正常拍出来是一个普通城市风景，当变焦到40倍时会发现“诶，大楼窗边好像有什么东西”。当变焦到最大60倍时会愕然发现，居然有个人拿着张纸叫你“买它”，而且纸上还有个箭头指着下面的手机。这种把画面内容超出边界，与环境互动的手法本身就比较特别，并且还蹭了个李佳琦的小热点，最终形成了化学反应，使得我们的广告更有趣味性。
其实在手法上用的是业内常用的倍数对比效果图，但当我们有一个戏剧化的结果时候，一切都会变得不一样起来。
B. 微距创意
我们再来看一下Find X2微距的案例。
同样官方直接展示微距摄影图，那根据 【3S原则】的“意外结果”，我们能不能通过拍摄微距，拍到一些不可能的奇妙事物呢？
· 创意解读
由于疫情的爆发，我们不管去哪里都得带上口罩，基于此我们把“疫情”、“口罩”这种热点考虑到我们的创意里，于是得到了这个方案：我们通过微距摄影拍到了带口罩的蚂蚁！
利用这种超现实的夸张结果可以让用户眼前一亮，同时结合了广告投放时正处于疫情这种特殊时期，可提醒用户外出记得带口罩。
C.5G及游戏性能创意
接下来还有关于5G及手机游戏性能的创意。
最近“5G”功能可谓手机界最大的热点，而我们也围绕了“5G”进行过创意。“5G”时代的到来预计会对人们的生活带来颠覆性的改变，但由于现今尚未普及，我们想要接地气的宣传“5G“功能的话还需要结合一些现有的用户痛点才行。
恰逢腾讯黑鲨游戏手机的上市，给了我们机会点，我们决定以5G+游戏性能为目标开展创意。
但现今手机对游戏性能的体现主要是硬件维度上的展示，但如果我们需要结合用户痛点来体现我们的创意，则需要更清楚游戏玩家有哪些痛点才行，那么用户在玩游戏时都会有哪些痛点呢？
我们根据简单的用户调研发现，玩家们最关注的痛点是“网速”、“性能”，由这两个因素引发卡网、卡顿甚至掉线或死机是最难以忍受的，尤其是在竞技、对抗类游戏中，稍微“卡”一小会都能影响比赛的胜负。
因此我们利用“卡网”这个痛点来开展创意，并根据 【3S原则】，给出了因卡网导致的意外结果。
· 创意解读
创意主要结合了当下流行的游戏“吃鸡”，画面上以“对面快把你打死了，你连武器都还没加载出来”来体现网络卡、手机卡导致的悲剧，配以文案“绝不输在加载中”来反向提醒用户，你需要一台性能强大、网络连接极好的手机。
D.一加手机创意系列
这套创意主要围绕着新品“一加8系列”手机来展开，我们对一加8手机提取了主要的两个核心卖点。一个是一加8的“轻量”（整机重量只有180g，为当时全网最轻的手机），以及一加8pro所具有的超强还原的“瞳孔屏”。
针对这两个卖点，我们根据【3S原则】延展出两套创意，分别是以轻量为主的“轻如无物”，以及以屏幕还原为主的“以假乱真”。
方案一：轻如无物
· 创意解读
既然主打轻量，那我们便把“轻”这个概念做到极致，让“轻”变得“更轻”，变得就像空气一样，完全感知不到它的重量，因此画面上展示的是拍照、玩游戏等日常的手机使用情景，但人物的手是空的，只保留使用手机时的姿势。
方案二：以假乱真
· 创意解读
对于“以假乱真”这块，我们也延伸出了两种不同的方向。其一是屏幕逼真显示的事物骗过了宠物，营造出一系列出其不意的有趣结果，如小狗无视了远处的飞盘，把手机叼回来给主人，以及猫猫被屏幕显示的鱼骗到，不停地舔屏；
至于其二，除了主打屏幕逼真显示的卖点以外，创意上还融合了一加8全网最轻手机（仅180g）的理念，把手机置换成扑克牌，或者用小尾指撑起手机，仿佛如蝴蝶般轻盈。
数据反馈
以上创意方案我们均通过ABtest得知点击率有很大提升。
补水专场：
创意广告点击率提升约2.87倍
OPPO Reno：
创意广告点击率提升约3.39倍
vivo X30 Pro：
创意广告点击率提升约3.87倍
OPPO Find X2：
创意广告点击率提升约3.13倍
腾讯黑鲨游戏手机：
创意广告点击率提升约4.49倍
一加8手机：
创意广告点击率提升约4.71倍
以上创意广告不仅点击率有大幅提升，对分期乐平台首页广告区域产出的GMV也带来了积极的提升作用，创意对GMV的拉升率约3.91%
One more thing?
然而，我们除了在平台首页banner应用创意以外，是否能有其他渠道，利用创意创造更大的收益呢？
答案当然是——有的！
· 品牌合作
有了创意，将使我们能与品牌方达成更深层次的合作。
我们可以利用创意来跟品牌方置换资源，比如在一加8系列广告中，我们通过创意为公司争取到品牌方的微博、微信、社区广告的投放及众多周边产品，通过投放我们的创意广告提升双方的品牌曝光，促进手机销售，实现双赢。
创意，能让我们的设计不再局限在自身平台，能以更多的维度创造更大的价值。
结语
项目启动至今，整个过程都由我们乐信设计团队的设计师主导并推动业务方，我们持续挖掘创意在互联网广告领域应用的可能性，持续跟进数据反馈，最终不仅在专业维度上产出了优秀的创意作品，更在商业上取得了优异的成果，我们证明了好的设计、好的创意是具备促进业务增长的商业价值。
文章来源：站酷 作者：乐信用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中，由于需要带一些新人了解 B 端知识， 而他们了解到的关于 B 端资料又非常少且都是碎片化的呈现。并且相对于 C 端的创新和趣味，会觉得 B 端设计显得更理性，视觉发挥空间相对有限，也会对 B 端设计的价值产生迷茫。因此，我尝试将自己 B 端经验提炼总结出来，一方面用于给团队成员做培训，另一方面也整理成文章，分享给其他同仁，希望互相学习。
作为刚接触 B 端的人，可能并没有很快的认识到自身的角色和其所具备的责任、技能和能创造的价值。也不清楚如何体现自身价值以及增加自身价值的方向。
我们先来看一下基本产品的设计流程
△ 基本产品设计流程
你常常听见的设计流程就是产品出原型，在原型和需求文档的基础上进行设计，这在与产品的配合中属于被执行者，被动的接收产品的需求，按照原型输出设计稿，这会使 B 端的设计变得无趣，也体现不出你的价值。
△ 你当前的流程
实际当中你可以是与产品互相成就、互相补位。与产品共同参与到对需求的挖掘、用户分析以及调研摸底当中，这会使你对项目的了解和后期的需求分析具有很大的帮助，能与产品一起组合考虑需要解决的根本问题是什么，我将采用何种设计方案去解决问题，这样才不会变成被动接收信息的工具人。
你要对所属项目的深入了解，看看是业务支撑类产品还是办公协同类产品或是商家端的产品等等，先了解是干什么的，在了解使用人的操作习惯和哪些方式对他们效率的提升有帮助。平常也要注意对通过用户发声的渠道收集他们对产品的讨论、建议和意见。便于我们对问题的积累和归类，使我们更容易站在全局的角度上思考问题，当启动相关问题的设计时我们能更快捷更深入的设计出用户需要的东西。另外帮助我们在与产品讨论一些迭代的体验优化提供数据支持。
B 端设计师的核心竞争力就是解决问题的能力，快速理解业务和处理业务的能力，只有拥有这些能力后，才可以去创造更多的价值。
B 端设计师可以在这几个地方锻炼自身的价值：
1. 从拆解入手：
我们通常在设计工作中会遇见小需求和大需求（包含多个产品模块小需求），小需求基本上是点对点需求，不需要细化拆解，这里就不多说了。
而大需求通常包含多个小需求，我们要采用化繁为简的方法——先规划后开工，拆解设计任务，从整体出发系统化的思考产品任务，在明确产品目标和设计目的后对需求进行拆分为多个阶段，再对每个阶段进行设计。在你拆分任务的时候你已经对未来的工作在心里有了建设，比如哪些地方是核心展示区域，我们需要花费的精力是多少，哪些数据图的展示形式会造成下游工作量的增加，是否对整体进度产生影响，哪些明细的展示是次要的花费精力最少，这里面也有可能会有团队协作的情况，这就要求大家有一致的目标、一致的规范。
△ 基于目标拆解需求
2. 从解决问题入手：
后台的搭建离不开一套强大的、统一的 UI 规范。规范是设计视觉统一的基础也是配合技术团队高效产出一致体验所必不可少的工具。
说到规范就得提一下组件了，组件的产生是为了避免我们重复的造轮子，并且对控件细节进行了把控。市面上虽然有已经成熟的组件，但是和自身的业务特点并不一定贴合，就需要我们基于 B 端产品特性和自身业务特点，以灵活性、复用性、全面性的设计原则来进行设计，例如我们就对头部筛选项的自定义设置，在纵向间距关系和横向间距关系上指出信息之间的距离和关联性之间的关系，更能灵活的选取我们想要的状态进行搭配，复用全局的使用。提升了研发团队的效率也解决了视觉一致性的细节问题，节约时间去做更有意义的事情。
△ 根据类型选择需要的头部筛选组件
对业务需求的 100%支持是设计的本职工作，那么我们的附加值就在“赋能“上，说起赋能我们就要说一下文章开头对思维的培养了，对思维的培养就是对需求的深挖，对问题的收集和思考，那么再进一步就要行动起来，主动进行用户调研，挖掘需求的突破点，找到更好的解决方案和更有价值的驱动点。那么我们在对不同项目赋能时也可采取此种方法进行思考，拆解任务跟进落地，提供规范与组件支撑，采集此流程中带来的价值，在项目结束后进行复盘总结，逐渐沉淀累积自身能力，逐步搭建自身的方法论在验证中成长。
这是一些我对自身价值寻找的一部分提炼，在工作当中我们也有很多其他方面的价值，这需要你自己去寻找，在寻找中增加自身价值，在设计中体现价值。变得越来越好。
文章来源：优设 作者：JellyDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
从6月分的全球开发者大会至今，大部分苹果用户都更新至iOS 14正式版系统。Widget成为新版本系统中讨论度最高的部分，知乎、小红书、公众号各个平台都能会看到关于桌面小组件的讨论以及各种关于小组件排版设计攻略。本文带你了解Widget的「前世今生」，除了很Android外，Widget这次为什么会成为这次iOS 14更新的重中之重，各大应用抢先适配iOS 14，抢占流量的新入口。
小部件最初来源于苹果电脑工程师Rose的一个插件工具—Konfabulator，用来更换桌面运行工具的皮肤和外观。2003年的Konfabulator是运行在苹果操作系统之上的，而其中的主运行文件叫做Widget。就像现在很多的新型产品一样，当年的Konfabulator一经发布，在美国引起众多人的关注，两位开发者也最终决定将这款工具命名为Widget。
一直到2004年11月Widget1.8版本正式对外发布，此时的Widget不再局限于某一平台，而是一款跨平台的产品。Windows和Mac用户可以根据自己的喜好开发或使用Widget工具，这只是这款工具的开始。
时间来到2008，当时的苹果已经推出了iOS 2。而Google联合多家厂商开发了安卓系统，当时Android的最大特色就是开放，开发者可以根据自己的喜好随意的修改底层文件，我们当时印象中多变的Android桌面使用的就是Widget程序。我们熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的随意设计导致后来的Android设计语言碎片化严重、交互感受相互割裂。一直持续到Google将物理设计体验带入屏幕的设计语言Material Design，利用具象化的设计语言规范各家的开发，遵守统一的设计语言和交互感受，由于篇幅限制就不详细展开去说。
Widget的定位其实相当于应用程序的扩展程序，使用的关键点在于用户可以在不打开应用、无需加载等待的情况下，在屏幕上快速获取信息甚至进行简单的操作。
Widget按应用可分为三种：Desktop Widget、WEB Widget以及Mobile Widget，目前讨论最多的iOS14更新的Widget其实是运行在移动设备上的Desktop Widget，又称为Mobile Widget。
注：Widget在刚进入中国的时候，没有通用的译名，由当时的中搜命名为“微件”。直到这次iOS 14才使用“小组件“的命名。
苹果多次强调Widget不是进入应用的另一种快捷方式，Widget是一种的信息展现方式，用来快速提供展示某些用户关心的应用程序数据。
Widget按照用户使用场景的不同，可以分为：信息小组件、集合小组件、控件小组件及混合小组件。而iOS 一直将主屏幕的控制放置于控制中心中进行交互，因此小组件类型的主要是信息小组件及集合小组件。
在人们的日常生活中有一类应用，无需进行操作，但应用需要经常性的更新信息。比如：天气、时钟等等。信息小部件将应用的关键性信息展示在小部件上，同时跟踪相关信息的变化。根据小部件的大小选择性的展示信息的密度。
将同一类型的众多元素展示在小部件内，常见的比如：新闻报道、系列图片或电子邮件等等。这类小部件有两个特点：1.信息集合；2.点击集合元素中的某一个元素可快速进入详情页进行浏览。集合小部件可进行垂直滚动，但在iPhone端由于交互限制，并不能进行此项操作。例如：微博、知乎。
控件小组件子除了显示常用的功能状态外，用户可直接在主屏幕进行简单的触发操作，不需要打开相关应用，类似相关应用的外部遥控器。例如：音乐类小部件，用户可以在当前小部件上进行简单的暂停、切换曲目等操作。而iOS系统传统的“控制中心”包括大部分的手机操作部分，因此iOS 14的小组件还是以展示信息为主。
实际上更多的小部件是同时具备以上两个到三个特性的混合小部件。比如：音乐类小部件，不仅可以进行简单的交互，同时也展示了当前播放音乐的基本数据。
苹果作为全球化的顶级手机制作商，一直追求通用的设计语言。设计规范包括：完整性、一致性、直接操作、反馈、隐喻，用户控制等几个设计原则。苹果有别于其他手机系统的封闭式系统，作为一个习惯于为用户做决定的父系公司，虽然这次Widget的跟新被看做是苹果对于之前控制的减少，但在iOS 14关于Widget的官方设计指南中，也有明确的关于Widget尺寸的限制、卡片式的圆角半径的限制、展示内容形式限制、设计交互的限制。
iOS桌面小组件的内容虽然可以通过开发定制，但在手机桌面仍然保留规范的视觉规则。
Android小部件之前虽然也有限制minHeight和minWidth的大小属性，但却可以通过左右上下拉伸大小，调整小部件信息展示内容的多少，因此大小其实是不受控制的。
在iOS 14这次更新的小部件，同一应用限制只提供3种尺寸2x2、2x4、4x4。
小组件的核心功能是让用户无需进入app便可获得信息，即少量但即时、有用且高度相关的信息。因此针对不同作用的应用需要先进行展示信息的梳理整合，明确小部件的核心目标。
2x2小尺寸的小部件类似动态图标，仅显示当前当地的天气，并可以打开应用。
2x4中等尺寸以及4x4大尺寸的小部件，则可以在2x2的基础上额外展示更丰富的信息，并且可以与用户进行交互。
同时为了确保所有小部件的圆角看起来都是一样的，要求所有小部件采用SwiftUI容器应用正确的角半径。相关开发文档ContainerRelativeShape
Android手机桌面的widget可以随意的放置在任何位置。而iOS的小部件和之前的所有图标一样，仍然要紧贴其他应用吸附在屏幕的顶端，不能居住只能靠边放置。
当在同一区域希望有多个小组件进行展示时，可以使用智能堆栈功能。根据不同的使用场景，通过上下滑动进行切换。Siri会根据时间的变化，显示不同的小组件内容。
苹果从iOS7开始借鉴了微软以及谷歌的设计语言，减少视觉装饰、抛弃了拟物化的设计风格，尽量以内容为核心，在这次的iOS小部件也对内容展示进行了限制。
聚焦内容目标点。小部件的关键点在让用户易于浏览，所以需要前期进行设计目标的梳理，仅展示少量的信息，专注于程序的某一部分内容。
显示内容与大小的关联性。创建不同尺寸的小部件时，不应该只是简单的扩大小部件的大小，而应该是在大尺寸时考虑展示更多内容，更详细的可视化效果，围绕基本信息的基础上修改表现形式，进行优化和调整。
提供真正有用的信息。小部件的意义在可以在主屏幕立即为用户提供有意思的内容，而不是像桌面图标一样成为另一种快捷打开方式。
保持展示内容的更新。小组件的展示数据需要不断的更新，否则无法吸引用户的注意。
寻找应用的特殊性。例如日历小组件，可以针对特定的时间和事件进行独特的视觉处理。
合理的设置选项。长按小组件会出现“编辑小组件”的选项，可以对组件的展示内容做分层或重要程度展示。例如：天气、时间切换城市的定位。网易云音乐“定制我的云音乐小组件”切换“每日音乐推荐、我喜欢的音乐、私人FM、歌单推荐、私人雷达”的顺序。
避免在小组件中加入过多的交互元素。避免过多的目标，以至于用户无法点击所需的目标。根据内容小尺寸，设置一个点击元素便可，中大尺寸的小组件，可设置多个点击元素。如中等尺寸的微博，可以通过点击任意一条热点，查看热点内容。
仅支持点击，不具备垂直滑动。在Android的集合类小部件除了基础的点击交互外，支持部件内信息的垂直滑动，但在iOS系统中的小部件不具备垂直滑动的操作方式，应该是苹果考虑到小部件在左划的homescreen，可以无限堆叠小部件，容易引起交互操作的冲突。唯一的交互方式就是点击打开应用。
可以看到iOS 14的widget没有其他交互方式，只能通过点击唤醒应用或某条资讯的详情页。苹果在保证一贯简单明了的用户体验外，不建议应用商设计过于复杂的样式来呈现内容，尽可能的减少用户电池、网络方面的消耗。
weight设计系统内容常见布局形式，可以作为设计小组件时的参考。
由于苹果本身自带的话题属性，在2020年6月22日第一次线上开发者大会—WWDC20发布的widget，到iOS14正式版上线期间，国内外热度一直高居不下，首先各家应用厂商、个人设计开发师都推出自己对widget适配的产品；小红书、知乎、微博等公众流量平台的个大私欲流量博主基于产品的适配推出各种风格主屏幕的应用攻略，widget迅速成为巨大的流量入口。
从6月分的开发者大会到正式版上线，苹果在自家的应用App store的Today专题、iOS 14精选App对widget进行了针对性的推荐，当搜索“小组件”等关键词时还会出现“超实用的小组件”专题推荐。
基于苹果用户的巨大市场，App能够获得苹果的推荐意味着大量有效曝光以及话题热度，此时很大一部分应用，根据产品特点，抢先适配小组件功能，获得苹果推荐，抢占一波流量。
从9月份开始，color Widgets、倒数日、Widgetsmith、我的天气等多款以时钟、计时、日历、天气功能的小组件应用多次轮番登上App Store应用免费榜第一。（数据来自七麦数据）
并且直到现在依然维持相对稳定排名的高度，及高下载量。
这些数据一方面不仅因为用户在知乎、小红书、抖音对于如于如何使用小组件的功能、如何更定制化的设计布局自己桌面的讨论，还在于各大社交平台应势对于小组件话题的推送，使苹果的小组件获的了更多的关注度，与用户关注度。
而有些设计师看到这其中的巨大流量赚的盆满钵满。9月20日设计师@Traf在自己的社交媒体账号发布了自己设计的iOS 14主屏幕，立刻获得大量用户的喜欢。Traf转手将自己的这套图标以28美元的价格出售，开始就获得了3626人的支持（有兴趣的小伙伴可以点击https://icons.tr.af/ 购买），六天就赚了10 万美元，有人要去画图标了吗？
苹果对widget的特性定义为：简单明了（Glanceable）、恰当展示（Relevant）、个性化定制（Personalized）。阿里和京东于9月中旬基于对iOS新特性widget的理解与限制，分别对自家产品手淘和京东进行了适配设计。
京东根据iOS 14 widget提炼出的关键词：简洁、高效、内容化。整合自己出自己品牌的设计三大原则：个性、信息、情景。在设计原则的基础上，结合京东的业务指标和用户场景，制定出了京东widget的四个方向：物流（工具）、直播（互动）、店铺（私域）、秒杀（营销）。
物流——提升获取信息的效率。及时查看物流通知，跟踪物流进度，提升用户获取信息的效率
店铺——建立用户与产品间的连接。利用widget的展示功能，在桌面推出店铺的新品，方便用户随时随地关注不同店铺的新品。
秒杀——聚焦首页获取核心信息。为用户实时提供秒杀商品，红包，配合京东的签到形式，承载京东营销矩阵的业务背景。
直播——用户互动。推荐热门、感兴趣的直播，预告明星直播，增加用户与用户、用户与主播间的互动。
手淘根据数据得出：用户虽然平均每天进入屏幕的次数超过90次，但停留的总时长不过几分钟。结合一闪而过的快速切换应用的主屏幕里，设计交互复杂的应用界面并不能契合用户的需求。得出设计要素：一目了然、高相关性、个性化。
所见即所得的物流——将查看物流信息之前需要“打开手淘、点击我的、进入订单、查看物流”4步操作，简化至前台widget透出，用户轻松掌握包裹的一举一动。
强大的订单管理——基于手淘人群60%的目标在订单模式，快速启动功能。以及对一些必要widget做了深色模式的颜色适配。
便捷的互动权益提醒——针对淘宝人生、淘金币、芭芭农场等互动专区，可在widget组件上时效了解自己互动权益的完成状态。
千人千面内容定制——基于商品、社区、直播、店铺等手淘的广泛产品，通过多元的方法将前台的展示权利交给用户。例如：关注的店铺，关注的直播内容，爱豆的时装秀。
京东立足于自身的业务指标和用户场景制定京东widget的四个方向，手淘根据数据导向一目了然的用户需求。但由于京东与手淘都是购物应用，结合widget信息展示的特点，最终的聚焦点都是在于信息的获取效率及提醒。使用户在不打开应用的前提下，满足不同的场景需求。但淘宝常年的游戏营销，淘宝人生、淘金币、芭芭农场的互动场景使他的业务场景化比京东更游戏化，在视觉方面也更丰富。
推荐阅读：
下面推荐几款我自己觉得非常不错的小组件。
开发者David Smith发布的一款用户可以自己创建定制天气、日期、天文等widget的应用。该应用采用了直观的图形界面话，精确调整每个widget包括字体、颜色、背景色等的显示信息和样式。支持大、中、小三个尺寸，与iOS 14的Widget 大小是完整匹配。
与其他小组件不同的是，Widgetsmith可以根据时间自动变换小组件，在编辑小组件时选择“Add a Timed Widget”，然后在表盘上划分时间，并添加对应的小组件。放置在桌面的小组件就会随着时间变化成相对的画面。
这款应用与其他天气类应用不同的地方在于，它提供了9种的widget样式，17个主题，满足用户各种风格的需求。除了常规的天气预报外，还有实时天气，空气质量、世界天气、生活指数可供选择这款应用与其他天气类应用不同的地方在于，它提供了9种的widget样式，17个主题，满足用户各种风格的需求。除了常规的天气预报外，还有实时天气，空气质量、世界天气、生活指数可供选择。
我的天气同一家开发团队的另一款小组件倒数日，是一款可以直接在屏幕上看到不同主题倒数天数的小组件，能根据自己心情更换背景。此外还可以设置日历小组件和时钟小组件。
西窗炷采用白底黑字简约的界面风格，每天推送一首诗词，点击便可阅读全文。也可以通过编辑小组件选择自己想看朝代、体裁和显示字体。
没有买过豆瓣日历的举手，买完心心念念觉得自己会每天看一部电影，em……然而并没有。豆瓣的小部件除了两种电影日历的样式外，实时热门书影音排行的界面也能让用户不用打开应用，便可获得及时的影音信息，点击进入详情页面。
当然也有网友做出了史上最强小组件，以及其他有趣的组件
目前每个手机用户主屏幕上都会有越来越多的app，我们的衣食住行娱乐都需要各种app的协助完成，但随着app的增长，用户会将各种app按照种类、类型进行划分，靠线索记忆或肌肉记忆，熟悉app的位置，但随着时间的推移，我们可能又会有各种新的应用需要下载使用。重复分类、查找、点击进入的行为，其实是很浪费时间的步骤。
首先我将之前的主屏幕全部隐藏，只留一个主屏幕页面。数据显示日常对手机的操作交互中，有50%左右的通过左手/右手单手握持操作，而我本人习惯左手单手握持操作。操作热区如下图中所示的从左到右从下到上。
其中顶部区域及右边区域放置，豆瓣、西窗烛、我的天气等展示类小组件；Todoist、Thing3、倒数日等任务管理类小组件；知乎、微博、头条等咨询类小组件则可以放置于画面中间，不妨碍点击某条信息。也可以使用智能堆放功能，将多种小组件放置同一区域，通过上下滑动进行切换。最后放置自己平时使用频繁的应用图标即可，使用频率也是按从左向右的顺序。大小方面
苹果的app资源库会默认经常使用应用可以直接点击进入，在使用其他app不常用的app时，可以通过上方的查找区域进行搜索。
目前已经使用1个月左右，之前也试过各种好看的小部件，最后还是以效率为出发点，将大部分的app放置在app资源库中。
在我们的认知中，手机桌面更像是一个应用程序的目录。我们不会过多的在主屏幕停留，需要借助启动图标点击进入应用进行操作，用户打开某个桌面应用，在应用内进行操作；另一方面在当前app应用越来越多的现在，高频应用与低频应用混合，常常在使用时，陷入查找应用中，降低了信息获取的效率。小部件的使用，使得用户虽然还是不能在主屏幕界面进行数据处理，但小部件作为应用程序的扩展程序，用户却可以在不打开应用、无需加载等待的情况下，在主屏幕上快速获取信息甚至进行简单的操作，不得不说是在改变用户长久以来的使用习惯。
无论是Google从碎片的Android系统转向物理设计体验的Material Design设计语言来规范各家的开发。还是最早提出“One productfamily，One platform，One store”希望将手指与手机触摸交互与鼠标指针交互的打通，保证多设备的一致性，但最后却被自己各种花样作死的微软磁铁设计。各家都在尝试统一设计语言，以及交互感受。而这次iOS 14的，我们已经看到了苹果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的联动与融合，而小部件就是最重要的一步。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“今天吃什么啊？”
“不知道啊，看看大众点评，哪家店比较靠前”
“一会去看什么电影？”
“我看豆瓣上，这部片子评分特别高，我们去看这个吧”
当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，面对的选择越多却越不知道如何做决定，或者当下做了决定觉会一直思考做的这个决定是不是最好的，选择困难变成了大众病。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？排行榜仅仅是用来降低用户的选择成本，为什么商家对排行榜也趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能都不知道，我们的生活正在被各种排行榜所支配！
排行榜的本质是一个没有感情的信息筛选机制，某一相关的同类事物之间通过比较，反映同类事物客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应降低用户自己的选择成本，准备快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量和平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名。那这一切背后的原理是什么？
一个完整的排行榜需要平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。
在没有各种应用前，当我们决定购买什么东西或去哪家消费，前期需要花费大量的人力、物力，搜集相关的信息进行整理集合后，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。
选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助降低选择成本的同时，也会影响这用户的最终选择，在接下来的平台侧方面会有详细的分析）
比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要找到我身边的耳机发烧友或数码电子方面方面的内行人，收集信息建立备选集，但由于京东在电子设备方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东完成了前期的信息搜集及备选集建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。
在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。
无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了相通的谈资。
在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感，满足自己的社交需求。
过年期间各家app纷纷推出自己的用户年度报告总结榜，不知道你有没有参与到其中，并分享到自己的朋友圈。在我们的平常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要了解自身在大数据下的自我确认，通过各种各样的榜单，判断自身的能力、情绪、价值等，来达到自我认同，否则就会感到焦虑不安。
加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解“社会是舞台，人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。
我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，一起参与讨论。
无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？
对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下。
从我们记事起，我们对世界的认识来自自己的父母或老师，而这些教导我们什么是对、错，对当时的我们来说是权威的化身。长大后我们对于权威的认可更倾向于某一领域的专家，比如：医生、律师、教授等。认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究问题的工作，做出更轻松的决定，虽然不一定是正确的。
搜索我们会第一时间想到百度，影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？
平台权威性意味着说服力和影响力，在减轻用户的决策压力的同时，影响用户做出平台所需的决策方向；
每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度
排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值
平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。
在平台完成建立权威性开始利用排行榜进行商业变现时，比如百度、58的竞价排名，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。
上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。
由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。
而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。
排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。
对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。
不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。
当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。
面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。
在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。
在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。
知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。
而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。
首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。
其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。
用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）
当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。
没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。
在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。
平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。
朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。
不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。
相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。
排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。
好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。
当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。
有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。
得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。
排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。
纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。
相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。
上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）
每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。
人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。
因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。
说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播全站榜中有看到）
榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；
信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。
排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。
文章来源：站酷 作者：9号自习室
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
空间感是指艺术形象通过一定手法引起的类似现实空间的审美感受。包括作品直接表现的空间和作品具体形象之外的使人想象到的空间。这种空间感，一定程度上决定着版面的视觉效果与美感。巧妙的利用空间，可以集中观众的注意力，丰富的层次感使作品更具观赏性，同时又可以让作品主次分明，更有效的传达信息。
通过对设计作品的参考分析，设计师深海总结了营造空间感的方法，大致分为以下九个类别，希望这篇文章能对大家有所帮助。
“遮前掩后”的意思是：通过画面设计元素之间的遮挡，交代空间关系，从而产生一定的空间感。这种形式可能空间感较弱，但易于表达，可以使文字和图片更好的结合。
设计时为了保证信息的传达，普遍会选择将文字信息完整的展示出来。其实像上面两个案例一样，适当使用遮挡关系，反而能让文字与图像结合的更好。
人的大脑有“惯性阅读”的能力，这使得即使文字被遮挡，也不会影响太多识别性。
利用蒙版，然后局部破出，这也是营造空间感常用的手法。本质上，这也属于使用遮挡关系的一种方式，这种效果空间感更强，让观众有一种打破次元壁的感觉。
使用这种样式时需要注意：用作蒙版的图形或文字，必须简洁，并且识别性足够高，否则会影响信息的传达。
“以小见大”指的是：利用近大远小、近疏远密的基本透视原理，来营造空间感的一种方式。
在平面设计中，面积大的元素使我们感觉更近，面积小的感觉更远，即使是单一的设计元素，只要遵循基本的透视原理，也能塑造出空间感。
从这两个案例可以看出，元素的面积大小变化越大，空间的纵深感就越强；通过控制元素之间的位置关系，可以使空间看起来平整或者曲折，表现力非常丰富。
“山重水复”是“以小见大”的进阶版，同样是利用近大远小的物理规律，塑造空间感。不同的是，通过元素的无限重复，会让空间感更强，对排版的把控能力也要求更高一些。
重复的元素会让画面有很强的冲击力，强烈的空间感让观众仿佛在无限的跌落。使用这种版式一定要注意近疏远密的空间关系，否则会降低画面的可信度。
“横峰侧岭”是指：通过变形，改变元素的透视，在整个版面中塑造多个平面，以此来增强作品的空间感。
将同一平面的元素对齐，创造出虚拟的边界线，借助这些参考线来塑造不同方向的平面。如果觉得空间感不够强烈，可以借助辅助线加强透视。使用这种形式的重点在于，要注意阅读顺序和空间平面之间的关系，不要为了画面，一味地堆砌空间，信息的传达永远都是最重要的。
最近非常流行的立体效果，因为空间感强，很容易出效果，深受设计师们喜爱。其实这种类型也是通过透视和多个平面来塑造空间感，制作时大多需要3D软件进行辅助，才能实现如此真实的透视效果。
“冰厚三尺”指的是通过给元素添加厚度，增强元素的立体感，从而提升空间感。这是一种非常简单粗暴的方式，立体化后的元素，可以展现更多的角度，使排版方式更加多变，画面也更加灵动。
最常见的2.5D风格，去除了透视感，依靠立体元素来营造空间感，可以使整个版面更加稳定和谐。有些设计师还会引入矛盾空间，让设计作品看起来更有趣味性，吸引用户目光。
“潜踪隐迹”的意思是：通过改变透明度，模拟雾中的物体，距离越远的元素可见度越低，从而营造出空间感。
在中国传统国画中，就会通过控制水墨的浓淡，来展现画面的空间感。因此这种方法很适合中国风的设计，让整个作品富有神秘、幽寂的气质。
“雾里看花”和“潜踪隐迹”很相似，通过虚实的变化，模拟现实世界中的景深效果，从而塑造空间感。这种方法是最常见的，也是最出效果的，在塑造空间感的同时，还可以强调主体信息。
在对版面元素进行模糊处理的时候，要考虑元素与焦点的位置关系：距离焦点越远，模糊程度越高，普遍情况下，会将最主要的视觉元素作为焦点，保证信息的准确传达。
有光的地方就存在影子，投影本就是空间感的一种直接反应，“浮光掠影”就是利用光影的变化，在平面中营造视觉上的空间感。
光影的变化非常丰富，因此，光影的表现方式也是五花八门。殊途同归的是，所有的光影都是为空间感服务的，所以大多数情况下，都要遵循现实世界中的规律，确定一个光源，保证整个画面的光影统一。
随着软件功能越来越强大，重现现实世界越来越容易。“镜花水月”指的就是：参考现实世界的折射、反射等自然现象，在平面空间塑造空间感。这种方式看起来质感很强，效果也非常酷炫。
需要注意的是：在设计之前一定要考虑好效果与内容的关系，一味的堆加效果，除了炫技毫无价值。
文章来源：站酷 作者：设计师深海
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
数据可视化即数据的图形表示，旨在以更易于掌握和理解的有效方式传达大量海量数据。从某种意义上说，数据可视化是原始数据和图形元素之间的映射，它决定了这些元素的属性如何变化。可视化通常是通过使用图表，折线或点，条形图和地图来进行的。
Data Viz是描述性统计的一个分支，但它需要设计，计算机和统计技能。
美学和功能齐头并进，以直观的方式传达复杂的统计信息。
Data Viz工具和技术对于做出以数据为依据的决策至关重要。
在形式和功能之间取得了很好的平衡。
每个STEM领域都将从了解数据中受益。
Jorge Rey的化石燃料Dataviz
如果我们能看到它，我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调，但这是事实，可视化更加有效和全面。
在某种程度上，我们可以说数据Viz是讲故事的一种形式，目的是帮助我们根据数据做出决策。这些数据可能包括：
追踪销售
识别趋势
识别变化
监控目标
监测结果
合并数据
秘密7 –塞尔吉奥·费尔南德斯（Sergio Fernandez）提出离婚可视化的理由
数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时，这也可以帮助您的客户或观看者理解它们，而不会迷失在混乱的数字中。
话虽如此，Data Viz适用于：
年度报告
简报
社交媒体微叙事
信息手册
研究
趋势贩运
SciViz
烛台图，用于财务分析
确定路线
可以看到数据可视化的常见情况是在销售和营销，医疗保健，科学，金融，政治和物流中。
娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金统计信息图
简短的答案：决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说，它是确定以下情况的宝贵工具。
识别变量关系之间的相关性。
获得有关受众行为的市场见解。
确定价值与风险指标。
随时间监视趋势。
通过频率检查速率和潜力。
应对变化的能力。
太空垃圾-BBC科学焦点，作者：Federica Fragapane
您可能已经猜到了，Data Viz不仅仅是简单的饼图和图形，而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。
地图可视化是一种很好的方法，可以分析和显示与地理位置相关的信息，并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D（静态或动态），因此可以使用多种组合来创建Data Viz地图。
COVID-19支出数据可视化POGO，George Railean
但是，最常见的是：
区域地图：显示国家，城市或地区的经典地图。对于每个区域中的不同特征，它们通常以不同的颜色表示数据。
线图：它们通常包含空间和时间，由于对特定场景进行了分析，因此通常是路线选择的理想选择，尤其是该地区的驾车或出租车路线。
点地图：这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。
热图：它们根据特定属性指示地理区域的权重。例如，热图可以按区域分布感染者的饱和度。
图表以图形，图表和表格的形式显示数据。由于图形确实是图表的子类别，因此它们经常与图形混淆。但是，两者之间的差别很小：图形显示数据组之间的数学关系，并且仅是表示数据的统计图方法之一。
图表数据可视化，作者：Madeline VanRemmen
顺便说一句，让我们谈谈数据可视化中最基本的图表类型。
条状图
他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择，并遵循不超过三个变量的趋势，否则，条形变得混乱且难以理解。
饼状图
这些熟悉的圆形图按部分划分数据。切片越大，部分越大。它们非常适合描述整体的各个部分，它们的总和必须始终为100％。当您需要显示一段时间内的数据发展或缺少任何部分的价值时，请避免使用饼图。甜甜圈图与饼图具有相同的用途。
线形图
他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。
散点图
这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如，如果您的x轴包含有关汽车价格的信息，而y轴包含有关薪水的信息，则正向或负向关系将告诉您某人的汽车所反映的薪水。
表格
与我们刚刚讨论过的图表不同，表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现，并且旨在显示应该阅读而不是可视化的特定数值数据时，它们是理想的选择。
数据可视化| Aishwarya Anand Singh的养蜂与否
例如，图表非常适合显示特定区域内一段时间内特定疾病的数据，但是当您还需要了解具体原因（例如原因，结果，复发，治疗时间和治疗方法）时，最好使用表格。
它们并没有什么不同，因为它们在视觉上都代表数据。通常，您搜索信息图表并找到标题为“数据可视化”的图像，反之亦然。但是，在许多情况下，这些标题都不会引起误解。这是为什么？
数据可视化仅由一个元素组成。它可以是地图，图表或表格。另一方面，信息图表通常包含多个Data Viz元素。
与可能简单或极其复杂且繁重的数据可视化不同，信息图表简单易行，并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人，后者通常也是可以理解的。
有趣的是，数据Viz不提供叙述和结论，而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如，数据可视化地图的标题可能是“按区域划分的空气污染饱和度”，而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。
数据可视化可以在Excel中进行，也可以使用其他自动生成设计的工具，除非将其设置为演示或发布。但是，信息图表的美学非常重要，其设计必须吸引更广泛的受众。
在交互方面，数据可视化通常提供交互式图表，尤其是在线形式的图表。另一方面，信息图表很少互动，通常是静态图像。
Skype通过可视化.com进行可视化
该过程自然类似于创建信息图表，并且围绕了解您的数据和受众。更准确地说，这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。
准备工作已经完成了一半。在甚至开始可视化数据之前，必须确保您了解该数据的最后细节。
不可否认的是，了解您的数据查看对象是另一个重要部分，因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁？他们如何处理视觉数据？只需给他们一张饼图就足够了，否则您将需要更深入的可视化报告？
您正在可视化什么样的信息，它能反映出您的目标吗？
最后，考虑要使用多少数据并加以考虑。
图片来自Brodie Vissers
在上一节中，我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人，需要考虑的因素很少。
图表中将有多少个变量？
您将为每个变量放置几项？
值之间的关系是什么（时间段，比较，分布等）
话虽如此，如果您需要展示整个项目的各个部分，那么饼图将是理想的选择。例如，您可以使用它来展示特定产品的市场份额的百分比。但是，饼图不适用于时间范围内的分布，比较和跟踪趋势。在这些情况下，条形图，散点图，s和折线图更为有效。
另一个示例是如何在图表中使用时间。使用水平轴会更准确，因为时间应该从左到右。它在视觉上更直观。
Oberhaeuser的MagnaGlobal广告市场海报
首先删除所有不会增加价值并且基本上是图表多余的数据。有时，您必须处理大量数据，这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫，将您的信息分成两个或多个图表。如果这对您不起作用，则可以使用突出显示或使用更合适的内容更改整个图表类型。
提示：使用条形图和柱形图进行比较时，请按值（而不是字母顺序）以升序或降序对信息进行排序。
图片由萨曼莎·赫尔利（Samantha Hurley）
在每种可视化形式中，颜色都是您最好的朋友和最强大的工具。它们产生对比，重音，强调并直观地引导眼睛。即使在这里，色彩理论也很重要。
设计图表时，请确保不要使用超过5或6种颜色。除此之外，任何其他操作都将使您的图表不堪重负，并且难以为观众阅读。但是，您可以使用颜色强度来发挥自己的优势。例如，当您在不同的时间段内比较同一概念时，可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。
选择颜色时要考虑的事项：
不同类别的颜色不同。
系列中所有图表的采用一致调色板，方便以后将进行比较。
最好使用对色盲友好的调色板。
Jamie Kettle可视化塑料废物污染数据
当您想成为数据可视化设计中的佼佼者时，请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作，并了解哪种方法最适合您需要实现的每种数据。
下图这个Twitter帐户数据可视化是一个很好的例子。同时，我们还将精选一些令人称赞的示例，这些示例将使您有信心开始为数据创建视觉效果。
lilit Hayrapetyan创作的大数据纪录片的人脸
作为另一种艺术形式，Data Viz为一些令人惊叹的精心设计的图表提供了沃土，这些图表证明了数据也可以是美丽的。现在，让我们来看看一些例子。
我们从孟小伟的个人项目开始，介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大，但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作，并且在信息图表中看起来很棒。
我的黑暗之魂3孟小伟在播放数据
凯蒂·西尔弗（Katie Silver）根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点，例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。
凯蒂·西尔弗（Katie Silver）的100部最佳电影数据可视化
费德里卡·弗拉加帕内（Federica Fragapane）显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列，并根据凶杀率在水平轴上排序。
这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图，其中包含行业细分以及对就业贡献的散点图。
视角杂志–家族企业by Valerio Pellegrini
该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置，并按小行星的类型进行了着色。
埃莉诺·卢兹（Eleanor Lutz）的太阳系轨道图
KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成，目的是可视化对移民的引用，并对用词选择和上下文所暗含的价值判断进行颜色编码。
标题语义学KatjaFlükiger
该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。
月亮与地震艾西瓦娅·阿南德·辛格（Aishwarya Anand Singh）
可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。
有线英国–由Nanosats拍摄的黎明（Valerio Pellegrini）
数据可视化不仅是一种科学形式，而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据，并开始根据该数据做出决策。为了使您的图表高效且易于阅读，这一切都与了解您的数据和受众有关。这样，您就可以选择正确的图表类型，并使用可视化技术来发挥自己的优势。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
接下来为大家分享一下我收集到的案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--网站建设UI设计--
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
更多精彩文章：
近日在短视频上有关「高德 AR 导航」的相关视频成为爆款，得到了广大用户的欢迎和点赞，下面就和大家一起分享，高德 AR 导航从无到有的体验设计原则和背后思考。
△ 高德 AR 导航效果
各大公司入局 AR 现实增强领域，现实增强技术也逐渐趋于成熟，随着对 AR 应用领域深入探索，图像识别数据的积累以及 AR 导航体验探索变得非常重要。高德地图基于大量的地理信息数据和精准的导航能力，AR 实景导航正式发布，让驾驶员能够身临其境的感受增强现实带来的驾驶乐趣，那么在复杂的环境中又如何把握体验设计？与界面设计又有什么不同？一直是我们在思考的课题。
我们先从用户反馈、竞品分析、AR 导航载体、安全性、环境感知、设计语言 6 个层面切入分析，把探索的方案落地到 AR 引擎中实验，再到高德地图车机版上线验证，最后服务于高德 ToB 车企出货，带来实际收益。
作为设计师，习惯了用屏幕的二维空间去思考信息效率的最大化，但是把体验和设计放在三维空间中，会受到环境、光线、安全性、场景、人、车、路等相互影响。
1. 环境影响设计
环境的变化影响分为自然环境、道路环境、驾驶环境三类，不同的天气、道路等级、驾驶因素都会对驾驶员的感受、反应、状态产生影响，所以在 AR 的空间体验设计中，这些影响需要充分考虑其中。
当考虑完环境因素后，还应该去真实的驾驶情景中分析信息呈现的权重，比如车辆在行驶中前方移动的物体一定比车辆静止时看到移动物体的权重要高，那么在设计上，需要明确信息层级和显示时机及策略，让驾驶员在行驶中能够快速获取，且正常驾驶不受其影响。
2. 空间体验设计
AR 空间体验设计最大的难点在于：在界面设计中，我们只关注信息层级、颜色、大小、动态等，都是在二维平面中去思考信息效率的最大化，但是在 AR 的三维空间中，除上述我们还需关注安全性、空间性、以及如果让驾驶员快速获取增强信息来辅助他进行平稳驾驶。从下图比较看，在界面中告诉我前方有什么路况信息远远不如直接看的效率快。
AR 导航的视域不仅要考虑水平、垂直视野中的布局，划定舒适区域，还要考虑距离对于信息呈现的感受。
经过以上对于布局的规划，我们可以得到以下布局关系。
3. 颜色及视觉权重
在颜色的选取上，让整体的配色符合真实世界的认知，在我国道路交通中对于颜色界定，路牌中的蓝绿色为不会立即影响驾驶者行为的信息，红色、橙色、黄色用户告知驾驶员暂时性和永久性的危险，所以我们可以得出以下颜色体系。
在 AR 导航设计中，最大的不同在于，你所有的设计都需要跟据实现后的策略+真实环境路测去反复调整，检验设计逻辑是否符合驾驶员的真实感知，经过了大量路测及实验才能敲定。
1. 案例分析
我们尝试用一个案例展开来诉说实际的道路环境远比纸面上的分析要复杂的多。
在司机正常驾驶中，既为用户提供了红绿灯检测，又给用户提供了车道线提示，单独看红绿灯识别及车道线提醒都没有问题，但在十字路口场景可以发现，红绿灯和车道线重合，带来了信息叠压的问题，经过分析发现：
针对上述的红绿灯和车道线重合问题，可以从两个层面分析解决。
所以迅速采取了方案 2 的方式，让红绿灯和车道线差异策略时段显示，规避了该问题，上述问题为简单举例，在实际现实空间场景时，需要注意的是现实物体识别是否遮挡驾驶视线或者和 AR 常驻信息重叠。
△ 压线效果
△ 场景服务卡片
△ 斑马线提醒及行人预警
我们试想下，如果在转弯情况下，我们展示了很多行人 ADAS（预警系统）提醒，是否影响了正常驾驶？在每个元素出现和消失的时候，需要充分的考虑到它对其他元素的影响，是否符合 AR 空间设计体系和权重策略，差异化显示为更优解。
△ 标注：本篇文章内容效果在后续版本中陆续上线
抖音、快手、snapchat 等国内外社交平台上的 AR 滤镜应用大多简单有趣，比如给你的脸上实时画个妆，拍边时四周漂浮一些可爱的小动物，非常符合现代人的使用心态。但是 AR 在地图中的应用（如步行导航、驾车导航) , 也应该考虑如何利用 AR 的特性让地图中的数据清晰易懂、与人的互动也变得更轻松随意。
常规使用导航时，随着地图放大，可以看到更多的道路细节（车道数量，路边停车位，斑马线，交通事故等）。但是开车时需要时刻和真实世界做对应。受限于屏幕大小，这些信息的展示总是有限的。当我们用上了 AR，这些信息就能直接展示在真实世界中的相应位置，不用费力去寻找。传统地图的方式也将被颠覆。
案例分析 1：放在道路上的虚拟路障
利用 AR 视觉效果进行更逼真的强警示作用，而不是导航路线上的一个简单标记。
案例分析 2：AR 导航商圈透出
开车到陌生城市时，结合 AR 地理位置标记，能清楚的知道所在商圈的信息。
2. AR 在出行领域的更多应用
随着城市建设路网越来越复杂，AR 在旅游景区的导览，多种交通工具混合出行的场景都能更好的发挥出价值。这也是今后我们探索的方向
文章来源：优设 作者：AlibabaDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com