app网页设计规范 第1篇
优秀设计来自世界互联网公司，前沿的设计理念和完善的设计语言是我们设计师的学习目标。了解和学习后，更好的进行产品设计。
1 谷歌设计语言 Google Design
谷歌设计中心，展示了谷歌的设计工作和概念，包括了 Material Design 在内的所有关于产品、体验、设计、品牌等互联网领域的设计思考。
2 苹果 IOS 设计规范
苹方人机界面设计指南，含有IOS设计规范，指导界面设计。苹果人机界面设计指南，详细介绍了苹果公司最新的移动设备和系统，设计屏幕分辨率、图标设计规范、色彩搭配、文字等设计语言，同时还提供了 UI 设计资源可供大家使用。
Ant Design
蚂蚁金服设计平台是国内互联网公司之一，基于蚂蚁金服生态系统的跨设计与开发的体验设计方案，包含了网页端的颜色、字体、图标、组件等页面设计布局等设计指导网站。
蚂蚁集团的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。
Fluent Design System
微软基于Windows 10 的设计指南，它可以帮助开发者设计和构建流畅、精美的应用程序，包括人机界面布局、样式、控件和设计工具包下载。
微软将这套全新的设计语言名为 Fluent Design System（流畅设计体系），该体系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（动画）、Material（材质）和 Scale（缩放）。
WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库，包含表单、基础组件、操作反馈、导航等各种各样的设计元素。它由微信官方设计团队为微信内网页和微信小程序量身设计，使得用户的使用感知更加统一。
具体看下面的内容，有详细介绍。
Airbnb Design
Airbnb 是一家享誉全球的民宿服务公司。同时，这背后有一个他们自己强大的设计团队，为Airbnb提供着设计方面工作。我日常工作使用到的（动效方面）Lottie 也是他们设计开发的产物（感谢）。他们拥有自己的设计网站Airbnb Design。其中一些文章介绍 DSL， 正如在《设计体系》一书介绍，他们严格遵守着自己的设计规范和原则。保证着Airbnb的产品在设计上的一致性，可用性等，目的是为不同国家的用户提供好的用户体验。
界面设计中的字体思考：
文字是 App 中最核心的元素之一，产品传达给用户的内容。字体有无衬线字体和衬线字体。无论iOS 还是 Android 系统，它们都有内置的默认字体可供设计师使用。用心处理好字号大小、字体颜色与字体间距的处理上。
用户界面设计中，字体是界面设计中的基本元素。设计师要设计好界面中的字体颜色、字体间距、字号的大小、字重等思考。
苹果系统中默认的字体是：苹方字体。英文字体和数字字体是：旧金山字体，San Francisco 字体。
其中数字字体比较好的字体可以用：Dinner 字体。
安卓系统默认的中文字体是：思源黑体。 英文字体是：Roboto 字体。
界面设计中的字体设计规范，如下图所示。
介绍几款西文字体：
无衬线字体，在字的笔画开始和结束的地方，没有额外装饰，笔画粗细均匀，适合于主题设计的屏幕展示，给人一种自然舒适感。例如：无装饰性的易识别的代表字体：Helvetica 英文字体、San Francisco 英文字体、
Roboto 英文字体、Arial 英文字体。
衬线字体是字的笔画开始和结尾处的位置有额外装饰，同时笔画的粗细有所不同，一般适用于印刷排版，具有较高的可读性。例如：具有装饰性的代表字体：Times New Roman。
DIN 字体
DIN 字体是效力于德国交通标识和公共空间的经典字体，是一种很好的数字字体。
Futura 字体
Futura 字体 ，这个字体现代、时尚具有几何特征，是很多杂志和时尚品牌的常用字体，例如：时尚气质的品牌 LV 的商标字体就是这种英文字体。
Roboto 字体
Roboto 字体，是谷歌公司为 Android 操作系统开发的默认英文字体，具有“现代感”、“亲和力” 的设计感。
San Francisco 字体
San Francisco 字体 ，苹果公司设计的，苹果公司推出的 Apple Watch 和 iOS 移动端等系统的英文字体。
Didot 字体
Didot 字体， 是世界上最著名的英文字体之一，美感，可以用在 英文标题、产品设计、广告使用的一款字体。
例如：时尚杂志 VOGUE 标题字 就是运用了这个字体。
app网页设计规范 第2篇
比如：
☆ iPhone5在@2x屏幕尺寸是，640x1136px；对应的@1x，屏幕尺寸就是320x568px；
☆ iPhone6在@2x屏幕尺寸是：750x1334px；对应的@1x，屏幕尺寸就是375x667px；
☆ iPhone6Plus在@3x屏幕尺寸是：750x1334px；对应的@1x，屏幕尺寸就414x736px；
参考图片如下：
app网页设计规范 第3篇
APP 内容的布局形式多种多样，这里介绍两种最常用的布局形式，列表式布局和卡片式布局。
列表式布局
列表式布局很常见，随便打开一个 APP，这种布局基本上都存在，其布局形式的特点是可以在较小的屏幕上显示多个信息，用户可以通过上下滑动的手势获得大量的信息反馈。列表也是一种非常容易理解的显示形式。
以我们最常用的微信和 QQ 为例，其「信息」页面是列表布局，在使用这种布局形式时，应注意列表舒适体验的最小高度为 80px，最大高度取决于内容的数量。
卡片式布局
形式非常灵活。其特点是每张卡的内容和形式可以相互独立，不受干扰，因此不同的卡可以在同一页面上携带不同的内容。因为每张卡都是独立的，所以它的信息量可以比列表更丰富。
使用卡片布局时，注意卡片本身一般为白色，卡片间距颜色一般为浅灰色，当然，不同产品风格颜色可能不同，有些为浅灰色、蓝色等。