UI 设计，是用理性方法，来满足需求，并带来美学享受。
本篇探讨 UI 设计如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性吗。
UI 设计主要有四类理性：基本原则，基础知识，风格设定，风格把控。四类理性有一个共同核心：活学活用。
共有四个基本原则：对齐，对比，亲密，重复。
先说对齐。
秩序产生美。对齐作为一种基本秩序，主要事关整齐美观和阅读体验。
对齐一般分左对齐、右对齐和居中对齐。
从阅读体验角度来讲，左对齐通常胜过居中对齐，所以绝大部分文章和 UI 界面都是左对齐为主。
从美感角度来讲，居中对齐往往胜过左对齐，所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。
从空间利用率角度来讲，右对齐往往是左对齐的一种补充。比如微信的发现页面，最重要的图标和文字左对齐，次要的右箭头和其它信息右对齐。
UI 设计追求阅读体验、美感和高空间利用率，所以这三种对齐方式大部分时候都会同时出现。整体而言，是以左对齐为主，居中对齐和右对齐为辅。
再说对比。
嘈嘈切切错杂弹，大珠小珠落玉盘。音乐讲究韵律和节奏，设计也追求错落有致的节奏感。这种节奏感，很大程度上靠对比实现。
好的对比可以带来视觉张力，就是抓人眼球的吸引力，同时也能起到主次分明和视觉引导的作用，最终带来良好的阅读体验。
一定程度上，对比是无处不在的。只要存在不同，就存在对比。比如大小之间的对比，不同颜色之间的对比，文字与图标/图片之间的对比，不同对齐方式之间的对比，等等。
一般而言，对比需要果断：若不同，就彻底不同。因为一般情况下，充分的对比能带来更好的视觉张力和更好的阅读体验。
第三说亲密。
设计就是分类，张小龙曾如是说。分类中最重要的原则是亲密，还有一个副产物是留白。
性质相同或相似的元素，我们会让它们看起来离的更近，关系更亲密。亲密成就分类，分类能化繁为简。
最后说下重复。
设计追求一致性，一致性主要靠重复来实现。被大量“重复”的元素，比如这篇文章里的字体大小和字体颜色，既保证了一致性，又提高了效率。
基础知识主要包括：手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。
UI 设计师可能不用画卡通人物或插画，但一定会画图标和 logo，这些也会用到手绘。作为造型基本功，需要掌握一定手绘技能。
颜色方面，最重要的是能够很好感受和理解颜色传达出来的感觉，也即颜色的“精神之美”，这块主要依赖审美和练习。
配色方面，推荐软件里的 HSB（色相、饱和度和亮度） 模式，这种模式很好理解，也方便调色。另外还强烈推荐从照片中吸取颜色，因为照片往往会和“生活”、“自然”有一定关联，“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。
版式设计就像是选秀节目中练习生的舞台表演，考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力。
“活学活用”环节，会结合例子分享版式设计。
字体设计、品牌设计、动效设计、插画设计等方面，个人经验不多，就不分享了。文末会附一份推荐书单，囊括基本原则和部分基础知识。
风格设定，即上篇提到的“精确描述”，是在动手设计之前，先探索出合适的风格，并把它精确描述出来。
好的开始是成功的一半。风格设定是一个开始，极其重要。如果风格设定只做到 60 分，稍微打点折扣的执行结果就是不及格。所以，如果要把设计做到 85 分，风格设定一般要做到 90 分。
风格设定犹如在茫茫大海中行船，首要目标是把握方向，核心诉求是精准。海上并无现成道路和导航可循，只能依靠繁琐而严谨的推理和计算。
风格设定的次要目标是划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”，核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么，“圆圈”以外代表什么。
在“精准”和“周密”上同时做到优良，风格设定才能做到优良。
既精准又周密的风格设定，通常无法一蹴而就：“风格设定”阶段一般只能做到七成，剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。
风格把控有两层含义，一是实现当初设定的风格，二是在实现的基础上做到统一和规范。
只要严格在“圆圈”里发挥，实现当初设定的风格并不难。那做到统一和规范难吗？往难了说就是需要做大量琐碎工作：以联系的眼光看待所有设计元素，并把它们分类规整好，注意分类不宜过多，同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。
风格把控就是在划定的“发挥范围”内，利用设计知识和经验，以规范的方式实现规划好的风格。
活学活用作为四类理性的共同核心，最典型的应用场景是版式设计。
活学活用有两个要点：正反结合，风格第一。
所谓正反结合，是指设计知识既能正着用，也能反着用。最常见的例子是对齐原则，大部分时候是正着用，但如果想要营造活泼的感觉，也会反着用：故意打破对齐原则。
除了对齐原则，其它设计知识，比如重复原则，也可以反着用。
本文配图就是一个例子：图片左上角、右上角和右下角分别散布着装饰元素（横线、圆环）和 logo，在装饰元素的出现次数上，没有用重复原则。过年家里挂灯笼一般至少挂两个，同一装饰元素一般至少出现两次，以达到一种和谐和较为热闹的装饰效果。
我在装饰元素的出现次数上没有用重复原则，而在出现位置（相似位置）、元素大小（相似大小）和元素颜色（相似颜色）上用了重复原则，同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则，是想放一个隐喻在这里。
所谓风格第一，是指设计风格永远第一，设计知识永远第二。知识服务风格，切不可重知识轻风格。
《倚天屠龙记》中，张三丰教张无忌练习太极剑时，要他忘记剑招，只记剑意。某种程度上，版式设计也要将“剑意”放在第一位，“剑招”服务“剑意”。
对比原则也有反着用的时候。有一条关于对比的知识：对比要果断，若不同，就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比，但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色，无对比。
设计最重要的是感染力，感染力主要来自个性、态度、价值观这些风格层面的东西，而非设计知识这些技法层面的东西。
当一个设计，技法高超而风格不足时，感染力和魅力就会不足，这也是设计师经常会犯的错误，大家需要注意。
可以简单分成三步：规划，成形，细化。下面结合微信 Redesign 这个案例来说明。
设定风格，用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”（在红、黄、绿三种颜色的卡片上写下不同的设计关键词），并和“情绪板”法有相似之处：都包含关键词定位和图片参考两部分。
先说关键词定位，共有两步。
第一步类似头脑风暴，结合产品属性、用户属性、市场情况、个人喜好等因素，把能想到的设计关键词全部写下来。合适的不合适的都要写，只要想到了就写下来，确保有二三十个。如果关键词数量不够，这个步骤可以多重复几次，直到够了为止。这一步设计师和需求方都要参与进来，在提供关键词上双方是平等关系。
这个微信 Redesign 是个具有探索性质的小练习项目，基于微信 7.0，有两个目的：首先保留原有交互体验和品牌识别度，其次在视觉上更年轻、更流行。可以通俗理解成：一款微信“皮肤”，主要给年轻用户和赶新潮的中老年用户用。
结合产品属性（社交类、工具类、内容类）、用户属性（年轻用户为主）、市场情况、个人喜好这些因素，这一步想到的关键词如下图所示。
第二步是归类，就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够，还可以再补充。这一步依然是需求方和设计师共同参与，但需要设计师来主导。
红色关键词代表不能踩的红线：不能这样做；黄色关键词代表黄灯警告：这样做不太合适；绿色关键词代表畅通无阻：应该这样做。
需要注意的是，绿色关键词最好控制在 3-4 个之间，如果超过 4 个，就需要分成主绿关键词和次绿关键词，主绿关键词依然要控制在 3-4 个之间。这样做有两个考量，一是确保简单和重点突出，二是也更容易实现。
回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法，所以“拟人”这个关键词显得意义不大，故删去。“温润”和“亲和”，“老少皆宜”和“大众”在语义上都存在一定的重复，所以删去后者。删除这类不合适的关键词后，剩余关键词就按“红绿灯”法归类，归类后情况如下。
（微信 Redesign 之按“红绿灯”法归类后的设计关键词）
关键词定位已就绪，再来找参考图片。
可供参考的图片有两大类：照片和 UI 界面。UI 界面也有两类：线上作品（真实项目、练习作品等）和上线作品。
做 UI 设计，参考什么样的图片？个人建议，做什么类型的设计，就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面，banner 就重点参考 banner。
UI 界面的设计，个人喜欢重点参考知名产品的上线作品。单从视觉角度来说，上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计，其风格的形成往往都会经过很多推敲，会有很多比较成熟的设计思路在里面。
参考别人的设计，最重要的是参考设计思路，其次才是参考表现形式。这种设计思路，有时候能从网上找到，但更多时候靠自己推测。
微信 Redesign，根据“很多年轻人在用，且风格比较流行”这条主线，找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图，看完一圈后，就会面临一个问题：以图标为例，这几个产品的图标，风格各异，但基本都具备“年轻”和“流行”的特点，那应该参考哪一个？
这时就要求助关键词定位。除了“年轻”和“流行”，主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频：很多老人和小孩也会用这两个 App 看视频，网上公开的数据也能佐证这一点，所以它们的设计一定会照顾中老年用户的审美。
最后，出于个人偏好，我选择重点参考爱奇艺的图标风格，具体而言就是：深浅双色、较粗(1.5pt)描边、圆润风格。
红黄绿三色关键词及重点参考图片就绪后，就可以动手设计。
我一般会把界面设计粗略分成三大部分：版式风格、元素风格、元素大小，元素为图标、图片、按钮等，然后去一一实现。
先说版式风格。
用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括：更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括：更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。
再说元素风格之图标风格。
图标主要参考爱奇艺 App：其一，底部导航和发现页的图标都是深浅双色加较粗的描边；其二，除了更圆润以外，部分图标还变 Q 了。
最后说元素大小。
以这个小项目为例，最主要的元素大小是图标大小和字体大小，它们会影响整个设计的感觉。通常情况，元素越小，给人感觉越精致、越高端，此其一；其二，可能是年轻人和老年人视力存在差别的原因，越小的元素往往代表年轻人的审美，反之则代表老年人的审美。
元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说，需要在年轻人和中老年人的审美中找到一个平衡，所以元素大小基本直接参考了微信 7.0 的设计，个别地方做了微调。
最后，出来的效果如下图所示。
这份设计我发在了网上，部分网友留言说看着不够好，不太舒服，有一个表达的比较具体——“虽然用了大面积留白，却让人感到紧迫...”。
基于网友的留言，我仔细审视了这个设计，最后发现问题主要出在页面（发现页为例）左右两侧：留白过小。
当初之所以这么设计，是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉，从而营造一种活泼的感觉。注意，彼时“活泼”还没出现在“黄色”关键词里，上文两张关于关键词的图都省略了中间探索和优化的过程。
很多网友之所以没有感受到活泼而只是觉得不太舒服，至少有两个原因：第一，整个设计的基调是简约、清爽，有一定的年轻感和流行感，但没有太明显的活泼感，硬往里面某个地方塞“活泼感”并不和谐，大家也难以感受到；第二，单纯就“活泼感”而言，做的依然不到位，比如图标与右侧文字的留白，可以比图标与左侧边界的留白大，方能更好彰显活泼与活力。
考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品，“活泼感”用在这里并不十分合适，于是放弃，并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作：整体和谐与舒服。于是就把留白相应调大了。
另外一个优化的点是“眼睛”的形状：微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”，这双“眼睛”起初是竖着的椭圆形，很萌，也比较低龄化。为了尽可能的“轻微老少皆宜”，这里统一把“眼睛”由竖着的椭圆形改成了圆形，弱化了“萌”和“低龄化”的感觉。
还有一块是颜色上，拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”，但不太符合“轻微老少皆宜”，所以最后放弃了紫色，保留了蓝色。
遵循主绿关键词里的“轻微老少皆宜”，其它优化的点有：微信图标尖角处的圆角调小，删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化，比如颜色、留白、圆角大小、字体大小方面的微调。
优化后的微信 Redesign，整体效果如下图所示。
凡事预则立，不预则废。UI 设计如何做到理性，最核心的是设计风格，规划、成形和细化都紧密围绕设计风格展开。
最后，尝试总结下“红绿灯”法的优势，主要有四点：精确、周密、稳妥、高效。
关于设计风格，传统规划方法一般只有三四个“绿色”关键词。
“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词，从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词，从而确保划出来的“发挥范围”更周密，极少有疏漏。
在“成形”这个设计环节，一旦踩到“红线”和“黄线”，规划好的红黄绿关键词都会马上发出警报，从而大大降低“违规踩线”行为的发生次数，确保设计执行环节的稳当可靠。
“红绿灯”法通俗易懂门槛低，需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与，理论上可以降低后期的返工和修改次数，从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。
UI 设计，始于理性，但无法止步于理性，还需要超越理性。注意，这里的理性，仅指设计知识的相关理性。
超越理性主要有两点：直觉，其它知识。
直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。
感知和评价别人的设计时，用到的几乎全部是直觉。审视自己的设计时，也离不开直觉。
在审视自己的 UI 设计时，直觉主要发挥两个作用：第一，囿于知识储备或表达能力，有些地方就是解释不清，这个时候就要靠直觉去感受去判断；第二，直觉往往会作为检视设计的最后一道关卡，也是最重要的一道关卡。
直觉来自哪里？
个人观察是，直觉往往和审美正相关。比如一个设计师，他掌握的设计知识有限，经验有限，对自我的要求也不高，最终的作品往往不出彩。但如果他审美好的话，往往能够分辨出不同设计方案之间孰优孰劣。
如果你想就设计稿征求别人的意见，请去找那些审美好的人。
其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动，其灵感应该来自生活中的摇头求饶或吓得发抖，抖动的幅度和频率则需要利用物理学和数学方面的知识。
优秀的设计，一定会从生活中汲取大量灵感，并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说，在好的设计中，一定是个常客：因为你需要不停的按计算器，从而计算不同设计元素之间的比例关系和各自的大小。
汝欲学诗，功夫在诗外。遣词造句这些文字技巧只能是写诗的基础，而非关键。写诗的关键在于你对生活、对世事的积累和感悟，在于你的思想是否深刻，情怀是否充足。
写诗如此，做设计亦如此。设计知识只是做设计的基础，而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点，就不展开了。
UI 设计里的理性，主要是各类设计知识。理性的核心在于活学活用各类设计知识。
理性严谨的做 UI 设计，可以简单分成三步：规划，成形，细化。好的开始是成功的一半，一个高质量的规划显得尤为必要。
用“红绿灯”法做规划，并指导成形和细化工作，会更精准、周密、稳妥和高效。
UI 设计，是七分理性，三分直觉。审美越好，直觉越准。
优秀的 UI 设计，一定会从生活中汲取大量灵感，并广泛利用设计以外学科的知识。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
原文地址：胡晓波工作室（公众号）
作者：猴子
转载请注明：学UI网》【字体设计】品牌标准字怎么设计？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
汉字是来自自然的语言，有着生动的内涵和规律，笔画的点转横折，勾勒并呼应品牌的内在魅力，在积累和沉淀的这些作品中，通过汉字的美学理念表述着品牌独特的形式风格，以上作品，一起来交流吧！
© 版权所有，未经允许不得私自使用！
感谢关注
贺冰凇视觉艺术
原文地址：站酷
作者：贺冰凇
转载请注明：学UI网》贺冰凇品牌汉字卷！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
根据不同内容进行视觉呈现，可以在不改变布局结构的前提下，带来差异化的感官体验。主题化设计就是在背景层和元素层进行视觉发挥，不改变原生结构，被众多产品进行设计发挥。
比如优酷 APP 在视频播放页面，视频窗口下方区域会根据影视作品特征进行主题化设计。会在背景、图标、按钮和选择器等元素上面进行主题化设计，情感化的设计更能带给用户共鸣感，提高用户对产品的感官体验。
空状态的设计从生硬的文字提示延伸到情感化的表达，运用更加视觉感的形式带给用户良好的感官体验。
最近在体验酷狗音乐时，初次进入播放页无歌曲时，采用黑胶 CD 作为空状态展示。当用户操作分享时则会以精美的配图来强化空状态，带给用户反馈的同时，也提高了播放页的视觉感。情感化的设计更能与用户产生共鸣，增加用户对产品的好感度。
用户在进行功能操作时，除了底层需求层面的反馈以外，反馈设计的视觉感也是至关重要的。好的设计可以加强用户对产品的好感度，让功能操作也能赏心悦目。
最近使用荔枝 APP 进行录音时，轻拟物的录音机设计印象深刻。在录音过程中磁带进行动效转动，带来场景化的真实感体验，停止录音时也会停止转动，动态的及时反馈提高用户使用体验。轻拟物动态设计不仅强化了视觉感，动态及时反馈也是非常不错的设计表达。
产品的流量区域属于众多功能争相曝光的区域，在这个方寸之间的设计发挥，体现出了设计师的能力。如何将有限的资源发挥到极致，带给用户更多的功能体验，需要产品设计师多在交互层面探索。
最近在使用酷狗音乐听歌时，底部标签栏上方的播放状态区域给用户提供了播放/暂停和切歌等操作，可以左右滑动来进行延伸功能切换。用户可以选择默认状态进行歌曲之间的操作，也可以向右滑动以显示歌词为主，方便用户在听歌时观看歌词。在方寸之间通过滑动交互承载了多重功能，满足用户更多操作体验，提高用户对产品的使用体验。
针对一些重点功能的按钮设计，在按钮造型、配色、图标风格、微动效等方面都在不断强化，以此来提高功能的关注度。
荔枝 APP 在录音模块中，为了突出录音按钮的存在感，结合了动态 IP 来进行强化。IP 形象从右下角出现与消失的动态效果，提高了录音按钮的关注度，俏皮可爱的形象也增加了设计的趣味性。
产品除了在使用体验层面不断优化以外，主要还是需要传递服务价值。服务的升级可以提高用户的认同感，情感化的设计可以辅助服务的可视化呈现。
自如在“家福卡”模块中，顶部视觉区域通过动态礼仪进行升温设计。每次进入都会有人偶形象打招呼，显得非常懂礼貌，使得用户感受到被尊重，提高了亲和力。通过动态形象进行礼仪表达，不仅提高了栏目的关注度，也让用户感受到这是一款有温度的产品。
用户反馈是打造优质产品的关键，如何提高用户反馈的意愿至关重要，设计师都在不断的思考和尝试。
自如 APP 在采集用户反馈时，设计了底部弹出的形式，询问用户是否愿意推荐自如。从绝不到强推设置了 0-10 分，当用户选择 9 分或以上时直接提交，低于 9 分可以描述原因。相对于比较隐藏式的用户反馈设计，这种打分制的形式用户操作更加便利，不会占用过多时间，用户参与的意愿也会更高。
注册应该算是用户比较排斥的操作，但也是不得而为之的事情。通过情感化的设计降低用户的排斥感，在趣味体验的环境中完成注册，可以带给用户更好的使用体验。
最右 APP 在注册时，进入注册界面 IP 形象以打招呼的形式出现，当用户输入密码时则会双手蒙住眼睛。IP 情感化设计带来了更多趣味性表达，以此推动了更加人性化的设计体验。
分类设计采用纯文字的表达显得比较单一，也有一些产品会结合图标或者图形设计进行装饰，以此来强化关注度和视觉感。
最近在使用肯德基 APP 点餐时，发现纵轴导航的分类设计结合了品类图标，提高了浏览辨识度。运用图标来强化可视化设计，提高用户点餐时对于品类的辨识度，也能强化当前栏目和默认品类的差异。小小的改变不仅优化了视觉感，也能带给用户更好的感官体验。
对于运动类产品来说，运动后的数据展示对于普通用户而言显得比较生硬，理解度来说不够直观。可视化的设计提供了更好的解决方案，看图比看文字更直观易懂。
One More 提供了简洁直观的训练数据预览，通过可视化的形式展示训练后增强的肌肉部位，以及通过肌肉颜色变化体现训练的强度。通过人体结构结合训练强度进行可视化表达，不仅可以提高用户查看训练数据的关注度，也能提高数据的理解度，增强用户使用产品的体验度。
个性化设计可以满足不同用户的使用需求，也能体现出产品的差异化服务。提高设计的差异，带给用户更加人性化的体验至关重要，无论是感官体验层面还是功能操作层面，只有带来不一样的体验才能提高用户的黏性，增加用户对产品的好感度。
今天给大家分享的这 10 个优秀案例，希望可以开启大家的设计新思路，在常规解决方案的基础上延伸出不一样的设计创新。
原文地址：黑马家族（公众号）
作者：黑马青年
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
又到了一年一度的龙虾季，龙虾最好吃的时候是6月、7月、8月，这三个月是龙虾长得最为强壮，个头大，肉质丰满，也是最好吃的时候，码字的时候想想这肉感口水都快流出键盘了，我先去舔下吃完龙虾的餐盘先。
没有一只龙虾能活着离开厨房，同时也没能逃过设计师的鼠标和创意之手。接下来就带大家分享关于龙虾类型的设计，滑到最后有彩蛋哦！
、
看了这么多不仅是嘴馋，作为设计师的你们是不是手痒也想自己用龙虾创作一把，于是我在吃完龙虾后，拍了下面的这个场景。
突然想到国内《神话》电影中成龙有一场类似的场景，于是与《权利的游戏》海报中的风格结合下，虽然画风有点暗黑。
但是如果从小龙虾的角度来看，这几个月对它们来说是个灾难，这也是作为龙虾最后的倔强。
虽然一想龙虾挺惨，但作为国人夏季夜宵时必备的龙虾，实在控制不住十三香、蒜泥、冰镇、蛋黄各种口味刺激食欲的味蕾，吃货的本性再次打败了刚刚对龙虾稍有些留存的感性
原文地址：修先森撩设计（公众号）
作者：修先森
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
2020 年 9 月上线，大概用了一年的时间，在核心功能上就已经与 Figma 对齐，而在这一年半里，他们还做到了很多不同且明显有考量国内用户习惯的特色功能，下面，就挑几个我比较感兴趣的点展开聊一下。
轻松管理素材、实现高效复用
有 Figma 在先，做资源社区已经成了在线设计工具的标配，而「即时设计」从一开始，就额外给出了一种与众不同的资源形式——资源库，用于提高组件库、图标、插画等素材的复用性。
与其他工具「选好资源——创建副本至工作台——打开文件复制所需元素」的流程不同，资源库类型的资源，只需一键「引用」，即可将对应资源保存至进编辑页面左下角的「资源库」，然后做设计时可以一键拖拽复用。
同时，资源库的内容会和广场上公开的资源保持同步，发布者新增、修改、删除内容，引用者都可以实时更新，虽然暂时只允许官方发布资源库，但实用价值可见一斑。
另外，即时设计的资源库不仅能保存广场中的设计资源，还可以把编辑区域所有可见内容，包括个人收集的常用图片素材等，一键上传并保存，在任何一台电脑上登录账号就能随时使用，相当于给了你一个不限容量且所见即所得的设计云盘。
比起像 Figma 一样平铺展示所有文件的“粗放模式”和团队的一级项目管理，即时设计增加了可以自由嵌套，不限制层级的文件夹管理功能，同时，还适配了拖拽和列表移动的操作。
而对于单个文件的管理，即时设计也根据国内用户习惯进行了优化，通过「跟进文件」，可以将你自己近期需要处理的文件专门整理到「正在跟进」页面，快速查看。
针对团队的协作需求，即时设计还做了一个「文件状态标签」，可以给文件打上自定义的标签内容，比如进行中、评审中、已完成，既能直观了解项目情况，又能进行筛选，有效地提升了团队用户对接效率。
从这些点里，相信大家都能能看得出，即时设计团队对一些细节需求的洞察能力，而且在很多方面都做了足够多的思考。
导入 Figma、Sketch、XD，导出 Sketch
为了满足设计师的迁移需求，即时设计支持了 Figma、Sketch、XD 三种主流文件格式的导入，同时，它还是最早支持 Sketch 导出的设计工具。
除了上面提到的，还有很多能看出有特别考量的功能，可以一键导入个人字体包的云端字体库，可以远程预览设计稿并打点评论的手机 App、微信小程序，自定义多彩主题……
虽然插件市场还没开放，但也有了不少吸引人的第三方合作插件，比如「字由」、iconfont、IconPark 等等，都是在 Figma 里不曾有过的体验。
创新能力，我们自然是有的，而且还很足，国内不管是庞大的用户基数，还是独特的软件环境，也都会让我们的国产工具得到更加特别的发展。
本土工具的自主研发之路还很长，但「即时设计」无疑是开了一个好头，而且步子迈得昂首挺胸，我也相信，他们有能力，之后给出更多的惊喜，支持国产，不妨一起期待一下~
即时设计：https://js.design
原文地址：功夫体验设计（公众号）
作者：彩云Sky
转载请注明：学UI网》为什么说是时候选择这个工具了
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在产品设计中动效很常见，一个好的动效方案在提升用户视觉和心境体验的同时，还的的确确解决了很多其他设计问题。
好的动效设计总是在比拟现实，所以当我们思考为页面添加动效时，不应该感性的随心所欲的发挥自己的创意激情，而应该像科学一样，有一些基本的方法原则指导来我们，以此提升动效可用性。
今天主要分享一下在数字产品中动态设计的13个基本原则，希望对大家有所帮助。
▍缓动 ․
现实世界中绝大多数物体都不会突然运动，再保持匀速，最后突然停止（机械类运动除外）。而是缓慢加速或缓慢减速，这就是缓动。
缓动几乎适用于产品中任何元素的出现或离开、以及部分图数据加载等。
滑动内容
图表加载
在加载信息时，我们可以对信息归类分组，并按顺序依次延迟内容出场时间。这就是延迟与偏移，可以清晰的表达内容之间的关系。
在二维平面，如果信息很多，为了避免信息过载，我们可以将不重要的信息，或负面操作放置在前景内容后面，这就是叠加。用来模拟现实纸张叠放，创建出二维平面中的前后空间感。
当我们点击某个内容时，我们通过改变内容中某个主要元素（用于视觉引导的过渡元素）的轮廓并移动，这样可以将用户自然的带入下级页面，这就是蒙版。通过保留过渡元素的识别性，创建出无缝过渡，降低用户跳转页面时可能产生的迷失感。
现实世界大多数物体运动轨迹都是弧线，所以当位于角落的元素移动时，我们调整运动轨迹呈弧线，可以让元素运动更加流畅自然，这就是弧型。
注意：下面案例中元素上移是从左下往右上的弧线，但回来不是原轨迹返回，而是将弧线对称反转（类似抛物线），从右上往左下。
如果一个主要操作中包含其他操作，在用户与其互动时我们可以直接将元素分离出来，这就是克隆。再通过模拟现实世界中液体分离，可以清晰的表达出内容的包含关系。这类设计常见于底部的舵式导航按钮，点击后出现一系列功能图标。
将两个元素的属性进行关联，通过影响其中一个元素的属性，去影响另一个元素，这就是父子级绑定。给两个元素创建了一个隐形的传动轴，呈现一种用户正与内容进行实时可控的互动方式。
下图是通过小圆圈的旋转属性影响中间数值。
当某个元素存在先后两种样式时，我们可以给元素路径设置动态，使其形状从起始状态逐渐变化到结束状态，这就是转换。从起点到终点的无缝过渡，清晰自然的表达出任务结束。
在一个二维空间中，一屏展示的内容有限，当触发另外一个二维空间时，为了减少页面跳转，我们借助中间层并降低不透明度，或把背景模糊，这样可以将它们同时放在一起展示，这就是遮罩。帮助我们理解当前空间与原本空间之间的关系。
当看二维平面有些乏味的时，我们可以给页面赋予三维空间的深度，像真实世界的物体有厚度一样，用来表达该页面存在其他可以互动的侧面。这就是多维度，解决原本二维平面没有深度的问题，也带来更强的位置感。
线上产品中：
【哔哩哔哩】有做下图中类似的3D页面翻转效果（我一时忘记在哪个模块，有知道的同学可以留言告诉我，谢谢）。
【红板报】有做翻页效果，感兴趣的同学可以去看下。
金融和运动类产品中数字很常见，每次加载数字时，我们可以赋予数字动态变化，这就是数值变化。作用不仅仅是传达出数字的动态性质，更重要的是强化数字与用户的绑定关系（类似上秤后上涨的数字告诉你又“强壮”了。嗯？继续努力），让用户更加积极的维护数据变化。
界面中元素的运动速度并不是始终一致，当有多个元素时，为了建立良好的层次结构，我们可以让重要的可交互的元素运动速度更快，非交互元素运动速度更慢。（也可以根据设计目标反过来处理）这就是视差，将用户视线引导到可交互元素上，同时让非交互元素保持动态一致性。
页面中，我们始终在处理内容的展示与空间转换，为了能看到更多内容细节，我们让内容支持缩放来模拟相机变焦。为了能体现内容与内容在空间上的关系，我们模拟摄像机推进和拉远，这就是缩放与推拉，带来了更多的深度与空间体验以及无缝转换。
缩放
推拉
原则用于参照，在理解原则的基础上去打破。这样，动态设计将给我们带来了更多可能性。
尽管一些效果在当下实现上任然有着较高的成本，但相信随着技术的发展，在将来的产品设计中会看到越来越多让我们惊艳的设计解决方案，只是在这个过程中还需要我们共同努力鸭！
参考文献：
https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
作者：幺零三
转载请注明：学UI网》UI动效设计原则
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
删除逻辑是怎样的？
无法找回：是否需要二次确认设计、以及展示删除后结果）
可以找回：是否需要展示如何找回的说明？
删除对象：
是单个、批量还是全部？
删除方式：
手动删除：点击删除还是滑动删除？
自动删除：何时开始？是否展示剩余的时间
删除状态：
包删除成功提示、删除失败提示、删除过久的提示
数据的处理是怎样的？
信息/逻辑是否会发什么变化、是否自动保存进度/记录、是否影响后续链路里的逻辑处理
中断方式：有意、无意中断的处理都是怎样的？
中断程度：后台继续运行还是彻底退出后台？
软/硬件变化时的处理：
包括耳机的连接与切断、电话的来电与挂断、网络的中断与恢复
显示是否有边界值？
包括最小值、最大值、到达特定阈值
显示是否有时效性？
内容过期时怎么显示？到达某个阈值时怎么显示？内容不存在的显示？
其他考虑点：
· 显示格式：如日期时间的数据格式：2022.05.01 2022-05-01
· 显示分辨率：各种分辨率下如何显示，最大，最小考虑极致情况
· 显示样式：是否对齐组件？需要统一？是否有差异化设计
加载前中后该如何显示？
包括默认状态的显示、初始状态的显示、加载中的显示、加载过长的显示、加载成功的显示、加载失败的显示、加载为空的显示等等。
加载方式：
手动加载还是自动加载？优先加载哪些内容（文本或图片）？
加载范围：
展示数量是多少？一次性全量展示还是分页加载展示？
push机制：
推送内容说明、全量用户还是局部用户、推送的时间/周期/次数等都是怎样的？
push交互：
跳转：原页面删除、无法进入、push过期时该如何处理？
返回：返回到哪里？
· 当期操作进度、记录是否保存？
· 是否需要展示退出说明、原因？
· 退出程度：
是当前页面、某段流程、退出后台运行、杀死后台、还是手机关机？
· 默认排序是怎样的？正序还是倒序？哪个选项优先
· 排序维度是怎样的？按时间/销量/质量/数量/评分/信用等等排序
· 是手动刷新：如下拉刷新、点击刷新
· 还是自动刷新：何时开始刷新？是否提前告知用户？是否提前自动保存操作记录
· 缓存机制是怎样的？包括缓存对象、数量、范围
· 缓存位置是哪？手机本地、服务端
· 缓存的清理是怎样的？自动清除还是手动清除
好了，以上就是一些常见的交互机制，希望你在输出交互方案、产品为文档时有所帮助，避免漏掉一些内容，减少和开发的相爱相杀。
原文地址：和出此严（公众号）
作者：和出此严
转载请注明：学UI网》了解这9种交互机制，不怕跟开发相爱相杀了~
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1.1音乐故事
我大概2011年左右了解到网络上有一种音乐概念叫“古风”，用到了很多民族、东方古典、戏曲元素，创作人员大部分都是业余音乐爱好者或者音乐专业学生，在acg论坛、贴吧、微博、分贝网、yyfc、5sing发布作品和交流。后来有一定影响力的创作团队开始举办线下演出，古风圈开始吸引更多年轻人 。2018年在北京召开中国国风音乐发展研讨会，包括古风圈的墨明棋妙等。国风音乐有更多的可能性，那么它是如何制作出来呢？
1.2音乐制作流程
音乐制作从盈利性上分为商业音乐制作和非商业音乐制作，区别在于商业音乐的制作目标之一为盈利；非商业音乐不用做商业用途，制作目标因人而异。
制作流程如下：
1）策划和制作人有区别，制作人除了完成策划的内容，音乐素养更高，会在制作上提出更有建设性的修改意见。策划更多情况下只负责确定制作人员和项目进度跟进。
2）作曲、作词、编曲的先后顺序根据制作人员不同会改变，内部达成共识即可。
3）乐器实录指在录音室录制乐器音轨，非必须环节。如果不选择实录表现，则用音源代替。4）编曲给出的分轨文件就是由音源表现。
5）和声的编写有时是作曲、编曲负责，有时也由歌手发挥，顺序不一定排在主旋律录制后。
6）混音如果涉及同张专辑的多首歌曲，需要母带师介入完成整体调整。
1.3用户群体
独立音乐人：包括在校音乐专业学生或者已工作的业余音乐创作者。希望通过音乐表达自我，记录生活，结识朋友，提高演奏及创作能力，因此带有弱社交目的。
音乐团体：社团、乐队、团队、工作室、制作组。
音乐制作委托方：有制作适合自身音乐的需求，包括策划、导演、制片、制作人等。
2. 痛点及情境
2.1痛点
从制作音乐的契机分为自发制作和委托制作，其中涉及到几个角色：自发制作者、委托方、受托方。
自发制作者（音乐人）：
1）音乐人之间缺少了解，难以构建信赖关系
2）很难找到相似风格的音乐人互相交流
3）想找能长久合作做音乐的朋友或团队
自发制作者（乐队/社团）：
1）想找能长久做音乐的拍档
委托方（企划负责人/比赛举办方）：
1）企划对音乐人的特化需求（对风格、完成度的需求）
2）比赛的题材限制，音乐人工种的筛选
受托方（音乐人/团队/工作室）：
1）受托方对素材的特化需求（对风格、题材的需求）
2）受托方对企划的信任从何建立（对企划介绍、企划进度、作品数量、作品质量的需求）
2.2使用情境
一名在校大学生Y在为自己导演的短片寻找合适的配乐，因为周围没有音乐学院，班上同学也没有这类技能，她找到了国风音乐圈这个APP，通过搜索风格缩小范围，随手点进一个音乐人主页去翻阅他的作品和参与过的企划，通过企划推荐又找到了其他的音乐人及团队。Y创建了自己的企划，填写短片的介绍，上传样片。
3.竞品分析
3.1竞品优缺点
分析5sing音乐人&腾讯音乐人&豆瓣音乐人&网易音乐人。
优点：
1）经营时间久，积累了很多小众音乐人；
2）音乐更新频率高；
3）有比较多的消音伴奏；
4）有beat（一种音乐素材）交易、词曲交易。
缺点：
1）对某些工种分类缺失，导致相应工种曝光度很低，合作时不能第一时间建立信赖关系；
2）最近web端增加了音乐身份筛选，但依旧有些混乱，听众不适合放在音乐人中筛选，编曲和制作人有相似度，但职能完全不同；
3）在申请入驻时，无法选择多个流派。
优点：
1）下属音乐平台多，可以搜索到很多作品；
2）有词曲出售。
缺点：
1）没有促成音乐制作工种间合作的功能（不清楚入驻后是否有该功能）。
优点：
1）音乐风格分类很广泛；
2）根据听众关注列表来推荐，能帮助相近喜好的听众找到感兴趣的音乐人。
缺点：
1）部分音乐人自定义的页面布局板块混乱；
2）没有音乐人间交流合作的功能。
优点：
1）网易会推出一些音乐策划项目，促成创作者间合作；
2）网易云音乐个性化推荐增加音乐人曝光度；
3）有创作者社区；
4）有beat、词曲交易。
缺点：
1）对身份的分类太少，只有制作人、作词、作曲、编曲、演唱。
3.2总结
几个平台对音乐人来说，都没能给出一条流畅的制作链，音乐人签署授权协议后，和平台的联系变强，但和合作者的联系几乎就和听众与之的距离差不多。音乐人有向部分人展示demo或beat的需求，还无法满足。有平台促成社区，效果待观察。
4.流程及功能
4.1流程
根据第2部分的情境分析出流程如下：
选择合作者流程
4.2功能结构
寻找合作者功能结构
5.页面展示
故事的开篇：开始寻找合作者
5.1招募
若已有合作者，可在创建企划/团体时添加成员。发起人有修改企划信息的权限，可以转让企划或退出企划，若发起人未转让直接退出，则企划结束，所有成员都会看到该结束状态。流派风格可以多选，在主页最多展示5项。
招募有时限，可以避免太多废弃招募占据招募首页。创建完成后，可以添加已有的合作者为企划成员。发起人可以选择企划来发布招募。
动效说明：这里展示的是策划（制作人）点击+号进入创建企划页面的过程。文字出现时配合图标的弹性变化，微微下沉再恢复。切换页面时速度曲线为渐缓。
动效说明：这里展示的是添加已有成员进企划名单。选择工种。选项框展开有弹性变化。选项拉到底时，会有位置偏移再回弹。选好以后的工种滚动入场。
5.2搜索
音乐人搜索的需求包括按个人、按团体、按作品、按企划。根据音乐制作的流程，得到对个人的筛选条件最主要为工种。按作品筛选的下级筛选条件是流派风格。按企划筛选的下级筛选条件是题材。按团体筛选的下级筛选条件是流派风格、题材。
5.3标签和身份
标签在搜索、主页展示、作品展示都有着视觉分流的作用。该应用中涉及到的标签包括：流派风格、工种 、题材。
流派风格标签
用户身份按结构分为个人和团体，按需求分为委托方和受托方。
按结构分，个人：策划/制作人/监制、作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师；团体：乐队、工作室/团队、比赛举办方。个人身份间可以多选组合。团体身份不可和个人身份多选组合。
按需求分，委托方：策划/制作人/监制、比赛举办方；受托方：作词、作曲、编曲、歌手、乐器演奏、混音/母带、画师、视觉设计、PV师、乐队、工作室/团队。
结合两个维度，得到4种身份类型：个人委托方、团体委托方、个人受托方、团体受托方。
以下是关于身份的几点考虑：
画师/视觉设计/PV师
狭义的音乐制作本身不包括宣传（如封面设计、海报设计、PV/MV制作），所以画师、视觉设计、PV师等工种视具体情况会删减。
乐队
考虑到组建乐队主要为乐器演奏者和歌手兼任作词、作曲、编曲，所以在团体中把乐队单独列出来的，权限和工作室、团队一样。
音乐听众
一开始整理用户身份的时候，对音乐听众这个身份的取舍思考过。保留的原因是这个应用主要面向音乐制作人员，但音乐制作也是一个交流的过程，不单与音乐专业人士，与听众的交流也是必不可少的。去掉的原因是听众这个身份的门槛较低，如果在用户中占比过多，就失去了做音乐制作交流平台的意义。
工种标签
身份与工种的关系：身份有时对应一个工种，有时对应多个工种形成的集合。如身份A->策划，身份B->作曲/编曲/混音。
题材标签
5.4主页
除了用户主页，企划也有主页。在企划主页的简介中，会展示企划的父子级关系图，帮助音乐人了解该企划的发展。企划关系由发起人编辑。音乐人也可通过查看推荐的相似企划寻找感兴趣的项目。在个人主页还会推荐相似的音乐人、相关企划，团体主页推荐相关音乐人（团体成员）、相似团体团体和相关企划。
动效说明：以选择的企划的头像和名称作为转场衔接。招募列表数据项快速退场。企划主页作品列表快速入场。加关注按钮在卡片信息完整出现后再入场，提示用户可以关注该企划。
6.总结
作为系列的第一篇，介绍了国风音乐圈的项目背景、用户群体，针对用户分析其痛点并描述出寻找合作者的使用情境。以音乐人制作交流圈为切入点，分析相关竞品。有了参考后给出流程和功能结构图。从寻找合作者开始讲起，展示招募模块及涉及的设计点。
原文地址：黑马家族（公众号）
作者：黑马青年
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
业务背景
以我们 CCO 体验设计团队为例，主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加，设计面临严峻挑战。
1、业务多：30多个产品应用
2、角色多：覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户 6大类用户群体。
3、体验复杂：设计师需兼顾用户和客户两个视角。
从组织上，85% 设计师纵向支撑业务，15% 设计师横向做标准化，反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。
标准化怎么做
核心通过页面梳理、抽象、分发、衡量，保障基础体验一致性。
案例实战
以数据可视化场景为例，讲述如何做标准化。
1、业务现状
共有11个应用，涉及89个页面。
2、问题
体验不一致：各个工作台页面架构、组件、样式野蛮生长，缺少规范导致体验不统一。
低效：部分场景缺失，组件重复建设，大量定制；沟通协同内耗大，成本高。
3、策略
体验统一：框架、组件、样式。
提效：代码化、工具、交付机制。
4、体验统一
包括框架、组件、样式。
框架
(1) 现有页面收集
(2) 用户场景分析
(3) 页面归类
结合用户看数内容（例：概览、分析、详情）和交互形态（例：平铺、下钻），对页面进行归类。
(4) 确定典型布局
通过统计高频复用形态，确定典型布局。
组件
(1) 页面结构分析
组件的收敛，需要先对页面分析，确定模块层内容。例：模块包含页头、筛选、图表、表格。
(2) 模块层分类
横向收集全部业务，将模块层分类。细分模块扩展形态，放到对应的篓子里。
(3) 模块专项治理
接下来，需要对每一个模块进行专项治理。比如图表模块，再拆再抽象成指标、图表、单选、多选 4类场景。场景里再对主体和变体（也就是扩展形态）分类。
样式
(1) 确定优化内容
围绕视觉凌乱，要做的便是完善设计语言。设计师需要结合自身技术底层，补充缺失规范。例如布局、色板、字体、动效。
(2) 确定组件范围
通过统计高频复用组件，确定需要梳理的组件范围。
(3) 布局
图例位置：线上有9种，通过从业务场景按阅读顺序划分，最终收敛成2种。
组件高度：真实线上情况，只能看2个指标，高度规范缺失。
需要根据用户分辨率调研，提炼典型分辨率。比如用户是win系统，包含菜单栏、任务栏等默认高度，再减去本身页面页头等默认高度，得到 3 档。确定组件建议默认行高 240px。
轴标签旋转角度：现状有顺/逆时针两种，通过分析标签类型，结合阅读顺序、轴与标签亲密度，确定默认角度为顺时针。
(4) 色板
通过场景梳理，确定不同组件使用的色板类型及缺失色板。
补充语义色板：从业务里抽象2类场景，指标和柱/饼/环场景，定义颜色。例如带正面语义，用绿色，比如升、已到岗、正常。带负面语义，用红色，比如降、旷工、失败。
(5) 字体
结合自身业务场景问题，从场景、版权、风格、识别、极值共5个维度选择字体。
举例场景一，纵向数据场景里，将市面上数据竞品用到的字体都横向铺开尝试，做排除法。比如din没版权，苹方非等宽字体，普惠102识别性弱。
举例场景二，在核心数据呈现中，helvetica 品牌风格弱，普惠在1亿以上极值过宽。
最终我们根据自身业务场景特征，用普惠和普惠102，运用在对应场景里。并同前端提炼规则。
(6) 动效
首先，需要确定动效价值，明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。
通过动效场景链路分析，确定优化范围。
加载动效：围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路，输出方案。比如这里共梳理17种组件类型，抽象成9类，包括点、线、面、饼、环、柱、文本、图标、词云，再进行组合产出方案。
出场动效：通过业务分析、提炼场景、优化效果。比如这里共提炼 3类场景，有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。
浏览动效：通过提炼场景，来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下，围绕点击感知弱、重点不突出、缺少悬停态来优化效果。
沉淀速度参数：将优化动效场景的速度参数，同前端约定规则沉淀组件库。
5、提效
包含代码化提效、工具提效、机制提效。
整体思路
从设计组内到技术产研的提效过程。
提效面向用户依次是：组件设计师、业务设计师、前端、产品。
搭建目前还在进行中，这里主要从交付-工具-代码化来分析。
交付内容
1、业务设计师：sketch/figma物料 (样式、组件、区块、模板、规则 )
2、业务设计师：kitchen工具（样式、组件、区块、模板）
3、组件工程师：组件规范/组件官网
交付机制
新需求：通过评估复用性、抽象、内审、沉淀物料。
现有业务：通过页面梳理归类、抽象、内审、沉淀物料。
6、衡量
从物理到行为层，包括样式、组件、框架、组件交互 共4个维度。通过一致性评分衡量标准化覆盖的好坏。
总结
回归课程，在B类业务里，服务多个产品、多用户角色、体验复杂的场景下，在定制化+标准化团队阵型里，标准化实质解决的问题是保障60分基础体验一致性。
总结：B端体验标准化包括物料的产出、交付以及衡量标准。
产出：包括框架、组件、样式的收敛来梳理、抽象页面。
交付：面向2类用户群体，业务设计，需交付物料和工具。组件工程师，代码化需提供组件规范，组件线上化需助力组件官网的建设。
衡量：一致性评分包括样式、组件、框架及组件交互。
原文地址：AlibabaDesign（公众号）
作者：CCO 设计
转载请注明：学UI网》如何做B端体验标准化：以数据可视化场景为例
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com