01087c607d78ae11013fb117e3df86.png

GOOG UI  网页交互手册

0192b3607d78af11013fb1170a4f59.png

01d8c3607d78af11013fb117c8a23d.png

016250607d78b011013e87f4fc9715.png

0199ea607d78af11013e87f4e7b3ed.png

015d7d607d78af11013e87f4de92ad.png

017f8a607d78af11013e87f4ec80be.png

0106c3607d78af11013e87f478dc1d.png

016d37607d78af11013fb11758c7b7.png

01dc4a607d78af11013fb117477b2e.png

013a30607d78af11013e87f4ff015d.png

01c4b5607d78b011013fb117e41c1b.png

01b76b607d78af11013e87f4e1fb1c.png

    21.用一些动效过度而不用立即显示变化&lt;br&gt;&lt;br&gt;    用户进行操作过程中，界面上的元素会经常出现，隐藏，打开，关闭，放大缩小移位等。给这些元素增加些自然的动画，淡入淡出效果不但美观，也更符合实际，本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长，那样会让想尽快完成操作的用户不耐烦。

015d7b5543c4900000019ae9f53c3f.jpg

转载【实用】UI交互手册

    5.主要功能需要多次强化显示&lt;br&gt;&lt;br&gt;    多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息，这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候，你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。

01217a5543c4910000019ae9781197.jpg

50.尽量的保证而不是假设一切都很好<br>当你完成了一次销售，减少一些的保证。再加上担保，告诉你的客户，他们就很满足了，告诉他们支付是安全的，这次运输是免费的，是的，他们可以随时拉出来，没有任何风险。一切都很好，一切都会好起来的。不要担心，要快乐。把一个正面的一个密切的，绝对是值得一试的转换策略。

01972f5543c4110000019ae9d08ca8.jpg

    35.让用户有一些紧急的意识，别让用户拖得太久&lt;br&gt;&lt;br&gt;    适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽，因为它暗示了资源的紧缺或者活动的时间有限，今天可以买，但明天可能就无法这么低价了。另一方面，这一战术也让用户感到会错失一次大好的机会，再一次，应用了人们害怕失去的本性。当然，这种战术会被一些人嗤之以鼻，认为是不耿直的做法。不过，这只是种战术而以，并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

0172d25543c4900000019ae9066e71.jpg

    32.将相关的条目分组，不要杂乱无章的排列&lt;br&gt;&lt;br&gt;    将各个功能项分组合并起来可以提高程序的可用性。有点常识的人都知道刀子和叉子，或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑，符合我们平时的认知。

01c18b5543c4900000019ae9199da8.jpg

方案以及原型阶段, 项目组开会后决定使用保守的第一种方案

01da855745531e32f875a429109e73.jpg

一枚产品的引导页

10.简洁明了，直接了 你可以通过不确定而颤抖的声音来表达传递自己的意思，当然也可以通过很自信的方式表达。如果你在界面中的表述用语多以问号结束，比如&quot;也许&quot;，&quot;可能&quot;，&quot;感兴趣？&quot; 或者&quot;想要试试么？&quot;，那么你完全还可以把语气变得更坚定一些。不过万事无绝对，或许适当放松措词让用户有自行思考的余地也是可以的。

01cc485543c4910000019ae9242989.jpg

    40.可以给用户提供一些快捷操作&lt;br&gt;&lt;br&gt;    当你的程序广为流传，应该考虑下高级用户的感受。人们总是试图为一些重复性的操作找到更快捷的方法，快捷键就应运而生了。相比在界面上点来点去，快捷键无疑大大提高工作效率。一个好的例子就是现今流行于各个主流程序中的J（后退）K（前进）快捷键组合，比如在Gmail，Twitter和Tumblr中。按钮固然好，但快捷键会锦上添花。

0177765543c48f0000019ae9d64eb4.jpg

    36.适当尝试饥饿营销&lt;br&gt;&lt;br&gt;    物以稀为贵。饥饿营销给出的信息就是东西不多，只剩几件，明天再来，可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看，那些批发商或者大零售商，他们也使用饥饿营销，以获得更好的销量。但在软件行业，我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的，不存在缺货的情况。其实，在界面设计中，也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票，想想你一个月可以服务的人数限制，这些信息都可以告知用户是有限的。

01c5875543c4900000019ae9663b5d.jpg

    7.布局有层次有重点，而非简单罗列&lt;br&gt;&lt;br&gt;    当展示许多项服务时，给出一个重磅的推荐项是个不错的做法，尽管推荐的设置无法满足所有用户。这么做是有理论依据的，一些研究已经揭示了这么一种现象：当面临的选择越多时，用户就越难做出决定。所以你可以高亮某个选项来帮助用户做出选择。

0110505543c4910000019ae9f8d95d.jpg

018wmpi8zmu3uptpyqhtmy3039.png

如何用AI生成设计稿？（上）

    29.尊重用户的使用习惯而不是创造新的规则&lt;br&gt;&lt;br&gt;    界面设计中遵从约定的准则跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定，用户用起来会很方便。相反，不一致和没有遵从约定的设计则会提高学习成本。有了界面设计中这些约定，我们想都不用想就知道界面右上角（大多数情况下）的叉叉是关闭程序用的，或者点击一个按钮后我们能够预测到将会发生什么。当然，约定是会过时的，随着时间的推移，同样的操作也有可能被赋予新的含义。但要记住，当你在界面中打破这些常规时一定要目的明确，并且出发点是好的。

0185485543c4900000019ae9092956.jpg

    12.直接标出产地，别总单纯的讲历史&lt;br&gt;&lt;br&gt;    指明你的地区，所提供的服务，产品来自哪里意义重大，同时也将与客户的沟通引入了一个更具体带有地域特色的场景中。指出具体来自哪里，国家，省分及城市，也是一种在进行自我介绍或产品展示时被常常提及的。当你在界面设计中实现这点时，让人觉得非常友好。同时指明区域也会隐形提高产品的声誉，好上加好。

0152c95543c4910000019ae9aaddd0.jpg

    23.试着减少线框，减少不必要的注意&lt;br&gt;&lt;br&gt;    过多边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的作用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时，我们经常在界面上方便地拖出很多区块来，这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐，这样做不会让那些多余的线条来扰乱视觉。

01ad1c5543c4900000019ae9dd7e24.jpg

移动端-组件与交互规范-持续更新ing