移动端界面中的版面设计原理PPT课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
•
• 通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调 的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/ 腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范， 确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/ 按钮/icon等地方，通常起强调和引导阅读的作用。
• 第二通过留白区分 元素的存在，弱化 元素与元素之间的 阻隔。
• 表单项与表单项之 间，按钮与按钮之 间，段落与段落之 间这种有联系但又 需要区分的元素用 留白的方式可以轻 易造成一种视觉上 的识别，同时也能 给用户一种干净整 洁的感觉。
• 第三通过留白有目的的突出表达的重点。“设计 包含着对差异Biblioteka Baidu控制。
02
图片的使用
HOW TO USE PICTURE>?
• App的页面结 构和文本确定 之后，就要开 始安排图标/按 钮/图片的安排 了，这时页面 也就从单纯文 本的“阅读” 型结构调整为 “观看”型结 构，对于页面 的易读性以及 页面整体的效 果会产生巨大 的影响。
• 页面中图片所占的 比率叫做图版率， 通常情况下降低图 版率会给人一种宁 静典雅、高级的感 觉。提升图版率会 有充满活力，使画 面有富有感染力的 效果。
• 实际中也跟选取图 片的元素/色调/表 达出来的情感有关 系，合适的图片也 能散发出整个应用 的气质，直接传达 给人“高级”， “平民化”，“友 好”等不同的感觉。
• 在内容比较少但是又想 提高版面率的话可以采 用一些色块，或者抽象 化模拟现实存在的物件， 例如电影票，书本纸张， 优惠券，便签等的效果， 使界面更友好也降低空 洞的感觉。
对齐 重复 亲密 对比
四 对任何信息进行排布的设计的 大原则
• 对齐除了能建立 一种清晰精巧的 外观，还能方便 开发的实现。基 于从左上至右下 的阅读习惯，移 动端界面中内容 的排布通常使用 左对齐和居中对 齐，表单填写的 输入项用右对齐。
• 设计和做其他事情一样，也要有轻重缓急之分，不要 让用户去找重点/需要注意的地方，应该让用户流畅 地接收到我们想要传达的重要的信息。
•
• 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准 色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之 间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的 颜色)，这种方法比较常用因为色相柔和过渡也非常自然。
第二种是同色系配 色(色相一致，饱 和度不同)，主色 和点晴色都在统一 的色相上，给用户 一种一致化的感受。
重复和对比是一套组合拳，让设计中的视觉元素在整个设计中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。
• 在排布复杂信息的时 候，如果没有规则地 排布那么文本的可读 性就会降低。组织信 息可以根据亲密性的 原则，把彼此相关的 信息靠近，归组在一 起。
• 如果多个项相互之间 存在很近的亲密性， 它们就会成为一个视 觉单元，而不是多个 孤立的元素。这有助 于减少混乱，为读者 提供清晰的结构。
• 在设计表达的时候， 一定要考虑内容的易 读性。适当使用图形 可以增加易读性和设 计感，而且图形的理 解比文字更高效。
•
• 那些用文字方式表现 时显得冗长的说明， 一旦换成可视化的表 现方式也会变得简明 清晰，可视化的图形 可以将说明/标题/数 值这种比较生硬的内 容，以比较柔和的方 式呈现出来。
• 通过这种方式也可以改 变页面所呈现出的视觉 感受，只是这种方法最 多改变页面的色调/质 感，并不能改改变“阅 读”内容的比例，这点 是需要注意的。
03
颜色的使用
HOW TO USE COLOR>?
• 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界 面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同， 主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。
04
留白的使用
HOW TO USE WHITE >? COLOR
• 不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因 素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的 空间构成。
•
• 常见的手法有几种，第一通过留白来减轻页面带给用户的负担。 •
• 首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积 了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给 人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有 时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过 留白来减轻页面的压迫感，使用户进入一种轻松的氛围。
• 第三种是点亮 色配色，主色 用相对沉稳的 颜色，点晴色 采用一个高亮 的颜色，起带 动页面气氛， 强调重点的作 用。
• 第四种是中性色 配色，用一些中 性的色彩为基调 搭配，弱化干扰。 这种方法在移动 端是最常见的方 法。
• 还有一些渐 变，明暗调 对比，多色 搭配等方法 在这里不一 一说明，你 感受一下。
移动端界面
中的版式设计原理 Layout Design
我总觉得 页面不太好看
说不出
但是我 你觉得这好看？哪里好
又说不出来 你的审美
要加强啊
我不懂设计， 也说不出
但是我就是觉得
不协调
哪里不好
• 其实设计本身就是一门理性的学科，审美 因人而异，只有言之有理的设计才能够说 服别人。当设计师拿到产品的原型开始做 设计时，如果只是单纯的按照原型进行而 不考虑任何规则，那么很多时候就会产生 一些不协调的结果。设计完之后产品不满 意，自己也不满意。
•
• 在UI设计中其实也存在大量的版式设计原 理，如果产品和设计都能对版式设计有一 定的了解，那么设计师拿到原型的时候， 评审设计输出稿的时候大家都能更好地理 解对方的设计。以下我总结了几种常见的 版式设计原理，是工作当中做出良好视觉 效果的前提。
01
信息的排布
HOW TO MAKE A BERUTIFUL UI>?
• 通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调 的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/ 腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范， 确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/ 按钮/icon等地方，通常起强调和引导阅读的作用。
• 第二通过留白区分 元素的存在，弱化 元素与元素之间的 阻隔。
• 表单项与表单项之 间，按钮与按钮之 间，段落与段落之 间这种有联系但又 需要区分的元素用 留白的方式可以轻 易造成一种视觉上 的识别，同时也能 给用户一种干净整 洁的感觉。
• 第三通过留白有目的的突出表达的重点。“设计 包含着对差异Biblioteka Baidu控制。
02
图片的使用
HOW TO USE PICTURE>?
• App的页面结 构和文本确定 之后，就要开 始安排图标/按 钮/图片的安排 了，这时页面 也就从单纯文 本的“阅读” 型结构调整为 “观看”型结 构，对于页面 的易读性以及 页面整体的效 果会产生巨大 的影响。
• 页面中图片所占的 比率叫做图版率， 通常情况下降低图 版率会给人一种宁 静典雅、高级的感 觉。提升图版率会 有充满活力，使画 面有富有感染力的 效果。
• 实际中也跟选取图 片的元素/色调/表 达出来的情感有关 系，合适的图片也 能散发出整个应用 的气质，直接传达 给人“高级”， “平民化”，“友 好”等不同的感觉。
• 在内容比较少但是又想 提高版面率的话可以采 用一些色块，或者抽象 化模拟现实存在的物件， 例如电影票，书本纸张， 优惠券，便签等的效果， 使界面更友好也降低空 洞的感觉。
对齐 重复 亲密 对比
四 对任何信息进行排布的设计的 大原则
• 对齐除了能建立 一种清晰精巧的 外观，还能方便 开发的实现。基 于从左上至右下 的阅读习惯，移 动端界面中内容 的排布通常使用 左对齐和居中对 齐，表单填写的 输入项用右对齐。
• 设计和做其他事情一样，也要有轻重缓急之分，不要 让用户去找重点/需要注意的地方，应该让用户流畅 地接收到我们想要传达的重要的信息。
•
• 主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准 色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之 间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的 颜色)，这种方法比较常用因为色相柔和过渡也非常自然。
第二种是同色系配 色(色相一致，饱 和度不同)，主色 和点晴色都在统一 的色相上，给用户 一种一致化的感受。
重复和对比是一套组合拳，让设计中的视觉元素在整个设计中 重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。 那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的 不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。
• 在排布复杂信息的时 候，如果没有规则地 排布那么文本的可读 性就会降低。组织信 息可以根据亲密性的 原则，把彼此相关的 信息靠近，归组在一 起。
• 如果多个项相互之间 存在很近的亲密性， 它们就会成为一个视 觉单元，而不是多个 孤立的元素。这有助 于减少混乱，为读者 提供清晰的结构。
• 在设计表达的时候， 一定要考虑内容的易 读性。适当使用图形 可以增加易读性和设 计感，而且图形的理 解比文字更高效。
•
• 那些用文字方式表现 时显得冗长的说明， 一旦换成可视化的表 现方式也会变得简明 清晰，可视化的图形 可以将说明/标题/数 值这种比较生硬的内 容，以比较柔和的方 式呈现出来。
• 通过这种方式也可以改 变页面所呈现出的视觉 感受，只是这种方法最 多改变页面的色调/质 感，并不能改改变“阅 读”内容的比例，这点 是需要注意的。
03
颜色的使用
HOW TO USE COLOR>?
• 不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界 面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同， 主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。
04
留白的使用
HOW TO USE WHITE >? COLOR
• 不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因 素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的 空间构成。
•
• 常见的手法有几种，第一通过留白来减轻页面带给用户的负担。 •
• 首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积 了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给 人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有 时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过 留白来减轻页面的压迫感，使用户进入一种轻松的氛围。
• 第三种是点亮 色配色，主色 用相对沉稳的 颜色，点晴色 采用一个高亮 的颜色，起带 动页面气氛， 强调重点的作 用。
• 第四种是中性色 配色，用一些中 性的色彩为基调 搭配，弱化干扰。 这种方法在移动 端是最常见的方 法。
• 还有一些渐 变，明暗调 对比，多色 搭配等方法 在这里不一 一说明，你 感受一下。
移动端界面
中的版式设计原理 Layout Design
我总觉得 页面不太好看
说不出
但是我 你觉得这好看？哪里好
又说不出来 你的审美
要加强啊
我不懂设计， 也说不出
但是我就是觉得
不协调
哪里不好
• 其实设计本身就是一门理性的学科，审美 因人而异，只有言之有理的设计才能够说 服别人。当设计师拿到产品的原型开始做 设计时，如果只是单纯的按照原型进行而 不考虑任何规则，那么很多时候就会产生 一些不协调的结果。设计完之后产品不满 意，自己也不满意。
•
• 在UI设计中其实也存在大量的版式设计原 理，如果产品和设计都能对版式设计有一 定的了解，那么设计师拿到原型的时候， 评审设计输出稿的时候大家都能更好地理 解对方的设计。以下我总结了几种常见的 版式设计原理，是工作当中做出良好视觉 效果的前提。
01
信息的排布
HOW TO MAKE A BERUTIFUL UI>?