@布莱恩臣 ：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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章：
手机及小程序界面设计之一：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之六：让设计更有说服力的20条经典原则：菲茨定律
手机及小程序界面设计之八：如何适配iPhone X？来看滴滴出行的实战案例复盘！
菲兹定律由心理学家Paul Fitt于1954年提出，它是物理世界中人体运动的数学模型。这一定律提出之后，在很多领域都得到了应用，但是在人机交互领域的影响尤为深远，可以说是人机交互领域的第一条定律，它通常被用来解释鼠标（PC端）和手势（移动端）在界面中的移动规律。这项定律尤其适合按钮等可点击、可选择、可交互的元素，目的：易于查找和选择。作为一个数学模型，菲兹定律是有表达式的，表达式如下：
T 是完成动作的时间a代表装置开始结束的时间，b表示该装置的速度，这些常数可从实测数据进行直线近似取得。D是起始位置到目标中心的距离。w是目标区域在运动维上的宽度。
结论： 离目标距离越近，所需的时间越短；目标尺寸越大，完成速度越快，时间就越短。也就是说，预测点击一个目标的时间，取决于目标和当前位置的距离+目标的大小。
1 、放大可点击元素的尺寸
大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离，并且再进行精细的调整才能选中，这样不仅难以点击、且需要花费更多的时间。
这里的大指按钮的实际大小、也就是点击热区的大小，包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮，四周大量留白； 而移动端设计里通常会扩展宽度，使用各种通栏按钮，使用户操作更加容易和快捷，可点击图标也会放大可点击区域。
注意： 并不能无限的放大。大小给可用性带来的加成是有限制的，如果把一个很小的按钮放大，它会变得更易于点击；但是如果按钮尺寸已经足够大，那么再放大尺寸，也并不会提高可用性和用户操作效率。
2、 减少移动的距离
依据菲茨定律所言，距离目标越近，用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离，来提高用户的使用效率和交互体验。
1>减少绝对距离
因为移动端用户通常为单手操作，也就是大拇指为主要操作工具，在现在大屏手机泛滥的情况下，屏幕很多地方是单手无法触及的，所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。
2>减少相对距离
在两个或多个操作中，通过缩短可交互元素之间的距离来提高用户的使用效率。比如确认删除操作，因为它是重要的负向操作，所以对于双重确认，相比于在当前列表区域确认删除（如下图微信），如果使用弹框，那么用户手势的移动距离相对会更长（如下图淘宝）
p：对于微信来说，删除对话是用户比较常执行的操作，因此便利性应该更高；而淘宝更想阻止用户进行此操作。 也就是说并不是所有操作都需要缩短距离。
3 、相关元素靠近
相关的内容或者交互元素要彼此靠近，可以在视觉上增强他们之间的相关性认知
4 、屏幕的边缘和角落无限大
因为屏幕的边角有一个隐形的“结界”，可以阻止用户鼠标因为大幅移动而超出目标区域范围，因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落，而不用进一步微调。 所以屏幕的边角适合放置菜单栏、按钮这样的元素，不管箭头移动多远，最终会停在屏幕的边缘并定位到菜单上。 比如chrome浏览器它把TAB栏放在了屏幕最顶部边界，用户使用效率比较高。
其他补充：
1、饼状菜单会比线型菜单更易选择，而且错误率更低，这里面有两个原因：
饼状菜单的每个菜单项和菜单中心的距离都一致
饼状菜单的每个菜单项的楔形目标区域都非常大，一般都会扩展到屏幕的边缘
2、 目标点的位置实际上是边缘的一些像素加上边缘之外的全部面积。所以，这样看来目标点就足够大了。原因是基于fitts定律，它的一个分母的增大了而使得界面的效率提高了
总结：
1、我们想要更容易点击到控件，就应该放在屏幕的边缘或角落里。让常用的控件更大，更容易辨别；
2、使用屏幕的边缘和角落让控件有效扩大，永远不要把控件放在离屏幕边缘或角落一个像素远的地方；
3、边缘之外的地方，也可以算作目标点的面积，这样一来，目标的面积就被无限的放大了，也更方便用户操作。
补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画，先初步了解下:
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文主要聊一下产品中使用的几个交互设计原则，一致性，费茨定律，容错性，希克定律。
我们在做设计时，经常会讲到要保持一致。一致性的好处从外部来说，可以极大的提升产品的易用性，降低用户的学习成本，同时也有利于品牌形象的传达。从内部来说，将一些相同或类似的功能进行复用，提高团队的协作效率，让资源得到更充分的利用。
一致性体现在产品中可以体现在很多方面，比如是视觉风格统一，交互操作统一。视觉上可以是配色、字体、图标、页面布局、插画，以及在不同终端上的统一。交互操作可以是相同相似功能在不同页面的呼出方式，一些地方动画的表现形式。
另外，产品与本身所处的行业内的竞品的一致性，比如音乐播放页面，用户已经习惯了上面是歌曲宣传图，下面是播放切换的控件，各个产品的排版布局都是相似的，这样的统一可以让用户没有陌生感，在接触一个新的音乐类产品时很快的上手。
滴答清单的网页端、桌面版、网页插件，将页面的主要功能信息都放在了左边，中间部分是清单列表，最右侧是清单详情，配色都是用了灰色、白色、浅蓝色，图标风格上使用的面型风格，这三个终端的视觉风格是保持了高度的一致，传递给用户的也是很强的品牌理念。
阿里云盘，App启动页和网页功能介绍，都是使用了C4D插画，来保证两个终端品牌风格的一致性。
微博App的详情页及他人主页，这两个页面的评论功能都使用了相同的底部弹出框的控件样式，用户可以在不用思考的情况下直接操作，这是利用了相同功能在不同页面复用了相同的交互控件。
简单点来说，有两个关键因素，两个操作目标的距离、操作目标大小。第一个因素意思就是在当前产品中两步操作，手指移动的距离越短，操作就越容易。第二个因素是当前操作目标越大，操作越容易。
石墨文档App。在页面右下角有一个悬浮的新建按钮，点击后从底部弹出活动视图，用户可以进行新建文档、表格等操作。这里使用从底部弹出活动视图，而不是在新页面或者页面中间，正是利用了费茨定律，缩短了两步操作之间手指移动的距离，降低操作难度。
滴滴出行、如祺出行
滴滴出行打车页面，App首先会自动定位你当前所在位置为出发位置，目的地一栏显示文案「输入目的地」。设计师将输入框设计的很大，文案字体也很大，在当前页面中非常醒目，极大的方便了用户的操作。这就是应用了费茨定律的第二个因素，当前操作目标越大，操作也就越容易。
反观如祺出行的打车页面，出发地一栏和目的地一栏的尺寸是一样大的，都是使用图标+文字样式，出发地一栏使用深灰色的图标、深灰色的字体，而目的地一栏图标虽然使用了橙色主题色，但是文字的颜色是浅灰色，字号也没有放大，非常不显眼。要知道用户当前的迫切需求是输入目的地，这样设计无疑是增加了用户操作的难度。
平时在操作产品界面时，经常会因为一些原因造成操作错误，而有些错误造成的损失是无法挽回的。那么设计师应该怎么避免用户操作中犯错呢？容错性原则可以很好的解决这个问题。容错性定义是：
“容错性是产品对错误操作的承载性能，即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。容错性最初应用于计算机领域，它的存在能保证系统在故障存在的情况下不失效，仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。”
拆解一下，影响「操作时出现错误的概率」的因素有，操作前的引导提醒以及操作时的提示。影响「错误出现后得到解决的概率和效率」的因素有，操作后的解决方案
微信的修改微信号功能，不同于修改昵称直接进入编辑页面，微信在中间增加了一个页面，页面内容显示当前的微信号及提示文字，目的是提醒用户要慎重，避免有些用户修改了微信号之后后悔。这里是用到了容错性的操作前的引导提醒，降低了出现错误的概率。
QQ注册页面，用户输入昵称后，系统会检测昵称是否可用，及时给出给出提示。输入密码时会自动出现密码设置的提示，及时提醒密码都有哪些规则，避免用户输入不符合要求的密码。操作中给出这些相应的提示，可以使用户更加流畅的完成注册流程。
印象笔记网页版。将一篇笔记删除后，页面顶部会出现一个提示框，文案是「已将XX文章移至废纸篓」，提示框2、3秒之后自动消失。如果刚好这篇笔记是不小心误删的，这里的提示框给予了用户反悔的机会，帮助用户及时的找回笔记，弥补错误。
希克定律，又叫是希克一海曼定律（Hick Hymalrs 1aw），是一种心理物理学定律。应用在产品设计当中，就是当页面中需要有不同选项时，要尽可能的少而简单，降低用户的决策成本。
美团外卖页面的金刚区，共有三行应用。核心推荐的5个应用是放在第一排，其他10个应用排成两排，核心推荐应用与其他应用在图标风格上使用了区别化设计，用户在进行选择时变成了5选1，而不是15选1。这是设计师在功能设计时针对应用做出了重要程度的区分，以帮助用户更快做出选择。
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
除非有更好的选择，否则就遵从标准 —— 阿兰库珀
费茨定律：
距离：起始位置离目标位置越远，我们到达目标位置所花费的时间就越长，反之亦然。
目标大小：目标面积越大，我们定位到目标位置所花费的时间就越短，反之，目标越小，定位时间越长。
·生活中的费茨定律
刹车和油门踏板相距很近，刹车时的物理面积比油门的物理面积大，会最快接触到踏板，减少事故的发生。
·界面中的费茨定律
（1）距离目标位置尽量缩短，相关操作保持亲密性
例如：抖音的视频播放界面，系统会判断用户进行触发时手指与屏幕的接触位置，并将操作按钮显示在离用户手指最近的位置。
（2）目标尺寸大小要合适
目标点击热区在合适的范围内，越大越容易精准点击，越小越容易误操作。iOS交互指南中规定最小点击热区为44*44。
（3）拇指原则
人们在使用手机时，75%的交互操作都是由拇指驱动的，考虑到费茨定律，如果目标位置超出拇指的移动范围，操作成本增加。
米勒定律：
是交互设计中常用的一个定律，美国心理学家对人的记忆能力进行定量研究，他发现人的短时记忆能力广度为7±2个信息块，超过这个范围就容易出错，在7+2与7-2之间浮动。
·生活中的米勒定律
电话号码，银行卡号，身份证号码进行数字分隔，降低记忆成本，提高信息的易读性，视觉防错。
·界面中的米勒定律
（1）分段记忆，信息分层
文章、文本中的字号、字间距，目的就是便于读者记忆和提高易读性
（2）导航和选项卡不超过9个
网页设计的一级导航不要超过9个，如果导航和选项卡内容过多，可通过聚合按钮来包容其他次要入口。（用户使用导航就是要快速找到自己想要的内容，如不能快速查找，用户可能会就此流失掉）
（3）系列位置效应
首因效应：相对中间位置，我们对最前面的物体记忆清晰。
新近效应：相对中间位置，对序列末尾物体记忆更清晰。
席克定律：
是一种心理物理学定律，用户所面临的选择数量越多，花费时间越长，人机交互界面选项越多，用户决策时间越长。
·生活中的席克定律
遥控器按钮越少，越快做出操作；如交互设计四策略：删除、组合、隐藏、转移。功能层级也需要细分核心功能、辅助功能、边缘功能。而核心功能是进入产品第一个发现的功能，操作频率高，所以它的视觉应是最突出的，可以帮助用户增强感知和节约选择时间。
·界面中的席克定律
（1）减少选项并提供默认值
选项越多，用户决策的时间越长，减少用户思考的时间就是减少操作时间和学习成本，让用户不思考就做出正确的选择，对于小模块来说，一般选项不超过9个，9个以上可以用交互约束用户的行为，如展开收缩。
（2）选项分类分层，信息区分主次
在菜单栏的设计过程中，我们会进行同类分组和多级分层的设计，效率会更高。重点信息、推荐信息和普通信息要在时间上做区分，这样才能抢占视觉并在第一时间感知到。
（3）分步完成，分布显示
分解复杂流程，让用户一步步操作，而不是全部堆到用户面前，通过分步完成一个任务流，降低其他信息给用户带来的干扰。例如：用户填写表单时，可展示选项，当填完最后一项选“其他”时，再展开剩余的表单，目的上是为了减轻大量表单，给用户感知上带来的压力，达到场景细分的目的。
接近法则：
接近法则也是格式塔理论中我们最熟悉的，最常用的一种法则。观察者看到彼此临近的物体时，会将它们视为一体。
·生活中的接近法则
小区规划图中，会通过较宽的过道，绿植围栏来划分他们之间的关系，从而增强人们的感知。
·界面中的接近法则
界面中的接近原则是对相似的信息及功能类别进行分组、布局。作用是直接影响到用户与产品的视觉交流，引导用户的浏览及操作行为。
常见的在列表页面，通过色块区分大组与大组，分割线区分小组与小组，目的都是在视觉上通过组与组的区分来划分功能与功能之间的关联性。
以上这四条是我们在平常工作时都会用到的，我们再进行一个界面的设计时应该对照下以上几条定律，在与产品或开发battle时也能有理有据，告诉他我们「为什么这样设计」。写的手有些痛，剩下的4条定律下期我再继续补充，下期见～
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
八个交互设计原则帮你避免出现基础错误
1 一致性：一致性能给用户节约成本、元素风格统一和延续性、产品内部结构的一致性
2 反馈：操作成功或失败都有明确的反馈、告诉用户此刻的状态是什么会有什么结果
3 方便使用： 减法设计（扁平的框架设计—减少不必要的操作步骤，每个流程清晰没有太多分支）
重点功能随手可用 多选择少输入
4 预防出错/防错原则： 操作给予提示
5 帮助用户认识改正错误：如果出错要帮助用户从错误中恢复过来
6 高识别性：（复杂的交互要给与引导和帮助）
7 用户自由控制权：用户可以取消正在执行的操作 每个层级都能找到上一级的方法
8 符合用户的操作习惯
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
著：[英] 贾尔斯·科尔伯恩
译：李松峰
人民邮电出版社
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1. 梳理知识框架，记录阅读收获、心得，本身就是一个加深理解、温故内化的过程。
2. 摘录重要知识，存储在数字媒体上，方便随时按需查阅。
3. 锻炼思维和表达。
百利无一害，来吧，走起。
本书讲述了一个产品价值观和四个策略。
一个产品价值观：作者崇尚简单体验的产品设计。简单的产品更容易制造 (成本也更低)，也更容易使用 (市场也更广)
① 这里的产品指数字产品或实体产品。
② 本书主要考虑大多数用户 (主流用户) 的体验。
四个策略：删除、组织、隐藏、转移。本书的核心内容就是讲述如何通过这四个策略（我理解就是方法论）设计大多数用户喜爱的简单体验。这几个策略适用于简化功能和内容。
1. 知识原理很多都是相通的
① 本书的删除策略与奥卡姆剃刀
奥卡姆剃刀：“如无必要，勿增实体”。讲的也是简单性原则。
他说：“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。” 讲得真好，不能赞同更多。
② 组织策略与亲密性原则
亲密性原则：彼此相关的项应当靠近，归组在一起，成为一个视觉单元。——《写给大家看的设计书》Robin Williams，非常棒 推荐
组织策略与亲密性原则讲的都是正确组织信息的方法论。
③ 简单与别让我思考
别让我思考 (可用性最重要的原则)：你的目标应该是让每一个页面或屏幕都不言而喻，这样的话，普通用户只要看它一眼就知道是什么内容，知道怎么使用它。即他们不需要思考就能明白。可用性是关于人，关于人们如何理解和使用产品的，它和技术没有关系。技术日新月异，人本身的变化却非常缓慢。——《点石成金》史蒂夫·克鲁格，很棒 推荐+1
2. 凡事过犹不及。
书中有一个案例惊叹不已，讲的是东京苹果专卖店，没有按钮的电梯 (电梯内和外都没有操控按钮)，自动在每一楼层停靠、自动开和关门 (乘客干预不了)。置用户于完全失控的环境中（要是深夜一个人乘坐，估计得吓不活了）。难以置信，谁能想到以优质体验设计征服世界的鼎鼎大名的苹果，居然还有这种反人类的逆天设计！
3. 这本书的阅读体验跟《写给大家看的设计书》极相似
① 简单、轻松、通俗易懂两者都为读者创造了简单、轻松的阅读体验。把知识融入情境、故事，以图示意，短小的一篇一篇像在和你讲故事，娓娓道来、言之有物、简明扼要、通俗易懂。
② 知识框架扁平、浓缩为极简，过目难忘《简约至上》把全书核心凝炼为：删除、组织、隐藏、转移。《写给大家看的设计书》将复杂的设计原理凝炼为：亲密性、对齐、对比、重复。合上书，就能回忆起来，太简单又太深刻，真的想忘记都难。
4. 好书亦师亦友
“虽然这世界上不能改变的东西很多，但眼前的设计还是有很多简化的途径可循。”、“你能做到”... 像不像一个智慧温暖又真诚善良的朋友在不断的给你信心和鼓舞？
(小声说，我也喜欢)
以我浅薄有限的认知来看，人们喜欢简单不仅因为简单顺应人性，还因为简单带来高效：
① 简单顺应人性简单意味着不用思考，以现有的认知水平一看就明白，在人的舒适区，启用的是人低耗能自动模式，是本能来的。而复杂的事物，如思考、学习、锻炼、做一件难的事，都是更多的消耗人的脑力、体力、意志力、自控力、耐心、时间，都是调用人的高耗能模式，所以复杂这个东西本质上是反人性的。
② 简单带来高效不管是工具任务型产品还是内容型产品，用户使用产品的逻辑路线是一样的，都是经由认知 -> 决策 -> 行动 -> 达成目标；如果简单就会：认知快 -> 决策快 -> 行动快 -> 高效达成目标；所以，简单是大多数用户的刚需了。
1. 越复杂或少用的知识，忘记就越快。
2. 简单源自专注。明确自己的目标，更容易迷途知返。
3. 解决问题前，先搞清楚状况。纠结于某个设计时，退一步想想：“用户在这里真正想干的是什么？” 聚焦用户。
4. 共识：把所有利益相关方的目标都统一到最终用户身上，通过共识构建愿景。然后，阻力和争斗就会减少。
怎么让利益相关方听自己的？答案是必须理解他们的想法。
先从倾听他们和理解什么对他们最重要开始。把汇总的意见恰当地反馈给他们，他们会知道你已经明白了。在感觉被人倾听后，他们才会乐意敞开心扉。
“我也希望看到最适合用户的设计，我们一块看几个，看看是否可行。”
不要尝试说服别人，听他们说，让他们自己判断，让他们自己承认而不是回避问题，然后再去寻找解决他们问题的方案。
5. 产品使用环境是观察用户的最佳地点，必须使软件设计符合环境需求。你的用户体验应该简单到不受这些干扰的影响，能够在人们被打断的间隙生存。
6. 为主流用户 (大多数用户) 而设计，忽略专家型用户。
7. 体现品牌特征① 实用性——这个品牌能做什么对我有帮助的事情？(如让飞行更简单)② 这个品牌给了我什么感觉？(如充满活力，好玩)③ 这个品牌崇尚什么？
8. 简单就是让用户感到自己在掌控一切。你的设计不能跟这种掌控的感觉有什么抵触，而是应该放大这种感觉。
9. 设计之所以会变复杂，通常是因为某些不重要的步骤挤占了核心特性。关注用户行为 (而不是你的设计)，并且从用户的视角把它描述出来。
10. 在研究某个问题的时候，你需要把它转换成一种认识。故事是描述认识的一种好方式。与一大堆需求描述相比，故事更容易让读者明白什么重要和为什么重要。故事应该用三言两语把核心体验表达出来。
11. 极端的可用性
① 任何人都可以使用
② 毫不费力的使用
③ 瞬间响应
④ 一目了然
⑤ 始终工作
⑥ 不出错
⑦ 恰好够用的信息
⑧ 在混乱无序的环境中工作
争取你不可能达成的目标有一个重要的好处：保持正确的方向。
12. 坚持不懈是达成简单最重要的一步。
“乍一看到某个问题，你会觉得很简单，其实你并没有理解其复杂性。当你把问题搞清楚之后，又会发现真的很复杂，于是你就拿出一套复杂的方案来。实际上，你的工作只做了一半，大多数人也都会到此为止……但是，真正伟大的人还会继续向前，直至找到问题的关键和深层次原因，然后再拿出一个优雅的、堪称完美的有效方案。” ——史蒂夫·乔布斯
13. 简化意味着改变，而改变始终意味着痛苦。多数人会不惜代价避免痛苦。收集需要改变的证据很重要。
14. 挑出正确的点子，确保能够得到很好的执行。
删除：通过删除来简化设计，删除所有不必要的，直到减无可减。
15. 删除杂乱的特性可以让设计师专注于把有限的重要问题解决好，而且也有助于用户心无旁骛地完成自己的目标。
16. 不要等着别人不分青红皂白地、无情地删除最有意思的功能。要总揽全局，保证只交付那些对用户体验而言真正有价值的功能和内容。
17. 体验的核心是最能打动用户的东西。找到它，删什么留什么就一目了然了。能够消除用户挫折感的功能同样也会受到欢迎。
18. 删除残缺的功能、导致出错的功能、不必要的功能
19. 如果一个小变化导致了复杂的流程，就应该退一步去寻找更好的解决方案。
20. 错误：即使非常小的错误也会让用户烦恼。消除错误是简化用户体验的重要途径。无论显示什么错误信息，好像都没有那么友好、亲切和简单。
21. 不要以功能的多寡来认定产品的价值，而应该看产品能否满足用户最高优先级的目标。
22. 删除视觉干扰因素，让用户注意力保持集中。界面中的各种小细节会增加用户的负担、打断用户的思维，会像公路上的减速带或坑坑洼洼一样降低用户的效率。
23. 太多选择容易让人反感。
24. 清除减速带：选择聪明的默认值可以减少用户的选择。
25. 删除视觉混乱和噪音，意味着人们必须处理的信息变少了，能够把注意力集中到真正重要的内容上。
26. 删减文字、精简句子：重要的内容“水落石出”，消除了分析满屏内容的麻烦，用户更有掌控感，把文字变得简洁、清晰、有说服力。
27. 简化对话，长话短说。一次交互就是用户与设备之间的一次对话。
28. 砍掉时间。砍掉功能和内容可以节省时间，因为决定少了、按钮少了、思考少了、阅读少了。要在对用户真正重要的事情上节省他们的脑力。
组织：通过组织来简化设计
29. 通过组织的方式简化设计，要点在于只强调一两个最重要的主题。
信息布局、分类、排序、搜索、使用颜色分层 (地铁线路图)，找到组织信息的正确方式，可以极大的简化用户体验。要想知道设计是否成功，可以眯起眼睛来观察屏幕，看是否能区分出不同的层。
隐藏：隐藏不重要的，避免分散用户注意力
30. 无论隐藏什么功能，都意味着你在用户和功能之间设置了一道障碍。这个障碍可能是遥控器上的塑料仓门，也可能是网站上一连串的点击。为了避免给用户造成不必要的麻烦，必须仔细权衡要隐藏哪些功能。
31. 不常用但不能少，如个性化设置不会经常改变，因此非常适合隐藏。
32. 隐藏所有需要隐藏的功能，在你需要时出现在合适的位置上。
33. 细微的线索足以提示隐藏的功能。
转移
34. 转移合适的功能到其他设备上、系统组件中，向用户转移。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
B端产品是很容易交互设计不一致的，随着多平台陆续融合为一个平台，暴露的问题就越发明显，因此改变现状便迫在眉睫，此时保证交互设计的一致性就是我们重点要考虑的问题。
目前有很多较火的组件平台，例如：Ant Design 、Element等。由于公司内部一些原因，前端开发会直接使用组件库，没有规范的约束，随意使用组件也是导致平台体验不佳的一点。
由于产品上线后，售后组、业务组经常会反映一些关于体验相关问题，有时只是单一模块进行迭代、改版、完善而遗漏了与它相关联的其他模块，便会影响全局感观。
此时会有人产生疑问，明明平台现存很多样式问题，功能交互不统一，为什么首要不是先快速建立设计规范文档？
因为在没有设计一定量的设计稿之前，所有规范都是华丽的泡泡！前期在设计阶段会遇到很多具体场景化的问题，根据不同的场景会不停的修改，还有多方评审来达到最优方案。此时的设计稿处在极不稳定的时期，自然而然也没什么规范文档可言，因此现阶段要做的工作是找到重点模块进行设计稿基础搭建。
当然设计师在做设计时一定要有全链路的思考和拆解问题的能力，不能局限于单个需求，钻入牛角尖。毕竟B端产品体量大，功能模块多，系统耦合度高，交互设计文档又是一个全局概念，这最基础也是最重要的第一步是非常考验设计师的。
重点模块功能搭建好设计稿以后，可以先让产品稳定发展一段时间。当团队对产品初期有了一定熟悉程度，此时就很适合创建自己的交互设计规范了。
把控视觉统一，减少重复出图，提高效率。在公司有多个设计师协同工作时，可保证体验、设计、交互等等的统一性。
提高设计稿的还原度，根据规范中组件使用情况建立公共组件库，提高复用率，减少返工，极大的提高开发效率。
在画原型图遵循交互设计规范以及排版格式会减少开发在看原型图和设计稿之间产生歧义，当然产品原型图不需要精致，只需按照规定规范中的交互制定即可。
通用组件通过测试后，以后将不在花时间在测试组件交互上，避免了重复工作。
B端最重要的设计原则就是效率优先，保证效率的前提是组件一致，交互及时反馈，以及合理的使用场景。
因此设计交互规范不仅仅只是颜色、文字以及一个个组件的展示，这样的文档对产品、测试毫无意义。规范是由基础容器盒子+组件库+交互状态+正确使用场景组成，在规范中每一项都应标注清楚。
思路：将原子【文字、颜色、控制器等】组合成分子【状态提示、数据展示、数据录入等】最终组合成元素【不同的容器页面、弹窗、抽屉、卡片等】一个一个的元素互相搭配，组成完整的基础平台。
在设计过程中，设计师需要建立适配的概念，根据具体情况进行适配，以及考虑哪些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768，一般常用画板1440进行区块动态适配。
栅格宽度：建议栅格系统的网格大小选定8作为栅格系统的原子单位，目前主流设计屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作为最小原子足够适配。
水槽宽度：根据业务可自定义水槽的值。比如8、16、24、32、40等，经过实践经验，正常情况下，水槽宽度为24时，视觉效果最佳。
非常规设计时：不需要死板的坚持传统栅格系统，根据设计场景可自行修订。
顶部导航栏高度计算范围公式：48+8n。
侧边栏宽度计算范围公式：200+8n。
界面最大可达显示器最大值，侧边导航为定宽，右侧内容随栅格变化而变化。
为保持视觉、交互一致性，统一容器范围。容器是用来收纳原子、分子的，理论上信息不应该超出容器。
以有遮罩基本弹窗为例子进行分析，包括视觉+交互。开发可根据弹窗盒子创建基础容器组件，像素级也可帮助测试进行校准。产品及设计可根据使用场景规范自身，在制作原型以及设计稿时正确使用组件。
按钮用于开始一个即时操作。通常分为基础按钮（分为主按钮、次按钮）、图标按钮、文字按钮、图标+文字按钮，在不同场景下使用不同的按钮达到最佳交互效果。
基础按钮应用广泛，较多人分析这种场景。所以下面主要分享一下图标+文字按钮的基础规范以及使用场景。
录入类由输入框、选择器、单选框、多选框等多种控件组成，基础交互包括（默认、悬浮、点击、失效四种状态）
不同的控件相互组合成信息页、表单页、问卷页等。
基础输入框包括（标题+输入框）根据不同场景有多种情况，下面仅列出交互场景，具体视觉标注不再展示。
平台中反馈机制是非常重要的设计，能及时提醒用户当前操作是否成功，或是失败在哪里，因此不同的场景需要特定的反馈提示。
反馈提示包括（警告提示、全局提示、通知提示、气泡确认框提示、以及tips提示）
下面仅列出交互场景，具体视觉标注不再展示。
文字、颜色、间距、圆角相当于元素中的原子，完整的界面正是由这些原子一点一点组合而成，承载着最基础但也是最重要的一部分，因此规范也要更详细。
产出文档是否能真正落地需要来自多方评审包括产品、技术、测试等，尽量从多角度、全方位来进行审核。
投入开发前，多方评审，各抒己见达到最优方案。
投入开发后，若要优化修改定稿部分，需再次拉通会议讨论，结合当前实际情况将历史问题一次性解决到位，避免遗漏再次造成不统一。
由于篇幅原因，规范只是展开个别案例进行分析。
最终需要落地实现才是最重要的一步，所以我们还有很长的路要走。也要不断进行思考与总结，如何让一致性设计规范更符合设计原则和业务场景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
如果你是一位经验丰富的设计师，你应该会同意这个观点：从他人的作品中获取到灵感并不算偷窃他人的作品。这是属于在对设计进行深入研究呀，这也属于一种设计模式呀，而且还遵守设计规范呢。所以，当然要以用户们所熟悉的那些模式来创造出可用性界面。
不过，有的设计师则会认为，过于遵守设计规范，而且，经常性的从他人的作品中获取灵感的话，自己本身的创造能力就会下降，这就导致了这样一个结果——一天下来，你的所有APP都长一个样。
从交互设计的角度看，我们会发现一个问题。什么问题呢？
习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。
1、隐藏导航
关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。
上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。
但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。
如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。
2、图标，随处可见的图标
由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。
设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？
或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？
你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。
Bloom.fm上让人觉得迷糊的标签栏
如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。
当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)
一些能够被大多数用户所识别的图标并且被认为是通用的
对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。
Pixelmator的导航
对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)
3、基于手势的导航操作
当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。
手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。
Clear里的手势操作
就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)
关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。
另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。
不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。
在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项
同样的手势，在Mail Box中，就表示将邮件存档
或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。
永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。
4、新手引导
新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。
dcovery APP里的新手引导
为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：
原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。
对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。
留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。
记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。
在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。
5、充满了创造力，但是并不直观的空白状态
很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。
有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。
比如下面这张Google Photo的空白状态界面：
第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。
但是，再看一下，就会觉得有写奇怪的东西了：
・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？
・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。
・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”
总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：
・什么是收藏？他们为什么有用呢？
・为什么我什么都没有呢？
・我可以做些什么吗？(我应该做什么？)
当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)
在Lootsy里的空白状态屏
记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。
多问多想
不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。
自己要多想想，多设计，多研究。
衡量，测试，验证——如果能够做得更好，就不要害怕打破设计规范。
作者： 郑小小莊
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com
