1. 导航是什么？

① 导航的起源与本质

导航，英文是 Navigation，是 Navigate 的名词形式，源于 1530 年代，由词根 Navis 船+agere 驾驶组合而成。指的是借助某些科学仪器，找到从一个岛屿到另一个岛屿的路径。

图1 导航的起源

诞生于中世纪大航海的导航，从诞生之初就跟起点、目标和路径密切相关。随着导航的发展，导航领域从海洋扩展到陆地，航空、太空，以及互联网。

图2 导航领域的类型

今天我们重点要聊的就是移动互联网产品的导航设计，虽然脱离了物理空间，但导航的本质始终是不变的。

图3 导航的本质

导航本质：告诉用户“我”在哪里（起点）？“我”能去到哪里（目标）？“我”该怎么去（路径）？

基于此，导航设计一定要能清晰的体现用户当前所在的位置（一般用选中态表示），并通过其他未选中的导航，来告知用户可以去的目标，再通过最简单的点击或滑动等操作让用户去往目的地。

图4 互联网产品导航示意

2. 移动端导航形式有什么？

我归纳了移动端常见的 10 种导航形式，大家可以根据其优缺点和适用场景按需选用。

图5 移动端常见的10种导航形式

① 底 Tab 导航

底 Tab 导航在 iOS 中叫标签导航，在 Android 中称之为底部导航，我将其称为底 Tab 导航，它是 iOS 中最倡导和常见的导航形式。（现在也全面征服了 Android 系统）

图6 底Tab导航

优点：清晰直观的展示了产品的核心功能，点击切换方便快捷。

缺点：只能容纳 3-5 个，数量有限。

使用场景：产品包含 3~5 个需要高频切换使用的非同类型模块时可用。

② 舵式导航

舵式导航可以看做是底 Tab 导航的一个变异，区别就在于把中间的导航像船舵一样凸显，以此来强调中间的导航功能（一般用于承载发布类功能）。

图7 舵式导航

优点：舵式导航特殊的造型和颜色可以很好的吸引用户注意力，促进功能转化。

缺点：为了让舵居中，导航个数只能为 3 个或 5 个，数量有限制。聚合多个发布类功能时，需要二次选择，操作不够便捷。

使用场景：对于强调 UGC 类的产品或者特别高频的操作可以使用。

③ 顶 Tab 导航

顶 Tab 导航最开始是 Android 推出用以抗衡 iOS 底 Tab 导航的，结果大家已经有感知了（抗衡彻底失败）。但顶 Tab 导航并没有因此而消失，而是重新找到了自己作为次级导航的生态位。

图8 顶Tab导航

优点：可以承载 2~N 个导航，可拓展性强，手势切换比较便捷。

缺点：手势切换有学习成本，顶部点击不方便，看不见的导航内容不容易被发现和使用。

使用场景：作为主导航几乎已被底 Tab 取代，作为次级导航非常常见，特别是有多个并列层级的内容需要展示时。

④ 抽屉导航

如果产品只有一类核心展示的内容，可以使用抽屉导航而不用底 Tab 导航，以最大限度的利用屏幕空间。

图9 抽屉导航

优点：可拓展性强，可以收纳多个不常用的功能，释放屏幕展示空间。

缺点：被隐藏的功能不容易被发现和使用。

使用场景：某些核心功能比较单一的产品，或者跟底 Tab 导航组合使用，收纳不常用的功能。

⑤ 菜单式导航

跟抽屉式导航类似，把一组操作收纳到一个地方，用户可以点击快速选择。

图10 菜单式导航

优点：可拓展性强，可以收纳多个功能，释放屏幕展示空间。

缺点：被隐藏的功能不容易被发现和使用。

使用场景：当页面功能较多，无法全部直接展示时，可以使用下拉菜单统一收纳。

⑥ 宫格式导航

早期比较流行的主导航，现在是比较常用的局部导航。

图11 宫格式导航

优点：信息层级扁平，个数较少时，核心功能一目了然，用户选择成本低。

缺点：个数较多时视觉认知成本、查找成本都很高，进入功能后切换成本也高。

使用场景：平台类产品的核心功能展示，或者普通产品的重要功能/运营入口。

⑦ 列表式导航

对于主要以文本为载体的产品，采用列表式导航非常常见，比如短信、邮件、记事本、设置等。

图12 列表式导航

优点：有足够的文本/图标显示空间，可以显示标题和辅助文字，传递的信息内容相对丰富、直观，而且可以显示多条内容。

缺点：整体页面信息会比较密集，页面布局相对呆板，条目多时查找会比较困难。

使用场景：适用于展示多条以文本为主体的内容。

⑧ 瀑布流导航

对于主要以图片/视频为载体的产品，采用瀑布流导航的非常常见，比如花瓣、点评、淘宝、bilibili 等。

图13 瀑布流导航

优点：能够凸显图片的吸引力，让用户聚焦在图片上，促进内容的转化。同时可以承载无限多的内容，自动加载不翻页，增强用户浏览的沉浸感和效率。

缺点：屏幕空间占用较大，依赖于信息推荐的精准度。

使用场景：适用于展示多条以图片为主体的内容。

⑨ 轮播式导航

当产品/模块提供的信息足够简单扁平，一屏即可显示全部核心信息时，可以采用整屏轮播或区域轮播的导航形式。

图14 轮播式导航

优点：操作简单，信息呈现直观。

缺点：未轮播的信息曝光率和转化率都比较低。

使用场景：简单的小工具类产品可以整屏显示核心信息。运营广告位可以区域轮播展示。

⑩ 沉浸式导航

在活动类、游戏类产品中，常常采用沉浸式导航，增强用户沉浸感。

图15 沉浸式导航

优点：导航与页面融为一体，视觉感受沉浸，页面更有吸引力。

缺点：用户可能注意不到某些是内容的元素，导致该元素的转化率较低。

适用场景：活动类、游戏类的产品中。

3. 导航设计三步曲

① 确认信息结构

导航设计是以信息结构为基础的，所以在进行导航设计之前，我们需要将范围层提供的所有信息进行分析，删减、分类、整理形成特定的信息结构。

图16 从信息到信息结构

以微信的部分信息为例，我们将信息进行分类、整理、命名形成了上述的组织系统，让信息与信息之间的逻辑关系一目了然。

这里大家可以参考行业竞品的信息架构，结合自己对业务关系的理解，辅助以卡片分类的方式，整理出最适合的信息结构。

PS：为了提升导航的易用性，建议的导航广度最好不超过 5，深度不超过 3。这样符合米勒定律，用户的选择压力较小，也不容易迷失在较深的路径中。（当然这只是一个建议，优先要保证的还是信息结构的合理性，不能为了满足上述建议而破坏信息之间本身的逻辑关系，时刻牢记认知成本＞操作成本，不能为了减少操作成本而增加认知成本）

② 选择导航形式

根据信息结构中主导航功能的个数，以及主导航功能之间的优先级关系，再结合各导航的适用场景、个数限制、内容丰富度、功能可见性、操作便捷性等，匹配合适的主导航、次级导航和局部导航形式。

图17 导航总结

从现况来看，多数产品都愿意采用底 Tab 的主导航形式，因为可以曝光多个功能，用户点击操作方便，学习成本低，利于其他功能的转化，后续拓展也比较方便（可以配合抽屉式导航、顶 Tab 导航，菜单式导航和局部导航混合使用）

③ 优化导航路径

信息结构梳理了信息节点之间的逻辑关系，但用户在真正使用产品时，有些子节点的功能/信息，其优先级和频率反而更高，为了让用户能够方便快捷的使用这些子功能，还需要结合用户的使用场景，在合适的场景下添加一些节点和路径，以提升用户操作的流畅性和效率。

图18 组织系统和导航系统的关系

还是以微信的导航设计为例，因为添加好友，扫一扫、收付款功能重要性和使用频率，微信特地在首页增加了一个菜单导航，方便用户能更快捷的触达这些功能。

所以导航设计，不仅要正确的反映信息之间的结构关系，选择合适的导航形式，更重要的是根据用户的目标、认知和习惯来组织导航节点，让用户可以很直观的理解“我”在哪，“我”可以去哪？并通过最便捷的操作到达目的地。

作者：悦姐聊设计



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

01 前言

在选择网页设计尺寸时，我们并非只让产品在部分设备上对访问者保持可访问性以及吸引力，而是希望他们无论使用什么设备都可以更好的进行体验浏览。

在早期的设计中我们可能需要针对不同的分辨率输出不一样的设计稿，但现在大部分网站平台都是响应式，这意味着我们只需要做一个在不同设备上都兼容良好的设计即可。

因此我们可以得出B端Web设计中采用主流的最大宽度并非最佳选择，而是要基于不同设备上的尺寸选择最具合适的那个。

02 主流性原则

由于Web端分辨率太分散，我们只考虑占比最大的前几个，根据百度流量学院里面有关PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。

这三个主流的尺寸在市场中总计占比70.38%，意味着这几个分辨率的市场占有率体量巨大。它的背后说明了16:9的分辨率已经逐渐的形成一定的规模和使用习惯，我们只需要按照当下主流的分辨率进行针对性的设计即可。

设计稿可在1920、1440以及1366这三个尺寸中进行选择。

03 兼容性原则

为了更好的在不同的尺寸中都保持体验的一致性，兼容性原则作为我们选择最主要的设计标准。

更直白点就是设计尺寸在放大或者缩小的情况下都可以减少因为分辨率带来的差异性。因此以1440作为基础的设计尺寸的话，向上或向下适配误差会较小。

那么假设我们用1366的尺寸做设计稿适配到1920的界面上，界面看上去肯定会特别松散。反之，如果我们用1920的尺寸适配到1366上，界面又会显得拥挤，甚至可能会出现错位，这个时候，就只剩下1440的尺寸最适合做设计稿。

04 确定性原则

设计分辨率的建立要优先考虑目标用户主要使用的设备，以真实的用户的应用设备作为基准。这个基准以外的分辨率都是可以进行次要考虑。

由于B端的业务属性，它需要满足更细分、特定的商业目标受众，我们对其进行定制化需求设计。

通过前期调研，发现该集团所有的操作电脑都是由企业统一派发的24寸、分辨率为1920×1080显示器。那么我们在设计中只需要选择该分尺寸即可，不需要考虑上下兼容的事。

同理，假如我们的目标用户都使用1366宽的商务笔记本，那么我们的设计尺寸则可以改为1366×768。

05 首屏展示原则

当我们确定好设计尺寸是1440×900后，最好不要直接使用900作为基础的设计高度，那么高度该如何定义呢。

这里我们不得不提首屏的概念，它指的是不滚动web网页屏幕的情况下就能被用户看到的画面。

根据尼尔森的可用性研究报告，首屏的关注度在80.3%，首屏以下的关注度仅有19.7%，这两个数据足以表明每一个需要转化率的网站首屏的重要性，因此我们需要掌握页面高度，尽可能的把页面中重要信息在首屏展示。

B端web界面的展示依托于浏览器，而浏览器除了主窗口显示的页面外，还包含了浏览器高度（页签栏、地址栏、书签栏）、底部状态栏。因此我们真实的设计高度=电脑分辨率-浏览器高度（130px左右）-底部状态栏（30px左右），因此可以得出首屏高度≤740为安全区，我们在这个区域内设计的话基本可以保证首屏的内容的展示效率最高。

作者：江鸟的设计生活



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

一、间距在UI中的重要性

1.什么是间距？

间距指的是界面各元素彼此相隔的距离，可以是文字自身的行距、与图片、与组件、与模块的间距，或是界面两侧的安全距离（如网页的宽度为1920px，内容区为1400px，那么安全距离为两侧各260px）等。
作为UI设计师，在设计界面的每一个元素都需要考虑到上、下、左、右以及毗邻元素的属性来合理调整间距，利用各间距之间的规律来组织界面内容，确保信息的节奏性，给用户轻松、预约的浏览体验。

2.间距的实际作用

间距可以让界面信息更有节奏，提升内容的可读性，还能通过不同的疏密程度来阐述各元素之间的关系，以吸引用户的注意力，所以在控制界面间距时，一定要有“较真”的心态，任何一次的改动与调整都要先考虑清楚为什么，能给产品和用户带来什么。要做好间距，不能仅停留在视觉层面，需要进行多方面思考。
设计师层面：规范的定义间距，不必每个元素都去考虑间距的大小，有效减少决策和思考时间，提升效率。
开发层面：开发可以按照基础间距去定义变量，长期如此，虽然不能炼成像素眼，但仅凭视觉也能看出间距的倍数。例如基础间距以8px增量，在使用8px、16px、24px、32px、48px...等，开发直接使用基础间距x1、x2、x3...，以此类推，在开发眼中，肉眼定然看不出1px的差别，但却能区分出8px的差距，不必每次都去测量，还能减少误差，高度还原设计效果。
用户层面：有节奏且具备一致性美感的界面效果，信息的有效传递变的轻松，用户体验能得到很大程度的提升。

3.间距的统一性

设计规范的目的是提升设计师的工作效率、团队之间的高效沟通、让设计风格始终保持高度统一。同理，间距也是设计规范中非常重要的一环，它作为规范中的最小单元，如果没有遵循统一，将会直接影响界面整体的版式和布局，信息的疏密程度严重影响用户的浏览。不仅是设计师，开发每次面对同样的模块都需要定义不同的间距也是崩溃的，毫无规律可循。
统一的间距能让界面的视觉效果更有节奏，设计师在设计某些相似的模块时可直接复用组件，即便是多人共同完成同个项目或更换成员，也不会因间距不统一的问题造成整个APP的风格混乱。
对开发来说，如果清楚间距的使用规律，即便有小的误差，也能自行更正，例如使用8px增量，8、16、24...按倍数规律以此类推，若出现9的间距，开发会更正为8、15则会更正为16，自行多退少补，虽然设计师需要细心、尽量不出现这种小的出入，但任何事情都没法做到绝对，统一的间距能让减少设计的出入以及与设计师之间的频繁沟通，能进一步提高开发效率。

▲ 从上图可以看出，间距不规范、信息就像一锅粥，而规范的使用间距就能将信息自动分组。

二、定义文字间距

文字是UI设计中非常重要的信息元素，虽然大多数设计师对文字的属性比较了解，但在真实设计中总会因其他信息的干扰不能合理运用，与上线后的视觉效果预期相差甚大。文字的各种间距处理看似简单，但实际上有很多因素要考虑，例如字间距、行高、段落等，下面带大家一起了解。

1.字符间距

字符间距一般都是设计工具的默认数值，无需调整。当碰到多行文字需要避开头尾的标点符号时，使用工具中的避头尾功能即可自动调整字间距，如无此功能，则需手动调整，这里并没有所谓的技巧与方法，头尾避开标点符号即可。
另外，在设计卡片、瓷片区的标题时，有时需要通过调整字符间距来提升界面的舒适度，间距数值自行定义，但相同层级的内容标题字间距一定要保持一致。

2.文字行高

行高是指上边框+下边框+字号的高度之和，这里主要针对多行文本。在平面设计中，行高没有一定的标准，如无特别需要，使用系统默认的行高即可。
在UI设计中，文字会有5～6个不同的等级，为便于用户阅读，一般会设定行高标准，尤其是新闻资讯类型的应用本身就以文字内容为主，不同的行高对文字的易读性会产生较大的影响。
文字行高一般会设定为字号的1.2～1.5倍，具体值跟字号有很大关系，文字越小，行高就越大。例如，我们可以设定字号32px为中间值（非绝对），小于或等于32的字体、行高为字号的1.5倍，大于32的为1.2倍。另外，也可以直接将所有行高固定在字号的1.5倍，不难发现，字体越大其折行的概率就越低，试想一下，如果将48px的文字折成几行，界面还能剩下多少空间？

3.文字段落

文本段落间距的重要性在移动UI界面中并不明显，更多体现在网页设计中。需要着重纠正一点的是，部分设计师在设置段间距时习惯性的多敲一次回车键，这种方式并不可取，会造成间距过大、内容脱节。
如有需要，一定要手动设置段间距，这里没有固定的数值和规律，视觉舒适即可。笔者习惯将段间距设定为字号的0.5倍，例如字号为30、段间距为15，字号为40、段间距为20，仅供参考。

三、定义元素/组件间距

定义间距其实并没有一个绝对的标准，主要取决于最小单位，例如4px、5px、6px、8px都是可以的，到底使用哪个数值还得根据产品自身定位及内容组织形式，前提是所有间距都要遵循最小单位并基于倍数形成规律。
在设计界面时，需要利用间距来建立信息层级、提升浏览体验以及表达各元素之间的关系，这就是为什么当我们打开新闻资讯、电商类应用会发现信息非常紧凑，而打开工具、社交类应用时感觉信息比较宽松。间距的基数越小、页面就越细碎；基数越大、页面的留白就越多，使用不同的基数，呈现出来的视觉效果也形态各异。
笔者在工作中通常以8px作为基数，以此衍生出8、16、24、32、48、64这6个间距数值，完全能够满足绝大多数的使用场景。当然，针对信息较少的页面也会使用到120、160、200...其他间距数值，例如缺省页、登录页面等。不难看出，上述以8px为基数定义间距数值时，没有40、56这两个数值，难道他们不是8的倍数吗？我们以8和16做对比，后者是前者的2倍，其间距的变化尤为明显；但如果用56和64做对比，后者是前者的1.14倍，其间距的差别微乎其微。敲重点，设计师在定义间距时，需要遵循倍数规则，但同时也要为考虑界面美观及用户的浏览体验而跳出呆板的规则，当间距数值越大时，根据基数所跳跃的倍数就越大，其实设定字号也是相同的逻辑（后期详解）。

四、定义模块间距

从信息层级角度来看，等级权重越高、间距就越大，在现实世界中也是如此，一个物体周围的空间越大，就越容易吸引人们的注意力。
模块间距分为块内间距（同一模块中不同元素或信息组之间的距离）和块外间距（同一个页面中不同模块的之间的距离），为了更好的区分信息层级，块外间距一定会大于块内间距，也能保持块内信息的亲密性。
如下图所示，将装修序列步骤、官方攻略、常用服务等看作不同的信息模块，每个模块内元素的间距都会比各模块之间的间距小很多。

五、间距的使用技巧及原则

1.接近性原则

需要通过各元素的间距来体现出信息的关联性，格式塔原理中的“接近性”原则告诉我们，相互靠近的物体被认为比相互距离较远的物体更有关联性，因此，相关联的元素之间靠的越近，用户越能感知到信息的关联，同时更能了解整个界面中各模块信息的逻辑关系。

2.利用留白强调

很多时候，想让一个元素变的突出，可以用加大字号、修改色值或后加粗等方式进行强调，但这并不是突出信息的唯一方式，当所有元素都变的突出，那就等于什么都不突出了。如果想让界面中的元素不同程度的突出，留白也是一种强调信息的方式，它能引导用户将注意力集中在特定的内容上。

3.使用栅格系统

善用栅格系统（上述有详细说明），通过最小间距值进行递增，让整个界面看起来更协调。栅格系统可以让设计师在元素的亲疏关系上更快作出决策，后续不管是迭代还是更换设计成员，都能保持统计的间距规范。

4.文字行高规则

这个问题在很多团队中都是硬伤，甚至在设计验收时还被直接忽略。在主流UI设计工具中，添加文本元素时，都会有默认行高，在前面的内容中有讲过多行文本的行高为字号的1.2~1.5倍，那么单行文字的行高到底是需要手动设置还是遵循默认，笔者认为都是可以的，但一定要与开发保持一致。
行高决定着文字边缘与定界框的间距，而开发只能看到定界框与其他元素的间距。

1）默认行高
默认行高值会随着字号的变化基于一定的倍数自动增减，需要将此规律或倍数告知开发，开发将此规则植入代码方能最大化还原设计效果。另外在设计界面时，尤其是多组文字元素的上下间距，需要通过计算（文字边缘到定界框的间距+文字元素间距=实际间距）或手动测量才能达到精准状态，下图为例：

2）手动设置行高
手动设置即字号是多少、就将行高设置为多少，确保文字边缘紧贴定界框，在设计过程中调整间距时，无需计算，根据设计工具的智能提示调整即可。

5.间距值数量设定

在同一APP应用中，根据最小基数定义的间隔值数量不易过多，一般在6个左右就能满足绝大多数的设计场景。例如以8px的基数为8、16、24、32、48、64等，以5px的基数为5、10、15、25、40、60等。数量过多会导致界面不同元素、模块的间距差异化不够明显，数量太少无法满足多元素、模块使用场景，也会导致间距跨度较大。

6.明显相邻间距值

设定间距值需遵循一个原则“数值越大、递增的倍数就越大”。当相邻间距值的差异化较小时，用户很难感知到界面中信息之间的逻辑关系，我们需要根据栅格系统中间距值的增大、设置更大的区间值，让相邻间距值之间的视觉差异更加明显。

7.跳出间距的束缚

当界面中的信息较为密集、间距不足以满足信息的突出程度时，需跳出纯粹的间距规范束缚，换种方式或许更好。例如：给元素添加背景让其聚焦、使用分隔线/色块间隔、调整元素大小等，需知「此消彼长」的道理。

六、结语

如果在处理界面信息层级时，改来改去还是觉得很乱，不防从间距角度出发，或许会有不一样的收获。虽然在刚开始的时候，规范间距带来的效果甚微，但随着团队规模不断扩大、界面数量越来越多、内容越来越复杂时就会发现，所有内容统一间距规范，不管是构建一致性界面视觉效果、还是对开发和设计师来说，既能提升用户体验、还能提高团队的工作效率。
间距是否规范使用，决定着界面是否规整、信息传达是否清晰，即便如此，间距也只是解决信息层级方式的其中之一，切不可让其限制设计师的发挥和思考空间。制定设计规范有助于项目的高效运转，间距也好、色彩也罢，设计师依然需要从实际用户场景出发，通过不断的思考和经验总结，打磨出更合理、更符合项目需求的设计规范。

作者：大漠飞鹰CYSJ



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

一、需求分析

在设计一个产品的时候，我们要透过现象看本质。

我们是为谁？解决什么问题？分析的结果将直接影响到方案的好坏。 这里推荐大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一种思考方法，也可以说是一种场景创造分析法。

5W1H分析法包含如下几个方面：

Why：为什么要做，是原因。

What：做什么、做成什么，是目标。

Where：在哪儿做，是地点。 

When：什么时候做，是时间。 

Who：谁来做，是执行对象。 

How：怎么做，是方法。

通过上述分析我们可以（假设）知道：我们的用户是技术人员、基层管理人员；做这个页面的目的是为了让用户随时掌握各项工作的进展情况，快速进入需要处理的工作事项。 根据结论可以得出工作台是一个导航页面或者综合管理页面，它是用户感知产品价值的重要“门面”，使用者有一定的经验，属于高级用户。从设计角度来看，首页工作台是整个系统规范与视觉风格的核心场景。

使用角色：

主要是技术人员、基层管理人员

内容主次(根据需求得出)：

P0:各类数据指标的汇总、我的动态

p1:总量趋势、数据排名、操作汇总

p2:分发汇总、待办事项 

设计要求：

重点突出、简洁、清晰

二、信息架构

优先级处理

下面这张图是产品给的原型，也是B端面试题中经常会遇到的题目。如果你打算就按照产品给的原型直接做美化，那估计很难被选中。

做需求分析的目的之一就是为了做信息处理，这里要提到一个词叫“屏效”。B端产品我们都知道，目的是“降本增效”，在合理的信息布局下尽量利用交互等手段让页面缩短。 

比如：上面原型中有两个top10排名，如果一行展示会比较拥挤，也体现不了top10排名。考虑“易读性”我们会放两行，但这样又占据了屏幕空间，在与产品沟通后我们把它整合到一起，利用按钮组切换进行查看。同时排名也是业务人员需要关注的，所以我们把它们往上放。

顶部个人信息内容比较少，也没必要占一整行，我们把它移到右边；各类指标因前3个是不能点击的，为了和后面可点击按钮做区分，我们整合到一个卡片上；待办事项与产品沟通后说不太重要，移动到了最下面，操作汇总模块往上移；

到这里模块之间的信息优先级基本处理完成，下面就要对单个模块进行拆解处理。 

首先我们要观察哪个是：重要信息、次要信息、辅助信息，上面我们提到了“效率”，把重要信息突出显示，就是为了让用户一眼就能看清，不需要去寻找或被次要信息干扰。 

最后一个模块原型上只有一个标题，这真是验证了一句话：“巧妇难为无米之炊”，所以又去找产品沟通，为什么单个模型可以点击查看更多？用户在这个地方想要获取什么样的数据？

经过一番沟通，拿到了一些“米”，巧妇终于可以干活了。为了体现“易发现性”，我们在后面这个模块上加了一个详情按钮。

栅格化处理

其实上面的图是我处理过的，产品的原型可不长这个样子，模块大小、间距都是随便给的。你如果也按照产品给的原型模块大小做，估计研发会“骂娘”，因为这样没法按照比例进行换算，也就没法做自适应。

这一步主要就是做栅格化处理，我们需要定义每个模块的占比与间距。B端产品通常选用24栅格布局，也就是24栏+23水槽+2页边距。

我遇到的工作台页面有两种，一种是带左侧树，一种是不带，这两种对应的栅格化数值不太一样。 按照目前常用的尺寸1440*900来计算：不带左侧树我采用的是1440=2*20+43*24+16*23。

如果大家做的是带左侧树，可以参考下图数据

三、可视化图表

重点来了，我个人觉得这一节才是工作台、数据分析页面的核心，但很多人都忽略了，觉得不就是几个图表，唰唰唰一下就搞定了...... 

上面我们提到过B端测试题给的都是原始数据（表格），需要设计师自己根据数据找合适的可视化图形进行展示。

如果你对可视化图表不熟悉，不知道什么时候该用柱图、折线图、饼图；不知道随时间变化该用什么图形；不知道体现排名的数据该用什么图形。那你很难输出一份有理有据的作品。

因图表类型太多，详细的留到后面文章讨论，这次只对原型中使用的到图表进行分析：

柱图：

柱状图是常用的数据可视化图形之一，可用于随时间变化而产生变量的数据统计，也可用于数据类别的对比、排名。

如图，柱状图能展示知乎文章观看者地域分布，也能反应出不同时间段的情况，并通过图形能够快速了解 分布最多和最少的省份。

优点：

人眼对长短（高度）比较敏感，可以直观体现数据差异性。

缺陷：

分类过多时数据的展示效果会降低。 

设计要点：

能把图形视觉与体验都兼顾好，才能体现设计师的价值。 设计师的能力不仅体现在技法上，更多的是体现在思考能力上。图形扩展性设计和创新性设计都需要设计师做缜密的思考，只有这样才会有出彩的设计结果。

信息层级：

视觉展示：

2个人站在一起我们除了对比高度、颜值，还有会对比胖廋。那么，柱状体的粗细和间距如何定义呢？ 在图中，中间柱状图的柱子间距过于疏散没有规律；右边图中的柱子间距又过小，视觉上显得拥挤，并且当分类过多时，过小的间距会导致柱状体之间没有独立性，不易阅读。

定义柱状体的间距可以用5分原则设计法，即柱子之间的间距为N，左右两边与柱子之间的距离就是2/N。 如图所示。这也是很多界面设计中常用的技法，其原理就是接近黄金比例，视觉上较为舒适。同时，在保证界面元素整体协调性的情况下，尽可能把柱子的宽度设计成N，这样视觉上最为协调。

另外，在设计图形前，设计师最好能了解到真实数据，这样才能结合真实的数据来设计图形，尽可能还原落地后的样子。在图中，图形的设计和落地后的样子存在较大的差异。问题就出在设计前设计师没有了解数据的真实情况，前端工程师按照设计图把X轴的数值固定了。

相似图表： 

堆积柱状图：堆积柱状图可以展示两个或多个数据的变化，以及数据之间的综合比较情况。 

分组柱状图：分组柱状图可以在同一数轴上展示各个分类下的不同分组数据。 

有序柱状图：与有序条形图一样，有序柱状图也能呈现数据的排名情况。

折线图：

折线图常用于表示一个连续时间段内数据的变化趋势，主要功能是能够清晰地反映出数据随时间变化的趋势。

如图，折线图不仅能展示不同月份的价格趋势，还能清晰呈现数据的峰值和低谷。折线图也可以是多条线，用来分析多组数据随时间变化的趋势及数据间的趋势比较。

优点： 

直观反映数据变化趋势 

缺陷：

无序的类别无法展示数据特点。

设计要点：

折线图可以用于展示数据的趋势变化，通过折线的起伏波动可以帮助人们探究数据背后的逻辑。但如果折线图的设计不够合理，在视觉上会让人产生错误的认知。在图中，有的折线图的刻度值设置不合理，如中间折线图的刻度值未从0开始，导致折线的呈现夸大；右边折线图的刻度值过高，趋势变化呈现过于平缓，这些都是在不客观地表达数据。正确的方式应该是刻度值从0开始，随着数据的增减，刻度值也做相应的变化。

视觉展示：

在折线图设计中，还需要注意折线的粗细要适中。在图中，其中一条折线过细，这会降低数据可视化的表现；另一条过粗，就会损失折线中的数据波动细节。在产品的图形设计中，一般网格线和起始线都是1像素，折线一般用2像素，这样的粗细会有较好的视觉表现。

相似图表：

阶梯线图：线在数据点之间形成一系列步骤。

面积图：与折线图唯一不同的是，其自变量数据和坐标轴之间有颜色填充，这样能更加突出数据的趋势变化。

饼图：

提到数据的占比，相信你第一个就会想到饼图，主要用来展示数据分布情况。 饼图是展示占比数据最直观的图形，通过弧度大小来表示分类的占比多少。但饼图有一定的局限性，当占比数值接近或占比分类过多时，在视觉上就不容易辨别各个类别占比的大小。在数据可视化产品中，因为饼图是大面积的色块，视觉上会非常突显，很容易抢走重要数据的风头，所以使用时要酌情考虑。

优点： 

直观显示各项占总体的占比，分布情况，强调整体与个体间的比较。

缺陷： 

分类过多，则扇形越小，无法展现图表。

设计要点：

每个图形都有自己的设计规范，如当饼图分类过多时，一般不把文字放在图形元素上，因为一旦出现几个相对较小的占比数据，字就很容易溢出，不容易辨别指向的分类，如图中的右图所示。好的解决方案就是，在图形的外围用引线指出分类数据，或者加示例图展示。

视觉展示：

另外，饼图的分类最好从12点钟的位置开始，这样较为符合人的阅读习惯，即从上到下、从左到右，如图中。如果饼图随意从不同位置开始展示，就会缺少规范，这样当多个饼图同时展示时容易出现混乱。

同时，在饼图的分类中如果没带排序，如1月、2月……，那么占比最好能够从大到小依次排列，这样还能直观地呈现出分类的排名情况。任何时候，如果有“其他”这项分类，无论其占比多少都要放在最后，因为其数据通常是最不被关注的数据。

相似图表： 

嵌套圈饼图：用于一个指标在不同维度的占比。 

跑道图：看到占比的同时，可以直观看到指标在当前维度下的排名情况。

表格

表格看起来简单，但想设计好也不是一件容易事。通常我们见到的（产品中）表格都属于比较简单的表格。

在BI系统中有一些复杂的表报，如果直接用组件信息会很难阅读。我们需要对表格的视觉进行调整，让信息获取更高效，这就需要一些设计技巧和原则。

设计要点：

表格排版第一大原则：文字左对齐，数字右对齐表格中文字需要左对齐，因为我们阅读文字的习惯是从左到右。

而图中（上图）的项目名称长短不一，居中对齐在视觉上会使切入点呈现“Z”字形，影响阅读效率。左对齐可以使线性结构在视觉上不跳跃，阅读流畅且更具美感。表格中的数字需要右对齐，因为当我们在面对一个长数字时，一般会从右往左读。比如数字¥368,568,023.00，我们一般是从个位到最后的千万位顺序识别数字体量，有的人可以通过千分符迅速判断数字的体量，但其实也是从右到左的浏览顺序，因此数字右对齐最符合人的阅读方式。

在图中（下图），让我们感受一下数字左对齐、居中对齐、右对齐的阅读效率，以及对各个数据体量的对比感知。

文字左对齐和数字右对齐，针对的是长短不一的名称和大体量的数字，而对于文字数量一样、体量较小的数字也可以尝试用居中对齐的方式，对称的元素本身就具有美感。如图所示，通过对表格中的文字和数字的重新排版，相信在阅读效率上会有较大的提高。虽然提高了阅读效率，但这相比优秀的表格设计还差得很远，其中最明显的是表格的边框在视觉上过于突出，接下来我们继续调整。

弱化边框

如图（下图）所示，通过弱化边框在视觉上能够突出表格的内容。表格边框可以让信息的呈现更有条理，能够提高易读性，但在视觉层级上不能高于内容信息。

去掉边框与分割线

将表格的边框与分割线去掉，用留白分隔内容，无框胜有框，增大留白可以使表格更有空间感。这样的设计需要注意的是，元素的间隔不能太小，不然会显得拥挤。由于去掉边框后有些问题会被放大，比如标题与内容没有对比，因此需要增强对比，在整体上要有层次。

强调标题

图中的表格加强了标题，这样看起来更有层次。强调标题的方法有很多种，不一定只是加粗字体或加大字号，还可以给标题栏添加背景，以形成对比。

突出重要信息

如果在一组数据中有重要数据和次要数据之分，那么就需要在对重要数据的设计上着重突出，表格的设计同样如此。图中所示就是把重要的数据信息通过增加背景色与其他元素形成较为突出的对比，这种设计是一种为用户做选择的设计方法，容易让用户的视觉停留在他本想重点关注的地方。

表格扩展设计

由于人们常常会对熟悉的事物产生审美疲劳，因此设计中有创新才容易给人眼前一亮的感觉。

下图在背景上面给了一根横线，来凸显这一列的数据，这样除了可以加强信息传达也可以打破常规的表格样式（这里只是提供一种思路）。

表格字体运用

表格数字最容易出问题的是数字字体的运用，因为很多数字字体不是等距设计，比如数字“1”所占的字间距面积要小于“8”的。如果遇到一组大量级的数字，就有可能会误导观者。

如下图所示，本来32,118,116,00大于28,558,363,00，但由于不同数字所占宽度不一样，这样的设计在视觉上容易误导用户。因此，表格中的数字要使用表格字体，因为表格字体每个数字所占面积一致，这样就不会出现案例中的问题了。

其实很多表格里面的数字字体都存在类似问题。下图是修改数字字体后的设计，这样就能客观地呈现数据了。

表格中常用的字体有Roboto、DIN、微软雅黑、思源黑体、宋体、苹方字体等。

四、视觉设计

配色：

参考631配色法 

对有含义的颜色要谨慎使用，例如：红、黄、绿

图标：

常用的图标分为两类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解，常用于b端产品里面。
如图，里面来自不同产品的图标，虽然表现形式不太一样，风格不太一样，但都是为了体现图标后面文字的意思。

装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于产品宣传、活动等页面。 如图，云计算、大数据相关的产品，语义都比较复杂，很难通过图标去表达，既然看不懂，就抽象点。

在 B 端产品中，应用最广泛的还是工具图标。 可能有人觉得工具类图标太简单了，它是看起来简单，想做好一点都不容易。

首先要保证“一致性”， 粗细一致、圆角一致、透视一致、大小一致，同时还要把语义用图形表达出来。

间距：

一般采用8的倍数：8、16、24、32、40、48、...

字体：

12px、14px、16px、20px、24px，可采用“回退机制”

作者：夜莺YEAH



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司 

用研的进阶

根据公司结构和职能角色的需求不同，用研中部分是行为观察，部分是商业战略，部分是心理学，部分是数据分析，部分是设计，部分是团队促进。用研可以有不同的风格，因此可以在行业范围内四处移换位置。根据公司规模和类型的不同，我见过很多用研团队变成设计部门的一部分，有些则变成营销部门的一部分，还有一些则在产品管理部门——最终在哪都根据公司的规模和类型来决定。在我任职期间的某个时候，我自己的团队已经集结到了之前提到的各个部门。

所以...有没有一个部门可以更加适合配备用研部门，让用研更加成功且具有影响力呢? 这是我想找到的答案。

...

用研部门应该存在于...

...在设计团队？

摄影：Harpal Singh 于 Unsplash

优势：

研究与设计交织在一起：用研已经成为许多用户体验设计师工作职位描述中的一部分，而用研的核心就是指导设计。研究结果可以指导交互行为，并且它从一开始就已经嵌入了设计过程里。如果一个设计团队有专门设立研究部门，会让这个团队变成一个强大的联盟。让更大的设计团队统一研究整体用户策略，会让之后的调研和设计过程更加整体和完善。同样，设计师也有想改善用户体验的众多想法，并且通常很高兴能看到用户和他们的想法进行交流。这直接与这些创造用户体验改善的设计师们，促成了一个强有力的文化测试、迭代、再测试的过程。由于设计与用研的过程是结合在一起的，因此可以立刻将这些用户洞察应用到设计中去。

类似的工作流程：用研的工作流程与传统的设计流程十分相似。设计领导者可以无缝地理解研究的各个阶段：复查现有的数据，引导生产性研究，汇编各种信息从而寻找新的模式，创建一份报告，陈述研究结果，在上线后测试等等。同时，从设计概念开始，征求意见、进行测试比较设计方案的好坏、迭代设计、产出最终的版本、呈现并且在上线之后进行迭代。设计和用研通常希望携手合作，共同努力改善数字化体验。

劣势：

设计≠用研：不是所有的设计师都会进行研究，要么是因为他们没有时间，要么是因为他们没有接受过理解研究方法的训练。（相反，也不是所有的研究人员都是设计师）通常，公司会安排设计师同时做研究员的工作，反之亦然。这对最终实现的产品来说可能是灾难性的。尤其是在较小的公司中，设计师需要扮演很多职能。这意味着他们“有时候“有时间能亲自调研。不幸的是，在设计和用研没有明确定义的前提下，这意味着雇佣部门和领导团队认为这两者是可以互换的 (注意: 这并不意味着某些设计师没有资格，只是“视觉设计师 / 平面设计师”、“UI设计师”和“UX设计师”的技能组合是有区别的，但我不会在这里讨论这些!)

用户需求可能会被遗忘: 有时候，一个设计规划图会被过分热烈的创造性驱动从而创建，而不是来自于数据或研究。很多时候，创意人员会对他们喜欢的新想法产生依恋，即使它并非源于用户需要的东西(有时候我们都会为此感到内疚)。不幸的是，这意味着研究可能是事后的想法，更经常地被作为验证工具而使用，而不是在产品生命周期中预先定义需求。这对于用研来说可能成为难以克服的一个障碍，特别是如果设计概念与利益攸关方或决策者领导人一起审查，他们喜欢并认为这是一个“ 可以去做的设计”。这意味着研究的机会很有可能丧失。

...在市场运营团队？

摄影：Carlos Muza 于 Unsplash

优势：

相似的技能组合:市场研究和 UX / 产品的研究在他们特定的核心研究中，共享相似的过程和研究方法。在社会心理学、市场营销学、人类学、人的因素、运作和设计等许多领域进行 “人的研究” 所使用的工具包非常相似：定量方法，如大样本调查和分析；定性方法，如面对面的观察，焦点小组，适度的访谈，日记研究以及其他。每个领域的方法都需要研究设计、用户招募和研究分析。对于市场团队来说，这是一个非常熟悉的世界，作为 用研 流动到这个部门意味着领导者可能会对你的角色需求有一个彻底的了解。

共同的目标是了解用户: 市场团队也将是你的拥护者。无论如何，源自于产品和设计的用户研究的洞察力，为市场部门关注的许多举措增添了直接价值。透过略微不同的角度来看，市场营销和用户体验有着相似的目标(理解客户) 。尽管如此，当团队协作并共享信息，在以业务或用户为中心的举措之间建立平衡时，用研结果还是能够帮助我们进行决策。

劣势：

商业需求可能与用户需求相反:如果组成“聚焦点”的事物变化太大，那么这个”聚焦点“既可以将市场营销与用户体验结合起来，也可以将它们分开。当业务需求与用户需求相矛盾时，可能会产生摩擦。如果市场部门的领导层将眼前的业务优先级置于用户研究之上，那么获取工具和客户的途径就可能受到限制。在一天结束的时候，市场团队关注创收，即使这对用户来说不是最好的体验(比如在某个地方放置广告，可能会干扰网页，以确保用户看到它) ; 而用研团队关注什么是对用户体验最好的(比如在页面上放置一个广告，使其不会干扰用户的任务，冒着用户看不到并参与其中的风险)。

用研 ≠ 市场研究: 有时候，流动到市场部门意味着其他人将 用研视作为市场研究的延伸。由于这一点，一些项目有可能被认为应该由市场专家处理，而不是用户体验专家。例如，营销活动的目标可能是“我们如何让用户使用这次促销活动” ？另一方面，用研 可能会强调用户的需求，比如“用户希望如何获得有关促销活动的通知” ？这种情况（关注点的转移）并不可能经常出现在市场部的议程表上。

...在产品管理团队？

摄影：Marvin Meyer 于 Unsplash

优势：

为产品使用路径图研究分配时间:通过将 用研 嵌入到产品管理团队中，研究有机会通过在产品路径图中划出其应有的空间和时间来充分发挥其潜力。通过让 用研 和产品经理向同一个领导层汇报，这意味着目标和优先级可以被共享，并且在同一时间被一起审查。这可能是一个有效的工作方式，特别是当你与产品经理一起工作的项目，他们知道如何使他们的产品更直观地呈现给用户。用研的产品管理为定义实际产品需求创建了一种更加无缝的方法。这意味着路线规划图中留出了时间，在积压成定局之前走出去，获得用户见解。这告知了大家需要开发的功能的优先级，并在完成设计之前，就形成产品了本身的特性。当 用研 与产品经理的目标紧密相连时，每个注入了用户见解的产品阶段都变得更加容易(因为它应该是在一个理想的世界中!)

更容易地与决策者进行知识交换:将产品经理的内部结构与 用研 的内部结构相结合，也意味着他们可以获得更多用户关于他们的体验的言论，从而形成定期更新，并且可以更容易地进入用户途径。用研经常关注复查定性趋势的反馈(比如 Qualtrics 或者 Medallia 系统)（在线调查或客户体验管理系统），这意味着产品经理听到这些趋势的机会变得更加频繁。产品经理一般来说应该对他们的用户群有深刻的理解，但是他们通常很难在倾听用户的基础上来保持冲刺、业务分析、 KPI 和产品路线图规划。因为团队会议中现在有一个指定的用户代言人一直在场，这就是为什么与 用研 如此紧密地联系在一起对产品经理来说是有益的。参加这些会议使得 用研 有机会直接与那些最需要了解用户需求的人进行自发的对话。加入同一个团队可以使这些沟通渠道更加开放，并且可以更加频繁地了解用户对产品经理的需求。

劣势：

研究的优先级可能会降低:不幸的是，转到产品管理团队意味着有时研究的优先级会降低。当利益相关者对产品交付施加压力时，这通常意味着产品需要尽快推出。然之后，产品经理必须专注于发布他们产品路线图规划上的项目，并在时间表和开发周期内实现业务目标。为了满足这些时间要求，尽快交付某些东西成为更紧迫的目标，而不是交付一个经过研究和磨练的产品(这需要更多的时间)。

更多的评估而不是生产性研究: 把用研流动这个部门可能意味着这项研究变得更加可评估(或者验证、可用性和迭代测试) ，而不是生产性(或者理解需求、价值和概念发现或开发的测试) ，就像在设计团队下可以做的那样。这不是一件坏事，而只是需要牢记在心，以便作为一个用户倡导者，用研 的工作可以更直言不讳地说，需要留出时间来做更深入、生产性的工作，从长远来看而不是短期内为产品提供信息。提前了解这个可能的障碍意味着用研可以更好地装备自己的 ROI（投资回报率）影响，以便为更深入的研究腾出时间。

...在自己独立的部门？

摄影：José Alejandro Cuffia 于 Unsplash

注意: 我还没有在一个独立的，指定的 UX 研究部门作为一个 UX 研究员的工作经验。我只能推测将一个独立的 用研 团队集合起来会是什么样子，或者当 用研 成为一个大型组织中自己的分支时，领导力的优缺点是什么。

优势（推测）：

拥有自己带领的用研部门，可以为更深入地研究需求提供机会。它将有能力根据合作伙伴的规划路线图从而制定自己的规划路线图。它可以让部门领导层能够深入地支持研究人员的需求，因为需求经常遇到障碍（如招聘、用户日程安排、预算、批准、 ResearchOps（ Research Operation service 研究运营管理） 的行政工作等)。能够拥有一个研究路线规划图，并为发现和生成性研究腾出时间，从长远来看，可能会大大有助于产品和客户体验的信息共享。拥有一个独立的团队可以使这些研究成为奢侈品。当一个领导者致力于使研究成功，这意味着他们希望研究可以带来更多战略上的影响。

正如我之前提到的，一些被称为 “ ResearchOps（研究运营管理）” 或者研究操作的东西，是一个趋势短语，类似于 “ designnops①” 或者 “ DevOps②” 等等。抛开时髦不说，设立一个独立的部门和领导层可能意味着在决策层有一个更大的席位，这反过来又意味着在使体验研究产生影响方面有更多的投资。当投入更多资金进行研究时，业务侧就有机会进行战略思考并得到支持。一个独立的 用研 部门反过来将能够雇佣人来支持行政管理，为研究人员能够专注于他们眼前的工作和分析而负责。在小型组织中，甚至在大型组织中的小型 用研 团队中(比如我的团队) ，研究人员往往负责所有的职能，这也是可以的！但是，如果有一个专门关注于这些研究人员需求的部门，并扩大他们工作的影响(不管团队规模有多大) ，我相信将有更大的机会去收集更好、更深入的见解，研究过程也能充分发挥其影响力和潜力。

①Design Systems Ops 是设计团队的一部分，他需要足够了解设计，并且要了解他们试图概念化什么。同时，Design Systems Ops 需要理解工程师的需求和定义方法，这将有助于设计系统的装运和规模化。在某些程度上，一个 Design Systems Ops 是两个世界的翻译。

② DevOps（ Development和Operations的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。它是一种重视“软件开发人员（Dev）”和“IT运维技术人员（Ops）”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程，来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。

劣势（推测）：

相反，单独作为一个独立的 用研 部门，也可能使得决策层难以接受。如果不流入一个直接产生收入影响的部门内（至少在短期内，比如在销售或营销方面) ，那么 用研 的工作就很难得到认可。利益相关者之间的伙伴关系和一致性，对于用研人员能够成功地完成他们的工作来说至关重要。如果没有它，如果 用研 的需求被认为不是直接以产品为中心，同样的职位可以帮助 用研， 也可能会阻碍他们。开展生产性研究的时间可能被视为“有风险” ，而且当团队的领导层与其他更为成熟的角色(即风险较低的角色)分离时，可能很难获得合作伙伴和利益相关者的支持。

同样，投资一个独立的用研团队总的来说可能是有风险的。可能很难预测到有形的ROI（投资回报率）预测，以便业务合作伙伴能够理解，并在第一时间投入资金。这意味着，决策者们可能认为给用研分配预算或增加人数是有风险的，其他研究需求也是如此。一般来说，R&D（产品研发）在组织中是一个棘手的领域，而 用研 肯定会在这个预算范围内。尽管有证据表明，对研发的投资有能力改变企业经营的底线，并且可以通过创新保持企业价值，所以相对于独立的用研部门，紧迫的商业需求可能话语权更大。

...

作者：三分设



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 



蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司