地图基础知识及通用设计原则
Part 1. 地图的发展
地图作为记录地形传递路线信息的载体，在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化，从石板、动物皮革，到丝绸、纸张。当互联网走进千家万户，地图也步入电子化时代。
相较于纸质地图，电子地图优势显著：更新速度快、获取信息效率高、更清晰、可交互等。电子地图（后文简称地图）的出现也影响着人们的出行方式，尤其当智能手机普及，我们可以随时查询地点、发起导航，再也不需要提前记下高速出口和转向路口了。
Part 2. 地图在滴滴的重要性
滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务，是一站式出行平台。而地图作为承载出行服务的重要载体，横向支撑着各业务线的发展。以网约车业务为例，调研结果显示绝大部分乘客都会关注并使用地图。
随着各业务线对体验的要求不断提升，单一的地图模式已经不能满足业务诉求及用户需求，需要进一步细分场景、精细刻画地图样式，于是地图的设计也变得愈发重要。
Part 3. 解构地图
地图承载的信息种类复杂、数量巨大，初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式，或许就能从中找到答案。
定义：地图是依据一定的数学法则，采用地图语言，经过制图综合来表示地球表面的图形。
实现流程：
采集真实世界的地点信息，经过编译转化成数据
数据信息中包含了地点的坐标、分类、名称等
数据经过渲染形成可视化雏形地图
雏形地图经过设计最终变成策略完整、视觉美观的电子地图。
结合“从雏形到完整地图”这一步流程的实现方式，进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。
基础层，指的是地图的数据和能力。数据大家已经有所了解了，能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础，才能设计出信息精准、交互明确的地图。
策略层，则指的是如何使用这些基础数据和能力。地图数据量非常庞大，无法全部展示，需要结合不同的场景及用户需求，有重点的呈现。
感官层，便是我们给数据穿上的衣服，会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。
解构地图后，我们不难看出，感官层是设计侧需要关注的重点层级。
Part 4. 地图设计原则
面对如此复杂的地图信息，为了梳理出清晰的思路，我们会对地图元素进行分类：根据数据的类别和呈现状态，可拆分为点、线、面三类元素。
点元素：地名、POI*等。数量庞大，是城市规模的体现，尤其POI信息，它是地图中颗粒度最细的位置信息。
线元素：道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等，描绘出了城市的样貌。
面元素：陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现，很大程度上决定了一张地图的色调。
*名词解释：POI, Point of Information的缩写，即“信息点”。一个POI可以是一栋房子、一个商铺。
*名词解释：AOI, Area of Interest的缩写，即“信息面”。指的是区域状的地理实体，如医院、小区等。
- 核心设计原则
从定义可以看出，地图是一种特殊的图形语言，是以上所有元素的集合体。相比我们所了解的UI设计、运营设计，地图有属于自己的设计原则。以下为大家总结了一些核心的原则：
1、符合制图学和公众认知
地图发展到现在已经成为了一门学科，我们会发现即使语言不通，拿到一张地图时也能看懂，这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知，大大降低了用户的学习成本和记忆负担，使地图可以作为一种世界通用语言流通起来。
2、保证识别度
地图属于信息类工具，其上出现的元素均需清晰可识别，保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等，而具体规则会根据场景确定。
3、清晰有层次
地图的层次清晰包含了两个方面：信息主次清晰，视觉具有整体性。
信息主次清晰，地图信息庞杂，没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性，可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性，不同元素有差异性。同时，信息主次也会根据比例尺的变化有所调整。
视觉具有整体性，在滴滴的业务场景中，地图通常作为最底层组件出现，上层还会有很多业务组件。因此在设计时需克制用色，既要保证地图中各元素之间的区隔度，又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点，提升整体的使用效率和体验。
4、细分地图模式
地图在各业务模块中应用广泛，用户需求也不尽相同，设计时需要根据使用场景区分不同模式。以网约车场景为例，业务信息始终处于上层，地图用来帮助用户定位、快速发单。因此，网约车场景的地图整体性强、色调偏冷、视觉层级后退，能更好的搭配网约车模块的整体设计，保证用户的操作效率。
5、具有品牌特性
品牌调性一直是滴滴设计层面非常关注的原则，品牌基因贯穿了所有产品，始终具有独特的视觉风格。遵循品牌的视觉语言，使地图可以更好的融合到产品中，保证了设计的统一性。
文章来源：站酷 作者：CDX创意设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为大家梳理一个web表格设计框架，希望能够给大家带来完整的不一样的内容。全文12,598字 ，预计阅读30分钟，建议收藏。
在网页或桌面端为载体的B端产品和生产力工具中，越来越多的设计师需要和数据打交道，查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一，表格被公认为是展现数据最为清晰、的形式之一，也是世界上最常用的用户界面工具，其重要性不言而喻。
表格，展示行列数据，既是一种可视化交流模式，又是一种整理数据的手段。表格帮助我们组织和展示信息，同时保证信息的可读性，从大量信息中找到所需内容；通过合理布局，感知不同信息间的关联与区别，进行分析和比较；对数据进行排序、搜索、分页、自定义操作等复杂行为。
表格的行元素和列元素行和相交就会形成一个简单的二维表，行，列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局，分别强调行、列、单元格。
水平型会弱化列的存在，强调行信息的连贯性，适用于用户阅读信息时是从左到右，然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线，单元格比较明显，适用于列信息较多而没有足够空间用留白来分割信息的表格，同时我认为单元格合并的情况也属于矩阵型。
还有比较常用的表格类型层级型：
层级表
是表达结构性关系的表格，表现得如同树的分支，所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息，也包含嵌套子表格。
层级表并不如矩阵表直观，但通过结构化的组织方式逐级展示表的数据内容，让整体信息架构一目了然，非常适合大型数据表。
结合层级表的使用场景，多以查看为主，编辑需求较少。
同时还有特殊的表格类型，图表型与卡片型：
图表型
除了在单元格中引用图表之外，很多时候都会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式，这时候，表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。
卡片型
可以用卡片的形式来展示信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又形成一个整体。
卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
注：在有限的表格空间内需注意卡片信息之间的间距，若卡片信息过长可做截断处理。
在实际工作中，上述表格类型还有可能互相结合，以更好的达到相应的分析目的。
比如垂直–层级，矩阵–数据立体表等。
从视觉结构的表现角度，个人将“表格”的构成分为：标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域，由标题、筛选操作、底栏构成外部区域。
标题是对表格信息内容的整体概括，可包含数据来源及属性(日期、地区等)，以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题，与其他的设计同等重要。有了好的标题，表格就可以独立使用，如果导航菜单层级清晰，同样能起到标题的作用。标题作为最重要的识别元素，默认展示在左上角。
这里特指位于表头的上方的操作区域，包含筛选，操作按钮等其他操作。筛选区包含模糊搜索和条件筛选，按钮分为增删改和其它业务处理操作，合理设计筛选区可以大大提高用户的效率。
表头对数据性质的归类。表头按惯例要对数据的简况做出反映，如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯，保证用户理解。如果有需要解释，则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签，是对所属行或列数据的描述。
除了容纳行/列标签之外，表头也可以进行排序、搜索、筛选等。
表体是表格的主体内容，具体信息数据内容的填充区域，由一个个基础的单元格组成，单元格是表格呈现数据信息的基本单位，可以是计数、百分比、均值、"-"等任何数据。表体包含数据，分割线，背景，单元格数据可进行点击操作，如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。
表尾一般是统计类数据，例如合计、平均数等。表尾使用频率较少，且重要性明显不如表头，我就把它归到表体这类。
底栏在表格最下方，主要展示正文中的数据量或单页数据的概览信息，也常提供统计功能，供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
底栏最常见的元素就是分页，分页可以放在头部或底部，常见的还是放到底部，分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等，需要根据不同的场景选择最优的设计方案，比如有的时候并不需要定点跳转。
无限滚动可以替代分页，但对于功能优先的应用未必适用。下图为查看更多按钮，比较少见：
同时，在选中操作的下，操作按钮也可以位于底栏，在未选中时操作置灰。
采用格式一致外观，突出有利于对象识别的关键信息。
合适的填充和边距对于视觉设计至关重要，既包括保证数据单元格之间的留白，又包括单元格内部留白，以保证易读性，当创建表格设计规范并严格遵循后，就可以创建视觉一致的表。表格本身应具有最小宽度，在不同画面中宽度应可以增长到整个空间，所以每个列也需具备最小宽度。如果页面宽度小于表格，那么表格应水平可拖拽。
数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
正如连续律所描述的，人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体，倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。
数字应该右对齐
在表格中，诸如金额、数量等数值排列时，通常采用“右对齐”方式，既方便用户快捷读取数据，还可以使用户进行纵向数据对比。数字是从右向左读的，是因为我们对比数字时，首先看个位，然后十位、百位。当个位数值对齐时，我们就可以快速查看前面的数值，比较多个数据的大小。因此，表格的数字应当右对齐。
当我们常用的字体如果不同数字宽度不一致时，会导致千位分隔符不在一条直线上，所以要选择数字等宽的字体，等宽的数字在同一竖线时更容易对比。
文字信息左对齐
因为我们阅读文字信息是从左向右读，如果不采用左对齐，会降低浏览文字的效率。
混合型文本左对齐
当数字、文字、字母组成混合数据时，标题和正文左对齐，使用了一个视觉起点。
在实际工作中，主流框架组件，表格列数据对齐同时针对分割线，虽不是完美中的对齐，但开发成本低。
不论何种对齐方式，都需要考虑到该字段可能存在的极端情况。如：普通文本若过长，可在鼠标悬停状态时单元格展开列出全部字段信息。
一般表格具有的颜色尽可能少。颜色和可读性是密切相关的，要合理的使用颜色，普通表尽量使用简单的背景色和点缀色。背景色方面，除了行/列交替颜色(可以区隔内容，引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法，还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。
分割线颜色尽量不要与背景色相差太大。当字体选择深灰色，背景为浅白色时，边框选择浅灰色，这样可以减少我们视觉疲劳，不会使表格看起来令人生畏。
表头标签应该简炼准确，以达到节省表头空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。当然对于产品而言，先能把事情说清楚，再考虑文字的简洁性。
当数据结构比较复杂的时候，使用多级表头来体现表头与数据的层次关系，如下图：
当数据有看不懂或生僻的信息时，用户期望有人告诉他为什么会这样，就需要在表头标签后加上小问号，鼠标悬停弹出说明文字的提示框。
不需要表头
如果表格数据可以自我解释，表头就可以不需要。电子邮件的表格是一个好例子，邮件主题，发送者，发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。
所有行按逻辑排序，比如按风险由小到大，将最安全的操作放最前面；或按照信息时间排序，由新到旧，以创建时间进行排序，即创建的排在最前面。
行高是非常重要的参数，直接影响着阅读体验。较小的行高承载更多信息，让用户无需滚动鼠标即可看到更多数据，但会降低扫描效果，导致视觉解析错误。适宜的行高使得数据更易于被阅读，但这不代表行高越大越利于阅读。
设置行高的原则：
A.单行数据显示时，数据显示紧凑、有序。
B.多行数据显示时，弱化表格形式，提供丰富的视觉展现。
因此，对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；对于多行显示的表格，建议内容区到上下边框的距离略小于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。
斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显，同时加强视觉流的横向引导，避免在阅读表格时出现迷失情况，要注意两种颜色不能反差过大。另外，可以根据实际情况选择是否与边框同时使用。
有时为了强调行内信息的连续性，可去掉单元格的纵向分割线，仅使用横向分割线和底色分割，使横向信息更加连续通畅，以提升阅读效率。
表格还可以通过颜色来指示状态，颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。
同时可以对行内信息进行扩充，进一步弱化表格形式，丰富各类信息的视觉呈现，同时兼顾行与行之间的关键信息的对比，如上文表格布局提到的图表的使用。
尽量减少列的数量，关注用户需要的必要信息。当数据列过多时，要分清主次列，非重点、辅助性信息可以通过次级入口来解决，如固定重要列(主体名称/操作列)，次级列在表格中间区域左右拖动。
列宽严谨的处理方式有三种。第一，通过栅格，由列的数量决定列宽，主流框架组件一般是这种；第二，可以固定部分列的宽度，其余列则按百分比处理；第三，在固定宽度的基础上，允许用户自由拖动调整列宽的大小。（当然我觉得不要太拘泥这个，合适就好）
为便于用户对数据进行对比分析，可以在原始数据的基础上给出差值、升降变化等数据处理结果，减少用户数据加工的过程，直达用户获取信息的目标(需要明确用户目标)，提高用户的阅读速度。
一般列的强调是配合列排序功能使用的，如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔，增加同类信息的对比性。
其中的关键区别在于数字的大小。数据的度量单位无需重复，一般在表头标识清楚即可。
一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零？正确做法是，对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下数据格式保持一致；对于没有数据的单元格，通常是用“－”表示。
B端后台数据类型较多，最好能为空数据做出释义，可以在“列标签”或底栏给出解释文案。
单元格的宽度根据列中字符的长短自动变化宽度，超过该列宽可以省略显示，末尾以"..."显示，鼠标悬停时出现气泡显示完整内容。
比如用户重点关注数据状态、某些数据的上升和下降等，可用符号进行标识，帮助用户快速定位到目标信息。
水平分隔线，能显著减轻表格在垂直方向的视觉重量，内容更加条理清晰，便于用户对比查看数据。
垂直分隔线，在表格中使用适合的对齐方式后，那么就可以省略；数据量级比较大的表格，列之间过于紧密时建议保留，可以使用较淡的分隔线，将不同列数据区分开来，提升浏览速度。
下图采用了同时使用水平和垂直分隔线：
如果在表格中使用适合的对齐方式，分隔线就是多余的。但由于表格数据量级不同，即使要用，分隔线也要淡，不能妨碍快速浏览。
在web端，表格的的数据内容超过一定“数量”时需要提供翻页功能，这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定，原则是不要超过一屏，考虑到每个用户的使用习惯，可以让用户自定义每页的显示的数量。相比于跨屏翻页而言，向下滚屏会更便利，在下文控制表内容中展开比较了无线滚动与分页。
分页控件内容 ：用户自定义每页显示的数量，当前页码(行数)，全部数据的页数(行数)，向前翻页，向后翻页，到达第一页，到达最后一页等。
当用户的数据未超过一页时，可以隐藏翻页控件。翻页按钮不可用时，须给出置灰态或不可点击。
分页控件做为筛选数据的一种方式，通常可以结合排序、筛选等其它控件一起使用，来提升用户的操作效率，如网易的邮箱，翻页与日历结合使用，对于有大量邮件数据的用户来说，查阅邮件的效率更高。
除了无限滚动，还有第三种翻页方式，鼠标点击“加载更多”按钮以查看更多数据。
干净的表格使人愉悦。特别是在处理大量数据时，巨大的数据量会增加用户的压力，因此要减少视觉干扰。删除不必要的分隔符与背景，去除阴影等。信息内容的有效传达是表格设计的本质，让用户注意力聚焦在核心内容上。所以，做减法设计就显得可贵了。
实现简化的方法是适当删减。如果画面视觉很糟糕，请删除辅助信息、不常用的控件和分散注意力的样式，但要小心删除必要内容。“简单并不意味着没有杂乱，这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive
这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量，加快数值的对比效率。但如果在表格中使用适合的对齐方式，竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离，明确了单元格范围。即使要用垂直分割线，也要淡，不能妨碍快速浏览。
不使用斑马线，使用不同底色区分指示不同类型的数据是有必要的，但是用来区分同一类数据，斑马线在很多时候又是没有必要的，因为水平分割线已经明显区隔了。
省去分隔线，对于较小的，动态性较小的表，可以省去所有分隔线，并获得醒目的外观。当然，这更多是数据量不大且易分辨的情况。
运用彩色表达组织或含义可能会增加误解，并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。
其他图形元素，如星号、三角、圆点、对勾、叉等，虽然能够帮助组织数据、更直观的传达信息，但要注意数量，物极必反，要注意克制这些元素的使用。
优秀的表格交互给予用户操控感，不让其迷失在数据中。提供便捷的过滤筛选组件，配合鼠标悬停、点击、框选等操作，方便用户查看更多数据信息，快速定位目标数据，或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合，用一些习以为常的交互去操纵表格时，用户将更清晰、有信心、提效率。
筛选和搜索是用户目标数据的好方法，这是一项基本功能，可让用户从默认的表格数据轻松获取要查找的内容，在数据量较大的表中特别有用，一般位于表上方的操作区域或表头区域。
当表格的数据量较大时，可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率，且能同时使用。提供多维的筛选和排序，是增加用户效率的有效方式。
输入搜索框输入用户关心的内容，既可以实时筛选，也可以点击触发，一般须支持模糊查询，否则用户必须记住所有内容，才能查出要找的目标项，成本过高。也有特殊情况，如保密性较高的账号密码列表查询需输入。
无论手动查询还是自动查询，如果查询条件是组合的几个，那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时，组合条件的查询显然是更合理的。
如果筛选操作是单个条件独立查询，各个筛选条件都是相互独立的，那么最好填好一个条件便自动查询。
筛选条件有时候既需要汇总数据的，又需看单一条件下的数据，比如状态包含“待付款、待发货和待收货等”，此时则是做成Tab单选较好，如下图所示。
放置在表头标签上的筛选，受列内容的影响，一般做单次筛选。通过对表头标签旁按钮的点击，使用户更快捷进入到自己的筛选条件中。通常，表单越左的列数据越重要的，也是筛选频率与需求最高的，因此高频的筛选场景基本可以得到满足。
垂直滚动时，固定表头可以让用户明白当前单元格数据信息的属性和含义，体现界面友好性。当数据列差异不大，用户不能直接根据表格数据分辨类型时，尤其需要固定表头。当表头有操作时，固定表头更能提升使用效率。
数据列表相当庞大而复杂的时候，使用固定表头可以帮助用户区分列与属性。
当呈现大量数据时，表包含的列数超出了该表的最大宽度，水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式，从左到右放置关键列。最左侧的列会引起最多的关注，当我们感兴趣时，才会查看其他列，它会影响用户阅读所需时间与精力。
在大型表格中，我们才可以水平滚动，最好是寻找可替代方案。表格中文本为什么这么长？能减少字数嘛？可以将文本换至第二行以减少水平宽度吗？能否为过长的文字选择别名吗？可否用图形条目取代？是否可以采取工具提醒？是否可以安排在窗口或对话框里？
一般有两个解决办法：文本换行，对它缩排；在单元格区域截断文本，在提示中显示完整文本。方法一意味着我们要增加表格高度，且每行高度可能不同；方法二，如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。
表格初始有一个默认排序，也叫初始排序。但有时，用户希望将表格中某一行位置换到另一位置。
拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是，事实上，拖放过程涉及到了大量细节，在拖放期间，需要处理许多特定的状态。
用户在拖动模块时，页面整体布局基本保持不变。因为移动的不是模块，而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小，有拖曳排序需求的场景。又可以运用在多个表一起的情况。
穿梭表格
就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框，同时支持表内上下拖拽更换位置顺序，也可直接选中对象在两栏中按钮移动，完成拖拽行为。
那如何让用户知道可拖拽呢？
增加意向符号；改变光标样式；增加被拖拽对象临时性底色，突出显示。
如何让用户知道怎么拖拽到哪里？
被拖入区域应增加插入位置符号，可以明确指出放置模块的目标位置，减少用户困惑，也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果，超出表格范围拖拽对象消失。
被拖动对象应呈现为轻微透明的样式？应该显示为完全不透明？或者改为使用缩略图表示？我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见，有助于用户预览最终放置后的结果。从而方便用户查看页面，也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位，或者说正处于过渡状态。
排序又分为降序和升序，比如，事件相关的表格，默认时间降序排列；风险相关的表格，默认安全降序排序。
表头排序可以辅助用户快速挖掘出需要关注的信息，发现数据信息之间的关系，一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时，则需要标识出可排序操作的列，一般采用三角箭头做为标识，实时反馈当前操作状态。
可伸缩列
由于存在多个数据标题和列，我们只能根据表格的宽度来展示数据。在某些情况下，表格可允许用户选择他们关注的列，在其固定宽度基础上，让用户可以自由拖动列宽边缘以调整列宽。
自定义选择列
由于数据报表，往往需要满足各种不同的角色在不同场景下的需求，因而在表格数据显示上，一般采取宁多勿少的原则，即尽可能提供详细的数据，由此会数据指标过多，难以在表内完整展示，导致需要水平拉伸，降低了表格的可读性。
针对上面这个问题上，可将所有的指标名称罗列在表格上方，并提供多选操作，在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样能让用户在表格上方看到所有指标名称，避免了原来需要水平拖拽而导致指标浏览不全的情况。其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。
B端后台通常会对应不同的角色及不同的需求，可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。
控制行高
较小的行高让用户无需滚动页面就能查看到更多的数据，但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。
树形表
行也可以结构化分为不同的类别，前面提到了层级表/树形表，可以嵌套子表格，展开和折叠。可操作按钮一般位于各级行标题左侧，具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。
分页可以将表内容信息划分成独立的页面来显示。
优点：
1.良好转换：当用户是在结果列表中查找特定信息而不仅仅浏览信息流时，分页就是好的选择。你会知道表格总量与当前页的准确数量，能够决定在哪里停下或者去哪里。
再次寻找特定数据时，分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页数字，但一般能记录大概范围，而页码链接能让用户更容易到达那里。
2.掌控感：无限滚动就像个无止境空间——无论你滚动多久，你会感觉永远结束不了。当用户知道可用行数量时，他们可以自己主观做出决定而不是被动滚动。同样的，当用户能够看到结果的数量时，他们将能够预估他们查看表数据大概要花费多长时间。
缺点：
额外的动作：在分页方案中，用户要到达下一页表内容，就必须点击分页控件上的按钮跳转，等待表格新内容的加载。
表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容，虽然十分方便与诱人，但不是什么场景都适用。
优点：
1.浏览：无线滚动提供了一个的方法让用户浏览表数据信息，而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时，他们需要通过查看大量内容找到自己中意的信息。
2.体验更好：用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易，对于那些连续且冗长的内容，无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时，使用无线滚动更能节省空间。
缺点：
1.受限性能：页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动，缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动，就会加载更多的内容，当数据量过大时，结果就是页面性能越来越低。
2.位置丢失：无线滚动同分页相比，没法标记当前位置且不能再随意回到之前位置。一旦离开，就会丢失当前的浏览记录，如果要回到上次的位置，必须得重新滚动去寻找。当用户有这种行为的话，无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部，不得不重新滚动等待结果的加载以继续查看。
3.信息缺失：滚动条并没有反映出实际数据量。假设快要接近底部了，当受到引诱滚动条再滚动一点点时，结果却会发现表格数据量又刷新了。从一个可用性的角度来说，打破滚动条的正常使用规则对用户来讲是糟糕的。
一般来说，无限滚动适用于在数据有限且信息重复的表格，有利于内容探索。分页则适用用户在寻找特定信息及浏览记录，易快速访问。
表格内容的取舍要建立在对业务的了解之上，尽量精简指标，隐藏不必要信息，减少干扰，避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量，建议默认只展示用户所必须的信息，其他次要信息通过展开下拉等方式展示，为辅助信息提供深层入口。
展开行允许用户无需打开新页面在表格内即可查看附加信息，防止用户迷失。
表格中打开表格，表格组节把相关的行组合在一起，并且能够收缩和展开，各组节层级要有样式区别。如有需要，在每个组节里可以显示数据概要信息。
包括模态弹窗和非模态弹窗，模态弹窗是仅支持打开一个弹窗进行详细查看，非模态弹窗是可以同时打开多个，并允许拖动弹窗位置进行信息对比。
模态允许用户留在表格视图中，且更多地关注附加信息和操作：
非模态弹窗对于主动使用的用户来说可能很有用，可以通过一系列操作，比较不同行数据的细节：
可以通过视图切换查看更多细节，比如在“表格”和“左列表+右详情”之间切换，或者提供“只看文本，看文本和缩略图，只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。
编辑表格数据在大众化的Web应用程序中并不常见。不过，在企业级Web应用程序中，表格则占据统治地位。此时，最常见的用户需求，就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。
表格数据的操作大体可分为显性与隐性。显性操作，指操作选项显示在行内，直观明了；隐性操作，当鼠标悬停时或勾选才显示操作选项，界面简洁明快，可减轻空间压力，减少干扰。
操作项一般存在于行数据最后，为固定列，或表上方位置，两者对应多种操作场景。
单行数据操作
文字按钮操作项一般不多于三个时，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将操作折叠收起，点击更多弹出多个操作选项。当操作按钮致灰时，鼠标选中可显示原因。
如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可使用隐形操作，鼠标在行区域悬停时，可对当前行背景作出区分，或放大悬停区域，同时行尾出现可操作按钮，进行行操作。如谷歌邮箱：
批处理操作
对于数据批量操作的场景，建议将操作放到表格上方，与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏，如果空间限制导致操作按钮排列不下，则使用“更多操作”按钮。
二次确认提示：对于用户操作结果给出提示窗反馈，用户点击「删除」后，直接操作；出现提示框告知用户操作成功，并提供用户「撤销」的按钮；用户进行下一个操作或者15s内不进行任何操作，提示框消失，用户无法再「撤销」。
在执行某些无法撤销的操作时，点击删除后，出现模态弹窗进行二次确认，在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认，就既打断用户心流（无法将上下文带到弹出框中），也无法避免失误的发生。
数据较多时，单个选择数据费时费力。单选框是只能单选，而复选框是能选择单个、多个或全部选择项，而实际上纯粹的单选很少见，所以建议一般场景下在表格最左侧加上复选框，如前面说到的批量操作，多选后，就可以批量操作。点击选框所在行的局部能让整行被选中，每个选定的行都接受突出显示处理，这种做法可增大点击区域减少界面的混乱。
具体设计时，可以按照数据类型进行选择，如邮件已读、未读等。
可进行选择的表格需告知用户已选数据量，在翻页时是否允许跨页选择；全选是当前页视图中的所有项目还是选择表格中的所有项目。
针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性，表内编辑一般优于弹窗。要启动编辑功能，必须通过鼠标单击，而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发，鼠标每经过一个单元格就得显示一个编辑框，那这种编辑模式就会干扰到不同单元格间的切换，会有多么烦人。
单元格编辑：针对单个，不连续的可编辑的单元格，为了让功能更容易被发现，可以在单元格数据旁放置编辑图标，这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑，单元格内出现输入框，保存数据并退出。有了这个随时可见的链接后，编辑功能就更容易被注意到了。
单元格编辑时，也可以设置整个单元格为热区，以便用户触发。
覆盖层编辑：点击编辑图标触发；通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面，但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层（如对话框）作为编辑窗口。
选择覆盖层编辑而非行内编辑的原因也很多。有时候，不可能把某个复杂的编辑任务安排在同一个页面中完成，如果嵌入页面的编辑区域太大，会因为把内容过多地推向下方而损害页面的整体感。
而其他情况下，也可以选择中断当前页面流，尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格，而且页面的上下文对编辑任务也不重要，就可以考虑使用覆盖层编辑。
行编辑：针对同一行标签下的数据编辑。新增数据行后，视图定位到新增的行并高亮显示，让用户快速聚焦。几秒后高亮消失，以免过度干扰用户。
不过，表内编辑图标会涉及平衡页面中视觉干扰的问题，如果功能及其提示在页面中的数量过多，很可能造成功能的利用率下降。如果一行有多个编辑选项，则可以适当使用弹窗编辑数据；如果表格有大部分单元格数据需要编辑，则可以全局编辑。 
全局表格编辑：点击表格编辑按钮，当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标，进入一种特殊得编辑状态，不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时，如大型填写报表。
大型数据表由于支持编辑数据处多，这种方法的另一个问题是容易填错单元格，想象单元格的密集，用户意外编辑错误也时有发生，这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正，应直接引导用户更正；如果报错内容不可被更正，则告知用户原因。
大型数据表如需减少与表格无关的视觉干扰，提供表格的沉浸式阅读体验，可提供全屏查看的入口，但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容，只留下表格区域，用户通过ESC键或按钮随时退出全屏模式，学习成本较低。
当表格数据为空时，在表格的空白内容处加入可创建的快捷入口，引导用户新建表格数据，或者导入数据。如下图邮箱已发送邮箱为空时：
当没有创建诉求的，直接告之暂无数据。如数据是系统产生的，不是由用户创建的，直接告之暂无数据，话术的表述则需与后台文案的整体风格保持一致。
个人关于web表格设计的看法基本写完了，在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变，没有绝对的规范，只有相对的规范。我们要理解规范背后的原则，推导出适应其他场景的规范。
文章来源：站酷 作者：小龙哈
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。
APP UI设计一直在变化，就像网页设计一样，不停的创作新鲜、友好的产品，设计师要跟上这个趋势，最好的方式就是多看优秀案例，下面大家一起来看看今天的精选，建议访问官网查看更详细的展示哦！
手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了12款优秀并富有创意的交互作品，为你的产品设计注入灵感。
--手机appUI设计--
（以上图片均来源于网络）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
更多精彩文章：
内含2020天猫双十一全套设计高清图集
友情提示：史上最全案例解析，2020天猫双十一全套设计高清图集可在文末找到获取方式。
一年一度的双十一今年又迎来了高峰，在今年全球疫情蔓延、国际局势风云突变的背景下，天猫双十一再一次刷新世界的认知，把世界记录推上一个新的巅峰。
「 罗马不是一天建成的！」
天猫双十一的奇迹，也不是一蹴而就。
奇迹的背后，是所有人十年如一日的自我挑战、追求的共同结果。但同时，对于阿里小二来讲，双十一也成为了一项无比艰巨的任务，他们需要在所有人的期待和关注下，顶住压力给大家一个惊喜。
这其中，就有一支神秘的队伍：天猫双十一品牌设计团队，正是他们在背后持续的耕耘，不断刷新“双十一”的颜值，在潜移默化间，让一个购物节，开始真正拥有了“节日”的味道，让设计和设计师，在整个双十一中发挥出越来越重要的价值。
他们有着怎样的坚持？又是如何突破自我？相信听完他们的故事，你自然就会有答案。
2020天猫双十一主LOGO
多语言版本LOGO
今年是双十一的第12年，基本上每年双十一品牌设计一发布，我和团队就会陷入深深的焦虑。“明年你们打算怎么玩？”熟悉我们的朋友总是在和我打趣，其中一半是玩笑，一半也确实是我们内心的真实写照。
记得前两年我就提到，天猫双十一logo可能是最难的logo之一... 他的难点在于，在「 猫头+11.11 」框架不变的基础上，我们如何在仅剩下的20%设计空间中去传达每年不一样的主题，赋予双十一1个新的内涵。
一年一度的挑战
其中最大的挑战，还是这个符号本身，这些年我们以每年几百个方案的量来尝试不一样的表达、能玩的形式基本都尝试了个遍。
在今年项目最初期，我确实也在想，“不就设计个logo嘛，想这么多有的没的干嘛？”所以，我们倔强的尝试从纯粹的设计形式上去寻找突破口，在出了一版又一版的方案之后发现，要么似曾相识，要么完全看不懂... 这显然是一条不归路，但时间的压力却摆在那里。在这个关口，我们将何去何从？
LOGO前期DEMO
一个声音开始不断在脑海中响起：「 全局着眼，细节着手 」
这些年，每当项目进展陷入僵局的时候，我都会想起它。
“全局着眼”讲的是不能单一、片面的看问题，要把事物放在全局里考虑，不仅要考虑事物本身，还要考虑它和其他事物的联系和关系。只有这样，才能洞察到事物的本质，往往无从下手是因为看的不够广，不够深，找不到切入点，“眼盲所以手瞎”。
“细节着手”讲的是全局的思考最后要巧妙的落在细节上，深入浅出，用细节的力量触动人心。
共创过程
那么，我们应该如何“全局着眼” ？
首先，回到设计的本质来看，“设计的本质是将一个想法和观点，通过设计的转译，巧妙的传达给受众。”其中的核心是要先要找到“想法和观点”，而“想法和观点”来自于如何通过一个全新的视角看待原本熟悉的事物。
因此，团队的小伙伴们，开始在不断的问自己一个问题：对于双十一，我们还有什么新的想法和看法？“全年最便宜的一天”、“购物狂欢节”、“买买买”、“不只5折”…这些都是大家耳熟能详的东西，是不需要去说而大家都知道的事。
那么今年这个双十一，又和过去有什么不一样？
今年确实不平凡。
疫情产生的连锁反应，影响到每一个人。大家开始关注新冠肺炎的确诊数、关注熔断后的道琼斯指数、关注受灾的地区和人数、关注银行里的存款数 … 而本该体验美好生活的计划被搁置或者延后，原本触手可及的理想生活，在这一年变的异常难得。
「 生活，本该是我们珍惜的一种经验，而不是要一起捱过去的日子 」
文学大师莫言的金句，放在当下，十分应景。假如没有疫情的影响，我们的生活会更加理想。这是深藏在我们每个人内心的真实诉求 ...
「 理想生活，本该如此！」
一句感叹脱口而出，它就是我们当下内心真实的写照，是所有人都能感受到的共鸣！这一刻我们仿佛被点亮，心中莫名兴奋，激动不已…
当激动的心跳逐渐平缓，头脑恢复冷静，我们又陷入了深深的沉思...
「 理想生活，本该如此！」然后呢？行动号召是什么？
和双十一又有什么关系？
洞察
回顾过去，每当我们民族或自身遭遇困境的时候，总能激发起骨子里那股不服输的精神。不管眼前有多难，现实如何残酷，你总能见到身边那些勤劳积极的人，面对生活的艰辛，默默的付出，想尽一切办法让自己好起来。这是最朴实而真实的愿望，也是扎根在我们每一个中国人骨子里的“大智慧”，正是这种“大智慧”，让我们总能一次又一次的从困境中走出，然后又一步一个台阶，让生活越来越接近自己理想中的样子。
「 理想生活，本该如此！」
所以我们要“想尽一切办法好起来” —— 每一份认真生活的理想，都值得被鼓舞。
今年的双十一和往年相比有着更加特殊的意义 —— 作为一个国民级的购物平台，面临后疫情时代振兴经济的使命，我们不仅要将双十一这个节日延续下去、同时我们还要通过这个节日让广大的商家和消费者，重振信心！
品牌沟通策略
因此，天猫双十一在业务上也和往年有很大的变化：
首先是新供给：今年的双十一，会让更多的品牌和商家入场，不仅将原有的品牌翻倍扩充到25万家，同时还把重点放在扶持更加需要帮助的500万中小商家、新国货商家、外贸企业、产业带工厂、农产品商家，让他们借助双十一走出困局，焕发新生。
其次是新玩法：将原本“双十一全球狂欢节”升级为“狂欢季”，把全年最便宜的一天，变成两波售卖期，拉长了狂欢的时长。一方面是帮助商家带来更多增长、更多机会，让商家真实感受到“生意在变好”；同时也让消费者有了更多选择、更多便利、更低价格、更大实惠，让消费者切身感受到 “生活在变好“。让双十一，通过“买买买”所带来的理性价值，最终转化为 “天猫双十一，让我好起来”的情感价值。
我们把这个情感价值，翻译成为了和所有人沟通的语言 ——
「 Cheer Up! （生活会更好，加油！）」
core idea
想到这里，今年品牌设计的方向越来越清晰，这就是我们通过“全局着眼”得到的设计方向。
接下来的任务，就需要我们从“细节着手”把「 Cheer Up! （生活会更好，加油！）」具象化的表达出来。我们再一次回到了「 猫头 + 11.11 + ？」的公式，和之前不同的地方在于，再次回来，方向变得清晰了很多。
「 Cheer Up! 」通过什么具体的画面能够直观的感受到？
当我们把这些画面集合在一起细心的观察，不难看出这些画面多少都有些共同之处的细节：就是大家都会情不自禁的伸出手臂，内心活动配合肢体传递出自己的能量；这个动作非常直观的让我们感受到了向上的正能量，这是不用解释就能理解的语言。
而当我们再把「 猫头 + 11.11 + 振臂高挥 」结合在一起的时候，浑然天成；只是增加了一个小细节，整个符号突然有了生命力。
——— 天猫伸出圆（援）手，为你加油！
尤其是配合动态表达，一目了然... 这就是我们要的深入浅出！
把难以理解的图形，直接转化为一个活生生的形象，面对面 和所有人沟通。
动态Logo设计
Slogan设计
当然，搞定了Logo和Slogan，还只是整个双十一品牌设计中的第一步。
接下来，我们还要把「 cheer up! （生活会更好，加油！）」这个核心创意延展到线上线下各个场景，让大家全方位的感知到这股振奋人心的力量。
2020双十一品牌全链路体验地图
天猫双十一 · 全世界的狂欢季
2020双十一Format 「上扬的生命力 ╱ Up」
首先，通过提取品牌心境映射中「振臂高挥」的积极态度，结合其视觉映射「上扬的生命力」的明确感知，我们定义了简洁有力的品牌Format:「 Up ! 」
2020双十一品牌Format「 向上的生命力 ╱ Up 」
同时我们将标识动态与品牌Format结合在一起，定义了线上动态品牌版式。不仅为适应日渐多媒体化的投放环境，也进一步增多与用户情感化沟通的场景。
2020双十一品牌Format动态版「 向上的生命力 ╱ Up 」
2020天猫双十一线上会场设计
2020双十一猫头海报：天猫与超级品牌们、1起挺你！
2020天猫双十一定制礼盒
在过去几年，我向大家介绍过天猫双十一的主风格来龙去脉；而在今年，我们在传承双十一节日氛围的同时，于视觉主风格上做了进一步创新：同样通过提取品牌心境映射中「振臂高挥」的积极态度、结合视觉映射「上扬的生命力」的感知，我们尝试用更明确的视觉系统来传达「Cheer Up! 」这个核心创意。
相比符号，视觉风格更直观易感知，它可以通过形色质构形成全方位的表达。
2020双十一视觉系统 「向上的生命波长 ╱ Up」
置身于晴空万里无云，喷薄而出的、充满力量的上扬缤纷飘带 ...
当我们将这些元素结合的时候，就形成了今年双十一独特的视觉语言；再通过加入温暖并有力的手写Slogan与形色质构的拆解，应用到各个场景。
2020双十一主视觉系统:「 向上的生命波长 ╱ Up 」
2020天猫双十一新闻发布会：开启的仪式！
2020天猫双十一直播开幕盛典：天猫与众明星1起挺你！
天猫双十一 · 理想之城：携手8座城市、与全中国1起挺你！
天猫双十一主题曲：天猫 × 易烊千玺 ×千喵、1起挺你！
2020双十一限定天猫形象「给力猫」
更为突破的是，天猫在今年、继猫头海报品牌资产落成后 —— 通过双十一限定天猫形象，集结全球8个国家、108个IP，组成「挺你天团」！一起为年轻人的生活态度发声！
「 罕见名场面！」天猫与百大IP、世纪大同框 ...
天猫携手百大IP联名：世纪天团集结、1起挺你！
全套高清图集获取方式请看文末
天猫与变形金刚、小猪佩奇、hello kitty、泡泡玛特、海尔兄弟等世纪大同框！他们1起组成划时代的超级联名，为年轻人的生活态度发声！力挺你尽情热血、尽情自我、尽情燃、尽情佛、尽情旅行、尽情阅读....
每一种理想生活 —— 都有我们、
以及这颗星球上的超级IP们 ...
1起挺你！
天猫双十一，1起挺你、尽情生活！
文章来源：UI中国 作者：Ali ba baDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
弹窗是我们平时在设计APP时候绕不开的一个元素，选择合适的弹窗形式，是我们需要多加思考的地方，避免变成只会完善产品原型的线框美工。
弹窗是我们与机器界面进行互动的一扇窗，它是一种用户与产品直接对话的方式，它可以传达信息，反馈状态以及引导用户操作。弹窗分为两种类型：模态弹窗与非模态弹窗（有些地方可能翻译为无模式窗口）。
模态弹窗
用户需要先与其进行交互，才能继续操作。也就是说它是强制性的，用户无法忽视它的存在。确保人们收到关键信息，并在必要时采取心动。
非模态弹窗
存在一定的时间限制，通常用于系统反馈，用户无需对其进行回应。
1. 对话框 Dialog / 警告框 Alerts
出现在需要打断用户操作的情况下，可以大致分为信息下发（被动）例如：版本更新，消息通知，运营广告等。信息提交（主动），例如：修改信息，登录注册等。
通过上面几个案例我们还能发现几个特点，按钮可以通过差异化设计引导用户去点击（例如美团的版本更新），运营类弹窗一般更注重视觉冲击力，且刻意将关闭按钮弱化远离弹窗主体，背景蒙版颜色更深一点，营造更强的沉浸感。对于承载输入功能的弹窗，需要注意键盘弹出后的位置。类似系统功能的弹窗，比如清理缓存可以考虑直接调用平台的系统弹窗。
2. 浮层 Popover / Popup
通常在用户进行交互后出现，比如常见的下拉菜单，下拉弹窗等，更加强调弹窗的从属关系。（在腾讯ISUX腾讯文档的文章中使用了模态浮层与非模态浮层的概念，有兴趣可以去看看）。
同样都是下拉弹窗，但是很多产品有着不同的处理方式，微博通过暗色系弹窗来明确区分弹窗内容与背景内容，钉钉通过加深背景蒙版来突出弹窗内容，大众点评只使用了淡淡的投影，去掉了背景蒙版，使得弹窗内容与背景内容对比无法拉开，在实际体验中相当影响用户的识别效率。
3. 操作栏 Action bar / 操作列表 Action Sheets / 操作视图 Activity Views
跟浮层有点类似，也是通过用户的主动交互后唤出的功能菜单。通常出现在屏幕下方，占用屏幕比例较高，为了方便用户使用，底部会放置取消功能。（Action Sheets和Activity Views是IOS官网规范中的叫法。）
这种类型的弹窗最常见的场景就是分享模块，比起其他的模态弹窗，它能够承载更多更丰富的功能（多为选择项功能）。支付宝和微信公众号分享算是最标准的Action Sheets，为了减少用户不必要的记忆负担，弹窗高度限制较低，露出更多的背景内容协助用户记忆。
4. 卡片 Sheet
Sheet是出现在IOS人机交互指南中的一种模态窗口，形式为一张从底图出现的卡片，几乎覆盖了全部的原页面。但是未覆盖的区域也会使用暗色蒙版来帮助用户记忆暂停的任务。因为它支持上下拖动，所以比起浮层，它能够承载更多的复杂信息内容，常用于一些表格无法承载的复杂任务但又非沉浸式的情况下。
比起Action Sheets，Sheet的屏幕覆盖率更高，且更多时候承载的是信息录入型功能。Sheet需要顶部标题告知用户当前所处步骤信息，通过底部卡片形式的叠加让用户感知当前处理的任务流程为主流程的分支任务。
5. 其他补充
随着交互体验与产品技术的不断发展，如今的设备都能承载越来越多复杂精细化的模块。所以渐渐有越来越多特殊的弹窗形式。（底层逻辑是互通的）
例如网易云音乐的分享使用了沉浸式模态，多个弹窗组合的形式，还有动效引导，以此来承载自身丰富的分享形式。IOS桌面使用聚焦类型的弹窗菜单，帮助用户进行视觉聚焦。
1. 提示框 Toast
常见用于反馈用户的操作结果，反馈应用的状态改变，一般持续2s左右便自动消失，可能出现在任何位置。（不能通过主动滑动关闭）
目前最常见的场景就是各种刷新反馈信息，一般来说存在感都比较弱，比如案例中的知乎，B站和INS。比起B站和INS，微博和知乎都在其中融入了自己的品牌特征：主题色点缀，虽然只是个小细节，但是对用户的品牌感知能起到潜移默化的作用。
2. 提示对话框 Snackbar
Snackbar最早是出现在Android的一种弹窗形式，不过现在很多IOS端产品上也会出现。它有点类似Dialog和Toast的衍生，很多时候像Dialog一样可交互，有时候又像Toast一样有时间限制。通常出现在屏幕底部，由页面底部向上滑动出现，向下滑动消失。
由于目前手头木有Android手机，所以截了Material Design的官方说明案例来帮助理解。主要强调了两个点：1.不要加Icon，2.只能有一个操作项；因为snackbar及时不操作也会消失，所以比较常见运用与工具类产品，需要保持操作的连贯性。例如邮箱类产品，用户删除了邮件，snackbar可以及时反馈删除成功的状态的同时提供撤销的操作。
3. 透明指示层 HUD
HUD是出现在IOS端常用的一种非模态类型，最早出现在屏幕中间，由于容易影响用户的沉浸式体验，所以在IOS13版本中对HUD进行了边缘化调整。
对比左侧与右侧的HUD就会体会到为什么早期会被那么多人吐槽，特别是在游戏类的沉浸式应用中，很容易破坏用户的体验。
1. 展现形式
展现形式核心是分场景，一些偏向系统报错考虑使用最简单系统的弹窗展现形式，运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做，一定要让用户懂得，这是一个弹窗。非模态弹窗一般多以最简单的形式出现，避免传递状态信息时干扰用户的关键信息获取。
2. 按钮模态弹窗一般情况下只放置1-2个按钮，信息告知类型的放个“确定”，重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗，可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上，对于用户体验上来说相当的不友好，但是对于运营数据上来说可能会很好看。
3. 动效因为弹窗承载文本量有限，得利于设备技术的发展，现在越来越多的产品会在模态弹窗中使用动态的形式传递信息，例如很多产品的功能引导。对于非模态弹窗来说，由于本身存在感较弱，动效运用于合理顺应用户的视觉动线，例如你下拉刷新后，一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。
4. 时机频率把握好弹窗出现的时机和频率
模态弹窗会直接打断用户的操作状态，一般只有在不可逆，或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下，比如运营广告，那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机，反馈一定要足够及时，这样才能不会让用户在操作中产生疑虑。
5. 文案表述
由于弹窗的信息承载量非常小，所以一定要用最精炼，恰当的表述来告知用户信息或者当前状态，可以考虑使用“动词+名词”的组合短语，例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的，文案字数要更加注意（可以考虑增加一些通用icon颜色辅助表达，比如正确使用绿色打勾）。
6. 输入内容
很多弹窗承载着表单输入的任务，然而弹窗并不适合过多的表单输入，特别还有一些多到需要下拉了- -如果需要用户填写很多表单，乖乖跳转新页面吧。况且弹窗本身出现就已经中断了用户原有的操作，还要填一大堆东西的话。。（除了IOS的Sheet，它的出现就是IOS官方为了解决常用于一些表格无法承载的复杂任务但又非沉浸式的情况。）
由于目前手头目前没有Android，所以截图案例都是基于IOS端，下次有机会继续修改更新。不过目前来说两端很多交互形式越来越趋向共通。
借由这篇文章开了“设计控件”系列的坑，接下来会继续学习与分享其他的设计控件相关知识。包括之前的设计原则系列，也会继续分享设计心理学法则等等。最近一直在思考自己的学习框架，除了设计基础原则，设计控件外，还有设计模型以及设计工具等等。坑已挖好，接下来就靠自己一铲子一铲子去填了。
文章来源：优设 作者：Chinn
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“小红点”表面上是一个视觉设计问题，但背后其实是一个产品策略和如何调度用户注意力的问题。
你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。
这种事儿发生在微信还能接受，毕竟你妈联系你，喜欢的人联系你，领导联系你，“红色”的强提醒还是很有必要的，不然你可能错过重要的事情。
但对于非IM产品，比如内容消费类产品，大多“小红点”的出现对用户并没有那么重要和紧急，更多的是把产品意愿强加给用户（产品导流、提活）。
这种“小红点”对用户来说，只是为了消除而点击，或者麻木了连消都不想消；对平台来说“为了消除而点击的行为”也带不来真正的产品价值。
那内容类产品的“小红点”应该怎么设计呢？有什么差异化的处理手法吗？今天跟大家分享下大牙最近的思考。
说实话我最近理“小红点”理的，对它都起了敬畏之心。
“小红点”表面上是一个视觉设计问题，但背后其实是一个产品策略和如何调度用户注意力的问题。而用户的注意力如何被调度和分配，更是一个产品长期战略问题。
用户对不同产品消息提醒，接受度和投入的注意力是不同的：
而且，小红点的设计，最终需要回归“用户价值”。目前大部分产品对于“小红点”所追求的是：高打开率。
解答这个问题的核心切入点有两个：1.视觉样式（长啥样），2.展示策略（啥时候出现）。
因为读我文章的更多是设计师，所以这篇重点聊一下“视觉样式”。构成消息提醒视觉样式的核心元素有两个：a.色彩；b.形状。
看了下市面大部分产品对“小红点”的色彩解法，得出以下结论：
1）大多数互联网产品的提示色采用的是“红色”；
猜测原因：大家本能的认为用“红色”总不会出错。
追溯了下“小红点”的由来：它最早来自于黑莓手机系统。
在诺基亚一统天下的时代，新消息的提醒是图标+数字的形式。黑莓在2009年推出的9700系列，搭载的黑莓系统开始使用了带星号的小红点形式。
Apple公司在2013年注册了相关专利，并在iOS系统上开始正式使用。
目前小红点已经变成了一个通用的提醒机制，且出现被滥用的趋势。
2）“品牌主色”与“红色”接近的产品，大多倾向于采用“品牌主色”作为提示色；
猜测原因：“红色”和“橙红，玫红，粉红等相近主色”并存且柔和到一起时，页面会显得混乱，所以他们把自己“主色”也作为提示色。
3）虽然“黄色”也具备一定的警惕和提示性，但仅存在于少数的黑色界面产品中；
猜测原因：黄色在白色背景上看不清。
4）部分产品采用“两种消息提醒色”，进行分层处理（1级页面红色，2级页面其他颜色）。
猜测原因：1级页面强提醒，2级页面用弱级色彩，降低消息的打扰度，增加用户可控感。
看到第4种方式时，我就很开心了，因为这就是我想找到的答案。平常用的时候没有意识到，在研究“小红点”的时候才发现他们设计的挺用心。
拿QQ邮箱举例：
左图，当收件箱已经有4000多封未读邮件时，它并不是出红点，或者红点上“...”或“99+”来警示我。而仅是弱化的蓝底+数字，告诉我里面有多少封。
基于以上分析，我觉得第四种处理方式同样适用于内容类产品，原因是：
1）像开头所说，用户对于内容型消息的“实时性”，“关系稳定性”较弱，因此对于较强提示带来干扰的忍耐度会更低。而“红色”给人给人非看不可，不看不消的印象。
基于内容型平台特点，其实并不是所有的消息都需要全局“红色”那么强化。“红色”可在一级界面保留，满足从平台角度的可控性即可。
b.从交通系统色彩心理角度：蓝色有“指示性”作用；
当然，这也不是绝对的，有时候也得基于自己产品的主色进行具体问题具体分析。拓宽下大家对“内容类产品”消息提示的色彩思路，不用太局限于满屏“红”。
好，说完“色彩”接下来我们来聊聊“形状”。
“形状”决定着提醒控件的：色彩占比、承载信息、透穿能力。
目前市面上常见的形状有几种：1.小红点、2.数字+红点、3.文字+红点、4.头像+红点。
这个就不用多说了，一般有“小红点”的出现就以为着“这里有个新消息”或“这里有个新内容”，快来戳我。
2.数字+红点
它是由小红点演变而来的，增加“数字”代表里面具体有多少条未读，一般用在社交场景或与消息相关的APP中居多，辅助用户获取更多信息，做出判断。
但也有一些平台，为了吸引用户更多的点击，或者对于“数字+红点”下发的策略和规则不够完善，滥用这种形式，内容的价值并没有与这种形式相匹配，同时采用过于警示的红色，有些干扰用户。
3.文字+红点
不可否认，有些场景光靠一个“小红点”是传递不清晰的，采用“文字”的透穿能够让用户点击之前更多的了解信息，决策是否需要点击，这种形式还是友好的，但别满屏都是就行。
4.头像+红点
越是跟“人”相关的产品，越适合采用这种形式，以“人”为抓手促进点击。
常用于QQ，微信，微博，小红书，快手，抖音等平台，通过你关注大V或你朋友头像外显，吸引你点击。
作为内容生产者，肯定希望自己发布内容push给更多粉丝，这样才有更多的流量嘛。
弱提醒：
当内容生产者刚被关注时，只给粉丝下发普通“小红点”或“文字+小红点”消息通知。
中提醒：
当通过粉丝历史操作/观看数据，发现TA对你的内容高度感兴趣，你更新时他都愿意看且完播率高时，那平台就可以赋能“中提醒”的样式给你，外露更多信息带来更多流量（转化如果不高可再打回“小红点”）；
整体来看，虽然它的名字叫“小红点”，但我们在设计的时候不能只局限于“红”和“点”。它可以是任意“颜色”，它也可以是任意“形状”，本质是如何更和友好的提醒用户。
文章来源：站酷 作者：苏大牙
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：成交额4982亿，同比增长26%，这是阿里巴巴今年双十一交出的答卷。每年都有人唱衰双十一，但每年淘宝/天猫都在大家的质疑中实现了销售额增长，这是为什么？本文作者“货”的角度对此展开了分析讨论，与大家分享。
2018年10月，在从北京到上海的高铁上，我接到一个机构投资者的电话——他焦急地询问，“据说今年的天猫双十一预售非常不理想”，“消费者和商家都已经产生了审美疲劳”，所以双十一销售数字要崩盘。
他想让我求证一下，我立即回答：“没什么可求证的，那不是事实。”但是他仍然想让我求证；整个市场都流传着天猫双十一已经尸居余气、增长即将耗竭、明年就要没有双十一了，等等等等。
我确实找了许多电商行业的朋友求证，对方无一例外地回答：“这是完全不了解电商市场的外行话，没有必要深究。”那一年，天猫双十一成交额达到2135亿元，同比增长26%。阿里巴巴的股价于当年12月触底回升，此后的三个季度上涨了近一倍。
2019年10月，我又在虹桥机场的候机室里，接到了不止一个机构投资者的电话。你猜对了，仍然是询问“天猫双十一是不是要大幅减速”的问题。这个问题不仅关系到阿里巴巴，还关系到一系列的品牌商家。
因为快上飞机了，我只能简略地回答：“不可能，增速不可能低于20%。双十一购物节比你想象的更强大。”果然，这次的流言再次被现实所碾碎。这年的双十一刚结束，阿里的港股IPO流程就启动了。
2020年……我已经不做券商分析师了，所以不会再接到机构投资者的电话。但是，在各种场合，我还是听到有人忧心忡忡地问：“今年的天猫双十一应该真不行了吧？”双十一时间延长了，11月1日就开始预售，这被悲观者视为“双十一正在走下坡路”的最好证据。
竞争对手的双十一促销活动空前激烈，尤其是京东和拼多多。说实话，我的信心也有一些动摇——11月10日晚上，我在微信上紧张地与好几个电商从业人员聊着他们的感受，刷着手机淘宝上的活动和优惠券，看着朋友圈里的晒单。考虑到经济形势和竞争格局，如果今年天猫双十一的增速骤然下滑，我觉得也是可以理解的。
结果却比我想象的要好：今年双十一购物季（11月1日-11日）成交额达到了4982亿元，同比增长26%，这是近三年的最高水平。注意，这个数字已经考虑到了双十一时间口径的变动，而且不含新加入的房产、汽车等商品，具备统计上的比较意义。
根据阿里的财报，上个季度（2020年7-9月），天猫GMV同比增速为20%，淘宝GMV增速为百分之十几；也就是说，双十一期间淘系电商的增速大幅高于平常时间段。双十一没有任何丧失活力的迹象。
准确的说，是淘系电商没有丧失活力的迹象。过去一年，市场上充斥着对淘宝/天猫的质疑或担忧：拼多多还在大踏步地前进，京东实现了用户增长的复苏，快手、抖音等直播平台建立自己的交易闭环，微信小程序的电商GMV猛增……
在这种情况下，淘系电商每个季度仍然能报出不错的GMV、收入和利润增速。投资者和外部人士还是半信半疑，他们不遗余力地寻找各种乐观或悲观的线索，以求看清淘系电商的未来。
所以，今年的双十一才吸引了这么多眼球——人们关心的不仅仅是11月1日-11日的交易数字，还有这个数字背后的故事，以及由此推断出的迹象。在我看来，这次天猫双十一带来了大量积极的迹象，可以让乐观者睡个好觉：
差不多两年前，我跟一位经验丰富的电商从业者聊天。对方说：“阿里对‘货’的理解和掌控程度仍然是全市场第一，而且这种优势可能一直持续下去。”
我问他，什么叫做“对‘货’的理解和掌控”——这大概也是电商行业之外的人最想问的。这个问题很难用一两句话解释清楚，不过我们可以以这次双十一为例，尝试解释一下：
对“货”的理解和掌控源于高度专业化和细节化的运营。说到底，电商就是一门关于运营的生意。
天猫平台对于本次双十一的调研（包括商家调研和消费者调研）早在6个月前就启动了，调研范围从一二线城市一直覆盖到县级乃至村级；淘宝特价版在9月实现了与1688的全面对接，从而使得大批工厂和“厂货”得以接入双十一；海宁皮革城、深圳华强北等一批特色商城的线下商户今年刚刚开设淘宝/天猫店，就以跑步速度参与了双十一……
只有通过这种、成体系、接地气的运营，天猫双十一才能持续加强“货”的丰富程度，完成“人”与“货”的对接。因此，现在流行的“去中心化电商”（其实就是“没有中心运营的电商”）永远无法做出自己的双十一；其他中心化电商平台在运营方面各擅胜场，或许在某一个方面已经接近淘宝/天猫，但是总体上仍然有相当的差距。
在长期，阿里的下一个增长引擎或许取决于“近场零售”或曰“身边经济”——包括同城零售、生鲜电商、社区团购、本地生活服务在内的庞大市场，其规模总有一天要超过传统的零售电商市场。
这就是阿里在这个领域投入重兵、不断进行收购和内部孵化的原因。美团、京东、拼多多、腾讯乃至字节跳动也意识到了这个市场的重要性，正在不惜代价地企图占据先手。这个战局非常复杂，可能要再花3-5年才能有阶段性的结果。
在这种情况下，淘系电商的地位反而愈发重要了。淘宝/天猫的强劲增长，不但能够为新业务提供财务资源、能够交叉导入用户，还能为新业务提供一个良好的立足点。饿了么、盒马、天猫超市均加入了今年的双十一；支付宝首次设立了“城市生活主会场”；在杭州阿里巴巴“1小时新生活圈”内，已经实现了“小时级”的送达。
显然，一个强大、充满活力、仍在不断创新的淘系电商，是阿里巴巴任何新业务的基础和大本营。这个大本营越坚固，新业务得到的支持就越多。投资者总是担心这个大本营是不是出现了松动、是不是在激烈的竞争中有所收缩——今年的天猫双十一再次证伪了这个担心。
竞争格局当然是非常激烈的，但是淘宝/天猫的优势已经形成了一个系统，我不认为这个系统会在短期内被攻破或出现松动。所以，我相信明年的天猫双十一仍将报出一个非常亮眼的数据，尽管我还不知道那时又有什么新玩法、新模式出现。
文章来源：人人都是产品经理 作者：aria在这里
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户行为分析，认识用户满足用户最直接要求为设计中心
用户行为是指用户在使用产品时的行为，针对网站而言，就是用户在进入网站后所有的操作。网站用户行为分析，就是在获得网站王文量基本数据的情况下，对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与产品目标及策略相结合，从中发现目前网站存在的问题，为进一步改善网站，满足用户需求，提升用户体验提供依据。
常见的用户分析内容包含以下几个方面内容：
（1）用户在网站的停留时间、跳出率、回访率、新用户、回访次数、回访相隔天数；
（2）注册用户和非注册用户，分析二者之间的浏览习惯；
（3）用户所使用的搜索引擎、关键词、关联关键词和站内关键词；
（4）用户选择什么样的入口形式（广告或者网站入口链接）更有效；
（5）用户访问网站流程，用来分析页面结构和网页覆盖数据；
（6）用户在页面上的网页热点图分部数据和网页覆盖图数据；
（7）用户在不同时间段的访问量情况等；
（8）用户对于网站的设计及字体配色的喜好程度等。
通过研究发现，80%的用户仅仅使用了软件20%的功能，而那些没用的功能不仅浪费开发时间，也使软件更加难以使用。一个成功的软件应该是简练精干的，可以单独职能化的化解决的单个问题，要以满足用户最直接要求为 i设计中心。
很多网站往往为了满足不同用户的需求而增加功能，增加的功能必然需要再界面中用视觉呈现出来，这就会使网页内容越来越多，很多的功能掺杂在一起，如果不经过过滤，必然会违背原来阅读的初衷，所以每一个功能的增加都要慎重。
用户对于互联网功能需求也和对软件的功能要求一样。既喜欢简单的，也喜欢复杂的。而且用户的体验需求也会随时随地的发生变化。这里的复杂不是指很难用、流程超级复杂、容易出错的用户体验，而是指丰富的功能。
首先如何让用户体验更简单呢？当然将复杂的功能去除是最好的，如果实在无法去除某个复杂的功能，那就应该将其隐藏。因为大多数情况下，不常用的功能要比经常使用的功能占据更多的空间。
真正好的用户体验其实是给用户所需的任何功能，为用户设计一款“复杂”的产品，并将这款产品从表现上简化，让基础功能操作简化，给扩展功能保留使用入口即可。这个设计思路最具代表性的例子就是Microsoft Office和Adobe
系列产品。
用户的需求并不是一层不变的，短期内用户会因为某种强烈的需求要一个产品。随着市场和行业的不断发展，用户对于一个产品的评价也会随之发生变化。例如肯德基刚进入中国市场，被人们认为是一种的象征，小朋友以吃一次肯德基为荣。随着经济条件的发展，人们对于肯德基的体验就完全不一样了，热量过高，不利于健康。这是一个很典型的对一个产品评价的变迁的过程。
用户的期望值会因为因素而发生变化，有的来自外部的环境，有的来自产品自身，有的来自用户成长。这些影响期望值的因素都会相辅相成的影响。有的时候不是我们的体验或者产品变了，而是用户发生了变化，所以用户体验的设计，除了要考虑产品本身以外，还要考虑用户所需要的。
用户通常会根据个人喜好做事，这就是习惯。习惯没有好坏之分，关键要看根本的是什么。从用户体验的角度来说，任何产品都可以分两种：遵循现有用户习惯的产品和颠覆用户习惯的产品。
在设计网站时可以在技术上创新，在业务模式上改变，也要在以下几点上遵循用户的习惯。
生活和文化背景是必须要遵循的习惯。想去颠覆或是磨灭一个群体甚至是民族的习惯，基本上会付出惨重的代价。例如使用红色表现喜庆，白色表现悲伤，是中华民族几千年的一种传统习惯。如果想去改变这个习惯，使用其他颜色肯定起不到好效果。比如：可口可乐官网就是用红色做的主色调，而红色也与“可口可乐”品牌主色调相统一，点缀少量黄色，非常符合中国的传统文化，也更容易使中国人接受。
在设计网站页面时，还要考虑到网站用户群体的基础属性，例如年龄层、身体承受力等。可以将页面中的文字和图片做放大处理，使老年人可以清楚的看到内容。比如一些老年网站，会采用大号字体，强对比色便于阅读，而且在设计的时候也不会使用过多的色彩，虽然整体视觉可能显得简陋不够丰富，但是充分的考虑了老年人人群的特点。
人在评定事情好坏的时候，通常喜欢以自我为中心，所以用户体验设计时，必须满足用户这种需求。使每个用户可以体会到以“自我为中心”的优越感，这样用户就会成为最忠实的客户。例如很多人沉迷于网游就是因为在现实生活中会受到各种各样的限制，而无法实现真正的以自我为中心，而在网游的世界里却可以完全实现。
在设计网站时，设计师通常会根据网站内容把网站划分为不同的区块，然后在分别进行美化。设计师在思维定势中 自我感觉良好，一旦突破了思维定势就会有新的收获。作为用户体验的设计师来说，有下面两个方面可以颠覆。
在设计网站时，有很多页面都具有独特性，例如注册页、登录页和搜索页。这些页面用户只会访问一次或者几次，而且这些网页本身也是在网站发展的同时逐步完善的。所以，在用户体验的设计中，这些习惯就可以颠覆的。设计师可以根据个人的喜好对这些页面进行设计、优化和修改，而不会影响用户的习惯。
在网站设计中需要结合当前的潮流趋势和的技术来表现网站，这样才能给用户带来全新的体验。页面中流畅恶化便捷的交互应用，可以给用户带来良好的体验。
尊重用户秀感可以快速让用户接受网站，同时也会由于尊重了用户的习惯而减少产品对用户的刺激，会使得用户很难成为网站的忠实用户。另一方面，如果不尊重用户习惯，用户可能很难马上接受。所以在用户体验设计时，要根据网站具体情况自我权衡。
最好的办法就是在网站核心用户体验不变的基础上，增加新功能、设计风格逐步变化、进行网站整体融合。
转自：站酷-忻芸
对于产品设计师来说，在日常工作中做的产品类型主要是两种：一是B端项目，另一种是C端项目。近些年来，互联网进入下半场，C端用户增长触及天花板，流量的红利逐渐消退。很多企业的业务由C端转向了B端。
随着企业业务的转变，作为设计师的我们，也必须跟上步伐，快速做好角色的转换。当然，想从C端设计快速切换到B端设计，或是从B端设计快速切换到C端设计并非易事。因为C端和B端产品设计存在较大的反差。其商业属性、产品定位、目标用户、设计表达、业务流程等都会有很大的不同。那么今天这篇文章，我们就一起来聊聊B端和C端产品设计的差异性。
直接进入正题，本文将从目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则等几个方面进行具体对比。
01目标用户
C端：
C端释义为：Consumer，意为消费者、个人用户或终端用户，使用的是客户端。C端产品往往是直接对接一般消费者，直接为广大消费者和用户提供产品或服务。例如：微信、微博、抖音等等。
B端：
B端释义为：Business，意为企业用户或商业用户。B端产品往往是为针对这类用户开发的系统型软件、工具或平台。例如：CRM 系统、 ERP 系统、OA系统、SAAS等等。
02使用场景
C端：
它会存在于我们生活中的各种场景，而且自由度非常高，当然也包含工作场景，比如周末在家无聊刷刷微博了解下国际大事、晚上睡前打开虾米听听歌、在工作间隙打开某团点个外卖等等，因此，C端产品的用户大部分使用场景是碎片化的。
B端：
B端产品更多的是在企业版内部使用，更多的是为了满足企业相关用户在“工作场景”下完成协同工作的一些特定组织需求。
03产品需求
C端：
想很好的挖掘C端产品需求，这要求我们做更细致的用户画像，比如：用户的性别、年龄、职业、文化程度、收入水平、个人喜好等都会影响到功能设计。然后通过用户画像、同理心等方法对用户的行为进行详细分析，以发掘用户具体需求。
B端：
B端产品一般是基于现有的“业务”形态，将传统线下工作，通过程序化、系统化、信息化转换为线上产品，从而提升企业协同效率，降低办公成本。需求一般来源于产品战略定位、使用者个性需求等。
04产品本质及特性
C端：
C端产品的本质基本都是一个核心功能，例如：社交类app的核心功能就是好友快速沟通；电商类app的核心功能就是购物；视频类app的核心功能就是看视频。在核心功能之外的都是一些“增值功能”，比如评论，点赞，分享等。如果除去这些附加功能，虽然会影响用户体验，但并不会妨碍核心功能的使用。
其产品特性可简单总结为一个词-分享。在使用C端产品时，用户都希望自己的“行为”能够得到其他用户的认可。比如：对自己分享的内容进行评论、分享、打赏等。
B端：
B端产品的本质是满足用户的工作需要，而公司内大部分工作，我们几乎是无法独立完成的。这意味着我们需要和其他同事协同去完成一个任务的闭环。因此，B端产品的业务逻辑会相对更加复杂。
B端产品的特性也非常明确——即“协同工作”。处于信息化时代的企业中，几乎已没有可以单独完成而不需要协同的工作了。
05产品设计思维
C端：
在上面我们已经提到过，C端产品的本质基本都是一个核心功能。因此，在设计前期，作为设计师的我们必须对产品进行全方面的考虑。到底那一个功能是我们产品的核心?哪些功能只是锦上添花?
此外，目前市场上C端产品同质化异常严重。想要产品独具一格，就必须突出特色，坚持自身的品牌亮点，才能让用户快速记住这个产品或者品牌。
B端：
B端产品的本质则是满足用户的工作需要，协同工作。对于企业来说，更多关注的是工作效率和成本。这也是B端产品最终的解决问题方向：如何提升企业的运营效率。因此，在设计过程中，我们需要不断的去优化产品流程、调整策略等。
06设计原则
C端：
在设计过程中，除了要抓住核心功能外，还需要给产品增加趣味性和创意性。趣味性，也就是要给用户带来积极的正面情绪，如：能使用户感到心情愉悦，感染人，打动人，引起用户心灵共鸣等；创意性，也就是要做出与同类产品不一样的东西，而这些新东西又是解决了用户某些痛点的。当然，做这些最终的目的是为了提升流量、留存率及转化率。
B端：
B端产品的需求往往是要解决一个企业中不同角色（普通成员，管理员、超级管理员等）之间的协助关系，在设计过程中一般需遵循如下设计原则：合理的功能与模块划分、严谨的业务流程设计、干净简洁的界面设计等。
在这里，笔者整理了几个优秀的B端产品设计案例，供读者参考。
登录界面设计
C端：
B端：
都是登录页面，差别却是如此之大。站酷面向的C端用户，账号登录支持手机号、邮箱以及第三方（微信、微博、QQ）方式。对于用户来说，选择非常多，可以说是非常人性化，大大提升了用户体验。
而网易邮箱面向的B端企业客户，账号登录仅支持邮箱登录一种方式，且用户登录时还得首先确认自己的身份是普通用户还是管理员。这也说明，在设计B端产品时，得充分考虑不同角色的权限问题。
导航栏设计
C端：
B端：
导航栏的设计布局有很多方式，面向C端用户的站酷使用了顶部导航的模式，这也是最常见的主导航模式。二级导航聚合在下拉菜单里面，鼠标hover出现。这种导航方式非常直观，访客可以快速的定位自己感兴趣的模块，另外，可以很好的展示内容区域，对于访客来说，非常友好。
面向B端用户的爱客CRM系统使用的是侧边栏导航，使得导航展示更加清晰，页面之间的切换也非常方便。这种布局方式一般用于管理后台偏多，与B端产品业务复杂性密不可分的。
B端产品原型实例
当我们明确了具体的需求后，就可以动手制作可交互原型了，这样可以很好表达出整体逻辑，让客户直观的看到功能和效果，获得较真实的感受，并在不断讨论的基础上完善未来的设计思想。接下来，一起来看看我用Mockplus做的B端产品原型效果：
原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html
文末福利
最后，我为大家准备了一份小福利。
产品团队的沟通离不开原型，今天为大家推荐的原型设计工具Mockplus，更快更简单，5分钟制作一个交互原型页面。支持团队协作和在线审阅。
点击下方链接可以免费领取Mockplus的个人版15天，数量有限，先到先得。
领取地址：https://www.mockplus.cn/home/promote
小结：
虽然C端和B端产品在目标用户、使用场景、产品需求、产品本质及特性、产品设计思维、设计原则上都有所差异，但是C端和B端产品也有很多共同点，如：都要求产品简单实用和有效准确，都是为了更好的满足用户的需求，解决用户的痛点等。如果能做好以上这些关键点，无论是做C端还是B端，都会是非常优秀的产品。
转自：ui
编者按：2020年已经余额不足了，2021年的平面和视觉设计趋势会是怎样的？今天的文章来自资深设计师 Iveta Pavlova，看看她所总结的12个趋势：
我们迫切地希望2020年尽快过去。
疫情，隔离，线下教育受阻，线上学习成为了主流，网购替代了去超市采购，娱乐和沟通都从面对面改为远程。需求的转变，也带来了新的增长。
无论是人还是企业，都需要比以往更快地适应变化。技术和趋势上也反映出了类似的情况。新的时尚和技术正在推进，你会注意到很多事情和以往有所不同。
快速、直观的导航，更加具有安全性的设计、节能、深色模式，这些趋势和要求开始越来越显著，这些趋势所影响的已经不仅仅是网页，APP，还有大把的公司品牌，LOGO设计、营销策略、 插画设计等等，它们呈现出一种连锁反应式的变化。
今天的这篇文章，我们深入梳理一下 2021 年将会出现的视觉和平面设计领域的流行趋势走向。
从总体上来说，3D设计这一趋势是在往上走，越来越成熟，也适配地越来越广泛。设计师和品牌也在充分利用的技术来呈现3D效果，在软件层面的支持也相当的完善，从整体视觉到UI元素、交互、体验，3D 近乎无处不在。
而在3D设计这个领域当中，写实和超现实一只手最为流行风格方向。从目前已有的很多设计来看，这些 3D 建模渲染出来的角色和场景，大多作为视觉主体来呈现，在页面中占据主导地位。而将图像和文本结合起来的方式也在影响着3D设计，很多更加贴近潮流的设计当中，会将照片和3D元素结合到一起，产生极有调性的视觉风格，加入动画，能够瞬间让设计脱颖而出。
在这些 3D 的设计范例当中，很多令人惊叹的作品并不非出于艺术来这么设计，相反是为了更好地引起用户注意力。在这个注意力匮乏的时代，3D 设计是大杀器。
Emoji 是另外一个流行趋势。表情符号已经突破了「传统」的聊天领域，开始广泛地运用到平面、视觉甚至 UI 当中。它开始充当一种介乎文字和视觉之间的新型语言，它还能传递出情绪，这就很给力了。
于是，各种 Emoji 在平面和视觉设计中，被用来消解严肃，营造氛围，让设计更加轻松。在未来几年中，Emoji 这一元素应该会被应用得更加广泛，并且会以更加富有想象力的方式，呈现在方方面面的设计当中。
十年前，富有有机感的自然元素随着扁平化设计的兴起而逐步淡出主流趋势，但是如今，它又再次流行起来了。
自然的线条，柔和的光线，泥土和树叶的色调，贴合自然特征的渐变，再一次被主流所拥抱。
不过如今的这些自然元素的运用，会更加简约，无论是小元素还是大插图，通常不会用得很满，材质和肌理的运用也会相对克制。
促使自然元素的流行的另外一个原因，是疫情和隔离。长时间没有机会外出会让用户对于自然元素更加青睐，哪怕它们仅仅只是存在于设计当中。
自然元素并不会受限于领域，无论是技术相关还是商业领域，自然元素都适用。
当大脑看到的视觉信号和通常认知不一样的似乎，大脑会下意识注意到它，会让眼睛躲看看，尽量想办法处理好……而这，也就是视差错觉元素在设计当中的独特价值！
对于看不清楚的东西，人就越是想看，上头，上瘾！
而从2020年开始，视差错觉开始从小众、古早的设计领域当中走了出来，被时尚和商业所青睐，越来越多的品牌开始借用这种手法来抓住用户注意力，这种视觉奇观的价值在今年得到了体现，在即将到来的 2021 ，可能会更加流行。
不过，这种设计要注意控制好复杂度，太繁复复杂了可能会让人觉得不适，小心使用。
字体设计一直在流行。而在 2020 年，3D 的字体设计开始出现在各种地方，有趣的概念和想法层出不穷。
逼真的3D字体，和现实的元素交错，制造出独特的视觉效果，这是 3D 字体在 2021 年最有可能流行的玩法。与此同时，3D 字体的排版效果结合动画、肌理、图案将会是最主要的呈现方式，因为目前最前沿且流行的软件和技术，都可以做到，且非常适合这样来搞事情。
自定义的手绘插画是创造独特设计的一种常用形式。但是手绘插画风格很多，而卡通插画能够脱颖而出的原因其实很简单：有趣，多变，功能强，效果好。
卡通插画本身是认知度最广的一种形式，可以繁复可以简单，最重要的是，它的趣味性足以让人驻足，表达形式可以非常巧妙，也可以引人发笑，在品牌推广和营销上，有着独特的优势。
金属效果其实正在越来越流行，而其中能得到最广泛喜爱的始终还是金色。所以，带有黄金质感的元素，或者类似风格的视觉设计，将会在 2021 年得到更加广泛的流行。
当然，除了黄金之外，白银、黄铜、铅类似这样的金属质感同样会随之风靡，金属的光泽、粗粝质感，光影的变换，都是这种视觉元素标志性的特征。
有的设计，会聚焦于黄金质感本身：
还有的设计，会江黄金和其他的具有现代特征的材质（比如大理石、玻璃、塑料）结合到一起使用：
从数字媒体诞生开始到现在，像素艺术其实一直都没有真正过时。
Minecraft 和乐高是让像素艺术「文艺复兴」的重要推手，更加成熟的 3D 技术让三维立体的像素效果得到了大规模的普及。
在2021 年，你可能会看到更多更加富有调性的 3D 像素艺术设计作品，它们有趣又复古，但是在技术和效果上，又有着现代的痕迹和独特的趣味。
制造简约和富有凝聚力的设计的方式有很多，其中之一是对色彩进行精简。在时间有限并且目标明确的情况下，单色调和双色调的设计其实是很不错的选择。
正是因为此前各种炫酷多彩的设计流行了接近10年，厌倦了信息过载的用户和设计师开始拥抱单色调和双色调的色彩组合，最主要是这样的设计更加易于产出，也易于吸收理解。
单色调和双色调的设计，最突出的优势，其实是让形体更加突出，让视觉更加明确、和谐，对于用户而言， 这样的设计也更加平静、舒适。
不要小看最基础的几何图形，实际上在最近2年，设计师们用自己的作品证明了一件事情：即使是最简单的几何元素，同样可以创造出繁复、有趣、富有想象力的设计。
值得注意的是，这种设计趋势的特点在于多个几何元素的拼接组合，这种方式消解了单个几何元素的单调感，反而能够制造出丰富而强大的视觉体验。
想要把握这种趋势，你可以使用 3D 的几何元素来进行拼接：
也可以用好朴素但是可以玩出很多花样的平面几何元素，这种设计会更加抽象：
字体和排版设计其实是时代的镜子。流行什么样的元素和风格，反映了当下用户的心态和想法。如今正在流行的排版视觉风格，是混杂了繁复变化的怀旧视觉风格，它们可能会在 2021 年呈现出爆发式的流行。
这种情况可能是源自于疫情隔离所催发的怀旧情绪，而其中对于规则的打破和略显繁乱的风格变化，似乎也源自于类似的情绪。
去掉色彩的设计，会显得更加简约，对比明确。同事，采用无色彩的设计，会让设计本身足够特立独行，尤其是在如今这个多彩的世界当中。
经典的黑白色调柔和而迷人，它的魅力是独特的，甚至是不可替代的。无论是阴影、动画、液态效果还是有机元素，它都会更加显得形体化和轮廓化。
预测未来总是一件有趣的事情，而在如今这个阶段，对于未来趋势的预测，也包含了另外一层意义，就是对于未来的期待。想要把握未来，继续前进，那么就需要不断地追索。
文章来源：优设 作者：Iveta Pavlova
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
