江苏龙网

  1. 首页 > 人文 > >

雨柠菇凉|UI设计基本规范

_本文原题为：UI设计基本规范
想要学习UI ， 那你知道UI设计的基本规范有哪些吗?
雨柠菇凉|UI设计基本规范
文章图片
一、设计原则
统一性：每个设计应该是统一的 ， 不能有太多个性差异化的特征;
内容：用户更多关注的是内容 ， 而非设计本身;
确定性：在设计中减少不确定的因素 ， 和预期 。
二、色彩系统
【雨柠菇凉|UI设计基本规范】设计中三大元素 ， 色彩 ， 字体 ， 图形 ， 我们在建立一个系统时候 ， 色彩是很重要一部分 ， 我们需要定义好我们整个系统的色彩架构体系 ， 色彩体系一旦建立好 ， 后面我们的设计都将围绕这些色彩进行设计 ， 色彩包括：品牌色、辅助色、字体黑白灰颜色、不可用颜色、超链接颜色、成功或失败颜色 ， 主色盘,辅助色盘,色盘延伸等 。
三、图形
图形 ， 设计中很重要元素之一 ， 我们插画风格图形如何定义 ， 图标 ， 背景图形都属于图形一部分 。 插画在设计运用类型有几种 ， 比如atlassian对于他们插画类型进行了规范 ， 插画需要有隐秘和故事性在里面 ， 插画必须有构建的感觉 ， 定义了人物特征以及颜色规范 。 包括对于空白页图形定义 ， 对图标风格定义 ， 包括色彩关系 ， 对于头像 ， 定义了有五官和无五官风格定义 ， 包括整个规范的正确示范和错误示范,图标规范等 。
四、栅格系统
栅格是为了保证页面中更好的布局 ， 保证布局统一性 。 栅格系统里面又分最小单位和间距 ， 在airbnb中对于间距 ， 他们运用了8的倍数 ， 所有的规范都是很有弹性的 ， 8 ， 16 ， 24 ， 48 ， 64来建立 。 网格系统中的列,也有叫栏,网格系统中的行,网格系统中的水槽,网格系统中的边距 。
五、字体
界面中出现最多的内容字体 ， 字体除了传统意义上大小之外 ， 还有字间距、行间距、字重对比、字体颜色等 。 字重 ， 就是字体粗细 ， 通过字重可以加强层级;字体大小以及运用场景 ， 字体在界面中什么样场景运用多大字号 ， 以及对应的字间距 ， 行间距等等都是需要我们去定义的;字体颜色 ， 什么时候用品牌色 ， 成功 ， 错过 ， 超链接出错等等各个状态的颜色如何去定义 ， 后面文章我会详细说明 。
六、投影
在设计系统中我们需要定义好投影关系 ， 投影需要去定义不同的强度大小 ， 以满足页面中需要 ， 一般通过透明度 ， 以及投影远近来定义 。
七、图文关系
图片和文字在界面中如何处理 ， 多色调如何运用 ， 黑色图片上放文字怎么处理 ， 白色图片放文字如何处理都是需要我们去详细定义的 。
设计一套设计语言是一个很复杂的过程 ， 前期一般需要比较资深的的设计师来完成 ， 设计完成后 ， 对于基础的颜色 ， 字体不要经常变动动 ， 成本会比较高 ， 至少需要保证这些基础元素 ， 一年内不要频繁变动 ， 今天和大家分享的只是一个大概框架 ， 后续我将会拆解里面每个模块 ， 逐步和大家分享如何去设计一个语言 。
雨柠菇凉|UI设计基本规范
文章图片
八、边距和间距
在移动端页面的设计中 ， 页面中元素的边距和间距的设计规范是非常重要的 ， 一个页面是否美观、简洁、是否通透和边距间距的设计规范紧密相连 ， 所以说我们有必要对它们进行了解 。
全局边距
全局边距是指页面内容到屏幕边缘的距离 ， 整个应用的界面都应该以此来进行规范 ， 以达到页面整体视觉效果的统一 。 全局边距的设置可以更好的引导用户竖向向下阅读 。
卡片间距
在移动端页面设计中卡片式布局是非常常见的布局方式 ， 至于卡片和卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定 ， 通常最小不低于16px ， 卡片间距的设置是灵活多变的 ， 一定要根据产品的气质和实际需求去设置 ， 平时也可以多截图测量一下各类APP的卡片间距都是怎么设置的 ， 看的多了并融会贯通 ， 卡片间距设置自然会更加合理 ， 更加得心应手 。


推荐阅读


上一篇：葡萄酸果|王艺瑾颜值依旧“抗打”，陈卓璇脸胖了，硬糖少女303庆功宴生图

下一篇：搭配化妆师|穿黑色T恤搭破洞黑灰色牛仔裤，打扮潮了就帅气了！，谢霆锋现身