说到这里，你可能会认为感知性设计是一个纯粹的外在视觉表现，但想要完全的得到一些成效，更多需要把这个事情融入到品牌的核心中，随着产品的发展而发展，进而在众多的同类此产品中脱颖而出。
案例二：Instagram
案例三：抖音
在同一个领域中的产品，在功能上大多会具有一定的趋同性，而由于这几年的扁平化风格盛行，更把产品之间的类同性推向极致。因此更需要通过感知性模式的设计来进行区分，这种区分不仅仅只是视觉上的差异，更多是来自于产品者对于自己产品方向的把控。
书中提到Spotify的例子，Spotify给人感觉是温暖的、私人的，虽然月活跃量已经超过一亿，但给用户的感受仍然是独特的，除了功能之外，主要在于整体的图形样式、颜色搭配（黑绿的品牌色比例把控）、交互中微妙而平静的感觉，以及排版上传递出来的感受。
感性性模式的品牌传递主要是通过界面或者运营调性来让用户得到感知，并且让人记住。在界面上想要让用户记住我们的产品，更多的是需要思考三个关键点：设计的独特性；设计的辨识性；设计的区分度。
设计的独特性
设计的独特性往往是通过我们界面的排版、图标、图像、交互体验方式、交互措辞等等一系列的内容来奠定。这些内容我们常常可以在国外的软件中看到很多不错的案例。
还是以Instagram作为案例来说，ins风的极简设计是一种贯彻始终的独特性存在，除了设计界面本身的研究之外，还在内容上下足了功夫。以照片浏览来说，始终坚持大图的体验方式，保证一屏内的沉浸度，而非为了效率，这与Instagram一直具有较高的照片质量密不可分。
设计的辨识性
辨识性的可打磨方式有很多种，以图标作为一个基础的案例来说，我们在设计图标的时候是否有结合整体产品的性格去思考并且设计，并且深入打磨。简单的区分，我们可以从风格（例如：简洁的、有趣的、硬朗的、柔软的等等），更深入的内容就是需要思考如何传递品牌感，以及将图形与品牌理念、产品性格进行结合，通过设计贯彻品牌辨识性。
以YouTube这个APP的图标作为案例，设计师在设计时更多是希望表达整体APP设计的简洁性，弱化图形对于内容的影响，因此在整体坚持了三个核心关键点：简约、细线、普识。
设计的区分度
以现在流行的电商APP为案例，很大电商平台的设计大多类似，在品牌色的选择上则尤为重要，因此需要尽量避免具有耦合性。
我们在产品设计中想要把所有的模块或者组件做得一模一样几乎是不可能的，但我们可以利用感知性模式的设计进行内容模块的渗透，让用户对于整体的感受感知是一致的。
以materialdesign的设计系统为案例，他所确定的是一个规则，而并不是任何的模块或者任何的图标都是一样的、无差别的，如果都完全长得一样会让设计变得单调、无差异性，通过设计准则来限定整体的图形风格，应用在不同的位置让用户从视觉角度感知到风格的一致性，这样也可以让整体的体验更连贯。
富有表现力
为了突出MaterialTheming必须提供的功能，每个Material研究都表达了一个不同的品牌。
各种各样的
为确保material主题化和组件满足尽可能多的产品需求，material研究代表了不同类型的产品。
基于现实
为了尽可能地复制真实产品，每项研究都会识别用户、显示功能用户流并应用现实世界的限制。
我们在日常设计功能性模块更多的是考虑到用户对于产品的体验感受，而感知性模块则是我们想要用户在这里获得什么品牌感知，通过品牌结合视觉设计系统给用户带来产品独特的性格及个性化氛围。
对于探索感知性设计的方法也有很多，目前比较流行的技巧主要有：情绪板、样式叠片、元素拼贴。无论是哪种方式，都没有唯一的答案，更多是利用这些方法在不断的尝试中探索到属于自我品牌的感知。
情绪板
情绪板是一种较为轻量的风格探索方法，在这个过程中往往不需要花费过多的精力，我们需要做的就是把统一或者接近类型的图片进行重新整合，得出我们想要表达的视觉感受即可。
情绪版属于比较前期的视觉品牌调性探索，在整体的颜色、排版上也都可以利用情绪板来获得初步的答案，如果想要再往深一步，可能则需要样式叠片的方式。
样式叠片
给予情绪板获得的大致品牌方向之后，便可以利用样式叠片的方式来进行更精细化的探究，我们可以用一种或多种不同的样式叠片来表达，但是希望在截取这些内容的时候要记得保持控件、组件、颜色、字体等等内容的一致性，避免差别性较大，形成不了统一的视觉系统。
元素拼贴
从表面上来看，这三种方法似乎都可以帮助我们更好的进行设计，没有太大的差异化，不过从本质上来看，这三个方法影响的是我们设计初期输出的保真程度，从情绪版到样式叠片再到元素拼贴似乎是一个越来越保真的方式，我们可以选择其中一种，或者2种结合来进行表现。
过多的个性化设计，会削弱整体的品牌感，同样，如果设计的内容需要全部都一模一样的规范，也会扼杀设计的品牌感的创造性。因此，在感知性设计的概念下，一致性设计不是一味的复用，不求变通，而是通过整体统一的理念，允许个性化设计的存在，这样既满足部分模块的独特视觉表现又并不影响品牌传递。
举个例子
例如外面在设计一个完整的APP时，我们已经规范好了大体的基础视觉规范，在不影响这个规范的前提下，我们针对部分模块，例如福利类、游戏类，这种比较偏运营的设计界面，我们可以考虑有更丰富的颜色、图形等视觉表现，但前提在于是否符合基础规范的设定，如果符合那我们完全可以对这些类型进行个性化设计。
如果没有打破常规的设计方式，固化的追求一致性的设计，那么它就会变得普通、僵化，感知性设计的存在就是让我们在允许的范围内追求更不一样的设计，鼓励设计师积极探索更多的可能性，好的设计体系既能体现品牌的一致性也能表达出创造性。
数据的好坏往往来自各种原因，优化设计后得到好的数据，但并不能说我们的感知性设计是好的，首先刺激数据的手段有很多，例如加重内容的表现、利用颜色对比突出想要突出的模块，这些方式都是与感知性设计背道而驰的。
1.不挑战基础规范原则
基础规范作为整体设计的基本标准，整体的制定肯定经过多种尝试之后的结果，如果轻易推翻的话，其中产生的设计成本是巨大的，往往需要重新输出、多方对齐、最终输出、再落地形成开放组件，在我日常的工作中也常遇到。往往是因为一个极小的模块而产生了巨大的设计成本。
2.不改变用户的普识习惯
这里说的不是不去优化或迭代体验设计，而是我们应该尽量避免因为一个很小的内容而调整全局的体验方式。
举个例子：早前很多APP在设计表单选择器时都喜欢进行UI定制，从这个问题分析，用户在使用这种表单选择器的时候是用的系统多一点还是我们的APP多一点，如果是系统的多一点，我们何不直接调用系统？因为组件的UI改造，往往会带来一定的开发成本，但其造成的感知却并不够大，反而会让用户觉得很奇怪，为啥这些选择权在不同APP的不一致。
3.一致性最大化
任何的设计都应该以一致性作为最大的前提，这样才能更加完整体现感知性模式，在各个模块、颜色、图形等等内容都具有完整的呈现，无时无刻影响着用户，让用户对于整体具有潜移默化的感知。
感知性模式不是一个原则，而是一种工作方式、设计模式，除了个人的坚持之外，还需要有团队的意识才能让我们的设计更加具有品牌性，自上而下的调性、方向的确定，在团队中形成共识，这样设计语言才能形成。
在开始之前，请大家先思考下面两个问题～
很多APP没有TabBar，比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用TabBar，应该分不同的情况灵活考虑。
答案是为了易于使用，意味着通过TabBar这种简单的设计可以轻松帮助用户导航到页面。
明白了上面的问题后，接下来就要考虑如何来设计TabBar，能更好的满足用户的需求和体验。
1.显示最重要的信息
在Spotify底部导航中，主页选项用于播放或收听所有内容，搜索选项用于搜索下一首歌曲和播客，音乐库选项用于播放列表中喜欢和保存的歌曲，单独的会员选项方便用户轻松点击并快速完成购买操作。
2.扩展导航的功能
主流App更喜欢在底部导航栏中使用4-5个标签，这样能保持导航栏的整洁，还避免了标签过多导致用户难以精确点击选项的情况。
Pinterest的导航栏上只有四个选项，这有助于用户轻松点击。消息选项会实时更新消息数量，对用户来说这样的提示很直观。另外搜索功能包含在导航栏中，方便轻松地在主页和搜索结果之间来回切换。
3.容纳多种标签形式
多数App底部导航栏会使用「图标+文字」的标签形式，这样能清楚地告知用户点击标签之后的结果。
有时候我们也会看到有些产品的导航栏只有图标没有文字，但这种形式并不会影响我们的操作，因为当导航栏的标签使用了用户特别熟悉的形状和内涵，完全可以省略文字。
宜家App的导航栏使用了大众都很熟悉的图标，所以即使不加文字，我们也能清楚地知道这3个图标分别代表了主页、分类、我的。
相对于宜家，Youtube的导航栏就显得有点复杂，因为Youtube的图标含义用户可能并不是很熟悉，加上文字说明很有必要。
4.文字标签应该简短
文字标签应该简短而清晰，准确的文字说明能对用户使用正确导航起到关键作用。
TikTok导航所有的文字标签都简短，并且中间的添加图标还隐藏掉了文字，以此来引吸引用户的注意力。
5.避免隐藏导航栏
TabBar通常包含了最重要的导航信息，应该始终向用户展示，避免在用户滚动页面的情况下被隐藏掉。
Pinterest导航栏的设计是个例。当滚动页面时，底部的导航栏会隐藏，这么设计的原因可能是为了防止导航栏遮挡图像，保证用户看到更多的图像内容。
6.传达位置
TabBar帮助用户轻松导航，但如果用户不知道自己的位置，将会影响他们浏览和使用产品的体验。
多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。
Headspace在底部导航栏加上了线条装饰，每次切换选项，线条都会跟着一起切换，确保告知用户确切的位置。
7.从反馈中学习并不断改进
反馈是关键，如果想改善产品的导航栏设计，就要考虑并测试用户最喜欢哪个导航选项，不使用哪个导航，需要四个还是五个选项等等。
Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计，帮助用户更方便地使用产品，这些不断打磨的改进真是产品成功的关键。
8.在导航栏中显示更新
TabBar不仅仅起到导航的作用，很多时候还能通过状态变化告知用户更多的信息。
在Twitter主页导航中，当有新内容推送时，主页就会出现更新的状态，提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。
表格作为组织整理数据的手段，可以有效的向用户展示数据信息，是B端产品中出现最高频的模块之一。
下图为典型的B端表格示例：
今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论，我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。
1
常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元，行高和列宽的定义决定了表格信息的疏密程度，进而决定了表格给用户的直观感受，因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。
a、行高模数设定
在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯（多行行高同理去设定）。
根据用户场景的不同，来选择模数倍数，需保证系统内使用统一的模数。比如，针对用户快速浏览获取大量数据场景时，可以选择1.2倍作为模数，列表更为紧凑，同样扫视范围内，可获取更多信息。
b、为小屏幕考虑一屏显示的行数
表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。对于1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于1366×768、1280*720等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。
c、用户自定义行高的场景
B端产品的特点之一是通用化，覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因，有些用户喜欢表格行高值大一些，看起来舒适透气，便于阅读。而有些平台用户由于很熟悉线下excel表格模式，希望线上的表格也尽可能像excel那样紧凑，以便他们在一屏内看到更多的数据，进行对比，提升工作效率。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。
例如，Gmail提供默认/标准/紧凑三种表格密度设置，如图：
通过对表格固定位置与列宽的调整，扩大表格数据空间，使信息不局促，空间更透气，保证横向扫视易读性。
a、列宽极限值设定
设计师需要根据表格承载内容定义表格的列宽，应包含最大/最小/默认列宽的定义以及使用规则。
我推荐的一个规则是：
规则1：当相对列少【浏览器宽度-页面其他模块>全部列的默认宽度和】，则各个列自动等比拉伸，撑满屏幕；
规则2：当相对列多【浏览器宽度-页面其他模块<全部列的默认宽度和】，则出横向滚动条，每列宽度为默认宽。
另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于，一屏内展示的行数有限，当用户纵向对比数据时，需往复滚动多次，记忆压力大；横向扫视时，阅读视线不能一直保持左右横向预览，而是不停上下左右切换，使用体验不佳。
b、横向『偷取』屏幕外空间、行高模数设定
当压缩列宽也无法在有限空间内展示大量的数据指标列时，我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览，有一定操作成本，所以要结合业务实际情况选用是否利用屏幕外横向空间。
随着行和列的增加，用户的瞬时记忆会达到极限，超过“7±2原则”的范围，用户需要依靠辅助信息去阅读表格内的数据，防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时，建议为用户固定重要信息列，如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的，建议固定列显示在表格左侧，方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么，同时可根据需要快速发起操作。
同理，用户拖拽纵向滚动条来阅读数据时，可固定表格的表头，帮助用户在阅读过程中清晰知晓单元格数据的意义。
c、用户自定义展示信息
无论是在表格中要明确的定位数据，还是顺序阅读，高效扫视都是B端用户一个很重要的诉求，我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。
数据信息本身包含多种格式，可遵守一个基本原则即文字左对齐，符合从左到右的阅读习惯；数据信息右对齐，方便数据大小的直观对比。
具体对齐方式可参考我们建议的方式：
文本字段：可点击字段、普通文本类、数字、字母等，长短参差不齐，左对齐；
数据字段：金额、数据、百分比。带小数点等数据，方便对比为主，右对齐。
a、正确使用分割线，实现对表格行与列的强调
横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素，更好的强调纵向数据对比。但只要遵循良好的对齐方式，通常不展示纵向分割线，避免信息干扰。因而表格中通常仅使用横向分割线和底色分割，提升表格阅读效率。
b、斑马线作用有限
斑马线即隔行（列）变色。它能让行（列）间界限更为明显，但由于与分割线的作用类似，起到的作用有限，可针对不同场景酌情考虑是否使用。比如针对不同类型的数据（如总和、平均值）使用不同底色来区分，可以更突出强调该数据。要注意的是，隔行（列）换色的两种颜色不能反差过大，否则看来太“跳跃”。
对同一类数据而言，分割线就已经能够明显区隔，所以可不使用斑马线，但需要给出单行的悬浮状态，强化横向导视，避免出现列数过多引起数据错行的问题。
前面我们提到表格呈现的数据信息除文本外，还有其它一些可视化数据。可视化一方面提升了列表视觉表现力，增加差异化，另一方面让内容更加突出，提升阅读效率。例如：数据列中数据异常时，最好可以醒目的形式突显，让用户一进入页面就能快速注意到异常状况。
体验好的表格一定是克制的，克制应表现在信息的适度隐藏以及内容折行与截断展示原则。
a、隐藏低频操作
当表头需要承载排序、表头筛选、提示等功能时，不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的，因此可根据具体业务定义展示哪些操作，将其它操作隐藏，有需求时用户主动触发再展示。比如，百度搜索推广平台的推广管理页面提供了全局筛选，所以表头筛选对于用户而言是相对低频的操作，我们选择隐藏表头筛选的图标，当用户鼠标HOVER表头单元格时再展示。
b、隐藏辅助信息
再比如，有父子层级关系的数据，可以通过父子折叠表格将子信息默认隐藏，用户根据需要，去展开查看详细的子信息。
B端业务的数据信息复杂多样，信息内容的长度高度是多样不可控的，很多内容会超出我们限定的最大列宽，最大列高，我们应当给出折行与截断原则去约束内容的展示，而非总是为具体情况而做特殊设计，破坏体验的一致性。
我们今天集中讨论了应该如何考虑表格信息展示，并总结了如何做好表格信息展示，即遵守【疏密适度】、【高效扫视】、【精简克制】三原则，并结合业务特点以及目标用户场景，设计高效易读的表格。
也欢迎加入MEUX,视觉/交互/用研
可投简历至MEUX@BAIDU.COM
今天开发项目的时候，用Datatables插件做前端分页列表，想在列表发生翻页、排序、搜索、改变单页显示数据条数这些行为的时候做一些其他的操作，看了半天Datatables官网终于找到可以监测到这些事件发生方法：
$('#table').on('order.dt',function(){console.log('排序事件');}).on('search.dt',function(){console.log('搜索事件');}).on('length.dt',function(e,settings,len){console.log('改变单页显示条数事件');console.log('Newpagelength:'+len);}).on('page.dt',function(){console.log('翻页事件');}).DataTable();遇到问题多看官网，而且英文网站的社区讨论真的有很多有效的提问和回答。
记得还是15年的时候，工作需要，独自写后台管理系统。。记得那时候，最让我头疼的不是后台逻辑，而是数据的列表展示。列很多的时候,页面显示问题;分页样式问题;表格样式问题;数据加载...很多细节的问题，费时，而且总是达不到我想要的效果...也是那个时候，第一次接触了datatable.js插件,只需要简单的修改配置值，就可以改变表格的方方面面,真的是非常好的体验。。。
样式是基于bootstrap风格.
Page是List
服务端返回给前端的json数据也有格式要求，具体见AjaxListResponseDTO类定义.
自此,就实现了带搜索功能的服务端分页效果.
首先,在之前的基础上,需要添加一个js文件引用
现在的页面效果，还有2个瑕疵:
1.左边数字没显示出来.
2.实际83条数据,每页20条,应该最多到5页的，但实际上,可以点任意页，只不过从第6页开始，数据都为空.
页面显示不对的问题已经找到原因并且解决.
原因是：后端分页时,需要返回给前端更多的信息,如总数多少，过滤后多少等,所以我代码中的AjaxListResponseDTO类就不符合后端分页时的需求了，需要改动.
修改后的类定义为：
如今设计师不再仅仅作为一个需求的接收方与执行方，职能更加的全面，在整个产品设计研发流程中也需要我们有更强的参与度。最近工作中得到一些设计同学的咨询并参与围绕着一些项目中的问题进行讨论，比如：项目协同与执行的过程中总感觉节奏乱？对于项目缺乏整体的规划、每次设计过程中付出的成本很高。对结果验证时发现不论设计质量还是效率都还有很大的提升空间。设计感觉做的不错，但项目中的角色话语权不高？多个项目并行不知如何管理操作，有无标准方法，怎么从中创造更大的价值？本文结合日常项目管理当中的一些思考与方法，带大家了解设计师需要有的项目管理意识。
a
首先，我们思考一下，管理是什么？其实简单来说更像是很多标准化、流程化、格式化的方式方法组合，辅助我们更好的达成目标，并为整个设计团队构建一个基础的工作体系。项目中稳定与高效输出都来自于更加科学的管理。设计师链接上下游部门，也需要通过管理来解决诸多设计以外但与设计有联系的事务。对于我们的收获部分可以大致分成以下三点：
·目标达成层面
引导促成整个产品/项目的目标高质高效达成，使之利益最大化。
·视角变化层面
能够让我们视角产生改变，能够更全局看待问题，让自己有大局观的同时更加拥有结构化的思维。
·影响力与服务能力的提升层面
在项目中角色话语权提升，在团队内外有更高的影响力
我们工作当中实际参与的流程，基本可以归纳为启动阶段、计划阶段、执行监控阶段、收尾阶段。
·启动阶段
在这个阶段经常会使用到6W2H方法，它有助于我们思路的条理化，杜绝盲目性，所以此方法能够快速帮助我们确定目标、里程碑、项目成员以及合作模式，例如在此前的二手车大类页改版等大型改版项目中都有所使用。
·规划阶段
需求的梳理、排期、以及任务拆分、资源协调。我们可以尝试使用STAR模型来操作。而这部分在车业务的内部设计需求中也是在iWiki常态化留档的，以SITUATION（背景）,TASK（任务）,ACTION（行动）,RESULT（结果）几个维度构成表的基本结构。
需求规划完毕需要考虑的就是内部资源协调，在专职项目、动态项目、创新项目中协调的原则上可以是：擅长人做擅长事，挑战与执行并存，提效最大化，成长最大化。
·执行监控阶段
在此阶段，我们可能会遇到以下一些问题，产出效率不高、质量不高、反复修改或项目推进缓慢影响业务目标。这些情况或风险在很多项目当中都存在，风险并不一定是坏事，而风险大多数都是可以预测和管理的，我们可以多使用WWH模型和STAR模型结合的方式快速的辅助我们思考、记录、评估、计划、调整。在落实的时候我们会使用到iWork工具进行需求的变更、说明、同步，包括后续的进度跟踪与回溯，在项目的管理上非常直观易用。
·收尾阶段
对于该阶段质量控制方面，我们引入了更规范的走查文档、共建集成体验环节、以及全职能自查环节。常规的设计走查介入方式如下：
改变走查方式之后，增加集成体验环节与每个节点中的输入输出内容，保障每次项目的最终落地质量。
在收尾阶段从项目管理的角度来说另外一个希望提及的是，除了事前有规划、执行有控制、更要注重事后收尾有总结。虽然每一次的项目可能过程会有一些不同、结果目标不同，但是我们在总结复盘的过程中一定要做到以下几点：
1.拒绝形式化，避免假大空反思
2.具备借鉴意义
w
其实我们可以发现既然是要去管理项目，在每个节点里沟通是非常重要的，可能很多设计师都会遇到一些沟通方面的问题：效率低、无结果、惧怕沟通。其实多数就是在信息通过传输渠道、媒介的时候，发送者与接受者在各阶段所暴露出的不同问题，如下图：
·我们可以怎么做呢？大家可以多从以下几点去思考
3.灵活正确的处理意见与分歧，开放心态、开放式话术、气氛控制、善用询问等
4.总结与使用流程管理进行规划
5.建立设计师个人品牌可信度
原文地址：58UXD（公众号）
转载请注明：学UI网》设计师的项目管理意识
每一个伟大的项目背后总有一个必要的契机和一个有趣的故事，而我们的故事是这样开始的。在我们团队设计师之间经常会听到这样一些问题：
1、这个项目是谁做的？有没有源文件？2、这个产品是设计规范是什么？我这样做符合规范吗？3、之前那谁谁离职了，文件谁能找到？
总体说来就是设计文件管理难，规范一致性统一难，设计师对接协同难
在技术同学之间也会存在一些问题：
1、这部分代码是谁写的，怎么这么乱？2、技术框架已经落后了，我们现在不这么写了，再优化也没有价值，我们计划重构代码3、大量重复的UI还原工作，研发变身”切图仔”4、明明是按照设计稿还原，设计同学总说差1px
而在产品侧的问题却是这样的：每次都做了很多重复的事，我们版本需求量太有限了，这些问题大大影响了产品节凑和业务扩展的要求。我们在工作协同开发过程中，一直缺少一个连通器，导致产品、设计、技术沟通协作不便，设计和技术规范落地较难。同时因为缺少容器承载导致各种资源和文件共享不便。因此使得我们重复设计和重复开发内容较多，影响了我们版本需求的吞吐量。
对于一款成熟的产品来说，夯实设计与技术的框架基础地基，这样才能助力我们在上空盖更壮丽的楼阁，基于这种契机，我们希望做一次彻底的改变
生逢乱世总有一些拯救世界的英雄出现。当我们带着想法和前端专家“存哥”一起聊的时候，没想到我们双方的想法不谋而合，甚至在细节和方向都出奇的一致。经过几次深度的协商沟通，我们快速制定了解决方案，同时招募研发团队，快速的开展项目，带着激情与理想，「58UXD」与「前端技术委员会」发起了共建项目「风火轮」。
主要通过两方面来解决问题：
设计插件提效：通过Sketch插件进入设计师的工作流程，聚合设计资产，解决设计规范落地、设计资产可视化承载，提升设计规范和设计资产的使用率，增强资源共享避免重复设计。
设计协同管理：通过风火轮协作平台进行团队资产、项目管理，实现设计稿在线标注解析，供研发同学在线查看研发。
在这里有的同学就会说，这不就是做了一个蓝湖吗？那可就想简单了，我们的终极目标是：“把设计稿变成终端代码”。通过智能解析，将设计稿自动化解析生成代码，提升产研效率。
那么背后的逻辑和我们的思路又是什么呢？
3
在我们集团设计师Sketch的使用率高达90%，因此我们选择了Sketch作为UI自动生成代码的设计源，通过Picasso解析工具进行智能解析，高精度还原设计稿，支持多种代码格式，满足各种场景需求。设计稿生成代码的主要流程如下图：
设计稿生成代码的实际效果展示：
为了提升操作效率，我们将Picasso工具在风火轮协作平台直接内置，这样设计师上传设计稿交付需求的同时，风火轮自动将设计稿转换成代码。代码生成的UI界面与设计稿几乎完全一致，并且代码的可用度高，生成代码的结构布局合理、可维护性高，提供了两种模式:专注于高精度解析的运营版和专注于代码可用度的普通版，并且支持多种格式、尺寸的切图，导出来满足不同平台、不同尺寸屏幕的需求。
为了保证智能解析代码的还原度，我们通过以下几个方式来处理解析问题：1、还原度计算—感知哈希算法
我们将自动生成的UI页面通过puppeteer进行截图，通过感知哈希算法与原图进行像素对比，计算出生成页面的真实还原度。
2、样式解析-渐变解析方案
在渐变处理方面，首先根据渐变类型分为线性渐变、径向渐变、环形渐变三种，然后根据渐变值、位置等信息计算渐变方向距离及渐变节点之间的比例，最终生成渐变样式代码。
3、图片处理—精准切图方案
为了精准还原图片，我们通过调用sketchAPI进行图层截图的方式，计算不规则图形的精准位置及大小，精准切图是保证我们的高精度还原页面的关键；
为了保证智能解析代码的可用度，我们通过以下三个方式来处理可用度问题：1、结构重组
2、特征分组
针对列表这种重复结构的场景，我们通过特征分组算法识别相似结构，减少代码重复，提升生成代码的合理性
3、样式优化-样式精简、样式排序
样式精简及排序，使得生成代码更贴近工程师”手写代码”，代码可维护性更高。
转载请注明：学UI网》把设计变成终端代码｜风火轮背后的故事和规划
但结束往往是另一种开始，从研究心得来看，任何一种横空出世的风格都能找到过去风格成分，只是当事人是否愿意承认而已，所以旧风格某程度而言能在新风格中获得新生。
我们在此大致为新艺术运动做个“结案陈词”，首先这个名称源自法国，含义指“一切新出现的艺术”，单从这个定义来看，它的风格形式其实没有固定规范，但是当大家同处一个时代，经历同样变迁，艺术表达就必然有共性。
法国“新艺术”平面设计
总体而言，新艺术运动平面设计风格能找到以下几点共性：
新艺术本质上属于风格群组，包含很多子分类，除了法国、美国等本身称作新艺术之外，其它国家多数有别称，比利时是“先锋派”，德国是“青年风格”，奥地利是“维也纳分离派”，意大利是“自由风格“，英国则是”格拉斯哥派“等等。
美国地区的“新艺术”平面设计
新艺术风格如果以法国为正统，带给人的主要气质感受是：浪漫、柔美、悠闲。
而德国、维也纳跟英国区因为加入直线，显得阳刚一些，所以这三个地区的风格有时候会划分到“初期现代主义”部分去讨论，这些总结值得大家记下，有助于运用。
英国区“格拉斯哥”风格平面设计
最简单的例子就是给甲方提供类似风格的设计时，可以谈一点历史故事，有时候有渊源就是有文化的代名词，品牌故事就是如此来的。
在新艺术运动的末期，整个社会发生了很大变化，比如资本主义国家产生内部阶级矛盾，贫富分化，经济急速发展等。
上一期说过，艺术与设计永远是时代的精神折射，在急剧变化的社会中，文化艺术界开始涌现各种现代主义运动，例如表现主义、立体主义、未来主义等，这些运动的发展明细详见史太浓「风格列传」系列，这里不重复去谈。
表现主义风格平面设计
这些以绘画为核心的现代主义艺术运动对当时的平面设计发展产生巨大影响，逐渐形成本次要谈的主题“图画现代主义“（thePictorial）。
“海报风格”平面设计
“海报风格“的主要特点就是简洁鲜明，主题突出、色彩扁平。
这种风格在过去历史当中难以想象，甲方看来也总感觉钱花得不值，因为留白特别多。
甲方一般也不清楚做减法比做加法难太多，这种特征其实在上一回谈意大利“自由风格“的时候，李昂内托·卡皮尔洛（LeonettoCappiello）的作品中就已经初步具有。
李昂内托的海报设计作品
但这种风格真正的奠基人是德国的卢锡安·伯恩哈塔（LucianBernhard），后面简称卢锡安，史太浓在翻译外语名字时候希望尽量像中文名，好记一点。
卢锡安·伯恩哈塔
卢锡安同学也是自学成长的大神，1883年时候他出生于德国斯图加特（奔驰汽车的总部就在这个城市），父亲经营工艺品生意，家境还不错，但经常出差不在家，回来的时候会带一些有意思的小物品送给卢锡安。
卢锡安从小贪玩，经常闯祸，比如戏弄老师这种事情也经常干，也父亲头疼不已。
但父亲发现儿子其实有艺术天赋，具体表现是喜欢用橡皮泥尝试做一些工艺品，而且对于讲述艺术的书籍、故事特别感兴趣。
在卢锡安15岁（1898年）那年就因为爱摆弄惹得父亲非常生气，情况大致是这样的：当时德国慕尼黑举办室内装饰展览，卢锡安很兴奋的跑去看，现场带有现代气息的设计让他非常入迷，他自信满满的感觉自己可以做出来，于是决定回家实践。
慕尼黑的室内装饰展览
恰好父亲那时候需要出差几天，机会从天而降，他找来小伙伴协助，将家里按自己的想法从新设计装饰了一遍，比如用鲜艳的油漆刷墙，是劳斯莱斯一类的拼色操作，再将一些他认为风格不符的家具扔掉，从新进行布局。
完成之后其实他并不满意，因为眼前的条件限制了很多想法的实现，我想到假设一个设计师对自己的设计结果不满意，那么去到甲方那边是肯定会出问题的，这叫“墨菲定律”，担心的事情90%都会发生，到时自己一切的解释都变成掩饰。
“海报风格”平面设计作品
果不其然，父亲回家看到房子面目全非之后大发雷霆，摩拳擦掌，大骂卢锡安一顿，还准备揍他，卢锡安一气之下离家出走，这一走居然就没有再回过家了。
他跑到德国柏林，在那里找到一份制造工厂的工作，一边做车间工人来保障生活一边自学美术，他内心还是强烈希望日后可以成为一名设计师，虽然还没想清楚具体设计什么。
某天这个火柴厂玩起“设计征集“这样的营销，通过刊登报纸向社会征稿，设计主题是新品海报，当时做这类征稿的商家还不多，所以博得不少眼球，另外他们也确实希望通过这种方式获得耳目一新的设计。
征集活动被卢锡安知道了，此时他已经自学设计多年，自然希望借此机会浮出水面，成为真正的设计师，万万没想到，还真的成功了。
年轻时候的卢锡安
于是卢锡安回宿舍后将雪茄涂掉，没了雪茄烟后灰缸自然是多余的，去掉，没了烟灰缸后瓷娃娃也很奇怪，去掉，如此这般桌子也没了意义，也去掉。
最后这些元素全部涂没了，只剩下一个蓝色的工厂名字标题，纯黑色背景，而当天晚上再不寄出征集活动就要截稿了。
最后只能死马当活马治，在黑色背景上刷刷两笔画了两根红色杆黄色头的火柴，匆忙将稿件寄走了，心里感到万分的沮丧，类似约会心仪的女孩但是表现得不好的那种。
“普莱斯特“火柴厂海报设计
寄出稿件之后他其实就忘记了这件事，我猜测是选择性遗忘，因为心里难受，不抱任何希望，但人生往往是充满惊喜与意外的，一个月后卢锡安收到电报，告知他居然获得活动第一名，电报中还用不少美丽的词汇称赞他为“设计天才“。
卢锡安的海报设计
领奖金的时候他才知道原来最初他的作品被评委扔到垃圾桶，觉得过于简单，缺乏风格，后来被一位外邀的专家评委捡了起来，看了很久，认为这样的设计主题突出，名的明确，具有很好的传达功能，而且设计方式非常大胆，正是“普莱斯特“火柴厂需要的，应该得第一名。
这一类故事史太浓之前在大师列传就聊过，主人公是扎哈·哈迪德（著名女建筑师），当时也是参加比赛，我总感觉这种事情是为了增加主人公成名传奇性而杜撰，但不管如何，只能说实力跟运气都重要吧。
扎哈·哈迪德
这次我们来讲一个女性的故事，众所周知设计界的大师圈里是严重的阳盛阴衰，所以当一名女设计师扬名就会显得特别突出，所以本次的主角大家应该多少都有所耳闻。她属于伊拉克血统，英国国籍，她的设计里最知名的就是建筑。
如此这般，卢锡安一举成名，正式投身设计界，我忽然想设计大咖李永铨在《消费森林&品牌再生》这本书里面说到的一句话：设计有时候就是需要冒险，因为设计就是投资，投资不存在零风险。
《消费森林&品牌再生》
具有一定试错成本的时候试试，因为万一成了呢。
卢锡安1905年这一份传奇的火柴海报设计让风行多年的“新艺术“风格得以”交班“，大家发现平面设计的另一种可能性，就是重视传达，信息明确，形式简练。
入行之后的卢锡安成为“海报风格“领军人物，采用这一类风格设计出很多优秀作品，比如1912年为斯蒂勒皮鞋公司（Stiller）设计的产品海报，也属于经典之作。
斯蒂勒皮鞋公司海报
其中有一所叫“火雷不老与十米特“（thehollerbraumandschmidtLithographyfirm）的石版印刷公司极有先见之明，抢先以丰厚酬金跟卢锡安，还有市面上善于这种风格的五位设计师签订长期合同。
德国其它“海报风格”设计师的作品
模式类似经纪公司签约明星，市面上的其它公司如果需要找这些设计师工作，必须先通过他们，一般最后也会找他们印刷成品，这样一来让公司大发其财。
五名设计师中有一位叫朱立思·克林杰（JuliusKlinger），早期在奥地利维也纳学习设计，所以设计风格受“维也纳分离派”影响不少，具有新艺术运动的曲线特点，随后再在这个基础上转向“海报风格”，有不少出色作品。
朱立思·克林杰
背景
3如果你经常雇佣比你弱小的人，将来我们就会变成一家侏儒公司，相反的，如果你每次都雇佣比你强大的人，日后我们必定成为一家巨人公司。
通过作者的厨师工作经历，说明如何管理公司，其实很多道理都是相通的，不管是做人还是做工作。
一、领导者做好公司管理的要点
领导者在专业能力上一定要突出，才能让团队信服你。对待工作要严厉，用强力手腕处理同事间的矛盾。适当夸奖部属，让他们懂得赞扬的可贵。增强使命感，比如让更高层领导评判文案或设计或活动效果。对不称职的人零容忍，和不称职、吊儿郎当的人一起工作，专业人员的士气就会受到影响。严格遵守服务标准，信守承诺。道德问题，坚守底线。保持办公场所的整洁，乱七八糟会产生慵懒的气氛。炫耀特权,激励部属向领导看齐的雄心。对盈利保持热情。勤劳。创造不可或缺性，让别人无法替代你。活力和足够的应变能力，对伙伴有热爱之情，能宽容他们的过失，有化敌为友的才能，有抓住良机的敏锐目光，还有道德。必须懂得如何分配任务。发掘人才，思考你想要的团队成员应当具备什么特质,面试时通过问什么问题,或什么行为能让你判断对方是否胜任。最终还是要让公司在领域内的专业性无法被取代。
如何挖掘潜力，不让自己的思维被框住
怎样争取客户
一、树立公司品牌
第三章怎样维系客户
一、自身
马上准备预备方案。站在客户的角度思考问题，全面了解客户的情况。让每个客户都感受到被重视。绝不泄露客户的信息给另—个客户。
用人
把最好的人才为现有的客户服务，而不是让他们去追逐新客户。不任用处事草率，很不随和的人做客户主管。
三、沟通
和客户每个层次的人保持联系。重视客户主管与客户间的关系，适时地进行协调和处理。主动在受到责难前，承认自己的过错。和客户成为朋友。
四、客户
怎样当一个好客户
9推诚相见，鼓励坦率，有问题就直接说，别让猜。
11—且经过测试，产品、媒体、标题、插图、尺寸等。
12效率要高。
14珍惜良才。
3讲事实，枯燥的形容词和夸张的承诺无法形成购买。
5显得有礼貌，但不装模作样。
6要与时俱进，有现代意识。
11不要抄袭。
第六章怎样写有效率的文案
一、标题
写标题的原则：
标题好比商品价码标签，用它向你的潜在买主打招呼，意思就是说卖什么一定要直接说出来。
每个标题都应带出产品给潜在买主自身利益的承诺。
始终注意在标题中加进新的信息。
标题内使用充满感情的文字可以起到加强作用，比如亲爱的、爱、宝贝等。
标题中应当包含品牌名
标题中写进销售承诺。
写能引起读者好奇心的标题
不使用双关语、引经据典或晦涩的词语，标题是以清晰传达为首要目标的。
尽量不在标题中使用否定词。
不写让客户读了莫名其妙的标题。
二、正文
1不要旁敲侧击﹔要直接了当
2不要使用最高级形容词，一般化字眼或陈词滥调。
4使用用户的经验之谈更让客户信服。
5向读者提供有用的咨询或服务。
6不刻意追求高雅和文笔。
7避免唱高调。
8尽量使用简单、通俗的语言。(待商榷)
9不贪图写那种获奖文案。
第七章怎样使用插图和编排文案
1插图应当起到与文字同等重要的作用。
2插图的主题比插图的技巧更为重要。
3插图的使用规则
3.1插图应有“故事诉求”。
3.2照片比绘画更能促销。
3.4彩色插图好于黑白插图。
3.5避免历史主题。
3.6避免使用人脸局部特写。
3.7尽可能使插图简洁。
3.8不使用老套场景，比如物业弯腰引导，比如三代同堂的全家福。
6如何进行文案排版
6.1在标题和正文之间，插入副标题。
6.2用大一些字号的字排正文第一个词的第一个字母。
6.3第一段控制在11个词以内，所有段落尽可能短。
6.4每行的字数不宜过长，不超过26个字符为宜。
6.5齐头散尾更易吸引读者。
6.6善于使用编号。
6.7大标题排制上，字体变化越多，读者越少。
7.1要吸引人的眼球，“色情视觉”是一个最有效的方法。
7.3要保证5秒内对读者产生作用。
7.4使用强烈、单纯的颜色，传递信息就快些。
7.5文字要尽可能大。
7.6品牌名字要安排得更醒目。
1电视是用画面讲故事的，语言的唯—功能是解释画面所表现的东西。
3避免出现太过俗套的画面内容，比如一群人的豪饮，一家人的喧喧嚷嚷。
一、食品
二、旅游地
1树立正面形象至关重要。
3为读者树立难以忘却的印象。
5国际旅行的最大障碍是费用。
8避免采用读者不理解的话题。
三、专利药品
要体现与竞品独有的差异；要含有新信息；要传达严肃的感觉；权威感；应适当讲解病情。
第十章怎样才能功成名就-对年轻人的进言
3如何过有意义的假期：不要待在家里，要换换环境；假期完全不接触工作；多做运动，呼吸新鲜空气；多读书；从容，不要太过疲惫。