微信网站界面设计 第1篇
解释为单元格，会不会更易被认知？
设计规范的初衷是为了让更多的工作人员迅速认知产品提高开发效率，并且不同的工作人员能在规范约束下做出交互、视觉等方面能保持整体和谐统一的设计；
比如：
图中标识的 两边留白的统一（即栅格系统）；
不同文本内容选取的控件的一致性；
Pressed状态 通常在背景上加10%透明蒙版等细节；
图02：Cell列表整理
图03：Cell中的常用控件
操作列表（ActionSheet）
数字键盘（Keyboard）
选择器（Picker）
时间日期选择器（Date Picker）
Toast
临时的弹框用来表示一些提示信息，通常在3s±时间消失；
图04：Toast整理
微信网站界面设计 第2篇
四个Fragment代码类似，故只展示Fragment1的代码：
View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)： 这是 onCreateView 方法的开始。它是一个生命周期方法，用于创建和返回与Fragment相关联的用户界面视图。
(, container, false)：这是 onCreateView方法的主体。它通过 inflate（一个用于将XML布局文件转换为视图对象的工具）加载了一个名为tab1 的布局文件，并将其与 container关联。
()：用来隐藏视图
()：用来初始化Fragment
(Fragment fragment)：用来显示视图
运行结果如下：
微信网站界面设计 第3篇
_width=_wrap_content_：视图的宽度将会根据其内容自动进行调整，以适应文本内容的宽度。
_height=_wrap_content_：视图的高度将会根据其内容自动进行调整，以适应文本内容的宽度。
_weight=_1_：表示这个视图在与其他视图共享空间时具有相等的权重。
_@color/black_：表示将视图的背景颜色设置为黑色。
_center_：这会将视图或内容在水平和垂直方向上都居中对齐，使其位于可用空间的中心。
_微信_：将文本内容设置为微信
_@color/white_：将文本内容设置为白色。
_30sp_：将文本内容的大小设置为30sp。
界面显示如下：
_width=_match_content_：这会使视图的宽度填满其父容器的宽度。如果视图嵌套在一个父容器中，它将充满该父容器的宽度，无论父容器的宽度是多少。
_height=_match_content_：这会使视图的宽度填满其父容器的宽度。如果视图嵌套在一个父容器中，它将充满该父容器的宽度，无论父容器的宽度是多少。
_center_：这会将视图或内容在水平和垂直方向上都居中对齐，使其位于可用空间的中心
“这是聊天界面_：将文本内容设置为这是聊天界面
_30sp_：将文本内容的大小设置为30sp。
由于tab1与其他三个相似，在此只展示tab1的代码和界面：
_vertical_：线性布局会将其子视图垂直排列，从上到下的方式排列子视图
2..android:layout_weight=_1_：表示这个视图在与其他视图共享空间时具有相等的权重。
3.ImageView: 这是ImageView元素的开始标签，表示一个图像视图
_@android:drawable/sym_action_call_:用于设置图像视图的图像资源
bottom的界面显示如下：
的界面显示如下：
微信网站界面设计 第4篇
要考虑文字的响应式变化，如在大屏手机和小屏手机中的单行文字显示数量变化引起的布局上的变化；
不同页面导航栏的文字使用相同字号，一般为17pt；
确保文字的可读性，最小字号不小于11pt(dp)；
通常情况下，应用整体使用单一字体（后面附不同OS下文字使用规范）；
倍的行距是比较适宜的文本内容行距；如微信案例中为倍（倍数是指在字号的基础上）；
文本总是使用常规(regular)或中等(medium)，一般不使用轻(Light)或者加粗(Bold);
图09：不同OS下的文字使用规范
当你在你的app中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换（无需额外标注）；
用photoshop或者sketch生成设计稿时，调整Text/Display，并将渲染模式设为Mac 更接近实现效果；
iOS会根据字号大小，自动调整字间距。