图标在设计中是一个最为基础的设计元素之一，对这部分知识花再多时间研究练习都是值得的，哪怕是工作多年的设计老手，也很难说自己把图标设计，做到出类拔萃了。所以不论是温故知新又或是学习精进，花上几分钟看看这篇超干的文章，定有收获。
本文会着重介绍图标基础规则，深入探讨图标的视觉重量和对齐问题。
一个界面中的图标通常可以近似地看成是一些基本形的组合：横向矩形、纵向矩形、倾斜矩形、圆形、三角形、正方形。模糊地看它们有相同的视觉重量，因为它们或多或少的变成了相同的斑点。
△ 图标的基本轮廓
根据图标的形状，将其嵌入到对应栅格中。例如，方形图标比三角形或细长的图标更紧凑些。
△ 图标在栅格中
△ 栅格中的基本图形
图标越紧凑，需要的空间就越少。图标锐利的边缘或小细节越多，它在画板上占据的空间就越大。
△ 图标示例，栅格中可以放不同异形的图标
△ 栅格中放更多细节的基本图形：方形，圆形，三角形
当心成为栅格的奴隶，栅格是用来辅助你而不是去限制你的。如果一个图标因为一些突出的元素而在视觉上有更好的效果，那就让它们突出。
为了使图标在非视网膜屏幕上清晰可见，请坚持使用像素网格并在线性图标上优先使用2px粗细的描边。2px居中对齐的描边通常会提供足够的粗细和清晰的轮廓
△ 2像素线型图标示例
△ 2像素线型图标示例
如果图标选择了1px的描边，则应该使用内描边或外描边而不是居中的。
△ 1像素外描边图标示例
△ 1像素外描边图标示例
1px的居中描边会使图标在放大到100%的情况下变的模糊，但如果放的更大会显的清晰。
△ 1像素居中描边线型图标示例
△ 1像素居中描边线型图标示例
根据像素网格去设置斜线的起点和终点。当斜线的角度为45°，30°和60°时会比不规则角度（像13.7°或81°）更清晰。如今仍有数百万人在使用低分辨率的屏幕设备，这就是为什么图标的清晰度仍然很重要的原因。
△ 矢量和位图图标示例
最好从复杂的图标开始去创建一个图标集。它将定义详细程度，并且对设计具有相同视觉重量的图标们有帮助。
△ 不同细节程度的图标示例
当图标的细节程度不一样时，细节越多的图标越能吸引用户的注意力，并且看起来视觉重量越大。
△ 细节不一致
在整个图标集中，图标内部相邻元素的间距不应太小或不一致。定义最小间距并在各处以同样的方式使用，以避免轮廓「粘连」。
△ 不一致的间隙
△ 间隙统一
对于线型图标，最好使最小间距和线条的粗细相等。线条要么清晰地分开，要么精确地连在一起，永远不要含糊不清。
△ 不一致的间隙
△ 间隙统一
在图标集中，可能会有些重复的细节。删掉它们，让用户的注意力集中在它们不同的地方，就像是数学里分数要约分（化简分数）一样。你看到的视觉干扰越少，你对它的理解就越清晰。
如果目标用户已经明白他或她使用的是什么，那就没必要一遍遍的重复。例如：避免使用基于信封的图标不会让人觉得这不是一个邮箱类app。（有点绕口，意思是：不用添加相关系列类的辅助图标也会让人知道这是一个邮箱类app）
这条规则也适用于图标周围的装饰（框架，背景）。如果这些对图标的识别性没帮助，则它们就会对图标识别产生阻碍。
不要将不同样式，不同角度地元素混合在同一个图标集中。一致的风格会对用户识别图标有所帮助并让用户明白这些图标有同等的重要性和状态。
△ 同一纬度的图标
△ 不同维度的图标
同样的原理也适用于线型图标和面型图标。如果你把它们混在一起，人们可能会认为它们有不同的重要性或状态。当然，除非你是故意的。例如，面型图标用于关键的指令，线型图标用于其他的指令。
△ 一组一致性图标
△ 一组不一致的图标
在界面中拥有两种不同的图标是很好的。线型图标用作不可点击或正常状态，面型图标用于点击状态。
8px网格和12列布局常用于许多界面，与基于十进制的尺寸相比更加灵活。12可以被2、3、4、6整除。因此24或48px的图标已成为了标准。如果需要更大的尺寸，可以对他们进行缩放。
完美主义不是我们的目标：没有人需要为了像素完美而去追求完美的线条。但是，这对于产品中最终呈现正确而不失真的图标是很重要的。记住图形中锚点数量达到最少并且相邻元素之间不要有间隙。
△ 矢量图标的调整与优化
还有那些烦人的「8.999px」或「100.001px」呢？如果锚点的位置很准确，图标的边缘看起来就会很清晰。此外，在合并形状时，也不会有出现多余锚点和间隙的风险。
△ 矢量图标的调整与优化
许多设计软件（例如sketch）生成的svg文件都带有不必要的文件——多余的编组，颜色图层和剪切蒙版。让我们看看，在sketch中，一切看起来似乎都不错。
△ sketch中的图标示例
在其它软件中打开这个SVG文件（例如Ai中），你会看到很多空图层，不必要的编组，有时还会有剪切蒙版。当前端开发人员将图标转换成图标字体或在网页上使用SVG文件的时候，这些都可能导致出现问题。
△ Ai中的图标示例
你可以删除这些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator编辑后生成的SVG文件（picture_new.svg）在文件查看器中预览的效果不一样。顺便说下，也可以在代码编辑器中删除这些垃圾图层。如果你知道SVG代码的样子，可以尝试下直接删除不必要的数据字符串。
当然，这些建议并不是不可打破的规则。如果你知道自己在做什么，请随时跳过它们。在我看来至少在两种情况下严肃的几何图标不是最好的选择。
空状态。如果你正在设计一个页面的空状态（缺省页）如「没有任务了」或「所有邮件已读」，那么最好是用情感化的图标来表现或者只用文字去说明。情感化图标会使用户感到快乐，而没有情感的几何图标不会增加任何交互价值。
吉祥物和插图。如果屏幕上你的界面中有吉祥物或者插图，这种图案应该是感性的。我不知道设计师是如何通过有限的形状选择和坚持使用网格去刻画一个角色的。
还有一件事。在一些特殊情况下最好问问自己是否真的需要图标。这是解决问题的最好方式吗？写点有意义的文字呢？要注意使用时的平衡，否则，可爱、时髦的图标将会让人感到沮丧，所有的努力都将是徒劳的。
文章来源：优设网 作者：彩云译设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为什么那么多人觉得应该先学UI设计再学交互设计，因为UI门槛低所以入手快。其实交互比UI更早出现，从需求理论可以看出人们在追逐主观体验的感受，在基础需求未被满足前是不会出现更高层次的需求的。所以UI设计让更多用户感受到了舒适和更好的体验。殊不知，如果底层的交互和产品的可用性未被满足，那么UI做的再好也是徒劳。
市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。
例如下面的案例，这是一个电瓶车电池租赁的一个产品。
从美观角度，左侧的界面更加简洁信息也有规律，有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时，大家在第一反应中，有多少人可以重启自己的视角，还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢？
如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。
交互不仅仅能够让产品好用的，也要让产品走对方向。
另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。
交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介， 有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。
所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。
从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。
平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。
在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。
同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。
另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。
web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。
到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。
中国历史文字的演变，它并不是一个模仿的过程，而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿，更多的是担心用户成本过高而妥协为满足用户预期。
事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语
例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？
当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。
同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。
我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。
在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。
再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”
所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。
我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。
所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。
那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。
语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。
这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。
还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。
那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。
市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。
所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？
从交互角度入手，那么既然我们无法做到大而全，那么我们至少可以做到精准、限时，让用户上瘾的策略，上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具，以及时间轴的商品推荐，让有限的资源呈现更多的形式变化以及让用户有时间概念，每天固定时间来进行活跃。
通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。
最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。
不管是做UI设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但其实都是有讲究的。本文不会给大家重复讲解什么是rgb，什么是hsb，什么是cmyk或者什么三原色，这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
我们在上一篇十万个为什么文章里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。
当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱
另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色
在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将“蓝色”作为品牌的主基调，“小蓝杯”这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，也让用户在看到蓝色时自然而然的想到瑞幸咖啡。
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！
在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。
在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式，多个请求，只能顺序执行，只能等待执行。有了ajax异步技术，可以无需等待上一个请求执行完成，就可以直接发起请求。服务端返回后，ajax通过回调技术通知客户端程序，把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新，提升网页的效率，用户无需等待页面的刷新，嗖的一下内容就变化了。改变原有整个页面刷新，造成页面晃眼的现象。所以这项技术一出现，就得到业界的推崇。
关键字：异步、回调、局部刷新。
主流方式：
技术栈
用户页面中触发ajax请求，访问后端服务器，Web 中间件 拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串（可以通过Jsonp格式实现跨域访问）。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
$.ajax({ //交互方式 $.get，$.post，$.getJSON
async: //请求同步异步，默认true异步
type: //请求类型：GET/POST
url: //请求的网站地址
data: //提交的数据，参数
contentType: //请求的MIME媒体类型：application/x-www-form-urlencoded（默认）、application/json;charset=UTF-8
dataType: //服务器返回MIME类型：xml/html/script/json/jsonp
success: function(data){ //请求成功，回调函数，data封装网站返回的数据
console.log( data );
},
error: function(e){ //请求失败回调函数，e封装错误信息
console.log(e.status); //状态码
console.log(e.responseText); //错误信息
}
})
json请求返回就是json格式，而jsonp请求返回是fun(json)格式。
查询网址：http://p.3.cn/prices/mgets?skuIds=J_1411013,J_1411014
[{"p":"-1.00","op":"3888.00","cbf":"0","id":"J_1411013","m":"6699.00"}, {"p":"-1.00","op":"799.00","cbf":"0","id":"J_1411014","m":"1398.00"}]
查询网址：https://d.3.cn/desc/1411000
通过JSONView插件展示数据：
网站有一个跨域问题，非同一个网站的请求默认是禁止的**（同源策略）**，那我们的页面要访问其他网站啊，例如：我们访问京东获取其商品的价格信息。这时就必须用jsonp方式进行跨域请求。
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象： { "id":100,"name":"tony","salary":30000 }
可以看出js对象中value值如果是整数，小数，无需加双引号
Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> //引入js支持,axios.min.js文件 <script src="../js/axios.min.js"></script> </head> <body> <div id="app"> 商品价格：{{info}} </div> </body> <script> new Vue({ el: "#app", data(){ //data的ES6函数写法 return { info : null } }, mounted(){ axios.get('../data/price.json') .then( //箭头函数，res为返回值，res.data 返回的json数据对象 res => ( this.info = res.data.price ) ) .catch(function (e){ console.log(e) }) } }) </script> </html>
注意：
axios请求头的 Content-Type 默认是 application/json，而postman默认的是 application/x-www-form-urlencoded。
ajax一般采用@RequestParam接收参数：
@ResponseBody public Result testpost(@RequestParam String username) {}
axiso采用@RequestBody的json方式接收参数
@ResponseBody public Result testget(@RequestBody Map map) {}
传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：
Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
防止CSRF：就是让你的每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
总得来说：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。
转自：csdn 论坛 作者：布诺i
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
--手机appUI设计--
更多精彩文章：
文章编辑:孔宇SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近发现一些能提高图标细节和高级感的小技巧，今天与大家分享下这几种风格的设计思路，以及需要注意的点。
分享大纲：
顾名思义图标之间有纵深前后关系，通过这样去处理，可以让图标层次丰富，增加设计细节，打破枯燥无味的单色扁平图标。
通常大部分人设计一个图标就直接将图形画出来后，这样就完事了，没有继续深入下去。这样图标看着枯燥乏味，普通了一些。
如上图，将图标在接口处进行细节弱透明度处理，那么效果就完全不一样了。
这里需要注意，一般都是在图标的接口处进行层叠处理，从A到B的一个线性渐变。
下面来看看案例：
△ Atlassian的品牌图标系统
使用建议：运用在面形图标效果会更好些，或者线条粗一些的图标，一般运用在TabBar上面居多。
这种比较好用，将图标进行抽象放大化处理，变成一种图形方式。一般运用在卡片设计上面居多。
左侧卡片上面，图标直接使用描边效果。卡片里面虽然加了一些底纹图形，但是整体效果略显平庸了一些 。
重新将图标进行图形化处理，既能够表达当前含义，同时设计上细节和品质感有所提升。
其他思路延展示例：
当然还有一种类似的思路，可以将图标进行放大化，并进行色彩分割处理为背景，前景放图标和文案等。
如图，我将前面两个思路综合运用，图形化背景和层叠图标。这里的图形希望大家不要乱用，尽量使用图标的图形来演变。
图标通过弱渐变透明处理，其思路有点类似第一个。但是这个方法图标整体带透明度的范围更大。
先来直接看个案例：
这种图标给人比较新颖的时尚感，层次也丰富。
如何处理这种图标？
非常重要的一点，需要注意不识别度问题。如左侧图，图标和背景之间几乎融为一体，看不清主体元素。右侧处理刚好，能够识别出图标含义。
处理时候一定要注意透明度的关系，当然也与卡片背景色有关系。
关于图标设计三个小技巧，可多看几遍，思路比较简单直接。当然最重要的是灵活运用，也可以将三个思路都融合起来去设计图标。
本文只是抛砖引玉，这些图标处理的技法，并不是能适用所有场景。大家还是需要根据自己产品特征，找到合适的突破点去设计。
文章来源：优设网 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
成本思维是什么？
今天跟大家聊聊一种思维，不是产品思维也不是交互思维而是：成本思维
为什么设计师要有成本思维，以及成本思维在做我们做设计时对我们有什么帮助。
不仅仅在工作中我们需要思考成本，在生活中我们也无时无刻都在计算成本。成本总是和收益挂钩，所以贝克尔在《人类行为的经济学分析》中提到：人的任何行为都是理性选择的结果，无利可图的事人们事不会去做。虽然这句话不能覆盖所有的人，但是大多数人就是如此。
在夜深人静的夜晚你饥肠辘辘想吃夜宵，你可以选择下楼到周边小吃店就餐，也可以选择叫外卖，前者付出的成本是你需要通过身体行动来交换最后的结果，后者则是花费一定的金钱来代替前者的行动。
那么我们通常会如何选择呢？如果这两种成本有很大的差异，比如需要到很遥远的地方那么除了身体行动成本外，时间成本也会计算其中，所以相比后者成本陡然增大，于是我们就会选择成本低收益大的方式。但是假如你现在极度想要吃那家的夜宵，外卖点餐会特别影响口感，那么你可能会选择前者，这里由于外卖口感和主观意愿影响到了我们理性的选择。
成本决定了收益的效率、大小和方式，小到你伸手拿一支笔你会选择最近的，大到我们人生的投资。成本与收益之间并非是直接关系，收益的大小的不取决于成本的大小，还有风险因素。例如我们在对 UI 界面进行优化，可以选择的方式有很多：
我们的目标是让用户获得更好的体验并且提升业务价值。3 种方式需要的成本高低不同，我们都希望付出最小的成本达到最好的效果，于是我们就会考虑到风险因素，假如新流程用户不会用怎么办，假如新版本导致的数据下滑怎么办，假如行业出了新政策了怎么办等等。所以除了这些成本外也要考虑应对风险的成本。
你看为什么有钱人都会坐头等舱是因为头等舱可以帮他们节约更多的时间，提供更好的环境与服务，让他们产出更多的价值。还有假如你的车坏了，你最直接的方法就是花钱找人帮你修而不是自学自修，因为你将花费太高的成本。
再举一个例子，我们想提升能力，有的人选择自学、白嫖，有的人选择报培训班，这也只是时间和金钱上的成本选择，如果你的自学（白嫖）在短时间收益很大那就毫无疑问帮你省了一大笔钱，但是如果自学很久都毫无效果，那么时间就是你花费的成本，时间和金钱不同的是，时间不可逆。看起来花钱比花时间更好？不是，花钱也有风险，比如课程质量和服务很差，钱没了还学不到，甚至赔上了时间。但如果你选对了，那么收益就远远会大于自学。
1. 实现成本
实现成本指的是想法与落地中间需要付出的行为、时间和其他损耗，例如我们希望提升用户下单的转化率，我们可以选择：
在这几个方案中最低成本是 「按钮设计更明显」，因为只需要调整样式和简单开发就可以实现，但收益并不是最高的，而其他的方案需要更多的角色花费更多的时间来参与，但是收益也不是显而易见的。所以如果你的产品比较成熟，那么我们一定选择成本更低的方案，反之我们会进行更高成本的尝试。
还有比如我们找工作，新公司福利待遇比现在公司好 50%，平台也更大，是否不需要思考直接去呢？当然不是，你需要考虑通勤成本、生活成本、自身成长成本等等因素。如果你 50%薪资涨幅换来的是 996、每天通勤时间 3、4 个小时，不仅仅是时间精力，还有我们的身体健康的成本，我会觉得远远不值，成本太高。
2. 机会成本
我们先来看一下定义：机会成本是指面临多方案抉择时，被舍弃的选项中价值最高的就是本次决策的机会成本。举个例子，比如当前版本我们有 1 个开发一个设计一个产品，我们面临着两个需求，但是资源和时间只够我们做一个需求，这时候 2 选 1，那个被抛弃的需求所拥有的价值就是我们所选择的那个需求的机会成本，相当于我们放弃了那个需求所拥有的价值。
再通俗一点讲，我现在有 100 万，面临着两个选择：1.银行理财，年收益 4%，40000. 2.做生意投资，年收益 8%，80000，那么就相当于我花费了这 4w 的潜在成本获得了 8 万的收益。
3. 边际成本
边际成本的理解很简单，我们可以理解为我们每付出一定的成本收货的收益或者每收获 1 个单位的收益所付出的成本。用一个通俗一点的例子来讲，比如你一共学习 10 天，第一天学完你考了 30 分，第二天学完你考了 50 分……第8天学完你考了94分，第9天学完你考了98分第10天学完你考了100分，花费的单位天数一样但是每次增加的分数却越来越少，收益也就越来越少。
在做产品设计的时候，我们往往会有一个板块叫为你推荐，比如微信阅读中的这个板块，它一次提供了用户 6 本书，虽然算法可以算出有许多书，但是这里每次只提供给用户 6 本，是因为涉及到了边际成本，少量多次提供能够让用户更聚焦，更快的选择好书本进行阅读，每多提供几本书，用户选择阅读的时间成本就会越大。有同学会问：那我只给 1 本不就好了，用户就能马上读了，何必要推荐 6 本？
我们如何保证那一本刚好是用户想读的，没有办法做到如此精准，如果每次只推荐一本书，而用户尝试了几次都不喜欢，他们就会放弃，所以这里就会选择一个临界值，比如我们可以选择每次放不同数量的书，根据数据判断在给用户几本书的时候用户阅读转化和选择时间成本更低。
4. 体验成本
体验成本也是我们设计师需要时刻关注的，俞军老师在产品方法论中提到，用户价值=新体验-旧体验-替换成本，体验成本可以包含很多信息，最主要的就是认知与交互的成本。
认知成本
如何降低认知成本可以从以下这些点进行优化
1.文案
文案的设计要求是简单易懂，避免产生歧义，之前给大家举过的一个高德地图导航在到达目的地之后给出一个“原路返回”按钮的分析，大家可以再思考一下，是否会产生歧义。还有确定、确认大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、带负面情绪的问题等等。
2.样式
视觉最为直观，一个按钮一个控件的样式是否能满足用户的心智和预期，将会影响用户的认知，例如以下的几个按钮，出现在不同场景用户会出现一系列问题：为什么我点了没用？为什么还不能点？我到底该点哪里？
还有你的品牌是否识别度高，也决定了用户对你的认知，最近小米花了百万请大师做了新的 logo，在视觉上更加圆润，在圆 logo 的基础上做了很多的微调，实际上也是避免了太大的 logo 变化导致品牌认知成本的提高，认知成本一旦太高，品牌市场的敏感度和曝光度还有各种替换、衍生、配套的隐性成本也会大大增加。所以这一举动是明智的。
3.信息
比如我们希望新用户去关注一些大咖、kol 获得更好的推荐，但是如果我们只是将推荐者的头像和昵称给新用户，那么这个策略就是失败的。因为我们没有考虑新用户的认知：1. 我为什么要关注她 2. 关注她我能获得什么。所以仅仅依靠头像和名字在这里对用户的认知是没有任何帮助的。
行为成本
我们通过利用肢体来和媒介进行交互，目的是完成某项任务。其实只需要你抬手，那么就是产生了成本，只不过某些成本是固定的无法减少的，比如你要去骑车那就需要去解锁，如果没有锁车可能就会被偷走，这是出于安全考虑。
行为成本在具体数字产品中我们可以发现很多，例如你只需要将手机拿起，屏幕就会亮，相比于找到解锁键再按一下成本就低了很多。而亮屏后不直接解锁是为了防止误触或者隐私，所以还需要通过指纹或者人脸进行识别。
例如几种不同的验证方式，利用滑动拼图来解锁和输入相关验证码解锁，前者比后者的学习成本和操作成本都低。
在移动端我总结了几个减少交互成本的方法，不妨来看下：
soul 音频处理；日期选择；iPhone 底部横条切换窗口
游戏昵称随机；股票买入数量
这里也有同学会问，既然都可以代替，那滑动能否代替输入？必须也是可以的，例如 iOS 自带的计时器中选择时间的控制器，还有闹钟设置，这里要注意的是，滑动代替输入是要基于本身该信息是由范围内并且不需要精细化控制的，比如房价筛选，房价本身量级很大，用户筛选也不会精确到个位数，在这里用点击和输入会比滑动的成本更低。
反例就是音量、明暗控制，大家可以感受一下输入在这里的鸡肋。你需要精确控制选输入，需要大致的范围选点击，非常模糊的感受选择滑动。
例如我们在开车进行导航的时候，打字输入非常不便，于是加入了语音输入。还有在微信进行账号切换时，我们可以选择利用语音输入数字来验证身份。
对于新用户操作复杂功能和界面的时候，提供更多提示能够很大程度上减少用户的操作成本。
在 iOS 或者安卓的手势控制中，我们会发现又一些常用的手势比如：点击、拖动、轻扫、双击、缩放，这里我们可以定义为一级手势。还有一些不常用的比如：重按、长按、三指滑动、三指缩放等，这些手势的认知成本和行为成本都很高，定义为二级手势，不建议频繁使用。
设计师在日常工作中接到的需求繁多，无论是在做需求之前还是在思考设计方案的时候，成本思维可以帮助我们很好的规避一些问题和风险，我们追求控制成本使收益最大化。所以学会控制成本的设计师不仅仅题可以提高个人工作效率还可以帮助公司创造更多价值。
文章来源：优设 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：随着公司和业务的不断发展，原先的系统不一定适用于现在的场景，因此需要进行升级改造。作为设计师，我们是如何系统性地去为业务带来更多的体系化的价值？本文作者将从五个方面进行分析，与你分享。
项目背景：
当公司的发展规模到一定程度时，考虑到信息安全、持续采购成本与相关风险，企业会采取自研的方式来实现部分协同工作软件的自产与自用，本文将以内部目标管理系统为例，阐述我们是如何系统化的做企业系统设计改版？
什么是OKR？
OKR，是Objectives 和Key Results 的缩写，即目标和关键结果，它是企业进行目标制定和过程管理的重要手段。采取OKR的管理方法，将公司目标层层分解到团队，部门再到个人，在各个层面贯穿和统一起来，以帮助实现目标达成。
改版的契机是什么？
改版不是设计说想改就能改，在做新的OKR系统之前，之前是通过「绩效系统」来进行目标管理和绩效评估，支持简单的制定和结果的评估的使用，因系统操作流程、界面体验、业务场景已经严重的影响到目标管理的效率和效果，具体体现在几个方面：
总之，工具的体验已经是严重影响公司员工目标管理的一道障碍，所以如何将整体的系统操作体验提升起来是设计急需去解决的问题。
那么，确定有问题需要改，作为设计师，我们是如何去系统性的去为业务带来更多的体系化的价值？
理清业务目标，制定设计策略，是系统性改版产品的前提，在实际工作中设计师很容易被产品的原型、对产品的描述蒙蔽，只有非常清楚的理清业务的目标，才能制定系统性、合理的设计策略来支撑业务，通过专业的设计方法来助力业务结果的达成，在这个项目中我们是如何做的呢？
对焦业务目标：
OKR系统的改版项目最开始是高层的诉求，提的业务要求很简单“让大家用起来，目标管理起来”，那么如何让大家用起来、利用系统将目标管理起来是当前需要解决的的问题。
“让大家用起来，目标管理起来”需要去解析的是，为什么旧的系统大家用不起来？为什么目标管理有这个管理机制，但是没有依赖于系统管理起来？
制定系统的设计支持策略：
设计师同行可能会问：不都是做需求吗，有啥做啥，有啥策略可言？如果是以这样的方式来做设计改版，很有可能会被业务方牵着跑，即便是知道对方坚持的不是很合理，但也没有办法来推动这件事往更好的方向发展。
理解用户，溯源本质问题，是最设计环节必不可少的环节，通过对用户的深入研究，挖掘本质的共性的问题。在这个项目中，我们通过定量+定性的手段获取用户的心声：
定量问卷——获取用户的基础的问题：
前期在公司内部针对普通员工、MGR、HRBP、高层4种角色，调研了100多位内部用户的心声，将不同岗位和职级对于绩效系统的问题真实反馈收集汇总。
定性访谈——深入获取用户的诉求：
因为系统面向对象是企业内部员工，所以针对每个角色都做了访谈调研，深入的挖掘他们对当前的产品使用问题，并将问题按照核心流程中所涉及的角色在不同阶段所需的操作和流程进行了梳理，整个阶段拆解为：制定阶段、执行阶段、结束回顾三个主要阶段，拆解每个角色在这些阶段中的触点和机会点。
结合问卷、专访谈的分析和梳理，筛选出目前系统的核心问题：制定流程、对齐关系、过程跟踪、信息触达。
在前面已经初步发现和定义了问题，这么多分散的问题如果平铺出来可能会吓到产品和研发，所以接下来需要将其系统化的变为整体的设计方案，我们需要将其串联成完整的场景，然后逐步击破，我们是如何做的呢？
重点模块及争议点的讨论：
在场景分析前期，我们设计内部针对“核心阶段”、”对齐关系“、”权限管理“、”全员OKR“进行了讨论和范畴的界定，对以下问题进行了讨论：
梳理清楚角色关系图，有助于多方去理解各个维度的关系：
结合业务需求，赋予体验价值：
OKR系统虽然最为一个内部管理系统，我们也逐步在设计侧去从“具有功能价值”往”“赋予体验价值”去发力，将更多的“能”和“可以”转变为“方便”、“简单”和“轻量化”等，来提升各个流程阶段中的体验，比如：
具体到串联场景怎么去理解？
一个新的OKR周期会经历三个主要阶段，每个阶段会涉及到多个节点，在每个一个节点上去思考发力方向：
为了便于理解，将关键的场景提供了比较简短的描述，这个描述就是从旧到新的过程，后面的设计展示也是围绕着这些内容进行展开，具体如下：
1）制定阶段，包含写、看、评、管
写：轻松撰写，高效共创
看：简单查看，便于跟进
评：轻量互动，便于记录
管：高效审核，随时跟进；条条对齐，事事关联；
2）执行阶段，包含更、改、推
更：随时更新，条条追溯
改：慎重修改，条条有据
推：合理推送，终端打通
3）结束回顾，包含查看、追溯、复盘
查看：快捷查看历史周期
追溯：记录明显标记，事事追踪溯源
复盘：复盘总结，目标达成
经过前面一系列的调研、分析总结，设计围绕着3个阶段的关键结论进行展开，即OKR制定、执行、结束三个阶段。
（因每个阶段篇幅较长，方案设计部分仅展示部分页面的思考过程和页面展示）
在写OKR时，设计让撰写轻松、可以高效的共创，主要通过以下3点：
1）清晰的页面结构
让用户能明确的感知到系统的整体结构是有规律的，可以简单被理解的，即左边全局控制，右边内容展示左边导航全局控制着写、审、查、通4个功能
右边内容展示跟随着导航内容变化
2）O与KR的录入快速切换
为了让用户可以沉浸在一个页面写内容同时，还能纵览全局结构，在写OKR的页面增加了OKR大纲的锚点切换功能，便于多个KR之间的切换，避免因页面过长带来的翻阅困难的问题。
3）减少步骤，减少跳转
减少步骤，减少跳转有很多场景都有涉及到，比如：
查看和跟进属于第三方的协同伙伴，为了让伙伴更轻松的跟进，做了2个设计处理：
在管理者审核下属员工时，简化了大量信息，前置待处理信息以及待处理的关键信息，让管理者比较直观的知道有哪些人提交了，哪些人修改了，哪些人需要重写等等。
为了让员工便捷的进度管理，在OKR管理页面以轻量的临时弹窗，来方便用户快速发起和输入内容，每条更新记录同时也能同步给关联方。
慎重修改、条条有据主要是满足管理者和关联管理诉求，OKR可以在中途被修改，但是修改的结果是需要明确告知相关人，在增加、删除、减少的内容上，以特殊的示意对比来记录依据，同时也督促发起方能审慎修改。
OKR的消息推送在整个阶段中占据了非常重要的信息触达的作用，在整个OKR的制定阶段和执行阶段不可或缺的部分，而消息推送过多将会导致信息冗余，那么如何合理进行推送消息也是重要一环。
我们把消息类型通过两个维度定义消息的优先级：“重要性”和“紧急度”，通过四象限法则，我们拆出来了：
通过此模型和产品确定了每一个消息类型的所在位置，且清晰表达的了每个消息应当的位置。
每个渠道都有相应的特点，我们结合渠道的特点去确定不同优先级的消息应当推送的渠道。
最终在实现方案上，实现了有层次、分场景的消息推送方案，尽量做到少打扰用户同时，可以及时了解重要信息。
桌面端是主力生产平台，通常是多窗口多任务，键鼠操作精确高效。在专注姿态下，我们可以尽量安静地展示更多常用功能，让用户在一个视图中即可完成相对复杂的任务。同时在列表页中，更大的空间让我们可以把目录树展开，减少导航跳转。
手机端的特点是专注当前任务。可以通过信息降噪，加强对比来让信息传达能明确，帮助用户完成单个任务；而清晰的导航可以避免小屏幕上页面频繁切换所带来的导航负担。
1）最终实现方案
结合终端的差异，把移动端定位为：侧重便捷快速的查看和沟通，同时将重编辑的场景在移动端去除了，更加侧重于查看、互动和进展更新的低成本操作的场景。
2）中途验证效果，确保上线的效果
在设计的过程中，为了进一步的验证设计合理性和易用性，针对角色代表进行了8组可用性测试，最终普遍反馈新版的操作体验更好。
针对了项目的设计效果落地，设计除了在过程中不断的跟进产品和研发提出的问题，在测试阶段提出效果走查文档，不断的打磨细节，才能保证最终的设计效果，当然付出总会有回报，新版的系统上线除了制定、管理、查看关键模块的UV和PV的业务数据达到了比较好的效果外，在新老版本的满意度和流程操作犯错率上也得到了一个比较好的验证。
在OKR系统项目的整体流程中，针对产品大改版的时候，我们设计需要前置思考业务，全局看待产品，系统性的去思考和设计，助力业务结果达成的同时让设计价值更好的体现出来，最后再回顾下整体流程：
文章来源：人人都是产品经理 作者：酷家乐用户体验设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在工作中常常被问到如何表达讲述自己的设计，为了让自己的设计有理可依，对接上下游汇报工作的时候，总结以下一些方法和观点，帮助不知从何讲述自己设计的人一些语言技巧。
以下仅是个人观点，用作探讨交流，文中所有举例均为本人工作设计输出。
设计师能做出好的设计，却缺乏系统化的语言包装，“如何讲设计”不该让它成为难题，做一个有产品思维的设计师，让你的设计以理服人，我们要不止停留在视觉表层，更要从多纬度看待产品设计，本文将从以下三点简述：01.产品设计的五个层面，02.讲述设计的流程，03.关于本次总结
做好产品设计的第一步，是了解产品， 要对于产品的需求如何确定、产品定位如何决定有一个基本的认识，在产品常识里面最重要也最常用的就是产品设计的五个层面，也简称用户体验五要素——
作为UI设计师，所处的视觉设计是表现层，是确定产品的最终形态，因此也处于产品设计的顶层（能被看到），是一个具象画的呈现；其次，往里推框架层，是确定产品外观，将界面信息和导航设计有序归类，让用户使用或者理解；结构层是为用户设计一个结构化的体验，将零散的元素转化为有序立体的空间；范围层确定产品的功能和需求；最后战略层是确定产品目标和用户需求；底层逻辑结构决定上层意识形态表现，因此在设计前我们要知道产品是属于洞察阶段，设计中是属于产品设计解决方案阶段，整体的产品设计是一个概念通过无数个层面的努力，经过时间，转化为具象表现的过程，所以我们在完成一项设计时，应该讲述一个完整的设计思路 ，不要让自己的设计思路仅停留在表面。
整个产品的设计产出是一个抽象到具象化的过程，设计的前期属于产品洞察阶段，这个时候一般由团队的老板领导结合当下市场需要，有用户的需求就有商机，想出产品大致的方向（战略层）然后通过产品经理整合梳理高层的意见确定产品大致的功能和内容输出原型（范围层），交给交互设计师优化产品细节逻辑和信息具体框架，经过研发评估能够技术实现产出交互稿（结构、框架层），这里已经过渡到设计解决问题执行阶段，最后是给到界面设计师美化视觉产出高保真（表现层）。
也就是到我们自己设计输出之前要经历这么多，如果能在讲述自己设计的时候，提前去了解这些，那么设计内容就不愁没法儿讲，光是阐述自己的设计思路就可以讲出一个故事，这也是为什么现在很多品牌卖货都开始营销产品背后的故事由来。我们设计能做好，也要会用语言推销自己的设计成果。
设计是对于某件事精心准备的过程。好的设计作品，应该拥有完整的设计流程，因此我们在讲述自己设计作品的时候，有一套完整系统化的方式是非常有效的。完整的设计流程包含以下4个步骤：
第一是我们需要去了解设计的需求背景，知道大概的方向——
来源（简单理解就是谁提出的问题）需求有可能是你的老板、你的产品经理、或者交互设计、或者视觉上的问题···
背景（笼统一点，就是这个需求是新需求还是原来有然后进行改版优化）需求的基层性质是什么，原本调性是什么，我们要做什么样的产品···
目标（目标一般都是需要解决什么问题）搞清楚为什么做这个需求，能解决什么痛点，不做无用功。
谁提出的问题，是新的需求还是旧的问题，或者我们要解决什么？围绕这几个方向将你的设计概述出来，会让非专业的人也能听懂你做了什么，举个简单的例子，我们公司后台一个很小的产品bug需求，往往这种需求就是产品经理的一个截图和他标注的两句话——
然后你完成了这个需求单，在传达给非产品经理以外的人的时候，你有可能是以下转述方式——
毫无疑问，你就是将需求者的意思一字不落的转达了，但是对于其他的听者来说，你的转述平平无奇、毫无意义，甚至都没有印象你做了什么，所以你应该讲清楚这个需求的背景——
设计需求来源是谁，原本属于产品哪个模块（来源），他原来功能是怎么样的，界面上展示的结构哪里有问题（背景），视觉用了什么样的方式改成什么样，解决了什么痛点（目标）
讲清楚谁给的需求，需要解决什么问题，是在原来的基础上不变动逻辑的情况下增加了什么达到了什么目的，才让你的叙述更完整，听起来更有逻辑。如果是一项新的需求，没有背景，那还得从设计分析说起，设计分析就是让你更专业的去做事，设计分析分为——用户分析，设计目标，和设计手段三个要点：
首先用户分析就是，分析你做的东西给谁看，而用户又分为群体用户和独立用户，在c端常见的就是独立用户，他们通常不定性，且有很多特征；在b端，目标用户一般是群体，他们大多数是有场景特性和行业特性，针对独立用户和群体用户，我们得出的用户特征、基本信息、需求结论也是不一致的，所以我们应该结合产品的调性分析一下我们做出来的设计究竟给谁看给谁用。常见的用户分析方法有：用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈以及大数据分析，这些方法中最简单的是用户画像，就是举实际的例子列出真实用户的特征信息及使用场景。B端用户分析方法常用大数据分析和用户反馈，这两种方式通过对接需求的上下游就可以得知。
通过用户分析得出需求结论，满足需求就能达成设计目标——
设计目标结合卡诺模型来分析，卡诺模型—反应产品性能和解决用户需求的满意度的一种非线性关系，具体想了解的可以自行百度，站在巨人的肩膀上我们看得更远。 卡诺模型具备4种属性 ：1.必备属性：满足这个需求，用户满意度不会上升，但不满足这个需求，用户不满意会大幅度降低 ；2.期望属性：提供个性化需求，用户满意度会上升，不提供此需求，用户满意度会降低； 3.魅力属性：用户意想不到的效果，提供此属性，用户满意度大幅提升，不提供也不会降低 ；4.无差异：无论提不提供，用户满意度都不会改变，根本不在意；因此在做需求的时候我们应该尽力满足基本需求和期望需求，而可有可无的需求尽量不去做，降低效率。幸福需求是不容易达到的，如果能满足是非常棒的～这里就像是满足了设计心理学的三个层次——本能、行为、反思。
接下来是大家都熟知的设计手段，适当的讲一些述专业的设计技法，用不同的手段去实现的主画面，最后达到完成设计目标这样的结果，会让你显得更专业。设计的手段有很多种，这里主要讲述常用的三种，构图排版（采用什么构图方式，为什么这样构图是因为什么设计原则）、色彩运用（为什么使用这个颜色，因为这个颜色给人的心里感知是什么样的）、设计风格（采用什么风格最贴近产品调性，为什么用这个风格），但是讲设计时一定要记住产品的调性，不能偏离产品本身，不要盲目套用绚丽的技法，否则是不合适的。
很多时候面对非专业需求方收稿时，可能看到如下话语————
（心里是不是xxxx····“万马奔腾”，用个文明点的词）
非专业人士无法理解这二者的区别，他们认为他们的设计手段能达成设计目标，而作为专业设计师的我们就应该引导对方说出设计目标，再用我们专业的手段去满足对方的目标，去实现减少改稿次数，而不是让非专业人士去指导专业人士修改设计手段。分清这两者的区别，我们就可以在设计引导中更加主动。用设计分析的方法来讲述设计，举个例子——
会议管理——会议预约移动端优化，因为这是我们原有产品EKP里面的模块，PC端和移动端都有，因此用户可能是群体也可能是个人。所以针对独立用户和群体用户都做一个用户画像，得出他们的一些需求结论，然后目前幸福需求是没有的，纯属个人建议，日后如果有此功能，想必用户的满意程度也会大大提升。
概括一下已完成的整体主要页面，分析设计目标：
头部属于流量量较高的区域，采用卡片式设计，将会议内容置于此处，作为页面信息关键层，采用左对齐方式排版，突出会议标题和时间提醒用户。
通过不同的颜色标签，区分参会人员状态——
待进行未有操作反馈，选用橙色，属于可以持续进行并有明显提醒作用
已做反馈属于成功操作，选用已有用户认知心理的绿色
已知信息拒绝参与，是不太重要的，属于不再进行的阶段，选用灰色
接下来是设计作品的产出过程，一般情况下不可见的过程，为什么要去讲， 因为一个东西从无到有是很不容易的一件事，如果能讲述过程，就可以引燃情绪共鸣，让别人记住，让自己的设计作品也能有始有终——
设计过程一般分为四个阶段：初期阶段、中期阶段、最终定稿；具体的关键词和描述可以通过以下方式提炼出来，这里就不做详细说明了。
拿运营宣传来举个例子，我们公司中秋节月饼礼盒包装主视觉设计——
整个过程应该是有一个系统化的说明的，省略为写字的地方是我们可以插入的具体图片和过程，步骤差不多就是上述这些，可以有最初阶段的头脑风暴-提取关键词-清晰定位到中期阶段的团队合作—风格拟定-精选方案-细节刻画以及和物料方沟通对接的打样确定工艺等等过程…再到最后定稿的体验还原-问题优化…主画面的诞生是不容易的，强化这种过程参与，让不被看见的事也能展现。如果实在不好记录，你可以从一开始就截图你绘制的过程——
上图是用PS截图，再用时间轴将每一帧动态循坏播放，导出GIF然后截一张不变的底图合成就可以了。
最后是数据验证阶段，这个是设计落地的直观证实，包含主观认可和客观数据，具体内容就是通过用户或者专业的人士反馈给你设计落地的好坏，来判定你做的是否优秀成功。通常这一块的数据决定你验证你前面所有的过程，只要按照该流程认真做了，最后效果通常不会太差，如果出现很大的偏差也往往是意料之外的，因该寻求团队一起解决，不是某一个人的问题。
根据以上最后我们总结，好的设计就是满足以下4个方面：好看，好用，好记，能实现。设计师要考虑的维度不仅仅在视觉层面，什么是有产品思维的设计师，就是在执行时候要考虑上下游不同职能的工作内容，如果你的设计不能实现，再好看也是白费功夫的～从产品交互视觉多层面谈设计，会让你的设计包装显得不那么单调，系统化的方法总结到此，不足之处多多包含～谢谢你的阅读！
文章来源：站酷 作者：YiVi_eleven
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com