蚂蚁金服网页设计 第1篇
1、保证设计的一致性。
对内部：多个设计师合作，依然能保证设计风格的统一。
对用户：提高用户体验，提高操作效率，加深对产品的记忆。
2、提高开发效率
与前端有效沟通的工具，提高设计还原度，降低对接成本。
开发可以建立公共组件库，极大的提高了开发效率。
3、方便产品迭代
随着产品的业务变化，发现一些问题或者需要优化用户体验的时候，针对单个控件进行调整，就可以影响全局，十分便捷。
蚂蚁金服网页设计 第2篇
1、网页设计是什么？
网页设计也被称为 Web Design、网站设计、Website design、WUI 等。它的本质就是网站的图形界面设计。
一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等。
3、网站种类
网站的分类按对象来划分可以分为 To C端和 To B端两种。To C端就是面向用户和消费者，例如、企业网站、产品网站、电商网站、移动端H5 等，均是面向用户的产品。以用户为中心考虑体验设计。
To B端作为一个需求量很大的类别，比如电商后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是 To B 类网站项目了。To B 类项目最重要的是效率，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要使用者可以高效工作使用。
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓「高端」、「大气」、「上档次」的风格，也就是为了达到让消费者认同品牌这个要求。
产品网站
从苹果公司的 iPhone 介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，产品设计必须精致、有品质感。
可以参考的网站有： 百度的 ECHARTS ，如下图所示。
CRM系统（简单拆解网页B端的设计规范）
CRM 即 Customer relationship management，翻译过来是客户管理管理系统。CRM 是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。
在PC端建议采用： 1440×900的设计尺寸
认识 B 端系统的设计原则
一致
与现实生活一致 ， 用户使用习惯
界面中一致，设计图标、文字、元素等保持一致性。
反馈
控制反馈，清晰的知道自己的操作。
清晰认知页面的主题和交互状态。
效率
简化流程。清晰明确的含义 界面快速认知和理解。
结果可控
用户可自由操作，包括撤销、回退、终止当前操作等。
设计规范（具体可以参考 ANT DESIGN 网站设计规范，去制作本公司的网页端的设计规范）
从原子：色彩、字体、间距、圆角、分割线。
分子：
输入框、选择器、开关、上传、时间日期选择
组件：
导航、表单、列表、 数据可视化图表、 筛选
通用层面思考：
色彩 、文字、 边距和圆角、 按钮 、间距、 栅格
主色：B端建议尽量选择冷色系 避免太高亮
建议关键主色与白色对比度大于
附：对比度检测
按钮： 实心按钮、 空心按钮 、文字按钮
PC端后台：不推荐用大圆角
间距
一般选用8的倍数
8、16、24、32、40、48、56、64、72……
网页栅格，一般选用24栅格布局
24栏+23水槽+2页边距
栅格应用在内容层，如下图所示。
顶部导航的使用场景：
适用于一级导航数量较少，内容较为简单的系统
追求沉浸式阅读的系统
多用于官网首页
顶部导航的优点：
占用屏幕空间小，为内容区留出更多空间
对视觉的干扰小，符合从上到下的阅读习惯
一般采用固定版心的方式，更容易适配
随着业务的发展，拓展性变差
蚂蚁金服网页设计 第3篇
（具体看我站酷前面写的组件化思维的文章）
Ios系统和安卓系统都提供了一些固定的官方组件规范。遵循其官方组件规范，可以极大提高设计和开发效率，同时降低用户的学习成本。其中最常见的规范化组件包括顶部的状态栏、导航栏、底部标签栏和工具栏。
状态栏
ios 是 20pt, 安卓是24dp.
导航栏
ios 是 44pt, 安卓是56dp.
标签栏
ios 的高度是 49pt, 安卓标签栏的高度是48dp.
工具栏
工具栏的高度是 44pt,安卓是 48dp .
字体是苹方字体；英文是SF英文字体。思源黑体，roboto 英文字体。
IOS设计是 11pt到29pt 左右，一级主题是24pt 以上,二级标题是20pt左右。
内容，导航栏标题是 18pt。 三级标题是16pt。 文字内容一般是 14pt
品类区图标内容：12pt 。 底部TAB 图标文字：10pt到11pt
蚂蚁金服网页设计 第4篇
信息的设计优先级，布局合理性，提升信息的传达效率。
核心功能的布局
核心功能的各模块的布局之间保持相对独立，标签横向数量尽量不要超过5个，超过5个可以采用左右滑的交互方式来实现，来自于设计心理学。
标签样式的布局优点是各入口清晰呈现，方便用户快速查找信息；标题一定要精简。对于要突出的核心功能，可以做信息层级的大小、是否有设计背板的处理，主次关系分明。
列表式布局
列表式布局适用于信息类的产品。
列表式布局优点信息展示较直观，节省界面空间，浏览效率高，字段长度不受限制，并且可以错行展示。单纯看文字会视觉疲劳，所以图文混排，富有变化。突出主题，优质配图，有利于用户更好的阅读信息。
卡片式布局
卡片式布局就是把不同大小、不同形式的内容放在一个容器里进行组合展示。较常见的是图文混排，既要做到视觉上的一致性感觉，又要平衡图片和主题内容的关系。分组展示，让用户更好的理解各模块的内容。
瀑布流布局
瀑布流布局适用于图片、视频等更好的沉浸式的浏览内容。移动端的瀑布流布局一般是两列信息并行，错位展示，可以极大的提升交互效率，可以制造丰富的视觉体验，适用于花瓣等图片类的界面布局设计。
蚂蚁金服网页设计 第5篇
优秀设计来自世界互联网公司，前沿的设计理念和完善的设计语言是我们设计师的学习目标。了解和学习后，更好的进行产品设计。
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 标题字 就是运用了这个字体。