当我们回顾近20年的手机发展历程，可以发现2007年iPhone的横空出世真正改变了手机这个行业。乔布斯在发布会上展示初代iPhone给行业带来的冲击力是前所未有的，对人机交互领域也带来了了深远的影响。
任何一个新事物的出现，人们总是倾向于从现有的知识体系中寻找类似的事物进行描述与概括，以寻求情感上的归属和理性上的辨识。但是过于超前的创新，往往是现有的知识体系无法解释的。无法解释，自然无法接受。
文章来源：站酷
在我们设计UI有所疑惑时，可以参照以下标准做法。
这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。
我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。
图中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。
设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。
举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。
因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。
为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。
另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。
以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。
有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。
我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。
我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。
善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。
设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。
Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。
为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。
为什么有些图标元素会被公认为标准？原因有多种。
假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。
另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。
故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。
每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。
善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。
大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。
通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。
设计界面时要善用字体家族。
使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。
选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。
让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？
结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。
在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。
在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。
设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。
—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）
作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。
我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）
如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。
关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。
如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。
Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。
这位Dribble用户，非常抱歉把你揪了出来:/
无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》
所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。
每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。
谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。
对不起了雅虎，在这必须把你当做不好的案例展示
最后，分享给大家一句我最爱的设计箴言：
臻于完美之时，不是加无可加，而是减无可减。
文章来源：UXRen
作者通过从会员体系构成的4个核心要素对“京东、亚朵、支付宝、腾讯理财通”的会员体系进行拆解，发现不同类产品中的设计会员体系需要注意的问题。
一款产品要想持续获取用户价值，前端增长和后端活跃、留存与转化缺一不可。随着流量越来越贵拉新成本越来越高，多数互联网公司开始将用户活跃与留存视为产品核心指标，而会员体系一直以来都是最有效的活跃留存与转化的运营手段之一。
本文对比4款目前付费类产品中比较典型的“京东、亚朵、支付宝、腾讯理财通”的等级会员体系，分别代表4种不同的等级会员体系类型。从会员体系构成的4个核心元素：命名、层数、成长值计算、会员权益，来快速了解一款产品的会员体系。
希望通过这篇文章给在做会员体系抓耳挠腮的你一点启发。
会员命名是品牌文化、用户群体特征的体现，而会员层数的多少则反映了产品转化路径的长短。
京东会员分为非付费会员（下称等级会员）和付费会员两个体系。为了凸显付费会员，2019.9.15日起，取消了等级会员原有的铜银金钻制会员体系，以京享值代替。
至此，从会员命名的角度，京东的会员只有付费会员和等级会员两种名称，等级会员会员之间以京享值的大小进行区分，共分为5层。
亚朵会员在命名方面充分体现了“舒心微笑”的品牌特征，等级会员共分为5级，分别为注册会员（初遇）、银会员（识君）、金会员（知己）、铂金会员（执手）、黑金会员（逍遥）。括号内的短称分别来对应着两句诗词，详见官网的会员介绍。
支付宝等级会员共分为4级，分别为大众会员、黄金会员、铂金会员、钻石会员。从级别数量来说，支付宝会员级别相比于前者少了1级，会员升级的难度也加大了。
腾讯理财通等级会员共分为4级，分别为普通会员、白银会员、黄金会员与铂金会员。颜色区分上，级别从低到高颜色分别为蓝灰色、银灰、金色、黑色，通过灰色调营造理财产品的严肃和专业感。
【注：等级会员是指，会员级别不能直接购买得到，而是要通过完成产品任务升级达到。付费会员是指，用户通过付费购买产品会员特权，购买的会员独立于非付费会员，不是非付费会员的某一级】
通常会员命名会以金属作为主线，其中金、银、钻石等最为常见。
这是用户已经熟知的命名方式，遵循以上规则有助于用户更快的接受会员身份。但如果产品有特殊的品牌文化和目标用户，可以考虑在命名上加入品牌元素，如亚朵。
付费会员与等级会员之间具有重叠性。
高阶的等级会员分散了用户对付费会员的注意力，因此京东最终不得不对等级会员体系采取“除名”做法。
付费会员必然会导致原等级会员体系影响力的削弱，在初始设计时需要综合考虑付费会员和等级会员体系在维系用户、营销行为等方面的价值，做好取舍。
此外，还可以参考亚朵酒店的做法，将等级会员的某一级作为付费对象来售卖，如下图，亚朵酒店将会员体系中的第三级【金会员】单独售卖。
不同产品的会员层数不同。
电商等付费类产品会员普遍采用4-5级的分层、资讯类产品的会员体系可多达10级，如趣头条等；社交、游戏类产品更是根据玩法的不同，设置几十级的会员等级。
会员定级层数主要取决于产品的转化路径长短：
付费类产品转化路径短，用户使用产品就一定会付费，因此只需要根据用户实际消费能力进行用户分层，4-5层即可覆盖用户的全部消费能力。
但社交类产品转化路径长，需要用户长期活跃在产品内才有机会转化付费用户，会员级别需要足够多，才能保证用户有动力持续的活跃和留存。
此外，从成本的角度考虑，付费类产品的会员权益通常为商家的折扣和返利，会员级别越高企业付出成本越高，
级别过多会导致企业难以承担成本，而社交、游戏类产品的会员权益通常为虚拟的勋章、身份象征等，即使会员级别高达几十级，也不会产生过多的成本。
下图是趣头条10级会员的权益，可以看到权益大多数为荣誉勋章类虚拟奖励，企业几乎不需要付出成本。
成长值是用于衡量会员级别的刻度，用户通过获取成长值来达到升级、保级的目的。成长值的获取方式体现了产品主要的运营动作，而计算公式也根据业务变动速度和产品特点有所不同。
分析如下：
京东的主要运营动作包括以下几方面：提高用户消费，促进用户活跃、收集用户信息、建立信用评分体系等。
京东成长值的具体计算公式并未明确给出，因此可以推断其业务调整快，变动幅度大。不公布具体计算公式可以灵活的调整成长值计算公式，但也牺牲了用户的确定性体验。
分析如下：
亚朵对用户的主要运营方向为消费和互动，运营动作主要是围绕着订房和相关服务展开。
成长值计算兼容地区差异：酒店业务通常分布在多个城市，每个城市的消费水平差异很大。若仅仅以消费金额来衡量会员级别，会导致大多数的高级会员都集中在高消费城市，无法实现对二三线城市的用户激励。因此，酒店行业会员的成长值通常结合间夜和消费金额综合计算。
酒店预定更加依赖于用户渠道，包括OTA（美团/携程等平台）、自营渠道、分销商等。不同的渠道企业付出的成本不同，会员体系通常只给自营渠道的用户计算成长值。如亚朵。
分析如下：
支付宝主要的运营动作包括促进用户消费购物、完成生活缴费和增加金融理财。生活缴费任务的成长值奖励较高，可以推测占据用户生活支付场景是主要运营方向
支付宝的成长值计算公式为白盒，这与理财类产品性质相关，由于涉及到用户的金钱投入，更需要获取用户的信任，明确的计算方式能够带给用户确定感。
分析如下：
腾讯理财通的主要运营动作包括促进用户购买理财、激励用户完善个人信息。腾讯理财通的会员任务多达27个，收集用户信息的任务占到1/3，可见完善用户画像为产品的主要战略。
理财通会员成长值的计算公式同样为白盒，清晰的展示用户完成任务能获得的成长值。
（注：数字标记表示用户级别，其中高级会员拥有低级会员的全部权益）
腾讯理财通会员等级礼遇如下图所示：
通过分析会员体系的4个核心元素：命名、层数、成长值计算、会员权益，可以迅速读懂一个产品的会员体系。
一个好的会员体系能够通过选择合适的会员命名、设置符合产品转化路径的会员层数、设计涵盖主要运营动作并能灵活调整的成长值计算体系、提供满足用户核心需求的会员权益。最终形成业务闭环，引导用户价值逐步提升，实现用户价值的最大化。
文章来源：人人都是产品经理
看似简单的登录框，暗藏了多少值得推敲的用户体验？这10个细节，就是你和设计高手的区别。
你不应该让你的用户到处寻找登录区域。他们找的时间越长，就会越沮丧。他们越沮丧，最终登录的可能性就越小。
一个很好的例子就是 Gmail 的登录页面。
你可以确切地知道你需要在何处登录，以及要在输入区域输入什么内容，上面的例子，如果你没有 Gmail 帐户，它允许你通过单击「创建帐户」来轻松地创建一个帐户。
好的用户体验是使你的登录区域明显，使你的用户尽可能容易地进行登录操作。
第三方登录正迅速成为用户登录账户的方式，理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。
通过允许用户使用用户的第三方账户中的信息来创建一个账户，可以解决所有关于这些问题。
让我们来看看下面的石墨文档和MONO登录时的选择方式：
甚至还有更方便的注册登录方式，手机短信验证码在注册的同时登录：
一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录，从用户的角度看，这很明显是一个不好的体验，但是产品的角度去思考就不一样了，产品为了获取用户更多的信息，则需要这样来设计流程。
这种设计流程该不该用，这需要在产品和用户之间进行权衡，第三方与手机短信验证码登录，在提高用户体验的同时，可以提高用户的效率，使界面更加直观。
因为环境不同，在中国很多网页端的网站，第三方登录很的产品很少。
例如，如果你的 QQ 没有在电脑端登录，因为即使选择第三方 QQ 登录，你也要拿出手机—打开 QQ —打开扫一扫，进行扫码登录等一些列的操作。
又或者，当你想要登录 behance，只要浏览器有记录之前的第三登录，点击第三方登录即可直接进入该网站，甚至不用注册。
可以看下面的腾讯网与 behance 的网页登录：
好的登录体验应该只有账号、密码两个输入字段，或者手机号码、短信验证码两个字段，以及使用第三方登录的选项。在简单、的同时，并为用户提供了很好的体验。
如果一个用户来到你的网站进行注册，或者想他们返回登录界面，这就需要让用户清楚的知道他在何处，下一步应该去哪里。
我们通过使用登录字段与注册字段的区别来帮助他们，让我们看看下面的 dribbble 注册界面：
创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册，而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗？
dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口，这样更加清晰明了。
同时可以看看 dribbble 的主页面，他们会把 sign in 与 sign up 的进行区分，在 sign up 加上微边框，让用户能更快区分两者的不同。
让用户用他们的用户名来进行登录真的不是一和很明智的做法，为用户省去记录你产品的用户名的麻烦，应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。
ins 让用户有机会用他们的电话号码或电子邮件地址登录。
反例：
尽可能让用户同时用手机号码或邮件地址来登录，因为用户可能会忘记他们用来登录你的产品的电子邮件地址，所以这时，用户能使用手机号码进行登录。
给用户提供可显示密码的按钮，减少用户输错密码的操作，当输错的同时，可进行对错的字段进行纠正，不用全部删掉重新来。
让我们来下面的脉脉和片刻：
还有什么比再次到你之前登录的网站或 app，却发现你需要再次输入账户密码登录更令人沮丧的事情吗?
当你的用户返回到你的网站时，请确保他们已经登录了，或者为了方便登录，提前为他们预先填充账户和密码等字段。
谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时，他们的登录信息都会被记住，使登录过程更加简单。
盟友银行允许用户勾选 「保存用户名」 复选框，允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法，展示形式可以多样化，可根据自己产品与用户需求来进行把控。
有时你的用户会忘记他们的登录信息。当这种情况发生时，尽量让恢复过程尽可能的轻松。
公众号的账户密码输入栏有记住密码复选框，以防用户忘记他们的用户名和密码，不用每次进来都输入账户密码进行登录。
印象笔记对他们的密码做了一些巧妙的处理，让用户知道他们多久以前更改了密码。
这个小小的提示可以唤起用户的记忆，帮助他们记起密码。
如果用户忘记了他们的登录信息，要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧，你的用户将因此会喜欢上你的产品。
我们都有过这样的经历：令人沮丧地输入和重新输入你的密码都无济于事，结果却发现你一直开着大写锁定键。
可以通过警告你的用户，防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。
让你的移动用户使用无密码登录，现在很多特别是金融类 app，都可以让用户进行指纹登录，因为不像其他 app 一样可以一直保持用户已登录状态，在保障安全的同时能更便捷。
以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。
欢迎关注作者的微信公众号：「设计探」
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
心理学在我们生活中涉及的面很广，是每个行业都要了解的，对于设计师来说，更要了解用户的心理，因为我们的设计是面向用户的
阅读时间：大约9分钟
目录
前言
7±2法则
费茨定律
希克定律
格式塔原则
色彩心理学
冯·雷斯托夫效应
奥卡姆剃刀原理
总结
前言
最近正好在学习用户体验方面的知识，也查阅了相关的资料和文章，输出是最好的输入，所以把整理的相关文档写下了，也是将所学的知识再巩固下，欢迎大家一起探讨。
7±2法则的定义
7±2法则出于美国心理学家George A. Miller1956年发布的论文《神奇的数字7加减2：我们加工信息能力的某些限制》。Miller最早对短时记忆能力进行了定量研究，他发现人的短时记忆能力的广度为7±2个信息块。
这说明人的大脑短时记忆的容量大约为“7”，并在7+2与7-2之间浮动，因此，心理学家把这个神奇的记忆容量规律称为“7±2法则”。由7±2法则我们可以得出，一般人接受新事物的记忆容量大约是7,最多不会超过9。
心理学家Alan Baddeley质疑7加减2规则。Baddeley（1994）翻出Miller的文章，发现那并不是真正的研究报告，只是一次专业会议的讲稿。Miller基本上是自言自语，猜想人能够同时处理的信息量有没有固有的限制。
此外，Nelson Cowan（2001）等研究者也追随了他的脚步。现在研究表明，那个“神奇的数字”其实是4。（无论是7±2还是4，便于我们记忆同时也协助我们工作提升效率就是最好的数字）
George Mandler（1969）指出，人们能分门别类地记住信息，并且如果每个记忆类别里只有1～3条信息，那么人们能够出色地回忆起来。当每类超过3条信息时，记忆效果就会相应下降，每类有4～6条信息时，人能记住80%；储存信息条数越多，记住的比例就越低，当每类有80条信息时，人只能记住20%（如下图所示）。
举个直观的例子，以下随机给出10个词语，你看一遍能记住几个？
桌子 电脑 椅子 水杯 铅笔 地图 绿植 键盘 鼠标 文件
7±2法则的运用
1、组块记忆
为了改善不稳定的工作记忆，人们会采取一些有趣的策略。其中之一就是将信息“组块记忆”。
也就是把数字分为3-4-4来记忆，抖音的登录账号、美团的Dialog弹窗都是遵循的这一原则。
包括现在在生活中，我给别人发手机号码或者是身份证号的时候都会选择这个原则，自己看着也清晰，也便于对方将信息分类。
2、优化选项
网易新闻和今日头条的导航都遵循了7±2法则，更多的信息左侧滑动即可。
3、页面布局
7±2法则还可以帮我们将页面分组，将内容按照属性分类，使页面更有条理性和层次感，用户能的完成自己的操作，例如：饿了么
费茨定律的定义
任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。
用数学公式表达为时间 T = a + b log2(D/W+1)。
T=移动设备所需时长；a,b是经验常量，D=设备起始位置和目标位置的距离；W=目标的宽度大小。
费茨定律的理解
1、设备当前位置和目标位置的距离D越长，所用时间越长；
2、目标的大小W越大，所用时间越短。
费茨定律的应用
1、按钮放大，点击更容易
闲鱼和印象笔记，一个是直接发布闲置，另一个是直接创建笔记，都属于核心功能，将用户最想要或最直接想点击的按钮外漏、放大；增加可点击区域来满足用户的需求。
2、让相关的内容更接近
淘宝、京东的加入购物车和立即购买，在视觉上让用户增加了他们相关性的认知，也减少了两个按钮操作之间的距离和时间。
3、页面的边和脚适合放一些按钮和菜单
安卓手机删除应用时的操作、Potoshop软件顶部菜单等、Mac操作系统的底部应用等，无论我们怎么操作，鼠标都不会超过这些区域。
希克定律的定义
希克定律 — 原称希克海曼定律（Hick Hymalrs 1aw），是一种心理物理学定律。
一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。
希克定律的应用
希克定律的应用很广泛，不仅是在产品上，在生活中也随处可用。
和同事每天都会遇到的问题，一到中午，同事就会问，吃什么？每日一问，看着商场众多美食，真是发愁，但如果她换种问法：我们今天中午吃海底捞还是和府捞面，这样的询问是不是就节省思考和作出选择的时间？
遥控器的设计也是，看到下面两个遥控器的样式，你会感觉哪个好用，很明显是右边小米的遥控器，老人再不用教的情况下就可以自己操作，左边的拿起来我们要花很多时间是研究如何使用，可能刚学会，想进行下一个操作的时候又要去花时间研究，是不是很闹心？
猿辅导APP中，导航默认的是所有的课程，对于学员来说选择自己想要学习的课程，比较浪费时间，右侧的设计就是将我们不感兴趣的课程关闭推荐，剩下的课程大大缩短了我们选择和寻找的时间
格式塔的定义
格式塔（德式造型）是20世纪20年代由德国心理学家提出的一组视觉知觉原理。它建立在“一个有组织的整体，被认为大于其各部分之和”的理论基础上。
格式塔的应用
在我们做设计的过程中，常用的是原则有：简单性、接近性、相似性、连续性、闭合性等
1、简单性原则
简单原理适用于设计中的三角形构图，均衡构图，对称构图，向心构图，摄影中的对角线，X型构图等。这些构图方式都是为了把复杂的信息元素通过简单的方式让观者易于理解。
58同城和爱奇艺首页都是均衡和对称的构图
2、接近性原则
一个页面中，如果两个元素是接近的，给用户的感觉他们之间就有相关性
在支付宝我的页面中，个人信息都是有相关性的，所以放一起遵循了接近性原则
3、相似性原则
我们的眼睛很容易关注那些复杂环境中外表相似的东西，可以利用相似原则组织好界面中的信息和层级关系。
相似性原则在UI设计中也很常见，网易邮箱、腾讯视频都采用了相似性原则
4、连续性原则
人的视觉有追随一个方向上的连续性，以便把不关联的元素联系到一起。
我们在APP中常看到列表也是连续性原则的应用
色彩心理学定义
在自然欣赏、社会活动方面，色彩在客观上是对人们的一种刺激和象征；在主观上又是一种反应与行为。色彩心理透过视觉开始，从知觉、感情而到记忆、思想、意志、象征等，其反应与变化是极为复杂的。色彩的应用，很重视这种因果关系，即由对色彩的经验积累而变成对色彩的心理规范，当受到什么刺激后能产生什么反应，都是色彩心理所要探讨的内容。
色彩心理学应用
黑色：精致和力量
白色：干净、精致、纯洁
红色：勇气、激励、力量；也能激发欲望
蓝色：冷静、安定、信任、安全
黄色：乐观、欢乐
绿色：平衡、可持续的增长
紫色：皇权、精神意识、奢华
橙色：友谊、舒适、食物
粉色：平静、女性化、性
一说到美食，我们能想到的颜色就是橘色，暖色系，因为这个颜色会增加食欲
插播一个知识点：美团外卖选择的橘色，跟美食相关的颜色，我们可以理解，但饿了么平台为什么会选择蓝色而不是暖色系呢？饿了么是以科技为主导的，核心并不是美食，所以选用了科技蓝
在一些电商类网站都会将加入购物车、立即购买颜色设置为红色，因为红色可以刺激人的眼球，来增加点击的欲望，还有微信群和朋友圈的未读，都设置成红色
颜色也是影响人们的情绪，比如长时间在橘色的环境下呆着，会使人焦虑不安，所以一些餐厅在颜色、灯光选择上都会选择用一些暖色系，蓝色和褐色，会使人平静，适合一些酒吧；
但色彩也不能滥用，它是具有联系和含义的，例如：红色代表赤字，即经济困难；也可以代表警告、危险等；绿色代表环保、通行，所以在选用颜色上也要考虑它的含义和意义，要谨慎。
冯·雷斯托夫效应定义
冯·雷斯托夫效应告诉我们，某个元素越是违反常理，就越引人注目、令人难忘。
Hedwig von Restorff在1933年检验了这个理论。她让实验对象观看一系列相似的物品。如果其中某个很特殊，比如说有聚光灯照射，那么相比其他物品，受试者就更容易回忆起这件物品。
比如，下面这个红西红柿
如果你想要让某物引人们的注目，就要使它特殊化，可以通过色彩、尺寸、留白等方式来引起注意
例如：小红色的红色按钮、苏宁易购一套节日气氛的首页
奥卡姆剃刀定律定义
奥卡姆剃刀定律（Occam's Razor, Ockham's Razor）又称“奥康的剃刀”，它是由14世纪英格兰的逻辑学家、圣方济各会修
士奥卡姆的威廉（William of Occam，约1285年至1349年）提出。这个原理称为“如无必要，勿增实体”，即“简单有效原理”。正如他在《箴言书注》2卷15题说“切勿浪费较多东西去做，用较少的东西，同样可以做好的事情。”
奥卡姆剃刀定律的应用
我们在进行页面设计的时候并不是内容越多越好，信息飞速发展的时代，大家都讲究快、效率，我只要通过这个APP尽快达到目的为好，繁冗的功能对用户来说只会降低用户体验感，抖音APP底部的导航开始是文字加icon，后来发现图标会影响整体的效果，因为当视频播放的时候，下面的Tab识别度会降低，经过改版，将icon去掉，文字放大，CTR也上去了，之后小红书就开始参考抖音的改版：我不管你去掉的原因是什么，CTR上去就行
总结
一句话在回顾下文章的定律
7±2法则：一般人接受新事物的记忆容量大约是7,最多不会超过9
费茨定律：A和目标B的距离越长，所用时间越长；A大小越大，所用时间越短。
希克定律：选择越多，花的时间就越多，选择的数量增加，做出决定的时间也会跟着增加。
格式塔原则：常用的是原则有：简单性、接近性、相似性、连续性、闭合性
色彩心理学：颜色也是影响人们的情绪，选用上要谨慎
冯·雷斯托夫效应：某个元素越是违反常理，就越引人注目、令人难忘
奥卡姆剃刀原理：简单有效原理，去繁从简
转自：站酷-麦小兜Sarah
写这篇文章的初衷，是在实际工作中遇到 PRD & DRD 文档，对于一些交互设计图，会产生不理解，或者说在实际落地画图的时候会发现一些前后不一致的问题，解释过于冗余，不清晰。在接触新的业务时，很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。
在传统瀑布式需求分析流程中，我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图，只是了解一下大概是什么类型的产品，很难发现企业产品中真正关键的流程价值点在哪里，或者说也不清楚后续发展的走向，只能卯足了劲去做图做说明，整理完整。时间紧迫压力大，又要照顾整个项目。往往决定产品成功与否的，是产品 20% 的主要功能（二八原则）。所以在面临初期产品设计中，应该将主要精力放在重要功能流程中。
目前，在互联网产品中，敏捷开发是所有产品设计者最推崇的。原因在于，能够对业务、设计、开发更有前瞻性&敏捷性。
产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼，也是设计师需要参与完成的。业务需求是一个比较大的任务，来源可能是老板的要求，可能是产品提出的，也可能是用户的反馈。通过业务需求，我们要分析出相关的业务目标。有个偶然的机会，了解到彩色 UML 的设计方法，在具体实践中，感觉这个方法能够快速适应任何业务流程，简单方便，易懂，并能快速发现业务流程中的问题，加以修正完善。
有幸认识王海鹏老师，他推荐了早年他翻译的彩色 UML 建模一书，作者 Peter Coad，是将彩色和企业组件集成到建模技术之中的第一本书的主要作者，是世界上经验丰富的建模人员之一，他所创建的模型几乎涉及到所有行业。
此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型，给定一种颜色，你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型，并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型，都遵循这个组件所表达的基本形状和职责。
笔者利用彩色 UML 建模的设计方法，用于业务梳理工作，达到了意想不到的效果。以下为彩色 UML 建模基本概念（截取彩色 UML 建模书中的介绍）。
△ 《彩色UML建模书》第9页
△ 《彩色UML建模书》第10页
△ 事例会员注册
定义：ER 图是用来描述现实世界中的实体关系模型，所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。
作用：促使你以最适合技术理解实现的方法，来规范的描述功能模块的核心要素，其实就是数据库的物理结构。而这种描述是无二义的，最清晰传达 PM 的设计思想。
功能结构图就是按照功能的从属关系画成的图表，在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点，分解得最小功能模块可以是一个程序中的每个处理过程，而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说，功能结构图就是以功能模块为类别，介绍模块下各功能组成的图表。
作用
信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。
作用
信息结构图构成要素
定义：产品结构图是综合展示产品信息和功能逻辑的图表，简单说产品结构图就是产品原型的简化表达。
作用：它能够在前期的需求评审中或其他类似场景中作为产品原型的替代，因为产品结构图相较于产品原型，其实现成本低，能够快速对产品功能结构进行增、删、改操作，减少 PM 在这个过程中的实现成本。
业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。
作用
通过业务流程图，钻研关键事件的流程，分析为什么要这么做，探索出更深层次的问题，从而对现有不合理的业务流程进行重组优化，进而制定优化方案，改进现有流程；阐述在项目中各个角色是如何产生相关联系的。
绘制规范/建议
任务流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。
作用：基于业务流程，进行任务流程梳理，阐述角色和程序发生交互的流程，你如何进行操作，系统如何进行反馈。
任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图，但业务流程更偏向于业务限制、后台逻辑等，并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等，从而引导用户完成用户目标。
定义：指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。
作用：
定义：页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。
作用：用例阐释者，用来了解用例的用户界面；系统分析员，用来了解用户界面如何影响系统分析；设计员，用来了解用户界面如何施加影响及它对系统「内部」的要求；类测试人员，用来制定测试计划活动。
构成要素
限制
包含范围值、极限值等。
范围值主要指数据的取值范围。比如，当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围，否则开发人员就不清楚该如何设定，如图所示。
极限值主要指数据的显示限制。比如，最多应该显示多少字数，过时如何显示，是否折行等，如图所示。
状态
包含默认状态、常见状态、特殊状态等。
「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明，否则开发人员可能难以意识到这是用户填完的效果，还是默认就有的。
「常见状态」主要指针对某一个模块，经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块，一般会出现 3 种状态：未登录状态、登录后未签到状态、登录后已签到状态，如图所示。
「特殊状态」一般指非正常情况下的样式、文案、说明等，如图所示：
操作
包含常见操作、特殊操作、误操作、手势操作等。
「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件，在经过不同操作后会立即出现如下的状态。
「特殊操作」主要指一些极端情况下的操作。一般，用户不会这么操作，但是一旦遇到极端情况，还是要想好应对措施，因为对于开发人员来说，不管是正常的还是极端的操作情况，他们都要去编写对应的代码。如下图，是填写用户信息的例子，当不写交互说明时，开放往往会遇到很多问题：如果已经勾选了 2 个人，再勾选第 3 个人，怎么办？如果勾选了「张XX」，下面区块中会相应地出现张XX的信息，那么这时候允许修改张XX的身份证信息吗？假如允许的话，修改后「张XX」还保持勾选状态吗？表单提交后要新增一个被保险人信息吗？若修改的是除身份证号码以外的信息，「张XX」 还保持勾选状态吗？提交表单时是覆盖原存储信息吗？若修改后出生日期、性别与身份证号码不吻合怎么办？等等。
面对各种复杂的情况，一方面要和开发人员积极探讨，看看有没有其他的解决方法可以简化各种逻辑判断；另一方面，在得出结论后，要把交互说明写清楚，避免出现让开发人员感到棘手的情况。
「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示，提示中已告诉用户「库存5件」，如果这个时候用户在「数量」一栏中输入「6」会怎么样呢？系统会自动帮用户将其改为「5」省去用户手动修正的操作。
「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。
反馈
用户操作后得到的反馈动作，包含提示、跳转、动画等。
「提示」主要指操作后，系统反馈给用户的文字说明等，如图所示。
「跳转」主要指点击某个链接后，页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话，需要注明跳转时的转场方式，如图所示。
「动画」主要指用户操作后，系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强，是非常常见的一种反馈形式。比如删除某条信息，该信息以渐变消失的形式告诉用户：这条信息已经被删除了。在移动应用中，动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式，必要时可以制作 domo 动画演示效果给开发人员。
文章来源：站酷
作为UI设计师，我相信大家都是专注于界面设计的好不好看，至于界面与界面之间如何交互，点击之后如何反馈，是一个比较容易被忽略的重要环节。
那么我们怎么处理好界面交互中的加载设计，减少用户因等待产生的焦虑情绪，保证整个体验无缝衔接，今天这篇文章就来总结下APP中数据加载模式设计。
一、为什么要加载？
1、用户在进行某些操作时，都要从后台请求数据，这个过程都需要时间，系统应该始终在合理的时间内做出适当的反馈，让用户了解正在发生的事情，让用户知道此时的操作是有反应，减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣，吸引用户注意力，增加沉浸式体验，让用户轻松自在的享受等待；
2、体验无缝衔接，减少用户跳失，正常的等待加载时间是0.3秒以内，同时不同场景对应有不同的加载方式。
二、常见的加载场景及方式
a.加载场景：
不同场景有不同的加载方式，常见的加载场景一般有以下几种：下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中，要根据不同的场景搭配不同的加载样式，才能更好的做到缓解用户等待焦虑，降低用户的跳失率。
b.加载方式：
1、全屏加载
主要出现在手机H5页面，例如微信的文章详情页。一般会有进度条或有趣的动画设计，减轻用户等待时的焦虑感。加载失败后，页面通常为空白页，且有重新刷新操作按钮。
优点：将整个页面的内容都加载出来才展现给用户，能保证内容的整体性，全部加载完才能够系统化的阅读。
缺点：一般等待的时间较长，容易产生焦躁情绪，尤其是遇到网络不好的情况
2、下拉刷新加载
主要出现在页面内容为推荐类、或者信息更新频次高的产品，通过刷新加载新数据，加载的loading样式可以结合产品logo或IP形象进行设计，增加趣味性，吸引用户注意力。
3.占位图加载
如果页面布局样式比较固定，可以采用占位图加载机制，先加载页面布局和占位图，先给用户展示页面框架，后加载页面图片细节部分，这种加载方式相对于直接展示白屏来说，呈现给用户无缝衔接的感觉，体验更加流畅。
4.分布加载
当页面中有文字和图片时，优先加载占网络资源较小的元素，如先加载文字，后加载图片，图片加载完成前使用占位符显示，保证用户可以顺畅阅读，缩短用户的等待时间，提高产品体验。
优点：可以帮助用户快速阅读内容，了解信息。
这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。
5.自动加载（懒加载）
当浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。对于自动加载，要注意每次加载多少条内容，或者多少屏的内容。一般会在距下面内容一定距离时开始加载，当网速非常快的时候，用户并不能感知懒加载的动作，这样可以营造一种无极限浏览的错觉，很容易的把用户吸引住。
优点：无需用户操作，自动加载后续内容，营造沉浸式体验。
应用：适合feed流、瀑布流、算法推荐类的内容。
6.预加载
提前加载好页面信息内容，这样当网络不好的时候，可直接从本地缓存中渲染，就不用再加载了。
比如用户在看A页面的时候，App在后台加载完B页，等用户打开B页的时候就不需要等待加载了，因为App已经帮用户提前加载好了，给用户提供无缝链接的感觉，弊端就是服务器压力很大，就是要预测用户行为，加载其他数据，这样会消耗不少流量，所以建议在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。
7.渐进式加载
一般出现在图片类产品，比如pinterest、unsplash等，当浏览图片的时候，经常是先看到一张模糊图或与图片较为相似的色彩值图片，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。渐进式加载能够大大的提升体验感。
8.后台加载(异步处理)
用户在前端执行操作后，客户端立即给予操作成功反馈提示，然后把请求放到后台与服务器交互，这一过程用户是看不到的，也不需要等待，体验是非常棒的。
例如在用微信发朋友圈时，会觉得特别流畅，即使在网络不好的情况下，会看到你的动态立即展示在朋友圈列表，并不会提示你网络不好，操作失败，全部以操作成功来显示，其实它只是将你发布的操作记录了下来，等网络一好就将动态上传到服务器，从而完成发布行为，微信的点赞也是同样的操作，你给好友点了赞，并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为会，给用户带来体验流畅的感觉。
所以这种加载方式是需要根据具体使用场景来权衡使用的，对于一些重要的操作，建议还是使用模态的方式加载，对于一些小操作，如点赞、订阅、关注，可采用后台加载的方式。
9.模态加载
以上几种方式都是采用非模态加载，不会对用户造成干扰，用户可以做别的事情，不需要等待加载完成，大大降低了等待的焦躁感。
模态加载对用户干扰比较大，需要中断用户的其他操作，用户只能等待加载结束，因为如果用户执行了其他操作就会打断正在进行的加载过程，实现不了用户的目标。
应用：用户执行的操作本身不能和其他操作同时进行，例如登录，退出，应用启动，手机支付等场景。
三、具体实施方法小结
1、能用非模态加载的尽量不要去用模态加载，如果非得用模态加载，也尽量给一个能取消的按钮，方便用户在不愿意等待的情况下取消操作。
2、如果加载的时间比较长，最好能告知用户加载进度，让用户心理有个预期，这样用户更愿意等待，不会因为等待产生焦虑感，分分钟卸载你的产品。科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计，这是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得很顺畅了。
3、数据加载本身就是很考验用户心态感受，所以尽量通过一些有趣的动画来转移用户的注意力，营造沉浸式体验，同时增加了趣味性，给予了产品人性化的设计。
总结
作为产品设计人员，尽量给用户好的体验，我们应该让产品自己去解决问题，而不是把问题抛给用户。在考虑人与客户端交互的同时也要把客户端和服务端之间的数据传输考虑进来，站在用户、客户端和服务器闭环的角度去思考产品，才能设计出体验更好的数据加载方案。
转自-站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时，显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式，但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则：
简单
首先，最重要的是，导航系统必须简单。良好的导航应该感觉像一只无形的手，引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。
可见
正如雅各布·尼尔森（ Jakob Nielsen）所说，识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用，而不仅仅是在我们预期用户需要导航的时候。
明确
导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标，它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买；此元素将指导他们执行适当的操作。
一致性
所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户，要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。
大拇指设计法则
史蒂文·霍伯在对移动设备使用情况的研究中发现，49%的人依靠一个拇指在手机上完成任务。在下面的图中，手机屏幕上的图表是近似可达图，其中颜色表示用户可以触及的屏幕区域，并与拇指交互。绿色表示用户可以轻松到达的区域；黄色表示需要伸展的区域；红色表示需要用户改变握住设备的方式的区域。
在设计时，要考虑到你的应用程序将在多种环境中使用；即使是喜欢使用双手握手机的人也不一定总是使用多个手指，更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样，通过单手和拇指的交互即可轻松达到目标。
另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。
最后，也是很重要的一点，要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大（135 ppi显示器上的48×48像素，缩放比例为1.0倍）。避免使用小于7平方毫米的触摸目标区域。
触摸目标区域不应小于44像素到48像素（或11毫米到13毫米），包括填充。
标签栏
许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分，允许在功能之间快速切换。
底部导航设计的三个关键因素
导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地，这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。
1.仅显示最重要的目的地
避免在底部导航中使用五个以上的访问标签，因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且，随着每个额外的选项卡显示，就会增加了应用程序的复杂性。
避免使用五个以上的目的地。
避免滚动内容
对于小屏幕来说，部分隐藏的导航似乎是一个非常好的解决方案，因为你不必担心有限的屏幕空间，只需将导航选项放入一个可滚动的选项卡即可。但是，可滚动的内容效率较低，因为用户必须先滚动才能看到所需的选项，因此最好尽可能避免。
该避免在选项卡栏中放置太多项目，以防止用户滚动，然后才能单击所需的选项。
2.明确当前位置
应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里？“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点，而不需要任何外部引导。你应该适当的使用视觉提示（图标、标签和颜色），这样导航就不需要任何解释。
图标
底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标，但大多数图标代表的功能包括搜索，电子邮件，打印等。
在适用于Android的先前版本的Bloom.fm应用程序中，很难理解用户的当前位置。
颜色
避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反，遵循这个简单的规则，用应用程序的主颜色为当前的底部导航（包括图标和任何显示的文本标签）着色。
左：不同颜色的图标使你的应用看起来像一棵圣诞树。右：只使用一种原色。
这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。
如果底部导航栏是彩色的，请确保对当前位置的图标和文本标签使用黑色或白色。
左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。
文本标签
文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签，因为它们不会截断或自动换行。
避免换行，截断和缩小文本标签。
菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。
目标尺寸
使目标区域足够大，以使其易于点击或单击。要计算每个底部导航动作的宽度，请将视图的宽度除以动作数量。或者，将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。
显示了移动设备上的固定底部导航栏，单位为密度独立像素（dp）
标签上的微标
你可以在标签栏图标上显示微标，以表明存在与该视图或模式相关的新信息。
考虑对标签栏图标加微标以保持通俗易懂。
3.使导航不言而喻
良好的导航感觉就像是一只看不见的手，可以引导用户前进。毕竟，如果人们找不到它，即使是最酷的功能或最引人注目的内容也没有用。
行为
每个底部导航图标必须指向目标目的地，并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图，或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件，请改用工具栏。
每个底部导航图标必须通向目标目的地。
上面的控件是工具栏而不是底部导航。
保持一致性
尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。
当选项卡的功能不可用时，不要删除它。如果在某些情况下删除了某个选项卡，但在其他情况下没有，替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有本地文件，则Dropbox应用中的“本地”选项卡将显示一个页面，说明如何获取文件。
Dropbox应用的空状态页面
滚动时隐藏标签栏
如果屏幕是滚动的，则当人们滚动查找新内容时，标签栏可以隐藏，而当他们开始回到顶部时，标签栏可以显示。
标签导航可以在滚动时动态消失。
视觉愉悦
避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。
图形图标：创意导航
屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面，这种导航模式更加节省屏幕空间。
Google Material Design，浮动操作按钮
Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标，并具有运动行为。
像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。
Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时，这些图标也很方便地消失。
然而，这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看，不便于用户频繁点击操作
而且，许多研究人员表明，图标难以记忆，而且效率极低。只有普遍理解的图标才能被很好的记忆（例如，打印，关闭，播放/暂停，回复等）。这就是为什么使图标清晰直观*，并在图标旁边引入文本标签的*重要原因。
导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时，要始终考虑用户角色以及他们的目标。然后，定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用，他们使用它的可能性就越大。
转自：UI中国-Coldrain1
在做交互文档之前，我们先要明白什么是交互文档、为什么要做以及做了给谁看。
交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。
有些人可能对文档这种东西比较反感，尤其是从事工作不久的朋友。其实工作得越久，越会发现文档的重要性，它可以帮助你理清思路，并记录下来，便于回顾。
交互文档其实要说给谁看，其实具体情况具体分析。有的公司老板也要盯交互文档，以及甲方爸爸、运营部门同事，都有查看的可能。
【产品经理】产品经理与交互设计师可能是沟通最多的人，产品经理主要在文档中确认设计思路和业务流程，然后过一下页面交互模块。
【视觉设计】UI设计师通常最关注的是页面交互模块，有着产品思维和体验思维的设计师也会仔细看一下设计思路和产品背景，以便于自己更了解产品业务逻辑和用户心理。
【开发人员】前端的开发同事和UI设计师一样，最关注页面交互模块，其他的作为提升会辅助了解。而后端开发人员关注更多的是业务逻辑、信息架构、操作流程等，这些都清晰了，他们才能输出一份准确合格的开发文档。
【测试人员】因为测试人员是把关产品上线的一群人，所以各个模块、步骤都应该去了解透彻，才能提出有效的bug。
本文主要阐述以Axure软件为撰写工具，大家可以根据实际需求决定用什么软件（Sketch、PPT、Word、PS、AI 等）。比如小需求可以用Sketch，快而。如果是要给甲方爸爸/大老板看的，使用PPT会让他们更好理解。
通常，一个比较基础、规范的交互文档（DRD）由：文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然，这不是绝对，你可以根据你的实际工作需要进行增减。
比如，如果是C端产品的话，用户调研的结论、用户画像、用户体验地图等等，都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下，这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维，大家一起将产品变得更好。
其次，交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理（兼交互），他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要，重要的是里面的业务逻辑。。。其实用产品思维想，交互文档就是交互设计师的产品，而看的人就是用户，保持良好的可读性，可谓至关重要。
交互文档的封面如上图，通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。
我们都知道，在产品的迭代的过程中，需求/功能是会不断调整的。而更新日志，就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块，建议是要加上链接可直接跳转至新增内容的，如上图。
版本号也是同理，都应加上对应的版本链接，便于查看者回溯之前的内容，与当前的新版本形成对比。这一点对开发人员来说很重要，其次对于新同事深入理解产品也能起到很大的帮助。
修改日期，通常是按时间倒序排列，查看起来会比较方便。
文档图例，顾名思义就是关于此文档的一些辅助说明，目的是为了让读者更好地理解文档。如上图的：操作/跳转图例、标签图例、流程图例以及手势操作图例。
因为我今年对接最久的是一个B端产品的项目，所以整理了一个产品画像，仅供参考。
业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。
例如淘宝APP，买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示，多数情况下是由产品经理绘制。
以上是我所负责产品的核心业务的流程图。因为是B端产品，涉及角色较多，针对3个代表性角色分别进行了绘制，仅供参考。(涉及到保密协议，所有关键词都去掉了)
信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。
如果是C端产品，权限这一块相对简单，比较好整理的。B端产品涉及角色众多，可能要单独拎出来分析整理。以上仅供参考，大家具体情况具体分析。若是功能很单一的产品，交互文档中也可省去这个模块。
产品操作流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。
上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载，后台回复“交互”即可。
页面线框图，是通过图形化的表达形式，阐述产品在页面层面的信息。包括：
【页面标题】即每一个页面的对应标题，一般就是导航栏标题
【页面内容】以黑白为主，保证信息规整易读
【交互说明】用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等
【主流程线】只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受
以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记，可以让查看者一目了然更好理解文档。
常用控件类似UIKit，通常将极具复用价值的控制整理在一起，方便及时调用。
文档、软件只是工具，最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻，都应该站在“读者”的角度思考，他们看的时候感受会是怎样的，会觉得很难理解吗？
转自-站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
竞品分析是UX设计师的标准工具之一， 且用户体验设计师的主要交付品之一就是竞品分析报告。在设计一个新的方案之前，我们往往会查看其他类似的产品，了解其他人做的相关工作，希望从中找到任何弱点或者优点，并期望在此基础上进行改进，这将利于你的设计。事实上，竞品分析已经不再局限于一种工具方法，更是一种思维模式，如何对比分析，如何批判性的进行比较以及从差异中获取价值。
UX设计项目会遇到哪些类型的竞争对手？
这个问题可以理解为，我们要分析哪些竞争对手？一般来讲，所有UX项目都面临两种竞争，一种是直接竞争对手，即业务有直接冲突，涉及到具体的利益冲突，商业冲突。例如滴滴和uber，淘宝和京东。另一种则是“间接竞争对手”，往往针对某些相似的产品模块，这里的竞争并没有准确的定义，只是为了比较而给与的一个名称。 例如你在进行自家产品登录注册模块的设计，此时你不仅仅可以研究一些直接竞品，也可以研究其他拥有此功能模块的产品。而该产品与你的产品并没有构成竞争的关系，只是提供了一个参考方向。
为什么要进行比较？
关于这个问题有两个答案，首先，调研竞品发掘哪些功能或服务是他们不能做或者没有实现的，这就是我们的产品可以利用的机会点，以提供新颖的或者说更强大的功能，从而提高产品竞争力。例如顺丰快递首先开创了机器填写快递信息的功能，从而大大提高用户填写订单的效率、准确度和满意度，进一步提高品牌竞争力和服务水平。
其次，检查其他设计师对相同需求的解决方案必然会对你有所启发，有利于你从中获取灵感来优化自家产品。例如信息架构的优化、或者简单地操作流程的优化。参考竞品意味着你可以不断从中学习，把竞品的每个模块、步骤拆解开来，分析其背后的设计原因及它们如何发挥作用，这将有利于你的产品设计。
参考竞品首先意味着你能够达到和竞品同一水平的用户体验，因为有了参照标准相当于指路明灯，竞品的优秀体验也会督促你不断优化自己的产品。但竞品虽然为你创造了一个标准，同时也会限制你的思路和想法，使你可能错过一些更优秀的解决方案，参考竞品能让你追赶别人，但无法让你完全超越他人。因此仅仅复制是不够的，必须融入自己的见解且时刻保持创新意识。
对直接竞争对手进行分析
通常，竞品分析发生在项目的早期，你或许会寻找市面上是否会有竞争对手，然后尝试着从竞品中寻找优点和弱点，以推动自己的产品。如果没有竞争对手时，往往可以从目标用户入手，因为用户实际上拥有自己的解决方案或者说策略，例如在滴滴流行起来之前，对应的用户群往往使用出租车来代替出行方式。目标用户在这之前是如何解决他们的需求的？你应该可以获得一些间接可比的方案，收集用户的相关想法有利于推动你的产品设计。
在产品上线后的运行阶段，仍然需要做竞品分析，此时或许存在一些新兴的的竞品，虽然是后来者，但往往会在交互、体验或者运营策略等方面碰撞出一些新的创意。根据竞品的功能策略，你需要进行一定的调整，不断对产品迭代优化。除此之外，产品有时需要做一些追随趋势的更新，例如视觉风格、新的交互设计语言等。
如何从间接竞争对手那里获得灵感
间接竞争对手也会给你一定的启发，作为一个用户体验各种产品时，留心那些优秀的设计，可能是视觉方面也可能是交互方面，总之这些优雅的设计将会成为你的灵感之源。然而所有的设计都有其适用场景及背后的设计原理支撑，在海外设计经验中一再强调的 context（上下文）就是这个意思。
优秀的设计都是最适合自己的产品和策略的设计，而不是最美观或最的。因为设计不仅仅包涵体验更是要兼顾业务。同一个设计在一个地方发挥作用并不意味着移植到其他地方仍然有效。
例如一个简单的登录模块的设计，按照常规经验，以目前微信的受众数量做参考，可以无脑选择微信快捷登录，这无疑是最便捷的方案，但为什么很多产品仍然采用手机登录？因为一个注册的手机号码能为公司的未来带来极大的增值，每个号码背后都是一个用户，且通过手机号可以对这个用户进行持续的推广营销，如拼多多的短信推广，移动联通的电话推广。
所以，一切的设计都应以设计背景，业务诉求为基本原则来进行，盲目的追寻极限的视觉和效率，盲目的信奉设计潮流趋势都是不可取的。好的设计和时尚的设计不同，好的设计有持久的价值，是美学和体验的结合，并以基于心理学社会学的用户研究为后盾。这样的设计符合用户的需求同时能为企业带来收益。而时尚的设计则会随着时间流逝而销声匿迹。
一味追寻潮流的应用程序设计，公然违背基本的可用性惯例，违背交互设计的基本原理，很有可能在市场中失败。——Prototyper.io UX首席负责人Miklos Philips
竞品分析时谨记五个原则
为了保证你所进行的竞品分析的有效性，需要谨记以下五个原则。
1.理解背后的需求
分析任何设计之前都需要理解设计背后的核心需求，这并不是简单的查看表面内容，除了交互体验上的思考，更要深入产品本身，去更多的理解业务层商业策略等方面的内因。每个设计都有对应的场景、上下文甚至各种限制条件。只有理解这些你才清楚这个设计是否适合你的产品，或者是否有一定的参考意义。
比如观察淘宝的搜索功能你会发现首页的搜索和店铺的搜索有很大差异，即首页的搜索比重要远远大于店铺的搜索。店铺中的搜索按钮仅仅展示一个双指面积的btn，而首页则是展示一个接近通栏的搜索条。那么分析下来，店铺的搜索btn小巧精致，简易美观是否应该借鉴，答案是看情况。淘宝首页入口提供的是一级搜索，涵盖了淘宝百亿级别的商品，因此搜索功能的优先级极高。而店铺商品有限，用户浏览商品往往按照分类，很少使用搜索功能，这种情况下搜索的优先级很低。
因此，理解设计背后的理念，解决的问题、如此设计的原因才是竞品分析重点关注的方向。切记浮于表面。
2.确定真正的竞争者
认清自己的竞争者，他们往往并不仅仅是表面的直接对手。事实上应用程序只是一种帮助用户达成目标的技术手段从用户角度，有很多可选方向，而你的产品想要获得成功，你就要做那个体验最好，满意度最高的选项。回想一下，便利贴的功能应用程序是否能实现？答案是肯定的，但现在为止并没有任何应用程序能够撼动便利贴的霸主地位。因此，滴滴的竞品真的只是其他网约车公司吗，事实上滴滴最大的竞品是出租车。通常，你最强大的对手并一定不是和你一样的科技产品。
3.通过标准来判断，而不是个人臆测
每次进行比较都意味着根据某个标准来进行判断，如何决定两者的功能孰优孰劣，最好的方法是引入标准或者用数据说话。例如竞品某个模块转化率高，那必然有其内因。另外，我们可以根据业界的标准来评判产品的可用性体验，如尼尔森的启发式评估原则（后面会详细讲到）。
4.盲目模仿是导致失败的罪魁祸首
在特定环境中行之有效的方法在另一环境中可能根本行不通。每个设计解决方案不仅是针对眼前的问题，而且还针对目标受众。请记住，良好的设计是仔细的分析研究产生的，需要付出大量的努力来与用理解用户，定义问题，并 根据上下文构思，最终产出最终设计和评估解决方案。
你可能会说，别人已经验证了的功能，我们没必要花费时间去重复测试，但他人的功能是针对特定的场景特定的业务目标，或许并不适用你的产品。所以，在模仿之前，请仔细考虑您的问题与原始设计师的方案匹配程度。
5.用户测试无可替代
在竞品研究中我们需要时刻保持怀疑的态度，在将竞品的设计应用于自己的产品之前，需要评估设计背后的需求、场景，以判断会否适合自家产品。这个过程可以没有用户参与，例如选择专家进行的可用性评估。但最终，在你决定将设计投入自己的产品时，你需要意识到只有真实场景下的用户测试，才能判断该设计是否成功。
无处不在的“汉堡菜单”按钮。最初是Facebook率先取得成功的设计，现在有大量证据表明该设计带来了很大的可用性问题。通过将图标与其他导航方式（例如ios的菜单导航）进行比较的A / B测试，发现了这些问题。
时刻留意竞争对手的产品设计有利于你不断更新和迭代，从而保持竞争优势，但你必须知道，研究竞品只能让你和它处于一个水平，他不会教给你如何开辟新的想法，如何解决未解决的问题。并且能从竞品分析中收获的有效信息完全取决于你的个人能力和经验。因此保持质疑，持续思考，以创新意识探索更可能是UX设计师长远的目标。
NNG的十项UI界面启发评估的原则
前面提到我们应该通过标准来衡量产品的设计，而不是个人的主观臆测。尼尔森的启发式评估原则就是这样一套可实践的评估标准，共有十项，主要涉及到用户体验、可用性的评估。使用这是个标准能够评估出大部分的可用性问题。
1系统状态的可见性
任何情况下都应该显示易于理解的界面信息和系统状态，以保证用户正确执行操作。
这其中其实不仅仅要求“可见”，也要求“隐藏”。因为系统界面的展示目的是使用户易于理解其中的信息，因此要清晰展示有效信息，同时隐藏无效信息和干扰项。概括来说这一项原则的关键在于视觉传达的效率，如CTA按钮高亮来聚焦注意力，文字链按钮添加下划线或箭头来传达可点击的状态等。
2.系统与用户习惯的匹配
设计师应根据目标用户的经验习惯进行界面设计，如使用符合用户认知的语言、概念、预测用户的常规行为方式如单手操作，减轻认知负担，并使系统更易于使用。
在电脑屏幕右键弹出的菜单窗口恰好在鼠标附近，因为用户当时视觉聚焦于此。移动端阅读类产品的目录按钮总在右下角，因为大部分人使用右手单手操作，而在IPAD端的阅读产品，目录置于左下角，因为用户一般需要双手持设备，此时左手点击目录更符合用户习惯。
当然，不仅仅要考虑用户操作习惯，更要考虑用户的心理预期。这就要用到隐喻，例如按钮按下后模拟出下沉的视觉效果，再如最早的阅读类产品模拟真实书架，还原用户习惯的书架浏览查找书籍然后阅读的体验。
3.用户控制和自由
产品应该允许用户自由控制自己的操作行为，例如可以撤销重做，或在不同内容间自由跳转。
4.一致性
界面设计人员应确保在相似的平台之间维护图形元素和术语的统一。例如，代表一个类别或概念的图标在不同的设备上使用时不应代表不同的概念。垃圾桶应当代表删除、回收等操作，而不是其他的语义。
5.防错
提前预测可能发生的错误，尝试尽量避免它们，将潜在的错误保持在水平。用户不乐意处理错误同时不擅长处理错误，为了减少用户遇到错误的，试着消除问题部分。例如验证码部分只允许填写数字，且自动唤起数字键盘无法切换字母键盘，这样就防止用户输入错误信息格式的可能。
6.降低用户认知负荷
人类注意力是有限的，不要尝试一次行给用户灌输过多信息，试着一次只展示一个核心功能或内容，每个步骤只用来做一件主要的事情。目前主流的注册流程都遵循这个原则，一次只进行一个步骤，输入手机号、发送验证码、填写验证码、登录成功。
7.灵活性和效率
使用更少的交互，让用户更便捷的完成目标，例如使用缩写、语音输入、自动填充等技巧。目前有些产品通过自动填充手机号码来提高登录注册效率，或自动填充短信验证码来提高验证效率，这就是一种优化交互来提高产品使用效率的方式。（但这种方式对权限要求较高）
8.美学原则与极简设计
减少混乱和多余的元素，不要争夺用户注意力，提供清晰可见的导航。根据海外的调研，有三到四成用户离开一个网站的原因是导航混乱不易理解。
9.帮助用户识别、诊断错误并恢复
采用通俗的语言解释错误的情况并提供解决方案或说明情况。
10.帮助文档
我们期望不需要说明文档（类似说明书）也能让用户正常使用和产品和解决遇到的问题。但我们仍然需要一定的说明文档，来解释特殊情况或常见问题，以保证用户在需要时能轻易找到解决方案。
文章来源：UI中国
蓝蓝设计的小编 http://www.lanlanwork.com