1.1移动UI的视觉设计原则
1.1.1移动UI的相关概念
UI（User Interface):用户界面，传统意义来说，UI设计就是对界面的美化设计，鉴于UI其本身具有视觉感受和操作体验两个特点，因此UI设计也包含了交互设计和界面视觉两个方面。
我们所说的移动UI设计是在移动设备上的设计，属于UI设计的分支
1.1.2移动UI设计类型
系统操作界面：IOS系统、Andriod系统、Windows Phone系统
APP应用界面： APP是application的缩写，指在移动设备上的应用软件。
1.1.3三大操作系统特点
IOS:扁平化、简洁 1、字体纤细紧致2、图标圆角扁平化3、清晰模糊与无边界设计
Andriod:极高自由度1、灵活开放的设计空间2、桌面小部件带来的DIY乐趣、3、桌面文件夹的可定义性
Windows Phone：极简的色块1、Metro区块化界面2、全景视图与流畅体验
以微信设置界面为例
微信在IOS扁平化无边界设计风格与IOS本身设计风格相吻合
,
安卓版微信拥有阴影过渡等特效且边框边界明显，与安卓系统界面设计风格吻合
Windows Phone 极简色块设置风格与WP8系统界面设计风格吻合
1.1.4移动UI设计尺寸须知
1英寸=2.54厘米 4英寸的手机=屏幕对角线的长度
分辨率：单位长度内包含像素（Pixel)的数量，在相同大小屏幕上，分辨率越高显示越小
显示器分辨率：显示器屏幕像素组成数量
图像分辨率：图像宽度尺寸*图像分辨率=宽度像素
图像高度尺寸*图像分辨率=高度像素
IP5界面设计尺寸标准规范（目前已IP6为主）
状态栏高40px
导航栏高88px
标签栏高88px
工具栏高88Px
1.1小结：移动UI设计核心用户体验：
美观性、实用性：可视性、可操作性、功能优化
1.2宏观认知移动UI视觉设计
1.2.1移动UI视觉设计的重要性
传统全键盘设计和苹果去键盘设计
传统手机短信收发界面与对话框气泡设计
1.2.2移动UI视觉设计的设计流程
1、前面分析：产品定位与分析，确定产品设计方向，主题风格
2、设计阶段：起草产品界面布局，确定配色方案，确定与美化独立界面框架
2、验证调整：界面输出，可用性测试，调整阶段
1.2.3移动UI视觉设计总则
1、清晰性：保持界面元素的清晰度
2、一致性：多个界面在设计尺寸、元素、大小比例、风格材质保持一致性
3、整合性：有效的信息整合与归纳，能够避免界面信息传递的歧义以及视觉上产生的混乱感
4、易用性：界面中按钮名称简单易懂、功能分区明确，界面清晰明了，让用户更加易于操作
5、合理性：界面会出现多个控件，此时需要对他们进行合理布局和安排，有效布局，不仅能节省页面空间，而且符合逻辑顺序
6、规范性：界面中各界面工具栏、功能栏等尺寸色彩风格大小保持一致，有对应的规范现在统一规整
网友评论