最近新的一批应届生开始步入职场，让我想到自己刚入设计这一行时，遇到的大大小小问题感到很是无助。今天这篇是结合自身经验写给入行不久的设计，希望你们眼中有光心中有梦对设计仍不忘初心。
相信你在设计工作中一定遇到过这样的场景，当好不容易拿着设计稿推进时，被各种角色提出意见：
“我觉得这个设计不高级”，“我觉得这里可以再大一点，颜色更亮一点”，“我觉得可以试试竞品那样”，“算了，还是用第一稿吧”等等，然后陷入无限改改改的循环中，往往做着做着就开始怀疑自己是不是不适合设计
我认为有3个方面的问题
每个人的审美不一样，天然会掺杂着主观因素，导致每个人都能很容易的提出自己的意见。而我们对设计的关注往往是各种好看概念稿、当前流行趋势等等，导致我们过于追求视觉表现，而忘记从需求层面出发
每个需求都是有具体的目标用户，用户身份不同，同一个问题背后的需求也是不一样的，当与真实用户脱节，业务理解不到位，很可能就把整个需求理解错误，这样修改的几率就很大
没有理解每个功能是什么，背后要解决的问题是什么，满足了什么需求，能够得到的价值是什么
产品或运营提出一个需求的背后，往往都有一个非常明确的结果预期，他们也需要层层审核。我们不应该想“他是不是对我有意见”“他不懂设计的吧，就喜欢瞎BB”“每次都这样针对我，设计做的真没意思”等等，而是需要主动沟通，了解为什么？只有充分的理解需求，才能寻找更正确更好的解决方案。
我们做稿子时常存在问题是我们仅仅关注了设计视觉表达环节，整个项目流程我们理解的过于狭隘，腾讯百度这些大厂设计流程往往从项目立项设计已经开始介入了
想要提升设计方案的说服力，首先要从思想上改变对设计认知，然后再从执行层上落实每个小点
这里需要设计师站在更高的视角，把设计从表现和执行抽离往前后延展，在整个过程中往前去挖掘需求和规划产品结构，往后做到把控和沉淀，跳出视觉认知层，才能宏观看待整个业务改版
从不同的视角看待问题，学会拆解问题和解决问题，从产品、设计、开发不同的角度来全盘看整个产品，分析这个需求的投入产出比是否足够，是否能达到目标（包括设计目标和产品目标）。设计、产品、开发从来都不是对立的，都是不同角色为了整个产品发力。
我们在开始着手项目的时候，不要单点去看要在某个页面要做什么改动，而是从问题入手，和产品同学对齐好目标，结合设计理念。
最后找到发力点在哪里，循序渐进，这样很大程度上能避免项目的反复，对设计流程的准确把控也是输出优秀设计方案的基础。
有些新设计师认为创新就是把原项目进行翻天覆地的改变，初入职场会觉得负责的业务和项目都很小，没有什么意思，其实创新的维度有很多，包括设计工作流程的优化，还有从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜。
陌陌情感化设计和贝壳旗下被窝家装产品图标设计异曲同工之处，大方向上都是利用大色块、细节处用线条勾勒，整体设计轻量化符合年轻人喜欢，但两者又有不同之处。陌陌对表情和动作的处理线条更简洁更抽象，而被窝家装图标融入品牌IP趣味化表达，传达出诙谐、幽默的正面情感
设计师往往对信息的获取比较片面，很多往往坐等原型，然后刷网站找图接着打开软件撸图，这种不充分理解需求就开始做设计的行为，属于思维懒惰，就被称为常说的美工
我们在需求阶段设计师应该主动跟需求方深入沟通，搞清楚以下方向的问题：
明确目标是为了最终设计方案可衡量，设计师工作不是提供一个天花乱坠的方案，而是尽可能走在一个正确道路上提供给需求最合适的方案，只有大方向不错的情况下才有好坏之分
在业务探索初期，旧版满足了业务方和用户的基本诉求。但是随着业务扩张与更新迭代，我们逐渐发现现有的租售模块实价登录信息不能提供用户有效的参考价值，该页面点击到实价登录页面的用户量极少
这个改版的背景是在租售业务上优化实价登录社区的需求，租售详情页的上内容的呈现还是旧版，现有框架和内容对社区价值点展示不足。
解决办法：优化信息框架，丰富该房屋社区信息，满足用户找房时了解社区资讯需求
比如整个社区在该市的排名、整个社区的配置图、口碑评分等以及在实际找房场景过程中，用户会找这个社区内同格局同户型的房屋等等
整个591APP是台湾地区关注度最高房屋的产品，但是从二手房引流过来的用户很少，埋点数据不理想
解决办法：除了在视觉上也要与本身租售的业务分开，让用户理解注意到该模块的价值外，另外在体验层也需要优化
为了更好的明确实价登录的价值定位，以及确认用户期望什么的信息呈现，我们在实际改版时对用户做了多轮的摸底调研，挖掘用户在使用关注功能时的真实场景诉求。
在调研过程中，我们发现使用实价登录的用户分两类，分别是观望期的用户和决策期的用户，这两类用户虽然都使用，但是对实价登录功能的场景诉求是不一样的。
观望期用户一般是有买房计划，但是对于自己要买什么样房或能卖什么样的房子需求没有那么明确。这类用户大多数是了解为主，从慢慢对比中做到心中有数
决策期的用户大多已经线下看过房，有些甚至已经到了和议价阶段，他们对于自己的购房诉求已经十分清晰。在这个阶段的用户，期望提供更多有关体现房源价值的信息，比如挂盘时间、成交表、周边完善程度等等，这些信息一方面可以展示出目前房源再市场内的定位，重新调整价格预期；另一方面也能了解到业主心里预期，提升线下斡旋的成功率
我们可以从这两类用户的使用诉求看到，大家都期待能提供更丰富有效的信息，帮助自己明确需求和辅助决策。
由上述信息得出我们的设计目标，提高租售模块的实价登录的点阅、降低跳出率，当我们的设计方案每个细节，都是以目标为导向时，你输出的方案将更有说服力
结合实价登录历史现状和不同阶段用户场景使用预期。我们在本次关注改版上制定了对应的设计策略。
旧版分析：仅满足用户基本使用，其中承诺的误差率未达标，与内政部信息同步也存在问题；同时，视觉上更像是内容说明展示，点击感不明显
优化策略：围绕用户买房租房场景，为用户提供最新的实价登录信息，同时添加点击指向性箭头，告知用户可点
通过对首屏不断的优化和迭代，打磨体验细节和设计细节，首页的点阅提升了43%
从框架层对功能和层级进行梳理，原层级主要功能不突出，根据功能的重要层级以及用户使用频次进行梳理，将入口进行提炼，同时针对多样化需要增加新的入口
旧版分析：用户在不了解社区情况下缺少关注动机；折线图不明所意；同社区是否有成交与当前用户缺乏联系；查看更多实价登录却到社区详情页与预期不符
优化策略：围绕用户买房租房场景，展示与用户切身利益相关信息
关于颜色
整个产品主色是橙色，但是目前租售详情页上蓝色橙色混用，当然设计的改版也需要锲机，所以我们这次改版沿用橙色，当好区别之前的蓝色，达到凸显实价登录模块的目的
配色从朴素到亮眼跟从LOGO配色，“暗蓝色”到“亮橙色”增强年轻感，加强了颜色的对比度，让品牌感知更加直接，增加品牌视觉分量
关于圆角
圆角，代表友好、亲和，具有更强的内指向性。我们对于圆角的取值上也做了足够的思考：结合房屋特性，卡片内需承载的内容信息众多，圆角太大会影响边角信息的呈现，所以我们在圆角选取上将圆角数值整体缩小，采用了可根据场景精细程度选择合适数值的圆角(4-6-8px)，使卡片容器信息展示更聚焦。
设计师不仅要会设计，还要能够有理有据的，跟需求方陈述自己的设计方案。尤其是在项目合作和设计推进时，非常重要。方法可以分为以下几点：a.有逻辑；b.能坚持；c.会妥协。
向别人推进自己方案之前，先把自己要表达的内容梳理清晰，进行调整和简化。试想你小时候全校上台发表考试获奖感言，是不是有个长长的稿子
多问自己一些为什么，比如下面稿子类似于广告位的地方，当前目标是提高点击率。但是整个模块展示是在另外的业务上，也是存在突出的同时不能太突出的问题
初稿给出的时候也是出于2个方向考虑，方案一是出于页面整体风格一致性同时优化视觉，稍作强调；方案二考虑到方案一视觉引导弱了，用重色强引导达到产品目标。2个设计方案都可达到产品目标，剩下的就是调优了
在符合最终产品目标的设计方案，必须坚持。但是，你要有证据证明为什么它值得或者能够坚持。
这里再分享一个案例来，台湾用户往往特别注重个人隐私，基本不开通系统定位，但是买房租房位置选择及交通地域选择是第一步，否则后续搜索无法定位到用户预期。所以此次产品目标是加强导航的视觉层级，当然这只是优化需求里面一个小需求
经过竞品分析、加强品牌感知和用户使用习惯等方面确定使用品牌橙。但是这个橙饱和度比较高，在测试阶段非专业人士提出疑问导航这个太刺眼，让整个页面感觉不高级，让产品和交互再次怀疑这个橙色是否需要调整
这个时候设计坚持是非常有必要的，因为大量结果验证是可达到产品预期也符合用户使用习惯，仅因为大陆同事质疑就在测试环节随意修改，这个是非常没必要的。测试环节离上线时间是非常紧迫的，这个急促的时间推翻重来结果也可想而知
体验设计会有很多不可控的因素，是在各种局限下做出最合适的选择。要处理好问题的优先级，分清楚哪些是核心目标，哪些是兼顾目标，这样才能更有效的管理自己的时间以及项目的进度。
清晰设计层面来说就是方案能做到方向明确，方案明了；有效字从设计层面来说就是输出的方案可以解决存在的问题，能达到设定的目标以及可以切实落地。
清晰和有效的维度是不一样的：清晰更多是针对设计，在于不同方向/方案的差异度和侧重点；
有效更多需要联合设计上下游（用户/产品/开发），对于优秀的设计方案来说两者相辅相成，缺一不可
数量并不代表一个设计师的专业，最多只能说明设计师技法娴熟。在评审的过程中，不建议将所有的设计方案直接平铺。而是你要先经过自己思考、衡量与推敲，挑选出最优的 1~2 个方案进行方案评审，并给出设计说明，陈述方案的思考逻辑。
在设计最初期先思考有哪些途径达到目标，确保所有实现手段的方式都有考虑到，整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归，才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。
之前的例子比如目标答案是提高点击率和阅读量，我从3个方面阐述方案的可行性
方案一：沿用当前页面的比较扁平设计样式，选用大间隔大标题区分模块，在页面里加入品牌色装饰强调我们的模块，吸引用户点击；
方案二：可以采用卡片式设计突出点击感，吸引用户点击；
方案三：因为头部有用橙色装饰强调，所以整个头部模块不用卡片式呈现，突出后面2个模块
这样3个方案给需求方，即满足对方产品需求，又满足设计需求，对方就不会全盘否认设计方案，走入改改改模式了，就算对方有修改意见也能说出具体点去修改，而不是说我觉得不好，不够突出这样非常主观的想法
强调一点：我们在方案都没说服自己的情况下不要推出去，专业度是每次和对方碰撞中中慢慢建立起来的，如果说服不了自己的情况下，推出去对方很大可能性要你试无数稿对比；另外在阐述发需求方时候，也要注意语言的引导，慢慢理解对方的意图
初入行时认为满足了需求方便是好的设计，当其他角色提出不同意见就会觉得他们不懂的设计。这些现象是因为设计师在项目前期没有正确思考需求本身需要解决什么问题、方案能否达到团队共同设定的目标，以及方案是否能平稳落地这三个维度
我们在实际输出方案的时候，不能从产品经理的需求文档开始，而是要把考量维度更前置，从项目现有的问题出发。这个问题的搜集包括外部用户的反馈，内部团队的声音，同时对问题进行筛选和甄别。
比如下面同一个产品按钮2种悬浮状态，左侧案例按钮hover状态是由正常状态面型变成线型；右侧案例按钮hover状态是正常状态下加投影。
如果我们仅从产品需求文档开始，不去深究其背后的原因，很可能把右侧hover状态直接变色处理，没有去思考hover的几种样式哪种是更适合当前场景的的，这样简单粗暴的处理方式多了之后使得产品体验大大折扣
问题还需要结合目标一起考虑，解决问题的思路并不完全等同于目标，目标是大家一起制定的未来产品的发展方向。比如之前导航的案例，未发版前部分工作人员认为颜色偏重，但是从产品目标和品牌调性及目标用户审美上是没有问题的
在输出设计方案的时候，需要考虑到开发实现的可行性，需要消耗多少资源去实现这个需求，最低成本达到目标的路径是什么。最常见的就是情感化设计，下图案例2个空状态下的场景，原本考虑到趣味性及品牌属性加入动效，但是开发的业务需求已经排到下月，最后只能以静态图展示，先满足基本需求后续有时间再进行优化
再例如下面三组数据的排版方案一：文字最左边间距30px，文字最右边间距30px，中间一组数据中间对齐；
方案二：三组数据分别在360px宽的格子里距离左边30px。方案一在视觉上可能更加合理，当宽度是1200时右侧不会空太多，但是按方案二的逻辑写更加便捷，一组数据样式可以解决3组数据的排版，大大提高开发效率，如果用方案二评审加入开发实现方式的思考，那么按过稿率大大提升了
以上是跟进项目一整个具体过程，了解背景、分析问题、设定目标、到方案推导及执行输出、再到方案的落地，整个过程与产品研发沟通非常顺利，最后也获得良好的用户反馈，整个团队满满的成就感是非常开心的
进入互联网公司工作初期，大多数人对设计的理解更多停留在表现层，对设计的判断标准更多是好不好看、喜不喜欢。但作为设计师我们不要盲目的去画设计图，只有在设计方案前，更好的理解和分析了需求，才能很好地服务用户帮助用户使用产品；同时，只有站在用户的角度去分析理解产品，才可以帮助产品站在全局的视角提升用户体验和设计需求，从而打造优秀的用户体验。这2点综合起来才是设计师价值的体现。
原文地址：站酷
作者：贝贤设计笔记
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
数据可视化已迅速成为在网络上传播信息的标准。它用于各种行业，从商业智能到新闻，帮助我们理解和传达见解。
我们的大脑善于处理可视化信息，这使我们更容易理解图表或图形中可视化的数据，而不是表格和电子表格中列出的数据。一个伟大的数据可视化应该利用人类视觉系统的优势来呈现数据，以便数据被吸收和理解。它应该考虑用户对视觉处理的了解，提高并简化用户的数据体验。
目前有很多工具和框架可用于构建这些图形，是时候回归基础了。是什么让数据可视化有效？在设计数据时我们应该遵循哪些指导原则？
以下最佳实践将帮助您设计丰富、有洞察力的数据体验。
可视化是用于揭示模式的，提供上下文并描述数据中的关系。虽然设计师对给定的一组数据集中的模式和关系没有任何影响，但她可以根据用户的需求选择显示哪些数据以及提供怎样的语境。毕竟，就像其他产品一样，如果用户无法使用它，那么可视化就毫无意义。
为小白用户设计的可视化应该是结构化的、明确的和有吸引力的。他们应该用文字直接说明受众应该从数据中得到什么。
转换双亲的工作时间：妈妈VS爸爸
来源：https://flowingdata.com/2016/04/20/parent-work-hours/
另一方面，面向专家用户的可视化可以显示更精细的数据视图，以驱动用户探索和发现。细节和数据密度应该简单明了。
工作来来往往：国民失业
来源：http://graphics.wsj.com/job-market-tracker/
这是一个发人深省的数字：《纽约时报》网站上只有10-15％参与可视化交互的访客实际点击了按钮。《纽约时报》的图形团队制作了一些业内最好的作品，但几乎没有人与他们互动！
这表明，关于交互可视化设计，我们不能依赖交互来建立理解。关键数据不能隐藏在交互元素后面，而应该在没有交互的情况下可见。
然而，什么样的交互比较好呢？允许整合更多数据（否则可能被排除），以允许感兴趣的读者更深入地研究数据集。Nathan Yau 的流动数据已经垄断了这种交互式可视化风格市场，正如他关于死亡原因和预期寿命的图表中所展示的那样。
2005年至2014年的死亡率数据：死因如何因性别和种族而异
来源：https://flowingdata.com/2016/01/05/causes-of-death/
或者，交互可以用作吸引点，一个引发关注的点，可以让你的读者在远远地浏览之前，亲自参与该项目。看看 Quartz 这款有趣的书写和文化作品。这件作品首先要求读者简单地绘制一个圆圈——在继续文化形态的分析概述之前——画出简单而有效的可视化的特征。
画圆圈的方式说了很多关于你的故事
来源：https://qz.com/994486/the-way-you-draw-circles-says-a-lot-about-you/
同样， The Pudding 最近发布了一个交互式可视化软件，向读者讲述有关生日悖论的知识（生日悖论，指如果一个房间里有23个或23个以上的人，那么至少有两个人的生日相同的 概率要大于50%。）。虽然大多数非统计学家可能会发现生日悖论，这是概率论中的一个标准问题，非常枯燥且不直观，但这种可视化使得它看起来简直令人着迷。创作者融入最近的用户互动的方式使得整个体验非常具有关联性。
生日悖论实验
来源：https://pudding.cool/2018/04/birthday-paradox/
这两个交互式示例都起作用，因为它们允许读者参与数据且不需要通过交互来理解。
视觉突出性，使视觉元素从周围环境凸显的特性，是数据可视化的强大工具。它可以用于引导用户注意可视化中最重要的信息，以帮助防止信息过载。通过使用视觉突出一些细节并压制其他细节，可以使我们的设计更清晰，更容易理解。
一些视觉变量——颜色和大小——是我们创造和控制视觉显著性的关键。
色彩方案是优秀的数据可视化的关键。众所周知，色彩特别擅长打破伪装。我们可以使用温暖，高饱和度的颜色来突出关键数据点，并应用冷色调，使用低饱和度的颜色将不太重要的信息放到背景中。
2014：最热的年份
来源：https://www.bloomberg.com/graphics/2014-hottest-year-on-record/
尺寸也很明显。较大的元素比较小的元素更有吸引力，因此要扩大您希望读者首先阅读的元素，并缩小不太相关的文本和元素。
Cleveland 和 McGill 在信息可视化方面的著名工作，研究了视觉编码的有效性（即数据维度与视觉属性的映射）。他们根据人们对视觉编码的准确感知程度，对不同类型的视觉编码进行了排序，给出了以下（简化的）列表：
这对数据可视化设计的意义在于，我们显示定量信息的首选应该是按位置进行编码（如经典散点图和条形图所示）。与基于角度（如饼图）或基于区域（如气泡图）的编码相反，基于位置的编码有助于观众在更短的时间内进行更准确的比较。
然而，这并不是说所有可视化都必须是条形图或散点图。在研究可视化数据的新方法时，牢记这些原则是个好主意。
我真正想要强调的是，颜色不应该用于编码定量信息，而是应该用来编码分类信息。也就是说，我们可以使用颜色来表示属于不同类别的数据。
出生时的预期寿命
来源：http://www.vizwiz.com/2017/11/life-expectancy.htm
5.使结构元素像刻度线和轴一样清晰但不显眼
无论你是否支持 Edward Tufte 在设计中极简主义的极端方法，都要帮自己一个忙，从你的图表中消除视觉上的混乱。通过在数据元素和非数据元素之间创建可视化对比，来让您的数据大放异彩，就像 Nadieh Bremer 在他的获奖作品“美国出生时间”中所做的那样。
婴儿潮：白天工作时间出生高峰期
来源：https://www.visualcinnamon.com/portfolio/baby-spike
删除不起任何作用的结构元素使数据清晰（如背景、线条和边框）。减弱必要的结构元素（如轴、网格和刻度线），否则这些元素会与您的数据争夺注意力。网格为浅灰色，最宽设为0.5 pt，轴为黑色或灰色，最宽设为1 pt。
编码数据的每个元素都需要进行标记，以便读者理解它所代表的内容。简单吧？
错。太多设计师依靠图例来告诉读者哪些符号或颜色代表图表中的哪些数据系列。列举图例虽然对设计师来说很容易，但对读者来说却很难。它们迫使读者在图例和数据之间来回扫描，给读者的记忆带来不必要的压力。
更好的方法是直接在图表上标记数据系列。这往往更像是一个挑战，但是，嘿，你是设计师。你的工作就是做这项工作，以便于读者不必这样做。在下面的例子中，Nathan Yau 完成了避免使用图例的工作，创建了一个带有大量直接标签的小型交互式多重显示。
每人每日平均消费量
来源：https://flowingdata.com/2016/05/17/the-changing-american-diet/
7.使用消息传递和视觉层级创建叙事流程
最好的可视化讲述着引人入胜的故事。这些故事来自数据中包含的趋势、相关性或异常值，并且由于数据周围的元素而加强。这些故事将原始数据转化为有用的信息。
从表面上看，似乎数据可视化完全与数字相关，但一个伟大的数据故事是无法用语言来讲述的。信息传递具有清晰的视觉层次，才能一步一步地引导读者阅读数据。
例如，可视化的标题，应该明确阐明一个关键观点，使读者领会。分散在数据中的微小注释，可以通过异常值或趋势引起读者注意，从而为关键观点提供支撑。
来源：https://www.nytimes.com/interactive/2015/03/24/science/earth/arctic-ice-low-winter-maximum.html
我在这里要说的是：帮助读者，确切地告诉他们在数据中寻找什么！
正如我刚才提到的，我们可以在可视化中使用注释来帮助创建数据故事的过程。有时我们可以添加图形元素来使这些注释更有意义，以便将这些信息更直接地关联到我们的数据。
以这张来自 Susie Lu 的图片为例。“夏季大片”和“奥斯卡季”的数据重叠赋予了原本看似随机的高峰和低谷以意义。它们帮助观众理解数据的重要性，比单独使用字幕或注释更直接。
2015 - 2017.08 票房趋势：强大的开场和后期的爆发
来源：https://susielu.com/data-viz/box-office
静态可视化通常以 JPG 和 PNG 等位图图像格式发布，这对移动端用户来说是一个明显的挑战。许多数据可视化的美妙之处在于它们的视觉细节——微小的数据点和微妙的编码——而这些细节许多在静态格式的小屏幕上被丢失了。
例如：Accurat 工作室在诺贝尔奖上的精美复杂的作品，在印刷和高分辨率视网膜显示器上看起来非常棒的全尺寸，却在移动设备上几乎难以辨认。
视觉数据
来源：http://giorgialupi.com/lalettura/
为移动体验设计，或者使用像 D3.js 或 Highcharts 这样的 JavaScript 可视化库构建响应式可视化，或者为印刷、桌面和移动设备多种载体创建相同的静态可视化设计。
我今天谈到的所有最佳实践可以归结为一件事：在复杂性和清晰度之间找到合适的平衡，以满足受众的需求。
制作精美的、探索性的可视化细节总是诱人的，但这不一定是最合适的方法。在设计图形时要考虑周到 ，让读者的知识和目标决定应该包含哪些数据以及包含多少数据，并整理数据以讲述您想要讲述的故事。
原文标题：10 DATA VISUALIZATION BEST PRACTICES FOR THE WEB
原创作者：MIDORI NEDIGER
原文链接： https://www.webdesignerdepot.com/2018/07/10-data-visualization-best-practices-for-the-web/
翻译作者：桃花果
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
推荐 | 科技的不断发展将给未来的界面设计带来更多的可能性。复杂的语音界面、先进的 AR 或是真正沉浸式的 VR 都会被实现。而科技的进步也对设计师们提出了新的要求。在更加重视体验的未来，设计师们应该作出何种创新以应对变化呢？尼克·索萨尼斯曾在其著作《非平面》中写道：“要走出平面与狭窄，我们需要万花筒般千变万化的视角，我们的维度性和不断变化的能力才得以展现”。希望此文中提供的视角能给设计师们带来启发，跳出传统屏幕的平面来思考未来的界面设计。
快速摘要：
当改变来临，我们总倾向于自然而然地抵制它。我们所拥有的唯一真正的界限，就是我们的大脑告诉我们，事情最好保持原样。在本文中，Gleb Kuznetsov 分享了他的一些想法和观点，即在不久的将来，界面会是什么样子，以及我们能够期待何种非凡的体验。关键词：虚拟现实，用户交互，用户体验，用户界面
在我们做决策的过程中，情感起着至关重要的作用。一秒钟的情感便能改变用户体验产品的整个现实过程。
人类是一种由情感驱动的物种。我们选择一款产品并不是因为它有何意义，而是因为我们认为它能够给我们带来何种感受。未来的界面将会在产品设计的基础上使用情感概念。人们的使用体验将基于智商 ( IQ ) 和情商 ( EQ ) 。
本文试图展望未来，看看未来十年我们将设计什么样的界面。我们将详细研究三种交互媒介：
未来的界面将是什么样子？虽然我们现在还无法回答这个问题，但我们能够探讨未来的界面可能具有哪些特征。在我看来，我确信我们最终会摆脱那些充满菜单、面板、按钮的界面，并转向更加“自然”的界面，即扩展至我们全身范围的界面。未来的界面不会被限制在物理屏幕中，而是会借助五感的力量。正因如此，它们需要更少的学习曲线①——理想情况下，根本没有学习曲线。
①学习曲线：在一定时间内获得的技能或知识的速率，文中指面对未来的界面，用户需要更高效的学习速度，甚至无需学习即可掌握界面的使用方法。
除了使体验更加自然并减少学习曲线之外，对产品创造者来说，情感设计还有另一个益处：它提高了用户对产品的采用率。利用人类对情感的反应能力来创造更好的用户参与度是可能的。
使用语音功能作为主要界面交互方式的产品正变得越来越流行。我们之中有很多人使用 Amazon Echo 和 Apple Siri 来安排日常活动，例如设置闹钟或安排预约。但是，目前市场上可用的语音交互系统中，大多数仍具有一个天然的局限性：它们并没有将用户情感考虑在内。结果便是，当用户与像 Google Now 这样的产品进行交互时，他们有一种在与机器而不是真人交流的强烈感觉。系统的反应是可预测的，并且它们的响应是脚本化的。与这样的系统进行有意义的对话是不可能的。
但是目前市场上也有一些完全不同的系统。其中一个是 Xiaoice（ 微软小冰 ），一个社交聊天应用程序。这个应用程序的核心是情感计算框架；其理念是，首先要与用户建立一个情感连接。Xiaoice 可以动态识别情绪，并通过给出相应回答的长对话来吸引用户。结果，当用户与 Xiaoice 交互时，他们感觉是在与真人进行对话。
Xiaoice 的局限在于它是一个基于文本的聊天应用程序。很明显，如果是基于语音的交互，你可以获得更强烈的感受（ 人类的声音具有不同的特征，例如音调可以传达出强大的情感 ）。
微软小冰跨平台人工智能机器人图片来源：https://www.msxiaobing.com/
很多人已经通过电影 《 Her 》（ 2013 ）看见了基于语音互动的力量。Theodore （由 Joaquin Phoenix 扮演的主角）爱上了 Samantha （ 一个复杂的操作系统 ）。这也让我们相信，未来语音系统的主要目的之一便是成为用户的虚拟伴侣。这部电影中最有趣的事是 Theodore 从未见过 Samantha 的视觉形象——他只能听到她的声音。要建立这种亲密关系，必须产生能够反映出和虚拟伴侣性格一致的回应。这将使系统既可预测又值得信赖。
电影《Her》海报
图片来源：https://movie.douban.com/photos/photo/2166850749/
要实现像 Samantha 这样的系统，科技还有很长的路要走。但是我相信，语音优先的多模式界面将是语音驱动界面发展的下一篇章。这样的界面将使用语音作为主要的交互方式，并在上下文中提供附加信息，以创造和构建连接感。
为 Brain.ai 设计的语音界面实例 （图片来源：Gleb Kuznetsov ）
AR 体验的演变
增强现实（ AR ）被定义为在现实世界基础之上进行的数字叠加，并将我们周围的物体转换为交互式数字体验。我们的环境变得更加“智能”，用户在指尖产生一种“有形”物体的错觉，从而在用户和产品（或内容）间建立更深层次的连接。
AR 的独特之处在于它给予我们一种与数字内容进行物理交互的非凡能力。它允许我们看到以前无法看到的东西，这有助于我们更加了解我们周围的环境。这种AR属性帮助设计师使用熟悉的概念创造新层次的体验。
例如，通过使用移动 AR，可以创造一个全新水平的飞行体验，它允许乘客看到有关她的班次或当前飞行进程的详细信息：
AR 展示空客 A380 的飞行体验。（图片来源：Gleb Kuznetsov ）
AR 帮助我们找到穿越空间的方式，并一目了然地获取所需要的信息。例如，AR 可以为你当前的位置创建丰富的提示。SLAM 技术②在这方面有着出色的表现。SLAM 允许环境的实时映射，并能将多媒体内容置入环境中。
②SLAM 技术：（ Simultaneous Localization And Mapping ） 同时定位与地图构建技术，指机器人在未知环境中从一个未知位置开始移动,在移动过程中根据位置估计和地图进行自身定位，同时在自身定位的基础上建造增量式地图，实现机器人的自主定位和导航。
AR 有很多机会为用户创造价值。例如，用户可以将他们的设备对准建筑物，并在屏幕上了解该建筑的更多信息。它能够显著减少工作量，并通过导航和访问功能使用户获得轻松的情感体验。
在环境中提供附加信息（ 图片来源：Gleb Kuznetsov ）
我们周围的环境（例如墙壁或地板）也能成为交互的场景，在过去这仅限于通过智能手机和电脑实现。
下面的概念正是如此，它使用物理对象（白墙）作为画布，来表现那些通常用数字设备来传达的内容：
互动墙的概念——现实世界之上的数字叠加（图片来源：Gleb Kuznetsov ）
在一个名为 “HYPER-REALITY”（ 超真实 ）的一个网站中，作者 Keiichi Matsuda 制作了一段视频。视频中物理世界和数字世界已经合并，用户被大量信息淹没。
视频：
https://www.youtube.com/watch?v=YJg02ivYzSs&feature=youtu.be
科技允许我们同时显示几个不同的对象。但是当它被误用时，很容易造成过载。
信息过载是一个严重的问题，它会对用户体验产生负面的影响。避免信息过载将成为 AR 设计的目标之一。设计良好的应用程序会借助 AI 的力量将那些与用户无关的元素过滤掉。
当系统根据用户的需求和期望来实时管理内容和功能时，数字体验的个性化便会发生。很多现代移动应用程序和网站使用个性化的概念来提供相关的内容。例如，当你浏览 Netflix 时，你看见的电影列表都是基于你的兴趣进行个性化推荐的。
AR 眼镜能够创建新的个性化水平，即“高级的”个性化水平。由于系统能“看见”用户所看见的内容，因此可以利用这一信息来提出相关建议，或在环境中提供附加信息。想象一下，你很快就将戴上 AR 眼镜，并且传输到你视网膜的信息是根据你的需求量身定制的。
视频：
https://www.youtube.com/watch?v=eQ2OKB026Wc&feature=youtu.be
AR 体验具有天然局限性。作为用户，我们与内容之间有一条明晰的界线，这条线将一个世界（ AR ）与另一个世界（现实世界）分离开。这条线让人感觉 AR 世界显然不是真实的。
你可能知道如何去解决这一限制，即使用虚拟现实（ VR ）。当然，VR 确切来说不是一种新媒介，但直到最近几年，科技才达到能让设计师们创造沉浸体验的高度。
沉浸式 VR 体验移除了真实世界与数字世界间的屏障。当你戴上 VR 耳机时，你的大脑很难分析出你接收到的信息是否真实。电影《 头号玩家 》（ Ready Player One ）很好地解释了在不久的将来，VR 体验会是什么样子：
视频：
https://www.youtube.com/watch?v=cSp1dM2Vj48&feature=youtu.be
以下是设计师们在创造沉浸式虚拟环境时需要记住的几点：
1.写一个故事有意义的 VR 在其核心有一个强大的故事。这就是为什么在你开始设计 VR 环境之前，你需要为用户旅程写一个故事。“故事板”这一强大工具可以帮助你完成这一工作。使用故事板，可以创造一个故事，并检查所有可能的结果。当你检查你的故事时，你将看到何时以及如何利用视觉及听觉线索来创造沉浸式体验。
2.与角色建立更深层次的连接为了使用户相信 VR 世界中他们周围的一切都是真实的，我们需要在用户与其扮演的角色间建立联系。最明显的解决方案之一是，使用户的手部表现成为虚拟场景中的一部分。这一表现应该是实际的手——而不仅仅是一个被操纵的复制品。考虑不同的因素（例如性别或肤色）是至关重要的，因为这让交互更加真实。
用户可以看到他或她的手，并看到自己作为一个角色出现（来源：leapmotion ）
为了建立此连接，也可以将现实生活中的物品带到 VR 环境中。例如，一面镜子。当用户看向镜子并看到其反射出他们自己的角色时，用户和虚拟角色间的交互会更加真实。
VR 用户看向虚拟的镜子，并在 VR 环境中看到他自己的角色。致谢：businesswire
3.使用手势代替菜单
当设计沉浸式 VR 体验时，我们不能依赖传统的菜单和按钮。为什么呢？因为显示菜单比较容易打破沉浸感。用户将会知道他们周围的一切都不真实。设计师们需要依靠手势来替代传统菜单。设计界依然在为手势的使用制定通用语言，参与这项活动是有趣且令人兴奋的。但棘手的部分是如何设计出用户熟悉且可预测的手势。
Hovercast VR menu 是将现有的交互概念重新用在 VR 体验的一次尝试。不幸的是，这个概念会打破沉浸感。新的媒介需要一个新的交互模式。
4.与 VR 环境中的元素交互
为了创造一个真实的环境，我们需要使用户能够与现实中的物体进行交互。理想情况下，环境中的所有物体都可以被设计成允许用户触摸和观察它们的模式。这样的物体会起到刺激作用，并帮助你创造更具沉浸感的体验。触摸对于探索环境非常重要，婴儿在刚出生的那些天接收到的最重要的信息便是通过触摸获得的。
5.在 VR 中分享情感
VR 真正有机会实现社交体验的新高度。但为了实现它，我们需要解决一个重要问题，即将非语言的提示带入交互中。
当我们与他人进行交互时，我们获得的信息中有很重要一部分来自肢体语言。惊喜、厌恶、愤怒——所有这些情绪都在我们的面部表情中。在面对面的交互过程中，我们通过眼睛的区域来推断信息。当人们在 VR 环境中互动时，为了创造更加真实的交互，提供此信息是非常重要的。
好消息是，头戴式设备（ HMD ）很快就将涵盖情感识别。在虚拟现实中，几乎所有人与人之间的互动都受益于面部表情。
在 VR 空间中分享情感（来源：MITReview 的 Rachel Metz )
6.为 VR 环境设计合适的音效和音乐
音频是沉浸式体验中的重要组成部分。如果不为环境设计音效，就不可能创造出真正的沉浸体验。声音既可以被当作背景元素（即环境中风的声音），也可以是指向性的。在后一种情况中，声音可以作为提示使用——通过播放具有方向性（声音来自哪里）和距离（可以将用户注意力集中在特定元素上）的声音来提示用户。
在为 VR 设计音频时，制作 3D 音效是基础。2D 音效 VR 中表现不佳，因为它让一切都显得太平。3D 音效可以使你听到来自四面八方的声音——前、后、上、下——任何地方。你不需要使用专门的耳机来体验3D音效，通过头戴式设备的标准立体扬声器便可以实现。
头部追踪是良好声音设计的另一个重要方面。让声音以逼真的方式表现是至关重要的。这就是为什么当用户移动他的头部时，声音应该根据头部移动而改变。
7.预防晕动症
晕动症是 VR 的主要痛点之一。在这种情况下，视觉感知的运动与前庭系统③的运动感知之间存在分歧。在体验VR的过程中，使用户保持舒适是至关重要的。
③前庭系统：前庭系统是人体平衡系统的重要组成部分，它具有特殊的感受器，能够接受适宜的刺激，经过与其他感觉信息（如视觉信息、其它本体觉信息）的整合、加工等处理后，再经多条神经通路把这些信息传送到脑内更高层次的中枢，进行高层次的加工处理。
关于VR中导致晕动症的原因，以下是两种主流理论：
根据这一理论，晕动症的发生是由于预期运动与实际经历的运动在感官上不一致。
在《 The VR Book: Human-Centered Design For Virtual Reality 》一书中，作者 Jason Jerald 提到，晕动症的发生是由于眼球的非自然运动，而这是保持场景图像在视网膜上稳定所必需的。
以下是一些提示，有助于避免用户使用呕吐袋（避免晕动症的发生）：
当我们考虑产品设计的当前状态时，很明显我们仅看见冰山一角，因为我们局限于平面屏幕。我们正目睹人机交互（ HCI ）的根本转变——重新思考数字化体验的整体概念。在接下来的十年中，设计师们将打破这层玻璃（我们今天所知的移动设备时代）并转向未来的界面——复杂的语音界面、先进的 AR 和真正沉浸式的 VR。当创造新的体验时必须要明白，我们唯一的界限是我们的大脑总告诉我们，应该保持原样。
原文标题：Designing Emotional Interfaces Of The Future
原创作者：january
原文链接：https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/
翻译作者：阿钦
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我经常想，如何花费极少的精力避免可用性错误。在做了这么多项目之后，我意识到在我准备设计一件东西之前，我犯了很多常见的错误。当我专注于设计时，可用性问题已经悄无声息地形成了。它们在我的工作流程中扎根，现在我正试图改变我的工作方式。
在这篇文章中，你可以了解以下内容：
几个月前，我设计在线商店的时候，阅读了如何避免可用性错误的相关文章。几天后，我一遍又一遍地发现同样内容的旧文章。显然，它们都故意收集了同样的错误：经常出现并容易避免的错误值得反复提及。
问题是，它们似乎是临时性的解决方案，因为我项目的基本属性每周都在不断变化——信息架构、导航机制等所有东西。我每周都在寻找新的技巧，所以我决定寻找可用性错误的本质，而不是一种避免它们的方法。
可用性错误排序的低效性
识别可用性错误需要花费很多时间。它以消极的、妥协的方式影响有效性、效率性和便利性。一个小问题可能会让用户在完成任务时感到不愉快。巨大的问题甚至会让你无法完成任务。 在本文中，我将把它们称为不正确的设计选择。
可用性错误会影响用户便捷、高效或有效地完成任务
问题在于可用性问题有许多不同的形式和严重程度。那么为什么不对它们进行分类和优先级排序呢？ 它不能那么混乱，对吗？不久前我就是这么想的。在混乱中创建秩序会非常有意义，但是当涉及可用性错误时，这个概念就失败了。
制作群组或列出最常用的群组并不能提供有效的解决方案。为什么？ 用户体验设计不断变化，并且有多个变量。想想在过去二十年中我们与界面交互的方式是如何变化的。
我们已经从显示器转移到小型移动屏幕，而平板电脑和带有圆形屏幕的智能手表则拓宽了这一领域。而这只是以一种更复杂的方式去看待一个变量。
也就是说，在不断变化的设计领域，任何规则或原则都不会永远存在。这意味着查找和排序最常见的错误只是一个临时解决方案。这可能行得通，但不会持续太久。为了给用户体验设计遥不可知的未来做好准备，请查看您的工作流程以获得最终答案。
几年前，没有人会对设计一个可以从屏幕底部向上滑动即可访问的购物车功能感到惊讶。2017年，iPhone X 诞生了。从那时起，大多数用户都使用此手势（指滑动手势）进入主屏幕。
资料来源：support.apple.com
我以前不会浏览设计趋势，以免影响自己。我仅仅检查情绪板和配色组合，完全忽略导航结构和其他用户体验解决方案。我相信在看过流行趋势中的解决方案之后，我们会下意识地放弃我们的创新想法。
经过这么多年，整个概念在我脑海中浮现。忽略当前的用户行为模式和技术变化，您虽然不会让自己暴露在犯关键设计错误的可能性中，但你也会错过所有其他的机会，使你的设计真正有用。
好的，所以你要规划未来用户的行为，你就必须坚持到底。进行探索性访谈作为一种良好的开端，提出问题并发现痛点和欲望背后的动机为您提供了完美的素材：背景信息。
在设计界面时，这将成为宝贵资源。 它产生的数据量可能看起来很可怕。您可能会发现很难驾驭或使用，但里面总是隐藏着无限的可能性。
找到一个可行的方法获取一些有趣的背景信息。如果您没有时间进行面试，请查找类似产品的案例研究，从中找出结果。 看看现有的基准研究或类似产品的成功特征。 虽然不完全相同，但它们可以为您提供一些帮助。在考虑设计线框图之前进行此项研究，可以让您为用户设计。
3.消除你的偏见
我正在设计一个食品配送应用程序，想要试验一下按钮的位置，这个按钮可以把你带到餐馆的完整列表中。 我通过几次测试尝试了很多变化，但没有引起太多关注，因为用户还有其他几种方法可以做到这一点。尽管接下来的测试进行得很顺利（这样受试者就能完成任务），但这种体验仍然不能让人满意。找出问题的症结所在是个难题，因为他们无法确定问题（反正不是他们的工作）。
几天后，我正在看着我的女朋友在一个完全不相关的网站上订餐。我注意到她是如何避免定制的套餐和推荐的餐馆。她说它们看起来像广告。她认为主页是一个受控制的环境，所以她进入了餐馆列表，在那里她可以在不受控制的情况下对它们进行排序和过滤。这是我项目的关键：控制。我在测试期间错过了这点，因为我对用户应该如何使用应用程序有一种偏见。
做出风险设计决策的最简单方法是什么？清醒的意识到您的桌面和移动设备用户想要如何使用您的产品。为用户构建而不是告诉他们应该如何思考，总是变得更容易。宏观看待目标群体期望如何与产品交互，将帮助您创建直观的界面，同时简单地避免关键错误。这是一笔很好的交易。
设计师证明自己和他们设计的用户一样人性化。虽然很难，但我们必须接受这个事实。这个微小的错误至今仍困扰着我。接受你的错误，尤其你是完美主义者。我们不可能一直十全十美。
此外，我们无法避免较小的可用性问题，没有人可以在设计时不考虑这些问题。它们只是过程的一部分。当然，使用各种经过验证的实践或（在这种情况下）改进工作流程有助于避免关键问题。但我们很可能无法解决与满意度相关的不便。因为我们以独特的方式感知世界，所以我们期望结果和行为不同。
5.理解你的错误并加以改进
分析出了什么问题和错误的原因。了解糟糕的设计选择背后的原因比错误本身更重要。这让我们回到简单地排序可用性错误“低效性”的问题。如果你能说出你为什么一开始就犯了错误，那么无论平台或观众如何，你都可以避免在未来犯同一个错误。
追溯你的错误可能会让在工作流程中养成习惯（或相反，缺乏习惯，从而导致很多麻烦）。就我而言，使用假设进行设计会导致许多小的可用性问题。反过来，它们以明显妥协的方式影响了整体用户体验。所以我写这篇文章。把你的错误视为你工作方式的副产品，这可以帮助改进方法，摆脱并根治问题。
6.验证您的更改
然而，单独根除错误并不能减少错误。就像设计和测试一样，重建工作流也需要验证。我们只需通过各种后续技术来做到这一点。您可以选择是向客户发送简单的电子邮件，创建完整的问卷，或是进行另一轮测试。确定获得有关工作的相关信息的最有效方式取决于您的项目和客户。
获得关于工作的反馈，以了解改进的程度。通过这种方式，您可以衡量更改的有效性并对其进行微调，以便在第一轮不满意时获得更好的结果。此外，它也为你的简历锦上添花，但这只是奖励。
以下没有特别的顺序，我通过改进您的设计工作流程来提高可用性。相反，它们提供了一个指南，告诉我们应该在哪些地方派上用场。 让我们快速回顾一下：
我仍然试图将这些技巧正确地整合到改进您的工作流程中，并且需要花费很多时间去精确的设计。但我的产出已经感觉更具战略性和准备性。 我希望它对你也有帮助。
原文标题：Usability Mistakes: 6 Honest and Valuable Tips From a UX Designer
原创作者：Sándor Zelenka
原文链接：https://uxstudioteam.com/ux-blog/usability-mistakes/
翻译作者：shmilyJ
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
作者：三分设 来源：站酷
全局导航
1、导航栏可折叠收起菜单。
2、收起时，鼠标悬浮在图标上同时右侧弹出菜单栏，然后触发菜单文字。
1、根据tab的层级来确定位置，最高层级在上，不同流程层级在下。
Tab在上：用户明确自己想要查找的目标在哪个tab并且需要一眼看到所有概况（想要查找数据时，直接到对应的tab下查找）。
Tab在下：需要看到查询的结果在各tab下的分布情况。
1、筛选区包括搜索项、查询、清除查询；如果搜索项超过一行时，需要「展开、收起」按钮。
2、折叠展开设计：默认显示一行将使用频率高、覆盖面广的1-3个显示出来其他的隐藏。（用户频繁使用的筛选条件能一眼找到）。
3、按钮固定在最右侧不变，搜索项可进行自适应。
4、筛选条件：
1、功能性按钮和批量操作（比如新增、导入、导出...）
2、根据使用频率进行排列新增＞导入＞导出；使用频率高的操作采用高亮显示。
3、如果按钮太多可进行操作项分类。
1、在能够概括的情况下，尽量简练、准确，一般可根据上下文关系进行简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。
2、对于比较复杂的表头，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释。
3、表头筛选、排序功能
提供表头筛选功能，依据用户关注度最高的字段进行排列。
需结合业务场景具体分析，一般来说，编号、时间、价格字段，提供正序、倒序功能。
考虑用户第一次进入列表页的初始化状态，保证用户进入页面时大概率能直接看到自己想要的东西。
表体
包含多选列、数据列、操作列
特殊处理操作的按钮、字段优先级、状态可以前置，方便一目了然。
1、全部展示（缺点：利用滚轴滑动次数太多用户视觉容易疲惫）。
2、较长字段用“…”展示，防止字段重复，对重要字段进行快速区分、对比（优点：每行可显示较多的信息 缺点：想要看全信息，只能鼠标移入字段出现气泡显示完整信息）。
3、换行，保持行高不变，改变文字距单元格的上下间距，最好不要超过3行，多余字段用”…”显示（优点：尽可能显示全部内容 缺点：同2）。
4、字段优先级分类，做折叠展开设计（筛选信息层级较高的字段放在表格栏，次要信息放入二级表格）。
5、数据库中没有该字段，用“-”，数量用“0”后边有小数点、后位数保持上下单位一致。
1、让用户将注意力放在数据信息上，而不是表格底色、边框
2、不使用斑马线设计、分割线样式轻盈、去掉不必要的装饰和颜色
基于业务、基于场景
比如用户以处理订单为主，操作项建议放在第一列，方便用户操作。
如果用户以查看信息为主，操作项一般放在最后一列。
可以采用下拉框设计
1、行高=文字行高+上下间距
2、文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍；行高影响每行信息的易读性。
3、一般行高为32-56px
1、采用8px网格作为基础单位，来定义各组件和模块间距，因为目前主流桌面设备屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比较普适。
2、最好列数在7±2
3、对齐方式：文本采用左对齐，金额及跟金额相关的百分比、操作项采用右对齐
一页最好能在一屏展示，避免用户来回上下滚动，比如固定为展示10条。
用户特殊使用需求，不适用以上规则，一页可能展示10条/20条，都可以。
作者：YOgire 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~模块化设计，简单地说就是将产品的某些要素组合在一起，构成一个具有特定功能的子系统，将这个子系统作为通用性的模块与其他产品要素进行多种组合，构成新的系统，产生多种不同功能或相同功能、不同性能的系列产品（定义内容来自百度百科）。
模块化设计思维最早可以追溯到从工业革命时期，工业革命之后制造业开始飞速发展，制造业能够飞速发展得益于生产效率的大幅提升。在设计产品时采用“模块化设计思维”，是提升生产效率的一个很重要的手法。
产品设计中对“模块化设计思维”的应用也是制造业现代化的一个很重要的标志和特点。到了互联网时代，“模块化设计思维”也被应用在了操作系统、app的开发过程中，也大大提升了软件工程师的开发效率。
“模块化设计思维”是一个思维方式或者说是一个设计手法，这个“手法”可以应用在很多领域。
我们日常生活中所用到的稍微复杂一点的产品，如飞机、汽车、家电、手机、操作系统等等，都是在以“模块化设计思维”为基础的设计手法中设计出来的。
“模块化设计思维”应用最彻底的行业当属「汽车制造业」了。从汽车要素的组件化、汽车架构的模块化到生产平台的模块化，可谓是应用的非常彻底。
例如：丰田汽车的「M20发动机」用在了凯美瑞、C-HR、威兰达、亚洲龙、RAV4荣放、奕泽这些车型上，在这里「M20发动机」就是一个“通用性的模块”经过与其他汽车要素进行不同的设计组合，就形成了不同的车型。
丰田汽车的「TNGA架构」也是“模块化设计思维”的产物。在TNGA构架下，汽车模块会达到高度的通用性，车辆零件的通用率可达到70%-80%，其中包括底盘悬架、发动机、变速箱等零件。
采用“模块化设计思维”设计出来的“模块”有两个显著的特点就是「独立」「通用」。
在设计时需要选择可以独立的内容来进行“模块化封装”。怎么理解「独立」呢？判断模块是否可以独立，可以组成的模块是否“可以进行单独设计、开发、调试”不依赖其他要素即可运转。
通用这个特点就比较容易理解了，就是该“模块”可以与其他要素进行多种组合，形成不同类型、不同功能的产品。
采用“模块化设计思维”来进行产品设计，有什么优势呢？
高内聚低耦合，是软件工程中的概念，是判断软件设计好坏的标准。目的是使程序模块的可重复使用性、移植性增强。通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低。
内聚是从功能角度来度量模块内的联系，表示模块内部间聚集、关联的程度。那么高内聚就是指要高度的聚集和关联，元素之间的关系简单、明了，运行稳定。一个好的内聚模块应当恰好只做一件事，高内聚具备可靠性、可重用性、可读性等优点。
耦合是对模块间关联程度的度量，也就是模块之间的依赖关系。低耦合度特性的模块能减少模块间的影响，防止对某一模块修改所引起的“牵一发动全身”的水波效应，保证整个系统的正常运行。
由于模块具有通用性特点，需要用到此功能模块时无需重复设计，可以直接使用或简单微调即可，减少了“重复造轮子”现象的发生。
这样一来可以降低生产设计的时间成本和财力成本，二来时可以很大程度的提升产品设计、生产制造的效率。
通过上述内容“模块化设计思维”的好处显而易见，那么作为设计师在系统设计中应该怎么应用呢？这里容易陷入一个误区就是为了模块化而模块化，模块化设计需要在工作中去积累、抽象出可以进行模块设计的内容。
首先一定要充分的了解整个系统，系统的业务属性是什么，系统的功能有哪些（可以使用脑图梳理出来），然后站在“上帝视角”去观察整个系统，将具有「独立」「通用」特点的内容抽离出来进行“模块化”。
下面从「交互」和「UI」的角度来看两个系统中比较常见的例子
下图为「手机验证码验证」交互流程图，「手机验证码校验」流程可以用在登录、实名认证、修改密码、查看修改重要信息等功能中，是一个常见的可“模块化”的内容。
下图为近期涉及的一个系统中的「搜索页面」，系统中有很多搜索场景，例如：地址搜索、店铺搜索、品牌搜索、人员搜索等。通过对功能和使用场景的分析，将「搜索页面」进行了模块化设计。
“模块化设计思维”是一种提高工作效率的设计方法，需要各位在日常设计中尝试着换一种角度来观察系统。也要充分的理解“模块化设计思维”的定义才能够用好它，它并不是一个万能的方法，只有用在合适的地方才能体现出其价值。
作者：群青被注册 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~对于我们设计师来说，尤其是现在 B 端设计如此流行的情况下，表单设计细节尤其需要各位设计师注意。今天会分享表单设计中那些你不注意的细节点，必须先点赞收藏了，这些干货知识相信你一定用的上。
比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。
因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。
错误提示
错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。
左边的错误信息很清晰的解释了发生的问题，右边的错误信息对用户来说非常困惑。
1. 什么时候告知用户发生了错误比较好？
当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：
内联/实时：在输入时或移开焦点后立即提供反馈；
提交后/客户端：当用户点击提交按钮之后；
服务器端：当请求发送到服务器后再返回反馈给用户。
这些方法中的每一种都有其优点和缺点。
2. 内联验证
一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。
你可以用内联验证立即告诉用户哪里错了。
3. 提交后验证
另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。
4. 服务器端验证
服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。
5. 如何提示用户错误？
错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示 Error:90803，对用户有很大帮助。
6. 使用积极语言而不是消极语言
错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说”该字段不应该是空的“，不如说”请填写此字段“。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。
7. 必要时提供帮助
在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。
标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。
用不要用一些模棱两可的词，比如‘数字’可能会让人感到困惑，一定要明确意思。
1. 将标签放在输入字段的顶部
许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是 Z 模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在字段的顶部。
将标签放置在字段的顶部和使用浮动标签，这两种方式都很有效
2. 将标签放在输入字段的左侧
另一方面，当你询问用户比较复杂的问题，用户需要更多时间思考问题答案的时候，研究表明将标签放在输入框的左侧会比较好。
3. 标签应该是可见的，无论什么输入状态
无论你用什么方式，确保当用户填完内容后，标签是可见的。因为，当用户需要再次确认表单内容的时候，他们不用删除填好的数据来查看系统需要他们填什么。
4. 减少不必要的输入项
要填的表单越多，用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到，可以将必填和非必填的字段区分开，减少用户的负担。
5. 可见性
不管状态如何，字段都应该是清晰可辨的。此外，活动字段和非活动字段之间的区别应该要明显。
用输入字段应该有高对比度，在所有状态下都是可见的
6. 自动激活 PC 端表单的第一个字段
自动激活表单的第一个字段，这可以提高处理效率，避免用户额外点击。
7. 帮用户预先填好
在某些情况下，你可以帮用户预先填好字段。例如，可以很容易地检测到邮政编码，或者某些数值可能是频繁的。在这些情况下，为用户填充字段。
8. 格式
含有大量小数的数字很难读懂。因此，当要求较大的数字时，需要考虑添加格式以支持可读性。例如，在询问卡号时，使用自动格式化:读取 5678-9876-9738-8394 比读取 5678987697388394 容易得多。
此外，当请求需要特定格式化数据时，要包含一个实例，让用户准确理解要填什么。
输入字段的大小应该与他预期的数据大小相对应
10. 为桌面系统设计灵活的表单
在键盘和鼠标之间切换很烦人。在理想的情况下，用户应该只使用一种媒介来填写表单，但有时，这是不可能实现的。因此，如果用户需要多种媒介来填写表单，至少要尽量减少切换。为此，将需要同一种工具的输入组合在一起。
另外，当创建一个网页表单时，要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。
11. 为移动端系统设计灵活的表单
当在移动设备上时，将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点，但几乎很少有 APP 显示支持输入电子邮件地址的键盘。
输支持通过显示正确的键盘输入电子邮件
下拉框的使用比单选按钮更有挑战性，因为它需要额外的点击来打开它们。此外，用户无法提前看到选项，这可能会让他们感到困惑。因此，如果你只有少量的选项，使用单选按钮。如果选项的数量超过 4 个，下拉菜单的效果会更好。
1. 复选框
通过勾选复选框，用户应该是同意某些内容。我的意思是，他们应该说，“是的，我想要这个”，而不是，“是的，我不想要这个”。不幸的是，我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时，你又必须勾选复选框，像这样的伎俩对信誉是不合适的，所以不要动心使用它们。
通过勾选复选框，用户应该同意某些内容，而不是确认他们不同意。
一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。
1. 从简单的问题开始
从简单的问题开始，从用户已经很清楚知道答案的问题开始，像名字、邮件这类。然后再循序渐进问稍微复杂的问题，像账户信息之类的。
首先，一个很自然的顺序，当你第一次见某些人的时候，你会找一些比较好切入的问题，比如叫什么名字啊之类的。其次，当用户已经填了一些字段之后，那么之后会增加他填完表单的机会。
2. 创建逻辑信息块
将不相关的信息按逻辑分组。例如，你可以将结帐表单分为“个人信息”和“帐户信息”组，将信息分组可以帮助用户一次只考虑一个主题。
通过对相关信息进行分组，使表单可被快速扫描
3. 单步 VS 多步表单
当你有很多问题要问的时候，你可能想知道哪一个最有效：单步流程还是多步流程。一般来说，单步表单的转化率更高，因为它看起来更小，而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单，单步表单就非常不错。
当用户被要求必须填写更多复杂信息时，多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心，可以给到进度条，提示还剩多少步。
4. 单列 vs 多列布局
一般来说，用单列布局会更好，因为可以帮助用户更好地扫描，也可以尽量减少用户遗漏填写。
但当用户多次填写同一个表单时，他们更喜欢多列表单，因为这样不会浪费时间滚动。一般来说，在 B 端应用中这种多列表单会比较合适。
设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊，会容易劝退新手用户。
根据用户按下按钮会发生什么来命名按钮
1. 提高用户的容错率
对于更复杂的表单来说，按钮最重要的一点是，应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子，如果用户点了在线帮助时，他已经填好的数据不应该被丢失。或者，如果用户由于意外点击了按钮，请求不应该被提交。
2. 主要按钮和次要按钮应该很容易区分
为了避免点击错误的按钮，用户应该能比较容易地区分主要和次要按钮。另外，最好不要只依赖颜色，样式上最好有比较大的差异。
让主要和次要的按钮样式上有比较大的区分度
3. 正确的标签按钮
按功能明确地标注按钮。例如，如果按一个按钮可以创建一个账户，在按钮上的文案叫”创建账户”要好过“提交”。
当用户打开表单时，他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。
不幸的是，这里面提到的许多错误，并不需要多么高级的技巧，而是因为设计没有同理心。仔细思考你的设计流程，检查是否能让所有内容对不同背景和专业知识的人都是清晰的。
通常来说，一般要达到以下目的，大多数指导原则都来自这些规则：
用户应该只输入一次数据
用户应该填尽可能少的信息
用户应该只需要记住少量的信息
用户检查和恢复错误内容应该要很容易
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：nanaOMO 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
译者推荐 | 著名的诺贝尔奖获得者赫伯特·西蒙在对当今经济发展趋势进行预测时也指出：“随着信息的发展，有价值的不是信息，而是注意力。”
在互联网中，设计师多是处在执行层。通常我们会去追寻做这个项目的原因和目标，那对于整个互联网时代，设计师如何通过设计手段紧紧抓牢人类最有限却最有价值的注意力呢？这篇文章就是一个向导，帮助你找到方向。
摘要：电子产品正在争夺用户有限的注意力。现代经济学越来越关注人类的注意力以及产品如何吸引用户的关注。
注意力是数字时代最有价值的资源之一。在人类主要历史进程中，获得的信息是有限的。几个世纪以前很多人不识字，教育是一种奢侈。如今我们可以大规模获取信息。任何有互联网连接的人都可以获取事实、文学和艺术（通常是免费的）。我们面对的是丰富的信息，但我们的大脑处理信息能力和以前一样。每天仍然只有24小时。今天，注意力成为了限制因素，而不再是信息。
在深入讨论注意力经济之前，我们首先需要把注意力的定义阐明清楚。注意力的正式心理学定义和大多数人对注意力概念的看法是重叠的。
注意力：选择性地专注于我们目前正在感知的一些刺激，而忽略来自环境的其他刺激。
在平常的话中，我们经常说“请注意”。这个表达意味着注意力的两个重要特征：有限的注意力和有价值的注意力。当我们“关注”一件事，我们会消耗精神资源的预算，相应的我们会减少消耗在其他地方的注意力。关于人类注意力的理论都认为注意力的能力是有限的。心理学家兼经济学家 Herbert A. Simon 将注意力描述为人类思想中的“瓶颈”。他也提到“丰富的信息造成了注意力不能集中”。一心多用的自负是一种谣言：人们不能同时一心多用。比如，人们可能会在看电视时拿出手机，但是如果他们将注意力转移到手机上，他们就会错过电视节目中发生的一些情节。
注意力是我们个人的宝贵资源。这个资源同样受到商业、政治运动、非营利组织、还有无数其他组织的重视，他们都在试图吸引我们去花钱或者花费时间。在1997年，Michael H. Goldhaber 写道，全球经济正在从物质经济转为基于人类注意力的经济。例如很多在线服务是免费提供的，但在注意力经济中，注意力经济是资源更是一种货币：用户用他们的注意力为服务付费。今天，注意力经济的动力促使企业吸引用户在应用程序和网站上花越来越多的时间。创建网站和应用程序的设计师明白，他们的产品是在竞争激烈的市场中争夺有限的用户注意力资源。吸引注意力的目标导致了很多不同设计趋势的普及，例如：
在我们最新的语音助手研究中，我们发现当用户在开车，亦或是他们的手或眼镜很忙碌的时候，经常用到手机语音助手的功能。一个常见的抱怨是，Siri 或者谷歌助手在手机屏幕上显示结果而不是大声读出内容。比如，即使是简单而常见的问路任务，也可能要求司机将注意力分散在屏幕信息和道路之间。
配文：在 iPhone 上问 Siri 得到的查询结果是展示在屏幕上的，用户需要将注意力分散到任务和屏幕的信息上。
同样，智能手机用户的注意力也经常被当前使用的应用程序、网站、电视节目或其他外部刺激所分散。这就是为什么手机上的会话往往比在台式机上的会话短：中断的可能性很高。
为了理解一个设计是否超出了用户的注意能力，需要在上下文中进行研究。实地研究、日记研究和访谈都可以用来了解人们在现实生活中是如何使用该系统的。
许多用户都知道网站和应用程序在努力吸引他们的注意力。在最近的可用性测试中，一个用户在 AllRecipes 网站上看一个关于“如何做煎饼”的视频，当这个视频播完后，网站会在自动播放列表中加入相关视频，我们的测试者没有发现暂停该视频的选项。在视频上出现的唯一选项是重新播放，或开始观看播放列表中下一个视频。
配文：AllRecipe 网站设计了自动播放视频列表，旨在保持用户对网站的关注
当播放列表在排队时，用户评论到“这似乎让我看电脑的时间比我实际需要的时间更长了”。播放列表在每一个食谱视频播放之前展示一个广告——该网站有明确的经济激励措施，可以将访问者的注意力集中在连续的视频上。一些用户对于无法控制花费在设备上的时间感到无助。数字产品的设计越来越吸引人，经常让用户上瘾。对父母来说，花太多时间在科技上的影响尤其令人担忧。吸引人眼球的设计可能会让年轻人养成习惯，当设备被拿走时，他们可能会经历“戒断”。有些用户会调整自身的行为。其中一些调整是有意识并采取了行动的，以限制在线时间。经过深思熟虑的调整包括设置上网时间限制、卸载某些应用程序或使用家长控制。用户还学会以微妙的方式保护他们的注意力。条幅盲目性（Banner blindness）是对大量信息做出反应而产生适应性反应的一个例子。条幅盲目性指的是当广告放在右边栏或页面顶部时，用户往往会忽略广告。这点就很好的说明了用户是如何适应大量信息的。用户也已经适应了移动设备上常见的通知轰炸：他们已经学会忽略其中的许多通知。在最近的一次可用性测试中，我看到一位女士在她的 iPhone 上浏览新的博客。当会话的第一个通知消失时，她向我道歉并问道：“你还用这个录音进行研究吗？”在我向她确保这不是个问题之后，她继续了这个测试任务。在整个会话期间，还有几个通知从这个用户的手机上发出，但没有一个通知打断她的思路。
我们根据目前观察到的未来预测，为注意力而设计的趋势将会继续演变。很多企业将会选择创造更多抓住用户注意力的广告。自动播放视频和不可跳过的广告几乎普遍不受用户欢迎，但它们将继续作为设计特色。在抢夺用户注意力的军备竞赛中，广告将会变得越来越身临其境。主流的社交媒体平台，如 Facebook、Instagram 和 Snap 都在测试增强现实广告。
一些企业将会持续研究形成习惯的设计，来吸引用户越来越多的关注他们。注意力经济拥有一个乐观的未来也是可能的：最近的发展为更公平的注意力经济带来了希望。越来越多的广告采用了分成收入模式，这使得用户可以用他们的注意力（观看广告）或金钱（保持他们的注意力）来支付。
配文：Spotify 允许用户在其广告赞助的服务上免费听音乐，如果用户希望避免令人分心的广告，他们可以直接为这项服务付费
一些企业已经回应了用户关于分散注意力设计的抱怨。Apple 最近更改了通知的设计，可以在 iPhone 上快速连续删除多条通知，还引入了屏幕时间统计功能，允许用户监控他们对点子设备的使用情况。
结论
数字经济的某些事实可能不会改变。在可预见的未来，广告将为一些免费内容提供资金，应用程序将争夺新用户的注意力，而人们的注意力仍然有限。但是，设计师在注意力经济中有一个选择：他们可以平衡业务需求——— 比如对新用户、广告收入和利润的需求——同时尊重用户的最大利益。
原文标题：The Attention Economy
原创作者：Lexie Kane
原文链接：https://www.nngroup.com/articles/attention-economy/
翻译作者：樱桃小丸子
授权获取：张聿彤
文章审核：王翎旭
文章编辑：王鸿飞
该译文并非完整原文，内容已做部分调整。如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。如需转载，请注明来自 三分设
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：三分设 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
“仰望星空，脚踏实地” ，做设计需要想象空间，也要有反思和总结的能力。
让我们来看两个毫无关联的产品的界面。
BI产品
团队协作产品
这两个案例展现了如何选用不同的模式以实现不同的目的。
对于BI产品来说，目的是让数据分析更彻底，提高数据分析效率；更好的整合数据，为企业提供报表，做为企业决策的依据；更好的帮助企业管理者管理企业，提高企业实力。
对于teambition来说，目的是轻松记录要做的事，并与伙伴实时同步进展。让彼此清楚地了解项目整体情况及事项优先级，从而完成目标。
基于产品目的我们可以看出BI产品重效率；teambition 更看重清晰以及使用是否轻松愉悦。
而产品的目的决定了它所采用的设计模式也会不同，下面我们再对照界面看下基于目的在界面设计上有什么不同。
BI产品
团队协作产品
BI数据分析类产品的布局多是小部件组成，这样做会方便用户进行多任务处理。界面设计也会相对比较密集，整个界面承载了很多信息。它使用了紧密的间距、紧凑的控件、灵活的布局和排版方式。
设计模式的概念最早是建筑师克里斯托弗 • 亚历山大（Christopher Alexander）在他的开创性著作《建筑的永恒之道》和《建筑模式语言》中提出的。
《建筑模式语言》里面包含了253个建筑设计模式，大的如城市和道路系统的布局，小的如家庭住宅中的照明和家具。
类似地，我们在创建界面时，也在使用设计模式（组件）来解决常见的问题：使用标签页将内容分成几个部分，并表明哪一个选项对应于当前的页面；使用下拉菜单展示可供用户选择相关选项。
标签页
下拉组件
设计模式分为2类：
第一类：功能性模式（组件库）表现为界面上的具体模块，如按钮、标题、表单元素、菜单等。
第二类：感知性模式（视觉规范）则是描述性的样式，以可视化方式表达和呈现产品的个性，如配色、排版、图标、形状、动画等。
功能性模式有点像名词和动词，它们是界面中那些具体的、可操作的部分；而感知性模式则类似于形容词，它们是描述性的。
例如，按钮是具有明确功能的模块，它让用户能够提交某项操作。但按钮上的文字的样式，以及按钮本身的形状、背景色、填充、交互状态和过渡动画不是模块，而是样式，这些样式描述了按钮是什么样的。
唐·诺曼在《设计心理学》一书中说过：系统映像（界面）和用户模型（用户通过与界面交互而形成的感知）之间存在着一道鸿沟。
在设计团队内部也是如此，比如“范围输入框”组件，你能想象它是一个什么样的组件吗？相信不同的人肯定有不同的心智模型，因为这个组件不是常用组件，在ant design、arco.design组件库中也找不到这个名称组件，因为它是TDesign的产物。
而每个公司都会根据自己的产品特性创造一些非常规类组件名称，这个时候就需要在所有参与产品创建的人之间共享。只有产品内部设计语言一致，才能去培养用户的心智模型，这样才能去除系统映像与用户模型之间的这道鸿沟。
例如上面这个组件，每个人都需要知道这个组件叫“范围输入框”，而不是“输入框”或者“数字输入框”。
例如，teambition的目的是“轻松记录要做的事，并与伙伴实时同步进展”。
于是，我们可以去看产品，设计体系在实现这一目标的过程中发挥了多大作用，以及这些设计实践的效果如何。如果视觉、交互混乱，导致无法实现上述目标，那么可以认为这套设计体系是无效的。
上面介绍了设计体系包含的内容，下面我们针对这些内容进行具体的介绍：
做B端的小伙伴应该都知道ant design，但不知道有多少小伙伴有认真的看过ant design的设计原则。 可能有小伙伴会问这个设计原则有什么用，我最开始也觉得没什么用，后来在参与设计体系优化过程中发现这个原则就是金字塔尖。
例如：用户没有填写完表单，那么表单的提交按钮能不能点？是置灰好，还是按了以后再给弹窗提示。
例如：可编辑表格，是放一个笔状icon来提示可编辑，还是采用鼠标触发时出现输入框以及指针变为文本状态。
日常工作中总会在这些细节问题上争论很久，美其名曰“打磨设计”，其实很多时候就是设计原则在团队内部没有达成共识。
为了避免出现上述问题，我们要建立一套基本的价值观和原则。在一些公司里，尤其是在处于初创期的公司里，尝试建立一套共同的准则是很难的。设计原则是无法量化的，因此定义这些原则可能需要多次迭代。
对于原则到底是什么，可能存在一些争议。有些公司的设计原则偏重于品牌，有的偏重于团队文化，有的则偏重于设计流程。
例如，Pinterest的设计原则便偏重于品牌。
Atlassian公司没有分团队或者产品单独制定原则。
他们的目标是在客户可触及的每一点上都体现一些核心的价值观。比如“大胆”“乐观”“实用但不乏味”作为价值观的体现。
不过，尽管各处的价值观是相同的，但体现程度并不一样。
例如，官网就会较多的提现“”大胆”，但产品里面就不会，正如Atlassian公司的设计经理Kevin Coffey所说的，“没有人想要一个‘大胆的’服务支持页面”。
Atlassian 官网截图 https://www.atlassian.com/zh
Atlassian 设计体系 https://atlassian.design/
我们以TED为例。TED的一条设计原则是“追求永恒，而不是追求潮流”。永恒这个词不光体现在TED的界面上，还体现在TED的整个品牌和设计方法上。
这意味着他们不会为了追逐潮流而采用一项新的技术或引入一个新的设计元素。
例如：定义了原则为“简化”（让产品尽可能简单，简单到几乎感觉不到它的存在）。这种原则就是不实用也不可操作的。
怎么能让团队所有人都能理解？
消除无用的部分。每一个设计元素，无论大小，都必须有一个目的，并遵循它所属元素的目的。如果你无法解释一个元素为什么要在那里，那么它便很可能不应该在那里。这样的定义就清晰很多。
再例如：定义了设计原则为“有用”，什么是“有用”？
从需求开始。如果你不知道用户需要什么， 就无法做出正确的事情。去做调研，去分析数据，去与用户交流，而不是做假设。
好的设计原则也能帮我们确定优先级和平衡点。
Salesforce公司的Lightning设计体系的原则是“清晰、高效、一致、美观”。
这些原则的优先级必须遵从以上顺序。“美观”不应该高于“高效”和“一致”，而“清晰”应该始终放在第一位。按照这种方式对原则进行排序，可以让团队在做设计决策时明确哪些东西应该优先考虑。
Atlassian和Airbnb的团队成员被问及他们的设计原则时，他们都能脱口而出，没有片刻犹豫，没有人表现出迟疑，没有人想要去翻看品牌手册里的原则内容。他们为什么能把原则记得这么牢固呢？因为他们的原则足够简单、实用、易于让人产生共鸣。
Airbnb公司的四条设计原则（“统一”“通用”“风格化的”“对话式的”）便深深地扎根于其设计过程之中。
每当设计一个新的组件时，我们都会确保它完全满足四条原则。如果我们没有这一套原则，便很难就各种问题达成一致意见。----Airbnb 首席交互设计师
每个团队建立其设计原则的方法都不尽相同：有的会召开几轮研讨会，有的可能会征求CEO或创意总监的意见。不过，无论采取哪种方式，都离不开下面几点：
从目的开始
TED网站的主要目的可以用一句话来表述：“尽可能广泛地传播演讲。”因此，TED网站的精神和价值观便是触及尽可能多的人群，降低使用门槛，让产品具有很高的兼容性和可访问性。这意味着优化性能和提升可访问性比添加华而不实的功能更重要，清晰的文案比大胆的设计更重要。
寻找共识
如果你仍处在定义设计原则的阶段，那么一个有效的方法便是让团队的一些人或所有人（取决于团队规模）各自回答关于设计原则的问题。例如，在他们眼里，什么样的设计对你们产品来说是好的设计？他们将如何用既实用又易于理解的五句话向团队的新成员解释设计原则？
面向正确的受众
如果搞不清楚设计原则是为谁写的，就一定会写出含糊不清的原则。有的小伙伴说我们领导就喜欢“美观”，那我们是不是把“美观”放在第一位？一定要搞清楚为谁而写。原则到模式
作为一个设计师，定义设计原则可能对你来说也许并不难， 但怎么把原则、品牌价值、组件相结合，怎么体现在设计模型中，这个我觉得是个挑战。
对于 TED 来说，信息的清晰比美观更重要。试图将每个演讲都 提炼成一个短句可能很难，所以有时候标题可能很长。对标题 进行截断是很容易的，但对他们来说，演讲信息的优先级是最 高的。
因此，他们没有选择相对容易的标题截断方案，而是确保他们的设计模式可以容纳长的标题。
功能性模式是界面中有形的构件（表单）。它们的目的是让用户能够完成某种行为（填写表单），或者激励用户完成某种行为。
功能性模式可以很简单（标签⽂字、输⼊框、按钮 ），也可以组合成更复杂的模式（搜索组件）。
标签⽂字、输⼊框、和按钮
搜索组件由标签⽂字、输⼊框和按钮组成
随着产品的发展，模式也在不断发展。包括风格，甚至功能和交互方式，都有变化。然而，它们的目的基本保持不变。
我们用顶部导航举例：
顶部导航是由logo、搜索定位框、文字下拉框、图标功能按钮、通知按钮构成。导航条里的每一个模块都有自身的目的：搜索定位框告诉我们怎么快速找到想要的东西，导航带领我们浏览全局，指引我们到想去的地方，而后面的的图标按钮让我快速触达。
总的来看，这些模块都有一个共同的目的：引导用户快速浏览使用。随着产品的发展，模式也在不断发展。
例如，随着产品功能越来越多，可能会在导航上面新增设置功能，让用户自己去排布常用功能。又如，我们可能会对导航进行重新布局，把导航按模块分类，采用标签按页展示。把模块下面更多功能放到子页面左侧。虽然我们不断的对模式进行迭代，希望它更好的实现各自的目的或者说更有效地激励用户使用。
在设计开始阶段就阐明模式的目的，能避免在产品发展过程中做重复性的工作。
目的决定了其他的一切：模式的结构、内容及呈现。了解模式的目的，可以帮助我们设计和构建更加稳健的模块。
如果说功能性模式是界面中的组件，那么感知性模式则更像是样式——描述组件是什么类型的，给人的感受是什么样的。下面，我们将探讨感知性模式。
设想我们每个人各有一套房子，且每套房子都有以下这些家具：一张桌子、几把椅子、一张床和一个衣柜。
不过，虽然都有这些家具，但每套房子给人的感觉截然不同：可能是因为家具的样式、材料、颜色、纹理不同，或者是床罩的布料、装饰品的样式、房间的布局和灯光，甚至是房间里播放的音乐不 同。
上述这些属性便称作感知性模式。正是因为它们，可能你的房子就像是一个地中海风格的小窝，而我的房子就像是一个仓库。
而数字产品感知性模式的例子包括语气、排版、配色、布局、插图与图标样式、形状与纹理、间距、意象、交互或动画，以及这些要素在界面中的组合和使用的具体方式。
有时，人们将这样的特性视为产品的样式，或称作皮肤，也就是最外面的一层。但要想取得成效，它们必须不仅存在于表面，还必须存在于品牌的核心，并随着产品的发展而发展。
只有这样，感知性模式才会成为让产品脱颖而出的强大力量。
同一领域的产品，哪怕具有相似的模块，它们给人的感觉也是不一样的。感知性模式通过界面传递品牌，并让品牌被人记住。
看下面的图片，你能认出它们是什么产品吗？
这两张图里面并没有太多的信息，你只能看到排版的样式、一些图形和颜色，以及一些图标。然而那些视觉上的线索极具辨识度，所以你仍然很有可能看出它们分别属于什么产品（即钉钉和飞书）。
这些视觉元素通过有意识地反复使用，便形成了模式，这就是为什么我们可以在没有上下文的情况下认出它们。
在模块化的系统中，想要做到视觉上的连贯统一可能是一件很棘手的事情。模块是由不同的人根据不同的目的创建的。而由于感知性模式是渗透到系统中各个部分的，因此它们可以将系统的不同部分连接起来。如果这种连接是有效的，那么用户就会感受到模块之间的统一性。
例如：飞书和腾讯的相同功能的组件感知模式是不一样的，所以两个公司设计体系不能混用。
如果说功能性模块反映的是用户需要且想要的内容，那么感知性模式关注的则是他们直观的感受或行为。
在《网站情感化设计》一书中，作者提出了一 个简单的方法，通过创建“设计角色”捕捉产品关键的个性 品质。以下是一些有助于探索感知性模式的一些技巧。
情绪板是探索不同视觉主题的绝佳工具。可以使用数字化的方式创建情绪版（Pinterest或花瓣都是一种用于创建数字化情绪板的常用工具）。
如果你目前做的产品是需要体现：科技、质感、智能，那上图应该可以满足这些条件，你可以通过这张图与领导进行沟通达成一致，然后从中提炼出一些颜色、元素、材质，这样大方向就不会有太大问题，只需在细节上进行打磨。
定义好了大致的方向之后，便可以使用样式叠片来更加细致地探究多种可能性。样式叠片的概念由Samantha Warren提出，他将其定义为“由字体、颜色等界面元素组成的能传递Web视觉品牌精髓的设计交付物。”
和情绪板一样，样式叠片可以为用户和产品团队提供有价值的讨论点，并呈现他们对特定设计方向的初始反应。
arco.design 首页这张图可以理解为就是样式叠片，把不同的组件样式叠片放在一起比较，有助于准确地找到设计方向。
当功能模式和感知模式建立完成后，我们将它们集成到产品的过程，它们还将进行演变。
因为在真实的界面中，模块、交互、样式之间相互影响下会产生新的问题，这都是很正常的，是典型的迭代过程，这个过程会一直持续，直到设计语言最终形成。
像ant design、arco.design应该都经历过这个过程，只是我们不知道而已，要不然也不需要花费几年的时间打磨后才发布出来。
平衡品牌性与一致性：
过分关注一致性也会扼杀品牌性。矛盾在于，让设计达到完美的一致性无法确保它依然具有很强的品牌性。有时，这样做反而会削弱品牌性——在一致性和统一性之间存在着细微的差别。
《英国公开大学》的创意总监曾说过：“当你专注于产品一致性的时候，打造产品质感的一些重要的细微之处就有可能会丢失。
发展感知性模式需要为设计师赋予打破常规的权力，鼓励设计师积极地探索更多的可能性。好的设计体系能在品牌的一致性和创造性表达之间取得平衡。
小规模试验：
后期如果发现样式无法满足，我们如何将新的样式引入设计体系呢？
可以先进行一些小规模的试验是一种相当有效的做法。如果某些元素的效果很好，我们就逐渐将它们集成到其他界面中去。
例如，在学习者完成一个步骤时，纯功能性的切换按钮缺乏庆祝和成就的感觉。于是，我们用带有圆形样式、弹跳 动画以及勾号图标的按钮取代了先前的按钮。
虽然新的按钮样式受到了学习者们的好评，但它与设计体系的其他元素格格不入。后来，我们开始在网站的其他地方应用圆形图案、弹跳动画和勾号图标。如果不这样做，那么整个设计 体系给人的感觉就是割裂的。
数字产品都是由团队打造的。团队里的每个人都有各自的具体目标，都有各自的截止日期。这就意味着难免会出现草率加入的模式、重复或错误的模块。
我们能确保一个产品即便有多人协作，却仍能连贯、统一吗？ 只要我们团队对自己的设计体系及其运转方式有共同的理解，我们就能做到这一点。
这意味着我们遵循相同的指导原则，我们对品牌愿景的理解是一致的，我们在设计和前端架构方面有共享的方法，我们知道什么样的模式是最有效的，也知道它们的工作原理。换句话说，创建统一的设计体系需要共享设计语言。
许多伟大的建筑物（如圣家族大教堂、沙特尔大教堂、阿尔罕布拉宫）并不是由一位主建筑师在绘图板上费力地创造出来的，而是由一群人构建出来的，这群人对能将这些建筑物变为现实的设计模式有着深刻的共识。
“几组人可以通过遵循一个共同的模式语言，当场构思出他 们的大型公共建筑，就好像他们共有一个心灵。”
——克里斯托弗 • 亚历山大，《建筑的永恒之道》
我们可以用类似的想法构建数字产品。设计语言可以让人们创建出具有整体感的产品，哪怕不同的人负责不同的部分也是如此。
如果一个界面上的元素没有恰当的名称、团队里人尽皆知的名。那么该元素就没有在你的设计体系中成为有效的单元。一旦你给一个物件命了名，你就塑造了它的未来。
例如，如果你给的是一个表现型的名称，那么它将来就会受到样式的限制：“蓝色按钮”只能是蓝色。
例如，如果你给的是一个状态属性的名称：“幽灵按钮”，它的特点是：按钮形状的透明按钮，但有细实线的边框，常用在有色背景上。
仅仅完成命名还不足以建立共享的设计语言。整个团队都应该 沉浸到设计语言中去，让它无所不在。
让设计模式变得可见：
如果有条件，可以在墙上开辟一块专门展示设计体系的空间，将它称作“模 式墙”
让你的设计体系更加开放，人们会感觉你欢迎他们的加入，欢迎他们提出问题甚至做出贡献。
引用事物的名称：
所有语言的共同特点是，只有不停地使用才能让它保持活力。
它需要成为日常对话的一部分：
这就是为什么需要有意识地使用约定好的名称去引用这些模式很重要——无论这个名称听起来有多奇怪。将设计体系作为入职培训的一部分将设计体系的内容作为入职培训的一部分，新员工了解设计体系就会更加容易。当新员工入职时，他们将了解到设计指南是如何创建出来的，这样他们就可以理解为什么以及如何做出决策。在 《英国公开大学》 内部，他们创建了一个入门性质的线上课程，其中有一章专门对模式库进行了介绍，并包含了 一些小测验和小课程，这样可以帮助新员工更好的理解设计体系。
定期组织设计体系会议：
每个人都讨厌开会。但是，如果你希望每个人都跟得上设计体系的发展，那么组织召开设计体系的会议就是必要的。这是所有设计师和开发人员共同专注于设计体系的时间。一开始，可 以每周举行一次，当团队找到节奏之后，可以每两周举行一 次。团队可以利用例会时间就产品的总体模式（如图标、排版）得出一致意见。同时，这也是分享新模块并讨论其目的、 用途及可能遇到的问题的好机会。
设计体系不是一夜之间构建出来的，而是通过日常的实践逐渐形成的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：夜鹰YEAH 来源：站酷
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
对于B端来说，可能很多UI和前端喜欢直接套用Ant Design或Element ui组件规范；因为之前企业要求并不高，但是随着市场和环境的发展，企业对B端越来越重视，这些模版太类同，显然就太烂大街了。随后字节推出Arco Design、腾讯推出企业级设计体系TDesign、有赞推出Zan Design，很多大厂都推出了适合自己产品的模版和规范，给了我们许多借鉴，能让我们快速作出一个不出错的方案。不过企业、市场的要求显然不止于此，我们的设计追求也不止于此。那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
为啥要搭建设计系统？设计系统对我们开发团队中谁有指导作用？
◆ 设计系统可以保证我们产品风格的统一性，降低用户对新产品适应时间和学习成本；对UI设计输出效率有很大的提高，在团队协同中可以大大的减少无效沟通，节约时间成本
◆ 在开发团队中，设计系统对UI、交互、前端、测试等岗位的工作都有一定的指导作用
设计原则是传统智慧的沉淀与未来趋势的结合体，能够帮助我们更好的进行设计活动时代在进步，设计原则也必然需要不断的更新以适应发展新的设计原则要求界面更友好，操作更加人性化。
这里我归纳了8条原则仅供大家借鉴学习:
◆ 可用性：有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作
◆ 易用性：易用是首要考虑的因素，能一步解决的事情绝不两步
◆ 统一性：页面风格、色彩、布局等要保持全局统一，不可为了某一功能的美观而去破坏整体
◆ 亲密性：信息的关联性强，距离就要相应的缩短，让他们看起来是一个视觉单元；反之，则距离要加大，要让用户对信息的区域划分一目了然
◆ 对齐性：在界面中，将元素进行对齐，符合用户的认知，引导视觉流向，让用户更加流畅的阅读信息
◆ 对比性：对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
◆ 重复性：相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。
◆ 稳定性：没有任何东西比产品的稳定重要，down机再好的产品也是徒劳。会影响到系统稳定的事情不能做
响应式布局，能够适应各种屏幕尺寸及分辨率，确保整体布局的一致性简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。一般采用栅格系统布局，常用栅格一般是16列或24列。
◆ 栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于图标与文字间隔的小型元素。
◆ 模度：为界面布局的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，我们网格基数设为8，卡片宽度及间距为8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920页面布局为案例：通常B端产品左侧会有一个导航菜单，假设240px,右侧核心工作区域总宽1632px, 右偏移240px ,列数16列，列宽86px, 间隙16px， 左右边距24px; 左边导航和边距固定不变。
上下布局以1920页面布局为案例：通常左右会有一个留白区域，假设144px,中间核心区域总宽1632px, 右偏移144px ,列数16列，列宽86px, 间隙16px。
设计风格说白了就是用户最直观的感受，“商务、时尚、简约、科技感、沉稳、年轻、高端...”?
决定设计风格的因素有这些：
色彩是UI设计的基石，人脑对于色彩的记忆度要高于形态；除了美学之外，色彩还是是情感和联想的创造者。通过对自然的感知和行为，我们通常对色彩定义品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是体现产品特性和传播理念最直观的视觉元素之一（例如：我们熟悉的政府蓝/党政红/淘宝橙，他们都能直观或间接的传达产品特征属性）
◆ 功能色：遵守用户对色彩的基本认知，保持一致性，不过多的自定义干扰用户的认知体验，提高用户的阅读理解力，功能色代表了明确的信息以及状态，比如正常、成功、失败、警告、链接等
◆ 中性色：主要应用在界面的文字部分、背景、边框、分割线等场景，根据使用场景，通常将中性色被定义为 3 类：文字、线条、背景
◆ 衍生色：B端产品中颜色的应用场景可能很广泛，要考虑它的延展性，按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色
设定统一的字体规范，无衬线黑体中宫更为开放，布白更为匀称，显示效果更为舒适，醒目利于阅读，更利于视觉信息的传达，在互联网时代后期在界面设计中字体样式还是会以无衬线体为主。
◆ 字体家族：根据系统区分Mac or Windows，如果用户使用的是Mac系统可以优先使用Mac默认字体渲染 ；如果使用的是Win，字体兼容性选择顺序（有购买版权字体的可优先考虑），例：
◆ 字号：为了提升用户的阅读体验，满足用户的可读性，更为舒适、清晰，也能保证界面的层次感（结合WCAG 2.0标准），将 PC/Web 端主字体从以前的12px改为 14px。
◆ 行高：为上下文之间提供了呼吸的空间，规范的行高，可以使得界面层次清晰、重点突出
◆ 字体颜色：WCAG 2.0 中将颜色对比等级分为 3 种，A级，AA级，AAA级，等级越高意味着颜色的对比度越高，呈现出来的视觉压力越大。字体颜色数量不建议太多，根据文字主次关系定义3-4个为宜（例：主文字、辅助性文字、提示文字、轻提示/禁用文字）
◆ 字重：字重不建议太多种，2-3种为宜（例：Regular、Medium、Light）
图形中有图片、图标、图表，都对整体风格有一定影响，设定统一的图形使用规范，可以使视觉效果更加和谐
交互，即交流互动，也就是说我们自己通过我们的五觉：视觉、听觉、触觉、嗅觉、味觉来感受其他事物并和他们之间产生信息沟通的过程。在互联网中交互对象个体主要是人和机器，所谓人机互动，相互配合，共同达成某种目的。
◆ 交互方式：保持产品的统一性，同类别的交互不可有不同的操作感受。要符合大众的认知习惯，可创新但不可违背潜意识，例：wab端页面鼠标交互操作一般有下拉、上滑、按压、悬停，移动端一般左右上下滑动、下拉、上拉、双指缩放...
◆ 交互状态：按钮状态变化，页面状态变化，组件状态变化...交互内容确实太大了，我个人也只接触到的也只是冰山一角，只能抛砖引玉，勾起大家思维，相互探讨学习
◆ 引导：引导一般常见5 种：新手引导）、步骤引导、帮助/操作引导、新功能引导、空白页引导
什么是组件？组件是抽象概念,对面向过程而言是对数据和方法的简单封装。对面向对象而言是一些符合某种规范的类组合在一起就构成了组件。它可以提供某些特定的功能。组件出现的原因软件工程中重复、反复出现、普遍的、有相似的问题的出现,导致开发过程中有大量的代码需要不断的重新设计,开发周期延长,开发复杂度增加。需要岀现一种模型通过剥离掉各个问题的特性,抽取各个问题之间的共性。从而在保证代码的灵活性下极大的增加代码的可重用性。组件的岀现就是为了解决这些实际问题的。
在前端眼里，组件通常是指页面上的视图单元，可以说，UI组件是组件的子集。组件库大致可以分为这几大类：
◆ 导航：固钉、面包屑、下拉菜单、下拉导航、电梯、菜单、分页器、步骤条
◆ 数据录入：自动完成、级联选择、多选框、日期选择框、表单、输入框、数字输入框、提及、步进器、评分、下拉选择、滑动条、穿梭框、文件上传
◆ 数据展示: 头像、标题、卡片、轮播、折叠面板、表格、拖拽排序、高亮关键词、时间轴、走马灯、空状态、徽标数、树、标签、标签页、图片、气泡...
◆ 反馈: 警告提示、抽屉、全局提示、对话框、通知提醒框、气泡确认框、进度条、结果、加载中..
◆ 其他: 锚点、回到顶部、图标...
设计规范是为了更高效的做设计，但不是一成不变的，它在落地使用的时或多或少都会有问题，需要我们慢慢的去反复检验它的合理性，发现不合理的及时更正，不断迭代，不断沉淀，不断优化，这样才能不断提高产品的用户体验。此次分享借鉴一些前辈的经验，主要是整理归纳学习，如有需要补充或纠正的，欢迎大家相互探讨！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：小鱼ID 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com