想学微信的界面设计，来看看WeUI的暴力美学

信息提示的面板

图07：Msg页面案例

Article

文本内容的规范

图08：Article页面案例

通常，阅读类的应用会对内容的排版进行额外的调整，如网易新闻。在这里说一些常见的通用的文字处理方式：

要考虑文字的响应式变化，如在大屏手机和小屏手机中的单行文字显示数量变化引起的布局上的变化；

不同页面导航栏的文字使用相同字号，一般为17pt；

确保文字的可读性，最小字号不小于11pt(dp)；

通常情况下，应用整体使用单一字体（后面附不同OS下文字使用规范）；

1.5-1.8倍的行距是比较适宜的文本内容行距；如微信案例中为1.6倍（倍数是指在字号的基础上）；

文本总是使用常规(regular)或中等(medium)，一般不使用轻(Light)或者加粗(Bold);

图09：不同OS下的文字使用规范

当你在你的app中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换（无需额外标注）；

用photoshop或者sketch生成设计稿时，调整Text/Display，并将渲染模式设为Mac 更接近实现效果；

iOS会根据字号大小，自动调整字间距。

Actionsheet

操作列表的规范，在Toast中已提及

图10：Actionsheet页面案例

icons

图标的设计规范

图11：icons页面案例

图标的设计是在UI设计中比较能体现界面风格的细节，icon的设计属于理性和感性比较交错的部分。对于细节要敢于创新也要舍得取舍。体量感的控制，风格的统一，视错觉下的调整……

Panel

面板的设计规范

图12：panel页面案例

我觉得WeUI中出现的pannel这部分可能有点多余，这应该和Cell部分一样，属于表单系列；只不过这里的表单是平时我们比较常见的部分（图文组合）；

在这种图文组合中，如果能用上亲密性、对比、重复、对齐这几个原则，那一定会是一个标准舒适的界面。

Tab

Tab的设计规范

图12：Tab页面案例

我们知道Tab的高度一般取49pt，相对应的tab中icon的大小一半控制在25pt内；

SearchBar

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!