编者按：其实网页或者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？来看滴滴出行的实战案例复盘！
Z Yuhan：对于手机端的表格设计，本文将为你提供了一些思考方向，希望能够带给你启发。
表格似乎和移动设备很难融合，强行贴上还真有些毁三观。即便是想方设法地避免，也总会有这样那样的原因，而不得不同时面对它们的时候。
其实有很多方法可以优化手机端的表格，但是可能不一定每一种都适合你遇到的情况，所以我整理了一套循序渐进的处理方法。
假设你在设计一款类似微信聊天群的功能，PM给你一张「成员信息表」，并要求你把它放在群成员管理界面上。这张表格里的信息的排列方式也许非常随便，看起来让人摸不着头脑。
△ 组员信息表
首先你需要弄清楚这张表格摆出来的意义是什么。假设这张表格是为了「让群主查看并管理成员」，那么你就能分析得出：
按照重要程度摆放各信息，并合理排序后，表格看起来就更好理解了：
△ 整理后的组员信息表
如果你的情况不允许对表格对形式进行变动，那么可能就真的要用手机端展示表格了。
在确保文字能够看清的情况下，表格很有可能横向展示不全，所以滑动难以避免。以下两点可以优化表格的滑动体验：
这样，复杂的表格至少能够从表面上融入手机界面了：
再仔细看看这张表格，即便不做大的调整，还是有很多地方可以通过微调来改善体验：
优化后，表格看起来更简单了：
手机的窄屏对于表格来说总不是最佳选择，所以如果可能的话，还是避免使用这种形式。
一个人在同一时间的注意力是有限的，大多数情况并不需要像传统印刷品那样，完整列出所有信息。重新思考真实的使用场景和用户心理，你会发现并不需要一次性把所有东西都扔出来。
如果你想要像微信那样，用头像+昵称这种形式，也许很容易被给你表格的人反驳：
你可以筛选出相对有用的信息提供给用户，并用更有意义的方式整理出来：
于是原本臃肿的表格可以被整合重新设计成完全不一样的轻便形式：
本文提供了一些思考方向希望能够带给你启发，以后遇到类似问题，不要老老实实地把表格原封不动地贴到手机上了。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
滴滴出行在 iPhone X 发售前就针对其操作特性进行了界面适配，保障了 iPhone X 用户的全面屏操作。现在 iPhone X 的适配结果已经得到了良好的用户反馈，由此我们梳理了移动端界面 iPhone X 的适配方案，并从整个适配过程中探索到万变不离其宗的适配方法，为后续不断更新的多尺寸屏幕提供更好更快的适配思路。
iPhone X 是苹果公司十周年推出的重点产品，无论外观还是技术都有着革命性的创新。让我们先来回顾下 iPhone X 在界面使用体验上都有哪些操作特性。
如果你对 iPhone X 还不够了解，可以看看这些 ：
1. 屏幕变长
因大部分设计师都用 iPhone 8 来做设计稿，所以我们用 iPhone 8 与 iPhone X 做对比。
iPhone 6、iPhone 6s、iPhone 7 与 iPhone 8 屏幕分辨率一致。
iPhone X 使用了 5.8 英寸高分辨率、大圆角显示屏。iPhone X 与 iPhone 8 的显示屏宽度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空间多展示约 20% 的画面。
iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的图像，界面内容由手机硬件遮罩成带圆角和传感器（顶部齐刘海）的形状。所以界面设计时 iPhone X 和 iPhone 8 的设计宽度可以通用 375pt，而实际 iPhone X 的屏幕像素为 375pt×812pt (1125×2436px)，且切图使用 @3x 图片。
乔布斯曾说，手持设备最理想的屏幕尺寸是3.5寸，这是因为单手操作时3.5寸屏幕基本能做到大拇指无障碍全覆盖。但随着人们对手机功能多样化的需求，主流屏幕远大于3.5寸。
iPhone X 是 5.8 寸，屏幕已经超越了绝大多数用户的拇指覆盖范围，这就导致左上和右下角的单手操作不够方便。很多基于 F 型流动视线设计的 App，通常会将重要的功能入口置于左上角，在 iPhone X 上，视线优先和拇指操作未必可以同时满足，这就要求设计师们对操作盲区的功能进行多重考量，评估是否要针对 iPhone X 做出位置调整。
2. 异形状态栏（齐刘海）
iPhone 8 屏幕状态栏高 20pt，iPhone X 状态栏高 44pt 并有齐刘海形状遮罩。状态栏位置显示的信息，在 iPhone X 上受齐刘海遮罩影响，需要特殊考虑展示效果，甚至重新设计信息展示方式避让状态栏，以便保持各屏幕展示效果的统一。
苹果官方不建议采用隐藏或遮挡状态栏的设计，相对 iPhone 8 ，iPhone X 有更高的纵向显示空间足够展示更多的内容，且状态栏显示了对用户有用的信息，除非隐藏状态栏能带来更大的收益，否则还是建议保留。
3. 增加主屏幕指示条
iPhone X 屏幕最底部设置了主屏幕指示条，用户可从屏幕底端使用滑动手势进入主屏幕或切换应用。这些系统的全局操作会优先于App应用的操作。在设计用户沉浸式的产品如视频、游戏时，可以适当的隐藏主屏幕指示条。
主屏幕指示条下方的内容仍是可点击操作的，但要避免在屏幕最底部设置重要操作内容，且要避免使用与指示条相冲突的操作手势。主屏幕指示条只有黑白两种颜色，会根据指示条底部背景自动切换。
4. 设置安全区
从 iOS 11 开始，苹果引入了安全区域的概念。在 iPhone 8 等屏幕上，安全区域默认是除了状态栏以外的屏幕范围。在 iPhone X 上，安全区域默认是除去顶部状态栏以及底部主屏幕指示条周边的范围。
遵照系统安全区的概念进行设计和开发，大多数使用系统标准UI元素（如导航栏、表单、内容集）的应用程序会自动适应设备的新外形，不需手动调整，这样会大量节省开发人员的工作量。所以在这里提倡大家遵照系统提倡的方式进行开发布局，不仅方便 iPhone X 的适配工作，也方便后续 iOS 系统更新以及界面元素的自动匹配。
固定在屏幕上展示的内容应始终在安全区域内，如顶导、底部tab栏等。垂直滚动的内容，如列表，图片流，需要一直延伸到底部，也就是会在安全区之外展示，这样才能确保提供全面屏操作体验。
正是因为 iPhone X 有着许多操作特性，我们的设计方案必须针对 iPhone X 进行适配。以下是针对常见界面元素整理的通用适配规则。
1. 吸顶元素
对于吸顶元素的适配原则是：避让状态栏，内容区吸附于安全区顶部，状态栏背景颜色根据吸顶元素进行调整。
2. 吸底元素
吸底元素的适配原则是：内容平移至安全区底部，界面背景层元素（界面背景色、背景图片、全屏地图等）充满屏幕，主屏幕指示条下方区域与吸底元素颜色协调。
3. 信息流
信息流从主屏幕指示条下方穿过，撑满屏幕显示，滑动浏览信息不受影响。主屏幕指示条下方内容仍可点击，此区域滑动手势优先触发系统操作。信息流最底部内容要保障在安全区内。
4. 全屏元素
全屏元素多为图片、视频、游戏画面、全屏地图等信息，适配规则是：全屏元素在 iPhone X 上仍要保持充满屏幕的状态，要保证图像信息比例正确不变形，并接受硬件传感器齐刘海和圆角遮罩。
因 iPhone X 与 iPhone 8 Plus 都使用@3x图片，所以开屏图片不做单独适配的话可以调取 iPhone 8 Plus 图片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屉导航，抽屉拉出后，如果信息卡片和主屏幕指示条交错叠加，就会稍显信息混乱，建议抽屉导航的宽度根据主屏幕指示条的位置进行调整，完整露出或完全遮挡指示条。
6. 居中元素
居中元素在适配中的影响较小，对话框、Toast 提示等均不需单独适配。
以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景，不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性，这种情况就需要单独设计方案，不是通用规则能满足的了。
滴滴出行针对内部产品做了一套适配指南，几十页满满的适配方案说明，尽可能详尽的将普适规则与特殊规则运用场景举例说明。设计平台将此适配指南发放到各业务部门，由业务方产出自己各功能场景下的适配方案。
在此过程中我们发现，即使规则已经很详尽，Webapp、H5页面等多场景下仍有一些不清楚如何适配，或不能通用适配规则的情况，需要设计平台持续跟进，讲解规则走查适配效果。
造成这种情况的原因大多是因为界面设计的时候没有充分考虑其后期延展，导致多屏幕下不能保持统一样式，无法通用适配规则。这让我们开始思考如何设计界面才能包容多屏幕的展现。
设备屏幕在不断更新，适配需求就是持续的无尽的，iPhone 从 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不断在变化，甚至屏幕的形状边界也在变化，更不用说安卓系统各种各样的屏幕尺寸及屏幕形状。例如，夏普AQUOS S2。
设计界面时，如果对市面的主流屏幕挨个设计是有极其高的时间成本的，那怎么才能让适配更从容，不必紧张的跟随手机厂商的发售脚步？是否有提高适配效率的方法？适配可否是一劳永逸的？需要适配的元素有没有一些共性……
带着这些问题不断的思考总结，我们形成了一套自己的设计理念，能够让适配这件事情以一抵百，万变不离其宗，这就是「去边界化」设计。
「去边界化」设计，是指在设计之初把边界限制去掉，定义好界面元素的特性及层级关系后，再套用到屏幕边框之中。与常规设计的区别在于，让内容成为独立且完整的组合体，再根据设定好的变化规则组合到不同的边界中去。这样保障了内容的最大适用程度，且保障各屏幕展示规则的统一性。
目前我们最常做还是手机界面，未来VR、AR 成熟起来，我们所设计的界面就会更大，甚至会大到无形。运用「去边界化」设计，可以让我们更好的适应未来。
另外回到手机界面，我们完成一个设计方案后，也可以运用“去边界化”的方式检查界面元素是否在多屏幕适配上存在问题，减少不必要的适配工作量。
其大无外，其小无内，在界面设计上，我们也需要突破界限，精益求精，让每一个元素都丰富而完整。
1. 定义元素特性
这里的元素特性，除了元素本身的基础功能及操作方式外，从三个角度进行思考，延展性、吸附性、流动性。
这里我们以同倍率，不同尺寸的屏幕适配为例，省略倍率换算方便我们更简单的了解「去边界化」设计。
如下图中，图片、卡片、背景、列表、按钮 等元素可随着屏幕进行延展变化，而icon、文字等为固定大小不会随着屏幕进行变化。
延展变化又可分为：等比延展、横向延展、全部延展。
通常图片、视频元素使用等比延展，保障画面比例统一不变形；列表、按钮 等多采用横向延展，信息量不变高度无需变化；卡片、背景等多根据其承载信息和屏幕背景尺寸进行调整，长宽均跟随变化。
如下图，button 吸附于界面（或安全区）底部，适配到其它屏幕依然保持与界面（或安全区）底部的吸附性。而下图中的toast 提示为界面居中元素，也就是它的吸附性就是界面的中心，适配到其它屏幕仍保持这一吸附属性。
针对流动性的元素主要是定义其容器的延展性和吸附性，流动元素本身大小不变，位置形态上跟随容器进行变化。当然还要考虑元素过多超出容器后的显示方案，是被截断还是省略等等。
如下图，文字图片流在信息容器内进行流动展示。
2. 组织信息结构
从平面维度思考元素关系可以理解为元素间的吸附性，但界面元素不总是在同一个平面上，App 界面通常分为 背景层 、内容层 、操作层 、状态层 ，这些层级在高度上是相互叠加的。
决定元素层级的因素主要是其表达内容的主次关系，重要而紧急元素在最上方，不重要不紧急的元素在最下方。将界面从平面维度填充为立体维度让产品功能更丰富，更贴近人们真实的立体世界，也就更符合用户的认知和操作逻辑。
无论界面的边界如何变化，元素间的层级结构一旦定下是不会随边界变化而改变的。建立元素的纵向层级关系，便于在不同场景保持统一的元素优先级。
在「去边界化」设计中，除了元素自身特性（延展性、吸附性、流动性）清晰，元素间的组合层级关系必须排布合理、逻辑清晰，才能让整个产品层级统一，多屏幕展现层级统一。
3. 元素组件化
我们有讲到界面中所有的元素都不是独立的，有时某几个元素组合表达同一个功能，关系非常紧密，甚至可以捆绑移动，我们把这些功能密切相关的元素进行封装，看做一个完整的大元素，这就是我们常说的组件。
组件化的特点就是详尽每个元素的操作反馈、延展方案、显示容器、极限情况等等场景，然后定义元素与元素之间的吸附关系，操作联动，使其成为一个完整的操作场景。
说到组件化设计，这有一篇必看好文：《进阶必读！可能是最全面的组件化开发与设计指南》。
组件还可以根据功能需求与其它元素自由组合，使得组件可以不断复用，大大提升设计效率，及适配效率。
组件化的意义有很多，可以方便设计元素的复用，方便开发组件的复用，减少代码及元素冗余，方便设计方案的修改等等。横向组件化之于「去边界化」设计，主要是在确立了元素特性及层级关系后，以整合元素成为组件的方式提升设计及适配效率。
以上就是「去边界化」设计理念，包括定义元素三大特性：延展性、吸附性、流动性，然后确定信息的横纵向层级关系，横向功能关系紧密的元素可进行组件化处理。这样整个界面的元素都是层级清晰且不依靠边界的，这时再给界面套用一个屏幕边框就非常有依据了，且能保障所有适配界面具有统一性。
梳理清楚设计理念之后，还需要将上述原则梳理形成设计规范，同步至团队所有成员，以达到团队共识保障最终的效果呈现。
4. 制定设计规范
以规矩为方圆则成，以尺寸量长短则得，设计规范可以帮助设计师快速认知元素特性及使用规则，工作中快速复用通用元素，提升设计效率，且可以通过规范说明对新功能寻求设计指导和参考。
规范的贯彻执行，可以保持产品设计语言与品牌形象的统一，保障在不断更新迭代中产品体验不走样。统一的使用体验可以保障用户流畅的使用产品，快速识别产品功能，简单高效进行操作。此外通过规范说明，可以实现开发人员与设计师的高效沟通，另外，将组件开发形成设计组件库，可以提升开发效率，方便代码的复用。
在「去边界化」的设计理念中设计规范也是不可缺少的环节，把定义好的元素特性和确定的组织结构总结成设计规范，是把理论层面上的探索转换成实践指导。
以上就是完整的「去边界化」设计理念在实际工作中的应用：从定义应用中元素的延展性、吸附性和流动性，到把零散的信息元素组成横向、纵向有序的结构，并把上述特性和结构形成设计规范在设计、开发团队中应用推广。
从苹果发布会开始，滴滴设计团队内部就开始进行着iPhone X的适配工作。了解iPhone X的操作特性、探究滴滴出行应用的适配规范、上线后跟踪反馈等，适配只是一个很小的工作需求，但也可以做的很大，做的很多，我们希望抱着这种极致执行的态度做好每一件事情。
从这次的适配工作中我们不仅看到了 iPhone X ，还看到了未来不断会出现的新产品、新系统等，我们不满足于一次次被动的适配，更希望可以主动的应对变化，所以我们摸索出了「去边界化」设计理念，希望这个理念能对大家的设计工作有所启发，让我们为未来做好准备。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
对于刚开始思考 UI 元素尺寸的新人，通常第一反应都是去看官方规范，新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置，只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上，这些规范并不能帮助你们解决这个问题，因为设计规范涵盖的内容远远比这些复杂。
我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸，最好的方法就是去下载它们的官方 UI-Kits，如下图的安卓组件库所示。
官方不会提供一个列表，逐一罗列每个元素的长宽和其它参数，所以想弄明白，要自己在这两套素材库中选中元素查看。如下图这个按钮，我们就能看见它的参数值。
免费获取 → iOS 11设计规范发布了，来下载官方源文件！
在初期，我们想要设计出严格符合官方规范的设计，就可以严格照搬官方的元素设置。但是，即使官方的源文件包含的元素字体已经非常多了，在实际设计过程中，还是会出现它们无法覆盖的设计类型，需要依靠我们自己设置。
还有如字体的应用，官方源文件使用的语言是英文，光是官方应用的两种 SF 字体，就包含了十几种字重，所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下，我们是不可能照搬这种规范的。
新人要明白，官方的规范，只是一种建议，我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容，我们是无法设计出有趣个性化的设计的，比如下面这几款已经看不到 「 iOS 设计 」的应用。
官方的参数决定我们设计的下限，当你不知道该怎么做，或者设计的目标就是以系统原生的体验和视觉为准，那么照搬就行了。后面的文章要说的，就是脱离开这些束缚，正确自定义 UI 元素的尺寸。
UI 和平面不一样的地方，就是极其关注元素属性的具体数值。平面的排版无论是海报或画册，使用百分比、目测的形式就足以让我们做出很多优秀的作品，无需紧盯着其中出现的每个元素的长宽高数值。而 UI 的设计中，无论字体、图标还是按钮，都需要我们严谨地定义它们的长宽高，如下图设计一个按钮的操作。
这么做的原因是因为在电子屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最小的显示单位，一个点只能显示一个颜色，所以如果设置了带有小数点的数值，那么这个元素的边缘就会虚化。所以为了避免这种事情出现，我们就得用整数来定义元素的长和宽。
这当中还涉及到不少比较复杂的屏幕显示原理问题，尤其是和像素倍率相关的基础知识，我会在另外的文章里分享，后面文章所有的长度单位默认以 PT 为准，即 XD 和 Sketch 默认画布的单位，PS 中设计需要在这个基础上乘以2。
只有分隔线，是唯一可以不使用整数的例外，因为 1pt 的分隔线看起来会非常粗，一点也不精致，感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔，再导出到手机里观看效果。即使是官方应用，也主要使用 0.5pt 的线条做分隔。
无论在 iOS 或 Android 的规范中，也都提到过使用 8 x 8 的网格做辅助，这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。
实际上，我们在真实的设计环境中，建议大家使用 4 的倍数作为一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我们就可以使用一般的偶数如18、22、26等。
以上就是我们一开始要建立的元素尺寸原则，精简完即：
有了这样的原则，并养成习惯，我们就能在每次设计前对元素尺寸有个大致判断，然后再根据需要按 4 的倍数调整，如下面设计注册登录页面的输入框作为案例。
开始我使用 280 宽，44 高的尺寸，但是觉得有点僵硬，太正式了。这时候反思认为应该是输入框太矮导致的，所以高度上改成 44+(4×2)=52 。这时候又觉得太高了，实际输入内容也没那么宽，于是再对高减 4，宽减 40，获取最终结果。
所以，因为这样的操作原则，决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的（拖动效率太低），而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。
以上就是对与 UI 元素尺寸定义的第一部分，因为要讲清楚需要花的篇幅太长，所以我会将后面具体的案例讲解拆成 4 部分，分别由控件、文字、图标、组件部分组成。
这里要声明，在我的语系中，控件指的是在界面中最基本的交互单位，如按钮、滑块、开关、分页器等，更复杂的如动态卡片，功能快速入口等，就归入组件中，便于我们理解。
下面，会根据前面定义的规范，分别讲解控件应该使用的尺寸范围：
按钮是界面交互操作中使用最频繁的元素了，当然按钮呈现的形式也多种多样，比如可以是文字、图片、图标、卡通形象等等。在这里，我们只聚焦于矩形的基础按钮。
在进入具体参数的讲解前，要先理解按钮实际上是所有控件中最复杂的一个，并不是因为在设计样式上的复杂，而是因为按钮承载了最多的产品诉求，权重差异极大，例如看下面的案例。
在上图中，可以点击的东西不少，我们就说外观是标准样式的按钮，就有 9 个。而这里面，权重最高的必然是 「加入购物车」。权重最低的，应该是前往新品页。
定义按钮尺寸，我们首先要知道的是，按钮在界面或整个应用中的权重，尺寸和权重是成正比关系的。当然，颜色也是对重要性表现的关键因素，不过不在这里展开。
按钮高度
当我们设计按钮时，优先要从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权重，分成高、中、低三类：
高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步，它的最小高度应该从 40pt 开始递增，低于这个大小，那么这个按钮就很难在这个页面起到视觉支撑，因为感觉太细了。
中权重的按钮，类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高频的交互次数，我们必须得保证它易于点击。24pt 是在我经验中便于点击最小的尺寸了。这种按钮通常是组件的一部分，不像层级最高的按钮常常是处于一个孤立的空间，所以高度如果超出 40pt，就会对当前模块产生直观的破坏。
低权重的按钮，就类似查看更多、标签、详情等类型，相对于按钮的交互属性，这类按钮具备更多的提示属性，只要让用户能看见，又不需要太显眼。尺寸不大于 24pt，能容纳内部文字或图形元素即可。
使用上面这种方法，在页面中根据权重定尺寸就可以了。还需要注意的是，不同尺寸的按钮之间，高度的差距不要小于 4 ，否则差异太小不仅拉不开层次，还容易使视觉感受变差。
按钮宽度
主流的按钮都是横向的长方形，正方形也有，但是不能变成纵向的矩形。
按钮的宽度主要和内容挂钩，内容数量越多，按钮自然也就越宽。唯一的例外，只有高权重的按钮，可以无视内容的数量。因为它们需要更多的区域，往往都是撑满屏幕内容区域或全屏的，可以特殊处理。
普通按钮，左右间距距离内容过多，就会让按钮看起来非常的不协调。所以我们要根据内容来设置按钮左右的宽，最大宽度应该小于内容距离上下的 2 倍。
按钮圆角
按钮尺寸还有最后一个属性，就是按钮的圆角设置了。矩形的边角有三种类型，即直角矩形、圆角矩形、半圆矩形。
为矩形设置圆角，是为了让按钮看起来有一定的圆润感不会显得太尖锐，这种圆角的数值赋予要适当，只要超出了一定的范畴，就会对视觉的和谐产生影响，我习惯称呼为——半圆不圆，如下图右侧的错误案例。
所以，我们在设计圆角的过程中，一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围，不大于高度的 1/4。例如，一个24pt的圆角矩形，圆角的尺寸就应该不大于 6pt，如上图的效果。
以上就是按钮相关尺寸定义的说明，当然，在真实的设计需求中可能遇到很多无法满足的情况，这就需要大家多做尝试了。
输入框也是我们比较常用的元素之一，它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框，以及首页上方的搜索栏了。
输入框的使用高度尺寸，常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤，比如我用下面学生的案例做个演示。
常见的步进器，就是输入框和按钮的结合。左右有两个用来增加数量的按钮，中间是允许我们直接键入数字的输入框。在尺寸上，它也介于两者之间，高度在 28 – 40 之间。下面我再用学员的作业做次演示，当低于 28 以后，就会发现在屏幕中的占比实在太小了。
步进器中常见的错误，是在我们设置圆角外框时，绘制左右两个按钮，并没有合理的减去内侧的圆角，这是绝对不应该忽略的细节。
下拉菜单要注意包含多种状态，默认、展开和选中。默认状态与输入框类似，主流的高度也使用 36-56pt。但是，当菜单展开后，下方多出来的选项菜单，就值得注意了。
菜单的宽度正常情况下与默认状态相同，而高度根据里面包含的选项数量决定。单行选项，高度是不大于默认的选项框的。新手很容易在弹出菜单中设定过小的高度，使整个控件看起来会非常的别扭。
开关也是按钮的一种形式，通常出现在设置页的列表中，上方就是它主流的几种样式。在设计开关的时候，要先确定一个矩形区域，高度使用 24-32pt，宽度则用 1:2 的比例。如高度使用 28pt，那么宽大致可以使用 56pt。之后再将细节填入。
滑块形式接近开关，通常在中间有一个操作节点，下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。
节点如果做的太小，不仅会显得难看，而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下面的横线，宽度由所在内容区域的宽决定，高度一般在1-4pt 之间。
指示器用来展示元素序列，虽然在 APP 中没有太重要的作用，但既然我们加进去，就要让它看起来和谐。大多数人在定义指示器时，不是太大，就是太小，可以只从后面提供的尺寸中选择，就能保证指示器的尺寸不会出错。
指示器主要是圆形和矩形两种形式：
提示红点也是大多数应用会使用的一个控件，它的大小应该在 24-32pt 之间。作为一个圆形，这个控件设计起来很容易，但设计师往往忽略一件事，那就是如果中间的数值超过 10 变成 2 位以后，要怎么处理。
在设计这样的元素时，我们要用一个矩形元素来表现，即画一个正方形，然后将圆角设成最大，那它看上去就是一个圆形。那么每增加一位字符，我们就需要为这个矩形增加该字符的宽度，可以用左右间距判断。
因为相同字号下，不同英文、数字的宽度都是不一样的，我们要根据实际输入的内容所增加的宽度，去增加圆点的宽度。
最后一个控件，就是分页控件了，安卓中的 Tabs。这个元素在设计时也受到排版空间的影响，较为宽松的排版风格，高度就比较大，若拥挤则反之。
下面是高度：
分页控件主要应用在头部和页面中部的组件中，如下方的案例：
虽然很多时候分页器是没有背景色的，但是背景矩形是必须画出来的，即隐藏填充和描边，这样我们就可以通过垂直居中的方式，来确定中间文字的位置。
一个完整的分页控件，里面会包含两个或以上的选项，所以定义每个选项的宽也是必要的。通常，我们有两种定义方法，一种是选项少时，直接进行均分显示，另一种是选项较多，采取定宽模式，宽度最小建议在 64pt 以上，才不会显得过度拥挤。
分页控件选项处于选中状态时，有的设计是修改背景色，有的是修改文字属性，但今天最常见的就是加入下划线。这个元素如果定义得不好，会让整个控件看起来非常粗糙，它需要在样式中能起到画龙点睛的作用。
下划线分为两种，一种是贴在控件底部的，另一种是在文字下方悬浮的。两种方式线条应该使用的高度都应该不大于 2pt。宽度的定义，第一种和每个选项背景区域相等，第二种则可以在 8-16pt 间（小于文字总宽）。下面是正确设计效果：
前面说到了不少元素的尺寸，那么真实应用的效果会如何呢？下面我就用原型的方式，不考虑样式与色彩将它们组合到完整的页面中去。
可以看到，模块大小很均衡，看上去不会觉得哪些地方太大或太小，只要稍加填充样式，那么就可以变成完整的设计稿了。
这些参数虽然不能覆盖所有特殊的状况和需求，但至少可以保证这些控件不会被设计得很奇怪。当你们没有对于特殊化风格设计的控制能力时，就先学会正确的使用上面的这些参数吧。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
1. 理论表述
任意一点移动到目标中心位置所需要的时间，与目标距离正相关，与目标大小负相关。
2. 研究背景
1954 年，Paul Morris Fitts 根据信息类比提出一个假设，该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数，却给了后来的交互研究人员极大的启发。
我们现在经常看到的 Shannon 公式（即上面那个公式）是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」，该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础，它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系：因为以 2 为底的指数函数是递增函数，所以，T 与 D 正相关（D 越大 T 越大），而与 W 负相关（W 越大 T 越小）。
人们做出一个移动指针的操作通常需要两步：
菲茨定律所包含的两点内容：
综合两者来看，菲茨定律中的 D 在第一步中起更为明显的作用，而 W 则主要影响第二步。所以菲茨定律所带给我们的启示，主要也是从这两方面入手。
案例1：系统右键菜单，微信弹出菜单
最典型的例子就是菜单，无论是 PC/Mac 中的右键菜单还是微信聊天页里面的加号键都遵循着这一原则。作为用户，点击这类按钮之后一定会有后续的任务和操作，所以这些任务都被安排在了距离所点击区域更近的菜单中。
案例2：夸克和 Safari 的 url 输入框位置比较
另外一个例子是浏览器的搜索栏输入框，现在已经有一些浏览器（比如简单搜索、夸克）会将输入框以及一些其他更常用操作置于底部，这是因为我们正常握持手机时，大拇指离底部更近，所以需要进行点击操作的话底部的输入框操作起来更方便，也更快。
这一点在现今的 APP 中做得已经非常到位了。
案例3：哈罗出行
作为哈罗单车租用操作的入口，页面中的「开锁」按钮做得足够大，用户可以轻易快速地点击到这个使用频率最大的按钮。登录（也就是开始）按钮也是一样的道理。
还有一个比较特殊的就是对于边角的利用，无论是在 Windows 还是在 MacOS 中，边角总是有一些比较重要的操作，比如 Windows 的「开始菜单」（在左下角），MacOS 的 Dock 栏（在底部）以及顶部状态栏，包括 Mac 特有的触发角。
案例4：MacOS 触发角设置
为什么微软和苹果不约而同地选择了在屏幕最边角放置这些权重相当之高的组件或者操作呢？在硬件设备中边角是一个极其特殊的存在，由于指针再怎么移动都不可能超越屏幕边界，只能停留在边界上，所以边界对于用户的操作来说是「无限可触发」的，这有什么意义呢？这意味着对于隐性存在的目标来说，W 趋于无限大。
既然 W 趋于无限大，根据公式时间 T 就趋于常量 a。
结论就是无论指针距离目标物多远，所需要花费的时间都已经达到了理论的最小值，轻松且高效。而在移动 APP 中同样有边角的应用，比如最近拿了 Google Play 设计大奖的 Drops。
案例5：Drops
创新的交互将屏幕底边充分的利用了起来，只要将单词移到底部，就代表用户已经记住这个单词了。注意整个底部都是可以触发的，而不仅仅是脑袋那个圆形区域。本来「移动」这个操作对于「按钮」来说更加繁琐，但是在 Drop 的应用场景下这样的移动反而没有觉得麻烦，滑起来相当带劲。
菲茨定律给我们的启示通常都是正向的，都是以缩短用户的操作时间为主要目标，但也有一些场景需要反其道而行之。比如如果遇到需要用户谨慎的操作时，可以逆向运用菲茨定律，增加操作的复杂度。
案例6：iPhone 关机和微信删除聊天窗
iPhone 的滑动关机延长了用户关机操作的时间，以提醒用户此操作为不可逆，需要谨慎操作。微信也是同理，甚至还缩小了删除按钮的大小，以达到警示的目的。
另一个典型就是弹出窗口的关闭按钮。
案例7：Luckin Coffee 的弹出窗
弹出窗口里一般都包含了开发商的推广、广告、运营活动等等，所以开发商会希望用户花尽量多的时间去注意到它们的内容，这时候鸡贼的开发商会把关闭按钮做得又小又远（远离视觉中心），让用户花更多的时间去寻找和点击它们，效果拔群。
注意点1：D 不能过分短
过分短的间距不仅无法提升操作效率，反而会造成视觉压力从而降低用户体验。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登录页面，理应操作得更迅捷方便，然而实际上除了视觉上造成额外的拥挤感、破坏画面负空间构成之外，我尝试着点了一下觉得十分逼仄挤手，所以过度缩减按钮间的间距并不合理。
注意点2：W 不能过分大
大尺寸的点击目标确实能够有效地降低用户操作成本，但是过分大的目标也会很直接地破坏画面的平衡，浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系，当按钮已经足够大时，再增大就没有什么体验上的提升了，如下图所示。
反面案例2：KEEP 魔改版
与唯物类似，当按钮大到一定程度之后，会对画面造成恐怖的破坏效果。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
现在大多数的 PM /交互/ UI 设计师，在设计产品的时候都是以 iOS 为基准 思考产品上的各种功能逻辑、交互状态，而很容易忽略了某些功能在 Android 里并不能「一稿适应两端」，部分产品差异在安卓上是不一样的。
所以本文就讲下 Android 和 iOS 9大产品/交互差异，希望你在日后的产品设计时，可以考虑到更多层面的知识点。
对在于一些虚拟商品的支付上，如 vip 会员、xx币，xx豆。iOS 和 Android 就存在不同的支付规则：Android 基本无限制，无抽成。而 iOS 限制比较多，而且要抽成大约 30% 的手续费。
举个例子：同样充值 30 元，Android 端会得到 300 金币，而在 iOS 中，只有 210 金币。正因这个抽成规则的不同（没办法，这是苹果硬性规定的），才会出现各种平台的虚拟货币，在 Android 和 iOS 中的充值比例是不一样的，如快手：
所以对于虚拟商品在 iOS 端的抽成规则，在产品设计时一定得考虑清楚，因为这关系产品的商业和盈利模式。通常有 2 种解决思路：
A. 让用户承担 30% 的抽成：
同样的价格，iOS 用户得到的商品少些
如同样充值 30 元，Android 端会得到 300 金币，而在 iOS 中，只有 210 金币。像快抖音、陌陌等各种货币充值。
同样的商品，iOS 用户支付更高的费用
如 3 个月的 vip 会员，Android 端定价是 58 元，iOS 端则可以设为 68 元。如优酷、腾讯视频的 vip 会员价格。
B. 公司自己承担 30% 的抽成：
如 iOS 端充值 30 元，公司实收 21 元，但 iOS 用户能得到和 Android 一样的 300 个金币。（理论上是有这个解决思路，但现实中很少有公司去实现，毕竟抽成成本就摆在那里）
另外还需要注意的是：因为抽成规则的不同，对于同一个 ID 的账户余额，在 Android 和 iOS 端中是不能通用的。因此在产品设计时需要将这点告知用户，预防用户犯错、以及恶意刷币。
Android 由于开源的特性，因此对接的都是第三方支付平台，如微信支付、支付宝、银联卡等。 而 iOS 出于系统的封闭性和安全性考虑，只能调用苹果自己的支付系统：登录 Apple ID ，然后用授权的支付方式（支付宝、银联卡）进行付款。
「状态栏」也就是我们手机界面最顶部的电池栏，它除了可以在不同背景里切换颜色外，在交互的触发上，Android 和 iOS 中也各不相同。
iOS ：用户在 Y 轴滚动了很长内容时，点击状态栏可以快速回到初始位置。
Android ：无论用户滚动了多长内容，都是点击无任何效果。
虽然这一交互差异是 iOS 专有的，但它却启发我们一个新的设计思路：在必要的时候，状态栏可以为产品承载新的交互状态。如网易的 LOFTER（ iOS 端），用户离开音乐播放界面时，状态栏就用于显示音乐信息和操作入口，方便用户在浏览其他内容时可以快速关闭音乐，极大提升了用户的操作效率。
这种大多应用于运营的「拉新」场景，为了能让新用户得到好处（红包、优惠券、更好看的内容等）。通常会让新用户下载产品 APP 领取。而由于 Android 与 iOS 的下载方式不同，会带来不同的交互状态和产品逻辑。
Android ：可以在当前页面（后台）下载，也可以在应用商店下载；过程中可以显示进度，且允许用户暂停下载；下载完成后调起安装页面，用户可以取消安装，也可以自动安装……正因为 Android 下载软件的各种便捷性，所以才会带来各种交互状态：未下载、下载中、暂停中、已下载但未安装、已安装。这些都是交互设计师需要特别注意的，每个不同的状态背后都会不同的产品逻辑。
iOS ：只能跳转到 App Store 里下载，所有下载流程和状态都是在那完成的，可以脱离开活动页面，相比于 Android 的下载方式就简单很多。跳转的方式可以是全屏幕，也可以是半屏。
Android ：由于安卓的开源特性，当有新版本时都会提示用户更新，且每个产品内部都带有「版本更新」入口。而更新的方式可分 2 种：
iOS ：而 iOS 端出于对用户体验的考虑，是禁止向用户提示版本更新信息的。这也是为什么绝大部分的 iOS 产品，都是没有「版本更新」入口的原因（像 QQ 、支付宝、百度网盘等大厂产品）。
即使有，点击了也直接跳转到 App Store 查看版本情况。且下载渠道都固定在 App Store 里。理所应当的，软件的更新方式也只能在 App Store 里进行，无法做到与 Android 一样后台下载、后台更新。
在手机键盘里输入文字时，iOS 由于系统的限制，对文字的发送指令只能在键盘上来完成，因此 iOS 用户的交互操作都全部集中在键盘右下角。
而 Android 端就灵活很多，不仅可以在键盘上执行发送指令，也可以在输入栏/搜索栏周边新增操作入口。
长按一张图片后，都会弹出一个列表浮层，因为 iOS 手机只有一个「Home 键」 而已，为方便用户退出浮层才增加了「取消」入口。
而 Android 手机本来就有「返回」虚拟键，安卓用户的退出/返回行为都习惯于通过虚拟键触发，所以多做一个「取消」的意义性不大。
iOS 端一直教育着用户使用「左滑」删除列表信息，所有的删除功能都是支持「左滑」来实现的。
而 Android 系统大部分只能通过「长按」来触发编辑状态，其中就包括了删除功能。
不过现在也有极少数的产品，正在逐渐打破这两端间的「删减」界限，比如网易邮箱（Android）就做到了左滑删除信息。
当我们第一次打开产品、允许了获取消息通知的权限后，所有的信息传输都会基于服务器进行推送。而两端在这块的推送机制又有所不同：
iOS ：所有新信息都会实时推送到你的手机里，即使你关闭了软件，还是一样会收到提示。就算是你处于断网状态，信息也会先储存于苹果服务器，等你联网时再一次性把收到的信息推送给你。既释放手机内存，又不会让用户遗漏有新消息。
Android ：而安卓则不同，你若退出了产品，数据的推送只有等你再次打开产品时，才会通知你有多少新信息。虽然减少了对用户的干扰性，但也增加了服务器数据储存的压力，还容易耽误用户接收新消息。
也就是我们手机的搜狗输入法键盘，在微信聊天内、手机短信里复制了一段内容后，由于 Android 与 iOS 的平台特性差异，会给两端用户带来不同的交互差异。
iOS ：复制完文字后，打开输入法键盘会显示来自剪切板的文字内容。用户只需点击，即可将文字复制在搜索栏、输入栏等需要文字填写的操作区域里，无需触发「粘贴」操作。
Android ：而有些安卓机（如小米/锤子/乐视等)，无论你复制了什么信息（文字、数字、网址等），都很难实现输入法里的「剪切板」功能。用户需要触发「粘贴」功能，才能输入刚刚的复制内容。
而对于特定的信息类型：如网址。用户复制网址往往都带有极强的目标性、搜索性，一些浏览器产品会预判用户这一操作行为，将复制的网址前置展示出来，以抵消 Android 端对于复制文字带来的系统限制。如 QQ 浏览器（安卓端）就有 2 种解法方法：
方法1：利用安卓系统的消息权限，在手机界面的顶部弹出网址栏提示，无论是在微信还是短信中，复制网址后都能快速地触达目标。
方法2：复制网址后打开搜索功能，会将网址自动定位并粘贴到搜索栏中，便于用户查询。
而 UC 和百度也有类似的解决办法：将复制后的广泛信息（文字/数字/网址/邮箱地址等等）嵌入在搜索框下方，用户点击就能搜索。
这也是一种妥当的解决方法，因为用户可复制的信息类型特别广泛、目标不是很清晰。无法准确判断出用户一定会有搜索诉求。所以才将复制后的信息放在搜索框下面，而不是自动粘贴到搜索框中，既考虑了用户目标，又兼顾了操作效率。
以上就是 Android 与 iOS 的差异总结，若有描述得不当请多指教！下面是总结文件。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
@布莱恩臣 ：iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
希望本文内容可以对你有所启发。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
近年来，互联网进入下半场，C 端流量红利逐渐消退，很多企业转向了 B 端服务，随之而来的是产品设计者的转型，现在越来越多的 C 端产品设计师开始涉足到 B 端产品的设计，这是一个知识迁移的过程，需要认识到这 2 类产品的特点和区别，你才能够快速适应这个迁移的过程。
在互联网和信息化高度发达的今天，我们都是 B 端和 C 端产品的用户，能切身体会到产品的好坏，那么两个完全不同类别的产品放在一起时，会有什么新发现呢？今天想通过自己的设计历程，来梳理这 2 种产品的区别和价值。
C 全称是 Customer，即消费者（泛指用户）的产品，个人用户或终端用户，使用的是客户端。例如：微信、网易新闻、网易云音乐、有道翻译官、网易考拉等等。
B 全称是 Business，即商家（泛指企业）的产品，通常是企业或商家，为工作或商业目的而使用的系统型软件、工具或平台。例如：京东云、阿里云、网易云、网易有数或企业内部的 ERP 系统等等。
1. 都要给人使用
小到打车、外卖和购物软件，大到逻辑复杂连产品经理有时候都犯糊涂的企业级业务系统，无论个人用户，还是企业用户，本质都是由人来使用，只不过产品类型不同。
2. 都要兼顾用户体验和业务之间的平衡
既然是给人来使用的产品，就要兼顾用户体验和业务之间的平衡。无论是 C 端或 B 端，谁都不愿意使用一个不好用且耽误效率的产品，当然还是会有一些用户体验较差，用户又不得不使用的产品存在，因为它可能具有一定的垄断性质，或者在某些场景下被强迫使用，用户本身是别无选择的。但不能说用户体验就不重要，只能说对于业务更复杂、为工作而生的 B 端产品来说，想要做好这一点会比 C 端更困难。
3. 都要坚守做产品设计的核心思想
对于每一个产品设计者来说，「在什么场景下为怎样的用户（客户）采取什么方法解决哪些问题」，这句话是再熟悉不过了，也是经常讨论或挂在嘴边的话。可是面对工作中蜂拥而至、突如其来的事情时，却又常常容易忽略掉。就像是一个人如果太饿了，只顾着吃饭填饱肚子，却忘记了吃了什么。
首先，我们明确一下 C 端产品和 B 端产品的用户是谁，产品给哪些人用？
C端
产品是面向个人用户，服务于每个脱离「企业」场景之外的人，也就是生活场景。他需要做更细致的用户画像，比如：用户的年龄、职业、文化程度、收入水平、工作单位、个人喜好等都会影响到功能设计，每个人都可以对产品提出优化意见，这个意见只代表个人，而不是任何社会群体，但这些意见只要被产品经理验证是可以提升产品价值的，就可能会排进迭代周期内。
相对来说，C 端产品不管从服务范围、渗透力、密度都远远超过 B 端，原因是因为它面向的用户群体更广泛，用一个核心功能解决大多数人的一个主要诉求，我们每个人随时随地都可以成为 C 端用户，可选用的产品也非常多，产品团队更多的思考是让我们更长时间的停留在产品上面，让用户有更高的粘性和活跃度，需要利用产品的特色功能和优质体验来吸引我们，并解决我们在生活便利和情绪方面的问题，让我们享受这些服务并为此买单。
B端
产品则是服务于企业用户，这个「企业」可以是一个组织、商家、团队，是某种经营的主体，当然使用者也是个人，不过这个「个人」是代表了组织中的某个角色而已。这类人无论性别、年龄、地区有何差异，他们都是一类角色，比如企业中的项目总监、项目经理、项目顾问，我们的产品要提供给这类角色使用，而不是某个人使用。假设我们做一个项目管理系统，主要提供给项目经理使用，张三和李四都是产品的用户，也许张三在工作之外是个活泼少女，喜欢刷短视频、购物、旅游，被简约的界面风格所折服；李四却是个内向宅男，喜欢宅在家里打游戏、看书，喜欢炫酷的界面风格，但他们的个人喜好都无法影响系统功能的设计。这里说的功能设计的主要依据就是企业对项目经理这个角色的业务定位和考核目标，他们共同的角色都是项目经理，所以系统只需要提供项目经理相应的功能和体验即可。
所以功能设计需要是多个业务功能满足特定人群的多个需求、多个场景，他所面对的用户具有特定的职业属性，也就是说他的用户只会在「工作」的场景下使用他，有些还是强制使用，个人没有选择余地，因为付费者是企业领导，而不是基层员工，而使用最多的反而是基层员工，所以 B 端产品的用户关系会比 C 端更集中、更垂直，做功能设计时，要权衡付费者和使用者之间的利弊，他们要求产品的时效性，注重如何满足企业用户的既定目标。
C端
它会存在于生活中的各种场景下，而且自由度非常高，当然也包含工作场景，比如我在坐地铁时刷一下朋友圈、在睡前打开网易云听歌、在工作间隙上点了一份外卖、周末变身肥宅吃了一天鸡等等，所以 C 端产品的使用场景是碎片化的，用户并不会连续几个小时一直盯着同一个 APP，而是在多个应用之间随意切换。比如落地成盒了会打开微信回复消息，歌听乏了去看看电子书等等，所以我们看到一些比较优秀的产品，他们都在内容和用户体验上下足了功夫，目的就是为了留存用户，减少跳出率。因此 C 端产品更讲究操作直接，信息简洁，有娱乐性、社交性、可倾诉性，是为了解决生活上的问题而生，寄生于我们的情绪之中，被产品的情感化设计所折服。
B端
与 C 端正好相反，他们是为了工作而使用这个产品，因此他们必然要长时间使用产品，而且是沉浸式使用，同时使用频率是可预测的，他们并不能带着个人喜好去使用，不能说这个产品太难用了，我就可以不用了。比如上下班打卡，公司要求用 A 产品，你觉得不好用，就推荐大家使用 B 产品，对不起，虽然你是产品真正的使用者，但决策权和付费者是高层领导。个人的情绪左右不了使用场景。所以 B 端产品更讲究严谨的流程设计、贴近现实的场景面积、低风险、高效率、数据精准。它是为了解决工作上的问题而生，寄生于企业制度之中，被产品的用户体验影响着工作效率。
C端
满足自我情绪。
比如社交类产品就是构建「聊天」方式，这个聊天可以是语音、文字、图片、分享等形式，解决个人在情感、空间、工作、虚荣、欲望等情绪问题。在核心功能之外还可以附加一些「增值功能」，比如设置好友查看权限、购买 VIP 等，这都是为了提高产品的使用价值和盈利口径。
因此 C 端产品通常只有一个核心功能（比如音乐类 app 的核心功能就是听音乐，阅读类 app 的核心功能就是阅读，游戏类 app 的核心功能就是游戏），多个辅助功能，核心功能影响着产品的特色、定位、调性，而合理的辅助功能则会让产品保值增值、增强产品与产品之间的差异化，如果去除这些附加功能，产品的体验会受到一定影响，但实际上并不会阻碍用户使用核心功能。例如：去除了评论功能，但用户依旧可以听音乐；去除了打赏功能，同样也不影响用户阅读文章和作者写文章；去除了分享，用户还是可以愉快地吃鸡。
所以 C 端产品的特性可以归纳为「分享」，前面所提到的「评论」、「打赏」其实都基于「分享」的场景下，即：让他人听见「我」的声音、看见「我」的想法、赞同「我」的观点，满足双方的情绪设定。
盈利方式：内容付费、广告付费、平台抽成、增值服务（VIP、卡券、权限等）。
B端
共同完成一个目标。
日常使用产品工作的人，自己是无法独立完成一个任务的，他需要和周围的人协同完成一个任务流程的闭环，比如我发起一个请假申请，以「完成」和「打回」作为流程结点，根据企业制度设定，这个流程中会涉及到 3 种角色：发起人（我）、审核人（上级）、归档人（人事或行政）。
B 端产品的业务逻辑是复杂和多变的，尤其是权限系统，往往每个人都是流程中一个非常小的部分，就如上段所说，需要进行协作使用，这里不能穷举出每个业务，因为不同的公司业务则完全不一样，公司可以对该产品当中的功能选择性购买或租赁。而对实际用户来说，这个产品没有功能的层级，自己负责哪一块，哪一块就是他的主要任务、经常使用的功能。也就是说，从功能架构上看，这些核心功能都是扁平的，他们分配到各种使用角色的手中，没有先后排名。
而 B 端产品的本质则是满足用户的工作需要，但这从来不是单一的功能就可以满足的，这里一定包括了多项功能的组合及嵌套应用支持。当用户需要绘制多种不同类型的图表时，产品就绝不能只提供单项类型的图表功能。比如：甲公司的产品只能画柱状图，而乙公司的产品却能画 10 种甚至更多不同类型的图表，以适应不同需求场景，若你是客户，你会选择购买哪个产品呢？
盈利方式：按功能模块付费、按使用人数付费、需求付费、后期维护费用。
C端
更多满足使用者的日常生活需求，所以需求来源会多样化一些，因为目的都是拉新、促活、留存、转化、裂变。像竞品分析、数据分析、用户行为分析都可能帮助挖掘出有价值的需求。我们也有很多时候因为朋友在用这个产品，或者看到产品的广告才下载这个应用，但下载以后用来干什么，那只有等我们有诉求的时候才会再次打开应用，这个诉求可能是空虚、无聊、想购物了等等。所以很多普通用户根本不知道自己的真实需求是什么，甚至有时阴差阳错打开某应用，然后被里面的买家秀、活动促销等运营模块所吸引，最后产生购买欲望。
因此，C 端产品就是站在上帝的视角，需求直接来源于用户的行为和反馈，从用户这里获取最真实的诉求。产品设计者则需要关注市场流行趋势，关注用户偏好及意见，将有效的分析结果转化为产品需求，再输出功能，引导用户产生共鸣，并通过一些运营手段，增加转化（变现）概率和裂变的辐射面积。
B端
B 端产品更多是基于已有的「业务」形态，把传统线下工作，通过程序化、系统化、信息化转换为线上行为，使业务的流转效率更高，办公成本更低。所以更要求产品设计者能熟练掌握相应的行业知识、捋清业务逻辑。
需求一般来源于产品战略定位、各部门对接、租户（客户、外部付费者）的个性需求，有些靠销售企业软件盈利的公司为了把职责再细分，通常会配置指定的一线顾问来对接租户的需求及跟进服务，然后再将需求反馈到负责这个产品的产品经理，产品经理在这里就是负责收集需求、分析、规划、设定开发优先级，然后交由开发团队进行接下来的产品设计等工作。
B 端产品的客户可能不在网上，而是在全国各地的企业里，往往需要通过老板和销售才能接触到客户，这会造成不能获取真实的客户需求，我把这种现象叫做「需求断层」。所以最好的调研方式就是做一个「面对面」的用户访谈，可以真实的面对面、也可以是视频或者电话沟通，这能容易把复制的需求沟通清楚，而不是通过邮件和文字。因为目标用户有固定的职业领域，有时候你所设计的流程你认为最合理，但和他们实际使用起来却有很大的差异，所以和真实用户面对面聊聊他们的工作习惯和业务规则，这一定能够帮助到你设计产品。
很多时候，做的产品只是为了满足付费者（即高层领导）的需求，而不是实际用户（即基层工作者），导致实际用户吐槽产品易用性差，其实是改变了他们的工作习惯而引发的抱怨，然而领导却达到了监控和实时获取数据的目的。因此在收集这些需求时，会受到来自付费者和真实用户 2 种角色声音的影响，这就需要产品设计者具有更理性的思考方式和处理手段。
C端-流量思维
做 C 端产品设计，我们一切行为的出发点，都是流量，流量直接影响着变现，无论是外部的流量引入、各环节的转化、留存策略，还是产品体验的提升、流程的优化、资源的投入，我们都是在为提升流量、转化流量服务。我们经常做的各种活动专题、分析各类数据，去追求所谓的情怀、情感化设计，其根本还是为了引流，想方设法从全网获取流量，从而来提升产品的转化率，这是一切 C 端产品的宗旨，没有流量的产品只是一个花瓶。
B端-效率思维
对于 B 端产品，我们更多关注的是效率，不管是面向外部客户，还是服务于公司内部各业务角色/部门，B 端产品要解决的始终都是如何提升企业的运营效率（即工作效率），解决的是「开源节流」中的节流部分。所以我们会通过流程优化、工具打磨、策略调整，去提升各个环节的人效，降低各方面成本，从根本上提升企业效率，这点从我们做流程设计的时候能清晰的反应出来，设计目标都是在合理且效率的基础上，让用户舒适的完成这个流程，并不是说企业投入资金购买了一款数据统计软件，结果数据统计还没有人工来的精准、方便。
C端
在 C 端产品设计的过程中，我们首先要明确核心功能是给哪些目标用户使用的，也就是我们最初的设计目标是什么，需要保持产品的场景多样化，突出核心功能，因为 C 端产品的同质化现象非常严重，因此我们要好好思考，如何将我们的产品在众多产品中脱颖而出，如何让产品的品牌设计辐射到更多的地方，如何在功能和体验上寻找新的亮点。
再者就是要保持良好运营手段，因为 C 端的用户是自由的（忠诚度低，随时可以换产品使用），所以需要通过一些运营手段来绑定用户的留存。C 端产品的本质都是一个核心功能，所以设计师在产品初期时就需要全盘考虑，哪个功能是产品最核心、最不可丢弃的，哪个功能是锦上添花，为了提升产品的附加价值的。因此，我们抛开这些基本原则，还需要对用户行为进行塑造，塑造用户行为就是「绑架」用户。
把握关键时机：把握用户在使用 C 端产品过程中注意力的关键时机，用户在使用产品的过程中，注意力的分配是不均等的，比如同类产品太多，先下载 2、3 个试用，进到产品里不知道干什么，随便逛逛，逛着逛着就删除 APP 了，这就是典型的没有把握用户关键时机，没有提供给用户有用的东西，败在了产品策略和本能层次。没有在第一时间让用户知道产品是干什么的？能从中得到什么？亮点内容在哪里？是如何引导我使用的？那么作为产品的界面设计师就需要知道在哪些关键节点上，用户的注意力是集中的，哪些节点是分散的，如何引导用户关注这个点。
所以通过研究这些用户在使用过程中的关键节点，可以抓住关键时机，来达到塑造用户行为的目的。那么，这些所谓的「关键」时机反映在注意力理论下，对应的就是注意的「中心点」，反之为「分散点」。用户在使用产品的时候，注意力总是从中心和边缘来回切换。
举个例子：让交互设计师在信息流页面做一个阅读提示，用于用户在更新消息流之后的场景，目的是能让用户发现更新之前的阅读位置，并在此处刷新，不让重复信息出现，不影响用户体验。那么下图中哪个方案更合适？
中心点：「上次看到这里，点击刷新」的提示消息出现在此位置和时机是有讲究的，由于它们出现在旧消息之前，新刷新的消息之后，用户的阅读注意力正在从新的信息流转到旧的信息流，中间会出现注意力断层的中心点。所以在此出现的提示更容易被用户察觉，提示内容才能发挥更大的价值，因此 A 方案最合适。
分散点：B方案中消息提示在用户刷新之后出现在底部，虽然该方式在 toast 的层级里，干扰性是最低的，因为它的位置在底部，会适当减少用户浏览内容时所产生的干扰，但是从用户行为路径上看，显然不合适，用户的行为是要翻阅信息流，而它的出现方式与「翻阅」的行为是相违背的，反观还是会阻碍用户的浏览，虽然它的感知程度很强，能让用户第一眼发现这个贴心的功能，但是出现的时机不对，这就影响了用户体验。
增加趣味性：所谓趣味性，是指能引发用户的正面情绪，比如使人感到愉悦、有意思，能感染人、打动人、教育人，这是能够引起用户注意力的重要因素。
增加产品趣味性的途径有很多种，就拿微信 H5 为例：
随着 H5 页面技术上的突破和微信推广程序井喷式的发展，微信 H5 推广领域已经成为各大 C 端产品的必争之地。推广的形式可以基于 H5 的框架进行多种形式的拓展，比如：小游戏、邀请好友赢红包、小程序等等。微信端 H5 推广的优点就是将推广的趣味性融入产品当中，将营销手段运用在用户使用过程中。这样做的好处显而易见，通过趣味的游戏程序打开市场的缺口，用户基于推广程序的趣味性，有很强的分享动机。
说到分享动机，就不得不说最近刷爆朋友圈的《能进***的个个都是人才》，这个长图就很有意思，每段内容都能让用户产生共鸣，根本想不到这是篇广告推文，直到最后一小段内容才曝光了品牌和产品，但效果显而易见（短短几天阅读量10万+），所以这种趣味性的运营方式很容易带动用户去分享，分享即裂变式传播，而 C 端产品的运营目的就是引流、裂变。
增加创意性：王者荣耀无疑是近年来受众最广、用户最多、盈利最大的线上手游。我们通过分析这样一个标杆级的产品，可以得出创意对一个产品的成功与否到底起了什么作用？这款游戏火到咖啡厅一群人坐在那里玩一中午的原因在哪里？我想用我设计的眼光去审视一下王者荣耀，它到底为广大玩家提供了一种怎样的体验？
「容易上手」几乎是王者荣耀玩家的共同感觉，而这种直观感觉决定了一款手游能在多大程度上流行。一方面，王者荣耀采用了双轮盘（左右两边一个操控区域）的操控方式，玩家通过左右两边的虚拟按钮进行控制，同时可以控制自动攻击。新手玩家默认自动攻击，从可玩性角度很大程度上减少了用户的学习成本。
双轮盘的操作方式并不是王者荣耀首创，但是他却成就了这种经典的交互方式，为后来产品树立了一个成功的典范。操作方式的创新点还在于取消技能施法的方式。区别于 PC 端游戏，移动终端没有鼠标来控制技能释放与否，王者荣耀采用技能滑至右上取消的方式，创新性地解决了小屏幕交互上存在的问题。
除了以上几个设计点外，C 端产品的设计手段还有很多，主要包括：推送提醒、各种红点提示、弹窗提示、嵌入广告、分享刺激、打赏刺激等。无论采用任何设计方法，其核心的目标始终是落在用户的注意力上，通过吸引用户注意的方式，达到塑造用户行为的目的。
B端
产品设计者对于用户的需求在一定程度上是可知的，所以 B 端产品是辅助用户行为，比如我们要做一个企业报销系统，这些流程和工作行为已经有一套标准的流程了，我们只需要将这些场景转化为流程设计。那这个系统会存在哪些场景，只需要找到相应的使用角色一聊就能挖掘出来，而且场景相对较固定，不用考虑用户是不是喜欢这个功能，因为这是公司制度要求，不喜欢也得用。因此在设计初期，我们要做的就是充分挖掘相应的功能需求，尽量把流程做到完善，而在设计上要有：合理的功能与模块划分、严谨的业务流程设计、一致性的操作体验、干净简洁的界面设计。
合理的功能与模块划分：即在做产品信息架构时，就需要仔细考虑功能、模块的划分，客户常用功能模块有哪些，模块与模块之间的关系是怎样的，当然有些产品版本是通过客户需求进行个性化设计的，比如有的客户要求为他们企业单独设计一套工作流程，那么怎样组合该客户的功能模块呢，这也是做 B 端产品经常遇到的需求。而对于不同岗位的人员，他们的权限划分也是不同的，比如在不同权限人员登录时显示的页面有哪些不同？能查看到的模块有哪些，里面的界面状态是怎样的？如果某岗位人员拥有不同的权限范围，怎么设置他的功能可见性？不同权限的人员怎么协同工作？需要多人协作办公时，如何进行业务上的移交、提醒、工作流的显示？这些都是设计师需要仔细考虑的点。
都说 B 端产品业务复杂，细分下来，权限设计就是最要花心思的，因为它涉及到不同的用户角色、岗位、场景，不能像 C 端那样常规化。
严谨的业务流程设计：B 端产品不用揣测客户打开产品会干什么、引导他干什么，因为他是工作软件，在使用时，客户必然有明确的目的，需要什么他自己会打开，因为都是他们自己最熟悉的业务范围。总不可能利用碎片化的时间在工作软件上休闲一下吧，这个场景明显不成立。同时，设计师需要对产品的行业和业务具有一定的了解，如果产品只针对单一行业，设计师只需要了解对应行业的特性和需求即可，若是平台类产品，需要面向多元行业，那设计师就需要了解所有的目标行业特性，找到他们的异同点，针对不同使用场景，分析客户的具体需求，最后产出合理且专业的流程方案。如果你不了解客户的工作业务，你就不能有质量的产出他们满意的流程方案，所以做 B 端产品不光要学习本职岗位的技能，还要了解目标客户他们的工作流程、业务知识。
一致性的用户体验：无论是 B 端还是 C 端产品都应该遵循这一点，这是互联网产品最基本的素养。保持交互和视觉的一致性，让用户在使用时，能感到熟悉、亲切，能直观地了解到操作会带来怎样的结果。在用户疑惑时，及时给予反馈，在遇到困难时，给予帮助。在用户迷茫时，有效引导用户，这就是一款聪明的产品，它能够提前预知到用户的所想所需。同时，B 端产品的界面元素复用面积会比 C 端广而大，因此 B 端产品更应该注重交互的一致性。做过后台的都应该知道，一个提醒方式、一个表单控件，它们能覆盖到 80% 的页面。
干净简洁的界面设计：B 端产品是为了工作而生，界面里往往都是「内容为王」，不宜使用过于强烈的色彩对比，也不需要过于浮夸的设计，整体产品调性都应该尽量简洁，不要让视觉效果喧宾夺主，而应该减少干扰用户的「多余设计」。这里不是说炫酷的设计不实用，而是 B 端产品的目标用户不同于 C 端用户，B 端用户主要是通过产品来完成枯燥的工作，即便视觉效果做的再吸引用户，他们也不会给你的产品带来流量和黏度，因为买单者是高层，使用时间也相对固定。所以还不如把开发、设计的成本放在提升产品性能和流程体验上。
虽然我一名设计师，但毫无疑问，做 B 端产品必须要维持：功能为主的设计原则、视觉服务于功能的产品素养。这也是为什么很多 B 端产品喜欢用蓝色系的原因，因为与蓝色相关的负面信息很少，同时色彩上也不会过于强烈、刺激，一般人都不会排斥它，并且色彩含义也为理性、商务、科技，这就更适合 B 端产品的特性。
产品强调：刚需、痛点、高频、体验。
刚需
在 B 端产品设计中，我们往往面对的是刚需。用户会非常明确的告诉你，几乎无需挖掘，「我想要什么功能，我线下是怎么完成这个任务流程的，有这个功能我就付费，没有这个功能我就不买单」。当然，用户所讲并非用户所需，需求仍需要梳理和验证。
而为什么 C 端产品却要刻意强调「刚需」？因为 C 端产品的需求不同于 B 端产品，C 端产品的用户量大、散、广，缺乏组织性，需求具有模糊性，所以需要刻意去挖掘。经常看到一些产品 YY 出一些客户需求（「我」认为的设计），其实这些需求用户根本不需要。
痛点
在 B 端产品中，用户选择产品的决策过程中，有足够的说服时间和机会，另外价格也会是一个非常重要的参考因素。
而在 C 端产品中，用户喜欢更换成本较低（QQ和微信等社交类C端产品的更换成本很高，不在此列）、决策时间短，所以能否在极端的时间内，抓住用户痛点，就非常关键，比如通过运营活动和情感化的视觉设计，在短时间内引起用户的共鸣，形成热点式引流。如果不能抓住用户痛点，产品很可能不会被下载，即使被下载，使用频率也会非常低，渐渐的就藏在手机某个角落几个月不更新，从隐藏逐渐走向了删除，这样的产品就会丧失竞争力。所以很多 C 端产品经常推送一些运营消息，文案还特别吸引人，目的都是为了让用户回归，告诉你它还很想你。
高频
在 B 端产品中，用户使用频率是由业务和工作量决定的，所以提高 B 端产品用户使用频率的机会并不多，总不能节假日的时候推送一条消息「少年，快回来工作吧，加薪升职就是现在」，这样做毫无意义，也违背了它本身的商业价值。
而在 C 端产品中，用户粘性、付费率、转化率、活跃度等往往跟用户使用的频率紧密相连。C 端产品很多都是免费使用，通过增值服务收费，比如充值 VIP 享受更多特权等，只有通过免费的方式，让用户先使用，从而培养了使用频率，这才是增值服务收费的基础。所以高频和流量就成为了能否实现增值收费的关键点。
体验
C 端产品由于用户缺乏组织的压力，并且更换产品的成本低到没有，删除你就是几个交互手势而已，所以 C 端产品必须极其重视用户体验，想尽一切办法留住用户、锁住用户、让用户把产品当成生活中不可分割的一部分。
用户体验对 B 端产品也非常重要，但通常客户更重视功能、流程和效率，而用户体验则更多的体现在产品性能方面，试想你使用一款软件工作，由于产品性能响应非常迟钝，而且数据不精准，你一定会很抓狂，很有可能一天的工作计划被这款「该死」的产品所耽误，所以在用户体验上，性能要比界面更重要。
产品核心诉求：功能、流程、效率。
功能
不同于 C 端产品需要深入挖掘用户的需求，B 端产品的需求往往是非常明确的，在功能的场景覆盖面积上，和 C 端产品恰恰相反，功能多、大而全，这代表了一个 B 端产品的完整性。但这里所谓的「功能多」，并不是一些杂七杂八的锦上添花的功能，而是为了覆盖到更多业务场景的主要功能，这样才能拿去卖钱，才能给客户选择性使用，才有了更多的商业竞争机会。
至于功能过多而产生的学习成本过高现象，在 B 端领域也不是一个大问题，因为 B 端领域的客户往往需要专业的学习，客户也通常不会认为是负担，反而因为掌握了这些技能而实现了自身价值的增值，因为 B 端产品是公司主动要求员工使用的。其次我们作为 B 端产品的开发者，很多公司也会提供相应的业务培训和售后服务。
当然，SAAS 类产品（B端产品之一）由于免实施的特点，决定了功能要全面、又要容易上手的特点，所以 SAAS 产品是 B 端产品中最难设计的一种，需要在商业和体验之间权衡。
流程
既然 B 端产品要满足业务信息化的需求，那就必然涉及到流程设计。B 端系统必须要能贴合企业用户的业务流程才能正常运行，而不同企业的流程是不一样的，所以 B 端产品的流程设计是一个非常大的挑战。
因为很多时候 B 端产品是将线下的流程转移到线上，实现无纸化办公、敏捷办公，所以功能流程已经在线下有一套完善的流程了，只需要在现有的流程上做简化和整合即可，甚至一些线下的纸质文件在线上变成电子档时，客户都要求贴近原始文件，只有这样才能顺从之前的使用场景，降低学习成本，所以前面为什么说做 B 端产品设计要懂业务，就是因为产品里的功能流程是线下转移到线上，了解线下业务能帮助你更严谨地设计线上流程。
效率
B 端的产品的业务经常涉及到海量的数据，所以在 B 端产品中，效率远远比用户体验更重要，客户不是在休闲时刻把玩你的产品，而是通过你的产品完成工作任务。比如要上传 1000 条数据，那么批量上传等高效率的功能设计和性能保障，就比优化上传界面的用户体验要重要得多。
至今我们仍然可以看到有些商超还在用一些 DOS 平台上开发的收银系统，虽然这些系统已经非常陈旧、用户体验已经很差了。但是由于使用时间很长，而且效率非常高，所以依然保持着旺盛的生命力。
客户
使用 B 端产品的人或组织。说白了就是给钱的合作方，它们通常是一个企业，以企业或部门的名义，购买或租赁了你们公司所开发的产品。
用户
使用 C 端产品的人。而个人使用者则是不受工作场景限制的每个人，拿起一个产品就可以注册登录，并直接上手把玩。
客户是理性的，用户是感性的。客户关心 ROI（投入产出比），用户关心过程（满足人性的某个弱点）。
举个例子：双十一基本上成为一个全民狂欢节，很多人吃土也要剁手，为什么？因为便宜，很多人趁着氛围一冲动就各种买买买了。
但我们很少听说有 B 端产品在搞促销，一是因为企业的采购通常有计划安排，可能还需要财务的各种审批，不太可能刚好就在你促销的时候企业就需要采购；二是企业的采购要考虑投入产出比，而不会因为你打个折扣就决定买你家的商品，这关乎到企业利益和你自己的利益。
但个人用户不一样，购物车存了好长时间的商品，总是嫌贵舍不得买，可是看到双十一突然打5折，这下便有了冲动的借口，毕竟错过再等一年。
客户有级别之分，用户则基本一样
企业有大小之分，10 个人的微企业和 100 个人的小型企业是不一样的，同样 1000 个人的中型企业和 10000 个人的大型企业也不一样。更准确地说，对于同类产品不同大小的企业它们的需求是不一样的，可能因为企业的管理方式不一样，有些企业会提出一些个性化的需求。
比如同样需要内部沟通产品，10 个人的企业大家都坐在一个办公室里，需要找谁讨论问题，吼一嗓子隔壁公司都能听见，随时随意可以开会，需要的只是传播声音的载体──空气。
但如果是 100 个人的小型企业，可能吼一嗓子就没那么好用了，因为不是每个人都熟悉，并且座位可能会离的很远，这时候就需要一个微信群方便大家沟通，这时的传播载体是──微信群。
如果是 1000 人的中型企业，跨部门协作的场景就非常多，很多时候要找的人是不认识的，还有可能对方故意潜水半天不回信息，这个时候提高沟通效率就显得特别重要，所以「钉钉」和「企业微信」的「已读、未读」功能就很受这种场景的欢迎，对方是否在故意潜水，就看是不是已读，如果长时间未读那就可以通过语音或电话找，所以中型企业就很适合用这类产品。
那 10000 人以上的企业，可能「钉钉」和「企业微信」他们的原生功能也不一定能满足复杂的协同需求，需要更多人性化的功能，这种情况一般是自己开发相应功能，或外包给第三方开发，然后接入「钉钉」或「企业微信」。
上面说的是 B 端产品面向的客户有大小之分，下面我们来看看 C 端产品面向的用户是怎么基本一样的。
再拿微信举个例子，从身份地位、收入上看微信的用户也是千差万别，但是从微信满足的人性弱点角度来看（懒惰、窥窃、色欲、存在感、虚荣、贪婪、冲动、从众、分享、嫉妒等），用户与用户之间并没有什么区别。一位成功人士和一位无业游民都有懒惰、虚荣等缺点。只是严重程度可能有所差别，他们都有通过朋友圈各种「炫耀」的需求，只是炫耀的内容可能不一样而已。所以作为 C 端产品，理论上是能满足所有用户的需求的，当然有极少部分是不看不发朋友圈的，这种小概率群体可以不计算在内。所以 C 端产品留下来的用户，他们的需求都是被该产品所解决过的，因为这些用户都有相同的需求，虽然他们的身份都不一样。
工具的目标是性价比，玩具目标是休闲
性价比包含了两个指标，性能（效率）和价格。不难理解的是，企业之间的竞争本质上就是生产效率的竞争。所以企业采购的工具（B端产品）肯定是为了提高生产效率，比如各种管理系统是为了提高客户管理的效率，数据库系统是为了提高记录和运算的效率，在此基础上再横向对比价格，性价比最高的当然最适合。要吸引企业来购买产品，B 端产品不得不考虑产品效率和价格。
「玩具」的主要目标是好玩、休闲，这里指的都是用户体验，可以理解为用户通过碎片化的时间去享受产品给他带来的愉悦感、归属感、放松感，而用户体验则是吸引用户的重点。而满足人性弱点的体验就是好的体验，好的体验都出现在「聪明」的产品上，即「眼色活」、帮助用户思考、做到用户行为的前面去，讲的就是要满足用户「懒得思考」的弱点。比如我们都知道国民产品微信的用户体验做得很棒，其中有一点就是易用性，老年人都可以用的产品，满足了「懒」这一人性弱点，再加上其它的一些功能满足「虚荣（炫耀）」、「偷窥（看过去的朋友圈）」等弱点，就能让产品变得好玩，只有好玩才能引流，这正是 C 端产品追逐的目标，因为很多 C 端产品的商业模式都是建立在巨大的用户群体之上，有了流量，金钱也正在路上。
工具的生命周期比「玩具」的生命周期更长久
相对于 C 端产品，B 端产品的生命周期更长，一是因为 B 端产品作为业务工具，本身就比较复杂，开发这样的产品是需要大量的行业经验积累和技术积累，因此一款 B 端产品一旦赢得市场认可，就能建立经验和技术壁垒。二是 B 端产品基本都是要花钱购买的，一旦企业采购了该产品，员工也熟悉了如何使用，再换新的产品成本就比较大，所以更换的意愿会比较低。
C 端产品为好玩而存在，当新推出的产品更好玩的时候，那老产品的生命周期和地位可能要面临着挑战。比如 QQ 和微信推出后，短信就被替代了，同样是通讯类产品，微信和 QQ 就好玩很多。可能有人会说因为短信收费，这并不是最重要的原因，即便短信现在完全免费，估计也没几个人用了，因为微信不止能发消息，还能发各种表情、图片、语音、视频、支付等，自然前者就被后者所替代了。同理，当微信被玩腻，人们发现下一个产品更好玩时，微信也同样会受到挑战，可以对比下三年前和现在的朋友圈、订阅号原创文章的质量就明白了。对了，还有「昙花一现的子弹短信」。所有说产品都是有周期性的，只不过 C 端产品要比 B 端产品的生命周期更短。
工具复杂难用，玩具简单易用
B 端产品复杂难用这是众所周知的，而 C 端产品老人都可以用得很溜。为什么？一方面，B 端产品是工具类，用于生产，而不是我们的日常生活，使用工具很多时候不是人的本能行为，而是为了达到某一目的而学会的技能，因此一般是要经过培训学习才会使用，所以很多 B 端产品有售前/售后方案、使用手册、业务培训等等。
另一方面，这和 B 端产品的目标有关（效率、准确、安全），当开发资源都用在打造产品性能的时候，用在用户体验方面的开发资源难免会不足，所谓「功能先行」，就是这个道理。
而 C 端产品的目标就是易用性、易通性，只有用户体验做的比竞品好，才能赢得用户和流量。假如 C 端产品需要拿着产品说明书才能玩下去，那这种产品一定会被淘汰。
B端产品「卖软件」
之所以说 B 端产品的商业模式是「卖软件」，是因为 B 端产品实实在在的一手交钱一手交货，也就是说 B 端产品开发出来是要直接卖钱的。即 B 端产品从诞生第一天起就要考虑如何销售，甚至有些开发团队直接用原型 demo 去谈客户，最后还成交了。
通常来说一款 B 端产品如果能有几十万客户已经是用户量特别大的产品了，不像 C 端产品动不动就是上千万、上亿，甚至上十亿用户量。因此通过流量变现的方法是行不通的。可以想象如果一个企业工具里面插入各种杂七杂八的广告，这得受到多少企业用户的吐槽，关键是这些广告还不能直接变现，这里最基本的口碑就没了。另一方面，对于性价比高的 B 端产品，企业是愿意自主付费的。自然而然就形成了垂直变现的商业模式。
C端产品「秀软件」
C 端产品的商业模式通常是间接变现。通过开发出用户需要的产品，把产品的体验做好，内容形式有针对性，从而吸引更多的用户来使用。产品本身是免费的，比如百度，支付宝，微信等产品。在用户量足够大的前提下，通过广告、推广等方式变现，本质上就是流量间接变现的商业模式。之所以 C 端产品这么做，是因为用户群体足够庞大，当用户量足够大的时候，广告产生的收入就很可观，同时还能实现同类产品引流，把用户引导到各种「同父异母」的应用上，创造二次流量。比如「手机百度」看短视频必须要打开「全民小视频」和「好看视频」。
不少设计师在做过一段时间 B 端产品设计后会感觉缺乏激情和多样性，因为做酷炫的视觉效果和时尚的微交互的机会并非常有。时间一长就会发现它既无聊又单调，整天面对一些表单、可视化数据，何时才能出头？时间一长会怀疑人生。
正因如此，设计师们感受不到设计带来的成就感，如果不重新认清自我、调整好心态、设立工作计划，很容易原地踏步。这里不是说设计师不利于做 B 端产品，而是要结合自己的职业规划做选择。
我从 C 端转战 B 端之后，发现 B 端产品吸引我的有以下几点。
1. 更有挑战性
B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，一些专业性强的行业，甚至还需要一定的背景门槛，比如一些互金公司会帮助 PM 和设计师考取金融行业相关资格证。正因难度更大，设计 B 端产品才更具挑战性。
而C端产品目前各行业基本成熟，产品同质化相当严重，竞品中有大部分都差不多，设计师很多时候的工作就是在做领导和产品经理的需求，「借鉴、学习」成熟竞品的设计。而 B 端市场还处在发展中状态，现在正是市场红利的时候，竞品虽少，但商业竞争残酷，即便下载了竞品，你没有体验账号还是进不去的，所以从一定意义上讲，做 B 端产品的设计，很多时候都需要自己去调研用户需求，去摸索设计方法，并做出方案去验证它。对 UI 和交互设计师来说，复杂的业务场景和产品逻辑能让你养成严谨的设计习惯（思维），以后 UI 转交互，或转产品经理，B 端的设计经验都是一个非常牢固的基础。
2. 更能体现设计师的价值
上面也说了，C 端的成熟产品很多，产品也经过市场检验了，优秀的产品站在更高的角度，去除设计师自己的情怀来看，在一段时间内很难再有突破性的创新，只能在细节和体验上微创新，主要还是靠产品经理发现功能痛点或运营的手段，设计师在这种情况下发挥的价值有限，往往地位也很低下。一般的互联网公司，很多设计师都是执行者，很难参与到产品层面的工作，在开发眼里觉得设计师就是画图的。
3. 更能进行行业深耕
B 端设计师对行业、业务的了解远远深得多，他们做的不止是框架层和表现层的东西，每设计一个功能，必须要了解该功能在整个产业链的位置、功能目的，对其他业务环节有什么影响等等，只有对行业了解得更深入，才有更多的机会享受行业带来的红利。
以上是我的个人看法，当然设计师如何选择 C 端和 B 端，这和自己的兴趣、职业方向有非常大的关联。偏视觉的设计师做B端产品时肯定会有一些局限性，偏交互的设计师在你经历完 B 端的产品设计之后，你会发现 C 端的逻辑真的很简单。所以无论怎么选，请先考虑好自己的个人因素，并不能因为现在 B 端火，你就跟风，喜不喜欢、适不适合、能不能在 B 端领域生存下去，还是要看你自己。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
中国互联网公司的迅速发展正在推动着整个软件行业的审美革命，在 C 端产品市场逐渐饱和的情况下，互联网大厂正在将资本逐步转移到 B 端市场的广阔蓝海中。“B 端 C 端化”的设计理念也应运而生，认为可以用 C 端的模式和思维来进行 B 端产品的设计。
除了刚刚有说到的资本慢慢向 B 端市场的蓝海转移，还有一点就是中国互联网环境的迅速发展，智能手机的大范围普及，工作人群的年轻化，使得人们已经熟练的掌握了各种软件的使用，并且在快速迭代的产品中慢慢变得挑剔、谨慎。
并且不断优化迭代的互联网软件产品也在无形中为用户完成了底层认知的搭建，一些功能、操作、交互逻辑已经深入人心，用户也已经被教育成了”高玩”。
所以如今一些新型 B 端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层和表现层中与一些 C 端产品在一定程度保持了一致，这种设计理念其实也很好的解决了传统软件的复杂、门槛高、难用等痛点，很大程度降低了用户的认知成本和学习成本，把高效、简单、易用的工具带到大家的日常工作中。
对这个概念的理解我认为是：”B 端产品在使用体验和视觉感受这两个方面和 C 端产品接近”。这是我们设计师需要特别关注的，传统的思维中，大多数设计师会认为 B 端是给公司内部人员或者商家使用的，只是一个管理系统，并不需要太过于精细，至于体验也是停留在“能用就行”的程度。但是在我看来不管是 C 端还是 B 端，其实它的使用对象都是“人”，应该要遵循人们对于事物的认知和一系列复杂的人体工程学操作习惯。两者都需要关注用户在使用时的体验感受，顺畅的使用流程、清晰的信息展示和高效的行为效率，以及有效的引导都能够快速的帮助用户完成目标任务。无论是 C 端设计还是 B 端设计，满足这些条件无疑可以给用户带来更好的体验。
但是也不能以偏概全的认为 C 端的设计思维可以完全复用过来。B 端产品的场景其实比 C 端产品还是要复杂的多，应该说是各有各的侧重点，思维和设计模式上不能完全照搬，下面我就先说说它们各自的不同处，再举例带你看看 B 端产品在哪些方面可以向 C 端产品借鉴学习。
1. 使用者不同
B 端使用者多是同一个组织集体，以群体为单位进行协同。比如：老板、部门主管、员工或商户。而 C 端使用者相对比较单一，目标用户群体即是主要使用人群，使用目标、偏好、个性比较明确。
2. 业务不同：
B 端业务大多数会存在多重维度、场景，使用场景跟业务紧密相关，同一个系统不同角色使用时的业务处理和所关注的数据信息，侧重点会有很大的不同，需要全局考虑。不同角色使用产品的流程差异大，需要不同业务上更专业的解决方案。而 C 端业务一般维度比较单一，业务逻辑相对固定，任务路径和展示内容比较单一。
3. 价值主张不同：
B 端注重效率、成本、管控、数据分析等。追求产品的稳定性、业务的增长性，保证产品性能和技术上的安全性。而 C 端注重用户的体验、使用简单、有乐趣。
4. 产品思维不同：
B 端产品多数基于服务思维，工具化思维，更加理性；更多的是帮助 B 端用户提高效率，完成业务目标。而 C 端多数为产品化思维，游戏化思维，更感性，更多的是娱乐和情感的满足。
5. 产品形态不同：
B 端产品注重业务的梳理，多数会用到图表、表格、模型，多数产品形态偏向更垂直行业或更专业的面板形态。而 C 端更注重用户的感受，会用到很多夸张的动效，炫彩的颜色。
1. 结构层
结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面，并且要考虑他们完成事情之后能够去哪里。
具体在 B 端产品的表单交付场景下可以体现出，以前的 B 端表单往往过于冗长，借鉴 C 端一些注册场景的设计，把表单拆分成 3 步内的行为步骤，减少用户的疲惫感提升体验。
2. 框架层
产品的框架层包括：按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的。
具体在 B 端产品的列表页可以体现出，列表页中整体的按钮、文本区域的位置、搜索和筛选的布局设计其实与 C 端产品中的商品详情页是类似的，遵循用户的阅读顺序和视觉焦点来进行设计。
3. 表现层
视觉、听觉、（触觉）的体验设计。多体现在一些情感化的设计也被运用在了 B 端产品中。
反观现在 C 端产品的一些设计风格和流行趋势，有哪些可以运用在 B 端产品的设计中呢？
1. 3D 化
B 端因为对数据的展示有较强的需求，用户在使用过程中提高效率的判断纬度也包括信息数据的获取效率，而 3D 的视觉在数据可视化层面有着天然的优势，可以帮助用户更快速的理解数据维度所表达的核心价值。近年来网速等硬件设施的升级也为 3D 化视觉带来可落地的基础，设计师也尝试在产品设计中融入更多的 3D 化元素。
2. 情感化
人们对传统 B 端产品的印象往往是觉得它们比较枯燥、呆板的，如今一些新型的 B 端产品的设计理念也试图在抛开用户对于产品的这种既定印象，所以很多产品在往一些娱乐化、IP 化的方向尝试，并且都达到了一些比较好的效果，未来在这方面的思考和尝试只会越来越多。
3. 个性化
B 端产品的同质化严重，所以 B 端产品也需要从一些产品定位去定制更加富有个性的品牌基因，可以让用户产生对产品的感情，达到从同类产品中能够脱颖而出的目标。
不管是 B 端还是 C 端，目的都是为了解决业务场景中遇到的问题，使用对象都是人，都应该站在“人性”的角度考虑问题，有人说 B 端产品一般都不注重设计，C 端产品的设计更能满足设计师对美的追求，我只能说它们的侧重点不同，C 端更注重视觉感受，要做到在视觉表现的感性层面吸引用户，而 B 端其实更为复杂，需要做到底层的强大数据处理能力，产品的专业性包括交互、视觉的吸引力，这样才能从众多产品中得到用户的认可并脱颖而出。设计师还需要不断打磨细节和优化体验来吸引和留住用户。
所以说“B 端 C 端化”也只是在某些方面通用，但核心侧重点不同，不能以偏概全、一概而论，但可以借鉴与参考，B 端产品也可以做的很精彩。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
我发现很多新人设计师和我当年一样，有一个误区，认为做C端就是比做B端更好。尤其如果能做知名C端产品，想想都开心。
△ by Chris Ota @ Dribbble
我作为一个两者都做过的大厂设计师，想要总结一下自己多年的经验和观察。如果你还在犹豫选择做C端还是做B端，或者担心做B端不好，无论你是UX还是UI甚至是PM，都一定要用心看看：
P.S. 本文不能代表所有情况，只能代表很大一部分典型状态。
领导和客户，哪个更难搞定？
我觉得领导更难搞定。
很简单，如果作为一个基层设计师，你不知道自己有多少层领导，例如设计层、项目层、产品层、公司层甚至集团层…
而且，每一层可能还有不止一位领导。
更可怕的是，他们之间的意见可能统统不一样…
这还不包括一些与你意见相左的平级队友…
而方案评审有时还逐层递进，每一层改一次。好像升级打怪一样，你还统统无法拒绝。
经常是A、B、C、D方案随机组合各遍，最后发现又回到了原点…很多情况下，C端大公司里做设计，时间就是这么被消耗掉的。
那B端就好些吗？
不但要应付本公司的领导，而且还要应付对方的领导，层级还岂不是更多了？
并不是这样。
虽然领导数量变多了，然而金主经常只有一个——甲方公司内，即能够审批是否为该项目付费的领导。
对于B端公司来说，做项目的目标特别明确，那就是——能不能让甲方爽快给钱。
只要钱给够了其它都好说，不像C端公司那样，考虑的东西特别多：口碑、留存率、转化率、活跃度…
也就是说，即便本公司领导不喜欢你的方案，但只要金主爸爸喜欢了，一般就不会有什么问题，毕竟谁也不会和钱过不去。
当然，甲方内部自己意见不统一的情况也是有的，但一般外包项目都会有比较明确的负责人，所以很多时候也不会太复杂。
很多C端公司不重视汇报，很难开一次正儿八经的进度报告会。因为就那么几个人，反正办公室里抬头不见低头见，何必整那些“形式主义”。
甚至设计规范什么的，意思意思就好了，反正大家翻来覆去也就那么点页面，文档做精致了给谁看？
B端就不一样了。
一整个项目下来，真正和甲方面对面的机会不多，所以每次都一定要特别隆重：
明明只需要一个步骤，恨不得拆分成两个，一定要让金主爸爸感觉服务到位、物超所值，最好是能够多给点钱。
在C端公司工作，你会发现你学的那些设计流程根本用不上几个，因为绝大多数需求都小得跟拧螺丝钉差不多了。
当然，你申请C端工作的时候，作品集里的项目流程一环不能少，得整得跟造火箭一样。
C端公司通常不求数量，更求质量。自家产品的流量来之不易，必须长期迭代维护，才能不被竞争对手超越了。
结果需求越来越细，设计方案可以为要不要圆角、标题字体要不要大1号、留白要不要多2个像素之类的小问题争论半天…
B端就不一样了，就跟做饭店一样，讲的是翻台率。项目能够1个月搞定，就绝对不要拖到1个半月。
最好是永远不要迭代，一次过审，尽快拿钱收工走人。
至于细节问题，只要刚好够忽悠甲方那就够了，多一点都是浪费。
C端产品有点像快销时尚，隔一段时间就得改个版。也不是因为之前有什么问题，就是给用户换换口味，刺激一下他们的“消费欲”。
而且每推出一个新功能时，界面上最好是设计得有点个性，生怕用户感觉不够新奇，没有点击欲。
B端就不一样了，经常是项目一次性交付，只要不出问题就几乎不迭代。
甲方已经把价格压得这么低了，还追求什么个性风格？还不如全部组件化，一套规范搞定N个界面。不容易出错，还能把成本降到最低。
这句话不难理解，可以从前面的内容就可以推理而来。
C端追求个性，需要不断推陈出新，从感官上刺激用户，那么视觉设计的工作就不会少。
而由于C端产品的需求大多以局部迭代为主，少有大改或者从零到一的机会，所以交互上可以发挥的余地多少有些限制。
△ by Anton Mikhaltsov @ Dribbble
B端常用组件化设计，需要个性化的地方不多，很多后台页面甚至完全不需要视觉设计。
而且很多B端公司会将同一套视觉风格用到不同的项目中，顶多换个色调、改个首页风格。
而拼凑组件的工作，通常交互设计师就可以解决。
△ by Tom Koszyk for EL Passion @ Dribbble
最后说一点，我认为C端与B端没有高下之分，就看个人取舍。
但要注意的是，一旦你选择了其中一个，以后再换方向可能就没那么容易了，所以做选择是要谨慎。
转载请注明：优设网
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
Cs界面设计之二：如何区别B端与C端的产品设计差异？我总结了26条对比！
蓝蓝设计的小编 http://www.lanlanwork.com
