阅读笔记:《术与道:移动应用UI设计》

书籍简介:对移动应用设计的规范和技巧形成入门级的了解。

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. 对图标+控件等元素等比放大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.手势应用

  • 标准,简单,慎重创新;引导;

图册链接

Thanks!