文档介绍：目录
一、UI界面设计相关知识
二、UI界面设计常用方法和原则
三、UI界面常用元素制作
四、计算机界面设计
五、播放器界面设计
六、手机界面设计
七、专题网页设计
第一页，共140页。
一、UI界面设计相关知识
界面设计的概念I设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。
用户研究工程师一般是心理学人文学背景比较合适。
综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。
第十六页，共140页。
UI界面设计相关知识
界面设计是一种结合美学、计算机科学、心理学、行为学、人机工程学、信息学以及市场学等的综合性学科，强调人—机—环境三者作为一个系统进行总体设计。
第十七页，共140页。
UI界面设计相关知识-
：
 产品制作人，写产品计划书。   
用户体验研究员，作调查分析。   
信息建构师，设计产品架构。   
交互设计师，作出互动流程。   
视觉设计师，作出页面视觉设计。   
 前台工程师，前台开发。   
 后台工程师，后台开发。   
 用户体验研究员，做用户测试确保质量。
第十八页，共140页。
UI界面设计相关知识-
第十九页，共140页。
线框原型、黑白原型稿
第二十页，共140页。
产品原型
第二十一页，共140页。
界面设计
第二十二页，共140页。
”
“
UI界面设计相关知识-界面设计的规范
手机界面设计规范
第二十三页，共140页。
iOS 系统规范
第二十四页，共140页。
iphone界面基本组成元素
状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px
导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px
主菜单栏(submenu，tab)（标签栏）：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px
内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px。
内部设计
1、所有能点击的图片不得小于44px（Retina需要88px）
2、单独存在的部件必须是双数尺寸
3、充分考虑每个控制按钮在4中状态下的样式，如图
第二十五页，共140页。
界面尺寸
设备
分辨率
PPI
状态栏高度
导航栏高度
标签栏高度
Iphone6 plus
1080x1920 px
401 ppi
54 px
132 px
146 px
Iphone6/6s
750x1334 px
326 ppi
40 px
88 px
98 px
Iphone5/5c/5s
640x1136 px
326 ppi
40 px
88 px
98 px
Iphone4/4s
640x960 px
326 ppi
40 px
88 px
98 px
ppi（pixels per inch）即每英寸像素，也叫像素密度。
第二十六页，共140页。
设备
APP store
程序应用
主屏幕
Spotlight
搜索
标签栏
工具栏/导航栏
Iphone6 plus
1024x1024px
180x180 px
114x114
px
87x87 px
75x75 px
66x66 px
Iphone6/6s
1024x1024
px
120x120
px
114x114
px
58x58 px
75x75 px
44x44 px
Iphone5/5c/5s
1024x1024
px
120x120
px
114x114
px
58x58 px
75x75 px
44x44 px
Iphone4/4s
1024x1024
px
120x120
px
114x114
px
58x58 px
75x75 px
44x44 px
第二十七页，共140页。
第二十八页，共140页。
Iphone6 图例
第二十九页，共140页。
第三十页，共140页。
用户依赖于状态栏的重要信息，如信号，时间和电池。文本和图标可以是白色或黑色，但背景可以被设计成任何颜色，并与导航栏合并。
pt（point）是印刷业上长使用的单位，磅的意思，是一种固定的长度单位，可以用测量设备测量的单位。pt=px*3/4 1pt=1/72