什么是界面设计

iOS界面设计尺寸规范 一、尺寸及分辨率iPhone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。iPad界面尺寸：1024*768、2048*1536等。单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。Ps：作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或者尺寸变更。二、界面基本组成元素iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。640*960的尺寸设计下这些元素的尺寸。· 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px· 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px· 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px· 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px[下图说明：] 至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~三、字体大小Heiti SC（黑体-简，黑体-简的英文名称为HeitiSC。Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPodnano第五代以来的预设简体中文字型。黑体-简系为黑体，取代华文黑体成为Mac OS X Snow Leopard的预设简体中文字型。在过去，华文黑体是Mac OS X的预设简体中文字型，因此以前并没有黑体-简。黑体-简是全新的字型，与黑体-繁同以华文黑体为基础开发，成为Mac OS X Snow Leopard与iPhone OS 3.0（版本4.0后改名为iOS）之后内建并同时为预设的简体中文字型。虽与华文黑体为两套字型，但差异微小，仅排列上有差距，笔画的差距也十分微小。包含“细体”与“中黑”，黑体-简与黑体-繁皆使用.ttc（TrueType Collection）格式，可以在单一档案包含多套字型。其中，黑体-简与黑体-繁的细体在/System/Library/Fonts/STHeitiLight.ttc，黑体-简与黑体-繁的中黑在/Library/Fonts/STHeitiMedium.ttc。在ios中默认字体分为三类：第一种：STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体 第二种：_H_Helvetica.ttc和 _H_HelveticaNeue.ttc代表的是英文以及数字字体 第三种：LockClock.ttf代表的是锁屏时间字体 IPhone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体。 下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。其实还有个更简单的方法就是找你觉得好的app应用，手机截图后放进PS自己比对调节字体大小咯。我的音乐——34px，我的、淘歌、发现——30px，Muxx——34px，本地音乐——30px，泡沫、邓紫棋——24px 总之，方法是自己找到的，想办法解决问题，自己实践，比别人告诉你印象更深刻不是么？一、尺寸及分辨率Android界面尺寸：480*800、720*1280、1080*1920。[单位：像素] Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。 二、界面基本组成元素Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。状态栏高度为：50px导航栏高度为：96px主菜单栏高度为：96px内容区域高度为：1038px（1280-50-96-96=1038）Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px Ps：写之前我翻了好多关于Android的界面尺寸教程，都没找到像iOS一样具体的规范，或许因为在安卓中这些控件的高度都能用程序自定义，都没有提到具体的尺寸数值，所以就自己找了Android的设计规范，尺寸都是自己在PS中量的。 Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。三、字体大小Android 上的字体为：Droidsans fallback，是谷歌自己的字体，与微软雅黑很像。 同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己比对调节字体大小[切记，一定是高清截图哦] 附件 ：包含一些尺寸方面的干货，以及一些UI规范的源文件。

用C/C++直接开发界面程序一般有以下几种方式：1、直接调用系统api这一种比较麻烦而且开发的效率不高，但通过练习可以让你很好的掌握GUI程序的原理和技巧。因为常用的第3种也是以此为基础的，学会api有利于更加深入的了解GUI程序原理。2、直接使用绘图接口自己画这种最麻烦而且一般适用于游戏、虚拟现实等专业领域，比如使用OpenGl绘图接口制作3D程序。3、调用其他封装好库这一种就是别人把系统api封装好了，给了你一个简单的使用接口，比如MFC。对于C/C++来说，现在比较流行的有Qt，xwidget等GUI库，使用简单，文档丰富，而且跨平台使用，是目前比较好的选择。如果以前没有用过MFC，建议还是别学MFC了，繁琐而且不是跨平台的。还有，如果用VS开发，.NET里面的一些标准控件也足以应付日常开发了，这个其实是现在用的最普遍的。

图形用户界面技术的特点体现在三方面：多视窗技术、菜单技术和联机帮助。我们从这三个方面来说明图形用户界面的方便所在，这一部分的内容几乎是所有图形用户界面软件共有的内容。多视窗技术在Windows环境中，计算机屏幕显示为一个工作台，用户的主工作区域就是桌面。工作台将你的工作显示在称为"窗口"的矩形区域内，你可以在窗口中对应用程序和文档进行操作。所谓多窗口就是同时能在同一屏幕上打开多个窗口，也称多视窗技术，以下列出多视窗的几点优越性：1、友好的操作环境：窗口系统可以提供友好的、菜单驱动的、具有图形功能的用户界面。每个窗口都由标题、菜单、控制按钮、滚动条、边框等元素组成。用户可以方便地使用鼠标打开和关闭窗口，通过操作窗口组成部件来实现窗口的移动、尺寸改变和多窗口的布局。用户通过窗口实施各种上机操作，进行人机交互。由于所有窗口具有统一的风格和相似的操作方式，用户只要领会一种系统的窗口操作要领，便可触类旁通。 2、一屏多用：一个多窗口的屏幕，从功能上说，相当于多个独立的屏幕，所以能有效地增加屏幕在同一时间所显示的信息容量。3、任务切换：窗口系统是用户可以同时运行多道程序的一个集成化环境。模拟人们日常工作中同时干几件事的情景，用户可以同时打开几个窗口以运行多个应用程序，并可实现在它们之间的快速转换。但是在同一时间只能有一个窗口是活动窗口，允许接受用户输入的数据或命令，其他窗口都是非活动窗口。活动窗口的醒目标志则是清晰的窗口标题栏及其任务名，而且它会摆放在其他窗口的最上面而不会被遮挡。 4、资源共享与信息共享：操作系统的资源是CPU、存储器、I/O设备等，窗口系统的资源还包括窗口、事件等，这些资源为各应用程序所共享。

UI设计流程一般需要以下10个阶段：一、产品定位与市场分析阶段 1、 目的（UI设计师应了解产品的市场定位、产品定义、客户群体、运行方式等。） 2、 主要执行人员（UI、UE、需求） 3、 需沟通人员（销售） 4、 实现步骤（会议讨论） 5、 UI主要职责：（定义用户群特征、定义最终用户群、定义产品方向）二、用户研究与分析阶段 1、目的（UI设计师收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析） 2、主要执行人员（UI、UE、需求、技术） 3、需沟通人员（销售） 4、实现步骤（纸搞线稿、黑白稿、原型） 5、UI主要职责（收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。这部分工作有团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析） 三、架构设计阶段 1、目的（这里涉及到比较多的界面交换与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素） 2、主要执行人员（UI、UE、需求部门） 3、需沟通人员（技术、销售） 4、实现步骤（UI进行风格设计出界面，和需求部门拿出定稿；UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门；UID等待效果图，开始代码编制） 5、UI主要职责：（根据可以性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计） 四、原型设计阶段 1、目的（根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围） 2、主要执行人员（UI、UE、需求部门） 3、需沟通人员（UID、技术） 4、实现步骤（设计规范；代码及程序开发） 5、UI主要职责：（对前面所以工作以设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性） 五、界面设计阶段 1、目的（根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理） 2、主要执行人员（UI、UE、技术） 3、需沟通人员（UE、销售） 4、实现步骤 5、UI主要职责：（该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现）六、界面输出阶段 1、目的（配合好开发人员完成相关的界面结合） 2、主要执行人员（技术） 3、需沟通人员（UI、UE、需求部门、销售） 4、实现步骤 5、UI主要职责：（对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果）七、可用性测试阶段 1、目的（针对一致性测试；信息反馈测试；界面简洁性测试；界面美观度测试；用户动作性测试；行业标准测试） 2、主要执行人员（程序测试部门） 3、需沟通人员（UI、UE、程序、需求部门、销售） 4、实现步骤 5、UI主要职责：（负责原型的可用性测试，发现可用性问题并提出修改意见）八、完成工作阶段 1、目的（对于前面七个阶段的设计工作进行细节调整） 2、主要执行人员（UI、UE） 3、需沟通人员（技术、销售） 4、实现步骤 5、UI主要职责：（可用性的循环研究、用户体验回馈、测试回馈、UI人员把可行性建议进行完善） 九、产品上线 1、目的（检验前面界面设计的成果是否符合市场及用户群体） 2、主要执行人员（销售） 3、需沟通人员 4、实现步骤 5、UI主要职责：（收集市场对于产品的用户体验，并记录诚文字说明）十、分析报告及优化方案 1、目的（了解整个界面设计的优缺） 2、主要执行人员（UI、UE） 3、需沟通人员（技术、销售） 4、实现步骤 5、UI主要职责：（对于前九个阶段的界面设计进行详细系统的整理，为下一次界面设计提供有力的市场及专业论据）

主流的软件界面工具有Telerik，ComponentOne和DevExpress，功能大体相当，都可以做出很漂亮的软件界面。如果你英文很好，选哪个都可以。如果需要中文文档和中文技术支持，推荐选ComponentOne。

图形用户界面技术的特点体现在三方面：多视窗技术、菜单技术和联机帮助。我们从这三个方面来说明图形用户界面的方便所在，这一部分的内容几乎是所有图形用户界面软件共有的内容。多视窗技术在Windows环境中，计算机屏幕显示为一个工作台，用户的主工作区域就是桌面。工作台将你的工作显示在称为"窗口"的矩形区域内，你可以在窗口中对应用程序和文档进行操作。所谓多窗口就是同时能在同一屏幕上打开多个窗口，也称多视窗技术，以下列出多视窗的几点优越性：1、友好的操作环境：窗口系统可以提供友好的、菜单驱动的、具有图形功能的用户界面。每个窗口都由标题、菜单、控制按钮、滚动条、边框等元素组成。用户可以方便地使用鼠标打开和关闭窗口，通过操作窗口组成部件来实现窗口的移动、尺寸改变和多窗口的布局。用户通过窗口实施各种上机操作，进行人机交互。由于所有窗口具有统一的风格和相似的操作方式，用户只要领会一种系统的窗口操作要领，便可触类旁通。 2、一屏多用：一个多窗口的屏幕，从功能上说，相当于多个独立的屏幕，所以能有效地增加屏幕在同一时间所显示的信息容量。3、任务切换：窗口系统是用户可以同时运行多道程序的一个集成化环境。模拟人们日常工作中同时干几件事的情景，用户可以同时打开几个窗口以运行多个应用程序，并可实现在它们之间的快速转换。但是在同一时间只能有一个窗口是活动窗口，允许接受用户输入的数据或命令，其他窗口都是非活动窗口。活动窗口的醒目标志则是清晰的窗口标题栏及其任务名，而且它会摆放在其他窗口的最上面而不会被遮挡。 4、资源共享与信息共享：操作系统的资源是CPU、存储器、I/O设备等，窗口系统的资源还包括窗口、事件等，这些资源为各应用程序所共享。

　　用户界面(User Interface)是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。　　用户界面（User Interface，简称 UI，亦称使用者界面[1]）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。用户界面是介于用户与硬件而设计彼此之间交互沟通相关软件，目的在使得用户能够方便有效率地去操作硬件以达成双向之交互，完成所希望借助硬件完成之工作，用户界面定义广泛，包含了人机交互与图形用户接口，凡参与人类与机械的信息交流的领域都存在着用户界面。

　　要看你是从事网站界面设计还是软件界面设计。网站界面设计，必须了解一些简单的html、div、css样式表等基本语言；软件界面设计，就要了解其产品所用的是什么工具做的，软件和硬件的兼容性问题（性能问题）。对于设计软件，常用的有photoshop、网页3剑客、UIDesigner等。      但是吧，这其实仅仅是皮毛，真正要设计出来东西，我觉得还是找专业人吧。例如北京的智加设计，我们去年和他们合作过。智加真的挺不错，团队大概在百人左右，他们会针对每个品牌的实际情况整合出一套量身定做的方案，你可以去他们网站看看，还有很多案例。

界面设计原则总的来说可以概括成界面在用户的掌控之中、保持界面的一致性和减少用户记忆的负担这三大点，下面就给大家具体介绍一下界面设计原则。　　(一)界面设计原则　　(1)用户原则。人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。　　(2)信息最小量原则。人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。　　(3)帮助和提示原则。要对用户的*作命令作出反应，帮助用户处理问题。系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。　　(4)媒体最佳组合原则。多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论指导下，注意处理好各种媒体间的关系，恰当选用。(详见媒体的选择)　　(二)界面分析与规范　　在人机界面设计中，首先应进行界面设计分析，进行用户特性分析，用户任务分析，记录用户有关系统的概念、术语，这项工作可与多媒体应用系统分析结合进行，囊括于用户分析报告里。　　(三)人机界面的类型　　任务设计之后，要决定界面类型。目前有多种人机界面设计类型，各有不同的品质和性能，下图进行了详细的描述。　　创造性地使用多媒体环境，将会使应用程序功能大大增强。要做到这一点，需从如下两方面考虑：　　(1)媒体的功能：　　没有任何一种媒体在所有场合都是最优的，每种媒体都有其各自擅长的特定范围，各种媒体功能参考如下：　　①文本：在表现概念和刻划细节时可用表现。　　②图形：擅长表达思想轮廓及蕴含与大量数值数据内的趋向性信息，在空间信息方面有较大优势。　　③动画：可用来突出整个事物，特别适于表现静态图形无法表现的动作信息。　　④视频影像：适于表现其它媒体所难以表现的来自真实生活的事件和情景。　　⑤语音：能使对话信息突出，特别是在于影像，动画集合时能传递大量的信息。　　⑥姿态与动作：在与别的媒体结合时具有较强的信息引用能力，可以在相关信息之间建立起时间、空间以及逻辑上的联系。　　(2)媒体选择的结合与互补：　　脚本设计可根据内容需要分配表达的媒体，这里要特别注意媒体间的结合与区别。提出几条原则如下：　　①人们在问题求解过程中的不同阶段对信息媒体有不同需要。一般在最初的探索阶段采用能提供具体信息的媒体如语音、图像等，而在最后的分析阶段多采用描述抽象概念的文本媒体。而一些直观的信息(图形、图像等)介于两者之间，适于综合阶段。　　②媒体种类对空间信息的传递并没有明显的影响，各种媒体各有所长。　　③媒体结合是多媒体设计中需要研究的新课题。媒体之间可以互相支持，也会互相干扰。多种媒体应密切相关，扣紧一个表现主题，而不应把不相关的媒体内容拼凑在一起。　　④目前，媒体结合在技术上主要通过在一个窗口中提供多种媒体的信息片段(空间结合)和对声音、语音、录相等随时间变化的动态媒体加以同步实现(时间序列组合).　　⑤媒体资源并非愈多愈好，如何在语义层上将各种媒体很好的，结合以更有效地传递信息，是要很好地探索的研究课题，也是应用系统人机界面设计的关键问题。　　(四)界面设计原则中的用户心理学　　认知心理学，从广义上来说，就是关于认识的心理学。人类认识客观事物，主要就是通过感觉、知觉、注意、记忆、思维想象等来进行，因此，凡是研究人的认识心理过程的，都属于认识心理学。实际上，我们这里所指的认知心理学是指纯粹采用信息加工观点来研究认知心理学过程的心理学，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究的的知识是如何获得、如何存贮、如何交换、如何取使用的。所以，我们这里所指的现代认知心理学实质是信息加工心理学。一般地，人们将信息加工心理学又称为狭义的认知心理学。　　1.认知过程看和听的过程构成知觉，图像和声音作为刺激的特征被接收并以抽象的方式被编码，把输入和记忆中的信息进行对比得出对刺激的解释，这一过程就是认知。人体信息处理器包括感官，短期记忆、长期记忆及与其相联系的动作处理器和认知处理器。每种知觉均有一个对应的短期存储器和处理器，人体信息模型总体框图如左图4.3.1所示。其中认知处理器执行的工作就是我们通常所说的思维。思维的结果或被存储起来，或送至动作处理器控制行动。　　2.认知心理学　　(1)现代认知心理学的核心： 现代认知心理学的理论实质，就是以计算机信息加工的观点来研究人的心理学活动，把人脑看作是一种如同计算机的信息加工系统。　　(2)现代认知心理学两个关键的重要概念： 现代认知心理学的学说内容集中体现在两个关键的重要概念上。现代认知心理学的一个重要的中心概念，就是“信息”。在某种程度上说，抽掉了“信息”的概念，认知心理学的理论也就会散架解体，难以存在。 现代认知心理学的另一个重要的中心概念，就是“信息加工系统”。信息加工系统的理论，是现代认知心理学理论的主体。　　(3)现代认知心理学的研究方法：现代认知心理学的研究方法有实验法、观察法(包括自我观察法)以及计算机模拟法等。　　3.人机交互设计遵循的认知原则根据用户心理学和认知科学，提出了如下基本原则指导人机界面交互设计。　　(1)一致性原则。即从任务、信息的表达、界面控制*作等方面与用户理解熟悉的模式尽量保持一致。　　(2)兼容性。在用户期望和界面设计的现实之间要兼容，要基于用户以前的经验。　　(3)适应性。用户应处于控制地位，因此界面应在多方面适应用户。　　(4)指导性。界面设计应通过任务提示和反馈信息来指导用户，做到“以用户为中心”。　　(5)结构性。界面设计应是结构化的，以减少复杂度。　　(6)经济性。界面设计要用最少的支持用户所必须步骤来实现。　　在界面设计原则指导下，提出以下几点针对界面设计与屏幕设计的参考：　　(1)由具体到抽象。即首先通过多媒体界面给用户提供具体的对象。然后从具体对象、内容中让学习者归纳出抽象的概念或原理，或用模拟系统来引导出抽象的原理。　　(2)由可视化的内容显示不可见的内容。尽可能利用数字、图解、动画、色彩等清晰爽目的对象显示原理、公式或抽象的概念。　　(3)由模拟引导创新。突出人机交互，尽量启发用户的积极思维和参与，并激起用户的学习和创造欲望。　　(4)合理运用再认与再忆，减少用户短期记忆的负担。所谓再认就是从系统给定的几个可能答案中要用户选择一个正确的或最好的。再忆即要求用户输入正确的答案或关键字。　　(5)考虑用户的个别差异，使用用户语言。　　以上五点具体体现了“由易而难，逐步强化。”这一源于认知心理学的原则。　　上文介绍的界面设计原则应该让大家心中对界面设计原则有了一定的认识，当然，因为界面设计是复杂的需要多学科参与的，心理学、语言学、设计学等学科都在里面占有重要作用。而用户界面是与程序交流的唯一方式，为了给用户提供最便捷的服务，界面设计原则是一定要遵守的。