浏览了许多关于“设计规范”的文章，发现很多都是在针对通用流程和视觉方面在整理，关于交互层面的内容比较少。基于此，结合最近项目中沉淀的实际案例，以及参考了不少行业通用的设计规范，总结了一篇关于搭建交互规范的流程、框架、要点。希望能够帮助大家更好的沉淀交互规范。
本文介绍了几个关于用户体验度量的模型，UES模型、适合网站的 PLUSE、谷歌的 HEART、蚂蚁的 PTECH和GSM模型，它们各有切入点，也各有其适应场景。对各个模型的概念和它们相应的维度做了详细的介绍。
失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。
听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。
定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购物。
看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐，Netflix 则会推荐相关的作品、有待观看的下一部，并且基于用户 Twitter 上的内容来进行推荐。
每一个微小的自定义设计，都能让用户感觉这些用户体验设计是为他们而做的。同时，这种设计也会给用户一种参与感和沟通的体验，从而加深用户的忠诚度。如此一来，用户会更好地融入整个网站的用户群或者社区。
另外一个大热的流行趋势，就是动效设计。它不仅能为用户带来惊喜，而且具备强大的引导性。
动效设计的精髓在于简单。令人头晕或者不知所措的动效，应该不是你要的东西吧？动效应该是有目的性的，和其他所有的设计元素一样，有针对性，达成目标是它存在的意义。
对动效或者说动画最熟悉的，无疑是迪士尼。Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造今天动画的12个原则：
·挤压和拉伸
·预期
·登台
·连续动作和姿态对应
·缓进缓出
·弧形运动
·次要动作
·时序
·夸张
·立体刻画
·吸引力
对于常见的问题，设计模式就是可靠且可复用的解决方案。简而言之，最常见的信息和交互方式被整合到一个界面当中，比如点击按钮，滚动页面，滑动解锁，它们都是设计师模式。
你需要熟悉这些常见的设计模式，并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求，也是易用性的最基本构成。
同时你也要在自己的设计中创造设计模式，在不同的页面中使用相同、相似或者规则化的设计，让用户习惯。比如，不同页面中的CTA按钮的色彩保持一致，卡片式的元素使用相同的样式，等等等等。
没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格，拥有独特的气息。
要做到这一点，通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（请注意他们的文本和图片是如何无缝地连接到一起的）
用户同网站交互都是在屏幕内进行的，无论是桌面端还是移动端，整个体验都是围绕着屏幕进行的。
这并不是一句废话。屏幕是一个区域，它界定范畴，赋予概念，创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中，让用户随之同下一个元素进行互动。
如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息，需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上，可能需要划分到几个页面当中去。
从屏幕的角度来考虑问题，可能会让你的计划更加庞大复杂，但是这种考量是有价值的，这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。
视频、游戏、测试都争取让用户能与之进行互动，这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多，用户所获得的体验就越好。
不过，有趣的元素能让这一切截然不同。
让交互内容尽量简单，不要牵扯太多，让用户可以一目了然，让他们轻松获得反馈的信息，不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。
最后一个秘诀并非不重要，它甚至可以说是最基础的原则：让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素，能让页面能从一个设备兼容到另一个设备。
简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作，赋予更好的体验。
苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿，它设计简单干净，容易互动，视觉元素周围有足够的空间，无需担心误触。同时，其他游戏所具备的东西它也有——有趣好玩，可以共享得分，能分享到社交媒体。
界定一个网站的体验与否有的时候并不是单一的标准，而今天所推荐的7条秘诀本身也更接近于基本的Guideline，了解用户，熟悉趋势才能提供优秀的体验。
文章来源：优设 作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，为什么要动？可能你会想到以下几条理由：
呵呵，你要这么想就完了。
那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准：
1. 这个动效是否会影响性能？
首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。
例子：化身间谍
比如这个例子，这是一个穿越情景的过场动画，随着年份的倒转背景出现各个历史大事件，给人以历历在目的感觉，设计师考虑到了多张图片会出现卡顿的可能性，所以特意降低了每张图的清晰度，因为内容本身就是老照片的风格，所以这种降低画质的手法反而增强了画面的真实感。
2. 这个动效是否会提高产品的可用性？
任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。
例子：翻页提示
比如这个上滑提示。不用解释，用户一看知道该做什么。动效增加了产品的可用性，所以这样的动效是非常有意义的！
3. 这个动效是否会给你的产品带来独特气质？
这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能，注意，一定是与主题相关的，牵强的搭配只会叫人觉得莫名其妙，毫无意义。
例子：人生四时
再看这个例子，人生四时，四根火柴依次燃烧，慢慢燃尽，这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。
4. 重新审视第一条，看你的动效是否影响性能
所以，合理的动效不应是花拳绣腿，而应该是解决问题的手段。
好，我们再看看哪里需要动效，这里举几个例子：
1. 加载
首先是出现在加载环境，不管是网页还是H5都不可避免的会出现让用户等待的情况，在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的，我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。
例子：化身间谍H5 loading
这是一个穿越类的H5，所以设计师在设计loading的时候选用了虫洞的理念，与内容本身紧密贴合。
2. 转场
第二个情景是转场。具有意义的转场会降低产品割裂感，我们看两个例子就明白了。
例子：QQ会员观影特权
这个例子里元素在默认状态下会做上下浮动的效果，当我们滑动时候，元素很自然的做了一个出场入场的效果。很自然，没有割裂感。对吧？
3. 页面元素的互动
也可以为网页元素增加一些必要的动效。
例子：好声音第四季首页：
看下好声音的专题页面，在网页上的能够点击的按钮或者文字链，在鼠标经过时都有点变化，这个十分必要。因为表面上的变化会给用户一种心理暗示，那就是点击后也会有变化。
4. 心理需要
这里所说的心理需求是指气氛和情景的营造，例如节日，游戏活动等产品，是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的，这个动效就比干巴巴的文字有趣多了。
例子：一封家书
一封家书，注意看，背景有飘落的雪花，漫天大雪勾起思乡情，对吧，合情合理，有情有义！
好，说完哪里动，我们现在看看怎么动。
1. 基于真实形态的模拟
基于真实的动画会叫人看起来自然流畅，符合规律，比如物体运动时的加速度现象。
例子：Look
注意看这个笔画的动势，是有快有慢的，模拟了写字时起笔收笔的那种节奏感，所以看起来是自然真实的。
2. 人物动作夸张化
在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加趣味性，给用户以惊喜。
例子：巴菲特这一年
巴菲特老爷爷，动作很亲切。
3. 给元素赋予弹性
有弹性的物体会叫用户觉得具有生命感和真实性，弹的程度取决于你对元素软硬度的设定。
例子：拍个大头鬼
三个小鬼一跳一跳，弹性赋予了他们顽强的生命力。
4. 蒙太奇
这是一种类似蒙太奇的手法，通过快速切换的画面来形成一种奇妙后现代感觉。
例子：传奇硬箱
炫酷了，节奏很快，提气！
好，以上只是一些基本的动效手法，在实际的应用中其实有很多手段，在这里我建议大家可以去看看迪士尼和皮克斯的动画，应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影，但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品，你会发现他们的作品中充满了走心的细节。
简单来说，当用户打开一个界面，注意力首先会被动态的物体吸引，然后才会把注意力转向颜色对比强的部分，最后才是形状。这一过程是人在进化过程中形成的本能反应，基本适用所有用户。同时一个非常重要且容易被忽略的原则：用户的注意力是有限的，而且越来越少。很可能在用户注意到一段动效之后，注意力和耐心已经用尽，无法看到其他内容就着急去下一个界面了。
所以，对于动效这样一个非常强势的工具，一定要用在希望用户注意的部分，并且认真打磨。真正做到“不为动而动”。
文章来源：优设 作者:程远
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文字和排版可以追溯到五千年前，而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐，最早的图形化界面出现在了他们的Alto电脑上，而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里，几乎是它一家独大，并且它也被大家视作为数字技术的未来。
早期的Alto 在80年代进化为著名的施乐之星，而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。
不过不论是Alto 还是施乐之星，都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路，比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作，而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统，也就是后来我们所熟知的Mac OS。
Macintosh 的发布不仅仅意味着相对成熟的GUI的出现，而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体，也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。
仔细观察这些早期的字体，我们能够发现，虽然已经是图形化的界面，但是其中绝大多数的界面元素都还是以纯文本的形式而存在，它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来，不难发现，文本和排版几乎是贯穿始终的主线，它是一个不容忽视的核心类别。
界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面，是我们设计师来塑造和打磨这些信息。
看看下面的天气界面的设计，想象一下将所有界面元素都摆在桌上会是什么样的效果：无非就是两张图，几个图标和一大堆文本。
作为设计师，工作并不是将一堆随机的内容和元素排布在屏幕上，让它们看起来够漂亮就行了。真实的情况是，我们要从最核心的内容和文本开始着手，然后从这里着手细化，并完善出其他的部分。这就是我们工作的核心。
文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形，那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本，不同的字母组合构成不同的词汇、段落的时候，清晰度的影响就更大了，排版的重要性也显得更加明显了。
当然，影响界面设计的文本属性还有很多，比如平衡性，定位和层次结构，但是好的文案和排版的影响至少占据整体影响的95%。
在伟大的设计师眼里，文本不仅承载内容，而且可以构成界面。
– Oliver Reichenstein
既然屏幕上的文本显示是如此的重要，那么我们应当先了解人们是如何阅读的，而文本显示又是如何影响我们设计决策的。
读过Billy Whited 的文章《Setting Type for User Interface》之后，让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解，而单独放置的时候我们需要耗费更长的时间来识别。
其实这个研究结果也表明我们阅读较长句子的时候，并非是逐个单词地阅读，而是跳跃着阅读功能性的词汇，我们将这种阅读方式称为离散跳跃式阅读，俗称扫视。
扫视让我们的阅读能力更强，我们甚至会跳过短的功能性词汇。
我们应当记住这一关键特征，因为我们的界面中所承载的词汇大多是孤立的单词。简单说来，界面是无法利用扫视这种方式来获取信息的。
总的来说，单词在阅读中发挥着无比重要的作用，无论是作为内容还是作为界面元素，均是如此。无疑，选择合适的字体就相当重要了。
过去，人们常常认为眼睛和大脑是通过单词的外轮廓（Bouma Shape）来识别单词，当然，后来的研究证明这个想法是错的，单词的可读性和易读性的影响因素不止是外轮廓，字母本身的形态、细节和清晰度同样深入的影响着它的识别度。
其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯，越常见的内容对我们而言越容易识别。这样一来，我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点，我们需要将句子分割为单词，分解单词为字母，在字母中查看细节。
早在2008年，维多利亚大学心理学系根据测试结果得出结论，大写和小写的拉丁文字母是最容易识别的，也最易于阅读。
这项研究有趣的地方在于，它揭示了一个事实：每个字母延伸出来的线性端点是最易于识别的地方，也是每个字母的特点所在。
上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式，同样的，它们也应该强调每个字母的差异。
在2010年的时候，另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目，这项研究专注于测试经常被误读的字母和字符的识别度。
这项研究表明，在相同的字体和相同的尺寸、相同字重的情况下，有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明，纤细的字体加粗之后识别度效果会明显会增强，而字母的X高度如果能够占据上伸区或者下探区的空间，识别度会更好。
为了更好的理解字体的清晰度的概念，你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具，可以在Chrmoe、Opera和Safari 中运行。
理解了用户阅读的方式和字体可读性的影响因素之后，我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。
可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨，作为UI元素，其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体，甚至包括 Helvetica ，都没办法清晰分辨 字母 i 的大写形态 I，和大写字母 L的小写形态 l，这在界面设计中无疑是有影响的。
上图中，左边的字体为 Source Sans Pro , 右边为 Helvetica，无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在，因为这款字体终究是为平面印刷显示而设计的，并非为屏幕而生。
在iOS 7 时代，苹果短暂地将 Helvetica 作为系统的主要显示字体的时候，曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体，它的x高度比Helvetica 更高，字母间距更宽，字母间的识别度更高。
一款理想的UI界面所用的字体，不应当过于“显眼”，而该是悄无声息，“隐型”的。当用户在试图完成某项任务的时候，字体不应当给用户以“出戏”或者“显眼”的感觉，也就是说，字体不应当超出用户的认知负荷，而内容和信息才应该成为真正的关注点。
给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计，作为一个网页博客平台，我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度，包括输入法。
所以我们最终为它所选取的字体应当支持大量不同的内容，在不同的尺寸下拥有良好的识别度，能够兼容不同的设备，尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。
x高度的参考标准是小写字母x的高度，同等尺寸下，x高度更大的字体更易于识别。不过x高度也不是越大越好，当x高度超过一定限度的时候，小写字母n和小写字母h就很难分辨了，这一点应当注意。
字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高，字母在小屏幕上的识别度就越高。
字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性，而好的显示字体会更好的控制字母间距，确保单词在视觉上的“透气性”，甚至可以营造出一种韵律感。
不过字间距不是越宽松越好，太过宽松会让整个单词看起来过于松散。有一个值得参考的标准，就是字母之间的间距应当比字母内的开口缝隙略小一点。
许多字体不同的笔画粗细不同，而对于UI界面而言，笔触间的对比度越小识别度越好。较大的笔触对比度下，字体在小尺寸屏幕上，较细的笔画会难于分辨。
OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性，对于不同的语言和特殊的字符有着更为优良的兼容性。
接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前，部分内容因为字体没有加载而无法显示。
其实这可以通过先加载本地字体，显示内容，等网页字体加载好了之后再行替换，以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。
Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰，降低误读的可能性。
这项技术最初是由苹果公司所提出的，不过因为TrueType 字体技术的出现，Hinting 正在消失。
随着新的UI标准、排版技术的提升，字体技术也在不断的进步，在不远的未来，字体会从传感器获得信息，更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整，甚至复杂而庞大的中文字体，也可能作为灵活的网页字体而存在。
字体会让我们的工作更加便捷
让界面交互更快，更加触手可及
让UI更加易用
更加便捷
也更加清晰而高效
文章来源：优设 作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为大家概括性地介绍5种流行移动应用中常见的界面设计模式以供大家在自己的项目中参考。这些设计模式有助于大家提高设计的可用性，让界面变得更加直观。文章将侧重介绍能够帮助大家进行下列各方面设计的模式：
在这个社交网络盛行的时代，我们是不是真的还需要用这种陈旧的方式提交个人资料？社交登陆这一设计模式完全可以让用户轻松快捷的登陆，从而取代注册、填写表单之类的麻烦工作。
用户可以直接登陆自己的社交网络账号（Facebook、Twitter或者Google等），无需另外创建一个以后不太可能继续使用的账户，这样可以大大提高注册效率。除此之外，这一设计模式还有下列好处：
注：在国内这一设计演变成了：您可以使用QQ/微博合作帐号登录，然后给你绑定，继续回到注册界面 – –
通知功能可突出显示近期的活动和操作。我们每天要接触大量的信息，但百忙之中却没有时间（或者不愿意把时间）花费在手机上。我们都喜欢在尽可能短的时间内完成要做的事，然后马上知道是否有新的活动或者情况能够引起自己的关注。因此，对于通知设计模式的透彻理解和妥当实施非常重要。
很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计：
你可以模仿一下你最喜欢的解决办法，试试这个办法是否适合于你和你的用户。
通知栏该怎么设计，具体方法右戳学习：《怕打扰用户？来看看怎样设计通知栏不会讨人厌》
弹窗（也叫层叠窗口）是一种常用于互联网广告的方法。弹窗会在不创建新窗口的情况下遮盖住主要内容，无法使用拦阻软件进行拦截，因此用户非看不可。一般来说这种情况很让用户讨厌，但在有些情况下，弹窗打断用户的使用反而能给用户带来帮助。例如，用户可能会希望在不丢失当前用户界面的情况下查看某些信息。
下面是一些弹窗设计模式帮助解决问题的案例：
在习惯了使用Facebook、Twitter或Google等社交网站后，我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple，在此之后这一设计就广为流行开来了。
当用户需要显示一列非静态，但不能自动刷新的内容时，就可以适用下拉刷新模式。下拉刷新时，屏幕会滚动到顶部，刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间（不需要使用按钮）而且简单易懂。这种方式还不仅局限于更新内容，其还可以用于在一系列短信、图片或资料更新中加载早先的内容。
除了下拉刷新手势外，滑动也是智能手机上最为常用的手势之一。很多应用都允许用户在文章上左右滑动来了解详细信息或执行其他操作。与依赖于点击鼠标的传统web应用相比，这一方法充满创新意义。
在Android和iOS上有大量采用了滑动、点击及其他特定用户交互方式的移动应用，你可以在自己的项目过程中予以参考。每个应用对于自己的用户来说都有不同的意义和价值。你应当在画线框图的过程中做好规划再投入设计或开发流程。在测试过程中花点时间思考用户的反馈、建议和批评。
文章来源：优设 作者:程远
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
文章来源：优设 作者:布莱恩臣
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Peter Drucker 说过：「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化，将它分解成为最基础的习惯来执行，并且以每天一定量的执行，来实现最终的目标。
我们先构建了一个免费的 Chrome 插件 Confetti ，这是一个能够帮你追踪日常习惯的工具，每次完成一个任务，都会有五彩缤纷的纸屑效果出现，祝贺你守住了习惯，达成目标。
以下见解希望对你有所帮助!
一开始，我和 Wilson 就决定使用3屏的主要功能，并构建了一个粗糙的原型。但是，我们没有足够的远见，无法设想我们的产品最终的方向，也没有对全部的想法进行深入的打磨。
最终，我们向后退了一步。我们回过头来，确定了最小可执行原型的发布日期，以及真正的核心功能。我们在 Notion 上创建了一个文档，并且开始梳理和管理哪些功能是「必需品」，哪些功能「如果有了会更好」。比如，登录、注册、新用户引导是必不可少的功能。但是，我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。
我们基于这一点，我们开始抓住核心功能，尽可能让它们足够易用，强化核心特性。通过确定核心功能的优先级，并且确定发布日期，借此缓解我们的精神压力，确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。
在设计产品的时候，我经常被提醒要处理好每一个边缘情况，填好每一个坑，确保体验的顺畅。从零开始构建产品是一把双刃剑：基于自己的构想来创造产品是令人兴奋的，但是相应的，我需要经常在舒适区以外处理问题。
我一直在 Skookum 从事产品设计的工作，而这些工作通常都是在一定的约束条件下进行的，但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统，有早已搭建好的设计语言，有完整的组件，有明确的 UI 状态，有非常明确的基础架构，但是这次是我自己的产品，所有的这些都没有。而且，这个产品还可能会存在几种极端的情况、流程和状态。
比如，在注册流程中，按钮会有默认、禁用、激活、填充、错误、悬停等几种状态，但是除了这些之外，我还需要考虑诸如密码重置的流程和体验，这可能会涉及到 6 个高度相似的 UI 界面状态：
这个过程中，有很多东西都令我一度感到迷惑，这也引发出我下一个要说的要点……
项目开始之后，我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品，这导致我犯了一个非常严重的错误：我没有按照传统的产品流程来创建产品，这随后导致了一系列的问题。
按照标准的产品设计流程，我需要从用户流程开始创建，定义用户可能会执行的流程，并且针对主要的流程界面进行必要的总结说明。因为这个项目和之前的工作不一样，我一开始就忘记了遵循流程这件事情，我错误地将它视作为一个包含几个简单界面的简单项目（是不是听着特别耳熟？很多所谓的小项目翻车都是从这里开始的）。这样一来，当我开始处理诸多按钮的不同状态和界面变化的时候，整个用户流程变得混乱不堪，并且我很难确定其中的体验漏洞有哪些。
最终我停止了这种随性的设计方式，并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失，以及整个界面流程的走向。
按照用户流程来梳理界面的时候，可以对于整个产品的屏幕状态有所了解，并且随着产品的发展膨胀，用户流程的重要性会随之增长，成为至关重要的部分。
的确，在完成整个 UI 之前，不应该开始向着项目当中添加动画。但是，不添加并不意味着你无需考虑。实际上，不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候，就应该考虑到微交互和动画的使用，避免在后续动效和交互落地的时候，进行不必要的修改。
比如，当我在设计「达成成就」这一体验的时候，我就考虑到了需要用到的微交互的效果，所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计，并且将可能会用到的动效拖到某个角落暂时记下来，避免在设计 UI 的阶段，影响了整体的流程和效果。而后续加入动效的时候，就会方便很多。
我认为，将 UI 和交互结合起来考虑是非常重要的，因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效，会让整个设计过程变得复杂臃肿。
其实这也是我在这个项目中犯的一个大错：等了太长时间才获得反馈。
我通常是在晚上回家和周末才有空推进这个项目，在很长的一段时间内，我没有真正告诉任何人。
当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后，他们在使用过程中，开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者，是很容易陷入并沉迷用户体验当中比较孤立的一部分，反而会忽略很多显著的问题。
回想一下，如果我能尽早向用户和朋友展示设计和原型，那么我会在更早的时候发现问题，并且在获得反馈之后才进入开发阶段，弥补大量的损失。
很多设计师会认为，所有的想法都必须是原创的才行，否则就是欺诈。但是稍微想想，其实彻底的原创其实很少的。当你看到一个优秀的产品，它优秀的配色和恰到好处的交互可能会让你觉得：「已经有人做出来了，我的想法在它面前完全没法比拟。」
这种思维方式其实有着极大的缺陷，并且抑制了你的创造力。
当我发现我的设计有缺陷的时候，我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的，如何管理用户个人信息的。我从来都没有复制被人的体验，但是会隔三差五去钻研别人所创造出来的优秀细节，然后将这些细节借鉴到我的设计当中。
我最喜欢的一个范例，是从模态状态下，旋转退出的效果。这是我偶然在一个网站上看到的效果，因此我决定将它添加到 Confetti 当中，我还在着陆页的按钮中加入了类似的特效。
事实上，一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭，不要害怕去发掘和学习别人的优势和亮点，你要学会有机地拆解和借鉴，灵活地运用到自己的设计当中，它就像调制鸡尾酒一样有趣。
当我们开始设计的产品的时候，我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师，要负责UX，要做交互，也制作动效，要进行平面设计，还要考虑市场营销，要管理产品，我们也要扮演其他的角色。
职责如此之多，以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境，寻求外部帮助成了必要的选择。
专注于自己专业的领域，其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中，一位艺术家负责了绝大多数的风景插画，另一位艺术家则完成了肖像画的部分，这很正常。
我希望产品的外观和功能能够保持高度的一致性，并且我确实做到了。但是不要误会我的意思，我并非是不敢走出舒适区去学习代码开发，而是在这样的项目当中，我并不适合从UI和UX领域延伸出去，毕竟完成项目的开发优先级比学习代码更高。
尽管给 MVP 安排好了发布时间，可以防止这个项目被无限膨胀的功能特性和工作量所淹没，但是这样依然无法防止我们基于已有的功能进行改进。
很多人都喜欢 Reid Hoffman 的一句话：「如果你对于产品的第一版感觉不尴尬，那你一定是发布晚了。」不过，我们正式发布的第一版的产品，并不会显得太尴尬，但是目前来看，当时那种简单直观的状态，比起再花费好几个月时间反复打磨之后再发布，来得更好。
在发布新产品之前，我们必须考虑2个问题：
这些问题让我们最终能够达成目标，且按时发布，避免分心。专注交付最核心的功能，而不是被一堆冗余的次要特性所压倒。
从项目一开始我就一直在做项目的管理和组织设计素材，以便后面进行开发。不过，由于我一开始就使用了 Zeplin 这样的协同工具，确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具，Zeplin 让我无需浪费时间对素材进行分类，非常便捷。
在交接的过程中，我还做了一些优化：
在设计 UI 的时候，界面中的文案部分是临时编写的，这促使了一次设计完成之后，整体的文案是不一致、不协调的。
我很希望一开始就创建了一个单独的文档，一次性将文案部分全部重写，包括提醒、注释、标签、弹出框提醒等等。而实际上，我的文案都是在设计 UI 的时候附带着写下来的，导致整体的一致性严重缺乏。
这种文案本身在调性上的缺乏，导致了整个产品在语气和用词上是混搭式的，一致性很差。
所以，在产品上线发布之后，一直在对文案进行修修补补。
文章来源：优设(陈子木) 作者:Danny Sapio
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前一直没有太多关注过如何定义一个 APP 的配色，或者如何画一个漂亮的 icon。曾经的上级指示都是这些基础对商业的不可量化。于是我在思考一个问题，就是没有直观商业价值的设计要素都失去了意义变成了所谓基础的事情吗？
半年前面试字节的时候，面试官问了我有关配色的定义，细节到为什么是这个色值。当时十分震惊于这么细节的问题，之后我就想起了之前有位朋友给我发送过一份有关支付宝「蓝」的定义 pdf，洋洋洒洒几十页就是为了解释他们为啥用这个有点脏的蓝色#108ee9 当主色。
所以其实 APP 的配色/图标与主品牌是一脉相承的，它是品牌的延续与象征。它以最直观的态度传达给用户，这个产品以及品牌的调性，并以此建立最强有力的视觉识别性。所以我觉得它是可以有条件地展示在我们设计方案里的，但一定注意它的篇幅和表达的方式，维度在品牌传达这一层就对了。
至于如何展示和定义你的 APP 配色，一般 2 类情况。
1. 在品牌主视觉配色基础上的适配
这种情况一般适用品牌主视觉方案已经设计完毕，APP 端作为延续。这个时候一般注意配色从 CMYK 模式到 RGB 的转换，所以作为 APP 的配色，具体色值上可以稍作调整，使它更适配于 LED 屏的用户感知与舒适度。
另外可以使用透明度进行色彩分阶段，一般从 0-100% 分为 10 阶就足够我们日常界面设计使用了。
2. 0-1定义APP配色
这种情况下我们从感性和理性 2 个角度去定义颜色。
从感性的角度分析：情绪板应该大家都熟知的了，根据不同的行业和用户定位得到相应的关键词。对应不同的关键词再搜集对应的图片，从图片和自然感知中提炼出主色。
从理性的角度分析：我们把色彩分为对比色、近似色、复合色、单一色、三角对立色和渐变色六种。根据产品的类型和定位，我们决定使用什么样的配色。比如一个年轻大学生专用的社交型 APP，我们可能就倾向更多地使用对比色这样的撞色得到更多潮流与青春的味道。
至于图标的话我就更不用多说了，大家肯定都记得那些非常基础的绘制图标的法则。个人认为图标也不太需要放一个单独的篇幅去展示，除非它有一些新奇有趣的亮点。
在之前的文章中有写过，匹配产品定位的界面框架一旦输出，对整个 APP 之后的迭代与功能设计都有很直接的影响。定义整体的UX 框架方案，是实践设计目标与策略的过程，基本围绕着这 3 个出发点：匹配产品定位、满足业务拓展性、符合舒适度美学 。
首先我们从宏观角度分析，一方面产品的业务线处于什么情况，是相对独立的业务主线产品（举例：拉勾）？还是平台级产品（里面包含了许多垂直的业务线，举例淘宝）？如果是平台级产品在整体框架设计时就需要考虑跨端跨业务的框架拓展型。
举个例子，就是在定义平台框架的时候要考虑这个框架与容器是不是同时适用于底下的子业务线，同时当这个框架到了 H5、小程序、PC 的时候需要做哪些适配调整，是否都可以很好地进行兼容适配。
另一方面，整体框架设计的类型是否符合设计目标。举个例子，无框式超大留白的框架设计虽然看上去很厉害，但在大部分商业产品中它的实用性却非常低的。假设说我们今天需要做一个电商类的 app，设计目标是希望能够提升业务转化以及购买效率，那么展示效率与功能分区就显得尤为重要，它就更适合一个相对紧凑的卡片式为主的框架设计。
其次从微观的角度来说，遍地就都是细节了。舒适度美学这一说，其实难免有些抽象，我们把它转为相对合理一些的落地原理就会清晰很多，像大家熟知的间距 4 倍数原理、对齐原则等等。但是这些微观的内容不建议大家放到方案展示里，因为它并没有针对单个方案的特殊性，更像一种大众共识。
△ 多说无益，直接上最终的效果图，方便大家参考
我们特地把单独的容器部分拿出来解析，是因为自定义容器是展示核心业务最主要思考呈现，同时还可以配合运营做很多提升业务效率的配置。在做具体设计的时候，我们需要区分「端上固定」模块和「运营配置」模块之间的差别。
「端上固定」模块
顾名思义就是开发端上需要写死的模块。写死的模块意味着，无论一个配图还是一句文案，也只有开发童鞋修改后通过发版才能实现内容变更。一般适用于相对固定的产品功能以及 UGC 用户生产内容。比如：拉勾上传简历功能、斗鱼的直播间列表。
「运营配置」模块
相对「端上固定」，「运营配置」就不需要跟着发版，可以随时后台上传替换模块内的内容，适用于需要 PGC 生产的内容。说到这里很多童鞋可能马上就联想到 banner，弹窗的运营位了，但其实除了这些之外还有很多容器模块是需要灵活配置为「运营配置」模块才能更有效地提升运营业务价值。
我们可以这样来区分「运营配置」模块类型。
一种是纯运营配置模块，即设计与开发输出框架、定好配置字段限制之后，运营可以独立完成后台配置的。比如：资讯 app 0-1 前期的资讯列表内容。
另一种是运营设计配合模块，即需要设计配合运营输出一定的设计图才可以进行后台配置的。比如：常见的 banner、弹窗、热门推荐专题等。
在 0-1 的设计方案中，更推荐大家展示「运营配置」模块的内容与解析，因为 0-1 是个以拉新为主的阶段，运营显得尤为重要，所以我们的设计需要侧重考虑整体的运营效率与转化。
在我们概述完大部分的整体思考路径与设计方案后，我们需要由面到点，从全局提炼细节，突出自己的设计方案亮点。
而如何提炼这个亮点呢？是挑一个我设计的最好看的界面呢？还是直接放最复杂的那个流程？以下是推荐选择的亮点设计：
1. 完成理论实践，并可以量化价值的设计case
大家应该都了解，一些和设计息息相关的数据 UV/PV/GMV/ 相关业务指标等，以及一系列在实践中很好应用来解释设计方案的理论支撑比如 5W1H、GSM 与五度分析……这些数据和理论是支撑我们设计更饱满更有说服力的重要支点。
虽然在 0-1 的项目里，我们基本不太用得上优化数据比对（因为产品初期用户数量少，产品体验路径也是一直处于不断试错阶段），但是我们还是可以借用上文所述的一些方法论或者 A/B test 来完成我们的方案思考过程展示。
那些你在完成践行设计策略完成设计目标时获得的数据指标要提前预知，养成习惯之后，你就可以快速轻松地察觉到哪里有可以做 A/B test、进行埋点数据比对的地方了。
2. 影响上中下游环节的设计case
除了对业务提升价值的项目外，我们有时候也需要注意对品牌设计、产品、运营、技术等上中下游造成影响力的设计项目。通常这类设计大部分也都是设计自驱发起的，能起到提升各方人效和业务效率的作用。
举例的话，我能马上联想到的就是多方协作的大型线上组件库，可以参考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加强大的多方协作 UX 设计资源中心。
感觉近期面过的 80% 的公司都对组件库的定义非常关注，所以我们要做的不仅仅只是放一个视觉规范或者组件库的全景图，而需要对组件库进行拆解。
文章来源：优设(土拨鼠) 作者:Nana的设计锦囊
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
界面交互动效是展现界面间的转换和界面内元素变化的交互反馈。而效果就表现在触发与结束的过程中，表现清晰的层级关系，自然的引出与结束。交互动效有着承上启下的重要作用。
第一种：为衔接类型动画
主要针对不同界面直接的衔接，为带来更流畅的操作观感所做的设计，弥补两个界面直接的差异所带来的用户感知落差。
第二种：特效类动画
特效的核心目的是为了吸引用户的注意力，提高信息敏感度，在游戏界面设计当中使用更为广泛，能够带来更加绚丽的动态画面。
第一类：界面内的交互动效
在一个界面内的交互动效特别多，例如点击加号出现下拉菜单，出现浮层动画提示，点击舵式导航出现选择类型和遮罩，点击按钮出现评论点赞，当前页面的展开收起，加载等等。如下图所示：
第二类：界面间的交互动效
几个界面之间的的交互动效通常是平缓过渡到下一页。常见的有以下几类：
△ 硬切到下一页
△ 下一页从右往左推入（上一页从左往右推出）
△ 下一页从下往上弹出
△ 上一页的元素过渡到下一页
总结：
蓝蓝设计的小编 http://www.lanlanwork.com