移动端界面中的版面设计原理PPT课件
合集下载
移动UI设计基础入门课件PPT模板
03
第3章第三章移动端设计案例演示
第3章第三章移动 端设计案例演示
3聆听
202x
移动ui设计基础入门
演讲人
2 0 2 x - 11 - 11
目录
01. 第1章课程介绍 02. 第2章第二章移动端设计布局入门 03. 第3章第三章移动端设计案例演示
01
第1章课程介绍
第1章课程介绍
1-1移动端设计必学 1-2移动端设计壁咚的基础单位 1-3android单位转换 1-2移动端设计壁咚的基础单位 1-3Android单位转换
02
第2章第二章移动端设计布局入门
第2章第二章移动 端设计布局入门
2-1iphone分辨率与单位转换 2-2android手机应用结构 2-3android基准布局入门 2-4android文本排版入门 2-2Android手机应用结构 2-3Android基准布局入门 2-4Android文本排版入门
UI界面设计ppt课件
5
6
7
平衡原则
预期原则
经济原则
顺序原则
规则化
8
平衡原则 注意屏幕上下左右平衡。不要堆挤数据，过 分拥挤的显示会产生视觉疲和接收错误。
9
预期原则 屏幕上所有对象，如窗口、按钮、菜单等处 理应一致化，使对象的动作可预期。
10
顺序原则 对象显示的顺序应依需要排列。通常应最先 出现对话，然后通过对话将系统分段实现。
19
20
软件界面设计是为了满足软件专业化标准化 的需求而产生的对软件的使用界面进行美化、 优化、规范化的设计分支。
21
22
23
24
25
具体包括：
软件启动封面设计/软件框架设计 / 按钮设计/面板设计/菜单设计/ 标签设计/图标设计/滚动条及状态栏设计/ 安装过程设计 /包装及商品化
14
格式
在屏幕显示设计中，一幅画面不要文字太 多，若必须有较多文字时，尽量分组分页， 在关键词处进行加粗、变字体等处理，但 同行文字尽量字型统一。英文词除标语外， 尽量采用小写和易认的字体。
15
16
17
信息内容
信息内容显示不仅采用简洁、清楚的表达， 还应采用用户熟悉的简单句子，尽量不用 左右滚屏。当内容较多时，应以空白分段 或以小窗口分块，以便记忆和理解。重要 字段可用粗体和闪烁吸引注意力和强化效 果，强化效果有多样，针对实际进行选择。
28
29
软件按钮设计应该具有交互性，即应该有3到6 种状态效果：点击时状态；鼠标放在上面但未 点击的状态；点击前鼠标未放在上面时的状态； 点击后鼠标未放在上面时的状态；不能点击时 状态；独立自动变化的状态。按钮应具备简洁 的图示效果，应能够让使用者产生功能关联反 应，群组内按钮应该风格统一，功能差异大的 按钮应该有所区别。
手机淘宝页面设计介绍课件
05
广告区域：展示各种广告信息
06
页面背景：采用简洁、清晰的背景，提高用户体验
色彩搭配
主色调：手机淘宝的主色调为橙色，代表活 力、热情和温暖
辅助色：辅助色包括蓝色、绿色、紫色等， 用于强调和区分不同功能区域
对比色：使用对比色可以突出重点信息，如 红色、黄色等
渐变色：渐变色可以增加页面的层次感和 立体感，如从浅到深的渐变效果
搜索页面设计：快速准确找到 ห้องสมุดไป่ตู้需商品，提高用户体验
市场竞争力：优秀的页面设计可以提高手机淘宝 在市场竞争中的优势，吸引更多用户和商家。
手机淘宝页面设计的原则
简洁明了：页面设计应简 洁明了，让用户能够快速 找到所需信息。
易于操作：页面设计应易 于操作，让用户能够轻松 完成购物流程。
视觉吸引力：页面设计应 具有视觉吸引力，吸引用 户关注并激发购买欲望。
6
设计页面风格：设计手机淘宝页面的整体风 格，包括色彩、字体、背景等
7
测试与优化：对手机淘宝页面进行测试和优 化，确保页面的可用性和易用性
8
发布与维护：发布手机淘宝页面，并根据用 户反馈进行维护和更新
设计实践技巧
01
简化页面：减少不必要的元素，突出重点信息
02
色彩搭配：选择合适的色彩搭配，提高页面视觉效果
03
布局合理：合理安排页面元素，提高页面可读性
04
响应式设计：考虑不同设备的屏幕尺寸，实现页面自适应
设计实践成果展示
首页设计：简洁明了，突出重 点
分类页面设计：清晰明了，易 于查找
商品详情页设计：详细展示商 品信息，提高购买欲望
购物车页面设计：方便用户管 理购买商品，提高购买效率
移动端UI界面设计介绍课件
设计工具
Sketch：矢量图 形设计工具，适用 于iOS和Android 平台
Adobe XD：矢量 图形设计工具，适 用于iOS和 Android平台
Figma：矢量图形 设计工具，适用于 iOS和Android平 台
InVision Studio： 矢量图形设计工具， 适用于iOS和 Android平台
03
提高开发效率：合理的UI设计可以降低开发 成本和维护成本
04
适应多种设备：移动端UI设计需要适应各种 屏幕尺寸和分辨率，满足不同设备的需求
移动端UI设计的基本原则
01
简洁明了：界面设计应简 洁明了，让用户能够快速 找到所需功能。
02
易于操作：界面设计应易
于操作，让用户能够轻松
完成各种任务。
03
响应迅速：界面设计应响 应迅速，让用户能够快速 得到反馈。
04
保持一致性：界面设计应
保持一致性，让用户能够
快速熟悉并适应界面。
移动端UI设计的发展趋势
1 扁平化设计：简洁明了，易于理解 2 响应式设计：适应各种屏幕尺寸和设备 3 手势操作：更直观、自然的交互方式 4 动态效果：增强用户体验，提高用户参与度 5 人工智能与机器学习：提高个性化和智能化水平 6 隐私与安全：保护用户隐私和数据安全，提高用户信任度
- 设计要点：个性 化推荐算法、用户 界面设计、交互设
计
- 设计要点：导航设 计、搜索功能、商品
展示
案例四：美团外卖界 面设计
案例三：网易云音乐 界面设计
- 特点：个性化推荐， 注重用户体验
- 特点：快速下单， 方便快捷
- 设计要点：菜单设计、 下单流程、支付方式设计移动端UI来自面设 计优化用户体验优化
界面设计分析ppt课件
ipone界面应用类型及其特点 对ipone界面设计的解剖
3. 4. 5.
我的总结
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
在人和机器的互动过程中，有一个层面，即我们所说的界面。从 心理学意义来分，界面可分为感觉(视觉、触觉、听觉等)和情感两 个层次。 用户界面设计是屏幕产品的重要组成部分。界面设计是一个复 杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此
能类似，但都在设计与使用上有所差异，“良好的用户体验”已成为APP
竞争的标配。
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
手机用户界面的好坏决定着整款产品的好坏。用户的大众化以及功能的 复杂化使手机界面的设计及其使用环境的技术成为关心的焦点，尤其在
竞争激烈的市场环境中，人性化的用户界面设计是诸多设计中受欢迎的。
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
用户界面设计原则 1.简易性 2.用户语言 3.记忆负担最小化 4.一致性 5.清楚 6.用户的熟悉程度
7.从用户的观点考虑
8.排列
9.安全性
10.灵活性
11.人性化
1.
我所知道的手机界面
2.
ipone界面的设计流程
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
一级主界面版式
ipone在整个版式上舍弃了边界，依 靠色彩来体现交互、信息的分隔;相
3. 4. 5.
我的总结
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
在人和机器的互动过程中，有一个层面，即我们所说的界面。从 心理学意义来分，界面可分为感觉(视觉、触觉、听觉等)和情感两 个层次。 用户界面设计是屏幕产品的重要组成部分。界面设计是一个复 杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此
能类似，但都在设计与使用上有所差异，“良好的用户体验”已成为APP
竞争的标配。
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
手机用户界面的好坏决定着整款产品的好坏。用户的大众化以及功能的 复杂化使手机界面的设计及其使用环境的技术成为关心的焦点，尤其在
竞争激烈的市场环境中，人性化的用户界面设计是诸多设计中受欢迎的。
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
用户界面设计原则 1.简易性 2.用户语言 3.记忆负担最小化 4.一致性 5.清楚 6.用户的熟悉程度
7.从用户的观点考虑
8.排列
9.安全性
10.灵活性
11.人性化
1.
我所知道的手机界面
2.
ipone界面的设计流程
Main Page
Topic 1
Topic 2
Topic 3
Topic 4
Topic 5
一级主界面版式
ipone在整个版式上舍弃了边界，依 靠色彩来体现交互、信息的分隔;相
《UI设计》课件——6.1 认识App界面
要具备美观性
认识App界面
6.1.1 App基本界面构成
2
右图所示为去哪儿网App的各个 界面，可发现其界面分为3个部分， 分别是标题栏、信息展示区、底部导 航栏。
6.1.2 App界面布局形式
3
1. 导航布局
顶部导航式布局 底部标签导航式布局 双导航式布局
抽屉导航式布局
6.1.2 App界面布局形式
4
2. 信息展示布局
宫格式布局
热门标签式布局 图示式布局
信息展 示布局
竖排列表式布局 手风琴式布局
大图展示式布局
图表式布局
6.1.3 App界面设计要点
5
设计人员在进行App界面设计时，需要展现App的特点和功能，使其能够更快、更准确地传 递信息。App界面的设计要点主要包括如下4点。01Leabharlann 要明确传达主旨02
03
04
要保证功能的合理性 要有清晰的展现信息层级
《移动终端UI设计》教学课件01移动终端UI设计概述
1.5.1 iOS系统
42
详情页标题文字与详情文字间距为 8的倍数。例如，24像素、32像素、40像素等。 设定行间距与字号比例为 1.5倍。对齐原则为段落文字采用“两端对齐左对齐”，避 头尾为“严格”，首行严禁放 5标点。 关于字体大小的问题，顶部操作栏文字大小为 34～ 38像素，标题文字大小为 28～ 34像素，正文文字大小为 26～ 30像素，辅助性文字大小为 0～ 24像素。
1.2.6 可穿戴设备
24
越来越多的科技公司开始大力开发智能 眼镜、智能手表、智能手环、智能戒指 等可穿戴设备产品。智能终端开始与时 尚挂钩，人们的需求不再局限于可携带， 更追求可穿戴，人们的手表、戒指、眼 镜都有可能成为智能终端。
1.3.1 APP的概念
26
APP即 application （应用程序）的缩写， 指运行在智能手机、平 板电脑等移动终端设备 上的第三方应用程序。
生活服务类 生活服务类 APP 有很多， 而且类型广泛
新闻资讯类 2019 年新闻资讯类 APP 排行榜如图 1-14 所示。
1.3.2 APP的分类
28
1.3.2 APP的分类
29
1.3.3 APP界面的构成元素
30
按钮
进度条
列表框
1
2
3
4
5
6
图标
7
开关
搜索栏
标签栏
1.3.4 APP的设计流程
提示：生活中常见的智能终端包括移动智能终端、 车载智能终端、智能电视、可穿戴设备等。
1.2.1 移动终端的概念
17
移动终端特别是移动智能终端，具有如下特性。
54 3 2 1
1 移动性和实时性。 2 通话功能、上网功能和多媒体功能。 3 硬件与软件的可靠性。 4 基于操作系统的多任务性。 5 应用程序安装使用的广泛性与易用性。
移动界面交互设计PPT课件
Android手机图标尺寸
.
11
1.移动设备界面尺寸和基本组成元素
Android手机系统分辨率占有率
.
12
1.移动设备界面尺寸和基本组成元素
Android
1、尺寸及分辨率 Android 界面尺寸：480x800、720x1280、1080x1920...
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸， 这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰； 切图后的图片文件大小也适中，应用的内存消耗也不会过高。
WEB端界面元素的布局
F式布局-
从上到下 从左到右
•按照逻辑，我们得出以下结论：
•品牌标志和导航应该放在页面 的顶部，这是用户对网站的第 一印象。
•在内容结构中，图片更容易获 得关注。
•用户浏览完图片后，下一个关 注点便是标题。
•用户会大致的浏览文本，但是
往往不会通读。
.
20
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，
将状态栏和导航栏合在了一起
.
4
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
.
3
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
.
11
1.移动设备界面尺寸和基本组成元素
Android手机系统分辨率占有率
.
12
1.移动设备界面尺寸和基本组成元素
Android
1、尺寸及分辨率 Android 界面尺寸：480x800、720x1280、1080x1920...
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸， 这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰； 切图后的图片文件大小也适中，应用的内存消耗也不会过高。
WEB端界面元素的布局
F式布局-
从上到下 从左到右
•按照逻辑，我们得出以下结论：
•品牌标志和导航应该放在页面 的顶部，这是用户对网站的第 一印象。
•在内容结构中，图片更容易获 得关注。
•用户浏览完图片后，下一个关 注点便是标题。
•用户会大致的浏览文本，但是
往往不会通读。
.
20
2.移动设备小屏幕与终端特殊性对界面与交互设计的影响
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，
将状态栏和导航栏合在了一起
.
4
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
iphone6 plus UI物理版是iphone6 plus实际的屏幕像素。 iphone6 plus UI设计版是我们截屏iphone6 plus的界面在ps中去量，发现的尺寸。 iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。
.
3
1.移动设备界面尺寸和基本组成元素
移动设备界面尺寸
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 通过这种方式也可以改 变页面所呈现出的视觉 感受，只是这种方法最 多改变页面的色调/质 感，并不能改改变“阅 读”内容的比例，这点 是需要注意的。
03
颜色的使用
HOW TO USE COLOR>?
• 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界 面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同， 主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。
04
留白的使用
HOW TO USE WHITE >? COLOR
• 不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因 素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的 空间构成。
•
• 常见的手法有几种，第一通过留白来减轻页面带给用户的负担。 •
• 首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积 了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给 人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有 时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过 留白来减轻页面的压迫感，使用户进入一种轻松的氛围。
• 实际中也跟选取图 片的元素/色调/表 达出来的情感有关 系，合适的图片也 能散发出整个应用 的气质，直接传达 给人“高级”， “平民化”，“友 好”等不同的感觉。
• 在内容比较少但是又想 提高版面率的话可以采 用一些色块，或者抽象 化模拟现实存在的物件， 例如电影票，书本纸张， 优惠券，便签等的效果， 使界面更友好也降低空 洞的感觉。
重复和对比是一套组合拳，让设计中的视觉元素在整个设计中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。
• 在排布复杂信息的时 候，如果没有规则地 排布那么文本的可读 性就会降低。组织信 息可以根据亲密性的 原则，把彼此相关的 信息靠近，归组在一 起。
移动端界面
中的版式设计原理 Layout Design
我总觉得 页面不太好看
说不出
但是我 你觉得这好看？哪里好
又说不出来 你的审美
要加强啊
我不懂设计， 也说不出
但是我就是觉得
不协调
哪里不好
• 其实设计本身就是一门理性的学科，审美 因人而异，只有言之有理的设计才能够说 服别人。当设计师拿到产品的原型开始做 设计时，如果只是单纯的按照原型进行而 不考虑任何规则，那么很多时候就会产生 一些不协调的结果。设计完之后产品不满 意，自己也不满意。
• 第三种是点亮 色配色，主色 用相对沉稳的 颜色，点晴色 采用一个高亮 的颜色，起带 动页面气氛， 强调重点的作 用。
• 第四种是中性色 配色，用一些中 性的色彩为基调 搭配，弱化干扰。 这种方法在移动 端是最常见的方 法。
• 还有一些渐 变，明暗调 对比，多色 搭配等方法 在这里不一 一说明，你 感受一下。
02
图片的使用
HOW TO USE PICTURE>?
• App的页面结 构和文本确定 之后，就要开 始安排图标/按 钮/图片的安排 了，这时页面 也就从单纯文 本的“阅读” 型结构调整为 “观看”型结 构，对于页面 的易读性以及 页面整体的效 果会产生巨大 的影响。
• 页面中图片所占的 比率叫做图版率， 通常情况下降低图 版率会给人一种宁 静典雅、高级的感 觉。提升图版率会 有充满活力，使画 面有富有感染力的 效果。
•
• 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准 色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之 间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的 颜色)，这种方法比较常用因为色相柔和过渡也非常自然。
第二种是同色系配 色(色相一致，饱 和度不同)，主色 和点晴色都在统一 的色相上，给用户 一种一致化的感受。
• 如果多个项相互之间 存在很近的亲密性， 它们就会成为一个视 觉单元，而不是多个 孤立的元素。这有助 于减少混乱，为读者 提供清晰的结构。
• 在设计表达的时候， 一定要考虑内容的易 读性。适当使用图形 可以增加易读性和设 计感，而且图形的理 解比文字更高效。
•
• 那些用文字方式表现 时显得冗长的说明， 一旦换成可视化的表 现方式也会变得简明 清晰，可视化的图形 可以将说明/标题/数 值这种比较生硬的内 容，以比较柔和的方 式呈现出来。
•
• 在UI设计中其实也存在大量的版式设计原 理，如果产品和设计都能对版式设计有一 定的了解，那么设计师拿到原型的时候， 评审设计输出稿的时候大家都能更好地理 解对方的设计。以下我总结了几种常见的 版式设计原理，是工作当中做出良好视觉 效果的前提。
01
信息的排布
HOW TO MAKE A BERUTIFUL UI>?
•
• 通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调 的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/ 腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范， 确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/ 按钮/icon等地方，通常起强调和引导阅读的作用。
对齐 重复 亲密 对比
四 对任何信息进行排布的设计的 大原则
• 对齐除了能建立 一种清晰精巧的 外观，还能方便 开发的实现。基 于从左上至右下 的阅读习惯，移 动端界面中内容 的排布通常使用 左对齐和居中对 齐，表单填写的 输入项用右对齐。
• 设计和做其他事情一样，也要有轻重缓急之分，不要 让用户去找重点/需要注意的地方，应该让用户流畅 地接收到我们想要传达的重要的信息。
• 第二通过留白区分 元素的存在，弱化 元素与元素之间的 阻隔。
• 表单项与表单项之 间，按钮与按钮之 间，段落与段落之 间这种有联系但又 需要区分的元素用 留白的方式可以轻 易造成一种视觉上 的识别，同时也能 给用户一种干净整 洁的感觉。
• 第三通过留白有目的的突出表达的重点。“设计 包含着对差异的控制。
03
颜色的使用
HOW TO USE COLOR>?
• 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界 面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同， 主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。
04
留白的使用
HOW TO USE WHITE >? COLOR
• 不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因 素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的 空间构成。
•
• 常见的手法有几种，第一通过留白来减轻页面带给用户的负担。 •
• 首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积 了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给 人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有 时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过 留白来减轻页面的压迫感，使用户进入一种轻松的氛围。
• 实际中也跟选取图 片的元素/色调/表 达出来的情感有关 系，合适的图片也 能散发出整个应用 的气质，直接传达 给人“高级”， “平民化”，“友 好”等不同的感觉。
• 在内容比较少但是又想 提高版面率的话可以采 用一些色块，或者抽象 化模拟现实存在的物件， 例如电影票，书本纸张， 优惠券，便签等的效果， 使界面更友好也降低空 洞的感觉。
重复和对比是一套组合拳，让设计中的视觉元素在整个设计中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。
• 在排布复杂信息的时 候，如果没有规则地 排布那么文本的可读 性就会降低。组织信 息可以根据亲密性的 原则，把彼此相关的 信息靠近，归组在一 起。
移动端界面
中的版式设计原理 Layout Design
我总觉得 页面不太好看
说不出
但是我 你觉得这好看？哪里好
又说不出来 你的审美
要加强啊
我不懂设计， 也说不出
但是我就是觉得
不协调
哪里不好
• 其实设计本身就是一门理性的学科，审美 因人而异，只有言之有理的设计才能够说 服别人。当设计师拿到产品的原型开始做 设计时，如果只是单纯的按照原型进行而 不考虑任何规则，那么很多时候就会产生 一些不协调的结果。设计完之后产品不满 意，自己也不满意。
• 第三种是点亮 色配色，主色 用相对沉稳的 颜色，点晴色 采用一个高亮 的颜色，起带 动页面气氛， 强调重点的作 用。
• 第四种是中性色 配色，用一些中 性的色彩为基调 搭配，弱化干扰。 这种方法在移动 端是最常见的方 法。
• 还有一些渐 变，明暗调 对比，多色 搭配等方法 在这里不一 一说明，你 感受一下。
02
图片的使用
HOW TO USE PICTURE>?
• App的页面结 构和文本确定 之后，就要开 始安排图标/按 钮/图片的安排 了，这时页面 也就从单纯文 本的“阅读” 型结构调整为 “观看”型结 构，对于页面 的易读性以及 页面整体的效 果会产生巨大 的影响。
• 页面中图片所占的 比率叫做图版率， 通常情况下降低图 版率会给人一种宁 静典雅、高级的感 觉。提升图版率会 有充满活力，使画 面有富有感染力的 效果。
•
• 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准 色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之 间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的 颜色)，这种方法比较常用因为色相柔和过渡也非常自然。
第二种是同色系配 色(色相一致，饱 和度不同)，主色 和点晴色都在统一 的色相上，给用户 一种一致化的感受。
• 如果多个项相互之间 存在很近的亲密性， 它们就会成为一个视 觉单元，而不是多个 孤立的元素。这有助 于减少混乱，为读者 提供清晰的结构。
• 在设计表达的时候， 一定要考虑内容的易 读性。适当使用图形 可以增加易读性和设 计感，而且图形的理 解比文字更高效。
•
• 那些用文字方式表现 时显得冗长的说明， 一旦换成可视化的表 现方式也会变得简明 清晰，可视化的图形 可以将说明/标题/数 值这种比较生硬的内 容，以比较柔和的方 式呈现出来。
•
• 在UI设计中其实也存在大量的版式设计原 理，如果产品和设计都能对版式设计有一 定的了解，那么设计师拿到原型的时候， 评审设计输出稿的时候大家都能更好地理 解对方的设计。以下我总结了几种常见的 版式设计原理，是工作当中做出良好视觉 效果的前提。
01
信息的排布
HOW TO MAKE A BERUTIFUL UI>?
•
• 通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调 的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/ 腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范， 确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/ 按钮/icon等地方，通常起强调和引导阅读的作用。
对齐 重复 亲密 对比
四 对任何信息进行排布的设计的 大原则
• 对齐除了能建立 一种清晰精巧的 外观，还能方便 开发的实现。基 于从左上至右下 的阅读习惯，移 动端界面中内容 的排布通常使用 左对齐和居中对 齐，表单填写的 输入项用右对齐。
• 设计和做其他事情一样，也要有轻重缓急之分，不要 让用户去找重点/需要注意的地方，应该让用户流畅 地接收到我们想要传达的重要的信息。
• 第二通过留白区分 元素的存在，弱化 元素与元素之间的 阻隔。
• 表单项与表单项之 间，按钮与按钮之 间，段落与段落之 间这种有联系但又 需要区分的元素用 留白的方式可以轻 易造成一种视觉上 的识别，同时也能 给用户一种干净整 洁的感觉。
• 第三通过留白有目的的突出表达的重点。“设计 包含着对差异的控制。