用户体验是用户在使用产品或者服务中的所有的主观感受。因此我们设计的过程中要以用户为中心进行设计，不能单单为了设计一个产品而设计，只关注产品设计本身的功能性。
在生活中好的用户体验设计的产品让人使用舒适，而用户体验不好的设计往往让人很糟糕。
用户体验比较好的：比如我们坐地铁的过程中很准时，这就是好的用户体验；在吃海底捞时，看到好吃的西瓜，他们会给你打包，这就是好的用户体验。
用户体验比较不好的设计：比如在生活中有些插座设计，一个两孔一个三孔，只能一次插一个，很气人有没有，难道上下错位和间距拉大有这么难吗？再比如蚊香的设计，很容易断，每到夏天不断几个，都不好意思！
在产品设计中是否满足用户需求我们可以分为 3 个点来进行分析，主要是有用性；易用性；满意度。
有用性就是产品有用的设计功能，也是产品基础的设计原则。
对于有用性而言，我们在这个过程可以主要在三个方向进行把控，就是：基本需求；期望需求；兴奋需求。
基本型需求
基本型需求是用户必需需求，用户在产品中认为这是必需的功能，（这些基本需求是用户认为必备的，有了用户觉得是应该的，如果没有这些需求，那么用户在使用产品过程中间大部分会直接放弃，选择其他家产品）。
比如淘宝产品中的订单和商品功能就是基本型需求；微信中的聊天和通讯录就是基本型需求；QQ 音乐中的播放页、播放菜单就是基本需求。
期望型需求
基本型需求是用户意愿型需求，用户自己也不知道，但是期望获得的功能。（这类需求就没有基本需求那样必备，是产品中期望需求体验越多越好，用户越满意，反之用户满意度也会下降）。
这类需求是期望型需求，也是我们产品竞争力所在，因此往往人们在谈论哪个产品好不好，通常是期望需求和兴奋型需求。比如淘宝产品中能买到便宜产品，而且符合详情页中描述；比如微信产品中聊天语音/微信/视频，聊天更加方便；比如 qq 音乐中的曲目和歌单数量增加，用户就会很满意，这也是期望需求。
兴奋型需求
兴奋型需求是用户非常期望的需求。（这类需求满意度高，有这些兴奋型需求时即使不太完善，用户也会满意，做得非常好就会让用户兴奋；没有这些需求用户也不会表现得不满意）。
比如淘宝产品能够更多满足用户多样化的生活，各种生活服务提供给用户；商品评价页用户互动，方便用户可以熟悉产品好坏；比如微信产品中暗黑模式，满意希望黑暗模式体验的用户需求；比如 qq 音乐中单曲热评，让我们对歌曲背后的故事，歌友的心路有了了解互动。
此外兴奋性需求在产品中还有一些重要的点，比如微动效、情感化设计等等这些都可以让产品提升很大的用户体验，和宣传力度，因为用户在谈论产品好坏时候比较多的是说产品的兴奋型需求。
需求分析模型
需求分析工具 KANO 模型，主要是帮助我们直观的了解产品不用类型需求实现程度和用户满意度的对比，我们了解这些需求的时候，可以让我们更好的看到这些功能点有哪些影响力。
易用性就是产品好不好用，容易使用吗。同时我觉得在有用性上产品经理需要考虑得比较多一点，而易用性上就是我们 UI、UE 需要重点负责和掌握的东西。
对于易用性而言，我们可以主要在三个方向进行把控，就是：上手快 ；操作快；负担少。
上手快
上手快就是用户使用产品容易上手，没有啥学习成本。简单的意思就是让用户不怎么动脑去想就知道下一步我要做什么，用户操作满足自己的心智模型。
心智模式是指深植我们心中关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。并深受习惯思维、定势思维、已有知识的局限。简单理解就是在使用产品中满足我们对产品的认知思维。当然文中介绍的只是心智模型的很一小部分，主要是想让大家多去了解心智模型，更好地在以后的产品设计中运用它们。
比如淘宝的下单弹窗、微信的红包、QQ 音乐的音乐播放，都是用户容易上手，即使小白用户在使用时，根据它们简单的提示就可以操作，没有太多复杂选项，一目了然。
操作便捷
操作便捷就是用户在使用产品中操作效率高，没有太多干扰项目。（这类设计一般就是操作方便，尽可能地减少干扰项目，增加快捷入口等）。
比如淘宝产品中的物流信息，没有太多干扰直接出现在订单的头部位置，提高用户查看商品物流信息的操作效率，提升了用户体验。比如微信聊天中的发送图片功能，直接显示最近图片，快捷发送，提高用户发送图片的操作效率。比如 QQ 音乐的播放直接在首页出现，方便用户选歌切换，操作效率高。
负担少
负担少通常是减少记忆负担，不让用户累着，为用户分忧。
比如淘宝红包展示就是在我的页面里面直接显示；比如微信钱包余额直接在钱包按钮下方显示，不用进入三级页面；比如 qq 音乐自建歌单显示歌单数量，减少用户记忆负担。
满意度简单理解就是用户需求被满足后的愉悦感。它是相对的概念，就是用户需求和产品完成度之间的衡量。
对于满意度而言，在产品设计上有很多方面，今天我们简单讲一下两个方向的把控：视觉感官的刺激；奖励。
视觉感官刺激
视觉感官刺激主要是超乎用户想象的好看的视觉。而在 UI 设计中主要体现在动效设计、插画等等。
比如淘宝产品中的图标动效，趣味设计，提升用户对产品的情感交流。比如微信聊天中的表情包功能，简单的动作表达用户的心理，好看又好玩。比如 QQ 音乐的加载像音符一样有韵律地跳动着，给用户带来不一样的审美体验。
奖励
奖励是指用户在完成一些操作时给予奖励的设计。超出用户预期，带来愉悦。
比如淘宝用户每次下单/参加活动获得淘气值，满 1000 可以购买 88 会员，原件 888。比如 QQ 音乐的活动中心，用户每日签到累计可以获得会员体验奖励，更优质内容的声音享受激励。
用户体验设计最根本的就是以用户为中心进行设计，本文主要从有用性、易用性、满意度三个维度来把控用户体验设计，但是在日常工作中，因为产品业务的复杂程度，我们要因地制宜地进行设计，深入挖掘我们产品自己的体验设计特色，增加自己的设计市场竞争力。
文章来源：优设 作者：阿韩设计
在很多设计作品中，我们不难发现对于材质的运用是十分广泛的，合理地运用材质可以很大程度地提升作品的质感、细节感！但是相反，如果使用不得当它也可以毁掉一个原本不错的作品，很多人对于材质的理解存在着一定局限性，那么本期内容：设计中材质有哪些运用形式？应该如何合理地运用材质？
很多人对于材质并不陌生，但是每次使用后最终结果总是差强人意，这里首先要说的就是材质运用的几个常见误区：
那么应该如何合理地运用材质呢？
在日常工作中，背景添加材质、肌理的手法是很常用的，但是表现手法上也是有所不同的，表现形式一：将材质、肌理作为背景形象的一部分，也就是将材质做得足够明显，这么做的目的是丰富画面视觉层次变化，增强画面整体对比，比如我们常见的：
通过对比不难发现有无材质对于整体的影响，同样的构图，没有材质变化的画面给人一种很单薄、视觉形象不够鲜明的感觉，但是通过添加材质、肌理，画面整体的丰富度大大提升，背景画面的变化增强，通过材质的变化，也使得主体的视觉形象也更加鲜明；将材质作为背景的组成部分，一定要切记时刻围绕主体展开，主体的位置是不可撼动的。
表现形式二：将材质、肌理作为画面视觉中相对较弱的表现形式，也就是做得不明显，缩小看几乎没有，正常看的情况下又有一定的变化，这种表现形式目的在于增加画面细节感，使得画面不会因为缺少变化而略显单调，比如：
这种表现手法放小了看对于画面的影响并不大，但是如果 1:1 正常比例看，有材质的画面会给人一种细节感丰富、画面充满不同层次的变化感受，这样带给作品更多的可塑性，使得画面给人的视觉感受更深刻，同时也起到了一定的丰富画面的作用。
对于在文字中叠加材质在一些作品中是很常见的，同样的文字，给予不同的材质也会呈现出不同的视觉感受，更多的目的是提升文字与整体形象的契合度，增强整体视觉冲击力，比如：
材质在很大程度上可以提升文字的立体形象，使得文字在整体的视觉形象更加鲜明，但是对于材质的运用也要做到有所选择，每种材质所传递的视觉信息都有所不同，要让材质与文案、主题相契合才能将材质的效果发挥得淋淋尽致，这一点很重要，比如：
这里只考虑材质对文字的影响，首先我们解读文字「第一战场」，让我们首先联想到的就是破损、狼藉、金属等等，那么在给这一文字添加材质时我们就要结合主题；上面两种的材质分别是木纹和大理石，给人的感觉是太过干净、简约，与战场主题不相符，所以说材质使用不得当，而后面两个的材质分别是破损的石灰墙以及金属，就能在很大程度上加强「战场」这一主题的视觉形象，在视觉上属于强调的作用。
材质的选择和使用也是有一定技巧可言的，这里首先要说下：当我们想要使用材质时，应该如何选择呢？
结合整体风格选择，比如画面整体偏简约、干净的感觉，我们就可以尝试：大理石、木纹、石灰墙、花纹、木纹等等；再比如想要炫酷效果，那么我们就可以尝试：金属、破损墙壁、石头等等，也就是说尽可能让材质本身的风格偏向画面整体风格，这样可以让材质更加融合画面，不会给人一种很突兀、刻意的感觉。
结合产品选择，一切的手法、技巧都是要服务于产品、主体的，结合产品选择材质也是很常用的；比如一些化妆品海报，我们可能用到的材质会有：水、植物、大理石、木纹或者产品本身所固有的材质等等，目的是凸显产品的美观、功效，让用户能够在背景及产品之间产生共鸣、联想，这样也能起到对产品的强调辅助作用。
关于使用：通常找到合适的材质后，会锐化一下，目的是增强材质的质感，然后会用不同的图层模式去试，（一般情况下会用「正片叠底、滤色、叠加、柔光的模式」）以便找到最佳的使用形式；当然如果只用材质的纹理感觉，不用材质本身颜色的话，也可以去色后再去选择图层模式。
结合本期内容，做了一个简单的化妆品的海报，充分利用材质的不同表现形式，用分析的角度去观察，第一步，通过运用 C4D 软件，做一个简易场景：
简易场景搭建完成，因为只是黑白稿的场景，那么接下来就要通过分析产品确定材质的选择：
产品的感觉是干净、简约的，那么就围绕这个整体感觉，展开材质的贴合及制作，这里我选择纹理相对不复杂的大理石为主要材质，结合用到木纹、金属作为丰富画面的材质：
这样一个画面给人的感觉是轻飘飘的，因为没有影子，没有将画面做出光感的效果，而且整体缺少色感，这里我选择把原本无色的材质换成有色材质，目的是增加画面整体色感，其次将投影、倒影做好，光源定在左侧，最终呈现的效果：
最终的呈现几乎是用不同材质做出来的一个场景，虽然这里用到了很多不同颜色的材质，但是最终用到的材质属性只有三种：大理石、木纹 、金属，而且依旧贯彻干净、简约的视觉感受，将同种材质的不同形态运用在一起会给人视觉联系的作用，不会给人一种杂乱的感觉！
材质对画面是辅助、丰富、增加细节感的作用，合理地运用材质可以提升设计作品的视觉层次、增强画面质感！但是不管是哪种形式的材质，都要做到切合主题，要让设计的每个元素做到有理有据，切记不要因为材质的过于凸显而抢了主体。
文章来源：优设 作者：
大家平常都习惯去哪些免费图库网站找图呢？虽然有一些老牌、图片数量充足的图库，像是 Unsplash、Pixabay、Pexels，但后来经过人工智能和大数据学习的搜寻工具更深得我心，也能通过算法将质量较低、不适合使用的图库图片先排除掉，大幅节省搜寻时间。如果在寻找图片素材时想尽量避免使用和其他人重复的内容，试试看由摄影师亲自拍摄的小型图库或许是个不错的方法。
往期回顾：
本文要介绍的「DesignersPics」是一个持续更新、每个月都会加入新相片的图库，由摄影师 Jeshu John 亲自拍摄修图，收录各种类型的相片，包括建筑、商业活动、概念、美食和饮料、大自然、人物、科技等等，照片数量不多，但有一定的独特性。
DesignersPics 的相片都具有非常高的分辨率和画质，可自由下载用于个人或商业用途，例如网站、投影片、包装、标签、HTML/PSD 模版、T-Shirts、广告横幅、商店或办公室装饰等等，无需标示出处来源。
网站链接：http://www.designerspics.com/
使用教学
开启 DesignersPics 从右上角的「Categories」选择要浏览的相片分类，或是直接从首页以日期方式浏览，网站亦提供搜寻功能，不过图库本身相片量不多，浏览上不会耗费太多时间。
每张相片会有预览图、标题和免费下载的按钮。
进入图片页面，还能看到图片尺寸、大小等等信息，点选「Download」就能下载取得 .jpg 格式的图片文件。虽然 DesignersPics 没有硬性规定必须标示作者来源，但如果你喜欢可以协助推广。
值得一试的三个理由：
文章来源：优设 作者：Pseric
这几天在工作中处理了一个历史遗留问题：弹窗适配，几经折腾终于落定发包。于是我也趁着这个机会把弹窗体系梳理研究了一遍。
我们常见的弹窗有对话框，提示框，有时候在需求沟通中经常会听到产品同学说，给这里加个弹窗，那里加个提示框吧。实际上，这个弹窗到底该不该加？这个弹窗承载的是提示说明文字内容，还是需要引导用户下一步操作？接下来我们从弹窗的属性来聊聊我们的弹窗到底在什么时候加比较合适？用什么形态展示体验会更好？
常见的模态弹窗有这几种：对话框、动作栏、浮层。
对话框：对话框主要是给用户提供选项、相关的操作。另外，在一些对话框中，也可以展现图片、头像、步骤图、其它输入项等。
动作栏：常见的动作栏一般会出现屏幕下方，比如选择某个内容时候，出现的选择。
浮层：弹出窗口，浮动于顶层窗口，气泡。
非模态弹窗：是指不强制用户操作，他的作用相当于内容信息提示，他的出现不打扰用户的当前操作，并且有时间限制，在一定时间里能自动消失。比如「xxx 功能已更新哦」，这种提示是不需要用户点击操作，让用户看到就可以了。
常见的非模态弹窗有这几种：toast/hud、snackbar、notice（通知）
toast/hud：iOS 用户更习惯于在中间感知反馈信息，通常在信息提示完 3 秒左右后会消失，安卓通常会出现在屏幕顶部或者下部，不会遮挡主体内容。需要注意的是 toast 只有文字，hud 是可以带有图标的。
snackbar；可以理解为加强版的 Toast
notice：系统消息、通知推送，也是不干扰用户行为，有消失时间，是非模态的弹窗。
了解完弹窗体系后，我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适？我们可以从下面的几个使用场景来看用什么样的弹窗合适。
1. 重要打断用户操作
在一些重要操作，避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊，有的地方出现得不合时宜，打断了用户的使用状态。所以在设计这类弹框时要非常谨慎，得通过多研究确认是否有必要出现。
对话框相对来说比动作栏更重要，因为在视觉中心，更能强烈引起用户的重视，对于十分重要的内容需要打断用户上一步任务的，采用对话框的弹窗，对于不是特别重要信息露出又需要终止用户上一步动作的情况下，一般采用动作栏弹框。
2. 定制化广告弹窗
如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的，要展示出与众不同的特色，在视觉上比较突出，会使用模态的弹窗浮层形式。
3. 给予一定提示
比如提示用户状态、信息、反馈，确保用户知晓自己所处的状态，并可以做出相应的措施。一般使用非模态的弹窗。
出现在用户操作完之后的反馈，比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。
可以不用弹窗的反馈例子：完成页
比如已支付成功、下载完毕、签到成功，这一类是告诉你上个动作结束了，下一步不需要进行引导了，这种反馈大多数都不采用弹窗形式展现了。
1. 层级关系
弹框是内容和导航的补充，用于通知、操作菜单、成功或加载状态的 toast，他是写在蒙层上面的一层内容。
2. 适配方式
下面我们需要了解的是这几种弹窗在开发那的实现形式。我们可以理解为 2 种形式：
一种是开发直接用系统的接口，缺点是具有不可定制，形式美观度不够好。
另一种是开发用代码会单独写出一个模态弹框系统，这套系统与整体设计语言具有一致性，可以复用在各个任务中，可以定制化设计。
需要注意的是，代码写出来的模态样式要考虑在不同机型的适配情况，考虑不同机型的边界。这个适配也有两种实现形式，一种是固定宽高尺寸，展示在不同机型尺寸中，另一种是常用的等比例缩放。这个就需要开发与设计进行密切的沟通，能尽量合理地在不同机型展现更加合适，避免出现极限的情况。
我们是这样操作的，为了避免尺寸比例混乱的情况，会设计一个弹窗的宽高尺寸范围，开发同学代码写出的这套弹窗的适配在各个机型中，是在一定缩放比例下，适用各个不同情况下的视觉展示。这套弹窗可以调用在首页引导、升级等各个页面的弹窗设计中。
文章来源：优设 作者：咏舍
微信是一种生活方式。作为月活超 10 亿的国民级产品，它有着独特的设计之道。
同时，微信也是互联网界的一个异类，张小龙曾在微信公开课上回应道：「我们只是守住了做一个好产品的底线，居然就与众不同了」。
好产品自然是体验和价值至上。下面，我就为大家解读微信的用户体验设计。
先从最简单的二次确认讲起。
微信针对首页消息和收藏列表的删除操作，做了二次确认的微创新。像同类 IM 聊天工具，如 iOS 短信、Facebook Messenger、飞聊等等，二次确认都是采用底部系统弹窗。这样做，从程序架构的角度来看兼容性和通用性更强。
而从体验设计的角度来看，则刚好相反，因为从第一次删除操作，到第二次确认系统弹窗。之间的目标距离太长，耗时也就变长了。根据菲茨定律（Fitts’ Law），获取目标的时间取决于目标的距离和大小。这意味着提升交互的效率，不仅需要减少距离，同时还要增加目标大小。
△ 收藏列表
回过头看来微信，就是这样设计的。二次确认是在第一次的基础上延展，距离几乎为 0，同时，目标按钮的宽度也增加了几倍，大大地提升了交互效率。
其实，商业和用户体验往往是有冲突的。而微信广告很好的平衡了这一点。
通过丰富有趣的互动体验式创意，或画圆、或画方、或画爱心，吸引大家主动参与互动。
1. 开放首条评论
另外，首条评论功能让品牌像朋友一样与大家对话，利用明星效应，从而带动更多人参与评论，有效提升评论区活跃度和广告点击率。
△ 朋友圈刘雯广告
以刘雯发布的朋友圈广告为例，大表姐把款的 vivo X30 系列手机交到你手中，并在首条评论中邀请你帮她拍照。数十万用户积极回复刘雯，评论率高于历史均值 40 倍+，「你这么漂亮怎么拍都好看」、「天天给你拍」，大表姐的魅力折服了众多用户，有效提升了品牌的亲和力与好感度。
2. 打开仪式 · 最强震动级别
在交互方面，如果你是 iPhone 用户，可以体验到 Taptic Engine 线性震动马达，通常力度由轻到重分别是 Light、Medium、Heavy。在打开广告的那一刻，它给你的是最强震动级别，满满的仪式感！整个微信应该找不到第二个这样级别的震动了。
再举一个震动的例子，当你的好友拍摄了时刻视频后，可以看到 TA 的头像右上角多了一个蓝色的小圈圈，双击它就能看到好友的时刻视频了。
当然，你双击没有拍摄时刻视频的好友，TA 的头像会左右晃动，并且会有 Failure 的震动反馈，动画和震动节奏完美匹配，这个体验就像你解锁 iPhone 输错密码时的震动是一样的。
△ 没有时刻视频时的反馈
我们做产品设计时也一样，对于用户的操作，应当给予清晰明了的反馈，帮助用户更好地理解信息。
微信的起步阶段是基于手机来做 App，不基于 PC 来做，PC 端只是辅助，而现在，它的跨平台能力也逐渐增强。
一周前，微信 PC 版「微信测试版 for Windows」发布了 2.9.0 的内测，同步了移动端的新功能，主要有两点：
支持打开小程序，也可以玩「贪吃蛇」「跳一跳」等小游戏了。
△ Windows 微信客户端
另外，此前的微信 PC 端只支持引用文字消息，也没有达到手机上引用消息的视觉效果。此次更新中，还新增了很多支持的应用类型，包括但不限于图片/视频、表情包、公众号链接、小程序、文件等。
如此看来，Mac 端的更新也不远了，可以期待一下。
最近的微信更新了，除了引入深色模式之外。值得一提的是，语音消息的交互体验得到了优化，上滑转文字更方便了。
此前的方式是按住说话，滑到转文字按钮，说完松开手指后，才把语音解析成文字。
现在交互则少了一步操作，达到了实时边说边转文字的功能。别小看这一步界面上的优化，它背后代表的是微信语音识别能力上的技术突破。
△ 语音实时转文字
微信有很多隐性和显性的锚点，隐性锚点就比如你打开的这篇文章，关闭后，再重新点进来，还是显示上次阅读的位置。
△ 订阅号列表
显性的锚点就比如上面这个：当你刷公众号列表时候，如果有新文章更新，标题栏会出现一个锚点按钮，点击它让你快速回到顶部，方便查看文章。
△ 朋友圈「跳到还没看的位置」
基于此，在新版微信朋友圈中，增加了一个「跳到还没看的位置」。很多信息流产品是往下刷内容，直到给你一个分界线提示：下面内容已经看过了。而微信这是一个逆向操作，我认为这个功能还是很有必要的，因为经常会有刷朋友圈刷到一半聊天退出去，当回来查看朋友圈时，需要重新拉到底部，费时费力。
《在你身边，为你设计》一书中有提到语音听筒播放的优化。大家都知道，手机带有距离感应器，在感应到耳边贴近时，屏幕会关闭以节省电力，并且避免由于耳朵与屏幕的触碰导致的误操作。
微信在聊天界面中，也启用了距离感应，以实现手机贴近耳边时，自动将语音从扬声器切换到听筒进行播放，这样你可以用最自然的姿势来听语音，这是一个很好的体验。
但要完美地实现这个体验，就需要解决距离感应器的时延问题。播放语音时，如果你非常迅速地将手机移至耳边，这时候距离感应器并不会同样迅速地对这个动作产生反馈。大约在延迟了 300 毫秒后，感应器发出信号，微信将 iPhone 的屏幕关闭。而在这个时间内，你的耳廓极有可能已经触碰到了 iPhone 的屏幕上。触碰的位置大部分时候是左上角的返回按钮区域。于是很容易出现手机移至耳边，语音戛然而止。
△ 延时响应判断流程图
为了解决这个问题，微信设计了一个解决办法：在响应返回操作时，先等待 500 毫秒，这时候如果侦听到距离感应器有发出信号，则认为是贴耳的动作，此情况下不执行返回操作，如上图所示。而 500 毫秒的延时大部分时候你是不会感知到的。这一解决办法极大降低了贴耳时候的误操作。
在微信的产品设计中，我们看到了交互的细微迭代和背后的技术突破，我们看到了商业创意与用户体验的平衡。给用户带来希望，让创造者体现价值，这就是微信的设计之道。
文章来源：优设 作者：洋爷
B 端产品也叫 2B（to Business）产品，使用对象一般为企业客户或组织。B 端产品帮助企业或组织通过协同办公，解决某类管理问题，承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入，减少企业内部损耗的重要职责。B 端产品的工作是合理实现企业需求，提高产品核心竞争力，并提升市场价值。在国内互联网语境中，B 端产品的狭义解释也基本可以和面向企业的 「网页程序」 等同，用更接地气的称呼可以叫「管理平台」、「管理端」 。
B 端产品大致分为两类，一种是支撑前台产品的，一种是管理各种资源的，前者就是我们熟悉的后台产品，后者就是给各个企业服务，提高各个企业工作效率的 B 端产品。
1. 支撑前台产品的：
C 端产品线的后台产品，比如我们常用的淘宝、微信、饿了么、美团这种 C 端产品，他都需要有个后台进行各种前端信息的管理。
平台级工具产品，比如微信公众号、头条号等对用户和文章的数据实时统计，可编辑文章，回复消息等
2. 管理各种资源的:
1. 从定义上：
2. 从用户群体上：
3. 业务场景
4. 用户的诉求：
5. 盈利模式：
了解了 B 端和 C 端的区别，B 端产品的实用性大于美观性，能切实解决问题、配置资源的 B 端产品才是一个好的 B 端产品。在设计上对于操作和展示内容无关的元素，越少越好。很多人刚开始接触 B 端，会热衷于以 C 端视觉标准进行设计，对于真实的使用体验来说显得过于冗余、炫技。那么在 B 端设计中该如何思考去设计呢？下面我以设计前、中、后的三个方向去阐述我在做 B 端设计中的一些思考：
需求分析
使用场景、硬件情况
梳理交互流程：拿到需求后切勿打开花瓣站酷一阵撸，一定要对需求进行梳理（有的公司有专门的交互设计来做）做 B 端产品最重要的是对业务的理解，在梳理过程中一定要跟产品随时沟通，产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？充分理解了业务再去做设计就会有事半功倍的效果。
情绪版，定义风格：梳理完需求就可以定义设计风格了，在设计风格上尽量做到简洁，B 端产品实用性大于美观性，减少不必要的装饰元素给用户操作上带来干扰。这里可以运用情绪版去定义设计风格，大概的流程就是，根据产品业务背景定义设计关键词、根据关键词去找参考图片定义设计风格，产品的主题色也可以根据情绪版来去定义。
布局上根据导航可分为以下三种：
水平导航布局：类似于普通网页的布局样式导航，顺应了从上至下的正常浏览 顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。适用于导航较少，页面篇幅较长的产品。
垂直导航布局：可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。菜单栏还可以展开收起，适用于结构简单的产品。
混合导航布局：结合了水平导航和垂直导航的特点，层级可以扩展到二、三级菜单，且能够更加清晰地区分常用业务功能操作和辅助操作。适用于功能模块较多、较复杂的工具类型后台。
不同形态的布局，适配方式也不同。在做设计之前了解下适配的原理，避免在不同设备上出现视觉上的误差。水平导航布局，在适配方案中做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。如图：
垂直导航布局和混合型导航布局，在适配方案中常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。如图：
最后说一下布局上的栅格，栅格会使整体页面更加工整简洁，内容区域采用 24 栅格（并非固定数值，参照案例 24 栅格布局），就不一一叙述栅格的定义与运用了，大家可以参考下网上有好多关于栅格的文章，如图：
颜色
颜色上大致分为品牌色（可以结合业务属性）、功能色（比如红黄绿蓝灯成功、出错、失败、提醒、链接等。功能色的选取需要遵循用户对色彩的基本认知）、 中性色（如深灰中灰浅灰，文字部分应用居多，此外背景、边框、分割线、等场景中也非常常见） 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
字体
在 B 端系统中优先使用系统默认的界面字体，常用中文字体有微软雅黑、苹方、思源黑体，英文字体有 Arial、Helvetica 系统不同展示的字体也不相同。
字体大小常见的有 12px、13px、14px、16px、20px、24px、30px 等。
规范
一份好的规范能够让设计和开发更加的工作，并且能够指引一些设计的细节，通过对大小、颜色、边距等、呼吸感等一些细节点的标注，可以让新加入的设计师快速上手设计。一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出。好的设计规范还能统一在产品中不同页面的相同板块的样式问题，为开发组件库奠定基础。
如何建立一份规范呢？大概总结以下几点：
定义好设计规范能大大提高设计师的工作效率，在同一个项目中也能更好的把控项目的视觉规范，帮助设计师复用及设计延展。
组件
B 端产品的决策方是老板和管理层，在设计 B 端产品中往往也是大多数情况下会有接到比较紧急的需求的情况，所以在设计过程中就需要我们设计师更加去注重效率，提高产能。做东西时要有组件化思维，去总结分析页面模块中的一些共性，跟开发共同完成产品的组件库。
如果没有前端工程师，我们的设计组件库就是 PNG。所以，在开工前，一定要和那个技术不错的前端工程师聊聊做设计组件库的事情，其中最重要的是确定好：选择什么样的前端框架。
如果组件库服务的是 B 端或者中后台系统，那其实有很多可参考的开源组件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技术不一样，兼容的浏览器版本也不一样，这要根据你们技术情况做选择。如果觉得开源框架的风格和你们的产品不统一，那就需要二次设计和开发封装。
下面是蚂蚁金服组件库，如图根据组件的功能特点做出了分类：通用、布局、导航、数据录入、数据展示、反馈、其他等。大家可以去官网查看，这里就不再一一做阐述了。
这个是饿了么的组件库：
推荐几个官方组件库：
做之前大家一定要去多去查看这些大厂做的已成型的开源组件库，然后再结合工作业务特色做出自己公司特有的定制化组件库。有了组件库之后，再接到紧急需求，我们就可以做到事半功倍的效果。先去分析页面的构成，然后花费 80% 的时间去设计需求中 20% 的页面，剩下的通用型页面就可以直接用组件库堆出来了。
设计走查
在完成设计后，要整体对设计页面进行走查。从信息层级、文字、图标、图片等方面进行多次设计验证与测试。
高质量设计交付
设计稿命名一定要清晰规范，现在好多切图标注的插件，一键生成切图标注。现在就没有必要单独整理切图标注了，但是设计稿在交付前切图的命名一定要在设计稿里整理清楚，规范命名方便开发查阅。
推荐几款比较常用的切图标注的插件：
设计追踪、校验
设计稿给到开发在设计过程中，要随时跟开发沟通。项目上线后要对线上效果进行实时 UI 校验，保证开发同学对设计稿的高度还原。还有就是对设计上线后的验证工作，用户使用和反馈是优化产品的重要途径，针对性地在一些主流的页面模块按钮进行一些数据的埋点，统计下用户的点击状况，实时对数据进行一些跟进，为下次页面改版优化，提供有力的数据支撑，提升产品的用户体验。
不管 B 端还是 C 端，设计的价值在于通过视觉表现的方式去助力公司、助力产品实现用户的需求、帮助用户解决问题。B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，所以 B 端在设计风格上尽量做到简洁，B 端产品实用性大于美观性，在每一个功能的设计都需要你去思考很多方面：用户易用、信息层级、未来扩展，你都要做出取舍，而对于每个模块都需要你思考、结合用户场景。所以想要做好 B 端设计，一定要去了解业务，了解用户需求。
文章来源：优设 作者：小六可视化设计
本系列文章旨在由浅入深、由理论到实践地介绍 VR 设计。无论你在做哪个领域的设计，都能通过这个系列了解 VR 设计的特点。本文是第一集，深入分析 VR 界面的文字设计。
文章来源：优设 作者：爱奇艺XRD
本系列文章旨在由浅入深、由理论到实践系统地介绍了本团队在近几年的设计工作中的一些经验总结和重点思考。本系列面向广大设计师，不论你目前在做什么领域/哪个端的设计，都可以了解到 VR 端和其他端的异同。希望给正在看文章的你带来收获。
团队介绍：爱奇艺 XRD——爱奇艺 VR/AR/XR 设计团队，目前主要负责爱奇艺 VR app 的设计工作（包括各个 VR 设备端和手机端）。
传统的数字终端（手机、电脑、pad 等），用户界面存在于二维的物理屏幕里，也就是在一个平面里。而屏幕和界面通常都是长方形的。
在 VR 中，有空间感的不仅仅是虚拟场景，用户界面也是布局在三维空间里的。「屏幕边界」的概念被打破了，设计师的画板不再是各类手机不同尺寸的屏幕，而是一个「无限的」空间。界面本身也可以是三维的、打破传统的，不再必须是一个个的长方形。
真正的 z 轴
这不同于在 2D 屏幕终端上，元素只拥有（x、y）坐标点的属性，而并没有一个 z 轴的概念。Z 轴，也就是深度概念，是通过设计师利用阴影、动效等视觉效果，「模拟」出来的前后关系。
在 VR 中看到的内容物（包括 UI 界面、场景、模型、视频资源等）有真实概念的前后关系，每个物件摆在一个具体的（x、y、z）坐标点上。物件拥有绝对位置，物件和物件之间有相对位置，物件和 camera（指用户观测点）之间有一个具体的距离。
角度和曲面
除了 z 轴坐标，因为 VR 界面存在在空间里，所以还拥有一个属性就是角度，这包含了在（x、y、z）三个轴上旋转的角度。每一个物件也可以不再是一个平面，而是曲面的、三维的。
角度和位置共同决定了，当用户看向某个物件时，这个物件的样子。
「有多大？」
一个物件在 VR 中「有多大」很难简单描述清楚。在传统端只需标注某个 UI 元素的「大小」「间距」，描述单位是像素。而在设计 VR 时。需要从多个维度定义一个元素：「大小」「（x、y、z）位置」「（x、y、z）角度」。同时，「有多大」还跟用户观测点的位置息息相关。
在介绍下文理论之前，让我们先认识两个常见的 VR 术语：
FOV：Field of View，视场角
视场角的大小决定了光学仪器的视野范围。在 VR 中，视场角是 VR 硬件设备的一个属性，设备 FOV 是一个固定值。
在我们团队日常工作用语中，通常也用来指代用户的视角范围、界面元素的角度范围（如，「某面板水平 FOV 是 60°」）
DOF：Degree of Freedom，自由度
物体在空间内具有 6 个自由度，即沿 x、y、z 三个直角坐标轴方向的移动自由度和绕这三个坐标轴的转动自由度 。
虽然说 VR 是一个 360° 全景三维空间，但对于目前大多数 VR 的使用场景来说，可供设计师创作的区域其实已被大大缩小了。
目前国内市面常见的可移动的 VR 设备（非主机类），如小米 VR 一体机、Pico 小怪兽系列、奇遇 VR、新上市的华为 VR Glass，标配均为 VR 头显配合3DOF手柄的硬件模式。对应此类 VR 硬件模式，常见的用户使用场景为：「坐在椅子上+偶尔头转+身体不动」，好比「坐在沙发上看电视」。即使用户使用一个 6DOF 的 VR 硬件，支持空间定位可以在房间里走动，但对于爱奇艺 VR 这类观影类 app 来说，「坐在沙发上看电视」仍是主要的使用场景。
因此， 主要的操作界面还是需要放在「头部固定情况下的可见范围内 」。这样用户无需费劲转头，就可以看到主要内容、操作主要界面。
那么，什么是「头部固定情况下的可见范围 」呢？我们需要先学习一些人机工程学，来了解一些人眼 在不同情况下的可视范围。
（此图的中心点 为用户观测点。）可以看出，
头部固定的情况下，双眼能看到的最大范围约为 124°。但还要考虑到一个限制，目前 VR 硬件设备的 FOV 并未达到这个值，通常在 90°~100°。而其中，能看清晰的范围只有眼前中心处的 60°。这相差的范围可以理解为「余光」，在人眼中成像是不清晰的，但仍在视野范围里。——这个范围极大程度上决定了每一个 UI 面板（包括其中的图片、文字等）适合占据的空间，也决定了 VR 中视频播放窗的最小和最大值。
头部转动但身体不动的情况下，脖子舒适转动能看到的范围约有 154°，脖子转动到能看到的范围约有 204°。一些次要内容可以放在这个区域，用户需要转动头部才能看到，但也不用太费力。
偏后方的区域范围，必须移动身体才能看到，因此只能放一些「没看见也没关系」的内容。比如环境、彩蛋等。
在放松状态下，头部与眼睛的夹角约为 105°。也就是说，当头部竖直向前时，眼睛会自然看向水平线下 15° 的位置。头部固定仅眼球转动时的最佳视野是（上）25° 和（下）30°。应将操作界面和主要观看内容放在此范围内。
垂直方向最大视野范围是（上）50° 和（下）70°。这个范围也是超过了 VR 硬件设备的 FOV。
另外，点头比抬头舒适。现实世界中，我们通常都是低头状态比抬头多，比如玩手机、看书或看笔记本电脑时。所以在 VR 中，比起偏上方区域，应考虑更多利用起偏下方的区域。
（见本章图1）
0.5m 之内的物件，双眼很难对焦，因此不要出现任何物体。（这个值对于全景 3D 视频的拍摄 意义较大，应该尽量规避离镜头过近的物体出现）
有立体感的范围在 0.5m~10m，这里应该放置主要内容，尤其是可操作的内容。
10m~20m 之间，人眼仍能感觉出立体感，但有限。此范围仍适合放置可以体现沉浸感的 3D 场景/模型。
超过 20m 的距离，人眼很难看出立体感了，物体和物体的前后关系不再明显。因此适合放置「仅仅作为背景」存在的内容，也就是环境。（值得注意的是，因为反正也感知不出立体感，所以此范围的环境可以处理为全景球（即一个球面），来代替 3D 模型，这大大降低了功效。）
在现实世界中，每个信息媒介都有一个预设好的观测距离。例如，握在手中的手机，距人眼大约 20cm。放在桌面上的电脑主机显示屏，距人眼大约60cm。客厅墙上的电视，距人眼大约 5m。在马路另一头的广告牌，距人眼可达几十米。
内容在预设好的观测距离上，对应预设好的大小。例如，手机上的正文文字只有几毫米大，而广告牌上的文字需要好几米大。
而在我们（观测者）看来，这些文字都阅读舒适。甚至其实看起来是「一样大」的。
这是因为它们拥有同样的视角——被视对象两端点到眼球中心的两条视线间的夹角。具体举例来说，在 1m 处看一个 10cm 的物体，和 在 2m 处看一个20cm 的物体，在 3m 处看一个 30cm 的物体，这 3 个物体「看起来是一样大的」，他们具有相同的视角。但我们仍然清楚地知晓谁近谁远，是因为眼睛对焦在不同的距离上，也就是视距不一样。
在 VR 中，不能再像移动端那样用「像素」来度量一个物件的大小，而是通过「视角」。而视角是由物件的「大小」、「位置」、「旋转角度」共同决定的。在「用户观测点不动」的使用场景下，「位置」实际上就是与观测点的「视距」。
界面的「旋转角度」应遵守一个原则——一个便于观看和操作的界面，应该尽量垂直于视线、面向用户观测点。也就是说，当你确定好一个界面的「位置」后，就自然会有一个对其来说的「最佳旋转角度」。
在 VR 中，一个物件的视角由其「大小」和「视距」两个变量影响。当确定了「最佳视角」、「最小可阅读视角」时，这就决定了「需要在不同距离上放置的信息内容，各自应该放多大」。
有了理论基础后，接下来就是不断实践。
首先需要读者了解的是，我们团队设计的对象是爱奇艺 VR app——是在 VR 设备上的爱奇艺，是爱奇艺的第四个端。不仅包含爱奇艺全网 2D 内容，还拥有海量 VR 全景视频、3D 大片。选片和观影相关功能齐全。在体验上主要打造有沉浸感的 VR 影院观影，并突出 VR 特色内容。
本文章针对于 VR 一体机内的爱奇艺 VR app 设计展开讨论，但我们同时也支持手机端 app，若感兴趣可以在各大应用商店搜索下载。
我们学习的大量二手资料，给开展实际工作创造了基础。然而最终设计效果其实是在反复验证、试错后决定的。
当根据理论资料开始做实践，却发现实际效果差强人意时，我们的建议是——注重实践。原因之一是，目前 VR 界从技术到产品设计仍旧处在实验性阶段，远未达到移动端设计规范的成熟性，国内外的相关理论经验总结，都还没有绝对定论的程度。Oculus 的设计指南中，都是建议「实验，实验，再实验」。之二是，能搜集到的二手资料，不完全是建立在「人带着 VR 设备手握手柄」这种使用场景上，所以导致实际结果「不是那么回事」。
基于「坐着不动+头部转动」的使用场景，和「自然视角偏下」、「低头比抬头舒适」的理论。
我们采取「从正视角出发，向左、右、下延伸」的布局思路。正视角放置当前界面的核心内容，左右两侧放置辅助信息内容；在必要时，可加入下部模块。此类模块化布局适用于所有界面，只是具体的面板尺寸、旋转角度可以有所不同。根据每个界面需要承载的内容，因地制宜地合理规划。
图为我们使用的几种常见 UI 布局。
基于人眼水平和垂直方向的视野范围的理论，同时参考主要适配的硬件设备属性（目前 VR 设备的 FOV 都小于人眼的视野范围），即：
——我们决定了爱奇艺 VR 中主要界面的 FOV。
选片主界面 FOV （左-中-右 布局）
△ 「实际截图」爱奇艺 VR 选片主界面
水平方向上：
垂直方向上：
影厅播控页面 FOV（左-下-右布局）
在爱奇艺 VR 中，观看非全景的 2D/3D 视频，用户会置身于一个电影院影厅场景中。视频画面会出现在影厅屏幕上。
影厅播控页面（操控台页） 指播放视频时（包括影厅场景影片和全景影片）的操作界面。
△ 「实际截图」爱奇艺 VR 影厅播控页面
影厅播控页面采用「左-下-右」布局。包括 3 个功能区块：相关推荐（左）、操控台播控（下）、详情 & 选集（右）。该页面在视频屏幕（或全景视频）的前方，靠单击触摸板来呼出和关闭。
这 3 个面板的边界均在正视角「头部固定时可见 FOV」之内，也就是保证了，当用户注视影片本身并呼出该面板时，能看到所有面板。而用户仅需轻微转动头部，就可看到完整的面板。
视频播放窗的最大/最小值
视频播放窗 即「影厅屏幕」，被我们设定了屏幕大小可调的功能，以此来适应不同用户的观影习惯。屏幕大小可在指定范围内平滑调整。
屏幕最小值（50°）：完整的屏幕范围都在「头部固定情况下清晰 FOV」。
屏幕最大值（76°）：屏幕范围在「头部固定情况下可见 FOV」，即「充满视野」。此状态的观感类似 IMAX 影厅。
垂直方向上：距水平线偏上而不是偏下。这里其实和理论值发生了冲突。理论资料中，人眼最舒适的对焦点在「水平线向下 15°」。在老版本中，我们曾经将主 UI 和视频屏幕都按理论值摆在了偏下方，但实际效果并未令人感到舒适，反倒明显感知到「内容都偏下了」。这就是上文所说，「当理论导致实践差强人意」时，我们选择了不断实验，以实际效果为准。另外，本场景下方有影厅座椅等实际模型，并且还有操控台播控的 UI。综上，影厅屏幕被放在了水平偏上的位置。
根据前文理论提到的，z 轴距离的合适范围（0.5m~20m）比起水平和垂直 FOV 来说，数值范围要大得多，也就是说可试验的范围很大。因此在界面距离这一点上，我们进行了大量反复的实践——最终决定了当前版本中各级页面的深度层级和具体数值，如下图：
跟随式提示：
阻断式提示：
辅助操作界面：
减少眼球调焦，缩小距离差
值得注意的是，在我们的老版本中，不同层级的界面曾经被摆放的距离差距很大。如，toast 在 1.75m，主 UI 在 3m，而视频屏幕在 12m。之所以改动至上图数值，主要是为了达到「在看向不同层级界面时，尽量减少眼球调焦的程度」的目的。
眼球在看向不同距离上的内容时，需要对焦到不同的平面，距离差距越大，眼球需要调整得越大。如果频率高的话，容易导致（一部分）人的眼球疲劳。
Z轴上的获焦效果
VR 独有的「z 轴」，不仅允许了界面可以被放在不同距离上，还支持了利用 z 轴上的位移和旋转 来表达获焦效果。控件被获焦时，只需要在 z 轴上轻微的位移或轻微的角度旋转，便可体现出与众不同的有趣效果。
文章来源：优设 作者：爱奇艺XRD
缺省页指页面的信息内容为空或信息响应异常的状态；设计缺省状态的作用不仅是引导用户在异常边界状态的操作提示，同时也是安抚用户体验情绪的重要场景；更重要的是为边界场景营造出良好用户体验。通过分析缺省状态产生的原理，从而更为准确地把握交互缺省页的设计原则。
谈到缺省页面可能是设计师最容易忽略输出的范围，可能直到对接的开发同学提出来，「这个页面，如果没有数据的时候，该怎么显示啊？」。为了更好地把控设计缺省页交互状态，首先要了解缺省页出现的原理。App 页面内容（包括图片、文字、数据字段等等）都是请求服务器数据，顺利返回后，正常显示到客户端页面。在了解清楚基础实现逻辑后，就可以开始梳理、整理缺省状态的设计思路。
△ 图1 缺省状态的场景梳理图
缺省状态包括：系统层、信息层、空白层。
系统层：指当用户请求服务器时，返回提示请求提交失败，并检测到失败原因时呈现的页面；例如：加载失败、服务器异常、无网络等；页面一般会有重新请求的快捷按钮。文案上可做失败原因的细分描述，也可节约成本使用网络异常的统一文案。
信息层：请求服务器数据成功，但返回的数据异常的页面；例如：内容已删除、内容已下架、内容不存在；文案内容以提示数据类型的缺失为主。显示形式除了常有的全屏缺省图，还会出现在数据列表下单一内容缺失的缺省模块化的情况，例如：单一作品在书架上显示已下架。
空白层：请求服务器数据成功，但显示无数据；内容页在无数据时需要缺省状态进行表达；例如：页面空数据、搜索无结果等。空白页面属于正常网络显示场景，所以一般会在缺省页附带有相似属性模块的用户引导，争取用户重复消费的目标，满足用户的操作的诉求。
最后根据每个不同的缺省状态，梳理产品相对应的场景。逐一根据场景特点来设计页面内容。那缺省页的设计有哪些表现形式呢？
没有用心设计的缺省页无法给用户带来良好用户体验，并可能给用户带来困扰，如下图：某小众直播平台的拉新邀请页面，无邀请记录状态下没有任何有效反馈信息，用户不能明确得知到底是网络问题还是账号同步出错，亦或者是没有一次邀请。正确的缺省页设计内容理应明确表达出符合用户心理预期的视觉场景表达（图形）；和使用易理解和语法恰当地表达当前的异常状态（标题）甚至于引导用户解决问题的文案描述。
△ 图5 缺省页的错误示范
1. 视觉图案+文案
此类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥物或主色调延展出的 icon 或插画来表示缺省状态；文字：通常为「标题」或「标题+描述」结构；标题通常是表达出现缺省的原因；描述文案则说明结束缺省状态的解决办法，如「请检查网络是否顺畅」 等等。
2. 视觉图案+文案+引导
此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块，主要作用于避免用户在数据边界的状态下，会因为无法达到操作目的而提高的跳出率。引导模块的内容包括：相似属性内容，相似行为目标按钮或解决缺省状态操作按钮，加入引导，用户进行某项行为或者感知某些信息，对于功能的教学和使用频率的提升有着重要作用。引导模块的形式也是日新月异，逐渐变成新用户业务引导的作用，不仅限于页面平铺，也可以做成固定气泡微动效，例如：抖音的发布缺省页。
缺省页除了常规的提示型设计方法，还有许多其他的设计技巧，帮助用户在遇到困难，更好地安抚用户的情绪。这些设计技巧有些是替代原来的缺省内容，让用户有更多的消费空间与深度。有些是拓展缺省状态的补充内容，让用户不容易跳出页面，增加用户的消费时长。具体如下：
1. 使用推荐内容
缺省状态中的空白层非常影响边界情况的用户体验，提出一种假设，是否可以刻意推荐相同属性的内容呢？这样的界面既不会显得苍白无力又可以留住用户的注意力。相似性的内容也可以解决用户目标的迫切性。所以说，这种方法非常适合内容型产品中使用。例如：新用户在打开电商产品的购物车时候，理应是空白无消费行为的操作记录。那么平台方通过用户画像与热门排行算法推荐了一个商品流。这样可以解决用户无目标性挑选的诉求，增加消费时长。至于产品如果确定用户画像的推荐算法，可以通过获取第三方登录的个人基本数据之后，才给我推荐了数据库内相对应标签的热门商品，这样推荐的精准度也会高些。
2. 使用缓存
是否使用缓存内容代替缺省状态？根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；理由：用户消费内容的转化路径是先消费后转化的行为特点，不存在系统操作门槛，且缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。
3. 情感化表达
当缺省页给到用户时，通常省时省力的做法就是老老实实告诉用户当前的状态，最多配上一个具有通识性的灰色 icon。但是，秉持着以用户体验为己任的时代，我们其实可以把缺省内容表达得更加生动形象一些。在这里会加入一些情感化的表达，而不是仅仅只是做到准确的目标而已，比如加上活泼的插图故事，或者把文案写得更加拟人化、戏剧化一些。这些配图在让用户明白当前的状态的同时，往往也能引发用户会心一笑，从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图：
4. 提供新任务
通常缺省页的引导模块都着眼于解决当前任务。如果碰到没有解决方案的情况（例如：404，服务器崩溃等）可以提供给用户具有情感共情的新任务，让他们暂时忘记无法达到目标的挫败感，又有体谅的情怀。帮助建立正向积极的品牌价值观。例如：访问腾讯网时访问失败的时候，网页除了显示 404 状态之外，还会显示腾讯「宝贝回家」的公益寻人计划。将缺省页与公益内容相结合，不仅改善到用户缺省状态。也贯彻腾讯价值观「用户为本，科技向善」的输出。一个好的缺省页也可以承担社会责任，让公益传播到每个角落。
△ 图10 腾讯网404公益任务缺省页
结语：作为设计师有时会听到需求方表述「这种极少出现的情况，我们可以暂且不管它。」但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。
文章来源：优设 作者：腾讯动漫TCD
编者按：这篇文章来自 Taras Bakusevych 的文章《How to simplify your design》
如今的数字产品，在不断迭代过程中，会加入更多功能，添加更多的技术支持，更新进阶的特性。而另一方面，企业对于构建简单实用的产品，也同样非常着迷。这当中当中毫无疑问是存在微妙的对抗和冲突的——如何让更好更多的信息，以更加轻量易用的方式呈现出来？这就涉及到产品的简化改版的技巧了。
让产品变简单，其实一件困难的事情。
我们可以将「简单」定义为「更加易于理解或完成」，或者是「不困难」。值得一提的是，简单与否，它是主观的，对于一个人而言简单，对于另一个人而言不一定简单。通常，我们是通过下面的三个步骤来判断一件事情是简单还是困难：
在《简单法则》当中，John Maeda 提供了10条法则，这些法则能够帮你平衡商业、技术、设计所带来的复杂性——更通俗的来说，就是如何合理简化但是又能收获更多。
The Laws of Simplicity, John Maeda
Meada，作为麻省理工多媒体实验室的教授，他也是举世闻名的平面设计师。在书中，他非常慎重地探讨了「改进」这一概念，在他看来，它通常并不总意味着「更多」。无论是对于复杂度，还是简化，都只是相对概念。结合合理的培训，培养制造火箭的科学家也不是难事，但是总会有一些关键的因素，会让简单的事情变复杂，在设计中我们应该尽量去规避它们：
那么，我们在具体的产品改版中，要如何合理地简化呢？下面，是我结合这些原则来总结的21条建议：
有太多的产品试图让你更用户做更多的事情，每个企业都试图成为行业中的瑞士军刀。但是，如果你希望产更加简单，那么你需要有一个核心价值，并且确定产品真正针对的是谁，并非每个产品都应该成为 Facebook。你的产品的核心价值是什么？
想要简化产品，最简单的方法，是经过深思熟虑之后再进行简化和删除。如果组件或者模块的功能、价值存疑，那么请删除。次要信息、不常用的控件、分散注意力的样式，都在这个范畴内。就这么简单。一旦采用这一的方式，你会立刻马上看到结果。当然，删除的时候，请务必深思熟虑。
「简单并非完全没有混乱，因为杂乱必然会伴随简化而存在。简单本质上是对产品的定位和目的有更精准的描述。而没有杂乱仅仅意味着这是一件不杂乱的产品，但是这并非简单。」
——乔纳森·艾维
我们日常设计的绝大多数产品，都涉及到需要用户理解大量数据。当用户对于趋势和变化感兴趣的时候，请尽量使用可视化的方式来呈现信息，而不是一堆数字。尝试从数据中提取有效的内容，可视化地呈现在用户眼前，这才是有意义的简化。
用户长期遭受复杂决策机制的折磨，帮助用户看清各种信息，更好的决策是简化的方向之一。席克定律曾经对此作出过非常经典的解释：用户做选择所需要花费的时间和精力往往会随着选项数量的增加而增加。因此，如果你希望用户决策变得简单，那么你需要简化选择，消除不必要的选项，来帮助用户进行选择。
当前心理学理论和调研肯定了一件事，就是足够多的选择可能会给人带来积极的情绪，相应的衍生出一个流行的观点，就是选择越多越好，但是人类天性中的管理能力是不足以支撑过多选择的。
果酱实验是消费心理学当中最著名的实验之一：为消费者提供更少的选择，对于销售更加有利。这一点是至关重要的——更少的选择，能够带来更多的销量。
在这个实验当中，选择较少所带来的转化率几乎是更多选择的转化率的10倍。这是一个选择过载带来不良后果的一个重要范例——过多选择抑制了用户选择购买的想法。
如果多个选择总是无法避免，那么不妨给用户提供建议，或者告诉用户多数用户的选择。向用户清楚地传达选项之间的差别，这在定价策略上会带来更多积极的效果。
当你了解用户流程的时候，就应该有针对性将用户注意力引导到的对的目标上去，找到关键区域，让用户在界面中优先注意到它们。
你应该经常会听到类似「可读性很差」这样的表述。有很多设计的确存在这样的问题。在设计当中，有太多的因素会影响信息的传达——字体的选取，大小变化、间距、大小写和配色，都会影响到层次结构，影响到用户汲取信息的方式。使用正确的配色和版式，让内容的层次结构更加清晰，最好还能反映出品牌特征，这样就更能增强吸引力和用户对它的印象了。
下面两张图当中，要你数清楚有多少个圆点，哪一张图会让你这个过程更快？
如同你所看到的，无序的点状方阵和有序的是截然不同的，后者的认知负担更低，识别速度更快。面对无序的信息和内容，我们需要逐个计数，但是面对有序的信息，则截然不同。
有组织的元素不仅有着更高的识别度，也更容易被记住。在数字产品当中，记住常见控件的位置和功能无疑是重要的。同样是上面这张图，如果不是计数，而是记住每个点的位置，你能不能做到？毫无疑问，缺少组织结构，这是一件艰难的事情。
在简化复杂页面结构的时候，对组件和内容进行分组通常是最为有效的方法之一。通过层级划分，用户每次需要处理的信息量都会更小，而不是在无关的组件中来回穿梭寻找。借助边框和卡片将相关度更高的内容整合到一起，这是非常便捷的方法。此外，关于关于分组，格式塔原理中的分组原则是非常值得借鉴的：接近性、相似性、连续性、闭合性和连通性。
几乎任何产品当中都会涉及到不同类别的表单，这是获取用户信息的一种方式。有的时候，即使删除掉一些不必要的字段，表单依然会很长。因此，我们可以将巨大的表单或者任务拆分开来，这样一来，整个执行过程会变得简单不少。
设计表单的时候，尽量使用单列而非多列，这样更加顺畅、易于填写。用户无需思考接下来要填写什么，而是按照一条线继续操作下去即可。
不确定性让人感到焦虑，尽可能地在设计当中规避这种不确定性。这就是为什么要让用户在任何时候都清晰地知道他在流程中所处的位置，以及接下来会发生什么。总结之前所提供的信息也是个好主意，能够减轻用户的负担，避免反复检查之前的内容。
人脑对于涉及计算的部分通常会比较费力，对于这些不太占用计算力的内容可以交由系统来进行计算，和计算相比，人的大脑在处理具象化的信息的时候更加擅长。尝试利用系统，而不是将压力转嫁给用户。
渐进式的展开是用户体验设计当中的一种范式，这种方法能够让界面更容易被理解。当涉及到多屏、大量信息和操作的时候，这种逐步展现的机制，可以避免让用户感到不知所措，也可以隐藏一些无关的信息，直到最后用户可以清晰明白内在的关联性为止。逐渐展现的方法，遵循着「从抽象到具体」这样的一种概念，而 iOS 系统当中，所采用的导航方式，无疑就是这种思路的典范。一屏一个步骤，逐渐展现，最后给用户一个确切的结果。
用户将绝大多数的精力都耗费在各种各样的其他数字产品上，这意味着用户对于其他的网站和APP的交互模式、使用方法都有着清晰的了解，对于特定的模式有具体的预期。因此，无论你是设计网站，某个 APP ，甚至是冰箱上的控制系统，都可以遵循既有的设计和交互模式。这并不是意味着停止创新，而是在很多事情上，你无需重新造轮子。
在设计任何产品的时候，都应该让用户尽快感知到产品的价值。因此，除非是满足功能性的需求，在用户初次打开应用的时候，都尽量把其他的干扰去掉，因为这都是让用户了解产品价值的障碍。第一印象很重要，如果不满意，很多用户会立即离开。
如果你第一次尝试，即使是最简单的操作，可能也是有挑战性的，有时候新手使用 APP 的时候需要引导，但是最好的方法是尽量让体验和功能一目了然，搭配上下文环境的说明引导，而不是提供复杂繁琐的学习材料。
简约易用的产品大多能够合理地结合人体工程学的设计。绝大多数人可能会想到诸如汽车座椅、控制面板和手柄这样的案例，但实际其实远远不止。人体工程学适用于几乎所有涉及人的产品设计。
1954 年，心理学家 Paul Fitts 仔细了解了人的运动系统，并且提出了费茨定律——移动到目标所需要的时间取决于和目标之间的距离，并且和目标大小成反比。这个定律反馈到具体的界面设计上，就是尽可能让常用元素更大，并放置到更容易被触及的地方。
删除不必要的交互组件、视图或者是步骤，是简化过程中必不可少的部分呢。用户应该可以以最快的速度进行操作，比如在表单中直接操作，而不是在弹出框中进行编辑，这个被称为「流程状态」，「流程状态」不应当被弹出框打破。此外，对于很多需要填写的部分，最好提供参数推荐建议功能，就像搜索的实时推荐，让用户可以更为准确地输入。
智能默认值——或者说智能占位符是一个非常有用的策略。一方面可以帮助用户更快更精准的填写表单，另一方面，也给用户提供了相对准确的范例。只不过，默认参数的确定，需要设计师和开发团队对用户的使用场景等信息进行研究，通过测试和调研，确定用户使用状况，以此来确定默认参数应该是多少。如果需要明确地参数或者选项，那么可以将默认值设置为 90% 用户可能会选的选项，并辅以说明。
出错信息会给用户带来很大的压力，为了避免用户陷入这样的状况，防止用户无法完成任务，请使用数据输入检查的功能，对于格式输入错误的表单和内容，对用户予以警报和提醒，避免错误发生。对于极为重要的操作，在用户提交之前，让用户二次确认信息，做好检查。对于某些强制性、破坏性乃至于不可恢复的操作，确保用户知道这一操作带来的影响。
数字产品的可访问性是老话题了，要让产品和设计对于所有人——包括有视觉障碍的用户，都可以轻松地使用。最常见的，就是不要使用色彩来作为传达信息的唯一途径，确保文本和背景之间有足够的对比度，支持键盘导航操作等等。可访问性问题并不限于特定的群体，坚持不断的改善和提升，有助于每一个用户的体验。
简化并创造易于理解的产品并不容易，但是这是一条几乎任何产品都要走的必经之路，简化的方法和技巧有很多，虽然零碎，但是它们最终会带着产品走向一条更好的道路。
文章来源：优设 作者：Taras Bakusevych
蓝蓝设计的小编 http://www.lanlanwork.com