UI那哥们给我上的第一堂课，让我至今难忘

我们项目的UI设计师是是一个胖胖的暖男，我们喜欢称他为胖虎。胖虎除了胖之外，还有一个特别的地方，就是说话慢条斯理、有理有据，这也让大家特别喜欢他。

我们产品经理每次扔给他原型之后，他总会极其高效的完成UI效果图，每一次我都会被他设计的作品惊叹，我总会在想，他怎么将颜色和文字运用的如此恰到好处，怎么呈现出这种经验的作品的。

他一定是个藏匿于此处歇脚的大师。

那天，我微信问他：胖虎，咱们UI的设计规范都有哪些啊？能简单介绍一下吗？

胖虎：这个只能用嘴说

我顿时裂开。

胖虎：要不明天给你带一本书吧

我再次裂开。

中午吃饭的时候我看见他踏出了办公室，我快步跟上他，喊了声，胖虎哥，今天中午准备吃点啥呀？他笑眯眯的看着我说，当然去吃美食啦。

……

此处省去和胖虎的对话，下午的时候，我简单整理了一下胖虎给我的第一堂课。

文字是任何产品的基本元素，打开任何一个产品，首先呈现给用户的当然是文字了，它承载了产品的内容信息，具有举足轻重的地位。字体是设计中不可或缺的因素，不同风格的字体呈现出来的气质不一样，在不同的场合中会给人不同的感受。

因此在设计过程中要考虑字体的设计效果，并且在设计的UI规范汇中标明。这样前端或后端在开发过程中就可以按照既定的规范来合理开发了。

产品中对文字的要求有哪几个方面呢？就像一个合格的毕业论文都固定的文字格式和排版格式，同样的，在产品中文字应该如何选择、字号应该如何设定、字体颜色怎么设置呢？

在字体的选择上往往根据产品的特点、产品品牌延伸出来的关键词来定位。有的字体字形方正、有的鉴定稳固、有的苍穹有力、有的艺术多变。

常用的字体有华文黑体、微软雅黑、苹方字体、方正栏亭黑、Open Sans、Display、Helvertica Neue等等。

胖虎强烈推荐的万能字体：苹方字体和Helvetica Neue字体，如果有特殊要求，那么就制定个性化的方案。一般的在定义字体规范格式如下：

每个设计师遵循的字号理念是：字号的大小决定了信息的层次和权重，整齐大方、层次分明能够让整体设计清晰有序。相反，如果没有选择正确的字号，那么会打破扁平化的设计，会让界面看起来杂乱无章。

实际工作中对于字号的选择，可以遵循IOS、Android的字体规范，还可以根据产品的特点去个性化定义。

胖虎认为根据文字位置和内容的重要程度可以将其分为三大级别：重要级别、一般级别和较弱级别，他们所对应的样式、字号和使用场景分别如下：

字体颜色同样的根据文字位置和内容的重要程度分为三个级别：重要级别、一般级别和较弱级别，对应的分别为用于特别强调突出的文字、正文标题、正文文字、用户输入框的提示和用于次级提示。

胖虎常用的字色选择如下所示。

在整理这些文字时，我越发觉得一个优秀的UI设计师是一个多么严谨而富有浪漫的职业。产品的每一个地方都离不开UI设计师辛苦的、一丝不苟的细节把关，小到每个字号的大小，大到商业宣传时海报的制作，也正是这个职业让我们的产品变得更加活泼，更加贴近生活。

胖虎的三言两语让我深受启发，让我觉得作为产品经理的我对UI交互、UI设计知之甚少，这一方面也是亟待需要提高的地方。

我抬头望了眼胖虎，他正飞速的敲击着键盘，飞速中透露着优雅，这次一定又是满意的答卷吧。

我个人设计时按照iOS设计尺寸 iPhone6（750px1334px）来进行页面的设计。在iOS开发中iPhone4、5、6、7是共用一套字体规范。在设计中按iPhone6设计版尺寸（750px1334px）中适合的字体大小来定义。（开发过程中具体的问题需再具体分析）

在iOS中默认字体分为三类：

第一类： STHeiti-Lightttc和STHeiti-Mediumttc代表的是中文字体，常用的方正黑体简体（不能商用）和微软雅黑（不能商用），也可以是冬青黑体简体（暂不详版权）和思源雅黑（免费）。

第二类： _H_Helveticattc和_H_HelveticaNeuettc代表的是英文以及数字字体，常用的字体Helvetica

第三类： LockClockttf代表的是锁屏时间字体

中文字体： Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等（，看个人习惯，具体设计需求也可以是不常见字体）

英文字体： HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体），在选用不常见字体要在后面切图中：相关的字体要有形式导出png，以及如有需要要有文字的字体包，当然还有使用版权的许可。

文件包命名规则是：项目名字＋切图＋作者名字＋日期

例如：蚂蚁金服基金3585版本迭代-H5页面设计_切图_李笑_20170321

文件包压缩一直采用zip格式

文件包要包括：image，效果图＋标注图，切图简单说明（word等文件）。

打开如下图：

在image中切图文件和切图命名中：

···不要出现大写，

···不要有中文、特殊符号以及空格，

···字母必须是小写字母，

···同类切图大小一致（后续文章单独整理切图方法和常见问题）

···iOS切图文件要有二倍像素适配（750px1334px）iphone6，iphone7和三倍像素适配（1242px2208px）iphone6 plus，iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是：

模块_类别_功能_状态_@2x／@3xpng  （状态会有：点击状态，点击压下状态，禁用状态，选中状态等）

如：me_bg_nologin@3xpng和me_bg_nologin @2xpng

···iphone4：640X960

···iphone5：640X1136

···iphone6/7：750X1334

···iphone6/7：1242X2208

iPhone图标尺寸及整理如下：

后续会不断的整理和添加修正，欢迎批评指正

如果有用请分享给需要的朋友们

谢谢~

　　怎样规范设计移动端APP的UI

　　规范目的/系统

　　1

　　遵循各平台的统一的界面规范,使最终设计出来的界面效果达到最理想状态

　　怎样规范设计移动端APP的UI

　　2

　　提高工作效率,UI/UE/开发编码三方人员相互之间协作更轻松，减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象

　　3

　　通过规范的方式来达到以用户为中心的目的，给用户呈现最佳效果和最优质的体验

　　4

　　目前使用最多的移动端操作系统平台有Android、IOS、Windows Phone

　　其他的操作系统包括BlackBerry 10、NokiaOS、Firefox 、Sailfish OS、Tizen、UbuntuTouch

　　怎样规范设计移动端APP的UI

　　设计尺寸/屏幕支持

　　1

　　IOS：宽度640PX 高度1136px

　　当然还需要自适应模式，以便以后的屏幕扩充需求。

　　IOS系统从iPhone4开始已经进入Retina(视网膜屏)时代，资源尺寸比例从原来的1X变为了2X。

　　2

　　Android：宽度720px 高度1280px

　　同样的设计成自适应模式，现在Android系统的屏幕也是越来越多样！

　　Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240320)、mdpi(320480)、hdpi(480800)、xhdpi(7201280)四类

　　3

　　Web Mobile：宽度640px 高度960px

　　这个对于网页的浏览来说是最适合不过了的！

　　细节模块(客户端/Web内嵌)

　　1

　　导航栏：显示当前界面的名称,包含相应的功能或者页面间的跳转按钮，ios导航栏的ui图标格式为60px留白7px，Android系统的可以为：64px48px留白8px

　　2

　　标签栏：让用户可以在不同子任务、视图、模式之间切换。

　　ios系统Tab Bar：98px

　　Android系统Tab Bar：96px

　　3

　　工具栏：放置当前屏幕或者视图下对相关对象的操作按钮。

　　ios系统Tab Bar：88px

　　Android系统Tab Bar：96px

　　4

　　为了能够让用户有更好更直观的体验,资源需要有各种状态。

　　5

　　列表：无论哪种形式列表,单行列表高度必须是用户手指接触的最佳值

　　ios系统Height 88px

　　Android系统Height 96px

　　6

　　字体:

　　IOS:默认字体 英文 HelveticalNeue 中文 黑体

　　Android:默认字体 Droidsans fallback 是谷歌自己的字体,与微软雅黑很像

　　7

　　字号:以下图IOS为例子

　　我的音乐：34 px

　　我的、淘歌、发现： 30 px

　　Muxx 34 px

　　本地音乐 30 px

　　泡沫、邓紫棋 24px

　　8

　　桌面ICON:

　　根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。

　　9

　　细节模块(Web内嵌):细节最为重要，只有好的内容和完美的细节才能吸引住浏览者的关注！所以在制作的过程中也需要更加的关注！

　　转载

简单来说Mobile GUI设计就是手持设备的图形用户界面设计，狭义上来看是手机和PPC，广义上可以推广至手机，移动电视，车载系统，手持游戏机，MP3，GPS等一切手持移动设备。

Mobile GUI的设计基于对手持设备产品的使用特性的理解，对用户的研究和对界面使用情景的深入研究。GUI的设计分为平台内置和主题设计部分，前者需要专业的design house根据厂家的实际产品进行设计分析后进行整体设计，后者则可以经由任何用户进行自主设计，当然后者的设计限制和平台限制都比较大。

目前索爱和三星以及Nokia的S60平台支持用户的Theme自定义设计。

设计研究的流程为：产品特性--用户心理--市场背景--图形设计策略--设计检验--实际设计投放

ui设计设计题目

　毕业设计的选题一定要适合自己，下面我为大家介绍ui设计设计题目，希望能帮到大家!

　1浅谈UI设计中的视觉设计风格发展

　2浅谈UI设计中的视觉表现

　3UI交互智能迷你净化器设计--创意思维设计

　4回合制手游新增UI设计规范研究

　5基于用户体验的移动终端UI设计

　6大连智慧旅游平台UI浪漫设计研究

　7研析电子设备界面设计的方法及准则

　8基于Cocos2d-x的电视UI架构设计

　9一种基于AndroidUI分析与设计方法

　10智能手机UI界面设计分析

　11基于WPF的UI设计模式研究

　12试析图形图像UI设计

　13基于中国传统元素的手机应用UI设计研究

　14视觉传达设计的构成要素在游戏UI中的运用

　15UI设计与产品形象的关系探讨

　16浅谈软件UI的色彩情感

　17现代化养猪场三维建模与视景仿真系统的研究

　18浅谈手机UI界面的人性化设计

　19智能手机UI交互界面人性化设计研究

　20一种新型自动气象站触控屏交互式系统设计

　21UI设计与产品形象的关系研究

　22虚拟现实语境中的UI风格化

　23论UI设计中色彩的应用

　24手机UI界面的色彩搭配研究

　25地铁车辆与环境虚拟现实仿真研究

　26论UI设计中视觉元素的审美与功能

　27扁平化UI在时尚品牌营销类APP中的应用研究

　28中国传统视觉艺术与现代UI设计的融合

　29UI设计中图标设计探索

　30UI设计在塑造产品形象中的应用研究

　31基于短距无线通信的农网用户剩余电流在线监测技术研究及应用

　32论制造业生产管理软件的UI设计

　33大型矿用挖掘机外观造型设计研究

　34基于Android的智能家庭监控系统研制

　35UI界面设计的开创性用户体验探究

　36基于视知觉理论的3-6岁儿童教育类应用软件UI分析与设计

　37移动端智能手机软件产品的UI设计研究

　38基于Android的远程四轴运动控制系统研发

　39移动终端用户体验极简化设计研究

　40基于Android的农业大棚环境监控系统的设计

　41以用户为中心的交互式信息可视化设计研究

　42电商购物网站UI艺术设计研究

　43基于Android的健康管理系统客户端的设计与实现

　44智能手机UI主题界面交互设计

　45基于UG二次开发的机械零件库研究

　46基于C/S架构的嵌入式无线视频监控系统的研究与实现

　47拓路客特色旅游网站UI设计方案

　48UI设计中用户交互体验的视觉思维

　49基于混合设计模式的iOS事务记录App研究与实现

　50UI交互设计在信息科技中的探究

　51基于形态语义学的电子产品用户界面研究

　52智能手机UI设计中用户体验的视觉体验研究

　53UI界面设计中的`色彩心理研究

　54移动互联网产品中的UI视觉设计研究

　55移动终端环境下视觉训练软件UI设计模式研究

　56基于手机游戏的UI设计方法研究

　57论互联网+背景下的平面设计

　58基于HTML5和jQueryMobile的移动学习APP设计与实现

　59UI设计中图形创意方法

　60UI设计的交互性与界面视觉设计研究

　61浅谈艺术设计中UI界面设计及应用

　62手机操作系统ui设计浅析

　63浅析用户交互设计中的视觉性设计

　64UI设计中用户体验研究

　65一种嵌入式UI界面的设计原理浅谈

　66基于Android的大学生“学习伴侣”系统

　67中国传统元素在UI界面设计中的应用探析

　68基于Android的自定义通用可视化控件

　69基于技术接受模型的传统媒体客户端用户使用行为研究

　70基于特定主题的手机UI界面设计

　71儿童数字读物UI设计原则与风格探析

　72从街头篮球游戏分析游戏UI设计

　73浅谈交互设计流程中的视觉因素

　74基于jQueryMobile技术的移动网站开发研究

　75纬编立体提花织物的计算机仿真

　76纪检监察信息管理系统的设计与实现

　77移动医疗类产品的UI设计研究

　78网页UI设计中“中国风”元素的应用研究

　79基于移动终端微信平台的UI界面优化设计研究

　80UI设计中用户交互体验的视觉思维分析及探讨

　81利用网络平台进行农村科普教育的UI视觉表现形式研究

　82动态插画在视觉传达中的创新与应用

　83断舍离在UI设计中的思考及应用

　84古代装饰器物在中国风手游UI设计中的拟物与抽象

　85UI设计与用户体验在产品中的重要性

　86物联网猪场三维建模与视景仿真系统的设计与实现

　87如何培养技术与艺术相融合的高技能人才

　88浅谈UI设计中“扁平化设计”的运用和发展趋势--以IOSUI为例

　89论手机游戏UI设计中视觉艺术元素的构成

　90基于UI设计原则的网页界面评价

　91浅谈适应老年用户的手机社交应用UI设计

　92基于IOS平台的服装品牌APP开发设计

　93数字媒体时代视觉传达设计专业的现状及面临的挑战

　94智能手机教务学工系统APPUI设计的色彩研究

　95谈立体主义对手机UI设计发展的影响

　96移动学习APP软件生成平台的对比研究

;