设计参考

2020-03-16 407 阅读2分钟

协作平台

前端团队，UI团队平台统一使用,由UI团队负责人负责创建项目，加入成员。

设计稿预览: 蓝湖
字体图标库: iconfont
基础动画库参考: animate
图表库参考：echarts
滑动交互参考：BetterScroll

原型稿设计原则

相同功能使用同一种交互方式
多页面要按照同一套交互逻辑、风格、排版、排序
产品结构(思维导图)(脑图)对应，根据项目功能，构建页面目录
产品原型修改通知，做修改记录

前端UI框架参考

Web: 前端技术选型为Vue,因此UI设计人员，应参考UI框架技术为Vue的框架，前端Vue版本为(Vue 2.xx)，请注意参考
App: 暂无，待补充，
微信小程序：目前采用有赞Vant Weapp UI框架

UI设计规范

常用字体大小:

导航标题20px 标题16px 正文14px 解释12px（banner设计除外）

12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容
14px 则适用于非突出性的普通正文内容。
16px、18px、20px、26px或者30px 适用于突出性的标题内容

设计稿尺寸：

750 * 1334 (iphone6)

像素设计：

像素设计尽量保持偶数原则，移动端显示会有1像素问题

字体间距：

行间距：推荐字体大小的1.5-2倍
段落间距字体大小的2-2.5倍

字体颜色设计：

正文字体颜色: 采用易读性的深灰色：#333333 - #666666 之间的颜色，
主题色：建议采用产品VI（Visual Identity）颜色，产品颜色，品牌颜色、理念颜色。

常用布局方式：

居中布局
左右布局
圣杯布局

设计文章参考