规范交互设计

IOS与Android的官网UI规范

2016-06-07  本文已影响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)

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

上一篇 下一篇

猜你喜欢

热点阅读