1.UI设计
- 用户界面:WUI & GUI:web user interface;graphics user interface;
- UE:性能(运行快,稳定,占资源),内容(内容是否能解决问题),交互(交互流畅,无障碍,界面(logo,主题,颜色,布局等是否整齐一致高质量);
- UED:designer
- UCD:user centered design
- BTU:business,technique,user
- 工具:after effects动效制作;mark man标注;
尺寸概念
- 英寸inch
- 像素pixel
- 分辨率:屏幕像素数量;iphone6:750*1334;
- 网点密度dpi(dot per inch)
- 像素密度ppi(pixel per inch):每英寸像素数量;ppi计算公式;
- 逻辑分辨率:软件可达到的分辨率;
- 像素倍率:@1x,@2x,@3x,分别用在2倍率和3倍率到Retina屏幕上;
传感器
- 加速度传感器
- 距离传感器
- 光线传感器
- 气压传感器
- 三轴陀螺仪:获取角度信息
2. 设计风格
- 产品气质——确定主色——图标插图——选取符合产品气质的字体——排版(按主题+美学)——文案
颜色
- 主色(logo,导航栏etc)+辅助色(控件图标插图)+点睛色(醒目,提示性到小图标)
- RGB
- HSB:hues色相(颜色),saturation饱和度(鲜艳程度),brightness明度(明暗度,深浅度);
- 颜色搭配:色环(12色圆环),互补色(色环中相对色),三色搭配原则;
- 选色:白(纯洁神圣,善良,信任,开放;疏离,梦幻;大量留白有格调);蓝(灵性与知性,希望梦想,独立;暗蓝:诚实,信赖,权威);红(热情性感,权威,自信);橙(亲切坦率,开朗健康,激情和参与);黄(刺激,艳黄:征信心,聪明,希望,淡黄:天真浪漫娇嫩);绿(安全,自由和平,新鲜舒适,沉稳知性);粉(温柔甜美,浪漫,洒脱大方,女性);黑(权威高雅,低调创意,冷漠防御);灰(诚恳,考究,智能,沉静,成功,认真);紫(优雅浪漫,哲学家,魅力);褐色棕色咖啡色(安定,沉静,亲切,稳定,友善)
字体
- 衬线体(serif)和无衬线字体(sans-serif):衬线——字母结构之外到装饰性笔画,
- 内嵌字体:文件过大
3.图标与图片
图标特点
- 独特:识别性;
- 表意准确
- 谨慎用色
- 避免文字:用首字母设计图标易雷同
- 避免照片
- 适应不同尺寸
图标设计流程
- 寻找隐喻:抽象
- 抽象图形
- 竞品分析:避免雷同
- 确定风格:层次感,质感
- 调整细节:观感评价
- 场景测试:适配,不同尺寸下的识别性
设计法
- 正负形组合:主图+副图,结合叠加抠除;
- 折叠图形:局部折叠处理;
- 局部提取:提出局部有代表性到元素设计
- 线性图标:提炼图形到轮廓设计各种线性图形;
- 透明渐变
- 色块拼接
- 图形复用:复制得新形
- 背景组合
ios图标规范
- ios图标适配:做大不做小,做大尺寸图标再缩放成小;
- app图标;app store图标(10241024,圆角像素160);标签栏导航图标(5050);导航栏图标(4444);工具栏图标(4444);设置图标(5858);web clip图标(120120);
android图标规范
- 低密度屏幕LDPI(7575),中低密度屏幕MDPI(100100),高低密度屏幕HDPI(150150),超高低密度屏幕XHDPI(200200),超超高低密度屏幕XXHDPI;密度关系:3:4:6:8:12;
- 图标视觉统一
- 图标大小
设计线性图标:
- 风格:大圆角风格;直角风格;断线风格;
- 像素对齐
图片的使用
- 格式:jpg有损;png无损压缩格式;png8(256色);png24(1600万);
- 图片比例:1:1(用于头像,产品列表),3:2(产品详情页),4:3/6:9;
4.ios系统界面
栏
- 状态栏status bar
- 导航栏navigation bar
- 标签栏tab bar:最底部
- 工具栏toolbar:最底部(一个视图中只能存在一个标签栏/工具栏
内容视图
- 表格视图:纵向表格(table view);辅助说明型表格(有补充说明的副标题);内容强调型(主标题左对齐,副标题右对齐,强调项目当前状态)
- 文本视图(text view)
- web视图(web view):H5页面,可极快发布内容而不用等版本更新;
临时视图
- 对话框
- 操作列表:侧边或向下滑动
5.android系统界面
导航机制
界面布局
消息推送
- 推送方式:iOS(本地只需要与苹果服务器通信,苹果服务器作为中转站与其他应用服务器通信,再告诉系统,android(每个需要后台推送的应用都有各自的后台进程,各自与各自到服务器通信),由于ios只用与一个服务器通信,所以内存占用少,安卓的特点是把推送的控制权放在开发者手里;
- 通知方式:ios(条幅式通知,icon右上角,弹出式,声音;每种方式给用户到通知强度和心理影响不同,设计时需认真考虑层级,谨慎使用),android(通知区域,进行中,弹出式,提示条)
- 操作方式:iOS(单击编辑进入编辑模式),android(长按进入选择模式,选择内容后出现情景操作栏覆盖在当前操作栏上)
- 选择:iOS(单击出现滚轮盘),android(弹出浮层);
- 删除:ios(左滑出现删除按钮),android(单击删除按钮)
android系统插件
- 桌面插件
- 弱化插件
6.建立规范
设计规范:
- 个性化,树立品牌威信
- 规范的组成:全局图形(app图标,全局图形);调色板;常用控件(图片,图标,按钮,单选,复选,表格,输入框,下拉框);常用组件(加载动画,翻页,加载更多,页面指示器,浮层反馈,信息提示,选项卡,导航栏);典型页面(app到一级页面);
- 颜色规范:推荐用HSB;创建调色板:主色+辅助色+灰度色; 全局色(主色,辅助色),背景色,分割线用色,文字用色,图标用色;
- 文字规范:iOS(黑体-简;helvetica neue),android(方正兰亭黑,roboto);
- 系统字号:导航栏-36px;标题/大按钮—30px;主文字/正文/小按钮-28px;提示性文字-24px;底部标签栏-22px;提示文字-18px;
- 布局:边距20px,模块间距-30px,顶部导航栏,顶部标签栏
- 图片规范
- 无数据图片:(在无数据时显示的底图)商品底图,头像底图,无数据图;
7.设计组件
控制元素
- 活动指示器:表达持续时间不明的进程
- 进度指示器:展示可预测完成度的任务
- 页码控制器:page control,显示有多少页视图,不超过5个点,灰色为20%透明度;
- 刷新控件:refresh control,刷新当前页面,下拉刷新+上拉刷新;
- 滑动器:slider,包含滑轨+滑块;
- 开关switch
- 步进器
筛选器
- 选择器picker
- 日期时间选择器date picker
- 分段控件segmented control
- 选项卡
- 排序
- 地区选择
表单控件
- 单选框radio
- 复选框checkbox
- 文本框textfield
- 下拉框drop list:需要有默认文字提示;
- 表格
按钮规范
- 背景+文字;背景+图标;图标+文字;文字;
其他组件
- 加载更多:配合活动指示器使用
- 非模态浮层:轻量级提示
- 模态浮层:透明度90%的黑色或白色,重量级提示;
8.导航设计
扁平导航
- 标签导航:标签栏
- 舵式导航:中间的标签作为重要且操作频繁的入口,凸显;
- 宫格式导航:登陆界面正中心的菜单即进入各部分功能的起始点;
内容主导式导航
- 陈列式导航:直接在界面显示各个内容项实现导航;
- 旋转木马式导航:轮播式;
列表式导航:
- 通常用于二级页面,清晰高效
- 列表式:列表菜单
- 抽屉式:侧滑导航,核心:隐藏非核心功能使用户更专心当前页面;
其他导航
- 点聚式导航:单击一个按钮出来多个按钮
- 瀑布式:卡片浏览
9.界面设计
首页
- 搜索栏:主色/白色透明作为背景
- 标签栏:白色/灰黑背景,浅灰/深灰图标;
- 卡片式设计:内容区域分割
- 楼层设计
列表页
- 消息列表
- 横向卡片
- 瀑布流:每个模块高低不同
详情页
- 全局按钮:将页面的最终目的一直展现在用户眼前,如加入购物车;
- 快速通道:如在深层次页面设置直达首页的按钮,可在导航栏右侧加一个弹出菜单;
个人中心
- 头像:居中&居左
- 个人信息
- 功能模块:表单& 图标
启动页
- 情感化设计,品牌宣传,彰显个性;占时间,不效率
- 品牌宣传类:产品名+标语
- 首页样式类:类似首页的静态图作为过渡,使用户以为已经启动;or 用首页渡局部元素;
- 情感故事类:说明一个故事or情怀
- 节日氛围类:应用基础元素不变的基础上与节日主题结合;
引导页:第一次使用告诉用户产品渡主要功能与特点
- 功能介绍类:截取主要界面配文字;插图配文字;
- 使用说明类:对用户使用中可能遇到的困难/误操作等提前告知;手绘风格为主;1.透明蒙层+插图;2.动态图+文字;
- 情感故事类:传达产品态度,功能引导;1插图+文字;2.视差动画,文+音+动画,可创新页面切换方式;3.视频展示;
10.设计适配
ios系统适配
- ios系统适配
- 设计基准
- 设计适配:
1.设计基准稿(i6:750*1334);
2.界面调试(不适配的界面要重新设计)
3.切图输出(图标,控件;等比放大1.5倍,输出@3x的切图); - 适配规则:文字流式+控件弹性+图片等比缩放
android系统适配
- 密度独立像素DP(density independent pixels):以160dpi(MDPI)为基准,则1dp=1px;320dpi(XHDPI)为基准,1dp=2px;
- 设计基准
- 适配方法:
1.720*1280(XHDPI)做基准稿,除图片外所有设计元素用矢量路径做,图片用智能对象方便缩小放大,在7201280上做标注,输出标注图 ;
- 对图标+控件等元素等比放大1.5倍,生成XXHDP到@3x切图,HDPI切图不用单独提供,由开发调试系统生成;
3.输出基于XHDPI到@2x切图+放大后到@3x切图+相应控件到点九图;标注使用给予XHDPI做的标注;
ios系统适配android系统
- 目的:省力,故设计以iOS设计为主导,只输出一套设计;
- 换算关系:XHDPI模式下,android与iOS切图尺寸一样;
标注设计
- 标注基准:android(4dp,8,16,32,48;如边距16dp,元素间留白值8dp,导航栏/标题栏/按钮48dp)
- 标注方法:
1.标注图素到大小+间距;
2.标注图素到颜色+透明度;
3.标注图素的状态变化; - 点九图:使图片横竖都可完美展示;
- 图标切图:标注要与实际输出的切图的尺寸保持一致;
- 命名规则:界面/功能+控件名+状态+补充描述;
11.手势应用
- 标准,简单,慎重创新;引导;