如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里B端后台产品UI设计的工作小结，总结一些常见问题、解决方法以及自己的经验。
写在前面
作为一个新时代全能打杂，日常工作包括移动端、PC端的UI设计以及各类平面视觉设计，其中自然少不了令人“秃”然的B端后台产品设计。
毕业两年来一直都做着B端产品的UI设计工作，参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作和学习的过程中走过不少弯路，也在不同的项目中不断反思和总结。把自己的一些想法和经验分享出来，总结自己工作中遇到的问题和解决的方法，记录自己思考和理解的过程，也希望对即将或正在从事B端后台产品设计的你有一点点启发或帮助。
希望在日后的工作和学习中，通过实践来不断完善自己对B端后台产品的理解。
目录
一、明修栈道C和暗度陈仓B
二、后台产品设计思路
三、后台产品设计规范
四、经验观点及设计资源
正文
一、明修栈道C和暗度陈仓B
1.1初识B端产品和C端产品
按照C端产品和B端产品的专业术语来解释的话，C端Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是C端产品，单一的C端产品通常是为了实现单一的需求，比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向B端的产品，我个人称之为“暗度陈仓”，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即C端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是C端产品，但是B端产品对我们的影响也是时时刻刻都存在着的。C端产品在明，逐渐改变着现代人的生活方式，B端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
——“ToB还是ToC？这是个问题......”
——“不管ToB还是ToC，最后都还是ToP（people）。”
1.2B端和C端产品的区别
在我看来，C端产品以消费互联网为主，B端产品以产业互联网为主，C端更感性，而B端更理性。
从使用者的角度来说——
C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；
B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。
从开发的角度来说——
C端周期短，B端周期长；
C端用户多，B端用户少；
C端逻辑简单，B端逻辑复杂；
C端竞品较多，B端竞品较少；
C端主战场是移动端，B端则是PC端；
C端是用户体验驱动，B端是解决问题驱动；
C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；
C端产品除了产品的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心，B端产品的实用性大于美观性，能切实解决问题、配置资源的B端产品才是一个好的B端产品，产品经理要具有更强的逻辑思维能力。
1.3后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在B端产品的范围之内的，常见的类型包括：
C端产品的后台产品线——如淘宝商家版，饿了么商家版，对订单和用户进行管理，支持C端产品的业务进展；
平台级工具产品——如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如微博开放平台等；
企业级服务产品——虚拟主机系统（VMware），云主机管理系统（深信服、xensystem、腾讯云）以及各种云SaaS；
企业的业务处理平台——对内有考勤、报销等OA办公系统，对外有CRM客户管理系统，ERP资源及供应链管理系统。
二、后台产品设计思路
2.1初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多。
后台产品不同于普通用户所使用的APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的app，再给他几个其他的音乐APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，首先，所见之少，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业、甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有“保密协议”的使命感，所谓“隔行如隔山”，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
这大概就是后台产品相关资源较少、设计难度较大的一些原因。
2.2后台UI设计工作流程
后台UI设计的工作，大体分为三个部分：需求分析——设计执行——数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。 做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照PM给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做UI视觉方面的设计，而这时后端同步构思需求的实现方案。UI设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
2.3制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
对产品——在项目完成第一版较为稳定的版本时，着手制定设计标准，统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出；
对自己——组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展；在同一个项目中也能更好的把控该项目的视觉规范，提率；
对团队——设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作；
对客户——制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更的输出。同时在进行产品迭代时，设计规范的组件化调整也大大提高了工作效率。
三、后台产品设计规范
*以下内容仅供参考和交流，图片内容不代表真实尺寸，请结合特定产品灵活使用。
3.1页面布局
统一尺寸——据统计，目前PC端用户屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440来设计的话，向上适配或者向下适配误差会比较小。 适配方案——面向多个客户，后台产品设计功能型页面的尺寸统一为1440*900，按照栅格系统原则向上或向下适配；展示型页面以1440*900为主，同时设计出极端情况（宽度为1280以及宽度为1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架——页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局——栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用24列栅格体系实现，以满足2，3，4，5，6分比布局等多种情况。固定宽度Column，将间隔Gutter进行动态缩放。需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。谷歌规定模块和结构之间要以8px为基准，布局间相对间距可采用8px以及8的倍数，但一些小组件(按钮、间隔、输入框 )可以以4为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定——一般在整体区域左上角放置产品LOGO及产品名称，大部分系统顶部栏高度48+8n，侧边栏宽度200+8n。我常用的是顶部栏高度56px，侧边栏宽度200px，侧边栏收缩状态宽度56px，右侧的侧浮窗宽度400px。
相对间隔——定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
3.2标准色
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
3.3标准字
后台系统常用的字体：windows系统，中文Microsoft YaHei，英文Arial；Mac字体，中文PingFang SC，英文Helvetica；除此之外可以选择的字体还有segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
3.4图标
图标是UI设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在iconfont提供的图标模板上用AI绘制，画板1024*1024，提供圆形、正方形、矩形形状(文末提供下载)。图标尺寸按照8的倍数进行延展，绘制完成后生成svg格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
分享一个我个人常用的AI使用小习惯，因为ctrl+q、ctrl+w作为退出和关闭我用的不多，而且有时候手抖会在保存时候不小心点成了关闭，所以我无情地把ctrl+q、ctrl+w变成了拓展和拓展外观的快捷键......感受还不错。
3.5按钮
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照8的倍数设定。如高度分别设定为24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为10px。
3.6导航
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
3.7表单
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为20px，有错误提示时候竖向增加10px或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体14px，文字和左右两边边框的边距10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为30px或按照8的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮4px，内部文字14px。
单选多选框尺寸16*16px，多个选项横向排列间距16px，纵向排列间距8px。
开关按钮外框40*20px，内部圆形16*16px。
3.8表格
表格在后台产品UI设计中站的比重非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高——表格行高可设置为表格内字体高度的2~3倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用36、40、48、60等。
行数——表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是20或50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多余每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽——列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以“...”展示，鼠标悬停出现完整内容（比如详情、描述）。
列数——表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式——表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似IP地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加“复制”图标，方便用户调用。
详情入口——表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
3.9反馈
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框——弹框出现时，主题内容增加一层遮罩#000，透明度50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框——又称抽屉，出现在右侧，固定宽度400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏——为某些特定数据提供数据加载等待时的占位图形组合。
全局提示——建议停留时间3s，可根据文字字数调整停留时间，文字内容限制在30以内。
警告提示——用不同颜色和样式展示需要关注的信息。
通知提醒——消息通知和告警信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留3s后自动关闭。
3.10缺省状态
绘制不同类型的情感画插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用14px，与情感化插画间距20px，与按钮间距30px；
3.11数据可视化
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做的更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
四、经验观点及设计资源
4.1设计前端一家亲
Ant Design的设计组件，实现框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的设计组件，实现框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的设计组件，实现框架Vue——https://www.iviewui.com/docs/guide/theme
飞冰的设计组件，实现框架React——https://alibaba.github.io/ice/
Layui的设计组件——https://www.layui.com/demo/grid.html
G2可视化图形组件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可视化图形组件——https://echarts.baidu.com/
d3.js可视化图形组件——https://github.com/d3/d3/wiki/Gallery
在线栅格化计算工具——http://grid.guide/#/1000/24/34/8/0
4.2不丑也要多读书
《B端产品经理必修课》
《交互设计精髓》
《U一点料·Ⅱ》
《简约至上:交互式设计四策略》
写在最后
不管是做C端产品还是B端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的UI设计师工作时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入antdesign和element等开源的设计组件，会使得设计师以及设计师的好朋友前端小哥哥事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天分享一款运维相关的B端产品，主要阐述自身的设计思路及产品的优化过程。B端产品功能聚焦、讲究效能，对产品链路有着高流畅度与率的诉求。设计师在做B端产品的的时候要有全链路和小白用户视角，以体验及效率为先，我们需要协调全局一致性，遵循产品链路，在视觉上减少对于用户的负担和干扰，避免打断用户的使用流程，确保流畅、优质的用户体验。
在产品优化上，我们在每个版本迭代后，会对用户进行访谈及收集意见反馈，建议设计师可以制定一套自有的用户调研方式去了解用户的想法和自己产品的不足之处，这样的好处是可以让用户帮助你优化产品。
在产品的细节上我们可以深度地去挖掘和尝试更好更优的设计方式，对设计师来说打磨和优化每一个细节正是B端产品的魅力所在。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
交互设计中的“所见即所得”原则
“所见即所得”原则我记得在之前的文章中就提到过，但是没有详细说明。最近在体验一些产品时，发现很多交互设计上的坑都可以归纳到“所见非所得”上。
所见非所得
我们可以首先来看一下“所见非所得”的案例：上周寄件去北京，在填写收件人信息时候，发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术，系统可以识别图片上的地址。例如，你的收件人地址正好是身份证上的住址，那么你就可以上传身份证照片，系统直接识别照片上的地址而不需要手动去输入。
用户具体的操作流程是：
1 拍摄/上传照片；
点击“上传图片”按钮，用户可以选择拍摄或者上传相册里的照片，框选合适的识别区域；
2 系统识别并展示结果；
系统会自动识别图片中的地址信息，并且在输入框中展示，如果有识别错误的地方，用户可以手动编辑修改；
3 用户确认；
用户对地址信息确认无误了，点击“智能填写”按钮，输入框里的地址信息会自动回填到地址栏；
了解了大致流程，我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能，但是在交互设计上存在差异。产品A，当用户上传完图片才会出现“智能填写”按钮；产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式，因为当用户都没有上传图片时，给用户展示“智能填写”按钮是没有任何意义的，这里的“智能填写”虽然可见但是不可得，用户也不能点击。当然有人会说，虽然不可点击，但是展示了也没什么问题吧？当然有问题，它会给用户带来两个痛点：
1） 增加了用户的学习成本；
对于新用户来说，产品A肯定更加容易上手。因为新用户一进入这个页面，只能看到上传图片的按钮，用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来，用户不知道这些选项之间的联系和操作顺序。
2） 阻断正常操作流程；
给用户展示了他们本不应该看到的元素，可能会阻断正常的操作流程。用户如果还没上传图片，就点击“智能填写”按钮会直接报错，“所传参数不能为空”，用户哪里看懂这是什么意思。
之前在火车站取票，前面排队的大婶跟我说她的票取不了。我凑过去一看，发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮，用户误以为还是可以点击的，导致无法正常完成取票流程。
了解到这些痛点，那么如何才能在交互设计上实现“所见即所得”原则呢？我总结了两个方法：限制和就近。
限制原则
了解限制原则，我们需要回答两个问题：
1）为什么要限制？
因为多才要限制，多会带来哪些坏处？内容多，用户处理不过来；选项多，用户挑花了眼；时间多，优惠券没有有限期限制用户懒得用。
2）限制什么？
限制用户与界面交互的触点。还是以智能填写为例，当前界面有三个触点：上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点，保不齐会有用户尝试去交互，这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中，根据用户所处的阶段，分析用户可能进行交互操作，提供交互触点，保证用户看到的触点都是可交互的。
罔顾用户的操作阶段，一股脑的把所有触点都提供给用户。设计师倒是很省心，但是用户却会很糟心，他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳，我们来分析用户处于不同阶段所需要的功能触点。
举个知乎的例子，知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现，因为滑动了3屏，我们可以猜测用户对当前的搜索结果不满意，引导用户去提问。
当然限制原则不仅仅是限制交互触点，还可以应用到产品逻辑中，帮助用户解决很多问题。我曾经遇到过一个场景，公司上线了一款优惠券，用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高，导致领取失败。对于这个报错文案，我们改了好几版，但是每次都会收到用户的投诉。我们无法直接告诉用户，你是因为风险等级过高导致无法领取，因为用户风险等级过高是因为开通了某项业务。当时开通的时候，我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦，最好的办法就是进行判断前置，如果判断用户为高风险用户那么就直接不展示该优惠券。
就近原则
从上面的阐述中，我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间，提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间，因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢？因为反馈是系统对于用户操作的回应，那么我们可以让操作和反馈尽量的贴近一点，这就是就近原则。就近原则可以分为两类：位置就近和形式就近。
1） 位置就近
所见即所得，这里的“所见”即代表着用户的视线，而用户的视线总是停留在上一个交互触点附近。
例如，还是寄件的场景，要填写发件人信息，我懒得重新填写一遍地址，正好看到输入框右边有一个附近地址的功能。我点了一下，没有反应，又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接，我的视线也是停留在附近，没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。
2）形式就近
形式就近，这里的形式特指反馈形式。目前最通用的反馈方式是弹框，弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载，用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应，而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递，用户感知起来会更加容易。
举个例子，用户在输入登录密码的时候，其触点是输入框。当用户密码输入错误的时候，我们可以通过抖动输入框的方式告知用户输入错误，这里抖动是现实生活中“摇头”的映射，我们都知道摇头代表着否定的意思，用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。
总结
以上就是我对交互设计中“所见即所得”原则的总结和分析，如果你有不同的意见和看法，欢迎留言或者加群讨论
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
刚入行的新手设计师容易出现一个问题，接到需求就开始设计，最后出现的界面和原型几乎一模一样，唯一的区别就是上了色，加了图片和图标，最后提交审核时老板反馈，“这个界面看上去太“平”了，你在这里加个背景色吧；这个图标太小，你再放大一点；这个位置你在加点装饰……”。
这主要原因还是界面没层次导致的，虽然老板对设计不太清楚，但是关于业务逻辑我们的设计稿是否表达清楚，重点是否突出这个他最清楚了。
那么如何才能提高界面层次呢？我们可以从两个方面入手，在设计前我们需要考虑突出内容层次的方法；在设计中需要考虑突出视觉层次的方法。
目录
一、突出内容层次的方法
将相关联的元素进行组合
确认内容优先级，将优先级高的放在前面
确认重要内容，将其差异化设计
二、提高视觉层次的方法
利用线、面、留白将模块进行分割
利用大小、投影、背景图突出视觉层次
利用颜色对比提高视觉感受
利用文字对比提高界面的可阅读性
一、突出内容层次的方法
当一个界面信息量比较大时，层次感好的界面用户进来能快速的获得想要的信息，同时最终达到产品的目的。而层次感差的界面用户看半天也不知道要做什么，看一会也就走了。因此良好的视觉层级是界面成功的关键。在设计前我们需要将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，并将其差异化设计。
1.将相关联的元素进行组合
在设计前，产品原型图已经将我们的元素进行了分类组合，但是他们更多的是考虑逻辑、功能上的层次，而如何有一个清晰的内容层次呢？设计师可以利用《格式塔心理学》中的接近性原则将相关联的元素组合在一起，不相关的拉开距离，同时形成一定的规律和节奏，这样会让用户阅读起来更轻松。
需要注意的是，界面中的间距需要满足一定的规律和节奏，比如模块之间的间距大于标题到内容的间距；在内容中不相关联的内容间距大于相关联的间距，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
2.确认内容优先级，将优先级高的放在前面
将相关联的信息整理之后就需要确认模块的优先级了，由于用户的浏览顺序是自上而下的，因此我们需要将优先级高的模块放到前面。
那么优先级如何判断呢？大家可以从三个方面去考虑，第一是遵循用户的浏览习惯；第二是用户想看的内容；第三是产品想要用户看的内容，如下图所示。
天猫个人主页的个人信息区排在最前面就是遵循了用户的浏览习惯；其次是我的订单和物流信息排在了第二的位置这是用户想看到的内容；最后是我的福利排在了第三位这是产品想给用户看的内容。
京东金融的我的页面用户的资产信息排在最前面，他首先是遵循了用户的浏览习惯，同时也是用户想要看到的内容，其次是功能入口区排在了第二的位置这是产品想给用户看的内容，最后是福利大礼包排在第三位这也是产品想个用户看的内容。
3.确认重要内容，将其差异化设计
在设计时我们需要知道，优先级高的模块不一定重要程度就高，因此我们还需要确认模块的重要层级，同时利用背景、布局等方式进行差异化设计，用起用户注意，如下图所示。
网易严选中的新人专享礼和品牌制造商直供就采用了差异化设计，职工类模块采用的是普通的宫格式布局，新人专享礼采用添加背景的方式，加深了模块的纵深感，对比其他模块更加突出。
大麦网中的特色模块和其他模块也采用了差异化设计，特色模块采用拼图的方式设计，其他模块采用列表的方式进行设计，用户进入页面首先就能够看到这个模块，提高用户接受信息的效率。
土豆视频个人主页的列表部分也采用了差异化设计，消息提醒、我的收藏、观看记录、我的缓存这四个用户常用的功能采用宫格式布局，其他不常用的我的会员、客户与反馈、设置采用列表式结构，这样也能够提高用户操作速度。
二、提高视觉层次的方法
当然内容层级确定了显然不够，我们还需要考虑突出界面的视觉层次，这样用户才能够清晰舒适的浏览我们的界面。那么提高视觉层次的方法有哪些呢？在设计中，我们可以利用线、面、留白将模块进行分割；利用大小、投影、背景图等突出视觉层次；利用颜色对比提高视觉感受；利用文字对比提高界面的可阅读性。
1.利用线、面、留白将模块进行分割
大家记得在设计前我们已经对界面中相关联的元素进行了组合，组合之后就可以利用线、面、留白的方式，将不相关联的元素进行分割，提高界面的视觉层次，从而提高用户的浏览和操作效率。
线分割：是最为基础的分割方式，其优势是占用空间小、分割感弱，多用于列表、Feed流中。需要注意的是，分割线颜色设置需要非常浅，避免模块之间强烈的分割感，比如橘子娱乐的列表就是采用若隐若现的线，让列表中的内容更规整。
面分割：也可叫背景栏分割，其优势是占用空间小、可操作性高，同时能够更好的区分不同模块之间的关系，多用于模块和模块之间的分割，比如转转个人主页的模块采用面分割浏览性更强。
留白分割：是iOS11发布之后兴起的以留白或间距的方式进行分割，其优势是无强烈的分割感，界面清爽，多用于比较有规律或以大图为主的模块之间的分割，比如转转主页下方的卖二手还钱、买实惠好货等，其内容部分都较为规则，采用该方式较为合适。
2.利用投影、大小、背景图突出视觉层次
为了突出界面的视觉层次，我们还可以通过投影、大小、布局等增加界面的对比，从而突出重要信息。
投影：是界面对比较常用的一种方式，其优势是提升界面的空间感，改变视觉次序，通过投影大小的变化还可营造不同的空间关系，多用于卡片风格的设计中，比如Keep均是采用卡片风格的设计，添加投影后让界面视觉层次更突出了。
大小：是大众最为熟知的对比方式，其优势是通过大小对比能够很快的拉开视觉层次，同时能够很好的引导用户浏览路径，比如ofo黄色的大按钮远远都能看见，该页面就一个目的扫码用车。
背景图：往往不如投影和大小常用，但是它的使用可以将模块从其他样式中年凸现出来，多用于banner、推荐等重要模块中，比如美图秀秀的推荐模块，该模块可以说是美图的核心模块。
3.利用颜色对比提高视觉感受
颜色是最容易感知到的对比方式，通过颜色我们可以明确哪些是重要信息，在使用中我们可以通过色相、明暗、饱和度上进行对比，其多用在按钮、重要信息、导航、背景板中。
自如首页上的租房、服务、旅行采用对比色进行强调对比，进入页面用户就能够清楚这三块是是界面的核心功能，同时引导用户关注右侧的具体服务信息。
淘票票首页中的按钮、引导提示、标签栏选中均用了红色进行强调对比，很容易引起用户的注意，让用户看一眼就知道如何操作。
招商银行首页中的话题PK采用对比色进行强调对比，很容易引起用户操作的兴趣。
4.利用文字对比提高界面的可阅读性
文字的层次感往往和字体大小和明暗有关，其中字体大小是提高文字信息层级的重要手段，在文字排版中如果文字之间的层次不清晰，那么一定是大小的对比不够，在UI中字体大小对比往往在4-8px较为适合，如下图所示。
当字体大小对比适合之后就需要通过通过字体的明暗突出主要信息，弱化次要信息，从而提高界面的可阅读性，如下图所示。
在UI设计中我们往往都设定了字体规范，这样不仅能够达到设计统一，同时也有很好的对比性，常用字号为40, 36, 32,28,24, 22(px)，比如优酷的星球页面，通过字体大小，颜色深浅的对比，让用户首先看到重要信息，弱化次要信息。
三、总结
在界面设计中为了降低用户的理解成本，突出重点内容，让用户使用起来舒适，就需要有个清晰的内容层次和视觉层次。
在设计前我们需要考虑将相关联的元素进行组合；确认内容优先级，将优先级高的放在前面；确认重要内容，将其差异化设计。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
飞猪首页在这两年，经历过无数次大大小小的改造。而在2018年7-8月，我们对飞猪首页进行了尤为重要的，一次较为完整的改头换面。这篇文章，包含了飞猪首页历次改版的回顾。我们也想和大家分享一下，2018年，我们这次完整改造背后的思考。
我在2015年毕业后，就来到了飞猪。其实当时还没有飞猪的概念，那时候的 app 叫「阿里旅行·去啊」，后来了解到我们还有过「淘宝旅行」、「阿里旅行」、「去啊」等这些曾用名。
说起名字还有个故事。我刚工作那会打Uber，司机们都特热情，打车能和你聊一路。
有个司机问我：「你是在阿里哪个部门工作呀？」，我就说：「去啊」。司机很激动，马上说：「哦哦，我知道，那个去哪儿网，头像是绿色骆驼的那个！我老婆手机里就装了一个！」
我连忙说：「不是的不是的，我们叫去啊，不叫去哪儿。我们也叫阿里旅行，或者淘宝旅行，你知道吧…」
然后我们讨论了一路「去啊」和「去哪儿」的区别。
虽然直到我下车，我也不知道司机老哥有没有弄明白。
这个事其实很有代表性。在当时，旅行市场最大的品牌就两个，携程和去哪儿。虽然市场上还有同程、穷游、蚂蜂窝、驴妈妈、艺龙等旅行相关的app，但我们就叫「去啊」，其实已经暴露了我们的目的（并不是为了让大家想下「去哪儿」的时候，不小心下载了「去啊」），而是我们当时的目标就是要做一个对标OTA 的旅行预订工具。
这时候我们的首页和他们比起来，简直满分。当然，我指的是相似度，满分。
这其实就是飞猪的起源版本首页。在这里我们可以看到巨大的机票、酒店这样的旅行类目预订的入口，其实就是为了让用户有「预订」的认知。
直到有一天，产品经理在压榨设计师出图，我隐约听到「我们是平台，不是OTA」这样的说法。那个设计师熬掉好几根头发之后，方案确定了，我们便有了下面这个版本的首页。
我们看到，这个版本的首页看起来不像携程了，更像是当时的淘宝。那个产品经理把他的 iphone5s 擦得锃亮，非常兴奋地给我展示：「你看，这个首页，改得太棒了！比以前好多了！」
其实以我当时的聪明才智，真没看出来。但后来想想，这个改版其实是一次觉醒。这个改版意味着，我们要在平台的业务模式下，在机票酒店这样的预订心智之外，找到自己的特色。
而这种差异化的思维模式影响了接下来一年多的首页设计。
刚开始接首页时，我们尝试从内容进行突破，将商品罗列升级为旅行内容。
同时，在品牌升级为飞猪之后，我们尝试为用户提供更个性的服务，基于用户可能想去、准备出发、正在旅行等不同阶段，设计了「目的地个性化」模块，让有不同需求的用户可以看到不一样的目的地、玩法、商品。
后来我们新起了场景化项目，有个业务小组产出了全球第一站、周边好去处这两个出境、周边的导购场景。
并且我们将首页所有的信息都进行了个性化处理，让每个人每天可以看到不一样的内容。
当然，首页的样式看起来越来越美好了，但我们仍然不满意。
上面这些版本的首页，有一个共性：我们一直围绕着业务的布局，在首页上设计业务模块。比如下面的这些模块：
而体现在数据上，也有这么几个共性：
用一句话来总结，就是用户对排列业务模块搭出的首页没有建立认知。
2018年4月开始，我们着手对飞猪首页进行一轮整体的改版。在改版之前，我们首先需要对之前首页进行一次全面的体检。
在这里，我们使用 NLP 理解层次，来深入理解飞猪首页到底发生了什么。
简单介绍一下 NLP 理解层次：我们一般可以通过6个层次理解事物，由低到高分别是：环境、行为、能力、BVR（信念/价值观/原则）、身份、精神。这套框架几乎可以帮我们分析理解一切问题。
△ 用NLP分析问题背后的原因
1. 环境：飞猪业务主导的环境
飞猪的整体环境核心是以业务为导向的，设计的大部分工作是属于支持性质的。在首页工作中，我们做得更主动一些，常给一些提案，也可以算作是共创。但核心的决策权是属于业务和产品的，所以这就导致，飞猪最后上线的东西，往往优先考虑的是业务的重要性。
2. 行为：首页根据业务调整不断改版
我们始终在跟踪首页的数据，并根据数据的变化、业务的倾向性对首页进行日常的调整。
3. 能力：设想的场景没有做好，维度少/内容欠佳
我们希望做场景化，其实是很好的想法。但业务前期只尝试了周边、出境两个场景，这很难匹配旅行用户各种各样的偏好。
同时，飞猪在生产高质量内容的方面做得不够，产出的内容没有让用户产生兴趣。
4. BVR：内容数量>内容质量
因为飞猪的内容起步晚，在起步初期的目标是提高内容的数量，而非生产高质量的爆款文章。所以当后续我们需要用到内容时，常常担心取到一些充数的质量不高的内容。
5. 身份：售卖平台
飞猪以往的定位仍然是旅行商品预订平台，这也会在一定程度上，导致我们不会在提升内容质量上投入太多。
6. 精神：？
这个层面我只能说我个人的理解：我希望飞猪能让旅行者享受更多旅行的快乐。
通过分析我们发现，飞猪的身份定位，对我们设计产品会有从表及里的深度影响。如果我们定位是旅行预订工具，必然只能做出小的创新。所以如果要做大改变，首先要定义飞猪的新身份。
而恰巧，2018年飞猪迎来了新的品牌定义──「全球fun肆玩」。我们开始从旅行预订平台进行更大胆的转型，试图建立新的在线旅游生态。
在这个身份转变的契机下，我们在2018年对首页进行了升级。
飞猪的新目标叫「全球fun肆玩」，关键在fun。我们需要通过设计，激发用户旅行的欲望。
旧版飞猪的框架依然是围绕业务架构建立的。而在这次改版中，我们希望基于每一个普通旅行者的视角，来建立新的首页框架。
在建立框架之前，我们需要挖掘的是，旅行是什么？
有人说旅行是机酒火汽的预订，其实不是。我理解的旅行指的是人，花一段时间，离开现在的位置，去感受快乐。其中包含了角色、目的、地点、时间4个关键的因素。而取决于角色的不同，每个人在旅行上作出的决定也是不同的，所以「人」是旅行真正的内在因素。
而我们认知里零散的旅行方式，如：跟团游、自由行、亲子游、出境游、周边游只是被内在因素对旅行产生影响的结果。
而偏偏旅行还要求我们产生玩的想法，留出足够的时间，从一个地方去另一个地方。当定机票酒店已经不再是个难题的时候，我们决策困难的原因更多是在自身：我不知道自己想要什么样的旅行。
所以我们解析了用户的旅行特性，发现每个用户喜欢的内容、商品，都是不同，且是特色鲜明的。所以我们的核心需要做到的，就是让这些无数的普通人，都能感知自己的内在，并找到和自己内在适合的旅行方式。而直接放商品、内容都让用户难以理解。所以我们选择了更理想的方式来让用户理解自己的内在──主题。
我对主题这两个字的定义是：一句话描述你想要的旅行。这句话可以是：情侣最爱去、国内必玩地、舌尖上的中国、隐居西子湖畔等等和你匹配的点。
我们初步将主题组织成了灵感、计划、商品三个维度，希望能在玩什么、什么时间去、买什么等旅行决策上，对用户由内而外地产生帮助。
在搭建好了框架后，我们需要的就是更好的承接能力。核心考验的就是内容的生产和算法的组织。
为了让用户看到更好的内容，我们使用了新的后台，可以通过算法，动态选出具有相似主题的无数商品，搭建频道，并进行投放，做到千人千面。
在内容质量上，我们还将继续寻找突破口，进行新的升级。
飞猪2018的首页，我们也在视觉上打破传统，做了很多突破。
突破空间 – 打破「屏效比」的伪命题
在移动端设计的时候，设计师往往被要求利用屏幕的空间。
而业务方和 PD 也非常机智，总能有一些金点子，例如：「区块再矮一点」、「文字再小一点」、「给我多放几排」、「一排再给我多放几个」。
在这样的诉求下，我们的界面设计常常会失去很多留白空间，导致信息密度会很大。而太大的信息密度反而会影响用户的阅读欲望，甚至降低用户的阅读效率。
而随着设计影响力的增加，大家认识到了一个更美的、更能讨人喜欢的界面，不是什么都放上来的界面。
图片 – 大图凸显内容品质
由于以往对空间利用的苛刻，我们的图片常常会被压缩得很窄、很矮，有时甚至无法形成系统的图片比例。而在解决了空间的问题后，我们可以按照1 : 1、16 : 9、4 : 3这样的标准比例来设计图片坑位的大小。这些比例能更好地帮助用户阅读图片的内容。
文字 – 不是装饰，更不仅是内容
随着iOS11的推出，大标题对设计已经产生了较大的影响力。我们在设计首页时就做了大胆的尝试，使用简短有力的大标题和留白作为每个模块的区隔，让用户的视线可以从一个模块自然地过渡到下一个模块。
同时，我们尽量保证内容是简短有力的，这样就可以用更大的字号，减少用户阅读的成本。
色彩 – 来自于旅行的颜色
以往在猜你喜欢中，我们的标签都是用黄色或者黑色底，盖在图上来做的。但这会影响图片的品质，同时较小的标签文字盖在图上，其实并不适合用户阅读。
所以我们优化了方案，让小文字和图片不要重叠，提升了文字的阅读性。同时通过改变标签文字的颜色，让标签成为了商品卡片的点缀。
我们回顾了飞猪首页的设计历史，并看到了2018年我们的探索。这背后伴随的是行业、市场、用户的变化，提醒着我们需要把产品设计得更优秀，来面对无尽的挑战。
2018年飞猪首页的改版，也代表着首页设计模式的转变，从业务争夺入口转型为基于用户体验，设计师、产品经理、业务方、技术团队协同作战的模式。
而作为设计师，更需要始终围绕着用户，在桎梏中跳舞，做出好体验的设计。
2018飞猪首页的改版只是开始，飞猪才刚刚转型，未来我们将更加紧密地围绕用户，提供质的服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
