边写代码边加入设计的尝试与体验
大家经常接触的工作流程应该是先搞设计，然后再用代码实现静态页面。但有没有尝试过，反过来呢，鉴于我个人的些许体验，可以给大家分享一下我自己的经验。网络资源大家共享。
举个例子，我现在要做一个订单中心页面的改版。
审查原型，鉴于我此次是改版，之前的版面就是原型。一般大家有这样的好事，应该很庆幸。站在前人的肩膀上，尤其是代码和设计，只要稍微努力一下，就能有很大的改进。我一般会首先清楚一下业务，熟练一下之前的界面操作，分析一下用户的心理，并且结合自己的尝试和思路，放开思路。用心去看去想前人版面的可改善空间。
网络资源，大家共享，欣赏借鉴同行优秀作品，多看别人的长处，你只需要用自己积累的眼光去分辨好跟不好。
前期的思想工作是很重要的，我们发散自己思维的时候，可能随时会在一个想法的形成过程中直接不自觉的跳跃了。有时候可能想的时候，根本就记不得之前的想法。头脑风暴之余，建议大家先确定好风格，比如说清新系，一般做技术出身的人，会特别倾向于，小清新，即逻辑思维比较明确的人，一般会被清新的风格吸引。具体原因，大家自己脑补。
清新系是什么概念呢？网络很多资源都会这样去解释这个概念，不同人的理解也就不一样。纯色？浅色？
百科（这样说）：清爽而新鲜。其特点是语言新颖，不落俗套。清爽而新鲜。如空气清新;另指一类人:文艺小清新。干净利落，色彩鲜艳、给人简单单纯、甜美、阳光的感觉。一般搭配词语为"小清新"，多为形容文艺青年。呵呵，概念这个东西见仁见智。最后，能拿起来用到我们的界面上的可以总结为：雨过天晴（没有浊色，调色的时候，饱和度不能太低）；清水芙蓉（底色的明度要高，颜色要清淡，就是说底色用浅色，内容纯度要高点）。当回归到一个界面的时候，我们的结论或许就很清晰了。
整体的颜色搭配 对应着画面的风格（画风）。我们可以选择蓝色系，对应着偏青色的浅色调。我们的线框可以使用稍微带点青蓝的浅颜色，线框属于装饰。
设计层面上考虑好之后，你得到了，颜色信息。接着，我们要思考的就是，对应的操作和对应UI界面怎么往这个风格上走？
不同的操作对应不同的ui设计，这个属于用户体验，也是用户操作的反馈。用户体验是什么？可以理解为，用户进入这个界面的一系列操作行为带给用户的直观的心理感受。这个心理感受包括什么呢？外观，当然要有，更重要的是，操作反馈。尤其是功能性页面，这个直观的反馈，很重要。界面设计有时候要服务于用户操作。我们可以模拟一下用户的体验：1.用户第一眼首先是看，看的时候条目清晰，排列有序，则有助于了解我们提供给用户的是什么信息。2.用户看了之后，才会根据看到的内容得出自己能够执行什么样的相关的操作，比如说，用户想取消，想修改编辑，但是界面上没有相关的按钮，怎么办？我们在去模拟用户行为的时候，我们得出的结论和目前这个界面能实现的现实是两码事。界面要实现的功能和要设计的呈现内容暂时不属于你的工作范畴。如果当前工作不需要的话，大家不要在用户体验这条道路上走太远，先到此为止。你能做的只是去思考这种可能性，在未来可能会添加一些操作行为，只是暂时没有，你只需要考虑如果预留一个空间和后路方便未来添加东西。你目前要做的工作只是流程的一部分，在未来，改版，添加东西，修改东西都是有可能性的。
接着就是结构和布局的考虑，此时，技术决定了页面的呈现（外观），即写页面的时候怎么写（代码实现），如何根据既有的内容灵活的去选择一个适合的布局方式，比如说我们这个改版页面主体就是一个表格。我们如何分配表格列空间。即如何控制表格的列宽到一个精确的程度。以下是当前例子的th信息：
订单信息 回收总额 提交时间 订单状态 快递公司 快递订单 操作 我们虽然看到了已有的信息，但是仅此而已么？我们的出发点难道仅仅就是得到宽度的一个范围么？？ 不。因为th下边对应的td的宽是不同的，单单从th来讲，我们不能定宽为px，也不能定宽为%,em, 因为不确定性。可能后期我们要增加一个字段，减少一个字段，或者换换位置，或者改变一下文字。说不好。仅仅固定布局显然是不可以的。
我们首先好好丰富一下表格的知识，看看有没有不一样的推荐。我参考的是css secret这本书上37小节中对table-layout的介绍。
以下摘自LEA VEROU的《css secret》:table-layout 默认值是auto,其行为模式被称作自动表格布局算法，也就是我们最为熟悉的表格布局行为，不过，它还接受另外一个值fixed,这个值的行为要明显可控一些。它把更多的控制权交给了网页开发者，只把较少的控制权留给渲染引擎。我们设置的（宽度）样式会直接起作用，而不仅仅被视为一种提示；同时，溢出行为（text-overflow）与其他元素行为也是一样的，因此表格的内容将只能影响表格行的高度了。这种固定表格布局算法不仅更容易预测、便于使用，同时也明显更快。因为表格的内容并不会影响单元格的宽度，所以在页面的下载过程中，表格不需要频繁重绘。文中给出的应用了tabel-layout:fixed之后的效果：如果不指定任何宽度，则各列的宽度将是平均分配的；后续的表格行并不会影响列宽，给单元格指定很大的宽度也会直接生效，并不会自动缩小。有了这个概念之后，我们在实践行为上又多了一条路，让我们来实际的试用一下。
尝鲜之后的结果是：width：100%;table-layout:fixed;要同时用在table上，在结构上，对th无用，对tr有用，所以此情此景下，若已设置thead,th，就要把thead换成tr，th换成td。然后大家发现真的是平分了哟。
然后让我们尽情的删除吧，添加吧，都是平分。然后我们改变单列某td的宽度，发现，第一行的td宽度变化之后，其他的同行的td会票平分剩余空间。但是修改第二行的td却不起作用，第二行的td的宽度随着它上边的宽度变化而变化。好了，到此为止吧！做到这里，整体的排版已经有了不少改进。我们确定颜色，为了用户体验，做些归纳和组合，适当地调整了之前的内容，接着确定布局。
然后，我们该做什么呢？做交互。我们基本的版面确定后，就要给用户一个反馈。我们可以根据已有内容调整界面展示。我们可以给可点击的链接放到a标签里，即换个中性蓝色（有些基本reset样式里有），我们给重要信息如交易状态设置font-weight:bold;color:orangered;这样界面立马就有点先后感。重要信息已经突出，当然，还有产品信息也要略微突出，可以比中性蓝色稍微浅一点的蓝色。其实我们也可以尝试，把其他的如订单编号等改成同样的蓝色，但我这里，改了之后，不好看。所以说这个通过颜色字体粗细区分层次的做法因场景而异。我们在页面上展示的不同状态对应的不同的内容，尽量包含全部情况的结构，以免页面动态生成的时候缺失相应的css。
然后，由于表格内容在页面上是要动态生成的，我们需要考虑没有数据的情况，有一条数据的情况，数据量很多的情况。我们尽量确保不同用户看到的不同的页面的感受。
我们尽自己的力量做好之后，最好是多方询问周围同事的建议。至少问一个信得过的人。他能够给你一个你自己在自己的局限里，意识不到的达不到的一个方面的建议。或者他仅仅给你的只有三个字，不好看，就足够。这个时候，你要去分析不好看在哪里，赶紧去找，去发现，自己忽略的问题。找的快的时候，就会发现你离好看只有一步，就是调整一个内容的高度而已。内容高度与标题高度区分开就会发现，顺眼很多。然后你再问一下。直到对方说可以为止。
先分享到这里。
