UI规范——IOS

用户头像
北京/设计爱好者/10年前/1595浏览
UI规范——IOS

ui设计基础班第四节课笔记内容

这是第四节课,第二第三节课都是讲软件,没记什么,而且完全可以看教程。


首先,我们先说一下“移动端”的特点

  1. 屏幕小

  2. 按钮、字、控件、留白大

  3. 碎片化时间,容易受干扰(一般用手机的时候都是在地铁,公交,等闲暇的碎片时间包括接打电话)

  4. 指尖导航(而不是鼠标,也木有键盘)

  5. 可以方便的移动(因为小,携带方便哇)

  6. 能够精确定位(GPS定位)

其实手机的最突出的三大特点:通话,GPS还有摄像头。


APP的三种应用类型

沉浸型应用;效率型应用;工具型应用。

  首先来说说沉浸型应用,最大特点就是木有状态栏(可能是嫌弃状态栏哈哈,确实是嫌它占地方)例如:电影、游戏等让你花大量时间在app里面的 就是沉浸型应用。

  效率型应用嘞?如微信、qq、等聊天app;旅游;及淘宝、京东等电商等app(大家注意,一般让你掏钱的就是效率型哦)。

  工具性就不用多说了,使用流程一般是“打开—使用—关闭”停留时间短暂的哟。比如手电筒,计算器神马的,用来执行简单任务的app就是工具型啦!


手机ui的设计原则:

  1. 主题的把控要精准

  2. 注意把握手机的习惯(老师说建议我们看“人体工程学”我米有看啊。。)

  3. 考虑横竖屏方向变化,重力感应对设计的影响(就是手机自动旋转屏幕时横屏和竖屏显示的界面也不一样,但是我不知道这个在设计中多重要。。不理解)

  4. 让设计层级清晰,一目了然,功能点少一些,要让用户觉得简单,注意用户的学习成本。

  5. 遵循手指触摸的习惯(老师推荐了一本书叫“《触动人心》”——神奇的44)

  6. 让用户看到操作的反馈,也就是说,用户点击了一个按钮或者一个链接你要让用户知道他点击的东西正在加载中或者是什么,你们懂了吗【哭】原谅我语言表达不清晰。。就比如吧,你去ATM机取款去了,点击取款你会看到什么,是不是“正在出钞,请稍候。。。”如果你没看到这个反馈是什么感受?难道这ATM机卡了?有bug?快打电话给工作人员~。所以要给用户点提示。这次我解释的还行吗【冷汗】看图吧:511456ef8e3032f875a944ccdb1a.jpg

  7. 灵活运用手势支持,如图:190856ef8df16ac7257d20f5cfb0.jpg

  8. 减少视觉干扰,色不过三,减少刺激颜色。





下面主要说说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像素2f5e56ef96c26ac7257d2080a929.jpg

工具栏和标签栏的区别:工具栏在二级页面,标签栏在一级页面,用图举例吧!我我我我我。。看图!图一为工具栏,图二为标签栏(说实话我都怕我写的最后连自己都看不懂哇)

图1



图2


22
举报
|
54
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
科技医疗透明柜UI界面设计
钱包ui模板
【新年UI图标】影音icon
UI界面 组件
新能源APP应用UIKit
手表表盘UI系列
高级表盘系列UI源文件
【新年UI图标】汽车icon
矢量立体简约UI蓝白图标
【新年UI图标】银行卡icon
高级感金属拟物 UI设计组件库
智能家居中心 简约 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】秒杀icon
拟物风质感写实UI卡片合集源文件
Security Camera UI kit
【新年UI图标】珠宝icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
盲盒APP UI设计
【新年UI图标】会员icon
抽象液态渐变UI背景模版
你可能喜欢
大家都在看
登录注册