不知道大家有没有这种情况，你和一个设计师合作，他源文件给到你的时候，你很崩溃，想找到其中一个元素图层根本不知道在哪里，这个时候你再专业，技术再牛， 这个小细节都会让你口碑下滑。确实是这样，在职场中，你的每个交付物，都是代表你的专业水平。我见过一些优秀的设计师，文件给过来的时候，图层名称，切图，以及设计标注都非常清晰，适配规则都写的很清楚，专业度显而易见。
我之前问过和我合作的开发，最喜欢和什么样设计师合作，其实很多人都说过一个，就是图层干净，标注清晰的设计师。很多设计师抱怨开发还原不给力，但是试问下你自己，今天你交付给开发的每一个样式，对方是否能很清晰的找到。所以，在职场上，一定要注意这个细节，不要被贴上一个专业比较马虎的标签。
很多设计师做设计以为设计源文件交付开发，这个项目就完事了，我之前也这么理解，但是在阿里后我转变了这个观点。要开始对落地页面负责，意味着你做的图，不止是效果图好看，还要上线内容也好看。
以电商设计来说，效果图时候大家都选的很干净的效果，很清爽的背景，但是上线后换上商家的图简直就没法去看。
你心中的页面效果图上线后，和上图一样很干净，清爽，让人赏心悦目。
但其实最后上线环境是这样的，页面拥挤不堪，有很多广告和牛皮癣，内容繁杂。所以今天的设计师除了我们要把页面做好看，同时还需要思考，这个效果呈现给用户会是什么样的效果，对内容负责是我们每个人都需要去控制的。
很多设计师作品集和项目喜欢用很漂亮的美女帅哥图片，确实大家都喜欢漂亮的东西，但是有时候太过了，看着就特别的假，很容易看成飞机稿。其实用照片也是有技巧的，这个简单和大家分享几个小技巧：
▲在头像时候该放头像就放头像，不要放照片和插画。另外图片选择时候，也可以选择一些真实点图片，比如可以用朋友微博上照片，或者微信头像，可以挑一些好看的，那样看着会更加自然。
▲网站里面照片都可以使用，而且都是比较真实的，你可以选择皮肤颜色，性别等等，发设计稿中，会比我们找的明星帅哥美女要真实。
▲如果你今天做的产品是一个面向国内的产品，那么照片就应该是中国人，就不要出现国外照片。真实很重要，当然这里有一些细节，就是照片不要太完美了这样会产生虚假感，照片的清晰度最好足够，别出现马赛克。
▲一般在设计时候，特别是文字我们需要考虑两种极端情况，文字最长的时候，文字最短的时候，如果忽略掉，你只按最佳效果设计，上线后就会出现问题，所以如果你设计文字最长，和文字最短时候，你都兼容到就不会出现太大问题。
▲在做金融产品适合，数字最大值和最小值也是容易被设计师忽略的地方，所以同样的需要考虑最长的数字和最短的数字场景。
如想看到更多干货内容分享，可以添加wx：ddm7851，欢迎围观我票友圈～
可能很多人说，英文大小写这个不是什么大事吧，但是还真是大事，我之前一个同事在内部讲方案述职时候，就因为一个英文单词大小写弄错了，就被领导说粗心，后来领导还经常拿这个事情来说，做设计粗糙，就这么一个下插曲，被贴了一个小标签。但是职场就是这样，你任何一个细微的瑕疵都容易被放大。
做平面设计时候，或者做印刷时候我们都知道要去遵循一定色彩原理，比如潘通印刷色等等，但是在做产品设计时候，很多时候会出现设计师色彩乱用的情况，这个地方红色浅一点，那个按钮深一点，虽然你满足了你当前页面的诉求，但是放到整个APP上来说，就是很乱。
所以，这也是为什么很多团队都会去每年花很大精力做规范，规范的目的其实就是建立一把尺子，这把尺子让今天这个产品设计有一套规则遵守，否则就会出现百花齐放。
▲在谷歌材料设计规范中，很清晰的描述了每个颜色的运用场景和使用方式，目的就是保证所有设计的一致性和统一性。
▲谷歌材料设计，对于不同产品会给出不同的配色建议，这样的规范会让整体的设计更加合理。所以设计师在做方案时候，一定要去遵循团队设计及规则。
▲文字行高也是被很多设计师忽略的，不知道一堆文字怎么定义行高，一般的做法是行高=文字大小*1.5倍，这是比较通用的一些做法，当然也有很多的阅读软件，行高可能设置更大一些。他们会用到黄金比例来设置行高。
▲很多人以为黄金比例就是1.618其实不是，除了黄金比外，其实还有白银比例、铂金比例、青铜比例这些都具有严格的比例性、艺术性、和谐性，并蕴藏着丰富的美学价值，好好利用，将会使你的作品变得更多高大上。
拿行高来说，除了常用的1.5倍，还可以是1.618倍还有1.732倍，这些数值在很多阅读产品中都会大量运用到这种比例。
其实黄金比例除了可以定义这些字体行高以外，在尺寸上也可以去定义。
▲如果你设计中比例拿不准的话，也可以通过这样的黄金比例来控制你整个设计的比例尺寸，这样会更加科学。
关注设计趋势是好事，但是如果盲目的使用趋势，就会让页面特别的乱。很多设计师页面明明是扁平化的，上面都是用插画营造着一个氛围，但是看见最近C4D很火，然后就放了几个C4D元素进去，这样就会让这个设计很混乱。
我之前天猫的导师，豆爸说过：做设计的时候可以先构思一个世界，世界要和谐就需要有它运转的的规则..
这个世界里面的规则会是什么呢？世界里面可能会有很多规则，字体，透视，光线，颜色，形状 .... 可以拆解成每一个细节对应到设计中就是它整体看起来会是怎样的光线，元素，空间感 ……是立体的，扁平的，魔幻的，安静的……
就像有不同风格的电影 动画一样，扁平的动画，木偶动画、黏土动画.... 为了让这个世界和谐，就会要减少一些冲突。如果立体的变形金刚世界里面出现了一个二维的米老鼠 肯定不和谐，如果小清新的色彩世界里面出现了大红大绿东北大棉袄配色，也会不和谐。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
体验经济的时代已经到来，无论是实体产业或是虚拟产业越发依赖于服务和体验带来的经济效益，作为互联网从业者，深刻认识到体验的重量，从尊重用户体验到掌握体验思维，于大多数角色而言都是一门必修课。
“附近的火锅店味都差不多，不过A家服务员态度好好，而且还有好多免费小吃，吃完还能做美甲，吃它！
“下班一起去新开那家咖啡馆打卡不？朋友圈看到装修好有格调，甜点看起来也超精致，特别适合拍照呢！
“周末那家密室剧情挺一般的，不过场景氛围还不错，挺刺激的，关键是npc好帅，小姐姐也好美，还想去！
“师傅，麻烦稍微快点我赶时间估计要迟到了，“小伙子放心，坐稳了”，8分钟后，迟到前5分钟，打卡成功。
——仅以此条向重庆全体出租车师傅致敬」
...
很熟悉吧？还有数不清类似的场景充斥在我们的身边，近些年来，消费者对事物的评判标准有了翻天覆地的变化，一家餐厅对于顾客的价值，决定性因素不再是单一的菜品口味；服务员的颜值、装修的格调、菜品是否精致、拍照好不好看、服务态度如何、有无明星打卡经历，甚至是吃饭免费做美甲这样的边际体验都加入了顾客对餐厅的价值评判标准中，餐厅的效益与顾客的粘性甚至取决于这些边际体验；市场的高强度供给和国民经济效益的提升，为消费者带来了更大的选择空间，解决刚需不再是人们的唯一追求，“品质“一词开始走进大众群体的生活，相比果腹而言，服务与体验这类精神消费需求成为了新世代消费者所追逐的对象，同时也成为了评判事物价值的新机制。
当下市场，商家、消费者与互联网平台形成新的内容产业链，消费者通过平台及商家不断收获各类峰值体验，更有甚者还能以此获利，而商家和平台则收获流量和经济效益，在人货场的概念中形成生态闭环，可谓互相成就。而如何满足顾客的精神消费需求以及怎样制造更多更好的边际体验，成为企业的“新基建“，其带来的效应让人着迷，在资本逐利的市场中，不乏企图通过这样的手段筑起高楼的群体。
“在当下这个时代，消费趋势从购买东西转向了购买体验。生产自动化导致东西越来越不值钱，买回家还占地方。很多高级消费在于购买体验，比如旅游、参加音乐会，到现场观看重大比赛。对于商家来说，用户体验就是商机，其带来的最直接的好处就是提升黏性，产生利润。”(《行为设计学》节选)
从刚需到服务，消费趋势如此，用人趋势也如此；在内卷对互联网行业深度渗透的环境下，设计师理应保有危机意识，单向的刚需能力不再满足于企业对设计师的价值认可，如何打造自身对企业的“体验”和“价值”成为大部分人的课题；我个人向来不主张设计师朝着所谓的“高复合性、UXD、全栈“等风尖能力看齐（高阶人才请掠过），窄而精，精而深，深而广，这样的“以单向能力为主的树形扩张则更适用于大多数站在塔尖下的设计师（个人认为），以UI\UX设计师为例，如何以单向核心能力拓展分支技能呢？本文将以我的实际工作案例进行深度剖析，围绕体验思维和行为设计等分支技能如何在设计中实践应用，并以此构建更具广度和深度的设计解题能力。
案例：内容电商产品，商品详情页迭代
方法：结合线下购书场景体验，预测用户行为，设计用户行为动线。
路径：寻找症结>场景预测>产出>复盘
工欲善其事，必先利其器。第一件事，站在用户视角和平台视角分别对购买流程进行拆分对比，以此加深各个环节所对应业务场景的理解认知。
用户视角购买流程：种草->品类决策->商品决策->购后交流；此流程会随不同的用户类型进行变化，例如带有意向商品进入APP的用户则省去种草、品类决策两个环节；
平台视角购买流程：售前->售中->售后3个阶段，售前对应种草，售中聚焦商品决策。
商品详情页是用户发起购买行为的重要途径，其本质是售中环节的商品决策工具，是通过人工干预的手段，提高商品与消费者的连接与匹配效率，从而为产品获得更高的收益；在满足用户基础产品体验的同时，也承载着平台流量分发后的关键转化任务。
广义上的消费决策场景，大多聚焦在售中环节的商品决策，场景为用户通过外部场景进入到商品详情页，判断一个意向商品是否值得购买，决策的结果是收藏、加购或立即购买，当然也可能直接离开；由此得出，商详场景的核心体验是通过有效的信息陈列，帮助用户了解商品与价值判断后积极的进行购买决策，而同时也是连接用户与作者以及其他关联商品的流量桥梁。 在理解场景的本质后目标变得清晰起来，为用户设计一个好用的决策工具，为平台设计一个有用的信息容器。
为用户造工具，第一件事是剖析用户：通过线上平台购买商品，用户的消费决策过程是怎样的？(常规）
售中环节的信息构建是用户了解商品与自身匹配率并建立购买意愿的核心途径，场景所具备的信息传达能力对用户的最终决策起到决定性作用；为给用户带来更好的购物体验，我通过还原线下购物场景获取灵感，构建线上购书的行为模型，从而对商详进行优化，力求带给用户一个符合习惯认知的、高效、有效的决策工具，同时思考为用户带来体验效益的情景下，提前洞察可能出现的问题以及对业务场景进一步支撑的同时能否主动推进业务的发展。
分析消费者线下购书行为，通常为逛书店-拿起书-翻开书-查和问-做决定等五个阶段。
分析消费者在线下的购物行为，结合业务场景构建具有可行性的行为模型，通过行为模型教育用户进入商详场景后基于动线进行浏览，将信息获取效率最大化，并以此提高商品与用户的匹配效率。
现状评估：基于行为模型，从信息关注度、信息传达能力两方面对框架结构进行体验测评。
首屏是用户对场景建立认知的核心方式，当前商详第一屏呈现的信息维度较多且落点分散，用户的注意力被大量分散，无法引导其完成对商品和场景的快速认知。
1.产品吸引力（氛围、质感、信息传达能力
2.优化信息结构（信息关注度、信息深度）：教育用户行为，降低用户消费决策中的行为阻力，提高商品与用户的匹配效率
3.设计最小可行性方案，将实施资源最小化，在业务规则的限制下得出最优解。
结论：在新的场景中，基于行为模型对框架的优化，信息结构变得清晰，高效的信息传达能力让用户在最短时间内完成与商品的匹配决断，缩短了用户购买决策的体验路径；同时页面的视觉质感得以提升，用户在决策过程中的愉悦度也得以相对提升，提高了产品吸引力。
详解——信息关注度、传达能力：通过调整首屏信息陈列的亲密度主动对用户注意力进行分配，清晰的信息结构会引导用户的视线按照行为模型获取信息，当用户进入商详场景后，会快速聚焦到头部信息对商品进行基础了解，并完成第一阶段的决策(购买意愿)；
详解——信息深度、行为阻力、降噪：将详情信息字段双行展示调整为7行极限展示，减少了首屏信息维度的数量，以此降低用户首次进入场景后接触到的信息噪音，同时降低了展开收起功能的操作频率，满足了部分用户的阅读需求，为决策中期可能产生的行为阻力做了减法。
详解——产品吸引力：新增彩色背景提高了整体氛围感，加上信息亲密度的调整，界面整体视觉质感的友好度和精致度都有不错的呈现，同时决策按钮的配色调整也企图在调动用户积极心理的能力上得到提升。
展示——设计结果（仅对首屏作展示）：
结合数据表现与体验评估，整体体验诸如商品认知能力、匹配效率等得以提升，但关键转化仍然不理想：
· 信息关注度：对用户完成商品基础了解建立购买意愿后的浏览动机存疑，决策中期的信息构建仍有调整空间
· 信息的质量：现有内容策略缺乏说服力，无法满足用户对商品价值的深度评估，促进用户决策的能力显得不足
· 心智模型：表现力上，新版商详带给用户的心智模型呈现为“类阅读产品”，缺少有关交易属性的信息，且信任力不足，导致了商品的不确定性。
从数据看：1-12s内无法对首屏信息进行有效浏览吸收，表现出用户对此处信息关注度较低，第二阶段的详细信息处字段冗长，满足部分用户阅读需求的同时也引起了其他用户的阅读负担，在一定程度上挑战了用户耐心，信息露出需要平衡。
基于行为模型设计的导航策略过于线性、理想化，在用户实际进行购买决策时心理路径存在线性和非线性两种群体，所关注的信息也不尽相同。
方法：通过ELM（详尽可能性模型）探索用户的消费决策心理路径，以此对方案进行调整优化。
ELM模型认为，人类被说服的模型有两种，即中央路径和边缘路径：
在中央路径下：当个人的动机和能力比较强的时候，人们会理性思考、仔细评估之后做出决策，知识水平较高或有相对性需求时往往倾向于理性的选择；
在边缘路径下：当个人的动机和能力比较弱的时候，人们满足于当下的认知，通常不愿耗费精力对信息加以分析，且对信息内容的真实性无法判断，只能通过一些信息的外围因素来决定该信息的可信度，从而涵盖了感情因素，更容易被表面因素说服；
举个例子：小明和小黄逛街时看到一家环境老旧却不便宜的冷饮店，本应嗤之以鼻的小明看到门口排起的长龙和精美的饮品包装设计，让他放下顾虑立即拉着小黄参与排队购买饮品，他相信，大家都在买的就是好的；而排队过程中，小黄则仔细观察店内环境卫生以及店员的操作手法，同时上网查询该冷饮店的资料和口碑，经过对收集到的信息和眼前所看到的场景进行评估后，小黄觉得这个饮品不卫生，决定放弃购买。在这个例子中，本应嗤之以鼻的小明受到外在因素（生意好排长龙、他人行为、包装好看）影响，做出了不理智的决策，是典型的快思维（边缘决策路径）。而小黄经过亲身观察和上网查阅的手段对饮品卫生做出的决策，也就是前文提到的慢思维（中央路径）
两条路径处理的信息不同，在中央路径处理的都是与信息质量相关的线索，而在边缘路径中，处理的则是一些表象信息内容。
结合场景梳理用户决策的思考过程中的关注点：
内容共建，决策参考：当用户产生购买行为时，首先是需要被说服的，无论是被他人说服，被广告说服，还是被自己说服。讨论区的建设，在交易场景连接了内容侧的业务，同时推动产品内容质与量的发展，并试图通过言论促成“用户说服用户”的决策模式，同时满足了中央路径、边缘路径两种用户的信息供给。
强调心智，情绪体验：将原本处于第二屏的交易信息前置，矫正整体用户对界面认知的心智模型，同时让用户了解商品信息后第一时间感知到购买权益及相关配送体验，完善首屏的信任力、保障确定性，让用户具备“放心买”的心理；界面视觉的质感优化仍然以提高用户愉悦度为主，企图在决策过程中带给用户更好的边际体验，让用户在表象层面提升对产品的好感度，以信任力\好感度\平台和用户的内容共建等方式在人因决策之外发挥促进购买决策的最大因果。
以上案例部分内容以倒推形式进行复盘，是脱离数据之外的解题思考方式；希望我的文章能够为感兴趣的同学带来新的思考，也期望体验思维与行为设计能够被更多设计师所熟知应用。
设计源于生活，无论是购物、玩游戏或事社交，打破线上线下的场景壁垒进行观察、思考，解题方式不乏在你身边的生活场景中，人的行为始终具有参考价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分，从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息，旨在对响应式设计有一个笼统的了解。
关于 Adaptive Design 与 Responsive Design先厘清两个概念，关于响应式设计通常会有两个普遍认识，即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念，它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸，而 RWD 是同一套代码做弹性的适应，本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题，本篇所指的「响应式设计」 概念包含了两者，不做明显区分，关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。
提响应式设计不得不提「移动优先」设计策略，移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略，基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略，它认为在响应式设计中优先为屏幕限制更大的移动设备设计，再扩展到大屏幕的 PC 端是一种更有效的设计方法。
例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法，Fiori 尤其指出「移动优先」专注核心功能，专注增强而非降级，提前考虑移动端更多的独特特性以及异常情况，能提供更好的体验。Material Design 可能算是移动优先的最佳实践，它本身就诞生于 Android 平台，而后再通过大量响应式规则扩展到桌面及 Web 端，使得 Material 在多端都拥有一致贯穿的良好体验。
（Material Design 的响应式设计）
「移动优先」本质上是基于一种「增强」的设计思想，一个产品如果要同时适应于不同的设备，一直以来有两种策略：优雅降级 vs. 渐进增强，后者认为先从最小和最受限制的低级设备（移动设备）入手，再为更高级的设备（桌面设备）增强信息和交互，这意味着在更多限制下，迫使设计考虑如何减少、汇总，分组信息，有利于聚焦核心信息以及为更多限制考虑。
然而移动设备已不再是「低级设备」，Fiori 尽管强调「专注增强而非降级」，但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖，让「移动优先」沦为了某种形式化的概念而难以执行。
例如下面这个报告界面的场景里，移动端仅展示汇总的报告图表信息，但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表，而在桌面端同时包含了明细数据与图表两部分信息，这看上去并不像是一个「增强」的设计思路，更像是在全量需求下基于设备限制所采用的「降级」策略。
（Fiori 报告界面的 Adaptive Design）
因此「移动优先」并不一定是形式上优先设计移动端，它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下，「移动优先」不再适合作为单独概念提出来，而渐进增强的设计思想应该体现在更细分的场景中，例如在布局、信息排版以及交互反馈中，我们应该优先考虑限制更大的移动端；在一些交互方式上，优先考虑限制更大的鼠标操作。甚至在复杂业务场景里，优先满足核心业务流程顺畅也属于渐进增强的策略范畴。
这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案，这些设计模式除了单独应用外，有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式，非常全面地涵盖了其它设计体系中的绝大部分方案，分别是：调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。
调整大小是最基础的设计模式，是一个容器默认的响应式模式，通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式，即便在无响应式设计的体系里，容器跟随屏幕尺寸而变化也是一个常见的应用方式。
改变 UI 元素的相对位置，以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上，或是在组件里对一些特定元素的处理，例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。
（Reposition）
改变 UI 元素的排列方式，这在内容弹性布局里较常见，通常是基于某种排列规则自动向下折行，并结合调整大小与栅格系统应用在响应式布局方面，例如 Carbon 的 Fluid Grid。
（Reflow）
基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素，例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。
（Show / Hide）
针对不同尺寸的屏幕采用不同形态的组件，通常应用在对具体的组件做针对性响应式设计中，但需要注意用户面对变化时的认知成本。
（Replace）
折叠或拆分信息架构，这种模式在 Web 端较难实现，通常出现在一些 Native App 的场景。
（Re-architect）
除了上述 6 种模式以外，我把内容密度也归纳为一种设计模式，Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度，而针对大屏幕的 Web 端则提供紧凑密度的方案，他们认为移动端手指交互所需的空间要求更高；Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。
（Material Design 的内容密度示例）
值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计，越紧凑的布局栅格间距越小，这看上去很合理，却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义，但在内容密度的处理上和 Atlassian 恰恰相反，它认为高密度内容适用更宽松的栅格空间，相对是一个更合理的设计。在信息密度的问题上，我们的核心目的其实是提升信息效率而非单纯提高视觉密度，因此解法上需要更完善的考虑。
（Atlassian 与 Material 的栅格密度对比）
实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段，经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。
几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位，Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸，即 1rem = 16px，Alta 默认采用是 14px 的规格，并允许基于不同应用选择 12px 或 16px 的规格，默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现，这也许和他们的产品特性相关。
相对尺寸单位是非常具有实施价值的，它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容，这使得设计能更方便地调整内容密度，或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题，且几乎没有前端成本。
国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端，主要为了两个目的：方便计算尺寸、在不同宽度的设备上等比缩放内容，这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段，在使用上本身也存在一定争议，而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用，甚至很多设计师还并不了解相对尺寸单位的使用方法，广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。
屏幕断点是响应式设计的基础依据，它决定了我们要适配到什么样的设备或屏幕规格，并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的，包括考虑了移动设备的横评竖屏情况，关于详细的规格设置其实并没有太大参考价值，设计体系都是根据自身定位以及设备覆盖的情况来制订的，例如 Material 的断点在低分辨率范围分得非常细，是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下，屏幕端点不需要太多，无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。
（屏幕断点分布） Fiori 的断点设计比较有意思，在设计文档中仅有基本的布局规则，没有明确的 Breakpoints 规则，Fiori 对于不同的组件会设计不同的 Breakpoints，例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格，而在 Form 的组件中，Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞，从这点上看出 Fiori 认为不同的组件有不同的表达模式，因此应该针对性对组件进行优化。
（Fiori 的 Table 组件适配情况）
（Fiori 的 Form 组件适配情况）
Flex 布局是 CSS3 提供的强大布局能力，从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局，Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中，Flex 布局通常结合 Breakpoints 使用，在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力，例如 Fluent 在 windows 采用 XAML 构建布局系统。
无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力，响应式设计要解决布局的问题将会深度依赖这些基础技术手段，本篇不进一步展开。
栅格系统是所有设计体系必备的，我们通常将页面横向分为 N 列，定义每一列的尺寸与间距，这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的，通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列，同时一些设计体系还提供了可见性相关的 token，来控制界面元素在不同屏幕的显示与隐藏。
Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统，因为 12 的因数够多，能满足足够多的布局细分同时又不至于太复杂，Carbon 的做法更加 geek 一些，他们的「2x grid」采用了 16 栅格系统，布局粒度更细但放弃了 3，6 这样的因数。 Ant Design 为了满足复杂的业务情况，采用了 24 栅格系统，24 栅格提供了更高的灵活性的同时，也大大增加了复杂度，面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。
另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念，核心思想是在较小的屏幕上降低栅格数量，将多余的栅格自动折行弹性布局。
（Carbon 的栅格定义） 在屏幕尺寸变化时，栅格主要有两种响应模式：Fluid、Fixed
（Fluid）
这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置，在不需要特定响应式的场景中不再需要指定繁琐的 token，且能满足大部分高频且通用的情况，在一定程度上降低了成本。
除了通用的响应式规则以外，设计体系在具体组件中的响应式方案还有许多值得挖掘，能为我们的组件设计提供参考价值，本篇不再一一展开，仅提两个典型的应用情况：
（Carbon 的框架设计）
框架算是一个特殊的组件，在不同的设备中界面框架的适用有非常大的差异，几乎提到响应式的所有设计体系都给出了框架响应式方案，例如 Alta 将界面框架分为四块，以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。
通常情况下设计体系的框架组成按形式可以分为：
Header – 通常情况下常驻
Sidenav – 分为左侧右侧两种情况，一般用于放置导航，在不同设备会有展开，收缩，隐藏三种状态
Content – 内容区，通常由 Grid 控制布局
Footer – 如有，固定在页面底部
Float – 浮动框架，用于临时状态，通知或弹窗等
设计体系通过对框架的定义，以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。
Fluent 或 Material 在设计文档中更多基于基础的网格，布局，设计模式来阐述通用性的响应式规则，因此他们的响应式设计有非常好的延续性，组件的响应式方案基本上都遵循这些规则。
而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面，他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里，在桌面端与移动端分别是 table 和 list 的模式，这个方案并不是通过全局抽象规则得出来的，而是基于对组件的针对性设计，正如他们为不同的组件设计了不同的 Breakpoints，这种针对性也适用于特定的 UI 解决方案。
（Fiori 针对 Table 的响应式设计） 在一定程度上抽象规则的同时，如果我们能够为每一个组件都考虑到不同场景的响应式，当然就会提供更精细化的体验。在一个完备的设计体系里，在设计每一个组件资产时都以渐进增强的设计策略，考虑到不同的设备及屏幕适配是非常有必要的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
主要分两个部分介绍，第一个轻松点的主题，回顾下UI的风格变迁，再聊一聊行业情况，然后科普一下app界面设计的提案思路；第二个部分就稍微严谨些，是UI设计师必须掌握的一些基本知识，包括分辨率适配，倍率适配等关键知识点
先来认识下UI是什么，我给大家精简成了三句话，如上图所示
首先第一是媒介，也就是我们直接能看到的各种界面，UI就主要设计界面
第二是行为，也就是我们使用一个产品时，通过怎样的行为来操作，UI还需要思考界面的交互
目前大家比较熟悉的，手持（手机），穿戴（vr，眼镜）等
最后则是用户，也就是我们常做的用户调研，不只是UI，所有的设计行业都需要这个环节
所以，如果有人问到UI是干什么的，那么你就可以告诉他，主要做三件事情：
日常需要做界面设计；进阶一点的会研究交互设计；高级的UI会去更深入研究用户
而我们这次主要就了解界面设计上那点事情，先给大家回顾一下UI设计风格的一个变迁，至今为止UI已经从黑白时代演变到了今天至少经历了至少5代蜕变，主要的风格如我右边列出的种类，而我觉得其实主要分成三个大时代来看就行
其中第一个大时代统称像素时代，也就是最早UI诞生的时候做就是这样的界面，大家熟知的表情包“有内鬼终止交易”就是一个经典的时代缩影
第二个大时代是拟物水晶时代，也就是UI发展最快，行业规模变化最大的一个时代，很多早期一批UI设计师都在这个时代吃到了所谓时代红利，当然不包括我，我已经晚了。这个时代界面的特点特别明显，就是比较写实的质感，投影以及一个大高光的罩子结合起来，给人一种硬玻璃的感觉
最后一个时代则是扁平，新拟物，现实增强等的混合时代（跟抖音内容的生态变迁差不多，从明显的高端视频风格到现在和快手差不多的鱼龙混杂），这个时期其实很多风格会延续下去，尤其是扁平，也就是我们现在办公常看到的界面，会作为一个基础，不断的吸收和混合其他的风格去进行延展
VR中的界面则是稍微前卫一些的，因为会有一个360度的环绕视角以及一个虚拟的现实场景，可自定义的程度很高，目前是刚刚兴起的时期，也是一个新的UI比较建议入手的高门槛业务领域，为什么说高门槛，因为做个界面都要戴着头盔来看效果
比较值得给大家科普一下的则是最近比较趋势的两个风格，一个是新扁平：在扁平界面的基础上，大面积用色，渐变，微质感，少边框，结合3D等一些其他元素来凸显主题
还有一个是新拟物，时代的风格总是偶尔会有轮回，拟物风格也进化成了新的形态：只有部分写实，整体强调3D立体感和光影感觉
还有一个是新拟物，时代的风格总是偶尔会有轮回，拟物风格也进化成了新的形态：只有部分写实，整体强调3D立体感和光影感觉
风格介绍完现在简单给大家讲下这个行业，它的覆盖领域主要分为四个，其中主要的行业人才都集中在移动端和PC端；游戏是一个特殊行业，要单独划为一个领域，它跨越多端风格也多样；其他端则主要包含一些国有传统行业和一些未来的，科技的比较冷门的领域
然后UI这个职业的主要行业特点是怎样呢？作为一个过来人可以见证的主要有以上七个部分，但是一句话总结就是：热度下降，规模稳定，门槛变低，人人切图。说得更残酷一点，现在大家报个班学完都可以投UI设计岗位了，时代的红利已经远去。当然如果觉得我说的不对也没事，可能我站得还不够高～
比较值得一提的则是风格的分布情况，虽然已经经历了5代变迁，但是仍有很多传统和冷门的行业停留在水晶拟物的时代，只有主流和热门的行业保持着最新的风格，而前卫的行业则会去尝试最新的UI和交互
这连续的两张里的图就是一个天南一个地北，但确实同一个时代的产品
那么职业科普和行业情况都有了之后，我们具体UI设计师，做界面大概是什么个流程，让大家了解下UI设计的思路，我称之为“眼睛会了脑子没会系列”，就跟你看到网上那些大佬的教程视频一样的，全程只有鼠标在飞，然后东西它自己就做完了。（开玩笑）
这个设计思路是我UI设计时期总结出来的最快的提案设计思路，接下来讲解每个环节该做什么
首先是快速切入，就是把我们前期收集好的资料参考，比如我这里有个情侣的app需要展现出青春，活力的感觉，那么我从最左边的参考图，提炼出符合自己要求的元素、颜色、特征等，填充到已有的交互框架（在UI设计业务中，交互框架一般由交互设计师或者产品给到），然后形成一个有视觉颜色等大体感觉的初版效果
然后在这个初版的基础上，我们在自己的库或者素材网上找到icon和图片进行填充，整体调整颜、排版等，一个进阶效果图就完成了，同理还有如下两个界面的产生过程，都是初稿
接下来第二个环节独特性，就是在自己进阶效果图的基础上，去强化一些关键的特征，让它的特点更明显更出彩，比如刚才的界面，把素材icon优化成更有主题特色和个人风格的类型，那这里涉及到icon的设计了
icon设计讲究快准狠，不需要太复杂
第三个环节则是高效性，这里开始就是要去优化我们交互体验上的东西了，也就是颜色的分布和使用在UI设计中是以逻辑和效率为主导的，好看不是首要的，比如这个经典的界面，出自淘宝app，它的颜色使用，就非常尊重用户，提高了识别和操作上的效率
然后是加分环节，细节环节，则是自己尝试要融合一些小的心思到你的UI界面中，哪怕是图片的使用，文案上的小趣味，都会让你整个app的调性有提高
第二个加分环节则是动效，主要是展示界面操作上的流程和自己的一些特色效果，这些都做完，就可以拿着你的静态界面稿子和动画一起去找老板汇报了
其实整个链路真的很简单，UI设计师每次提案做下来就这些事，只是不同人他的先后顺序不一样
首先我们已经知道UI设计师每天都在搞界面，也知道他们如何搞出一个界面，那具体搞的过程中，又是做哪几件事呢？这里给大家概括成三件事：规范，切图和标注
今天我们只普及规范知识，也就是在画界面之前，建立画板之前都要先搞清楚的事情，UI设计师真的数学逻辑要好
我们先要知道，规范为什么是要先掌握的事情，那是因为在设计界面这件事上，规范已经在手机生产出来的时候就有了，不同于我们说的设计规范是一些视觉上的规范，UI的规范是和尺寸，像素，倍率等知识密切相关的
首先从界面上去分割，UI说的规范主要是讲这几个部分和一个整体的设计尺寸
先讲设计尺寸，我们以苹果手机为案例，第一台手机出厂后，就会存在这样的规格分布，告诉你分辨率是多少，每个部分各占多少高度，有了这些，大大小小的app和系统等界面才有了设计的基础
所以问题来了，那每出一台手机就要有一个新的设计尺寸吗？理论上是的，但是实际上不管手机厂商和UI设计师，都会去找里面的规律来避免麻烦，于是厂商创造了一个规律，也就是这个pt为单位的尺寸，这里就要先解释下这两种单位的关系
说的简单点，就是pt是一个虚拟单位，它永远取最小值，也就是分辨率长宽都取了公约数之后的那个最小值
所以我们再回头看这几个机型，就能发现一个规律，就是如果pt不变，设计尺寸是不需要改变的，因为整体可以进行放大或者缩小来进行适配。比如左侧两台手机，我用640x960为设计尺寸，做来的界面，两台手机都可以用，不会有拉伸之类的变形；右侧之所以高度上pt不同，是因为顶部的之前我们说的状态栏，导航栏之类的高度变了而已，实际中间的区域是没变的
然后再换成我们现在主流的机型看也是这个道理，但出现了一个新词，叫渲染分辨率，自此以后我们要分清楚，设计尺寸永远是渲染分辨率，因为通常渲染分辨率和屏幕分辨率是一致的。这就是为什么官方说plus的屏幕更清楚，就是因为是从分辨率高的界面缩小下来的，px密度更高
在了解了这几点基本概念后，我们就可以去看整个行业的机型规范了，我们现在UI界面是主要以750x1334为设计尺寸的，就是因为这个分辨率所占据的机型是最多的，也就是大部分的pt都是在这个档位
同理安卓市场也一样，只不过安卓的机型更多，所以更复杂，他们对应的一个虚拟单位则是dp
推导过程是一样的，所以我们直接说结论，双端的设计尺寸如图所示，你用720x1280和750x1334都可以，因为这两者都约等于9:16，现在UI设计师的软件比如sketch大多都自带了完整的各个机型的pt/dp，所以已经现在很多UI设计师都不大了解这个知识
刚才我们介绍完的部分，只是适配的一种情况，还有一种情况则是通过切图，又称为倍率图。
作为一个合格的切图仔，切图是最常见的操作，不同的倍率图，不仅仅是大小不同，也被用来适配不同的机型
切图倍率是随着机型一起产生的，所以每个机型在适配的时候，主要的规律就是：pt相同看切图倍率；切图倍率相同看pt；如果两个都不同，则先按pt适配，然后再通过倍率适配。这里重申一下，pt适配的意思就是：只输出一套图，然后整体界面进行一个放大或缩小的方式适配不同机型；而切图倍率适配：则是不需要整体放大或缩小，而是通过输出多套图去给不同机型用
双端其实都有自己机型对应的切图倍率，两者通过各自的虚拟单位pt和dp还能统一转化为px，这样才能进行多机型的适配
前面我们说了，双端的主流设计分辨率基本上是一样的比例，但他们各自有不同的切图倍率，ios端的机型比较统一，所以切图倍率一直都没有太多；而安卓因为各种机型层出不穷，所以用于适配的切图倍率非常多，适配的难度也很大，但目前主流的输出结果如图所示，但当全面屏越来越多的时候，这个结构也会逐渐改变
最后讲一下UI的工具，在工作的环境中碰到使用比较多的就是sketch和新兴的figma，两者都相似，都以pt和dp为单位去建立画板，也有全面的切图倍率供输出使用
也常见有人一定喜欢用PS来设计界面的，也可以用这样的切图插件来一键轻松输出
最后标注也是一个大工程，主要是眼花，难度不大，现在各种主流软件都搭配标注插件，这里不多讲
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
按钮是一种使用广泛的基础界面元素，正因其使用的普遍性和重要性，我们需要并一直在探索建立按钮设计规范。面向企业级应用时我们需要精心考虑按钮的设计， Ant Design 提供了丰富的按钮类型以覆盖各种场景，尽管每种按钮都有其存在的必要性，但在使用中也带来诸多疑问：
应在什么时候将按钮放在左边，又什么时候放在右侧；
按钮顺序是按照使用频次摆放吗？如果无明显的使用频次呢？
当需要提供特别多按钮的时候应该如何处理？
虚线按钮 与 普通按钮 在用法上有什么明确区别；
RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何区别？
…
如果没有规范以上问题，仅按钮顺序和位置问题就会出现无数种组合。图左侧为蚂蚁中台业务实况，图右侧对左侧按钮的布置方案作了提取，每种场景都存在过多解决方案和组合，无法通过参考他人的设计来确定应该如何摆放按钮，因为设计无章可循。
因此，有必要建立约束又包容的规范，以广泛满足多层级、跨场景的设计需要。
Ant Design 是一个设计体系，应用于蚂蚁中台，并对外服务于超过 100 万名开发者。在制定规则时，原则是简单易记（约束）并满足企业级场景的广泛兼容（包容），把问题最少化。我们的解决方案是：
1）「默认规则」：提供一套默认的设计规则，在现有的模板、组件等设计资产中提供示例方案，满足简单场景需求，直接使用即可；
2）「设计建议」：为默认规则无法满足的复杂场景提供设计建议，让使用者在一定的策略上自定义，同时又与默认规则保持一致的认知逻辑；
3）「设计目标」：明确设计目标，设计者依据设计目标决策设计。
例如：“提交按钮与表单输入项对齐”是默认规则；当需要考虑按钮是否适合放在右下角时，则可以遵循“右下角放置“完成类”意义的操作”的使用建议；“按钮的设计应尽量帮助用户避免犯错。”则是设计目标。
目前，Ant Design 会提供组件、模板等设计资产、官方设计指南来演示这些规则。这是也是解决一致性落地方面的基本思路。
本文将尝试分享我们是如何思考和制定默认规则的，碍于篇幅，首先我们会聊一聊按钮是什么，以此推论出按钮设计应为用户解决的问题。接着，根据按钮设计时的几项基本变量，介绍我们是如何组织这些变量的设计逻辑，从而推导出一个较为通用的按钮设计规则。最后讲个小例子来说明按此逻辑该如何考虑设计一组按钮。本文主要讨论按钮设计的三个基本逻辑：按钮位置、按钮顺序、按钮强调，后续可能会单独开篇介绍其他常见按钮的使用疑问。
按钮和链接定义是不同的，按钮用于发起动作，触发相应的业务逻辑。其与链接的区别在于，链接的作用是导航，但链接并不影响后端或前端展示上的逻辑。
然而，现在，按钮和链接的界限越来越模糊，按钮面临的使用场景越来越复杂，也常出现用链接作为按钮的场景，例如表格的操作列，通常这样的设计通常并无大不妥。
但是笔者认为 Material 的 TextButton 的解决方案也非常棒，对 TextButton 和 Link 做了区分，当 hover 或点击TextButton 时，会出现浅色背景指示控件响应区。如果你的设计系统刚起步，可以考虑这个方案：https://link.zhihu.com/?target=https%3A//material.io/components/buttons/
按钮的位置、顺序、组织方式、视觉强调程度是用户寻找按钮的线索，通过警告色可引起注意，避免误操作，准确的文案则能够预告按钮的执行结果。按钮设计的目标是指导用户采取我们希望用户采取的行动，尽量帮助用户快速找到需要操作的按钮，并了解执行该操作的结果，同时尽可能避免误操作。
按钮区是专用于放置按钮的区域，一个按钮区内可以有多个按钮。因此，这里使用按钮区位置比按钮位置更加准确。
我们确定了一个清晰的设计策略来决策按钮区位置：应将按钮放置于用户浏览路径中，便于被用户发现，并且应尽量靠近其所控制的对象。在未刻意建立信息层级引导视觉路径时，经典“F”“Z”网页浏览模式作为了我们按钮位置放置规则的基础指导。
Jacob Nielsen 首先提出该模式后并提供了眼球追踪研究结果，关注流顺序如下图。按钮跟随内容模式在以下的这个研究中被证明非常自然。
源自 Gutenberg diagram，用户关注流(通常含鼠标移动)遵循一个 Z 字形模式，它描述了西方用户的阅读模式，从页面的左上角到右下角。1和4区域是相对重要的视觉落脚点，4 区域相当于是浏览的终点站。（Gutenberg Diagram 是 Gutenberg 根据多年的报纸等排版经验总结出的假设，笔者尚未找到眼动实验数据）
（Z Pattern 图源：Buttons on the web--Artem Syzonenko）
我们需要认识一个概念叫「内容块」。内容块的概念略抽象，可以将整个页面视为一个内容块，也将一张卡片视为一个内容块，或者仅仅是界面中的一个小小的内容单元也可以视为一个内容块。界面中，一个内容块的基本构成有三部分：Header、Body、Footer。常规来说，一个内容块通常阐述一个主题，Header 申明主题，Body 放置该主题的具体内容，Footer 主题的延伸信息和操作。
根据以上三个条件，推导出按钮在「内容块」中位置的「默认规则」如下。该规则几乎收敛了大部分图 1 中的位置设计不一致问题。这套位置规则与 Fiori、Predix、QuickBooks 等企业级产品设计体系中都相近。
（默认位置规则）
同时，每个位置有一定行为意义，我们据此提供了「使用建议」来指导设计：
关于 FooterToolBar 中右侧放置按钮区的争议
在弹窗中，将按钮区放置在右侧的规则已属于习惯用法。但在整个网页场景中，将 FooterToolBar 里的按钮放置在右侧是最受质疑的，FooterToolBar 是一个吸附在页面底部的工具栏，可以保持出现。许多设计师认为这种状况找到按钮很困难，特别是在表单场景中。众所周知企业级产品的表单常会遇到非常复杂的状况，FooterToolBar 正好解决了这个问题，因此这里要弄清楚的是什么时候需要用到 FooterToolBar：
1）Body 区的有部分内容被折叠or隐藏，如内容单屏无法展示完整内容，表单区被多个页签分割；
2）Body 区的内容复杂度高，比如有多个分组，每个分组都有独立的按钮区，或复杂的交互方式。这时候需要将该主题的“完成”操作区与 body 区，区分出来。
简而言之，Footer 的存在就是为了要和 Body 区分别开来。如果不是为了解决这类问题，那么让按钮跟随内容是最自然的。这个挑战也引出了另一个课题，工具栏的设计规范尚待完善，emm，真是一坑更比一坑深。
关于顺序，最常见的疑问是确定按钮应该在取消按钮左边还是右边，这是一个争论已久的话题。在弹窗中，确定按钮和取消按钮的顺序在各设计体系中都不一样，下图是操作系统三巨头：Apple、Google、Micrisoft 的方案。三巨头证明了两种主次顺序都能被接受，只要在系统中统一。那 Ant Design 应该如何选择呢？
在决策按钮默认的阅读顺序时我们考虑了以下四方面：
1）风险操作
2）方向性意义
3）对话习惯
4）响应式规则
上面顺序呈现了各因素在决策时的权重，例如，一旦按钮出现方向性含义，则权重大于对话习惯，但一旦操作存在风险，则需优先决策。
可能造成损失的操作，特别是破坏性操作，如果不是用户期望点击的按钮，应该尽量远离常用按钮。
什么是方向性含义？具有返回意义的按钮，应该放在左侧，暗示其方向是回到之前。左图的方案非常容易误操作，方向错乱挑战用户的认知习惯，因为不论是在网页还是移动端界面，我们已经都习惯了返回在左侧的模式。
按照对话习惯排列按钮。界面中的按钮阅读顺序类似于一个用户和电脑的对话过程，按照日常对话的顺序设计按钮阅读顺序更自然，同时让电脑尽量显得礼貌一点。例如，日常对话中，我们一般不会先问负面性的问题，当用户修改了一项设置，用户最有可能的行为是保存这项变更，如果电脑一上来就问用户是否要取消变更会显得不太礼貌的亚子。因此，不太推的操作，自然会排列在靠后的顺序。
指是按钮如何在响应式环境中优雅的溢出。这一项条件对规则设计的影响是，我们把溢出按钮“…”统一放置在最右侧。
综上所述，我们制定了第一版「默认规则」，无论左对齐右对齐，统一从左往右阅读。
但这个方案遇到了问题。Ant Design 现有的浮窗类组件里，优先操作的按钮都在最右侧，全部不符合这条规则。如果调整，意味着全部组件升级，这个变更将挑战全部已在使用 Ant Design 的用户习惯。这是无法被接受的，同时为了保持规则的简单性，我们产出了产出了第二版「默认规则」，即现在发布的版本，左对齐从左往右阅读，右对齐从右往左阅读：
调整按钮的样式变量，呈现不同的视觉重量，达到分级强调目的。我们将按钮视觉强调程度分为四级，了解其原理后，可以根据样式变量和按钮类型组合出需要的按钮。
一级按钮通常是主按钮，突出“完成”、“推荐”的操作。一个按钮区最多应该使用一个主按钮。那么一个页面可以有多个主按钮吗？因为没有足够的反面案例支撑一个页面不能有多个主按钮，比较建议在一个焦点任务中，最多一个主按钮，也可以没有主按钮。
也称之为次要按钮，可用于所有次要的按钮行动，如果我们有许多具有相似重要性的行动在一个屏幕上，或不确定要选择哪种按钮，次要按钮永远是最安全的选择。目前二级按钮的视觉强调程度有些偏弱，后续我们也会考虑调优此问题。
没有外边框，用链接色突出，例如文字按钮。比较适合诸如“取消”“还原”等无需强调的操作。文首提到的表格操作列这类无需强调的操作也推荐使用。
并不是非常规范的按钮，用于满足复杂的个性化需求，当按钮数量特别多，并且保证用户直识别的情况。
最后将位置、顺序、视觉强调三项变量组合，可以得到一个最基础的「默认规则」，用于覆盖最简单的场景：
前面我们提到，「默认规则」在组件、模板等设计资产中演示，通常无需思考直接使用即可。 那默认规则不能满足我的需求，我不知道如何安排按钮顺序怎么办？现在，我们用一个小案例来验证如何依据设计建议决策按钮区设计。
场景假设：我需要一个复杂的筛选条件来过滤数据，我考虑在弹窗中处理这个任务。设置完筛选条件后，我可以将这个条件保存下来以备下次使用，或直接点击确定生效。这里面会涉及的操作包括：保存，重置条件，确定，取消。
规则设计想要简单而又令所有人满意是一件非常困难的事，从设计系统的长远效益来看，简单的规则更有意义，同时我们也在尽可能让规则能够符合习惯用法，让用户更容易接受和学习。关于按钮设计规则的探讨，依然存在很多问题尚待解决，欢迎大家提提供反馈，帮助我们一起完善。写完文章后突然有点忐忑~~最后，我们在 Ant Design 官网上发布了一篇关于按钮的设计指南，欢迎前往查看指正。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
与客户的对话和反馈是产品成功的关键要素。然而，研究表明，42% 的公司不调查其客户或收集反馈。
伟大的产品不是凭空打造的——您需要一个持续的过程来从用户那里获取反馈，以指导您的产品路线图、调整消息传递并保持满意度水平的脉搏。
什么是产品反馈？
产品反馈是您的用户分享的有关他们对产品的体验和满意度的任何信息。您可以通过各种研究方法收集产品反馈，例如用户访谈、客户调查、评估客户支持票等。
产品反馈的 3个主要好处
虽然积极收集和分析产品反馈有很多好处，但可以总结为三个主要好处：
A. 改善客户体验和满意度
B. 优先考虑产品路线图并验证新想法
C. 打造成功的产品
让我们更详细地看看它们。
1. 提升客户体验和满意度
为用户提供出色的客户体验不再是一种独特的优势——这是意料之中的。产品发布后，收集产品反馈可帮助您识别任何问题，收集有关要添加或改进的新功能的信息，并找到帮助用户充分利用其体验的方法。
支持票通常擅长揭示需要尽快解决的重复问题。如果一个问题多次出现，那么您就会知道它困扰着您的大部分客户群。此外，净推荐值 (NPS)或客户满意度得分 (CSAT) 等调查是产品反馈的重要来源，可以帮助您了解如何改善客户体验。
2. 优先考虑产品路线图并验证想法
收集用户的反馈有助于产品经理确定产品路线图的优先级，并根据实际用户需求做出明智的决策。
您可以收集关于功能想法的反馈并量化数据以了解哪些是最需要的。
3. 打造成功的产品
如今，最好的产品是基于与日复一日使用您产品的人（您的客户）的持续互动和用户体验而构建的。客户期望的上升意味着企业必须不断收集和识别客户需求，以构建能够解决实际存在的问题的产品。
产品反馈是一种很好的机制，通过它可以从用户那里获取见解，并将其纳入您的决策过程。无论是通过征求还是主动提供的反馈，倾听用户的意见将确保您能够始终如一地交付价值。
产品反馈：类型和方法
您可以使用多种产品反馈方法来设置产品反馈循环并让您的客户与您取得联系。
通常，产品反馈可以是征求的，也可以是主动提出的：
A. 征求反馈是指您要求用户提供反馈。这可能是向您的客户群发送调查或与用户进行访谈。
B. 不请自来的反馈是用户在没有被要求的情况下分享的任何类型的反馈。例如，他们可能会在网上发表评论或在社交媒体上分享评论。
当用户在您的产品中遇到问题、要求新功能或需要帮助完成某事时，通常会出现不请自来的反馈。
另一方面，通过征求反馈，您需要为用户提供背景信息并提出正确的研究问题。根据您的团队需要反馈的内容，以下是您可以用来收集征求的产品反馈的方法的概要：
1) 调查
2) 客户访谈
3) 产品分析
4) 专门小组
5) 客户支持对话
6) 销售和客户沟通电话
让我们更详细地看一下前三个。
1. 调查
调查是一种有效的研究工具，可为您提供针对各种用例的特定产品反馈：分析新发布的性能、在开始构建过程之前验证想法和新概念、测试产品消息传递等。
大多数反馈调查使用开放式和封闭式问题的组合。在创建和发送调查时要记住几个最佳实践，即：
A. 避免引导性问题，例如“您有多喜欢使用该产品？” 相反，请让您的用户提供有关他们体验的详细信息，而不要引导他们做出肯定或否定的回答。
B. 保持简短：注意受访者提供反馈的时间和意愿。在调查中包含的问题不超过五到七个，以使其相对简短，并且仍然可以获得可操作的反馈。
C. 使用开放式和封闭式问题的组合。太多的开放式问题将导致调查时间过长，因为参与者必须为每个问题输入答案。另一方面，仅由封闭式问题（如是/否问题）组成的调查只会为您提供定量数据，而不会揭示参与者给出这些答案的原因。将这两种类型的问题结合起来可以创建有效的调查。
2. 客户访谈
客户访谈是一种通用的研究方法，可以在整个产品开发过程中获得有见地的反馈。从进行最初的设计研究到获得发布后的反馈——与用户交谈总能产生新的见解。
对于产品营销人员来说，访谈是一种有用的方式来获取有关新产品或功能的消息传递的信息。
3. 产品分析
产品分析是了解产品性能和改进方式的绝佳来源。产品分析对产品经理和营销人员都很有用，可以帮助您了解用户在做什么与他们所说的相比，这可能并不总是相同的。
如果您在发布之前进行了定性测试，产品分析可以帮助您验证您的初始假设。
此外，产品分析是识别产品中严重问题的良好来源。例如，衡量留存率之类的分析可以让您随着时间的推移跟踪它或将比率与行业标准进行比较。当任何异常发生时，数据是进行更多研究以了解问题所在的起点。
创建产品反馈循环的重要性
您可以使用多种方法来收集产品反馈，从我们上面看到的三种方法到社交媒体监控、客户支持票、销售电话、客户沟通电话等其他方法。更重要的是创建一个流程，通过该流程，反馈始终如一地到达您的组织并被采取行动，从而征求更多用户反馈。这也称为产品反馈循环。
反馈循环是一个迭代过程，其中从客户反馈中收集的见解被实施到产品开发过程中，并用于在一致的基础上为产品决策提供信息。随着新的反馈影响新的产品策略，这个过程会无限重复，而变化会促使客户提供额外的反馈。
这种持续不断的客户反馈将帮助您把握客户满意度的脉搏，并在您和您的客户之间建立一个开放的渠道。
如何收集好的反馈
并非所有反馈都是平等的，或者就此而言——有用。就像进行任何其他研究方法一样，收集很好的反馈需要理解并遵循关键的最佳实践。这是你应该知道的。
建立明确的目标
在您开始收集反馈之前，第一步是定义您的目标并建立明确的衡量方法。
一个好的起点是查看您负责的 KPI。对于产品团队来说，这可能意味着激活或用户保留。对于产品营销人员，这也可能是合格的注册和使用指标。
此外，您建立的目标还将帮助您选择正确的方法来收集反馈。例如，客户访谈非常适合在进行初步发现研究时获得定性反馈。另一方面，原型测试最适合在开发前与用户一起验证设计。确立目标是获得做出明智决策所需的反馈的第一步。
提出正确的问题
其次，提出正确的研究问题是获得有效、可靠反馈的关键步骤。确定目标后，下一步是制定您需要发送给用户的调查或为客户访谈准备研究计划。
在制定研究问题时，需要牢记一些重要的指导方针。其中一些是：
A. 避免引导参与者寻找答案
B. 避免封闭式问题，尤其是在客户访谈中
C. 参考特定时刻，例如使用功能或新产品
总结
产品反馈是洞察客户行为和痛点的重要来源，可帮助您在整个产品开发过程中做出明智的决策。
今天在产品和营销领域工作的每个人都将从与客户交谈和倾听他们的意见中受益。随着产品的成熟和客户需求的变化，这些对话不应该是一次性的，而是构建伟大产品的关键部分。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：对啊分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在 Ant Design 的界面设计中，会包含大量的信息组织和编排工作，我们常常会遇到这样的问题：
一个详情页面里应该包含哪些信息？
什么样的信息应该放在卡片里，什么样的信息应该平铺显示？
一个页面内的信息该怎么让用户快速找到重点？
···
信息组织是我们在日常生活中经常会遇到的问题，商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等，各式各样的信息是如何被组织编排到一起，又是以何种方式把信息呈现给用户呢？
在解答这些关于页面设计的问题之前，我想先给大家讲一个生活中的小案例：
逛过宜家的人，应该会注意到宜家类似迷宫的动线设计，这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时，就会被一条隐形“向导”默默地引导着向前走：一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域，直到一个不落地走完才抵达出口。但在这个主线之外，为了确保一些消费者在购物中，能够快速离开或快速去往感兴趣的区域，每个主区域间都有一些较隐蔽的捷径作为辅动线。
这种动线设计一方面能够把所有商品按照路径有效的串联起来，另一方面又能让消费者不知不觉的沿着这个路径去了解商品。
动线布局是宜家的隐形骨架，而真正让宜家卖场丰富起来的，还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样，它不会把同类型产品进行大集合，而是根据人们的正常生活场景来分类，不同类型的产品在同一区域组合陈设，构成生活中的一个小场景，一方面能达到对各个商品功能的完美诠释，另一方面，一个产品尽量不会重复出现，尽可能减少商品展示的复杂性。
在整体商品布局上，有两个很有意思的地方：第一，在居家体验中心，样板间的陈列顺序完全是按照消费者回家后的场景而布置：客厅、餐厅、厨房、书房、卧室、卫生间......，第二，在家居用品中心，则会根据消费者在家的日常起居行为进行摆放：做饭、休息、读书、收纳......
现实生活中的这些例子，对我们的界面信息组织有什么启发呢？
在宜家的案例中，关于动线，映射到人的行为上，有一个比较专业的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最优体验心理学》中对“流”的定义：当人们全身心投入到某个活动中时，会对周边干扰视而不见，这种状态被称为“流”。宜家的动线设计很好的营造了这种状态，让消费者完全沉浸于商品浏览，并且尽量不去打断这种行为流。
经过研究发现，构成“流”的行为动作，其前后必然存在某种连续性或者关联性，例如回家的行为动线，日常起居的行为关联等。这个概念在界面设计中依然适用，很多界面设计都在有意无意的去创造“流”的状态，带给你用户沉浸式体验，例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容，让用户沉浸其中无法自拔。
关于商品布局，映射到信息组织上，《韦氏大词典》 中提到一个词“编配”（orchestration），对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义，宜家的商品和谐的组织构成一个场景，它向消费者传递的不仅仅是商品本身的功用性，更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上，表单页的和谐组织能够帮助用户快速完成信息录入，详情页的和谐组织能够帮助用户快速理解一个描述对象......
各种各样的信息总能以某种关系组织到一起，而如何根据这种流为用户去组织和呈现信息呢？
“流”的本质其实是一系列具有关联性的行为动作串联，而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后，我们可以做一个初步假定：所有的信息是否都可以通过关联性和复杂度来进行组织编排？针对着这两个维度，我们又进行了更深层次的研究和验证，并得到基本定义：
信息复杂度：信息量的大小，包括种类、数量等。
信息关联性：信息之间的潜在关联或者相互影响。
我们设想，这两个维度能否运用到界面设计上的信息组织呢？
界面信息之间的潜在关联或者相互影响，通常体现在「逻辑关联」和「视觉关联」两个层面。
顾名思义是指一个事件中的所有信息之间的关系，在界面设计中，无论什么样的信息，总能以某种方式进行分类和编排在一起，例如手机通讯录中的人名，可以按照字母顺序从 a 到 z 进行排列，电商网站的商品导航会根据类别进行分组，待办事项可以根据时间进行排序等。
如何找出信息之间的逻辑关联性呢？
被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括：
地点（Location）
字母（Alphabet）
时间（Time）
类别（Category）
层级（Hierarchy）
简称LATCH。这五种方式基本可以涵盖所有的信息组织策略，信息是无限的，但是信息组织方式却是有限的。
任何一个界面呈现给用户的时候，用户都会下意识的去判断界面上什么信息是最重要的，接着会去关注这些信息都有什么关联，因此，除了按照逻辑去组织信息之外，还应该合理的去呈现信息的视觉层级关系。
视觉层级关系有几种常见的区分方式：
强调：使用基本视觉元素（颜色、形状、大小等）区分层级
亲密性：位置接近的元素通常是有关系的，而且位置越近，关系越强
图胜于言：视觉符号和对象关联，例如：齿轮或扳手=设置，垃圾桶=删除
浏览顺序：根据浏览顺序，从左到右（部分地区）或从上到下信息重要程度依次减弱
···
如何验证界面元素的视觉关联性是否合理呢？
《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试，为了确保界面视觉信息有效的拉开层次关系，图形设计师经常会用到一个方法“眯眼测试”（squint test）。闭上一只眼睛，眯着另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成组，哪些元素看上去零散。从多个角度去观察，总能够发现之前没有注意到的布局和构成问题。
通常以信息量的大小或样式多少来衡量，这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息，但是信息量较大（超过三屏），则认为这个页面的复杂度较高，或者一个详情页面内同时包括文本、表格、代码展示、图表等元素，也会认为这个页面的复杂度较高。
信息的复杂度和关联性并不是两个完全独立的维度，根据关联性去组织信息，本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究，可以帮助我们如何选择合适的方式把信息呈现给用户。
具体到界面设计层面，信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例，详情页内的信息该如何合理的组织信息并有效的传达给用户呢？
根据关联性和复杂度的概念，我们抽象出一个简单的「复杂度模型」，用来判断信息复杂程度和关联性对页面结构的影响。
横坐标表示页面信息之间的关联性，纵坐标表示信息的复杂程度，两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块，代表复杂程度低且关联性强的内容，例如一段纯文本的产品描述信息；远离原点颜色最深的色块，代表复杂程度高且相互独立的信息，例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。
与之对应的，我们对信息展示方式也进行了维度划分，用来解决在复杂的企业级产品界面设计中，何时使用卡片区分，何时拆分为 tab 等布局问题。
根据承载信息复杂程度的不同，我们对容器组件也进行复杂度划分，用来解决在不同页面布局中，不同类型的信息用何种方式呈现的问题。
这个模型可以帮助设计者在决策布局组件时，有章可循。最终让用户感知，当用户来到一个页面时，即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地：
关于以上的模型在实际设计中该如何操作，这里提供一个推荐步骤可以参考：
「复杂度判断」明确设计对象信息量的大小
「关联性判断」判断各个信息之间的关联性，并合理分组
「组件选择」选择合适的容器组件来呈现信息
「模板选择」选择合适的页面模板，组织编排信息
「眯眼测试」检查整体布局是否合理（仅参考）
大到一个系统，小到一个按钮，背后的每一条规则既要从人的角度去思考设计的易用性，同时也要从信息本身去推敲组织的合理性。作为设计规范的制定者，不能凭感觉简单了事，而是需要找到一套通用的模式，帮助用户快速找到并理解信息帮助用户提效，同时提升用户的浏览体验，是我们一直在探索的课题。
虚拟界面的信息组织和现实世界一样，既需要符合人们对事物的认知，也需要遵循人们的行为习惯，这些认知和行为习惯，构成了自然交互的基础，这也是我们一直在探索方向。当然，信息组织除了以上这种思路，还有更多的思路和方向等待挖掘，期待大家的反馈和建议，帮助我们一起完善。
导读
为什么B端产品总是容易“失控”？B端产品设计与C端有何差异？如何在不断复杂的系统中，权衡效率、成本、体验之间的关系？
本文将带你从B端产品的本质出发，了解产品发展过程中容易出现的问题，并从复杂系统的角度去探讨设计体系的构建方式。
目录
一、「 困局 」容易“失控”的B端产品
A .「 关注重点的差异性 」
B .「 微小差异的不断叠加 」
C .「 产品发展进入恶性循环 」
D .「 进入效率拐点，产品失控 」
二、「 启发 」从复杂科学的角度思考设计
A.「 自然算法 」
B.「 物质的构成原理 」
三、「 探究 」什么是产品设计体系？
A.「 定义 」
B .「 组成部分 」
C .「团队能力要求 」
D .「 构建方向 」
四、「 剖析 」B端产品的生命周期
「 产品生命周期概述 」
A .「 初创期 」解决核心问题，产生价值
B .「 成长期 」能力完善，产品扩张
C .「 成熟期 」效率提升，快速增长
D .「 暮年期 」商业价值降低，发展逐渐停滞
NEXT、「 下期预告 」设计体系的构建法则
前言
随着产业互联网时代的到来，市场对B端产品的重视程度逐渐提升。然而，谈及B端产品，特别是SaaS产品，大多数设计师对此并不是特别感兴趣。一来，SaaS更注重功能层面，似乎本身对设计的要求并不高；二来，SaaS产品的最终实现效果总是不尽人意，就算设计得再好看，实现出来也难以出彩。
确实，若设计师仅仅只是关注视觉层面本身，那么B端产品确实不像C端那么吸引人。但是，若你能以整个产品构建的角度去思考B端产品设计，那么设计师能够在其中发挥的空间是巨大的。
假如把C端产品比作精致的小房子，那B端产品就是一幢巨大的高层建筑。建造小房子，你可以尽情地发挥创意，追逐潮流，大不了推倒重来。而建造大房子，则需要设计师考虑更多的维度，因为这是一个长期而复杂的工程。
建筑的外观不仅需要好看，更需要足够耐看、稳定；为了适应更多人的需求，你不仅要考虑房子的软装，还要考虑户型的合理性、通用性；而为了降低成本，你还需要考虑家具、硬装的标准化、房间的兼容性等等…
“你是否有信心建造一个宏伟的高楼大厦？”
这是我在B端设计中，反复强调体系化思维的原因之一。想要建造一个大型建筑，没有体系化思维、没有更完善的多职能协作流程，那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现，涉及到的沉没成本也将会非常巨大。
当然，对于C端产品来说，体系化也愈发重要了。随着互联网时代的持续发展，一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点：“C端B化，B端C化”。在未来的数字产品设计中，B端产品将会逐渐开始重视产品的外观与体验，因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设，因为产品体量越来越大，需要寻求效率与成本之间的平衡点。
产品设计体系，本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此，不管是B端产品还是C端产品，设计体系能够在提升设计品质的同时，让产品更“可控”，提升效能，降低成本。
这套设计方法论，是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验，也探讨一下数字产品设计未来的形态。
✨
一、「 困局 」容易“失控”的B端产品
-
作为较为复杂的数字产品，B端产品在快速发展的过程中，总是容易出现一些问题。特别是当产品体量到达一定阶段后，问题就会逐渐暴露出来，比如：
1. 产品丑、设计质量低；
2. 组件样式繁多，操作习惯不一致；
3. 新老系统差异大，不同模块体验差异大；
4. 页面结构混乱。
等等…
很多问题大家都能明显地意识到，但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。
随着问题逐渐积累，产品的优化成本也变得越来越高，最终使整个产品已经积重难返。若只是多部分页面/组件进行优化，小修小补，虽然成本低，但成效甚微；若是进行大修大补，那么优化成本将远大于研发新功能的成本。
这种普遍的B端产品现象，被称为“产品失控”，即——团队已经对整个产品的形态失去控制力。
那么，为什么B端产品特别容易出现这种问题呢？
A .「 关注重点的差异性 」
首先，产品的本质决定了其关注重点的差异性。
与C端产品不同的是，B端产品往往更看重“能力”（为企业用户解决问题），而产品的销售方式与付费模式，也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户，需要更长的研发过程，产品的体量和复杂性也相对较高。因此，除了产品解决问题的“能力”之外，产品还需要关注研发的效率及成本。
因此，在产品的发展初期，企业通常对效率最为关注，其次是成本，最后才是体验（能用就行）。绝大多数B端企业，只有在产品跑通商业逻辑，并具备一定用户与盈利预期之后，才会对产品的体验逐渐重视起来。
B .「 微小差异的不断叠加 」
任何微小的差异，在无数次的叠加之后，都会被快速放大。特别是当团队的人员逐渐增多后，放大速度将会呈指数级上升。
为了配合产品的快速发展，产品往往会采用“堆量”的研发模式。增加研发效率，最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面，团队人员也在不断地扩充。
但是，人类不是机器，并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升，但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员，对于产品的认知是不同的。随着团队人员的不断增加，“个体差异性”将会被不断地叠加与放大。
就像“传话筒”的游戏一样，同一个事物，不同的人理解总是不同的，经过多次的“传话”以后，往往与原本的意思已经大相径庭了。
这种情况表现在产品设计中，则会出现：当相同的组件由不同的人做时，总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件，不同的模块在开发时总是会存在差异，最后差异越来越大，形成了五花八门的导航菜单形式。
C .「 产品发展进入恶性循环 」
令人遗憾的是，虽然问题很明显。但是在不断的“成本考量”中，产品团队往往优先关注新功能的开发，而忽略底层问题的优化。
随着产品的快速发展，产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构；要么降低标准，继续以这种模式不断叠加新功能。
在这种情况下，大部分B端产品往往会选择后者。于是，产品的发展将会进入一个“恶性循环”：
产品快速发展，功能不断叠加；
各模块由不同的产品、不同的开发研发，导致各模块之间差异增加；
产品丑、体验不统一，但老系统优化成本过高。综合衡量，优先进行新功能研发；
所有模块标准不统一，产品迭代效率持续降低，维护成本持续增加。
…
D .「 进入效率拐点，产品失控 」
产品的发展犹如一辆快速奔驰的巨型列车，一旦加速便难以停止。
随着问题的反复出现，以及在一次次的“利益权衡”中选择性的忽略，产品的恶性循环不断重复，而问题也逐渐叠加、沉积下来。
当这个问题已经大到我们无法回避时，我们才发现：产品的单位迭代/优化成本，已经远远大于新功能的研发成本。而新功能带来的增量，已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。
就像一个庞大而复杂的机器，虽然依旧可以运行，但整体效率已经很低了，而与之对应的维修成本则非常巨大。小修小补根本无法解决问题，而大修大补则很有可能会带来更大的亏损。
最终，产品逐渐在“失控”中难以自拔，竞争力逐渐降低，但整个团队对此却无能为力，严重影响了企业的发展。
那么，在产品发展中，我们应该如何避免这种情况呢？换而言之，一个高度复杂的数字产品，我们应该如何设计，才能避免其逐步走向混乱？
✨
二、「 启发 」从复杂科学的角度思考设计
-
如果我们将B端产品看作是一个复杂系统，那么产品“失控”的本质即——在不断复杂化的形态中，缺乏有效的控制机制，最终导致整个系统失去控制。
但是，在大自然面前，B端产品这种复杂程度显然不值得一提。
像大自然这样的复杂系统，是如何构成的？所有的物体都由原子所构成，为什么简单的一百多种原子，能够构成如此复杂的世界？生命又是如何在无机物的世界中诞生，并逐步进化成如此复杂的个体的？
A.「 自然算法 」
道生一、一生二、二生三、三生万物...无论是老子的《道德经》，还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点：
任何看似复杂而又可控的系统，一定存在着精简的“算法”，通过不断的叠加从而形成复杂系统。
就像爱因斯坦说的：“宇宙最不可理解之处，就是它居然是可以被理解。”
在大自然中，有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案，这种图案在森林当中到处可见，我们看到很多树的形状跟叶子的形状是一致的，这就是一种分形图案。而这种分形的图案本质上是一个公式，通过不断地自我引用进行迭代，这便是分形。
科赫曲线（Koch curve）就是一种分形。其形态似雪花，又称科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫岛（Koch island）或雪花曲线（Snowflake curve）。
它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段，然后向中间挤压形成等边的倒V形状；接着再将每个倒V的边进行相同的操作，不断地重复之后，我们发现：第一步是倒V型、第二步变成了大卫星，第三部变成了枫叶，第四步… 经过无数步以后，最终成了越来越复杂的“雪花”形态。
科赫曲线便是“自然算法”的一种。海岸线虽然很复杂，但是却有一个重要的特性——自相似性。从不同比例尺的地形图上，我们可以看出海岸线的形状大体相同，其曲折、复杂程度也很相似，换句话说，任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线，它是通过天然的演化，不断折叠最终形成了这种形状。
可以发现，他们都是由 基础物质 x 简单算法 x 随机变量，经过无数次叠加后，最终形成了一个复杂而多变的整体。
B.「 物质的构成原理 」
宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性，普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式，就好像行星围绕太阳运动一样。
不管是整个宇宙，还是生命体，将其置于复杂科学的研究框架中，那些基本定律最终也会变得极其简单。
在宇宙中所知最为复杂的形态，便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是，通过氨基酸的形态，这些基本原料竟能自然地将自己组合成一个自组织系统。
混沌中隐藏的算法，使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数，又使得宇宙成为极为丰富的世界。
也正是因为算法的精简，一切物质的创造才能具备复制性、延续性、进化性。
那么，我们反过来思考——想要使复杂的系统简单可控，是否就需要一套简洁、有效的“算法”？通过“算法”，将基础的“物质”不断地“有序叠加”，形成一个可控的复杂体系。
因此，对于复杂的SaaS系统设计，我开始引入“设计体系”这一概念，希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立，才能保证产品可控性，才能在不断复杂系统中，保证效率、成本、体验之间的平衡。
✨
三、「 探究 」什么是产品设计体系？
-
产品设计体系，在国内仍旧是较为陌生的词汇。什么是设计体系？
A.「 定义 」
一个成熟的数字产品，需要有一个稳定、且持续迭代的形态。创造这个形态的过程，我们称之为广义上的产品设计（这里指产品的整个策划和设计过程，包含策划、交互、视觉及部分前端开发）。而负责控制和维护这个形态的这套系统，便是产品设计体系。
我们接触到的更多是设计系统（Design System），比如平台级的设计体系，Apple、Google、Microsoft等系统级的设计系统，及其设计开发套件、应用生态。公司级的设计系统，如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。
但是，在一个企业内部，想要Design System能够系统性地运转，还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合，才能建立真正的设计体系。
B .「 组成部分 」
如果将数字产品比作复杂的“生命体”，产品的发展比作竞争中“自我进化”，那么设计体系便是产品的DNA。它既是产品形态的控制源，又是不断自我迭代的进化源，它的作用是：
控制产品外观——感知性模型（视觉风格/规范）
制造基础构件——功能性模型（基础/复合组件）
模块的构建规则——模式语言（产品框架规范）
产品标准定义、生产方式制定——协作模型（高度协同的工作流程）
它不仅能控制产品的“生产结果”，提升产品质量；还能规范产品的“生产过程”，形成一套完整的多职能协作流程，提升产品的生产、迭代和维护效率。
从宏观来看，设计体系像是一个“规范的复合体”，它是各职能之间规范的有效整合，产品框架、交互规范、视觉规范、前端规则，同时也是基于整合规范所创造的一套创新的工作模式。
C .「团队能力要求 」
设计体系的建立，需要整个产品团队拥有一致的目标，并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度。
同时，体系化的建立和推动，也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节，是非常有条件成为推动者的角色的。
当然，这就要求设计师拥有更丰富的横向能力。
一方面，设计师需要将自身的能力边界进行拓展，与上下游的职能保持密切的沟通，并解他们的诉求。只有当设计体系满足各方利益时，体系化才有推动的空间。
另一方面，对于产品侧与开发侧人员，设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限，增强产品的综合竞争力。
D .「 构建方向 」
设计体系并非超脱于产品之上，而是根植于产品的成长过程中。
想要推动体系化的建立，必须充分了解产品发展的基本规律。产品处于不同的生命周期，所要解决的问题是不同的。在正确的时间做正确的事情，并对未来的形态进行规划，才能逐步让设计体系根植于产品、融合于产品。
因此，在下一章，我们首先来了解一下B端产品的生命周期。
✨
四、「 剖析 」B端产品的生命周期
-
对于设计师来说，首先要更宏观地了解产品所处的生命阶段，才能知道设计需要解决的问题是什么，并以此有针对性制定不同的设计策略，最终帮助产品构建完善设计体系。
本章更多的是对B端产品的发展阶段做一个剖析，而不同阶段具体的实施策略，会在后面讲解。
「 产品生命周期概述 」
类似于人的成长历程，一个新的B端产品从诞生到逐步扩大，通常都会经历几个不同的生命阶段。
B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。
B端产品从立项到下线，产品会处于几个典型的不同状态中，这就是产品的生命周期。通常来看，大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期，直至最终进入暮年期。
而产品的商业价值，也会伴随着产品的发展而变化。在通常情况下，伴随着产品的逐渐成长，其商业价值也会随之增长，并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时，则基本算是进入了暮年期。
那么，不同的生命周期中，产品将会遇到哪些问题？而为了保证产品的持续发展，产品团队又需要做哪些事情呢？
A .「 初创期 」解决核心问题，产生价值
初创期，即产品已经从构思到研发，并成为了初步的产品。这个时期，产品虽然还不能覆盖完整业务，但已经能够顺利运行。
从构思到创意，再到实践落地。B端产品的诞生，通常源于在行业内深耕多年的资深玩家。在不断地实践中，通过创意与实践，找到了一条能够帮助行业解决问题、提升效率的路径。
1）用户是谁？
B端业务的本质，就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品？哪一类用户的问题最需要通过这种方式得到解决的？这些都是需要在早期非常明确的。
站在普罗大众的角度去规划产品固然是好的，但成功的产品都始于一小部分早期用户；B端产品的用户通常来自某一垂直领域，首先让他们喜欢上你的产品，然后慢慢向外拓展至更大的人群当中。
想想看，最初一千名喜欢你产品的种子用户可能是哪些人？
2）产品能够解决什么问题？
我们要为用户解决什么问题？“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点？
这个时期，团队需要拜访大量的目标用户，通过交流获取痛点。我们必须验证这个需求的真实性，以及我们的解决方案是否具备一定的可实施性。
我们可以通过更具象的UI或流程，初步展示想法，不断优化。最终形成一个可验证的初步产品Demo，并通过Demo进一步与潜在用户进行沟通。
3）这个问题是否普遍？是否具备标准化的可能？
不同企业的需求是有差异的，如何将个性化的需求抽象成共性的解决方案？如何权衡范围与成本之间的关系？我们要将不同企业的需求进行抽象，形成标准化的解决路径。
这个阶段，我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品，要为种子用户带来端到端的精准体验。如果他们不理解产品功能，不知道如何或为什么使用，或是发现其性能低劣、bug 太多，无法达到“可行”的程度，那么你的假设就难以得到有效验证。
4）是否能够形成完整的商业闭环？
用户是否真的会为这个产品买单？换句话说，产品是否能赚钱并且养活整个团队？
B端产品在初创期，最重要的是快速验证产品与业务的亲密性，能否完成既定的商业战略。产品团队需要通过磨合业务，快速调整业务解决方案和产品架构。
不仅是产品的打磨，整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功，我们需要真实地完成这一套闭环的操作，并基于此做团队毛利模型的测算。
解决问题，带来价值，并且能够将价值转化为收益，这才是产品可持续发展的关键。只有跑通完整的商业模式，拥有长期的盈利预期，产品才能顺利进入下一个阶段。
B .「 成长期 」能力完善，产品扩张
成长期，即产品形态初具完善，并具备完整商业闭环之后，处于快速成长的时期。这个时期，产品将进行快速的迭代，覆盖的业务一天比一天完整，能满足的业务需求越来越多，而产品为业务带来的价值越来越大。
与新生期的区别在于，新生期时的迭代方向还未完全明确，迭代更多的是尝试，磨合业务与产品。而在成长期时，产品的迭代方向已经是非常清晰了的。
1）更多用户，更多真实需求
产品在真正投入运营之后，所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖，我们将会接触到越来越多的真实用户，以及更多的真实需求。而这些用户与他们的诉求，将会成为产品发展的指引。
2）解决更多问题，业务范围扩张
经过长期的打磨，产品的形态和可用性已经初步成熟了，商业模式也已经初步跑通。随着更多的真实需求，产品将会选择有价值的方向扩张业务范围，从“解决一个问题”逐渐走向“解决一系列问题”。
3）功能完善，产品体量快速增加
伴随产品的快速迭代，产品的基础功能会逐渐完善，同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面，最终逐渐叠加为一个完整的大型产品。
4）组织逐渐完善，人员专业化
随着业务扩张，组织架构逐渐完善。为了提高专业性与效率，团队人员从“多面手”逐渐转化为专业化方向。与之对应的是，团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功，这一套完整的团队模型在各模块中不断地复制。
C .「 成熟期 」效率提升，快速增长
成熟期，即产品的形态已经稳定，并能够创造持续的商业价值。处于成熟期的产品，肯定是已经进行商业化运行的。反之，没有达到预期的商业价值的产品，不能算成熟期。
进入这个阶段时，产品已经实现了产品-市场匹配。但是，我们需要对整个产品、以及团队进行一系列的调和与优化，才能让整个产品的形态与运作方式更加合理，以便将产品推向更广阔的市场。
1）产品效率、组织效能提升
经过一系列的快速发展，产品体量通常都会比较大，而团队成员也快速扩张。随着一致性成本、沟通成本增加，势必会造成研发效率、组织效能会下降。因此，如何降低产品的单位研发成本？如何让整个团队的组织效能达到最佳状态？是需要解决的问题。特别是当产品具备一定的客户数量以后，单位研发成本的降低将会极大提升产品整体的利润率。
2）产品设计-研发标准化，构建完整链路
通过产品设计-研发标准化、数据架构标准化，打通不同模块的壁垒，提升模块化与灵活性。将单点之间的竞争力相互配合，形成“场域”竞争力。
产品的单点也许不能保证都有最佳的竞争力，但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环，将会形成强大的整体竞争优势。同时，产品设计-研发标准化，能够增加产品售卖的灵活性，通过灵活的组合方式吸引不同的用户，提升销售灵活性与成单率。
3）提供高质量的用户体验
产品最终是给人用的，用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧，以及用户群体的逐渐年轻化，用户体验将成为企业在选择产品时的重要考量因素，也是口碑传播的重要途径。
由于在“产品-市场匹配”阶段需要尽快地推出产品，所以在设计开发过程中可能遗留诸多问题，需要进一步打磨优化。产品设计需要与开发具备高度的一致性，视觉交互是否合理，前端代码是否准确合理，操作反馈是否高效等问题，都需要这个阶段来进行调和。
4）教育市场，卖给更多的人
当产品逐渐成熟并具备一定体量之后，单靠销售跑单是远远达不到发展要求。这个阶段，需要市场部人员对市场进行教育，聚焦不同的行业领域，从“点式营销”转变为“面式营销”，并配合销售人员进行产品的售卖。因此，在这个阶段，产品的品牌力、核心能力的传播将至关重要。
D .「 暮年期 」商业价值降低，发展逐渐停滞
暮年期，即产品发展停滞甚至倒退，逐渐失去商业价值的产品。
B端产品进入暮年期的原因，主要有两个。一是，伴随着业务的发展，产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是，伴随产品的使用时长，产品将变得臃肿和迟钝，逐渐难以敏捷地满足业务需求。
很多时候，商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品，根据商业战略，产品经理既有可能要延长产品的寿命，也有可能持续保障产品完成顺利换代。当然，更多暮年期的B端产品，由于业务的调整，最终迎来生命的终结。
需要注意的是，很多产品因为在成长期、发展期无法建立有效的产品控制机制，导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”，非常有可能加速产品暮年期的到来。
因此，是否能在前三个阶段建立健康、完善的设计体系，是产品能够获得更长生命力、更多价值的关键。
✨
NEXT
「 下期预告 」设计体系的构建法则
-
你的B端产品处于什么生命周期？在这个阶段产品要解决的问题是什么？而在这些过程中设计体系又应该如何构建？
设计体系的建设并非一蹴而就，通常是伴随着产品的而发展逐步建立的。在下一篇文章中，我们将基于B端产品的发展阶段，带你详细了解设计体系的正确构建方式。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
表单对于用户和产品同样重要。当我们需要收集数据时，表单是我们最常采取的方式（也许是由于在互联网普及之前，表单就已经长期应用于我们日常生活中 )。因此，将表单设计得友好易用是提高用户信息填写完成率的关键。
表单拆解
表单的样式会根据业务目标、内容的不同而发生变化，但是有一些基础的组成部分能帮助用户快速顺利地完成表单的填写。
1.类别标题：类别标题能够帮助用户浏览表单并同时解释整个表单的大致内容是什么。当你需要把被收集的信息分类为多个部分时，比如个人信息、职业信息和财务状况，这时类别标题就可以派上用场。
2.文本标签: 文本标签能够提示用户在每个输入框中应该填写什么样的信息。
3.提示文字：文本标签的附加说明。
4.错误信息提示：向用户反馈为什么输入框中输入的信息有误。
5.重要行为召唤按钮：表单末尾的按钮，用来提交表单上输入的内容。
表单状态
在用户使用表单时，有三种最基本的状态能够帮助用户完成操作。
1.默认状态：默认状态是用户未进行任何操作时的状态。
2.激活状态：当用户点击输入框后，输入框就变成激活状态并通过样式的变化强调显示。如果用户视线离开了屏幕一小会儿，这个状态可以帮助用户快速浏览定位。
3.反馈状态：此状态一般在完成一个信息的填写，并进行下一个字段输入的时候出现，让用户了解输入的信息是否正确。对于一些无法立即验证的信息可以在用户提交表单的时候进行反馈。
设计原则
1.保持简单：将表单设计得短且简单。只收集必要的信息，避免让用户分开填写姓氏和名字（分开填写姓氏和名字一般只存在于外国网站）。允许用户查看已输入的密码，而不要让用户填写两次密码去确认。
2.使用内嵌提示：当用户输入信息有误时要给出错误提示，同时要将错误原因注明在相应的输入框旁。
3.组合相关项：将有相关性的填写项组合在一起，然后将它们以合理的顺序整理，这可以帮助用户不必花费太多认知成本去填写必要的内容， 这个过程不仅轻松而且只需要用户很短的专注时间。
4.使用左对齐的文本标签：始终在输入字段上方放置文本标签。不要用文本标签替换提示文字，不然用户在提交表单之前很难检查他们输入的信息，会浪费较多的时间。请把标签放在输入字段上方并且左对齐。
5.根据输入信息的格式设计输入框：简单来说，确保输入框的格式与输入信息的格式协调。比如说，地址的输入框应该比手机号码的输入框更长。
6.CTA按钮（行为召唤按钮）
一般表单的后面会有一个或多个按钮，比如“提交”、“下一步”之类的。在按钮有多个的情况下，最重要、或者是最想要用户点击的按钮应该要突出，而其他按钮弱化处理。
当使用模态视图状态下的表单时，有时会有一个关闭按钮用于关闭模态视图。另一种设计方式是使用叉号图标并将其放置在顶部的右侧边缘，它可以代替关闭按钮，如图所示。
7.搜索字段：当网站内容比较多的时候，把搜索字段做的明显些，方便用户对网站内容进行筛选。同样的，在用户使用了搜索功能获取到结果后，不要清除搜索框内的搜索关键字，因为用户可能会查看最初他们搜索了什么。
8.清晰：向用户清晰地表达信息，不要出现含糊不清的词。用户可能不愿意填写表单，所以尽可能清晰简单。如下图的绿色按钮文字使用“提现”而不要使用“确定”。
原文：https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2
作者：Momoh Silm
译者：Ballen贝林、春风似蛋挞
本文翻译已获得作者的正式授权
授权截图
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
服务设计大家也不陌生了吧，关注我们的同学也看过我们写过很多关于服务设计的文章这其中也有一些枯燥的科普文还有理性讨论的文章，当然也有很多不了解服务设计的小伙伴，所以这篇文章就来帮大家介绍一下：服务设计。
《从用户体验到服务设计：没有人会告诉你这赤裸裸的真相》
《如果你想学服务设计，有哪些可选专业？[备查]》
《为什么要应用服务设计？》
《服务设计和用户体验设计:有什么区别?》
吸引客户并与公司建立联系
服务设计方法帮助公司更有效地执行新思想、满足客户期望、打破藩篱并创造商业价值。通过可视化新的想法和客户旅程，并从第一天就与客户和员工进行测试，这种方法突出了潜在的挑战，并产生想法来缓解它们，从而增强了对想法的信心和对行动的更高承诺。
结论
服务设计关注客户需求，执行想法并创造商业价值。
从最开始，服务设计就通过与客户和员工进行测试来降低商业风险。
在整个公司中共享客户洞见，可以打破藩篱，并使工作一致。
没有良好执行的聪明策略很少能实现卓越的服务。需要工艺、正确的方法和技能，才能以具体的方式将客户与企业联系起来。服务设计是帮助公司实现新的客户体验、满足客户期望、处理内部挑战和创造商业价值的强大工具。
顾客的视角
服务设计方法将人的关注点引入到服务的开发中。它帮助公司以客户的眼光来看待全局，并提供工具来设计客户与整个公司之间的每一个小小的互动。
客户洞见是有价值的
市场调查告诉你客户喜欢什么，但可能无法告诉你为什么。
服务设计者使企业能够更深层次地了解客户。从深度访谈和观察到创意客户研讨会，这些方法帮助公司理解为什么人们经常言行不一，以及寻找下一个大创意。
在整个公司中分享客户洞见也可以有效地打破藩篱并协调工作，这样公司就能够交付通过多种渠道与客户互动的体验。
观察顾客去了哪里，他们看到了什么，听他们说了什么。获得深刻的客户洞见，推动新想法。
眼见为实
让想法看得见摸得着是在组织内部澄清和获得新概念认同的有力方式。这种方法也突出了可能出现的潜在挑战，并有助于产生缓解这些挑战的想法，从而增强对这些想法的信心，提高对行动的承诺。
这就是为什么服务设计者总是在想法和解决方案出现时就将其可视化的原因。一种策略可以以可视的格式更有效地进行沟通，客户和员工之间的交流配上一段动画就会更容易理解，一个提议可以通过web界面的设计细节得到强化。
服务场景可以让企业立即了解新服务对客户和员工意味着什么。
服务蓝图
客户互动或接触点的关键时刻，越来越多地蔓延到公司的不同部分。
服务蓝图是一个可视化的工具，帮助公司协调不同的部门作为一个整体一起工作，以创建一个好的、一致的客户体验。蓝图是一幅地图，描述了客户通过新服务的旅程，以及公司如何通过各种渠道与他们接触。新客户体验的愿景共享有助于部门之间的协调，并使他们更致力于项目。
服务蓝图使公司能够看到各个渠道必须如何协同工作才能提供良好的服务体验。
测试体验
尽管在研发方面投入了大量资金，但仍有很多产品和服务在客户或交付成本方面失败的例子。
服务设计者通过让客户和员工从第一天就参与到测试中来降低这些风险。因此，在大量资金投入技术或公司变革之前，公司就可以学习、改变和完善理念。
可以快速而廉价地构建服务原型。设计师使用简单的模型和场景对少量客户和员工进行测试。在后期阶段，客户和部门数量有限的试点也可以产生更多的证据，证明服务可以在更大的范围内发挥作用。
一项针对英国无工作人群的为期9个月的试验证明了不同的人群是如何成功进入职场的。
它很有趣！
服务设计师被训练成以高度协作的方式工作，并拥有广泛的创造性方法来将这种思维模式带到公司中。
系统的、创造性的解决问题的方法的结合产生了大量的解决方案，并激励着团队不断创新。让我们玩得开心!服务设计方法放大了你克服障碍的潜力，使雄心勃勃的想法成为成功的现实。
我认为服务设计是当今商业世界中最重要的设计分支。-Kerry Bodine, Forrester Research副总裁兼客户体验部首席分析师
持久的客户关系
服务设计提供了创造性的、以人为中心的方法、工具和技能来执行策略。用这种方法来弥补公司所能做的和人们需要和想要的之间的差距。其结果将是创造更好的体验，建立持久的客户关系。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：马克笔设计留学
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com