100天UI学习笔记-APP基础

内容整理自线下课程笔记。

使用软件：Sketch

文章内容：iOS设计规范、Android设计规范、LOGO设计、icon设计、APP版式设计、APP配色、APP适配

iOS基本尺寸和设计规范

sketch

在sketch中设计iPhone界面时画布如何选择

sketch内栏高设计尺寸

状态栏

文字只有黑白两色，根据背景色或图片的明度自适应

导航栏

又叫标题栏，可放置页面名称、按钮、icon、搜索等，iOS标题居中时，每侧最多两个功能按钮

标签栏

iOS主推等导航样式，可放置2-5个标签

标签栏和工具栏区别

页面原型设计等五个步骤

位置、大小、距离、形式、色彩

位置-视觉层级

*重要信息要在首屏露出

大小-视觉层级

*细节放大同样也能提升元素等重要性

距离-视觉层级

形式-视觉层级

色彩-视觉层级

设计基本原则

聚合、对齐、对比、重复

聚合

1、将彼此相关的元素靠近，聚合在一起，能非常直接地表示元素之间存在关联

2、聚合的元素会形成一个视觉单元，而不是多个孤立的元素。有助于减少混乱，形成清晰的结构

3、当同一个界面显示的元素较多时，根据元素之间的关系分成多个聚合的组，可以让界面更有条理，同时可以形成留白，使画面更加美观

对齐

1、将各个元素的外边界对齐，保证页面统一且更有条理

2、不同的对齐标准可以清楚地区分内容之间的层级

3、在整体对齐的基础上，偶尔打破对齐规则，可以增强画面的层次感或增强内容的视觉层级关系

4、界面上的任何一个元素都必须与另一个元素存在某种视觉联系（对齐）

对比

1、让两个元素在视觉上制造出截然不同的反差，可以吸引用户的眼球

2、将不同的元素在视觉上做明显的对比处理，可以获得非常清晰的层级关系

3、强烈的对比关系，可以凸显某一个元素的优先级

重复

1、在整个产品的设计中重复使用相同的元素，可以增强界面风格的一致性和视觉的识别性

2、重复的元素可以是字体、颜色、符号、空间关系、线条等任何设计要素

六步配色法

确定主色：联想，查找，提取

完成配色：调色，验证

完美执行：定规范

联想

根据产品特性联想关键词

功能特征、行业特性、地域特征、流行趋势、相关事物、相关形容词、背景故事、品牌文化、用户群特性、产品定位

查找

摄影图片、设计作品、工艺品

提取

用软件分析提取出主要颜色

调色

色彩调和搭配形成配色方案

定规范

制定合理定色彩使用规范

标准色值

完成配色：调色，验证

色彩基本属性：色相、饱和度、明度

色彩关系：同类、相邻、对比、互补

完美执行：定规范

APP：在同一款产品中遵循同一套用色规范

团队：多名设计师配合，需制定统一等色彩方案

使用说明：保证设计团队准确高效执行

优秀的APP LOGO

三美四得：视觉美、情感美、意义美、看得懂、记得住、找得到、用得开

如何设计一款优秀的APP LOGO

创意：确定一个方向、充分展开想象、把想法画出来、一个一个推敲

确定一个方向

分析产品定位，明确设计方向

目标用户、主要功能、slogan、产品认知度

充分展开想象

头脑风暴，提取关键词

产品名称、核心理念、slogan、情感&心理、用户群体、事物联想&比喻、产品属性、应用场景

把想法画出来

设计手绘稿

坚持使用纯手绘、可以借助简单的辅助工具、自由发挥，单/多个关键词、二次联想、追求数量，不要求质量、禁止评论（赞美和批评）

一个一个推敲

反复比较、选择最符合但方案

特征鲜明，容易识别、结构简洁、有足够说明性、准确传达产品/品牌诉求、符合审美趋势、避开雷同方案、可以备选多个方案

精确绘制形状

深入设计，精确黑白稿

AI/PS/Sketch、首选矢量图形

给LOGO配色

深入设计，搭配漂亮的颜色

产品主色调、品牌主题色、可以从LOGO除非定义色彩

对比验证设计

对比最初的设计方向，验证最终设计方案

没有最好的，只有最合适的

四种常见的APP LOGO形式

具象图形、抽象图形、文字/文字变形、文字+图形

设计前必须知道的事

能用矢量就不用位图

兼顾最大和最小的视觉效果

设计师如何时候都应该注意尺寸

呈现：宣传推广呈现、APP内呈现、应用市场呈现

宣传推广呈现

它有可能出现在任何地方

网页广告、微信朋友圈/公众号、宣传彩页、平面广告、视频媒体广告、二维码

APP内呈现

深入产品细节，深入人心

启动页、引导页、用户提示、空白页、错误页、加载动效、占位符/图片、主功能图标

应用市场呈现

决不可忽视的应用市场

APP LOGO、应用截图、应用介绍视频、文字说明

Android设计规范

传统意义上一般是这么认为的：

Idpi：对应分辨率240x320

mdpi：对应分辨率320x480

hdpi：对应分辨率480x800或480x854

xhdpi：对应分辨率720x1280或800x1280

xxhdpi：对应分辨率1080x1920

xxxhdpi：对应分辨率1440x2560

dpi：每英寸有多少点，印刷行业

ppi：每英寸有多少像素，电子屏

dp：Android的长度单位

sp：Android的文字单位

Android手机型号较多，没有统一的设计规范

在设计过程中，参考iOS端750x1334的设计比例

在设计Android的过程中，最常见的尺寸为：720x1280，1080x1920

APP icon

Icons是优秀的用户体验的很重要的一部分，想做好用户体验，icon的应用是必不可少的

icon特点：识别性，易记性

icon类别：面，线，面+线

1、icon尺寸大小问题：同一产品的同一功能栏中icon大小要统一，不同形状的icon以视觉大小统一为标准

2、线型icon圆角要一致。线型结束不要有切角，可选择直角90°型，或圆角弧度型，折角弧度大小一样

3、填充型icon圆角要一致。无论内外圆角，圆角弧度大小要一致

4、线型icon线条粗细要统一。不能有的线条粗，有的线条细，镂空间距要一致

5、风格要一致。扁平化的，伪扁平化的、伪拟物化的、不能在一个项目中混用

6、icon类型不统一。有的是线条型，有的是填充型

7、icon视觉角度要一致。平时或俯视，角度倾斜要一致

8、icon复杂程度要一致。简单化或精致程度要一致

APP界面版式设计

让用户看到有效信息是关键

移动端屏幕尺寸受限，信息的有效呈现非常重要

在页面中一般会有状态栏和导航栏的存在，你忙内容区的版面是从导航栏下面计算的。

屏幕四周留白

1、交互危险像素

2、视线集中利于信息传递

3、页面的一致性

屏幕四周充满

1、交互区域充足

2、展示空间增加，视觉冲击感增强

3、有风格的页面

信息的排布

对齐、重复、亲密、对比

在功能单一的情况下，细节设计让界面显得有张力，呈现出来的版面率高

通过色块的延伸组织页面版式，让界面显得不那么单调，感觉点击区域也增加了

抠图，制造纯色留白。去除多余杂乱的背景，利用形状直接体现特点。这样的界面阅读起来轻松愉悦

建立边界，再打破边界。适当地打破平衡，可以丰富页面的节奏感

图版率高，带来感染力

图版率低，宁静/典雅

图片较少时，使用色块提高图版率，使画面更有活力

Android适配

做1倍，放2倍，输出1，2，3，1.5倍

1倍720x1280

2倍1440x2560

3倍2160x3840

1.5倍1080x1920