做一全套的APP设计，流程是：
1、界面设计：设计IOS界面；设计Android界面。
2、切图：切IOS的2倍图和3倍图；切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图。
3、标注：以px为单位标注IOS界面的尺寸；以dp为单位标andriod的尺寸。
----------------------------------------------------------------------
IOS端_界面设计
————————
一、界面设计：
1、【界面分类】：IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。
2、【设计方法】： 以iphone8为标准进行界面设计，让开发进行适配。即750px*1334px以基准（72像素\英寸）。
3、【设计标准】：750*1334界面——状态栏40px； 导航栏88px；标签栏98px；工具栏88px；文字最大34px; 最小18px；常用28px。
————————
二、切图：（所有开发写不出来的都得切，如icon, 默认头像，背景图等）
1、【切图尺寸】：IOS 只用切【二倍图】和【三倍图】。注意：有些button, 需要更改颜色，切一个“被点击的状态”（如btn-xxx-pressed@2x,btn-xxxx-pressed@3x）。
2、【切图命名】：如btn-xxxx@2x,btn-xxx@3x(按纽); img-xxx@2x,img-xxxx@3x(图像); bg-xxx@2x,bg-xxx@3x(背景图)
3、【方法一】：【photoshop图层-右键-导出为...】
设置大小（@1x+@2x)；设置好icon的画布尺寸（如导航栏上的几个icon的画布尺寸应保持一致）
【方法二】：【sketch-选中icon-右下角-make exportable】
（如需切相同尺寸的icon，需建立相同尺寸的画布，并选择整个画布整体导出）
————————
三、标注：
1、【标注内容】：颜色＼长宽＼字号＼距离；
2、【标注单位】：IOS的标注以px为单位进行标注。（注意：数字最好为偶数）
3、【标注软件一】: 标注神器－parker/markman，标注前请在“设置”里将单位改为px；
【标注软件二（强烈推荐）】：zeplin软件——无需标注，只需将界面导入zeplin，开发直接访问zeplin，即可查看所有的尺寸、间距、色值、字体、字号等。
下载地址：https://zeplin.io/，软件图标和界面如下：
Android设计：
————————
一、界面设计：
1、【界面分类】：Android的尺寸非常多，非常杂。总的说来，就分为这几种模式：idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。
2、【设计方法】：以xhdpi为基准进行界面设计，让开发进行适配。即以720px*1280px为标准(72像素\英寸)。
3、【设计标准】： 720px*1280px界面——状态栏50px, 导航栏96px，标签栏96px，工具栏96px，实体键96px；文字最大36px;最小18px；常用28px。
————————
二、切图：
1、【分类】：Android 的切图需要切三个尺寸的：hdpi, xhdpi, xxhdpi。
2、【方法一】：切图神器－cutterman，也可以一键切出hdpi, xhdpi, xxhdpi三个尺寸的图, 而且还可以切出“点九图”。
【方法二】：photoshop、sketch、illustrator皆可直接导出icon。
————————
三、标注：
1、【单位】：Android的标注以dp为单位。（parker里, 在“设置”里将单位改为dp）
2、【标注软件】：同上，推荐zeplin软件（建立文件夹时需选择安卓版本）
----------------------------------------------------------------------
补充 _ 2019/4/10:
目前流行的是以【一倍图】的分辨率来进行设计，也就是sketch、PS、AI上给的分辨率：
iPhone 8的分辨率是750*1334，而sketch、PS、AI上iPhone 8给的分辨率是375*667.
意思是设计平台鼓励设计师用一倍图来设计，一方面是因为开发环境是以一倍图的环境来开发的，因此一倍图的设计稿无需开发再进行换算。
另一方面是icon导出时：@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整数换算。
所以推荐大家用【一倍图】的分辨率来设计。icon切图分别导出2倍图和3倍图供开发使用。（而且sketch提供的IOS控件也是1倍图的尺寸啊～～）
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：郑每每
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
作者：神之一招
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
写在前面
B端产品和C端产品作为两种很不一样的产品形态一直服务着广大的用户。它们各有各的作用，有很多B端产品还是一个非常庞大的系统工程，甚至有很多的公司就是专注于开发B端产品，我从业以来曾经参与过很多的（两位数）B端产品项目，有的是从0到1的开发，也有的是在原基础上更新优化，下面就从我个人的设计经验整理出一些观点。
什么是B端和C端产品
概念：B端面向商家和公司，组织；C端面向普通的大众用户；
B端是指：business--泛指生意，商业，公司和组织； To B即是面向商家和公司，组织，是给专职专业的用户使用的产品，例如微信公众平台给制定的公众号持有人使用，某公司的指挥调度系统，某停车管理系统，以及相关的后台管理系统等。C端是指：consumer--消费者，顾客，用户，是指被设计为能给普通大众使用的产品；To C即是面向普通的老百姓用户，例如微博，QQ，微信，新闻客户端，淘宝等；
几乎男女老少都会使用的微信
面向专职岗位人员使用的后台管理系统
两者的不同点
C端产品追求极致的体验，；B端产品追求简约、高效的完成工作
C端产品是为了满足用户某一主要的、固定 的核心需求，因此设计的目标是围绕着这个核心需求，简单直接解决用户的需求，追求的是极致的用户体验，因为对C端产品而言，产品不好用，体验不好，用户就流失了，也就没有盈利的可能了。
B端产品的目标是帮助用户把大量的复杂的工作，整理归纳，使得他们能高效便捷的完成工作，追求的是产品的简约实用，提高效率，能很好的处理工作，有时候为了达成业务目标，甚至不惜牺牲部分用户体验。
To B端界面的设计应该要重点注意什么
很多新手设计师在接到新的需求的时候会没有头绪，不知道如何开展工作，在不了解业务的前提下很多时候被产品牵着鼻子走。那么问题来了，是拿到产品给过来的原型之后就开始设计了吗？又或者没有原型只有一些简单的描述，又该如何开展呢。以下是我的几个建议
1，要了解业务
因为B类产品不同于C类产品，并不是大多数人日常都会很普及用到的，所以就需要设计师主动的去了解行业，了解业务需求，不同的行业有不同流程和规则，甚至是一些特殊的需求；启动用户群体调研和用户使用场景调研，有条件的可以开展用户问卷调研甚至面对面访谈，整理出用户的使用流程，调研后要求设计师自己能非常清楚这个产品的作用、用户人群、和在特定的使用场景下的使用目标、和不同情境下的操作流程等。
2，交互流程设计
B端产品往往包含了比较复杂的业务，那在复杂的业务背景下如何通过设计来提高用户的工作效率，这就对设计师有比较高的要求。在交互流程上要整理出一些操作路径，要考虑它们的层级关系，先后顺序，行业习惯等。通过操作体验给用户留下明确的印象，可以降低用户的学习成本，提高产品的易用性。
To B端界面的视觉设计
①、界面布局，分固定的和自适应的分辨率两种，一般来说自适应的布局比较适合操作和展示内容比较多的系统，固定的宽度的分辨率的布局一般多用1200px以适应适配更多低分辨率的显示器，现在的大屏幕设备非常普及了，很多系统转为以1400px的宽度来设计，至于用哪一种的布局要取决于产品的功能了。
界面布局视觉上的区分；当我们设计一个系统的主页到时候，B端产品通常会分为很多功能模块，即便产品经理会提供原型给UI设计师，他们有时候往往会在原型按照他们的想法来布局，这时候设计师需要主动地去了解业务去弄清楚各个模块的主次之分。通过调研后，整理归类任务模块，按照业务流程和规则来区分模块优先级。（图例）
②、颜色，B端系统的界面颜色也非常考究，按照系统的功能特性来定，一般常规的系统界面都是以白色底色配以一种主色调的颜色来搭配的；第二深色的底色界面，深色界面能起到一种很好的衬托界面内容（如大量文字，数据，图形，视频等）的作用，深色界面再附以一些点线面和光的元素就能营造出一种炫酷的科技感。三是现在流行渐变色，渐变色和纯色会给人一种缤纷，轻松愉悦，有活力的年轻的感觉，所以大家在设计不同的B端系统界面的时候要考虑产品的功能性质来选择用颜色。
③、导航，导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。一：侧栏导航：可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于复杂的、功能多的中后台的管理型、工具型网站。二：顶部导航，顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度
④、按钮，通常B端产品分为较多的功能模块，也对应有很多不同的按钮，在设计按钮的时候，我们第一要分清楚哪些按钮对应哪些功能，在设计上要做出区分。
⑤、表格，表格的设计遵循简洁和易读性为主，表里面的文字内容是主要的设计重点，例如信息层次的明确、对齐的原则等。
⑥、弹窗，不仅有操作反馈的作用，同时又是一个承载更多的操作功能的容器，弹窗的设计要有规范性，组件化。
视觉设计方面除了常规的设计流程，我想说的是综合考虑和相关的系统衔接，体验的一致，视觉风格的统一和品牌的建设。
设计师还能做些什么
虽然设计师和产品经理以及开发已经沟通过相关的业务需求，但设计师一定要懂得切换角度来看待问题，一方面设计师的视角相对注重视觉上和交互上的设计细节；第二我们也要懂得站在开发和产品的角度考虑，哪些效果能不能实现，也是需要我们和开发同事密切配合的；另一方面要更加注重代入用户的角度来思考，这样才能做出合理适用的设计，甚至能挖掘新的需求，提出一些很好的建议，给产品和项目带来加分和利好。
总结
因为B端产品业务需求，用户目标，使用场景和用户群体都不相同，所以设计师接到B端产品的设计需求时一定要先了解清楚业务，做好前期调研，其次要多站在用户的角度来看待和设计产品。其实C端和B端产品，它们都要求要简单实用和有效准确，都是为了更好的满足用户的需求，解决用户的痛点。做好了以上这些关键点，无论遇到多么复杂的B端产品，我相信所有问题都会迎刃而解。
作者： chrisHCZ
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
“先有思想，后有设计”设计师自身应该逐步建立一套自己的设计体系，需要对设计方法论有专业的认识和理解。一直想收集整理日常说到的各类设计理论知识，也希望通过整理和总结能有新的收获，加深记忆。
格式塔心理学是视觉排版及设计中应用比较广泛，主要指人的眼脑作用是一个不断组织、简化、统一的过程，正是通过这一过程，才产生出易于理解、协调的整体。格式塔的理论核心是整体决定部分的性质，部分依从于整体，人脑知觉到的东西要大于眼睛见到的东西。
古登堡法则是又称对角线平衡法则，由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
1.第一视觉区(Primary Optical Area)：左上方，读者首先注意到的地方。
2.最终视觉区(Final Optical Area)：右下方，视觉流程的终点。
3.强闲置区(Strong Follow Area)：右上方，较少被注意到。
4.弱闲置区(Weak Follow Area)：左下方，最少被注意到。
通过古登堡法则我们知道用户的视觉中心往往在页面的左上方，而结束浏览时视线往往落在右下角，所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。自上而下的界面设计，自左向右的界面设计，页面中通常将操作按钮放在右下角。
菲兹定律：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。意味着小而近的目标用户不需要花费太大的精力就能轻易触及或者关注，相反小而远的目标则需要花费用户更多的时间和注意力，菲兹定律阐述的是效率相关的问题
思考结论：1.必要时让按钮更大，2.让相关信息更近
希克定律：一个人面临的选择(n)越多，所需要作出决定(t)就越长。用数学公式表达为反应时间T=a+b log2（n）。在人机交互界面中选项越多，意味着用户作出决定的时间越长。如比起2个菜单，每个菜单有5项，用户会更快从有10项的1个菜单中做出选择。席克定律在产品应用中主要用于通过合理的选项及功能规划提高用户的决策及完成任务效率
应用场景：
1.分类编组，提高决策效率
2.过滤选项，隐藏/删除低频率功能选项
3.分布执行，提高流程转化率
米勒定律：头脑最好的状态能记忆含有7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。米勒定律在产品应用中主要在于合理的信息布局和信息处理可以提高用户对信息的获取效率和记忆难度。
应用场景：
1.控制数量，减少用户选择
2.信息分段，辅助用户记忆
3.流程分步，优化用户操作
4.信息排序，引导用户记忆
临近性原则：当对象离得太近的时候，意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框，用户会理解为按钮于文本框有关联性。换句话说当相互靠近的功能块是不相关的话，就说明交互设计可能是有问题的。
泰斯勒定律（复杂守恒定律):该定律认为每一个过程都有其固有的复杂性，存在一个临界点，超过了这个点过程就不能再简化了，你只能将固有的复杂性从一个地方移动到另外一个地方。
应用场景：
1.合理缩短用户使用路径，在设计中可有适度的简化缩短操作流程但是到一定的程度可能会影响整体的功能和价值。
2.将固有的复杂性从一个地方转移到另一个地方，例如搜索中历史记录，信息商品的收藏等功能，实际都利用了此定律。
3.将功能进行拆分，一次性无法降低复杂度的功能可以进行拆分。
奥卡姆剃刀原理：奥卡姆剃刀原理只承认确实存在的东西，认为那些空洞的普遍性的东西都是没有用的，应该剔除掉，概括起来就是“如非必要，勿增实体”实际上无论实体、视觉或认知上，多余的负担都会削弱表现效能，去除解决方案的杂质，让最后的设计会更严谨、更纯粹。在设计苹果产品的时候，乔布斯一直坚持认为：为了实现一个功能而造出一堆复杂的东西，没用，简单的才最好。Google专注于搜索，主页上也只有搜索，其他搜索引擎就没有做的这么彻底，这也是为什么Google用户量最多的原因之一。
防错原则：最早应用于汽车制造领域中，工程师新乡重夫（丰田精益生产庄家）于上世纪60年代，创造了这个理念。防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽，例如硬件设计上的 USB 插槽，酱油瓶口。防错原则有四项基本原则包括，轻松原则，简单原则，安全原则和自动原则。
状态可见原则：保持界面的状态可见，变化可见，内容可见。让用户知道发生了什么，在适当的时间内做出适当的反馈。 比如用户在网页上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。
贴近场景原则：用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例来呈现信息，功能操作符合用户的使用场景。进一步来说贴近场景，也是要求在设计的时候要考虑，产品面对的人群和人群所在的环境，比如，同一款产品在不同地区呈现形式需要考虑文化差异。不同属性的产品例如儿童教育和办公产品，需考虑使用人群的特性。
可控原则：操作应该是可逆的，可以支持“撤销”和“重试”，以此来离开“非预期” 的状态，简单来说就是不要让用户走进死胡同，提供出口和退路。例如微信发送消息可以撤回可重新编辑等。很多web端的表单，文章发布等都支持自动保存，很大程度上避免错误或者意外操作。
一致性原则：遵循平台的惯例。也就是，同一用语、功能、操作保持一致。
防错原则：核心观点是如何有效的在用户出错之前就尽量避免错误发生，在互联网产品中，比起回退修改错误信息或者操作更好的是，用设计防止这类问题发生。很多转账功能中输入数字后会显示千万等说明文字，用户输入卡号后会自动识别关联银行，避免用户出错。
1.限制操作范围和条件。例如很多手机登录等交互中默认设置手机号为11位避免了用户出错，提高了易用性。
2.对有风险的操作进行二次确认。
易取原则：尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。 很多产品搜索功能的关键词联想搜索，即使用户不能完全记住关键词也能轻松搜索。
1.让用户选择而不是输入，选择和输入的操作成本相差巨大，产品应给给用户提供选项，让用户可以直接选择，而不是自己输入，比如填写收货地址。
2.自动读取、记录信息、减少操作路径。在用户使用产品的过程中，会产生一些需要记忆的内容、或者操作路径，这个时候我们要避免用户记忆，把信息直接提取出来，送到用户手里
高效灵活原则：为大多数用户设计，兼容少部分特殊用户。允许用户进行频繁的操作，更加便捷灵活的代码和反馈。各大产品中常使用的搜索功能，提供历史搜索功能。微信朋友圈发布中选择可见/不可见人群时，提供上次选人记录。
1.提供快捷入口，例如支付宝的首页可以自主配置常用的小程序，微信下拉对话页面可以快捷进入历史小程序
2.方便用户重复操作，例如外卖平台中自动定位常用地址，订单中可以再来重复的一单等
3.预知用户操作缩短操作路径，例如截图后打开微信对话框会关联截图发送
简约原则：审美和简约设计，页面不应该包含无关紧要的信息，页面的每个额外信息都会降低主要内容的相对可见性。
容错原则：错误信息应该用语言表达（不要用代码），较准确地反应问题所在，并且提出一个建设性的解决方案。比如404。
人性化帮助原则：有必要提供帮助和文档。任何信息应容易去搜索，专注于用户的任务，列出具体的步骤来进行。帮助性提示最好的方式是：1、一次性提示；2、常驻提示；3；帮助文档。
通过这些方法的总结归纳，我发现其实很多原则原理我们在平时的设计中有意无意的总会用到，在实际工作中设计很大程度上是做选择，哪一种是对产品对用户最优的方案，有的设计师可以通过自己的经验作出选择，没有经验的可能需要多多理解这些原则原理，交互设计之父阿兰·库珀说过“除非有更好的选择，否则就遵从标准”只有反复的遵循使用标准才能建立自己的一套设计方法论，让工作更加得心应手。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
来源：站酷
作者：有鱼MUMU
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
“少即是多”是经常挂在嘴边的话题，在设计过程中，设计师们都会想尽一切办法去简化交互流程、组件元素及各种设计属性，让用户使用起来更简单。当产品简化到一定程度，就必须要面对其不可简化的复杂性。
诺曼曾说过 “复杂是世界的一部分，但它不应该令人困惑 ”，如果复杂性是合理的，我们应该学会如何去管理复杂，考虑好复杂的问题在流向用户后以何种方式处理，筛选控件就是用户自行处理复杂信息的方式之一，只要是符合用户行为做出的设计，将应有的复杂以筛选的形式呈现给用户，让其自行决定，用户反而会乐意接受。
筛选控件的使用频率非常高，本文根据笔者对各类筛选控件的拆解及自身经验进行分总结，整理了在移动端中常用筛选控件的类型、使用场景以及设计思路，帮助大家在设计中更好的选择适合自己产品的筛选控件。
一、现实生活中的筛选
二、筛选功能的重要性
三、常见的筛选类样式
四、筛选的几个维度
五、筛选功能设计准则
六、总结
在日常生活中，我们天天都在跟筛选打交道。设想一下，当你走进超市，在没有任何分类指示的情况下，看到琳琅满目的商品是否会不知所措，答案是肯定的，且不论超市规模大小、商品的多少，相信没有任何一个人愿意在不清楚的情况下花时间去找一个很可能不存在的商品，即便这点时间会很短。
道理还没说完，大家都感觉自己很懂，可依然逃脱不了如今在各种形形色色的应用中找不到自己需要的功能而苦恼，那么这些应用又是谁设计的呢？答案就是「大多数人」。
换言之，如果我们能通过标识牌、平面图指引（模糊查找），询问服务员、记忆指引（精准查找），就容易很多，这些指引路径就完全充当了筛选功能，至于通过什么方式，只能根据人们自身或现场条件自行选择，能满足自己的需求即可。在功能繁多、交互流程复杂的互联网产品中也是如此。
在我们设计筛选控件之前，需要清楚了解什么是筛选，东施效颦不是什么明智之举。筛选，即用户根据自身需求、通过一个或多个特定条件，在已有的内容中快速找到满足自己当前条件的信息，单独呈现的同时、并将未满足条件的信息暂时作隐藏处理，以便用户完成自己的目标需求。
筛选也可以称之为过滤器，是搜索框架的一部分。这里需要说明一点，筛选不同于搜索，它是系统结合用户提出的条件，对内容进行规则性的查找，准确的说，用户属于被动，筛选出的结果在产品侧「精准」、用户侧「模糊」；而搜索则是用户通过明确的目标主动进行精准查找，要么直接找到自己想要的结果、要么对结果不满意，搜索出的结果在产品侧「模糊」、用户侧需要「精准」。说直接点就是，搜索直接查找出结果、筛选只是缩小查找范围（并非绝对，也可以对搜索结果缩小范围）。
在电商应用中，如果有目标的用户更多使用的是搜索，那么没有目标的用户更多使用的则是系统推荐或商品分类，不管是哪种类型的用户，前面虽然已经进行过一次范围缩减，但下一步还是逃不掉要面对的海量商品，这时，不给用户提供选择上的便利，用户很可能因浏览商品耗时过长、选择性困难等原因扭头就走，即便离转化仅一步之遥，也无法避免用户流失的问题。
增加筛选功能就能很好解决这个困局，用户通过筛选、设置接近于目标需求的条件，缩短查找路径，就能从海量的商品信息中快速找到符合条件的内容，大大降低了用户的查找成本，节省了很多查找时间，用户体验得到很大程度的提升，由此可见，为什么要使用筛选，不言而喻。
1）系统定义筛选需求
方向性的筛选：用户通过系统提供的多种类型进行频道切换，还会存在多少子级，可定义为一级筛选。例如订单列表（待支付/待发货/待收货/待评价），优惠券（未使用/已使用/已过期）等，用户从已有的类型列表中选择自己所需。
2）用户自定义筛选需求
精细化筛选：当系统已提供方向性的筛选，用户依然可从分类筛选出的结果中进一步细化。例如针对单个类型的商品列表自定义价格区间、发货地、品牌...等，也可称之为二级次筛选，相比一级筛选，其筛选的结果会更精细化，也更接近于用户的真实需求。
（PS：系统定义筛选条件后，配合用户自定义二次筛选条件以及排序功能，则更容易满足用户需求）
Tab式筛选条件大部分在操作前、操作中、操作后基本都会一直显示，有横向Tab和纵向Tab两种，如新闻、视频类型的应用大多使用横向Tab，通过将不同的内容以大的方向、区块进行分类，便于用户随时切换、筛选出不同的内容；纵向Tab更多则是在电商类应用中出现，且会存在多个子级，例如我们在京东购买「鼠标」，则需要在tab分类中依次找到「电脑办公>外设产品>鼠标」进行筛选。
Tab类型主要以大的维度进行筛选，所筛选出的结果可能模糊且信息量极大，如果想要结果更加精准，则需配备其他类型的控件进行二次筛选。
操作中以蒙层的方式弹出，其他时候均为隐藏状态。弹窗类型的筛选最大的优点是占用空间小，仅需一个入口，能在有限的弹出空间中从多个维度展示筛选条件，用户选中或自定义对应的筛选项，即可快速筛选出自己想要的信息。
介于Tab式与弹窗式之间，筛选条件初始为隐藏状态并提供一个入口。点击后展开，期间不影响当前页面的任何其他操作且一直处于展示状态，需经过再次点击才会将筛选条件隐藏。
基于自定义筛选条件过多，为满足用户个性化需求，点击后会跳转到新页面操作多个条件进行筛选。相比前面提到的Tab、弹窗更为复杂，对筛选的要求较高。
高级筛选适合用在颗粒度很细的场景，为的是避开其他视觉元素的干扰，让用户更专注于当前页面较为复杂的筛选条件，降低因受其他因素影响而出错的情况。例如：在选择汽车时，需要对服务、价格、级别、排量...等各种情况作出非常细致的选择，这时用高级筛选就再合适不过。
筛选、排序组合方式算是商品列表中的标配了，尤其在空间资源有限的移动端设备中，能最大化的将多个控制条件一次性展示给用户，在筛选出结果后再使用排序功能，便于更快找到想要的商品。例如美团、饿了么将筛选与排序控件形成组合，极大的提高了用户筛选的效率。
单维度的筛选不管是设计还是操作都相对简单，无需操作确定/下一步按钮，触发筛选条件后会就会更新信息列表，大家最熟悉的订单系统（待支付、待发货、待收货...）即是单维度筛选。
另外，单维度具备短、明、快的特点，为方便用户识别，单个标签一般不超过5个文字，且语义明确，用户不用任何思考就能快速理解。
当产品中的属性过多，使用单维度筛选不仅会降低筛选结果的精准度，还可能会导致用户因反复/重复无用的操作而产生挫败感，已无法满足用户的需求。这时，需采用多维度筛选帮助用户缩小查找范围，让其快速找到符合自己需求的内容。
多维度筛选条件一般以按钮（单选/多选）、输入框为主，有些还会以滑块来控制数据范围。设定好筛选条件需通过重置、确认操作按钮，用来清空筛选条件或进入下一步。在移动端，因屏幕空间有限，一级筛选数量最好不要超过9个，如果太多，建议进行整合或并入二级筛选。
在多级筛选控件中，可以把当前筛选条件的上一级看成是筛选分类菜单，每个等级中可包含一个或多个单维度/多维度的筛选条件，移动端最多不超过3个等级。
从表面看，多级筛选与多维度筛选其本质是一样的，但多级筛选会存在下一级或再下一级，而多维度会将所有筛选条件平铺在空间中。当单维度、多维度筛选还是无法满足用户需求，多等级就能作为最好的延伸。
在设计筛选之前，需要思考用户为什么要使用筛选、在什么样的场景下使用筛选、以及如何满足用户的心理预期等，有了清晰的用户需求，设计出来的筛选才能更好的帮助用户满足其需求。
以「饿了么」用户点餐为例，使用点餐服务的用户类型虽然很多，不过主力还是来自于办公室白领、宅男/女这两大用户群体，有目标的用户会从搜索、收藏、订单记录等入口直接去购买，但绝大多数用户因长期点外卖的原因，“吃什么”就成了最大的问题，这时如果用户还要“吃”，就必须得使用筛选功能，从Tab分类（模糊）到弹窗式筛选（精准）再配合排序功能满足自己的点餐需求，得出结论：
1）一群不知道“吃什么”的白领、宅男/女用户；
2）需要使用筛选功能解决自己“吃什么”的问题；
3）问题很快得到解决后，对结果及使用体验非常满意。
上面的案例可以看出，用户想要在海量的信息中找到自身所需，从表面上看，最直接、真实的需求就是找到满意的商品去下单。站在产品的角度并非如此，最应该解决的应该是效率的问题，这才是筛选的终极目标，不管用户花多长时间，笔者相信都能找到想要的，但所花费的时间成本越少，满意度就会越高，其产品的可信度、使用粘性、用户体验也随之提升。
筛选并非千篇一律，不要一上场就来一波大众化的筛选条件，很多APP首页设计就是最好的例子，什么都不考虑，直接导航栏+轮播图+金刚区+内容推荐...传统的一套流程走下来，结果可想而知。
设计筛选功能时，不同类型的产品需要根据其产品定位、用户目标以及使用场景来定义筛选条件，用户需求是用来设定筛选条件范围的决定因素。例如：购物类产品需要结合商品的销量、评价、价格及知名度等，而新闻类产品侧重于用户偏好、点赞量、热度值来提供筛选，方便用户快速找到感兴趣的内容。
在满足上述两个条件后也不能将筛选项一股脑的挨个排出来，即便是在同一个页面内，也需要结合当前内容的属性对筛选条件进行优先级排序，将用户高频使用的条件按先后顺序依次排列，不重要的也可将其隐藏于某个入口。
以淘宝为例，在「手机」商品列表，筛选条件中首先看到的是品牌，其次是内存、容量...，我相信很少人不在乎手机品牌吧；而在「钢钉」列表中，依次是价格排序、销量...，品牌条件隐藏在了高级筛选中，试问，如果是你购买钉子这种实用性的商品，是在乎价格、还是品牌呢？
筛选功能旨在满足用户查找需求，通过缩短用户选择商品的范围，节约查找时间，快速将符合条件的信息呈现出来，并让用户在这一过程中产生愉悦的使用体验，以发挥产品的最大价值，从而增强用户的使用粘性。
至于在设计中该使用何种筛选控件则取决于用户需求和使用场景，设定符合需求的筛选维度及条件，且根据内容属性做灵活变动即可，切记筛选的核心需求是通过简单易用的方式来帮助用户提高操作效率。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
整个报告分两个部分，
一部分是调研概述，主要描述调研是如何进行的，包含：用户方法阐述，调研对象说明，用户画像等，简单清晰的告诉别人你数据是如何获取的，增加后期问题及数据阐述的科学性。（还有一部分，就是关于调研涉及人员，可以在合适的时机带一下是UED全员协作完成的整个过程的。）
另一部分是调研结论，我的描述思路是：总-分-总，先描述总结论，让观看报告的人对整体结论有个初步了解，然后详细描述各模块分结论，最后提出各模块共性问题。
结论部分是整个报告的重点，所以前面的概述就简单介绍清楚就好了，不需要占太多篇幅。
调研流程，确定标准，是汇报，也是邀功，调研本身就是个繁琐的过程，我们把过程直观的呈现出来，让老板知道我们整个调研过程，前前后后做了哪些准备。付出了哪些努力，体现工作量的同时，也能体现我们的专业性，但是不是记流水账，得有总结。
我把整个路程大体分了3个部分，第一个部分是调研前的准备，第二个部分是调研，第三个部分结果阐述。结果汇报，后期工作计划，汇报很重要，调研做得再好，你的结果无法呈现，问题就没办法结论，那就只会停留在发现结论。
评估纬度是为了阐述我们从哪些纬度去收集答案的，想要验证什么问题。
由于大部分人对调研都只是停留在问卷调查的层面，所以对样本量的选择有不理解，可用性测试主要是为了观察用户操作路径及反馈，所以样本量不需要太大，这个可以简单的解释下是如何挑选用户的。
数据整理也是汇报的一部分，一方面，材料佐证我们做过的努力和准备，另一方面，数据存档。
我们整个调研采用了录音与录音相结合，录音是为了便于后期多人协作帮忙整理问题，录屏是记录用户操作路径，收集用户使用过程中的卡顿，去挖掘卡顿原因，这是是我们做可用性测试的主要目的，这也是跟问卷调研最主要的差异。
在写报告的过程中，我一直在想关于整体满意度的结论，是放在第一部分还是第二部分，但是鉴于第二部分主要描述问题，所以思虑再三，还是把他放到了第一部分。
我们拿到各模块的数据后，要怎么用着很关键，单个零散的数据是体现不出问题的，只有对比着看才能看出问题。
通过数据对比我们明显能发现，付费用户对产品的整体要求要比增值服务的要求高得多，毕竟不要钱的，好不好用无所谓，好用我就用，不要用我就不用。但是如果是用户花钱了的，那他就需要考虑，我获取到的服务和花的钱是否成正比，这也就间接确定了我们后面问题处理的优先级。
这里建议做个中场页。
前面说过，问题描述采用的总-分-总的节奏，所以最开始描述了一下我们收集到的所有问题的概述，包含，总共多少个问题，已经分类类型的分类占比。
这里分享一个问题整理的表格，表格跟PPT的作用不一样，PPT是为了汇报成果，获取支持，表格是为了后续跟进落地，解决问题。
当然，先把问题整理出来也是为了更好的输出PPT。
共享文档可以让更多人清晰的看到问题，因为汇报的效果比较好，老板给了明确支持，所以汇报后我们将表格发给了各个产品，与设计师配合，认领问题，给出优先级和排期计划，整个过程推进的很顺利。
分结论部分，主要通过用户体验地图去描述用户路径，直观阐述用户使用过程中的情绪和痛点，右边整理出来了需要重点关注的一些点。
用户体验地图主要描述的是用户发现，不一定是问题，属于启发类，可以为后期优化方案的输出提供方向引导。
问题整理则是明确的已知问题描述。
各模块可以根据实际情况去描述各自的问题，这里就挑了几个典型的模块举例了一下，就不一一阐述了。
再来说一下，分结论讲完之后，整理的共性问题。先说问题，再说涉及的模块，体现问题的严重性。
到此，整个PPT就结束了，汇报完成后，老板就开始给各业务线下达任务了，就又回到了表格上，我们把之前的问题以界面纬度进行整理，跟产品确认优先级和排期计划，并与老板就排期计划进行了确认，然后责任到人，目前第一轮优化方案已经在陆续落地中，整个发现问题到推进落地的过程，还是比较顺利的，
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UI 设计师必备的一项基础能力：规范能力。
为了避免重复造轮子，反复掉入同样的陷阱，阅读并熟知主流平台的设计规范，是非常有帮助的。
本文内容主要介绍了iOS 、Android、Ant Design的相关规范，为的是不重复累赘描述同一个知识点，涉及到移动端和PC端，主要为了帮助基础同学学习，适当地删减了一些有难度的规范。
设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。
通过设计规范的约束，保证产品的色彩使用、图标图形、空间、文字、页面布局等内容保证严格的一致性。
规范能延续产品风格及特性，保证产品视觉及交互层面的统一，包括技术带来的变革，增强用户的认知性，不同程度得提升用户体验。
多人合作完成一个项目时，需要视觉规范。遵循设计规范，保证视觉统一、提高工作效率。
辅助技术层搭建框架及布局的规则更清晰明确，如按钮、颜色、字体大小等，提高开发效率，确保应用软件最终实现效果与视觉设计相符合。
视觉设计规范是指对设计的具体技术要求，是设计工作的规则。包含了目标、功能、技术指标，以及限制条件等。
① 视觉设计规范，是量化的设计指标，具有指导性、约束性。
视觉设计规范要确定⼀般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。规范的第一个目的是减少设计过程中出错的次数，针对新手设计师、第三方团队，可以很好地做到经验传递，迅速了解上手。减少标注时间，提高前端开发质量。
② 视觉设计规范，是确定关键因素，要有有效性、复用性。
获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。促进多人协作，解决视觉不统⼀现象。
① 品牌规范：塑造形象以及应用的规范。主要包含了标识的标准制图，配色字体等。以及常用的搭配方式。
⼀个企业或者⼀个产品，都有相应的品牌视觉识别系统（VIS）。品牌视觉识别系统是视觉设计最好的参考基础，既然是⼀种指导体系或者说是参考，那么也相应地会有品牌的规范。
② 平台设计语言规范：平台理念、遵循规范的好处、某种应用的生态。比如 Google 和 Apple 制定的规范。针对第三方的规范，主要旨在让这些第三方的设计更兼容平台应用。通常制定了大的方向和规则。并且会提供很多基础的设计元素和插件。
③ 产品业务规范：侧重在产品设计和实现层，内容清晰并且实用，标注详尽，方便设计师们使用。更注重个性化的部分。
https://material.io/
Material Design 规范在于统一 Google 多种平台下的一致性，代表 Google 全新的体验。 包含丰富的色彩、空间的层次、流畅的动效、多样的组件。
谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。
从设计角度：建立共同的设计语言，将产品风格、品牌及交互形式统一起来。
从使用角度：提高产品认知度，提升品牌延续性及产品体验的一致性。
Material Design 是基于三维空间的设计语言。 包含光线、材质、阴影。在 Material 环境中，虚拟灯光照射整个场景。
Material 有自身固定不变的外在特征和内在行为逻辑 ，理解这些固有的属性有助于实际的设计项目。
• 立体性
• 空间位置的唯一性
• 不可穿透
• 形状可变化
• 沿水平方向做变化
• 不可弯曲
• 能与其他材质对象合并
• 分裂，再合并
• 可沿任何轴上移动
Material 借鉴了现实物理世界中的物质特性，并将其运用在虚拟三维空间中的 Material 元素上， 有利于帮助用户理解信息层级，同时可以统一各应用之间的体验。
投影提供了元素深度和运动方向的重要视觉线索；在运动中，投影提供了元素移动方向及高度变化。
https://developer.apple.com/desig
iOS 设计规范逝之苹果开发者官网上面的 iOS 人机交互指南（iOS Human Interface Guideline）。制作这个规范的目的是为了让所有安装到 iOS 系统的 App 都遵从某些特定的视觉特性、交互特性，以达到风格一致的使用体验。另一层面，也是便于让设计人员和开发人员能够更好地理解 iOS 系统，更合理的运用系统提供的功能和接口，更高效地制作出 App。
在整个 iOS 系统中，每一种尺寸下的文本信息都应该是易读的，图标应该是精确易懂的，每一个装饰应该是精巧适当的，而且更加需要注重功能驱动设计的原则。利用留白、色彩、字体、图像和界面元素巧妙的突出重要内容并传达其不同的交互性。
在简洁美观的界面中清晰流畅的动画效果可以帮助用户更容易理解内容并与之进行交互，而不会对用户的操作产生干扰。内容全屏显示时，半透明或者模糊处理的方式可以提示用户更多的内容。减少使用边框，渐变及阴影可以使界面轻 量化，突出显示内容（内容优先）。
不同的视觉层次和逼真生动的动画效果 可以表达界面更深层次的内容，赋予了界面活力，使用户对界面内容更容易理解。易于发现并易于触摸的元素可以提升用户体验的愉悦感，用户在操作功能时不至于迷失。当用户在浏览内容时，流畅的转场效果提供了一种纵深感。
为了最大限度地提高影响力和覆盖面，在应用设计规范时应牢记以下原则：
（1）审美完整（Aesthetic Integrity）
审美完整性体现了 App 的外观和行为与其功能的整合程度。例如，一个帮助用户执行严肃任务的 App 可以通过微妙、不显眼的图形、标准控件和可预测的行为来保持他们的专注。
另一方面，沉浸式的 App，比如游戏 App等，就可以提供吸引人的外观，传递乐趣和刺激感，同时鼓励发现。
系统提供的界面元素、众所周知的图标、标准的文本样式和统一的术语来实现熟悉的标准和范例可以使得一个 App 的设计符合一致性。
易用性指的是用户可以理解屏幕的内容，用手势、触动屏幕等动作直接操作，并且，用户通过直接操纵，可以看到他们的行动的直接的、可见的结果。
反馈指对用户的行动进行了确认，并且通过显示行动结果以使用户了解情况。iOS 系统的 App 要为用户的每一项操作提供可感知的反馈。如：轻触时会突出显示交互元素；进度指示器会传达长时间运行的项目的状态；动画和音效有助于阐明操作的结果。
当一个 App 中的虚拟元素以及动作都是用户对熟悉事物的隐喻的时候（包括现实世界和数字世界），用户会学习的更快。比如，用户移动视图来查看更多内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快的翻页。
在整个 iOS 中，用户是掌控者，而不是 App，App可以建议一个行动方案或者警示危险后果，但 App 不能替用户做决策。
好的 App 可以在用户授权和避免不必要的结果之间找到正确的平衡。
App 可以通过交互元素，确认、取消的提醒以使得用户觉得自己在控制。
https://ant.design/index-cn
Ant Design服务于企业级产品的设计体系，常用于PC端设计规范，基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
1.Ant Design平台的设计原则
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
正如「格式塔学派」中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。
相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
正如 Alan Cooper 所言：「需要在哪里输出，就要允许在哪里输入」。这就是直接操作的原理。
eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。
能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。
根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
很多富交互模式（eg：「拖放」、「行内编辑」、「上下文工具」）都有一个共同问题，就是缺少易发现性。所以「提供邀请」是成功完成人机交互的关键所在。
邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。
「提供邀请」的强大体现在 交互之前 给出反馈，解决易发现性问题；「巧用过渡」的有用体现在它能够在 交互期间 为用户提供视觉反馈；「即时反应」的重要性体现在 交互之后 立即给出反馈。
就像「牛顿第三定律」所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。
虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。
当然，这并不代表了解这些就能做出优秀的设计方案了，英文水平比较好的同学建议直接读原文，直接从 Material Design 和 iOS 的官网进行规范学习，效果更佳。当然如果英文水平有限，网上也有很多译版方便大家阅读。
而关于Ant Design的设计规范，可以去官网查阅更多的详细内容，但PC端的设计规范平台还有很多，字节、腾讯等设计官网都有。
记得对于规范不需要死记硬背，练多了自然能够记住。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
好的配色不但能传达出鲜明的产品主题调性，并且能为用户的视觉行为产生引导作用，构成良好的用户体验。
对于UI设计师来说，不但要考虑颜色在给予用户的感受上的作用，同样应当考虑其实用性，避免重形式而轻内容的问题发生。
所以本文的内容是基于色彩的基础知识，为大家介绍 UI 设计师常用的配色方案、配色流程，当然也包括其他视觉设计工作者在工作中要用到的基础色彩常识。
颜色或色彩是通过“眼、脑和我们的生活经验”所产生的⼀种对“光”的视觉效应。但是人对颜色的感觉不仅仅由“光”的物理性质所决定，还包含着“心理”等许多因素，比如人类对颜色的感觉往往受到周围颜色的影响。有时人们也将物质产生不同颜色的物理特性直接称为颜色。
颜色的应用在 UI 设计师的工作中是非常关键的一环。
（1）色相
是指色彩的相貌，色相被用来区分颜色，根据光的不同波长，色彩具有红色、黄色或绿色等性质，这被称之为色相。
（2）明度
是色彩从亮到暗的明暗程度，黑色的绝对明度被定义为 0 （理想黑）,而白色的绝对明度被定义为 100 （理想白），其他系列灰色则介于两者之间。
（3）纯度
纯度通常是指色彩的鲜艳度。从科学的角度看，一种颜色的鲜艳度取决于这一色相发射光的单一程度。色彩的纯度强弱，是指色相感觉明确或含糊、鲜艳或混浊的程度。
（1）HSB ：在 HSB 模式中，H（Hues）表示色相，S（Saturation）表示饱和度，B（Brightness）表示亮度。
（2）RGB ：三原色红、绿、蓝叠加最终为白色（加色模式）。常用于光源光情况下，例如显示屏幕。
（3）CMYK ：三基色洋红、黄、青叠加最终为黑色（减色模式）。常用于反射光情况下，例如印刷。
（4）LAB ：LAB 色彩模型是由亮度（L）和有关色彩的 A，B 三个要素组成。L 表示亮度（Luminosity），A 表示从洋红色至绿色的范围，B表示从黄色至蓝色的范围。
色彩心理作用是指色彩作用与人的情感所产生的心理感受与综合性生理感觉作用。它影响着人们的记忆、感知、联想和情感，刺激着视觉，在设计中有着不可忽视的作用。色彩的直接心理作用对设计有着重大的影响，关系到对用户心理的把握。
色彩心理作用包括色彩的直接心理效应和间接心理效应。
（1）直接心理
色彩的直接心理效应是色彩本身的属性即色相、明度、纯度等感官印象造成的心理感受。它包括很多不同的心理效应，一般可分为 9 类，即色彩的兴奋感和沉静感、色彩的冷暖感、色彩的轻重感、色彩的华丽感和朴素感、色彩的明快和阴郁感、色彩的软硬感、色彩的明暗感和色彩的空间感。
（2）间接心理
色彩的间接心理效应是由色彩的直观感受反映到大脑所产生的联想效果。在设计中常常利用色彩间接心理效应来传达广告信息。
1）灰⾊：正式、重⼒、成熟
2）棕⾊：保守、亲切、稳定
3）粉⾊：⼥性、天真、⻘春
4）⻩⾊：注意、提醒、快乐
5）紫⾊：奢华、浪漫、创意
是一种充满神秘的颜色，在自然界中较少见到，所以被引申为象征高贵的色彩。
在UI设计中的应用场景为紫+粉常用于女性化的产品调性。
6）⽩⾊：新鲜、清洁、健康
白色常常被认为是无色”即不是色彩。
在UI设计中的应用场景，常用于背景色，缓和各种颜色的冲突，以衬托其他色彩，提高画面明度，提高文字可读性。
图源-dribbble
7）⿊⾊：正式、权⼒、⽼练
是一种充满质感的颜色，它是所有色彩中最有力量的，能很快吸引用户的注意力。
在UI中的应用场景，常和其他色彩百搭，比如黑色+金色，黑色+红色等等，以及现在UI设计中的暗黑模式。
图源-dribbble
8）蓝⾊：信任、舒适、放松
纯净的蓝色通常让人联想到海洋和天空，让人的内心感到平和，有助于人的头脑变得冷静，减少工作中的烦躁和冲动。
在UI设计中应用场景，常用于工具、商务、科技类等产品，B端设计也经常运用。
图源-dribbble
9）绿⾊：⽣⻓、⾃然、成功
绿色是大自然中最常见的颜色，代表着健康、生命、青春、宁静、自然、和平、安全、舒适，是一种充满希望的颜色。
在设计中的应用场景，健康、医疗、运动及少儿类产品使用较多，一般在软件中表示安全、成功。
图源-dribbble
10）橙⾊：信⼼、能量、乐观
它烘托出的活跃气氛没有危险的感觉，反而是一种友好。
在UI设计中应用场景，电商、金融以及服务类的产品使用较多，比如淘宝。
图源-dribbble
11）红⾊：危险、重要、激情
最醒目和强势的颜色，甚至能引起一些生理反应，例如心跳呼吸加快等。
在UI设计中应用场景，红色常用于电商、金融、服务等行业。红色也最能烘托气氛，在中国传统节日里都使用热闹的红色来装饰，比如新年春节阶段。同时红色也代表了警示、告诫，所以在界面设计中常用红色的文字和按钮来警示用户慎重操作。
图源-dribbble
5.UI中的色彩
Ul配色一般包含主色和辅助色、强调色、中性色。
主色通常与品牌色一致，辅助色一般选择与主色色调一致且能拉开层次的颜色，强调色选择与主色相对立的互补色。
中性色主要用于界面中的线条和背景
图源-dribbble
每⼀种色彩都有其自身的特质，而这⼀特性的发挥，还需要依赖于色彩在整个配色时所处的位置、面积等，即色彩与其他色彩所形成的秩序。
颜色同样有主体，和辅助。确定主体色系，有助于页面整体基调的把控。在实际的操作过程中，颜色要适量，通常2-3种就可以了。多了往往较乱（并非绝对）。
单色系配色法：同⼀个色系内根据颜色的明度和纯度不同去做区分，形成层级关系、对比关
系的配色方法。例如：深蓝、天蓝、浅蓝这样的层级变化。
邻近色配色法：相邻的色系进行搭配。例如：黄色、橙色、红色。
对比色配色法：对比的色系进行搭配。例如：黄色、紫色。
一套 App 配色基本由背景色、主题色、辅助色、点睛色 4 种色调组成。
flatuicolors （https://flatuicolors.com）
提供多款扁平⾊彩配⾊⽅案，可以根据 UI 设计的需要选择使⽤。
Paletton （http://paletton.com）
是⼀个在线的⾊环配⾊⼯具，我们可以根据需要选择单⾊、相近⾊、对⽐⾊等规则来查看配⾊，也可以实时查看其在⽹⻚中的搭配效果。
uigradients（https://uigradients.com/）
UIgradients 以分享美丽渐变⾊彩为主的分享站，⾥⾯接近上百种渐变配⾊⽅案，设计师可根据⾃⼰⻛格来选择搭配，此外我们还能直接获得对应渐变配⾊的CSS代码。
webgradients（https://webgradients.com/）
富有超多好看渐变渐变配⾊的⽹站，只需要复制⾊彩编号填充渐变，或者直接下载PSD，Sketch，图⽚，CSS代码。
CoolHue（https://webkul.github.io/coolhue/）
富有超多好看渐变配⾊的⽹站，可安装Sketch 插件，或者直接下载图⽚和CSS代码。
中国色网站（http://zhongguose.com/）
只有中国的颜色, 才能这般,美得不可方物
Adobe Color【工具】（https://color.adobe.com/zh/create/color-wheel）
Adobe色轮配色工具，可以选择色彩模式与调和规则
ColorSpace（https://mycolor.space/）
功能强大的渐变色在线生成器，支持单色、双色，甚至三色渐变。
色彩是设计中的重要组成部分，不同的色彩传递不同的情感和态度给用户，这也是UI设计规范中需要注意的部分，即做到色彩统一、色彩平衡。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com
