美文网首页规范交互设计
IOS与Android的官网UI规范

IOS与Android的官网UI规范

作者: 幽血冷眸 | 来源:发表于2016-06-07 11:46 被阅读2072次

总有很多新人求问UI的具体规范是什么,我的建议是必须首先看安卓和IOS两大平台的官方规范(WP已哭瞎),许多问题其实在官方规范中写的清清楚楚了,不过现在网上不少能查得到的资料都有些过期了,在这里整理下官方的设计手册。注意,你可能需要有一个趁手的“梯子”和一定的英文阅读能力。

整理下理论上不会过期官方规范。

IOS:

英文原版看这里

iOS Human Interface Guidelines(需要有一定能力的英文阅读能力,已更新为iOS11版本)

 中文翻译版请看这里(iOS11 优设的简要翻译版!,感谢翻译大大,尚未翻译完全,iOS11增加了一块奇怪的屏幕和新颖的交互方式,值得一读。)

优设首发!iPhone X 官方人机交互指南中文版


以下为历史版本的iOS中文手册,做个备份

IOS 10人机界面设计指南 (一)

IOS 10人机界面设计指南 (二)

IOS 10人机界面设计指南 (三)

IOS 10人机界面设计指南 (四)

(以下为完整的iOS9手册翻译,可以先行参照)

[ISUX译]iOS 9人机界面指南(一):UI设计基础

[ISUX译]iOS 9人机界面指南(二):设计策略

[ISUX译]iOS 9人机界面指南(三):iOS 技术(上)

[自译]iOS 9人机界面指南(三):iOS 技术 (下)

[ISUX译]iOS 9人机界面指南(四):UI元素

ISUX译]iOS 9 人机界面指南(五):图标与图形设计


Andriod:

英文原版看这里:

Material design(注意,需要梯子,需要英文阅读能力)

中文翻译版看这里(可能有些东西没有及时翻译,有能力尽量看英文原版)

Material Design 中文版

--------------------------分割线---------------------

没有WP的,毕竟市场率1%都不到

好吧,如果想看的话戳这里

Design & UI(需要英文阅读能力)

还是有些借鉴意义的

真没了,以上。



稍微补充下字体知识,仅针对于系统默认的字体。

IOS

苹果在IOS9更新以后对简体中文启用了新的字体,名为“苹方”,所以平常在做IOS效果图的时候就可以用这个字体来更好的贴近程序做出来的效果,英文则是San Francisco字体,也就是旧金山字体。苹方字体有六个不同的字重,见下图

苹方字体不同字重

苹方字体下载(密码:pb3g)

安卓

对于安卓来说,在material design风格流行后,使用的中文字体是Noto(Noto Sans CJK SC)字体,英文字体为Roboto。Noto字体有7种不同的字重,见下图

noto字体不同字重

Noto字体下载(密码: syb6)

什么时候使用什么样的字体大小,用什么样的字重这类的问题网上太多了,不在此赘述。唯一要注意的地方在于不要太小,一定要能看得清,而且易读。剩下的把自己当做用户,多试试吧。

相关文章

网友评论

  • 4e62683f7e4b:谢谢分享,很有用
    幽血冷眸:@melodytiao 额,请恕我直言,培训班只能带你入个门,还是快过时的门(ง •̀_•́)ง 要好好努力才能跟得上时代哦
    4e62683f7e4b: @幽血冷眸 报了个培训班学ui,但是感觉学到的东西好少,希望以后还能多分享些东西🙏
    幽血冷眸: @melodytiao (。・ω・。)ノ♡感到有用就好
  • a5cdc4b4c28f:求iOS9 英文原版pdf
    幽血冷眸:@Skyer 你可以去看看ios9的中文翻译版呢,那个是完整的
    a5cdc4b4c28f:@幽血冷眸 是呀 我找了好久 iOS10 精简了太多……
    幽血冷眸:@Skyer 很抱歉……因为官网已经更新到了ios10,所以9的原版pdf已经找不到呢……

本文标题:IOS与Android的官网UI规范

本文链接:https://www.haomeiwen.com/subject/gbmddttx.html