有了解和学习 B 端的同学必然都听说过 SaaS 这个词，这在 B 端行业是个非常重要的产品形式和分支。
虽然它重要，但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问，Saas 应该怎么设计？适用哪些设计风格？
……
所以我从最底层的技术层面，来解析 Saas 到底是什么，在未来你再也不用担心对这个词汇一知半解，无法正常参与业务讨论了。
讲解什么是 Saas，或者刚刚图例出现的 Paas、laas 是什么，首先要认识一个问题，一个需要联网的软件，是如何落地的，需要哪些前提条件。
通常，我们可以把一个普通的联网产品要正式上线并使用，需要满足 9 个层级的条件，我们简称 “9层塔”，分别是：
下面，我们根据每个大层级来解释一下，它们分别都是什么。
1.1 基础设施层
基础设施层是一切网络服务的根基，由现实世界的硬件组成，是所有技术、代码、数据的运行基础。
层1：网络（Networking）
即基础的互联网电信宽带服务，通过电信运营商在各地搭建联网用的设备，并使用线缆相互连接，满足数据的物理传输可能。
比如你想要在家上网冲浪（非移动上网），最基础的条件是就是购买和开通宽带服务，通过接入光纤的形式，实现从家中连接到互联网世界的可能。
层2：服务器（Serves）
服务器，本质上也是一台电脑。有了联网的条件，我们就要把网络接入到这台 “电脑” 上，让它来完成各种数据的处理和存储。
但不管它能做什么，要做什么，首先你得先有这台设备，不然后续的工作都无从谈起，所以服务器指的就是用来完成后续工作的电脑设备。
层3：存储（Storage）
存储就是硬盘，你想要运行的任何程序、代码，还是想要收集的数据，都需要容纳的地方，那就是硬盘空间。存储就是关联到服务器的硬盘，是数据存储的物理环境。
之所以硬盘被独立出出来，而没有把 CPU 内存这些拿出来，是因为数据的存储和安全（物理上）是网络服务的重中之重。CPU、内存、电源坏了，替换就可以，硬盘损坏导致数据的丢失是无论如何不可能接受的。
所以，工程师们开发了非常多特殊的技术来保障存储的稳定和安全。
1.2 技术应用层
技术应用层，就是具备了网络、服务器、硬盘以后，让这些基础设施充分发挥作用和能效的相关技术。
层4：虚拟化（Virtualization）
虚拟化是个比较抽象的概念，它是一种资源利用的技术，让服务器最大化的利用和分配自己的资源。
比如一台服务器，有8核心、8G内存、8G存储，如果卖个一个客户运行一个程序，那么很可能这个这个程序日常只使用一个核心的算力，1GB内存，1G不到的存储，剩下的算力资源不就浪费了嘛？
于是，虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序，并根据它们各自使用的消耗灵活分配 CPU 和内存资源。
所以，今天如果你想要搭建一个网站，云服务商出售的 “虚拟主机”，就是在实体服务器主机上切割出来的一部分。这样客户省钱了，商家利润率也更高了！
层5：操作系统（OS）
每台电脑都有自己的操作系统，我们熟知的 Windows、Mac OS等等。如果硬件没有搭载操作系统，那它们就只是一堆工艺精密的废铁。
对于服务器来说也是，任何服务器想要正常运行，都必须搭载相关的服务器操作系统，有了基本的系统，我们才能创建程序，让服务器去运行我们想要的功能。
前面提到的虚拟机，就允许同一台服务器通过虚拟技术运行多个系统。
层6：中间件
中间件也是个比较复杂的技术概念，它是个独立系统软件服务程序，是软件的直接面向对象（而不是服务器），是一种支撑软件。
举个不太严谨的例子，我们常规的逻辑是一个程序对应一台服务器（或虚拟机），但真实情况往往是一个程序会关联好几个服务器和不同的系统，来完成不同的网络服务。正常情况下，你需要对每个服务器和系统进行适配。
而中间件的作用就是帮助你省掉这个麻烦的步骤，让你只需要对接唯一的翻译和话事人，他会帮你向不同的任务对象传达你的要求。
层7：程序环境（Rumtime）
程序环境，就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言，都需要安装一个对应的运行环境。
许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面，那就证明这个游戏中运用到了 Java 的代码，如果你没有 Java 的运行环境，那么它们就无法生效。
1.3 产品表现层
层8：应用（Application）
在这个系统下，应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序，不管是后端程序还是前端程序。
它们需要使用某些特定的程序语言来编写，并运行在上面所说的对应环境中。我们所说的后端开发，通常就是开发服务器所运行的程序的程序员。
层9：数据（Data）
这个词放在这里可能有比较大的歧义，数据实际上就是使用这个程序所产生出来的数据，而不是单指数据库（数据库也是环境的一部分）。
比如你打开一个网站注册了账号，上传了头像，那么这些信息就是使用程序所额外产生的数据，它是项目正常运作的必然产品。
1.4 SaaS 到底是什么
理解上面的9个层级的内容是什么，我们就可以看下面这张图表了。
SaaS 全程 Software-as-a-Service，翻译叫 “软件即服务”，讲人话就是 “卖联网软件” 的。
前面提的 9 个层级，除了最后一层数据是我们普通人可以负责的，其它每个层级都需要对应的开发和工程师来负责对吧，那么我们普通人还是企业就不能使用网络软件服务了嘛？
这肯定是不符合事物发展规律的。
SaaS 的存在，就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意，直接让你在浏览器或本地客户端上直接使用这款联网软件，并创建对应的数据信息。
换句话讲，只要这个软件是联网的，且软件本身的功能就是服务的核心（划重点：社区电商类软件的服务显然不是软件功能本身），它就是 SaaS。SaaS 既可以免费，也可以是通过批量出售软件功能的使用权来赚取收益。
免费情景：
微软：如果你使用了基于 Web 的电子邮件服务（例如 Outlook、Hotmail 或 Yahoo!Mail），那么你已经使用一种形式的 SaaS。
https://azure.microsoft.com/zh-cn/overview/what-is-saas/
付费情景：
在 B 端的语境下，SaaS 通常就是指制作一个面向商业用户的联网软件，然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……
所以明白了嘛，SaaS 只是一个商业形式或技术形式的统称，它根本没有具体的设计规范或者学习方法，完全根据业务的实际需求和场景决定。
最后，再问你们一个问题，你们现在负责的项目是 SaaS 嘛？
在 9 层塔中，SaaS 是完全制作好软件让用户直接上手使用的软件，而 PaaS 和 IaaS 就不一样。
2.1 PaaS
PaaS 全文 Platform as a Service，是平台即服务的简称。这属于完全技术化的服务，是非程序员的一般用户难以参与到的业务类型了。
即服务商提供了基础的 7 层服务，只要用户购买了这些使用权，那么就可以直接在这个基础上编写或安装运行的程序进行使用了。
比如全球最大的开源 CMS 博客程序 WordPress，是由 PHP+MySQL 编写的，如果要创建这样的网站，就可以直接购买符合程序对应环境的服务器，再进行安装部署即可。
2.2 IaaS
IaaS 全文 Infrastructure as a Service，就是用户只购买一个完全空白的虚拟主机，类似你购买了一台硬盘格式化后完全空白的虚拟电脑。
用户可以自己选择安装什么样的系统，编写什么样的中间件，最后再搭建自己的框架。这适合定自定义要求更高的用户，完全根据自己的需要 DIY 项目的服务器功能。
2.3 Hosting
Hosting 则是比 IaaS 更进一步的服务，从原本的虚拟服务器升级到了完整的服务器。
也就是说，在一些特定业务环境下（比如特殊的数据安全要求），用户需要购买完整的服务器硬件使用权，从原本的合租换成整租。
所以，Hosting 就是服务器托管的意思，用户向一些服务商购买了完整的服务器硬件使用权和联网功能，然后远程进行控制和使用。而商家负责硬件层面运维，防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。
2.4 Co-location
九层塔中，我们其实还省略了一个更底层的环节 —— 数据中心。
数据中心是一个物理名词，在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州，就是典型的数据中心。
Co-location 的服务也叫场地出租，就是数据中心的商家，把数据中心的物理空间使用权租用给用户，用户自己购买服务器或商家的（不是临时租用）放进去，再借助数据中心的网络和其它基础服务实现服务器的正常运转。
这个概念大家简单理解就可以，我就不多做介绍了。
所以，九层塔中包揽了不同层级数量的技术，就可以形成不同的服务，每一级服务有各自的优缺点，是由项目的实际情况决定的。
相信看完前面的介绍大家已经知道，SaaS 等服务是建立在联网的基础之上的，也就是说，除了可以独立运行在你客户端里的本地软件，还包含更多需要联网的软件，或者干脆运行在远程服务器主机上的软件。
这是一个发展的过程……
最早的软件安装是我们到软件店里购买软盘、光盘，回到家里的电脑安装，这些软件往往只在本地运行，是不需要联网的孤岛。
随着互联网行业的发展，孤岛渐渐被消除，联网上传和获取数据越来越普及，甚至，软件都不需要再下载和安装，直接用浏览器就可以访问使用。
这种模式，就催生了软件的开发维护与服务器、网络的硬件运行进行了分工，一般的产品开发团队专注在软件应用层面的开发工作，而把网络、远程服务交给其它商家，并付费购买。
这样不仅带来更高的效率，而且降低了各自的成本，实现了多方的共赢。
所以，我们再来理解云服务这个词就很容易了，云就是网络，云服务就是基于联网实现的各种软硬件服务的总和。
除了远程的虚拟机、中间件、数据库外，还有远程计算、渲染、CND加速、直播分流等等。
这也是为什么云服务会成为互联网发展的基础，因为它实在太重要了，几乎所有互联网公司都无法脱离云服务带来的支持。
这也是为什么各个大厂纷纷投入云服务的赛道中，因为这是互联网的基建和命脉之一，拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下，头部的厂商拥有更好的机群、技术、人员，可以大幅度降低运作成本，提供更优质但价格更低廉的服务。
虽然云服务在今天不可或缺，价格也越来越有优势。但是，并不是所有企业都一定要选择购买外部的云服务，这就是我们要理解的另一个课题 —— 私有化部署。
云服务再怎么便捷，也有一个缺陷，那就是数据是存储在别的商家、企业的服务器中，有一定的数据安全隐患。
虽然数据安全是云服务的最基本保障，但很多对数据隐私、安全极度重视的企业，是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器（私有云）的方式，实现从网络、硬件到软件全局私有化的部署。
也就是说，服务器机房是自己公司的，网络是自己迁进机房的，服务器自己买的，环境、虚拟化、数据库自己搭建的，后端程序也是自己写的，最后电脑手机上运行的客户端，是连接这些服务器的。
哦对了，当然这些硬件日常的维护也要由自己公司的运维负责……
这样的成本高嘛？非常高。但类似国企、银行、证券、国防、政府机关等机构，对数据的安全性是异乎寻常的执着的，他们是有足够的动力划出预算来确保数据的私密与安全，用来运行自己内部的 B 端系统。
这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件，尤其是服务器在国外的。
再问下一个问题，私有化部署，就意味着这个环节中所有步骤全是自己搞定嘛？
当然不可能，因为应用这个层面，有时候不是想开发就开发得出来，或者成本实在超出了预算。因为私有化的主要目标是数据安全，但不是应用的工具一定得个性化定制。
比如在即时设计官网的价格页面，就可以看到 “私有部署” 这个选项。它的实际作用，就是允许客户在自己的服务器上安装它，让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中，满足客户的数据隐私需求
注：这例子大家讨论最多适合理解，非恰饭
所以，了解完上面的概念，你也就大概能明白什么是云服务，什么是私有化。如果需要在工作中碰到更细节的名词还是概念，可以再进一步做理解。
文章来源：UI中国 作者：超人的电话亭
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
综合监管平台是对自然资源管控的一个OA系统。主要功能是对国土资源相关业务的监测、评估和统计，将各专项规划实现“多规融合”，从而优化城市自然资源配置，做好国土空间规划统筹。
为什么要有设计规范
1、多个设计师同步设计
我们部门有2名UI设计师，所以在我们同时画同一个项目界面时，为了保持整个设计的统一，就需要我们设定设计规范。
2、设计与前端之间的沟通
与设计同理，开发人员参照统一的设计规范写页面，可避免同一系统中出现设计控件混乱的情况，从而提高开发效率、减少沟通成本、减少返工率。
3、在公司内部复用
在公司内部，设计规范可运用在多个项目中，从而减少开发的工作量、提高开发效率。
建立设计规范前的工作
从产品经理手中接到原型图，首先是与产品经理的沟通，包括客户需求、设计风格的确定、页面内容的布局等等，关于设计尺寸，因为我们客户用的是1920*1080分辨率的电脑，所以设计就基于1920*1080尺寸来做；但有时会基于1440*900的尺寸来设计，然后上下适配1920*1080和1366*768。所以设计尺寸要根据具体情况而定。
页面框架
a、主体框架分为四个区域：顶栏、左侧栏、页签、主体内容
b、主体内容上、左边距为10px，默认显示一屏高度，超出的内容加上下滚动条
c、页面中的各个组件根据不同屏幕分辨率采用自适应
如何建立设计规范
1、颜色规范
后台系统主色调大多运用蓝色，这是因为蓝色往往围绕着科技、安全、信任等等，很符合业务场景，比如智慧城市、智慧医疗、智慧交通等。但是蓝色用多了也会让人感觉没有新意、审美疲劳，所以在色调这块，后台系统可以采取皮肤功能的扩展，做两套配色好的皮肤供客户选择，这样避免了因客户的不满而一次次的修改，从而提高工作效率。
2、文字规范
因为我们面向的客户多为政府工作人员，且年纪稍长，所以字号要比平常的网页设计要稍大一些；常用字体，中文：微软雅黑，英文或阿拉伯数字：Arial；行间距=字体+8px。
3、按钮规范
按钮是用户与系统间交互的一个重要触点，用于特定触发事件的发生。按钮类型可分为线性按钮、面型按钮、文字按钮、图标按钮、图标+文字按钮，按钮状态分为常规、悬停、按下、禁用。按钮的宽、高、曲率、文字离边框的间距需要在规范中写明。
4、表单规范
在后台系统中，表单多用于登录注册、搜索框、选择器、信息录入等。表单类型可分为输入框、下拉框、时间选择框、单选框、多选框等等，表单状态分为默认、输入/选中、填写完成/已选择、不可填写/不可选、错误提示。对于必填表单，需在标签前后或输入框后增加“红色*号”。输入框的高度、曲率需要在规范中写明。
5、表格
此图为可进行单选或批量选择、排序、表头分组和带有冻结列的复合型表格：
a、固定列表格：对于屏幕无法展示完全的内容，可以采用冻结重要列的方式，然后横向加滚动条左右滑动
b、可对数据进行排序：升序和降序
c、文字类字数限制：重要字段全部显示，其他文字信息超出宽度以“...”代替，鼠标悬停时显示全部内容
d、对齐方式：文字信息左对齐，因为人的阅读习惯是由左到右、由上到下的，此外在主从型列表中，采用左对齐错开文字，可使用户一目了然，降低视觉噪音；数据信息右对齐，因为数字单位个十百千万...是由右向左，方便比较数据大小
文章来源：站酷 作者：Alice冰冰
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文是参考国内交互设计标准网站及用户行为研究实现的用户体验设计规范，用于后台设计，网站设计等。
涉及到的产品越多，产品统一性越强，实现信息同频，开发和设计快速了解信息
一个项目中会涉及到多种按钮，甚至一个页面中也会涉及到多种不同功能的按钮，这个就需要把同一类型或同一功能的按钮，它们的位置统一。减少用户学习成本。
因为如果同一样的功能按钮在不同的变换位置的话会打乱用户已经形成的习惯，增加其学习成本。（尽量采取以下情况的一种）
帮助说明的表现形式有很多种，但不管选那种整个项目要保持统一，一些特殊情况除外，固定一个位置，可以方便用户在最短的时间内，快速完成此项操作和获取内容。
权重是为了突出有效信息，也能在不同元素建立一种有组织的层次结构，让用户快速识别关键信息。
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断，来突出其中一项相对更重要或者更高频的操作。
突出的方法，不局限于强化重点项，也可以是弱化其他项。
但是在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断
表单在遵守操作流程的情况下，让用户涉及到的操作从易到难，让用户有填下去的动力。
排序规则
（1）有“有默认项”的选项；
（2）有“选项”的选项；
（3）只输入“数字”的选项；
（4）“添加图片”“修改”等涉及复杂操作的选项；
（5）“备注”“商品卖点”等选择。
左右排版的时候将“重要必填项”先在从左边（纵向排列）开始排版（排版时仍按照我们的从简到难的规则）
注：当“必填项”比“非必填项”多时，排版上要考虑，就按照次序，左边排满，再排右边。
在使用Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
注：当悬浮在“客户”所在的文字链单元格时，鼠标
【指针】随即变为【手型】，单击即可跳转。
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
注：在移动端尤其适用。
鼠标移入按钮附近，即可激活Hover 状态
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
状态一：普通的浏览模式，不区分可编辑行和不可编辑行；
状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；
状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。
当『易读性』为主，同时又要突出操作性的『易编辑性』时，可使用『文字链/图标编辑』
状态一：在可编辑行附近出现文字链/图标；
状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。
当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』
注：编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在Table 中进行编辑模式切换时，需要保证每列的不跳动。
减少负担，增加轻量化的操作
注：删除的操作是谨慎的，系统在不打断当前操作的时候给出二次提醒确认。
填写表单的条件反馈。
注：不需要提交后才出现提示，输入及时给用户反馈
完成整个操作后的提示以及系统提示
注：重要的，文字多于15个字以上不适合放在toast里面提示。
提供下一步操作的入口
不仅要提示他发生了什么，还能引导他怎么做，甚至能让他一步到位直接跳转到要进行下一步操作的页面去操作
当页面没有按钮时，提供明确的入口。
最后，关于后台的用户体验设计规范就总结到这里啦。
文章来源：站酷 作者：chaih
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
让信息架构，和产品架构，产生“化学反应”
这个信息架构的角度，具体而言，就是只包含一级频道的交互设计。
核心功能、辅助功能、重大功能，作为产品的三大类功能，更多是从发展的角度来划分。
除此之外，大部分 App 都还有一些非常基础的功能，比如“个人资料”、“我的收藏”、“设置”、“搜索”等，此类功能，我们称其为通用功能。
核心功能、辅助功能、重大功能和通用功能，是产品的四大类功能。
总的来说，本文主要以底部 tab 导航的 App 为例，探讨一下，如何在一级频道来落地产品的四大类功能。
01 宏观上讲，怎样更好的摆放四大类功能？
网易云音乐是我个人很喜欢的一款产品，日常用的也比较多。不过，它的新版（6.0 系列）给我的直观感受是，有点复杂了，我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。
给我类似感受的产品，还有 Keep 和知乎。
究竟是什么，让我觉得，这些产品变得有点复杂了？
个人简单总结了一下，最直接的一个原因，是这些 App 都新增了重大功能，并给这个重大功能单独加了一个一级频道。
比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道，都分别占用一个一级频道。
企业为什么这么设计？个人的猜测，这些重大功能于企业而言，很重要，要么肩负商业化使命，要么被寄予厚望，所以企业就单独给了一个一级频道。
这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系，那我们就需要考虑更多的因素。
之前在信息架构那篇文章里，个人的建议是，如果想让 App 始终保持简单，那就只保留 4 个 tab，也即只有 4 个一级频道。
如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能，以接近最优的方式，安置在寸土寸金的 4 个一级频道上？
我想，这中间一定有一些原则，值得我们探讨和参考。
1 和重要程度保持一致
通常而言，重要程度越高，分配到的空间就越多。这是一个比较普世的道理。
也就是说，这条原则，主要会影响到，四大类功能，各自占用多少空间比较合适。
我们有 4 个一级频道，每个一级频道代表了 25% 的空间。
再来看四大类功能，按其大概的重要程度，简单的分析一下。
先说核心功能，这个最重要。
核心功能是立足之本和护城河。先换个角度看这个问题，假设有三种可能，即核心功能可以占用一个、两个或三个一级频道。
先用下排除法。三个一级频道难免显得过多，剩余的三种功能挤在一个一级频道里也会显得过分拥挤；一个一级频道的话，倒也可以，但是平分四分之一的空间很难体现出核心功能的重要性。
相比之下，两个一级频道就显得较为合适。
综合考虑到有四大类功能，通常两个一级频道也不会完全给核心功能所用。
所以，核心功能，大概占用一个半一级频道，也即 40% 左右的空间即可。
再说通用功能，这个比较容易。
此类功能通常比较多，重要程度可能不及重大功能，但是又不能没有，所以通常我们也会单独给一个一级频道，就是“我”或者“设置”之类的一级频道，大概占用 25% 的空间即可。
第三，说下重大功能，这个比较重要。
通常而言，重大功能的重要性仅次于核心功能，而且重大功能可以有多个，再考虑到通用功能一般单独占用一个一级频道。
那么，相对而言，重大功能，完全可以单独占用一个一级频道，甚至更多，大概占用 30% 左右的空间即可。
最后，说下辅助功能，这个比较特殊。
首先，很多产品是没有辅助功能的；其次，辅助功能是个小功能；最后，辅助功能的数量一般也不多。
总的来说，辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多，所以，辅助功能一般和重大功能共用一个一级频道即可，大概占用 5% 左右的空间。
2 和使用频率保持一致
通常而言，用户用的越多的功能，就排的越靠前。
也就是说，这条原则主要决定四大类功能的排序问题。
具体而言，用户用的最多的是核心功能，所以核心功能最靠前。
重大功能和通用功能，有时候很难说哪个使用频率更高，比如微信里的“搜一搜”和“收藏”。但是比较明确的是，很多 App 在诞生之初，并没有重大功能，只有核心功能和通用功能。
所以自然而然，通用功能排在了核心功能后面。
个人有个猜测，一方面，有时候很难说清重大功能和通用功能，哪个使用频率更高；另一方面，通用功能起初是排在最后的。
所以，当重大功能出现时，就延续了旧传统：通用功能依然排在最后。最终结果就是，重大功能和辅助功能排在中间。
值得一提的是，现在市面上开始出现两类现象。
其一是，有一些拥有 5 个一级频道的 App，开始把核心功能放到中间那个频道，比如 Keep 的“运动”频道。
其二是，企业开始人为的控制打开 App 时默认展示哪一个频道，而且默认显示哪一个频道，存在多种情况，例子依然包括 Keep：以前默认显示中间的“运动”频道，现在默认显示“计划”频道。
个人觉得，对企业而言，这两类做法，都是得不偿失的。
因为这样做，会让 “从左起，1、2、3、4”这个排序失去价值。没有这个前提，也就谈不上“和用户的使用频率保持一致。
而且，这种默认不显示左边第一个频道的做法，有时候会让用户产生一种被绑架的感觉（默认显示收费频道），有时会让用户感觉企业在自作聪明（默认没显示收费频道，但也没显示核心频道）。
3 符合用户预期
主要有两个预期，逻辑预期和习惯预期。
3.1 逻辑预期
用户确实很懒，但不代表用户不会思考。
比如前文提到的，网易云音乐的“私人 FM“功能，在我的认知里面，”私人 FM“和”每日推荐“一样，都是个性化推荐，性质极其相似，应该放在一起。
所以，当我在新版里的“每日推荐”旁边找不到“私人 FM”时，心里就觉得很奇怪很不解，心想这么好的功能不会是给删了吧。
后来某一天，当我在第三个一级频道“我的”里面发现“私人 FM“的时候，我又觉很别扭，不好用。
在新版里面，一开始我是去“发现”频道的“动作库”找的，怎么找都找不到，跟找不到网易云音乐的“私人 FM“是一样的心情。
因为我觉得，“动作训练”和“动作库”，是很接近的一对事物，从逻辑上来讲，用户会觉得这俩事物挨在一起，或者会猜他们是不是挨在一起。
3.2 习惯预期
这里的用户习惯，主要有两类。一类是自家产品培养出来的，一类是市面上的产品培养出来的。
通常情况，一级频道的设计，是要符合用户习惯的。
最忌讳的情况是，自己一手培养的用户习惯，到最后自己再一手去打破，这样很容易引起用户的烦躁、不满和失望等负面情绪。
比如 3.1 段的两个例子，同样也没有符合用户的习惯预期。因为在最开始，网易云音乐的“每日推荐”和“私人 FM“是挨在一切的，Keep 的“动作训练”和“动作库”也是融合在一起的。
4 良好的扩展性
就一级频道而言，重大功能和通用功能是最有可能扩展出更多子功能的。所以，就扩展性而言，需要重点照顾到这两类功能。
通用功能大部分都收纳在“我”这个一级频道，通常也是一个列表的样式，天然自带良好的扩展性。所以，扩展性的难点和重点，最后是落在了重大功能这里。
在一级频道，重大功能的展现形式，通常有两种。
一种是像核心功能一样，直接把重大功能的内容铺陈出来，典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来，只展示一个入口，典型代表是微信的“发现”频道。
对企业而言，现实问题是，当重大功能的数量上升到两个、三个甚至更多时，如何展示他们？
市面上的常规做法，也是两种。
一种是像网易云音乐和 Keep 这样的，直接开辟一个新的一级频道，供重大功能使用。还有一种是微信这种，把所有重大功能都收纳起来，有新的重大功能出现时，新增一行列表即可。
个人推荐微信这种做法，因为这种做法的扩展性最好，可以应对无穷尽的重大功能。
至此，我们简单总结一下。个人看法，四大类功能，具体咋摆放，并没有标准答案，但是可以参考以上 4 个原则。
02 微观上讲，有没有补充和例外？
有。借这个话题，聊两个比较特殊的问题。
1 顶部标题栏的两侧，适合放什么功能？
先来分析一下这个位置，顶部标题栏的两侧，位于屏幕的左上角或右上角，是个很显眼的位置。
个人认为，有三类功能比较适合这个位置。
第一类，是和当前页面内容有密切关系的功能。比如“编辑”型功能，可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能，可参考 Twitter 首页信息流的发推图标。此类功能，最适合这个位置，而且一般也没有更合适的位置来摆放他们。
第二类，是比较高频的通用功能或重大功能，比如搜索、消息、设置等。
第三类，是某些高频功能的快捷入口，比如微信的扫一扫和收付款。
除此之外，如果是一个比较低频的功能，不管是通用功能、重大功能还是辅助功能，放在这里，都不合适，因为会对用户形成打扰。
2 一个功能，最多可以出现几次？
大部分功能，在 App 里只会出现一次。但在日常使用各种 App 的时候，我们也会多次看到同一个功能，在不同的地方。
有时候，能看到三次，比如搜索，在微信、知乎和网易云音乐都出现了三次，我们也不会觉得哪里不对劲儿。实际上，搜索虽然出现了三次，但也没有引起我们的特别注意。
还有一些功能，是出现了两次。我们在第二次看到的时候，会有点烦躁，心想怎么又来了；有时候会有点困惑，心想下次我该用哪一个，哪一个最快捷。
这中间有什么原则可以参考吗？
先来看下搜索，在微信、知乎和网易云音乐，都是比较高频的功能。换句话说，用户在不同的一级频道，都有可能需要搜索一下，所以搜索出现三次，在不同的一级频道，是有这个需求存在的。
搜索以外的功能，个人认为，只有一类适合出现多次，通常两次足矣。
那就是，此类功能确实比较高频，同时路径又比较长，使用起来不够方便。这时候，就适合给此类功能一个快捷入口。这个快捷入口，一般是出现在标题栏。
一个功能，如果只是单纯的重复出现两次，两次都没出现在标题栏。那给用户的感觉，就是，App 并不是在给我提供快捷入口，而可能只是通过重复的方式来强推这个功能，就容易产生烦躁和困惑的负面情绪。
文章来源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户体验四维度的概念、价值以及相互之间的关系
用户体验，是用户在使用产品过程中建立起来的一种纯主观感受。
解读用户体验，可以有很多视角。本文提供一个以人为本的视角：用户体验四维度。具体如下。
HI X：Human Interface Experience，人与界面的交互体验。
HC X：Human Content Experience，人与内容的交互体验。
HH X：Human Human Experience，人与人的交互体验。
HB X：Human Brand Experience，人与品牌的交互体验。
用户体验四维度
01 四维度的概念
怎样判断一款产品有几个维度？这就要从四维度的概念说起。
1. HI X（人与界面的交互体验）
HI X 是指用户在浏览、阅读、操作界面过程中产生的主观感受。
HI X 既受信息架构、交互设计和UI设计的影响，也受根需求和功能架构的影响。主要依托手机和电脑的互联网产品，天然存在界面。所以，HI X 属于基础属性，所有产品都有。
2. HC X（人与内容的交互体验）
HC X 是指用户在消费内容时，内容本身带给用户的主观感受。
这里的内容，既包括衣服、鞋子等实体商品，也包括文章、图片、视频等虚拟内容。诸如淘宝、网易严选等电商产品，以及公众号、Instagram、抖音等 UGC 产品，都具备 HC X 属性。
3. HH X（人与人的交互体验）
HH X 是指用户与其他用户、产品工作人员沟通交流时产生的主观感受，或产品的社区氛围、沟通氛围带给用户的主观感受。
所以 HH X 有两层含义。第一层发生在用户与用户之间，是指当用户扎堆或沟通交流时，交流氛围、交流内容带给用户的主观感受。第二层发生在用户与产品工作人员之间，是指当产品依靠人力向用户提供咨询、售后、配送等服务时，产品工作人员的服务行为带给用户的主观感受。
关于第一层含义，不管是更强调社区属性的产品，比如天涯社区、豆瓣小组、百度贴吧，还是更强调内容属性的产品，比如公众号、微博、小红书的笔记，都具备 HH X 属性。
关于第二层含义，常见的 HH X 由客服人员提供。如果是电商产品，提供人员还包括快递员和售后人员等。
4. HB X（人与品牌的交互体验）
HB X 是指当用户想起、谈论起品牌，或使用品牌的产品、体验品牌的服务时，品牌带给用户的主观感受。
只要一款产品做成了品牌，它就有 HB X 属性。
HB X 会直接影响到我们是否信任、喜欢一个品牌，以及是否会使用它的产品和服务。所以，我们对 HB X 往往会有一个抓重点的综合评价。就像一个外向活泼的女生，虽然在外向程度方面和一个内向安静的男生不一致，但双方也可能会选择在一起，因为内向、外向并非双方关注的重点。
因为 HB X 牵涉到对品牌的综合评价，所以就像工作都有一段试用期、恋爱都有一段了解期一样，HB X 的形成往往也需要较长时间，通常至少要 3~5 年。
02 四维度的价值
每一个维度，各有什么价值？
1. HI X（人与界面的交互体验）
作为基础属性，HI X 的价值主要体现在以下两方面。
如果是一款只具有 HI X 属性的工具型产品，比如视频会议产品 Zoom，那于这款产品而言，HI X 就是一切，这款产品的成败也几乎完全取决于 HI X。
如果是一款同时具有 HC X、HH X 属性的内容型社区型产品，比如 B 站、快手这些视频类产品，那此时的 HI X 就会扮演一个类似交通出行（基础设施）的角色。如果 HI X 比较差，这个“出行”过程就会像出去玩时的塞车一样，让人难受；如果 HI X 很优秀，这个“出行”过程就会像准点的高铁、飞机一样，又快又爽。
2. HC X（人与内容的交互体验）
HC X 主要从内容层面影响用户满意度。
如果 HC X 比较好，用户消费时的决策时间就会被大大缩减，同时用户满意度也会比较高。比如淘宝上就有一些原创设计、质量不错、价格不贵的精品小店，很受欢迎。我们去网易严选、优衣库天猫旗舰店这些质量不错、设计不错、价格适中的店铺买 东西时，也会很快很省心。
以上说的是电商产品，对于 UGC 类的内容产品，也是类似的道理。比如站酷上的首页推荐和编辑推荐，相对而言，HC X 比较不错，所以看这些内容的用户也会比较多。
3. HH X（人与人的交互体验）
HH X 是用户情绪的最大影响因素，在情感方面对用户具有最大吸引力。物以类聚，人以群分。HH X 良好的产品，会像一场谈笑风生、其乐融融的聚会，吸引用户去扎堆。
良好的 HH X 往往意味着良好的氛围，它不仅能带给我们诸如轻松、愉快等积极情绪，还能在一定程度上带给我们一种归属感。最终的结果，就是我们喜欢用这款产品。比如 B 站的 HH X 就比较好，具体而言就是弹幕氛围比较欢乐友好，这样的氛围带给用户的感觉是比较好的，用户也喜欢在 B 站就着弹幕看视频。
4. HB X（人与品牌的交互体验）
HB X 事关品牌能不能以正面形象住进用户心里。
良好的 HB X，往往意味着良好的品牌美誉度和忠诚度。HB X 良好的产品，就像你信任和喜欢的男/女朋友一样，他/她会在你心里占据一定的分量和地位，让你乐意介绍给家人和朋友认识。比如苹果的 Mac，就有很高的品牌美誉度和忠诚度，用户也很乐意把 Mac 推荐给身边的朋友。
03 四维度的关系
四维度之间存在怎样的关系?
1. HI X 是另外三个维度的基础
HI X 作为基本维度，相当于“水之源，木之本”。如果把用户体验四维度比作一个金字塔的话，塔底的基石一定是 HI X，塔尖则是 HB X。
2. HC X 通常是 HH X 的基础
HH X 的产生，通常离不开 HC X。也就是说，通常得有一个合适的“内容”或“主题”，才能把人聚拢过来。比如结婚的时候，你可以邀请到很多亲朋好友来参加婚礼，但在平时，你很难邀请到这么多人。我们在 B 站看视频的时候，弹幕通常比较欢乐友好，氛围不错，但如果没有这些视频，也就不会有这些弹幕，以及不错的社区氛围。
3. HI X、HC X 和 HH X 共同构成了 HB X 的基础
HC X、HH X 和 HI X 一样，都可以成就 HB X。
以早期 Keep 为例，刚开始只有课程这个功能，也就是说只有 HI X 和 HC X 这两个属性。其中，HI X 还可以，HC X 比较优秀。在此基础上，慢慢发展出了社区功能（HH X 属性），而且做得不错。再往后，有了“自律给我自由”的品牌精神。在课程、社区、品牌精神等因素的助力下，Keep 有了不错的品牌美誉度和忠诚度。也就是说，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。
4. HB X 也可以仅有 HI X 这一个基础
有些产品并不具有 HC X 和 HH X 这两个属性，而是仅有 HI X 这一个属性。单凭一个良好的 HI X，也可以成就良好的 HB X。
比如 Zoom，作为一款开视频会议的工具应用，它最初只有 HI X 这一个属性。但是因为很好用，HI X 很优秀，所以如今的 Zoom 即便没有内容（HC X）和社区（HH X）属性，依然成了一个在全球都很受欢迎的品牌，拥有了不错的 HB X。
总的来说，在四维度的金字塔里面，它们的关系如下图所示。
文章来源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目录
1.百度网盘 ：会员标识
2.当当：搜索记录隐藏
3.当当：分享动效 ➕ 一键制作朋友圈分享海报
4.抖音：点击复制 ID
5.飞书：效率工作—语言自动转化
6.美团：优惠卷新到提示
7.墨迹天气：一键登录（大部分应用已上线该功能，部分应用仍未上线）
8.起点读书：长按可进行互动
9.腾讯视频：亮度调节的动效设计
10.微博：点赞动效设计
11.知乎：删除搜索记录
12. QQ：可隐藏会话
13. QQ 音乐：搜索入口的听歌识曲
14. QQ 阅读：长按复制的放大设计
在开通会员后百度网盘会进行对于应用图标的更换，使得应用图标更加高级，在分享链接时也会加入会员分享的标识。
属于用户激励体系中的一个板块，增强用户的标识和身份。
搜索隐藏功能设定。
我们在使用各大应该的搜索功能时总会遇到过这样的场景，当你要某人或者在某种场景下需要进行搜索时，来不及删除自己的搜索记录出现社死的情况。
而当当的搜索隐藏就可以完美的解决这个问题，退一步讲我们可以思考一下为什么别的成熟型应用，没有采用这样的方式。大部分是没有这个功能，其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。
在当当应用中点击分享进入页面后不同于传统的分享页面，而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。
这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。
主页 ID 点击可进行复制 很多应用都有 ID 。但是当我们要进行 ID 搜索的时候，我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。
目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。
飞书属于一款协同办公类的应用
在飞书的设置用有语音直接转换文字的说明，飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一，所以加入这样的设置可极大的提升用户的体验。
有提示用户新到多少张优惠卷的提示
可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用
一键登录
应用登陆中目前主流为（1.第三方登录，登陆之后需要再次绑定手机号。2.手机号注册登陆，登陆之后可选择是否绑定第三方。3.一键登录，登陆之后可以选择是否绑定第三方）在设计流程中，设计开发者需要尽可能的减少对流程的复杂化。
一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定，除非必要的情况下，我会直接放弃这款应用。
长按页面可以框选当前的段落，并且出现互动选项。
增加用户和用户之间，用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。
滑动可调节亮度
左边的小动效的设计加上右边的渐变进度条，使用户可以更加明确的知道自己所处于一个什么样的观看环境，并且加入了渐隐渐现的出场和入场。
用一个小巧的动效设计帮助用户确定自己的亮度属性，
点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。
增加趣味性和互动性。
清空时会在进行确认，再次点击全部删除方可删除。
在下方列表中可逐一删除，上面清空中不是点击后就全部清空。而是再次出现，起强调和确认的作用。
增加用户体验，帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。
前几天发现的一个神级功能（虽然我已经不用 QQ 进行社交了），当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。
在好友的设置中可隐藏会话，开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。
应用的功能更加多样化满足多种不同的需求。
在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换
搜索歌曲界面的使用场景为：1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下，正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块，把听歌识曲放到搜索入口处更加符合用户场景。
对用户场景进行细致的研究，增加了用户体验。
长按复制会有放大镜设计
当用户处于复制文案的场景下时，由于复制需要拖动，在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里，不需要后续用户在进行删减。
极大的加强了此场景下的用户体验
文章来源：站酷 作者：张阳光Designer
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
GUI（Graphical UserInterface）图形界面，市面上最常见的交互方式。点触，滑动，作为主要输入方式。图像显示作为主要输出方式。
VUI（Voice User Interface）语音界面，常见没有屏幕的智能音箱/耳机，靠语言输入和交流，如我们常见的小艾同学，天猫精灵等。
1973年第一个可视化操作的Alto电脑在施乐帕洛阿尔托研究中心（Xerox PARC）完成。Alto是第一个把计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显示器、图形窗口、以太网络连接。
1981年施乐公司推出了Alto的继承者Star，Alto曾首次使用了窗口设计。
1983年苹果电脑公司推出Apple Lisa个人电脑，是全球第一款搭载图形用户界面（GUI）的个人电脑。
1984年苹果电脑公司推出Macintosh。
1986年首款用于Unix的窗口系统X Window System发布。
1988年IBM发布OS/2 1.10标准版演示管理器（Presentation Manager），这是第一种支持Intel计算机的稳定的图形界面。
1992年微软公司发布Windows 3.1，增加了多媒体支持。
1995年微软的Windows 95发布，其窗口操作系统的外观基本定型。
1996年微软发布Microsoft Bob，此软件具有动画助手和有趣的图片。
1996年IBM发布OS/2 Warp 4，它的交互界面得到显著改善，至今仍有不少ATM机运行这样的系统。
1997年KDE和GNOME两大开源桌面项目启动。
1997年苹果电脑公司发布Mac OS 8，这个系统具有三维外观并提供了SpringLoaded Folder功能。
2000年苹果电脑公司推出Mac OS X系统的默认外观Aqua。
2001年微软发布Windows XP，实现了主题支持。
2003年Mac OS X v10.3提供了一键单击访问任何已打开窗口的功能。
2003年Sun公司的Java桌面系统为GNOME桌面添加了和Mac类似的效果。
2006年微软发布Windows Vista，对此前其视窗操作系统的外观作了较大的修改，实现了Aero功能。
20世纪90年代，诞生了第一个可行的、非特定的（每个人都可以对他说话）的语音识别系统，交互式语音应答（Interactive Voice Response，IVR）系统的出现代表了VUI的第一个重要时期。人通过电话线路进行交互并执行任务，如机票预订、银行转帐、业务查询等。
目前很多像siri、Google这类集成了视觉和语音信息的APP，以及Amazon Echo这类纯语音的设计产品，逐步发展并成为主流。随着语音识别技术、AI技术、互联网技术的发展，我们已经可以在手机设备中用语音处理很多事情，但还有很多事情目前无法通过语音完成，需要我们探索。
交互的多样性：
不同于PC机通过鼠标来点击，在触控设备上通过手指点按，由于手指的精确度相对于鼠标指针差很多，所以子啊移动页面设计当中的交互元素一定得辨识作用，手机并没有悬停操作所以图标如果特征不明显时一定要加文字识别，设计时也应注意图标和菜单元素的尺寸。
拖拽和移动是很相似的交互工作，被拖拽的元素始终跟随着紧贴屏幕的指尖
除了使用单指之外，还可以用两个手指放大，缩小图片，如果设计了一些新的多指交互一定要给用户提示和指导。
智能家居
在智能家居领域VUI应用越来越广泛，相信在不久的将来我们一定能够享受到更多的VUI所带给我们的便利。
辅助驾驶
车载语音交互系统使得我们可以在开车的同时接听电话、听广播等。
企业应用
未来大型企业中将会多领域应用VUI，用于书写、记录等工作。
医疗教育
智能记录病例、管理病例的出入。
过多的声音干扰，不但会增加用户的心智负担，将会引起用户感到厌烦，尤其是，语音在资讯的负荷量上又比单纯的声音来的更多，考量是否存在存在的必要性就放在格外重要。而言，可以寻找替代的方式，透过震动和灯光甚至状态变化来提示，减少使用者的认知负荷，并确保声音只会在特定的时间点出现，并提供使用者自行设定关闭声音的功能
除了声音本身的设计外，还要考虑整体环境的影响因素，可能周遭受非常的吵杂。换句话说，在KTV的包厢，吵杂的环境，会使用者无法听到消防警铃响，而容易造成危险事件的产生。也因为如此，消防警铃的声音频率设计就应该介于2kM到4kM，因为研究指出人类的耳朵对于这个范围的声音最敏感
从音量的角度来看，耳朵对不同频率的音量有不同的感知程度，有些声音听起来很响亮，有些则是很沉闷因人而异，但比较客观的量化体验指标就是分贝（decibel，dB） ，在尺度上超过70分贝以上，会让人产生忧虑不安，并引发各种症状，因此要尽量避免尺寸大小过大的设计， ，，降低主动的侵入性。基于这些因素总和来说，还要考量到用户和产品间的距离，与产品愈近，对于体积的需求量较大，反之为然
在声音体验设计（Amber Case，2018）一书指出，当警告或提示音出现的频率愈高，就应该设计成愈短，但不足就是，如果把声音设计成短而急促，从而使用者需要集中相反地，事件发生时间间隔长且久，则声音提示更需要明显且激烈的声音来提醒用户，例如手机铃声响时，需要告知用户
文章来源：站酷 作者：张阳光Designer
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
组件化思维对于一个设计师来说十分重要，它能够帮助你更好的去进行产品的设计,那么组件化思维对于设计者都起到什么作用呢?
1.符合产品功能逻辑，组件化的设计理念能帮助设计符合产品功能逻辑。
2.有助于保持交互一致性，在一个项目里，选择日期应该是统一的交互方式，在整个产品中就应该只有一种存在形式。所以时间选择器就是一个组件，一个可以复用的组件，如果你没有组件化思维，很可能出现好几个不同的时间选择器，一会儿是流轮拨盘，一会儿是日历，一会儿又是下拉列表，这样的设计绝对是不能上线的。当然该统一的地方还有很多，比如:错误提示的形式，讲度条的交互方式，导航栏和按钮的样式。表单，下拉菜单等等。
3.减少开发工程师的工作量,开发时使用不同的技术,了解不同技术之间的差异,设计时按照每个开发软件的组件来做设计极大的减少了开发的时间.
4.保持视觉风格的统一，在同个项目不同页面按钮等组件的样式上应该保持统一。
5.便于多设计师协作组件化设计是大型设计项目的必要条件，多人协作完成项目时，应当保持视觉统一规范，组件化建立就起到了至关重要的作用。
6.便于修改设计，设计总是需要修改优化的，只需要根据需求调整需要调整组件即可。
针对各种组件的开发软件做了以下介绍,欢迎在评论区进行补充与探讨!
echarts
帮助各行业进数据处理以及分析,一键生成饼图,柱状图,甘特图,折线图等多种图表;简道云的图表分析
各种图示效果样式案例可供设计者参考
https://echarts.apache.org/examples/zh/index.html#chart-type-line
Ant Design
ant通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验,规范设计的设计思维,有丰富的设计资源与组件,对设计样式的表达起到非常好的参考作用
https://ant.design/index-cn
Element
与Ant Design稍加相似,可供设计者作为辅助参考
https://element.eleme.cn/#/zh-CN/guide/design
另外其它的开发工具:
React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目
Hook 可以中文译为“挂钩”或者“钩子”，逆向开发中改变程序运行的一种技术,在逆向开发中是指改变程序运行流程的技术，通过Hook在别人的程序中。需要了解其Hook原理，这样就能够对恶意代码攻击进行有效的防护
Umi 是一个可插拔的企业级 react 应用框架。 插件化 umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成
可扩展 Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直
Vue 有两大特点：响应式编程、组件化。其优势为：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。它的第三方ui库很多节省开发时间。https://cn.vuejs.org/v2/guide/index.html
注: vue是我们的常用框架，大多数客户的选择。ant➕react➕hook➕umi，中后台这个也比较多，最近的项web端的基本上是这两种选型。
其它常设计有wpf/qt/mfc/开发，在c++或c#下运行的客户端程序
其它例如:
Bootstrap 是Twitter推出的一个用于前端开发的开源工具包。是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷
https://getbootstrap.com/docs/5.1/examples/
developer与material汇聚了ios、安卓组件框架及人机交互指南,相关链接:
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://developer.android.google.cn/docs/quality-guidelines/core-app-quality
https://material.io/components?platform=android
蓝蓝设计—— 作者：纯纯
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
先举个例子来理解一下：我要点击手机上的确认按钮所需要的时间，和 手与按钮的距离（D） 按钮的大小（S）有关。 当距离越长，所需要的时间越长。当按钮越大，所需要的时间越短。
这里是说合理的大小。一般来讲越大用户越容易到达，但是屏幕的大小是一定的，某一按钮/目标越大就会降低其他按钮/目标的大小。所以大小是相对制衡的，要根据具体情景和需求制定合理的大小（包括肉眼大小和实际热区大小）。但是关于手指点击的最小热区有规定是44x44px，一般的图形的热区大小都要高于这个大小，才能便于点击。其他大小要根据功能需求进行制定。
相对距离指的是界面内部各个元素与控件之间的距离。一般通过研究 整个流程 的交互动作，相互关联的操作元素/操作手势 距离会相对比较近，这样能有效减少操作的时间。
屏幕边界是可以确定的（鼠标向某一方向一直移动终会停留在屏幕边界），但是屏幕中央确是较难确定的（四个方向鼠标均能延展出去）。一些重要和主要的操作放在屏幕的边界，可以方便用户快速到达，也是菲茨定律的普遍应用。
业务目标有时候是与用户目的是相违背的，也需要根据具体场景来判断菲茨定律的使用走向。在特殊情境下也会通过距离和自身大小来反向增加使用时间来完成目的。
选择增加也就意味着事情可以发展的方向更加多元化，用户就需要权衡事情该往哪个方向发展，而这就需要时间。不要让你的用户思考太多，所以一般给出的选项在满足需求的情况下要尽可能的少。（这里注意：一般情况下要少但也不能太少，强迫用户也是不可取。）
事情越复杂，越难处理。尽可能的将复杂的事件通过交互或者版式等手段进行简化，让用户觉得容易把握，而不是大量事物/流程/元素的堆砌。
同一类型或者同一层级的元素出现，数目一般控制在5-9个。
面对有大量信息的时候（数字/文字/段落）将其分割到5-9个等大脑容易记住的数量。
看到了有一些设计并没有按照米勒定律去执行，因为随着时代的发展，有一些定律并不是万能适用的。定律不可照搬，要根据具体情境去做取舍，以最终效果为导向。
在面临很多复杂功能时，简单的堆砌显得啰嗦，需求又不能随意删减。这时候就可以将相类似的功能放在同一个组别里面进行收纳整理，这与席克定律也相接近。
这里与视觉设计也有很多重叠，即落实到页面的高保真的细节。保证内容想接近的元素间距要小，内容有区分的间距要大。
事物的复杂性是固定，但是要思考你所面对的是最简程度的复杂性么。首先优化内部系统的整个流程和不必要的步骤能够有效降低系统本身的复杂性。
再把复杂性降低到最低程度之后，事物/流程仍然表现出一定复杂性时。就要考虑造成复杂的元素是什么，是否要将造成复杂的元素进行收纳组合，甚至隐藏。
想清楚这张界面的主要目的是什么，顺着这个目标去引导用户，其他元素的视觉层级要让步，来让用户抓住重点。
少代表流程/步骤/界面元素的减少，多意味着用户量的增加 体验感的增强。
产品在功能迭代改版上，会出现大量不同的声音和方向。但功能不是越多越好，用户的时间是确定的，在某一功能上消耗的时间长，在其他功能上就短了。奥卡姆剃刀就要求我们找到主功能点，其他功能点要做出让步妥协甚至砍掉。
有一些功能在你操作之前就禁止操作，避免了错误的发生。或者通过告知操作之后会产生的不良后果
在操作过程中，进行错误提醒，有效避免错误的进行
用户在使用app的过程进入错误的路线，需要给用户弥补的机会
倒计时会给人一种紧促感，逼迫用户去注意，无形之中给用户规定了任务，这个任务也就是咋们的业务目标。倒计时 读条等交互方式也应该谨慎恰当使用，因为不是每一个任务场景都需要给用户紧迫感。
这一点也是利用未完成任务的相关信息反馈达到让用户去完成任务的业务目的。
创新意味着改变，改变的不仅仅是你的界面还有用户习惯和长久以来的认知模型。破坏习惯重建习惯是有很大风险的。
其实能看到很多Dribble页面很有特点，也不是完全没有落地性，但是实际国内产品并没有看到这样的设计，原因就是不符合雅各布定律。
这一点好像和上一点有点相悖。但是其实也不违背，有很多分寸的拿捏往往不是理论能完全决定的。微信后来居上绝不是因为照搬qq，如果新的创新带来的优势能够弥补不相同所带来的不足，也是可以尝试的。
文章来源：站酷 作者：花城丶
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
保持好奇，巧妙融合，追求卓越，自然而然
文章来源：站酷 作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com