页面 用户 信息 在一个普通 B 端产品（以浏览器为载体）的页面中，相信很多产品设计师都有类似的经历，这个页面是要一直沿面包屑下沉，或者像 C 端产品一样无限返回，还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。信息结构的设计过程中，每一个功能模块是经过深思熟虑做好定义的，如果想让用户的任务流程顺畅、有所提效，那么信息架构的导航必须要发挥作用，也就是说用户需要去记住或者被“教育”每个模块的内容有什么。更多B端干货：8000字干货！B端交互设计师如何进行页面设计？前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。阅读文章 > 一、为什么要跳转1. 结构扁平化，减轻心理负担一次测试平台项目迭代中，发现旧有版本的面包屑层级特别深，最多可有 5 级，而且是详情页面与新建页面糅合在了一起，作为项目流程中的一个环节，不应该出现这种情况。于是调研了市面上能看到 B 端产品，腾讯云、阿里云和华为云等逐渐弱化了面包屑导航的使用，页面层级一般不会超过 3 级，华为云和腾讯云已经取消了面包屑的使用，阿里云虽然保留了面包屑导航，但是二级页面面包屑和返回同时存在，信息层级上也已经弱化了面包屑对信息层级的延伸。在一次任务流程中，如果信息层级很深，意味着用户会深入到更多的页面，进而偏离主流程，同时需要接纳的更多信息量，额外增加的信息负担会给用户的心理造成压力，而且还会给产品扣上信息沉重的帽子。对于主流程，模块提炼出的信息已经能够满足对用户对该模块的需求，如果仍有想了解颗粒度更小信息的需求，那么可以通过友好链接跳转到信息的源始位置查看，而不是在当前页面与主流程同级继续下沉。2. 增强记忆点，提高效率在产品设计之初，每个一级模块就已经做好了定位，比如腾讯云的私有网络，包含了子网和路由表，如果用户在私用网络的详情页能继续打开子网的详情信息，那么私有网络的定位就变成了私有网络的信息+子网信息，进而削弱子网模块的功能性，对用户而言，会有多处可以查看子网信息，这会模糊用户对产品结构的清晰认知。根据席克定律，下次信息查看时，面临众多的选择，任务效率是变低了的。另外，对于需要信息对比的场景，新开页面可以满足多种同类数据的对比需求。那么如果像腾讯云或者阿里云这样，新开 tabs，直接跳到子网模块的页面，这会暗示用户，这个功能信息点不属于私有网络，进而会强化子网模块的定位，也会凸显私有网络的主要流程。3. 关于用户习惯① 对于国内浏览器的用户国内的用户对百度等搜索浏览器并不陌生，并且长时间的使用已经对页面的跳转有了一定的预期和习惯。通过友好链接跳转到相应的页面，点击 tabs 回到搜索界面。同样借助浏览器为载体的产品面对同一个用户群体，其实不需要太多的再教育。另外，如果要处理或浏览的信息量很少，弹窗或者抽屉就可以即时获取，这时候就不需要跳转查看。② 公司内部的用户当然，具体的产品还需要考虑聚焦的用户人群，调研观察当前产品的用户习惯是怎么样的。如果是与其他平台或设计方向是有差异的，就要谨慎使用跳转方式变更，总结当前的用户习惯，通过引导或者多次迭代，统一使用正确的跳转方式。二、应用场景什么场景适合1. 平台 A 跳转到平台 B平台 A 中的一个流程中有平台 B 的信息，如果想点击查看具体信息，需要新开 Tabs 网页。2. 同一个平台内，当前模块流程下查看/编辑其他模块的内容，需要跳转新开 Tabs。跳转新开页面，如果信息的承载方式本身就是页面，那么跳转之后查看直接展示原来的页面就可以。如果是弹窗或者抽屉，有三种展示方式：当前页面打开弹窗或者抽屉新 tabs 回到原来的界面，打开弹窗或抽屉在 coding 的页面中，如果在一个抽屉中打开另外一个子工作项，回到原来页面后，详情信息还是以抽屉展示。3. 新 tabs 打开具体信息，不过原来的弹窗或者抽屉信息被铺在了页面中。当前抽屉中打开另外一个模块的抽屉信息时，新开页面的形式变成了页面，没有了返回等信息，页面中的信息平铺，引导用户看完信息之后，关闭当前页面。另外，这种展示方式还与权限有关系，方便信息在不同角色之间流转。三、特殊场景当然，上述的结论并不是市面所有产品的一致方式，通过体验还发现了以下不同的方式，以当前页面所处的场景为维度解释。1. 信息为当前模块流程的一部分在产品层面该功能信息是属于当面模块定位的，不适合再打开 tabs。2. 工作台/概览类的信息这关于工作台和概览类功能的定位问题，大部分的产品都将工作台定位成任务状态的中转站，用来做跳转分发使用，因此从工作台点击跳转到具体的任务模块，可以直接在当前页面跳到具体的任务页面。不过对于一些大的平台，还是建议新开页面，这样方便二次浏览待办信息。3. 其他① 当前在一级页面，如果跳转到其他模块可以选在当前页面直接刷新，不需要新开 Tabs。如果产品的基本定位是其他模块的内容都需要新开 Tabs 网页，最好保持统一。② 动态增减页签导航一些产品的结构设计是导航栏常驻，所有的页面都是以动态增减页签的形式展示，那么只要是本平台内的信息都是不需要新开 Tabs 网页的。不过使用这种方式设计者需要定义的是动态增减页签的使用逻辑。③ 导航模块常驻在一些产品中，导航模块是常驻的，在一个模块下的任务流程中，通过点击友好链接跳转到目标页面，导航随之变化，对用户也会存在一定的暗示：模块与模块之间是有不同功能定位的。但是用户当前用户的任务流程并没有结束，点击了友好链接，相当于丢失了主流程，要是返回还需要不断的点击，如果是个新建流程会更糟糕，所以这种方式不是很友好，要谨慎使用。像阿里云这样，左侧导航栏收起的的时候，用户从一个页面到另外一个页面，面包屑从 1-2-3，变成了 4-5，用户对当前页面的位置是无感的。从而会模糊任务路径方向，没办法准确定位当前位置。所以，新开 tabs 网页是很有必要的。当然，层级越深用户能触及的频率就会越小，于是团队的一部分成员就会说既然频率小那么对产品的影响很小，可以忽略的。但是，场景频率小是对所有用户而言，不是说用户群少。对一个产品而言，让用户满意很难，但是一个看似不起眼的跳转，只要让用户用过一次觉得难用、页面层级深，产品的整体印象就会大打折扣，因为用户不会在意这个问题是产品定位的主流程还是低频场景。往往用户能记住的不是产品带给业务的流畅感和增长，因为他们认为这是产品应该做到的，但是一次不好的体验却会历久弥新。页面跳转的总结有一定的局限性，特殊业务场景还需要做特殊处。本篇来源：优设网原文地址：https://www.uisdc.com/business-design-page-jump
页面 用户 信息 前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过设计师的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。往期干货：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 如何进行页面框架设计前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。1. 了解业务在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。在辛向阳的交互设计五要素中强调了，交互设计的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。① 用户简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。管理者：我希望能够看到团队中所有人的工作进度。普通员工：我希望能快速的完成自己的任务。这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。② 场景对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。③ 目标对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。④ 媒介用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。⑤ 行为在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。2. 组织信息组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。① 明确信息通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。② 罗列信息明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表③ 导入观点，确定关系确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。④ 常见的组织方式常见的组织方式可以分为精确分类和模糊分类。精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。京东商城的左侧商品分类采用的就是模糊分类。混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。3. 组件选择组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。① 导航导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。返回导航：常见的组件有面包屑、返回按钮等。友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。其他导航：常见的有步骤条、分页器等。② 标签标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。③ 搜索搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。常见的组件可以分为：输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。4. 页面布局页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。① 选载体首先根据当前的业务的场景特点，先选择信息的承载方式。目前有三种方式：页面、对话框、抽屉页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。在具体的使用过程中：如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面；如果信息与触发页面有较强的关联性，考虑使用抽屉；如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。② 分区域在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。3. 调布局在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。4. 建议① 设计理论的应用设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。1）视觉动线理论F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。2）交互设计四策略删除将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。分类面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。隐藏将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。转移一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。3）格式塔心理学格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。在这里主要说一下这四个原则：接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。2. 遵循用户习惯在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。参考：https://ant.design/docs/spec/form-page-cnhttps://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeawhttps://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ本篇来源：优设网原文地址：https://www.uisdc.com/page-design
页面 用户 内容 一、前言Notion 是一款融合笔记（Notes）、任务（Tasks）、知识库（Wiki ）以及数据库（Database）的 all-in-one 生产力工具，产品主要服务于互联网群体。2022 年，Notion 的用户规模目前已经达到 3000 万，付费用户达到 400 万。国外用户常用一个公式形容 Notion 是怎么 all-in-one 的：Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同时，Notion 的产品风格也是走极简主义，有着“合而为一”的野心。如何高效地对信息进行整合、梳理， 是设计创作很重要的一环。基于此，这里给大家分享一下 Notion 的产品体验设计拆解。通过对 Notion 的体验设计拆解，为你提供一份文档类产品的解题宝典！更多产品拆解：上线即爆火！3600字完整拆解微信键盘的产品设计微信键盘发布啦！阅读文章 > 事先声明强烈建议使用电脑查看，用户体验更佳；为了让设计细节更容易被看到，用 Gif 来呈现展示；Gif 体积较大，请耐心查看。适合人群第一类，UI/UX 设计师，可以跳出执行层，去思考 Notion 的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，文档产品从业者，通过全面的产品设计策略推导、用户需求分析，获取竞品分析参考。二、日常使用场景1. 工作区和基础概念左侧侧边栏。Notion 的侧边栏是导航系统，创建的所有页面和数据库都会出现在这里。可以将各个页面嵌套在一起，实现无限的组织层次。右侧编辑器。这是创建的所有内容的所在地，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。Workspace 工作区。在团队中，侧边栏的 **Workspace**标题下的任何页面都可以被看到，并且很可能被工作区的所有成员编辑（除非另有权限配置）。Teamspace 团队空间。团队空间可以配置开放式的还是封闭式的，有对应的不同权限的管理配置。Private 私人的。个人工作空间默认为保持页面的私密性，除非它们被明确地共享。Page 页面。Notion 的页面是无限层级的，一个页面能够添加多个页面，页面中的页面也可以继续添加页面。Block 区块。Notion 中的基本对象为 Block（区块），它可以是任何形式：表格、文本、网页、代码块、图片、视频、文件或者直接是一个 Page（页面）。2. Notion 由 Block 组成上图标出了不同类型的 Block（区块）。Notion 以 Block 为基本单位，围绕笔记文档、知识库、任务、轻量的数据库等方面来组织内容。在这张白纸上，包括文字、表格、视频、音频、网页、数据库等等，各种类型内容都可以看作「区块」。操作也非常简单，点击「+」或是输入“/”即可调用，随意将内容组织，并支持 Markdown 语法。Page（页面）上的任何内容，不管是文字、图片还是表格，都是一个 Block（区块）。每个页面都是各种 Block（区块）的排列组合。3. 新建工作区工作区的新建频率相对页面来讲是比较低的，因此新建工作区的入口相对较深，打开位于 Notion 窗口左上方的工作区切换器，会提供新建工作区的入口。尝试新建一个 Workspace，选择团队使用，会直接在根节点创建好几个对应的页面模板可以快捷使用。点击之后，又回批量生成很多模板页面，帮助用户快速上手，帮助用户轻松愉快的度过试用产品的 Day One。4. 新建页面点击侧边栏底部的**+ New Page 按钮来创建一个新的页面，这里新建的页面会默认出现在 Private 下。或者当你把鼠标悬停在侧边栏上的任意节点时，点击任何一个+**按钮，就会在对应的节点下新建页面。新建页面后，会默认出现一些快捷的操作，例如使用模板、导入、数据库等等，帮助用户快速地使用 Notion 强大的页面能力。如果自己尝试输入了一些文本，所有的模板提示和顶部的一些设置就会自动消失，映入眼帘的是宛如白纸一样的画布，工作和生活就从这里开始。5. 页面模板在产品体验中，对于初次上手的用户而言，模板是最好的选择。完全空白的 Notion 并不能解决用户的需求，得先搭建出各种工具，用户直接在工具里进行内容填充，才能满足用户的需求。所以，有了模板后，用户价值的探索路径缩短，减去了需要熟悉功能、自己动手搭建的负担，让用户能够迅速使用起来，并在持续使用的过程中不断熟悉产品各个功能，从而创建出属于自己的模板。在空白页面中点击「模板」，就会进入使用模板的流程。最近 Notion 也对使用模板的界面做了升级优化，记得之前选择模板的弹窗，侧边栏是在右边，左侧预览页面，这次把侧边栏放到了左边，在右边预览页面，「使用模板」的按钮位置也发生了变化。总的来讲会和用户在日常使用 Notion 得行为方式非常一致，都是在左边切换，右边看页面内容，减少用户的认知成本。使用模板的流程也非常短，在侧边栏切换模板的同时，就能在右边同步预览模板的内容，点击「使用模板」便能立刻将将模板内容应用到刚刚新建的页面中，使用上的体验也非常丝滑。所以，正是因为模板在产品策略与市场策略中的重要性：既能促进用户活跃，也能促进用户留存，Notion 才会将模板视作一个单独的模块，不断迭代更新。6. Database 数据表数据表帮助你在 Notion 中以各种方式组织信息--让你组织、分类、标记、过滤、搜索、查看和利用它来完成工作。下面是一个关于 Notion 数据表几种视图和常见的使用场景的介绍。Table 表格。表格形式，类似于 Airtable 表格，便于做数据统计。每一行都可以单独打开变成一个 Page，添加更多的内容。Board 看板。看板形式，类似于 Trello 看板，便于任务分配、分类。卡片中的选项可以完全由自己定义，看板的分组也可以用选项来改变。Timeline 时间轴。时间轴形式，时间轴视图，适合项目排期和计划.Calendar 日历。日历形式，便于查看时间相关的信息，可以在日历上按时间顺序查看任务。List 列表。列表形式，便于查看一部分关键性的信息，比如只显示名称和进度，来明确任务的进度。Gallery 画廊。便于查看多张卡片中的开头部分，可以在卡片开头添加一些概要内容。7. 工具栏大部分同学应该习惯了 Word 这种工具栏，包括其它很多的在线文档平台，也都保留了这种设计。而 Notion 的工具栏默认是隐藏的，在没有开始第一个字输入之前，页面顶部还会有少量的功能外露，当开始输入文本时，所有的多余功能都消失了，页面就是一片白色，功能区全部隐藏，需要点击或选中一些内容才能出现，看似更麻烦，但实则更高效。8. 浮动工具栏这种工具栏可以称为「浮动工具栏」，与传统的工具栏抛给你一堆选择不同，浮动工具栏是围绕内容服务的。你可以先书写内容，再使用浮动工具栏中的菜单设置格式。让设置就在你的光标旁边，移动距离更短，日积月累能省下不少时间。当然，直接记住 Markdown 快捷键是更好的选择。当鼠标选中文档内的已有内容时，界面会自动弹出浮动工具栏。可以针对选中的文本内容进行常规操作。例如加粗、斜体、删除线，或是将普通的正文文本转化为一二级标题，也可以针对选中的文本内容进行评论。9. 编辑工具① 「+」图标只要你把鼠标悬停在一个新的行上，左边的空白处就会出现「+」图标。点击它可以打开一个下拉面板，你可以从中选择想要使用的功能添加到页面中。② 「⋮⋮」图标每当你将鼠标悬停在一个新的行或内容块上时，「拖拽」图标就会出现在左边的空白处。点击它可以打开一个菜单，让你对该 Block 进行操作，例如删除、创建副本、转化成其他 Block 等。③ 「/」命令/ 命令是最简单的方法是向你的页面添加内容或应用上述的操作。输入/后跟任何类型的块来添加它。如/bullet 或/heading。一旦你输入/，就会弹出一个菜单，你基本上可以实时搜索你想要的东西，只要按 enter 就可以选择并使用它。10. 分享页面在分享页面的设置中，可以对不同的成员域做不同的权限配置。对于这些配置项，在鼠标悬停的时候会在弹出相应的图示截图和文字说明，告知用户进行了这项设置后会发生的变化，给予了用户清晰的配置界面。当用户准备点击右下方的「复制链接」时，还会再次出现 Tooltips 提示用户当前配置的分享权限说明，避免权限误操作引发的不符合用户预期的后果。三、体验亮点1. 左侧导航交互日常中常见的 B 端产品的导航栏一般都是要么展开，要么收起两种固定的交互模式，而 Notion 左侧导航非常灵活，尤其是导航栏收起状态时候，鼠标只要悬停到左侧区域，都可以将导航栏呼出，这时候通过导航栏切换到目标页面后，将鼠标移到页面内编辑内容时，悬浮的导航栏又回自动消失。在导航切换效率和页面内容浏览的沉浸感上有了非常好的权衡。2. 抽屉预览在数据表类型下打开页面，默认会通过侧边抽屉的方式打开，侧边打开方式可以自定义拖拽侧边抽屉的宽度。当抽屉拖动到一定宽度时，会自定将左侧的导航栏收起，再减小抽屉宽度时，侧边导航又回自动呼出。同时，侧边抽屉的交互方式并不是传统意义上的直接覆盖在当前页面的上方，在内容层级上会将下放的内容进行推拉，例如我们能够始终看到「新建」按钮，让用户在查看抽屉内容时，也能够灵活地操作后面的内容。3. 视图配置切换数据表有 6 种视图类型可以灵活切换，点击「新建视图」，切换的面板覆盖在内容上方，默认聚焦到「视图名称」的输入框中，在选择不同的视图类型时，能够直接预览到切换后的效果，并且能够设置不同的视图下，打开下一级页面默认的打开页面方式，整个使用体验上非常顺畅。4. 页面图标支持自定义给页面设置表情或图标。给予国际化和本地化的考虑，会有不同肤色的 emoji 配置，让不同肤色的用户能够用对应肤色的 emoji。对于一些只想加一个表情装饰，却有选择困难症的用户来说，还提供了一个「随机」的配置。更加智能的是，设置好的表情或图标也会在页面树中呈现，当用户的页面书中有较多内容时，可以高效地帮助用户对页面进行识别。5. 全局搜索点击「搜索」后，提前判断用户大概率要输入内容，会自动帮用户聚焦到搜索框当中。同时给出了几个非常高效的筛选项，能够帮助用户更精确地查找内容。底部提供了快捷键引导，这一点也是非常人性化，帮助不了解快捷键的用户能够迅速获取快捷键的用法，提高操作效率和体验。更令人惊喜的一点体验是当搜索的关键词没有匹配到时，会引导用户搜索已删除的页面，点击后会将搜索的关键词自动带入到垃圾箱中进行检索，提高了搜索能力的可用性。6. Block 工具栏悬停预览Block 工具栏中，鼠标悬停某个工具时，右边会出现对应工具的效果图和简单说明，能达到更好的引导目的，用户能够直接了解到这个 Block 是不是自己想要使用的，而不需要每次都一个一个插入试一下之后才知道，能够帮助用户更全面高效的了解 Notion 支持的能力，提高 Block 的使用效率。7. 即时修改和创建属性在使用数据库属性设置的时候，可以即时地对属性进行修改，使用检索可以快速使用属性，当检索的内容不在已经设定好的选项中时，会智能地提示用户可以创建一个新的属性。把属性配置的能力轻量化地外露出来，不再需要像传统的软件也痒属性配置有一个单独的属性配置面板。8. 图片尺寸调整图片支持宽高等比拉伸调整，常见的拉伸点实在图片的四个角，会容易引发的问题是当用户拖拽右上方拉伸点缩小图片时，因为图片在编辑器中的定位是固定的，会导致图片的缩放和鼠标指针没有跟随。Notion 的处理很好的解决了这个问题，拉伸点位于图片的左右两侧。同时图片的拉伸也会根据所处的 Block 来自动适应，例如图片位于折叠列表中时，由于图片约束了只能左对齐，所以只在右边有拉伸的手柄；而当图片位于普通的 Block 时，左右都能进行拉伸。9. 分栏交互Notion 中的分栏交互也非常智能，只需要点击并拖动你想放进另一列的文本或是其他类型的 Block (左边空白处的 **⋮⋮**符号是你的拖放手柄)⋮⋮，把它放到你想要的地方，就能够智能地变为分栏。想要改变分栏的宽度也非常灵活，只需要拖拽两栏中的竖线就可以智能的改变分栏的宽度。10. 弹出下拉面板时禁用页面滚动在很多中后台的系统中，经常容易发现的一个看似 BUG 的场景，就是打开了一个选择器 or 下拉菜单时，再往下滚动屏幕，下拉菜单的面板没有跟随滚动，看起来会有点像是 BUG。这个难题在 Notion 中有了一个非常巧妙的解法，在弹出下拉面板的时候，禁用页面的滚动能力。看似简单实则非常巧妙的解决了设计师在日常设计中经常遇到的难题。11. 折叠块正常情况下，Toggle list 下有内容时，箭头是深色的。当 Toggle list 的内容为空时箭头是灰色的。通过一个非常小的细节给予用户提醒，恰到好处。12. 页面为空时，图标是空心的页面内可以嵌入页面，如果嵌入的页面是有内容的，图标内也是会有几根横线；如果嵌入的页面没有内容，图标内部就是空的。通过一个小小的图标直接向用户传递是否有内容的关键信息，省去了用户需要去点进去页面才知道是否有内容的步骤。13. 拖拽小技巧框选文本 Block 可以直接拖拽到数据表中，并且会自动根据所框选的文本的 Block 的构成去自动转化为数据表中不同的行数据。批量变更 Block 类型时，非常高效。14. Block 链接文档中的每个 Block 都有一个专属的链接，复制这个链接发给其他人时，打开后会直接定位到对应的 Block，避免需要在一整篇文档中去找想要的关键词，非常灵活高效。15. @now 会实时更新Notion 还不容错过的一个实用小功能是利用「@」快速输入具体的时间戳，你可以把它用在日记里，或者是工作日志等。具体来说，假设今天是 17 号，当你在模板里用了「@Today」，无论你在多久之后利用这个模板创建新页面的时候，它只会显示「17 号」。而新的「@Today」则会动态更新，假设今天是 28 号，你用同个模板创建新页面的时候，会发现它变成了「28 号」，而非之前的「17 号」了。16. 任意空行都会快捷输入提示在所有的空段落前，都会有一个 Placeholder 提示用户输入「/」能够快速插入 Block，潜移默化的引导用户使用快捷键，起到了教育用户的作用，提高用户使用效率的同时也增强了用户对产品的粘性。17. Notion AI2022 年 11 月 16 日晚，Notion 发布了 Notion AI 测试版写作助手，来帮助用户写作、初稿整理以及记录创意点子，标志着 AIGC 发展进入一个新的阶段。申请了一下内测，已经排队到 16w 人了。四、体验槽点1. 没有固定位置的页面目录原生能力不支持页面目录，虽然支持目录 Block，但是插入的目录 Block，只能跟随页面内容显示，当页面内容往上滚动的时候，目录就会消失。这里右边还是通过第三方插件才实现了目录的能力。2. 没有原生的思维导图Notion 目前还不支持原生的思维导图，国内参考的竞品 Wolai、FlowUS 都已经能够支持思维导图了。目前仅能是通过一些第三方插件置入思维导图，整体的灵活性远不如原生的 Block 那样强大。3. 原生不支持中文目前对中文还不太友好，中文搜索不全面。12 月 14 日的时候，Notion 在 Twitter 上有发布了德语版本的支持，好奇的在下面留言啥时候支持中文，网友有趣的回答道 100 years。不过目前有一些第三方的汉化插件可以使用，这里分享给大家： https://zhuanlan.zhihu.com/p/397634631五、总结Notion 团队非常重视设计，创始人伊万说：“设计意味着这里的一切，Notion 的感觉对他们来说具有重要价值”。不仅如此，你在他们的网站会发现，好像全部都是用 Notion 创建的一样，有很强的认同感。从少数派到哔哩哔哩，从知乎到小红书，有大量的 Notion 用户每天都在分享自己的 Notion 使用经验。这导致关于 Notion 的文章和视频每天都在快速增长。PLG 的发展模式，要面对大量的 C 端用户，所以 Notion 必须要有非常好的产品体验。通过极致的产品体验，减少用户使用中的阻碍与疑惑，使整个产品在使用上更为顺畅，从而提高产品的易用性，减少在面向 C 端用户过程中的运营咨询，便于团队将咨询交付的精力集中 B 端用户的服务上，从而创造更大的商业价值。由于时间和篇幅有限，关于 Notion 的体验设计拆解中存在的疏误之处还望大家给与指正，欢迎大家一起学习和讨论。世界杯专题！8500字全方位深度拆解懂球帝APP2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。阅读文章 > 6000字拆解！花费10个亿，抖音如何设计世界杯专题？作为全球最火爆的体育赛事，世界杯由于其独有的稀缺性，被外界誉为四年一次的足球盛宴。阅读文章 > 参考链接Notion 官网： https://www.notion.so/Notion 帮助文档： https://www.notion.so/helphttps://36kr.com/p/2025046266178056注：部分图示取自 Notion 官网感谢阅读，我是设计师波波 Bobby He，深耕 B 端体验设计，持续学习输出中，欢迎关注和交流～本篇来源：优设网原文地址：https://www.uisdc.com/notion-design
用户 品牌 页面 Hey，亲爱的小伙伴，你期待的旅行是什么样的？很高兴在 22 年末，智行 10.0 带着轻快的步伐与大家见面啦！新年新面貌，全新智行希望为小伙伴来年的旅途提供更优质服务，增添一份好心情。下面就来看看，智行 10.0 的构思与成果吧～更多改版案例：如何让图标更吸引人？复盘智行 Tab 图标设计过程OMG！阅读文章 > 智行，作为一站式旅游出行平台，已覆盖火车、机票、汽车票、酒店等业务。近年来，更是以亲民的价格吸引了越来越多的年轻用户，其中 90 后及 00 后占比高达 75.2%。前期调研中我们发现，与核心用户年轻化趋势形成反差的是，智行的界面风格调性更多被评价为“商务”、“严肃”。因此，褪去旧壳，以崭新活力之姿拥抱年轻群体是智行 10.0 需要探索的方向。项目初期，为使改版的感情调性更贴近用户出游场景，我们在团队内部及用户渠道收集了大量关于“旅行”的联想关键词，其中包括：愉悦、轻松、有趣、探索...等等。这些美好的词汇，描绘了大家对未知旅程的期待与憧憬。由此，我们提出「旅行，是对自由与快乐的向往」作为 10.0 升级的主线。我们希望通过 10.0 升级，提升体验及服务品质同时，打破工具类产品较为沉闷的使用感受，挖掘旅行中快乐的情绪内核，以轻盈有趣的设计传递“快乐旅行，自由出发”的生活态度，做有价值有温度的 OTA 产品。以此，我们确立 10.0 的设计目标：轻盈有序 · 打造高效预订体验情感传递 · 旅程的贴心陪伴者品牌外化 · 构建品牌记忆点一、轻盈有序 · 打造高效预订体验1. 全新 10.0 框架 更轻量智行始终致力于让用户订得高效、订得安心。然而扩充的业务场景和功能，使页面结构不堪重负，密集的信息和堆叠的模块影响了用户的预订体验。10.0 全新框架语言，希望通过有效的视重引导及清晰的页面展示，降低操作费力度，打造高效预订流程。“轻”头部色彩 操作更聚焦色彩是影响视重的重要因素。10.0 的升级中，我们将框架语言的背板色由品牌重色调整为明亮通透的浅色，有效将视重由头部转移至高频操作区，为用户营造专注沉浸的下单体验。同时，轻量的头部使页面更具呼吸感，缓解旧版“沉闷”、“商务”的视觉感受。“轻”信息展示 预订更友好清晰的信息展示可有效降低预订流程中的操作难度及决策成本。我们对页面信息进行分类重组，通过字号大小间距等手段扩大信息层级，凸显关键决策信息。并在有限的页面空间内，精简信息，降低信息密度，增加透气感，提升阅读友好度。2. 全新首页 让营销变有趣首页是获悉智行业务种类和流量分发的第一道关卡，业务入口的清晰展示对用户查找和后续转化极为关键。新版首页在使用 10.0 框架的基础上，用重色光感色块衬托智行四大业务入口，增强点击感。同时我们将业务线入口作为营销载体，融入动效，使营销活动的曝光更立体有趣，为各业务线导流及增长起到了正向的作用。二、情感传递 · 旅程的贴心陪伴者我们希望智行 10.0，不仅好用而且好玩，传递正向情绪价值，与用户共情，成为旅途中的贴心伙伴。我们通过 IP 植入、可视化以及创意的视觉唤新等手段一改智行往日“严肃”的形象，为用户提供更温馨友好的服务。1. IP“小智” 陪你环游世界智行 IP“小智”自诞生以来，机智可爱的形象圈粉无数。在 10.0 的升级中，我们将它融入更多页面流程，增加情感触点，提升智行的品牌亲和力。我们结合业务场景的同时，为“小智”量身打造了俏皮活泼的动作，塑造和饱满了它的性格特点，使其焕发生命跃然纸上。下单助手，高效操作有“我”指引下拉刷新，一票在手，极速出行空态场景，有“我”不再无聊2. 全新视觉语言 营造愉悦氛围视觉语言是传递产品调性的关键要素，围绕着“轻松愉悦出行”的基调及年轻的客群特征，我们对 10.0 的整体视觉进行了唤新。明快的色彩天空是纯澈与美好的汇集，正如旅行中探索快乐的本心。我们从中寻找灵感，从智行品牌蓝延伸出“纯净蓝”，并将其作为背景色融入核心流程页面中，营造蓝天白云阳光暖煦的视觉氛围。同时，我们提高了辅助色的明度和饱和度，让页面配色更活泼。圆润的图形我们用简洁流畅的外形结合大圆角，使图形在视觉呈现上更灵动 Q 弹。叠色的表现形式起到 1+1>2 的效果，使图形更丰富多彩～轻盈的插画插画用简约的造型风格，聚焦核心功能点的传达。视觉上以灵动的线条，搭配轻盈的高明度渐变，展现 10.0 年轻活力的品牌调性。3. 3D 现实映射 服务贴心友好调研中我们发现，预订流程中，用户面对复杂功能场景，时常存在这样的烦恼：功能说明长，读得脑壳疼看了半天不理解，迷迷糊糊下了单我是出行新手，那么多专业词看不懂呀...常说“字不如表，表不如图”，图像在传递信息效率和容量上都是文字的数百倍。10.0 的升级中，我们希望通过有效的可视化手段替代单薄苍白的文字表达，将信息化繁为简，提升智行服务的品质感及友好度。我们结合功能为用户搭建 3D 场景，通过营造真实的环境氛围，将现实映射运用到功能表达中，调动用户真实生活中的常规心理认知。同时结合生动的动画，将冗长复杂的功能说明以更直观友好的方式呈现。4. 趣味动效 转角遇到“小惊喜”旅行是快乐地出发，我们在下单流程中埋藏了许多有趣的彩蛋动效，为用户即将到来的旅程增添不期而遇的“小惊喜”。三、品牌外化 · 构建品牌记忆点1. 打造全新 UI 品牌符号品牌符号有利于品牌价值观的外化输出，为产品带来记忆点，同时高辨识度的符号能降低用户对品牌的认知成本，增加信任感和忠诚度。由此，我们结合业务属性及视觉创意打造了智行全新 UI 品牌符号～符号的由来创意上我们选取智行最具代表的火车业务为基点，从产品 logo 出发，衍生出抽象的火车造型。以光感的主题色渐变，增强呼吸感和透亮度。让符号“动”起来为了更生动地展现火车迎面驶来的速度感，我们将符号“动”了起来，穿梭如风的动态不仅象征抢票的高效性，也为原本静态的页面带来一丝小调皮。我们将其应用到了底 bar、一级页面切换等众多核心页面中。写在最后智行 10.0，从探索、落地、验证到上线，历时 10 个月。比心每一位设计师为之付出的努力。同时很开心，我们收获了用户对此次升级的认可和喜爱。随疫情的逐步放开，旅游业也将稳步复苏。正如开篇所说：「旅行，是对自由与快乐的向往」智行期待未来与你相伴，共同探索未知的世界，欣赏旅途的风景。2023 年，和智行一起，向快乐出发～本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-10-0
元素 页面 视窗 写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。更多B端设计干货：5000字干货！超全面的B端设计指南：消息通知消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？阅读文章 > 一、X 轴的布局与适应B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。1. 单栏型表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。2. 双栏型表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。3. 多栏型多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。二、Y 轴的空间利用B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。1. 如何承载大量信息① 替换型对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。② 向下延展型对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。2. 如何区分强弱主次① 强-滚动吸顶当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。② 弱-局部展开对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。三、Z 轴的叠加顺序说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。1. 基础区间展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。2. 模态区间模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等)临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等）第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。3. 顶层区间全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。临时层-由 g 触发出的临时浮层最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。四、写在最后到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/xyz-design
用户 信息 页面 随着市场竞争的日益激烈，用户除了要求平台提供更多更好的产品以外，还要求以更满意的方式去展示产品，信息呈现形式的不同，对用户的信息接收和解读会产生不同的效果，从而会影响用户的满意度进而对购买决策产生影响。而下单转化率是到家业务的重要指标之一，提高用户购买率是到家业务的核心需求，因此希望优化 58 到家页面设计。页面设计就像商品的造型设计，是想要吸引消费者的重要卖点，一个成功的页面设计不仅需要做到吸引用户点击浏览页面，还需要能够诱导用户身份转变成消费者，从而进行购买行为。页面优化的探索因此，页面设计不仅需要考虑视觉设计因素，还需要考虑用户认知，探索用户购买行为与动机偏好，从而精细化的理解用户的消费特点，了解用户心智。本次调研将会在这一阶段通过深度访谈，了解用户购买渠道、服务购买关注点、以及对服务的认知等，去深入了解不同渠道的核心竞争力、现有或潜在用户的人群画像以及未来线上服务产品的购买趋势；同时，在深入了解用户心智的基础上，我们也需要聚焦到家精选核心产品线下的购买流程，分析体验问题及优化方向。眼动测试的优势在这过程中，需要我们去了解用户在线上购买流程中的关注点，从而去分析其在流程中的体验。但在访谈中，用户“所说”是否即“所想”，“所想”是否即“所做”呢？而且一些下意识的行为，甚至用户自身都难以察觉，更不用说通过言语主动表达，那么这种情况下我们需要专门的技术来测试用户在关注什么。其中眼动测试和其他测量方法相比，具有设备简单、 实验数据直观等优势，能够高效地挖掘用户的无意识行为，并获得更直观的实验数据，适合于视觉界面相关的评估实验。因此在本次研究中，我们同时引入了眼动技术，通过眼动技术揭示在不同类目下，用户在购买过程中对信息的核心关注点以及浏览轨迹，从而作为用户行为数据以支持研究结果，进而提出优化建议。百度也发过类似的实战案例，大家可以一起看下：大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 什么是眼动测试那眼动技术到底是什么呢？眼动技术是确定一个人在注视何处的技术，主要通过眼动仪收集用户的眼动数据，然后用特殊软件对这些数据进行整理、 分析，得出特定的眼动指标和轨迹，进而用来分析用户心理和用户行为。1. 研究类型眼动研究中主要的研究类型有定性洞察和定量测试2. 如何选择由于本次的研究主要目的在于页面优化，需要去发现和解释可用性问题，并为页面优化提供改善建议，因此更适用于形成性研究，通过眼动仪去观察用户行为，探索行为的背后的原因。研究过程1. 研究准备确定研究问题：确定产品需要改进的领域设备：Tobii Pro Glasses 2 眼动仪任务流程：确定任务场景+任务点击+明确结束行为+追问刺激呈现：被试间设计2. 被试选择用户的选择并非随机，需要结合研究目标和方法，选择合适的用户进行实验，首先根据本次需要优化的到家精选具体类目，将人群按常用类目进行划分；根据以往的经验，性别、年龄、婚姻状况等会影响用户的选择和操作，所以对其性别、年龄、婚姻状况按照产品类目人群结构进行配比。此外考虑用户有竞品使用情况，此次调研并不限制其竞品的使用，但是否有本品使用经验对用户的操作和感知会有较大不同，因此限制其中一半用户未曾有使用到家精选经验。基于目前眼动追踪技术的局限性，并不能够校准和追踪所有人的眼睛，因此还需根据用户眼部情况进行筛选。3. 部分结果展示① 眼动轨迹图通过眼动测试后输出的眼动轨迹图，如图 1，可以看到用户在产品首页中， 其眼动轨迹较为复杂，眼跳次数也较多，说明用户在进入首页时，试图寻找目标业务入口时，较为困难。（眼动轨迹图中，以点表示个人注视，以线代表眼跳，在轨迹图中点的大小代表注视时长，点的大小和注视时长成正比，注视序列常以点上的数字表示，通过其注视序列反应环境中元素的吸引力以及视觉搜索轨迹）结合眼动关注情况和测后出声追问，其主要原因在于用户浏览习惯以 L 型为主，在无强烈刺激下，对左上方信息易忽略，且在页面中对头部单品的展示，部分用户因位置与颜色背景原因，误将其看作是广告位，因此出现寻找业务入口较难情况。② 热点图通过眼动测试输出的热点图，如图 2，我们看到用户的注意分布情况，以及用户的关注点及其程度。在不同的区域模块下，用户关注点各有侧重，但并不是指所有热点图用户关注程度越深，代表其越感兴趣，也可能代表用户对当前信息不理解。（眼动热点图其眼动追踪测量值以彩色表示。红色代表浏览和注视最集中的区域，黄色和绿色代表目光注视较少的区域。“热量”与所代表的测量值成正比，常用多个用户获得的数据创建的聚合可视化热点图）结合眼动关注情况和测后出声追问，发现不同性别用户在选择车型时参考依据不一，且在整体页面浏览中用户相比其基础信息，对保障类信息关注度更高，此外在浏览到服务流程中时，用户的关注度较高，测后追问时用户表示在服务流程的排版下信息重点不突出、信息繁杂，需要在众多信息中找自己需要信息，对用户认知负担较重。③ 注视视频通过眼动测试生成的注视视频，我们可以看到一些很难从静态可视化图表上看到的现象，如用户在寻找某一业务的入口，因为存在对其他入口的错误理解，易误点进入其他入口，这种动态的行为，通过注视视频更能够直观表示，并且对业务相关方更有吸引力。（注视视频是个体注视点的动态可视化，由移动的点或十字线表示，并覆盖在刺激的顶部）来个总结定性的眼动追踪分析关注的是人们如何看待事物，并通过查看追踪数据的可视化进行，而定量的眼动追踪分析大多数是关于设计之间、设计和标准之间的比较，对样本的选择、实验的设计、测量指标选择、数据的处理等有更严格的处理，希望未来在产品精细化研究方向上，能够通过眼动测试给予更多的贡献。大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/eye-movement-test
图标 页面 用户 大家好，这里是设计夹，今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小，却包含着很多细节。作为通用的视觉化语言，把握住其中的设计细节至关重要。之前有分享过关于图标设计的文章：5000+干货！从4个方面掌握图标设计的基础知识Hi，小伙伴们，Q 什伍最近花了两周时间，整理了这篇关于图标设计的文章解析，分享给大家。阅读文章 > 这次总结一下图标设计的属性以及在图标设计中，很重要但容易被忽略的知识点。在 UI 设计中，图标主要有两大类：一类是 APP 启动图标，每个 APP 独一份；另一类是系统 icon，搭配文字，方便用户快速理解信息，也是这篇文章重点讲解的内容。风格常见的图标风格有线性、面性、彩色、写实、3D 等，图标的选用因页面的设计风格、图标的位置等原因会有所差异，主要的作用是反馈动作和吸引用户更多注意力。线形/面性：最基本也是做常用的风格，广泛用在页面设计中。彩色：通常用于反馈用户的操作或者增加用户的注意力。3D/写实：当页面中的某个内容需要引起用户高度注意时使用，一下抓住用户的视线。Tips: 现在字节、百度新推出的一些年轻化产品中，有很多精致的 3D 写实图标，极具个性，很好地迎合了年轻用户的喜好。在扁平风格流行的当下，这样的尝试也是一种突破。如何从零开始完成一套3Ｄ图标设计？来看大厂的实战案例！背景QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。阅读文章 > 重量简单的线性图标重量轻，看起来更简约，不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容，那么更适合选用简约的、重量轻的线性/面形图标，防止页面过于杂乱。相反，如果当前的页面中只有文字，信息量很少，那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性，让页面看起来更有设计感，给用户带来视觉上的愉悦，简约而不简单。属性构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等，表达式规则是统一的，以便只给观看者识别图标所需的最小更改。描边粗细：手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致，4px 的描边视觉较重，可以用在优先级较高的区域作为功能性图标,。端点/节点：图标的端点有平头、圆头和方头，图标的节点有斜接连接、圆角连接、斜角连接，具体使用哪种样式要根据页面的情况统一设置。圆角半径：方形的图标边角过于锋利，用户有时候看起来会不舒服，圆角图标更圆滑，相对来说更容易让用户接受。虽然圆角用的更普遍，但具体使用哪种，还是要考虑页面的整体风格再决定。网格图标的外形有圆形、方形、三角形甚至不规则形状的，所以我们很难将不同形状的图标尺寸完全统一。这个时候网格就起到很关键的作用，有了网格相当于提前将图标限定范围，在网格范围内根据图标的重量和重心灵活调整大小，这样会让不同形状的图标看起来更统一。视觉校正由于设计软件的局限性，虽然有些图形已经居中对齐，但有时候还需要进行视觉校正。最典型的图标案例是“播放”图标，利用设计软件对齐中间的三角形后，会发现三角形的位置看起来偏左。利用软件对齐后，我们还需要再用眼睛确认一遍，我们可以将三角形向右移动，保证三角形的重心与圆形的重心一致，这样整个播放图标看起来会更舒服。角度设计图标时，我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视，所以大多数的图标都没有透视，看起来会更简洁。带透视的图标会给用户营造一种空间感，可能会感到认知失调。虽然这种带透视的图标能引发用户关注，但不建议这么设计。比例图标比例通常使用 8 的倍数作为基准，例如 8px、16px、24px 和 32px，以便在各种环境中进行流畅地切换。除此之外，在移动端等屏幕尺寸较小的页面中，还会使用 4px 的倍数，来实现多功能性。清晰图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小，要尽可能做到对用户友好，可以使用一些简单的隐喻设计，但含义不能过于复杂。一个图形能说明的问题，没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义，这样反而会影响用户的操作。细节这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息，特别是对于尺寸很小的系统图标，最好只保留最基本的内容，移除多余的装饰元素。一致性这里说得一致性，并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面，线性、面性等多种图标风格可以一起使用。但在同一个页面场景中，执行相同功能的图标应该保持相同的样式。熟悉感面对不同的操作系统，例如 iOS 和 Android，同一功能对应的图标也会有差异。针对不同的系统，我们可以选用大多数用户熟悉的图标，这样用户能更快地理解图标的含义最后以上就是常用却容易忽略的图标设计细节，希望通过这些内容能帮助你对图标设计有更深的认识。欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/11-icon-design-details
方案 列表 页面 项目背景智行 App 的“智慧出行”功能，作为一种全新的出行方案查询方式，致力于提供用户全面的出行方案推荐。以往的方案查询，用户需要预先想好具体的出行方式，才能开始操作。但这种搜索路径，并不是最简便的。我们希望直接给到用户所有的交通方案，并提供对比与出行建议。也正是因此，我们需要设计一个更全面的方案列表页面。设计目标之前的页面效率非常低，为了让用户在同一个页面中，就可以完成方案的“浏览”、“切换”、“对比”。我们制定了以下三个设计目标：1. 提高对比效率最初的版本存在的问题：1）不同的方案类型纵向罗列，露出数量依赖屏幕高度；2）“查看更多”的列表与主列表需要反复跳转；3）不同方案之间距离远，全靠记忆力。这都是我们需要解决的问题。2. 加强操作提示切换列表的操作，不可避免地会使用到“Tab”这种交互语言。而常见的 Tab 形式大多存在点击感知不高的问题，是需要解决的核心问题。3. 页面轻量化OTA 方案列表本身就是一个文字信息量巨大的页面。不同类型的方案之间，关键信息也不一致。混合之后如何进行统一化设计，也是个很大的考验。设计历程整体项目经历了两次大的改版，我们分别对交互形式与视觉样式做了升级。交互形式探索为了加强对比效率，将不同类型的方案列表放入同一个页面。我们主要做了以下几种交互的探索。1. 「双列表」的探索不可否认的是，双列表在「横向对比」上有独特的优势。但缺点也是十分明显的：页面信息过于密集，容易造成视觉疲劳；也很难兼容三种以上的方式对比。2. 「横向 Tab 栏」的探索这种形式用户的「认知度高」，但切实存在点击感知不强的缺点。我们分析了一下其中的原因，认为是：视线方向与手势方向不一致的结果。如果阅读视线和滑动操作都是纵向的，会如何呢？3. 「纵向 Tab 栏」的探索细想一下自己使用以下应用时，是不是很自然的使用了切换。但如果我们采用了同样的结构，又迎来了新的问题：如何在纵向 Tab 空间中，放下复杂的交通信息？我们使用了新的图形化语言，并完成了第一次改版。至此，交互形式确认。初步方案上线后，整体页面的转化率获得了极大的提升。之后我们又进一步做了视觉的整体优化。视觉降噪处理验证了交互样式的成功后，我们希望让页面更加轻量化。1. 视线重心转移原页面头部的色彩比重非常大，但头部的信息与功能并不重要。我们的期望，是用户将视线集中在不同的方案 Tab 上。于是对页面做了初步的降噪处理，并增加了明显的操作提示。2. 继续简化 Tab 栏先前 Tab 虽然清晰，但形式过于整体，像行程说明，反而缺少了可以点击的感觉。在样式简化的同时，我们进一步压缩宽度，也统一高度。使得 Tab 区域整体更“整齐划一”。3. 方案卡片的重构方案卡片是用户对比的视觉主体。我们做了以下调整：1. 使用智行数字体增强辨识度2. 适配不同 Tab 下的关键信息3. 中转方案图形化整体效果至此，整体的改版告一段落。我们来看下最终的效果。项目总结项目上线后在数据上取得了很好的效果。就单页面的转化率来说，基本做到了和常见的火车列表页与机票列表页持平。在出行高峰、需求旺盛的时期甚至更好。之后智慧出行还会在方案的智能推荐上，为我们的用户带去更好的功能与体验。愿我们的努力为你带来更好的体验。感谢阅读~列表流、卡片流、瀑布流、Feed流，你能分清吗？可以讲解下列表流、瀑布流、卡片流、Feed 流这几个词的含义与区分么？阅读文章 > 欢迎扫码关注公众号：「智行 ZXD 设计中心」本篇来源：优设网原文地址：https://www.uisdc.com/zhixing-list-design
页面 用户 产品 前言在 B 端产品当中，我们经常看到五花八门的设计页面，很多人会质疑自己，这是 B 端产品的页面么？感觉品牌调性不太符合，B 端产品往往传达给用户的都是严肃、刻板，但是在同一个产品当中，同样会存在这样的差异。在浏览各大设计系统时，我们经常听到 B 端页面的具体归类，通常都会分为：表单页、列表页、详情页、结果页、工作台 等等…，但是除了这些维度进行划分之外，我们还可以从另一个角度去看待 B 端的具体页面。那今天就是我们要讲的，按照用户的专注维度去划分的三种 B 端产品的页面类型：“过渡页面、沉浸页面、配置页面”其实在我划分页面类型的本质上，是在对用户的不同姿态所去使用的专注度的思考。因为我们用户最终的使用姿态也就导致了，页面需要进行细致的分类。过渡页面为什么工作台总是五颜六色？花花绿绿？为什么我明明想要的是表格、表单，你却给我看这个花花绿绿的页面？为什么我不建议打工人的居住位置选择在公司附近？其实都可以通过过渡页面/场景进行解答。过渡页面，在设计中也就是用户不需要非常专注于某一个具体的页面。而用户在这些页面当中主要起到过渡的作用，也就是用户可以通过这些页面去寻找到他想要的内容。比如工作台/首页，它本质其实就是分发，也就是说在 C 端产品它分发的是用户流量，而在 B 端产品它分发的是产品功能。因此你会发现 B 端产品的工作台都是以各种各样花里胡哨的功能入口来展开的，即使是相应的图表，折线图，但通常情况下这些数据可以通过图表进入到对应的页面当中。因此它的本质都是提供给用户进入系统功能的入口。而花里胡哨则是通过颜色的区分，能够让他明确的知道我究竟要去到哪，要用什么功能？比如现在你打开 Sketch/Figma，它的页面当中总是花花绿绿。其实在它看来，这个页面就不是一个严肃，需要去沉浸的页面，而更多是让你找到你想要的信息内容。其实过渡页面的本质就是如同我们上班工作，每天都需要有一个通勤时间，比如 15 分钟、30 分钟，来去缓冲工作与生活，通过这样的方式来进行切换自己的工作状态，能够让你知道在哪些地方我需要格外专注、在哪些地方我们稍微放松。沉浸页面沉浸页面，顾名思义就是让用户更为投入的页面，我们再以 Figma 为例。你会发现 Figma 在首页当中，它的设计风格是非常跳跃、夸张的，而到了沉浸式场景当中，他的设计风格就是克制、聚焦。这究竟是为什么？其实这个和我们 B 端产品有着异曲同工的地方。在 B 端产品当中，你会发现，表单、表格，我们在设计这些页面的时候，考虑的不是如何设计其颜色、样式，想的更多就是在用户不被干扰的前提下，能够更加合理、高效展示这些信息。而这些页面在设计的时候其实就是一个沉浸页面，考虑的是从统一的页面布局，相同的交互形式，来对用户进行教育。这也是为什么你看 Sketch、Photoshop、Figma。这类相同类型的工具型软件，都拥有着相类似的信息布局方式，而我们再去做其他的 B 端系统时也会借鉴他们的布局方式。配置页面配置页面，也就是用户对于前台应用的相应配置，在 B 端系统当中就是我们常说的管理后台系统。在管理后台的设计当中，考虑的就不是如何布局、如何进行颜色突出，我们更多应该去思考如何降低用户的使用成本。常见的处理方式会有几类：可视化配置、帮助体系的建立、专业门槛的降低、产品模版的建立。这里就不展开讲了，里面会涉及到较多的细节。在接触到的任意 B 端系统的管理后台，都需要做到上面几点才能够算是一个合格的 B 端管理后台。比如在飞书的字段配置页面里面，你会发现就是如此。采取可视化的配置策略能够让你知道管理后台的配置结果，在前端系统的页面里面究竟应该如何展示。最后聊聊其实，最后你会发现，我们在文章里聊的其实并不是页面类型，而是你的用户它的使用究竟有哪些场景。虽然大家都在说 B 端，但 B 端产品本身就是一个复杂的结合体，它有着不同的页面、不同的，因此在设计上，我们更要格外小心。如何做好B端产品的信息设计？我总结了3个原则！最近在 12306 网站购票时，弹窗中展示了大段的文字信息，我只是匆匆扫了两眼就果断关闭了，实在没有耐心逐字读完。阅读文章 > 欢迎关注作者的微信公众号： CE青年Youthce本篇来源：优设网原文地址：https://www.uisdc.com/b-end-page-type
颜色 页面 原因 前段时间我在京东买到坏芒果了，要申请售后。作为一个界面设计师我居然点错了按钮。Excuse me？我眼睛是不是不太行了？找了几个人问，有的说不会误点，有的说页面确实有迷惑。但他们都是带着我提出的问题去看页面，不是真实场景下用户的反馈。这里的“问题”是基于我这个用户认知下的，实际上有没有问题得看京东这个页面的用户行为数据。那就以我这个用户的角度，从设计层分析一下到底为什么会点错吧。初步认为，问题主要在于点线面关系，包括字号大小、颜色、视觉层级、组合等。说到这个想起了几年前的一个项目。当时我们用字号和颜色都很谨慎，但产品说我们字号太多，大小不一显得整个页面很乱。我们核对了之后发现字号也不多呀。后来才明白“字号多”只是他们的感受，即使字号少，颜色、层级和组合多的话，也会造成视觉上的“字号多”。发现问题：用户出错在哪里A：我每次都点击横线上“请您描述问题并上传收到商品照片”这句话填内容，然后发现这里不是给我填内容的B：我不知道退款要填多少东西，什么是一定要填的C：提交的时候出错了，说是没写描述，又要回头去写用户只会告诉你遇到的问题和使用感受，毕竟他们也不知道哪里出了错。所以对于用户提出的问题，我们得先发散，再归因。分析问题：先发散，再归因1. 发散问题以问题为中心进行放射性发散，连接相关点，组成问题的图谱。尽可能提出更多的疑问点，从多方面考虑，找出关联性较大的因素。问题 1：漏填为什么不给出必填提示呢？不同的申请原因，注释分别是什么？全部的申请原因都要写描述吗，存在可以不写的情况吗（比如七天无理由）？全部的申请原因都要上传凭证吗？如果申请原因不同，填写描述的提示会不同吗？说明一下，刚开始出现问题的页面是优鲜赔，我还没截图已经进行完赔付了，所以分析用的是退货界面的选项，内容大致一样，样式也一样。分析之后发现：1）必填提示很重要。除了质量问题外，其他所有原因都需要填写描述文字，不然就无法提交。基于这一点，我认为给予必填提示*号是很重要的，淘宝的退货页面也会有必填提示。2）选项之间可能有交叉或者重复，分类不明。比如七天无理由一定要写理由；大小/颜色/型号不合适没写明需要寄回附件赠品；其他问题务必上传有效凭证，但在提交时不约束这个条件。这些问题其实是产品层面要解决的问题。第一个问题好解决，增加必填条件约束就可以。第二个问题相对麻烦一点，需要对售后原因重新进行分析和归类，重新写规则。由于第二个问题对解决本次问题的价值不大，不用花心思在这上面。问题 2：误点为什么横线上更像是可以输入文字呢？跟字号颜色有没有关系？怎么体现申请原因和描述问题的从属关系呢？注释的内容可以直接放在描述文字输入框内吗？怎么结合？页面的框架存在问题吗？卡片和分割线的规范是什么？这种左右选项结构的组件形式是影响因素吗？分析之后发现：1）页面的框架不规范，各卡片之间的距离没有一致，层级也有问题。一般来说，出现卡片距离不一致有几种情况：设计师特意设计；开发实现页面的代码问题。但从这个页面上来说不太需要设计不一样的卡片间距。如果项目时间允许，在设计走查的时候发现问题一定要提出让开发解决。2）文字的颜色让人分不清主次从属。这一点在下面有更详细的分析，先不在这讨论。2. 收拢归因经过对页面的观察和分析，我们可以把问题聚焦在以下几个点上。3. 竞品分析大法找到原因之后，比较有效快捷的方法就是进行竞品分析，看看别人怎么做。根据上面聚焦到的四个问题点，我们带着目的去做竞品分析。万字干货！4 大模块帮你完整掌握竞品分析互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。阅读文章 > 观察淘宝和京东，我们可以发现：1）淘宝有必填提示，京东没有；2）淘宝的输入框比背景色浅，京东的输入框和背景色一致；3）淘宝的描述作为补充项另起一个模块，京东的描述和申请原因在同一模块。最后一点关于字体的，分析项比较多：通过上图，我们可以发现，淘宝的颜色层级有 3 级，而京东的颜色层级有 6 级。将两个界面中的组件元素用色块来表示，淘宝有明确的视觉引导，而京东由于标题与注释颜色比较接近、标题与选项对比相差太大、模块缺乏统一性，造成了主次不清晰的问题。我们再次看看京东的界面。从视觉体现上来说，选项使用了最深的黑色，确实能够吸引用户的目光，让用户知道哪里要选，但却弱化了标题和补充项的视觉。在退货退款页面，用户是带着目的去操作的，他们需要完整走完流程，完成申请，因此需要填什么类型的信息、怎么顺利完成流程就很重要。就像你到银行柜台办理转账的时候，你会希望银行能够按顺序告诉你每一步要做什么吧：取号、去单据区填单、到柜台办理。如果你一进去保安叫你准备好身份证、转账的相关信息，到了柜台发现还要填单，是不是体验感很差呢？解决问题：低成本有效解决经过一轮竞品分析后，我们得出了相应的解决方案：1）统一页面结构卡片间距保持一致；输入框颜色略浅于背景色。2）文字视觉关系调整文字颜色精简到 3 种；标题颜色与选项颜色一致，用字体粗细区分；申请原因的注释与输入框提示语结合。3）准确引导操作给予必填提示。这是调整前后的对比图：从整体的视觉上来看，设计规范是与原本几乎保持一致的，更多的是细节的调整。但是我们的目的不是把界面做得多好看，而是低成本有效地解决问题，也就是要综合考虑时间成本和开发成本。文末，想说说我看到的一些现状。遇到问题的时候，有的设计师会无意识改掉原型字段、增删功能、改变运营方案…如果不改，他们就觉得自己做不了或者做不好设计稿。以前我也会有同样的问题，原因有可能是不够理解产品结构、思维受限、没有考虑时间成本和开发成本…现在除非逻辑有误、状态有缺失，我才会跟产品商量原型的问题。一般都尽量从设计层面解决问题。网上很多改版的作品，会从产品层面、运营层面去分析，这点是挺好的，多思考才有多种方法。但是不代表平时做设计的时候我们要改掉产品和运营的内容（除非有特殊情况），这些需要和相关的同事商量评估。有时候能用最低成本从设计层面解决问题，也是一种能力。以电商为例，帮你掌握超全面的产品分析流程曾经有段时间对竞品分析很困惑，市面上大部分的文章，多数是比较几个产品的功能、交互，总觉得少点什么。阅读文章 > 欢迎关注作者微信公众号：「牙线y2x」本篇来源：优设网原文地址：https://www.uisdc.com/adjust-font-size
内容 卡片 页面 微交互系列意在分析交互动效中更加细节的思考，探索微小设计中的更大可能性。本期主题是研究双列瀑布流的卡片内容浏览体验。我们关注到不同的双列瀑布流中，从卡片内容点击后到过渡为一个完整页面的动画在不同的 APP 中设计上有一些微妙的区别。而这些微妙的区别带来了不同的浏览体验。于是我尝试把不同的过渡动画进行了逐帧的分析，观察其中的细节差异，以及探寻背后的设计思考。方式一：滑入滑出滑入滑出是在交互中比较常用也是比较普通的形式，典型代表如淘宝的推荐内容，以及 B 站的视频内容等等：这类交互虽然比较常用，使用起来也并不会有太大的问题，不过既然我们今天抱着一种钻研的态度来看，那我们就要找到使用滑入滑出动画带来的问题 – 增加了用户的「反应时间」。什么是「反应时间」？用户完成点击后，到新页面进入的这段时间，是我们常规理解中动画的「过渡时间」。受到网速的影响，可能还会产生系统的「响应时间」及新内容的「加载时间」，这里我们抛开这些，假设响应和网速都处于最佳状况去做后续的探讨。那么在双列卡片内，用户被图片内容吸引，滑入新页面后，原来关注的图片大小和位置均发生了变化，用户的视觉焦点要重新在新页面寻找，然后再基于这个焦点开始浏览其他信息，这个过程称之为「反应时间」。举一个更便于理解的例子，这里的「反应时间」其实就是指你在玩打地鼠的时候，从地鼠出来到反应它在哪个洞的时间。而这样的时间，据研究通常在 200ms 左右（刺激源为单一刺激源，具体引用见文末参考）。这个数字代表了什么呢：当我们在打游戏的时候，延迟超过 100ms，就会有卡顿的感觉。所以滑入滑出动画所带来的近 200ms 的反应时间，在无形中影响到了用户在浏览页面时的体验感。方式二：容器变换容器变换是谷歌在 Material Design 的 Motion 章节中的一种动画定义。对比滑入滑出，容器变换能更好的引导用户的视线，在过渡的同时完成了用户的视线引导，大大缩减了用户的反应时间，提升体验的流畅感。对比上面的例子，就好像你在玩打地鼠的时候，地鼠的半个头已经冒出了洞口。在我们常用的产品中，诸如 Pinterst、小红书、大众点评的推荐内容都用了这种效果：良好的视线引导让过渡和反应同时发生那么如何做一个好的容器变换呢？Material Design 中把此动画打开的过程分为了 4 个部分：原始卡片淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。动画为 0.25 倍速播放但仔细追究，这个过程其实可以分为 5 个部分：原页面出现蒙层；原始卡片放大并淡入消失；新内容从卡片变为详情页面的容器大小变化；新内容从卡片变为详情页面后的位置调整的屏幕等宽，并置于屏幕顶部；新元素淡入出现。蒙层让原来卡片外的内容有了退出舞台的效果，过渡更加自然。关于这个动画，实际开发中可能会遇到一个问题，Material Design 中的设定非常理想化：所有内容都在本地已经被拉去。实际情况是由于网络条件的限制，详情页内更多的内容并不能实时被展现出来，为了让内容能更快展现，过渡更加顺滑，小红书的数据加载做了一些的预处理：每次加载拉取 10 条内容的信息；拉取的信息包括第一张图，标题，和内容；如果是视频，会拉取一定时间长度作为缓存，即可保证点开即播放；文字内容拉取一定长度，保证一屏内可完整阅读。小红书的预加载内容，图为弱网下的测试效果而对比双列瀑布流设计的鼻祖 Pinterest，在内容的预加载上则更加保守，只加载了标题和图片以及很少的描述内容：动画为 0.25 倍速播放总结来说就是为了让过渡更加顺畅，技术上尽可能的将很多内容提前读取到本地，从而让新内容能够在过渡动画的时候就可以展现出来。所以，要想做好一个好的容器变换，除了设计上做好动画的过渡设计，技术上还要考虑好信息的加载。前面讲的是容器变换动画打开的部分，接下来我们说说关闭动画的设计。同样对比滑入滑出，容器变换的关闭通过将页面缩放为卡片，很好的帮用户在返回原页面的时候，引导视线的定位，帮助用户找到之前浏览的断点，继续浏览原来没看完的内容。Material Design 中把此动画关闭的过程分为了 4 个部分：原内容淡出消失；页面变为卡片的大小变化；页面变为卡片的位置变化；原页面中的 UI 元素淡出消失。动画为 0.25 倍速播放而在小红书中，省略了第 4 步，直接从页面缩放回卡片：并且随着右滑的关闭首先还会先进行一部分的缩放效果来保证过渡更加顺滑：而在关闭过程中做的最细致的也是 Pinterest，在原来 Material Design 4 步的基础上，关闭过程中还做了两个优化：对返回后的页面还做了一个从大缩放到小的处理，和原来页面缩放的卡片动画进行了一个大小的呼应；让原页面在滑动返回的过程中就从页面缩放为图片，和整体页面的缩放融合的更加流畅；通过慢动作，可以清楚看到后面页面的元素被整体放大缩小，同时卡片变为图片其次，如果卡片是从中间或者屏幕偏下的位置被点击，在返回后卡片会贴到屏幕顶部，让下面更多的内容被呈现出来，持续吸引用户点击：右下角的内容点开返回后，到了屏幕上方总结从流畅度上来讲，一定是更加建议在双列瀑布流中使用容器变换的动画过渡。同时在设计过程中，注意过渡的细节和数据的处理，保证内容更加流畅。一个小小的内容过渡，也可以做很多精细的设计，从而提升用户的浏览体验。引用：Material Design – Motion：https://material.io/design/motion/the-motion-system.html#container-transform科学网：人机交互的控制及失误：https://wap.sciencenet.cn/blog-40841-1227701.html?mobile=1研究Material Design交互动态系统后，总结了这6个知识点！从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。阅读文章 > 欢迎关注作者微信公众号：「Minus Lab减法实验室」本篇来源：优设网原文地址：https://www.uisdc.com/masonry-layouts-card
页面 项目 文档 交互设计文档，也叫 DRD，是交互设计师将抽象的产品需求，转化为具体的界面方案、展示页面细节的说明文档。一个好的 DRD 不仅能帮助团队了解需求背景、设计方案等，还能极大提升交互或产品经理的专业性。所以老和这次为各位提供一个「超强交互设计文档」参考，几乎涵盖了整个需求/项目过程，帮助你在面试或者工作输出时有一个好帮手。大致目录如下：文档说明1. 封面大概绘制一下文档简介，好让同事打开后 知道是 xxx 项目的交互文档。2. 图例说明让浏览者对文档的介绍模式/细节 有一个大概的总览，特别是新手接入时，能知道你列这些图例是什么意思。包括：页面跳转图例、标签图例、流程图图例、操作手势图例等等3. 更新日志记录每次修改的页面和地址，并做好页面链接。并建议有最新修改的地方打上 “新”的标志，方便同事感知是哪个页面。项目说明1. 项目简介大致写下项目背景，我们为什么要进行此次设计。以及简单说下项目范围：要实现哪些功能或优化点，甚至是下一版本的规划与发展。2. 项目进度加分项：自己记录或找产品/项目经理了解当前的项目进度。在工时计算、人力安排等给予更直观的完成度和进展概览。如某一周里进行了哪些事项，如果有重点会议内容也可同步上去。3. 评审记录这个也是加分项：可记录一下每次评审的进程与重点内容，再附上重点参会人员，进一步提升的项目的了解和熟悉程度。包括：产品/设计 组内评审、多方参与等情况需求解析过程1. 用户调研若有涉及到相关数据、结论可以展示出来（调研/竞品/线上等），以提供更强有力的数据证明。2. 需求分析基于项目、用户、设计这 3 个维度梳理出详情分析过程。A. 项目项目目的：为某些人提供某种产品或服务，从而获取某种价值。项目目标：预期可衡量价值的指标，多为产品数据的反馈，如转化率。B. 用户用户类型：包括用户类型、基础信息、特征信息。用户痛点：包括行为诉求点、操作动机、阻碍点。用户场景：包括场景类型、场景描述。C. 设计设计目标：如统一操作认知、缩短交互流程等方案概括。设计方案：如可复用平台组件、或运用 xx 达到 xx 效果。如果有涉及到其他方面的条件或限制，如时间/人力资源、业务限制、技术限制等，也可附加说明出来。页面交互方案1. 任务流程图基于需求分析后发设计方案，梳理其中所涉及到的流程节点。特别是关联不同用户角色、场景下的梳理。2. 页面流程图待页面设计完成，可根据需要/团队习惯，决定是否输出一份整体页面的流程预览缩略图（ 只针对核心/重点流程），以便整体感知整个页面流转走向。3. 信息架构图梳理设计方案下所涉及到功能模块、层级，有利于理解不同功能模块之间的关联性。4. 交互原型这个好理解，基于任务流程、信息架构下设计相关页面方案，注意区分层级即可。全局通用说明这一 part 主要展示整个交互原型中所涉及到共性内容 or 补充说明，以便有一个整个认知或方便调取。如：用户权限说明，展示不同用户角色下的功能时间/数据格式说明，整理整个方案中所设计到的字段格式复用页面汇总，包括页面、组件等常用组件汇总：如一些按钮/列表/导航栏等控件的整合其他特殊说明，如 Android 上的区别点需要强调一下的。飞机稿，集中存放被 pass 的方案，以便后续可回溯、再次调用。好了，以上就是交互文档的一些内容点，不一定全部都要嵌用，根据自己实际需要灵活参考合适的内容即可。一个没有需求文档的设计，三天内如何完成？前言最近，有一位小伙伴问我，假如客户就带了一张嘴巴来和你沟通需求，你做不做。阅读文章 > 欢迎关注作者的微信公众号：「和出此严」本篇来源：优设网原文地址：https://www.uisdc.com/interaction-design-document
干货 合集 页面 大家好，3月的第1波实用设计干货合集来了！这一波干货里当中，一如既往地有免费的图标和免费的字体，不过这回有一些非常有意思的新东西，比如打通 Github 和 Figma 储存库的服务，比如制作漂亮的代码展示效果的工具，还有随机生成网页 UI 组件的制作工具，下面可以具体看看：1、400+高素质手绘涂鸦图标https://khushmeen.com/icons.html这是一套素质超高的优质图标合集，总计超过400+，这些图标涵盖来 15 个常见的类别，风格带有强烈的涂鸦质感，非常可爱，它完全免费可商用，无需声明。另外，这套图标素材包含有 svg、png 和 figma 的格式，应该足以满足绝大多数的设计需求。2、将 Figma 和 Github 储存库连通的服务https://specifyapp.com/这是一个将设计师和开发者的日常使用服务打通的优质服务，设计师习惯使用 Figma ，开发者习惯使用 Github ，将两者的储存库合并，有机地整合到一起，将两个分开的存储体系合为一体，方便管理。3、高效的用户研究平台 Notablyhttps://www.notably.ai/对于团队中的用户研究员和产品而言， Notably 应该是一个不错的工具，它将原始的研究笔记、分享见解、研究报告都整合到了一起，方便进行审视回顾，也便于团队内的其他成员进行探讨和研究。4、Apple 各款硬件设备设计参数https://www.screensizes.app/这个名为 Screen Sizes 的网站清晰完整的整合了苹果旗下包括 iPhone、 iPad 、Apple Watch、Apple TV 在内的各种硬件的设计所需的参数，不仅仅包含屏幕分辨率，还涵盖了对比度、缩放比例、色彩范畴和色调，以及UI 界面中顶部状态栏的尺寸差异、桌面小组件的尺寸等等大量常用的参数。5、制作视觉效果漂亮的代码片段https://snappify.io/有时候需要在网页或者产品页面当中代码片段，但是单纯的把代码列出来通常不够好看，这个时候 Snappify 这个服务的功能就体现出来了，它是一个设计工具，能够给代码嵌套上漂亮的界面，方便你将它展示给别人，也适合作为嵌入到特定的页面中。6、随机生成可用网页的服务 Shufflehttps://shuffle.dev/setup严格意义上来说，Shuffle 是一个网页设计和生成服务，它能根据你的需求和功能模块，「随机」地生成多种可用的网页布局，你只需要根据自己的审美和需求，在它的编辑器当中拖拽你觉得不错的界面模块就能快速搭建网站界面。7、300+ SaaS 定价页面设计灵感https://draftss.com/best-saas-pricing-examples（搭梯子访问）很多服务类网站都有定价页面，但是定价页面的设计还是有超多讲究的，这个网站提供了 341 个设计足够优秀的定价页面作为你的参考，可以说是非常有价值了。另外，关于定价面的设计，你还可以参考下面这篇文章：用户转化率低？看看这21个高转化率的定价页面的设计秘诀编者按：定价页面中，具体的设计细节其实对于用户购买和销售的转化有着直接的影响，怎样设计才会更有有效？阅读文章 > 8、免费牛皮纸袋样机这是一套规整优雅的牛皮纸袋样机，即使是设计新手也可以很轻松地将品牌 LOGO 和内容替换了，拿来展示之用。这个牛皮纸袋本身的造型气质就足够优雅了，和多数品牌都可以无缝地兼容起来。样机文件可以用 PS 打开，仅限个人使用，在文章开头和结尾的百度云链接中可以获取。9、超级可爱的兔子主题字体 Little Bunny这毫无疑问是一款展示性字体，带着兔子耳朵的字符非常之可爱，用作正文很明显不合适，但是在标题里面用就非常不错了。这款字体仅限个人使用，在文章开头和结尾的百度云链接中可以获取。上月干货：第一波！2022年2月精选实用设计干货合集大家开工大吉！阅读文章 > 第二波！2022年2月精选实用设计干货合集大家好，2月的第2波实用设计干货合集来了！阅读文章 > 第三波！2022年2月精选实用设计干货合集大家好，2月的第3波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 3月干货第一波45mme9i 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-3-design-resources-vol1
网格 布局 页面 网格的历史说到网格的应用，我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则，将比例标准定为人的拳头，一个站立的人物从地面到头顶测量为 18 个拳头。公元 1040 年，首次在中国出现活字印刷，主要采用的是泥活字。在西方，金属活字印刷术在 1450 年左右出现，而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。到了 1917 年，网格在荷兰风格派运动中最为明显，由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。1919 年，德国的包豪斯学校成立，他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋，它的棋子都是正方形和长方形等简单的几何形体，可以紧密地组合在一起，以便紧凑地存放。1950 年代，一种崭新的平面设计风格终于在瑞士形成。这种风格的设计，力图通过简单的网络结构和近乎标准化的排版方式，达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。随着第二次世界大战的结束，一种新的消费主义出现了。经济快速发展，广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家，他以企业品牌标志设计及商业广告设计而闻名，网格在这种新的广告形式中发挥了重要作用。今天我们要聊的是关于网页设计的网格系统。说起来很简单，但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪？每个元素之间的间距是多少？这些都离不开页面布局。作为网页设计的基础，页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前，我们需要先普及一些概念。页面布局页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列，可以建立元素间的关系，从而更好地引导用户体验。作为网页设计的关键组成部分，布局决定了页面哪些元素最受关注，以及页面的视觉整体平衡。总之，一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上，然后按照重要性顺序阅读余下部分。网格的作用及概念要实现良好的页面布局，最好的办法就是应用网格系统。网格是设计的骨架，可以帮助我们对齐，有序组织页面内容。通过正确使用网格，我们不会随意地把元素放到页面里，而是明确地知道将这些元素放到哪些合理的位置上，有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计，通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。网格由几个部分组成，分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。接下来通过几个图例来详细解释下。列(Column)是跨越内容区域的垂直部分。在网页设计中列越多，网格就越灵活。列的宽度由设计师自己来决定，传统做法是在 PC 端网页上使用 12 个，Pad 端使用 8 个，移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备，可以通过更宽的槽去拉开页面的间距，使页面信息展示的更加舒展。边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕，因为它们会在内容的周边创建更多的空白。介绍了以上 3 个概念，我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统，使用 8 的增量来调整页面元素的大小和间距。也就是说，页面中的高度或宽度、边距或填充都是 8 的倍数。8pt 网格介绍有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板，但我们的显示设备却非常大？比如，我们用 375×812 的尺寸来进行设计 iphone X，但其实 iphone X 的实际尺寸是 1125×2436，是我们设计尺寸的 3 倍。因为设计尺寸会以 2 倍或 3 倍的像素进行渲染，比如 iphoneX 就是以 3 倍尺寸进行渲染，iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计，以适配到不同设备的不同尺寸。因此，1pt 可以分别转换为 @1x（1 倍尺寸）、@2x（2 倍）和 @3x（3 倍）大小的 1px、4px 或 9px。所以我们设计一个 16pt 的图标，导出@2x 或者@3x 的尺寸应该是 32px、48px为什么一定要用 8pt？使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下，如果用奇数来定义元素尺寸或间距，就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8，也是因为大部分的屏幕尺寸是可以被 8 整除的，这样就很容易适配。此外在 PC 端没有使用 2 或 4，是因为其颗粒度太小，不便于设计师进行操作；用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。文本如何设置？基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸，但它们的行高要尽量是 8 的倍数。在网页端设计时，很少会遇到几倍尺寸的输出，所以通常情况下都以像素为单位，这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。例如：small = 8pxmedium = 16pxlarge = 24pxx-large = 32px……页面布局类型普及了上述概念后，我们一起进一步了解下页面的布局，页面布局大体分为几类：固定布局、流动布局、自适应布局、响应式布局。固定布局，顾名思义就是页面的整体宽度是固定的，不会随着浏览器的拉伸变化而变化。这种页面相对死板单一，但对于设计师来讲相对容易设计，也易于开发。流动布局，它会随着浏览器窗口的大小而变化，但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少，流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽，内容可能会被拉伸得太长，单个文字段落可能会在单行上贯穿页面。相反，小屏幕上的多列布局也可能对内容来说过于拥挤。自适应布局可以理解为是固定布局的一个升级版，举个例子，当页面内容为 960px，此时页面无论再往多宽拉伸，页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时，比如 960px 以内，页面就会缩小到它的第二个宽度，假设是 640，以此类推。这个临界值我们称之为断点。响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少，响应式布局将像流动布局一样进行变化。同时，如果浏览器宽度超出了某个临界点，也就是断点，那么页面布局也会发生改变。通常，响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的，这样会给用户带来更好的浏览体验。最后用图例展示下如何利用网格系统在网页设计上进行页面布局。在 figma 上的设置如图：我们可以设置好列数，定义好列宽和槽宽来决定页面的实际宽度。在网页设计上使用网格系统浅层价值是为了让页面布局有章可循，使页面看起来更加统一，深层价值其实是为了做自适应布局，让页面在不同宽度下适配到不同的设备上。这里我也创建了 4 种不同尺寸的网页端网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。https://www.figma.com/community/file/1076073453929437640/8pt-web-grid最后推荐一款 sketch 智能布局网格的插件，喜欢的同学附件进行下载。切记，在实际项目中，尽可能灵活的使用网格，不必拘泥于 8pt 的单位，但尽量保持在偶数范围。参考文献：The Comprehensive 8pt Grid Guide：https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179UI/UX Design: Setting Up Grids：https://uxplanet.org/ui-ux-design-setting-up-grids-d8b3fd9271fbmaterial design：https://material.io/designHistory of grids: from the printing press to modern web design：https://webflow.com/blog/history-of-gridsHistory of the design grid：https://99designs.hk/blog/tips/history-of-the-grid-part-2/网格系统真是太好用了，6个方面帮你早点学会！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「iU梦工厂」 文件名 如何下载使用 文件大小 提取码 下载来源 栅格 表格插件神器1.05MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-grid-system
页面 用户 产品 编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从电商产品页的用户体验和交互的角度入手，详细梳理了分页的设计要点，不同的方案的使用场景和优劣对比，结合实际的设计案例进行了演示和解读：许多电子商务网站正在摆脱传统的分页控件，转而选择交互成本更低的设计模式，比如无限滚动。那么是否应该采用这些模式吗？通常，这取决于页面的产品数量。传统的分页模式会将项目列表拆分为多个页面，每个页面包含特定数量的条目。要查看更多选项，用户必须通过翻页切换到下一页——通常通过单击或点击 屏幕顶部或底部的「下一页」 按钮。每个页面都有编号，用户可以通过点击相应的按钮来移动到特定编号的页面。在亚马逊列表页面的底部，有一排按钮，一个指向上一页的左向箭头、一系列数字按钮，然后是指向下一页的右向箭头。亚马逊的分页设计采用了传统的分页控件（在蓝绿色框中突出显示），这种控件对于这个平台丰富的产品而言，非常具有实用性。像亚马逊这样的大型零售平台确实应该坚持传统的分页控制设计，因为当购物者探索他们庞大的产品集时，这种机制提供了精确的控制。对于产品较少或加载性能良好的网站，可能能够简单地一次加载页面上的所有产品。但是，如果您的网站有产品数量较少的分支页面，你可以考虑使用「无限滚动」或使用「显示更多」 按钮作为传统分页控件的替代方案。无限滚动，动态加载有些电子商务网站会提供一个产品列表页面，当用户向下滚动页面时，页面会不断加载更多项目。 无限滚动 或 延迟加载（在用户滚动到页面底部时加载更多项目）可以很好地适用于具有以下特性的电商网站：产品数量相对较少（通常产品数量少于 40 个）有高质量的 过滤器 可以帮助用户缩小结果范围有明确 告知用户要现实的条目数量（比如 42 件物品）Christian Louboutin 网站上的一位客户注意到，每次她滚动到页面底部时，都会加载更多产品——也就是采用了无限加载的页面加载方式。她说她不介意，因为加载时间非常快。「只要它加载，就可以了。如果我滑动到底部，结果需要再花 30 秒加载下面的内容，我就会失去兴趣。不过这个节奏还好。而且我是一个非常果断的购物者。我只是盯着看东西，看看有什么吸引我的眼球。」虽然此解决方案可以很好地适用于包含有限数量产品的网站列表页，但在下面两个情况下（在以下部分中详细讨论），应避免使用无限滚动的技术：用户有需要访问网站页脚导航中的重要信息。当页面包含大量产品时，用户可能会迷失方向，并且不知道他们在产品列表中的位置。访问页脚导航因为一旦用户向下滚动到页面底部，新项目通常会自动添加，因此可能在有限的滚动下，到达页脚区域。使用无限滚动的网站经常让用户感到极度沮丧，因为每次他们试图导航到页脚时，页脚都会不断地被自动加载的新条目推离到更远的地方。当用户向下滚动 Louboutin 网站上的列表页面时，会自动加载更多产品，这会将页脚推到页面下方。这个就是不应该对有大量产品的页面使用无限加载的部分原因——当用户想要抵达页面底部的时候，不应该为此滚动 15 分钟，尤其是当页脚是为了访问诸如退款退货或者别的功能的时候。产品数量如果在单个页面上查看一个类别中的所有条目是不合理的，那么使用无限滚动的控件也是不合理的。Tory Burch 的网站没有提供传统的分页控件，而是在用户滚动时，自动让其他的产品加载到产品列表页面的下面。大多数情况下，产品加载速度足够快，以至于用户看不到加载指示器，还得等待产品加载完成。由于网站的产品数量有限，加载速度快，所以效果很好。一位在 Tory Burch 网站上购物的用户，赞赏产品列表总能完整显示在一个页面上，因此她可以简单地使用滚动，就浏览完所有可用的项目。「我喜欢可以滚动浏览所有内容的布局。有些网站会得一页一页地翻页。在这里，我可以非常轻松浏览完网站的所有商品。」Tory Burch 网站在一个产品列表页面上展示了一个类别中的所有产品。每个类别包含足够少的条目（此处为 69），以至于单个页面就足以承载。在实现无限滚动时，显示产品总数很重要 。Tory Burch 网站在产品列表顶部标识了产品总数，靠近页面左侧有过滤筛选的功能。不过，这个筛选结果的数字标识并不是很明显。Tory Burch 网站上的列表页左上角有过滤器和条目总数 ，只是这些信息很难发现。Ann Taylor 的网站采取了一种更引人注目的方法来显示产品总数。这个数字在用户滚动页面时，保持固定在页面上，并在长页面下方显示用户的当前位置——当用户进一步向下滚动页面时，深黑色边框的大小会延伸以标识进度。该指标帮助用户跟踪他们当前的位置，帮助他们了解已经查看了多少项目，以及还有多少项目有待查看。Ann Taylor 在产品列表右侧的页面上显示了可浏览的产品总数，并且借助它的黑色边框来作为进度指示器。无限滚动页面，通常会破坏标准浏览器右边的滚动进度条，因此用户不能依靠它来确定他们在页面上的位置。随着新条目被添加到列表的底部，页面被拉长，又会改变标准滚动指示器的位置。曾经位于中间的页面的部分，很快就会变成现在更长页面的前八分之一。最好增加一个自定义进度指示器，来高速用户当前的位置。「查看更多」按钮有些电商网站没有采用传统的分页模式或无限滚动，而是 在其列表页面的底部放置「查看更多」 按钮。例如，时尚服装零售商 Aritzia 的网站就使用了这种模式。Aritzia 的网站在其结果列表的末尾提供了一个「查看更多」的按钮（以蓝绿色框突出显示）。除了 「查看更多」之外，一些网站还使用了类似的标签，例如：展示更多加载更多查看更多产品与传统的分页相比，这种方法合乎逻辑，因为绝大多数用户无论如何都会线性地浏览产品列表。此外，与页码式的分页按钮相比，尺寸更大的 「查看更多」 按钮更容易点击。这种方法与无限滚动的本质区别在于，用户必须通过点击交互才能加载下一组产品，而不是让它们自动加载。因此，与无限滚动相比，「查看更多」 按钮允许用户直接查看站点页脚。「查看更多」按钮可能会更加流行，尤其是作为表率的谷歌开始在其移动端结果页面上使用它们来代替分页的机制。我们经常警示设计师 不要一味抄袭大公司的设计，但谷歌是搜索的结果页的一个特殊例外。纯粹是因为它们的使用非常广泛，它对于塑造用户的习惯和预期有着极大的影响。谷歌在其移动搜索结果页面上使用了 「查看更多」 按钮而不是分页。允许用户自己选择是否加载更多商品，对于移动端的购物者来说是特别好的，他们可能在网络流量有限制的情况下浏览页面，因此不一定想持续加载额外的产品内容。此外，如果用户未连接到 WiFi，那么在移动设备上的加载速度可能会比较慢。Lowes 的移动端页面向用户展示了一个「加载更多」的按钮，以查看其产品列表页面上的其他项目。这种设计帮助用户查看超出这个页面的内容，这种动态加载方式不仅兼顾到页面导航的需求，而且提升了浏览的效率，减少了信息传输的数据浪费。不过，这个网站未能显示这一类别中商品的总数 ，也没有说明已经查看了多少产品，也没有说明还要加载多少产品。没有这些信息，一些用户可能会犹豫是否要加载额外的项目，因为他们不知道何时会翻到达产品列表的末尾。Lowes 移动端网站的早期版本没有显示列表页面上可用项目的总数，这使用户很难确定他们需要加载多少内容才会查看所有选项。更新后的版本之一，是通过在产品列表页面（左）的顶部添加搜索结果数量。但是，它没有通知用户屏幕底部还有多少项目需要加载（右）。如果你的网站将采用 「查看更多」模式，请务必告知用户：列表中的项目总数已加载多少项目还有多少项目要加载Lululemon 的页面设计比 Home Depot 的效果更好，因为它提供了已显示的产品数量以及产品总数。Lululemon 在其移动端页面上使用了查看更多产品按钮，它还告诉用户他们目前正在查看的产品总数（查看 40 of 333 ）。当用户到达列表页面的末尾并且没有更多要加载的产品时，就只显示产品总数，就像 Lululemon 所做的那样，去掉「加载更多」的按钮。当无法加载更多产品时，Lululemon 的「查看更多」按钮消失了。标识用户的所在位置无论您选择「无限滚动」还是「查看更多」的设计模式， 请确保您的列表页面支持 Pogo Sticking 功能 —— 这个通常指的是用户在搜索页面中打开一个结果之后，感觉不满意又返回搜索结果页面，再查看其他的一种行为。这种行为和 SEO 、网站排名、内容推荐有非常紧密的关系。一些网站不支持这种操作，当用户在点击了列表中某个条目之后返回之前的列表页面时，他们必须向上或向下滚动才能重新找到他们当初所在的页面位置。传统分页模式可能偶尔会出现此问题，但在使用「无限滚动」或 「显示更多」模式的网站，这种问题会特别常见，且令人痛苦。尽管使用了「无限滚动」模式，但 Christian Louboutin 的移动端网站在点击了「后退」按钮后，用户能够回到最初在列表页面中所处的位置。当用户使用移动端设备浏览信息时，这一点尤其重要，因为在移动设备上打开新标签比在大屏幕上更麻烦。结语如果你的产品规模相对较小，「无限滚动」和「查看更多」 按钮可能会帮助您的用户更轻松地探索你的产品。请记住通过可用性测试来发现设计中的潜在问题——比如无法访问页脚或「 显示更多」 按钮难以被注意到。延伸阅读：尼尔森团队出品！让用户沉迷产品的3个心理要素编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。阅读文章 > 复杂网站的导航模式要怎么设计才合理舒适？我总结了7个方面！编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路：具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表阅读文章 > 从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alternatives-pagination-listing-pages
页面 类别 产品 编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路：具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表，但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤，让用户不用一下子面对海量的分类信息。Eddie Bauer 在其全局导航中， WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容，以及促销子类别（例如SHOP FLANNEL 和 SHOP FLEECE ）的链接。类别页面通常提供以下组合：类别的描述、解释及其包含的内容带有描述和代表性图像的子类别菜单推销该类别中的特色产品并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火，因为用户需要通过额外的步骤才能查看特定类别的产品。许多网站完全省略了类别页面，而是将用户直接引导到产品列表页面，在那里他们可以借助过滤筛选的方式来浏览产品。Bonobos 网站上的 Pants & Jeans 链接不是类别页面，而是将用户直接带到产品的列表页面。这种方法通常效果很好，因为它尽快向客户展示了他们可选的选择。虽然本文偏向于电商网站中的类别页面的探讨，但实际上这些页面也用于其他类型的网站，特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况，但最好根据领域对你的设计进行测试，以防你的用户需求与购物型用户的需求不同。何时使用类别页面如果您的电商网站所涉及的产品非常复杂，以至于您的许多客户需要经过学习之后才会使用，才能正确地过滤和比较产品，那么类别页面就是一个好主意了 。此外，具有 大类别和大量子类别的网站，有时会提供某种类型的独立类别页面，以帮助用户找到有意义的起点。不过，你可以决定让特定的产品具有类别页面，而其他的则不具有独立的类别页面。例如，Lululemon 主打的健身服装产品（大多不需要分类页面），同时也销售一种名为 MIRROR 的昂贵的家庭健身产品，后者需要更详细的解释，因此有自己的分类页面。Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面，但并未为其所有产品类别使用类别页面。阐释复杂产品类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项，他们可能还没有准备好单击单个产品。与随机点击不同的产品相比，类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。例如，智能手表通常会有不同的功能和价格范围，著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面，列出了不同类型的智能手表，并提供「立即购买」、「了解更多」 以及「比较」的选项。Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异子类别的特征购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而，一个拥有大量产品和内容，并组织成许多子类别的网站，仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品，此外它还可以为国外的购物者提供帮助。REI 销售用于各种户外活动的许多产品，从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后，页面跳转到一个包含所有露营产品的列表面，用户可能会不知所措，而且无趣。相反，REI 让链接指向到一个传统的类别页面，而不是列表，这个页面包括：子类别 (帐篷, 睡袋 , 远足)该类别中最受欢迎的品牌（Osprey、YETI）与类别相关的季节性信息（寒冷天气徒步旅行）建议（如何选择睡垫、食物储存和处理的技巧）REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。不要强迫客户浏览类别页面如果你的网站确实提供了传统的类别页面，请同样为用户提供了避免进入这些页面的简单方法，并在他们愿意时，也能直接转到产品列表页面。为你的站点的全局导航，提供指向子类别产品的列表页面（比如使用超大导航 Megamenu ），以及指向传统类别页面的链接。可能还需要确保搜索结果始终指向产品选项，而不是将购物者引导到类别页面。在我们的研究中，Zappos 会将某些搜索结果指向到以品牌为中心的类别页面，而不是链接到该品牌的产品。在用户测试的时候，一位参与者看到孩子后很生气，因为搜索她最喜欢的品牌 Sam Edelman 时，她进入了一个具有促销感的传统类别页面，而不是指向她要的产品。对她来说，这感觉像是一个不必要的额外步骤。「当我进入 Sam Edelman 时，我想看到结果。我不希望打开一个品牌的分类页面。」当用户在 Zappos.com 上搜索「sam edelman」时，她很恼火地看到一个没有列出任何单个产品的品牌类别页面。当用户搜索时，他们希望立即看到结果。混合：在产品列表页面上提供类别信息 为了避免传统的类别页面的缺陷，并提供对产品列表的快速访问，许多电商网站现在在主产品列表页面中，结合混用了少量的类别有页面的设计——例如简短的描述性内容，或简短的子类别菜单。在女士紧身裤 产品列表页面上，Lululemon 包含了一些传统会在类别页面上显示的元素：营销内容（蓝绿色框标注的区域）和对不同紧身裤样式的解释，以及指向这些子类别的链接（以黄色框标注的区域）。这种混合呈现方法效果很好，因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它，而不感兴趣的用户可以简单地跳过，直接快速访问实际的产品列表。说明内容一些电商网站在 产品 Banner 旁边加入营销的内容和元素，这些元素传达有用的信息而不会减慢用户的速度，就像传统的类别页面一样。高级珠宝零售商 VRAI 使用混合式设计，在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中，圆形订婚戒指页面中，包含了带有价格的产品列表，以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明，以及更多详细信息。在这个列表页面中，VRAI 包含了促销内容（以蓝绿色框标注）和说明性内容（以黄色框标注）。其中所呈现的图文内容是典型的传统类别页面的特征（没有产品列表）。子导航一些零售类的网站不使用类别页面，而是提供指向产品列表页面上的子类别的导航链接。这些链接（这是最初发明类别页面的原因之一）让用户轻松浏览网站的产品库存。例如，Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别，并提供指向该子类别的链接。这些内容直接显示在产品列表上方，帮助用户了解可用类别项目，并且直接导航到这些类别。Ann Taylor 的网站在 裤子 的列表页面的顶部，加入了不同裤子款式和合身度的说明和图片，以便用户了解其中的差异。结语尽管类别页面可以提供有用的上下文信息，但它们也同样为用户增加了一个额外的跳转步骤，用户必须先浏览它们，才能看到实际的产品。当类别页面上的内容没有帮助时，用户可能会对它们做出负面的反应。因此，仅在真正需要时才使用传统类别页面非常重要，而通常用于复杂产品或有许多子类别的网站，在这种情况下，还得允许用户通过全局导航中的产品子类别链接，来跳过它们。延伸阅读：顶部导航 vs 侧边导航，到底哪种更好用？桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。阅读文章 > 如何设计出体验更好的 UI 底部导航栏？编者按：设计 UI 底部导航栏可以说是绝大多数 UI 项目当中必然会遭遇的设计内容，而这篇来自设计师 Vikalp Kaushik 的文章详细梳理了底部导航栏的最佳实践：导航在 UI 界面当中是相当常见、直接影响用户体验的基础组件。阅读文章 > 尼尔森团队出品！让用户沉迷产品的3个心理要素编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/category-pages
用户 页面 入口 本文是关于签到功能的视觉汇总分析。签到体系分析1. 定义：吸引用户定时访问产品，通过点击某个按钮或访问某个页面表明自己使用了该产品或功能。当用户完成签到，会被给予奖励以强化用户行为，从而提高用户粘性。常见名称为“签到”、“打卡”，或者根据具体场景，命名为“喂养小鸡”、“收取能量”等。2. 目标：用户目标：获得实际利益。实际获益=签到奖励-签到成本，奖励可分为物质奖励和精神奖励两类；产品目标：实现“签到-奖励-连接活动-分享-拉新-强化行为”的正向循环；商业目标：通过签到来增加用户访问，提升产品活跃度，进而提高产品的商业价值（广告投放、服务付费等）。3. 体验核心：给用户提供足够高的价值感知；尽可能降低用户需要付出的时间和操作成本，实现用户利益感知最大化。4. 签到方式：手动签到：用户主动点击具体控件，完成签到操作。是最常见的签到方式。自动签到：用户登录产品，即累计一次签到。是最简易的签到方式，存在感较低。互动签到：用户在若干个连续的步骤引导下，完成签到操作。复杂性高，对应趣味性也要高，否则无法支撑用户的操作成本。5. 签到周期：每日签到：每日完成签到任务，获得奖励。连续签到：确定固定周期（一周、双周、一月等），用户在固定周期内，不可断签，完成签到，获得奖励。累计签到：确定时间段（双周、一月等），用户在该时间段内签到，可以断签，只要累计次数满足要求，即可获得奖励。混合签到：用户以每日签到的形式获得奖励，同时在周期内，奖励有阶梯型提高。6. 签到适用范围：适用于：以内容为驱动的产品类型，如社区、电商、资讯类产品，签到的存在提升了用户打开产品的频率，对于养成用户使用习惯有积极作用。不适用于：以效率、功能为驱动的产品类型，如天气、翻译、笔记类产品。这些产品对应用户的刚性需求，一旦用户没有需求，签到行为和产品属性无法形成关联。此时用户得到的奖励不足以抵消用户的操作成本。7. 涉及到的设计元素：签到入口：通向签到页面的入口，一般有固定的安置位置，贴合用户认知，减少操作成本。签到引导弹窗：可直接在弹窗上完成签到，或者点击弹窗跳转签到页。签到页面签到周期：7 天为一个周期，不允许断签。奖励梯度递增，增加吸引；沉没成本，损失厌恶。更常见，规则简单，目的性强，路径短。日历签到：以日历形式记录签到，允许断签，累计到一定签到数量后，获得额外收益。成就感。签到成功弹窗无需用户点击某一具体按钮，直接进入签到页后直接弹出，降低用户操作成本。需要用户点击签到按钮，跳出弹窗，示意签到成功。签到成功弹窗的意义：给用户正反馈。告知用户当前收益，提示用户未来收益预期。签到设计1. 签到入口签到入口是将用户引导至签到页面的控件，一般有固定的位置。常见的入口位置有以下几种：首页左上角首页导航栏右侧首页频道入口搜索框个人中心页面独立模块签到入口除了位置不同，示意方式也有不同，常见的示意方式分为 5 类：签到图标签到图标+文字红包图标动效IP 情感化需要注意的一点：部分签到入口有两种状态，未签到和已签到。最好可以明确区分两者。2. 签到引导弹窗根据签到的触发方式，自动签到一般使用弹窗的形式承载内容，信息较为简单。手动签到常需要用完整页面承载内容。自动签到弹窗和引导签到弹窗的区别在于：前者在弹窗主动跳出之后，无需操作，即算为当日完成签到，而后者意将用户引导至签到页面，如用户直接关闭弹窗，不计为签到成功。虽然此类弹窗都是主动跳出，前者重点在于引导用户参与活动，而不是签到本身。最常见的签到流程：从签到入口进入签到页面签到（点击按钮）签到反馈（成功弹窗）已签到状态3. 签到页面以上两种方式均可设置不同奖励梯度，进度条式更加着重于“连续”的感觉，而卡片式更加强调第七天的奖励特别丰厚。两者本质相同，卡片式可以更充分展示每天具体的激励内容。月历式签到，显然周期更长。若设定为连续签到，用户需要花费大量时间，此时奖励必须具有强烈吸引力，往往是物质型奖励。通过“采摘”的形式，进行签到。签到奖励为“盒花”，即虚拟货币，可以在商城抵扣现金。除了签到之外，还可以通过做任务等方式获得盒花。此类签到往往趣味性很强。将签到和任务融合到游戏生态中，通过精彩的视觉表现，强化了激励。点击引导用户点击按钮，方可完成签到，点击引导是有必要的。「第一次」进入签到页时，需要提供新手引导，提示点击何处。「固定引导」则出现在每次进入签到页面时，按钮动效或者手势提示，都是不错的方案。3. 成功反馈弹窗当用户点击签到按钮后，产品给出反馈。反馈的形式有以下几种：toast弹窗不清楚什么是 Toast ？看这篇就懂了：本篇来源：优设网原文地址：https://www.uisdc.com/check-in-function-design
自定义 京东 页面 解压密码：BBS.GOUPU.ORG_鸿宇小京东7.7#$tr854jkrt#$^tfj563w4适用范围： 仿小京东源码,B2B2C源码,B2B商城源码,B2C商城源码,多用户商城源码运行环境： PHP、MYsql其他说明：最新鸿宇小京东V7.7商业版，ecshop二次开发，不错的分销多用户商城系统，分享给大家了！最新鸿宇小京东7.7HongYuJD-V7.7-Bate-288（淘宝288买的）二次开发版分销多用户商城系统，微信支付+APP+短信，本次最新小京东二次开发版支持网页生成纯静态，而以往的版本不具备此功能，网页生成静态页面既可以大大降低服务器的负担，也能提高网站的安全系数和用户的浏览速度商家入驻支持个人和企业：最新小京东二次开发版对入驻流程进行了升级，入驻流程简单快捷。在同类产品中他们只实现了一种企业入驻类型，而我们的小京东却实现了两种入驻类型，即：个人入驻和企业入驻。强大的预售功能（独家）：支持商家自定义预售商品的库存；可自由选择预售商品是需要支付定金，还是必须全款支付，两种支付模式任您选择；自定义预售商品的阶梯价格；自定义预售活动的开始、结束时间，自定义尾款支付的开始、结束时间，自定义预售商品的发货时间。充分满足有预售需求的商家。商家版手机端（独家）：商家可以把商城管理移动到手机上，随时随地了解商城的动态，随时随地管理订单（处理发货、退货等）、了解库存、查看佣金等。页面结构逻辑清晰，风格效果清新简洁，浏览感受舒适、流畅，“简约而不简单”的设计风格给您不一样的视觉盛宴。成功对接扫码枪（独家）：最新小京东二次开发版完美对接扫码枪，可帮助买家（批发商）批量扫货购物；还可帮助商家快速入库、出库商品。智能扫码枪，你值得拥有！顶级频道升级：最新小京东二次开发版对顶级频道页面进行了升级，拥有两套小清新模板，可进行自由切换，页面依旧美丽大方、上档次！还可自定义上传二次开发的顶级频道模板，自己的风格自己决定！CMS文章频道：最新小京东二次开发版支持文章频道展示，平台方可自定义文章展示模块。该文章频道页面美观大方，模板丰富，页面排版合理，充分利用了页面空间。同时，文章频道页面为客户创造了及时了解商城动态的平台。其次，文章资讯页最重要的作用是它会让搜索引擎更多的收录您的网页，提高网站访问量！！更加完美的团购活动：最新小京东二次开发版团购页面升级，不仅支持团购商品按照分类筛选而且支持商品根据上架时间、最后更新时间、销量、价格、折扣等进行排序，让客户在最短的时间里找到最中意的商品。强大的搜索功能：最新小京东二次开发版对搜索进行了升级，支持全文索引、支持模糊搜索、分词搜索。实现快速建立索引，提高了查询速度，通过索引很大程度上降低了数据库的负载，通过智能分词更准确的查到结果。更快(查询速度)、更准(查询结果)、更稳(降低负载) 。
在路上
飞翔的企鹅
落霞与孤鹜
张大湿
表哥
