界面三重构 X轴设计

　　X轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。

　　位置

　　X轴从位置上可以简化为左右、左中右的结构关系。

　　左右结构

　　在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。

　　左中右结构

　　左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为较重要的地位。

　　左右并列秩序

　　我们来看看App界面的底部Tab栏的结构，当我们随意打开一个App时，你还记得底部Tab从左到右的栏目分别是什么呢?可能经常使用的App我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是个栏目往往是首页，较后一个是我的个人中心，其他的相对比较模糊。

　　由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计，同样也适用于B端的界面设计。B端产品界面的导航结构个是首页(工作台)或较重要的内容分类，较后一个是更多或设置。同样遵循以上规则。

　　右侧位置重要较典型就是模态设计，在对话框设计中，确定和取消按钮往往把较重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。

　　易读性

　　文字段落编排时更多的需要考虑段落文本的易读性，当你设计C端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在Web、B端设计中，行长的定义可以影响到读者的阅读效率和体验。

　　美国芝加哥有学者做过一个试验，人的眼睛是在不停地跳动，在跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。

　　网页新闻详情页面的行长，我研究了纽约时报为640px、华盛顿邮报680px、Medium680px，所以我们设计师可以控制行长较大在640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。

　　交互改变位置秩序

　　位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和QQ音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。

　　响应式与断点

　　X轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用Media来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。