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、规范性:界面中各界面工具栏、功能栏等尺寸色彩风格大小保持一致,有对应的规范现在统一规整