1. 初识B端产品和C端产品
C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。
在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。
而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。
虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。
2. B端和C端产品的区别
在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。
从使用者的角度来说：
从开发的角度来说：
3. 后台产品常见分类
后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：
1. 初识后台产品设计
说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。
后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。
对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。
2. 后台UI设计工作流程
后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。
在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。
在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。
数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。
3. 制定设计规范的作用
为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。
以下数值为参考，请结合特定产品灵活运用。
统一尺寸
据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。
适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。
页面框架
页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。
栅格布局
栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。
谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。
尺寸设定
一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。
相对间隔
定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。
颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。
品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。
辅助色用于提示其他场景，比如成功、失败、警告、无效等。
中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。
其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。
后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。
后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。
行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。
图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。
除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较高效方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。
按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。
按钮的交互状态包括默认、悬停、点击和不可用。
按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。
规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。
填充按钮之间间距最小为 10px。
导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。
各类导航中的字体大小可进行统一设定。
顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。
侧栏菜单为垂直导航菜单，可以内嵌子菜单。
下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。
步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。
分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。
面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。
徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。
表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。
字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。
输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。
输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。
表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。
选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。
搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。
单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。
开关按钮外框 40*20px，内部圆形 16*16px。
表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、高效的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。
表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。
表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。
行高
表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。
行数
表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。
列宽
列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「...」展示，鼠标悬停出现完整内容（比如详情、描述）。
列数
表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
对齐方式
表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。
详情入口
表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。
包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。
弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。
弹框
弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。
侧滑框
侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。
骨架屏
为某些特定数据提供数据加载等待时的占位图形组合。
全局提示
建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。
警告提示
用不同颜色和样式展示需要关注的信息。
通知提醒
消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。
绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。
页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。
数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。
功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。
考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。
不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。
刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。
在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
搭建设计规范的意义
产品侧：⼀个产品不同分支多个团队完成的时候，可以保证产品团队使用同一份设计规范快速完成产品原型设计。保证可复用模块的交互体验的⼀致性。
设计侧：通过设计规范去解决大部分需求，极大提高效率解放双手，让设计师能去做一些更发挥创意和想象力的设计。
开发侧：形成开发资产，可以提升研发效率，降低维护成本。开发工程师无需再重复开发同⼀个组件，只需要去组件库里调用即可，配合业务逻辑，高效完成界面开发，做到开箱即用。
测试侧：标准化的设计规范，是测试人员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试人员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到工业革命时期，福特创造的流水线生产方式。福特将汽车分解成零部件，再把零部件模块化组装，这⼀创举极大的提高了生产效率。
根据资料显示，T型车是世界第一款大量使用通用零部件，并进行大规模流水线装配的汽车。这种方式极大地提高了T型车生产效率，降低了生产成本。1914年，福特已经可以做到93分钟生产一辆汽车，而同期其他所有汽车厂商的生产能力总和也不及于此。到了1920年代，T型车的价格甚至降到300美元一辆（问世之初T型车的售价仅需850美元，而同期的竞争对手则通常为2000-3000美元一辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原子构成，原子组合构成分子，分子组合构成有机物，最终形成了宇宙万物。
2013年前端工程师BradForst将此理论运用在界面设计中，形成一套设计系统，包含5个层面：原子、分子、组织、模板、页面。
当公司的业务产品逐渐扩大时，我们就需要制定一套完整的设计系统，提升设计和开发的协作效率，统一所有设计师的输出物。
总之，将设计拆分成一些基本元素，例如一个按钮、一个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原子设计理论（组件化设计），区别于整体设计制造的一种新的工作流程。
1. 设计系统搭建—原子
原子是物质的基础组成部分，是构成设计系统的最基础元素。
在界面中以「元素」的形式存在，例如：颜色、文字、图标、分割线、间距、圆角、阴影等。
2. 色彩体系
中后台产品的色彩体系主要分为3类：品牌色、功能色、中性色。
色彩体系
3. 文字体系
B端产品的文字系统设计目标：增强阅读体验、提升信息获取效率，字体是体系化界面设计中最基本的构成之一。
字体的大小、字重、色彩区分体现界面信息的层级关系。
文字体系
4. 阴影、圆角、线条
阴影：在B端界面中，有些特殊的元素会使用到阴影，从阴影中我们可以看出物体距离平面的高度，距离平面越高的物体阴影越大；
圆角：从直角到圆角给人带来从严谨冰冷到柔和亲切的心理感受，在B端界面中，常用2-8px圆角；
线条：分割模块及辅助定位。
5. 后台设计系统搭建—分子
在界面中，分子是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，文字、色块、图标和间距这些抽象的原子产生关联组合成分子：图标、文字传达含义；颜色、圆角传递特性；间距、尺寸定义规范。
6. 后台设计系统搭建—组织
分子+原子组合成更复杂和可拓展的组织（区块组件），如搜索区、卡片列表区、表单区、数据统计区等。
7. 后台设计系统搭建—模板
由原子+分子+组织构成的更复杂更专注页面底层架构，并非具体页面。
8. 后台设计系统搭建—页面
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将页面模板填充真实的文字、图片后形成页面，即带交互逻辑的高保真原型图，真实内容使设计系统有了“生命”。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到一些棘手的问题。
为了解决和优化上述的问题，DesignToken应运而生。它可以解决产品设计和开发过程中的细节、变更和风格一致性的问题，有效提高产研团队设计质量和协作效率。
1. Design Token 介绍
“Token”原本的意思是“令牌，指令”，与Design连在一起指“设计变量”。在工程逻辑中用于用户身份与服务器端进行验证，而在设计体系中，DesignToken则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过一套符合设计师、工程师理解的统一的命名规则，为这些样式参数的定义名称。
2. Design Token 优势
① 设计语义更易理解
帮助设计师和开发建立统一语言，设计方案更加一致。
从下到上的Design Token 命名思路
②主题皮肤一键替换
主题皮肤的替换可以用在两个维度，一是浅色模式和暗色模式的替换，二是不同品牌色之间的替换。我们可以将不同主题的同一个场景下的颜色使用同一个Token命名，达到一键换肤的效果适配不同客户方案。
③设计变更高效维护
替代传统工作流一键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
④设计效果精准还原
代码编辑器自动化提示颜色选择，如不正确则产生报错。
使用Token开发和传统开发的对比
总结一下使用 Token 开发的优势：
3. Design Token 应用流程
第一步：提炼 token 元素；第二步：定义命名规则；第三步：整理 Design Token 资产表；第四步：开发与应用。
Design Token 应用实践
接下来具体说说如何为 Design Token 命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，举个例子：
命名规则示意
为了更好的统一规范，应用 Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
AI 行业的爆发始于2022年 ChatGPT 和 Midjouney 的发布，到现在已经快4年了，整个发展过程用突飞猛进、日新月异形容一点都不过分。
但不管它过去还是现在，发展得有多迅猛，都依旧处于行业早期的开荒和发展阶段，离真正成熟的理想形态还有很长的一段路要走，这是我们首先要达成的共识。
而之所以有这样的结论，原因就是 AI 的发展速度是超过现实世界匹配它的速度的，这造成了一种经济和机会成本上的巨大阻力。
简单来说，我们可以把 AI 技术的应用拆分成上、中、下游三个层，上层是 AI 的核心，主要是算法、大模型，中游是负责运行AI模型的硬件和支撑，即 AI 芯片、光模块 CPO、高速内存 HBM、服务器液冷、特高压电路等，下游即 AI 具体的应用工具，包括 AI 软件、硬件、智能体等。
这是一个非常庞大且复杂的产业链，它们之间是需要相互耦合，才能顺利应用到具体的使用场景中。
简单来说，就是 AI 模型厂商需要根据技术路线和成本选择硬件并购买算力中心，以及消耗海量的电力来训练自己的模型并维持它的正常运转。虽然这些背后的基建作为普通用户可能感受不深，但头部厂商的竞争已经到了白热化的阶段。
比如大模型的开发必然要关注硬件规格和架构，大洋彼岸除了英伟达外，还陆续推出了谷歌 TPU、微软 Maia、英特尔 Gaudi 等芯片，它们代表了不同的技术方案，应用在了不同的模型上。
而因为贸易和地缘政治的因素，国内是无法进口这些高端芯片，所以我们只能自研生产以满足国产大模型的需求。如阿里在自研并应用自家的真武系列芯片， DeepSeek 近期更新缓慢的重要原因就是因为要适配华为的昇腾系列芯片等。
之所以要提这点，是因为 AI 大模型的发展也适用马太效应，赢家通吃。在接近性能和水平下谁家应用的算力、电力成本最低，谁就具备了最大的优势。
而每家大模型厂商都要面临技术路线的选择，并投入海量的成本孤注一掷做基建，很难走回头路。这种发展路径注定会让行业发展充满波折和动荡，会有很多企业倒在半路上，连带着它们提供的产品和服务一起逐渐消亡。
比如文生图的 OG Midjounery，已经无法跟上大厂的技术和训练规模掉队，在今天已经无人问津，而一年多前网上还到处都是用 MJ 生成UI界面设计，UI 设计师要下岗的帖子。
强如 OpenAI，也要应对 Google、X AI、Anthropic、Seedance 的冲击和成本管理失控（GPT5 训练量需要消耗一个中等规模城市1年用电量），也在近期放弃旗下的文生视频工具 Sora。
模型和硬件端都充满了巨大的不确定性，因为技术的发展是需要“试”出来的，总有前浪会被拍死在沙滩上。至于谁会被拍死在沙滩上就不是站在今天的视角上能回答的。
再回到我们今天的主角 Anthropic，这是一家非常务实的 AI 公司，专注于开发有商业应用场景的大模型，是写作、编程等领域中的最佳选择。与之相对的则是类似 ChatGPT、Gemini 这类全能多模态大模型。
因为其模型可用性极高，所以从去年开始付费用户量暴增，在今年初预估年化收益已经超过300亿美元，不仅用户付费率远高于 OpenAI，且运行成本也远比它低。
而这家公司想要年底要上市（估值8000亿美金），产品矩阵的拓展就成为非常重要的资本策略。通过发布 Claude Design，能很好的和 Claude Code 实现联动，完成使用 AI 开发软件的闭环。
至于现阶段 Claude Design 够不够用不重要，毕竟故事和逻辑是成立的，作为初版它也有后续升级迭代和优化的空间。在我们目前的试用中，它的生成效果也就那样，但消耗的 Token 量（你最好确保自己有个足够鼓的钱包）……
Claude Design 有新上市的光环风头正盛，那是否还记发布也还不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。
再往前是否还记得使用 StableDiffusion 训练 Lora 和 Checkpoint 的工作流？
工具一直在更新，即使今天还很粗糙。但用发展的眼光看问题的话，终有一天它生成的质量会足够高足够智能足够可控，甚至通过脑机接口 BMI 实现所想即所得的水平（又到了做梦的时候）。
但是，那天是什么时候？
以及，和你现在设计的界面有什么关系？
作为设计师一定要搞清楚的逻辑，就是 AI 生成界面和图像的过程，只是一种工具的发展和进步，提升了设计师的设计效率。就像人类发明了电脑和软件，取代了尺规作图，同样也大幅度降低了设计的效率和成本，但设计师这个岗位并没有消失。
因为使用工具的人之间的差异，会直接影响最终的输出效果，就像用同一个 AI 生成工具你可能就是做不出网上高赞帖子的案例，都用美图秀秀不用 PS 去 P 图你也 P 不过有一定专业积累的摄影师。
而且任何工具使用都有门槛，就一个简单的 Claude Design、Google Stitch 安装和使用都需要学习和适应，生成结果还要做大量的调节和校准，这些就不是工作量，老板和产品经理也一定能闲得每天学习新工具并且直接自己干？
我相信有很多公司现在都很热衷于拥抱 AI，强行推进 AI 的工作流，从企业战略和发展的角度来讲是能够理解的，但在实际执行层面上却不会像想的那么美好。其中最大的问题就是前面提到的整个产业的不确定性，产品还都有各自的局限。
每个团队在搭建 AI 工作流的时候需要做技术的选型，以及围绕自己的实际生产场景优化工具的使用方式。往往为了一个简单的工作结果就要耗费大量的精力去搭建工作流，而这个工作流很可能是一次性的，因为之后的工作场景发生改变这套工作流就用不了了。
有些同学可能心态好点觉得这种过程可以收获宝贵的经验，但最不幸的，就是工具的升级和更新（甚至关闭）可以直接颠覆掉原来的做法，让原先的成果毫无意义。
在我朋友中普遍得到的反馈，就是在稍微复杂的专业场景中，强行适配 AI 的结果往往只有增加工作量，原先目标的降本增效，实际导致了更长的工作时间和更晚下班，从去年到现在在不同 AI 工具中做研究疲于奔命。
换个角度思考，其实就是工作过程变成今天用 PS，明天用 Figma，后天用 Excel 或 PPT 进行设计，每一阵子换个工具设计相同的东西，而它们又不能解决设计过程中最复杂的决策部分。
也就是我们一直在使用充满不确定性的工具去寻求相对确定的结果。
这就是今天 AI 工具在 UI 行业中应用的真相，不管我们怎么用逻辑还是格局去判断未来 AI 要实现一切，但起码不是今天和最近，就是变得更强了，也依旧需要有人去操作和控制。
而我们现在要做的是关注最终输出的结果，而不是和别人炫耀 Figma 用的好，还是 Sketch、XD、即时、Pixso 用的好。等到市场竞争格局基本确认，通用的工具也普及以后，再去掌握和学习也不会低人一等（门槛不会高到哪里去）。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
谈论 AI 就绕不开大模型，它是 AI 技术应用的核心。
简单解释 AI 大模型，就是一个通过特定方法和大量数据训练出来的 “自主化程序”，这个程序可以根据用户输入的指令自己做出 “判断和思考” 后再进行回复。
传统程序虽然也可以执行用户的指令，但回复的内容和方式不会超出一开始预设的范围，非常有限。
而 AI 大模型则大大拓展了这个边界，我们不用提前预设各种条件和逻辑，它就会自己去理解问题再决定给出什么结果。
当然，这个边界只是不能生成图片(截止到2026年初)。而 Google 开发的 Gemini 大模型则是多模态模型，可以生成图片和视频等内容。
不同模型会有不同的表现和优劣，但因为大模型的开发需要尖端的技术和庞大的规模（训练），门槛极高，所以市面上主流的大模型数量并不多，可以简单分为国内和国外两个阵营。
国外的主流大模型包括 OpenAi 开发的 ChatGPT，Google 开发的 Gemini，Anthropic 开发的 Claude，xAI 的 Grok 等。
国内的主流大模型则包括字节开发的豆包，阿里开发的千问 Qwen，深度求索开发的 Deepseek，月之暗面开发的 Kimi 等。
因为前面说过大模型的局限性，所以为了应对不同的应用场景，团队就会将它们裂变出不同的版本。比如千问既有 Max 语言大模型，还有 Omni 全模态（文字、图片、音频、视频）大模型，针对处理问题的难易度又分成了 Max、Plus、Flash、Lite 等版本。
完整的大模型体积和参数都非常庞大，需要部署到专属的算力中心，并通过云服务来实现用户的访问和使用。也就是需要联网使用，但因为国内网络服务的限制（不可抗力），我们无法通过国内电信访问国外的主流大模型。
虽然说国内大模型的水平在这几年突飞猛进，但离国外的大模型还有一定的差距，在实际工作场景中多数应用的也是国外大模型，所以访问它们就需要大家自己发挥主观能动性解决了。
顺便再解释一个基础的问题，大模型除了远程访问以外，也可以在本地进行安装。部分团队（如千问）会在网上开源自己的大模型供其它人下载和使用，当我们下载到本地后就可以用 GPU 来运行它。但因为大模型对性能的要求极高（旗舰显卡起步），所以本地运行的效果要大打折扣。
而一些企业内部或行业专属的大模型，往往都是使用这些开源大模型进行二次训练和调试后的结果。还有一些针对特定硬件（如手机、眼镜）和特殊应用场景开发的小模型，就暂时不在我们的讨论范围之内。
前面讲过大模型可以类比成一种 “程序”，且它还是后端服务器上运行的程序。想要对这个程序实现命令的输入并返回它处理的结果，就需要应用前端的工具来实现。
比如我们打开豆包的官网，就可以使用这个网页对豆包大模型提出问题和要求，然后网页上就会返回它处理后的结果。这个网页就是使用大模型的工具，而这只是 AI 工具的其中一种形式，还可以是本地应用程序、手机 APP、小程序、硬件定制系统等等。
我们大多数人开始接触 AI 大模型，都是从这些官方的工具开始，它们最基本的功能就是根据指令返回文字或图片信息，我们会把它们当成是一种可以对话的人工智能客服。
但实际上它们可以发挥的作用远不止于此，比如帮你整理本地的文件夹清理重复的文件，帮你自动修图并完成动态相片的剪辑，帮你编写程序并自己运行和检测等等。想要实现对话以外的其它功能，就需要借助特定的工具才能实现。
所以除了最基础的对话工具外，行业还衍生出了很多激发大模型潜力的 AI 工具。它们可以借助大模型完成程序开发、视频剪辑、操作托管、热点整理、消息推送等等。
到这里我们就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具体表现和应用形式。
我们更进一步认识 AI 工具，就可以把AI工具分成官方工具和第三方工具两个种类。
官方工具就是 OpenAI、Google 等大模型企业自己开发并绑定自家大模型的产品，而第三方工具则是其它团队开发，再接入到大模型进行使用的工具。
比如本地聊天机器人 Cherry Studio，它本身只是个简单的聊天对话工具，可以自己创建对话角色/助手，但需要接入大模型以后才能进行对话。还有著名的AI编程工具 Cusror，只有接入大模型以后，它才可以实现 AI 编程和代码管理。还有前阵子火遍全球的龙虾 Openclaw，也只是个本地工具，需要接入大模型后才能识别本地的文件和执行命令。
官方能提供的 AI 工具与服务往往很有限，所以在真实项目流程中，我们就会混合使用多种工具来完成工作。就像以前做一套项目除了用 Figma以外，还要结合使用 Adobe PS、AI、C4D、AE 等软件。
而第三方工具和官方不同的是，官方工具默认连接自家的大模型，用户直接登录就能使用。而第三方工具要接入大模型，就需要进行额外的配置，也就是添加大模型的 —— API。
API 就是接口，是前端工具连接后端服务器的通道，而这个通道默认是上锁的，还需要提供对应的密钥（API Key）才能正常访问。
部分工具会自己接入各大模型的 API，用户只能选择它提供的模型，并只需要对这个工具进行付费即可。
另一部分工具则需要用户自己选择模型和配置 API，需要我们访问大模型的 API 开放平台进行申请，然后再将它们生成的 API Key 填入到工具中完成连接。
API Key 就像是一个电话号码，当我们申请完并进行使用，就会产生一定的 “流量”，而 AI 产生的流量用专业术语形容叫词元 Token。
使用 API 完成的任意 AI 服务，都会消耗 Token，且因为 AI 的计算成本极高，所以主流大模型都会针对 Token 消耗量进行收费。就像电信运营商一样，既有包月服务附带一部分流量，超出部分还要按量计费。
在实际的 AI 工具使用过程中，Token 的消耗是极其巨大的，往往会造成沉重的成本，而这个市场也遵循一分钱一分货的真理，越好的大模型价格就越贵。以最适合编程的大模型 Claude Opus 为例， 一个程序员高频使用消耗的 Token 账单可以从数千到数万元不等。所以我们也会从性价比的角度出发，来搭配不同的模型进行使用。
总结我们应用 AI 的本质，就是通过工具来操作大模型。而工具的作用不同，大模型本身的特性和价格也不同，就导致我们在面对一个复杂的任务时，需要选择多种 AI 工具和不同大模型来实现。
学习使用 AI，和传统的单一软件教学不同，不是只学会某个工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通过组合它们来实现自己目标的方式。这不是设计或产品思维，而是工程思维的具体应用。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
做UI/UX设计的同学几乎每天都要和切换类组件打交道，但很多人总会在开关、复选框、单选按钮之间踩坑——要么用错场景，要么给用户造成认知混淆，甚至引发操作失误。
苹果HIG (人机界面指南) 里明确把开关、复选框、单选按钮这三类，都归为「切换开关」组件。它们的核心共性是让用户在对立的状态间做选择，通过差异化的视觉形态清晰区分选中/未选中的状态。
开关是用来瞬间切换单个功能/设置的开启/关闭状态的组件，一次只能控制一个设置的开关，工作逻辑和我们家里的物理电灯开关完全一致，能让用户一眼看清当前的生效状态。
开关的结构非常简洁，核心分为3个部分：
如果要添加辅助图标，必须选表意清晰、强二元对立的样式，千万别用含义模糊、没有明确正反属性的图标（比如月亮、编辑图标），用户没法一眼对应开/关状态。
开关的核心交互逻辑是操作后立即生效，不需要用户额外点击确认按钮，切换状态时，可配合手柄尺寸的微动效强化操作反馈。
开关必须和描述控制功能的标签搭配使用，标签要简洁直白，不要把文字放到开关内部。这样会压缩视觉空间，还会破坏组件通用性，增加用户识别成本。
复选框的核心定位，是支持用户对一组关联选项，做单项或多项的选中/取消操作。
记住一个核心原则：当用户可以在一个列表里选择多个选项时就用复选框，不用开关或单选按钮。单选按钮的语义是「请选其中一个」，而复选框的语义是「可以选多个，也可以全不选」，二者的底层逻辑不同。
复选框的结构清晰，核心就是选择容器+选中状态图标，通过勾选/未勾选的视觉差异，直观传递用户的选择结果。
如果选项列表较长，建议添加「全选父复选框」提升操作效率，它的交互逻辑有明确的行业规范：
处理一组有关联的多选项时优先用复选框，而非一堆独立的开关。
一方面，复选框能天然传递「选项之间互相关联」的语义，另一方面，它比开关占用的视觉空间更小，页面会更整洁有序。
单选按钮的核心是互斥单选。在一组选项里，用户有且只能选择一个，选中新选项后之前选中的选项会自动取消。
它的语义非常明确：这一组选项里，「你必须、只能选一个」和复选框的「可多选、可全不选」形成了清晰的边界。
单选按钮的结构核心是选中/未选中的状态图标+对应的选项标签。行业通用的视觉规范是：用实心圆点表示选中，空心圆圈表示未选中，保证用户的视觉识别度。
不能打破互斥单选的核心逻辑，更不能让单选按钮出现布局重叠，否则会完全颠覆用户的固有认知，造成操作混乱。
如果选项数量较多、屏幕空间有限，可用下拉菜单替代单选按钮。
但要注意：下拉菜单需要用户多一步点击展开的操作，会增加交互成本，也没法让用户一眼看到全量选项，降低认知效率。因此选项较少时，优先用单选按钮。
单选按钮优先垂直排列，不建议水平排列。
垂直排列时每个选项的图标和标签对应关系更清晰，用户不会看错；水平排列不仅容易让页面拥挤、可读性下降，还会破坏布局一致性，在响应式适配中也更容易出问题。
前面讲了每个组件的细节，这里给大家整理了最简使用规则，设计时直接对照即可。
开关、复选框、单选按钮，都是设计里最基础、最常用的组件。设计时要先看场景、定语义，再选对应的组件，而不是凭感觉、看颜值随便乱用。
当然，我们也会看到一些特殊的设计案例，比如iOS在深色模式的选择里，用了圆形复选框，和我们今天说的常规用法不一样。这种情况，要么是为了整个系统的设计语言统一，要么是有特殊的产品考量，不建议盲目照搬。对于设计师来说，先搞懂这些基础组件的用法、可用性底层逻辑，才是做好设计的根基！
转载自 优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
大家一定经常听说 UI 设计师需要具备产品思维，但又不知道产品思维具体是什么，尤其是很多同学只把产品思维当成是产品经理做需求的能力。
兰亭妙微UI设计公司：今天我们的主题就是分享产品思维的具体思考方式和应用
产品思维一句话总结，就是——通过规划产品形式来解决产品问题的思考模式。
这里我们先明确 “产品问题” 是什么，它是一个非常宽泛的概念，可以说所有产品相关的问题都可以是产品问题，包括但不局限于功能、交互、体验、视觉、技术、服务等领域。
在产品的研发和运营过程中，产品团队总会发现和积累出各式各样的问题，比如功能太简陋不能满足用户需求、交互太复杂用户用不懂、逻辑太复杂技术实现不出来等等。这些问题当然需要被解决，而解决的方式有两种，一种就是直接使用相关领域的 “技术方案” 解决，另一种就是提供新的 “产品方案” 来解决。
这里技术方案是泛指，指产品以外的其它类岗位使用自身专业技能来解决问题的方案。比如用户觉得页面信息混乱，设计师通过布局、尺寸、间距、色彩的视觉调整，就能解决这个问题。或者某些交互设计需要非常复杂的编程方案，前端自己通过钻研技术，来实现这个效果。
比如下面这些就是纯粹的视觉优化方案：
产品方案则是指通过制定或调整产品的功能、服务、表现形式，来解决相关的问题。比如上面觉得信息混乱，不再是改设计，而是直接优化和增减字段信息。交互设计开发起来太难，那就直接调整产品功能，分拆交互步骤降低开发难度。
比如下面这个就是对产品的形式做出了一定的调整：
两种方案各有优劣，但在真实项目中，产品是先于设计和开发的，好的产品方案不仅能提高产品的实际表现，同时还可以大大降低技术实现的成本。所以在解决问题时，团队必然会倾向先使用产品思维来创建产品方案，然后再去实施。
总结起来，产品方案就是涉及对产品本身的调整方案。原则上，这种方案是由产品经理提供，设计师只要跟着产品的要求去做设计就好了。
但在真实项目中，产品不可能考虑到所有问题，尤其是和体验、交互、视觉高度相关的部分。
每当我们每做界面或功能时，碰到所有和产品有关的问题，都需要反馈给产品经理再等它做决策，那么他必然是处理不过来的，项目肯定也做不下去。所以设计师需要在自己力所能及的范围里，尽量自己去解决这些问题，提高项目整体运转的效率和质量。
尤其在一些对视觉要求不是特别严苛的环境中，UI设计的成果往往“能看”就够了，领导或者面试官对设计价值的定义就不会在视觉上，往往会聚焦在产品方案上。就是因为设计师自己有产品思维具备解决产品问题的能力时，可以极大的填补产品经理层面的空缺，还可以提高产品质量和研发效率。
但是，产品方案不是只提供解决方案就行了，还需要合理、有效，所以就要综合各方面的制约与影响，才能输出优质的结果，这就是一个非常综合性的分析过程，我很难用简单的语言进行归纳和总结。
所以，下面就通过前面的案例，来展示产品思维的具体思考过程
在原有两步路路线详情页中，顶部的大图和信息区域是我重点调整的区域之一。
之所以重点关注，不仅仅是因为它 “不好看”，而是这个大图的缺陷很多。作为浏览用户，图片的关注度不是没有但绝对不是重点，往往只是草草快速浏览一遍就够了，但现在的轮播形式就没办法高效看完相关图例，且占据的篇幅又过大，挤占下方的其它关键信息点。
当然也有同学可能会觉得看图怎么会不重要，你们看小红书找旅游地不就是被图吸引然后再点击进入做出选择的嘛？
不排除这种情况是存在的，但这不是小红书，这是一个比较硬核的徒步社区，不是给用户看大图就有问题，而是在发布用户这一侧，硬核优质的分享者（是去走或跑几十公里不是到打卡点自拍）大多不具备那种拍“美照”的能力，最终呈现的路线图景多数就是随手一拍的质量，浏览用户压根没必要仔细欣赏。
再进一步考虑，有很多经典线路本身景色就不是特别好，尤其是偏越野跑的线路往往杂乱又逼仄，照片带来的作用更多是一种对路线的概括（功能性），而不是作为吸引人的美照。在这个限制下面，大篇幅展示封面就不会获得常规以图片为导向的应用的结果。
这些就是针对问题的分析，而这里面既有体验的问题，也有产品的问题，甚至还有运营的问题，但具体去区分它们没有意义，只要它们不是纯粹的视觉问题我们都可以统一归纳为它们是产品问题。
基于这些问题去思考解决方案时，就可以问自己一个简单的问题，是不是只做视觉调整，如优化布局、更改尺寸、添加投影、增加圆角之类操作就能解决。如果不能，那就要涉及到对产品形式的调整了，也就是涉及功能、信息的改动。
这里我们先看改完之后的结果：
为了减少图片的面积和提高观看效率，我选择缩小图片并做成左右滑动的列表，把发布用户信息做到上面，合理利用空间且突出收藏、分享等操作。但光改这个依旧只是一个简单的视觉调整，缺乏深度和细节，没有什么解释的空间。
所以再往深一点挖掘，一屏只能展示一张图多一点，理由不是图片比例的问题，而是因为用户发布路线最小可以添加的封面图只有一张。如果只有一张，那么右侧留空显然是不能接受的，这样的方案也就做不了。而且只展示图片实在是有点不够看。
我会再想到链家之类看房软件的顶部区域，除了展示摄影图以外，还会添加固定的房型图，应用了多种图片类型。而在两步路中，如果发布路线，除了封面图外，路线图本身肯定也是能直接生成图片的，可以生成类似跑步软件的那种路径图。
顶部图片也可以不止有用户自己拍的摄影图，还可以添加路线生成图，同时这张图因为是静态的，就可以在生成过程中添加一些数据信息或标注内容等，和下方可交互的地图路线展示区分开来。并且在下方区域添加一个类似电商中 “商品图/视频” 切换的标签快速选择。
甚至再仔细想想，当我进入路线详情页时其实更关注的是路线本身，第一张图直接放路线图而不是放在最后，可能对相当一部分用户来说也是更实用的做法。但这么做就有点激进，需要给出初步设计以后再套一些真实内容做出页面看效果，这就是内部评审或用户测试要做的事情了。
到这里这个模块基本解释的就差不多了，而我们为了优化它已经做出了一些超出视觉设计外的变更，且需要考虑尽可能多的细节，照顾到方方面面，这就是产品思维应用的过程。
再往下的路线模块改动也同理，我就不多做展开，你们可以自己深入解构一下：
设计过程中对产品思维的应用，不是成为产品经理构思新的功能需求，而是维持原先目标的不变的情况下，给出新的、更完整、更合理的产品方案。
而产品方案当然不是你们想怎么输出就怎么输出，这些方案还需要再后续经过团队的评审（我要验牌），也就是说服其他人同意你的设计方案。而光看图肯定不够，所以要进行解释说明，从一开始的问题分析出发，到如何完成这个结果的考虑过程。
在这个场景中只看设计图效果是最没价值的，如果你能说服团队通过，那这套方案就是好方案，如果不行，那不管你想的如何天花乱坠还是视觉做得多花里胡哨都没用。所以方案构建逻辑性是非常重要的，因为没有逻辑就没有说服力。
产品思维本身就是一种比较抽象的思维，提升这种底层思维能力需要通过自己大量的积累。我们后续还会陆续做一些相关的案例分享（这应该才是最有用的）。
同时，面对真实工作场景里产品思维很多时候会沦为一种过稿的武器，是一种职场“诡辩”的技术，毕竟上线有没有用无所谓，领导、客户觉得好，才是真的好……
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
列表页就是以展示列表 List 为主的页面，所以我们需要先理解列表是什么。
列表源自编程术语，是一种数据结构，即按照线性顺序排列的数据项集合（有限序列）。说人话，就是按照一定顺序展示数据的形式。
我们再用UI设计的角度来理解它，可以把它分为 “列” 和 “表” 两个部分。我们先理解表，表就是“表格”的意思，这也是计算机中存储数据最基础的形式（关系型），我们在页面中看见的多数内容都以这种形式记录。
列则是动词 “排列” 的意思，用一定的逻辑、方法、顺序将表格排列出来。这种排列是要经过设计和调整的，不会和原来的表格完全一致。
也就是说，列表设计是种对表格的转换，是种对数据的可视化呈现形式。
之所以要强调这个，就是因为想要做好列表设计就离不开对数据的理解，一个专业的列表设计不是做一个好看整齐的重复性组件，而是将数据表格清晰有效的反映出来。
数据表格对列表的影响包含下面几个要素：
1. 属性字段的影响
属性字段就是列表内要放的具体信息点，也就是数据表格中的表头。比如一个商品列表中，要放商品图片、商品名、品牌标签、节日标签、营销标签、销售量、好评率、价格、原价……每个独立的信息就是一个字段。
而一个真实的项目列表内，往往会包含非常多的字段，所以开始设计前要先搞清楚数量和明细，以及它们各自的含义。一方面是设计中不能有字段的缺失，另一方面是字段中包含对应的权重、分类，是设计前必须要确定的信息。
比如下面的列表内容，就包含了大量的字段信息，而这些字段既有权重的强弱，也有分类的整理，是经过设计师的专业分析和设计的结果。
2. 属性值的影响
属性值就是每个属性具体放什么内容，有什么限制。比如商品名，肯定是放商品名称的文本，但文本一般是什么样的，最长支持多少字，这些就是属性值的基本信息。
属性值在开发环境中只能是文本（字符串），但在设计中这个值就不一定只是文本，可能还是图片、图标、符号等内容，中间会有转化过程。比如用户列表中，用户有不同的 VIP 等级，数据中记录的等级肯定是文本性质的，而展示出来却可能是专属的黄金、白银、青铜图标。
属性值的认识同样非常重要，决定了列表的设计是否准确，符合产品的规划。
3. 字段状态的影响
最后字段的状态，就是字段展示的逻辑，简单解释起来就是字段什么情况下出现，什么时候隐藏，出现的时候显示什么内容这三个问题。
比如美团的列表中，有美团商家列表中，运输标签有美团快送、专送、全城送、商家自配等不同类型，而下方的配送时间也在样式上会有差异，这就是对字段状态的表达。
而越是复杂的列表，包含的字段状态差异就越大，往往会直接影响列表的样式，所以设计过程中就要体现尽可能多的样式状态，也就是设计它的不同变体，确保在各种场景中它们能正确显示。
想要设计好列表，就要面对上面提到的三个问题。优秀的列表不止是一种视觉结果，而是一种能兼容相关数据展示的容器规则。
接着我们来理解列表页的主要框架和布局形式，入门它的基本设计要点。
首先列表页不是只有列表一种组件，多数还会包含对列表数据进行搜索、筛选、排序的组件。
除此之外，部分重要的列表页还可能在顶部放运营模块，用来展示一些热门推荐内容或单纯作为广告位。
运营内容放顶部且篇幅较小是因为页面形式的限制，不能在顶部放太多内容让列表被顶到第二屏去。所以目前的设计为了更好的塞入内容，就会选择在列表中插入其它数据，比如纯运营广告，也可能是内容推荐，或者是模块入口等。
总结起来，列表页的主要框架就是顶部搜索栏、特殊模块、筛选排序栏、列表区域的组合。
而最关键的列表区域，可以使用不同的列表来展示信息，我们可以简单分成“单列”和“多列”两个布局大类。下面我们就分别对这两个分类类型做个解析。
1. 单列列表
单列列表就是一行只有一个数据对象的列表形式。而单列列表模式中还区分两种类型的列表，一种是引导型，一种是展示型。
引导型就是引导用户点击进入查看详情，比如商品列表、酒店列表，是为了让我们在列表中找到感兴趣的内容点击进入详情页面。
而展示型，就是直接在列表中展示主要信息，让用户直接顺着列表的顺序查看主要的内容，而不是进入到详情页查看。最有代表性的展示型列表，就是朋友圈这类动态列表了。
单列列表对单个数据对象的展示空间较大，但是单屏浏览数据量就会减少，适用于数据对象字段较多的场景。
2. 多列列表
多列列表就是一行会展示多个数据对象的列表形式。通常移动端的多列列表只有两列，在少数情况下才会出现三列。而两列模式中，也包含两种布局形式，一种是等高展示，一种是瀑布流。
等高展示就是列表内数据对象的高度是保持一致的，每个数据对象的尺寸统一左右对齐，适用于字段类型、内容相对统一变化小的场景。
而瀑布流，则是数据对象高度不一致的多列布局形式，相对更灵活适用面更广，适合字段类型、内容变化较大，不同数据对象的差异极大的场景。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我想这是很多新手设计师都有过的感受，明明懂了很多设计知识，但到真正设计的时候还是会出现迷茫或者没思路的情况。
造成这种情况的主要原因是，虽然我们每天看了大量的设计文章或者技法，但没有第一时间应用到设计实践中。
换句话说就是，我们每天看的设计内容可能跟我们实际做的工作需求不够搭边，这样就很容易造成拿到一个新需求后没有想法，感觉之前看了很多设计图或者文章都没派上用场，不得不重新找竞品找参考才能展开设计。
就像学了一节新课程，如果没有第一时间做配套的练习题，等过了一周再做练习题发现根本不会做，因为之前学的课程早都忘得差不多了。
北京兰亭妙微UI设计公司：下面展开讲讲如何避免这种情况，建立自己的设计成长体系。
对于设计技法vs设计原理的问题，我觉得对于设计师来说同等重要，但具体要结合你现在的工作情况找到一个侧重点。
举个例子，比如当前的工作偏UI视觉多一点，需要常做一些运营活动图，那么日常就可以多侧重练练技法，多做视觉练习；如果当前的工作偏向纯UI，那么就可以多重视设计理论，多思考产品规划、交互流程、用户使用体验等等这些产品交互相关的知识，用理论支撑起我们的设计方案。
这样既能保证我们能很好地胜任当前的工作，还能让我们在持续的工作中不断有进步有提高。
对于平面能力差的问题，我觉得平面设计能力是基础。可能很多同学在大学时有过这种体验，无论你的专业是视传、数媒、产设，甚至摄影，都需要经历平面设计这一关。排版、手绘、字体、后期合成等等这些平面能力需要我们不断练习实践。
现在AI绘画工具的出图效果都不错，大家可以好好利用起来辅助出图，补齐UI设计师在平面设计上的短板。
总的来说，平面能力要多练习多积累，日常工作中还是建议灵活运用“AI+设计”的形式，也能打造出好的效果图，没必要为了某个视觉效果死磕PS而浪费太多工作时间。
针对看了很多设计但做需求还是没想法，以及到底怎么学UI、建立自己的设计体系这些情况，我结合自己的经历总结一下，希望能对你有帮助：
首先还是多积累，多看好的设计，审美需要一直提高。比如每天早上我都会拿出半小时的固定时间去Pinterest或者花瓣里去看各种各样的设计图。
需要注意的是，这里的看也分为两个方向：一个是日常看图，一个是专项看图。
其次，每天看的图很多，就需要把图都整理一下，这个时候就需要建立一个系统性的设计素材库。
拿花瓣举个例子，在花瓣里可以创建各种各样的分组。
比如APP是一个大的分组，在这个APP的分组里面可以建各种各样的画板，像APP-首页、APP-导航栏、APP-标签设计等等；再比如网页设计是一个大的分组，我可以在网页设计底下创建网站首页设计、网站登录页设计这些画板。
这样整理的好处一个是让我们每天看的图更加清晰有条理；另一个是有了分组/画板后，接到新的设计需求后就可以直接定位到某个分组里，看看我们之前创建的画板里有没有类似的一些参考图，省去了从0~1再重新找参考图的这种过程。
而且看到自己采集的参考图突然派上了用场的过程，对于设计师来说特别棒！这说明我们每天看的内容有价值，不只是在收藏夹里吃灰。
比如要设计一个UI标签，我们可能需要反复去创建的素材画板里看各种各样的标签设计，这样不止一次地反复看收集的素材，看的多了之后我们就对这些素材图特别熟悉，这样就不怕后面的设计再没思路。
现在每天网络上都有特别多的零碎信息，所以这种清晰的整理是一个特别有效的成长方法。经过这种「先整理再回看再设计」反复练习的过程，会有一个更清晰的设计体系和工作流，设计能力肯定会有一个质的提升。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
我们的世界正在快速的数字化，这也是为什么UI界面在近10年来一直都是热门话题，同时，这也意味着，作为设计师的我们比以往任何时候都要专注打造高素质的UI，以及让用户欲罢不能的用户体验。我们需要好的UI和优秀的设计。
兰亭妙微设计公司，一直在追求好设计，优秀的设计，让人难忘的设计，能够脱颖而出的设计。我们相信设计是有迹可循的，有成熟的、可考量的标准来衡量，它甚至可以作为我们设计的方向而存在。
从网站到手机，从家用的恒温控制器到汽车的控制面板，所有的这些UI构成了我们的日常数字体验。越来越多的屏幕和日渐庞大的数字化内容，使得我们对于优质的UI设计越来越渴望。
虽然好设计的原则是老生常谈，但是我们还是要经常总结，结合自己的设计，三省吾身。
优秀的UI界面是隐形的，华丽的装饰和不必要的元素都已经被剔除，简单直接的页面逻辑和直观必要的元素构成了这样的UI界面。设计UI的时候，你在添加任何元素的时候，都最好问一下自己“这个功能是否会影响用户现有的任务？它是否真的必要？”先将你的UI内的元素限定为必须的，专注于核心的用户体验。
如何设计一个简单的UI界面，Maaemo 的产品在这方面就做的很突出。这个挪威餐厅的网站上，你看到的是预订的表单，其他次重要的内容被隐藏在汉堡菜单当中，避免引起混乱。用户不用浪费时间去来回浏览扫视，直接进入预订的环节。
清晰应该是所有UI界面都具备的基本属性。请记住，你的UI界面存在的目的是让用户能够更便捷地同你的系统进行交互，为此，它需要能够清晰地同用户进行沟通，如果用户无法弄明白界面的使用，会因此感到沮丧。
保持清晰的UI界面设计并不难，首先要保证一点：按钮和操作的标签文字指向性要明确，保持清晰的信息传递，让用户能够快速弄明白交互的指向性。
这个时候，你也别忘了开头的“简单”的原则。尽量不要在UI中使用冗长、复杂、难以记住的文本标签，你的用户不会花费时间去读，也不会去欣赏它们，越复杂越“独特”，就越会影响整体的用户体验。
一个词能解释清楚的事情，千万不要用更多的语言去表述。保持简明能够让你的界面更加清晰，节省用户的阅读时间，降低认知疲劳。可能精简出直观又易于识别的文本很难，但是做好了是很有价值的，对于整体体验的加分很多。
不论是哪个设计师，都会希望自己的设计能给用户带来一致的体验的吧？一致的设计能够让用户对于你的设计模式更快认知、熟悉，并且在此基础上快速适应整体的体验。人们渴望规律，追求一致性，也希望在实际操作中验证自己所“发现”的一致性。
所以，用户是期望借助自己习得的经验，来探索更多的内容的，而探索能否有效就得看设计的一致性是否够好了。在整个UI设计中保持一致的语言、布局和设计规律，整个用户体验会显得更加“通透”。
用户体验设计的一个重要的目标是要让用户能够凭借直觉来操作UI界面。那么，怎么才能让用户更加“直觉”地完成交互呢？用户要能够自然地理解其中的内容，操作自然就不难了，也就是说，你要让用户对你的界面产生“熟悉感”。所以，你要充分利用用户对于你的设计所熟悉的部分。
当用户对UI界面抱有熟悉感的时候，通常意味着他们对于这个设计有所了解，甚至知道怎么交互，他们明白操作之后大概会发生什么，也知道哪些事情不应该做。所以，如果你能利用好用户对于交互和界面模式的熟悉来进行设计的话，能让你的用户更快上手操作。
汉堡图标就是这样的典型。现在当用户看到汉堡图标的时候，就会明白这代表着菜单。当用户在界面中找不到预期的功能或者服务的时候，会主动地寻找汉堡图标，希望能在其中找到需要的东西。
Born Shoes 这个网站也充分利用了这一点，将熟悉的图标放在熟悉的位置，用户上手就知道怎么用了。
UI界面的视觉层次是非常重要且常常被忽视的一个属性，它能够帮助用户专注重要的内容。如果你想让界面中每个内容都看起来很重要，那么只会单纯地让信息过载，让每个元素都分摊用户的注意力，最终只会让整个设计显得混乱不堪。不同尺寸的字体、不同的色彩和不同的控件最终应该是相互搭配，构成层次，有轻重缓急地呈现给用户，将复杂的结构简单化，帮助用户完成任务。
Budnitz Bicycles 的网站就很好地使用色彩营造出视觉层次，吸引用户关注到网站的特定部分。网站中的按钮在整个设计中显得非常显眼，引导访客点击。
你的UI界面最终的目标是要带着用户完成任务，达成目标，或者去他们要去的页面。不同的流程要求不同，但是最优秀的UI设计有个共通的特征：高效。提升界面效率最有效的方法是进行任务分析。
熟悉用户的流程，了解用户的目标，然后在此基础上尽量简化流程，使得用户能够便捷快速的达成目标。在此过程中，仔细考虑每个功能细节，规避可能存在的漏洞，帮助用户快速完成用户流程。
Mulberry 在他们的活动页面上提升了用户效率，帮助用户更快地挑选节日礼物，降低繁复的搜寻和思考过程。
UI界面响应牵涉到体验的方方面面。首先，UI界面的响应应该是迅速的，它背后的整个系统应该能够快速反应，否则不够快速的响应会让用户感到沮丧，缓慢的网页加载过程会令人抓狂。
事实上，如果你的网站没有在3秒内加载完成，就会开始有访客因此而流失。根据 Kissmetrics 的统计，超过40%的访客会在加载速度超过3s之后而离开，而加载时长的增加，更多的用户会随之离去。
此外，UI界面的响应是否合理，是否足够“人性化”。当用户点击界面元素的时候，用户希望知道他们的操作是否成功，而这个时候，合理而快速的界面反馈就显得很重要了。比如，当用户点击一个按钮，按钮的状态变化，又或者界面加载时的加载进度条，都能够让用户明白状态的改变，以及他们操作的结果。
界面的合理响应让UI更为富有人性，减少错误的发生，并且让交互进入真正良性的循环。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微UI设计公司：你会发现现在的移动端UI界面中极简风的设计越来越多了。极简主义设计风之所以能够如此的受欢迎，很大程度是源自于它对于设计、开发的友好，它不仅让APP的加载速度更快，让APP对于不同屏幕的兼容性更加优异。与此同时，越来越多的用户也开始青睐极简风的设计，极简风的UI界面不仅漂亮，而且在可用性上也非常的突出：它易于导航，并且具备强大的视觉表现力。
降低用户完成任务之时所需耗费的精力。
你为APP的每一屏都应当承载一个对用户有用、有价值的交互或者任务，一次完成一个任务，且只能有一个任务，其中应该不包含超过1次的行为召唤（CTA）。这样的设计能让用户更轻松地学习，更便捷地使用，在设计上也更容易添加删减以及构建。
以Uber为例，Uber 清楚地知道用户的目的是乘坐出租车，所以，应用程序不会一次给用户太多的信息，会根据地理信息自动检测用户的位置，而Uber 提供给用户的每一个界面的交互都是单个的，用户只需要选取位置，下单即可。
内容即是界面。
专注于内容，并且尽量删除不必要的元素，这样可以缩短用户集中注意力的时间，用户将会更快地被引导到他们正在搜寻的内容，而内容本身正是一个隐形的界面。最典型的就是Google 地图。在重新设计的时候，Google 地图删除了所有不必要的面板和按钮，地图本身就是最好的界面。
使用负空间让重要的内容吸引用户的注意力。
留白，或者负空间，指的是页面设计布局中的空白部分，或者空白元素，它们常常被忽略和忽视，虽然许多设计师认为这样的设计会浪费屏幕的空间，但是留白本身就是设计的基本元素之一。
留白可以提升可读性和内容的优先级，在页面布局中也发挥着重要的作用。因此，它可以合理地简化UI并提升用户体验。
导航应该是每个APP当中优先级最高的组成部分。移动端APP中导航应当容易被发现，可访问的，且尽可能少的占用屏幕空间。由于小屏幕的限制以及内容优先级的需要，移动端导航的可访问性设计一直是一个挑战。
标签栏和导航栏是非常适合用来展现较少的导航选项的，它们非常适合用来展示主要的导航选项，一个简单的点击就能流畅地切换到不同的页面。
让你的设计兼容更大的屏幕。
关于用户如何握持手机，下面的图为你展现了最常见的三种模式：
通过观察可以发现，85%的用户使用单手握持他们的手机，下面的热图展示了从2007年一来，各种不同尺寸的iPhone 的拇指操作区域。毫无疑问，随着屏幕尺寸的增加，拇指能够触及的区域的比例正在逐步降低。所以，移动端界面的用户体验设计应当进行调整，尝试让你的APP 能够在手机上面能够单手操作，将导航置于用户的拇指可以触及的区域之内。
不要让用户等待内容呈现
试图让程序的响应速度提升起来。许多任务尽量在后台跑起来，让前台的展现速度显得很快。将一部分操作打包到后台运行有两个好处：让一些等待和加载过程不再展现在用户面前，并且可以让许多操作在用户请求之前就发生。一个很好的例子就是 Instagram 中上传图片，当用户选择要共享的图片之时，上传就已经开始。
在推送信息之前请三思。
每天用户都会被无数无用的推送通知所轰炸，被分散注意力，这也使得通知常常会显得颇为恼人。根据调研，超过70%的受访者表示，令人烦躁的推送信息是促使他们卸载应用的主要原因。
所以，要做好移动端设计，需要用好每一次的信息推送。不要为了吸引用户而推送消息，这往往会适得其反。你需要将对于用户有价值的信息推送出去，这样才合适。
有效的移动端APP信息推送策略是采用多种类型的信息推送机制，推送通知，电子邮件，应用内通知，新闻Feed等。多样化的信息推送通过合理的协调，创造良好的用户体验。
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com
