UI规范——IOS
ui设计基础班第四节课笔记内容
这是第四节课,第二第三节课都是讲软件,没记什么,而且完全可以看教程。
首先,我们先说一下“移动端”的特点:
屏幕小
按钮、字、控件、留白大
碎片化时间,容易受干扰(一般用手机的时候都是在地铁,公交,等闲暇的碎片时间包括接打电话)
指尖导航(而不是鼠标,也木有键盘)
可以方便的移动(因为小,携带方便哇)
能够精确定位(GPS定位)
其实手机的最突出的三大特点:通话,GPS还有摄像头。
APP的三种应用类型:
沉浸型应用;效率型应用;工具型应用。
首先来说说沉浸型应用,最大特点就是木有状态栏(可能是嫌弃状态栏哈哈,确实是嫌它占地方)例如:电影、游戏等让你花大量时间在app里面的 就是沉浸型应用。
效率型应用嘞?如微信、qq、等聊天app;旅游;及淘宝、京东等电商等app(大家注意,一般让你掏钱的就是效率型哦)。
工具性就不用多说了,使用流程一般是“打开—使用—关闭”停留时间短暂的哟。比如手电筒,计算器神马的,用来执行简单任务的app就是工具型啦!
手机ui的设计原则:
主题的把控要精准
注意把握手机的习惯(老师说建议我们看“人体工程学”我米有看啊。。)
考虑横竖屏方向变化,重力感应对设计的影响(就是手机自动旋转屏幕时横屏和竖屏显示的界面也不一样,但是我不知道这个在设计中多重要。。不理解)
让设计层级清晰,一目了然,功能点少一些,要让用户觉得简单,注意用户的学习成本。
遵循手指触摸的习惯(老师推荐了一本书叫“《触动人心》”——神奇的44)
让用户看到操作的反馈,也就是说,用户点击了一个按钮或者一个链接你要让用户知道他点击的东西正在加载中或者是什么,你们懂了吗【哭】原谅我语言表达不清晰。。就比如吧,你去ATM机取款去了,点击取款你会看到什么,是不是“正在出钞,请稍候。。。”如果你没看到这个反馈是什么感受?难道这ATM机卡了?有bug?快打电话给工作人员~。所以要给用户点提示。这次我解释的还行吗【冷汗】看图吧:
灵活运用手势支持,如图:
减少视觉干扰,色不过三,减少刺激颜色。
下面主要说说IOS的规范:
app里基本组成控件:状态栏、导航栏、标签栏/工具栏
IOS尺寸(像素): 4/4s :960*640
5/5c/5s : 1136*640
6/6s : 1334*750
6plus/6s plus : 2208*1242
一下为iphone 6/6s
图标大小(做图标的时候都做成正方形,不要弧度。都是到主题里面自动生成弧度)一般弧度为28px
APP桌面图标:120px*120px
APP Store:1024px*1024px(设计的尺寸)
设置/搜索:58px*58px(设置/搜索里面的图表大小)
标签栏:44像素-60像素(44为触控区域,设计图标时可以比44小,但是不能超过60)
工具栏和导航栏:44像素-60像素(44为触控区域,设计图标时可以比44小,但是不能超过60)
状态栏:28像素*28像素
文字要求:
大字号(标题):34像素(最大不能超过40像素)
内容区字号:标题:28像素
内容:24像素
备注型、提示型:20像素。
(注意:文字字号最小不能小于20)
控件规范:说的都是高度,宽度都是750像素
状态栏:40像素
导航栏:88像素(现在的app一般都是状态栏和导航栏的颜色一样,所以可以做成40+88=128像素)
标签栏:98像素
工具栏:88像素
列表的高度:≥88即最小88像素
内容区距离左右边距(版心):30像素
键盘高度432像素
工具栏和标签栏的区别:工具栏在二级页面,标签栏在一级页面,用图举例吧!我我我我我。。看图!图一为工具栏,图二为标签栏(说实话我都怕我写的最后连自己都看不懂哇)

图1

图2






































