UI设计规范汇总

UI,也即用户界面(User Interface,简称UI,亦称使用者界面)是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。UI包括了GUI(图形界面设计) 、UE(用户体验设计)以及ID(交互设计),在现如今的UI设计往往说的是GUI设计。一个公司的UI设计师与交互设计师往往都需要了解UI设计规范,大多公司对于UI设计师的要求一般包括“熟悉主流平台的UI设计规范”这一要求,那么在相应平台上遵守 iOS 或 Android 设计规范对用户来说很重要吗?

此段内容来自知乎:https://www.zhihu.com/question/22895304/answer/22995095

既不重要, 又很重要.

对于大部分国内用户而言, 他们是不知道也很难意识到 Android 和 iOS 在设计上有什么差别的. 而国内主流的 ROM (没错, 我说的是 MIUI) 在 UI 上也模仿了非常多 iOS 特色, 在这样的大环境下, 用户很难意识到两个平台设计规范的差异.

但是人是会进步的. 而国外优秀应用大部分都遵循着平台规范, 国内的新晋应用和开发者也渐渐都开始遵循规范, 当用户用过了更优秀, 符合平台规范的应用之后, 他们中的一部分会渐渐意识到规范的优越性, 体会到遵循规范的应用具有更高的一致性.

而不同的平台毕竟是不同的平台, 一个平台的应用会渐渐趋于遵循一致的视觉规范 —— 只要这个规范”具有足够的说服力”, 平台内应用间统一感会不断增强.

具体到 iOS 和 Android 上, 举一个例子, iOS 的设计规范并没有针对大屏手机进行优化, 而 Android 上开发者可以在规范内作出极为大屏有好的 UI/UE.

而对于开发者, 尤其是跨平台开发者而言, 分别遵循不同平台的设计规范会为设计带来更大的压力 —— 对于大部分应用而言, 需要设计多一套视觉样式 (对于很多设计师/开发者而言, 还需要重新设计一套交互逻辑 —— 尽管这是毫无必要的), 必然会增加工作量.

但是, 遵循平台设计规范能够让开发者更好的发挥一个平台的实力 (调用自带标准控件节省性能, 不需调用外部库实现模仿 iOS 的视觉/交互效果, 标准布局更容易实现, 等等).

下图是最新Android & iOS设计尺寸规范(持续更新):

原文链接:
http://www.shejidaren.com/examples/tools/chichun/ui-design-spec.html

怎么给iOS做设配?

从ppi看,万幸,一切都是熟悉的,也就是说切图倍数没有改变。

iPhone XS, XS Max 和 iPhone X 一致,都是 458 ppi,因此还是3倍切图@3x就好;

iPhone XR 和 iPhone 6/7/8 一致,都是 326ppi,因此采用2倍切图@2x 。

切图方面没有什么麻烦,现在看下新尺寸对设计布局的影响。

首先我们看下新机型的逻辑像素(pt)尺寸(即密度无关像素尺寸)

iPhone XS:分辨率/3,即 375 x 812pt,因此跟iPhone X 的布局完全一致;

iPhone XS Max: 分辨率/3, 即 414 x 896pt;

iPhone XR:分辨率/2,即 414 x 896pt。

也就是说,相当于只增加了一个尺寸 414 x 896pt,而且 XS Max 和 XR 都是全面屏需要留出安全区域。

因此如果你是以 iPhone 8 (375x667pt) 为基准做 XS Max 和 XR 的设计稿,那么就是拉宽拉高尺寸到 414 x 896, 然后状态栏由20pt变为44pt,添加底部主页指示器34pt。

Image title

如果你是以 iPhone X (375×812) 为基准做 XS Max 和 XR 的设计稿,只需要拉宽拉高尺寸到 414 x 896,状态栏和底部主页指示器均不用更改。

Image title

而后续的图片等元素的适配,就需要从视觉角度灵活调整了。

分析来源:https://www.ui.cn/detail/404417.html

两种宽度、四种高度

通过友盟关于iOS屏幕分辨率活跃度占比分析,640 * 960的活跃度跌破10%。
如果除去640 * 1136,iPhone在逻辑像素层面,只剩余两种宽度、四种高度

宽度*高度机型
320*480(占比很少)iPhone3GS、4、4s
320*568(占比很少)iPhone5、5c、5s、SE
375*667iPhone6、6s、7、8(6系列)
375*812iPhoneX、XS
414*736iPhone6/6s/7/8 Plus(Plus系列)
414*896iPhoneXS Max、XR

在输出切图时要注意

iOS:

  • 平铺切图,后缀名为.png。
  • @2X,@3X,相应的素材请务必加上相应的后缀。
  • 针对目前市面上的的屏幕尺寸而言,一倍图已经没有必要再输出了,而二倍、三倍图则必须要输出。
  • 二倍三倍图的文件名必须是一样的,不然会被开发砍死。
  • 以一倍画稿(320*480/568)做设计,以一倍画稿输出标注文档,最后输出二倍、三倍图。
  • 如无特殊情况,请确保文件都是 .png 格式。
  • 一倍画稿输出的标注文档的单位应该为 pt,而不是 px。

Android:

  • 点九切图,后缀名为.9.png。
  • 说是说有七种分辨率的图要切,但是就目前市面上的设备来讲你只要关注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 这五种已经够了。如针对可穿戴设备的话,那可能会用到 tvdpi。
  • 320*480px 作为一倍稿进行设计。
  • 做标注时使用 dp 作为单位(iOS 使用的是 pt,但实际上差不多一个意思)
    输出 .png 格式的图片资源。
  • 记住命名规则,同个图片资源的各个倍率的文件名都是一样。

安全区计算

非全面屏的安全区域为可视区域,全面屏上下有两个区域为非安全区
1.页面内容不能超出安全区(Safe Area)
2.底部区域用于手势进入主屏或切换应用,如果将触发交互行为的按钮放在屏幕的底部,会破坏App操作体验

全面屏与非全面屏

全面屏安全区的计算方式:

iPhone 6系列与iPhone XR
iPhone X与iPhone XS Max

以iPhone X为例,首先我们采用之前用的750*1336px基准来做。iPhone X延用的是@3x。

iPhone X上的显示屏的宽度与iPhone 6,iPhone 7和iPhone 8的4.7英寸显示屏的宽度相匹配。然而,iPhone X上的显示屏比4.7英寸显示屏高145pt,大约20%的内容垂直空间(即750*1624px)。

 

iPhone X有一个很丑陋的刘海,还有一个很特殊的home指示器。

为了适配这两货,我们粗暴的把页面设为750*1624(包含刘海的高度60px)是不对滴。

我们要确保APP布局遵守了安全区域和边距布局指南,布局填满屏幕,并且不会被设备的圆角,传感器外壳或被主屏幕的指示器遮蔽。另外对图片的处理也要适量改变。

如果提供全屏体验时,设计师需要付出更多的时间来测试页面,看看在横竖屏切换的时候,有没有元素遮蔽的现象。.png

 

为了遵守安全区域和边距布局,我们需要顶部状态栏和底部菜单栏都进行了增高。

那么我们最终应该把画布创建为750*1468px(导航栏距离顶部88px、标签栏距离底部68px)。

 

附上官方规范文档网址:

1、iOS Human Interface Guildeline —— Apple(苹果)

官网:Design – Apple Developer

2、Material Design —— Google(谷歌)

官网:Introduction – Material Design

中文翻译:Material Design – Material 

Design 中文版

Material Components

官网:material.io/components/

3、Fluent Design System —— Microsoft(微软)

官网:Fluent Design System

Microsoft Design (包括Fluent Design 和 Inclusive Design等)

官网:Microsoft Design

4、IBM设计语言 —— IBM

官网:IBM Design Language

5、Photon Design System —— Firefox(火狐)

官网:Photon Design System

6、Yelp Styleguide —— Yelp(美国最大的点评网站)

官网:Styleguide

7、Facebook Design —— Facebook(脸书)

官网:Facebook Design — What’s on our mind?

8、Design Guidelines —— 国外设计规范的集合网站

官网:The way products are built.

9、Ant Design —— 蚂蚁金服

官网:A UI Design Language

Ant Motion —— 蚂蚁金服

官网:Ant Motion – 一个 React 的动效设计解决方案

10、Ant Design Mobile —— 支付宝移动端组件库

官网:A Mobile Design Specification

11、微信小程序设计指南

官网:微信小程序设计指南 · 小程序

2018年UI设计规范:https://www.ui.cn/detail/178588.html
如何减少构图成本,建立统一的设计规范:https://zhuanlan.zhihu.com/p/34923524

我要分享

huhu

作者: huhu

胡胡是我的女票,她以前有个网站,运行两年多后停掉了。她写了一百多篇设计心得,现在全部导入到了我的网站,如此,她称之为“强强联手”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据