Loading [MathJax]/extensions/tex2jax.js

移动端APP UI设计入门

Contents
  1. 界面布局规范设计
  2. 标准色规范设计
  3. 文本规范设计
    1. 标题类
    2. 文本类
  4. 控件规范设计
    1. 分割元素
    2. 按钮
    3. 系统图标
    4. 导航图标
    5. 头像
    6. 标签
    7. 悬浮操作按钮
    8. 缩略图
    9. 列表
    10. 搜索框

设计规范750*1334两倍率

界面布局规范设计

边距 w20

状态栏 w40

主导航 w88

底栏 w88

标准色规范设计

产品标准色分为主色、辅助色、点缀色

主色:主视觉,重点突出的颜色,决定产品色调,超过三种杂乱

辅助色:与主色搭配的颜色,是产品颜色搭配更加完美协调,主元素,辅元素、次要元素、分割元素(分两种)(颜色逐渐变淡)

点缀色:点亮画面,起到强调、引导浏览作用,建议一种,偏暖色,可设置同为主色,(颜色逐渐变淡)分三种按369分类,3字体,6分割线,9背景分割(不建议使用369,缺乏个性)

文本规范设计

标题类

主元素 展示标题(问吧分类列表页问题):大-字号40 加粗|行距50 小-字号36 加粗|行距50
主元素 主标题(问吧分类的java标题):大-字号32 加粗 小-字号28 中等
辅元素 副标题:大-字号30 加粗 小-字号24 中等

文本类

主元素: 主文本(问吧详情页用户发表的文本):字号 36 中等|行距58
辅元素: 辅文本(详情页阐述):字号 30 中等|行距48
次要元素: 次要文本(浏览数点赞数):字号24 中等

控件规范设计

分割元素

一级分割线:大板块区分 颜色:分割元素1

二级分割线:小板块区分 颜色:分割元素2

分割背景:H 20 颜色:比12更淡的

按钮

圆角矩形:大*圆角:8 W560 * H88|颜色:主色|文本:34

​ 小*圆角:4 W140 * H56|颜色:主色|文本:24

空心圆角矩形:同上

系统图标

大图标:44*44

中图标:36*36

小图标:24*24

导航图标

圆形

大(首页导航):96*96

小(分页导航):72*72

头像

圆形

大(用户中心):112*112

小(用户评论):72*72

标签

大小:80*28

圆角:13.5

文本:20

悬浮操作按钮

缩略图

间距:10

4:3 3图

大小:232*174

16:9 2图

大小:350*196

1:1 1图

大小:710*398

1图左右结构

大小:320*240

列表

搜索框

750*88

文本框:500*60 圆角29.5

圆形搜索图标:36*36

输入文本:24