加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 襄阳站长网 (https://www.0710zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营 > 正文

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

发布时间:2016-04-11 12:56:36 所属栏目:运营 来源:人人都是产品经理
导读:规范首页设计上配色清爽、排版简洁、内容上分类清晰,甚得我心(相比于IBM庞大的结构复杂的没汉化的设计规范,真的是业界良心)……

Progress

产品设计 微信界面设计 微信运营 微信设计

图06:Progress整理

Msg

信息提示的面板

产品设计 微信界面设计 微信运营 微信设计

图07:Msg页面案例

Article

文本内容的规范

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

图08:Article页面案例

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

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

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

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

通常情况下,应用整体使用单一字体(后面附不同OS下文字使用规范);

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

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

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

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

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

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

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

Actionsheet

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

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

图10:Actionsheet页面案例

icons

(编辑:PHP编程网 - 襄阳站长网)

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