信息架构是产品的骨架。具体而言，就是一款产品有几个一级页面，以及支撑起整个产品的一级页面、二级页面各有几种内容样式。所谓一级页面，微信的“发现”页就是一个一级页面；在“发现”页点“朋友圈”，进去的就是一个二级页面。所谓内容样式，Banner 是一种内容样式，九宫格是一种内容样式，设置页面那种列表也是一种内容样式。
这样的信息架构，有什么价值？
01 信息架构的价值：掌控感与健康迭代
对用户而言，信息架构的主要价值在于掌控感；对产品而言，信息架构的主要价值在于健康迭代。
1. 掌控感
如果房间里很乱，到处都堆满了东西，常穿的衣服也找不到了，我们就很容易变得烦躁不安。相反，如果混乱的房间被收拾得很整洁，我们的心情也会随之变得愉悦起来。
这中间的原因是什么？
个人觉得，从原始社会到 21 世纪，我们人类一直生活在竞争中，所以一直在追求一种对生活的掌控感。这种掌控感，会让我们找到一种存在感和价值感，从而给身处竞争中的我们一种安全感。一个收拾得井然有序的房间，会让我们觉得一切尽在掌握中；一个胡乱塞满东西的房间，则会让我们觉得这个房间处于失控状态，从而引发烦躁不安。
一款 App，如果主要的几个一级页面也都塞满了各式各样的内容，那么用户通常也会感到烦躁不安。这是因为用户不能马上理出头绪，不能马上获得那种掌控感。另外，如果大的改版经常让用户体会到这种烦躁不安，用户就会对这款 App 感到不满和失望，甚至失去信心和期待。
所以说，信息架构的第一个价值，就是让用户始终有掌控感。
2. 健康迭代
产品的更新迭代，有时会出现“发福”和“微整形”的情况。这都属于不健康的迭代。
所谓发福，就是变得臃肿了，比如一级页面突然增加了很多内容样式。所谓微整形，就是和之前比有点乱套了，比如有的一级页面突然消失了、有的一级页面突然出现了、有些常用的功能突然找不到了，诸如此类。
一款产品，如果大的改版总是通过发福、甚至微整形的方式实现，用户就很难获得掌控感。
反过来，一个优秀的信息架构，是接近“冻龄”的。也就是说，不管产品怎么更新、怎么加新功能，都能简单如初，都能让用户马上获得掌控感。典型的例子是微信：微信已经加了很多功能，但整体给人的感觉依然是简单的。
这样的信息架构，很少发福，也几乎不做微整形，所以能让用户永远有掌控感，从而确保产品能够健康迭代。
02 怎样实现信息架构的价值
什么样的信息架构，能够实现“掌控感”和“健康迭代”？
其实参考答案刚才已经出现了，那就是接近冻龄的信息架构。或者更确切地说，是一种“以不变应万变”的信息架构。
这里的不变，是指信息架构看起来永远没有明显变化，永远都很简单。万变，是指不断新增的功能，不断变化的功能。
如何做到以不变应万变？一级页面和二级页面都很关键，其中最核心的是一级页面。这里也顺便抛一个问题：一级页面，用来干啥？
一级页面主要用来干三件事，分别是：提供掌控感、提供常用功能、提供小入口。也就是说，一级页面尤其要把掌控感给到用户，要让用户快速找到常用功能，同时还要为不常用的功能提供一个小入口。需要说明的是，这个理念可能不太适合一些商店类产品，比如淘宝这样的电商产品，所以仅供参考。
那如何完成这三件事？主要有以下四个要点。
1. 不要超过 4 个一级页面
4 个和 5 个，它俩之间存在微妙的区别。比如我们给手机号或银行卡号分段时，更喜欢每段最多分 4 个数字，而不是 5 个，直观对比见下图。
4 个还是 5 个
很多 App 的底部导航栏，也是只有 4 个Tab，即 4 个一级页面。受生活经验等因素影响，当我们看到 App 有 4 个一级页面时，内心或潜意识里可能会觉得：哦，4 个，还算简单，基本能记住；而当看到有 5 个一级页面时，可能会感到一丝压力：5 个啊，有点多了。
总的来说，我们更偏爱只有 4 个一级页面的产品，因为 4 个仍在简洁的范畴内，5 个就已经开始走向复杂。在《微信背后的产品观》这场分享中，张小龙也提到过：“微信保证只有 4 个底部 Tab。”
2. 不要超过 3 种内容样式
Keep 6.0 系列的“探索”页面有 5 种内容样式，显得很复杂。微信的 4 个一级页面中，“发现”和“我”页面只有 1 种内容样式，“微信”和“通讯录”页面只有 2 种内容样式（加上顶部的搜索框），显得非常简单，和 Keep 的对比如下图所示。
Keep 6.0 系列与微信的内容样式数量
像微信这种内容样式数量上的极简，可能很多产品难以做到。那么，我们不妨退而求其次，早期先从 1 种、2 种内容样式开始。后期加功能了，可以考虑第 3 种，谨慎考虑第 4 种，尽量不要增加第 5 种，因为一定会变得复杂。
大家可能会说，产品的功能很多，3 种内容样式不够用。
针对这种情况，只要逻辑上不存在大的问题（比如把“支付”放到“通讯录”页面），就可以尝试把不同内容合并成一种样式。微信在这方面就做得很好，大家可以参考它的设计。比如下图的“通讯录”页面，联系人上方那些内容，和联系人不是同一类内容，但它们共用一种内容样式——一个简单的图文列表。
微信“通讯录”页面：不同内容合并成一种样式
3. 不为二成需求，去打扰八成用户
产品设计里存在一个比较常见的问题，就是往一级页面塞很多内容或功能，其中有相当一部分是用户日常用不到的，这种设计容易让人觉得臃肿。比如 Keep 6.0 系列的“运动”页面，就用了较大空间来推荐付费计划和运营活动，如下图所示。
用较大空间来推荐付费计划和运营活动的 Keep 页面
相信有相当一部分用户是不需要这些内容的，所以这其实也是一种打扰。这种打扰会影响到这些用户对这个界面的掌控感。
这种现象有两个可能的原因。一是企业担心用户不用这些功能，所以就在一级页面用很多空间来展示它们，Keep 的例子应该属于此类。二是有部分用户提建议，所以企业就加了这些功能。
关于第一个原因，个人观点，有些功能本身就属于二成需求，在一级页面占用太多空间不仅改变不了这个现实，还会对用户形成打扰。
关于第二个原因，个人看法，用户的建议通常只代表个人立场，而企业至少要代表大部分用户的立场。比如，网上就有人建议微信在朋友圈加一个屏蔽别人的功能，实际上微信有这个功能，只是一直隐藏，没有放出来——因为用的人少，它属于二成需求，放出来的话会对八成用户形成打扰。
总的来说，理想情况是接受现实、尊重规律：是八成需求就提供八成空间，是二成需求就提供二成空间。具体参考如下图所示。
是八成需求就提供八成空间，是二成需求就提供二成空间
4. 尽量不在标题栏使用 Tab 或下拉框，增加维度
这其实是张小龙分享过的一个观点，我个人很赞同，就直接引用一下。下面直接看两个例子。Keep 6.0 系列的前三个一级页面，标题栏都使用了 Tab，就显得内容很多，有点复杂，如下图所示（仅展示前两个）。
使用了 Tab 的标题栏
微信中拥有标题栏的前三个一级页面，其标题栏都没有使用 Tab 或下拉框，就显得简单、内容少，如下图所示（仅展示前两个）。这也是微信保持简单的一个重要原因。
没有使用 Tab 的标题栏
结语
一般情况下，产品都需要更新迭代：增加新功能，完善旧功能。
用户则是一个矛盾体：一方面对新功能和新事物怀有好奇心；另一方面又希望每次打开常用的产品时，都有一种回到家一样的熟悉感和一种家里井然有序的掌控感。
好的做法，就是类似微信那样：尽管加了新功能，但是看起来没有明显变化。也就是说，以“不变”的信息架构，来应对万变的功能。
原文地址：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们来探讨下交互设计的善意。
善良常常被用来形容人，偶尔被用来形容产品，很少被用来形容交互设计。
就像人们会说，iPhone 有人文关怀，而很少会说，iPhone 的交互设计有人文关怀。在笔者看来，原因之一，是交互设计很难将人文关怀囊括完，而产品本身则基本可以。
类似的道理，本文探讨的善意，始于交互设计，但不局限于交互设计，还包括产品和企业的善意。
一家之言，欢迎交流探讨。
01 为什么选择善意？
一个 3 岁小孩流落街头，无家可归，会让无数人起恻隐之心。我们普通人的微小善意，有时可能是一种本能反应，或者说是一种感性反应。
“他内心是有时邪恶，还是对人们始终良善”，这是李宇春《年轻气盛》里的一句歌词。
恶是否为本能，笔者不知道。科学家的解释是，有些基因中会带有恶。可以肯定的是，善恶皆为人性，共存于人类当中。
感性和理性是会此消彼长的，林黛玉和薛宝钗就是两个极致的例子。同理，人类体内的善恶，也会此消彼长。
一款产品，在做决策时，很大程度上是基于理性。
这种理性决策，很多时候是无意为善，也无意为恶。但遗憾的是，那个非善非恶的中间地带不会一直存在，有些无意为善和无意为恶，最终会成为非善即恶，比如开屏页是否放广告这件小事（下文有详述）。
既然善恶会此消彼长，而且产品的有些理性决策会导致非善即恶，那么不可避免的，有时候，善恶会变成一道二选一的选择题。
接下来，我们就从理性的角度探讨下，为什么选择善意。
1 长期主义
最近几年，互联网从业者有个共识：创业是件九死一生的事儿。因为据数据统计，90% 的创业公司活不过三年。
这是一个值得深思的社会现象，背后的原因究竟是什么？直接原因，往往是资金断裂。深层原因，会有很多，比如产品不够好、方向不够准，等等。
那么，核心原因呢？笔者认为，和创始人的执念有关。
有两类执念可以避免此类悲剧。第一类是做出优秀产品；第二类是长期主义。
做出优秀产品这块，有很多例子，最典型之一是特斯拉。特斯拉曾面临多次危机（资金、产能等），但都挺过来了，这肯定和产品深受车主喜爱有关。
笔者也见过两个普通创业公司的例子。他们都有一颗做出好产品的心，都很重视 UI、交互、用户体验这些基础的东西，而且把 UI 做的比较优秀，交互和用户体验做的还不错。其中一家靠着用户的付费在平稳发展，另一家连产品带团队被大厂收购了。
长期主义这块，典型例子之一是巴菲特。巴菲特信仰并践行价值投资，价值投资依赖长期主义。最近几年，长期主义在国内也被越来越多的提及。
个人的理解，长期主义至少包含两个要点，分别是：积累、多赢。因为，没有积累就不会有成就，没有多赢成就就不会长久。
中国女排，世界冠军。排球界有个说法，叫三年成型，五年成才，八年成器。互联网行业，也大致如此。这是积累。
用户，员工，投资人，三方利益都兼顾好，才是多赢。
俗话说，顾客是上帝，大家都知道对用户好；投资人作为强势一方，利益也往往有保障；员工的利益是否有保障，往往取决于创始人，所以存在很大变数。
回到主题，长期主义和善意，有什么关系？
通常而言，多赢能否实现，关键在于员工的利益能否得到保障。
笔者在网上看过一个有意思的评论，说当下的年轻人，如果收入、成就感、高兴这三点有两点达不到，就会辞职。
所以，员工利益得到保障的标准，可以简单定义为“三中二“，即收入、成就感和愉悦这三点满足两点。
再来分析一下现状：相比员工，公司是强势一方；人们仍受最大程度剥削剩余价值、官僚思想等观念影响；恶性加班等风气存在；僧多粥少的就业行情。
在这样的大环境下，如果公司对员工没有爱和善意，员工的利益是很难得到保障的。
最后，总结一下：公司有善意，员工利益就有保障，就能实现多赢，从而有望实现长期主义。
2 美好生活
前段时间，因为给武汉捐款 5000 万、并且疫情期间蔬菜按成本价销售，一些网友被胖东来这个商超刷屏了。
胖东来来自河南许昌，一个三四线城市，也是笔者的家乡。目前仅在许昌和新乡有店。
在一些关于胖东来文章的评论区，很多网友在喊胖东来去自己的城市开店。
为什么有这么多呼声？简单分享几个例子。
顾客方面，胖东来有 6 类购物车，包含婴儿手推车、儿童购物车和老年人购物车。老年人购物车自带凳子，可供休息，同时还配有放大镜。
员工方面，有高薪、高福利和利润分红等。胖东来比较为业界称道的高福利有：每周二闭店，春节闭店 5 天，工龄满 1 年即有 30 天带薪年假，一天最多工作 7 个小时。
从网上的报道、评论以及公布于网上的企业文化来看，胖东来一方面主张工作和生活（爱情、家庭、休假等）的平衡，一方面在践行和传播幸福、快乐、尊重等很多积极的文化价值观。
看新闻的时候，笔者注意到，老板于东来经常会提到“美好”这个词儿。实际上，在笔者看来，胖东来本身就代表了一种美好生活，一种物质和精神双丰盛的美好生活。
对于这样的美好生活，用户和员工自然喜欢。可这对企业有什么好处？
胖东来曾经意欲退出新乡市场，新乡合作商家和市民纷纷请愿，政府也多次出面挽留，最终胖东来留下来了。可见，胖东来在新乡已经深入人心，顾客自然会大力支持它的发展。
胖东来有一句 slogon，能够很好的解释这一切，那就是：爱在胖东来。
同样，既提供体面的收入，又关注员工和用户的精神需求，给他们带去美好生活，当然需要更大更多的善意。
在当下中国，能提供高薪的互联网公司已经很多了，但是能在精神层面让员工感觉良好、感觉愉悦、感觉幸福和快乐的公司却为数不多。
对于所有企业而言，这又何尝不是一种机会？
02 交互设计里，有哪些善意？
现实中，像胖东来给顾客和员工提供的这种美好生活不常有。但是退一步讲，还是有很多产品对用户展现了很多微小善意，值得我们学习。
这种微小善意主要有三类，分别是：不打扰，护尊严，人为先。
1 不打扰
我们生活在一个信息爆炸的时代，不被手机上的信息过度打扰，是一个刚需。有三类信息，如果把握不好度，就会对用户形成打扰。它们分别是：广告、推送、推荐。
广告这块，主要有两类会形成打扰，分别是：时机不佳的广告，过长的广告。
这方面，微信是个榜样，值得学习。比如开屏页广告，就是时机不佳的广告，因为大家不想在这里看到广告，微信就没有放。朋友圈里也有较长的视频广告，微信的常见做法有两类，要么先展示一张图片，要么先是无声播放。是否看完整的视频广告，选择权在用户手里。
推送这块，常见的有手机系统的通知和 App 内的红点消息。
系统通知，目前也有被滥用的趋势。根据使用情况和感受，个人的建议是这类推送控制在 1-2 类。第 1 类是关于核心功能，比如微信推送新消息，搜狐新闻推送新闻；第 2 类可保留一定的弹性，核心原则是对用户有价值，比如偶尔的活动通知。
目前有两种情况会对用户形成打扰和困扰，第一种是过于频繁的活动通知；第二种是推送和核心功能相差甚远的信息，比如金融类产品推送新闻。
红点消息，有一类会对用户形成打扰，那就是来自官方的过于频繁的各类活动、促销等信息。
推荐这块，主要指 App 内的 Banner 和专题。目前对用户形成打扰的主要是一级频道的一些专题。
一种是过多，比如网易云音乐的首页，就有 9 个专题；一种是位置不佳，比如 Keep 的“探索”频道就包含了课程的推荐，但是在“运动”频道还有两个专题来推荐课程。
2 护尊严
护尊严，就是尽最大可能，维护用户的形象和尊严。
最近几年，常有产品花巨资撒红包给用户抢。产品的初衷自然是好的，而且看起来也是一件皆大欢喜的事情。但是这件事很难提升产品的美誉度，也就无法增加用户对它的喜爱和忠诚程度。
为什么会这样？
让用户抢自己撒的红包，这件事能维护用户的形象和尊严吗？非但不能，可能还会对此造成伤害。因为可能会显得用户爱占小便宜，也可能会使用户处于被施舍的一方。总之这种事对用户来说，并不酷。
一款产品，要想赢得用户更多的喜欢、尊敬乃至忠诚，就最好不做哪怕仅是微弱伤害用户形象和尊严的事情，同时多做一些相反的事情。
3 人为先
人为先，是当用户利益和企业利益发生尖锐矛盾时，去追求一种用户利益在先的双赢局面。
大家都知道，吸烟是有害健康的，但是烟草公司又是要赚钱的。泰国香烟那种既触目惊心又恶心吓人的包装，就尽他们最大的可能诠释了“吸烟有害健康”，是真正的用户为本，让人心生敬意。
泰国香烟的这种做法，值得一些极易让人上瘾的游戏厂商借鉴和学习。
03 交互设计：如何做到善意？
上一大段，是善意的三类表现。这一大段，再探讨下做到善意的一个原则。
以社区型内容型产品为例，这个原则就是：先服务后管理。
这里的服务，是指以服务者的心态做好用户体验，并不局限于交互设计。这里的管理，指的是一些必要的管理，一般是用户的行为规范和用户违规时的处理，比如评论里骂脏话、发布侵权文章等。
所有用户都是需要被服务的，只有少数行为不当的用户才是需要被管理的，所以我们要先服务后管理，以免误伤了不需要被管理的用户。
服务本身就是一种善意，笔者把它分成了两个阶段，分别是：体验的初始阶段，体验的完整过程。
初始阶段对应的是：初始服务；完整过程对应两类服务，分别是：家常服务，极致服务。
1 初始服务
初始服务，是当用户刚开始用这款产品时，能给他们留下良好印象的服务。
如何做到？不出现任何轻微恶意和管理倾向即可，再提供一些便利和帮助则更好。
下面分享一个反面例子。
在个别城镇的卫生死角，有时会看到这样的标语，“此处禁止倒垃圾！违者罚款 200！“。结果那个地方往往有很多垃圾。
为什么会这样？
这个标语，有两层意思：第一，你很可能会在这里倒垃圾；第二，禁止你这么做，做了要罚钱。
也就是说，某种程度上，这个标语在用恶意揣度别人，同时也在很严的管理别人。
看到这个标语的人很可能会这样想：既然认为我会在这倒垃圾，那我索性就倒了；禁止我？凭什么？还罚我钱，吓唬谁呢，况且你有证据吗？
下面再分享一个很好的正面例子。
笔者有一个宜家的退货经历。把一个已经拆过的桌子打包送到了宜家，宜家没有检查里面的零配件（很多螺丝之类的），直接退了。这样宽松的退货条件，宜家可能会蒙受一定损失，比如小概率的零件丢失，但宜家还是把这种服务提供给了顾客。笔者当时的感受是宜家挺信任我们的，对宜家就多了几分好感。
2 家常服务
家常服务，是指一种稀松平常，但又让用户感到舒服自在的服务。
举个例子，你去好朋友家里玩，朋友给你倒了一杯水，并端出一盘削好切好的苹果，你们一边吃一边聊。你和朋友是平等的关系，他这种简单的招待并不会使你感动，但却使你有一种接近在自己家的那种舒服自在。
笔者在用微信公众号（后台）时会有这种感受。在星巴克和肯德基时也会有类似感受。
家常服务，如何实现？第一，要有良好的初始服务，这是基础；第二，要有周到且较高品质的交互设计，这是关键。
以微信公众号为例，和微信一样，它的交互设计也做到了周到和较高品质。下面看看微信公众号的初始服务。
面向大众的资讯平台大多都有一个发文规范，多是关于禁止的行为，通常都会用一个单独网页来展示，有 1-2 页纸那么多。
通常情况下，多数作者是不会违反发文规范的。对于这部分作者，当他们首次看到 1-2 页密密麻麻的发文规范时，可能会产生抵触心理，即便自己不会违规。就好像高中开学第一天，班主任二话没说，直接就立了 20 条班规，同学们会是什么心情。
微信公众号的做法就很巧妙，它把这些规范分割成了三部分。
第一部分是严禁的红线行为，以高度概括的一行文字呈现，所有人都能看到，但是得仔细留意才能注意到。这是规范性质。
第二部分和竞品一样，也是链接出来的一个单独网页。链接入口也和竞品一样，在关联性最强的发文页面右上角。不同的是，这一页展示的是规则，主要以问答的形式呈现，给人感觉是有帮助的信息。这是服务性质。
而竞品的这个页面，通常都是禁三禁四的规范，给人的感觉可能是紧张、压抑甚至抵触。
第三部分是次于红线的禁止行为，比如侵权、低俗内容等。这部分内容的管理办法被以公告的形式分散在公告列表里。而且公告列表里内容多样，还有很多一般的通知，所以这个公告列表也不会像竞品的那一页规范一样，给人紧张、压抑的感觉。性质上是中性。
另外，这部分的入口在后台首页右上角，和发文模块是分开的。所以不会违法规范的作者一般不会去公告列表里翻这些内容，也就看不到。
微信公众号就是这么巧妙的让多数作者看不到“班主任”的“20 条班规”，同时还让他们看到了“班主任”的“常见问题回答”。
这就是微信公众号在发文规范方面的初始服务。另外还有一个加分的细节，就是检测疑似错别字的功能，很贴心，虽然目前还不是很准。
3 极致服务
极致服务，是指让用户感动的服务，比如海底捞和胖东来的服务。
这种服务，一般是由许多细节积累而来，是一种做加法的服务，而且背后往往依赖人力。
好的交互设计，一般都是在做减法，而且纯粹是界面、机器在和用户打交道。所以极致服务难以复制到交互设计上。
不过，一款互联网产品，除了交互设计，还有其它方面的内容。
B 站就是一个例子，它以不走寻常路的方式，在两个方面做到了较为极致的服务。那就是：视频无广告，比较积极、欢乐的弹幕氛围。
结语
以用户利益为先，不打扰用户，维护用户的尊严，这是交互设计里的三种善意，值得我们学习。
先服务后管理。服务作为一种善意，也能够引来用户的善意，最终形成良性循环。
杜绝任何轻微恶意和管理倾向，再提供一些便利和帮助，便能做到良好的初始服务；
在初始服务的基础上，提供周到、高品质的交互设计，就能做到良好的家常服务；
交互设计难以做到极致服务，但是其它方面有机会。
最后，用刘备的一句话来结束本文。
勿以善小而不为。
原文地址：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
B类领域设计师必然会面对譬如CRM、ERP等诸多类型的中后台类产品。大多就是做做表单设计，年底考核时想争取涨薪证明自己，但老板要问的“设计价值”是个啥？在这些业务主导下的中后台产品又该如何定位设计机会及价值？
本文就以比较典型且系统化的中后台企采SaaS服务产品为例，来聊聊在这个领域中，是如何进行机会的挖掘，探索并付诸实践的。
-
在过往数年里，阿里Ant Design，Alibaba Fusion为代表的中台团队进行了大量基础组件设计体系的积累，也沉淀了一些可直接复用的工程化解决方案。如果说有就行，的确产品经理和技术人员自己拼拼凑凑，就可以极低成本的获得一个较为套路化，但无需设计师介入费脑的中后台产品。
但作为用户工作环境中和风险、钱打交道为主，被强制使用的工具载体，在全球数字化经济转型推进趋势下，越来越多的中后台B端产品需要具备更高效，更细腻的体验，以改善千千万万使用者的数字化工作方式.
初步接触业务，我们即发现沿用基础通用设计组件库，“拼组件”的方式没办法满足垂直业务模块比如供应链询价、采购、财务核账履约领域高强度信息承载密度下精细化的用户体验诉求。
因此，为了增强SaaS产品及服务的不可替代性，提升售卖价值亮点以及产品续约率，我重点对业务场景下特有的行为组件、模板及方案链路进行抽象归纳改良设计。
这样做最直观的好处就是不浪费时间重复造轮子，站在巨人的肩膀上来完善组件库，提升设计效能，1位设计师就能通过业务场景组件，高效承接密集的产品需求。
另一方面，收拢特定场景下核心差异点，只聚焦最小范围来打磨组件及流程，可敏捷实现差异化设计的最佳实践。
精细化的场景多欠缺合适的线上化解法，作为你深度挖掘，充分思考下的设计方案，相对更容易获取某些领域的设计奖项甚至专利，证明你有在设计上做出了壁垒，创造了价值。
除此之外，由于该敏捷的体验设计过程是以抽象核心差异为契机，对应领域的设计师亦能更高效的构建出业务特定场景下的独有的“Design System"，在后续过程中放大设计价值。
-
多数中后台产品（尤其是企业级应用系统）会出现 "功能、页面多"、“流程长”的臃肿现象。
受打工人身份禁锢下的实操用户大多也是迫于工作合规要求，不得不从原本习惯的线下作业流程，转变为在中后台线上了解信息，以及多角色协同决策处理事务。甚至可以说有了中后台的存在，反而增加了他们日常工作操作成本，故无论是新用户还是老用户，都难有意愿于中后台完成事务处理的体验闭环。
为提高采购流程的效率，让中后台线上作业更轻松，更提升企业收益/价值。
我们基于用户行为能力动机，从“替ta完成”，“催ta处理”，“助ta做快”这三个维度，通过协同引导提效的方式来促进线上事务处理完成并流转。简单说，机器能做的就自动处理推进，不能的则及时触达引导，力求做到中后台事务处理过程去人工化，以及主动精准有效的引导。
设计师在这个环节内除了结合新技术，和业务团队共同打造一些智能化服务替代原本高重复性操作以形成新体验外，还可以深刻研究并理解人性本质，在相关待办或服务内容触达上精细化设计。
与业务一起分层提醒内容，及对应内容的可读性、可视化设计；
不打扰用户工作前提下，及时引导助其理解更促使用户启用自动化提效服务，譬如处理受阻失败、或用户刚完成一项任务时，引导其配置自动处理规则，提高整体效率；
定期进行实操人员处理任务完成度/时长的同团队数据分析比较及外显方案，结合数据可视化呈现手段，在行业内外部团队相互制约下，促使用户自我驱动警示，保障事务推进流转。
最终目标即是推进业务中后台的用户数字化体验从最早的帮助Q&A被动唤起自助化服务，变为主动承接服务告知可处理，半自动化分发，及自动处理，甚至社会智能化数据自驱的演变进阶。
总体来说，在中后台产品给用户提供更简单、更集成的方案，大量消减操作步骤，突出真正重要的信息就是设计最大的价值。
-
除一线实操用户外，我们还要关注管理者，有时更是一号位的老板这一类关键角色，他们在线上各个子环节都有较为强烈的可控，可管理的诉求在，以证明其付钱购买的中后台“在线数字化”工作方式真的能降本增效，或作为企业内部管理优化的量化指标依据。
在企业按年续费产品服务的商业化增长目标下，让管理者能真切意识并实际体会到数字化工作方式的价值就变得尤为重要。因此，设计的关键是增强管理决策者对数字化平台服务的感知度以及满意度。
和一线操作员侧的提效类似，只不过对于管理者，我们需更多着重于“替ta完成”和“助ta做快”这两部分去打造智能化服务的管控新体验。
为确保机器智能化处理逻辑更接近人的自然思维，设计师在这个环节中可主动补位，制定相应类型下数据的机器思维处理分析规则以及内容维度。
在过往采购SaaS中后台业务设计中，设计亦抽象了事务型进展以及综合决策分析决策两类数据模块新场景，通过直观结果呈现以及判断要点佐证，在管理行为及流程上促进管控手段的数字化升级，帮助管理者高效获取/查看/分析数据要点。
有了对应的分析数据结果和要点，我们还要将数字时代下的管理数据，团队事务整体进度、风险预判结论有效触达管理角色，更放大其体感。
给老板用的数据大屏/中后台数据看板，及数字孪生可视化即是一种可以充分发挥设计表现力并擅长的领域，即便你所在的中后台团队没有相应技术资源，设计依旧可以通过“电子邮件” “长图”等通用载体，以轻量化的方式来完成价值传递。
在这个环节，设计的价值就是让管理者读懂数据，受惠数据驱动的决策方式。
以设计体验度量量化为起点，深度关联管理决策者关心的企业运营数据“健康度”，及商业化营收续签强相关的“续签意向”，来评定并监测用户对SaaS产品服务的整体接受度及体验满意度。
我们基于HEART、PULSE、UES、五度模型等已有模型，选择业务目标和场景核心指标来调整衡量维度并推导演变，从业务、产品、技术、服务等多维视角构成适合企业采购SaaS产品的体验度量模型，推动运营/算法/后端共建机制及产品将体验监测工具化，以形成业务中多角色都能有效应用起来的体验质量评估体系。
最终，管理决策者较过往能更实时的掌握一线人员工作使用中后台的健康度情况，有效数字化管理。
对我们的合作伙伴业务运营团队而言，全新的客户续签意向管理预测方式，可提早发现风险，更能联合内部预警及平台触达运营服务有效规避客户流失。
而对于我们自身设计职能，通过这种度量维度方法和工具，不但能定期便携的获取核心指标变化作为设计价值量化凭证，体验监测所获得的相关结论还可以指出中后台产品当前业务阶段问题方向，结合设计目标锁定问题范围，定位后续设计着力点。
-
上述即是企采SaaS中后台产品中的设计实践。我们也总结了几个定位设计机会及价值的心得或方法。
具有出众同理心的设计洞察以及解法是体验价值的基础。（常说要站在用户视角做设计，但不像消费端，设计师多不是中后台实际用户，也很难换位思考理解用户工作行为特征和痛点。)
因此，中后台领域的设计角色迫切的需要与更多的实际用户去交谈、调研。
为提升该过程的质量及效率，我们尝试在用户定性调研访谈之前，多通过学徒式调研的方法，来熟悉其工作行为特征，定性的挖掘用户痛点。
即是以单任务为维度，先请教我们的实际用户他们是如何做的，并依此自己上手完整实操，直到确保能按时保质完成目标任务。
设身处地还原目标用户情景，理解各方案的优劣势，及如何在他人身上起作用的目的，在该环节之后再去和用户交谈，即可更高效的获得真实的用户洞察以及理想方案假设。
天马行空的设计创新方案总是在决策时受各种技术、资源为由被Pass，推进创新智能的体验方案在中后台领域是个尤为费事的过程。
面对这一难题，我们可以通过体现设计思维的一些工具模型调整应用，来增强表现说服力，进而建立信任以及方案推进的成功率。
譬如设计侧常用的决策工具用户体验地图，在B类中后台领域中可以将原本情绪体验波浪线替换为效率数据来调整应用，梳理并呈现产品的全流程效率数据曲线，同理“峰终定律”来快速界定并洞察全链路中短板模块，以及低效待设计优化关键点。
借此数据可视化手段，呈现出来体验关键问题严重性，亦可让项目组各职能伙伴共情，获得设计策略及方案的认同。
设计创新提案难免会出现两类问题：
首先是创新提案推不下去，甚至被说是设计自high。
这多是因为没有想着结合业务方向，光想着创新或新颖的方式去设计方案。
我们擅长也希望通过酷炫的动效，创新的交互，智能化体验的畅想及解法来表现设计手段的精深。固然，这些事情的探索尝试或练习都有其意义价值，但作为商业设计师不能光纸上谈兵，只有结合业务顺势而为，我们耗时做的方案才有可能提案成功，更推进技术还原落地，从而带给用户更好的用户体验。
再者就是方案有结合业务，也被认可有价值了，但优先级往后走？
这说明设计结合的点不大对，并非业务最关心的。
中后台产品，多和前台核心战略有着强逻辑关系，或有广泛的、潜在的商业化潜力。而了解业务核心关注点，最简单快速的方法就是找到对的人——业务一号位，并快速抄作业。
勇敢点的可直接约业务一号位聊聊，含蓄的设计师亦可尝试借美化一号位汇报PPT等手段，巧妙的获取并理解业务核心目标，布局以及关键利益，在此基础上再从上至下梳理了解各子业务线规划，设计就能更好的取舍。
原文地址：站酷 作者：阿里巴巴CBU设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、什么是大标题设计风格？
大标题导航栏是从iOS11发布后，开始在中国的UI设计师中急速流行的一种设计风格。其实这种风格最早在2016年就在硅谷盛行了起来，源自一位叫Michael Horton的设计师发表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，这篇文章提到的Complexion Reduction这种设计风格(下文简称CR)就是大标题导航栏的起源，即大、黑、粗的标题。
CR这种风格有四个明显的特征：
1.删除多余的颜色；
2.又大、又黑、又粗的标题；
3.简单、可识别的图标，也不要使用颜色(常用黑灰色)；
4.留白留白留白，更多的留白。
下图是比较典型的使用CR风格的APP（分别是爱彼迎、ENJOY、火球买手、MOO音乐），大家可以结合CR风格的4大特征感受一下：
不知道小伙伴们有没有发现，这几个APP的功能会比较单一或是某一垂直领域，且视觉上都给人一种高品质，超极简的感觉，人们会更多的关注界面中内容本身，对内容的要求也会更高。
二、中西方的差异
那么问题来了，为什么这种CR风格鲜少出现在中国特有的淘宝类电商APP中呢？
国外的APP大都是小而精致的，一般一个APP只能做一件事，功能比较单一，而国内的淘宝类电商APP，携程类的综合旅游APP所包含的业务与功能都非常广泛，在狭小的手机屏幕上展示更多的商品就显得尤其重要，CR风格提倡的大标题大留白无疑不是在挑战老板的底线。
实际上即便使用大标题风格也不要盲目采用iOS11官方的大标题导航，其原因在于中英文的差异。
英文大标题一个单词有大小写的变化，富有一定的层级变化，而中文如果使用iOS11给定的68px（二倍图下）的字号，那真是大到闪瞎我的眼。中文一个词语每一个字都是差不多的大小，没有层级上的变化，太大的字体在整个界面中看起来会很奇怪，如下图：
三、合理使用大标题
虽说iOS11那么大的标题不适合大部分的APP，但并不是说大标题风格就不适合大部分APP了，实际上目前大多数的APP依然使用了大标题的风格，不过进行了一定的改良。
以下参考尺寸均是二倍图下的尺寸
1.大标题导航栏
大标题导航栏大致有两种样式，一种是延用iOS11的大标题导航栏，一种是稍微改良使用的大标题导航栏。
1）iOS11大大大标题导航栏
iOS11的大标题导航栏标题字号约为68px、栏高192px(二倍图)，大标题对齐导航栏左边，页面滑动时转换为常规的导航栏。
国内使用这种大大大标题的APP比较少，标题文字实在太大，若只作为导航标题占位，会极其浪费屏幕空间。
使用这种大大大标题时，导航标题一般都有一定的意义，如下图:
饿了么的订单页详情页使用了这种大大大标题，但是标题赋予了订单状态的意义，比起单纯的“订单详情”，这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。
2）改良大标题导航栏
某些APP在使用大标题导航栏时，在iOS11的大标题导航栏上进行了一定的改良，最常见的就是一定程度缩小了标题的字号，如下图:
这三个APP的标题字号都没有到68px，常用40px~48px的字号，陌陌与天猫是固定在顶部导航栏的，而Kepp会随页面上滑变为常规标题导航。
一般这种固定的较大标题都会隐去导航栏的分割线，显得导航栏更高，更有呼吸感。像是天猫的大标题导航栏使用的色块，与下方模块又比较近，就显得很拥挤。
2.Tab栏大标题
Tab栏的文字标题切换样式最常见的就是颜色变化，加小短线等，随着大标题风格的流行，Tab栏的切换样式也出现了大标题的选中样式，选中字号通常采用40~48px（甚至更大，如虾米音乐的72px），而非选中标题通常则是采用的28~32px，如下图：
使用这样的Tab栏，能够迅速帮助用户辨识自己所在的位置，就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换，与二级Tab做出区分。
3.模块化大标题
大标题的风格除了应用在界面顶部导航，在模块化标题上应用的也非常多，有些APP即便顶部导航不使用大标题，却会在模块化标题上使用较大的字号，如下图：
这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征)，模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。
4.文字变大变粗变黑
抛开大标题不谈，不知大家有没有发现，现在越来越多的APP的内容标题、正文内容的字体也在逐渐变得更黑更粗，甚至更大，毕竟我们的手机变得越来越大了。如下图：
即便是拥有复杂业务的淘宝与飞猪，在某些内容标题上也变得更粗更黑，一眼看过去用户能更容易找到自己想看的内容。
四、划重点
· 大标题设计风格源自Complexion Reduction这种设计风格，CR这种风格的特征就在于颜色少、标题大黑粗、图标通用简单、大留白；
· 由于中英文字体的差异，中文使用超大字号没有英文富有变化；
· 合理使用大标题，做一些适当的改良。常见用于导航栏、一级Tab选中标题、模块化大标题以及内容标题。
原文地址：站酷 作者：人类君
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
将普遍存在的人性用户心理规律运用于设计，增加设计的温度。
近来对用户心理比较感兴趣，去看相关设计资料的时候发现相关内容重复性较高，多方搜集资料结合自己的一些分析总结出一篇补充。
定律是钥匙，在遇到让我们上瘾，持续付出或获得情感的APP，多去想一想它背后洞察了哪些人性及心理，能不能为我们的后续的设计吸收。
原文地址：站酷 作者：唐小葱
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一类支持有C端前台，支持前台产品管理各种资源。第二类服务企业，提高企业工作效率和营收。
1.监控运营：时效性强，旨在实时反馈异常情况，快速判断下达命令，回复信息、多用于数据控制中心。
2.数据分析：数据结果的对比和分析趋势，时效性要求并不高，了解整体和各部分数据水平，助力决策。
3.记录管理类：主要用于人员、设备、资产等增删改查，文本信息容量大，频繁便捷的操作。
4.系统配置：权限配置、设备功能配置，操作为主。
浅色：
适合文本信息多密集的表单列表类后台，浅色更符合人眼白底黑字的阅读习惯，浏览速度更快，信息获取效率更高。
深色：
图像信息密集的后台适合图片、数据可视化图表等；深色对彩色的图像信息衬托更强。信息获取速度较慢，长时间可能视疲劳。
较常见
优点：市面最常见的风格，普世性高，大多数用户可快速接受，层次分明
缺点：视觉缺乏记忆点
优点：视觉清新明快更年轻化更轻量，对其他文本及图形展示包容性高，就像A4白纸一样容器存在感弱
缺点：纯白色导航+页面层次略暧昧。
适合：适合科技属性强的产品界面，图像图形展示
缺点：对其他色彩信息有干扰，持续性长时间观看易视觉疲劳
优点：对色彩表现力强
缺点：密集文本信息获取速度会下降，持续性长时间观看易视觉疲劳
比如美妆和科技行业的整体设计基调就不太相同。
理性可靠 or 简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨
根据目标用户的性别、年龄层、受教育水平，审美水平考量（可能包含多种角色，选取1.2个核心角色为参考）带入目标用户工作场景及爱用物常用物品味，去判断基调。
如主要用户群：40+男性用户，本科以上受教育水平，使用windows电脑进行专业管理操作，审美倾向明确内敛。
如主要用户群：20-40岁，男女比例约6：4；大专；操作水平参差
例如：最常使用数据分析管理，需要快速阅览多条数据，对数据进行比对，更适合浅色风格展示表单数据。
独立开发的，可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。
“731配色比例”70%的面板色，30%的导航面板色，10%的强调色。（这里的用色比例可以根据内容具体再去调节只是大概比例）品牌色或重点色：强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。
后台高频出现的图标，值得我们花时间去统一设计打磨，调整圆角粗细疏密，符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的，好的设计在细节处也要动人。
B端工具类图标识别性第一，美观性第二。B端导航图标更多是在基础造型上打磨，不需要加花里胡哨的渐变、投影，导航图标一般在24px-16px大小，太复杂反而看不清。在区分状态的时候可以考虑加点品牌色
空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。
图形化状态语言，辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度，具有引导性。让乏味的工作出现一些共情小彩蛋，有趣的插图动画可以缓解等待的焦虑。
纯色背景卡片式：简单大方更聚焦登录操作
插画背景：场景化展示产品的功能及亮点，让用户更有心理预期
几何图形背景：最后和品牌图形相关，加深用户对产品的品牌印象。
照片背景：相关场景或产品类型，具象图片信息更直观
不同大小的圆角传达产品不同的气质，大圆角亲和、小圆角精致、中等圆角大众中庸。
优化信息层级，区分信息主次可以使阅读更快，操作更快，界面更有节奏感。
这时候你就是那个考前画重点的老师
判断一个页面里最重要的是那些信息或操作，强化它！并弱化辅助信息；
判断一个模块里那些是重要信息，强化它！
1.追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板，满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多，反而干扰信息获取效率。
2.反常规用户习惯的操作。尊重用户习惯，不要为了个性化去尝试改变，不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维，曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。
3.数量多，动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打扰。之前看过一个反面例子后台，在每一步操作后都出现大的场景动效鼓励完成，如果作为一个长期使用的工作者，我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。
4.新人建议多看Antdesign和Element等成熟的组件，创新类组件样式，最好和和开发商量是否能够实现。
5.在确定主要风格及2-5张主要页面后，就应该着手基础规范（色彩字体等，不然后面越做越乱）。
6.一段时间一个审美，同一界面中的元素风格不统一。
7.避免大面积使用高饱和高明度的色彩，及暧昧含糊的临近色彩。长时间使用眼睛会累，产生不耐烦焦躁的负面情绪。
饿了么官方组件库：https://element.eleme.cn/#/zh-CN/component/installation
layui 官方组件库：https://www.layui.com/admin/std/dist/views/
iviewui官方组件库：https://www.iviewui.com/components/menu
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UI 设计师必备的一项基础能力：规范能力。
为了避免重复造轮子，反复掉入同样的陷阱，阅读并熟知主流平台的设计规范，是非常有帮助的。
本文内容主要介绍了iOS 、Android、Ant Design的相关规范，为的是不重复累赘描述同一个知识点，涉及到移动端和PC端，主要为了帮助基础同学学习，适当地删减了一些有难度的规范。
设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。
通过设计规范的约束，保证产品的色彩使用、图标图形、空间、文字、页面布局等内容保证严格的一致性。
规范能延续产品风格及特性，保证产品视觉及交互层面的统一，包括技术带来的变革，增强用户的认知性，不同程度得提升用户体验。
多人合作完成一个项目时，需要视觉规范。遵循设计规范，保证视觉统一、提高工作效率。
辅助技术层搭建框架及布局的规则更清晰明确，如按钮、颜色、字体大小等，提高开发效率，确保应用软件最终实现效果与视觉设计相符合。
视觉设计规范是指对设计的具体技术要求，是设计工作的规则。包含了目标、功能、技术指标，以及限制条件等。
① 视觉设计规范，是量化的设计指标，具有指导性、约束性。
视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数，针对新手设计师、第三方团队，可以很好地做到经验传递，迅速了解上手。减少标注时间，提高前端开发质量。
② 视觉设计规范，是确定关键因素，要有有效性、复用性。
获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。促进多人协作，解决视觉不统⼀现象。
① 品牌规范：塑造形象以及应用的规范。主要包含了标识的标准制图，配色字体等。以及常用的搭配方式。
⼀个企业或者⼀个产品，都有相应的品牌视觉识别系统（VIS）。品牌视觉识别系统是视觉设计最好的参考基础，既然是⼀种指导体系或者说是参考，那么也相应地会有品牌的规范。
② 平台设计语言规范：平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范，主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。
③ 产品业务规范：侧重在产品设计和实现层，内容清晰并且实用，标注详尽，方便设计师们使用。更注重个性化的部分。
https://material.io/
Material Design 规范在于统一 Google 多种平台下的一致性，代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。
谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。
从设计角度：建立共同的设计语言，将产品风格、品牌及交互形式统一起来。
从使用角度：提高产品认知度，提升品牌延续性及产品体验的一致性。
Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中，虚拟灯光照射整个场景。
Material 有自身固定不变的外在特征和内在行为逻辑 ，理解这些固有的属性有助于实际的设计项目。
• 立体性
• 空间位置的唯一性
• 不可穿透
• 形状可变化
• 沿水平方向做变化
• 不可弯曲
• 能与其他材质对象合并
• 分裂，再合并
• 可沿任何轴上移动
Material 借鉴了现实物理世界中的物质特性，并将其运用在虚拟三维空间中的 Material 元素上， 有利于帮助用户理解信息层级，同时可以统一各应用之间的体验。
投影提供了元素深度和运动方向的重要视觉线索；在运动中，投影提供了元素移动方向及高度变化。
https://developer.apple.com/desig
iOS 设计规范逝之苹果开发者官网上面的 iOS 人机交互指南（iOS Human Interface Guideline）。制作这个规范的目的是为了让所有安装到 iOS 系统的 App 都遵从某些特定的视觉特性、交互特性，以达到风格一致的使用体验。另一层面，也是便于让设计人员和开发人员能够更好地理解 iOS 系统，更合理的运用系统提供的功能和接口，更高效地制作出 App。
在整个 iOS 系统中，每一种尺寸下的文本信息都应该是易读的，图标应该是精确易懂的，每一个装饰应该是精巧适当的，而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。
在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互，而不会对用户的操作产生干扰。内容全屏显示时，半透明或者模糊处理的方式可以提示用户更多的内容。减少使用边框，渐变及阴影可以使界面轻 量化，突出显示内容（内容优先）。
不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容，赋予了界面活力，使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感，用户在操作功能时不至于迷失。当用户在浏览内容时，流畅的转场效果提供了一种纵深感。
为了最大限度地提高影响力和覆盖面，在应用设计规范时应牢记以下原则：
（1）审美完整（Aesthetic Integrity）
审美完整性体现了 App 的外观和行为与其功能的整合程度。例如，一个帮助用户执行严肃任务的 App 可以通过微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。
另一方面，沉浸式的 App，比如游戏 App等，就可以提供吸引人的外观，传递乐趣和刺激感，同时鼓励发现。
系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例可以使得一个 App 的设计符合一致性。
易用性指的是用户可以理解屏幕的内容，用手势、触动屏幕等动作直接操作，并且，用户通过直接操纵，可以看到他们的行动的直接的、可见的结果。
反馈指对用户的行动进行了确认，并且通过显示行动结果以使用户了解情况。iOS 系统的 App 要为用户的每一项操作提供可感知的反馈。如：轻触时会突出显示交互元素；进度指示器会传达长时间运行的项目的状态；动画和音效有助于阐明操作的结果。
当一个 App 中的虚拟元素以及动作都是用户对熟悉事物的隐喻的时候（包括现实世界和数字世界），用户会学习的更快。比如，用户移动视图来查看更多内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快的翻页。
在整个 iOS 中，用户是掌控者，而不是 App，App可以建议一个行动方案或者警示危险后果，但 App 不能替用户做决策。
好的 App 可以在用户授权和避免不必要的结果之间找到正确的平衡。
App 可以通过交互元素，确认、取消的提醒以使得用户觉得自己在控制。
https://ant.design/index-cn
Ant Design服务于企业级产品的设计体系，常用于PC端设计规范，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
1.Ant Design平台的设计原则
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
正如「格式塔学派」中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。
eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
「提供邀请」的强大体现在 交互之前 给出反馈，解决易发现性问题；「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈；「即时反应」的重要性体现在 交互之后 立即给出反馈。
就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
当然，这并不代表了解这些就能做出优秀的设计方案了，英文水平比较好的同学建议直接读原文，直接从 Material Design 和 iOS 的官网进行规范学习，效果更佳。当然如果英文水平有限，网上也有很多译版方便大家阅读。
而关于Ant Design的设计规范，可以去官网查阅更多的详细内容，但PC端的设计规范平台还有很多，字节、腾讯等设计官网都有。
记得对于规范不需要死记硬背，练多了自然能够记住。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
好的配色不但能传达出鲜明的产品主题调性，并且能为用户的视觉行为产生引导作用，构成良好的用户体验。
对于UI设计师来说，不但要考虑颜色在给予用户的感受上的作用，同样应当考虑其实用性，避免重形式而轻内容的问题发生。
所以本文的内容是基于色彩的基础知识，为大家介绍 UI 设计师常用的配色方案、配色流程，当然也包括其他视觉设计工作者在工作中要用到的基础色彩常识。
颜色或色彩是通过“眼、脑和我们的生活经验”所产生的⼀种对“光”的视觉效应。但是人对颜色的感觉不仅仅由“光”的物理性质所决定，还包含着“心理”等许多因素，比如人类对颜色的感觉往往受到周围颜色的影响。有时人们也将物质产生不同颜色的物理特性直接称为颜色。
颜色的应用在 UI 设计师的工作中是非常关键的一环。
（1）色相
是指色彩的相貌，色相被用来区分颜色，根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称之为色相。
（2）明度
是色彩从亮到暗的明暗程度，黑色的绝对明度被定义为 0 （理想黑）,而白色的绝对明度被定义为 100 （理想白），其他系列灰色则介于两者之间。
（3）纯度
纯度通常是指色彩的鲜艳度。从科学的角度看，一种颜色的鲜艳度取决于这一色相发射光的单一程度。色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。
（1）HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示饱和度，B（Brightness）表示亮度。
（2）RGB ：三原色红、绿、蓝叠加最终为白色（加色模式）。常用于光源光情况下，例如显示屏幕。
（3）CMYK ：三基色洋红、黄、青叠加最终为黑色（减色模式）。常用于反射光情况下，例如印刷。
（4）LAB ：LAB 色彩模型是由亮度（L）和有关色彩的 A，B 三个要素组成。L 表示亮度（Luminosity），A 表示从洋红色至绿色的范围，B表示从黄色至蓝色的范围。
色彩心理作用是指色彩作用与人的情感所产生的心理感受与综合性生理感觉作用。它影响着人们的记忆、感知、联想和情感，刺激着视觉，在设计中有着不可忽视的作用。色彩的直接心理作用对设计有着重大的影响，关系到对用户心理的把握。
色彩心理作用包括色彩的直接心理效应和间接心理效应。
（1）直接心理
色彩的直接心理效应是色彩本身的属性即色相、明度、纯度等感官印象造成的心理感受。它包括很多不同的心理效应，一般可分为 9 类，即色彩的兴奋感和沉静感、色彩的冷暖感、色彩的轻重感、色彩的华丽感和朴素感、色彩的明快和阴郁感、色彩的软硬感、色彩的明暗感和色彩的空间感。
（2）间接心理
色彩的间接心理效应是由色彩的直观感受反映到大脑所产生的联想效果。在设计中常常利用色彩间接心理效应来传达广告信息。
1）灰⾊：正式、重⼒、成熟
2）棕⾊：保守、亲切、稳定
3）粉⾊：⼥性、天真、⻘春
4）⻩⾊：注意、提醒、快乐
5）紫⾊：奢华、浪漫、创意
是一种充满神秘的颜色，在自然界中较少见到，所以被引申为象征高贵的色彩。
在UI设计中的应用场景为紫+粉常用于女性化的产品调性。
6）⽩⾊：新鲜、清洁、健康
白色常常被认为是无色”即不是色彩。
在UI设计中的应用场景，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。
图源-dribbble
7）⿊⾊：正式、权⼒、⽼练
是一种充满质感的颜色，它是所有色彩中最有力量的，能很快吸引用户的注意力。
在UI中的应用场景，常和其他色彩百搭，比如黑色+金色，黑色+红色等等，以及现在UI设计中的暗黑模式。
图源-dribbble
8）蓝⾊：信任、舒适、放松
纯净的蓝色通常让人联想到海洋和天空，让人的内心感到平和，有助于人的头脑变得冷静，减少工作中的烦躁和冲动。
在UI设计中应用场景，常用于工具、商务、科技类等产品，B端设计也经常运用。
图源-dribbble
9）绿⾊：⽣⻓、⾃然、成功
绿色是大自然中最常见的颜色，代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。
在设计中的应用场景，健康、医疗、运动及少儿类产品使用较多，一般在软件中表示安全、成功。
图源-dribbble
10）橙⾊：信⼼、能量、乐观
它烘托出的活跃气氛没有危险的感觉，反而是一种友好。
在UI设计中应用场景，电商、金融以及服务类的产品使用较多，比如淘宝。
图源-dribbble
11）红⾊：危险、重要、激情
最醒目和强势的颜色，甚至能引起一些生理反应，例如心跳呼吸加快等。
在UI设计中应用场景，红色常用于电商、金融、服务等行业。红色也最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，比如新年春节阶段。同时红色也代表了警示、告诫，所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。
图源-dribbble
5.UI中的色彩
Ul配色一般包含主色和辅助色、强调色、中性色。
主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。
中性色主要用于界面中的线条和背景
图源-dribbble
每⼀种色彩都有其自身的特质，而这⼀特性的发挥，还需要依赖于色彩在整个配色时所处的位置、面积等，即色彩与其他色彩所形成的秩序。
颜色同样有主体，和辅助。确定主体色系，有助于页面整体基调的把控。在实际的操作过程中，颜色要适量，通常2-3种就可以了。多了往往较乱（并非绝对）。
单色系配色法：同⼀个色系内根据颜色的明度和纯度不同去做区分，形成层级关系、对比关
系的配色方法。例如：深蓝、天蓝、浅蓝这样的层级变化。
邻近色配色法：相邻的色系进行搭配。例如：黄色、橙色、红色。
对比色配色法：对比的色系进行搭配。例如：黄色、紫色。
一套 App 配色基本由背景色、主题色、辅助色、点睛色 4 种色调组成。
flatuicolors （https://flatuicolors.com）
提供多款扁平⾊彩配⾊⽅案，可以根据 UI 设计的需要选择使⽤。
Paletton （http://paletton.com）
是⼀个在线的⾊环配⾊⼯具，我们可以根据需要选择单⾊、相近⾊、对⽐⾊等规则来查看配⾊，也可以实时查看其在⽹⻚中的搭配效果。
uigradients（https://uigradients.com/）
UIgradients 以分享美丽渐变⾊彩为主的分享站，⾥⾯接近上百种渐变配⾊⽅案，设计师可根据⾃⼰⻛格来选择搭配，此外我们还能直接获得对应渐变配⾊的CSS代码。
webgradients（https://webgradients.com/）
富有超多好看渐变渐变配⾊的⽹站，只需要复制⾊彩编号填充渐变，或者直接下载PSD，Sketch，图⽚，CSS代码。
CoolHue（https://webkul.github.io/coolhue/）
富有超多好看渐变配⾊的⽹站，可安装Sketch 插件，或者直接下载图⽚和CSS代码。
中国色网站（http://zhongguose.com/）
只有中国的颜色, 才能这般,美得不可方物
Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）
Adobe色轮配色工具，可以选择色彩模式与调和规则
ColorSpace（https://mycolor.space/）
功能强大的渐变色在线生成器，支持单色、双色，甚至三色渐变。
色彩是设计中的重要组成部分，不同的色彩传递不同的情感和态度给用户，这也是UI设计规范中需要注意的部分，即做到色彩统一、色彩平衡。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前言
图标是用户界面中重要的组成部分之一。它是一种表示命令、内容并揭示功能背后含义的视觉语言。
你设计的图标应该可以被用户立即理解和识别。
如何在你的产品中设计和使用图标？怎样给品牌带来独特的感觉？我的以下几点建议建议可以来帮助你设计更棒的图标。
技巧1 -设置网格
你永远不会创建单独一个的图标，因为图标总是一套的。为了让你的图标具备统一性，你需要一个网格。
定义安全区域并设置边框。使用生成的网格作为模板，以固化所有图标的比例和大小。
技巧2 -保持一致
在设计一组图标时，使用相同的线宽、角半径和填充样式。这将确保你的图标看起来品牌统一和更容易识别。
例如：线宽 - 2px，角半径 - 3px;
Icon set from Super Basic Icons.
技巧3：表达清楚
在图标设计中，少即是多。使用清晰的隐喻和点到为止的细节，使每个图标易于识别和理解。
技巧4 -使用相等的间距
在你的图标元素之间使用相等的间距，使你的一整套图标看起来和谐。
你可以通过按住 Figma、Sketch 或 XD 中的 ALT 键来计算向量线之间的距离。
技巧5 -视觉矫正
基于视觉中心对齐图标元素，平衡视觉重量。
技巧6 -填充空间
旋转局促的图标，充分利用空间来获得更好的可读性。
技巧7 -组合样式
使用填充和轮廓样式来描述界面状态，帮助用户找到正确的图标或按钮。
技巧8-便捷的工具
工具
Icons8.com
iconfinder.com
flaticon.com
thenouproject.com
资源
每个人都是从初学者开始他的设计之旅的，你的审美眼光也要像其他事物一样经过训练。看 Dribbble 的设计可能是非常有帮助的，但有时候你只是欣赏设计，却不明白为什么。
没有灵感、没有优质的设计素材、不知道要设计什么，所有这些原因都可能会拖慢你的速度，让你感到沮丧。所以现在我将和你分享 10 个极其简单的设计技巧，帮你改善你的设计作品，而且不需要额外学习新的技能哦。
请记住，我提供的不是必修遵守的规则，而是大多数时候都有效的技巧。
如果你没有好的想法或优质的设计素材，那么你可以把你的作品去色。你可以通过正确的构图获得野兽派的设计。这么做有助于你理解平衡、留白，以及如何使用文字和几何图形。
让我们来看一个案例：
我自己发明了一套测试画面的方法：用简单的几何图形代表画面中内容，然后通过比较页面中色块的面积来确定页面是否平衡。当你在自己的作品中使用这个方法时，会得到下图这样的效果。
通常你需要通过视觉进行判断，但这里我们可以做一些简单的计算帮助理解：
左边区域的黑色矩形加起来约为：
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX
而右边的大长方形数约为：
446×446=198916PX
他们只是相差了一点点 3.9558%。
注意：圆形比长方形小，但由于相当锐利和细致，使它更吸引人的注意。
我在设计之前没有计算过。经过多年的练习，这只是成为自动的，因为你的眼睛会感觉到错误的平衡。
我之前带来的例子是在灰色背景上呈现的，但你可以尝试不同的东西。这有助于为你的设计创造一些景深。但要注意，在一个真正的网站中，你不会有那么多额外的空间，所以这只是一个展示技巧!
不要再整天浪费时间去实验字体大小。一般情况下以下字体大小是合适的：段落使用 14-18 pt 左右，副标题使用 24-36 pt，标题使用 96-144 pt 左右。Figma 的默认大小对于排版来说是相当不错的。虽然它们看起来会很小，但这是正常的。
有些字体相对于其他字体会偏大或者偏小，所以你应该以标准字体为基础。比如 Roboto：如果字体大小接近 14-18 pt 的 Roboto，那就非常适合用于段落。
如果你有一些具有透明区域的图片，你可以利用它们来创建一些分层。
在网页开发中，CSS 代码有一个 Z-index 的参数，可以用来把图像带到其他项目的后面或前面，给人一种立体的错觉。
让我们看看我的一个简单的设计，其中就利用了这种技巧。
鲜艳的色彩虽然美好，但往往会导致画面过于刺激。现在非常流行在设计中使用更加柔和的色彩，你可以在下图拾色器中红色标记区域内选取更柔和的颜色。
在我看来，多一些留白要比没有留白更好。杂乱无章的设计就通常都很糟。你可以通过以下方式获得呼吸感。
1、保持大量的背景可见。
2、用间距避免文字墙效果。
3、使用不会吸引太多注意力的图片。
4、精炼你的文字。
通常当我们想到设计的时候，我们会想到干净、流畅、清晰等概念。但完美就存在于缺陷之中。
在你的设计中，当你想给自己的网站一个优雅或艺术的外观，噪点是一个强有力的朋友。
此外，应用微妙的噪点让你的构图看起来像电影一样，这对视频和动态网站来说效果非常好。
你可以通过使用 Photoshop，在白色背景上创建一个 2-4 K 的高斯模糊，然后将其应用在你的画板上，从而获得一些噪点纹理。
我们电脑上预装的字体通常都不是很好的选择。要想找到更好的字体，可以开始上网冲浪或看 youtube 视频，了解精彩的字体和字库。
但要注意：很多字体都不是免费的，在没有授权的情况下使用它们可能会给你带来麻烦。不过不用担心，大多数的字体都有免费版本!
虽然有大量不同的字体和风格，但一般来说，我把它们分为三大类。
1、古典字体
2、现代字体
3、正文字体
通常情况下，前两种也可以用在正文中，只是字体的设计者希望你把它们当作标题来使用。
古典字体包括Abril Fatface、Playfair Display、Volux、Chalga和许多其他字体。
现代字体包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....
这可能是最难利用的技巧，但如果应用得当，画面会非常有冲击力。
利用几何图形有助于强化布局中的概念和秩序，甚至不需要使用额外的图像。找到合适的几何图形是很难的。目前我还是不能很好地掌握它。
但是有一个诀窍是，把你的文案中的字母、数字和标题当作几何图形：把它们做成巨大但微妙的形状，或者用一些特定的字母作为形状（字母 A 就很好用）。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com